@boostdev/design-system-components 1.1.1 → 1.2.0

package/dist/web-components/chunk-YLVTEY23.js

@@ -0,0 +1,165 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/bds-toast-provider.ts
+var BdsToastProvider = class extends i2 {
+  static styles = i`
+    :host {
+      display: contents;
+    }
+
+    .container {
+      /* Reset UA popover defaults */
+      position: fixed;
+      inset: unset;
+      bottom: var(--bds-space_xl, 2rem);
+      right: var(--bds-space_xl, 2rem);
+      display: flex;
+      flex-direction: column;
+      gap: var(--bds-space_m, 1rem);
+      border: none;
+      padding: 0;
+      background: transparent;
+    }
+
+    .toast {
+      padding: var(--bds-space_m) var(--bds-space_l);
+      background-color: var(--toast_color, var(--bds-color_bg));
+      color: var(--toast_on-color, var(--bds-color_on-bg));
+      border-radius: var(--bds-border_radius--s);
+      box-shadow: var(--bds-shadow_s);
+      display: flex;
+      align-items: center;
+      gap: var(--bds-space_m);
+      min-width: 300px;
+    }
+
+    .toast.--variant_success {
+      --toast_color:    var(--bds-color_success);
+      --toast_on-color: var(--bds-color_on-success);
+    }
+
+    .toast.--variant_warning {
+      --toast_color:    var(--bds-color_warning);
+      --toast_on-color: var(--bds-color_on-warning);
+    }
+
+    .toast.--variant_info {
+      --toast_color:    var(--bds-color_bg--subtle);
+      --toast_on-color: var(--bds-color_on-bg--subtle);
+    }
+
+    .toast.--variant_error {
+      --toast_color:    var(--bds-color_error);
+      --toast_on-color: var(--bds-color_on-error);
+    }
+
+    .message {
+      flex: 1;
+    }
+
+    .close {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      width: 1.25rem;
+      height: 1.25rem;
+      padding: 0;
+      background: none;
+      border: none;
+      cursor: pointer;
+      color: var(--toast_on-color);
+    }
+
+    .close svg {
+      width: 1rem;
+      height: 1rem;
+    }
+  `;
+  static properties = {
+    _toasts: { state: true }
+  };
+  constructor() {
+    super();
+    this._toasts = [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("bds-show-toast", this._onShowToastEvent);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("bds-show-toast", this._onShowToastEvent);
+  }
+  // Sync the popover's top-layer visibility with the toast queue —
+  // mirrors Toast.tsx's useEffect([toasts.length]).
+  updated() {
+    const container = this.shadowRoot?.querySelector("[popover]");
+    if (!container) return;
+    if (this._toasts.length > 0) {
+      container.showPopover?.();
+    } else {
+      try {
+        container.hidePopover?.();
+      } catch {
+      }
+    }
+  }
+  showToast(message, variant = "info") {
+    const id = Math.random().toString(36).slice(2, 9);
+    this._toasts = [...this._toasts, { id, message, variant }];
+    setTimeout(() => this._removeToast(id), 5e3);
+  }
+  _removeToast(id) {
+    this._toasts = this._toasts.filter((t) => t.id !== id);
+  }
+  _onShowToastEvent = (e) => {
+    const { message, variant } = e.detail ?? {};
+    if (message) this.showToast(message, variant);
+  };
+  static show(message, variant) {
+    const provider = document.querySelector("bds-toast-provider");
+    provider?.showToast(message, variant ?? "info");
+  }
+  render() {
+    return T`
+      <slot></slot>
+      <div
+        popover="manual"
+        role="region"
+        aria-label="Notifications"
+        class="container"
+      >
+        ${this._toasts.map((t) => T`
+          <div
+            class="toast --variant_${t.variant}"
+            role="status"
+            aria-live="polite"
+            aria-atomic="true"
+          >
+            <span class="message">${t.message}</span>
+            <button
+              type="button"
+              class="close"
+              @click=${() => this._removeToast(t.id)}
+              aria-label="Dismiss"
+            >
+              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M18 6L6 18M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+};
+customElements.define("bds-toast-provider", BdsToastProvider);
+
+export {
+  BdsToastProvider
+};

package/dist/web-components/chunk-YRXCVKHV.js

@@ -0,0 +1,116 @@
+import {
+  A,
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-card.ts
+var BdsCard = class extends i2 {
+  static styles = i`
+    :host {
+      display: block;
+    }
+
+    .card {
+      background-color: var(--card_color, var(--bds-color_bg));
+      color: var(--card_on-color, var(--bds-color_on-bg));
+      border-radius: var(--bds-border_radius--m);
+      transition: all 0.3s ease;
+      position: relative;
+      box-sizing: border-box;
+      inline-size: 100%;
+      text-align: inherit;
+      font: inherit;
+      border: none;
+    }
+
+    .card.--default  { box-shadow: var(--bds-shadow_s); }
+    .card.--elevated { box-shadow: var(--bds-shadow_m); }
+
+    .card.--outlined {
+      --bdc_color: currentcolor;
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s);
+    }
+
+    .card.--padding-none   { padding: 0; }
+    .card.--padding-small  { padding: var(--bds-space_s); }
+    .card.--padding-medium { padding: var(--bds-space_m); }
+    .card.--padding-large  { padding: var(--bds-space_l); }
+
+    .card.--text-start  { text-align: start; }
+    .card.--text-center { text-align: center; }
+    .card.--text-end    { text-align: end; }
+
+    .card.--clickable {
+      cursor: pointer;
+      display: block;
+    }
+
+    .card.--clickable:focus-visible {
+      outline: 2px solid var(--color_focus, currentcolor);
+      outline-offset: 2px;
+    }
+
+    .card.--clickable:active {
+      transform: translateY(0);
+      box-shadow: var(--bds-shadow_s);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .card.--clickable:hover {
+        transform: translateY(-2px);
+        box-shadow: var(--bds-shadow_xl);
+      }
+
+      .card.--default:hover  { box-shadow: var(--bds-shadow_m); }
+      .card.--elevated:hover { box-shadow: var(--bds-shadow_2xl); }
+      .card.--outlined:hover { box-shadow: var(--bds-shadow_s); }
+    }
+  `;
+  static properties = {
+    variant: { type: String, reflect: true },
+    padding: { type: String, reflect: true },
+    textAlign: { type: String, attribute: "text-align", reflect: true },
+    clickable: { type: Boolean, reflect: true },
+    ariaLabel: { type: String, attribute: "aria-label" }
+  };
+  constructor() {
+    super();
+    this.variant = "default";
+    this.padding = "medium";
+    this.textAlign = "start";
+    this.clickable = false;
+    this.ariaLabel = "";
+  }
+  _handleClick() {
+    this.dispatchEvent(new CustomEvent("bds-click", { bubbles: true, composed: true }));
+  }
+  render() {
+    const classes = [
+      "card",
+      `--${this.variant}`,
+      `--padding-${this.padding}`,
+      `--text-${this.textAlign}`,
+      this.clickable ? "--clickable" : ""
+    ].filter(Boolean).join(" ");
+    if (this.clickable) {
+      return T`
+        <button
+          type="button"
+          class=${classes}
+          @click=${this._handleClick}
+          aria-label=${this.ariaLabel || A}
+        >
+          <slot></slot>
+        </button>
+      `;
+    }
+    return T`<div class=${classes}><slot></slot></div>`;
+  }
+};
+customElements.define("bds-card", BdsCard);
+
+export {
+  BdsCard
+};

package/dist/web-components/chunk-ZTC6GRP7.js

@@ -0,0 +1,64 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/bds-accordion.ts
+var BdsAccordion = class extends i2 {
+  static styles = i`
+    :host {
+      display: block;
+      --bdc_color: var(--bds-color_bg--subtle);
+      --bdc-outline_radius: var(--bds-border_radius--s);
+      border-radius: var(--accordion_radius, var(--bdc-outline_radius));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
+      overflow: hidden;
+    }
+  `;
+  static properties = {
+    allowMultiple: { type: Boolean, attribute: "allow-multiple", reflect: true }
+  };
+  _mo = null;
+  constructor() {
+    super();
+    this.allowMultiple = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("bds-accordion-item-toggle", this._handleItemToggle);
+    this._mo = new MutationObserver(() => this._discoverItems());
+    this._mo.observe(this, { childList: true, subtree: false });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("bds-accordion-item-toggle", this._handleItemToggle);
+    this._mo?.disconnect();
+    this._mo = null;
+  }
+  get _items() {
+    return [...this.querySelectorAll("bds-accordion-item")];
+  }
+  _discoverItems() {
+    this.requestUpdate();
+  }
+  _handleItemToggle = (e) => {
+    const toggled = e.target;
+    const items = this._items;
+    const wasOpen = toggled.open;
+    if (!this.allowMultiple) {
+      items.forEach((item) => {
+        item.open = false;
+      });
+    }
+    toggled.open = !wasOpen;
+  };
+  render() {
+    return T`<slot></slot>`;
+  }
+};
+customElements.define("bds-accordion", BdsAccordion);
+
+export {
+  BdsAccordion
+};

package/dist/web-components/globals.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/web-components/globals.js

@@ -0,0 +1 @@
+import "./chunk-DZRSJGPB.js";

package/dist/web-components/index.d.ts

@@ -0,0 +1,41 @@
+export { BdsBadge } from './ui/bds-badge.js';
+export { BdsButton } from './interaction/bds-button.js';
+export { BdsAlert } from './ui/bds-alert.js';
+export { BdsPopover } from './interaction/bds-popover.js';
+export { BdsToastProvider } from './interaction/bds-toast-provider.js';
+export { BdsSeparator } from './ui/bds-separator.js';
+export { BdsSkeleton } from './ui/bds-skeleton.js';
+export { BdsLoading } from './ui/bds-loading.js';
+export { BdsAvatar } from './ui/bds-avatar.js';
+export { BdsTypography } from './ui/bds-typography.js';
+export { BdsProgress } from './ui/bds-progress.js';
+export { BdsProgressCircle } from './ui/bds-progress-circle.js';
+export { BdsRating } from './ui/bds-rating.js';
+export { BdsCollapsible } from './interaction/bds-collapsible.js';
+export { BdsAccordionItem } from './interaction/bds-accordion-item.js';
+export { BdsAccordion } from './interaction/bds-accordion.js';
+export { BdsTab } from './interaction/bds-tab.js';
+export { BdsTabPanel } from './interaction/bds-tab-panel.js';
+export { BdsTabs } from './interaction/bds-tabs.js';
+export { BdsTooltip } from './interaction/bds-tooltip.js';
+export { BdsSkipLink } from './interaction/bds-skip-link.js';
+export { BdsDialog } from './interaction/bds-dialog.js';
+export { BdsDrawer } from './interaction/bds-drawer.js';
+export { BdsCheckbox } from './interaction/form/bds-checkbox.js';
+export { BdsRadio } from './interaction/form/bds-radio.js';
+export { BdsSwitch } from './interaction/form/bds-switch.js';
+export { BdsSelect } from './interaction/form/bds-select.js';
+export { BdsTextarea } from './interaction/form/bds-textarea.js';
+export { BdsNumberInput } from './interaction/form/bds-number-input.js';
+export { BdsSlider } from './interaction/form/bds-slider.js';
+export { BdsSegmentedControl } from './interaction/form/bds-segmented-control.js';
+export { BdsFileInput } from './interaction/form/bds-file-input.js';
+export { BdsCombobox } from './interaction/form/bds-combobox.js';
+export { BdsNotificationBanner } from './ui/bds-notification-banner.js';
+export { BdsCard } from './ui/bds-card.js';
+export { BdsSectionHeader } from './ui/bds-section-header.js';
+export { BdsIconWrapper } from './ui/bds-icon-wrapper.js';
+export { BdsDescriptionList } from './ui/bds-description-list.js';
+export { BdsBreadcrumb } from './ui/bds-breadcrumb.js';
+export { BdsLink } from './ui/bds-link.js';
+import 'lit';

package/dist/web-components/index.js

@@ -0,0 +1,165 @@
+import {
+  BdsSwitch
+} from "./chunk-XNA6WTXG.js";
+import {
+  BdsTextarea
+} from "./chunk-EBJM3VD4.js";
+import {
+  BdsCheckbox
+} from "./chunk-T6AETZRP.js";
+import {
+  BdsCombobox
+} from "./chunk-QLZ2362S.js";
+import {
+  BdsFileInput
+} from "./chunk-PY62FTRW.js";
+import {
+  BdsNumberInput
+} from "./chunk-JUKB3BUP.js";
+import {
+  BdsRadio
+} from "./chunk-HHHRF2PS.js";
+import {
+  BdsSegmentedControl
+} from "./chunk-6MH5UWUD.js";
+import {
+  BdsSelect
+} from "./chunk-X3FKVHLK.js";
+import {
+  BdsSlider
+} from "./chunk-7FMR53BW.js";
+import {
+  BdsDrawer
+} from "./chunk-DI46Q2EA.js";
+import {
+  BdsPopover
+} from "./chunk-ECW3HHWA.js";
+import {
+  BdsSkipLink
+} from "./chunk-BQLZ7I4G.js";
+import {
+  BdsTab
+} from "./chunk-6I3CFC26.js";
+import {
+  BdsTabPanel
+} from "./chunk-OQTRTMAB.js";
+import {
+  BdsTabs
+} from "./chunk-L3XHOMN6.js";
+import {
+  BdsToastProvider
+} from "./chunk-YLVTEY23.js";
+import {
+  BdsTooltip
+} from "./chunk-HGBNDR22.js";
+import {
+  BdsSeparator
+} from "./chunk-VMMVWLXL.js";
+import {
+  BdsSkeleton
+} from "./chunk-2QA62WCQ.js";
+import {
+  BdsTypography
+} from "./chunk-SOQQ7RVJ.js";
+import {
+  BdsAccordion
+} from "./chunk-ZTC6GRP7.js";
+import {
+  BdsAccordionItem
+} from "./chunk-UFFCKVZE.js";
+import {
+  BdsButton
+} from "./chunk-3REOIRDW.js";
+import {
+  BdsCollapsible
+} from "./chunk-5IPHEONG.js";
+import {
+  BdsDialog
+} from "./chunk-N6IMUOY4.js";
+import {
+  BdsIconWrapper
+} from "./chunk-5TFWOPLH.js";
+import {
+  BdsLink
+} from "./chunk-CR5PGUHV.js";
+import {
+  BdsLoading
+} from "./chunk-5R6IFELV.js";
+import {
+  BdsNotificationBanner
+} from "./chunk-AJSXNDAP.js";
+import {
+  BdsProgress
+} from "./chunk-ITHLKR7Q.js";
+import {
+  BdsProgressCircle
+} from "./chunk-QDST57JC.js";
+import {
+  BdsRating
+} from "./chunk-LY62SAVN.js";
+import {
+  BdsSectionHeader
+} from "./chunk-Y4MAXTMA.js";
+import "./chunk-QPOKHLMQ.js";
+import "./chunk-DZRSJGPB.js";
+import {
+  BdsAlert
+} from "./chunk-BX3IPVOB.js";
+import {
+  BdsAvatar
+} from "./chunk-57TRNCWQ.js";
+import {
+  BdsBadge
+} from "./chunk-OHUTLSIQ.js";
+import {
+  BdsBreadcrumb
+} from "./chunk-Q4T5BJT6.js";
+import {
+  BdsCard
+} from "./chunk-YRXCVKHV.js";
+import {
+  BdsDescriptionList
+} from "./chunk-AGKJTMJI.js";
+import "./chunk-LGEZYFUU.js";
+export {
+  BdsAccordion,
+  BdsAccordionItem,
+  BdsAlert,
+  BdsAvatar,
+  BdsBadge,
+  BdsBreadcrumb,
+  BdsButton,
+  BdsCard,
+  BdsCheckbox,
+  BdsCollapsible,
+  BdsCombobox,
+  BdsDescriptionList,
+  BdsDialog,
+  BdsDrawer,
+  BdsFileInput,
+  BdsIconWrapper,
+  BdsLink,
+  BdsLoading,
+  BdsNotificationBanner,
+  BdsNumberInput,
+  BdsPopover,
+  BdsProgress,
+  BdsProgressCircle,
+  BdsRadio,
+  BdsRating,
+  BdsSectionHeader,
+  BdsSegmentedControl,
+  BdsSelect,
+  BdsSeparator,
+  BdsSkeleton,
+  BdsSkipLink,
+  BdsSlider,
+  BdsSwitch,
+  BdsTab,
+  BdsTabPanel,
+  BdsTabs,
+  BdsTextarea,
+  BdsToastProvider,
+  BdsTooltip,
+  BdsTypography
+};

package/dist/web-components/interaction/bds-accordion-item.d.ts

@@ -0,0 +1,54 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-accordion-item>` — child element of `<bds-accordion>`.
+ *
+ * Manages a single collapsible panel. The `open` and `disabled` state is
+ * controlled by the parent `<bds-accordion>` element.
+ *
+ * Attributes:
+ *   open     — boolean; whether the panel is expanded
+ *   disabled — boolean; prevents the user from toggling this item
+ *
+ * Slots:
+ *   header   — the always-visible trigger label
+ *   (default) — the content revealed when open
+ *
+ * Events:
+ *   bds-accordion-item-toggle — fired (bubbles, composed) when the trigger
+ *                               button is clicked; the parent accordion handles
+ *                               the state change.
+ *
+ * @example
+ * <bds-accordion-item>
+ *   <span slot="header">Question</span>
+ *   <p>Answer content</p>
+ * </bds-accordion-item>
+ */
+declare class BdsAccordionItem extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    open: boolean;
+    disabled: boolean;
+    private readonly _uid;
+    constructor();
+    private _handleTriggerClick;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-accordion-item': BdsAccordionItem;
+    }
+}
+
+export { BdsAccordionItem };

package/dist/web-components/interaction/bds-accordion-item.js

@@ -0,0 +1,7 @@
+import {
+  BdsAccordionItem
+} from "../chunk-UFFCKVZE.js";
+import "../chunk-LGEZYFUU.js";
+export {
+  BdsAccordionItem
+};

package/dist/web-components/interaction/bds-accordion.d.ts

@@ -0,0 +1,50 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-accordion>` — framework-agnostic Accordion custom element.
+ *
+ * Contains `<bds-accordion-item>` children. Coordinates open/closed state
+ * across items; by default only one item is open at a time.
+ *
+ * Attributes:
+ *   allow-multiple — boolean; when set, multiple items can be open simultaneously
+ *
+ * @example
+ * <bds-accordion>
+ *   <bds-accordion-item>
+ *     <span slot="header">Question 1</span>
+ *     <p>Answer 1</p>
+ *   </bds-accordion-item>
+ *   <bds-accordion-item>
+ *     <span slot="header">Question 2</span>
+ *     <p>Answer 2</p>
+ *   </bds-accordion-item>
+ * </bds-accordion>
+ */
+declare class BdsAccordion extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        allowMultiple: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+    };
+    allowMultiple: boolean;
+    private _mo;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get _items();
+    private _discoverItems;
+    private _handleItemToggle;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-accordion': BdsAccordion;
+    }
+}
+
+export { BdsAccordion };

package/dist/web-components/interaction/bds-accordion.js

@@ -0,0 +1,7 @@
+import {
+  BdsAccordion
+} from "../chunk-ZTC6GRP7.js";
+import "../chunk-LGEZYFUU.js";
+export {
+  BdsAccordion
+};