@k2b/ui 0.21.0 → 0.22.0

package/dist/browser/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":";;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,GAAG,EAAY,IAAI,EAAE,UAAU,QAAQ,UAAU;AAC1D,SAAS,eAAe,EAAE,KAAK,EAAE,gBAAgB,QAAQ,mBAAmB;AAC5E,SAAS,aAAa,QAAQ,kBAAkB;AAEhD,SAAS,gBAAgB,EAAE,oBAAoB,QAAQ,kBAAkB;AAWzE,OAAO,SAAS,QAAQ,CAAC,KAAoB,EAAe;EAC1D,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC;EAChC,MAAM,IAAI,GAAG,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;EACtC,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC;EACnD,IAAI,MAA0B,GAAG,EAAE;EACnC,MAAM,MAAM,GAAG,MAAM,CAAC,oBAAoB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;EACpG,MAAM,KAAK,GAAG,MAAM,oBAAoB,CAAC,KAAK,CAAC,KAAK,CAAC;EACrD,MAAM,IAAI,GAAI,KAAa,IAAK;IAC9B,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC;IAC5B,IAAI,KAAK,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC;EAC7D,CAAC;EAED,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,KAAa,KAAK;IACpD,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAAE;IACtC,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC;IACxB,IAAI,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,CAAC;IACrE,IAAI,KAAK,IAAI,KAAK,GAAG,MAAM,CAAC,CAAC,GAAG,CAAC,EAAE;MACjC,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;MAC1B,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;IAC7B;EACF,CAAC;EAED,MAAM,aAAa,GAAG,CAAC,KAAa,EAAE,KAAoB,KAAK;IAC7D,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAAE;IACtC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;MAChF,KAAK,CAAC,cAAc,CAAC,CAAC;MACtB,KAAK,CAAC,QAAQ,CAAC,CAAC;IAClB,CAAC,MAAM,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,GAAG,CAAC,EAAE;MACjD,KAAK,CAAC,cAAc,CAAC,CAAC;MACtB,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;MAC1B,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;IAC7B,CAAC,MAAM,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,IAAI,KAAK,GAAG,MAAM,CAAC,CAAC,GAAG,CAAC,EAAE;MAC7D,KAAK,CAAC,cAAc,CAAC,CAAC;MACtB,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;MAC1B,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;IAC7B,CAAC,MAAM,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE;MACrE,KAAK,CAAC,cAAc,CAAC,CAAC;MACtB,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC;MACxB,IAAI,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;MAC7D,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;MAC1B,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;IAC7B;EACF,CAAC;EAED,MAAM,WAAW,GAAI,KAAqB,IAAK;IAC7C,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAAE;IACtC,MAAM,MAAM,GAAG,KAAK,CAAC,aAAa,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;IACtE,IAAI,CAAC,MAAM,EAAE;IACb,KAAK,CAAC,cAAc,CAAC,CAAC;IACtB,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,aAAiC,CAAC;IAC1E,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,GAAG,OAAO,GAAG,CAAC;IACxC,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC;IAChD,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC;IACxB,IAAI,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;IACrG,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC;IAC1D,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC;IACrB,MAAM,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC;EACxB,CAAC;EAED,yBACG,KAAK;IAAA;MAAA,OACG,KAAK,CAAC,KAAK;IAAA;IAAA,IAClB,KAAK;MAAA,OAAE,KAAK,CAAC,KAAK;IAAA;IAAA,IAClB,WAAW;MAAA,OAAE,KAAK,CAAC,WAAW;IAAA;IAAA,IAC9B,KAAK;MAAA,OAAE,KAAK,CAAC,CAAC;IAAA;IACd,IAAI,EAAE,IAAI;IACV,QAAQ,EAAE,KAAK;IAAA,IACf,QAAQ;MAAA,OAAE,KAAK,CAAC,QAAQ;IAAA;IAAA,IACxB,QAAQ;MAAA,OAAE,KAAK,CAAC,QAAQ;IAAA;IAAA;MAAA;QAAA;QAAA;UAAA,IAItB,EAAE;YAAA,OAAE,IAAI,CAAC,SAAS;UAAA;UAAA;YAAA,OACJ,KAAK,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS;UAAA;QAAA,SAE5C,gBAAgB,CAAC,IAAI,EAAE,KAAK,CAAC;UAAA,WACxB;QAAW;QAAA,iCAEnB,GAAG;UAAA,IAAC,IAAI;YAAA,OAAE,KAAK,CAAC,IAAI,CAAC;cAAE,MAAM,EAAE,MAAM,CAAC;YAAE,CAAC,CAAC;UAAA;UAAA,UACxC,CAAC,CAAC,EAAE,KAAK;YAAA;YAAA,gCAmBI,KAAK,IAAK,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YAAA,kBADpC,KAAK,IAAK,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC;YAAA,gBADzC,KAAK,IAAK,WAAW,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;YAAA,MAf7D,OAAO,IAAK;cAChB,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,OAAO;YAC3B,CAAC;YAAA;cAAA,UAEY,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,SAAS;gBAAA,OAC7C,KAAK,CAAC,QAAQ,GAAG,UAAU,GAAG,MAAM;gBAAA,OAMhC,KAAK,CAAC,QAAQ;gBAAA,OACd,KAAK,CAAC,QAAQ;gBAAA,OACd,KAAK,CAAC,QAAQ;gBAAA,OACZ,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;kBAAE,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,CAAC;kBAAE,KAAK,EAAE,MAAM,CAAC;gBAAE,CAAC,CAAC;cAAA;cAAA;cAAA;cAAA;cAAA;cAAA;cAAA;YAAA;cAAA;cAAA;cAAA;cAAA;cAAA;cAAA;YAAA;YAAA,6CAJjE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE;YAAA;YAAA;UAAA;QASjC;QAAA;QAAA;MAAA,wBAGJ,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,IAAI;QAAA;QAAA,UAAI,IAAI;UAAA;UAAA,6CAAgC,IAAI,CAAC,CAAC;UAAA,6CAAS,MAAM,CAAC,CAAC;UAAA;QAAA;MAAI;IAAA;EAAA;AAG/F;AAYA,OAAO,SAAS,MAAM,CAAC,KAAkB,EAAe;EACtD,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,CACtC,kBAAkB,EAClB,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,cAAc,EACd,aAAa,EACb,OAAO,EACP,IAAI,EACJ,OAAO,EACP,eAAe,EACf,eAAe,EACf,UAAU,EACV,WAAW,EACX,OAAO,EACP,aAAa,CACd,CAAC;EACF,MAAM,IAAI,GAAG,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;EACtC,MAAM,GAAG,GAAG,MAAM,MAAM,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;EACvC,MAAM,GAAG,GAAG,MAAM,MAAM,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC;EACzC,MAAM,KAAK,GAAG,MAAM,oBAAoB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC;EAC9D,MAAM,KAAK,GAAG,MAAM,oBAAoB,CAAC,KAAK,CAAC,KAAK,CAAC;EACrD,MAAM,UAAU,GAAG,MAAM;IACvB,MAAM,IAAI,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;IAC1B,OAAO,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAG,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,IAAI,IAAI,GAAI,GAAG,CAAC,CAAC;EACrF,CAAC;EACD,MAAM,KAAK,GAAG,MAAM;IAClB,MAAM,QAAQ,GAAG,UAAU,CAAC,CAAC;IAC7B,IAAI,KAAK,CAAC,MAAM,EAAE;MAChB,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,QAAQ,CAAC;MAClC,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,QAAQ,CAAC;MACnC,OAAO,wDAAwD,GAAG,wBAAwB,GAAG,KAAK,IAAI,+BAA+B,IAAI,SAAS;IACpJ;IACA,OAAO,iDAAiD,QAAQ,+BAA+B,QAAQ,SAAS;EAClH,CAAC;EACD,MAAM,UAAU,GAAG,MAAM,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;EAE3F,yBACG,KAAK;IAAA;MAAA,OACG,KAAK,CAAC,KAAK;IAAA;IAAA,IAClB,KAAK;MAAA,OAAE,KAAK,CAAC,KAAK;IAAA;IAAA,IAClB,WAAW;MAAA,OAAE,KAAK,CAAC,WAAW;IAAA;IAAA,IAC9B,KAAK;MAAA,OAAE,KAAK,CAAC,CAAC;IAAA;IACd,IAAI,EAAE,IAAI;IAAA,IACV,QAAQ;MAAA,OAAE,KAAK,CAAC,QAAQ;IAAA;IAAA,IACxB,QAAQ;MAAA,OAAE,IAAI,CAAC,QAAQ;IAAA;IAAA;MAAA;QAAA;QAAA;QAAA;MAAA,6BAIf,IAAI;QAAA,IACR,EAAE;UAAA,OAAE,IAAI,CAAC,SAAS;QAAA;QAAA,QACb,OAAO;QAAA,IACZ,KAAK;UAAA,OAAE,KAAK,CAAC,CAAC;QAAA;QAAA,IACd,KAAK;UAAA,OAAE;YAAE,UAAU,EAAE,KAAK,CAAC;UAAE,CAAC;QAAA;MAAA,SAC1B,gBAAgB,CAAC,IAAI,EAAE,KAAK,CAAC;QAAA,WACvB,KAAK,IAAK,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC;QAAA,YACjE,KAAK,IAAK,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC;QAAA,cACjE,MAAM;UAChB,MAAM,IAAI,GAAG,UAAU,CAAC,CAAC;UACzB,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC;QAC/B;MAAC;MAAA,kCAEF,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,SAAS,IAAI,IAAI;QAAA;QAAA;UAAA;UAAA,sBACH,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC;UAAA,4CAAxD,IAAI,CAAC,SAAS;UAAA;QAAA;MAAA;MAAA;MAAA;IAAA;EAAA;AAKrC;AAUA,OAAO,SAAS,UAAU,CAAC,KAAsB,EAAe;EAC9D,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC;EAChC,MAAM,IAAI,GAAG,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;EACtC,MAAM,YAAY,GAAG,MAAM,oBAAoB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,SAAS;EACzE,MAAM,aAAa,GAAG,MAAM,oBAAoB,CAAC,KAAK,CAAC,gBAAgB,CAAC,IAAI,KAAK;EACjF,MAAM,KAAK,GAAG,MAAM,oBAAoB,CAAC,KAAK,CAAC,KAAK,CAAC;EACrD,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK;EACnD,IAAI,MAAoC;EAExC,MAAM,OAAO,GAAG,MACd,OAAO,CAAC,CAAC;IAAA;MAAA;MAAA;IAAA;MAAA,IAKH,KAAK;QAAA,OAAE;UAAE,kBAAkB,EAAE,YAAY,CAAC;QAAE,CAAC;MAAA;MAAA,IAC7C,QAAQ;QAAA,OAAE,KAAK,CAAC,QAAQ;MAAA;IAAA,SACpB,gBAAgB,CAAC,IAAI,EAAE,KAAK,CAAC;MAAA,WACxB,MAAM,MAAM,EAAE,KAAK,CAAC;IAAC;IAAA,iCAWnB,KAAK,IAAK,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;IAAA,gBAD3D,KAAK,IAAK,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;IAAA,YAP/D,MAAM;IAAA,oDAAN,MAAM;IAAA;MAAA,WACP,IAAI,CAAC,SAAS;QAAA,OAGZ,KAAK,CAAC,IAAI;QAAA,OAEN,KAAK,CAAC,QAAQ;MAAA;MAAA;MAAA;MAAA;IAAA;MAAA;MAAA;MAAA;IAAA;IAAA,6CADjB,YAAY,CAAC,CAAC;IAAA;IAAA;EAAA;IAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;IAAA;MAAA,IAerB,QAAQ;QAAA,OAAE,KAAK,CAAC,QAAQ,IAAI,aAAa,CAAC,CAAC;MAAA;IAAA,SACvC,gBAAgB,CAAC,IAAI,EAAE,KAAK,CAAC;MAAA,WACxB,MAAM,MAAM,EAAE,KAAK,CAAC;IAAC;IAAA;MAAA,yBAOvB,aAAa,CAAC,CAAC;MAAA,aAAf,QAAkB,aAAa,GAAG,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IAAA;IAAA,mCAEtE,IAAI;MAAA,IAAC,IAAI;QAAA,OAAE,KAAK,CAAC,WAAW;MAAA;MAAA;QAAA;QAAA,iBAOhB,MAAM,KAAK,CAAC,wBAAwB,GAAG,CAAC,aAAa,CAAC,CAAC,CAAC;QAAA;UAAA,WAHrD,aAAa,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,cAAc;YAAA,OAC/D,aAAa,CAAC,CAAC;YAAA,QACnB,KAAK,CAAC,QAAQ;UAAA;UAAA;UAAA;UAAA;QAAA;UAAA;UAAA;UAAA;QAAA;QAAA;QAAA;MAAA;IAAA;IAAA,kCAef,KAAK,IAAK,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;IAAA,iBAD3D,KAAK,IAAK,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;IAAA,aAP/D,MAAM;IAAA,uDAAN,MAAM;IAAA;MAAA,YA9BE,KAAK,CAAC,QAAQ,IAAI,aAAa,CAAC,CAAC,GAAG,MAAM,GAAG,SAAS;QAAA,QACvD,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,SAAS;QAAA,QAWpB,aAAa,CAAC,CAAC,GAAG,MAAM,GAAG,SAAS;QAAA,QAC/C,aAAa,CAAC,CAAC,GAAG,SAAS,GAAG;UAAE,kBAAkB,EAAE,YAAY,CAAC;QAAE,CAAC;QAAA,QAkBzE,IAAI,CAAC,SAAS;QAAA,QAGZ,KAAK,CAAC,IAAI;QAAA,QAEN,KAAK,CAAC,QAAQ,IAAI,aAAa,CAAC,CAAC;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;IAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;IAAA;IAAA,8CADpC,YAAY,CAAC,CAAC;IAAA;IAAA;EAAA,IAM1B;EAEH,yBACG,KAAK;IAAA;MAAA,OACG,KAAK,CAAC,KAAK;IAAA;IAAA,IAClB,KAAK;MAAA,OAAE,KAAK,CAAC,KAAK;IAAA;IAAA,IAClB,WAAW;MAAA,OAAE,KAAK,CAAC,WAAW;IAAA;IAAA,IAC9B,KAAK;MAAA,OAAE,KAAK,CAAC,CAAC;IAAA;IACd,IAAI,EAAE,IAAI;IAAA,IACV,QAAQ;MAAA,OAAE,KAAK,CAAC,QAAQ;IAAA;IAAA,IACxB,QAAQ;MAAA,OAAE,KAAK,CAAC,QAAQ;IAAA;IAAA;MAAA,OAEvB,OAAO,CAAC,CAAC;IAAA;EAAA;AAGhB;AAAC","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/browser/inputs/Combobox.js

