vectis-ui 0.1.0 → 0.8.0

package/dist/components/VIconButton/VIconButton.d.ts

@@ -1,5 +1,8 @@
 import { ButtonHTMLAttributes } from 'vue';
+import { ButtonSize, ButtonTone, ButtonVariant } from '../VButton/VButton.js';
 import { IconSource } from '../VIcon/types.js';
+/** The silhouette. The box is square either way; only the corners change. */
+export type IconButtonShape = 'square' | 'circular';
 interface IconButtonProps {
     /**
      * What the button does, in words. It becomes the `aria-label` and is the only
@@ -7,22 +10,35 @@ interface IconButtonProps {
      * month") rather than the picture.
      */
     label: string;
-    /** How much visual weight the button carries — the VButton variants. */
-    variant?: 'solid' | 'outline' | 'ghost' | 'soft';
-    /** What the action means, in colour — the VButton tones. */
-    tone?: 'accent' | 'neutral' | 'danger';
+    /**
+     * How much visual weight the button carries — the VButton variants. `ghost` by default,
+     * and inside a VButtonGroup the group's own variant wins over it.
+     */
+    variant?: ButtonVariant;
+    /**
+     * What the action means, in colour — the VButton tones. An icon-only button is usually
+     * secondary, which is why it starts neutral where VButton starts accent. Left out inside
+     * a VButtonGroup it takes the group's tone; on its own it is `neutral`.
+     */
+    tone?: ButtonTone;
     /** Raises the button with a shadow, and a raised surface on ghost and outline. */
     elevated?: boolean;
     /** The size of the square, taken from the scale shared by every control. */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    size?: ButtonSize;
     /** Takes 4px off both sides of the square, which stays square. */
     compact?: boolean;
     /**
      * The silhouette: a square carrying the corner radius every control shares, or a
      * circle. The box itself is square either way — only the corners change.
      */
-    shape?: 'square' | 'circular';
-    /** The native type of the button. */
+    shape?: IconButtonShape;
+    /**
+     * Turns the button into an `<a>` pointing at this address, on VButton's terms: a disabled
+     * or loading link becomes inert, the address dropped so it can be neither focused nor
+     * followed.
+     */
+    href?: string;
+    /** The native type of the button, `button` by default. Ignored once `href` makes it a link. */
     type?: ButtonHTMLAttributes['type'];
     /** Makes the button unusable, greyed out through the colour tokens. */
     disabled?: boolean;
@@ -45,15 +61,16 @@ type __VLS_Slots = {
 };
 declare const __VLS_base: import('vue').DefineComponent<IconButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<IconButtonProps> & Readonly<{}>, {
     loading: boolean;
-    size: "xs" | "sm" | "md" | "lg" | "xl";
+    size: ButtonSize;
     type: "button" | "submit" | "reset";
-    variant: "solid" | "outline" | "ghost" | "soft";
-    tone: "accent" | "neutral" | "danger";
+    variant: ButtonVariant;
+    tone: ButtonTone;
     elevated: boolean;
     compact: boolean;
+    href: string;
     disabled: boolean;
     iconFilled: boolean;
-    shape: "square" | "circular";
+    shape: IconButtonShape;
     icon: IconSource;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/VIconButton/VIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"VIconButton.js","names":[],"sources":["../../../src/components/VIconButton/VIconButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y — the MANDATORY label is the component's whole reason to exist alongside\n// VButton: an icon on its own gives assistive technology no accessible name.\n/**\n * A button showing an icon and nothing else, square rather than oblong. It offers\n * the same appearance options as VButton and forwards them to it.\n *\n * The one difference that matters is the `label` prop, which is REQUIRED here. A\n * picture says nothing to a screen reader, so the label is what names the action —\n * without it the button would be announced as just \"button\".\n */\nimport type { ButtonHTMLAttributes } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\ninterface IconButtonProps {\n  /**\n   * What the button does, in words. It becomes the `aria-label` and is the only\n   * thing a screen reader has to go on, so it names the action (\"Close\", \"Next\n   * month\") rather than the picture.\n   */\n  label: string\n  /** How much visual weight the button carries — the VButton variants. */\n  variant?: 'solid' | 'outline' | 'ghost' | 'soft'\n  /** What the action means, in colour — the VButton tones. */\n  tone?: 'accent' | 'neutral' | 'danger'\n  /** Raises the button with a shadow, and a raised surface on ghost and outline. */\n  elevated?: boolean\n  /** The size of the square, taken from the scale shared by every control. */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  /** Takes 4px off both sides of the square, which stays square. */\n  compact?: boolean\n  /**\n   * The silhouette: a square carrying the corner radius every control shares, or a\n   * circle. The box itself is square either way — only the corners change.\n   */\n  shape?: 'square' | 'circular'\n  /** The native type of the button. */\n  type?: ButtonHTMLAttributes['type']\n  /** Makes the button unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /** Replaces the icon with a spinner and disables the button while it turns. */\n  loading?: boolean\n  /**\n   * The icon to show: an icon name, or an explicit render. The default slot is the\n   * way to supply one this prop cannot express.\n   */\n  icon?: IconSource\n  /** Renders the icon in its filled form (the font's `FILL` axis). */\n  iconFilled?: boolean\n}\n\nwithDefaults(defineProps<IconButtonProps>(), {\n  variant: 'ghost',\n  tone: 'neutral',\n  elevated: false,\n  size: 'md',\n  compact: false,\n  shape: 'square',\n  type: 'button',\n  disabled: false,\n  loading: false,\n  icon: undefined,\n  iconFilled: false,\n})\n\ndefineSlots<{\n  /**\n   * The icon, when the `icon` prop cannot express it: a VIcon, or an inline SVG\n   * marked `aria-hidden=\"true\"` — the button is already named by its `label`.\n   */\n  default(): unknown\n}>()\n</script>\n\n<template>\n  <!--\n    `shape` is ours alone: VButton knows nothing about it, so the attribute travels\n    through its $attrs down to the element it renders — the same route the\n    v-icon-button class takes. Everything else is a real VButton prop and has to be\n    forwarded by hand, an unforwarded one never reaching its data attribute.\n  -->\n  <VButton\n    class=\"v-icon-button\"\n    :data-shape=\"shape\"\n    :variant=\"variant\"\n    :tone=\"tone\"\n    :elevated=\"elevated\"\n    :size=\"size\"\n    :compact=\"compact\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :loading=\"loading\"\n    :aria-label=\"label\"\n  >\n    <VIcon v-if=\"icon\" v-bind=\"iconProps(icon)\" :filled=\"iconFilled\" />\n    <slot v-else />\n  </VButton>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * Qualifying the selector with [data-size] is what makes this rule beat VButton's\n   * padding whatever order the two sheets end up in — this component renders a\n   * VButton, so both sets of rules apply to the very same element.\n   *\n   * The width reads --control-height, which the shared v-control class sets on that\n   * element for the current size and density. One rule therefore covers the whole\n   * scale, compact included, instead of a table repeating each value.\n   */\n  .v-icon-button[data-size] {\n    width: var(--control-height);\n    padding-inline: 0;\n  }\n\n  /*\n   * Same qualification, same reason: [data-shape] takes the selector to (0,2,0), which\n   * beats the border-radius VButton sets on that very element at (0,1,0) whatever the\n   * consumer's bundler decides about the order of the two sheets.\n   *\n   * The `square` value writes nothing — it IS the radius VButton already applies, so a\n   * consumer overriding --vectis-radius-interactive keeps a single place to change.\n   * The token here is the pill one, the convention for a shape table (VChip, the\n   * VSkeletonLoader shapes), --vectis-radius-full being reserved for the components\n   * that are round by nature.\n   */\n  .v-icon-button[data-shape='circular'] {\n    border-radius: var(--vectis-radius-pill);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VIconButton.js","names":[],"sources":["../../../src/components/VIconButton/VIconButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y — the MANDATORY label is the component's whole reason to exist alongside\n// VButton: an icon on its own gives assistive technology no accessible name.\n/**\n * A button showing an icon and nothing else, square rather than oblong. It offers\n * the same appearance options as VButton and forwards them to it.\n *\n * The one difference that matters is the `label` prop, which is REQUIRED here. A\n * picture says nothing to a screen reader, so the label is what names the action —\n * without it the button would be announced as just \"button\".\n */\nimport { computed, inject } from 'vue'\nimport type { ButtonHTMLAttributes } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport type { ButtonSize, ButtonTone, ButtonVariant } from '../VButton/VButton.vue'\nimport { buttonGroupKey } from '../VButton/context'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\n/** The silhouette. The box is square either way; only the corners change. */\nexport type IconButtonShape = 'square' | 'circular'\n\ninterface IconButtonProps {\n  /**\n   * What the button does, in words. It becomes the `aria-label` and is the only\n   * thing a screen reader has to go on, so it names the action (\"Close\", \"Next\n   * month\") rather than the picture.\n   */\n  label: string\n  /**\n   * How much visual weight the button carries — the VButton variants. `ghost` by default,\n   * and inside a VButtonGroup the group's own variant wins over it.\n   */\n  variant?: ButtonVariant\n  /**\n   * What the action means, in colour — the VButton tones. An icon-only button is usually\n   * secondary, which is why it starts neutral where VButton starts accent. Left out inside\n   * a VButtonGroup it takes the group's tone; on its own it is `neutral`.\n   */\n  tone?: ButtonTone\n  /** Raises the button with a shadow, and a raised surface on ghost and outline. */\n  elevated?: boolean\n  /** The size of the square, taken from the scale shared by every control. */\n  size?: ButtonSize\n  /** Takes 4px off both sides of the square, which stays square. */\n  compact?: boolean\n  /**\n   * The silhouette: a square carrying the corner radius every control shares, or a\n   * circle. The box itself is square either way — only the corners change.\n   */\n  shape?: IconButtonShape\n  /**\n   * Turns the button into an `<a>` pointing at this address, on VButton's terms: a disabled\n   * or loading link becomes inert, the address dropped so it can be neither focused nor\n   * followed.\n   */\n  href?: string\n  /** The native type of the button, `button` by default. Ignored once `href` makes it a link. */\n  type?: ButtonHTMLAttributes['type']\n  /** Makes the button unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /** Replaces the icon with a spinner and disables the button while it turns. */\n  loading?: boolean\n  /**\n   * The icon to show: an icon name, or an explicit render. The default slot is the\n   * way to supply one this prop cannot express.\n   */\n  icon?: IconSource\n  /** Renders the icon in its filled form (the font's `FILL` axis). */\n  iconFilled?: boolean\n}\n\nconst props = withDefaults(defineProps<IconButtonProps>(), {\n  variant: 'ghost',\n  // No default, so that an absent tone stays distinguishable from an explicit one (see\n  // the resolution below and VButton's own `tone`).\n  tone: undefined,\n  elevated: false,\n  size: 'md',\n  compact: false,\n  shape: 'square',\n  href: undefined,\n  type: 'button',\n  disabled: false,\n  loading: false,\n  icon: undefined,\n  iconFilled: false,\n})\n\ndefineSlots<{\n  /**\n   * The icon, when the `icon` prop cannot express it: a VIcon, or an inline SVG\n   * marked `aria-hidden=\"true\"` — the button is already named by its `label`.\n   */\n  default(): unknown\n}>()\n\n/*\n * The ONE prop a VButtonGroup cannot arbitrate on its own. The four others are handed\n * to VButton as they are and the group wins there over whatever arrives, so nothing has\n * to be resolved here; the tone goes the other way, the button's own answer first, and\n * VButton would take `accent` as its last resort where an icon-only button takes\n * `neutral`. Resolving it here is what keeps that difference.\n */\nconst group = inject(buttonGroupKey, null)\nconst resolvedTone = computed<ButtonTone>(() => props.tone ?? group?.tone ?? 'neutral')\n</script>\n\n<template>\n  <!--\n    `shape` is ours alone: VButton knows nothing about it, so the attribute travels\n    through its $attrs down to the element it renders — the same route the\n    v-icon-button class and `data-icon-only` take, the latter picked up by VButton's own\n    square rule. Everything else is a real VButton prop and has to be forwarded by hand,\n    an unforwarded one never reaching its data attribute.\n  -->\n  <VButton\n    class=\"v-icon-button\"\n    :data-shape=\"shape\"\n    data-icon-only\n    :variant=\"variant\"\n    :tone=\"resolvedTone\"\n    :elevated=\"elevated\"\n    :size=\"size\"\n    :compact=\"compact\"\n    :href=\"href\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :loading=\"loading\"\n    :aria-label=\"label\"\n  >\n    <!--\n      TRAP — the icon goes in VButton's `start` slot and NOT in its default one. The\n      spinner replaces the start slot alone, the default slot being the label, which a\n      loading button keeps. Rendered in the default slot the icon would sit BESIDE the\n      spinner, both of them in a box only wide enough for one.\n    -->\n    <template #start>\n      <VIcon v-if=\"icon\" v-bind=\"iconProps(icon)\" :filled=\"iconFilled\" />\n      <slot v-else />\n    </template>\n  </VButton>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The square itself is VButton's `[data-icon-only]` rule, which this component opts\n   * into; what is left here is the silhouette. [data-shape] takes the selector to (0,2,0),\n   * which beats the border-radius VButton sets on that very element at (0,1,0) whatever the\n   * consumer's bundler decides about the order of the two sheets.\n   *\n   * The `square` value writes nothing — it IS the radius VButton already applies, so a\n   * consumer overriding --vectis-radius-interactive keeps a single place to change.\n   */\n  .v-icon-button[data-shape='circular'] {\n    border-radius: var(--vectis-radius-pill);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VIconButton/VIconButton.vue_vue_type_script_setup_true_lang.js

@@ -1,14 +1,15 @@
-import e from "../VIcon/VIcon.js";
-import { iconProps as t } from "../VIcon/iconProps.js";
-import n from "../VButton/VButton.js";
-import { createBlock as r, defineComponent as i, mergeProps as a, openBlock as o, renderSlot as s, unref as c, withCtx as l } from "vue";
+import { iconProps as e } from "../VIcon/iconProps.js";
+import t from "../VIcon/VIcon.js";
+import { buttonGroupKey as n } from "../VButton/context.js";
+import r from "../VButton/VButton.js";
+import { computed as i, createBlock as a, defineComponent as o, inject as s, mergeProps as c, openBlock as l, renderSlot as u, unref as d, withCtx as f } from "vue";
 //#region src/components/VIconButton/VIconButton.vue?vue&type=script&setup=true&lang.ts
-var u = /*@__PURE__*/ i({
+var p = /*@__PURE__*/ o({
 	__name: "VIconButton",
 	props: {
 		label: {},
 		variant: { default: "ghost" },
-		tone: { default: "neutral" },
+		tone: { default: void 0 },
 		elevated: {
 			type: Boolean,
 			default: !1
@@ -19,6 +20,7 @@ var u = /*@__PURE__*/ i({
 			default: !1
 		},
 		shape: { default: "square" },
+		href: { default: void 0 },
 		type: { default: "button" },
 		disabled: {
 			type: Boolean,
@@ -34,21 +36,24 @@ var u = /*@__PURE__*/ i({
 			default: !1
 		}
 	},
-	setup(i) {
-		return (u, d) => (o(), r(n, {
+	setup(o) {
+		let p = o, m = s(n, null), h = i(() => p.tone ?? m?.tone ?? "neutral");
+		return (n, i) => (l(), a(r, {
 			class: "v-icon-button",
-			"data-shape": i.shape,
-			variant: i.variant,
-			tone: i.tone,
-			elevated: i.elevated,
-			size: i.size,
-			compact: i.compact,
-			type: i.type,
-			disabled: i.disabled,
-			loading: i.loading,
-			"aria-label": i.label
+			"data-shape": o.shape,
+			"data-icon-only": "",
+			variant: o.variant,
+			tone: h.value,
+			elevated: o.elevated,
+			size: o.size,
+			compact: o.compact,
+			href: o.href,
+			type: o.type,
+			disabled: o.disabled,
+			loading: o.loading,
+			"aria-label": o.label
 		}, {
-			default: l(() => [i.icon ? (o(), r(e, a({ key: 0 }, c(t)(i.icon), { filled: i.iconFilled }), null, 16, ["filled"])) : s(u.$slots, "default", {}, void 0, void 0, 1)]),
+			start: f(() => [o.icon ? (l(), a(t, c({ key: 0 }, d(e)(o.icon), { filled: o.iconFilled }), null, 16, ["filled"])) : u(n.$slots, "default", {}, void 0, void 0, 1)]),
 			_: 3
 		}, 8, [
 			"data-shape",
@@ -57,6 +62,7 @@ var u = /*@__PURE__*/ i({
 			"elevated",
 			"size",
 			"compact",
+			"href",
 			"type",
 			"disabled",
 			"loading",
@@ -65,6 +71,6 @@ var u = /*@__PURE__*/ i({
 	}
 });
 //#endregion
-export { u as default };
+export { p as default };
 
 //# sourceMappingURL=VIconButton.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"VIconButton.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VIconButton/VIconButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y — the MANDATORY label is the component's whole reason to exist alongside\n// VButton: an icon on its own gives assistive technology no accessible name.\n/**\n * A button showing an icon and nothing else, square rather than oblong. It offers\n * the same appearance options as VButton and forwards them to it.\n *\n * The one difference that matters is the `label` prop, which is REQUIRED here. A\n * picture says nothing to a screen reader, so the label is what names the action —\n * without it the button would be announced as just \"button\".\n */\nimport type { ButtonHTMLAttributes } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\ninterface IconButtonProps {\n  /**\n   * What the button does, in words. It becomes the `aria-label` and is the only\n   * thing a screen reader has to go on, so it names the action (\"Close\", \"Next\n   * month\") rather than the picture.\n   */\n  label: string\n  /** How much visual weight the button carries — the VButton variants. */\n  variant?: 'solid' | 'outline' | 'ghost' | 'soft'\n  /** What the action means, in colour — the VButton tones. */\n  tone?: 'accent' | 'neutral' | 'danger'\n  /** Raises the button with a shadow, and a raised surface on ghost and outline. */\n  elevated?: boolean\n  /** The size of the square, taken from the scale shared by every control. */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  /** Takes 4px off both sides of the square, which stays square. */\n  compact?: boolean\n  /**\n   * The silhouette: a square carrying the corner radius every control shares, or a\n   * circle. The box itself is square either way — only the corners change.\n   */\n  shape?: 'square' | 'circular'\n  /** The native type of the button. */\n  type?: ButtonHTMLAttributes['type']\n  /** Makes the button unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /** Replaces the icon with a spinner and disables the button while it turns. */\n  loading?: boolean\n  /**\n   * The icon to show: an icon name, or an explicit render. The default slot is the\n   * way to supply one this prop cannot express.\n   */\n  icon?: IconSource\n  /** Renders the icon in its filled form (the font's `FILL` axis). */\n  iconFilled?: boolean\n}\n\nwithDefaults(defineProps<IconButtonProps>(), {\n  variant: 'ghost',\n  tone: 'neutral',\n  elevated: false,\n  size: 'md',\n  compact: false,\n  shape: 'square',\n  type: 'button',\n  disabled: false,\n  loading: false,\n  icon: undefined,\n  iconFilled: false,\n})\n\ndefineSlots<{\n  /**\n   * The icon, when the `icon` prop cannot express it: a VIcon, or an inline SVG\n   * marked `aria-hidden=\"true\"` — the button is already named by its `label`.\n   */\n  default(): unknown\n}>()\n</script>\n\n<template>\n  <!--\n    `shape` is ours alone: VButton knows nothing about it, so the attribute travels\n    through its $attrs down to the element it renders — the same route the\n    v-icon-button class takes. Everything else is a real VButton prop and has to be\n    forwarded by hand, an unforwarded one never reaching its data attribute.\n  -->\n  <VButton\n    class=\"v-icon-button\"\n    :data-shape=\"shape\"\n    :variant=\"variant\"\n    :tone=\"tone\"\n    :elevated=\"elevated\"\n    :size=\"size\"\n    :compact=\"compact\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :loading=\"loading\"\n    :aria-label=\"label\"\n  >\n    <VIcon v-if=\"icon\" v-bind=\"iconProps(icon)\" :filled=\"iconFilled\" />\n    <slot v-else />\n  </VButton>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * Qualifying the selector with [data-size] is what makes this rule beat VButton's\n   * padding whatever order the two sheets end up in — this component renders a\n   * VButton, so both sets of rules apply to the very same element.\n   *\n   * The width reads --control-height, which the shared v-control class sets on that\n   * element for the current size and density. One rule therefore covers the whole\n   * scale, compact included, instead of a table repeating each value.\n   */\n  .v-icon-button[data-size] {\n    width: var(--control-height);\n    padding-inline: 0;\n  }\n\n  /*\n   * Same qualification, same reason: [data-shape] takes the selector to (0,2,0), which\n   * beats the border-radius VButton sets on that very element at (0,1,0) whatever the\n   * consumer's bundler decides about the order of the two sheets.\n   *\n   * The `square` value writes nothing — it IS the radius VButton already applies, so a\n   * consumer overriding --vectis-radius-interactive keeps a single place to change.\n   * The token here is the pill one, the convention for a shape table (VChip, the\n   * VSkeletonLoader shapes), --vectis-radius-full being reserved for the components\n   * that are round by nature.\n   */\n  .v-icon-button[data-shape='circular'] {\n    border-radius: var(--vectis-radius-pill);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAqFE,EAeU,GAAA;GAdR,OAAM;GACL,cAAY,EAAA;GACZ,SAAS,EAAA;GACT,MAAM,EAAA;GACN,UAAU,EAAA;GACV,MAAM,EAAA;GACN,SAAS,EAAA;GACT,MAAM,EAAA;GACN,UAAU,EAAA;GACV,SAAS,EAAA;GACT,cAAY,EAAA;;oBAEsD,CAAtD,EAAA,QAAA,EAAA,GAAb,EAAmE,GAAnE,EAAmE,EAAA,KAAA,EAAA,GAAxC,EAAA,CAAA,CAAS,CAAC,EAAA,IAAI,GAAA,EAAI,QAAQ,EAAA,WAAU,CAAA,GAAA,MAAA,IAAA,CAAA,QAAA,CAAA,KAC/D,EAAe,EAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"VIconButton.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VIconButton/VIconButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y — the MANDATORY label is the component's whole reason to exist alongside\n// VButton: an icon on its own gives assistive technology no accessible name.\n/**\n * A button showing an icon and nothing else, square rather than oblong. It offers\n * the same appearance options as VButton and forwards them to it.\n *\n * The one difference that matters is the `label` prop, which is REQUIRED here. A\n * picture says nothing to a screen reader, so the label is what names the action —\n * without it the button would be announced as just \"button\".\n */\nimport { computed, inject } from 'vue'\nimport type { ButtonHTMLAttributes } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport type { ButtonSize, ButtonTone, ButtonVariant } from '../VButton/VButton.vue'\nimport { buttonGroupKey } from '../VButton/context'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\n/** The silhouette. The box is square either way; only the corners change. */\nexport type IconButtonShape = 'square' | 'circular'\n\ninterface IconButtonProps {\n  /**\n   * What the button does, in words. It becomes the `aria-label` and is the only\n   * thing a screen reader has to go on, so it names the action (\"Close\", \"Next\n   * month\") rather than the picture.\n   */\n  label: string\n  /**\n   * How much visual weight the button carries — the VButton variants. `ghost` by default,\n   * and inside a VButtonGroup the group's own variant wins over it.\n   */\n  variant?: ButtonVariant\n  /**\n   * What the action means, in colour — the VButton tones. An icon-only button is usually\n   * secondary, which is why it starts neutral where VButton starts accent. Left out inside\n   * a VButtonGroup it takes the group's tone; on its own it is `neutral`.\n   */\n  tone?: ButtonTone\n  /** Raises the button with a shadow, and a raised surface on ghost and outline. */\n  elevated?: boolean\n  /** The size of the square, taken from the scale shared by every control. */\n  size?: ButtonSize\n  /** Takes 4px off both sides of the square, which stays square. */\n  compact?: boolean\n  /**\n   * The silhouette: a square carrying the corner radius every control shares, or a\n   * circle. The box itself is square either way — only the corners change.\n   */\n  shape?: IconButtonShape\n  /**\n   * Turns the button into an `<a>` pointing at this address, on VButton's terms: a disabled\n   * or loading link becomes inert, the address dropped so it can be neither focused nor\n   * followed.\n   */\n  href?: string\n  /** The native type of the button, `button` by default. Ignored once `href` makes it a link. */\n  type?: ButtonHTMLAttributes['type']\n  /** Makes the button unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /** Replaces the icon with a spinner and disables the button while it turns. */\n  loading?: boolean\n  /**\n   * The icon to show: an icon name, or an explicit render. The default slot is the\n   * way to supply one this prop cannot express.\n   */\n  icon?: IconSource\n  /** Renders the icon in its filled form (the font's `FILL` axis). */\n  iconFilled?: boolean\n}\n\nconst props = withDefaults(defineProps<IconButtonProps>(), {\n  variant: 'ghost',\n  // No default, so that an absent tone stays distinguishable from an explicit one (see\n  // the resolution below and VButton's own `tone`).\n  tone: undefined,\n  elevated: false,\n  size: 'md',\n  compact: false,\n  shape: 'square',\n  href: undefined,\n  type: 'button',\n  disabled: false,\n  loading: false,\n  icon: undefined,\n  iconFilled: false,\n})\n\ndefineSlots<{\n  /**\n   * The icon, when the `icon` prop cannot express it: a VIcon, or an inline SVG\n   * marked `aria-hidden=\"true\"` — the button is already named by its `label`.\n   */\n  default(): unknown\n}>()\n\n/*\n * The ONE prop a VButtonGroup cannot arbitrate on its own. The four others are handed\n * to VButton as they are and the group wins there over whatever arrives, so nothing has\n * to be resolved here; the tone goes the other way, the button's own answer first, and\n * VButton would take `accent` as its last resort where an icon-only button takes\n * `neutral`. Resolving it here is what keeps that difference.\n */\nconst group = inject(buttonGroupKey, null)\nconst resolvedTone = computed<ButtonTone>(() => props.tone ?? group?.tone ?? 'neutral')\n</script>\n\n<template>\n  <!--\n    `shape` is ours alone: VButton knows nothing about it, so the attribute travels\n    through its $attrs down to the element it renders — the same route the\n    v-icon-button class and `data-icon-only` take, the latter picked up by VButton's own\n    square rule. Everything else is a real VButton prop and has to be forwarded by hand,\n    an unforwarded one never reaching its data attribute.\n  -->\n  <VButton\n    class=\"v-icon-button\"\n    :data-shape=\"shape\"\n    data-icon-only\n    :variant=\"variant\"\n    :tone=\"resolvedTone\"\n    :elevated=\"elevated\"\n    :size=\"size\"\n    :compact=\"compact\"\n    :href=\"href\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :loading=\"loading\"\n    :aria-label=\"label\"\n  >\n    <!--\n      TRAP — the icon goes in VButton's `start` slot and NOT in its default one. The\n      spinner replaces the start slot alone, the default slot being the label, which a\n      loading button keeps. Rendered in the default slot the icon would sit BESIDE the\n      spinner, both of them in a box only wide enough for one.\n    -->\n    <template #start>\n      <VIcon v-if=\"icon\" v-bind=\"iconProps(icon)\" :filled=\"iconFilled\" />\n      <slot v-else />\n    </template>\n  </VButton>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The square itself is VButton's `[data-icon-only]` rule, which this component opts\n   * into; what is left here is the silhouette. [data-shape] takes the selector to (0,2,0),\n   * which beats the border-radius VButton sets on that very element at (0,1,0) whatever the\n   * consumer's bundler decides about the order of the two sheets.\n   *\n   * The `square` value writes nothing — it IS the radius VButton already applies, so a\n   * consumer overriding --vectis-radius-interactive keeps a single place to change.\n   */\n  .v-icon-button[data-shape='circular'] {\n    border-radius: var(--vectis-radius-pill);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0EA,IAAM,IAAQ,GAgCR,IAAQ,EAAO,GAAgB,IAAI,GACnC,IAAe,QAA2B,EAAM,QAAQ,GAAO,QAAQ,SAAS;yBAWpF,EAyBU,GAAA;GAxBR,OAAM;GACL,cAAY,EAAA;GACb,kBAAA;GACC,SAAS,EAAA;GACT,MAAM,EAAA;GACN,UAAU,EAAA;GACV,MAAM,EAAA;GACN,SAAS,EAAA;GACT,MAAM,EAAA;GACN,MAAM,EAAA;GACN,UAAU,EAAA;GACV,SAAS,EAAA;GACT,cAAY,EAAA;;GAQF,OAAK,QAnBZ,CAoBW,EAAA,QAAA,EAAA,GAAb,EAAmE,GAAnE,EAAmE,EAAA,KAAA,EAAA,GAAxC,EAAA,CAAA,CAAS,CAAC,EAAA,IAAI,GAAA,EAAI,QAAQ,EAAA,WAAU,CAAA,GAAA,MAAA,IAAA,CAAA,QAAA,CAAA,KAC/D,EAAe,EAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,CAAA,CAAA"}

package/dist/components/VInput/VInput.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-input{gap:var(--vectis-space-1);width:100%;font-family:var(--vectis-text-family);flex-direction:column;display:flex}.v-input-field{--field-border-color:var(--vectis-color-border-strong);align-items:center;gap:var(--control-gap);height:var(--control-height);padding-inline:var(--control-padding-inline-field);background:var(--vectis-color-surface);color:var(--vectis-color-text);border:1px solid var(--field-border-color);border-radius:var(--vectis-radius-interactive);font-size:var(--control-font-size);transition:border-color var(--vectis-duration-fast) var(--vectis-ease-default), background-color var(--vectis-duration-fast) var(--vectis-ease-default), box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);display:flex}.v-input-control{min-width:0;height:100%;color:inherit;font:inherit;background:0 0;border:none;outline:none;flex:1;padding:0}.v-input-control::placeholder{color:var(--vectis-color-text-subtle)}.v-input-control::-webkit-search-cancel-button{appearance:none}.v-input-control::-webkit-search-decoration{appearance:none}.v-input-control::-webkit-search-results-button{appearance:none}.v-input-control::-webkit-search-results-decoration{appearance:none}.v-input-control::-webkit-inner-spin-button{appearance:none}.v-input-control::-webkit-outer-spin-button{appearance:none}.v-input-control[type=number]{appearance:textfield}.v-input-control::-ms-reveal{display:none}.v-input-control:-webkit-autofill{border-radius:var(--vectis-radius-interactive)}.v-input[data-readonly] .v-input-field{--field-border-color:var(--vectis-color-border);background:var(--vectis-color-surface-sunken)}.v-input-field:hover:not(:has(.v-input-control:focus)):not(:has(.v-input-control:disabled,.v-input-control:user-invalid,.v-input-control[aria-invalid=true])){--field-border-color:color-mix(in oklab, var(--vectis-color-border-strong), var(--vectis-color-text) 15%)}.v-input-field:has(.v-input-control:focus){--field-border-color:var(--vectis-color-accent);box-shadow:0 0 0 1px var(--field-border-color);outline:var(--vectis-focus-ring-width) solid transparent}:is(.v-input-field:has(.v-input-control:user-invalid),.v-input-field:has(.v-input-control[aria-invalid=true])){--field-border-color:var(--vectis-color-danger)}.v-input-counter{font-size:var(--vectis-text-caption-size);color:var(--vectis-color-text-muted);font-variant-numeric:tabular-nums;flex:none}.v-input-counter[data-over]{color:var(--vectis-color-danger-text)}.v-input-field>.v-icon{color:var(--vectis-color-text-muted)}.v-input-field>.v-spinner{font-size:var(--vectis-icon-size)}.v-input-action{width:var(--control-action-size);height:var(--control-action-size);margin-inline:calc((var(--vectis-icon-size) - var(--control-action-size)) / 2);color:var(--vectis-color-text-muted);border-radius:var(--vectis-radius-interactive);cursor:pointer;transition:color var(--vectis-duration-fast) var(--vectis-ease-default);background:0 0;border:none;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.v-input-action:hover:not(:disabled){color:var(--vectis-color-text)}.v-input-action:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:calc(var(--vectis-focus-ring-offset) * -1)}.v-input[data-disabled] .v-input-field{--field-border-color:var(--vectis-color-border);background:var(--vectis-color-surface-muted);color:var(--vectis-color-text-muted);cursor:not-allowed}.v-input[data-disabled] .v-input-label,.v-input[data-disabled] .v-input-hint,.v-input[data-disabled] .v-input-counter{color:var(--vectis-color-text-subtle)}.v-input[data-disabled] .v-input-action,.v-input[data-disabled] .v-input-field>.v-icon{color:inherit;cursor:not-allowed}.v-input-control:disabled{cursor:not-allowed}@media (prefers-reduced-motion:reduce){.v-input-field,.v-input-action{transition:none}}}
+@layer vectis.components{.v-input{gap:var(--vectis-space-1);width:100%;font-family:var(--vectis-text-family);flex-direction:column;display:flex}.v-input-field{--field-border-color:var(--vectis-color-border-strong);align-items:center;gap:var(--control-gap);height:var(--control-height);padding-inline:var(--control-padding-inline-field);background:var(--vectis-color-surface);color:var(--vectis-color-text);border:1px solid var(--field-border-color);border-radius:var(--vectis-radius-interactive);font-size:var(--control-font-size);transition:border-color var(--vectis-duration-fast) var(--vectis-ease-default), background-color var(--vectis-duration-fast) var(--vectis-ease-default), box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);display:flex}.v-input-control{min-width:0;height:100%;color:inherit;font:inherit;background:0 0;border:none;outline:none;flex:1;padding:0}.v-input-control::placeholder{color:var(--vectis-color-text-subtle)}.v-input-control::-webkit-search-cancel-button{appearance:none}.v-input-control::-webkit-search-decoration{appearance:none}.v-input-control::-webkit-search-results-button{appearance:none}.v-input-control::-webkit-search-results-decoration{appearance:none}.v-input-control::-webkit-inner-spin-button{appearance:none}.v-input-control::-webkit-outer-spin-button{appearance:none}.v-input-control[type=number]{appearance:textfield}.v-input-control::-ms-reveal{display:none}.v-input-control:-webkit-autofill{border-radius:var(--vectis-radius-interactive)}.v-input[data-readonly] .v-input-field{--field-border-color:var(--vectis-color-border);background:var(--vectis-color-surface-sunken)}.v-input-field:hover:not(:has(.v-input-control:focus)):not(:has(.v-input-control:disabled,.v-input-control:user-invalid,.v-input-control[aria-invalid=true])){--field-border-color:color-mix(in oklab, var(--vectis-color-border-strong), var(--vectis-color-text) 15%)}.v-input-field:has(.v-input-control:focus){--field-border-color:var(--vectis-color-accent);box-shadow:0 0 0 1px var(--field-border-color);outline:var(--vectis-focus-ring-width) solid transparent}:is(.v-input-field:has(.v-input-control:user-invalid),.v-input-field:has(.v-input-control[aria-invalid=true])){--field-border-color:var(--vectis-color-danger)}.v-input-counter{flex:none}.v-input-field>.v-icon{color:var(--vectis-color-text-muted)}.v-input-field>.v-spinner{font-size:var(--vectis-icon-size)}.v-input[data-disabled] .v-input-field{--field-border-color:var(--vectis-color-border);background:var(--vectis-color-surface-muted);color:var(--vectis-color-text-muted);cursor:not-allowed}.v-input[data-disabled] .v-input-label,.v-input[data-disabled] .v-input-hint,.v-input[data-disabled] .v-input-counter{color:var(--vectis-color-text-subtle)}.v-input[data-disabled] .v-input-action,.v-input[data-disabled] .v-input-field>.v-icon{color:inherit;cursor:not-allowed}.v-input-control:disabled{cursor:not-allowed}.v-input-end-pinned .v-input-field{padding-inline-end:calc(var(--control-padding-inline-field) + var(--vectis-icon-size) + var(--control-gap));position:relative}.v-input-end-pinned .v-input-field:has(>.v-input-clear){padding-inline-end:calc(var(--control-padding-inline-field) + 2 * var(--vectis-icon-size) + 2 * var(--control-gap))}.v-input-end-pinned :is(.v-input-clear,.v-input-icon-end){inset-inline-end:var(--control-padding-inline-field);position:absolute;top:50%;translate:0 -50%}.v-input-end-pinned .v-input-clear{inset-inline-end:calc(var(--control-padding-inline-field) + var(--vectis-icon-size) + var(--control-gap))}.v-input-chips .v-input-field{height:auto;min-height:var(--control-height);padding-block:var(--vectis-space-1);flex-wrap:wrap}.v-input-chips .v-input-control{height:var(--chip-height)}@media (prefers-reduced-motion:reduce){.v-input-field{transition:none}}}

package/dist/components/VInput/VInput.d.ts

@@ -1,14 +1,18 @@
 import { IconSource } from '../VIcon/types.js';
+/** The height of the field: 32, 40 or 48 pixels. */
+export type InputSize = 'sm' | 'md' | 'lg';
+/** The native type of the input, which also decides the keyboard a phone offers. */
+export type InputType = 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url';
 interface InputProps {
     /** The height of the field: 32, 40 or 48 pixels. */
-    size?: 'sm' | 'md' | 'lg';
+    size?: InputSize;
     /** Takes 4px off the height, leaving the padding, the text and the icons as they are. */
     compact?: boolean;
     /**
      * The native type of the input, which is also what tells a phone which keyboard to
      * offer — a numeric pad for `number`, an @ key for `email`.
      */
-    type?: 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url';
+    type?: InputType;
     /**
      * Marks the field as invalid whatever the browser thinks. This is the route for a
      * rule only the server can check; anything the browser can validate on its own
@@ -33,7 +37,8 @@ interface InputProps {
     /**
      * An icon inside the field, at the start. It is decorative by default and becomes
      * a real button as soon as a `@click:icon-start` listener is attached — in which
-     * case it needs `iconStartLabel`. The `#start` slot replaces it.
+     * case it needs `iconStartLabel`. The `#start` slot is rendered after it, so a
+     * field composed on top of this one can show both.
      */
     iconStart?: IconSource;
     /**
@@ -88,8 +93,19 @@ interface InputProps {
 }
 type __VLS_Props = InputProps;
 type __VLS_Slots = {
-    /** Content at the start of the field, which replaces `iconStart`. */
+    /**
+     * Content at the start of the field, rendered after `iconStart` rather than in its
+     * place — which is what lets a field composed on top of this one put the chips
+     * standing for its values here beside an icon it still wants drawn.
+     */
     start?(): unknown;
+    /**
+     * Controls of your own inside the field, placed before the field's own — the clear
+     * cross and the end icon. It is the slot for something that acts on the VALUE, such
+     * as the AM/PM button of a 12-hour time field, which belongs beside the text rather
+     * than past the controls that clear and open.
+     */
+    'value-end'?(): unknown;
     /**
      * Content at the end of the field, which replaces `iconEnd`. It is hidden while
      * the field is loading, the spinner taking that place.
@@ -107,8 +123,11 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    /** Moves the focus to the real input. */
     focus: (options?: FocusOptions) => void | undefined;
+    /** Selects everything in the field, as VCombobox does when it reopens its panel. */
     select: () => void | undefined;
+    /** The real `<input>`, for what neither of the two above covers. */
     el: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     clear: () => any;
@@ -123,15 +142,15 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
 }>, {
     loading: boolean;
     label: string;
-    size: "sm" | "md" | "lg";
-    type: "text" | "email" | "number" | "password" | "search" | "tel" | "url";
+    size: InputSize;
+    type: InputType;
     compact: boolean;
     disabled: boolean;
     iconStart: IconSource;
     iconEnd: IconSource;
     invalid: boolean;
-    readonly: boolean;
     hint: string;
+    readonly: boolean;
     iconStartLabel: string;
     iconEndLabel: string;
     loadingLabel: string;

package/dist/components/VInput/VInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"VInput.js","names":[],"sources":["../../../src/components/VInput/VInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * A complete text field: a label above, a hint below, icons inside — clickable ones\n * included — a character counter, a clear button and a loading state, all arranged\n * around a real `<input>`.\n *\n * The component is a wrapper around that input, so the attributes it is given are\n * split: `class` and `style` stay on the outer element, where a consumer expects to\n * style the field, and everything else is forwarded to the input, where `name`,\n * `required` and the aria-* actually do something.\n *\n * Validation stays the browser's. The field turns red through `:user-invalid`, which\n * only reacts once the reader has left it, and even the soft limit is reported by\n * marking the input invalid rather than by emitting an event of our own — so a\n * consumer's `<form>` sees exactly what it would see with a bare input.\n *\n * The behavioural JavaScript is limited to the v-model and to the clear button,\n * which has to move focus back to the field: it disappears the moment it is clicked,\n * and focus would otherwise fall back to the page.\n */\nimport { computed, ref } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconName, iconProps } from '../VIcon/iconProps'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport type { IconSource } from '../VIcon/types'\nimport VSpinner from '../VSpinner/VSpinner.vue'\nimport VTypography from '../VTypography/VTypography.vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\nimport { useIconClickHandlers } from '../../composables/useIconClickHandlers'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useTextLimit } from '../../composables/useTextLimit'\nimport { useMessages } from '../../i18n/state'\n\ninterface InputProps {\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: 'sm' | 'md' | 'lg'\n  /** Takes 4px off the height, leaving the padding, the text and the icons as they are. */\n  compact?: boolean\n  /**\n   * The native type of the input, which is also what tells a phone which keyboard to\n   * offer — a numeric pad for `number`, an @ key for `email`.\n   */\n  type?: 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url'\n  /**\n   * Marks the field as invalid whatever the browser thinks. This is the route for a\n   * rule only the server can check; anything the browser can validate on its own\n   * already colours the field without this prop.\n   */\n  invalid?: boolean\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the value without allowing it to be changed. The field can still be\n   * focused and copied from, and it hides the clear button — unless `clearVisible`\n   * answers that question explicitly.\n   */\n  readonly?: boolean\n  /** The label above the field, tied to it so that clicking it focuses the field. */\n  label?: string\n  /**\n   * A line of help under the field. It is tied to the input for assistive\n   * technology, so it is read out along with the label.\n   */\n  hint?: string\n  /**\n   * An icon inside the field, at the start. It is decorative by default and becomes\n   * a real button as soon as a `@click:icon-start` listener is attached — in which\n   * case it needs `iconStartLabel`. The `#start` slot replaces it.\n   */\n  iconStart?: IconSource\n  /**\n   * The same at the end of the field. The `#end` slot replaces it, and the loading\n   * spinner takes its place while it turns.\n   */\n  iconEnd?: IconSource\n  /** What the start icon does, in words, once it is clickable. */\n  iconStartLabel?: string\n  /** What the end icon does, in words, once it is clickable. */\n  iconEndLabel?: string\n  /** Shows a spinner at the end of the field, in place of the end icon or slot. */\n  loading?: boolean\n  /**\n   * What screen readers announce while the spinner turns. It falls back to the\n   * design system dictionary.\n   */\n  loadingLabel?: string\n  /**\n   * Offers a cross that empties the field. It appears when there is something to\n   * clear and the field can be edited.\n   */\n  clearable?: boolean\n  /**\n   * Decides whether the cross is shown, instead of letting the field work it out\n   * from its own content — a read-only field included.\n   *\n   * It exists for the components built on top of this one, where what there is to\n   * clear is not the text: VCombobox holds its selection as chips beside the field,\n   * and a read-only date or time picker changes its value through a panel rather\n   * than by typing.\n   */\n  clearVisible?: boolean\n  /** What the clear button does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /**\n   * The maximum number of characters. By default this is the browser's own limit,\n   * which simply refuses anything beyond it.\n   */\n  maxlength?: number\n  /**\n   * Turns that limit into a soft one: the reader may type past it, and the field\n   * goes into error instead of silently refusing the keystrokes. It is reported\n   * through the native validity, so a form cannot be submitted over the limit.\n   */\n  softLimit?: boolean\n  /**\n   * Shows how much has been typed, at the end of the field: \"12/80\" against a limit,\n   * or just \"12\" without one.\n   */\n  counter?: boolean\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<InputProps>(), {\n  size: 'md',\n  compact: false,\n  type: 'text',\n  invalid: false,\n  disabled: false,\n  readonly: false,\n  label: undefined,\n  hint: undefined,\n  iconStart: undefined,\n  iconEnd: undefined,\n  iconStartLabel: undefined,\n  iconEndLabel: undefined,\n  loading: false,\n  loadingLabel: undefined,\n  clearable: false,\n  clearVisible: undefined,\n  clearLabel: undefined,\n  maxlength: undefined,\n  softLimit: false,\n  counter: false,\n})\n\nconst emit = defineEmits<{\n  /** The start icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-start': [event: MouseEvent]\n  /** The end icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-end': [event: MouseEvent]\n  /** The clear button was pressed. The field has already been emptied. */\n  clear: []\n}>()\n\ndefineSlots<{\n  /** Content at the start of the field, which replaces `iconStart`. */\n  start?(): unknown\n  /**\n   * Content at the end of the field, which replaces `iconEnd`. It is hidden while\n   * the field is loading, the spinner taking that place.\n   */\n  end?(): unknown\n}>()\n\n/**\n * The value, typed as text OR a number rather than text alone. On an\n * `<input type=\"number\">` Vue converts the value to a number by itself, so a\n * string-only model would hand a number back to a consumer who passed a string in,\n * and Vue would report an invalid prop.\n */\nconst model = defineModel<string | number>({ default: '' })\n\n/**\n * The value seen as text. Every measurement of its length — the counter, the soft\n * limit, whether the clear cross has anything to clear — goes through this, since a\n * number has no length of its own.\n */\nconst modelText = computed(() => String(model.value ?? ''))\n\nconst { attrs, rootClass, rootStyle, forwardedAttrs: restAttrs } = useRootAttrs()\n\n// The prop keeps priority; what it falls back to is the dictionary, so the default\n// wording follows the language the design system is set to.\nconst m = useMessages()\nconst resolvedLoadingLabel = computed(() => props.loadingLabel ?? m.value.common.loading)\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.common.clear)\n\nconst { fieldId, hintId, describedBy } = useFieldIds(attrs, () => !!props.hint)\n\nconst { hasIconStartHandler, hasIconEndHandler } = useIconClickHandlers({\n  name: 'VInput',\n  iconStartLabel: props.iconStartLabel,\n  iconEndLabel: props.iconEndLabel,\n})\n\nconst controlEl = ref<HTMLInputElement | null>(null)\n\nconst showClear = computed(() => {\n  if (!props.clearable || props.disabled) return false\n  // When `clearVisible` is supplied it is the consumer's EXPLICIT answer to \"is\n  // there anything to clear?\", and it holds even on a read-only field: the value of\n  // a read-only date or time picker changes through its panel rather than by typing.\n  // Left out, the field answers for itself — it has text, and it can be edited.\n  return props.clearVisible ?? (!props.readonly && modelText.value.length > 0)\n})\n\n// @a11y @core — moving the focus back is the accessibility half of this handler.\n// The cross vanishes the instant it empties the field, so without that call focus\n// falls back to the page body and a keyboard user loses their place in the form.\nfunction onClear() {\n  model.value = ''\n  emit('clear')\n  controlEl.value?.focus()\n}\n\n// The counter and the soft limit both measure `modelText` rather than the model\n// itself, a number having no length.\nconst { counterText, over } = useTextLimit({\n  el: controlEl,\n  text: () => modelText.value,\n  maxlength: () => props.maxlength,\n  softLimit: () => props.softLimit,\n})\n\n// The real input is buried inside the wrapper, out of reach of whoever renders this\n// component. These three exposed members are how the components built on top of it\n// reach it — VCombobox refocuses the field and selects its text this way.\ndefineExpose({\n  focus: (options?: FocusOptions) => controlEl.value?.focus(options),\n  select: () => controlEl.value?.select(),\n  el: controlEl,\n})\n</script>\n\n<template>\n  <div\n    class=\"v-input v-control\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n  >\n    <VTypography v-if=\"label\" as=\"label\" variant=\"label\" class=\"v-input-label\" :for=\"fieldId\">\n      {{ label }}\n    </VTypography>\n\n    <div class=\"v-input-field\">\n      <slot name=\"start\">\n        <button\n          v-if=\"iconStart && hasIconStartHandler\"\n          type=\"button\"\n          class=\"v-input-action\"\n          :aria-label=\"iconStartLabel ?? iconName(iconStart)\"\n          :disabled=\"disabled\"\n          @click=\"emit('click:icon-start', $event)\"\n        >\n          <VIcon v-bind=\"iconProps(iconStart)\" />\n        </button>\n        <VIcon v-else-if=\"iconStart\" v-bind=\"iconProps(iconStart)\" />\n      </slot>\n\n      <input\n        v-bind=\"restAttrs\"\n        :id=\"fieldId\"\n        ref=\"controlEl\"\n        v-model=\"model\"\n        class=\"v-input-control\"\n        :type=\"type\"\n        :maxlength=\"softLimit ? undefined : maxlength\"\n        :disabled=\"disabled\"\n        :readonly=\"readonly || undefined\"\n        :aria-invalid=\"invalid || undefined\"\n        :aria-describedby=\"describedBy\"\n      />\n\n      <span v-if=\"counter\" class=\"v-input-counter\" :data-over=\"over ? '' : undefined\">\n        {{ counterText }}\n      </span>\n\n      <button\n        v-if=\"showClear\"\n        type=\"button\"\n        class=\"v-input-action v-input-clear\"\n        :aria-label=\"resolvedClearLabel\"\n        @click=\"onClear\"\n      >\n        <VIcon :name=\"closeIcon\" />\n      </button>\n\n      <VSpinner v-if=\"loading\" :label=\"resolvedLoadingLabel\" />\n      <slot v-else name=\"end\">\n        <button\n          v-if=\"iconEnd && hasIconEndHandler\"\n          type=\"button\"\n          class=\"v-input-action\"\n          :aria-label=\"iconEndLabel ?? iconName(iconEnd)\"\n          :disabled=\"disabled\"\n          @click=\"emit('click:icon-end', $event)\"\n        >\n          <VIcon v-bind=\"iconProps(iconEnd)\" />\n        </button>\n        <VIcon v-else-if=\"iconEnd\" v-bind=\"iconProps(iconEnd)\" />\n      </slot>\n    </div>\n\n    <VTypography v-if=\"hint\" :id=\"hintId\" variant=\"caption\" tone=\"muted\" class=\"v-input-hint\">\n      {{ hint }}\n    </VTypography>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-input {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  /* The label and the hint are rendered by VTypography, which carries their type. The\n     .v-input-label and .v-input-hint classes remain as hooks: a consumer overrides\n     through them, and the disabled state below reaches them that way. */\n\n  /* This is the box that carries the border, the background and the focus ring.\n     `--field-border-color` is the single source of truth for its colour, and the\n     hover, error and disabled states do nothing but redefine it.\n\n     Nothing here restates the size scale: the `--control-*` variables are inherited\n     from the v-control root (styles/control-size.css), the icon context included. */\n  .v-input-field {\n    --field-border-color: var(--vectis-color-border-strong);\n\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    height: var(--control-height);\n    padding-inline: var(--control-padding-inline-field);\n    background: var(--vectis-color-surface);\n    color: var(--vectis-color-text);\n    border: 1px solid var(--field-border-color);\n    border-radius: var(--vectis-radius-interactive);\n    font-size: var(--control-font-size);\n    transition:\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-input-control {\n    flex: 1;\n    min-width: 0;\n    height: 100%;\n    padding: 0;\n    border: none;\n    background: none;\n    color: inherit;\n    font: inherit;\n    outline: none; /* the focus ring is drawn by the field around it, not here */\n  }\n\n  .v-input-control::placeholder {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* The browsers' own in-field controls are removed, because the design system draws\n     its own: WebKit's search cross would sit beside the `clearable` one, the number\n     spinners and Edge's password-reveal eye would clash with the icons. */\n  .v-input-control::-webkit-search-cancel-button,\n  .v-input-control::-webkit-search-decoration,\n  .v-input-control::-webkit-search-results-button,\n  .v-input-control::-webkit-search-results-decoration,\n  .v-input-control::-webkit-inner-spin-button,\n  .v-input-control::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  .v-input-control[type='number'] {\n    appearance: textfield;\n  }\n\n  .v-input-control::-ms-reveal {\n    display: none;\n  }\n\n  /* The yellow autofill background is painted by the browser on the input itself,\n     inside our field. Its colour cannot be changed, but matching the field's radius\n     at least stops it from showing square corners inside a rounded box. */\n  .v-input-control:-webkit-autofill {\n    border-radius: var(--vectis-radius-interactive);\n  }\n\n  /* A read-only field sinks slightly into the page but keeps its text at full\n     strength — the value is there to be read — and still shows the accent focus ring.\n     The state is read from [data-readonly] and never from `:read-only`, which the\n     browser also matches on a disabled field.\n\n     TRAP — this block must stay FIRST in the sequence of states: read-only, then\n     hover, focus, invalid and disabled. Every one of these selectors weighs (0,3,0),\n     `:has()` taking the specificity of what it contains, so nothing but the source\n     order arbitrates between them. Moved further down, this rule would repaint the\n     error border and the accent focus ring grey, with no error anywhere. What\n     belongs to a read-only field is its BASE colour alone. */\n  .v-input[data-readonly] .v-input-field {\n    --field-border-color: var(--vectis-color-border);\n\n    background: var(--vectis-color-surface-sunken);\n  }\n\n  .v-input-field:hover:not(:has(.v-input-control:focus)):not(\n      :has(\n        .v-input-control:disabled,\n        .v-input-control:user-invalid,\n        .v-input-control[aria-invalid='true']\n      )\n    ) {\n    --field-border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  /* The focused field appears to have a two-pixel border: it is really its own 1px\n     border plus a 1px shadow of the same colour just outside it, which costs no\n     layout and therefore makes nothing jump.\n\n     The selector watches the CONTROL's focus and not `:focus-within`, so that when\n     one of the field's own buttons — the cross, a clickable icon — takes keyboard\n     focus, only that button's outline lights up: two indicators at once would be\n     unreadable. And it is `:focus` rather than `:focus-visible`, because a text field\n     shows its focus even when it was reached with the mouse.\n\n     The transparent outline is the safety net for Windows forced colours, which drop\n     box-shadows entirely; an outline survives and keeps the field marked. */\n  .v-input-field:has(.v-input-control:focus) {\n    --field-border-color: var(--vectis-color-accent);\n\n    box-shadow: 0 0 0 1px var(--field-border-color);\n    outline: var(--vectis-focus-ring-width) solid transparent;\n  }\n\n  /* The invalid state, from the browser's own verdict first and from the `invalid`\n     prop second. Only the colour variable is changed, which is why the border AND\n     the focus ring both turn red without either being restated. */\n  .v-input-field:has(.v-input-control:user-invalid),\n  .v-input-field:has(.v-input-control[aria-invalid='true']) {\n    --field-border-color: var(--vectis-color-danger);\n  }\n\n  /* The counter keeps its own local styling rather than going through VTypography:\n     figures of equal width, so the number does not shift as it counts, and a colour\n     that marks the overflow — neither of which is a typographic role. */\n  .v-input-counter {\n    flex: none;\n    font-size: var(--vectis-text-caption-size);\n    color: var(--vectis-color-text-muted);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .v-input-counter[data-over] {\n    color: var(--vectis-color-danger-text);\n  }\n\n  /* A decorative icon is drawn in a muted grey, so it stays quieter than the text\n     being typed beside it. */\n  .v-input-field > .v-icon {\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-input-field > .v-spinner {\n    font-size: var(--vectis-icon-size);\n  }\n\n  /* The field's own buttons — the clear cross, a clickable icon — go from muted grey\n     to full strength on hover, and take VButton's radius so their focus ring has the\n     same rounded corners as everything else.\n\n     The negative margin is DERIVED and never written as a number: it is exactly half\n     the difference between the icon and the wider box holding it. Subtracting it\n     cancels that inset, so the glyph lands precisely where a decorative icon would\n     have — against the field's padding, one --control-gap from its neighbour. */\n  .v-input-action {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--control-action-size);\n    height: var(--control-action-size);\n    margin-inline: calc((var(--vectis-icon-size) - var(--control-action-size)) / 2);\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: var(--vectis-color-text-muted);\n    border-radius: var(--vectis-radius-interactive);\n    cursor: pointer;\n    flex: none;\n    transition: color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-input-action:hover:not(:disabled) {\n    color: var(--vectis-color-text);\n  }\n\n  .v-input-action:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(var(--vectis-focus-ring-offset) * -1);\n  }\n\n  /* A disabled field greys out through the colour tokens, the same ones VCheckbox and\n     VRadio use, and never through opacity. It comes LAST in the sequence of states,\n     which at equal specificity is what makes it win over all of them, the error\n     included: a disabled field is not submitted, so it has nothing to report.\n\n     The text here is `text-muted` and not the `text-subtle` used by the label and the\n     hint below, because those sit on the page surface where this sits on\n     `surface-muted` — against which subtle falls to a 4.4:1 contrast. The control\n     itself is exempt from that rule, being natively disabled, but the icons the field\n     CONTAINS are not, and they inherit this colour. */\n  .v-input[data-disabled] .v-input-field {\n    --field-border-color: var(--vectis-color-border);\n\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-muted);\n    cursor: not-allowed;\n  }\n\n  .v-input[data-disabled] .v-input-label,\n  .v-input[data-disabled] .v-input-hint,\n  .v-input[data-disabled] .v-input-counter {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-input[data-disabled] .v-input-action,\n  .v-input[data-disabled] .v-input-field > .v-icon {\n    color: inherit;\n    cursor: not-allowed;\n  }\n\n  .v-input-control:disabled {\n    cursor: not-allowed;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-input-field,\n    .v-input-action {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VInput.js","names":[],"sources":["../../../src/components/VInput/VInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * A complete text field: label above, hint below, icons inside (clickable ones included), a\n * counter, a clear cross and a loading state, all arranged around a real `<input>`.\n *\n * Wrapper-root, so the attrs split: `class`/`style` stay on the root, where a consumer\n * expects to style the field, and everything else is forwarded to the input, where `name`,\n * `required` and the `aria-*` actually do something.\n *\n * Validation stays the browser's. The field turns red through `:user-invalid`, which only\n * reacts once the reader has left it, and even the soft limit is reported by\n * `setCustomValidity` rather than an event of our own — so a consumer's `<form>` sees\n * exactly what a bare input would give it.\n *\n * The behavioural JS is the v-model and the clear cross, which has to move focus back to the\n * field: it disappears the moment it is clicked, and focus would otherwise fall to the page.\n */\nimport { computed, inject, ref } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconName, iconProps } from '../VIcon/iconProps'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport type { IconSource } from '../VIcon/types'\nimport VSpinner from '../VSpinner/VSpinner.vue'\nimport VTypography from '../VTypography/VTypography.vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\nimport { useIconClickHandlers } from '../../composables/useIconClickHandlers'\nimport { useClearable } from '../../composables/useClearable'\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useTextLimit } from '../../composables/useTextLimit'\nimport { useMessages } from '../../i18n/state'\n\nimport { inputGroupKey } from './context'\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type InputSize = 'sm' | 'md' | 'lg'\n\n/** The native type of the input, which also decides the keyboard a phone offers. */\nexport type InputType = 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url'\n\ninterface InputProps {\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: InputSize\n  /** Takes 4px off the height, leaving the padding, the text and the icons as they are. */\n  compact?: boolean\n  /**\n   * The native type of the input, which is also what tells a phone which keyboard to\n   * offer — a numeric pad for `number`, an @ key for `email`.\n   */\n  type?: InputType\n  /**\n   * Marks the field as invalid whatever the browser thinks. This is the route for a\n   * rule only the server can check; anything the browser can validate on its own\n   * already colours the field without this prop.\n   */\n  invalid?: boolean\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the value without allowing it to be changed. The field can still be\n   * focused and copied from, and it hides the clear button — unless `clearVisible`\n   * answers that question explicitly.\n   */\n  readonly?: boolean\n  /** The label above the field, tied to it so that clicking it focuses the field. */\n  label?: string\n  /**\n   * A line of help under the field. It is tied to the input for assistive\n   * technology, so it is read out along with the label.\n   */\n  hint?: string\n  /**\n   * An icon inside the field, at the start. It is decorative by default and becomes\n   * a real button as soon as a `@click:icon-start` listener is attached — in which\n   * case it needs `iconStartLabel`. The `#start` slot is rendered after it, so a\n   * field composed on top of this one can show both.\n   */\n  iconStart?: IconSource\n  /**\n   * The same at the end of the field. The `#end` slot replaces it, and the loading\n   * spinner takes its place while it turns.\n   */\n  iconEnd?: IconSource\n  /** What the start icon does, in words, once it is clickable. */\n  iconStartLabel?: string\n  /** What the end icon does, in words, once it is clickable. */\n  iconEndLabel?: string\n  /** Shows a spinner at the end of the field, in place of the end icon or slot. */\n  loading?: boolean\n  /**\n   * What screen readers announce while the spinner turns. It falls back to the\n   * design system dictionary.\n   */\n  loadingLabel?: string\n  /**\n   * Offers a cross that empties the field. It appears when there is something to\n   * clear and the field can be edited.\n   */\n  clearable?: boolean\n  /**\n   * Decides whether the cross is shown, instead of letting the field work it out\n   * from its own content — a read-only field included.\n   *\n   * It exists for the components built on top of this one, where what there is to\n   * clear is not the text: VCombobox holds its selection as chips beside the field,\n   * and a read-only date or time picker changes its value through a panel rather\n   * than by typing.\n   */\n  clearVisible?: boolean\n  /** What the clear button does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /**\n   * The maximum number of characters. By default this is the browser's own limit,\n   * which simply refuses anything beyond it.\n   */\n  maxlength?: number\n  /**\n   * Turns that limit into a soft one: the reader may type past it, and the field\n   * goes into error instead of silently refusing the keystrokes. It is reported\n   * through the native validity, so a form cannot be submitted over the limit.\n   */\n  softLimit?: boolean\n  /**\n   * Shows how much has been typed, at the end of the field: \"12/80\" against a limit,\n   * or just \"12\" without one.\n   */\n  counter?: boolean\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<InputProps>(), {\n  size: 'md',\n  compact: false,\n  type: 'text',\n  invalid: false,\n  disabled: false,\n  readonly: false,\n  label: undefined,\n  hint: undefined,\n  iconStart: undefined,\n  iconEnd: undefined,\n  iconStartLabel: undefined,\n  iconEndLabel: undefined,\n  loading: false,\n  loadingLabel: undefined,\n  clearable: false,\n  clearVisible: undefined,\n  clearLabel: undefined,\n  maxlength: undefined,\n  softLimit: false,\n  counter: false,\n})\n\nconst emit = defineEmits<{\n  /** The start icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-start': [event: MouseEvent]\n  /** The end icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-end': [event: MouseEvent]\n  /** The clear button was pressed. The field has already been emptied. */\n  clear: []\n}>()\n\ndefineSlots<{\n  /**\n   * Content at the start of the field, rendered after `iconStart` rather than in its\n   * place — which is what lets a field composed on top of this one put the chips\n   * standing for its values here beside an icon it still wants drawn.\n   */\n  start?(): unknown\n  /**\n   * Controls of your own inside the field, placed before the field's own — the clear\n   * cross and the end icon. It is the slot for something that acts on the VALUE, such\n   * as the AM/PM button of a 12-hour time field, which belongs beside the text rather\n   * than past the controls that clear and open.\n   */\n  'value-end'?(): unknown\n  /**\n   * Content at the end of the field, which replaces `iconEnd`. It is hidden while\n   * the field is loading, the spinner taking that place.\n   */\n  end?(): unknown\n}>()\n\n/**\n * The value, typed as text OR a number rather than text alone. On an\n * `<input type=\"number\">` Vue converts the value to a number by itself, so a\n * string-only model would hand a number back to a consumer who passed a string in,\n * and Vue would report an invalid prop.\n */\nconst model = defineModel<string | number>({ default: '' })\n\n/**\n * The value seen as text. Every measurement of its length — the counter, the soft\n * limit, whether the clear cross has anything to clear — goes through this, since a\n * number has no length of its own.\n */\nconst modelText = computed(() => String(model.value ?? ''))\n\nconst { attrs, rootClass, rootStyle, forwardedAttrs: restAttrs } = useRootAttrs()\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: a segment of another height stops lining up with its\n// neighbours and the merged border no longer reads as a single box. `disabled` is the one\n// read as an OR, the two answers being cumulative (VInput/context.ts).\nconst group = inject(inputGroupKey, null)\nconst {\n  size: resolvedSize,\n  compact: resolvedCompact,\n  disabled: resolvedDisabled,\n} = useControlShape(props, group)\n\n// The prop keeps priority; what it falls back to is the dictionary, so the default\n// wording follows the language the design system is set to.\nconst m = useMessages()\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.common.clear)\n\nconst { fieldId, hintId, describedBy } = useFieldIds(attrs, () => !!props.hint)\n\nconst { hasIconStartHandler, hasIconEndHandler } = useIconClickHandlers({\n  name: 'VInput',\n  iconStartLabel: props.iconStartLabel,\n  iconEndLabel: props.iconEndLabel,\n})\n\nconst controlEl = ref<HTMLInputElement | null>(null)\n\nconst { showClear, onClear } = useClearable({\n  clearable: () => props.clearable,\n  clearVisible: () => props.clearVisible,\n  disabled: () => resolvedDisabled.value,\n  readonly: () => props.readonly,\n  text: () => modelText.value,\n  controlEl,\n  onCleared: () => {\n    model.value = ''\n    emit('clear')\n  },\n})\n\n// The counter and the soft limit both measure `modelText` rather than the model\n// itself, a number having no length.\nconst { counterText, over } = useTextLimit({\n  el: controlEl,\n  text: () => modelText.value,\n  maxlength: () => props.maxlength,\n  softLimit: () => props.softLimit,\n})\n\n// The real input sits inside the wrapper, out of reach of whoever renders this component.\n// These three are how the components built on it get there — VCombobox refocuses the field\n// and selects its text this way.\ndefineExpose({\n  /** Moves the focus to the real input. */\n  focus: (options?: FocusOptions) => controlEl.value?.focus(options),\n  /** Selects everything in the field, as VCombobox does when it reopens its panel. */\n  select: () => controlEl.value?.select(),\n  /** The real `<input>`, for what neither of the two above covers. */\n  el: controlEl,\n})\n</script>\n\n<template>\n  <div\n    class=\"v-input v-control\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-size=\"resolvedSize\"\n    :data-compact=\"resolvedCompact ? '' : undefined\"\n    :data-disabled=\"resolvedDisabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n  >\n    <VTypography v-if=\"label\" as=\"label\" variant=\"label\" class=\"v-input-label\" :for=\"fieldId\">\n      {{ label }}\n    </VTypography>\n\n    <div class=\"v-input-field\">\n      <!-- TRAP — the start icon is rendered BEFORE the slot, where the end icon is the\n           slot's own fallback. That asymmetry is what the composed fields need: VCombobox\n           and VFileInput fill `#start` with the chips standing for their values, which is\n           OTHER content in the same zone rather than another way of drawing the icon. As a\n           fallback the icon would vanish the moment a value was chosen — silently, and the\n           clickable variant with it. The end zone has no such consumer: what is put there\n           really does replace the icon. -->\n      <button\n        v-if=\"iconStart && hasIconStartHandler\"\n        type=\"button\"\n        class=\"v-input-action v-field-action v-input-icon-start\"\n        :aria-label=\"iconStartLabel ?? iconName(iconStart)\"\n        :disabled=\"resolvedDisabled\"\n        @click=\"emit('click:icon-start', $event)\"\n      >\n        <VIcon v-bind=\"iconProps(iconStart)\" />\n      </button>\n      <VIcon v-else-if=\"iconStart\" v-bind=\"iconProps(iconStart)\" class=\"v-input-icon-start\" />\n      <slot name=\"start\" />\n\n      <input\n        v-bind=\"restAttrs\"\n        :id=\"fieldId\"\n        ref=\"controlEl\"\n        v-model=\"model\"\n        class=\"v-input-control\"\n        :type=\"type\"\n        :maxlength=\"softLimit ? undefined : maxlength\"\n        :disabled=\"resolvedDisabled\"\n        :readonly=\"readonly || undefined\"\n        :aria-invalid=\"invalid || undefined\"\n        :aria-describedby=\"describedBy\"\n      />\n\n      <span\n        v-if=\"counter\"\n        class=\"v-input-counter v-field-counter\"\n        :data-over=\"over ? '' : undefined\"\n      >\n        {{ counterText }}\n      </span>\n\n      <!-- Before the clear cross rather than after it, so that a consumer's control reads\n           and tabs in the same order: what acts on the value sits next to the value, and\n           the field's own controls stay together at the end. -->\n      <slot name=\"value-end\" />\n\n      <button\n        v-if=\"showClear\"\n        type=\"button\"\n        class=\"v-input-action v-field-action v-input-clear\"\n        :aria-label=\"resolvedClearLabel\"\n        @click=\"onClear\"\n      >\n        <VIcon :name=\"closeIcon\" />\n      </button>\n\n      <VSpinner v-if=\"loading\" :label=\"loadingLabel\" />\n      <slot v-else name=\"end\">\n        <button\n          v-if=\"iconEnd && hasIconEndHandler\"\n          type=\"button\"\n          class=\"v-input-action v-field-action v-input-icon-end\"\n          :aria-label=\"iconEndLabel ?? iconName(iconEnd)\"\n          :disabled=\"resolvedDisabled\"\n          @click=\"emit('click:icon-end', $event)\"\n        >\n          <VIcon v-bind=\"iconProps(iconEnd)\" />\n        </button>\n        <VIcon v-else-if=\"iconEnd\" v-bind=\"iconProps(iconEnd)\" class=\"v-input-icon-end\" />\n      </slot>\n    </div>\n\n    <VTypography v-if=\"hint\" :id=\"hintId\" variant=\"caption\" tone=\"muted\" class=\"v-input-hint\">\n      {{ hint }}\n    </VTypography>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-input {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  /* The label and the hint are rendered by VTypography, which carries their type. The\n     .v-input-label and .v-input-hint classes remain as hooks: a consumer overrides\n     through them, and the disabled state below reaches them that way. */\n\n  /* This is the box that carries the border, the background and the focus ring.\n     `--field-border-color` is the single source of truth for its colour, and the\n     hover, error and disabled states do nothing but redefine it.\n\n     Nothing here restates the size scale: the `--control-*` variables are inherited\n     from the v-control root (styles/control-size.css), the icon context included. */\n  .v-input-field {\n    --field-border-color: var(--vectis-color-border-strong);\n\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    height: var(--control-height);\n    padding-inline: var(--control-padding-inline-field);\n    background: var(--vectis-color-surface);\n    color: var(--vectis-color-text);\n    border: 1px solid var(--field-border-color);\n    border-radius: var(--vectis-radius-interactive);\n    font-size: var(--control-font-size);\n    transition:\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-input-control {\n    flex: 1;\n    min-width: 0;\n    height: 100%;\n    padding: 0;\n    border: none;\n    background: none;\n    color: inherit;\n    font: inherit;\n    outline: none; /* the focus ring is drawn by the field around it, not here */\n  }\n\n  .v-input-control::placeholder {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* The browsers' own in-field controls are removed, because the design system draws\n     its own: WebKit's search cross would sit beside the `clearable` one, the number\n     spinners and Edge's password-reveal eye would clash with the icons. */\n  .v-input-control::-webkit-search-cancel-button,\n  .v-input-control::-webkit-search-decoration,\n  .v-input-control::-webkit-search-results-button,\n  .v-input-control::-webkit-search-results-decoration,\n  .v-input-control::-webkit-inner-spin-button,\n  .v-input-control::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  .v-input-control[type='number'] {\n    appearance: textfield;\n  }\n\n  .v-input-control::-ms-reveal {\n    display: none;\n  }\n\n  /* The yellow autofill background is painted by the browser on the input itself,\n     inside our field. Its colour cannot be changed, but matching the field's radius\n     at least stops it from showing square corners inside a rounded box. */\n  .v-input-control:-webkit-autofill {\n    border-radius: var(--vectis-radius-interactive);\n  }\n\n  /* A read-only field sinks slightly into the page but keeps its text at full\n     strength — the value is there to be read — and still shows the accent focus ring.\n     The state is read from [data-readonly] and never from `:read-only`, which the\n     browser also matches on a disabled field.\n\n     TRAP — this block must stay FIRST in the sequence of states: read-only, then\n     hover, focus, invalid and disabled. Every one of these selectors weighs (0,3,0),\n     `:has()` taking the specificity of what it contains, so nothing but the source\n     order arbitrates between them. Moved further down, this rule would repaint the\n     error border and the accent focus ring grey, with no error anywhere. What\n     belongs to a read-only field is its BASE colour alone. */\n  .v-input[data-readonly] .v-input-field {\n    --field-border-color: var(--vectis-color-border);\n\n    background: var(--vectis-color-surface-sunken);\n  }\n\n  .v-input-field:hover:not(:has(.v-input-control:focus)):not(\n      :has(\n        .v-input-control:disabled,\n        .v-input-control:user-invalid,\n        .v-input-control[aria-invalid='true']\n      )\n    ) {\n    --field-border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  /* The focused field appears to have a two-pixel border: it is really its own 1px\n     border plus a 1px shadow of the same colour just outside it, which costs no\n     layout and therefore makes nothing jump.\n\n     The selector watches the CONTROL's focus and not `:focus-within`, so that when\n     one of the field's own buttons — the cross, a clickable icon — takes keyboard\n     focus, only that button's outline lights up: two indicators at once would be\n     unreadable. And it is `:focus` rather than `:focus-visible`, because a text field\n     shows its focus even when it was reached with the mouse.\n\n     The transparent outline is the safety net for Windows forced colours, which drop\n     box-shadows entirely; an outline survives and keeps the field marked. */\n  .v-input-field:has(.v-input-control:focus) {\n    --field-border-color: var(--vectis-color-accent);\n\n    box-shadow: 0 0 0 1px var(--field-border-color);\n    outline: var(--vectis-focus-ring-width) solid transparent;\n  }\n\n  /* The invalid state, from the browser's own verdict first and from the `invalid`\n     prop second. Only the colour variable is changed, which is why the border AND\n     the focus ring both turn red without either being restated. */\n  .v-input-field:has(.v-input-control:user-invalid),\n  .v-input-field:has(.v-input-control[aria-invalid='true']) {\n    --field-border-color: var(--vectis-color-danger);\n  }\n\n  /* The counter's type and its overflow colour are `.v-field-counter`'s (styles/field.css),\n     shared with the counters VTextarea and VFileInput draw under their field. Inside the\n     box it must not shrink, or a long value would squeeze its figures. */\n  .v-input-counter {\n    flex: none;\n  }\n\n  /* A decorative icon is drawn in a muted grey, so it stays quieter than the text\n     being typed beside it. */\n  .v-input-field > .v-icon {\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-input-field > .v-spinner {\n    font-size: var(--vectis-icon-size);\n  }\n\n  /* A disabled field greys out through the colour tokens, the same ones VCheckbox and\n     VRadio use, and never through opacity. It comes LAST in the sequence of states,\n     which at equal specificity is what makes it win over all of them, the error\n     included: a disabled field is not submitted, so it has nothing to report.\n\n     The text here is `text-muted` and not the `text-subtle` used by the label and the\n     hint below, because those sit on the page surface where this sits on\n     `surface-muted` — against which subtle falls to a 4.4:1 contrast. The control\n     itself is exempt from that rule, being natively disabled, but the icons the field\n     CONTAINS are not, and they inherit this colour. */\n  .v-input[data-disabled] .v-input-field {\n    --field-border-color: var(--vectis-color-border);\n\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-muted);\n    cursor: not-allowed;\n  }\n\n  .v-input[data-disabled] .v-input-label,\n  .v-input[data-disabled] .v-input-hint,\n  .v-input[data-disabled] .v-input-counter {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-input[data-disabled] .v-input-action,\n  .v-input[data-disabled] .v-input-field > .v-icon {\n    color: inherit;\n    cursor: not-allowed;\n  }\n\n  .v-input-control:disabled {\n    cursor: not-allowed;\n  }\n\n  /* Two arrangements a field composed on top of this one opts into with a class on this\n     root: VCombobox and VFileInput, the two that put chips inside the field. They live in\n     THIS sheet because it is the one both are guaranteed to load, being built on VInput —\n     the core sheet would charge every consumer for them.\n\n     `.v-input-end-pinned` lifts the clear cross and whatever carries `.v-input-icon-end` —\n     the end icon, or a composed field's own chevron and spinner — out of the flow, so they\n     stay pinned to the end of the field and vertically centred whatever the chips do. The\n     room they occupy is then reserved with padding, or the text and the chips would run\n     underneath. That reservation is written as exactly what the flow would have produced\n     with them left in place — one glyph's width each from the field's padding, one gap\n     between two of them — and reads the same two variables as the insets below, so the room\n     reserved and the glyphs it protects cannot drift apart.\n\n     Whether the cross takes its room is read off the markup (`:has`): the cross is rendered\n     exactly when there is something to clear, so the padding cannot disagree with it.\n\n     The centring is a translation kept SEPARATE from `rotate`, which VCombobox's chevron\n     turns when its panel opens. */\n  .v-input-end-pinned .v-input-field {\n    position: relative;\n    padding-inline-end: calc(\n      var(--control-padding-inline-field) + var(--vectis-icon-size) + var(--control-gap)\n    );\n  }\n\n  .v-input-end-pinned .v-input-field:has(> .v-input-clear) {\n    padding-inline-end: calc(\n      var(--control-padding-inline-field) + 2 * var(--vectis-icon-size) + 2 * var(--control-gap)\n    );\n  }\n\n  .v-input-end-pinned :is(.v-input-clear, .v-input-icon-end) {\n    position: absolute;\n    inset-inline-end: var(--control-padding-inline-field);\n    top: 50%;\n    translate: 0 -50%;\n  }\n\n  /* TRAP — this inset reads in GLYPHS and not in buttons. The cross is one of the field's\n     buttons, whose negative margin — half the difference between icon and button — already\n     cancels its own overhang, so an inset lands on the glyph's edge. Measured in button\n     widths instead, it pushes the cross a whole gap too far, with nothing to signal it.\n     It overrides the rule above at the same weight, so it has to stay after it. */\n  .v-input-end-pinned .v-input-clear {\n    inset-inline-end: calc(\n      var(--control-padding-inline-field) + var(--vectis-icon-size) + var(--control-gap)\n    );\n  }\n\n  /* `.v-input-chips` lets the chips WRAP onto several rows, the field growing instead of\n     scrolling but never shrinking below an ordinary control.\n\n     The input is forced to the chips' height rather than the full height it inherits: its\n     natural height is greater than a chip's, and the field would grow the moment it was\n     focused. That height is `--chip-height`, written inline on the composed field's root\n     by the helper that also picks the chips' size (utils/chip.ts), so the two cannot drift.\n\n     TRAP — the control rule must stay at (0,2,0). VCombobox folds its search input away\n     with a (0,3,0) rule that zeroes this height, and at equal weight the winner would be\n     whichever of the two sheets a bundler put last. */\n  .v-input-chips .v-input-field {\n    flex-wrap: wrap;\n    height: auto;\n    min-height: var(--control-height);\n    padding-block: var(--vectis-space-1);\n  }\n\n  .v-input-chips .v-input-control {\n    height: var(--chip-height);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-input-field {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}