vectis-ui 0.1.0

package/dist/components/VCheckbox/VCheckbox.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"VCheckbox.js","names":[],"sources":["../../../src/components/VCheckbox/VCheckbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watchEffect } from 'vue'\n\n/**\n * A checkbox whose square is drawn by the design system rather than by the browser.\n *\n * The trick is that the real `<input type=\"checkbox\">` is still there: it is only\n * made invisible, never removed. It therefore keeps everything a checkbox is owed —\n * it takes focus, answers the keyboard, is submitted with the form and turns invalid\n * on its own — and the drawn square merely follows its state through CSS.\n *\n * The only JavaScript besides the v-model is the indeterminate state, that third\n * \"partially checked\" look: it exists solely as a DOM property, with no HTML\n * attribute to set it from a template.\n */\ninterface CheckboxProps {\n  /**\n   * Shows the box as partially checked, a dash instead of a tick. This is what a\n   * parent checkbox looks like when some of its children are ticked and others are\n   * not; it is a state of its own, not a value the v-model can hold.\n   */\n  indeterminate?: boolean\n  /** Which side of the box the label sits on. */\n  labelPosition?: 'start' | 'end'\n  /**\n   * Pushes the label and the box to opposite ends of the line, the row taking the\n   * full width available. This is the usual shape for a list of settings.\n   */\n  spread?: boolean\n  /**\n   * Marks the field as invalid, which colours the box and tells assistive technology\n   * so. Use it for a rule the browser cannot check by itself; native validity is\n   * already handled without it.\n   */\n  invalid?: boolean\n  /** Makes the checkbox unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<CheckboxProps>(), {\n  indeterminate: false,\n  labelPosition: 'end',\n  spread: false,\n  invalid: false,\n  disabled: false,\n})\n\n// @a11y\n// The root element is the <label>, so the attributes the consumer passes must be\n// redirected: `name`, `value`, `required` and the aria-* belong on the input, and\n// left on the label they would take part in neither the form nor the accessibility\n// tree.\ndefineOptions({ inheritAttrs: false })\n\nconst model = defineModel<boolean>({ default: false })\n\ndefineSlots<{\n  /** The label. It is clickable, the whole component being wrapped in a `<label>`. */\n  default?(): unknown\n}>()\n\nconst inputEl = ref<HTMLInputElement | null>(null)\n\n// @ssr @core\n// On the server there is no element, so the effect simply does nothing. The\n// `flush: 'post'` is load-bearing: it makes the effect run AFTER the DOM has been\n// updated, and on the very first pass the template ref is not filled in before\n// that — in the default timing the property would be written to nothing at all.\nwatchEffect(\n  () => {\n    if (inputEl.value) inputEl.value.indeterminate = props.indeterminate\n  },\n  { flush: 'post' },\n)\n</script>\n\n<template>\n  <label class=\"v-checkbox\" :data-label-position=\"labelPosition\" :data-spread=\"spread || undefined\">\n    <input\n      ref=\"inputEl\"\n      v-model=\"model\"\n      type=\"checkbox\"\n      class=\"v-checkbox-input\"\n      v-bind=\"$attrs\"\n      :disabled=\"disabled\"\n      :aria-invalid=\"invalid || undefined\"\n    />\n    <span class=\"v-checkbox-box\" aria-hidden=\"true\">\n      <svg class=\"v-checkbox-mark\" viewBox=\"0 0 12 12\">\n        <path\n          class=\"v-checkbox-mark-check\"\n          d=\"M2.5 6.5l2.5 2.5 4.5-5.5\"\n          fill=\"none\"\n          stroke=\"currentcolor\"\n          stroke-width=\"1.75\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          class=\"v-checkbox-mark-dash\"\n          d=\"M3 6h6\"\n          fill=\"none\"\n          stroke=\"currentcolor\"\n          stroke-width=\"1.75\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </span>\n    <span v-if=\"$slots.default\" class=\"v-checkbox-label\"><slot /></span>\n  </label>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-checkbox {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-2);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-label-size);\n    color: var(--vectis-color-text);\n    cursor: pointer;\n  }\n\n  /* The input is taken out of the flow by its absolute position, so reversing the\n     row only ever swaps the box and the label. */\n  .v-checkbox[data-label-position='start'] {\n    flex-direction: row-reverse;\n  }\n\n  .v-checkbox[data-spread] {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  /* Hidden with `opacity` and never with `display: none`, which would take the input\n     out of the tab order and out of the form. It stays focusable and submitted; only\n     the browser's own drawing of it disappears. */\n  .v-checkbox-input {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  .v-checkbox-box {\n    display: inline-grid;\n    place-items: center;\n    width: var(--vectis-control-size-check);\n    height: var(--vectis-control-size-check);\n    flex: none;\n    background: var(--vectis-color-surface);\n    border: var(--vectis-control-border-width) solid var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-sm);\n    color: var(--vectis-color-text-on-accent);\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-checkbox-mark {\n    width: var(--vectis-control-size-check-mark);\n    height: var(--vectis-control-size-check-mark);\n  }\n\n  .v-checkbox-mark-check,\n  .v-checkbox-mark-dash {\n    opacity: 0;\n    transition: opacity var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-checkbox:hover .v-checkbox-input:not(:disabled, :checked, :indeterminate) + .v-checkbox-box {\n    border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  .v-checkbox-input:checked + .v-checkbox-box,\n  .v-checkbox-input:indeterminate + .v-checkbox-box {\n    background: var(--vectis-color-accent);\n    border-color: var(--vectis-color-accent);\n  }\n\n  .v-checkbox:hover\n    .v-checkbox-input:not(:disabled):is(:checked, :indeterminate)\n    + .v-checkbox-box {\n    background: var(--vectis-color-accent-hover);\n    border-color: var(--vectis-color-accent-hover);\n  }\n\n  .v-checkbox-input:checked + .v-checkbox-box .v-checkbox-mark-check {\n    opacity: 1;\n  }\n\n  .v-checkbox-input:indeterminate + .v-checkbox-box .v-checkbox-mark-check {\n    opacity: 0;\n  }\n\n  .v-checkbox-input:indeterminate + .v-checkbox-box .v-checkbox-mark-dash {\n    opacity: 1;\n  }\n\n  .v-checkbox-input:focus-visible + .v-checkbox-box {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-checkbox-input:user-invalid + .v-checkbox-box,\n  .v-checkbox-input[aria-invalid='true'] + .v-checkbox-box {\n    border-color: var(--vectis-color-danger);\n  }\n\n  /* A disabled checkbox greys out through the colour tokens, the same ones VButton\n     uses, and never through opacity. */\n  .v-checkbox:has(.v-checkbox-input:disabled) {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  .v-checkbox-input:disabled + .v-checkbox-box {\n    background: var(--vectis-color-surface-muted);\n    border-color: var(--vectis-color-border);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-checkbox-box,\n    .v-checkbox-mark-check,\n    .v-checkbox-mark-dash {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -0,0 +1,83 @@
+import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, defineComponent as r, mergeModels as i, mergeProps as a, openBlock as o, ref as s, renderSlot as c, useModel as l, vModelCheckbox as u, watchEffect as d, withDirectives as f } from "vue";
+//#region src/components/VCheckbox/VCheckbox.vue?vue&type=script&setup=true&lang.ts
+var p = ["data-label-position", "data-spread"], m = ["disabled", "aria-invalid"], h = {
+	key: 0,
+	class: "v-checkbox-label"
+}, g = /*@__PURE__*/ r({
+	inheritAttrs: !1,
+	__name: "VCheckbox",
+	props: /*@__PURE__*/ i({
+		indeterminate: {
+			type: Boolean,
+			default: !1
+		},
+		labelPosition: { default: "end" },
+		spread: {
+			type: Boolean,
+			default: !1
+		},
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(r) {
+		let i = r, g = l(r, "modelValue"), _ = s(null);
+		return d(() => {
+			_.value && (_.value.indeterminate = i.indeterminate);
+		}, { flush: "post" }), (i, s) => (o(), t("label", {
+			class: "v-checkbox",
+			"data-label-position": r.labelPosition,
+			"data-spread": r.spread || void 0
+		}, [
+			f(n("input", a({
+				ref_key: "inputEl",
+				ref: _,
+				"onUpdate:modelValue": s[0] ||= (e) => g.value = e,
+				type: "checkbox",
+				class: "v-checkbox-input"
+			}, i.$attrs, {
+				disabled: r.disabled,
+				"aria-invalid": r.invalid || void 0
+			}), null, 16, m), [[u, g.value]]),
+			s[1] ||= n("span", {
+				class: "v-checkbox-box",
+				"aria-hidden": "true"
+			}, [n("svg", {
+				class: "v-checkbox-mark",
+				viewBox: "0 0 12 12"
+			}, [n("path", {
+				class: "v-checkbox-mark-check",
+				d: "M2.5 6.5l2.5 2.5 4.5-5.5",
+				fill: "none",
+				stroke: "currentcolor",
+				"stroke-width": "1.75",
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round"
+			}), n("path", {
+				class: "v-checkbox-mark-dash",
+				d: "M3 6h6",
+				fill: "none",
+				stroke: "currentcolor",
+				"stroke-width": "1.75",
+				"stroke-linecap": "round"
+			})])], -1),
+			i.$slots.default ? (o(), t("span", h, [c(i.$slots, "default")])) : e("", !0)
+		], 8, p));
+	}
+});
+//#endregion
+export { g as default };
+
+//# sourceMappingURL=VCheckbox.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VCheckbox.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../src/components/VCheckbox/VCheckbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watchEffect } from 'vue'\n\n/**\n * A checkbox whose square is drawn by the design system rather than by the browser.\n *\n * The trick is that the real `<input type=\"checkbox\">` is still there: it is only\n * made invisible, never removed. It therefore keeps everything a checkbox is owed —\n * it takes focus, answers the keyboard, is submitted with the form and turns invalid\n * on its own — and the drawn square merely follows its state through CSS.\n *\n * The only JavaScript besides the v-model is the indeterminate state, that third\n * \"partially checked\" look: it exists solely as a DOM property, with no HTML\n * attribute to set it from a template.\n */\ninterface CheckboxProps {\n  /**\n   * Shows the box as partially checked, a dash instead of a tick. This is what a\n   * parent checkbox looks like when some of its children are ticked and others are\n   * not; it is a state of its own, not a value the v-model can hold.\n   */\n  indeterminate?: boolean\n  /** Which side of the box the label sits on. */\n  labelPosition?: 'start' | 'end'\n  /**\n   * Pushes the label and the box to opposite ends of the line, the row taking the\n   * full width available. This is the usual shape for a list of settings.\n   */\n  spread?: boolean\n  /**\n   * Marks the field as invalid, which colours the box and tells assistive technology\n   * so. Use it for a rule the browser cannot check by itself; native validity is\n   * already handled without it.\n   */\n  invalid?: boolean\n  /** Makes the checkbox unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<CheckboxProps>(), {\n  indeterminate: false,\n  labelPosition: 'end',\n  spread: false,\n  invalid: false,\n  disabled: false,\n})\n\n// @a11y\n// The root element is the <label>, so the attributes the consumer passes must be\n// redirected: `name`, `value`, `required` and the aria-* belong on the input, and\n// left on the label they would take part in neither the form nor the accessibility\n// tree.\ndefineOptions({ inheritAttrs: false })\n\nconst model = defineModel<boolean>({ default: false })\n\ndefineSlots<{\n  /** The label. It is clickable, the whole component being wrapped in a `<label>`. */\n  default?(): unknown\n}>()\n\nconst inputEl = ref<HTMLInputElement | null>(null)\n\n// @ssr @core\n// On the server there is no element, so the effect simply does nothing. The\n// `flush: 'post'` is load-bearing: it makes the effect run AFTER the DOM has been\n// updated, and on the very first pass the template ref is not filled in before\n// that — in the default timing the property would be written to nothing at all.\nwatchEffect(\n  () => {\n    if (inputEl.value) inputEl.value.indeterminate = props.indeterminate\n  },\n  { flush: 'post' },\n)\n</script>\n\n<template>\n  <label class=\"v-checkbox\" :data-label-position=\"labelPosition\" :data-spread=\"spread || undefined\">\n    <input\n      ref=\"inputEl\"\n      v-model=\"model\"\n      type=\"checkbox\"\n      class=\"v-checkbox-input\"\n      v-bind=\"$attrs\"\n      :disabled=\"disabled\"\n      :aria-invalid=\"invalid || undefined\"\n    />\n    <span class=\"v-checkbox-box\" aria-hidden=\"true\">\n      <svg class=\"v-checkbox-mark\" viewBox=\"0 0 12 12\">\n        <path\n          class=\"v-checkbox-mark-check\"\n          d=\"M2.5 6.5l2.5 2.5 4.5-5.5\"\n          fill=\"none\"\n          stroke=\"currentcolor\"\n          stroke-width=\"1.75\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          class=\"v-checkbox-mark-dash\"\n          d=\"M3 6h6\"\n          fill=\"none\"\n          stroke=\"currentcolor\"\n          stroke-width=\"1.75\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </span>\n    <span v-if=\"$slots.default\" class=\"v-checkbox-label\"><slot /></span>\n  </label>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-checkbox {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-2);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-label-size);\n    color: var(--vectis-color-text);\n    cursor: pointer;\n  }\n\n  /* The input is taken out of the flow by its absolute position, so reversing the\n     row only ever swaps the box and the label. */\n  .v-checkbox[data-label-position='start'] {\n    flex-direction: row-reverse;\n  }\n\n  .v-checkbox[data-spread] {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  /* Hidden with `opacity` and never with `display: none`, which would take the input\n     out of the tab order and out of the form. It stays focusable and submitted; only\n     the browser's own drawing of it disappears. */\n  .v-checkbox-input {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  .v-checkbox-box {\n    display: inline-grid;\n    place-items: center;\n    width: var(--vectis-control-size-check);\n    height: var(--vectis-control-size-check);\n    flex: none;\n    background: var(--vectis-color-surface);\n    border: var(--vectis-control-border-width) solid var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-sm);\n    color: var(--vectis-color-text-on-accent);\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-checkbox-mark {\n    width: var(--vectis-control-size-check-mark);\n    height: var(--vectis-control-size-check-mark);\n  }\n\n  .v-checkbox-mark-check,\n  .v-checkbox-mark-dash {\n    opacity: 0;\n    transition: opacity var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-checkbox:hover .v-checkbox-input:not(:disabled, :checked, :indeterminate) + .v-checkbox-box {\n    border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  .v-checkbox-input:checked + .v-checkbox-box,\n  .v-checkbox-input:indeterminate + .v-checkbox-box {\n    background: var(--vectis-color-accent);\n    border-color: var(--vectis-color-accent);\n  }\n\n  .v-checkbox:hover\n    .v-checkbox-input:not(:disabled):is(:checked, :indeterminate)\n    + .v-checkbox-box {\n    background: var(--vectis-color-accent-hover);\n    border-color: var(--vectis-color-accent-hover);\n  }\n\n  .v-checkbox-input:checked + .v-checkbox-box .v-checkbox-mark-check {\n    opacity: 1;\n  }\n\n  .v-checkbox-input:indeterminate + .v-checkbox-box .v-checkbox-mark-check {\n    opacity: 0;\n  }\n\n  .v-checkbox-input:indeterminate + .v-checkbox-box .v-checkbox-mark-dash {\n    opacity: 1;\n  }\n\n  .v-checkbox-input:focus-visible + .v-checkbox-box {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-checkbox-input:user-invalid + .v-checkbox-box,\n  .v-checkbox-input[aria-invalid='true'] + .v-checkbox-box {\n    border-color: var(--vectis-color-danger);\n  }\n\n  /* A disabled checkbox greys out through the colour tokens, the same ones VButton\n     uses, and never through opacity. */\n  .v-checkbox:has(.v-checkbox-input:disabled) {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  .v-checkbox-input:disabled + .v-checkbox-box {\n    background: var(--vectis-color-surface-muted);\n    border-color: var(--vectis-color-border);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-checkbox-box,\n    .v-checkbox-mark-check,\n    .v-checkbox-mark-dash {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCA,IAAM,IAAQ,GAeR,IAAQ,EAAoB,GAAA,YAAmB,GAO/C,IAAU,EAA6B,IAAI;SAOjD,QACQ;GACJ,AAAI,EAAQ,UAAO,EAAQ,MAAM,gBAAgB,EAAM;EACzD,GACA,EAAE,OAAO,OAAO,CAClB,mBAIE,EAgCQ,SAAA;GAhCD,OAAM;GAAc,uBAAqB,EAAA;GAAgB,eAAa,EAAA,UAAU,KAAA;;KACrF,EAQE,SARF,EAQE;aAPI;IAAJ,KAAI;6CACU,QAAA;IACd,MAAK;IACL,OAAM;MACEA,EAAAA,QAAM;IACb,UAAU,EAAA;IACV,gBAAc,EAAA,WAAW,KAAA;0BALjB,EAAA,KAAK,CAAA,CAAA;YAOhB,EAoBO,QAAA;IApBD,OAAM;IAAiB,eAAY;OACvC,EAkBM,OAAA;IAlBD,OAAM;IAAkB,SAAQ;OACnC,EAQE,QAAA;IAPA,OAAM;IACN,GAAE;IACF,MAAK;IACL,QAAO;IACP,gBAAa;IACb,kBAAe;IACf,mBAAgB;OAElB,EAOE,QAAA;IANA,OAAM;IACN,GAAE;IACF,MAAK;IACL,QAAO;IACP,gBAAa;IACb,kBAAe;;GAITC,EAAAA,OAAO,WAAA,EAAA,GAAnB,EAAoE,QAApE,GAAoE,CAAf,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}

package/dist/components/VChip/VChip.css

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

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

@@ -0,0 +1,120 @@
+import { IconSource } from '../VIcon/types.js';
+/**
+ * A chip: a small labelled pill standing for a value — a filter in force, a tag, a
+ * file chosen, a person picked in a field.
+ *
+ * What it renders follows what it is asked to DO, and each shape is the native element
+ * for it, so focus, keyboard and disabling come free: a chip that can be selected is a
+ * button reporting whether it is pressed, one that leads somewhere is a link, one that
+ * merely reacts to clicks is a button, and one that does none of those is plain text
+ * with no hover at all.
+ *
+ * A chip that can be removed carries a SECOND button, beside the first and never
+ * inside it: a button within a button is invalid HTML and unreachable by keyboard.
+ *
+ * The only JavaScript makes a disabled link inert — the platform having no `disabled`
+ * for links — and splits the attributes the consumer passes between the pill and the
+ * element that actually acts.
+ */
+interface ChipProps {
+    /**
+     * How strongly the chip is painted: a tinted background, the full colour, or a
+     * border alone.
+     */
+    variant?: 'soft' | 'solid' | 'outline';
+    /** What the chip means, expressed as a colour. */
+    tone?: 'neutral' | 'accent' | 'danger' | 'success' | 'warning';
+    /**
+     * 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
+     * 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.
+     */
+    color?: string;
+    /** The silhouette: softly rounded corners, or a full pill. */
+    shape?: 'chip' | 'pill';
+    /** The height of the chip. */
+    size?: 'xs' | 'sm';
+    /** Takes 4px off the height, leaving the padding, the text and the icons as they are. */
+    compact?: boolean;
+    /** Makes the chip a button that reacts to clicks, without holding a state. */
+    clickable?: boolean;
+    /**
+     * Where the chip leads, which makes it a link. A disabled link is made inert by
+     * hand.
+     */
+    href?: string;
+    /**
+     * Makes the chip something that stays chosen, bound to `v-model:selected`. It wins
+     * over `href` and `clickable`.
+     */
+    selectable?: boolean;
+    /**
+     * Shows a tick before the label while the chip is selected. It REPLACES whatever
+     * start icon was given, so the two are never shown together.
+     */
+    check?: boolean;
+    /** An icon before the label. The `#start` slot replaces it. */
+    iconStart?: IconSource;
+    /** An icon after the label. The `#end` slot replaces it. */
+    iconEnd?: IconSource;
+    /**
+     * Adds a button that asks for the chip to be removed. It only EMITS that request:
+     * actually taking the chip away is the consumer's decision.
+     */
+    dismissible?: boolean;
+    /** The icon of that removal button. */
+    dismissIcon?: IconSource;
+    /**
+     * What the removal button does, in words. It falls back to the design system
+     * dictionary.
+     */
+    dismissLabel?: string;
+    /** Makes the chip unusable, greyed out through the colour tokens. */
+    disabled?: boolean;
+}
+type __VLS_Props = ChipProps;
+type __VLS_Slots = {
+    /** The label. It may be left out entirely, which gives a chip made of icons alone. */
+    default?(): unknown;
+    /** Content before the label, which takes the place of `iconStart`. */
+    start?(): unknown;
+    /** Content after the label, which takes the place of `iconEnd`. */
+    end?(): unknown;
+};
+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, {
+    dismiss: () => any;
+    "update:selected": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onDismiss?: (() => any) | undefined;
+    "onUpdate:selected"?: ((value: boolean) => any) | undefined;
+}>, {
+    check: boolean;
+    size: "xs" | "sm";
+    variant: "soft" | "solid" | "outline";
+    tone: "neutral" | "accent" | "danger" | "success" | "warning";
+    compact: boolean;
+    href: string;
+    disabled: boolean;
+    iconStart: IconSource;
+    iconEnd: IconSource;
+    shape: "chip" | "pill";
+    color: string;
+    clickable: boolean;
+    selectable: boolean;
+    dismissible: boolean;
+    dismissIcon: IconSource;
+    dismissLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VChip/VChip.js

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"VChip.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$emit"],"sources":["../../../src/components/VChip/VChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useAttrs, useSlots } from 'vue'\nimport type { StyleValue } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { check as checkIcon } from '../VIcon/icons/check'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport type { IconSource } from '../VIcon/types'\nimport { useMessages } from '../../i18n/state'\n\n// @core\n/**\n * A chip: a small labelled pill standing for a value — a filter in force, a tag, a\n * file chosen, a person picked in a field.\n *\n * What it renders follows what it is asked to DO, and each shape is the native element\n * for it, so focus, keyboard and disabling come free: a chip that can be selected is a\n * button reporting whether it is pressed, one that leads somewhere is a link, one that\n * merely reacts to clicks is a button, and one that does none of those is plain text\n * with no hover at all.\n *\n * A chip that can be removed carries a SECOND button, beside the first and never\n * inside it: a button within a button is invalid HTML and unreachable by keyboard.\n *\n * The only JavaScript makes a disabled link inert — the platform having no `disabled`\n * for links — and splits the attributes the consumer passes between the pill and the\n * element that actually acts.\n */\ninterface ChipProps {\n  /**\n   * How strongly the chip is painted: a tinted background, the full colour, or a\n   * border alone.\n   */\n  variant?: 'soft' | 'solid' | 'outline'\n  /** What the chip means, expressed as a colour. */\n  tone?: 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\n  /**\n   * A colour of your own (hex, CSS name or `oklch()`), which REPLACES the tone. Every\n   * shade it needs — the tinted background, the text, the hover — is derived from that\n   * one colour, so it follows the light and the dark theme with nothing to rebuild.\n   * Only the contrast of the text on a fully coloured chip is yours to check.\n   */\n  color?: string\n  /** The silhouette: softly rounded corners, or a full pill. */\n  shape?: 'chip' | 'pill'\n  /** The height of the chip. */\n  size?: 'xs' | 'sm'\n  /** Takes 4px off the height, leaving the padding, the text and the icons as they are. */\n  compact?: boolean\n  /** Makes the chip a button that reacts to clicks, without holding a state. */\n  clickable?: boolean\n  /**\n   * Where the chip leads, which makes it a link. A disabled link is made inert by\n   * hand.\n   */\n  href?: string\n  /**\n   * Makes the chip something that stays chosen, bound to `v-model:selected`. It wins\n   * over `href` and `clickable`.\n   */\n  selectable?: boolean\n  /**\n   * Shows a tick before the label while the chip is selected. It REPLACES whatever\n   * start icon was given, so the two are never shown together.\n   */\n  check?: boolean\n  /** An icon before the label. The `#start` slot replaces it. */\n  iconStart?: IconSource\n  /** An icon after the label. The `#end` slot replaces it. */\n  iconEnd?: IconSource\n  /**\n   * Adds a button that asks for the chip to be removed. It only EMITS that request:\n   * actually taking the chip away is the consumer's decision.\n   */\n  dismissible?: boolean\n  /** The icon of that removal button. */\n  dismissIcon?: IconSource\n  /**\n   * What the removal button does, in words. It falls back to the design system\n   * dictionary.\n   */\n  dismissLabel?: string\n  /** Makes the chip unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<ChipProps>(), {\n  variant: 'soft',\n  tone: 'neutral',\n  color: undefined,\n  shape: 'chip',\n  size: 'xs',\n  compact: false,\n  clickable: false,\n  href: undefined,\n  selectable: false,\n  check: false,\n  iconStart: undefined,\n  iconEnd: undefined,\n  dismissible: false,\n  dismissIcon: () => closeIcon,\n  dismissLabel: undefined,\n  disabled: false,\n})\n\nconst m = useMessages()\nconst resolvedDismissLabel = computed(() => props.dismissLabel ?? m.value.common.dismiss)\n\nconst selected = defineModel<boolean>('selected', { default: false })\n\ndefineEmits<{\n  /** The removal button was pressed. The chip is still there: removing it is up to you. */\n  dismiss: []\n}>()\n\ndefineSlots<{\n  /** The label. It may be left out entirely, which gives a chip made of icons alone. */\n  default?(): unknown\n  /** Content before the label, which takes the place of `iconStart`. */\n  start?(): unknown\n  /** Content after the label, which takes the place of `iconEnd`. */\n  end?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst attrs = useAttrs()\n\n/* What the chip does, in order of precedence: staying selected wins over leading\n   somewhere, which wins over merely reacting to clicks; asked for none of them, it is\n   plain text. */\nconst isLink = computed(() => !props.selectable && props.href !== undefined)\nconst actionTag = computed(() =>\n  props.selectable ? 'button' : isLink.value ? 'a' : props.clickable ? 'button' : 'span',\n)\nconst isInertLink = computed(() => isLink.value && props.disabled)\n\nconst rootStyle = computed<StyleValue>(() => [\n  props.color !== undefined ? { '--custom-color': props.color } : undefined,\n  attrs.style as StyleValue,\n])\nconst actionAttrs = computed(() => {\n  const rest = Object.fromEntries(\n    Object.entries(attrs).filter(([key]) => key !== 'class' && key !== 'style'),\n  )\n  if (isInertLink.value) delete rest.onClick\n  return rest\n})\n\nconst showCheck = computed(() => props.check && props.selectable && selected.value)\n\n/* An icon and no label at all: the chip becomes a square, as wide as it is tall. */\nconst slots = useSlots()\nconst iconOnly = computed(\n  () => !slots.default && !!(slots.start || slots.end || props.iconStart || props.iconEnd),\n)\n</script>\n\n<template>\n  <span\n    class=\"v-chip v-control v-tone\"\n    :class=\"$attrs.class\"\n    :style=\"rootStyle\"\n    :data-variant=\"variant\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :data-shape=\"shape\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-selected=\"selectable && selected ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-icon-only=\"iconOnly ? '' : undefined\"\n  >\n    <component\n      :is=\"actionTag\"\n      v-bind=\"actionAttrs\"\n      class=\"v-chip-action\"\n      :type=\"actionTag === 'button' ? 'button' : undefined\"\n      :href=\"isLink && !disabled ? href : undefined\"\n      :disabled=\"actionTag === 'button' ? disabled : undefined\"\n      :aria-disabled=\"isInertLink ? 'true' : undefined\"\n      :aria-pressed=\"selectable ? selected : undefined\"\n      @click=\"selectable && !disabled && (selected = !selected)\"\n    >\n      <VIcon v-if=\"showCheck\" :name=\"checkIcon\" />\n      <slot v-else name=\"start\">\n        <VIcon v-if=\"iconStart\" v-bind=\"iconProps(iconStart)\" />\n      </slot>\n      <slot />\n      <slot name=\"end\">\n        <VIcon v-if=\"iconEnd\" v-bind=\"iconProps(iconEnd)\" />\n      </slot>\n    </component>\n    <button\n      v-if=\"dismissible\"\n      type=\"button\"\n      class=\"v-chip-remove\"\n      :aria-label=\"resolvedDismissLabel\"\n      :disabled=\"disabled\"\n      @click=\"$emit('dismiss')\"\n    >\n      <VIcon v-bind=\"iconProps(dismissIcon)\" />\n    </button>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The height comes from the shared size class set on this element. The scale itself\n     holds five steps; the component's type restricts it to the two smallest, a chip\n     larger than that being a button. */\n  .v-chip {\n    display: inline-flex;\n    align-items: center;\n    height: var(--control-height);\n    border: 1px solid transparent;\n    border-radius: var(--vectis-radius-interactive);\n    font-family: var(--vectis-text-family);\n    font-size: var(--control-font-size);\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-chip[data-shape='pill'] {\n    border-radius: var(--vectis-radius-pill);\n  }\n\n  /* The tone table itself lives in styles/tones.css, in a layer below the components.\n     All five tones are taken exactly as they come; the only values redefined here are\n     those of a custom colour, and they win over the shared table by LAYER rather than\n     by order, so no bundling can change the outcome. */\n\n  /* A custom colour replaces the tone entirely. Every shade it needs is derived from\n     that one colour mixed with the theme's own surface and text, so the same value\n     produces a legible chip in the light theme and in the dark one, with nothing to\n     rebuild. */\n  .v-chip[data-custom] {\n    --tone-bg-solid: var(--custom-color);\n    --tone-bg-solid-hover: color-mix(in oklab, var(--custom-color), var(--vectis-color-text) 8%);\n    --tone-bg-solid-active: color-mix(in oklab, var(--custom-color), var(--vectis-color-text) 14%);\n    /* Fixed white, whatever the colour: on a fully coloured chip the contrast of the\n       text is the consumer's to check, as it is in VBadge. */\n    --tone-text-solid: var(--vectis-color-text-on-accent);\n    --tone-text-tinted: color-mix(in oklab, var(--custom-color), var(--vectis-color-text) 30%);\n    --tone-bg-soft: color-mix(in oklab, var(--custom-color), var(--vectis-color-surface) 85%);\n    --tone-border-soft: color-mix(in oklab, var(--custom-color), var(--vectis-color-surface) 60%);\n  }\n\n  .v-chip[data-variant='soft'] {\n    background: var(--tone-bg-soft);\n    color: var(--tone-text-tinted);\n  }\n\n  .v-chip[data-variant='solid'] {\n    background: var(--tone-bg-solid);\n    color: var(--tone-text-solid);\n  }\n\n  .v-chip[data-variant='outline'] {\n    background: transparent;\n    color: var(--tone-text-tinted);\n    border-color: var(--tone-border-soft);\n  }\n\n  /* A selected chip is painted in the full colour of its CURRENT tone, whichever\n     variant it was given. The block sits after the variants at equal specificity, so\n     it is the order that lets it win. */\n  .v-chip[data-selected] {\n    background: var(--tone-bg-solid);\n    color: var(--tone-text-solid);\n    border-color: transparent;\n  }\n\n  /* Hovering and pressing are conditioned on the ACTION being a real control, which\n     buys two things at once: a chip that merely displays a value never lights up, and\n     hovering the removal button does not repaint the whole chip as though it were\n     about to be activated. */\n  .v-chip[data-variant='soft']:not([data-disabled], [data-selected]):has(\n      :is(button, a).v-chip-action:hover\n    ) {\n    background: color-mix(in oklab, var(--tone-bg-soft), var(--tone-text-tinted) 8%);\n  }\n\n  .v-chip[data-variant='soft']:not([data-disabled], [data-selected]):has(\n      :is(button, a).v-chip-action:active\n    ) {\n    background: color-mix(in oklab, var(--tone-bg-soft), var(--tone-text-tinted) 14%);\n  }\n\n  .v-chip[data-variant='outline']:not([data-disabled], [data-selected]):has(\n      :is(button, a).v-chip-action:hover\n    ) {\n    background: var(--tone-bg-soft);\n  }\n\n  .v-chip[data-variant='outline']:not([data-disabled], [data-selected]):has(\n      :is(button, a).v-chip-action:active\n    ) {\n    background: color-mix(in oklab, var(--tone-bg-soft), var(--tone-text-tinted) 8%);\n  }\n\n  .v-chip[data-variant='solid']:not([data-disabled]):has(:is(button, a).v-chip-action:hover),\n  .v-chip[data-selected]:not([data-disabled]):has(:is(button, a).v-chip-action:hover) {\n    background: var(--tone-bg-solid-hover);\n  }\n\n  .v-chip[data-variant='solid']:not([data-disabled]):has(:is(button, a).v-chip-action:active),\n  .v-chip[data-selected]:not([data-disabled]):has(:is(button, a).v-chip-action:active) {\n    background: var(--tone-bg-solid-active);\n  }\n\n  .v-chip-action {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--control-gap);\n    height: 100%;\n    padding-block: 0;\n    padding-inline: var(--control-padding-inline);\n    border: none;\n    background: transparent;\n    color: inherit;\n    font: inherit;\n    border-radius: inherit;\n    text-decoration: none;\n    cursor: default;\n  }\n\n  /* With an icon and no label the action becomes square, its width taken from its own\n     height through the ratio rather than from a new measurement to keep in step. */\n  .v-chip[data-icon-only] .v-chip-action {\n    aspect-ratio: 1;\n    justify-content: center;\n    padding-inline: 0;\n  }\n\n  :is(button, a).v-chip-action {\n    cursor: pointer;\n  }\n\n  :is(button, a).v-chip-action:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  /* The removal button carries no background of its own, not even on hover — the same\n     treatment as a field's inner buttons — and the cursor is what signals it can be\n     used.\n\n     Its icon takes the chip's colour AT FULL strength. Dimming it, as one would\n     instinctively do for a secondary control, took the cross down to 3.9:1 on a tinted\n     chip and 2.8:1 on a solid one. That matters because the cross is drawn from the\n     icon font here, and a glyph from a font is real text, to which the contrast rule\n     applies. */\n  .v-chip-remove {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--control-action-size);\n    height: var(--control-action-size);\n    margin-inline: calc(var(--vectis-space-1) * -1) var(--vectis-space-1);\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: inherit;\n    border-radius: var(--vectis-radius-full);\n    cursor: pointer;\n    flex: none;\n  }\n\n  .v-chip-remove:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(var(--vectis-focus-ring-offset) * -1);\n  }\n\n  /* A disabled chip greys out through the colour tokens, which is what makes it follow\n     the dark theme without a rule of its own. */\n  .v-chip[data-disabled] {\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-subtle);\n    border-color: transparent;\n  }\n\n  .v-chip[data-disabled][data-variant='outline'] {\n    background: transparent;\n    border-color: var(--vectis-color-border);\n  }\n\n  .v-chip[data-disabled] :is(:is(button, a).v-chip-action, .v-chip-remove) {\n    cursor: not-allowed;\n  }\n\n  .v-chip[data-disabled] .v-chip-remove {\n    color: inherit;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-chip,\n    .v-chip-remove {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuFA,IAAM,IAAQ,GAmBR,IAAI,EAAY,GAChB,IAAuB,QAAe,EAAM,gBAAgB,EAAE,MAAM,OAAO,OAAO,GAElF,IAAW,EAAoB,GAAC,UAA8B,GAkB9D,IAAQ,EAAS,GAKjB,IAAS,QAAe,CAAC,EAAM,cAAc,EAAM,SAAS,KAAA,CAAS,GACrE,IAAY,QAChB,EAAM,aAAa,WAAW,EAAO,QAAQ,MAAM,EAAM,YAAY,WAAW,MAClF,GACM,IAAc,QAAe,EAAO,SAAS,EAAM,QAAQ,GAE3D,IAAY,QAA2B,CAC3C,EAAM,UAAU,KAAA,IAAgD,KAAA,IAApC,EAAE,kBAAkB,EAAM,MAAM,GAC5D,EAAM,KACR,CAAC,GACK,IAAc,QAAe;GACjC,IAAM,IAAO,OAAO,YAClB,OAAO,QAAQ,CAAK,CAAC,CAAC,QAAQ,CAAC,OAAS,MAAQ,WAAW,MAAQ,OAAO,CAC5E;GAEA,OADI,EAAY,SAAO,OAAO,EAAK,SAC5B;EACT,CAAC,GAEK,IAAY,QAAe,EAAM,SAAS,EAAM,cAAc,EAAS,KAAK,GAG5E,IAAQ,EAAS,GACjB,IAAW,QACT,CAAC,EAAM,WAAW,CAAC,EAAE,EAAM,SAAS,EAAM,OAAO,EAAM,aAAa,EAAM,QAClF;yBAIE,EA4CO,QAAA;GA3CL,OAAK,EAAA,CAAC,2BACEA,EAAAA,OAAO,KAAK,CAAA;GACnB,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,EAAA,QAAQ,KAAQ,KAAA;YAEjC,EAmBY,EAlBL,EAAA,KAAS,GADhB,EAEU,EAiBE,OAjBS;GACnB,OAAM;GACL,MAAM,EAAA,UAAS,WAAA,WAA2B,KAAA;GAC1C,MAAM,EAAA,SAAM,CAAK,EAAA,WAAW,EAAA,OAAO,KAAA;GACnC,UAAU,EAAA,UAAS,WAAgB,EAAA,WAAW,KAAA;GAC9C,iBAAe,EAAA,QAAW,SAAY,KAAA;GACtC,gBAAc,EAAA,aAAa,EAAA,QAAW,KAAA;GACtC,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,cAAU,CAAK,EAAA,aAAa,EAAA,QAAQ,CAAI,EAAA;;oBAEJ;IAA/B,EAAA,SAAA,EAAA,GAAb,EAA4C,GAAA;;KAAnB,MAAM,EAAA,CAAA;6BAC/B,EAEO,EAAA,QAAA,SAAA,CAAA,SAAA,CADQ,EAAA,aAAA,EAAA,GAAb,EAAwD,GAAA,EAAA,EAAA,EAAA,KAAA,EAAA,GAAxB,EAAA,CAAA,CAAS,CAAC,EAAA,SAAS,CAAA,CAAA,GAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,KAAA,GAAA,CAAA;IAErD,EAAQ,EAAA,QAAA,SAAA;IACR,EAEO,EAAA,QAAA,OAAA,CAAA,SAAA,CADQ,EAAA,WAAA,EAAA,GAAb,EAAoD,GAAA,EAAA,EAAA,EAAA,KAAA,EAAA,GAAtB,EAAA,CAAA,CAAS,CAAC,EAAA,OAAO,CAAA,CAAA,GAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA;;;;;;;;;OAI3C,EAAA,eAAA,EAAA,GADR,EASS,UAAA;;GAPP,MAAK;GACL,OAAM;GACL,cAAY,EAAA;GACZ,UAAU,EAAA;GACV,SAAK,AAAA,EAAA,QAAA,MAAEC,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

@@ -0,0 +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{anchor-name:--combobox-anchor;display:block}.v-combobox-panel{min-inline-size:anchor-size(width);max-block-size:var(--vectis-control-size-combobox-list-max-block);overflow:auto}.v-combobox .v-input-field{padding-inline-end:calc(var(--control-padding-inline-field) + var(--vectis-icon-size) + var(--control-gap));position:relative}.v-combobox[data-can-clear] .v-input-field{padding-inline-end:calc(var(--control-padding-inline-field) + 2 * var(--vectis-icon-size) + 2 * var(--control-gap))}.v-combobox-chevron,.v-combobox-spinner{inset-inline-end:var(--control-padding-inline-field);color:var(--vectis-color-text-muted);position:absolute;top:50%;translate:0 -50%}.v-combobox-chevron{transition:rotate var(--vectis-duration-fast) var(--vectis-ease-default)}.v-combobox[data-open] .v-combobox-chevron{rotate:180deg}.v-combobox .v-input-clear{inset-inline-end:calc(var(--control-padding-inline-field) + var(--vectis-icon-size) + var(--control-gap));position:absolute;top:50%;translate:0 -50%}.v-combobox[data-multiple] .v-input-field{height:auto;min-height:var(--control-height);padding-block:var(--vectis-space-1);flex-wrap:wrap}.v-combobox[data-multiple] .v-input-control{height:var(--chip-height)}.v-combobox[data-collapsed] .v-input-control{width:0;height:0;padding:0;position:absolute}.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}}}