ionbase-ui 0.59.0 → 0.69.0

package/dist/meta/AgentActivityStep.json

@@ -43,8 +43,8 @@
       "note": "the step in plain language"
     },
     "detail": {
-      "accepts": "text",
-      "note": "the result, a count, a tool name — whatever makes the step checkable"
+      "accepts": "text, ToolCall, ApprovalGate",
+      "note": "the result, a count, a tool name — whatever makes the step checkable. Block content is valid here: a ToolCall as evidence under the step, or the ApprovalGate the step is waiting on"
     }
   },
   "a11y": {

package/dist/meta/DatePicker.json

@@ -0,0 +1,270 @@
+{
+  "name": "DatePicker",
+  "source": "src/components/DatePicker.tsx",
+  "propsType": "DatePickerProps",
+  "description": "DatePicker — a segmented date field with a calendar attached.\n\nWHY NOT `<input type=\"date\">`\n\nThe native control is genuinely good on mobile and genuinely unusable as a\ndesign system component on desktop: its calendar cannot be styled at all, it\ncannot express an unavailable date that is not part of a continuous min/max\nrange, and Safari on macOS renders no calendar button whatsoever. A system\nwhose date field looks like a different control in every browser is not a\ndesign system, so this rebuilds it — and pays for that by having to rebuild\nthe keyboard handling and the screen-reader semantics the native control gave\naway for free. React Aria's `useDatePicker` is what builds them back.\n\nTHE VALUE IS A STRING, THE DISPLAY IS NOT\n\n`value` is always `YYYY-MM-DD` in the Gregorian calendar. What the user SEES\nis their own locale's field order and their own calendar system, resolved\nfrom `Intl` — so a German reader edits DD.MM.YYYY and the value still comes\nback as `2026-04-12`. See `iso-date.ts` for why the public type is not\nreact-aria's `CalendarDate`.\n\nTHE FIELD IS EDITABLE WITHOUT THE CALENDAR, AND THAT IS THE POINT\n\nTyping a date is faster than clicking one for anybody who knows the date they\nwant, and paging a calendar back to a birth year is miserable. The segments\ntake digits and arrow keys directly; the calendar is for the cases where the\ndate is being chosen rather than recalled.",
+  "import": "import { DatePicker } from 'ionbase-ui';",
+  "status": "stable",
+  "summary": "A segmented date field with a calendar attached, taking and returning a YYYY-MM-DD string.",
+  "useWhen": [
+    "the user picks one calendar date — an event date, a due date, a birthday",
+    "the date has to be typed as well as clicked, because the user often already knows it",
+    "some dates must be refused individually rather than as a continuous range"
+  ],
+  "useInstead": [
+    {
+      "when": "the user picks a start and an end",
+      "use": "DateRangePicker",
+      "why": "two DatePickers cannot stop the end preceding the start, cannot show the days between them, and give the user two calendars to reconcile from memory"
+    },
+    {
+      "when": "the value is a month or a year rather than a day",
+      "use": "Select",
+      "why": "a calendar grid to choose 'March' is twelve options rendered as thirty-one"
+    },
+    {
+      "when": "the field is one of a short, known set of dates the product defines",
+      "use": "Select or RadioGroup",
+      "why": "picking from four delivery slots is a choice from a list, not a date"
+    },
+    {
+      "when": "a time of day is part of the value",
+      "use": "Input",
+      "why": "this picker is fixed to day granularity; a time picker is not yet in this system"
+    }
+  ],
+  "variants": {
+    "size": {
+      "sm": {
+        "use": "dense forms, table filters"
+      },
+      "md": {
+        "use": "the default"
+      },
+      "lg": {
+        "use": "prominent single-field forms"
+      }
+    }
+  },
+  "a11y": {
+    "guarantees": [
+      "each editable segment is its own tab stop, as in Chrome's native <input type=date>; the locale's separators are not, and arrow keys move between segments as well, so neither convention has to be learned",
+      "the segments sit in one labelled group, so the field's name is announced once on entry rather than repeated per segment",
+      "each segment announces its own name, value and bounds, so 'month, 4, minimum 1, maximum 12' is heard rather than an opaque number",
+      "field order and separators come from Intl, so a German reader edits DD.MM.YYYY and a US reader MM/DD/YYYY from the same component and the same value",
+      "the calendar overlay is modal: focus moves into the grid, the rest of the page is hidden from assistive tech, Escape closes it and focus returns to the field",
+      "every day cell carries the full date as its accessible name in the reader's own language, so the narrow weekday headers are never load-bearing",
+      "unavailable and disabled days are distinguished visually and in the accessible name, not by colour alone",
+      "today is marked with a dot rather than a ring, so it cannot be mistaken for a second selected day",
+      "the selected fill and the segment focus box are redeclared under forced-colors, where background-color is discarded"
+    ],
+    "requires": [
+      "`label`, or an `aria-label` when no visible label is rendered",
+      "`calendarLabel` wording if 'Open calendar' is wrong for the context — it is the button's whole accessible name"
+    ]
+  },
+  "antiPatterns": [
+    {
+      "dont": "passing a Date object, a timestamp, or a locale-formatted string as `value`",
+      "why": "the value is a calendar date with no time and no zone, spelled YYYY-MM-DD. `new Date('2026-04-12')` parses as UTC midnight and displays as the 11th for every reader west of Greenwich. A malformed value throws with the prop name rather than rendering an empty field"
+    },
+    {
+      "dont": "using `isDateUnavailable` to express a lower or upper bound",
+      "why": "`minValue` and `maxValue` also disable the navigation arrows past the bound, so the user cannot page into a month with nothing selectable in it. A predicate is for the holes inside the bounds"
+    },
+    {
+      "dont": "hiding the field and leaving only the calendar button",
+      "why": "typing a date is faster than clicking one for anyone who already knows it, and paging a calendar back to a birth year is the worst interaction in any form"
+    },
+    {
+      "dont": "styling a day cell with :hover for the keyboard highlight",
+      "why": "use [data-selected], [data-today], [data-disabled] and [data-unavailable]. Pointer hover and keyboard focus are different states here and a grid where they disagree has two apparent cursors"
+    },
+    {
+      "dont": "reading the posted form value from the segments",
+      "why": "they are spinbuttons with no name. Pass `name` and the component posts the ISO value in a hidden input"
+    },
+    {
+      "dont": "wrapping it in a <label>",
+      "why": "the group is a set of spinbuttons rather than one form control, so there is nothing for htmlFor to point at. Pass `label` and react-aria wires the name through aria-labelledby"
+    },
+    {
+      "dont": "adding a roving tabindex so the field becomes one tab stop",
+      "why": "it buys back two tabs per field and costs the ability to Tab straight to the year, which is the segment users most often fix on its own. It also diverges from the native date input, which is the convention they already have"
+    }
+  ],
+  "slots": {
+    "label": {
+      "expects": "what the date is for — 'Event starts', not 'Date'"
+    },
+    "description": {
+      "expects": "helper text under the field; replaced by `errorMessage` when `isInvalid`"
+    },
+    "errorMessage": {
+      "expects": "what is wrong and what would be right, shown only when `isInvalid`"
+    }
+  },
+  "stylesheet": "src/styles/date-picker.css",
+  "tokens": [
+    "--border-focus",
+    "--border-subtle",
+    "--border-width-default",
+    "--border-width-thick",
+    "--font-family-sans",
+    "--font-weight-medium",
+    "--font-weight-regular",
+    "--font-weight-semibold",
+    "--icon-disabled",
+    "--icon-interactive",
+    "--icon-on-color",
+    "--icon-primary",
+    "--icon-secondary",
+    "--icon-size-sm",
+    "--ion-calendar-day-size",
+    "--ion-input-icon-size",
+    "--ion-shadow-shadow-lg",
+    "--radius-2xs",
+    "--radius-full",
+    "--radius-md",
+    "--radius-sm",
+    "--spacing-12",
+    "--spacing-2",
+    "--spacing-24",
+    "--spacing-32",
+    "--spacing-4",
+    "--spacing-6",
+    "--spacing-8",
+    "--surface-hover",
+    "--surface-primary",
+    "--surface-raised",
+    "--text-default",
+    "--text-disabled",
+    "--text-on-color",
+    "--text-secondary",
+    "--text-tertiary",
+    "--type-body-sm",
+    "--type-body-sm-line-height",
+    "--type-caption",
+    "--type-caption-line-height"
+  ],
+  "props": {
+    "label": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Field label. Required for a usable control — see `a11y.requires`."
+    },
+    "description": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Helper text below the field."
+    },
+    "errorMessage": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Replaces the helper text when `isInvalid` is set."
+    },
+    "isInvalid": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "isDisabled": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "isReadOnly": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "isRequired": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "size": {
+      "type": "DatePickerSize | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Matches Input's `Size` variant: Small, Medium, Large.",
+      "values": [
+        "sm",
+        "md",
+        "lg"
+      ]
+    },
+    "value": {
+      "type": "string | null | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "The selected date as `YYYY-MM-DD`. `null` means nothing is selected.\n\nNot a `Date` and not a timestamp — a calendar date has no time and no\ntimezone, so it cannot shift across midnight the way `new Date('2026-04-12')`\ndoes for every reader west of Greenwich. A malformed value throws rather\nthan rendering an empty field."
+    },
+    "defaultValue": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "The initial date as `YYYY-MM-DD`, for an uncontrolled picker."
+    },
+    "onChange": {
+      "type": "((value: IsoDate | null) => void) | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Fires with `YYYY-MM-DD`, or `null` when the field is cleared."
+    },
+    "minValue": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Earliest selectable date, `YYYY-MM-DD`. Earlier dates are unreachable."
+    },
+    "maxValue": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Latest selectable date, `YYYY-MM-DD`."
+    },
+    "isDateUnavailable": {
+      "type": "((date: IsoDate) => boolean) | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Individual dates the calendar refuses — weekends, holidays, booked days.\nReceives `YYYY-MM-DD`. Use `minValue`/`maxValue` for a continuous bound;\nthis is for the holes inside it."
+    },
+    "name": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Posts the value under this name, for an uncontrolled form."
+    },
+    "calendarLabel": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Accessible label for the button that opens the calendar."
+    },
+    "className": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "wrapperClassName": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "id": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own"
+    }
+  },
+  "propCounts": {
+    "own": 19,
+    "aria": 0,
+    "dom": 0,
+    "other": 0
+  }
+}

