@repobit/dex-system-design 1.0.1 → 2.0.0

package/src/components/paragraph/paragraph.stories.js

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import './paragraph.js';
+import '../heading/heading.js';
 
 export default {
   title     : 'Atoms/Paragraph',
@@ -51,9 +52,15 @@ layout around them, not to the paragraph itself.
   argTypes: {
     variant: {
       control    : { type: 'select' },
-      options    : ['large', 'regular', 'small'],
-      description: 'Typography size variant, reflected as an attribute for CSS targeting',
-      table      : { type: { summary: "'large'|'regular'|'small'" }, defaultValue: { summary: 'regular' }, category: 'Appearance' }
+      options    : ['lead', 'large', 'regular', 'small', 'xsmall', 'eyebrow'],
+      description: 'Typography role, reflected as an attribute for CSS targeting. `eyebrow` is the short brand-ink label above a section title.',
+      table      : { type: { summary: "'lead'|'large'|'regular'|'small'|'xsmall'|'eyebrow'" }, defaultValue: { summary: 'regular' }, category: 'Appearance' }
+    },
+    color: {
+      control    : { type: 'select' },
+      options    : ['', 'primary', 'strong', 'muted', 'subtle', 'inverse', 'success', 'warning', 'error'],
+      description: 'A semantic colour role, the same set `bd-h` and `bd-display` take. `primary` is brand blue; `inverse` is white on a dark or brand band.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: "''" }, category: 'Appearance' }
     },
     padding: {
       control    : 'text',
@@ -145,9 +152,36 @@ export const MultiParagraph = {
   parameters: { docs: { description: { story: 'Three paragraphs of different kinds used together as a typical content block.' } } }
 };
 
+export const Eyebrow = {
+  name  : 'Eyebrow',
+  render: () => html`
+    <div style="display:flex; flex-direction:column; gap:var(--spacing-16); max-width:588px;">
+      <bd-p variant="eyebrow">15+ years of AI-driven security innovation</bd-p>
+      <bd-h as="h2" visual-level="h2">AI Across Bitdefender</bd-h>
+    </div>
+    <div style="margin-top:var(--spacing-32); background:var(--color-surface-brand); padding:var(--spacing-24); border-radius:var(--radius-md); max-width:588px;">
+      <bd-p variant="eyebrow" color="inverse">On a brand band, color="inverse"</bd-p>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'The label above a section title, in text-brand: the label-large role (16px Medium 500 at 1.5) from lg up, and label-default (14px, same weight and leading) below lg, as the homepage draws it on tablet and mobile. It is how all five eyebrows in the package are spelled now (bento grid, header code, trust panel twice, agent endpoints), and what the homepage draws. `color` overrides the ink.' } } }
+};
+
+export const Color = {
+  name  : 'Color',
+  render: () => html`
+    <div style="display:flex; flex-direction:column; gap:var(--spacing-12); max-width:588px;">
+      ${['strong', 'primary', 'muted', 'subtle', 'success', 'warning', 'error'].map(c => html`<bd-p color="${c}">color="${c}" — ${sampleText}</bd-p>`)}
+    </div>
+    <div style="margin-top:var(--spacing-24); background:var(--color-surface-brand); padding:var(--spacing-24); border-radius:var(--radius-md); max-width:588px;">
+      <bd-p variant="large" color="inverse">color="inverse" — Bitdefender protects consumers, small businesses, and enterprises with cybersecurity powered by world-class threat intelligence.</bd-p>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'A semantic role, resolved to a token. Without it a paragraph\'s ink could only come from the composing component\'s CSS.' } } }
+};
+
 export const Playground = {
   name      : '🛝 Playground',
-  args      : { kind: 'regular' },
-  render    : (args) => html`<bd-p variant="${args.kind}">${sampleText}</bd-p>`,
-  parameters: { docs: { description: { story: 'Interactive playground. Switch between large, regular, and small via Controls.' } } }
+  args      : { kind: 'regular', color: '' },
+  render    : (args) => html`<bd-p variant="${args.kind}" color="${args.color}">${sampleText}</bd-p>`,
+  parameters: { docs: { description: { story: 'Interactive playground. Switch the variant and the colour role via Controls.' } } }
 };

