Changelog

Web Awesome follows Semantic Versioning. Breaking changes in components with the Stable badge will not be accepted until the next major version. As such, all contributions must consider the project's roadmap and take this into consideration. Features that are deemed no longer necessary will be deprecated but not removed.

Components with the Experimental badge should not be used in production. They are made available as release candidates for development and testing purposes. As such, changes to experimental components will not be subject to semantic versioning.

Next

3.0.0

3.0.0-beta.6

3.0.0-beta.5

Bug Fixes and Improvements

3.0.0-beta.4

New Features

Bug Fixes and Improvements

3.0.0-beta.3

New Features

Bug Fixes and Improvements

3.0.0-beta.2

New Features

Bug Fixes and Improvements

3.0.0-beta.1

We're excited to share the first beta release of Web Awesome, which includes some breaking changes that make the library significantly more intuitive and consistent!

The list looks extensive, but that's because we've tried to be thorough in documenting every change. We expect most users will only encounter a few of these during their upgrade. The majority are simple attribute renames (like clearable becoming with-clear) and component simplifications that actually reduce the amount of code you need to write.

If you're a Web Awesome alpha user, please read through these release notes carefully!

Many of these changes and improvements were the direct result of feedback from users like you! These changes represent our commitment to getting the fundamentals right as we move from alpha into a more stable beta release.

🚨 Breaking Changes

New Features

Bug Fixes and Improvements

Removals

Alpha Changelogs

