vectis-ui 0.1.0 → 0.8.0

package/dist/components/VCheckbox/VCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"VCheckbox.js","names":[],"sources":["../../../src/components/VCheckbox/VCheckbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watchEffect } from 'vue'\n\n/**\n * A checkbox whose square is drawn by the design system rather than by the browser.\n *\n * The trick is that the real `<input type=\"checkbox\">` is still there: it is only\n * made invisible, never removed. It therefore keeps everything a checkbox is owed —\n * it takes focus, answers the keyboard, is submitted with the form and turns invalid\n * on its own — and the drawn square merely follows its state through CSS.\n *\n * The only JavaScript besides the v-model is the indeterminate state, that third\n * \"partially checked\" look: it exists solely as a DOM property, with no HTML\n * attribute to set it from a template.\n */\ninterface CheckboxProps {\n  /**\n   * Shows the box as partially checked, a dash instead of a tick. This is what a\n   * parent checkbox looks like when some of its children are ticked and others are\n   * not; it is a state of its own, not a value the v-model can hold.\n   */\n  indeterminate?: boolean\n  /** Which side of the box the label sits on. */\n  labelPosition?: 'start' | 'end'\n  /**\n   * Pushes the label and the box to opposite ends of the line, the row taking the\n   * full width available. This is the usual shape for a list of settings.\n   */\n  spread?: boolean\n  /**\n   * Marks the field as invalid, which colours the box and tells assistive technology\n   * so. Use it for a rule the browser cannot check by itself; native validity is\n   * already handled without it.\n   */\n  invalid?: boolean\n  /** Makes the checkbox unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<CheckboxProps>(), {\n  indeterminate: false,\n  labelPosition: 'end',\n  spread: false,\n  invalid: false,\n  disabled: false,\n})\n\n// @a11y\n// The root element is the <label>, so the attributes the consumer passes must be\n// redirected: `name`, `value`, `required` and the aria-* belong on the input, and\n// left on the label they would take part in neither the form nor the accessibility\n// tree.\ndefineOptions({ inheritAttrs: false })\n\nconst model = defineModel<boolean>({ default: false })\n\ndefineSlots<{\n  /** The label. It is clickable, the whole component being wrapped in a `<label>`. */\n  default?(): unknown\n}>()\n\nconst inputEl = ref<HTMLInputElement | null>(null)\n\n// @ssr @core\n// On the server there is no element, so the effect simply does nothing. The\n// `flush: 'post'` is load-bearing: it makes the effect run AFTER the DOM has been\n// updated, and on the very first pass the template ref is not filled in before\n// that — in the default timing the property would be written to nothing at all.\nwatchEffect(\n  () => {\n    if (inputEl.value) inputEl.value.indeterminate = props.indeterminate\n  },\n  { flush: 'post' },\n)\n</script>\n\n<template>\n  <label class=\"v-checkbox\" :data-label-position=\"labelPosition\" :data-spread=\"spread || undefined\">\n    <input\n      ref=\"inputEl\"\n      v-model=\"model\"\n      type=\"checkbox\"\n      class=\"v-checkbox-input\"\n      v-bind=\"$attrs\"\n      :disabled=\"disabled\"\n      :aria-invalid=\"invalid || undefined\"\n    />\n    <span class=\"v-checkbox-box\" aria-hidden=\"true\">\n      <svg class=\"v-checkbox-mark\" viewBox=\"0 0 12 12\">\n        <path\n          class=\"v-checkbox-mark-check\"\n          d=\"M2.5 6.5l2.5 2.5 4.5-5.5\"\n          fill=\"none\"\n          stroke=\"currentcolor\"\n          stroke-width=\"1.75\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          class=\"v-checkbox-mark-dash\"\n          d=\"M3 6h6\"\n          fill=\"none\"\n          stroke=\"currentcolor\"\n          stroke-width=\"1.75\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </span>\n    <span v-if=\"$slots.default\" class=\"v-checkbox-label\"><slot /></span>\n  </label>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-checkbox {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-2);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-label-size);\n    color: var(--vectis-color-text);\n    cursor: pointer;\n  }\n\n  /* The input is taken out of the flow by its absolute position, so reversing the\n     row only ever swaps the box and the label. */\n  .v-checkbox[data-label-position='start'] {\n    flex-direction: row-reverse;\n  }\n\n  .v-checkbox[data-spread] {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  /* Hidden with `opacity` and never with `display: none`, which would take the input\n     out of the tab order and out of the form. It stays focusable and submitted; only\n     the browser's own drawing of it disappears. */\n  .v-checkbox-input {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  .v-checkbox-box {\n    display: inline-grid;\n    place-items: center;\n    width: var(--vectis-control-size-check);\n    height: var(--vectis-control-size-check);\n    flex: none;\n    background: var(--vectis-color-surface);\n    border: var(--vectis-control-border-width) solid var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-sm);\n    color: var(--vectis-color-text-on-accent);\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-checkbox-mark {\n    width: var(--vectis-control-size-check-mark);\n    height: var(--vectis-control-size-check-mark);\n  }\n\n  .v-checkbox-mark-check,\n  .v-checkbox-mark-dash {\n    opacity: 0;\n    transition: opacity var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-checkbox:hover .v-checkbox-input:not(:disabled, :checked, :indeterminate) + .v-checkbox-box {\n    border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  .v-checkbox-input:checked + .v-checkbox-box,\n  .v-checkbox-input:indeterminate + .v-checkbox-box {\n    background: var(--vectis-color-accent);\n    border-color: var(--vectis-color-accent);\n  }\n\n  .v-checkbox:hover\n    .v-checkbox-input:not(:disabled):is(:checked, :indeterminate)\n    + .v-checkbox-box {\n    background: var(--vectis-color-accent-hover);\n    border-color: var(--vectis-color-accent-hover);\n  }\n\n  .v-checkbox-input:checked + .v-checkbox-box .v-checkbox-mark-check {\n    opacity: 1;\n  }\n\n  .v-checkbox-input:indeterminate + .v-checkbox-box .v-checkbox-mark-check {\n    opacity: 0;\n  }\n\n  .v-checkbox-input:indeterminate + .v-checkbox-box .v-checkbox-mark-dash {\n    opacity: 1;\n  }\n\n  .v-checkbox-input:focus-visible + .v-checkbox-box {\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-checkbox-input:user-invalid + .v-checkbox-box,\n  .v-checkbox-input[aria-invalid='true'] + .v-checkbox-box {\n    border-color: var(--vectis-color-danger);\n  }\n\n  /* A disabled checkbox greys out through the colour tokens, the same ones VButton\n     uses, and never through opacity. */\n  .v-checkbox:has(.v-checkbox-input:disabled) {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  .v-checkbox-input:disabled + .v-checkbox-box {\n    background: var(--vectis-color-surface-muted);\n    border-color: var(--vectis-color-border);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-checkbox-box,\n    .v-checkbox-mark-check,\n    .v-checkbox-mark-dash {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VCheckbox.js","names":[],"sources":["../../../src/components/VCheckbox/VCheckbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * A checkbox whose square is drawn by the library rather than by the browser.\n *\n * The real `<input type=\"checkbox\">` is still there, hidden with `opacity: 0` and never\n * removed, so it keeps everything a checkbox is owed — focus, keyboard, form submission,\n * native validity — and the drawn square follows its state in CSS.\n *\n * The root is a container rather than the `<label>` itself, because the hint must sit\n * OUTSIDE the label: whatever a label holds becomes the control's accessible name.\n *\n * Two pieces of JS besides the v-model. `indeterminate`, the third \"partially checked\" look,\n * exists solely as a DOM property with no HTML attribute to set it from a template. And\n * `readonly` has no native meaning on a checkbox, so refusing the change is ours to do.\n */\n\nimport { ref, watchEffect } from 'vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\n/** Which side of the box the label sits on. */\nexport type CheckboxLabelPosition = 'start' | 'end'\n\ninterface CheckboxProps {\n  /** The text beside the box, which names it. The default slot replaces it. */\n  label?: string\n  /**\n   * A line of help under the label. It is tied to the checkbox for assistive technology,\n   * so it is read out after the label rather than as part of it.\n   */\n  hint?: string\n  /**\n   * Shows the box as partially checked, a dash instead of a tick. This is what a\n   * parent checkbox looks like when some of its children are ticked and others are\n   * not; it is a state of its own, not a value the v-model can hold.\n   */\n  indeterminate?: boolean\n  /** Which side of the box the label sits on. */\n  labelPosition?: CheckboxLabelPosition\n  /**\n   * Pushes the label and the box to opposite ends of the line, the row taking the\n   * full width available. This is the usual shape for a list of settings.\n   */\n  spread?: boolean\n  /**\n   * Marks the field as invalid, which colours the box and tells assistive technology\n   * so. Use it for a rule the browser cannot check by itself; native validity is\n   * already handled without it.\n   */\n  invalid?: boolean\n  /** Makes the checkbox unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the state without allowing it to be changed. The checkbox can still be\n   * focused, is announced as read-only and is still submitted with its form; a click\n   * or the Space key simply changes nothing.\n   */\n  readonly?: boolean\n}\n\nconst props = withDefaults(defineProps<CheckboxProps>(), {\n  label: undefined,\n  hint: undefined,\n  indeterminate: false,\n  labelPosition: 'end',\n  spread: false,\n  invalid: false,\n  disabled: false,\n  readonly: false,\n})\n\n// @a11y\n// The root element is a layout box, so the attributes the consumer passes must be\n// redirected: `name`, `value`, `required` and the aria-* belong on the input, and left on\n// the wrapper they would take part in neither the form nor the accessibility tree.\ndefineOptions({ inheritAttrs: false })\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\nconst { hintId, describedBy } = useFieldIds(attrs, () => !!props.hint)\n\n/**\n * Whether the box is ticked. It starts unticked, and `indeterminate` is a separate prop —\n * the dash is a third appearance, never a third value of this one.\n */\nconst model = defineModel<boolean>({ default: false })\n\ndefineSlots<{\n  /** The label, when it needs more than the `label` prop's text. It is clickable. */\n  default?(): unknown\n}>()\n\nconst inputEl = ref<HTMLInputElement | null>(null)\n\n// @ssr @core\n// On the server there is no element, so the effect simply does nothing. The\n// `flush: 'post'` is load-bearing: it makes the effect run AFTER the DOM has been\n// updated, and on the very first pass the template ref is not filled in before\n// that — in the default timing the property would be written to nothing at all.\nwatchEffect(\n  () => {\n    if (inputEl.value) inputEl.value.indeterminate = props.indeterminate\n  },\n  { flush: 'post' },\n)\n\n// @core\n// The native `readonly` attribute does nothing on a checkbox. Cancelling the click is what\n// refuses the change: the browser then puts `checked` AND `indeterminate` back as they were\n// and fires no `change`, so the v-model never hears of it. It covers the Space key, which a\n// checkbox turns into a click, and a click on the label, which is forwarded to the input.\nfunction refuseWhenReadonly(event: MouseEvent) {\n  if (props.readonly) event.preventDefault()\n}\n\n// The root is a wrapper, so a template ref on the component reaches the layout box and not\n// the control: these two are the way to the real checkbox.\ndefineExpose({\n  /** Moves the focus to the real checkbox. */\n  focus: (options?: FocusOptions) => inputEl.value?.focus(options),\n  /** The real `<input type=\"checkbox\">`, for what `focus` does not cover. */\n  el: inputEl,\n})\n</script>\n\n<template>\n  <span\n    class=\"v-checkbox v-choice\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-label-position=\"labelPosition\"\n    :data-spread=\"spread ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n  >\n    <label class=\"v-choice-row\">\n      <!-- `aria-describedby` comes AFTER the forwarded attributes, which is what lets the\n           aggregated list, the consumer's references plus the hint, replace theirs. -->\n      <input\n        ref=\"inputEl\"\n        v-model=\"model\"\n        type=\"checkbox\"\n        class=\"v-checkbox-input v-hidden-input\"\n        v-bind=\"forwardedAttrs\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"invalid || undefined\"\n        :aria-readonly=\"readonly || undefined\"\n        :aria-describedby=\"describedBy\"\n        @click=\"refuseWhenReadonly\"\n      />\n      <span class=\"v-checkbox-box\" aria-hidden=\"true\">\n        <svg class=\"v-checkbox-mark\" viewBox=\"0 0 12 12\">\n          <path\n            class=\"v-checkbox-mark-check\"\n            d=\"M2.5 6.5l2.5 2.5 4.5-5.5\"\n            fill=\"none\"\n            stroke=\"currentcolor\"\n            stroke-width=\"1.75\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            class=\"v-checkbox-mark-dash\"\n            d=\"M3 6h6\"\n            fill=\"none\"\n            stroke=\"currentcolor\"\n            stroke-width=\"1.75\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n      </span>\n      <span v-if=\"$slots.default || label\" class=\"v-checkbox-label v-choice-label\">\n        <slot>{{ label }}</slot>\n      </span>\n    </label>\n    <span v-if=\"hint\" :id=\"hintId\" class=\"v-checkbox-hint v-choice-hint\">{{ hint }}</span>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The corner follows the control radius, capped at a QUARTER of the box rather than at\n     the half a row takes. A pill override on --vectis-radius-interactive would otherwise\n     turn the box into a disc, and a round checkbox reads as a radio. */\n  .v-checkbox-box {\n    display: inline-grid;\n    place-items: center;\n    width: var(--vectis-control-size-check);\n    height: var(--vectis-control-size-check);\n    background: transparent;\n    border: var(--vectis-control-border-width) solid var(--vectis-color-border-strong);\n    border-radius: min(\n      var(--vectis-radius-interactive),\n      calc(var(--vectis-control-size-check) / 4)\n    );\n    color: var(--vectis-color-text-on-accent);\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-checkbox-mark {\n    width: var(--vectis-control-size-check-mark);\n    height: var(--vectis-control-size-check-mark);\n  }\n\n  .v-checkbox-mark-check,\n  .v-checkbox-mark-dash {\n    opacity: 0;\n    transition: opacity var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /* The state painting, rule for rule the same as VRadio's with its own classes: keep the\n     two ALIGNED. Every state below but the hovers weighs (0,3,0), so their ORDER arbitrates\n     them: checked, read-only, invalid, then disabled last. The two hovers exclude every state\n     they must not repaint, so no order argument reaches them. */\n  .v-checkbox:not([data-readonly])\n    .v-choice-row:hover\n    .v-checkbox-input:not(:disabled, :checked, :indeterminate)\n    + .v-checkbox-box {\n    border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  .v-checkbox-input:is(:checked, :indeterminate) + .v-checkbox-box {\n    background: var(--vectis-color-accent);\n    border-color: var(--vectis-color-accent);\n  }\n\n  .v-checkbox:not([data-readonly])\n    .v-choice-row:hover\n    .v-checkbox-input:not(:disabled):is(:checked, :indeterminate)\n    + .v-checkbox-box {\n    background: var(--vectis-color-accent-hover);\n    border-color: var(--vectis-color-accent-hover);\n  }\n\n  /* Read-only sinks like a read-only field, and a selected control trades the accent for the\n     muted text colour: still plainly on, no longer inviting a click. The mark takes the\n     surface colour, which contrasts with that fill in both themes, where white would vanish\n     against the light grey of the dark theme. `:where()` keeps both rules at the weight of\n     the states they sit between. */\n  :where(.v-checkbox[data-readonly]) .v-checkbox-input + .v-checkbox-box {\n    background: var(--vectis-color-surface-sunken);\n    border-color: var(--vectis-color-border);\n  }\n\n  :where(.v-checkbox[data-readonly])\n    .v-checkbox-input:is(:checked, :indeterminate)\n    + .v-checkbox-box {\n    background: var(--vectis-color-text-muted);\n    border-color: var(--vectis-color-text-muted);\n    color: var(--vectis-color-surface);\n  }\n\n  .v-checkbox-input:user-invalid + .v-checkbox-box,\n  .v-checkbox-input[aria-invalid='true'] + .v-checkbox-box {\n    border-color: var(--vectis-color-danger);\n  }\n\n  .v-checkbox-input:disabled + .v-checkbox-box {\n    background: var(--vectis-color-surface-muted);\n    border-color: var(--vectis-color-border);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /*\n     TRAP — the two rules below are (0,4,0) and `checked` and `indeterminate` are\n     INDEPENDENT DOM properties, so a box can be both at once. Nothing but the source\n     order decides what such a box shows: the second rule hides the tick and the dash\n     wins. Swap them, or slip a rule between them, and a checked-and-indeterminate box\n     shows the tick with nothing in the console to say why — and this component is the\n     one that sets `indeterminate` by hand, so it is the one that can reach that state. */\n  .v-checkbox-input:checked + .v-checkbox-box .v-checkbox-mark-check {\n    opacity: 1;\n  }\n\n  .v-checkbox-input:indeterminate + .v-checkbox-box .v-checkbox-mark-check {\n    opacity: 0;\n  }\n\n  .v-checkbox-input:indeterminate + .v-checkbox-box .v-checkbox-mark-dash {\n    opacity: 1;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-checkbox-box,\n    .v-checkbox-mark-check,\n    .v-checkbox-mark-dash {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VCheckbox/VCheckbox.vue_vue_type_script_setup_true_lang.js

@@ -1,12 +1,25 @@
-import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, defineComponent as r, mergeModels as i, mergeProps as a, openBlock as o, ref as s, renderSlot as c, useModel as l, vModelCheckbox as u, watchEffect as d, withDirectives as f } from "vue";
+import { useRootAttrs as e } from "../../composables/useRootAttrs.js";
+import { useFieldIds as t } from "../../composables/useFieldIds.js";
+import { createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, mergeModels as s, mergeProps as c, normalizeClass as l, normalizeStyle as u, openBlock as d, ref as f, renderSlot as p, toDisplayString as m, unref as h, useModel as g, vModelCheckbox as _, watchEffect as v, withDirectives as y } from "vue";
 //#region src/components/VCheckbox/VCheckbox.vue?vue&type=script&setup=true&lang.ts
-var p = ["data-label-position", "data-spread"], m = ["disabled", "aria-invalid"], h = {
+var b = [
+	"data-label-position",
+	"data-spread",
+	"data-readonly"
+], x = { class: "v-choice-row" }, S = [
+	"disabled",
+	"aria-invalid",
+	"aria-readonly",
+	"aria-describedby"
+], C = {
 	key: 0,
-	class: "v-checkbox-label"
-}, g = /*@__PURE__*/ r({
+	class: "v-checkbox-label v-choice-label"
+}, w = ["id"], T = /*@__PURE__*/ o({
 	inheritAttrs: !1,
 	__name: "VCheckbox",
-	props: /*@__PURE__*/ i({
+	props: /*@__PURE__*/ s({
+		label: { default: void 0 },
+		hint: { default: void 0 },
 		indeterminate: {
 			type: Boolean,
 			default: !1
@@ -23,6 +36,10 @@ var p = ["data-label-position", "data-spread"], m = ["disabled", "aria-invalid"]
 		disabled: {
 			type: Boolean,
 			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
 		}
 	}, {
 		modelValue: {
@@ -32,32 +49,44 @@ var p = ["data-label-position", "data-spread"], m = ["disabled", "aria-invalid"]
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(r) {
-		let i = r, g = l(r, "modelValue"), _ = s(null);
-		return d(() => {
-			_.value && (_.value.indeterminate = i.indeterminate);
-		}, { flush: "post" }), (i, s) => (o(), t("label", {
-			class: "v-checkbox",
-			"data-label-position": r.labelPosition,
-			"data-spread": r.spread || void 0
-		}, [
-			f(n("input", a({
+	setup(o, { expose: s }) {
+		let T = o, { attrs: E, rootClass: D, rootStyle: O, forwardedAttrs: k } = e(), { hintId: A, describedBy: j } = t(E, () => !!T.hint), M = g(o, "modelValue"), N = f(null);
+		v(() => {
+			N.value && (N.value.indeterminate = T.indeterminate);
+		}, { flush: "post" });
+		function P(e) {
+			T.readonly && e.preventDefault();
+		}
+		return s({
+			focus: (e) => N.value?.focus(e),
+			el: N
+		}), (e, t) => (d(), r("span", {
+			class: l(["v-checkbox v-choice", h(D)]),
+			style: u(h(O)),
+			"data-label-position": o.labelPosition,
+			"data-spread": o.spread ? "" : void 0,
+			"data-readonly": o.readonly ? "" : void 0
+		}, [i("label", x, [
+			y(i("input", c({
 				ref_key: "inputEl",
-				ref: _,
-				"onUpdate:modelValue": s[0] ||= (e) => g.value = e,
+				ref: N,
+				"onUpdate:modelValue": t[0] ||= (e) => M.value = e,
 				type: "checkbox",
-				class: "v-checkbox-input"
-			}, i.$attrs, {
-				disabled: r.disabled,
-				"aria-invalid": r.invalid || void 0
-			}), null, 16, m), [[u, g.value]]),
-			s[1] ||= n("span", {
+				class: "v-checkbox-input v-hidden-input"
+			}, h(k), {
+				disabled: o.disabled,
+				"aria-invalid": o.invalid || void 0,
+				"aria-readonly": o.readonly || void 0,
+				"aria-describedby": h(j),
+				onClick: P
+			}), null, 16, S), [[_, M.value]]),
+			t[1] ||= i("span", {
 				class: "v-checkbox-box",
 				"aria-hidden": "true"
-			}, [n("svg", {
+			}, [i("svg", {
 				class: "v-checkbox-mark",
 				viewBox: "0 0 12 12"
-			}, [n("path", {
+			}, [i("path", {
 				class: "v-checkbox-mark-check",
 				d: "M2.5 6.5l2.5 2.5 4.5-5.5",
 				fill: "none",
@@ -65,7 +94,7 @@ var p = ["data-label-position", "data-spread"], m = ["disabled", "aria-invalid"]
 				"stroke-width": "1.75",
 				"stroke-linecap": "round",
 				"stroke-linejoin": "round"
-			}), n("path", {
+			}), i("path", {
 				class: "v-checkbox-mark-dash",
 				d: "M3 6h6",
 				fill: "none",
@@ -73,11 +102,15 @@ var p = ["data-label-position", "data-spread"], m = ["disabled", "aria-invalid"]
 				"stroke-width": "1.75",
 				"stroke-linecap": "round"
 			})])], -1),
-			i.$slots.default ? (o(), t("span", h, [c(i.$slots, "default")])) : e("", !0)
-		], 8, p));
+			e.$slots.default || o.label ? (d(), r("span", C, [p(e.$slots, "default", {}, () => [a(m(o.label), 1)])])) : n("", !0)
+		]), o.hint ? (d(), r("span", {
+			key: 0,
+			id: h(A),
+			class: "v-checkbox-hint v-choice-hint"
+		}, m(o.hint), 9, w)) : n("", !0)], 14, b));
 	}
 });
 //#endregion
-export { g as default };
+export { T as default };
 
 //# sourceMappingURL=VCheckbox.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"VCheckbox.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../src/components/VCheckbox/VCheckbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watchEffect } from 'vue'\n\n/**\n * A checkbox whose square is drawn by the design system rather than by the browser.\n *\n * The trick is that the real `<input type=\"checkbox\">` is still there: it is only\n * made invisible, never removed. It therefore keeps everything a checkbox is owed —\n * it takes focus, answers the keyboard, is submitted with the form and turns invalid\n * on its own — and the drawn square merely follows its state through CSS.\n *\n * The only JavaScript besides the v-model is the indeterminate state, that third\n * \"partially checked\" look: it exists solely as a DOM property, with no HTML\n * attribute to set it from a template.\n */\ninterface CheckboxProps {\n  /**\n   * Shows the box as partially checked, a dash instead of a tick. This is what a\n   * parent checkbox looks like when some of its children are ticked and others are\n   * not; it is a state of its own, not a value the v-model can hold.\n   */\n  indeterminate?: boolean\n  /** Which side of the box the label sits on. */\n  labelPosition?: 'start' | 'end'\n  /**\n   * Pushes the label and the box to opposite ends of the line, the row taking the\n   * full width available. This is the usual shape for a list of settings.\n   */\n  spread?: boolean\n  /**\n   * Marks the field as invalid, which colours the box and tells assistive technology\n   * so. Use it for a rule the browser cannot check by itself; native validity is\n   * already handled without it.\n   */\n  invalid?: boolean\n  /** Makes the checkbox unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<CheckboxProps>(), {\n  indeterminate: false,\n  labelPosition: 'end',\n  spread: false,\n  invalid: false,\n  disabled: false,\n})\n\n// @a11y\n// The root element is the <label>, so the attributes the consumer passes must be\n// redirected: `name`, `value`, `required` and the aria-* belong on the input, and\n// left on the label they would take part in neither the form nor the accessibility\n// tree.\ndefineOptions({ inheritAttrs: false })\n\nconst model = defineModel<boolean>({ default: false })\n\ndefineSlots<{\n  /** The label. It is clickable, the whole component being wrapped in a `<label>`. */\n  default?(): unknown\n}>()\n\nconst inputEl = ref<HTMLInputElement | null>(null)\n\n// @ssr @core\n// On the server there is no element, so the effect simply does nothing. The\n// `flush: 'post'` is load-bearing: it makes the effect run AFTER the DOM has been\n// updated, and on the very first pass the template ref is not filled in before\n// that — in the default timing the property would be written to nothing at all.\nwatchEffect(\n  () => {\n    if (inputEl.value) inputEl.value.indeterminate = props.indeterminate\n  },\n  { flush: 'post' },\n)\n</script>\n\n<template>\n  <label class=\"v-checkbox\" :data-label-position=\"labelPosition\" :data-spread=\"spread || undefined\">\n    <input\n      ref=\"inputEl\"\n      v-model=\"model\"\n      type=\"checkbox\"\n      class=\"v-checkbox-input\"\n      v-bind=\"$attrs\"\n      :disabled=\"disabled\"\n      :aria-invalid=\"invalid || undefined\"\n    />\n    <span class=\"v-checkbox-box\" aria-hidden=\"true\">\n      <svg class=\"v-checkbox-mark\" viewBox=\"0 0 12 12\">\n        <path\n          class=\"v-checkbox-mark-check\"\n          d=\"M2.5 6.5l2.5 2.5 4.5-5.5\"\n          fill=\"none\"\n          stroke=\"currentcolor\"\n          stroke-width=\"1.75\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          class=\"v-checkbox-mark-dash\"\n          d=\"M3 6h6\"\n          fill=\"none\"\n          stroke=\"currentcolor\"\n          stroke-width=\"1.75\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </span>\n    <span v-if=\"$slots.default\" class=\"v-checkbox-label\"><slot /></span>\n  </label>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-checkbox {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-2);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-label-size);\n    color: var(--vectis-color-text);\n    cursor: pointer;\n  }\n\n  /* The input is taken out of the flow by its absolute position, so reversing the\n     row only ever swaps the box and the label. */\n  .v-checkbox[data-label-position='start'] {\n    flex-direction: row-reverse;\n  }\n\n  .v-checkbox[data-spread] {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  /* Hidden with `opacity` and never with `display: none`, which would take the input\n     out of the tab order and out of the form. It stays focusable and submitted; only\n     the browser's own drawing of it disappears. */\n  .v-checkbox-input {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  .v-checkbox-box {\n    display: inline-grid;\n    place-items: center;\n    width: var(--vectis-control-size-check);\n    height: var(--vectis-control-size-check);\n    flex: none;\n    background: var(--vectis-color-surface);\n    border: var(--vectis-control-border-width) solid var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-sm);\n    color: var(--vectis-color-text-on-accent);\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-checkbox-mark {\n    width: var(--vectis-control-size-check-mark);\n    height: var(--vectis-control-size-check-mark);\n  }\n\n  .v-checkbox-mark-check,\n  .v-checkbox-mark-dash {\n    opacity: 0;\n    transition: opacity var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-checkbox:hover .v-checkbox-input:not(:disabled, :checked, :indeterminate) + .v-checkbox-box {\n    border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  .v-checkbox-input:checked + .v-checkbox-box,\n  .v-checkbox-input:indeterminate + .v-checkbox-box {\n    background: var(--vectis-color-accent);\n    border-color: var(--vectis-color-accent);\n  }\n\n  .v-checkbox:hover\n    .v-checkbox-input:not(:disabled):is(:checked, :indeterminate)\n    + .v-checkbox-box {\n    background: var(--vectis-color-accent-hover);\n    border-color: var(--vectis-color-accent-hover);\n  }\n\n  .v-checkbox-input:checked + .v-checkbox-box .v-checkbox-mark-check {\n    opacity: 1;\n  }\n\n  .v-checkbox-input:indeterminate + .v-checkbox-box .v-checkbox-mark-check {\n    opacity: 0;\n  }\n\n  .v-checkbox-input:indeterminate + .v-checkbox-box .v-checkbox-mark-dash {\n    opacity: 1;\n  }\n\n  .v-checkbox-input:focus-visible + .v-checkbox-box {\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-checkbox-input:user-invalid + .v-checkbox-box,\n  .v-checkbox-input[aria-invalid='true'] + .v-checkbox-box {\n    border-color: var(--vectis-color-danger);\n  }\n\n  /* A disabled checkbox greys out through the colour tokens, the same ones VButton\n     uses, and never through opacity. */\n  .v-checkbox:has(.v-checkbox-input:disabled) {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  .v-checkbox-input:disabled + .v-checkbox-box {\n    background: var(--vectis-color-surface-muted);\n    border-color: var(--vectis-color-border);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-checkbox-box,\n    .v-checkbox-mark-check,\n    .v-checkbox-mark-dash {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCA,IAAM,IAAQ,GAeR,IAAQ,EAAoB,GAAA,YAAmB,GAO/C,IAAU,EAA6B,IAAI;SAOjD,QACQ;GACJ,AAAI,EAAQ,UAAO,EAAQ,MAAM,gBAAgB,EAAM;EACzD,GACA,EAAE,OAAO,OAAO,CAClB,mBAIE,EAgCQ,SAAA;GAhCD,OAAM;GAAc,uBAAqB,EAAA;GAAgB,eAAa,EAAA,UAAU,KAAA;;KACrF,EAQE,SARF,EAQE;aAPI;IAAJ,KAAI;6CACU,QAAA;IACd,MAAK;IACL,OAAM;MACEA,EAAAA,QAAM;IACb,UAAU,EAAA;IACV,gBAAc,EAAA,WAAW,KAAA;0BALjB,EAAA,KAAK,CAAA,CAAA;YAOhB,EAoBO,QAAA;IApBD,OAAM;IAAiB,eAAY;OACvC,EAkBM,OAAA;IAlBD,OAAM;IAAkB,SAAQ;OACnC,EAQE,QAAA;IAPA,OAAM;IACN,GAAE;IACF,MAAK;IACL,QAAO;IACP,gBAAa;IACb,kBAAe;IACf,mBAAgB;OAElB,EAOE,QAAA;IANA,OAAM;IACN,GAAE;IACF,MAAK;IACL,QAAO;IACP,gBAAa;IACb,kBAAe;;GAITC,EAAAA,OAAO,WAAA,EAAA,GAAnB,EAAoE,QAApE,GAAoE,CAAf,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}
+{"version":3,"file":"VCheckbox.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VCheckbox/VCheckbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * A checkbox whose square is drawn by the library rather than by the browser.\n *\n * The real `<input type=\"checkbox\">` is still there, hidden with `opacity: 0` and never\n * removed, so it keeps everything a checkbox is owed — focus, keyboard, form submission,\n * native validity — and the drawn square follows its state in CSS.\n *\n * The root is a container rather than the `<label>` itself, because the hint must sit\n * OUTSIDE the label: whatever a label holds becomes the control's accessible name.\n *\n * Two pieces of JS besides the v-model. `indeterminate`, the third \"partially checked\" look,\n * exists solely as a DOM property with no HTML attribute to set it from a template. And\n * `readonly` has no native meaning on a checkbox, so refusing the change is ours to do.\n */\n\nimport { ref, watchEffect } from 'vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\n/** Which side of the box the label sits on. */\nexport type CheckboxLabelPosition = 'start' | 'end'\n\ninterface CheckboxProps {\n  /** The text beside the box, which names it. The default slot replaces it. */\n  label?: string\n  /**\n   * A line of help under the label. It is tied to the checkbox for assistive technology,\n   * so it is read out after the label rather than as part of it.\n   */\n  hint?: string\n  /**\n   * Shows the box as partially checked, a dash instead of a tick. This is what a\n   * parent checkbox looks like when some of its children are ticked and others are\n   * not; it is a state of its own, not a value the v-model can hold.\n   */\n  indeterminate?: boolean\n  /** Which side of the box the label sits on. */\n  labelPosition?: CheckboxLabelPosition\n  /**\n   * Pushes the label and the box to opposite ends of the line, the row taking the\n   * full width available. This is the usual shape for a list of settings.\n   */\n  spread?: boolean\n  /**\n   * Marks the field as invalid, which colours the box and tells assistive technology\n   * so. Use it for a rule the browser cannot check by itself; native validity is\n   * already handled without it.\n   */\n  invalid?: boolean\n  /** Makes the checkbox unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the state without allowing it to be changed. The checkbox can still be\n   * focused, is announced as read-only and is still submitted with its form; a click\n   * or the Space key simply changes nothing.\n   */\n  readonly?: boolean\n}\n\nconst props = withDefaults(defineProps<CheckboxProps>(), {\n  label: undefined,\n  hint: undefined,\n  indeterminate: false,\n  labelPosition: 'end',\n  spread: false,\n  invalid: false,\n  disabled: false,\n  readonly: false,\n})\n\n// @a11y\n// The root element is a layout box, so the attributes the consumer passes must be\n// redirected: `name`, `value`, `required` and the aria-* belong on the input, and left on\n// the wrapper they would take part in neither the form nor the accessibility tree.\ndefineOptions({ inheritAttrs: false })\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\nconst { hintId, describedBy } = useFieldIds(attrs, () => !!props.hint)\n\n/**\n * Whether the box is ticked. It starts unticked, and `indeterminate` is a separate prop —\n * the dash is a third appearance, never a third value of this one.\n */\nconst model = defineModel<boolean>({ default: false })\n\ndefineSlots<{\n  /** The label, when it needs more than the `label` prop's text. It is clickable. */\n  default?(): unknown\n}>()\n\nconst inputEl = ref<HTMLInputElement | null>(null)\n\n// @ssr @core\n// On the server there is no element, so the effect simply does nothing. The\n// `flush: 'post'` is load-bearing: it makes the effect run AFTER the DOM has been\n// updated, and on the very first pass the template ref is not filled in before\n// that — in the default timing the property would be written to nothing at all.\nwatchEffect(\n  () => {\n    if (inputEl.value) inputEl.value.indeterminate = props.indeterminate\n  },\n  { flush: 'post' },\n)\n\n// @core\n// The native `readonly` attribute does nothing on a checkbox. Cancelling the click is what\n// refuses the change: the browser then puts `checked` AND `indeterminate` back as they were\n// and fires no `change`, so the v-model never hears of it. It covers the Space key, which a\n// checkbox turns into a click, and a click on the label, which is forwarded to the input.\nfunction refuseWhenReadonly(event: MouseEvent) {\n  if (props.readonly) event.preventDefault()\n}\n\n// The root is a wrapper, so a template ref on the component reaches the layout box and not\n// the control: these two are the way to the real checkbox.\ndefineExpose({\n  /** Moves the focus to the real checkbox. */\n  focus: (options?: FocusOptions) => inputEl.value?.focus(options),\n  /** The real `<input type=\"checkbox\">`, for what `focus` does not cover. */\n  el: inputEl,\n})\n</script>\n\n<template>\n  <span\n    class=\"v-checkbox v-choice\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-label-position=\"labelPosition\"\n    :data-spread=\"spread ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n  >\n    <label class=\"v-choice-row\">\n      <!-- `aria-describedby` comes AFTER the forwarded attributes, which is what lets the\n           aggregated list, the consumer's references plus the hint, replace theirs. -->\n      <input\n        ref=\"inputEl\"\n        v-model=\"model\"\n        type=\"checkbox\"\n        class=\"v-checkbox-input v-hidden-input\"\n        v-bind=\"forwardedAttrs\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"invalid || undefined\"\n        :aria-readonly=\"readonly || undefined\"\n        :aria-describedby=\"describedBy\"\n        @click=\"refuseWhenReadonly\"\n      />\n      <span class=\"v-checkbox-box\" aria-hidden=\"true\">\n        <svg class=\"v-checkbox-mark\" viewBox=\"0 0 12 12\">\n          <path\n            class=\"v-checkbox-mark-check\"\n            d=\"M2.5 6.5l2.5 2.5 4.5-5.5\"\n            fill=\"none\"\n            stroke=\"currentcolor\"\n            stroke-width=\"1.75\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            class=\"v-checkbox-mark-dash\"\n            d=\"M3 6h6\"\n            fill=\"none\"\n            stroke=\"currentcolor\"\n            stroke-width=\"1.75\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n      </span>\n      <span v-if=\"$slots.default || label\" class=\"v-checkbox-label v-choice-label\">\n        <slot>{{ label }}</slot>\n      </span>\n    </label>\n    <span v-if=\"hint\" :id=\"hintId\" class=\"v-checkbox-hint v-choice-hint\">{{ hint }}</span>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The corner follows the control radius, capped at a QUARTER of the box rather than at\n     the half a row takes. A pill override on --vectis-radius-interactive would otherwise\n     turn the box into a disc, and a round checkbox reads as a radio. */\n  .v-checkbox-box {\n    display: inline-grid;\n    place-items: center;\n    width: var(--vectis-control-size-check);\n    height: var(--vectis-control-size-check);\n    background: transparent;\n    border: var(--vectis-control-border-width) solid var(--vectis-color-border-strong);\n    border-radius: min(\n      var(--vectis-radius-interactive),\n      calc(var(--vectis-control-size-check) / 4)\n    );\n    color: var(--vectis-color-text-on-accent);\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-checkbox-mark {\n    width: var(--vectis-control-size-check-mark);\n    height: var(--vectis-control-size-check-mark);\n  }\n\n  .v-checkbox-mark-check,\n  .v-checkbox-mark-dash {\n    opacity: 0;\n    transition: opacity var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /* The state painting, rule for rule the same as VRadio's with its own classes: keep the\n     two ALIGNED. Every state below but the hovers weighs (0,3,0), so their ORDER arbitrates\n     them: checked, read-only, invalid, then disabled last. The two hovers exclude every state\n     they must not repaint, so no order argument reaches them. */\n  .v-checkbox:not([data-readonly])\n    .v-choice-row:hover\n    .v-checkbox-input:not(:disabled, :checked, :indeterminate)\n    + .v-checkbox-box {\n    border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  .v-checkbox-input:is(:checked, :indeterminate) + .v-checkbox-box {\n    background: var(--vectis-color-accent);\n    border-color: var(--vectis-color-accent);\n  }\n\n  .v-checkbox:not([data-readonly])\n    .v-choice-row:hover\n    .v-checkbox-input:not(:disabled):is(:checked, :indeterminate)\n    + .v-checkbox-box {\n    background: var(--vectis-color-accent-hover);\n    border-color: var(--vectis-color-accent-hover);\n  }\n\n  /* Read-only sinks like a read-only field, and a selected control trades the accent for the\n     muted text colour: still plainly on, no longer inviting a click. The mark takes the\n     surface colour, which contrasts with that fill in both themes, where white would vanish\n     against the light grey of the dark theme. `:where()` keeps both rules at the weight of\n     the states they sit between. */\n  :where(.v-checkbox[data-readonly]) .v-checkbox-input + .v-checkbox-box {\n    background: var(--vectis-color-surface-sunken);\n    border-color: var(--vectis-color-border);\n  }\n\n  :where(.v-checkbox[data-readonly])\n    .v-checkbox-input:is(:checked, :indeterminate)\n    + .v-checkbox-box {\n    background: var(--vectis-color-text-muted);\n    border-color: var(--vectis-color-text-muted);\n    color: var(--vectis-color-surface);\n  }\n\n  .v-checkbox-input:user-invalid + .v-checkbox-box,\n  .v-checkbox-input[aria-invalid='true'] + .v-checkbox-box {\n    border-color: var(--vectis-color-danger);\n  }\n\n  .v-checkbox-input:disabled + .v-checkbox-box {\n    background: var(--vectis-color-surface-muted);\n    border-color: var(--vectis-color-border);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /*\n     TRAP — the two rules below are (0,4,0) and `checked` and `indeterminate` are\n     INDEPENDENT DOM properties, so a box can be both at once. Nothing but the source\n     order decides what such a box shows: the second rule hides the tick and the dash\n     wins. Swap them, or slip a rule between them, and a checked-and-indeterminate box\n     shows the tick with nothing in the console to say why — and this component is the\n     one that sets `indeterminate` by hand, so it is the one that can reach that state. */\n  .v-checkbox-input:checked + .v-checkbox-box .v-checkbox-mark-check {\n    opacity: 1;\n  }\n\n  .v-checkbox-input:indeterminate + .v-checkbox-box .v-checkbox-mark-check {\n    opacity: 0;\n  }\n\n  .v-checkbox-input:indeterminate + .v-checkbox-box .v-checkbox-mark-dash {\n    opacity: 1;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-checkbox-box,\n    .v-checkbox-mark-check,\n    .v-checkbox-mark-dash {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6DA,IAAM,IAAQ,GAgBR,EAAE,UAAO,cAAW,cAAW,sBAAmB,EAAa,GAC/D,EAAE,WAAQ,mBAAgB,EAAY,SAAa,CAAC,CAAC,EAAM,IAAI,GAM/D,IAAQ,EAAoB,GAAA,YAAmB,GAO/C,IAAU,EAA6B,IAAI;EAOjD,QACQ;GACJ,AAAI,EAAQ,UAAO,EAAQ,MAAM,gBAAgB,EAAM;EACzD,GACA,EAAE,OAAO,OAAO,CAClB;EAOA,SAAS,EAAmB,GAAmB;GAC7C,AAAI,EAAM,YAAU,EAAM,eAAe;EAC3C;SAIA,EAAa;GAEX,QAAQ,MAA2B,EAAQ,OAAO,MAAM,CAAO;GAE/D,IAAI;EACN,CAAC,mBAIC,EAiDO,QAAA;GAhDL,OAAK,EAAA,CAAC,uBACE,EAAA,CAAA,CAAS,CAAA;GAChB,OAAK,EAAE,EAAA,CAAA,CAAS;GAChB,uBAAqB,EAAA;GACrB,eAAa,EAAA,SAAM,KAAQ,KAAA;GAC3B,iBAAe,EAAA,WAAQ,KAAQ,KAAA;MAEhC,EAuCQ,SAvCR,GAuCQ;KApCN,EAWE,SAXF,EAWE;aAVI;IAAJ,KAAI;6CACU,QAAA;IACd,MAAK;IACL,OAAM;MACE,EAAA,CAAA,GAAc;IACrB,UAAU,EAAA;IACV,gBAAc,EAAA,WAAW,KAAA;IACzB,iBAAe,EAAA,YAAY,KAAA;IAC3B,oBAAkB,EAAA,CAAA;IAClB,SAAO;0BARC,EAAA,KAAK,CAAA,CAAA;YAUhB,EAoBO,QAAA;IApBD,OAAM;IAAiB,eAAY;OACvC,EAkBM,OAAA;IAlBD,OAAM;IAAkB,SAAQ;OACnC,EAQE,QAAA;IAPA,OAAM;IACN,GAAE;IACF,MAAK;IACL,QAAO;IACP,gBAAa;IACb,kBAAe;IACf,mBAAgB;OAElB,EAOE,QAAA;IANA,OAAM;IACN,GAAE;IACF,MAAK;IACL,QAAO;IACP,gBAAa;IACb,kBAAe;;GAITA,EAAAA,OAAO,WAAW,EAAA,SAAA,EAAA,GAA9B,EAEO,QAFP,GAEO,CADL,EAAwB,EAAA,QAAA,WAAA,CAAA,SAAA,CAAA,EAAA,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;MAGN,EAAA,QAAA,EAAA,GAAZ,EAAsF,QAAA;;GAAnE,IAAI,EAAA,CAAA;GAAQ,OAAM;OAAmC,EAAA,IAAI,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,IAAA,CAAA"}

package/dist/components/VChip/VChip.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-chip{height:var(--control-height);border-radius:var(--vectis-radius-interactive);font-family:var(--vectis-text-family);font-size:var(--control-font-size);font-weight:var(--vectis-text-control-weight);line-height:var(--vectis-text-control-leading);transition:background-color var(--vectis-duration-fast) var(--vectis-ease-default), border-color var(--vectis-duration-fast) var(--vectis-ease-default), color var(--vectis-duration-fast) var(--vectis-ease-default);border:1px solid #0000;align-items:center;display:inline-flex}.v-chip[data-shape=pill]{border-radius:var(--vectis-radius-pill)}.v-chip[data-custom]{--tone-bg-solid:var(--custom-color);--tone-bg-solid-hover:color-mix(in oklab, var(--custom-color), var(--vectis-color-text) 8%);--tone-bg-solid-active:color-mix(in oklab, var(--custom-color), var(--vectis-color-text) 14%);--tone-text-solid:var(--vectis-color-text-on-accent);--tone-text-tinted:color-mix(in oklab, var(--custom-color), var(--vectis-color-text) 30%);--tone-bg-soft:color-mix(in oklab, var(--custom-color), var(--vectis-color-surface) 85%);--tone-border-soft:color-mix(in oklab, var(--custom-color), var(--vectis-color-surface) 60%)}.v-chip[data-variant=soft]{background:var(--tone-bg-soft);color:var(--tone-text-tinted)}.v-chip[data-variant=solid]{background:var(--tone-bg-solid);color:var(--tone-text-solid)}.v-chip[data-variant=outline]{color:var(--tone-text-tinted);border-color:var(--tone-border-soft);background:0 0}.v-chip[data-selected]{background:var(--tone-bg-solid);color:var(--tone-text-solid);border-color:#0000}.v-chip[data-variant=soft]:not([data-disabled],[data-selected]):has(:is(button,a).v-chip-action:hover){background:color-mix(in oklab, var(--tone-bg-soft), var(--tone-text-tinted) 8%)}.v-chip[data-variant=soft]:not([data-disabled],[data-selected]):has(:is(button,a).v-chip-action:active){background:color-mix(in oklab, var(--tone-bg-soft), var(--tone-text-tinted) 14%)}.v-chip[data-variant=outline]:not([data-disabled],[data-selected]):has(:is(button,a).v-chip-action:hover){background:var(--tone-bg-soft)}.v-chip[data-variant=outline]:not([data-disabled],[data-selected]):has(:is(button,a).v-chip-action:active){background:color-mix(in oklab, var(--tone-bg-soft), var(--tone-text-tinted) 8%)}.v-chip[data-variant=solid]:not([data-disabled]):has(:is(button,a).v-chip-action:hover),.v-chip[data-selected]:not([data-disabled]):has(:is(button,a).v-chip-action:hover){background:var(--tone-bg-solid-hover)}.v-chip[data-variant=solid]:not([data-disabled]):has(:is(button,a).v-chip-action:active),.v-chip[data-selected]:not([data-disabled]):has(:is(button,a).v-chip-action:active){background:var(--tone-bg-solid-active)}.v-chip-action{align-items:center;gap:var(--control-gap);height:100%;padding-block:0;padding-inline:var(--control-padding-inline);color:inherit;font:inherit;border-radius:inherit;cursor:default;background:0 0;border:none;text-decoration:none;display:inline-flex}.v-chip[data-icon-only] .v-chip-action{aspect-ratio:1;justify-content:center;padding-inline:0}:is(button,a).v-chip-action{cursor:pointer}:is(button,a).v-chip-action:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-chip-remove{width:var(--control-action-size);height:var(--control-action-size);margin-inline:calc(var(--vectis-space-1) * -1) var(--vectis-space-1);color:inherit;border-radius:var(--vectis-radius-full);cursor:pointer;background:0 0;border:none;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.v-chip-remove:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:calc(var(--vectis-focus-ring-offset) * -1)}.v-chip[data-disabled]{background:var(--vectis-color-surface-muted);color:var(--vectis-color-text-subtle);border-color:#0000}.v-chip[data-disabled][data-variant=outline]{border-color:var(--vectis-color-border);background:0 0}.v-chip[data-disabled] :is(:is(button,a).v-chip-action,.v-chip-remove){cursor:not-allowed}.v-chip[data-disabled] .v-chip-remove{color:inherit}@media (prefers-reduced-motion:reduce){.v-chip,.v-chip-remove{transition:none}}}
+@layer vectis.components{.v-chip{height:var(--control-height);border-radius:var(--vectis-radius-chip);font-family:var(--vectis-text-family);font-size:var(--control-font-size);font-weight:var(--vectis-text-control-weight);line-height:var(--vectis-text-control-leading);transition:background-color var(--vectis-duration-fast) var(--vectis-ease-default), border-color var(--vectis-duration-fast) var(--vectis-ease-default), color var(--vectis-duration-fast) var(--vectis-ease-default);border:1px solid #0000;align-items:center;display:inline-flex}.v-chip[data-shape=pill]{border-radius:var(--vectis-radius-pill)}.v-chip[data-custom]{--tone-bg-solid:var(--custom-color);--tone-bg-solid-hover:color-mix(in oklab, var(--custom-color), var(--vectis-color-text) 8%);--tone-bg-solid-active:color-mix(in oklab, var(--custom-color), var(--vectis-color-text) 14%);--tone-text-solid:var(--vectis-color-text-on-accent);--tone-text-tinted:color-mix(in oklab, var(--custom-color), var(--vectis-color-text) 30%);--tone-bg-soft:color-mix(in oklab, var(--custom-color), var(--vectis-color-surface) 85%);--tone-border-soft:color-mix(in oklab, var(--custom-color), var(--vectis-color-surface) 60%)}.v-variant.v-chip[data-selected]{background:var(--tone-bg-solid);color:var(--tone-text-solid);border-color:#0000}.v-chip[data-variant=outline]:not([data-disabled],[data-selected]):has(:is(button,a).v-chip-action:hover){background:var(--tone-bg-soft)}.v-chip[data-variant=outline]:not([data-disabled],[data-selected]):has(:is(button,a).v-chip-action:active),.v-chip[data-variant=soft]:not([data-disabled],[data-selected]):has(:is(button,a).v-chip-action:hover){background:color-mix(in oklab, var(--tone-bg-soft), var(--tone-text-tinted) 8%)}.v-chip[data-variant=soft]:not([data-disabled],[data-selected]):has(:is(button,a).v-chip-action:active){background:color-mix(in oklab, var(--tone-bg-soft), var(--tone-text-tinted) 14%)}.v-chip[data-variant=solid]:not([data-disabled]):has(:is(button,a).v-chip-action:hover),.v-chip[data-selected]:not([data-disabled]):has(:is(button,a).v-chip-action:hover){background:var(--tone-bg-solid-hover)}.v-chip[data-variant=solid]:not([data-disabled]):has(:is(button,a).v-chip-action:active),.v-chip[data-selected]:not([data-disabled]):has(:is(button,a).v-chip-action:active){background:var(--tone-bg-solid-active)}.v-chip-action{align-items:center;gap:var(--control-gap);height:100%;padding-block:0;padding-inline:var(--control-padding-inline);color:inherit;font:inherit;border-radius:inherit;cursor:default;background:0 0;border:none;text-decoration:none;display:inline-flex}.v-chip[data-icon-only] .v-chip-action{aspect-ratio:1;justify-content:center;padding-inline:0}:is(button,a).v-chip-action{cursor:pointer}:is(button,a).v-chip-action:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-chip-dismiss{width:var(--control-action-size);height:var(--control-action-size);margin-inline:calc(var(--vectis-space-1) * -1) var(--vectis-space-1);color:inherit;border-radius:var(--vectis-radius-pill);cursor:pointer;background:0 0;border:none;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.v-chip-dismiss:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:calc(-1 * var(--vectis-focus-ring-width))}.v-variant.v-chip[data-disabled]{background:var(--vectis-color-surface-muted);color:var(--vectis-color-text-subtle);border-color:#0000}.v-variant.v-chip[data-disabled][data-variant=outline]{border-color:var(--vectis-color-border);background:0 0}.v-chip[data-disabled] :is(:is(button,a).v-chip-action,.v-chip-dismiss){cursor:not-allowed}@media (prefers-reduced-motion:reduce){.v-chip{transition:none}}}

package/dist/components/VChip/VChip.d.ts

@@ -1,29 +1,24 @@
 import { IconSource } from '../VIcon/types.js';
-/**
- * A chip: a small labelled pill standing for a value — a filter in force, a tag, a
- * file chosen, a person picked in a field.
- *
- * What it renders follows what it is asked to DO, and each shape is the native element
- * for it, so focus, keyboard and disabling come free: a chip that can be selected is a
- * button reporting whether it is pressed, one that leads somewhere is a link, one that
- * merely reacts to clicks is a button, and one that does none of those is plain text
- * with no hover at all.
- *
- * A chip that can be removed carries a SECOND button, beside the first and never
- * inside it: a button within a button is invalid HTML and unreachable by keyboard.
- *
- * The only JavaScript makes a disabled link inert — the platform having no `disabled`
- * for links — and splits the attributes the consumer passes between the pill and the
- * element that actually acts.
- */
+/** How much visual weight the chip carries. */
+export type ChipVariant = 'soft' | 'solid' | 'outline';
+/** What the chip means, in colour. */
+export type ChipTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning';
+/** The silhouette: softly rounded, or a full pill. */
+export type ChipShape = 'chip' | 'pill';
+/** The height of the chip: 24 or 32 pixels. */
+export type ChipSize = 'xs' | 'sm';
 interface ChipProps {
     /**
      * How strongly the chip is painted: a tinted background, the full colour, or a
      * border alone.
      */
-    variant?: 'soft' | 'solid' | 'outline';
-    /** What the chip means, expressed as a colour. */
-    tone?: 'neutral' | 'accent' | 'danger' | 'success' | 'warning';
+    variant?: ChipVariant;
+    /**
+     * What the chip means, expressed as a colour: `neutral` by default, then `accent` for
+     * something singled out and `danger`/`success`/`warning` for a state being reported. A
+     * chip may report a state where a button may not, which is why it offers five.
+     */
+    tone?: ChipTone;
     /**
      * A colour of your own (hex, CSS name or `oklch()`), which REPLACES the tone. Every
      * shade it needs — the tinted background, the text, the hover — is derived from that
@@ -32,9 +27,9 @@ interface ChipProps {
      */
     color?: string;
     /** The silhouette: softly rounded corners, or a full pill. */
-    shape?: 'chip' | 'pill';
+    shape?: ChipShape;
     /** The height of the chip. */
-    size?: 'xs' | 'sm';
+    size?: ChipSize;
     /** Takes 4px off the height, leaving the padding, the text and the icons as they are. */
     compact?: boolean;
     /** Makes the chip a button that reacts to clicks, without holding a state. */
@@ -54,10 +49,18 @@ interface ChipProps {
      * start icon was given, so the two are never shown together.
      */
     check?: boolean;
+    /** The icon of that tick, a built-in check mark by default. `iconFilled` does not reach it. */
+    checkIcon?: IconSource;
     /** An icon before the label. The `#start` slot replaces it. */
     iconStart?: IconSource;
     /** An icon after the label. The `#end` slot replaces it. */
     iconEnd?: IconSource;
+    /**
+     * Renders `iconStart` and `iconEnd` in their filled form (the font's `FILL` axis). It has
+     * no effect on the `#start`/`#end` slots, whose icons the consumer builds, nor on the tick
+     * or the removal cross.
+     */
+    iconFilled?: boolean;
     /**
      * Adds a button that asks for the chip to be removed. It only EMITS that request:
      * actually taking the chip away is the consumer's decision.
@@ -83,6 +86,11 @@ type __VLS_Slots = {
     end?(): unknown;
 };
 type __VLS_ModelProps = {
+    /**
+     * Whether the chip is selected, which is also what makes it selectable at all: binding this
+     * turns it into a toggle button and takes precedence over `href` and `clickable`. It starts
+     * unselected.
+     */
     'selected'?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
@@ -94,18 +102,20 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:selected"?: ((value: boolean) => any) | undefined;
 }>, {
     check: boolean;
-    size: "xs" | "sm";
-    variant: "soft" | "solid" | "outline";
-    tone: "neutral" | "accent" | "danger" | "success" | "warning";
+    size: ChipSize;
+    variant: ChipVariant;
+    tone: ChipTone;
     compact: boolean;
     href: string;
     disabled: boolean;
     iconStart: IconSource;
     iconEnd: IconSource;
-    shape: "chip" | "pill";
+    iconFilled: boolean;
+    shape: ChipShape;
     color: string;
     clickable: boolean;
     selectable: boolean;
+    checkIcon: IconSource;
     dismissible: boolean;
     dismissIcon: IconSource;
     dismissLabel: string;

package/dist/components/VChip/VChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"VChip.js","names":[],"sources":["../../../src/components/VChip/VChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useAttrs, useSlots } from 'vue'\nimport type { StyleValue } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { check as checkIcon } from '../VIcon/icons/check'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport type { IconSource } from '../VIcon/types'\nimport { useMessages } from '../../i18n/state'\n\n// @core\n/**\n * A chip: a small labelled pill standing for a value — a filter in force, a tag, a\n * file chosen, a person picked in a field.\n *\n * What it renders follows what it is asked to DO, and each shape is the native element\n * for it, so focus, keyboard and disabling come free: a chip that can be selected is a\n * button reporting whether it is pressed, one that leads somewhere is a link, one that\n * merely reacts to clicks is a button, and one that does none of those is plain text\n * with no hover at all.\n *\n * A chip that can be removed carries a SECOND button, beside the first and never\n * inside it: a button within a button is invalid HTML and unreachable by keyboard.\n *\n * The only JavaScript makes a disabled link inert — the platform having no `disabled`\n * for links — and splits the attributes the consumer passes between the pill and the\n * element that actually acts.\n */\ninterface ChipProps {\n  /**\n   * How strongly the chip is painted: a tinted background, the full colour, or a\n   * border alone.\n   */\n  variant?: 'soft' | 'solid' | 'outline'\n  /** What the chip means, expressed as a colour. */\n  tone?: 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\n  /**\n   * A colour of your own (hex, CSS name or `oklch()`), which REPLACES the tone. Every\n   * shade it needs — the tinted background, the text, the hover — is derived from that\n   * one colour, so it follows the light and the dark theme with nothing to rebuild.\n   * Only the contrast of the text on a fully coloured chip is yours to check.\n   */\n  color?: string\n  /** The silhouette: softly rounded corners, or a full pill. */\n  shape?: 'chip' | 'pill'\n  /** The height of the chip. */\n  size?: 'xs' | 'sm'\n  /** Takes 4px off the height, leaving the padding, the text and the icons as they are. */\n  compact?: boolean\n  /** Makes the chip a button that reacts to clicks, without holding a state. */\n  clickable?: boolean\n  /**\n   * Where the chip leads, which makes it a link. A disabled link is made inert by\n   * hand.\n   */\n  href?: string\n  /**\n   * Makes the chip something that stays chosen, bound to `v-model:selected`. It wins\n   * over `href` and `clickable`.\n   */\n  selectable?: boolean\n  /**\n   * Shows a tick before the label while the chip is selected. It REPLACES whatever\n   * start icon was given, so the two are never shown together.\n   */\n  check?: boolean\n  /** An icon before the label. The `#start` slot replaces it. */\n  iconStart?: IconSource\n  /** An icon after the label. The `#end` slot replaces it. */\n  iconEnd?: IconSource\n  /**\n   * Adds a button that asks for the chip to be removed. It only EMITS that request:\n   * actually taking the chip away is the consumer's decision.\n   */\n  dismissible?: boolean\n  /** The icon of that removal button. */\n  dismissIcon?: IconSource\n  /**\n   * What the removal button does, in words. It falls back to the design system\n   * dictionary.\n   */\n  dismissLabel?: string\n  /** Makes the chip unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<ChipProps>(), {\n  variant: 'soft',\n  tone: 'neutral',\n  color: undefined,\n  shape: 'chip',\n  size: 'xs',\n  compact: false,\n  clickable: false,\n  href: undefined,\n  selectable: false,\n  check: false,\n  iconStart: undefined,\n  iconEnd: undefined,\n  dismissible: false,\n  dismissIcon: () => closeIcon,\n  dismissLabel: undefined,\n  disabled: false,\n})\n\nconst m = useMessages()\nconst resolvedDismissLabel = computed(() => props.dismissLabel ?? m.value.common.dismiss)\n\nconst selected = defineModel<boolean>('selected', { default: false })\n\ndefineEmits<{\n  /** The removal button was pressed. The chip is still there: removing it is up to you. */\n  dismiss: []\n}>()\n\ndefineSlots<{\n  /** The label. It may be left out entirely, which gives a chip made of icons alone. */\n  default?(): unknown\n  /** Content before the label, which takes the place of `iconStart`. */\n  start?(): unknown\n  /** Content after the label, which takes the place of `iconEnd`. */\n  end?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst attrs = useAttrs()\n\n/* What the chip does, in order of precedence: staying selected wins over leading\n   somewhere, which wins over merely reacting to clicks; asked for none of them, it is\n   plain text. */\nconst isLink = computed(() => !props.selectable && props.href !== undefined)\nconst actionTag = computed(() =>\n  props.selectable ? 'button' : isLink.value ? 'a' : props.clickable ? 'button' : 'span',\n)\nconst isInertLink = computed(() => isLink.value && props.disabled)\n\nconst rootStyle = computed<StyleValue>(() => [\n  props.color !== undefined ? { '--custom-color': props.color } : undefined,\n  attrs.style as StyleValue,\n])\nconst actionAttrs = computed(() => {\n  const rest = Object.fromEntries(\n    Object.entries(attrs).filter(([key]) => key !== 'class' && key !== 'style'),\n  )\n  if (isInertLink.value) delete rest.onClick\n  return rest\n})\n\nconst showCheck = computed(() => props.check && props.selectable && selected.value)\n\n/* An icon and no label at all: the chip becomes a square, as wide as it is tall. */\nconst slots = useSlots()\nconst iconOnly = computed(\n  () => !slots.default && !!(slots.start || slots.end || props.iconStart || props.iconEnd),\n)\n</script>\n\n<template>\n  <span\n    class=\"v-chip v-control v-tone\"\n    :class=\"$attrs.class\"\n    :style=\"rootStyle\"\n    :data-variant=\"variant\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :data-shape=\"shape\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-selected=\"selectable && selected ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-icon-only=\"iconOnly ? '' : undefined\"\n  >\n    <component\n      :is=\"actionTag\"\n      v-bind=\"actionAttrs\"\n      class=\"v-chip-action\"\n      :type=\"actionTag === 'button' ? 'button' : undefined\"\n      :href=\"isLink && !disabled ? href : undefined\"\n      :disabled=\"actionTag === 'button' ? disabled : undefined\"\n      :aria-disabled=\"isInertLink ? 'true' : undefined\"\n      :aria-pressed=\"selectable ? selected : undefined\"\n      @click=\"selectable && !disabled && (selected = !selected)\"\n    >\n      <VIcon v-if=\"showCheck\" :name=\"checkIcon\" />\n      <slot v-else name=\"start\">\n        <VIcon v-if=\"iconStart\" v-bind=\"iconProps(iconStart)\" />\n      </slot>\n      <slot />\n      <slot name=\"end\">\n        <VIcon v-if=\"iconEnd\" v-bind=\"iconProps(iconEnd)\" />\n      </slot>\n    </component>\n    <button\n      v-if=\"dismissible\"\n      type=\"button\"\n      class=\"v-chip-remove\"\n      :aria-label=\"resolvedDismissLabel\"\n      :disabled=\"disabled\"\n      @click=\"$emit('dismiss')\"\n    >\n      <VIcon v-bind=\"iconProps(dismissIcon)\" />\n    </button>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The height comes from the shared size class set on this element. The scale itself\n     holds five steps; the component's type restricts it to the two smallest, a chip\n     larger than that being a button. */\n  .v-chip {\n    display: inline-flex;\n    align-items: center;\n    height: var(--control-height);\n    border: 1px solid transparent;\n    border-radius: var(--vectis-radius-interactive);\n    font-family: var(--vectis-text-family);\n    font-size: var(--control-font-size);\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-chip[data-shape='pill'] {\n    border-radius: var(--vectis-radius-pill);\n  }\n\n  /* The tone table itself lives in styles/tones.css, in a layer below the components.\n     All five tones are taken exactly as they come; the only values redefined here are\n     those of a custom colour, and they win over the shared table by LAYER rather than\n     by order, so no bundling can change the outcome. */\n\n  /* A custom colour replaces the tone entirely. Every shade it needs is derived from\n     that one colour mixed with the theme's own surface and text, so the same value\n     produces a legible chip in the light theme and in the dark one, with nothing to\n     rebuild. */\n  .v-chip[data-custom] {\n    --tone-bg-solid: var(--custom-color);\n    --tone-bg-solid-hover: color-mix(in oklab, var(--custom-color), var(--vectis-color-text) 8%);\n    --tone-bg-solid-active: color-mix(in oklab, var(--custom-color), var(--vectis-color-text) 14%);\n    /* Fixed white, whatever the colour: on a fully coloured chip the contrast of the\n       text is the consumer's to check, as it is in VBadge. */\n    --tone-text-solid: var(--vectis-color-text-on-accent);\n    --tone-text-tinted: color-mix(in oklab, var(--custom-color), var(--vectis-color-text) 30%);\n    --tone-bg-soft: color-mix(in oklab, var(--custom-color), var(--vectis-color-surface) 85%);\n    --tone-border-soft: color-mix(in oklab, var(--custom-color), var(--vectis-color-surface) 60%);\n  }\n\n  .v-chip[data-variant='soft'] {\n    background: var(--tone-bg-soft);\n    color: var(--tone-text-tinted);\n  }\n\n  .v-chip[data-variant='solid'] {\n    background: var(--tone-bg-solid);\n    color: var(--tone-text-solid);\n  }\n\n  .v-chip[data-variant='outline'] {\n    background: transparent;\n    color: var(--tone-text-tinted);\n    border-color: var(--tone-border-soft);\n  }\n\n  /* A selected chip is painted in the full colour of its CURRENT tone, whichever\n     variant it was given. The block sits after the variants at equal specificity, so\n     it is the order that lets it win. */\n  .v-chip[data-selected] {\n    background: var(--tone-bg-solid);\n    color: var(--tone-text-solid);\n    border-color: transparent;\n  }\n\n  /* Hovering and pressing are conditioned on the ACTION being a real control, which\n     buys two things at once: a chip that merely displays a value never lights up, and\n     hovering the removal button does not repaint the whole chip as though it were\n     about to be activated. */\n  .v-chip[data-variant='soft']:not([data-disabled], [data-selected]):has(\n      :is(button, a).v-chip-action:hover\n    ) {\n    background: color-mix(in oklab, var(--tone-bg-soft), var(--tone-text-tinted) 8%);\n  }\n\n  .v-chip[data-variant='soft']:not([data-disabled], [data-selected]):has(\n      :is(button, a).v-chip-action:active\n    ) {\n    background: color-mix(in oklab, var(--tone-bg-soft), var(--tone-text-tinted) 14%);\n  }\n\n  .v-chip[data-variant='outline']:not([data-disabled], [data-selected]):has(\n      :is(button, a).v-chip-action:hover\n    ) {\n    background: var(--tone-bg-soft);\n  }\n\n  .v-chip[data-variant='outline']:not([data-disabled], [data-selected]):has(\n      :is(button, a).v-chip-action:active\n    ) {\n    background: color-mix(in oklab, var(--tone-bg-soft), var(--tone-text-tinted) 8%);\n  }\n\n  .v-chip[data-variant='solid']:not([data-disabled]):has(:is(button, a).v-chip-action:hover),\n  .v-chip[data-selected]:not([data-disabled]):has(:is(button, a).v-chip-action:hover) {\n    background: var(--tone-bg-solid-hover);\n  }\n\n  .v-chip[data-variant='solid']:not([data-disabled]):has(:is(button, a).v-chip-action:active),\n  .v-chip[data-selected]:not([data-disabled]):has(:is(button, a).v-chip-action:active) {\n    background: var(--tone-bg-solid-active);\n  }\n\n  .v-chip-action {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--control-gap);\n    height: 100%;\n    padding-block: 0;\n    padding-inline: var(--control-padding-inline);\n    border: none;\n    background: transparent;\n    color: inherit;\n    font: inherit;\n    border-radius: inherit;\n    text-decoration: none;\n    cursor: default;\n  }\n\n  /* With an icon and no label the action becomes square, its width taken from its own\n     height through the ratio rather than from a new measurement to keep in step. */\n  .v-chip[data-icon-only] .v-chip-action {\n    aspect-ratio: 1;\n    justify-content: center;\n    padding-inline: 0;\n  }\n\n  :is(button, a).v-chip-action {\n    cursor: pointer;\n  }\n\n  :is(button, a).v-chip-action: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  /* The removal button carries no background of its own, not even on hover — the same\n     treatment as a field's inner buttons — and the cursor is what signals it can be\n     used.\n\n     Its icon takes the chip's colour AT FULL strength. Dimming it, as one would\n     instinctively do for a secondary control, took the cross down to 3.9:1 on a tinted\n     chip and 2.8:1 on a solid one. That matters because the cross is drawn from the\n     icon font here, and a glyph from a font is real text, to which the contrast rule\n     applies. */\n  .v-chip-remove {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--control-action-size);\n    height: var(--control-action-size);\n    margin-inline: calc(var(--vectis-space-1) * -1) var(--vectis-space-1);\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: inherit;\n    border-radius: var(--vectis-radius-full);\n    cursor: pointer;\n    flex: none;\n  }\n\n  .v-chip-remove:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(var(--vectis-focus-ring-offset) * -1);\n  }\n\n  /* A disabled chip greys out through the colour tokens, which is what makes it follow\n     the dark theme without a rule of its own. */\n  .v-chip[data-disabled] {\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-subtle);\n    border-color: transparent;\n  }\n\n  .v-chip[data-disabled][data-variant='outline'] {\n    background: transparent;\n    border-color: var(--vectis-color-border);\n  }\n\n  .v-chip[data-disabled] :is(:is(button, a).v-chip-action, .v-chip-remove) {\n    cursor: not-allowed;\n  }\n\n  .v-chip[data-disabled] .v-chip-remove {\n    color: inherit;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-chip,\n    .v-chip-remove {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VChip.js","names":[],"sources":["../../../src/components/VChip/VChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * A small labelled pill standing for a value: a filter in force, a tag, a chosen file, a\n * person picked in a field.\n *\n * What it renders follows what it is asked to DO, each shape being the native element for\n * it, so focus, keyboard and disabling come free: selectable is a button with `aria-pressed`,\n * `href` is a link, `clickable` is a button, and none of those is plain text with no hover.\n *\n * A dismissible chip carries a SECOND button BESIDE the first, never inside it — a button\n * within a button is invalid HTML and unreachable by keyboard.\n *\n * The only JS makes a disabled link inert, the platform having no `disabled` for links, and\n * splits the consumer's attributes between the pill and the element that acts.\n */\n\nimport { computed } from 'vue'\nimport type { StyleValue } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\n// TRAP — neither import may be named after a prop (`check`, `checkIcon`): every top-level\n// binding of a `<script setup>` reaches the template, where it shadows the prop of that name.\nimport { check as checkMark } from '../VIcon/icons/check'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport type { IconSource } from '../VIcon/types'\nimport { useMessages } from '../../i18n/state'\n\nimport { useInertLink } from '../../composables/useInertLink'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { customColorStyle } from '../../utils/css'\n\n/** How much visual weight the chip carries. */\nexport type ChipVariant = 'soft' | 'solid' | 'outline'\n\n/** What the chip means, in colour. */\nexport type ChipTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\n\n/** The silhouette: softly rounded, or a full pill. */\nexport type ChipShape = 'chip' | 'pill'\n\n/** The height of the chip: 24 or 32 pixels. */\nexport type ChipSize = 'xs' | 'sm'\n\ninterface ChipProps {\n  /**\n   * How strongly the chip is painted: a tinted background, the full colour, or a\n   * border alone.\n   */\n  variant?: ChipVariant\n  /**\n   * What the chip means, expressed as a colour: `neutral` by default, then `accent` for\n   * something singled out and `danger`/`success`/`warning` for a state being reported. A\n   * chip may report a state where a button may not, which is why it offers five.\n   */\n  tone?: ChipTone\n  /**\n   * A colour of your own (hex, CSS name or `oklch()`), which REPLACES the tone. Every\n   * shade it needs — the tinted background, the text, the hover — is derived from that\n   * one colour, so it follows the light and the dark theme with nothing to rebuild.\n   * Only the contrast of the text on a fully coloured chip is yours to check.\n   */\n  color?: string\n  /** The silhouette: softly rounded corners, or a full pill. */\n  shape?: ChipShape\n  /** The height of the chip. */\n  size?: ChipSize\n  /** Takes 4px off the height, leaving the padding, the text and the icons as they are. */\n  compact?: boolean\n  /** Makes the chip a button that reacts to clicks, without holding a state. */\n  clickable?: boolean\n  /**\n   * Where the chip leads, which makes it a link. A disabled link is made inert by\n   * hand.\n   */\n  href?: string\n  /**\n   * Makes the chip something that stays chosen, bound to `v-model:selected`. It wins\n   * over `href` and `clickable`.\n   */\n  selectable?: boolean\n  /**\n   * Shows a tick before the label while the chip is selected. It REPLACES whatever\n   * start icon was given, so the two are never shown together.\n   */\n  check?: boolean\n  /** The icon of that tick, a built-in check mark by default. `iconFilled` does not reach it. */\n  checkIcon?: IconSource\n  /** An icon before the label. The `#start` slot replaces it. */\n  iconStart?: IconSource\n  /** An icon after the label. The `#end` slot replaces it. */\n  iconEnd?: IconSource\n  /**\n   * Renders `iconStart` and `iconEnd` in their filled form (the font's `FILL` axis). It has\n   * no effect on the `#start`/`#end` slots, whose icons the consumer builds, nor on the tick\n   * or the removal cross.\n   */\n  iconFilled?: boolean\n  /**\n   * Adds a button that asks for the chip to be removed. It only EMITS that request:\n   * actually taking the chip away is the consumer's decision.\n   */\n  dismissible?: boolean\n  /** The icon of that removal button. */\n  dismissIcon?: IconSource\n  /**\n   * What the removal button does, in words. It falls back to the design system\n   * dictionary.\n   */\n  dismissLabel?: string\n  /** Makes the chip unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<ChipProps>(), {\n  variant: 'soft',\n  tone: 'neutral',\n  color: undefined,\n  shape: 'chip',\n  size: 'xs',\n  compact: false,\n  clickable: false,\n  href: undefined,\n  selectable: false,\n  check: false,\n  checkIcon: () => checkMark,\n  iconStart: undefined,\n  iconEnd: undefined,\n  iconFilled: false,\n  dismissible: false,\n  dismissIcon: () => closeIcon,\n  dismissLabel: undefined,\n  disabled: false,\n})\n\nconst m = useMessages()\nconst resolvedDismissLabel = computed(() => props.dismissLabel ?? m.value.common.dismiss)\n\n/**\n * Whether the chip is selected, which is also what makes it selectable at all: binding this\n * turns it into a toggle button and takes precedence over `href` and `clickable`. It starts\n * unselected.\n */\nconst selected = defineModel<boolean>('selected', { default: false })\n\ndefineEmits<{\n  /** The removal button was pressed. The chip is still there: removing it is up to you. */\n  dismiss: []\n}>()\n\nconst slots = defineSlots<{\n  /** The label. It may be left out entirely, which gives a chip made of icons alone. */\n  default?(): unknown\n  /** Content before the label, which takes the place of `iconStart`. */\n  start?(): unknown\n  /** Content after the label, which takes the place of `iconEnd`. */\n  end?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\n// The wrapper-root split: the pill is the box a consumer positions, and the ACTION is the\n// element that is focused, named and clicked, so everything else goes there.\nconst { rootClass, rootStyle: consumerStyle, forwardedAttrs } = useRootAttrs()\n\n/* What the chip does, in order of precedence: staying selected wins over leading\n   somewhere, which wins over merely reacting to clicks; asked for none of them, it is\n   plain text. A selectable chip is therefore never a link, whatever `href` says. */\nconst {\n  isLink,\n  isInertLink,\n  linkHref,\n  attrs: actionAttrs,\n} = useInertLink({\n  href: () => (props.selectable ? undefined : props.href),\n  inert: () => props.disabled,\n  attrs: () => forwardedAttrs.value,\n})\nconst actionTag = computed(() =>\n  props.selectable ? 'button' : isLink.value ? 'a' : props.clickable ? 'button' : 'span',\n)\n\nconst rootStyle = computed<StyleValue>(() => [customColorStyle(props.color), consumerStyle.value])\n\nconst showCheck = computed(() => props.check && props.selectable && selected.value)\n\n// TRAP — a function read by the template, never a `computed`: `slots` is not reactive, so a\n// computed would keep its first answer while a slot behind a `v-if` comes and goes.\n/** An icon and no label at all: the chip becomes a square, as wide as it is tall. */\nfunction iconOnly() {\n  return !slots.default && !!(slots.start || slots.end || props.iconStart || props.iconEnd)\n}\n</script>\n\n<template>\n  <span\n    :class=\"['v-chip v-control v-tone v-variant', rootClass]\"\n    :style=\"rootStyle\"\n    :data-variant=\"variant\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :data-shape=\"shape\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-selected=\"selectable && selected ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-icon-only=\"iconOnly() ? '' : undefined\"\n  >\n    <component\n      :is=\"actionTag\"\n      v-bind=\"actionAttrs\"\n      class=\"v-chip-action\"\n      :type=\"actionTag === 'button' ? 'button' : undefined\"\n      :href=\"linkHref\"\n      :disabled=\"actionTag === 'button' ? disabled : undefined\"\n      :aria-disabled=\"isInertLink ? 'true' : undefined\"\n      :aria-pressed=\"selectable ? selected : undefined\"\n      @click=\"selectable && !disabled && (selected = !selected)\"\n    >\n      <VIcon v-if=\"showCheck\" v-bind=\"iconProps(checkIcon)\" />\n      <slot v-else name=\"start\">\n        <VIcon v-if=\"iconStart\" v-bind=\"iconProps(iconStart)\" :filled=\"iconFilled\" />\n      </slot>\n      <slot />\n      <slot name=\"end\">\n        <VIcon v-if=\"iconEnd\" v-bind=\"iconProps(iconEnd)\" :filled=\"iconFilled\" />\n      </slot>\n    </component>\n    <button\n      v-if=\"dismissible\"\n      type=\"button\"\n      class=\"v-chip-dismiss\"\n      :aria-label=\"resolvedDismissLabel\"\n      :disabled=\"disabled\"\n      @click=\"$emit('dismiss')\"\n    >\n      <VIcon v-bind=\"iconProps(dismissIcon)\" />\n    </button>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The height comes from the shared size class set on this element. The scale itself\n     holds five steps; the component's type restricts it to the two smallest, a chip\n     larger than that being a button. */\n  .v-chip {\n    display: inline-flex;\n    align-items: center;\n    height: var(--control-height);\n    border: 1px solid transparent;\n    border-radius: var(--vectis-radius-chip);\n    font-family: var(--vectis-text-family);\n    font-size: var(--control-font-size);\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-chip[data-shape='pill'] {\n    border-radius: var(--vectis-radius-pill);\n  }\n\n  /* The tone table itself lives in styles/tones.css, in a layer below the components.\n     All five tones are taken exactly as they come; the only values redefined here are\n     those of a custom colour, and they win over the shared table by LAYER rather than\n     by order, so no bundling can change the outcome. */\n\n  /* A custom colour replaces the tone entirely. Every shade it needs is derived from\n     that one colour mixed with the theme's own surface and text, so the same value\n     produces a legible chip in the light theme and in the dark one, with nothing to\n     rebuild. */\n  .v-chip[data-custom] {\n    --tone-bg-solid: var(--custom-color);\n    --tone-bg-solid-hover: color-mix(in oklab, var(--custom-color), var(--vectis-color-text) 8%);\n    --tone-bg-solid-active: color-mix(in oklab, var(--custom-color), var(--vectis-color-text) 14%);\n    /* Fixed white, whatever the colour: on a fully coloured chip the contrast of the\n       text is the consumer's to check, as it is in VBadge. */\n    --tone-text-solid: var(--vectis-color-text-on-accent);\n    --tone-text-tinted: color-mix(in oklab, var(--custom-color), var(--vectis-color-text) 30%);\n    --tone-bg-soft: color-mix(in oklab, var(--custom-color), var(--vectis-color-surface) 85%);\n    --tone-border-soft: color-mix(in oklab, var(--custom-color), var(--vectis-color-surface) 60%);\n  }\n\n  /* A selected chip is painted in the full colour of its CURRENT tone, whichever variant it\n     was given. It COMPOUNDS `.v-variant`: the variant table weighs (0,2,0) like this rule and\n     lives in another sheet, so at equal specificity the winner would be whichever one the\n     consumer's bundler put last. At (0,3,0) it wins by construction. */\n  .v-variant.v-chip[data-selected] {\n    background: var(--tone-bg-solid);\n    color: var(--tone-text-solid);\n    border-color: transparent;\n  }\n\n  /* Hovering and pressing are conditioned on the ACTION being a real control, which\n     buys two things at once: a chip that merely displays a value never lights up, and\n     hovering the removal button does not repaint the whole chip as though it were\n     about to be activated. */\n  /* The same steps as VButton's, rule for rule: an outline sits on the soft surface while\n     hovered and one tint further when pressed, and that tint is where a soft chip starts\n     on hover. Held in each sheet rather than in `variants.css`, which every consumer\n     downloads whether or not it renders a single button or chip. */\n  .v-chip[data-variant='outline']:not([data-disabled], [data-selected]):has(\n      :is(button, a).v-chip-action:hover\n    ) {\n    background: var(--tone-bg-soft);\n  }\n\n  .v-chip[data-variant='outline']:not([data-disabled], [data-selected]):has(\n      :is(button, a).v-chip-action:active\n    ),\n  .v-chip[data-variant='soft']:not([data-disabled], [data-selected]):has(\n      :is(button, a).v-chip-action:hover\n    ) {\n    background: color-mix(in oklab, var(--tone-bg-soft), var(--tone-text-tinted) 8%);\n  }\n\n  .v-chip[data-variant='soft']:not([data-disabled], [data-selected]):has(\n      :is(button, a).v-chip-action:active\n    ) {\n    background: color-mix(in oklab, var(--tone-bg-soft), var(--tone-text-tinted) 14%);\n  }\n\n  .v-chip[data-variant='solid']:not([data-disabled]):has(:is(button, a).v-chip-action:hover),\n  .v-chip[data-selected]:not([data-disabled]):has(:is(button, a).v-chip-action:hover) {\n    background: var(--tone-bg-solid-hover);\n  }\n\n  .v-chip[data-variant='solid']:not([data-disabled]):has(:is(button, a).v-chip-action:active),\n  .v-chip[data-selected]:not([data-disabled]):has(:is(button, a).v-chip-action:active) {\n    background: var(--tone-bg-solid-active);\n  }\n\n  .v-chip-action {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--control-gap);\n    height: 100%;\n    padding-block: 0;\n    padding-inline: var(--control-padding-inline);\n    border: none;\n    background: transparent;\n    color: inherit;\n    font: inherit;\n    border-radius: inherit;\n    text-decoration: none;\n    cursor: default;\n  }\n\n  /* With an icon and no label the action becomes square, its width taken from its own\n     height through the ratio rather than from a new measurement to keep in step. */\n  .v-chip[data-icon-only] .v-chip-action {\n    aspect-ratio: 1;\n    justify-content: center;\n    padding-inline: 0;\n  }\n\n  :is(button, a).v-chip-action {\n    cursor: pointer;\n  }\n\n  :is(button, a).v-chip-action: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  /* The removal button carries no background of its own, not even on hover — the same\n     treatment as a field's inner buttons — and the cursor is what signals it can be\n     used.\n\n     Its icon takes the chip's colour AT FULL strength. Dimming it, as one would\n     instinctively do for a secondary control, took the cross down to 3.9:1 on a tinted\n     chip and 2.8:1 on a solid one. That matters because the cross is drawn from the\n     icon font here, and a glyph from a font is real text, to which the contrast rule\n     applies. */\n  .v-chip-dismiss {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--control-action-size);\n    height: var(--control-action-size);\n    margin-inline: calc(var(--vectis-space-1) * -1) var(--vectis-space-1);\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: inherit;\n    border-radius: var(--vectis-radius-pill);\n    cursor: pointer;\n    flex: none;\n  }\n\n  .v-chip-dismiss:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  /* A disabled chip greys out through the colour tokens, which is what makes it follow\n     the dark theme without a rule of its own. */\n  .v-variant.v-chip[data-disabled] {\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-subtle);\n    border-color: transparent;\n  }\n\n  .v-variant.v-chip[data-disabled][data-variant='outline'] {\n    background: transparent;\n    border-color: var(--vectis-color-border);\n  }\n\n  .v-chip[data-disabled] :is(:is(button, a).v-chip-action, .v-chip-dismiss) {\n    cursor: not-allowed;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-chip {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VChip/VChip.vue_vue_type_script_setup_true_lang.js

@@ -1,11 +1,14 @@
 import { useMessages as e } from "../../i18n/state.js";
-import t from "../VIcon/VIcon.js";
-import { iconProps as n } from "../VIcon/iconProps.js";
-import { close as r } from "../VIcon/icons/close.js";
-import { check as i } from "../VIcon/icons/check.js";
-import { computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createVNode as l, defineComponent as u, guardReactiveProps as d, mergeModels as f, mergeProps as p, normalizeClass as m, normalizeProps as h, normalizeStyle as g, openBlock as _, renderSlot as v, resolveDynamicComponent as y, unref as b, useAttrs as x, useModel as S, useSlots as C, withCtx as w } from "vue";
+import { iconProps as t } from "../VIcon/iconProps.js";
+import { customColorStyle as n } from "../../utils/css.js";
+import r from "../VIcon/VIcon.js";
+import { useInertLink as i } from "../../composables/useInertLink.js";
+import { useRootAttrs as a } from "../../composables/useRootAttrs.js";
+import { close as o } from "../VIcon/icons/close.js";
+import { check as s } from "../VIcon/icons/check.js";
+import { computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createVNode as f, defineComponent as p, guardReactiveProps as m, mergeModels as h, mergeProps as g, normalizeClass as _, normalizeProps as v, normalizeStyle as y, openBlock as b, renderSlot as x, resolveDynamicComponent as S, unref as C, useModel as w, useSlots as T, withCtx as E } from "vue";
 //#region src/components/VChip/VChip.vue?vue&type=script&setup=true&lang.ts
-var T = [
+var D = [
 	"data-variant",
 	"data-tone",
 	"data-custom",
@@ -15,10 +18,10 @@ var T = [
 	"data-selected",
 	"data-disabled",
 	"data-icon-only"
-], E = ["aria-label", "disabled"], D = /*@__PURE__*/ u({
+], O = ["aria-label", "disabled"], k = /*@__PURE__*/ p({
 	inheritAttrs: !1,
 	__name: "VChip",
-	props: /*@__PURE__*/ f({
+	props: /*@__PURE__*/ h({
 		variant: { default: "soft" },
 		tone: { default: "neutral" },
 		color: { default: void 0 },
@@ -41,13 +44,18 @@ var T = [
 			type: Boolean,
 			default: !1
 		},
+		checkIcon: { default: () => s },
 		iconStart: { default: void 0 },
 		iconEnd: { default: void 0 },
+		iconFilled: {
+			type: Boolean,
+			default: !1
+		},
 		dismissible: {
 			type: Boolean,
 			default: !1
 		},
-		dismissIcon: { default: () => r },
+		dismissIcon: { default: () => o },
 		dismissLabel: { default: void 0 },
 		disabled: {
 			type: Boolean,
@@ -60,40 +68,41 @@ var T = [
 		},
 		selectedModifiers: {}
 	}),
-	emits: /*@__PURE__*/ f(["dismiss"], ["update:selected"]),
-	setup(r) {
-		let u = r, f = e(), D = a(() => u.dismissLabel ?? f.value.common.dismiss), O = S(r, "selected"), k = x(), A = a(() => !u.selectable && u.href !== void 0), j = a(() => u.selectable ? "button" : A.value ? "a" : u.clickable ? "button" : "span"), M = a(() => A.value && u.disabled), N = a(() => [u.color === void 0 ? void 0 : { "--custom-color": u.color }, k.style]), P = a(() => {
-			let e = Object.fromEntries(Object.entries(k).filter(([e]) => e !== "class" && e !== "style"));
-			return M.value && delete e.onClick, e;
-		}), F = a(() => u.check && u.selectable && O.value), I = C(), L = a(() => !I.default && !!(I.start || I.end || u.iconStart || u.iconEnd));
-		return (e, a) => (_(), c("span", {
-			class: m(["v-chip v-control v-tone", e.$attrs.class]),
-			style: g(N.value),
-			"data-variant": r.variant,
-			"data-tone": r.tone,
-			"data-custom": r.color === void 0 ? void 0 : "",
-			"data-shape": r.shape,
-			"data-size": r.size,
-			"data-compact": r.compact ? "" : void 0,
-			"data-selected": r.selectable && O.value ? "" : void 0,
-			"data-disabled": r.disabled ? "" : void 0,
-			"data-icon-only": L.value ? "" : void 0
-		}, [(_(), o(y(j.value), p(P.value, {
+	emits: /*@__PURE__*/ h(["dismiss"], ["update:selected"]),
+	setup(o) {
+		let s = o, p = e(), h = c(() => s.dismissLabel ?? p.value.common.dismiss), k = w(o, "selected"), A = T(), { rootClass: j, rootStyle: M, forwardedAttrs: N } = a(), { isLink: P, isInertLink: F, linkHref: I, attrs: L } = i({
+			href: () => s.selectable ? void 0 : s.href,
+			inert: () => s.disabled,
+			attrs: () => N.value
+		}), R = c(() => s.selectable ? "button" : P.value ? "a" : s.clickable ? "button" : "span"), z = c(() => [n(s.color), M.value]), B = c(() => s.check && s.selectable && k.value);
+		function V() {
+			return !A.default && !!(A.start || A.end || s.iconStart || s.iconEnd);
+		}
+		return (e, n) => (b(), d("span", {
+			class: _(["v-chip v-control v-tone v-variant", C(j)]),
+			style: y(z.value),
+			"data-variant": o.variant,
+			"data-tone": o.tone,
+			"data-custom": o.color === void 0 ? void 0 : "",
+			"data-shape": o.shape,
+			"data-size": o.size,
+			"data-compact": o.compact ? "" : void 0,
+			"data-selected": o.selectable && k.value ? "" : void 0,
+			"data-disabled": o.disabled ? "" : void 0,
+			"data-icon-only": V() ? "" : void 0
+		}, [(b(), l(S(R.value), g(C(L), {
 			class: "v-chip-action",
-			type: j.value === "button" ? "button" : void 0,
-			href: A.value && !r.disabled ? r.href : void 0,
-			disabled: j.value === "button" ? r.disabled : void 0,
-			"aria-disabled": M.value ? "true" : void 0,
-			"aria-pressed": r.selectable ? O.value : void 0,
-			onClick: a[0] ||= (e) => r.selectable && !r.disabled && (O.value = !O.value)
+			type: R.value === "button" ? "button" : void 0,
+			href: C(I),
+			disabled: R.value === "button" ? o.disabled : void 0,
+			"aria-disabled": C(F) ? "true" : void 0,
+			"aria-pressed": o.selectable ? k.value : void 0,
+			onClick: n[0] ||= (e) => o.selectable && !o.disabled && (k.value = !k.value)
 		}), {
-			default: w(() => [
-				F.value ? (_(), o(t, {
-					key: 0,
-					name: b(i)
-				}, null, 8, ["name"])) : v(e.$slots, "start", {}, () => [r.iconStart ? (_(), o(t, h(p({ key: 0 }, b(n)(r.iconStart))), null, 16)) : s("", !0)], void 0, 1),
-				v(e.$slots, "default"),
-				v(e.$slots, "end", {}, () => [r.iconEnd ? (_(), o(t, h(p({ key: 0 }, b(n)(r.iconEnd))), null, 16)) : s("", !0)])
+			default: E(() => [
+				B.value ? (b(), l(r, v(g({ key: 0 }, C(t)(o.checkIcon))), null, 16)) : x(e.$slots, "start", {}, () => [o.iconStart ? (b(), l(r, g({ key: 0 }, C(t)(o.iconStart), { filled: o.iconFilled }), null, 16, ["filled"])) : u("", !0)], void 0, 1),
+				x(e.$slots, "default"),
+				x(e.$slots, "end", {}, () => [o.iconEnd ? (b(), l(r, g({ key: 0 }, C(t)(o.iconEnd), { filled: o.iconFilled }), null, 16, ["filled"])) : u("", !0)])
 			]),
 			_: 3
 		}, 16, [
@@ -102,17 +111,17 @@ var T = [
 			"disabled",
 			"aria-disabled",
 			"aria-pressed"
-		])), r.dismissible ? (_(), c("button", {
+		])), o.dismissible ? (b(), d("button", {
 			key: 0,
 			type: "button",
-			class: "v-chip-remove",
-			"aria-label": D.value,
-			disabled: r.disabled,
-			onClick: a[1] ||= (t) => e.$emit("dismiss")
-		}, [l(t, h(d(b(n)(r.dismissIcon))), null, 16)], 8, E)) : s("", !0)], 14, T));
+			class: "v-chip-dismiss",
+			"aria-label": h.value,
+			disabled: o.disabled,
+			onClick: n[1] ||= (t) => e.$emit("dismiss")
+		}, [f(r, v(m(C(t)(o.dismissIcon))), null, 16)], 8, O)) : u("", !0)], 14, D));
 	}
 });
 //#endregion
-export { D as default };
+export { k as default };
 
 //# sourceMappingURL=VChip.vue_vue_type_script_setup_true_lang.js.map