package/src/components/picture/picture.css.js

@@ -68,53 +68,11 @@ export default css`
       border-radius: var(--radius-full);
     }
 
-    /* Responsive Behavior */
-    .bd-picture.responsive {
-      width: 100%;
-    }
-
-    .bd-picture.responsive img {
-      width: 100%;
-      height: auto;
-    }
-
-    /* Aspect Ratio Containers */
-    .bd-picture.aspect-16-9 {
-      aspect-ratio: 16 / 9;
-    }
-
-    .bd-picture.aspect-16-9 img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-
-    .bd-picture.aspect-4-3 {
-      aspect-ratio: 4 / 3;
-    }
-
-    .bd-picture.aspect-4-3 img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-
-    .bd-picture.aspect-1-1 {
-      aspect-ratio: 1 / 1;
-    }
-
-    .bd-picture.aspect-1-1 img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-
-    .bd-picture:focus-within {
-      /* the one focus ring — see Foundations/Focus */
-      outline: none;
-      box-shadow: var(--focus-outline-primary);
-      border-radius: var(--focus-outline-radius);
-    }
+    /* Gone from here, because nothing could reach them: responsive,
+       aspect-16-9 / 4-3 / 1-1 and the hover-zoom and hover-lift effects had
+       no prop that sets them -- fit is written as fit-*, so
+       not even a misspelt fit could produce one. :focus-within ringed a
+       <picture> holding nothing focusable. */
 
     /* Loading state.
 
@@ -169,8 +127,9 @@ export default css`
       color: var(--color-text-muted);
     }
 
