vectis-ui 0.8.1 → 0.9.0

package/dist/components/VTypography/VTypography.js.map

@@ -1 +1 @@
-{"version":3,"file":"VTypography.js","names":[],"sources":["../../../src/components/VTypography/VTypography.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core — the only JS is deriving the default tag from the variant.\n/**\n * The design system's text element. Rather than setting a size here and a weight\n * there, the writer names the ROLE the text plays — a heading, a caption, a label —\n * and `variant` applies the complete typographic recipe that goes with it: family,\n * size, weight, line height and letter spacing, all read from the semantic tokens.\n * `tone` does the same for colour.\n *\n * It renders a single element and adds no behaviour, so the attributes it is given\n * (id, for, aria-*…) land straight on that element. This is what lets it serve as a\n * real field label, with `as=\"label\"` and a `for`.\n */\nimport { computed } from 'vue'\n\nexport type TypographyVariant =\n  | 'display'\n  | 'heading-1'\n  | 'heading-2'\n  | 'heading-3'\n  | 'heading-4'\n  | 'subtitle'\n  | 'body-xl'\n  | 'body-lg'\n  | 'body-md'\n  | 'body-sm'\n  | 'label'\n  | 'caption'\n  | 'overline'\n  | 'code'\n\nexport type TypographyTone =\n  'default' | 'muted' | 'subtle' | 'accent' | 'danger' | 'success' | 'warning' | 'on-inverse'\n\ninterface TypographyProps {\n  /**\n   * The role this text plays, which selects a complete recipe of typographic\n   * tokens — size, weight, line height and, where the role calls for it, letter\n   * spacing and a monospaced family.\n   */\n  variant?: TypographyVariant\n  /**\n   * The HTML tag to render. Each variant already has a sensible default (h1 to h4,\n   * p, span, code), so this is for the cases where the meaning and the look differ —\n   * a subtitle that is really an `h2`, or a label attached to a field.\n   */\n  as?: string\n  /**\n   * The colour of the text. `default` sets none at all, so the text inherits from\n   * whatever surrounds it — which is what lets the same component be used on an\n   * inverted surface or inside a coloured toast.\n   */\n  tone?: TypographyTone\n  /**\n   * Cuts the text to one line and ends it with an ellipsis. The element needs a\n   * width to be cut against — being a block, or a flex item — otherwise there is\n   * nothing to overflow and the text simply stays whole.\n   */\n  truncate?: boolean\n}\n\nconst props = withDefaults(defineProps<TypographyProps>(), {\n  variant: 'body-md',\n  as: undefined,\n  tone: 'default',\n  truncate: false,\n})\n\ndefineSlots<{\n  /** Text content. */\n  default(): unknown\n}>()\n\n/**\n * The tag each variant renders when `as` says nothing — the one whose meaning\n * matches the role.\n */\nconst DEFAULT_TAGS: Record<TypographyVariant, string> = {\n  display: 'p',\n  'heading-1': 'h1',\n  'heading-2': 'h2',\n  'heading-3': 'h3',\n  'heading-4': 'h4',\n  subtitle: 'p',\n  'body-xl': 'p',\n  'body-lg': 'p',\n  'body-md': 'p',\n  'body-sm': 'p',\n  label: 'span',\n  caption: 'p',\n  overline: 'span',\n  code: 'code',\n}\n\nconst tag = computed(() => props.as ?? DEFAULT_TAGS[props.variant])\n</script>\n\n<template>\n  <component\n    :is=\"tag\"\n    class=\"v-typography\"\n    :data-variant=\"variant\"\n    :data-tone=\"tone === 'default' ? undefined : tone\"\n    :data-truncate=\"truncate ? '' : undefined\"\n  >\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-typography {\n    /* These two defaults are re-declared on every instance because custom properties\n       INHERIT: nested inside a variant that sets letter spacing, or inside a `code`,\n       a VTypography would otherwise pick up its ancestor's tracking and monospaced\n       family. The [data-variant] blocks below, being more specific, still win.\n\n       Size, weight and leading need no such reset, and that is an INVARIANT rather than\n       an oversight: every variant block sets all three, so none can be inherited. A new\n       variant that leaves one out takes it from whichever VTypography encloses it — the\n       same bug these two lines exist to prevent, one step further out. */\n    --typography-family: var(--vectis-text-family);\n    --typography-tracking: normal;\n\n    margin: 0; /* the space around a text block belongs to the layout holding it */\n    font-family: var(--typography-family);\n    font-size: var(--typography-size);\n    font-weight: var(--typography-weight);\n    line-height: var(--typography-leading);\n    letter-spacing: var(--typography-tracking);\n    /* With the `default` tone no colour variable is set, and the fallback makes the\n       text inherit — which is what allows the component to be dropped inside an\n       already coloured context, an inverted surface or a tinted toast. */\n    color: var(--typography-color, inherit);\n    overflow-wrap: break-word;\n  }\n\n  .v-typography[data-variant='display'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-display-size);\n    --typography-weight: var(--vectis-text-display-weight);\n    --typography-leading: var(--vectis-text-display-leading);\n    --typography-tracking: var(--vectis-text-display-tracking);\n  }\n\n  .v-typography[data-variant='heading-1'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-1-size);\n    --typography-weight: var(--vectis-text-heading-1-weight);\n    --typography-leading: var(--vectis-text-heading-1-leading);\n    --typography-tracking: var(--vectis-text-heading-1-tracking);\n  }\n\n  .v-typography[data-variant='heading-2'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-2-size);\n    --typography-weight: var(--vectis-text-heading-2-weight);\n    --typography-leading: var(--vectis-text-heading-2-leading);\n    --typography-tracking: var(--vectis-text-heading-2-tracking);\n  }\n\n  .v-typography[data-variant='heading-3'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-3-size);\n    --typography-weight: var(--vectis-text-heading-3-weight);\n    --typography-leading: var(--vectis-text-heading-3-leading);\n  }\n\n  .v-typography[data-variant='heading-4'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-4-size);\n    --typography-weight: var(--vectis-text-heading-4-weight);\n    --typography-leading: var(--vectis-text-heading-4-leading);\n  }\n\n  .v-typography[data-variant='subtitle'] {\n    --typography-size: var(--vectis-text-subtitle-size);\n    --typography-weight: var(--vectis-text-subtitle-weight);\n    --typography-leading: var(--vectis-text-subtitle-leading);\n  }\n\n  .v-typography[data-variant='body-xl'] {\n    --typography-size: var(--vectis-text-body-xl-size);\n    --typography-weight: var(--vectis-text-body-xl-weight);\n    --typography-leading: var(--vectis-text-body-xl-leading);\n  }\n\n  .v-typography[data-variant='body-lg'] {\n    --typography-size: var(--vectis-text-body-lg-size);\n    --typography-weight: var(--vectis-text-body-lg-weight);\n    --typography-leading: var(--vectis-text-body-lg-leading);\n  }\n\n  .v-typography[data-variant='body-md'] {\n    --typography-size: var(--vectis-text-body-md-size);\n    --typography-weight: var(--vectis-text-body-md-weight);\n    --typography-leading: var(--vectis-text-body-md-leading);\n  }\n\n  .v-typography[data-variant='body-sm'] {\n    --typography-size: var(--vectis-text-body-sm-size);\n    --typography-weight: var(--vectis-text-body-sm-weight);\n    --typography-leading: var(--vectis-text-body-sm-leading);\n  }\n\n  .v-typography[data-variant='label'] {\n    --typography-size: var(--vectis-text-label-size);\n    --typography-weight: var(--vectis-text-label-weight);\n    --typography-leading: var(--vectis-text-label-leading);\n  }\n\n  .v-typography[data-variant='caption'] {\n    --typography-size: var(--vectis-text-caption-size);\n    --typography-weight: var(--vectis-text-caption-weight);\n    --typography-leading: var(--vectis-text-caption-leading);\n  }\n\n  .v-typography[data-variant='overline'] {\n    --typography-size: var(--vectis-text-overline-size);\n    --typography-weight: var(--vectis-text-overline-weight);\n    --typography-leading: var(--vectis-text-overline-leading);\n    --typography-tracking: var(--vectis-text-overline-tracking);\n\n    text-transform: uppercase;\n  }\n\n  .v-typography[data-variant='code'] {\n    --typography-family: var(--vectis-text-family-code);\n    --typography-size: var(--vectis-text-code-size);\n    --typography-weight: var(--vectis-text-code-weight);\n    --typography-leading: var(--vectis-text-code-leading);\n  }\n\n  /* There is deliberately no block for the `default` tone: leaving the colour\n     variable unset is precisely what makes the text inherit. */\n  .v-typography[data-tone='muted'] {\n    --typography-color: var(--vectis-color-text-muted);\n  }\n\n  .v-typography[data-tone='subtle'] {\n    --typography-color: var(--vectis-color-text-subtle);\n  }\n\n  .v-typography[data-tone='accent'] {\n    --typography-color: var(--vectis-color-accent-text);\n  }\n\n  .v-typography[data-tone='danger'] {\n    --typography-color: var(--vectis-color-danger-text);\n  }\n\n  .v-typography[data-tone='success'] {\n    --typography-color: var(--vectis-color-success-text);\n  }\n\n  .v-typography[data-tone='warning'] {\n    --typography-color: var(--vectis-color-warning-text);\n  }\n\n  .v-typography[data-tone='on-inverse'] {\n    --typography-color: var(--vectis-color-text-on-inverse);\n  }\n\n  .v-typography[data-truncate] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VTypography.js","names":[],"sources":["../../../src/components/VTypography/VTypography.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * The design system's text element. Rather than setting a size here and a weight\n * there, the writer names the ROLE the text plays — a heading, a caption, a label —\n * and `variant` applies the complete typographic recipe that goes with it: family,\n * size, weight, line height and letter spacing, all read from the semantic tokens.\n * `tone` does the same for colour.\n *\n * It renders a single element and adds no behaviour, so the attributes it is given\n * (id, for, aria-*…) land straight on that element. This is what lets it serve as a\n * real field label, with `as=\"label\"` and a `for`.\n */\nimport { computed } from 'vue'\n\n/** The role a text plays, each with its complete typographic recipe. */\nexport type TypographyVariant =\n  | 'display'\n  | 'heading-1'\n  | 'heading-2'\n  | 'heading-3'\n  | 'heading-4'\n  | 'subtitle'\n  | 'body-xl'\n  | 'body-lg'\n  | 'body-md'\n  | 'body-sm'\n  | 'label'\n  | 'caption'\n  | 'overline'\n  | 'code'\n\n/** The colour of a text; `default` sets none and inherits. */\nexport type TypographyTone =\n  'default' | 'muted' | 'subtle' | 'accent' | 'danger' | 'success' | 'warning' | 'on-inverse'\n\ninterface TypographyProps {\n  /**\n   * The role this text plays, which selects a complete recipe of typographic\n   * tokens: size, weight, line height and, where the role calls for it, letter\n   * spacing and a monospaced family.\n   */\n  variant?: TypographyVariant\n  /**\n   * The HTML tag to render. Each variant already has a sensible default (h1 to h4,\n   * p, span, code), so this is for the cases where the meaning and the look differ:\n   * a subtitle that is really an `h2`, or a label attached to a field.\n   */\n  as?: string\n  /**\n   * The colour of the text. `default` sets none at all, so the text inherits from\n   * whatever surrounds it, which is what lets the same component be used on an\n   * inverted surface or inside a coloured toast.\n   */\n  tone?: TypographyTone\n  /**\n   * Cuts the text to one line and ends it with an ellipsis. The element needs a\n   * width to be cut against (being a block, or a flex item), otherwise there is\n   * nothing to overflow and the text simply stays whole.\n   */\n  truncate?: boolean\n}\n\nconst props = withDefaults(defineProps<TypographyProps>(), {\n  variant: 'body-md',\n  as: undefined,\n  tone: 'default',\n  truncate: false,\n})\n\ndefineSlots<{\n  /** Text content. */\n  default(): unknown\n}>()\n\n/**\n * The tag each variant renders when `as` says nothing — the one whose meaning\n * matches the role.\n */\nconst DEFAULT_TAGS: Record<TypographyVariant, string> = {\n  display: 'p',\n  'heading-1': 'h1',\n  'heading-2': 'h2',\n  'heading-3': 'h3',\n  'heading-4': 'h4',\n  subtitle: 'p',\n  'body-xl': 'p',\n  'body-lg': 'p',\n  'body-md': 'p',\n  'body-sm': 'p',\n  label: 'span',\n  caption: 'p',\n  overline: 'span',\n  code: 'code',\n}\n\nconst tag = computed(() => props.as ?? DEFAULT_TAGS[props.variant])\n</script>\n\n<template>\n  <component\n    :is=\"tag\"\n    class=\"v-typography\"\n    :data-variant=\"variant\"\n    :data-tone=\"tone === 'default' ? undefined : tone\"\n    :data-truncate=\"truncate ? '' : undefined\"\n  >\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-typography {\n    /* These two defaults are re-declared on every instance because custom properties\n       INHERIT: nested inside a variant that sets letter spacing, or inside a `code`,\n       a VTypography would otherwise pick up its ancestor's tracking and monospaced\n       family. The [data-variant] blocks below, being more specific, still win.\n\n       Size, weight and leading need no such reset, and that is an INVARIANT rather than\n       an oversight: every variant block sets all three, so none can be inherited. A new\n       variant that leaves one out takes it from whichever VTypography encloses it — the\n       same bug these two lines exist to prevent, one step further out. */\n    --typography-family: var(--vectis-text-family);\n    --typography-tracking: normal;\n\n    margin: 0; /* the space around a text block belongs to the layout holding it */\n    font-family: var(--typography-family);\n    font-size: var(--typography-size);\n    font-weight: var(--typography-weight);\n    line-height: var(--typography-leading);\n    letter-spacing: var(--typography-tracking);\n    /* With the `default` tone no colour variable is set, and the fallback makes the\n       text inherit — which is what allows the component to be dropped inside an\n       already coloured context, an inverted surface or a tinted toast. */\n    color: var(--typography-color, inherit);\n    overflow-wrap: break-word;\n  }\n\n  /* TRAP — the colour variable inherits like any other, so without this reset a `default`\n     VTypography nested in a toned one took the OUTER tone's colour instead of the colour of\n     whatever sits between them. `initial` makes it guaranteed-invalid, which is what lets\n     the fallback above apply. At zero specificity, so the tone rules below and the sheets\n     that route a colour through the variable (VDataTable's title, VFilePicker's subtitle)\n     win over it whatever order the sheets land in. */\n  :where(.v-typography) {\n    --typography-color: initial;\n  }\n\n  .v-typography[data-variant='display'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-display-size);\n    --typography-weight: var(--vectis-text-display-weight);\n    --typography-leading: var(--vectis-text-display-leading);\n    --typography-tracking: var(--vectis-text-display-tracking);\n  }\n\n  .v-typography[data-variant='heading-1'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-1-size);\n    --typography-weight: var(--vectis-text-heading-1-weight);\n    --typography-leading: var(--vectis-text-heading-1-leading);\n    --typography-tracking: var(--vectis-text-heading-1-tracking);\n  }\n\n  .v-typography[data-variant='heading-2'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-2-size);\n    --typography-weight: var(--vectis-text-heading-2-weight);\n    --typography-leading: var(--vectis-text-heading-2-leading);\n    --typography-tracking: var(--vectis-text-heading-2-tracking);\n  }\n\n  .v-typography[data-variant='heading-3'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-3-size);\n    --typography-weight: var(--vectis-text-heading-3-weight);\n    --typography-leading: var(--vectis-text-heading-3-leading);\n  }\n\n  .v-typography[data-variant='heading-4'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-4-size);\n    --typography-weight: var(--vectis-text-heading-4-weight);\n    --typography-leading: var(--vectis-text-heading-4-leading);\n  }\n\n  .v-typography[data-variant='subtitle'] {\n    --typography-size: var(--vectis-text-subtitle-size);\n    --typography-weight: var(--vectis-text-subtitle-weight);\n    --typography-leading: var(--vectis-text-subtitle-leading);\n  }\n\n  .v-typography[data-variant='body-xl'] {\n    --typography-size: var(--vectis-text-body-xl-size);\n    --typography-weight: var(--vectis-text-body-xl-weight);\n    --typography-leading: var(--vectis-text-body-xl-leading);\n  }\n\n  .v-typography[data-variant='body-lg'] {\n    --typography-size: var(--vectis-text-body-lg-size);\n    --typography-weight: var(--vectis-text-body-lg-weight);\n    --typography-leading: var(--vectis-text-body-lg-leading);\n  }\n\n  .v-typography[data-variant='body-md'] {\n    --typography-size: var(--vectis-text-body-md-size);\n    --typography-weight: var(--vectis-text-body-md-weight);\n    --typography-leading: var(--vectis-text-body-md-leading);\n  }\n\n  .v-typography[data-variant='body-sm'] {\n    --typography-size: var(--vectis-text-body-sm-size);\n    --typography-weight: var(--vectis-text-body-sm-weight);\n    --typography-leading: var(--vectis-text-body-sm-leading);\n  }\n\n  .v-typography[data-variant='label'] {\n    --typography-size: var(--vectis-text-label-size);\n    --typography-weight: var(--vectis-text-label-weight);\n    --typography-leading: var(--vectis-text-label-leading);\n  }\n\n  .v-typography[data-variant='caption'] {\n    --typography-size: var(--vectis-text-caption-size);\n    --typography-weight: var(--vectis-text-caption-weight);\n    --typography-leading: var(--vectis-text-caption-leading);\n  }\n\n  .v-typography[data-variant='overline'] {\n    --typography-size: var(--vectis-text-overline-size);\n    --typography-weight: var(--vectis-text-overline-weight);\n    --typography-leading: var(--vectis-text-overline-leading);\n    --typography-tracking: var(--vectis-text-overline-tracking);\n\n    text-transform: uppercase;\n  }\n\n  .v-typography[data-variant='code'] {\n    --typography-family: var(--vectis-text-family-code);\n    --typography-size: var(--vectis-text-code-size);\n    --typography-weight: var(--vectis-text-code-weight);\n    --typography-leading: var(--vectis-text-code-leading);\n  }\n\n  /* There is deliberately no block for the `default` tone: leaving the colour\n     variable unset is precisely what makes the text inherit. */\n  .v-typography[data-tone='muted'] {\n    --typography-color: var(--vectis-color-text-muted);\n  }\n\n  .v-typography[data-tone='subtle'] {\n    --typography-color: var(--vectis-color-text-subtle);\n  }\n\n  .v-typography[data-tone='accent'] {\n    --typography-color: var(--vectis-color-accent-text);\n  }\n\n  .v-typography[data-tone='danger'] {\n    --typography-color: var(--vectis-color-danger-text);\n  }\n\n  .v-typography[data-tone='success'] {\n    --typography-color: var(--vectis-color-success-text);\n  }\n\n  .v-typography[data-tone='warning'] {\n    --typography-color: var(--vectis-color-warning-text);\n  }\n\n  .v-typography[data-tone='on-inverse'] {\n    --typography-color: var(--vectis-color-text-on-inverse);\n  }\n\n  .v-typography[data-truncate] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"VTypography.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VTypography/VTypography.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core — the only JS is deriving the default tag from the variant.\n/**\n * The design system's text element. Rather than setting a size here and a weight\n * there, the writer names the ROLE the text plays — a heading, a caption, a label —\n * and `variant` applies the complete typographic recipe that goes with it: family,\n * size, weight, line height and letter spacing, all read from the semantic tokens.\n * `tone` does the same for colour.\n *\n * It renders a single element and adds no behaviour, so the attributes it is given\n * (id, for, aria-*…) land straight on that element. This is what lets it serve as a\n * real field label, with `as=\"label\"` and a `for`.\n */\nimport { computed } from 'vue'\n\nexport type TypographyVariant =\n  | 'display'\n  | 'heading-1'\n  | 'heading-2'\n  | 'heading-3'\n  | 'heading-4'\n  | 'subtitle'\n  | 'body-xl'\n  | 'body-lg'\n  | 'body-md'\n  | 'body-sm'\n  | 'label'\n  | 'caption'\n  | 'overline'\n  | 'code'\n\nexport type TypographyTone =\n  'default' | 'muted' | 'subtle' | 'accent' | 'danger' | 'success' | 'warning' | 'on-inverse'\n\ninterface TypographyProps {\n  /**\n   * The role this text plays, which selects a complete recipe of typographic\n   * tokens — size, weight, line height and, where the role calls for it, letter\n   * spacing and a monospaced family.\n   */\n  variant?: TypographyVariant\n  /**\n   * The HTML tag to render. Each variant already has a sensible default (h1 to h4,\n   * p, span, code), so this is for the cases where the meaning and the look differ —\n   * a subtitle that is really an `h2`, or a label attached to a field.\n   */\n  as?: string\n  /**\n   * The colour of the text. `default` sets none at all, so the text inherits from\n   * whatever surrounds it — which is what lets the same component be used on an\n   * inverted surface or inside a coloured toast.\n   */\n  tone?: TypographyTone\n  /**\n   * Cuts the text to one line and ends it with an ellipsis. The element needs a\n   * width to be cut against — being a block, or a flex item — otherwise there is\n   * nothing to overflow and the text simply stays whole.\n   */\n  truncate?: boolean\n}\n\nconst props = withDefaults(defineProps<TypographyProps>(), {\n  variant: 'body-md',\n  as: undefined,\n  tone: 'default',\n  truncate: false,\n})\n\ndefineSlots<{\n  /** Text content. */\n  default(): unknown\n}>()\n\n/**\n * The tag each variant renders when `as` says nothing — the one whose meaning\n * matches the role.\n */\nconst DEFAULT_TAGS: Record<TypographyVariant, string> = {\n  display: 'p',\n  'heading-1': 'h1',\n  'heading-2': 'h2',\n  'heading-3': 'h3',\n  'heading-4': 'h4',\n  subtitle: 'p',\n  'body-xl': 'p',\n  'body-lg': 'p',\n  'body-md': 'p',\n  'body-sm': 'p',\n  label: 'span',\n  caption: 'p',\n  overline: 'span',\n  code: 'code',\n}\n\nconst tag = computed(() => props.as ?? DEFAULT_TAGS[props.variant])\n</script>\n\n<template>\n  <component\n    :is=\"tag\"\n    class=\"v-typography\"\n    :data-variant=\"variant\"\n    :data-tone=\"tone === 'default' ? undefined : tone\"\n    :data-truncate=\"truncate ? '' : undefined\"\n  >\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-typography {\n    /* These two defaults are re-declared on every instance because custom properties\n       INHERIT: nested inside a variant that sets letter spacing, or inside a `code`,\n       a VTypography would otherwise pick up its ancestor's tracking and monospaced\n       family. The [data-variant] blocks below, being more specific, still win.\n\n       Size, weight and leading need no such reset, and that is an INVARIANT rather than\n       an oversight: every variant block sets all three, so none can be inherited. A new\n       variant that leaves one out takes it from whichever VTypography encloses it — the\n       same bug these two lines exist to prevent, one step further out. */\n    --typography-family: var(--vectis-text-family);\n    --typography-tracking: normal;\n\n    margin: 0; /* the space around a text block belongs to the layout holding it */\n    font-family: var(--typography-family);\n    font-size: var(--typography-size);\n    font-weight: var(--typography-weight);\n    line-height: var(--typography-leading);\n    letter-spacing: var(--typography-tracking);\n    /* With the `default` tone no colour variable is set, and the fallback makes the\n       text inherit — which is what allows the component to be dropped inside an\n       already coloured context, an inverted surface or a tinted toast. */\n    color: var(--typography-color, inherit);\n    overflow-wrap: break-word;\n  }\n\n  .v-typography[data-variant='display'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-display-size);\n    --typography-weight: var(--vectis-text-display-weight);\n    --typography-leading: var(--vectis-text-display-leading);\n    --typography-tracking: var(--vectis-text-display-tracking);\n  }\n\n  .v-typography[data-variant='heading-1'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-1-size);\n    --typography-weight: var(--vectis-text-heading-1-weight);\n    --typography-leading: var(--vectis-text-heading-1-leading);\n    --typography-tracking: var(--vectis-text-heading-1-tracking);\n  }\n\n  .v-typography[data-variant='heading-2'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-2-size);\n    --typography-weight: var(--vectis-text-heading-2-weight);\n    --typography-leading: var(--vectis-text-heading-2-leading);\n    --typography-tracking: var(--vectis-text-heading-2-tracking);\n  }\n\n  .v-typography[data-variant='heading-3'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-3-size);\n    --typography-weight: var(--vectis-text-heading-3-weight);\n    --typography-leading: var(--vectis-text-heading-3-leading);\n  }\n\n  .v-typography[data-variant='heading-4'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-4-size);\n    --typography-weight: var(--vectis-text-heading-4-weight);\n    --typography-leading: var(--vectis-text-heading-4-leading);\n  }\n\n  .v-typography[data-variant='subtitle'] {\n    --typography-size: var(--vectis-text-subtitle-size);\n    --typography-weight: var(--vectis-text-subtitle-weight);\n    --typography-leading: var(--vectis-text-subtitle-leading);\n  }\n\n  .v-typography[data-variant='body-xl'] {\n    --typography-size: var(--vectis-text-body-xl-size);\n    --typography-weight: var(--vectis-text-body-xl-weight);\n    --typography-leading: var(--vectis-text-body-xl-leading);\n  }\n\n  .v-typography[data-variant='body-lg'] {\n    --typography-size: var(--vectis-text-body-lg-size);\n    --typography-weight: var(--vectis-text-body-lg-weight);\n    --typography-leading: var(--vectis-text-body-lg-leading);\n  }\n\n  .v-typography[data-variant='body-md'] {\n    --typography-size: var(--vectis-text-body-md-size);\n    --typography-weight: var(--vectis-text-body-md-weight);\n    --typography-leading: var(--vectis-text-body-md-leading);\n  }\n\n  .v-typography[data-variant='body-sm'] {\n    --typography-size: var(--vectis-text-body-sm-size);\n    --typography-weight: var(--vectis-text-body-sm-weight);\n    --typography-leading: var(--vectis-text-body-sm-leading);\n  }\n\n  .v-typography[data-variant='label'] {\n    --typography-size: var(--vectis-text-label-size);\n    --typography-weight: var(--vectis-text-label-weight);\n    --typography-leading: var(--vectis-text-label-leading);\n  }\n\n  .v-typography[data-variant='caption'] {\n    --typography-size: var(--vectis-text-caption-size);\n    --typography-weight: var(--vectis-text-caption-weight);\n    --typography-leading: var(--vectis-text-caption-leading);\n  }\n\n  .v-typography[data-variant='overline'] {\n    --typography-size: var(--vectis-text-overline-size);\n    --typography-weight: var(--vectis-text-overline-weight);\n    --typography-leading: var(--vectis-text-overline-leading);\n    --typography-tracking: var(--vectis-text-overline-tracking);\n\n    text-transform: uppercase;\n  }\n\n  .v-typography[data-variant='code'] {\n    --typography-family: var(--vectis-text-family-code);\n    --typography-size: var(--vectis-text-code-size);\n    --typography-weight: var(--vectis-text-code-weight);\n    --typography-leading: var(--vectis-text-code-leading);\n  }\n\n  /* There is deliberately no block for the `default` tone: leaving the colour\n     variable unset is precisely what makes the text inherit. */\n  .v-typography[data-tone='muted'] {\n    --typography-color: var(--vectis-color-text-muted);\n  }\n\n  .v-typography[data-tone='subtle'] {\n    --typography-color: var(--vectis-color-text-subtle);\n  }\n\n  .v-typography[data-tone='accent'] {\n    --typography-color: var(--vectis-color-accent-text);\n  }\n\n  .v-typography[data-tone='danger'] {\n    --typography-color: var(--vectis-color-danger-text);\n  }\n\n  .v-typography[data-tone='success'] {\n    --typography-color: var(--vectis-color-success-text);\n  }\n\n  .v-typography[data-tone='warning'] {\n    --typography-color: var(--vectis-color-warning-text);\n  }\n\n  .v-typography[data-tone='on-inverse'] {\n    --typography-color: var(--vectis-color-text-on-inverse);\n  }\n\n  .v-typography[data-truncate] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;EA6DA,IAAM,IAAQ,GAgBR,IAAkD;GACtD,SAAS;GACT,aAAa;GACb,aAAa;GACb,aAAa;GACb,aAAa;GACb,UAAU;GACV,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,OAAO;GACP,SAAS;GACT,UAAU;GACV,MAAM;EACR,GAEM,IAAM,QAAe,EAAM,MAAM,EAAa,EAAM,QAAQ;yBAIhE,EAQY,EAPL,EAAA,KAAG,GAAA;GACR,OAAM;GACL,gBAAc,EAAA;GACd,aAAW,EAAA,SAAI,YAAiB,KAAA,IAAY,EAAA;GAC5C,iBAAe,EAAA,WAAQ,KAAQ,KAAA;;oBAExB,CAAR,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"VTypography.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VTypography/VTypography.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * The design system's text element. Rather than setting a size here and a weight\n * there, the writer names the ROLE the text plays — a heading, a caption, a label —\n * and `variant` applies the complete typographic recipe that goes with it: family,\n * size, weight, line height and letter spacing, all read from the semantic tokens.\n * `tone` does the same for colour.\n *\n * It renders a single element and adds no behaviour, so the attributes it is given\n * (id, for, aria-*…) land straight on that element. This is what lets it serve as a\n * real field label, with `as=\"label\"` and a `for`.\n */\nimport { computed } from 'vue'\n\n/** The role a text plays, each with its complete typographic recipe. */\nexport type TypographyVariant =\n  | 'display'\n  | 'heading-1'\n  | 'heading-2'\n  | 'heading-3'\n  | 'heading-4'\n  | 'subtitle'\n  | 'body-xl'\n  | 'body-lg'\n  | 'body-md'\n  | 'body-sm'\n  | 'label'\n  | 'caption'\n  | 'overline'\n  | 'code'\n\n/** The colour of a text; `default` sets none and inherits. */\nexport type TypographyTone =\n  'default' | 'muted' | 'subtle' | 'accent' | 'danger' | 'success' | 'warning' | 'on-inverse'\n\ninterface TypographyProps {\n  /**\n   * The role this text plays, which selects a complete recipe of typographic\n   * tokens: size, weight, line height and, where the role calls for it, letter\n   * spacing and a monospaced family.\n   */\n  variant?: TypographyVariant\n  /**\n   * The HTML tag to render. Each variant already has a sensible default (h1 to h4,\n   * p, span, code), so this is for the cases where the meaning and the look differ:\n   * a subtitle that is really an `h2`, or a label attached to a field.\n   */\n  as?: string\n  /**\n   * The colour of the text. `default` sets none at all, so the text inherits from\n   * whatever surrounds it, which is what lets the same component be used on an\n   * inverted surface or inside a coloured toast.\n   */\n  tone?: TypographyTone\n  /**\n   * Cuts the text to one line and ends it with an ellipsis. The element needs a\n   * width to be cut against (being a block, or a flex item), otherwise there is\n   * nothing to overflow and the text simply stays whole.\n   */\n  truncate?: boolean\n}\n\nconst props = withDefaults(defineProps<TypographyProps>(), {\n  variant: 'body-md',\n  as: undefined,\n  tone: 'default',\n  truncate: false,\n})\n\ndefineSlots<{\n  /** Text content. */\n  default(): unknown\n}>()\n\n/**\n * The tag each variant renders when `as` says nothing — the one whose meaning\n * matches the role.\n */\nconst DEFAULT_TAGS: Record<TypographyVariant, string> = {\n  display: 'p',\n  'heading-1': 'h1',\n  'heading-2': 'h2',\n  'heading-3': 'h3',\n  'heading-4': 'h4',\n  subtitle: 'p',\n  'body-xl': 'p',\n  'body-lg': 'p',\n  'body-md': 'p',\n  'body-sm': 'p',\n  label: 'span',\n  caption: 'p',\n  overline: 'span',\n  code: 'code',\n}\n\nconst tag = computed(() => props.as ?? DEFAULT_TAGS[props.variant])\n</script>\n\n<template>\n  <component\n    :is=\"tag\"\n    class=\"v-typography\"\n    :data-variant=\"variant\"\n    :data-tone=\"tone === 'default' ? undefined : tone\"\n    :data-truncate=\"truncate ? '' : undefined\"\n  >\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-typography {\n    /* These two defaults are re-declared on every instance because custom properties\n       INHERIT: nested inside a variant that sets letter spacing, or inside a `code`,\n       a VTypography would otherwise pick up its ancestor's tracking and monospaced\n       family. The [data-variant] blocks below, being more specific, still win.\n\n       Size, weight and leading need no such reset, and that is an INVARIANT rather than\n       an oversight: every variant block sets all three, so none can be inherited. A new\n       variant that leaves one out takes it from whichever VTypography encloses it — the\n       same bug these two lines exist to prevent, one step further out. */\n    --typography-family: var(--vectis-text-family);\n    --typography-tracking: normal;\n\n    margin: 0; /* the space around a text block belongs to the layout holding it */\n    font-family: var(--typography-family);\n    font-size: var(--typography-size);\n    font-weight: var(--typography-weight);\n    line-height: var(--typography-leading);\n    letter-spacing: var(--typography-tracking);\n    /* With the `default` tone no colour variable is set, and the fallback makes the\n       text inherit — which is what allows the component to be dropped inside an\n       already coloured context, an inverted surface or a tinted toast. */\n    color: var(--typography-color, inherit);\n    overflow-wrap: break-word;\n  }\n\n  /* TRAP — the colour variable inherits like any other, so without this reset a `default`\n     VTypography nested in a toned one took the OUTER tone's colour instead of the colour of\n     whatever sits between them. `initial` makes it guaranteed-invalid, which is what lets\n     the fallback above apply. At zero specificity, so the tone rules below and the sheets\n     that route a colour through the variable (VDataTable's title, VFilePicker's subtitle)\n     win over it whatever order the sheets land in. */\n  :where(.v-typography) {\n    --typography-color: initial;\n  }\n\n  .v-typography[data-variant='display'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-display-size);\n    --typography-weight: var(--vectis-text-display-weight);\n    --typography-leading: var(--vectis-text-display-leading);\n    --typography-tracking: var(--vectis-text-display-tracking);\n  }\n\n  .v-typography[data-variant='heading-1'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-1-size);\n    --typography-weight: var(--vectis-text-heading-1-weight);\n    --typography-leading: var(--vectis-text-heading-1-leading);\n    --typography-tracking: var(--vectis-text-heading-1-tracking);\n  }\n\n  .v-typography[data-variant='heading-2'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-2-size);\n    --typography-weight: var(--vectis-text-heading-2-weight);\n    --typography-leading: var(--vectis-text-heading-2-leading);\n    --typography-tracking: var(--vectis-text-heading-2-tracking);\n  }\n\n  .v-typography[data-variant='heading-3'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-3-size);\n    --typography-weight: var(--vectis-text-heading-3-weight);\n    --typography-leading: var(--vectis-text-heading-3-leading);\n  }\n\n  .v-typography[data-variant='heading-4'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-4-size);\n    --typography-weight: var(--vectis-text-heading-4-weight);\n    --typography-leading: var(--vectis-text-heading-4-leading);\n  }\n\n  .v-typography[data-variant='subtitle'] {\n    --typography-size: var(--vectis-text-subtitle-size);\n    --typography-weight: var(--vectis-text-subtitle-weight);\n    --typography-leading: var(--vectis-text-subtitle-leading);\n  }\n\n  .v-typography[data-variant='body-xl'] {\n    --typography-size: var(--vectis-text-body-xl-size);\n    --typography-weight: var(--vectis-text-body-xl-weight);\n    --typography-leading: var(--vectis-text-body-xl-leading);\n  }\n\n  .v-typography[data-variant='body-lg'] {\n    --typography-size: var(--vectis-text-body-lg-size);\n    --typography-weight: var(--vectis-text-body-lg-weight);\n    --typography-leading: var(--vectis-text-body-lg-leading);\n  }\n\n  .v-typography[data-variant='body-md'] {\n    --typography-size: var(--vectis-text-body-md-size);\n    --typography-weight: var(--vectis-text-body-md-weight);\n    --typography-leading: var(--vectis-text-body-md-leading);\n  }\n\n  .v-typography[data-variant='body-sm'] {\n    --typography-size: var(--vectis-text-body-sm-size);\n    --typography-weight: var(--vectis-text-body-sm-weight);\n    --typography-leading: var(--vectis-text-body-sm-leading);\n  }\n\n  .v-typography[data-variant='label'] {\n    --typography-size: var(--vectis-text-label-size);\n    --typography-weight: var(--vectis-text-label-weight);\n    --typography-leading: var(--vectis-text-label-leading);\n  }\n\n  .v-typography[data-variant='caption'] {\n    --typography-size: var(--vectis-text-caption-size);\n    --typography-weight: var(--vectis-text-caption-weight);\n    --typography-leading: var(--vectis-text-caption-leading);\n  }\n\n  .v-typography[data-variant='overline'] {\n    --typography-size: var(--vectis-text-overline-size);\n    --typography-weight: var(--vectis-text-overline-weight);\n    --typography-leading: var(--vectis-text-overline-leading);\n    --typography-tracking: var(--vectis-text-overline-tracking);\n\n    text-transform: uppercase;\n  }\n\n  .v-typography[data-variant='code'] {\n    --typography-family: var(--vectis-text-family-code);\n    --typography-size: var(--vectis-text-code-size);\n    --typography-weight: var(--vectis-text-code-weight);\n    --typography-leading: var(--vectis-text-code-leading);\n  }\n\n  /* There is deliberately no block for the `default` tone: leaving the colour\n     variable unset is precisely what makes the text inherit. */\n  .v-typography[data-tone='muted'] {\n    --typography-color: var(--vectis-color-text-muted);\n  }\n\n  .v-typography[data-tone='subtle'] {\n    --typography-color: var(--vectis-color-text-subtle);\n  }\n\n  .v-typography[data-tone='accent'] {\n    --typography-color: var(--vectis-color-accent-text);\n  }\n\n  .v-typography[data-tone='danger'] {\n    --typography-color: var(--vectis-color-danger-text);\n  }\n\n  .v-typography[data-tone='success'] {\n    --typography-color: var(--vectis-color-success-text);\n  }\n\n  .v-typography[data-tone='warning'] {\n    --typography-color: var(--vectis-color-warning-text);\n  }\n\n  .v-typography[data-tone='on-inverse'] {\n    --typography-color: var(--vectis-color-text-on-inverse);\n  }\n\n  .v-typography[data-truncate] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;EA8DA,IAAM,IAAQ,GAgBR,IAAkD;GACtD,SAAS;GACT,aAAa;GACb,aAAa;GACb,aAAa;GACb,aAAa;GACb,UAAU;GACV,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,OAAO;GACP,SAAS;GACT,UAAU;GACV,MAAM;EACR,GAEM,IAAM,QAAe,EAAM,MAAM,EAAa,EAAM,QAAQ;yBAIhE,EAQY,EAPL,EAAA,KAAG,GAAA;GACR,OAAM;GACL,gBAAc,EAAA;GACd,aAAW,EAAA,SAAI,YAAiB,KAAA,IAAY,EAAA;GAC5C,iBAAe,EAAA,WAAQ,KAAQ,KAAA;;oBAExB,CAAR,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA"}