package/dist/meta/DateRangePicker.json

@@ -0,0 +1,284 @@
+{
+  "name": "DateRangePicker",
+  "source": "src/components/DateRangePicker.tsx",
+  "propsType": "DateRangePickerProps",
+  "description": "DateRangePicker — two segmented date fields with one calendar between them.\n\nNOT TWO `DatePicker`s SIDE BY SIDE, and the difference is the whole reason\nthis exists. Two independent pickers cannot stop the end date being before\nthe start, cannot show the days between them as a band, and give the user two\ncalendars to reconcile by memory. `useDateRangePicker` owns both ends: the\nsecond click completes the range in whichever order the two dates fall, the\nband follows the pointer while it is being dragged out, and a range cannot be\nmade to run backwards.\n\nTHE VALUE COMMITS LIVE. THERE IS NO APPLY BUTTON.\n\n`onChange` fires the moment the second end lands, and the calendar closes.\nThe reference designs this was drawn from put Clear and Apply under the grid,\nwhich is a draft model: the popover holds a pending range and only Apply\npromotes it. That was considered and rejected. Escape and an outside click\nwould then silently discard a selection the user watched themselves make —\nand there is no way to tell those two gestures apart from \"I am done\". A\nbutton labelled Apply beside a value that already applied is worse still.\n\nClear stays, because clearing is a real action with no other affordance.\n\nBOTH ENDS OR NEITHER\n\n`value` has no half-open form. A range with a start and no end is a state the\ncalendar passes THROUGH between the two clicks; it is never a value the\ncaller is handed, because \"everything after March\" and \"March to today\" are\ndifferent questions and a `null` end cannot say which one was meant. A caller\nwho wants an open end passes a sentinel of their own choosing as `maxValue`.",
+  "import": "import { DateRangePicker } from 'ionbase-ui';",
+  "status": "stable",
+  "summary": "Two segmented date fields sharing one calendar, returning an inclusive { start, end } of YYYY-MM-DD strings.",
+  "useWhen": [
+    "the user picks a period — a report window, a stay, a filter over time",
+    "the range commonly crosses a month boundary, so both ends need to be visible at once",
+    "there are conventional periods worth offering as shortcuts: last 7 days, month to date, year to date"
+  ],
+  "useInstead": [
+    {
+      "when": "the user picks one date",
+      "use": "DatePicker"
+    },
+    {
+      "when": "the choice is really a named period and the exact dates are incidental",
+      "use": "Select",
+      "why": "if 'Last 30 days' is the answer rather than a shortcut to one, a calendar is scaffolding around a list of five options"
+    },
+    {
+      "when": "one end is open — everything before, or everything since",
+      "use": "DatePicker",
+      "why": "with the open end expressed as minValue or maxValue. This component has no half-open value on purpose; see antiPatterns"
+    }
+  ],
+  "variants": {
+    "size": {
+      "sm": {
+        "use": "dense forms, table filters, dashboard toolbars"
+      },
+      "md": {
+        "use": "the default"
+      },
+      "lg": {
+        "use": "prominent single-field forms"
+      }
+    }
+  },
+  "a11y": {
+    "guarantees": [
+      "both fields sit in one labelled group; each announces its own name, so 'Start Date' and 'End Date' are heard without a visible sublabel, and each editable segment is its own tab stop as it is in DatePicker",
+      "the dash between them is aria-hidden — the fields have already said what they are, and a spoken dash adds nothing",
+      "the calendar is modal: focus enters the grid, the page behind is hidden from assistive tech, Escape closes and focus returns",
+      "a range cannot be made to run backwards, in either direction of selection, and cannot be dragged across an unavailable day",
+      "preset rows are buttons in a labelled group carrying aria-pressed, so 'which shortcut is active' is answerable without seeing the tint",
+      "the selected preset is marked by weight as well as by background, so it does not rely on colour alone",
+      "range endpoints and the band between them keep their fill under forced-colors, where background-color is otherwise discarded",
+      "the rail stacks above the grids below 32rem rather than being hidden, because shortcuts matter most on the device where dragging across two months is worst"
+    ],
+    "requires": [
+      "`label`, or an `aria-label` when no visible label is rendered",
+      "`presetsLabel` wording if the default is wrong for the context — it names the whole shortcut group",
+      "preset labels that say what period they select, since the label is the button's entire accessible name"
+    ]
+  },
+  "antiPatterns": [
+    {
+      "dont": "expecting an Apply button, or adding one",
+      "why": "the value commits when the second end lands and the calendar closes. A draft model makes Escape and an outside click silently discard a selection the user watched themselves make, and there is no way to tell those gestures apart from 'I am done'. Clear exists because clearing has no other affordance"
+    },
+    {
+      "dont": "passing a range with only one end, or reading one back",
+      "why": "a start with no end is a state the calendar passes through between the two clicks, never a value the caller is handed. 'Everything after March' and 'March to today' are different questions and a null end cannot say which was meant"
+    },
+    {
+      "dont": "writing a relative preset as a literal object",
+      "why": "`value: { start: '…', end: '…' }` is evaluated once, when the module is first imported. 'Last 7 days' is then seven days before whenever the tab was opened. Pass a function; it is re-run each time the calendar opens"
+    },
+    {
+      "dont": "composing this out of two DatePickers",
+      "why": "two independent pickers cannot stop the end preceding the start, cannot draw the band between the ends, and make the user reconcile two calendars from memory"
+    },
+    {
+      "dont": "setting visibleMonths to 1 for a filter that usually spans weeks",
+      "why": "the user then pages back and forth to see both ends of their own selection. One month is for ranges that genuinely sit inside one"
+    },
+    {
+      "dont": "treating `end` as exclusive",
+      "why": "the range is closed. A stay of 3 nights from the 1st ends on the 4th in checkout terms and on the 3rd here; convert at your boundary, not in the picker"
+    }
+  ],
+  "slots": {
+    "label": {
+      "expects": "what the period is for — 'Reporting period', not 'Dates'"
+    },
+    "presets": {
+      "expects": "conventional periods for this screen, longest-lived first: today, last 7 days, month to date, year to date"
+    },
+    "description": {
+      "expects": "helper text under the fields; replaced by `errorMessage` when `isInvalid`"
+    },
+    "errorMessage": {
+      "expects": "what is wrong with the range and what would be right, shown only when `isInvalid`"
+    }
+  },
+  "stylesheet": "src/styles/date-range-picker.css",
+  "tokens": [
+    "--border-focus",
+    "--border-subtle",
+    "--border-width-default",
+    "--border-width-thick",
+    "--font-family-sans",
+    "--font-weight-medium",
+    "--font-weight-regular",
+    "--icon-disabled",
+    "--icon-interactive",
+    "--ion-input-icon-size",
+    "--radius-2xs",
+    "--radius-full",
+    "--radius-none",
+    "--radius-sm",
+    "--spacing-12",
+    "--spacing-2",
+    "--spacing-4",
+    "--spacing-6",
+    "--spacing-8",
+    "--surface-hover",
+    "--surface-primary",
+    "--surface-primary-subtle",
+    "--surface-primary-subtle-hover",
+    "--surface-raised",
+    "--text-default",
+    "--text-disabled",
+    "--text-interactive",
+    "--text-interactive-hover",
+    "--text-on-color",
+    "--text-primary",
+    "--text-tertiary",
+    "--type-body-sm",
+    "--type-body-sm-line-height"
+  ],
+  "props": {
+    "label": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Field label. Required for a usable control — see `a11y.requires`."
+    },
+    "description": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Helper text below the field."
+    },
+    "errorMessage": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Replaces the helper text when `isInvalid` is set."
+    },
+    "isInvalid": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "isDisabled": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "isReadOnly": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "isRequired": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "size": {
+      "type": "DateRangePickerSize | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Matches Input's `Size` variant: Small, Medium, Large.",
+      "values": [
+        "sm",
+        "md",
+        "lg"
+      ]
+    },
+    "value": {
+      "type": "DateRange | null | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "The selected range, both ends as `YYYY-MM-DD`. `null` means no range.\nA half-open range is not representable on purpose — see `antiPatterns`."
+    },
+    "defaultValue": {
+      "type": "DateRange | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "The initial range, for an uncontrolled picker."
+    },
+    "onChange": {
+      "type": "((value: DateRange | null) => void) | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Fires with both ends, or `null` when the range is cleared."
+    },
+    "minValue": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Earliest selectable date, `YYYY-MM-DD`."
+    },
+    "maxValue": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Latest selectable date, `YYYY-MM-DD`."
+    },
+    "isDateUnavailable": {
+      "type": "((date: IsoDate) => boolean) | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Individual dates the calendar refuses. Receives `YYYY-MM-DD`.\n\nA range may not be dragged ACROSS one of these — react-aria stops the\nselection at the first unavailable day, which is what makes \"book a room\nfor these nights\" correct rather than merely styled."
+    },
+    "presets": {
+      "type": "readonly DateRangePreset[] | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Shortcut rows beside the calendar. Omitted, no rail is rendered."
+    },
+    "visibleMonths": {
+      "type": "2 | 3 | 1 | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "How many months the calendar shows at once. Two by default: a range that\ncrosses a month boundary is the common case, and a one-month calendar\nmakes the user page back and forth to see both ends of their own selection."
+    },
+    "isClearable": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Show a Clear button under the calendar. Defaults to `true`."
+    },
+    "name": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Posts `<name>-start` and `<name>-end` for an uncontrolled form."
+    },
+    "calendarLabel": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Accessible label for the button that opens the calendar."
+    },
+    "clearLabel": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "presetsLabel": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "className": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "wrapperClassName": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "id": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own"
+    }
+  },
+  "propCounts": {
+    "own": 24,
+    "aria": 0,
+    "dom": 0,
+    "other": 0
+  }
+}

