@boostdev/design-system-components 1.1.0 → 1.1.1

package/src/components/ui/Avatar/Avatar.native.mdx

@@ -0,0 +1,50 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Avatar.native.stories';
+
+<Meta of={Stories} />
+
+# Avatar (React Native)
+
+React Native avatar component displaying user initials on a coloured background. Derives initials from the `name` prop (first letter of each word, max 2).
+
+> **Status: alpha** — API may change before stable release.
+
+## Usage
+
+```tsx
+import { Avatar } from '@boostdev/components';
+
+<Avatar name="John Doe" size="medium" />
+```
+
+## Examples
+
+### All sizes
+<Canvas of={Stories.AllSizes} />
+
+### With initials
+<Canvas of={Stories.WithInitials} />
+
+### Small
+<Canvas of={Stories.Small} />
+
+### Large
+<Canvas of={Stories.Large} />
+
+### Single name
+<Canvas of={Stories.SingleName} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Props reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | string | — | Full name — initials are derived from this |
+| `size` | `"small" \| "medium" \| "large"` | `"medium"` | Circle diameter |
+
+## Accessibility
+
+- `accessibilityLabel` defaults to the `name` prop so screen readers announce the user's name

package/src/components/ui/Badge/Badge.native.mdx

@@ -0,0 +1,54 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Badge.native.stories';
+
+<Meta of={Stories} />
+
+# Badge (React Native)
+
+React Native badge component for short status labels and counts. Five semantic variants matching the web `Badge` API.
+
+> **Status: alpha** — API may change before stable release.
+
+## Usage
+
+```tsx
+import { Badge } from '@boostdev/components';
+
+<Badge variant="success">Active</Badge>
+<Badge variant="error">3</Badge>
+```
+
+## Examples
+
+### All variants
+<Canvas of={Stories.AllVariants} />
+
+### Primary
+<Canvas of={Stories.Primary} />
+
+### Secondary
+<Canvas of={Stories.Secondary} />
+
+### Success
+<Canvas of={Stories.Success} />
+
+### Error
+<Canvas of={Stories.Error} />
+
+### Warning
+<Canvas of={Stories.Warning} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Props reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `"primary" \| "secondary" \| "success" \| "error" \| "warning"` | `"primary"` | Semantic colour |
+| `children` | `ReactNode` | — | Badge label |
+
+## Accessibility
+
+- Badge is decorative — wrap in a component with `accessibilityLabel` when colour alone conveys status (e.g. `accessibilityLabel="3 notifications"`)

package/src/components/ui/Calendar/Calendar.module.css

@@ -13,7 +13,7 @@
     border-radius: var(--calendar_radius, var(--bdc-outline_radius));
     padding: var(--bds-space_m);
     box-shadow: var(--calendar_shadow, var(--bds-shadow_s));
