@boostdev/design-system-components 1.1.0 → 1.1.2

package/dist/web-components/ui/bds-separator.d.ts

@@ -0,0 +1,32 @@
+import * as lit from 'lit';
+import { LitElement } 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>
+ */
+declare class BdsSeparator extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        orientation: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    orientation: 'horizontal' | 'vertical';
+    constructor();
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-separator': BdsSeparator;
+    }
+}
+
+export { BdsSeparator };

package/dist/web-components/ui/bds-separator.js

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

package/dist/web-components/ui/bds-skeleton.d.ts

@@ -0,0 +1,22 @@
+import * as lit from 'lit';
+import { LitElement } 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>
+ */
+declare class BdsSkeleton extends LitElement {
+    static styles: lit.CSSResult;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-skeleton': BdsSkeleton;
+    }
+}
+
+export { BdsSkeleton };

package/dist/web-components/ui/bds-skeleton.js

@@ -0,0 +1,7 @@
+import {
+  BdsSkeleton
+} from "../chunk-2QA62WCQ.js";
+import "../chunk-LGEZYFUU.js";
+export {
+  BdsSkeleton
+};

package/dist/web-components/ui/bds-typography.d.ts

@@ -0,0 +1,44 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body' | 'body_s';
+/**
+ * `<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>
+ */
+declare class BdsTypography extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        component: {
+            type: StringConstructor;
+        };
+    };
+    variant: TypographyVariant;
+    component: string;
+    constructor();
+    private get _tag();
+    render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-typography': BdsTypography;
+    }
+}
+
+export { BdsTypography, type TypographyVariant };

package/dist/web-components/ui/bds-typography.js

