@repobit/dex-system-design 0.25.12 → 0.26.0

package/src/components/icons/quote-icon.js

@@ -1,28 +1,28 @@
 // icons/quote-icon.js
-import { LitElement, css, html } from "lit";
+import { html } from "lit";
+import { BdIconElement } from "./icon-element.js";
 
-class QuoteIcon extends LitElement {
+/**
+ * An opening quotation mark, drawn as a path.
+ *
+ * It used to be a "“" character in an SVG <text> element at Helvetica
+ * 128px: type being asked to draw a picture, so its shape depended on which
+ * Helvetica the platform had, and its colour was a hex of its own
+ * (#2E6BF6) rather than the ink it sits in. Now it extends BdIconElement like
+ * every sibling -- sized from the icon scale, drawn in currentColor.
+ */
+class QuoteIcon extends BdIconElement {
+  static defaultSize = "xl";
 
-  static properties = {
-    width : { type: Number },
-    height: { type: Number },
-    color : { type: String }
-  };
-
-  constructor() {
-    super();
-    this.width = 51;
-    this.height = 52;
-    this.color = "#2E6BF6";
-  }
-
-  static styles = css`:host { display: inline-flex; }`;
   render() {
     return html`
-      <svg xmlns="http://www.w3.org/2000/svg" width="${this.width}" height="${this.height}" viewBox="0 0 51 52" aria-hidden="true">
-        <text fill="${this.color}" font-size="128" font-family="Helvetica"><tspan x="0" y="99">&#8220;</tspan></text>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <path d="M3 19.5V13c0-4.4 2.2-7.6 6.5-9.2l.9 1.9C7.9 6.9 6.8 8.7 6.6 11H10v8.5H3Zm11 0V13c0-4.4 2.2-7.6 6.5-9.2l.9 1.9c-2.5 1.2-3.6 3-3.8 5.3H21v8.5h-7Z" fill="currentColor"/>
       </svg>
     `;
   }
 }
-customElements.define("bd-quote-icon", QuoteIcon);
+
+customElements.define("bd-quote-icon", QuoteIcon);
+
+export { QuoteIcon };

package/src/components/image/image.css.js

@@ -31,23 +31,35 @@ export default css`
 
     /* Radius Variants - Updated to match radius prop */
     .bd-img.radius-none {
-      border-radius: 0;
+      border-radius: var(--radius-none);
     }
 
     .bd-img.radius-sm {
-      border-radius: var(--radius-sm, var(--spacing-4, 0.25rem));
+      border-radius: var(--radius-sm);
     }
 
     .bd-img.radius-md {
-      border-radius: var(--radius-md, var(--spacing-8, 0.5rem));
+      border-radius: var(--radius-md);
     }
 
     .bd-img.radius-lg {
-      border-radius: var(--radius-lg, var(--spacing-12, 0.75rem));
+      border-radius: var(--radius-lg);
+    }
+
+    .bd-img.radius-xl {
+      border-radius: var(--radius-xl);
+    }
+
+    .bd-img.radius-2xl {
+      border-radius: var(--radius-2xl);
+    }
+
+    .bd-img.radius-3xl {
+      border-radius: var(--radius-3xl);
     }
 
     .bd-img.radius-full {
-      border-radius: 50%;
+      border-radius: var(--radius-full);
     }
 
     /* Shadow Variants - Updated to match shadow prop */
@@ -56,33 +68,33 @@ export default css`
     }
 
     .bd-img.shadow-sm {
-      box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+      box-shadow: var(--shadow-sm);
     }
 
     .bd-img.shadow-md {
-      box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
+      box-shadow: var(--shadow-md);
     }
 
     .bd-img.shadow-lg {
-      box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
+      box-shadow: var(--shadow-lg);
     }
 
     /* Shadow XL - Additional variant */
     .bd-img.shadow-xl {
-      box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));
+      box-shadow: var(--shadow-xl);
     }
 
     /* Border Variants - Keep for additional styling options */
     .bd-img.bordered {
-      border: 2px solid var(--color-neutral-200);
+      border: var(--border-width-2) solid var(--color-border-subtle);
     }
 
     .bd-img.bordered-primary {
-      border: 2px solid var(--color-blue-500);
+      border: var(--border-width-2) solid var(--color-border-brand);
     }
 
     .bd-img.bordered-thick {
-      border: 4px solid var(--color-neutral-300);
+      border: var(--border-width-4) solid var(--color-border-disabled);
     }
 
     /* Responsive Behavior */
