vectis-ui 0.12.0 → 0.13.0

package/dist/components/VColorInput/VColorInput.d.ts

@@ -0,0 +1,113 @@
+import { ColorFormat, ColorSwatch } from '../VColorPicker/VColorPicker.js';
+import { FieldLabelPosition } from '../VField/VField.js';
+/** The height of the field: 32, 40 or 48 pixels. */
+export type ColorInputSize = 'sm' | 'md' | 'lg';
+/** Where the picker opens relative to the field. */
+export type ColorInputPlacement = 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';
+interface ColorInputProps {
+    /**
+     * How the value is written: `#rrggbb`, `rgb()`, `hsl()` or `oklch()`. The field accepts all
+     * four, and rewrites what was typed in this one when the reader leaves it.
+     */
+    format?: ColorFormat;
+    /** Offers an opacity track, and writes the alpha into the value when it is below 1. */
+    alpha?: boolean;
+    /** Preset colours, offered as swatches in the picker. */
+    swatches?: ColorSwatch[];
+    /** Hides the picker's eyedropper button. */
+    hideEyeDropper?: boolean;
+    /** The label above the field. */
+    label?: string;
+    /** A line of help under the field. */
+    hint?: string;
+    /**
+     * A message saying what is wrong with the value, shown in place of the hint. It marks the
+     * field invalid, is read along with it, and is announced when it appears or changes.
+     */
+    error?: string;
+    /** Marks the field as required: an asterisk follows the label, and the field is `required`. */
+    required?: boolean;
+    /** Hides the label visually. It still names the field for assistive technology. */
+    hideLabel?: boolean;
+    /**
+     * Where the label sits: above the field (`top`, the default), or at its start, in a column of
+     * its own, moving back above when there is not room for both.
+     */
+    labelPosition?: FieldLabelPosition;
+    /** What the field says while empty. */
+    placeholder?: string;
+    /** The height of the field: 32, 40 or 48 pixels. */
+    size?: ColorInputSize;
+    /** Takes 4px off the height. */
+    compact?: boolean;
+    /** Makes the field unusable. */
+    disabled?: boolean;
+    /** Shows the colour without letting it change: nothing can be typed, and there is no picker. */
+    readonly?: boolean;
+    /** Marks the field as invalid, for a rule of your own. */
+    invalid?: boolean;
+    /** Offers a cross that empties the value. */
+    clearable?: boolean;
+    /** What that cross does, in words. It falls back to the design system dictionary. */
+    clearLabel?: string;
+    /**
+     * What the swatch at the start of the field does, in words. It falls back to the design
+     * system dictionary.
+     */
+    pickerLabel?: string;
+    /** Where the picker opens relative to the field. */
+    placement?: ColorInputPlacement;
+}
+type __VLS_Props = ColorInputProps;
+type __VLS_Slots = {
+    /** Controls of your own inside the field, placed before the clear cross. */
+    'value-end'?(): unknown;
+};
+type __VLS_ModelProps = {
+    /** The colour, written in `format`, or `null` when the field is empty. */
+    modelValue?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    /** Moves the focus to the text field. */
+    focus: (options?: FocusOptions) => void | undefined;
+    /** Selects what the field is showing. */
+    select: () => void | undefined;
+    /** The real `<input>` behind the field. */
+    el: import('vue').ComputedRef<HTMLInputElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    clear: () => any;
+    "update:modelValue": (value: string | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClear?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+}>, {
+    label: string;
+    placeholder: string;
+    alpha: boolean;
+    format: ColorFormat;
+    swatches: ColorSwatch[];
+    pickerLabel: string;
+    error: string;
+    size: ColorInputSize;
+    compact: boolean;
+    disabled: boolean;
+    required: boolean;
+    placement: ColorInputPlacement;
+    invalid: boolean;
+    hint: string;
+    hideLabel: boolean;
+    labelPosition: FieldLabelPosition;
+    readonly: boolean;
+    clearable: boolean;
+    clearLabel: string;
+    hideEyeDropper: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VColorInput/VColorInput.js

@@ -0,0 +1,9 @@
+import './VColorInput.css';
+import e from "./VColorInput.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                            */
+//#region src/components/VColorInput/VColorInput.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=VColorInput.js.map

package/dist/components/VColorInput/VColorInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VColorInput.js","names":[],"sources":["../../../src/components/VColorInput/VColorInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * Compose VInput with VColorPicker. The colour is typed into the field in any format, and the\n * swatch at its start opens the picker in a panel; a text input cannot use popovertarget, so the\n * manual panel bridge handles opening, dismissal and focus transfer into the picker.\n */\nimport { computed, inject, ref, watch } from 'vue'\n\nimport VColorPicker from '../VColorPicker/VColorPicker.vue'\nimport type { ColorFormat, ColorSwatch } from '../VColorPicker/VColorPicker.vue'\nimport { formatColor, parseColor } from '../VColorPicker/color'\nimport type { FieldLabelPosition } from '../VField/VField.vue'\nimport VInput from '../VInput/VInput.vue'\nimport { inputGroupKey } from '../VInput/context'\nimport VPopover from '../VPopover/VPopover.vue'\nimport { canClear } from '../../composables/useClearable'\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useFieldPanel } from '../../composables/useFieldPanel'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useMessages } from '../../i18n/state'\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type ColorInputSize = 'sm' | 'md' | 'lg'\n\n/** Where the picker opens relative to the field. */\nexport type ColorInputPlacement =\n  'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end'\n\ninterface ColorInputProps {\n  /**\n   * How the value is written: `#rrggbb`, `rgb()`, `hsl()` or `oklch()`. The field accepts all\n   * four, and rewrites what was typed in this one when the reader leaves it.\n   */\n  format?: ColorFormat\n  /** Offers an opacity track, and writes the alpha into the value when it is below 1. */\n  alpha?: boolean\n  /** Preset colours, offered as swatches in the picker. */\n  swatches?: ColorSwatch[]\n  /** Hides the picker's eyedropper button. */\n  hideEyeDropper?: boolean\n  /** The label above the field. */\n  label?: string\n  /** A line of help under the field. */\n  hint?: string\n  /**\n   * A message saying what is wrong with the value, shown in place of the hint. It marks the\n   * field invalid, is read along with it, and is announced when it appears or changes.\n   */\n  error?: string\n  /** Marks the field as required: an asterisk follows the label, and the field is `required`. */\n  required?: boolean\n  /** Hides the label visually. It still names the field for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the field (`top`, the default), or at its start, in a column of\n   * its own, moving back above when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\n  /** What the field says while empty. */\n  placeholder?: string\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: ColorInputSize\n  /** Takes 4px off the height. */\n  compact?: boolean\n  /** Makes the field unusable. */\n  disabled?: boolean\n  /** Shows the colour without letting it change: nothing can be typed, and there is no picker. */\n  readonly?: boolean\n  /** Marks the field as invalid, for a rule of your own. */\n  invalid?: boolean\n  /** Offers a cross that empties the value. */\n  clearable?: boolean\n  /** What that cross does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /**\n   * What the swatch at the start of the field does, in words. It falls back to the design\n   * system dictionary.\n   */\n  pickerLabel?: string\n  /** Where the picker opens relative to the field. */\n  placement?: ColorInputPlacement\n}\n\nconst props = withDefaults(defineProps<ColorInputProps>(), {\n  format: 'hex',\n  alpha: false,\n  swatches: undefined,\n  hideEyeDropper: false,\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  placeholder: undefined,\n  size: 'md',\n  compact: false,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  clearable: false,\n  clearLabel: undefined,\n  pickerLabel: undefined,\n  placement: 'bottom-start',\n})\n\n/** The colour, written in `format`, or `null` when the field is empty. */\nconst model = defineModel<string | null>({ default: null })\n\nconst emit = defineEmits<{\n  /** The clear cross emptied the field. The value has already been reset. */\n  clear: []\n}>()\n\ndefineSlots<{\n  /** Controls of your own inside the field, placed before the clear cross. */\n  'value-end'?(): unknown\n}>()\n\n// `class` and `style` stay on the wrapper; everything else goes down to the text field, which a\n// consumer's label points at and what assistive technology deals with.\ndefineOptions({ inheritAttrs: false })\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst m = useMessages()\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst panelRef = ref<InstanceType<typeof VPopover> | null>(null)\nconst inputRef = ref<InstanceType<typeof VInput> | null>(null)\nconst pickerRef = ref<InstanceType<typeof VColorPicker> | null>(null)\n\n// A VInputGroup joins several controls into one object, so the shape of this field is the\n// row's decision rather than its own (VInput/context.ts).\nconst group = inject(inputGroupKey, null)\nconst {\n  size: resolvedSize,\n  compact: resolvedCompact,\n  disabled: resolvedDisabled,\n} = useControlShape(props, group)\n\nconst hasPanel = computed(() => !props.readonly)\n\nconst {\n  open,\n  panelId,\n  popupAttrs,\n  closeAndFocus,\n  focusField,\n  toggleFromIcon,\n  onFocusout,\n  onKeydown,\n  onPanelMousedown,\n} = useFieldPanel({\n  rootEl,\n  panelRef,\n  field: inputRef,\n  disabled: () => resolvedDisabled.value || !hasPanel.value,\n  focusInPanel: () => pickerRef.value?.focus(),\n})\n\nconst inputAttrs = popupAttrs(\n  () => forwardedAttrs.value,\n  () => hasPanel.value,\n)\n\n/** What the field shows: the value, or what is being typed until the reader leaves. */\nconst fieldText = ref('')\nwatch(model, (value) => (fieldText.value = value ?? ''), { immediate: true })\n\nconst parsed = computed(() => parseColor(model.value))\n\n/** The colour the swatch shows, with the opacity it has. */\nconst swatchColor = computed(() =>\n  parsed.value ? formatColor(parsed.value, 'rgb', props.alpha) : undefined,\n)\n\n/**\n * Takes what was typed, in any of the four formats, and rewrites it in `format`. Anything that\n * is not a colour puts the field back as it was.\n */\nfunction commitField() {\n  const text = fieldText.value.trim()\n  if (!text) {\n    model.value = null\n    return\n  }\n  const color = parseColor(text)\n  if (!color) {\n    fieldText.value = model.value ?? ''\n    return\n  }\n  const next = formatColor(color, props.format, props.alpha)\n  model.value = next\n  // The same value written again changes nothing, so the watcher would leave the text as typed.\n  fieldText.value = next\n}\n\n// @keyboard\n// Enter takes the value and stays in the field; without it, the panel bridge would open the\n// picker. The down arrow remains the way into the picker.\nfunction onFieldKeydown(event: KeyboardEvent) {\n  if (event.key !== 'Enter') return\n  event.preventDefault()\n  commitField()\n}\n\n// @keyboard\n// Enter on a track or a swatch is done with choosing: the panel closes and the focus returns to\n// the field. A button's Enter is left alone, being its click.\nfunction onPickerKeydown(event: KeyboardEvent) {\n  if (event.key !== 'Enter' || !(event.target as HTMLElement).matches('input')) return\n  event.preventDefault()\n  closeAndFocus()\n}\n\nconst clearVisible = computed(() =>\n  canClear(props, resolvedDisabled.value, !!model.value || !!fieldText.value),\n)\n\nfunction clearValue() {\n  model.value = null\n  fieldText.value = ''\n  focusField()\n  emit('clear')\n}\n\ndefineExpose({\n  /** Moves the focus to the text field. */\n  focus: (options?: FocusOptions) => inputRef.value?.focus(options),\n  /** Selects what the field is showing. */\n  select: () => inputRef.value?.select(),\n  /** The real `<input>` behind the field. */\n  el: computed(() => inputRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-color-input\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-open=\"open ? '' : undefined\"\n    :data-disabled=\"resolvedDisabled ? '' : undefined\"\n    @focusout=\"onFocusout\"\n    @keydown=\"onKeydown\"\n  >\n    <VInput\n      ref=\"inputRef\"\n      v-model=\"fieldText\"\n      class=\"v-color-input-field\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      v-bind=\"inputAttrs\"\n      :readonly=\"readonly\"\n      :label=\"label\"\n      :hint=\"hint\"\n      :error=\"error\"\n      :required=\"required\"\n      :hide-label=\"hideLabel\"\n      :label-position=\"labelPosition\"\n      :placeholder=\"placeholder\"\n      :size=\"resolvedSize\"\n      :compact=\"resolvedCompact\"\n      :disabled=\"resolvedDisabled\"\n      :invalid=\"invalid\"\n      :clearable=\"clearable\"\n      :clear-visible=\"clearVisible\"\n      :clear-label=\"clearLabel ?? m.colorInput.clear\"\n      @clear=\"clearValue\"\n      @change=\"commitField\"\n      @keydown=\"onFieldKeydown\"\n    >\n      <template #start>\n        <button\n          v-if=\"hasPanel\"\n          type=\"button\"\n          class=\"v-field-action v-color-input-swatch\"\n          :aria-label=\"pickerLabel ?? m.colorInput.openPicker\"\n          :disabled=\"resolvedDisabled\"\n          @click=\"toggleFromIcon\"\n        >\n          <span class=\"v-color-input-chip\" :style=\"{ '--color-input-chip': swatchColor }\" />\n        </button>\n        <span v-else class=\"v-color-input-swatch\" aria-hidden=\"true\">\n          <span class=\"v-color-input-chip\" :style=\"{ '--color-input-chip': swatchColor }\" />\n        </span>\n      </template>\n      <template v-if=\"$slots['value-end']\" #value-end><slot name=\"value-end\" /></template>\n    </VInput>\n\n    <VPopover\n      v-if=\"hasPanel\"\n      :id=\"panelId\"\n      ref=\"panelRef\"\n      v-model:open=\"open\"\n      mode=\"manual\"\n      anchor=\"--color-input-anchor\"\n      :placement=\"placement\"\n      role=\"dialog\"\n      :aria-label=\"label ?? m.colorInput.pickerLabel\"\n      class=\"v-color-input-panel\"\n      @mousedown=\"onPanelMousedown\"\n    >\n      <VColorPicker\n        ref=\"pickerRef\"\n        v-model=\"model\"\n        :format=\"format\"\n        :alpha=\"alpha\"\n        :swatches=\"swatches\"\n        :hide-eye-dropper=\"hideEyeDropper\"\n        hide-input\n        @keydown=\"onPickerKeydown\"\n      />\n    </VPopover>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-color-input {\n    anchor-scope: --color-input-anchor;\n    display: block;\n    inline-size: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * Anchored to the field's box rather than the wrapper, which also holds the label and the\n   * hint: the panel then covers whichever of the two it lands on.\n   */\n  .v-color-input .v-input-field {\n    anchor-name: --color-input-anchor;\n  }\n\n  /* A colour is written left to right in every language, as in VColorPicker's own field. */\n  .v-color-input .v-input-control {\n    direction: ltr;\n    font-variant-numeric: tabular-nums;\n  }\n\n  .v-color-input .v-input-control:dir(rtl) {\n    text-align: right;\n  }\n\n  /* The read-only swatch, which is no button and takes none of `.v-field-action`. */\n  span.v-color-input-swatch {\n    display: inline-flex;\n    flex: none;\n  }\n\n  /*\n   * The checkerboard shows through a translucent colour, drawn in the theme's own surface and\n   * border colours; an empty field shows it alone. Forced colours leave the chip untouched: it\n   * is the value, not the theme's paint. As on VColorPicker's swatches, the edge is a\n   * translucent border shading the colour that runs under it, the checkerboard stopping inside:\n   * an opaque ring would leave a pale fringe on the antialiased pixels.\n   */\n  .v-color-input-chip {\n    inline-size: var(--vectis-icon-size);\n    block-size: var(--vectis-icon-size);\n    border: 1px solid var(--vectis-color-border-on-fill);\n    border-radius: var(--vectis-radius-interactive);\n    background:\n      linear-gradient(var(--color-input-chip, transparent), var(--color-input-chip, transparent))\n        border-box,\n      repeating-conic-gradient(var(--vectis-color-border) 0 25%, var(--vectis-color-surface) 0 50%)\n        0 0 / var(--vectis-control-size-color-picker-checker)\n        var(--vectis-control-size-color-picker-checker) padding-box;\n    forced-color-adjust: none;\n  }\n\n  .v-color-input[data-disabled] .v-color-input-chip {\n    opacity: 0.5;\n  }\n\n  /*\n   * `position-anchor` and the chrome come from VPopover; the panel's own padding is cancelled,\n   * VColorPicker padding itself as the date and time pickers do.\n   */\n  .v-popover-panel.v-color-input-panel {\n    inline-size: max-content;\n    padding: 0;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VColorInput/VColorInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,230 @@
+import { useMessages as e } from "../../i18n/state.js";
+import t from "../VPopover/VPopover.js";
+import { useControlShape as n } from "../../composables/useControlShape.js";
+import { useRootAttrs as r } from "../../composables/useRootAttrs.js";
+import { canClear as i } from "../../composables/useClearable.js";
+import { inputGroupKey as a } from "../VInput/context.js";
+import ee from "../VInput/VInput.js";
+import { useFieldPanel as te } from "../../composables/useFieldPanel.js";
+import { formatColor as o, parseColor as s } from "../VColorPicker/color.js";
+import c from "../VColorPicker/VColorPicker.js";
+import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as m, createVNode as h, defineComponent as g, inject as _, isRef as v, mergeModels as y, mergeProps as b, normalizeClass as x, normalizeStyle as S, openBlock as C, ref as w, renderSlot as ne, unref as T, useModel as re, watch as ie, withCtx as E } from "vue";
+//#region src/components/VColorInput/VColorInput.vue?vue&type=script&setup=true&lang.ts
+var ae = ["data-open", "data-disabled"], oe = ["aria-label", "disabled"], se = {
+	key: 1,
+	class: "v-color-input-swatch",
+	"aria-hidden": "true"
+}, D = /*@__PURE__*/ g({
+	inheritAttrs: !1,
+	__name: "VColorInput",
+	props: /*@__PURE__*/ y({
+		format: { default: "hex" },
+		alpha: {
+			type: Boolean,
+			default: !1
+		},
+		swatches: { default: void 0 },
+		hideEyeDropper: {
+			type: Boolean,
+			default: !1
+		},
+		label: { default: void 0 },
+		hint: { default: void 0 },
+		error: { default: void 0 },
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		hideLabel: {
+			type: Boolean,
+			default: !1
+		},
+		labelPosition: { default: "top" },
+		placeholder: { default: void 0 },
+		size: { default: "md" },
+		compact: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		clearable: {
+			type: Boolean,
+			default: !1
+		},
+		clearLabel: { default: void 0 },
+		pickerLabel: { default: void 0 },
+		placement: { default: "bottom-start" }
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ y(["clear"], ["update:modelValue"]),
+	setup(g, { expose: y, emit: D }) {
+		let O = g, k = re(g, "modelValue"), A = D, { rootClass: j, rootStyle: M, forwardedAttrs: N } = r(), P = e(), F = w(null), I = w(null), L = w(null), R = w(null), { size: z, compact: B, disabled: V } = n(O, _(a, null)), H = l(() => !O.readonly), { open: U, panelId: W, popupAttrs: G, closeAndFocus: K, focusField: ce, toggleFromIcon: q, onFocusout: J, onKeydown: Y, onPanelMousedown: le } = te({
+			rootEl: F,
+			panelRef: I,
+			field: L,
+			disabled: () => V.value || !H.value,
+			focusInPanel: () => R.value?.focus()
+		}), ue = G(() => N.value, () => H.value), X = w("");
+		ie(k, (e) => X.value = e ?? "", { immediate: !0 });
+		let Z = l(() => s(k.value)), Q = l(() => Z.value ? o(Z.value, "rgb", O.alpha) : void 0);
+		function $() {
+			let e = X.value.trim();
+			if (!e) {
+				k.value = null;
+				return;
+			}
+			let t = s(e);
+			if (!t) {
+				X.value = k.value ?? "";
+				return;
+			}
+			let n = o(t, O.format, O.alpha);
+			k.value = n, X.value = n;
+		}
+		function de(e) {
+			e.key === "Enter" && (e.preventDefault(), $());
+		}
+		function fe(e) {
+			e.key !== "Enter" || !e.target.matches("input") || (e.preventDefault(), K());
+		}
+		let pe = l(() => i(O, V.value, !!k.value || !!X.value));
+		function me() {
+			k.value = null, X.value = "", ce(), A("clear");
+		}
+		return y({
+			focus: (e) => L.value?.focus(e),
+			select: () => L.value?.select(),
+			el: l(() => L.value?.el ?? null)
+		}), (e, n) => (C(), f("div", {
+			ref_key: "rootEl",
+			ref: F,
+			class: x(["v-color-input", T(j)]),
+			style: S(T(M)),
+			"data-open": T(U) ? "" : void 0,
+			"data-disabled": T(V) ? "" : void 0,
+			onFocusout: n[4] ||= (...e) => T(J) && T(J)(...e),
+			onKeydown: n[5] ||= (...e) => T(Y) && T(Y)(...e)
+		}, [h(ee, b({
+			ref_key: "inputRef",
+			ref: L,
+			modelValue: X.value,
+			"onUpdate:modelValue": n[1] ||= (e) => X.value = e,
+			class: "v-color-input-field",
+			autocomplete: "off",
+			spellcheck: "false"
+		}, T(ue), {
+			readonly: g.readonly,
+			label: g.label,
+			hint: g.hint,
+			error: g.error,
+			required: g.required,
+			"hide-label": g.hideLabel,
+			"label-position": g.labelPosition,
+			placeholder: g.placeholder,
+			size: T(z),
+			compact: T(B),
+			disabled: T(V),
+			invalid: g.invalid,
+			clearable: g.clearable,
+			"clear-visible": pe.value,
+			"clear-label": g.clearLabel ?? T(P).colorInput.clear,
+			onClear: me,
+			onChange: $,
+			onKeydown: de
+		}), m({
+			start: E(() => [H.value ? (C(), f("button", {
+				key: 0,
+				type: "button",
+				class: "v-field-action v-color-input-swatch",
+				"aria-label": g.pickerLabel ?? T(P).colorInput.openPicker,
+				disabled: T(V),
+				onClick: n[0] ||= (...e) => T(q) && T(q)(...e)
+			}, [p("span", {
+				class: "v-color-input-chip",
+				style: S({ "--color-input-chip": Q.value })
+			}, null, 4)], 8, oe)) : (C(), f("span", se, [p("span", {
+				class: "v-color-input-chip",
+				style: S({ "--color-input-chip": Q.value })
+			}, null, 4)]))]),
+			_: 2
+		}, [e.$slots["value-end"] ? {
+			name: "value-end",
+			fn: E(() => [ne(e.$slots, "value-end")]),
+			key: "0"
+		} : void 0]), 1040, [
+			"modelValue",
+			"readonly",
+			"label",
+			"hint",
+			"error",
+			"required",
+			"hide-label",
+			"label-position",
+			"placeholder",
+			"size",
+			"compact",
+			"disabled",
+			"invalid",
+			"clearable",
+			"clear-visible",
+			"clear-label"
+		]), H.value ? (C(), u(t, {
+			key: 0,
+			id: T(W),
+			ref_key: "panelRef",
+			ref: I,
+			open: T(U),
+			"onUpdate:open": n[3] ||= (e) => v(U) ? U.value = e : null,
+			mode: "manual",
+			anchor: "--color-input-anchor",
+			placement: g.placement,
+			role: "dialog",
+			"aria-label": g.label ?? T(P).colorInput.pickerLabel,
+			class: "v-color-input-panel",
+			onMousedown: T(le)
+		}, {
+			default: E(() => [h(c, {
+				ref_key: "pickerRef",
+				ref: R,
+				modelValue: k.value,
+				"onUpdate:modelValue": n[2] ||= (e) => k.value = e,
+				format: g.format,
+				alpha: g.alpha,
+				swatches: g.swatches,
+				"hide-eye-dropper": g.hideEyeDropper,
+				"hide-input": "",
+				onKeydown: fe
+			}, null, 8, [
+				"modelValue",
+				"format",
+				"alpha",
+				"swatches",
+				"hide-eye-dropper"
+			])]),
+			_: 1
+		}, 8, [
+			"id",
+			"open",
+			"placement",
+			"aria-label",
+			"onMousedown"
+		])) : d("", !0)], 46, ae));
+	}
+});
+//#endregion
+export { D as default };
+
+//# sourceMappingURL=VColorInput.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VColorInput/VColorInput.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VColorInput.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VColorInput/VColorInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * Compose VInput with VColorPicker. The colour is typed into the field in any format, and the\n * swatch at its start opens the picker in a panel; a text input cannot use popovertarget, so the\n * manual panel bridge handles opening, dismissal and focus transfer into the picker.\n */\nimport { computed, inject, ref, watch } from 'vue'\n\nimport VColorPicker from '../VColorPicker/VColorPicker.vue'\nimport type { ColorFormat, ColorSwatch } from '../VColorPicker/VColorPicker.vue'\nimport { formatColor, parseColor } from '../VColorPicker/color'\nimport type { FieldLabelPosition } from '../VField/VField.vue'\nimport VInput from '../VInput/VInput.vue'\nimport { inputGroupKey } from '../VInput/context'\nimport VPopover from '../VPopover/VPopover.vue'\nimport { canClear } from '../../composables/useClearable'\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useFieldPanel } from '../../composables/useFieldPanel'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useMessages } from '../../i18n/state'\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type ColorInputSize = 'sm' | 'md' | 'lg'\n\n/** Where the picker opens relative to the field. */\nexport type ColorInputPlacement =\n  'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end'\n\ninterface ColorInputProps {\n  /**\n   * How the value is written: `#rrggbb`, `rgb()`, `hsl()` or `oklch()`. The field accepts all\n   * four, and rewrites what was typed in this one when the reader leaves it.\n   */\n  format?: ColorFormat\n  /** Offers an opacity track, and writes the alpha into the value when it is below 1. */\n  alpha?: boolean\n  /** Preset colours, offered as swatches in the picker. */\n  swatches?: ColorSwatch[]\n  /** Hides the picker's eyedropper button. */\n  hideEyeDropper?: boolean\n  /** The label above the field. */\n  label?: string\n  /** A line of help under the field. */\n  hint?: string\n  /**\n   * A message saying what is wrong with the value, shown in place of the hint. It marks the\n   * field invalid, is read along with it, and is announced when it appears or changes.\n   */\n  error?: string\n  /** Marks the field as required: an asterisk follows the label, and the field is `required`. */\n  required?: boolean\n  /** Hides the label visually. It still names the field for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the field (`top`, the default), or at its start, in a column of\n   * its own, moving back above when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\n  /** What the field says while empty. */\n  placeholder?: string\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: ColorInputSize\n  /** Takes 4px off the height. */\n  compact?: boolean\n  /** Makes the field unusable. */\n  disabled?: boolean\n  /** Shows the colour without letting it change: nothing can be typed, and there is no picker. */\n  readonly?: boolean\n  /** Marks the field as invalid, for a rule of your own. */\n  invalid?: boolean\n  /** Offers a cross that empties the value. */\n  clearable?: boolean\n  /** What that cross does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /**\n   * What the swatch at the start of the field does, in words. It falls back to the design\n   * system dictionary.\n   */\n  pickerLabel?: string\n  /** Where the picker opens relative to the field. */\n  placement?: ColorInputPlacement\n}\n\nconst props = withDefaults(defineProps<ColorInputProps>(), {\n  format: 'hex',\n  alpha: false,\n  swatches: undefined,\n  hideEyeDropper: false,\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  placeholder: undefined,\n  size: 'md',\n  compact: false,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  clearable: false,\n  clearLabel: undefined,\n  pickerLabel: undefined,\n  placement: 'bottom-start',\n})\n\n/** The colour, written in `format`, or `null` when the field is empty. */\nconst model = defineModel<string | null>({ default: null })\n\nconst emit = defineEmits<{\n  /** The clear cross emptied the field. The value has already been reset. */\n  clear: []\n}>()\n\ndefineSlots<{\n  /** Controls of your own inside the field, placed before the clear cross. */\n  'value-end'?(): unknown\n}>()\n\n// `class` and `style` stay on the wrapper; everything else goes down to the text field, which a\n// consumer's label points at and what assistive technology deals with.\ndefineOptions({ inheritAttrs: false })\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst m = useMessages()\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst panelRef = ref<InstanceType<typeof VPopover> | null>(null)\nconst inputRef = ref<InstanceType<typeof VInput> | null>(null)\nconst pickerRef = ref<InstanceType<typeof VColorPicker> | null>(null)\n\n// A VInputGroup joins several controls into one object, so the shape of this field is the\n// row's decision rather than its own (VInput/context.ts).\nconst group = inject(inputGroupKey, null)\nconst {\n  size: resolvedSize,\n  compact: resolvedCompact,\n  disabled: resolvedDisabled,\n} = useControlShape(props, group)\n\nconst hasPanel = computed(() => !props.readonly)\n\nconst {\n  open,\n  panelId,\n  popupAttrs,\n  closeAndFocus,\n  focusField,\n  toggleFromIcon,\n  onFocusout,\n  onKeydown,\n  onPanelMousedown,\n} = useFieldPanel({\n  rootEl,\n  panelRef,\n  field: inputRef,\n  disabled: () => resolvedDisabled.value || !hasPanel.value,\n  focusInPanel: () => pickerRef.value?.focus(),\n})\n\nconst inputAttrs = popupAttrs(\n  () => forwardedAttrs.value,\n  () => hasPanel.value,\n)\n\n/** What the field shows: the value, or what is being typed until the reader leaves. */\nconst fieldText = ref('')\nwatch(model, (value) => (fieldText.value = value ?? ''), { immediate: true })\n\nconst parsed = computed(() => parseColor(model.value))\n\n/** The colour the swatch shows, with the opacity it has. */\nconst swatchColor = computed(() =>\n  parsed.value ? formatColor(parsed.value, 'rgb', props.alpha) : undefined,\n)\n\n/**\n * Takes what was typed, in any of the four formats, and rewrites it in `format`. Anything that\n * is not a colour puts the field back as it was.\n */\nfunction commitField() {\n  const text = fieldText.value.trim()\n  if (!text) {\n    model.value = null\n    return\n  }\n  const color = parseColor(text)\n  if (!color) {\n    fieldText.value = model.value ?? ''\n    return\n  }\n  const next = formatColor(color, props.format, props.alpha)\n  model.value = next\n  // The same value written again changes nothing, so the watcher would leave the text as typed.\n  fieldText.value = next\n}\n\n// @keyboard\n// Enter takes the value and stays in the field; without it, the panel bridge would open the\n// picker. The down arrow remains the way into the picker.\nfunction onFieldKeydown(event: KeyboardEvent) {\n  if (event.key !== 'Enter') return\n  event.preventDefault()\n  commitField()\n}\n\n// @keyboard\n// Enter on a track or a swatch is done with choosing: the panel closes and the focus returns to\n// the field. A button's Enter is left alone, being its click.\nfunction onPickerKeydown(event: KeyboardEvent) {\n  if (event.key !== 'Enter' || !(event.target as HTMLElement).matches('input')) return\n  event.preventDefault()\n  closeAndFocus()\n}\n\nconst clearVisible = computed(() =>\n  canClear(props, resolvedDisabled.value, !!model.value || !!fieldText.value),\n)\n\nfunction clearValue() {\n  model.value = null\n  fieldText.value = ''\n  focusField()\n  emit('clear')\n}\n\ndefineExpose({\n  /** Moves the focus to the text field. */\n  focus: (options?: FocusOptions) => inputRef.value?.focus(options),\n  /** Selects what the field is showing. */\n  select: () => inputRef.value?.select(),\n  /** The real `<input>` behind the field. */\n  el: computed(() => inputRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-color-input\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-open=\"open ? '' : undefined\"\n    :data-disabled=\"resolvedDisabled ? '' : undefined\"\n    @focusout=\"onFocusout\"\n    @keydown=\"onKeydown\"\n  >\n    <VInput\n      ref=\"inputRef\"\n      v-model=\"fieldText\"\n      class=\"v-color-input-field\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      v-bind=\"inputAttrs\"\n      :readonly=\"readonly\"\n      :label=\"label\"\n      :hint=\"hint\"\n      :error=\"error\"\n      :required=\"required\"\n      :hide-label=\"hideLabel\"\n      :label-position=\"labelPosition\"\n      :placeholder=\"placeholder\"\n      :size=\"resolvedSize\"\n      :compact=\"resolvedCompact\"\n      :disabled=\"resolvedDisabled\"\n      :invalid=\"invalid\"\n      :clearable=\"clearable\"\n      :clear-visible=\"clearVisible\"\n      :clear-label=\"clearLabel ?? m.colorInput.clear\"\n      @clear=\"clearValue\"\n      @change=\"commitField\"\n      @keydown=\"onFieldKeydown\"\n    >\n      <template #start>\n        <button\n          v-if=\"hasPanel\"\n          type=\"button\"\n          class=\"v-field-action v-color-input-swatch\"\n          :aria-label=\"pickerLabel ?? m.colorInput.openPicker\"\n          :disabled=\"resolvedDisabled\"\n          @click=\"toggleFromIcon\"\n        >\n          <span class=\"v-color-input-chip\" :style=\"{ '--color-input-chip': swatchColor }\" />\n        </button>\n        <span v-else class=\"v-color-input-swatch\" aria-hidden=\"true\">\n          <span class=\"v-color-input-chip\" :style=\"{ '--color-input-chip': swatchColor }\" />\n        </span>\n      </template>\n      <template v-if=\"$slots['value-end']\" #value-end><slot name=\"value-end\" /></template>\n    </VInput>\n\n    <VPopover\n      v-if=\"hasPanel\"\n      :id=\"panelId\"\n      ref=\"panelRef\"\n      v-model:open=\"open\"\n      mode=\"manual\"\n      anchor=\"--color-input-anchor\"\n      :placement=\"placement\"\n      role=\"dialog\"\n      :aria-label=\"label ?? m.colorInput.pickerLabel\"\n      class=\"v-color-input-panel\"\n      @mousedown=\"onPanelMousedown\"\n    >\n      <VColorPicker\n        ref=\"pickerRef\"\n        v-model=\"model\"\n        :format=\"format\"\n        :alpha=\"alpha\"\n        :swatches=\"swatches\"\n        :hide-eye-dropper=\"hideEyeDropper\"\n        hide-input\n        @keydown=\"onPickerKeydown\"\n      />\n    </VPopover>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-color-input {\n    anchor-scope: --color-input-anchor;\n    display: block;\n    inline-size: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * Anchored to the field's box rather than the wrapper, which also holds the label and the\n   * hint: the panel then covers whichever of the two it lands on.\n   */\n  .v-color-input .v-input-field {\n    anchor-name: --color-input-anchor;\n  }\n\n  /* A colour is written left to right in every language, as in VColorPicker's own field. */\n  .v-color-input .v-input-control {\n    direction: ltr;\n    font-variant-numeric: tabular-nums;\n  }\n\n  .v-color-input .v-input-control:dir(rtl) {\n    text-align: right;\n  }\n\n  /* The read-only swatch, which is no button and takes none of `.v-field-action`. */\n  span.v-color-input-swatch {\n    display: inline-flex;\n    flex: none;\n  }\n\n  /*\n   * The checkerboard shows through a translucent colour, drawn in the theme's own surface and\n   * border colours; an empty field shows it alone. Forced colours leave the chip untouched: it\n   * is the value, not the theme's paint. As on VColorPicker's swatches, the edge is a\n   * translucent border shading the colour that runs under it, the checkerboard stopping inside:\n   * an opaque ring would leave a pale fringe on the antialiased pixels.\n   */\n  .v-color-input-chip {\n    inline-size: var(--vectis-icon-size);\n    block-size: var(--vectis-icon-size);\n    border: 1px solid var(--vectis-color-border-on-fill);\n    border-radius: var(--vectis-radius-interactive);\n    background:\n      linear-gradient(var(--color-input-chip, transparent), var(--color-input-chip, transparent))\n        border-box,\n      repeating-conic-gradient(var(--vectis-color-border) 0 25%, var(--vectis-color-surface) 0 50%)\n        0 0 / var(--vectis-control-size-color-picker-checker)\n        var(--vectis-control-size-color-picker-checker) padding-box;\n    forced-color-adjust: none;\n  }\n\n  .v-color-input[data-disabled] .v-color-input-chip {\n    opacity: 0.5;\n  }\n\n  /*\n   * `position-anchor` and the chrome come from VPopover; the panel's own padding is cancelled,\n   * VColorPicker padding itself as the date and time pickers do.\n   */\n  .v-popover-panel.v-color-input-panel {\n    inline-size: max-content;\n    padding: 0;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VColorPicker/VColorPicker.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-color-picker{--color-picker-checker:repeating-conic-gradient(var(--vectis-color-border) 0 25%, var(--vectis-color-surface) 0 50%) 0 0 / var(--vectis-control-size-color-picker-checker) var(--vectis-control-size-color-picker-checker);--color-picker-thumb:var(--vectis-control-size-color-picker-thumb);gap:var(--vectis-space-3);inline-size:var(--vectis-control-size-color-picker-width);max-inline-size:100%;padding:var(--vectis-space-3);color:var(--vectis-color-text);font-family:var(--vectis-text-family);flex-direction:column;display:inline-flex}.v-color-picker-area,.v-color-picker-track,.v-color-picker-preview,.v-color-picker-chip{forced-color-adjust:none;direction:ltr}.v-color-picker-area{block-size:var(--vectis-control-size-color-picker-area);border-radius:var(--vectis-radius-interactive);background:linear-gradient(to top, black, transparent), linear-gradient(to right, white, transparent), hsl(var(--color-picker-hue) 100% 50%);cursor:crosshair;touch-action:none;position:relative}.v-color-picker-thumb{inline-size:var(--color-picker-thumb);block-size:var(--color-picker-thumb);border-radius:var(--vectis-radius-pill);background:var(--color-picker-opaque);pointer-events:none;border:2px solid #fff;position:absolute;inset-block-start:calc((1 - var(--color-picker-v)) * 100%);inset-inline-start:calc(var(--color-picker-s) * 100%);translate:-50% -50%;box-shadow:0 0 0 1px #0006,inset 0 0 0 1px #0006}.v-color-picker-area:has(.v-hidden-input:focus-visible) .v-color-picker-thumb{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-color-picker-controls{align-items:center;gap:var(--vectis-space-2);display:flex}.v-color-picker-preview{inline-size:var(--vectis-control-size-color-picker-preview);block-size:var(--vectis-control-size-color-picker-preview);border-radius:var(--vectis-radius-pill);border:1px solid var(--vectis-color-border-on-fill);background:linear-gradient(var(--color-picker-color), var(--color-picker-color)) border-box, var(--color-picker-checker) padding-box;flex:none}.v-color-picker-tracks{gap:var(--vectis-space-3);flex-direction:column;flex:1;min-inline-size:0;display:flex}.v-color-picker-track{inline-size:100%;block-size:var(--vectis-control-size-color-picker-track);border-radius:var(--vectis-radius-pill);appearance:none;cursor:pointer;margin:0;display:block}.v-color-picker-hue{--color-picker-track-thumb:hsl(var(--color-picker-hue) 100% 50%);background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.v-color-picker-alpha{--color-picker-track-thumb:var(--color-picker-color);background:linear-gradient(to right, transparent, var(--color-picker-opaque)), var(--color-picker-checker)}.v-color-picker-track::-webkit-slider-thumb{appearance:none;inline-size:var(--color-picker-thumb);block-size:var(--color-picker-thumb);border-radius:var(--vectis-radius-pill);background:linear-gradient(var(--color-picker-track-thumb), var(--color-picker-track-thumb)), var(--color-picker-checker);border:2px solid #fff;box-shadow:0 0 0 1px #0006,inset 0 0 0 1px #0006}.v-color-picker-track::-moz-range-thumb{box-sizing:border-box;inline-size:var(--color-picker-thumb);block-size:var(--color-picker-thumb);border-radius:var(--vectis-radius-pill);background:linear-gradient(var(--color-picker-track-thumb), var(--color-picker-track-thumb)), var(--color-picker-checker);border:2px solid #fff;box-shadow:0 0 0 1px #0006,inset 0 0 0 1px #0006}.v-color-picker-track:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-color-picker-fields{gap:var(--vectis-space-2);display:flex}.v-color-picker-fields .v-color-picker-format{inline-size:var(--vectis-control-size-color-picker-format);flex:none}.v-color-picker-value{flex:1;min-inline-size:0}.v-color-picker-value .v-input-control{font-variant-numeric:tabular-nums;direction:ltr}.v-color-picker-value .v-input-control:dir(rtl){text-align:right}.v-color-picker-swatches{gap:var(--vectis-space-2);border:0;flex-wrap:wrap;min-inline-size:0;margin:0;padding:0;display:flex}.v-color-picker-swatch{cursor:pointer;display:inline-flex;position:relative}.v-color-picker-chip{inline-size:var(--vectis-control-size-color-picker-swatch);block-size:var(--vectis-control-size-color-picker-swatch);border-radius:var(--vectis-radius-interactive);border:1px solid var(--vectis-color-border-on-fill);background:linear-gradient(var(--color-picker-swatch), var(--color-picker-swatch)) border-box, var(--color-picker-checker) padding-box}.v-color-picker-swatch .v-hidden-input:checked+.v-color-picker-chip{outline:2px solid var(--vectis-color-text);outline-offset:1px}.v-color-picker-swatch .v-hidden-input:focus-visible+.v-color-picker-chip{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-color-picker[data-disabled] :is(.v-color-picker-area,.v-color-picker-preview,.v-color-picker-track,.v-color-picker-chip){opacity:.5}.v-color-picker[data-disabled] :is(.v-color-picker-area,.v-color-picker-track,.v-color-picker-swatch){cursor:not-allowed}.v-color-picker[data-readonly] :is(.v-color-picker-area,.v-color-picker-track,.v-color-picker-swatch){cursor:default}}

package/dist/components/VColorPicker/VColorPicker.d.ts

@@ -0,0 +1,67 @@
+import { ColorFormat } from './color.js';
+export type { ColorFormat } from './color.js';
+/** A preset colour: the colour alone, or the colour and the words that name it. */
+export type ColorSwatch = string | {
+    color: string;
+    label: string;
+};
+interface ColorPickerProps {
+    /**
+     * How the value is written: `#rrggbb`, `rgb()`, `hsl()` or `oklch()`. The text field accepts
+     * all four whatever this says.
+     */
+    format?: ColorFormat;
+    /** Offers an opacity track, and writes the alpha into the value when it is below 1. */
+    alpha?: boolean;
+    /** Preset colours, offered as a row of swatches under the picker. */
+    swatches?: ColorSwatch[];
+    /**
+     * Hides the text field and its format menu. VColorInput does, its own field playing that
+     * part.
+     */
+    hideInput?: boolean;
+    /**
+     * Hides the eyedropper button, shown otherwise wherever the browser offers the `EyeDropper`
+     * API.
+     */
+    hideEyeDropper?: boolean;
+    /** Makes the picker unusable. */
+    disabled?: boolean;
+    /**
+     * Shows the colour without letting it be changed. The controls stay focusable and announce
+     * their values, which separates it from `disabled`, and the value is still submitted.
+     */
+    readonly?: boolean;
+    /** What the picker is called. It falls back to the design system dictionary. */
+    label?: string;
+    /** The name the value is sent under in a form. */
+    name?: string;
+}
+type __VLS_Props = ColorPickerProps;
+type __VLS_ModelProps = {
+    /** The colour, written in `format`, or `null` when none has been chosen. */
+    modelValue?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {
+    /** Moves the focus to the saturation-brightness area. */
+    focus: (options?: FocusOptions) => void | undefined;
+    /** The root element. */
+    el: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+}>, {
+    label: string;
+    alpha: boolean;
+    format: ColorFormat;
+    swatches: ColorSwatch[];
+    name: string;
+    disabled: boolean;
+    readonly: boolean;
+    hideInput: boolean;
+    hideEyeDropper: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/VColorPicker/VColorPicker.js

@@ -0,0 +1,9 @@
+import './VColorPicker.css';
+import e from "./VColorPicker.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                             */
+//#region src/components/VColorPicker/VColorPicker.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=VColorPicker.js.map

package/dist/components/VColorPicker/VColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VColorPicker.js","names":[],"sources":["../../../src/components/VColorPicker/VColorPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @a11y @core\n/**\n * A colour picker built from native ranges: the hue and alpha tracks are `<input type=\"range\">`,\n * and the saturation-brightness area holds two hidden ones, one per axis, which assistive\n * technology adjusts on its own. JavaScript adds the pointer on the area and its two-axis arrow\n * keys, which no native control offers.\n */\nimport { computed, onMounted, ref, useId, watch } from 'vue'\n\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport VInput from '../VInput/VInput.vue'\nimport VSelect from '../VSelect/VSelect.vue'\nimport { colorize as colorizeIcon } from '../VIcon/icons/colorize'\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useLocale, useMessages } from '../../i18n/state'\nimport { clamp } from '../../utils/number'\nimport { COLOR_FORMATS, formatColor, hsvToRgb, parseColor, rgbToHsv, sameColor } from './color'\nimport type { ColorFormat, Hsva, Rgba } from './color'\n\nexport type { ColorFormat } from './color'\n\n/** A preset colour: the colour alone, or the colour and the words that name it. */\nexport type ColorSwatch = string | { color: string; label: string }\n\ninterface ColorPickerProps {\n  /**\n   * How the value is written: `#rrggbb`, `rgb()`, `hsl()` or `oklch()`. The text field accepts\n   * all four whatever this says.\n   */\n  format?: ColorFormat\n  /** Offers an opacity track, and writes the alpha into the value when it is below 1. */\n  alpha?: boolean\n  /** Preset colours, offered as a row of swatches under the picker. */\n  swatches?: ColorSwatch[]\n  /**\n   * Hides the text field and its format menu. VColorInput does, its own field playing that\n   * part.\n   */\n  hideInput?: boolean\n  /**\n   * Hides the eyedropper button, shown otherwise wherever the browser offers the `EyeDropper`\n   * API.\n   */\n  hideEyeDropper?: boolean\n  /** Makes the picker unusable. */\n  disabled?: boolean\n  /**\n   * Shows the colour without letting it be changed. The controls stay focusable and announce\n   * their values, which separates it from `disabled`, and the value is still submitted.\n   */\n  readonly?: boolean\n  /** What the picker is called. It falls back to the design system dictionary. */\n  label?: string\n  /** The name the value is sent under in a form. */\n  name?: string\n}\n\nconst props = withDefaults(defineProps<ColorPickerProps>(), {\n  format: 'hex',\n  alpha: false,\n  swatches: undefined,\n  hideInput: false,\n  hideEyeDropper: false,\n  disabled: false,\n  readonly: false,\n  label: undefined,\n  name: undefined,\n})\n\n/** The colour, written in `format`, or `null` when none has been chosen. */\nconst model = defineModel<string | null>({ default: null })\n\nconst m = useMessages()\nconst locale = useLocale()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.colorPicker.label)\n\n/** What the picker shows. With no colour yet, it rests on black, which writes nothing. */\nconst hsva = ref<Hsva>({ h: 0, s: 0, v: 0, a: 1 })\nconst rgba = computed(() => hsvToRgb(hsva.value))\n\n// @core\n// The value last written, so that its echo through the model is not parsed back: hex rounds the\n// channels, and a grey has no hue, so reading it back would move the thumbs under the pointer.\nlet written: string | null = null\n\nwatch(\n  model,\n  (value) => {\n    if (value === written) return\n    const parsed = parseColor(value)\n    if (parsed) hsva.value = rgbToHsv(props.alpha ? parsed : { ...parsed, a: 1 }, hsva.value.h)\n  },\n  { immediate: true },\n)\n\nfunction write(next: Hsva) {\n  hsva.value = next\n  written = formatColor(hsvToRgb(next), props.format, props.alpha)\n  model.value = written\n}\n\nfunction writeRgba(next: Rgba) {\n  write(rgbToHsv(props.alpha ? next : { ...next, a: 1 }, hsva.value.h))\n}\n\nconst percent = computed(() => new Intl.NumberFormat(locale.value, { style: 'percent' }))\nconst degrees = computed(\n  () =>\n    new Intl.NumberFormat(locale.value, { style: 'unit', unit: 'degree', unitDisplay: 'narrow' }),\n)\n\n/** Both axes in words: read on either of the area's inputs, whichever one has the focus. */\nconst areaValueText = computed(() =>\n  m.value.colorPicker.areaValue(\n    percent.value.format(Math.round(hsva.value.s * 100) / 100),\n    percent.value.format(Math.round(hsva.value.v * 100) / 100),\n  ),\n)\n\nconst areaEl = ref<HTMLElement | null>(null)\nconst saturationEl = ref<HTMLInputElement | null>(null)\n\nfunction moveTo(event: PointerEvent) {\n  const rect = areaEl.value!.getBoundingClientRect()\n  write({\n    ...hsva.value,\n    s: clamp((event.clientX - rect.left) / rect.width, 0, 1),\n    v: clamp(1 - (event.clientY - rect.top) / rect.height, 0, 1),\n  })\n}\n\n/** The pointer dragging the area's thumb, if one is. */\nlet dragging: number | null = null\n\nfunction onAreaPointerdown(event: PointerEvent) {\n  if (props.disabled || event.button !== 0) return\n  // The focus is moved by hand, without the scroll a default focus on mousedown could cause.\n  event.preventDefault()\n  saturationEl.value?.focus({ preventScroll: true })\n  if (props.readonly) return\n  dragging = event.pointerId\n  // @fallback\n  // Capture keeps the drag going outside the area; synthetic events may not reference a\n  // capturable pointer.\n  try {\n    areaEl.value!.setPointerCapture(event.pointerId)\n  } catch {\n    /* Synthetic pointers cannot be captured. */\n  }\n  moveTo(event)\n}\n\nfunction onAreaPointermove(event: PointerEvent) {\n  if (event.pointerId === dragging) moveTo(event)\n}\n\nfunction onAreaPointerup(event: PointerEvent) {\n  if (event.pointerId === dragging) dragging = null\n}\n\n// @keyboard\n/**\n * Both inputs of the area answer the same keys: the horizontal arrows and Home/End move the\n * saturation, the vertical arrows and PageUp/PageDown the brightness. Natively each input would\n * move its own axis on every arrow.\n */\nfunction onAreaKeydown(event: KeyboardEvent) {\n  if (props.readonly) return\n  const step = event.shiftKey ? 10 : 1\n  const moves: Record<string, [axis: 's' | 'v', delta: number]> = {\n    ArrowLeft: ['s', -step],\n    ArrowRight: ['s', step],\n    ArrowDown: ['v', -step],\n    ArrowUp: ['v', step],\n    PageDown: ['v', -10],\n    PageUp: ['v', 10],\n    Home: ['s', -100],\n    End: ['s', 100],\n  }\n  const move = moves[event.key]\n  if (!move) return\n  event.preventDefault()\n  const [axis, delta] = move\n  write({ ...hsva.value, [axis]: clamp((Math.round(hsva.value[axis] * 100) + delta) / 100, 0, 1) })\n}\n\n/** What a native range reports on its own: a drag on a track, or assistive technology. */\nfunction onRangeInput(channel: keyof Hsva, scale: number, event: Event) {\n  const el = event.target as HTMLInputElement\n  // @core\n  // A range has no native `readonly`: the move it has already made is put back.\n  if (props.readonly) {\n    el.value = String(Math.round(hsva.value[channel] * scale))\n    return\n  }\n  write({ ...hsva.value, [channel]: Number(el.value) / scale })\n}\n\n/** A read-only swatch refuses the click, which is what checks a radio, arrows included. */\nfunction onSwatchClick(event: MouseEvent) {\n  if (props.readonly) event.preventDefault()\n}\n\nconst shownFormat = ref<ColorFormat>(props.format)\nwatch(\n  () => props.format,\n  (format) => (shownFormat.value = format),\n)\n\nconst formatOptions = COLOR_FORMATS.map((format) => ({\n  value: format,\n  label: format.toUpperCase(),\n}))\n\n/** The text field's own copy, rewritten whenever the colour changes from elsewhere. */\nconst fieldText = ref('')\nwatch(\n  [rgba, shownFormat, () => props.alpha, () => model.value === null],\n  () => {\n    fieldText.value =\n      model.value === null ? '' : formatColor(rgba.value, shownFormat.value, props.alpha)\n  },\n  { immediate: true },\n)\n\n/** Takes what was typed, in any of the four formats, or puts the field back as it was. */\nfunction commitField() {\n  const text = fieldText.value.trim()\n  if (!text) {\n    written = null\n    model.value = null\n    return\n  }\n  const parsed = parseColor(text)\n  if (parsed) writeRgba(parsed)\n  else fieldText.value = formatColor(rgba.value, shownFormat.value, props.alpha)\n}\n\nfunction onFieldKeydown(event: KeyboardEvent) {\n  if (event.key !== 'Enter') return\n  event.preventDefault()\n  commitField()\n}\n\nconst items = computed(() =>\n  (props.swatches ?? []).map((swatch) => {\n    const color = typeof swatch === 'string' ? swatch : swatch.color\n    return {\n      color,\n      label: typeof swatch === 'string' ? swatch : swatch.label,\n      rgba: parseColor(color),\n    }\n  }),\n)\n\n// @core\n// The swatches are native radios, so the arrow keys move between them. Their name only groups\n// them: they are tied to a form that does not exist so that no enclosing form sends them, the\n// picker's value going through its own hidden input.\nconst swatchGroup = useId()\n\ninterface EyeDropperResult {\n  sRGBHex: string\n}\n\n/** The EyeDropper API, which TypeScript's DOM library does not describe yet. */\ntype EyeDropperConstructor = new () => { open: () => Promise<EyeDropperResult> }\n\n// @fallback\n// Detected once mounted, never on the server: the button simply does not exist elsewhere.\nconst eyeDropper = ref<EyeDropperConstructor | null>(null)\nonMounted(() => {\n  eyeDropper.value =\n    (window as unknown as { EyeDropper?: EyeDropperConstructor }).EyeDropper ?? null\n})\n\nasync function pickFromScreen() {\n  if (!eyeDropper.value) return\n  try {\n    const { sRGBHex } = await new eyeDropper.value().open()\n    const picked = parseColor(sRGBHex)\n    // The screen has no transparency: the opacity already chosen is kept.\n    if (picked) writeRgba({ ...picked, a: hsva.value.a })\n  } catch {\n    // Escape cancels the eyedropper by rejecting the promise: nothing to report.\n  }\n}\n\nconst opaque = computed(() => formatColor({ ...rgba.value, a: 1 }, 'rgb'))\n\nconst rootStyle = computed(() => ({\n  '--color-picker-hue': String(hsva.value.h),\n  '--color-picker-opaque': opaque.value,\n  '--color-picker-color': formatColor(rgba.value, 'rgb', props.alpha),\n  '--color-picker-s': String(hsva.value.s),\n  '--color-picker-v': String(hsva.value.v),\n}))\n\nconst rootEl = ref<HTMLElement | null>(null)\n\ndefineExpose({\n  /** Moves the focus to the saturation-brightness area. */\n  focus: (options?: FocusOptions) => saturationEl.value?.focus(options),\n  /** The root element. */\n  el: rootEl,\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-color-picker\"\n    role=\"group\"\n    :aria-label=\"ariaLabel\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n    :style=\"rootStyle\"\n  >\n    <div\n      ref=\"areaEl\"\n      class=\"v-color-picker-area\"\n      @pointerdown=\"onAreaPointerdown\"\n      @pointermove=\"onAreaPointermove\"\n      @pointerup=\"onAreaPointerup\"\n      @pointercancel=\"onAreaPointerup\"\n    >\n      <input\n        ref=\"saturationEl\"\n        type=\"range\"\n        class=\"v-hidden-input\"\n        min=\"0\"\n        max=\"100\"\n        :value=\"Math.round(hsva.s * 100)\"\n        :aria-label=\"m.colorPicker.saturation\"\n        :aria-valuetext=\"areaValueText\"\n        :aria-readonly=\"readonly || undefined\"\n        :disabled=\"disabled\"\n        @input=\"onRangeInput('s', 100, $event)\"\n        @keydown=\"onAreaKeydown\"\n      />\n      <!-- Out of the tab order: one stop for the area, whose arrows move both axes. -->\n      <input\n        type=\"range\"\n        class=\"v-hidden-input\"\n        tabindex=\"-1\"\n        min=\"0\"\n        max=\"100\"\n        :value=\"Math.round(hsva.v * 100)\"\n        :aria-label=\"m.colorPicker.brightness\"\n        :aria-valuetext=\"areaValueText\"\n        :aria-readonly=\"readonly || undefined\"\n        :disabled=\"disabled\"\n        @input=\"onRangeInput('v', 100, $event)\"\n        @keydown=\"onAreaKeydown\"\n      />\n      <span class=\"v-color-picker-thumb\" aria-hidden=\"true\" />\n    </div>\n\n    <div class=\"v-color-picker-controls\">\n      <VIconButton\n        v-if=\"eyeDropper && !hideEyeDropper\"\n        class=\"v-color-picker-eye-dropper\"\n        :icon=\"colorizeIcon\"\n        :label=\"m.colorPicker.eyeDropper\"\n        size=\"sm\"\n        :disabled=\"disabled || readonly\"\n        @click=\"pickFromScreen\"\n      />\n      <span class=\"v-color-picker-preview\" aria-hidden=\"true\" />\n      <div class=\"v-color-picker-tracks\">\n        <input\n          type=\"range\"\n          class=\"v-color-picker-track v-color-picker-hue\"\n          min=\"0\"\n          max=\"360\"\n          :value=\"Math.round(hsva.h)\"\n          :aria-label=\"m.colorPicker.hue\"\n          :aria-valuetext=\"degrees.format(Math.round(hsva.h))\"\n          :aria-readonly=\"readonly || undefined\"\n          :disabled=\"disabled\"\n          @input=\"onRangeInput('h', 1, $event)\"\n        />\n        <input\n          v-if=\"alpha\"\n          type=\"range\"\n          class=\"v-color-picker-track v-color-picker-alpha\"\n          min=\"0\"\n          max=\"100\"\n          :value=\"Math.round(hsva.a * 100)\"\n          :aria-label=\"m.colorPicker.alpha\"\n          :aria-valuetext=\"percent.format(Math.round(hsva.a * 100) / 100)\"\n          :aria-readonly=\"readonly || undefined\"\n          :disabled=\"disabled\"\n          @input=\"onRangeInput('a', 100, $event)\"\n        />\n      </div>\n    </div>\n\n    <div v-if=\"!hideInput\" class=\"v-color-picker-fields\">\n      <VSelect\n        :model-value=\"shownFormat\"\n        class=\"v-color-picker-format\"\n        :options=\"formatOptions\"\n        size=\"sm\"\n        :aria-label=\"m.colorPicker.format\"\n        :disabled=\"disabled\"\n        @update:model-value=\"shownFormat = $event as ColorFormat\"\n      />\n      <VInput\n        v-model=\"fieldText\"\n        class=\"v-color-picker-value\"\n        size=\"sm\"\n        :aria-label=\"m.colorPicker.value\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        :disabled=\"disabled\"\n        :readonly=\"readonly\"\n        @change=\"commitField\"\n        @keydown=\"onFieldKeydown\"\n      />\n    </div>\n\n    <fieldset\n      v-if=\"items.length\"\n      class=\"v-color-picker-swatches\"\n      :aria-label=\"m.colorPicker.swatches\"\n      :disabled=\"disabled\"\n    >\n      <label\n        v-for=\"item in items\"\n        :key=\"item.color\"\n        class=\"v-color-picker-swatch\"\n        :style=\"{ '--color-picker-swatch': item.color }\"\n      >\n        <input\n          type=\"radio\"\n          class=\"v-hidden-input\"\n          :name=\"swatchGroup\"\n          :form=\"`${swatchGroup}-none`\"\n          :value=\"item.color\"\n          :checked=\"model !== null && sameColor(item.rgba, rgba, alpha)\"\n          :aria-disabled=\"readonly || undefined\"\n          @click=\"onSwatchClick\"\n          @change=\"item.rgba && writeRgba(item.rgba)\"\n        />\n        <span class=\"v-color-picker-chip\" />\n        <span class=\"v-visually-hidden\">{{ item.label }}</span>\n      </label>\n    </fieldset>\n\n    <input v-if=\"name && model\" type=\"hidden\" :name=\"name\" :value=\"model\" />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-color-picker {\n    /*\n     * The checkerboard that shows through a translucent colour. It is drawn in the theme's own\n     * surface and border colours, so it reads as \"transparent\" in both themes.\n     */\n    --color-picker-checker: repeating-conic-gradient(\n        var(--vectis-color-border) 0 25%,\n        var(--vectis-color-surface) 0 50%\n      )\n      0 0 / var(--vectis-control-size-color-picker-checker)\n      var(--vectis-control-size-color-picker-checker);\n    --color-picker-thumb: var(--vectis-control-size-color-picker-thumb);\n\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--vectis-space-3);\n    inline-size: var(--vectis-control-size-color-picker-width);\n    max-inline-size: 100%;\n    padding: var(--vectis-space-3);\n    color: var(--vectis-color-text);\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * The colour content (area, tracks, preview, swatches) is the value itself, not the theme's\n   * paint: it is never mirrored in right-to-left text, and forced colours leave it untouched.\n   * Its gradients run between literal black and white, the ends of the colour model.\n   */\n\n  /*\n   * The edge of the preview and the swatches is a translucent border over the colour, which it\n   * shades rather than covers: an opaque grey ring left a pale fringe on the antialiased pixels.\n   * The colour runs under the border and the checkerboard stops inside it, so no square of the\n   * checkerboard shows through those pixels either.\n   */\n  .v-color-picker-area,\n  .v-color-picker-track,\n  .v-color-picker-preview,\n  .v-color-picker-chip {\n    direction: ltr;\n    forced-color-adjust: none;\n  }\n\n  .v-color-picker-area {\n    position: relative;\n    block-size: var(--vectis-control-size-color-picker-area);\n    border-radius: var(--vectis-radius-interactive);\n    background:\n      linear-gradient(to top, black, transparent), linear-gradient(to right, white, transparent),\n      hsl(var(--color-picker-hue) 100% 50%);\n    cursor: crosshair;\n    touch-action: none;\n  }\n\n  /*\n   * Every thumb carries a light ring and a dark one, whatever the theme: it sits on colours of\n   * any lightness, against which a single themed ring would vanish.\n   */\n  .v-color-picker-thumb {\n    position: absolute;\n    inset-inline-start: calc(var(--color-picker-s) * 100%);\n    inset-block-start: calc((1 - var(--color-picker-v)) * 100%);\n    inline-size: var(--color-picker-thumb);\n    block-size: var(--color-picker-thumb);\n    border: 2px solid white;\n    border-radius: var(--vectis-radius-pill);\n    background: var(--color-picker-opaque);\n    box-shadow:\n      0 0 0 1px rgb(0 0 0 / 0.4),\n      inset 0 0 0 1px rgb(0 0 0 / 0.4);\n    translate: -50% -50%;\n    pointer-events: none;\n  }\n\n  .v-color-picker-area:has(.v-hidden-input:focus-visible) .v-color-picker-thumb {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-color-picker-controls {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-2);\n  }\n\n  .v-color-picker-preview {\n    flex: none;\n    inline-size: var(--vectis-control-size-color-picker-preview);\n    block-size: var(--vectis-control-size-color-picker-preview);\n    border-radius: var(--vectis-radius-pill);\n    border: 1px solid var(--vectis-color-border-on-fill);\n    background:\n      linear-gradient(var(--color-picker-color), var(--color-picker-color)) border-box,\n      var(--color-picker-checker) padding-box;\n  }\n\n  .v-color-picker-tracks {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--vectis-space-3);\n    min-inline-size: 0;\n  }\n\n  .v-color-picker-track {\n    display: block;\n    inline-size: 100%;\n    block-size: var(--vectis-control-size-color-picker-track);\n    margin: 0;\n    border-radius: var(--vectis-radius-pill);\n    appearance: none;\n    cursor: pointer;\n  }\n\n  .v-color-picker-hue {\n    --color-picker-track-thumb: hsl(var(--color-picker-hue) 100% 50%);\n    background: linear-gradient(\n      to right,\n      hsl(0 100% 50%),\n      hsl(60 100% 50%),\n      hsl(120 100% 50%),\n      hsl(180 100% 50%),\n      hsl(240 100% 50%),\n      hsl(300 100% 50%),\n      hsl(360 100% 50%)\n    );\n  }\n\n  .v-color-picker-alpha {\n    --color-picker-track-thumb: var(--color-picker-color);\n    background:\n      linear-gradient(to right, transparent, var(--color-picker-opaque)),\n      var(--color-picker-checker);\n  }\n\n  /*\n   * The two vendor pseudo-elements stay in two separate rules: a selector list holding one a\n   * browser does not know is dropped whole.\n   */\n  .v-color-picker-track::-webkit-slider-thumb {\n    appearance: none;\n    inline-size: var(--color-picker-thumb);\n    block-size: var(--color-picker-thumb);\n    border: 2px solid white;\n    border-radius: var(--vectis-radius-pill);\n    background:\n      linear-gradient(var(--color-picker-track-thumb), var(--color-picker-track-thumb)),\n      var(--color-picker-checker);\n    box-shadow:\n      0 0 0 1px rgb(0 0 0 / 0.4),\n      inset 0 0 0 1px rgb(0 0 0 / 0.4);\n  }\n\n  .v-color-picker-track::-moz-range-thumb {\n    box-sizing: border-box;\n    inline-size: var(--color-picker-thumb);\n    block-size: var(--color-picker-thumb);\n    border: 2px solid white;\n    border-radius: var(--vectis-radius-pill);\n    background:\n      linear-gradient(var(--color-picker-track-thumb), var(--color-picker-track-thumb)),\n      var(--color-picker-checker);\n    box-shadow:\n      0 0 0 1px rgb(0 0 0 / 0.4),\n      inset 0 0 0 1px rgb(0 0 0 / 0.4);\n  }\n\n  .v-color-picker-track:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-color-picker-fields {\n    display: flex;\n    gap: var(--vectis-space-2);\n  }\n\n  /* Qualified to outweigh the full width VSelect takes by default. */\n  .v-color-picker-fields .v-color-picker-format {\n    flex: none;\n    inline-size: var(--vectis-control-size-color-picker-format);\n  }\n\n  .v-color-picker-value {\n    flex: 1;\n    min-inline-size: 0;\n  }\n\n  /*\n   * A colour is written left to right in every language: in right-to-left text the bidi\n   * algorithm would move the `#` of `#f59e0b` to the end. The field keeps its right alignment.\n   */\n  .v-color-picker-value .v-input-control {\n    direction: ltr;\n    font-variant-numeric: tabular-nums;\n  }\n\n  .v-color-picker-value .v-input-control:dir(rtl) {\n    text-align: right;\n  }\n\n  .v-color-picker-swatches {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--vectis-space-2);\n    min-inline-size: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n  .v-color-picker-swatch {\n    position: relative;\n    display: inline-flex;\n    cursor: pointer;\n  }\n\n  .v-color-picker-chip {\n    inline-size: var(--vectis-control-size-color-picker-swatch);\n    block-size: var(--vectis-control-size-color-picker-swatch);\n    border-radius: var(--vectis-radius-interactive);\n    border: 1px solid var(--vectis-color-border-on-fill);\n    background:\n      linear-gradient(var(--color-picker-swatch), var(--color-picker-swatch)) border-box,\n      var(--color-picker-checker) padding-box;\n  }\n\n  /* An outline rather than a shadow marks the chosen swatch: forced colours keep outlines. */\n  .v-color-picker-swatch .v-hidden-input:checked + .v-color-picker-chip {\n    outline: 2px solid var(--vectis-color-text);\n    outline-offset: 1px;\n  }\n\n  .v-color-picker-swatch .v-hidden-input:focus-visible + .v-color-picker-chip {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  /* Colour content is media, which may fade; the text controls take the disabled tokens. */\n  .v-color-picker[data-disabled]\n    :is(\n      .v-color-picker-area,\n      .v-color-picker-preview,\n      .v-color-picker-track,\n      .v-color-picker-chip\n    ) {\n    opacity: 0.5;\n  }\n\n  .v-color-picker[data-disabled]\n    :is(.v-color-picker-area, .v-color-picker-track, .v-color-picker-swatch) {\n    cursor: not-allowed;\n  }\n\n  /* A read-only picker is still read, so it keeps the ordinary cursor, as VTimePicker does. */\n  .v-color-picker[data-readonly]\n    :is(.v-color-picker-area, .v-color-picker-track, .v-color-picker-swatch) {\n    cursor: default;\n  }\n}\n</style>\n"],"mappings":""}