vectis-ui 0.8.1 → 0.9.0

package/dist/components/VIcon/VIcon.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-icon{--icon-size:var(--vectis-icon-size,1em);--icon-opsz:var(--vectis-icon-opsz,24);inline-size:var(--icon-size);block-size:var(--icon-size);font-size:var(--icon-size);flex:none;justify-content:center;align-items:center;display:inline-flex}.v-icon:has(>.v-icon-symbol){overflow:hidden}.v-icon-symbol{font-family:var(--vectis-font-family-icon);font-weight:var(--vectis-font-weight-regular);font-style:normal;line-height:var(--vectis-font-leading-none);letter-spacing:normal;text-transform:none;white-space:nowrap;font-variation-settings:"FILL" var(--icon-fill,0), "wght" 400, "GRAD" 0, "opsz" var(--icon-opsz);direction:ltr}.v-icon[data-filled] .v-icon-symbol{--icon-fill:1}.v-icon[data-mirror]:dir(rtl){scale:-1 1}.v-icon-img,.v-icon>svg{object-fit:contain;block-size:100%;inline-size:100%}.v-icon-glyph{font-style:normal;line-height:var(--vectis-font-leading-none);display:block}.v-icon-svg{fill:currentColor;display:block}}
+@layer vectis.components{.v-icon{--icon-size:var(--vectis-icon-size,1em);--icon-opsz:var(--vectis-icon-opsz,24);font-size:var(--icon-size);flex:none;justify-content:center;align-items:center;block-size:1em;inline-size:1em;display:inline-flex}.v-icon:has(>.v-icon-symbol){overflow:hidden}.v-icon-symbol{--icon-fill:0;font-family:var(--vectis-font-family-icon);font-weight:var(--vectis-font-weight-regular);font-style:normal;line-height:var(--vectis-font-leading-none);letter-spacing:normal;text-transform:none;white-space:nowrap;font-variation-settings:"FILL" var(--icon-fill), "wght" 400, "GRAD" 0, "opsz" var(--icon-opsz);direction:ltr}.v-icon[data-filled] .v-icon-symbol{--icon-fill:1}.v-icon[data-mirror]:dir(rtl){scale:-1 1}.v-icon-img,.v-icon>svg{object-fit:contain;block-size:100%;inline-size:100%}.v-icon-glyph{font-style:normal;line-height:var(--vectis-font-leading-none);display:block}.v-icon-svg{fill:currentColor;display:block}}

package/dist/components/VIcon/VIcon.d.ts