-    /* One sentence for this state, shared with bd-img, and a local property
-       rather than a string in the stylesheet so it can be translated. */
+    /* A local property rather than a string in the stylesheet, so it can be
+       translated. It keeps the --bd-img- name it always had, which is the one
+       pages already set. */
     .bd-picture:not([loaded])::before {
       content: var(--bd-img-loading-label, "Loading image");
       /* no role: the pre-load placeholder -- a glyph/marker/placeholder box, not running
@@ -199,16 +158,6 @@ export default css`
       transform: scale(1);
     }
 
-    /* Hover effects */
-    .bd-picture.hover-zoom:hover img {
-      transform: scale(1.05);
-    }
-
-    .bd-picture.hover-lift:hover {
-      transform: translateY(-2px);
-      transition: transform var(--transition-duration-slow) var(--transition-easing-smooth);
-    }
-
     /* Performance optimizations */
     .bd-picture img {
       will-change: transform, opacity;
@@ -248,14 +197,6 @@ export default css`
       .bd-picture img {
         transition: none;
       }
-      
-      .bd-picture.hover-zoom:hover img {
-        transform: none;
-      }
-      
-      .bd-picture.hover-lift:hover {
-        transform: none;
-      }
     }
 
     /* No @media (prefers-color-scheme: dark) block. This was the one atom that

package/src/components/picture/picture.js

@@ -5,6 +5,7 @@ import pictureCSS from "./picture.css.js";
 
 // the radius steps picture.css.js implements — the full --radius-* scale
 const RADIUS_STEPS = ['none', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', 'full'];
+const FITS = ['cover', 'contain', 'fill', 'none', 'scale-down'];
 
 export class BdPicture extends LitElement {
   static properties = {
@@ -50,20 +51,26 @@ export class BdPicture extends LitElement {
   }
 
   render() {
+    // fit becomes a class, so only the values picture.css.js implements get
+    // through; an unknown one used to leave the image with no object-fit
     const classes = [
       'bd-picture',
-      `fit-${this.fit}`,
+      `fit-${FITS.includes(this.fit) ? this.fit : 'cover'}`,
       `radius-${RADIUS_STEPS.includes(this.radius) ? this.radius : 'none'}`
     ].filter(Boolean).join(' ');
 
+    // Each source's optional attributes are left off when not given. type
+    // used to be written as-is, so a source without one rendered
+    // type="undefined" -- a MIME type no browser supports, so it skipped the
+    // source and fell through to the next one or the <img>.
     return html`
       <picture class="${classes}">
         ${this.sources.map(source => html`
-          <source 
-            type="${source.type}" 
+          <source
+            type="${source.type || nothing}"
             srcset="${source.srcset}"
-            media="${source.media || ''}"
-            sizes="${source.sizes || ''}"
+            media="${source.media || nothing}"
+            sizes="${source.sizes || nothing}"
           >
         `)}
         <img 
@@ -102,9 +109,9 @@ export class BdPicture extends LitElement {
      and a default-configured bd-picture then renders a fully loaded image at
      opacity 0. The two defects had to be fixed together or neither is visible.
 
-     bd-img is the shape this follows. It keys its placeholder on
-     `:not([src])` -- a fact the element already knows -- and never hides the
-     image at all, which is why bd-img has no equivalent bug. The minimal
+     bd-img never hides its image at all, which is why it has no equivalent
+     bug -- and no placeholder either, since an <img> cannot draw one. The
+     minimal
      change here is to make this component tell the truth it already asks CSS
      about, rather than to restyle it: the fade on load is a deliberate
      nicety, and it is kept.

package/src/components/pricing-cards/pricing-card.css.js

@@ -20,12 +20,22 @@ export default css`
 
   button:focus-visible {
     /* the one focus ring — see Design Tokens/Focus */
-    outline: none;
+    /* forced-colors mode does not paint box-shadow, so the ring
+       vanishes there; it does paint an outline, in a system colour. This one
+       is transparent everywhere else, and the offset lands it on the ring's
+       outer band. */
+    outline: var(--border-width-2) solid transparent;
+    outline-offset: var(--focus-outline-offset);
     box-shadow: var(--focus-outline-primary);
   }
   a:focus-visible {
     /* the one focus ring — see Design Tokens/Focus */
-    outline: none;
+    /* forced-colors mode does not paint box-shadow, so the ring
+       vanishes there; it does paint an outline, in a system colour. This one
+       is transparent everywhere else, and the offset lands it on the ring's
+       outer band. */
+    outline: var(--border-width-2) solid transparent;
+    outline-offset: var(--focus-outline-offset);
     box-shadow: var(--focus-outline-primary);
     border-radius: var(--focus-outline-radius);
   }

package/src/components/pricing-cards/pricing-card.js

@@ -204,7 +204,7 @@ class PricingCard extends LitElement {
           </bd-badge>
           
           <bd-p variant="small" class="badge-subtitle">1 account & 5 devices</bd-p>
-          <bd-divider-horizontal color="subtle"></bd-divider-horizontal>
+          <bd-divider-horizontal color="subtle" opacity="0.25"></bd-divider-horizontal>
         </div>
         
         <!-- Pricing section with store integration -->
@@ -249,7 +249,7 @@ class PricingCard extends LitElement {
           </bd-button>
         </div>
         
-        <bd-divider-horizontal color="subtle"></bd-divider-horizontal>
+        <bd-divider-horizontal color="subtle" opacity="0.25"></bd-divider-horizontal>
         
         <!-- Features sections -->
         ${this.features ? html`<pricing-card-features .shadow=${this.shadow}></pricing-card-features>` : ""}
@@ -316,7 +316,7 @@ class PricingCardFamily extends LitElement {
           </bd-badge>
           
           <bd-p variant="small" class="badge-subtitle">5 accounts & 25 devices</bd-p>
-          <bd-divider-horizontal color="subtle"></bd-divider-horizontal>
+          <bd-divider-horizontal color="subtle" opacity="0.25"></bd-divider-horizontal>
         </div>
         
         <!-- Pricing section with store integration -->
@@ -361,7 +361,7 @@ class PricingCardFamily extends LitElement {
           </bd-button>
         </div>
         
-        <bd-divider-horizontal color="subtle"></bd-divider-horizontal>
+        <bd-divider-horizontal color="subtle" opacity="0.25"></bd-divider-horizontal>
         
         <!-- Features sections -->
         ${this.features

package/src/components/progress/progress.js

@@ -3,6 +3,9 @@ import { LitElement, html, nothing } from 'lit';
 import '../../tokens/tokens.js';
 import { progressCSS } from './progress.css.js';
 
+/* The tones progress.css.js styles. No tone is the default fill. */
+const TONES = ['info', 'success', 'error'];
+
 export class BdProgress extends LitElement {
   static styles = [progressCSS];
 
@@ -20,20 +23,37 @@ export class BdProgress extends LitElement {
     this.label = '';
   }
 
+  /* tone reflects, so an unknown one used to sit on the element as if it
+     meant something -- tone="warning" or the retired "default" -- while the
+     bar drew the default fill. It is cleared instead, so the attribute says
+     what is drawn. */
+  willUpdate(changed) {
+    if (changed.has('tone') && this.tone != null && !TONES.includes(this.tone)) this.tone = undefined;
+  }
+
   render() {
+    /* One clamped value for all three readers. Only the fill used to be
+       clamped: value 150 read "150%" beside a full bar and reported an
+       aria-valuenow above aria-valuemax, a negative value drew nothing and
+       read "-20%", and max 0 read "NaN%". A max that is not a positive number
+       falls back to the default, as an unknown variant does elsewhere. */
+    const max = Number.isFinite(this.max) && this.max > 0 ? this.max : 100;
+    const value = Number.isFinite(this.value) ? Math.min(Math.max(this.value, 0), max) : 0;
+    const percent = (value / max) * 100;
+
     return html`
       ${this.label
-        ? html`<span class="label"><span>${this.label}</span><span>${Math.round((this.value / this.max) * 100)}%</span></span>`
+        ? html`<span class="label"><span>${this.label}</span><span>${Math.round(percent)}%</span></span>`
         : nothing}
       <div
         class="track"
         role="progressbar"
-        aria-valuenow=${this.value}
+        aria-valuenow=${value}
         aria-valuemin="0"
-        aria-valuemax=${this.max}
+        aria-valuemax=${max}
         aria-label=${this.label || 'Progress'}
       >
-        <div class="fill" style="width: ${Math.min(100, (this.value / this.max) * 100)}%"></div>
+        <div class="fill" style="width: ${percent}%"></div>
       </div>
     `;
   }

package/src/components/progress/progress.stories.js

@@ -24,15 +24,17 @@ quantity something is. For work of unknown length use \`<bd-spinner>\`.
 | \`value\` | number, current progress | \`0\` |
 | \`max\` | number, the total | \`100\` |
 | \`label\` | caption shown above the bar, with a percentage | \`''\` |
-| \`tone\` | \`default\`, \`success\`, \`error\` | \`default\` |
+| \`tone\` | \`info\`, \`success\`, \`error\` — anything else is cleared | unset: the default fill |
 
 ### Notes
 When \`label\` is set, a row above the bar shows the label on the left and the
 rounded percentage on the right, so the number is visible and not only
 announced.
 
-The fill is clamped at 100%, so a \`value\` above \`max\` cannot overflow the
-track.
+\`value\` is clamped to 0…\`max\`, and the fill, the percentage and
+\`aria-valuenow\` all read the clamped number, so a value above \`max\` shows a
+full bar, "100%" and a valuenow equal to the max. A \`max\` that is not a
+positive number falls back to \`100\`.
 
 ### Accessibility
 The track carries \`role="progressbar"\` with \`aria-valuenow\`, \`aria-valuemin\`
@@ -61,9 +63,9 @@ and \`aria-valuemax\`, so assistive tech reports real progress rather than just
     },
     tone: {
       control    : { type: 'select' },
-      options    : ['default', 'success', 'error'],
-      description: 'Colour of the fill.',
-      table      : { type: { summary: 'string' }, defaultValue: { summary: "default" }, category: 'Appearance' }
+      options    : ['', 'info', 'success', 'error'],
+      description: 'Colour of the fill. Unset is the default fill; a value that is not a tone is cleared.',
+      table      : { type: { summary: "'info' | 'success' | 'error'" }, defaultValue: { summary: 'unset' }, category: 'Appearance' }
     }
   }
 };

package/src/components/radio/radio.css.js

@@ -39,7 +39,12 @@ export default css`
     /* the one focus ring — see Foundations/Focus. A two-colour ring whose
        white inner band keeps it visible on a coloured or dark surface, which a
        single-colour outline cannot do. */
-    outline: none;
+    /* forced-colors mode does not paint box-shadow, so the ring
+       vanishes there; it does paint an outline, in a system colour. This one
+       is transparent everywhere else, and the offset lands it on the ring's
+       outer band. */
+    outline: var(--border-width-2) solid transparent;
+    outline-offset: var(--focus-outline-offset);
     box-shadow: var(--focus-outline-primary);
     border-radius: var(--focus-outline-radius);
   }

package/src/components/radio/radio.js

@@ -20,7 +20,11 @@ class BdRadio extends LitElement {
   static styles = [radioCSS];
 
   static properties = {
-    name    : { type: String },
+    /* Reflected because the group is found by it: _group selects same-name
+       radios by attribute, so a name set as a property -- radio.name = "plan",
+       which is what a framework binding does -- left the radio in no group at
+       all, with no exclusivity, no arrow keys and its own tab stop. */
+    name    : { type: String, reflect: true },
     value   : { type: String },
     checked : { type: Boolean, reflect: true },
     disabled: { type: Boolean, reflect: true },
@@ -43,7 +47,7 @@ class BdRadio extends LitElement {
     if (!this.name) return [this];
     const root = this.getRootNode();
     const scope = root instanceof Document || root instanceof ShadowRoot ? root : document;
-    return [...scope.querySelectorAll(`bd-radio[name="${this.name}"]`)];
+    return [...scope.querySelectorAll(`bd-radio[name="${CSS.escape(this.name)}"]`)];
   }
 
   /**
@@ -57,6 +61,45 @@ class BdRadio extends LitElement {
     return group.find(r => !r.disabled) === this;
   }
 
+  /* The tab stop is a group decision, but each radio renders only when its own
+     properties change. So when one radio's checked or disabled flips, or one
+     joins or leaves, the rest have to be told to re-render: clicking radio 3
+     in a group with nothing selected used to leave radio 1 at tabindex 0
+     beside it -- two tab stops in one group. The peers' own checked and
+     disabled do not change, so this does not cascade. */
+  _refreshPeers(group) {
+    for (const radio of group) {
+      if (radio !== this) radio.requestUpdate?.();
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._refreshPeers(this._group);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    // detached, this radio can no longer find its root, so it asks the one it
+    // was connected in
+    const root = this._root;
+    if (this.name && root) {
+      this._refreshPeers(root.querySelectorAll(`bd-radio[name="${CSS.escape(this.name)}"]`));
+    }
+  }
+
+  updated(changed) {
+    this._root = this.isConnected ? this.getRootNode() : this._root;
+    if (changed.has("checked") || changed.has("disabled") || changed.has("name")) {
+      this._refreshPeers(this._group);
+    }
+    // a radio renamed out of a group leaves its old peers to re-decide too
+    const oldName = changed.get("name");
+    if (oldName && this._root) {
+      this._refreshPeers(this._root.querySelectorAll(`bd-radio[name="${CSS.escape(oldName)}"]`));
+    }
+  }
+
   _select() {
     if (this.disabled || this.checked) return;
 
@@ -153,8 +196,10 @@ class BdToggleRadio extends LitElement {
     this.checked = !this.checked;
 
     this.dispatchEvent(
+      // name was declared and read by nothing; it is carried here, as
+      // bd-radio carries it, so a handler can tell which control changed
       new CustomEvent("change", {
-        detail  : { checked: this.checked, value: this.checked ? this.value : null },
+        detail  : { checked: this.checked, value: this.checked ? this.value : null, name: this.name },
         bubbles : true,
         composed: true
       })

package/src/components/radio/radio.stories.js

@@ -69,7 +69,7 @@ Two deviations from the design, both deliberate:
 
 ### Events
 - \`change\` — \`detail: { name, value }\` on \`bd-radio\`;
-  \`detail: { checked, value }\` on \`bd-toggle-radio\`.
+  \`detail: { checked, value, name }\` on \`bd-toggle-radio\`.
         `
       }
     }

package/src/components/shared/form-field.css.js

@@ -106,12 +106,17 @@ export const formFieldCSS = css`
      shows the indicator for a pointer click there too, because typing is
      expected — but the select is a control you click and walk away from, and
      it was drawing the full ring on every mouse press where bd-button drew
-     nothing. .focused is the component's own prop, not a user interaction, so
-     it stays unconditional. */
-  .form-input-bd:focus-visible,
-  .form-input-bd.focused {
+     nothing. There is no .focused class any more: a field's focused prop now
+     moves real focus, so :focus-visible is the only thing that draws this. */
+  .form-input-bd:focus-visible {
     border-color: var(--form-input-focus-borderColor);
     box-shadow: var(--focus-outline-primary);
+    /* forced-colors mode does not paint box-shadow, so the ring
+       vanishes there; it does paint an outline, in a system colour. This one
+       is transparent everywhere else, and the offset lands it on the ring's
+       outer band. */
+    outline: var(--border-width-2) solid transparent;
+    outline-offset: var(--focus-outline-offset);
   }
 
   /* ---- sizes ------------------------------------------------------------
@@ -139,6 +144,27 @@ export const formFieldCSS = css`
     border-radius: var(--form-input-large-borderRadius);
   }
 
+  /* The text's own room. --form-input-*-height is padding plus the line box,
+     and the box is border-box, so the 1px border on each edge came out of the
+     content: the line box stood 2px taller than the space left for it. An
+     input centres its line and paints into the padding, so it never showed;
+     a select does neither -- it clips at the content box -- and at md the
+     descenders of "Italy gjpqy ș ț" lost their bottoms. Taking the border out
+     of the block padding instead gives the line all of its box and leaves
+     every height where it was, on its button. The textarea is left out: its
+     height comes from its rows, so this would only make it 2px shorter. */
+  .input-sm:not(textarea) {
+    padding-block: calc(var(--spacing-8) - var(--form-input-default-borderWidth));
+  }
+
+  .input-md:not(textarea) {
+    padding-block: calc(var(--spacing-12) - var(--form-input-default-borderWidth));
+  }
+
+  .input-lg:not(textarea) {
+    padding-block: calc(var(--spacing-16) - var(--form-input-default-borderWidth));
+  }
+
   ::placeholder {
     color: var(--color-text-subtle);
     opacity: 1;

package/src/components/shared/token-scales.js

@@ -141,6 +141,22 @@ export const fontFamily = onScale(FONT_FAMILY_STEPS, '--typography-fontFamily-')
 export const letterSpacing = onScale(LETTER_SPACING_STEPS, '--typography-letterSpacing-');
 export const radius     = onScale(RADIUS_STEPS, '--radius-');
 
+/* The border-width steps. A px spelling of a step -- "2px" -- is read as the
+   step, because that is what callers wrote before there was a scale here. */
+export const BORDER_WIDTH_STEPS = ['0', '1', '2', '3', '4', '8'];
+export const borderWidth = value => {
+  const step = String(value ?? '').replace(/px$/, '');
+  return BORDER_WIDTH_STEPS.includes(step) ? `var(--border-width-${step})` : '';
+};
+
+/* Not a scale: a fraction. An opacity given as a prop is kept only when it is
+   a number from 0 to 1, so a stray string never reaches an inline style. */
+export const opacity = value => {
+  if (value === '' || value == null) return '';
+  const n = Number(value);
+  return Number.isFinite(n) && n >= 0 && n <= 1 ? String(n) : '';
+};
+
 export const space = name =>
   (Object.hasOwn(SPACE_STEPS, name) ? `var(--spacing-${SPACE_STEPS[name]})` : '');
 

package/src/components/spinner/spinner.css.js

@@ -33,6 +33,19 @@ export const spinnerCSS = css`
     --bd-spinner-pulse-fill: color-mix(in srgb, var(--color-neutral-0) 30%, transparent);
   }
 
+  /* The status region: text for assistive technology, nothing on screen. */
+  .announce {
+    position: absolute;
+    /* no token: 1px is the clip idiom's own measure, not a border -- the same
+       sanctioned literal as visually-hidden.css.js. */
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
   .spinner {
     width: var(--dimension-24);
     height: var(--dimension-24);
@@ -47,13 +60,27 @@ export const spinnerCSS = css`
 
   @keyframes bd-spin { to { transform: rotate(360deg); } }
 
-  /* a spinner that cannot spin should still say something, so fall back to a
-     pulse rather than freezing solid */
+  /* A spinner that cannot spin should still say something, so it pulses
+     rather than freezing solid -- but only the disc inside it. This used to
+     repaint the arc in the track colour and pulse the whole ring, so what was
+     left was the track alone: 1.66:1 against the page, 1.21:1 at the pulse's
+     low point, under the 3:1 WCAG 1.4.11 asks of a graphic that conveys
+     state. The arc now stays, still and at full strength (4.53:1 on the page,
+     3.64:1 on the disc), and the disc behind it carries the motion. Pulsing
+     the whole spinner instead would take the arc to 1.79:1 at the bottom of
+     each pulse. */
   @media (prefers-reduced-motion: reduce) {
     .spinner {
-      animation: bd-pulse var(--transition-duration-slower) var(--transition-easing-smooth) infinite alternate;
-      border-top-color: var(--bd-spinner-track);
+      position: relative;
+      animation: none;
+    }
+    .spinner::before {
+      content: "";
+      position: absolute;
+      inset: var(--spacing-0);
+      border-radius: var(--radius-full);
       background: var(--bd-spinner-pulse-fill);
+      animation: bd-pulse var(--transition-duration-slower) var(--transition-easing-smooth) infinite alternate;
     }
     @keyframes bd-pulse { to { opacity: var(--opacity-pulse); } }
   }

package/src/components/spinner/spinner.js

@@ -8,12 +8,13 @@ export class BdSpinner extends LitElement {
   static styles = [spinnerCSS];
 
   static properties = {
-    size   : { type: String, reflect: true },
-    label  : { type: String },
+    size     : { type: String, reflect: true },
+    label    : { type: String },
     /* The surface the spinner sits on. Its default arc and track were both
        chosen against a white page, so on a filled panel it all but disappears.
        Same attribute, same meaning, as on bd-button. */
-    surface: { type: String, reflect: true }
+    surface  : { type: String, reflect: true },
+    _announce: { type: Boolean, state: true }
   };
 
   constructor() {
@@ -21,6 +22,26 @@ export class BdSpinner extends LitElement {
     this.size = 'md';
     this.label = 'Loading';
     this.surface = 'light';
+    this._announce = false;
+  }
+
+  /* WHY THE TEXT ARRIVES LATE.
+     This was an empty role="status" named by aria-label. A live region is
+     announced when its CONTENT changes, and a name is not content, so it
+     never had anything to say: nothing announced the wait at all.
+
+     The label is now text inside the region. It is rendered empty first and
+     filled a moment later, because the region has to be in the accessibility
+     tree before its text arrives -- a region inserted already holding its
+     text is, to many screen readers, not a change. A later label change is
+     a content change too, so it is announced as well. */
+  firstUpdated() {
+    this._announceTimer = setTimeout(() => { this._announce = true; }, 100);
+  }
+
+  disconnectedCallback() {
+    clearTimeout(this._announceTimer);
+    super.disconnectedCallback();
   }
 
   willUpdate(changed) {
@@ -30,7 +51,8 @@ export class BdSpinner extends LitElement {
 
   render() {
     return html`
-      <span class="spinner" role="status" aria-label=${this.label}></span>
+      <span class="spinner" aria-hidden="true"></span>
+      <span class="announce" role="status">${this._announce ? this.label : ''}</span>
     `;
   }
 }