Changelog

Web Awesome follows Semantic Versioning, and each release on this page follows the Keep a Changelog convention. Each component carries a status badge that tells you what to expect from its API.

These have a settled API. Breaking changes land only in major versions, and deprecated features stay through the next major release. These are still finding their shape. APIs can change between minor versions, so use them in prototypes — not production code you can't easily update.

Unreleased

Link to This Section
  • Added the capture attribute to <wa-file-input> for capturing media directly from a device's camera or microphone #2380

3.7.0

Link to This Section

  • Added two new experimental components: <wa-video> and <wa-video-playlist>
  • Added --wa-button-transform-hover and --wa-button-transform-active design tokens
  • Added the wa-text-wrap-nowrap text utility class for preventing text from wrapping
  • Added the wa-text-wrap-balance text utility class for evenly distributing text across lines
  • Added the wa-text-wrap-pretty text utility class for avoiding orphaned words on the last line (not supported in Firefox)
  • Fixed a bug in <wa-textarea> with resize="auto" where the height stayed collapsed when the textarea was initially hidden #2347
  • Fixed a bug in <wa-button-group> that caused single buttons to not have the correct border radius #2367
  • Fixed a bug in <wa-switch> that showed the switch direction backwards in RTL #2330
  • Fixed a bug in <wa-popover> where the popover would overflow the viewport on narrow screens #2333
  • Fixed a bug in <wa-radio-group> where the label was vertically offset by a few pixels compared to other form control labels #2334
  • Fixed a bug in <wa-badge> that caused the height to differ slightly when icons were present in the start or end slot #2280
  • Fixed a bug in <wa-toast> that prevented notifications from being read properly in certain screen readers #2282
  • Fixed a Playful theme bug where modifier classes (e.g. wa-filled) didn't apply to native button elements
  • Updated --wa-color-mix-hover and --wa-color-mix-active values for all themes for better hover and active feedback #2360
  • Upgraded the <wa-copy-button> component from experimental to stable
    • Added support for custom buttons
    • Added tooltip attribute to control when feedback is shown in the tooltip on hover and click

3.6.0

Link to This Section

  • Added a :::pro callout variant in the docs that renders with the same orange/white styling as the Pro badge
  • Added xs and xl sizes for all form controls and sized components
    • Deprecated small, medium, and large in favor of s, m, and l (old values will continue to work in 3.x)
  • Added beforeinput event to <wa-number-input> stepper buttons so value changes can be cancelled with event.preventDefault()
  • Added the --backdrop-filter CSS custom property to <wa-dialog> and <wa-drawer> for applying filters such as blur() to the backdrop
  • Fixed a bug in <wa-checkbox> where the value property returned null instead of 'on' when unchecked
  • Fixed a bug in <wa-rating> where disabling via a <fieldset> did not properly restore the enabled state when the fieldset was re-enabled
  • Fixed a bug in <wa-zoomable-frame> where zoom control buttons did not properly update their disabled state after zoom levels were parsed
  • Fixed a bug in <wa-button> where icon-only buttons with with-caret were sized as a square, causing the caret to overflow
  • Fixed a bug in <wa-checkbox> where the aria-checked attribute was not set to mixed when the checkbox was indeterminate
  • Fixed a bug in <wa-file-input> that incorrectly exposed a file-icon slot that never worked as described #2294
  • Fixed React imports to point directly to each component's index.js file #2293
  • Fixed a bug in <wa-dropdown-item> where disabled items in a submenu showed a pointer cursor instead of the default cursor #2276
  • Fixed a bug in <wa-dropdown-item> where items with an open submenu did not show a selection state
  • Fixed a bug in <wa-input> and <wa-number-input> where invalid values for number, date, time, and datetime-local types were preserved instead of being sanitized to an empty string like the native input
  • Fixed a bug where <wa-dropdown-item> was erroneously listed as experimental
  • Fixed <pre> border radius in Native Styles so it correctly uses the --wa-panel-border-radius token like similar elements
  • Refactored component tests across core and pro packages to follow a consistent structure with improved coverage
  • Replaced the tooltip in the experimental <wa-copy-button> with a built-in feedback popup that works with default and custom triggers
    • Added the feedback-placement attribute to replace tooltip-placement
    • Added the feedback CSS part
    • Removed the tooltip-placement attribute and the related tooltip__* parts
  • Upgraded the following components from experimental to stable: <wa-bar-chart>, <wa-bubble-chart>, <wa-chart>, <wa-combobox>, <wa-doughnut-chart>, <wa-file-input>, <wa-line-chart>, <wa-copy-button>, <wa-number-input>, <wa-pie-chart>, <wa-polar-area-chart>, <wa-radar-chart>, <wa-scatter-chart>, <wa-sparkline>, <wa-toast>, and <wa-toast-item>
  • Updated @shoelace-style/localize to 3.2.2 to prevent Chrome translations from throwing errors #2322
  • Updated TypeScript to 5.9.3

