https://github.com/simonfuhrmann/oxygen-mdc
A collection of light-weight material design web components
https://github.com/simonfuhrmann/oxygen-mdc
Last synced: 3 months ago
JSON representation
A collection of light-weight material design web components
- Host: GitHub
- URL: https://github.com/simonfuhrmann/oxygen-mdc
- Owner: simonfuhrmann
- License: bsd-2-clause
- Created: 2021-04-26T05:46:37.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-03-30T06:45:13.000Z (about 2 years ago)
- Last Synced: 2025-02-16T13:46:00.125Z (4 months ago)
- Language: TypeScript
- Size: 134 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Oxygen web-components
The Oxygen web-components are a light-weight collection of basic input
elements, such as text input, button, icons, etc.
Demo: https://oxygen-mdc.web.app/
## Usage
Install the Oxygen web components in:
```
npm install --save oxygen-mdc
```
Import the components into your code. For the button, use:
```ts
import 'oxygen-mdc/oxy-button';
```
Finally, use the component in your code:
```html
Push me
```
## Bugs and missing features
* Missing support for keyboard navigation: Buttons, checkboxes, tabs, etc.
cannot be activated with Enter or Space.
* The slider cannot be changed with the keyboard. On mobile, trying to change
the slider may scroll the page.
* Tabbing through elements in dialogs is broken, focus trapping and focus
restore is not properly implemented.
## Changelog
### Version 1.2.0
* Overhaul of the `oxy-tab` component. The styles are cleaner, and styleability
was improved. See the source file for style variables.
### Version 1.1.0
* Added `HTMLElementTagNameMap` to all elements
* Changed import to `lit/decorators.js` to include the `.js` extension
### Version 1.0.0
Changes for version 1.0.0 are centered around a different style for focused
elements using a blue outline (by default) instead of a background color.
Further, the focus will only show when the keyboard is used for navigation,
relying on the `:focus-visible` selector instead of `:focus`. Several other CSS
simplifications have been done.
API breaking changes for Version 1.0.0
####
* Removed `--oxy-button-background-color` as it can be styled on the host
* Changed `oxy-button`'s host style from `background-color` to `background`
* Changed `oxy-button`'s focus to use blue outline by default, which changes the
meaning of `--oxy-button-focus-color`
* Added `active` property for `oxy-button` which is set during activation, e.g.,
while the mouse button is pressed
####
* Changed `oxy-checkbox`'s focus to use blue outline by default
* Added `--oxy-checkbox-checked-border` variable
* Added `--oxy-checkbox-focus-color` variable
####
* Default for `--oxy-dialog-text-color` is now inherited from parent
* The `oxy-dialog` can now be styled with the CSS part `dialog`
####
* Added `oxy-input` styles for the disabled state
* Changed `--oxy-input-background-color` on `background-color` to
`--oxy-input-background` on `background`
* Replaced `--oxy-input-border-width` and `--oxy-input-border-color` with
`--oxy-input-border` which defines all border attributes
* Replaced `--oxy-input-border-color-focused` with
`--oxy-input-border-focused` which defines all border attributes
* Default for `--oxy-input-text-color` is now inherited from parent
####
* Added `--oxy-slider-focus-color` variable
* Added `--oxy-slider-track-height` variable
* Added `--oxy-slider-thumb-size` and `--oxy-slider-thumb-radius` variables
####
* Replaced `--oxy-tabs-border-color` with `--oxy-tabs-border` which
defines all border attributes
####
* Default for `--oxy-textarea-text-color` is now inherited from parent
* Changed `--oxy-textarea-background-color` on `background-color` to
`--oxy-textarea-background` on `background`
* Changed `--oxy-textarea-background-color-focused` on `background-color` to
`--oxy-textarea-background-focused`
* Replaced `--oxy-textarea-border-width` and `--oxy-textarea-border-color`
with `--oxy-textarea-border` which defines all border attributes
* Replaced `--oxy-textarea-border-color-focused` with
`--oxy-textarea-border-focused` which defines all border attributes
* Default for `--oxy-textarea-box-shadow` changed to `none`
* Default for `--oxy-textarea-box-shadow-focused` changed to `none`
* Added `--oxy-textarea-placeholder-color` variable