Merge branch 'next' into theming-ui/dark-mode-for-all-themes

docs/_utilities/markdown.cjs

@@ -25,8 +25,8 @@ markdown.use(markdownItReplaceIt);
 ['tip', 'warning', 'danger'].forEach(type => {
   const variant = type === 'tip' ? 'brand' : type;
   let icon = 'circle-info';
-  if (type === 'warning') icon = 'circle-exclamation';
-  if (type === 'danger') icon = 'triangle-exclamation';
+  if (type === 'warning') icon = 'triangle-exclamation';
+  if (type === 'danger') icon = 'circle-exclamation';
 
   markdown.use(markdownItContainer, type, {
     render: function (tokens, idx) {

docs/assets/styles/code-previews.css

@@ -39,7 +39,7 @@
   right: 0;
   bottom: 0;
   width: 1.75rem;
-  font-size: 20px;
+  font-size: var(--wa-font-size-xs);
   color: var(--wa-color-text-quiet);
   background-color: var(--wa-color-surface-default);
   border-left: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);

docs/pages/components/alert.md

@@ -7,7 +7,7 @@ layout: component
 
 ```html:preview
 <wa-alert open>
-  <wa-icon slot="icon" name="info-circle" variant="regular"></wa-icon>
+  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
   This is a standard alert. You can customize its content and even the icon.
 </wa-alert>
 ```
@@ -18,7 +18,7 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <WaAlert open>
-    <WaIcon slot="icon" name="info-circle" variant="regular" />
+    <WaIcon slot="icon" name="circle-info" variant="regular" />
     This is a standard alert. You can customize its content and even the icon.
   </WaAlert>
 );
@@ -60,7 +60,7 @@ Set the `variant` attribute to change the alert's variant.
 <br />
 
 <wa-alert variant="warning" open>
-  <wa-icon slot="icon" name="exclamation-circle" variant="regular"></wa-icon>
+  <wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
   <strong>Your session has ended</strong><br />
   Please login again to continue.
 </wa-alert>
@@ -68,7 +68,7 @@ Set the `variant` attribute to change the alert's variant.
 <br />
 
 <wa-alert variant="danger" open>
-  <wa-icon slot="icon" name="exclamation-triangle" variant="regular"></wa-icon>
+  <wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon>
   <strong>Your account has been deleted</strong><br />
   We're very sorry to see you go!
 </wa-alert>
@@ -81,7 +81,7 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
 const App = () => (
   <>
     <WaAlert variant="brand" open>
-      <WaIcon slot="icon" name="info-circle" variant="regular" />
+      <WaIcon slot="icon" name="circle-info" variant="regular" />
       <strong>This is super informative</strong>
       <br />
       You can tell by how pretty the alert is.
@@ -90,7 +90,7 @@ const App = () => (
     <br />
 
     <WaAlert variant="success" open>
-      <WaIcon slot="icon" name="check2-circle" variant="regular" />
+      <WaIcon slot="icon" name="circle-check" variant="regular" />
       <strong>Your changes have been saved</strong>
       <br />
       You can safely exit the app now.
@@ -108,7 +108,7 @@ const App = () => (
     <br />
 
     <WaAlert variant="warning" open>
-      <WaIcon slot="icon" name="exclamation-circle" variant="regular" />
+      <WaIcon slot="icon" name="triangle-exclamation" variant="regular" />
       <strong>Your session has ended</strong>
       <br />
       Please login again to continue.
@@ -117,7 +117,7 @@ const App = () => (
     <br />
 
     <WaAlert variant="danger" open>
-      <WaIcon slot="icon" name="exclamation-triangle" variant="regular" />
+      <WaIcon slot="icon" name="circle-exclamation" variant="regular" />
       <strong>Your account has been deleted</strong>
       <br />
       We're very sorry to see you go!
@@ -132,7 +132,7 @@ Add the `closable` attribute to show a close button that will hide the alert.
 
 ```html:preview
 <wa-alert variant="brand" open closable class="alert-closable">
-  <wa-icon slot="icon" name="info-circle" variant="regular"></wa-icon>
+  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
   You can close this alert any time!
 </wa-alert>
 
@@ -159,7 +159,7 @@ const App = () => {
 
   return (
     <WaAlert open={open} closable onWaAfterHide={handleHide}>
-      <WaIcon slot="icon" name="info-circle" variant="regular" />
+      <WaIcon slot="icon" name="circle-info" variant="regular" />
       You can close this alert any time!
     </WaAlert>
   );
@@ -193,7 +193,7 @@ Set the `duration` attribute to automatically hide an alert after a period of ti
   <wa-button variant="brand">Show Alert</wa-button>
 
   <wa-alert variant="brand" duration="3000" closable>
-    <wa-icon slot="icon" name="info-circle" variant="regular"></wa-icon>
+    <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
     This alert will automatically hide itself after three seconds, unless you interact with it.
   </wa-alert>
 </div>
@@ -236,7 +236,7 @@ const App = () => {
         </WaButton>
 
         <WaAlert variant="brand" duration="3000" open={open} closable onWaAfterHide={() => setOpen(false)}>
-          <WaIcon slot="icon" name="info-circle" variant="regular" />
+          <WaIcon slot="icon" name="circle-info" variant="regular" />
           This alert will automatically hide itself after three seconds, unless you interact with it.
         </WaAlert>
       </div>
@@ -280,13 +280,13 @@ You should always use the `closable` attribute so users can dismiss the notifica
   </wa-alert>
 
   <wa-alert variant="warning" duration="3000" closable>
-    <wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon>
+    <wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
     <strong>Your session has ended</strong><br />
     Please login again to continue.
   </wa-alert>
 
   <wa-alert variant="danger" duration="3000" closable>
-    <wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
+    <wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon>
     <strong>Your account has been deleted</strong><br />
     We're very sorry to see you go!
   </wa-alert>
@@ -365,14 +365,14 @@ const App = () => {
       </WaAlert>
 
       <WaAlert ref={warning} variant="warning" duration="3000" closable>
-        <WaIcon slot="icon" name="circle-exclamation" variant="regular" />
+        <WaIcon slot="icon" name="triangle-exclamation" variant="regular" />
         <strong>Your session has ended</strong>
         <br />
         Please login again to continue.
       </WaAlert>
 
       <WaAlert ref={danger} variant="danger" duration="3000" closable>
-        <WaIcon slot="icon" name="triangle-exclamation" variant="regular" />
+        <WaIcon slot="icon" name="circle-exclamation" variant="regular" />
         <strong>Your account has been deleted</strong>
         <br />
         We're very sorry to see you go!

docs/pages/experimental/sandbox.md

@@ -65,13 +65,13 @@ meta:
 </wa-alert>
 <br />
 <wa-alert variant="warning" open>
-  <wa-icon slot="icon" name="circle-exclamation" variant="solid"></wa-icon>
+  <wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
   <strong>Your session has ended</strong><br />
   Please login again to continue.
 </wa-alert>
 <br />
 <wa-alert variant="danger" open>
-  <wa-icon slot="icon" name="triangle-exclamation" variant="solid"></wa-icon>
+  <wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon>
   <strong>Your account has been deleted</strong><br />
   We're very sorry to see you go!
 </wa-alert>

docs/pages/resources/changelog.md

@@ -31,6 +31,7 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
 - Added the `hover-bridge` feature to `<sl-popup>` to support better tooltip accessibility [#1734]
 - Fixed a bug in `<sl-input>` and `<sl-textarea>` that made it work differently from `<input>` and `<textarea>` when using defaults [#1746]
 - Fixed a bug in `<sl-select>` that prevented it from closing when tabbing to another select inside a shadow root [#1763]
+- Fixed a bug in `<sl-spinner>` that caused the animation to appear strange in certain circumstances [#1787]
 - Improved the accessibility of `<sl-tooltip>` so they persist when hovering over the tooltip and dismiss when pressing [[Esc]] [#1734]
 
 ## 2.12.0

scripts/build.js

@@ -212,17 +212,6 @@ await nextTask(`Copying CDN files to "${cdndir}"`, async () => {
   await copy(outdir, cdndir);
 });
 
-// Copy the CDN build to the docs (prod only; we use a virtual directory in dev)
-if (!serve) {
-  await nextTask(`Copying the build to "${sitedir}"`, async () => {
-    await deleteAsync(sitedir);
-
-    // We copy the CDN build because that has everything bundled. Yes this looks weird.
-    // But if we do "/cdn" it requires changes all the docs to do /cdn instead of /dist.
-    await copy(cdndir, path.join(sitedir, 'dist'));
-  });
-}
-
 await nextTask('Building source files', async () => {
   buildResults = await buildTheSource();
 });
@@ -303,7 +292,17 @@ if (serve) {
 
 // Build for production
 if (!serve) {
-  await nextTask('Building the docs', async () => await buildTheDocs());
+  // Copy the CDN build to the docs (prod only; we use a virtual directory in dev)
+  await nextTask(`Copying the build to "${sitedir}"`, async () => {
+    await deleteAsync(sitedir);
+
+    // We copy the CDN build because that has everything bundled. Yes this looks weird.
+    // But if we do "/cdn" it requires changes all the docs to do /cdn instead of /dist.
+    await copy(cdndir, path.join(sitedir, 'dist'));
+  });
+  await nextTask('Building the docs', async () => {
+    await buildTheDocs();
+  });
 }
 
 // Cleanup on exit

src/components/breadcrumb-item/breadcrumb-item.styles.ts

@@ -63,12 +63,12 @@ export default css`
 
   .breadcrumb-item--has-prefix .breadcrumb-item__prefix {
     display: inline-flex;
-    margin-inline-end: var(--wa-space-xs);
+    margin-inline-end: var(--wa-space-s);
   }
 
   .breadcrumb-item--has-suffix .breadcrumb-item__suffix {
     display: inline-flex;
-    margin-inline-start: var(--wa-space-xs);
+    margin-inline-start: var(--wa-space-s);
   }
 
   :host(:last-of-type) .breadcrumb-item__separator {
@@ -78,7 +78,7 @@ export default css`
   .breadcrumb-item__separator {
     display: inline-flex;
     align-items: center;
-    margin: 0 var(--wa-space-xs);
+    margin: 0 var(--wa-space-s);
     user-select: none;
     -webkit-user-select: none;
   }

src/components/button/button.styles.ts

@@ -304,8 +304,8 @@ export default css`
   }
 
   .button--caret .button__caret::part(svg) {
-    width: 0.75em;
-    height: 0.75em;
+    width: 0.875em;
+    height: 0.875em;
   }
 
   /*

src/components/details/details.styles.ts

@@ -60,6 +60,7 @@ export default css`
     flex: 0 0 auto;
     display: flex;
     align-items: center;
+    color: var(--wa-color-text-quiet);
     transition: var(--wa-transition-fast) rotate ease;
   }
 

src/components/menu-item/menu-item.styles.ts

@@ -100,6 +100,7 @@ export default css`
     display: flex;
     align-items: center;
     justify-content: center;
+    font-size: 0.875em;
     width: var(--wa-space-xl);
     visibility: hidden;
   }

src/components/option/option.styles.ts

@@ -20,7 +20,7 @@ export default css`
     align-items: center;
     font: inherit;
     color: var(--wa-color-neutral-text-on-surface);
-    padding: var(--wa-space-xs) var(--wa-space-m) var(--wa-space-xs) var(--wa-space-xs);
+    padding: var(--wa-space-xs) var(--wa-space-m) var(--wa-space-xs) var(--wa-space-2xs);
     transition: var(--wa-transition-fast) fill;
     cursor: pointer;
   }
@@ -54,8 +54,9 @@ export default css`
     display: flex;
     align-items: center;
     justify-content: center;
+    font-size: 0.875em;
     visibility: hidden;
-    padding-inline-end: var(--wa-space-2xs);
+    width: var(--wa-space-xl);
   }
 
   .option--selected .option__check {

src/components/select/select.styles.ts

@@ -274,6 +274,8 @@ export default css`
     flex: 0 0 auto;
     display: flex;
     align-items: center;
+    color: var(--wa-color-text-quiet);
+    font-size: 0.875em;
     transition: rotate var(--wa-transition-normal) ease;
     rotate: 0;
     margin-inline-start: var(--wa-space-s);

src/components/spinner/spinner.styles.ts

@@ -1,6 +1,11 @@
 import { css } from 'lit';
 import componentStyles from '../../styles/component.styles.js';
 
+// Resizing a spinner element using anything but font-size will break the animation because the animation uses em units.
+// Therefore, if a spinner is used in a flex container without `flex: none` applied, the spinner can grow/shrink and
+// break the animation. The use of `flex: none` on the host element prevents this by always having the spinner sized
+// according to its actual dimensions.
+
 export default css`
   ${componentStyles}
 
@@ -13,6 +18,7 @@ export default css`
     display: inline-flex;
     width: 1em;
     height: 1em;
+    flex: none;
   }
 
   .spinner {
@@ -46,7 +52,7 @@ export default css`
   @keyframes spin {
     0% {
       transform: rotate(0deg);
-      stroke-dasharray: 0.01em, 2.75em;
+      stroke-dasharray: 0.05em, 3em;
     }
 
     50% {
@@ -56,7 +62,7 @@ export default css`
 
     100% {
       transform: rotate(1080deg);
-      stroke-dasharray: 0.01em, 2.75em;
+      stroke-dasharray: 0.05em, 3em;
     }
   }
 `;

src/components/spinner/spinner.test.ts

@@ -27,5 +27,12 @@ describe('<wa-spinner>', () => {
       //
       expect(getComputedStyle(indicator).transform).to.equal('matrix(1, 0, 0, 1, 0, 0)');
     });
+
+    it('should have flex:none to prevent flex re-sizing', async () => {
+      const spinner = await fixture<WaSpinner>(html` <wa-spinner></wa-spinner> `);
+
+      // 0 0 auto is a compiled value for `none`
+      expect(getComputedStyle(spinner).flex).to.equal('0 0 auto');
+    });
   });
 });

src/components/tag/tag.component.ts

@@ -80,7 +80,7 @@ export default class WaTag extends WebAwesomeElement {
                 exportparts="base:remove-button__base"
                 name="xmark"
                 library="system"
-                variant="regular"
+                variant="solid"
                 label=${this.localize.term('remove')}
                 class="tag__remove"
                 @click=${this.handleRemoveClick}

src/themes/applied.css

@@ -185,8 +185,32 @@ abbr[title] {
   cursor: help;
 }
 
+/* Code and similar */
+code,
+pre,
+kbd,
+samp,
+var {
+  font-family: var(--wa-font-family-code);
+  font-size: 0.975em;
+  background-color: var(--wa-color-neutral-fill-subtle);
+  border-radius: var(--wa-corners-s);
+  padding-block: var(--wa-space-3xs);
+  padding-inline: var(--wa-space-2xs);
+}
+
+code {
+  background-color: color-mix(in oklab, var(--wa-color-neutral-spot), transparent 90%);
+}
+
+pre {
+  color: var(--wa-color-text-normal);
+  border-radius: var(--wa-corners-s);
+  padding: var(--wa-space-m);
+  white-space: pre;
+}
+
 kbd {
-  background: var(--wa-color-neutral-fill-subtle);
   border: solid 1px var(--wa-color-neutral-border-subtle);
   box-shadow:
     inset 0 1px 0 1px rgb(255 255 255 / 0.2),
@@ -201,27 +225,6 @@ kbd wa-icon {
   vertical-align: -2px;
 }
 
-/* Code and similar */
-code,
-pre,
-kbd,
-samp,
-var {
-  font-family: var(--wa-font-family-code);
-  font-size: 0.975em;
-  background-color: color-mix(in oklab, var(--wa-color-neutral-spot), transparent 92%);
-  border-radius: var(--wa-corners-s);
-  padding-block: var(--wa-space-3xs);
-  padding-inline: var(--wa-space-2xs);
-}
-
-pre {
-  color: var(--wa-color-text-normal);
-  border-radius: var(--wa-corners-s);
-  padding: var(--wa-space-m);
-  white-space: pre;
-}
-
 /* Block quotes */
 blockquote {
   position: relative;