@eifi1/ui-kit 0.34.0 → 0.35.0

package/dist/components/settings-fields.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/settings-fields.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Select } from \"./select\";\nimport type { SelectProps } from \"./select\";\nimport { ToggleGroup } from \"./toggle-group\";\nimport type { ToggleGroupBaseProps } from \"./toggle-group\";\nimport type { ThemePreference } from \"../theme/theme-store\";\nimport { TEXT_SIZES } from \"../theme/text-size\";\nimport type { TextSize } from \"../theme/text-size\";\nimport { CONTRAST_MODES } from \"../theme/contrast\";\nimport type { ContrastMode } from \"../theme/contrast\";\nimport { useAppearanceLabels } from \"./appearance-labels\";\nimport type { AppearanceLabels } from \"./appearance-labels\";\nimport type { LabelOverride } from \"../i18n/kit-labels\";\nimport { LanguageSelect } from \"./language-select\";\nimport type { KitLanguageCode } from \"../i18n/languages\";\n\n/**\n * App-agnostic settings-field components (feedback #333): the language + theme\n * controls that every app's settings page needs — and, since 0.32, the text size and\n * the contrast (docs/text-size-harmonization.md §6), whose words are the kit's own\n * `appearance` namespace — so they live in @hb/ui and the app just supplies the\n * current value, a change handler and translated labels.\n * The app owns WHERE these render (its own settings page) and any app-specific\n * fields around them.\n */\n\n/**\n * Everything a {@link Select} takes, minus the two this component owns: the value is a\n * {@link ThemePreference} rather than a string, and `onChange` hands over the preference\n * itself because no caller of this wants the event. The rest — `disabled`, `required`,\n * `invalid`, `error`, a `data-tour` anchor — passes straight through, which is what makes\n * this a settings FIELD rather than a fixed widget.\n *\n * The `Select` half of {@link ThemeSettingProps}; until 0.34 it carried that name, which\n * left the toggle out of the type the component is documented by (API-9).\n */\nexport interface ThemeSettingSelectProps\n  extends Omit<SelectProps, \"value\" | \"onChange\" | \"children\"> {\n  /** The `Select` (default). See {@link ThemeSettingToggleProps} for `\"toggle\"`. */\n  variant?: \"select\";\n  value: ThemePreference;\n  onChange: (value: ThemePreference) => void;\n  label: ReactNode;\n  /** Translated option labels. */\n  optionLabels: { system: string; light: string; dark: string };\n  id?: string;\n}\n\n/**\n * `variant=\"toggle\"` (0.31.0, docs/settings-harmonization.md §2.8): the three choices as\n * one segmented control instead of a select — system, light and dark side by side, the\n * choice visible without opening anything, in every app (keksdose offered light and dark\n * only; its store already knew \"system\"). A {@link ToggleGroup}'s props pass through —\n * `labelPlacement`, `disabledReason`, `commit`, `size`, `overflow` — minus the options\n * and the value, which this owns.\n *\n * The options wrap rather than truncate (`overflow=\"wrap\"`), as in its two siblings\n * {@link TextSizeSetting} and {@link ContrastSetting} (0.32.1, Kurvenschmiede's 0.32\n * report: \"Syst… Li… D…\" in a card at Extra large on a 360 px phone).\n *\n * Bind it to the PREFERENCE (`\"system\"` included), never to the resolved mode: on a\n * system-dark device a control bound to the mode shows \"dark\" and cannot say \"follow the\n * system\" (keksdose's control, §8).\n */\nexport interface ThemeSettingToggleProps\n  extends Omit<ToggleGroupBaseProps<ThemePreference>, \"options\" | \"label\"> {\n  variant: \"toggle\";\n  value: ThemePreference;\n  onChange: (value: ThemePreference) => void;\n  /**\n   * Names the group: the field's label, or the label above it (`labelPlacement`). Leave\n   * it out inside a card already titled \"Theme\" and name the group with `aria-label` or\n   * `aria-labelledby` instead, so the card does not say \"Theme\" twice.\n   */\n  label?: ReactNode;\n  /** Translated option labels. */\n  optionLabels: { system: string; light: string; dark: string };\n  id?: string;\n}\n\n/**\n * What {@link ThemeSetting} takes: the select ({@link ThemeSettingSelectProps}, the\n * default) or the segmented control ({@link ThemeSettingToggleProps}, `variant=\"toggle\"`)\n * — the union, as {@link ProfileSettingProps} is (API-9).\n */\nexport type ThemeSettingProps = ThemeSettingSelectProps | ThemeSettingToggleProps;\n\nexport function ThemeSetting(props: ThemeSettingProps) {\n  if (props.variant === \"toggle\") {\n    const { variant: _variant, value, onChange, label, optionLabels, overflow = \"wrap\", ...rest } = props;\n    return (\n      <ToggleGroup<ThemePreference>\n        {...rest}\n        overflow={overflow}\n        label={label}\n        value={value}\n        onChange={onChange}\n        options={[\n          { value: \"system\", label: optionLabels.system },\n          { value: \"light\", label: optionLabels.light },\n          { value: \"dark\", label: optionLabels.dark },\n        ]}\n      />\n    );\n  }\n  const { variant: _variant, value, onChange, label, optionLabels, id, ...rest } = props;\n  return (\n    <Select\n      {...rest}\n      id={id}\n      label={label}\n      value={value}\n      onChange={(e) => onChange(e.target.value as ThemePreference)}\n    >\n      <option value=\"system\">{optionLabels.system}</option>\n      <option value=\"light\">{optionLabels.light}</option>\n      <option value=\"dark\">{optionLabels.dark}</option>\n    </Select>\n  );\n}\n\n/** See {@link ThemeSettingSelectProps}: a `Select`'s props with the value and the change\n *  handler re-typed to the language CODE the caller stores. */\nexport interface LanguageSettingProps\n  extends Omit<SelectProps, \"value\" | \"onChange\" | \"children\" | \"multiple\"> {\n  /** The reader's language: one of the rows' codes — or any tag, shown as the row it\n   *  resolves to ({@link LanguageSelect}'s rule). */\n  value: string;\n  onChange: (code: string) => void;\n  label: ReactNode;\n  /**\n   * The languages to offer, in order, and each one's text: {@link languageOptions}' rows\n   * as they come (the registry's names), or the app's own words for a code — keksdose's\n   * \"Deutsch (Schweiz)\". The text is the language's name in itself, as on every\n   * switcher, and each option carries that language's `lang`. A code the kit's registry\n   * does not know is not listed: the registry is where its `lang` comes from.\n   */\n  options: { code: string; label: string }[];\n  id?: string;\n}\n\n/**\n * The settings row for the reader's own language: a {@link LanguageSelect} over the rows\n * the app hands in (0.34, refactor audit 2026-10, API-7). It was a bare `Select` over the\n * same rows, so the three apps' language pickers lacked what LanguageSelect gives every\n * option — its `lang`, by which a screen reader says \"Français\" in French — and showed a\n * stored `de-AT` as nothing in particular rather than as the one German.\n */\nexport function LanguageSetting({ options, ...rest }: LanguageSettingProps) {\n  const text = new Map(options.map((option) => [option.code, option.label]));\n  return (\n    <LanguageSelect\n      {...rest}\n      codes={options.map((option) => option.code as KitLanguageCode)}\n      optionLabel={(language) => text.get(language.code) ?? language.nativeName}\n      optionLang=\"own\"\n    />\n  );\n}\n\n/**\n * What {@link TextSizeSetting} and {@link ContrastSetting} take: a {@link ToggleGroup}'s\n * props — `labelPlacement`, `disabledReason`, `commit`, `size`, `overflow` — minus the\n * options and the value, which they own, as {@link ThemeSettingToggleProps} does.\n */\ntype AppearanceToggleProps<T extends string> = Omit<ToggleGroupBaseProps<T>, \"options\" | \"label\"> & {\n  value: T;\n  onChange: (value: T) => void;\n  /**\n   * The field's visible label. Leave it out inside a row already titled with the\n   * setting's name: the group is then named by `aria-label` / `aria-labelledby` if\n   * given, else by the kit's own word (\"Text size\", \"Contrast\").\n   */\n  label?: ReactNode;\n  /** The `appearance` namespace, for this instance. */\n  labels?: LabelOverride<AppearanceLabels>;\n};\n\nexport type TextSizeSettingProps = AppearanceToggleProps<TextSize>;\n\n/**\n * The text size (0.32, docs/text-size-harmonization.md §6): Normal, Large, Extra large as\n * one segmented control, in the core `appearance` group after the theme. Bind it to the\n * size IN FORCE — `useAccountAppearance().textSize` — and hand a pick to its\n * `pickTextSize`, which stores the device's choice and, signed in, the account's.\n *\n * The options wrap rather than truncate (`overflow=\"wrap\"`): at Extra large on a 360 px\n * phone the group has 240 px, and \"Extra large\" cut to \"Extra l…\" would be the one\n * setting that cannot read its own value.\n */\nexport function TextSizeSetting({ value, onChange, label, labels: labelsProp, overflow = \"wrap\", ...rest }: TextSizeSettingProps) {\n  const labels = useAppearanceLabels(labelsProp);\n  const named = label !== undefined && label !== null && label !== false;\n  return (\n    <ToggleGroup<TextSize>\n      {...rest}\n      aria-label={named || rest[\"aria-labelledby\"] ? rest[\"aria-label\"] : (rest[\"aria-label\"] ?? labels.textSize)}\n      label={label}\n      overflow={overflow}\n      value={value}\n      onChange={onChange}\n      options={TEXT_SIZES.map((size) => ({ value: size, label: labels.textSizes[size] }))}\n    />\n  );\n}\n\nexport type ContrastSettingProps = AppearanceToggleProps<ContrastMode>;\n\n/**\n * More contrast (0.32, §5, §6): System, Standard, More as one segmented control, beside\n * the text size. Bind it to the stored MODE, \"system\" included — never to whether more\n * contrast is on at the moment, or a device that asks for more contrast would show\n * \"More\" and could not say \"follow the device\" (the theme's lesson, §8 of the settings\n * contract). `useAccountAppearance().contrast` is that mode.\n */\nexport function ContrastSetting({ value, onChange, label, labels: labelsProp, overflow = \"wrap\", ...rest }: ContrastSettingProps) {\n  const labels = useAppearanceLabels(labelsProp);\n  const named = label !== undefined && label !== null && label !== false;\n  return (\n    <ToggleGroup<ContrastMode>\n      {...rest}\n      aria-label={named || rest[\"aria-labelledby\"] ? rest[\"aria-label\"] : (rest[\"aria-label\"] ?? labels.contrast)}\n      label={label}\n      overflow={overflow}\n      value={value}\n      onChange={onChange}\n      options={CONTRAST_MODES.map((mode) => ({ value: mode, label: labels.contrastModes[mode] }))}\n    />\n  );\n}\n"],"mappings":";AA2FM,cAgBF,YAhBE;AA1FN,SAAS,cAAc;AAEvB,SAAS,mBAAmB;AAG5B,SAAS,kBAAkB;AAE3B,SAAS,sBAAsB;AAE/B,SAAS,2BAA2B;AAGpC,SAAS,sBAAsB;AA0ExB,SAAS,aAAa,OAA0B;AACrD,MAAI,MAAM,YAAY,UAAU;AAC9B,UAAM,EAAE,SAASA,WAAU,OAAAC,QAAO,UAAAC,WAAU,OAAAC,QAAO,cAAAC,eAAc,WAAW,QAAQ,GAAGC,MAAK,IAAI;AAChG,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAGA;AAAA,QACJ;AAAA,QACA,OAAOF;AAAA,QACP,OAAOF;AAAA,QACP,UAAUC;AAAA,QACV,SAAS;AAAA,UACP,EAAE,OAAO,UAAU,OAAOE,cAAa,OAAO;AAAA,UAC9C,EAAE,OAAO,SAAS,OAAOA,cAAa,MAAM;AAAA,UAC5C,EAAE,OAAO,QAAQ,OAAOA,cAAa,KAAK;AAAA,QAC5C;AAAA;AAAA,IACF;AAAA,EAEJ;AACA,QAAM,EAAE,SAAS,UAAU,OAAO,UAAU,OAAO,cAAc,IAAI,GAAG,KAAK,IAAI;AACjF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAwB;AAAA,MAE3D;AAAA,4BAAC,YAAO,OAAM,UAAU,uBAAa,QAAO;AAAA,QAC5C,oBAAC,YAAO,OAAM,SAAS,uBAAa,OAAM;AAAA,QAC1C,oBAAC,YAAO,OAAM,QAAQ,uBAAa,MAAK;AAAA;AAAA;AAAA,EAC1C;AAEJ;AA6BO,SAAS,gBAAgB,EAAE,SAAS,GAAG,KAAK,GAAyB;AAC1E,QAAM,OAAO,IAAI,IAAI,QAAQ,IAAI,CAAC,WAAW,CAAC,OAAO,MAAM,OAAO,KAAK,CAAC,CAAC;AACzE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO,QAAQ,IAAI,CAAC,WAAW,OAAO,IAAuB;AAAA,MAC7D,aAAa,CAAC,aAAa,KAAK,IAAI,SAAS,IAAI,KAAK,SAAS;AAAA,MAC/D,YAAW;AAAA;AAAA,EACb;AAEJ;AAgCO,SAAS,gBAAgB,EAAE,OAAO,UAAU,OAAO,QAAQ,YAAY,WAAW,QAAQ,GAAG,KAAK,GAAyB;AAChI,QAAM,SAAS,oBAAoB,UAAU;AAC7C,QAAM,QAAQ,UAAU,UAAa,UAAU,QAAQ,UAAU;AACjE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAY,SAAS,KAAK,iBAAiB,IAAI,KAAK,YAAY,IAAK,KAAK,YAAY,KAAK,OAAO;AAAA,MAClG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,WAAW,IAAI,CAAC,UAAU,EAAE,OAAO,MAAM,OAAO,OAAO,UAAU,IAAI,EAAE,EAAE;AAAA;AAAA,EACpF;AAEJ;AAWO,SAAS,gBAAgB,EAAE,OAAO,UAAU,OAAO,QAAQ,YAAY,WAAW,QAAQ,GAAG,KAAK,GAAyB;AAChI,QAAM,SAAS,oBAAoB,UAAU;AAC7C,QAAM,QAAQ,UAAU,UAAa,UAAU,QAAQ,UAAU;AACjE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAY,SAAS,KAAK,iBAAiB,IAAI,KAAK,YAAY,IAAK,KAAK,YAAY,KAAK,OAAO;AAAA,MAClG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,eAAe,IAAI,CAAC,UAAU,EAAE,OAAO,MAAM,OAAO,OAAO,cAAc,IAAI,EAAE,EAAE;AAAA;AAAA,EAC5F;AAEJ;","names":["_variant","value","onChange","label","optionLabels","rest"]}
+{"version":3,"sources":["../../src/components/settings-fields.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Select } from \"./select\";\nimport type { SelectProps } from \"./select\";\nimport { ToggleGroup } from \"./toggle-group\";\nimport type { ToggleGroupBaseProps } from \"./toggle-group\";\nimport type { ThemePreference } from \"../theme/theme-store\";\nimport { TEXT_SIZES } from \"../theme/text-size\";\nimport type { TextSize } from \"../theme/text-size\";\nimport { CONTRAST_MODES } from \"../theme/contrast\";\nimport type { ContrastMode } from \"../theme/contrast\";\nimport { useAppearanceLabels } from \"./appearance-labels\";\nimport type { AppearanceLabels } from \"./appearance-labels\";\nimport type { LabelOverride } from \"../i18n/kit-labels\";\nimport { LanguageSelect } from \"./language-select\";\nimport type { KitLanguageCode } from \"../i18n/languages\";\n\n/**\n * App-agnostic settings-field components (feedback #333): the language + theme\n * controls that every app's settings page needs — and, since 0.32, the text size and\n * the contrast (docs/text-size-harmonization.md §6), whose words are the kit's own\n * `appearance` namespace — so they live in @hb/ui and the app just supplies the\n * current value, a change handler and translated labels.\n * The app owns WHERE these render (its own settings page) and any app-specific\n * fields around them.\n */\n\n/**\n * Everything a {@link Select} takes, minus the two this component owns: the value is a\n * {@link ThemePreference} rather than a string, and `onChange` hands over the preference\n * itself because no caller of this wants the event. The rest — `disabled`, `required`,\n * `invalid`, `error`, a `data-tour` anchor — passes straight through, which is what makes\n * this a settings FIELD rather than a fixed widget.\n *\n * The `Select` half of {@link ThemeSettingProps}; until 0.34 it carried that name, which\n * left the toggle out of the type the component is documented by (API-9).\n */\nexport interface ThemeSettingSelectProps\n  extends Omit<SelectProps, \"value\" | \"onChange\" | \"children\"> {\n  /** The `Select` (default). See {@link ThemeSettingToggleProps} for `\"toggle\"`. */\n  variant?: \"select\";\n  value: ThemePreference;\n  onChange: (value: ThemePreference) => void;\n  label: ReactNode;\n  /** Translated option labels. */\n  optionLabels: { system: string; light: string; dark: string };\n  id?: string;\n}\n\n/**\n * `variant=\"toggle\"` (0.31.0, docs/settings-harmonization.md §2.8): the three choices as\n * one segmented control instead of a select — system, light and dark side by side, the\n * choice visible without opening anything, in every app (keksdose offered light and dark\n * only; its store already knew \"system\"). A {@link ToggleGroup}'s props pass through —\n * `labelPlacement`, `disabledReason`, `commit`, `size`, `overflow` — minus the options\n * and the value, which this owns. `ref` too: the group, whose `focus()` lands on the\n * checked option (pinned in round 0.35 R4; the select variant's `ref` is the `<select>`).\n *\n * The options wrap rather than truncate (`overflow=\"wrap\"`), as in its two siblings\n * {@link TextSizeSetting} and {@link ContrastSetting} (0.32.1, Kurvenschmiede's 0.32\n * report: \"Syst… Li… D…\" in a card at Extra large on a 360 px phone).\n *\n * Bind it to the PREFERENCE (`\"system\"` included), never to the resolved mode: on a\n * system-dark device a control bound to the mode shows \"dark\" and cannot say \"follow the\n * system\" (keksdose's control, §8).\n */\nexport interface ThemeSettingToggleProps\n  extends Omit<ToggleGroupBaseProps<ThemePreference>, \"options\" | \"label\"> {\n  variant: \"toggle\";\n  value: ThemePreference;\n  onChange: (value: ThemePreference) => void;\n  /**\n   * Names the group: the field's label, or the label above it (`labelPlacement`). Leave\n   * it out inside a card already titled \"Theme\" and name the group with `aria-label` or\n   * `aria-labelledby` instead, so the card does not say \"Theme\" twice.\n   */\n  label?: ReactNode;\n  /** Translated option labels. */\n  optionLabels: { system: string; light: string; dark: string };\n  id?: string;\n}\n\n/**\n * What {@link ThemeSetting} takes: the select ({@link ThemeSettingSelectProps}, the\n * default) or the segmented control ({@link ThemeSettingToggleProps}, `variant=\"toggle\"`)\n * — the union, as {@link ProfileSettingProps} is (API-9).\n */\nexport type ThemeSettingProps = ThemeSettingSelectProps | ThemeSettingToggleProps;\n\nexport function ThemeSetting(props: ThemeSettingProps) {\n  if (props.variant === \"toggle\") {\n    const { variant: _variant, value, onChange, label, optionLabels, overflow = \"wrap\", ...rest } = props;\n    return (\n      <ToggleGroup<ThemePreference>\n        {...rest}\n        overflow={overflow}\n        label={label}\n        value={value}\n        onChange={onChange}\n        options={[\n          { value: \"system\", label: optionLabels.system },\n          { value: \"light\", label: optionLabels.light },\n          { value: \"dark\", label: optionLabels.dark },\n        ]}\n      />\n    );\n  }\n  const { variant: _variant, value, onChange, label, optionLabels, id, ...rest } = props;\n  return (\n    <Select\n      {...rest}\n      id={id}\n      label={label}\n      value={value}\n      onChange={(e) => onChange(e.target.value as ThemePreference)}\n    >\n      <option value=\"system\">{optionLabels.system}</option>\n      <option value=\"light\">{optionLabels.light}</option>\n      <option value=\"dark\">{optionLabels.dark}</option>\n    </Select>\n  );\n}\n\n/** See {@link ThemeSettingSelectProps}: a `Select`'s props with the value and the change\n *  handler re-typed to the language CODE the caller stores. */\nexport interface LanguageSettingProps\n  extends Omit<SelectProps, \"value\" | \"onChange\" | \"children\" | \"multiple\"> {\n  /** The reader's language: one of the rows' codes — or any tag, shown as the row it\n   *  resolves to ({@link LanguageSelect}'s rule). */\n  value: string;\n  onChange: (code: string) => void;\n  label: ReactNode;\n  /**\n   * The languages to offer, in order, and each one's text: {@link languageOptions}' rows\n   * as they come (the registry's names), or the app's own words for a code — keksdose's\n   * \"Deutsch (Schweiz)\". The text is the language's name in itself, as on every\n   * switcher, and each option carries that language's `lang`. A code the kit's registry\n   * does not know is not listed: the registry is where its `lang` comes from.\n   */\n  options: { code: string; label: string }[];\n  id?: string;\n}\n\n/**\n * The settings row for the reader's own language: a {@link LanguageSelect} over the rows\n * the app hands in (0.34, refactor audit 2026-10, API-7). It was a bare `Select` over the\n * same rows, so the three apps' language pickers lacked what LanguageSelect gives every\n * option — its `lang`, by which a screen reader says \"Français\" in French — and showed a\n * stored `de-AT` as nothing in particular rather than as the one German.\n */\nexport function LanguageSetting({ options, ...rest }: LanguageSettingProps) {\n  const text = new Map(options.map((option) => [option.code, option.label]));\n  return (\n    <LanguageSelect\n      {...rest}\n      codes={options.map((option) => option.code as KitLanguageCode)}\n      optionLabel={(language) => text.get(language.code) ?? language.nativeName}\n      optionLang=\"own\"\n    />\n  );\n}\n\n/**\n * What {@link TextSizeSetting} and {@link ContrastSetting} take: a {@link ToggleGroup}'s\n * props — `labelPlacement`, `disabledReason`, `commit`, `size`, `overflow` — minus the\n * options and the value, which they own, as {@link ThemeSettingToggleProps} does. `ref`\n * is the group's, as there (round 0.35 R4).\n */\ntype AppearanceToggleProps<T extends string> = Omit<ToggleGroupBaseProps<T>, \"options\" | \"label\"> & {\n  value: T;\n  onChange: (value: T) => void;\n  /**\n   * The field's visible label. Leave it out inside a row already titled with the\n   * setting's name: the group is then named by `aria-label` / `aria-labelledby` if\n   * given, else by the kit's own word (\"Text size\", \"Contrast\").\n   */\n  label?: ReactNode;\n  /** The `appearance` namespace, for this instance. */\n  labels?: LabelOverride<AppearanceLabels>;\n};\n\nexport type TextSizeSettingProps = AppearanceToggleProps<TextSize>;\n\n/**\n * The text size (0.32, docs/text-size-harmonization.md §6): Normal, Large, Extra large as\n * one segmented control, in the core `appearance` group after the theme. Bind it to the\n * size IN FORCE — `useAccountAppearance().textSize` — and hand a pick to its\n * `pickTextSize`, which stores the device's choice and, signed in, the account's.\n *\n * The options wrap rather than truncate (`overflow=\"wrap\"`): at Extra large on a 360 px\n * phone the group has 240 px, and \"Extra large\" cut to \"Extra l…\" would be the one\n * setting that cannot read its own value.\n */\nexport function TextSizeSetting({ value, onChange, label, labels: labelsProp, overflow = \"wrap\", ...rest }: TextSizeSettingProps) {\n  const labels = useAppearanceLabels(labelsProp);\n  const named = label !== undefined && label !== null && label !== false;\n  return (\n    <ToggleGroup<TextSize>\n      {...rest}\n      aria-label={named || rest[\"aria-labelledby\"] ? rest[\"aria-label\"] : (rest[\"aria-label\"] ?? labels.textSize)}\n      label={label}\n      overflow={overflow}\n      value={value}\n      onChange={onChange}\n      options={TEXT_SIZES.map((size) => ({ value: size, label: labels.textSizes[size] }))}\n    />\n  );\n}\n\nexport type ContrastSettingProps = AppearanceToggleProps<ContrastMode>;\n\n/**\n * More contrast (0.32, §5, §6): System, Standard, More as one segmented control, beside\n * the text size. Bind it to the stored MODE, \"system\" included — never to whether more\n * contrast is on at the moment, or a device that asks for more contrast would show\n * \"More\" and could not say \"follow the device\" (the theme's lesson, §8 of the settings\n * contract). `useAccountAppearance().contrast` is that mode.\n */\nexport function ContrastSetting({ value, onChange, label, labels: labelsProp, overflow = \"wrap\", ...rest }: ContrastSettingProps) {\n  const labels = useAppearanceLabels(labelsProp);\n  const named = label !== undefined && label !== null && label !== false;\n  return (\n    <ToggleGroup<ContrastMode>\n      {...rest}\n      aria-label={named || rest[\"aria-labelledby\"] ? rest[\"aria-label\"] : (rest[\"aria-label\"] ?? labels.contrast)}\n      label={label}\n      overflow={overflow}\n      value={value}\n      onChange={onChange}\n      options={CONTRAST_MODES.map((mode) => ({ value: mode, label: labels.contrastModes[mode] }))}\n    />\n  );\n}\n"],"mappings":";AA4FM,cAgBF,YAhBE;AA3FN,SAAS,cAAc;AAEvB,SAAS,mBAAmB;AAG5B,SAAS,kBAAkB;AAE3B,SAAS,sBAAsB;AAE/B,SAAS,2BAA2B;AAGpC,SAAS,sBAAsB;AA2ExB,SAAS,aAAa,OAA0B;AACrD,MAAI,MAAM,YAAY,UAAU;AAC9B,UAAM,EAAE,SAASA,WAAU,OAAAC,QAAO,UAAAC,WAAU,OAAAC,QAAO,cAAAC,eAAc,WAAW,QAAQ,GAAGC,MAAK,IAAI;AAChG,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAGA;AAAA,QACJ;AAAA,QACA,OAAOF;AAAA,QACP,OAAOF;AAAA,QACP,UAAUC;AAAA,QACV,SAAS;AAAA,UACP,EAAE,OAAO,UAAU,OAAOE,cAAa,OAAO;AAAA,UAC9C,EAAE,OAAO,SAAS,OAAOA,cAAa,MAAM;AAAA,UAC5C,EAAE,OAAO,QAAQ,OAAOA,cAAa,KAAK;AAAA,QAC5C;AAAA;AAAA,IACF;AAAA,EAEJ;AACA,QAAM,EAAE,SAAS,UAAU,OAAO,UAAU,OAAO,cAAc,IAAI,GAAG,KAAK,IAAI;AACjF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAwB;AAAA,MAE3D;AAAA,4BAAC,YAAO,OAAM,UAAU,uBAAa,QAAO;AAAA,QAC5C,oBAAC,YAAO,OAAM,SAAS,uBAAa,OAAM;AAAA,QAC1C,oBAAC,YAAO,OAAM,QAAQ,uBAAa,MAAK;AAAA;AAAA;AAAA,EAC1C;AAEJ;AA6BO,SAAS,gBAAgB,EAAE,SAAS,GAAG,KAAK,GAAyB;AAC1E,QAAM,OAAO,IAAI,IAAI,QAAQ,IAAI,CAAC,WAAW,CAAC,OAAO,MAAM,OAAO,KAAK,CAAC,CAAC;AACzE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO,QAAQ,IAAI,CAAC,WAAW,OAAO,IAAuB;AAAA,MAC7D,aAAa,CAAC,aAAa,KAAK,IAAI,SAAS,IAAI,KAAK,SAAS;AAAA,MAC/D,YAAW;AAAA;AAAA,EACb;AAEJ;AAiCO,SAAS,gBAAgB,EAAE,OAAO,UAAU,OAAO,QAAQ,YAAY,WAAW,QAAQ,GAAG,KAAK,GAAyB;AAChI,QAAM,SAAS,oBAAoB,UAAU;AAC7C,QAAM,QAAQ,UAAU,UAAa,UAAU,QAAQ,UAAU;AACjE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAY,SAAS,KAAK,iBAAiB,IAAI,KAAK,YAAY,IAAK,KAAK,YAAY,KAAK,OAAO;AAAA,MAClG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,WAAW,IAAI,CAAC,UAAU,EAAE,OAAO,MAAM,OAAO,OAAO,UAAU,IAAI,EAAE,EAAE;AAAA;AAAA,EACpF;AAEJ;AAWO,SAAS,gBAAgB,EAAE,OAAO,UAAU,OAAO,QAAQ,YAAY,WAAW,QAAQ,GAAG,KAAK,GAAyB;AAChI,QAAM,SAAS,oBAAoB,UAAU;AAC7C,QAAM,QAAQ,UAAU,UAAa,UAAU,QAAQ,UAAU;AACjE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAY,SAAS,KAAK,iBAAiB,IAAI,KAAK,YAAY,IAAK,KAAK,YAAY,KAAK,OAAO;AAAA,MAClG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,eAAe,IAAI,CAAC,UAAU,EAAE,OAAO,MAAM,OAAO,OAAO,cAAc,IAAI,EAAE,EAAE;AAAA;AAAA,EAC5F;AAEJ;","names":["_variant","value","onChange","label","optionLabels","rest"]}