package/dist/meta/Header.json

@@ -40,7 +40,8 @@
     "guarantees": [
       "the mobile toggle carries `aria-expanded` and `aria-controls` pointing at the menu container",
       "Escape closes the open mobile menu — and the listener sits on the header, so a header that never opens never listens",
-      "the slots are rendered once, so no nav link exists twice in the accessibility tree"
+      "the slots are rendered once, so no nav link exists twice in the accessibility tree",
+      "with `menuType=\"dialog\"` the toggle carries `aria-haspopup=\"dialog\"` instead of `aria-controls` — the Drawer it opens is not in the DOM while closed — and comes first in DOM order as well as on screen"
     ],
     "requires": [
       "`menuLabel` — the mobile toggle is icon-only and has no other name"
@@ -61,8 +62,27 @@
     {
       "dont": "passing `open` without `onOpenChange`",
       "why": "controlled with no handler means the toggle can never change it"
+    },
+    {
+      "dont": "a second menu button in `brand` to open a navigation Drawer",
+      "do": "<Header menuType=\"dialog\" open={navOpen} onOpenChange={setNavOpen} />",
+      "why": "the built-in toggle still renders, so a phone shows two menu buttons that open different things"
+    },
+    {
+      "dont": "NavItems in `center` with `menuType=\"dialog\"`",
+      "why": "nothing collapses them any more — they overflow a phone, and they duplicate the Sidebar the dialog opens"
     }
   ],
