@repobit/dex-system-design 0.25.12 → 0.26.0

package/src/components/list/list.css.js

@@ -32,16 +32,22 @@ export default css`
 
   .bd-list[type="ordered"].vertical ::slotted(li)::before {
     content: counter(bd-ordered-counter) ". ";
+      /* no role: the ordered-list number -- a glyph/marker/placeholder box, not running
+         prose. See list-item.css.js's .bd-list-item-marker::before for the
+         argument. */
     font-weight: var(--typography-fontWeight-semibold);
-    color: var(--color-neutral-600);
+    color: var(--color-text-muted);
     margin-right: var(--spacing-8);
   }
 
   /* Unordered list markers for vertical */
   .bd-list[type="unordered"].vertical ::slotted(li)::before {
     content: "•";
+      /* no role: the unordered-list bullet -- a glyph/marker/placeholder box, not running
+         prose. See list-item.css.js's .bd-list-item-marker::before for the
+         argument. */
     font-weight: var(--typography-fontWeight-semibold);
-    color: var(--color-neutral-600);
+    color: var(--color-text-muted);
     margin-right: var(--spacing-8);
   }
 

package/src/components/list/list.js

@@ -1,5 +1,6 @@
 import { LitElement, html } from "lit";
-import { tokens } from "../../tokens/tokens.js";
+// Installs the design tokens into document scope; see src/tokens/tokens.js
+import "../../tokens/tokens.js";
 import listCSS from "./list.css.js";
 
 export class BdList extends LitElement {
@@ -38,7 +39,7 @@ export class BdList extends LitElement {
     `;
   }
 
-  static styles = [tokens, listCSS];
+  static styles = [listCSS];
 }
 
 customElements.define("bd-list", BdList);

package/src/components/list/list.stories.js

