vectis-ui 0.12.0 → 0.13.0

package/dist/components/VEmptyState/VEmptyState.d.ts

@@ -0,0 +1,43 @@
+import { IconSource } from '../VIcon/types.js';
+/** The scale of the block: a panel or a list, a section, a whole page. */
+export type EmptyStateSize = 'sm' | 'md' | 'lg';
+/** The heading level the title is rendered at. */
+export type EmptyStateHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+interface EmptyStateProps {
+    /** What is empty, in a few words: "No invoices yet". */
+    title?: string;
+    /** A sentence saying why, or what to do next. The default slot replaces it. */
+    description?: string;
+    /** An icon drawn in a round badge above the title. The `#media` slot replaces it. */
+    icon?: IconSource;
+    /** The scale of the block: `sm` for a panel or a list, `lg` for a whole page. */
+    size?: EmptyStateSize;
+    /**
+     * Renders the title as a heading of this level, without changing how it looks. Left out, the
+     * title is a paragraph, which keeps a block inside a panel out of the document outline.
+     */
+    headingLevel?: EmptyStateHeadingLevel;
+}
+type __VLS_Slots = {
+    /** Replaces `description`: text with links or formatting of its own. */
+    default?(): unknown;
+    /** An illustration replacing the icon badge. */
+    media?(): unknown;
+    /** The buttons or links that get out of the empty state: create, import, clear the search. */
+    actions?(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<EmptyStateProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<EmptyStateProps> & Readonly<{}>, {
+    description: string;
+    size: EmptyStateSize;
+    title: string;
+    icon: IconSource;
+    headingLevel: EmptyStateHeadingLevel;
+}, {}, {}, {}, 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/VEmptyState/VEmptyState.js

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

package/dist/components/VEmptyState/VEmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VEmptyState.js","names":[],"sources":["../../../src/components/VEmptyState/VEmptyState.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/** A static block saying that there is nothing to show, and what to do about it. */\nimport { computed } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\n/** The scale of the block: a panel or a list, a section, a whole page. */\nexport type EmptyStateSize = 'sm' | 'md' | 'lg'\n\n/** The heading level the title is rendered at. */\nexport type EmptyStateHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6\n\ninterface EmptyStateProps {\n  /** What is empty, in a few words: \"No invoices yet\". */\n  title?: string\n  /** A sentence saying why, or what to do next. The default slot replaces it. */\n  description?: string\n  /** An icon drawn in a round badge above the title. The `#media` slot replaces it. */\n  icon?: IconSource\n  /** The scale of the block: `sm` for a panel or a list, `lg` for a whole page. */\n  size?: EmptyStateSize\n  /**\n   * Renders the title as a heading of this level, without changing how it looks. Left out, the\n   * title is a paragraph, which keeps a block inside a panel out of the document outline.\n   */\n  headingLevel?: EmptyStateHeadingLevel\n}\n\nconst props = withDefaults(defineProps<EmptyStateProps>(), {\n  title: undefined,\n  description: undefined,\n  icon: undefined,\n  size: 'md',\n  headingLevel: undefined,\n})\n\ndefineSlots<{\n  /** Replaces `description`: text with links or formatting of its own. */\n  default?(): unknown\n  /** An illustration replacing the icon badge. */\n  media?(): unknown\n  /** The buttons or links that get out of the empty state: create, import, clear the search. */\n  actions?(): unknown\n}>()\n\nconst titleTag = computed(() => (props.headingLevel ? `h${props.headingLevel}` : 'p'))\n</script>\n\n<template>\n  <div class=\"v-empty-state\" :data-size=\"size\">\n    <div v-if=\"$slots.media\" class=\"v-empty-state-media\">\n      <slot name=\"media\" />\n    </div>\n    <span v-else-if=\"icon\" class=\"v-empty-state-icon\">\n      <VIcon v-bind=\"iconProps(icon)\" />\n    </span>\n    <component :is=\"titleTag\" v-if=\"title\" class=\"v-empty-state-title\">{{ title }}</component>\n    <div v-if=\"$slots.default || description\" class=\"v-empty-state-description\">\n      <slot>{{ description }}</slot>\n    </div>\n    <div v-if=\"$slots.actions\" class=\"v-empty-state-actions\">\n      <slot name=\"actions\" />\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-empty-state {\n    --empty-state-media: var(--vectis-control-size-empty-state-media-md);\n    --empty-state-gap: var(--vectis-space-3);\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--empty-state-gap);\n    padding: var(--vectis-space-8) var(--vectis-space-6);\n    text-align: center;\n    color: var(--vectis-color-text);\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-empty-state[data-size='sm'] {\n    --empty-state-media: var(--vectis-control-size-empty-state-media-sm);\n    --empty-state-gap: var(--vectis-space-2);\n\n    padding: var(--vectis-space-4);\n  }\n\n  .v-empty-state[data-size='lg'] {\n    --empty-state-media: var(--vectis-control-size-empty-state-media-lg);\n    --empty-state-gap: var(--vectis-space-4);\n\n    padding: var(--vectis-space-12) var(--vectis-space-8);\n  }\n\n  /* The glyph takes half the badge, whatever its size. */\n  .v-empty-state-icon {\n    --vectis-icon-size: calc(var(--empty-state-media) / 2);\n\n    display: inline-grid;\n    place-items: center;\n    inline-size: var(--empty-state-media);\n    block-size: var(--empty-state-media);\n    border-radius: var(--vectis-radius-full);\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* The badge's gap to the title is a step wider than the others: it opens the block. */\n  .v-empty-state-icon,\n  .v-empty-state-media {\n    margin-block-end: var(--vectis-space-1);\n  }\n\n  .v-empty-state-title,\n  .v-empty-state-description {\n    max-inline-size: var(--vectis-control-size-empty-state-text-max);\n    margin: 0;\n  }\n\n  .v-empty-state-title {\n    font-size: var(--vectis-text-heading-4-size);\n    font-weight: var(--vectis-text-heading-4-weight);\n    line-height: var(--vectis-text-heading-4-leading);\n  }\n\n  .v-empty-state-description {\n    font-size: var(--vectis-text-body-md-size);\n    font-weight: var(--vectis-text-body-md-weight);\n    line-height: var(--vectis-text-body-md-leading);\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-empty-state[data-size='sm'] .v-empty-state-title {\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  .v-empty-state[data-size='sm'] .v-empty-state-description {\n    font-size: var(--vectis-text-body-sm-size);\n    font-weight: var(--vectis-text-body-sm-weight);\n    line-height: var(--vectis-text-body-sm-leading);\n  }\n\n  .v-empty-state[data-size='lg'] .v-empty-state-title {\n    font-size: var(--vectis-text-heading-3-size);\n    font-weight: var(--vectis-text-heading-3-weight);\n    line-height: var(--vectis-text-heading-3-leading);\n  }\n\n  .v-empty-state-actions {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    gap: var(--vectis-space-3);\n    margin-block-start: var(--vectis-space-2);\n  }\n\n  /* Without a fill, the badge keeps its outline so the icon still sits in a circle. */\n  @media (forced-colors: active) {\n    .v-empty-state-icon {\n      outline: 1px solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VEmptyState/VEmptyState.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,48 @@
+import { iconProps as e } from "../VIcon/iconProps.js";
+import t from "../VIcon/VIcon.js";
+import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createTextVNode as o, createVNode as s, defineComponent as c, guardReactiveProps as l, normalizeProps as u, openBlock as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
+//#region src/components/VEmptyState/VEmptyState.vue?vue&type=script&setup=true&lang.ts
+var _ = ["data-size"], v = {
+	key: 0,
+	class: "v-empty-state-media"
+}, y = {
+	key: 1,
+	class: "v-empty-state-icon"
+}, b = {
+	key: 3,
+	class: "v-empty-state-description"
+}, x = {
+	key: 4,
+	class: "v-empty-state-actions"
+}, S = /*@__PURE__*/ c({
+	__name: "VEmptyState",
+	props: {
+		title: { default: void 0 },
+		description: { default: void 0 },
+		icon: { default: void 0 },
+		size: { default: "md" },
+		headingLevel: { default: void 0 }
+	},
+	setup(c) {
+		let S = c, C = n(() => S.headingLevel ? `h${S.headingLevel}` : "p");
+		return (n, S) => (d(), a("div", {
+			class: "v-empty-state",
+			"data-size": c.size
+		}, [
+			n.$slots.media ? (d(), a("div", v, [f(n.$slots, "media")])) : c.icon ? (d(), a("span", y, [s(t, u(l(h(e)(c.icon))), null, 16)])) : i("", !0),
+			c.title ? (d(), r(p(C.value), {
+				key: 2,
+				class: "v-empty-state-title"
+			}, {
+				default: g(() => [o(m(c.title), 1)]),
+				_: 1
+			})) : i("", !0),
+			n.$slots.default || c.description ? (d(), a("div", b, [f(n.$slots, "default", {}, () => [o(m(c.description), 1)])])) : i("", !0),
+			n.$slots.actions ? (d(), a("div", x, [f(n.$slots, "actions")])) : i("", !0)
+		], 8, _));
+	}
+});
+//#endregion
+export { S as default };
+
+//# sourceMappingURL=VEmptyState.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VEmptyState.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VEmptyState/VEmptyState.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/** A static block saying that there is nothing to show, and what to do about it. */\nimport { computed } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\n/** The scale of the block: a panel or a list, a section, a whole page. */\nexport type EmptyStateSize = 'sm' | 'md' | 'lg'\n\n/** The heading level the title is rendered at. */\nexport type EmptyStateHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6\n\ninterface EmptyStateProps {\n  /** What is empty, in a few words: \"No invoices yet\". */\n  title?: string\n  /** A sentence saying why, or what to do next. The default slot replaces it. */\n  description?: string\n  /** An icon drawn in a round badge above the title. The `#media` slot replaces it. */\n  icon?: IconSource\n  /** The scale of the block: `sm` for a panel or a list, `lg` for a whole page. */\n  size?: EmptyStateSize\n  /**\n   * Renders the title as a heading of this level, without changing how it looks. Left out, the\n   * title is a paragraph, which keeps a block inside a panel out of the document outline.\n   */\n  headingLevel?: EmptyStateHeadingLevel\n}\n\nconst props = withDefaults(defineProps<EmptyStateProps>(), {\n  title: undefined,\n  description: undefined,\n  icon: undefined,\n  size: 'md',\n  headingLevel: undefined,\n})\n\ndefineSlots<{\n  /** Replaces `description`: text with links or formatting of its own. */\n  default?(): unknown\n  /** An illustration replacing the icon badge. */\n  media?(): unknown\n  /** The buttons or links that get out of the empty state: create, import, clear the search. */\n  actions?(): unknown\n}>()\n\nconst titleTag = computed(() => (props.headingLevel ? `h${props.headingLevel}` : 'p'))\n</script>\n\n<template>\n  <div class=\"v-empty-state\" :data-size=\"size\">\n    <div v-if=\"$slots.media\" class=\"v-empty-state-media\">\n      <slot name=\"media\" />\n    </div>\n    <span v-else-if=\"icon\" class=\"v-empty-state-icon\">\n      <VIcon v-bind=\"iconProps(icon)\" />\n    </span>\n    <component :is=\"titleTag\" v-if=\"title\" class=\"v-empty-state-title\">{{ title }}</component>\n    <div v-if=\"$slots.default || description\" class=\"v-empty-state-description\">\n      <slot>{{ description }}</slot>\n    </div>\n    <div v-if=\"$slots.actions\" class=\"v-empty-state-actions\">\n      <slot name=\"actions\" />\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-empty-state {\n    --empty-state-media: var(--vectis-control-size-empty-state-media-md);\n    --empty-state-gap: var(--vectis-space-3);\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--empty-state-gap);\n    padding: var(--vectis-space-8) var(--vectis-space-6);\n    text-align: center;\n    color: var(--vectis-color-text);\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-empty-state[data-size='sm'] {\n    --empty-state-media: var(--vectis-control-size-empty-state-media-sm);\n    --empty-state-gap: var(--vectis-space-2);\n\n    padding: var(--vectis-space-4);\n  }\n\n  .v-empty-state[data-size='lg'] {\n    --empty-state-media: var(--vectis-control-size-empty-state-media-lg);\n    --empty-state-gap: var(--vectis-space-4);\n\n    padding: var(--vectis-space-12) var(--vectis-space-8);\n  }\n\n  /* The glyph takes half the badge, whatever its size. */\n  .v-empty-state-icon {\n    --vectis-icon-size: calc(var(--empty-state-media) / 2);\n\n    display: inline-grid;\n    place-items: center;\n    inline-size: var(--empty-state-media);\n    block-size: var(--empty-state-media);\n    border-radius: var(--vectis-radius-full);\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* The badge's gap to the title is a step wider than the others: it opens the block. */\n  .v-empty-state-icon,\n  .v-empty-state-media {\n    margin-block-end: var(--vectis-space-1);\n  }\n\n  .v-empty-state-title,\n  .v-empty-state-description {\n    max-inline-size: var(--vectis-control-size-empty-state-text-max);\n    margin: 0;\n  }\n\n  .v-empty-state-title {\n    font-size: var(--vectis-text-heading-4-size);\n    font-weight: var(--vectis-text-heading-4-weight);\n    line-height: var(--vectis-text-heading-4-leading);\n  }\n\n  .v-empty-state-description {\n    font-size: var(--vectis-text-body-md-size);\n    font-weight: var(--vectis-text-body-md-weight);\n    line-height: var(--vectis-text-body-md-leading);\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-empty-state[data-size='sm'] .v-empty-state-title {\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  .v-empty-state[data-size='sm'] .v-empty-state-description {\n    font-size: var(--vectis-text-body-sm-size);\n    font-weight: var(--vectis-text-body-sm-weight);\n    line-height: var(--vectis-text-body-sm-leading);\n  }\n\n  .v-empty-state[data-size='lg'] .v-empty-state-title {\n    font-size: var(--vectis-text-heading-3-size);\n    font-weight: var(--vectis-text-heading-3-weight);\n    line-height: var(--vectis-text-heading-3-leading);\n  }\n\n  .v-empty-state-actions {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    gap: var(--vectis-space-3);\n    margin-block-start: var(--vectis-space-2);\n  }\n\n  /* Without a fill, the badge keeps its outline so the icon still sits in a circle. */\n  @media (forced-colors: active) {\n    .v-empty-state-icon {\n      outline: 1px solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EA+BA,IAAM,IAAQ,GAiBR,IAAW,QAAgB,EAAM,eAAe,IAAI,EAAM,iBAAiB,GAAI;yBAInF,EAcM,OAAA;GAdD,OAAM;GAAiB,aAAW,EAAA;;GAC1BA,EAAAA,OAAO,SAAA,EAAA,GAAlB,EAEM,OAFN,GAEM,CADJ,EAAqB,EAAA,QAAA,OAAA,CAAA,CAAA,KAEN,EAAA,QAAA,EAAA,GAAjB,EAEO,QAFP,GAEO,CADL,EAAkC,GAAA,EAAA,EAAnB,EAAA,CAAA,CAAS,CAAC,EAAA,IAAI,CAAA,CAAA,GAAA,MAAA,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;GAEC,EAAA,SAAA,EAAA,GAAhC,EAA0F,EAA1E,EAAA,KAAQ,GAAA;;IAAe,OAAM;;qBAAiC,CAAA,EAAA,EAAR,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;;GAChEA,EAAAA,OAAO,WAAW,EAAA,eAAA,EAAA,GAA7B,EAEM,OAFN,GAEM,CADJ,EAA8B,EAAA,QAAA,WAAA,CAAA,SAAA,CAAA,EAAA,EAArB,EAAA,WAAW,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;GAEXA,EAAAA,OAAO,WAAA,EAAA,GAAlB,EAEM,OAFN,GAEM,CADJ,EAAuB,EAAA,QAAA,SAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}

package/dist/components/VField/VField.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-field{gap:var(--vectis-space-1);font-family:var(--vectis-text-family);flex-direction:column;display:flex}.v-field-main{gap:var(--vectis-space-1);flex-direction:column;min-inline-size:0;display:flex}.v-field[data-disabled]>.v-field-label,.v-field[data-disabled]>.v-field-main>.v-field-meta>.v-field-hint{--typography-color:var(--vectis-color-text-subtle)}.v-field[data-label-position=start]{column-gap:var(--vectis-space-4);flex-flow:wrap}.v-field[data-label-position=start]>.v-field-label{flex:1 1 var(--vectis-control-size-field-label);padding-block-start:calc(( var(--vectis-control-height-md) - var(--vectis-text-label-size) * var(--vectis-text-label-leading) ) / 2)}.v-field[data-label-position=start]>.v-field-main{flex:999 1 var(--vectis-control-size-field-control-min)}}

package/dist/components/VField/VField.d.ts

@@ -0,0 +1,84 @@
+/** Where the label sits: above the control, or at its start. */
+export type FieldLabelPosition = 'top' | 'start';
+/**
+ * What the slot hands over, to bind on the control with `v-bind`: its id, the references to
+ * the hint and the error, `aria-invalid` while there is an error, `required`, `disabled`, and the
+ * attributes set on the VField other than `class` and `style`. For a group, `aria-labelledby`
+ * replaces the states a group may not carry. A key is absent rather than undefined, so that
+ * binding it never cancels a value the control sets itself.
+ */
+export type FieldControlProps = {
+    id: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: 'true';
+    required?: true;
+    disabled?: true;
+} & Record<string, unknown>;
+interface FieldProps {
+    /** The label, tied to the control so that clicking it focuses the control. */
+    label?: string;
+    /** A line of help under the control, read along with it. */
+    hint?: string;
+    /**
+     * A message saying what is wrong with the value, shown in place of the hint so that the field
+     * does not grow. It marks the control invalid, is read along with it, and is announced when it
+     * appears or changes.
+     */
+    error?: string;
+    /**
+     * Marks the control as required: an asterisk follows the label, and `required` is handed to
+     * the control, which is what assistive technology announces.
+     */
+    required?: boolean;
+    /**
+     * Marks the control as disabled: the label and the hint grey out, and `disabled` is handed to
+     * the control.
+     */
+    disabled?: boolean;
+    /** Hides the label visually. It still names the control for assistive technology. */
+    hideLabel?: boolean;
+    /**
+     * Where the label sits: above the control (`top`, the default), or at its start, in a column
+     * of its own. A start label moves back above the control when there is not room for both.
+     */
+    labelPosition?: FieldLabelPosition;
+    /**
+     * Names a group of elements rather than one control, such as a row of fields with a `group`
+     * role. The label is then plain text that the slot's `aria-labelledby` points at, since a
+     * `<label for>` names one element, and the slot hands over neither `aria-invalid`, `required`
+     * nor `disabled`, which a group may not carry.
+     */
+    group?: boolean;
+}
+type __VLS_Slots = {
+    /** The control. Bind `fieldProps` on it. */
+    default(props: {
+        fieldProps: FieldControlProps;
+    }): unknown;
+    /**
+     * Content at the end of the hint's line, such as a character counter. Bind `id` on it: it
+     * joins the control's `aria-describedby`, after the error and the hint.
+     */
+    meta?(props: {
+        id: string;
+    }): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<FieldProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<FieldProps> & Readonly<{}>, {
+    label: string;
+    error: string;
+    disabled: boolean;
+    required: boolean;
+    group: boolean;
+    hint: string;
+    hideLabel: boolean;
+    labelPosition: FieldLabelPosition;
+}, {}, {}, {}, 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/VField/VField.js

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

package/dist/components/VField/VField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VField.js","names":[],"sources":["../../../src/components/VField/VField.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * A label, a hint and an error message around one control of any kind. VField owns no control:\n * it hands the slot the attributes that tie the control to its label and messages, and the\n * consumer binds them. That works the same for a library control, a native element or a\n * third-party component.\n */\n\nimport { computed, useId } from 'vue'\n\nimport VTypography from '../VTypography/VTypography.vue'\nimport VFieldAnnouncer from './VFieldAnnouncer.vue'\nimport VFieldMessage from './VFieldMessage.vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { joinIds } from '../../utils/ids'\n\n/** Where the label sits: above the control, or at its start. */\nexport type FieldLabelPosition = 'top' | 'start'\n\n/**\n * What the slot hands over, to bind on the control with `v-bind`: its id, the references to\n * the hint and the error, `aria-invalid` while there is an error, `required`, `disabled`, and the\n * attributes set on the VField other than `class` and `style`. For a group, `aria-labelledby`\n * replaces the states a group may not carry. A key is absent rather than undefined, so that\n * binding it never cancels a value the control sets itself.\n */\nexport type FieldControlProps = {\n  id: string\n  'aria-labelledby'?: string\n  'aria-describedby'?: string\n  'aria-invalid'?: 'true'\n  required?: true\n  disabled?: true\n} & Record<string, unknown>\n\ninterface FieldProps {\n  /** The label, tied to the control so that clicking it focuses the control. */\n  label?: string\n  /** A line of help under the control, read along with it. */\n  hint?: string\n  /**\n   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the control invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /**\n   * Marks the control as required: an asterisk follows the label, and `required` is handed to\n   * the control, which is what assistive technology announces.\n   */\n  required?: boolean\n  /**\n   * Marks the control as disabled: the label and the hint grey out, and `disabled` is handed to\n   * the control.\n   */\n  disabled?: boolean\n  /** Hides the label visually. It still names the control for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the control (`top`, the default), or at its start, in a column\n   * of its own. A start label moves back above the control when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\n  /**\n   * Names a group of elements rather than one control, such as a row of fields with a `group`\n   * role. The label is then plain text that the slot's `aria-labelledby` points at, since a\n   * `<label for>` names one element, and the slot hands over neither `aria-invalid`, `required`\n   * nor `disabled`, which a group may not carry.\n   */\n  group?: boolean\n}\n\nconst props = withDefaults(defineProps<FieldProps>(), {\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  disabled: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  group: false,\n})\n\ndefineSlots<{\n  /** The control. Bind `fieldProps` on it. */\n  default(props: { fieldProps: FieldControlProps }): unknown\n  /**\n   * Content at the end of the hint's line, such as a character counter. Bind `id` on it: it\n   * joins the control's `aria-describedby`, after the error and the hint.\n   */\n  meta?(props: { id: string }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst { fieldId, hintId, errorId, describedBy } = useFieldIds(\n  attrs,\n  () => !!props.hint && !props.error,\n  undefined,\n  () => !!props.error,\n)\n\nconst labelId = useId()\nconst metaId = useId()\n\nconst fieldProps = computed<FieldControlProps>(() => {\n  const bound: FieldControlProps = { ...forwardedAttrs.value, id: fieldId.value }\n  if (describedBy.value) bound['aria-describedby'] = describedBy.value\n  if (props.group) {\n    // A consumer's `aria-labelledby` or `aria-label` names the group instead: ours would cancel\n    // an `aria-label`, `aria-labelledby` winning in the accessible name computation.\n    const named = attrs['aria-labelledby'] !== undefined || attrs['aria-label'] !== undefined\n    if (props.label && !named) bound['aria-labelledby'] = labelId\n    return bound\n  }\n  if (props.error) bound['aria-invalid'] = 'true'\n  if (props.required) bound.required = true\n  if (props.disabled) bound.disabled = true\n  return bound\n})\n\n// Called from the template, where reading `$slots` is reactive, unlike in a computed.\nfunction withMeta(bound: FieldControlProps): FieldControlProps {\n  return { ...bound, 'aria-describedby': joinIds(bound['aria-describedby'], metaId) }\n}\n</script>\n\n<template>\n  <div\n    class=\"v-field\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-label-position=\"labelPosition\"\n    :data-disabled=\"disabled ? '' : undefined\"\n  >\n    <VTypography\n      v-if=\"label\"\n      :id=\"group ? labelId : undefined\"\n      :as=\"group ? 'span' : 'label'\"\n      variant=\"label\"\n      class=\"v-field-label\"\n      :class=\"{ 'v-visually-hidden': hideLabel }\"\n      :for=\"group ? undefined : fieldId\"\n    >\n      {{ label }}<span v-if=\"required\" class=\"v-field-required\" aria-hidden=\"true\">*</span>\n    </VTypography>\n    <div class=\"v-field-main\">\n      <slot :field-props=\"$slots.meta ? withMeta(fieldProps) : fieldProps\" />\n      <div v-if=\"error || hint || $slots.meta\" class=\"v-field-meta\">\n        <VFieldMessage :hint=\"hint\" :error=\"error\" :hint-id=\"hintId\" :error-id=\"errorId\" />\n        <slot :id=\"metaId\" name=\"meta\" />\n      </div>\n      <VFieldAnnouncer :text=\"error\" />\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-field-main {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    min-inline-size: 0;\n  }\n\n  /* Child combinators, so that a disabled field leaves a field nested in it alone. */\n  .v-field[data-disabled] > .v-field-label,\n  .v-field[data-disabled] > .v-field-main > .v-field-meta > .v-field-hint {\n    --typography-color: var(--vectis-color-text-subtle);\n  }\n\n  /*\n   * Side by side without a container query, as in VCard: the label keeps its basis and the\n   * control takes the rest, until the two bases no longer fit on one line and the control wraps\n   * under the label. A hidden label is out of the flow, and the control takes the whole line.\n   */\n  .v-field[data-label-position='start'] {\n    flex-flow: row wrap;\n    column-gap: var(--vectis-space-4);\n  }\n\n  .v-field[data-label-position='start'] > .v-field-label {\n    flex: 1 1 var(--vectis-control-size-field-label);\n    /* Centres the first line of the label on a medium control, the size forms use most. */\n    padding-block-start: calc(\n      (\n          var(--vectis-control-height-md) - var(--vectis-text-label-size) *\n            var(--vectis-text-label-leading)\n        ) /\n        2\n    );\n  }\n\n  .v-field[data-label-position='start'] > .v-field-main {\n    flex: 999 1 var(--vectis-control-size-field-control-min);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VField/VField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,99 @@
+import e from "../VTypography/VTypography.js";
+import { useRootAttrs as t } from "../../composables/useRootAttrs.js";
+import n from "./VFieldAnnouncer.js";
+import r from "./VFieldMessage.js";
+import { joinIds as i } from "../../utils/ids.js";
+import { useFieldIds as a } from "../../composables/useFieldIds.js";
+import { computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, normalizeClass as m, normalizeStyle as h, openBlock as g, renderSlot as _, toDisplayString as v, unref as y, useId as b, withCtx as x } from "vue";
+//#region src/components/VField/VField.vue?vue&type=script&setup=true&lang.ts
+var S = ["data-label-position", "data-disabled"], C = {
+	key: 0,
+	class: "v-field-required",
+	"aria-hidden": "true"
+}, w = { class: "v-field-main" }, T = {
+	key: 0,
+	class: "v-field-meta"
+}, E = /*@__PURE__*/ p({
+	inheritAttrs: !1,
+	__name: "VField",
+	props: {
+		label: { default: void 0 },
+		hint: { default: void 0 },
+		error: { default: void 0 },
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		hideLabel: {
+			type: Boolean,
+			default: !1
+		},
+		labelPosition: { default: "top" },
+		group: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(p) {
+		let E = p, { attrs: D, rootClass: O, rootStyle: k, forwardedAttrs: A } = t(), { fieldId: j, hintId: M, errorId: N, describedBy: P } = a(D, () => !!E.hint && !E.error, void 0, () => !!E.error), F = b(), I = b(), L = o(() => {
+			let e = {
+				...A.value,
+				id: j.value
+			};
+			if (P.value && (e["aria-describedby"] = P.value), E.group) {
+				let t = D["aria-labelledby"] !== void 0 || D["aria-label"] !== void 0;
+				return E.label && !t && (e["aria-labelledby"] = F), e;
+			}
+			return E.error && (e["aria-invalid"] = "true"), E.required && (e.required = !0), E.disabled && (e.disabled = !0), e;
+		});
+		function R(e) {
+			return {
+				...e,
+				"aria-describedby": i(e["aria-describedby"], I)
+			};
+		}
+		return (t, i) => (g(), l("div", {
+			class: m(["v-field", y(O)]),
+			style: h(y(k)),
+			"data-label-position": p.labelPosition,
+			"data-disabled": p.disabled ? "" : void 0
+		}, [p.label ? (g(), s(e, {
+			key: 0,
+			id: p.group ? y(F) : void 0,
+			as: p.group ? "span" : "label",
+			variant: "label",
+			class: m(["v-field-label", { "v-visually-hidden": p.hideLabel }]),
+			for: p.group ? void 0 : y(j)
+		}, {
+			default: x(() => [d(v(p.label), 1), p.required ? (g(), l("span", C, "*")) : c("", !0)]),
+			_: 1
+		}, 8, [
+			"id",
+			"as",
+			"class",
+			"for"
+		])) : c("", !0), u("div", w, [
+			_(t.$slots, "default", { fieldProps: t.$slots.meta ? R(L.value) : L.value }),
+			p.error || p.hint || t.$slots.meta ? (g(), l("div", T, [f(r, {
+				hint: p.hint,
+				error: p.error,
+				"hint-id": y(M),
+				"error-id": y(N)
+			}, null, 8, [
+				"hint",
+				"error",
+				"hint-id",
+				"error-id"
+			]), _(t.$slots, "meta", { id: y(I) })])) : c("", !0),
+			f(n, { text: p.error }, null, 8, ["text"])
+		])], 14, S));
+	}
+});
+//#endregion
+export { E as default };
+
+//# sourceMappingURL=VField.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VField.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VField/VField.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * A label, a hint and an error message around one control of any kind. VField owns no control:\n * it hands the slot the attributes that tie the control to its label and messages, and the\n * consumer binds them. That works the same for a library control, a native element or a\n * third-party component.\n */\n\nimport { computed, useId } from 'vue'\n\nimport VTypography from '../VTypography/VTypography.vue'\nimport VFieldAnnouncer from './VFieldAnnouncer.vue'\nimport VFieldMessage from './VFieldMessage.vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { joinIds } from '../../utils/ids'\n\n/** Where the label sits: above the control, or at its start. */\nexport type FieldLabelPosition = 'top' | 'start'\n\n/**\n * What the slot hands over, to bind on the control with `v-bind`: its id, the references to\n * the hint and the error, `aria-invalid` while there is an error, `required`, `disabled`, and the\n * attributes set on the VField other than `class` and `style`. For a group, `aria-labelledby`\n * replaces the states a group may not carry. A key is absent rather than undefined, so that\n * binding it never cancels a value the control sets itself.\n */\nexport type FieldControlProps = {\n  id: string\n  'aria-labelledby'?: string\n  'aria-describedby'?: string\n  'aria-invalid'?: 'true'\n  required?: true\n  disabled?: true\n} & Record<string, unknown>\n\ninterface FieldProps {\n  /** The label, tied to the control so that clicking it focuses the control. */\n  label?: string\n  /** A line of help under the control, read along with it. */\n  hint?: string\n  /**\n   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the control invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /**\n   * Marks the control as required: an asterisk follows the label, and `required` is handed to\n   * the control, which is what assistive technology announces.\n   */\n  required?: boolean\n  /**\n   * Marks the control as disabled: the label and the hint grey out, and `disabled` is handed to\n   * the control.\n   */\n  disabled?: boolean\n  /** Hides the label visually. It still names the control for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the control (`top`, the default), or at its start, in a column\n   * of its own. A start label moves back above the control when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\n  /**\n   * Names a group of elements rather than one control, such as a row of fields with a `group`\n   * role. The label is then plain text that the slot's `aria-labelledby` points at, since a\n   * `<label for>` names one element, and the slot hands over neither `aria-invalid`, `required`\n   * nor `disabled`, which a group may not carry.\n   */\n  group?: boolean\n}\n\nconst props = withDefaults(defineProps<FieldProps>(), {\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  disabled: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  group: false,\n})\n\ndefineSlots<{\n  /** The control. Bind `fieldProps` on it. */\n  default(props: { fieldProps: FieldControlProps }): unknown\n  /**\n   * Content at the end of the hint's line, such as a character counter. Bind `id` on it: it\n   * joins the control's `aria-describedby`, after the error and the hint.\n   */\n  meta?(props: { id: string }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst { fieldId, hintId, errorId, describedBy } = useFieldIds(\n  attrs,\n  () => !!props.hint && !props.error,\n  undefined,\n  () => !!props.error,\n)\n\nconst labelId = useId()\nconst metaId = useId()\n\nconst fieldProps = computed<FieldControlProps>(() => {\n  const bound: FieldControlProps = { ...forwardedAttrs.value, id: fieldId.value }\n  if (describedBy.value) bound['aria-describedby'] = describedBy.value\n  if (props.group) {\n    // A consumer's `aria-labelledby` or `aria-label` names the group instead: ours would cancel\n    // an `aria-label`, `aria-labelledby` winning in the accessible name computation.\n    const named = attrs['aria-labelledby'] !== undefined || attrs['aria-label'] !== undefined\n    if (props.label && !named) bound['aria-labelledby'] = labelId\n    return bound\n  }\n  if (props.error) bound['aria-invalid'] = 'true'\n  if (props.required) bound.required = true\n  if (props.disabled) bound.disabled = true\n  return bound\n})\n\n// Called from the template, where reading `$slots` is reactive, unlike in a computed.\nfunction withMeta(bound: FieldControlProps): FieldControlProps {\n  return { ...bound, 'aria-describedby': joinIds(bound['aria-describedby'], metaId) }\n}\n</script>\n\n<template>\n  <div\n    class=\"v-field\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-label-position=\"labelPosition\"\n    :data-disabled=\"disabled ? '' : undefined\"\n  >\n    <VTypography\n      v-if=\"label\"\n      :id=\"group ? labelId : undefined\"\n      :as=\"group ? 'span' : 'label'\"\n      variant=\"label\"\n      class=\"v-field-label\"\n      :class=\"{ 'v-visually-hidden': hideLabel }\"\n      :for=\"group ? undefined : fieldId\"\n    >\n      {{ label }}<span v-if=\"required\" class=\"v-field-required\" aria-hidden=\"true\">*</span>\n    </VTypography>\n    <div class=\"v-field-main\">\n      <slot :field-props=\"$slots.meta ? withMeta(fieldProps) : fieldProps\" />\n      <div v-if=\"error || hint || $slots.meta\" class=\"v-field-meta\">\n        <VFieldMessage :hint=\"hint\" :error=\"error\" :hint-id=\"hintId\" :error-id=\"errorId\" />\n        <slot :id=\"metaId\" name=\"meta\" />\n      </div>\n      <VFieldAnnouncer :text=\"error\" />\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-field-main {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    min-inline-size: 0;\n  }\n\n  /* Child combinators, so that a disabled field leaves a field nested in it alone. */\n  .v-field[data-disabled] > .v-field-label,\n  .v-field[data-disabled] > .v-field-main > .v-field-meta > .v-field-hint {\n    --typography-color: var(--vectis-color-text-subtle);\n  }\n\n  /*\n   * Side by side without a container query, as in VCard: the label keeps its basis and the\n   * control takes the rest, until the two bases no longer fit on one line and the control wraps\n   * under the label. A hidden label is out of the flow, and the control takes the whole line.\n   */\n  .v-field[data-label-position='start'] {\n    flex-flow: row wrap;\n    column-gap: var(--vectis-space-4);\n  }\n\n  .v-field[data-label-position='start'] > .v-field-label {\n    flex: 1 1 var(--vectis-control-size-field-label);\n    /* Centres the first line of the label on a medium control, the size forms use most. */\n    padding-block-start: calc(\n      (\n          var(--vectis-control-height-md) - var(--vectis-text-label-size) *\n            var(--vectis-text-label-leading)\n        ) /\n        2\n    );\n  }\n\n  .v-field[data-label-position='start'] > .v-field-main {\n    flex: 999 1 var(--vectis-control-size-field-control-min);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2EA,IAAM,IAAQ,GAuBR,EAAE,UAAO,cAAW,cAAW,sBAAmB,EAAa,GAE/D,EAAE,YAAS,WAAQ,YAAS,mBAAgB,EAChD,SACM,CAAC,CAAC,EAAM,QAAQ,CAAC,EAAM,OAC7B,KAAA,SACM,CAAC,CAAC,EAAM,KAChB,GAEM,IAAU,EAAM,GAChB,IAAS,EAAM,GAEf,IAAa,QAAkC;GACnD,IAAM,IAA2B;IAAE,GAAG,EAAe;IAAO,IAAI,EAAQ;GAAM;GAE9E,IADI,EAAY,UAAO,EAAM,sBAAsB,EAAY,QAC3D,EAAM,OAAO;IAGf,IAAM,IAAQ,EAAM,uBAAuB,KAAA,KAAa,EAAM,kBAAkB,KAAA;IAEhF,OADI,EAAM,SAAS,CAAC,MAAO,EAAM,qBAAqB,IAC/C;GACT;GAIA,OAHI,EAAM,UAAO,EAAM,kBAAkB,SACrC,EAAM,aAAU,EAAM,WAAW,KACjC,EAAM,aAAU,EAAM,WAAW,KAC9B;EACT,CAAC;EAGD,SAAS,EAAS,GAA6C;GAC7D,OAAO;IAAE,GAAG;IAAO,oBAAoB,EAAQ,EAAM,qBAAqB,CAAM;GAAE;EACpF;yBAIE,EA0BM,OAAA;GAzBJ,OAAK,EAAA,CAAC,WACE,EAAA,CAAA,CAAS,CAAA;GAChB,OAAK,EAAE,EAAA,CAAA,CAAS;GAChB,uBAAqB,EAAA;GACrB,iBAAe,EAAA,WAAQ,KAAQ,KAAA;MAGxB,EAAA,SAAA,EAAA,GADR,EAUc,GAAA;;GARX,IAAI,EAAA,QAAQ,EAAA,CAAA,IAAU,KAAA;GACtB,IAAI,EAAA,QAAK,SAAA;GACV,SAAQ;GACR,OAAK,EAAA,CAAC,iBAAe,EAAA,qBACU,EAAA,UAAS,CAAA,CAAA;GACvC,KAAK,EAAA,QAAQ,KAAA,IAAY,EAAA,CAAA;;oBAEf,CAAA,EAAA,EAAR,EAAA,KAAK,GAAA,CAAA,GAAe,EAAA,YAAA,EAAA,GAAZ,EAA0E,QAA1E,GAAkE,GAAC,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA;;;;;;;mBAEhF,EAOM,OAPN,GAOM;GANJ,EAAuE,EAAA,QAAA,WAAA,EAAhE,YAAaA,EAAAA,OAAO,OAAO,EAAS,EAAA,KAAU,IAAI,EAAA,MAAA,CAAA;GAC9C,EAAA,SAAS,EAAA,QAAQA,EAAAA,OAAO,QAAA,EAAA,GAAnC,EAGM,OAHN,GAGM,CAFJ,EAAmF,GAAA;IAAnE,MAAM,EAAA;IAAO,OAAO,EAAA;IAAQ,WAAS,EAAA,CAAA;IAAS,YAAU,EAAA,CAAA;;;;;;OACxE,EAAiC,EAAA,QAAA,QAAA,EAA1B,IAAI,EAAA,CAAA,EAAM,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;GAEnB,EAAiC,GAAA,EAAf,MAAM,EAAA,MAAK,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA"}

package/dist/components/VField/VFieldAnnouncer.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    /** The error message. Empty or absent, there is nothing to announce. */
+    text?: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/VField/VFieldAnnouncer.js

@@ -0,0 +1,7 @@
+import e from "./VFieldAnnouncer.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/VField/VFieldAnnouncer.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=VFieldAnnouncer.js.map

package/dist/components/VField/VFieldAnnouncer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VFieldAnnouncer.js","names":[],"sources":["../../../src/components/VField/VFieldAnnouncer.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * Announces the error message of a field, for VField, VFieldset and every control with an\n * `error` prop. The visible message, which takes the place of the hint, is referenced by the\n * control's `aria-describedby` and read whenever the control is focused; this region announces\n * it when it appears or changes. It stays mounted at the root of the control, because a live\n * region inserted together with its text is not announced reliably. The first message, rendered\n * with the page, is not announced.\n */\n\nimport { nextTick, ref, watch } from 'vue'\n\nconst props = defineProps<{\n  /** The error message. Empty or absent, there is nothing to announce. */\n  text?: string\n}>()\n\nconst announced = ref('')\n\nwatch(\n  () => props.text,\n  async (text) => {\n    // Cleared first, so that the same message raised twice in a row is announced twice.\n    announced.value = ''\n    if (!text) return\n    await nextTick()\n    announced.value = text\n  },\n)\n</script>\n\n<template>\n  <span class=\"v-visually-hidden\" aria-live=\"polite\">{{ announced }}</span>\n</template>\n"],"mappings":""}

package/dist/components/VField/VFieldAnnouncer.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,19 @@
+import { createElementBlock as e, defineComponent as t, nextTick as n, openBlock as r, ref as i, toDisplayString as a, watch as o } from "vue";
+//#region src/components/VField/VFieldAnnouncer.vue?vue&type=script&setup=true&lang.ts
+var s = {
+	class: "v-visually-hidden",
+	"aria-live": "polite"
+}, c = /*@__PURE__*/ t({
+	__name: "VFieldAnnouncer",
+	props: { text: {} },
+	setup(t) {
+		let c = t, l = i("");
+		return o(() => c.text, async (e) => {
+			l.value = "", e && (await n(), l.value = e);
+		}), (t, n) => (r(), e("span", s, a(l.value), 1));
+	}
+});
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=VFieldAnnouncer.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VField/VFieldAnnouncer.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VFieldAnnouncer.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VField/VFieldAnnouncer.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * Announces the error message of a field, for VField, VFieldset and every control with an\n * `error` prop. The visible message, which takes the place of the hint, is referenced by the\n * control's `aria-describedby` and read whenever the control is focused; this region announces\n * it when it appears or changes. It stays mounted at the root of the control, because a live\n * region inserted together with its text is not announced reliably. The first message, rendered\n * with the page, is not announced.\n */\n\nimport { nextTick, ref, watch } from 'vue'\n\nconst props = defineProps<{\n  /** The error message. Empty or absent, there is nothing to announce. */\n  text?: string\n}>()\n\nconst announced = ref('')\n\nwatch(\n  () => props.text,\n  async (text) => {\n    // Cleared first, so that the same message raised twice in a row is announced twice.\n    announced.value = ''\n    if (!text) return\n    await nextTick()\n    announced.value = text\n  },\n)\n</script>\n\n<template>\n  <span class=\"v-visually-hidden\" aria-live=\"polite\">{{ announced }}</span>\n</template>\n"],"mappings":";;;;;;;;;EAaA,IAAM,IAAQ,GAKR,IAAY,EAAI,EAAE;SAExB,QACQ,EAAM,MACZ,OAAO,MAAS;GAEd,EAAU,QAAQ,IACb,MACL,MAAM,EAAS,GACf,EAAU,QAAQ;EACpB,CACF,mBAIE,EAAyE,QAAzE,GAAyE,EAAnB,EAAA,KAAS,GAAA,CAAA"}

package/dist/components/VField/VFieldMessage.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    /** A line of help. */
+    hint?: string;
+    /** What is wrong with the value, shown in place of the hint. */
+    error?: string;
+    hintId: string;
+    errorId: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/VField/VFieldMessage.js

@@ -0,0 +1,7 @@
+import e from "./VFieldMessage.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/VField/VFieldMessage.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=VFieldMessage.js.map

package/dist/components/VField/VFieldMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VFieldMessage.js","names":[],"sources":["../../../src/components/VField/VFieldMessage.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * The line under a control: the error message, or the hint when there is none, so that raising\n * the error does not grow the field. Shared by VField, VFieldset and the choice controls, whose\n * layouts differ but whose message does not. The ids are the owner's, which also references them.\n */\n\nimport VTypography from '../VTypography/VTypography.vue'\n\ndefineProps<{\n  /** A line of help. */\n  hint?: string\n  /** What is wrong with the value, shown in place of the hint. */\n  error?: string\n  hintId: string\n  errorId: string\n}>()\n</script>\n\n<template>\n  <span v-if=\"error\" :id=\"errorId\" class=\"v-field-error\">{{ error }}</span>\n  <VTypography v-else-if=\"hint\" :id=\"hintId\" variant=\"caption\" tone=\"muted\" class=\"v-field-hint\">\n    {{ hint }}\n  </VTypography>\n</template>\n"],"mappings":""}

package/dist/components/VField/VFieldMessage.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,32 @@
+import e from "../VTypography/VTypography.js";
+import { createBlock as t, createCommentVNode as n, createElementBlock as r, createTextVNode as i, defineComponent as a, openBlock as o, toDisplayString as s, withCtx as c } from "vue";
+//#region src/components/VField/VFieldMessage.vue?vue&type=script&setup=true&lang.ts
+var l = ["id"], u = /*@__PURE__*/ a({
+	__name: "VFieldMessage",
+	props: {
+		hint: {},
+		error: {},
+		hintId: {},
+		errorId: {}
+	},
+	setup(a) {
+		return (u, d) => a.error ? (o(), r("span", {
+			key: 0,
+			id: a.errorId,
+			class: "v-field-error"
+		}, s(a.error), 9, l)) : a.hint ? (o(), t(e, {
+			key: 1,
+			id: a.hintId,
+			variant: "caption",
+			tone: "muted",
+			class: "v-field-hint"
+		}, {
+			default: c(() => [i(s(a.hint), 1)]),
+			_: 1
+		}, 8, ["id"])) : n("", !0);
+	}
+});
+//#endregion
+export { u as default };
+
+//# sourceMappingURL=VFieldMessage.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VField/VFieldMessage.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VFieldMessage.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VField/VFieldMessage.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * The line under a control: the error message, or the hint when there is none, so that raising\n * the error does not grow the field. Shared by VField, VFieldset and the choice controls, whose\n * layouts differ but whose message does not. The ids are the owner's, which also references them.\n */\n\nimport VTypography from '../VTypography/VTypography.vue'\n\ndefineProps<{\n  /** A line of help. */\n  hint?: string\n  /** What is wrong with the value, shown in place of the hint. */\n  error?: string\n  hintId: string\n  errorId: string\n}>()\n</script>\n\n<template>\n  <span v-if=\"error\" :id=\"errorId\" class=\"v-field-error\">{{ error }}</span>\n  <VTypography v-else-if=\"hint\" :id=\"hintId\" variant=\"caption\" tone=\"muted\" class=\"v-field-hint\">\n    {{ hint }}\n  </VTypography>\n</template>\n"],"mappings":";;;;;;;;;;;;mBAqBc,EAAA,SAAA,EAAA,GAAZ,EAAyE,QAAA;;GAArD,IAAI,EAAA;GAAS,OAAM;OAAmB,EAAA,KAAK,GAAA,GAAA,CAAA,KACvC,EAAA,QAAA,EAAA,GAAxB,EAEc,GAAA;;GAFiB,IAAI,EAAA;GAAQ,SAAQ;GAAU,MAAK;GAAQ,OAAM;;oBACpE,CAAA,EAAA,EAAP,EAAA,IAAI,GAAA,CAAA,CAAA,CAAA"}

package/dist/components/VFieldset/VFieldset.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-fieldset{gap:var(--vectis-space-1);min-inline-size:0;font-family:var(--vectis-text-family);border:0;flex-direction:column;margin:0;padding:0;display:flex}.v-fieldset-legend{color:var(--vectis-color-text);font-size:var(--vectis-text-label-size);font-weight:var(--vectis-text-label-weight);line-height:var(--vectis-text-label-leading);margin-block-end:var(--vectis-space-2);padding:0}.v-fieldset:disabled>.v-fieldset-legend{color:var(--vectis-color-text-subtle)}.v-fieldset:disabled>.v-field-hint{--typography-color:var(--vectis-color-text-subtle)}.v-fieldset-body{align-items:flex-start;gap:var(--vectis-space-2);flex-direction:column;display:flex}.v-fieldset[data-orientation=horizontal]>.v-fieldset-body{column-gap:var(--vectis-space-4);flex-flow:wrap}}

package/dist/components/VFieldset/VFieldset.d.ts

@@ -0,0 +1,52 @@
+/** How the controls of the group are laid out: in a column, or in a wrapping row. */
+export type FieldsetOrientation = 'vertical' | 'horizontal';
+interface FieldsetProps {
+    /** The legend, which names the group for assistive technology. */
+    legend?: string;
+    /** A line of help under the group, read along with its name. */
+    hint?: string;
+    /**
+     * A message saying what is wrong with the group, shown in place of the hint and read along
+     * with its name. It is announced when it appears or changes, and the slot's `invalid` turns
+     * true.
+     */
+    error?: string;
+    /**
+     * Marks the group as required: an asterisk follows the legend, and the slot's `required`
+     * turns true, to be set on the controls.
+     */
+    required?: boolean;
+    /** Hides the legend visually. It still names the group for assistive technology. */
+    hideLegend?: boolean;
+    /** Lays the controls out in a column (`vertical`, the default) or in a wrapping row. */
+    orientation?: FieldsetOrientation;
+}
+type __VLS_Slots = {
+    /**
+     * The controls of the group. `invalid` is true while there is an error, and `required`
+     * repeats the prop: bind them on the controls.
+     */
+    default(props: {
+        invalid: boolean;
+        required: boolean;
+    }): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<FieldsetProps, {
+    /** The `<fieldset>`. */
+    el: import('vue').Ref<HTMLFieldSetElement | null, HTMLFieldSetElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<FieldsetProps> & Readonly<{}>, {
+    error: string;
+    legend: string;
+    required: boolean;
+    orientation: FieldsetOrientation;
+    hint: string;
+    hideLegend: 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/VFieldset/VFieldset.js

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

package/dist/components/VFieldset/VFieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VFieldset.js","names":[],"sources":["../../../src/components/VFieldset/VFieldset.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * A native `<fieldset>`, named by its `<legend>`: a group of radios, checkboxes or related\n * fields announced as one. The hint and the error describe the group; `aria-invalid` is not\n * allowed on a group, so the invalid state reaches the controls through the slot.\n */\n\nimport { ref, useAttrs } from 'vue'\n\nimport VFieldAnnouncer from '../VField/VFieldAnnouncer.vue'\nimport VFieldMessage from '../VField/VFieldMessage.vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\n\n/** How the controls of the group are laid out: in a column, or in a wrapping row. */\nexport type FieldsetOrientation = 'vertical' | 'horizontal'\n\ninterface FieldsetProps {\n  /** The legend, which names the group for assistive technology. */\n  legend?: string\n  /** A line of help under the group, read along with its name. */\n  hint?: string\n  /**\n   * A message saying what is wrong with the group, shown in place of the hint and read along\n   * with its name. It is announced when it appears or changes, and the slot's `invalid` turns\n   * true.\n   */\n  error?: string\n  /**\n   * Marks the group as required: an asterisk follows the legend, and the slot's `required`\n   * turns true, to be set on the controls.\n   */\n  required?: boolean\n  /** Hides the legend visually. It still names the group for assistive technology. */\n  hideLegend?: boolean\n  /** Lays the controls out in a column (`vertical`, the default) or in a wrapping row. */\n  orientation?: FieldsetOrientation\n}\n\nconst props = withDefaults(defineProps<FieldsetProps>(), {\n  legend: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  hideLegend: false,\n  orientation: 'vertical',\n})\n\ndefineSlots<{\n  /**\n   * The controls of the group. `invalid` is true while there is an error, and `required`\n   * repeats the prop: bind them on the controls.\n   */\n  default(props: { invalid: boolean; required: boolean }): unknown\n}>()\n\n// The consumer's `aria-describedby` is merged with the hint and error references, and the\n// merged list is bound after the other attributes, which fallthrough would overwrite.\ndefineOptions({ inheritAttrs: false })\n\nconst attrs = useAttrs()\n\nconst { hintId, errorId, describedBy } = useFieldIds(\n  attrs,\n  () => !!props.hint && !props.error,\n  undefined,\n  () => !!props.error,\n)\n\nconst rootEl = ref<HTMLFieldSetElement | null>(null)\n\ndefineExpose({\n  /** The `<fieldset>`. */\n  el: rootEl,\n})\n</script>\n\n<template>\n  <fieldset\n    ref=\"rootEl\"\n    v-bind=\"attrs\"\n    class=\"v-fieldset\"\n    :aria-describedby=\"describedBy\"\n    :data-orientation=\"orientation\"\n  >\n    <legend v-if=\"legend\" class=\"v-fieldset-legend\" :class=\"{ 'v-visually-hidden': hideLegend }\">\n      {{ legend }}<span v-if=\"required\" class=\"v-field-required\" aria-hidden=\"true\">*</span>\n    </legend>\n    <div class=\"v-fieldset-body\">\n      <slot :invalid=\"!!error\" :required=\"required\" />\n    </div>\n    <VFieldMessage :hint=\"hint\" :error=\"error\" :hint-id=\"hintId\" :error-id=\"errorId\" />\n    <VFieldAnnouncer :text=\"error\" />\n  </fieldset>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-fieldset {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    min-inline-size: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n    font-family: var(--vectis-text-family);\n  }\n\n  /* A rendered legend is not a flex item of its fieldset, so the gap misses it: a margin. */\n  .v-fieldset-legend {\n    margin-block-end: var(--vectis-space-2);\n    padding: 0;\n    color: var(--vectis-color-text);\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  /* A native `disabled` disables every control of the group: its name and help grey out. */\n  .v-fieldset:disabled > .v-fieldset-legend {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-fieldset:disabled > .v-field-hint {\n    --typography-color: var(--vectis-color-text-subtle);\n  }\n\n  .v-fieldset-body {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--vectis-space-2);\n  }\n\n  .v-fieldset[data-orientation='horizontal'] > .v-fieldset-body {\n    flex-flow: row wrap;\n    column-gap: var(--vectis-space-4);\n  }\n}\n</style>\n"],"mappings":""}