Web Awesome follows Semantic Versioning. Breaking changes in components with the
Components with the
During the alpha period, things might break! We take breaking changes very seriously, but sometimes they're necessary to make the final product that much better. We appreciate your patience!
.wa-invert utility class to invert the current color scheme:state(blank) to <wa-input>, <wa-textarea>, and <wa-select> to style form inputs differently when empty.<wa-card>, removed base part.appearance to <wa-callout> and <wa-tag><wa-switch> where it would not properly change its "checked" state when its property changed.<wa-switch> where the value would be incorrectly submitted as "on" when a value is provided and the switch is checkedwa-split CSS utility that caused it to behave incorrectly<wa-select> when using a large number of options--wa-form-control-resting-color to --wa-form-control-border-color for familiarity and accuracy--wa-form-control-height-* tokens in favor of --wa-form-control-height (see size utilities)--wa-border-width-* and --wa-border-radius-* scale for better DX
--wa-border-width-scale to 1 and updated calculations of size-based --wa-border-width-* tokens--wa-border-radius-scale to 1 and updated calculations of size-based --wa-border-radius-* tokens--wa-border-radius-xs token and wa-border-radius-xs utility class--wa-border-radius-s is now the smallest border radius token, matching the value of the previous --wa-border-radius-xs token--wa-shadow-* scales for better DX
--wa-shadow-offset-y-scale to 1 and updated calculations of size-based --wa-shadow-offset-y-* tokens--wa-shadow-blur-scale to 1 and updated calculations of size-based --wa-shadow-blur-* tokens--wa-shadow-spread-scale to -0.5 and updated calculations of size-based --wa-shadow-spread-* tokens--wa-shadow-offset-x-* tokens to match calculations used for other shadow qualities (--wa-shadow-offset-x-scale remains 0)--wa-shadow-xs token.wa-visually hidden utility<wa-page> native styles and utilities<wa-visually-hidden> in favor of the utility class<wa-page>: mobile-breakpoint now takes any CSS length, not just pixelschecked and disabled custom states to <wa-checkbox> and <wa-radio>disabled, expanded, indeterminate, and selected custom states to <wa-tree-item>navigation-button--previous and navigation-button--next parts to navigation-button-previous and navigation-button-next in <wa-carousel>scroll-button--start and scroll-button--end parts to scroll-button-start and scroll-button-end in <wa-tab-group><wa-checkbox>: control--checked, control--indeterminate<wa-radio>: control--checked<wa-tree-item>: item--disabled, item--expanded, item--indeterminate, item--selected<wa-split-panel> to align with ARIA APG's window splitter pattern<wa-select>focus() method to <wa-radio-group><wa-dialog> with scroll locking shifting viewports.<wa-dialog> when using .show()<wa-rating> when using precision<wa-rating> that allowed tabbing into the rating when readonly<wa-relative-time> where the title attribute would show with redundant info<wa-select> that caused the placeholder to display incorrectly when using placeholder and multiple<wa-tooltip> that caused a memory leak in disconnected elements<wa-select> that prevented label changes in <wa-option> from updating the controller<wa-carousel> that caused interactive elements to be activated when dragging<wa-tab-group> that prevented changing tabs by setting active on <wa-tab> elements<wa-tab-group> that caused an error when removed from the DOM too quickly<wa-textarea> causing scroll jumping when using resize="auto"<wa-animated-image>noreferrer noopener by defaultthis.localize.dir() instead of el.matches(:dir(rtl)) so older browsers don't error outIf you're new to Web Awesome, you can skip this section. If you're coming from Shoelace, you're in the right place!
Here's a list of some of the things that have changed since Shoelace v2. For questions or help upgrading, the alpha discussion board is a great place to get help!
setKitCode() and getKitCode() functions as well as support for setting kit codes declaratively with data-webawesome-kitfamily and variant attributes to <wa-icon> and <wa-icon-button>active attribute to <wa-tab-group>data-dialog="close" to any button in the dialogdata-dialog="close" to any button in the drawer--show-duration and --hide-duration custom properties to <wa-details>, <wa-dialog>, <wa-drawer>, <wa-tree-item>, and <wa-popup><wa-color-picker>data-webawesome instead of data-shoelace; additionally, you can place it on any element now instead of just the associated <script> tagsl prefix to wa for Web Awesome, including tags, events, etc.primary variants to brand in all components<wa-checkbox> so that the internal checkbox now takes up the full height and width of its wrapping container.disabled attribute when disabled (use :state(disabled) or [data-wa-disabled] instead)<wa-checkbox> to no longer have a checked attribute set when their checked property is changed, e.g. el.checked = true (use the :state(:checked) or [data-checked] selector instead)<wa-checkbox> and <wa-switch> to use :state(checked) (fallback [data-wa-checked]) for styling their "checked" state (the checked attribute now maps to defaultChecked like native HTML checkboxes)data-optional, data-required, data-invalid, data-valid, data-user-invalid, and data-user-valid states to data-wa-* prefix to avoid conflicts with user provided attributes<wa-icon> so icons are no longer fixed width by default to accommodate variable width icons<wa-radio> from display: block; to display: inline-block<wa-tab-group> to implement a "roving tabindex" and <wa-tab> is no longer tabbable by default. This aligns closer to the APG pattern for tabs [#2041]<wa-tooltip> to no longer wrap content due to accessibility and styling issues. Tooltips are now associated using the for attribute + an id on the trigger [#123]<wa-spinner> so it doesn't wobble when zooming in Safari<wa-tab-group> so it uses a roving tab index instead of being able to cycle through each tabdefault from <wa-button> and made neutral the new defaultcircle modifier from <wa-button> because button's no longer have a set heightactive-tab-indicator part from <wa-tab-group>closable attribute from <wa-tab> because you can't nest interactive elements (see the updated example for a better method)show() method from <wa-tab-group> (use the active attribute instead)show() and hide() methods from <wa-dialog> and <wa-drawer> (toggle the open attribute instead)wa-request-close event from <wa-dialog> and <wa-drawer> (use the wa-hide event instead)inline from <wa-color-picker>getFormControls() since we now use Form Associated Custom Elements and can reliably access Web Awesome Elements via formElement.elements.valueAsDate from <wa-input>; use the following to mimic native behaviors:
setter: waInput.value = new Date().toLocaleDateString()
getter: new Date(waInput.value)valueAsNumber from <wa-input>; use the following to mimic native behaviors:
setter: waInput.value = 5.toString()
getter: Number(waInput.value)Did we miss something? Let us know!
Are you coming from Shoelace? The 2.x changelog can be found here.