From 986e52f977d01792076b8920be6938ac09dc9737 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 11 Sep 2025 11:55:35 -0400 Subject: [PATCH 01/80] make event cancelable (#1434) --- packages/webawesome/docs/docs/resources/changelog.md | 6 +++++- packages/webawesome/src/events/select.ts | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md index 9affda840..e3360ff7c 100644 --- a/packages/webawesome/docs/docs/resources/changelog.md +++ b/packages/webawesome/docs/docs/resources/changelog.md @@ -8,6 +8,10 @@ Web Awesome follows [Semantic Versioning](https://semver.org/). Breaking changes 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 + +- Fixed a bug in `` that closed the dropdown event when preventing `wa-select` [issue:1432] + ## 3.0.0-beta.5 ### Bug Fixes and Improvements {data-no-outline} @@ -444,4 +448,4 @@ Many of these changes and improvements were the direct result of feedback from u -Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions) \ No newline at end of file +Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions) diff --git a/packages/webawesome/src/events/select.ts b/packages/webawesome/src/events/select.ts index bfda2bdf4..761769515 100644 --- a/packages/webawesome/src/events/select.ts +++ b/packages/webawesome/src/events/select.ts @@ -2,7 +2,7 @@ export class WaSelectEvent extends Event { readonly detail; constructor(detail: WaSelectEventDetail) { - super('wa-select', { bubbles: true, cancelable: false, composed: true }); + super('wa-select', { bubbles: true, cancelable: true, composed: true }); this.detail = detail; } } From 7c3795897c7e7f05b07d00af019ef5cfba721803 Mon Sep 17 00:00:00 2001 From: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> Date: Sat, 13 Sep 2025 15:59:48 +0200 Subject: [PATCH 02/80] Fix typo in Textarea docs (#1444) * fix typo * Update packages/webawesome/docs/docs/components/textarea.md --------- Co-authored-by: Cory LaViska --- packages/webawesome/docs/docs/components/textarea.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webawesome/docs/docs/components/textarea.md b/packages/webawesome/docs/docs/components/textarea.md index 57ad28840..352b0d2c8 100644 --- a/packages/webawesome/docs/docs/components/textarea.md +++ b/packages/webawesome/docs/docs/components/textarea.md @@ -6,7 +6,7 @@ category: Form Controls --- ```html {.example} - + ``` :::info From b6afa148ae65500c824192de42bf45abd3528eca Mon Sep 17 00:00:00 2001 From: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> Date: Mon, 15 Sep 2025 15:29:53 +0200 Subject: [PATCH 03/80] fix typo (#1442) --- packages/webawesome/docs/docs/components/carousel.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webawesome/docs/docs/components/carousel.md b/packages/webawesome/docs/docs/components/carousel.md index 4e74ce6a0..81d7dcfdc 100644 --- a/packages/webawesome/docs/docs/components/carousel.md +++ b/packages/webawesome/docs/docs/components/carousel.md @@ -344,7 +344,7 @@ The content of the carousel can be changed by adding or removing carousel items. ### Vertical Scrolling -Setting the `orientation` attribute to `vertical` will render the carousel in a vertical layout. If the content of your slides vary in height, you will need to set amn explicit `height` or `max-height` on the carousel using CSS. +Setting the `orientation` attribute to `vertical` will render the carousel in a vertical layout. If the content of your slides vary in height, you will need to set an explicit `height` or `max-height` on the carousel using CSS. ```html {.example} From efbc4045243261ce244e27369a988fab8d6a8080 Mon Sep 17 00:00:00 2001 From: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> Date: Mon, 15 Sep 2025 15:34:09 +0200 Subject: [PATCH 04/80] add `variant="danger"` to Delete dropdown item (#1445) --- packages/webawesome/docs/docs/components/dropdown.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webawesome/docs/docs/components/dropdown.md b/packages/webawesome/docs/docs/components/dropdown.md index 18aebfb64..a52d8e568 100644 --- a/packages/webawesome/docs/docs/components/dropdown.md +++ b/packages/webawesome/docs/docs/components/dropdown.md @@ -96,7 +96,7 @@ Use the `icon` slot to add icons to [dropdown items](/docs/components/dropdown-i Paste - + Delete From d5da2e2db5bcb730aeebe0fdaf0b2f06b0ceb3e9 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Mon, 15 Sep 2025 16:42:09 -0400 Subject: [PATCH 05/80] simplifying pageHeader/pageFooter overrides in base.njk (#1453) --- packages/webawesome/docs/_includes/base.njk | 84 ++++++++++----------- 1 file changed, 40 insertions(+), 44 deletions(-) diff --git a/packages/webawesome/docs/_includes/base.njk b/packages/webawesome/docs/_includes/base.njk index 667e1c479..d4976cff5 100644 --- a/packages/webawesome/docs/_includes/base.njk +++ b/packages/webawesome/docs/_includes/base.njk @@ -51,52 +51,50 @@ - {% if pageHeader %} - {% include pageHeader %} - {% else %} - + {% endblock %} {# Sidebar #} {% if hasSidebar %} @@ -150,9 +148,7 @@ {% include 'search.njk' %} {# Footer #} - {% if pageFooter %} - {% include pageFooter %} - {% endif %} + {% block pageFooter %}{% endblock %} From 844015df7baf1c51f2b9b09228373b1e8c27a43e Mon Sep 17 00:00:00 2001 From: Konnor Rogers Date: Mon, 15 Sep 2025 19:08:05 -0400 Subject: [PATCH 06/80] pin tinycolor (#1455) --- package-lock.json | 7 +++---- packages/webawesome/docs/docs/resources/changelog.md | 5 ++++- packages/webawesome/package.json | 5 ++--- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index f9f933b06..85f04fa6a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13980,7 +13980,7 @@ "version": "3.0.0-beta.5", "license": "MIT", "dependencies": { - "@ctrl/tinycolor": "^4.1.0", + "@ctrl/tinycolor": "4.1.0", "@floating-ui/dom": "^1.6.13", "@lit/react": "^1.0.8", "@shoelace-style/animations": "^1.2.0", @@ -13988,8 +13988,7 @@ "composed-offset-position": "^0.0.6", "lit": "^3.2.1", "nanoid": "^5.1.5", - "qr-creator": "^1.0.0", - "style-observer": "^0.0.7" + "qr-creator": "^1.0.0" }, "devDependencies": { "@wc-toolkit/jsx-types": "^1.3.0" @@ -14000,7 +13999,7 @@ }, "packages/webawesome-pro": { "name": "@shoelace-style/webawesome-pro", - "version": "3.0.0-beta.4", + "version": "3.0.0-beta.5", "dependencies": { "@ctrl/tinycolor": "^4.1.0", "@floating-ui/dom": "^1.6.13", diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md index e3360ff7c..d521a689f 100644 --- a/packages/webawesome/docs/docs/resources/changelog.md +++ b/packages/webawesome/docs/docs/resources/changelog.md @@ -10,7 +10,10 @@ Components with the Experimental badge sh ## Next +## 3.0.0-beta.6 + - Fixed a bug in `` that closed the dropdown event when preventing `wa-select` [issue:1432] +- Pin `@ctrl/tinycolor` to `4.1.0` due to malware in `4.1.1` and `4.1.2`. ## 3.0.0-beta.5 @@ -448,4 +451,4 @@ Many of these changes and improvements were the direct result of feedback from u -Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions) +Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions) \ No newline at end of file diff --git a/packages/webawesome/package.json b/packages/webawesome/package.json index f20e08798..26ed0daeb 100644 --- a/packages/webawesome/package.json +++ b/packages/webawesome/package.json @@ -73,7 +73,7 @@ "node": ">=14.17.0" }, "dependencies": { - "@ctrl/tinycolor": "^4.1.0", + "@ctrl/tinycolor": "4.1.0", "@floating-ui/dom": "^1.6.13", "@lit/react": "^1.0.8", "@shoelace-style/animations": "^1.2.0", @@ -81,8 +81,7 @@ "composed-offset-position": "^0.0.6", "lit": "^3.2.1", "nanoid": "^5.1.5", - "qr-creator": "^1.0.0", - "style-observer": "^0.0.7" + "qr-creator": "^1.0.0" }, "lint-staged": { "*.{ts,js}": [ From 56657ebcfc71f737c03897c18ea64e5370733fa5 Mon Sep 17 00:00:00 2001 From: konnorrogers Date: Mon, 15 Sep 2025 19:11:14 -0400 Subject: [PATCH 07/80] Bump package.json version --- packages/webawesome/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webawesome/package.json b/packages/webawesome/package.json index 26ed0daeb..d2d40108e 100644 --- a/packages/webawesome/package.json +++ b/packages/webawesome/package.json @@ -4,7 +4,7 @@ "access": "public" }, "description": "A forward-thinking library of web components.", - "version": "3.0.0-beta.5", + "version": "3.0.0-beta.6", "homepage": "https://webawesome.com/", "author": "Web Awesome", "license": "MIT", From 4b2b72e8221af61d275d8a9388ae6990aec8e37f Mon Sep 17 00:00:00 2001 From: konnorrogers Date: Mon, 15 Sep 2025 19:13:18 -0400 Subject: [PATCH 08/80] update package-lock version --- package-lock.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 85f04fa6a..4e44d7966 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13977,7 +13977,7 @@ }, "packages/webawesome": { "name": "@awesome.me/webawesome", - "version": "3.0.0-beta.5", + "version": "3.0.0-beta.6", "license": "MIT", "dependencies": { "@ctrl/tinycolor": "4.1.0", From fd4cded708829b74c33769fabfcf208d6e044658 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Tue, 16 Sep 2025 09:17:07 -0400 Subject: [PATCH 09/80] Add Input-Based Visually Hidden Utilities (#1454) * adding input-based visually hidden utilities * documenting input-based visually hidden utilities --- .../docs/docs/utilities/visually-hidden.md | 57 +++++++++++++++++++ .../src/styles/utilities/visually-hidden.css | 4 +- 2 files changed, 60 insertions(+), 1 deletion(-) diff --git a/packages/webawesome/docs/docs/utilities/visually-hidden.md b/packages/webawesome/docs/docs/utilities/visually-hidden.md index 23e608548..8a0b75077 100644 --- a/packages/webawesome/docs/docs/utilities/visually-hidden.md +++ b/packages/webawesome/docs/docs/utilities/visually-hidden.md @@ -43,6 +43,63 @@ Adding a label may seem redundant at times, but they're very helpful for unsight ``` +### Visually Hidden Input Parts + +Sometimes you want a form control to have a cleaner, more minimal appearance by hiding the `label` or `hint` visually. However, removing these elements entirely would make the form inaccessible to users with assistive devices. + +Instead, you can hide them visually while keeping them available to screen readers by adding the `wa-visually-hidden-label` or `wa-visually-hidden-hint` class. + +```html {.example} + + + + + + + +``` + ### Force Visually Hidden There are cases where you want to _always_ visually hide certain content, even when it's focused. diff --git a/packages/webawesome/src/styles/utilities/visually-hidden.css b/packages/webawesome/src/styles/utilities/visually-hidden.css index 994cea8bc..a2bb193c0 100644 --- a/packages/webawesome/src/styles/utilities/visually-hidden.css +++ b/packages/webawesome/src/styles/utilities/visually-hidden.css @@ -1,6 +1,8 @@ @layer wa-utilities { .wa-visually-hidden:not(:focus-within), - .wa-visually-hidden-force { + .wa-visually-hidden-force, + .wa-visually-hidden-hint::part(hint), + .wa-visually-hidden-label::part(label) { position: absolute !important; width: 1px !important; height: 1px !important; From b4f45f4ff1619724bf3492e44f9462d9a023c9c0 Mon Sep 17 00:00:00 2001 From: "Bryce A. Glass" Date: Thu, 18 Sep 2025 08:50:37 -0400 Subject: [PATCH 10/80] Update align-items.md (#1467) Fixed some internal links from `/docs/layout/` to `docs/utilities/` --- packages/webawesome/docs/docs/utilities/align-items.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webawesome/docs/docs/utilities/align-items.md b/packages/webawesome/docs/docs/utilities/align-items.md index 07ce72c73..d123ce14a 100644 --- a/packages/webawesome/docs/docs/utilities/align-items.md +++ b/packages/webawesome/docs/docs/utilities/align-items.md @@ -20,7 +20,7 @@ tags: layoutUtilities } -Web Awesome includes classes to set the `align-items` property of flex and grid containers. They can be used alongside other Web Awesome layout utilities, like [cluster](/docs/layout/cluster) and [stack](/docs/layout/stack), to align children in container on the container's cross axis. +Web Awesome includes classes to set the `align-items` property of flex and grid containers. They can be used alongside other Web Awesome layout utilities, like [cluster](/docs/utilities/cluster) and [stack](/docs/utilities/stack), to align children in container on the container's cross axis. | Class Name | `align-items` Value | Preview | | ------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | From afe60eae69af00e78220a7f6a938a24058f71eeb Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Thu, 18 Sep 2025 09:33:09 -0400 Subject: [PATCH 11/80] Docs: Icon Component - Update Default Width (#1466) * updating default width value in icon component docs * noting default icon width change in 3.0.0-beta.5's changelog --- packages/webawesome/docs/docs/components/icon.md | 2 +- packages/webawesome/docs/docs/resources/changelog.md | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/webawesome/docs/docs/components/icon.md b/packages/webawesome/docs/docs/components/icon.md index 0f7e88c78..94f76e33e 100644 --- a/packages/webawesome/docs/docs/components/icon.md +++ b/packages/webawesome/docs/docs/components/icon.md @@ -100,7 +100,7 @@ Icons are sized relative to the current font size. To change their size, set the ### Auto Width -By default, icons have a 1em height and a fixed 1em width. Use the `auto-width` attribute to allow the icon to use its natural variable width. +By default, icons have a `1em` height and a fixed `1.25em` width. Use the `auto-width` attribute to allow the icon to use its natural variable width. ```html {.example} Without auto-width
diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md index d521a689f..02503f2ea 100644 --- a/packages/webawesome/docs/docs/resources/changelog.md +++ b/packages/webawesome/docs/docs/resources/changelog.md @@ -21,6 +21,7 @@ Components with the Experimental badge sh - 🚨 BREAKING: Updated `` to use Font Awesome 7 [pr: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 ``, 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 `` [discuss:1340] From 0beceff73f3e08bc47830e6e39922fdb7a55394e Mon Sep 17 00:00:00 2001 From: Kelsey Jackson Date: Thu, 18 Sep 2025 08:42:38 -0500 Subject: [PATCH 12/80] update to the button if it has an icon in it's default slot (#1461) --- packages/webawesome/docs/docs/components/button.md | 5 ++++- packages/webawesome/src/components/button/button.css | 4 ++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/webawesome/docs/docs/components/button.md b/packages/webawesome/docs/docs/components/button.md index 83b88b48a..e56ae8d28 100644 --- a/packages/webawesome/docs/docs/components/button.md +++ b/packages/webawesome/docs/docs/components/button.md @@ -183,6 +183,9 @@ Use the `start` and `end` slots to add presentational elements like `` Use the `with-caret` attribute to add a dropdown indicator when a button will trigger a dropdown, menu, or popover. ```html {.example} + + + Small Medium Large @@ -251,4 +254,4 @@ This example demonstrates how to style buttons using a custom class. This is the outline-offset: 4px; } -``` \ No newline at end of file +``` diff --git a/packages/webawesome/src/components/button/button.css b/packages/webawesome/src/components/button/button.css index a3b0e1783..9e41abda3 100644 --- a/packages/webawesome/src/components/button/button.css +++ b/packages/webawesome/src/components/button/button.css @@ -178,6 +178,10 @@ aspect-ratio: 1; } +.button.is-icon-button:has(wa-icon) { + width: auto; +} + /* Pill modifier */ :host([pill]) .button { border-radius: var(--wa-border-radius-pill); From fcf37f83a12ccc79a3c22be1ed9dd3e0db85b932 Mon Sep 17 00:00:00 2001 From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com> Date: Thu, 18 Sep 2025 11:15:54 -0400 Subject: [PATCH 13/80] Fix details focus ring (#1464) * remove duplicate styles, fix focus outline * update native details focus ring and rounding --- .../src/components/details/details.css | 35 +++++-------------- packages/webawesome/src/styles/native.css | 7 +++- 2 files changed, 15 insertions(+), 27 deletions(-) diff --git a/packages/webawesome/src/components/details/details.css b/packages/webawesome/src/components/details/details.css index fac63ebc4..5bb034a63 100644 --- a/packages/webawesome/src/components/details/details.css +++ b/packages/webawesome/src/components/details/details.css @@ -6,29 +6,6 @@ display: block; } -:host summary { - display: flex; - align-items: center; - justify-content: space-between; - user-select: none; - -webkit-user-select: none; - cursor: pointer; - - &::marker, - &::-webkit-details-marker { - display: none; - } - - &:focus { - outline: none; - } - - &:focus-visible { - outline: var(--wa-focus-ring); - outline-offset: calc(var(--spacing) + var(--wa-focus-ring-offset)); - } -} - details { display: block; overflow-anchor: none; @@ -77,15 +54,16 @@ details { cursor: not-allowed; } -:host summary { +summary { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing); + padding: var(--spacing); /* Add padding here */ + border-radius: calc(var(--wa-panel-border-radius) - var(--wa-panel-border-width)); user-select: none; -webkit-user-select: none; cursor: pointer; - padding: var(--spacing); /* Add padding here */ &::marker, &::-webkit-details-marker { @@ -98,10 +76,15 @@ details { &:focus-visible { outline: var(--wa-focus-ring); - outline-offset: calc(var(--spacing) + var(--wa-focus-ring-offset)); + outline-offset: calc(var(--wa-panel-border-width) + var(--wa-focus-ring-offset)); } } +:host([open]) summary { + border-end-start-radius: 0; + border-end-end-radius: 0; +} + /* 'Start' icon placement */ :host([icon-placement='start']) summary { flex-direction: row-reverse; diff --git a/packages/webawesome/src/styles/native.css b/packages/webawesome/src/styles/native.css index c57b6f03f..06b540561 100644 --- a/packages/webawesome/src/styles/native.css +++ b/packages/webawesome/src/styles/native.css @@ -407,6 +407,8 @@ padding: var(--wa-space-m); + border-radius: calc(var(--wa-panel-border-radius) - var(--wa-panel-border-width)); + cursor: pointer; user-select: none; -webkit-user-select: none; @@ -421,7 +423,7 @@ &:focus-visible { outline: var(--wa-focus-ring); - outline-offset: var(--wa-focus-ring-offset); + outline-offset: calc(var(--wa-panel-border-width) + var(--wa-focus-ring-offset)); } } @@ -430,6 +432,9 @@ summary { margin-inline: calc(-1 * var(--wa-space-m)); + + border-end-start-radius: 0; + border-end-end-radius: 0; } } From 7e00d2b02e6e37fc5378a197d9e88fb2e6ab5f9e Mon Sep 17 00:00:00 2001 From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com> Date: Thu, 18 Sep 2025 11:16:36 -0400 Subject: [PATCH 14/80] Fix incorrect class in color palette instructions (#1462) --- packages/webawesome/docs/docs/color-palettes.njk | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/webawesome/docs/docs/color-palettes.njk b/packages/webawesome/docs/docs/color-palettes.njk index da64a68d3..74582f3eb 100644 --- a/packages/webawesome/docs/docs/color-palettes.njk +++ b/packages/webawesome/docs/docs/color-palettes.njk @@ -70,7 +70,7 @@ layout: page {% for palette in themer.palettes %}

- To import this palette, set <html class="wa-theme-{{ palette.name | lower }}"> and import the following stylesheet: + To import this palette, set <html class="wa-palette-{{ palette.name | lower }}"> and import the following stylesheet: 

<link rel="stylesheet" href="{% cdnUrl %}styles/color/palettes/{{ palette.filename }}" />
@@ -81,7 +81,7 @@ layout: page const paletteContainer = document.getElementById('color-palettes'); const palettePicker = document.getElementById('palette-picker'); - // Set first radio as checked and add initial theme class + // Set first radio as checked and add initial palette class const firstRadio = palettePicker.querySelector('wa-radio'); if (firstRadio) { firstRadio.checked = true; From 44142fb56d0e313428023a29cc0c68c2543efbd3 Mon Sep 17 00:00:00 2001 From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com> Date: Thu, 18 Sep 2025 11:53:52 -0400 Subject: [PATCH 15/80] Fix badge positioning for link buttons (#1463) * Fix badge positioning for link buttons * add changelog --- packages/webawesome/docs/docs/resources/changelog.md | 3 +++ packages/webawesome/src/components/button/button.css | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md index 02503f2ea..217ae4097 100644 --- a/packages/webawesome/docs/docs/resources/changelog.md +++ b/packages/webawesome/docs/docs/resources/changelog.md @@ -10,6 +10,9 @@ Components with the Experimental badge sh ## Next +- Fixed a bug in `` where slotted badges weren't properly positioned in buttons with an `href` [issue:1377] +- Fixed focus outline styles in `` and native `
` [issue:1456] + ## 3.0.0-beta.6 - Fixed a bug in `` that closed the dropdown event when preventing `wa-select` [issue:1432] diff --git a/packages/webawesome/src/components/button/button.css b/packages/webawesome/src/components/button/button.css index 9e41abda3..22036424e 100644 --- a/packages/webawesome/src/components/button/button.css +++ b/packages/webawesome/src/components/button/button.css @@ -262,7 +262,7 @@ wa-icon[part~='caret'] { * Badges */ -button ::slotted(wa-badge) { +.button ::slotted(wa-badge) { border-color: var(--wa-color-surface-default); position: absolute; inset-block-start: 0; From 502df6ee9cd5fc9a9f976772c8d8629140d3abe7 Mon Sep 17 00:00:00 2001 From: Alicia Garcia-Raboso Date: Fri, 19 Sep 2025 15:43:57 +0200 Subject: [PATCH 16/80] Remove duplicated declaration (#1473) --- .../webawesome/src/components/split-panel/split-panel.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/webawesome/src/components/split-panel/split-panel.ts b/packages/webawesome/src/components/split-panel/split-panel.ts index f2a7ba8ae..7e83bb90b 100644 --- a/packages/webawesome/src/components/split-panel/split-panel.ts +++ b/packages/webawesome/src/components/split-panel/split-panel.ts @@ -317,9 +317,3 @@ declare global { 'wa-split-panel': WaSplitPanel; } } - -declare global { - interface HTMLElementTagNameMap { - 'wa-split-panel': WaSplitPanel; - } -} From 694a9eccb91e42f76205597ecc2fe31d94c6d61e Mon Sep 17 00:00:00 2001 From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com> Date: Mon, 22 Sep 2025 14:12:49 -0400 Subject: [PATCH 17/80] Make sure essential CSS is always imported (#1476) * import relevant utilities into native styles * import color variant classes into free palettes * import the default palette into kitchen sink, not the default theme * fix palette path * import each theme's intended palette --- packages/webawesome/docs/_includes/head.njk | 4 +--- packages/webawesome/src/styles/color/palettes/bright.css | 1 + packages/webawesome/src/styles/color/palettes/default.css | 1 + packages/webawesome/src/styles/color/palettes/shoelace.css | 1 + packages/webawesome/src/styles/native.css | 3 +++ packages/webawesome/src/styles/themes/awesome.css | 1 + packages/webawesome/src/styles/themes/default.css | 1 - packages/webawesome/src/styles/themes/shoelace.css | 2 ++ 8 files changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/webawesome/docs/_includes/head.njk b/packages/webawesome/docs/_includes/head.njk index 36efab00d..8c5394274 100644 --- a/packages/webawesome/docs/_includes/head.njk +++ b/packages/webawesome/docs/_includes/head.njk @@ -21,9 +21,7 @@ -{% for palette in themer.palettes %} - -{% endfor %} + {% endif %} - {% if pageType == 'marketing' %} - {# Marketing styles #} - - {% else %} - {# Docs styles (default) #} + {% block head %} - {% endif %} - - - {% block head %}{% endblock %} + {% endblock %} - - - + + {% set defaultWaPageAttributes = defaultWaPageAttributes or { view: 'desktop', 'disable-navigation-toggle': true, 'mobile-breakpoint': 1180 } %} + {% set waPageAttributes = waPageAttributes or {} %} + {% set mergedWaPageAttributes = defaultWaPageAttributes | merge(waPageAttributes) %} + {% block pageHeader %} {% endblock %} diff --git a/packages/webawesome/docs/_utils/simulate-webawesome-app.js b/packages/webawesome/docs/_utils/simulate-webawesome-app.js index d40cca18a..0c07a25c7 100644 --- a/packages/webawesome/docs/_utils/simulate-webawesome-app.js +++ b/packages/webawesome/docs/_utils/simulate-webawesome-app.js @@ -11,7 +11,6 @@ export function SimulateWebAwesomeApp(str) { }, server: { head: '', - loginOrAvatar: '', flashes: '', }, }); diff --git a/packages/webawesome/docs/docs/index.md b/packages/webawesome/docs/docs/index.md index fe9bde3e9..525ee1f1b 100644 --- a/packages/webawesome/docs/docs/index.md +++ b/packages/webawesome/docs/docs/index.md @@ -212,4 +212,4 @@ declare module 'react' { :::details React 18 and below React 18 and below have [poor support](https://custom-elements-everywhere.com/#react) for custom elements. For legacy versions of React, we provide React wrappers for every component. You can find the import instructions by selecting the _React_ tab from the _Importing_ section of each component's documentation. -::: +::: \ No newline at end of file From 0b5689de62e10a43c87c7baadd9858bcdc33c3a6 Mon Sep 17 00:00:00 2001 From: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> Date: Tue, 30 Sep 2025 18:26:38 +0200 Subject: [PATCH 32/80] remove last smart quote (forgotten in previous PR) (#1523) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5a4b827d0..53f0791cc 100644 --- a/README.md +++ b/README.md @@ -65,7 +65,7 @@ npm install ### Developing -Once you’ve cloned the repo, run the following command from the respective directory within `packages/*`. +Once you've cloned the repo, run the following command from the respective directory within `packages/*`. ```bash cd packages/webawesome From 1fd68dfb3cd8f9a7ed1218e67a576f5595b29449 Mon Sep 17 00:00:00 2001 From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com> Date: Tue, 30 Sep 2025 18:09:58 -0400 Subject: [PATCH 33/80] Fix focus ring in ``, ``, and `` (#1525) * visible focus outlines for scrollable containers * add changelog --- packages/webawesome/docs/docs/resources/changelog.md | 1 + packages/webawesome/src/components/dialog/dialog.css | 9 +++++++++ packages/webawesome/src/components/drawer/drawer.css | 9 +++++++++ packages/webawesome/src/components/scroller/scroller.css | 1 - 4 files changed, 19 insertions(+), 1 deletion(-) diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md index c0c38e77e..0dd4ba572 100644 --- a/packages/webawesome/docs/docs/resources/changelog.md +++ b/packages/webawesome/docs/docs/resources/changelog.md @@ -13,6 +13,7 @@ Components with the Experimental badge sh - Added the Kazakh translation [pr:1496] - Fixed a bug in `` where slotted badges weren't properly positioned in buttons with an `href` [issue:1377] - Fixed focus outline styles in `` and native `
` [issue:1456] +- Fixed focus outline styles in ``, ``, and `` [issue:1484] ## 3.0.0-beta.6 diff --git a/packages/webawesome/src/components/dialog/dialog.css b/packages/webawesome/src/components/dialog/dialog.css index e787f3475..cb6e4f7de 100644 --- a/packages/webawesome/src/components/dialog/dialog.css +++ b/packages/webawesome/src/components/dialog/dialog.css @@ -111,6 +111,15 @@ padding: var(--spacing); overflow: auto; -webkit-overflow-scrolling: touch; + + &:focus { + outline: none; + } + + &:focus-visible { + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); + } } .footer { diff --git a/packages/webawesome/src/components/drawer/drawer.css b/packages/webawesome/src/components/drawer/drawer.css index 01637d687..b380caebf 100644 --- a/packages/webawesome/src/components/drawer/drawer.css +++ b/packages/webawesome/src/components/drawer/drawer.css @@ -175,6 +175,15 @@ padding: var(--spacing); overflow: auto; -webkit-overflow-scrolling: touch; + + &:focus { + outline: none; + } + + &:focus-visible { + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); + } } .footer { diff --git a/packages/webawesome/src/components/scroller/scroller.css b/packages/webawesome/src/components/scroller/scroller.css index b7158c373..2dac32094 100644 --- a/packages/webawesome/src/components/scroller/scroller.css +++ b/packages/webawesome/src/components/scroller/scroller.css @@ -10,7 +10,6 @@ position: relative; max-width: 100%; isolation: isolate; - overflow: hidden; } :host([orientation='vertical']) { From 2ec957ff762aa721a11eb1b8e4271e710805059a Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 1 Oct 2025 12:04:32 -0400 Subject: [PATCH 34/80] Docs: Update + Show Social Media Links (#1531) * adding mastodon social link to docs/index.md * adding social links to sidebar's colophon * updating community.md with latest social network details --- .../webawesome/docs/_includes/sidebar.njk | 37 +++++++++++++++---- .../webawesome/docs/assets/styles/docs.css | 14 +++++++ .../docs/docs/resources/community.md | 28 ++++++++++---- packages/webawesome/docs/index.md | 11 +++++- 4 files changed, 74 insertions(+), 16 deletions(-) diff --git a/packages/webawesome/docs/_includes/sidebar.njk b/packages/webawesome/docs/_includes/sidebar.njk index a09fac59f..12c91cfc3 100644 --- a/packages/webawesome/docs/_includes/sidebar.njk +++ b/packages/webawesome/docs/_includes/sidebar.njk @@ -399,13 +399,34 @@ - @@ -579,7 +573,6 @@ Filled + Outlined Filled Outlined - Plain @@ -588,7 +581,6 @@ - @@ -600,7 +592,6 @@ Filled + Outlined Filled Outlined - Plain @@ -609,7 +600,6 @@ - From 8fc0ee89ff55f305499cc959f551b31736ec0d40 Mon Sep 17 00:00:00 2001 From: LX Date: Mon, 13 Oct 2025 16:45:39 +0200 Subject: [PATCH 44/80] Fix missing form-control-label part on texarea (#1533) --- packages/webawesome/src/components/textarea/textarea.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webawesome/src/components/textarea/textarea.ts b/packages/webawesome/src/components/textarea/textarea.ts index 61b6e856b..1b3626bac 100644 --- a/packages/webawesome/src/components/textarea/textarea.ts +++ b/packages/webawesome/src/components/textarea/textarea.ts @@ -338,7 +338,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement { const hasHint = this.hint ? true : !!hasHintSlot; return html` -