@@ -26,9 +26,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("");
@@ -208,7 +210,7 @@ export function Combobox(props) {
             var _el$16 = _$getNextElement(_tmpl$5);
             _$insert(_el$16, (() => {
               var _c$ = _$memo(() => query().length >= 2);
-              return () => _c$() ? messages().noResultsFound : messages().typeToSearch;
+              return () => _c$() ? selectMessages().noResultsFound : selectMessages().typeToSearch;
             })());
             return _el$16;
           })();

package/dist/browser/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          <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={\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/browser/inputs/FileDropTarget.js

@@ -9,8 +9,8 @@ import { use as _$use } from "solid-js/web";
 var _tmpl$ = /*#__PURE__*/_$template(`<div popover=manual class=k2b-file-drop aria-hidden=true><span class=k2b-file-drop__message><i></i><span>`);
 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
@@ -18,14 +18,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
@@ -46,7 +46,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(() => {
@@ -114,12 +114,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/browser/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":"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","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/browser/inputs/FileInputs.js

@@ -33,13 +33,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();
@@ -53,11 +57,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();
@@ -84,7 +88,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;
@@ -156,7 +160,7 @@ export function FileDropzone(props) {
           },
           get children() {
             var _el$6 = _$getNextElement(_tmpl$);
-            _$insert(_el$6, () => messages().chooseMatchingFile);
+            _$insert(_el$6, () => fileInputMessages().chooseMatchingFile);
             return _el$6;
           }
         }), _el$9, _co$);