3.5.0

Link to This Section

  • Moved <wa-page> from Web Awesome Pro to Web Awesome core
  • Added a new free experimental component: <wa-markdown> (#6 of 14 per stretch goals)
  • Added the data-wa-preload attribute for preloading components that aren't on the page yet when using the autoloader #1501
  • Added placement attribute to <wa-color-picker> #2099
  • Added form association to <wa-rating>
  • Added a default slot to <wa-copy-button> so users can provide custom buttons #1327
  • Added :state(success) and :state(error) CSS custom states to <wa-copy-button> for styling feedback on custom triggers
  • Added the disabled, icon-button, link, and loading custom states to <wa-button> #2185
  • Added the disabled custom state to <wa-option> so the disabled style applies when using the property #1997
  • Added the with-count attribute to <wa-textarea> to show a character count below the textarea
  • Fixed a bug in the native styles utility where <select> text could overlap the caret icon when the selected option had a long name
  • Fixed a bug in the native styles utility where <select multiple> did not expand to show multiple options
  • Fixed a bug in <wa-badge> where role was incorrectly set on a <slot> element, which is not allowed per spec #2163
  • Fixed a bug in <wa-toast-item> where the progress ring's continuously updating value was announced by screen readers #2126
  • Fixed a bug in <wa-spinner> where the --track-width custom property was not being applied to the track and indicator properly #1317
  • Fixed a bug in form controls where the focus ring would flash white in dark mode in Firefox due to the browser transitioning from the system outline color #2074
  • Fixed a bug in <wa-dropdown> where heading colors in the menu used !important, preventing users from overriding them with light DOM styles #2102
  • Fixed a bug in <wa-select> where the :state(blank) custom state was incorrectly applied when the selected option had an empty string value #1920
  • Fixed a bug in <wa-dropdown-item> where the click event could still fire when the item was disabled #1817
  • Fixed a bug in <wa-select>, <wa-combobox>, and <wa-option> where the change and input events could dispatch with incorrect timing #2243
  • Fixed a bug in <wa-drawer> that threw an error when including Web Awesome in the <head> #2241
  • Fixed Lit dev mode "change-in-update" warnings across multiple components #1269
  • Fixed a bug in Native Styles where text would incorrectly overflow in <pre> elements
  • Fixed a bug in <wa-details> where rapid toggling of the open state could cause the content visibility to get out of sync with the open attribute
  • Fixed a bug in <wa-tree-item> where rapid clicking on the expand button could cause the expand/collapse indicator to get out of sync with the children visibility
  • Fixed a bug in <wa-select> and <wa-combobox> where the selected value was not displayed when the value property was set before options were added to the DOM #2253
  • Fixed a bug in <wa-carousel> where slide contents were not interactive when the carousel was initially rendered inside a hidden container (e.g., an inactive tab panel). #2133
  • Updated the Awesome and Shoelace themes #2135:
    • Adds missing <input type="range"> overrides to Shoelace theme to match <wa-slider>
    • Adds <wa-combobox> overrides to both themes to match other text-based inputs
    • Fixed a bug in the Awesome theme to remove an erroneous transform property from <wa-radio>s with appearance="button" #1766
    • Fixed a bug in the Shoelace theme where size had no effect on <wa-callout>
    • Fixed a bug in both themes where appearance had no effect on <wa-card>
    • Updated Awesome theme --wa-form-control-padding-block and --wa-form-control-padding-inline to better match its source material (Font Awesome)
    • Updated Shoelace theme --wa-color-focus and focus styles to better match its source material (Shoelace)
  • Improved the accessibility of <wa-rating> by moving role and ARIA attributes to the host element #2205
  • Improved performance of <wa-textarea> by only creating a resize observer when necessary
  • Improved SSR compatibility by adding server-side rendering guards to components that use browser-only APIs

3.4.0

Link to This Section

  • Added --wa-space-5xl design token to all themes #1606
  • Added wa-gap-5xl utility class #1606
  • Added wa-gap-4xl to the gap utility :where() selector
  • Added --wa-font-size-3xs and --wa-font-size-5xl design tokens #1606
  • Added *-3xs and *-5xl to wa-font-size, wa-body, wa-heading, wa-caption, and wa-longform utility classes #1606
  • Added support for labeled swatches in <wa-color-picker> by accepting an array of { color, label } objects via the swatches property, improving screen reader accessibility
  • Added the ability to return promises from icon resolvers #2144
  • Fixed a bug in <wa-dropdown-item> where aria-checked was incorrectly set on items when type was not checkbox #2180
  • Fixed <wa-badge> font size to use --wa-font-size-3xs now that the token is available #2162
  • Fixed the off-centered position of indent guides in <wa-tree>
  • Fixed slider styling when using the label slot so that it matches attribute use. #2124
  • Fixed a bug in <wa-scroller> that caused horizontal page overflow in Chrome when containing wide content such as tables
  • Fixed a bug in <wa-details> and native <details> that caused full-width elements to overflow the details content #2137
  • Fixed a bug in <wa-slider> that introduced a required attribute which isn't valid on range elements #1471
  • Fixed horizontal layout styles in <wa-card> that used invalid or non-matching ::slotted() selectors for the body and actions regions #2198
  • Fixed the autocorrect property type in <wa-input> and <wa-combobox> to use boolean instead of a string union
  • Fixed a bug in <wa-dropdown-item> that caused descenders to get clipped at certain line heights #2207
  • Fixed a bug in <wa-number-input> where pressing stepper buttons on a touch device would show the virtual keyboard and shift the page
  • Fixed a bug in <wa-select> which caused it to not be clearable with initial values set #2141
  • Improved <wa-tree> and <wa-tree-item> so all internal dimensions (labels, checkboxes, expand buttons, etc.) scale proportionally with font-size, making it easy to resize the tree #2147
  • Improved <wa-combobox>
    • Added autocapitalize, autocorrect, enterkeyhint, inputmode, and spellcheck properties to <wa-combobox> to support virtual keyboard customization
    • Added allow-create attribute to <wa-combobox> that lets users create new options on the fly. When typing text that doesn't match any existing option, a "Create [value]" option appears. Selecting it adds a real <wa-option> to the DOM. Fires a cancelable wa-create event for custom handling.
    • Added input event dispatching to <wa-combobox> when the user types, matching the behavior of <wa-input> and native form controls
    • Fixed a bug in <wa-combobox> where custom values were not committed on blur when allow-custom-value was set
    • Fixed a bug in <wa-combobox> where clearing the input and blurring would restore the previous selection instead of clearing the value
    • Removed the autocomplete property from <wa-combobox> since it conflicted with the native HTML attribute
  • Improved <wa-select>, <wa-combobox>, and <wa-option> performance with large numbers of options by batching slot changes, caching options, and lazily rendering check icons
  • Improved <wa-card>: the body part wraps the default slot in a container instead of on the slot, preserving normal slot display and accessibility #2198
  • Improved <wa-tab-group>: the body part wraps the default slot in a container instead of on the slot, consistent with <wa-dialog> and <wa-card>
  • Updated <wa-zoomable-frame> with an opt-in attribute for theme syncing #2165
  • [Docs]: Updated space, gap, stack, and cluster documentation for the new tokens and utilities #1606
  • [Docs]: Updated typography and text documentation for the new tokens and utilities #1606

3.3.1

Link to This Section

  • Removed a preinstall script in webawesome-pro that was causing issues in some package managers.

3.3.0

Link to This Section

  • Added <wa-chart> and other chart types as experimental Pro components #1073
  • Added <wa-toast> and <wa-toast-item> as experimental Pro components #105
  • Added wa-button class for styling <a> elements as buttons #2040
  • Added --popup-border-width parameter to <wa-popup>. This must be set to match the width of any border added to the popup element #2070
  • Added start and end slots to <wa-badge> #2082
  • Fixed a bug in <wa-switch> and <wa-checkbox> not rendering properly on first load #2105
  • Fixed a bug in <wa-drawer> and <wa-dialog> where it was attempting to register global event listeners in server environments. #2105
  • Fixed a bug in <wa-textarea> and <wa-input> where the internally rendered form controls were not resetting their value properly. #2105
  • Fixed a bug in HasSlotController where it would attempt to call APIs not available on the server. #2105
  • Fixed a bug in <wa-page> where it was attempting to insert styles during SSR with unsupported APIs. #1862
  • Fixed a bug in <wa-page> where the hamburger navigation would show up if there was no slot content. #1601
  • Fixed a bug in <wa-dropdown-item> where a click event would fire on disabled. #2023
  • Fixed a bug in the custom elements manifest where events may not have a name. #2026
  • Fixed a bug in <wa-select> where options with selected set via framework property binding (e.g., Vue's :selected) were not respected when with-clear was present #1985
  • Fixed a bug in <wa-radio-group>, <wa-slider>, <wa-checkbox>, and <wa-switch> to align with how browsers differentiate attributes vs properties. #2105
  • Fixed a bug in <wa-input> where it stays invalid when updating value property. #2105
  • Fixed a bug <wa-color-picker> that prevented it from flipping horizontally when position to the right of the viewport. #2024
  • Fixed a bug by adding color: inherit to the <wa-dialog> and <wa-drawer> styles so they inherit the text color from the document context rather than the browser default. #2064
  • Fixed a bug that caused 0ms animations to not fire correctly in the internal animateWithClass() function #2068
  • Fixed a bug that caused <wa-dropdown> elements to scroll the document in Chrome 145
  • Fixed a bug in native styles so border-radius does not apply to svg elements by default #2078
  • Fixed a bug in <wa-popup> that caused arrows to point the wrong direction for -start and -end placements
  • Fixed a bug in <wa-split-panel> that caused a ResizeObserver error in Chromium-based browser when resizing the primary panel #2018
  • Fixed a bug that caused the Escape key to close more than just the active dismissible component when nested inside other dismissible elements #2096
  • Fixed a bug that forced a box-sizing opinion on host elements

3.2.1

Link to This Section

  • Fixed a bug in the build script causing llms.txt and dist/skills to be omitted from Web Awesome Pro packages. #2022

3.2.0

Link to This Section

  • Added <wa-file-input> as an experimental pro component #1240
  • Added <wa-sparkline> as an experimental pro component
  • Added <wa-number-input> as an experimental component for numeric input with stepper buttons #1688
  • Added Agent Skill for AI coding assistants following the agentskills.io specification
  • Added llms.txt to assist AI agents with using Web Awesome #1100
  • Added types for Vue and Svelte generated by CEM
  • Added pointercancel and touchcancel event handling to draggable elements to prevent drags from getting stuck
  • Added wa-justify-content-* utility classes #1930
  • Added wa-flex-wrap utility classes #1994
  • Added missing wa-gap-4xl utility class #1931
  • Added track and indicator CSS parts to <wa-progress-ring> #1863
  • Added rotation, flip, and animation support to <wa-icon> with rotate, flip, and animation attributes supporting Font Awesome's animation utilities #1824
  • Added the ability to disable link buttons in <wa-button> #1848
  • [Docs]: Included framework specific documentation for Svelte, Vue, and Angular #1895
  • Fixed a bug in <wa-select> where the selected attribute on <wa-option> was ignored when with-clear was present [#1922]
  • Fixed a bug in <wa-popover> where the popover closed unexpectedly when clicked inside while it is declared in a shadow DOM #1969
  • Fixed a bug in <wa-tag> where the icon color was mismatched with the tag's appearance #1814
  • Fixed a bug in <wa-animated-image>, <wa-carousel>, <wa-progress-ring>, <wa-slider> that violated the style-src-attr CSP directive when enabled #1937
  • Fixed a bug in <wa-icon> to support Font Awesome Pro+ icon families that include qualifiers (e.g., family="jelly-duo" now works correctly instead of requiring family="jelly" variant="duo-regular") and updated Font Awesome to 7.1.0
  • Fixed a bug in <wa-icon> where Bootstrap icon sizes were overwritten #1968
  • Fixed a bug in <wa-tooltip> where safe triangles were not respected #1967
  • Fixed a bug in <wa-dropdown> where submenu detection would not work in shadow DOM #1956
  • Fixed a bug in <wa-popup> and <wa-dropdown-item> that caused an error when removing a popup while it was opening #1910
  • Fixed a bug in <wa-popup> and <wa-dropdown> that caused errors when shadow DOM queries returned null #1911
  • Fixed a bug in <wa-combobox> that prevented the listbox from opening when options were preselected #1883
  • Fixed a bug in draggable elements that caused a TypeError on touchend events when event.touches was empty
  • Fixed a bug in <wa-tree-item> that caused the cursor to show a pointer when no expand icon was present #1936
  • Fixed a bug in <wa-tree-item> that caused the chevron to render the wrong direction in RTL #1798
  • Fixed a bug in <wa-button> that caused <wa-dropdown> elements to close immediately after opening when placed inside a <form> element #1996
  • Fixed a bug in <wa-radio-group> where <wa-radio> elements with an explicit size would be overridden by the radio group even when the group had no size set #2005
  • Fixed a bug in <wa-radio-group> that caused radio sizes to not work as documented #2001
  • Fixed a bug in <wa-popover> that caused event handlers to be lost when moving the host element around in the DOM #1976
  • Fixed a bug preventing the wa-visually-hidden-label class from hiding labels for radio groups and color pickers #2012
  • [Docs]: component APIs like slots, state, methods, etc, are now alphabetized #1895
  • [Docs]: component APIs now properly check their inheritance chain #1895
  • Improved the Persian translation #1923
  • Improved <wa-qr-code> to use CSS color for fill and background-color on the host for background #1991
    • Deprecated the fill and background attributes
    • Existing implementations now correctly adapt to light/dark mode automatically
    • When using CSS, the QR code will now adapt to color and background color changes automatically
  • Modified wa-align-items-* utility classes to apply display: flex by default #1943

3.1.0

Link to This Section

  • Added <wa-combobox> as an experimental pro component #1074
  • Added version 2.0.0 of the official Web Awesome Figma Design Kit
  • Added npm support for Web Awesome Pro
  • Added layers.css to define cascade layer order and updated palettes, themes, native styles, and utilities to import the new rule for more fail-safe modularity #1793
  • [PRO]: Fixed a few sizing bugs in <wa-page> and slot="footer" no longer will always "overflow" the container.
  • Fixed a bug in <wa-slider> that caused some touch devices to end up with the incorrect value #1703
  • Fixed a bug in <wa-card> that prevented some slots from being detected correctly #1450
  • Fixed a z-index bug in <wa-scroller> styles #1724
  • Fixed a bug in <wa-icon> that caused some icon libraries to render with the incorrect SVG fill #1733
  • Fixed a bug in <wa-tree-item> that caused the spinner to not show when lazy loading #1678
  • Fixed a bug in <wa-dropdown> that caused the browser to hang when cancelling the wa-hide event #1483
  • Fixed a bug in <wa-tab-group> that ensures the active indicator always shows #1206
  • Fixed a bug in <wa-dropdown-item> that prevented the icon dependency from being imported #1825
  • Fixed a bug in <wa-select> that prevented clicks on the tag's remove button from removing options in multiple mode
  • Fixed a bug in <wa-select> that caused tags to appear in alphabetical order instead of selection order when using multiple
  • Fixed a bug in Web Awesome form controls that caused <wa-input form="foo"> to set the form property to equal "foo" instead of returning an HTMLFormElement breaking platform expectations. #1815
  • Fixed a bug in <wa-button> causing it to not copy over attributes for form submissions. #1815
  • Fixed a bug where the build script was not building /dist/(utilities|events).js #1816
  • Improved performance of <wa-icon> so initial rendering occurs faster, especially with multiple icons on the page #1729
  • Improved <wa-slider> to not throw an error when string values are passed to the min, max, and step properties #1823
  • Improved performance of all components by fixing how CSS is imported and reused #1812
  • Modified the default transition styles of <wa-dropdown-item> to use design tokens #1693

3.0.0

Link to This Section

  • Fixed a bug in <wa-button> where slotted badges weren't properly positioned in buttons with an href #1377
  • Fixed focus outline styles in <wa-details> and native <details> #1456
  • Fixed focus outline styles in <wa-scroller>, <wa-dialog>, and <wa-drawer> #1484
  • Fixed a bug in <wa-checkbox> where its value would revert to "" when checked / unchecked #1547
  • Fixed a bug that caused icon button labels to not render in frameworks #1542
  • Fixed a bug in <wa-details> that caused the name property not to reflect #1538
  • Fixed a bug in <wa-dialog> and <wa-drawer> that prevented focus from being set on the dialog/drawer when opened #1302
  • Fixed an overflow style that was causing tab group content to be unnecessarily truncated #1401
  • Fixed a bug in <wa-icon> that caused icon buttons to render when non-text nodes were slotted in #1475
  • Fixed a bug in <wa-tooltip> that prevented tooltips from showing when disconnecting and then reconnecting to the DOM #1595
  • Fixed a bug that caused the required * in form labels to have incorrect spacing in <wa-checkbox> and <wa-switch> #1472
  • Fixed a bug in <wa-dialog> and <wa-drawer> that caused the component to prematurely hide when certain child elements are used #1636
  • Fixed a bug in <wa-popover> and <wa-tooltip> that prevented dots and other valid ID characters from being used #1648
  • [Pro] Fixed a bug in <wa-page> that caused menu and aside content to reserve space for slots with disable-sticky
  • Fixed incorrect docs for the wa-include-error event which is dispatched by <wa-include> #1663
  • Fixed a bug in <wa-card> where slotted header and footer content wasn't properly aligned #1435
  • Improved autofill styles in <wa-input> so they span the entire width of the visual input #1439
  • Improved text utilities so that each size modifier always exactly matches the applied font size #1602
  • Improved Native Styles to use the --wa-font-weight-code design token
  • Modified <wa-slider> to only show the tooltip on the handle being dragged when in range mode #1320
  • Upgraded <wa-page> from experimental to stable

Pre-release Versions

Link to This Section

Betas, release candidates, and snapshots from before each major release.

Show all pre-release versions

3.0.0-beta.6

Link to This Section

3.0.0-beta.5

Link to This Section
  • 🚨 BREAKING: Updated <wa-icon> to use Font Awesome 7 #1222
    • Added the auto-width attribute to automatically size icons, since FA7 is fixed-width by default now
    • Changed the default width of icons to 1.25em to match FA7's fixed-width proportions
    • Improved support for duotone icons in <wa-icon>, including custom colors, custom opacity, and opacity swapping
    • Removed the fixed-width attribute as it's now the default behavior
  • 🚨 BREAKING: Renamed the icon-position attribute to icon-placement in <wa-details> #1340
  • 🚨 BREAKING: Removed the size attribute from <wa-button-group> as it only set the initial size and gets out of sync when buttons are updated (apply a size to each button instead)
  • Fixed incorrectly named exported tooltip parts in <wa-slider> #1277
  • Fixed a bug in <wa-dropdown> that caused menus to overflow the viewport instead of resizing #1267
  • Fixed a bug in <wa-dropdown> that prevented keyboard selection of items when nested in shadow roots #1270
  • Fixed a bug in <wa-dropdown> that prevented items passed in from slots from being detected #1271
  • Fixed a bug in JSX typings that prevented the types file from being exported #1295
  • Fixed a bug in JSX typings that generated the incorrect component imports #1303
  • Fixed a bug in <wa-slider> that prevented the thumb from receiving focus when clicking/tapping #1312
  • Fixed a bug in <wa-scroller> that caused the shadow to appear below relatively-positioned elements #1326
  • Fixed a bug in <wa-details> that caused it to expand/collapse when clicking on interactive elements in the summary #1252
  • Fixed <wa-button> to have static positioning by default and relative positioning only when used with <wa-badge> #1346
  • Fixed spacing in <wa-input> when both clear and password toggle icons are present #1325
  • Fixed a bug in <wa-radio-group> and <wa-radio> where changing appearances dynamically would render incorrectly #1178
  • Fixed a bug in <wa-input> that prevented the value from changing when assigning non-string values to value #1323
  • Fixed a bug in <wa-color-picker> that prevent the picker from staying in the viewport
  • Fixed a bug that in <wa-icon> that caused library, family, variant and name to not reflect [pr:#1395]
  • Fixed a bug in <wa-format-date> and <wa-relative-time> that caused spaces to appear before and after the output [#1417]

3.0.0-beta.4

Link to This Section
  • Added the icon-position attribute to <wa-details> #1099
  • Added the animating custom state to <wa-details> #1214
  • Added --wa-tooltip-border-color, --wa-tooltip-border-style, and --wa-tooltip-border-width tokens #1224
  • Added the without-arrow attribute to <wa-popover> and <wa-tooltip> to hide arrows without artifacts
  • Added JSX types for use with React and others #1256
  • Added <input type="file"> to native styles #1279
  • Fixed a bug in <wa-details> that caused the content to overflow the container when animating #1149
  • Fixed a bug in <wa-dialog> and <wa-drawer> that prevented the header from showing when the label was missing #1209
  • Fixed a missing dependency required for React wrappers
  • Fixed missing :hover and :active styles on native buttons without an appearance modifier class

3.0.0-beta.3

Link to This Section

3.0.0-beta.2

Link to This Section
  • Added .wa-hover-rows to native styles to opt-in to highlighting table rows on hover.
  • Added .wa-hover-rows to native styles to opt-in to highlighting table rows on hover #1111
  • Added missing changelog entries for beta.1 #1117
  • Fixed a bug in <wa-select> with options that had blank string values. #1136
  • Fixed a bug in <wa-dropdown> that prevented the menu from flipping/shifting to keep the menu in the viewport #1122
  • Fixed the themes page so it shows the correct palette and imports #1125
  • Fixed filled and outlined appearance styles in various components #1102
  • Fixed active state styles in the Awesome theme #1129
  • Fixed native text styles when applied to certain backgrounds [pr:https://github.com/shoelace-style/webawesome/pull/1130]
  • Improved the organization of essential and optional styles #1113

3.0.0-beta.1

Link to This Section

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.

  • input and change events on form controls like <wa-input> now are always set to bubble and compose.
  • Greatly simplified how native styles work and removed redundant utilities
    • Removed .wa-button, .wa-callout classes
    • Removed themes/native/*.css files; use native.css to opt into native styles
    • Clarified which utilities classes can be applied to which native elements
  • Renamed the classic theme to shoelace
  • Removed :root selector from all theme, color palette, and semantic color stylesheets except for the default theme and colors. All of these styles are now solely scoped to classes, such as .wa-theme-awesome, .wa-palette-bright, and .wa-brand-orange.
  • Removed most custom properties from components that can otherwise be styled with ::part() selectors and standard CSS properties.
  • <wa-dropdown> was reworked and simplified to not use menu, menu item, menu label; use <wa-dropdown-item> instead
  • Renamed pulse attribute in <wa-badge> to attention="pulse" and added attention="bounce" #940
  • Renamed the vertical attribute to orientation="vertical" in <wa-split-panel> and <wa-divider> to align with other components and the platform #674
  • Renamed certain boolean attributes to be consistent using the with-* and without-* pattern:
  • Renamed all prefix and suffix slots to start and end, affecting the following components:
  • Removed the extra dash in the <wa-carousel> CSS part name pagination-item--active => pagination-item-active
  • Renamed the eye-dropper-* parts to eyedropper in <wa-color-picker>
  • removed the size attribute from <wa-card>; please set the size of child elements on the children directly
  • Greatly simplified the sizing strategy across components and utilities
    • Removed --wa-size, --wa-size-smaller, --wa-size-larger, --wa-space, --wa-space-smaller, and --wa-space-larger
    • Added tokens for --wa-form-control-padding-inline, --wa-form-control-padding-block, and --wa-form-control-toggle-size
    • Refactored default --wa-font-size-* values to use an apparent 1.125 ratio and round rendered values to the nearest whole pixel
    • Added convenience tokens for --wa-font-size-smaller and --wa-font-size-larger
    • Updated components to use relative em values for internal padding and margin wherever appropriate
  • Removed the hint property and slot from <wa-radio>; please apply hints directly to <wa-radio-group> instead
  • Redesigned <wa-slider> with extensive new functionality
    • Added support for range sliders with dual thumbs using the range attribute
    • Added vertical orientation support with orientation="vertical"
    • Added visual markers at each step with with-markers
    • Added contextual reference labels with the reference slot
    • Added tooltips showing current values with with-tooltip
    • Added customizable indicator offset with indicator-offset attribute
    • Added value formatting support with the valueFormatter property
    • Improved the styling API to be consistent and more powerful (no more browser-specific selectors and pseudo elements to style)
    • Updated to use consistent with-* attribute naming pattern
  • Reworked <wa-select> to use <wa-option selected> to set initially selected options, removing the "no spaces allowed" restrictions for option values
  • Added a new component: <wa-popover> (#2 of 14 per stretch goals)
  • Added a new component: <wa-zoomable-frame> (#3 of 14 per stretch goals)
  • Added a min-block-size to <wa-divider orientation="vertical"> to ensure the divider is visible regardless of container height
  • Added support for name in <wa-details> for exclusively opening one in a group
  • Added --wa-content-spacing to themes to set default spacing between HTML elements in Native Styles
  • Added --checked-icon-scale to <wa-checkbox>
  • Added --tag-max-size to <wa-select> when using multiple
  • Added support for data-dialog="open <id>" to <wa-dialog>
  • Added support for data-drawer="open <id>" to <wa-drawer>
  • Added @media (hover: hover) to component hover styles to prevent sticky hover states
  • Added the ability to use <wa-radio-group disabled> to disable all radios in the group
  • Fixed a bug in <wa-radio-group> that caused radios to uncheck when assigning a numeric value
  • Fixed <wa-button-group> so dividers properly show between buttons
  • Fixed the tooltip position in <wa-slider> when using RTL
  • Fixed a bug in <wa-details> and native <details> styles that made the summary hard to click
  • Fixed a handful of bugs unify form control height across components and native elements
  • Fixed a bug where input events from components weren't bubbling
  • Improved CSS utilities and Native Styles to use CSS layers for easier end user customization (no more specificity conflicts — your CSS wins!)
  • Improved native <button> styles to properly space icons
  • Improved button appearances in <wa-color-picker>
  • Improved <wa-rating> to have more accessible icons by default

3.0.0-alpha.13

Link to This Section
  • 🚨 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 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

Link to This Section
  • Simplified <wa-breadcrumb-item> by removing the base CSS part
  • Simplified <wa-menu-item> and <wa-menu-label> by removing the base CSS part
  • 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

Link to This Section
  • Color palette tweaking UI. Tweak hue, grays, overall colorfulness, save or share the results.
  • Added a pink scale to all color palettes
  • 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.
  • Added hint attribute and corresponding slot to <wa-radio>
  • 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
  • Added label attribute and defaultLabel property to <wa-option> to override the generated label (useful for rich content)
  • Added label attribute and defaultLabel property to <wa-menu-item> to override the generated label (useful for rich content)
  • Re-introduced --border-color on <wa-card> so that the card itself can have a different border color than its inner borders.
  • Added an orientation example to the native radio docs
  • Fixed a bug in <wa-switch> that caused tooltips to work incorrectly when toggling the switch
  • Fixed a bug in <wa-select> 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 in <wa-select>
  • Fixed a bug in <wa-select> that prevented the description from being read by screen readers
  • Fixed a bug in <wa-card> where child elements did not have correct rounding when headers and footers were absent.
  • Fixed a bug in <wa-card> that prevented slots from showing automatically without with- attributes
  • Fixed a bug that caused document.createElement('wa-tab') to fail (which also meant it could not be used in VueJS and other frameworks)
  • Fixed a number of broken event listeners throughout the docs
  • Tweaked hues of all color palettes to make them more distinct and make their hues more intentional
  • 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.
  • Dropped violet and teal from color palettes, instead using purple and cyan (this is not just a renaming, the colors have been adjusted too).
  • Dropped the base part from <wa-radio>. It can now be styled by directly applying CSS to the element itself.
  • Dropped getTextLabel() method from <wa-option> (if you need dynamic labels, just set the label attribute dynamically)
  • Dropped base part from <wa-option> for easier styling. CSS can now be applied directly to the element itself.
  • Dropped getTextLabel() method from <wa-menu-item> (if you need dynamic labels, just set the label attribute dynamically)

3.0.0-alpha.10

Link to This Section
  • 🚨 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
  • 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

Link to This Section
  • Added new themes:
    • Glossy
    • Matter
    • Premium
    • Playful
  • Added docs on themes and palettes
  • 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.
  • Separated colors and typography out from themes so they can be used independently

3.0.0-alpha.8

Link to This Section
  • Added appearance to <wa-callout> and <wa-tag>
  • Added new themes:
    • Awesome
    • Active
    • Brutalist
    • Mellow
    • Tailspin
  • 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
  • Simplified the internal structure and CSS properties of <wa-card>, removed base part.
  • Improved performance of <wa-select> when using a large number of options
  • Updated the Japanese translation
  • Renamed --wa-form-control-resting-color to --wa-form-control-border-color for familiarity and accuracy
  • 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
    • 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 size-based --wa-form-control-height-* tokens in favor of --wa-form-control-height (see size utilities)
  • Removed unused --wa-border-radius-xs token and wa-border-radius-xs utility class
  • Removed unused --wa-shadow-xs token

3.0.0-alpha.7

Link to This Section
  • Renamed applied.css to webawesome.css

3.0.0-alpha.6

Link to This Section
  • <wa-page>: mobile-breakpoint now takes any CSS length, not just pixels
  • 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 <wa-visually-hidden> in favor of the utility class
  • Removed stateful CSS parts in favor of custom states

3.0.0-alpha.5

Link to This Section
  • 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
    No results