@repobit/dex-system-design 0.25.11 → 0.26.0

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

@@ -1,10 +1,14 @@
 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 "../badge/badge.js";
 import "../button/button.js";
+import "../divider/divider-horizontal.js";
 import "../heading/heading.js";
 import "../paragraph/paragraph.js";
+import "../tab-list/tab-list.js";
 import pricingCardsCSS from "../pricing-cards/pricing-card.css.js";
+import { contentSwitcherCSS, tabListCSS } from "../tab-list/tab-list.css.js";
 
 class PricingContainer extends LitElement {
   static properties = {
@@ -23,14 +27,12 @@ class PricingContainer extends LitElement {
   }
 
   handleSwitch(event) {
-    console.log("Plan switched to:", event.detail.planType);
     this.planType = event.detail.planType;
   }
 
   render() {
     return html`
       <style>
-        ${tokens}
         ${pricingCardsCSS}
       </style>
       
@@ -187,7 +189,6 @@ class PricingCard extends LitElement {
   render() {
     return html`
       <style>
-        ${tokens}
         ${pricingCardsCSS}
       </style>
       
@@ -198,29 +199,29 @@ class PricingCard extends LitElement {
         <div class="card-header">
           <bd-h as="h4" class="card-title">${this.title}</bd-h>
           
-          <bd-badge>
+          <bd-badge tone="primary" variant="fill">
             Individual
           </bd-badge>
           
-          <bd-p kind="small" class="badge-subtitle">1 account & 5 devices</bd-p>
-          <hr class="hr-line" />
+          <bd-p variant="small" class="badge-subtitle">1 account & 5 devices</bd-p>
+          <bd-divider-horizontal color="subtle"></bd-divider-horizontal>
         </div>
         
         <!-- Pricing section with store integration -->
         <div class="pricing">
           <div class="pricing-info" data-store-hide="!it.option.price.discounted">
-            <bd-p kind="small" class="original-price">
+            <bd-p variant="small" class="original-price">
               <s data-store-render data-store-price="full"></s>
             </bd-p>
-            <bd-p kind="small" class="discount">
-  <bd-badge variant="bd-light-green">
+            <bd-p variant="small" class="discount">
+  <bd-badge tone="success" variant="shade">
     Save <span data-store-render data-store-discount="percentage"></span>
   </bd-badge>            </bd-p>
           </div>
           <bd-h as="h3" class="price">
             <span data-store-render data-store-price="discounted||full"></span>/year
           </bd-h>
-          <bd-p kind="small" class="terms">
+          <bd-p variant="small" class="terms">
             First year price. Plus applicable sales tax. See
             <a href="#">terms of use</a> below.
           </bd-p>
@@ -230,10 +231,9 @@ class PricingCard extends LitElement {
         <div class="actions">
           <bd-button-link
             label="Buy Now"
-            kind="danger"
+            variant="accent"
             size="md"
             fullWidth
-            strong
             buyLink
           >
             Buy Now
@@ -241,16 +241,15 @@ class PricingCard extends LitElement {
 
           <bd-button
             label="Learn More"
-            kind="outline"
+            variant="ghost"
             size="md"
             fullWidth
-            strong
           >
             Learn More
           </bd-button>
         </div>
         
-        <hr class="hr-line" />
+        <bd-divider-horizontal color="subtle"></bd-divider-horizontal>
         
         <!-- Features sections -->
         ${this.features ? html`<pricing-card-features .shadow=${this.shadow}></pricing-card-features>` : ""}
@@ -302,7 +301,6 @@ class PricingCardFamily extends LitElement {
   render() {
     return html`
       <style>
-        ${tokens}
         ${pricingCardsCSS}
       </style>
       
@@ -313,29 +311,29 @@ class PricingCardFamily extends LitElement {
         <div class="card-header">
           <bd-h as="h4" class="card-title">${this.title}</bd-h>
           
-          <bd-badge>
+          <bd-badge tone="primary" variant="fill">
             Family
           </bd-badge>
           
-          <bd-p kind="small" class="badge-subtitle">5 accounts & 25 devices</bd-p>
-          <hr class="hr-line" />
+          <bd-p variant="small" class="badge-subtitle">5 accounts & 25 devices</bd-p>
+          <bd-divider-horizontal color="subtle"></bd-divider-horizontal>
         </div>
         
         <!-- Pricing section with store integration -->
         <div class="pricing">
           <div class="pricing-info" data-store-hide="!it.option.price.discounted">
-            <bd-p kind="small" class="original-price">
+            <bd-p variant="small" class="original-price">
               <s data-store-render data-store-price="full"></s>
             </bd-p>
-            <bd-p kind="small" class="discount">
-  <bd-badge variant="bd-light-green">
+            <bd-p variant="small" class="discount">
+  <bd-badge tone="success" variant="shade">
     Save <span data-store-render data-store-discount="percentage"></span>
   </bd-badge>            </bd-p>
           </div>
           <bd-h as="h3" class="price">
             <span data-store-render data-store-price="discounted||full"></span>/year
           </bd-h>
-          <bd-p kind="small" class="terms">
+          <bd-p variant="small" class="terms">
             First year price. Plus applicable sales tax. See
             <a href="#">terms of use</a> below.
           </bd-p>
@@ -345,10 +343,9 @@ class PricingCardFamily extends LitElement {
         <div class="actions">
           <bd-button-link
             label="Buy Now"
-            kind="danger"
+            variant="accent"
             size="md"
             fullWidth
-            strong
             buyLink
           >
             Buy Now
@@ -356,16 +353,15 @@ class PricingCardFamily extends LitElement {
 
           <bd-button
             label="Learn More"
-            kind="outline"
+            variant="ghost"
             size="md"
             fullWidth
-            strong
           >
             Learn More
           </bd-button>
         </div>
         
-        <hr class="hr-line" />
+        <bd-divider-horizontal color="subtle"></bd-divider-horizontal>
         
         <!-- Features sections -->
         ${this.features
@@ -400,10 +396,9 @@ class PricingSwitch extends LitElement {
     this.shadow = true;
   }
 
+  /** bd-tab-list reports the option index; the plan type is this component's word for it. */
   handleSwitch(event) {
-    const newPlanType = event.target.checked ? "family" : "individual";
-    console.log("Switch to:", newPlanType);
-    this.planType = newPlanType;
+    this.planType = event.detail.index === 1 ? "family" : "individual";
 
     this.dispatchEvent(
       new CustomEvent("plan-switch", {
@@ -415,30 +410,24 @@ class PricingSwitch extends LitElement {
   }
 
   render() {
+    /* bd-tab-list renders into light DOM, which inside this component means
+       this shadow root -- so its sheets have to be in scope here. See the note
+       at the top of tab-list.js on why that element works this way. */
     return html`
       <style>
-        ${tokens}
         ${pricingCardsCSS}
+        ${tabListCSS}
+        ${contentSwitcherCSS}
       </style>
-      
+
       <div class="switchBox">
-        <label class="switch">
-          <input
-            type="checkbox"
-            id="switchCheckbox"
-            @input=${this.handleSwitch}
-            ?checked=${this.planType === "family"}
-          />
-          <span class="slider round"></span>
-          <span class="label right">
-            <span class="icon icon-user-sharp-regular"></span>
-            Individual
-          </span>
-          <span class="label left">
-            <span class="icon icon-family-pants-sharp-regular"></span>
-            Family
-          </span>
-        </label>
+        <bd-tab-list
+          appearance="switcher"
+          label="Plan type"
+          .tabs=${[{ label: "Individual" }, { label: "Family" }]}
+          .selected=${this.planType === "family" ? 1 : 0}
+          @bd-tab-select=${this.handleSwitch}
+        ></bd-tab-list>
       </div>
     `;
   }
@@ -488,7 +477,6 @@ class PricingCardFeatures extends LitElement {
     const features = this.features || [];
     return html`
       <style>
-        ${tokens}
         ${pricingCardsCSS}
       </style>
       
@@ -502,9 +490,9 @@ class PricingCardFeatures extends LitElement {
                   alt="icon"
                   class="badge-icon"
                 />
-              <bd-p kind="regular">${feature.name}</bd-p>
+              <bd-p variant="regular">${feature.name}</bd-p>
               ${feature.description
-                ? html`<div class="tooltip"><bd-p kind="small">${feature.description}</bd-p></div>`
+                ? html`<div class="tooltip"><bd-p variant="small">${feature.description}</bd-p></div>`
                 : ""}
             </li>`
           )}
@@ -553,7 +541,6 @@ class PricingCardPrivacy extends LitElement {
     const privacy = this.privacy || [];
     return html`
       <style>
-        ${tokens}
         ${pricingCardsCSS}
       </style>
       
@@ -567,15 +554,15 @@ class PricingCardPrivacy extends LitElement {
                   alt="icon"
                   class="badge-icon"
                 />
-              <bd-p kind="regular">${priv.name.replace(" 1x", "")}</bd-p>
+              <bd-p variant="regular">${priv.name.replace(" 1x", "")}</bd-p>
               ${priv.badge
                 ? html`
-                    <bd-badge>
+                    <bd-badge tone="primary" variant="fill">
                       ${priv.badge}
                   `
                 : ""}
               ${priv.description
-                ? html`<div class="tooltip"><bd-p kind="small">${priv.description}</bd-p></div>`
+                ? html`<div class="tooltip"><bd-p variant="small">${priv.description}</bd-p></div>`
                 : ""}
             </li>`
           )}
@@ -608,7 +595,6 @@ class PricingCardIdentify extends LitElement {
     const identity = this.identity || [];
     return html`
       <style>
-        ${tokens}
         ${pricingCardsCSS}
       </style>
       
@@ -622,16 +608,16 @@ class PricingCardIdentify extends LitElement {
                   alt="icon"
                   class="badge-icon"
                 />
-              <bd-p kind="regular">${ident.name}</bd-p>
+              <bd-p variant="regular">${ident.name}</bd-p>
               ${ident.badge
                 ? html`
-                    <bd-badge>
+                    <bd-badge tone="primary" variant="fill">
                       ${ident.badge}
                     </bd-badge>
                   `
                 : ""}
               ${ident.description
-                ? html`<div class="tooltip"><bd-p kind="small">${ident.description}</bd-p></div>`
+                ? html`<div class="tooltip"><bd-p variant="small">${ident.description}</bd-p></div>`
                 : ""}
             </li>`
           )}
@@ -684,7 +670,6 @@ class PricingCardIdentityExtend extends LitElement {
     const identity = this.identity || [];
     return html`
       <style>
-        ${tokens}
         ${pricingCardsCSS}
       </style>
       
@@ -698,16 +683,16 @@ class PricingCardIdentityExtend extends LitElement {
                   alt="icon"
                   class="badge-icon"
                 />
-              <bd-p kind="regular">${ident.name}</bd-p>
+              <bd-p variant="regular">${ident.name}</bd-p>
               ${ident.badge
                 ? html`
-                    <bd-badge>
+                    <bd-badge tone="primary" variant="fill">
                       ${ident.badge}
                     </bd-badge>
                   `
                 : ""}
               ${ident.description
-                ? html`<div class="tooltip"><bd-p kind="small">${ident.description}</bd-p></div>`
+                ? html`<div class="tooltip"><bd-p variant="small">${ident.description}</bd-p></div>`
                 : ""}
             </li>`
           )}
@@ -763,7 +748,6 @@ class PricingCardParentalControl extends LitElement {
     const parentalControl = this.parentalControl || [];
     return html`
       <style>
-        ${tokens}
         ${pricingCardsCSS}
       </style>
       
@@ -777,16 +761,16 @@ class PricingCardParentalControl extends LitElement {
                   alt="icon"
                   class="badge-icon"
                 />
-              <bd-p kind="regular">${parental.name}</bd-p>
+              <bd-p variant="regular">${parental.name}</bd-p>
               ${parental.badge
                 ? html`
-                    <bd-badge>
+                    <bd-badge tone="primary" variant="fill">
                       ${parental.badge}
                     </bd-badge>
                   `
                 : ""}
               ${parental.description
-                ? html`<div class="tooltip"><bd-p kind="small">${parental.description}</bd-p></div>`
+                ? html`<div class="tooltip"><bd-p variant="small">${parental.description}</bd-p></div>`
                 : ""}
             </li>`
           )}

package/src/components/pricing-cards/pricing-feature-item.css.js

@@ -1,18 +1,35 @@
 import { css } from "lit";
 
 export default css`
+/* The tick is bd-check-icon now, not a "✓" in a ::before. Two things go with
+   that. The absolute positioning and the 1.25rem indent it needed are gone --
+   a flex row with a gap puts the mark beside the text without either side
+   having to know the other's metrics, and the mark no longer shifts when the
+   font does. And the icon does not shrink when a feature wraps to two lines,
+   which a glyph in a text flow would.
+   .
+   align-items: start rather than center, so on a wrapped feature the tick sits
+   with the FIRST line rather than drifting to the vertical middle of the
+   block. */
 .feature {
+      display: flex;
+      align-items: start;
+      gap: var(--spacing-8);
       font-family: var(--typography-fontFamily-sans);
       font-size: var(--typography-label-small-fontSize);
-      color: #000000;
-      padding-left: 1.25rem;
-      position: relative;
+      color: var(--color-text-primary);
     }
 
-    .feature::before {
-      content: "✓";
-      position: absolute;
-      left: 0;
-      color: green;
+    /* The tick keeps green-700, the step it already had: white-on-green needs
+       it, and here it is green-on-white at 4.75:1. Now through the role:
+       tokens.js calls -accent "the saturated step, badge dot, alert rule",
+       and badge.css.js:111 records that green-700 already lines up with the
+       success dot. A tick is that kind of mark. Value-identical. */
+    .feature bd-check-icon {
+      color: var(--status-success-accent);
+      flex-shrink: 0;
+      /* the icon box is 12px and the label's line box is taller, so nudge the
+         mark onto the text's optical centre for the first line */
+      margin-top: var(--spacing-2);
     }
 `;

package/src/components/pricing-cards/pricing-feature-item.js

@@ -1,14 +1,19 @@
 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 newFeaturePricingCSS from "../pricing-cards/pricing-feature-item.css.js";
+import "../icons/check-icon.js";
 
 class PricingFeatureItem extends LitElement {
 
 
   render() {
-    return html`<div class="feature"><slot></slot></div>`;
+    return html`<div class="feature">
+      <bd-check-icon size="xs" aria-hidden="true"></bd-check-icon>
+      <span class="feature-text"><slot></slot></span>
+    </div>`;
   }
 }
-PricingFeatureItem.styles = [tokens, newFeaturePricingCSS];
+PricingFeatureItem.styles = [newFeaturePricingCSS];
 
 customElements.define("pricing-feature-item", PricingFeatureItem);

package/src/components/process-steps/process-steps.css.js

@@ -4,20 +4,19 @@ export default css`
   :host {
     display: block;
     font-family: var(--typography-fontFamily-sans);
+    /* the band runs full-bleed on the host; the column inside it is bd-ensemble */
+    background: linear-gradient(160deg, var(--color-neutral-800) 0%, #0b1626 100%);
   }
 
   .bd-processsteps-container {
-        color: var(--color-neutral-0);
-    background: linear-gradient(160deg, var(--color-neutral-800) 0%, #0b1626 100%);
-    padding: var(--spacing-64) var(--spacing-24) var(--spacing-64) var(--spacing-24);
+    color: var(--color-text-inverse);
+    padding-block: var(--spacing-64);
     box-sizing: border-box;
   }
 
   .bd-processsteps-title {
     display: block;
     margin: 0 0 var(--spacing-12);
-    color: var(--color-neutral-0, #fff);
-    line-height: var(--typography-lineHeight-tight, 1.1);
     max-width: 900px;
     margin-left: auto;
     margin-right: auto;
@@ -26,12 +25,10 @@ export default css`
   .bd-processsteps-description {
     display: block;
     margin: 0 0 var(--spacing-40);
-    color: var(--color-neutral-300, #d1d5db);
+    color: var(--color-text-muted-inverse);
     max-width: 900px;
     margin-left: auto;
     margin-right: auto;
-    --typography-body-regular-fontWeight: var(--typography-fontWeight-bold, 700);
-
   }
 
   /* === GRID === */
@@ -49,7 +46,12 @@ export default css`
   }
 
   .bd-processsteps-divider {
-    border-top: 1px solid rgba(255, 255, 255, 0.12);
+    /* A boundary on an inverse ground. --color-border-container-inverse is
+       color-mix(in srgb, var(--color-neutral-0) 12%, transparent) -- white at
+       12%, which is exactly the rgba this used to spell, so nothing moves. It
+       is also the system's ONLY translucent colour role, which is why this
+       literal could not resolve until the boundary question was settled. */
+    border-top: var(--border-width-1) solid var(--color-border-container-inverse);
     margin-bottom: var(--spacing-24);
   }
 
@@ -57,10 +59,21 @@ export default css`
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 40px;
-    height: 40px;
+    /* an icon frame, not a control icon, so it keeps its 40 rather than being
+       pushed onto the 32/48 icon steps -- but 40 is a dimension token, not a
+       literal */
+    width: var(--dimension-40);
+    height: var(--dimension-40);
     margin-bottom: var(--spacing-16);
-    color: var(--color-blue-400, #60a5fa);
+    /* The inverse ink. DECIDED, and this is a real colour change: the icon goes from
+       blue to white. It sits on this module's dark band, where the only inks clearing
+       3:1 are blue-400 and white -- and the ink role for a dark ground is
+       --color-text-inverse, which is what every other on-dark element here uses:
+       bd-link collapses all five kinds to it under surface="dark", and so do the
+       header watermark and the footer's social icons. Contrast 3.97:1 at the band's
+       light end -> 13.28:1. The alternative was a brand-inverse ink, which vocabulary
+       question C established the system does not have and does not want. */
+    color: var(--color-text-inverse);
   }
 
   .bd-processsteps-icon-img {
@@ -72,13 +85,12 @@ export default css`
   .bd-processsteps-step-title {
     display: block;
     margin: 0 0 var(--spacing-8);
-    color: var(--color-neutral-0, #fff);
   }
 
   .bd-processsteps-step-description {
     display: block;
     margin: 0;
-    color: var(--color-neutral-300, #d1d5db);
+    color: var(--color-text-muted-inverse);
   }
 
   /* === RESPONSIVE === */

package/src/components/process-steps/process-steps.js

@@ -6,6 +6,7 @@ import "../icons/globe-icon.js";
 import "../icons/guide-icon.js";
 import "../paragraph/paragraph.js";
 import processStepsCSS from "./process-steps.css.js";
+import { ensembleCSS } from "../shared/ensemble.css.js";
 
 class ProcessSteps extends LitElement {
   static properties = {
@@ -14,7 +15,7 @@ class ProcessSteps extends LitElement {
     steps      : { type: Array } // [{ icon: TemplateResult|String, title: String, description: String }]
   };
 
-  static styles = [tokens, processStepsCSS];
+  static styles = [tokens, ensembleCSS, processStepsCSS];
 
   constructor() {
     super();
@@ -31,12 +32,28 @@ class ProcessSteps extends LitElement {
     return icon;
   }
 
+  /* color="inverse" on both headings, because this module paints its own dark
+     surface: process-steps.css.js fills the section with
+     linear-gradient(160deg, --color-neutral-800, #0b1626) and sets
+     color: --color-text-inverse on the container.
+
+     That container colour never reached the headings. bd-h sets its own colour
+     inside its shadow root, so an inherited value cannot win: measured on the
+     dark gradient, every bd-h rendered rgb(21, 23, 25) -- near-black ink on a
+     near-black surface, about 1.0:1 -- while bd-p beside it correctly used
+     --color-text-muted-inverse at rgb(166, 173, 180) and stayed readable. The
+     section title and all three step titles were effectively invisible; it is
+     visible in a screenshot and was measured to confirm it.
+
+     bd-h already exposes the colour role, and footer-links-group does exactly
+     this on the footer's dark surface, so this is the module selecting the
+     right configuration for the surface it chose -- not a change to bd-h. */
   render() {
     return html`
-      <div class="bd-processsteps-container">
+      <div class="bd-ensemble bd-processsteps-container">
         ${this.title
           ? html`
-              <bd-h as="h2" class="bd-processsteps-title">
+              <bd-h as="h2" color="inverse" class="bd-processsteps-title">
                 <slot name="title">${this.title}</slot>
               </bd-h>
             `
@@ -44,7 +61,7 @@ class ProcessSteps extends LitElement {
 
         ${this.description
           ? html`
-              <bd-p kind="regular" class="bd-processsteps-description">
+              <bd-p variant="regular" class="bd-processsteps-description">
                 <slot name="description">${this.description}</slot>
               </bd-p>
             `
@@ -56,8 +73,8 @@ class ProcessSteps extends LitElement {
               <div class="bd-processsteps-step">
                 <div class="bd-processsteps-divider"></div>
                 <div class="bd-processsteps-icon-wrap">${this._renderIcon(step.icon)}</div>
-                <bd-h as="h4" class="bd-processsteps-step-title">${step.title}</bd-h>
-                <bd-p kind="regular" class="bd-processsteps-step-description">${step.description}</bd-p>
+                <bd-h as="h4" color="inverse" class="bd-processsteps-step-title">${step.title}</bd-h>
+                <bd-p variant="regular" class="bd-processsteps-step-description">${step.description}</bd-p>
               </div>
             `
           )}

package/src/components/process-steps/process-steps.stories.js

@@ -5,7 +5,7 @@ import "../icons/guide-icon.js";
 import "./process-steps.js";
 
 export default {
-  title     : "Components/Process Steps",
+  title     : "Modules/Process Steps",
   component : "bd-process-steps",
   tags      : ["autodocs"],
   parameters: {