@arbor-education/design-system.components 0.13.0 → 0.13.1

package/{.claude/component-library.md → component-library.md}

@@ -2,7 +2,7 @@
 
 > Auto-generated reference for AI agents (Sophia, analyze-design, etc.)
 > Source: `src/components/` · Public API: `src/index.ts`
-> Last updated: 2026-04-17
+> Last updated: 2026-04-22
 
 ---
 
@@ -331,7 +331,7 @@ Component-scoped tokens follow: `--{component}-{state}-{property}` (e.g. `--butt
 
 ### 9. FormField
 
-**File:** `src/components/formField/FormField.tsx` · **Public export:** No (internal)
+**File:** `src/components/formField/FormField.tsx` · **Public export:** Yes
 
 **Use case:** Complete form field wrapper combining label, description, input, error text, and helper link. The preferred way to render any form input with consistent layout and accessibility wiring.
 
@@ -339,7 +339,7 @@ Component-scoped tokens follow: `--{component}-{state}-{property}` (e.g. `--butt
 |---|---|---|---|---|
 | `label` | `string` | No | — | Field label |
 | `id` | `string` | No | — | Associates label and input |
-| `inputType` | `'text' \| 'textarea' \| 'number' \| 'colourPicker' \| 'selectDropdown' \| 'datePicker'` | No | `'text'` | Which input to render |
+| `inputType` | `'text' \| 'textarea' \| 'number' \| 'time' \| 'colourPicker' \| 'selectDropdown' \| 'datePicker' \| 'combobox'` | No | `'text'` | Which input to render |
 | `inputProps` | Varies by `inputType` | No | — | Props forwarded to the input |
 | `fieldDescription` | `ReactNode` | No | — | Descriptive text below label |
 | `helperLinkText` | `string` | No | — | Helper link label |
@@ -742,7 +742,7 @@ Component-scoped tokens follow: `--{component}-{state}-{property}` (e.g. `--butt
 ### 30. Table
 
 **File:** `src/components/table/Table.tsx` · **Public export:** Yes
-**Also exports:** `GridApiContext`, `DSDefaultColDef`, `DefaultCellRenderer`, `BooleanCellRenderer`
+**Also exports:** `GridApiContext`, `DSDefaultColDef`, `DefaultCellRenderer`, `BooleanCellRenderer`, `CheckboxCellRenderer`, `TableSettingsContext`, `TABLE_SPACING`
 
 **Use case:** Full-featured enterprise data grid wrapping AG Grid Enterprise with design system theming, search, pagination, column visibility, bulk actions, row selection, and table settings — all pre-wired.
 
@@ -772,12 +772,14 @@ Component-scoped tokens follow: `--{component}-{state}-{property}` (e.g. `--butt
 | `Table.HideColumnsDropdown` | Multi-select to toggle column visibility |
 | `Table.ButtonCellRenderer` | Renders a `Button` in a cell (ref: `dsButtonCellRenderer`) |
 | `Table.TableSettingsDropdown` | Settings dropdown (spacing, borders, cell colors) |
+| `Table.TableControls` | Composed header bar: search, bulk actions, hide columns, settings, undo/redo, expand, download, help — all wired up |
 
 **Auto-registered cell renderers:**
 - `dsButtonCellRenderer` → `ButtonCellRenderer`
 - `dsInlineTextCellRenderer` → `InlineTextCellRenderer` (editable text in cell)
 - `dsSelectDropdownCellRenderer` → `SelectDropdownCellRenderer` (dropdown in cell)
 - `dsBooleanCellRenderer` → `BooleanCellRenderer` (check-solid icon for `true`, x-solid for `false`, null otherwise; also exported directly as `BooleanCellRenderer`)
+- `dsCheckboxCellRenderer` → `CheckboxCellRenderer` (checkbox for editable boolean cells; also exported directly as `CheckboxCellRenderer`)
 
 **Auto-registered column filters:**
 - `dsBooleanFilter` → `BooleanFilter`
@@ -819,18 +821,32 @@ Component-scoped tokens follow: `--{component}-{state}-{property}` (e.g. `--butt
 ### 32. Tag
 
 **File:** `src/components/tag/Tag.tsx` · **Public export:** Yes
+**Also exports:** `TagColor`, `TagProps` types
 
-**Use case:** Non-interactive label/badge for categorization, status indicators, or metadata display.
+**Use case:** Non-interactive label for metadata, categories, and status indicators. Used standalone for purely informational display; also used inside Combobox as removable selection chips (the only legitimate use of `onRemove`).
+
+> **MANIFEST CORRECTION (2026-04-17):** Component was rewritten. Old props `text` (string), `dotColour` are GONE. Current API uses `children` (ReactNode) + `slotStart`/`slotEnd` for slot composition.
 
 | Prop | Type | Required | Default | Description |
 |---|---|---|---|---|
-| `text` | `string` | Yes | — | Tag label |
+| `children` | `ReactNode` | Yes | — | Tag label content |
 | `color` | `TagColor` | No | `'neutral'` | Color variant |
-| `dotColour` | `DotColour` | No | — | Optional colored dot prefix |
+| `selected` | `boolean` | No | `false` | Selected state — overrides colour bg/border with selection tokens |
+| `slotStart` | `ReactNode` | No | — | Leading slot (e.g. Dot, Icon, Avatar) |
+| `slotEnd` | `ReactNode` | No | — | Trailing slot (e.g. chevron, badge count) |
+| `onRemove` | `() => void` | No | — | When provided, renders an X remove button. FOR COMPOSITE CONTEXTS ONLY (e.g. Combobox selection chips). Do not use for standalone tags. |
+| `removeLabel` | `string` | No | `'Remove'` | Accessible aria-label for the remove button |
+| `removeButtonTabIndex` | `0 \| -1` | No | `0` | Pass `-1` when a composite parent (e.g. Combobox) manages focus with roving tabindex |
 
 **`TagColor` values:** `'neutral'` · `'orange'` · `'blue'` · `'green'` · `'purple'` · `'teal'` · `'salmon'` · `'yellow'`
 
-**`DotColour` values:** `'purple'` · `'salmon'` · `'teal'` · `'yellow'` · `'green'` · `'orange'` · `'blue'`
+**Key behaviours:**
+- Renders as `<span>` — no interactive role; non-interactive tags have no keyboard focus
+- `selected` state overrides `color` bg/border with `--tag-selected-color-background/border` tokens; text remains neutral colour
+- Label (`ds-tag__label`) has `max-width: 100%`, `white-space: nowrap`, `overflow: hidden`, `text-overflow: ellipsis`
+- `slotStart` = canonical way to prefix a Dot (replace old `dotColour` prop) or Icon
+- Remove button: `aria-label={removeLabel}`, `e.stopPropagation()` on click, uses `Icon name="x" size={12}`
+- Dot in `slotStart` is `aria-hidden` when no `label` prop passed to Dot
 
 **Key features:**
 - Purely presentational `<span>` — no click handling
@@ -1052,9 +1068,10 @@ Component-scoped tokens follow: `--{component}-{state}-{property}` (e.g. `--butt
 | `DefaultCellRenderer` | `src/components/table/cellRenderers/DefaultCellRenderer.tsx` | Standard AG Grid cell renderer |
 | `BooleanCellRenderer` | `src/components/table/cellRenderers/BooleanCellRenderer.tsx` | Shows check icon (true), x icon (false), or null — also registered as `'dsBooleanCellRenderer'` string |
 
+| `PopupParentContext` | `src/utils/PopupParentContext.ts` | React context (`RefObject<HTMLElement \| null>`) controlling where portal-based floating elements render. Default: `getDefaultPopupParent()`. Consumed by Dropdown, Modal, Tooltip, DatePicker, DateTimePicker, Combobox, UserDropdown, SlideoverManager, and Table column filters (TimeFilter, BooleanFilter). Wrap with `<PopupParentContext.Provider value={containerRef}>` when floating elements are inside containers with `overflow: hidden` or custom z-index stacking contexts. |
+
 **Not exported but notable:**
 - `ModalUtils` — `addModal()`, `removeModal()`, `removeAllModals()` (mount `ModalManager` to use)
-- `PopupParentContext` — React context for portal container (used by Modal, Slideover, Dropdown, Tooltip, DatePicker)
 - `PubSub` — lightweight pub/subscribe for imperative modal/slideover control
 
 ---
@@ -1073,7 +1090,7 @@ Component-scoped tokens follow: `--{component}-{state}-{property}` (e.g. `--butt
 | `DatePicker` | Yes | any date-fns format; error state | Radix Popover, react-day-picker |
 | `Dropdown` | Yes | compound: Trigger/Content/Item/SelectItem/Separator/Group | Radix DropdownMenu |
 | `EditableText` | Yes | single-line/multiline; controlled editing | — |
-| `FormField` | No | 6 inputType values; error/helper/description | — |
+| `FormField` | Yes | 8 inputType values; error/helper/description; sharedProps a11y wiring | — |
 | `Fieldset` | Yes | with/without legend; native disabled | — |
 | `TextInput` | Yes | size: M/S; error state | — |
 | `TextArea` | Yes | autoSize; error state | — |

package/dist/components/badge/Badge.stories.d.ts

@@ -1,10 +1,89 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { StoryObj } from '@storybook/react-vite';
 import { Badge } from './Badge';
-declare const meta: Meta<typeof Badge>;
+declare function BadgeDocsPage(): import("react/jsx-runtime").JSX.Element;
+declare const meta: {
+    title: string;
+    component: ({ children, a11yLabel, className, size, colour, }: import("./Badge").BadgeProps) => React.JSX.Element;
+    parameters: {
+        layout: string;
+        docs: {
+            page: typeof BadgeDocsPage;
+        };
+    };
+    tags: string[];
+    argTypes: {
+        children: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        colour: {
+            control: "select";
+            options: (import("../dot/Dot").DotColour | undefined)[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        a11yLabel: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        className: {
+            control: false;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
 export default meta;
 type Story = StoryObj<typeof Badge>;
-export declare const Count: Story;
-export declare const WithA11yLabel: Story;
-export declare const Sizes: Story;
-export declare const Colours: Story;
+export declare const Default: Story;
+export declare const SingleDigit: Story;
+export declare const DoubleDigit: Story;
+export declare const Overflow: Story;
+export declare const Zero: Story;
+export declare const WithIcon: Story;
+export declare const InlineWithText: Story;
+export declare const AllSizes: Story;
+export declare const AllColours: Story;
+export declare const AllVariants: Story;
+export declare const A11yWithLabel: Story;
 //# sourceMappingURL=Badge.stories.d.ts.map

package/dist/components/badge/Badge.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.stories.d.ts","sourceRoot":"","sources":["../../../src/components/badge/Badge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAoB,MAAM,SAAS,CAAC;AAYlD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAQ5B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAepC,eAAO,MAAM,KAAK,EAAE,KAIoD,CAAC;AAEzE,eAAO,MAAM,aAAa,EAAE,KAK2D,CAAC;AAExF,eAAO,MAAM,KAAK,EAAE,KAQ4C,CAAC;AAEjE,eAAO,MAAM,OAAO,EAAE,KAU0C,CAAC"}
+{"version":3,"file":"Badge.stories.d.ts","sourceRoot":"","sources":["../../../src/components/badge/Badge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAW5D,OAAO,EAAE,KAAK,EAAoB,MAAM,SAAS,CAAC;AAiGlD,iBAAS,aAAa,4CAmBrB;AAYD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2EoB,CAAC;AAE/B,eAAe,IAAI,CAAC;AAIpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AA+PpC,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAqBzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAqBzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAqBtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAqBlB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAwCtB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAiD5B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA0DtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAgDxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAmDzB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAiE3B,CAAC"}