@k2b/ui 0.46.0 → 0.48.0

package/dist/browser/inputs/Combobox.js

@@ -89,7 +89,10 @@ export function Combobox(props) {
   };
   createEffect(on(options, list => {
     const index = props.autoHighlight;
-    if (index !== undefined && focusedIndex() < 0 && popover.open() && list.length > 0) setFocusedIndex(Math.min(index, list.length - 1));
+    if (index === undefined || focusedIndex() >= 0 || !popover.open() || list.length === 0) return;
+    // A result that cannot be picked is never the one Enter takes: the next one that can, or none.
+    const start = Math.min(index, list.length - 1);
+    setFocusedIndex(list[start]?.disabled ? nextEnabledChoiceIndex(list, start, 1) : start);
   }));
   createEffect(() => {
     if (props.readOnly) {
@@ -99,7 +102,7 @@ export function Combobox(props) {
     }
   });
   const select = option => {
-    if (props.disabled || props.readOnly) return;
+    if (props.disabled || props.readOnly || option.disabled) return;
     popover.hide();
     props.onSelect({
       id: option.value,
@@ -316,7 +319,9 @@ export function Combobox(props) {
               [_el$33, _co$7] = _$getNextMarker(_el$32.nextSibling);
             _el$29.$$click = () => select(option());
             _el$29.$$pointerdown = event => event.preventDefault();
-            _el$29.$$pointermove = () => focus(index());
+            _el$29.$$pointermove = () => {
+              if (!option().disabled) focus(index());
+            };
             _$use(element => optionRefs[index()] = element, _el$29);
             _$insert(_el$29, _$createComponent(Show, {
               get when() {
@@ -342,15 +347,18 @@ export function Combobox(props) {
             _$effect(_p$ => {
               var _v$ = `${listboxId}-${index()}`,
                 _v$2 = index() === focusedIndex(),
-                _v$3 = index() === focusedIndex() ? "true" : undefined;
+                _v$3 = option().disabled ? "true" : undefined,
+                _v$4 = index() === focusedIndex() ? "true" : undefined;
               _v$ !== _p$.e && _$setAttribute(_el$29, "id", _p$.e = _v$);
               _v$2 !== _p$.t && _$setAttribute(_el$29, "aria-selected", _p$.t = _v$2);
-              _v$3 !== _p$.a && _$setAttribute(_el$29, "data-focused", _p$.a = _v$3);
+              _v$3 !== _p$.a && _$setAttribute(_el$29, "aria-disabled", _p$.a = _v$3);
+              _v$4 !== _p$.o && _$setAttribute(_el$29, "data-focused", _p$.o = _v$4);
               return _p$;
             }, {
               e: undefined,
               t: undefined,
-              a: undefined
+              a: undefined,
+              o: undefined
             });
             _$runHydrationEvents();
             return _el$29;

package/dist/browser/inputs/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["inputs/Combobox.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, For, type JSX, on, Show } from \"solid-js\";\nimport { createFieldMeta, Field, fieldControlAria } from \"../internal/field\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { type ChoiceOption, createChoiceLoader, createChoicePopover, nextEnabledChoiceIndex } from \"./choice\";\nimport type { FieldProps, MaybeAccessor } from \"./field-contract\";\nimport { resolveMaybeAccessor } from \"./field-contract\";\nimport { useSelectMessages } from \"./select-messages\";\n\nexport type ComboboxOption = { id: string; label: string; description?: string; icon?: string };\nexport type ComboboxProps = FieldProps & {\n  readOnly?: boolean;\n  query?: MaybeAccessor<string>;\n  onQueryChange?: (query: string) => void;\n  placeholder?: string;\n  fetchData: (query: string, signal: AbortSignal) => Promise<ComboboxOption[]>;\n  onSelect: (option: ComboboxOption) => void;\n  debounceMs?: number;\n  /** The query is the field's own value: picking or closing keeps the typed text, and Enter without an active option only closes the list. */\n  freeText?: boolean;\n  /** Below this many characters nothing loads and the list stays closed. */\n  minQueryLength?: number;\n  /** This result (by position) is active as soon as results arrive, so Enter takes it. */\n  autoHighlight?: number;\n  /** Replaces the results with a host-owned notice, such as an exhausted quota; nothing loads while it is set. */\n  status?: JSX.Element;\n  /** Shown instead of the default text when a search finds nothing. */\n  empty?: JSX.Element;\n  /** One line under the results, such as their source. */\n  footer?: JSX.Element;\n};\n\nconst iconClass = (icon: string) => (icon.split(/\\s+/).includes(\"ti\") ? icon : `ti ${icon}`);\n\nexport function Combobox(props: ComboboxProps): JSX.Element {\n  const messages = useUiMessages();\n  const selectMessages = useSelectMessages();\n  const meta = createFieldMeta(props.id);\n  const listboxId = `${meta.controlId}-listbox`;\n  const [localQuery, setLocalQuery] = createSignal(\"\");\n  const query = () => resolveMaybeAccessor(props.query) ?? localQuery();\n  const setQuery = (value: string) => {\n    setLocalQuery(value);\n    props.onQueryChange?.(value);\n  };\n  const error = () => resolveMaybeAccessor(props.error);\n  const [focusedIndex, setFocusedIndex] = createSignal(-1);\n  let inputRef: HTMLInputElement | undefined;\n  let optionRefs: HTMLButtonElement[] = [];\n  const loader = createChoiceLoader(\n    () => async (value, signal) => (await props.fetchData(value, signal)).map((option) => ({ ...option, value: option.id })),\n    // Cloud debounces at 200ms and then pads the response with a 200ms minimum\n    // load time to stop the spinner flickering. The spinner here sits in the\n    // chevron slot and stale results stay visible, so there is nothing to pad —\n    // 150ms keeps typing responsive without hammering the loader.\n    () => props.debounceMs ?? 150,\n  );\n  const popover = createChoicePopover(() => Boolean(props.disabled || props.readOnly));\n  // A host notice or an error replaces the results; hidden results are never selectable.\n  const options = () => (props.status || loader.error() ? [] : loader.options());\n  const optionsById = createMemo(() => new Map(options().map((option) => [option.value, option])));\n  const focusedOption = () => options()[focusedIndex()];\n  const searchable = (value: string) => value.trim().length >= (props.minQueryLength ?? 0);\n  const focus = (index: number) => {\n    setFocusedIndex(index);\n    optionRefs[index]?.scrollIntoView({ block: \"nearest\" });\n  };\n  /** `eager` loads the currently controlled query on open; typing supplies its\n   *  own query, so opening from `onInput` skips the duplicate request. */\n  const open = (eager = true) => {\n    if (props.disabled || props.readOnly || popover.open() || !searchable(query())) return;\n    popover.show();\n    if (eager && !props.status) loader.load(query(), true);\n    focus(-1);\n  };\n  const reset = () => {\n    loader.cancel();\n    setQuery(\"\");\n    focus(-1);\n  };\n  const close = () => {\n    popover.hide();\n    if (!props.freeText) return reset();\n    loader.cancel();\n    focus(-1);\n  };\n  createEffect(\n    on(options, (list) => {\n      const index = props.autoHighlight;\n      if (index !== undefined && focusedIndex() < 0 && popover.open() && list.length > 0) setFocusedIndex(Math.min(index, list.length - 1));\n    }),\n  );\n  createEffect(() => {\n    if (props.readOnly) {\n      popover.hide();\n      loader.cancel();\n      setFocusedIndex(-1);\n    }\n  });\n  const select = (option: ChoiceOption<string>) => {\n    if (props.disabled || props.readOnly) return;\n    popover.hide();\n    props.onSelect({ id: option.value, label: option.label, description: option.description, icon: option.icon });\n    if (props.freeText) {\n      loader.cancel();\n      focus(-1);\n    } else reset();\n    inputRef?.focus();\n  };\n  const onKeyDown = (event: KeyboardEvent) => {\n    if (props.disabled || props.readOnly) return;\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n      event.preventDefault();\n      if (!popover.open()) open();\n      else focus(nextEnabledChoiceIndex(options(), focusedIndex(), event.key === \"ArrowDown\" ? 1 : -1));\n    } else if (event.key === \"Enter\" && popover.open()) {\n      // While the results are open, Enter belongs to them: it never submits an enclosing form, even with no option active.\n      event.preventDefault();\n      const option = options()[focusedIndex()];\n      if (option) select(option);\n      else if (props.freeText) close();\n    } else if ((event.key === \"Escape\" || event.key === \"Tab\") && popover.open()) {\n      // Escape is only ours while the list is open; otherwise it has to reach an\n      // enclosing dialog or drawer.\n      if (event.key === \"Escape\") event.preventDefault();\n      close();\n    }\n  };\n\n  return (\n    <Field\n      class={props.class}\n      label={props.label}\n      description={props.description}\n      error={error()}\n      meta={meta}\n      required={props.required}\n      disabled={props.disabled}\n    >\n      <div class=\"k2b-combobox\" data-invalid={error() ? \"true\" : undefined}>\n        <div ref={popover.setTrigger} class=\"k2b-combobox__input\">\n          <i class=\"ti ti-search\" aria-hidden=\"true\" />\n          {/* A click, typing, or an arrow key opens the list. Focus alone (Tab, a dialog's initial focus) does not, so Escape still closes the enclosing dialog. */}\n          <input\n            ref={(element) => {\n              inputRef = element;\n            }}\n            id={meta.controlId}\n            type=\"text\"\n            value={query()}\n            placeholder={props.placeholder ?? messages().search}\n            disabled={props.disabled}\n            readOnly={props.readOnly}\n            aria-readonly={props.readOnly ? \"true\" : undefined}\n            role=\"combobox\"\n            autocomplete=\"off\"\n            aria-autocomplete=\"list\"\n            aria-expanded={popover.open()}\n            aria-controls={listboxId}\n            aria-activedescendant={focusedOption() ? `${listboxId}-${focusedIndex()}` : undefined}\n            {...fieldControlAria(meta, props)}\n            onClick={() => open()}\n            onInput={(event) => {\n              if (props.disabled || props.readOnly) {\n                event.currentTarget.value = query();\n                return;\n              }\n              const value = event.currentTarget.value;\n              setQuery(value);\n              focus(-1);\n              if (!searchable(value)) {\n                popover.hide();\n                loader.cancel();\n                return;\n              }\n              open(false);\n              if (!props.status) loader.load(value);\n            }}\n            onKeyDown={onKeyDown}\n          />\n          <Show when={loader.loading()} fallback={<i class=\"ti ti-chevron-down\" aria-hidden=\"true\" />}>\n            <i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\" />\n          </Show>\n        </div>\n        <div ref={popover.setPopover} popover=\"manual\" class=\"k2b-choice-popover\">\n          <div class=\"k2b-choice-options\" role=\"listbox\" id={listboxId}>\n            <Show when={props.status}>{(status) => <div class=\"k2b-choice-status\">{status()}</div>}</Show>\n            <Show when={!props.status && loader.error()}>\n              {(message) => (\n                <div class=\"k2b-choice-status\" data-tone=\"danger\">\n                  <span>{message()}</span>\n                  <button type=\"button\" onClick={loader.retry}>\n                    {messages().retry}\n                  </button>\n                </div>\n              )}\n            </Show>\n            {/* Keyed by option ID, not object: each fetch returns new objects, and a row replaced between press and release\n                would swallow the click. */}\n            <For\n              each={options().map((option) => option.value)}\n              fallback={\n                <Show when={!props.status && !loader.error()}>\n                  <Show\n                    when={loader.loading()}\n                    fallback={\n                      <div class=\"k2b-choice-status\">\n                        {query().length >= 2 ? (props.empty ?? selectMessages().noResultsFound) : selectMessages().typeToSearch}\n                      </div>\n                    }\n                  >\n                    {/* The first search has nothing to keep visible yet: rows of the final size wait in its place. */}\n                    <div class=\"k2b-choice-loading\" role=\"status\">\n                      <span class=\"k2b-sr-only\">{messages().loading}</span>\n                      <For each={[62, 48, 55]}>\n                        {(width) => (\n                          <div class=\"k2b-choice-loading__row\" aria-hidden=\"true\">\n                            <span class=\"k2b-skeleton\" />\n                            <span class=\"k2b-skeleton\" style={{ width: `${width}%` }} />\n                          </div>\n                        )}\n                      </For>\n                    </div>\n                  </Show>\n                </Show>\n              }\n            >\n              {(id, index) => {\n                const first = optionsById().get(id)!;\n                const option = () => optionsById().get(id) ?? first;\n                return (\n                  <button\n                    ref={(element) => (optionRefs[index()] = element)}\n                    type=\"button\"\n                    id={`${listboxId}-${index()}`}\n                    class=\"k2b-choice-option\"\n                    role=\"option\"\n                    aria-selected={index() === focusedIndex()}\n                    data-focused={index() === focusedIndex() ? \"true\" : undefined}\n                    onPointerMove={() => focus(index())}\n                    onPointerDown={(event) => event.preventDefault()}\n                    onClick={() => select(option())}\n                  >\n                    <Show when={option().icon}>{(icon) => <i class={iconClass(icon())} aria-hidden=\"true\" />}</Show>\n                    <span>\n                      <strong>{option().label}</strong>\n                      <Show when={option().description}>{(description) => <small>{description()}</small>}</Show>\n                    </span>\n                  </button>\n                );\n              }}\n            </For>\n          </div>\n          <Show when={props.footer}>{(footer) => <div class=\"k2b-choice-footer\">{footer()}</div>}</Show>\n        </div>\n      </div>\n    </Field>\n  );\n}\n\nexport default Combobox;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["inputs/Combobox.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, For, type JSX, on, Show } from \"solid-js\";\nimport { createFieldMeta, Field, fieldControlAria } from \"../internal/field\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { type ChoiceOption, createChoiceLoader, createChoicePopover, nextEnabledChoiceIndex } from \"./choice\";\nimport type { FieldProps, MaybeAccessor } from \"./field-contract\";\nimport { resolveMaybeAccessor } from \"./field-contract\";\nimport { useSelectMessages } from \"./select-messages\";\n\nexport type ComboboxOption = {\n  id: string;\n  label: string;\n  description?: string;\n  icon?: string;\n  /** Shown but cannot be picked, such as someone who is already on the list; say why in `description`. */\n  disabled?: boolean;\n};\nexport type ComboboxProps = FieldProps & {\n  readOnly?: boolean;\n  query?: MaybeAccessor<string>;\n  onQueryChange?: (query: string) => void;\n  placeholder?: string;\n  fetchData: (query: string, signal: AbortSignal) => Promise<ComboboxOption[]>;\n  onSelect: (option: ComboboxOption) => void;\n  debounceMs?: number;\n  /** The query is the field's own value: picking or closing keeps the typed text, and Enter without an active option only closes the list. */\n  freeText?: boolean;\n  /** Below this many characters nothing loads and the list stays closed. */\n  minQueryLength?: number;\n  /** This result (by position) is active as soon as results arrive, so Enter takes it. */\n  autoHighlight?: number;\n  /** Replaces the results with a host-owned notice, such as an exhausted quota; nothing loads while it is set. */\n  status?: JSX.Element;\n  /** Shown instead of the default text when a search finds nothing. */\n  empty?: JSX.Element;\n  /** One line under the results, such as their source. */\n  footer?: JSX.Element;\n};\n\nconst iconClass = (icon: string) => (icon.split(/\\s+/).includes(\"ti\") ? icon : `ti ${icon}`);\n\nexport function Combobox(props: ComboboxProps): JSX.Element {\n  const messages = useUiMessages();\n  const selectMessages = useSelectMessages();\n  const meta = createFieldMeta(props.id);\n  const listboxId = `${meta.controlId}-listbox`;\n  const [localQuery, setLocalQuery] = createSignal(\"\");\n  const query = () => resolveMaybeAccessor(props.query) ?? localQuery();\n  const setQuery = (value: string) => {\n    setLocalQuery(value);\n    props.onQueryChange?.(value);\n  };\n  const error = () => resolveMaybeAccessor(props.error);\n  const [focusedIndex, setFocusedIndex] = createSignal(-1);\n  let inputRef: HTMLInputElement | undefined;\n  let optionRefs: HTMLButtonElement[] = [];\n  const loader = createChoiceLoader(\n    () => async (value, signal) => (await props.fetchData(value, signal)).map((option) => ({ ...option, value: option.id })),\n    // Cloud debounces at 200ms and then pads the response with a 200ms minimum\n    // load time to stop the spinner flickering. The spinner here sits in the\n    // chevron slot and stale results stay visible, so there is nothing to pad —\n    // 150ms keeps typing responsive without hammering the loader.\n    () => props.debounceMs ?? 150,\n  );\n  const popover = createChoicePopover(() => Boolean(props.disabled || props.readOnly));\n  // A host notice or an error replaces the results; hidden results are never selectable.\n  const options = () => (props.status || loader.error() ? [] : loader.options());\n  const optionsById = createMemo(() => new Map(options().map((option) => [option.value, option])));\n  const focusedOption = () => options()[focusedIndex()];\n  const searchable = (value: string) => value.trim().length >= (props.minQueryLength ?? 0);\n  const focus = (index: number) => {\n    setFocusedIndex(index);\n    optionRefs[index]?.scrollIntoView({ block: \"nearest\" });\n  };\n  /** `eager` loads the currently controlled query on open; typing supplies its\n   *  own query, so opening from `onInput` skips the duplicate request. */\n  const open = (eager = true) => {\n    if (props.disabled || props.readOnly || popover.open() || !searchable(query())) return;\n    popover.show();\n    if (eager && !props.status) loader.load(query(), true);\n    focus(-1);\n  };\n  const reset = () => {\n    loader.cancel();\n    setQuery(\"\");\n    focus(-1);\n  };\n  const close = () => {\n    popover.hide();\n    if (!props.freeText) return reset();\n    loader.cancel();\n    focus(-1);\n  };\n  createEffect(\n    on(options, (list) => {\n      const index = props.autoHighlight;\n      if (index === undefined || focusedIndex() >= 0 || !popover.open() || list.length === 0) return;\n      // A result that cannot be picked is never the one Enter takes: the next one that can, or none.\n      const start = Math.min(index, list.length - 1);\n      setFocusedIndex(list[start]?.disabled ? nextEnabledChoiceIndex(list, start, 1) : start);\n    }),\n  );\n  createEffect(() => {\n    if (props.readOnly) {\n      popover.hide();\n      loader.cancel();\n      setFocusedIndex(-1);\n    }\n  });\n  const select = (option: ChoiceOption<string>) => {\n    if (props.disabled || props.readOnly || option.disabled) return;\n    popover.hide();\n    props.onSelect({ id: option.value, label: option.label, description: option.description, icon: option.icon });\n    if (props.freeText) {\n      loader.cancel();\n      focus(-1);\n    } else reset();\n    inputRef?.focus();\n  };\n  const onKeyDown = (event: KeyboardEvent) => {\n    if (props.disabled || props.readOnly) return;\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n      event.preventDefault();\n      if (!popover.open()) open();\n      else focus(nextEnabledChoiceIndex(options(), focusedIndex(), event.key === \"ArrowDown\" ? 1 : -1));\n    } else if (event.key === \"Enter\" && popover.open()) {\n      // While the results are open, Enter belongs to them: it never submits an enclosing form, even with no option active.\n      event.preventDefault();\n      const option = options()[focusedIndex()];\n      if (option) select(option);\n      else if (props.freeText) close();\n    } else if ((event.key === \"Escape\" || event.key === \"Tab\") && popover.open()) {\n      // Escape is only ours while the list is open; otherwise it has to reach an\n      // enclosing dialog or drawer.\n      if (event.key === \"Escape\") event.preventDefault();\n      close();\n    }\n  };\n\n  return (\n    <Field\n      class={props.class}\n      label={props.label}\n      description={props.description}\n      error={error()}\n      meta={meta}\n      required={props.required}\n      disabled={props.disabled}\n    >\n      <div class=\"k2b-combobox\" data-invalid={error() ? \"true\" : undefined}>\n        <div ref={popover.setTrigger} class=\"k2b-combobox__input\">\n          <i class=\"ti ti-search\" aria-hidden=\"true\" />\n          {/* A click, typing, or an arrow key opens the list. Focus alone (Tab, a dialog's initial focus) does not, so Escape still closes the enclosing dialog. */}\n          <input\n            ref={(element) => {\n              inputRef = element;\n            }}\n            id={meta.controlId}\n            type=\"text\"\n            value={query()}\n            placeholder={props.placeholder ?? messages().search}\n            disabled={props.disabled}\n            readOnly={props.readOnly}\n            aria-readonly={props.readOnly ? \"true\" : undefined}\n            role=\"combobox\"\n            autocomplete=\"off\"\n            aria-autocomplete=\"list\"\n            aria-expanded={popover.open()}\n            aria-controls={listboxId}\n            aria-activedescendant={focusedOption() ? `${listboxId}-${focusedIndex()}` : undefined}\n            {...fieldControlAria(meta, props)}\n            onClick={() => open()}\n            onInput={(event) => {\n              if (props.disabled || props.readOnly) {\n                event.currentTarget.value = query();\n                return;\n              }\n              const value = event.currentTarget.value;\n              setQuery(value);\n              focus(-1);\n              if (!searchable(value)) {\n                popover.hide();\n                loader.cancel();\n                return;\n              }\n              open(false);\n              if (!props.status) loader.load(value);\n            }}\n            onKeyDown={onKeyDown}\n          />\n          <Show when={loader.loading()} fallback={<i class=\"ti ti-chevron-down\" aria-hidden=\"true\" />}>\n            <i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\" />\n          </Show>\n        </div>\n        <div ref={popover.setPopover} popover=\"manual\" class=\"k2b-choice-popover\">\n          <div class=\"k2b-choice-options\" role=\"listbox\" id={listboxId}>\n            <Show when={props.status}>{(status) => <div class=\"k2b-choice-status\">{status()}</div>}</Show>\n            <Show when={!props.status && loader.error()}>\n              {(message) => (\n                <div class=\"k2b-choice-status\" data-tone=\"danger\">\n                  <span>{message()}</span>\n                  <button type=\"button\" onClick={loader.retry}>\n                    {messages().retry}\n                  </button>\n                </div>\n              )}\n            </Show>\n            {/* Keyed by option ID, not object: each fetch returns new objects, and a row replaced between press and release\n                would swallow the click. */}\n            <For\n              each={options().map((option) => option.value)}\n              fallback={\n                <Show when={!props.status && !loader.error()}>\n                  <Show\n                    when={loader.loading()}\n                    fallback={\n                      <div class=\"k2b-choice-status\">\n                        {query().length >= 2 ? (props.empty ?? selectMessages().noResultsFound) : selectMessages().typeToSearch}\n                      </div>\n                    }\n                  >\n                    {/* The first search has nothing to keep visible yet: rows of the final size wait in its place. */}\n                    <div class=\"k2b-choice-loading\" role=\"status\">\n                      <span class=\"k2b-sr-only\">{messages().loading}</span>\n                      <For each={[62, 48, 55]}>\n                        {(width) => (\n                          <div class=\"k2b-choice-loading__row\" aria-hidden=\"true\">\n                            <span class=\"k2b-skeleton\" />\n                            <span class=\"k2b-skeleton\" style={{ width: `${width}%` }} />\n                          </div>\n                        )}\n                      </For>\n                    </div>\n                  </Show>\n                </Show>\n              }\n            >\n              {(id, index) => {\n                const first = optionsById().get(id)!;\n                const option = () => optionsById().get(id) ?? first;\n                return (\n                  <button\n                    ref={(element) => (optionRefs[index()] = element)}\n                    type=\"button\"\n                    id={`${listboxId}-${index()}`}\n                    class=\"k2b-choice-option\"\n                    role=\"option\"\n                    aria-selected={index() === focusedIndex()}\n                    aria-disabled={option().disabled ? \"true\" : undefined}\n                    data-focused={index() === focusedIndex() ? \"true\" : undefined}\n                    onPointerMove={() => {\n                      if (!option().disabled) focus(index());\n                    }}\n                    onPointerDown={(event) => event.preventDefault()}\n                    onClick={() => select(option())}\n                  >\n                    <Show when={option().icon}>{(icon) => <i class={iconClass(icon())} aria-hidden=\"true\" />}</Show>\n                    <span>\n                      <strong>{option().label}</strong>\n                      <Show when={option().description}>{(description) => <small>{description()}</small>}</Show>\n                    </span>\n                  </button>\n                );\n              }}\n            </For>\n          </div>\n          <Show when={props.footer}>{(footer) => <div class=\"k2b-choice-footer\">{footer()}</div>}</Show>\n        </div>\n      </div>\n    </Field>\n  );\n}\n\nexport default Combobox;\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/inputs/dictation/Dictation.js

@@ -139,17 +139,23 @@ function DictationCard(props) {
         return {
           icon: "ti-microphone-off",
           title: t().blockedTitle,
-          body: [(() => {
+          // An installed app has no address bar, and where a device keeps the app's permissions differs, so its
+          // card names no path.
+          body: matchMedia("(display-mode: standalone)").matches ? (() => {
             var _el$2 = _$getNextElement(_tmpl$2);
-            _$insert(_el$2, () => t().blockedBody);
+            _$insert(_el$2, () => t().blockedApp);
             return _el$2;
-          })(), (() => {
-            var _el$3 = _$getNextElement(_tmpl$3),
-              _el$4 = _el$3.firstChild,
-              _el$5 = _el$4.nextSibling;
-            _$insert(_el$4, () => t().blockedStep1);
-            _$insert(_el$5, () => t().blockedStep2);
+          })() : [(() => {
+            var _el$3 = _$getNextElement(_tmpl$2);
+            _$insert(_el$3, () => t().blockedBody);
             return _el$3;
+          })(), (() => {
+            var _el$4 = _$getNextElement(_tmpl$3),
+              _el$5 = _el$4.firstChild,
+              _el$6 = _el$5.nextSibling;
+            _$insert(_el$5, () => t().blockedStep1);
+            _$insert(_el$6, () => t().blockedStep2);
+            return _el$4;
           })()],
           retry: true
         };
@@ -158,9 +164,9 @@ function DictationCard(props) {
           icon: "ti-hourglass",
           title: t().quotaTitle,
           body: (() => {
-            var _el$6 = _$getNextElement(_tmpl$2);
-            _$insert(_el$6, resetTime);
-            return _el$6;
+            var _el$7 = _$getNextElement(_tmpl$2);
+            _$insert(_el$7, resetTime);
+            return _el$7;
           })(),
           retry: false
         };
@@ -169,9 +175,9 @@ function DictationCard(props) {
           icon: "ti-hourglass",
           title: t().overloadedTitle,
           body: (() => {
-            var _el$7 = _$getNextElement(_tmpl$2);
-            _$insert(_el$7, () => props.dictation.alternative?.note ?? t().overloadedBody);
-            return _el$7;
+            var _el$8 = _$getNextElement(_tmpl$2);
+            _$insert(_el$8, () => props.dictation.alternative?.note ?? t().overloadedBody);
+            return _el$8;
           })(),
           retry: true
         };
@@ -180,9 +186,9 @@ function DictationCard(props) {
           icon: "ti-microphone",
           title: t().elsewhereTitle,
           body: (() => {
-            var _el$8 = _$getNextElement(_tmpl$2);
-            _$insert(_el$8, () => t().elsewhereBody);
-            return _el$8;
+            var _el$9 = _$getNextElement(_tmpl$2);
+            _$insert(_el$9, () => t().elsewhereBody);
+            return _el$9;
           })(),
           retry: false
         };
@@ -191,9 +197,9 @@ function DictationCard(props) {
           icon: "ti-microphone-off",
           title: t().unavailableTitle,
           body: (() => {
-            var _el$9 = _$getNextElement(_tmpl$2);
-            _$insert(_el$9, () => t().unavailableBody);
-            return _el$9;
+            var _el$0 = _$getNextElement(_tmpl$2);
+            _$insert(_el$0, () => t().unavailableBody);
+            return _el$0;
           })(),
           retry: true
         };
@@ -202,9 +208,9 @@ function DictationCard(props) {
           icon: "ti-microphone-off",
           title: t().notAvailableTitle,
           body: (() => {
-            var _el$0 = _$getNextElement(_tmpl$2);
-            _$insert(_el$0, () => t().notAvailableBody);
-            return _el$0;
+            var _el$1 = _$getNextElement(_tmpl$2);
+            _$insert(_el$1, () => t().notAvailableBody);
+            return _el$1;
           })(),
           retry: false
         };
@@ -225,24 +231,24 @@ function DictationCard(props) {
     "class": "k2b-dictation-card",
     get children() {
       return [(() => {
-        var _el$1 = _$getNextElement(_tmpl$4),
-          _el$10 = _el$1.firstChild,
-          _el$11 = _el$10.nextSibling,
-          [_el$12, _co$] = _$getNextMarker(_el$11.nextSibling);
-        _$insert(_el$1, () => content().title, _el$12, _co$);
-        _$effect(() => _$className(_el$10, `ti ${content().icon}`));
-        return _el$1;
+        var _el$10 = _$getNextElement(_tmpl$4),
+          _el$11 = _el$10.firstChild,
+          _el$12 = _el$11.nextSibling,
+          [_el$13, _co$] = _$getNextMarker(_el$12.nextSibling);
+        _$insert(_el$10, () => content().title, _el$13, _co$);
+        _$effect(() => _$className(_el$11, `ti ${content().icon}`));
+        return _el$10;
       })(), (() => {
-        var _el$13 = _$getNextElement(_tmpl$5);
-        _$insert(_el$13, () => content().body);
-        return _el$13;
+        var _el$14 = _$getNextElement(_tmpl$5);
+        _$insert(_el$14, () => content().body);
+        return _el$14;
       })(), (() => {
-        var _el$14 = _$getNextElement(_tmpl$6),
-          _el$15 = _el$14.firstChild,
-          [_el$16, _co$2] = _$getNextMarker(_el$15.nextSibling),
-          _el$17 = _el$16.nextSibling,
-          [_el$18, _co$3] = _$getNextMarker(_el$17.nextSibling);
-        _$insert(_el$14, _$createComponent(Show, {
+        var _el$15 = _$getNextElement(_tmpl$6),
+          _el$16 = _el$15.firstChild,
+          [_el$17, _co$2] = _$getNextMarker(_el$16.nextSibling),
+          _el$18 = _el$17.nextSibling,
+          [_el$19, _co$3] = _$getNextMarker(_el$18.nextSibling);
+        _$insert(_el$15, _$createComponent(Show, {
           get when() {
             return _$memo(() => props.notice.kind === "overloaded")() ? props.dictation.alternative : undefined;
           },
@@ -257,8 +263,8 @@ function DictationCard(props) {
               return alternative().label;
             }
           })
-        }), _el$16, _co$2);
-        _$insert(_el$14, _$createComponent(Show, {
+        }), _el$17, _co$2);
+        _$insert(_el$15, _$createComponent(Show, {
           get when() {
             return content().retry;
           },
@@ -286,8 +292,8 @@ function DictationCard(props) {
               }
             });
           }
-        }), _el$18, _co$3);
-        return _el$14;
+        }), _el$19, _co$3);
+        return _el$15;
       })()];
     }
   });
@@ -342,22 +348,22 @@ export function DictationBar(props) {
     }))
   }];
   return (() => {
-    var _el$19 = _$getNextElement(_tmpl$10);
-    _$insert(_el$19, _$createComponent(Switch, {
+    var _el$20 = _$getNextElement(_tmpl$10);
+    _$insert(_el$20, _$createComponent(Switch, {
       get children() {
         return [_$createComponent(Match, {
           get when() {
             return status() === "finishing";
           },
           get children() {
-            var _el$20 = _$getNextElement(_tmpl$8),
-              _el$26 = _el$20.firstChild,
-              [_el$27, _co$4] = _$getNextMarker(_el$26.nextSibling),
-              _el$22 = _el$27.nextSibling,
-              _el$23 = _el$22.firstChild,
-              _el$24 = _el$23.nextSibling,
-              _el$25 = _el$22.nextSibling;
-            _$insert(_el$20, _$createComponent(IconButton, {
+            var _el$21 = _$getNextElement(_tmpl$8),
+              _el$27 = _el$21.firstChild,
+              [_el$28, _co$4] = _$getNextMarker(_el$27.nextSibling),
+              _el$23 = _el$28.nextSibling,
+              _el$24 = _el$23.firstChild,
+              _el$25 = _el$24.nextSibling,
+              _el$26 = _el$23.nextSibling;
+            _$insert(_el$21, _$createComponent(IconButton, {
               size: "sm",
               get label() {
                 return t().discard;
@@ -367,27 +373,27 @@ export function DictationBar(props) {
               get children() {
                 return _$getNextElement(_tmpl$7);
               }
-            }), _el$27, _co$4);
-            _$insert(_el$24, () => t().finishing);
-            _$insert(_el$25, () => clock(props.dictation.elapsedMs()));
-            _$effect(() => _$setAttribute(_el$20, "aria-label", t().finishingGroup));
-            return _el$20;
+            }), _el$28, _co$4);
+            _$insert(_el$25, () => t().finishing);
+            _$insert(_el$26, () => clock(props.dictation.elapsedMs()));
+            _$effect(() => _$setAttribute(_el$21, "aria-label", t().finishingGroup));
+            return _el$21;
           }
         }), _$createComponent(Match, {
           get when() {
             return status() === "live" || status() === "starting";
           },
           get children() {
-            var _el$28 = _$getNextElement(_tmpl$1),
-              _el$37 = _el$28.firstChild,
-              [_el$38, _co$5] = _$getNextMarker(_el$37.nextSibling),
-              _el$30 = _el$38.nextSibling,
-              _el$31 = _el$30.nextSibling,
+            var _el$29 = _$getNextElement(_tmpl$1),
+              _el$38 = _el$29.firstChild,
+              [_el$39, _co$5] = _$getNextMarker(_el$38.nextSibling),
+              _el$31 = _el$39.nextSibling,
               _el$32 = _el$31.nextSibling,
-              _el$39 = _el$32.nextSibling,
-              [_el$40, _co$6] = _$getNextMarker(_el$39.nextSibling),
-              _el$36 = _el$40.nextSibling;
-            _$insert(_el$28, _$createComponent(IconButton, {
+              _el$33 = _el$32.nextSibling,
+              _el$40 = _el$33.nextSibling,
+              [_el$41, _co$6] = _$getNextMarker(_el$40.nextSibling),
+              _el$37 = _el$41.nextSibling;
+            _$insert(_el$29, _$createComponent(IconButton, {
               size: "sm",
               get label() {
                 return t().discard;
@@ -397,22 +403,22 @@ export function DictationBar(props) {
               get children() {
                 return _$getNextElement(_tmpl$7);
               }
-            }), _el$38, _co$5);
-            _$insert(_el$31, _$createComponent(Index, {
+            }), _el$39, _co$5);
+            _$insert(_el$32, _$createComponent(Index, {
               get each() {
                 return bars();
               },
               children: level => (() => {
-                var _el$41 = _$getNextElement(_tmpl$11);
-                _$effect(_$p => _$setStyleProperty(_el$41, "--k2b-dictation-level", String(0.1 + level() * 0.9)));
-                return _el$41;
+                var _el$42 = _$getNextElement(_tmpl$11);
+                _$effect(_$p => _$setStyleProperty(_el$42, "--k2b-dictation-level", String(0.1 + level() * 0.9)));
+                return _el$42;
               })()
             }));
-            _$insert(_el$32, (() => {
+            _$insert(_el$33, (() => {
               var _c$ = _$memo(() => status() === "starting");
               return () => _c$() ? clock(0) : time();
             })());
-            _$insert(_el$28, _$createComponent(Dropdown, {
+            _$insert(_el$29, _$createComponent(Dropdown, {
               get items() {
                 return deviceItems();
               },
@@ -432,20 +438,20 @@ export function DictationBar(props) {
                   },
                   get children() {
                     return [(() => {
-                      var _el$33 = _$getNextElement(_tmpl$);
-                      _$effect(() => _$className(_el$33, `ti ${deviceIcon(props.dictation.device())}`));
-                      return _el$33;
-                    })(), (() => {
-                      var _el$34 = _$getNextElement(_tmpl$9);
-                      _$insert(_el$34, deviceLabel);
+                      var _el$34 = _$getNextElement(_tmpl$);
+                      _$effect(() => _$className(_el$34, `ti ${deviceIcon(props.dictation.device())}`));
                       return _el$34;
+                    })(), (() => {
+                      var _el$35 = _$getNextElement(_tmpl$9);
+                      _$insert(_el$35, deviceLabel);
+                      return _el$35;
                     })(), _$getNextElement(_tmpl$0)];
                   }
                 });
               }
-            }), _el$40, _co$6);
-            _el$36.$$click = () => void props.dictation.stop();
-            _$use(bindStop, _el$36);
+            }), _el$41, _co$6);
+            _el$37.$$click = () => void props.dictation.stop();
+            _$use(bindStop, _el$37);
             _$effect(_p$ => {
               var _v$ = status(),
                 _v$2 = t().running,
@@ -453,12 +459,12 @@ export function DictationBar(props) {
                 _v$4 = warning() ? "true" : undefined,
                 _v$5 = t().stop,
                 _v$6 = t().stop;
-              _v$ !== _p$.e && _$setAttribute(_el$28, "data-state", _p$.e = _v$);
-              _v$2 !== _p$.t && _$setAttribute(_el$28, "aria-label", _p$.t = _v$2);
-              _v$3 !== _p$.a && _$setAttribute(_el$30, "data-live", _p$.a = _v$3);
-              _v$4 !== _p$.o && _$setAttribute(_el$32, "data-warning", _p$.o = _v$4);
-              _v$5 !== _p$.i && _$setAttribute(_el$36, "aria-label", _p$.i = _v$5);
-              _v$6 !== _p$.n && _$setAttribute(_el$36, "title", _p$.n = _v$6);
+              _v$ !== _p$.e && _$setAttribute(_el$29, "data-state", _p$.e = _v$);
+              _v$2 !== _p$.t && _$setAttribute(_el$29, "aria-label", _p$.t = _v$2);
+              _v$3 !== _p$.a && _$setAttribute(_el$31, "data-live", _p$.a = _v$3);
+              _v$4 !== _p$.o && _$setAttribute(_el$33, "data-warning", _p$.o = _v$4);
+              _v$5 !== _p$.i && _$setAttribute(_el$37, "aria-label", _p$.i = _v$5);
+              _v$6 !== _p$.n && _$setAttribute(_el$37, "title", _p$.n = _v$6);
               return _p$;
             }, {
               e: undefined,
@@ -469,7 +475,7 @@ export function DictationBar(props) {
               n: undefined
             });
             _$runHydrationEvents();
-            return _el$28;
+            return _el$29;
           }
         }), _$createComponent(Match, {
           get when() {
@@ -488,20 +494,20 @@ export function DictationBar(props) {
               minutes: minutes()
             });
             return (() => {
-              var _el$42 = _$getNextElement(_tmpl$12),
-                _el$43 = _el$42.firstChild,
+              var _el$43 = _$getNextElement(_tmpl$12),
                 _el$44 = _el$43.firstChild,
-                _el$45 = _el$44.nextSibling,
+                _el$45 = _el$44.firstChild,
                 _el$46 = _el$45.nextSibling,
                 _el$47 = _el$46.nextSibling,
-                _el$49 = _el$43.nextSibling,
-                [_el$50, _co$7] = _$getNextMarker(_el$49.nextSibling),
-                _el$51 = _el$50.nextSibling,
-                [_el$52, _co$8] = _$getNextMarker(_el$51.nextSibling);
-              _$insert(_el$45, long);
+                _el$48 = _el$47.nextSibling,
+                _el$50 = _el$44.nextSibling,
+                [_el$51, _co$7] = _$getNextMarker(_el$50.nextSibling),
+                _el$52 = _el$51.nextSibling,
+                [_el$53, _co$8] = _$getNextMarker(_el$52.nextSibling);
               _$insert(_el$46, long);
-              _$insert(_el$47, short);
-              _$insert(_el$42, _$createComponent(Button, {
+              _$insert(_el$47, long);
+              _$insert(_el$48, short);
+              _$insert(_el$43, _$createComponent(Button, {
                 ref: bindContinue,
                 size: "sm",
                 variant: "ghost",
@@ -510,8 +516,8 @@ export function DictationBar(props) {
                 get children() {
                   return t().continue;
                 }
-              }), _el$50, _co$7);
-              _$insert(_el$42, _$createComponent(IconButton, {
+              }), _el$51, _co$7);
+              _$insert(_el$43, _$createComponent(IconButton, {
                 size: "sm",
                 get label() {
                   return t().dismiss;
@@ -521,25 +527,25 @@ export function DictationBar(props) {
                 get children() {
                   return _$getNextElement(_tmpl$7);
                 }
-              }), _el$52, _co$8);
+              }), _el$53, _co$8);
               _$effect(_p$ => {
                 var _v$7 = ended() ? undefined : "danger",
                   _v$8 = `ti ${ended() ? "ti-clock" : "ti-alert-circle"}`;
-                _v$7 !== _p$.e && _$setAttribute(_el$43, "data-tone", _p$.e = _v$7);
-                _v$8 !== _p$.t && _$className(_el$44, _p$.t = _v$8);
+                _v$7 !== _p$.e && _$setAttribute(_el$44, "data-tone", _p$.e = _v$7);
+                _v$8 !== _p$.t && _$className(_el$45, _p$.t = _v$8);
                 return _p$;
               }, {
                 e: undefined,
                 t: undefined
               });
-              return _el$42;
+              return _el$43;
             })();
           }
         })];
       }
     }));
-    _$effect(() => _$className(_el$19, `k2b-dictation-bar ${props.class ?? ""}`));
-    return _el$19;
+    _$effect(() => _$className(_el$20, `k2b-dictation-bar ${props.class ?? ""}`));
+    return _el$20;
   })();
 }
 _$delegateEvents(["click"]);