@ansh-ui/vue 0.2.0

package/dist/chunk-SOYRICHU.js

@@ -0,0 +1,3645 @@
+import { useAnchoredPosition, useDismiss } from './chunk-XZ5ZFLZM.js';
+import { useControllableState } from './chunk-OAQ7MDYX.js';
+import { useId, cx, resolveSlotContent } from './chunk-NJDDNO4C.js';
+import { defineComponent, computed, provide, h, ref, watch, inject, Teleport, getCurrentScope, onScopeDispose } from 'vue';
+import { rgbToHsv, tryParseColor, parseColor, toHex, hsvToRgb, contrastRatio, toOklchString } from '@ansh-ui/core';
+
+var FieldKey = /* @__PURE__ */ Symbol("ansh-field");
+function useFieldControl() {
+  const field = inject(FieldKey, null);
+  return computed(() => {
+    if (!field) return {};
+    return {
+      id: field.id,
+      ...field.describedBy ? { "aria-describedby": field.describedBy } : null,
+      ...field.invalid ? { "aria-invalid": true } : null,
+      ...field.required ? { "aria-required": true } : null,
+      ...field.disabled ? { disabled: true } : null
+    };
+  });
+}
+function useFieldContext() {
+  return inject(FieldKey, null);
+}
+var Field = defineComponent({
+  name: "AnshField",
+  props: {
+    label: { type: [String, Object, Function], default: void 0 },
+    /** Helper text below the label. Announced as part of the control's description. */
+    description: { type: [String, Object, Function], default: void 0 },
+    /** Error message. Its presence sets `aria-invalid` on the control. */
+    error: { type: [String, Object, Function], default: void 0 },
+    /** Marks the field required and appends an asterisk to the label. */
+    required: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    /** Label to the side rather than above — denser, for settings screens. */
+    orientation: { type: String, default: "vertical" }
+  },
+  setup(props, { slots, attrs }) {
+    const id = useId("field");
+    const descriptionId = `${id}-description`;
+    const errorId = `${id}-error`;
+    const describedBy = computed(
+      () => [props.error ? errorId : null, props.description ? descriptionId : null].filter(Boolean).join(" ") || void 0
+    );
+    provide(FieldKey, {
+      id,
+      get describedBy() {
+        return describedBy.value;
+      },
+      get invalid() {
+        return Boolean(props.error);
+      },
+      get required() {
+        return props.required;
+      },
+      get disabled() {
+        return props.disabled;
+      }
+    });
+    return () => h(
+      "div",
+      {
+        class: cx(
+          "ansh-field",
+          `ansh-field--${props.orientation}`,
+          props.disabled && "ansh-field--disabled",
+          attrs.class
+        )
+      },
+      [
+        props.label ? h("label", { class: "ansh-field__label", for: id }, [
+          resolveSlotContent(props.label),
+          props.required ? [
+            h("span", { "aria-hidden": "true", class: "ansh-field__required" }, "*"),
+            // The asterisk alone is a visual convention with no meaning to a screen
+            // reader; `aria-required` on the control carries it, and this covers the rest.
+            h("span", { class: "ansh-visually-hidden" }, " (required)")
+          ] : null
+        ]) : null,
+        h("div", { class: "ansh-field__control" }, slots.default?.()),
+        props.description ? h("p", { class: "ansh-field__description", id: descriptionId }, [
+          resolveSlotContent(props.description)
+        ]) : null,
+        props.error ? (
+          // `role="alert"` announces the message when it appears after a failed submit, which
+          // is the moment it matters. `aria-describedby` alone would only be read on re-focus.
+          h("p", { class: "ansh-field__error", id: errorId, role: "alert" }, [
+            resolveSlotContent(props.error)
+          ])
+        ) : null
+      ]
+    );
+  }
+});
+var Fieldset = defineComponent({
+  name: "AnshFieldset",
+  props: {
+    legend: { type: [String, Object, Function], required: true },
+    description: { type: [String, Object, Function], default: void 0 }
+  },
+  setup(props, { slots, attrs }) {
+    const id = useId("fieldset");
+    return () => h(
+      "fieldset",
+      {
+        class: cx("ansh-fieldset", attrs.class),
+        ...props.description ? { "aria-describedby": id } : null
+      },
+      [
+        h("legend", { class: "ansh-fieldset__legend" }, [resolveSlotContent(props.legend)]),
+        props.description ? h("p", { class: "ansh-fieldset__description", id }, [
+          resolveSlotContent(props.description)
+        ]) : null,
+        slots.default?.()
+      ]
+    );
+  }
+});
+var VisuallyHidden = defineComponent({
+  name: "AnshVisuallyHidden",
+  setup(_props, { slots, attrs }) {
+    return () => h("span", { class: "ansh-visually-hidden", ...attrs }, slots.default?.());
+  }
+});
+var Input = defineComponent({
+  name: "AnshInput",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: String, default: void 0 },
+    defaultValue: { type: String, default: "" },
+    size: { type: String, default: "md" },
+    /** Content inside the field, before the text — an icon or a currency symbol. */
+    prefix: { type: [String, Object, Function], default: void 0 },
+    /** Content inside the field, after the text — a unit, or a button. */
+    suffix: { type: [String, Object, Function], default: void 0 },
+    /** Show a clear button when non-empty. */
+    clearable: { type: Boolean, default: false },
+    /** Force the error style outside a `Field`. */
+    invalid: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    /** Class for the outer wrapper, when there is a prefix or suffix. */
+    wrapperClassName: { type: String, default: void 0 }
+  },
+  emits: ["update:modelValue", "input", "change", "clear"],
+  setup(props, { attrs, emit, expose, slots }) {
+    const fieldProps = useFieldControl();
+    const inputRef = ref(null);
+    const [value, setValue] = useControllableState(
+      () => props.modelValue,
+      props.defaultValue,
+      (next) => emit("update:modelValue", next)
+    );
+    expose({
+      focus: (options) => inputRef.value?.focus(options),
+      blur: () => inputRef.value?.blur(),
+      get element() {
+        return inputRef.value;
+      }
+    });
+    const grouped = computed(() => Boolean(props.prefix || props.suffix || props.clearable));
+    const showClear = computed(
+      () => props.clearable && value.value.length > 0 && !props.disabled && !props.readonly
+    );
+    const renderInput = () => {
+      const { class: attrClass, ...restAttrs } = attrs;
+      return h("input", {
+        ref: inputRef,
+        class: cx(
+          "ansh-input",
+          `ansh-input--${props.size}`,
+          !grouped.value && attrClass
+        ),
+        disabled: props.disabled,
+        readonly: props.readonly || void 0,
+        ...fieldProps.value,
+        ...restAttrs,
+        value: value.value,
+        ...props.invalid ? { "aria-invalid": true } : null,
+        onInput: (event) => {
+          setValue(event.target.value);
+          emit("input", event);
+        },
+        onChange: (event) => emit("change", event)
+      });
+    };
+    return () => {
+      if (!grouped.value) return renderInput();
+      const { class: attrClass } = attrs;
+      return h(
+        "div",
+        {
+          class: cx(
+            "ansh-input-group",
+            `ansh-input-group--${props.size}`,
+            props.disabled && "ansh-input-group--disabled",
+            (props.invalid || fieldProps.value["aria-invalid"]) && "ansh-input-group--invalid",
+            props.wrapperClassName,
+            attrClass
+          ),
+          // Clicking anywhere in the group focuses the input, including the padding and the icons.
+          // Guarded so a click on a button inside the suffix still reaches that button.
+          onMousedown: (event) => {
+            if (event.target === event.currentTarget) {
+              event.preventDefault();
+              inputRef.value?.focus();
+            }
+          }
+        },
+        [
+          props.prefix ? h("span", { class: "ansh-input-group__affix", "aria-hidden": "true" }, [
+            resolveSlotContent(props.prefix ?? slots.prefix?.())
+          ]) : null,
+          renderInput(),
+          showClear.value ? h(
+            "button",
+            {
+              type: "button",
+              class: "ansh-input-group__clear ansh-focusable",
+              "aria-label": "Clear",
+              onClick: () => {
+                setValue("");
+                inputRef.value?.focus();
+                emit("clear");
+              }
+            },
+            [
+              h(
+                "svg",
+                { viewBox: "0 0 16 16", width: "12", height: "12", "aria-hidden": "true" },
+                [
+                  h("path", {
+                    d: "M4 4l8 8M12 4l-8 8",
+                    stroke: "currentColor",
+                    "stroke-width": "1.75",
+                    "stroke-linecap": "round",
+                    fill: "none"
+                  })
+                ]
+              )
+            ]
+          ) : null,
+          props.suffix ? h("span", { class: "ansh-input-group__affix" }, [resolveSlotContent(props.suffix)]) : null
+        ]
+      );
+    };
+  }
+});
+var Textarea = defineComponent({
+  name: "AnshTextarea",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: String, default: void 0 },
+    defaultValue: { type: String, default: "" },
+    /** Grow with the content instead of scrolling. */
+    autoResize: { type: Boolean, default: false },
+    /** Upper bound for `autoResize`, in rows. Default `12`. */
+    maxRows: { type: Number, default: 12 },
+    /** Show a live character count. Needs `maxlength` (passed through as a native attribute). */
+    showCount: { type: Boolean, default: false },
+    invalid: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue", "input", "change"],
+  setup(props, { attrs, emit, expose }) {
+    const fieldProps = useFieldControl();
+    const textareaRef = ref(null);
+    const [value, setValue] = useControllableState(
+      () => props.modelValue,
+      props.defaultValue,
+      (next) => emit("update:modelValue", next)
+    );
+    expose({
+      focus: (options) => textareaRef.value?.focus(options),
+      blur: () => textareaRef.value?.blur(),
+      get element() {
+        return textareaRef.value;
+      }
+    });
+    const resize = () => {
+      const node = textareaRef.value;
+      if (!node || !props.autoResize) return;
+      node.style.height = "auto";
+      const lineHeight = Number.parseFloat(getComputedStyle(node).lineHeight) || 20;
+      const max = lineHeight * props.maxRows;
+      node.style.height = `${Math.min(node.scrollHeight, max)}px`;
+      node.style.overflowY = node.scrollHeight > max ? "auto" : "hidden";
+    };
+    return () => {
+      const { class: attrClass, maxlength, ...restAttrs } = attrs;
+      const max = maxlength !== void 0 ? Number(maxlength) : void 0;
+      return h("div", { class: cx("ansh-textarea-wrap", attrClass) }, [
+        h("textarea", {
+          ref: (node) => {
+            textareaRef.value = node ?? null;
+            resize();
+          },
+          class: cx("ansh-input", "ansh-textarea", props.autoResize && "ansh-textarea--auto"),
+          maxlength,
+          ...fieldProps.value,
+          ...restAttrs,
+          value: value.value,
+          ...props.invalid ? { "aria-invalid": true } : null,
+          onInput: (event) => {
+            setValue(event.target.value);
+            resize();
+            emit("input", event);
+          },
+          onChange: (event) => emit("change", event)
+        }),
+        props.showCount ? h(
+          "span",
+          {
+            class: cx(
+              "ansh-textarea__count",
+              max !== void 0 && value.value.length > max * 0.9 && "ansh-textarea__count--near"
+            ),
+            // Announced politely so a screen-reader user isn't interrupted on every keystroke.
+            "aria-live": "polite"
+          },
+          max !== void 0 ? `${value.value.length} / ${max}` : String(value.value.length)
+        ) : null
+      ]);
+    };
+  }
+});
+var NumberInput = defineComponent({
+  name: "AnshNumberInput",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: Number, default: void 0 },
+    defaultValue: { type: Number, default: 0 },
+    min: { type: Number, default: Number.NEGATIVE_INFINITY },
+    max: { type: Number, default: Number.POSITIVE_INFINITY },
+    step: { type: Number, default: 1 },
+    /** Decimal places to display. Default: inferred from `step`. */
+    precision: { type: Number, default: void 0 },
+    size: { type: String, default: "md" },
+    /** Unit shown after the number — "kg", "%", "days". */
+    unit: { type: [String, Object, Function], default: void 0 },
+    /** Show the stepper buttons. Default `true`. */
+    steppers: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { attrs, emit }) {
+    const fieldProps = useFieldControl();
+    const inputRef = ref(null);
+    const editing = ref(false);
+    const [current, setCurrent] = useControllableState(
+      () => props.modelValue,
+      props.defaultValue,
+      (next) => emit("change", next)
+    );
+    const decimals = computed(
+      () => props.precision ?? (String(props.step).includes(".") ? String(props.step).split(".")[1].length : 0)
+    );
+    const text = ref(current.value.toFixed(decimals.value));
+    const syncText = () => {
+      if (!editing.value) text.value = current.value.toFixed(decimals.value);
+    };
+    watch([current, decimals], syncText);
+    const clamp = (n) => Math.min(Math.max(n, props.min), props.max);
+    const nudge = (direction, multiplier = 1) => {
+      const next = clamp(current.value + props.step * direction * multiplier);
+      setCurrent(Number(next.toFixed(decimals.value)));
+      syncText();
+    };
+    const commit = (raw) => {
+      const parsed = Number.parseFloat(raw);
+      const next = Number.isFinite(parsed) ? clamp(parsed) : current.value;
+      setCurrent(Number(next.toFixed(decimals.value)));
+      text.value = next.toFixed(decimals.value);
+    };
+    return () => {
+      const { class: attrClass, ...restAttrs } = attrs;
+      return h(
+        "div",
+        {
+          class: cx(
+            "ansh-number",
+            `ansh-number--${props.size}`,
+            props.disabled && "ansh-number--disabled",
+            attrClass
+          )
+        },
+        [
+          h("input", {
+            ref: inputRef,
+            type: "text",
+            inputmode: "decimal",
+            class: "ansh-input ansh-number__input",
+            value: text.value,
+            disabled: props.disabled,
+            // The ARIA spinbutton contract, so the current, minimum and maximum are announced.
+            role: "spinbutton",
+            "aria-valuenow": current.value,
+            ...Number.isFinite(props.min) ? { "aria-valuemin": props.min } : null,
+            ...Number.isFinite(props.max) ? { "aria-valuemax": props.max } : null,
+            ...fieldProps.value,
+            ...restAttrs,
+            onFocus: () => {
+              editing.value = true;
+            },
+            onInput: (event) => {
+              text.value = event.target.value;
+            },
+            onBlur: (event) => {
+              editing.value = false;
+              commit(event.target.value);
+            },
+            onKeydown: (event) => {
+              if (event.key === "ArrowUp") {
+                event.preventDefault();
+                nudge(1, event.shiftKey ? 10 : 1);
+              } else if (event.key === "ArrowDown") {
+                event.preventDefault();
+                nudge(-1, event.shiftKey ? 10 : 1);
+              } else if (event.key === "PageUp") {
+                event.preventDefault();
+                nudge(1, 10);
+              } else if (event.key === "PageDown") {
+                event.preventDefault();
+                nudge(-1, 10);
+              } else if (event.key === "Home" && Number.isFinite(props.min)) {
+                event.preventDefault();
+                setCurrent(props.min);
+                syncText();
+              } else if (event.key === "End" && Number.isFinite(props.max)) {
+                event.preventDefault();
+                setCurrent(props.max);
+                syncText();
+              } else if (event.key === "Enter") {
+                commit(event.target.value);
+              }
+            }
+          }),
+          props.unit ? h("span", { class: "ansh-number__unit" }, [resolveSlotContent(props.unit)]) : null,
+          props.steppers ? (
+            // `tabindex="-1"` and `aria-hidden`: the input is already a spinbutton with
+            // arrow-key support, so these buttons would be redundant tab stops announcing
+            // nothing new.
+            h("span", { class: "ansh-number__steppers", "aria-hidden": "true" }, [
+              h(
+                "button",
+                {
+                  type: "button",
+                  tabindex: "-1",
+                  class: "ansh-number__step",
+                  disabled: props.disabled || current.value >= props.max,
+                  onClick: () => nudge(1)
+                },
+                [
+                  h("svg", { viewBox: "0 0 10 6", width: "10", height: "6" }, [
+                    h("path", {
+                      d: "M1 5l4-4 4 4",
+                      stroke: "currentColor",
+                      "stroke-width": "1.5",
+                      fill: "none",
+                      "stroke-linecap": "round"
+                    })
+                  ])
+                ]
+              ),
+              h(
+                "button",
+                {
+                  type: "button",
+                  tabindex: "-1",
+                  class: "ansh-number__step",
+                  disabled: props.disabled || current.value <= props.min,
+                  onClick: () => nudge(-1)
+                },
+                [
+                  h("svg", { viewBox: "0 0 10 6", width: "10", height: "6" }, [
+                    h("path", {
+                      d: "M1 1l4 4 4-4",
+                      stroke: "currentColor",
+                      "stroke-width": "1.5",
+                      fill: "none",
+                      "stroke-linecap": "round"
+                    })
+                  ])
+                ]
+              )
+            ])
+          ) : null
+        ]
+      );
+    };
+  }
+});
+var Checkbox = defineComponent({
+  name: "AnshCheckbox",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: Boolean, default: void 0 },
+    defaultValue: { type: Boolean, default: false },
+    /** Neither checked nor unchecked — a parent whose children are partly selected. */
+    indeterminate: { type: Boolean, default: false },
+    label: { type: [String, Object, Function], default: void 0 },
+    description: { type: [String, Object, Function], default: void 0 },
+    size: { type: String, default: "md" },
+    invalid: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { attrs, emit, expose }) {
+    const fieldProps = useFieldControl();
+    const inputRef = ref(null);
+    const generatedId = useId();
+    const [checked, setChecked] = useControllableState(
+      () => props.modelValue,
+      props.defaultValue,
+      (next) => emit("update:modelValue", next)
+    );
+    expose({
+      focus: (options) => inputRef.value?.focus(options),
+      blur: () => inputRef.value?.blur(),
+      get element() {
+        return inputRef.value;
+      }
+    });
+    watch(
+      () => props.indeterminate,
+      (value) => {
+        if (inputRef.value) inputRef.value.indeterminate = value;
+      }
+    );
+    return () => {
+      const { id: attrId, class: attrClass, ...restAttrs } = attrs;
+      const id = attrId ?? fieldProps.value.id ?? generatedId;
+      const descriptionId = `${id}-hint`;
+      const isDisabled = props.disabled || Boolean(fieldProps.value.disabled);
+      return h(
+        "div",
+        {
+          class: cx(
+            "ansh-choice",
+            `ansh-choice--${props.size}`,
+            isDisabled && "ansh-choice--disabled",
+            attrClass
+          )
+        },
+        [
+          h("span", { class: "ansh-choice__box" }, [
+            h("input", {
+              ref: (node) => {
+                const element = node ?? null;
+                inputRef.value = element;
+                if (element) element.indeterminate = props.indeterminate;
+              },
+              type: "checkbox",
+              class: "ansh-choice__input",
+              checked: checked.value,
+              disabled: isDisabled,
+              // Announces "mixed" rather than "checked"/"unchecked" — the whole point of the state.
+              ...props.indeterminate ? { "aria-checked": "mixed" } : null,
+              ...props.invalid ? { "aria-invalid": true } : null,
+              ...props.description ? { "aria-describedby": descriptionId } : null,
+              ...restAttrs,
+              id,
+              onChange: (event) => setChecked(event.target.checked)
+            }),
+            h(
+              "span",
+              {
+                class: "ansh-choice__indicator ansh-choice__indicator--check",
+                "aria-hidden": "true"
+              },
+              [
+                props.indeterminate ? h("svg", { viewBox: "0 0 14 14", width: "10", height: "10" }, [
+                  h("path", {
+                    d: "M3 7h8",
+                    stroke: "currentColor",
+                    "stroke-width": "2",
+                    "stroke-linecap": "round"
+                  })
+                ]) : h("svg", { viewBox: "0 0 14 14", width: "10", height: "10" }, [
+                  h("path", {
+                    d: "M2.5 7.5l3 3 6-6.5",
+                    stroke: "currentColor",
+                    "stroke-width": "2",
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    fill: "none"
+                  })
+                ])
+              ]
+            )
+          ]),
+          props.label || props.description ? h("span", { class: "ansh-choice__text" }, [
+            props.label ? h("label", { class: "ansh-choice__label", for: id }, [
+              resolveSlotContent(props.label)
+            ]) : null,
+            props.description ? h("span", { class: "ansh-choice__description", id: descriptionId }, [
+              resolveSlotContent(props.description)
+            ]) : null
+          ]) : null
+        ]
+      );
+    };
+  }
+});
+var Switch = defineComponent({
+  name: "AnshSwitch",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: Boolean, default: void 0 },
+    defaultValue: { type: Boolean, default: false },
+    label: { type: [String, Object, Function], default: void 0 },
+    description: { type: [String, Object, Function], default: void 0 },
+    /** Where the label sits. Default `'end'`; `'start'` suits settings rows. */
+    labelPosition: { type: String, default: "end" },
+    size: { type: String, default: "md" },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { attrs, emit, expose }) {
+    const fieldProps = useFieldControl();
+    const inputRef = ref(null);
+    const generatedId = useId();
+    const [checked, setChecked] = useControllableState(
+      () => props.modelValue,
+      props.defaultValue,
+      (next) => emit("update:modelValue", next)
+    );
+    expose({
+      focus: (options) => inputRef.value?.focus(options),
+      blur: () => inputRef.value?.blur(),
+      get element() {
+        return inputRef.value;
+      }
+    });
+    return () => {
+      const { id: attrId, class: attrClass, ...restAttrs } = attrs;
+      const id = attrId ?? fieldProps.value.id ?? generatedId;
+      const descriptionId = `${id}-hint`;
+      const isDisabled = props.disabled || Boolean(fieldProps.value.disabled);
+      return h(
+        "div",
+        {
+          class: cx(
+            "ansh-switch-row",
+            `ansh-switch-row--${props.labelPosition}`,
+            isDisabled && "ansh-choice--disabled",
+            attrClass
+          )
+        },
+        [
+          h("span", { class: "ansh-switch", "data-size": props.size }, [
+            h("input", {
+              ref: inputRef,
+              type: "checkbox",
+              role: "switch",
+              class: "ansh-choice__input",
+              checked: checked.value,
+              disabled: isDisabled,
+              ...props.description ? { "aria-describedby": descriptionId } : null,
+              ...restAttrs,
+              id,
+              onChange: (event) => setChecked(event.target.checked)
+            }),
+            h("span", { class: "ansh-switch__track", "aria-hidden": "true" }, [
+              h("span", { class: "ansh-switch__thumb" })
+            ])
+          ]),
+          props.label || props.description ? h("span", { class: "ansh-choice__text" }, [
+            props.label ? h("label", { class: "ansh-choice__label", for: id }, [
+              resolveSlotContent(props.label)
+            ]) : null,
+            props.description ? h("span", { class: "ansh-choice__description", id: descriptionId }, [
+              resolveSlotContent(props.description)
+            ]) : null
+          ]) : null
+        ]
+      );
+    };
+  }
+});
+var RadioGroupKey = /* @__PURE__ */ Symbol("ansh-radio-group");
+var RadioGroup = defineComponent({
+  name: "AnshRadioGroup",
+  props: {
+    modelValue: { type: String, default: void 0 },
+    defaultValue: { type: String, default: void 0 },
+    name: { type: String, default: void 0 },
+    label: { type: String, default: void 0 },
+    orientation: { type: String, default: "vertical" },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { slots, emit, attrs }) {
+    const generatedName = useId("radiogroup");
+    const [current, setCurrent] = useControllableState(
+      () => props.modelValue,
+      props.defaultValue,
+      (next) => emit("update:modelValue", next)
+    );
+    provide(RadioGroupKey, {
+      get name() {
+        return props.name ?? generatedName;
+      },
+      value: current,
+      setValue: setCurrent,
+      get disabled() {
+        return props.disabled;
+      }
+    });
+    return () => h(
+      "div",
+      {
+        role: "radiogroup",
+        ...props.label ? { "aria-label": props.label } : null,
+        class: cx(
+          "ansh-radio-group",
+          `ansh-radio-group--${props.orientation}`,
+          attrs.class
+        )
+      },
+      slots.default?.()
+    );
+  }
+});
+var Radio = defineComponent({
+  name: "AnshRadio",
+  inheritAttrs: false,
+  props: {
+    value: { type: String, required: true },
+    label: { type: [String, Object, Function], default: void 0 },
+    description: { type: [String, Object, Function], default: void 0 },
+    size: { type: String, default: "md" },
+    disabled: { type: Boolean, default: false }
+  },
+  setup(props, { attrs, expose }) {
+    const group = inject(RadioGroupKey, null);
+    const inputRef = ref(null);
+    const generatedId = useId();
+    expose({
+      focus: (options) => inputRef.value?.focus(options),
+      blur: () => inputRef.value?.blur(),
+      get element() {
+        return inputRef.value;
+      }
+    });
+    return () => {
+      const { id: attrId, class: attrClass, ...restAttrs } = attrs;
+      const id = attrId ?? generatedId;
+      const descriptionId = `${id}-hint`;
+      const isDisabled = props.disabled || Boolean(group?.disabled);
+      return h(
+        "div",
+        {
+          class: cx(
+            "ansh-choice",
+            `ansh-choice--${props.size}`,
+            isDisabled && "ansh-choice--disabled",
+            attrClass
+          )
+        },
+        [
+          h("span", { class: "ansh-choice__box" }, [
+            h("input", {
+              ref: inputRef,
+              type: "radio",
+              class: "ansh-choice__input",
+              // Omitted rather than set to `undefined` when there is no group: `checked` is a DOM
+              // property, and explicitly assigning `undefined` to it coerces to `false`, forcing an
+              // uncontrolled radio back to unchecked on every re-render.
+              ...group ? { name: group.name, checked: group.value.value === props.value } : null,
+              value: props.value,
+              disabled: isDisabled,
+              ...props.description ? { "aria-describedby": descriptionId } : null,
+              ...restAttrs,
+              id,
+              onChange: () => group?.setValue(props.value)
+            }),
+            h("span", {
+              class: "ansh-choice__indicator ansh-choice__indicator--dot",
+              "aria-hidden": "true"
+            })
+          ]),
+          props.label || props.description ? h("span", { class: "ansh-choice__text" }, [
+            props.label ? h("label", { class: "ansh-choice__label", for: id }, [
+              resolveSlotContent(props.label)
+            ]) : null,
+            props.description ? h("span", { class: "ansh-choice__description", id: descriptionId }, [
+              resolveSlotContent(props.description)
+            ]) : null
+          ]) : null
+        ]
+      );
+    };
+  }
+});
+var ChoiceCard = defineComponent({
+  name: "AnshChoiceCard",
+  inheritAttrs: false,
+  props: {
+    value: { type: String, required: true },
+    label: { type: [String, Object, Function], default: void 0 },
+    description: { type: [String, Object, Function], default: void 0 },
+    icon: { type: [String, Object, Function], default: void 0 },
+    size: { type: String, default: "md" },
+    disabled: { type: Boolean, default: false }
+  },
+  setup(props, { attrs, expose }) {
+    const group = inject(RadioGroupKey, null);
+    const radioRef = ref(null);
+    expose({
+      focus: (options) => radioRef.value?.focus(options),
+      blur: () => radioRef.value?.blur(),
+      get element() {
+        return radioRef.value?.element ?? null;
+      }
+    });
+    return () => {
+      const { class: attrClass, ...restAttrs } = attrs;
+      const selected = group?.value.value === props.value;
+      return h(
+        "label",
+        {
+          class: cx(
+            "ansh-choice-card",
+            selected && "ansh-choice-card--selected",
+            attrClass
+          )
+        },
+        [
+          h(Radio, {
+            ref: radioRef,
+            value: props.value,
+            size: props.size,
+            disabled: props.disabled,
+            class: "ansh-choice-card__radio",
+            ...restAttrs
+          }),
+          props.icon ? h("span", { class: "ansh-choice-card__icon" }, [resolveSlotContent(props.icon)]) : null,
+          h("span", { class: "ansh-choice-card__body" }, [
+            h("span", { class: "ansh-choice-card__label" }, [resolveSlotContent(props.label)]),
+            props.description ? h("span", { class: "ansh-choice-card__description" }, [
+              resolveSlotContent(props.description)
+            ]) : null
+          ])
+        ]
+      );
+    };
+  }
+});
+function stepActive(options, active, delta, loop = true) {
+  if (options.length === 0) return -1;
+  let index = active;
+  for (let attempts = 0; attempts < options.length; attempts++) {
+    index += delta;
+    if (index < 0) {
+      if (!loop) return active;
+      index = options.length - 1;
+    }
+    if (index >= options.length) {
+      if (!loop) return active;
+      index = 0;
+    }
+    if (!options[index]?.disabled) return index;
+  }
+  return active;
+}
+function firstEnabled(options, from = 0) {
+  for (let i = from; i < options.length; i++) {
+    if (!options[i]?.disabled) return i;
+  }
+  return -1;
+}
+function useTypeahead(getOptions, onMatch, timeout = 600) {
+  let buffer = "";
+  let timer;
+  if (getCurrentScope()) onScopeDispose(() => clearTimeout(timer));
+  return (key) => {
+    if (key.length !== 1 || key === " ") return false;
+    clearTimeout(timer);
+    buffer += key.toLowerCase();
+    timer = setTimeout(() => {
+      buffer = "";
+    }, timeout);
+    const options = getOptions();
+    const index = options.findIndex(
+      (option) => !option.disabled && option.label.toLowerCase().startsWith(buffer)
+    );
+    if (index >= 0) {
+      onMatch(index);
+      return true;
+    }
+    return false;
+  };
+}
+function scoreOption(query, option) {
+  if (query.trim() === "") return 0;
+  const q = query.toLowerCase();
+  const haystacks = [option.label, option.keywords ?? "", option.description ?? ""];
+  let best = -1;
+  for (let h15 = 0; h15 < haystacks.length; h15++) {
+    const text = haystacks[h15].toLowerCase();
+    let queryIndex = 0;
+    let total = 0;
+    let run = 0;
+    for (let i = 0; i < text.length && queryIndex < q.length; i++) {
+      if (text[i] === q[queryIndex]) {
+        run++;
+        total += run * 2 + (i === 0 ? 8 : 0);
+        queryIndex++;
+      } else {
+        run = 0;
+      }
+    }
+    if (queryIndex === q.length) best = Math.max(best, total - h15 * 4);
+  }
+  return best;
+}
+function filterOptions(options, query) {
+  if (query.trim() === "") return options;
+  return options.map((option) => ({ option, score: scoreOption(query, option) })).filter((entry) => entry.score >= 0).sort((a, b) => b.score - a.score).map((entry) => entry.option);
+}
+function highlightMatches(text, query) {
+  const q = query.toLowerCase();
+  const lower = text.toLowerCase();
+  const parts = [];
+  let queryIndex = 0;
+  let plain = "";
+  for (let i = 0; i < text.length; i++) {
+    if (queryIndex < q.length && lower[i] === q[queryIndex]) {
+      if (plain) {
+        parts.push(plain);
+        plain = "";
+      }
+      parts.push(h("mark", { key: i, class: "ansh-listbox__mark" }, text[i]));
+      queryIndex++;
+    } else {
+      plain += text[i];
+    }
+  }
+  if (plain) parts.push(plain);
+  return parts;
+}
+var OptionList = defineComponent({
+  name: "AnshOptionList",
+  props: {
+    options: { type: Array, required: true },
+    active: { type: Number, required: true },
+    selected: { type: Array, required: true },
+    listId: { type: String, required: true },
+    multiple: { type: Boolean, default: false },
+    emptyMessage: {
+      type: [String, Object, Function],
+      default: "No results"
+    },
+    onSelect: { type: Function, required: true },
+    onActiveChange: { type: Function, required: true },
+    query: { type: String, default: void 0 }
+  },
+  setup(props) {
+    return () => {
+      if (props.options.length === 0) {
+        return h("div", { class: "ansh-listbox__empty" }, [resolveSlotContent(props.emptyMessage)]);
+      }
+      const selectedSet = new Set(props.selected);
+      let lastGroup;
+      return props.options.map((option, index) => {
+        const heading = option.group && option.group !== lastGroup ? option.group : null;
+        lastGroup = option.group;
+        const isSelected = selectedSet.has(option.value);
+        return h("div", { key: option.value, role: "presentation" }, [
+          heading ? h("div", { class: "ansh-listbox__group", role: "presentation" }, heading) : null,
+          h(
+            "div",
+            {
+              id: `${props.listId}-option-${index}`,
+              role: "option",
+              "aria-selected": isSelected,
+              "aria-disabled": option.disabled || void 0,
+              class: cx(
+                "ansh-listbox__option",
+                index === props.active && "ansh-listbox__option--active",
+                isSelected && "ansh-listbox__option--selected",
+                option.disabled && "ansh-listbox__option--disabled"
+              ),
+              // A mousedown on the list would blur the input/trigger and close the popup before the
+              // click ever lands, so it is prevented here.
+              onMousedown: (event) => event.preventDefault(),
+              onMouseenter: () => !option.disabled && props.onActiveChange(index),
+              onClick: () => !option.disabled && props.onSelect(option)
+            },
+            [
+              props.multiple ? h(
+                "span",
+                {
+                  class: cx("ansh-listbox__check", isSelected && "ansh-listbox__check--on"),
+                  "aria-hidden": "true"
+                },
+                [
+                  h("svg", { viewBox: "0 0 14 14", width: "10", height: "10" }, [
+                    h("path", {
+                      d: "M2.5 7.5l3 3 6-6.5",
+                      stroke: "currentColor",
+                      "stroke-width": "2",
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round",
+                      fill: "none"
+                    })
+                  ])
+                ]
+              ) : null,
+              option.icon ? h("span", { class: "ansh-listbox__icon" }, [resolveSlotContent(option.icon)]) : null,
+              h("span", { class: "ansh-listbox__text" }, [
+                h("span", { class: "ansh-listbox__label" }, [
+                  props.query ? highlightMatches(option.label, props.query) : option.label
+                ]),
+                option.description ? h("span", { class: "ansh-listbox__description" }, option.description) : null
+              ]),
+              !props.multiple && isSelected ? h("span", { class: "ansh-listbox__tick", "aria-hidden": "true" }, [
+                h("svg", { viewBox: "0 0 14 14", width: "12", height: "12" }, [
+                  h("path", {
+                    d: "M2.5 7.5l3 3 6-6.5",
+                    stroke: "currentColor",
+                    "stroke-width": "2",
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    fill: "none"
+                  })
+                ])
+              ]) : null
+            ]
+          )
+        ]);
+      });
+    };
+  }
+});
+var Select = defineComponent({
+  name: "AnshSelect",
+  props: {
+    options: { type: Array, required: true },
+    // `null` is a legitimate "cleared" value alongside `string`; Vue's optional-prop check skips
+    // type validation whenever the resolved value is `null` or `undefined`, so declaring the runtime
+    // type as `String` here does not produce a dev-mode warning when `null` is passed.
+    modelValue: { type: String, default: void 0 },
+    defaultValue: { type: String, default: null },
+    placeholder: { type: String, default: "Select\u2026" },
+    disabled: { type: Boolean, default: false },
+    invalid: { type: Boolean, default: false },
+    size: { type: String, default: "md" },
+    /** Show a clear button once something is selected. */
+    clearable: { type: Boolean, default: false },
+    /** Accessible name when there is no wrapping `Field`. */
+    label: { type: String, default: void 0 },
+    /** Emit a hidden input so the value posts in a native form submit. */
+    name: { type: String, default: void 0 },
+    /** Max height of the popup before it scrolls. Default `'18rem'`. */
+    maxHeight: { type: String, default: "18rem" },
+    emptyMessage: { type: [String, Object, Function], default: void 0 }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { attrs, emit }) {
+    const fieldProps = useFieldControl();
+    const open = ref(false);
+    const [current, setCurrent] = useControllableState(
+      () => props.modelValue,
+      props.defaultValue,
+      (next) => emit("update:modelValue", next)
+    );
+    const triggerRef = ref(null);
+    const listRef = ref(null);
+    const listId = useId("select");
+    const selectedIndex = () => props.options.findIndex((option) => option.value === current.value);
+    const active = ref(0);
+    const { position } = useAnchoredPosition(triggerRef, listRef, open, {
+      placement: "bottom-start",
+      offset: 6,
+      matchWidth: true
+    });
+    useDismiss(
+      listRef,
+      open,
+      () => {
+        open.value = false;
+      },
+      { ignore: [triggerRef] }
+    );
+    const openList = () => {
+      if (props.disabled) return;
+      const index = selectedIndex();
+      active.value = index >= 0 ? index : firstEnabled(props.options);
+      open.value = true;
+    };
+    const commit = (option) => {
+      setCurrent(option.value);
+      open.value = false;
+      triggerRef.value?.focus();
+    };
+    const typeahead = useTypeahead(
+      () => props.options,
+      (index) => {
+        active.value = index;
+        if (!open.value) setCurrent(props.options[index].value);
+      }
+    );
+    const onTriggerKeydown = (event) => {
+      if (["ArrowDown", "ArrowUp", "Enter", " "].includes(event.key)) {
+        event.preventDefault();
+        openList();
+        return;
+      }
+      if (typeahead(event.key)) event.preventDefault();
+    };
+    const onListKeydown = (event) => {
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          active.value = stepActive(props.options, active.value, 1);
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          active.value = stepActive(props.options, active.value, -1);
+          break;
+        case "Home":
+          event.preventDefault();
+          active.value = firstEnabled(props.options);
+          break;
+        case "End":
+          event.preventDefault();
+          active.value = stepActive(props.options, props.options.length, -1, false);
+          break;
+        case "Enter":
+        case " ": {
+          event.preventDefault();
+          const option = props.options[active.value];
+          if (option && !option.disabled) commit(option);
+          break;
+        }
+        case "Escape":
+          event.preventDefault();
+          open.value = false;
+          triggerRef.value?.focus();
+          break;
+        case "Tab":
+          event.preventDefault();
+          open.value = false;
+          triggerRef.value?.focus();
+          break;
+        default:
+          typeahead(event.key);
+      }
+    };
+    watch(
+      [active, open],
+      () => {
+        if (!open.value) return;
+        document.getElementById(`${listId}-option-${active.value}`)?.scrollIntoView?.({ block: "nearest" });
+      },
+      { flush: "post" }
+    );
+    return () => {
+      const selected = (() => {
+        const index = selectedIndex();
+        return index >= 0 ? props.options[index] : void 0;
+      })();
+      return h(
+        "div",
+        { class: cx("ansh-select", `ansh-select--${props.size}`, attrs.class) },
+        [
+          h(
+            "button",
+            {
+              ref: triggerRef,
+              type: "button",
+              class: cx(
+                "ansh-select__trigger",
+                "ansh-focusable",
+                open.value && "ansh-select__trigger--open",
+                (props.invalid || fieldProps.value["aria-invalid"]) && "ansh-select__trigger--invalid",
+                !selected && "ansh-select__trigger--placeholder"
+              ),
+              disabled: props.disabled || fieldProps.value.disabled,
+              "aria-haspopup": "listbox",
+              "aria-expanded": open.value,
+              "aria-controls": open.value ? listId : void 0,
+              ...props.label ? { "aria-label": props.label } : null,
+              ...fieldProps.value,
+              onClick: () => open.value ? open.value = false : openList(),
+              onKeydown: onTriggerKeydown
+            },
+            [
+              selected?.icon ? h("span", { class: "ansh-select__icon" }, [resolveSlotContent(selected.icon)]) : null,
+              h("span", { class: "ansh-select__value" }, selected?.label ?? props.placeholder),
+              props.clearable && selected && !props.disabled ? (
+                // A `<span role="button">` rather than a nested `<button>`: nesting interactive
+                // elements is invalid HTML and browsers resolve it by dropping the inner one.
+                h(
+                  "span",
+                  {
+                    role: "button",
+                    tabindex: "-1",
+                    "aria-label": "Clear selection",
+                    class: "ansh-select__clear",
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      setCurrent(null);
+                    }
+                  },
+                  [
+                    h(
+                      "svg",
+                      { viewBox: "0 0 16 16", width: "12", height: "12", "aria-hidden": "true" },
+                      [
+                        h("path", {
+                          d: "M4 4l8 8M12 4l-8 8",
+                          stroke: "currentColor",
+                          "stroke-width": "1.75",
+                          "stroke-linecap": "round",
+                          fill: "none"
+                        })
+                      ]
+                    )
+                  ]
+                )
+              ) : null,
+              h("span", { class: "ansh-select__arrow", "aria-hidden": "true" }, [
+                h("svg", { viewBox: "0 0 12 12", width: "12", height: "12" }, [
+                  h("path", {
+                    d: "M3 4.5L6 7.5l3-3",
+                    stroke: "currentColor",
+                    "stroke-width": "1.5",
+                    fill: "none",
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round"
+                  })
+                ])
+              ])
+            ]
+          ),
+          // Posts the value in a plain HTML form. Without this the select is invisible to a
+          // non-JavaScript submit, which still matters for progressively enhanced forms.
+          props.name ? h("input", { type: "hidden", name: props.name, value: current.value ?? "" }) : null,
+          open.value ? h(Teleport, { to: "body" }, [
+            h(
+              "div",
+              {
+                // Move focus into the listbox the moment it attaches. Focus has to be *on* the
+                // element carrying `aria-activedescendant` — that is what the attribute means.
+                // Leaving focus on the trigger and pointing at an option from the list is a
+                // common shortcut that screen readers ignore, producing a select that navigates
+                // in silence.
+                //
+                // Done with a function ref rather than a watcher: the listbox is teleported, and
+                // its content mounts on its own schedule, so a watcher here can run while the
+                // teleported node does not yet exist, leaving focus on `<body>`. A function ref
+                // fires exactly when Vue attaches the node, which is the only moment that is
+                // guaranteed to be correct.
+                ref: (node) => {
+                  const element = node ?? null;
+                  listRef.value = element;
+                  element?.focus({ preventScroll: true });
+                },
+                id: listId,
+                role: "listbox",
+                tabindex: "-1",
+                "aria-activedescendant": props.options[active.value] ? `${listId}-option-${active.value}` : void 0,
+                ...props.label ? { "aria-label": props.label } : null,
+                class: "ansh-listbox",
+                style: { ...position.value.style, maxHeight: props.maxHeight },
+                "data-side": position.value.side,
+                onKeydown: onListKeydown
+              },
+              [
+                h(OptionList, {
+                  options: props.options,
+                  active: active.value,
+                  selected: current.value ? [current.value] : [],
+                  listId,
+                  emptyMessage: props.emptyMessage,
+                  onSelect: commit,
+                  onActiveChange: (index) => {
+                    active.value = index;
+                  }
+                })
+              ]
+            )
+          ]) : null
+        ]
+      );
+    };
+  }
+});
+var CREATE_VALUE = "__au_create__";
+var Combobox = defineComponent({
+  name: "AnshCombobox",
+  props: {
+    options: { type: Array, required: true },
+    /** Selected values. Single-select uses a one-element array. */
+    modelValue: { type: Array, default: void 0 },
+    defaultValue: { type: Array, default: () => [] },
+    multiple: { type: Boolean, default: false },
+    placeholder: { type: String, default: "Search\u2026" },
+    disabled: { type: Boolean, default: false },
+    invalid: { type: Boolean, default: false },
+    size: { type: String, default: "md" },
+    label: { type: String, default: void 0 },
+    maxHeight: { type: String, default: "18rem" },
+    emptyMessage: { type: [String, Object, Function], default: void 0 },
+    /**
+     * Offer the typed text as a new option. Returns the created option's value.
+     *
+     * Kept as a plain callback prop rather than a Vue `emit` (unlike `search`, below): the returned
+     * value feeds straight back into what gets selected, and `emit` has no return channel for a
+     * parent to hand a value back synchronously.
+     */
+    onCreate: { type: Function, default: void 0 },
+    /** Text for the create row. Receives the current query. */
+    createLabel: {
+      type: Function,
+      default: (query) => `Create \u201C${query}\u201D`
+    },
+    /** Skip local filtering, e.g. when a `search` listener already returns filtered options. */
+    filter: { type: Boolean, default: true },
+    /** Cap on how many chips render before collapsing to "+N". Default `Infinity`. */
+    maxVisibleChips: { type: Number, default: Number.POSITIVE_INFINITY }
+  },
+  emits: ["update:modelValue", "search"],
+  setup(props, { emit, attrs }) {
+    const fieldProps = useFieldControl();
+    const open = ref(false);
+    const query = ref("");
+    const active = ref(0);
+    const [selected, setSelected] = useControllableState(
+      () => props.modelValue,
+      props.defaultValue,
+      (next) => emit("update:modelValue", next)
+    );
+    const inputRef = ref(null);
+    const wrapRef = ref(null);
+    const listRef = ref(null);
+    const listId = useId("combobox");
+    const visible = computed(
+      () => props.filter ? filterOptions(props.options, query.value) : props.options
+    );
+    const byValue = computed(() => new Map(props.options.map((o) => [o.value, o])));
+    const canCreate = computed(
+      () => Boolean(props.onCreate) && query.value.trim().length > 0 && !props.options.some(
+        (option) => option.label.toLowerCase() === query.value.trim().toLowerCase()
+      )
+    );
+    const rows = computed(
+      () => canCreate.value ? [...visible.value, { value: CREATE_VALUE, label: props.createLabel(query.value.trim()) }] : visible.value
+    );
+    const { position } = useAnchoredPosition(wrapRef, listRef, open, {
+      placement: "bottom-start",
+      offset: 6,
+      matchWidth: true
+    });
+    useDismiss(
+      listRef,
+      open,
+      () => {
+        open.value = false;
+      },
+      { ignore: [wrapRef] }
+    );
+    watch(rows, () => active.value = firstEnabled(rows.value), { immediate: true });
+    const toggle = (option) => {
+      let optionValue = option.value;
+      if (optionValue === CREATE_VALUE && props.onCreate) {
+        optionValue = props.onCreate(query.value.trim());
+      }
+      if (props.multiple) {
+        const next = selected.value.includes(optionValue) ? selected.value.filter((v) => v !== optionValue) : [...selected.value, optionValue];
+        setSelected(next);
+        query.value = "";
+        inputRef.value?.focus();
+      } else {
+        setSelected([optionValue]);
+        query.value = "";
+        open.value = false;
+      }
+    };
+    const remove = (optionValue) => {
+      setSelected(selected.value.filter((v) => v !== optionValue));
+    };
+    const onKeydown = (event) => {
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          if (!open.value) {
+            open.value = true;
+            return;
+          }
+          active.value = stepActive(rows.value, active.value, 1);
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          if (!open.value) {
+            open.value = true;
+            return;
+          }
+          active.value = stepActive(rows.value, active.value, -1);
+          break;
+        case "Home":
+          if (!open.value) return;
+          event.preventDefault();
+          active.value = firstEnabled(rows.value);
+          break;
+        case "End":
+          if (!open.value) return;
+          event.preventDefault();
+          active.value = stepActive(rows.value, rows.value.length, -1, false);
+          break;
+        case "Enter": {
+          if (!open.value) return;
+          const option = rows.value[active.value];
+          if (option && !option.disabled) {
+            event.preventDefault();
+            toggle(option);
+          }
+          break;
+        }
+        case "Escape":
+          if (!open.value) return;
+          event.preventDefault();
+          open.value = false;
+          break;
+        case "Backspace":
+          if (props.multiple && query.value === "" && selected.value.length > 0) {
+            remove(selected.value[selected.value.length - 1]);
+          }
+          break;
+      }
+    };
+    watch(
+      [active, open],
+      () => {
+        if (!open.value) return;
+        document.getElementById(`${listId}-option-${active.value}`)?.scrollIntoView?.({ block: "nearest" });
+      },
+      { flush: "post" }
+    );
+    return () => {
+      const chips = props.multiple ? selected.value : [];
+      const overflow = Math.max(0, chips.length - props.maxVisibleChips);
+      const shownChips = overflow > 0 ? chips.slice(0, props.maxVisibleChips) : chips;
+      const singleLabel = !props.multiple && selected.value[0] ? byValue.value.get(selected.value[0])?.label ?? "" : "";
+      const inputValue = open.value || props.multiple ? query.value : singleLabel;
+      return h(
+        "div",
+        { class: cx("ansh-combobox", `ansh-combobox--${props.size}`, attrs.class) },
+        [
+          h(
+            "div",
+            {
+              ref: wrapRef,
+              class: cx(
+                "ansh-combobox__control",
+                "ansh-focusable-within",
+                open.value && "ansh-combobox__control--open",
+                (props.invalid || fieldProps.value["aria-invalid"]) && "ansh-combobox__control--invalid",
+                props.disabled && "ansh-combobox__control--disabled"
+              ),
+              // Clicking the padding focuses the input, but a click on a chip's remove button must
+              // still reach that button.
+              onMousedown: (event) => {
+                if (event.target === event.currentTarget) {
+                  event.preventDefault();
+                  inputRef.value?.focus();
+                  open.value = true;
+                }
+              }
+            },
+            [
+              ...shownChips.map((chipValue) => {
+                const option = byValue.value.get(chipValue);
+                return h("span", { key: chipValue, class: "ansh-chip" }, [
+                  option?.icon ? h("span", { class: "ansh-chip__icon" }, [resolveSlotContent(option.icon)]) : null,
+                  h("span", { class: "ansh-chip__label" }, option?.label ?? chipValue),
+                  h(
+                    "button",
+                    {
+                      type: "button",
+                      class: "ansh-chip__remove",
+                      "aria-label": `Remove ${option?.label ?? chipValue}`,
+                      disabled: props.disabled,
+                      onClick: () => remove(chipValue)
+                    },
+                    [
+                      h(
+                        "svg",
+                        { viewBox: "0 0 16 16", width: "10", height: "10", "aria-hidden": "true" },
+                        [
+                          h("path", {
+                            d: "M4 4l8 8M12 4l-8 8",
+                            stroke: "currentColor",
+                            "stroke-width": "2",
+                            "stroke-linecap": "round",
+                            fill: "none"
+                          })
+                        ]
+                      )
+                    ]
+                  )
+                ]);
+              }),
+              overflow > 0 ? h("span", { class: "ansh-chip ansh-chip--count" }, `+${overflow}`) : null,
+              h("input", {
+                ref: inputRef,
+                type: "text",
+                role: "combobox",
+                class: "ansh-combobox__input",
+                value: inputValue,
+                placeholder: chips.length > 0 ? "" : props.placeholder,
+                disabled: props.disabled || fieldProps.value.disabled,
+                autocomplete: "off",
+                spellcheck: false,
+                "aria-expanded": open.value,
+                "aria-controls": open.value ? listId : void 0,
+                "aria-autocomplete": "list",
+                "aria-activedescendant": open.value && rows.value[active.value] ? `${listId}-option-${active.value}` : void 0,
+                ...props.label ? { "aria-label": props.label } : null,
+                ...fieldProps.value,
+                onInput: (event) => {
+                  query.value = event.target.value;
+                  open.value = true;
+                  emit("search", query.value);
+                },
+                onFocus: () => {
+                  open.value = true;
+                },
+                onKeydown
+              }),
+              h("span", { class: "ansh-select__arrow", "aria-hidden": "true" }, [
+                h("svg", { viewBox: "0 0 12 12", width: "12", height: "12" }, [
+                  h("path", {
+                    d: "M3 4.5L6 7.5l3-3",
+                    stroke: "currentColor",
+                    "stroke-width": "1.5",
+                    fill: "none",
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round"
+                  })
+                ])
+              ])
+            ]
+          ),
+          // The count is announced when it changes, so a screen-reader user knows filtering is
+          // narrowing the list without having to arrow through it.
+          h(
+            "span",
+            { class: "ansh-visually-hidden", "aria-live": "polite" },
+            open.value ? `${visible.value.length} result${visible.value.length === 1 ? "" : "s"} available` : ""
+          ),
+          open.value ? h(Teleport, { to: "body" }, [
+            h(
+              "div",
+              {
+                ref: listRef,
+                id: listId,
+                role: "listbox",
+                "aria-multiselectable": props.multiple || void 0,
+                ...props.label ? { "aria-label": props.label } : null,
+                class: "ansh-listbox",
+                style: { ...position.value.style, maxHeight: props.maxHeight },
+                "data-side": position.value.side
+              },
+              [
+                h(OptionList, {
+                  options: rows.value,
+                  active: active.value,
+                  selected: selected.value,
+                  listId,
+                  multiple: props.multiple,
+                  query: query.value,
+                  emptyMessage: props.emptyMessage,
+                  onSelect: toggle,
+                  onActiveChange: (index) => {
+                    active.value = index;
+                  }
+                })
+              ]
+            )
+          ]) : null
+        ]
+      );
+    };
+  }
+});
+function snap(value, min, max, step) {
+  if (step <= 0) return Math.min(Math.max(value, min), max);
+  const stepped = Math.round((value - min) / step) * step + min;
+  const decimals = String(step).includes(".") ? String(step).split(".")[1].length : 0;
+  return Number(Math.min(Math.max(stepped, min), max).toFixed(decimals));
+}
+var Slider = defineComponent({
+  name: "AnshSlider",
+  props: {
+    modelValue: { type: Number, default: void 0 },
+    defaultValue: { type: Number, default: 0 },
+    min: { type: Number, default: 0 },
+    max: { type: Number, default: 100 },
+    step: { type: Number, default: 1 },
+    disabled: { type: Boolean, default: false },
+    /** Vertical sliders are for mixers and volume; default is horizontal. */
+    orientation: { type: String, default: "horizontal" },
+    marks: { type: Array, default: void 0 },
+    /** Show the value in a bubble above the thumb while dragging. */
+    showValue: { type: [Boolean, String], default: false },
+    /**
+     * Format the bubble and the screen-reader announcement.
+     *
+     * `String` itself as the default — not a factory returning it. Vue never invokes a `Function`-
+     * typed prop's `default` to resolve it (unlike `Object`/`Array`, where a factory is required);
+     * it is used as-is. Wrapping it (`() => String`) would make `formatValue` itself resolve to that
+     * wrapper, so calling `formatValue(current.value)` returns the `String` constructor instead of a
+     * formatted string.
+     */
+    formatValue: { type: Function, default: String },
+    label: { type: String, default: void 0 },
+    name: { type: String, default: void 0 }
+  },
+  emits: ["update:modelValue", "commit"],
+  setup(props, { emit, attrs }) {
+    const fieldProps = useFieldControl();
+    const [current, setCurrent] = useControllableState(
+      () => props.modelValue,
+      props.defaultValue,
+      (next) => emit("update:modelValue", next)
+    );
+    const trackRef = ref(null);
+    const dragging = ref(false);
+    const id = useId("slider");
+    const percent = computed(() => (current.value - props.min) / (props.max - props.min) * 100);
+    const valueFromPointer = (event) => {
+      const track = trackRef.value;
+      if (!track) return current.value;
+      const rect = track.getBoundingClientRect();
+      const fraction = props.orientation === "horizontal" ? (event.clientX - rect.left) / rect.width : (
+        // Inverted: in a vertical slider, up is more.
+        1 - (event.clientY - rect.top) / rect.height
+      );
+      return snap(props.min + fraction * (props.max - props.min), props.min, props.max, props.step);
+    };
+    const onPointerdown = (event) => {
+      if (props.disabled) return;
+      event.preventDefault();
+      event.currentTarget.setPointerCapture(event.pointerId);
+      dragging.value = true;
+      let latest = valueFromPointer(event);
+      setCurrent(latest);
+      const onMove = (moveEvent) => {
+        latest = valueFromPointer(moveEvent);
+        setCurrent(latest);
+      };
+      const onUp = () => {
+        dragging.value = false;
+        emit("commit", latest);
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+        window.removeEventListener("pointercancel", onUp);
+      };
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+      window.addEventListener("pointercancel", onUp);
+    };
+    const onKeydown = (event) => {
+      if (props.disabled) return;
+      const large = (props.max - props.min) / 10;
+      let next = null;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowUp":
+          next = current.value + props.step;
+          break;
+        case "ArrowLeft":
+        case "ArrowDown":
+          next = current.value - props.step;
+          break;
+        case "PageUp":
+          next = current.value + large;
+          break;
+        case "PageDown":
+          next = current.value - large;
+          break;
+        case "Home":
+          next = props.min;
+          break;
+        case "End":
+          next = props.max;
+          break;
+      }
+      if (next === null) return;
+      event.preventDefault();
+      const snapped = snap(next, props.min, props.max, props.step);
+      setCurrent(snapped);
+      emit("commit", snapped);
+    };
+    return () => h(
+      "div",
+      {
+        class: cx(
+          "ansh-slider",
+          `ansh-slider--${props.orientation}`,
+          props.disabled && "ansh-slider--disabled",
+          dragging.value && "ansh-slider--dragging",
+          attrs.class
+        ),
+        style: { ["--ansh-slider-percent"]: `${percent.value}%` }
+      },
+      [
+        h("div", { ref: trackRef, class: "ansh-slider__track", onPointerdown }, [
+          h("div", { class: "ansh-slider__fill" }),
+          ...props.marks?.map((mark) => {
+            const markPercent = (mark.value - props.min) / (props.max - props.min) * 100;
+            return h(
+              "span",
+              {
+                key: mark.value,
+                class: cx(
+                  "ansh-slider__mark",
+                  current.value >= mark.value && "ansh-slider__mark--passed"
+                ),
+                style: { ["--ansh-mark"]: `${markPercent}%` }
+              },
+              [
+                mark.label ? h("span", { class: "ansh-slider__mark-label" }, [
+                  resolveSlotContent(mark.label)
+                ]) : null
+              ]
+            );
+          }) ?? [],
+          h(
+            "div",
+            {
+              role: "slider",
+              tabindex: props.disabled ? "-1" : "0",
+              class: "ansh-slider__thumb ansh-focusable",
+              "aria-valuenow": current.value,
+              "aria-valuemin": props.min,
+              "aria-valuemax": props.max,
+              // The formatted string, when it differs from the raw number. A slider showing
+              // "£1,200" should not be announced as "1200".
+              ...props.formatValue(current.value) !== String(current.value) ? { "aria-valuetext": props.formatValue(current.value) } : null,
+              "aria-orientation": props.orientation,
+              "aria-disabled": props.disabled || void 0,
+              ...props.label ? { "aria-label": props.label } : null,
+              ...fieldProps.value.id ? { id: fieldProps.value.id } : null,
+              ...fieldProps.value["aria-describedby"] ? { "aria-describedby": fieldProps.value["aria-describedby"] } : null,
+              onPointerdown,
+              onKeydown
+            },
+            [
+              props.showValue === "always" || props.showValue && dragging.value ? h(
+                "span",
+                { class: "ansh-slider__bubble", "aria-hidden": "true" },
+                props.formatValue(current.value)
+              ) : null
+            ]
+          )
+        ]),
+        props.name ? h("input", {
+          type: "hidden",
+          name: props.name,
+          value: current.value,
+          id: `${id}-hidden`
+        }) : null
+      ]
+    );
+  }
+});
+var RangeSlider = defineComponent({
+  name: "AnshRangeSlider",
+  props: {
+    // `Array as PropType<readonly [number, number]>` doesn't typecheck directly — TS won't accept
+    // the cast because `any[]` (what `ArrayConstructor` produces) doesn't sufficiently overlap with
+    // a fixed-length tuple. Routing through `unknown` is the standard escape for a tuple-typed Vue
+    // prop; the runtime `type: Array` validation is unaffected.
+    modelValue: {
+      type: Array,
+      default: void 0
+    },
+    defaultValue: {
+      type: Array,
+      default: () => [0, 100]
+    },
+    min: { type: Number, default: 0 },
+    max: { type: Number, default: 100 },
+    step: { type: Number, default: 1 },
+    /** Smallest allowed gap between the two thumbs. Default `0`. */
+    minDistance: { type: Number, default: 0 },
+    disabled: { type: Boolean, default: false },
+    marks: { type: Array, default: void 0 },
+    showValue: { type: [Boolean, String], default: false },
+    // `String` itself, not a factory — see the note on `Slider`'s `formatValue` above.
+    formatValue: { type: Function, default: String },
+    label: { type: String, default: void 0 }
+  },
+  emits: ["update:modelValue", "commit"],
+  setup(props, { emit, attrs }) {
+    const [range, setRange] = useControllableState(
+      () => props.modelValue,
+      props.defaultValue,
+      (next) => emit("update:modelValue", next)
+    );
+    const trackRef = ref(null);
+    const dragging = ref(null);
+    const low = computed(() => range.value[0]);
+    const high = computed(() => range.value[1]);
+    const lowPercent = computed(() => (low.value - props.min) / (props.max - props.min) * 100);
+    const highPercent = computed(() => (high.value - props.min) / (props.max - props.min) * 100);
+    const valueFromPointer = (event) => {
+      const track = trackRef.value;
+      if (!track) return low.value;
+      const rect = track.getBoundingClientRect();
+      return snap(
+        props.min + (event.clientX - rect.left) / rect.width * (props.max - props.min),
+        props.min,
+        props.max,
+        props.step
+      );
+    };
+    const apply = (thumb, next) => {
+      if (thumb === 0) {
+        return next > high.value - props.minDistance ? [high.value - props.minDistance, high.value] : [next, high.value];
+      }
+      return next < low.value + props.minDistance ? [low.value, low.value + props.minDistance] : [low.value, next];
+    };
+    const startDrag = (thumb) => (event) => {
+      if (props.disabled) return;
+      event.preventDefault();
+      event.currentTarget.setPointerCapture(event.pointerId);
+      dragging.value = thumb;
+      let latest = range.value;
+      const onMove = (moveEvent) => {
+        latest = apply(thumb, valueFromPointer(moveEvent));
+        setRange(latest);
+      };
+      const onUp = () => {
+        dragging.value = null;
+        emit("commit", latest);
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+      };
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+    };
+    const keyHandler = (thumb) => (event) => {
+      if (props.disabled) return;
+      const currentValue = range.value[thumb];
+      const large = (props.max - props.min) / 10;
+      let next = null;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowUp":
+          next = currentValue + props.step;
+          break;
+        case "ArrowLeft":
+        case "ArrowDown":
+          next = currentValue - props.step;
+          break;
+        case "PageUp":
+          next = currentValue + large;
+          break;
+        case "PageDown":
+          next = currentValue - large;
+          break;
+        case "Home":
+          next = props.min;
+          break;
+        case "End":
+          next = props.max;
+          break;
+      }
+      if (next === null) return;
+      event.preventDefault();
+      const applied = apply(thumb, snap(next, props.min, props.max, props.step));
+      setRange(applied);
+      emit("commit", applied);
+    };
+    const renderThumb = (index, thumbLabel) => h(
+      "div",
+      {
+        key: index,
+        role: "slider",
+        tabindex: props.disabled ? "-1" : "0",
+        class: "ansh-slider__thumb ansh-focusable",
+        style: {
+          ["--ansh-thumb"]: `${index === 0 ? lowPercent.value : highPercent.value}%`
+        },
+        "aria-label": props.label ? `${props.label} ${thumbLabel}` : thumbLabel,
+        "aria-valuenow": range.value[index],
+        // Each thumb's range is bounded by the other, so the announced limits match what the
+        // control will actually accept.
+        "aria-valuemin": index === 0 ? props.min : low.value + props.minDistance,
+        "aria-valuemax": index === 0 ? high.value - props.minDistance : props.max,
+        ...props.formatValue(range.value[index]) !== String(range.value[index]) ? { "aria-valuetext": props.formatValue(range.value[index]) } : null,
+        "aria-disabled": props.disabled || void 0,
+        onPointerdown: startDrag(index),
+        onKeydown: keyHandler(index)
+      },
+      [
+        props.showValue === "always" || props.showValue && dragging.value === index ? h(
+          "span",
+          { class: "ansh-slider__bubble", "aria-hidden": "true" },
+          props.formatValue(range.value[index])
+        ) : null
+      ]
+    );
+    return () => h(
+      "div",
+      {
+        class: cx(
+          "ansh-slider",
+          "ansh-slider--horizontal",
+          "ansh-slider--range",
+          props.disabled && "ansh-slider--disabled",
+          attrs.class
+        ),
+        style: {
+          ["--ansh-range-start"]: `${lowPercent.value}%`,
+          ["--ansh-range-end"]: `${highPercent.value}%`
+        }
+      },
+      [
+        h("div", { ref: trackRef, class: "ansh-slider__track" }, [
+          h("div", { class: "ansh-slider__fill ansh-slider__fill--range" }),
+          ...props.marks?.map(
+            (mark) => h(
+              "span",
+              {
+                key: mark.value,
+                class: cx(
+                  "ansh-slider__mark",
+                  mark.value >= low.value && mark.value <= high.value && "ansh-slider__mark--passed"
+                ),
+                style: {
+                  ["--ansh-mark"]: `${(mark.value - props.min) / (props.max - props.min) * 100}%`
+                }
+              },
+              [
+                mark.label ? h("span", { class: "ansh-slider__mark-label" }, [
+                  resolveSlotContent(mark.label)
+                ]) : null
+              ]
+            )
+          ) ?? [],
+          renderThumb(0, "minimum"),
+          renderThumb(1, "maximum")
+        ])
+      ]
+    );
+  }
+});
+var PinInput = defineComponent({
+  name: "AnshPinInput",
+  props: {
+    /** Number of cells. Default `6`. */
+    length: { type: Number, default: 6 },
+    modelValue: { type: String, default: void 0 },
+    defaultValue: { type: String, default: "" },
+    /** Restrict input. Default `'numeric'`. */
+    type: { type: String, default: "numeric" },
+    /** Render as password dots. */
+    mask: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    invalid: { type: Boolean, default: false },
+    /** Focus the first cell on mount. Native `autofocus`, spelled lower-case to match the attribute. */
+    autofocus: { type: Boolean, default: false },
+    label: { type: String, default: "Verification code" }
+  },
+  emits: ["update:modelValue", "complete"],
+  setup(props, { emit, attrs }) {
+    const [code, setCode] = useControllableState(
+      () => props.modelValue,
+      props.defaultValue,
+      (next) => emit("update:modelValue", next)
+    );
+    const inputs = ref([]);
+    const id = useId("pin");
+    let completed = false;
+    watch(
+      code,
+      (value) => {
+        if (value.length === props.length && !completed) {
+          completed = true;
+          emit("complete", value);
+        } else if (value.length < props.length) {
+          completed = false;
+        }
+      },
+      { immediate: true }
+    );
+    const setCharAt = (index, char) => {
+      const chars = code.value.padEnd(props.length, " ").split("");
+      chars[index] = char;
+      setCode(chars.join("").trimEnd());
+    };
+    const focusCell = (index) => {
+      const target = inputs.value[Math.min(Math.max(index, 0), props.length - 1)];
+      target?.focus();
+      target?.select();
+    };
+    const onCellChange = (index, raw) => {
+      const pattern = props.type === "numeric" ? /[^0-9]/g : /[^a-zA-Z0-9]/g;
+      const cleaned = raw.replace(pattern, "");
+      if (cleaned === "") {
+        setCharAt(index, " ");
+        return;
+      }
+      if (cleaned.length > 1) {
+        const chars = code.value.padEnd(props.length, " ").split("");
+        for (let i = 0; i < cleaned.length && index + i < props.length; i++) {
+          chars[index + i] = cleaned[i];
+        }
+        setCode(chars.join("").trimEnd());
+        focusCell(index + cleaned.length);
+        return;
+      }
+      setCharAt(index, cleaned);
+      focusCell(index + 1);
+    };
+    const onCellKeydown = (index) => (event) => {
+      switch (event.key) {
+        case "Backspace": {
+          event.preventDefault();
+          if ((code.value[index] ?? " ").trim() === "") {
+            setCharAt(index - 1, " ");
+            focusCell(index - 1);
+          } else {
+            setCharAt(index, " ");
+          }
+          break;
+        }
+        case "Delete":
+          event.preventDefault();
+          setCharAt(index, " ");
+          break;
+        case "ArrowLeft":
+          event.preventDefault();
+          focusCell(index - 1);
+          break;
+        case "ArrowRight":
+          event.preventDefault();
+          focusCell(index + 1);
+          break;
+        case "Home":
+          event.preventDefault();
+          focusCell(0);
+          break;
+        case "End":
+          event.preventDefault();
+          focusCell(props.length - 1);
+          break;
+      }
+    };
+    return () => h(
+      "div",
+      {
+        class: cx(
+          "ansh-pin",
+          props.invalid && "ansh-pin--invalid",
+          props.disabled && "ansh-pin--disabled",
+          attrs.class
+        ),
+        role: "group",
+        "aria-label": props.label,
+        // The group is described by the live region below, so progress is announced without each
+        // cell interrupting with "1 of 6, edit text".
+        "aria-describedby": `${id}-status`
+      },
+      [
+        ...Array.from(
+          { length: props.length },
+          (_, index) => h("input", {
+            key: index,
+            ref: (node) => {
+              inputs.value[index] = node ?? null;
+            },
+            class: "ansh-pin__cell ansh-focusable",
+            type: props.mask ? "password" : "text",
+            inputmode: props.type === "numeric" ? "numeric" : "text",
+            // Only the first cell advertises one-time-code; on the others it makes the platform
+            // offer to fill a single character, which is nonsense.
+            autocomplete: index === 0 ? "one-time-code" : "off",
+            autofocus: props.autofocus && index === 0,
+            maxlength: props.length,
+            disabled: props.disabled,
+            "aria-label": `Digit ${index + 1} of ${props.length}`,
+            "aria-invalid": props.invalid || void 0,
+            value: (code.value[index] ?? "").trim(),
+            onInput: (event) => onCellChange(index, event.target.value),
+            onKeydown: onCellKeydown(index),
+            onFocus: (event) => event.target.select()
+          })
+        ),
+        h(
+          "span",
+          { class: "ansh-visually-hidden", id: `${id}-status`, "aria-live": "polite" },
+          code.value.trim().length === props.length ? "Code complete" : `${code.value.trim().length} of ${props.length} digits entered`
+        )
+      ]
+    );
+  }
+});
+var TagsInput = defineComponent({
+  name: "AnshTagsInput",
+  props: {
+    modelValue: { type: Array, default: void 0 },
+    defaultValue: { type: Array, default: () => [] },
+    placeholder: { type: String, default: "Add and press Enter" },
+    /** Maximum number of tags. The input hides once reached. */
+    max: { type: Number, default: Number.POSITIVE_INFINITY },
+    /** Keys that commit the current text. Default Enter, Tab and comma. */
+    delimiters: {
+      type: Array,
+      default: () => ["Enter", "Tab", ","]
+    },
+    /** Reject a value — return an error string, or `null` to accept. */
+    validate: { type: Function, default: void 0 },
+    /** Fold duplicates silently instead of flagging them. Default `true`. */
+    dedupe: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false },
+    invalid: { type: Boolean, default: false },
+    label: { type: String, default: "Tags" }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit, attrs }) {
+    const fieldProps = useFieldControl();
+    const [tags, setTags] = useControllableState(
+      () => props.modelValue,
+      props.defaultValue,
+      (next) => emit("update:modelValue", next)
+    );
+    const draft = ref("");
+    const error = ref(null);
+    const inputRef = ref(null);
+    const tagRefs = ref([]);
+    const commit = (raw) => {
+      const text = raw.trim();
+      if (text === "") return false;
+      if (tags.value.length >= props.max) {
+        error.value = `Up to ${props.max} allowed`;
+        return false;
+      }
+      if (props.dedupe && tags.value.includes(text)) {
+        draft.value = "";
+        return true;
+      }
+      const failure = props.validate?.(text);
+      if (failure) {
+        error.value = failure;
+        return false;
+      }
+      setTags([...tags.value, text]);
+      draft.value = "";
+      error.value = null;
+      return true;
+    };
+    const removeAt = (index) => {
+      setTags(tags.value.filter((_, i) => i !== index));
+      error.value = null;
+      queueMicrotask(() => {
+        const next = tagRefs.value[index] ?? tagRefs.value[index - 1];
+        if (next?.isConnected) next.focus();
+        else inputRef.value?.focus();
+      });
+    };
+    const onKeydown = (event) => {
+      if (event.key === "Tab" && draft.value.trim() === "") return;
+      if (props.delimiters.includes(event.key)) {
+        event.preventDefault();
+        commit(draft.value);
+        return;
+      }
+      if (event.key === "Backspace" && draft.value === "" && tags.value.length > 0) {
+        event.preventDefault();
+        removeAt(tags.value.length - 1);
+      }
+    };
+    return () => {
+      const atLimit = tags.value.length >= props.max;
+      return h("div", { class: cx("ansh-tags", attrs.class) }, [
+        h(
+          "div",
+          {
+            class: cx(
+              "ansh-tags__control",
+              "ansh-focusable-within",
+              (props.invalid || error.value) && "ansh-tags__control--invalid",
+              props.disabled && "ansh-tags__control--disabled"
+            ),
+            onMousedown: (event) => {
+              if (event.target === event.currentTarget) {
+                event.preventDefault();
+                inputRef.value?.focus();
+              }
+            }
+          },
+          [
+            // Labelled distinctly from the input. Giving both the same accessible name produces two
+            // different elements indistinguishable in a screen reader's element list — and ambiguous
+            // to every testing query.
+            h(
+              "ul",
+              { class: "ansh-tags__list", "aria-label": `${props.label}: selected` },
+              tags.value.map(
+                (tag, index) => h("li", { key: `${tag}-${index}`, class: "ansh-chip" }, [
+                  h("span", { class: "ansh-chip__label" }, tag),
+                  h(
+                    "button",
+                    {
+                      ref: (node) => {
+                        tagRefs.value[index] = node ?? null;
+                      },
+                      type: "button",
+                      class: "ansh-chip__remove",
+                      "aria-label": `Remove ${tag}`,
+                      disabled: props.disabled,
+                      onClick: () => removeAt(index)
+                    },
+                    [
+                      h(
+                        "svg",
+                        { viewBox: "0 0 16 16", width: "10", height: "10", "aria-hidden": "true" },
+                        [
+                          h("path", {
+                            d: "M4 4l8 8M12 4l-8 8",
+                            stroke: "currentColor",
+                            "stroke-width": "2",
+                            "stroke-linecap": "round",
+                            fill: "none"
+                          })
+                        ]
+                      )
+                    ]
+                  )
+                ])
+              )
+            ),
+            !atLimit ? h("input", {
+              ref: inputRef,
+              type: "text",
+              class: "ansh-tags__input",
+              value: draft.value,
+              placeholder: tags.value.length === 0 ? props.placeholder : "",
+              disabled: props.disabled,
+              "aria-label": props.label,
+              "aria-invalid": props.invalid || Boolean(error.value) || void 0,
+              ...fieldProps.value,
+              onInput: (event) => {
+                draft.value = event.target.value;
+                error.value = null;
+              },
+              onKeydown,
+              // Committing on blur stops the most common data-loss complaint: typing a tag,
+              // clicking Save, and finding it was never added.
+              onBlur: () => commit(draft.value),
+              onPaste: (event) => {
+                const text = event.clipboardData?.getData("text") ?? "";
+                if (!/[,\n\t]/.test(text)) return;
+                event.preventDefault();
+                for (const part of text.split(/[,\n\t]+/)) commit(part);
+              }
+            }) : null
+          ]
+        ),
+        error.value ? h("p", { class: "ansh-field__error", role: "alert" }, error.value) : null
+      ]);
+    };
+  }
+});
+var Rating = defineComponent({
+  name: "AnshRating",
+  props: {
+    modelValue: { type: Number, default: void 0 },
+    defaultValue: { type: Number, default: 0 },
+    /** Number of symbols. Default `5`. */
+    max: { type: Number, default: 5 },
+    /** Allow halves. Default `false`. */
+    allowHalf: { type: Boolean, default: false },
+    /** Display only — no interaction, no focus. */
+    readonly: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: "md" },
+    /** Custom symbol. Defaults to a star. */
+    icon: { type: [String, Object, Function], default: void 0 },
+    label: { type: String, default: "Rating" },
+    name: { type: String, default: void 0 }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit, attrs }) {
+    const [current, setCurrent] = useControllableState(
+      () => props.modelValue,
+      props.defaultValue,
+      (next) => emit("update:modelValue", next)
+    );
+    const preview = ref(null);
+    const groupName = useId("rating");
+    const shown = computed(() => preview.value ?? current.value);
+    const renderSymbol = () => props.icon ? resolveSlotContent(props.icon) : h("svg", { viewBox: "0 0 20 20", class: "ansh-rating__glyph", "aria-hidden": "true" }, [
+      h("path", {
+        d: "M10 1.6l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L1.6 7.7l5.8-.8z",
+        fill: "currentColor"
+      })
+    ]);
+    return () => {
+      if (props.readonly) {
+        return h(
+          "span",
+          {
+            class: cx(
+              "ansh-rating",
+              `ansh-rating--${props.size}`,
+              "ansh-rating--readonly",
+              attrs.class
+            ),
+            role: "img",
+            "aria-label": `${current.value} out of ${props.max}`
+          },
+          Array.from(
+            { length: props.max },
+            (_, index) => h(
+              "span",
+              {
+                key: index,
+                class: "ansh-rating__item",
+                // A percentage per symbol, so 4.2 fills the fifth star 20% of the way rather than
+                // rounding to a whole star and misreporting the value.
+                style: {
+                  ["--ansh-fill"]: `${Math.min(Math.max(current.value - index, 0), 1) * 100}%`
+                }
+              },
+              [renderSymbol()]
+            )
+          )
+        );
+      }
+      const steps = props.allowHalf ? props.max * 2 : props.max;
+      return h(
+        "span",
+        {
+          role: "radiogroup",
+          "aria-label": props.label,
+          class: cx(
+            "ansh-rating",
+            `ansh-rating--${props.size}`,
+            props.disabled && "ansh-rating--disabled",
+            attrs.class
+          ),
+          onMouseleave: () => {
+            preview.value = null;
+          }
+        },
+        Array.from({ length: steps }, (_, step) => {
+          const stepValue = props.allowHalf ? (step + 1) / 2 : step + 1;
+          const index = Math.ceil(stepValue) - 1;
+          const isHalf = props.allowHalf && stepValue % 1 !== 0;
+          return h(
+            "label",
+            {
+              key: stepValue,
+              class: cx("ansh-rating__hit", isHalf && "ansh-rating__hit--half"),
+              onMouseenter: () => {
+                if (!props.disabled) preview.value = stepValue;
+              }
+            },
+            [
+              h("input", {
+                type: "radio",
+                class: "ansh-visually-hidden",
+                name: props.name ?? groupName,
+                value: stepValue,
+                checked: current.value === stepValue,
+                disabled: props.disabled,
+                "aria-label": `${stepValue} ${stepValue === 1 ? "star" : "stars"}`,
+                onChange: () => setCurrent(stepValue)
+              }),
+              // Only whole steps draw a symbol; the half-step label is an invisible hit area
+              // layered over the left side of the one that follows it.
+              !isHalf ? h(
+                "span",
+                {
+                  class: "ansh-rating__item",
+                  style: {
+                    ["--ansh-fill"]: `${Math.min(Math.max(shown.value - index, 0), 1) * 100}%`
+                  }
+                },
+                [renderSymbol()]
+              ) : null
+            ]
+          );
+        })
+      );
+    };
+  }
+});
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  const units = ["KB", "MB", "GB"];
+  let size = bytes / 1024;
+  let unit = 0;
+  while (size >= 1024 && unit < units.length - 1) {
+    size /= 1024;
+    unit++;
+  }
+  return `${size.toFixed(size >= 10 ? 0 : 1)} ${units[unit]}`;
+}
+var Dropzone = defineComponent({
+  name: "AnshDropzone",
+  props: {
+    /** `accept` attribute, e.g. `'image/*,.pdf'`. */
+    accept: { type: String, default: void 0 },
+    multiple: { type: Boolean, default: false },
+    /** Per-file size cap, in bytes. */
+    maxSize: { type: Number, default: void 0 },
+    /** Maximum number of files. */
+    maxFiles: { type: Number, default: Number.POSITIVE_INFINITY },
+    disabled: { type: Boolean, default: false },
+    /** Show thumbnails for images. Default `true`. */
+    previews: { type: Boolean, default: true },
+    label: {
+      type: [String, Object, Function],
+      default: "Drop files here, or browse"
+    },
+    hint: { type: [String, Object, Function], default: void 0 }
+  },
+  emits: ["files"],
+  setup(props, { emit, attrs, slots }) {
+    const files = ref([]);
+    const dragging = ref(false);
+    let depth = 0;
+    const inputRef = ref(null);
+    const id = useId("dropzone");
+    const validate = (file) => {
+      if (props.maxSize !== void 0 && file.size > props.maxSize) {
+        return `Larger than ${formatBytes(props.maxSize)}`;
+      }
+      if (props.accept) {
+        const patterns = props.accept.split(",").map((part) => part.trim().toLowerCase());
+        const name = file.name.toLowerCase();
+        const type = file.type.toLowerCase();
+        const ok = patterns.some((pattern) => {
+          if (pattern.startsWith(".")) return name.endsWith(pattern);
+          if (pattern.endsWith("/*")) return type.startsWith(pattern.slice(0, -1));
+          return type === pattern;
+        });
+        if (!ok) return "Unsupported file type";
+      }
+      return void 0;
+    };
+    const add = (incoming) => {
+      if (!incoming || props.disabled) return;
+      const accepted = [];
+      const room = props.maxFiles - files.value.length;
+      for (const file of Array.from(incoming).slice(0, props.multiple ? room : 1)) {
+        const error = validate(file);
+        accepted.push({
+          file,
+          id: `${file.name}-${file.size}-${file.lastModified}`,
+          ...props.previews && file.type.startsWith("image/") && !error ? { preview: URL.createObjectURL(file) } : null,
+          ...error ? { error } : null
+        });
+      }
+      const next = props.multiple ? [...files.value, ...accepted] : accepted;
+      if (!props.multiple) {
+        for (const previous of files.value) {
+          if (previous.preview) URL.revokeObjectURL(previous.preview);
+        }
+      }
+      files.value = next;
+      emit("files", next);
+    };
+    const remove = (fileId) => {
+      const target = files.value.find((entry) => entry.id === fileId);
+      if (target?.preview) URL.revokeObjectURL(target.preview);
+      const next = files.value.filter((entry) => entry.id !== fileId);
+      files.value = next;
+      emit("files", next);
+      if (inputRef.value) inputRef.value.value = "";
+    };
+    return () => {
+      const rejected = files.value.filter((entry) => entry.error);
+      return h("div", { class: cx("ansh-dropzone-wrap", attrs.class) }, [
+        h(
+          "div",
+          {
+            class: cx(
+              "ansh-dropzone",
+              dragging.value && "ansh-dropzone--active",
+              props.disabled && "ansh-dropzone--disabled"
+            ),
+            onDragenter: (event) => {
+              event.preventDefault();
+              depth++;
+              if (!props.disabled) dragging.value = true;
+            },
+            onDragover: (event) => {
+              event.preventDefault();
+              if (event.dataTransfer)
+                event.dataTransfer.dropEffect = props.disabled ? "none" : "copy";
+            },
+            onDragleave: (event) => {
+              event.preventDefault();
+              depth--;
+              if (depth <= 0) {
+                depth = 0;
+                dragging.value = false;
+              }
+            },
+            onDrop: (event) => {
+              event.preventDefault();
+              depth = 0;
+              dragging.value = false;
+              add(event.dataTransfer?.files ?? null);
+            }
+          },
+          [
+            h("input", {
+              ref: inputRef,
+              id,
+              type: "file",
+              class: "ansh-dropzone__input",
+              accept: props.accept,
+              multiple: props.multiple,
+              disabled: props.disabled,
+              onChange: (event) => add(event.target.files)
+            }),
+            h("label", { for: id, class: "ansh-dropzone__label" }, [
+              h("span", { class: "ansh-dropzone__icon", "aria-hidden": "true" }, [
+                h(
+                  "svg",
+                  {
+                    viewBox: "0 0 24 24",
+                    width: "28",
+                    height: "28",
+                    fill: "none",
+                    stroke: "currentColor",
+                    "stroke-width": "1.5"
+                  },
+                  [
+                    h("path", {
+                      d: "M12 16V4m0 0L8 8m4-4l4 4",
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round"
+                    }),
+                    h("path", {
+                      d: "M3 15v3a3 3 0 003 3h12a3 3 0 003-3v-3",
+                      "stroke-linecap": "round"
+                    })
+                  ]
+                )
+              ]),
+              h("span", { class: "ansh-dropzone__text" }, [resolveSlotContent(props.label)]),
+              props.hint ? h("span", { class: "ansh-dropzone__hint" }, [resolveSlotContent(props.hint)]) : null
+            ]),
+            slots.default?.()
+          ]
+        ),
+        files.value.length > 0 ? h(
+          "ul",
+          { class: "ansh-dropzone__files" },
+          files.value.map(
+            (entry) => h(
+              "li",
+              {
+                key: entry.id,
+                class: cx("ansh-dropzone__file", entry.error && "ansh-dropzone__file--error")
+              },
+              [
+                entry.preview ? (
+                  // Decorative: the file name beside it is the accessible content.
+                  h("img", { src: entry.preview, alt: "", class: "ansh-dropzone__thumb" })
+                ) : h(
+                  "span",
+                  {
+                    class: "ansh-dropzone__thumb ansh-dropzone__thumb--generic",
+                    "aria-hidden": "true"
+                  },
+                  entry.file.name.split(".").pop()?.slice(0, 4).toUpperCase()
+                ),
+                h("span", { class: "ansh-dropzone__meta" }, [
+                  h("span", { class: "ansh-dropzone__name" }, entry.file.name),
+                  h(
+                    "span",
+                    { class: "ansh-dropzone__size" },
+                    entry.error ?? formatBytes(entry.file.size)
+                  )
+                ]),
+                h(
+                  "button",
+                  {
+                    type: "button",
+                    class: "ansh-dropzone__remove ansh-focusable",
+                    "aria-label": `Remove ${entry.file.name}`,
+                    onClick: () => remove(entry.id)
+                  },
+                  [
+                    h(
+                      "svg",
+                      {
+                        viewBox: "0 0 16 16",
+                        width: "12",
+                        height: "12",
+                        "aria-hidden": "true"
+                      },
+                      [
+                        h("path", {
+                          d: "M4 4l8 8M12 4l-8 8",
+                          stroke: "currentColor",
+                          "stroke-width": "1.75",
+                          "stroke-linecap": "round",
+                          fill: "none"
+                        })
+                      ]
+                    )
+                  ]
+                )
+              ]
+            )
+          )
+        ) : null,
+        // Rejections are announced. A file silently missing from the list after a drop is the
+        // single most confusing failure mode this component has.
+        h(
+          "span",
+          { class: "ansh-visually-hidden", role: "status", "aria-live": "polite" },
+          rejected.length > 0 ? `${rejected.length} file${rejected.length === 1 ? "" : "s"} rejected` : files.value.length > 0 ? `${files.value.length} file${files.value.length === 1 ? "" : "s"} ready` : ""
+        )
+      ]);
+    };
+  }
+});
+var ColorPicker = defineComponent({
+  name: "AnshColorPicker",
+  props: {
+    modelValue: { type: String, default: void 0 },
+    defaultValue: { type: String, default: "#0275f4" },
+    format: { type: String, default: "hex" },
+    alpha: { type: Boolean, default: false },
+    presets: { type: Array, default: void 0 },
+    contrastAgainst: { type: String, default: void 0 },
+    disabled: { type: Boolean, default: false },
+    label: { type: String, default: "Colour" }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit, attrs }) {
+    const [current, setCurrent] = useControllableState(
+      () => props.modelValue,
+      props.defaultValue,
+      (next) => emit("update:modelValue", next)
+    );
+    const open = ref(false);
+    const triggerRef = ref(null);
+    const panelRef = ref(null);
+    const planeRef = ref(null);
+    const id = useId("colorpicker");
+    let hueMemory = rgbToHsv(tryParseColor(current.value) ?? parseColor(props.defaultValue)).h;
+    const hsv = computed(() => {
+      const rgb = tryParseColor(current.value) ?? parseColor(props.defaultValue);
+      const parsed = rgbToHsv(rgb);
+      if (parsed.s > 1e-3 && parsed.v > 1e-3) hueMemory = parsed.h;
+      return { ...parsed, h: parsed.s < 1e-3 || parsed.v < 1e-3 ? hueMemory : parsed.h };
+    });
+    const commitHsv = (next) => {
+      const rgb = hsvToRgb(next);
+      switch (props.format) {
+        case "rgb":
+          setCurrent(
+            next.a < 1 ? `rgba(${Math.round(rgb.r * 255)}, ${Math.round(rgb.g * 255)}, ${Math.round(rgb.b * 255)}, ${Number(next.a.toFixed(2))})` : `rgb(${Math.round(rgb.r * 255)}, ${Math.round(rgb.g * 255)}, ${Math.round(rgb.b * 255)})`
+          );
+          break;
+        case "hsl":
+          setCurrent(
+            `hsl(${Math.round(next.h)} ${Math.round(next.s * 100)}% ${Math.round(next.v * (1 - next.s / 2) * 100)}%${next.a < 1 ? ` / ${Number(next.a.toFixed(2))}` : ""})`
+          );
+          break;
+        case "oklch":
+          setCurrent(toOklchString(rgb));
+          break;
+        default:
+          setCurrent(toHex(rgb, next.a < 1));
+      }
+    };
+    const { position } = useAnchoredPosition(triggerRef, panelRef, open, {
+      placement: "bottom-start",
+      offset: 8
+    });
+    useDismiss(
+      panelRef,
+      open,
+      () => {
+        open.value = false;
+      },
+      { ignore: [triggerRef] }
+    );
+    const dragPlane = (event) => {
+      if (props.disabled) return;
+      const plane = planeRef.value;
+      if (!plane) return;
+      event.currentTarget.setPointerCapture(event.pointerId);
+      const apply = (clientX, clientY) => {
+        const rect = plane.getBoundingClientRect();
+        const s = Math.min(Math.max((clientX - rect.left) / rect.width, 0), 1);
+        const v = 1 - Math.min(Math.max((clientY - rect.top) / rect.height, 0), 1);
+        commitHsv({ ...hsv.value, s, v });
+      };
+      apply(event.clientX, event.clientY);
+      const onMove = (moveEvent) => apply(moveEvent.clientX, moveEvent.clientY);
+      const onUp = () => {
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+      };
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+    };
+    const onPlaneKeyDown = (event) => {
+      const step = event.shiftKey ? 0.1 : 0.02;
+      let { s, v } = hsv.value;
+      switch (event.key) {
+        case "ArrowRight":
+          s = Math.min(1, s + step);
+          break;
+        case "ArrowLeft":
+          s = Math.max(0, s - step);
+          break;
+        case "ArrowUp":
+          v = Math.min(1, v + step);
+          break;
+        case "ArrowDown":
+          v = Math.max(0, v - step);
+          break;
+        default:
+          return;
+      }
+      event.preventDefault();
+      commitHsv({ ...hsv.value, s, v });
+    };
+    return () => {
+      const swatch = toHex(hsvToRgb(hsv.value), hsv.value.a < 1);
+      const pureHue = toHex(hsvToRgb({ h: hsv.value.h, s: 1, v: 1, a: 1 }));
+      const contrast = props.contrastAgainst ? contrastRatio(hsvToRgb(hsv.value), parseColor(props.contrastAgainst)) : null;
+      return h("div", { class: cx("ansh-colorpicker", attrs.class) }, [
+        h(
+          "button",
+          {
+            ref: triggerRef,
+            type: "button",
+            class: "ansh-colorpicker__trigger ansh-focusable",
+            disabled: props.disabled,
+            "aria-haspopup": "dialog",
+            "aria-expanded": open.value,
+            "aria-label": `${props.label}: ${swatch}`,
+            onClick: () => {
+              open.value = !open.value;
+            }
+          },
+          [
+            h("span", {
+              class: "ansh-colorpicker__swatch",
+              style: { background: swatch },
+              "aria-hidden": "true"
+            }),
+            h("span", { class: "ansh-colorpicker__value" }, current.value)
+          ]
+        ),
+        open.value ? h(Teleport, { to: "body" }, [
+          h(
+            "div",
+            {
+              ref: panelRef,
+              role: "dialog",
+              "aria-label": props.label,
+              class: "ansh-colorpicker__panel",
+              style: position.value.style
+            },
+            [
+              h(
+                "div",
+                {
+                  ref: planeRef,
+                  class: "ansh-colorpicker__plane",
+                  style: { "--ansh-hue": pureHue },
+                  onPointerdown: dragPlane
+                },
+                [
+                  h("div", {
+                    role: "slider",
+                    tabindex: "0",
+                    class: "ansh-colorpicker__knob ansh-focusable",
+                    style: {
+                      left: `${hsv.value.s * 100}%`,
+                      top: `${(1 - hsv.value.v) * 100}%`,
+                      background: swatch
+                    },
+                    "aria-label": "Saturation and brightness",
+                    "aria-valuetext": `Saturation ${Math.round(hsv.value.s * 100)}%, brightness ${Math.round(hsv.value.v * 100)}%`,
+                    "aria-valuenow": Math.round(hsv.value.s * 100),
+                    "aria-valuemin": 0,
+                    "aria-valuemax": 100,
+                    onKeydown: onPlaneKeyDown
+                  })
+                ]
+              ),
+              h("div", { class: "ansh-colorpicker__rails" }, [
+                h("div", {
+                  class: "ansh-colorpicker__preview",
+                  style: { background: swatch },
+                  "aria-hidden": "true"
+                }),
+                h("div", { class: "ansh-colorpicker__rail-group" }, [
+                  h("input", {
+                    type: "range",
+                    class: "ansh-colorpicker__rail ansh-colorpicker__rail--hue ansh-focusable",
+                    min: 0,
+                    max: 360,
+                    step: 1,
+                    value: Math.round(hsv.value.h),
+                    "aria-label": "Hue",
+                    "aria-valuetext": `${Math.round(hsv.value.h)} degrees`,
+                    onInput: (event) => {
+                      commitHsv({
+                        ...hsv.value,
+                        h: Number(event.target.value)
+                      });
+                    }
+                  }),
+                  props.alpha ? h("input", {
+                    type: "range",
+                    class: "ansh-colorpicker__rail ansh-colorpicker__rail--alpha ansh-focusable",
+                    style: { "--ansh-solid": toHex(hsvToRgb({ ...hsv.value, a: 1 })) },
+                    min: 0,
+                    max: 100,
+                    step: 1,
+                    value: Math.round(hsv.value.a * 100),
+                    "aria-label": "Opacity",
+                    "aria-valuetext": `${Math.round(hsv.value.a * 100)} percent`,
+                    onInput: (event) => {
+                      commitHsv({
+                        ...hsv.value,
+                        a: Number(event.target.value) / 100
+                      });
+                    }
+                  }) : null
+                ])
+              ]),
+              h("div", { class: "ansh-colorpicker__row" }, [
+                h("input", {
+                  type: "text",
+                  class: "ansh-input ansh-input--sm ansh-colorpicker__text",
+                  value: current.value,
+                  "aria-label": `${props.label} value`,
+                  spellcheck: false,
+                  onInput: (event) => {
+                    const text = event.target.value;
+                    setCurrent(text);
+                    const rgb = tryParseColor(text);
+                    if (rgb) hueMemory = rgbToHsv(rgb).h;
+                  }
+                })
+              ]),
+              contrast !== null ? h(
+                "p",
+                {
+                  class: cx(
+                    "ansh-colorpicker__contrast",
+                    contrast >= 4.5 && "ansh-colorpicker__contrast--pass",
+                    contrast < 3 && "ansh-colorpicker__contrast--fail"
+                  ),
+                  "aria-live": "polite"
+                },
+                `${contrast.toFixed(2)}:1 against ${props.contrastAgainst} \u2014 ${contrast >= 7 ? "AAA" : contrast >= 4.5 ? "AA" : contrast >= 3 ? "AA large only" : "fails"}`
+              ) : null,
+              props.presets && props.presets.length > 0 ? h(
+                "div",
+                {
+                  class: "ansh-colorpicker__presets",
+                  role: "group",
+                  "aria-label": "Preset colours"
+                },
+                props.presets.map(
+                  (preset) => h("button", {
+                    key: preset,
+                    type: "button",
+                    class: cx(
+                      "ansh-colorpicker__preset",
+                      preset.toLowerCase() === swatch.toLowerCase() && "ansh-colorpicker__preset--on"
+                    ),
+                    style: { background: preset },
+                    "aria-label": preset,
+                    "aria-pressed": preset.toLowerCase() === swatch.toLowerCase(),
+                    onClick: () => {
+                      const rgb = tryParseColor(preset);
+                      if (rgb) {
+                        hueMemory = rgbToHsv(rgb).h;
+                        setCurrent(preset);
+                      }
+                    }
+                  })
+                )
+              ) : null,
+              h(
+                "span",
+                { class: "ansh-visually-hidden", "aria-live": "polite", id: `${id}-live` },
+                swatch
+              )
+            ]
+          )
+        ]) : null
+      ]);
+    };
+  }
+});
+function startOfDay(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function addDays(date, days) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
+}
+function addMonths(date, months) {
+  const target = new Date(date.getFullYear(), date.getMonth() + months, 1);
+  const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
+  return new Date(target.getFullYear(), target.getMonth(), Math.min(date.getDate(), lastDay));
+}
+function isSameDay(a, b) {
+  if (!a || !b) return false;
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function defaultWeekStart(locale) {
+  const region = (locale ?? (typeof navigator !== "undefined" ? navigator.language : "en-GB")).split("-")[1]?.toUpperCase();
+  return region && ["US", "CA", "JP", "IL", "BR", "MX", "PH", "KR"].includes(region) ? 0 : 1;
+}
+function isoWeek(date) {
+  const target = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  target.setDate(target.getDate() + 3 - (target.getDay() + 6) % 7);
+  const firstThursday = new Date(target.getFullYear(), 0, 4);
+  firstThursday.setDate(firstThursday.getDate() + 3 - (firstThursday.getDay() + 6) % 7);
+  return 1 + Math.round((target.getTime() - firstThursday.getTime()) / (7 * 864e5));
+}
+var Calendar = defineComponent({
+  name: "AnshCalendar",
+  props: {
+    mode: { type: String, default: "single" },
+    modelValue: { type: [Date, Object], default: void 0 },
+    defaultValue: { type: [Date, Object], default: void 0 },
+    min: { type: Date, default: void 0 },
+    max: { type: Date, default: void 0 },
+    isDateDisabled: { type: Function, default: void 0 },
+    weekStartsOn: {
+      type: Number,
+      default: void 0
+    },
+    locale: { type: String, default: void 0 },
+    months: { type: Number, default: 1 },
+    showWeekNumbers: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit, attrs }) {
+    const initialDefault = props.defaultValue ?? (props.mode === "range" ? { start: null, end: null } : null);
+    const [selection, setSelection] = useControllableState(
+      () => props.modelValue,
+      initialDefault,
+      (next) => emit("update:modelValue", next)
+    );
+    const singleValue = () => props.mode === "single" ? selection.value : null;
+    const rangeValue = () => props.mode === "range" ? selection.value : { start: null, end: null };
+    const today = startOfDay(/* @__PURE__ */ new Date());
+    const initialAnchor = startOfDay(singleValue() ?? rangeValue().start ?? /* @__PURE__ */ new Date());
+    const viewMonth = ref(initialAnchor);
+    const cursor = ref(initialAnchor);
+    const hovered = ref(null);
+    const gridRef = ref(null);
+    let shouldFocus = false;
+    const firstWeekday = () => props.weekStartsOn ?? defaultWeekStart(props.locale);
+    const dayNames = () => {
+      const formatter = new Intl.DateTimeFormat(props.locale, { weekday: "short" });
+      const longFormatter = new Intl.DateTimeFormat(props.locale, { weekday: "long" });
+      const start = firstWeekday();
+      return Array.from({ length: 7 }, (_, i) => {
+        const date = new Date(2024, 0, 7 + (start + i) % 7);
+        return { short: formatter.format(date), long: longFormatter.format(date) };
+      });
+    };
+    const monthLabel = () => new Intl.DateTimeFormat(props.locale, { month: "long", year: "numeric" });
+    const fullDate = () => new Intl.DateTimeFormat(props.locale, {
+      weekday: "long",
+      day: "numeric",
+      month: "long",
+      year: "numeric"
+    });
+    const isDisabled = (date) => {
+      if (props.min && date < startOfDay(props.min)) return true;
+      if (props.max && date > startOfDay(props.max)) return true;
+      return props.isDateDisabled?.(date) ?? false;
+    };
+    const moveCursor = (next) => {
+      shouldFocus = true;
+      cursor.value = next;
+      const firstVisible = new Date(viewMonth.value.getFullYear(), viewMonth.value.getMonth(), 1);
+      const lastVisible = new Date(
+        viewMonth.value.getFullYear(),
+        viewMonth.value.getMonth() + props.months,
+        0
+      );
+      if (next < firstVisible || next > lastVisible) viewMonth.value = next;
+    };
+    watch(
+      [cursor, viewMonth],
+      () => {
+        if (!shouldFocus) return;
+        shouldFocus = false;
+        gridRef.value?.querySelector('[data-ansh-day][tabindex="0"]')?.focus({ preventScroll: true });
+      },
+      { flush: "post" }
+    );
+    const commit = (date) => {
+      if (isDisabled(date)) return;
+      if (props.mode === "single") {
+        setSelection(date);
+        return;
+      }
+      const range = rangeValue();
+      if (!range.start || range.end || date < range.start) {
+        setSelection({ start: date, end: null });
+      } else {
+        setSelection({ start: range.start, end: date });
+      }
+    };
+    const onKeyDown = (event) => {
+      let next = null;
+      switch (event.key) {
+        case "ArrowLeft":
+          next = addDays(cursor.value, -1);
+          break;
+        case "ArrowRight":
+          next = addDays(cursor.value, 1);
+          break;
+        case "ArrowUp":
+          next = addDays(cursor.value, -7);
+          break;
+        case "ArrowDown":
+          next = addDays(cursor.value, 7);
+          break;
+        case "Home":
+          next = addDays(cursor.value, -((cursor.value.getDay() - firstWeekday() + 7) % 7));
+          break;
+        case "End":
+          next = addDays(cursor.value, 6 - (cursor.value.getDay() - firstWeekday() + 7) % 7);
+          break;
+        case "PageUp":
+          next = addMonths(cursor.value, event.shiftKey ? -12 : -1);
+          break;
+        case "PageDown":
+          next = addMonths(cursor.value, event.shiftKey ? 12 : 1);
+          break;
+        case "Enter":
+        case " ":
+          event.preventDefault();
+          commit(cursor.value);
+          return;
+        default:
+          return;
+      }
+      event.preventDefault();
+      moveCursor(next);
+    };
+    const inRange = (date) => {
+      if (props.mode !== "range") return false;
+      const range = rangeValue();
+      if (!range.start) return false;
+      const end = range.end ?? hovered.value;
+      if (!end) return false;
+      const [low, high] = range.start <= end ? [range.start, end] : [end, range.start];
+      return date > low && date < high;
+    };
+    const renderMonth = (offset) => {
+      const monthDate = new Date(
+        viewMonth.value.getFullYear(),
+        viewMonth.value.getMonth() + offset,
+        1
+      );
+      const firstOfMonth = new Date(monthDate.getFullYear(), monthDate.getMonth(), 1);
+      const leading = (firstOfMonth.getDay() - firstWeekday() + 7) % 7;
+      const gridStart = addDays(firstOfMonth, -leading);
+      const days = Array.from({ length: 42 }, (_, i) => addDays(gridStart, i));
+      const weeks = Array.from({ length: 6 }, (_, w) => days.slice(w * 7, w * 7 + 7));
+      const label = monthLabel();
+      const fullDateFormatter = fullDate();
+      const names = dayNames();
+      const single = singleValue();
+      const range = rangeValue();
+      return h("div", { class: "ansh-calendar__month", key: offset }, [
+        h(
+          "div",
+          { class: "ansh-calendar__caption", "aria-hidden": "true" },
+          label.format(monthDate)
+        ),
+        h(
+          "table",
+          { class: "ansh-calendar__grid", role: "grid", "aria-label": label.format(monthDate) },
+          [
+            h("thead", {}, [
+              h("tr", {}, [
+                props.showWeekNumbers ? h("th", { scope: "col", class: "ansh-calendar__weekno-head" }, [
+                  h("span", { class: "ansh-visually-hidden" }, "Week")
+                ]) : null,
+                ...names.map(
+                  (day) => h(
+                    "th",
+                    {
+                      key: day.long,
+                      scope: "col",
+                      class: "ansh-calendar__weekday",
+                      abbr: day.long
+                    },
+                    [
+                      h("span", { "aria-hidden": "true" }, day.short),
+                      h("span", { class: "ansh-visually-hidden" }, day.long)
+                    ]
+                  )
+                )
+              ])
+            ]),
+            h(
+              "tbody",
+              {},
+              weeks.map(
+                (week) => h("tr", { key: week[0].toISOString() }, [
+                  props.showWeekNumbers ? h("td", { class: "ansh-calendar__weekno" }, isoWeek(week[0])) : null,
+                  ...week.map((date) => {
+                    const outside = date.getMonth() !== monthDate.getMonth();
+                    const dateDisabled = isDisabled(date);
+                    const isSelected = props.mode === "single" ? isSameDay(date, single) : isSameDay(date, range.start) || isSameDay(date, range.end);
+                    const isCursor = isSameDay(date, cursor.value);
+                    return h(
+                      "td",
+                      { key: date.toISOString(), class: "ansh-calendar__cell", role: "gridcell" },
+                      [
+                        h(
+                          "button",
+                          {
+                            type: "button",
+                            "data-ansh-day": "",
+                            class: cx(
+                              "ansh-calendar__day",
+                              outside && "ansh-calendar__day--outside",
+                              isSelected && "ansh-calendar__day--selected",
+                              inRange(date) && "ansh-calendar__day--in-range",
+                              isSameDay(date, today) && "ansh-calendar__day--today"
+                            ),
+                            // Roving tabindex: exactly one day is a tab stop, so Tab enters and
+                            // leaves the calendar rather than walking 42 buttons.
+                            tabindex: isCursor ? "0" : "-1",
+                            disabled: dateDisabled,
+                            "aria-selected": isSelected,
+                            "aria-current": isSameDay(date, today) ? "date" : void 0,
+                            // The full date is the accessible name; the visible number alone would
+                            // be announced as a bare "14".
+                            "aria-label": fullDateFormatter.format(date),
+                            onClick: () => {
+                              cursor.value = date;
+                              commit(date);
+                            },
+                            onMouseenter: () => {
+                              if (props.mode === "range") hovered.value = date;
+                            },
+                            onFocus: () => {
+                              cursor.value = date;
+                            }
+                          },
+                          String(date.getDate())
+                        )
+                      ]
+                    );
+                  })
+                ])
+              )
+            )
+          ]
+        )
+      ]);
+    };
+    return () => h(
+      "div",
+      {
+        class: cx(
+          "ansh-calendar",
+          props.months > 1 && "ansh-calendar--multi",
+          attrs.class
+        ),
+        onKeydown: onKeyDown,
+        onMouseleave: () => {
+          hovered.value = null;
+        }
+      },
+      [
+        h("div", { class: "ansh-calendar__header" }, [
+          h(
+            "button",
+            {
+              type: "button",
+              class: "ansh-calendar__nav ansh-focusable",
+              "aria-label": "Previous month",
+              onClick: () => {
+                viewMonth.value = addMonths(viewMonth.value, -1);
+              }
+            },
+            [
+              h(
+                "svg",
+                { viewBox: "0 0 12 12", width: "14", height: "14", "aria-hidden": "true" },
+                [
+                  h("path", {
+                    d: "M7.5 2.5L4 6l3.5 3.5",
+                    stroke: "currentColor",
+                    "stroke-width": "1.5",
+                    fill: "none",
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round"
+                  })
+                ]
+              )
+            ]
+          ),
+          // One live region for the whole calendar. Per-month headings marked `aria-hidden`
+          // above, so a month change is announced once rather than twice in a two-month view.
+          h(
+            "div",
+            { class: "ansh-calendar__title", "aria-live": "polite" },
+            props.months > 1 ? `${monthLabel().format(viewMonth.value)} \u2013 ${monthLabel().format(new Date(viewMonth.value.getFullYear(), viewMonth.value.getMonth() + props.months - 1, 1))}` : monthLabel().format(viewMonth.value)
+          ),
+          h(
+            "button",
+            {
+              type: "button",
+              class: "ansh-calendar__nav ansh-focusable",
+              "aria-label": "Next month",
+              onClick: () => {
+                viewMonth.value = addMonths(viewMonth.value, 1);
+              }
+            },
+            [
+              h(
+                "svg",
+                { viewBox: "0 0 12 12", width: "14", height: "14", "aria-hidden": "true" },
+                [
+                  h("path", {
+                    d: "M4.5 2.5L8 6l-3.5 3.5",
+                    stroke: "currentColor",
+                    "stroke-width": "1.5",
+                    fill: "none",
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round"
+                  })
+                ]
+              )
+            ]
+          )
+        ]),
+        h(
+          "div",
+          { class: "ansh-calendar__months", ref: gridRef },
+          Array.from({ length: props.months }, (_, index) => renderMonth(index))
+        )
+      ]
+    );
+  }
+});
+var calendarForwardProps = {
+  min: { type: Date, default: void 0 },
+  max: { type: Date, default: void 0 },
+  isDateDisabled: { type: Function, default: void 0 },
+  weekStartsOn: {
+    type: Number,
+    default: void 0
+  },
+  locale: { type: String, default: void 0 },
+  showWeekNumbers: { type: Boolean, default: false }
+};
+var DatePicker = defineComponent({
+  name: "AnshDatePicker",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: Date, default: void 0 },
+    defaultValue: { type: Date, default: void 0 },
+    placeholder: { type: String, default: void 0 },
+    disabled: { type: Boolean, default: false },
+    invalid: { type: Boolean, default: false },
+    clearable: { type: Boolean, default: true },
+    format: { type: Function, default: void 0 },
+    label: { type: String, default: "Date" },
+    name: { type: String, default: void 0 },
+    months: { type: Number, default: void 0 },
+    ...calendarForwardProps
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit, attrs }) {
+    const fieldProps = useFieldControl();
+    const [selected, setSelected] = useControllableState(
+      () => props.modelValue,
+      props.defaultValue ?? null,
+      (next) => emit("update:modelValue", next)
+    );
+    const open = ref(false);
+    const text = ref("");
+    const editing = ref(false);
+    const anchorRef = ref(null);
+    const panelRef = ref(null);
+    const inputRef = ref(null);
+    const formatter = computed(
+      () => new Intl.DateTimeFormat(props.locale, {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric"
+      })
+    );
+    const order = computed(() => {
+      const parts = formatter.value.formatToParts(new Date(2026, 2, 14));
+      return parts.filter(
+        (p) => ["day", "month", "year"].includes(p.type)
+      ).map((p) => p.type);
+    });
+    const display = computed(() => {
+      const sel = selected.value;
+      if (props.format) return sel ? props.format(sel) : "";
+      return sel ? formatter.value.format(sel) : "";
+    });
+    const parse = (raw) => {
+      const numbers = raw.split(/\D+/).filter(Boolean).map(Number);
+      if (numbers.length < 3) return null;
+      const parts = {};
+      order.value.forEach((type, index) => {
+        parts[type] = numbers[index];
+      });
+      const { month = 0, day = 0 } = parts;
+      let { year = 0 } = parts;
+      if (year < 100) year += year < 70 ? 2e3 : 1900;
+      const date = new Date(year, month - 1, day);
+      if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
+        return null;
+      }
+      return startOfDay(date);
+    };
+    const commitText = () => {
+      editing.value = false;
+      if (text.value.trim() === "") {
+        setSelected(null);
+        return;
+      }
+      const parsed = parse(text.value);
+      if (parsed) setSelected(parsed);
+      text.value = "";
+    };
+    const { position } = useAnchoredPosition(anchorRef, panelRef, open, {
+      placement: "bottom-start",
+      offset: 6
+    });
+    useDismiss(
+      panelRef,
+      open,
+      () => {
+        open.value = false;
+      },
+      { ignore: [anchorRef] }
+    );
+    const placeholderText = computed(
+      () => props.placeholder ?? order.value.map((type) => type === "year" ? "yyyy" : type === "month" ? "mm" : "dd").join("/")
+    );
+    return () => {
+      const { class: attrClass, ...restAttrs } = attrs;
+      return h("div", { class: cx("ansh-datepicker", attrClass) }, [
+        h(
+          "div",
+          {
+            ref: anchorRef,
+            class: cx(
+              "ansh-input-group",
+              "ansh-focusable-within",
+              (props.invalid || fieldProps.value["aria-invalid"]) && "ansh-input-group--invalid",
+              props.disabled && "ansh-input-group--disabled"
+            )
+          },
+          [
+            h("input", {
+              ref: inputRef,
+              type: "text",
+              inputmode: "numeric",
+              class: "ansh-input",
+              value: editing.value ? text.value : display.value,
+              placeholder: placeholderText.value,
+              disabled: props.disabled || fieldProps.value.disabled,
+              "aria-label": props.label,
+              "aria-invalid": props.invalid || void 0,
+              autocomplete: "off",
+              ...fieldProps.value,
+              ...restAttrs,
+              onInput: (event) => {
+                editing.value = true;
+                text.value = event.target.value;
+              },
+              onBlur: commitText,
+              onKeydown: (event) => {
+                if (event.key === "Enter") {
+                  event.preventDefault();
+                  commitText();
+                  open.value = false;
+                } else if (event.key === "ArrowDown" && !open.value) {
+                  event.preventDefault();
+                  open.value = true;
+                } else if (event.key === "Escape" && open.value) {
+                  event.preventDefault();
+                  open.value = false;
+                }
+              }
+            }),
+            props.clearable && selected.value && !props.disabled ? h(
+              "button",
+              {
+                type: "button",
+                class: "ansh-input-group__clear ansh-focusable",
+                "aria-label": "Clear date",
+                onClick: () => {
+                  setSelected(null);
+                  text.value = "";
+                  inputRef.value?.focus();
+                }
+              },
+              [
+                h(
+                  "svg",
+                  { viewBox: "0 0 16 16", width: "12", height: "12", "aria-hidden": "true" },
+                  [
+                    h("path", {
+                      d: "M4 4l8 8M12 4l-8 8",
+                      stroke: "currentColor",
+                      "stroke-width": "1.75",
+                      "stroke-linecap": "round",
+                      fill: "none"
+                    })
+                  ]
+                )
+              ]
+            ) : null,
+            h(
+              "button",
+              {
+                type: "button",
+                class: "ansh-input-group__button ansh-focusable",
+                "aria-label": "Open calendar",
+                "aria-haspopup": "dialog",
+                "aria-expanded": open.value,
+                disabled: props.disabled,
+                onClick: () => {
+                  open.value = !open.value;
+                }
+              },
+              [
+                h(
+                  "svg",
+                  {
+                    viewBox: "0 0 20 20",
+                    width: "16",
+                    height: "16",
+                    fill: "none",
+                    stroke: "currentColor",
+                    "stroke-width": "1.5",
+                    "aria-hidden": "true"
+                  },
+                  [
+                    h("rect", { x: "3", y: "4.5", width: "14", height: "13", rx: "2.5" }),
+                    h("path", { d: "M3 8.5h14M7 2.5v3M13 2.5v3", "stroke-linecap": "round" })
+                  ]
+                )
+              ]
+            )
+          ]
+        ),
+        props.name ? (
+          // ISO in the hidden field. A server parsing "14/03/2026" has to guess the locale; an
+          // ISO date is unambiguous everywhere.
+          h("input", {
+            type: "hidden",
+            name: props.name,
+            value: selected.value ? `${selected.value.getFullYear()}-${String(selected.value.getMonth() + 1).padStart(2, "0")}-${String(selected.value.getDate()).padStart(2, "0")}` : ""
+          })
+        ) : null,
+        open.value ? h(Teleport, { to: "body" }, [
+          h(
+            "div",
+            {
+              ref: panelRef,
+              role: "dialog",
+              "aria-label": props.label,
+              class: "ansh-datepicker__panel",
+              style: position.value.style
+            },
+            [
+              h(Calendar, {
+                mode: "single",
+                modelValue: selected.value,
+                "onUpdate:modelValue": (next) => {
+                  setSelected(next);
+                  open.value = false;
+                  inputRef.value?.focus();
+                },
+                locale: props.locale,
+                min: props.min,
+                max: props.max,
+                isDateDisabled: props.isDateDisabled,
+                weekStartsOn: props.weekStartsOn,
+                months: props.months,
+                showWeekNumbers: props.showWeekNumbers
+              })
+            ]
+          )
+        ]) : null
+      ]);
+    };
+  }
+});
+var DateRangePicker = defineComponent({
+  name: "AnshDateRangePicker",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: Object, default: void 0 },
+    defaultValue: { type: Object, default: void 0 },
+    disabled: { type: Boolean, default: false },
+    invalid: { type: Boolean, default: false },
+    label: { type: String, default: "Date range" },
+    months: { type: Number, default: 2 },
+    ...calendarForwardProps
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit, attrs }) {
+    const [range, setRange] = useControllableState(
+      () => props.modelValue,
+      props.defaultValue ?? { start: null, end: null },
+      (next) => emit("update:modelValue", next)
+    );
+    const open = ref(false);
+    const anchorRef = ref(null);
+    const panelRef = ref(null);
+    const formatter = computed(
+      () => new Intl.DateTimeFormat(props.locale, { day: "numeric", month: "short", year: "numeric" })
+    );
+    const { position } = useAnchoredPosition(anchorRef, panelRef, open, {
+      placement: "bottom-start",
+      offset: 6
+    });
+    useDismiss(
+      panelRef,
+      open,
+      () => {
+        open.value = false;
+      },
+      { ignore: [anchorRef] }
+    );
+    const summary = computed(() => {
+      const r = range.value;
+      if (r.start && r.end)
+        return `${formatter.value.format(r.start)} \u2013 ${formatter.value.format(r.end)}`;
+      if (r.start) return `${formatter.value.format(r.start)} \u2013 \u2026`;
+      return "Select dates";
+    });
+    return () => {
+      const { class: attrClass, ...restAttrs } = attrs;
+      return h("div", { class: cx("ansh-datepicker", attrClass) }, [
+        h(
+          "button",
+          {
+            ref: anchorRef,
+            type: "button",
+            class: cx(
+              "ansh-select__trigger",
+              "ansh-focusable",
+              open.value && "ansh-select__trigger--open",
+              props.invalid && "ansh-select__trigger--invalid",
+              !range.value.start && "ansh-select__trigger--placeholder"
+            ),
+            disabled: props.disabled,
+            "aria-haspopup": "dialog",
+            "aria-expanded": open.value,
+            "aria-label": `${props.label}: ${summary.value}`,
+            ...restAttrs,
+            onClick: () => {
+              open.value = !open.value;
+            }
+          },
+          [
+            h(
+              "svg",
+              {
+                viewBox: "0 0 20 20",
+                width: "16",
+                height: "16",
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": "1.5",
+                "aria-hidden": "true"
+              },
+              [
+                h("rect", { x: "3", y: "4.5", width: "14", height: "13", rx: "2.5" }),
+                h("path", { d: "M3 8.5h14M7 2.5v3M13 2.5v3", "stroke-linecap": "round" })
+              ]
+            ),
+            h("span", { class: "ansh-select__value" }, summary.value)
+          ]
+        ),
+        open.value ? h(Teleport, { to: "body" }, [
+          h(
+            "div",
+            {
+              ref: panelRef,
+              role: "dialog",
+              "aria-label": props.label,
+              class: "ansh-datepicker__panel",
+              style: position.value.style
+            },
+            [
+              h(Calendar, {
+                mode: "range",
+                months: props.months,
+                modelValue: range.value,
+                "onUpdate:modelValue": (next) => {
+                  const nextRange = next;
+                  setRange(nextRange);
+                  if (nextRange.start && nextRange.end) open.value = false;
+                },
+                locale: props.locale,
+                min: props.min,
+                max: props.max,
+                isDateDisabled: props.isDateDisabled,
+                weekStartsOn: props.weekStartsOn,
+                showWeekNumbers: props.showWeekNumbers
+              })
+            ]
+          )
+        ]) : null
+      ]);
+    };
+  }
+});
+
+export { Calendar, Checkbox, ChoiceCard, ColorPicker, Combobox, DatePicker, DateRangePicker, Dropzone, Field, Fieldset, Input, NumberInput, OptionList, PinInput, Radio, RadioGroup, RangeSlider, Rating, Select, Slider, Switch, TagsInput, Textarea, VisuallyHidden, addDays, addMonths, filterOptions, firstEnabled, isSameDay, scoreOption, startOfDay, stepActive, useFieldContext, useFieldControl, useTypeahead };
+//# sourceMappingURL=chunk-SOYRICHU.js.map
+//# sourceMappingURL=chunk-SOYRICHU.js.map