@@ -0,0 +1,8 @@
+import {
+  BdsTypography
+} from "../chunk-SOQQ7RVJ.js";
+import "../chunk-QPOKHLMQ.js";
+import "../chunk-LGEZYFUU.js";
+export {
+  BdsTypography
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-components",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "BoostDev React component library: accessible, token-driven components built on @boostdev/design-system-foundation",
   "keywords": [
     "React",
@@ -37,8 +37,171 @@
       "require": "./dist/client.cjs"
     },
     "./web-components": {
-      "types": "./dist/web-components.d.ts",
-      "import": "./dist/web-components.js"
+      "types": "./dist/web-components/index.d.ts",
+      "import": "./dist/web-components/index.js"
+    },
+    "./web-components/globals": {
+      "import": "./dist/web-components/globals.js"
+    },
+    "./web-components/ui/bds-alert": {
+      "types": "./dist/web-components/ui/bds-alert.d.ts",
+      "import": "./dist/web-components/ui/bds-alert.js"
+    },
+    "./web-components/ui/bds-avatar": {
+      "types": "./dist/web-components/ui/bds-avatar.d.ts",
+      "import": "./dist/web-components/ui/bds-avatar.js"
+    },
+    "./web-components/ui/bds-badge": {
+      "types": "./dist/web-components/ui/bds-badge.d.ts",
+      "import": "./dist/web-components/ui/bds-badge.js"
+    },
+    "./web-components/ui/bds-breadcrumb": {
+      "types": "./dist/web-components/ui/bds-breadcrumb.d.ts",
+      "import": "./dist/web-components/ui/bds-breadcrumb.js"
+    },
+    "./web-components/ui/bds-card": {
+      "types": "./dist/web-components/ui/bds-card.d.ts",
+      "import": "./dist/web-components/ui/bds-card.js"
+    },
+    "./web-components/ui/bds-description-list": {
+      "types": "./dist/web-components/ui/bds-description-list.d.ts",
+      "import": "./dist/web-components/ui/bds-description-list.js"
+    },
+    "./web-components/ui/bds-icon-wrapper": {
+      "types": "./dist/web-components/ui/bds-icon-wrapper.d.ts",
+      "import": "./dist/web-components/ui/bds-icon-wrapper.js"
+    },
+    "./web-components/ui/bds-link": {
+      "types": "./dist/web-components/ui/bds-link.d.ts",
+      "import": "./dist/web-components/ui/bds-link.js"
+    },
+    "./web-components/ui/bds-loading": {
+      "types": "./dist/web-components/ui/bds-loading.d.ts",
+      "import": "./dist/web-components/ui/bds-loading.js"
+    },
+    "./web-components/ui/bds-notification-banner": {
+      "types": "./dist/web-components/ui/bds-notification-banner.d.ts",
+      "import": "./dist/web-components/ui/bds-notification-banner.js"
+    },
+    "./web-components/ui/bds-progress": {
+      "types": "./dist/web-components/ui/bds-progress.d.ts",
+      "import": "./dist/web-components/ui/bds-progress.js"
+    },
+    "./web-components/ui/bds-progress-circle": {
+      "types": "./dist/web-components/ui/bds-progress-circle.d.ts",
+      "import": "./dist/web-components/ui/bds-progress-circle.js"
+    },
+    "./web-components/ui/bds-rating": {
+      "types": "./dist/web-components/ui/bds-rating.d.ts",
+      "import": "./dist/web-components/ui/bds-rating.js"
+    },
+    "./web-components/ui/bds-section-header": {
+      "types": "./dist/web-components/ui/bds-section-header.d.ts",
+      "import": "./dist/web-components/ui/bds-section-header.js"
+    },
+    "./web-components/ui/bds-separator": {
+      "types": "./dist/web-components/ui/bds-separator.d.ts",
+      "import": "./dist/web-components/ui/bds-separator.js"
+    },
+    "./web-components/ui/bds-skeleton": {
+      "types": "./dist/web-components/ui/bds-skeleton.d.ts",
+      "import": "./dist/web-components/ui/bds-skeleton.js"
+    },
+    "./web-components/ui/bds-typography": {
+      "types": "./dist/web-components/ui/bds-typography.d.ts",
+      "import": "./dist/web-components/ui/bds-typography.js"
+    },
+    "./web-components/interaction/bds-accordion": {
+      "types": "./dist/web-components/interaction/bds-accordion.d.ts",
+      "import": "./dist/web-components/interaction/bds-accordion.js"
+    },
+    "./web-components/interaction/bds-accordion-item": {
+      "types": "./dist/web-components/interaction/bds-accordion-item.d.ts",
+      "import": "./dist/web-components/interaction/bds-accordion-item.js"
+    },
+    "./web-components/interaction/bds-button": {
+      "types": "./dist/web-components/interaction/bds-button.d.ts",
+      "import": "./dist/web-components/interaction/bds-button.js"
+    },
+    "./web-components/interaction/bds-collapsible": {
+      "types": "./dist/web-components/interaction/bds-collapsible.d.ts",
+      "import": "./dist/web-components/interaction/bds-collapsible.js"
+    },
+    "./web-components/interaction/bds-dialog": {
+      "types": "./dist/web-components/interaction/bds-dialog.d.ts",
+      "import": "./dist/web-components/interaction/bds-dialog.js"
+    },
+    "./web-components/interaction/bds-drawer": {
+      "types": "./dist/web-components/interaction/bds-drawer.d.ts",
+      "import": "./dist/web-components/interaction/bds-drawer.js"
+    },
+    "./web-components/interaction/bds-popover": {
+      "types": "./dist/web-components/interaction/bds-popover.d.ts",
+      "import": "./dist/web-components/interaction/bds-popover.js"
+    },
+    "./web-components/interaction/bds-skip-link": {
+      "types": "./dist/web-components/interaction/bds-skip-link.d.ts",
+      "import": "./dist/web-components/interaction/bds-skip-link.js"
+    },
+    "./web-components/interaction/bds-tab": {
+      "types": "./dist/web-components/interaction/bds-tab.d.ts",
+      "import": "./dist/web-components/interaction/bds-tab.js"
+    },
+    "./web-components/interaction/bds-tab-panel": {
+      "types": "./dist/web-components/interaction/bds-tab-panel.d.ts",
+      "import": "./dist/web-components/interaction/bds-tab-panel.js"
+    },
+    "./web-components/interaction/bds-tabs": {
+      "types": "./dist/web-components/interaction/bds-tabs.d.ts",
+      "import": "./dist/web-components/interaction/bds-tabs.js"
+    },
+    "./web-components/interaction/bds-toast-provider": {
+      "types": "./dist/web-components/interaction/bds-toast-provider.d.ts",
+      "import": "./dist/web-components/interaction/bds-toast-provider.js"
+    },
+    "./web-components/interaction/bds-tooltip": {
+      "types": "./dist/web-components/interaction/bds-tooltip.d.ts",
+      "import": "./dist/web-components/interaction/bds-tooltip.js"
+    },
+    "./web-components/interaction/form/bds-checkbox": {
+      "types": "./dist/web-components/interaction/form/bds-checkbox.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-checkbox.js"
+    },
+    "./web-components/interaction/form/bds-combobox": {
+      "types": "./dist/web-components/interaction/form/bds-combobox.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-combobox.js"
+    },
+    "./web-components/interaction/form/bds-file-input": {
+      "types": "./dist/web-components/interaction/form/bds-file-input.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-file-input.js"
+    },
+    "./web-components/interaction/form/bds-number-input": {
+      "types": "./dist/web-components/interaction/form/bds-number-input.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-number-input.js"
+    },
+    "./web-components/interaction/form/bds-radio": {
+      "types": "./dist/web-components/interaction/form/bds-radio.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-radio.js"
+    },
+    "./web-components/interaction/form/bds-segmented-control": {
+      "types": "./dist/web-components/interaction/form/bds-segmented-control.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-segmented-control.js"
+    },
+    "./web-components/interaction/form/bds-select": {
+      "types": "./dist/web-components/interaction/form/bds-select.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-select.js"
+    },
+    "./web-components/interaction/form/bds-slider": {
+      "types": "./dist/web-components/interaction/form/bds-slider.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-slider.js"
+    },
+    "./web-components/interaction/form/bds-switch": {
+      "types": "./dist/web-components/interaction/form/bds-switch.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-switch.js"
+    },
+    "./web-components/interaction/form/bds-textarea": {
+      "types": "./dist/web-components/interaction/form/bds-textarea.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-textarea.js"
     },
     "./css": "./dist/index.css",
     "./css/bdc": "./src/css/bdc.css",
@@ -168,7 +331,9 @@
     "registry": "https://registry.npmjs.org/"
   },
   "sideEffects": [
-    "src/css/**/*.css"
+    "src/css/**/*.css",
+    "src/web-components/globals.ts",
+    "dist/web-components/**/*.js"
   ],
   "dependencies": {
     "@oddbird/css-anchor-positioning": "^0.9.0"

package/src/components/interaction/Button/Button.module.css

@@ -41,7 +41,7 @@
     cursor: pointer;
     scroll-padding-block-end: var(--bds-space_l);
     justify-content: center;
-    height: var(--button_height, 3em);
+    block-size: var(--button_height, 3em);
     font-size: var(--button_font-size, inherit);
     white-space: nowrap;
     line-height: 1;

package/src/components/interaction/Button/Button.native.mdx

@@ -0,0 +1,72 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Button.native.stories';
+
+<Meta of={Stories} />
+
+# Button (React Native)
+
+React Native button component using `Pressable`. Matches the web `Button` API as closely as possible, replacing `onClick` with `onPress` and `aria-label` with `accessibilityLabel`.
+
+> **Status: alpha** — API may change before stable release.
+
+## Usage
+
+```tsx
+import { Button } from '@boostdev/components';
+
+<Button variant="default" size="medium" onPress={() => console.log('pressed')}>
+  Save
+</Button>
+```
+
+Wrap your tree in `ThemeProvider` (once, at the app root):
+
+```tsx
+import { ThemeProvider } from '@boostdev/components/native/ThemeContext';
+
+export default function App() {
+  return <ThemeProvider><YourApp /></ThemeProvider>;
+}
+```
+
+## Examples
+
+### All variants & sizes
+<Canvas of={Stories.AllVariants} />
+
+### Default
+<Canvas of={Stories.Default} />
+
+### Ghost
+<Canvas of={Stories.Ghost} />
+
+### Sizes
+<Canvas of={Stories.Small} />
+<Canvas of={Stories.Medium} />
+<Canvas of={Stories.Large} />
+
+### Disabled
+<Canvas of={Stories.Disabled} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Props reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `"default" \| "ghost"` | `"default"` | Visual style |
+| `size` | `"small" \| "medium" \| "large"` | `"medium"` | Height and padding scale |
+| `disabled` | boolean | `false` | Prevents interaction, reduces opacity |
+| `onPress` | `() => void` | — | Called when the button is pressed |
+| `iconStart` | `ReactNode` | — | Icon before the label |
+| `iconEnd` | `ReactNode` | — | Icon after the label |
+| `accessibilityLabel` | string | — | Screen reader label (required for icon-only buttons) |
+| `style` | `StyleProp<ViewStyle>` | — | Override container styles |
+
+## Accessibility
+
+- Provide `accessibilityLabel` for icon-only buttons
+- `disabled` communicates the disabled state to assistive technologies
+- Pressed state reduces opacity to 0.75 for visual feedback

package/src/components/interaction/Command/Command.module.css

@@ -4,8 +4,8 @@
     border: none;
     border-radius: var(--bds-border_radius--m);
     background: transparent;
-    width: min(40rem, 90vw);
-    max-height: 70vh;
+    inline-size: min(40rem, 90vw);
+    max-block-size: 70vh;
     overflow: visible;
     margin-block-start: 10vh;
   }
