vectis-ui 0.10.1 → 0.10.2

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

@@ -15,16 +15,10 @@ interface ChipProps {
     variant?: ChipVariant;
     /**
      * What the chip means, expressed as a colour: `neutral` by default, then `accent` for
-     * something singled out and `danger`/`success`/`warning` for a state being reported. A
-     * chip may report a state where a button may not, which is why it offers five.
+     * something singled out and `danger`/ `success`/ `warning` for a state being reported.
      */
     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
-     * 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.
-     */
+    /** A colour of your own (hex, CSS name or `oklch()`), which REPLACES the tone. */
     color?: string;
     /** The silhouette: softly rounded corners, or a full pill. */
     shape?: ChipShape;

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// @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":""}
+{"version":3,"file":"VChip.js","names":[],"sources":["../../../src/components/VChip/VChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * Choose native links or buttons for chip actions. Dismissal is a sibling button because nested\n * buttons are invalid and inaccessible; inert links need a JS bridge.\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// Neither import may be named after a prop (`check`, `checkIcon`): every top-level binding of a\n// `<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.\n   */\n  tone?: ChipTone\n  /** A colour of your own (hex, CSS name or `oklch()`), which REPLACES the tone. */\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/* 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// A function read by the template, never a `computed`: `slots` is not reactive, so a computed\n// 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.\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  /*\n   * It COMPOUNDS `.v-variant`: the variant table weighs (0,2,0) like this rule and lives in\n   * another sheet, so at equal specificity the winner would be whichever one the consumer's\n   * bundler put last. At (0,3,0) it wins by construction.\n   */\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  /*\n   * That matters because the cross is drawn from the icon font here, and a glyph from a font is\n   * real text, to which the contrast rule applies.\n   */\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  /*\n   * A disabled chip greys out through the colour tokens, which makes it follow the dark theme\n   * without a rule of its own.\n   */\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   * The class is repeated to reach (0,6,0). The variant, hover and active rules reach (0,5,0),\n   * and with the forcing turned off any of them that still won would paint its tone over the\n   * 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.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// @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":"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"}
+{"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 * Choose native links or buttons for chip actions. Dismissal is a sibling button because nested\n * buttons are invalid and inaccessible; inert links need a JS bridge.\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// Neither import may be named after a prop (`check`, `checkIcon`): every top-level binding of a\n// `<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.\n   */\n  tone?: ChipTone\n  /** A colour of your own (hex, CSS name or `oklch()`), which REPLACES the tone. */\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/* 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// A function read by the template, never a `computed`: `slots` is not reactive, so a computed\n// 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.\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  /*\n   * It COMPOUNDS `.v-variant`: the variant table weighs (0,2,0) like this rule and lives in\n   * another sheet, so at equal specificity the winner would be whichever one the consumer's\n   * bundler put last. At (0,3,0) it wins by construction.\n   */\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  /*\n   * That matters because the cross is drawn from the icon font here, and a glyph from a font is\n   * real text, to which the contrast rule applies.\n   */\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  /*\n   * A disabled chip greys out through the colour tokens, which makes it follow the dark theme\n   * without a rule of its own.\n   */\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   * The class is repeated to reach (0,6,0). The variant, hover and active rules reach (0,5,0),\n   * and with the forcing turned off any of them that still won would paint its tone over the\n   * 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":"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"}

package/dist/components/VCombobox/VCombobox.d.ts

@@ -88,17 +88,14 @@ interface ComboboxProps {
      */
     multiple?: boolean;
     /**
-     * How the chosen values are shown when several can be chosen: one dismissible chip
-     * each, or their labels joined by commas on a single line, cut short with an ellipsis
-     * when they run out of room. It changes nothing for a single value, which is always
-     * text.
+     * How the chosen values are shown when several can be chosen: one dismissible chip each, or
+     * their labels joined by commas on a single line, cut short with an ellipsis when they run
+     * out of room.
      */
     display?: ComboboxDisplay;
     /**
-     * How many chosen values to show before the rest are summed up as "+X", as chips or as
-     * text alike. It applies while the search input is folded away, which is to say out of
-     * focus: focused, every value comes back so it can be seen and taken back. Left out, or
-     * set to 0, every value is shown. It changes nothing without `multiple`.
+     * How many chosen values to show before the rest are summed up as "+X", as chips or as text
+     * alike. Left out, or set to 0, every value is shown.
      */
     max?: number;
     /**
@@ -122,10 +119,8 @@ interface ComboboxProps {
     /** Makes the field unusable, greyed out through the colour tokens. */
     disabled?: boolean;
     /**
-     * Shows what has been chosen without letting it be changed: nothing can be typed,
-     * the list never opens, the chips lose their crosses and no clear cross is offered.
-     * The field stays focusable and can be copied from, which is what separates it from
-     * `disabled`.
+     * Shows what has been chosen without letting it be changed: nothing can be typed, the list
+     * never opens, the chips lose their crosses and no clear cross is offered.
      */
     readonly?: boolean;
     /** Marks the field as invalid, for a rule of your own. */
@@ -139,17 +134,13 @@ interface ComboboxProps {
     /** What the start icon does, in words, once it is clickable. */
     iconStartLabel?: string;
     /**
-     * The chevron at the end of the field, which turns as the list opens: an icon name,
-     * or an explicit render. Clicking it while the list is open closes the list. It is
-     * decoration all the same (the field itself is what opens the list, and Escape what
-     * closes it from the keyboard), so the chevron is hidden from screen readers and takes
-     * no label.
+     * The chevron at the end of the field, which turns as the list opens: an icon name, or an
+     * explicit render.
      */
     expandIcon?: IconSource;
     /**
-     * Leaves the chevron out, for a field that reads as a search box with suggestions rather
-     * than as a list to pick from. The list still opens as the field takes the focus, and the
-     * spinner still shows while loading.
+     * Leaves the chevron out, for a field that reads as a search box with suggestions rather than
+     * as a list to pick from.
      */
     hideExpandIcon?: boolean;
     /** Offers a cross that empties both the selection and the search. */
@@ -161,13 +152,7 @@ interface ComboboxProps {
      * hears, even when the `#empty` slot draws something else: set both together.
      */
     emptyText?: string;
-    /**
-     * How the list is narrowed as one types. Turning it off means the options already
-     * arrive filtered by their source and are shown exactly as they come.
-     *
-     * A rule of your own receives the query as it was TYPED, merely trimmed, rather than the
-     * accent-insensitive form used internally.
-     */
+    /** How the list is narrowed as one types. */
     filter?: ComboboxFilter;
     /**
      * How long to wait before telling the source what is being searched for, in
@@ -176,9 +161,7 @@ interface ComboboxProps {
      */
     searchDebounce?: number;
     /**
-     * Says that something is being loaded. With no option yet, the whole panel says so;
-     * with options already listed, a spinner appears at the foot of the list, since what
-     * is loading is then the next page. Either way the field replaces its chevron with a
+     * Says that something is being loaded. Either way the field replaces its chevron with a
      * spinner.
      */
     loading?: boolean;
@@ -188,8 +171,8 @@ interface ComboboxProps {
      */
     loadingText?: string;
     /**
-     * Says that there are more pages to come, which is what makes the component ask for
-     * the next one as the end of the list comes into view.
+     * Says that there are more pages to come, which makes the component ask for the next one as
+     * the end of the list comes into view.
      */
     hasMore?: boolean;
     /** Where the list opens relative to the field. */
@@ -203,32 +186,15 @@ type __VLS_Slots = {
      */
     start?(): unknown;
     /**
-     * Controls of your own inside the field, placed before the ones the field owns: the
-     * clear cross and the chevron. Those two are this component's own affordance, which is
-     * why there is no `#end` here: it would replace them.
+     * Controls of your own inside the field, placed before the ones the field owns: the clear
+     * cross and the chevron.
      */
     'value-end'?(): unknown;
-    /**
-     * What a row of the list shows, in place of the plain label: a subtitle, an avatar,
-     * a badge. It is told whether the row is the highlighted one and whether it is
-     * already chosen, so the rendering can react to both.
-     */
+    /** What a row of the list shows, in place of the plain label: a subtitle, an avatar, a badge. */
     option?(props: ComboboxOptionSlotProps): unknown;
-    /**
-     * Replaces the chip standing for one chosen value.
-     *
-     * Three of the values it receives are what make it usable without regressions:
-     * `remove`, without which the value could no longer be taken back, and the size and
-     * density worked out to sit inside the field, which cannot be guessed from outside.
-     * The option itself may be missing, if that value has never appeared among the
-     * options.
-     */
+    /** Replaces the chip standing for one chosen value. */
     chip?(props: ComboboxChipSlotProps): unknown;
-    /**
-     * Replaces the "+X" standing for the values beyond `max`. It receives `count`, the number
-     * of values being hidden, and the size and density of the chips inside the field, so that a
-     * chip of your own lines up with the others.
-     */
+    /** Replaces the "+X" standing for the values beyond `max`. */
     overflow?(props: ComboboxOverflowSlotProps): unknown;
     /** What the panel shows when nothing matches. It receives the term that was searched. */
     empty?(props: ComboboxEmptySlotProps): unknown;
@@ -236,11 +202,7 @@ type __VLS_Slots = {
     loading?(): unknown;
 };
 type __VLS_ModelProps = {
-    /**
-     * The chosen option's `value`, or the list of them when `multiple` is set. It is an empty
-     * string to begin with, and the array is never mutated in place: each change is a new one,
-     * which is what wakes the consumer's binding.
-     */
+    /** The chosen option's `value`, or the list of them when `multiple` is set. */
     modelValue?: ItemValue | ItemValue[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;