@boostdev/design-system-components 1.1.1 → 1.1.2

package/src/web-components/ui/bds-separator.ts

@@ -0,0 +1,66 @@
+import { LitElement, css, html } from 'lit';
+
+/**
+ * `<bds-separator>` — framework-agnostic Separator custom element.
+ *
+ * Attributes:
+ *   orientation — "horizontal" (default) | "vertical"
+ *
+ * @example
+ * <bds-separator></bds-separator>
+ * <bds-separator orientation="vertical"></bds-separator>
+ */
+export class BdsSeparator extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    :host([orientation='vertical']) {
+      display: inline-block;
+      align-self: stretch;
+    }
+
+    .separator {
+      border: none;
+      background-color: var(--separator_color, var(--bds-color_on-bg));
+      display: block;
+      inline-size: 100%;
+      block-size: var(--separator_thickness, 1px);
+    }
+
+    :host([orientation='vertical']) .separator {
+      inline-size: var(--separator_thickness, 1px);
+      block-size: 100%;
+    }
+  `;
+
+  static properties = {
+    orientation: { type: String, reflect: true },
+  };
+
+  declare orientation: 'horizontal' | 'vertical';
+
+  constructor() {
+    super();
+    this.orientation = 'horizontal';
+  }
+
+  render() {
+    return html`
+      <div
+        class="separator"
+        role="separator"
+        aria-orientation=${this.orientation}
+      ></div>
+    `;
+  }
+}
+
+customElements.define('bds-separator', BdsSeparator);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-separator': BdsSeparator;
+  }
+}

package/src/web-components/ui/bds-skeleton.spec.ts

@@ -0,0 +1,22 @@
+import { fixture, cleanup } from '../test/helpers';
+import { BdsSkeleton } from './bds-skeleton';
+
+describe('bds-skeleton', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-skeleton')).toBe(BdsSkeleton);
+  });
+
+  it('renders a skeleton element in shadow DOM', async () => {
+    const el = await fixture('<bds-skeleton></bds-skeleton>');
+    const skeleton = el.shadowRoot!.querySelector('.skeleton');
+    expect(skeleton).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('has aria-hidden="true" on the skeleton element', async () => {
+    const el = await fixture('<bds-skeleton></bds-skeleton>');
+    const skeleton = el.shadowRoot!.querySelector('.skeleton');
+    expect(skeleton!.getAttribute('aria-hidden')).toBe('true');
+    cleanup(el);
+  });
+});

package/src/web-components/ui/bds-skeleton.ts

@@ -0,0 +1,55 @@
+import { LitElement, css, html } from 'lit';
+
+/**
+ * `<bds-skeleton>` — framework-agnostic Skeleton loading placeholder custom element.
+ *
+ * No attributes. The host inherits width/height from its container or inline styles.
+ *
+ * @example
+ * <bds-skeleton style="width: 200px; height: 1rem;"></bds-skeleton>
+ */
+export class BdsSkeleton extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    .skeleton {
+      display: block;
+      background: linear-gradient(
+        90deg,
+        var(--bds-color_grey--subtle) 25%,
+        var(--bds-color_bg) 50%,
+        var(--bds-color_grey--subtle) 75%
+      );
+      background-size: 200% 100%;
+      animation: shimmer 1.5s infinite;
+      border-radius: var(--bds-border_radius--xs);
+      min-block-size: var(--bds-space_m);
+      inline-size: 100%;
+    }
+
+    @keyframes shimmer {
+      0% { background-position: 200% 0; }
+      100% { background-position: -200% 0; }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .skeleton {
+        animation: none;
+      }
+    }
+  `;
+
+  render() {
+    return html`<span class="skeleton" aria-hidden="true"></span>`;
+  }
+}
+
+customElements.define('bds-skeleton', BdsSkeleton);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-skeleton': BdsSkeleton;
+  }
+}

package/src/web-components/ui/bds-typography.spec.ts

