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/
Install the Oxygen web components in:
npm install --save oxygen-mdc
Import the components into your code. For the button, use:
import 'oxygen-mdc/oxy-button';
Finally, use the component in your code:
<oxy-button>Push me</oxy-button>
- 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.
- Overhaul of the
oxy-tab
component. The styles are cleaner, and styleability was improved. See the source file for style variables.
- Added
HTMLElementTagNameMap
to all elements - Changed import to
lit/decorators.js
to include the.js
extension
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 frombackground-color
tobackground
- Changed
oxy-button
's focus to use blue outline by default, which changes the meaning of--oxy-button-focus-color
- Added
active
property foroxy-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 partdialog
- Added
oxy-input
styles for the disabled state - Changed
--oxy-input-background-color
onbackground-color
to--oxy-input-background
onbackground
- 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
onbackground-color
to--oxy-textarea-background
onbackground
- Changed
--oxy-textarea-background-color-focused
onbackground-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 tonone
- Default for
--oxy-textarea-box-shadow-focused
changed tonone
- Added
--oxy-textarea-placeholder-color
variable