package/dist/composables/useAriaLabel.js

@@ -2,7 +2,7 @@ import { computed as e, useAttrs as t } from "vue";
 //#region src/composables/useAriaLabel.ts
 function n(n) {
 	let r = t();
-	return e(() => r["aria-labelledby"] === void 0 ? r["aria-label"] ?? n() : void 0);
+	return e(() => r["aria-labelledby"] == null ? r["aria-label"] ?? n() : void 0);
 }
 //#endregion
 export { n as useAriaLabel };

package/dist/composables/useAriaLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAriaLabel.js","names":[],"sources":["../../src/composables/useAriaLabel.ts"],"sourcesContent":["// @a11y\n/**\n * The accessible name of a labelled container — a tablist, a group, a nav — resolved\n * `aria-labelledby` > consumer `aria-label` > the `label` prop.\n *\n * `label` is therefore only a default: `aria-label` replaces it, and `aria-labelledby`\n * removes it outright, or the element would carry two names at once.\n *\n * The arbitration is only NEEDED where a component both spreads `$attrs` and binds its own\n * `:aria-label` on the same element (VTabs, VToggle): nothing would choose, and both would\n * apply. Elsewhere fallthrough already lets the consumer win and this just drops a default\n * that has become redundant.\n */\n\nimport { computed, useAttrs, type ComputedRef } from 'vue'\n\nexport function useAriaLabel(label: () => string | undefined): ComputedRef<string | undefined> {\n  const attrs = useAttrs()\n  return computed(() =>\n    attrs['aria-labelledby'] !== undefined\n      ? undefined\n      : ((attrs['aria-label'] as string | undefined) ?? label()),\n  )\n}\n"],"mappings":";;AAgBA,SAAgB,EAAa,GAAkE;CAC7F,IAAM,IAAQ,EAAS;CACvB,OAAO,QACL,EAAM,uBAAuB,KAAA,IAEvB,EAAM,iBAAwC,EAAM,IADtD,KAAA,CAEN;AACF"}
+{"version":3,"file":"useAriaLabel.js","names":[],"sources":["../../src/composables/useAriaLabel.ts"],"sourcesContent":["// @a11y\n/**\n * The accessible name of a labelled container — a tablist, a group, a nav — resolved\n * `aria-labelledby` > consumer `aria-label` > the `label` prop.\n *\n * `label` is therefore only a default: `aria-label` replaces it, and `aria-labelledby`\n * removes it outright, or the element would carry two names at once.\n *\n * The arbitration is only NEEDED where a component both spreads `$attrs` and binds its own\n * `:aria-label` on the same element (VTabs, VToggle): nothing would choose, and both would\n * apply. Elsewhere fallthrough already lets the consumer win and this just drops a default\n * that has become redundant.\n */\n\nimport { computed, useAttrs, type ComputedRef } from 'vue'\n\nexport function useAriaLabel(label: () => string | undefined): ComputedRef<string | undefined> {\n  const attrs = useAttrs()\n  return computed(() =>\n    attrs['aria-labelledby'] != null\n      ? undefined\n      : ((attrs['aria-label'] as string | undefined) ?? label()),\n  )\n}\n"],"mappings":";;AAgBA,SAAgB,EAAa,GAAkE;CAC7F,IAAM,IAAQ,EAAS;CACvB,OAAO,QACL,EAAM,sBAAsB,OAEtB,EAAM,iBAAwC,EAAM,IADtD,KAAA,CAEN;AACF"}