@@ -0,0 +1,222 @@
+import { html } from "lit";
+import "./list.js";
+import "./list-item/list-item.js";
+
+export default {
+  title     : "Atoms/List",
+  component : "bd-list",
+  tags      : ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+**\`bd-list\`** renders the real \`<ul>\` or \`<ol>\` and lays its items out. What
+it does **not** currently do is draw markers or apply its own outer spacing —
+three of its five properties are largely inert, and this story exists partly to
+make that visible. Every claim below was measured in the browser, not read off
+the stylesheet.
+
+### The \`type\` axis only chooses the tag
+
+\`type\` is reflected on the host, but every rule that depends on it targets the
+**inner** element — \`.bd-list[type="ordered"]\`. The inner \`<ol>\` carries
+\`class\` and \`start\` and no \`type\` attribute at all, so
+\`inner.matches('.bd-list[type="ordered"]')\` is **false** and none of those
+rules apply. Measured on the Ordered story: \`::before\` content is \`none\`,
+\`counter-increment\` is \`none\`, and all three items sit at the same left offset.
+Combined with \`list-style: none\` on the base rule, **no marker is drawn for
+either type.**
+
+The bullet and counter rules also reach through \`::slotted(li)::before\`, and a
+pseudo-element of slotted content is not stylable in browsers today — so they
+would still not paint even with the attribute fixed.
+
+### \`spacing\` and \`variant\` do not move the outer margin
+
+\`.bd-list.md\` sets \`margin: 16px 0\`, but two rules later in the same sheet —
+\`.bd-list:first-child { margin-top: 0 }\` and \`.bd-list:last-child
+{ margin-bottom: 0 }\` — carry the same specificity and win on order. The inner
+list is the **only** child of the shadow root, so it is always both, and the
+margin is always zero. Measured: \`0px\` top and bottom at every \`spacing\` and
+\`variant\` value.
+
+What is still live, measured: **\`variant\`** sets the gap between items in both
+orientations — the \`::slotted(li)\` bottom margin vertically (default 8, compact
+4, spacious 12) and \`gap\` horizontally. **\`spacing\`** is live *only* when
+horizontal, where it sets \`gap\` to 8/16/24; vertically it does nothing at all,
+because no rule ties it to the item margin and its own outer margin is
+cancelled.
+
+### So what is it good for
+
+The semantics and the layout, which are real: a genuine \`<ul>\`/\`<ol>\` for
+assistive technology, \`start\` on the \`<ol>\`, vertical or horizontal flow, and
+the gap between items. For a visible marker, fill it with \`<bd-li>\`, which
+draws its own — a bullet, a number, or the green tick — and is what
+\`bd-terms-section\` and \`bd-accordion-bg\` actually do.
+
+**Do not "fix" the bullets without checking the consumers first.** Every live
+consumer fills this element with \`<bd-li>\`, so making \`bd-list\` draw its own
+markers would give those pages two markers per row.
+        `
+      }
+    }
+  },
+  argTypes: {
+    type: {
+      control    : { type: "inline-radio" },
+      options    : ["unordered", "ordered"],
+      description: "Chooses the tag. Does NOT change the marker -- none is drawn."
+    },
+    spacing: {
+      control    : { type: "inline-radio" },
+      options    : ["sm", "md", "lg"],
+      description: "Intended as the outer margin (8/16/24) but cancelled by the "
+        + "first-child/last-child reset. Its only live effect is gap when horizontal; "
+        + "vertically it does nothing."
+    },
+    variant: {
+      control    : { type: "inline-radio" },
+      options    : ["default", "compact", "spacious"],
+      description: "Its outer margin is cancelled too; the per-item gap it sets is live."
+    },
+    orientation: {
+      control    : { type: "inline-radio" },
+      options    : ["vertical", "horizontal"],
+      description: "horizontal lays items in a row AND removes the markers."
+    },
+    start: {
+      control    : { type: "number" },
+      description: "First number of an ordered list."
+    }
+  },
+  args: { type: "unordered", spacing: "md", variant: "default", orientation: "vertical", start: 1 }
+};
+
+const ITEMS = [
+  "Real-time protection for every device on the plan",
+  "A VPN with no traffic limit",
+  "Password manager across desktop and mobile"
+];
+
+export const Default = {
+  render: ({ type, spacing, variant, orientation, start }) => html`
+    <bd-list
+      type=${type}
+      spacing=${spacing}
+      variant=${variant}
+      orientation=${orientation}
+      start=${start}
+    >
+      ${ITEMS.map(t => html`<li>${t}</li>`)}
+    </bd-list>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "Plain `<li>` children. Note there is no bullet: the rule that would "
+          + "draw one is gated on an attribute the inner element does not carry, and "
+          + "`list-style` is none — see the component notes above. Every axis is on the "
+          + "controls, so you can confirm that changing `spacing` or `variant` moves "
+          + "nothing on the outside of the list."
+      }
+    }
+  }
+};
+
+export const Ordered = {
+  args  : { type: "ordered" },
+  render: ({ type, spacing, variant, orientation, start }) => html`
+    <bd-list
+      type=${type}
+      spacing=${spacing}
+      variant=${variant}
+      orientation=${orientation}
+      start=${start}
+    >
+      ${ITEMS.map(t => html`<li>${t}</li>`)}
+    </bd-list>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "A real `<ol>` — the tag and `start` are correct and reach assistive "
+          + "technology. The numbers are NOT drawn, for the reason in the component "
+          + "notes: the counter rules never match. Measured here, `counter-increment` "
+          + "is none on every item."
+      }
+    }
+  }
+};
+
+export const WithListItemAtoms = {
+  name  : "Filled with bd-li",
+  render: () => html`
+    <bd-list type="unordered" spacing="md">
+      <bd-li variant="check" size="md">Included in this plan</bd-li>
+      <bd-li variant="check" size="md">Also included</bd-li>
+      <bd-li variant="none" size="md">Not part of this tier</bd-li>
+    </bd-list>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "The `<bd-li>` form, and the only one that shows a marker at all. "
+          + "Each item draws its own, so you get the `variant` markers including the "
+          + "green tick. This is what `bd-terms-section` and `bd-accordion-bg` use."
+      }
+    }
+  }
+};
+
+export const Horizontal = {
+  args  : { orientation: "horizontal" },
+  render: ({ spacing, variant }) => html`
+    <bd-list type="unordered" orientation="horizontal" spacing=${spacing} variant=${variant}>
+      <li>Windows</li>
+      <li>macOS</li>
+      <li>Android</li>
+      <li>iOS</li>
+    </bd-list>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "A row, with the markers removed on purpose — bullets in a horizontal "
+          + "run read as separators rather than markers. `spacing` becomes the gap here "
+          + "instead of a margin."
+      }
+    }
+  }
+};
+
+export const SpacingAndVariant = {
+  name  : "spacing vs variant",
+  render: () => html`
+    <div style="display:grid;gap:var(--spacing-32);font-family:var(--typography-fontFamily-sans)">
+      ${[
+        ["spacing=sm", { spacing: "sm", variant: "default" }],
+        ["spacing=lg", { spacing: "lg", variant: "default" }],
+        ["variant=compact", { spacing: "md", variant: "compact" }],
+        ["variant=spacious", { spacing: "md", variant: "spacious" }]
+      ].map(([label, a]) => html`
+        <div>
+          <div style="font-size:var(--typography-fontSize-sm);color:var(--color-text-muted)">${label}</div>
+          <bd-list type="unordered" spacing=${a.spacing} variant=${a.variant}>
+            ${ITEMS.slice(0, 2).map(t => html`<li>${t}</li>`)}
+          </bd-list>
+        </div>
+      `)}
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "The two spacing axes side by side — and the point of the story is "
+          + "that the four look almost identical. The outer margins they set are "
+          + "cancelled by the first-child/last-child reset; what little separates them "
+          + "is the per-item bottom margin that `variant` still controls."
+      }
+    }
+  }
+};

package/src/components/modal/modal.css.js

@@ -1,26 +1,37 @@
-import { css } from "lit";
+import { css, unsafeCSS } from "lit";
+import { below } from "../shared/token-scales.js";
 
 export default css`
-  :host {
-    --bd-blue-color: var(--color-blue-500);
-    --bd-accesibility-focus: var(--color-blue-800);
-  }
-
   .bd-modal {
     position: fixed;
     top: var(--spacing-0);
     left: var(--spacing-0);
     width: 100%;
     height: 100%;
-    background: rgba(0, 0, 0, 0.5);
+    /* The scrim. Expressed as a mix over the palette rather than a raw rgba,
+       which is the house pattern -- --color-border-container-inverse and
+       spinner's two private aliases are written the same way. A raw
+       rgba(0,0,0,0.5) is a black no theme can reach; this one follows
+       --color-neutral-1000. Verified pixel-identical to the rgba it replaces.
+       .
+       no role: a page scrim has no role, and with one consumer it should not
+       have one yet. If a second component ever needs to darken the page behind
+       itself, that is the point to name it. */
+    background: color-mix(in srgb, var(--color-neutral-1000) 50%, transparent);
     display: flex;
     justify-content: center;
     align-items: center;
-    z-index: 9999;
+    z-index: var(--z-modal);
     backdrop-filter: blur(var(--spacing-12));
     opacity: 0;
     transform: scale(0.9);
-    transition: opacity 0.3s ease, transform 0.3s ease;
+    transition: opacity var(--transition-duration-slow) var(--transition-easing-ease), transform var(--transition-duration-slow) var(--transition-easing-ease);
+    /* The counterpart of the pointer-events: auto in the [open] rule below,
+       which was written without it. A closed modal is still a full-viewport
+       fixed layer at this z-index, so without this it sits invisibly over the
+       whole page and swallows every click: elementsFromPoint at the centre of
+       the viewport returned [BD-MODAL, HTML] with the modal closed. */
+    pointer-events: none;
   }
 
  :host([open]) .bd-modal {
@@ -29,38 +40,117 @@ export default css`
   pointer-events: auto;
 }
 
+  /* max-height and overflow, because without them the bottom of a tall dialog
+     is simply gone. Measured on Components/Modal "Long Modal Text": the panel
+     is 506px tall at every viewport height, so at 500px and at 360px its
+     bottom edge -- and the Close button on it -- sat past the viewport with
+     nothing scrollable anywhere. The panel could not scroll (overflow
+     visible, no max-height) and neither could the page (the scrim is
+     position: fixed at 100% height, so the document never grows), which left
+     the only control in the dialog unreachable by any means.
+
+     --spacing-128 rather than --spacing-64, and the arithmetic is the reason.
+     This box is content-box, so the cap applies to the content and the 2em
+     padding is added outside it: subtracting 64 produced a panel of exactly
+     the viewport height at every constrained height -- 436 + 64 = 500 at a
+     500px viewport, 296 + 64 = 360 at 360 -- with no scrim band at all.
+     128 is that 64 of padding plus the 64 of scrim the band wants, which
+     lands the panel 32px from the top and bottom edges.
+
+     box-sizing: border-box would express the same thing more directly and is
+     deliberately not used here: it also makes max-width mean the border box,
+     which took the panel from 564px wide to 500 and rewrapped its text a line
+     taller. That is a visible change to an axis this fix has no business
+     touching, so the arithmetic goes in the calc instead. */
   .bd-modal-content {
-    background: #fff;
+    /* --color-surface-default, the role, not --color-neutral-0, the primitive
+       it resolves to. Same value; the category is the point, and CLAUDE.md's
+       "same primitive value is not same semantic meaning" section exists for
+       exactly this. Found by check:color-coverage once the background shorthand came into
+       its scope -- it had been invisible because the check counted
+       background-color: and this package almost never writes that. */
+    background: var(--color-surface-default);
     padding: 2em;
-    border-radius: var(--spacing-12);
+    border-radius: var(--radius-xl);
     max-width: 500px;
+    max-height: calc(100vh - var(--spacing-128));
+    overflow-y: auto;
     text-align: start;
-    box-shadow: var(--spacing-0) var(--spacing-2) var(--spacing-8) rgba(0, 0, 0, 0.2);
-    font-family: var(--typography-fontFamily-sans);
-  }
+    /* --shadow-md, the role this package already uses for a floating overlay
+       surface: bd-tooltip's bubble and bd-anchor-nav's dropdown panel both name
+       it, and this panel is the third of the same kind.
+
+       The shadow was built out of --spacing-0/2/8, which is a spacing scale
+       doing a depth role's job -- and spacing is rem, so it grew with the
+       reader. Measured at a 24px root: this panel's shadow went from
+       0 2px 8px to 0 3px 12px while the tooltip's --shadow-md held exactly
+       still. A drop shadow is a fixed optical depth, not a distance that
+       should scale with text.
 
-  .bd-modal-content h2 {
-    margin: var(--spacing-0) var(--spacing-0) 1em var(--spacing-0);
+       Visible, and intended: the shadow becomes the two-layer --shadow-md
+       rather than a single 8px blur at 0.2 alpha. The panel's separation from
+       the page is carried by the scrim above it -- 0.5 alpha and a 12px
+       backdrop blur -- so the shadow is doing detail work here, not the
+       heavy lifting. */
+    box-shadow: var(--shadow-md);
     font-family: var(--typography-fontFamily-sans);
   }
 
+  /* The title's spacing is set through bd-h's own paddingBottom prop, in
+     modal.js. A ".bd-modal-content h2" rule stood here and could never match:
+     the h2 is inside bd-h's shadow root, so a descendant selector from this
+     stylesheet does not reach it. The declared 1em resolved to 0 in all 80
+     measured story x viewport combinations, which is why the title sat flush
+     on its description. */
+  /* This is a <button> the component renders itself rather than a slotted
+     bd-button, and that is not going to change here: the element owns the
+     close behaviour and there is nothing for a page to pass in. What it can
+     stop doing is disagreeing with the atom about the shape of a button.
+
+     Measured against Atoms/Button, variant=primary size=md: the fill is the
+     same step, and every other axis was different. The padding was em
+     literals -- 0.5em/1em -- which is the spacing scale spelled in a unit that
+     is not on it, and the radius was --radius-lg against the atom's
+     --radius-sm, so the same fill came out with 8px corners here and 4px two
+     components over. The margin-top was a third em literal.
+
+     The values now match the atom's md size (8/16 at --radius-sm) and are
+     spelled with the tokens it uses. Visible: corners tighten from 8px to
+     4px. */
   .bd-modal-content button {
-    margin-top: 1em;
-    padding: 0.5em 1em;
-    background: var(--bd-blue-color);
-    color: #fff;
+    margin-top: var(--spacing-16);
+    padding: var(--spacing-8) var(--spacing-16);
+    background: var(--color-surface-brand);
+    color: var(--color-text-inverse);
     border: none;
-    border-radius: var(--spacing-8);
+    border-radius: var(--radius-sm);
     cursor: pointer;
     font-family: var(--typography-fontFamily-sans);
   }
 
   .bd-modal-content button:focus-visible {
-    outline: var(--spacing-2) solid var(--bd-accesibility-focus);
-    outline-offset: var(--spacing-2);
+    /* the one focus ring — see Foundations/Focus */
+    outline: none;
+    box-shadow: var(--focus-outline-primary);
+  }
+
+  /* The scrim scales and fades in. Measured before this: with
+     prefers-reduced-motion: reduce the transition still reported
+     0.3s on opacity and transform, so a reader who asked for less motion got
+     the panel zooming in anyway. Every other animated component in this
+     package honours the query -- see the tooltip two files over. */
+  @media (prefers-reduced-motion: reduce) {
+    .bd-modal {
+      transition: none;
+      transform: none;
+    }
+
+    :host([open]) .bd-modal {
+      transform: none;
+    }
   }
 
-  @media (max-width: 768px) {
+  @media ${unsafeCSS(below('md'))} {
     .bd-modal-content {
       max-width: 90%;
       padding: 1.5em;

package/src/components/modal/modal.js

@@ -1,9 +1,35 @@
 import { LitElement, html } from "lit";
-import { tokens } from "../../tokens/tokens.js";
+// Installs the design tokens into document scope; see src/tokens/tokens.js
+import "../../tokens/tokens.js";
 import "../heading/heading.js";
-import modalCSS from "../modal/modal.css";
+import modalCSS from "../modal/modal.css.js";
 import "../paragraph/paragraph.js";
 
+/**
+ * A dialog surface: a scrim, a centred panel, a title, a description and a
+ * close control. The consuming page owns `open` and reacts to close-modal.
+ *
+ * `role="dialog"` is on the panel, and it is what makes the two labels this
+ * element has always declared mean anything. Measured before it: the full
+ * accessibility tree for an open modal was RootWebArea, image, heading,
+ * paragraph, button -- no dialog node at any level, so `aria-labelledby` and
+ * `aria-describedby` pointed at real targets from an element with no role to
+ * name. With the role, the dialog is exposed and named "VPN Protection" from
+ * the bd-h it already pointed at; the name resolves across bd-h's shadow
+ * boundary because the title is slotted light-DOM text.
+ *
+ * `aria-modal="true"` is deliberately NOT set. It is a claim that the rest of
+ * the page is unavailable, and it is not: measured with a real keyboard, one
+ * Tab reaches the close button and the next leaves the dialog entirely, with
+ * seven focusable elements still reachable outside it. Setting the attribute
+ * without focus containment would tell a screen reader something untrue.
+ * Making it true is a dialog rework -- containment, an opener to restore focus
+ * to, and a scroll lock -- and that is a decision with more than one valid
+ * shape, so P6C.4 reports it rather than picking one.
+ *
+ * The icon is `alt=""`. It was `alt="icon"`, which a screen reader announced
+ * as the word "icon" beside a title that already says what the dialog is.
+ */
 export class BdModal extends LitElement {
   static properties = {
     open     : { type: Boolean, reflect: true },
@@ -16,20 +42,70 @@ export class BdModal extends LitElement {
     this.dispatchEvent(new CustomEvent("close-modal", { bubbles: true, composed: true }));
   }
 
+  /**
+   * Escape closes through the same channel as the backdrop click: this element
+   * does not own `open`, the consuming page does, so both gestures dispatch
+   * close-modal and let the page decide. The channel already existed and
+   * Escape was the one way in that was missing -- measured, Escape on an open
+   * modal left open true and did nothing at all.
+   *
+   * On the document, guarded on `open`, because focus is normally NOT inside
+   * this dialog: nothing moves it there when the dialog opens, so a listener
+   * on the host would only fire after the user had already Tabbed in. Measured
+   * with the host-scoped version first -- Escape with focus on body left open
+   * true, which is every real case. The guard means a closed modal listens for
+   * nothing, and propagation is left alone so a page that wants to react to
+   * the same Escape still can.
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this._onKeydown = e => {
+      if (e.key !== "Escape" || !this.open) return;
+      this._onClose();
+    };
+    document.addEventListener("keydown", this._onKeydown);
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener("keydown", this._onKeydown);
+    super.disconnectedCallback();
+  }
+
+  /**
+   * Closing makes the dialog inert, which stops anything inside being reached
+   * — but focus that was ALREADY inside stays there, on a subtree the user can
+   * no longer see or operate. Measured: after close, document.activeElement was
+   * still BD-MODAL with the close button active inside it.
+   *
+   * This releases that focus. It is deliberately not focus *restoration*:
+   * returning focus to whatever opened the dialog needs the opener recorded,
+   * which is part of the dialog rework this fix is scoped out of.
+   */
+  updated(changed) {
+    if (!changed.has("open") || this.open) return;
+    if (this.renderRoot?.activeElement) this.renderRoot.activeElement.blur();
+  }
+
   render() {
     return html`
-      <div class="bd-modal" @click="${this._onClose}" aria-hidden="${!this.open}">
+      <div
+        class="bd-modal"
+        @click="${this._onClose}"
+        aria-hidden="${!this.open}"
+        ?inert="${!this.open}"
+      >
         <div
           class="bd-modal-content"
           @click="${(e) => e.stopPropagation()}"
+          role="dialog"
           aria-labelledby="modal-title"
           aria-describedby="modal-description"
         >
           ${this.icon
-            ? html`<img src="${this.icon}" alt="icon" class="bd-carousel-modal-icon" />`
+            ? html`<img src="${this.icon}" alt="" class="bd-carousel-modal-icon" />`
             : ""}
-          <bd-h as="h2" id="modal-title">${this.title}</bd-h>
-          <bd-p kind="regular" id="modal-description">${this.modalText}</bd-p>
+          <bd-h as="h2" id="modal-title" paddingBottom="16">${this.title}</bd-h>
+          <bd-p variant="regular" id="modal-description">${this.modalText}</bd-p>
           <button @click="${this._onClose}" aria-label="Close modal">Close</button>
         </div>
       </div>
@@ -37,6 +113,6 @@ export class BdModal extends LitElement {
   }
 }
 
-BdModal.styles = [tokens, modalCSS];
+BdModal.styles = [modalCSS];
 
 customElements.define("bd-modal", BdModal);

package/src/components/modal/modal.stories.js

@@ -15,7 +15,7 @@ export default {
 <bd-modal
   .open="${true}"
   title="VPN Protection"
-  icon="/assets/vpn.svg"
+  icon="/icons/privacy_protection.png"
   modalText="Our VPN encrypts your connection."
   @close-modal="${() => {}}"
 ></bd-modal>
@@ -50,7 +50,7 @@ export default {
     },
     modalText: {
       control    : 'text',
-      description: 'Modal body text rendered as `<bd-p kind="regular">`',
+      description: 'Modal body text rendered as `<bd-p variant="regular">`',
       table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'Content' }
     },
     icon: {
@@ -65,7 +65,7 @@ const defaultArgs = {
   open     : true,
   title    : 'VPN Protection',
   modalText: 'Our VPN encrypts your internet traffic and hides your IP address, keeping you safe on public networks.',
-  icon     : '/assets/vpn.svg'
+  icon     : '/icons/privacy_protection.png'
 };
 
 const render = (args) => html`
@@ -86,7 +86,7 @@ export const Default = {
       .open="${true}"
       title="VPN Protection"
       modalText="Our VPN encrypts your internet traffic and hides your IP address, keeping you safe on public Wi-Fi networks and preventing tracking."
-      icon="/assets/vpn.svg"
+      icon="/icons/privacy_protection.png"
     ></bd-modal>
   `,
   parameters: { docs: { description: { story: 'Modal rendered in the open state with icon, title, and body text.' } } }
@@ -100,7 +100,7 @@ export const Closed = {
       .open="${false}"
       title="VPN Protection"
       modalText="This modal is closed."
-      icon="/assets/vpn.svg"
+      icon="/icons/privacy_protection.png"
     ></bd-modal>
   `,
   parameters: { docs: { description: { story: 'Modal with `open=false` — renders in the DOM with `aria-hidden="true"`. Visibility depends on CSS handling of the open state.' } } }
@@ -124,7 +124,7 @@ export const LongText = {
     <bd-modal
       .open="${true}"
       title="Behavioral Analysis"
-      icon="/assets/analysis.svg"
+      icon="/icons/device_protection.png"
       modalText="Bitdefender's behavioral detection technology monitors active applications in real time for suspicious activity. Unlike traditional signature-based detection, behavioral analysis can identify zero-day threats and novel malware variants by observing what a program does, not just what it looks like. When suspicious behavior is detected — such as a process attempting to encrypt files, modify system registries, or communicate with known malicious servers — Bitdefender immediately quarantines the threat before damage can occur."
     ></bd-modal>
   `,
@@ -135,9 +135,9 @@ export const DifferentTitles = {
   name  : 'Various Content Types',
   render: () => html`
     <div style="display:flex; flex-direction:column; gap:32px;">
-      <bd-modal .open="${true}" title="VPN Protection" icon="/assets/vpn.svg" modalText="Unlimited encrypted VPN traffic across 200+ servers."></bd-modal>
+      <bd-modal .open="${true}" title="VPN Protection" icon="/icons/privacy_protection.png" modalText="Unlimited encrypted VPN traffic across 200+ servers."></bd-modal>
       <bd-modal .open="${true}" title="Password Manager" modalText="Store and autofill passwords securely across all your devices."></bd-modal>
-      <bd-modal .open="${true}" title="Parental Controls" icon="/assets/parental.svg" modalText="Monitor your children's online activity and set screen time limits."></bd-modal>
+      <bd-modal .open="${true}" title="Parental Controls" icon="/icons/bd-icon-family.png" modalText="Monitor your children's online activity and set screen time limits."></bd-modal>
     </div>
   `,
   parameters: { docs: { description: { story: 'Three modals stacked for visual comparison of different content configurations.' } } }
@@ -169,7 +169,7 @@ export const MobileView = {
       .open="${true}"
       title="VPN Protection"
       modalText="Unlimited encrypted VPN traffic and IP masking."
-      icon="/assets/vpn.svg"
+      icon="/icons/privacy_protection.png"
     ></bd-modal>
   `,
   parameters: {