@repobit/dex-system-design 1.0.1 → 2.0.1

package/src/components/pagination-dots/pagination-dots.stories.js

@@ -0,0 +1,171 @@
+import { html } from 'lit';
+import './pagination-dots.js';
+
+export default {
+  title     : 'Atoms/Pagination Dots',
+  tags      : ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+\`<bd-pagination-dots>\` is the package's one set of slide dots: which slide
+is showing, and a way to go to another. \`bd-awards-flex\` and
+\`bd-carousel-section\` both use it.
+
+\`\`\`html
+<bd-pagination-dots count="5" current="1"></bd-pagination-dots>
+<bd-pagination-dots count="5" current="1" autoplay delay="4000"></bd-pagination-dots>
+\`\`\`
+
+The carousel that owns the slides stays their owner. It sets \`current\`, and
+listens for \`bd-change\`, whose \`detail.current\` is the slide to show --
+picked by a dot or by the autoplay clock.
+
+- **A group of buttons**, the current one marked \`aria-current\`. Not a
+  tablist: a tab needs a panel it controls, and this atom does not own the
+  panels.
+- **Two names, both attributes.** \`label\` names the group (default
+  "Slides") and \`item-label\` starts each button's name (default "Go to
+  slide", so "Go to slide 2"). A page in another language sets both.
+- **Every dot is a 24px target.** The dot is drawn inside it, so the dots sit
+  16px apart rather than the design's 8. At 8 they would fail WCAG 2.5.8.
+- **The current dot is a 40px pill** in the indicator colour, the same
+  colour as every other current-item mark in the package. The design draws it
+  neutral-900; that would make it the only current mark that is not the
+  indicator.
+- **A resting dot is neutral-500**, the lightest step that clears 3:1 on
+  every light ground it can sit on. The design's faint grey measures 1.94:1.
+- **\`autoplay\` puts the clock in the pill.**- **\`autoplay\` puts the clock in the pill.** The atom advances itself every
+  \`delay\` ms, wrapping after the last slide. The current pill is the
+  progress: a white track inside an indicator-colour edge, which the
+  indicator fills as the time runs, so the fill and the change of slide are
+  one event and cannot drift apart. Without autoplay the pill is filled whole.
+- **The dots are how it stops** (WCAG 2.2.2). Picking one stops autoplay for
+  good and sets \`paused\`. The clock also holds while the pointer or focus is
+  on the dots, or while the owner sets \`held\` -- the carousel does that for
+  its own slides. Under \`prefers-reduced-motion\` it never starts.
+- **\`bd-toggle\`** fires when the slides start or stop moving, with
+  \`detail.paused\` and \`detail.moving\`. An owner uses it for its live
+  region: off while slides change by themselves, polite once they are still.
+- **\`count\` below 2 renders nothing.** One page has nowhere to go.
+        `
+      }
+    }
+  },
+  argTypes: {
+    count: {
+      control    : { type: 'number', min: 0, max: 12, step: 1 },
+      description: 'How many dots. Below 2 nothing renders.',
+      table      : { type: { summary: 'number' }, defaultValue: { summary: '0' } }
+    },
+    current: {
+      control    : { type: 'number', min: 1, max: 12, step: 1 },
+      description: 'Which dot is current, 1-based. Held between 1 and `count`.',
+      table      : { type: { summary: 'number' }, defaultValue: { summary: '1' } }
+    },
+    label: {
+      control    : 'text',
+      description: 'The group\'s accessible name: what the dots move through.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: 'Slides' } }
+    },
+    itemLabel: {
+      control    : 'text',
+      description: 'Starts each button\'s accessible name; the dot\'s number follows it.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: 'Go to slide' } }
+    },
+    autoplay: {
+      control    : 'boolean',
+      description: 'Advance every `delay` ms, with the progress in the current pill. Picking a dot stops it.',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' } }
+    },
+    delay: {
+      control    : { type: 'number', min: 1000, step: 500 },
+      description: 'Milliseconds per slide under autoplay. Held at 1000 or more.',
+      table      : { type: { summary: 'number' }, defaultValue: { summary: '4000' } }
+    },
+    paused: {
+      control    : 'boolean',
+      description: 'Autoplay stopped for good. Set when the visitor picks a dot.',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' } }
+    }
+  }
+};
+
+const caption = text => html`
+  <p style="margin:var(--spacing-24) 0 var(--spacing-8);font:var(--typography-fontSize-xs)/1.4 var(--typography-fontFamily-sans);color:var(--color-text-muted)">${text}</p>
+`;
+
+export const Default = {
+  name  : 'Default — as the homepage uses it',
+  render: () => html`
+    <div style="background:var(--color-surface-info);padding:var(--spacing-32);border-radius:var(--radius-3xl);display:flex;justify-content:center;">
+      <bd-pagination-dots count="5" current="1" label="Awards"></bd-pagination-dots>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'Five slides on the awards carousel\'s info tint. Each dot is a 24px target; tab through them to see the ring follow the target, not the dot.' } } }
+};
+
+export const Counts = {
+  name  : 'Counts',
+  render: () => html`
+    ${[2, 3, 4, 5, 8].map(count => html`
+      ${caption(`count="${count}"`)}
+      <bd-pagination-dots count="${count}" current="2"></bd-pagination-dots>
+    `)}
+    ${caption('count="1" — renders nothing, because one page has nowhere to go')}
+    <bd-pagination-dots count="1"></bd-pagination-dots>
+  `,
+  parameters: { docs: { description: { story: 'The same atom at every count the homepage could need, current on the second dot.' } } }
+};
+
+export const OnGrounds = {
+  name  : 'On every light ground',
+  render: () => html`
+    ${[['page — surface/default', 'var(--color-surface-default)'], ['card — surface/container', 'var(--color-surface-container)'], ['band — surface/subtle', 'var(--color-surface-subtle)'], ['awards — surface/info', 'var(--color-surface-info)']].map(([label, bg]) => html`
+      ${caption(label)}
+      <div style="background:${bg};padding:var(--spacing-16) var(--spacing-24);border-radius:var(--radius-md);display:inline-flex;">
+        <bd-pagination-dots count="5" current="3"></bd-pagination-dots>
+      </div>
+    `)}
+  `,
+  parameters: { docs: { description: { story: 'The resting dot clears 3:1 on all four (WCAG 1.4.11), at 4.29:1 or better; the current pill, the indicator role, at 4.05:1 or better.' } } }
+};
+
+export const Interactive = {
+  name  : 'Picking a dot',
+  render: () => html`
+    <bd-pagination-dots
+      count="5"
+      current="1"
+      @bd-change=${e => { e.currentTarget.nextElementSibling.textContent = `bd-change — detail.current is ${e.detail.current}`; }}
+    ></bd-pagination-dots>
+    <p style="margin:var(--spacing-12) 0 0;font:var(--typography-fontSize-sm)/1.5 var(--typography-fontFamily-sans);color:var(--color-text-secondary)" aria-live="polite">Pick a dot.</p>
+  `,
+  parameters: { docs: { description: { story: 'The atom moves its own current dot and fires `bd-change`. Picking the current dot does nothing and fires nothing.' } } }
+};
+
+export const Autoplay = {
+  name  : 'Autoplay — the pill is the clock',
+  render: () => html`
+    <div style="background:var(--color-surface-info);padding:var(--spacing-32);border-radius:var(--radius-3xl);display:flex;justify-content:center;">
+      <bd-pagination-dots count="3" current="1" label="Awards" autoplay delay="4000"></bd-pagination-dots>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'As bd-awards-flex uses it. The current pill fills over four seconds and the slide changes when it is full. Point at the dots or tab into them and the fill holds where it is; pick one and autoplay stops for good.' } } }
+};
+
+export const Playground = {
+  name  : '🛝 Playground',
+  args  : { count: 5, current: 1, label: 'Slides', itemLabel: 'Go to slide', autoplay: false, delay: 4000, paused: false },
+  render: args => html`
+    <bd-pagination-dots
+      count="${args.count}"
+      current="${args.current}"
+      label="${args.label}"
+      item-label="${args.itemLabel}"
+      ?autoplay=${args.autoplay}
+      delay="${args.delay}"
+      ?paused=${args.paused}
+    ></bd-pagination-dots>
+  `
+};

