@eifi1/ui-kit 0.31.1 → 0.32.1

package/dist/components/phone-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/phone-input.tsx"],"sourcesContent":["import { forwardRef, useId, useState } from \"react\";\nimport type { ChangeEvent, FocusEvent } from \"react\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport {\n  PHONE_COUNTRIES,\n  PHONE_DIAL_CODES,\n  formatNationalPhone,\n  formatPhone,\n  isE164,\n  parsePhone,\n} from \"../lib/phone\";\nimport type { ParsedPhone, PhoneCountry, PhoneCountryCode } from \"../lib/phone\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\nimport { Input, Select, type InputProps } from \"./ui\";\n\n// ── Labels ────────────────────────────────────────────────────────────────────\n\n/** The words {@link PhoneInput} renders on its own behalf. */\nexport interface PhoneInputLabels {\n  /** The country-code select's accessible name. */\n  countryCode: string;\n  /** The select's last option: a number from a country not listed, typed with its\n   *  own \"+\". */\n  other: string;\n}\n\nexport const DEFAULT_PHONE_INPUT_LABELS: PhoneInputLabels = {\n  countryCode: \"Country code\",\n  other: \"Other\",\n};\n\n/**\n * The `phoneInput` namespace: prop > `<UiKitProvider labels>` > English (0.22.0).\n */\nfunction usePhoneInputLabels(prop: Partial<PhoneInputLabels> | undefined): PhoneInputLabels {\n  const labels: PhoneInputLabels = useKitLabels(\"phoneInput\", DEFAULT_PHONE_INPUT_LABELS, prop);\n  return labels;\n}\n\n// ── Helpers ───────────────────────────────────────────────────────────────────\n\n/** The caption and the error under the row — the type every kit field uses for them\n *  (Select's caption, Input's `error`). */\nconst CAPTION_CLASS = \"mt-1 text-[11px] leading-tight text-[var(--text-muted)]\";\nconst ERROR_CLASS = \"mt-1 text-[11px] leading-tight text-[var(--danger)]\";\n\nconst isTextHint = (hint: unknown): hint is string | number =>\n  (typeof hint === \"string\" && hint !== \"\") || typeof hint === \"number\";\n\n/** A stored value read back: an E.164 number these rules can read, else `null`. */\nfunction storedNumber(value: string): ParsedPhone | null {\n  return isE164(value) ? parsePhone(value, \"other\") : null;\n}\n\n/** The select's country for a stored E.164 value, or `null` for free text. */\nfunction countryOf(value: string): PhoneCountry | null {\n  const parsed = storedNumber(value);\n  return parsed ? (parsed.country ?? \"other\") : null;\n}\n\n/** What the field emits for typed text: E.164 when it reads, the text unchanged when\n *  it does not. */\nfunction emitFor(raw: string, country: PhoneCountry): string {\n  return parsePhone(raw, country)?.e164 ?? raw;\n}\n\n/**\n * The text a stored value shows, outside of typing. Under its own country: the national\n * number grouped (\"21 000 00 01\" beside \"CH +41\"). Under another (a \"+33\" number while\n * the select says \"Other\"): the whole international number. Free text: as it is.\n */\nfunction displayOf(value: string, country: PhoneCountry): string {\n  const parsed = storedNumber(value);\n  if (!parsed) return value;\n  if (parsed.country !== null && parsed.country === country) {\n    return formatNationalPhone(parsed.national, parsed.country);\n  }\n  return formatPhone(parsed.e164);\n}\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport interface PhoneInputProps extends Omit<InputProps, \"type\" | \"value\" | \"defaultValue\"> {\n  /** The number: E.164 (\"+41210000001\") for one the field could read, or free text —\n   *  a value saved before the field existed is shown exactly as it is. `\"\"` is no\n   *  number. */\n  value: string;\n  /** On every change: E.164 when the typed text reads as a number of the selected\n   *  country (or carries its own \"+\"), otherwise the typed text UNCHANGED. Nothing is\n   *  refused — see {@link PhoneInput}. Plain `onChange` still fires with the raw event;\n   *  bind this one to a form. */\n  onValueChange?: (value: string) => void;\n  /** The country a number typed without \"+\" belongs to, until the value says\n   *  otherwise. Default `\"CH\"`. */\n  defaultCountry?: PhoneCountry;\n  /** The countries the select offers, in order; \"Other\" always follows. Default\n   *  {@link PHONE_COUNTRIES} (CH, LI, DE, AT, FR, IT). A stored number from a country\n   *  left out still shows under its own code. */\n  countries?: readonly PhoneCountryCode[];\n  /** See {@link PhoneInputLabels}. */\n  labels?: Partial<PhoneInputLabels>;\n  /** Classes for the whole field — the select, the input and the lines under them.\n   *  `inputClassName` reaches the `<input>`. */\n  className?: string;\n}\n\n/**\n * A phone number field (kastlan): a country-code select and the number, stored as\n * E.164 and shown grouped.\n *\n * kastlan's contacts kept whatever was typed — \"079 …\", \"+41 (0)79 …\", \"0041 79 …\" —\n * which nobody could dial from the app or match against the next import. This field\n * turns all of those into one stored form, \"+41210000001\", without taking anything\n * away from the person typing:\n *\n *  - **A country to type against.** The select (default CH, then LI, DE, AT, FR, IT\n *    and \"Other\") says which country a number without \"+\" belongs to; the national\n *    trunk 0 may be typed or left out. Typing a \"+\" or \"00\" overrides it, and the\n *    select follows the number (\"+49 …\" switches it to DE). Changing the select moves\n *    the national number to the new country code.\n *  - **E.164 when it reads, the text when it does not.** A number the rules read is\n *    emitted as E.164; anything else (\"ask reception\", an extension) is emitted exactly\n *    as typed. Never refused, never an error of its own: a contact's number is often\n *    known only roughly, and a field that will not save \"079 … (mornings)\" makes\n *    people type it into the notes instead. An app that needs a dialable number\n *    checks {@link isE164} on submit.\n *  - **Existing values untouched.** A free-text value from before is shown exactly as\n *    it is, and normalised only when someone edits it — the field never rewrites a\n *    record just by being opened.\n *  - **Grouped when settled.** While typing the field shows what was typed; on blur a\n *    number it read is regrouped by its country (\"21 000 00 01\").\n *\n * **The limitation** — there is no libphonenumber behind this (≈150 kB of metadata in\n * every bundle): the six countries have light rules (the trunk 0, a plausible length)\n * and every other country is any \"+\" with 8–15 digits. A well-formed number that does\n * not exist passes, and German and Austrian landlines, whose area codes vary in length,\n * are grouped only where the split is known (mobile prefixes, the largest cities) and\n * otherwise shown as one block. See `lib/phone.ts`.\n *\n * `label`, `hint`, `error` and `invalid` read as on {@link Input}: the label floats in\n * the number's box, and a text hint and the error go under the whole row, attached to\n * the number with `aria-describedby`. The select is named by `labels.countryCode`, and\n * the pair is a group named by a string `label`.\n */\nexport const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(function PhoneInput(\n  {\n    value,\n    onValueChange,\n    onChange,\n    onBlur,\n    defaultCountry = \"CH\",\n    countries = PHONE_COUNTRIES,\n    labels,\n    className,\n    inputClassName,\n    label,\n    hint,\n    error,\n    invalid,\n    disabled,\n    \"aria-describedby\": ariaDescribedBy,\n    ...rest\n  },\n  ref,\n) {\n  const text = usePhoneInputLabels(labels);\n  const [country, setCountry] = useState<PhoneCountry>(() => countryOf(value) ?? defaultCountry);\n  // What was typed, shown for as long as it still reads as the value (AmountInput's\n  // draft): the person's own spacing stays under their fingers, and is regrouped on\n  // blur.\n  const [draft, setDraft] = useState<string | null>(null);\n  // The last value this field emitted, to tell its own echo from a value set outside.\n  const [emitted, setEmitted] = useState<string | null>(null);\n  const [seen, setSeen] = useState(value);\n  if (seen !== value) {\n    setSeen(value);\n    if (value !== emitted) {\n      // Set from outside (a reset, another record): its own country, none of our text.\n      const own = countryOf(value);\n      if (own) setCountry(own);\n      setDraft(null);\n    }\n  }\n\n  const emit = (next: string) => {\n    setEmitted(next);\n    onValueChange?.(next);\n  };\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(e);\n    const raw = e.target.value;\n    setDraft(raw);\n    const parsed = parsePhone(raw, country);\n    // A number typed with its own \"+\" takes the select with it.\n    if (parsed && parsed.country !== country) setCountry(parsed.country ?? \"other\");\n    emit(parsed?.e164 ?? raw);\n  };\n\n  const handleCountry = (next: PhoneCountry) => {\n    setCountry(next);\n    const stored = storedNumber(value);\n    if (stored) {\n      // \"Other\", the same country, or a generic number with its own \"+\": the number\n      // stays, only the way it is shown changes.\n      if (next === \"other\" || stored.country === null || stored.country === next) {\n        setDraft(null);\n        return;\n      }\n      // A different listed country: the national number moves to its code. If it does\n      // not read there, the digits are kept as text for the person to finish.\n      emit(parsePhone(stored.national, next)?.e164 ?? stored.national);\n      setDraft(null);\n      return;\n    }\n    // Free text (or a draft): read it again under the new country.\n    const source = draft ?? value;\n    const parsed = source.trim() === \"\" ? null : parsePhone(source, next);\n    if (parsed && parsed.e164 !== value) {\n      setDraft(source);\n      emit(parsed.e164);\n    }\n  };\n\n  const display = draft !== null && emitFor(draft, country) === value ? draft : displayOf(value, country);\n\n  // The select offers the configured countries, plus the stored number's own if it\n  // is not among them — a select cannot show a value it has no option for.\n  const options: PhoneCountryCode[] = [...countries];\n  if (country !== \"other\" && !options.includes(country)) options.push(country);\n\n  const captionId = useId();\n  const errorId = useId();\n  const caption = isTextHint(hint);\n  const showError = hasMessage(error);\n  const named = typeof label === \"string\" && label !== \"\";\n\n  return (\n    <div\n      className={className}\n      role={named ? \"group\" : undefined}\n      aria-label={named ? label : undefined}\n    >\n      <div className=\"flex items-stretch gap-2\">\n        <Select\n          aria-label={text.countryCode}\n          value={country}\n          disabled={disabled}\n          onChange={(e) => handleCountry(e.target.value as PhoneCountry)}\n          className=\"w-28 shrink-0\"\n          // Stretched to the number's height: a labelled field is taller than an\n          // unlabelled select, and the pair should read as one row.\n          selectClassName=\"h-full tabular-nums\"\n        >\n          {options.map((code) => (\n            <option key={code} value={code}>\n              {`${code} +${PHONE_DIAL_CODES[code]}`}\n            </option>\n          ))}\n          <option value=\"other\">{text.other}</option>\n        </Select>\n        {/* Its own flex item, so nothing Input wraps itself in can take the sizing. */}\n        <div className=\"min-w-0 flex-1\">\n          <Input\n            ref={ref}\n            {...rest}\n            type=\"tel\"\n            autoComplete={rest.autoComplete ?? \"tel\"}\n            label={label}\n            // A FieldHint \"?\" rides the label line; text goes under the whole row.\n            hint={caption ? undefined : hint}\n            invalid={invalid || showError}\n            aria-describedby={mergeDescribedBy(ariaDescribedBy, caption && captionId, showError && errorId)}\n            disabled={disabled}\n            value={display}\n            onChange={handleChange}\n            onBlur={(e: FocusEvent<HTMLInputElement>) => {\n              setDraft(null);\n              onBlur?.(e);\n            }}\n            inputClassName={cn(\"tabular-nums\", inputClassName)}\n          />\n        </div>\n      </div>\n      {caption && (\n        <p id={captionId} className={CAPTION_CLASS}>\n          {hint}\n        </p>\n      )}\n      {showError && (\n        <p id={errorId} className={ERROR_CLASS}>\n          {error}\n        </p>\n      )}\n    </div>\n  );\n});\nPhoneInput.displayName = \"PhoneInput\";\n"],"mappings":"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","names":["PhoneInput"]}
+{"version":3,"sources":["../../src/components/phone-input.tsx"],"sourcesContent":["import { forwardRef, useId, useState } from \"react\";\nimport type { ChangeEvent, FocusEvent } from \"react\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport {\n  PHONE_COUNTRIES,\n  PHONE_DIAL_CODES,\n  formatNationalPhone,\n  formatPhone,\n  isE164,\n  parsePhone,\n} from \"../lib/phone\";\nimport type { ParsedPhone, PhoneCountry, PhoneCountryCode } from \"../lib/phone\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\nimport { Input, Select, type InputProps } from \"./ui\";\n\n// ── Labels ────────────────────────────────────────────────────────────────────\n\n/** The words {@link PhoneInput} renders on its own behalf. */\nexport interface PhoneInputLabels {\n  /** The country-code select's accessible name. */\n  countryCode: string;\n  /** The select's last option: a number from a country not listed, typed with its\n   *  own \"+\". */\n  other: string;\n}\n\nexport const DEFAULT_PHONE_INPUT_LABELS: PhoneInputLabels = {\n  countryCode: \"Country code\",\n  other: \"Other\",\n};\n\n/**\n * The `phoneInput` namespace: prop > `<UiKitProvider labels>` > English (0.22.0).\n */\nfunction usePhoneInputLabels(prop: Partial<PhoneInputLabels> | undefined): PhoneInputLabels {\n  const labels: PhoneInputLabels = useKitLabels(\"phoneInput\", DEFAULT_PHONE_INPUT_LABELS, prop);\n  return labels;\n}\n\n// ── Helpers ───────────────────────────────────────────────────────────────────\n\n/** The caption and the error under the row — the type every kit field uses for them\n *  (Select's caption, Input's `error`). */\nconst CAPTION_CLASS = \"mt-1 text-caption leading-tight text-[var(--text-muted)]\";\nconst ERROR_CLASS = \"mt-1 text-caption leading-tight text-[var(--danger)]\";\n\nconst isTextHint = (hint: unknown): hint is string | number =>\n  (typeof hint === \"string\" && hint !== \"\") || typeof hint === \"number\";\n\n/** A stored value read back: an E.164 number these rules can read, else `null`. */\nfunction storedNumber(value: string): ParsedPhone | null {\n  return isE164(value) ? parsePhone(value, \"other\") : null;\n}\n\n/** The select's country for a stored E.164 value, or `null` for free text. */\nfunction countryOf(value: string): PhoneCountry | null {\n  const parsed = storedNumber(value);\n  return parsed ? (parsed.country ?? \"other\") : null;\n}\n\n/** What the field emits for typed text: E.164 when it reads, the text unchanged when\n *  it does not. */\nfunction emitFor(raw: string, country: PhoneCountry): string {\n  return parsePhone(raw, country)?.e164 ?? raw;\n}\n\n/**\n * The text a stored value shows, outside of typing. Under its own country: the national\n * number grouped (\"21 000 00 01\" beside \"CH +41\"). Under another (a \"+33\" number while\n * the select says \"Other\"): the whole international number. Free text: as it is.\n */\nfunction displayOf(value: string, country: PhoneCountry): string {\n  const parsed = storedNumber(value);\n  if (!parsed) return value;\n  if (parsed.country !== null && parsed.country === country) {\n    return formatNationalPhone(parsed.national, parsed.country);\n  }\n  return formatPhone(parsed.e164);\n}\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport interface PhoneInputProps extends Omit<InputProps, \"type\" | \"value\" | \"defaultValue\"> {\n  /** The number: E.164 (\"+41210000001\") for one the field could read, or free text —\n   *  a value saved before the field existed is shown exactly as it is. `\"\"` is no\n   *  number. */\n  value: string;\n  /** On every change: E.164 when the typed text reads as a number of the selected\n   *  country (or carries its own \"+\"), otherwise the typed text UNCHANGED. Nothing is\n   *  refused — see {@link PhoneInput}. Plain `onChange` still fires with the raw event;\n   *  bind this one to a form. */\n  onValueChange?: (value: string) => void;\n  /** The country a number typed without \"+\" belongs to, until the value says\n   *  otherwise. Default `\"CH\"`. */\n  defaultCountry?: PhoneCountry;\n  /** The countries the select offers, in order; \"Other\" always follows. Default\n   *  {@link PHONE_COUNTRIES} (CH, LI, DE, AT, FR, IT). A stored number from a country\n   *  left out still shows under its own code. */\n  countries?: readonly PhoneCountryCode[];\n  /** See {@link PhoneInputLabels}. */\n  labels?: Partial<PhoneInputLabels>;\n  /** Classes for the whole field — the select, the input and the lines under them.\n   *  `inputClassName` reaches the `<input>`. */\n  className?: string;\n}\n\n/**\n * A phone number field (kastlan): a country-code select and the number, stored as\n * E.164 and shown grouped.\n *\n * kastlan's contacts kept whatever was typed — \"079 …\", \"+41 (0)79 …\", \"0041 79 …\" —\n * which nobody could dial from the app or match against the next import. This field\n * turns all of those into one stored form, \"+41210000001\", without taking anything\n * away from the person typing:\n *\n *  - **A country to type against.** The select (default CH, then LI, DE, AT, FR, IT\n *    and \"Other\") says which country a number without \"+\" belongs to; the national\n *    trunk 0 may be typed or left out. Typing a \"+\" or \"00\" overrides it, and the\n *    select follows the number (\"+49 …\" switches it to DE). Changing the select moves\n *    the national number to the new country code.\n *  - **E.164 when it reads, the text when it does not.** A number the rules read is\n *    emitted as E.164; anything else (\"ask reception\", an extension) is emitted exactly\n *    as typed. Never refused, never an error of its own: a contact's number is often\n *    known only roughly, and a field that will not save \"079 … (mornings)\" makes\n *    people type it into the notes instead. An app that needs a dialable number\n *    checks {@link isE164} on submit.\n *  - **Existing values untouched.** A free-text value from before is shown exactly as\n *    it is, and normalised only when someone edits it — the field never rewrites a\n *    record just by being opened.\n *  - **Grouped when settled.** While typing the field shows what was typed; on blur a\n *    number it read is regrouped by its country (\"21 000 00 01\").\n *\n * **The limitation** — there is no libphonenumber behind this (≈150 kB of metadata in\n * every bundle): the six countries have light rules (the trunk 0, a plausible length)\n * and every other country is any \"+\" with 8–15 digits. A well-formed number that does\n * not exist passes, and German and Austrian landlines, whose area codes vary in length,\n * are grouped only where the split is known (mobile prefixes, the largest cities) and\n * otherwise shown as one block. See `lib/phone.ts`.\n *\n * `label`, `hint`, `error` and `invalid` read as on {@link Input}: the label floats in\n * the number's box, and a text hint and the error go under the whole row, attached to\n * the number with `aria-describedby`. The select is named by `labels.countryCode`, and\n * the pair is a group named by a string `label`.\n */\nexport const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(function PhoneInput(\n  {\n    value,\n    onValueChange,\n    onChange,\n    onBlur,\n    defaultCountry = \"CH\",\n    countries = PHONE_COUNTRIES,\n    labels,\n    className,\n    inputClassName,\n    label,\n    hint,\n    error,\n    invalid,\n    disabled,\n    \"aria-describedby\": ariaDescribedBy,\n    ...rest\n  },\n  ref,\n) {\n  const text = usePhoneInputLabels(labels);\n  const [country, setCountry] = useState<PhoneCountry>(() => countryOf(value) ?? defaultCountry);\n  // What was typed, shown for as long as it still reads as the value (AmountInput's\n  // draft): the person's own spacing stays under their fingers, and is regrouped on\n  // blur.\n  const [draft, setDraft] = useState<string | null>(null);\n  // The last value this field emitted, to tell its own echo from a value set outside.\n  const [emitted, setEmitted] = useState<string | null>(null);\n  const [seen, setSeen] = useState(value);\n  if (seen !== value) {\n    setSeen(value);\n    if (value !== emitted) {\n      // Set from outside (a reset, another record): its own country, none of our text.\n      const own = countryOf(value);\n      if (own) setCountry(own);\n      setDraft(null);\n    }\n  }\n\n  const emit = (next: string) => {\n    setEmitted(next);\n    onValueChange?.(next);\n  };\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(e);\n    const raw = e.target.value;\n    setDraft(raw);\n    const parsed = parsePhone(raw, country);\n    // A number typed with its own \"+\" takes the select with it.\n    if (parsed && parsed.country !== country) setCountry(parsed.country ?? \"other\");\n    emit(parsed?.e164 ?? raw);\n  };\n\n  const handleCountry = (next: PhoneCountry) => {\n    setCountry(next);\n    const stored = storedNumber(value);\n    if (stored) {\n      // \"Other\", the same country, or a generic number with its own \"+\": the number\n      // stays, only the way it is shown changes.\n      if (next === \"other\" || stored.country === null || stored.country === next) {\n        setDraft(null);\n        return;\n      }\n      // A different listed country: the national number moves to its code. If it does\n      // not read there, the digits are kept as text for the person to finish.\n      emit(parsePhone(stored.national, next)?.e164 ?? stored.national);\n      setDraft(null);\n      return;\n    }\n    // Free text (or a draft): read it again under the new country.\n    const source = draft ?? value;\n    const parsed = source.trim() === \"\" ? null : parsePhone(source, next);\n    if (parsed && parsed.e164 !== value) {\n      setDraft(source);\n      emit(parsed.e164);\n    }\n  };\n\n  const display = draft !== null && emitFor(draft, country) === value ? draft : displayOf(value, country);\n\n  // The select offers the configured countries, plus the stored number's own if it\n  // is not among them — a select cannot show a value it has no option for.\n  const options: PhoneCountryCode[] = [...countries];\n  if (country !== \"other\" && !options.includes(country)) options.push(country);\n\n  const captionId = useId();\n  const errorId = useId();\n  const caption = isTextHint(hint);\n  const showError = hasMessage(error);\n  const named = typeof label === \"string\" && label !== \"\";\n\n  return (\n    <div\n      className={className}\n      role={named ? \"group\" : undefined}\n      aria-label={named ? label : undefined}\n    >\n      {/* On a phone at Large the number takes a line of its own under the country (0.32.1,\n          the 360 px Extra-large sweep; docs/text-size-harmonization.md §4 \"nothing\n          truncates\"): the 7rem select is 168 px at 150 %, and on a 360 px phone it left\n          the number 82 px — \"Ph…\" over \"021 (\". `large:max-sm:`, the scaled phone width,\n          so a wider screen at Large and Normal keep the one row. */}\n      <div className=\"flex items-stretch gap-2 large:max-sm:flex-wrap\">\n        <Select\n          aria-label={text.countryCode}\n          value={country}\n          disabled={disabled}\n          onChange={(e) => handleCountry(e.target.value as PhoneCountry)}\n          className=\"w-28 shrink-0\"\n          // Stretched to the number's height: a labelled field is taller than an\n          // unlabelled select, and the pair should read as one row.\n          selectClassName=\"h-full tabular-nums\"\n        >\n          {options.map((code) => (\n            <option key={code} value={code}>\n              {`${code} +${PHONE_DIAL_CODES[code]}`}\n            </option>\n          ))}\n          <option value=\"other\">{text.other}</option>\n        </Select>\n        {/* Its own flex item, so nothing Input wraps itself in can take the sizing. */}\n        <div className=\"min-w-0 flex-1 large:max-sm:basis-full\">\n          <Input\n            ref={ref}\n            {...rest}\n            type=\"tel\"\n            autoComplete={rest.autoComplete ?? \"tel\"}\n            label={label}\n            // A FieldHint \"?\" rides the label line; text goes under the whole row.\n            hint={caption ? undefined : hint}\n            invalid={invalid || showError}\n            aria-describedby={mergeDescribedBy(ariaDescribedBy, caption && captionId, showError && errorId)}\n            disabled={disabled}\n            value={display}\n            onChange={handleChange}\n            onBlur={(e: FocusEvent<HTMLInputElement>) => {\n              setDraft(null);\n              onBlur?.(e);\n            }}\n            inputClassName={cn(\"tabular-nums\", inputClassName)}\n          />\n        </div>\n      </div>\n      {caption && (\n        <p id={captionId} className={CAPTION_CLASS}>\n          {hint}\n        </p>\n      )}\n      {showError && (\n        <p id={errorId} className={ERROR_CLASS}>\n          {error}\n        </p>\n      )}\n    </div>\n  );\n});\nPhoneInput.displayName = \"PhoneInput\";\n"],"mappings":"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","names":["PhoneInput"]}

