@repobit/dex-system-design 0.25.11 → 0.26.0

package/src/components/picture/picture.js

@@ -1,19 +1,39 @@
 import { LitElement, html, nothing } 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 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'];
+
 export class BdPicture extends LitElement {
   static properties = {
     sources       : { type: Array },
     alt           : { type: String },
-    fallbackSrc   : { type: String },
+    /* `fallback-src`, because that is the attribute this component documents
+       and the only spelling anything writes. Lit lowercases a property name to
+       get its observed attribute instead of dash-casing it, so `fallbackSrc`
+       was listening for `fallbacksrc` while every story and the usage example
+       in picture.stories.js wrote `fallback-src`. The attribute was inert, the
+       property stayed at its "" default, and the fallback <img> rendered with
+       src="".
+
+       That is the whole image on this component: measured across the six
+       Atoms/Picture stories, all 14 instances had naturalWidth 0, and the 12
+       with an empty `sources` array had currentSrc="" -- no candidate to
+       request at all, so a story called "No Sources (fallback only)" showed
+       nothing but an empty box. Isolated from the network with a data: URI:
+       setAttribute('fallback-src') left it 0x0, while setAttribute
+       ('fallbacksrc') and the property both loaded the image. (The two stories
+       that do have a currentSrc get it from a <source>, and their 0x0 is this
+       sandbox having no route to the placeholder host -- not this defect.) */
+    fallbackSrc   : { type: String, attribute: "fallback-src" },
     width         : { type: Number },
     height        : { type: Number },
     loading       : { type: String },
     fit           : { type: String },
     radius        : { type: String },
-    referrerPolicy: { type: String, attribute: "referrer-policy" },
-    _loaded       : { state: true }
+    referrerPolicy: { type: String, attribute: "referrer-policy" }
   };
 
   constructor() {
@@ -27,35 +47,17 @@ export class BdPicture extends LitElement {
     this.fit = "cover";
     this.radius = "none";
     this.referrerPolicy = "";
-    this._loaded = false;
-  }
-
-  _onImgLoad() {
-    this._loaded = true;
-  }
-
-  _onImgError() {
-    this._loaded = true;
-  }
-
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (this._loaded) return;
-    const img = this.renderRoot?.querySelector("img");
-    if (img && img.complete && img.naturalWidth > 0) {
-      this._loaded = true;
-    }
   }
 
   render() {
     const classes = [
       'bd-picture',
       `fit-${this.fit}`,
-      `radius-${this.radius}`
+      `radius-${RADIUS_STEPS.includes(this.radius) ? this.radius : 'none'}`
     ].filter(Boolean).join(' ');
 
     return html`
-      <picture class="${classes}" ?loaded=${this._loaded}>
+      <picture class="${classes}">
         ${this.sources.map(source => html`
           <source 
             type="${source.type}" 
@@ -68,18 +70,86 @@ export class BdPicture extends LitElement {
           loading="${this.loading}" 
           alt="${this.alt}" 
           src="${this.fallbackSrc}"
-          width="${this.width}"
-          height="${this.height}"
+          width="${this.width ?? nothing}"
+          height="${this.height ?? nothing}"
           referrerpolicy="${this.referrerPolicy || nothing}"
-          ?loaded=${this._loaded}
-          @load=${this._onImgLoad}
-          @error=${this._onImgError}
+          @load="${this._onLoad}"
+          @error="${this._onError}"
         >
       </picture>
     `;
   }
 
-  static styles = [tokens, pictureCSS];
+  /* The stylesheet has always been written around a `loaded` attribute --
+     `.bd-picture:not([loaded])` paints the grey placeholder and its "Loading
+     image" label, and `img[loading="lazy"][loaded]` is what returns a lazy
+     image from opacity 0 to opacity 1 -- and nothing in this package ever set
+     it. `loaded` appeared in exactly three places, all three of them those
+     selectors. So the reveal had no trigger:
+
+       loading="lazy" (the default)  ->  opacity 0, scale(0.95), forever
+       every instance               ->  placeholder background and label on
+                                        top of the image, permanently
+
+     Measured on a served 800x450 PNG: the img reached naturalWidth 800 --
+     fully decoded -- with computed opacity 0 in 7 of the 8 instances across
+     four stories. The eighth is the one story that passes loading="eager",
+     which has no opacity rule and so was the only visible image in the
+     component; it still carried the placeholder behind it.
+
+     That is also why fixing the `fallback-src` attribute above is not on its
+     own enough to see anything: it gives the img a src and the src decodes,
+     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
+     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.
+
+     `complete` is checked once on first update because a cached or
+     already-decoded image can finish before the listener is attached, in
+     which case no load event is coming -- the same "the state may already be
+     true before anything is watching for it" case as the tooltip's first
+     placement pass. naturalWidth guards it, because `complete` is also true
+     for an image that failed. */
+  firstUpdated() {
+    const img = this.renderRoot?.querySelector('img');
+    if (img?.complete && img.naturalWidth > 0) this._markLoaded(img);
+  }
+
+  /* A new source means the old image is no longer what is on screen, so the
+     flag goes back down and the placeholder returns until the new one
+     decodes. Without this a changed fallbackSrc would keep showing the
+     previous image's revealed state while the new bytes were still in
+     flight. */
+  updated(changed) {
+    if (!changed.has('fallbackSrc') && !changed.has('sources')) return;
+    const img = this.renderRoot?.querySelector('img');
+    if (!img) return;
+    if (img.complete && img.naturalWidth > 0) return this._markLoaded(img);
+    img.removeAttribute('loaded');
+    this.renderRoot?.querySelector('picture')?.removeAttribute('loaded');
+  }
+
+  _onLoad(e) {
+    this._markLoaded(e.currentTarget);
+  }
+
+  /* Deliberately does not set the flag: a broken image is exactly the case
+     the placeholder is for, so it stays up and says so. */
+  _onError() {}
+
+  /* Both elements, because the two selectors ask different questions: the
+     <picture> owns the placeholder and the <img> owns the reveal. */
+  _markLoaded(img) {
+    img.setAttribute('loaded', '');
+    this.renderRoot?.querySelector('picture')?.setAttribute('loaded', '');
+  }
+
+  static styles = [pictureCSS];
 }
 
 customElements.define("bd-picture", BdPicture);

package/src/components/picture/picture.stories.js

@@ -2,7 +2,7 @@ import { html } from 'lit';
 import './picture.js';
 
 export default {
-  title     : 'Components/Picture',
+  title     : 'Atoms/Picture',
   tags      : ['autodocs'],
   parameters: {
     docs: {

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

@@ -1,7 +1,8 @@
 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 newPricingCSS from "../pricing-cards/new-pricing.css";
+import newPricingCSS from "../pricing-cards/new-pricing.css.js";
 
 class PricingCard extends LitElement {
   static properties = {
@@ -23,7 +24,6 @@ class PricingCard extends LitElement {
   render() {
     return html`
       <style>
-        ${tokens}
         ${newPricingCSS}
       </style>
       

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

@@ -1,21 +1,30 @@
 import { css } from "lit";
 
 export default css`
-  :host {
-    --background-card-grey: var(--color-neutral-25);
-    --border-card-grey: var(--color-neutral-50);
-  }
 
  .card {
-      background: white;
-      border-radius: var(--spacing-20);
-      padding: var(--spacing-32);
-      background: #fafafa;
-      border: 1px solid var(--border-card-grey);
+      border-radius: var(--card-radius);
+      padding: var(--card-padding);
+      /* The white above this was dead: the grey overrode it in the same rule. */
+      background: var(--color-surface-container);
+      /* border/container, not the private --border-card-grey alias, which
+         pointed at --color-neutral-50 and measured 1.07:1 against this card's
+         own ground. 1px was a literal too.
+
+         This card keeps surface/container rather than inverting like
+         pricing-card.css.js: new-pricing-card has no wrapper of its own to
+         carry a band -- its container is pricing-card-container -- so going
+         white here without one would put a white card on a white page. The
+         edge is the half that is safe on its own, and it triples the delta to
+         1.233:1. */
+      border: var(--border-width-1) solid var(--color-border-container);
     }
 
     .highlight {
-      border: 2px solid #1d7928;
+      /* no role: no BORDER role carries green-700 -- --status-success-border is
+         green-200, four steps lighter. The fill and accent steps do carry it,
+         and both are the wrong category for an edge. */
+      border: 2px solid var(--color-green-700);
     }
 
     .highlight-wrapper {
@@ -34,13 +43,13 @@ export default css`
   top: 1rem;
   left: 50%;
   transform: translate(-50%, -50%);
-  background-color: #1d7928;
-  color: white;
+  background-color: var(--status-success-fill);
+  color: var(--color-text-inverse);
   font-weight: bold;
   font-size: var(--typography-body-regular-fontSize);
   text-align: center;
-  border-radius: 1rem 1rem 0 0;
-  z-index: 2;
+  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
+  z-index: var(--z-raised);
   height: 48px;
   width: 85%;
   max-width: 360px;
@@ -60,7 +69,7 @@ export default css`
 
     .hr-line {
       border: none;
-      border-top: 1px solid #ccc;
+      border-top: 1px solid var(--color-border-subtle);
       margin: 1.5rem 0;
     }
 `;

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

@@ -10,7 +10,7 @@ export default css`
 
     .hr-line {
       border: none;
-      border-top: 1px solid #ccc;
+      border-top: 1px solid var(--color-border-subtle);
       margin: 1.5rem 0;
     }
 `;

package/src/components/pricing-cards/pricing-card-actions.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 "../button/button.js";
 import newPricingActionsCSS from "../pricing-cards/pricing-card-actions.css.js";
 
@@ -26,7 +27,6 @@ class PricingCardActions extends LitElement {
   render() {
     return html`
       <style>
-        ${tokens}
         ${newPricingActionsCSS}
       </style>
       
@@ -41,10 +41,9 @@ class PricingCardActions extends LitElement {
             <div class="actions">
               <bd-button-link
                 label="Buy now"
-                kind="danger"
+                variant="accent"
                 size="md"
                 fullwidth
-                strong
                 buyLink
               >
                 Buy Now

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

@@ -1,8 +1,8 @@
-import { css } from "lit";
+import { css, unsafeCSS } from "lit";
+import { below } from "../shared/token-scales.js";
 
 export default css`
  :host {
-      // display: block;
       padding: 0px 240px;
     }
 
@@ -33,7 +33,7 @@ export default css`
       flex: 1 1 calc(25% - 1rem);
     }
 
-    @media (max-width: 768px) {
+    @media ${unsafeCSS(below('md'))} {
       ::slotted(new-pricing-card) {
         flex: 1 1 100%;
       }

package/src/components/pricing-cards/pricing-card-container.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 newCardsContainerPricingCSS from "../pricing-cards/pricing-card-container.css.js";
 
 export class PricingCardsContainer extends LitElement {
@@ -26,6 +27,6 @@ export class PricingCardsContainer extends LitElement {
     `;
   }
 }
-PricingCardsContainer.styles = [tokens, newCardsContainerPricingCSS];
+PricingCardsContainer.styles = [newCardsContainerPricingCSS];
 
 customElements.define("pricing-cards-container", PricingCardsContainer);

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

@@ -12,22 +12,21 @@ export default css`
   .card-title {
     font-size: var(--typography-heading-h4-fontSize);
     font-family: var(--typography-fontFamily-sans);
-    font-weight: var(--typography-fontWeight-bold);
     margin: 0;
     text-align: left;
-    color: #000000;
+    color: var(--color-text-primary);
   }
 
   .card-title-brand {
     display: inline;
     font-family: var(--typography-fontFamily-sans);
     font-weight: var(--typography-fontWeight-bold);
-    color: #000000;
+    color: var(--color-text-primary);
   }
 
   /* Stil pentru cuvântul "Plus" evidențiat */
   .plus-text {
-    color: var(--color-blue-600);
+    color: var(--color-text-brand);
     font-weight: var(--typography-fontWeight-bold);
     font-family: var(--typography-fontFamily-sans);
   }
@@ -37,9 +36,12 @@ export default css`
     align-items: center;
     gap: 0.25rem;
     font-weight: bold;
-    background: #e8f0fe;
+    /* The brand tint as a badge ground. bd-badge's brand variant is this exact
+       pair (badge.css.js:71-72) and tokens.js names the step for the job:
+       -surface is the light tint. Value-identical at #f0f7ff. */
+    background: var(--status-brand-surface);
     padding: 0.25rem 0.5rem;
-    border-radius: 4px;
+    border-radius: var(--radius-sm);
     margin: 0.5rem 0;
     font-size: 0.875rem;
   }
@@ -52,7 +54,7 @@ export default css`
     font-size: var(--typography-body-regular-fontSize);
     text-align: left;
     font-family: var(--typography-fontFamily-sans);
-    color: #000000;
+    color: var(--color-text-primary);
     margin: 0;
     margin-bottom: var(--spacing-16);
     margin-top: -8px;
@@ -60,7 +62,7 @@ export default css`
 
   .hr-line {
     border: none;
-    border-top: 1px solid #ccc;
+    border-top: 1px solid var(--color-border-subtle);
     margin: 1rem 0;
   }
 

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

@@ -1,6 +1,8 @@
 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 "../divider/divider-horizontal.js";
 import "../heading/heading.js";
 import "../paragraph/paragraph.js";
 import newHeaderPricingCSS from "../pricing-cards/pricing-card-header.css.js";
@@ -25,9 +27,6 @@ class PricingCardHeader extends LitElement {
     const plusIndex = title.toLowerCase().indexOf("plus");
 
     if (plusIndex === -1) {
-      const [brand, ...rest] = title.split(" ");
-      const restOfTitle = rest.join(" ");
-
       return html`
           <bd-h as="h4" class="card-title">
         <template shadowrootmode="open">
@@ -66,17 +65,17 @@ class PricingCardHeader extends LitElement {
         ${this.parsedBadges.length
           ? html`
               <div class="badge-wrapper multiple">
-                ${this.parsedBadges.map((b) => html`<bd-badge>${b}</bd-badge>`)}
+                ${this.parsedBadges.map((b) => html`<bd-badge tone="primary" variant="fill">${b}</bd-badge>`)}
               </div>
             `
           : ""}
-        <bd-p kind="small" class="badge-subtitle">${this.subtitle}</bd-p>
+        <bd-p variant="small" class="badge-subtitle">${this.subtitle}</bd-p>
         <bd-divider-horizontal></bd-divider-horizontal>
       </div>
     `;
   }
 }
 
-PricingCardHeader.styles = [tokens, newHeaderPricingCSS];
+PricingCardHeader.styles = [newHeaderPricingCSS];
 
 customElements.define("pricing-card-header", PricingCardHeader);

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

@@ -15,35 +15,42 @@ export default css`
     .original-price {
       text-decoration: line-through;
       font-family: var(--typography-fontFamily-sans);
-      color: #000000;
+      color: var(--color-text-primary);
       font-size: var(--typography-body-regular-fontSize);
       margin: 0;
     }
 
     .discount {
-      color: #0b6a26;
+      color: var(--color-text-success);
       font-weight: bold;
-      background: #d1fadc;
+      /* -surface-strong is the step tokens.js calls "the heavier tint, badge
+         shade", and this pill's ink is already --color-text-success, which is
+         the same green-800 --status-success-text resolves to. So the pair now
+         matches bd-badge's success variant exactly (badge.css.js:78-79) and
+         measures the 5.93:1 that file records. Value-identical at #d1fadc. */
+      background: var(--status-success-surface-strong);
       font-size: var(--typography-body-regular-fontSize);
       padding: 5px;
-      border-radius: 20px;
+      border-radius: var(--radius-full);
       font-family: var(--typography-fontFamily-sans);
       margin: 0;
     }
 
     .price {
-      font-size: var(--heading-xxlarge);
-      font-weight: var(--typography-fontWeight-bold);
+      /* no token: 40px is not on the type scale — 4xl is 36 and 5xl is 48 —
+       and this was reading --heading-xxlarge, a legacy pixel size deleted with the
+       rest of that family. Adding the step is its own decision. */
+    font-size: 40px;
       text-align: left;
       font-family: var(--typography-fontFamily-sans);
-      color: #000000;
+      color: var(--color-text-primary);
       margin: 0;
     }
 
     .terms {
       font-family: var(--typography-fontFamily-sans);
       font-size: var(--typography-label-small-fontSize);
-      color: #000000;
+      color: var(--color-text-primary);
       text-align: left;
       margin: 0;
       margin-top: var(--spacing-8);
@@ -53,7 +60,7 @@ export default css`
     .terms a {
       font-family: var(--typography-fontFamily-sans);
       font-size: var(--typography-label-small-fontSize);
-      color: #000000;
+      color: var(--color-text-primary);
       text-decoration: underline;
     }
     .toggle-group {

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

@@ -1,8 +1,11 @@
 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 "../heading/heading.js";
 import "../paragraph/paragraph.js";
+import "../link/link.js";
+import "../radio/radio.js";
 import newPricingPricingCSS from "../pricing-cards/pricing-card-pricing.css.js";
 
 class PricingCardPricing extends LitElement {
@@ -33,7 +36,6 @@ class PricingCardPricing extends LitElement {
 
     return html`
       <style>
-        ${tokens}
         ${newPricingPricingCSS}
       </style>
       
@@ -63,11 +65,11 @@ class PricingCardPricing extends LitElement {
               </div>
 
            <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-badge variant="bd-light-green">
+  <bd-badge tone="success" variant="shade">
     Save <span data-store-render data-store-discount="percentage"></span>
   </bd-badge>
 </div>
@@ -76,9 +78,9 @@ class PricingCardPricing extends LitElement {
                 <span data-store-render data-store-price="discounted||full"></span>/month
               </bd-h>
 
-              <bd-p kind="small" class="terms">
+              <bd-p variant="small" class="terms">
                 First year price. Plus applicable sales tax. See
-          <bd-link href="#" target="_blank" font-size="14px" color="var(--color-neutral-900)" underline>
+          <bd-link href="#" target="_blank" font-size="sm" color="strong" underline>
             terms of use
           </bd-link>
               </bd-p>

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

@@ -2,12 +2,20 @@ import { css } from "lit";
 
 export default css`
  .show-more-toggle {
-      display: block;
+      /* flex, not block, because the + and - are icon atoms now rather than
+         characters in the label. A glyph sat on the text baseline and was
+         centred by text-align; an atom is an inline-flex box of its own, so the
+         button aligns it against the label instead. gap replaces the space that
+         used to be part of the string. */
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--spacing-8);
       background: none;
       border: none;
-      color: var(--color-blue-600);
+      color: var(--color-text-brand);
       cursor: pointer;
-      font-size: var(--body-xlarge);
+      font-size: var(--typography-fontSize-lg);
       text-align: center;
       margin: 1rem auto;
        font-family: var(--typography-fontFamily-sans);

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

@@ -1,6 +1,9 @@
 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 newShowMorePricingCSS from "../pricing-cards/pricing-card-show-more.css.js";
+import "../icons/plus-icon.js";
+import "../icons/minus-icon.js";
 
 class PricingCardShowMore extends LitElement {
   static properties = {
@@ -20,7 +23,9 @@ class PricingCardShowMore extends LitElement {
   render() {
     return html`
       <button @click="${this.toggleFeatures}" class="show-more-toggle">
-        ${this.expanded ? '− Hide features' : '+ Show more features'}
+        ${this.expanded
+          ? html`<bd-minus-icon aria-hidden="true"></bd-minus-icon>Hide features`
+          : html`<bd-plus-icon aria-hidden="true"></bd-plus-icon>Show more features`}
       </button>
       ${this.expanded
         ? html`<div class="feature-items"><slot></slot></div>`
@@ -28,6 +33,6 @@ class PricingCardShowMore extends LitElement {
     `;
   }
 }
-PricingCardShowMore.styles = [tokens, newShowMorePricingCSS];
+PricingCardShowMore.styles = [newShowMorePricingCSS];
 
 customElements.define('pricing-card-show-more', PricingCardShowMore);