@@ -4,13 +4,13 @@ interface IconProps {
      * Which icon to draw. A plain string is a name: it is offered to the consumer's
      * resolver and then left to the icon font as a ligature. One of the design
      * system's own icons, imported from `vectis-ui/icons`, carries its drawing with
-     * it — the resolver is still asked first, and the drawing is what answers when
+     * it: the resolver is still asked first, and the drawing is what answers when
      * nothing else does.
      */
     name?: string | BuiltinIcon;
     /**
-     * An explicit description of what to draw — an image, a component, a path, a class
-     * — which wins over everything else. This is the route every `IconSource` prop of
+     * An explicit description of what to draw (an image, a component, a path, a class),
+     * which wins over everything else. This is the route every `IconSource` prop of
      * the design system takes when it is given something other than a plain name.
      */
     render?: IconRender;
@@ -18,8 +18,8 @@ interface IconProps {
     src?: string;
     /**
      * A size in pixels, as a number or a numeric string. Left out, or given something that
-     * is not a number, the icon takes the size its context imposes — a button sets one for
-     * the icons inside it — and failing that 1em, which makes it follow the surrounding
+     * is not a number, the icon takes the size its context imposes (a button sets one for
+     * the icons inside it), and failing that 1em, which makes it follow the surrounding
      * text.
      */
     size?: number | string;
@@ -44,7 +44,7 @@ interface IconProps {
     mirrored?: boolean;
 }
 type __VLS_Slots = {
-    /** An inline SVG, used when neither `src` nor `name` was given. */
+    /** An inline SVG, used when none of `render`, `src` and `name` was given. */
     default?(): unknown;
 };
 declare const __VLS_base: import('vue').DefineComponent<IconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<IconProps> & Readonly<{}>, {

package/dist/components/VIcon/VIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"VIcon.js","names":[],"sources":["../../../src/components/VIcon/VIcon.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * An icon, whatever the host application's icons are made of. The real work is deciding\n * WHERE the drawing comes from, asked in a fixed order: `render`, then `src`, then `name` —\n * offered to the consumer's resolver if one was installed, then to the drawing the icon\n * carries, and finally to a ligature font. A raw SVG can always come through the slot.\n *\n * That order IS the contract. The resolver comes before the built-in drawing, or the\n * library's own icons would stay Material for a consumer who wired in their own set; and a\n * resolver returning `undefined` hands over to that drawing, which is what makes a PARTIAL\n * mapping usable.\n *\n * It is what lets the library require no icon font: the icons it draws by default are\n * imported by the components that render them and travel as a name AND its paths, so a\n * consumer downloads only the ones their components actually draw.\n *\n * Despite the `computed`, there is no behavioural JS here — no event, no lifecycle, no DOM.\n * A pure choice of source, made identically on the server and in the browser.\n */\nimport { computed, type Component } from 'vue'\n\nimport { iconName as nameOf } from './iconProps'\nimport { ICON_VIEW_BOX } from './icons/viewBox'\nimport { resolveIcon } from './resolver'\nimport type { BuiltinIcon, IconRender } from './types'\n\nimport { px } from '../../utils/css'\n\ninterface IconProps {\n  /**\n   * Which icon to draw. A plain string is a name: it is offered to the consumer's\n   * resolver and then left to the icon font as a ligature. One of the design\n   * system's own icons, imported from `vectis-ui/icons`, carries its drawing with\n   * it — the resolver is still asked first, and the drawing is what answers when\n   * nothing else does.\n   */\n  name?: string | BuiltinIcon\n  /**\n   * An explicit description of what to draw — an image, a component, a path, a class\n   * — which wins over everything else. This is the route every `IconSource` prop of\n   * the design system takes when it is given something other than a plain name.\n   */\n  render?: IconRender\n  /** The address of an image to use as the icon. It wins over `name`. */\n  src?: string\n  /**\n   * A size in pixels, as a number or a numeric string. Left out, or given something that\n   * is not a number, the icon takes the size its context imposes — a button sets one for\n   * the icons inside it — and failing that 1em, which makes it follow the surrounding\n   * text.\n   */\n  size?: number | string\n  /**\n   * What the icon means, for screen readers. Leaving it out marks the icon as\n   * decorative and hides it from them, which is the right thing whenever the\n   * surrounding text already says what it says.\n   */\n  label?: string\n  /**\n   * Draws the filled version of the icon. The built-in icons honour it wherever\n   * filling actually changes the drawing, and the ligature font always does. It\n   * means nothing for an image or an inline SVG, whose shape is fixed.\n   */\n  filled?: boolean\n  /**\n   * Flips the icon horizontally in a right-to-left context, for a glyph that points\n   * at a physical direction: a \"previous\" chevron points left in English and right in\n   * Arabic. Off by default, since most icons mean the same thing in both directions.\n   * The direction is the one the browser computed, so an ancestor's `dir` is enough.\n   */\n  mirrored?: boolean\n}\n\nconst props = withDefaults(defineProps<IconProps>(), {\n  name: undefined,\n  render: undefined,\n  src: undefined,\n  size: undefined,\n  label: undefined,\n  filled: false,\n  mirrored: false,\n})\n\ndefineSlots<{\n  /** An inline SVG, used when neither `src` nor `name` was given. */\n  default?(): unknown\n}>()\n\n/**\n * The chosen source, labelled with its kind. The public `IconRender` union carries\n * no such label — the consumer writes it by hand and has nothing to tag it with —\n * but the template needs one thing it can branch on reliably, and applying the tag\n * is also where the documented precedence between the shapes gets decided.\n */\ntype Resolved =\n  | { kind: 'path'; path: string; viewBox: string }\n  | { kind: 'component'; component: Component; props?: Record<string, unknown> }\n  | { kind: 'src'; src: string }\n  | { kind: 'text'; text: string; class?: string }\n  | { kind: 'class'; class: string }\n\nfunction tag(render: IconRender): Resolved {\n  if ('path' in render)\n    return { kind: 'path', path: render.path, viewBox: render.viewBox ?? ICON_VIEW_BOX }\n  if ('component' in render)\n    return { kind: 'component', component: render.component, props: render.props }\n  if ('src' in render) return { kind: 'src', src: render.src }\n  if ('text' in render) return { kind: 'text', text: render.text, class: render.class }\n  return { kind: 'class', class: render.class }\n}\n\n/**\n * The icon's identity: the name the resolver is asked for, and the one `data-icon`\n * records whatever the drawing turned out to come from.\n */\nconst iconName = computed(() => nameOf(props.name))\n\n// @fallback — the ladder itself: every rung hands over to the next one, and the\n// ligature is the last resort, reached when neither the resolver nor the registry\n// recognized the name.\n/**\n * Works out what to draw: an explicit `render` if there is one, then the consumer's\n * resolver, then the icons built into the library. Answering `undefined` here is not\n * a failure — it means the template falls through to the image, the ligature or the\n * slot.\n */\nconst resolved = computed<Resolved | undefined>(() => {\n  if (props.render) return tag(props.render)\n  // TRUTHINESS on `src`, the test the template renders the image with: an empty `src=\"\"`\n  // renders no image, so it must not stop the name from being drawn either.\n  if (props.src || props.name === undefined) return undefined\n\n  const custom = resolveIcon(iconName.value!, { filled: props.filled })\n  if (custom) return tag(custom)\n\n  // A bare name has no drawing of its own, so it falls through to the ligature; only\n  // one of the library's own icons brings its paths along.\n  if (typeof props.name === 'string') return undefined\n\n  const { paths } = props.name\n  // A second path is only stored when filling actually changes the drawing, so most\n  // icons have one path and fall back to it (see icons.ts).\n  const path = (props.filled ? paths[1] : undefined) ?? paths[0]\n  return { kind: 'path', path, viewBox: ICON_VIEW_BOX }\n})\n</script>\n\n<template>\n  <span\n    class=\"v-icon\"\n    :style=\"px(size) !== undefined ? { '--vectis-icon-size': px(size) } : undefined\"\n    :data-icon=\"iconName\"\n    :data-filled=\"filled || undefined\"\n    :data-mirror=\"mirrored || undefined\"\n    :role=\"label ? 'img' : undefined\"\n    :aria-label=\"label\"\n    :aria-hidden=\"label ? undefined : 'true'\"\n  >\n    <template v-if=\"resolved\">\n      <svg\n        v-if=\"resolved.kind === 'path'\"\n        class=\"v-icon-svg\"\n        :viewBox=\"resolved.viewBox\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        <path :d=\"resolved.path\" />\n      </svg>\n      <component\n        :is=\"resolved.component\"\n        v-else-if=\"resolved.kind === 'component'\"\n        v-bind=\"resolved.props\"\n      />\n      <img v-else-if=\"resolved.kind === 'src'\" class=\"v-icon-img\" :src=\"resolved.src\" alt=\"\" />\n      <!-- The interpolation is written flush against the tags: a ligature is matched\n           on the exact text, and any surrounding whitespace would break it -->\n      <span v-else-if=\"resolved.kind === 'text'\" class=\"v-icon-symbol\" :class=\"resolved.class\">{{\n        resolved.text\n      }}</span>\n      <span v-else class=\"v-icon-glyph\" :class=\"resolved.class\" />\n    </template>\n    <img v-else-if=\"src\" class=\"v-icon-img\" :src=\"src\" alt=\"\" />\n    <span v-else-if=\"name\" class=\"v-icon-symbol\">{{ iconName }}</span>\n    <slot v-else />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-icon {\n    /*\n     * How the size is settled, in order of priority:\n     * 1. the `size` prop, written inline on the element as --vectis-icon-size — a\n     *    declaration made on the element itself beats both inheritance and the\n     *    layer, so it always wins;\n     * 2. the variables inherited from an ancestor, which is the context API: a\n     *    VButton sets them from its own size, and the icons inside follow;\n     * 3. 1em, which makes the icon follow the size of the text around it.\n     */\n    --icon-size: var(--vectis-icon-size, 1em);\n    --icon-opsz: var(--vectis-icon-opsz, 24);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: none;\n    inline-size: var(--icon-size);\n    block-size: var(--icon-size);\n    /* a ligature is text, so it is the font-size that sizes it */\n    font-size: var(--icon-size);\n  }\n\n  /* When the icon font has not loaded, a ligature shows as its own name in plain\n     text. Clipping keeps that text inside the square instead of letting it push the\n     layout apart. The rule is scoped to the ONE branch it protects rather than to\n     `.v-icon`: a third-party icon font may legitimately draw outside its 1em box,\n     and clipping everything would cut those glyphs. */\n  .v-icon:has(> .v-icon-symbol) {\n    overflow: hidden;\n  }\n\n  .v-icon-symbol {\n    font-family: var(--vectis-font-family-icon);\n    font-weight: var(--vectis-font-weight-regular);\n    font-style: normal;\n    line-height: var(--vectis-font-leading-none);\n    letter-spacing: normal;\n    text-transform: none;\n    white-space: nowrap;\n    direction: ltr;\n    /* The variable axes of the Material Symbols font. These numbers are the font's\n       own technical contract and not design decisions, which is why they are written\n       literally here rather than taken from tokens — the same tolerance as the\n       opacities. */\n    font-variation-settings:\n      'FILL' var(--icon-fill, 0),\n      'wght' 400,\n      'GRAD' 0,\n      'opsz' var(--icon-opsz);\n  }\n\n  .v-icon[data-filled] .v-icon-symbol {\n    --icon-fill: 1;\n  }\n\n  /* `:dir()` reads the direction the browser computed rather than an attribute spelled on\n     an ancestor, and `scale` is the individual property, so it composes with a rotation\n     a consumer applies (a disclosure chevron) instead of replacing its transform. */\n  .v-icon[data-mirror]:dir(rtl) {\n    scale: -1 1;\n  }\n\n  .v-icon-img,\n  .v-icon > svg {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: contain;\n  }\n\n  /* An icon coming from a class-based font, as Font Awesome and Phosphor ship them:\n     the glyph is drawn by a `::before`, at the font-size `.v-icon` has set. Because\n     the design system renders this element itself rather than accepting the usual\n     `<i>`, one rule normalizes it for every such library — `font-style` undoes the\n     italics those conventions carry, and `line-height` stops the inherited line box\n     from pushing the glyph off centre. */\n  .v-icon-glyph {\n    display: block;\n    font-style: normal;\n    line-height: var(--vectis-font-leading-none);\n  }\n\n  /* An SVG drawn from the built-in icons. The fill is set on OUR class and never on\n     `.v-icon > svg`, so that a multicoloured SVG handed in through the slot keeps\n     its own colours instead of being flattened to the text colour. `display: block`\n     removes the gap an inline element leaves under its baseline. */\n  .v-icon-svg {\n    display: block;\n    fill: currentcolor;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VIcon.js","names":[],"sources":["../../../src/components/VIcon/VIcon.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * An icon, whatever the host application's icons are made of. The real work is deciding\n * WHERE the drawing comes from, asked in a fixed order: `render`, then `src`, then `name` —\n * offered to the consumer's resolver if one was installed, then to the drawing the icon\n * carries, and finally to a ligature font. A raw SVG can always come through the slot.\n *\n * That order IS the contract. The resolver comes before the built-in drawing, or the\n * library's own icons would stay Material for a consumer who wired in their own set; and a\n * resolver returning `undefined` hands over to that drawing, which is what makes a PARTIAL\n * mapping usable.\n *\n * It is what lets the library require no icon font: the icons it draws by default are\n * imported by the components that render them and travel as a name AND its paths, so a\n * consumer downloads only the ones their components actually draw.\n *\n * Despite the `computed`, there is no behavioural JS here — no event, no lifecycle, no DOM.\n * A pure choice of source, made identically on the server and in the browser.\n */\nimport { computed, type Component } from 'vue'\n\nimport { iconName as nameOf } from './iconProps'\nimport { ICON_VIEW_BOX } from './icons/viewBox'\nimport { resolveIcon } from './resolver'\nimport type { BuiltinIcon, IconRender } from './types'\n\nimport { px } from '../../utils/css'\n\ninterface IconProps {\n  /**\n   * Which icon to draw. A plain string is a name: it is offered to the consumer's\n   * resolver and then left to the icon font as a ligature. One of the design\n   * system's own icons, imported from `vectis-ui/icons`, carries its drawing with\n   * it: the resolver is still asked first, and the drawing is what answers when\n   * nothing else does.\n   */\n  name?: string | BuiltinIcon\n  /**\n   * An explicit description of what to draw (an image, a component, a path, a class),\n   * which wins over everything else. This is the route every `IconSource` prop of\n   * the design system takes when it is given something other than a plain name.\n   */\n  render?: IconRender\n  /** The address of an image to use as the icon. It wins over `name`. */\n  src?: string\n  /**\n   * A size in pixels, as a number or a numeric string. Left out, or given something that\n   * is not a number, the icon takes the size its context imposes (a button sets one for\n   * the icons inside it), and failing that 1em, which makes it follow the surrounding\n   * text.\n   */\n  size?: number | string\n  /**\n   * What the icon means, for screen readers. Leaving it out marks the icon as\n   * decorative and hides it from them, which is the right thing whenever the\n   * surrounding text already says what it says.\n   */\n  label?: string\n  /**\n   * Draws the filled version of the icon. The built-in icons honour it wherever\n   * filling actually changes the drawing, and the ligature font always does. It\n   * means nothing for an image or an inline SVG, whose shape is fixed.\n   */\n  filled?: boolean\n  /**\n   * Flips the icon horizontally in a right-to-left context, for a glyph that points\n   * at a physical direction: a \"previous\" chevron points left in English and right in\n   * Arabic. Off by default, since most icons mean the same thing in both directions.\n   * The direction is the one the browser computed, so an ancestor's `dir` is enough.\n   */\n  mirrored?: boolean\n}\n\nconst props = withDefaults(defineProps<IconProps>(), {\n  name: undefined,\n  render: undefined,\n  src: undefined,\n  size: undefined,\n  label: undefined,\n  filled: false,\n  mirrored: false,\n})\n\ndefineSlots<{\n  /** An inline SVG, used when none of `render`, `src` and `name` was given. */\n  default?(): unknown\n}>()\n\n/**\n * The chosen source, labelled with its kind. The public `IconRender` union carries\n * no such label — the consumer writes it by hand and has nothing to tag it with —\n * but the template needs one thing it can branch on reliably, and applying the tag\n * is also where the documented precedence between the shapes gets decided.\n */\ntype Resolved =\n  | { kind: 'path'; path: string; viewBox: string }\n  | { kind: 'component'; component: Component; props?: Record<string, unknown> }\n  | { kind: 'src'; src: string }\n  | { kind: 'text'; text: string; class?: string }\n  | { kind: 'class'; class: string }\n\nfunction tag(render: IconRender): Resolved {\n  if ('path' in render)\n    return { kind: 'path', path: render.path, viewBox: render.viewBox ?? ICON_VIEW_BOX }\n  if ('component' in render)\n    return { kind: 'component', component: render.component, props: render.props }\n  if ('src' in render) return { kind: 'src', src: render.src }\n  if ('text' in render) return { kind: 'text', text: render.text, class: render.class }\n  return { kind: 'class', class: render.class }\n}\n\n/**\n * The icon's identity: the name the resolver is asked for, and the one `data-icon`\n * records whatever the drawing turned out to come from.\n */\nconst iconName = computed(() => nameOf(props.name))\n\n// @fallback — the ladder itself: every rung hands over to the next one, and the\n// ligature is the last resort, reached when neither the resolver nor the registry\n// recognized the name.\n/**\n * Works out what to draw: an explicit `render` if there is one, then the consumer's\n * resolver, then the icons built into the library. Answering `undefined` here is not\n * a failure — it means the template falls through to the image, the ligature or the\n * slot.\n */\nconst resolved = computed<Resolved | undefined>(() => {\n  if (props.render) return tag(props.render)\n  // TRUTHINESS on `src`, the test the template renders the image with: an empty `src=\"\"`\n  // renders no image, so it must not stop the name from being drawn either.\n  if (props.src || props.name === undefined) return undefined\n\n  const custom = resolveIcon(iconName.value!, { filled: props.filled })\n  if (custom) return tag(custom)\n\n  // A bare name has no drawing of its own, so it falls through to the ligature; only\n  // one of the library's own icons brings its paths along.\n  if (typeof props.name === 'string') return undefined\n\n  const { paths } = props.name\n  // A second path is only stored when filling actually changes the drawing, so most\n  // icons have one path and fall back to it (see the `BuiltinIcon` type).\n  const path = (props.filled ? paths[1] : undefined) ?? paths[0]\n  return { kind: 'path', path, viewBox: ICON_VIEW_BOX }\n})\n</script>\n\n<template>\n  <span\n    class=\"v-icon\"\n    :style=\"px(size) !== undefined ? { '--vectis-icon-size': px(size) } : undefined\"\n    :data-icon=\"iconName\"\n    :data-filled=\"filled || undefined\"\n    :data-mirror=\"mirrored || undefined\"\n    :role=\"label ? 'img' : undefined\"\n    :aria-label=\"label\"\n    :aria-hidden=\"label ? undefined : 'true'\"\n  >\n    <template v-if=\"resolved\">\n      <svg\n        v-if=\"resolved.kind === 'path'\"\n        class=\"v-icon-svg\"\n        :viewBox=\"resolved.viewBox\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        <path :d=\"resolved.path\" />\n      </svg>\n      <component\n        :is=\"resolved.component\"\n        v-else-if=\"resolved.kind === 'component'\"\n        v-bind=\"resolved.props\"\n      />\n      <img v-else-if=\"resolved.kind === 'src'\" class=\"v-icon-img\" :src=\"resolved.src\" alt=\"\" />\n      <!-- The interpolation is written flush against the tags: a ligature is matched\n           on the exact text, and any surrounding whitespace would break it -->\n      <span v-else-if=\"resolved.kind === 'text'\" class=\"v-icon-symbol\" :class=\"resolved.class\">{{\n        resolved.text\n      }}</span>\n      <span v-else class=\"v-icon-glyph\" :class=\"resolved.class\" />\n    </template>\n    <img v-else-if=\"src\" class=\"v-icon-img\" :src=\"src\" alt=\"\" />\n    <span v-else-if=\"name\" class=\"v-icon-symbol\">{{ iconName }}</span>\n    <slot v-else />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-icon {\n    /*\n     * How the size is settled, in order of priority:\n     * 1. the `size` prop, written inline on the element as --vectis-icon-size — a\n     *    declaration made on the element itself beats both inheritance and the\n     *    layer, so it always wins;\n     * 2. the variables inherited from an ancestor, which is the context API: a\n     *    VButton sets them from its own size, and the icons inside follow;\n     * 3. 1em, which makes the icon follow the size of the text around it.\n     */\n    --icon-size: var(--vectis-icon-size, 1em);\n    --icon-opsz: var(--vectis-icon-opsz, 24);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: none;\n    /* A ligature is text, so it is the font-size that sizes it, and the box follows as 1em.\n       TRAP — the box must NOT read `--icon-size` again: an `em` there resolves against\n       this element's own font-size, already enlarged by the line below, so a context size\n       of 1.5em drew a box of 2.25em around a glyph of 1.5em. */\n    font-size: var(--icon-size);\n    inline-size: 1em;\n    block-size: 1em;\n  }\n\n  /* When the icon font has not loaded, a ligature shows as its own name in plain\n     text. Clipping keeps that text inside the square instead of letting it push the\n     layout apart. The rule is scoped to the ONE branch it protects rather than to\n     `.v-icon`: a third-party icon font may legitimately draw outside its 1em box,\n     and clipping everything would cut those glyphs. */\n  .v-icon:has(> .v-icon-symbol) {\n    overflow: hidden;\n  }\n\n  .v-icon-symbol {\n    /* Declared here and not only under `[data-filled]`: a custom property inherits, so a\n       host application setting `--icon-fill` on an ancestor would otherwise fill every\n       icon below it. */\n    --icon-fill: 0;\n    font-family: var(--vectis-font-family-icon);\n    font-weight: var(--vectis-font-weight-regular);\n    font-style: normal;\n    line-height: var(--vectis-font-leading-none);\n    letter-spacing: normal;\n    text-transform: none;\n    white-space: nowrap;\n    direction: ltr;\n    /* The variable axes of the Material Symbols font. These numbers are the font's\n       own technical contract and not design decisions, which is why they are written\n       literally here rather than taken from tokens — the same tolerance as the\n       opacities. */\n    font-variation-settings:\n      'FILL' var(--icon-fill),\n      'wght' 400,\n      'GRAD' 0,\n      'opsz' var(--icon-opsz);\n  }\n\n  .v-icon[data-filled] .v-icon-symbol {\n    --icon-fill: 1;\n  }\n\n  /* `:dir()` reads the direction the browser computed rather than an attribute spelled on\n     an ancestor, and `scale` is the individual property, so it composes with a rotation\n     a consumer applies (a disclosure chevron) instead of replacing its transform. */\n  .v-icon[data-mirror]:dir(rtl) {\n    scale: -1 1;\n  }\n\n  .v-icon-img,\n  .v-icon > svg {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: contain;\n  }\n\n  /* An icon coming from a class-based font, as Font Awesome and Phosphor ship them:\n     the glyph is drawn by a `::before`, at the font-size `.v-icon` has set. Because\n     the design system renders this element itself rather than accepting the usual\n     `<i>`, one rule normalizes it for every such library — `font-style` undoes the\n     italics those conventions carry, and `line-height` stops the inherited line box\n     from pushing the glyph off centre. */\n  .v-icon-glyph {\n    display: block;\n    font-style: normal;\n    line-height: var(--vectis-font-leading-none);\n  }\n\n  /* An SVG drawn from the built-in icons. The fill is set on OUR class and never on\n     `.v-icon > svg`, so that a multicoloured SVG handed in through the slot keeps\n     its own colours instead of being flattened to the text colour. `display: block`\n     removes the gap an inline element leaves under its baseline. */\n  .v-icon-svg {\n    display: block;\n    fill: currentcolor;\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"VIcon.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VIcon/VIcon.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * An icon, whatever the host application's icons are made of. The real work is deciding\n * WHERE the drawing comes from, asked in a fixed order: `render`, then `src`, then `name` —\n * offered to the consumer's resolver if one was installed, then to the drawing the icon\n * carries, and finally to a ligature font. A raw SVG can always come through the slot.\n *\n * That order IS the contract. The resolver comes before the built-in drawing, or the\n * library's own icons would stay Material for a consumer who wired in their own set; and a\n * resolver returning `undefined` hands over to that drawing, which is what makes a PARTIAL\n * mapping usable.\n *\n * It is what lets the library require no icon font: the icons it draws by default are\n * imported by the components that render them and travel as a name AND its paths, so a\n * consumer downloads only the ones their components actually draw.\n *\n * Despite the `computed`, there is no behavioural JS here — no event, no lifecycle, no DOM.\n * A pure choice of source, made identically on the server and in the browser.\n */\nimport { computed, type Component } from 'vue'\n\nimport { iconName as nameOf } from './iconProps'\nimport { ICON_VIEW_BOX } from './icons/viewBox'\nimport { resolveIcon } from './resolver'\nimport type { BuiltinIcon, IconRender } from './types'\n\nimport { px } from '../../utils/css'\n\ninterface IconProps {\n  /**\n   * Which icon to draw. A plain string is a name: it is offered to the consumer's\n   * resolver and then left to the icon font as a ligature. One of the design\n   * system's own icons, imported from `vectis-ui/icons`, carries its drawing with\n   * it — the resolver is still asked first, and the drawing is what answers when\n   * nothing else does.\n   */\n  name?: string | BuiltinIcon\n  /**\n   * An explicit description of what to draw — an image, a component, a path, a class\n   * — which wins over everything else. This is the route every `IconSource` prop of\n   * the design system takes when it is given something other than a plain name.\n   */\n  render?: IconRender\n  /** The address of an image to use as the icon. It wins over `name`. */\n  src?: string\n  /**\n   * A size in pixels, as a number or a numeric string. Left out, or given something that\n   * is not a number, the icon takes the size its context imposes — a button sets one for\n   * the icons inside it — and failing that 1em, which makes it follow the surrounding\n   * text.\n   */\n  size?: number | string\n  /**\n   * What the icon means, for screen readers. Leaving it out marks the icon as\n   * decorative and hides it from them, which is the right thing whenever the\n   * surrounding text already says what it says.\n   */\n  label?: string\n  /**\n   * Draws the filled version of the icon. The built-in icons honour it wherever\n   * filling actually changes the drawing, and the ligature font always does. It\n   * means nothing for an image or an inline SVG, whose shape is fixed.\n   */\n  filled?: boolean\n  /**\n   * Flips the icon horizontally in a right-to-left context, for a glyph that points\n   * at a physical direction: a \"previous\" chevron points left in English and right in\n   * Arabic. Off by default, since most icons mean the same thing in both directions.\n   * The direction is the one the browser computed, so an ancestor's `dir` is enough.\n   */\n  mirrored?: boolean\n}\n\nconst props = withDefaults(defineProps<IconProps>(), {\n  name: undefined,\n  render: undefined,\n  src: undefined,\n  size: undefined,\n  label: undefined,\n  filled: false,\n  mirrored: false,\n})\n\ndefineSlots<{\n  /** An inline SVG, used when neither `src` nor `name` was given. */\n  default?(): unknown\n}>()\n\n/**\n * The chosen source, labelled with its kind. The public `IconRender` union carries\n * no such label — the consumer writes it by hand and has nothing to tag it with —\n * but the template needs one thing it can branch on reliably, and applying the tag\n * is also where the documented precedence between the shapes gets decided.\n */\ntype Resolved =\n  | { kind: 'path'; path: string; viewBox: string }\n  | { kind: 'component'; component: Component; props?: Record<string, unknown> }\n  | { kind: 'src'; src: string }\n  | { kind: 'text'; text: string; class?: string }\n  | { kind: 'class'; class: string }\n\nfunction tag(render: IconRender): Resolved {\n  if ('path' in render)\n    return { kind: 'path', path: render.path, viewBox: render.viewBox ?? ICON_VIEW_BOX }\n  if ('component' in render)\n    return { kind: 'component', component: render.component, props: render.props }\n  if ('src' in render) return { kind: 'src', src: render.src }\n  if ('text' in render) return { kind: 'text', text: render.text, class: render.class }\n  return { kind: 'class', class: render.class }\n}\n\n/**\n * The icon's identity: the name the resolver is asked for, and the one `data-icon`\n * records whatever the drawing turned out to come from.\n */\nconst iconName = computed(() => nameOf(props.name))\n\n// @fallback — the ladder itself: every rung hands over to the next one, and the\n// ligature is the last resort, reached when neither the resolver nor the registry\n// recognized the name.\n/**\n * Works out what to draw: an explicit `render` if there is one, then the consumer's\n * resolver, then the icons built into the library. Answering `undefined` here is not\n * a failure — it means the template falls through to the image, the ligature or the\n * slot.\n */\nconst resolved = computed<Resolved | undefined>(() => {\n  if (props.render) return tag(props.render)\n  // TRUTHINESS on `src`, the test the template renders the image with: an empty `src=\"\"`\n  // renders no image, so it must not stop the name from being drawn either.\n  if (props.src || props.name === undefined) return undefined\n\n  const custom = resolveIcon(iconName.value!, { filled: props.filled })\n  if (custom) return tag(custom)\n\n  // A bare name has no drawing of its own, so it falls through to the ligature; only\n  // one of the library's own icons brings its paths along.\n  if (typeof props.name === 'string') return undefined\n\n  const { paths } = props.name\n  // A second path is only stored when filling actually changes the drawing, so most\n  // icons have one path and fall back to it (see icons.ts).\n  const path = (props.filled ? paths[1] : undefined) ?? paths[0]\n  return { kind: 'path', path, viewBox: ICON_VIEW_BOX }\n})\n</script>\n\n<template>\n  <span\n    class=\"v-icon\"\n    :style=\"px(size) !== undefined ? { '--vectis-icon-size': px(size) } : undefined\"\n    :data-icon=\"iconName\"\n    :data-filled=\"filled || undefined\"\n    :data-mirror=\"mirrored || undefined\"\n    :role=\"label ? 'img' : undefined\"\n    :aria-label=\"label\"\n    :aria-hidden=\"label ? undefined : 'true'\"\n  >\n    <template v-if=\"resolved\">\n      <svg\n        v-if=\"resolved.kind === 'path'\"\n        class=\"v-icon-svg\"\n        :viewBox=\"resolved.viewBox\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        <path :d=\"resolved.path\" />\n      </svg>\n      <component\n        :is=\"resolved.component\"\n        v-else-if=\"resolved.kind === 'component'\"\n        v-bind=\"resolved.props\"\n      />\n      <img v-else-if=\"resolved.kind === 'src'\" class=\"v-icon-img\" :src=\"resolved.src\" alt=\"\" />\n      <!-- The interpolation is written flush against the tags: a ligature is matched\n           on the exact text, and any surrounding whitespace would break it -->\n      <span v-else-if=\"resolved.kind === 'text'\" class=\"v-icon-symbol\" :class=\"resolved.class\">{{\n        resolved.text\n      }}</span>\n      <span v-else class=\"v-icon-glyph\" :class=\"resolved.class\" />\n    </template>\n    <img v-else-if=\"src\" class=\"v-icon-img\" :src=\"src\" alt=\"\" />\n    <span v-else-if=\"name\" class=\"v-icon-symbol\">{{ iconName }}</span>\n    <slot v-else />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-icon {\n    /*\n     * How the size is settled, in order of priority:\n     * 1. the `size` prop, written inline on the element as --vectis-icon-size — a\n     *    declaration made on the element itself beats both inheritance and the\n     *    layer, so it always wins;\n     * 2. the variables inherited from an ancestor, which is the context API: a\n     *    VButton sets them from its own size, and the icons inside follow;\n     * 3. 1em, which makes the icon follow the size of the text around it.\n     */\n    --icon-size: var(--vectis-icon-size, 1em);\n    --icon-opsz: var(--vectis-icon-opsz, 24);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: none;\n    inline-size: var(--icon-size);\n    block-size: var(--icon-size);\n    /* a ligature is text, so it is the font-size that sizes it */\n    font-size: var(--icon-size);\n  }\n\n  /* When the icon font has not loaded, a ligature shows as its own name in plain\n     text. Clipping keeps that text inside the square instead of letting it push the\n     layout apart. The rule is scoped to the ONE branch it protects rather than to\n     `.v-icon`: a third-party icon font may legitimately draw outside its 1em box,\n     and clipping everything would cut those glyphs. */\n  .v-icon:has(> .v-icon-symbol) {\n    overflow: hidden;\n  }\n\n  .v-icon-symbol {\n    font-family: var(--vectis-font-family-icon);\n    font-weight: var(--vectis-font-weight-regular);\n    font-style: normal;\n    line-height: var(--vectis-font-leading-none);\n    letter-spacing: normal;\n    text-transform: none;\n    white-space: nowrap;\n    direction: ltr;\n    /* The variable axes of the Material Symbols font. These numbers are the font's\n       own technical contract and not design decisions, which is why they are written\n       literally here rather than taken from tokens — the same tolerance as the\n       opacities. */\n    font-variation-settings:\n      'FILL' var(--icon-fill, 0),\n      'wght' 400,\n      'GRAD' 0,\n      'opsz' var(--icon-opsz);\n  }\n\n  .v-icon[data-filled] .v-icon-symbol {\n    --icon-fill: 1;\n  }\n\n  /* `:dir()` reads the direction the browser computed rather than an attribute spelled on\n     an ancestor, and `scale` is the individual property, so it composes with a rotation\n     a consumer applies (a disclosure chevron) instead of replacing its transform. */\n  .v-icon[data-mirror]:dir(rtl) {\n    scale: -1 1;\n  }\n\n  .v-icon-img,\n  .v-icon > svg {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: contain;\n  }\n\n  /* An icon coming from a class-based font, as Font Awesome and Phosphor ship them:\n     the glyph is drawn by a `::before`, at the font-size `.v-icon` has set. Because\n     the design system renders this element itself rather than accepting the usual\n     `<i>`, one rule normalizes it for every such library — `font-style` undoes the\n     italics those conventions carry, and `line-height` stops the inherited line box\n     from pushing the glyph off centre. */\n  .v-icon-glyph {\n    display: block;\n    font-style: normal;\n    line-height: var(--vectis-font-leading-none);\n  }\n\n  /* An SVG drawn from the built-in icons. The fill is set on OUR class and never on\n     `.v-icon > svg`, so that a multicoloured SVG handed in through the slot keeps\n     its own colours instead of being flattened to the text colour. `display: block`\n     removes the gap an inline element leaves under its baseline. */\n  .v-icon-svg {\n    display: block;\n    fill: currentcolor;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0EA,IAAM,IAAQ;EA4Bd,SAAS,EAAI,GAA8B;GAOzC,OANI,UAAU,IACL;IAAE,MAAM;IAAQ,MAAM,EAAO;IAAM,SAAS,EAAO,WAAA;GAAyB,IACjF,eAAe,IACV;IAAE,MAAM;IAAa,WAAW,EAAO;IAAW,OAAO,EAAO;GAAM,IAC3E,SAAS,IAAe;IAAE,MAAM;IAAO,KAAK,EAAO;GAAI,IACvD,UAAU,IAAe;IAAE,MAAM;IAAQ,MAAM,EAAO;IAAM,OAAO,EAAO;GAAM,IAC7E;IAAE,MAAM;IAAS,OAAO,EAAO;GAAM;EAC9C;EAMA,IAAM,IAAW,QAAe,EAAO,EAAM,IAAI,CAAC,GAW5C,IAAW,QAAqC;GACpD,IAAI,EAAM,QAAQ,OAAO,EAAI,EAAM,MAAM;GAGzC,IAAI,EAAM,OAAO,EAAM,SAAS,KAAA,GAAW;GAE3C,IAAM,IAAS,EAAY,EAAS,OAAQ,EAAE,QAAQ,EAAM,OAAO,CAAC;GACpE,IAAI,GAAQ,OAAO,EAAI,CAAM;GAI7B,IAAI,OAAO,EAAM,QAAS,UAAU;GAEpC,IAAM,EAAE,aAAU,EAAM;GAIxB,OAAO;IAAE,MAAM;IAAQ,OADT,EAAM,SAAS,EAAM,KAAK,KAAA,MAAc,EAAM;IAC/B,SAAS;GAAc;EACtD,CAAC;yBAIC,EAoCO,QAAA;GAnCL,OAAM;GACL,OAAK,EAAE,EAAA,CAAA,CAAE,CAAC,EAAA,IAAI,MAAM,KAAA,IAAiD,KAAA,IAAxC,EAAA,sBAA2B,EAAA,CAAA,CAAE,CAAC,EAAA,IAAI,EAAA,CAAe;GAC9E,aAAW,EAAA;GACX,eAAa,EAAA,UAAU,KAAA;GACvB,eAAa,EAAA,YAAY,KAAA;GACzB,MAAM,EAAA,QAAK,QAAW,KAAA;GACtB,cAAY,EAAA;GACZ,eAAa,EAAA,QAAQ,KAAA,IAAS;MAEf,EAAA,SAAA,EAAA,GAAhB,EAsBW,GAAA,EAAA,KAAA,EAAA,GAAA,CApBD,EAAA,MAAS,SAAI,UAAA,EAAA,GADrB,EAQM,OAAA;;GANJ,OAAM;GACL,SAAS,EAAA,MAAS;GACnB,eAAY;GACZ,WAAU;MAEV,EAA2B,QAAA,EAApB,GAAG,EAAA,MAAS,KAAA,GAAA,MAAA,GAAA,CAAA,CAAA,GAAA,GAAA,CAAA,KAIR,EAAA,MAAS,SAAI,eAAA,EAAA,GAF1B,EAIE,EAHK,EAAA,MAAS,SAAS,GAAA,EAAA,EAAA,EAAA,KAAA,EAAA,GAEf,EAAA,MAAS,KAAK,CAAA,GAAA,MAAA,EAAA,KAER,EAAA,MAAS,SAAI,SAAA,EAAA,GAA7B,EAAyF,OAAA;;GAAhD,OAAM;GAAc,KAAK,EAAA,MAAS;GAAK,KAAI;oBAGnE,EAAA,MAAS,SAAI,UAAA,EAAA,GAA9B,EAES,QAAA;;GAFkC,OAAK,EAAA,CAAC,iBAAwB,EAAA,MAAS,KAAK,CAAA;OACrF,EAAA,MAAS,IAAI,GAAA,CAAA,MAAA,EAAA,GAEf,EAA4D,QAAA;;GAA/C,OAAK,EAAA,CAAC,gBAAuB,EAAA,MAAS,KAAK,CAAA;wBAE1C,EAAA,OAAA,EAAA,GAAhB,EAA4D,OAAA;;GAAvC,OAAM;GAAc,KAAK,EAAA;GAAK,KAAI;oBACtC,EAAA,QAAA,EAAA,GAAjB,EAAkE,QAAlE,GAAkE,EAAlB,EAAA,KAAQ,GAAA,CAAA,KACxD,EAAe,EAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,CAAA,GAAA,IAAA,CAAA"}
+{"version":3,"file":"VIcon.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VIcon/VIcon.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * An icon, whatever the host application's icons are made of. The real work is deciding\n * WHERE the drawing comes from, asked in a fixed order: `render`, then `src`, then `name` —\n * offered to the consumer's resolver if one was installed, then to the drawing the icon\n * carries, and finally to a ligature font. A raw SVG can always come through the slot.\n *\n * That order IS the contract. The resolver comes before the built-in drawing, or the\n * library's own icons would stay Material for a consumer who wired in their own set; and a\n * resolver returning `undefined` hands over to that drawing, which is what makes a PARTIAL\n * mapping usable.\n *\n * It is what lets the library require no icon font: the icons it draws by default are\n * imported by the components that render them and travel as a name AND its paths, so a\n * consumer downloads only the ones their components actually draw.\n *\n * Despite the `computed`, there is no behavioural JS here — no event, no lifecycle, no DOM.\n * A pure choice of source, made identically on the server and in the browser.\n */\nimport { computed, type Component } from 'vue'\n\nimport { iconName as nameOf } from './iconProps'\nimport { ICON_VIEW_BOX } from './icons/viewBox'\nimport { resolveIcon } from './resolver'\nimport type { BuiltinIcon, IconRender } from './types'\n\nimport { px } from '../../utils/css'\n\ninterface IconProps {\n  /**\n   * Which icon to draw. A plain string is a name: it is offered to the consumer's\n   * resolver and then left to the icon font as a ligature. One of the design\n   * system's own icons, imported from `vectis-ui/icons`, carries its drawing with\n   * it: the resolver is still asked first, and the drawing is what answers when\n   * nothing else does.\n   */\n  name?: string | BuiltinIcon\n  /**\n   * An explicit description of what to draw (an image, a component, a path, a class),\n   * which wins over everything else. This is the route every `IconSource` prop of\n   * the design system takes when it is given something other than a plain name.\n   */\n  render?: IconRender\n  /** The address of an image to use as the icon. It wins over `name`. */\n  src?: string\n  /**\n   * A size in pixels, as a number or a numeric string. Left out, or given something that\n   * is not a number, the icon takes the size its context imposes (a button sets one for\n   * the icons inside it), and failing that 1em, which makes it follow the surrounding\n   * text.\n   */\n  size?: number | string\n  /**\n   * What the icon means, for screen readers. Leaving it out marks the icon as\n   * decorative and hides it from them, which is the right thing whenever the\n   * surrounding text already says what it says.\n   */\n  label?: string\n  /**\n   * Draws the filled version of the icon. The built-in icons honour it wherever\n   * filling actually changes the drawing, and the ligature font always does. It\n   * means nothing for an image or an inline SVG, whose shape is fixed.\n   */\n  filled?: boolean\n  /**\n   * Flips the icon horizontally in a right-to-left context, for a glyph that points\n   * at a physical direction: a \"previous\" chevron points left in English and right in\n   * Arabic. Off by default, since most icons mean the same thing in both directions.\n   * The direction is the one the browser computed, so an ancestor's `dir` is enough.\n   */\n  mirrored?: boolean\n}\n\nconst props = withDefaults(defineProps<IconProps>(), {\n  name: undefined,\n  render: undefined,\n  src: undefined,\n  size: undefined,\n  label: undefined,\n  filled: false,\n  mirrored: false,\n})\n\ndefineSlots<{\n  /** An inline SVG, used when none of `render`, `src` and `name` was given. */\n  default?(): unknown\n}>()\n\n/**\n * The chosen source, labelled with its kind. The public `IconRender` union carries\n * no such label — the consumer writes it by hand and has nothing to tag it with —\n * but the template needs one thing it can branch on reliably, and applying the tag\n * is also where the documented precedence between the shapes gets decided.\n */\ntype Resolved =\n  | { kind: 'path'; path: string; viewBox: string }\n  | { kind: 'component'; component: Component; props?: Record<string, unknown> }\n  | { kind: 'src'; src: string }\n  | { kind: 'text'; text: string; class?: string }\n  | { kind: 'class'; class: string }\n\nfunction tag(render: IconRender): Resolved {\n  if ('path' in render)\n    return { kind: 'path', path: render.path, viewBox: render.viewBox ?? ICON_VIEW_BOX }\n  if ('component' in render)\n    return { kind: 'component', component: render.component, props: render.props }\n  if ('src' in render) return { kind: 'src', src: render.src }\n  if ('text' in render) return { kind: 'text', text: render.text, class: render.class }\n  return { kind: 'class', class: render.class }\n}\n\n/**\n * The icon's identity: the name the resolver is asked for, and the one `data-icon`\n * records whatever the drawing turned out to come from.\n */\nconst iconName = computed(() => nameOf(props.name))\n\n// @fallback — the ladder itself: every rung hands over to the next one, and the\n// ligature is the last resort, reached when neither the resolver nor the registry\n// recognized the name.\n/**\n * Works out what to draw: an explicit `render` if there is one, then the consumer's\n * resolver, then the icons built into the library. Answering `undefined` here is not\n * a failure — it means the template falls through to the image, the ligature or the\n * slot.\n */\nconst resolved = computed<Resolved | undefined>(() => {\n  if (props.render) return tag(props.render)\n  // TRUTHINESS on `src`, the test the template renders the image with: an empty `src=\"\"`\n  // renders no image, so it must not stop the name from being drawn either.\n  if (props.src || props.name === undefined) return undefined\n\n  const custom = resolveIcon(iconName.value!, { filled: props.filled })\n  if (custom) return tag(custom)\n\n  // A bare name has no drawing of its own, so it falls through to the ligature; only\n  // one of the library's own icons brings its paths along.\n  if (typeof props.name === 'string') return undefined\n\n  const { paths } = props.name\n  // A second path is only stored when filling actually changes the drawing, so most\n  // icons have one path and fall back to it (see the `BuiltinIcon` type).\n  const path = (props.filled ? paths[1] : undefined) ?? paths[0]\n  return { kind: 'path', path, viewBox: ICON_VIEW_BOX }\n})\n</script>\n\n<template>\n  <span\n    class=\"v-icon\"\n    :style=\"px(size) !== undefined ? { '--vectis-icon-size': px(size) } : undefined\"\n    :data-icon=\"iconName\"\n    :data-filled=\"filled || undefined\"\n    :data-mirror=\"mirrored || undefined\"\n    :role=\"label ? 'img' : undefined\"\n    :aria-label=\"label\"\n    :aria-hidden=\"label ? undefined : 'true'\"\n  >\n    <template v-if=\"resolved\">\n      <svg\n        v-if=\"resolved.kind === 'path'\"\n        class=\"v-icon-svg\"\n        :viewBox=\"resolved.viewBox\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        <path :d=\"resolved.path\" />\n      </svg>\n      <component\n        :is=\"resolved.component\"\n        v-else-if=\"resolved.kind === 'component'\"\n        v-bind=\"resolved.props\"\n      />\n      <img v-else-if=\"resolved.kind === 'src'\" class=\"v-icon-img\" :src=\"resolved.src\" alt=\"\" />\n      <!-- The interpolation is written flush against the tags: a ligature is matched\n           on the exact text, and any surrounding whitespace would break it -->\n      <span v-else-if=\"resolved.kind === 'text'\" class=\"v-icon-symbol\" :class=\"resolved.class\">{{\n        resolved.text\n      }}</span>\n      <span v-else class=\"v-icon-glyph\" :class=\"resolved.class\" />\n    </template>\n    <img v-else-if=\"src\" class=\"v-icon-img\" :src=\"src\" alt=\"\" />\n    <span v-else-if=\"name\" class=\"v-icon-symbol\">{{ iconName }}</span>\n    <slot v-else />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-icon {\n    /*\n     * How the size is settled, in order of priority:\n     * 1. the `size` prop, written inline on the element as --vectis-icon-size — a\n     *    declaration made on the element itself beats both inheritance and the\n     *    layer, so it always wins;\n     * 2. the variables inherited from an ancestor, which is the context API: a\n     *    VButton sets them from its own size, and the icons inside follow;\n     * 3. 1em, which makes the icon follow the size of the text around it.\n     */\n    --icon-size: var(--vectis-icon-size, 1em);\n    --icon-opsz: var(--vectis-icon-opsz, 24);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: none;\n    /* A ligature is text, so it is the font-size that sizes it, and the box follows as 1em.\n       TRAP — the box must NOT read `--icon-size` again: an `em` there resolves against\n       this element's own font-size, already enlarged by the line below, so a context size\n       of 1.5em drew a box of 2.25em around a glyph of 1.5em. */\n    font-size: var(--icon-size);\n    inline-size: 1em;\n    block-size: 1em;\n  }\n\n  /* When the icon font has not loaded, a ligature shows as its own name in plain\n     text. Clipping keeps that text inside the square instead of letting it push the\n     layout apart. The rule is scoped to the ONE branch it protects rather than to\n     `.v-icon`: a third-party icon font may legitimately draw outside its 1em box,\n     and clipping everything would cut those glyphs. */\n  .v-icon:has(> .v-icon-symbol) {\n    overflow: hidden;\n  }\n\n  .v-icon-symbol {\n    /* Declared here and not only under `[data-filled]`: a custom property inherits, so a\n       host application setting `--icon-fill` on an ancestor would otherwise fill every\n       icon below it. */\n    --icon-fill: 0;\n    font-family: var(--vectis-font-family-icon);\n    font-weight: var(--vectis-font-weight-regular);\n    font-style: normal;\n    line-height: var(--vectis-font-leading-none);\n    letter-spacing: normal;\n    text-transform: none;\n    white-space: nowrap;\n    direction: ltr;\n    /* The variable axes of the Material Symbols font. These numbers are the font's\n       own technical contract and not design decisions, which is why they are written\n       literally here rather than taken from tokens — the same tolerance as the\n       opacities. */\n    font-variation-settings:\n      'FILL' var(--icon-fill),\n      'wght' 400,\n      'GRAD' 0,\n      'opsz' var(--icon-opsz);\n  }\n\n  .v-icon[data-filled] .v-icon-symbol {\n    --icon-fill: 1;\n  }\n\n  /* `:dir()` reads the direction the browser computed rather than an attribute spelled on\n     an ancestor, and `scale` is the individual property, so it composes with a rotation\n     a consumer applies (a disclosure chevron) instead of replacing its transform. */\n  .v-icon[data-mirror]:dir(rtl) {\n    scale: -1 1;\n  }\n\n  .v-icon-img,\n  .v-icon > svg {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: contain;\n  }\n\n  /* An icon coming from a class-based font, as Font Awesome and Phosphor ship them:\n     the glyph is drawn by a `::before`, at the font-size `.v-icon` has set. Because\n     the design system renders this element itself rather than accepting the usual\n     `<i>`, one rule normalizes it for every such library — `font-style` undoes the\n     italics those conventions carry, and `line-height` stops the inherited line box\n     from pushing the glyph off centre. */\n  .v-icon-glyph {\n    display: block;\n    font-style: normal;\n    line-height: var(--vectis-font-leading-none);\n  }\n\n  /* An SVG drawn from the built-in icons. The fill is set on OUR class and never on\n     `.v-icon > svg`, so that a multicoloured SVG handed in through the slot keeps\n     its own colours instead of being flattened to the text colour. `display: block`\n     removes the gap an inline element leaves under its baseline. */\n  .v-icon-svg {\n    display: block;\n    fill: currentcolor;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyEA,IAAM,IAAQ;EA4Bd,SAAS,EAAI,GAA8B;GAOzC,OANI,UAAU,IACL;IAAE,MAAM;IAAQ,MAAM,EAAO;IAAM,SAAS,EAAO,WAAA;GAAyB,IACjF,eAAe,IACV;IAAE,MAAM;IAAa,WAAW,EAAO;IAAW,OAAO,EAAO;GAAM,IAC3E,SAAS,IAAe;IAAE,MAAM;IAAO,KAAK,EAAO;GAAI,IACvD,UAAU,IAAe;IAAE,MAAM;IAAQ,MAAM,EAAO;IAAM,OAAO,EAAO;GAAM,IAC7E;IAAE,MAAM;IAAS,OAAO,EAAO;GAAM;EAC9C;EAMA,IAAM,IAAW,QAAe,EAAO,EAAM,IAAI,CAAC,GAW5C,IAAW,QAAqC;GACpD,IAAI,EAAM,QAAQ,OAAO,EAAI,EAAM,MAAM;GAGzC,IAAI,EAAM,OAAO,EAAM,SAAS,KAAA,GAAW;GAE3C,IAAM,IAAS,EAAY,EAAS,OAAQ,EAAE,QAAQ,EAAM,OAAO,CAAC;GACpE,IAAI,GAAQ,OAAO,EAAI,CAAM;GAI7B,IAAI,OAAO,EAAM,QAAS,UAAU;GAEpC,IAAM,EAAE,aAAU,EAAM;GAIxB,OAAO;IAAE,MAAM;IAAQ,OADT,EAAM,SAAS,EAAM,KAAK,KAAA,MAAc,EAAM;IAC/B,SAAS;GAAc;EACtD,CAAC;yBAIC,EAoCO,QAAA;GAnCL,OAAM;GACL,OAAK,EAAE,EAAA,CAAA,CAAE,CAAC,EAAA,IAAI,MAAM,KAAA,IAAiD,KAAA,IAAxC,EAAA,sBAA2B,EAAA,CAAA,CAAE,CAAC,EAAA,IAAI,EAAA,CAAe;GAC9E,aAAW,EAAA;GACX,eAAa,EAAA,UAAU,KAAA;GACvB,eAAa,EAAA,YAAY,KAAA;GACzB,MAAM,EAAA,QAAK,QAAW,KAAA;GACtB,cAAY,EAAA;GACZ,eAAa,EAAA,QAAQ,KAAA,IAAS;MAEf,EAAA,SAAA,EAAA,GAAhB,EAsBW,GAAA,EAAA,KAAA,EAAA,GAAA,CApBD,EAAA,MAAS,SAAI,UAAA,EAAA,GADrB,EAQM,OAAA;;GANJ,OAAM;GACL,SAAS,EAAA,MAAS;GACnB,eAAY;GACZ,WAAU;MAEV,EAA2B,QAAA,EAApB,GAAG,EAAA,MAAS,KAAA,GAAA,MAAA,GAAA,CAAA,CAAA,GAAA,GAAA,CAAA,KAIR,EAAA,MAAS,SAAI,eAAA,EAAA,GAF1B,EAIE,EAHK,EAAA,MAAS,SAAS,GAAA,EAAA,EAAA,EAAA,KAAA,EAAA,GAEf,EAAA,MAAS,KAAK,CAAA,GAAA,MAAA,EAAA,KAER,EAAA,MAAS,SAAI,SAAA,EAAA,GAA7B,EAAyF,OAAA;;GAAhD,OAAM;GAAc,KAAK,EAAA,MAAS;GAAK,KAAI;oBAGnE,EAAA,MAAS,SAAI,UAAA,EAAA,GAA9B,EAES,QAAA;;GAFkC,OAAK,EAAA,CAAC,iBAAwB,EAAA,MAAS,KAAK,CAAA;OACrF,EAAA,MAAS,IAAI,GAAA,CAAA,MAAA,EAAA,GAEf,EAA4D,QAAA;;GAA/C,OAAK,EAAA,CAAC,gBAAuB,EAAA,MAAS,KAAK,CAAA;wBAE1C,EAAA,OAAA,EAAA,GAAhB,EAA4D,OAAA;;GAAvC,OAAM;GAAc,KAAK,EAAA;GAAK,KAAI;oBACtC,EAAA,QAAA,EAAA,GAAjB,EAAkE,QAAlE,GAAkE,EAAlB,EAAA,KAAQ,GAAA,CAAA,KACxD,EAAe,EAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,CAAA,GAAA,IAAA,CAAA"}

package/dist/components/VIcon/iconProps.d.ts

@@ -6,7 +6,7 @@ import { BuiltinIcon, IconRender, IconSource } from './types.js';
  *
  * There is NO guesswork in the conversion: a plain string is ALWAYS a name, and an
  * image or a component is declared explicitly as an object, `{ src: '/logo.svg' }`.
- * That is what keeps the usual naming conventions — `mdi:close`, `fa6-solid:xmark` —
+ * That is what keeps the usual naming conventions (`mdi:close`, `fa6-solid:xmark`)
  * reaching the resolver intact rather than being mistaken for addresses.
  */
 export declare const iconProps: (icon: IconSource) => {
@@ -20,11 +20,11 @@ export declare const iconProps: (icon: IconSource) => {
  * A readable name for an icon, used as a last-resort accessible label when the
  * consumer supplied none.
  *
- * It answers `undefined` as soon as the icon was DESCRIBED rather than named — an
- * image, a component, a class — because such a description has no name to give and
+ * It answers `undefined` as soon as the icon was DESCRIBED rather than named (an
+ * image, a component, a class), because such a description has no name to give and
  * an `[object Object]` read out by a screen reader would be worse than silence.
  * `useIconClickHandlers` is what warns the integrator when that happens on a control
  * that needs a name. One of the library's own icons does carry its name, so it
- * answers here exactly as the bare string used to.
+ * answers here with that name, as a bare string does.
  */
 export declare const iconName: (icon: IconSource | undefined) => string | undefined;

package/dist/components/VIcon/iconProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"iconProps.js","names":[],"sources":["../../../src/components/VIcon/iconProps.ts"],"sourcesContent":["/**\n * Tells one of the library's own icons from something the consumer described by\n * hand. Only a `BuiltinIcon` carries `paths`, and the distinction matters: it is\n * what routes a built-in default to `name` — where the resolver still gets first\n * refusal — instead of to `render`, which wins outright and would silence it.\n */\n\nimport type { BuiltinIcon, IconRender, IconSource } from './types'\n\nconst isBuiltinIcon = (icon: BuiltinIcon | IconRender): icon is BuiltinIcon => 'paths' in icon\n\n/**\n * Turns what a consumer wrote in an icon prop into the props VIcon expects. It is\n * what every component of the design system calls before rendering an icon it was\n * given.\n *\n * There is NO guesswork in the conversion: a plain string is ALWAYS a name, and an\n * image or a component is declared explicitly as an object, `{ src: '/logo.svg' }`.\n * That is what keeps the usual naming conventions — `mdi:close`, `fa6-solid:xmark` —\n * reaching the resolver intact rather than being mistaken for addresses.\n */\nexport const iconProps = (icon: IconSource) =>\n  typeof icon === 'string' || isBuiltinIcon(icon) ? { name: icon } : { render: icon }\n\n/**\n * A readable name for an icon, used as a last-resort accessible label when the\n * consumer supplied none.\n *\n * It answers `undefined` as soon as the icon was DESCRIBED rather than named — an\n * image, a component, a class — because such a description has no name to give and\n * an `[object Object]` read out by a screen reader would be worse than silence.\n * `useIconClickHandlers` is what warns the integrator when that happens on a control\n * that needs a name. One of the library's own icons does carry its name, so it\n * answers here exactly as the bare string used to.\n */\nexport const iconName = (icon: IconSource | undefined) =>\n  typeof icon === 'string' ? icon : icon && isBuiltinIcon(icon) ? icon.name : undefined\n"],"mappings":";AASA,IAAM,KAAiB,MAAwD,WAAW,GAY7E,KAAa,MACxB,OAAO,KAAS,YAAY,EAAc,CAAI,IAAI,EAAE,MAAM,EAAK,IAAI,EAAE,QAAQ,EAAK,GAavE,KAAY,MACvB,OAAO,KAAS,WAAW,IAAO,KAAQ,EAAc,CAAI,IAAI,EAAK,OAAO,KAAA"}
+{"version":3,"file":"iconProps.js","names":[],"sources":["../../../src/components/VIcon/iconProps.ts"],"sourcesContent":["import type { BuiltinIcon, IconRender, IconSource } from './types'\n\n/**\n * Tells one of the library's own icons from something the consumer described by\n * hand. Only a `BuiltinIcon` carries `paths`, and the distinction matters: it is\n * what routes a built-in default to `name`, where the resolver still gets first\n * refusal, instead of to `render`, which wins outright and would silence it.\n */\nconst isBuiltinIcon = (icon: BuiltinIcon | IconRender): icon is BuiltinIcon => 'paths' in icon\n\n/**\n * Turns what a consumer wrote in an icon prop into the props VIcon expects. It is\n * what every component of the design system calls before rendering an icon it was\n * given.\n *\n * There is NO guesswork in the conversion: a plain string is ALWAYS a name, and an\n * image or a component is declared explicitly as an object, `{ src: '/logo.svg' }`.\n * That is what keeps the usual naming conventions (`mdi:close`, `fa6-solid:xmark`)\n * reaching the resolver intact rather than being mistaken for addresses.\n */\nexport const iconProps = (icon: IconSource) =>\n  typeof icon === 'string' || isBuiltinIcon(icon) ? { name: icon } : { render: icon }\n\n/**\n * A readable name for an icon, used as a last-resort accessible label when the\n * consumer supplied none.\n *\n * It answers `undefined` as soon as the icon was DESCRIBED rather than named (an\n * image, a component, a class), because such a description has no name to give and\n * an `[object Object]` read out by a screen reader would be worse than silence.\n * `useIconClickHandlers` is what warns the integrator when that happens on a control\n * that needs a name. One of the library's own icons does carry its name, so it\n * answers here with that name, as a bare string does.\n */\nexport const iconName = (icon: IconSource | undefined) =>\n  typeof icon === 'string' ? icon : icon && isBuiltinIcon(icon) ? icon.name : undefined\n"],"mappings":";AAQA,IAAM,KAAiB,MAAwD,WAAW,GAY7E,KAAa,MACxB,OAAO,KAAS,YAAY,EAAc,CAAI,IAAI,EAAE,MAAM,EAAK,IAAI,EAAE,QAAQ,EAAK,GAavE,KAAY,MACvB,OAAO,KAAS,WAAW,IAAO,KAAQ,EAAc,CAAI,IAAI,EAAK,OAAO,KAAA"}

package/dist/components/VIcon/icons/index.d.ts

@@ -39,7 +39,7 @@ export { arrow_downward, arrow_downward_alt, arrow_drop_down, arrow_drop_up, arr
  * Every icon at once, for the places that legitimately want the whole set: the
  * gallery in the stories, the documentation site, the tests.
  *
- * NOTHING the library ships imports this barrel — a component imports the two or
+ * NOTHING the library ships imports this barrel: a component imports the two or
  * three icon modules it draws, by name. Importing it from a component would pull all
  * 34 drawings back into every consumer's bundle and undo the split.
  */

package/dist/components/VIcon/icons/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/VIcon/icons/index.ts"],"sourcesContent":["/*\n * GENERATED FILE — do not edit by hand.\n * Regenerate: pnpm icons  ·  Source: scripts/build-icons.ts\n *\n * Material Symbols Rounded (wght 400 · GRAD 0 · opsz 24)\n * google/material-design-icons @ 528cb964c01fb2b09bc3b9208f82b6d8f8c1c1e2\n * Apache-2.0 licence © Google.\n */\nimport { arrow_downward } from './arrow_downward'\nimport { arrow_downward_alt } from './arrow_downward_alt'\nimport { arrow_drop_down } from './arrow_drop_down'\nimport { arrow_drop_up } from './arrow_drop_up'\nimport { arrow_left_alt } from './arrow_left_alt'\nimport { arrow_right_alt } from './arrow_right_alt'\nimport { arrow_upward } from './arrow_upward'\nimport { arrow_upward_alt } from './arrow_upward_alt'\nimport { attach_file } from './attach_file'\nimport { audio_file } from './audio_file'\nimport { calendar_today } from './calendar_today'\nimport { check } from './check'\nimport { check_circle } from './check_circle'\nimport { chevron_left } from './chevron_left'\nimport { chevron_right } from './chevron_right'\nimport { close } from './close'\nimport { cloud_upload } from './cloud_upload'\nimport { code } from './code'\nimport { description } from './description'\nimport { error } from './error'\nimport { expand_less } from './expand_less'\nimport { expand_more } from './expand_more'\nimport { folder_zip } from './folder_zip'\nimport { image } from './image'\nimport { info } from './info'\nimport { more_horiz } from './more_horiz'\nimport { notifications } from './notifications'\nimport { picture_as_pdf } from './picture_as_pdf'\nimport { schedule } from './schedule'\nimport { search } from './search'\nimport { swap_vert } from './swap_vert'\nimport { table_chart } from './table_chart'\nimport { video_file } from './video_file'\nimport { warning } from './warning'\n\nexport { ICON_VIEW_BOX } from './viewBox'\nexport { builtinIconNames, type IconName } from './names'\nexport {\n  arrow_downward,\n  arrow_downward_alt,\n  arrow_drop_down,\n  arrow_drop_up,\n  arrow_left_alt,\n  arrow_right_alt,\n  arrow_upward,\n  arrow_upward_alt,\n  attach_file,\n  audio_file,\n  calendar_today,\n  check,\n  check_circle,\n  chevron_left,\n  chevron_right,\n  close,\n  cloud_upload,\n  code,\n  description,\n  error,\n  expand_less,\n  expand_more,\n  folder_zip,\n  image,\n  info,\n  more_horiz,\n  notifications,\n  picture_as_pdf,\n  schedule,\n  search,\n  swap_vert,\n  table_chart,\n  video_file,\n  warning,\n}\n\n/**\n * Every icon at once, for the places that legitimately want the whole set: the\n * gallery in the stories, the documentation site, the tests.\n *\n * NOTHING the library ships imports this barrel — a component imports the two or\n * three icon modules it draws, by name. Importing it from a component would pull all\n * 34 drawings back into every consumer's bundle and undo the split.\n */\nexport const builtinIcons = {\n  arrow_downward,\n  arrow_downward_alt,\n  arrow_drop_down,\n  arrow_drop_up,\n  arrow_left_alt,\n  arrow_right_alt,\n  arrow_upward,\n  arrow_upward_alt,\n  attach_file,\n  audio_file,\n  calendar_today,\n  check,\n  check_circle,\n  chevron_left,\n  chevron_right,\n  close,\n  cloud_upload,\n  code,\n  description,\n  error,\n  expand_less,\n  expand_more,\n  folder_zip,\n  image,\n  info,\n  more_horiz,\n  notifications,\n  picture_as_pdf,\n  schedule,\n  search,\n  swap_vert,\n  table_chart,\n  video_file,\n  warning,\n} as const\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FA,IAAa,IAAe;CAC1B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/VIcon/icons/index.ts"],"sourcesContent":["/*\n * GENERATED FILE — do not edit by hand.\n * Regenerate: pnpm icons  ·  Source: scripts/build-icons.ts\n *\n * Material Symbols Rounded (wght 400 · GRAD 0 · opsz 24)\n * google/material-design-icons @ 528cb964c01fb2b09bc3b9208f82b6d8f8c1c1e2\n * Apache-2.0 licence © Google.\n */\nimport { arrow_downward } from './arrow_downward'\nimport { arrow_downward_alt } from './arrow_downward_alt'\nimport { arrow_drop_down } from './arrow_drop_down'\nimport { arrow_drop_up } from './arrow_drop_up'\nimport { arrow_left_alt } from './arrow_left_alt'\nimport { arrow_right_alt } from './arrow_right_alt'\nimport { arrow_upward } from './arrow_upward'\nimport { arrow_upward_alt } from './arrow_upward_alt'\nimport { attach_file } from './attach_file'\nimport { audio_file } from './audio_file'\nimport { calendar_today } from './calendar_today'\nimport { check } from './check'\nimport { check_circle } from './check_circle'\nimport { chevron_left } from './chevron_left'\nimport { chevron_right } from './chevron_right'\nimport { close } from './close'\nimport { cloud_upload } from './cloud_upload'\nimport { code } from './code'\nimport { description } from './description'\nimport { error } from './error'\nimport { expand_less } from './expand_less'\nimport { expand_more } from './expand_more'\nimport { folder_zip } from './folder_zip'\nimport { image } from './image'\nimport { info } from './info'\nimport { more_horiz } from './more_horiz'\nimport { notifications } from './notifications'\nimport { picture_as_pdf } from './picture_as_pdf'\nimport { schedule } from './schedule'\nimport { search } from './search'\nimport { swap_vert } from './swap_vert'\nimport { table_chart } from './table_chart'\nimport { video_file } from './video_file'\nimport { warning } from './warning'\n\nexport { ICON_VIEW_BOX } from './viewBox'\nexport { builtinIconNames, type IconName } from './names'\nexport {\n  arrow_downward,\n  arrow_downward_alt,\n  arrow_drop_down,\n  arrow_drop_up,\n  arrow_left_alt,\n  arrow_right_alt,\n  arrow_upward,\n  arrow_upward_alt,\n  attach_file,\n  audio_file,\n  calendar_today,\n  check,\n  check_circle,\n  chevron_left,\n  chevron_right,\n  close,\n  cloud_upload,\n  code,\n  description,\n  error,\n  expand_less,\n  expand_more,\n  folder_zip,\n  image,\n  info,\n  more_horiz,\n  notifications,\n  picture_as_pdf,\n  schedule,\n  search,\n  swap_vert,\n  table_chart,\n  video_file,\n  warning,\n}\n\n/**\n * Every icon at once, for the places that legitimately want the whole set: the\n * gallery in the stories, the documentation site, the tests.\n *\n * NOTHING the library ships imports this barrel: a component imports the two or\n * three icon modules it draws, by name. Importing it from a component would pull all\n * 34 drawings back into every consumer's bundle and undo the split.\n */\nexport const builtinIcons = {\n  arrow_downward,\n  arrow_downward_alt,\n  arrow_drop_down,\n  arrow_drop_up,\n  arrow_left_alt,\n  arrow_right_alt,\n  arrow_upward,\n  arrow_upward_alt,\n  attach_file,\n  audio_file,\n  calendar_today,\n  check,\n  check_circle,\n  chevron_left,\n  chevron_right,\n  close,\n  cloud_upload,\n  code,\n  description,\n  error,\n  expand_less,\n  expand_more,\n  folder_zip,\n  image,\n  info,\n  more_horiz,\n  notifications,\n  picture_as_pdf,\n  schedule,\n  search,\n  swap_vert,\n  table_chart,\n  video_file,\n  warning,\n} as const\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FA,IAAa,IAAe;CAC1B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}

package/dist/components/VIcon/icons/names.d.ts

@@ -1,5 +1,5 @@
 declare const NAMES: readonly ["arrow_downward", "arrow_downward_alt", "arrow_drop_down", "arrow_drop_up", "arrow_left_alt", "arrow_right_alt", "arrow_upward", "arrow_upward_alt", "attach_file", "audio_file", "calendar_today", "check", "check_circle", "chevron_left", "chevron_right", "close", "cloud_upload", "code", "description", "error", "expand_less", "expand_more", "folder_zip", "image", "info", "more_horiz", "notifications", "picture_as_pdf", "schedule", "search", "swap_vert", "table_chart", "video_file", "warning"];
-/** The icon names the DS renders itself — the contract of a consumer resolver. */
+/** The icon names the DS renders itself: the contract of a consumer resolver. */
 export type IconName = (typeof NAMES)[number];
 /**
  * The names alone, carrying no drawing at all. `classIconResolver` in `strict` mode

package/dist/components/VIcon/icons/names.js.map

@@ -1 +1 @@
-{"version":3,"file":"names.js","names":[],"sources":["../../../../src/components/VIcon/icons/names.ts"],"sourcesContent":["/*\n * GENERATED FILE — do not edit by hand.\n * Regenerate: pnpm icons  ·  Source: scripts/build-icons.ts\n *\n * Material Symbols Rounded (wght 400 · GRAD 0 · opsz 24)\n * google/material-design-icons @ 528cb964c01fb2b09bc3b9208f82b6d8f8c1c1e2\n * Apache-2.0 licence © Google.\n */\n\nconst NAMES = [\n  'arrow_downward',\n  'arrow_downward_alt',\n  'arrow_drop_down',\n  'arrow_drop_up',\n  'arrow_left_alt',\n  'arrow_right_alt',\n  'arrow_upward',\n  'arrow_upward_alt',\n  'attach_file',\n  'audio_file',\n  'calendar_today',\n  'check',\n  'check_circle',\n  'chevron_left',\n  'chevron_right',\n  'close',\n  'cloud_upload',\n  'code',\n  'description',\n  'error',\n  'expand_less',\n  'expand_more',\n  'folder_zip',\n  'image',\n  'info',\n  'more_horiz',\n  'notifications',\n  'picture_as_pdf',\n  'schedule',\n  'search',\n  'swap_vert',\n  'table_chart',\n  'video_file',\n  'warning',\n] as const\n\n/** The icon names the DS renders itself — the contract of a consumer resolver. */\nexport type IconName = (typeof NAMES)[number]\n\n/**\n * The names alone, carrying no drawing at all. `classIconResolver` in `strict` mode\n * asks nothing more than \"does the design system ship this name?\", and a module of\n * its own is what stops a consumer who wired in their OWN icon library from\n * downloading 34 Material paths to answer that one question.\n */\nexport const builtinIconNames: ReadonlySet<string> = /* @__PURE__ */ new Set(NAMES)\n"],"mappings":"AAuDA,IAAa,oBAAwD,IAAI,IAAI,gBA9C/D,qZA8C+D,CAAK"}
+{"version":3,"file":"names.js","names":[],"sources":["../../../../src/components/VIcon/icons/names.ts"],"sourcesContent":["/*\n * GENERATED FILE — do not edit by hand.\n * Regenerate: pnpm icons  ·  Source: scripts/build-icons.ts\n *\n * Material Symbols Rounded (wght 400 · GRAD 0 · opsz 24)\n * google/material-design-icons @ 528cb964c01fb2b09bc3b9208f82b6d8f8c1c1e2\n * Apache-2.0 licence © Google.\n */\n\nconst NAMES = [\n  'arrow_downward',\n  'arrow_downward_alt',\n  'arrow_drop_down',\n  'arrow_drop_up',\n  'arrow_left_alt',\n  'arrow_right_alt',\n  'arrow_upward',\n  'arrow_upward_alt',\n  'attach_file',\n  'audio_file',\n  'calendar_today',\n  'check',\n  'check_circle',\n  'chevron_left',\n  'chevron_right',\n  'close',\n  'cloud_upload',\n  'code',\n  'description',\n  'error',\n  'expand_less',\n  'expand_more',\n  'folder_zip',\n  'image',\n  'info',\n  'more_horiz',\n  'notifications',\n  'picture_as_pdf',\n  'schedule',\n  'search',\n  'swap_vert',\n  'table_chart',\n  'video_file',\n  'warning',\n] as const\n\n/** The icon names the DS renders itself: the contract of a consumer resolver. */\nexport type IconName = (typeof NAMES)[number]\n\n/**\n * The names alone, carrying no drawing at all. `classIconResolver` in `strict` mode\n * asks nothing more than \"does the design system ship this name?\", and a module of\n * its own is what stops a consumer who wired in their OWN icon library from\n * downloading 34 Material paths to answer that one question.\n */\nexport const builtinIconNames: ReadonlySet<string> = /* @__PURE__ */ new Set(NAMES)\n"],"mappings":"AAuDA,IAAa,oBAAwD,IAAI,IAAI,gBA9C/D,qZA8C+D,CAAK"}

package/dist/components/VIcon/resolver.d.ts

@@ -5,7 +5,7 @@ import { IconContext, IconRender } from './types.js';
  * Turns an icon name into a description of what to draw. Answering `undefined` means
  * "I do not know this name", and not "draw nothing": VIcon then falls back to the
  * built-in icons, and after that to the ligature font. That distinction is what
- * makes a PARTIAL mapping usable — map the five names you care about and let the
+ * makes a PARTIAL mapping usable: map the five names you care about and let the
  * rest be.
  */
 export type IconResolver = (name: string, ctx: IconContext) => IconRender | undefined;
@@ -19,7 +19,7 @@ export type IconAliases = Partial<Record<IconName, string>> & Record<string, str
  * Installs the resolver every VIcon will consult, or removes it when passed
  * `undefined`.
  *
- * Call it at MODULE level — from a Nuxt plugin or from `main.ts` — and never inside
+ * Call it at MODULE level (from a Nuxt plugin or from `main.ts`) and never inside
  * a component's `setup()`. Two traps follow from where the state lives. On a server
  * it belongs to the process rather than to a request, which is right for
  * configuration and wrong for anything varying per visitor. And installing it on the
@@ -30,7 +30,7 @@ export declare function setIconResolver(next: IconResolver | undefined): void;
 /** Asks the installed resolver, if there is one. Internal to VIcon, not public API. */
 export declare function resolveIcon(name: string, ctx: IconContext): IconRender | undefined;
 /**
- * A resolver for a LIGATURE font — Material Symbols in any of its variants, or an
+ * A resolver for a LIGATURE font: Material Symbols in any of its variants, or an
  * IcoMoon build made that way. It answers to every name, since the font itself
  * decides what it recognizes.
  *

package/dist/components/VIcon/resolver.js

@@ -1,35 +1,38 @@
 import { builtinIconNames as e } from "./icons/names.js";
 import { shallowRef as t } from "vue";
 //#region src/components/VIcon/resolver.ts
-var n = t(void 0);
-function r(e) {
-	n.value = e;
+function n(e, t) {
+	return e !== void 0 && Object.hasOwn(e, t) ? e[t] : void 0;
 }
-function i(e, t) {
-	return n.value?.(e, t);
+var r = t(void 0);
+function i(e) {
+	r.value = e;
 }
-function a(e = {}) {
+function a(e, t) {
+	return r.value?.(e, t);
+}
+function o(e = {}) {
 	let { aliases: t } = e;
-	return (e) => ({ text: t?.[e] ?? e });
+	return (e) => ({ text: n(t, e) ?? e });
 }
-function o(t) {
-	let { aliases: n, className: r, strict: i = !0 } = t;
-	return (t, a) => {
-		let o = n?.[t];
-		if (!(o === void 0 && i && e.has(t))) return { class: r(o ?? t, a.filled) };
+function s(t) {
+	let { aliases: r, className: i, strict: a = !0 } = t;
+	return (t, o) => {
+		let s = n(r, t);
+		if (!(s === void 0 && a && e.has(t))) return { class: i(s ?? t, o.filled) };
 	};
 }
-function s(e) {
-	let { components: t, props: n } = e;
-	return (e, r) => {
-		let i = t[e];
-		return i ? {
-			component: i,
-			props: n?.(e, r.filled)
+function c(e) {
+	let { components: t, props: r } = e;
+	return (e, i) => {
+		let a = n(t, e);
+		return a ? {
+			component: a,
+			props: r?.(e, i.filled)
 		} : void 0;
 	};
 }
 //#endregion
-export { o as classIconResolver, s as componentIconResolver, a as ligatureIconResolver, i as resolveIcon, r as setIconResolver };
+export { s as classIconResolver, c as componentIconResolver, o as ligatureIconResolver, a as resolveIcon, i as setIconResolver };
 
 //# sourceMappingURL=resolver.js.map

package/dist/components/VIcon/resolver.js.map

@@ -1 +1 @@
-{"version":3,"file":"resolver.js","names":[],"sources":["../../../src/components/VIcon/resolver.ts"],"sourcesContent":["// @ssr @core — module-level state, to be set at module level and never\n// client-only: a resolver installed after hydration is a mismatch.\n/**\n * The way to plug a third-party icon library into the design system. A resolver is a\n * function turning a name into something to draw, and it is consulted BEFORE the\n * icons built into the library — which is what lets a consumer move ALL of them onto\n * their own icon set rather than ending up with two styles side by side.\n *\n * The resolver is held in module-level state rather than provided through a Vue\n * plugin, because it is configuration: identical for every request a process\n * handles, and settable from any `.ts` file — a Nuxt plugin, `main.ts` — without a\n * component being involved.\n */\nimport { shallowRef, type Component } from 'vue'\n\nimport { builtinIconNames, type IconName } from './icons/names'\nimport type { IconContext, IconRender } from './types'\n\n/**\n * Turns an icon name into a description of what to draw. Answering `undefined` means\n * \"I do not know this name\", and not \"draw nothing\": VIcon then falls back to the\n * built-in icons, and after that to the ligature font. That distinction is what\n * makes a PARTIAL mapping usable — map the five names you care about and let the\n * rest be.\n */\nexport type IconResolver = (name: string, ctx: IconContext) => IconRender | undefined\n\n/**\n * A table mapping the design system's icon names to your own. The IDE suggests the\n * names the library ships with, and any other key is accepted too, so your\n * application's own icons can be aliased through the same table.\n */\nexport type IconAliases = Partial<Record<IconName, string>> & Record<string, string>\n\nconst resolver = shallowRef<IconResolver | undefined>(undefined)\n\n/**\n * Installs the resolver every VIcon will consult, or removes it when passed\n * `undefined`.\n *\n * Call it at MODULE level — from a Nuxt plugin or from `main.ts` — and never inside\n * a component's `setup()`. Two traps follow from where the state lives. On a server\n * it belongs to the process rather than to a request, which is right for\n * configuration and wrong for anything varying per visitor. And installing it on the\n * client only, from a `plugins/*.client.ts`, makes the browser draw different icons\n * from the ones the server sent, which is a hydration mismatch.\n */\nexport function setIconResolver(next: IconResolver | undefined): void {\n  resolver.value = next\n}\n\n/** Asks the installed resolver, if there is one. Internal to VIcon, not public API. */\nexport function resolveIcon(name: string, ctx: IconContext): IconRender | undefined {\n  return resolver.value?.(name, ctx)\n}\n\n/**\n * A resolver for a LIGATURE font — Material Symbols in any of its variants, or an\n * IcoMoon build made that way. It answers to every name, since the font itself\n * decides what it recognizes.\n *\n * Installing it is also how to have the design system's own icons drawn by the font\n * instead of by the SVGs shipped with the library, and therefore how to get the\n * optical size axis back: those SVGs are drawn at one optical size and cannot follow\n * `--vectis-icon-opsz`.\n */\nexport function ligatureIconResolver(options: { aliases?: IconAliases } = {}): IconResolver {\n  const { aliases } = options\n  return (name) => ({ text: aliases?.[name] ?? name })\n}\n\n/**\n * A resolver for a font driven by a CLASS and a pseudo-element: Font Awesome,\n * Phosphor, Bootstrap Icons and their kind.\n *\n * `strict`, which is the default, protects the design system's own icons. One of its\n * names that is NOT in your alias table would otherwise be turned into a class the\n * font does not define, and the icon would render as an empty square; refusing to\n * answer instead lets it fall back to the SVG shipped with the library. Names of\n * your own always pass, since they are already written in your vocabulary.\n */\nexport function classIconResolver(options: {\n  aliases?: IconAliases\n  /**\n   * Builds the class list for one icon. `mapped` is the alias when the table has\n   * one, and the original name otherwise.\n   */\n  className: (mapped: string, filled: boolean) => string\n  strict?: boolean\n}): IconResolver {\n  const { aliases, className, strict = true } = options\n  return (name, ctx) => {\n    const mapped = aliases?.[name]\n    // The SET of names, never the icons themselves: this asks whether the design\n    // system ships the name, and reaching for the drawings to answer it would make a\n    // consumer who wired in their OWN icon library download all 34 Material paths.\n    if (mapped === undefined && strict && builtinIconNames.has(name)) return undefined\n    return { class: className(mapped ?? name, ctx.filled) }\n  }\n}\n\n/**\n * A resolver for an icon set shipped as Vue COMPONENTS: Lucide, Untitled UI and\n * their kind. It is strict by construction, since a name absent from the table has\n * no component to return: it falls back to the built-in icons, and then to the\n * ligature.\n *\n * One contract to honour: each component must have a single `<svg>` as its root,\n * because that is the element the stylesheet sizes.\n */\nexport function componentIconResolver(options: {\n  components: Partial<Record<IconName, Component>> & Record<string, Component>\n  props?: (name: string, filled: boolean) => Record<string, unknown>\n}): IconResolver {\n  const { components, props } = options\n  return (name, ctx) => {\n    const component = components[name]\n    return component ? { component, props: props?.(name, ctx.filled) } : undefined\n  }\n}\n"],"mappings":";;;AAkCA,IAAM,IAAW,EAAqC,KAAA,CAAS;AAa/D,SAAgB,EAAgB,GAAsC;CACpE,EAAS,QAAQ;AACnB;AAGA,SAAgB,EAAY,GAAc,GAA0C;CAClF,OAAO,EAAS,QAAQ,GAAM,CAAG;AACnC;AAYA,SAAgB,EAAqB,IAAqC,CAAC,GAAiB;CAC1F,IAAM,EAAE,eAAY;CACpB,QAAQ,OAAU,EAAE,MAAM,IAAU,MAAS,EAAK;AACpD;AAYA,SAAgB,EAAkB,GAQjB;CACf,IAAM,EAAE,YAAS,cAAW,YAAS,OAAS;CAC9C,QAAQ,GAAM,MAAQ;EACpB,IAAM,IAAS,IAAU;EAIrB,YAAW,KAAA,KAAa,KAAU,EAAiB,IAAI,CAAI,IAC/D,OAAO,EAAE,OAAO,EAAU,KAAU,GAAM,EAAI,MAAM,EAAE;CACxD;AACF;AAWA,SAAgB,EAAsB,GAGrB;CACf,IAAM,EAAE,eAAY,aAAU;CAC9B,QAAQ,GAAM,MAAQ;EACpB,IAAM,IAAY,EAAW;EAC7B,OAAO,IAAY;GAAE;GAAW,OAAO,IAAQ,GAAM,EAAI,MAAM;EAAE,IAAI,KAAA;CACvE;AACF"}
+{"version":3,"file":"resolver.js","names":[],"sources":["../../../src/components/VIcon/resolver.ts"],"sourcesContent":["// @ssr @core — module-level state, to be set at module level and never\n// client-only: a resolver installed after hydration is a mismatch.\n/**\n * The way to plug a third-party icon library into the design system. A resolver is a\n * function turning a name into something to draw, and it is consulted BEFORE the\n * icons built into the library — which is what lets a consumer move ALL of them onto\n * their own icon set rather than ending up with two styles side by side.\n *\n * The resolver is held in module-level state rather than provided through a Vue\n * plugin, because it is configuration: identical for every request a process\n * handles, and settable from any `.ts` file — a Nuxt plugin, `main.ts` — without a\n * component being involved.\n */\n\nimport { shallowRef, type Component } from 'vue'\n\nimport { builtinIconNames, type IconName } from './icons/names'\nimport type { IconContext, IconRender } from './types'\n\n/* A lookup by name that answers only for the table's OWN keys: `aliases['constructor']` would\n   otherwise hand back a function from Object.prototype, and the \"I do not know this name\"\n   contract (`undefined`) would break for any name that happens to be one of its members. */\nfunction own<T>(table: Record<string, T> | undefined, name: string): T | undefined {\n  return table !== undefined && Object.hasOwn(table, name) ? table[name] : undefined\n}\n\n/**\n * Turns an icon name into a description of what to draw. Answering `undefined` means\n * \"I do not know this name\", and not \"draw nothing\": VIcon then falls back to the\n * built-in icons, and after that to the ligature font. That distinction is what\n * makes a PARTIAL mapping usable: map the five names you care about and let the\n * rest be.\n */\nexport type IconResolver = (name: string, ctx: IconContext) => IconRender | undefined\n\n/**\n * A table mapping the design system's icon names to your own. The IDE suggests the\n * names the library ships with, and any other key is accepted too, so your\n * application's own icons can be aliased through the same table.\n */\nexport type IconAliases = Partial<Record<IconName, string>> & Record<string, string>\n\nconst resolver = shallowRef<IconResolver | undefined>(undefined)\n\n/**\n * Installs the resolver every VIcon will consult, or removes it when passed\n * `undefined`.\n *\n * Call it at MODULE level (from a Nuxt plugin or from `main.ts`) and never inside\n * a component's `setup()`. Two traps follow from where the state lives. On a server\n * it belongs to the process rather than to a request, which is right for\n * configuration and wrong for anything varying per visitor. And installing it on the\n * client only, from a `plugins/*.client.ts`, makes the browser draw different icons\n * from the ones the server sent, which is a hydration mismatch.\n */\nexport function setIconResolver(next: IconResolver | undefined): void {\n  resolver.value = next\n}\n\n/** Asks the installed resolver, if there is one. Internal to VIcon, not public API. */\nexport function resolveIcon(name: string, ctx: IconContext): IconRender | undefined {\n  return resolver.value?.(name, ctx)\n}\n\n/**\n * A resolver for a LIGATURE font: Material Symbols in any of its variants, or an\n * IcoMoon build made that way. It answers to every name, since the font itself\n * decides what it recognizes.\n *\n * Installing it is also how to have the design system's own icons drawn by the font\n * instead of by the SVGs shipped with the library, and therefore how to get the\n * optical size axis back: those SVGs are drawn at one optical size and cannot follow\n * `--vectis-icon-opsz`.\n */\nexport function ligatureIconResolver(options: { aliases?: IconAliases } = {}): IconResolver {\n  const { aliases } = options\n  return (name) => ({ text: own(aliases, name) ?? name })\n}\n\n/**\n * A resolver for a font driven by a CLASS and a pseudo-element: Font Awesome,\n * Phosphor, Bootstrap Icons and their kind.\n *\n * `strict`, which is the default, protects the design system's own icons. One of its\n * names that is NOT in your alias table would otherwise be turned into a class the\n * font does not define, and the icon would render as an empty square; refusing to\n * answer instead lets it fall back to the SVG shipped with the library. Names of\n * your own always pass, since they are already written in your vocabulary.\n */\nexport function classIconResolver(options: {\n  aliases?: IconAliases\n  /**\n   * Builds the class list for one icon. `mapped` is the alias when the table has\n   * one, and the original name otherwise.\n   */\n  className: (mapped: string, filled: boolean) => string\n  strict?: boolean\n}): IconResolver {\n  const { aliases, className, strict = true } = options\n  return (name, ctx) => {\n    const mapped = own(aliases, name)\n    // The SET of names, never the icons themselves: this asks whether the design\n    // system ships the name, and reaching for the drawings to answer it would make a\n    // consumer who wired in their OWN icon library download all 34 Material paths.\n    if (mapped === undefined && strict && builtinIconNames.has(name)) return undefined\n    return { class: className(mapped ?? name, ctx.filled) }\n  }\n}\n\n/**\n * A resolver for an icon set shipped as Vue COMPONENTS: Lucide, Untitled UI and\n * their kind. It is strict by construction, since a name absent from the table has\n * no component to return: it falls back to the built-in icons, and then to the\n * ligature.\n *\n * One contract to honour: each component must have a single `<svg>` as its root,\n * because that is the element the stylesheet sizes.\n */\nexport function componentIconResolver(options: {\n  components: Partial<Record<IconName, Component>> & Record<string, Component>\n  props?: (name: string, filled: boolean) => Record<string, unknown>\n}): IconResolver {\n  const { components, props } = options\n  return (name, ctx) => {\n    const component = own<Component>(components, name)\n    return component ? { component, props: props?.(name, ctx.filled) } : undefined\n  }\n}\n"],"mappings":";;;AAsBA,SAAS,EAAO,GAAsC,GAA6B;CACjF,OAAO,MAAU,KAAA,KAAa,OAAO,OAAO,GAAO,CAAI,IAAI,EAAM,KAAQ,KAAA;AAC3E;AAkBA,IAAM,IAAW,EAAqC,KAAA,CAAS;AAa/D,SAAgB,EAAgB,GAAsC;CACpE,EAAS,QAAQ;AACnB;AAGA,SAAgB,EAAY,GAAc,GAA0C;CAClF,OAAO,EAAS,QAAQ,GAAM,CAAG;AACnC;AAYA,SAAgB,EAAqB,IAAqC,CAAC,GAAiB;CAC1F,IAAM,EAAE,eAAY;CACpB,QAAQ,OAAU,EAAE,MAAM,EAAI,GAAS,CAAI,KAAK,EAAK;AACvD;AAYA,SAAgB,EAAkB,GAQjB;CACf,IAAM,EAAE,YAAS,cAAW,YAAS,OAAS;CAC9C,QAAQ,GAAM,MAAQ;EACpB,IAAM,IAAS,EAAI,GAAS,CAAI;EAI5B,YAAW,KAAA,KAAa,KAAU,EAAiB,IAAI,CAAI,IAC/D,OAAO,EAAE,OAAO,EAAU,KAAU,GAAM,EAAI,MAAM,EAAE;CACxD;AACF;AAWA,SAAgB,EAAsB,GAGrB;CACf,IAAM,EAAE,eAAY,aAAU;CAC9B,QAAQ,GAAM,MAAQ;EACpB,IAAM,IAAY,EAAe,GAAY,CAAI;EACjD,OAAO,IAAY;GAAE;GAAW,OAAO,IAAQ,GAAM,EAAI,MAAM;EAAE,IAAI,KAAA;CACvE;AACF"}

package/dist/components/VIcon/types.d.ts

@@ -5,12 +5,12 @@ import { Component } from 'vue';
  * changing every resolver's signature.
  */
 export interface IconContext {
-    /** Whether the caller asked for the filled form — VIcon's prop, VButton's `iconFilled`. */
+    /** Whether the caller asked for the filled form: VIcon's prop, VButton's `iconFilled`. */
     filled: boolean;
 }
 /**
  * One of the icons the design system ships with: its canonical NAME together with the
- * drawing that goes with it, `[outline, filled?]` on the Material Symbols grid — the
+ * drawing that goes with it, `[outline, filled?]` on the Material Symbols grid. The
  * second path is only there when filling actually changes the geometry.
  *
  * The name travelling WITH the drawing is the whole point of the shape. A component's
@@ -44,7 +44,7 @@ export type IconRender =
     path: string;
     viewBox?: string;
 }
-/** A Vue component whose root is a SINGLE `<svg>` — that is the sizing contract. */
+/** A Vue component whose root is a SINGLE `<svg>`: that is the sizing contract. */
  | {
     component: Component;
     props?: Record<string, unknown>;
@@ -67,7 +67,7 @@ export type IconRender =
  * guesswork: a plain string is ALWAYS a name, and an image or a component is
  * declared explicitly as an object, `{ src: '/logo.svg' }`.
  *
- * That is what allows any naming convention — `mdi:close`, `fa6-solid:xmark` — to
+ * That is what allows any naming convention (`mdi:close`, `fa6-solid:xmark`) to
  * reach the resolver intact, where a heuristic would have taken it for an address.
  *
  * A `BuiltinIcon` imported from `vectis-ui/icons` is accepted too, and behaves

package/dist/components/VIconButton/VIconButton.d.ts

@@ -11,12 +11,12 @@ interface IconButtonProps {
      */
     label: string;
     /**
-     * How much visual weight the button carries — the VButton variants. `ghost` by default,
+     * How much visual weight the button carries, from the VButton variants. `ghost` by default,
      * and inside a VButtonGroup the group's own variant wins over it.
      */
     variant?: ButtonVariant;
     /**
-     * What the action means, in colour — the VButton tones. An icon-only button is usually
+     * What the action means, in colour, from the VButton tones. An icon-only button is usually
      * secondary, which is why it starts neutral where VButton starts accent. Left out inside
      * a VButtonGroup it takes the group's tone; on its own it is `neutral`.
      */
@@ -29,7 +29,7 @@ interface IconButtonProps {
     compact?: boolean;
     /**
      * The silhouette: a square carrying the corner radius every control shares, or a
-     * circle. The box itself is square either way — only the corners change.
+     * circle. The box itself is square either way: only the corners change.
      */
     shape?: IconButtonShape;
     /**
@@ -55,7 +55,7 @@ interface IconButtonProps {
 type __VLS_Slots = {
     /**
      * The icon, when the `icon` prop cannot express it: a VIcon, or an inline SVG
-     * marked `aria-hidden="true"` — the button is already named by its `label`.
+     * marked `aria-hidden="true"`, the button being already named by its `label`.
      */
     default(): unknown;
 };

package/dist/components/VIconButton/VIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"VIconButton.js","names":[],"sources":["../../../src/components/VIconButton/VIconButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y — the MANDATORY label is the component's whole reason to exist alongside\n// VButton: an icon on its own gives assistive technology no accessible name.\n/**\n * A button showing an icon and nothing else, square rather than oblong. It offers\n * the same appearance options as VButton and forwards them to it.\n *\n * The one difference that matters is the `label` prop, which is REQUIRED here. A\n * picture says nothing to a screen reader, so the label is what names the action —\n * without it the button would be announced as just \"button\".\n */\nimport { computed, inject } from 'vue'\nimport type { ButtonHTMLAttributes } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport type { ButtonSize, ButtonTone, ButtonVariant } from '../VButton/VButton.vue'\nimport { buttonGroupKey } from '../VButton/context'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\n/** The silhouette. The box is square either way; only the corners change. */\nexport type IconButtonShape = 'square' | 'circular'\n\ninterface IconButtonProps {\n  /**\n   * What the button does, in words. It becomes the `aria-label` and is the only\n   * thing a screen reader has to go on, so it names the action (\"Close\", \"Next\n   * month\") rather than the picture.\n   */\n  label: string\n  /**\n   * How much visual weight the button carries — the VButton variants. `ghost` by default,\n   * and inside a VButtonGroup the group's own variant wins over it.\n   */\n  variant?: ButtonVariant\n  /**\n   * What the action means, in colour — the VButton tones. An icon-only button is usually\n   * secondary, which is why it starts neutral where VButton starts accent. Left out inside\n   * a VButtonGroup it takes the group's tone; on its own it is `neutral`.\n   */\n  tone?: ButtonTone\n  /** Raises the button with a shadow, and a raised surface on ghost and outline. */\n  elevated?: boolean\n  /** The size of the square, taken from the scale shared by every control. */\n  size?: ButtonSize\n  /** Takes 4px off both sides of the square, which stays square. */\n  compact?: boolean\n  /**\n   * The silhouette: a square carrying the corner radius every control shares, or a\n   * circle. The box itself is square either way — only the corners change.\n   */\n  shape?: IconButtonShape\n  /**\n   * Turns the button into an `<a>` pointing at this address, on VButton's terms: a disabled\n   * or loading link becomes inert, the address dropped so it can be neither focused nor\n   * followed.\n   */\n  href?: string\n  /** The native type of the button, `button` by default. Ignored once `href` makes it a link. */\n  type?: ButtonHTMLAttributes['type']\n  /** Makes the button unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /** Replaces the icon with a spinner and disables the button while it turns. */\n  loading?: boolean\n  /**\n   * The icon to show: an icon name, or an explicit render. The default slot is the\n   * way to supply one this prop cannot express.\n   */\n  icon?: IconSource\n  /** Renders the icon in its filled form (the font's `FILL` axis). */\n  iconFilled?: boolean\n}\n\nconst props = withDefaults(defineProps<IconButtonProps>(), {\n  variant: 'ghost',\n  // No default, so that an absent tone stays distinguishable from an explicit one (see\n  // the resolution below and VButton's own `tone`).\n  tone: undefined,\n  elevated: false,\n  size: 'md',\n  compact: false,\n  shape: 'square',\n  href: undefined,\n  type: 'button',\n  disabled: false,\n  loading: false,\n  icon: undefined,\n  iconFilled: false,\n})\n\ndefineSlots<{\n  /**\n   * The icon, when the `icon` prop cannot express it: a VIcon, or an inline SVG\n   * marked `aria-hidden=\"true\"` — the button is already named by its `label`.\n   */\n  default(): unknown\n}>()\n\n/*\n * The ONE prop a VButtonGroup cannot arbitrate on its own. The four others are handed\n * to VButton as they are and the group wins there over whatever arrives, so nothing has\n * to be resolved here; the tone goes the other way, the button's own answer first, and\n * VButton would take `accent` as its last resort where an icon-only button takes\n * `neutral`. Resolving it here is what keeps that difference.\n */\nconst group = inject(buttonGroupKey, null)\nconst resolvedTone = computed<ButtonTone>(() => props.tone ?? group?.tone ?? 'neutral')\n</script>\n\n<template>\n  <!--\n    `shape` is ours alone: VButton knows nothing about it, so the attribute travels\n    through its $attrs down to the element it renders — the same route the\n    v-icon-button class and `data-icon-only` take, the latter picked up by VButton's own\n    square rule. Everything else is a real VButton prop and has to be forwarded by hand,\n    an unforwarded one never reaching its data attribute.\n  -->\n  <VButton\n    class=\"v-icon-button\"\n    :data-shape=\"shape\"\n    data-icon-only\n    :variant=\"variant\"\n    :tone=\"resolvedTone\"\n    :elevated=\"elevated\"\n    :size=\"size\"\n    :compact=\"compact\"\n    :href=\"href\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :loading=\"loading\"\n    :aria-label=\"label\"\n  >\n    <!--\n      TRAP — the icon goes in VButton's `start` slot and NOT in its default one. The\n      spinner replaces the start slot alone, the default slot being the label, which a\n      loading button keeps. Rendered in the default slot the icon would sit BESIDE the\n      spinner, both of them in a box only wide enough for one.\n    -->\n    <template #start>\n      <VIcon v-if=\"icon\" v-bind=\"iconProps(icon)\" :filled=\"iconFilled\" />\n      <slot v-else />\n    </template>\n  </VButton>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The square itself is VButton's `[data-icon-only]` rule, which this component opts\n   * into; what is left here is the silhouette. [data-shape] takes the selector to (0,2,0),\n   * which beats the border-radius VButton sets on that very element at (0,1,0) whatever the\n   * consumer's bundler decides about the order of the two sheets.\n   *\n   * The `square` value writes nothing — it IS the radius VButton already applies, so a\n   * consumer overriding --vectis-radius-interactive keeps a single place to change.\n   */\n  .v-icon-button[data-shape='circular'] {\n    border-radius: var(--vectis-radius-pill);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VIconButton.js","names":[],"sources":["../../../src/components/VIconButton/VIconButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n// The MANDATORY label is the component's whole reason to exist alongside\n// VButton: an icon on its own gives assistive technology no accessible name.\n/**\n * A button showing an icon and nothing else, square rather than oblong. It offers\n * the same appearance options as VButton and forwards them to it.\n *\n * The one difference that matters is the `label` prop, which is REQUIRED here. A\n * picture says nothing to a screen reader, so the label is what names the action —\n * without it the button would be announced as just \"button\".\n */\nimport { computed, inject } from 'vue'\nimport type { ButtonHTMLAttributes } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport type { ButtonSize, ButtonTone, ButtonVariant } from '../VButton/VButton.vue'\nimport { buttonGroupKey } from '../VButton/context'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\n/** The silhouette. The box is square either way; only the corners change. */\nexport type IconButtonShape = 'square' | 'circular'\n\ninterface IconButtonProps {\n  /**\n   * What the button does, in words. It becomes the `aria-label` and is the only\n   * thing a screen reader has to go on, so it names the action (\"Close\", \"Next\n   * month\") rather than the picture.\n   */\n  label: string\n  /**\n   * How much visual weight the button carries, from the VButton variants. `ghost` by default,\n   * and inside a VButtonGroup the group's own variant wins over it.\n   */\n  variant?: ButtonVariant\n  /**\n   * What the action means, in colour, from the VButton tones. An icon-only button is usually\n   * secondary, which is why it starts neutral where VButton starts accent. Left out inside\n   * a VButtonGroup it takes the group's tone; on its own it is `neutral`.\n   */\n  tone?: ButtonTone\n  /** Raises the button with a shadow, and a raised surface on ghost and outline. */\n  elevated?: boolean\n  /** The size of the square, taken from the scale shared by every control. */\n  size?: ButtonSize\n  /** Takes 4px off both sides of the square, which stays square. */\n  compact?: boolean\n  /**\n   * The silhouette: a square carrying the corner radius every control shares, or a\n   * circle. The box itself is square either way: only the corners change.\n   */\n  shape?: IconButtonShape\n  /**\n   * Turns the button into an `<a>` pointing at this address, on VButton's terms: a disabled\n   * or loading link becomes inert, the address dropped so it can be neither focused nor\n   * followed.\n   */\n  href?: string\n  /** The native type of the button, `button` by default. Ignored once `href` makes it a link. */\n  type?: ButtonHTMLAttributes['type']\n  /** Makes the button unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /** Replaces the icon with a spinner and disables the button while it turns. */\n  loading?: boolean\n  /**\n   * The icon to show: an icon name, or an explicit render. The default slot is the\n   * way to supply one this prop cannot express.\n   */\n  icon?: IconSource\n  /** Renders the icon in its filled form (the font's `FILL` axis). */\n  iconFilled?: boolean\n}\n\nconst props = withDefaults(defineProps<IconButtonProps>(), {\n  variant: 'ghost',\n  // No default, so that an absent tone stays distinguishable from an explicit one (see\n  // the resolution below and VButton's own `tone`).\n  tone: undefined,\n  elevated: false,\n  size: 'md',\n  compact: false,\n  shape: 'square',\n  href: undefined,\n  type: 'button',\n  disabled: false,\n  loading: false,\n  icon: undefined,\n  iconFilled: false,\n})\n\ndefineSlots<{\n  /**\n   * The icon, when the `icon` prop cannot express it: a VIcon, or an inline SVG\n   * marked `aria-hidden=\"true\"`, the button being already named by its `label`.\n   */\n  default(): unknown\n}>()\n\n/*\n * The ONE prop a VButtonGroup cannot arbitrate on its own. The four others are handed\n * to VButton as they are and the group wins there over whatever arrives, so nothing has\n * to be resolved here; the tone goes the other way, the button's own answer first, and\n * VButton would take `accent` as its last resort where an icon-only button takes\n * `neutral`. Resolving it here is what keeps that difference.\n */\nconst group = inject(buttonGroupKey, null)\nconst resolvedTone = computed<ButtonTone>(() => props.tone ?? group?.tone ?? 'neutral')\n</script>\n\n<template>\n  <!--\n    `shape` is ours alone: VButton knows nothing about it, so the attribute travels\n    through its $attrs down to the element it renders — the same route the\n    v-icon-button class and `data-icon-only` take, the latter picked up by VButton's own\n    square rule. Everything else is a real VButton prop and has to be forwarded by hand,\n    an unforwarded one never reaching its data attribute.\n  -->\n  <VButton\n    class=\"v-icon-button\"\n    :data-shape=\"shape\"\n    data-icon-only\n    :variant=\"variant\"\n    :tone=\"resolvedTone\"\n    :elevated=\"elevated\"\n    :size=\"size\"\n    :compact=\"compact\"\n    :href=\"href\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :loading=\"loading\"\n    :aria-label=\"label\"\n  >\n    <!--\n      TRAP — the icon goes in VButton's `start` slot and NOT in its default one. The\n      spinner replaces the start slot alone, the default slot being the label, which a\n      loading button keeps. Rendered in the default slot the icon would sit BESIDE the\n      spinner, both of them in a box only wide enough for one.\n    -->\n    <template #start>\n      <VIcon v-if=\"icon\" v-bind=\"iconProps(icon)\" :filled=\"iconFilled\" />\n      <slot v-else />\n    </template>\n  </VButton>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The square itself is VButton's `[data-icon-only]` rule, which this component opts\n   * into; what is left here is the silhouette. [data-shape] takes the selector to (0,2,0),\n   * which beats the border-radius VButton sets on that very element at (0,1,0) whatever the\n   * consumer's bundler decides about the order of the two sheets.\n   *\n   * The `square` value writes nothing — it IS the radius VButton already applies, so a\n   * consumer overriding --vectis-radius-interactive keeps a single place to change.\n   */\n  .v-icon-button[data-shape='circular'] {\n    border-radius: var(--vectis-radius-pill);\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"VIconButton.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VIconButton/VIconButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y — the MANDATORY label is the component's whole reason to exist alongside\n// VButton: an icon on its own gives assistive technology no accessible name.\n/**\n * A button showing an icon and nothing else, square rather than oblong. It offers\n * the same appearance options as VButton and forwards them to it.\n *\n * The one difference that matters is the `label` prop, which is REQUIRED here. A\n * picture says nothing to a screen reader, so the label is what names the action —\n * without it the button would be announced as just \"button\".\n */\nimport { computed, inject } from 'vue'\nimport type { ButtonHTMLAttributes } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport type { ButtonSize, ButtonTone, ButtonVariant } from '../VButton/VButton.vue'\nimport { buttonGroupKey } from '../VButton/context'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\n/** The silhouette. The box is square either way; only the corners change. */\nexport type IconButtonShape = 'square' | 'circular'\n\ninterface IconButtonProps {\n  /**\n   * What the button does, in words. It becomes the `aria-label` and is the only\n   * thing a screen reader has to go on, so it names the action (\"Close\", \"Next\n   * month\") rather than the picture.\n   */\n  label: string\n  /**\n   * How much visual weight the button carries — the VButton variants. `ghost` by default,\n   * and inside a VButtonGroup the group's own variant wins over it.\n   */\n  variant?: ButtonVariant\n  /**\n   * What the action means, in colour — the VButton tones. An icon-only button is usually\n   * secondary, which is why it starts neutral where VButton starts accent. Left out inside\n   * a VButtonGroup it takes the group's tone; on its own it is `neutral`.\n   */\n  tone?: ButtonTone\n  /** Raises the button with a shadow, and a raised surface on ghost and outline. */\n  elevated?: boolean\n  /** The size of the square, taken from the scale shared by every control. */\n  size?: ButtonSize\n  /** Takes 4px off both sides of the square, which stays square. */\n  compact?: boolean\n  /**\n   * The silhouette: a square carrying the corner radius every control shares, or a\n   * circle. The box itself is square either way — only the corners change.\n   */\n  shape?: IconButtonShape\n  /**\n   * Turns the button into an `<a>` pointing at this address, on VButton's terms: a disabled\n   * or loading link becomes inert, the address dropped so it can be neither focused nor\n   * followed.\n   */\n  href?: string\n  /** The native type of the button, `button` by default. Ignored once `href` makes it a link. */\n  type?: ButtonHTMLAttributes['type']\n  /** Makes the button unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /** Replaces the icon with a spinner and disables the button while it turns. */\n  loading?: boolean\n  /**\n   * The icon to show: an icon name, or an explicit render. The default slot is the\n   * way to supply one this prop cannot express.\n   */\n  icon?: IconSource\n  /** Renders the icon in its filled form (the font's `FILL` axis). */\n  iconFilled?: boolean\n}\n\nconst props = withDefaults(defineProps<IconButtonProps>(), {\n  variant: 'ghost',\n  // No default, so that an absent tone stays distinguishable from an explicit one (see\n  // the resolution below and VButton's own `tone`).\n  tone: undefined,\n  elevated: false,\n  size: 'md',\n  compact: false,\n  shape: 'square',\n  href: undefined,\n  type: 'button',\n  disabled: false,\n  loading: false,\n  icon: undefined,\n  iconFilled: false,\n})\n\ndefineSlots<{\n  /**\n   * The icon, when the `icon` prop cannot express it: a VIcon, or an inline SVG\n   * marked `aria-hidden=\"true\"` — the button is already named by its `label`.\n   */\n  default(): unknown\n}>()\n\n/*\n * The ONE prop a VButtonGroup cannot arbitrate on its own. The four others are handed\n * to VButton as they are and the group wins there over whatever arrives, so nothing has\n * to be resolved here; the tone goes the other way, the button's own answer first, and\n * VButton would take `accent` as its last resort where an icon-only button takes\n * `neutral`. Resolving it here is what keeps that difference.\n */\nconst group = inject(buttonGroupKey, null)\nconst resolvedTone = computed<ButtonTone>(() => props.tone ?? group?.tone ?? 'neutral')\n</script>\n\n<template>\n  <!--\n    `shape` is ours alone: VButton knows nothing about it, so the attribute travels\n    through its $attrs down to the element it renders — the same route the\n    v-icon-button class and `data-icon-only` take, the latter picked up by VButton's own\n    square rule. Everything else is a real VButton prop and has to be forwarded by hand,\n    an unforwarded one never reaching its data attribute.\n  -->\n  <VButton\n    class=\"v-icon-button\"\n    :data-shape=\"shape\"\n    data-icon-only\n    :variant=\"variant\"\n    :tone=\"resolvedTone\"\n    :elevated=\"elevated\"\n    :size=\"size\"\n    :compact=\"compact\"\n    :href=\"href\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :loading=\"loading\"\n    :aria-label=\"label\"\n  >\n    <!--\n      TRAP — the icon goes in VButton's `start` slot and NOT in its default one. The\n      spinner replaces the start slot alone, the default slot being the label, which a\n      loading button keeps. Rendered in the default slot the icon would sit BESIDE the\n      spinner, both of them in a box only wide enough for one.\n    -->\n    <template #start>\n      <VIcon v-if=\"icon\" v-bind=\"iconProps(icon)\" :filled=\"iconFilled\" />\n      <slot v-else />\n    </template>\n  </VButton>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The square itself is VButton's `[data-icon-only]` rule, which this component opts\n   * into; what is left here is the silhouette. [data-shape] takes the selector to (0,2,0),\n   * which beats the border-radius VButton sets on that very element at (0,1,0) whatever the\n   * consumer's bundler decides about the order of the two sheets.\n   *\n   * The `square` value writes nothing — it IS the radius VButton already applies, so a\n   * consumer overriding --vectis-radius-interactive keeps a single place to change.\n   */\n  .v-icon-button[data-shape='circular'] {\n    border-radius: var(--vectis-radius-pill);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0EA,IAAM,IAAQ,GAgCR,IAAQ,EAAO,GAAgB,IAAI,GACnC,IAAe,QAA2B,EAAM,QAAQ,GAAO,QAAQ,SAAS;yBAWpF,EAyBU,GAAA;GAxBR,OAAM;GACL,cAAY,EAAA;GACb,kBAAA;GACC,SAAS,EAAA;GACT,MAAM,EAAA;GACN,UAAU,EAAA;GACV,MAAM,EAAA;GACN,SAAS,EAAA;GACT,MAAM,EAAA;GACN,MAAM,EAAA;GACN,UAAU,EAAA;GACV,SAAS,EAAA;GACT,cAAY,EAAA;;GAQF,OAAK,QAnBZ,CAoBW,EAAA,QAAA,EAAA,GAAb,EAAmE,GAAnE,EAAmE,EAAA,KAAA,EAAA,GAAxC,EAAA,CAAA,CAAS,CAAC,EAAA,IAAI,GAAA,EAAI,QAAQ,EAAA,WAAU,CAAA,GAAA,MAAA,IAAA,CAAA,QAAA,CAAA,KAC/D,EAAe,EAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"VIconButton.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VIconButton/VIconButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n// The MANDATORY label is the component's whole reason to exist alongside\n// VButton: an icon on its own gives assistive technology no accessible name.\n/**\n * A button showing an icon and nothing else, square rather than oblong. It offers\n * the same appearance options as VButton and forwards them to it.\n *\n * The one difference that matters is the `label` prop, which is REQUIRED here. A\n * picture says nothing to a screen reader, so the label is what names the action —\n * without it the button would be announced as just \"button\".\n */\nimport { computed, inject } from 'vue'\nimport type { ButtonHTMLAttributes } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport type { ButtonSize, ButtonTone, ButtonVariant } from '../VButton/VButton.vue'\nimport { buttonGroupKey } from '../VButton/context'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\n/** The silhouette. The box is square either way; only the corners change. */\nexport type IconButtonShape = 'square' | 'circular'\n\ninterface IconButtonProps {\n  /**\n   * What the button does, in words. It becomes the `aria-label` and is the only\n   * thing a screen reader has to go on, so it names the action (\"Close\", \"Next\n   * month\") rather than the picture.\n   */\n  label: string\n  /**\n   * How much visual weight the button carries, from the VButton variants. `ghost` by default,\n   * and inside a VButtonGroup the group's own variant wins over it.\n   */\n  variant?: ButtonVariant\n  /**\n   * What the action means, in colour, from the VButton tones. An icon-only button is usually\n   * secondary, which is why it starts neutral where VButton starts accent. Left out inside\n   * a VButtonGroup it takes the group's tone; on its own it is `neutral`.\n   */\n  tone?: ButtonTone\n  /** Raises the button with a shadow, and a raised surface on ghost and outline. */\n  elevated?: boolean\n  /** The size of the square, taken from the scale shared by every control. */\n  size?: ButtonSize\n  /** Takes 4px off both sides of the square, which stays square. */\n  compact?: boolean\n  /**\n   * The silhouette: a square carrying the corner radius every control shares, or a\n   * circle. The box itself is square either way: only the corners change.\n   */\n  shape?: IconButtonShape\n  /**\n   * Turns the button into an `<a>` pointing at this address, on VButton's terms: a disabled\n   * or loading link becomes inert, the address dropped so it can be neither focused nor\n   * followed.\n   */\n  href?: string\n  /** The native type of the button, `button` by default. Ignored once `href` makes it a link. */\n  type?: ButtonHTMLAttributes['type']\n  /** Makes the button unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /** Replaces the icon with a spinner and disables the button while it turns. */\n  loading?: boolean\n  /**\n   * The icon to show: an icon name, or an explicit render. The default slot is the\n   * way to supply one this prop cannot express.\n   */\n  icon?: IconSource\n  /** Renders the icon in its filled form (the font's `FILL` axis). */\n  iconFilled?: boolean\n}\n\nconst props = withDefaults(defineProps<IconButtonProps>(), {\n  variant: 'ghost',\n  // No default, so that an absent tone stays distinguishable from an explicit one (see\n  // the resolution below and VButton's own `tone`).\n  tone: undefined,\n  elevated: false,\n  size: 'md',\n  compact: false,\n  shape: 'square',\n  href: undefined,\n  type: 'button',\n  disabled: false,\n  loading: false,\n  icon: undefined,\n  iconFilled: false,\n})\n\ndefineSlots<{\n  /**\n   * The icon, when the `icon` prop cannot express it: a VIcon, or an inline SVG\n   * marked `aria-hidden=\"true\"`, the button being already named by its `label`.\n   */\n  default(): unknown\n}>()\n\n/*\n * The ONE prop a VButtonGroup cannot arbitrate on its own. The four others are handed\n * to VButton as they are and the group wins there over whatever arrives, so nothing has\n * to be resolved here; the tone goes the other way, the button's own answer first, and\n * VButton would take `accent` as its last resort where an icon-only button takes\n * `neutral`. Resolving it here is what keeps that difference.\n */\nconst group = inject(buttonGroupKey, null)\nconst resolvedTone = computed<ButtonTone>(() => props.tone ?? group?.tone ?? 'neutral')\n</script>\n\n<template>\n  <!--\n    `shape` is ours alone: VButton knows nothing about it, so the attribute travels\n    through its $attrs down to the element it renders — the same route the\n    v-icon-button class and `data-icon-only` take, the latter picked up by VButton's own\n    square rule. Everything else is a real VButton prop and has to be forwarded by hand,\n    an unforwarded one never reaching its data attribute.\n  -->\n  <VButton\n    class=\"v-icon-button\"\n    :data-shape=\"shape\"\n    data-icon-only\n    :variant=\"variant\"\n    :tone=\"resolvedTone\"\n    :elevated=\"elevated\"\n    :size=\"size\"\n    :compact=\"compact\"\n    :href=\"href\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :loading=\"loading\"\n    :aria-label=\"label\"\n  >\n    <!--\n      TRAP — the icon goes in VButton's `start` slot and NOT in its default one. The\n      spinner replaces the start slot alone, the default slot being the label, which a\n      loading button keeps. Rendered in the default slot the icon would sit BESIDE the\n      spinner, both of them in a box only wide enough for one.\n    -->\n    <template #start>\n      <VIcon v-if=\"icon\" v-bind=\"iconProps(icon)\" :filled=\"iconFilled\" />\n      <slot v-else />\n    </template>\n  </VButton>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The square itself is VButton's `[data-icon-only]` rule, which this component opts\n   * into; what is left here is the silhouette. [data-shape] takes the selector to (0,2,0),\n   * which beats the border-radius VButton sets on that very element at (0,1,0) whatever the\n   * consumer's bundler decides about the order of the two sheets.\n   *\n   * The `square` value writes nothing — it IS the radius VButton already applies, so a\n   * consumer overriding --vectis-radius-interactive keeps a single place to change.\n   */\n  .v-icon-button[data-shape='circular'] {\n    border-radius: var(--vectis-radius-pill);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2EA,IAAM,IAAQ,GAgCR,IAAQ,EAAO,GAAgB,IAAI,GACnC,IAAe,QAA2B,EAAM,QAAQ,GAAO,QAAQ,SAAS;yBAWpF,EAyBU,GAAA;GAxBR,OAAM;GACL,cAAY,EAAA;GACb,kBAAA;GACC,SAAS,EAAA;GACT,MAAM,EAAA;GACN,UAAU,EAAA;GACV,MAAM,EAAA;GACN,SAAS,EAAA;GACT,MAAM,EAAA;GACN,MAAM,EAAA;GACN,UAAU,EAAA;GACV,SAAS,EAAA;GACT,cAAY,EAAA;;GAQF,OAAK,QAnBwB,CAoBzB,EAAA,QAAA,EAAA,GAAb,EAAmE,GAAnE,EAAmE,EAAA,KAAA,EAAA,GAAxC,EAAA,CAAA,CAAS,CAAC,EAAA,IAAI,GAAA,EAAI,QAAQ,EAAA,WAAU,CAAA,GAAA,MAAA,IAAA,CAAA,QAAA,CAAA,KAC/D,EAAe,EAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,CAAA,CAAA"}