vectis-ui 0.1.0

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

@@ -0,0 +1,66 @@
+import { ButtonHTMLAttributes } from 'vue';
+import { IconSource } from '../VIcon/types.js';
+interface IconButtonProps {
+    /**
+     * What the button does, in words. It becomes the `aria-label` and is the only
+     * thing a screen reader has to go on, so it names the action ("Close", "Next
+     * 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';
+    /** 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';
+    /** 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. */
+    type?: ButtonHTMLAttributes['type'];
+    /** Makes the button unusable, greyed out through the colour tokens. */
+    disabled?: boolean;
+    /** Replaces the icon with a spinner and disables the button while it turns. */
+    loading?: boolean;
+    /**
+     * The icon to show: an icon name, or an explicit render. The default slot is the
+     * way to supply one this prop cannot express.
+     */
+    icon?: IconSource;
+    /** Renders the icon in its filled form (the font's `FILL` axis). */
+    iconFilled?: boolean;
+}
+type __VLS_Slots = {
+    /**
+     * The icon, when the `icon` prop cannot express it: a VIcon, or an inline SVG
+     * marked `aria-hidden="true"` — the button is already named by its `label`.
+     */
+    default(): unknown;
+};
+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";
+    type: "button" | "submit" | "reset";
+    variant: "solid" | "outline" | "ghost" | "soft";
+    tone: "accent" | "neutral" | "danger";
+    elevated: boolean;
+    compact: boolean;
+    disabled: boolean;
+    iconFilled: boolean;
+    shape: "square" | "circular";
+    icon: IconSource;
+}, {}, {}, {}, 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/VIconButton/VIconButton.js

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

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

@@ -0,0 +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":""}

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

@@ -0,0 +1,70 @@
+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";
+//#region src/components/VIconButton/VIconButton.vue?vue&type=script&setup=true&lang.ts
+var u = /*@__PURE__*/ i({
+	__name: "VIconButton",
+	props: {
+		label: {},
+		variant: { default: "ghost" },
+		tone: { default: "neutral" },
+		elevated: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "md" },
+		compact: {
+			type: Boolean,
+			default: !1
+		},
+		shape: { default: "square" },
+		type: { default: "button" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		icon: { default: void 0 },
+		iconFilled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(i) {
+		return (u, d) => (o(), r(n, {
+			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
+		}, {
+			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)]),
+			_: 3
+		}, 8, [
+			"data-shape",
+			"variant",
+			"tone",
+			"elevated",
+			"size",
+			"compact",
+			"type",
+			"disabled",
+			"loading",
+			"aria-label"
+		]));
+	}
+});
+//#endregion
+export { u 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

@@ -0,0 +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"}

package/dist/components/VInput/VInput.css

@@ -0,0 +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}}}

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