+  "variants": {
+    "menuType": {
+      "panel": {
+        "use": "the default, Figma's Mobile-Open — `center` and `end` drop into a panel below the bar"
+      },
+      "dialog": {
+        "use": "the app's navigation is a Sidebar. The toggle moves to the start of the bar and only reports `onOpenChange`; open a Drawer holding the same Sidebar with it. `center` and `end` stay in the bar at every width"
+      }
+    }
+  },
   "stylesheet": "src/styles/header.css",
   "tokens": [
     "--border-default",
@@ -135,6 +155,16 @@
       "origin": "own",
       "description": "Accessible name for the mobile menu toggle."
     },
+    "menuType": {
+      "type": "\"dialog\" | \"panel\" | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "What the mobile toggle opens.\n\n`panel` (default) is Figma's Mobile-Open: `center` and `end` drop below the\nbar. `dialog` is for an app whose navigation lives in a Sidebar: the toggle\nsits at the start of the bar and only reports `onOpenChange`, the caller\nopens a Drawer with it, and `center` and `end` stay in the bar at every\nwidth — so keep `center` empty and `end` short.",
+      "values": [
+        "dialog",
+        "panel"
+      ]
+    },
     "children": {
       "type": "React.ReactNode",
       "required": false,
@@ -142,7 +172,7 @@
     }
   },
   "propCounts": {
-    "own": 8,
+    "own": 9,
     "aria": 0,
     "dom": 276,
     "other": 0