@boostdev/design-system-components 1.1.0 → 1.1.2

package/src/components/interaction/form/Select/Select.module.css

@@ -12,7 +12,7 @@
 
   .select {
     appearance: none;
-    width: 100%;
+    inline-size: 100%;
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);
     padding: var(--bds-space_s);
@@ -60,7 +60,7 @@
   }
 
   .chevron svg {
-    width: 1rem;
-    height: 1rem;
+    inline-size: 1rem;
+    block-size: 1rem;
   }
 }

package/src/components/interaction/form/Slider/Slider.module.css

@@ -24,8 +24,8 @@
 
     color: var(--slider_color, var(--bds-color_on-bg));
     appearance: none;
-    width: 100%;
-    height: var(--slider_track-height);
+    inline-size: 100%;
+    block-size: var(--slider_track-height);
     border-radius: 999px;
     background: linear-gradient(
       to right,
@@ -52,8 +52,8 @@
   /* Thumb — Webkit */
   .slider::-webkit-slider-thumb {
     appearance: none;
-    width: var(--slider_thumb-size);
-    height: var(--slider_thumb-size);
+    inline-size: var(--slider_thumb-size);
+    block-size: var(--slider_thumb-size);
     border-radius: 50%;
     background-color: var(--slider_color-active, var(--bdc-color_active));
     box-shadow: var(--bds-shadow_s);
@@ -63,8 +63,8 @@
 
   /* Thumb — Firefox */
   .slider::-moz-range-thumb {
-    width: var(--slider_thumb-size);
-    height: var(--slider_thumb-size);
+    inline-size: var(--slider_thumb-size);
+    block-size: var(--slider_thumb-size);
     border: none;
     border-radius: 50%;
     background-color: var(--slider_color-active, var(--bdc-color_active));

package/src/components/interaction/form/Switch/Switch.module.css

@@ -25,8 +25,8 @@
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
-    width: var(--switch_track-width);
-    height: var(--switch_track-height);
+    inline-size: var(--switch_track-width);
+    block-size: var(--switch_track-height);
   }
 
   /* Real input — invisible overlay to capture pointer/keyboard events */
@@ -35,8 +35,8 @@
     inset: 0;
     appearance: none;
     opacity: 0;
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
     margin: 0;
     cursor: pointer;
     z-index: 1;
@@ -50,8 +50,8 @@
   .track {
     display: inline-flex;
     align-items: center;
-    width: var(--switch_track-width);
-    height: var(--switch_track-height);
+    inline-size: var(--switch_track-width);
+    block-size: var(--switch_track-height);
     border-radius: 999px;
     background-color: var(--switch_track-bg, var(--bds-color_grey--subtle));
     padding-inline: var(--switch_track-pad);
@@ -69,8 +69,8 @@
   /* Thumb */
   .thumb {
     display: block;
-    width: var(--switch_thumb-size);
-    height: var(--switch_thumb-size);
+    inline-size: var(--switch_thumb-size);
+    block-size: var(--switch_thumb-size);
     border-radius: 50%;
     background-color: var(--switch_thumb-bg, var(--bds-color_grey));
     box-shadow: var(--bds-shadow_s);

package/src/components/interaction/form/Textarea/Textarea.module.css

@@ -20,7 +20,7 @@
     background-color: var(--textarea_color_bg, var(--bds-color_bg));
     color: var(--textarea_color, var(--bds-color_on-bg));
     resize: vertical;
-    min-height: calc(var(--bds-space_m) * 5);
+    min-block-size: calc(var(--bds-space_m) * 5);
     transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
                 background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }

package/src/components/layout/IconWrapper/IconWrapper.module.css

@@ -1,7 +1,7 @@
 @layer component {
   .wrapper {
-    width: 2em;
-    height: 2em;
+    inline-size: 2em;
+    block-size: 2em;
     font-size: 3em;
     border-radius: 50%;
     display: flex;

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

@@ -13,11 +13,11 @@
   }
 
   .item {
-    border-bottom: 1px solid var(--bds-color_bg--subtle);
+    border-block-end: 1px solid var(--bds-color_bg--subtle);
   }
 
   .item:last-child {
-    border-bottom: none;
+    border-block-end: none;
   }
 
   .heading {
@@ -29,7 +29,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    width: 100%;
+    inline-size: 100%;
     padding: var(--bds-space_m);
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);
@@ -63,8 +63,8 @@
   }
 
   .chevron {
-    width: 1.25rem;
-    height: 1.25rem;
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
     flex-shrink: 0;
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }

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

@@ -0,0 +1,62 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Alert.native.stories';
+
+<Meta of={Stories} />
+
+# Alert (React Native)
+
+React Native alert component for inline status messages. Supports four semantic variants, an optional title, and a dismissible mode — matching the web `Alert` API.
+
+> **Status: alpha** — API may change before stable release.
+
+## Usage
+
+```tsx
+import { Alert } from '@boostdev/components';
+
+<Alert variant="success" title="Saved">
+  Your changes have been saved successfully.
+</Alert>
+```
+
+## Examples
+
+### All variants
+<Canvas of={Stories.AllVariants} />
+
+### Info
+<Canvas of={Stories.Info} />
+
+### Success
+<Canvas of={Stories.Success} />
+
+### Warning
+<Canvas of={Stories.Warning} />
+
+### Error
+<Canvas of={Stories.Error} />
+
+### With title
+<Canvas of={Stories.WithTitle} />
+
+### Dismissible
+<Canvas of={Stories.Dismissible} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Props reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `"info" \| "success" \| "warning" \| "error"` | `"info"` | Semantic colour and icon |
+| `title` | string | — | Optional heading above body content |
+| `onDismiss` | `() => void` | — | When set, a dismiss button is shown; called on press |
+| `children` | `ReactNode` | — | Alert body content |
+
+## Accessibility
+
+- `error` and `warning` variants announce content as `assertive`
+- `info` and `success` variants announce content as `polite`
+- The dismiss button has a descriptive accessibility label

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);
   }