@@ -189,7 +193,7 @@ export function FileDropzone(props) {
           var _ref$ = input;
           typeof _ref$ === "function" ? _$use(_ref$, _el$10) : input = _el$10;
           _$effect(_p$ => {
-            var _v$ = props["aria-label"] ?? (typeof props.label === "string" ? props.label : props.multiple === false ? messages().chooseFile : messages().chooseFiles),
+            var _v$ = props["aria-label"] ?? (typeof props.label === "string" ? props.label : props.multiple === false ? fileInputMessages().chooseFile : fileInputMessages().chooseFiles),
               _v$2 = props.accept,
               _v$3 = props.multiple ?? true,
               _v$4 = disabled();
@@ -219,6 +223,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();
@@ -230,7 +235,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;
@@ -240,7 +245,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 = "";
@@ -286,7 +291,7 @@ export function ImageInput(props) {
           var _el$23 = _$getNextElement(_tmpl$9);
           _$effect(_p$ => {
             var _v$0 = source(),
-              _v$1 = typeof props.label === "string" ? props.label : messages().selectedImage;
+              _v$1 = typeof props.label === "string" ? props.label : fileInputMessages().selectedImage;
             _v$0 !== _p$.e && _$setAttribute(_el$23, "src", _p$.e = _v$0);
             _v$1 !== _p$.t && _$setAttribute(_el$23, "alt", _p$.t = _v$1);
             return _p$;
@@ -308,7 +313,7 @@ export function ImageInput(props) {
               return busy();
             },
             get loadingLabel() {
-              return messages().processingImage;
+              return fileInputMessages().processingImage;
             },
             get disabled() {
               return disabled();
@@ -332,7 +337,7 @@ export function ImageInput(props) {
               return busy();
             },
             get loadingLabel() {
-              return messages().processingImage;
+              return fileInputMessages().processingImage;
             },
             get disabled() {
               return disabled();
@@ -370,7 +375,7 @@ export function ImageInput(props) {
             get children() {
               return _$createComponent(IconButton, {
                 get label() {
-                  return messages().removeImage;
+                  return fileInputMessages().removeImage;
                 },
                 get disabled() {
                   return disabled();
@@ -463,7 +468,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";
@@ -515,7 +520,7 @@ export function ImageCropper(props) {
         if (disposed) return;
         replacePreview(null);
         setCrop(null);
-        setError(messages().failedLoadImage);
+        setError(fileInputMessages().failedLoadImage);
       } finally {
         if (!disposed) setLoading(false);
       }
@@ -568,20 +573,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,
@@ -599,6 +607,7 @@ export function ImageCropper(props) {
     window.removeEventListener("pointermove", moveCrop);
     window.removeEventListener("pointerup", endDrag);
     window.removeEventListener("pointercancel", endDrag);
+    releaseTextSelection?.();
   });
   const rotateRight = () => {
     if (disabled()) return;
@@ -664,7 +673,7 @@ export function ImageCropper(props) {
       get fallback() {
         return (() => {
           var _el$34 = _$getNextElement(_tmpl$11);
-          _$insert(_el$34, () => messages().preparingImage);
+          _$insert(_el$34, () => fileInputMessages().preparingImage);
           return _el$34;
         })();
       },
@@ -709,7 +718,7 @@ export function ImageCropper(props) {
                         _el$36.$$pointerdown = event => startDrag(handle, event);
                         _$setAttribute(_el$36, "data-handle", handle);
                         _$effect(_p$ => {
-                          var _v$18 = messages().resizeCrop({
+                          var _v$18 = fileInputMessages().resizeCrop({
                               handle
                             }),
                             _v$19 = disabled();
@@ -730,10 +739,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());
@@ -746,12 +755,12 @@ export function ImageCropper(props) {
                 _$effect(_p$ => {
                   var _v$10 = previewFrameStyle(),
                     _v$11 = preview().url,
-                    _v$12 = messages().cropPreview,
+                    _v$12 = fileInputMessages().cropPreview,
                     _v$13 = previewImageStyle(),
                     _v$14 = previewShape(),
                     _v$15 = cropStyle(),
                     _v$16 = disabled() ? undefined : 0,
-                    _v$17 = messages().cropArea;
+                    _v$17 = fileInputMessages().cropArea;
                   _p$.e = _$style(_el$28, _v$10, _p$.e);
                   _v$11 !== _p$.t && _$setAttribute(_el$29, "src", _p$.t = _v$11);
                   _v$12 !== _p$.a && _$setAttribute(_el$29, "alt", _p$.a = _v$12);