-    width: 20rem;
+    inline-size: 20rem;
   }
 
   .header {
@@ -33,8 +33,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 2rem;
-    height: 2rem;
+    inline-size: 2rem;
+    block-size: 2rem;
     border-radius: 50%;
     cursor: pointer;
     color: var(--bds-color_on-bg);
@@ -42,8 +42,8 @@
   }
 
   .navBtn svg {
-    width: 1rem;
-    height: 1rem;
+    inline-size: 1rem;
+    block-size: 1rem;
   }
 
   .navBtn:focus-visible {
@@ -59,7 +59,7 @@
 
   .grid {
     border-collapse: collapse;
-    width: 100%;
+    inline-size: 100%;
     table-layout: fixed;
   }
 
@@ -80,7 +80,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 100%;
+    inline-size: 100%;
     aspect-ratio: 1;
     border-radius: 50%;
     font-size: var(--bds-font_size--body--s);

package/src/components/ui/Carousel/Carousel.module.css

@@ -9,7 +9,7 @@
   .track {
     display: flex;
     gap: var(--bds-space_m);
-    overflow-x: auto;
+    overflow-inline: auto;
     scroll-snap-type: x mandatory;
     scrollbar-width: none;
     flex: 1;
@@ -30,8 +30,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 2.5rem;
-    height: 2.5rem;
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
     border-radius: 50%;
     background-color: var(--bds-color_bg);
     color: var(--bds-color_on-bg);
@@ -48,8 +48,8 @@
   }
 
   .navBtn svg {
-    width: 1.25rem;
-    height: 1.25rem;
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
   }
 
   .navBtn:focus-visible {

package/src/components/ui/Collapsible/Collapsible.module.css

@@ -48,10 +48,10 @@
 
   /* Chevron drawn with CSS borders */
   .icon {
-    width: 0.5rem;
-    height: 0.5rem;
-    border-right: 2px solid currentcolor;
-    border-bottom: 2px solid currentcolor;
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    border-inline-end: 2px solid currentcolor;
+    border-block-end: 2px solid currentcolor;
     transform: rotate(45deg);
     flex-shrink: 0;
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);

package/src/components/ui/Link/Link.module.css

@@ -49,8 +49,8 @@
 
   .externalLabel {
     position: absolute;
-    width: 1px;
-    height: 1px;
+    inline-size: 1px;
+    block-size: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;

package/src/components/ui/Loading/Loading.module.css

@@ -6,23 +6,23 @@
   }
 
   .spinner {
-    width: 2.5em;
-    height: 2.5em;
+    inline-size: 2.5em;
+    block-size: 2.5em;
     border: 4px solid var(--bds-color_bg);
-    border-top: 4px solid var(--bds-color_interactive);
+    border-block-start: 4px solid var(--bds-color_interactive);
     border-radius: 50%;
     animation: spin 1s linear infinite;
   }
 
   .--size_small .spinner {
-    width: 1.5em;
-    height: 1.5em;
+    inline-size: 1.5em;
+    block-size: 1.5em;
     border-width: 2px;
   }
 
   .--size_large .spinner {
-    width: 4em;
-    height: 4em;
+    inline-size: 4em;
+    block-size: 4em;
     border-width: 6px;
   }
 }

package/src/components/ui/NotificationBanner/NotificationBanner.module.css

@@ -9,7 +9,7 @@
     border-block-end: 3px solid var(--banner_border, var(--bds-color_blue));
     font-size: var(--bds-font_size--body);
     line-height: var(--bds-font_line-height--body);
-    width: 100%;
+    inline-size: 100%;
   }
 
   .--variant_info {
@@ -62,8 +62,8 @@
   }
 
   .dismiss svg {
-    width: 1rem;
-    height: 1rem;
+    inline-size: 1rem;
+    block-size: 1rem;
   }
 
   .dismiss:focus-visible {

package/src/components/ui/Pagination/Pagination.module.css

@@ -18,8 +18,8 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: 2.25rem;
-    height: 2.25rem;
+    min-inline-size: 2.25rem;
+    block-size: 2.25rem;
     padding-inline: var(--bds-space_xs);
     border-radius: var(--bds-border_radius--xs);
     background-color: var(--btn_bg, transparent);
@@ -62,16 +62,16 @@
   }
 
   .button.--nav svg {
-    width: 1rem;
-    height: 1rem;
+    inline-size: 1rem;
+    block-size: 1rem;
   }
 
   .ellipsis {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: 2.25rem;
-    height: 2.25rem;
+    min-inline-size: 2.25rem;
+    block-size: 2.25rem;
     color: var(--bds-color_on-bg--subtle);
     font-size: var(--bds-font_size--body);
     user-select: none;

package/src/components/ui/Progress/Progress.module.css

@@ -3,7 +3,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_xxs);
-    width: 100%;
+    inline-size: 100%;
   }
 
   .labelRow {
@@ -19,8 +19,8 @@
   }
 
   .track {
-    width: 100%;
-    height: var(--progress_height, var(--bds-space_xs));
+    inline-size: 100%;
+    block-size: var(--progress_height, var(--bds-space_xs));
     background-color: var(--bds-color_bg--subtle);
     border-radius: 999px;
     overflow: hidden;
@@ -31,10 +31,10 @@
   .track.--size_large  { --progress_height: var(--bds-space_s); }
 
   .fill {
-    height: 100%;
+    block-size: 100%;
     background-color: var(--progress_color-active, var(--bdc-color_active));
     border-radius: 999px;
-    transition: width var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    transition: inline-size var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
 
   @media (prefers-reduced-motion: reduce) {

package/src/components/ui/Separator/Separator.module.css

@@ -6,13 +6,13 @@
 
   .separator.--horizontal {
     display: block;
-    width: 100%;
-    height: var(--separator_thickness, 1px);
+    inline-size: 100%;
+    block-size: var(--separator_thickness, 1px);
   }
 
   .separator.--vertical {
     display: inline-block;
-    width: var(--separator_thickness, 1px);
+    inline-size: var(--separator_thickness, 1px);
     align-self: stretch;
   }
 }

package/src/components/ui/Skeleton/Skeleton.module.css

@@ -9,7 +9,7 @@
     background-size: 200% 100%;
     animation: shimmer 1.5s infinite;
     border-radius: var(--bds-border_radius--xs);
-    min-height: var(--bds-space_m);
+    min-block-size: var(--bds-space_m);
   }
 }
 

