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

package/dist/components/pill/Pill.stories.js

@@ -1,28 +1,587 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Controls, Heading as DocHeading, Markdown, Primary as DocPrimary, Stories, Subtitle, Title, } from '@storybook/addon-docs/blocks';
+import { useState } from 'react';
+import { fn } from 'storybook/test';
 import { Pill } from './Pill';
+// ---------------------------------------------------------------------------
+// Docs page content
+// ---------------------------------------------------------------------------
+const DESCRIPTION_INTRO = [
+    'Pill is an **interactive filter control** that lets users narrow or refine a data set without',
+    'submitting a form. Think of it as a toggle you can tap to say "show me only this" — it changes',
+    'state immediately, no Apply button required.',
+    '',
+    'It has two modes. **Toggle mode** (the default) is for single-select filter rows where only one',
+    'option should be active at a time. **Checkbox mode** (`checkbox={true}`) embeds a real',
+    '`CheckboxInput` and is for multi-select rows where several options can be active simultaneously.',
+    '',
+    'The key distinction from `Tag` is interactivity: `Pill` is always a control that changes state;',
+    '`Tag` is always a non-interactive label. Never use `Pill` as a static label.',
+].join('\n');
+const USAGE_GUIDANCE = [
+    '### When to use',
+    '',
+    '- **Filter by year group, status, or subject** — auto-apply, no form submit',
+    '- **Single-select toggle rows** — only one pill active at a time (toggle mode)',
+    '- **Multi-select rows** — several pills active simultaneously (checkbox mode)',
+    '- **"All" reset patterns** — an "All" pill at the start of the row that clears other filters',
+    '',
+    '---',
+    '',
+    '### When NOT to use',
+    '',
+    '| Scenario | Use instead |',
+    '|---|---|',
+    '| Non-interactive metadata label | [`Tag`](?path=/docs/components-tag--docs) |',
+    '| Primary or destructive action | [`Button`](?path=/docs/components-button--docs) |',
+    '| Switching between views or routes | [`Tabs`](?path=/docs/components-tabs--docs) |',
+    '| Selecting from many options (10+) | Combobox or a dropdown select |',
+    '',
+    '```tsx',
+    '// BAD — Pill is a filter control, not an action trigger',
+    '<Pill text="Save student" onclick={handleSave} />',
+    '',
+    '// GOOD — Pill used as an auto-apply filter',
+    '<Pill text="Year 7" onclick={checked => onFilterChange("year7", checked)} />',
+    '```',
+    '',
+    '---',
+    '',
+    '### Design guidance',
+    '',
+    '- **Max 3 words per label** (Confluence design spec). Short labels scan faster and keep filter',
+    '  rows compact. If you need more words, use a dropdown or combobox instead.',
+    '- **Filter groups must wrap** — always apply `flexWrap: "wrap"` to any row of Pills so they',
+    '  reflow on constrained viewports. Confluence explicitly prohibits horizontal scroll.',
+    '- **Gap conventions** — `var(--spacing-small)` between adjacent Pills;',
+    '  `var(--spacing-large)` between the label and the pill row.',
+    '- **Auto-apply** — filters take effect immediately on click. Never pair Pill groups with a',
+    '  dedicated "Apply filters" submit button.',
+].join('\n');
+const DEVELOPER_NOTES = [
+    '### Quirks to know before shipping',
+    '',
+    '**`onclick` fires on mount, not only on user interaction.** The implementation uses',
+    '`useEffect(() => { if (onclick) onclick(checked); }, [checked, onclick])`, which means React',
+    'runs it after the first render. Your handler will receive the initial `initialValue` (default',
+    '`false`) the moment the component mounts — before the user has clicked anything.',
+    '',
+    'To suppress the mount-time call, guard with a ref:',
+    '',
+    '```tsx',
+    'const hasMounted = useRef(false);',
+    '',
+    '<Pill',
+    '  text="Autumn term"',
+    '  onclick={(checked) => {',
+    '    if (!hasMounted.current) { hasMounted.current = true; return; }',
+    '    handleFilter(checked);',
+    '  }}',
+    '/>',
+    '```',
+    '',
+    '**Pill is uncontrolled — there is no `value` prop.** Once mounted, its state is private.',
+    'To reset a pill from outside (e.g. a "Clear all filters" button), change its `key` prop to',
+    'force React to remount it. Note that remounting also triggers the mount-time `onclick` firing.',
+    '',
+    '```tsx',
+    'const [resetKey, setResetKey] = useState(0);',
+    '',
+    '<Pill key={resetKey} text="Autumn term" onclick={handleToggle} />',
+    '<Button type="button" onClick={() => setResetKey(k => k + 1)}>Clear filters</Button>',
+    '```',
+    '',
+    '---',
+    '',
+    '### Accessibility',
+    '',
+    '**Known limitation:** `Pill` renders as a `<span>` with an `onClick` handler. It is not natively',
+    'keyboard-accessible — Tab will not reach it and Space/Enter will not activate it.',
+    '',
+    'Checkbox mode (`checkbox={true}`) IS accessible: the embedded `CheckboxInput` provides a real',
+    '`<input type="checkbox">` that Tab reaches and Space toggles.',
+    '',
+    'For toggle mode on pages where keyboard accessibility is required, apply a wrapper:',
+    '',
+    '```tsx',
+    '// Temporary keyboard workaround for toggle-mode pills',
+    '<span',
+    '  tabIndex={0}',
+    '  role="radio"',
+    '  aria-checked={checked}',
+    '  onKeyDown={e => {',
+    "    if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); handleToggle(); }",
+    '  }}',
+    '>',
+    '  <Pill text="Year 7" onclick={handleToggle} />',
+    '</span>',
+    '```',
+].join('\n');
+const RELATED_COMPONENTS = [
+    '## Related components',
+    '',
+    '[Tag](?path=/docs/components-tag--docs) · [Badge](?path=/docs/components-badge--docs) · [Button](?path=/docs/components-button--docs) · [Tabs](?path=/docs/components-tabs--docs)',
+].join('\n');
+const PROPS_INTRO = 'The preview below is wired to the **Controls** panel — tweak any prop to see the story update in real time.';
+function PillDocsPage() {
+    return (_jsxs(_Fragment, { children: [_jsx(Title, {}), _jsx(Subtitle, {}), _jsx(Markdown, { children: DESCRIPTION_INTRO }), _jsx(DocHeading, { children: "Interactive example" }), _jsx(Markdown, { children: PROPS_INTRO }), _jsx(DocPrimary, {}), _jsx(Controls, {}), _jsx(DocHeading, { children: "Usage guidance" }), _jsx(Markdown, { children: USAGE_GUIDANCE }), _jsx(DocHeading, { children: "Developer notes" }), _jsx(Markdown, { children: DEVELOPER_NOTES }), _jsx(DocHeading, { children: "Examples" }), _jsx(Stories, { title: "" }), _jsx(Markdown, { children: RELATED_COMPONENTS })] }));
+}
+// ---------------------------------------------------------------------------
+// Meta
+// ---------------------------------------------------------------------------
 const meta = {
     title: 'Components/Pill',
     component: Pill,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            page: PillDocsPage,
+        },
+    },
+    argTypes: {
+        text: {
+            control: 'text',
+            description: [
+                'The label rendered inside the pill. Keep to **3 words or fewer** (Confluence spec) —',
+                'short labels scan faster in filter rows.',
+                'Good examples: `"Year 7"`, `"Active"`, `"All"`, `"Pupil Premium"`, `"Flagged"`.',
+            ].join(' '),
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        checkbox: {
+            control: 'boolean',
+            description: [
+                'Switches the pill to **checkbox mode** — embeds a real `CheckboxInput` before the label',
+                'and applies the `--pill-checkbox-*` token family.',
+                'Use `checkbox` for **multi-select** rows where several pills can be active at once.',
+                'Omit (default `false`) for **toggle mode** — single-select, `--pill-single-filter-*` tokens.',
+            ].join(' '),
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        initialValue: {
+            control: 'boolean',
+            description: [
+                'Sets the initial checked/active state on first mount. Defaults to `false` (inactive).',
+                'Use `initialValue={true}` to pre-select a pill — for example, pre-activating an "All"',
+                'pill when a filter row first loads.',
+                '**Note:** when `initialValue={true}`, the `onclick` callback fires on mount with `true`.',
+            ].join(' '),
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        onclick: {
+            control: false,
+            description: [
+                'Callback fired each time the pill\'s checked state changes.',
+                'Receives `true` when the pill becomes active/checked, `false` when it becomes inactive.',
+                'Example: `onclick={checked => onFilterChange("year7", checked)}`.',
+                '**Quirk:** also fires on mount with the current `initialValue`. Guard with a `useRef`',
+                'if you need to suppress the mount-time call. See the component description for the pattern.',
+            ].join(' '),
+            table: {
+                type: { summary: '(checked: boolean) => void' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+    },
 };
-export const Default = {
-    args: {
-        text: 'Default',
-        onclick: () => { console.log('Pill clicked'); },
+export default meta;
+// ---------------------------------------------------------------------------
+// Helper: attach a per-story description to docs
+// ---------------------------------------------------------------------------
+const withDescription = (story, description) => ({
+    ...story,
+    parameters: {
+        ...story.parameters,
+        docs: {
+            ...story.parameters?.docs,
+            description: {
+                story: description,
+            },
+        },
     },
+});
+// ---------------------------------------------------------------------------
+// Template components for stateful / composition stories
+// ---------------------------------------------------------------------------
+const FilterGroupTemplate = () => {
+    const [active, setActive] = useState(null);
+    const yearGroups = ['Year 7', 'Year 8', 'Year 9', 'Year 10', 'Year 11'];
+    return (_jsxs("div", { style: { padding: 'var(--spacing-xlarge)', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsx("p", { className: "ds-text", style: { margin: 0, color: 'var(--color-grey-600)' }, children: "Filter by year group" }), _jsx("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 'var(--spacing-small)' }, children: yearGroups.map(year => (_jsx(Pill, { text: year, initialValue: active === year, onclick: checked => setActive(checked ? year : null) }, year))) })] }));
 };
-export const withCheckbox = {
+const MultiSelectFilterGroupTemplate = () => {
+    const [selected, setSelected] = useState(new Set());
+    const statuses = ['Active', 'Archived', 'Flagged', 'On track', 'At risk'];
+    const toggle = (label, checked) => {
+        setSelected((prev) => {
+            const next = new Set(prev);
+            if (checked) {
+                next.add(label);
+            }
+            else {
+                next.delete(label);
+            }
+            return next;
+        });
+    };
+    return (_jsxs("div", { style: { padding: 'var(--spacing-xlarge)', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsx("p", { className: "ds-text", style: { margin: 0, color: 'var(--color-grey-600)' }, children: "Filter by status" }), _jsx("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 'var(--spacing-small)' }, children: statuses.map(status => (_jsx(Pill, { text: status, checkbox: true, onclick: checked => toggle(status, checked) }, status))) }), selected.size > 0 && (_jsxs("p", { className: "ds-text", style: { margin: 0, color: 'var(--color-grey-600)', fontStyle: 'italic' }, children: ["Selected:", ' ', Array.from(selected).join(', ')] }))] }));
+};
+const WithAllOptionTemplate = () => {
+    const [activeFilters, setActiveFilters] = useState(new Set());
+    const [allActive, setAllActive] = useState(true);
+    const subjects = ['Maths', 'English', 'Science', 'History', 'Art'];
+    const handleAllClick = (checked) => {
+        setAllActive(checked);
+        if (checked) {
+            setActiveFilters(new Set());
+        }
+    };
+    const handleSubjectClick = (subject, checked) => {
+        setActiveFilters((prev) => {
+            const next = new Set(prev);
+            if (checked) {
+                next.add(subject);
+                setAllActive(false);
+            }
+            else {
+                next.delete(subject);
+                if (next.size === 0) {
+                    setAllActive(true);
+                }
+            }
+            return next;
+        });
+    };
+    return (_jsxs("div", { style: { padding: 'var(--spacing-xlarge)', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsx("p", { className: "ds-text", style: { margin: 0, color: 'var(--color-grey-600)' }, children: "Filter by subject" }), _jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 'var(--spacing-small)' }, children: [_jsx(Pill, { text: "All", initialValue: allActive, onclick: handleAllClick }), subjects.map(subject => (_jsx(Pill, { text: subject, initialValue: activeFilters.has(subject), onclick: checked => handleSubjectClick(subject, checked) }, subject)))] })] }));
+};
+const AllVariantsTemplate = () => (_jsxs("div", { style: {
+        padding: 'var(--spacing-xlarge)',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--spacing-xxlarge)',
+    }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsx("p", { className: "ds-text", style: { margin: 0, color: 'var(--color-grey-600)' }, children: "Toggle mode (default)" }), _jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 'var(--spacing-small)' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 'var(--spacing-small)' }, children: [_jsx(Pill, { text: "Inactive" }), _jsx("span", { className: "ds-text", style: { fontSize: 'var(--font-size-1-11)', color: 'var(--color-grey-600)' }, children: "ds-pill__inactive" })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 'var(--spacing-small)' }, children: [_jsx(Pill, { text: "Active", initialValue: true }), _jsx("span", { className: "ds-text", style: { fontSize: 'var(--font-size-1-11)', color: 'var(--color-grey-600)' }, children: "ds-pill__active" })] })] })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsx("p", { className: "ds-text", style: { margin: 0, color: 'var(--color-grey-600)' }, children: "Checkbox mode (checkbox=true)" }), _jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 'var(--spacing-small)' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 'var(--spacing-small)' }, children: [_jsx(Pill, { text: "Unchecked", checkbox: true }), _jsx("span", { className: "ds-text", style: { fontSize: 'var(--font-size-1-11)', color: 'var(--color-grey-600)' }, children: "ds-pill__unchecked" })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 'var(--spacing-small)' }, children: [_jsx(Pill, { text: "Checked", checkbox: true, initialValue: true }), _jsx("span", { className: "ds-text", style: { fontSize: 'var(--font-size-1-11)', color: 'var(--color-grey-600)' }, children: "ds-pill__checked" })] })] })] })] }));
+const ContentGuidelinesTemplate = () => (_jsxs("div", { style: {
+        padding: 'var(--spacing-xlarge)',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--spacing-large)',
+    }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-small)' }, children: [_jsx("p", { className: "ds-text", style: { margin: 0, color: 'var(--color-grey-600)' }, children: "Good (3 words or fewer)" }), _jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 'var(--spacing-small)', alignItems: 'center' }, children: [_jsx(Pill, { text: "All" }), _jsx(Pill, { text: "Year 7" }), _jsx(Pill, { text: "Active" }), _jsx(Pill, { text: "Flagged" }), _jsx(Pill, { text: "Pupil Premium" })] })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-small)' }, children: [_jsx("p", { className: "ds-text", style: { margin: 0, color: 'var(--color-grey-600)' }, children: "Too long (4 or more words) \u2014 use a dropdown instead" }), _jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 'var(--spacing-small)', alignItems: 'center' }, children: [_jsx(Pill, { text: "Currently being assessed" }), _jsx(Pill, { text: "Due for review soon" }), _jsx(Pill, { text: "Needs additional support" })] })] })] }));
+const AccessibilityNoteTemplate = () => (_jsxs("div", { style: {
+        padding: 'var(--spacing-xlarge)',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--spacing-large)',
+        maxWidth: '48rem',
+    }, children: [_jsxs("div", { style: {
+                padding: 'var(--spacing-large)',
+                borderRadius: 'var(--border-radius-small)',
+                border: 'var(--border-weight) solid var(--color-semantic-warning-500)',
+                background: 'var(--color-semantic-warning-050)',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 'var(--spacing-small)',
+            }, children: [_jsx("p", { className: "ds-text", style: { margin: 0, color: 'var(--color-semantic-warning-800)', fontWeight: 'var(--font-weight-semi-bold)' }, children: "Known limitation: keyboard accessibility" }), _jsxs("p", { className: "ds-text", style: { margin: 0, color: 'var(--color-semantic-warning-800)' }, children: ["Toggle-mode", ' ', _jsx("code", { children: "Pill" }), ' ', "renders as a", ' ', _jsx("code", { children: "<span onClick>" }), ' ', "\u2014 it is not reachable via Tab and cannot be activated with Space or Enter. Keyboard-only users and screen reader users cannot interact with it in this mode."] }), _jsxs("p", { className: "ds-text", style: { margin: 0, color: 'var(--color-semantic-warning-800)' }, children: ["Checkbox mode (", _jsx("code", { children: "checkbox={true}" }), ") is accessible: the embedded", ' ', _jsx("code", { children: "CheckboxInput" }), ' ', "provides a real", ' ', _jsx("code", { children: "<input type=\"checkbox\">" }), ' ', "that Tab reaches and Space toggles."] }), _jsxs("p", { className: "ds-text", style: { margin: 0, color: 'var(--color-semantic-warning-800)' }, children: ["For toggle mode where keyboard accessibility is required, wrap each pill and supply the missing semantics manually. See the component description above for the wrapper pattern. Toggle mode pills should carry", ' ', _jsx("code", { children: "role=\"radio\"" }), ' ', "inside a", ' ', _jsx("code", { children: "role=\"radiogroup\"" }), "."] })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-small)' }, children: [_jsx("p", { className: "ds-text", style: { margin: 0, color: 'var(--color-grey-600)' }, children: "Accessible example \u2014 checkbox mode (Year 8 cohort filter)" }), _jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 'var(--spacing-small)' }, children: [_jsx(Pill, { text: "Year 7", checkbox: true }), _jsx(Pill, { text: "Year 8", checkbox: true, initialValue: true }), _jsx(Pill, { text: "Year 9", checkbox: true })] }), _jsx("p", { className: "ds-text", style: { margin: 0, color: 'var(--color-grey-600)', fontStyle: 'italic' }, children: "Tab into any of the pills above \u2014 the embedded checkbox is focusable and Space toggles it." })] })] }));
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+export const Default = withDescription({
     args: {
-        text: 'Checkbox',
-        checkbox: true,
-        onclick: () => { console.log('Pill with checkbox clicked'); },
+        text: 'Year 7',
+        checkbox: false,
+        initialValue: false,
+        onclick: fn(),
     },
-};
-export const preChecked = {
+    render: args => _jsx(Pill, { ...args }),
+}, 'The interactive canvas. Every prop is wired to the Controls panel below — toggle `checkbox` to switch between single-select and multi-select modes, toggle `initialValue` to start in the active/checked state. The `onclick` callback fires into the Actions panel on every state change.');
+export const ToggleActive = withDescription({
     args: {
-        text: 'Checkbox',
+        text: 'Active',
         initialValue: true,
+    },
+    parameters: {
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Pill } from '@arbor-education/design-system.components';
+
+function ToggleActiveExample() {
+  return <Pill text="Active" initialValue={true} />;
+}
+export default ToggleActiveExample;
+`.trim(),
+            },
+        },
+    },
+}, 'Toggle mode pill in its active state (`ds-pill__active`). This is what a pill looks like when the user has selected it — background from `--pill-single-filter-active-color-background`, border from `--pill-single-filter-active-color-border`. Click to toggle back to inactive.');
+export const CheckboxMode = withDescription({
+    args: {
+        text: 'Flagged',
         checkbox: true,
-        onclick: () => { console.log('Pill with checkbox clicked'); },
     },
-};
-export default meta;
+    parameters: {
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Pill } from '@arbor-education/design-system.components';
+
+function CheckboxModeExample() {
+  return <Pill text="Flagged" checkbox={true} />;
+}
+export default CheckboxModeExample;
+`.trim(),
+            },
+        },
+    },
+}, 'Checkbox mode (`checkbox={true}`) in its default unchecked state. A real `CheckboxInput` is embedded before the label — Tab reaches it, Space toggles it. This is the **accessible mode** of Pill. Use it for multi-select filter rows where more than one option can be active at once. Tokens: `--pill-checkbox-default-color-*`.');
+export const CheckboxModeSelected = withDescription({
+    args: {
+        text: 'Flagged',
+        checkbox: true,
+        initialValue: true,
+    },
+    parameters: {
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Pill } from '@arbor-education/design-system.components';
+
+function CheckboxModeSelectedExample() {
+  return <Pill text="Flagged" checkbox={true} initialValue={true} />;
+}
+export default CheckboxModeSelectedExample;
+`.trim(),
+            },
+        },
+    },
+}, 'Checkbox mode starting in the checked state (`ds-pill__checked`) via `initialValue={true}`. Background: `--pill-checkbox-selected-color-background` (a brand-050 wash). Border: `--pill-checkbox-selected-color-border` (brand-600). The embedded checkbox also renders checked. Click to uncheck.');
+export const AllVariants = withDescription({
+    render: AllVariantsTemplate,
+    parameters: {
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Pill } from '@arbor-education/design-system.components';
+
+function AllVariantsExample() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)', padding: 'var(--spacing-xlarge)' }}>
+      <div style={{ display: 'flex', gap: 'var(--spacing-small)' }}>
+        {/* Toggle mode — single-select, --pill-single-filter-* tokens */}
+        <Pill text="Inactive" />
+        <Pill text="Active" initialValue />
+      </div>
+      <div style={{ display: 'flex', gap: 'var(--spacing-small)' }}>
+        {/* Checkbox mode — multi-select, --pill-checkbox-* tokens */}
+        <Pill text="Unchecked" checkbox />
+        <Pill text="Checked" checkbox initialValue />
+      </div>
+    </div>
+  );
+}
+export default AllVariantsExample;
+`.trim(),
+            },
+        },
+    },
+}, 'All four visual states side by side: toggle inactive, toggle active, checkbox unchecked, checkbox checked. Each cell shows the CSS class name applied. A quick visual reference for both token families — `--pill-single-filter-*` for toggle mode and `--pill-checkbox-*` for checkbox mode.');
+export const FilterGroup = withDescription({
+    render: FilterGroupTemplate,
+    parameters: {
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { useState } from 'react';
+import { Pill } from '@arbor-education/design-system.components';
+
+function YearGroupFilter() {
+  const [active, setActive] = useState<string | null>(null);
+  const yearGroups = ['Year 7', 'Year 8', 'Year 9', 'Year 10', 'Year 11'];
+
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--spacing-small)' }}>
+      {yearGroups.map(year => (
+        <Pill
+          key={year}
+          text={year}
+          initialValue={active === year}
+          onclick={checked => setActive(checked ? year : null)}
+        />
+      ))}
+    </div>
+  );
+}
+export default YearGroupFilter;
+`.trim(),
+            },
+        },
+    },
+}, 'A realistic single-select filter row: five year-group pills in toggle mode. Only one pill can be active at a time — clicking a new pill deactivates the previous selection. Layout: `display: flex`, `flexWrap: wrap`, `gap: var(--spacing-small)`. The wrapping means pills reflow gracefully on narrower viewports.');
+export const MultiSelectFilterGroup = withDescription({
+    render: MultiSelectFilterGroupTemplate,
+    parameters: {
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { useState } from 'react';
+import { Pill } from '@arbor-education/design-system.components';
+
+function StatusFilter() {
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const statuses = ['Active', 'Archived', 'Flagged', 'On track', 'At risk'];
+
+  const toggle = (label: string, checked: boolean) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (checked) next.add(label);
+      else next.delete(label);
+      return next;
+    });
+  };
+
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--spacing-small)' }}>
+      {statuses.map(status => (
+        <Pill
+          key={status}
+          text={status}
+          checkbox
+          onclick={checked => toggle(status, checked)}
+        />
+      ))}
+    </div>
+  );
+}
+export default StatusFilter;
+`.trim(),
+            },
+        },
+    },
+}, 'A multi-select filter row with `checkbox={true}`. Any number of pills can be active simultaneously — great for "filter by status" where a user might want to see both Flagged and At risk students at the same time. The selected labels echo below the row as you toggle pills.');
+export const WithAllOption = withDescription({
+    render: WithAllOptionTemplate,
+    parameters: {
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { useState } from 'react';
+import { Pill } from '@arbor-education/design-system.components';
+
+function SubjectFilter() {
+  const [activeFilters, setActiveFilters] = useState<Set<string>>(new Set());
+  const [allActive, setAllActive] = useState(true);
+  const subjects = ['Maths', 'English', 'Science', 'History', 'Art'];
+
+  const handleAllClick = (checked: boolean) => {
+    setAllActive(checked);
+    if (checked) setActiveFilters(new Set());
+  };
+
+  const handleSubjectClick = (subject: string, checked: boolean) => {
+    setActiveFilters((prev) => {
+      const next = new Set(prev);
+      if (checked) {
+        next.add(subject);
+        setAllActive(false);
+      } else {
+        next.delete(subject);
+        if (next.size === 0) setAllActive(true);
+      }
+      return next;
+    });
+  };
+
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--spacing-small)' }}>
+      <Pill text="All" initialValue={allActive} onclick={handleAllClick} />
+      {subjects.map(subject => (
+        <Pill
+          key={subject}
+          text={subject}
+          initialValue={activeFilters.has(subject)}
+          onclick={checked => handleSubjectClick(subject, checked)}
+        />
+      ))}
+    </div>
+  );
+}
+export default SubjectFilter;
+`.trim(),
+            },
+        },
+    },
+}, 'The "All" reset pattern recommended by the Confluence design spec. An "All" pill sits at the start of the row — clicking it clears all subject filters and activates itself. Selecting any individual subject automatically deactivates "All". Deselecting every subject reactivates "All" so the row is never left in an ambiguous empty state. The "All" pill uses no special props — it is a plain `Pill` at position zero.');
+export const ContentGuidelines = withDescription({
+    render: ContentGuidelinesTemplate,
+    parameters: {
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Pill } from '@arbor-education/design-system.components';
+
+function ContentGuidelinesExample() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)', padding: 'var(--spacing-xlarge)' }}>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--spacing-small)' }}>
+        {/* Good — 3 words or fewer (Confluence spec) */}
+        <Pill text="All" />
+        <Pill text="Year 7" />
+        <Pill text="Active" />
+        <Pill text="Flagged" />
+        <Pill text="Pupil Premium" />
+      </div>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--spacing-small)' }}>
+        {/* Too long — 4 or more words. Use a dropdown or combobox instead. */}
+        <Pill text="Currently being assessed" />
+        <Pill text="Due for review soon" />
+        <Pill text="Needs additional support" />
+      </div>
+    </div>
+  );
+}
+export default ContentGuidelinesExample;
+`.trim(),
+            },
+        },
+    },
+}, 'A side-by-side comparison of labels that follow the 3-word rule and labels that are too long. The Confluence spec is unambiguous: three words or fewer. Labels like "Currently being assessed" belong in a dropdown — they are too verbose for a filter pill and will stretch the component in ways that break filter-row layouts.');
+export const AccessibilityNote = withDescription({
+    render: AccessibilityNoteTemplate,
+    parameters: {
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Pill } from '@arbor-education/design-system.components';
+
+function AccessibilityNoteExample() {
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--spacing-small)', padding: 'var(--spacing-xlarge)' }}>
+      {/* Checkbox mode embeds a real <input type="checkbox"> — Tab reaches it, Space toggles it. */}
+      <Pill text="Year 7" checkbox />
+      <Pill text="Year 8" checkbox initialValue />
+      <Pill text="Year 9" checkbox />
+    </div>
+  );
+}
+export default AccessibilityNoteExample;
+`.trim(),
+            },
+        },
+    },
+}, '**Read before shipping to production.** Toggle-mode `Pill` is not keyboard-accessible — it renders as `<span onClick>` with no `tabIndex` or ARIA role. Checkbox mode IS accessible. This story documents the limitation and shows an accessible checkbox-mode example you can interact with via keyboard. See the component description for the toggle-mode wrapper workaround.');
 //# sourceMappingURL=Pill.stories.js.map

package/dist/components/pill/Pill.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.stories.js","sourceRoot":"","sources":["../../../src/components/pill/Pill.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,MAAM,IAAI,GAAsB;IAC9B,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,IAAI;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS;QACf,OAAO,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;KAChD;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,QAAQ,EAAE,IAAI;QACd,OAAO,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,GAAG,CAAC,4BAA4B,CAAC,CAAC,CAAC,CAAC;KAC9D;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,YAAY,EAAE,IAAI;QAClB,QAAQ,EAAE,IAAI;QACd,OAAO,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,GAAG,CAAC,4BAA4B,CAAC,CAAC,CAAC,CAAC;KAC9D;CACF,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Pill.stories.js","sourceRoot":"","sources":["../../../src/components/pill/Pill.stories.tsx"],"names":[],"mappings":"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"}