3.0.0-alpha.13

  • 🚨 BREAKING: Renamed <image-comparer> to <wa-comparison> and improved compatibility for non-image content
  • 🚨 BREAKING: Added slot detection to <wa-dialog> and <wa-drawer> so you don't need to specify with-header and with-footer; headers are on by default now, but you can use the without-header attribute to turn them off
  • 🚨 BREAKING: Renamed the image slot to media for a more appropriate naming convention
  • Added Theme Builder to create your own themes
  • Added a new Blog & News pattern category
  • Added a new free component: <wa-scroller> (#1 of 14 per stretch goals)
  • Added support for Duotone Thin, Light, and Regular styles and the Sharp Duotone family of styles to <wa-icon>
  • Added a default gap to <wa-tag> for better default spacing when used with icons
  • Fixed a bug that caused <wa-radio-group> to have an undesired margin below it
  • Fixed a bug in the Matter theme that prevented clicks on form control labels to not focus the control
  • Fixed a bug in <wa-select> that caused incorrect spacing of icons
  • Fixed a bug in <wa-select> that caused the listbox to now show after being disabled
  • Fixed a bug in <wa-radio-group> that prevented radio buttons from validating
  • Improved native radio alignment
  • Improved the .wa-cloak utility class so all FOUCE-related solutions are 100% opt-in

3.0.0-alpha.12

Enhancements

  • Added appearance to <wa-details> and <wa-card> and support for the appearance utilities in the <details> native styles.
  • Added an orange scale to all color palettes
  • Added the .wa-cloak utility to prevent FOUCE
  • Added the allDefined() utility for awaiting component registration
  • Simplified <wa-breadcrumb-item> by removing the base CSS part
  • Simplified <wa-menu-item> and <wa-menu-label> by removing the base CSS part
  • Added slots to checked-icon and submenu-icon in <wa-menu-item> so custom icons can be used

Bug fixes

  • Specifying inherited CSS properties on <wa-tooltip> now works as expected
  • Fixed a bug in <wa-select> that made it hard to use with VueJS, Svelte, and many other frameworks
  • Fixed a bug in <wa-select multiple> that sometimes resulted in empty <div> elements being output
  • Fixed a bug where changing a <wa-option> label wouldn't update the display label in <wa-select>
  • Added default spacing to icons slotted into <wa-tab>
  • Lots of fixes around pill-shaped elements:
    • Fixed the wa-pill class for text fields
    • Fixed pill style for <wa-input> and <wa-radio-button> elements
  • Fixed a bug in <wa-radio-button> that prevented active buttons from receiving the correct styles
  • Fixed a bug in <wa-button> that prevented the focus ring from showing in Safari
  • Fixed alignment of <wa-dropdown> inside button groups
  • Removed close watcher logic to backdrop hide animation bugs in <wa-dialog> and <wa-drawer>; this logic is already handled and we'll revisit CloseWatcher when browser support is better and behaviors are consistent
  • Revert <wa-dialog> structure and CSS to fix clipped content in dialogs (WA-A #123) and light dismiss in iOS Safari (WA-A #201)
  • Fixed a bug in <wa-color-picker> that prevented light dismiss from working when clicking immediately above the color picker dropdown
  • Fixed a bug in <wa-progress> that prevented Safari from animation progress changes
  • Fixed the missing indeterminate icon in native checkbox styles
  • Fixed a bug in <wa-radio> where elements would stack instead of display inline
  • Docs fixes:
    • Fixed the search dialog's styles so it doesn't jump around as you search
    • Theme cards now have icons

3.0.0-alpha.11

Color Palettes

  • Color palette tweaking UI. Tweak hue, grays, overall colorfulness, save or share the results.
  • Added a pink scale to all color palettes
  • Tweaked hues of all color palettes to make them more distinct and make their hues more intentional
  • Dropped violet and teal, instead using purple and cyan (this is not just a renaming, the colors have been adjusted too).
  • Fixed a bug in <wa-switch> that caused tooltips to work incorrectly when toggling the switch

Design Tokens

  • Added --wa-color-[hue] tokens with the "core" color of each scale, regardless of which tint it lives on. You can find them in the first column of each color palette.

Themes

  • Improved UI for theme remixing:
    • You can now override the brand color of any theme with any of the 9 hues supported.
    • Rich previews
    • Generated copyable code snippets.
    • Permalinks
  • Updated Active, Glossy, Playful, and Premium themes so that --wa-color-brand-fill-loud uses the core color of the chosen brand color, regardless of tint.

Components

<wa-radio>

  • Dropped the base part. It can now be styled by directly applying CSS to the element itself.
  • Added hint attribute and corresponding slot.

<wa-select>

  • Added the tag part (and associated exported parts) to <wa-select> to allow targeting the tag that shows when more than the max number of visible items have been selected
  • Fixed a bug that prevented the placeholder color from being customized with the --wa-form-control-placeholder-color token
  • Fixed an incorrect CSS value in the expand icon
  • Fixed a bug that prevented the description from being read by screen readers

<wa-option>

  • label attribute to override the generated label (useful for rich content)
  • defaultLabel property
  • Dropped getTextLabel() method (if you need dynamic labels, just set the label attribute dynamically)
  • Dropped base part for easier styling. CSS can now be applied directly to the element itself.

<wa-menu-item>

  • label attribute to override the generated label (useful for rich content)
  • defaultLabel property
  • Dropped getTextLabel() method (if you need dynamic labels, just set the label attribute dynamically)

<wa-card>

  • Fixed a bug where child elements did not have correct rounding when headers and footers were absent.
  • Re-introduced --border-color so that the card itself can have a different border color than its inner borders.
  • Fixed a bug that prevented slots from showing automatically without with- attributes

<wa-tab>

  • Fixed a bug that caused document.createElement('wa-tab') to fail (which also meant it could not be used in VueJS and other frameworks)

Docs

  • Added an orientation example to the native radio docs
  • Fixed a number of broken event listeners throughout the docs

3.0.0-alpha.10

  • 🚨 BREAKING: updated all components to use native events instead of wa- prefixed events. This will allow components to work more like native elements in your code, frameworks, third-party plugins, etc. To update your code, simply remove the prefix from your event listeners for the following events.
    • wa-input => input
    • wa-change => change
    • wa-blur => blur (this event will no longer bubble, use focusout for a bubbling version)
    • wa-focus => focus (this event will no longer bubble, use focusin for a bubbling version)
  • Added .wa-callout utility class
  • Added the orientation attribute to <wa-radio-group> to support vertical and horizontal radio items
  • Added docs for visual tests
  • Added docs on how to cherry-pick native styles
  • Changed the behavior of the variant and size attributes so that nested components that support these attributes but do not have them set inherit the values set on their ancestors. Additionally:
    • Added size attribute to <wa-dropdown>, <wa-button-group>, <wa-menu>, <wa-rating>, <wa-card>
    • Added variant attribute to <wa-button-group>
  • Fixed a bug in <wa-tab-group> that prevented nested tab groups from working properly
  • Fixed slot names for show-password-icon and hide-password-icon in <wa-input> to more intuitively represent their functions
  • Fixed a bug in <wa-textarea> that caused empty controls to submit a value if the initial value was deleted a certain way
  • Fixed a bug in <input>, <textarea>, and <select> styles that prevented full-width controls from using 100% width when wrapped in a <label>
  • Fixed a bug in <select> styles that caused the caret to block interactions and prevented the caret from rendering unless wrapped in a <label>
  • Fixed a bug in <wa-checkbox> that caused hints to render inline with the label

3.0.0-alpha.9

  • Added new themes:
    • Glossy
    • Matter
    • Premium
    • Playful
  • Added docs on themes and palettes
  • Separated colors and typography out from themes so they can be used independently
  • Added test suite to ensure all color palettes provide the color contrast they are supposed to
  • Added .wa-invert utility class to invert the current color scheme
  • Added :state(blank) to <wa-input>, <wa-textarea>, and <wa-select> to style form inputs differently when empty.

3.0.0-alpha.8

  • Simplified the internal structure and CSS properties of <wa-card>, removed base part.
  • Added appearance to <wa-callout> and <wa-tag>
  • Fixed a bug in <wa-switch> where it would not properly change its "checked" state when its property changed.
  • Fixed a bug in <wa-switch> where the value would be incorrectly submitted as "on" when a value is provided and the switch is checked
  • Fixed a bug in the wa-split CSS utility that caused it to behave incorrectly
  • Improved performance of <wa-select> when using a large number of options
  • Updated the Japanese translation

Theming

  • Added new themes:
    • Awesome
    • Active
    • Brutalist
    • Mellow
    • Tailspin
  • Renamed --wa-form-control-resting-color to --wa-form-control-border-color for familiarity and accuracy
  • Removed size-based --wa-form-control-height-* tokens in favor of --wa-form-control-height (see size utilities)
  • Updated the --wa-border-width-* and --wa-border-radius-* scale for better DX
    • Changed the value of --wa-border-width-scale to 1 and updated calculations of size-based --wa-border-width-* tokens
    • Changed the value of --wa-border-radius-scale to 1 and updated calculations of size-based --wa-border-radius-* tokens
    • Removed unused --wa-border-radius-xs token and wa-border-radius-xs utility class
    • Decreased the size of the scale so that --wa-border-radius-s is now the smallest border radius token, matching the value of the previous --wa-border-radius-xs token
  • Updated the --wa-shadow-* scales for better DX
    • Changed the value of --wa-shadow-offset-y-scale to 1 and updated calculations of size-based --wa-shadow-offset-y-* tokens
    • Changed the value of --wa-shadow-blur-scale to 1 and updated calculations of size-based --wa-shadow-blur-* tokens
    • Changed the value of --wa-shadow-spread-scale to -0.5 and updated calculations of size-based --wa-shadow-spread-* tokens
    • Updated calculations of size-based --wa-shadow-offset-x-* tokens to match calculations used for other shadow qualities (--wa-shadow-offset-x-scale remains 0)
    • Removed unused --wa-shadow-xs token

3.0.0-alpha.7

  • Renamed applied.css to webawesome.css

3.0.0-alpha.6

Native styles

Style utilities

Components

  • Removed <wa-visually-hidden> in favor of the utility class
  • <wa-page>: mobile-breakpoint now takes any CSS length, not just pixels
  • Added checked and disabled custom states to <wa-checkbox> and <wa-radio>
  • Added disabled, expanded, indeterminate, and selected custom states to <wa-tree-item>
  • Renamed the navigation-button--previous and navigation-button--next parts to navigation-button-previous and navigation-button-next in <wa-carousel>
  • Renamed the scroll-button--start and scroll-button--end parts to scroll-button-start and scroll-button-end in <wa-tab-group>
  • Removed stateful CSS parts in favor of custom states
    • <wa-checkbox>: control--checked, control--indeterminate
    • <wa-radio>: control--checked
    • <wa-tree-item>: item--disabled, item--expanded, item--indeterminate, item--selected

3.0.0-alpha.5

  • Added the Finnish translation
  • Added the Italian translation
  • Added the Ukrainian translation
  • Added support for Enter to <wa-split-panel> to align with ARIA APG's window splitter pattern
  • Added more resilient support for lazy loaded options in <wa-select>
  • Added support for vertical button groups
  • Added the focus() method to <wa-radio-group>
  • Fixed a bug in <wa-dialog> with scroll locking shifting viewports.
  • Fixed a bug in <wa-dialog> when using .show()
  • Fixed a bug in <wa-rating> when using precision
  • Fixed a bug in <wa-rating> that allowed tabbing into the rating when readonly
  • Fixed a bug in <wa-relative-time> where the title attribute would show with redundant info
  • Fixed a bug in <wa-select> that caused the placeholder to display incorrectly when using placeholder and multiple
  • Fixed a bug in <wa-tooltip> that caused a memory leak in disconnected elements
  • Fixed a bug in <wa-select> that prevented label changes in <wa-option> from updating the controller
  • Fixed a bug in <wa-carousel> that caused interactive elements to be activated when dragging
  • Fixed a bug in <wa-tab-group> that prevented changing tabs by setting active on <wa-tab> elements
  • Fixed a bug in <wa-tab-group> that caused an error when removed from the DOM too quickly
  • Fixed a bug in <wa-textarea> causing scroll jumping when using resize="auto"
  • Fixed a bug with certain bundlers when using dynamic imports
  • Improved alignment of the play icon in <wa-animated-image>
  • Improved behavior of link buttons to not set noreferrer noopener by default
  • Updated all checks for directionality to use this.localize.dir() instead of el.matches(:dir(rtl)) so older browsers don't error out

Did we miss something? Let us know!

    No results
    Navigate Enter Select Esc Close