@@ -0,0 +1,152 @@
+import { IconSource } from '../VIcon/types.js';
+interface InputProps {
+    /** The height of the field: 32, 40 or 48 pixels. */
+    size?: 'sm' | 'md' | 'lg';
+    /** 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';
+    /**
+     * 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
+     * already colours the field without this prop.
+     */
+    invalid?: boolean;
+    /** Makes the field unusable, greyed out through the colour tokens. */
+    disabled?: boolean;
+    /**
+     * Shows the value without allowing it to be changed. The field can still be
+     * focused and copied from, and it hides the clear button — unless `clearVisible`
+     * answers that question explicitly.
+     */
+    readonly?: boolean;
+    /** The label above the field, tied to it so that clicking it focuses the field. */
+    label?: string;
+    /**
+     * A line of help under the field. It is tied to the input for assistive
+     * technology, so it is read out along with the label.
+     */
+    hint?: string;
+    /**
+     * 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.
+     */
+    iconStart?: IconSource;
+    /**
+     * The same at the end of the field. The `#end` slot replaces it, and the loading
+     * spinner takes its place while it turns.
+     */
+    iconEnd?: IconSource;
+    /** What the start icon does, in words, once it is clickable. */
+    iconStartLabel?: string;
+    /** What the end icon does, in words, once it is clickable. */
+    iconEndLabel?: string;
+    /** Shows a spinner at the end of the field, in place of the end icon or slot. */
+    loading?: boolean;
+    /**
+     * What screen readers announce while the spinner turns. It falls back to the
+     * design system dictionary.
+     */
+    loadingLabel?: string;
+    /**
+     * Offers a cross that empties the field. It appears when there is something to
+     * clear and the field can be edited.
+     */
+    clearable?: boolean;
+    /**
+     * Decides whether the cross is shown, instead of letting the field work it out
+     * from its own content — a read-only field included.
+     *
+     * It exists for the components built on top of this one, where what there is to
+     * clear is not the text: VCombobox holds its selection as chips beside the field,
+     * and a read-only date or time picker changes its value through a panel rather
+     * than by typing.
+     */
+    clearVisible?: boolean;
+    /** What the clear button does, in words. It falls back to the design system dictionary. */
+    clearLabel?: string;
+    /**
+     * The maximum number of characters. By default this is the browser's own limit,
+     * which simply refuses anything beyond it.
+     */
+    maxlength?: number;
+    /**
+     * Turns that limit into a soft one: the reader may type past it, and the field
+     * goes into error instead of silently refusing the keystrokes. It is reported
+     * through the native validity, so a form cannot be submitted over the limit.
+     */
+    softLimit?: boolean;
+    /**
+     * Shows how much has been typed, at the end of the field: "12/80" against a limit,
+     * or just "12" without one.
+     */
+    counter?: boolean;
+}
+type __VLS_Props = InputProps;
+type __VLS_Slots = {
+    /** Content at the start of the field, which replaces `iconStart`. */
+    start?(): unknown;
+    /**
+     * Content at the end of the field, which replaces `iconEnd`. It is hidden while
+     * the field is loading, the spinner taking that place.
+     */
+    end?(): unknown;
+};
+type __VLS_ModelProps = {
+    /**
+     * The value, typed as text OR a number rather than text alone. On an
+     * `<input type="number">` Vue converts the value to a number by itself, so a
+     * string-only model would hand a number back to a consumer who passed a string in,
+     * and Vue would report an invalid prop.
+     */
+    modelValue?: string | number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    focus: (options?: FocusOptions) => void | undefined;
+    select: () => void | undefined;
+    el: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    clear: () => any;
+    "update:modelValue": (value: string | number) => any;
+    "click:icon-start": (event: MouseEvent) => any;
+    "click:icon-end": (event: MouseEvent) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClear?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+    "onClick:icon-start"?: ((event: MouseEvent) => any) | undefined;
+    "onClick:icon-end"?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    loading: boolean;
+    label: string;
+    size: "sm" | "md" | "lg";
+    type: "text" | "email" | "number" | "password" | "search" | "tel" | "url";
+    compact: boolean;
+    disabled: boolean;
+    iconStart: IconSource;
+    iconEnd: IconSource;
+    invalid: boolean;
+    readonly: boolean;
+    hint: string;
+    iconStartLabel: string;
+    iconEndLabel: string;
+    loadingLabel: string;
+    clearable: boolean;
+    clearVisible: boolean;
+    clearLabel: string;
+    maxlength: number;
+    softLimit: boolean;
+    counter: 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/VInput/VInput.js

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

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

@@ -0,0 +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":""}

package/dist/components/VInput/VInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,185 @@
+import { useMessages as e } from "../../i18n/state.js";
+import t from "../VIcon/VIcon.js";
+import n from "../VTypography/VTypography.js";
+import { iconName as r, iconProps as i } from "../VIcon/iconProps.js";
+import a from "../VSpinner/VSpinner.js";
+import { useRootAttrs as o } from "../../composables/useRootAttrs.js";
+import { close as s } from "../VIcon/icons/close.js";
+import { useFieldIds as c } from "../../composables/useFieldIds.js";
+import { useIconClickHandlers as l } from "../../composables/useIconClickHandlers.js";
+import { useTextLimit as u } from "../../composables/useTextLimit.js";
+import { computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createTextVNode as g, createVNode as _, defineComponent as v, guardReactiveProps as y, mergeModels as b, mergeProps as x, normalizeClass as S, normalizeProps as C, normalizeStyle as w, openBlock as T, ref as E, renderSlot as D, toDisplayString as O, unref as k, useModel as A, vModelDynamic as ee, withCtx as j, withDirectives as M } from "vue";
+//#region src/components/VInput/VInput.vue?vue&type=script&setup=true&lang.ts
+var N = [
+	"data-size",
+	"data-compact",
+	"data-disabled",
+	"data-readonly"
+], P = { class: "v-input-field" }, F = ["aria-label", "disabled"], I = [
+	"id",
+	"type",
+	"maxlength",
+	"disabled",
+	"readonly",
+	"aria-invalid",
+	"aria-describedby"
+], L = ["data-over"], R = ["aria-label"], z = ["aria-label", "disabled"], B = /*@__PURE__*/ v({
+	inheritAttrs: !1,
+	__name: "VInput",
+	props: /*@__PURE__*/ b({
+		size: { default: "md" },
+		compact: {
+			type: Boolean,
+			default: !1
+		},
+		type: { default: "text" },
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		label: { default: void 0 },
+		hint: { default: void 0 },
+		iconStart: { default: void 0 },
+		iconEnd: { default: void 0 },
+		iconStartLabel: { default: void 0 },
+		iconEndLabel: { default: void 0 },
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		loadingLabel: { default: void 0 },
+		clearable: {
+			type: Boolean,
+			default: !1
+		},
+		clearVisible: {
+			type: Boolean,
+			default: void 0
+		},
+		clearLabel: { default: void 0 },
+		maxlength: { default: void 0 },
+		softLimit: {
+			type: Boolean,
+			default: !1
+		},
+		counter: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ b([
+		"click:icon-start",
+		"click:icon-end",
+		"clear"
+	], ["update:modelValue"]),
+	setup(v, { expose: b, emit: B }) {
+		let V = v, H = B, U = A(v, "modelValue"), W = d(() => String(U.value ?? "")), { attrs: G, rootClass: K, rootStyle: q, forwardedAttrs: J } = o(), Y = e(), X = d(() => V.loadingLabel ?? Y.value.common.loading), Z = d(() => V.clearLabel ?? Y.value.common.clear), { fieldId: Q, hintId: te, describedBy: ne } = c(G, () => !!V.hint), { hasIconStartHandler: re, hasIconEndHandler: ie } = l({
+			name: "VInput",
+			iconStartLabel: V.iconStartLabel,
+			iconEndLabel: V.iconEndLabel
+		}), $ = E(null), ae = d(() => !V.clearable || V.disabled ? !1 : V.clearVisible ?? (!V.readonly && W.value.length > 0));
+		function oe() {
+			U.value = "", H("clear"), $.value?.focus();
+		}
+		let { counterText: se, over: ce } = u({
+			el: $,
+			text: () => W.value,
+			maxlength: () => V.maxlength,
+			softLimit: () => V.softLimit
+		});
+		return b({
+			focus: (e) => $.value?.focus(e),
+			select: () => $.value?.select(),
+			el: $
+		}), (e, o) => (T(), m("div", {
+			class: S(["v-input v-control", k(K)]),
+			style: w(k(q)),
+			"data-size": v.size,
+			"data-compact": v.compact ? "" : void 0,
+			"data-disabled": v.disabled ? "" : void 0,
+			"data-readonly": v.readonly ? "" : void 0
+		}, [
+			v.label ? (T(), f(n, {
+				key: 0,
+				as: "label",
+				variant: "label",
+				class: "v-input-label",
+				for: k(Q)
+			}, {
+				default: j(() => [g(O(v.label), 1)]),
+				_: 1
+			}, 8, ["for"])) : p("", !0),
+			h("div", P, [
+				D(e.$slots, "start", {}, () => [v.iconStart && k(re) ? (T(), m("button", {
+					key: 0,
+					type: "button",
+					class: "v-input-action",
+					"aria-label": v.iconStartLabel ?? k(r)(v.iconStart),
+					disabled: v.disabled,
+					onClick: o[0] ||= (e) => H("click:icon-start", e)
+				}, [_(t, C(y(k(i)(v.iconStart))), null, 16)], 8, F)) : v.iconStart ? (T(), f(t, C(x({ key: 1 }, k(i)(v.iconStart))), null, 16)) : p("", !0)]),
+				M(h("input", x(k(J), {
+					id: k(Q),
+					ref_key: "controlEl",
+					ref: $,
+					"onUpdate:modelValue": o[1] ||= (e) => U.value = e,
+					class: "v-input-control",
+					type: v.type,
+					maxlength: v.softLimit ? void 0 : v.maxlength,
+					disabled: v.disabled,
+					readonly: v.readonly || void 0,
+					"aria-invalid": v.invalid || void 0,
+					"aria-describedby": k(ne)
+				}), null, 16, I), [[ee, U.value]]),
+				v.counter ? (T(), m("span", {
+					key: 0,
+					class: "v-input-counter",
+					"data-over": k(ce) ? "" : void 0
+				}, O(k(se)), 9, L)) : p("", !0),
+				ae.value ? (T(), m("button", {
+					key: 1,
+					type: "button",
+					class: "v-input-action v-input-clear",
+					"aria-label": Z.value,
+					onClick: oe
+				}, [_(t, { name: k(s) }, null, 8, ["name"])], 8, R)) : p("", !0),
+				v.loading ? (T(), f(a, {
+					key: 2,
+					label: X.value
+				}, null, 8, ["label"])) : D(e.$slots, "end", {}, () => [v.iconEnd && k(ie) ? (T(), m("button", {
+					key: 0,
+					type: "button",
+					class: "v-input-action",
+					"aria-label": v.iconEndLabel ?? k(r)(v.iconEnd),
+					disabled: v.disabled,
+					onClick: o[2] ||= (e) => H("click:icon-end", e)
+				}, [_(t, C(y(k(i)(v.iconEnd))), null, 16)], 8, z)) : v.iconEnd ? (T(), f(t, C(x({ key: 1 }, k(i)(v.iconEnd))), null, 16)) : p("", !0)], void 0, 3)
+			]),
+			v.hint ? (T(), f(n, {
+				key: 1,
+				id: k(te),
+				variant: "caption",
+				tone: "muted",
+				class: "v-input-hint"
+			}, {
+				default: j(() => [g(O(v.hint), 1)]),
+				_: 1
+			}, 8, ["id"])) : p("", !0)
+		], 14, N));
+	}
+});
+//#endregion
+export { B as default };
+
+//# sourceMappingURL=VInput.vue_vue_type_script_setup_true_lang.js.map