@repobit/dex-system-design 0.23.8 → 0.23.10

package/src/components/accordion/accordion.css.js

@@ -1,73 +1,239 @@
 import { css } from "lit";
 
+/**
+ * bd-accordion-item — tokens scoped with `:host-context(...)` so vars resolve on
+ * this host (slotted rules from the section do not). Default + `default-blue` =
+ * parent is not `variant="small"` (tuned title/body colors for light tinted bgs).
+ */
 export const accordionItem = css`
   :host {
     display: block;
-    margin-bottom: var(--spacing-8);
+    margin-bottom: var(--bd-acc-item-margin-bottom, var(--spacing-8));
+    box-sizing: border-box;
+    border-radius: var(--radius-sm);
+  }
+
+  :host([data-bd-acc-focus]) {
+    outline: none;
+    box-shadow: var(--focus-outline-primary);
+    position: relative;
+    z-index: 1;
+  }
+
+  :host(:last-child) {
+    margin-bottom: 0;
+  }
+
+  /* Default / non-small — panel body = 14px (fontSize-sm), titles 16px semibold */
+  :host-context(bd-accordion-section:not([variant="small"])) {
+    --bd-acc-title-font-size: var(--typography-fontSize-base);
+    --bd-acc-title-font-weight: var(--typography-fontWeight-semibold);
+    --bd-acc-title-line-height: var(--typography-lineHeight-normal);
+    --bd-acc-title-color-expanded: var(--color-neutral-900);
+    --bd-acc-title-color-collapsed: var(--color-neutral-900);
+    --bd-acc-panel-font-size: var(--typography-fontSize-sm);
+    --bd-acc-panel-font-weight: var(--typography-fontWeight-normal);
+    --bd-acc-panel-line-height: var(--typography-lineHeight-normal);
+    --bd-acc-panel-color: var(--color-neutral-800);
+  }
+
+  /* default-blue: titles blue-600 on blue-50 for stronger contrast (AA vs blue-500) */
+  :host-context(bd-accordion-section[variant="default-blue"]) {
+    --bd-acc-title-color-expanded: var(--color-blue-600);
+    --bd-acc-title-color-collapsed: var(--color-blue-600);
+  }
+
+  /* Small variant — title colors below (collapsed neutral-900; expanded blue-800; hover blue-500) */
+  :host-context(bd-accordion-section[variant="small"]) {
+    --bd-acc-header-padding: var(--spacing-12) var(--spacing-8);
+    --bd-acc-header-margin-bottom: var(--spacing-0);
+    --bd-acc-icon-gap: var(--spacing-12);
+    --bd-acc-toggle-size: var(--icon-sm-size);
+    --bd-acc-title-font-size: var(--typography-fontSize-xs);
+    --bd-acc-title-font-weight: var(--typography-fontWeight-semibold);
+    --bd-acc-title-line-height: 1.3;
+    --bd-acc-panel-font-size: var(--typography-fontSize-xs);
+    --bd-acc-panel-font-weight: var(--typography-fontWeight-normal);
+    --bd-acc-panel-line-height: 1.3;
+    --bd-acc-panel-color: var(--color-neutral-800);
+    --bd-acc-panel-padding: var(--spacing-0) var(--spacing-8) var(--spacing-8)
+      var(--spacing-36);
+    --bd-acc-panel-paragraph-gap: var(--spacing-0);
+    --bd-acc-item-margin-bottom: var(--spacing-0);
   }
 
   .header {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
+    width: 100%;
+    padding: var(--bd-acc-header-padding, var(--spacing-0));
+    border: none;
+    background: none;
+    text-align: left;
     cursor: pointer;
-    color: var(--color-blue-600);
+    gap: var(--bd-acc-icon-gap, var(--spacing-12));
     font-family: var(--typography-fontFamily-sans);
-    font-weight: var(--typography-fontWeight-bold);
-    font-size: var(--typography-label-small-fontSize);
-    margin-bottom: var(--spacing-8);
+    font-style: normal;
+    font-size: var(--bd-acc-title-font-size, var(--typography-label-small-fontSize));
+    font-weight: var(
+      --bd-acc-title-font-weight,
+      var(--typography-fontWeight-semibold)
+    );
+    line-height: var(--bd-acc-title-line-height, var(--typography-lineHeight-normal));
+    margin-bottom: var(--bd-acc-header-margin-bottom, var(--spacing-8));
+  }
+
+  .header:focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
+
+  .header[aria-expanded="true"] .title {
+    color: var(--bd-acc-title-color-expanded, var(--color-neutral-900));
+  }
+
+  .header[aria-expanded="false"] .title {
+    color: var(--bd-acc-title-color-collapsed, var(--color-neutral-900));
+  }
+
+  :host-context(bd-accordion-section[variant="small"])
+    .header[aria-expanded="false"]
+    .title {
+    color: var(--color-neutral-900);
+  }
+
+  :host-context(bd-accordion-section[variant="small"])
+    .header[aria-expanded="false"]:hover
+    .title {
+    color: var(--color-blue-500);
+  }
+
+  :host-context(bd-accordion-section[variant="small"])
+    .header[aria-expanded="true"]
+    .title {
+    color: var(--color-blue-800);
+  }
+
+  :host-context(bd-accordion-section[variant="small"])
+    .header[aria-expanded="true"]:hover
+    .title {
+    color: var(--color-blue-500);
   }
 
   .toggle {
-    font-size: 1.25rem;
-    margin-right: 0.5rem;
-    width: 1.25rem;
-    text-align: center;
+    flex-shrink: 0;
+    width: var(--bd-acc-toggle-size, var(--icon-sm-size));
+    min-width: var(--bd-acc-toggle-size, var(--icon-sm-size));
+    height: var(--bd-acc-toggle-size, var(--icon-sm-size));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
     user-select: none;
+    /* First-line alignment: icon sits in first line box, not vertically centered on wrapped title */
+    margin-top: calc(
+      (
+          var(--bd-acc-title-line-height, var(--typography-lineHeight-normal)) * 1em -
+          var(--bd-acc-toggle-size, var(--icon-sm-size))
+        ) / 2
+    );
+  }
+
+  .toggle img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
   }
 
   .title {
     flex: 1;
+    font-weight: var(
+      --bd-acc-title-font-weight,
+      var(--typography-fontWeight-semibold)
+    );
   }
 
   .content {
-    padding-left: 1.75rem;
-    display: none;
-    font-size: var(--typography-label-small-fontSize);
+    padding: var(
+      --bd-acc-panel-padding,
+      0 0 0 calc(var(--icon-sm-size) + var(--spacing-12))
+    );
     font-family: var(--typography-fontFamily-sans);
+    font-size: var(--bd-acc-panel-font-size, var(--typography-fontSize-sm));
+    font-weight: var(
+      --bd-acc-panel-font-weight,
+      var(--typography-fontWeight-normal)
+    );
+    line-height: var(
+      --bd-acc-panel-line-height,
+      var(--typography-lineHeight-normal)
+    );
+    color: var(--bd-acc-panel-color, var(--color-neutral-700));
   }
 
-  :host([open]) .content {
-    display: block;
+  .content[hidden] {
+    display: none !important;
   }
+
   ::slotted(p) {
-    margin-bottom: var(--spacing-16);
-    font-size: var(--typography-label-small-fontSize);
-    font-family: var(--typography-fontFamily-sans);
-    margin-top: 0px;
+    margin-top: 0;
+    margin-bottom: var(--bd-acc-panel-paragraph-gap, var(--spacing-16));
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    color: inherit;
+  }
+
+  ::slotted(p:last-child) {
+    margin-bottom: 0;
   }
 `;
 
 export const accordionSection = css`
   :host {
     display: block;
-    background-color: var(--color-neutral-25);
-    padding: var(--spacing-32);
+    background-color: var(--bd-acc-section-bg, var(--color-neutral-25));
+    padding: var(--bd-acc-section-padding, var(--spacing-32));
+    box-sizing: border-box;
+  }
+
+  :host([variant="small"]) {
+    --bd-acc-section-bg: var(--color-neutral-0);
+    --bd-acc-section-padding: var(--spacing-24) var(--spacing-16);
+  }
+
+  :host([variant="default-blue"]) {
+    --bd-acc-section-bg: var(--color-blue-50);
+  }
+
+  /* Light tinted section bgs (neutral-25, blue-50): footnote link */
+  :host(:not([variant="small"])) .user-guide-link {
+    color: var(--color-blue-700);
   }
 
   .section-title {
-    margin-bottom: var(--spacing-32);
+    margin-bottom: var(--spacing-24);
     margin-top: var(--spacing-0);
-    font-weight: 600;
     font-family: var(--typography-fontFamily-sans);
     font-weight: var(--typography-fontWeight-bold);
     font-size: var(--typography-body-regular-fontSize);
+    line-height: var(--typography-lineHeight-normal);
+    color: var(--color-neutral-900);
   }
+
+  :host([variant="small"]) .section-title {
+    font-size: var(--typography-fontSize-lg);
+    margin-bottom: var(--spacing-16);
+  }
+
   .user-guide-link {
-    margin-top: 16px;
-    font-family: Arial, sans-serif;
-    font-size: 12px;
+    margin-top: var(--spacing-16);
+    font-family: var(--typography-fontFamily-sans);
+    font-size: var(--typography-fontSize-xs);
     color: var(--color-blue-600);
-    margin-left: 5px;
+    margin-left: var(--spacing-8);
   }
 
   .user-guide-link a {
@@ -75,14 +241,19 @@ export const accordionSection = css`
     align-items: center;
     text-decoration: none;
     color: inherit;
