@k2b/ui 0.32.0 → 0.33.0

package/dist/ssr/actions/FilterChip.js

@@ -1,18 +1,20 @@
 import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
-import { createComponent as _$createComponent } from "solid-js/web";
-import { ssr as _$ssr } from "solid-js/web";
 import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { ssr as _$ssr } from "solid-js/web";
 import { escape as _$escape } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
-var _tmpl$ = ["<i", " aria-hidden=\"true\"></i>"],
+var _tmpl$ = ["<span class=\"k2b-filter-chip__swatches\" aria-hidden=\"true\">", "</span>"],
   _tmpl$2 = ["<span class=\"k2b-filter-chip__label\">", "", "</span>"],
   _tmpl$3 = "<i class=\"ti ti-chevron-down k2b-filter-chip__chevron\" aria-hidden=\"true\"></i>",
-  _tmpl$4 = ["<span class=\"k2b-filter-chip__value\">: ", "", "", "</span>"],
-  _tmpl$5 = ["<span class=\"k2b-filter-chip__dot\" style=\"", "\" aria-hidden=\"true\"></span>"],
-  _tmpl$6 = ["<span class=\"k2b-filter-chip__label\">", "</span>"],
-  _tmpl$7 = ["<a", ">", "</a>"],
-  _tmpl$8 = ["<button type=\"button\"", "", ">", "</button>"];
-import { createMemo, Show } from "solid-js";
+  _tmpl$4 = ["<i", " aria-hidden=\"true\"></i>"],
+  _tmpl$5 = ["<span class=\"k2b-filter-chip__dot\" style=\"", "\"></span>"],
+  _tmpl$6 = ["<span class=\"k2b-filter-chip__value\">: ", "", "", "</span>"],
+  _tmpl$7 = ["<span class=\"k2b-filter-chip__dot\" style=\"", "\" aria-hidden=\"true\"></span>"],
+  _tmpl$8 = ["<span class=\"k2b-filter-chip__label\">", "</span>"],
+  _tmpl$9 = ["<a", ">", "</a>"],
+  _tmpl$0 = ["<button type=\"button\"", "", ">", "</button>"];
+import { createMemo, For, Show } from "solid-js";
 import { useUiMessages } from "../intl/messages";
 import Dropdown from "./Dropdown";
 import { useFilterMessages } from "./filter-messages";
@@ -61,6 +63,17 @@ export function FilterChip(props) {
   };
   const reset = () => emit(props.defaultValue ? [...props.defaultValue] : []);
   const showReset = () => hasDefault() && !atDefault() || !hasDefault() && props.value.length > 0;
+  const swatches = createMemo(() => props.swatches && !props.iconOnly ? selectedOptions().flatMap(option => option.color ? [option.color] : []).slice(0, 4) : []);
+  const onlyValue = value => {
+    const kept = props.value.filter(entry => !sectionByValue().get(entry)?.multiple);
+    emit([...kept, value]);
+  };
+  const toggleSection = section => {
+    const values = section.options.map(option => option.value);
+    const all = values.every(value => selected(value));
+    const others = props.value.filter(entry => !values.includes(entry));
+    emit(all ? others : [...others, ...values]);
+  };
   const optionItems = createMemo(() => {
     const result = [];
     for (const section of props.options) {
@@ -72,11 +85,34 @@ export function FilterChip(props) {
         closeOnSelect: false,
         color: option.color,
         icon: !section.multiple ? option.icon : undefined,
-        label: option.label
+        label: option.label,
+        trailing: option.trailing,
+        secondary: props.only && section.multiple ? {
+          label: filterMessages().only,
+          ariaLabel: filterMessages().onlyOption({
+            label: option.label
+          }),
+          action: () => onlyValue(option.value)
+        } : undefined
       }));
+      // Read when the row renders, so a change of the choice updates the label without rebuilding the rows.
+      const all = () => section.options.every(option => selected(option.value));
+      const sectionLabel = section.label;
+      const labelAction = section.toggleAll && section.multiple && sectionLabel && section.options.length > 0 ? {
+        get label() {
+          return all() ? filterMessages().none : filterMessages().all;
+        },
+        get ariaLabel() {
+          return (all() ? filterMessages().noneOf : filterMessages().allOf)({
+            label: sectionLabel
+          });
+        },
+        action: () => toggleSection(section)
+      } : undefined;
       if (section.label || section.layout) result.push({
         sectionLabel: section.label,
         layout: section.layout,
+        labelAction,
         items
       });else result.push(...items);
     }