package/dist/components/stat-tile.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+import type { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
 import { type LabelOverride } from "../i18n/kit-labels.js";
 import { DEFAULT_STAT_TILE_LABELS } from "./stat-tile-labels.js";
 /**
@@ -66,7 +66,13 @@ export interface StatTileLinkProps {
     "aria-describedby": string;
     children: ReactNode;
 }
-export interface StatTileProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "onClick"> {
+/**
+ * A `div`'s props, `ref` included since 0.35 (round 0.35 R4, the follow-up to API-2): they
+ * ride on to the {@link Card} that is the tile, so the ref is the tile's own `<div>` — the
+ * one to scroll into view or measure. `ComponentPropsWithoutRef` only kept it out of the
+ * type; at runtime `{...rest}` already carried it there.
+ */
+export interface StatTileProps extends Omit<ComponentPropsWithRef<"div">, "children" | "onClick"> {
     /** What is measured. Also the tile's accessible name when it is a link/button. */
     label: ReactNode;
     /**

package/dist/components/stat-tile.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/stat-tile.tsx"],"sourcesContent":["import { createContext, isValidElement, useContext, useId, useLayoutEffect, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentPropsWithRef, CSSProperties, ReactElement, ReactNode } from \"react\";\nimport { ArrowDown, ArrowUp, Minus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels, useKitLink, useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer, RenderedKitLink } from \"./text-link\";\nimport { Card } from \"./card\";\nimport { FieldHint } from \"./field-parts\";\nimport { useInlineFacts, useLargeText } from \"../hooks/use-large-text\";\nimport { Sparkline } from \"./sparkline\";\nimport { Tooltip } from \"./tooltip\";\n// The kit's one placeholder look, so a loading tile and the Skeleton list beside it\n// shimmer as one surface — and both stop under `prefers-reduced-motion`, which this\n// tile's private copy of the string did not.\nimport { SKELETON_CLASS } from \"./skeleton\";\nimport { DEFAULT_STAT_TILE_LABELS } from \"./stat-tile-labels\";\n\n/**\n * The words a stat tile speaks. The delta's arrow is an icon, and an icon is not a\n * sentence: a screen reader gets the direction (and, under `goodDirection`, the\n * verdict) as words, and a sighted reader who cannot tell the two delta colours apart\n * still has the arrow — neither judgement rides on colour alone.\n */\nexport interface StatTileLabels {\n  /** The delta, rising. `amount` is already formatted and unsigned. */\n  increase: (amount: string) => string;\n  decrease: (amount: string) => string;\n  unchanged: string;\n  /** Wraps the direction sentence when `goodDirection` says the change is good. */\n  better: (change: string) => string;\n  worse: (change: string) => string;\n  /** Spoken in place of a missing value (the tile shows a dash). */\n  noValue: string;\n  /** Spoken while `loading`. */\n  loading: string;\n}\n\n// Defined in ./stat-tile-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_STAT_TILE_LABELS };\n\n/**\n * What colours a figure. Token-backed like everything else in the kit.\n *\n *  - `income` / `expense` / `net` — the money trio (teal / amber / violet, CVD-safe).\n *  - `signed` — a money figure read by its own sign: above zero `income`, below zero\n *    `expense`, exactly zero neutral (a zero balance is neither news). Needs a NUMBER\n *    value; a pre-formatted string cannot be read and stays neutral.\n *  - `success` / `warning` / `danger` / `info` — a threshold verdict (\"phase margin\n *    below 30°\"). Say it in the hint or description as well; colour alone is not one.\n */\nexport type StatTileTone =\n  | \"neutral\"\n  | \"brand\"\n  | \"income\"\n  | \"expense\"\n  | \"net\"\n  | \"signed\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\";\n\nconst TONE_CLASS: Record<Exclude<StatTileTone, \"signed\">, string> = {\n  neutral: \"text-primary\",\n  brand: \"text-brand\",\n  income: \"text-money-income\",\n  expense: \"text-money-expense\",\n  net: \"text-money-net\",\n  success: \"text-success\",\n  warning: \"text-warning\",\n  danger: \"text-danger\",\n  info: \"text-info\",\n};\n\nfunction toneClass(tone: StatTileTone, value: unknown): string {\n  if (tone !== \"signed\") return TONE_CLASS[tone];\n  if (typeof value !== \"number\" || value === 0) return TONE_CLASS.neutral;\n  return value < 0 ? TONE_CLASS.expense : TONE_CLASS.income;\n}\n\n/** A change since the previous period. A bare number is shorthand for `{ value }`. */\nexport interface StatTileDelta {\n  /** Signed: above zero is \"up\". */\n  value: number;\n  /** `\"value\"` (default) formats it like the headline — same currency, same\n   *  notation. `\"percent\"` reads it as a RATIO: `0.12` is shown as 12 %. */\n  unit?: \"value\" | \"percent\";\n  /** What it is measured against, shown after it: \"vs last month\". */\n  label?: ReactNode;\n}\n\n/** A smaller figure under the headline — a prior period, a projection, a split. */\nexport interface StatTileSubValue {\n  label: ReactNode;\n  /** A number is formatted like the headline; anything else is rendered as given. */\n  value: ReactNode;\n  /** Defaults to the tile's own `tone`, read per figure (so a `signed` tile shows a\n   *  teal September above an amber August). Sub-values are always the muted weight\n   *  of their tone: they are history, and must not outshout the figure above them.\n   *\n   *  `\"none\"` leaves the figure untinted — the row's own muted text, like its label —\n   *  even on a toned tile: keksdose's report KpiCard (reports/charts/kpi-card.tsx),\n   *  whose `negative` convention tints only a figure below zero and leaves the rest\n   *  plain. (`\"neutral\"` is not that: it is the headline's full text colour, at the\n   *  sub-value's 75 %.) */\n  tone?: StatTileTone | \"none\";\n}\n\n/** What {@link StatTileProps.renderLink} is handed. Spread it onto your router's\n *  link: the class is what stretches the link over the whole tile. */\nexport interface StatTileLinkProps {\n  href: string;\n  className: string;\n  \"aria-describedby\": string;\n  children: ReactNode;\n}\n\nexport interface StatTileProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"onClick\"> {\n  /** What is measured. Also the tile's accessible name when it is a link/button. */\n  label: ReactNode;\n  /**\n   * The headline. A number is formatted with `Intl.NumberFormat` in the kit's locale\n   * (see `currency`, `compact`, `numberFormat`, `format`); a string or element is\n   * rendered as given. `null`/`undefined` shows a dash and says \"No data\".\n   */\n  value?: ReactNode;\n  /** ISO 4217 code — formats a number value (and a `\"value\"` delta, and numeric\n   *  sub-values) as money. */\n  currency?: string;\n  /** Compact notation: 12 400 → \"12K\". */\n  compact?: boolean;\n  /** Any further `Intl.NumberFormat` options, merged over the two above. */\n  numberFormat?: Intl.NumberFormatOptions;\n  /** Formats every NUMBER the tile shows, replacing the `Intl` default outright. */\n  format?: (value: number) => string;\n  locale?: string;\n  /** A short unit after the value that `Intl` has no name for: \"ms\", \"dB\", \"Hz\". */\n  unit?: ReactNode;\n  /** The period the headline belongs to, shown to its left (\"SEP\"). */\n  valueLabel?: ReactNode;\n  tone?: StatTileTone;\n  delta?: number | StatTileDelta;\n  /** Which way is good news. Unset, the delta is stated and not judged (users up and\n   *  cost up are the same arrow); set, it is coloured and its sentence says so. */\n  goodDirection?: \"up\" | \"down\";\n  /** The explanation behind a \"?\" beside the label (a {@link FieldHint}) — hidden\n   *  until asked for, so it is for what a reader MIGHT want to know (\"excludes\n   *  transfers between your own accounts\"). For a line everyone should read, use\n   *  {@link StatTileProps.description} instead.\n   *\n   *  0.32 (docs/text-size-harmonization.md §4 \"No fact only in a tooltip\"): at Large\n   *  and Extra large, and on a touch screen, the words are shown under the label\n   *  instead of behind the \"?\". */\n  hint?: string;\n  /**\n   * Keep the label to ONE line, cut with an ellipsis, and show the whole of it in a\n   * {@link Tooltip} on hover and focus — but only while it is actually cut, so a\n   * label that fits shows no bubble repeating itself. keksdose's admin MetricTile\n   * wall: twenty tiles whose German labels (\"Aktive Abonnements (30 Tage)\") wrapped\n   * onto two or three lines and pushed each tile's figure to a different height.\n   *\n   * The label element keeps the FULL text — the ellipsis is paint — so it is still\n   * the tile's accessible name (and the stretched link's, on a link tile) exactly as\n   * without this. Off by default: a wrapping label is what every existing tile does,\n   * and a tile standing alone has room to.\n   *\n   * This is the tooltip: pass the label as a plain STRING rather than wrapping it in\n   * your own `<Tooltip>` for the full text (keksdose's admin metrics-panel.tsx:134\n   * does, from before this prop). A wrapped label shows a bubble even when nothing is\n   * cut, and nests its trigger inside this one's.\n   *\n   * Ignored at Large and Extra large (0.32, §4): nothing truncates there, and the full\n   * label would otherwise be a fact only in a tooltip.\n   */\n  truncateLabel?: boolean;\n  /**\n   * The tile's name as plain text, for the places that need a string rather than a\n   * node — today the {@link StatTileProps.trend} sparkline's accessible name. Only\n   * needed when `label` is not a string AND its text cannot be read from it: a label\n   * element's text children are found on their own (a `<Tooltip label=\"…\">Spend\n   * </Tooltip>` label still names its sparkline \"Spend\"), an icon or a formatted\n   * message component's are not.\n   */\n  name?: string;\n  /** A visible line under the value: \"Last 12 months\", \"3 estates / 9 buildings\" —\n   *  always shown, so it is for what every reader needs. An explanation only some\n   *  will want belongs in {@link StatTileProps.hint}, the \"?\" beside the label. */\n  description?: ReactNode;\n  /**\n   * One figure that belongs WITH the headline rather than under it: keksdose's\n   * \"Projected €1,850\" under a to-date \"€420\" (KpiCard, feedback #51), which it\n   * currently smuggles into `description` with hand-set margins so the prior-month\n   * sub-values do not come between the two. It is drawn directly under the value\n   * (before the delta, the description and the sparkline) as a sub-value row, with\n   * only a hair of space above it.\n   *\n   * A slot of its own rather than a placement switch for `subValues`: the history\n   * rows (last month, last year) should stay at the bottom where they are, and moving\n   * the whole list up to bring one row with it would put them between the headline\n   * and its delta. Same shape as a sub-value, so the `tone` rules are the same.\n   * Withheld while `loading`, like the sub-values.\n   */\n  projection?: StatTileSubValue;\n  /**\n   * Smaller figures under the headline, label left and figure right.\n   *\n   * At Large and Extra large (0.32, §4 \"StatTile shows its one big number; the sparkline\n   * and sub-values move below\"): the tile leads with the headline and its delta, and the\n   * projection, these rows and the sparkline follow beneath the description, each row's\n   * label over its figure — a 2-up tile at 150 % is 120 px of text wide, and a label\n   * beside a figure there squeezed both.\n   */\n  subValues?: StatTileSubValue[];\n  /** Shorthand for a fluid {@link Sparkline} named after the tile and speaking in\n   *  the tile's number format. The name is the label's text; see\n   *  {@link StatTileProps.name} for a label that has none. */\n  trend?: ReadonlyArray<number | null | undefined>;\n  /** A custom sparkline (or any small graphic) in the same place. Wins over `trend`. */\n  sparkline?: ReactNode;\n  /** A decorative icon at the top end of the tile. */\n  icon?: ReactNode;\n  /** Anything below the rest — a progress bar, a link row. */\n  footer?: ReactNode;\n  /** Tag every figure `data-private`, so the host's demo-mode rule blurs it — the\n   *  same attribute `Tooltip redact` and the chart tooltip's value cell carry. */\n  sensitive?: boolean;\n  /** Skeleton in place of the value; delta, sub-values and trend are withheld. */\n  loading?: boolean;\n  /** `\"sm\"` for dense grids (a metrics wall); `\"md\"` the default KPI. */\n  size?: \"sm\" | \"md\";\n  /**\n   * The tile's frame. `\"card\"` (default) is the bordered, shadowed card on the page.\n   * `\"inset\"` is a tile INSIDE a card: {@link Card}'s `inset` — the raised\n   * `--bg-surface-2`, a small radius, no border or shadow, since the card round it\n   * already has them. `\"plain\"` drops the frame altogether — no fill and no padding —\n   * for figures set straight into a card's content (a summary row under a card title),\n   * where any box would be a box in a box. keksdose wrote both by hand over the card\n   * tile (`border-0 shadow-none bg-transparent p-0`) for its tiles inside a card.\n   */\n  variant?: \"card\" | \"inset\" | \"plain\";\n  /** Makes the tile a link. See {@link renderLink} for a router. */\n  href?: string;\n  /** Renders the link for `href` — pass your router's `<Link>` here, since a plain\n   *  `<a>` reloads a single-page app. Default: the `<UiKitProvider linkComponent>`\n   *  (for an in-app `href`), then `<a>`. */\n  renderLink?: (props: StatTileLinkProps) => ReactElement;\n  /** Makes the tile a button (ignored when `href` is given). */\n  onClick?: () => void;\n  labels?: LabelOverride<StatTileLabels>;\n}\n\n// One formatter per option set: a metrics wall is twenty of these.\nconst formatters = new Map<string, Intl.NumberFormat>();\nfunction numberFormatter(locale: string | undefined, options: Intl.NumberFormatOptions): Intl.NumberFormat {\n  const key = `${locale ?? \"\"}|${JSON.stringify(options)}`;\n  let f = formatters.get(key);\n  if (!f) {\n    f = new Intl.NumberFormat(locale, options);\n    formatters.set(key, f);\n  }\n  return f;\n}\n\n// The headline sizes are keyed on the TILE's width (it is a @container), not the\n// viewport: a grid beside a sidebar makes tiles narrowest exactly where a viewport\n// breakpoint would hand them the larger font. `sm` is keksdose's compact headline,\n// sized so a worst-case \"CHF 123,456.78\" still fits a 320px phone's 2-up tiles.\nconst VALUE_TEXT = {\n  md: \"text-xl @[13rem]:text-2xl\",\n  sm: \"text-xs @[8.5rem]:text-sm @[13rem]:text-base\",\n} as const;\nconst PADDING = { md: \"p-3 sm:p-4\", sm: \"px-2.5 py-2\" } as const;\n\n/**\n * The KPI card: a label, one number, and optionally how it moved, what it is made of\n * and which way it has been going.\n *\n * Replaces keksdose's `KpiCard` and admin `Tile`, lenkbank's metrics tiles and\n * kastlan's `KpiCard` — the same card four times, with four answers to the same\n * questions (how a currency is formatted, whether a delta is judged, what happens to\n * the figures in demo mode).\n *\n * Interactive tiles use a STRETCHED link: the label is the `<a>`/`<button>`, and its\n * `::after` covers the card. Making the card itself the link would nest the hint's\n * `<button>` inside it, which is invalid HTML and an unreachable control; this way\n * the hint sits above the overlay and stays its own tab stop. The link's name is the\n * label, and it is described by the value and the delta.\n */\nexport function StatTile({\n  label,\n  value,\n  currency,\n  compact = false,\n  numberFormat,\n  format,\n  locale,\n  unit,\n  valueLabel,\n  tone = \"neutral\",\n  delta,\n  goodDirection,\n  hint,\n  truncateLabel = false,\n  name,\n  description,\n  projection,\n  subValues,\n  trend,\n  sparkline,\n  icon,\n  footer,\n  sensitive = false,\n  loading = false,\n  size = \"md\",\n  variant = \"card\",\n  href,\n  renderLink,\n  onClick,\n  labels,\n  className,\n  ...rest\n}: StatTileProps) {\n  const text = useKitLabels(\"statTile\", DEFAULT_STAT_TILE_LABELS, labels);\n  // §4: at Large the one big number leads and the rest follows below it; the label\n  // never truncates; on touch or at Large the hint is words, not a \"?\".\n  const large = useLargeText();\n  const inlineHint = useInlineFacts() && !!hint;\n  if (large) truncateLabel = false;\n  // A loading StatTileGrid puts every tile in it into the loading state and says\n  // \"Loading…\" ONCE for all of them; the tile then keeps its own sentence to itself\n  // (see StatTileGrid's `loading`).\n  const gridLoading = useContext(StatTileGridLoadingContext);\n  loading = loading || gridLoading;\n  const kitLink = useKitLink();\n  const [labelEl, setLabelEl] = useState<HTMLElement | null>(null);\n  const labelCut = useIsTruncated(truncateLabel ? labelEl : null);\n  const kitLocale = useKitLocale(locale);\n  const id = useId();\n  const valueId = `${id}-value`;\n  const deltaId = `${id}-delta`;\n  const priv = sensitive ? \"\" : undefined;\n\n  const fmt =\n    format ??\n    ((n: number) =>\n      numberFormatter(kitLocale, {\n        ...(currency ? { style: \"currency\", currency } : null),\n        ...(compact ? { notation: \"compact\" } : null),\n        ...numberFormat,\n      }).format(n));\n  const show = (v: ReactNode) => (typeof v === \"number\" ? fmt(v) : v);\n\n  const d = typeof delta === \"number\" ? { value: delta } : delta;\n  const hasValue = value !== null && value !== undefined && value !== \"\";\n  const labelText = name ?? plainText(label);\n\n  // ── The label, which is also the link/button when the tile is interactive ──\n  const stretched = cn(\n    \"text-start uppercase tracking-wide\",\n    \"after:absolute after:inset-0 after:rounded-lg after:content-['']\",\n    // The kit's focus frame (0.32, §5), on the overlay — `FOCUS_RING`'s classes cannot\n    // carry the `after:`, so its width is spelt out.\n    \"focus-visible:outline-none focus-visible:after:ring-focus focus-visible:after:ring-inset focus-visible:after:ring-brand\",\n  );\n  const describedBy = d ? `${valueId} ${deltaId}` : valueId;\n  let labelNode: ReactNode = label;\n  if (href !== undefined) {\n    const linkProps: StatTileLinkProps = {\n      href,\n      className: stretched,\n      \"aria-describedby\": describedBy,\n      children: label,\n    };\n    const kit = pickLinkRenderer<StatTileLinkProps>(undefined, kitLink, href);\n    labelNode = renderLink ? (\n      renderLink(linkProps)\n    ) : kit ? (\n      <RenderedKitLink render={kit} props={linkProps} />\n    ) : (\n      <a href={href} className={stretched} aria-describedby={describedBy}>\n        {label}\n      </a>\n    );\n  } else if (onClick) {\n    labelNode = (\n      <button type=\"button\" onClick={onClick} aria-describedby={describedBy} className={stretched}>\n        {label}\n      </button>\n    );\n  }\n  const interactive = href !== undefined || onClick !== undefined;\n\n  // ── Delta ──\n  let deltaNode: ReactNode = null;\n  if (d && !loading && Number.isFinite(d.value)) {\n    const magnitude = Math.abs(d.value);\n    const amount =\n      d.unit === \"percent\"\n        ? numberFormatter(kitLocale, { style: \"percent\", maximumFractionDigits: 1 }).format(magnitude)\n        : fmt(magnitude);\n    const dir = d.value > 0 ? \"up\" : d.value < 0 ? \"down\" : \"flat\";\n    const Icon = dir === \"up\" ? ArrowUp : dir === \"down\" ? ArrowDown : Minus;\n    let spoken = dir === \"up\" ? text.increase(amount) : dir === \"down\" ? text.decrease(amount) : text.unchanged;\n    let deltaTone = \"text-muted\";\n    if (goodDirection && dir !== \"flat\") {\n      const good = dir === goodDirection;\n      spoken = good ? text.better(spoken) : text.worse(spoken);\n      deltaTone = good ? \"text-success\" : \"text-danger\";\n    }\n    deltaNode = (\n      // `relative`: the containing block for the sr-only sentence (see the\n      // sr-only-containment test for what an escaped one does to the page).\n      <div className=\"relative mt-1 flex flex-wrap items-center gap-x-1.5 text-xs tabular-nums\">\n        <span id={deltaId} data-private={priv} className={cn(\"inline-flex items-center gap-0.5 font-medium\", deltaTone)}>\n          <Icon className=\"size-3 shrink-0\" aria-hidden />\n          {/* The figure at zero too, like Delta (kastlan 48): \"0 %\" says the change was\n              measured; a bare dash reads like a missing value. */}\n          <span aria-hidden>{amount}</span>\n          <span className=\"sr-only\">{spoken}</span>\n        </span>\n        {d.label != null && <span className=\"text-muted\">{d.label}</span>}\n      </div>\n    );\n  }\n\n  // ── Headline ──\n  const valueClass = cn(\n    \"whitespace-nowrap font-semibold tabular-nums\",\n    VALUE_TEXT[size],\n    toneClass(tone, value),\n  );\n  const headline = loading ? (\n    <span id={valueId} className=\"relative block py-0.5\">\n      <span aria-hidden className={cn(SKELETON_CLASS, \"block h-6 w-24 max-w-full\")} />\n      {!gridLoading && <span className=\"sr-only\">{text.loading}</span>}\n    </span>\n  ) : hasValue ? (\n    <span id={valueId} data-private={priv} className={cn(valueClass, valueLabel != null && !large && \"ms-auto\")}>\n      {show(value)}\n      {unit != null && (\n        <span className=\"ms-1 text-[0.7em] font-medium text-muted\">{unit}</span>\n      )}\n    </span>\n  ) : (\n    <span id={valueId} className={cn(\"relative\", valueClass, \"text-muted\")}>\n      <span aria-hidden>—</span>\n      <span className=\"sr-only\">{text.noValue}</span>\n    </span>\n  );\n\n  const graphic =\n    loading ? null : sparkline ??\n      (trend && (\n        <Sparkline\n          data={trend}\n          fluid\n          height={size === \"sm\" ? 20 : 28}\n          label={labelText}\n          formatValue={fmt}\n          locale={kitLocale}\n          tone={tone === \"signed\" ? \"signed\" : tone === \"neutral\" ? \"chart\" : tone}\n          data-private={priv}\n        />\n      ));\n\n  return (\n    <Card\n      {...rest}\n      variant={variant === \"card\" ? \"default\" : \"inset\"}\n      data-variant={variant === \"card\" ? undefined : variant}\n      aria-busy={loading || undefined}\n      className={cn(\n        // @container: the headline sizes read the tile's width. relative: the stretched\n        // link's overlay. overflow-hidden: at pathological widths a figure clips inside\n        // the border instead of painting over the neighbouring tile.\n        \"@container relative flex min-w-0 flex-col overflow-hidden\",\n        // `plain` is the inset card with its fill and padding taken away — the figures\n        // align with the content edge of the card they sit in. (Not `p-0` over the\n        // padding: the padding's `sm:p-4` would still win from `sm` up.)\n        variant === \"plain\" ? \"rounded-none bg-transparent p-0\" : PADDING[size],\n        interactive && \"transition-colors hover:border-strong hover:bg-hover\",\n        className,\n      )}\n    >\n      <div className=\"flex items-start gap-2\">\n        <div className=\"flex min-w-0 flex-1 items-center gap-1 break-words text-xs uppercase tracking-wide text-muted\">\n          {truncateLabel && labelCut ? (\n            // Portalled: the tile is `overflow-hidden`, and a bubble inside it would be\n            // clipped by the very box whose edge cut the label.\n            <Tooltip label={label} side=\"top\" portal className=\"flex min-w-0\">\n              <span ref={setLabelEl} className=\"block min-w-0 truncate\">\n                {labelNode}\n              </span>\n            </Tooltip>\n          ) : (\n            <span ref={setLabelEl} className={cn(\"min-w-0\", truncateLabel && \"block truncate\")}>\n              {labelNode}\n            </span>\n          )}\n          {/* Above the stretched link's overlay, so it stays hoverable and focusable. */}\n          {hint && !inlineHint && <FieldHint label={hint} side=\"top\" className=\"relative z-10 shrink-0\" />}\n        </div>\n        {icon != null && (\n          <span aria-hidden className=\"shrink-0 text-muted [&_svg]:size-4\">\n            {icon}\n          </span>\n        )}\n      </div>\n\n      {inlineHint && (\n        // §4: the hint as words under the label — the same muted type as `description`,\n        // in the reading case of a sentence rather than the label's capitals.\n        <p data-slot=\"stat-tile-hint\" className=\"mt-0.5 text-xs text-muted\">\n          {hint}\n        </p>\n      )}\n\n      {valueLabel != null ? (\n        // Period-left / value-right, matching the sub-rows below it. flex-wrap lets a\n        // too-long amount drop to its own end-aligned line instead of overflowing. At\n        // Large the period goes over the figure, which then has the tile's width.\n        <div className={cn(\"mt-1 flex items-baseline gap-x-1.5\", large ? \"flex-col items-start\" : \"flex-wrap\")}>\n          <span className=\"shrink-0 text-xs uppercase tracking-wide text-muted\">{valueLabel}</span>\n          {headline}\n        </div>\n      ) : (\n        <div className=\"mt-1\">{headline}</div>\n      )}\n\n      {/* At Large the delta and description follow the figure at once, and the\n          projection moves down with the other figures (see `subValues`). */}\n      {!large && !loading && projection && (\n        <dl className=\"mt-0.5\">\n          <FigureRow figure={projection} tileTone={tone} show={show} priv={priv} />\n        </dl>\n      )}\n\n      {deltaNode}\n      {description != null && <div className=\"mt-1 text-xs text-muted\">{description}</div>}\n      {!large && graphic && <div className=\"mt-2\">{graphic}</div>}\n\n      {!loading && ((large && projection) || (subValues && subValues.length > 0)) && (\n        <dl data-slot=\"stat-tile-figures\" className={cn(\"mt-1.5\", large ? \"space-y-1.5\" : \"space-y-0.5\")}>\n          {large && projection && (\n            <FigureRow figure={projection} tileTone={tone} show={show} priv={priv} stacked />\n          )}\n          {subValues?.map((sv, i) => (\n            <FigureRow key={i} figure={sv} tileTone={tone} show={show} priv={priv} stacked={large} />\n          ))}\n        </dl>\n      )}\n\n      {large && graphic && (\n        <div data-slot=\"stat-tile-graphic\" className=\"mt-2\">\n          {graphic}\n        </div>\n      )}\n\n      {footer != null && <div className=\"mt-2\">{footer}</div>}\n    </Card>\n  );\n}\n\n/** One label/value row of a `<dl>`: a sub-value, or the projection. */\nfunction FigureRow({\n  figure,\n  tileTone,\n  show,\n  priv,\n  stacked = false,\n}: {\n  figure: StatTileSubValue;\n  tileTone: StatTileTone;\n  show: (v: ReactNode) => ReactNode;\n  priv: \"\" | undefined;\n  /** The label over the figure (Large, §4) instead of beside it. */\n  stacked?: boolean;\n}) {\n  const own = figure.tone ?? (tileTone === \"neutral\" ? undefined : tileTone);\n  const svTone = own === \"none\" ? undefined : own;\n  // The LABEL gives way, never the figure. This row used to wrap, so on a narrow tile a\n  // long label (\"AUG (SIGNED)\") dropped its amount onto a line of its own while the\n  // next row stayed on one — two layouts in one list, and a figure no longer beside\n  // the period it belongs to. Now the label breaks within itself and the amount stays\n  // on the label's first line, end-aligned like every other row.\n  return (\n    <div\n      className={cn(\n        \"flex text-xs tabular-nums text-muted\",\n        stacked ? \"flex-col items-start\" : \"items-baseline gap-x-2\",\n      )}\n    >\n      <dt className=\"min-w-0 uppercase tracking-wide [overflow-wrap:anywhere]\">{figure.label}</dt>\n      <dd\n        data-private={priv}\n        className={cn(\n          \"shrink-0 whitespace-nowrap\",\n          !stacked && \"ms-auto\",\n          svTone && [toneClass(svTone, figure.value), \"opacity-75\"],\n        )}\n      >\n        {show(figure.value)}\n      </dd>\n    </div>\n  );\n}\n\n/**\n * The text of a label node, for the sparkline's name: a string or number as is, an\n * element by its children, recursively. A `<Tooltip label=\"…\">Spend</Tooltip>` label\n * yields \"Spend\" — the text the reader sees, not the bubble's. `undefined` when there\n * is no text to find (an icon), so the sparkline falls back to its unnamed summary.\n */\nfunction plainText(node: ReactNode): string | undefined {\n  const walk = (n: ReactNode): string => {\n    if (typeof n === \"string\" || typeof n === \"number\") return String(n);\n    if (Array.isArray(n)) return n.map(walk).join(\"\");\n    if (isValidElement<{ children?: ReactNode }>(n)) return walk(n.props.children);\n    return \"\";\n  };\n  const text = walk(node).replace(/\\s+/g, \" \").trim();\n  return text === \"\" ? undefined : text;\n}\n\n/**\n * Whether `el`'s text is wider than its box — i.e. whether `truncate` is cutting it.\n * Re-measured whenever the box resizes (a grid reflowing, a translation loading), not\n * only on mount. Keyed on the ELEMENT (a callback ref), because wrapping the label in\n * its tooltip remounts it, and an observer on the old node would watch nothing.\n */\nfunction useIsTruncated(el: HTMLElement | null): boolean {\n  const [cut, setCut] = useState(false);\n  useLayoutEffect(() => {\n    // No reset while there is no node: between the unwrapped label unmounting and the\n    // wrapped one mounting there is none, and a reset there would unwrap it again.\n    if (!el) return;\n    const measure = () => setCut(el.scrollWidth > el.clientWidth);\n    measure();\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(measure);\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [el]);\n  return cut;\n}\n\nexport interface StatTileGridProps extends ComponentPropsWithRef<\"div\"> {\n  /** The narrowest a tile may get before the grid drops a column. The default fits\n   *  two tiles on a 320px phone. */\n  minTileWidth?: string;\n  /**\n   * Let a row that is not full stretch its tiles across the whole width. Default\n   * `true` (CSS `auto-fit`): one or two tiles fill the row, as they always have.\n   * `false` (`auto-fill`): the empty columns are kept, so every tile is the width of\n   * a column whatever the count — a lone \"Balance\" tile in a card stays tile-sized\n   * instead of becoming a banner the width of the card, and the tiles of a short row\n   * line up with the columns of a full one above it.\n   */\n  stretch?: boolean;\n  /**\n   * Every tile in the grid is loading: each shows its skeleton (as with its own\n   * `loading`), and the grid says \"Loading…\" ONCE, in a polite status region, instead\n   * of each tile carrying its own sr-only \"Loading…\" — a wall of eight tiles was read\n   * as eight \"Loading…\"s in a row. The grid is `aria-busy` meanwhile. A tile's own\n   * `loading` inside a grid that is not loading still speaks for itself.\n   */\n  loading?: boolean;\n  /** The grid's one sentence — `loading` from {@link StatTileLabels}. */\n  labels?: LabelOverride<Pick<StatTileLabels, \"loading\">>;\n}\n\n/** Set by a loading {@link StatTileGrid}; read by each tile in it. */\nconst StatTileGridLoadingContext = createContext(false);\n\n/**\n * The row of tiles every dashboard in the three apps lays out by hand, each with its\n * own breakpoint ladder (`grid-cols-2 md:grid-cols-4 min-[2400px]:grid-cols-8` …).\n * Those ladders read the VIEWPORT and so ignored the sidebar: 6-up tiles at 155px in\n * the band where the sidebar was open. This fits as many columns as `minTileWidth`\n * allows in the space the grid actually has, and needs no breakpoint at all.\n */\nexport function StatTileGrid({\n  minTileWidth = \"9rem\",\n  stretch = true,\n  loading = false,\n  labels,\n  className,\n  style,\n  children,\n  ...rest\n}: StatTileGridProps) {\n  const text = useKitLabels(\"statTile\", DEFAULT_STAT_TILE_LABELS, labels);\n  const columns: CSSProperties = {\n    gridTemplateColumns: `repeat(${stretch ? \"auto-fit\" : \"auto-fill\"}, minmax(min(100%, ${minTileWidth}), 1fr))`,\n  };\n  return (\n    <div\n      {...rest}\n      aria-busy={loading || rest[\"aria-busy\"] || undefined}\n      // `relative`: the containing block for the sr-only status, which is absolutely\n      // positioned and so also takes no grid cell.\n      className={cn(\"relative grid gap-3\", className)}\n      style={{ ...columns, ...style }}\n    >\n      {/* Always mounted, filled while loading: a live region announces a CHANGE of\n          its content, so one that appeared already holding the sentence might say\n          nothing. */}\n      <span role=\"status\" className=\"sr-only\">\n        {loading ? text.loading : \"\"}\n      </span>\n      <StatTileGridLoadingContext.Provider value={loading}>{children}</StatTileGridLoadingContext.Provider>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/stat-tile.tsx"],"sourcesContent":["import { createContext, isValidElement, useContext, useId, useLayoutEffect, useState } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactElement, ReactNode } from \"react\";\nimport { ArrowDown, ArrowUp, Minus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels, useKitLink, useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer, RenderedKitLink } from \"./text-link\";\nimport { Card } from \"./card\";\nimport { FieldHint } from \"./field-parts\";\nimport { useInlineFacts, useLargeText } from \"../hooks/use-large-text\";\nimport { Sparkline } from \"./sparkline\";\nimport { Tooltip } from \"./tooltip\";\n// The kit's one placeholder look, so a loading tile and the Skeleton list beside it\n// shimmer as one surface — and both stop under `prefers-reduced-motion`, which this\n// tile's private copy of the string did not.\nimport { SKELETON_CLASS } from \"./skeleton\";\nimport { DEFAULT_STAT_TILE_LABELS } from \"./stat-tile-labels\";\n\n/**\n * The words a stat tile speaks. The delta's arrow is an icon, and an icon is not a\n * sentence: a screen reader gets the direction (and, under `goodDirection`, the\n * verdict) as words, and a sighted reader who cannot tell the two delta colours apart\n * still has the arrow — neither judgement rides on colour alone.\n */\nexport interface StatTileLabels {\n  /** The delta, rising. `amount` is already formatted and unsigned. */\n  increase: (amount: string) => string;\n  decrease: (amount: string) => string;\n  unchanged: string;\n  /** Wraps the direction sentence when `goodDirection` says the change is good. */\n  better: (change: string) => string;\n  worse: (change: string) => string;\n  /** Spoken in place of a missing value (the tile shows a dash). */\n  noValue: string;\n  /** Spoken while `loading`. */\n  loading: string;\n}\n\n// Defined in ./stat-tile-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_STAT_TILE_LABELS };\n\n/**\n * What colours a figure. Token-backed like everything else in the kit.\n *\n *  - `income` / `expense` / `net` — the money trio (teal / amber / violet, CVD-safe).\n *  - `signed` — a money figure read by its own sign: above zero `income`, below zero\n *    `expense`, exactly zero neutral (a zero balance is neither news). Needs a NUMBER\n *    value; a pre-formatted string cannot be read and stays neutral.\n *  - `success` / `warning` / `danger` / `info` — a threshold verdict (\"phase margin\n *    below 30°\"). Say it in the hint or description as well; colour alone is not one.\n */\nexport type StatTileTone =\n  | \"neutral\"\n  | \"brand\"\n  | \"income\"\n  | \"expense\"\n  | \"net\"\n  | \"signed\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\";\n\nconst TONE_CLASS: Record<Exclude<StatTileTone, \"signed\">, string> = {\n  neutral: \"text-primary\",\n  brand: \"text-brand\",\n  income: \"text-money-income\",\n  expense: \"text-money-expense\",\n  net: \"text-money-net\",\n  success: \"text-success\",\n  warning: \"text-warning\",\n  danger: \"text-danger\",\n  info: \"text-info\",\n};\n\nfunction toneClass(tone: StatTileTone, value: unknown): string {\n  if (tone !== \"signed\") return TONE_CLASS[tone];\n  if (typeof value !== \"number\" || value === 0) return TONE_CLASS.neutral;\n  return value < 0 ? TONE_CLASS.expense : TONE_CLASS.income;\n}\n\n/** A change since the previous period. A bare number is shorthand for `{ value }`. */\nexport interface StatTileDelta {\n  /** Signed: above zero is \"up\". */\n  value: number;\n  /** `\"value\"` (default) formats it like the headline — same currency, same\n   *  notation. `\"percent\"` reads it as a RATIO: `0.12` is shown as 12 %. */\n  unit?: \"value\" | \"percent\";\n  /** What it is measured against, shown after it: \"vs last month\". */\n  label?: ReactNode;\n}\n\n/** A smaller figure under the headline — a prior period, a projection, a split. */\nexport interface StatTileSubValue {\n  label: ReactNode;\n  /** A number is formatted like the headline; anything else is rendered as given. */\n  value: ReactNode;\n  /** Defaults to the tile's own `tone`, read per figure (so a `signed` tile shows a\n   *  teal September above an amber August). Sub-values are always the muted weight\n   *  of their tone: they are history, and must not outshout the figure above them.\n   *\n   *  `\"none\"` leaves the figure untinted — the row's own muted text, like its label —\n   *  even on a toned tile: keksdose's report KpiCard (reports/charts/kpi-card.tsx),\n   *  whose `negative` convention tints only a figure below zero and leaves the rest\n   *  plain. (`\"neutral\"` is not that: it is the headline's full text colour, at the\n   *  sub-value's 75 %.) */\n  tone?: StatTileTone | \"none\";\n}\n\n/** What {@link StatTileProps.renderLink} is handed. Spread it onto your router's\n *  link: the class is what stretches the link over the whole tile. */\nexport interface StatTileLinkProps {\n  href: string;\n  className: string;\n  \"aria-describedby\": string;\n  children: ReactNode;\n}\n\n/**\n * A `div`'s props, `ref` included since 0.35 (round 0.35 R4, the follow-up to API-2): they\n * ride on to the {@link Card} that is the tile, so the ref is the tile's own `<div>` — the\n * one to scroll into view or measure. `ComponentPropsWithoutRef` only kept it out of the\n * type; at runtime `{...rest}` already carried it there.\n */\nexport interface StatTileProps\n  extends Omit<ComponentPropsWithRef<\"div\">, \"children\" | \"onClick\"> {\n  /** What is measured. Also the tile's accessible name when it is a link/button. */\n  label: ReactNode;\n  /**\n   * The headline. A number is formatted with `Intl.NumberFormat` in the kit's locale\n   * (see `currency`, `compact`, `numberFormat`, `format`); a string or element is\n   * rendered as given. `null`/`undefined` shows a dash and says \"No data\".\n   */\n  value?: ReactNode;\n  /** ISO 4217 code — formats a number value (and a `\"value\"` delta, and numeric\n   *  sub-values) as money. */\n  currency?: string;\n  /** Compact notation: 12 400 → \"12K\". */\n  compact?: boolean;\n  /** Any further `Intl.NumberFormat` options, merged over the two above. */\n  numberFormat?: Intl.NumberFormatOptions;\n  /** Formats every NUMBER the tile shows, replacing the `Intl` default outright. */\n  format?: (value: number) => string;\n  locale?: string;\n  /** A short unit after the value that `Intl` has no name for: \"ms\", \"dB\", \"Hz\". */\n  unit?: ReactNode;\n  /** The period the headline belongs to, shown to its left (\"SEP\"). */\n  valueLabel?: ReactNode;\n  tone?: StatTileTone;\n  delta?: number | StatTileDelta;\n  /** Which way is good news. Unset, the delta is stated and not judged (users up and\n   *  cost up are the same arrow); set, it is coloured and its sentence says so. */\n  goodDirection?: \"up\" | \"down\";\n  /** The explanation behind a \"?\" beside the label (a {@link FieldHint}) — hidden\n   *  until asked for, so it is for what a reader MIGHT want to know (\"excludes\n   *  transfers between your own accounts\"). For a line everyone should read, use\n   *  {@link StatTileProps.description} instead.\n   *\n   *  0.32 (docs/text-size-harmonization.md §4 \"No fact only in a tooltip\"): at Large\n   *  and Extra large, and on a touch screen, the words are shown under the label\n   *  instead of behind the \"?\". */\n  hint?: string;\n  /**\n   * Keep the label to ONE line, cut with an ellipsis, and show the whole of it in a\n   * {@link Tooltip} on hover and focus — but only while it is actually cut, so a\n   * label that fits shows no bubble repeating itself. keksdose's admin MetricTile\n   * wall: twenty tiles whose German labels (\"Aktive Abonnements (30 Tage)\") wrapped\n   * onto two or three lines and pushed each tile's figure to a different height.\n   *\n   * The label element keeps the FULL text — the ellipsis is paint — so it is still\n   * the tile's accessible name (and the stretched link's, on a link tile) exactly as\n   * without this. Off by default: a wrapping label is what every existing tile does,\n   * and a tile standing alone has room to.\n   *\n   * This is the tooltip: pass the label as a plain STRING rather than wrapping it in\n   * your own `<Tooltip>` for the full text (keksdose's admin metrics-panel.tsx:134\n   * does, from before this prop). A wrapped label shows a bubble even when nothing is\n   * cut, and nests its trigger inside this one's.\n   *\n   * Ignored at Large and Extra large (0.32, §4): nothing truncates there, and the full\n   * label would otherwise be a fact only in a tooltip.\n   */\n  truncateLabel?: boolean;\n  /**\n   * The tile's name as plain text, for the places that need a string rather than a\n   * node — today the {@link StatTileProps.trend} sparkline's accessible name. Only\n   * needed when `label` is not a string AND its text cannot be read from it: a label\n   * element's text children are found on their own (a `<Tooltip label=\"…\">Spend\n   * </Tooltip>` label still names its sparkline \"Spend\"), an icon or a formatted\n   * message component's are not.\n   */\n  name?: string;\n  /** A visible line under the value: \"Last 12 months\", \"3 estates / 9 buildings\" —\n   *  always shown, so it is for what every reader needs. An explanation only some\n   *  will want belongs in {@link StatTileProps.hint}, the \"?\" beside the label. */\n  description?: ReactNode;\n  /**\n   * One figure that belongs WITH the headline rather than under it: keksdose's\n   * \"Projected €1,850\" under a to-date \"€420\" (KpiCard, feedback #51), which it\n   * currently smuggles into `description` with hand-set margins so the prior-month\n   * sub-values do not come between the two. It is drawn directly under the value\n   * (before the delta, the description and the sparkline) as a sub-value row, with\n   * only a hair of space above it.\n   *\n   * A slot of its own rather than a placement switch for `subValues`: the history\n   * rows (last month, last year) should stay at the bottom where they are, and moving\n   * the whole list up to bring one row with it would put them between the headline\n   * and its delta. Same shape as a sub-value, so the `tone` rules are the same.\n   * Withheld while `loading`, like the sub-values.\n   */\n  projection?: StatTileSubValue;\n  /**\n   * Smaller figures under the headline, label left and figure right.\n   *\n   * At Large and Extra large (0.32, §4 \"StatTile shows its one big number; the sparkline\n   * and sub-values move below\"): the tile leads with the headline and its delta, and the\n   * projection, these rows and the sparkline follow beneath the description, each row's\n   * label over its figure — a 2-up tile at 150 % is 120 px of text wide, and a label\n   * beside a figure there squeezed both.\n   */\n  subValues?: StatTileSubValue[];\n  /** Shorthand for a fluid {@link Sparkline} named after the tile and speaking in\n   *  the tile's number format. The name is the label's text; see\n   *  {@link StatTileProps.name} for a label that has none. */\n  trend?: ReadonlyArray<number | null | undefined>;\n  /** A custom sparkline (or any small graphic) in the same place. Wins over `trend`. */\n  sparkline?: ReactNode;\n  /** A decorative icon at the top end of the tile. */\n  icon?: ReactNode;\n  /** Anything below the rest — a progress bar, a link row. */\n  footer?: ReactNode;\n  /** Tag every figure `data-private`, so the host's demo-mode rule blurs it — the\n   *  same attribute `Tooltip redact` and the chart tooltip's value cell carry. */\n  sensitive?: boolean;\n  /** Skeleton in place of the value; delta, sub-values and trend are withheld. */\n  loading?: boolean;\n  /** `\"sm\"` for dense grids (a metrics wall); `\"md\"` the default KPI. */\n  size?: \"sm\" | \"md\";\n  /**\n   * The tile's frame. `\"card\"` (default) is the bordered, shadowed card on the page.\n   * `\"inset\"` is a tile INSIDE a card: {@link Card}'s `inset` — the raised\n   * `--bg-surface-2`, a small radius, no border or shadow, since the card round it\n   * already has them. `\"plain\"` drops the frame altogether — no fill and no padding —\n   * for figures set straight into a card's content (a summary row under a card title),\n   * where any box would be a box in a box. keksdose wrote both by hand over the card\n   * tile (`border-0 shadow-none bg-transparent p-0`) for its tiles inside a card.\n   */\n  variant?: \"card\" | \"inset\" | \"plain\";\n  /** Makes the tile a link. See {@link renderLink} for a router. */\n  href?: string;\n  /** Renders the link for `href` — pass your router's `<Link>` here, since a plain\n   *  `<a>` reloads a single-page app. Default: the `<UiKitProvider linkComponent>`\n   *  (for an in-app `href`), then `<a>`. */\n  renderLink?: (props: StatTileLinkProps) => ReactElement;\n  /** Makes the tile a button (ignored when `href` is given). */\n  onClick?: () => void;\n  labels?: LabelOverride<StatTileLabels>;\n}\n\n// One formatter per option set: a metrics wall is twenty of these.\nconst formatters = new Map<string, Intl.NumberFormat>();\nfunction numberFormatter(locale: string | undefined, options: Intl.NumberFormatOptions): Intl.NumberFormat {\n  const key = `${locale ?? \"\"}|${JSON.stringify(options)}`;\n  let f = formatters.get(key);\n  if (!f) {\n    f = new Intl.NumberFormat(locale, options);\n    formatters.set(key, f);\n  }\n  return f;\n}\n\n// The headline sizes are keyed on the TILE's width (it is a @container), not the\n// viewport: a grid beside a sidebar makes tiles narrowest exactly where a viewport\n// breakpoint would hand them the larger font. `sm` is keksdose's compact headline,\n// sized so a worst-case \"CHF 123,456.78\" still fits a 320px phone's 2-up tiles.\nconst VALUE_TEXT = {\n  md: \"text-xl @[13rem]:text-2xl\",\n  sm: \"text-xs @[8.5rem]:text-sm @[13rem]:text-base\",\n} as const;\nconst PADDING = { md: \"p-3 sm:p-4\", sm: \"px-2.5 py-2\" } as const;\n\n/**\n * The KPI card: a label, one number, and optionally how it moved, what it is made of\n * and which way it has been going.\n *\n * Replaces keksdose's `KpiCard` and admin `Tile`, lenkbank's metrics tiles and\n * kastlan's `KpiCard` — the same card four times, with four answers to the same\n * questions (how a currency is formatted, whether a delta is judged, what happens to\n * the figures in demo mode).\n *\n * Interactive tiles use a STRETCHED link: the label is the `<a>`/`<button>`, and its\n * `::after` covers the card. Making the card itself the link would nest the hint's\n * `<button>` inside it, which is invalid HTML and an unreachable control; this way\n * the hint sits above the overlay and stays its own tab stop. The link's name is the\n * label, and it is described by the value and the delta.\n */\nexport function StatTile({\n  label,\n  value,\n  currency,\n  compact = false,\n  numberFormat,\n  format,\n  locale,\n  unit,\n  valueLabel,\n  tone = \"neutral\",\n  delta,\n  goodDirection,\n  hint,\n  truncateLabel = false,\n  name,\n  description,\n  projection,\n  subValues,\n  trend,\n  sparkline,\n  icon,\n  footer,\n  sensitive = false,\n  loading = false,\n  size = \"md\",\n  variant = \"card\",\n  href,\n  renderLink,\n  onClick,\n  labels,\n  className,\n  ...rest\n}: StatTileProps) {\n  const text = useKitLabels(\"statTile\", DEFAULT_STAT_TILE_LABELS, labels);\n  // §4: at Large the one big number leads and the rest follows below it; the label\n  // never truncates; on touch or at Large the hint is words, not a \"?\".\n  const large = useLargeText();\n  const inlineHint = useInlineFacts() && !!hint;\n  if (large) truncateLabel = false;\n  // A loading StatTileGrid puts every tile in it into the loading state and says\n  // \"Loading…\" ONCE for all of them; the tile then keeps its own sentence to itself\n  // (see StatTileGrid's `loading`).\n  const gridLoading = useContext(StatTileGridLoadingContext);\n  loading = loading || gridLoading;\n  const kitLink = useKitLink();\n  const [labelEl, setLabelEl] = useState<HTMLElement | null>(null);\n  const labelCut = useIsTruncated(truncateLabel ? labelEl : null);\n  const kitLocale = useKitLocale(locale);\n  const id = useId();\n  const valueId = `${id}-value`;\n  const deltaId = `${id}-delta`;\n  const priv = sensitive ? \"\" : undefined;\n\n  const fmt =\n    format ??\n    ((n: number) =>\n      numberFormatter(kitLocale, {\n        ...(currency ? { style: \"currency\", currency } : null),\n        ...(compact ? { notation: \"compact\" } : null),\n        ...numberFormat,\n      }).format(n));\n  const show = (v: ReactNode) => (typeof v === \"number\" ? fmt(v) : v);\n\n  const d = typeof delta === \"number\" ? { value: delta } : delta;\n  const hasValue = value !== null && value !== undefined && value !== \"\";\n  const labelText = name ?? plainText(label);\n\n  // ── The label, which is also the link/button when the tile is interactive ──\n  const stretched = cn(\n    \"text-start uppercase tracking-wide\",\n    \"after:absolute after:inset-0 after:rounded-lg after:content-['']\",\n    // The kit's focus frame (0.32, §5), on the overlay — `FOCUS_RING`'s classes cannot\n    // carry the `after:`, so its width is spelt out.\n    \"focus-visible:outline-none focus-visible:after:ring-focus focus-visible:after:ring-inset focus-visible:after:ring-brand\",\n  );\n  const describedBy = d ? `${valueId} ${deltaId}` : valueId;\n  let labelNode: ReactNode = label;\n  if (href !== undefined) {\n    const linkProps: StatTileLinkProps = {\n      href,\n      className: stretched,\n      \"aria-describedby\": describedBy,\n      children: label,\n    };\n    const kit = pickLinkRenderer<StatTileLinkProps>(undefined, kitLink, href);\n    labelNode = renderLink ? (\n      renderLink(linkProps)\n    ) : kit ? (\n      <RenderedKitLink render={kit} props={linkProps} />\n    ) : (\n      <a href={href} className={stretched} aria-describedby={describedBy}>\n        {label}\n      </a>\n    );\n  } else if (onClick) {\n    labelNode = (\n      <button type=\"button\" onClick={onClick} aria-describedby={describedBy} className={stretched}>\n        {label}\n      </button>\n    );\n  }\n  const interactive = href !== undefined || onClick !== undefined;\n\n  // ── Delta ──\n  let deltaNode: ReactNode = null;\n  if (d && !loading && Number.isFinite(d.value)) {\n    const magnitude = Math.abs(d.value);\n    const amount =\n      d.unit === \"percent\"\n        ? numberFormatter(kitLocale, { style: \"percent\", maximumFractionDigits: 1 }).format(magnitude)\n        : fmt(magnitude);\n    const dir = d.value > 0 ? \"up\" : d.value < 0 ? \"down\" : \"flat\";\n    const Icon = dir === \"up\" ? ArrowUp : dir === \"down\" ? ArrowDown : Minus;\n    let spoken = dir === \"up\" ? text.increase(amount) : dir === \"down\" ? text.decrease(amount) : text.unchanged;\n    let deltaTone = \"text-muted\";\n    if (goodDirection && dir !== \"flat\") {\n      const good = dir === goodDirection;\n      spoken = good ? text.better(spoken) : text.worse(spoken);\n      deltaTone = good ? \"text-success\" : \"text-danger\";\n    }\n    deltaNode = (\n      // `relative`: the containing block for the sr-only sentence (see the\n      // sr-only-containment test for what an escaped one does to the page).\n      <div className=\"relative mt-1 flex flex-wrap items-center gap-x-1.5 text-xs tabular-nums\">\n        <span id={deltaId} data-private={priv} className={cn(\"inline-flex items-center gap-0.5 font-medium\", deltaTone)}>\n          <Icon className=\"size-3 shrink-0\" aria-hidden />\n          {/* The figure at zero too, like Delta (kastlan 48): \"0 %\" says the change was\n              measured; a bare dash reads like a missing value. */}\n          <span aria-hidden>{amount}</span>\n          <span className=\"sr-only\">{spoken}</span>\n        </span>\n        {d.label != null && <span className=\"text-muted\">{d.label}</span>}\n      </div>\n    );\n  }\n\n  // ── Headline ──\n  const valueClass = cn(\n    \"whitespace-nowrap font-semibold tabular-nums\",\n    VALUE_TEXT[size],\n    toneClass(tone, value),\n  );\n  const headline = loading ? (\n    <span id={valueId} className=\"relative block py-0.5\">\n      <span aria-hidden className={cn(SKELETON_CLASS, \"block h-6 w-24 max-w-full\")} />\n      {!gridLoading && <span className=\"sr-only\">{text.loading}</span>}\n    </span>\n  ) : hasValue ? (\n    <span id={valueId} data-private={priv} className={cn(valueClass, valueLabel != null && !large && \"ms-auto\")}>\n      {show(value)}\n      {unit != null && (\n        <span className=\"ms-1 text-[0.7em] font-medium text-muted\">{unit}</span>\n      )}\n    </span>\n  ) : (\n    <span id={valueId} className={cn(\"relative\", valueClass, \"text-muted\")}>\n      <span aria-hidden>—</span>\n      <span className=\"sr-only\">{text.noValue}</span>\n    </span>\n  );\n\n  const graphic =\n    loading ? null : sparkline ??\n      (trend && (\n        <Sparkline\n          data={trend}\n          fluid\n          height={size === \"sm\" ? 20 : 28}\n          label={labelText}\n          formatValue={fmt}\n          locale={kitLocale}\n          tone={tone === \"signed\" ? \"signed\" : tone === \"neutral\" ? \"chart\" : tone}\n          data-private={priv}\n        />\n      ));\n\n  return (\n    <Card\n      {...rest}\n      variant={variant === \"card\" ? \"default\" : \"inset\"}\n      data-variant={variant === \"card\" ? undefined : variant}\n      aria-busy={loading || undefined}\n      className={cn(\n        // @container: the headline sizes read the tile's width. relative: the stretched\n        // link's overlay. overflow-hidden: at pathological widths a figure clips inside\n        // the border instead of painting over the neighbouring tile.\n        \"@container relative flex min-w-0 flex-col overflow-hidden\",\n        // `plain` is the inset card with its fill and padding taken away — the figures\n        // align with the content edge of the card they sit in. (Not `p-0` over the\n        // padding: the padding's `sm:p-4` would still win from `sm` up.)\n        variant === \"plain\" ? \"rounded-none bg-transparent p-0\" : PADDING[size],\n        interactive && \"transition-colors hover:border-strong hover:bg-hover\",\n        className,\n      )}\n    >\n      <div className=\"flex items-start gap-2\">\n        <div className=\"flex min-w-0 flex-1 items-center gap-1 break-words text-xs uppercase tracking-wide text-muted\">\n          {truncateLabel && labelCut ? (\n            // Portalled: the tile is `overflow-hidden`, and a bubble inside it would be\n            // clipped by the very box whose edge cut the label.\n            <Tooltip label={label} side=\"top\" portal className=\"flex min-w-0\">\n              <span ref={setLabelEl} className=\"block min-w-0 truncate\">\n                {labelNode}\n              </span>\n            </Tooltip>\n          ) : (\n            <span ref={setLabelEl} className={cn(\"min-w-0\", truncateLabel && \"block truncate\")}>\n              {labelNode}\n            </span>\n          )}\n          {/* Above the stretched link's overlay, so it stays hoverable and focusable. */}\n          {hint && !inlineHint && <FieldHint label={hint} side=\"top\" className=\"relative z-10 shrink-0\" />}\n        </div>\n        {icon != null && (\n          <span aria-hidden className=\"shrink-0 text-muted [&_svg]:size-4\">\n            {icon}\n          </span>\n        )}\n      </div>\n\n      {inlineHint && (\n        // §4: the hint as words under the label — the same muted type as `description`,\n        // in the reading case of a sentence rather than the label's capitals.\n        <p data-slot=\"stat-tile-hint\" className=\"mt-0.5 text-xs text-muted\">\n          {hint}\n        </p>\n      )}\n\n      {valueLabel != null ? (\n        // Period-left / value-right, matching the sub-rows below it. flex-wrap lets a\n        // too-long amount drop to its own end-aligned line instead of overflowing. At\n        // Large the period goes over the figure, which then has the tile's width.\n        <div className={cn(\"mt-1 flex items-baseline gap-x-1.5\", large ? \"flex-col items-start\" : \"flex-wrap\")}>\n          <span className=\"shrink-0 text-xs uppercase tracking-wide text-muted\">{valueLabel}</span>\n          {headline}\n        </div>\n      ) : (\n        <div className=\"mt-1\">{headline}</div>\n      )}\n\n      {/* At Large the delta and description follow the figure at once, and the\n          projection moves down with the other figures (see `subValues`). */}\n      {!large && !loading && projection && (\n        <dl className=\"mt-0.5\">\n          <FigureRow figure={projection} tileTone={tone} show={show} priv={priv} />\n        </dl>\n      )}\n\n      {deltaNode}\n      {description != null && <div className=\"mt-1 text-xs text-muted\">{description}</div>}\n      {!large && graphic && <div className=\"mt-2\">{graphic}</div>}\n\n      {!loading && ((large && projection) || (subValues && subValues.length > 0)) && (\n        <dl data-slot=\"stat-tile-figures\" className={cn(\"mt-1.5\", large ? \"space-y-1.5\" : \"space-y-0.5\")}>\n          {large && projection && (\n            <FigureRow figure={projection} tileTone={tone} show={show} priv={priv} stacked />\n          )}\n          {subValues?.map((sv, i) => (\n            <FigureRow key={i} figure={sv} tileTone={tone} show={show} priv={priv} stacked={large} />\n          ))}\n        </dl>\n      )}\n\n      {large && graphic && (\n        <div data-slot=\"stat-tile-graphic\" className=\"mt-2\">\n          {graphic}\n        </div>\n      )}\n\n      {footer != null && <div className=\"mt-2\">{footer}</div>}\n    </Card>\n  );\n}\n\n/** One label/value row of a `<dl>`: a sub-value, or the projection. */\nfunction FigureRow({\n  figure,\n  tileTone,\n  show,\n  priv,\n  stacked = false,\n}: {\n  figure: StatTileSubValue;\n  tileTone: StatTileTone;\n  show: (v: ReactNode) => ReactNode;\n  priv: \"\" | undefined;\n  /** The label over the figure (Large, §4) instead of beside it. */\n  stacked?: boolean;\n}) {\n  const own = figure.tone ?? (tileTone === \"neutral\" ? undefined : tileTone);\n  const svTone = own === \"none\" ? undefined : own;\n  // The LABEL gives way, never the figure. This row used to wrap, so on a narrow tile a\n  // long label (\"AUG (SIGNED)\") dropped its amount onto a line of its own while the\n  // next row stayed on one — two layouts in one list, and a figure no longer beside\n  // the period it belongs to. Now the label breaks within itself and the amount stays\n  // on the label's first line, end-aligned like every other row.\n  return (\n    <div\n      className={cn(\n        \"flex text-xs tabular-nums text-muted\",\n        stacked ? \"flex-col items-start\" : \"items-baseline gap-x-2\",\n      )}\n    >\n      <dt className=\"min-w-0 uppercase tracking-wide [overflow-wrap:anywhere]\">{figure.label}</dt>\n      <dd\n        data-private={priv}\n        className={cn(\n          \"shrink-0 whitespace-nowrap\",\n          !stacked && \"ms-auto\",\n          svTone && [toneClass(svTone, figure.value), \"opacity-75\"],\n        )}\n      >\n        {show(figure.value)}\n      </dd>\n    </div>\n  );\n}\n\n/**\n * The text of a label node, for the sparkline's name: a string or number as is, an\n * element by its children, recursively. A `<Tooltip label=\"…\">Spend</Tooltip>` label\n * yields \"Spend\" — the text the reader sees, not the bubble's. `undefined` when there\n * is no text to find (an icon), so the sparkline falls back to its unnamed summary.\n */\nfunction plainText(node: ReactNode): string | undefined {\n  const walk = (n: ReactNode): string => {\n    if (typeof n === \"string\" || typeof n === \"number\") return String(n);\n    if (Array.isArray(n)) return n.map(walk).join(\"\");\n    if (isValidElement<{ children?: ReactNode }>(n)) return walk(n.props.children);\n    return \"\";\n  };\n  const text = walk(node).replace(/\\s+/g, \" \").trim();\n  return text === \"\" ? undefined : text;\n}\n\n/**\n * Whether `el`'s text is wider than its box — i.e. whether `truncate` is cutting it.\n * Re-measured whenever the box resizes (a grid reflowing, a translation loading), not\n * only on mount. Keyed on the ELEMENT (a callback ref), because wrapping the label in\n * its tooltip remounts it, and an observer on the old node would watch nothing.\n */\nfunction useIsTruncated(el: HTMLElement | null): boolean {\n  const [cut, setCut] = useState(false);\n  useLayoutEffect(() => {\n    // No reset while there is no node: between the unwrapped label unmounting and the\n    // wrapped one mounting there is none, and a reset there would unwrap it again.\n    if (!el) return;\n    const measure = () => setCut(el.scrollWidth > el.clientWidth);\n    measure();\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(measure);\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [el]);\n  return cut;\n}\n\nexport interface StatTileGridProps extends ComponentPropsWithRef<\"div\"> {\n  /** The narrowest a tile may get before the grid drops a column. The default fits\n   *  two tiles on a 320px phone. */\n  minTileWidth?: string;\n  /**\n   * Let a row that is not full stretch its tiles across the whole width. Default\n   * `true` (CSS `auto-fit`): one or two tiles fill the row, as they always have.\n   * `false` (`auto-fill`): the empty columns are kept, so every tile is the width of\n   * a column whatever the count — a lone \"Balance\" tile in a card stays tile-sized\n   * instead of becoming a banner the width of the card, and the tiles of a short row\n   * line up with the columns of a full one above it.\n   */\n  stretch?: boolean;\n  /**\n   * Every tile in the grid is loading: each shows its skeleton (as with its own\n   * `loading`), and the grid says \"Loading…\" ONCE, in a polite status region, instead\n   * of each tile carrying its own sr-only \"Loading…\" — a wall of eight tiles was read\n   * as eight \"Loading…\"s in a row. The grid is `aria-busy` meanwhile. A tile's own\n   * `loading` inside a grid that is not loading still speaks for itself.\n   */\n  loading?: boolean;\n  /** The grid's one sentence — `loading` from {@link StatTileLabels}. */\n  labels?: LabelOverride<Pick<StatTileLabels, \"loading\">>;\n}\n\n/** Set by a loading {@link StatTileGrid}; read by each tile in it. */\nconst StatTileGridLoadingContext = createContext(false);\n\n/**\n * The row of tiles every dashboard in the three apps lays out by hand, each with its\n * own breakpoint ladder (`grid-cols-2 md:grid-cols-4 min-[2400px]:grid-cols-8` …).\n * Those ladders read the VIEWPORT and so ignored the sidebar: 6-up tiles at 155px in\n * the band where the sidebar was open. This fits as many columns as `minTileWidth`\n * allows in the space the grid actually has, and needs no breakpoint at all.\n */\nexport function StatTileGrid({\n  minTileWidth = \"9rem\",\n  stretch = true,\n  loading = false,\n  labels,\n  className,\n  style,\n  children,\n  ...rest\n}: StatTileGridProps) {\n  const text = useKitLabels(\"statTile\", DEFAULT_STAT_TILE_LABELS, labels);\n  const columns: CSSProperties = {\n    gridTemplateColumns: `repeat(${stretch ? \"auto-fit\" : \"auto-fill\"}, minmax(min(100%, ${minTileWidth}), 1fr))`,\n  };\n  return (\n    <div\n      {...rest}\n      aria-busy={loading || rest[\"aria-busy\"] || undefined}\n      // `relative`: the containing block for the sr-only status, which is absolutely\n      // positioned and so also takes no grid cell.\n      className={cn(\"relative grid gap-3\", className)}\n      style={{ ...columns, ...style }}\n    >\n      {/* Always mounted, filled while loading: a live region announces a CHANGE of\n          its content, so one that appeared already holding the sentence might say\n          nothing. */}\n      <span role=\"status\" className=\"sr-only\">\n        {loading ? text.loading : \"\"}\n      </span>\n      <StatTileGridLoadingContext.Provider value={loading}>{children}</StatTileGridLoadingContext.Provider>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -42,33 +42,18 @@ interface SwipeActionBase {
  * dark-mode pastel.
  *
  * **`paint`** follows the same rule for an app's documented exception (see
- * {@link SwipePaint}). **`className` / `armedClassName`** is the old path, kept so
- * existing call sites compile; there the label is white unless the classes set a
- * colour, and the idle panel is still dimmed.
+ * {@link SwipePaint}). The old path, a `className` / `armedClassName` pair under a white
+ * label and dimmed idle, was deprecated in 0.33 and removed in 0.35 (round 0.35 R1).
  */
 export type SwipeAction = SwipeActionBase & ({
     /** The kit paints the panel: the tone's wash idle, its fill and `-contrast` armed. */
     tone: SwipeTone;
     paint?: never;
-    className?: never;
-    armedClassName?: never;
 } | {
     /** A documented app exception: idle a 14 % wash of `fill` under the body ink,
      *  armed `fill` under `foreground`. */
     paint: SwipePaint;
     tone?: never;
-    className?: never;
-    armedClassName?: never;
-} | {
-    tone?: never;
-    paint?: never;
-    /** @deprecated 0.33 — pass `tone`, or `paint` for an exception; removed in 0.35.
-     *  Background utility class while the action is previewed but not yet armed; the
-     *  panel is dimmed then, and its text is white unless this sets a text colour. */
-    className: string;
-    /** @deprecated 0.33 — pass `tone`, or `paint`; removed in 0.35. Background
-     *  utility class once the drag has passed this action's threshold. */
-    armedClassName: string;
 });
 /**
  * Each tone's panel, idle and armed. Literal class strings, because Tailwind finds a

package/dist/components/swipeable-row.js

@@ -23,18 +23,14 @@ const SWIPE_TONE = {
 const PAINT_IDLE = "bg-[color-mix(in_oklab,var(--swipe-paint-fill)_14%,var(--bg-surface))] text-primary";
 const PAINT_ARMED = "bg-[var(--swipe-paint-fill)] text-[var(--swipe-paint-fg)]";
 function panelLook(action, armed) {
-  if (action.tone) return { className: SWIPE_TONE[action.tone][armed ? "armed" : "idle"], dim: false };
-  if (action.paint) {
-    return {
-      className: armed ? PAINT_ARMED : PAINT_IDLE,
-      style: {
-        "--swipe-paint-fill": action.paint.fill,
-        "--swipe-paint-fg": action.paint.foreground
-      },
-      dim: false
-    };
-  }
-  return { className: cn("text-white", armed ? action.armedClassName : action.className), dim: !armed };
+  if (action.tone) return { className: SWIPE_TONE[action.tone][armed ? "armed" : "idle"] };
+  return {
+    className: armed ? PAINT_ARMED : PAINT_IDLE,
+    style: {
+      "--swipe-paint-fill": action.paint.fill,
+      "--swipe-paint-fg": action.paint.foreground
+    }
+  };
 }
 const PEEK_PX = 40;
 function SwipeableRow({
@@ -97,11 +93,10 @@ function SwipeableRow({
         className: cn(
           "pointer-events-none absolute inset-0 flex items-center gap-2 px-4",
           "text-xs font-medium transition-all",
+          // No dimming: a tone or a paint says "not yet armed" with the soft→solid
+          // step, which keeps its label readable at both ends (the 0.33 rule; the
+          // dimmed path went with `className` / `armedClassName` in 0.35).
           look.className,
-          // The old path only: dimmed until the drag has passed a threshold. A tone
-          // or a paint says it with the soft→solid step instead, which keeps its
-          // label readable at both ends.
-          look.dim && "opacity-60",
           // The panel is anchored to the edge the row is uncovering, so the label
           // sits where the eye already is rather than across the screen. That edge is
           // physical, while a flex row starts at the INLINE start — so in RTL the two

package/dist/components/swipeable-row.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/swipeable-row.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport type { StatusDotTone } from \"./status-dot\";\nimport { useRowSwipe, type SwipeStage } from \"../hooks/use-row-swipe\";\nimport { DEFAULT_SWIPEABLE_ROW_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * What a swipe action's panel means — the vocabulary Chip, ProgressBar and StatusDot\n * already share, so a curtain can be \"the colour of the status it produces\" by name:\n * brand, neutral, success, warning, danger, info, income, expense, and the categorical\n * hues blue, indigo, purple, teal and orange.\n */\nexport type SwipeTone = StatusDotTone;\n\n/**\n * An app's own fill for a documented exception (0.33, docs/colour-roles-harmonization.md\n * §12.6) — a curtain that must be exactly its status pill's palette fill, or two\n * strengths of one tone. CSS colours or `var()`s, the same in both themes unless the app\n * passes a variable it declares per theme in its own stylesheet. The kit cannot measure\n * these, so the app's tests pin the pair.\n */\nexport interface SwipePaint {\n  /** The armed panel's fill; idle shows a 14 % wash of it on the card. */\n  fill: string;\n  /** The text and icon colour ON `fill`, armed. Idle text is the body ink. */\n  foreground: string;\n}\n\ninterface SwipeActionBase {\n  onCommit: () => void;\n  label: string;\n  /** Rendered inside the panel. Icons stay the consumer's choice — this package\n   *  ships no opinion about which icon set an app uses. */\n  icon?: ReactNode;\n}\n\n/**\n * One armed swipe action: what it does, and how the reveal panel presents it.\n *\n * The panel has two states. Before the first threshold is crossed it previews the\n * nearest action IDLE, so the user can see what a little more drag will do; crossing\n * the threshold ARMS it — \"let go and this fires\".\n *\n * **`tone`** (0.33) is how the kit paints it: idle, the tone's soft wash under the\n * tone's own text colour (`bg-danger-soft text-danger`, Chip's soft look, ≥ 4.5:1);\n * armed, the tone's solid fill under its `-contrast` foreground (≥ 5:1). The soft→solid\n * step is the signal. It replaces a panel dimmed to 60 % at idle, whose label sat at\n * 2.4–4.5:1 on the kit's own swipes, and a white label that was unreadable on every\n * dark-mode pastel.\n *\n * **`paint`** follows the same rule for an app's documented exception (see\n * {@link SwipePaint}). **`className` / `armedClassName`** is the old path, kept so\n * existing call sites compile; there the label is white unless the classes set a\n * colour, and the idle panel is still dimmed.\n */\nexport type SwipeAction = SwipeActionBase &\n  (\n    | {\n        /** The kit paints the panel: the tone's wash idle, its fill and `-contrast` armed. */\n        tone: SwipeTone;\n        paint?: never;\n        className?: never;\n        armedClassName?: never;\n      }\n    | {\n        /** A documented app exception: idle a 14 % wash of `fill` under the body ink,\n         *  armed `fill` under `foreground`. */\n        paint: SwipePaint;\n        tone?: never;\n        className?: never;\n        armedClassName?: never;\n      }\n    | {\n        tone?: never;\n        paint?: never;\n        /** @deprecated 0.33 — pass `tone`, or `paint` for an exception; removed in 0.35.\n         *  Background utility class while the action is previewed but not yet armed; the\n         *  panel is dimmed then, and its text is white unless this sets a text colour. */\n        className: string;\n        /** @deprecated 0.33 — pass `tone`, or `paint`; removed in 0.35. Background\n         *  utility class once the drag has passed this action's threshold. */\n        armedClassName: string;\n      }\n  );\n\n/**\n * Each tone's panel, idle and armed. Literal class strings, because Tailwind finds a\n * class by reading the source. Idle is Chip's soft recipe for the tone (the money pair\n * takes Chip's soft money look, the well under the money colour; neutral the active\n * fill under the secondary ink); armed is the plain fill, not `-hover`, under the\n * fill's own foreground. Measured in every shipped preset by\n * theme/__tests__/tokens-css-audit.test.ts.\n */\nexport const SWIPE_TONE: Record<SwipeTone, { idle: string; armed: string }> = {\n  brand: { idle: \"bg-brand-soft text-brand-muted\", armed: \"bg-brand text-brand-contrast\" },\n  neutral: { idle: \"bg-active text-secondary\", armed: \"bg-neutral text-neutral-contrast\" },\n  success: { idle: \"bg-success-soft text-success\", armed: \"bg-success text-success-contrast\" },\n  warning: { idle: \"bg-warning-soft text-warning\", armed: \"bg-warning text-warning-contrast\" },\n  danger: { idle: \"bg-danger-soft text-danger\", armed: \"bg-danger text-danger-contrast\" },\n  info: { idle: \"bg-info-soft text-info\", armed: \"bg-info text-info-contrast\" },\n  income: { idle: \"bg-surface-2 text-money-pos\", armed: \"bg-money-pos text-money-income-contrast\" },\n  expense: { idle: \"bg-surface-2 text-money-neg\", armed: \"bg-money-neg text-money-expense-contrast\" },\n  blue: { idle: \"bg-hue-blue-soft text-hue-blue\", armed: \"bg-hue-blue text-hue-blue-contrast\" },\n  indigo: { idle: \"bg-hue-indigo-soft text-hue-indigo\", armed: \"bg-hue-indigo text-hue-indigo-contrast\" },\n  purple: { idle: \"bg-hue-purple-soft text-hue-purple\", armed: \"bg-hue-purple text-hue-purple-contrast\" },\n  teal: { idle: \"bg-hue-teal-soft text-hue-teal\", armed: \"bg-hue-teal text-hue-teal-contrast\" },\n  orange: { idle: \"bg-hue-orange-soft text-hue-orange\", armed: \"bg-hue-orange text-hue-orange-contrast\" },\n};\n\n/** `paint`'s two looks, from the two custom properties the panel carries inline. The\n *  idle wash is `--brand-bg`'s recipe (14 % of the fill into the card). */\nconst PAINT_IDLE = \"bg-[color-mix(in_oklab,var(--swipe-paint-fill)_14%,var(--bg-surface))] text-primary\";\nconst PAINT_ARMED = \"bg-[var(--swipe-paint-fill)] text-[var(--swipe-paint-fg)]\";\n\n/** The panel's colour classes, inline style and dimming for one action and state. */\nfunction panelLook(action: SwipeAction, armed: boolean): { className: string; style?: CSSProperties; dim: boolean } {\n  if (action.tone) return { className: SWIPE_TONE[action.tone][armed ? \"armed\" : \"idle\"], dim: false };\n  if (action.paint) {\n    return {\n      className: armed ? PAINT_ARMED : PAINT_IDLE,\n      style: {\n        \"--swipe-paint-fill\": action.paint.fill,\n        \"--swipe-paint-fg\": action.paint.foreground,\n      } as CSSProperties,\n      dim: false,\n    };\n  }\n  // The deprecated path, as it was: white text under the caller's fill, dimmed idle.\n  return { className: cn(\"text-white\", armed ? action.armedClassName : action.className), dim: !armed };\n}\n\n/**\n * `right`/`left` are PHYSICAL drag directions in every writing direction, and stay so on\n * purpose: a swipe is a movement of the finger across the glass, the gesture hook\n * measures it in screen pixels, and \"which way is destructive\" is an app decision that\n * RTL guidelines do not agree on. An app that wants mirrored actions in RTL swaps the\n * two arrays itself. What the component does mirror is everything it lays out: the\n * reveal panel's contents hug the physical edge being uncovered, and the keyboard\n * buttons sit at the row's logical END.\n */\nexport interface SwipeableRowProps {\n  /** Actions committed by dragging (physically) RIGHT, nearest threshold first. */\n  right?: SwipeAction[];\n  /** Actions committed by dragging (physically) LEFT, nearest threshold first. */\n  left?: SwipeAction[];\n  /** Turn the gesture off — an open editor, a pending mutation, a locked row. This\n   *  also withdraws the keyboard buttons below: a row that must not be acted on must\n   *  not be actionable by ANY input. */\n  enabled?: boolean;\n  /** Names the revealed action buttons as a set (\"Row actions\"), for a reader that\n   *  reaches the group before it reaches any one button. Default:\n   *  `swipeableRow.actions` from the {@link UiKitProvider}, else English. */\n  actionsLabel?: string;\n  className?: string;\n  children: ReactNode;\n}\n\n/** How much of the row stays on screen at full drag. A row that can be pulled\n *  entirely off its own track reads as already deleted, and there is nothing left to\n *  drag back; a sliver keeps the gesture reversible and the row identifiable. */\nconst PEEK_PX = 40;\n\n/**\n * A row whose horizontal drag reveals actions underneath it.\n *\n * The reveal panel spans the FULL row width (Keksdose feedback #174). It used to be\n * two half-width blocks side by side, which capped the drag at half the row so the\n * opposite panel could never be exposed — and on a row bound to three actions that\n * left ~55px between stages on a phone, close enough that the wrong one committed.\n * Only the side being dragged toward is painted now, so full width costs nothing:\n * at rest the content covers both anyway, and a drag only ever reveals one side.\n *\n * Thresholds are still not fixed pixel values — they are spread evenly across the\n * available drag, which is now the row width less a {@link PEEK_PX} sliver. A fixed\n * 72/150/228px ladder overshoots a narrow phone; a proportional one keeps every\n * action reachable and roughly doubles the room between them.\n *\n * **Whether the action will fire is stated three ways, not one** (feedback #174): the\n * panel goes from the tone's soft wash to its solid fill, the icon grows and gains a\n * filled disc, and the label turns bold — plus the existing haptic tick per newly armed\n * stage. A colour\n * shift alone is easy to miss mid-gesture, and it is invisible to anyone who cannot\n * distinguish the two tones.\n *\n * Clicks that follow a drag are swallowed in the capture phase: without that, a swipe\n * would also fire whatever click handler the row content carries (expanding it, opening\n * a dialog) on top of the action it just committed.\n *\n * ## The keyboard path is buttons, and deliberately not a typed gesture\n *\n * Every action here used to live exclusively inside a pointer drag — `onCommit` had no\n * other caller — so with a keyboard, with a screen reader, or on any input that cannot\n * express 120px of horizontal travel, the row's actions did not exist at all. That is\n * not a rough edge on a phone control: {@link DataTable} mounts this for every row of\n * its mobile layout, and the actions an app puts here are its destructive ones.\n *\n * The rejected fix was to map the gesture onto keys — arrows nudging `dx`, a chord that\n * \"swipes\". That invents a private idiom with nothing to discover it by, and it makes\n * the keyboard imitate a touchscreen instead of doing the job the touchscreen is doing.\n * So each action is ALSO a real button, `sr-only` until it takes focus and then shown at\n * the row's trailing edge, firing the identical `onCommit`: one definition of what an\n * action is, two ways to reach it, and nothing to drift apart. `sr-only` hides from\n * the eye and not from the accessibility tree, so the row also ANNOUNCES what can be\n * done to it rather than keeping it behind a gesture nobody can hear.\n */\nexport function SwipeableRow({\n  right,\n  left,\n  enabled = true,\n  actionsLabel,\n  className,\n  children,\n}: SwipeableRowProps) {\n  const labels = useKitLabels(\"swipeableRow\", DEFAULT_SWIPEABLE_ROW_LABELS, {\n    actions: actionsLabel,\n  });\n  const rowRef = useRef<HTMLDivElement>(null);\n  const [rowWidth, setRowWidth] = useState(0);\n  useEffect(() => {\n    const el = rowRef.current;\n    if (!el) return;\n    setRowWidth(el.clientWidth);\n    if (typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver((entries) => {\n      for (const e of entries) setRowWidth(e.contentRect.width);\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const rightActions = right ?? [];\n  const leftActions = left ?? [];\n  const active = enabled && (rightActions.length > 0 || leftActions.length > 0);\n  // The whole row less a sliver, not half of it (feedback #174). `Math.max` keeps a\n  // very narrow row (or one measured before layout) from producing a zero or\n  // negative drag, which would arm every stage at once.\n  const maxDrag = rowWidth > 0 ? Math.max(96, Math.round(rowWidth - PEEK_PX)) : 200;\n  const spread = (actions: SwipeAction[]): SwipeStage[] =>\n    actions.map((a, i) => ({\n      threshold: Math.round((maxDrag * (i + 1)) / (actions.length + 1)),\n      onCommit: a.onCommit,\n    }));\n\n  const swipe = useRowSwipe({\n    enabled: active,\n    rightStages: spread(rightActions),\n    leftStages: spread(leftActions),\n    maxDrag,\n  });\n\n  // A haptic tick per newly armed threshold, so each stage is felt and not only seen.\n  const armedNow = swipe.dx >= 0 ? swipe.armedRightIndex : swipe.armedLeftIndex;\n  const prevArmed = useRef(-1);\n  useEffect(() => {\n    if (armedNow > prevArmed.current && armedNow >= 0) navigator.vibrate?.(12);\n    prevArmed.current = armedNow;\n  }, [armedNow]);\n\n  // Index -1 (nothing armed yet) still previews the nearest action, idle-coloured.\n  const dx = swipe.dx;\n  // Only the side being dragged toward is painted, which is what makes a full-width\n  // panel safe.\n  //\n  // The side has to SURVIVE the release, though, and that is what this ref is for\n  // (Keksdose feedback dev#467): *\"Swiping a category to the left with no option — if\n  // letting it go it gets, for the way back, the background color of the opposite\n  // swipe direction where there should be no color change at all.\"* On release dx\n  // snaps to 0 while the row itself slides back over 150ms, so a plain `dx < 0` read\n  // \"right\" for exactly the frames where the left side was still uncovered — and\n  // painted the RIGHT action's colour into the gap. With no left action at all that\n  // colour was the only thing the gesture ever showed.\n  //\n  // Adjusted during render rather than in an effect: an effect would repaint a frame\n  // later (visibly, at 150ms). State set while rendering re-renders this component\n  // before anything is committed, so the released frame already has the right side.\n  const [lastSide, setLastSide] = useState<\"left\" | \"right\">(\"right\");\n  const side = dx === 0 ? null : dx < 0 ? \"left\" : \"right\";\n  if (side && side !== lastSide) setLastSide(side);\n  const draggingLeft = side ? side === \"left\" : lastSide === \"left\";\n  const shown = draggingLeft\n    ? leftActions[Math.max(0, swipe.armedLeftIndex)]\n    : rightActions[Math.max(0, swipe.armedRightIndex)];\n  const armed = draggingLeft ? swipe.armedLeftIndex >= 0 : swipe.armedRightIndex >= 0;\n  const look = shown ? panelLook(shown, armed) : null;\n\n  return (\n    <div ref={rowRef} className={cn(\"relative overflow-hidden\", className)}>\n      {/* The card under the panel. A dark theme's washes are translucent, and a tone's\n          idle pair is measured as that wash ON the card — so the card is there, whatever\n          the row happens to sit in. */}\n      {active && shown && <div aria-hidden className=\"pointer-events-none absolute inset-0 bg-surface\" />}\n      {active && shown && look && (\n        <div\n          className={cn(\n            \"pointer-events-none absolute inset-0 flex items-center gap-2 px-4\",\n            \"text-xs font-medium transition-all\",\n            look.className,\n            // The old path only: dimmed until the drag has passed a threshold. A tone\n            // or a paint says it with the soft→solid step instead, which keeps its\n            // label readable at both ends.\n            look.dim && \"opacity-60\",\n            // The panel is anchored to the edge the row is uncovering, so the label\n            // sits where the eye already is rather than across the screen. That edge is\n            // physical, while a flex row starts at the INLINE start — so in RTL the two\n            // directions swap, or the label sat under the row on the covered side.\n            draggingLeft ? \"flex-row-reverse rtl:flex-row\" : \"rtl:flex-row-reverse\",\n          )}\n          style={look.style}\n        >\n          {shown.icon && (\n            <span\n              className={cn(\n                \"flex shrink-0 items-center justify-center rounded-full transition-all\",\n                // Armed, the icon gets a disc of its own and grows — a second,\n                // non-colour signal, and the one that stays readable at a glance. In\n                // the label's own colour (0.33): a white disc vanished on a dark\n                // theme's pastel fill, and the label's colour works on every pair.\n                armed ? \"size-8 scale-110 bg-current/20\" : \"size-7 bg-current/10\",\n              )}\n            >\n              {shown.icon}\n            </span>\n          )}\n          <span className={cn(\"truncate transition-all\", armed && \"text-sm font-semibold\")}>\n            {shown.label}\n          </span>\n        </div>\n      )}\n      <div\n        // Capture phase: the row's own click handler lives on a DESCENDANT, so a\n        // bubble-phase listener here would run after it — too late to suppress.\n        onClickCapture={(e) => {\n          if (!swipe.consumeClick()) return;\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        className={cn(\n          \"relative bg-surface\",\n          // A mouse drag is a supported way to swipe (use-row-swipe gates only on\n          // the button, not the pointer type), and a horizontal mouse drag over\n          // text also SELECTS that text — so committing an action left the row\n          // highlighted blue. Suppressed only while dragging, so text in a row at\n          // rest stays selectable.\n          swipe.dragging ? \"select-none\" : \"transition-transform duration-150 motion-reduce:transition-none\",\n        )}\n        style={{\n          transform: dx !== 0 ? `translate3d(${dx}px,0,0)` : undefined,\n          touchAction: active ? \"pan-y\" : undefined,\n        }}\n        {...(active ? swipe.handlers : {})}\n      >\n        {children}\n      </div>\n      {active && (\n        <div\n          role=\"group\"\n          aria-label={labels.actions}\n          // OUTSIDE the sliding div on purpose: an action that travels with the row it\n          // acts on is a moving target, and the drag transform would carry it off the\n          // screen mid-gesture.\n          //\n          // `pointer-events-none` here, restored on a button only once it HAS focus: a\n          // sr-only button is clipped to nothing but is still a hit target, and this\n          // strip sits at the row's trailing edge — exactly where a drag toward the\n          // start begins.\n          //\n          // `end-0`/`pe-2`, not `right-0`/`pr-2`: in RTL the right edge is where the\n          // row's title starts, and a focused button there covered it.\n          // A gesture that silently failed to start because it landed on an invisible\n          // button is not a bug anyone would find by looking at the screen.\n          className=\"pointer-events-none absolute inset-y-0 end-0 z-10 flex items-center gap-1 pe-2\"\n        >\n          {/* Both sides, each still nearest-threshold first, so the tab order reads in\n              the order the gesture arms them. */}\n          {[...rightActions, ...leftActions].map((action, i) => (\n            <button\n              key={`${action.label}-${i}`}\n              type=\"button\"\n              onClick={action.onCommit}\n              className={cn(\n                \"sr-only whitespace-nowrap rounded-md border-subtle bg-surface text-xs font-medium text-primary shadow-sm\",\n                \"focus:not-sr-only focus:pointer-events-auto focus:inline-flex focus:items-center focus:gap-1.5\",\n                // The box's padding and border only once it shows (0.32.1, keksdose's\n                // 0.32 report). Unconditional, `px-2` and `border` beat `sr-only`'s\n                // `padding: 0` and `border-width: 0`, so the hidden button was a 1 px\n                // box with 2 × 0.5rem of padding round it: 26 px at Extra large, running\n                // past the row's end from the strip's start — invisible under its clip,\n                // but counted in the page's scroll width (§4: nothing overflows).\n                \"focus:border focus:px-2 focus:py-1\",\n                FOCUS_RING,\n              )}\n            >\n              {/* The label is the button's accessible name, so the caller's icon is\n                  decoration on top of it rather than a second reading of it. */}\n              {action.icon && (\n                <span aria-hidden=\"true\" className=\"[&_svg]:size-4\">\n                  {action.icon}\n                </span>\n              )}\n              {action.label}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAoS0B,cAElB,YAFkB;AApS1B,SAAS,WAAW,QAAQ,gBAAgB;AAE5C,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAE3B,SAAS,mBAAoC;AAC7C,SAAS,8BAA8B,oBAAoB;AAyFpD,MAAM,aAAiE;AAAA,EAC5E,OAAO,EAAE,MAAM,kCAAkC,OAAO,+BAA+B;AAAA,EACvF,SAAS,EAAE,MAAM,4BAA4B,OAAO,mCAAmC;AAAA,EACvF,SAAS,EAAE,MAAM,gCAAgC,OAAO,mCAAmC;AAAA,EAC3F,SAAS,EAAE,MAAM,gCAAgC,OAAO,mCAAmC;AAAA,EAC3F,QAAQ,EAAE,MAAM,8BAA8B,OAAO,iCAAiC;AAAA,EACtF,MAAM,EAAE,MAAM,0BAA0B,OAAO,6BAA6B;AAAA,EAC5E,QAAQ,EAAE,MAAM,+BAA+B,OAAO,0CAA0C;AAAA,EAChG,SAAS,EAAE,MAAM,+BAA+B,OAAO,2CAA2C;AAAA,EAClG,MAAM,EAAE,MAAM,kCAAkC,OAAO,qCAAqC;AAAA,EAC5F,QAAQ,EAAE,MAAM,sCAAsC,OAAO,yCAAyC;AAAA,EACtG,QAAQ,EAAE,MAAM,sCAAsC,OAAO,yCAAyC;AAAA,EACtG,MAAM,EAAE,MAAM,kCAAkC,OAAO,qCAAqC;AAAA,EAC5F,QAAQ,EAAE,MAAM,sCAAsC,OAAO,yCAAyC;AACxG;AAIA,MAAM,aAAa;AACnB,MAAM,cAAc;AAGpB,SAAS,UAAU,QAAqB,OAA4E;AAClH,MAAI,OAAO,KAAM,QAAO,EAAE,WAAW,WAAW,OAAO,IAAI,EAAE,QAAQ,UAAU,MAAM,GAAG,KAAK,MAAM;AACnG,MAAI,OAAO,OAAO;AAChB,WAAO;AAAA,MACL,WAAW,QAAQ,cAAc;AAAA,MACjC,OAAO;AAAA,QACL,sBAAsB,OAAO,MAAM;AAAA,QACnC,oBAAoB,OAAO,MAAM;AAAA,MACnC;AAAA,MACA,KAAK;AAAA,IACP;AAAA,EACF;AAEA,SAAO,EAAE,WAAW,GAAG,cAAc,QAAQ,OAAO,iBAAiB,OAAO,SAAS,GAAG,KAAK,CAAC,MAAM;AACtG;AA+BA,MAAM,UAAU;AA6CT,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,QAAM,SAAS,aAAa,gBAAgB,8BAA8B;AAAA,IACxE,SAAS;AAAA,EACX,CAAC;AACD,QAAM,SAAS,OAAuB,IAAI;AAC1C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,CAAC;AAC1C,YAAU,MAAM;AACd,UAAM,KAAK,OAAO;AAClB,QAAI,CAAC,GAAI;AACT,gBAAY,GAAG,WAAW;AAC1B,QAAI,OAAO,mBAAmB,YAAa;AAC3C,UAAM,KAAK,IAAI,eAAe,CAAC,YAAY;AACzC,iBAAW,KAAK,QAAS,aAAY,EAAE,YAAY,KAAK;AAAA,IAC1D,CAAC;AACD,OAAG,QAAQ,EAAE;AACb,WAAO,MAAM,GAAG,WAAW;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,QAAM,eAAe,SAAS,CAAC;AAC/B,QAAM,cAAc,QAAQ,CAAC;AAC7B,QAAM,SAAS,YAAY,aAAa,SAAS,KAAK,YAAY,SAAS;AAI3E,QAAM,UAAU,WAAW,IAAI,KAAK,IAAI,IAAI,KAAK,MAAM,WAAW,OAAO,CAAC,IAAI;AAC9E,QAAM,SAAS,CAAC,YACd,QAAQ,IAAI,CAAC,GAAG,OAAO;AAAA,IACrB,WAAW,KAAK,MAAO,WAAW,IAAI,MAAO,QAAQ,SAAS,EAAE;AAAA,IAChE,UAAU,EAAE;AAAA,EACd,EAAE;AAEJ,QAAM,QAAQ,YAAY;AAAA,IACxB,SAAS;AAAA,IACT,aAAa,OAAO,YAAY;AAAA,IAChC,YAAY,OAAO,WAAW;AAAA,IAC9B;AAAA,EACF,CAAC;AAGD,QAAM,WAAW,MAAM,MAAM,IAAI,MAAM,kBAAkB,MAAM;AAC/D,QAAM,YAAY,OAAO,EAAE;AAC3B,YAAU,MAAM;AACd,QAAI,WAAW,UAAU,WAAW,YAAY,EAAG,WAAU,UAAU,EAAE;AACzE,cAAU,UAAU;AAAA,EACtB,GAAG,CAAC,QAAQ,CAAC;AAGb,QAAM,KAAK,MAAM;AAgBjB,QAAM,CAAC,UAAU,WAAW,IAAI,SAA2B,OAAO;AAClE,QAAM,OAAO,OAAO,IAAI,OAAO,KAAK,IAAI,SAAS;AACjD,MAAI,QAAQ,SAAS,SAAU,aAAY,IAAI;AAC/C,QAAM,eAAe,OAAO,SAAS,SAAS,aAAa;AAC3D,QAAM,QAAQ,eACV,YAAY,KAAK,IAAI,GAAG,MAAM,cAAc,CAAC,IAC7C,aAAa,KAAK,IAAI,GAAG,MAAM,eAAe,CAAC;AACnD,QAAM,QAAQ,eAAe,MAAM,kBAAkB,IAAI,MAAM,mBAAmB;AAClF,QAAM,OAAO,QAAQ,UAAU,OAAO,KAAK,IAAI;AAE/C,SACE,qBAAC,SAAI,KAAK,QAAQ,WAAW,GAAG,4BAA4B,SAAS,GAIlE;AAAA,cAAU,SAAS,oBAAC,SAAI,eAAW,MAAC,WAAU,mDAAkD;AAAA,IAChG,UAAU,SAAS,QAClB;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,KAAK;AAAA;AAAA;AAAA;AAAA,UAIL,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,UAKZ,eAAe,kCAAkC;AAAA,QACnD;AAAA,QACA,OAAO,KAAK;AAAA,QAEX;AAAA,gBAAM,QACL;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKA,QAAQ,mCAAmC;AAAA,cAC7C;AAAA,cAEC,gBAAM;AAAA;AAAA,UACT;AAAA,UAEF,oBAAC,UAAK,WAAW,GAAG,2BAA2B,SAAS,uBAAuB,GAC5E,gBAAM,OACT;AAAA;AAAA;AAAA,IACF;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QAGC,gBAAgB,CAAC,MAAM;AACrB,cAAI,CAAC,MAAM,aAAa,EAAG;AAC3B,YAAE,eAAe;AACjB,YAAE,gBAAgB;AAAA,QACpB;AAAA,QACA,WAAW;AAAA,UACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMA,MAAM,WAAW,gBAAgB;AAAA,QACnC;AAAA,QACA,OAAO;AAAA,UACL,WAAW,OAAO,IAAI,eAAe,EAAE,YAAY;AAAA,UACnD,aAAa,SAAS,UAAU;AAAA,QAClC;AAAA,QACC,GAAI,SAAS,MAAM,WAAW,CAAC;AAAA,QAE/B;AAAA;AAAA,IACH;AAAA,IACC,UACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAY,OAAO;AAAA,QAcnB,WAAU;AAAA,QAIT,WAAC,GAAG,cAAc,GAAG,WAAW,EAAE,IAAI,CAAC,QAAQ,MAC9C;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,SAAS,OAAO;AAAA,YAChB,WAAW;AAAA,cACT;AAAA,cACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAOA;AAAA,cACA;AAAA,YACF;AAAA,YAIC;AAAA,qBAAO,QACN,oBAAC,UAAK,eAAY,QAAO,WAAU,kBAChC,iBAAO,MACV;AAAA,cAED,OAAO;AAAA;AAAA;AAAA,UAvBH,GAAG,OAAO,KAAK,IAAI,CAAC;AAAA,QAwB3B,CACD;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/swipeable-row.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport type { StatusDotTone } from \"./status-dot\";\nimport { useRowSwipe, type SwipeStage } from \"../hooks/use-row-swipe\";\nimport { DEFAULT_SWIPEABLE_ROW_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * What a swipe action's panel means — the vocabulary Chip, ProgressBar and StatusDot\n * already share, so a curtain can be \"the colour of the status it produces\" by name:\n * brand, neutral, success, warning, danger, info, income, expense, and the categorical\n * hues blue, indigo, purple, teal and orange.\n */\nexport type SwipeTone = StatusDotTone;\n\n/**\n * An app's own fill for a documented exception (0.33, docs/colour-roles-harmonization.md\n * §12.6) — a curtain that must be exactly its status pill's palette fill, or two\n * strengths of one tone. CSS colours or `var()`s, the same in both themes unless the app\n * passes a variable it declares per theme in its own stylesheet. The kit cannot measure\n * these, so the app's tests pin the pair.\n */\nexport interface SwipePaint {\n  /** The armed panel's fill; idle shows a 14 % wash of it on the card. */\n  fill: string;\n  /** The text and icon colour ON `fill`, armed. Idle text is the body ink. */\n  foreground: string;\n}\n\ninterface SwipeActionBase {\n  onCommit: () => void;\n  label: string;\n  /** Rendered inside the panel. Icons stay the consumer's choice — this package\n   *  ships no opinion about which icon set an app uses. */\n  icon?: ReactNode;\n}\n\n/**\n * One armed swipe action: what it does, and how the reveal panel presents it.\n *\n * The panel has two states. Before the first threshold is crossed it previews the\n * nearest action IDLE, so the user can see what a little more drag will do; crossing\n * the threshold ARMS it — \"let go and this fires\".\n *\n * **`tone`** (0.33) is how the kit paints it: idle, the tone's soft wash under the\n * tone's own text colour (`bg-danger-soft text-danger`, Chip's soft look, ≥ 4.5:1);\n * armed, the tone's solid fill under its `-contrast` foreground (≥ 5:1). The soft→solid\n * step is the signal. It replaces a panel dimmed to 60 % at idle, whose label sat at\n * 2.4–4.5:1 on the kit's own swipes, and a white label that was unreadable on every\n * dark-mode pastel.\n *\n * **`paint`** follows the same rule for an app's documented exception (see\n * {@link SwipePaint}). The old path, a `className` / `armedClassName` pair under a white\n * label and dimmed idle, was deprecated in 0.33 and removed in 0.35 (round 0.35 R1).\n */\nexport type SwipeAction = SwipeActionBase &\n  (\n    | {\n        /** The kit paints the panel: the tone's wash idle, its fill and `-contrast` armed. */\n        tone: SwipeTone;\n        paint?: never;\n      }\n    | {\n        /** A documented app exception: idle a 14 % wash of `fill` under the body ink,\n         *  armed `fill` under `foreground`. */\n        paint: SwipePaint;\n        tone?: never;\n      }\n  );\n\n/**\n * Each tone's panel, idle and armed. Literal class strings, because Tailwind finds a\n * class by reading the source. Idle is Chip's soft recipe for the tone (the money pair\n * takes Chip's soft money look, the well under the money colour; neutral the active\n * fill under the secondary ink); armed is the plain fill, not `-hover`, under the\n * fill's own foreground. Measured in every shipped preset by\n * theme/__tests__/tokens-css-audit.test.ts.\n */\nexport const SWIPE_TONE: Record<SwipeTone, { idle: string; armed: string }> = {\n  brand: { idle: \"bg-brand-soft text-brand-muted\", armed: \"bg-brand text-brand-contrast\" },\n  neutral: { idle: \"bg-active text-secondary\", armed: \"bg-neutral text-neutral-contrast\" },\n  success: { idle: \"bg-success-soft text-success\", armed: \"bg-success text-success-contrast\" },\n  warning: { idle: \"bg-warning-soft text-warning\", armed: \"bg-warning text-warning-contrast\" },\n  danger: { idle: \"bg-danger-soft text-danger\", armed: \"bg-danger text-danger-contrast\" },\n  info: { idle: \"bg-info-soft text-info\", armed: \"bg-info text-info-contrast\" },\n  income: { idle: \"bg-surface-2 text-money-pos\", armed: \"bg-money-pos text-money-income-contrast\" },\n  expense: { idle: \"bg-surface-2 text-money-neg\", armed: \"bg-money-neg text-money-expense-contrast\" },\n  blue: { idle: \"bg-hue-blue-soft text-hue-blue\", armed: \"bg-hue-blue text-hue-blue-contrast\" },\n  indigo: { idle: \"bg-hue-indigo-soft text-hue-indigo\", armed: \"bg-hue-indigo text-hue-indigo-contrast\" },\n  purple: { idle: \"bg-hue-purple-soft text-hue-purple\", armed: \"bg-hue-purple text-hue-purple-contrast\" },\n  teal: { idle: \"bg-hue-teal-soft text-hue-teal\", armed: \"bg-hue-teal text-hue-teal-contrast\" },\n  orange: { idle: \"bg-hue-orange-soft text-hue-orange\", armed: \"bg-hue-orange text-hue-orange-contrast\" },\n};\n\n/** `paint`'s two looks, from the two custom properties the panel carries inline. The\n *  idle wash is `--brand-bg`'s recipe (14 % of the fill into the card). */\nconst PAINT_IDLE = \"bg-[color-mix(in_oklab,var(--swipe-paint-fill)_14%,var(--bg-surface))] text-primary\";\nconst PAINT_ARMED = \"bg-[var(--swipe-paint-fill)] text-[var(--swipe-paint-fg)]\";\n\n/** The panel's colour classes and inline style for one action and state. */\nfunction panelLook(action: SwipeAction, armed: boolean): { className: string; style?: CSSProperties } {\n  if (action.tone) return { className: SWIPE_TONE[action.tone][armed ? \"armed\" : \"idle\"] };\n  return {\n    className: armed ? PAINT_ARMED : PAINT_IDLE,\n    style: {\n      \"--swipe-paint-fill\": action.paint.fill,\n      \"--swipe-paint-fg\": action.paint.foreground,\n    } as CSSProperties,\n  };\n}\n\n/**\n * `right`/`left` are PHYSICAL drag directions in every writing direction, and stay so on\n * purpose: a swipe is a movement of the finger across the glass, the gesture hook\n * measures it in screen pixels, and \"which way is destructive\" is an app decision that\n * RTL guidelines do not agree on. An app that wants mirrored actions in RTL swaps the\n * two arrays itself. What the component does mirror is everything it lays out: the\n * reveal panel's contents hug the physical edge being uncovered, and the keyboard\n * buttons sit at the row's logical END.\n */\nexport interface SwipeableRowProps {\n  /** Actions committed by dragging (physically) RIGHT, nearest threshold first. */\n  right?: SwipeAction[];\n  /** Actions committed by dragging (physically) LEFT, nearest threshold first. */\n  left?: SwipeAction[];\n  /** Turn the gesture off — an open editor, a pending mutation, a locked row. This\n   *  also withdraws the keyboard buttons below: a row that must not be acted on must\n   *  not be actionable by ANY input. */\n  enabled?: boolean;\n  /** Names the revealed action buttons as a set (\"Row actions\"), for a reader that\n   *  reaches the group before it reaches any one button. Default:\n   *  `swipeableRow.actions` from the {@link UiKitProvider}, else English. */\n  actionsLabel?: string;\n  className?: string;\n  children: ReactNode;\n}\n\n/** How much of the row stays on screen at full drag. A row that can be pulled\n *  entirely off its own track reads as already deleted, and there is nothing left to\n *  drag back; a sliver keeps the gesture reversible and the row identifiable. */\nconst PEEK_PX = 40;\n\n/**\n * A row whose horizontal drag reveals actions underneath it.\n *\n * The reveal panel spans the FULL row width (Keksdose feedback #174). It used to be\n * two half-width blocks side by side, which capped the drag at half the row so the\n * opposite panel could never be exposed — and on a row bound to three actions that\n * left ~55px between stages on a phone, close enough that the wrong one committed.\n * Only the side being dragged toward is painted now, so full width costs nothing:\n * at rest the content covers both anyway, and a drag only ever reveals one side.\n *\n * Thresholds are still not fixed pixel values — they are spread evenly across the\n * available drag, which is now the row width less a {@link PEEK_PX} sliver. A fixed\n * 72/150/228px ladder overshoots a narrow phone; a proportional one keeps every\n * action reachable and roughly doubles the room between them.\n *\n * **Whether the action will fire is stated three ways, not one** (feedback #174): the\n * panel goes from the tone's soft wash to its solid fill, the icon grows and gains a\n * filled disc, and the label turns bold — plus the existing haptic tick per newly armed\n * stage. A colour\n * shift alone is easy to miss mid-gesture, and it is invisible to anyone who cannot\n * distinguish the two tones.\n *\n * Clicks that follow a drag are swallowed in the capture phase: without that, a swipe\n * would also fire whatever click handler the row content carries (expanding it, opening\n * a dialog) on top of the action it just committed.\n *\n * ## The keyboard path is buttons, and deliberately not a typed gesture\n *\n * Every action here used to live exclusively inside a pointer drag — `onCommit` had no\n * other caller — so with a keyboard, with a screen reader, or on any input that cannot\n * express 120px of horizontal travel, the row's actions did not exist at all. That is\n * not a rough edge on a phone control: {@link DataTable} mounts this for every row of\n * its mobile layout, and the actions an app puts here are its destructive ones.\n *\n * The rejected fix was to map the gesture onto keys — arrows nudging `dx`, a chord that\n * \"swipes\". That invents a private idiom with nothing to discover it by, and it makes\n * the keyboard imitate a touchscreen instead of doing the job the touchscreen is doing.\n * So each action is ALSO a real button, `sr-only` until it takes focus and then shown at\n * the row's trailing edge, firing the identical `onCommit`: one definition of what an\n * action is, two ways to reach it, and nothing to drift apart. `sr-only` hides from\n * the eye and not from the accessibility tree, so the row also ANNOUNCES what can be\n * done to it rather than keeping it behind a gesture nobody can hear.\n */\nexport function SwipeableRow({\n  right,\n  left,\n  enabled = true,\n  actionsLabel,\n  className,\n  children,\n}: SwipeableRowProps) {\n  const labels = useKitLabels(\"swipeableRow\", DEFAULT_SWIPEABLE_ROW_LABELS, {\n    actions: actionsLabel,\n  });\n  const rowRef = useRef<HTMLDivElement>(null);\n  const [rowWidth, setRowWidth] = useState(0);\n  useEffect(() => {\n    const el = rowRef.current;\n    if (!el) return;\n    setRowWidth(el.clientWidth);\n    if (typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver((entries) => {\n      for (const e of entries) setRowWidth(e.contentRect.width);\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const rightActions = right ?? [];\n  const leftActions = left ?? [];\n  const active = enabled && (rightActions.length > 0 || leftActions.length > 0);\n  // The whole row less a sliver, not half of it (feedback #174). `Math.max` keeps a\n  // very narrow row (or one measured before layout) from producing a zero or\n  // negative drag, which would arm every stage at once.\n  const maxDrag = rowWidth > 0 ? Math.max(96, Math.round(rowWidth - PEEK_PX)) : 200;\n  const spread = (actions: SwipeAction[]): SwipeStage[] =>\n    actions.map((a, i) => ({\n      threshold: Math.round((maxDrag * (i + 1)) / (actions.length + 1)),\n      onCommit: a.onCommit,\n    }));\n\n  const swipe = useRowSwipe({\n    enabled: active,\n    rightStages: spread(rightActions),\n    leftStages: spread(leftActions),\n    maxDrag,\n  });\n\n  // A haptic tick per newly armed threshold, so each stage is felt and not only seen.\n  const armedNow = swipe.dx >= 0 ? swipe.armedRightIndex : swipe.armedLeftIndex;\n  const prevArmed = useRef(-1);\n  useEffect(() => {\n    if (armedNow > prevArmed.current && armedNow >= 0) navigator.vibrate?.(12);\n    prevArmed.current = armedNow;\n  }, [armedNow]);\n\n  // Index -1 (nothing armed yet) still previews the nearest action, idle-coloured.\n  const dx = swipe.dx;\n  // Only the side being dragged toward is painted, which is what makes a full-width\n  // panel safe.\n  //\n  // The side has to SURVIVE the release, though, and that is what this ref is for\n  // (Keksdose feedback dev#467): *\"Swiping a category to the left with no option — if\n  // letting it go it gets, for the way back, the background color of the opposite\n  // swipe direction where there should be no color change at all.\"* On release dx\n  // snaps to 0 while the row itself slides back over 150ms, so a plain `dx < 0` read\n  // \"right\" for exactly the frames where the left side was still uncovered — and\n  // painted the RIGHT action's colour into the gap. With no left action at all that\n  // colour was the only thing the gesture ever showed.\n  //\n  // Adjusted during render rather than in an effect: an effect would repaint a frame\n  // later (visibly, at 150ms). State set while rendering re-renders this component\n  // before anything is committed, so the released frame already has the right side.\n  const [lastSide, setLastSide] = useState<\"left\" | \"right\">(\"right\");\n  const side = dx === 0 ? null : dx < 0 ? \"left\" : \"right\";\n  if (side && side !== lastSide) setLastSide(side);\n  const draggingLeft = side ? side === \"left\" : lastSide === \"left\";\n  const shown = draggingLeft\n    ? leftActions[Math.max(0, swipe.armedLeftIndex)]\n    : rightActions[Math.max(0, swipe.armedRightIndex)];\n  const armed = draggingLeft ? swipe.armedLeftIndex >= 0 : swipe.armedRightIndex >= 0;\n  const look = shown ? panelLook(shown, armed) : null;\n\n  return (\n    <div ref={rowRef} className={cn(\"relative overflow-hidden\", className)}>\n      {/* The card under the panel. A dark theme's washes are translucent, and a tone's\n          idle pair is measured as that wash ON the card — so the card is there, whatever\n          the row happens to sit in. */}\n      {active && shown && <div aria-hidden className=\"pointer-events-none absolute inset-0 bg-surface\" />}\n      {active && shown && look && (\n        <div\n          className={cn(\n            \"pointer-events-none absolute inset-0 flex items-center gap-2 px-4\",\n            \"text-xs font-medium transition-all\",\n            // No dimming: a tone or a paint says \"not yet armed\" with the soft→solid\n            // step, which keeps its label readable at both ends (the 0.33 rule; the\n            // dimmed path went with `className` / `armedClassName` in 0.35).\n            look.className,\n            // The panel is anchored to the edge the row is uncovering, so the label\n            // sits where the eye already is rather than across the screen. That edge is\n            // physical, while a flex row starts at the INLINE start — so in RTL the two\n            // directions swap, or the label sat under the row on the covered side.\n            draggingLeft ? \"flex-row-reverse rtl:flex-row\" : \"rtl:flex-row-reverse\",\n          )}\n          style={look.style}\n        >\n          {shown.icon && (\n            <span\n              className={cn(\n                \"flex shrink-0 items-center justify-center rounded-full transition-all\",\n                // Armed, the icon gets a disc of its own and grows — a second,\n                // non-colour signal, and the one that stays readable at a glance. In\n                // the label's own colour (0.33): a white disc vanished on a dark\n                // theme's pastel fill, and the label's colour works on every pair.\n                armed ? \"size-8 scale-110 bg-current/20\" : \"size-7 bg-current/10\",\n              )}\n            >\n              {shown.icon}\n            </span>\n          )}\n          <span className={cn(\"truncate transition-all\", armed && \"text-sm font-semibold\")}>\n            {shown.label}\n          </span>\n        </div>\n      )}\n      <div\n        // Capture phase: the row's own click handler lives on a DESCENDANT, so a\n        // bubble-phase listener here would run after it — too late to suppress.\n        onClickCapture={(e) => {\n          if (!swipe.consumeClick()) return;\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        className={cn(\n          \"relative bg-surface\",\n          // A mouse drag is a supported way to swipe (use-row-swipe gates only on\n          // the button, not the pointer type), and a horizontal mouse drag over\n          // text also SELECTS that text — so committing an action left the row\n          // highlighted blue. Suppressed only while dragging, so text in a row at\n          // rest stays selectable.\n          swipe.dragging ? \"select-none\" : \"transition-transform duration-150 motion-reduce:transition-none\",\n        )}\n        style={{\n          transform: dx !== 0 ? `translate3d(${dx}px,0,0)` : undefined,\n          touchAction: active ? \"pan-y\" : undefined,\n        }}\n        {...(active ? swipe.handlers : {})}\n      >\n        {children}\n      </div>\n      {active && (\n        <div\n          role=\"group\"\n          aria-label={labels.actions}\n          // OUTSIDE the sliding div on purpose: an action that travels with the row it\n          // acts on is a moving target, and the drag transform would carry it off the\n          // screen mid-gesture.\n          //\n          // `pointer-events-none` here, restored on a button only once it HAS focus: a\n          // sr-only button is clipped to nothing but is still a hit target, and this\n          // strip sits at the row's trailing edge — exactly where a drag toward the\n          // start begins.\n          //\n          // `end-0`/`pe-2`, not `right-0`/`pr-2`: in RTL the right edge is where the\n          // row's title starts, and a focused button there covered it.\n          // A gesture that silently failed to start because it landed on an invisible\n          // button is not a bug anyone would find by looking at the screen.\n          className=\"pointer-events-none absolute inset-y-0 end-0 z-10 flex items-center gap-1 pe-2\"\n        >\n          {/* Both sides, each still nearest-threshold first, so the tab order reads in\n              the order the gesture arms them. */}\n          {[...rightActions, ...leftActions].map((action, i) => (\n            <button\n              key={`${action.label}-${i}`}\n              type=\"button\"\n              onClick={action.onCommit}\n              className={cn(\n                \"sr-only whitespace-nowrap rounded-md border-subtle bg-surface text-xs font-medium text-primary shadow-sm\",\n                \"focus:not-sr-only focus:pointer-events-auto focus:inline-flex focus:items-center focus:gap-1.5\",\n                // The box's padding and border only once it shows (0.32.1, keksdose's\n                // 0.32 report). Unconditional, `px-2` and `border` beat `sr-only`'s\n                // `padding: 0` and `border-width: 0`, so the hidden button was a 1 px\n                // box with 2 × 0.5rem of padding round it: 26 px at Extra large, running\n                // past the row's end from the strip's start — invisible under its clip,\n                // but counted in the page's scroll width (§4: nothing overflows).\n                \"focus:border focus:px-2 focus:py-1\",\n                FOCUS_RING,\n              )}\n            >\n              {/* The label is the button's accessible name, so the caller's icon is\n                  decoration on top of it rather than a second reading of it. */}\n              {action.icon && (\n                <span aria-hidden=\"true\" className=\"[&_svg]:size-4\">\n                  {action.icon}\n                </span>\n              )}\n              {action.label}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/tooltip.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { type ComponentPropsWithoutRef, type ReactNode, type Ref } from "react";
 import { type AnchorRect } from "../hooks/use-anchored-rect.js";
 /** The attribute that marks an element as a clipping container for {@link Tooltip}'s
  *  auto-portal, whatever its computed `overflow` — `<div data-clips>` or
@@ -67,6 +67,14 @@ export interface TooltipProps extends ComponentPropsWithoutRef<"span"> {
      */
     tap?: TooltipTap;
     children: ReactNode;
+    /**
+     * The trigger WRAPPER — the `<span>` the rest of the props go to, around the caller's
+     * child (round 0.35 R4, as Card and EmptyState took one in 0.34) — merged with its own
+     * ref, which the bubble is anchored to and dismissed by. Not the bubble: a portalled
+     * one exists only while it is up. On the empty-label branch there is no wrapper, so
+     * the ref stays `null` (see the ⚠️ above).
+     */
+    ref?: Ref<HTMLSpanElement>;
 }
 /**
  * Hover/focus label for a control.

package/dist/components/tooltip.js

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
   cloneElement,
   isValidElement,
+  useCallback,
   useEffect,
   useId,
   useLayoutEffect,
@@ -16,6 +17,7 @@ import { useAnchoredRect } from "../hooks/use-anchored-rect.js";
 import { viewportSize } from "../hooks/use-anchored-panel.js";
 import { dirOf } from "../lib/direction.js";
 import { hasClippingAncestor } from "../lib/clipping.js";
+import { assignRef } from "../lib/refs.js";
 import { CLIPS_ATTRIBUTE } from "../lib/clipping.js";
 function physicalSide(side, dir) {
   if (side === "start") return dir === "rtl" ? "right" : "left";
@@ -214,6 +216,17 @@ function useTooltipTrigger(triggerRef, tap, passed, onArm) {
   };
   return { open, dismissed, handlers };
 }
+function useTriggerRef(ref) {
+  const triggerRef = useRef(null);
+  const setTrigger = useCallback(
+    (el) => {
+      triggerRef.current = el;
+      assignRef(ref, el);
+    },
+    [ref]
+  );
+  return { triggerRef, setTrigger };
+}
 function InPlaceTooltip({
   label,
   side,
@@ -223,10 +236,11 @@ function InPlaceTooltip({
   lazy,
   tap,
   children,
+  ref,
   ...rest
 }) {
   const id = useId();
-  const triggerRef = useRef(null);
+  const { triggerRef, setTrigger } = useTriggerRef(ref);
   const [clipped, setClipped] = useState(false);
   const [dir, setDir] = useState("ltr");
   const { open, dismissed, handlers } = useTooltipTrigger(triggerRef, tap, rest, (el) => {
@@ -237,7 +251,7 @@ function InPlaceTooltip({
   const { shift, measuring } = useViewportClamp(bubbleRef, open && !clipped, side, label, dir);
   useLayoutEffect(() => {
     if (detect) setClipped(hasClippingAncestor(triggerRef.current));
-  }, [detect]);
+  }, [detect, triggerRef]);
   return (
     // No role for this span: its handlers track whether the bubble is up and activate
     // nothing; the caller's child is the interactive element, keeps its own handlers,
@@ -246,7 +260,7 @@ function InPlaceTooltip({
       "span",
       {
         ...rest,
-        ref: triggerRef,
+        ref: setTrigger,
         style: measuring ? { ...rest.style, overflow: "clip" } : rest.style,
         className: cn("relative inline-flex", !clipped && "group/tooltip", className),
         ...handlers,
@@ -397,9 +411,10 @@ function PortalTooltip({
   redact,
   tap,
   children,
+  ref,
   ...rest
 }) {
-  const triggerRef = useRef(null);
+  const { triggerRef, setTrigger } = useTriggerRef(ref);
   const [dir, setDir] = useState("ltr");
   const id = useId();
   const { open, handlers } = useTooltipTrigger(triggerRef, tap, rest, (el) => setDir(dirOf(el)));
@@ -408,7 +423,7 @@ function PortalTooltip({
       "span",
       {
         ...rest,
-        ref: triggerRef,
+        ref: setTrigger,
         className: cn("relative inline-flex", className),
         ...handlers,
         children: describedBy(children, open ? id : void 0)