package/dist/components/pie-chart.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { PieChartLabels } from './pie-chart-labels.js';
+import { ChartHeight } from './chart-height.js';
 
 /** One slice. */
 interface PieChartSlice {
@@ -28,8 +29,13 @@ interface PieChartProps extends Omit<ComponentPropsWithoutRef<"div">, "children"
     data: readonly PieChartSlice[];
     /** `"donut"` (default) leaves a hole with the total in it; `"pie"` is the full disc. */
     variant?: "donut" | "pie";
-    /** Height of the plot in px (the legend is under it). Default 300. */
-    height?: number;
+    /**
+     * Height of the plot (the legend is under it): a CSS length (`"20rem"`,
+     * `"min(20rem, 50dvh)"`), a Tailwind class, or px. Default `"18.75rem"` — 300 px at
+     * Normal, growing with the text size so the slice labels keep their room (0.32,
+     * docs/text-size-harmonization.md §10.10). A number does not follow the text size.
+     */
+    height?: ChartHeight;
     /** How a value is written in the tooltip, the slice's name, a `"value"` slice label
      *  and the donut's total. Default: `Intl.NumberFormat` in `locale`. */
     formatValue?: (value: number) => string;

package/dist/components/pie-chart.js

@@ -9,6 +9,8 @@ import { paletteFor } from "../theme/chart-palette.js";
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from "./chart.js";
 import { DEFAULT_PIE_CHART_LABELS } from "./pie-chart-labels.js";
 import { StaticLegend, ToggleLegend, toggleHidden } from "./toggle-legend.js";
+import { useTextSize } from "../theme/text-size.js";
+import { chartHeightProps } from "./chart-height.js";
 const PIE_CONFIG = {};
 const RADIAN = Math.PI / 180;
 function RedactedTooltipContent(props) {
@@ -17,7 +19,7 @@ function RedactedTooltipContent(props) {
 function PieChart({
   data,
   variant = "donut",
-  height = 300,
+  height = "18.75rem",
   formatValue: formatValueProp,
   sliceLabels = "percent",
   minLabelShare = 0.04,
@@ -38,6 +40,8 @@ function PieChart({
 }) {
   const labels = useKitLabels("pieChart", DEFAULT_PIE_CHART_LABELS, labelsProp);
   const locale = useKitLocale(localeProp);
+  const { scale } = useTextSize();
+  const box = chartHeightProps(height);
   const numberFormat = useMemo(() => new Intl.NumberFormat(locale), [locale]);
   const percentFormats = useMemo(
     () => ({
@@ -150,7 +154,7 @@ function PieChart({
       const radius = Number(props.outerRadius);
       const mid = Number(props.midAngle);
       if (!d || d.share < minLabelShare || ![cx, cy, radius, mid].every(Number.isFinite)) return null;
-      const r = radius + 10;
+      const r = radius + 10 * scale;
       const x = cx + r * Math.cos(-mid * RADIAN);
       const y = cy + r * Math.sin(-mid * RADIAN);
       const isValue = sliceLabels === "value";
@@ -161,7 +165,7 @@ function PieChart({
           y,
           textAnchor: x >= cx ? "start" : "end",
           dominantBaseline: "central",
-          fontSize: 11,
+          fontSize: 11 * scale,
           fill: "var(--text-secondary)",
           "data-private": redact && isValue ? "" : void 0,
           style: { pointerEvents: "none" },
@@ -169,7 +173,7 @@ function PieChart({
         }
       );
     },
-    [drawn, minLabelShare, sliceLabels, redact, formatValue, formatShare]
+    [drawn, minLabelShare, sliceLabels, redact, formatValue, formatShare, scale]
   );
   const withLabels = sliceLabels !== "none";
   const outer = withLabels ? 72 : 88;
@@ -213,8 +217,8 @@ function PieChart({
   const emptyBox = /* @__PURE__ */ jsx(
     "div",
     {
-      className: "flex items-center justify-center text-sm text-[var(--text-muted)]",
-      style: { height },
+      className: cn("flex items-center justify-center text-sm text-[var(--text-muted)]", box.className),
+      style: box.style,
       children: empty ?? labels.empty
     }
   );
@@ -226,7 +230,7 @@ function PieChart({
     drawn.length === 0 ? (
       // Every slice switched off: the legend below is how they come back.
       emptyBox
-    ) : /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": labels.slices, className: "relative", style: { height }, children: [
+    ) : /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": labels.slices, className: cn("relative", box.className), style: box.style, children: [
       /* @__PURE__ */ jsx(
         ChartContainer,
         {

package/dist/components/pie-chart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/pie-chart.tsx"],"sourcesContent":["// A part-to-whole chart: a donut (or a full pie), one slice per category, its ANGLE\n// the category's share of what is drawn. Lifted out of kastlan, where the dashboard's\n// occupancy card and the reports' maintenance card each drew a recharts `<Pie>` by\n// hand inside the kit's `ChartContainer` — with a legend that could not switch\n// anything, slices a keyboard could not reach, and colours from a local hex list.\n//\n// It uses the kit's own chart shell (`ChartContainer`, `ChartTooltipContent`) and\n// ramp (`paletteFor`), so it re-skins with the palette like every other chart, and the\n// kit's own legends (`ToggleLegend`, `StaticLegend`).\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { ComponentProps, ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from \"react\";\nimport { Pie, PieChart as RechartsPieChart, Sector } from \"recharts\";\nimport type { PieLabelRenderProps, PieSectorShapeProps } from \"recharts\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { paletteFor } from \"../theme/chart-palette\";\nimport { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from \"./chart\";\nimport { DEFAULT_PIE_CHART_LABELS, type PieChartLabels } from \"./pie-chart-labels\";\nimport { StaticLegend, ToggleLegend, toggleHidden, type LegendEntry } from \"./toggle-legend\";\n\n/** One slice. */\nexport interface PieChartSlice {\n  /** Stable key, handed back by {@link PieChartProps.onSliceClick} and used by the\n   *  legend's hidden set. Labels can collide; keys must not. */\n  key: string;\n  /** What the slice is called — in the legend, the tooltip and its accessible name. */\n  label: string;\n  /**\n   * The slice's size. A value that is not a positive finite number — `null` for a\n   * figure that is missing, a zero, a negative — is NOT drawn and not in the legend:\n   * an angle cannot be negative, and a zero-degree slice is one a pointer and a\n   * keyboard would both stop on to find nothing.\n   */\n  value: number | null | undefined;\n  /** Overrides the by-index palette colour (`paletteFor(i)`, `i` the slice's index in\n   *  `data` AS GIVEN) — a status that has a colour of its own. Any CSS colour. */\n  color?: string;\n}\n\n/**\n * Everything a `<div>` takes reaches the chart's root, so a test id or a `data-tour`\n * anchor can find it. `children` is the chart's own.\n */\nexport interface PieChartProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  data: readonly PieChartSlice[];\n  /** `\"donut\"` (default) leaves a hole with the total in it; `\"pie\"` is the full disc. */\n  variant?: \"donut\" | \"pie\";\n  /** Height of the plot in px (the legend is under it). Default 300. */\n  height?: number;\n  /** How a value is written in the tooltip, the slice's name, a `\"value\"` slice label\n   *  and the donut's total. Default: `Intl.NumberFormat` in `locale`. */\n  formatValue?: (value: number) => string;\n  /**\n   * What is written beside each slice: its share (`\"percent\"`, the default), its\n   * value, or nothing. Only on slices of at least {@link minLabelShare} — a label on a\n   * sliver sits on its neighbour's. The figure is in the tooltip and the slice's name\n   * either way.\n   */\n  sliceLabels?: \"percent\" | \"value\" | \"none\";\n  /** The smallest share (0–1) that gets a slice label. Default 0.04. */\n  minLabelShare?: number;\n  /** Draw the donut's centre: {@link centerLabel} over {@link centerValue}. Default\n   *  `true`; ignored for `variant=\"pie\"`, which has no centre to draw in. */\n  center?: boolean;\n  /** The caption in the donut's centre. Default: `labels.total`. */\n  centerLabel?: ReactNode;\n  /** The figure in the donut's centre. Default: the drawn total through `formatValue`. */\n  centerValue?: ReactNode;\n  /**\n   * The legend under the chart. `\"toggle\"` (default): each entry is a switch that\n   * takes its slice off the chart, and the percentages are then of what is left —\n   * the shares always read \"of this picture\". `\"static\"`: a key with nothing to press.\n   */\n  legend?: \"toggle\" | \"static\" | \"none\";\n  /** The slices switched off, for a caller that owns the set (a URL, a saved view).\n   *  Left out, the chart keeps its own. */\n  hiddenSlices?: ReadonlySet<string>;\n  /** Called with the new hidden set whenever the legend switches a slice. */\n  onHiddenSlicesChange?: (hidden: ReadonlySet<string>) => void;\n  /** A slice was activated — by click, or Enter/Space on a focused slice. Makes each\n   *  slice a `role=\"button\"`. */\n  onSliceClick?: (key: string, slice: PieChartSlice) => void;\n  /**\n   * Tag every figure ON SCREEN `data-private` — the tooltip bubble, the centre and\n   * `\"value\"` slice labels — so the host's demo-mode rule blurs it. A percentage alone\n   * reveals no amount, so `\"percent\"` labels stay readable, and the slices themselves\n   * are not tagged: a blurred ring is no picture at all.\n   */\n  redact?: boolean;\n  /** What to show with nothing to draw. Default: `labels.empty`. */\n  empty?: ReactNode;\n  /** BCP 47 tag for the numbers and percentages. Default: the provider's. */\n  locale?: string;\n  labels?: Partial<PieChartLabels>;\n}\n\n/** A slice as drawn: only the ones with a positive value, in `data` order. */\ninterface DrawnSlice {\n  slice: PieChartSlice;\n  value: number;\n  color: string;\n  /** Of what is drawn, 0–1. */\n  share: number;\n}\n\n// Slices carry their own `fill`, and `ChartTooltipContent` falls back to it for the\n// swatch, so no series config is needed — and none is wanted, because a config key is a\n// CSS identifier and a slice key is the caller's data (see `ChartStyle`).\nconst PIE_CONFIG: ChartConfig = {};\n\nconst RADIAN = Math.PI / 180;\n\n/** The shared tooltip with the bubble tagged `data-private` — see the treemap's\n *  `RedactedTooltipContent` for why it has to BE the element recharts clones. */\nfunction RedactedTooltipContent(props: ComponentProps<typeof ChartTooltipContent>) {\n  return (\n    <div data-private>\n      <ChartTooltipContent {...props} />\n    </div>\n  );\n}\n\n/**\n * Part-to-whole chart: a donut (or `variant=\"pie\"`), one slice per\n * {@link PieChartSlice}, coloured from the chart ramp by index.\n *\n * **Every slice is reachable from the keyboard.** The slices are ONE tab stop (a roving\n * tabindex, as in the kit's grids): ←/→ and ↑/↓ step to the next and previous slice —\n * clockwise from twelve o'clock, the order of the legend — with ←/→ following the\n * reading direction in RTL; Home/End go to the first and last. Each slice is named\n * \"Label: value (xx%)\" (`labels.slice`), because a colour and an angle are nothing a\n * screen reader can say, and focusing one reads it out in the donut's centre. With\n * `onSliceClick`, Enter and Space activate it as a click does.\n *\n * The legend switches slices off (`legend=\"toggle\"`); the percentages are always of\n * what is drawn. The plot is not mirrored in RTL (see `ChartContainer`); the legend\n * and the centre follow the page.\n *\n * With nothing to draw it says so (`empty`) rather than drawing an empty box.\n *\n * Needs `recharts`, like everything behind `@eifi1/ui-kit/chart`.\n */\nexport function PieChart({\n  data,\n  variant = \"donut\",\n  height = 300,\n  formatValue: formatValueProp,\n  sliceLabels = \"percent\",\n  minLabelShare = 0.04,\n  center = true,\n  centerLabel,\n  centerValue,\n  legend = \"toggle\",\n  hiddenSlices: hiddenProp,\n  onHiddenSlicesChange,\n  onSliceClick,\n  redact = false,\n  empty,\n  locale: localeProp,\n  labels: labelsProp,\n  className,\n  style,\n  ...rest\n}: PieChartProps) {\n  const labels = useKitLabels(\"pieChart\", DEFAULT_PIE_CHART_LABELS, labelsProp);\n  const locale = useKitLocale(localeProp);\n  const numberFormat = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n  const percentFormats = useMemo(\n    () => ({\n      whole: new Intl.NumberFormat(locale, { style: \"percent\", maximumFractionDigits: 0 }),\n      fine: new Intl.NumberFormat(locale, { style: \"percent\", maximumFractionDigits: 1 }),\n    }),\n    [locale],\n  );\n  // Memoised, like everything the sectors are drawn from: they must not be rebuilt on\n  // this component's own re-renders (see `pie` below).\n  const formatValue = useCallback(\n    (v: number) => (formatValueProp ? formatValueProp(v) : numberFormat.format(v)),\n    [formatValueProp, numberFormat],\n  );\n  // One decimal under 10 %, where rounding to whole percents starts to lie — a slice\n  // of 0.4 % labelled \"0%\" says it is not there.\n  const formatShare = useCallback(\n    (share: number) => (share < 0.1 ? percentFormats.fine : percentFormats.whole).format(share),\n    [percentFormats],\n  );\n\n  const [ownHidden, setOwnHidden] = useState<ReadonlySet<string>>(() => new Set());\n  const hidden = hiddenProp ?? ownHidden;\n  const toggle = (key: string) => {\n    const next = toggleHidden(hidden, key);\n    if (hiddenProp === undefined) setOwnHidden(next);\n    onHiddenSlicesChange?.(next);\n  };\n\n  // Coloured by index into `data` AS GIVEN, before anything is dropped, so a slice\n  // keeps its colour when a neighbour is switched off or has no value.\n  const { drawable, drawn, total, pieData } = useMemo(() => {\n    const drawable = data\n      .map((slice, i) => ({ slice, value: slice.value, color: slice.color ?? paletteFor(i) }))\n      .filter((d): d is { slice: PieChartSlice; value: number; color: string } =>\n        typeof d.value === \"number\" && Number.isFinite(d.value) && d.value > 0,\n      );\n    const shown = drawable.filter((d) => !hidden.has(d.slice.key));\n    const total = shown.reduce((acc, d) => acc + d.value, 0);\n    const drawn: DrawnSlice[] = shown.map((d) => ({ ...d, share: total > 0 ? d.value / total : 0 }));\n    const pieData = drawn.map((d) => ({\n      key: d.slice.key,\n      label: d.slice.label,\n      value: d.value,\n      fill: d.color,\n    }));\n    return { drawable, drawn, total, pieData };\n  }, [data, hidden]);\n\n  // The roving tab stop, and the slice that has focus (which the centre reads out).\n  const [stop, setStop] = useState(0);\n  const [focused, setFocused] = useState<number | undefined>(undefined);\n  const current = Math.min(stop, Math.max(0, drawn.length - 1));\n  const refs = useRef<(SVGGElement | null)[]>([]);\n  const focusedSlice = focused !== undefined ? drawn[focused] : undefined;\n\n  // Read through a ref: the sectors are drawn once per `data`, and a caller's inline\n  // `onSliceClick` is a new function every render.\n  const clickRef = useRef(onSliceClick);\n  useLayoutEffect(() => {\n    clickRef.current = onSliceClick;\n  });\n  const clickable = onSliceClick !== undefined;\n\n  /**\n   * One sector, wrapped in its keyboard stop. recharts renders it inside a layer of its\n   * own that carries the pointer's hover and click, so those are untouched.\n   *\n   * Focus does NOT drive the recharts tooltip (`defaultIndex`), as it does in\n   * `SeriesChart`: an active pie sector is re-parented into an extra layer, which\n   * remounts this element and drops the focus it just took. The donut's centre is the\n   * keyboard's read-out instead.\n   */\n  const shape = useCallback(\n    (props: PieSectorShapeProps) => {\n      const {\n        index,\n        isActive: _isActive,\n        tabIndex: _tabIndex,\n        animationElapsedTime: _elapsed,\n        isAnimating: _animating,\n        isEntrance: _entrance,\n        // recharts hands the shape its own React `key` among the props. Spread into\n        // JSX, a `key` inside a props object is a warning on every render (React 19),\n        // so it is lifted out here and passed on its own.\n        key,\n        ...sector\n      } = props as PieSectorShapeProps & {\n        animationElapsedTime?: number;\n        isAnimating?: boolean;\n        isEntrance?: boolean;\n        key?: string | number | null;\n      };\n      const d = drawn[index];\n      if (!d) return <Sector key={key ?? undefined} {...sector} />;\n      const onKeyDown = (event: KeyboardEvent<SVGGElement>) => {\n        const step = horizontalStep(event.key, event.currentTarget);\n        let target: number | undefined;\n        if (step) target = index + step;\n        else if (event.key === \"ArrowDown\") target = index + 1;\n        else if (event.key === \"ArrowUp\") target = index - 1;\n        else if (event.key === \"Home\") target = 0;\n        else if (event.key === \"End\") target = drawn.length - 1;\n        if (target !== undefined) {\n          event.preventDefault();\n          // Round the circle: past the last slice is the first, as the eye goes.\n          refs.current[((target % drawn.length) + drawn.length) % drawn.length]?.focus();\n        } else if (clickable && (event.key === \"Enter\" || event.key === \" \")) {\n          event.preventDefault();\n          clickRef.current?.(d.slice.key, d.slice);\n        }\n      };\n      return (\n        <g\n          ref={(node) => {\n            refs.current[index] = node;\n          }}\n          role={clickable ? \"button\" : \"img\"}\n          // The first slice until the effect below moves the stop.\n          tabIndex={index === 0 ? 0 : -1}\n          aria-label={labels.slice(d.slice.label, formatValue(d.value), formatShare(d.share))}\n          data-slice={d.slice.key}\n          onKeyDown={onKeyDown}\n          onFocus={() => {\n            setStop(index);\n            setFocused(index);\n          }}\n          onBlur={() => setFocused(undefined)}\n          // CSS beats a presentation attribute, so this recolours the sector's own\n          // stroke for as long as it has keyboard focus.\n          className=\"outline-none [&:focus-visible>path]:stroke-[var(--text-primary)]\"\n        >\n          <Sector key={key ?? undefined} {...sector} />\n        </g>\n      );\n    },\n    [drawn, labels, formatValue, formatShare, clickable],\n  );\n\n  const label = useCallback(\n    (props: PieLabelRenderProps) => {\n      const d = drawn[props.index ?? -1];\n      const cx = Number(props.cx);\n      const cy = Number(props.cy);\n      const radius = Number(props.outerRadius);\n      const mid = Number(props.midAngle);\n      if (!d || d.share < minLabelShare || ![cx, cy, radius, mid].every(Number.isFinite)) return null;\n      const r = radius + 10;\n      const x = cx + r * Math.cos(-mid * RADIAN);\n      const y = cy + r * Math.sin(-mid * RADIAN);\n      const isValue = sliceLabels === \"value\";\n      return (\n        <text\n          x={x}\n          y={y}\n          textAnchor={x >= cx ? \"start\" : \"end\"}\n          dominantBaseline=\"central\"\n          fontSize={11}\n          fill=\"var(--text-secondary)\"\n          data-private={redact && isValue ? \"\" : undefined}\n          style={{ pointerEvents: \"none\" }}\n        >\n          {isValue ? formatValue(d.value) : formatShare(d.share)}\n        </text>\n      );\n    },\n    [drawn, minLabelShare, sliceLabels, redact, formatValue, formatShare],\n  );\n\n  const withLabels = sliceLabels !== \"none\";\n  // Room outside the ring for the labels, or the ring fills the box.\n  const outer = withLabels ? 72 : 88;\n  const inner = variant === \"donut\" ? Math.round(outer * 0.6) : 0;\n\n  /**\n   * The `<Pie>`, as ONE element for as long as what it draws is unchanged. recharts\n   * keys its sectors by an animation id that is renewed whenever the Pie's props object\n   * is — i.e. on every render of the Pie — so re-rendering it remounts every sector,\n   * the one with focus included, which dropped the focus to <body> on the very state\n   * update that focusing a slice makes. An unchanged element is one React does not\n   * re-render, so the sectors stay put, and the roving tab stop is moved on them in\n   * place (the effect below).\n   */\n  const pie = useMemo(\n    () => (\n      <Pie\n        data={pieData}\n        dataKey=\"value\"\n        nameKey=\"label\"\n        cx=\"50%\"\n        cy=\"50%\"\n        outerRadius={`${outer}%`}\n        innerRadius={`${inner}%`}\n        startAngle={90}\n        endAngle={-270}\n        // The card showing through between the slices, as the treemap's gutter.\n        stroke=\"var(--bg-surface)\"\n        strokeWidth={2}\n        rootTabIndex={-1}\n        isAnimationActive={false}\n        shape={shape}\n        label={withLabels ? label : false}\n        labelLine={false}\n        onClick={\n          clickable\n            ? (_entry: unknown, index: number) => {\n                const d = drawn[index];\n                if (d) clickRef.current?.(d.slice.key, d.slice);\n              }\n            : undefined\n        }\n      />\n    ),\n    [pieData, drawn, shape, label, withLabels, outer, inner, clickable],\n  );\n\n  // The roving tab stop, moved on the sectors in place (they are not re-rendered).\n  useEffect(() => {\n    refs.current.forEach((el, i) => el?.setAttribute(\"tabindex\", i === current ? \"0\" : \"-1\"));\n  });\n\n  const legendEntries: LegendEntry[] = drawable.map((d) => ({\n    key: d.slice.key,\n    label: d.slice.label,\n    color: d.color,\n  }));\n\n  const emptyBox = (\n    <div\n      className=\"flex items-center justify-center text-sm text-[var(--text-muted)]\"\n      style={{ height }}\n    >\n      {empty ?? labels.empty}\n    </div>\n  );\n\n  // Nothing drawable at all: no chart, and no legend of switches for nothing.\n  if (drawable.length === 0) {\n    return (\n      <div {...rest} className={cn(\"w-full\", className)} style={style}>\n        {emptyBox}\n      </div>\n    );\n  }\n\n  const Content = redact ? RedactedTooltipContent : ChartTooltipContent;\n\n  return (\n    <div {...rest} className={cn(\"w-full\", className)} style={style}>\n      {drawn.length === 0 ? (\n        // Every slice switched off: the legend below is how they come back.\n        emptyBox\n      ) : (\n        <div role=\"group\" aria-label={labels.slices} className=\"relative\" style={{ height }}>\n          <ChartContainer\n            config={PIE_CONFIG}\n            className={cn(\"h-full\", clickable && \"[&_.recharts-pie-sector]:cursor-pointer\")}\n          >\n            <RechartsPieChart accessibilityLayer={false}>\n              <ChartTooltip\n                content={\n                  <Content\n                    hideLabel\n                    valueFormatter={(v) =>\n                      `${formatValue(v)} (${formatShare(total > 0 ? v / total : 0)})`\n                    }\n                  />\n                }\n              />\n              {pie}\n            </RechartsPieChart>\n          </ChartContainer>\n          {variant === \"donut\" && center && (\n            <div\n              data-private={redact ? \"\" : undefined}\n              // While a slice has keyboard focus the centre reads it out — the\n              // keyboard's tooltip. Hidden from assistive technology then: the slice's\n              // own name has just said the same.\n              aria-hidden={focusedSlice ? true : undefined}\n              className=\"pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center\"\n            >\n              <span className=\"max-w-[40%] truncate text-xs text-[var(--text-muted)]\">\n                {focusedSlice ? focusedSlice.slice.label : (centerLabel ?? labels.total)}\n              </span>\n              <span className=\"max-w-[40%] truncate text-lg font-semibold tabular-nums text-[var(--text-primary)]\">\n                {focusedSlice ? formatValue(focusedSlice.value) : (centerValue ?? formatValue(total))}\n              </span>\n              {focusedSlice && (\n                <span className=\"text-xs tabular-nums text-[var(--text-muted)]\">\n                  {formatShare(focusedSlice.share)}\n                </span>\n              )}\n            </div>\n          )}\n        </div>\n      )}\n      {legend === \"toggle\" && (\n        <ToggleLegend\n          entries={legendEntries}\n          hidden={hidden}\n          onToggle={toggle}\n          showSingle\n          className=\"justify-center\"\n          labels={{ legend: labels.legend }}\n        />\n      )}\n      {legend === \"static\" && (\n        <StaticLegend entries={legendEntries} className=\"justify-center\" aria-label={labels.legend} />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["drawable","total","drawn","pieData"]}
+{"version":3,"sources":["../../src/components/pie-chart.tsx"],"sourcesContent":["// A part-to-whole chart: a donut (or a full pie), one slice per category, its ANGLE\n// the category's share of what is drawn. Lifted out of kastlan, where the dashboard's\n// occupancy card and the reports' maintenance card each drew a recharts `<Pie>` by\n// hand inside the kit's `ChartContainer` — with a legend that could not switch\n// anything, slices a keyboard could not reach, and colours from a local hex list.\n//\n// It uses the kit's own chart shell (`ChartContainer`, `ChartTooltipContent`) and\n// ramp (`paletteFor`), so it re-skins with the palette like every other chart, and the\n// kit's own legends (`ToggleLegend`, `StaticLegend`).\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { ComponentProps, ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from \"react\";\nimport { Pie, PieChart as RechartsPieChart, Sector } from \"recharts\";\nimport type { PieLabelRenderProps, PieSectorShapeProps } from \"recharts\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { paletteFor } from \"../theme/chart-palette\";\nimport { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from \"./chart\";\nimport { DEFAULT_PIE_CHART_LABELS, type PieChartLabels } from \"./pie-chart-labels\";\nimport { StaticLegend, ToggleLegend, toggleHidden, type LegendEntry } from \"./toggle-legend\";\nimport { useTextSize } from \"../theme/text-size\";\nimport { chartHeightProps, type ChartHeight } from \"./chart-height\";\n\n/** One slice. */\nexport interface PieChartSlice {\n  /** Stable key, handed back by {@link PieChartProps.onSliceClick} and used by the\n   *  legend's hidden set. Labels can collide; keys must not. */\n  key: string;\n  /** What the slice is called — in the legend, the tooltip and its accessible name. */\n  label: string;\n  /**\n   * The slice's size. A value that is not a positive finite number — `null` for a\n   * figure that is missing, a zero, a negative — is NOT drawn and not in the legend:\n   * an angle cannot be negative, and a zero-degree slice is one a pointer and a\n   * keyboard would both stop on to find nothing.\n   */\n  value: number | null | undefined;\n  /** Overrides the by-index palette colour (`paletteFor(i)`, `i` the slice's index in\n   *  `data` AS GIVEN) — a status that has a colour of its own. Any CSS colour. */\n  color?: string;\n}\n\n/**\n * Everything a `<div>` takes reaches the chart's root, so a test id or a `data-tour`\n * anchor can find it. `children` is the chart's own.\n */\nexport interface PieChartProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  data: readonly PieChartSlice[];\n  /** `\"donut\"` (default) leaves a hole with the total in it; `\"pie\"` is the full disc. */\n  variant?: \"donut\" | \"pie\";\n  /**\n   * Height of the plot (the legend is under it): a CSS length (`\"20rem\"`,\n   * `\"min(20rem, 50dvh)\"`), a Tailwind class, or px. Default `\"18.75rem\"` — 300 px at\n   * Normal, growing with the text size so the slice labels keep their room (0.32,\n   * docs/text-size-harmonization.md §10.10). A number does not follow the text size.\n   */\n  height?: ChartHeight;\n  /** How a value is written in the tooltip, the slice's name, a `\"value\"` slice label\n   *  and the donut's total. Default: `Intl.NumberFormat` in `locale`. */\n  formatValue?: (value: number) => string;\n  /**\n   * What is written beside each slice: its share (`\"percent\"`, the default), its\n   * value, or nothing. Only on slices of at least {@link minLabelShare} — a label on a\n   * sliver sits on its neighbour's. The figure is in the tooltip and the slice's name\n   * either way.\n   */\n  sliceLabels?: \"percent\" | \"value\" | \"none\";\n  /** The smallest share (0–1) that gets a slice label. Default 0.04. */\n  minLabelShare?: number;\n  /** Draw the donut's centre: {@link centerLabel} over {@link centerValue}. Default\n   *  `true`; ignored for `variant=\"pie\"`, which has no centre to draw in. */\n  center?: boolean;\n  /** The caption in the donut's centre. Default: `labels.total`. */\n  centerLabel?: ReactNode;\n  /** The figure in the donut's centre. Default: the drawn total through `formatValue`. */\n  centerValue?: ReactNode;\n  /**\n   * The legend under the chart. `\"toggle\"` (default): each entry is a switch that\n   * takes its slice off the chart, and the percentages are then of what is left —\n   * the shares always read \"of this picture\". `\"static\"`: a key with nothing to press.\n   */\n  legend?: \"toggle\" | \"static\" | \"none\";\n  /** The slices switched off, for a caller that owns the set (a URL, a saved view).\n   *  Left out, the chart keeps its own. */\n  hiddenSlices?: ReadonlySet<string>;\n  /** Called with the new hidden set whenever the legend switches a slice. */\n  onHiddenSlicesChange?: (hidden: ReadonlySet<string>) => void;\n  /** A slice was activated — by click, or Enter/Space on a focused slice. Makes each\n   *  slice a `role=\"button\"`. */\n  onSliceClick?: (key: string, slice: PieChartSlice) => void;\n  /**\n   * Tag every figure ON SCREEN `data-private` — the tooltip bubble, the centre and\n   * `\"value\"` slice labels — so the host's demo-mode rule blurs it. A percentage alone\n   * reveals no amount, so `\"percent\"` labels stay readable, and the slices themselves\n   * are not tagged: a blurred ring is no picture at all.\n   */\n  redact?: boolean;\n  /** What to show with nothing to draw. Default: `labels.empty`. */\n  empty?: ReactNode;\n  /** BCP 47 tag for the numbers and percentages. Default: the provider's. */\n  locale?: string;\n  labels?: Partial<PieChartLabels>;\n}\n\n/** A slice as drawn: only the ones with a positive value, in `data` order. */\ninterface DrawnSlice {\n  slice: PieChartSlice;\n  value: number;\n  color: string;\n  /** Of what is drawn, 0–1. */\n  share: number;\n}\n\n// Slices carry their own `fill`, and `ChartTooltipContent` falls back to it for the\n// swatch, so no series config is needed — and none is wanted, because a config key is a\n// CSS identifier and a slice key is the caller's data (see `ChartStyle`).\nconst PIE_CONFIG: ChartConfig = {};\n\nconst RADIAN = Math.PI / 180;\n\n/** The shared tooltip with the bubble tagged `data-private` — see the treemap's\n *  `RedactedTooltipContent` for why it has to BE the element recharts clones. */\nfunction RedactedTooltipContent(props: ComponentProps<typeof ChartTooltipContent>) {\n  return (\n    <div data-private>\n      <ChartTooltipContent {...props} />\n    </div>\n  );\n}\n\n/**\n * Part-to-whole chart: a donut (or `variant=\"pie\"`), one slice per\n * {@link PieChartSlice}, coloured from the chart ramp by index.\n *\n * **Every slice is reachable from the keyboard.** The slices are ONE tab stop (a roving\n * tabindex, as in the kit's grids): ←/→ and ↑/↓ step to the next and previous slice —\n * clockwise from twelve o'clock, the order of the legend — with ←/→ following the\n * reading direction in RTL; Home/End go to the first and last. Each slice is named\n * \"Label: value (xx%)\" (`labels.slice`), because a colour and an angle are nothing a\n * screen reader can say, and focusing one reads it out in the donut's centre. With\n * `onSliceClick`, Enter and Space activate it as a click does.\n *\n * The legend switches slices off (`legend=\"toggle\"`); the percentages are always of\n * what is drawn. The plot is not mirrored in RTL (see `ChartContainer`); the legend\n * and the centre follow the page.\n *\n * With nothing to draw it says so (`empty`) rather than drawing an empty box.\n *\n * Needs `recharts`, like everything behind `@eifi1/ui-kit/chart`.\n */\nexport function PieChart({\n  data,\n  variant = \"donut\",\n  height = \"18.75rem\",\n  formatValue: formatValueProp,\n  sliceLabels = \"percent\",\n  minLabelShare = 0.04,\n  center = true,\n  centerLabel,\n  centerValue,\n  legend = \"toggle\",\n  hiddenSlices: hiddenProp,\n  onHiddenSlicesChange,\n  onSliceClick,\n  redact = false,\n  empty,\n  locale: localeProp,\n  labels: labelsProp,\n  className,\n  style,\n  ...rest\n}: PieChartProps) {\n  const labels = useKitLabels(\"pieChart\", DEFAULT_PIE_CHART_LABELS, labelsProp);\n  const locale = useKitLocale(localeProp);\n  // The slice labels are SVG text in px: they follow the text size by this (§10.10).\n  const { scale } = useTextSize();\n  const box = chartHeightProps(height);\n  const numberFormat = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n  const percentFormats = useMemo(\n    () => ({\n      whole: new Intl.NumberFormat(locale, { style: \"percent\", maximumFractionDigits: 0 }),\n      fine: new Intl.NumberFormat(locale, { style: \"percent\", maximumFractionDigits: 1 }),\n    }),\n    [locale],\n  );\n  // Memoised, like everything the sectors are drawn from: they must not be rebuilt on\n  // this component's own re-renders (see `pie` below).\n  const formatValue = useCallback(\n    (v: number) => (formatValueProp ? formatValueProp(v) : numberFormat.format(v)),\n    [formatValueProp, numberFormat],\n  );\n  // One decimal under 10 %, where rounding to whole percents starts to lie — a slice\n  // of 0.4 % labelled \"0%\" says it is not there.\n  const formatShare = useCallback(\n    (share: number) => (share < 0.1 ? percentFormats.fine : percentFormats.whole).format(share),\n    [percentFormats],\n  );\n\n  const [ownHidden, setOwnHidden] = useState<ReadonlySet<string>>(() => new Set());\n  const hidden = hiddenProp ?? ownHidden;\n  const toggle = (key: string) => {\n    const next = toggleHidden(hidden, key);\n    if (hiddenProp === undefined) setOwnHidden(next);\n    onHiddenSlicesChange?.(next);\n  };\n\n  // Coloured by index into `data` AS GIVEN, before anything is dropped, so a slice\n  // keeps its colour when a neighbour is switched off or has no value.\n  const { drawable, drawn, total, pieData } = useMemo(() => {\n    const drawable = data\n      .map((slice, i) => ({ slice, value: slice.value, color: slice.color ?? paletteFor(i) }))\n      .filter((d): d is { slice: PieChartSlice; value: number; color: string } =>\n        typeof d.value === \"number\" && Number.isFinite(d.value) && d.value > 0,\n      );\n    const shown = drawable.filter((d) => !hidden.has(d.slice.key));\n    const total = shown.reduce((acc, d) => acc + d.value, 0);\n    const drawn: DrawnSlice[] = shown.map((d) => ({ ...d, share: total > 0 ? d.value / total : 0 }));\n    const pieData = drawn.map((d) => ({\n      key: d.slice.key,\n      label: d.slice.label,\n      value: d.value,\n      fill: d.color,\n    }));\n    return { drawable, drawn, total, pieData };\n  }, [data, hidden]);\n\n  // The roving tab stop, and the slice that has focus (which the centre reads out).\n  const [stop, setStop] = useState(0);\n  const [focused, setFocused] = useState<number | undefined>(undefined);\n  const current = Math.min(stop, Math.max(0, drawn.length - 1));\n  const refs = useRef<(SVGGElement | null)[]>([]);\n  const focusedSlice = focused !== undefined ? drawn[focused] : undefined;\n\n  // Read through a ref: the sectors are drawn once per `data`, and a caller's inline\n  // `onSliceClick` is a new function every render.\n  const clickRef = useRef(onSliceClick);\n  useLayoutEffect(() => {\n    clickRef.current = onSliceClick;\n  });\n  const clickable = onSliceClick !== undefined;\n\n  /**\n   * One sector, wrapped in its keyboard stop. recharts renders it inside a layer of its\n   * own that carries the pointer's hover and click, so those are untouched.\n   *\n   * Focus does NOT drive the recharts tooltip (`defaultIndex`), as it does in\n   * `SeriesChart`: an active pie sector is re-parented into an extra layer, which\n   * remounts this element and drops the focus it just took. The donut's centre is the\n   * keyboard's read-out instead.\n   */\n  const shape = useCallback(\n    (props: PieSectorShapeProps) => {\n      const {\n        index,\n        isActive: _isActive,\n        tabIndex: _tabIndex,\n        animationElapsedTime: _elapsed,\n        isAnimating: _animating,\n        isEntrance: _entrance,\n        // recharts hands the shape its own React `key` among the props. Spread into\n        // JSX, a `key` inside a props object is a warning on every render (React 19),\n        // so it is lifted out here and passed on its own.\n        key,\n        ...sector\n      } = props as PieSectorShapeProps & {\n        animationElapsedTime?: number;\n        isAnimating?: boolean;\n        isEntrance?: boolean;\n        key?: string | number | null;\n      };\n      const d = drawn[index];\n      if (!d) return <Sector key={key ?? undefined} {...sector} />;\n      const onKeyDown = (event: KeyboardEvent<SVGGElement>) => {\n        const step = horizontalStep(event.key, event.currentTarget);\n        let target: number | undefined;\n        if (step) target = index + step;\n        else if (event.key === \"ArrowDown\") target = index + 1;\n        else if (event.key === \"ArrowUp\") target = index - 1;\n        else if (event.key === \"Home\") target = 0;\n        else if (event.key === \"End\") target = drawn.length - 1;\n        if (target !== undefined) {\n          event.preventDefault();\n          // Round the circle: past the last slice is the first, as the eye goes.\n          refs.current[((target % drawn.length) + drawn.length) % drawn.length]?.focus();\n        } else if (clickable && (event.key === \"Enter\" || event.key === \" \")) {\n          event.preventDefault();\n          clickRef.current?.(d.slice.key, d.slice);\n        }\n      };\n      return (\n        <g\n          ref={(node) => {\n            refs.current[index] = node;\n          }}\n          role={clickable ? \"button\" : \"img\"}\n          // The first slice until the effect below moves the stop.\n          tabIndex={index === 0 ? 0 : -1}\n          aria-label={labels.slice(d.slice.label, formatValue(d.value), formatShare(d.share))}\n          data-slice={d.slice.key}\n          onKeyDown={onKeyDown}\n          onFocus={() => {\n            setStop(index);\n            setFocused(index);\n          }}\n          onBlur={() => setFocused(undefined)}\n          // CSS beats a presentation attribute, so this recolours the sector's own\n          // stroke for as long as it has keyboard focus.\n          className=\"outline-none [&:focus-visible>path]:stroke-[var(--text-primary)]\"\n        >\n          <Sector key={key ?? undefined} {...sector} />\n        </g>\n      );\n    },\n    [drawn, labels, formatValue, formatShare, clickable],\n  );\n\n  const label = useCallback(\n    (props: PieLabelRenderProps) => {\n      const d = drawn[props.index ?? -1];\n      const cx = Number(props.cx);\n      const cy = Number(props.cy);\n      const radius = Number(props.outerRadius);\n      const mid = Number(props.midAngle);\n      if (!d || d.share < minLabelShare || ![cx, cy, radius, mid].every(Number.isFinite)) return null;\n      const r = radius + 10 * scale;\n      const x = cx + r * Math.cos(-mid * RADIAN);\n      const y = cy + r * Math.sin(-mid * RADIAN);\n      const isValue = sliceLabels === \"value\";\n      return (\n        <text\n          x={x}\n          y={y}\n          textAnchor={x >= cx ? \"start\" : \"end\"}\n          dominantBaseline=\"central\"\n          fontSize={11 * scale}\n          fill=\"var(--text-secondary)\"\n          data-private={redact && isValue ? \"\" : undefined}\n          style={{ pointerEvents: \"none\" }}\n        >\n          {isValue ? formatValue(d.value) : formatShare(d.share)}\n        </text>\n      );\n    },\n    [drawn, minLabelShare, sliceLabels, redact, formatValue, formatShare, scale],\n  );\n\n  const withLabels = sliceLabels !== \"none\";\n  // Room outside the ring for the labels, or the ring fills the box.\n  const outer = withLabels ? 72 : 88;\n  const inner = variant === \"donut\" ? Math.round(outer * 0.6) : 0;\n\n  /**\n   * The `<Pie>`, as ONE element for as long as what it draws is unchanged. recharts\n   * keys its sectors by an animation id that is renewed whenever the Pie's props object\n   * is — i.e. on every render of the Pie — so re-rendering it remounts every sector,\n   * the one with focus included, which dropped the focus to <body> on the very state\n   * update that focusing a slice makes. An unchanged element is one React does not\n   * re-render, so the sectors stay put, and the roving tab stop is moved on them in\n   * place (the effect below).\n   */\n  const pie = useMemo(\n    () => (\n      <Pie\n        data={pieData}\n        dataKey=\"value\"\n        nameKey=\"label\"\n        cx=\"50%\"\n        cy=\"50%\"\n        outerRadius={`${outer}%`}\n        innerRadius={`${inner}%`}\n        startAngle={90}\n        endAngle={-270}\n        // The card showing through between the slices, as the treemap's gutter.\n        stroke=\"var(--bg-surface)\"\n        strokeWidth={2}\n        rootTabIndex={-1}\n        isAnimationActive={false}\n        shape={shape}\n        label={withLabels ? label : false}\n        labelLine={false}\n        onClick={\n          clickable\n            ? (_entry: unknown, index: number) => {\n                const d = drawn[index];\n                if (d) clickRef.current?.(d.slice.key, d.slice);\n              }\n            : undefined\n        }\n      />\n    ),\n    [pieData, drawn, shape, label, withLabels, outer, inner, clickable],\n  );\n\n  // The roving tab stop, moved on the sectors in place (they are not re-rendered).\n  useEffect(() => {\n    refs.current.forEach((el, i) => el?.setAttribute(\"tabindex\", i === current ? \"0\" : \"-1\"));\n  });\n\n  const legendEntries: LegendEntry[] = drawable.map((d) => ({\n    key: d.slice.key,\n    label: d.slice.label,\n    color: d.color,\n  }));\n\n  const emptyBox = (\n    <div\n      className={cn(\"flex items-center justify-center text-sm text-[var(--text-muted)]\", box.className)}\n      style={box.style}\n    >\n      {empty ?? labels.empty}\n    </div>\n  );\n\n  // Nothing drawable at all: no chart, and no legend of switches for nothing.\n  if (drawable.length === 0) {\n    return (\n      <div {...rest} className={cn(\"w-full\", className)} style={style}>\n        {emptyBox}\n      </div>\n    );\n  }\n\n  const Content = redact ? RedactedTooltipContent : ChartTooltipContent;\n\n  return (\n    <div {...rest} className={cn(\"w-full\", className)} style={style}>\n      {drawn.length === 0 ? (\n        // Every slice switched off: the legend below is how they come back.\n        emptyBox\n      ) : (\n        <div role=\"group\" aria-label={labels.slices} className={cn(\"relative\", box.className)} style={box.style}>\n          <ChartContainer\n            config={PIE_CONFIG}\n            className={cn(\"h-full\", clickable && \"[&_.recharts-pie-sector]:cursor-pointer\")}\n          >\n            <RechartsPieChart accessibilityLayer={false}>\n              <ChartTooltip\n                content={\n                  <Content\n                    hideLabel\n                    valueFormatter={(v) =>\n                      `${formatValue(v)} (${formatShare(total > 0 ? v / total : 0)})`\n                    }\n                  />\n                }\n              />\n              {pie}\n            </RechartsPieChart>\n          </ChartContainer>\n          {variant === \"donut\" && center && (\n            <div\n              data-private={redact ? \"\" : undefined}\n              // While a slice has keyboard focus the centre reads it out — the\n              // keyboard's tooltip. Hidden from assistive technology then: the slice's\n              // own name has just said the same.\n              aria-hidden={focusedSlice ? true : undefined}\n              className=\"pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center\"\n            >\n              <span className=\"max-w-[40%] truncate text-xs text-[var(--text-muted)]\">\n                {focusedSlice ? focusedSlice.slice.label : (centerLabel ?? labels.total)}\n              </span>\n              <span className=\"max-w-[40%] truncate text-lg font-semibold tabular-nums text-[var(--text-primary)]\">\n                {focusedSlice ? formatValue(focusedSlice.value) : (centerValue ?? formatValue(total))}\n              </span>\n              {focusedSlice && (\n                <span className=\"text-xs tabular-nums text-[var(--text-muted)]\">\n                  {formatShare(focusedSlice.share)}\n                </span>\n              )}\n            </div>\n          )}\n        </div>\n      )}\n      {legend === \"toggle\" && (\n        <ToggleLegend\n          entries={legendEntries}\n          hidden={hidden}\n          onToggle={toggle}\n          showSingle\n          className=\"justify-center\"\n          labels={{ legend: labels.legend }}\n        />\n      )}\n      {legend === \"static\" && (\n        <StaticLegend entries={legendEntries} className=\"justify-center\" aria-label={labels.legend} />\n      )}\n    </div>\n  );\n}\n"],"mappings":";AA6HM,cAsTM,YAtTN;AApHN,SAAS,aAAa,WAAW,iBAAiB,SAAS,QAAQ,gBAAgB;AAEnF,SAAS,KAAK,YAAY,kBAAkB,cAAc;AAE1D,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAC/B,SAAS,cAAc,oBAAoB;AAC3C,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB,cAAc,2BAA6C;AACpF,SAAS,gCAAqD;AAC9D,SAAS,cAAc,cAAc,oBAAsC;AAC3E,SAAS,mBAAmB;AAC5B,SAAS,wBAA0C;AA+FnD,MAAM,aAA0B,CAAC;AAEjC,MAAM,SAAS,KAAK,KAAK;AAIzB,SAAS,uBAAuB,OAAmD;AACjF,SACE,oBAAC,SAAI,gBAAY,MACf,8BAAC,uBAAqB,GAAG,OAAO,GAClC;AAEJ;AAsBO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,UAAU;AAAA,EACV,SAAS;AAAA,EACT,aAAa;AAAA,EACb,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,SAAS,aAAa,YAAY,0BAA0B,UAAU;AAC5E,QAAM,SAAS,aAAa,UAAU;AAEtC,QAAM,EAAE,MAAM,IAAI,YAAY;AAC9B,QAAM,MAAM,iBAAiB,MAAM;AACnC,QAAM,eAAe,QAAQ,MAAM,IAAI,KAAK,aAAa,MAAM,GAAG,CAAC,MAAM,CAAC;AAC1E,QAAM,iBAAiB;AAAA,IACrB,OAAO;AAAA,MACL,OAAO,IAAI,KAAK,aAAa,QAAQ,EAAE,OAAO,WAAW,uBAAuB,EAAE,CAAC;AAAA,MACnF,MAAM,IAAI,KAAK,aAAa,QAAQ,EAAE,OAAO,WAAW,uBAAuB,EAAE,CAAC;AAAA,IACpF;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAGA,QAAM,cAAc;AAAA,IAClB,CAAC,MAAe,kBAAkB,gBAAgB,CAAC,IAAI,aAAa,OAAO,CAAC;AAAA,IAC5E,CAAC,iBAAiB,YAAY;AAAA,EAChC;AAGA,QAAM,cAAc;AAAA,IAClB,CAAC,WAAmB,QAAQ,MAAM,eAAe,OAAO,eAAe,OAAO,OAAO,KAAK;AAAA,IAC1F,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,CAAC,WAAW,YAAY,IAAI,SAA8B,MAAM,oBAAI,IAAI,CAAC;AAC/E,QAAM,SAAS,cAAc;AAC7B,QAAM,SAAS,CAAC,QAAgB;AAC9B,UAAM,OAAO,aAAa,QAAQ,GAAG;AACrC,QAAI,eAAe,OAAW,cAAa,IAAI;AAC/C,2BAAuB,IAAI;AAAA,EAC7B;AAIA,QAAM,EAAE,UAAU,OAAO,OAAO,QAAQ,IAAI,QAAQ,MAAM;AACxD,UAAMA,YAAW,KACd,IAAI,CAAC,OAAO,OAAO,EAAE,OAAO,OAAO,MAAM,OAAO,OAAO,MAAM,SAAS,WAAW,CAAC,EAAE,EAAE,EACtF;AAAA,MAAO,CAAC,MACP,OAAO,EAAE,UAAU,YAAY,OAAO,SAAS,EAAE,KAAK,KAAK,EAAE,QAAQ;AAAA,IACvE;AACF,UAAM,QAAQA,UAAS,OAAO,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,MAAM,GAAG,CAAC;AAC7D,UAAMC,SAAQ,MAAM,OAAO,CAAC,KAAK,MAAM,MAAM,EAAE,OAAO,CAAC;AACvD,UAAMC,SAAsB,MAAM,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,OAAOD,SAAQ,IAAI,EAAE,QAAQA,SAAQ,EAAE,EAAE;AAC/F,UAAME,WAAUD,OAAM,IAAI,CAAC,OAAO;AAAA,MAChC,KAAK,EAAE,MAAM;AAAA,MACb,OAAO,EAAE,MAAM;AAAA,MACf,OAAO,EAAE;AAAA,MACT,MAAM,EAAE;AAAA,IACV,EAAE;AACF,WAAO,EAAE,UAAAF,WAAU,OAAAE,QAAO,OAAAD,QAAO,SAAAE,SAAQ;AAAA,EAC3C,GAAG,CAAC,MAAM,MAAM,CAAC;AAGjB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC;AAClC,QAAM,CAAC,SAAS,UAAU,IAAI,SAA6B,MAAS;AACpE,QAAM,UAAU,KAAK,IAAI,MAAM,KAAK,IAAI,GAAG,MAAM,SAAS,CAAC,CAAC;AAC5D,QAAM,OAAO,OAA+B,CAAC,CAAC;AAC9C,QAAM,eAAe,YAAY,SAAY,MAAM,OAAO,IAAI;AAI9D,QAAM,WAAW,OAAO,YAAY;AACpC,kBAAgB,MAAM;AACpB,aAAS,UAAU;AAAA,EACrB,CAAC;AACD,QAAM,YAAY,iBAAiB;AAWnC,QAAM,QAAQ;AAAA,IACZ,CAAC,UAA+B;AAC9B,YAAM;AAAA,QACJ;AAAA,QACA,UAAU;AAAA,QACV,UAAU;AAAA,QACV,sBAAsB;AAAA,QACtB,aAAa;AAAA,QACb,YAAY;AAAA;AAAA;AAAA;AAAA,QAIZ;AAAA,QACA,GAAG;AAAA,MACL,IAAI;AAMJ,YAAM,IAAI,MAAM,KAAK;AACrB,UAAI,CAAC,EAAG,QAAO,oBAAC,UAA+B,GAAG,UAAtB,OAAO,MAAuB;AAC1D,YAAM,YAAY,CAAC,UAAsC;AACvD,cAAM,OAAO,eAAe,MAAM,KAAK,MAAM,aAAa;AAC1D,YAAI;AACJ,YAAI,KAAM,UAAS,QAAQ;AAAA,iBAClB,MAAM,QAAQ,YAAa,UAAS,QAAQ;AAAA,iBAC5C,MAAM,QAAQ,UAAW,UAAS,QAAQ;AAAA,iBAC1C,MAAM,QAAQ,OAAQ,UAAS;AAAA,iBAC/B,MAAM,QAAQ,MAAO,UAAS,MAAM,SAAS;AACtD,YAAI,WAAW,QAAW;AACxB,gBAAM,eAAe;AAErB,eAAK,SAAU,SAAS,MAAM,SAAU,MAAM,UAAU,MAAM,MAAM,GAAG,MAAM;AAAA,QAC/E,WAAW,cAAc,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AACpE,gBAAM,eAAe;AACrB,mBAAS,UAAU,EAAE,MAAM,KAAK,EAAE,KAAK;AAAA,QACzC;AAAA,MACF;AACA,aACE;AAAA,QAAC;AAAA;AAAA,UACC,KAAK,CAAC,SAAS;AACb,iBAAK,QAAQ,KAAK,IAAI;AAAA,UACxB;AAAA,UACA,MAAM,YAAY,WAAW;AAAA,UAE7B,UAAU,UAAU,IAAI,IAAI;AAAA,UAC5B,cAAY,OAAO,MAAM,EAAE,MAAM,OAAO,YAAY,EAAE,KAAK,GAAG,YAAY,EAAE,KAAK,CAAC;AAAA,UAClF,cAAY,EAAE,MAAM;AAAA,UACpB;AAAA,UACA,SAAS,MAAM;AACb,oBAAQ,KAAK;AACb,uBAAW,KAAK;AAAA,UAClB;AAAA,UACA,QAAQ,MAAM,WAAW,MAAS;AAAA,UAGlC,WAAU;AAAA,UAEV,8BAAC,UAA+B,GAAG,UAAtB,OAAO,MAAuB;AAAA;AAAA,MAC7C;AAAA,IAEJ;AAAA,IACA,CAAC,OAAO,QAAQ,aAAa,aAAa,SAAS;AAAA,EACrD;AAEA,QAAM,QAAQ;AAAA,IACZ,CAAC,UAA+B;AAC9B,YAAM,IAAI,MAAM,MAAM,SAAS,EAAE;AACjC,YAAM,KAAK,OAAO,MAAM,EAAE;AAC1B,YAAM,KAAK,OAAO,MAAM,EAAE;AAC1B,YAAM,SAAS,OAAO,MAAM,WAAW;AACvC,YAAM,MAAM,OAAO,MAAM,QAAQ;AACjC,UAAI,CAAC,KAAK,EAAE,QAAQ,iBAAiB,CAAC,CAAC,IAAI,IAAI,QAAQ,GAAG,EAAE,MAAM,OAAO,QAAQ,EAAG,QAAO;AAC3F,YAAM,IAAI,SAAS,KAAK;AACxB,YAAM,IAAI,KAAK,IAAI,KAAK,IAAI,CAAC,MAAM,MAAM;AACzC,YAAM,IAAI,KAAK,IAAI,KAAK,IAAI,CAAC,MAAM,MAAM;AACzC,YAAM,UAAU,gBAAgB;AAChC,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,YAAY,KAAK,KAAK,UAAU;AAAA,UAChC,kBAAiB;AAAA,UACjB,UAAU,KAAK;AAAA,UACf,MAAK;AAAA,UACL,gBAAc,UAAU,UAAU,KAAK;AAAA,UACvC,OAAO,EAAE,eAAe,OAAO;AAAA,UAE9B,oBAAU,YAAY,EAAE,KAAK,IAAI,YAAY,EAAE,KAAK;AAAA;AAAA,MACvD;AAAA,IAEJ;AAAA,IACA,CAAC,OAAO,eAAe,aAAa,QAAQ,aAAa,aAAa,KAAK;AAAA,EAC7E;AAEA,QAAM,aAAa,gBAAgB;AAEnC,QAAM,QAAQ,aAAa,KAAK;AAChC,QAAM,QAAQ,YAAY,UAAU,KAAK,MAAM,QAAQ,GAAG,IAAI;AAW9D,QAAM,MAAM;AAAA,IACV,MACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,SAAQ;AAAA,QACR,SAAQ;AAAA,QACR,IAAG;AAAA,QACH,IAAG;AAAA,QACH,aAAa,GAAG,KAAK;AAAA,QACrB,aAAa,GAAG,KAAK;AAAA,QACrB,YAAY;AAAA,QACZ,UAAU;AAAA,QAEV,QAAO;AAAA,QACP,aAAa;AAAA,QACb,cAAc;AAAA,QACd,mBAAmB;AAAA,QACnB;AAAA,QACA,OAAO,aAAa,QAAQ;AAAA,QAC5B,WAAW;AAAA,QACX,SACE,YACI,CAAC,QAAiB,UAAkB;AAClC,gBAAM,IAAI,MAAM,KAAK;AACrB,cAAI,EAAG,UAAS,UAAU,EAAE,MAAM,KAAK,EAAE,KAAK;AAAA,QAChD,IACA;AAAA;AAAA,IAER;AAAA,IAEF,CAAC,SAAS,OAAO,OAAO,OAAO,YAAY,OAAO,OAAO,SAAS;AAAA,EACpE;AAGA,YAAU,MAAM;AACd,SAAK,QAAQ,QAAQ,CAAC,IAAI,MAAM,IAAI,aAAa,YAAY,MAAM,UAAU,MAAM,IAAI,CAAC;AAAA,EAC1F,CAAC;AAED,QAAM,gBAA+B,SAAS,IAAI,CAAC,OAAO;AAAA,IACxD,KAAK,EAAE,MAAM;AAAA,IACb,OAAO,EAAE,MAAM;AAAA,IACf,OAAO,EAAE;AAAA,EACX,EAAE;AAEF,QAAM,WACJ;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,qEAAqE,IAAI,SAAS;AAAA,MAChG,OAAO,IAAI;AAAA,MAEV,mBAAS,OAAO;AAAA;AAAA,EACnB;AAIF,MAAI,SAAS,WAAW,GAAG;AACzB,WACE,oBAAC,SAAK,GAAG,MAAM,WAAW,GAAG,UAAU,SAAS,GAAG,OAChD,oBACH;AAAA,EAEJ;AAEA,QAAM,UAAU,SAAS,yBAAyB;AAElD,SACE,qBAAC,SAAK,GAAG,MAAM,WAAW,GAAG,UAAU,SAAS,GAAG,OAChD;AAAA,UAAM,WAAW;AAAA;AAAA,MAEhB;AAAA,QAEA,qBAAC,SAAI,MAAK,SAAQ,cAAY,OAAO,QAAQ,WAAW,GAAG,YAAY,IAAI,SAAS,GAAG,OAAO,IAAI,OAChG;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ;AAAA,UACR,WAAW,GAAG,UAAU,aAAa,yCAAyC;AAAA,UAE9E,+BAAC,oBAAiB,oBAAoB,OACpC;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,SACE;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAS;AAAA,oBACT,gBAAgB,CAAC,MACf,GAAG,YAAY,CAAC,CAAC,KAAK,YAAY,QAAQ,IAAI,IAAI,QAAQ,CAAC,CAAC;AAAA;AAAA,gBAEhE;AAAA;AAAA,YAEJ;AAAA,YACC;AAAA,aACH;AAAA;AAAA,MACF;AAAA,MACC,YAAY,WAAW,UACtB;AAAA,QAAC;AAAA;AAAA,UACC,gBAAc,SAAS,KAAK;AAAA,UAI5B,eAAa,eAAe,OAAO;AAAA,UACnC,WAAU;AAAA,UAEV;AAAA,gCAAC,UAAK,WAAU,yDACb,yBAAe,aAAa,MAAM,QAAS,eAAe,OAAO,OACpE;AAAA,YACA,oBAAC,UAAK,WAAU,sFACb,yBAAe,YAAY,aAAa,KAAK,IAAK,eAAe,YAAY,KAAK,GACrF;AAAA,YACC,gBACC,oBAAC,UAAK,WAAU,iDACb,sBAAY,aAAa,KAAK,GACjC;AAAA;AAAA;AAAA,MAEJ;AAAA,OAEJ;AAAA,IAED,WAAW,YACV;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT;AAAA,QACA,UAAU;AAAA,QACV,YAAU;AAAA,QACV,WAAU;AAAA,QACV,QAAQ,EAAE,QAAQ,OAAO,OAAO;AAAA;AAAA,IAClC;AAAA,IAED,WAAW,YACV,oBAAC,gBAAa,SAAS,eAAe,WAAU,kBAAiB,cAAY,OAAO,QAAQ;AAAA,KAEhG;AAEJ;","names":["drawable","total","drawn","pieData"]}

package/dist/components/popover.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import { ComponentPropsWithoutRef, RefObject, ReactNode } from 'react';
+import { RemLength } from '../hooks/use-breakpoint.js';
 
 /** The panel's accessible name. A `role="dialog"` with no name announces as "dialog"
  *  and nothing else, which is worse than the unlabelled div it replaced — so it is a
@@ -26,7 +27,14 @@ interface PopoverProps extends Omit<ComponentPropsWithoutRef<"div">, "children">
         ref: RefObject<HTMLButtonElement | null>;
     }) => ReactNode;
     children: (close: () => void) => ReactNode;
-    width?: number;
+    /**
+     * The panel's width: `"18rem"` (the default) grows with the text size — the panel
+     * holds text, and a 288 px calendar at 150 % cut its own month off (0.32,
+     * docs/text-size-harmonization.md §3.2). A plain number is px, fixed, as before.
+     * Either way the panel is never wider than the viewport less 8 px a side: 18rem is
+     * 432 px at Extra large, more than a 360 px phone has.
+     */
+    width?: number | RemLength;
     labels?: Partial<PopoverLabels>;
     /** Id for the panel, so a trigger wearing `role="combobox"` can `aria-controls` it.
      *  Required by ARIA on that role, and the panel is rendered here rather than by the

package/dist/components/popover.js

@@ -5,6 +5,7 @@ import { createPortal } from "react-dom";
 import { useAnchoredPanel } from "../hooks/use-anchored-panel.js";
 import { useEscapeKey, useOutsideClick } from "../hooks/use-dismiss.js";
 import { useFocusTrap } from "../hooks/use-focus-trap.js";
+import { lengthPx, useRemPx } from "../hooks/use-breakpoint.js";
 import { cn } from "../lib/cn.js";
 import { dirOf } from "../lib/direction.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
@@ -14,7 +15,8 @@ const DEFAULT_POPOVER_LABELS = {
   // bare Popover falls back to this — the kit's own pickers name their panels.
   panel: "Pop-up"
 };
-const POPOVER_WIDTH = 288;
+const POPOVER_WIDTH = "18rem";
+const EDGE = 8;
 function Popover({
   trigger,
   children,
@@ -38,11 +40,13 @@ function Popover({
   const text = useKitLabels("popover", DEFAULT_POPOVER_LABELS, labels);
   const placement = useAnchoredPanel(triggerRef, open);
   const rect = placement.rect;
+  const remPx = useRemPx();
+  const panelWidth = rect ? Math.min(lengthPx(width, remPx), Math.max(0, window.innerWidth - 2 * EDGE)) : 0;
   const pos = rect ? {
     top: placement.top,
     left: Math.min(
-      Math.max(8, dir === "rtl" ? rect.left : rect.right - width),
-      window.innerWidth - width - 8
+      Math.max(EDGE, dir === "rtl" ? rect.left : rect.right - panelWidth),
+      window.innerWidth - panelWidth - EDGE
     )
   } : null;
   useOutsideClick([triggerRef, panelRef], close, open);
@@ -90,7 +94,7 @@ function Popover({
             position: "fixed",
             top: pos.top,
             left: pos.left,
-            width,
+            width: panelWidth,
             maxHeight: placement.maxHeight
           },
           className: cn(

package/dist/components/popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf } from \"../lib/direction\";\nimport type { Direction } from \"../lib/direction\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\n/** The panel's accessible name. A `role=\"dialog\"` with no name announces as \"dialog\"\n *  and nothing else, which is worse than the unlabelled div it replaced — so it is a\n *  prop with an English default, like every other string this package renders. Callers\n *  should pass the control's own name (\"Filter\", \"Choose a date\"); the default is only\n *  there so an unmigrated call site is still named. */\nexport interface PopoverLabels {\n  panel: string;\n}\n\n// Exported since the kit grew one label tree (`UiKitLabels`, src/i18n): the complete\n// English reference a translator works from has to be able to name every namespace.\nexport const DEFAULT_POPOVER_LABELS: PopoverLabels = {\n  // \"Pop-up\", not \"Popover\": the panel's accessible name is read to USERS, and\n  // \"popover\" is a developer's word for it (reported by keksdose, 0.5.0). Only a\n  // bare Popover falls back to this — the kit's own pickers name their panels.\n  panel: \"Pop-up\",\n};\n\n/**\n * Exported, and extending the `<div>` attributes, so a consumer wrapping this — which is\n * what `DateField` and `FilterPopover` in this very package do — can hand anything\n * through to the PANEL: a `data-tour` anchor for the kit's own guided tour, a test id,\n * an `aria-describedby`, or an `aria-label` naming this particular popover.\n *\n * `children` is omitted from those attributes rather than inherited: here it is a render\n * prop taking the panel's `close`, not a `ReactNode`, so the two cannot be reconciled.\n */\nexport interface PopoverProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  trigger: (state: { open: boolean; toggle: () => void; ref: RefObject<HTMLButtonElement | null> }) => ReactNode;\n  children: (close: () => void) => ReactNode;\n  width?: number;\n  labels?: Partial<PopoverLabels>;\n  /** Id for the panel, so a trigger wearing `role=\"combobox\"` can `aria-controls` it.\n   *  Required by ARIA on that role, and the panel is rendered here rather than by the\n   *  caller, so the id has to come in from outside. */\n  panelId?: string;\n  /** Extra classes for the PANEL. The trigger is the caller's own element. */\n  className?: string;\n}\n\nconst POPOVER_WIDTH = 288;\n\n/**\n * Portal-rendered popover anchored under its trigger button. The panel is fixed\n * to the viewport (so table/overflow ancestors can't clip it) and re-aligns on\n * scroll/resize; it closes on outside-click and Escape.\n *\n * ## Trapped, not merely focused — and why, because it is the closer call\n *\n * The audit's finding was that this panel *\"portals out of the tab order with no role\n * and no focus move\"*: Tab from the trigger went straight past the panel into the page\n * behind it, so the calendar, the calculator keypad and every column filter in the kit\n * were mouse-only. Two shapes fix that, and a popover is not automatically a dialog, so\n * this was chosen rather than inherited:\n *\n *  - **The light one** — move focus in on open, hand it back on close, and let Tab walk\n *    OUT of the panel into whatever follows the trigger. That is the right shape for a\n *    non-modal popover sitting inline in the document.\n *  - **The trap** — Tab cycles inside the panel; Escape and a click outside are the\n *    ways out. What is here.\n *\n * The deciding fact is the portal. This panel is rendered to the END of `<body>`, not\n * beside its trigger, so \"let Tab walk out\" does not mean \"carry on from the trigger\" —\n * it means land at the end of the document, several hundred controls from where the\n * user was. Tabbing out of it would be a worse place to arrive than the one the finding\n * complains about, and fixing that properly needs a sentinel-and-return dance that\n * nothing in this package has. The trap gets the user back to the trigger every time,\n * because `useFocusTrap` restores focus on close.\n *\n * And the panels this kit actually opens are self-contained: pick a date, tap out a\n * sum, narrow a column. Each of them commits and closes, and each already has two\n * documented ways out wired above — Escape and an outside press — so containment costs\n * a keyboard user nothing they had.\n *\n * **It stays non-modal in every other respect**, deliberately: no backdrop, no body\n * scroll lock, and no `aria-modal`, so the page behind is still readable by a screen\n * reader, still scrollable, and still clickable — clicking it is what dismisses this.\n * Only Tab is contained. A popover that took the page away as well would be a\n * {@link Modal}, and there is one of those.\n */\nexport function Popover({\n  trigger,\n  children,\n  width = POPOVER_WIDTH,\n  labels,\n  panelId,\n  className,\n  style,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: PopoverProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [open, setOpen] = useState(false);\n  // The trigger's reading direction, read when it is pressed. The panel is portalled to\n  // <body>, out of any `dir=\"rtl\"` subtree the trigger sits in, so without carrying it\n  // across a right-to-left calendar or filter rendered left-to-right.\n  const [dir, setDir] = useState<Direction>(\"ltr\");\n  const close = () => setOpen(false);\n  const toggle = () => {\n    setDir(dirOf(triggerRef.current));\n    setOpen((v) => !v);\n  };\n  // prop > `<UiKitProvider labels={{ popover }}>` > English. The provider's\n  // `popover.panel` is only the last-resort name for a panel no caller named.\n  const text = useKitLabels(\"popover\", DEFAULT_POPOVER_LABELS, labels);\n\n  // Align the panel's END edge to the trigger's — right in LTR, left in RTL; it was\n  // always `rect.right`, so an RTL panel hung off the wrong side — and clamp it\n  // horizontally; the\n  // hook owns the vertical half — below by default, flipped above (and height-capped)\n  // when that is where the room is, e.g. once a mobile keyboard has eaten the bottom\n  // of the screen (feedback #135). It re-measures on scroll/resize.\n  const placement = useAnchoredPanel(triggerRef, open);\n  const rect = placement.rect;\n  const pos = rect\n    ? {\n        top: placement.top,\n        left: Math.min(\n          Math.max(8, dir === \"rtl\" ? rect.left : rect.right - width),\n          window.innerWidth - width - 8,\n        ),\n      }\n    : null;\n\n  useOutsideClick([triggerRef, panelRef], close, open);\n  useEscapeKey(close, open);\n\n  useFocusTrap(panelRef, {\n    active: open && pos !== null,\n    // The panel keeps a focus one of its own children has already taken. `FilterPopover`\n    // autofocuses its text box on mount — that is what the press on \"Filter\" was FOR,\n    // and it is a prop there precisely so the popover keeps it — and a trap that\n    // unconditionally focused the container would take it straight back off again,\n    // one effect later and invisibly.\n    initialFocus: () => {\n      const panel = panelRef.current;\n      const active = document.activeElement;\n      return panel?.contains(active) ? (active as HTMLElement) : panel;\n    },\n  });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key !== \"Escape\") return;\n    // `useEscapeKey` above listens on the document and still covers the case where\n    // focus somehow is not in here. This handler is for the case that focus IS, which\n    // is now the normal one — and it exists to STOP the key, because a popover opened\n    // from inside a `Modal` (the calculator on an amount field is exactly that) would\n    // otherwise have its Escape travel on up the React tree and close the dialog\n    // underneath as well. Closing twice is harmless — `close` is a state setter, not a\n    // caller's callback — so the two paths cannot double-fire anything.\n    e.stopPropagation();\n    close();\n  };\n\n  return (\n    <>\n      {trigger({ open, toggle, ref: triggerRef })}\n      {open && pos &&\n        createPortal(\n          /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the\n             dialog container, per the APG dialog pattern: `onKeyDown` is Escape-to-close for\n             whatever inside it holds focus. */\n          <div\n            // `...rest` first: the role, the id the trigger's `aria-controls` points at,\n            // the `tabIndex` the trap needs and the measured position are what make this\n            // a popover, and a caller reaching for a `data-tour` anchor must not be able\n            // to remove one of them by accident.\n            {...rest}\n            ref={panelRef}\n            role=\"dialog\"\n            id={panelId}\n            // The caller's own `aria-label` wins over {@link PopoverLabels.panel}, which\n            // is the package's English fallback for an unnamed panel. Both name the same\n            // element; the DOM spelling is the one being standardised on, so where both\n            // are present it is the one that survives.\n            aria-label={ariaLabel ?? text.panel}\n            dir={rest.dir ?? dir}\n            // Without it the panel cannot take focus at all, and the trap above would\n            // silently do nothing on a panel whose children are not yet tabbable.\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n            style={{\n              // Merged over the caller's, never replaced by it: these four are measured\n              // against the trigger every scroll and resize, and a panel that dropped\n              // them would paint at the top-left of the viewport.\n              ...style,\n              position: \"fixed\",\n              top: pos.top,\n              left: pos.left,\n              width,\n              maxHeight: placement.maxHeight,\n            }}\n            className={cn(\n              \"z-50 overflow-y-auto rounded-md border border-[var(--border)] bg-[var(--bg-surface)] p-3 shadow-lg outline-none\",\n              className,\n            )}\n          >\n            {children(close)}\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n"],"mappings":";AAuKI,mBAOM,KAPN;AAvKJ,SAAS,QAAQ,gBAAgB;AAEjC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,cAAc,uBAAuB;AAC9C,SAAS,oBAAoB;AAC7B,SAAS,UAAU;AACnB,SAAS,aAAa;AAEtB,SAAS,oBAAoB;AAatB,MAAM,yBAAwC;AAAA;AAAA;AAAA;AAAA,EAInD,OAAO;AACT;AAwBA,MAAM,gBAAgB;AAwCf,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAiB;AACf,QAAM,aAAa,OAA0B,IAAI;AACjD,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAItC,QAAM,CAAC,KAAK,MAAM,IAAI,SAAoB,KAAK;AAC/C,QAAM,QAAQ,MAAM,QAAQ,KAAK;AACjC,QAAM,SAAS,MAAM;AACnB,WAAO,MAAM,WAAW,OAAO,CAAC;AAChC,YAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,EACnB;AAGA,QAAM,OAAO,aAAa,WAAW,wBAAwB,MAAM;AAQnE,QAAM,YAAY,iBAAiB,YAAY,IAAI;AACnD,QAAM,OAAO,UAAU;AACvB,QAAM,MAAM,OACR;AAAA,IACE,KAAK,UAAU;AAAA,IACf,MAAM,KAAK;AAAA,MACT,KAAK,IAAI,GAAG,QAAQ,QAAQ,KAAK,OAAO,KAAK,QAAQ,KAAK;AAAA,MAC1D,OAAO,aAAa,QAAQ;AAAA,IAC9B;AAAA,EACF,IACA;AAEJ,kBAAgB,CAAC,YAAY,QAAQ,GAAG,OAAO,IAAI;AACnD,eAAa,OAAO,IAAI;AAExB,eAAa,UAAU;AAAA,IACrB,QAAQ,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMxB,cAAc,MAAM;AAClB,YAAM,QAAQ,SAAS;AACvB,YAAM,SAAS,SAAS;AACxB,aAAO,OAAO,SAAS,MAAM,IAAK,SAAyB;AAAA,IAC7D;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,CAAC,MAAqC;AAC1D,QAAI,EAAE,QAAQ,SAAU;AAQxB,MAAE,gBAAgB;AAClB,UAAM;AAAA,EACR;AAEA,SACE,iCACG;AAAA,YAAQ,EAAE,MAAM,QAAQ,KAAK,WAAW,CAAC;AAAA,IACzC,QAAQ,OACP;AAAA;AAAA;AAAA;AAAA,MAIE;AAAA,QAAC;AAAA;AAAA,UAKE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,MAAK;AAAA,UACL,IAAI;AAAA,UAKJ,cAAY,aAAa,KAAK;AAAA,UAC9B,KAAK,KAAK,OAAO;AAAA,UAGjB,UAAU;AAAA,UACV,WAAW;AAAA,UACX,OAAO;AAAA;AAAA;AAAA;AAAA,YAIL,GAAG;AAAA,YACH,UAAU;AAAA,YACV,KAAK,IAAI;AAAA,YACT,MAAM,IAAI;AAAA,YACV;AAAA,YACA,WAAW,UAAU;AAAA,UACvB;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UACF;AAAA,UAEC,mBAAS,KAAK;AAAA;AAAA,MACjB;AAAA,MACA,SAAS;AAAA,IACX;AAAA,KACJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { lengthPx, useRemPx, type RemLength } from \"../hooks/use-breakpoint\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf } from \"../lib/direction\";\nimport type { Direction } from \"../lib/direction\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\n/** The panel's accessible name. A `role=\"dialog\"` with no name announces as \"dialog\"\n *  and nothing else, which is worse than the unlabelled div it replaced — so it is a\n *  prop with an English default, like every other string this package renders. Callers\n *  should pass the control's own name (\"Filter\", \"Choose a date\"); the default is only\n *  there so an unmigrated call site is still named. */\nexport interface PopoverLabels {\n  panel: string;\n}\n\n// Exported since the kit grew one label tree (`UiKitLabels`, src/i18n): the complete\n// English reference a translator works from has to be able to name every namespace.\nexport const DEFAULT_POPOVER_LABELS: PopoverLabels = {\n  // \"Pop-up\", not \"Popover\": the panel's accessible name is read to USERS, and\n  // \"popover\" is a developer's word for it (reported by keksdose, 0.5.0). Only a\n  // bare Popover falls back to this — the kit's own pickers name their panels.\n  panel: \"Pop-up\",\n};\n\n/**\n * Exported, and extending the `<div>` attributes, so a consumer wrapping this — which is\n * what `DateField` and `FilterPopover` in this very package do — can hand anything\n * through to the PANEL: a `data-tour` anchor for the kit's own guided tour, a test id,\n * an `aria-describedby`, or an `aria-label` naming this particular popover.\n *\n * `children` is omitted from those attributes rather than inherited: here it is a render\n * prop taking the panel's `close`, not a `ReactNode`, so the two cannot be reconciled.\n */\nexport interface PopoverProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  trigger: (state: { open: boolean; toggle: () => void; ref: RefObject<HTMLButtonElement | null> }) => ReactNode;\n  children: (close: () => void) => ReactNode;\n  /**\n   * The panel's width: `\"18rem\"` (the default) grows with the text size — the panel\n   * holds text, and a 288 px calendar at 150 % cut its own month off (0.32,\n   * docs/text-size-harmonization.md §3.2). A plain number is px, fixed, as before.\n   * Either way the panel is never wider than the viewport less 8 px a side: 18rem is\n   * 432 px at Extra large, more than a 360 px phone has.\n   */\n  width?: number | RemLength;\n  labels?: Partial<PopoverLabels>;\n  /** Id for the panel, so a trigger wearing `role=\"combobox\"` can `aria-controls` it.\n   *  Required by ARIA on that role, and the panel is rendered here rather than by the\n   *  caller, so the id has to come in from outside. */\n  panelId?: string;\n  /** Extra classes for the PANEL. The trigger is the caller's own element. */\n  className?: string;\n}\n\n/** 288 px at Normal, in rem so it follows the text size (§3.2). */\nconst POPOVER_WIDTH: RemLength = \"18rem\";\n\n/** The gap the panel keeps from either edge of the viewport, in px. */\nconst EDGE = 8;\n\n/**\n * Portal-rendered popover anchored under its trigger button. The panel is fixed\n * to the viewport (so table/overflow ancestors can't clip it) and re-aligns on\n * scroll/resize; it closes on outside-click and Escape.\n *\n * ## Trapped, not merely focused — and why, because it is the closer call\n *\n * The audit's finding was that this panel *\"portals out of the tab order with no role\n * and no focus move\"*: Tab from the trigger went straight past the panel into the page\n * behind it, so the calendar, the calculator keypad and every column filter in the kit\n * were mouse-only. Two shapes fix that, and a popover is not automatically a dialog, so\n * this was chosen rather than inherited:\n *\n *  - **The light one** — move focus in on open, hand it back on close, and let Tab walk\n *    OUT of the panel into whatever follows the trigger. That is the right shape for a\n *    non-modal popover sitting inline in the document.\n *  - **The trap** — Tab cycles inside the panel; Escape and a click outside are the\n *    ways out. What is here.\n *\n * The deciding fact is the portal. This panel is rendered to the END of `<body>`, not\n * beside its trigger, so \"let Tab walk out\" does not mean \"carry on from the trigger\" —\n * it means land at the end of the document, several hundred controls from where the\n * user was. Tabbing out of it would be a worse place to arrive than the one the finding\n * complains about, and fixing that properly needs a sentinel-and-return dance that\n * nothing in this package has. The trap gets the user back to the trigger every time,\n * because `useFocusTrap` restores focus on close.\n *\n * And the panels this kit actually opens are self-contained: pick a date, tap out a\n * sum, narrow a column. Each of them commits and closes, and each already has two\n * documented ways out wired above — Escape and an outside press — so containment costs\n * a keyboard user nothing they had.\n *\n * **It stays non-modal in every other respect**, deliberately: no backdrop, no body\n * scroll lock, and no `aria-modal`, so the page behind is still readable by a screen\n * reader, still scrollable, and still clickable — clicking it is what dismisses this.\n * Only Tab is contained. A popover that took the page away as well would be a\n * {@link Modal}, and there is one of those.\n */\nexport function Popover({\n  trigger,\n  children,\n  width = POPOVER_WIDTH,\n  labels,\n  panelId,\n  className,\n  style,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: PopoverProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [open, setOpen] = useState(false);\n  // The trigger's reading direction, read when it is pressed. The panel is portalled to\n  // <body>, out of any `dir=\"rtl\"` subtree the trigger sits in, so without carrying it\n  // across a right-to-left calendar or filter rendered left-to-right.\n  const [dir, setDir] = useState<Direction>(\"ltr\");\n  const close = () => setOpen(false);\n  const toggle = () => {\n    setDir(dirOf(triggerRef.current));\n    setOpen((v) => !v);\n  };\n  // prop > `<UiKitProvider labels={{ popover }}>` > English. The provider's\n  // `popover.panel` is only the last-resort name for a panel no caller named.\n  const text = useKitLabels(\"popover\", DEFAULT_POPOVER_LABELS, labels);\n\n  // Align the panel's END edge to the trigger's — right in LTR, left in RTL; it was\n  // always `rect.right`, so an RTL panel hung off the wrong side — and clamp it\n  // horizontally; the\n  // hook owns the vertical half — below by default, flipped above (and height-capped)\n  // when that is where the room is, e.g. once a mobile keyboard has eaten the bottom\n  // of the screen (feedback #135). It re-measures on scroll/resize.\n  const placement = useAnchoredPanel(triggerRef, open);\n  const rect = placement.rect;\n  // In px for the arithmetic below, at the text size in force; capped at the viewport.\n  const remPx = useRemPx();\n  const panelWidth = rect\n    ? Math.min(lengthPx(width, remPx), Math.max(0, window.innerWidth - 2 * EDGE))\n    : 0;\n  const pos = rect\n    ? {\n        top: placement.top,\n        left: Math.min(\n          Math.max(EDGE, dir === \"rtl\" ? rect.left : rect.right - panelWidth),\n          window.innerWidth - panelWidth - EDGE,\n        ),\n      }\n    : null;\n\n  useOutsideClick([triggerRef, panelRef], close, open);\n  useEscapeKey(close, open);\n\n  useFocusTrap(panelRef, {\n    active: open && pos !== null,\n    // The panel keeps a focus one of its own children has already taken. `FilterPopover`\n    // autofocuses its text box on mount — that is what the press on \"Filter\" was FOR,\n    // and it is a prop there precisely so the popover keeps it — and a trap that\n    // unconditionally focused the container would take it straight back off again,\n    // one effect later and invisibly.\n    initialFocus: () => {\n      const panel = panelRef.current;\n      const active = document.activeElement;\n      return panel?.contains(active) ? (active as HTMLElement) : panel;\n    },\n  });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key !== \"Escape\") return;\n    // `useEscapeKey` above listens on the document and still covers the case where\n    // focus somehow is not in here. This handler is for the case that focus IS, which\n    // is now the normal one — and it exists to STOP the key, because a popover opened\n    // from inside a `Modal` (the calculator on an amount field is exactly that) would\n    // otherwise have its Escape travel on up the React tree and close the dialog\n    // underneath as well. Closing twice is harmless — `close` is a state setter, not a\n    // caller's callback — so the two paths cannot double-fire anything.\n    e.stopPropagation();\n    close();\n  };\n\n  return (\n    <>\n      {trigger({ open, toggle, ref: triggerRef })}\n      {open && pos &&\n        createPortal(\n          /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the\n             dialog container, per the APG dialog pattern: `onKeyDown` is Escape-to-close for\n             whatever inside it holds focus. */\n          <div\n            // `...rest` first: the role, the id the trigger's `aria-controls` points at,\n            // the `tabIndex` the trap needs and the measured position are what make this\n            // a popover, and a caller reaching for a `data-tour` anchor must not be able\n            // to remove one of them by accident.\n            {...rest}\n            ref={panelRef}\n            role=\"dialog\"\n            id={panelId}\n            // The caller's own `aria-label` wins over {@link PopoverLabels.panel}, which\n            // is the package's English fallback for an unnamed panel. Both name the same\n            // element; the DOM spelling is the one being standardised on, so where both\n            // are present it is the one that survives.\n            aria-label={ariaLabel ?? text.panel}\n            dir={rest.dir ?? dir}\n            // Without it the panel cannot take focus at all, and the trap above would\n            // silently do nothing on a panel whose children are not yet tabbable.\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n            style={{\n              // Merged over the caller's, never replaced by it: these four are measured\n              // against the trigger every scroll and resize, and a panel that dropped\n              // them would paint at the top-left of the viewport.\n              ...style,\n              position: \"fixed\",\n              top: pos.top,\n              left: pos.left,\n              width: panelWidth,\n              maxHeight: placement.maxHeight,\n            }}\n            className={cn(\n              \"z-50 overflow-y-auto rounded-md border border-[var(--border)] bg-[var(--bg-surface)] p-3 shadow-lg outline-none\",\n              className,\n            )}\n          >\n            {children(close)}\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n"],"mappings":";AAwLI,mBAOM,KAPN;AAxLJ,SAAS,QAAQ,gBAAgB;AAEjC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,cAAc,uBAAuB;AAC9C,SAAS,oBAAoB;AAC7B,SAAS,UAAU,gBAAgC;AACnD,SAAS,UAAU;AACnB,SAAS,aAAa;AAEtB,SAAS,oBAAoB;AAatB,MAAM,yBAAwC;AAAA;AAAA;AAAA;AAAA,EAInD,OAAO;AACT;AAgCA,MAAM,gBAA2B;AAGjC,MAAM,OAAO;AAwCN,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAiB;AACf,QAAM,aAAa,OAA0B,IAAI;AACjD,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAItC,QAAM,CAAC,KAAK,MAAM,IAAI,SAAoB,KAAK;AAC/C,QAAM,QAAQ,MAAM,QAAQ,KAAK;AACjC,QAAM,SAAS,MAAM;AACnB,WAAO,MAAM,WAAW,OAAO,CAAC;AAChC,YAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,EACnB;AAGA,QAAM,OAAO,aAAa,WAAW,wBAAwB,MAAM;AAQnE,QAAM,YAAY,iBAAiB,YAAY,IAAI;AACnD,QAAM,OAAO,UAAU;AAEvB,QAAM,QAAQ,SAAS;AACvB,QAAM,aAAa,OACf,KAAK,IAAI,SAAS,OAAO,KAAK,GAAG,KAAK,IAAI,GAAG,OAAO,aAAa,IAAI,IAAI,CAAC,IAC1E;AACJ,QAAM,MAAM,OACR;AAAA,IACE,KAAK,UAAU;AAAA,IACf,MAAM,KAAK;AAAA,MACT,KAAK,IAAI,MAAM,QAAQ,QAAQ,KAAK,OAAO,KAAK,QAAQ,UAAU;AAAA,MAClE,OAAO,aAAa,aAAa;AAAA,IACnC;AAAA,EACF,IACA;AAEJ,kBAAgB,CAAC,YAAY,QAAQ,GAAG,OAAO,IAAI;AACnD,eAAa,OAAO,IAAI;AAExB,eAAa,UAAU;AAAA,IACrB,QAAQ,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMxB,cAAc,MAAM;AAClB,YAAM,QAAQ,SAAS;AACvB,YAAM,SAAS,SAAS;AACxB,aAAO,OAAO,SAAS,MAAM,IAAK,SAAyB;AAAA,IAC7D;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,CAAC,MAAqC;AAC1D,QAAI,EAAE,QAAQ,SAAU;AAQxB,MAAE,gBAAgB;AAClB,UAAM;AAAA,EACR;AAEA,SACE,iCACG;AAAA,YAAQ,EAAE,MAAM,QAAQ,KAAK,WAAW,CAAC;AAAA,IACzC,QAAQ,OACP;AAAA;AAAA;AAAA;AAAA,MAIE;AAAA,QAAC;AAAA;AAAA,UAKE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,MAAK;AAAA,UACL,IAAI;AAAA,UAKJ,cAAY,aAAa,KAAK;AAAA,UAC9B,KAAK,KAAK,OAAO;AAAA,UAGjB,UAAU;AAAA,UACV,WAAW;AAAA,UACX,OAAO;AAAA;AAAA;AAAA;AAAA,YAIL,GAAG;AAAA,YACH,UAAU;AAAA,YACV,KAAK,IAAI;AAAA,YACT,MAAM,IAAI;AAAA,YACV,OAAO;AAAA,YACP,WAAW,UAAU;AAAA,UACvB;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UACF;AAAA,UAEC,mBAAS,KAAK;AAAA;AAAA,MACjB;AAAA,MACA,SAAS;AAAA,IACX;AAAA,KACJ;AAEJ;","names":[]}

package/dist/components/row-actions.d.ts

@@ -0,0 +1,100 @@
+import 'react';
+import 'lucide-react';
+export { cO as DEFAULT_ROW_ACTIONS_LABELS, eO as RowAction, eP as RowActionList, eQ as RowActions, eR as RowActionsCollapse, eS as RowActionsColumnOptions, eT as RowActionsLabels, eU as RowActionsProps, eV as RowActionsSize, fY as rowActionsColumn } from '../delete-account-setting-FLyJf-kZ.js';
+import '../data-table-labels-kpAAVi6g.js';
+import './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
+import './mini-calendar.js';
+import './calendar-heatmap.js';
+import './popover.js';
+import '../hooks/use-breakpoint.js';
+import './chip.js';
+import './field-parts.js';
+import './field-sync.js';
+import '../wizard/types.js';
+import '../tour/tour.js';
+import '../search/command-palette.js';
+import '../search/global-search.js';
+import '../search/search-index.js';
+import './month-picker.js';
+import './page-contents.js';
+import './series-chart-labels.js';
+import './pie-chart-labels.js';
+import './sparkline.js';
+import './stat-tile.js';
+import './signature-pad.js';
+import './password-strength.js';
+import './swatch-picker.js';
+import './tile-radio.js';
+import './icon-picker.js';
+import './dialog-frame.js';
+import './modal.js';
+import '../hooks/use-search-param-state.js';
+import './measured-grid.js';
+import './user-avatar.js';
+import '../lib/person-name.js';
+import './status-dot.js';
+import './progress-bar.js';
+import './signed-amount.js';
+import '../shell/topbar-action-menu.js';
+import './menu-item.js';
+import './floating-panel.js';
+import '../hooks/use-authed-src.js';
+import './account-settings-labels.js';
+import './bulk-action-bar.js';
+import './list.js';
+import './breadcrumbs.js';
+import './toast.js';
+import './description-list.js';
+import './line-items.js';
+import './error-boundary.js';
+import './authed-image.js';
+import './image-grid.js';
+import './lightbox.js';
+import './write-lock.js';
+import '../auth/sign-in-form.js';
+import '../landing/access.js';
+import '../landing/landing-labels.js';
+import '../shell/topbar-controls.js';
+import '../theme/palette-presets.js';
+import '../theme/chart-palette.js';
+import '../theme/theme-store.js';
+import 'zustand/middleware';
+import 'zustand';
+import '../auth/complete-name-dialog.js';
+import '../auth/forgot-password-form.js';
+import '../auth/status-parts.js';
+import '../auth/reset-password-form.js';
+import '../auth/verify-email.js';
+import '../auth/not-found-page.js';
+import '../auth/accept-invitation.js';
+import '../shell/company-switcher.js';
+import '../account/email-change-setting.js';
+import '../account/sessions-setting.js';
+import '../lib/format.js';
+import '../account/data-export-setting.js';
+import './account-chips.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
+import '../admin/admin-parts.js';
+import '../admin/admin-action-log.js';
+import '../settings/settings-labels.js';
+import '../demo/demo-labels.js';
+import './appearance-labels.js';
+import '../theme/contrast.js';
+import '../theme/text-size.js';
+import './reauth-dialog.js';
+import './server-wake.js';
+import '../lib/server-wake.js';
+import './translation-review-labels.js';
+import '../lib/translation-review.js';
+import './country-select.js';
+import './inline-edit-field.js';
+import '../lib/iban.js';
+import '../lib/phone.js';
+import './sign-chip.js';
+import './column-mapper.js';
+import '../lib/column-mapping.js';
+import '../lib/table-text.js';
+import './focus-ring.js';