vectis-ui 0.11.0 → 0.13.0

package/dist/components/VRating/VRating.d.ts

@@ -0,0 +1,92 @@
+import { IconSource } from '../VIcon/types.js';
+/** The size of the icons: 20, 24 or 32 pixels. */
+export type RatingSize = 'sm' | 'md' | 'lg';
+/** The colour of the filled icons. */
+export type RatingTone = 'accent' | 'warning' | 'danger' | 'success' | 'neutral';
+interface RatingProps {
+    /** How many icons, and the highest value. */
+    max?: number;
+    /**
+     * The name of the group, shown as its legend. Without it, the group is named from the design
+     * system dictionary.
+     */
+    label?: string;
+    /** Hides the label visually. It still names the group for assistive technology. */
+    hideLabel?: boolean;
+    /** A line of help under the icons, read along with the group's name. */
+    hint?: string;
+    /**
+     * A message saying what is wrong, shown in place of the hint and read along with the group's
+     * name. It is announced when it appears or changes.
+     */
+    error?: string;
+    /**
+     * Marks the rating as invalid, which colours the icons and tells assistive technology so. It
+     * is for a rule the browser cannot check by itself.
+     */
+    invalid?: boolean;
+    /** Requires a rating before the form is sent. An asterisk follows the label. */
+    required?: boolean;
+    /** The name the value is sent under in a form. */
+    name?: string;
+    /**
+     * Lets the rating go back to none: clicking the current value again clears it, and a "No
+     * rating" choice comes first for the keyboard.
+     */
+    clearable?: boolean;
+    /**
+     * Shows the value without letting it change. The icons become a single image, and a fractional
+     * value fills part of an icon.
+     */
+    readonly?: boolean;
+    /** Makes the rating unusable. */
+    disabled?: boolean;
+    /** The size of the icons. */
+    size?: RatingSize;
+    /** The colour of the filled icons. */
+    tone?: RatingTone;
+    /**
+     * A colour of your own for the filled icons (hex, CSS name or `oklch()`), which replaces the
+     * tone. Its contrast with the background is yours to check.
+     */
+    color?: string;
+    /**
+     * The icon: an icon name, or an explicit render. An empty one is drawn in outline and a filled
+     * one with the icon's filled form.
+     */
+    icon?: IconSource;
+}
+type __VLS_Props = RatingProps;
+type __VLS_ModelProps = {
+    /** The rating, from 1 to `max`, or `null` when there is none. Read-only, it may be fractional. */
+    modelValue?: number | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {
+    /** Moves the focus to the checked radio, or to the first icon when there is no rating. */
+    focus: (options?: FocusOptions) => void | undefined;
+    /** The `<fieldset>`, which also receives the consumer's attributes. */
+    el: import('vue').ComputedRef<HTMLFieldSetElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | null) => any) | undefined;
+}>, {
+    label: string;
+    error: string;
+    name: string;
+    size: RatingSize;
+    tone: RatingTone;
+    color: string;
+    disabled: boolean;
+    required: boolean;
+    icon: IconSource;
+    invalid: boolean;
+    hint: string;
+    hideLabel: boolean;
+    readonly: boolean;
+    clearable: boolean;
+    max: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/VRating/VRating.js

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

package/dist/components/VRating/VRating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VRating.js","names":[],"sources":["../../../src/components/VRating/VRating.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * A rating chosen among native radios, one per icon, grouped in a `<fieldset>`: the browser\n * provides the arrow keys, form submission and `required`. Read-only, the icons become one image\n * whose name says the value, which may then be fractional.\n */\nimport { computed, ref, useAttrs, useId } from 'vue'\n\nimport VFieldset from '../VFieldset/VFieldset.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { star as starIcon } from '../VIcon/icons/star'\nimport type { IconSource } from '../VIcon/types'\nimport { useLocale, useMessages } from '../../i18n/state'\nimport { customColorStyle } from '../../utils/css'\nimport { clamp } from '../../utils/number'\n\n/** The size of the icons: 20, 24 or 32 pixels. */\nexport type RatingSize = 'sm' | 'md' | 'lg'\n\n/** The colour of the filled icons. */\nexport type RatingTone = 'accent' | 'warning' | 'danger' | 'success' | 'neutral'\n\ninterface RatingProps {\n  /** How many icons, and the highest value. */\n  max?: number\n  /**\n   * The name of the group, shown as its legend. Without it, the group is named from the design\n   * system dictionary.\n   */\n  label?: string\n  /** Hides the label visually. It still names the group for assistive technology. */\n  hideLabel?: boolean\n  /** A line of help under the icons, read along with the group's name. */\n  hint?: string\n  /**\n   * A message saying what is wrong, shown in place of the hint and read along with the group's\n   * name. It is announced when it appears or changes.\n   */\n  error?: string\n  /**\n   * Marks the rating as invalid, which colours the icons and tells assistive technology so. It\n   * is for a rule the browser cannot check by itself.\n   */\n  invalid?: boolean\n  /** Requires a rating before the form is sent. An asterisk follows the label. */\n  required?: boolean\n  /** The name the value is sent under in a form. */\n  name?: string\n  /**\n   * Lets the rating go back to none: clicking the current value again clears it, and a \"No\n   * rating\" choice comes first for the keyboard.\n   */\n  clearable?: boolean\n  /**\n   * Shows the value without letting it change. The icons become a single image, and a fractional\n   * value fills part of an icon.\n   */\n  readonly?: boolean\n  /** Makes the rating unusable. */\n  disabled?: boolean\n  /** The size of the icons. */\n  size?: RatingSize\n  /** The colour of the filled icons. */\n  tone?: RatingTone\n  /**\n   * A colour of your own for the filled icons (hex, CSS name or `oklch()`), which replaces the\n   * tone. Its contrast with the background is yours to check.\n   */\n  color?: string\n  /**\n   * The icon: an icon name, or an explicit render. An empty one is drawn in outline and a filled\n   * one with the icon's filled form.\n   */\n  icon?: IconSource\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 props = withDefaults(defineProps<RatingProps>(), {\n  max: 5,\n  label: undefined,\n  hideLabel: false,\n  hint: undefined,\n  error: undefined,\n  invalid: false,\n  required: false,\n  name: undefined,\n  clearable: false,\n  readonly: false,\n  disabled: false,\n  size: 'md',\n  tone: 'accent',\n  color: undefined,\n  icon: () => starIcon,\n})\n\n/** The rating, from 1 to `max`, or `null` when there is none. Read-only, it may be fractional. */\nconst model = defineModel<number | null>({ default: null })\n\nconst attrs = useAttrs()\nconst m = useMessages()\nconst locale = useLocale()\n\nconst isInvalid = computed(() => props.invalid || !!props.error)\n\n// Radios group by name, so the group needs one even when the form does not.\nconst uid = useId()\nconst groupName = computed(() => props.name ?? uid)\n\nconst values = computed(() => Array.from({ length: props.max }, (_, index) => index + 1))\n\nconst numberFormat = computed(\n  () => new Intl.NumberFormat(locale.value, { maximumFractionDigits: 1 }),\n)\n\nconst valueText = computed(() =>\n  m.value.rating.value(\n    numberFormat.value.format(clamp(model.value ?? 0, 0, props.max)),\n    numberFormat.value.format(props.max),\n  ),\n)\n\n/** How much of the icon for `value` is filled, from 0 to 1. */\nfunction fill(value: number): number {\n  return clamp((model.value ?? 0) - (value - 1), 0, 1)\n}\n\n// @core\n// A click on the checked radio fires no change; it clears instead. Only a pointer click does:\n// the keyboard reaches \"No rating\" with the arrows, and Space must not undo a choice.\nfunction onClick(value: number, event: MouseEvent) {\n  if (props.clearable && model.value === value && event.detail > 0) model.value = null\n}\n\nconst fieldset = ref<InstanceType<typeof VFieldset> | null>(null)\nconst rootEl = computed(() => fieldset.value?.el ?? null)\n\ndefineExpose({\n  /** Moves the focus to the checked radio, or to the first icon when there is no rating. */\n  focus: (options?: FocusOptions) =>\n    (\n      rootEl.value?.querySelector<HTMLInputElement>('.v-rating-item input:checked') ??\n      rootEl.value?.querySelector<HTMLInputElement>('.v-rating-item input')\n    )?.focus(options),\n  /** The `<fieldset>`, which also receives the consumer's attributes. */\n  el: rootEl,\n})\n</script>\n\n<template>\n  <VFieldset\n    ref=\"fieldset\"\n    class=\"v-rating v-tone\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :style=\"customColorStyle(color)\"\n    :data-size=\"size\"\n    :data-readonly=\"readonly ? '' : undefined\"\n    :data-invalid=\"isInvalid ? '' : undefined\"\n    :disabled=\"disabled\"\n    :aria-label=\"label ? undefined : m.rating.label\"\n    v-bind=\"attrs\"\n    :legend=\"label\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :hide-legend=\"hideLabel\"\n  >\n    <span v-if=\"readonly\" class=\"v-rating-items\" role=\"img\" :aria-label=\"valueText\">\n      <span\n        v-for=\"value in values\"\n        :key=\"value\"\n        class=\"v-rating-item\"\n        :style=\"{ '--rating-value': fill(value) }\"\n      >\n        <span class=\"v-rating-icon\">\n          <VIcon class=\"v-rating-empty\" v-bind=\"iconProps(icon)\" />\n          <VIcon class=\"v-rating-filled\" v-bind=\"iconProps(icon)\" filled />\n        </span>\n      </span>\n    </span>\n\n    <span v-else class=\"v-rating-items\">\n      <label v-if=\"clearable\" class=\"v-rating-clear\">\n        <input\n          type=\"radio\"\n          class=\"v-hidden-input\"\n          :name=\"groupName\"\n          value=\"\"\n          :checked=\"model === null\"\n          @change=\"model = null\"\n        />\n        <span class=\"v-visually-hidden\">{{ m.rating.empty }}</span>\n      </label>\n      <label\n        v-for=\"value in values\"\n        :key=\"value\"\n        class=\"v-rating-item\"\n        :style=\"{ '--rating-value': fill(value) }\"\n      >\n        <input\n          type=\"radio\"\n          class=\"v-hidden-input\"\n          :name=\"groupName\"\n          :value=\"value\"\n          :checked=\"model === value\"\n          :required=\"required\"\n          :aria-invalid=\"isInvalid ? 'true' : undefined\"\n          @change=\"model = value\"\n          @click=\"onClick(value, $event)\"\n        />\n        <span class=\"v-rating-icon\">\n          <VIcon class=\"v-rating-empty\" v-bind=\"iconProps(icon)\" />\n          <VIcon class=\"v-rating-filled\" v-bind=\"iconProps(icon)\" filled />\n        </span>\n        <span class=\"v-visually-hidden\">{{\n          m.rating.value(numberFormat.format(value), numberFormat.format(max))\n        }}</span>\n      </label>\n    </span>\n    <input v-if=\"readonly && name && model !== null\" type=\"hidden\" :name=\"name\" :value=\"model\" />\n  </VFieldset>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-rating[data-size='sm'] {\n    --vectis-icon-size: var(--vectis-control-size-rating-sm);\n  }\n\n  .v-rating[data-size='md'] {\n    --vectis-icon-size: var(--vectis-control-size-rating-md);\n  }\n\n  .v-rating[data-size='lg'] {\n    --vectis-icon-size: var(--vectis-control-size-rating-lg);\n  }\n\n  /* Positioned: it holds the hidden \"No rating\" radio, which has no box of its own. */\n  .v-rating-items {\n    position: relative;\n    display: inline-flex;\n    border-radius: var(--vectis-radius-interactive);\n  }\n\n  /* The padding widens the target around the icon: 24px at the smallest size. */\n  .v-rating-item {\n    --rating-shown: var(--rating-value);\n\n    position: relative;\n    display: inline-flex;\n    padding: calc(var(--vectis-space-1) / 2);\n  }\n\n  label.v-rating-item {\n    cursor: pointer;\n  }\n\n  /*\n   * Hovering previews the rating: the hovered icon and those before it fill, the others empty.\n   * The value is read from `--rating-value`, written inline, into `--rating-shown`, which these\n   * rules can override where the inline style could not be.\n   */\n  /* The emptying rule weighs (0,1,0) and the filling one (0,3,1), which wins where both match. */\n  :where(.v-rating:not(:disabled) .v-rating-items:has(label.v-rating-item:hover)) > .v-rating-item {\n    --rating-shown: 0;\n  }\n\n  :where(.v-rating:not(:disabled)) label.v-rating-item:is(:hover, :has(~ .v-rating-item:hover)) {\n    --rating-shown: 1;\n  }\n\n  .v-rating-icon {\n    display: inline-grid;\n    border-radius: var(--vectis-radius-xs);\n  }\n\n  .v-rating-icon > .v-icon {\n    grid-area: 1 / 1;\n  }\n\n  .v-rating-empty {\n    color: var(--vectis-color-border-strong);\n  }\n\n  /* The filled icon is clipped from the end, so a fraction fills the start of the icon. */\n  .v-rating-filled {\n    color: var(--tone-bg-solid);\n    clip-path: inset(0 calc((1 - var(--rating-shown)) * 100%) 0 0);\n  }\n\n  .v-rating-filled:dir(rtl) {\n    clip-path: inset(0 0 0 calc((1 - var(--rating-shown)) * 100%));\n  }\n\n  .v-rating-item .v-hidden-input:focus-visible + .v-rating-icon {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  /* \"No rating\" has no icon of its own: its focus rings the whole row. */\n  .v-rating-items:has(.v-rating-clear .v-hidden-input:focus-visible) {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-rating[data-invalid] .v-rating-empty {\n    color: var(--vectis-color-danger);\n  }\n\n  .v-rating:disabled .v-rating-empty {\n    color: var(--vectis-color-border);\n  }\n\n  .v-rating:disabled .v-rating-filled {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-rating:disabled label.v-rating-item {\n    cursor: not-allowed;\n  }\n\n  @media (forced-colors: active) {\n    .v-rating-filled {\n      color: Highlight;\n    }\n\n    .v-rating:disabled .v-rating-filled {\n      color: GrayText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VRating/VRating.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,158 @@
+import { useLocale as e, useMessages as t } from "../../i18n/state.js";
+import { iconProps as n } from "../VIcon/iconProps.js";
+import { customColorStyle as r } from "../../utils/css.js";
+import i from "../VIcon/VIcon.js";
+import { clamp as a } from "../../utils/number.js";
+import o from "../VFieldset/VFieldset.js";
+import { star as s } from "../VIcon/icons/star.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineComponent as h, mergeModels as g, mergeProps as _, normalizeStyle as v, openBlock as y, ref as b, renderList as x, toDisplayString as S, unref as C, useAttrs as w, useId as T, useModel as E, withCtx as D } from "vue";
+//#region src/components/VRating/VRating.vue?vue&type=script&setup=true&lang.ts
+var O = ["aria-label"], k = { class: "v-rating-icon" }, A = {
+	key: 1,
+	class: "v-rating-items"
+}, j = {
+	key: 0,
+	class: "v-rating-clear"
+}, M = ["name", "checked"], N = { class: "v-visually-hidden" }, P = [
+	"name",
+	"value",
+	"checked",
+	"required",
+	"aria-invalid",
+	"onChange",
+	"onClick"
+], F = { class: "v-rating-icon" }, I = { class: "v-visually-hidden" }, L = ["name", "value"], R = /*@__PURE__*/ h({
+	inheritAttrs: !1,
+	__name: "VRating",
+	props: /*@__PURE__*/ g({
+		max: { default: 5 },
+		label: { default: void 0 },
+		hideLabel: {
+			type: Boolean,
+			default: !1
+		},
+		hint: { default: void 0 },
+		error: { default: void 0 },
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		name: { default: void 0 },
+		clearable: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "md" },
+		tone: { default: "accent" },
+		color: { default: void 0 },
+		icon: { default: () => s }
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(s, { expose: h }) {
+		let g = s, R = E(s, "modelValue"), z = w(), B = t(), V = e(), H = l(() => g.invalid || !!g.error), U = T(), W = l(() => g.name ?? U), G = l(() => Array.from({ length: g.max }, (e, t) => t + 1)), K = l(() => new Intl.NumberFormat(V.value, { maximumFractionDigits: 1 })), q = l(() => B.value.rating.value(K.value.format(a(R.value ?? 0, 0, g.max)), K.value.format(g.max)));
+		function J(e) {
+			return a((R.value ?? 0) - (e - 1), 0, 1);
+		}
+		function Y(e, t) {
+			g.clearable && R.value === e && t.detail > 0 && (R.value = null);
+		}
+		let X = b(null), Z = l(() => X.value?.el ?? null);
+		return h({
+			focus: (e) => (Z.value?.querySelector(".v-rating-item input:checked") ?? Z.value?.querySelector(".v-rating-item input"))?.focus(e),
+			el: Z
+		}), (e, t) => (y(), u(o, _({
+			ref_key: "fieldset",
+			ref: X,
+			class: "v-rating v-tone",
+			"data-tone": s.tone,
+			"data-custom": s.color === void 0 ? void 0 : "",
+			style: C(r)(s.color),
+			"data-size": s.size,
+			"data-readonly": s.readonly ? "" : void 0,
+			"data-invalid": H.value ? "" : void 0,
+			disabled: s.disabled,
+			"aria-label": s.label ? void 0 : C(B).rating.label
+		}, C(z), {
+			legend: s.label,
+			hint: s.hint,
+			error: s.error,
+			required: s.required,
+			"hide-legend": s.hideLabel
+		}), {
+			default: D(() => [s.readonly ? (y(), f("span", {
+				key: 0,
+				class: "v-rating-items",
+				role: "img",
+				"aria-label": q.value
+			}, [(y(!0), f(c, null, x(G.value, (e) => (y(), f("span", {
+				key: e,
+				class: "v-rating-item",
+				style: v({ "--rating-value": J(e) })
+			}, [p("span", k, [m(i, _({ class: "v-rating-empty" }, { ref_for: !0 }, C(n)(s.icon)), null, 16), m(i, _({ class: "v-rating-filled" }, { ref_for: !0 }, C(n)(s.icon), { filled: "" }), null, 16)])], 4))), 128))], 8, O)) : (y(), f("span", A, [s.clearable ? (y(), f("label", j, [p("input", {
+				type: "radio",
+				class: "v-hidden-input",
+				name: W.value,
+				value: "",
+				checked: R.value === null,
+				onChange: t[0] ||= (e) => R.value = null
+			}, null, 40, M), p("span", N, S(C(B).rating.empty), 1)])) : d("", !0), (y(!0), f(c, null, x(G.value, (e) => (y(), f("label", {
+				key: e,
+				class: "v-rating-item",
+				style: v({ "--rating-value": J(e) })
+			}, [
+				p("input", {
+					type: "radio",
+					class: "v-hidden-input",
+					name: W.value,
+					value: e,
+					checked: R.value === e,
+					required: s.required,
+					"aria-invalid": H.value ? "true" : void 0,
+					onChange: (t) => R.value = e,
+					onClick: (t) => Y(e, t)
+				}, null, 40, P),
+				p("span", F, [m(i, _({ class: "v-rating-empty" }, { ref_for: !0 }, C(n)(s.icon)), null, 16), m(i, _({ class: "v-rating-filled" }, { ref_for: !0 }, C(n)(s.icon), { filled: "" }), null, 16)]),
+				p("span", I, S(C(B).rating.value(K.value.format(e), K.value.format(s.max))), 1)
+			], 4))), 128))])), s.readonly && s.name && R.value !== null ? (y(), f("input", {
+				key: 2,
+				type: "hidden",
+				name: s.name,
+				value: R.value
+			}, null, 8, L)) : d("", !0)]),
+			_: 1
+		}, 16, [
+			"data-tone",
+			"data-custom",
+			"style",
+			"data-size",
+			"data-readonly",
+			"data-invalid",
+			"disabled",
+			"aria-label",
+			"legend",
+			"hint",
+			"error",
+			"required",
+			"hide-legend"
+		]));
+	}
+});
+//#endregion
+export { R as default };
+
+//# sourceMappingURL=VRating.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VRating.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VRating/VRating.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * A rating chosen among native radios, one per icon, grouped in a `<fieldset>`: the browser\n * provides the arrow keys, form submission and `required`. Read-only, the icons become one image\n * whose name says the value, which may then be fractional.\n */\nimport { computed, ref, useAttrs, useId } from 'vue'\n\nimport VFieldset from '../VFieldset/VFieldset.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { star as starIcon } from '../VIcon/icons/star'\nimport type { IconSource } from '../VIcon/types'\nimport { useLocale, useMessages } from '../../i18n/state'\nimport { customColorStyle } from '../../utils/css'\nimport { clamp } from '../../utils/number'\n\n/** The size of the icons: 20, 24 or 32 pixels. */\nexport type RatingSize = 'sm' | 'md' | 'lg'\n\n/** The colour of the filled icons. */\nexport type RatingTone = 'accent' | 'warning' | 'danger' | 'success' | 'neutral'\n\ninterface RatingProps {\n  /** How many icons, and the highest value. */\n  max?: number\n  /**\n   * The name of the group, shown as its legend. Without it, the group is named from the design\n   * system dictionary.\n   */\n  label?: string\n  /** Hides the label visually. It still names the group for assistive technology. */\n  hideLabel?: boolean\n  /** A line of help under the icons, read along with the group's name. */\n  hint?: string\n  /**\n   * A message saying what is wrong, shown in place of the hint and read along with the group's\n   * name. It is announced when it appears or changes.\n   */\n  error?: string\n  /**\n   * Marks the rating as invalid, which colours the icons and tells assistive technology so. It\n   * is for a rule the browser cannot check by itself.\n   */\n  invalid?: boolean\n  /** Requires a rating before the form is sent. An asterisk follows the label. */\n  required?: boolean\n  /** The name the value is sent under in a form. */\n  name?: string\n  /**\n   * Lets the rating go back to none: clicking the current value again clears it, and a \"No\n   * rating\" choice comes first for the keyboard.\n   */\n  clearable?: boolean\n  /**\n   * Shows the value without letting it change. The icons become a single image, and a fractional\n   * value fills part of an icon.\n   */\n  readonly?: boolean\n  /** Makes the rating unusable. */\n  disabled?: boolean\n  /** The size of the icons. */\n  size?: RatingSize\n  /** The colour of the filled icons. */\n  tone?: RatingTone\n  /**\n   * A colour of your own for the filled icons (hex, CSS name or `oklch()`), which replaces the\n   * tone. Its contrast with the background is yours to check.\n   */\n  color?: string\n  /**\n   * The icon: an icon name, or an explicit render. An empty one is drawn in outline and a filled\n   * one with the icon's filled form.\n   */\n  icon?: IconSource\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 props = withDefaults(defineProps<RatingProps>(), {\n  max: 5,\n  label: undefined,\n  hideLabel: false,\n  hint: undefined,\n  error: undefined,\n  invalid: false,\n  required: false,\n  name: undefined,\n  clearable: false,\n  readonly: false,\n  disabled: false,\n  size: 'md',\n  tone: 'accent',\n  color: undefined,\n  icon: () => starIcon,\n})\n\n/** The rating, from 1 to `max`, or `null` when there is none. Read-only, it may be fractional. */\nconst model = defineModel<number | null>({ default: null })\n\nconst attrs = useAttrs()\nconst m = useMessages()\nconst locale = useLocale()\n\nconst isInvalid = computed(() => props.invalid || !!props.error)\n\n// Radios group by name, so the group needs one even when the form does not.\nconst uid = useId()\nconst groupName = computed(() => props.name ?? uid)\n\nconst values = computed(() => Array.from({ length: props.max }, (_, index) => index + 1))\n\nconst numberFormat = computed(\n  () => new Intl.NumberFormat(locale.value, { maximumFractionDigits: 1 }),\n)\n\nconst valueText = computed(() =>\n  m.value.rating.value(\n    numberFormat.value.format(clamp(model.value ?? 0, 0, props.max)),\n    numberFormat.value.format(props.max),\n  ),\n)\n\n/** How much of the icon for `value` is filled, from 0 to 1. */\nfunction fill(value: number): number {\n  return clamp((model.value ?? 0) - (value - 1), 0, 1)\n}\n\n// @core\n// A click on the checked radio fires no change; it clears instead. Only a pointer click does:\n// the keyboard reaches \"No rating\" with the arrows, and Space must not undo a choice.\nfunction onClick(value: number, event: MouseEvent) {\n  if (props.clearable && model.value === value && event.detail > 0) model.value = null\n}\n\nconst fieldset = ref<InstanceType<typeof VFieldset> | null>(null)\nconst rootEl = computed(() => fieldset.value?.el ?? null)\n\ndefineExpose({\n  /** Moves the focus to the checked radio, or to the first icon when there is no rating. */\n  focus: (options?: FocusOptions) =>\n    (\n      rootEl.value?.querySelector<HTMLInputElement>('.v-rating-item input:checked') ??\n      rootEl.value?.querySelector<HTMLInputElement>('.v-rating-item input')\n    )?.focus(options),\n  /** The `<fieldset>`, which also receives the consumer's attributes. */\n  el: rootEl,\n})\n</script>\n\n<template>\n  <VFieldset\n    ref=\"fieldset\"\n    class=\"v-rating v-tone\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :style=\"customColorStyle(color)\"\n    :data-size=\"size\"\n    :data-readonly=\"readonly ? '' : undefined\"\n    :data-invalid=\"isInvalid ? '' : undefined\"\n    :disabled=\"disabled\"\n    :aria-label=\"label ? undefined : m.rating.label\"\n    v-bind=\"attrs\"\n    :legend=\"label\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :hide-legend=\"hideLabel\"\n  >\n    <span v-if=\"readonly\" class=\"v-rating-items\" role=\"img\" :aria-label=\"valueText\">\n      <span\n        v-for=\"value in values\"\n        :key=\"value\"\n        class=\"v-rating-item\"\n        :style=\"{ '--rating-value': fill(value) }\"\n      >\n        <span class=\"v-rating-icon\">\n          <VIcon class=\"v-rating-empty\" v-bind=\"iconProps(icon)\" />\n          <VIcon class=\"v-rating-filled\" v-bind=\"iconProps(icon)\" filled />\n        </span>\n      </span>\n    </span>\n\n    <span v-else class=\"v-rating-items\">\n      <label v-if=\"clearable\" class=\"v-rating-clear\">\n        <input\n          type=\"radio\"\n          class=\"v-hidden-input\"\n          :name=\"groupName\"\n          value=\"\"\n          :checked=\"model === null\"\n          @change=\"model = null\"\n        />\n        <span class=\"v-visually-hidden\">{{ m.rating.empty }}</span>\n      </label>\n      <label\n        v-for=\"value in values\"\n        :key=\"value\"\n        class=\"v-rating-item\"\n        :style=\"{ '--rating-value': fill(value) }\"\n      >\n        <input\n          type=\"radio\"\n          class=\"v-hidden-input\"\n          :name=\"groupName\"\n          :value=\"value\"\n          :checked=\"model === value\"\n          :required=\"required\"\n          :aria-invalid=\"isInvalid ? 'true' : undefined\"\n          @change=\"model = value\"\n          @click=\"onClick(value, $event)\"\n        />\n        <span class=\"v-rating-icon\">\n          <VIcon class=\"v-rating-empty\" v-bind=\"iconProps(icon)\" />\n          <VIcon class=\"v-rating-filled\" v-bind=\"iconProps(icon)\" filled />\n        </span>\n        <span class=\"v-visually-hidden\">{{\n          m.rating.value(numberFormat.format(value), numberFormat.format(max))\n        }}</span>\n      </label>\n    </span>\n    <input v-if=\"readonly && name && model !== null\" type=\"hidden\" :name=\"name\" :value=\"model\" />\n  </VFieldset>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-rating[data-size='sm'] {\n    --vectis-icon-size: var(--vectis-control-size-rating-sm);\n  }\n\n  .v-rating[data-size='md'] {\n    --vectis-icon-size: var(--vectis-control-size-rating-md);\n  }\n\n  .v-rating[data-size='lg'] {\n    --vectis-icon-size: var(--vectis-control-size-rating-lg);\n  }\n\n  /* Positioned: it holds the hidden \"No rating\" radio, which has no box of its own. */\n  .v-rating-items {\n    position: relative;\n    display: inline-flex;\n    border-radius: var(--vectis-radius-interactive);\n  }\n\n  /* The padding widens the target around the icon: 24px at the smallest size. */\n  .v-rating-item {\n    --rating-shown: var(--rating-value);\n\n    position: relative;\n    display: inline-flex;\n    padding: calc(var(--vectis-space-1) / 2);\n  }\n\n  label.v-rating-item {\n    cursor: pointer;\n  }\n\n  /*\n   * Hovering previews the rating: the hovered icon and those before it fill, the others empty.\n   * The value is read from `--rating-value`, written inline, into `--rating-shown`, which these\n   * rules can override where the inline style could not be.\n   */\n  /* The emptying rule weighs (0,1,0) and the filling one (0,3,1), which wins where both match. */\n  :where(.v-rating:not(:disabled) .v-rating-items:has(label.v-rating-item:hover)) > .v-rating-item {\n    --rating-shown: 0;\n  }\n\n  :where(.v-rating:not(:disabled)) label.v-rating-item:is(:hover, :has(~ .v-rating-item:hover)) {\n    --rating-shown: 1;\n  }\n\n  .v-rating-icon {\n    display: inline-grid;\n    border-radius: var(--vectis-radius-xs);\n  }\n\n  .v-rating-icon > .v-icon {\n    grid-area: 1 / 1;\n  }\n\n  .v-rating-empty {\n    color: var(--vectis-color-border-strong);\n  }\n\n  /* The filled icon is clipped from the end, so a fraction fills the start of the icon. */\n  .v-rating-filled {\n    color: var(--tone-bg-solid);\n    clip-path: inset(0 calc((1 - var(--rating-shown)) * 100%) 0 0);\n  }\n\n  .v-rating-filled:dir(rtl) {\n    clip-path: inset(0 0 0 calc((1 - var(--rating-shown)) * 100%));\n  }\n\n  .v-rating-item .v-hidden-input:focus-visible + .v-rating-icon {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  /* \"No rating\" has no icon of its own: its focus rings the whole row. */\n  .v-rating-items:has(.v-rating-clear .v-hidden-input:focus-visible) {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-rating[data-invalid] .v-rating-empty {\n    color: var(--vectis-color-danger);\n  }\n\n  .v-rating:disabled .v-rating-empty {\n    color: var(--vectis-color-border);\n  }\n\n  .v-rating:disabled .v-rating-filled {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-rating:disabled label.v-rating-item {\n    cursor: not-allowed;\n  }\n\n  @media (forced-colors: active) {\n    .v-rating-filled {\n      color: Highlight;\n    }\n\n    .v-rating:disabled .v-rating-filled {\n      color: GrayText;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VResizable/VResizable.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-resizable{--resizable-hit:var(--vectis-control-size-resizable-hit);display:flex}.v-resizable[data-orientation=vertical]{flex-direction:column}.v-resizable[data-dragging]{-webkit-user-select:none;user-select:none}.v-resizable-handle{z-index:1;border:0 solid var(--vectis-color-border);touch-action:none;transition:border-color var(--vectis-duration-fast) var(--vectis-ease-default), box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);flex:none;justify-content:center;align-items:center;display:flex;position:relative}.v-resizable-handle:before{content:"";position:absolute}.v-resizable[data-orientation=horizontal]>.v-resizable-handle{cursor:col-resize;border-inline-start-width:1px;inline-size:0}.v-resizable[data-orientation=horizontal]>.v-resizable-handle:before{inset-block:0;inset-inline:calc(var(--resizable-hit) / -2)}.v-resizable[data-orientation=vertical]>.v-resizable-handle{cursor:row-resize;border-block-start-width:1px;block-size:0}.v-resizable[data-orientation=vertical]>.v-resizable-handle:before{inset-inline:0;inset-block:calc(var(--resizable-hit) / -2)}.v-resizable[data-dragging][data-orientation=horizontal]{cursor:col-resize}.v-resizable[data-dragging][data-orientation=vertical]{cursor:row-resize}.v-resizable-handle:is(:hover,[data-active]):not([aria-disabled]){border-color:var(--vectis-color-accent);box-shadow:0 0 0 1px var(--vectis-color-accent)}.v-resizable-handle:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-resizable-grip{border-radius:var(--vectis-radius-pill);background:var(--vectis-color-border-strong);transition:background-color var(--vectis-duration-fast) var(--vectis-ease-default);border:1px solid #0000;flex:none}.v-resizable[data-orientation=horizontal]>.v-resizable-handle>.v-resizable-grip{inline-size:var(--vectis-control-size-resizable-grip-thickness);block-size:var(--vectis-control-size-resizable-grip-length)}.v-resizable[data-orientation=vertical]>.v-resizable-handle>.v-resizable-grip{inline-size:var(--vectis-control-size-resizable-grip-length);block-size:var(--vectis-control-size-resizable-grip-thickness)}.v-resizable-handle:is(:hover,[data-active]):not([aria-disabled]) .v-resizable-grip{background:var(--vectis-color-accent)}.v-resizable-handle[aria-disabled]{cursor:default}.v-resizable-handle[aria-disabled] .v-resizable-grip{background:var(--vectis-color-border)}@media (forced-colors:active){.v-resizable-handle:is(:hover,[data-active]):not([aria-disabled]){border-color:highlight}}@media (prefers-reduced-motion:reduce){.v-resizable-handle,.v-resizable-grip{transition:none}}}

package/dist/components/VResizable/VResizable.d.ts

@@ -0,0 +1,50 @@
+/** Which way the panels are laid out: side by side, or stacked. */
+export type ResizableOrientation = 'horizontal' | 'vertical';
+/** A panel limit: a number in percent of the group, or a CSS length such as `240px`. */
+export type ResizableLength = number | string;
+interface ResizableProps {
+    /**
+     * `horizontal` puts the panels side by side, following the direction of the text; `vertical`
+     * stacks them, and the group then needs a height.
+     */
+    orientation?: ResizableOrientation;
+    /** Fixes the sizes: the handles can neither be dragged nor focused. */
+    disabled?: boolean;
+    /** Draws a grip in the middle of every handle, which makes it easier to find. */
+    grip?: boolean;
+    /** How far an arrow key moves a handle, in percent of the group. */
+    step?: number;
+}
+type __VLS_Props = ResizableProps;
+type __VLS_Slots = {
+    /** The `<VResizablePanel>`s, two or more. A handle is placed between each pair. */
+    default(): unknown;
+};
+type __VLS_ModelProps = {
+    /**
+     * The size of each panel, in percent of the space they share, adding up to 100. Left unbound,
+     * the panels start from their `defaultSize`.
+     */
+    modelValue?: number[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (sizes: number[]) => any;
+    "update:modelValue": (value: number[] | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((sizes: number[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number[] | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    orientation: ResizableOrientation;
+    grip: boolean;
+    step: number;
+}, {}, {}, {}, 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/VResizable/VResizable.js

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

package/dist/components/VResizable/VResizable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VResizable.js","names":[],"sources":["../../../src/components/VResizable/VResizable.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * No native element resizes siblings, so each handle follows the APG window splitter: a focusable\n * `separator` carrying the size of its primary panel, moved with the arrow keys or dragged under\n * pointer capture. Sizes are percentages rendered as `flex-grow` weights, which needs no\n * measurement on the server.\n */\n\nimport {\n  cloneVNode,\n  computed,\n  onMounted,\n  provide,\n  ref,\n  shallowReactive,\n  shallowRef,\n  useId,\n  watchEffect,\n  type FunctionalComponent,\n  type VNode,\n} from 'vue'\n\nimport { useSlotNodes } from '../../composables/useSlotNodes'\nimport { useMessages } from '../../i18n/state'\nimport { isRtl } from '../../utils/direction'\nimport { isDev } from '../../utils/env'\nimport { clamp } from '../../utils/number'\nimport { resizableKey, type ResizablePanelEntry } from './context'\nimport { defaultSizes, isCollapsedAt, resizeAt, type PanelLimits } from './layout'\nimport VResizablePanel from './VResizablePanel.vue'\n\n/** Which way the panels are laid out: side by side, or stacked. */\nexport type ResizableOrientation = 'horizontal' | 'vertical'\n\n/** A panel limit: a number in percent of the group, or a CSS length such as `240px`. */\nexport type ResizableLength = number | string\n\ninterface ResizableProps {\n  /**\n   * `horizontal` puts the panels side by side, following the direction of the text; `vertical`\n   * stacks them, and the group then needs a height.\n   */\n  orientation?: ResizableOrientation\n  /** Fixes the sizes: the handles can neither be dragged nor focused. */\n  disabled?: boolean\n  /** Draws a grip in the middle of every handle, which makes it easier to find. */\n  grip?: boolean\n  /** How far an arrow key moves a handle, in percent of the group. */\n  step?: number\n}\n\nconst props = withDefaults(defineProps<ResizableProps>(), {\n  orientation: 'horizontal',\n  disabled: false,\n  grip: false,\n  step: 5,\n})\n\n/**\n * The size of each panel, in percent of the space they share, adding up to 100. Left unbound,\n * the panels start from their `defaultSize`.\n */\nconst model = defineModel<number[]>()\n\nconst emit = defineEmits<{\n  /**\n   * The sizes have settled: a handle was released, moved with a key, or a panel collapsed or\n   * reopened. Save them here rather than on every `update:modelValue` of a drag.\n   */\n  change: [sizes: number[]]\n}>()\n\ndefineSlots<{\n  /** The `<VResizablePanel>`s, two or more. A handle is placed between each pair. */\n  default(): unknown\n}>()\n\nconst m = useMessages()\nconst baseId = useId()\nconst rootEl = ref<HTMLElement | null>(null)\nconst horizontal = computed(() => props.orientation === 'horizontal')\n\n// @ssr\n/*\n * The panels are read from the slot's VNodes, never from a registry fed at mount, which would\n * render no handle on the server. Cloning gives each panel its position and the id its handle\n * points at (the VCarousel idiom).\n */\nconst nodes = useSlotNodes()\nconst panels = computed(() => nodes.value.filter((node) => node.type === VResizablePanel))\n\nconst nodeProp = (node: VNode, camel: string, kebab: string): unknown =>\n  node.props?.[camel] ?? node.props?.[kebab]\n\nconst panelId = (node: VNode, index: number) =>\n  (node.props?.id as string | undefined) ?? `${baseId}-panel-${index}`\n\nconst defaults = computed(() =>\n  defaultSizes(\n    panels.value.map((node) => {\n      const size = nodeProp(node, 'defaultSize', 'default-size')\n      return size === undefined || size === null ? undefined : Number(size)\n    }),\n  ),\n)\n\nconst sizes = computed(() =>\n  model.value?.length === panels.value.length ? model.value : defaults.value,\n)\n\nconst entries = shallowReactive(new Map<string, ResizablePanelEntry>())\nconst entryAt = (index: number) => {\n  for (const entry of entries.values()) if (entry.index === index) return entry\n  return undefined\n}\n\n/** Restored when a collapsed panel reopens: its size when it collapsed, by panel. */\nconst restoreSizes = new WeakMap<ResizablePanelEntry, number>()\n\n// @core\n/*\n * CSS lengths are converted at each interaction, against the space the panels share at that\n * moment. The pixels are cached so that the ARIA values can be derived reactively.\n */\nconst space = ref(0)\nconst pixels = shallowReactive(new Map<string, number>())\n\nconst lengthKey = (length: string) => `${props.orientation}:${length}`\n\nfunction percentOf(length: ResizableLength | undefined): number | undefined {\n  if (length === undefined) return undefined\n  if (typeof length === 'number') return length\n  if (length.trim().endsWith('%')) return Number.parseFloat(length)\n  const px = pixels.get(lengthKey(length))\n  return px === undefined || !space.value ? undefined : (px / space.value) * 100\n}\n\nconst limits = computed<PanelLimits[]>(() =>\n  panels.value.map((_, index) => {\n    const entry = entryAt(index)\n    const min = clamp(percentOf(entry?.minSize) ?? 0, 0, 100)\n    return {\n      min,\n      max: clamp(percentOf(entry?.maxSize) ?? 100, min, 100),\n      collapsible: !!entry?.collapsible,\n      collapsedSize: clamp(percentOf(entry?.collapsedSize) ?? 0, 0, min),\n    }\n  }),\n)\n\n/**\n * The sizes as laid out: a collapsed panel keeps its collapsed size, and the others share the\n * rest in proportion to their weights, as `flex-grow` distributes it. `before` gives one panel\n * back the collapsed state it had before its model changed.\n */\nfunction layoutOf(before?: { index: number; collapsed: boolean }) {\n  const fixed = sizes.value.map((_, i) =>\n    (i === before?.index ? before.collapsed : entryAt(i)?.collapsed)\n      ? limits.value[i]!.collapsedSize\n      : undefined,\n  )\n  const fixedTotal = fixed.reduce<number>((sum, size) => sum + (size ?? 0), 0)\n  const weights = sizes.value.reduce((sum, size, i) => sum + (fixed[i] === undefined ? size : 0), 0)\n  return sizes.value.map(\n    (size, i) => fixed[i] ?? (weights ? (size / weights) * (100 - fixedTotal) : 0),\n  )\n}\n\nconst layout = computed(() => layoutOf())\n\nfunction lengthInPixels(root: HTMLElement, length: string): number {\n  const probe = document.createElement('div')\n  probe.style.position = 'absolute'\n  probe.style.visibility = 'hidden'\n  probe.style.setProperty(horizontal.value ? 'width' : 'height', length)\n  root.append(probe)\n  const rect = probe.getBoundingClientRect()\n  probe.remove()\n  return horizontal.value ? rect.width : rect.height\n}\n\n/**\n * Measures the panels as they are drawn, which accounts for CSS limits that the weights alone do\n * not show, and refreshes the converted lengths. It falls back to the computed layout when\n * nothing can be measured.\n */\nfunction measure(before?: { index: number; collapsed: boolean }): number[] {\n  const root = rootEl.value\n  const rects = panels.value.map((_, i) => entryAt(i)?.el?.getBoundingClientRect())\n  const extents = rects.map((rect) => (rect ? (horizontal.value ? rect.width : rect.height) : 0))\n  const total = extents.reduce((sum, extent) => sum + extent, 0)\n  if (!root || !total || rects.some((rect) => !rect)) return layoutOf(before)\n  for (const entry of entries.values())\n    for (const length of [entry.minSize, entry.maxSize, entry.collapsedSize])\n      if (typeof length === 'string' && !length.trim().endsWith('%'))\n        pixels.set(lengthKey(length), lengthInPixels(root, length))\n  space.value = total\n  const laidOut = layoutOf(before)\n  // Within two pixels, the difference is the 1px lines shrunk off the panels: the computed sizes\n  // are kept, so the model does not fill with measurement noise. Beyond, CSS limits are at work.\n  const drawn = extents.every((extent, i) => Math.abs(extent - (laidOut[i]! * total) / 100) < 2)\n  return drawn ? laidOut : extents.map((extent) => (extent / total) * 100)\n}\n\nonMounted(measure)\n\nconst sameSizes = (a: readonly number[], b: readonly number[]) =>\n  a.length === b.length && a.every((size, i) => Math.abs(size - b[i]!) < 0.01)\n\n/** Writes new sizes and the collapsed state they imply, remembering what collapsing panels had. */\nfunction apply(next: number[], base: readonly number[]) {\n  if (!sameSizes(next, sizes.value)) model.value = next\n  next.forEach((size, i) => {\n    const entry = entryAt(i)\n    const lim = limits.value[i]!\n    if (!entry || !lim.collapsible) return\n    const now = isCollapsedAt(size, lim)\n    if (now && !isCollapsedAt(base[i]!, lim)) restoreSizes.set(entry, base[i]!)\n    entry.setCollapsed(now)\n  })\n}\n\nfunction commit(next: number[], base: readonly number[]) {\n  apply(next, base)\n  if (!sameSizes(next, base)) emit('change', next)\n}\n\n/**\n * The size a reopened panel returns to: the one it had when it collapsed, or its starting size,\n * within its limits.\n */\nfunction reopenSize(index: number) {\n  const entry = entryAt(index)\n  const lim = limits.value[index]!\n  const remembered = entry && restoreSizes.get(entry)\n  return clamp(remembered ?? defaults.value[index]!, lim.min, lim.max)\n}\n\n/** Collapses or reopens a panel through the handle after it, or before it for the last one. */\nfunction sizesWithCollapsed(index: number, collapse: boolean, base: readonly number[]) {\n  const lim = limits.value[index]!\n  const growth = (collapse ? lim.collapsedSize : reopenSize(index)) - base[index]!\n  return index < base.length - 1\n    ? resizeAt(base, index, growth, limits.value, 1)\n    : resizeAt(base, index - 1, -growth, limits.value, 1)\n}\n\n/**\n * The panel a handle reports on and collapses: the one before it, unless only the one after it\n * can collapse, as for a sidebar on the end side.\n */\nfunction primaryOf(handle: number) {\n  const before = limits.value[handle]\n  const after = limits.value[handle + 1]\n  return !before?.collapsible && after?.collapsible ? handle + 1 : handle\n}\n\nprovide(resizableKey, {\n  get orientation() {\n    return props.orientation\n  },\n  sizeAt: (index) => sizes.value[index] ?? 1,\n  register: (id, entry) => entries.set(id, entry),\n  unregister: (id) => entries.delete(id),\n  // Called from the panel's pre-flush watcher: the DOM still shows the panel as it was.\n  toggle(index, collapse) {\n    const base = measure({ index, collapsed: !collapse })\n    const lim = limits.value[index]\n    if (!lim || isCollapsedAt(base[index]!, lim) === collapse) return\n    commit(sizesWithCollapsed(index, collapse, base), base)\n  },\n})\n\n// @keyboard\n/*\n * The arrows that run along the group move its handles, following the direction of the text.\n * Home and End give the primary panel its smallest and largest size, and Enter collapses or\n * reopens it, as the APG window splitter describes.\n */\nfunction onKeydown(handle: number, event: KeyboardEvent) {\n  if (props.disabled) return\n  const base = measure()\n  const primary = primaryOf(handle)\n  const lim = limits.value[primary]!\n  // Positive when the primary panel grows, negative when it shrinks.\n  const primarySign = primary === handle ? 1 : -1\n  const rtl = horizontal.value && isRtl(rootEl.value)\n  const back = horizontal.value ? (rtl ? 'ArrowRight' : 'ArrowLeft') : 'ArrowUp'\n  const forth = horizontal.value ? (rtl ? 'ArrowLeft' : 'ArrowRight') : 'ArrowDown'\n  let next: number[]\n  if (event.key === back) next = resizeAt(base, handle, -props.step, limits.value, 1)\n  else if (event.key === forth) next = resizeAt(base, handle, props.step, limits.value, 1)\n  else if (event.key === 'Home') {\n    const lowest = lim.collapsible ? lim.collapsedSize : lim.min\n    next = resizeAt(base, handle, (lowest - base[primary]!) * primarySign, limits.value, 1)\n  } else if (event.key === 'End')\n    next = resizeAt(base, handle, (lim.max - base[primary]!) * primarySign, limits.value, 1)\n  else if (event.key === 'Enter' && lim.collapsible)\n    next = sizesWithCollapsed(primary, !isCollapsedAt(base[primary]!, lim), base)\n  else return\n  event.preventDefault()\n  commit(next, base)\n}\n\ninterface Drag {\n  handle: number\n  pointerId: number\n  origin: number\n  base: number[]\n  sign: number\n  last: number[]\n}\n\nconst drag = shallowRef<Drag | null>(null)\n\nconst coordinate = (event: PointerEvent) => (horizontal.value ? event.clientX : event.clientY)\n\nfunction onPointerdown(handle: number, event: PointerEvent) {\n  // A second pointer pressed during a drag is ignored, which leaves one finger in charge.\n  if (props.disabled || event.button !== 0 || drag.value) return\n  const el = event.currentTarget as HTMLElement\n  const base = measure()\n  if (!space.value) return\n  // Prevented so that no text gets selected; the focus a press would give is given back.\n  event.preventDefault()\n  el.focus({ preventScroll: true })\n  // @fallback\n  // Synthetic pointer events have no pointer to capture; the drag then follows the handle only.\n  try {\n    el.setPointerCapture(event.pointerId)\n  } catch {\n    /* Synthetic pointers cannot be captured. */\n  }\n  drag.value = {\n    handle,\n    pointerId: event.pointerId,\n    origin: coordinate(event),\n    base,\n    sign: horizontal.value && isRtl(rootEl.value) ? -1 : 1,\n    last: base,\n  }\n}\n\nfunction onPointermove(event: PointerEvent) {\n  const state = drag.value\n  if (!state || state.pointerId !== event.pointerId) return\n  const delta = ((coordinate(event) - state.origin) / space.value) * 100 * state.sign\n  state.last = resizeAt(state.base, state.handle, delta, limits.value)\n  apply(state.last, state.base)\n}\n\nfunction onPointerEnd(event: PointerEvent) {\n  const state = drag.value\n  if (!state || state.pointerId !== event.pointerId) return\n  drag.value = null\n  if (!sameSizes(state.last, state.base)) emit('change', state.last)\n}\n\nconst handles = computed(() =>\n  panels.value.slice(1).map((_, handle) => {\n    const primary = primaryOf(handle)\n    const node = panels.value[primary]!\n    const lim = limits.value[primary]!\n    return {\n      controls: panelId(node, primary),\n      label:\n        (nodeProp(node, 'label', 'label') as string | undefined) ??\n        m.value.resizable.panel(primary + 1),\n      now: Math.round(layout.value[primary] ?? 0),\n      min: Math.round(lim.collapsible ? lim.collapsedSize : lim.min),\n      max: Math.round(lim.max),\n    }\n  }),\n)\n\n/** Renders a captured panel VNode, which `<component :is>` cannot do. */\nconst PanelNode: FunctionalComponent<{ node: VNode; index: number }> = ({ node, index }) =>\n  cloneVNode(node, { index, id: panelId(node, index) })\n\n// @devwarn\nif (isDev) {\n  watchEffect(() => {\n    if (nodes.value.length !== panels.value.length)\n      console.warn('[VResizable] Only VResizablePanel children are rendered.')\n    if (model.value && model.value.length !== panels.value.length)\n      console.warn(\n        `[VResizable] The v-model holds ${model.value.length} sizes for ${panels.value.length} panels; the default sizes are used.`,\n      )\n  })\n}\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-resizable\"\n    :data-orientation=\"orientation\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-dragging=\"drag ? '' : undefined\"\n  >\n    <template v-for=\"(node, index) in panels\" :key=\"node.key ?? index\">\n      <!--\n        A horizontal group is divided by vertical lines. `aria-orientation` is only written when\n        it differs from the separator's implicit horizontal, as on VSeparator.\n      -->\n      <div\n        v-if=\"index > 0\"\n        class=\"v-resizable-handle\"\n        role=\"separator\"\n        :tabindex=\"disabled ? undefined : 0\"\n        :aria-orientation=\"horizontal ? 'vertical' : undefined\"\n        :aria-label=\"handles[index - 1]!.label\"\n        :aria-controls=\"handles[index - 1]!.controls\"\n        :aria-valuenow=\"handles[index - 1]!.now\"\n        :aria-valuemin=\"handles[index - 1]!.min\"\n        :aria-valuemax=\"handles[index - 1]!.max\"\n        :aria-disabled=\"disabled || undefined\"\n        :data-active=\"drag?.handle === index - 1 ? '' : undefined\"\n        @keydown=\"onKeydown(index - 1, $event)\"\n        @pointerdown=\"onPointerdown(index - 1, $event)\"\n        @pointermove=\"onPointermove\"\n        @pointerup=\"onPointerEnd\"\n        @pointercancel=\"onPointerEnd\"\n        @lostpointercapture=\"onPointerEnd\"\n      >\n        <span v-if=\"grip\" class=\"v-resizable-grip\" aria-hidden=\"true\" />\n      </div>\n      <PanelNode :node=\"node\" :index=\"index\" />\n    </template>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-resizable {\n    --resizable-hit: var(--vectis-control-size-resizable-hit);\n    display: flex;\n  }\n\n  .v-resizable[data-orientation='vertical'] {\n    flex-direction: column;\n  }\n\n  .v-resizable[data-dragging] {\n    user-select: none;\n  }\n\n  .v-resizable-handle {\n    position: relative;\n    z-index: 1;\n    flex: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 0 solid var(--vectis-color-border);\n    touch-action: none;\n    transition:\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /* The strip that catches the pointer, wider than the 1px line it is centred on. */\n  .v-resizable-handle::before {\n    content: '';\n    position: absolute;\n  }\n\n  /* The content box stays empty so the line is exactly 1px: the grip overflows it, centred. */\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-handle {\n    inline-size: 0;\n    border-inline-start-width: 1px;\n    cursor: col-resize;\n  }\n\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-handle::before {\n    inset-block: 0;\n    inset-inline: calc(var(--resizable-hit) / -2);\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-handle {\n    block-size: 0;\n    border-block-start-width: 1px;\n    cursor: row-resize;\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-handle::before {\n    inset-inline: 0;\n    inset-block: calc(var(--resizable-hit) / -2);\n  }\n\n  .v-resizable[data-dragging][data-orientation='horizontal'] {\n    cursor: col-resize;\n  }\n\n  .v-resizable[data-dragging][data-orientation='vertical'] {\n    cursor: row-resize;\n  }\n\n  .v-resizable-handle:is(:hover, [data-active]):not([aria-disabled]) {\n    border-color: var(--vectis-color-accent);\n    box-shadow: 0 0 0 1px var(--vectis-color-accent);\n  }\n\n  .v-resizable-handle:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-resizable-grip {\n    flex: none;\n    border: 1px solid transparent;\n    border-radius: var(--vectis-radius-pill);\n    background: var(--vectis-color-border-strong);\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-handle > .v-resizable-grip {\n    inline-size: var(--vectis-control-size-resizable-grip-thickness);\n    block-size: var(--vectis-control-size-resizable-grip-length);\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-handle > .v-resizable-grip {\n    inline-size: var(--vectis-control-size-resizable-grip-length);\n    block-size: var(--vectis-control-size-resizable-grip-thickness);\n  }\n\n  .v-resizable-handle:is(:hover, [data-active]):not([aria-disabled]) .v-resizable-grip {\n    background: var(--vectis-color-accent);\n  }\n\n  .v-resizable-handle[aria-disabled] {\n    cursor: default;\n  }\n\n  .v-resizable-handle[aria-disabled] .v-resizable-grip {\n    background: var(--vectis-color-border);\n  }\n\n  @media (forced-colors: active) {\n    .v-resizable-handle:is(:hover, [data-active]):not([aria-disabled]) {\n      border-color: Highlight;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-resizable-handle,\n    .v-resizable-grip {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}