+ {#- Logo - mobile branding -#}
+
+ {# Logo - Mobile #}
+ {% include "logo-simple.njk" %}
+
+
+
@@ -101,9 +86,13 @@
{% if hasSidebar %}
{# Mobile selectors #}
-
- {% include "theme-selector.njk" %}
- {% include "color-scheme-selector.njk" %}
+
+
{% include "logo-simple.njk" %}
+
+ {% include "theme-selector.njk" %}
+ {% include "color-scheme-selector.njk" %}
+ {% include "github-icon-buttons.njk" %}
+
{#- Login -#}
- {% server "loginOrAvatar" %}
+ {% include "login-or-avatar.njk" ignore missing %}
{% 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 16/21] 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 17/21] 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 18/21] 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 @@
-
- {% include "logo-simple.njk" %}
-
-
Web Awesome
-
Beta
-
Here be freshly made Awesome… and possible dragons
+
+
+ {% include "logo-simple.njk" %}
+
+
Web Awesome
+ Beta
+ Here be freshly made Awesome… and possible dragons
+
+
Version {{ package.version }}
+
© Fonticons, Inc.
+
+
+
-
Version {{ package.version }}
-
© Fonticons, Inc.
diff --git a/packages/webawesome/docs/assets/styles/docs.css b/packages/webawesome/docs/assets/styles/docs.css
index 153246083..0a5a7a161 100644
--- a/packages/webawesome/docs/assets/styles/docs.css
+++ b/packages/webawesome/docs/assets/styles/docs.css
@@ -185,6 +185,20 @@ wa-page > header {
--show-duration: 0;
--hide-duration: 0;
}
+
+ .the-socials {
+ /* nudge those linkies left */
+ margin-inline-start: calc(var(--wa-space-xs) * -1);
+
+ a[target='_blank'] {
+ color: var(--wa-color-text-quiet);
+ padding-inline: var(--wa-space-xs);
+
+ &:hover {
+ color: var(--wa-color-text-normal);
+ }
+ }
+ }
}
wa-button.delete {
diff --git a/packages/webawesome/docs/docs/resources/community.md b/packages/webawesome/docs/docs/resources/community.md
index e323a9ec0..d0f1c2d01 100644
--- a/packages/webawesome/docs/docs/resources/community.md
+++ b/packages/webawesome/docs/docs/resources/community.md
@@ -36,13 +36,27 @@ The [community chat](https://discord.gg/mg8f26C) is open to the public and power
Join the Chat
-## Twitter
+## Social Networks
-Follow [@webawesomer](https://twitter.com/webawesomer) on Twitter for general updates and announcements about Web Awesome. This is a great place to say "hi" or to share something you're working on.
+Follow Web Awesome on [Bluesky](https://bsky.app/profile/webawesome.com), [X (Twitter)](https://x.com/webawesomer), [Mastodon](https://mastodon.social/@webawesome), or [Threads](https://www.threads.com/@web.awesome) for general updates and announcements. This is a great place to say "hi" or to share something you're working on.
-**Please avoid using Twitter for support questions.** The [discussion forum](https://github.com/shoelace-style/webawesome/discussions) is a much better place to share code snippets, screenshots, and other troubleshooting info. You'll have much better luck there, as more users will have a chance to help you.
+**Please avoid using Social Networks for support questions.** The [discussion forum](https://github.com/shoelace-style/webawesome/discussions) is a much better place to share code snippets, screenshots, and other troubleshooting info. You'll have much better luck there, as more users will have a chance to help you.
-
-
- Follow on Twitter
-
+
+
+
+ Bluesky
+
+
+
+ X (Twitter)
+
+
+
+ Mastodon
+
+
+
+ Threads
+
+
diff --git a/packages/webawesome/docs/index.md b/packages/webawesome/docs/index.md
index 49188f8fd..baf06b778 100644
--- a/packages/webawesome/docs/index.md
+++ b/packages/webawesome/docs/index.md
@@ -385,7 +385,7 @@ layout: page
Stay in the know
-
+
@@ -395,6 +395,15 @@ layout: page
+
+
+
From c18df17429ca51cfb67356df4600d7c53fc0e010 Mon Sep 17 00:00:00 2001
From: Brian Talbot
Date: Thu, 2 Oct 2025 15:46:32 -0400
Subject: [PATCH 19/21] Docs: Add Links to Licenses + Supporting Utilities
(#1537)
* adding .appearance-plain for lists to utils.css
* adding gitLastModifiedISO filter to .eleventy.js
* adding link to Pro License in sidebar.njk
* adding link to Free License in sidebar.njk
* adding link to Terms of Service in sidebar.njk
* adding "last updated" date to changelog.md
---
package-lock.json | 16 +++-
packages/webawesome/docs/.eleventy.js | 84 +++++++++++++++++++
.../webawesome/docs/_includes/sidebar.njk | 3 +
.../webawesome/docs/assets/styles/utils.css | 12 +++
.../docs/docs/resources/changelog.md | 2 +
packages/webawesome/package.json | 3 +-
6 files changed, 117 insertions(+), 3 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 4a6d18423..19ac56617 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6478,6 +6478,16 @@
"integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
"dev": true
},
+ "node_modules/eleventy-plugin-git-commit-date": {
+ "version": "0.1.3",
+ "resolved": "https://registry.npmjs.org/eleventy-plugin-git-commit-date/-/eleventy-plugin-git-commit-date-0.1.3.tgz",
+ "integrity": "sha512-dmdkGpMuRj8apWptC1QGqAsLHCguddFlfPjbjflGCqXdJ8cdhEjrzzvI/rL0XUvzCC4ETgGl9i/wDU6ujZ94gA==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "cross-spawn": "^7.0.3"
+ }
+ },
"node_modules/emoji-regex": {
"version": "10.4.0",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.4.0.tgz",
@@ -13985,7 +13995,8 @@
"qr-creator": "^1.0.0"
},
"devDependencies": {
- "@wc-toolkit/jsx-types": "^1.3.0"
+ "@wc-toolkit/jsx-types": "^1.3.0",
+ "eleventy-plugin-git-commit-date": "^0.1.3"
},
"engines": {
"node": ">=14.17.0"
@@ -14006,7 +14017,8 @@
"qr-creator": "^1.0.0"
},
"devDependencies": {
- "@wc-toolkit/jsx-types": "^1.3.0"
+ "@wc-toolkit/jsx-types": "^1.3.0",
+ "eleventy-plugin-git-commit-date": "^0.1.3"
},
"engines": {
"node": ">=14.17.0"
diff --git a/packages/webawesome/docs/.eleventy.js b/packages/webawesome/docs/.eleventy.js
index dd4cd119a..1e18bebe9 100644
--- a/packages/webawesome/docs/.eleventy.js
+++ b/packages/webawesome/docs/.eleventy.js
@@ -1,5 +1,6 @@
import { nanoid } from 'nanoid';
import { parse as HTMLParse } from 'node-html-parser';
+import { execFileSync } from 'node:child_process';
import * as fs from 'node:fs';
import * as path from 'node:path';
import { anchorHeadingsTransformer } from './_transformers/anchor-headings.js';
@@ -20,6 +21,7 @@ import { replaceTextPlugin } from './_plugins/replace-text.js';
import { searchPlugin } from './_plugins/search.js';
const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
const isDev = process.argv.includes('--develop');
+const ignoreGit = process.env.ELEVENTY_IGNORE_GIT === 'true';
const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
async function getPackageData() {
@@ -58,6 +60,15 @@ export default async function (eleventyConfig) {
if (updateComponentData) {
allComponents = getComponents();
}
+
+ // Invalidate last-modified cache for changed content files during watch
+ if (Array.isArray(changedFiles)) {
+ for (const file of changedFiles) {
+ if (/\.(md|njk|html)$/i.test(file)) {
+ lastModCache.delete(file);
+ }
+ }
+ }
});
/**
@@ -89,6 +100,79 @@ export default async function (eleventyConfig) {
eleventyConfig.addFilter('stripExtension', string => path.parse(string + '').name);
eleventyConfig.addFilter('stripPrefix', content => content.replace(/^wa-/, ''));
eleventyConfig.addFilter('uniqueId', (_value, length = 8) => nanoid(length));
+ // Returns last modified date as ISO 8601 (UTC, Z-suffixed)
+ // Fallback order: front matter override -> Git last commit date -> filesystem mtime -> now
+ // Caching: in-memory per inputPath during one build/dev session
+ // Override: pass a Date or string: {{ page.inputPath | gitLastModifiedISO(lastUpdated) }}
+ const lastModCache = new Map();
+ let repoRoot = null; // lazily resolved; null => not resolved, undefined => failed
+
+ function getLastModifiedISO(inputPath, overrideDate) {
+ if (overrideDate instanceof Date) {
+ return overrideDate.toISOString();
+ }
+ if (typeof overrideDate === 'string' && overrideDate) {
+ const parsed = new Date(overrideDate);
+ if (!isNaN(parsed.getTime())) return parsed.toISOString();
+ }
+ if (!inputPath) return new Date().toISOString();
+ if (lastModCache.has(inputPath)) return lastModCache.get(inputPath);
+
+ // Try Git (ISO via %cI). Use a repo-root-relative path for portability.
+ if (!ignoreGit) {
+ try {
+ if (repoRoot === null) {
+ try {
+ repoRoot = execFileSync('git', ['rev-parse', '--show-toplevel'], {
+ stdio: ['ignore', 'pipe', 'ignore'],
+ cwd: __dirname,
+ })
+ .toString()
+ .trim();
+ } catch (_) {
+ repoRoot = undefined;
+ }
+ }
+
+ const gitPath = repoRoot ? path.relative(repoRoot, inputPath) : inputPath;
+ const args = ['log', '-1', '--format=%cI', '--follow', '--', gitPath];
+ const result = execFileSync('git', args, {
+ stdio: ['ignore', 'pipe', 'ignore'],
+ cwd: repoRoot || path.dirname(inputPath),
+ })
+ .toString()
+ .trim();
+ if (result) {
+ const iso = new Date(result).toISOString();
+ lastModCache.set(inputPath, iso);
+ return iso;
+ }
+ } catch (_) {
+ // continue to fs fallback
+ }
+ }
+
+ // Fallback to filesystem mtime
+ try {
+ const stats = fs.statSync(inputPath);
+ const iso = new Date(stats.mtime).toISOString();
+ lastModCache.set(inputPath, iso);
+ return iso;
+ } catch (_) {
+ const now = new Date().toISOString();
+ lastModCache.set(inputPath, now);
+ return now;
+ }
+ }
+
+ eleventyConfig.addFilter('gitLastModifiedISO', function (inputPath, overrideDate) {
+ return getLastModifiedISO(inputPath, overrideDate);
+ });
+
+ // Attach lastUpdatedISO to page data so templates can use {{ lastUpdatedISO }} directly
+ eleventyConfig.addGlobalData('eleventyComputed', {
+ lastUpdatedISO: data => getLastModifiedISO(data.page?.inputPath, data.lastUpdated),
+ });
// Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited.
// With Prettier 3, this means a leading pipe will exist be present when the line wraps.
eleventyConfig.addFilter('trimPipes', content => {
diff --git a/packages/webawesome/docs/_includes/sidebar.njk b/packages/webawesome/docs/_includes/sidebar.njk
index 12c91cfc3..8f6a0dd04 100644
--- a/packages/webawesome/docs/_includes/sidebar.njk
+++ b/packages/webawesome/docs/_includes/sidebar.njk
@@ -22,6 +22,9 @@
Browser Support
Contributing
Changelog
+ Web Awesome Free License
+ Web Awesome Pro License
+ Terms of Service
Visual Tests
diff --git a/packages/webawesome/docs/assets/styles/utils.css b/packages/webawesome/docs/assets/styles/utils.css
index 6364f9002..9e4e87951 100644
--- a/packages/webawesome/docs/assets/styles/utils.css
+++ b/packages/webawesome/docs/assets/styles/utils.css
@@ -128,6 +128,18 @@
}
}
+ ul,
+ ol {
+ &.appearance-plain {
+ list-style: none;
+ padding-inline-start: 0;
+
+ li {
+ padding-inline-start: 0;
+ }
+ }
+ }
+
/* increasing visual size of icons in certain contexts (such as in plain buttons) */
wa-icon.icon-embiggen {
font-size: round(1.125em, 1px);
diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index 0dd4ba572..6549a8d07 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -4,6 +4,8 @@ description: Changes to each version of the project are documented here.
layout: page-outline
---
+Last updated:
+
Web Awesome follows [Semantic Versioning](https://semver.org/). 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.
diff --git a/packages/webawesome/package.json b/packages/webawesome/package.json
index d2d40108e..b8da85372 100644
--- a/packages/webawesome/package.json
+++ b/packages/webawesome/package.json
@@ -89,6 +89,7 @@
]
},
"devDependencies": {
- "@wc-toolkit/jsx-types": "^1.3.0"
+ "@wc-toolkit/jsx-types": "^1.3.0",
+ "eleventy-plugin-git-commit-date": "^0.1.3"
}
}
From c0b18f6580368b5738e599d9fea60f02a8c13a79 Mon Sep 17 00:00:00 2001
From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Date: Thu, 2 Oct 2025 16:13:05 -0400
Subject: [PATCH 20/21] Round `--content-width-*` and use in the docs (#1526)
* use `--content-width-*` properties for docs
* round `--content-width-*` values to prevent rendering bugs
---
packages/webawesome/docs/assets/styles/docs.css | 10 +++++-----
packages/webawesome/docs/assets/styles/utils.css | 11 ++++++-----
2 files changed, 11 insertions(+), 10 deletions(-)
diff --git a/packages/webawesome/docs/assets/styles/docs.css b/packages/webawesome/docs/assets/styles/docs.css
index 0a5a7a161..88aeb67a5 100644
--- a/packages/webawesome/docs/assets/styles/docs.css
+++ b/packages/webawesome/docs/assets/styles/docs.css
@@ -263,7 +263,7 @@ wa-page[view='mobile'] :is([slot='navigation-header'], [slot='navigation']) {
/* Main content */
wa-page > main {
- max-width: 80ch;
+ max-width: var(--content-width-s);
padding: var(--wa-space-xl);
margin-inline: auto;
}
@@ -371,7 +371,7 @@ h1.title {
/* Search list pages */
wa-page > main:has(> .search-list) {
- max-width: 120ch;
+ max-width: var(--content-width-l);
margin-inline: auto;
}
@@ -586,7 +586,7 @@ wa-scroller:has(.component-table) {
.table-arguments,
.table-description {
- min-width: 40ch;
+ min-width: var(--line-length-xs);
}
.table-reflect {
@@ -635,10 +635,10 @@ wa-scroller:has(.component-table) {
.page-wide {
wa-page > main {
- max-width: 140ch;
+ max-width: var(--content-width-l);
.max-line-length {
- max-width: 80ch;
+ max-width: var(--line-length-l);
}
}
}
diff --git a/packages/webawesome/docs/assets/styles/utils.css b/packages/webawesome/docs/assets/styles/utils.css
index 9e4e87951..aadba9e93 100644
--- a/packages/webawesome/docs/assets/styles/utils.css
+++ b/packages/webawesome/docs/assets/styles/utils.css
@@ -4,11 +4,12 @@
@layer wa-utils {
:root {
- /* max-width for fixed width app-based pages */
- --content-width-l: 132ch;
- --content-width-m: 110ch;
- --content-width-s: 80ch;
- --content-width-xs: 50ch;
+ /* max-width for fixed width app-based pages
+ * We round() these to avoid obscure component rendering bugs caused by widths with fractional pixels */
+ --content-width-l: round(up, 132ch, 1px);
+ --content-width-m: round(up, 110ch, 1px);
+ --content-width-s: round(up, 80ch, 1px);
+ --content-width-xs: round(up, 50ch, 1px);
--content-padding-inline: 4ch;
--content-flow-spacing: 8ch;
From 5e482739a9973cd2044c743d57b2e8c5e02e9278 Mon Sep 17 00:00:00 2001
From: Brian Talbot
Date: Fri, 3 Oct 2025 12:56:05 -0400
Subject: [PATCH 21/21] updating Home view to support purchasing Pro (#1528)
---
packages/webawesome/docs/index.md | 21 ++++++++++++++++-----
1 file changed, 16 insertions(+), 5 deletions(-)
diff --git a/packages/webawesome/docs/index.md b/packages/webawesome/docs/index.md
index baf06b778..e85a3473f 100644
--- a/packages/webawesome/docs/index.md
+++ b/packages/webawesome/docs/index.md
@@ -257,11 +257,22 @@ layout: page
{% if currentUser.hasPro %}
Thanks for being a Web Awesome Pro subscriber!
{% else %}
- Psst! You can pre-order Web Awesome Pro at a low, guaranteed-for-life price — but not for long. Get in while the gettin’s good.
-
-
- Pre-order WA Pro
-
+ {% if App.flags.stripeEnabled %}
+
+
Get More with Web Awesome Pro!
+
Unlock Pro-only themes, components, patterns, and great services like the Theme Builder.
+