@@ -107,43 +119,78 @@ export default css`
     /* Hover Effects */
     .bd-img.hover-zoom:hover {
       transform: scale(1.05);
-      transition: transform 0.3s ease;
+      transition: transform var(--transition-duration-slow) var(--transition-easing-smooth);
     }
 
     .bd-img.hover-shadow:hover {
       box-shadow: var(--shadow-lg);
-      transition: box-shadow 0.3s ease;
+      transition: box-shadow var(--transition-duration-slow) var(--transition-easing-smooth);
     }
 
-    /* Focus styles for accessibility */
-    .bd-img:focus {
-      outline: 2px solid var(--color-primary-500, #3b82f6);
-      outline-offset: 2px;
+    .bd-img:focus-visible {
+      /* the one focus ring — see Foundations/Focus */
+      outline: none;
+      box-shadow: var(--focus-outline-primary);
     }
 
     /* Loading state */
     .bd-img:not([src]) {
-      background-color: var(--color-neutral-100, #f3f4f6);
+      background-color: var(--color-surface-muted);
+      /* no token: the dimension scale stops at 64px */
       min-height: 100px;
       display: flex;
       align-items: center;
       justify-content: center;
-      color: var(--color-neutral-400, #9ca3af);
-      font-size: var(--text-sm, 0.875rem);
-    }
-
+      /* --color-text-muted, not --color-text-disabled. Loading is not disabled,
+         and the difference is not academic: the disabled text role carries a
+         contrast exemption -- WCAG 1.4.3 excuses disabled controls from the
+         4.5:1 minimum -- and this label claims that exemption without being
+         entitled to it. It is a sentence a reader is meant to read while they
+         wait.
+
+         Measured on this ground: neutral-400 on neutral-100 is 2.51:1, which
+         misses even the 3:1 floor for non-text. --color-text-muted is
+         neutral-600 at 5.12:1 and is the role this package already uses for
+         low-emphasis readable text -- caption and form help text both resolve
+         to it.
+
+         The ground stays --color-surface-muted. Loading is a state, muted is
+         the state surface, and bd-skeleton -- the package's other loading
+         affordance -- already sits on it. Only the ink was choosing by value.
+         See "Choosing a semantic role" in the package README. */
+      color: var(--color-text-muted);
+      /* no role: alt text shown when the image has no src -- a glyph/marker/placeholder box, not running
+         prose. See list-item.css.js's .bd-list-item-marker::before for the
+         argument. */
+      font-size: var(--typography-fontSize-sm);
+    }
+
+    /* The placeholder copy is a local property rather than a string in the
+       stylesheet: content: "Image loading..." cannot be translated, and this
+       atom and bd-picture used two different sentences for the same state. */
     .bd-img:not([src])::before {
-      content: "Image loading...";
+      content: var(--bd-img-loading-label, "Loading image");
     }
 
     /* Smooth transitions for radius and shadow changes */
     .bd-img {
-      transition: border-radius 0.2s ease, box-shadow 0.2s ease;
+      transition: border-radius var(--transition-duration-normal) var(--transition-easing-smooth), box-shadow var(--transition-duration-normal) var(--transition-easing-smooth);
     }
 
     /* Performance optimization for transforms */
     .bd-img.hover-zoom {
       will-change: transform;
     }
+
+    /* A hover that scales the image is the category of motion the setting
+       exists for, and this atom had no guard at all. */
+    @media (prefers-reduced-motion: reduce) {
+      .bd-img,
+      .bd-img.hover-zoom:hover,
+      .bd-img.hover-shadow:hover {
+        transition: none;
+        transform: none;
+      }
+    }
   }
 `;

package/src/components/image/image.js

@@ -1,7 +1,11 @@
-import { LitElement, html } from "lit";
-import { tokens } from "../../tokens/tokens.js";
+import { LitElement, html, nothing } from "lit";
+// Installs the design tokens into document scope; see src/tokens/tokens.js
+import "../../tokens/tokens.js";
 import imgCSS from "./image.css.js";
 
+// the radius steps image.css.js implements — the full --radius-* scale
+const RADIUS_STEPS = ['none', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', 'full'];
+
 export class BdImg extends LitElement {
   static properties = {
     src    : { type: String },
@@ -29,7 +33,8 @@ export class BdImg extends LitElement {
   render() {
     const baseClass = 'bd-img';
     const fitClass = this.fit || 'cover';
-    const radiusClass = `radius-${this.radius || 'none'}`;
+    const radius = RADIUS_STEPS.includes(this.radius) ? this.radius : 'none';
+    const radiusClass = `radius-${radius}`;
     const shadowClass = `shadow-${this.shadow || 'none'}`;
 
     const finalClass = `${baseClass} ${fitClass} ${radiusClass} ${shadowClass}`;
@@ -38,8 +43,8 @@ export class BdImg extends LitElement {
       <img
         src="${this.src}"
         alt="${this.alt}"
-        width="${this.width}"
-        height="${this.height}"
+        width="${this.width ?? nothing}"
+        height="${this.height ?? nothing}"
         loading="${this.loading}"
         class="${finalClass}"
         @load="${this._handleLoad}"
@@ -62,7 +67,7 @@ export class BdImg extends LitElement {
     }));
   }
 
-  static styles = [tokens, imgCSS];
+  static styles = [imgCSS];
 }
 
 customElements.define("bd-img", BdImg);

package/src/components/image/image.stories.js

@@ -2,7 +2,7 @@ import { html } from 'lit';
 import './image.js';
 
 export default {
-  title     : 'Components/Image',
+  title     : 'Atoms/Image',
   tags      : ['autodocs'],
   parameters: {
     docs: {
@@ -129,7 +129,7 @@ export const RadiusVariants = {
   name  : 'Radius Variants',
   render: () => html`
     <div style="display:flex; gap:16px; flex-wrap:wrap;">
-      ${['none', 'sm', 'md', 'lg', 'xl', 'full'].map(r => html`
+      ${['none', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', 'full'].map(r => html`
         <div>
           <p style="font-size:12px; margin-bottom:4px; font-weight:600;">radius-${r}</p>
           <bd-img src="${sampleSrc}" alt="radius ${r}" width="150" height="150" radius="${r}" fit="cover"></bd-img>