-    gap: 6px;
+    gap: var(--spacing-6);
+  }
+
+  .user-guide-link a:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-outline-primary);
+    border-radius: var(--radius-sm);
   }
 
   .user-guide-link .icon img {
     display: block;
-    width: 16px;
-    height: 14px;
+    width: var(--dimension-16px);
+    height: var(--dimension-16px);
     object-fit: contain;
   }
 `;
-

package/src/components/accordion/accordion.js

@@ -1,31 +1,71 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
+import {
+  ACCORDION_ICON_MINUS,
+  ACCORDION_ICON_PLUS
+} from "./accordion-indicators.js";
 import { accordionItem, accordionSection } from "./accordion.css.js";
 
 export class BdAccordionItem extends LitElement {
   static styles = [tokens, accordionItem];
 
   static properties = {
-    open : { type: Boolean, reflect: true },
-    title: { type: String }
+    open    : { type: Boolean, reflect: true },
+    title   : { type: String },
+    _panelId: { type: String, state: true }
   };
 
   constructor() {
     super();
     this.open = false;
+    this.title = "";
+    this._panelId = `acc-panel-${Math.random().toString(36)
+      .slice(2, 11)}`;
   }
 
   toggle() {
     this.open = !this.open;
   }
 
+  /** Whole-host focus ring (:has(:focus-visible) is unreliable on shadow hosts in some engines). */
+  _onTriggerFocusIn() {
+    const btn = this.renderRoot?.querySelector(".header");
+    if (!btn) return;
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (btn.matches(":focus-visible")) {
+          this.setAttribute("data-bd-acc-focus", "");
+        }
+      });
+    });
+  }
+
+  _onTriggerFocusOut() {
+    this.removeAttribute("data-bd-acc-focus");
+  }
+
   render() {
     return html`