@@ -23,7 +23,7 @@
     border-radius: var(--bds-border_radius--m);
     box-shadow: var(--command_shadow, var(--bds-shadow_xl));
     overflow: hidden;
-    max-height: 70vh;
+    max-block-size: 70vh;
     border: var(--command_border, none);
     --bdc_color: currentcolor;
     --bdc-outline_radius: var(--bds-border_radius--m);
@@ -42,8 +42,8 @@
   }
 
   .searchIcon {
-    width: 1.25rem;
-    height: 1.25rem;
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
     color: var(--bds-color_on-bg);
     flex-shrink: 0;
   }
@@ -56,7 +56,7 @@
     font-size: var(--bds-font_size--body);
     color: var(--bds-color_on-bg);
     background: transparent;
-    min-width: 0;
+    min-inline-size: 0;
   }
 
   .search::placeholder {
@@ -78,7 +78,7 @@
   }
 
   .list {
-    overflow-y: auto;
+    overflow-block: auto;
     list-style: none;
     margin: 0;
     padding: var(--bds-space_xs) 0;

package/src/components/interaction/Command/Command.spec.tsx

@@ -59,6 +59,16 @@ describe('Command', () => {
     expect(screen.getByText('Save current file')).toBeInTheDocument();
   });
 
+  it('dialog has an id for invoker targeting', () => {
+    render(<Command isOpen items={items} onClose={() => {}} />);
+    expect(document.querySelector('dialog')).toHaveAttribute('id');
+  });
+
+  it('uses provided id on dialog', () => {
+    render(<Command id="cmd-palette" isOpen items={items} onClose={() => {}} />);
+    expect(document.querySelector('dialog')).toHaveAttribute('id', 'cmd-palette');
+  });
+
   it('locks body scroll when open', () => {
     render(<Command isOpen items={items} onClose={() => {}} />);
     expect(document.body.style.overflow).toBe('hidden');
@@ -99,4 +109,31 @@ describe('Command', () => {
 
     document.body.removeChild(trigger);
   });
+
+  describe('command event (Invoker Commands API)', () => {
+    function makeCommandEvent(command: string) {
+      const event = new Event('command');
+      Object.defineProperty(event, 'command', { value: command, configurable: true });
+      return event;
+    }
+
+    it('locks scroll and calls onOpen on show-modal command', () => {
+      const onOpen = vi.fn();
+      render(<Command isOpen={false} items={items} onOpen={onOpen} onClose={() => {}} />);
+      const dialog = document.querySelector('dialog')!;
+      dialog.dispatchEvent(makeCommandEvent('show-modal'));
+      expect(document.body.style.overflow).toBe('hidden');
+      expect(onOpen).toHaveBeenCalled();
+    });
+
+    it('restores scroll and calls onClose on close command', () => {
+      const onClose = vi.fn();
+      render(<Command isOpen items={items} onClose={onClose} />);
+      document.body.style.overflow = 'hidden';
+      const dialog = document.querySelector('dialog')!;
+      dialog.dispatchEvent(makeCommandEvent('close'));
+      expect(document.body.style.overflow).toBe('');
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
 });

package/src/components/interaction/Command/Command.tsx

@@ -1,4 +1,9 @@
 import { useState, useEffect, useRef, useId, KeyboardEvent, useMemo } from 'react';
+import { installInvokerCommandsPolyfill } from '../../../polyfill-invoker-commands';
+
+// Install once at module load — no-op if native support is present.
+installInvokerCommandsPolyfill();
+
 import css from './Command.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
@@ -13,14 +18,18 @@ export interface CommandItem {
 }
 
 interface CommandProps extends WithClassName {
+  id?: string;
   isOpen: boolean;
+  onOpen?: () => void;
   onClose: () => void;
   items: CommandItem[];
   placeholder?: string;
 }
 
 export function Command({
+  id: idProp,
   isOpen,
+  onOpen,
   onClose,
   items,
   placeholder = 'Search commands…',
@@ -28,6 +37,8 @@ export function Command({
 }: Readonly<CommandProps>) {
   const [query, setQuery] = useState('');
   const [activeIndex, setActiveIndex] = useState(0);
+  const generatedId = useId();
+  const dialogId = idProp ?? generatedId;
   const dialogRef = useRef<HTMLDialogElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const listboxId = useId();
@@ -56,14 +67,14 @@ export function Command({
   useEffect(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
-    if (isOpen) {
+    if (isOpen && !dialog.open) {
       triggerRef.current = document.activeElement;
       dialog.showModal();
       document.body.style.overflow = 'hidden';
       setQuery('');
       setActiveIndex(0);
       setTimeout(() => inputRef.current?.focus(), 0);
-    } else if (dialog.open) {
+    } else if (!isOpen && dialog.open) {
       dialog.close();
       document.body.style.overflow = '';
       (triggerRef.current as HTMLElement | null)?.focus();
@@ -77,6 +88,29 @@ export function Command({
     setActiveIndex(0);
   }, [query]);
 
+  // Invoker Commands API: sync state when opened/closed via commandfor/command.
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const handleCommand = (e: CommandEvent) => {
+      if (e.command === 'show-modal') {
+        triggerRef.current = document.activeElement;
+        document.body.style.overflow = 'hidden';
+        setQuery('');
+        setActiveIndex(0);
+        setTimeout(() => inputRef.current?.focus(), 0);
+        onOpen?.();
+      } else if (e.command === 'close') {
+        document.body.style.overflow = '';
+        const trigger = triggerRef.current;
+        setTimeout(() => (trigger as HTMLElement | null)?.focus(), 0);
+        onClose();
+      }
+    };
+    dialog.addEventListener('command', handleCommand);
+    return () => dialog.removeEventListener('command', handleCommand);
+  }, [onOpen, onClose]);
+
   const handleCancel = (e: React.SyntheticEvent) => {
     e.preventDefault();
     onClose();
@@ -106,6 +140,7 @@ export function Command({
   return (
     <dialog
       ref={dialogRef}
+      id={dialogId}
       className={cn(css.dialog, className)}
       aria-label="Command palette"
       aria-modal="true"

package/src/components/interaction/Dialog/Dialog.module.css

@@ -12,29 +12,26 @@
     background-color: var(--dialog_color ,var(--bds-color_grey--subtle));
     color: var(--dialog_on-color, var(--bds-color_on-grey--subtle));
     padding: var(--bds-space_l);
-    max-width: 90svw;
-    max-height: 90svh;
+    max-inline-size: 90svw;
+    max-block-size: 90svh;
     overflow: visible;
   }
 
   .dialogContent {
     display: grid;
     gap: var(--bds-grid_gap);
-    overflow-y: auto;
-    min-height: 0;
+    overflow-block: auto;
+    min-block-size: 0;
     flex: 1;
   }
 
-  .closeForm {
+  .closeButton {
+    all: unset;
     position: absolute;
     inset-block-start: -1em;
     inset-inline-end: -1em;
-  }
-
-  .closeButton {
-    all: unset;
-    width: 2em;
-    height: 2em;
+    inline-size: 2em;
+    block-size: 2em;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -50,8 +47,8 @@
   }
 
   .closeButton svg {
-    width: 1.25em;
-    height: 1.25em;
+    inline-size: 1.25em;
+    block-size: 1.25em;
   }
 
   .dialog::backdrop {