package/dist/composables/useClearable.d.ts

@@ -23,8 +23,8 @@ interface ClearableOptions {
 }
 /**
  * Whether a field offers its cross: it asks for one, it can be used and changed, and it holds
- * something. The fields composed on top of VInput — VCombobox, VDateInput, VTimeInput,
- * VFileInput — hold their value somewhere other than the text, so they work out `filled`
+ * something. The fields composed on top of VInput: VCombobox, VDateInput, VTimeInput,
+ * VFileInput, hold their value somewhere other than the text, so they work out `filled`
  * themselves and hand VInput the result as `clearVisible`; the other terms are the same for
  * every field and are written here once.
  *

package/dist/composables/useClearable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useClearable.js","names":[],"sources":["../../src/composables/useClearable.ts"],"sourcesContent":["/**\n * The cross that empties a field, shared by VInput and VTextarea — and, through\n * `canClear`, the answer the fields composed on top of VInput give it.\n *\n * The two halves of it are one decision: WHEN the cross is shown, and what pressing it does.\n * They were written out in both components and had already started to drift — one asked\n * `props.disabled` where the other asked the value resolved against the row it sits in — which\n * is the kind of divergence nothing catches, the cross simply staying visible in a disabled\n * VInputGroup.\n *\n * The focus is the accessibility half and is not optional: the cross VANISHES the instant it\n * empties the field, so without that call the focus would be left on a button that no longer\n * exists and fall back to the top of the document.\n */\nimport { computed } from 'vue'\nimport type { ComputedRef, Ref } from 'vue'\n\ninterface ClearableOptions {\n  /** Whether the field offers a cross at all. */\n  clearable: () => boolean\n  /**\n   * The consumer's EXPLICIT answer to \"is there anything to clear?\", which holds even on a\n   * read-only field: the value of a read-only date or time picker changes through its panel\n   * rather than by typing. Left undefined, the field answers for itself.\n   */\n  clearVisible: () => boolean | undefined\n  /** Whether the field is unusable, the row it sits in taken into account. */\n  disabled: () => boolean\n  /** Whether the field refuses to be typed into. */\n  readonly: () => boolean\n  /** What the field currently holds, as text. */\n  text: () => string\n  /** The real control, which the focus goes back to. */\n  controlEl: Ref<{ focus: () => void } | null>\n  /** Empties the value and tells the consumer. */\n  onCleared: () => void\n}\n\n/**\n * Whether a field offers its cross: it asks for one, it can be used and changed, and it holds\n * something. The fields composed on top of VInput — VCombobox, VDateInput, VTimeInput,\n * VFileInput — hold their value somewhere other than the text, so they work out `filled`\n * themselves and hand VInput the result as `clearVisible`; the other terms are the same for\n * every field and are written here once.\n *\n * `disabled` is passed apart from the props because it is the value RESOLVED against the row\n * the field sits in, which the prop alone is not.\n */\nexport function canClear(\n  props: { clearable: boolean; readonly: boolean },\n  disabled: boolean,\n  filled: boolean,\n): boolean {\n  return props.clearable && !disabled && !props.readonly && filled\n}\n\nexport function useClearable(options: ClearableOptions): {\n  showClear: ComputedRef<boolean>\n  onClear: () => void\n} {\n  // An explicit `clearVisible` replaces the read-only and the content terms together: a\n  // composed field has already asked both through `canClear`.\n  const showClear = computed(() => {\n    if (!options.clearable() || options.disabled()) return false\n    return options.clearVisible() ?? (!options.readonly() && options.text().length > 0)\n  })\n\n  function onClear() {\n    options.onCleared()\n    options.controlEl.value?.focus()\n  }\n\n  return { showClear, onClear }\n}\n"],"mappings":";;AAgDA,SAAgB,EACd,GACA,GACA,GACS;CACT,OAAO,EAAM,aAAa,CAAC,KAAY,CAAC,EAAM,YAAY;AAC5D;AAEA,SAAgB,EAAa,GAG3B;CAGA,IAAM,IAAY,QACZ,CAAC,EAAQ,UAAU,KAAK,EAAQ,SAAS,IAAU,KAChD,EAAQ,aAAa,MAAM,CAAC,EAAQ,SAAS,KAAK,EAAQ,KAAK,CAAC,CAAC,SAAS,EAClF;CAED,SAAS,IAAU;EAEjB,AADA,EAAQ,UAAU,GAClB,EAAQ,UAAU,OAAO,MAAM;CACjC;CAEA,OAAO;EAAE;EAAW;CAAQ;AAC9B"}
+{"version":3,"file":"useClearable.js","names":[],"sources":["../../src/composables/useClearable.ts"],"sourcesContent":["/**\n * The cross that empties a field, shared by VInput and VTextarea — and, through\n * `canClear`, the answer the fields composed on top of VInput give it.\n *\n * The two halves of it are one decision: WHEN the cross is shown, and what pressing it does.\n * They were written out in both components and had already started to drift — one asked\n * `props.disabled` where the other asked the value resolved against the row it sits in — which\n * is the kind of divergence nothing catches, the cross simply staying visible in a disabled\n * VInputGroup.\n *\n * The focus is the accessibility half and is not optional: the cross VANISHES the instant it\n * empties the field, so without that call the focus would be left on a button that no longer\n * exists and fall back to the top of the document.\n */\nimport { computed } from 'vue'\nimport type { ComputedRef, Ref } from 'vue'\n\ninterface ClearableOptions {\n  /** Whether the field offers a cross at all. */\n  clearable: () => boolean\n  /**\n   * The consumer's EXPLICIT answer to \"is there anything to clear?\", which holds even on a\n   * read-only field: the value of a read-only date or time picker changes through its panel\n   * rather than by typing. Left undefined, the field answers for itself.\n   */\n  clearVisible: () => boolean | undefined\n  /** Whether the field is unusable, the row it sits in taken into account. */\n  disabled: () => boolean\n  /** Whether the field refuses to be typed into. */\n  readonly: () => boolean\n  /** What the field currently holds, as text. */\n  text: () => string\n  /** The real control, which the focus goes back to. */\n  controlEl: Ref<{ focus: () => void } | null>\n  /** Empties the value and tells the consumer. */\n  onCleared: () => void\n}\n\n/**\n * Whether a field offers its cross: it asks for one, it can be used and changed, and it holds\n * something. The fields composed on top of VInput: VCombobox, VDateInput, VTimeInput,\n * VFileInput, hold their value somewhere other than the text, so they work out `filled`\n * themselves and hand VInput the result as `clearVisible`; the other terms are the same for\n * every field and are written here once.\n *\n * `disabled` is passed apart from the props because it is the value RESOLVED against the row\n * the field sits in, which the prop alone is not.\n */\nexport function canClear(\n  props: { clearable: boolean; readonly: boolean },\n  disabled: boolean,\n  filled: boolean,\n): boolean {\n  return props.clearable && !disabled && !props.readonly && filled\n}\n\nexport function useClearable(options: ClearableOptions): {\n  showClear: ComputedRef<boolean>\n  onClear: () => void\n} {\n  // An explicit `clearVisible` replaces the read-only and the content terms together: a\n  // composed field has already asked both through `canClear`.\n  const showClear = computed(() => {\n    if (!options.clearable() || options.disabled()) return false\n    return options.clearVisible() ?? (!options.readonly() && options.text().length > 0)\n  })\n\n  function onClear() {\n    options.onCleared()\n    options.controlEl.value?.focus()\n  }\n\n  return { showClear, onClear }\n}\n"],"mappings":";;AAgDA,SAAgB,EACd,GACA,GACA,GACS;CACT,OAAO,EAAM,aAAa,CAAC,KAAY,CAAC,EAAM,YAAY;AAC5D;AAEA,SAAgB,EAAa,GAG3B;CAGA,IAAM,IAAY,QACZ,CAAC,EAAQ,UAAU,KAAK,EAAQ,SAAS,IAAU,KAChD,EAAQ,aAAa,MAAM,CAAC,EAAQ,SAAS,KAAK,EAAQ,KAAK,CAAC,CAAC,SAAS,EAClF;CAED,SAAS,IAAU;EAEjB,AADA,EAAQ,UAAU,GAClB,EAAQ,UAAU,OAAO,MAAM;CACjC;CAEA,OAAO;EAAE;EAAW;CAAQ;AAC9B"}

package/dist/composables/useDetailsOpen.d.ts

@@ -4,9 +4,9 @@ import { Ref } from 'vue';
  * VAccordionItem and VSideNavigationItem. Bind `openAttr` to `:open`, `onToggle` to `@toggle`
  * and `onSummaryClick` to the `<summary>`'s `@click`.
  *
- * The element is the source of truth and the `v-model:open` is fed BY it. Left unbound (the
- * model's `null`), the value handed to `:open` never changes, so Vue never patches the element
- * back and the native toggling stays sovereign.
+ * The element is the source of truth and the `v-model:open` is fed BY it. Left unbound, the
+ * model follows the element, so Vue never has anything to patch back and the native toggling
+ * stays sovereign.
  *
  * `defaultOpen` is read ONCE, here, and never again: it is an initial state, so a prop changed
  * later must not close a section the reader has opened. Read inside the computed instead, a

package/dist/composables/useDetailsOpen.js

@@ -1,21 +1,23 @@
-import { computed as e } from "vue";
+import { computed as e, nextTick as t } from "vue";
 //#region src/composables/useDetailsOpen.ts
-function t(t, n) {
-	let r = n.defaultOpen(), i = e(() => (t.value ?? r) || void 0);
-	function a(e) {
-		let n = e.target.open;
-		t.value !== n && (t.value = n);
-	}
+function n(n, r) {
+	let i = r.defaultOpen(), a = e(() => (n.value ?? i) || void 0);
 	function o(e) {
-		n.disabled() && e.preventDefault();
+		let r = e.target, i = r.open;
+		n.value !== i && (n.value = i, t(() => {
+			n.value !== null && r.open !== n.value && (r.open = n.value);
+		}));
+	}
+	function s(e) {
+		r.disabled() && e.preventDefault();
 	}
 	return {
-		openAttr: i,
-		onToggle: a,
-		onSummaryClick: o
+		openAttr: a,
+		onToggle: o,
+		onSummaryClick: s
 	};
 }
 //#endregion
-export { t as useDetailsOpen };
+export { n as useDetailsOpen };
 
 //# sourceMappingURL=useDetailsOpen.js.map

package/dist/composables/useDetailsOpen.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDetailsOpen.js","names":[],"sources":["../../src/composables/useDetailsOpen.ts"],"sourcesContent":["import { computed } from 'vue'\nimport type { Ref } from 'vue'\n\n/**\n * The open state of a native `<details>`, shared by the design system's two consumers of one:\n * VAccordionItem and VSideNavigationItem. Bind `openAttr` to `:open`, `onToggle` to `@toggle`\n * and `onSummaryClick` to the `<summary>`'s `@click`.\n *\n * The element is the source of truth and the `v-model:open` is fed BY it. Left unbound (the\n * model's `null`), the value handed to `:open` never changes, so Vue never patches the element\n * back and the native toggling stays sovereign.\n *\n * `defaultOpen` is read ONCE, here, and never again: it is an initial state, so a prop changed\n * later must not close a section the reader has opened. Read inside the computed instead, a\n * parent re-rendering with another value would silently fold it.\n */\nexport function useDetailsOpen(\n  open: Ref<boolean | null>,\n  options: { defaultOpen: () => boolean; disabled: () => boolean },\n) {\n  const initial = options.defaultOpen()\n  const openAttr = computed(() => (open.value ?? initial) || undefined)\n\n  // @core\n  // The toggle event does not bubble, which is convenient: listening on the element itself\n  // cannot pick up a nested `<details>` opening inside it.\n  function onToggle(event: Event) {\n    const value = (event.target as HTMLDetailsElement).open\n    if (open.value !== value) open.value = value\n  }\n\n  // @a11y @core\n  /*\n   * A `<summary>` has no `disabled` attribute, so cancelling the click is the only way to stop\n   * a disabled section from folding. The keyboard needs nothing: the component takes the\n   * summary out of the tab order. Deliberately not `pointer-events: none`, which would also\n   * remove the forbidden cursor telling the reader why nothing happens.\n   */\n  function onSummaryClick(event: MouseEvent) {\n    if (options.disabled()) event.preventDefault()\n  }\n\n  return { openAttr, onToggle, onSummaryClick }\n}\n"],"mappings":";;AAgBA,SAAgB,EACd,GACA,GACA;CACA,IAAM,IAAU,EAAQ,YAAY,GAC9B,IAAW,SAAgB,EAAK,SAAS,MAAY,KAAA,CAAS;CAKpE,SAAS,EAAS,GAAc;EAC9B,IAAM,IAAS,EAAM,OAA8B;EACnD,AAAI,EAAK,UAAU,MAAO,EAAK,QAAQ;CACzC;CASA,SAAS,EAAe,GAAmB;EACzC,AAAI,EAAQ,SAAS,KAAG,EAAM,eAAe;CAC/C;CAEA,OAAO;EAAE;EAAU;EAAU;CAAe;AAC9C"}
+{"version":3,"file":"useDetailsOpen.js","names":[],"sources":["../../src/composables/useDetailsOpen.ts"],"sourcesContent":["import { computed, nextTick } from 'vue'\nimport type { Ref } from 'vue'\n\n/**\n * The open state of a native `<details>`, shared by the design system's two consumers of one:\n * VAccordionItem and VSideNavigationItem. Bind `openAttr` to `:open`, `onToggle` to `@toggle`\n * and `onSummaryClick` to the `<summary>`'s `@click`.\n *\n * The element is the source of truth and the `v-model:open` is fed BY it. Left unbound, the\n * model follows the element, so Vue never has anything to patch back and the native toggling\n * stays sovereign.\n *\n * `defaultOpen` is read ONCE, here, and never again: it is an initial state, so a prop changed\n * later must not close a section the reader has opened. Read inside the computed instead, a\n * parent re-rendering with another value would silently fold it.\n */\nexport function useDetailsOpen(\n  open: Ref<boolean | null>,\n  options: { defaultOpen: () => boolean; disabled: () => boolean },\n) {\n  const initial = options.defaultOpen()\n  const openAttr = computed(() => (open.value ?? initial) || undefined)\n\n  // @core\n  // The toggle event does not bubble, which is convenient: listening on the element itself\n  // cannot pick up a nested `<details>` opening inside it.\n  function onToggle(event: Event) {\n    const element = event.target as HTMLDetailsElement\n    const value = element.open\n    if (open.value === value) return\n    open.value = value\n    /*\n     * TRAP — a CONTROLLED model may refuse the change (`:open=\"false\"` and no handler, or one\n     * that says no). Nothing then moves in the props, so Vue has nothing to patch, and the\n     * element would stay open under a model that says closed. It is put back once the\n     * parent has answered.\n     */\n    void nextTick(() => {\n      if (open.value !== null && element.open !== open.value) element.open = open.value\n    })\n  }\n\n  // @a11y @core\n  /*\n   * A `<summary>` has no `disabled` attribute, so cancelling the click is the only way to stop\n   * a disabled section from folding. The keyboard needs nothing: the component takes the\n   * summary out of the tab order. Deliberately not `pointer-events: none`, which would also\n   * remove the forbidden cursor telling the reader why nothing happens.\n   */\n  function onSummaryClick(event: MouseEvent) {\n    if (options.disabled()) event.preventDefault()\n  }\n\n  return { openAttr, onToggle, onSummaryClick }\n}\n"],"mappings":";;AAgBA,SAAgB,EACd,GACA,GACA;CACA,IAAM,IAAU,EAAQ,YAAY,GAC9B,IAAW,SAAgB,EAAK,SAAS,MAAY,KAAA,CAAS;CAKpE,SAAS,EAAS,GAAc;EAC9B,IAAM,IAAU,EAAM,QAChB,IAAQ,EAAQ;EAClB,EAAK,UAAU,MACnB,EAAK,QAAQ,GAOb,QAAoB;GAClB,AAAI,EAAK,UAAU,QAAQ,EAAQ,SAAS,EAAK,UAAO,EAAQ,OAAO,EAAK;EAC9E,CAAC;CACH;CASA,SAAS,EAAe,GAAmB;EACzC,AAAI,EAAQ,SAAS,KAAG,EAAM,eAAe;CAC/C;CAEA,OAAO;EAAE;EAAU;EAAU;CAAe;AAC9C"}

package/dist/composables/useFieldIds.d.ts

@@ -1,6 +1,7 @@
 import { ComputedRef } from 'vue';
-export declare function useFieldIds(attrs: Record<string, unknown>, hasHint: () => boolean): {
+export declare function useFieldIds(attrs: Record<string, unknown>, hasHint: () => boolean, hasCounter?: () => boolean): {
     fieldId: ComputedRef<string>;
     hintId: string;
+    counterId: string;
     describedBy: ComputedRef<string | undefined>;
 };

package/dist/composables/useFieldIds.js

@@ -1,12 +1,13 @@
 import { joinIds as e } from "../utils/ids.js";
 import { computed as t, useId as n } from "vue";
 //#region src/composables/useFieldIds.ts
-function r(r, i) {
-	let a = n(), o = n();
+function r(r, i, a = () => !1) {
+	let o = n(), s = n(), c = n();
 	return {
-		fieldId: t(() => r.id ?? a),
-		hintId: o,
-		describedBy: t(() => e(r["aria-describedby"], i() && o))
+		fieldId: t(() => r.id ?? o),
+		hintId: s,
+		counterId: c,
+		describedBy: t(() => e(r["aria-describedby"], i() && s, a() && c))
 	};
 }
 //#endregion

package/dist/composables/useFieldIds.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFieldIds.js","names":[],"sources":["../../src/composables/useFieldIds.ts"],"sourcesContent":["// @a11y @ssr\n/**\n * The ids tying a wrapped field to its label and its hint — VInput and VTextarea, and the hint\n * of VCheckbox, VRadio and VSwitch.\n *\n * A consumer `id` WINS over the generated one, or a label they wrote outside the component\n * would point at nothing. `aria-describedby` is a space-separated LIST, so the component's\n * hint is APPENDED to whatever the consumer already pointed at rather than replacing it.\n *\n * Ids come from `useId()` rather than a counter of our own, which is what keeps them\n * identical across the server render and hydration.\n */\n\nimport { computed, useId, type ComputedRef } from 'vue'\n\nimport { joinIds } from '../utils/ids'\n\nexport function useFieldIds(\n  attrs: Record<string, unknown>,\n  hasHint: () => boolean,\n): { fieldId: ComputedRef<string>; hintId: string; describedBy: ComputedRef<string | undefined> } {\n  const uid = useId()\n  const hintId = useId()\n\n  return {\n    fieldId: computed(() => (attrs.id as string | undefined) ?? uid),\n    hintId,\n    describedBy: computed(() =>\n      joinIds(attrs['aria-describedby'] as string | undefined, hasHint() && hintId),\n    ),\n  }\n}\n"],"mappings":";;;AAiBA,SAAgB,EACd,GACA,GACgG;CAChG,IAAM,IAAM,EAAM,GACZ,IAAS,EAAM;CAErB,OAAO;EACL,SAAS,QAAgB,EAAM,MAA6B,CAAG;EAC/D;EACA,aAAa,QACX,EAAQ,EAAM,qBAA2C,EAAQ,KAAK,CAAM,CAC9E;CACF;AACF"}
+{"version":3,"file":"useFieldIds.js","names":[],"sources":["../../src/composables/useFieldIds.ts"],"sourcesContent":["// @a11y @ssr\n/**\n * The ids tying a wrapped field to its label, its hint and its counter — VInput and VTextarea, and the hint\n * of VCheckbox, VRadio and VSwitch.\n *\n * A consumer `id` WINS over the generated one, or a label they wrote outside the component\n * would point at nothing. `aria-describedby` is a space-separated LIST, so the component's\n * hint is APPENDED to whatever the consumer already pointed at rather than replacing it,\n * and the counter after it: a screen reader then reads \"12/80\" out on focus, where it would\n * otherwise only ever be seen.\n *\n * Ids come from `useId()` rather than a counter of our own, which is what keeps them\n * identical across the server render and hydration.\n */\n\nimport { computed, useId, type ComputedRef } from 'vue'\n\nimport { joinIds } from '../utils/ids'\n\nexport function useFieldIds(\n  attrs: Record<string, unknown>,\n  hasHint: () => boolean,\n  hasCounter: () => boolean = () => false,\n): {\n  fieldId: ComputedRef<string>\n  hintId: string\n  counterId: string\n  describedBy: ComputedRef<string | undefined>\n} {\n  const uid = useId()\n  const hintId = useId()\n  const counterId = useId()\n\n  return {\n    fieldId: computed(() => (attrs.id as string | undefined) ?? uid),\n    hintId,\n    counterId,\n    describedBy: computed(() =>\n      joinIds(\n        attrs['aria-describedby'] as string | undefined,\n        hasHint() && hintId,\n        hasCounter() && counterId,\n      ),\n    ),\n  }\n}\n"],"mappings":";;;AAmBA,SAAgB,EACd,GACA,GACA,UAAkC,IAMlC;CACA,IAAM,IAAM,EAAM,GACZ,IAAS,EAAM,GACf,IAAY,EAAM;CAExB,OAAO;EACL,SAAS,QAAgB,EAAM,MAA6B,CAAG;EAC/D;EACA;EACA,aAAa,QACX,EACE,EAAM,qBACN,EAAQ,KAAK,GACb,EAAW,KAAK,CAClB,CACF;CACF;AACF"}

package/dist/composables/useFieldPanel.d.ts

@@ -20,7 +20,7 @@ export interface UseFieldPanelOptions {
      * through it, so a component never has to repeat the condition per handler.
      */
     disabled: () => boolean;
-    /** Moves the focus INTO the open panel — where in it is the component's business. */
+    /** Moves the focus INTO the open panel: where in it is the component's business. */
     focusInPanel: () => void;
     /** What the component needs to do as the panel opens: prepare a draft, reset a step. */
     onOpen?: () => void;
@@ -42,7 +42,7 @@ export interface UseFieldPanelOptions {
  * return. This is exactly that minimum; what is particular to either component arrives
  * through `onOpen`/`onClose`.
  *
- * TRAP — the panel is WRITTEN imperatively and READ back by model. Bind `open` as
+ * TRAP: the panel is WRITTEN imperatively and READ back by model. Bind `open` as
  * `v-model:open` so the DOM feeds it, but the write must stay synchronous: the `rAF` that
  * moves focus assumes the panel is already open when it is armed, and the model would put
  * a tick in between.

package/dist/composables/useFieldPanel.js

@@ -1,59 +1,69 @@
 import { NO_BUTTON_GROUP as e, buttonGroupKey as t } from "../components/VButton/context.js";
 import { useFocusoutDismiss as n } from "./useFocusoutDismiss.js";
-import { provide as r, ref as i, useId as a } from "vue";
+import { onBeforeUnmount as r, provide as i, ref as a, useId as o, watch as s } from "vue";
 //#region src/composables/useFieldPanel.ts
-function o(o) {
-	let s = i(!1), c = () => o.openOnFocus?.() ?? !1, l = a();
-	r(t, e);
-	function u(e = !c()) {
-		o.disabled() || s.value || (o.onOpen?.(), o.panelRef.value?.show(), e && requestAnimationFrame(() => o.focusInPanel()));
-	}
-	function d() {
-		s.value && (o.panelRef.value?.close(), o.onClose?.());
-	}
-	let f = !1;
+function c(c) {
+	let l = a(!1), u = () => c.openOnFocus?.() ?? !1, d = o();
+	i(t, e);
+	let f = 0;
 	function p() {
-		f = !0, o.field.value?.focus(), f = !1;
+		f && cancelAnimationFrame(f), f = 0;
 	}
-	function m() {
-		s.value && (d(), p());
+	function m(e = !u()) {
+		c.disabled() || l.value || (c.onOpen?.(), c.panelRef.value?.show(), e && (p(), f = requestAnimationFrame(() => {
+			f = 0, c.focusInPanel();
+		})));
 	}
 	function h() {
-		f || !c() || u(!1);
+		p(), l.value && (c.panelRef.value?.close(), c.onClose?.());
+	}
+	r(p), s(c.disabled, (e) => {
+		!e || !l.value || (h(), l.value = !1);
+	});
+	let g = !1;
+	function _() {
+		g = !0, c.field.value?.focus(), g = !1;
+	}
+	function v() {
+		l.value && (h(), _());
+	}
+	function y() {
+		g || !u() || m(!1);
 	}
-	function g() {
-		s.value ? m() : u(!0);
+	function b() {
+		l.value ? v() : m(!0);
 	}
-	function _(e) {
-		e.target.closest(".v-input-action") || u();
+	let x = (e) => !!e.target?.closest?.("button, a[href]");
+	function S(e) {
+		x(e) || m();
 	}
-	let v = n(o.rootEl, d);
-	function y(e) {
+	let C = n(c.rootEl, h);
+	function w(e) {
 		e.target?.closest("button, a, input, select, textarea, [tabindex]") || e.preventDefault();
 	}
-	function b(e) {
+	function T(e) {
 		if (e.key === "Escape") {
-			s.value && (e.preventDefault(), m());
+			l.value && (e.preventDefault(), v());
 			return;
 		}
-		(e.key === "ArrowDown" || e.key === "Enter") && !s.value && !e.defaultPrevented && (e.preventDefault(), u(!0));
+		(e.key === "ArrowDown" || e.key === "Enter") && !l.value && !e.defaultPrevented && !x(e) && (e.preventDefault(), m(!0));
 	}
 	return {
-		open: s,
-		panelId: l,
-		openPanel: u,
-		closePanel: d,
-		closeAndFocus: m,
-		focusField: p,
-		onFieldFocus: h,
-		toggleFromIcon: g,
-		onControlClick: _,
-		onFocusout: v,
-		onKeydown: b,
-		onPanelMousedown: y
+		open: l,
+		panelId: d,
+		openPanel: m,
+		closePanel: h,
+		closeAndFocus: v,
+		focusField: _,
+		onFieldFocus: y,
+		toggleFromIcon: b,
+		onControlClick: S,
+		onFocusout: C,
+		onKeydown: T,
+		onPanelMousedown: w
 	};
 }
 //#endregion
-export { o as useFieldPanel };
+export { c as useFieldPanel };
 
 //# sourceMappingURL=useFieldPanel.js.map

package/dist/composables/useFieldPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFieldPanel.js","names":[],"sources":["../../src/composables/useFieldPanel.ts"],"sourcesContent":["import { provide, ref, useId } from 'vue'\nimport type { Ref } from 'vue'\n\nimport { NO_BUTTON_GROUP, buttonGroupKey } from '../components/VButton/context'\nimport { useFocusoutDismiss } from './useFocusoutDismiss'\n\n/** The least this needs of the field: something it can put the focus back on. */\ninterface FocusableField {\n  focus: () => void\n}\n\n/** The least this needs of the panel: something it can open and close. */\ninterface PanelControl {\n  show: () => void\n  close: () => void\n}\n\nexport interface UseFieldPanelOptions {\n  /** The component's root, against which \"the focus has left\" is judged. */\n  rootEl: Ref<HTMLElement | null>\n  /** The panel to open and close. */\n  panelRef: Ref<PanelControl | null>\n  /** The field the focus returns to. */\n  field: Ref<FocusableField | null>\n  /**\n   * Whether opening is refused. It is the SINGLE cut-off point: every route in passes\n   * through it, so a component never has to repeat the condition per handler.\n   */\n  disabled: () => boolean\n  /** Moves the focus INTO the open panel — where in it is the component's business. */\n  focusInPanel: () => void\n  /** What the component needs to do as the panel opens: prepare a draft, reset a step. */\n  onOpen?: () => void\n  /** What it needs to do as the panel closes: clear an announcement, for instance. */\n  onClose?: () => void\n  /**\n   * Whether focusing the field opens the panel. It does not by default.\n   *\n   * A field one TYPES into says yes, and its panel then opens WITHOUT taking the caret, so\n   * typing carries on and the down arrow remains the one explicit way in. A click on such a\n   * field leaves the focus where it is for the same reason.\n   */\n  openOnFocus?: () => boolean\n}\n\n// @a11y @keyboard @core\n/**\n * The \"field + `VPopover` in `mode=\"manual\"`\" shell of VDateInput and VTimeInput.\n *\n * A `manual` popover does nothing on its own: no light dismiss, no focus move, no focus\n * return. This is exactly that minimum; what is particular to either component arrives\n * through `onOpen`/`onClose`.\n *\n * TRAP — the panel is WRITTEN imperatively and READ back by model. Bind `open` as\n * `v-model:open` so the DOM feeds it, but the write must stay synchronous: the `rAF` that\n * moves focus assumes the panel is already open when it is armed, and the model would put\n * a tick in between.\n */\nexport function useFieldPanel(options: UseFieldPanelOptions) {\n  const open = ref(false)\n  const openOnFocus = () => options.openOnFocus?.() ?? false\n\n  /** The id the panel carries, for the field's `aria-controls`. */\n  const panelId = useId()\n\n  // @core\n  // TRAP — this stops a VButtonGroup's or a VInputGroup's row context at the field's\n  // boundary. The picker in the panel sizes its own buttons — VDatePicker writes `size=\"sm\"`\n  // on its navigation, VTimePicker `size=\"lg\"` on its hour and minute cells — and a group\n  // WINS over a button's prop: without this line a VInputGroup would resize them to its own\n  // height, which only shows once the panel is open and nothing in the sheet or the template\n  // would say why. It is the JS counterpart of the `.v-overlay` guard every VButtonGroup\n  // selector carries — a floating panel is not a segment of the row that opened it.\n  provide(buttonGroupKey, NO_BUTTON_GROUP)\n\n  function openPanel(moveFocus = !openOnFocus()) {\n    if (options.disabled() || open.value) return\n    options.onOpen?.()\n    options.panelRef.value?.show()\n    // @a11y\n    // A `manual` popover moves focus nowhere, so it is moved by hand — a frame later,\n    // the panel not being painted yet, and nothing invisible can take focus.\n    if (moveFocus) requestAnimationFrame(() => options.focusInPanel())\n  }\n\n  /** Closes the panel and leaves the focus where it is: the focus has already gone elsewhere. */\n  function closePanel() {\n    if (!open.value) return\n    options.panelRef.value?.close()\n    options.onClose?.()\n  }\n\n  // @a11y\n  /*\n   * TRAP — handing the focus back to the field is what makes a field that opens ON FOCUS\n   * reopen the panel that was just closed: the two would chase each other and the panel\n   * would never close. The lock covers the focus call, which is synchronous.\n   *\n   * EVERY focus this shell or a component gives the field must go through `focusField`,\n   * `closeAndFocus` included. Focusing the field directly brings the loop straight back.\n   */\n  let refocusing = false\n\n  /**\n   * Puts the focus on the field without opening the panel.\n   *\n   * A component emptying its value calls it BEFORE the field focuses itself, and that order\n   * is the point: focusing an element that already has the focus emits no event at all, so\n   * the field's own call that follows is inert and the panel stays shut.\n   */\n  function focusField() {\n    refocusing = true\n    options.field.value?.focus()\n    refocusing = false\n  }\n\n  /** Closes the panel and hands the focus back to the field, under the lock above. */\n  function closeAndFocus() {\n    if (!open.value) return\n    closePanel()\n    focusField()\n  }\n\n  /** The field's focus handler: opens the panel on a field that asks for it. */\n  function onFieldFocus() {\n    if (refocusing || !openOnFocus()) return\n    openPanel(false)\n  }\n\n  /**\n   * The icon at the end of the field. Clicking it is an explicit request for the panel, and\n   * the focus has already left the field for the button — so carrying it into the panel is\n   * right whatever `openOnFocus` says.\n   */\n  function toggleFromIcon() {\n    if (open.value) closeAndFocus()\n    else openPanel(true)\n  }\n\n  function onControlClick(event: MouseEvent) {\n    // A click on one of the field's own buttons is that button's business: reacting here\n    // too would open the panel the clear cross has just given a reason to close.\n    if ((event.target as HTMLElement).closest('.v-input-action')) return\n    openPanel()\n  }\n\n  // @a11y\n  const onFocusout = useFocusoutDismiss(options.rootEl, closePanel)\n\n  // @a11y\n  /*\n   * TRAP — clicking a non-focusable pixel of the panel (padding, the gutter between cells)\n   * hands focus back to `<body>`. `onFocusout` above then fires with a null `relatedTarget`,\n   * reads it as an exit — rightly — and closes a panel the reader has just clicked.\n   *\n   * The filter is essential: VCombobox's unconditional `preventDefault` is safe there\n   * because focus never leaves its field, but here it would rob the days and the navigation\n   * arrows of focus and desynchronize VDatePicker's roving.\n   *\n   * Invisible in jsdom, where clicking moves no focus — the `ClicDansLeVide` play functions\n   * of both components cover it.\n   */\n  function onPanelMousedown(event: MouseEvent) {\n    const target = event.target as HTMLElement | null\n    if (!target?.closest('button, a, input, select, textarea, [tabindex]')) event.preventDefault()\n  }\n\n  // @keyboard @a11y\n  function onKeydown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      if (open.value) {\n        event.preventDefault()\n        closeAndFocus()\n      }\n      return\n    }\n    // TRAP — a key already consumed INSIDE the panel is ignored. An Enter that selected a\n    // day has just CLOSED the panel, and without the guard would reopen it as it bubbles.\n    if (\n      (event.key === 'ArrowDown' || event.key === 'Enter') &&\n      !open.value &&\n      !event.defaultPrevented\n    ) {\n      event.preventDefault()\n      // Opened from the KEYBOARD the panel always takes focus, whatever `openOnFocus` says:\n      // otherwise ArrowDown opens a panel the keyboard cannot reach.\n      openPanel(true)\n    }\n  }\n\n  return {\n    open,\n    panelId,\n    openPanel,\n    closePanel,\n    closeAndFocus,\n    focusField,\n    onFieldFocus,\n    toggleFromIcon,\n    onControlClick,\n    onFocusout,\n    onKeydown,\n    onPanelMousedown,\n  }\n}\n"],"mappings":";;;;AA0DA,SAAgB,EAAc,GAA+B;CAC3D,IAAM,IAAO,EAAI,EAAK,GAChB,UAAoB,EAAQ,cAAc,KAAK,IAG/C,IAAU,EAAM;CAUtB,EAAQ,GAAgB,CAAe;CAEvC,SAAS,EAAU,IAAY,CAAC,EAAY,GAAG;EACzC,EAAQ,SAAS,KAAK,EAAK,UAC/B,EAAQ,SAAS,GACjB,EAAQ,SAAS,OAAO,KAAK,GAIzB,KAAW,4BAA4B,EAAQ,aAAa,CAAC;CACnE;CAGA,SAAS,IAAa;EACf,EAAK,UACV,EAAQ,SAAS,OAAO,MAAM,GAC9B,EAAQ,UAAU;CACpB;CAWA,IAAI,IAAa;CASjB,SAAS,IAAa;EAGpB,AAFA,IAAa,IACb,EAAQ,MAAM,OAAO,MAAM,GAC3B,IAAa;CACf;CAGA,SAAS,IAAgB;EAClB,EAAK,UACV,EAAW,GACX,EAAW;CACb;CAGA,SAAS,IAAe;EAClB,KAAc,CAAC,EAAY,KAC/B,EAAU,EAAK;CACjB;CAOA,SAAS,IAAiB;EACxB,AAAI,EAAK,QAAO,EAAc,IACzB,EAAU,EAAI;CACrB;CAEA,SAAS,EAAe,GAAmB;EAGpC,EAAM,OAAuB,QAAQ,iBAAiB,KAC3D,EAAU;CACZ;CAGA,IAAM,IAAa,EAAmB,EAAQ,QAAQ,CAAU;CAehE,SAAS,EAAiB,GAAmB;EAE3C,AADe,EAAM,QACR,QAAQ,gDAAgD,KAAG,EAAM,eAAe;CAC/F;CAGA,SAAS,EAAU,GAAsB;EACvC,IAAI,EAAM,QAAQ,UAAU;GAC1B,AAAI,EAAK,UACP,EAAM,eAAe,GACrB,EAAc;GAEhB;EACF;EAGA,CACG,EAAM,QAAQ,eAAe,EAAM,QAAQ,YAC5C,CAAC,EAAK,SACN,CAAC,EAAM,qBAEP,EAAM,eAAe,GAGrB,EAAU,EAAI;CAElB;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"useFieldPanel.js","names":[],"sources":["../../src/composables/useFieldPanel.ts"],"sourcesContent":["import { onBeforeUnmount, provide, ref, useId, watch } from 'vue'\nimport type { Ref } from 'vue'\n\nimport { NO_BUTTON_GROUP, buttonGroupKey } from '../components/VButton/context'\nimport { useFocusoutDismiss } from './useFocusoutDismiss'\n\n/** The least this needs of the field: something it can put the focus back on. */\ninterface FocusableField {\n  focus: () => void\n}\n\n/** The least this needs of the panel: something it can open and close. */\ninterface PanelControl {\n  show: () => void\n  close: () => void\n}\n\nexport interface UseFieldPanelOptions {\n  /** The component's root, against which \"the focus has left\" is judged. */\n  rootEl: Ref<HTMLElement | null>\n  /** The panel to open and close. */\n  panelRef: Ref<PanelControl | null>\n  /** The field the focus returns to. */\n  field: Ref<FocusableField | null>\n  /**\n   * Whether opening is refused. It is the SINGLE cut-off point: every route in passes\n   * through it, so a component never has to repeat the condition per handler.\n   */\n  disabled: () => boolean\n  /** Moves the focus INTO the open panel: where in it is the component's business. */\n  focusInPanel: () => void\n  /** What the component needs to do as the panel opens: prepare a draft, reset a step. */\n  onOpen?: () => void\n  /** What it needs to do as the panel closes: clear an announcement, for instance. */\n  onClose?: () => void\n  /**\n   * Whether focusing the field opens the panel. It does not by default.\n   *\n   * A field one TYPES into says yes, and its panel then opens WITHOUT taking the caret, so\n   * typing carries on and the down arrow remains the one explicit way in. A click on such a\n   * field leaves the focus where it is for the same reason.\n   */\n  openOnFocus?: () => boolean\n}\n\n// @a11y @keyboard @core\n/**\n * The \"field + `VPopover` in `mode=\"manual\"`\" shell of VDateInput and VTimeInput.\n *\n * A `manual` popover does nothing on its own: no light dismiss, no focus move, no focus\n * return. This is exactly that minimum; what is particular to either component arrives\n * through `onOpen`/`onClose`.\n *\n * TRAP: the panel is WRITTEN imperatively and READ back by model. Bind `open` as\n * `v-model:open` so the DOM feeds it, but the write must stay synchronous: the `rAF` that\n * moves focus assumes the panel is already open when it is armed, and the model would put\n * a tick in between.\n */\nexport function useFieldPanel(options: UseFieldPanelOptions) {\n  const open = ref(false)\n  const openOnFocus = () => options.openOnFocus?.() ?? false\n\n  /** The id the panel carries, for the field's `aria-controls`. */\n  const panelId = useId()\n\n  // @core\n  // TRAP — this stops a VButtonGroup's or a VInputGroup's row context at the field's\n  // boundary. The picker in the panel sizes its own buttons — VDatePicker writes `size=\"sm\"`\n  // on its navigation, VTimePicker `size=\"lg\"` on its hour and minute cells — and a group\n  // WINS over a button's prop: without this line a VInputGroup would resize them to its own\n  // height, which only shows once the panel is open and nothing in the sheet or the template\n  // would say why. It is the JS counterpart of the `.v-overlay` guard every VButtonGroup\n  // selector carries — a floating panel is not a segment of the row that opened it.\n  provide(buttonGroupKey, NO_BUTTON_GROUP)\n\n  /*\n   * The frame the focus is moved in, kept so it can be called off. A panel closed inside that\n   * frame (Escape at once, the field disabled, a consumer closing it) would otherwise have the\n   * focus pulled into it once shut, taken from the field it had just been handed back to.\n   */\n  let focusFrame = 0\n\n  function cancelFocusFrame() {\n    if (focusFrame) cancelAnimationFrame(focusFrame)\n    focusFrame = 0\n  }\n\n  function openPanel(moveFocus = !openOnFocus()) {\n    if (options.disabled() || open.value) return\n    options.onOpen?.()\n    options.panelRef.value?.show()\n    // @a11y\n    // A `manual` popover moves focus nowhere, so it is moved by hand — a frame later,\n    // the panel not being painted yet, and nothing invisible can take focus.\n    if (moveFocus) {\n      cancelFocusFrame()\n      focusFrame = requestAnimationFrame(() => {\n        focusFrame = 0\n        options.focusInPanel()\n      })\n    }\n  }\n\n  /** Closes the panel and leaves the focus where it is: the focus has already gone elsewhere. */\n  function closePanel() {\n    cancelFocusFrame()\n    if (!open.value) return\n    options.panelRef.value?.close()\n    options.onClose?.()\n  }\n\n  onBeforeUnmount(cancelFocusFrame)\n\n  // @core\n  // TRAP — a panel refused WHILE it is open (the field turned read-only or disabled, the\n  // picker switched off) is unmounted by its `v-if`, and an unmounted popover sends no\n  // `toggle` to bring `open` back down. The model then stays true, and the next time the\n  // panel is mounted VPopover's mount replay shows it again with nobody having asked.\n  watch(options.disabled, (refused) => {\n    if (!refused || !open.value) return\n    closePanel()\n    open.value = false\n  })\n\n  // @a11y\n  /*\n   * TRAP — handing the focus back to the field is what makes a field that opens ON FOCUS\n   * reopen the panel that was just closed: the two would chase each other and the panel\n   * would never close. The lock covers the focus call, which is synchronous.\n   *\n   * EVERY focus this shell or a component gives the field must go through `focusField`,\n   * `closeAndFocus` included. Focusing the field directly brings the loop straight back.\n   */\n  let refocusing = false\n\n  /**\n   * Puts the focus on the field without opening the panel.\n   *\n   * A component emptying its value calls it BEFORE the field focuses itself, and that order\n   * is the point: focusing an element that already has the focus emits no event at all, so\n   * the field's own call that follows is inert and the panel stays shut.\n   */\n  function focusField() {\n    refocusing = true\n    options.field.value?.focus()\n    refocusing = false\n  }\n\n  /** Closes the panel and hands the focus back to the field, under the lock above. */\n  function closeAndFocus() {\n    if (!open.value) return\n    closePanel()\n    focusField()\n  }\n\n  /** The field's focus handler: opens the panel on a field that asks for it. */\n  function onFieldFocus() {\n    if (refocusing || !openOnFocus()) return\n    openPanel(false)\n  }\n\n  /**\n   * The icon at the end of the field. Clicking it is an explicit request for the panel, and\n   * the focus has already left the field for the button — so carrying it into the panel is\n   * right whatever `openOnFocus` says.\n   */\n  function toggleFromIcon() {\n    if (open.value) closeAndFocus()\n    else openPanel(true)\n  }\n\n  /**\n   * Whether an event started on one of the controls the field holds: the clear cross, the\n   * AM/PM word, a clickable icon, or a button of the consumer's own in a slot. What happens\n   * there is that control's business, for the pointer and the keyboard alike.\n   */\n  const fromOwnControl = (event: Event) =>\n    !!(event.target as HTMLElement | null)?.closest?.('button, a[href]')\n\n  function onControlClick(event: MouseEvent) {\n    // Reacting here too would open the panel the clear cross has just given a reason to close.\n    if (fromOwnControl(event)) return\n    openPanel()\n  }\n\n  // @a11y\n  const onFocusout = useFocusoutDismiss(options.rootEl, closePanel)\n\n  // @a11y\n  /*\n   * TRAP — clicking a non-focusable pixel of the panel (padding, the gutter between cells)\n   * hands focus back to `<body>`. `onFocusout` above then fires with a null `relatedTarget`,\n   * reads it as an exit — rightly — and closes a panel the reader has just clicked.\n   *\n   * The filter is essential: VCombobox's unconditional `preventDefault` is safe there\n   * because focus never leaves its field, but here it would rob the days and the navigation\n   * arrows of focus and desynchronize VDatePicker's roving.\n   *\n   * Invisible in jsdom, where clicking moves no focus — the `ClicDansLeVide` play functions\n   * of both components cover it.\n   */\n  function onPanelMousedown(event: MouseEvent) {\n    const target = event.target as HTMLElement | null\n    if (!target?.closest('button, a, input, select, textarea, [tabindex]')) event.preventDefault()\n  }\n\n  // @keyboard @a11y\n  function onKeydown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      if (open.value) {\n        event.preventDefault()\n        closeAndFocus()\n      }\n      return\n    }\n    // TRAP — a key already consumed INSIDE the panel is ignored. An Enter that selected a\n    // day has just CLOSED the panel, and without the guard would reopen it as it bubbles.\n    // TRAP — the same goes for a key typed on one of the field's own buttons. Its Enter is\n    // what becomes the click that clears the field or flips the half of the day: cancelled\n    // here to open the panel, the button would never be pressed from the keyboard at all.\n    if (\n      (event.key === 'ArrowDown' || event.key === 'Enter') &&\n      !open.value &&\n      !event.defaultPrevented &&\n      !fromOwnControl(event)\n    ) {\n      event.preventDefault()\n      // Opened from the KEYBOARD the panel always takes focus, whatever `openOnFocus` says:\n      // otherwise ArrowDown opens a panel the keyboard cannot reach.\n      openPanel(true)\n    }\n  }\n\n  return {\n    open,\n    panelId,\n    openPanel,\n    closePanel,\n    closeAndFocus,\n    focusField,\n    onFieldFocus,\n    toggleFromIcon,\n    onControlClick,\n    onFocusout,\n    onKeydown,\n    onPanelMousedown,\n  }\n}\n"],"mappings":";;;;AA0DA,SAAgB,EAAc,GAA+B;CAC3D,IAAM,IAAO,EAAI,EAAK,GAChB,UAAoB,EAAQ,cAAc,KAAK,IAG/C,IAAU,EAAM;CAUtB,EAAQ,GAAgB,CAAe;CAOvC,IAAI,IAAa;CAEjB,SAAS,IAAmB;EAE1B,AADI,KAAY,qBAAqB,CAAU,GAC/C,IAAa;CACf;CAEA,SAAS,EAAU,IAAY,CAAC,EAAY,GAAG;EACzC,EAAQ,SAAS,KAAK,EAAK,UAC/B,EAAQ,SAAS,GACjB,EAAQ,SAAS,OAAO,KAAK,GAIzB,MACF,EAAiB,GACjB,IAAa,4BAA4B;GAEvC,AADA,IAAa,GACb,EAAQ,aAAa;EACvB,CAAC;CAEL;CAGA,SAAS,IAAa;EACpB,EAAiB,GACZ,EAAK,UACV,EAAQ,SAAS,OAAO,MAAM,GAC9B,EAAQ,UAAU;CACpB;CASA,AAPA,EAAgB,CAAgB,GAOhC,EAAM,EAAQ,WAAW,MAAY;EAC/B,CAAC,KAAW,CAAC,EAAK,UACtB,EAAW,GACX,EAAK,QAAQ;CACf,CAAC;CAWD,IAAI,IAAa;CASjB,SAAS,IAAa;EAGpB,AAFA,IAAa,IACb,EAAQ,MAAM,OAAO,MAAM,GAC3B,IAAa;CACf;CAGA,SAAS,IAAgB;EAClB,EAAK,UACV,EAAW,GACX,EAAW;CACb;CAGA,SAAS,IAAe;EAClB,KAAc,CAAC,EAAY,KAC/B,EAAU,EAAK;CACjB;CAOA,SAAS,IAAiB;EACxB,AAAI,EAAK,QAAO,EAAc,IACzB,EAAU,EAAI;CACrB;CAOA,IAAM,KAAkB,MACtB,CAAC,CAAE,EAAM,QAA+B,UAAU,iBAAiB;CAErE,SAAS,EAAe,GAAmB;EAErC,EAAe,CAAK,KACxB,EAAU;CACZ;CAGA,IAAM,IAAa,EAAmB,EAAQ,QAAQ,CAAU;CAehE,SAAS,EAAiB,GAAmB;EAE3C,AADe,EAAM,QACR,QAAQ,gDAAgD,KAAG,EAAM,eAAe;CAC/F;CAGA,SAAS,EAAU,GAAsB;EACvC,IAAI,EAAM,QAAQ,UAAU;GAC1B,AAAI,EAAK,UACP,EAAM,eAAe,GACrB,EAAc;GAEhB;EACF;EAMA,CACG,EAAM,QAAQ,eAAe,EAAM,QAAQ,YAC5C,CAAC,EAAK,SACN,CAAC,EAAM,oBACP,CAAC,EAAe,CAAK,MAErB,EAAM,eAAe,GAGrB,EAAU,EAAI;CAElB;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}

package/dist/composables/useFileDrop.js

@@ -9,13 +9,13 @@ function n(n, r) {
 		n() && (e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "copy"));
 	}
 	function s() {
-		n() && (i.value = Math.max(0, i.value - 1));
+		i.value = Math.max(0, i.value - 1);
 	}
 	function c(e) {
-		n() && (e.preventDefault(), i.value = 0, r([...e.dataTransfer?.files ?? []]));
+		i.value = 0, n() && (e.preventDefault(), r([...e.dataTransfer?.files ?? []]));
 	}
 	return {
-		dragging: e(() => i.value > 0),
+		dragging: e(() => i.value > 0 && n()),
 		onDragEnter: a,
 		onDragOver: o,
 		onDragLeave: s,

package/dist/composables/useFileDrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFileDrop.js","names":[],"sources":["../../src/composables/useFileDrop.ts"],"sourcesContent":["// @core\n/**\n * The drop-target plumbing of VFileInput and VFilePicker. It exists once rather than twice\n * because of the two traps it carries.\n *\n * `dragover` MUST `preventDefault`, or the browser refuses the drop and then NAVIGATES to\n * the file, replacing the page.\n *\n * And the state is a depth COUNTER, never a boolean: `dragleave` fires every time the\n * pointer crosses into a child, so a flag would flicker off under the cursor. `drop` forces\n * the depth back to 0 — a drag leaving the window never sends the matching `dragleave`, and\n * `currentTarget.contains(relatedTarget)`, the other classic fix, is useless there since\n * `relatedTarget` is null in exactly that case.\n *\n * `enabled` is a getter, read at event time, so a component disabled mid-drag stops\n * accepting with nothing re-bound.\n */\n\nimport { computed, ref, type ComputedRef } from 'vue'\n\nexport function useFileDrop(\n  enabled: () => boolean,\n  onFiles: (files: File[]) => void,\n): {\n  dragging: ComputedRef<boolean>\n  onDragEnter: (event: DragEvent) => void\n  onDragOver: (event: DragEvent) => void\n  onDragLeave: () => void\n  onDrop: (event: DragEvent) => void\n} {\n  const depth = ref(0)\n\n  function onDragEnter(event: DragEvent) {\n    if (!enabled()) return\n    event.preventDefault()\n    depth.value += 1\n  }\n\n  function onDragOver(event: DragEvent) {\n    if (!enabled()) return\n    event.preventDefault()\n    if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy'\n  }\n\n  function onDragLeave() {\n    if (!enabled()) return\n    depth.value = Math.max(0, depth.value - 1)\n  }\n\n  function onDrop(event: DragEvent) {\n    if (!enabled()) return\n    event.preventDefault()\n    depth.value = 0\n    onFiles([...(event.dataTransfer?.files ?? [])])\n  }\n\n  return {\n    dragging: computed(() => depth.value > 0),\n    onDragEnter,\n    onDragOver,\n    onDragLeave,\n    onDrop,\n  }\n}\n"],"mappings":";;AAoBA,SAAgB,EACd,GACA,GAOA;CACA,IAAM,IAAQ,EAAI,CAAC;CAEnB,SAAS,EAAY,GAAkB;EAChC,EAAQ,MACb,EAAM,eAAe,GACrB,EAAM,SAAS;CACjB;CAEA,SAAS,EAAW,GAAkB;EAC/B,EAAQ,MACb,EAAM,eAAe,GACjB,EAAM,iBAAc,EAAM,aAAa,aAAa;CAC1D;CAEA,SAAS,IAAc;EAChB,EAAQ,MACb,EAAM,QAAQ,KAAK,IAAI,GAAG,EAAM,QAAQ,CAAC;CAC3C;CAEA,SAAS,EAAO,GAAkB;EAC3B,EAAQ,MACb,EAAM,eAAe,GACrB,EAAM,QAAQ,GACd,EAAQ,CAAC,GAAI,EAAM,cAAc,SAAS,CAAC,CAAE,CAAC;CAChD;CAEA,OAAO;EACL,UAAU,QAAe,EAAM,QAAQ,CAAC;EACxC;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"useFileDrop.js","names":[],"sources":["../../src/composables/useFileDrop.ts"],"sourcesContent":["// @core\n/**\n * The drop-target plumbing of VFileInput and VFilePicker. It exists once rather than twice\n * because of the two traps it carries.\n *\n * `dragover` MUST `preventDefault`, or the browser refuses the drop and then NAVIGATES to\n * the file, replacing the page.\n *\n * And the state is a depth COUNTER, never a boolean: `dragleave` fires every time the\n * pointer crosses into a child, so a flag would flicker off under the cursor. `drop` forces\n * the depth back to 0 — a drag leaving the window never sends the matching `dragleave`, and\n * `currentTarget.contains(relatedTarget)`, the other classic fix, is useless there since\n * `relatedTarget` is null in exactly that case.\n *\n * `enabled` is a getter, read at event time, so a component disabled mid-drag stops\n * accepting with nothing re-bound.\n */\n\nimport { computed, ref, type ComputedRef } from 'vue'\n\nexport function useFileDrop(\n  enabled: () => boolean,\n  onFiles: (files: File[]) => void,\n): {\n  dragging: ComputedRef<boolean>\n  onDragEnter: (event: DragEvent) => void\n  onDragOver: (event: DragEvent) => void\n  onDragLeave: () => void\n  onDrop: (event: DragEvent) => void\n} {\n  const depth = ref(0)\n\n  function onDragEnter(event: DragEvent) {\n    if (!enabled()) return\n    event.preventDefault()\n    depth.value += 1\n  }\n\n  function onDragOver(event: DragEvent) {\n    if (!enabled()) return\n    event.preventDefault()\n    if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy'\n  }\n\n  // TRAP — the depth comes back down whether or not files are accepted: a component\n  // disabled mid-drag that ignored the leave would keep counting one enter too many, and\n  // show the highlight again, for good, the day it was switched back on.\n  function onDragLeave() {\n    depth.value = Math.max(0, depth.value - 1)\n  }\n\n  function onDrop(event: DragEvent) {\n    depth.value = 0\n    if (!enabled()) return\n    event.preventDefault()\n    onFiles([...(event.dataTransfer?.files ?? [])])\n  }\n\n  return {\n    // Read against `enabled` too, so switching the component off drops the highlight at once.\n    dragging: computed(() => depth.value > 0 && enabled()),\n    onDragEnter,\n    onDragOver,\n    onDragLeave,\n    onDrop,\n  }\n}\n"],"mappings":";;AAoBA,SAAgB,EACd,GACA,GAOA;CACA,IAAM,IAAQ,EAAI,CAAC;CAEnB,SAAS,EAAY,GAAkB;EAChC,EAAQ,MACb,EAAM,eAAe,GACrB,EAAM,SAAS;CACjB;CAEA,SAAS,EAAW,GAAkB;EAC/B,EAAQ,MACb,EAAM,eAAe,GACjB,EAAM,iBAAc,EAAM,aAAa,aAAa;CAC1D;CAKA,SAAS,IAAc;EACrB,EAAM,QAAQ,KAAK,IAAI,GAAG,EAAM,QAAQ,CAAC;CAC3C;CAEA,SAAS,EAAO,GAAkB;EAChC,EAAM,QAAQ,GACT,EAAQ,MACb,EAAM,eAAe,GACrB,EAAQ,CAAC,GAAI,EAAM,cAAc,SAAS,CAAC,CAAE,CAAC;CAChD;CAEA,OAAO;EAEL,UAAU,QAAe,EAAM,QAAQ,KAAK,EAAQ,CAAC;EACrD;EACA;EACA;EACA;CACF;AACF"}

package/dist/composables/useFileField.d.ts

@@ -17,7 +17,7 @@ export interface FileFieldEmit {
     (event: 'remove', file: File, index: number): void;
 }
 export interface FileFieldOptions {
-    /** The component's value — always a list of files, whether one or several are allowed. */
+    /** The component's value: always a list of files, whether one or several are allowed. */
     model: Ref<File[]>;
     props: FileFieldProps;
     emit: FileFieldEmit;