-      <div class="header" @click=${this.toggle}>
-        <div class="toggle">${this.open ? "−" : "+"}</div>
-        <div class="title">${this.title}</div>
-      </div>
-      <div class="content">
+      <button
+        type="button"
+        class="header"
+        aria-expanded="${this.open}"
+        aria-controls="${this._panelId}"
+        @click=${this.toggle}
+        @focusin=${this._onTriggerFocusIn}
+        @focusout=${this._onTriggerFocusOut}
+      >
+        <span class="toggle" aria-hidden="true">
+          <img
+            src=${this.open ? ACCORDION_ICON_MINUS : ACCORDION_ICON_PLUS}
+            width="16"
+            height="16"
+            alt=""
+          />
+        </span>
+        <span class="title">${this.title}</span>
+      </button>
+      <div id="${this._panelId}" class="content" ?hidden=${!this.open}>
         <slot></slot>
       </div>
     `;
@@ -33,10 +73,16 @@ export class BdAccordionItem extends LitElement {
 }
 
 export class BdAccordionSection extends LitElement {
-  static styles = accordionSection;
+  static styles = [tokens, accordionSection];
 
   static properties = {
     title     : { type: String },
+    /**
+     * `small` — system requirements, terms (12px triggers, compact panels; Figma accordeon_small).
+     * `default` — neutral-25 section background.
+     * `default-blue` — same accordion as default, section bg `--color-blue-50`.
+     */
+    variant   : { type: String, reflect: true },
     guideIcon : { type: String, reflect: true, attribute: "guide-icon" },
     guideLabel: { type: String, reflect: true, attribute: "guide-label" },
     guideHref : { type: String, reflect: true, attribute: "guide-href" }
@@ -45,36 +91,32 @@ export class BdAccordionSection extends LitElement {
   constructor() {
     super();
     this.title = "";
-    this.guideIcon =
-      "/assets/user_guide.png";
+    this.variant = "default";
+    this.guideIcon = "";
     this.guideLabel = "";
     this.guideHref = "#";
   }
 
-
-
-
   render() {
     return html`
-    ${this.title
-      ? html`<h2 class="section-title">
-          ${this.title}
-        </h2>`
-      : ""}
-    <slot></slot>
-    ${this.guideLabel
-      ? html`<p class="user-guide-link">
-          <a href=${this.guideHref}>
-            ${this.guideIcon
-              ? html`<span class="icon"><img src=${this.guideIcon} alt="" /></span>`
-              : ""}
-            ${this.guideLabel}
-          </a>
-        </p>`
-      : ""}
-  `;
+      ${this.title
+        ? html`<h2 class="section-title">${this.title}</h2>`
+        : ""}
+      <slot></slot>
+      ${this.guideLabel
+        ? html`<p class="user-guide-link">
+            <a href=${this.guideHref}>
+              ${this.guideIcon
+                ? html`<span class="icon"
+                    ><img src=${this.guideIcon} alt="" /></span
+                  >`
+                : ""}
+              ${this.guideLabel}
+            </a>
+          </p>`
+        : ""}
+    `;
   }
-
 }
 
 customElements.define("bd-accordion-item", BdAccordionItem);