@@ -135,7 +171,22 @@ export function FilterChip(props) {
           return triggerLabel();
         },
         get children() {
-          return [_$ssr(_tmpl$, _$ssrAttribute("class", _$escape(props.icon, true), false)), _$createComponent(Show, {
+          return [_$createComponent(Show, {
+            get when() {
+              return swatches().length > 0;
+            },
+            get fallback() {
+              return _$ssr(_tmpl$4, _$ssrAttribute("class", _$escape(props.icon, true), false));
+            },
+            get children() {
+              return _$ssr(_tmpl$, _$escape(_$createComponent(For, {
+                get each() {
+                  return swatches();
+                },
+                children: color => _$ssr(_tmpl$5, _$ssrStyleProperty("--k2b-filter-color:", _$escape(color, true)))
+              })));
+            }
+          }), _$createComponent(Show, {
             get when() {
               return !props.iconOnly;
             },
@@ -154,11 +205,11 @@ export function FilterChip(props) {
                     }
                   });
                 },
-                children: first => _$ssr(_tmpl$4, _$escape(_$createComponent(Show, {
+                children: first => _$ssr(_tmpl$6, _$escape(_$createComponent(Show, {
                   get when() {
                     return first().color;
                   },
-                  children: color => _$ssr(_tmpl$5, _$ssrStyleProperty("--k2b-filter-color:", _$escape(color(), true)))
+                  children: color => _$ssr(_tmpl$7, _$ssrStyleProperty("--k2b-filter-color:", _$escape(color(), true)))
                 })), _$escape(first().label), _$escape(_$createComponent(Show, {
                   get when() {
                     return props.value.length > 1;
@@ -181,17 +232,17 @@ export default FilterChip;
  * `aria-pressed`. Selection changes only colour and background, so neighbouring chips never move.
  */
 export function FilterToggle(props) {
-  const content = () => [_$ssr(_tmpl$, _$ssrAttribute("class", _$escape(props.icon, true), false)), _$ssr(_tmpl$6, _$escape(props.label))];
+  const content = () => [_$ssr(_tmpl$4, _$ssrAttribute("class", _$escape(props.icon, true), false)), _$ssr(_tmpl$8, _$escape(props.label))];
   const className = () => `k2b-filter-chip ${props.class ?? ""}`;
   return _$createComponent(Show, {
     get when() {
       return _$memo(() => props.href !== undefined)() && !props.disabled;
     },
     get fallback() {
-      return _$ssr(_tmpl$8, _$ssrAttribute("class", _$escape(className(), true), false) + _$ssrAttribute("data-active", props.active ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-pressed", _$escape(props.active, true), false) + _$ssrAttribute("title", _$escape(props.title, true), false), _$ssrAttribute("disabled", props.disabled, true), _$escape(content()));
+      return _$ssr(_tmpl$0, _$ssrAttribute("class", _$escape(className(), true), false) + _$ssrAttribute("data-active", props.active ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-pressed", _$escape(props.active, true), false) + _$ssrAttribute("title", _$escape(props.title, true), false), _$ssrAttribute("disabled", props.disabled, true), _$escape(content()));
     },
     get children() {
-      return _$ssr(_tmpl$7, _$ssrAttribute("class", _$escape(className(), true), false) + _$ssrAttribute("href", _$escape(props.href, true), false) + _$ssrAttribute("data-active", props.active ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-current", props.active ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("title", _$escape(props.title, true), false), _$escape(content()));
+      return _$ssr(_tmpl$9, _$ssrAttribute("class", _$escape(className(), true), false) + _$ssrAttribute("href", _$escape(props.href, true), false) + _$ssrAttribute("data-active", props.active ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-current", props.active ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("title", _$escape(props.title, true), false), _$escape(content()));
     }
   });
 }

package/dist/ssr/actions/FilterChip.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["actions/FilterChip.tsx"],"sourcesContent":["import { createMemo, type JSX, Show } from \"solid-js\";\nimport { useUiMessages } from \"../intl/messages\";\nimport type { ButtonVariant } from \"./Button\";\nimport Dropdown, { type DropdownItem } from \"./Dropdown\";\nimport { useFilterMessages } from \"./filter-messages\";\n\nexport type FilterChipOption = {\n  value: string;\n  label: string;\n  icon?: string;\n  color?: string;\n};\n\nexport type FilterChipSection = {\n  label?: string;\n  options: readonly FilterChipOption[];\n  multiple?: boolean;\n  /**\n   * `row` sets a few short single-select options side by side as one segmented row under its `label`. Selecting the\n   * chosen option again keeps it; give the row a value in `defaultValue` so Reset keeps a choice too.\n   */\n  layout?: \"row\";\n};\n\nexport type FilterChipProps = {\n  label: string;\n  icon: string;\n  options: readonly FilterChipSection[];\n  value: readonly string[];\n  onValueChange: (value: string[]) => void;\n  isActive?: boolean;\n  position?: \"bottom-left\" | \"bottom-right\";\n  defaultValue?: readonly string[];\n  iconOnly?: boolean;\n  /** Use a standard button appearance instead of the default filter field. */\n  variant?: ButtonVariant;\n  /**\n   * An active chip names its first value instead of a count: \"Tags: Customer\", \"Tags: Customer +2\". Use it for the\n   * chips of `AppWorkspace.Head`; pass only the filter's name as `label`. The chip then grows with its value.\n   */\n  showValue?: boolean;\n  disabled?: boolean;\n  class?: string;\n};\n\n/** Section-aware controlled filter with immediate single- and multi-select commits. */\nexport function FilterChip(props: FilterChipProps): JSX.Element {\n  const messages = useUiMessages();\n  const filterMessages = useFilterMessages();\n  const selectedValues = createMemo(() => new Set(props.value));\n  const selectedOptions = createMemo(() =>\n    props.options.flatMap((section) => section.options).filter((option) => selectedValues().has(option.value)),\n  );\n  const defaultValues = createMemo(() => new Set(props.defaultValue ?? []));\n  const sectionByValue = createMemo(() => {\n    const sections = new Map<string, FilterChipSection>();\n    for (const section of props.options) {\n      for (const option of section.options) sections.set(option.value, section);\n    }\n    return sections;\n  });\n  const hasDefault = () => (props.defaultValue?.length ?? 0) > 0;\n  const selected = (value: string) => selectedValues().has(value);\n  const active = () => props.isActive ?? props.value.length > 0;\n  const namedValue = () => (props.showValue && !props.iconOnly && active() ? selectedOptions()[0] : undefined);\n  const triggerLabel = () => {\n    const first = namedValue();\n    if (!first) return props.label;\n    return `${props.label}: ${first.label}${props.value.length > 1 ? ` +${props.value.length - 1}` : \"\"}`;\n  };\n  const atDefault = () => {\n    if (!props.defaultValue) return false;\n    const current = props.value;\n    return current.length === props.defaultValue.length && current.every((value) => defaultValues().has(value));\n  };\n  const emit = (value: string[]) => props.onValueChange(value);\n  const toggle = (value: string) => {\n    const section = sectionByValue().get(value);\n    if (!section) return;\n    const current = props.value;\n    if (section.multiple) {\n      emit(selected(value) ? current.filter((entry) => entry !== value) : [...current, value]);\n      return;\n    }\n    // A segmented row always keeps one choice, like a SegmentedControl.\n    if (section.layout === \"row\" && selected(value)) return;\n    const sectionValues = new Set(section.options.map((option) => option.value));\n    const otherValues = current.filter((entry) => !sectionValues.has(entry));\n    emit(selected(value) ? otherValues : [...otherValues, value]);\n  };\n  const reset = () => emit(props.defaultValue ? [...props.defaultValue] : []);\n  const showReset = () => (hasDefault() && !atDefault()) || (!hasDefault() && props.value.length > 0);\n  const optionItems = createMemo<DropdownItem[]>(() => {\n    const result: DropdownItem[] = [];\n    for (const section of props.options) {\n      const items = section.options.map((option) => ({\n        action: () => toggle(option.value),\n        checked: () => props.value.includes(option.value),\n        choice: section.multiple ? (\"checkbox\" as const) : (\"radio\" as const),\n        class: \"k2b-filter-chip__option\",\n        closeOnSelect: false,\n        color: option.color,\n        icon: !section.multiple ? option.icon : undefined,\n        label: option.label,\n      }));\n      if (section.label || section.layout) result.push({ sectionLabel: section.label, layout: section.layout, items });\n      else result.push(...items);\n    }\n    return result;\n  });\n  const items = createMemo<DropdownItem[]>(() => {\n    if (!showReset()) return optionItems();\n    return [\n      ...optionItems(),\n      {\n        sectionLabel: filterMessages().filterActions,\n        items: [\n          {\n            action: reset,\n            icon: hasDefault() ? \"ti ti-refresh\" : \"ti ti-x\",\n            label: hasDefault() ? messages().reset : messages().clear,\n            variant: \"danger\",\n          },\n        ],\n      },\n    ];\n  });\n\n  return (\n    <Dropdown.Root\n      disabled={props.disabled}\n      items={items()}\n      position={props.position ?? \"bottom-left\"}\n      menuClass=\"k2b-filter-chip__menu\"\n      label={props.label}\n    >\n      <Dropdown.Trigger\n        appearance={props.variant ? \"button\" : \"plain\"}\n        variant={props.variant}\n        iconOnly={props.iconOnly}\n        class={props.variant ? props.class : `k2b-filter-chip ${props.class ?? \"\"}`}\n        data-state={active() ? \"active\" : \"idle\"}\n        data-active={active() ? \"true\" : undefined}\n        data-icon-only={props.iconOnly ? \"true\" : undefined}\n        label={triggerLabel()}\n      >\n        <i class={props.icon} aria-hidden=\"true\" />\n        <Show when={!props.iconOnly}>\n          <span class=\"k2b-filter-chip__label\">\n            {props.label}\n            <Show when={namedValue()} fallback={<Show when={!hasDefault() && props.value.length > 0}>{` (${props.value.length})`}</Show>}>\n              {(first) => (\n                <span class=\"k2b-filter-chip__value\">\n                  :{\" \"}\n                  <Show when={first().color}>\n                    {(color) => <span class=\"k2b-filter-chip__dot\" style={{ \"--k2b-filter-color\": color() }} aria-hidden=\"true\" />}\n                  </Show>\n                  {first().label}\n                  <Show when={props.value.length > 1}>{` +${props.value.length - 1}`}</Show>\n                </span>\n              )}\n            </Show>\n          </span>\n          <i class=\"ti ti-chevron-down k2b-filter-chip__chevron\" aria-hidden=\"true\" />\n        </Show>\n      </Dropdown.Trigger>\n    </Dropdown.Root>\n  );\n}\n\nexport default FilterChip;\n\nexport type FilterToggleProps = {\n  label: JSX.Element;\n  icon: string;\n  /** Whether the filter is on. An active toggle carries the same tint as an active `FilterChip`. */\n  active: boolean;\n  /** Link to the URL with the filter switched. The link keeps working without JavaScript. */\n  href?: string;\n  onClick?: (event: MouseEvent) => void;\n  title?: string;\n  disabled?: boolean;\n  class?: string;\n};\n\n/**\n * One on/off filter in the chip look: a link marked `aria-current=\"true\"` while active, or a button with\n * `aria-pressed`. Selection changes only colour and background, so neighbouring chips never move.\n */\nexport function FilterToggle(props: FilterToggleProps): JSX.Element {\n  const content = () => (\n    <>\n      <i class={props.icon} aria-hidden=\"true\" />\n      <span class=\"k2b-filter-chip__label\">{props.label}</span>\n    </>\n  );\n  const className = () => `k2b-filter-chip ${props.class ?? \"\"}`;\n  return (\n    <Show\n      when={props.href !== undefined && !props.disabled}\n      fallback={\n        <button\n          type=\"button\"\n          class={className()}\n          data-active={props.active ? \"true\" : undefined}\n          aria-pressed={props.active}\n          title={props.title}\n          disabled={props.disabled}\n          onClick={(event) => props.onClick?.(event)}\n        >\n          {content()}\n        </button>\n      }\n    >\n      <a\n        class={className()}\n        href={props.href}\n        data-active={props.active ? \"true\" : undefined}\n        aria-current={props.active ? \"true\" : undefined}\n        title={props.title}\n        onClick={(event) => props.onClick?.(event)}\n      >\n        {content()}\n      </a>\n    </Show>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["actions/FilterChip.tsx"],"sourcesContent":["import { createMemo, For, type JSX, Show } from \"solid-js\";\nimport { useUiMessages } from \"../intl/messages\";\nimport type { ButtonVariant } from \"./Button\";\nimport Dropdown, { type DropdownItem } from \"./Dropdown\";\nimport { useFilterMessages } from \"./filter-messages\";\n\nexport type FilterChipOption = {\n  value: string;\n  label: string;\n  icon?: string;\n  color?: string;\n  /** Quiet trailing information about the option, such as a short note or a loading or warning icon with its own label. */\n  trailing?: JSX.Element;\n};\n\nexport type FilterChipSection = {\n  label?: string;\n  options: readonly FilterChipOption[];\n  multiple?: boolean;\n  /**\n   * `row` sets a few short single-select options side by side as one segmented row under its `label`. Selecting the\n   * chosen option again keeps it; give the row a value in `defaultValue` so Reset keeps a choice too.\n   */\n  layout?: \"row\";\n  /** A labelled `multiple` section offers \"All\" or, once all its options are chosen, \"None\" beside its label. */\n  toggleAll?: boolean;\n};\n\nexport type FilterChipProps = {\n  label: string;\n  icon: string;\n  options: readonly FilterChipSection[];\n  value: readonly string[];\n  onValueChange: (value: string[]) => void;\n  isActive?: boolean;\n  position?: \"bottom-left\" | \"bottom-right\";\n  defaultValue?: readonly string[];\n  iconOnly?: boolean;\n  /** Use a standard button appearance instead of the default filter field. */\n  variant?: ButtonVariant;\n  /**\n   * An active chip names its first value instead of a count: \"Tags: Customer\", \"Tags: Customer +2\". Use it for the\n   * chips of `AppWorkspace.Head`; pass only the filter's name as `label`. The chip then grows with its value.\n   */\n  showValue?: boolean;\n  /**\n   * Each option of a `multiple` section offers \"Only\" at the end of its row: it chooses that option alone among the\n   * `multiple` sections and keeps the choices of single-select sections.\n   */\n  only?: boolean;\n  /** The trigger shows the colors of the first four chosen options before its label, as a quiet hint of what is in view. */\n  swatches?: boolean;\n  disabled?: boolean;\n  class?: string;\n};\n\n/** Section-aware controlled filter with immediate single- and multi-select commits. */\nexport function FilterChip(props: FilterChipProps): JSX.Element {\n  const messages = useUiMessages();\n  const filterMessages = useFilterMessages();\n  const selectedValues = createMemo(() => new Set(props.value));\n  const selectedOptions = createMemo(() =>\n    props.options.flatMap((section) => section.options).filter((option) => selectedValues().has(option.value)),\n  );\n  const defaultValues = createMemo(() => new Set(props.defaultValue ?? []));\n  const sectionByValue = createMemo(() => {\n    const sections = new Map<string, FilterChipSection>();\n    for (const section of props.options) {\n      for (const option of section.options) sections.set(option.value, section);\n    }\n    return sections;\n  });\n  const hasDefault = () => (props.defaultValue?.length ?? 0) > 0;\n  const selected = (value: string) => selectedValues().has(value);\n  const active = () => props.isActive ?? props.value.length > 0;\n  const namedValue = () => (props.showValue && !props.iconOnly && active() ? selectedOptions()[0] : undefined);\n  const triggerLabel = () => {\n    const first = namedValue();\n    if (!first) return props.label;\n    return `${props.label}: ${first.label}${props.value.length > 1 ? ` +${props.value.length - 1}` : \"\"}`;\n  };\n  const atDefault = () => {\n    if (!props.defaultValue) return false;\n    const current = props.value;\n    return current.length === props.defaultValue.length && current.every((value) => defaultValues().has(value));\n  };\n  const emit = (value: string[]) => props.onValueChange(value);\n  const toggle = (value: string) => {\n    const section = sectionByValue().get(value);\n    if (!section) return;\n    const current = props.value;\n    if (section.multiple) {\n      emit(selected(value) ? current.filter((entry) => entry !== value) : [...current, value]);\n      return;\n    }\n    // A segmented row always keeps one choice, like a SegmentedControl.\n    if (section.layout === \"row\" && selected(value)) return;\n    const sectionValues = new Set(section.options.map((option) => option.value));\n    const otherValues = current.filter((entry) => !sectionValues.has(entry));\n    emit(selected(value) ? otherValues : [...otherValues, value]);\n  };\n  const reset = () => emit(props.defaultValue ? [...props.defaultValue] : []);\n  const showReset = () => (hasDefault() && !atDefault()) || (!hasDefault() && props.value.length > 0);\n  const swatches = createMemo(() =>\n    props.swatches && !props.iconOnly\n      ? selectedOptions()\n          .flatMap((option) => (option.color ? [option.color] : []))\n          .slice(0, 4)\n      : [],\n  );\n  const onlyValue = (value: string) => {\n    const kept = props.value.filter((entry) => !sectionByValue().get(entry)?.multiple);\n    emit([...kept, value]);\n  };\n  const toggleSection = (section: FilterChipSection) => {\n    const values = section.options.map((option) => option.value);\n    const all = values.every((value) => selected(value));\n    const others = props.value.filter((entry) => !values.includes(entry));\n    emit(all ? others : [...others, ...values]);\n  };\n  const optionItems = createMemo<DropdownItem[]>(() => {\n    const result: DropdownItem[] = [];\n    for (const section of props.options) {\n      const items = section.options.map((option) => ({\n        action: () => toggle(option.value),\n        checked: () => props.value.includes(option.value),\n        choice: section.multiple ? (\"checkbox\" as const) : (\"radio\" as const),\n        class: \"k2b-filter-chip__option\",\n        closeOnSelect: false,\n        color: option.color,\n        icon: !section.multiple ? option.icon : undefined,\n        label: option.label,\n        trailing: option.trailing,\n        secondary:\n          props.only && section.multiple\n            ? {\n                label: filterMessages().only,\n                ariaLabel: filterMessages().onlyOption({ label: option.label }),\n                action: () => onlyValue(option.value),\n              }\n            : undefined,\n      }));\n      // Read when the row renders, so a change of the choice updates the label without rebuilding the rows.\n      const all = () => section.options.every((option) => selected(option.value));\n      const sectionLabel = section.label;\n      const labelAction =\n        section.toggleAll && section.multiple && sectionLabel && section.options.length > 0\n          ? {\n              get label() {\n                return all() ? filterMessages().none : filterMessages().all;\n              },\n              get ariaLabel() {\n                return (all() ? filterMessages().noneOf : filterMessages().allOf)({ label: sectionLabel });\n              },\n              action: () => toggleSection(section),\n            }\n          : undefined;\n      if (section.label || section.layout) result.push({ sectionLabel: section.label, layout: section.layout, labelAction, items });\n      else result.push(...items);\n    }\n    return result;\n  });\n  const items = createMemo<DropdownItem[]>(() => {\n    if (!showReset()) return optionItems();\n    return [\n      ...optionItems(),\n      {\n        sectionLabel: filterMessages().filterActions,\n        items: [\n          {\n            action: reset,\n            icon: hasDefault() ? \"ti ti-refresh\" : \"ti ti-x\",\n            label: hasDefault() ? messages().reset : messages().clear,\n            variant: \"danger\",\n          },\n        ],\n      },\n    ];\n  });\n\n  return (\n    <Dropdown.Root\n      disabled={props.disabled}\n      items={items()}\n      position={props.position ?? \"bottom-left\"}\n      menuClass=\"k2b-filter-chip__menu\"\n      label={props.label}\n    >\n      <Dropdown.Trigger\n        appearance={props.variant ? \"button\" : \"plain\"}\n        variant={props.variant}\n        iconOnly={props.iconOnly}\n        class={props.variant ? props.class : `k2b-filter-chip ${props.class ?? \"\"}`}\n        data-state={active() ? \"active\" : \"idle\"}\n        data-active={active() ? \"true\" : undefined}\n        data-icon-only={props.iconOnly ? \"true\" : undefined}\n        label={triggerLabel()}\n      >\n        <Show when={swatches().length > 0} fallback={<i class={props.icon} aria-hidden=\"true\" />}>\n          <span class=\"k2b-filter-chip__swatches\" aria-hidden=\"true\">\n            <For each={swatches()}>{(color) => <span class=\"k2b-filter-chip__dot\" style={{ \"--k2b-filter-color\": color }} />}</For>\n          </span>\n        </Show>\n        <Show when={!props.iconOnly}>\n          <span class=\"k2b-filter-chip__label\">\n            {props.label}\n            <Show when={namedValue()} fallback={<Show when={!hasDefault() && props.value.length > 0}>{` (${props.value.length})`}</Show>}>\n              {(first) => (\n                <span class=\"k2b-filter-chip__value\">\n                  :{\" \"}\n                  <Show when={first().color}>\n                    {(color) => <span class=\"k2b-filter-chip__dot\" style={{ \"--k2b-filter-color\": color() }} aria-hidden=\"true\" />}\n                  </Show>\n                  {first().label}\n                  <Show when={props.value.length > 1}>{` +${props.value.length - 1}`}</Show>\n                </span>\n              )}\n            </Show>\n          </span>\n          <i class=\"ti ti-chevron-down k2b-filter-chip__chevron\" aria-hidden=\"true\" />\n        </Show>\n      </Dropdown.Trigger>\n    </Dropdown.Root>\n  );\n}\n\nexport default FilterChip;\n\nexport type FilterToggleProps = {\n  label: JSX.Element;\n  icon: string;\n  /** Whether the filter is on. An active toggle carries the same tint as an active `FilterChip`. */\n  active: boolean;\n  /** Link to the URL with the filter switched. The link keeps working without JavaScript. */\n  href?: string;\n  onClick?: (event: MouseEvent) => void;\n  title?: string;\n  disabled?: boolean;\n  class?: string;\n};\n\n/**\n * One on/off filter in the chip look: a link marked `aria-current=\"true\"` while active, or a button with\n * `aria-pressed`. Selection changes only colour and background, so neighbouring chips never move.\n */\nexport function FilterToggle(props: FilterToggleProps): JSX.Element {\n  const content = () => (\n    <>\n      <i class={props.icon} aria-hidden=\"true\" />\n      <span class=\"k2b-filter-chip__label\">{props.label}</span>\n    </>\n  );\n  const className = () => `k2b-filter-chip ${props.class ?? \"\"}`;\n  return (\n    <Show\n      when={props.href !== undefined && !props.disabled}\n      fallback={\n        <button\n          type=\"button\"\n          class={className()}\n          data-active={props.active ? \"true\" : undefined}\n          aria-pressed={props.active}\n          title={props.title}\n          disabled={props.disabled}\n          onClick={(event) => props.onClick?.(event)}\n        >\n          {content()}\n        </button>\n      }\n    >\n      <a\n        class={className()}\n        href={props.href}\n        data-active={props.active ? \"true\" : undefined}\n        aria-current={props.active ? \"true\" : undefined}\n        title={props.title}\n        onClick={(event) => props.onClick?.(event)}\n      >\n        {content()}\n      </a>\n    </Show>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/actions/filter-messages.js

@@ -6,12 +6,36 @@ const filterMessages = i18n.define({
     en: {
       filterActions: "Filter actions",
       filters: "Filters",
-      reset: "Reset"
+      reset: "Reset",
+      all: "All",
+      none: "None",
+      allOf: ({
+        label
+      }) => `Choose all of ${label}`,
+      noneOf: ({
+        label
+      }) => `Choose none of ${label}`,
+      only: "Only",
+      onlyOption: ({
+        label
+      }) => `Only ${label}`
     },
     de: {
       filterActions: "Filteraktionen",
       filters: "Filter",
-      reset: "Zurücksetzen"
+      reset: "Zurücksetzen",
+      all: "Alle",
+      none: "Keine",
+      allOf: ({
+        label
+      }) => `Alle aus ${label} wählen`,
+      noneOf: ({
+        label
+      }) => `Keine aus ${label} wählen`,
+      only: "Nur diese",
+      onlyOption: ({
+        label
+      }) => `Nur ${label}`
     }
   }
 });

package/dist/ssr/actions/filter-messages.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["actions/filter-messages.ts"],"sourcesContent":["import { i18n } from \"@k2b/stdlib\";\nimport { useLocale } from \"../intl/locale\";\n\nconst filterMessages = i18n.define({\n  baseLocale: \"en\",\n  messages: {\n    en: {\n      filterActions: \"Filter actions\",\n      filters: \"Filters\",\n      reset: \"Reset\",\n    },\n    de: {\n      filterActions: \"Filteraktionen\",\n      filters: \"Filter\",\n      reset: \"Zurücksetzen\",\n    },\n  },\n});\n\nexport type FilterMessages = ReturnType<(typeof filterMessages)[\"resolve\"]>[\"t\"];\n\n/** Resolved from the inherited render locale. */\nexport const useFilterMessages = (): (() => FilterMessages) => {\n  const locale = useLocale();\n  return () => filterMessages.resolve([locale()]).t;\n};\n\nexport const checkFilterMessages = () => filterMessages.check();\n"],"mappings":"AAAA,SAAS,IAAI,QAAQ,aAAa;AAClC,SAAS,SAAS,QAAQ,gBAAgB;AAE1C,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC;EACjC,UAAU,EAAE,IAAI;EAChB,QAAQ,EAAE;IACR,EAAE,EAAE;MACF,aAAa,EAAE,gBAAgB;MAC/B,OAAO,EAAE,SAAS;MAClB,KAAK,EAAE;IACT,CAAC;IACD,EAAE,EAAE;MACF,aAAa,EAAE,gBAAgB;MAC/B,OAAO,EAAE,QAAQ;MACjB,KAAK,EAAE;IACT;EACF;AACF,CAAC,CAAC;AAIF;AACA,OAAO,MAAM,iBAAiB,GAAG,MAA8B;EAC7D,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC;EAC1B,OAAO,MAAM,cAAc,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACnD,CAAC;AAED,OAAO,MAAM,mBAAmB,GAAG,MAAM,cAAc,CAAC,KAAK,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":[],"sources":["actions/filter-messages.ts"],"sourcesContent":["import { i18n } from \"@k2b/stdlib\";\nimport { useLocale } from \"../intl/locale\";\n\nconst filterMessages = i18n.define({\n  baseLocale: \"en\",\n  messages: {\n    en: {\n      filterActions: \"Filter actions\",\n      filters: \"Filters\",\n      reset: \"Reset\",\n      all: \"All\",\n      none: \"None\",\n      allOf: ({ label }: { label: string }) => `Choose all of ${label}`,\n      noneOf: ({ label }: { label: string }) => `Choose none of ${label}`,\n      only: \"Only\",\n      onlyOption: ({ label }: { label: string }) => `Only ${label}`,\n    },\n    de: {\n      filterActions: \"Filteraktionen\",\n      filters: \"Filter\",\n      reset: \"Zurücksetzen\",\n      all: \"Alle\",\n      none: \"Keine\",\n      allOf: ({ label }) => `Alle aus ${label} wählen`,\n      noneOf: ({ label }) => `Keine aus ${label} wählen`,\n      only: \"Nur diese\",\n      onlyOption: ({ label }) => `Nur ${label}`,\n    },\n  },\n});\n\nexport type FilterMessages = ReturnType<(typeof filterMessages)[\"resolve\"]>[\"t\"];\n\n/** Resolved from the inherited render locale. */\nexport const useFilterMessages = (): (() => FilterMessages) => {\n  const locale = useLocale();\n  return () => filterMessages.resolve([locale()]).t;\n};\n\nexport const checkFilterMessages = () => filterMessages.check();\n"],"mappings":"AAAA,SAAS,IAAI,QAAQ,aAAa;AAClC,SAAS,SAAS,QAAQ,gBAAgB;AAE1C,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC;EACjC,UAAU,EAAE,IAAI;EAChB,QAAQ,EAAE;IACR,EAAE,EAAE;MACF,aAAa,EAAE,gBAAgB;MAC/B,OAAO,EAAE,SAAS;MAClB,KAAK,EAAE,OAAO;MACd,GAAG,EAAE,KAAK;MACV,IAAI,EAAE,MAAM;MACZ,KAAK,EAAE,CAAC;QAAE;MAAyB,CAAC,KAAK,iBAAiB,KAAK,EAAE;MACjE,MAAM,EAAE,CAAC;QAAE;MAAyB,CAAC,KAAK,kBAAkB,KAAK,EAAE;MACnE,IAAI,EAAE,MAAM;MACZ,UAAU,EAAE,CAAC;QAAE;MAAyB,CAAC,KAAK,QAAQ,KAAK;IAC7D,CAAC;IACD,EAAE,EAAE;MACF,aAAa,EAAE,gBAAgB;MAC/B,OAAO,EAAE,QAAQ;MACjB,KAAK,EAAE,cAAc;MACrB,GAAG,EAAE,MAAM;MACX,IAAI,EAAE,OAAO;MACb,KAAK,EAAE,CAAC;QAAE;MAAM,CAAC,KAAK,YAAY,KAAK,SAAS;MAChD,MAAM,EAAE,CAAC;QAAE;MAAM,CAAC,KAAK,aAAa,KAAK,SAAS;MAClD,IAAI,EAAE,WAAW;MACjB,UAAU,EAAE,CAAC;QAAE;MAAM,CAAC,KAAK,OAAO,KAAK;IACzC;EACF;AACF,CAAC,CAAC;AAIF;AACA,OAAO,MAAM,iBAAiB,GAAG,MAA8B;EAC7D,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC;EAC1B,OAAO,MAAM,cAAc,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACnD,CAAC;AAED,OAAO,MAAM,mBAAmB,GAAG,MAAM,cAAc,CAAC,KAAK,CAAC,CAAC","ignoreList":[]}

package/dist/ssr/actions/menu-rows.js

@@ -1,15 +1,35 @@
 /**
- * Left and Right cycle through the segments of a row section; Up and Down leave it like any item. Returns whether
- * the key moved focus.
+ * Left and Right cycle through the segments of a row section, or between a row and its secondary action; Up and Down
+ * leave it like any item. Returns whether the key moved focus.
  */
 export const focusRowSegment = (items, key) => {
   if (key !== "ArrowLeft" && key !== "ArrowRight") return false;
   const active = document.activeElement;
-  const row = active?.closest(".k2b-dropdown__row");
+  const row = active?.closest(".k2b-dropdown__row, .k2b-dropdown__pair");
   if (!active || !row) return false;
   const segments = items.filter(item => row.contains(item));
   const next = segments.indexOf(active) + (key === "ArrowRight" ? 1 : -1);
   segments[(next + segments.length) % segments.length]?.focus();
   return true;
 };
+
+/**
+ * Moves Up, Down, Home, or End through the rows; a row's secondary action is no stop of its own there, so Down from
+ * it goes to the next row. Returns whether the key moved focus.
+ */
+export const focusMenuRow = (items, key) => {
+  if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(key)) return false;
+  const rows = items.filter(item => !item.classList.contains("k2b-dropdown__secondary"));
+  if (rows.length === 0) return true;
+  if (key === "Home" || key === "End") {
+    rows[key === "Home" ? 0 : rows.length - 1]?.focus();
+    return true;
+  }
+  const active = document.activeElement;
+  const own = active?.classList.contains("k2b-dropdown__secondary") ? active.closest(".k2b-dropdown__pair")?.querySelector("[role^='menuitem']") : active;
+  const current = own ? rows.indexOf(own) : -1;
+  const next = current === -1 ? key === "ArrowDown" ? 0 : rows.length - 1 : current + (key === "ArrowDown" ? 1 : -1);
+  rows[(next + rows.length) % rows.length]?.focus();
+  return true;
+};
 //# sourceMappingURL=menu-rows.js.map

package/dist/ssr/actions/menu-rows.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["actions/menu-rows.ts"],"sourcesContent":["/**\n * Left and Right cycle through the segments of a row section; Up and Down leave it like any item. Returns whether\n * the key moved focus.\n */\nexport const focusRowSegment = (items: HTMLElement[], key: string): boolean => {\n  if (key !== \"ArrowLeft\" && key !== \"ArrowRight\") return false;\n  const active = document.activeElement as HTMLElement | null;\n  const row = active?.closest(\".k2b-dropdown__row\");\n  if (!active || !row) return false;\n  const segments = items.filter((item) => row.contains(item));\n  const next = segments.indexOf(active) + (key === \"ArrowRight\" ? 1 : -1);\n  segments[(next + segments.length) % segments.length]?.focus();\n  return true;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA,OAAO,MAAM,eAAe,GAAG,CAAC,KAAoB,EAAE,GAAW,KAAc;EAC7E,IAAI,GAAG,KAAK,WAAW,IAAI,GAAG,KAAK,YAAY,EAAE,OAAO,KAAK;EAC7D,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAmC;EAC3D,MAAM,GAAG,GAAG,MAAM,EAAE,OAAO,CAAC,oBAAoB,CAAC;EACjD,IAAI,CAAC,MAAM,IAAI,CAAC,GAAG,EAAE,OAAO,KAAK;EACjC,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAE,IAAI,IAAK,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;EAC3D,MAAM,IAAI,GAAG,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,GAAG,KAAK,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;EACvE,QAAQ,CAAC,CAAC,IAAI,GAAG,QAAQ,CAAC,MAAM,IAAI,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,CAAC;EAC7D,OAAO,IAAI;AACb,CAAC","ignoreList":[]}
+{"version":3,"names":[],"sources":["actions/menu-rows.ts"],"sourcesContent":["/**\n * Left and Right cycle through the segments of a row section, or between a row and its secondary action; Up and Down\n * leave it like any item. Returns whether the key moved focus.\n */\nexport const focusRowSegment = (items: HTMLElement[], key: string): boolean => {\n  if (key !== \"ArrowLeft\" && key !== \"ArrowRight\") return false;\n  const active = document.activeElement as HTMLElement | null;\n  const row = active?.closest(\".k2b-dropdown__row, .k2b-dropdown__pair\");\n  if (!active || !row) return false;\n  const segments = items.filter((item) => row.contains(item));\n  const next = segments.indexOf(active) + (key === \"ArrowRight\" ? 1 : -1);\n  segments[(next + segments.length) % segments.length]?.focus();\n  return true;\n};\n\n/**\n * Moves Up, Down, Home, or End through the rows; a row's secondary action is no stop of its own there, so Down from\n * it goes to the next row. Returns whether the key moved focus.\n */\nexport const focusMenuRow = (items: HTMLElement[], key: string): boolean => {\n  if (![\"ArrowDown\", \"ArrowUp\", \"Home\", \"End\"].includes(key)) return false;\n  const rows = items.filter((item) => !item.classList.contains(\"k2b-dropdown__secondary\"));\n  if (rows.length === 0) return true;\n  if (key === \"Home\" || key === \"End\") {\n    rows[key === \"Home\" ? 0 : rows.length - 1]?.focus();\n    return true;\n  }\n  const active = document.activeElement as HTMLElement | null;\n  const own = active?.classList.contains(\"k2b-dropdown__secondary\")\n    ? active.closest(\".k2b-dropdown__pair\")?.querySelector<HTMLElement>(\"[role^='menuitem']\")\n    : active;\n  const current = own ? rows.indexOf(own) : -1;\n  const next = current === -1 ? (key === \"ArrowDown\" ? 0 : rows.length - 1) : current + (key === \"ArrowDown\" ? 1 : -1);\n  rows[(next + rows.length) % rows.length]?.focus();\n  return true;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA,OAAO,MAAM,eAAe,GAAG,CAAC,KAAoB,EAAE,GAAW,KAAc;EAC7E,IAAI,GAAG,KAAK,WAAW,IAAI,GAAG,KAAK,YAAY,EAAE,OAAO,KAAK;EAC7D,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAmC;EAC3D,MAAM,GAAG,GAAG,MAAM,EAAE,OAAO,CAAC,yCAAyC,CAAC;EACtE,IAAI,CAAC,MAAM,IAAI,CAAC,GAAG,EAAE,OAAO,KAAK;EACjC,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAE,IAAI,IAAK,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;EAC3D,MAAM,IAAI,GAAG,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,GAAG,KAAK,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;EACvE,QAAQ,CAAC,CAAC,IAAI,GAAG,QAAQ,CAAC,MAAM,IAAI,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,CAAC;EAC7D,OAAO,IAAI;AACb,CAAC;;AAED;AACA;AACA;AACA;AACA,OAAO,MAAM,YAAY,GAAG,CAAC,KAAoB,EAAE,GAAW,KAAc;EAC1E,IAAI,CAAC,CAAC,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,OAAO,KAAK;EACxE,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAE,IAAI,IAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,yBAAyB,CAAC,CAAC;EACxF,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,OAAO,IAAI;EAClC,IAAI,GAAG,KAAK,MAAM,IAAI,GAAG,KAAK,KAAK,EAAE;IACnC,IAAI,CAAC,GAAG,KAAK,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;IACnD,OAAO,IAAI;EACb;EACA,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAmC;EAC3D,MAAM,GAAG,GAAG,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,yBAAyB,CAAC,GAC7D,MAAM,CAAC,OAAO,CAAC,qBAAqB,CAAC,EAAE,aAAa,CAAc,oBAAoB,CAAC,GACvF,MAAM;EACV,MAAM,OAAO,GAAG,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;EAC5C,MAAM,IAAI,GAAG,OAAO,KAAK,CAAC,CAAC,GAAI,GAAG,KAAK,WAAW,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,GAAI,OAAO,IAAI,GAAG,KAAK,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;EACpH,IAAI,CAAC,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,CAAC;EACjD,OAAO,IAAI;AACb,CAAC","ignoreList":[]}

package/dist/ssr/actions/menu-sheet.js

@@ -7,7 +7,7 @@ import { onCleanup, onMount } from "solid-js";
 import { dialogCore } from "../feedback/dialog-core";
 import { LocaleProvider } from "../intl/locale";
 import BottomSheet, { bottomSheetOptions } from "../layout/BottomSheet";
-import { focusRowSegment } from "./menu-rows";
+import { focusMenuRow, focusRowSegment } from "./menu-rows";
 
 /** Phones, where a menu opens as a bottom sheet instead of beside its trigger. */
 export const PHONE_SHEET_QUERY = "(max-width: 47.999rem)";
@@ -65,14 +65,9 @@ const menuItems = menu => Array.from(menu.querySelectorAll("[role^='menuitem']:n
  */
 function SheetMenu(props) {
   let menu;
-  const focus = index => {
-    const items = menuItems(menu);
-    items[(index + items.length) % items.length]?.focus();
-  };
   const onKeyDown = event => {
     const items = menuItems(menu);
-    const current = items.indexOf(document.activeElement);
-    if (event.key === "ArrowDown") focus(current + 1);else if (event.key === "ArrowUp") focus(current < 0 ? -1 : current - 1);else if (event.key === "Home" || event.key === "End") focus(event.key === "Home" ? 0 : -1);else if (!focusRowSegment(items, event.key)) return;
+    if (!focusMenuRow(items, event.key) && !focusRowSegment(items, event.key)) return;
     event.preventDefault();
   };
   // Keys pressed on the sheet itself, while it is the top level of the shared dialog.

package/dist/ssr/actions/menu-sheet.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["actions/menu-sheet.tsx"],"sourcesContent":["import { type JSX, onCleanup, onMount } from \"solid-js\";\nimport { dialogCore } from \"../feedback/dialog-core\";\nimport { LocaleProvider } from \"../intl/locale\";\nimport BottomSheet, { bottomSheetOptions } from \"../layout/BottomSheet\";\nimport type { DropdownAction, DropdownChoice, DropdownItem } from \"./Dropdown\";\nimport { focusRowSegment } from \"./menu-rows\";\n\n/** Phones, where a menu opens as a bottom sheet instead of beside its trigger. */\nexport const PHONE_SHEET_QUERY = \"(max-width: 47.999rem)\";\n\nexport const prefersMenuSheet = (): boolean => typeof matchMedia === \"function\" && matchMedia(PHONE_SHEET_QUERY).matches;\n\ntype SheetEntry = DropdownAction | DropdownChoice;\ntype SheetItem = SheetEntry | { items: readonly SheetEntry[] };\n\n/**\n * Follows a link the way a click on it would, so a page's own link handling, such as progressive navigation, still\n * applies; it runs only after the sheet has left the history.\n */\nconst followLink = (href: string) => {\n  const link = document.createElement(\"a\");\n  link.href = href;\n  link.hidden = true;\n  document.body.append(link);\n  link.click();\n  link.remove();\n};\n\n/**\n * The sheet's items hand their action to `run` instead of running it while the sheet closes: `dialogCore` settles the\n * sheet after it left the history, and only then may an action navigate or open the next dialog.\n * A choice or action that keeps the menu open, or an `immediate` action, runs at once.\n */\nconst afterClose = <T extends DropdownItem>(items: readonly T[], run: (action: () => void) => void): T[] => {\n  const entry = (item: SheetEntry): SheetEntry => {\n    // A plain link would navigate while the sheet's history entry is still being removed, and that Back could\n    // undo the navigation; a plain click instead follows it once the sheet is gone. Modified clicks and external\n    // links keep the browser's own behavior.\n    if (!item.action && \"href\" in item && item.href && !(\"external\" in item && item.external)) {\n      const href = item.href;\n      return { ...item, action: () => run(() => followLink(href)) } as SheetEntry;\n    }\n    const action = item.action;\n    if (!action || (\"closeOnSelect\" in item && item.closeOnSelect === false) || (\"immediate\" in item && item.immediate)) return item;\n    return { ...item, action: () => run(action) } as SheetEntry;\n  };\n  return items.map((item) => {\n    const sheetItem = item as SheetItem;\n    return (\"items\" in sheetItem ? { ...sheetItem, items: sheetItem.items.map(entry) } : entry(sheetItem)) as T;\n  });\n};\n\nconst menuItems = (menu: HTMLElement): HTMLElement[] =>\n  Array.from(menu.querySelectorAll<HTMLElement>(\"[role^='menuitem']:not([aria-disabled='true'])\"));\n\n/**\n * The menu inside the sheet: the same items, at touch size, with arrow keys for a connected keyboard. Focus starts on\n * the sheet itself, which shows no ring on a phone; the first arrow key moves it into the menu.\n */\nfunction SheetMenu(props: {\n  Items: MenuSheetOptions[\"Items\"];\n  items: readonly DropdownItem[];\n  label: string;\n  close: () => void;\n  dialog: HTMLDialogElement;\n}): JSX.Element {\n  let menu!: HTMLDivElement;\n  const focus = (index: number) => {\n    const items = menuItems(menu);\n    items[(index + items.length) % items.length]?.focus();\n  };\n  const onKeyDown = (event: KeyboardEvent) => {\n    const items = menuItems(menu);\n    const current = items.indexOf(document.activeElement as HTMLElement);\n    if (event.key === \"ArrowDown\") focus(current + 1);\n    else if (event.key === \"ArrowUp\") focus(current < 0 ? -1 : current - 1);\n    else if (event.key === \"Home\" || event.key === \"End\") focus(event.key === \"Home\" ? 0 : -1);\n    else if (!focusRowSegment(items, event.key)) return;\n    event.preventDefault();\n  };\n  // Keys pressed on the sheet itself, while it is the top level of the shared dialog.\n  const onSheetKeyDown = (event: KeyboardEvent) => {\n    if (event.target === props.dialog && props.dialog.lastElementChild?.contains(menu)) onKeyDown(event);\n  };\n  onMount(() => {\n    props.dialog.addEventListener(\"keydown\", onSheetKeyDown);\n    onCleanup(() => props.dialog.removeEventListener(\"keydown\", onSheetKeyDown));\n  });\n  return (\n    <div ref={menu} class=\"k2b-gesture-menu__sheet-menu\" role=\"menu\" aria-label={props.label} onKeyDown={onKeyDown}>\n      <props.Items items={props.items} close={() => props.close()} />\n    </div>\n  );\n}\n\nexport type MenuSheetOptions = {\n  /** Renders the rows: the dropdown's own `DropdownItems`, passed in so this module does not import it back. */\n  Items: (props: { items: readonly DropdownItem[]; close: (restoreFocus?: boolean) => void }) => JSX.Element;\n  items: readonly DropdownItem[];\n  /** Names the sheet and its menu. */\n  label: string;\n  /** The render locale of the opener; the sheet renders outside its tree. */\n  locale: string;\n  /** Shown above the menu, for example a row of quick reactions. `close` closes the sheet. */\n  top?: (close: () => void) => JSX.Element;\n  signal?: AbortSignal;\n};\n\n/** Opens menu items as a bottom sheet; resolves after the sheet closed and the chosen action ran. */\nexport const openMenuSheet = (options: MenuSheetOptions): Promise<void> => {\n  let chosen: (() => void) | undefined;\n  const choose = (action: () => void) => {\n    chosen = action;\n  };\n  return dialogCore\n    .open<void>(\n      (close, context) => (\n        <LocaleProvider locale={options.locale}>\n          <BottomSheet onDismiss={context.requestDismiss}>\n            <BottomSheet.Body>\n              {options.top?.(() => close())}\n              <SheetMenu\n                Items={options.Items}\n                items={afterClose(options.items, choose)}\n                label={options.label}\n                close={() => close()}\n                dialog={context.dialog}\n              />\n            </BottomSheet.Body>\n          </BottomSheet>\n        </LocaleProvider>\n      ),\n      { ...bottomSheetOptions, ariaLabel: options.label, history: true, signal: options.signal },\n    )\n    .then(() => chosen?.());\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["actions/menu-sheet.tsx"],"sourcesContent":["import { type JSX, onCleanup, onMount } from \"solid-js\";\nimport { dialogCore } from \"../feedback/dialog-core\";\nimport { LocaleProvider } from \"../intl/locale\";\nimport BottomSheet, { bottomSheetOptions } from \"../layout/BottomSheet\";\nimport type { DropdownAction, DropdownChoice, DropdownItem } from \"./Dropdown\";\nimport { focusMenuRow, focusRowSegment } from \"./menu-rows\";\n\n/** Phones, where a menu opens as a bottom sheet instead of beside its trigger. */\nexport const PHONE_SHEET_QUERY = \"(max-width: 47.999rem)\";\n\nexport const prefersMenuSheet = (): boolean => typeof matchMedia === \"function\" && matchMedia(PHONE_SHEET_QUERY).matches;\n\ntype SheetEntry = DropdownAction | DropdownChoice;\ntype SheetItem = SheetEntry | { items: readonly SheetEntry[] };\n\n/**\n * Follows a link the way a click on it would, so a page's own link handling, such as progressive navigation, still\n * applies; it runs only after the sheet has left the history.\n */\nconst followLink = (href: string) => {\n  const link = document.createElement(\"a\");\n  link.href = href;\n  link.hidden = true;\n  document.body.append(link);\n  link.click();\n  link.remove();\n};\n\n/**\n * The sheet's items hand their action to `run` instead of running it while the sheet closes: `dialogCore` settles the\n * sheet after it left the history, and only then may an action navigate or open the next dialog.\n * A choice or action that keeps the menu open, or an `immediate` action, runs at once.\n */\nconst afterClose = <T extends DropdownItem>(items: readonly T[], run: (action: () => void) => void): T[] => {\n  const entry = (item: SheetEntry): SheetEntry => {\n    // A plain link would navigate while the sheet's history entry is still being removed, and that Back could\n    // undo the navigation; a plain click instead follows it once the sheet is gone. Modified clicks and external\n    // links keep the browser's own behavior.\n    if (!item.action && \"href\" in item && item.href && !(\"external\" in item && item.external)) {\n      const href = item.href;\n      return { ...item, action: () => run(() => followLink(href)) } as SheetEntry;\n    }\n    const action = item.action;\n    if (!action || (\"closeOnSelect\" in item && item.closeOnSelect === false) || (\"immediate\" in item && item.immediate)) return item;\n    return { ...item, action: () => run(action) } as SheetEntry;\n  };\n  return items.map((item) => {\n    const sheetItem = item as SheetItem;\n    return (\"items\" in sheetItem ? { ...sheetItem, items: sheetItem.items.map(entry) } : entry(sheetItem)) as T;\n  });\n};\n\nconst menuItems = (menu: HTMLElement): HTMLElement[] =>\n  Array.from(menu.querySelectorAll<HTMLElement>(\"[role^='menuitem']:not([aria-disabled='true'])\"));\n\n/**\n * The menu inside the sheet: the same items, at touch size, with arrow keys for a connected keyboard. Focus starts on\n * the sheet itself, which shows no ring on a phone; the first arrow key moves it into the menu.\n */\nfunction SheetMenu(props: {\n  Items: MenuSheetOptions[\"Items\"];\n  items: readonly DropdownItem[];\n  label: string;\n  close: () => void;\n  dialog: HTMLDialogElement;\n}): JSX.Element {\n  let menu!: HTMLDivElement;\n  const onKeyDown = (event: KeyboardEvent) => {\n    const items = menuItems(menu);\n    if (!focusMenuRow(items, event.key) && !focusRowSegment(items, event.key)) return;\n    event.preventDefault();\n  };\n  // Keys pressed on the sheet itself, while it is the top level of the shared dialog.\n  const onSheetKeyDown = (event: KeyboardEvent) => {\n    if (event.target === props.dialog && props.dialog.lastElementChild?.contains(menu)) onKeyDown(event);\n  };\n  onMount(() => {\n    props.dialog.addEventListener(\"keydown\", onSheetKeyDown);\n    onCleanup(() => props.dialog.removeEventListener(\"keydown\", onSheetKeyDown));\n  });\n  return (\n    <div ref={menu} class=\"k2b-gesture-menu__sheet-menu\" role=\"menu\" aria-label={props.label} onKeyDown={onKeyDown}>\n      <props.Items items={props.items} close={() => props.close()} />\n    </div>\n  );\n}\n\nexport type MenuSheetOptions = {\n  /** Renders the rows: the dropdown's own `DropdownItems`, passed in so this module does not import it back. */\n  Items: (props: { items: readonly DropdownItem[]; close: (restoreFocus?: boolean) => void }) => JSX.Element;\n  items: readonly DropdownItem[];\n  /** Names the sheet and its menu. */\n  label: string;\n  /** The render locale of the opener; the sheet renders outside its tree. */\n  locale: string;\n  /** Shown above the menu, for example a row of quick reactions. `close` closes the sheet. */\n  top?: (close: () => void) => JSX.Element;\n  signal?: AbortSignal;\n};\n\n/** Opens menu items as a bottom sheet; resolves after the sheet closed and the chosen action ran. */\nexport const openMenuSheet = (options: MenuSheetOptions): Promise<void> => {\n  let chosen: (() => void) | undefined;\n  const choose = (action: () => void) => {\n    chosen = action;\n  };\n  return dialogCore\n    .open<void>(\n      (close, context) => (\n        <LocaleProvider locale={options.locale}>\n          <BottomSheet onDismiss={context.requestDismiss}>\n            <BottomSheet.Body>\n              {options.top?.(() => close())}\n              <SheetMenu\n                Items={options.Items}\n                items={afterClose(options.items, choose)}\n                label={options.label}\n                close={() => close()}\n                dialog={context.dialog}\n              />\n            </BottomSheet.Body>\n          </BottomSheet>\n        </LocaleProvider>\n      ),\n      { ...bottomSheetOptions, ariaLabel: options.label, history: true, signal: options.signal },\n    )\n    .then(() => chosen?.());\n};\n"],"mappings":"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","ignoreList":[]}