package/src/components/paragraph/paragraph.css.js

@@ -1,4 +1,5 @@
-import { css } from "lit";
+import { css, unsafeCSS } from "lit";
+import { below } from "../shared/token-scales.js";
 
 export default css`
   /* --color-text-primary, not --color-neutral-1000. Body copy was set in pure
@@ -52,4 +53,39 @@ export default css`
     line-height: var(--typography-body-lead-lineHeight);
     letter-spacing: var(--typography-body-lead-letterSpacing);
   }
+
+  /* The eyebrow: a short label above a section title. It takes the
+     label-large role -- the role whose job is a short label rather than
+     running text -- which is 16px at 1.5 like body-regular and Medium 500
+     where body-regular is 400. Brand ink is part of the pattern: all five
+     eyebrows in the package and every one on the homepage are text-brand.
+     A color attribute still wins, for an eyebrow on a dark band. */
+  :host([variant="eyebrow"]) p {
+    font-size: var(--typography-label-large-fontSize);
+    font-weight: var(--typography-label-large-fontWeight);
+    line-height: var(--typography-label-large-lineHeight);
+    letter-spacing: var(--typography-label-large-letterSpacing);
+    font-family: var(--typography-label-large-fontFamily);
+    color: var(--color-text-brand);
+  }
+
+  /* Below lg the eyebrow steps down to label-default: 14px, the same Medium
+     500 at 1.5. The homepage draws it 14 on the 390 and 768 frames and 16 on
+     desktop, so the step sits at lg, which is also where every fluid role in
+     the system stops growing. A step between two declared roles rather than a
+     fluid size, because the label family has no fluid role, and one for a
+     single variant would be a new token where two existing roles already
+     answer both ends exactly. */
+  @media ${unsafeCSS(below("lg"))} {
+    :host([variant="eyebrow"]) p {
+      font-size: var(--typography-label-default-fontSize);
+      font-weight: var(--typography-label-default-fontWeight);
+      line-height: var(--typography-label-default-lineHeight);
+      letter-spacing: var(--typography-label-default-letterSpacing);
+    }
+  }
+
+
+  
+
 `;

package/src/components/paragraph/paragraph.js

@@ -6,8 +6,21 @@ import {
 } from "../shared/token-scales.js";
 import paragraphCSS from "./paragraph.css.js";
 
-/** The five body roles the stylesheet carries. */
-const VARIANTS = ["xsmall", "small", "regular", "large", "lead"];
+/**
+ * The five body roles the stylesheet carries, and the eyebrow.
+ *
+ * eyebrow is the short brand-ink label above a section title. It reads the
+ * label-large role -- 16px, Medium 500, 1.5 -- from lg up, and label-default
+ * (14px, the same weight and leading) below lg, rather than a role of its
+ * own, so it adds no token. It exists because five components drew the pattern
+ * and disagreed on weight: bento-grid and header-code at the body role's 400,
+ * trust-panel twice and agent-endpoints at a semibold 600 passed through
+ * font-weight, and the homepage design at 500. The phase-1 eyebrow
+ * investigation found no role was needed while every eyebrow resolved
+ * through body-regular; once three of them reached past it for a weight, one
+ * spelling became the thing that keeps them together.
+ */
+const VARIANTS = ["xsmall", "small", "regular", "large", "lead", "eyebrow"];
 
 export class BdP extends LitElement {
   static properties = {
@@ -21,6 +34,10 @@ export class BdP extends LitElement {
     fontWeight   : { type: String, attribute: "font-weight" },
     fontSize     : { type: String, attribute: "font-size" },
     letterSpacing: { type: String, attribute: "letter-spacing" },
+    /* A semantic role, the same closed set bd-h and bd-display take. Without
+       it a paragraph's ink could only come from the composing component's
+       CSS, so a page could not say an eyebrow is brand-blue or a lead on a
+       brand band is white. */
     color        : { type: String }
   };
 

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);
   }