@@ -0,0 +1,76 @@
+import { fixture, cleanup } from '../test/helpers';
+import { BdsTypography } from './bds-typography';
+
+describe('bds-typography', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-typography')).toBe(BdsTypography);
+  });
+
+  it('defaults to variant="body"', async () => {
+    const el = await fixture('<bds-typography>Text</bds-typography>');
+    expect(el.getAttribute('variant')).toBe('body');
+    cleanup(el);
+  });
+
+  it('renders a <p> element for body variant', async () => {
+    const el = await fixture('<bds-typography variant="body">Text</bds-typography>');
+    const p = el.shadowRoot!.querySelector('p');
+    expect(p).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('renders a <p> element for body_s variant', async () => {
+    const el = await fixture('<bds-typography variant="body_s">Text</bds-typography>');
+    const p = el.shadowRoot!.querySelector('p');
+    expect(p).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('renders an <h1> element for h1 variant', async () => {
+    const el = await fixture('<bds-typography variant="h1">Heading</bds-typography>');
+    const h1 = el.shadowRoot!.querySelector('h1');
+    expect(h1).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('renders an <h2> element for h2 variant', async () => {
+    const el = await fixture('<bds-typography variant="h2">Heading</bds-typography>');
+    expect(el.shadowRoot!.querySelector('h2')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('renders an <h3> element for h3 variant', async () => {
+    const el = await fixture('<bds-typography variant="h3">Heading</bds-typography>');
+    expect(el.shadowRoot!.querySelector('h3')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('renders the element with typography and variant classes', async () => {
+    const el = await fixture('<bds-typography variant="h1">Heading</bds-typography>');
+    const h1 = el.shadowRoot!.querySelector('h1');
+    expect(h1!.classList.contains('typography')).toBe(true);
+    expect(h1!.classList.contains('--h1')).toBe(true);
+    cleanup(el);
+  });
+
+  it('uses the component attribute to override the tag', async () => {
+    const el = await fixture('<bds-typography component="span">Text</bds-typography>');
+    expect(el.shadowRoot!.querySelector('span')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('renders slotted content', async () => {
+    const el = await fixture('<bds-typography>Hello world</bds-typography>');
+    expect(el.textContent?.trim()).toBe('Hello world');
+    cleanup(el);
+  });
+
+  it('reflects variant property to attribute', async () => {
+    const el = await fixture('<bds-typography>Text</bds-typography>') as BdsTypography;
+    el.variant = 'h2';
+    await el.updateComplete;
+    expect(el.getAttribute('variant')).toBe('h2');
+    expect(el.shadowRoot!.querySelector('h2')).not.toBeNull();
+    cleanup(el);
+  });
+});

package/src/web-components/ui/bds-typography.ts

@@ -0,0 +1,112 @@
+import { LitElement, css } from 'lit';
+import { html, unsafeStatic } from 'lit/static-html.js';
+
+export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body' | 'body_s';
+
+const VARIANT_TAG: Record<TypographyVariant, string> = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  body: 'p',
+  body_s: 'p',
+};
+
+/**
+ * `<bds-typography>` — framework-agnostic Typography custom element.
+ *
+ * Renders slotted content inside the appropriate semantic HTML element.
+ *
+ * Attributes:
+ *   variant   — "h1" | "h2" | "h3" | "body" (default) | "body_s"
+ *   component — override the rendered tag name (e.g. "span", "label")
+ *
+ * Slots:
+ *   (default) — text content
+ *
+ * @example
+ * <bds-typography variant="h1">Page title</bds-typography>
+ * <bds-typography variant="body_s" component="span">Small text</bds-typography>
+ */
+export class BdsTypography extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    .typography {
+      margin: 0;
+      font-family: var(--bds-font_family--body);
+      color: var(--typography_color, var(--bds-color_on-bg));
+    }
+
+    .typography.--h1 {
+      font-family: var(--bds-font_family--heading);
+      font-size: var(--bds-font_size--heading-1);
+      font-weight: var(--bds-font_weight--bold);
+      line-height: var(--bds-font_line-height--heading);
+    }
+
+    .typography.--h2 {
+      font-family: var(--bds-font_family--heading);
+      font-size: var(--bds-font_size--heading-2);
+      font-weight: var(--bds-font_weight--semibold);
+      line-height: var(--bds-font_line-height--heading);
+    }
+
+    .typography.--h3 {
+      font-family: var(--bds-font_family--heading);
+      font-size: var(--bds-font_size--heading-3);
+      font-weight: var(--bds-font_weight--semibold);
+      line-height: var(--bds-font_line-height--heading);
+    }
+
+    .typography.--body {
+      font-size: var(--bds-font_size--body);
+      line-height: var(--bds-font_line-height--body);
+    }
+
+    .typography.--body_s {
+      font-size: var(--bds-font_size--body--s);
+      line-height: var(--bds-font_line-height--body);
+    }
+  `;
+
+  static properties = {
+    variant:   { type: String, reflect: true },
+    component: { type: String },
+  };
+
+  declare variant: TypographyVariant;
+  declare component: string;
+
+  constructor() {
+    super();
+    this.variant = 'body';
+    this.component = '';
+  }
+
+  private get _tag(): string {
+    if (this.component) return this.component;
+    return VARIANT_TAG[this.variant] ?? 'p';
+  }
+
+  render() {
+    // unsafeStatic is safe here — tag values are derived from a known allowlist
+    // (VARIANT_TAG map + the `component` property which is developer-controlled).
+    const tag = unsafeStatic(this._tag);
+    const variant = unsafeStatic(this.variant);
+    return html`
+      <${tag} class="typography --${variant}">
+        <slot></slot>
+      </${tag}>
+    `;
+  }
+}
+
+customElements.define('bds-typography', BdsTypography);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-typography': BdsTypography;
+  }
+}

package/dist/web-components.d.ts

@@ -1,304 +0,0 @@
-import * as lit from 'lit';
-import { LitElement } from 'lit';
-
-type BadgeVariant = 'primary' | 'secondary' | 'success' | 'error' | 'warning';
-/**
- * `<bds-badge>` — framework-agnostic Badge custom element.
- *
- * Attributes:
- *   variant  — "primary" (default) | "secondary" | "success" | "error" | "warning"
- *
- * Slots:
- *   (default) — badge label text / content
- *
- * @example
- * <bds-badge variant="success">New</bds-badge>
- */
-declare class BdsBadge extends LitElement {
-    static styles: lit.CSSResult;
-    static properties: {
-        variant: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-    };
-    variant: BadgeVariant;
-    constructor();
-    render(): lit.TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'bds-badge': BdsBadge;
-    }
-}
-
-type ButtonVariant = 'default' | 'ghost';
-type ButtonSize = 'small' | 'medium' | 'large';
-/**
- * `<bds-button>` — framework-agnostic Button custom element.
- *
- * Attributes:
- *   variant   — "default" (filled, default) | "ghost" (transparent + outlined)
- *   size      — "small" | "medium" (default) | "large"
- *   disabled  — boolean
- *   href      — renders an <a> tag instead of <button>
- *   target    — forwarded to <a> when href is set
- *   rel       — forwarded to <a> when href is set
- *   has-pulse — boolean, enables the pulse ring animation
- *   type      — "button" (default) | "submit" | "reset"
- *
- * Slots:
- *   (default)    — button label
- *   icon-start   — icon placed before the label
- *   icon-end     — icon placed after the label
- *
- * Events:
- *   click — standard DOM click (disabled buttons suppress it and set aria-disabled)
- *
- * @example
- * <bds-button variant="ghost" size="small">
- *   <svg slot="icon-start">…</svg>
- *   Save
- * </bds-button>
- */
-declare class BdsButton extends LitElement {
-    static styles: lit.CSSResult;
-    static properties: {
-        variant: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        size: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        disabled: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        href: {
-            type: StringConstructor;
-        };
-        target: {
-            type: StringConstructor;
-        };
-        rel: {
-            type: StringConstructor;
-        };
-        hasPulse: {
-            type: BooleanConstructor;
-            attribute: string;
-            reflect: boolean;
-        };
-        type: {
-            type: StringConstructor;
-        };
-        ariaLabel: {
-            type: StringConstructor;
-            attribute: string;
-        };
-        _iconStartFilled: {
-            state: boolean;
-        };
-        _iconEndFilled: {
-            state: boolean;
-        };
-    };
-    variant: ButtonVariant;
-    size: ButtonSize;
-    disabled: boolean;
-    href: string | undefined;
-    target: string | undefined;
-    rel: string | undefined;
-    hasPulse: boolean;
-    type: 'button' | 'submit' | 'reset';
-    ariaLabel: string | null;
-    private _iconStartFilled;
-    private _iconEndFilled;
-    constructor();
-    private _onIconSlotChange;
-    private get _classes();
-    private _handleAnchorClick;
-    private _iconSlot;
-    render(): lit.TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'bds-button': BdsButton;
-    }
-}
-
-type AlertVariant = 'info' | 'success' | 'warning' | 'error';
-/**
- * `<bds-alert>` — framework-agnostic Alert custom element.
- *
- * Attributes:
- *   variant     — "info" (default) | "success" | "warning" | "error"
- *   title       — optional heading above the body text
- *   dismissible — boolean; shows a dismiss button when present
- *
- * Slots:
- *   (default) — alert body content
- *   icon      — optional icon displayed to the left of the content
- *
- * Events:
- *   bds-dismiss — fired (bubbles, composed) when the dismiss button is clicked
- *
- * Accessibility:
- *   role="alert" + aria-live="assertive" for error/warning variants,
- *   role="status" + aria-live="polite" for info/success variants.
- *
- * @example
- * <bds-alert variant="success" title="Saved!">Your changes have been saved.</bds-alert>
- *
- * <bds-alert variant="error" dismissible>
- *   <svg slot="icon">…</svg>
- *   Something went wrong.
- * </bds-alert>
- */
-declare class BdsAlert extends LitElement {
-    static styles: lit.CSSResult;
-    static properties: {
-        variant: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        title: {
-            type: StringConstructor;
-        };
-        dismissible: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        _iconFilled: {
-            state: boolean;
-        };
-    };
-    variant: AlertVariant;
-    title: string;
-    dismissible: boolean;
-    private _iconFilled;
-    constructor();
-    private _onIconSlotChange;
-    private get _isUrgent();
-    private _handleDismiss;
-    render(): lit.TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'bds-alert': BdsAlert;
-    }
-}
-
-type PopoverPlacement = 'bottom' | 'top' | 'left' | 'right';
-/**
- * `<bds-popover>` — framework-agnostic Popover custom element.
- *
- * Uses CSS Anchor Positioning within the shadow DOM so the panel stays
- * anchored to the trigger and automatically repositions when it would
- * overflow the viewport (`@position-try` fallbacks).
- *
- * Attributes:
- *   placement — "bottom" (default) | "top" | "left" | "right"
- *   open      — boolean; reflects whether the panel is visible
- *
- * Slots:
- *   trigger   — the element that opens/closes the panel on click
- *   (default) — panel content
- *
- * Events:
- *   bds-open  — fired (bubbles, composed) when the panel opens
- *   bds-close — fired (bubbles, composed) when the panel closes
- *
- * @example
- * <bds-popover placement="bottom">
- *   <button slot="trigger">Open</button>
- *   <p>Panel content here</p>
- * </bds-popover>
- */
-declare class BdsPopover extends LitElement {
-    static styles: lit.CSSResult;
-    static properties: {
-        placement: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        open: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-    };
-    placement: PopoverPlacement;
-    open: boolean;
-    private _anchorName;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private _onKeydown;
-    private _onCommand;
-    private _onOutsideClick;
-    private _toggle;
-    private _open;
-    private _close;
-    render(): lit.TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'bds-popover': BdsPopover;
-    }
-}
-
-type ToastVariant = 'success' | 'error' | 'info' | 'warning';
-/**
- * `<bds-toast-provider>` — framework-agnostic Toast provider custom element.
- *
- * Wraps page content and manages a `popover="manual"` toast container that
- * renders in the browser top layer — above all fixed/sticky elements without
- * needing a z-index.
- *
- * Usage:
- *   // Instance method (direct reference)
- *   provider.showToast('Saved!', 'success');
- *
- *   // Static convenience (finds the first provider in the DOM)
- *   BdsToastProvider.show('Something went wrong', 'error');
- *
- *   // Event-driven (no import required)
- *   document.dispatchEvent(new CustomEvent('bds-show-toast', {
- *     detail: { message: 'Hello', variant: 'info' }
- *   }));
- *
- * Slots:
- *   (default) — page content; the host uses display:contents so layout
- *               is unaffected
- *
- * @example
- * <bds-toast-provider>
- *   <main>…</main>
- * </bds-toast-provider>
- */
-declare class BdsToastProvider extends LitElement {
-    static styles: lit.CSSResult;
-    static properties: {
-        _toasts: {
-            state: boolean;
-        };
-    };
-    private _toasts;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    updated(): void;
-    showToast(message: string, variant?: ToastVariant): void;
-    private _removeToast;
-    private _onShowToastEvent;
-    static show(message: string, variant?: ToastVariant): void;
-    render(): lit.TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'bds-toast-provider': BdsToastProvider;
-    }
-}
-
-export { BdsAlert, BdsBadge, BdsButton, BdsPopover, BdsToastProvider };