package/src/components/ui/Table/Table.module.css

@@ -1,7 +1,7 @@
 @layer component {
   .wrapper {
-    width: 100%;
-    overflow-x: auto;
+    inline-size: 100%;
+    overflow-inline: auto;
     border: var(--table_border, none);
     --bdc_color: var(--bds-color_bg--subtle);
     --bdc-outline_radius: var(--bds-border_radius--s);
@@ -12,7 +12,7 @@
   }
 
   .table {
-    width: 100%;
+    inline-size: 100%;
     border-collapse: collapse;
     font-size: var(--bds-font_size--body);
     font-family: var(--bds-font_family--body);
@@ -37,7 +37,7 @@
     font-size: var(--bds-font_size--body--s);
     color: var(--bds-color_on-bg--subtle);
     white-space: nowrap;
-    border-bottom: 1px solid var(--bds-color_bg--subtle);
+    border-block-end: 1px solid var(--bds-color_bg--subtle);
   }
 
   .th.--sortable {
@@ -50,7 +50,7 @@
     align-items: center;
     gap: var(--bds-space_xxs);
     padding: var(--bds-space_s) var(--bds-space_m);
-    width: 100%;
+    inline-size: 100%;
     cursor: pointer;
     color: var(--bds-color_on-bg--subtle);
     font-weight: var(--bds-font_weight--semibold);
@@ -71,8 +71,8 @@
   }
 
   .sortIcon {
-    width: 1rem;
-    height: 1rem;
+    inline-size: 1rem;
+    block-size: 1rem;
     opacity: 0.4;
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing),
       opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
@@ -88,12 +88,12 @@
   }
 
   .tbody .tr {
-    border-bottom: 1px solid var(--bds-color_bg--subtle);
+    border-block-end: 1px solid var(--bds-color_bg--subtle);
     transition: var(--bds-animation_transition);
   }
 
   .tbody .tr:last-child {
-    border-bottom: none;
+    border-block-end: none;
   }
 
   @media (hover: hover) and (pointer: fine) {

package/src/components/ui/Tabs/Tabs.module.css

@@ -6,7 +6,7 @@
 
   .tabList {
     display: flex;
-    border-bottom: 1px solid var(--bds-color_bg--subtle);
+    border-block-end: 1px solid var(--bds-color_bg--subtle);
     gap: var(--bds-space_xxs);
   }
 
@@ -19,8 +19,8 @@
     font-size: var(--bds-font_size--body);
     font-weight: var(--bds-font_weight--semibold);
     color: var(--tab_color, var(--bds-color_on-bg));
-    border-bottom: 2px solid var(--tab_border-color, transparent);
-    margin-bottom: -1px;
+    border-block-end: 2px solid var(--tab_border-color, transparent);
+    margin-block-end: -1px;
     cursor: pointer;
     transition: var(--bds-animation_transition);
   }

package/src/components/ui/Tooltip/Tooltip.module.css

@@ -32,29 +32,29 @@
 
   /* Placement: top (default) */
   .--placement_top {
-    bottom: calc(100% + var(--bds-space_xs));
-    left: 50%;
+    inset-block-end: calc(100% + var(--bds-space_xs));
+    inset-inline-start: 50%;
     transform: translateX(-50%);
   }
 
   /* Placement: bottom */
   .--placement_bottom {
-    top: calc(100% + var(--bds-space_xs));
-    left: 50%;
+    inset-block-start: calc(100% + var(--bds-space_xs));
+    inset-inline-start: 50%;
     transform: translateX(-50%);
   }
 
   /* Placement: left */
   .--placement_left {
-    right: calc(100% + var(--bds-space_xs));
-    top: 50%;
+    inset-inline-end: calc(100% + var(--bds-space_xs));
+    inset-block-start: 50%;
     transform: translateY(-50%);
   }
 
   /* Placement: right */
   .--placement_right {
-    left: calc(100% + var(--bds-space_xs));
-    top: 50%;
+    inset-inline-start: calc(100% + var(--bds-space_xs));
+    inset-block-start: 50%;
     transform: translateY(-50%);
   }
 

package/src/components/ui/Typography/Typography.native.mdx

