@k2b/ui 0.21.0 → 0.23.0

package/dist/ssr/inputs/ChoiceInputs.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["inputs/ChoiceInputs.tsx"],"sourcesContent":["import { For, type JSX, Show, splitProps } from \"solid-js\";\nimport { createFieldMeta, Field, fieldControlAria } from \"../internal/field\";\nimport { useUiMessages } from \"../intl/messages\";\nimport type { FieldProps, MaybeAccessor, ValueFieldProps } from \"./field-contract\";\nimport { commitFieldValue, resolveMaybeAccessor } from \"./field-contract\";\n\nexport type PinInputProps = ValueFieldProps<string> & {\n  length?: number;\n  name?: string;\n  stretch?: boolean;\n  password?: boolean;\n  readOnly?: boolean;\n  onSubmit?: () => void;\n};\n\nexport function PinInput(props: PinInputProps): JSX.Element {\n  const messages = useUiMessages();\n  const meta = createFieldMeta(props.id);\n  const length = () => Math.max(1, props.length ?? 6);\n  let inputs: HTMLInputElement[] = [];\n  const digits = () => (resolveMaybeAccessor(props.value) ?? \"\").replace(/\\D/g, \"\").slice(0, length());\n  const error = () => resolveMaybeAccessor(props.error);\n  const emit = (value: string) => {\n    props.onValueChange?.(value);\n    if (value.length === length()) props.onValueCommit?.(value);\n  };\n\n  const updateDigit = (index: number, input: string) => {\n    if (props.disabled || props.readOnly) return;\n    const digit = input.replace(/\\D/g, \"\").slice(-1);\n    const current = digits();\n    emit(`${current.slice(0, index)}${digit}${current.slice(index + 1)}`);\n    if (digit && index < length() - 1) {\n      inputs[index + 1]?.focus();\n      inputs[index + 1]?.select();\n    }\n  };\n\n  const handleKeyDown = (index: number, event: KeyboardEvent) => {\n    if (props.disabled || props.readOnly) return;\n    if (event.key === \"Enter\" && props.onSubmit && !event.shiftKey && !event.metaKey) {\n      event.preventDefault();\n      props.onSubmit();\n    } else if (event.key === \"ArrowLeft\" && index > 0) {\n      event.preventDefault();\n      inputs[index - 1]?.focus();\n      inputs[index - 1]?.select();\n    } else if (event.key === \"ArrowRight\" && index < length() - 1) {\n      event.preventDefault();\n      inputs[index + 1]?.focus();\n      inputs[index + 1]?.select();\n    } else if (event.key === \"Backspace\" && !digits()[index] && index > 0) {\n      event.preventDefault();\n      const current = digits();\n      emit(`${current.slice(0, index - 1)}${current.slice(index)}`);\n      inputs[index - 1]?.focus();\n      inputs[index - 1]?.select();\n    }\n  };\n\n  const handlePaste = (event: ClipboardEvent) => {\n    if (props.disabled || props.readOnly) return;\n    const pasted = event.clipboardData?.getData(\"text\").replace(/\\D/g, \"\");\n    if (!pasted) return;\n    event.preventDefault();\n    const focused = inputs.indexOf(document.activeElement as HTMLInputElement);\n    const start = focused >= 0 ? focused : 0;\n    const insert = pasted.slice(0, length() - start);\n    const current = digits();\n    emit(`${current.slice(0, start)}${insert}${current.slice(start + insert.length)}`.slice(0, length()));\n    const next = Math.min(start + insert.length, length() - 1);\n    inputs[next]?.focus();\n    inputs[next]?.select();\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      labelFor={false}\n      required={props.required}\n      disabled={props.disabled}\n    >\n      <div\n        class=\"k2b-pin-input\"\n        id={meta.controlId}\n        data-stretch={props.stretch ? \"true\" : undefined}\n        role=\"group\"\n        {...fieldControlAria(meta, props)}\n        onPaste={handlePaste}\n      >\n        <For each={Array.from({ length: length() })}>\n          {(_, index) => (\n            <input\n              ref={(element) => {\n                inputs[index()] = element;\n              }}\n              class=\"k2b-control k2b-pin-input__digit\"\n              data-filled={digits()[index()] ? \"true\" : undefined}\n              type={props.password ? \"password\" : \"text\"}\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              pattern=\"[0-9]\"\n              maxlength={1}\n              value={digits()[index()] ?? \"\"}\n              required={props.required}\n              disabled={props.disabled}\n              readOnly={props.readOnly}\n              aria-label={messages().pinDigit({ index: index() + 1, total: length() })}\n              onInput={(event) => updateDigit(index(), event.currentTarget.value)}\n              onKeyDown={(event) => handleKeyDown(index(), event)}\n              onFocus={(event) => event.currentTarget.select()}\n            />\n          )}\n        </For>\n      </div>\n      <Show when={props.name}>{(name) => <input type=\"hidden\" name={name()} value={digits()} />}</Show>\n    </Field>\n  );\n}\n\nexport type SliderProps = FieldProps &\n  Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"type\" | \"value\" | \"onInput\" | \"onChange\" | keyof FieldProps> &\n  ValueFieldProps<number> & {\n    value: MaybeAccessor<number>;\n    formatValue?: (value: number) => string;\n    showValue?: boolean;\n    center?: boolean;\n    defaultValue?: number;\n  };\n\nexport function Slider(props: SliderProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"aria-describedby\",\n    \"aria-label\",\n    \"center\",\n    \"class\",\n    \"defaultValue\",\n    \"description\",\n    \"error\",\n    \"id\",\n    \"label\",\n    \"onValueChange\",\n    \"onValueCommit\",\n    \"required\",\n    \"showValue\",\n    \"value\",\n    \"formatValue\",\n  ]);\n  const meta = createFieldMeta(local.id);\n  const min = () => Number(rest.min ?? 0);\n  const max = () => Number(rest.max ?? 100);\n  const value = () => resolveMaybeAccessor(local.value) ?? min();\n  const error = () => resolveMaybeAccessor(local.error);\n  const percentage = () => {\n    const span = max() - min();\n    return span <= 0 ? 0 : Math.min(100, Math.max(0, ((value() - min()) / span) * 100));\n  };\n  const track = () => {\n    const position = percentage();\n    if (local.center) {\n      const low = Math.min(50, position);\n      const high = Math.max(50, position);\n      return `linear-gradient(to right, var(--k2b-surface-muted) 0 ${low}%, var(--k2b-action) ${low}% ${high}%, var(--k2b-surface-muted) ${high}% 100%)`;\n    }\n    return `linear-gradient(to right, var(--k2b-action) 0 ${position}%, var(--k2b-surface-muted) ${position}% 100%)`;\n  };\n  const resetValue = () => local.defaultValue ?? (local.center ? (min() + max()) / 2 : min());\n\n  return (\n    <Field\n      class={local.class}\n      label={local.label}\n      description={local.description}\n      error={error()}\n      meta={meta}\n      required={local.required}\n      disabled={rest.disabled}\n    >\n      <div class=\"k2b-slider\">\n        <input\n          {...rest}\n          id={meta.controlId}\n          type=\"range\"\n          value={value()}\n          style={{ background: track() }}\n          {...fieldControlAria(meta, local)}\n          onInput={(event) => local.onValueChange?.(event.currentTarget.valueAsNumber)}\n          onChange={(event) => local.onValueCommit?.(event.currentTarget.valueAsNumber)}\n          onDblClick={() => {\n            const next = resetValue();\n            commitFieldValue(local, next);\n          }}\n        />\n        <Show when={local.showValue ?? true}>\n          <output for={meta.controlId}>{local.formatValue?.(value()) ?? value()}</output>\n        </Show>\n      </div>\n    </Field>\n  );\n}\n\nexport type ColorInputProps = ValueFieldProps<string> & {\n  name?: string;\n  compact?: boolean;\n  transparent?: boolean;\n  transparentValue?: MaybeAccessor<boolean>;\n  onTransparentValueChange?: (value: boolean) => void;\n};\n\nexport function ColorInput(props: ColorInputProps): JSX.Element {\n  const messages = useUiMessages();\n  const meta = createFieldMeta(props.id);\n  const currentColor = () => resolveMaybeAccessor(props.value) || \"#3b82f6\";\n  const isTransparent = () => resolveMaybeAccessor(props.transparentValue) ?? false;\n  const error = () => resolveMaybeAccessor(props.error);\n  const compact = () => props.compact ?? !props.label;\n  let picker: HTMLInputElement | undefined;\n\n  const control = () =>\n    compact() ? (\n      <span class=\"k2b-color-input k2b-color-input--compact\">\n        <button\n          type=\"button\"\n          class=\"k2b-color-input__swatch\"\n          style={{ \"background-color\": currentColor() }}\n          disabled={props.disabled}\n          {...fieldControlAria(meta, props)}\n          onClick={() => picker?.click()}\n        />\n        <input\n          ref={picker}\n          id={meta.controlId}\n          class=\"k2b-color-input__native\"\n          type=\"color\"\n          name={props.name}\n          value={currentColor()}\n          disabled={props.disabled}\n          onInput={(event) => props.onValueChange?.(event.currentTarget.value)}\n          onChange={(event) => props.onValueCommit?.(event.currentTarget.value)}\n        />\n      </span>\n    ) : (\n      <div\n        class=\"k2b-color-input\"\n        data-disabled={props.disabled || isTransparent() ? \"true\" : undefined}\n        data-invalid={error() ? \"true\" : undefined}\n      >\n        <button\n          type=\"button\"\n          class=\"k2b-color-input__value\"\n          disabled={props.disabled || isTransparent()}\n          {...fieldControlAria(meta, props)}\n          onClick={() => picker?.click()}\n        >\n          <span\n            class=\"k2b-color-input__swatch\"\n            data-transparent={isTransparent() ? \"true\" : undefined}\n            style={isTransparent() ? undefined : { \"background-color\": currentColor() }}\n          />\n          <code>{isTransparent() ? \"transparent\" : currentColor().toUpperCase()}</code>\n        </button>\n        <Show when={props.transparent}>\n          <button\n            type=\"button\"\n            class=\"k2b-color-input__transparent\"\n            aria-label={isTransparent() ? messages().useColor : messages().useTransparent}\n            aria-pressed={isTransparent()}\n            disabled={props.disabled}\n            onClick={() => props.onTransparentValueChange?.(!isTransparent())}\n          >\n            <i class=\"ti ti-grid-dots\" aria-hidden=\"true\" />\n          </button>\n        </Show>\n        <input\n          ref={picker}\n          id={meta.controlId}\n          class=\"k2b-color-input__native\"\n          type=\"color\"\n          name={props.name}\n          value={currentColor()}\n          disabled={props.disabled || isTransparent()}\n          onInput={(event) => props.onValueChange?.(event.currentTarget.value)}\n          onChange={(event) => props.onValueCommit?.(event.currentTarget.value)}\n        />\n      </div>\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      {control()}\n    </Field>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["inputs/ChoiceInputs.tsx"],"sourcesContent":["import { For, type JSX, Show, splitProps } from \"solid-js\";\nimport { createFieldMeta, Field, fieldControlAria } from \"../internal/field\";\nimport type { FieldProps, MaybeAccessor, ValueFieldProps } from \"./field-contract\";\nimport { commitFieldValue, resolveMaybeAccessor } from \"./field-contract\";\nimport { useInputMessages } from \"./input-messages\";\n\nexport type PinInputProps = ValueFieldProps<string> & {\n  length?: number;\n  name?: string;\n  stretch?: boolean;\n  password?: boolean;\n  readOnly?: boolean;\n  onSubmit?: () => void;\n};\n\nexport function PinInput(props: PinInputProps): JSX.Element {\n  const inputMessages = useInputMessages();\n  const meta = createFieldMeta(props.id);\n  const length = () => Math.max(1, props.length ?? 6);\n  let inputs: HTMLInputElement[] = [];\n  const digits = () => (resolveMaybeAccessor(props.value) ?? \"\").replace(/\\D/g, \"\").slice(0, length());\n  const error = () => resolveMaybeAccessor(props.error);\n  const emit = (value: string) => {\n    props.onValueChange?.(value);\n    if (value.length === length()) props.onValueCommit?.(value);\n  };\n\n  const updateDigit = (index: number, input: string) => {\n    if (props.disabled || props.readOnly) return;\n    const digit = input.replace(/\\D/g, \"\").slice(-1);\n    const current = digits();\n    emit(`${current.slice(0, index)}${digit}${current.slice(index + 1)}`);\n    if (digit && index < length() - 1) {\n      inputs[index + 1]?.focus();\n      inputs[index + 1]?.select();\n    }\n  };\n\n  const handleKeyDown = (index: number, event: KeyboardEvent) => {\n    if (props.disabled || props.readOnly) return;\n    if (event.key === \"Enter\" && props.onSubmit && !event.shiftKey && !event.metaKey) {\n      event.preventDefault();\n      props.onSubmit();\n    } else if (event.key === \"ArrowLeft\" && index > 0) {\n      event.preventDefault();\n      inputs[index - 1]?.focus();\n      inputs[index - 1]?.select();\n    } else if (event.key === \"ArrowRight\" && index < length() - 1) {\n      event.preventDefault();\n      inputs[index + 1]?.focus();\n      inputs[index + 1]?.select();\n    } else if (event.key === \"Backspace\" && !digits()[index] && index > 0) {\n      event.preventDefault();\n      const current = digits();\n      emit(`${current.slice(0, index - 1)}${current.slice(index)}`);\n      inputs[index - 1]?.focus();\n      inputs[index - 1]?.select();\n    }\n  };\n\n  const handlePaste = (event: ClipboardEvent) => {\n    if (props.disabled || props.readOnly) return;\n    const pasted = event.clipboardData?.getData(\"text\").replace(/\\D/g, \"\");\n    if (!pasted) return;\n    event.preventDefault();\n    const focused = inputs.indexOf(document.activeElement as HTMLInputElement);\n    const start = focused >= 0 ? focused : 0;\n    const insert = pasted.slice(0, length() - start);\n    const current = digits();\n    emit(`${current.slice(0, start)}${insert}${current.slice(start + insert.length)}`.slice(0, length()));\n    const next = Math.min(start + insert.length, length() - 1);\n    inputs[next]?.focus();\n    inputs[next]?.select();\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      labelFor={false}\n      required={props.required}\n      disabled={props.disabled}\n    >\n      <div\n        class=\"k2b-pin-input\"\n        id={meta.controlId}\n        data-stretch={props.stretch ? \"true\" : undefined}\n        role=\"group\"\n        {...fieldControlAria(meta, props)}\n        onPaste={handlePaste}\n      >\n        <For each={Array.from({ length: length() })}>\n          {(_, index) => (\n            <input\n              ref={(element) => {\n                inputs[index()] = element;\n              }}\n              class=\"k2b-control k2b-pin-input__digit\"\n              data-filled={digits()[index()] ? \"true\" : undefined}\n              type={props.password ? \"password\" : \"text\"}\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              pattern=\"[0-9]\"\n              maxlength={1}\n              value={digits()[index()] ?? \"\"}\n              required={props.required}\n              disabled={props.disabled}\n              readOnly={props.readOnly}\n              aria-label={inputMessages().pinDigit({ index: index() + 1, total: length() })}\n              onInput={(event) => updateDigit(index(), event.currentTarget.value)}\n              onKeyDown={(event) => handleKeyDown(index(), event)}\n              onFocus={(event) => event.currentTarget.select()}\n            />\n          )}\n        </For>\n      </div>\n      <Show when={props.name}>{(name) => <input type=\"hidden\" name={name()} value={digits()} />}</Show>\n    </Field>\n  );\n}\n\nexport type SliderProps = FieldProps &\n  Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"type\" | \"value\" | \"onInput\" | \"onChange\" | keyof FieldProps> &\n  ValueFieldProps<number> & {\n    value: MaybeAccessor<number>;\n    formatValue?: (value: number) => string;\n    showValue?: boolean;\n    center?: boolean;\n    defaultValue?: number;\n  };\n\nexport function Slider(props: SliderProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"aria-describedby\",\n    \"aria-label\",\n    \"center\",\n    \"class\",\n    \"defaultValue\",\n    \"description\",\n    \"error\",\n    \"id\",\n    \"label\",\n    \"onValueChange\",\n    \"onValueCommit\",\n    \"required\",\n    \"showValue\",\n    \"value\",\n    \"formatValue\",\n  ]);\n  const meta = createFieldMeta(local.id);\n  const min = () => Number(rest.min ?? 0);\n  const max = () => Number(rest.max ?? 100);\n  const value = () => resolveMaybeAccessor(local.value) ?? min();\n  const error = () => resolveMaybeAccessor(local.error);\n  const percentage = () => {\n    const span = max() - min();\n    return span <= 0 ? 0 : Math.min(100, Math.max(0, ((value() - min()) / span) * 100));\n  };\n  const track = () => {\n    const position = percentage();\n    if (local.center) {\n      const low = Math.min(50, position);\n      const high = Math.max(50, position);\n      return `linear-gradient(to right, var(--k2b-surface-muted) 0 ${low}%, var(--k2b-action) ${low}% ${high}%, var(--k2b-surface-muted) ${high}% 100%)`;\n    }\n    return `linear-gradient(to right, var(--k2b-action) 0 ${position}%, var(--k2b-surface-muted) ${position}% 100%)`;\n  };\n  const resetValue = () => local.defaultValue ?? (local.center ? (min() + max()) / 2 : min());\n\n  return (\n    <Field\n      class={local.class}\n      label={local.label}\n      description={local.description}\n      error={error()}\n      meta={meta}\n      required={local.required}\n      disabled={rest.disabled}\n    >\n      <div class=\"k2b-slider\">\n        <input\n          {...rest}\n          id={meta.controlId}\n          type=\"range\"\n          value={value()}\n          style={{ background: track() }}\n          {...fieldControlAria(meta, local)}\n          onInput={(event) => local.onValueChange?.(event.currentTarget.valueAsNumber)}\n          onChange={(event) => local.onValueCommit?.(event.currentTarget.valueAsNumber)}\n          onDblClick={() => {\n            const next = resetValue();\n            commitFieldValue(local, next);\n          }}\n        />\n        <Show when={local.showValue ?? true}>\n          <output for={meta.controlId}>{local.formatValue?.(value()) ?? value()}</output>\n        </Show>\n      </div>\n    </Field>\n  );\n}\n\nexport type ColorInputProps = ValueFieldProps<string> & {\n  name?: string;\n  compact?: boolean;\n  transparent?: boolean;\n  transparentValue?: MaybeAccessor<boolean>;\n  onTransparentValueChange?: (value: boolean) => void;\n};\n\nexport function ColorInput(props: ColorInputProps): JSX.Element {\n  const inputMessages = useInputMessages();\n  const meta = createFieldMeta(props.id);\n  const currentColor = () => resolveMaybeAccessor(props.value) || \"#3b82f6\";\n  const isTransparent = () => resolveMaybeAccessor(props.transparentValue) ?? false;\n  const error = () => resolveMaybeAccessor(props.error);\n  const compact = () => props.compact ?? !props.label;\n  let picker: HTMLInputElement | undefined;\n\n  const control = () =>\n    compact() ? (\n      <span class=\"k2b-color-input k2b-color-input--compact\">\n        <button\n          type=\"button\"\n          class=\"k2b-color-input__swatch\"\n          style={{ \"background-color\": currentColor() }}\n          disabled={props.disabled}\n          {...fieldControlAria(meta, props)}\n          onClick={() => picker?.click()}\n        />\n        <input\n          ref={picker}\n          id={meta.controlId}\n          class=\"k2b-color-input__native\"\n          type=\"color\"\n          name={props.name}\n          value={currentColor()}\n          disabled={props.disabled}\n          onInput={(event) => props.onValueChange?.(event.currentTarget.value)}\n          onChange={(event) => props.onValueCommit?.(event.currentTarget.value)}\n        />\n      </span>\n    ) : (\n      <div\n        class=\"k2b-color-input\"\n        data-disabled={props.disabled || isTransparent() ? \"true\" : undefined}\n        data-invalid={error() ? \"true\" : undefined}\n      >\n        <button\n          type=\"button\"\n          class=\"k2b-color-input__value\"\n          disabled={props.disabled || isTransparent()}\n          {...fieldControlAria(meta, props)}\n          onClick={() => picker?.click()}\n        >\n          <span\n            class=\"k2b-color-input__swatch\"\n            data-transparent={isTransparent() ? \"true\" : undefined}\n            style={isTransparent() ? undefined : { \"background-color\": currentColor() }}\n          />\n          <code>{isTransparent() ? \"transparent\" : currentColor().toUpperCase()}</code>\n        </button>\n        <Show when={props.transparent}>\n          <button\n            type=\"button\"\n            class=\"k2b-color-input__transparent\"\n            aria-label={isTransparent() ? inputMessages().useColor : inputMessages().useTransparent}\n            aria-pressed={isTransparent()}\n            disabled={props.disabled}\n            onClick={() => props.onTransparentValueChange?.(!isTransparent())}\n          >\n            <i class=\"ti ti-grid-dots\" aria-hidden=\"true\" />\n          </button>\n        </Show>\n        <input\n          ref={picker}\n          id={meta.controlId}\n          class=\"k2b-color-input__native\"\n          type=\"color\"\n          name={props.name}\n          value={currentColor()}\n          disabled={props.disabled || isTransparent()}\n          onInput={(event) => props.onValueChange?.(event.currentTarget.value)}\n          onChange={(event) => props.onValueCommit?.(event.currentTarget.value)}\n        />\n      </div>\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      {control()}\n    </Field>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/inputs/Combobox.js

@@ -18,9 +18,11 @@ import { createFieldMeta, Field, fieldControlAria } from "../internal/field";
 import { useUiMessages } from "../intl/messages";
 import { createChoiceLoader, createChoicePopover, nextEnabledChoiceIndex } from "./choice";
 import { resolveMaybeAccessor } from "./field-contract";
+import { useSelectMessages } from "./select-messages";
 const iconClass = icon => icon.split(/\s+/).includes("ti") ? icon : `ti ${icon}`;
 export function Combobox(props) {
   const messages = useUiMessages();
+  const selectMessages = useSelectMessages();
   const meta = createFieldMeta(props.id);
   const listboxId = `${meta.controlId}-listbox`;
   const [localQuery, setLocalQuery] = createSignal("");
@@ -157,7 +159,7 @@ export function Combobox(props) {
           return _$memo(() => !!loader.error())() ? [] : options();
         },
         get fallback() {
-          return _$ssr(_tmpl$5, query().length >= 2 ? _$escape(messages().noResultsFound) : _$escape(messages().typeToSearch));
+          return _$ssr(_tmpl$5, query().length >= 2 ? _$escape(selectMessages().noResultsFound) : _$escape(selectMessages().typeToSearch));
         },
         children: (option, index) => _$ssr(_tmpl$6, `${_$escape(listboxId, true)}-${_$escape(index(), true)}`, _$ssrAttribute("aria-selected", _$escape(index(), true) === _$escape(focusedIndex(), true), false) + _$ssrAttribute("data-focused", index() === focusedIndex() ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
           get when() {

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["inputs/Combobox.tsx"],"sourcesContent":["import { createSignal, For, type JSX, 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\";\n\nexport type ComboboxOption = { id: string; label: string; description?: string; icon?: string };\nexport type ComboboxProps = FieldProps & {\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};\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 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));\n  const options = loader.options;\n  const focusedOption = () => options()[focusedIndex()];\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 || popover.open()) return;\n    popover.show();\n    if (eager) 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    reset();\n  };\n  const select = (option: ChoiceOption<string>) => {\n    popover.hide();\n    props.onSelect({ id: option.value, label: option.label, description: option.description, icon: option.icon });\n    reset();\n    inputRef?.focus();\n  };\n  const onKeyDown = (event: KeyboardEvent) => {\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() && options()[focusedIndex()]) {\n      event.preventDefault();\n      select(options()[focusedIndex()]!);\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          <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            role=\"combobox\"\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            onFocus={() => open()}\n            onClick={() => open()}\n            onInput={(event) => {\n              setQuery(event.currentTarget.value);\n              open(false);\n              loader.load(event.currentTarget.value);\n              focus(-1);\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={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            <For\n              each={loader.error() ? [] : options()}\n              fallback={<div class=\"k2b-choice-status\">{query().length >= 2 ? messages().noResultsFound : messages().typeToSearch}</div>}\n            >\n              {(option, index) => (\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            </For>\n          </div>\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 { createSignal, For, type JSX, 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  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};\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));\n  const options = loader.options;\n  const focusedOption = () => options()[focusedIndex()];\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 || popover.open()) return;\n    popover.show();\n    if (eager) 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    reset();\n  };\n  const select = (option: ChoiceOption<string>) => {\n    popover.hide();\n    props.onSelect({ id: option.value, label: option.label, description: option.description, icon: option.icon });\n    reset();\n    inputRef?.focus();\n  };\n  const onKeyDown = (event: KeyboardEvent) => {\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() && options()[focusedIndex()]) {\n      event.preventDefault();\n      select(options()[focusedIndex()]!);\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            role=\"combobox\"\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              setQuery(event.currentTarget.value);\n              open(false);\n              loader.load(event.currentTarget.value);\n              focus(-1);\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={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            <For\n              each={loader.error() ? [] : options()}\n              fallback={\n                <div class=\"k2b-choice-status\">{query().length >= 2 ? selectMessages().noResultsFound : selectMessages().typeToSearch}</div>\n              }\n            >\n              {(option, index) => (\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            </For>\n          </div>\n        </div>\n      </div>\n    </Field>\n  );\n}\n\nexport default Combobox;\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/inputs/FileDropTarget.js

@@ -5,8 +5,8 @@ import { escape as _$escape } from "solid-js/web";
 var _tmpl$ = ["<div popover=\"manual\" class=\"k2b-file-drop\"", " aria-hidden=\"true\" style=\"", "\"><span class=\"k2b-file-drop__message\"><i", "></i><span>", "</span></span></div>"];
 import { createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js";
 import { useLocale } from "../intl/locale";
-import { useUiMessages } from "../intl/messages";
 import { FILE_DROP_DEFAULT_REGION, fileDropEngine, liveDocument } from "./file-drop";
+import { useFileDropMessages } from "./file-drop-messages";
 /**
  * Turns an area into a drop target while files from outside the page are dragged over the window. A calm overlay
  * covers the area without moving anything and says what dropping does; a more specific target inside it, such as a
@@ -14,14 +14,14 @@ import { FILE_DROP_DEFAULT_REGION, fileDropEngine, liveDocument } from "./file-d
  * elements dragged within the page never show it. Keep a visible upload button for keyboard and touch users.
  */
 export function FileDropTarget(props) {
-  const messages = useUiMessages();
+  const fileDropMessages = useFileDropMessages();
   const locale = useLocale();
   let overlay;
   const [rect, setRect] = createSignal();
   const region = () => props.for ?? overlay?.parentElement?.closest(FILE_DROP_DEFAULT_REGION) ?? overlay?.ownerDocument.documentElement;
   const entry = {
     options: props,
-    messages,
+    messages: fileDropMessages,
     locale,
     region,
     host: () => overlay?.parentElement ?? undefined
@@ -42,7 +42,7 @@ export function FileDropTarget(props) {
   const state = () => hover() ? hover().invalid ? "invalid" : "over" : "available";
   const sentence = () => {
     const current = hover();
-    if (current?.invalid) return messages().fileTypeNotAccepted;
+    if (current?.invalid) return fileDropMessages().fileTypeNotAccepted;
     return current ? current.entry.options.label : props.label;
   };
   createEffect(() => {
@@ -88,12 +88,12 @@ export function FileDropTarget(props) {
  * sentence. Calling the ref again with new options replaces them.
  */
 export function fileDropTarget(options) {
-  const messages = useUiMessages();
+  const fileDropMessages = useFileDropMessages();
   const locale = useLocale();
   return element => {
     const entry = {
       options,
-      messages,
+      messages: fileDropMessages,
       locale
     };
     // A ref runs before its element is inserted; registering after insertion finds the document it ends up in.

package/dist/ssr/inputs/FileDropTarget.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["inputs/FileDropTarget.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, type JSX, onCleanup, onMount } from \"solid-js\";\nimport { useLocale } from \"../intl/locale\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { FILE_DROP_DEFAULT_REGION, type FileDropOptions, type FileDropTargetEntry, fileDropEngine, liveDocument } from \"./file-drop\";\n\nexport type { FileDropDetails, FileDropOptions, FileDropRejection } from \"./file-drop\";\n\nexport type FileDropTargetProps = FileDropOptions & {\n  /**\n   * The area that takes the files. Defaults to the nearest dialog, `AppWorkspace.Detail`, or `AppWorkspace.Main`\n   * around the component, and to the whole window outside of them.\n   */\n  for?: Element;\n};\n\ntype Rect = { top: number; left: number; width: number; height: number; radius: string };\n\n/**\n * Turns an area into a drop target while files from outside the page are dragged over the window. A calm overlay\n * covers the area without moving anything and says what dropping does; a more specific target inside it, such as a\n * folder row or a `FileDropzone`, takes the drop and its sentence while the pointer is over it. Text, links, and\n * elements dragged within the page never show it. Keep a visible upload button for keyboard and touch users.\n */\nexport function FileDropTarget(props: FileDropTargetProps): JSX.Element {\n  const messages = useUiMessages();\n  const locale = useLocale();\n  let overlay: HTMLDivElement | undefined;\n  const [rect, setRect] = createSignal<Rect>();\n  const region = () => props.for ?? overlay?.parentElement?.closest(FILE_DROP_DEFAULT_REGION) ?? overlay?.ownerDocument.documentElement;\n  const entry: FileDropTargetEntry = { options: props, messages, locale, region, host: () => overlay?.parentElement ?? undefined };\n  const [engine, setEngine] = createSignal<ReturnType<typeof fileDropEngine>>();\n\n  onMount(() => {\n    if (!overlay) return;\n    const drop = fileDropEngine(liveDocument(overlay));\n    onCleanup(drop.addRegion(entry));\n    setEngine(drop);\n  });\n\n  const shown = createMemo(() => engine()?.session()?.shown.includes(entry) ?? false);\n  const hover = createMemo(() => {\n    const current = engine()?.session()?.hover;\n    const element = region();\n    return current && element && (current.element === element || element.contains(current.element)) ? current : null;\n  });\n  const state = () => (hover() ? (hover()!.invalid ? \"invalid\" : \"over\") : \"available\");\n  const sentence = () => {\n    const current = hover();\n    if (current?.invalid) return messages().fileTypeNotAccepted;\n    return current ? current.entry.options.label : props.label;\n  };\n\n  createEffect(() => {\n    if (!shown()) return;\n    engine()?.frame();\n    const element = region();\n    const view = overlay?.ownerDocument.defaultView;\n    if (!element || !view) return;\n    // The overlay keeps to the visible part of its area, so its sentence stays on screen.\n    const bounds =\n      element === element.ownerDocument.documentElement\n        ? new DOMRect(0, 0, view.innerWidth, view.innerHeight)\n        : element.getBoundingClientRect();\n    const top = Math.max(0, bounds.top);\n    const left = Math.max(0, bounds.left);\n    const next = {\n      top,\n      left,\n      width: Math.max(0, Math.min(view.innerWidth, bounds.right) - left),\n      height: Math.max(0, Math.min(view.innerHeight, bounds.bottom) - top),\n      radius: view.getComputedStyle(element).borderRadius,\n    };\n    const previous = rect();\n    if (\n      !previous ||\n      previous.top !== next.top ||\n      previous.left !== next.left ||\n      previous.width !== next.width ||\n      previous.height !== next.height ||\n      previous.radius !== next.radius\n    )\n      setRect(next);\n  });\n\n  createEffect(() => {\n    if (!overlay?.showPopover) return;\n    const open = overlay.matches(\":popover-open\");\n    if (shown() && !open) overlay.showPopover();\n    else if (!shown() && open) overlay.hidePopover();\n  });\n  onCleanup(() => {\n    if (overlay?.matches?.(\":popover-open\")) overlay.hidePopover();\n  });\n\n  return (\n    <div\n      ref={overlay}\n      popover=\"manual\"\n      class=\"k2b-file-drop\"\n      data-state={state()}\n      aria-hidden=\"true\"\n      style={\n        rect()\n          ? {\n              top: `${rect()!.top}px`,\n              left: `${rect()!.left}px`,\n              width: `${rect()!.width}px`,\n              height: `${rect()!.height}px`,\n              \"border-radius\": rect()!.radius,\n            }\n          : undefined\n      }\n    >\n      <span class=\"k2b-file-drop__message\">\n        <i class={state() === \"invalid\" ? \"ti ti-file-x\" : \"ti ti-upload\"} />\n        <span>{sentence()}</span>\n      </span>\n    </div>\n  );\n}\n\n/**\n * Makes one element a specific drop target, such as a folder row inside a `FileDropTarget` area: pass the result as\n * the element's `ref`. It wins over the area around it while the pointer is over it, and the area's overlay shows its\n * sentence. Calling the ref again with new options replaces them.\n */\nexport function fileDropTarget(options: FileDropOptions): (element: Element) => void {\n  const messages = useUiMessages();\n  const locale = useLocale();\n  return (element) => {\n    const entry = { options, messages, locale };\n    // A ref runs before its element is inserted; registering after insertion finds the document it ends up in.\n    queueMicrotask(() => fileDropEngine(liveDocument(element)).setTarget(element, entry));\n  };\n}\n"],"mappings":";;;;;AAAA,SAAS,YAAY,EAAE,UAAU,EAAE,YAAY,EAAY,SAAS,EAAE,OAAO,QAAQ,UAAU;AAC/F,SAAS,SAAS,QAAQ,gBAAgB;AAC1C,SAAS,aAAa,QAAQ,kBAAkB;AAChD,SAAS,wBAAwB,EAAkD,cAAc,EAAE,YAAY,QAAQ,aAAa;AAcpI;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAAS,cAAc,CAAC,KAA0B,EAAe;EACtE,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC;EAChC,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC;EAC1B,IAAI,OAAmC;EACvC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,YAAY,CAAO,CAAC;EAC5C,MAAM,MAAM,GAAG,MAAM,KAAK,CAAC,GAAG,IAAI,OAAO,EAAE,aAAa,EAAE,OAAO,CAAC,wBAAwB,CAAC,IAAI,OAAO,EAAE,aAAa,CAAC,eAAe;EACrI,MAAM,KAA0B,GAAG;IAAE,OAAO,EAAE,KAAK;IAAE,QAAQ;IAAE,MAAM;IAAE,MAAM;IAAE,IAAI,EAAE,MAAM,OAAO,EAAE,aAAa,IAAI;EAAU,CAAC;EAChI,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,YAAY,CAAoC,CAAC;EAE7E,OAAO,CAAC,MAAM;IACZ,IAAI,CAAC,OAAO,EAAE;IACd,MAAM,IAAI,GAAG,cAAc,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAClD,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAChC,SAAS,CAAC,IAAI,CAAC;EACjB,CAAC,CAAC;EAEF,MAAM,KAAK,GAAG,UAAU,CAAC,MAAM,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC;EACnF,MAAM,KAAK,GAAG,UAAU,CAAC,MAAM;IAC7B,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK;IAC1C,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC;IACxB,OAAO,OAAO,IAAI,OAAO,KAAK,OAAO,CAAC,OAAO,KAAK,OAAO,IAAI,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,OAAO,GAAG,IAAI;EAClH,CAAC,CAAC;EACF,MAAM,KAAK,GAAG,MAAO,KAAK,CAAC,CAAC,GAAI,KAAK,CAAC,CAAC,CAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAI,WAAY;EACrF,MAAM,QAAQ,GAAG,MAAM;IACrB,MAAM,OAAO,GAAG,KAAK,CAAC,CAAC;IACvB,IAAI,OAAO,EAAE,OAAO,EAAE,OAAO,QAAQ,CAAC,CAAC,CAAC,mBAAmB;IAC3D,OAAO,OAAO,GAAG,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK;EAC5D,CAAC;EAED,YAAY,CAAC,MAAM;IACjB,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE;IACd,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;IACjB,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC;IACxB,MAAM,IAAI,GAAG,OAAO,EAAE,aAAa,CAAC,WAAW;IAC/C,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,EAAE;IACvB;IACA,MAAM,MAAM,GACV,OAAO,KAAK,OAAO,CAAC,aAAa,CAAC,eAAe,GAC7C,IAAI,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,GACpD,OAAO,CAAC,qBAAqB,CAAC,CAAC;IACrC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC;IACnC,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC;IACrC,MAAM,IAAI,GAAG;MACX,GAAG;MACH,IAAI;MACJ,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;MAClE,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC;MACpE,MAAM,EAAE,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACzC,CAAC;IACD,MAAM,QAAQ,GAAG,IAAI,CAAC,CAAC;IACvB,IACE,CAAC,QAAQ,IACT,QAAQ,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,IACzB,QAAQ,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,IAC3B,QAAQ,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,IAC7B,QAAQ,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,IAC/B,QAAQ,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,EAE/B,OAAO,CAAC,IAAI,CAAC;EACjB,CAAC,CAAC;EAEF,YAAY,CAAC,MAAM;IACjB,IAAI,CAAC,OAAO,EAAE,WAAW,EAAE;IAC3B,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC;IAC7C,IAAI,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,KACvC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;EAClD,CAAC,CAAC;EACF,SAAS,CAAC,MAAM;IACd,IAAI,OAAO,EAAE,OAAO,GAAG,eAAe,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;EAChE,CAAC,CAAC;EAEF,2DAKgB,KAAK,CAAC,CAAC,4BAGjB,IAAI,CAAC,CAAC,GACF;IACE,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC,CAAE,GAAG,IAAI;IACvB,IAAI,EAAE,GAAG,IAAI,CAAC,CAAC,CAAE,IAAI,IAAI;IACzB,KAAK,EAAE,GAAG,IAAI,CAAC,CAAC,CAAE,KAAK,IAAI;IAC3B,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,CAAE,MAAM,IAAI;IAC7B,eAAe,EAAE,IAAI,CAAC,CAAC,CAAE;EAC3B,CAAC,GACD,SAAS,2BAIH,KAAK,CAAC,CAAC,KAAK,SAAS,GAAG,cAAc,GAAG,cAAc,mBAC1D,QAAQ,CAAC,CAAC;AAIzB;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,SAAS,cAAc,CAAC,OAAwB,EAA8B;EACnF,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC;EAChC,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC;EAC1B,OAAQ,OAAO,IAAK;IAClB,MAAM,KAAK,GAAG;MAAE,OAAO;MAAE,QAAQ;MAAE;IAAO,CAAC;IAC3C;IACA,cAAc,CAAC,MAAM,cAAc,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;EACvF,CAAC;AACH","ignoreList":[]}
+{"version":3,"names":[],"sources":["inputs/FileDropTarget.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, type JSX, onCleanup, onMount } from \"solid-js\";\nimport { useLocale } from \"../intl/locale\";\nimport { FILE_DROP_DEFAULT_REGION, type FileDropOptions, type FileDropTargetEntry, fileDropEngine, liveDocument } from \"./file-drop\";\nimport { useFileDropMessages } from \"./file-drop-messages\";\n\nexport type { FileDropDetails, FileDropOptions, FileDropRejection } from \"./file-drop\";\n\nexport type FileDropTargetProps = FileDropOptions & {\n  /**\n   * The area that takes the files. Defaults to the nearest dialog, `AppWorkspace.Detail`, or `AppWorkspace.Main`\n   * around the component, and to the whole window outside of them.\n   */\n  for?: Element;\n};\n\ntype Rect = { top: number; left: number; width: number; height: number; radius: string };\n\n/**\n * Turns an area into a drop target while files from outside the page are dragged over the window. A calm overlay\n * covers the area without moving anything and says what dropping does; a more specific target inside it, such as a\n * folder row or a `FileDropzone`, takes the drop and its sentence while the pointer is over it. Text, links, and\n * elements dragged within the page never show it. Keep a visible upload button for keyboard and touch users.\n */\nexport function FileDropTarget(props: FileDropTargetProps): JSX.Element {\n  const fileDropMessages = useFileDropMessages();\n  const locale = useLocale();\n  let overlay: HTMLDivElement | undefined;\n  const [rect, setRect] = createSignal<Rect>();\n  const region = () => props.for ?? overlay?.parentElement?.closest(FILE_DROP_DEFAULT_REGION) ?? overlay?.ownerDocument.documentElement;\n  const entry: FileDropTargetEntry = {\n    options: props,\n    messages: fileDropMessages,\n    locale,\n    region,\n    host: () => overlay?.parentElement ?? undefined,\n  };\n  const [engine, setEngine] = createSignal<ReturnType<typeof fileDropEngine>>();\n\n  onMount(() => {\n    if (!overlay) return;\n    const drop = fileDropEngine(liveDocument(overlay));\n    onCleanup(drop.addRegion(entry));\n    setEngine(drop);\n  });\n\n  const shown = createMemo(() => engine()?.session()?.shown.includes(entry) ?? false);\n  const hover = createMemo(() => {\n    const current = engine()?.session()?.hover;\n    const element = region();\n    return current && element && (current.element === element || element.contains(current.element)) ? current : null;\n  });\n  const state = () => (hover() ? (hover()!.invalid ? \"invalid\" : \"over\") : \"available\");\n  const sentence = () => {\n    const current = hover();\n    if (current?.invalid) return fileDropMessages().fileTypeNotAccepted;\n    return current ? current.entry.options.label : props.label;\n  };\n\n  createEffect(() => {\n    if (!shown()) return;\n    engine()?.frame();\n    const element = region();\n    const view = overlay?.ownerDocument.defaultView;\n    if (!element || !view) return;\n    // The overlay keeps to the visible part of its area, so its sentence stays on screen.\n    const bounds =\n      element === element.ownerDocument.documentElement\n        ? new DOMRect(0, 0, view.innerWidth, view.innerHeight)\n        : element.getBoundingClientRect();\n    const top = Math.max(0, bounds.top);\n    const left = Math.max(0, bounds.left);\n    const next = {\n      top,\n      left,\n      width: Math.max(0, Math.min(view.innerWidth, bounds.right) - left),\n      height: Math.max(0, Math.min(view.innerHeight, bounds.bottom) - top),\n      radius: view.getComputedStyle(element).borderRadius,\n    };\n    const previous = rect();\n    if (\n      !previous ||\n      previous.top !== next.top ||\n      previous.left !== next.left ||\n      previous.width !== next.width ||\n      previous.height !== next.height ||\n      previous.radius !== next.radius\n    )\n      setRect(next);\n  });\n\n  createEffect(() => {\n    if (!overlay?.showPopover) return;\n    const open = overlay.matches(\":popover-open\");\n    if (shown() && !open) overlay.showPopover();\n    else if (!shown() && open) overlay.hidePopover();\n  });\n  onCleanup(() => {\n    if (overlay?.matches?.(\":popover-open\")) overlay.hidePopover();\n  });\n\n  return (\n    <div\n      ref={overlay}\n      popover=\"manual\"\n      class=\"k2b-file-drop\"\n      data-state={state()}\n      aria-hidden=\"true\"\n      style={\n        rect()\n          ? {\n              top: `${rect()!.top}px`,\n              left: `${rect()!.left}px`,\n              width: `${rect()!.width}px`,\n              height: `${rect()!.height}px`,\n              \"border-radius\": rect()!.radius,\n            }\n          : undefined\n      }\n    >\n      <span class=\"k2b-file-drop__message\">\n        <i class={state() === \"invalid\" ? \"ti ti-file-x\" : \"ti ti-upload\"} />\n        <span>{sentence()}</span>\n      </span>\n    </div>\n  );\n}\n\n/**\n * Makes one element a specific drop target, such as a folder row inside a `FileDropTarget` area: pass the result as\n * the element's `ref`. It wins over the area around it while the pointer is over it, and the area's overlay shows its\n * sentence. Calling the ref again with new options replaces them.\n */\nexport function fileDropTarget(options: FileDropOptions): (element: Element) => void {\n  const fileDropMessages = useFileDropMessages();\n  const locale = useLocale();\n  return (element) => {\n    const entry = { options, messages: fileDropMessages, locale };\n    // A ref runs before its element is inserted; registering after insertion finds the document it ends up in.\n    queueMicrotask(() => fileDropEngine(liveDocument(element)).setTarget(element, entry));\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/inputs/FileInputs.js

@@ -26,13 +26,17 @@ import { createEffect, createMemo, createSignal, For, mergeProps, onCleanup, onM
 import { Button, IconButton } from "../actions/Button";
 import { Tooltip } from "../feedback/Tooltip";
 import { createFieldMeta, Field, fieldControlAria } from "../internal/field";
+import { suppressTextSelection } from "../internal/text-selection";
 import { useUiMessages } from "../intl/messages";
 import { fileDropTarget } from "./FileDropTarget";
 import { commitFieldValue, resolveMaybeAccessor } from "./field-contract";
 import { fileDropEngine, liveDocument } from "./file-drop";
+import { useFileDropMessages } from "./file-drop-messages";
+import { useFileInputMessages } from "./file-input-messages";
 import { clampImageCropRect, getInitialImageCropRect, resizeImageCropFromCorner, rotateImageCropRight } from "./image-crop";
 export function FileDropzone(props) {
-  const messages = useUiMessages();
+  const fileInputMessages = useFileInputMessages();
+  const fileDropMessages = useFileDropMessages();
   const meta = createFieldMeta(props.id);
   const disabled = () => Boolean(props.disabled || props.busy);
   const [chooseError, setChooseError] = createSignal();
@@ -46,11 +50,11 @@ export function FileDropzone(props) {
   };
   const choose = chooseFiles => {
     setChooseError();
-    chooseFiles().then(files => emit([...files]), cause => setChooseError(cause instanceof Error && cause.message ? cause.message : messages().failedLoadFiles));
+    chooseFiles().then(files => emit([...files]), cause => setChooseError(cause instanceof Error && cause.message ? cause.message : fileInputMessages().failedLoadFiles));
   };
   // Drops take the same path as every other file drop target: files only, the most specific target wins, and files
   // that do not fit `accept` are left out with a message.
-  const dropLabel = () => props.dropLabel ?? messages().dropToUpload;
+  const dropLabel = () => props.dropLabel ?? fileInputMessages().dropToUpload;
   const dropRef = fileDropTarget({
     get label() {
       return dropLabel();
@@ -77,7 +81,7 @@ export function FileDropzone(props) {
     if (!hover || hover.element !== element) return undefined;
     return hover.invalid ? "invalid" : "over";
   });
-  const title = () => props.busy ? messages().uploading : dragState() === "invalid" ? messages().fileTypeNotAccepted : dragState() === "over" ? dropLabel() : props.title ?? messages().dropFiles;
+  const title = () => props.busy ? fileInputMessages().uploading : dragState() === "invalid" ? fileDropMessages().fileTypeNotAccepted : dragState() === "over" ? dropLabel() : props.title ?? fileInputMessages().dropFiles;
   return _$createComponent(Field, {
     get ["class"]() {
       return props.class;
@@ -128,7 +132,7 @@ export function FileDropzone(props) {
           });
         },
         get children() {
-          return _$ssr(_tmpl$2, _$escape(messages().chooseMatchingFile));
+          return _$ssr(_tmpl$2, _$escape(fileInputMessages().chooseMatchingFile));
         }
       })), _$escape(_$createComponent(Show, {
         get when() {
@@ -142,7 +146,7 @@ export function FileDropzone(props) {
           return !props.choose;
         },
         get children() {
-          return _$ssr(_tmpl$5, _$ssrAttribute("aria-label", _$escape(props["aria-label"] ?? (typeof props.label === "string" ? props.label : props.multiple === false ? messages().chooseFile : messages().chooseFiles), true), false) + _$ssrAttribute("accept", _$escape(props.accept, true), false), _$ssrAttribute("multiple", props.multiple ?? true, true), _$ssrAttribute("disabled", disabled(), true));
+          return _$ssr(_tmpl$5, _$ssrAttribute("aria-label", _$escape(props["aria-label"] ?? (typeof props.label === "string" ? props.label : props.multiple === false ? fileInputMessages().chooseFile : fileInputMessages().chooseFiles), true), false) + _$ssrAttribute("accept", _$escape(props.accept, true), false), _$ssrAttribute("multiple", props.multiple ?? true, true), _$ssrAttribute("disabled", disabled(), true));
         }
       })];
     }
@@ -157,6 +161,7 @@ const defaultImageTransform = async file => {
 };
 export function ImageInput(props) {
   const messages = useUiMessages();
+  const fileInputMessages = useFileInputMessages();
   const meta = createFieldMeta(props.id);
   const [busy, setBusy] = createSignal(false);
   const [localError, setLocalError] = createSignal();
@@ -168,7 +173,7 @@ export function ImageInput(props) {
     return current && !current.includes(props.fallbackMarker ?? "?fallback") ? current : null;
   };
   const compact = () => props.variant === "small";
-  const changeLabel = () => value() ? messages().changeImage : messages().addImage;
+  const changeLabel = () => value() ? fileInputMessages().changeImage : fileInputMessages().addImage;
   const changeIcon = () => value() ? "ti ti-pencil" : "ti ti-photo-plus";
   const select = async file => {
     if (!file || disabled()) return;
@@ -178,7 +183,7 @@ export function ImageInput(props) {
       const transformed = await (props.transform ?? defaultImageTransform)(file);
       commitFieldValue(props, transformed);
     } catch (error) {
-      setLocalError(error instanceof Error ? error.message : messages().imageProcessingFailed);
+      setLocalError(error instanceof Error ? error.message : fileInputMessages().imageProcessingFailed);
     } finally {
       setBusy(false);
       if (input) input.value = "";
@@ -215,7 +220,7 @@ export function ImageInput(props) {
         get fallback() {
           return _$ssr(_tmpl$9);
         },
-        children: source => _$ssr(_tmpl$0, _$ssrAttribute("src", _$escape(source(), true), false) + _$ssrAttribute("alt", typeof props.label === "string" ? _$escape(props.label, true) : _$escape(messages().selectedImage, true), false))
+        children: source => _$ssr(_tmpl$0, _$ssrAttribute("src", _$escape(source(), true), false) + _$ssrAttribute("alt", typeof props.label === "string" ? _$escape(props.label, true) : _$escape(fileInputMessages().selectedImage, true), false))
       })), _$escape(_$createComponent(Show, {
         get when() {
           return compact();
@@ -227,7 +232,7 @@ export function ImageInput(props) {
               return busy();
             },
             get loadingLabel() {
-              return messages().processingImage;
+              return fileInputMessages().processingImage;
             },
             get disabled() {
               return disabled();
@@ -247,7 +252,7 @@ export function ImageInput(props) {
               return busy();
             },
             get loadingLabel() {
-              return messages().processingImage;
+              return fileInputMessages().processingImage;
             },
             get disabled() {
               return disabled();
@@ -282,7 +287,7 @@ export function ImageInput(props) {
             get children() {
               return _$createComponent(IconButton, {
                 get label() {
-                  return messages().removeImage;
+                  return fileInputMessages().removeImage;
                 },
                 get disabled() {
                   return disabled();
@@ -348,7 +353,7 @@ const loadPreviewState = async source => {
   }
 };
 export function ImageCropper(props) {
-  const messages = useUiMessages();
+  const fileInputMessages = useFileInputMessages();
   let frame;
   let activePreview = null;
   const aspect = () => props.aspect ?? "free";
@@ -400,7 +405,7 @@ export function ImageCropper(props) {
         if (disposed) return;
         replacePreview(null);
         setCrop(null);
-        setError(messages().failedLoadImage);
+        setError(fileInputMessages().failedLoadImage);
       } finally {
         if (!disposed) setLoading(false);
       }
@@ -453,20 +458,23 @@ export function ImageCropper(props) {
     }
     setCrop(resizeImageCropFromCorner(start, currentSize, aspect(), state.handle, dx, dy));
   };
+  let releaseTextSelection;
   const endDrag = event => {
     const state = drag();
     if (!state || state.pointerId !== event.pointerId) return;
     window.removeEventListener("pointermove", moveCrop);
     window.removeEventListener("pointerup", endDrag);
     window.removeEventListener("pointercancel", endDrag);
+    releaseTextSelection?.();
     setDrag(null);
   };
   const startDrag = (handle, event) => {
     const currentCrop = crop();
-    if (!currentCrop || disabled()) return;
+    if (!currentCrop || disabled() || event.button !== 0) return;
     event.preventDefault();
     event.stopPropagation();
     event.currentTarget.setPointerCapture?.(event.pointerId);
+    releaseTextSelection = suppressTextSelection(event.pointerId);
     const point = readPointerPosition(event);
     setDrag({
       handle,
@@ -484,6 +492,7 @@ export function ImageCropper(props) {
     window.removeEventListener("pointermove", moveCrop);
     window.removeEventListener("pointerup", endDrag);
     window.removeEventListener("pointercancel", endDrag);
+    releaseTextSelection?.();
   });
   const rotateRight = () => {
     if (disabled()) return;
@@ -544,7 +553,7 @@ export function ImageCropper(props) {
       return !loading();
     },
     get fallback() {
-      return _$ssr(_tmpl$12, _$escape(messages().preparingImage));
+      return _$ssr(_tmpl$12, _$escape(fileInputMessages().preparingImage));
     },
     get children() {
       return _$createComponent(Show, {
@@ -560,14 +569,14 @@ export function ImageCropper(props) {
               return _$memo(() => !!preview())() && crop();
             },
             get children() {
-              return _$ssr(_tmpl$10, _$ssrStyle(previewFrameStyle()), _$ssrAttribute("src", _$escape(preview().url, true), false) + _$ssrAttribute("alt", _$escape(messages().cropPreview, true), false), _$ssrStyle(previewImageStyle()), _$ssrAttribute("data-shape", _$escape(previewShape(), true), false), _$ssrStyle(cropStyle()), _$ssrAttribute("tabindex", disabled() ? _$escape(undefined, true) : 0, false) + _$ssrAttribute("aria-label", _$escape(messages().cropArea, true), false), _$escape(_$createComponent(Show, {
+              return _$ssr(_tmpl$10, _$ssrStyle(previewFrameStyle()), _$ssrAttribute("src", _$escape(preview().url, true), false) + _$ssrAttribute("alt", _$escape(fileInputMessages().cropPreview, true), false), _$ssrStyle(previewImageStyle()), _$ssrAttribute("data-shape", _$escape(previewShape(), true), false), _$ssrStyle(cropStyle()), _$ssrAttribute("tabindex", disabled() ? _$escape(undefined, true) : 0, false) + _$ssrAttribute("aria-label", _$escape(fileInputMessages().cropArea, true), false), _$escape(_$createComponent(Show, {
                 get when() {
                   return showResizeHandles();
                 },
                 get children() {
                   return _$createComponent(For, {
                     each: ["nw", "ne", "sw", "se"],
-                    children: handle => _$ssr(_tmpl$14, _$ssrAttribute("data-handle", _$escape(handle, true), false) + _$ssrAttribute("aria-label", _$escape(messages().resizeCrop({
+                    children: handle => _$ssr(_tmpl$14, _$ssrAttribute("data-handle", _$escape(handle, true), false) + _$ssrAttribute("aria-label", _$escape(fileInputMessages().resizeCrop({
                       handle
                     }), true), false), _$ssrAttribute("disabled", disabled(), true))
                   });
@@ -576,10 +585,10 @@ export function ImageCropper(props) {
                 type: "button",
                 "class": "k2b-image-cropper__rotate",
                 get content() {
-                  return messages().rotateRight;
+                  return fileInputMessages().rotateRight;
                 },
                 get ["aria-label"]() {
-                  return messages().rotateRight;
+                  return fileInputMessages().rotateRight;
                 },
                 get disabled() {
                   return disabled() || !crop() || Boolean(error());