Merge branch 'next' into custom-states

docs/.eleventy.js

@@ -1,4 +1,3 @@
-import { parse } from 'path';
 import { anchorHeadingsPlugin } from './_utils/anchor-headings.js';
 import { codeExamplesPlugin } from './_utils/code-examples.js';
 import { copyCodePlugin } from './_utils/copy-code.js';
@@ -10,6 +9,7 @@ import { removeDataAlphaElements } from './_utils/remove-data-alpha-elements.js'
 import litPlugin from '@lit-labs/eleventy-plugin-lit';
 import { readFile } from 'fs/promises';
 import componentList from './_data/componentList.js';
+import * as filters from './_utils/filters.js';
 import { outlinePlugin } from './_utils/outline.js';
 import { replaceTextPlugin } from './_utils/replace-text.js';
 import { searchPlugin } from './_utils/search.js';
@@ -38,18 +38,10 @@ export default function (eleventyConfig) {
   // Template filters - {{ content | filter }}
   eleventyConfig.addFilter('inlineMarkdown', content => markdown.renderInline(content || ''));
   eleventyConfig.addFilter('markdown', content => markdown.render(content || ''));
-  eleventyConfig.addFilter('stripExtension', string => parse(string).name);
-  eleventyConfig.addFilter('stripPrefix', content => content.replace(/^wa-/, ''));
-  eleventyConfig.addFilter('trimPipes', content => {
-    // 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.
-    return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
-  });
-  eleventyConfig.addFilter('keys', obj => Object.keys(obj));
-  eleventyConfig.addFilter('log', (firstArg, ...rest) => {
-    console.log(firstArg, ...rest);
-    return firstArg;
-  });
+
+  for (let name in filters) {
+    eleventyConfig.addFilter(name, filters[name]);
+  }
 
   eleventyConfig.addFilter('sort', (arr, key = 'data.title') => {
     key = key.split('.');

docs/_includes/base.njk

@@ -98,7 +98,7 @@
             <span class="only-mobile">{% include "logo-simple.njk" %}</span>
           </a>
           <small id="version-number" class="only-desktop">{{ package.version }}</small>
-          <wa-badge variant="warning" class="only-desktop">Alpha</wa-badge>
+          <wa-badge variant="warning" appearance="tinted" class="only-desktop">Alpha</wa-badge>
         </div>
 
         <div id="docs-toolbar">

docs/_utils/filters.js

@@ -0,0 +1,24 @@
+import { parse } from 'path';
+
+export function stripExtension(string) {
+  return parse(string).name;
+}
+
+export function stripPrefix(content) {
+  return content.replace(/^wa-/, '');
+}
+
+// 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.
+export function trimPipes(content) {
+  return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
+}
+
+export function keys(obj) {
+  return Object.keys(obj);
+}
+
+export function log(firstArg, ...rest) {
+  console.log(firstArg, ...rest);
+  return firstArg;
+}

docs/assets/styles/docs.css

@@ -76,8 +76,6 @@ wa-page > header {
     margin-block-start: var(--wa-space-2xs);
   }
   #version-number + wa-badge {
-    --background-color: var(--wa-color-warning-fill-quiet);
-    --text-color: var(--wa-color-warning-on-quiet);
     font-size: var(--wa-font-size-2xs);
     text-transform: uppercase;
   }

docs/index.md

@@ -86,13 +86,13 @@ layout: page
       flex: 1 1 67%;
     }
     & wa-button {
-      --wa-form-control-height-s: 2.5rem;
       --border-color: black;
       --border-width: 0.125rem;
-      --box-shadow: 0 0.25rem 0 0 var(--border-color);
+      box-shadow: 0 0.25rem 0 0 var(--border-color);
       flex: 1 1 auto;
+      height: 2.5rem;
       &:active:not([disabled]) {
-        --box-shadow: 0 0 0 0 transparent;
+        box-shadow: 0 0 0 0 transparent;
         transform: translateY(0.25rem);
       }
     }
@@ -190,8 +190,7 @@ layout: page
         gap: 0.5rem;
       }
       & wa-button {
-        --wa-form-control-height-m: 1.5rem;
-        display: inline-flex;
+        height: 1.5rem;
         font-size: 0.75rem;
       }
     }

scripts/build.js

@@ -1,4 +1,3 @@
-import { litCssPlugin } from '@konnorr/esbuild-plugin-lit-css';
 import browserSync from 'browser-sync';
 import chalk from 'chalk';
 import { execSync } from 'child_process';
@@ -182,7 +181,7 @@ async function generateBundle() {
     bundle: true,
     splitting: true,
     minify: false,
-    plugins: [replace({ __WEBAWESOME_VERSION__: version }), litCssPlugin()],
+    plugins: [replace({ __WEBAWESOME_VERSION__: version })],
     loader: {
       '.css': 'text',
     },

src/components/callout/callout.css

@@ -2,19 +2,16 @@
   --icon-color: currentColor;
   --icon-size: var(--wa-font-size-l);
   --spacing: var(--wa-space-m);
-  --background-color: var(--wa-color-fill-quiet);
-  --border-color: var(--wa-color-border-quiet);
-  --text-color: var(--wa-color-on-normal);
 
   position: relative;
   display: flex;
   align-items: stretch;
   border-radius: var(--wa-panel-border-radius);
-  background-color: var(--background-color);
-  border-color: var(--border-color);
+  background-color: var(--background-color, var(--wa-color-fill-quiet));
+  border-color: var(--border-color, var(--wa-color-border-quiet));
   border-style: var(--wa-panel-border-style);
   border-width: var(--wa-panel-border-width);
-  color: var(--text-color);
+  color: var(--text-color, var(--wa-color-on-normal));
   padding: var(--spacing);
 }
 

src/styles/native/button.css

@@ -41,6 +41,7 @@
 
 button,
 input:is([type='button'], [type='reset'], [type='submit']),
+:host([href]) a,
 .wa-button:not([part~='base']) {
   display: inline-flex;
   background-color: var(--background-color);