@@ -0,0 +1,56 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Typography.native.stories';
+
+<Meta of={Stories} />
+
+# Typography (React Native)
+
+React Native typography component wrapping `Text` with semantic variants. Use instead of bare `<Text>` to ensure consistent sizing, weight, and line-height from the design token scale.
+
+> **Status: alpha** — API may change before stable release.
+
+## Usage
+
+```tsx
+import { Typography } from '@boostdev/components';
+
+<Typography variant="h1">Page title</Typography>
+<Typography variant="body">Body copy text.</Typography>
+```
+
+## Examples
+
+### All variants
+<Canvas of={Stories.AllVariants} />
+
+### Heading 1
+<Canvas of={Stories.Heading1} />
+
+### Heading 2
+<Canvas of={Stories.Heading2} />
+
+### Heading 3
+<Canvas of={Stories.Heading3} />
+
+### Body
+<Canvas of={Stories.Body} />
+
+### Body small
+<Canvas of={Stories.BodySmall} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Props reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `"h1" \| "h2" \| "h3" \| "body" \| "body_s"` | `"body"` | Typographic scale |
+| `children` | `ReactNode` | — | Text content |
+| `style` | `StyleProp<TextStyle>` | — | Override text styles |
+
+## Accessibility
+
+- `h1`/`h2`/`h3` variants set `accessibilityRole="header"` automatically
+- Override with the `accessibilityRole` prop if the visual hierarchy doesn't match the semantic hierarchy

package/src/polyfill-invoker-commands.ts

@@ -0,0 +1,68 @@
+/**
+ * Invoker Commands API polyfill (Baseline 2025).
+ *
+ * Handles `commandfor` / `command` attributes on <button> elements for browsers
+ * that don't yet support the native API. Dispatches a synthetic `command` event
+ * on the target element before performing the action — identical to native
+ * behaviour — so any existing `command` event listeners continue to work.
+ *
+ * Supports the dialog-specific commands used by this library:
+ *   command="show-modal"  →  dialog.showModal()
+ *   command="close"       →  dialog.close()
+ *
+ * Installation is idempotent and SSR-safe. The function is called automatically
+ * when the Dialog component is imported; consumers do not need to call it.
+ */
+
+let installed = false;
+
+export function installInvokerCommandsPolyfill(): void {
+  if (installed) return;
+  if (typeof window === 'undefined') return;
+  if ('command' in HTMLButtonElement.prototype) return; // native support present
+
+  installed = true;
+
+  document.addEventListener('click', (e: MouseEvent) => {
+    const button = (e.target as Element | null)?.closest<HTMLButtonElement>('button[commandfor]');
+    if (!button) return;
+
+    const targetId = button.getAttribute('commandfor');
+    const command = button.getAttribute('command');
+    if (!targetId || !command) return;
+
+    const target = document.getElementById(targetId);
+    if (!target) return;
+
+    // Dispatch a synthetic command event that mirrors the native CommandEvent.
+    const commandEvent = new Event('command', { cancelable: true, bubbles: false });
+    Object.defineProperty(commandEvent, 'command', { value: command, configurable: true });
+    Object.defineProperty(commandEvent, 'source', { value: button, configurable: true });
+    const notCancelled = target.dispatchEvent(commandEvent);
+
+    if (!notCancelled) return;
+
+    if (target instanceof HTMLDialogElement) {
+      if (command === 'show-modal' && !target.open) {
+        target.showModal();
+      } else if (command === 'close' && target.open) {
+        target.close();
+      }
+    } else if (target.hasAttribute('popover') && 'showPopover' in target) {
+      // Popover API commands — Popover API is Baseline 2024 so showPopover exists
+      // in any browser that lacks native invoker command support.
+      const popover = target as HTMLElement & {
+        showPopover(): void;
+        hidePopover(): void;
+        togglePopover(force?: boolean): boolean;
+      };
+      if (command === 'toggle-popover') {
+        popover.togglePopover();
+      } else if (command === 'show-popover') {
+        popover.showPopover();
+      } else if (command === 'hide-popover') {
+        popover.hidePopover();
+      }
+    }
+  });
+}

package/src/react-augment.d.ts

@@ -10,4 +10,23 @@ declare module 'react' {
     anchorName?: string;
     positionAnchor?: string;
   }
+
+  // Invoker Commands API (Baseline 2025) — not yet in @types/react.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface ButtonHTMLAttributes<T> {
+    commandfor?: string;
+    command?: string;
+  }
+}
+
+// CommandEvent and its entry in the DOM event map — not yet in TypeScript's lib.dom.
+declare global {
+  interface CommandEvent extends Event {
+    readonly command: string;
+    readonly source: Element;
+  }
+
+  interface HTMLElementEventMap {
+    command: CommandEvent;
+  }
 }