vectis-ui 0.8.1 → 0.9.1

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

@@ -7,9 +7,9 @@ var b = [
 	"data-spread",
 	"data-readonly"
 ], x = { class: "v-choice-row" }, S = [
-	"disabled",
 	"aria-invalid",
 	"aria-readonly",
+	"disabled",
 	"aria-describedby"
 ], C = {
 	key: 0,
@@ -51,10 +51,11 @@ var b = [
 	emits: ["update:modelValue"],
 	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(() => {
+		function P() {
 			N.value && (N.value.indeterminate = T.indeterminate);
-		}, { flush: "post" });
-		function P(e) {
+		}
+		v(P, { flush: "post" });
+		function F(e) {
 			T.readonly && e.preventDefault();
 		}
 		return s({
@@ -72,13 +73,14 @@ var b = [
 				ref: N,
 				"onUpdate:modelValue": t[0] ||= (e) => M.value = e,
 				type: "checkbox",
-				class: "v-checkbox-input v-hidden-input"
+				class: "v-checkbox-input v-hidden-input",
+				"aria-invalid": o.invalid || void 0,
+				"aria-readonly": o.readonly || void 0
 			}, h(k), {
 				disabled: o.disabled,
-				"aria-invalid": o.invalid || void 0,
-				"aria-readonly": o.readonly || void 0,
 				"aria-describedby": h(j),
-				onClick: P
+				onClick: F,
+				onChange: P
 			}), null, 16, S), [[_, M.value]]),
 			t[1] ||= i("span", {
 				class: "v-checkbox-box",

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":["$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"}
+{"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. `indeterminate` is a separate prop: the\n * 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// The \"partially checked\" look exists only as a DOM property, so it is written by hand,\n// from two places.\n//\n// The effect covers the prop moving. On the server there is no element and it simply does\n// nothing; the `flush: 'post'` is load-bearing, since on the very first pass the template\n// ref is not filled in before the DOM has been updated — in the default timing the\n// property would be written to nothing at all.\n//\n// TRAP — the effect alone is not enough. Activating a checkbox CLEARS the property as part\n// of the gesture, and the prop it reads has not moved, so nothing re-runs it and the dash\n// never comes back. Re-asserting it from `change` is what covers that, and it covers it\n// even when the parent refuses the new value, where watching the model would not. That\n// handler is bound after the forwarded attributes, so `mergeProps` keeps a consumer's own\n// `@change` beside it rather than replacing it.\nfunction syncIndeterminate() {\n  if (inputEl.value) inputEl.value.indeterminate = props.indeterminate\n}\n\nwatchEffect(syncIndeterminate, { flush: 'post' })\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        :aria-invalid=\"invalid || undefined\"\n        :aria-readonly=\"readonly || undefined\"\n        v-bind=\"forwardedAttrs\"\n        :disabled=\"disabled\"\n        :aria-describedby=\"describedBy\"\n        @click=\"refuseWhenReadonly\"\n        @change=\"syncIndeterminate\"\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. The states below weigh (0,3,0), bar the read-only base at (0,2,0), so their\n     ORDER arbitrates them: checked, read-only, invalid, then disabled last.\n\n     The two hovers sit at (0,7,0) and therefore beat every one of them on specificity, order\n     or no order — which is why they have to EXCLUDE by hand each state they must not repaint.\n     Forgetting the invalid pair is what once rubbed the danger border out under the pointer,\n     on a control whose whole point at that moment is to look wrong. */\n  .v-checkbox:not([data-readonly])\n    .v-choice-row:hover\n    .v-checkbox-input:not(:disabled, :checked, :indeterminate, :user-invalid, [aria-invalid='true'])\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, :user-invalid, [aria-invalid='true']):is(\n      :checked,\n      :indeterminate\n    )\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 (forced-colors: active) {\n    /* Windows forced colors erase every author colour: a `background` becomes `Canvas` and a\n     `border-color` becomes `CanvasText`, so a ticked box keeps the tick its `stroke` gives it and nothing else. The system\n     Highlight pair is what says \"selected\" here, as it does on a pressed VToggleItem, a\n     selected VChip and the current VPagination page.\n\n     The class is repeated to (0,8,0) so the row's own hover rules, which reach (0,7,0),\n     cannot repaint it: `forced-color-adjust: none` takes the forcing off this element, and\n     a hover left winning would then paint its REAL grey over the system colour. */\n    .v-checkbox-input.v-checkbox-input.v-checkbox-input.v-checkbox-input.v-checkbox-input:is(\n        :checked,\n        :indeterminate\n      ):not(:disabled)\n      + .v-checkbox-box {\n      forced-color-adjust: none;\n      background: Highlight;\n      border-color: Highlight;\n      color: HighlightText;\n    }\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;EAiBjD,SAAS,IAAoB;GAC3B,AAAI,EAAQ,UAAO,EAAQ,MAAM,gBAAgB,EAAM;EACzD;EAEA,EAAY,GAAmB,EAAE,OAAO,OAAO,CAAC;EAOhD,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,EAkDO,QAAA;GAjDL,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,EAwCQ,SAxCR,GAwCQ;KArCN,EAYE,SAZF,EAYE;aAXI;IAAJ,KAAI;6CACU,QAAA;IACd,MAAK;IACL,OAAM;IACL,gBAAc,EAAA,WAAW,KAAA;IACzB,iBAAe,EAAA,YAAY,KAAA;MACpB,EAAA,CAAA,GAAc;IACrB,UAAU,EAAA;IACV,oBAAkB,EAAA,CAAA;IAClB,SAAO;IACP,UAAQ;0BATA,EAAA,KAAK,CAAA,CAAA;YAWhB,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-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}}}
+@layer vectis.components{.v-chip{block-size: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-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-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);block-size: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{inline-size:var(--control-action-size);block-size: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}}@media (forced-colors:active){.v-chip.v-chip.v-chip.v-chip[data-selected]:not([data-disabled]){forced-color-adjust:none;color:highlighttext;background-color:highlight;border-color:highlight;outline-color:canvastext}}}

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

@@ -21,7 +21,7 @@ interface ChipProps {
     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
+     * shade it needs (the tinted background, the text, the hover) is derived from that
      * one colour, so it follows the light and the dark theme with nothing to rebuild.
      * Only the contrast of the text on a fully coloured chip is yours to check.
      */
@@ -94,7 +94,12 @@ type __VLS_ModelProps = {
     'selected'?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    /** Moves the focus to the chip's action: its button or link. */
+    focus: (options?: FocusOptions) => void | undefined;
+    /** The action element, which is also where the consumer's attributes land. */
+    el: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     dismiss: () => any;
     "update:selected": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{

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\">\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":""}
+{"version":3,"file":"VChip.js","names":[],"sources":["../../../src/components/VChip/VChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\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, onMounted, ref, useAttrs } from 'vue'\nimport type { StyleValue, VNode } 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'\nimport { isDev } from '../../utils/env'\nimport { flattenSlot } from '../../utils/vnode'\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 actionEl = ref<HTMLElement | null>(null)\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/**\n * An icon and no label at all: the chip becomes a square, as wide as it is tall. The default\n * slot is asked what it RENDERS, not whether it was passed: a wrapper forwarding an empty\n * label still hands one down.\n */\nfunction iconOnly() {\n  return (\n    flattenSlot(slots.default?.() as VNode[] | undefined).length === 0 &&\n    !!(slots.start || slots.end || props.iconStart || props.iconEnd)\n  )\n}\n\n// @devwarn\n// A chip drawn with an icon alone has no accessible name: the icon is decorative, so a\n// clickable, selectable or linked one is announced as a bare button or link. Nothing fails\n// visibly, hence the message. Read once, on mount, off the rendered pill: calling the slot\n// here, outside the render, would draw a Vue warning of its own.\nif (isDev) {\n  const attrs = useAttrs()\n  onMounted(() => {\n    if (\n      actionTag.value !== 'span' &&\n      actionEl.value?.parentElement?.hasAttribute('data-icon-only') &&\n      attrs['aria-label'] === undefined &&\n      attrs['aria-labelledby'] === undefined\n    ) {\n      console.warn(\n        '[VChip] a chip made of an icon alone has no accessible name: set aria-label or aria-labelledby on it.',\n      )\n    }\n  })\n}\n\n// A template ref on the chip reaches the pill, a layout box; the element that is focused,\n// named and clicked is the action inside it.\ndefineExpose({\n  /** Moves the focus to the chip's action: its button or link. */\n  focus: (options?: FocusOptions) => actionEl.value?.focus(options),\n  /** The action element, which is also where the consumer's attributes land. */\n  el: actionEl,\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      ref=\"actionEl\"\n      :aria-disabled=\"isInertLink ? 'true' : undefined\"\n      :aria-pressed=\"selectable ? selected : undefined\"\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      @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    block-size: 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. The shared table derives the four values\n     every adopter reads (styles/tones.css, `.v-tone[data-custom]`); the chip adds the\n     three only it paints, its hover and active steps and its outline, from the same colour\n     mixed with the theme's own text and surface. */\n  .v-chip[data-custom] {\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    --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    block-size: 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    inline-size: var(--control-action-size);\n    block-size: 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  /*\n   * Windows forced colors replace every background with the page's, so a selected chip would look\n   * exactly like the others there: the fill is its only cue, the state being in an ARIA\n   * attribute a sighted reader never sees. It takes the system's own selection pair\n   * instead, and opts out of the forcing for that element alone so the pair is painted.\n   *\n   * TRAP — the class is repeated to reach (0,6,0). The variant, hover and active rules\n   * reach (0,5,0), and with the forcing turned off any of them that still won would paint\n   * its tone over the selection, with HighlightText on top of it.\n   */\n  @media (forced-colors: active) {\n    .v-chip.v-chip.v-chip.v-chip[data-selected]:not([data-disabled]) {\n      forced-color-adjust: none;\n      background-color: Highlight;\n      color: HighlightText;\n      border-color: Highlight;\n      outline-color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1,14 +1,16 @@
-import { useMessages as e } from "../../i18n/state.js";
-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";
+import { isDev as e } from "../../utils/env.js";
+import { useMessages as t } from "../../i18n/state.js";
+import { iconProps as n } from "../VIcon/iconProps.js";
+import { customColorStyle as r } from "../../utils/css.js";
+import i from "../VIcon/VIcon.js";
+import { useInertLink as a } from "../../composables/useInertLink.js";
+import { useRootAttrs as o } from "../../composables/useRootAttrs.js";
+import { close as s } from "../VIcon/icons/close.js";
+import { flattenSlot as c } from "../../utils/vnode.js";
+import { check as l } from "../VIcon/icons/check.js";
+import { computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createVNode as m, defineComponent as h, guardReactiveProps as g, mergeModels as _, mergeProps as v, normalizeClass as y, normalizeProps as b, normalizeStyle as x, onMounted as S, openBlock as C, ref as w, renderSlot as T, resolveDynamicComponent as E, unref as D, useAttrs as O, useModel as k, useSlots as A, withCtx as j } from "vue";
 //#region src/components/VChip/VChip.vue?vue&type=script&setup=true&lang.ts
-var D = [
+var M = [
 	"data-variant",
 	"data-tone",
 	"data-custom",
@@ -18,10 +20,10 @@ var D = [
 	"data-selected",
 	"data-disabled",
 	"data-icon-only"
-], O = ["aria-label", "disabled"], k = /*@__PURE__*/ p({
+], N = ["aria-label", "disabled"], P = /*@__PURE__*/ h({
 	inheritAttrs: !1,
 	__name: "VChip",
-	props: /*@__PURE__*/ h({
+	props: /*@__PURE__*/ _({
 		variant: { default: "soft" },
 		tone: { default: "neutral" },
 		color: { default: void 0 },
@@ -44,7 +46,7 @@ var D = [
 			type: Boolean,
 			default: !1
 		},
-		checkIcon: { default: () => s },
+		checkIcon: { default: () => l },
 		iconStart: { default: void 0 },
 		iconEnd: { default: void 0 },
 		iconFilled: {
@@ -55,7 +57,7 @@ var D = [
 			type: Boolean,
 			default: !1
 		},
-		dismissIcon: { default: () => o },
+		dismissIcon: { default: () => s },
 		dismissLabel: { default: void 0 },
 		disabled: {
 			type: Boolean,
@@ -68,60 +70,72 @@ var D = [
 		},
 		selectedModifiers: {}
 	}),
-	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);
+	emits: /*@__PURE__*/ _(["dismiss"], ["update:selected"]),
+	setup(s, { expose: l }) {
+		let h = s, _ = t(), P = u(() => h.dismissLabel ?? _.value.common.dismiss), F = k(s, "selected"), I = A(), { rootClass: L, rootStyle: R, forwardedAttrs: z } = o(), { isLink: B, isInertLink: V, linkHref: H, attrs: U } = a({
+			href: () => h.selectable ? void 0 : h.href,
+			inert: () => h.disabled,
+			attrs: () => z.value
+		}), W = u(() => h.selectable ? "button" : B.value ? "a" : h.clickable ? "button" : "span"), G = u(() => [r(h.color), R.value]), K = w(null), q = u(() => h.check && h.selectable && F.value);
+		function J() {
+			return c(I.default?.()).length === 0 && !!(I.start || I.end || h.iconStart || h.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), {
+		if (e) {
+			let e = O();
+			S(() => {
+				W.value !== "span" && K.value?.parentElement?.hasAttribute("data-icon-only") && e["aria-label"] === void 0 && e["aria-labelledby"] === void 0 && console.warn("[VChip] a chip made of an icon alone has no accessible name: set aria-label or aria-labelledby on it.");
+			});
+		}
+		return l({
+			focus: (e) => K.value?.focus(e),
+			el: K
+		}), (e, t) => (C(), p("span", {
+			class: y(["v-chip v-control v-tone v-variant", D(L)]),
+			style: x(G.value),
+			"data-variant": s.variant,
+			"data-tone": s.tone,
+			"data-custom": s.color === void 0 ? void 0 : "",
+			"data-shape": s.shape,
+			"data-size": s.size,
+			"data-compact": s.compact ? "" : void 0,
+			"data-selected": s.selectable && F.value ? "" : void 0,
+			"data-disabled": s.disabled ? "" : void 0,
+			"data-icon-only": J() ? "" : void 0
+		}, [(C(), d(E(W.value), v({
+			ref_key: "actionEl",
+			ref: K,
+			"aria-disabled": D(V) ? "true" : void 0,
+			"aria-pressed": s.selectable ? F.value : void 0
+		}, D(U), {
 			class: "v-chip-action",
-			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)
+			type: W.value === "button" ? "button" : void 0,
+			href: D(H),
+			disabled: W.value === "button" ? s.disabled : void 0,
+			onClick: t[0] ||= (e) => s.selectable && !s.disabled && (F.value = !F.value)
 		}), {
-			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)])
+			default: j(() => [
+				q.value ? (C(), d(i, b(v({ key: 0 }, D(n)(s.checkIcon))), null, 16)) : T(e.$slots, "start", {}, () => [s.iconStart ? (C(), d(i, v({ key: 0 }, D(n)(s.iconStart), { filled: s.iconFilled }), null, 16, ["filled"])) : f("", !0)], void 0, 1),
+				T(e.$slots, "default"),
+				T(e.$slots, "end", {}, () => [s.iconEnd ? (C(), d(i, v({ key: 0 }, D(n)(s.iconEnd), { filled: s.iconFilled }), null, 16, ["filled"])) : f("", !0)])
 			]),
 			_: 3
 		}, 16, [
+			"aria-disabled",
+			"aria-pressed",
 			"type",
 			"href",
-			"disabled",
-			"aria-disabled",
-			"aria-pressed"
-		])), o.dismissible ? (b(), d("button", {
+			"disabled"
+		])), s.dismissible ? (C(), p("button", {
 			key: 0,
 			type: "button",
 			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));
+			"aria-label": P.value,
+			disabled: s.disabled,
+			onClick: t[1] ||= (t) => e.$emit("dismiss")
+		}, [m(i, b(g(D(n)(s.dismissIcon))), null, 16)], 8, N)) : f("", !0)], 14, M));
 	}
 });
 //#endregion
-export { k as default };
+export { P as default };
 
 //# sourceMappingURL=VChip.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"VChip.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmHA,IAAM,IAAQ,GAqBR,IAAI,EAAY,GAChB,IAAuB,QAAe,EAAM,gBAAgB,EAAE,MAAM,OAAO,OAAO,GAOlF,IAAW,EAAoB,GAAC,UAA8B,GAO9D,IAAQ,EAAA,GAaR,EAAE,cAAW,WAAW,GAAe,sBAAmB,EAAa,GAKvE,EACJ,WACA,gBACA,aACA,OAAO,MACL,EAAa;GACf,YAAa,EAAM,aAAa,KAAA,IAAY,EAAM;GAClD,aAAa,EAAM;GACnB,aAAa,EAAe;EAC9B,CAAC,GACK,IAAY,QAChB,EAAM,aAAa,WAAW,EAAO,QAAQ,MAAM,EAAM,YAAY,WAAW,MAClF,GAEM,IAAY,QAA2B,CAAC,EAAiB,EAAM,KAAK,GAAG,EAAc,KAAK,CAAC,GAE3F,IAAY,QAAe,EAAM,SAAS,EAAM,cAAc,EAAS,KAAK;EAKlF,SAAS,IAAW;GAClB,OAAO,CAAC,EAAM,WAAW,CAAC,EAAE,EAAM,SAAS,EAAM,OAAO,EAAM,aAAa,EAAM;EACnF;yBAIE,EA2CO,QAAA;GA1CJ,OAAK,EAAA,CAAA,qCAAwC,EAAA,CAAA,CAAS,CAAA;GACtD,OAAK,EAAE,EAAA,KAAS;GAChB,gBAAc,EAAA;GACd,aAAW,EAAA;GACX,eAAa,EAAA,UAAU,KAAA,IAAiB,KAAA,IAAR;GAChC,cAAY,EAAA;GACZ,aAAW,EAAA;GACX,gBAAc,EAAA,UAAO,KAAQ,KAAA;GAC7B,iBAAe,EAAA,cAAc,EAAA,QAAQ,KAAQ,KAAA;GAC7C,iBAAe,EAAA,WAAQ,KAAQ,KAAA;GAC/B,kBAAgB,EAAQ,IAAA,KAAU,KAAA;YAEnC,EAmBY,EAlBL,EAAA,KAAS,GADhB,EAEU,EAiBE,CAAA,GAjBS;GACnB,OAAM;GACL,MAAM,EAAA,UAAS,WAAA,WAA2B,KAAA;GAC1C,MAAM,EAAA,CAAA;GACN,UAAU,EAAA,UAAS,WAAgB,EAAA,WAAW,KAAA;GAC9C,iBAAe,EAAA,CAAA,IAAW,SAAY,KAAA;GACtC,gBAAc,EAAA,aAAa,EAAA,QAAW,KAAA;GACtC,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,cAAU,CAAK,EAAA,aAAa,EAAA,QAAQ,CAAI,EAAA;;oBAEQ;IAA3C,EAAA,SAAA,EAAA,GAAb,EAAwD,GAAA,EAAA,EAAA,EAAA,KAAA,EAAA,GAAxB,EAAA,CAAA,CAAS,CAAC,EAAA,SAAS,CAAA,CAAA,GAAA,MAAA,EAAA,KACnD,EAEO,EAAA,QAAA,SAAA,CAAA,SAAA,CADQ,EAAA,aAAA,EAAA,GAAb,EAA6E,GAA7E,EAA6E,EAAA,KAAA,EAAA,GAA7C,EAAA,CAAA,CAAS,CAAC,EAAA,SAAS,GAAA,EAAI,QAAQ,EAAA,WAAU,CAAA,GAAA,MAAA,IAAA,CAAA,QAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,KAAA,GAAA,CAAA;IAE3E,EAAQ,EAAA,QAAA,SAAA;IACR,EAEO,EAAA,QAAA,OAAA,CAAA,SAAA,CADQ,EAAA,WAAA,EAAA,GAAb,EAAyE,GAAzE,EAAyE,EAAA,KAAA,EAAA,GAA3C,EAAA,CAAA,CAAS,CAAC,EAAA,OAAO,GAAA,EAAI,QAAQ,EAAA,WAAU,CAAA,GAAA,MAAA,IAAA,CAAA,QAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA;;;;;;;;;OAIjE,EAAA,eAAA,EAAA,GADR,EASS,UAAA;;GAPP,MAAK;GACL,OAAM;GACL,cAAY,EAAA;GACZ,UAAU,EAAA;GACV,SAAK,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,SAAA;MAEb,EAAyC,GAAA,EAAA,EAA1B,EAAA,CAAA,CAAS,CAAC,EAAA,WAAW,CAAA,CAAA,GAAA,MAAA,EAAA,CAAA,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,IAAA,CAAA"}
+{"version":3,"file":"VChip.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/VChip/VChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\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, onMounted, ref, useAttrs } from 'vue'\nimport type { StyleValue, VNode } 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'\nimport { isDev } from '../../utils/env'\nimport { flattenSlot } from '../../utils/vnode'\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 actionEl = ref<HTMLElement | null>(null)\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/**\n * An icon and no label at all: the chip becomes a square, as wide as it is tall. The default\n * slot is asked what it RENDERS, not whether it was passed: a wrapper forwarding an empty\n * label still hands one down.\n */\nfunction iconOnly() {\n  return (\n    flattenSlot(slots.default?.() as VNode[] | undefined).length === 0 &&\n    !!(slots.start || slots.end || props.iconStart || props.iconEnd)\n  )\n}\n\n// @devwarn\n// A chip drawn with an icon alone has no accessible name: the icon is decorative, so a\n// clickable, selectable or linked one is announced as a bare button or link. Nothing fails\n// visibly, hence the message. Read once, on mount, off the rendered pill: calling the slot\n// here, outside the render, would draw a Vue warning of its own.\nif (isDev) {\n  const attrs = useAttrs()\n  onMounted(() => {\n    if (\n      actionTag.value !== 'span' &&\n      actionEl.value?.parentElement?.hasAttribute('data-icon-only') &&\n      attrs['aria-label'] === undefined &&\n      attrs['aria-labelledby'] === undefined\n    ) {\n      console.warn(\n        '[VChip] a chip made of an icon alone has no accessible name: set aria-label or aria-labelledby on it.',\n      )\n    }\n  })\n}\n\n// A template ref on the chip reaches the pill, a layout box; the element that is focused,\n// named and clicked is the action inside it.\ndefineExpose({\n  /** Moves the focus to the chip's action: its button or link. */\n  focus: (options?: FocusOptions) => actionEl.value?.focus(options),\n  /** The action element, which is also where the consumer's attributes land. */\n  el: actionEl,\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      ref=\"actionEl\"\n      :aria-disabled=\"isInertLink ? 'true' : undefined\"\n      :aria-pressed=\"selectable ? selected : undefined\"\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      @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    block-size: 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. The shared table derives the four values\n     every adopter reads (styles/tones.css, `.v-tone[data-custom]`); the chip adds the\n     three only it paints, its hover and active steps and its outline, from the same colour\n     mixed with the theme's own text and surface. */\n  .v-chip[data-custom] {\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    --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    block-size: 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    inline-size: var(--control-action-size);\n    block-size: 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  /*\n   * Windows forced colors replace every background with the page's, so a selected chip would look\n   * exactly like the others there: the fill is its only cue, the state being in an ARIA\n   * attribute a sighted reader never sees. It takes the system's own selection pair\n   * instead, and opts out of the forcing for that element alone so the pair is painted.\n   *\n   * TRAP — the class is repeated to reach (0,6,0). The variant, hover and active rules\n   * reach (0,5,0), and with the forcing turned off any of them that still won would paint\n   * its tone over the selection, with HighlightText on top of it.\n   */\n  @media (forced-colors: active) {\n    .v-chip.v-chip.v-chip.v-chip[data-selected]:not([data-disabled]) {\n      forced-color-adjust: none;\n      background-color: Highlight;\n      color: HighlightText;\n      border-color: Highlight;\n      outline-color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqHA,IAAM,IAAQ,GAqBR,IAAI,EAAY,GAChB,IAAuB,QAAe,EAAM,gBAAgB,EAAE,MAAM,OAAO,OAAO,GAOlF,IAAW,EAAoB,GAAC,UAA8B,GAO9D,IAAQ,EAAA,GAaR,EAAE,cAAW,WAAW,GAAe,sBAAmB,EAAa,GAKvE,EACJ,WACA,gBACA,aACA,OAAO,MACL,EAAa;GACf,YAAa,EAAM,aAAa,KAAA,IAAY,EAAM;GAClD,aAAa,EAAM;GACnB,aAAa,EAAe;EAC9B,CAAC,GACK,IAAY,QAChB,EAAM,aAAa,WAAW,EAAO,QAAQ,MAAM,EAAM,YAAY,WAAW,MAClF,GAEM,IAAY,QAA2B,CAAC,EAAiB,EAAM,KAAK,GAAG,EAAc,KAAK,CAAC,GAE3F,IAAW,EAAwB,IAAI,GAEvC,IAAY,QAAe,EAAM,SAAS,EAAM,cAAc,EAAS,KAAK;EASlF,SAAS,IAAW;GAClB,OACE,EAAY,EAAM,UAAU,CAAwB,CAAC,CAAC,WAAW,KACjE,CAAC,EAAE,EAAM,SAAS,EAAM,OAAO,EAAM,aAAa,EAAM;EAE5D;EAOA,IAAI,GAAO;GACT,IAAM,IAAQ,EAAS;GACvB,QAAgB;IACd,AACE,EAAU,UAAU,UACpB,EAAS,OAAO,eAAe,aAAa,gBAAgB,KAC5D,EAAM,kBAAkB,KAAA,KACxB,EAAM,uBAAuB,KAAA,KAE7B,QAAQ,KACN,uGACF;GAEJ,CAAC;EACH;SAIA,EAAa;GAEX,QAAQ,MAA2B,EAAS,OAAO,MAAM,CAAO;GAEhE,IAAI;EACN,CAAC,mBAIC,EA4CO,QAAA;GA3CJ,OAAK,EAAA,CAAA,qCAAwC,EAAA,CAAA,CAAS,CAAA;GACtD,OAAK,EAAE,EAAA,KAAS;GAChB,gBAAc,EAAA;GACd,aAAW,EAAA;GACX,eAAa,EAAA,UAAU,KAAA,IAAiB,KAAA,IAAR;GAChC,cAAY,EAAA;GACZ,aAAW,EAAA;GACX,gBAAc,EAAA,UAAO,KAAQ,KAAA;GAC7B,iBAAe,EAAA,cAAc,EAAA,QAAQ,KAAQ,KAAA;GAC7C,iBAAe,EAAA,WAAQ,KAAQ,KAAA;GAC/B,kBAAgB,EAAQ,IAAA,KAAU,KAAA;YAEnC,EAoBY,EAnBL,EAAA,KAAS,GADhB,EAoBY;YAlBN;GAAJ,KAAI;GACH,iBAAe,EAAA,CAAA,IAAW,SAAY,KAAA;GACtC,gBAAc,EAAA,aAAa,EAAA,QAAW,KAAA;KAC/B,EAAA,CAAA,GAAW;GACnB,OAAM;GACL,MAAM,EAAA,UAAS,WAAA,WAA2B,KAAA;GAC1C,MAAM,EAAA,CAAA;GACN,UAAU,EAAA,UAAS,WAAgB,EAAA,WAAW,KAAA;GAC9C,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,cAAU,CAAK,EAAA,aAAa,EAAA,QAAQ,CAAI,EAAA;;oBAEQ;IAA3C,EAAA,SAAA,EAAA,GAAb,EAAwD,GAAA,EAAA,EAAA,EAAA,KAAA,EAAA,GAAxB,EAAA,CAAA,CAAS,CAAC,EAAA,SAAS,CAAA,CAAA,GAAA,MAAA,EAAA,KACnD,EAEO,EAAA,QAAA,SAAA,CAAA,SAAA,CADQ,EAAA,aAAA,EAAA,GAAb,EAA6E,GAA7E,EAA6E,EAAA,KAAA,EAAA,GAA7C,EAAA,CAAA,CAAS,CAAC,EAAA,SAAS,GAAA,EAAI,QAAQ,EAAA,WAAU,CAAA,GAAA,MAAA,IAAA,CAAA,QAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,KAAA,GAAA,CAAA;IAE3E,EAAQ,EAAA,QAAA,SAAA;IACR,EAEO,EAAA,QAAA,OAAA,CAAA,SAAA,CADQ,EAAA,WAAA,EAAA,GAAb,EAAyE,GAAzE,EAAyE,EAAA,KAAA,EAAA,GAA3C,EAAA,CAAA,CAAS,CAAC,EAAA,OAAO,GAAA,EAAI,QAAQ,EAAA,WAAU,CAAA,GAAA,MAAA,IAAA,CAAA,QAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA;;;;;;;;;OAIjE,EAAA,eAAA,EAAA,GADR,EASS,UAAA;;GAPP,MAAK;GACL,OAAM;GACL,cAAY,EAAA;GACZ,UAAU,EAAA;GACV,SAAK,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,SAAA;MAEb,EAAyC,GAAA,EAAA,EAA1B,EAAA,CAAA,CAAS,CAAC,EAAA,WAAW,CAAA,CAAA,GAAA,MAAA,EAAA,CAAA,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,IAAA,CAAA"}

package/dist/components/VCombobox/VCombobox.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-combobox{anchor-scope:--combobox-anchor;width:100%;font-family:var(--vectis-text-family)}.v-combobox-control{display:block}.v-combobox-control .v-input-field{anchor-name:--combobox-anchor}.v-combobox-panel{max-block-size:var(--vectis-control-size-combobox-list-max-block);overflow:auto}.v-combobox-chevron,.v-combobox-spinner{color:var(--vectis-color-text-muted)}.v-combobox-chevron{transition:rotate var(--vectis-duration-fast) var(--vectis-ease-default)}.v-combobox[data-open] .v-combobox-chevron{rotate:180deg}.v-combobox[data-collapsed] .v-input-control{width:0;height:0;padding:0;position:absolute}.v-combobox-text{text-overflow:ellipsis;white-space:nowrap;flex:0 auto;min-width:0;overflow:hidden}.v-combobox:not([data-collapsed]) .v-combobox-text{max-inline-size:50%}.v-combobox-overflow{white-space:nowrap;color:var(--vectis-color-text-muted);flex:none}.v-combobox:has(.v-combobox-text){min-inline-size:0}.v-combobox-state{align-items:center;gap:var(--control-gap);min-height:var(--control-height);padding:var(--vectis-space-1) var(--control-padding-inline);font-size:var(--control-font-size);color:var(--vectis-color-text-muted);flex:none;display:flex}.v-combobox-more{min-height:var(--vectis-space-6);color:var(--vectis-color-text-muted);flex:none;justify-content:center;align-items:center;display:flex}@media (prefers-reduced-motion:reduce){.v-combobox-chevron{transition:none}}}
+@layer vectis.components{.v-combobox{anchor-scope:--combobox-anchor;width:100%;font-family:var(--vectis-text-family)}.v-combobox-control{display:block}.v-combobox-control .v-input-field{anchor-name:--combobox-anchor}.v-combobox-panel{max-block-size:var(--vectis-control-size-combobox-list-max-block);overflow:auto}.v-combobox-chevron,.v-combobox-spinner{color:var(--vectis-color-text-muted)}.v-combobox-chevron{transition:rotate var(--vectis-duration-fast) var(--vectis-ease-default)}.v-combobox[data-open] .v-combobox-chevron{rotate:180deg}.v-combobox[data-collapsed] .v-input-control{width:0;height:0;padding:0;position:absolute}.v-combobox-text{text-overflow:ellipsis;white-space:nowrap;flex:0 auto;min-width:0;overflow:hidden}.v-combobox:not([data-collapsed]) .v-combobox-text{max-inline-size:50%}.v-combobox-overflow{white-space:nowrap;color:var(--vectis-color-text-muted);flex:none}.v-combobox:has(.v-combobox-text){min-inline-size:0}.v-combobox-state{align-items:center;gap:var(--control-gap);min-height:var(--control-height);padding:var(--vectis-space-1) var(--control-padding-inline);font-size:var(--control-font-size);color:var(--vectis-color-text-muted);flex:none;display:flex}.v-combobox-more{min-height:var(--vectis-control-height-xs);color:var(--vectis-color-text-muted);flex:none;justify-content:center;align-items:center;display:flex}@media (prefers-reduced-motion:reduce){.v-combobox-chevron{transition:none}}}