@repobit/dex-system-design 0.25.12 → 1.0.0

package/src/components/cards/card.js

@@ -1,31 +1,34 @@
 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 "../button/button.js";
 import "../heading/heading.js";
 import carouselCSS from "./card.css.js";
+import { ensembleCSS } from "../shared/ensemble.css.js";
+import { matchesBelow } from "../shared/token-scales.js";
 
 class Card extends LitElement {
   static properties = {
-    title     : { type: String },
-    subtitle  : { type: String },
-    bgBlue    : { type: Boolean, reflect: true, attribute: "bg-blue" },
+    title       : { type: String },
+    headingLevel: { type: Number, attribute: "heading-level" },
+    subtitle    : { type: String },
+    bgBlue      : { type: Boolean, reflect: true, attribute: "bg-blue" },
     // "" (default — existing grey-box carousel look) | "outline" — bordered,
-    // centered cards with a light-blue tint, blue title and centered icon,
-    // matching the reference design. Propagated automatically to every
-    // slotted bd-card-item (see _onSlotChange) so callers only set it once,
-    // on the section, unless a specific item needs to opt out by setting
-    // its own variant attribute explicitly.
-    variant   : { type: String, reflect: true },
+    // centered cards with a light-blue tint, blue title and centered icon.
+    // Propagated to every slotted bd-card-item (see _onSlotChange) unless an
+    // item sets its own variant attribute.
+    variant     : { type: String, reflect: true },
     // Opt-in: lays the cards out on a CSS grid and makes every card a subgrid,
     // so icon, title, each content row and CTA line up across cards (desktop
     // only). Replaces the JS height equalization for this section.
-    alignRows : { type: Boolean, reflect: true, attribute: "align-rows" },
-    _itemCount: { state: true }
+    alignRows   : { type: Boolean, reflect: true, attribute: "align-rows" },
+    _itemCount  : { state: true }
   };
 
   constructor() {
     super();
     this.title           = "";
+    this.headingLevel           = 2;
     this.subtitle        = "";
     this.bgBlue          = false;
     this.variant         = "";
@@ -128,7 +131,10 @@ class Card extends LitElement {
     if (!items.length) return;
 
 
-    if (window.innerWidth <= 768) {
+    /* matchesBelow, not innerWidth <= 768: at exactly 768 the old test was
+       true while this component's own CSS, which uses below('md'), had
+       already switched to the wide layout. The two disagreed on one pixel. */
+    if (matchesBelow('md')) {
       items.forEach(item => {
         const box      = item.renderRoot?.querySelector(".bd-light-box-s");
         const iconW    = item.renderRoot?.querySelector(".bd-light-box-header-s");
@@ -253,13 +259,25 @@ class Card extends LitElement {
     this._mutationObserver?.disconnect();
   }
 
+
+  /**
+   * Level is the document-outline question and belongs to page composition;
+   * the type scale is this component's and stays where it was. visual-level
+   * pins the look at h1 so only the semantics move. Defaults to h2, because a
+   * reusable section cannot know it is the page's only heading.
+   */
+  get _headingTag() {
+    const n = Number(this.headingLevel);
+    return Number.isInteger(n) && n >= 1 && n <= 6 ? `h${n}` : "h2";
+  }
+
   render() {
     return html`
-      <section class="bd-light-carousel-s">
+      <section class="bd-ensemble bd-light-carousel-s">
         ${this.title
           ? html`
               <div class="bd-header-light-carousel-s">
-                <bd-h as="h1" class="bd-section-title-s">${this.title}</bd-h>
+                <bd-h as="${this._headingTag}" visual-level="h1" class="bd-section-title-s">${this.title}</bd-h>
                 ${this.subtitle
                   ? html`<p class="bd-section-subtitle-s">${this.subtitle}</p>`
                   : ""}
@@ -278,15 +296,16 @@ class Card extends LitElement {
 
 class CardItem extends LitElement {
   static properties = {
-    title   : { type: String },
-    subtitle: { type: String },
-    icon    : { type: String },
-    align   : { type: String },
-    bgBlue  : { type: Boolean, reflect: true, attribute: "bg-blue" },
-    ctaAlign: { type: String, attribute: "cta-align" },
+    title       : { type: String },
+    subtitle    : { type: String },
+    icon        : { type: String },
+    align       : { type: String },
+    bgBlue      : { type: Boolean, reflect: true, attribute: "bg-blue" },
+    ctaAlign    : { type: String, attribute: "cta-align" },
+    headingLevel: { type: Number, attribute: "heading-level" },
     // "" (default) | "outline" — see Card.variant above. Reflected so
     // card.css.js can target it with :host([variant="outline"]).
-    variant : { type: String, reflect: true }
+    variant     : { type: String, reflect: true }
   };
 
   constructor() {
@@ -299,6 +318,7 @@ class CardItem extends LitElement {
     this._authorSetVariant = this.hasAttribute("variant");
 
     this.title    = "";
+    this.headingLevel = 3;
     this.subtitle = "";
     this.icon     = "";
     this.align    = "start";
@@ -373,6 +393,17 @@ class CardItem extends LitElement {
     return this._contentNodes().length > 0;
   }
 
+
+  /**
+   * One level below the section default. The h5 it used to carry was a type
+   * choice, not an outline one, so the size stays on visual-level while the
+   * level itself stops skipping three steps below its own section.
+   */
+  get _headingTag() {
+    const n = Number(this.headingLevel);
+    return Number.isInteger(n) && n >= 1 && n <= 6 ? `h${n}` : "h3";
+  }
+
   render() {
     const isOutline  = this.variant === "outline";
     const isCentered = this.align === "center" || isOutline;
@@ -400,7 +431,7 @@ class CardItem extends LitElement {
           ? html`
               <div class="bd-light-title-badge-wrapper-s ${!hasContent ? "bd-light-title-no-content" : ""}">
                 <div class="bd-card-title-group">
-                  <bd-h as="h5" fontWeight="700">${this.title}</bd-h>
+                  <bd-h as="${this._headingTag}" visual-level="h5" fontWeight="bold">${this.title}</bd-h>
                   ${this.subtitle
                     ? html`<p class="bd-card-item-subtitle">${this.subtitle}</p>`
                     : ""}
@@ -430,8 +461,8 @@ class CardItem extends LitElement {
   }
 }
 
-Card.styles    = [tokens, carouselCSS];
-CardItem.styles = [tokens, carouselCSS];
+Card.styles    = [ensembleCSS, carouselCSS];
+CardItem.styles = [carouselCSS];
 
 customElements.define("bd-card-item", CardItem);
 customElements.define("bd-card-section", Card);

package/src/components/cards/card.stories.js

@@ -50,16 +50,16 @@ left-aligned instead of centered.
 // ─── Shared data ──────────────────────────────────────────────────────────────
 
 const icons = [
-  html`<bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>`,
-  html`<bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>`,
-  html`<bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>`,
-  html`<bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>`,
-  html`<bd-family-icon slot="icon" width="32" height="32" color="#006DFF"></bd-family-icon>`,
-  html`<bd-arrow-up-icon slot="icon" width="32" height="32" color="#006DFF"></bd-arrow-up-icon>`,
-  html`<bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>`,
-  html`<bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>`,
-  html`<bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>`,
-  html`<bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>`
+  html`<bd-individual-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-individual-icon>`,
+  html`<bd-globe-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-globe-icon>`,
+  html`<bd-machine-learning-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-machine-learning-icon>`,
+  html`<bd-analysis-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-analysis-icon>`,
+  html`<bd-family-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-family-icon>`,
+  html`<bd-arrow-up-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-arrow-up-icon>`,
+  html`<bd-individual-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-individual-icon>`,
+  html`<bd-globe-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-globe-icon>`,
+  html`<bd-machine-learning-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-machine-learning-icon>`,
+  html`<bd-analysis-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-analysis-icon>`
 ];
 
 const titles = [
@@ -179,19 +179,19 @@ export const WithBlueBg = {
   render: () => html`
     <bd-card-section title="Why Bitdefender">
       <bd-card-item title="AI Protection" bg-blue>
-        <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
+        <bd-individual-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-individual-icon>
         <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
       </bd-card-item>
       <bd-card-item title="Multi-layer Security" bg-blue>
-        <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
+        <bd-globe-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-globe-icon>
         <bd-p>Multiple independent protection layers stop any attack.</bd-p>
       </bd-card-item>
       <bd-card-item title="VPN Included" bg-blue>
-        <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
+        <bd-machine-learning-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-machine-learning-icon>
         <bd-p>Unlimited encrypted VPN traffic for all your devices.</bd-p>
       </bd-card-item>
       <bd-card-item title="Parental Controls" bg-blue>
-        <bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>
+        <bd-analysis-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-analysis-icon>
         <bd-p>Advanced controls to protect your children online.</bd-p>
       </bd-card-item>
     </bd-card-section>
@@ -206,19 +206,19 @@ export const MixedBlueBg = {
   render: () => html`
     <bd-card-section title="Features">
       <bd-card-item title="AI Protection" bg-blue>
-        <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
+        <bd-individual-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-individual-icon>
         <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
       </bd-card-item>
       <bd-card-item title="Multi-layer Security">
-        <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
+        <bd-globe-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-globe-icon>
         <bd-p>Multiple independent protection layers stop any attack.</bd-p>
       </bd-card-item>
       <bd-card-item title="VPN Included" bg-blue>
-        <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
+        <bd-machine-learning-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-machine-learning-icon>
         <bd-p>Unlimited encrypted VPN traffic for all your devices.</bd-p>
       </bd-card-item>
       <bd-card-item title="Parental Controls">
-        <bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>
+        <bd-analysis-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-analysis-icon>
         <bd-p>Advanced controls to protect your children online.</bd-p>
       </bd-card-item>
     </bd-card-section>
@@ -233,24 +233,24 @@ export const WithCTA = {
   render: () => html`
     <bd-card-section title="Why Bitdefender">
       <bd-card-item title="AI Protection">
-        <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
+        <bd-individual-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-individual-icon>
         <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
-        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
+        <bd-button-link slot="cta" href="#" variant="primary" size="sm">Learn more</bd-button-link>
       </bd-card-item>
       <bd-card-item title="Multi-layer Security">
-        <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
+        <bd-globe-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-globe-icon>
         <bd-p>Multiple independent protection layers stop any attack.</bd-p>
-        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
+        <bd-button-link slot="cta" href="#" variant="primary" size="sm">Learn more</bd-button-link>
       </bd-card-item>
       <bd-card-item title="VPN Included">
-        <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
+        <bd-machine-learning-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-machine-learning-icon>
         <bd-p>Unlimited encrypted VPN traffic for all your devices.</bd-p>
-        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
+        <bd-button-link slot="cta" href="#" variant="primary" size="sm">Learn more</bd-button-link>
       </bd-card-item>
       <bd-card-item title="Parental Controls">
-        <bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>
+        <bd-analysis-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-analysis-icon>
         <bd-p>Advanced controls to protect your children online.</bd-p>
-        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
+        <bd-button-link slot="cta" href="#" variant="primary" size="sm">Learn more</bd-button-link>
       </bd-card-item>
     </bd-card-section>
   `,
@@ -339,16 +339,16 @@ export const NoSlottedContent = {
   render: () => html`
     <bd-card-section title="Features">
       <bd-card-item align="center" title="AI Protection">
-        <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
+        <bd-individual-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-individual-icon>
       </bd-card-item>
       <bd-card-item title="Multi-layer Security">
-        <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
+        <bd-globe-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-globe-icon>
       </bd-card-item>
       <bd-card-item title="VPN Included">
-        <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
+        <bd-machine-learning-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-machine-learning-icon>
       </bd-card-item>
       <bd-card-item title="Parental Controls">
-        <bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>
+        <bd-analysis-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-analysis-icon>
       </bd-card-item>
     </bd-card-section>
   `,
@@ -361,17 +361,17 @@ export const WithImages = {
       <bd-card-item title="Total Security">
         <img slot="icon" src="/assets/tabs-img1.png" alt="Total Security" />
         <bd-p>Complete protection for all your devices with advanced threat detection.</bd-p>
-        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
+        <bd-button-link slot="cta" href="#" variant="primary" size="sm">Learn more</bd-button-link>
       </bd-card-item>
       <bd-card-item title="Internet Security">
         <img slot="icon" src="/assets/tabs-img2.png" alt="Internet Security" />
         <bd-p>Stay safe online.</bd-p>
-        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
+        <bd-button-link slot="cta" href="#" variant="primary" size="sm">Learn more</bd-button-link>
       </bd-card-item>
       <bd-card-item title="Antivirus Plus">
         <img slot="icon" src="/assets/tabs-img3.png" alt="Antivirus Plus" />
         <bd-p>Essential protection for your Windows PC with real-time antivirus and anti-phishing.</bd-p>
-        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
+        <bd-button-link slot="cta" href="#" variant="primary" size="sm">Learn more</bd-button-link>
       </bd-card-item>
     </bd-card-section>
   `,
@@ -383,7 +383,7 @@ export const MixedIconsAndImages = {
   render: () => html`
     <bd-card-section title="Mixed Media">
       <bd-card-item title="AI Protection">
-        <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
+        <bd-individual-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-individual-icon>
         <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
       </bd-card-item>
       <bd-card-item title="Total Security">
@@ -391,7 +391,7 @@ export const MixedIconsAndImages = {
         <bd-p>Complete protection for all your devices.</bd-p>
       </bd-card-item>
       <bd-card-item title="VPN Included">
-        <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
+        <bd-globe-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-globe-icon>
         <bd-p>Unlimited encrypted VPN traffic for all your devices, anywhere.</bd-p>
       </bd-card-item>
       <bd-card-item title="Internet Security">
@@ -494,9 +494,9 @@ export const Playground = {
         ?bg-blue=${args.bgBlue}
         cta-align="${args.ctaAlign}"
       >
-        <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
+        <bd-individual-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-individual-icon>
         <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
-        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
+        <bd-button-link slot="cta" href="#" variant="primary" size="sm">Learn more</bd-button-link>
       </bd-card-item>
       <bd-card-item
         title="VPN Included"
@@ -504,9 +504,9 @@ export const Playground = {
         ?bg-blue=${args.bgBlue}
         cta-align="${args.ctaAlign}"
       >
-        <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
+        <bd-globe-icon slot="icon" width="32" height="32" color="var(--color-blue-500)"></bd-globe-icon>
         <bd-p>Unlimited encrypted VPN traffic.</bd-p>
-        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
+        <bd-button-link slot="cta" href="#" variant="primary" size="sm">Learn more</bd-button-link>
       </bd-card-item>
     </bd-card-section>
   `,

package/src/components/carousel/carousel.css.js

@@ -1,12 +1,9 @@
-import { css } from "lit";
+import { css, unsafeCSS } from "lit";
+import { below } from "../shared/token-scales.js";
 
 export default css`
   :host {
     display: block;
-    --background-card-grey: var(--color-neutral-25);
-    --border-card-grey: var(--color-neutral-50);
-    --bd-blue-color: var(--color-blue-500);
-    --bd-accesibility-focus: var(--color-blue-800);
   }
 
 
@@ -24,11 +21,12 @@ export default css`
     user-select: none;
   }
     
-  .bd-section-title {
-    font-family: var(--typography-fontFamily-sans);
-    font-weight: var(--typography-fontWeight-semibold);
-    font-size: 2em;
-  }
+  /* No .bd-section-title rule. The title is a bd-h at visual-level="h3", so
+     the heading-h3 role carries the whole of its type -- the three
+     declarations that stood here spelled out that role's size and weight by
+     hand while leaving its line-height unset, which is how the title came to
+     render at the browser's default leading and with the browser's default h2
+     margins. LightCarousel and CardFeatures declare no such rule either. */
   div.bd-arrow {
     padding: var(--spacing-2);
     visibility: visible;
@@ -38,8 +36,9 @@ export default css`
   .bd-arrow:focus-visible,
   .bd-plus-button:focus-visible,
   .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);
   }
 
   .bd-header-carousel {
@@ -50,8 +49,10 @@ export default css`
     margin-top: 50px;
   }
 
-  .bd-heading{
-  padding: 20px}
+  /* A ".bd-heading{padding: 20px}" rule stood here. .bd-heading is the class
+     bd-h puts on the element inside its own shadow root, so this stylesheet
+     never reached it: measured 0 matches across 27 carousel sections and 102
+     carousel items. */
   .bd-carousel-container {
     display: flex;
     flex-direction: column;
@@ -69,10 +70,18 @@ export default css`
     box-shadow: var(--spacing-0) var(--spacing-2) var(--spacing-4) rgba(0, 0, 0, 0.1);
     position: absolute;
     bottom: -65px;
-    background: var(--bd-blue-color);
-    color: white;
-    font-size: var(--spacing-20);
-    line-height: 1;
+    background: var(--color-surface-brand);
+    color: var(--color-text-inverse);
+      /* no role: .bd-arrow is an <img> -- left-arrow.svg / right-arrow.svg in
+         carousel.js. It renders no text, so this styles nothing but the alt
+         text a browser shows when the SVG fails to load. Fallback typography
+         is not a role decision. */
+    font-size: var(--typography-fontSize-xl);
+      /* no role: .bd-arrow is an <img> -- left-arrow.svg / right-arrow.svg in
+         carousel.js. It renders no text, so this styles nothing but the alt
+         text a browser shows when the SVG fails to load. Fallback typography
+         is not a role decision. */
+    line-height: var(--typography-lineHeight-none);
     text-align: center;
   }
 
@@ -123,8 +132,8 @@ export default css`
 }
 
   .bd-disabled {
-    background: #f1f2f3;
-    color: #a6adb4;
+    background: var(--color-neutral-50);
+    color: var(--color-text-muted-inverse);
     cursor: not-allowed;
   }
 
@@ -144,7 +153,7 @@ export default css`
     position: relative;
     overflow-x: hidden;
     overflow-y: hidden;
-    z-index: 1;
+    z-index: var(--z-base);
     scroll-snap-type: x mandatory;
     -webkit-overflow-scrolling: touch;
     transition: scroll-snap-align 0.6s cubic-bezier(0.23, 1, 0.32, 1);
@@ -168,109 +177,83 @@ export default css`
     min-height: 217px;
     min-width: unset;
     width: 350px;
-    background: var(--background-card-grey);
-    border-radius: 28px;
-    border: var(--spacing-2) solid var(--border-card-grey);
-    padding: 2em;
+    background: var(--color-surface-container);
+    /* --radius-2xl, the step the other ten cards take.
+       bd-light-carousel made this exact move and wrote the argument for it:
+       "nothing about a carousel item asks for a softer corner than the same
+       card sitting in a grid". Same family, same reasoning, this file was
+       behind. Visible: the corner tightens 24px to 16px. */
+    border-radius: var(--card-radius);
+    /* No edge, for the reason bd-bentoitem's rule states: this card sits on
+       surface/container over the page ground, and that role is documented as
+       reading like its own object without a border or a shadow to say so.
+
+       What stood here was a --border-width-2 edge, and the comment it carried
+       was about the UNIT rather than the edge: --spacing-2 and --border-width-2
+       are both 2px at a 16px root and diverge above it, so at a 24px root this
+       edge went to 3px while bd-bentoitem's held at 1px. That argument is spent
+       -- neither card draws an edge now -- but it is worth keeping the
+       conclusion: a border is a hairline against a shape, not a distance
+       between things, so it never belongs on the spacing scale. */
+    /* --spacing-32, the step, not 2em. Both are 32px at a 16px root and the
+       em was never a decision -- ten other cards spell the same inset with the
+       scale, and an em here would also drift with any font-size this box ever
+       inherits. */
+    padding: var(--card-padding);
     display: flex;
     flex-direction: column;
     align-items: start;
     justify-content: center;
     text-align: start;
     cursor: pointer;
-    transition: transform 0.2s ease-in-out;
+    transition: transform var(--transition-duration-normal) var(--transition-easing-smooth);
     font-family: var(--typography-fontFamily-sans);
     position: relative;
-    z-index: 2;
-  }
-
-  .bd-box bd-h {
-    font-size: var(--spacing-18);
-    margin: var(--spacing-0) var(--spacing-0) 0.5em var(--spacing-0);
-    font-weight: 600;
-    font-family: var(--typography-fontFamily-sans);
-      padding: 10px 0; /* Adaugă aici */
-
-  }
-
-  .bd-box p {
-    font-size: var(--spacing-16);
-    margin: var(--spacing-0) var(--spacing-0) 1em var(--spacing-0);
-    font-family: var(--typography-fontFamily-sans);
-  }
-
-  .bd-modal {
-    position: fixed;
-    top: var(--spacing-0);
-    left: var(--spacing-0);
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 9999;
-    backdrop-filter: blur(var(--spacing-12));
-    opacity: 0;
-    transform: scale(0.9);
-    transition: opacity 0.3s ease, transform 0.3s ease;
-  }
-
-  .bd-modal[open] {
-    opacity: 1;
-    transform: scale(1);
+    z-index: var(--z-raised);
   }
 
-  .bd-modal-content {
-    background: #fff;
-    padding: 2em;
-    border-radius: var(--spacing-12);
-    max-width: 500px;
-    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);
-  }
-
-  .bd-modal-content h2 {
-    margin: var(--spacing-0) var(--spacing-0) 1em var(--spacing-0);
-    font-family: var(--typography-fontFamily-sans);
-  }
 
-  .bd-modal-content button {
-    margin-top: 1em;
-    padding: 0.5em 1em;
-    background: var(--bd-blue-color);
-    color: #fff;
-    border: none;
-    border-radius: var(--spacing-8);
-    cursor: pointer;
-    font-family: var(--typography-fontFamily-sans);
-  }
+  /* A verbatim copy of modal.css.js stood here. The carousel renders
+     <bd-modal>, which styles its own shadow root, so none of it could ever
+     match: measured zero .bd-modal / .bd-modal-content elements in every
+     carousel story, including "Modal — Click + to Open". */
 
   .bd-plus-button {
   content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><circle cx="20" cy="20" r="19" stroke="%23006DFF" stroke-width="2"/><path d="M19 11H21V29H19V11Z" fill="%23006DFF"/><path d="M29 19V21L11 21L11 19L29 19Z" fill="%23006DFF"/></svg>');
     position: absolute;
     bottom: var(--spacing-10);
     right: var(--spacing-10);
-    color: var(--bd-blue-color);
     width: var(--spacing-44);
     height: var(--spacing-44);
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    font-size: 30px;
-    font-weight: bold;
     cursor: pointer;
+    /* color, font-size: 30px and font-weight: bold stood here, styling the "+"
+       this div contains (carousel.js:49). They painted nothing. The content:
+       url() above REPLACES the element, so the text node is never laid out --
+       measured in components-carousel--modal-trigger, the "+" range reports 0
+       client rects while the box is 44x44 and computed color is still
+       rgb(0, 109, 255).
+       .
+       Removing the color also retired --bd-blue-color, the last private alias
+       plans/foundation-plan.md claimed had already been removed. What actually
+       paints the mark is %23006DFF, baked into the data URI twice -- reachable
+       by no token rule. plans/LATER.md entry 3. */
   }
 .bd-plus-button:hover {
   content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><circle cx="20" cy="20" r="19" fill="%23F0F7FF" stroke="%23006DFF" stroke-width="2"/><path d="M19 11H21V29H19V11Z" fill="%23006DFF"/><path d="M29 19V21L11 21L11 19L29 19Z" fill="%23006DFF"/></svg>');
 }
 
 
-  bd-carousel-item::part(content) {
-    font-family: var(--typography-fontFamily-sans);
-  }
+  /* A "bd-carousel-item::part(content)" rule stood here and was dead three
+     times over. The items are light-DOM children of bd-carousel-section -- its
+     shadow root holds a slot -- so a selector in this stylesheet cannot reach
+     them in either host that adopts it; bd-carousel-item exposes no part named
+     "content" at all; and .bd-box above already sets this same font-family,
+     which everything inside it inherits. Measured: the item's box computes the
+     IBM Plex Sans stack with this rule gone. */
 
 .bd-plus-button:active {
   content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><circle cx="20" cy="20" r="19" fill="%23006DFF" stroke="%23006DFF" stroke-width="2"/><path d="M19 11H21V29H19V11Z" fill="white"/><path d="M29 19V21L11 21L11 19L29 19Z" fill="white"/></svg>');
@@ -284,7 +267,7 @@ export default css`
     margin-left: var(--spacing-6);
   }
 
-  @media (max-width: 768px) {
+  @media ${unsafeCSS(below('md'))} {
     .bd-carousel-track {
       flex-wrap: nowrap;
       overflow-x: hidden;
@@ -304,7 +287,11 @@ export default css`
 
     .bd-arrow {
       bottom: -75px;
-      font-size: var(--spacing-16);
+      /* no role: .bd-arrow is an <img> -- left-arrow.svg / right-arrow.svg in
+         carousel.js. It renders no text, so this styles nothing but the alt
+         text a browser shows when the SVG fails to load. Fallback typography
+         is not a role decision. */
+      font-size: var(--typography-fontSize-base);
     }
 
     .bd-arrow:first-of-type {
@@ -326,11 +313,18 @@ export default css`
       padding: 2em;
     }
 
-    .bd-plus-icon {
-      font-size: var(--spacing-24);
-    }
     .bd-carousel-icon {
       bottom: var(--spacing-10);
     }
   }
+
+  /* A reader who asked for less motion was still getting the track snap and the item lift. Twenty-three
+     of the thirty animated directories in this package honour the query; this
+     one did not. */
+  @media (prefers-reduced-motion: reduce) {
+    .bd-carousel-track,
+    .bd-box {
+      transition: none;
+    }
+  }
 `;