vectis-ui 0.14.0 → 0.16.0

package/dist/components/VDrawer/VDrawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"VDrawer.js","names":[],"sources":["../../../src/components/VDrawer/VDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * A native modal `<dialog>` pinned to one edge of the viewport, its model bridged by\n * useModalDialog. It stays rendered through its exit, so it slides out as it slid in.\n */\n\nimport { computed, useId } from 'vue'\n\nimport type { DialogTriggerProps } from '../VDialog/VDialog.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport VTypography from '../VTypography/VTypography.vue'\nimport { useModalDialog } from '../../composables/useModalDialog'\nimport { useMessages } from '../../i18n/state'\nimport { cssSize } from '../../utils/css'\n\n/** The edge the drawer comes from. `start` and `end` follow the writing direction. */\nexport type DrawerSide = 'start' | 'end' | 'top' | 'bottom'\n\n/** The width of a drawer on a side, or the height of one at the top or bottom. */\nexport type DrawerSize = 'sm' | 'md' | 'lg'\n\ninterface DrawerProps {\n  /**\n   * The title of the drawer, which also names it for assistive technology. It is ignored when\n   * the `#header` slot replaces the whole header.\n   */\n  title?: string\n  /** A line under the title. */\n  subtitle?: string\n  /** The edge the drawer comes from. `start` and `end` follow the writing direction. */\n  side?: DrawerSide\n  /**\n   * How far the drawer reaches into the page: its width on a side, its height at the top or\n   * bottom. Each step reads a `--vectis-control-size-drawer-*` token.\n   */\n  size?: DrawerSize\n  /**\n   * A length replacing `size`: a number is read as pixels, a string as any CSS length. The\n   * drawer always leaves a strip of the page uncovered, which a click closes it through.\n   */\n  extent?: number | string\n  /**\n   * Takes the close cross out of the header, leaving the reader with Escape, the backdrop and\n   * whatever the footer offers.\n   */\n  hideClose?: boolean\n  /** Stops a click outside the drawer from closing it. */\n  persistentBackdrop?: boolean\n  /**\n   * Stops the Escape key from closing the drawer. Refusing Escape while the backdrop still\n   * closes cannot be expressed natively, so both routes are then allowed.\n   */\n  persistentEscape?: boolean\n  /** What the close cross does, in words. It falls back to the design system dictionary. */\n  closeLabel?: string\n}\n\nconst props = withDefaults(defineProps<DrawerProps>(), {\n  title: undefined,\n  subtitle: undefined,\n  side: 'end',\n  size: 'md',\n  extent: undefined,\n  hideClose: false,\n  persistentBackdrop: false,\n  persistentEscape: false,\n  closeLabel: undefined,\n})\n\nconst m = useMessages()\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? m.value.common.close)\n\n/** Whether the drawer is showing. */\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /** The body of the drawer. This is the part that scrolls when there is too much of it. */\n  default(): unknown\n  /** Replaces the title and subtitle block with content of your own. */\n  header?(): unknown\n  /** Extra controls in the header, placed before the close cross. */\n  'header-actions'?(): unknown\n  /** The buttons at the foot of the drawer. */\n  footer?(): unknown\n  /**\n   * The button that opens the drawer. Bind the `triggerProps` it receives onto it. It stays\n   * rendered always, unlike the drawer itself.\n   */\n  trigger?(props: { triggerProps: DialogTriggerProps }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst titleId = useId()\nconst subtitleId = useId()\n\nconst {\n  dialogEl,\n  rendered,\n  rootAttrs,\n  show,\n  close,\n  onClose,\n  onCancel,\n  onPointerdown,\n  onBackdropClick,\n} = useModalDialog(open, {\n  persistentBackdrop: () => props.persistentBackdrop,\n  persistentEscape: () => props.persistentEscape,\n  exitTransition: true,\n})\n\nconst triggerProps = computed<DialogTriggerProps>(() => ({\n  onClick: show,\n  'aria-haspopup': 'dialog',\n}))\n\ndefineExpose({\n  /**\n   * Opens the drawer, exactly as setting `open` does. The opening lands on the next tick: the\n   * promise returned settles once the drawer is showing.\n   */\n  show,\n  /**\n   * Closes the drawer. It closes unconditionally, `persistentEscape` and `persistentBackdrop`\n   * governing only the two routes the reader can take.\n   */\n  close,\n  /**\n   * The `<dialog>` element. It is null while closed, once its exit has played: each opening\n   * from there builds a fresh one.\n   */\n  el: dialogEl,\n})\n</script>\n\n<template>\n  <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n  <dialog\n    v-if=\"rendered\"\n    ref=\"dialogEl\"\n    :aria-labelledby=\"title ? titleId : undefined\"\n    :aria-describedby=\"subtitle ? subtitleId : undefined\"\n    v-bind=\"rootAttrs\"\n    class=\"v-drawer\"\n    :data-side=\"side\"\n    :data-size=\"size\"\n    :style=\"{ '--drawer-extent': cssSize(extent) }\"\n    @close=\"onClose\"\n    @cancel=\"onCancel\"\n    @pointerdown=\"onPointerdown\"\n    @click=\"onBackdropClick\"\n  >\n    <!--\n      As in VDialog, only the body scrolls, and the lines under the header and above the footer\n      are drawn by sentinels stuck inside the scrolling area, which a scroll-state query reaches.\n    -->\n    <header class=\"v-drawer-header\">\n      <slot name=\"header\">\n        <div class=\"v-drawer-titles\">\n          <VTypography\n            v-if=\"title\"\n            :id=\"titleId\"\n            as=\"h2\"\n            variant=\"heading-3\"\n            class=\"v-drawer-title\"\n          >\n            {{ title }}\n          </VTypography>\n          <VTypography\n            v-if=\"subtitle\"\n            :id=\"subtitleId\"\n            variant=\"subtitle\"\n            tone=\"muted\"\n            class=\"v-drawer-subtitle\"\n          >\n            {{ subtitle }}\n          </VTypography>\n        </div>\n      </slot>\n      <div v-if=\"!hideClose || $slots['header-actions']\" class=\"v-drawer-header-actions\">\n        <slot name=\"header-actions\" />\n        <VIconButton\n          v-if=\"!hideClose\"\n          class=\"v-drawer-close\"\n          :label=\"resolvedCloseLabel\"\n          variant=\"ghost\"\n          tone=\"neutral\"\n          size=\"sm\"\n          @click=\"close\"\n        >\n          <VIcon :name=\"closeIcon\" />\n        </VIconButton>\n      </div>\n    </header>\n    <div class=\"v-drawer-scroll\">\n      <span class=\"v-drawer-edge v-drawer-edge--top\" aria-hidden=\"true\" />\n      <div class=\"v-drawer-body\">\n        <slot />\n      </div>\n      <span class=\"v-drawer-edge v-drawer-edge--bottom\" aria-hidden=\"true\" />\n    </div>\n    <footer v-if=\"$slots.footer\" class=\"v-drawer-footer\">\n      <slot name=\"footer\" />\n    </footer>\n  </dialog>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-drawer {\n    /*\n     * Declared on the element rather than as a `var()` fallback: a drawer opened from inside\n     * another is its DOM descendant, and would otherwise inherit that drawer's inline extent.\n     */\n    --drawer-extent: var(--vectis-control-size-drawer-md);\n    /* Where the drawer waits off screen, before it enters and after it leaves. */\n    --drawer-offset: 100% 0;\n    /*\n     * Fixed explicitly rather than left to the modal's UA style: an engine without `overlay`\n     * takes the drawer out of the top layer the moment it closes, and it must not fall back\n     * into the page while it slides out.\n     */\n    position: fixed;\n    inset: 0;\n    margin: 0;\n    inline-size: auto;\n    block-size: auto;\n    max-inline-size: none;\n    max-block-size: none;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    padding: 0;\n    border: none;\n    background: var(--vectis-color-surface-overlay);\n    color: var(--vectis-color-text);\n    box-shadow: var(--vectis-shadow-xl);\n    font-family: var(--vectis-text-family);\n    /*\n     * `display` and `overlay` switch at the END of the exit, which keeps the closed drawer\n     * painted, and in the top layer, while it slides out.\n     */\n    transition:\n      translate var(--vectis-duration-slow) var(--vectis-ease-out),\n      display var(--vectis-duration-slow) allow-discrete,\n      overlay var(--vectis-duration-slow) allow-discrete;\n  }\n\n  .v-drawer[data-size='sm'] {\n    --drawer-extent: var(--vectis-control-size-drawer-sm);\n  }\n\n  .v-drawer[data-size='lg'] {\n    --drawer-extent: var(--vectis-control-size-drawer-lg);\n  }\n\n  /* The uncovered strip keeps the backdrop within reach, to see the page and to close. */\n  .v-drawer[data-side='start'],\n  .v-drawer[data-side='end'] {\n    inline-size: var(--drawer-extent);\n    max-inline-size: calc(100dvi - var(--vectis-space-12));\n  }\n\n  .v-drawer[data-side='top'],\n  .v-drawer[data-side='bottom'] {\n    block-size: var(--drawer-extent);\n    max-block-size: calc(100dvb - var(--vectis-space-12));\n  }\n\n  /* The corners against the viewport stay square; the two facing the page are rounded. */\n  .v-drawer[data-side='start'] {\n    --drawer-offset: -100% 0;\n    inset-inline-end: auto;\n    border-start-end-radius: var(--vectis-radius-overlay);\n    border-end-end-radius: var(--vectis-radius-overlay);\n  }\n\n  .v-drawer[data-side='end'] {\n    inset-inline-start: auto;\n    border-start-start-radius: var(--vectis-radius-overlay);\n    border-end-start-radius: var(--vectis-radius-overlay);\n  }\n\n  /* A translation is physical: in a right-to-left page the inline sides swap directions. */\n  .v-drawer[data-side='start']:dir(rtl) {\n    --drawer-offset: 100% 0;\n  }\n\n  .v-drawer[data-side='end']:dir(rtl) {\n    --drawer-offset: -100% 0;\n  }\n\n  .v-drawer[data-side='top'] {\n    --drawer-offset: 0 -100%;\n    bottom: auto;\n    border-bottom-left-radius: var(--vectis-radius-overlay);\n    border-bottom-right-radius: var(--vectis-radius-overlay);\n  }\n\n  .v-drawer[data-side='bottom'] {\n    --drawer-offset: 0 100%;\n    top: auto;\n    border-top-left-radius: var(--vectis-radius-overlay);\n    border-top-right-radius: var(--vectis-radius-overlay);\n  }\n\n  /*\n   * An indispensable guard: the display declared above beats the browser's own rule hiding a\n   * closed dialog. Through the exit, the transition holds `display` back, and a closed drawer\n   * sliding away lets clicks through to the page it uncovers.\n   */\n  .v-drawer:not([open]) {\n    display: none;\n    translate: var(--drawer-offset);\n    pointer-events: none;\n    transition-timing-function: var(--vectis-ease-in);\n  }\n\n  @starting-style {\n    .v-drawer[open] {\n      translate: var(--drawer-offset);\n    }\n  }\n\n  .v-drawer::backdrop {\n    background: var(--vectis-color-backdrop);\n    transition:\n      opacity var(--vectis-duration-slow) var(--vectis-ease-default),\n      display var(--vectis-duration-slow) allow-discrete,\n      overlay var(--vectis-duration-slow) allow-discrete;\n  }\n\n  .v-drawer:not([open])::backdrop {\n    opacity: 0;\n  }\n\n  @starting-style {\n    .v-drawer[open]::backdrop {\n      opacity: 0;\n    }\n  }\n\n  /* No ring around the whole drawer when opening focuses it: the controls inside show theirs. */\n  .v-drawer:focus-visible {\n    outline: none;\n  }\n\n  .v-drawer-scroll {\n    /* The zero minimum lets the flex item shrink below its content, so that it scrolls. */\n    flex: 1 1 auto;\n    min-block-size: 0;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    display: flex;\n    flex-direction: column;\n    container-type: scroll-state;\n  }\n\n  /* Negative margins make the sentinels occupy no space at all. */\n  .v-drawer-edge {\n    flex: none;\n    block-size: 1px;\n    position: sticky;\n    background: transparent;\n  }\n\n  .v-drawer-edge--top {\n    inset-block-start: 0;\n    margin-block-end: -1px;\n  }\n\n  .v-drawer-edge--bottom {\n    inset-block-end: 0;\n    margin-block-start: -1px;\n  }\n\n  .v-drawer-header {\n    flex: none;\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--vectis-space-4);\n    padding: var(--vectis-space-6) var(--vectis-space-6) var(--vectis-space-3);\n  }\n\n  .v-drawer-titles {\n    display: flex;\n    flex-direction: column;\n    min-inline-size: 0;\n  }\n\n  .v-drawer-header-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n    /* Pulled back by the cross's own padding, so its glyph lines up with the header's edge. */\n    margin-block-start: calc(-1 * var(--vectis-space-1));\n    margin-inline-end: calc(-1 * var(--vectis-space-2));\n  }\n\n  .v-drawer-body {\n    /* Stretched when short, so the footer stays at the bottom of the drawer. */\n    flex: 1 0 auto;\n    padding: var(--vectis-space-1) var(--vectis-space-6) var(--vectis-space-3);\n    font-size: var(--vectis-text-body-md-size);\n    line-height: var(--vectis-text-body-md-leading);\n  }\n\n  .v-drawer-footer {\n    flex: none;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-wrap: wrap;\n    gap: var(--vectis-space-3);\n    padding: var(--vectis-space-3) var(--vectis-space-6) var(--vectis-space-6);\n  }\n\n  /* Where scroll-state queries are missing, the sentinels simply stay transparent. */\n  @container scroll-state(scrollable: top) {\n    .v-drawer-edge--top {\n      background: var(--vectis-color-border);\n    }\n  }\n\n  @container scroll-state(scrollable: bottom) {\n    .v-drawer-edge--bottom {\n      background: var(--vectis-color-border);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-drawer,\n    .v-drawer::backdrop {\n      transition: none;\n    }\n  }\n\n  /* An outline draws one without moving the layout by a pixel. */\n  @media (forced-colors: active) {\n    .v-drawer {\n      outline: 1px solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VDrawer.js","names":["_sfc_main","VDrawer_vue_vue_type_script_setup_true_lang_default","VDrawer_default"],"sources":["../../../src/components/VDrawer/VDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * A native modal `<dialog>` pinned to one edge of the viewport, its model bridged by\n * useModalDialog. It stays rendered through its exit, so it slides out as it slid in.\n */\n\nimport { computed, useId } from 'vue'\n\nimport type { DialogTriggerProps } from '../VDialog/VDialog.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport VTypography from '../VTypography/VTypography.vue'\nimport { useModalDialog } from '../../composables/useModalDialog'\nimport { useMessages } from '../../i18n/state'\nimport { cssSize } from '../../utils/css'\n\n/** The edge the drawer comes from. `start` and `end` follow the writing direction. */\nexport type DrawerSide = 'start' | 'end' | 'top' | 'bottom'\n\n/** The width of a drawer on a side, or the height of one at the top or bottom. */\nexport type DrawerSize = 'sm' | 'md' | 'lg'\n\ninterface DrawerProps {\n  /**\n   * The title of the drawer, which also names it for assistive technology. It is ignored when\n   * the `#header` slot replaces the whole header.\n   */\n  title?: string\n  /** A line under the title. */\n  subtitle?: string\n  /** The edge the drawer comes from. `start` and `end` follow the writing direction. */\n  side?: DrawerSide\n  /**\n   * How far the drawer reaches into the page: its width on a side, its height at the top or\n   * bottom. Each step reads a `--vectis-control-size-drawer-*` token.\n   */\n  size?: DrawerSize\n  /**\n   * A length replacing `size`: a number is read as pixels, a string as any CSS length. The\n   * drawer always leaves a strip of the page uncovered, which a click closes it through.\n   */\n  extent?: number | string\n  /**\n   * Takes the close cross out of the header, leaving the reader with Escape, the backdrop and\n   * whatever the footer offers.\n   */\n  hideClose?: boolean\n  /** Stops a click outside the drawer from closing it. */\n  persistentBackdrop?: boolean\n  /**\n   * Stops the Escape key from closing the drawer. Refusing Escape while the backdrop still\n   * closes cannot be expressed natively, so both routes are then allowed.\n   */\n  persistentEscape?: boolean\n  /** What the close cross does, in words. It falls back to the design system dictionary. */\n  closeLabel?: string\n}\n\nconst props = withDefaults(defineProps<DrawerProps>(), {\n  title: undefined,\n  subtitle: undefined,\n  side: 'end',\n  size: 'md',\n  extent: undefined,\n  hideClose: false,\n  persistentBackdrop: false,\n  persistentEscape: false,\n  closeLabel: undefined,\n})\n\nconst m = useMessages()\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? m.value.common.close)\n\n/** Whether the drawer is showing. */\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /** The body of the drawer. This is the part that scrolls when there is too much of it. */\n  default(): unknown\n  /** Replaces the title and subtitle block with content of your own. */\n  header?(): unknown\n  /** Extra controls in the header, placed before the close cross. */\n  'header-actions'?(): unknown\n  /** The buttons at the foot of the drawer. */\n  footer?(): unknown\n  /**\n   * The button that opens the drawer. Bind the `triggerProps` it receives onto it. It stays\n   * rendered always, unlike the drawer itself.\n   */\n  trigger?(props: { triggerProps: DialogTriggerProps }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst titleId = useId()\nconst subtitleId = useId()\n\nconst {\n  dialogEl,\n  rendered,\n  rootAttrs,\n  show,\n  close,\n  onClose,\n  onCancel,\n  onPointerdown,\n  onBackdropClick,\n} = useModalDialog(open, {\n  persistentBackdrop: () => props.persistentBackdrop,\n  persistentEscape: () => props.persistentEscape,\n  exitTransition: true,\n})\n\nconst triggerProps = computed<DialogTriggerProps>(() => ({\n  onClick: show,\n  'aria-haspopup': 'dialog',\n}))\n\ndefineExpose({\n  /**\n   * Opens the drawer, exactly as setting `open` does. The opening lands on the next tick: the\n   * promise returned settles once the drawer is showing.\n   */\n  show,\n  /**\n   * Closes the drawer. It closes unconditionally, `persistentEscape` and `persistentBackdrop`\n   * governing only the two routes the reader can take.\n   */\n  close,\n  /**\n   * The `<dialog>` element. It is null while closed, once its exit has played: each opening\n   * from there builds a fresh one.\n   */\n  el: dialogEl,\n})\n</script>\n\n<template>\n  <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n  <dialog\n    v-if=\"rendered\"\n    ref=\"dialogEl\"\n    :aria-labelledby=\"title ? titleId : undefined\"\n    :aria-describedby=\"subtitle ? subtitleId : undefined\"\n    v-bind=\"rootAttrs\"\n    class=\"v-drawer\"\n    :data-side=\"side\"\n    :data-size=\"size\"\n    :style=\"{ '--drawer-extent': cssSize(extent) }\"\n    @close=\"onClose\"\n    @cancel=\"onCancel\"\n    @pointerdown=\"onPointerdown\"\n    @click=\"onBackdropClick\"\n  >\n    <!--\n      As in VDialog, only the body scrolls, and the lines under the header and above the footer\n      are drawn by sentinels stuck inside the scrolling area, which a scroll-state query reaches.\n    -->\n    <header class=\"v-drawer-header\">\n      <slot name=\"header\">\n        <div class=\"v-drawer-titles\">\n          <VTypography\n            v-if=\"title\"\n            :id=\"titleId\"\n            as=\"h2\"\n            variant=\"heading-3\"\n            class=\"v-drawer-title\"\n          >\n            {{ title }}\n          </VTypography>\n          <VTypography\n            v-if=\"subtitle\"\n            :id=\"subtitleId\"\n            variant=\"subtitle\"\n            tone=\"muted\"\n            class=\"v-drawer-subtitle\"\n          >\n            {{ subtitle }}\n          </VTypography>\n        </div>\n      </slot>\n      <div v-if=\"!hideClose || $slots['header-actions']\" class=\"v-drawer-header-actions\">\n        <slot name=\"header-actions\" />\n        <VIconButton\n          v-if=\"!hideClose\"\n          class=\"v-drawer-close\"\n          :label=\"resolvedCloseLabel\"\n          variant=\"ghost\"\n          tone=\"neutral\"\n          size=\"sm\"\n          @click=\"close\"\n        >\n          <VIcon :name=\"closeIcon\" />\n        </VIconButton>\n      </div>\n    </header>\n    <div class=\"v-drawer-scroll\">\n      <span class=\"v-drawer-edge v-drawer-edge--top\" aria-hidden=\"true\" />\n      <div class=\"v-drawer-body\">\n        <slot />\n      </div>\n      <span class=\"v-drawer-edge v-drawer-edge--bottom\" aria-hidden=\"true\" />\n    </div>\n    <footer v-if=\"$slots.footer\" class=\"v-drawer-footer\">\n      <slot name=\"footer\" />\n    </footer>\n  </dialog>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-drawer {\n    /*\n     * Declared on the element rather than as a `var()` fallback: a drawer opened from inside\n     * another is its DOM descendant, and would otherwise inherit that drawer's inline extent.\n     */\n    --drawer-extent: var(--vectis-control-size-drawer-md);\n    /* Where the drawer waits off screen, before it enters and after it leaves. */\n    --drawer-offset: 100% 0;\n    /*\n     * Fixed explicitly rather than left to the modal's UA style: an engine without `overlay`\n     * takes the drawer out of the top layer the moment it closes, and it must not fall back\n     * into the page while it slides out.\n     */\n    position: fixed;\n    inset: 0;\n    margin: 0;\n    inline-size: auto;\n    block-size: auto;\n    max-inline-size: none;\n    max-block-size: none;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    padding: 0;\n    border: none;\n    background: var(--vectis-color-surface-overlay);\n    color: var(--vectis-color-text);\n    box-shadow: var(--vectis-shadow-xl);\n    font-family: var(--vectis-text-family);\n    /*\n     * `display` and `overlay` switch at the END of the exit, which keeps the closed drawer\n     * painted, and in the top layer, while it slides out.\n     */\n    transition:\n      translate var(--vectis-duration-slow) var(--vectis-ease-out),\n      display var(--vectis-duration-slow) allow-discrete,\n      overlay var(--vectis-duration-slow) allow-discrete;\n  }\n\n  .v-drawer[data-size='sm'] {\n    --drawer-extent: var(--vectis-control-size-drawer-sm);\n  }\n\n  .v-drawer[data-size='lg'] {\n    --drawer-extent: var(--vectis-control-size-drawer-lg);\n  }\n\n  /* The uncovered strip keeps the backdrop within reach, to see the page and to close. */\n  .v-drawer[data-side='start'],\n  .v-drawer[data-side='end'] {\n    inline-size: var(--drawer-extent);\n    max-inline-size: calc(100dvi - var(--vectis-space-12));\n  }\n\n  .v-drawer[data-side='top'],\n  .v-drawer[data-side='bottom'] {\n    block-size: var(--drawer-extent);\n    max-block-size: calc(100dvb - var(--vectis-space-12));\n  }\n\n  /* The corners against the viewport stay square; the two facing the page are rounded. */\n  .v-drawer[data-side='start'] {\n    --drawer-offset: -100% 0;\n    inset-inline-end: auto;\n    border-start-end-radius: var(--vectis-radius-overlay);\n    border-end-end-radius: var(--vectis-radius-overlay);\n  }\n\n  .v-drawer[data-side='end'] {\n    inset-inline-start: auto;\n    border-start-start-radius: var(--vectis-radius-overlay);\n    border-end-start-radius: var(--vectis-radius-overlay);\n  }\n\n  /* A translation is physical: in a right-to-left page the inline sides swap directions. */\n  .v-drawer[data-side='start']:dir(rtl) {\n    --drawer-offset: 100% 0;\n  }\n\n  .v-drawer[data-side='end']:dir(rtl) {\n    --drawer-offset: -100% 0;\n  }\n\n  .v-drawer[data-side='top'] {\n    --drawer-offset: 0 -100%;\n    bottom: auto;\n    border-bottom-left-radius: var(--vectis-radius-overlay);\n    border-bottom-right-radius: var(--vectis-radius-overlay);\n  }\n\n  .v-drawer[data-side='bottom'] {\n    --drawer-offset: 0 100%;\n    top: auto;\n    border-top-left-radius: var(--vectis-radius-overlay);\n    border-top-right-radius: var(--vectis-radius-overlay);\n  }\n\n  /*\n   * An indispensable guard: the display declared above beats the browser's own rule hiding a\n   * closed dialog. Through the exit, the transition holds `display` back, and a closed drawer\n   * sliding away lets clicks through to the page it uncovers.\n   */\n  .v-drawer:not([open]) {\n    display: none;\n    translate: var(--drawer-offset);\n    pointer-events: none;\n    transition-timing-function: var(--vectis-ease-in);\n  }\n\n  @starting-style {\n    .v-drawer[open] {\n      translate: var(--drawer-offset);\n    }\n  }\n\n  .v-drawer::backdrop {\n    background: var(--vectis-color-backdrop);\n    transition:\n      opacity var(--vectis-duration-slow) var(--vectis-ease-default),\n      display var(--vectis-duration-slow) allow-discrete,\n      overlay var(--vectis-duration-slow) allow-discrete;\n  }\n\n  .v-drawer:not([open])::backdrop {\n    opacity: 0;\n  }\n\n  @starting-style {\n    .v-drawer[open]::backdrop {\n      opacity: 0;\n    }\n  }\n\n  /* No ring around the whole drawer when opening focuses it: the controls inside show theirs. */\n  .v-drawer:focus-visible {\n    outline: none;\n  }\n\n  .v-drawer-scroll {\n    /* The zero minimum lets the flex item shrink below its content, so that it scrolls. */\n    flex: 1 1 auto;\n    min-block-size: 0;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    display: flex;\n    flex-direction: column;\n    container-type: scroll-state;\n  }\n\n  /* Negative margins make the sentinels occupy no space at all. */\n  .v-drawer-edge {\n    flex: none;\n    block-size: 1px;\n    position: sticky;\n    background: transparent;\n  }\n\n  .v-drawer-edge--top {\n    inset-block-start: 0;\n    margin-block-end: -1px;\n  }\n\n  .v-drawer-edge--bottom {\n    inset-block-end: 0;\n    margin-block-start: -1px;\n  }\n\n  .v-drawer-header {\n    flex: none;\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--vectis-space-4);\n    padding: var(--vectis-space-6) var(--vectis-space-6) var(--vectis-space-3);\n  }\n\n  .v-drawer-titles {\n    display: flex;\n    flex-direction: column;\n    min-inline-size: 0;\n  }\n\n  .v-drawer-header-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n    /* Pulled back by the cross's own padding, so its glyph lines up with the header's edge. */\n    margin-block-start: calc(-1 * var(--vectis-space-1));\n    margin-inline-end: calc(-1 * var(--vectis-space-2));\n  }\n\n  .v-drawer-body {\n    /* Stretched when short, so the footer stays at the bottom of the drawer. */\n    flex: 1 0 auto;\n    padding: var(--vectis-space-1) var(--vectis-space-6) var(--vectis-space-3);\n    font-size: var(--vectis-text-body-md-size);\n    line-height: var(--vectis-text-body-md-leading);\n  }\n\n  .v-drawer-footer {\n    flex: none;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-wrap: wrap;\n    gap: var(--vectis-space-3);\n    padding: var(--vectis-space-3) var(--vectis-space-6) var(--vectis-space-6);\n  }\n\n  /* Where scroll-state queries are missing, the sentinels simply stay transparent. */\n  @container scroll-state(scrollable: top) {\n    .v-drawer-edge--top {\n      background: var(--vectis-color-border);\n    }\n  }\n\n  @container scroll-state(scrollable: bottom) {\n    .v-drawer-edge--bottom {\n      background: var(--vectis-color-border);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-drawer,\n    .v-drawer::backdrop {\n      transition: none;\n    }\n  }\n\n  /* An outline draws one without moving the layout by a pixel. */\n  @media (forced-colors: active) {\n    .v-drawer {\n      outline: 1px solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"VDrawer.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VDrawer/VDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * A native modal `<dialog>` pinned to one edge of the viewport, its model bridged by\n * useModalDialog. It stays rendered through its exit, so it slides out as it slid in.\n */\n\nimport { computed, useId } from 'vue'\n\nimport type { DialogTriggerProps } from '../VDialog/VDialog.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport VTypography from '../VTypography/VTypography.vue'\nimport { useModalDialog } from '../../composables/useModalDialog'\nimport { useMessages } from '../../i18n/state'\nimport { cssSize } from '../../utils/css'\n\n/** The edge the drawer comes from. `start` and `end` follow the writing direction. */\nexport type DrawerSide = 'start' | 'end' | 'top' | 'bottom'\n\n/** The width of a drawer on a side, or the height of one at the top or bottom. */\nexport type DrawerSize = 'sm' | 'md' | 'lg'\n\ninterface DrawerProps {\n  /**\n   * The title of the drawer, which also names it for assistive technology. It is ignored when\n   * the `#header` slot replaces the whole header.\n   */\n  title?: string\n  /** A line under the title. */\n  subtitle?: string\n  /** The edge the drawer comes from. `start` and `end` follow the writing direction. */\n  side?: DrawerSide\n  /**\n   * How far the drawer reaches into the page: its width on a side, its height at the top or\n   * bottom. Each step reads a `--vectis-control-size-drawer-*` token.\n   */\n  size?: DrawerSize\n  /**\n   * A length replacing `size`: a number is read as pixels, a string as any CSS length. The\n   * drawer always leaves a strip of the page uncovered, which a click closes it through.\n   */\n  extent?: number | string\n  /**\n   * Takes the close cross out of the header, leaving the reader with Escape, the backdrop and\n   * whatever the footer offers.\n   */\n  hideClose?: boolean\n  /** Stops a click outside the drawer from closing it. */\n  persistentBackdrop?: boolean\n  /**\n   * Stops the Escape key from closing the drawer. Refusing Escape while the backdrop still\n   * closes cannot be expressed natively, so both routes are then allowed.\n   */\n  persistentEscape?: boolean\n  /** What the close cross does, in words. It falls back to the design system dictionary. */\n  closeLabel?: string\n}\n\nconst props = withDefaults(defineProps<DrawerProps>(), {\n  title: undefined,\n  subtitle: undefined,\n  side: 'end',\n  size: 'md',\n  extent: undefined,\n  hideClose: false,\n  persistentBackdrop: false,\n  persistentEscape: false,\n  closeLabel: undefined,\n})\n\nconst m = useMessages()\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? m.value.common.close)\n\n/** Whether the drawer is showing. */\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /** The body of the drawer. This is the part that scrolls when there is too much of it. */\n  default(): unknown\n  /** Replaces the title and subtitle block with content of your own. */\n  header?(): unknown\n  /** Extra controls in the header, placed before the close cross. */\n  'header-actions'?(): unknown\n  /** The buttons at the foot of the drawer. */\n  footer?(): unknown\n  /**\n   * The button that opens the drawer. Bind the `triggerProps` it receives onto it. It stays\n   * rendered always, unlike the drawer itself.\n   */\n  trigger?(props: { triggerProps: DialogTriggerProps }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst titleId = useId()\nconst subtitleId = useId()\n\nconst {\n  dialogEl,\n  rendered,\n  rootAttrs,\n  show,\n  close,\n  onClose,\n  onCancel,\n  onPointerdown,\n  onBackdropClick,\n} = useModalDialog(open, {\n  persistentBackdrop: () => props.persistentBackdrop,\n  persistentEscape: () => props.persistentEscape,\n  exitTransition: true,\n})\n\nconst triggerProps = computed<DialogTriggerProps>(() => ({\n  onClick: show,\n  'aria-haspopup': 'dialog',\n}))\n\ndefineExpose({\n  /**\n   * Opens the drawer, exactly as setting `open` does. The opening lands on the next tick: the\n   * promise returned settles once the drawer is showing.\n   */\n  show,\n  /**\n   * Closes the drawer. It closes unconditionally, `persistentEscape` and `persistentBackdrop`\n   * governing only the two routes the reader can take.\n   */\n  close,\n  /**\n   * The `<dialog>` element. It is null while closed, once its exit has played: each opening\n   * from there builds a fresh one.\n   */\n  el: dialogEl,\n})\n</script>\n\n<template>\n  <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n  <dialog\n    v-if=\"rendered\"\n    ref=\"dialogEl\"\n    :aria-labelledby=\"title ? titleId : undefined\"\n    :aria-describedby=\"subtitle ? subtitleId : undefined\"\n    v-bind=\"rootAttrs\"\n    class=\"v-drawer\"\n    :data-side=\"side\"\n    :data-size=\"size\"\n    :style=\"{ '--drawer-extent': cssSize(extent) }\"\n    @close=\"onClose\"\n    @cancel=\"onCancel\"\n    @pointerdown=\"onPointerdown\"\n    @click=\"onBackdropClick\"\n  >\n    <!--\n      As in VDialog, only the body scrolls, and the lines under the header and above the footer\n      are drawn by sentinels stuck inside the scrolling area, which a scroll-state query reaches.\n    -->\n    <header class=\"v-drawer-header\">\n      <slot name=\"header\">\n        <div class=\"v-drawer-titles\">\n          <VTypography\n            v-if=\"title\"\n            :id=\"titleId\"\n            as=\"h2\"\n            variant=\"heading-3\"\n            class=\"v-drawer-title\"\n          >\n            {{ title }}\n          </VTypography>\n          <VTypography\n            v-if=\"subtitle\"\n            :id=\"subtitleId\"\n            variant=\"subtitle\"\n            tone=\"muted\"\n            class=\"v-drawer-subtitle\"\n          >\n            {{ subtitle }}\n          </VTypography>\n        </div>\n      </slot>\n      <div v-if=\"!hideClose || $slots['header-actions']\" class=\"v-drawer-header-actions\">\n        <slot name=\"header-actions\" />\n        <VIconButton\n          v-if=\"!hideClose\"\n          class=\"v-drawer-close\"\n          :label=\"resolvedCloseLabel\"\n          variant=\"ghost\"\n          tone=\"neutral\"\n          size=\"sm\"\n          @click=\"close\"\n        >\n          <VIcon :name=\"closeIcon\" />\n        </VIconButton>\n      </div>\n    </header>\n    <div class=\"v-drawer-scroll\">\n      <span class=\"v-drawer-edge v-drawer-edge--top\" aria-hidden=\"true\" />\n      <div class=\"v-drawer-body\">\n        <slot />\n      </div>\n      <span class=\"v-drawer-edge v-drawer-edge--bottom\" aria-hidden=\"true\" />\n    </div>\n    <footer v-if=\"$slots.footer\" class=\"v-drawer-footer\">\n      <slot name=\"footer\" />\n    </footer>\n  </dialog>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-drawer {\n    /*\n     * Declared on the element rather than as a `var()` fallback: a drawer opened from inside\n     * another is its DOM descendant, and would otherwise inherit that drawer's inline extent.\n     */\n    --drawer-extent: var(--vectis-control-size-drawer-md);\n    /* Where the drawer waits off screen, before it enters and after it leaves. */\n    --drawer-offset: 100% 0;\n    /*\n     * Fixed explicitly rather than left to the modal's UA style: an engine without `overlay`\n     * takes the drawer out of the top layer the moment it closes, and it must not fall back\n     * into the page while it slides out.\n     */\n    position: fixed;\n    inset: 0;\n    margin: 0;\n    inline-size: auto;\n    block-size: auto;\n    max-inline-size: none;\n    max-block-size: none;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    padding: 0;\n    border: none;\n    background: var(--vectis-color-surface-overlay);\n    color: var(--vectis-color-text);\n    box-shadow: var(--vectis-shadow-xl);\n    font-family: var(--vectis-text-family);\n    /*\n     * `display` and `overlay` switch at the END of the exit, which keeps the closed drawer\n     * painted, and in the top layer, while it slides out.\n     */\n    transition:\n      translate var(--vectis-duration-slow) var(--vectis-ease-out),\n      display var(--vectis-duration-slow) allow-discrete,\n      overlay var(--vectis-duration-slow) allow-discrete;\n  }\n\n  .v-drawer[data-size='sm'] {\n    --drawer-extent: var(--vectis-control-size-drawer-sm);\n  }\n\n  .v-drawer[data-size='lg'] {\n    --drawer-extent: var(--vectis-control-size-drawer-lg);\n  }\n\n  /* The uncovered strip keeps the backdrop within reach, to see the page and to close. */\n  .v-drawer[data-side='start'],\n  .v-drawer[data-side='end'] {\n    inline-size: var(--drawer-extent);\n    max-inline-size: calc(100dvi - var(--vectis-space-12));\n  }\n\n  .v-drawer[data-side='top'],\n  .v-drawer[data-side='bottom'] {\n    block-size: var(--drawer-extent);\n    max-block-size: calc(100dvb - var(--vectis-space-12));\n  }\n\n  /* The corners against the viewport stay square; the two facing the page are rounded. */\n  .v-drawer[data-side='start'] {\n    --drawer-offset: -100% 0;\n    inset-inline-end: auto;\n    border-start-end-radius: var(--vectis-radius-overlay);\n    border-end-end-radius: var(--vectis-radius-overlay);\n  }\n\n  .v-drawer[data-side='end'] {\n    inset-inline-start: auto;\n    border-start-start-radius: var(--vectis-radius-overlay);\n    border-end-start-radius: var(--vectis-radius-overlay);\n  }\n\n  /* A translation is physical: in a right-to-left page the inline sides swap directions. */\n  .v-drawer[data-side='start']:dir(rtl) {\n    --drawer-offset: 100% 0;\n  }\n\n  .v-drawer[data-side='end']:dir(rtl) {\n    --drawer-offset: -100% 0;\n  }\n\n  .v-drawer[data-side='top'] {\n    --drawer-offset: 0 -100%;\n    bottom: auto;\n    border-bottom-left-radius: var(--vectis-radius-overlay);\n    border-bottom-right-radius: var(--vectis-radius-overlay);\n  }\n\n  .v-drawer[data-side='bottom'] {\n    --drawer-offset: 0 100%;\n    top: auto;\n    border-top-left-radius: var(--vectis-radius-overlay);\n    border-top-right-radius: var(--vectis-radius-overlay);\n  }\n\n  /*\n   * An indispensable guard: the display declared above beats the browser's own rule hiding a\n   * closed dialog. Through the exit, the transition holds `display` back, and a closed drawer\n   * sliding away lets clicks through to the page it uncovers.\n   */\n  .v-drawer:not([open]) {\n    display: none;\n    translate: var(--drawer-offset);\n    pointer-events: none;\n    transition-timing-function: var(--vectis-ease-in);\n  }\n\n  @starting-style {\n    .v-drawer[open] {\n      translate: var(--drawer-offset);\n    }\n  }\n\n  .v-drawer::backdrop {\n    background: var(--vectis-color-backdrop);\n    transition:\n      opacity var(--vectis-duration-slow) var(--vectis-ease-default),\n      display var(--vectis-duration-slow) allow-discrete,\n      overlay var(--vectis-duration-slow) allow-discrete;\n  }\n\n  .v-drawer:not([open])::backdrop {\n    opacity: 0;\n  }\n\n  @starting-style {\n    .v-drawer[open]::backdrop {\n      opacity: 0;\n    }\n  }\n\n  /* No ring around the whole drawer when opening focuses it: the controls inside show theirs. */\n  .v-drawer:focus-visible {\n    outline: none;\n  }\n\n  .v-drawer-scroll {\n    /* The zero minimum lets the flex item shrink below its content, so that it scrolls. */\n    flex: 1 1 auto;\n    min-block-size: 0;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    display: flex;\n    flex-direction: column;\n    container-type: scroll-state;\n  }\n\n  /* Negative margins make the sentinels occupy no space at all. */\n  .v-drawer-edge {\n    flex: none;\n    block-size: 1px;\n    position: sticky;\n    background: transparent;\n  }\n\n  .v-drawer-edge--top {\n    inset-block-start: 0;\n    margin-block-end: -1px;\n  }\n\n  .v-drawer-edge--bottom {\n    inset-block-end: 0;\n    margin-block-start: -1px;\n  }\n\n  .v-drawer-header {\n    flex: none;\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--vectis-space-4);\n    padding: var(--vectis-space-6) var(--vectis-space-6) var(--vectis-space-3);\n  }\n\n  .v-drawer-titles {\n    display: flex;\n    flex-direction: column;\n    min-inline-size: 0;\n  }\n\n  .v-drawer-header-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n    /* Pulled back by the cross's own padding, so its glyph lines up with the header's edge. */\n    margin-block-start: calc(-1 * var(--vectis-space-1));\n    margin-inline-end: calc(-1 * var(--vectis-space-2));\n  }\n\n  .v-drawer-body {\n    /* Stretched when short, so the footer stays at the bottom of the drawer. */\n    flex: 1 0 auto;\n    padding: var(--vectis-space-1) var(--vectis-space-6) var(--vectis-space-3);\n    font-size: var(--vectis-text-body-md-size);\n    line-height: var(--vectis-text-body-md-leading);\n  }\n\n  .v-drawer-footer {\n    flex: none;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-wrap: wrap;\n    gap: var(--vectis-space-3);\n    padding: var(--vectis-space-3) var(--vectis-space-6) var(--vectis-space-6);\n  }\n\n  /* Where scroll-state queries are missing, the sentinels simply stay transparent. */\n  @container scroll-state(scrollable: top) {\n    .v-drawer-edge--top {\n      background: var(--vectis-color-border);\n    }\n  }\n\n  @container scroll-state(scrollable: bottom) {\n    .v-drawer-edge--bottom {\n      background: var(--vectis-color-border);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-drawer,\n    .v-drawer::backdrop {\n      transition: none;\n    }\n  }\n\n  /* An outline draws one without moving the layout by a pixel. */\n  @media (forced-colors: active) {\n    .v-drawer {\n      outline: 1px solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DA,IAAM,IAAQ,GAYR,IAAI,EAAY,GAChB,IAAqB,QAAe,EAAM,cAAc,EAAE,MAAM,OAAO,KAAK,GAG5E,IAAO,EAAoB,GAAC,MAA0B,GAoBtD,IAAU,EAAM,GAChB,IAAa,EAAM,GAEnB,EACJ,aACA,aACA,cACA,SACA,OAAA,GACA,YACA,aACA,kBACA,uBACE,EAAe,GAAM;GACvB,0BAA0B,EAAM;GAChC,wBAAwB,EAAM;GAC9B,gBAAgB;EAClB,CAAC,GAEK,IAAe,SAAoC;GACvD,SAAS;GACT,iBAAiB;EACnB,EAAE;SAEF,EAAa;GAKX;GAKA,OAAA;GAKA,IAAI;EACN,CAAC,+BAIC,EAAqD,EAAA,QAAA,WAAA,EAA/B,cAAe,EAAA,MAAY,CAAA,GAEzC,EAAA,CAAA,KAAA,EAAA,GADR,EAmES,UAnET,EAmES;;YAjEH;GAAJ,KAAI;GACH,mBAAiB,EAAA,QAAQ,EAAA,CAAA,IAAU,KAAA;GACnC,oBAAkB,EAAA,WAAW,EAAA,CAAA,IAAa,KAAA;KACnC,EAAA,CAAA,GAAS;GACjB,OAAM;GACL,aAAW,EAAA;GACX,aAAW,EAAA;GACX,OAAK,EAAA,mBAAuB,EAAA,CAAA,CAAO,CAAC,EAAA,MAAM,EAAA;GAC1C,SAAK,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;GACP,UAAM,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;GACR,eAAW,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;GACb,SAAK,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;;GAMR,EAqCS,UArCT,GAqCS,CApCP,EAqBO,EAAA,QAAA,UAAA,CAAA,SAAA,CApBL,EAmBM,OAnBN,GAmBM,CAjBI,EAAA,SAAA,EAAA,GADR,EAQc,GAAA;;IANX,IAAI,EAAA,CAAA;IACL,IAAG;IACH,SAAQ;IACR,OAAM;;qBAEK,CAAA,EAAA,EAAR,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;+BAGF,EAAA,YAAA,EAAA,GADR,EAQc,GAAA;;IANX,IAAI,EAAA,CAAA;IACL,SAAQ;IACR,MAAK;IACL,OAAM;;qBAEQ,CAAA,EAAA,EAAX,EAAA,QAAQ,GAAA,CAAA,CAAA,CAAA;;oCAIL,EAAA,aAAaA,EAAAA,OAAM,qBAAA,EAAA,GAA/B,EAaM,OAbN,GAaM,CAZJ,EAA8B,EAAA,QAAA,gBAAA,GAErB,EAAA,yBAAA,EAAA,GADT,EAUc,GAAA;;IARZ,OAAM;IACL,OAAO,EAAA;IACR,SAAQ;IACR,MAAK;IACL,MAAK;IACJ,SAAO,EAAA,CAAA;;qBAEmB,CAA3B,EAA2B,GAAA,EAAnB,MAAM,EAAA,CAAA,EAAS,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,CAAA,CAAA;;;GAI7B,EAMM,OANN,GAMM;aALJ,EAAoE,QAAA;KAA9D,OAAM;KAAmC,eAAY;;IAC3D,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA;aAEV,EAAuE,QAAA;KAAjE,OAAM;KAAsC,eAAY;;;GAElDA,EAAAA,OAAO,UAAA,EAAA,GAArB,EAES,UAFT,GAES,CADP,EAAsB,EAAA,QAAA,QAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}
+{"version":3,"file":"VDrawer.vue_vue_type_script_setup_true_lang.js","names":["$slots","_useModel","_openBlock","_createElementBlock","_Fragment","_renderSlot","_unref","_mergeProps","_createElementVNode","_createBlock","VTypography","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode","VIconButton","close","_createVNode","VIcon","closeIcon","VIcon_default","VTypography_default","VIconButton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","VDrawer_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","__expose","props","__props","m","useMessages","resolvedCloseLabel","computed","open","useModel","titleId","useId","subtitleId","close$1","useModalDialog","triggerProps","show","dialogEl","openBlock","createElementBlock","Fragment","renderSlot","_ctx","unref","rendered","mergeProps","rootAttrs","cssSize","_cache","args","onClose","onCancel","onPointerdown","onBackdropClick","createElementVNode","createBlock","withCtx","createTextVNode","toDisplayString","createCommentVNode","createVNode","close"],"sources":["../../../src/components/VDrawer/VDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * A native modal `<dialog>` pinned to one edge of the viewport, its model bridged by\n * useModalDialog. It stays rendered through its exit, so it slides out as it slid in.\n */\n\nimport { computed, useId } from 'vue'\n\nimport type { DialogTriggerProps } from '../VDialog/VDialog.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport VTypography from '../VTypography/VTypography.vue'\nimport { useModalDialog } from '../../composables/useModalDialog'\nimport { useMessages } from '../../i18n/state'\nimport { cssSize } from '../../utils/css'\n\n/** The edge the drawer comes from. `start` and `end` follow the writing direction. */\nexport type DrawerSide = 'start' | 'end' | 'top' | 'bottom'\n\n/** The width of a drawer on a side, or the height of one at the top or bottom. */\nexport type DrawerSize = 'sm' | 'md' | 'lg'\n\ninterface DrawerProps {\n  /**\n   * The title of the drawer, which also names it for assistive technology. It is ignored when\n   * the `#header` slot replaces the whole header.\n   */\n  title?: string\n  /** A line under the title. */\n  subtitle?: string\n  /** The edge the drawer comes from. `start` and `end` follow the writing direction. */\n  side?: DrawerSide\n  /**\n   * How far the drawer reaches into the page: its width on a side, its height at the top or\n   * bottom. Each step reads a `--vectis-control-size-drawer-*` token.\n   */\n  size?: DrawerSize\n  /**\n   * A length replacing `size`: a number is read as pixels, a string as any CSS length. The\n   * drawer always leaves a strip of the page uncovered, which a click closes it through.\n   */\n  extent?: number | string\n  /**\n   * Takes the close cross out of the header, leaving the reader with Escape, the backdrop and\n   * whatever the footer offers.\n   */\n  hideClose?: boolean\n  /** Stops a click outside the drawer from closing it. */\n  persistentBackdrop?: boolean\n  /**\n   * Stops the Escape key from closing the drawer. Refusing Escape while the backdrop still\n   * closes cannot be expressed natively, so both routes are then allowed.\n   */\n  persistentEscape?: boolean\n  /** What the close cross does, in words. It falls back to the design system dictionary. */\n  closeLabel?: string\n}\n\nconst props = withDefaults(defineProps<DrawerProps>(), {\n  title: undefined,\n  subtitle: undefined,\n  side: 'end',\n  size: 'md',\n  extent: undefined,\n  hideClose: false,\n  persistentBackdrop: false,\n  persistentEscape: false,\n  closeLabel: undefined,\n})\n\nconst m = useMessages()\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? m.value.common.close)\n\n/** Whether the drawer is showing. */\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /** The body of the drawer. This is the part that scrolls when there is too much of it. */\n  default(): unknown\n  /** Replaces the title and subtitle block with content of your own. */\n  header?(): unknown\n  /** Extra controls in the header, placed before the close cross. */\n  'header-actions'?(): unknown\n  /** The buttons at the foot of the drawer. */\n  footer?(): unknown\n  /**\n   * The button that opens the drawer. Bind the `triggerProps` it receives onto it. It stays\n   * rendered always, unlike the drawer itself.\n   */\n  trigger?(props: { triggerProps: DialogTriggerProps }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst titleId = useId()\nconst subtitleId = useId()\n\nconst {\n  dialogEl,\n  rendered,\n  rootAttrs,\n  show,\n  close,\n  onClose,\n  onCancel,\n  onPointerdown,\n  onBackdropClick,\n} = useModalDialog(open, {\n  persistentBackdrop: () => props.persistentBackdrop,\n  persistentEscape: () => props.persistentEscape,\n  exitTransition: true,\n})\n\nconst triggerProps = computed<DialogTriggerProps>(() => ({\n  onClick: show,\n  'aria-haspopup': 'dialog',\n}))\n\ndefineExpose({\n  /**\n   * Opens the drawer, exactly as setting `open` does. The opening lands on the next tick: the\n   * promise returned settles once the drawer is showing.\n   */\n  show,\n  /**\n   * Closes the drawer. It closes unconditionally, `persistentEscape` and `persistentBackdrop`\n   * governing only the two routes the reader can take.\n   */\n  close,\n  /**\n   * The `<dialog>` element. It is null while closed, once its exit has played: each opening\n   * from there builds a fresh one.\n   */\n  el: dialogEl,\n})\n</script>\n\n<template>\n  <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n  <dialog\n    v-if=\"rendered\"\n    ref=\"dialogEl\"\n    :aria-labelledby=\"title ? titleId : undefined\"\n    :aria-describedby=\"subtitle ? subtitleId : undefined\"\n    v-bind=\"rootAttrs\"\n    class=\"v-drawer\"\n    :data-side=\"side\"\n    :data-size=\"size\"\n    :style=\"{ '--drawer-extent': cssSize(extent) }\"\n    @close=\"onClose\"\n    @cancel=\"onCancel\"\n    @pointerdown=\"onPointerdown\"\n    @click=\"onBackdropClick\"\n  >\n    <!--\n      As in VDialog, only the body scrolls, and the lines under the header and above the footer\n      are drawn by sentinels stuck inside the scrolling area, which a scroll-state query reaches.\n    -->\n    <header class=\"v-drawer-header\">\n      <slot name=\"header\">\n        <div class=\"v-drawer-titles\">\n          <VTypography\n            v-if=\"title\"\n            :id=\"titleId\"\n            as=\"h2\"\n            variant=\"heading-3\"\n            class=\"v-drawer-title\"\n          >\n            {{ title }}\n          </VTypography>\n          <VTypography\n            v-if=\"subtitle\"\n            :id=\"subtitleId\"\n            variant=\"subtitle\"\n            tone=\"muted\"\n            class=\"v-drawer-subtitle\"\n          >\n            {{ subtitle }}\n          </VTypography>\n        </div>\n      </slot>\n      <div v-if=\"!hideClose || $slots['header-actions']\" class=\"v-drawer-header-actions\">\n        <slot name=\"header-actions\" />\n        <VIconButton\n          v-if=\"!hideClose\"\n          class=\"v-drawer-close\"\n          :label=\"resolvedCloseLabel\"\n          variant=\"ghost\"\n          tone=\"neutral\"\n          size=\"sm\"\n          @click=\"close\"\n        >\n          <VIcon :name=\"closeIcon\" />\n        </VIconButton>\n      </div>\n    </header>\n    <div class=\"v-drawer-scroll\">\n      <span class=\"v-drawer-edge v-drawer-edge--top\" aria-hidden=\"true\" />\n      <div class=\"v-drawer-body\">\n        <slot />\n      </div>\n      <span class=\"v-drawer-edge v-drawer-edge--bottom\" aria-hidden=\"true\" />\n    </div>\n    <footer v-if=\"$slots.footer\" class=\"v-drawer-footer\">\n      <slot name=\"footer\" />\n    </footer>\n  </dialog>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-drawer {\n    /*\n     * Declared on the element rather than as a `var()` fallback: a drawer opened from inside\n     * another is its DOM descendant, and would otherwise inherit that drawer's inline extent.\n     */\n    --drawer-extent: var(--vectis-control-size-drawer-md);\n    /* Where the drawer waits off screen, before it enters and after it leaves. */\n    --drawer-offset: 100% 0;\n    /*\n     * Fixed explicitly rather than left to the modal's UA style: an engine without `overlay`\n     * takes the drawer out of the top layer the moment it closes, and it must not fall back\n     * into the page while it slides out.\n     */\n    position: fixed;\n    inset: 0;\n    margin: 0;\n    inline-size: auto;\n    block-size: auto;\n    max-inline-size: none;\n    max-block-size: none;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    padding: 0;\n    border: none;\n    background: var(--vectis-color-surface-overlay);\n    color: var(--vectis-color-text);\n    box-shadow: var(--vectis-shadow-xl);\n    font-family: var(--vectis-text-family);\n    /*\n     * `display` and `overlay` switch at the END of the exit, which keeps the closed drawer\n     * painted, and in the top layer, while it slides out.\n     */\n    transition:\n      translate var(--vectis-duration-slow) var(--vectis-ease-out),\n      display var(--vectis-duration-slow) allow-discrete,\n      overlay var(--vectis-duration-slow) allow-discrete;\n  }\n\n  .v-drawer[data-size='sm'] {\n    --drawer-extent: var(--vectis-control-size-drawer-sm);\n  }\n\n  .v-drawer[data-size='lg'] {\n    --drawer-extent: var(--vectis-control-size-drawer-lg);\n  }\n\n  /* The uncovered strip keeps the backdrop within reach, to see the page and to close. */\n  .v-drawer[data-side='start'],\n  .v-drawer[data-side='end'] {\n    inline-size: var(--drawer-extent);\n    max-inline-size: calc(100dvi - var(--vectis-space-12));\n  }\n\n  .v-drawer[data-side='top'],\n  .v-drawer[data-side='bottom'] {\n    block-size: var(--drawer-extent);\n    max-block-size: calc(100dvb - var(--vectis-space-12));\n  }\n\n  /* The corners against the viewport stay square; the two facing the page are rounded. */\n  .v-drawer[data-side='start'] {\n    --drawer-offset: -100% 0;\n    inset-inline-end: auto;\n    border-start-end-radius: var(--vectis-radius-overlay);\n    border-end-end-radius: var(--vectis-radius-overlay);\n  }\n\n  .v-drawer[data-side='end'] {\n    inset-inline-start: auto;\n    border-start-start-radius: var(--vectis-radius-overlay);\n    border-end-start-radius: var(--vectis-radius-overlay);\n  }\n\n  /* A translation is physical: in a right-to-left page the inline sides swap directions. */\n  .v-drawer[data-side='start']:dir(rtl) {\n    --drawer-offset: 100% 0;\n  }\n\n  .v-drawer[data-side='end']:dir(rtl) {\n    --drawer-offset: -100% 0;\n  }\n\n  .v-drawer[data-side='top'] {\n    --drawer-offset: 0 -100%;\n    bottom: auto;\n    border-bottom-left-radius: var(--vectis-radius-overlay);\n    border-bottom-right-radius: var(--vectis-radius-overlay);\n  }\n\n  .v-drawer[data-side='bottom'] {\n    --drawer-offset: 0 100%;\n    top: auto;\n    border-top-left-radius: var(--vectis-radius-overlay);\n    border-top-right-radius: var(--vectis-radius-overlay);\n  }\n\n  /*\n   * An indispensable guard: the display declared above beats the browser's own rule hiding a\n   * closed dialog. Through the exit, the transition holds `display` back, and a closed drawer\n   * sliding away lets clicks through to the page it uncovers.\n   */\n  .v-drawer:not([open]) {\n    display: none;\n    translate: var(--drawer-offset);\n    pointer-events: none;\n    transition-timing-function: var(--vectis-ease-in);\n  }\n\n  @starting-style {\n    .v-drawer[open] {\n      translate: var(--drawer-offset);\n    }\n  }\n\n  .v-drawer::backdrop {\n    background: var(--vectis-color-backdrop);\n    transition:\n      opacity var(--vectis-duration-slow) var(--vectis-ease-default),\n      display var(--vectis-duration-slow) allow-discrete,\n      overlay var(--vectis-duration-slow) allow-discrete;\n  }\n\n  .v-drawer:not([open])::backdrop {\n    opacity: 0;\n  }\n\n  @starting-style {\n    .v-drawer[open]::backdrop {\n      opacity: 0;\n    }\n  }\n\n  /* No ring around the whole drawer when opening focuses it: the controls inside show theirs. */\n  .v-drawer:focus-visible {\n    outline: none;\n  }\n\n  .v-drawer-scroll {\n    /* The zero minimum lets the flex item shrink below its content, so that it scrolls. */\n    flex: 1 1 auto;\n    min-block-size: 0;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    display: flex;\n    flex-direction: column;\n    container-type: scroll-state;\n  }\n\n  /* Negative margins make the sentinels occupy no space at all. */\n  .v-drawer-edge {\n    flex: none;\n    block-size: 1px;\n    position: sticky;\n    background: transparent;\n  }\n\n  .v-drawer-edge--top {\n    inset-block-start: 0;\n    margin-block-end: -1px;\n  }\n\n  .v-drawer-edge--bottom {\n    inset-block-end: 0;\n    margin-block-start: -1px;\n  }\n\n  .v-drawer-header {\n    flex: none;\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--vectis-space-4);\n    padding: var(--vectis-space-6) var(--vectis-space-6) var(--vectis-space-3);\n  }\n\n  .v-drawer-titles {\n    display: flex;\n    flex-direction: column;\n    min-inline-size: 0;\n  }\n\n  .v-drawer-header-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n    /* Pulled back by the cross's own padding, so its glyph lines up with the header's edge. */\n    margin-block-start: calc(-1 * var(--vectis-space-1));\n    margin-inline-end: calc(-1 * var(--vectis-space-2));\n  }\n\n  .v-drawer-body {\n    /* Stretched when short, so the footer stays at the bottom of the drawer. */\n    flex: 1 0 auto;\n    padding: var(--vectis-space-1) var(--vectis-space-6) var(--vectis-space-3);\n    font-size: var(--vectis-text-body-md-size);\n    line-height: var(--vectis-text-body-md-leading);\n  }\n\n  .v-drawer-footer {\n    flex: none;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-wrap: wrap;\n    gap: var(--vectis-space-3);\n    padding: var(--vectis-space-3) var(--vectis-space-6) var(--vectis-space-6);\n  }\n\n  /* Where scroll-state queries are missing, the sentinels simply stay transparent. */\n  @container scroll-state(scrollable: top) {\n    .v-drawer-edge--top {\n      background: var(--vectis-color-border);\n    }\n  }\n\n  @container scroll-state(scrollable: bottom) {\n    .v-drawer-edge--bottom {\n      background: var(--vectis-color-border);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-drawer,\n    .v-drawer::backdrop {\n      transition: none;\n    }\n  }\n\n  /* An outline draws one without moving the layout by a pixel. */\n  @media (forced-colors: active) {\n    .v-drawer {\n      outline: 1px solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DA,IAAMkC,IAAQC,GAYRC,IAAIC,EAAY,GAChBC,IAAqBC,QAAeL,EAAM,cAAcE,EAAE,MAAM,OAAO,KAAK,GAG5EI,IAAOvC,EAAoBkC,GAAC,MAA0B,GAoBtDO,IAAUC,EAAM,GAChBC,IAAaD,EAAM,GAEnB,EACJ,aACA,aACA,cACA,SACA,OAAAE,GACA,YACA,aACA,kBACA,uBACEC,EAAeN,GAAM;GACvB,0BAA0BN,EAAM;GAChC,wBAAwBA,EAAM;GAC9B,gBAAgB;EAClB,CAAC,GAEKa,IAAeR,SAAoC;GACvD,SAASS;GACT,iBAAiB;EACnB,EAAE;SAEFf,EAAa;GAKX;GAKA,OAAAY;GAKA,IAAII;EACN,CAAC,cAIC5C,EAAAA,GAAAA,EAAAA,GAAAA,MAAAA,CAAAA,EAAqDiD,EAAA,QAAA,WAAA,EAA/B,cAAeP,EAAA,MAAY,CAAA,GAEzCzC,EAAAkD,CAAA,KADRtD,EAAA,GAAAC,EAmES,UAnETI,EAmES;;GAjEH,SAAA;GAAJ,KAAI0C;GACH,mBAAiBd,EAAA,QAAQ7B,EAAAoC,CAAA,IAAU,KAAA;GACnC,oBAAkBP,EAAA,WAAW7B,EAAAsC,CAAA,IAAa,KAAA;EACnC,GAAAtC,EAAAoD,CAAA,GAAS;GACjB,OAAM;GACL,aAAWvB,EAAA;GACX,aAAWA,EAAA;GACX,OAAK,EAAA,mBAAuB7B,EAAAqD,CAAA,CAAO,CAACxB,EAAA,MAAM,EAAA;GAC1C,SAAK,AAAAyB,EAAA,QAAE,GAAAC,MAAAvD,EAAAwD,CAAA,KAAAxD,EAAAwD,CAAA,CAAA,CAAA,GAAAD,CAAA;GACP,UAAM,AAAAD,EAAA,QAAE,GAAAC,MAAAvD,EAAAyD,CAAA,KAAAzD,EAAAyD,CAAA,CAAA,CAAA,GAAAF,CAAA;GACR,eAAW,AAAAD,EAAA,QAAE,GAAAC,MAAAvD,EAAA0D,CAAA,KAAA1D,EAAA0D,CAAA,CAAA,CAAA,GAAAH,CAAA;GACb,SAAK,AAAAD,EAAA,QAAE,GAAAC,MAAAvD,EAAA2D,CAAA,KAAA3D,EAAA2D,CAAA,CAAA,CAAA,GAAAJ,CAAA;;GAMRrD,EAqCS,UArCTgB,GAqCS,CApCPnB,EAqBOiD,EAAA,QAAA,UAAA,CAAA,SAAA,CApBL9C,EAmBM,OAnBNiB,GAmBM,CAjBIU,EAAA,SADRjC,EAAA,GAAAO,EAQcC,GAAA;;IANX,IAAIJ,EAAAoC,CAAA;IACL,IAAG;IACH,SAAQ;IACR,OAAM;;IAEN,SAAA/B,QAAW,CAARC,EAAAC,EAAAsB,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;GAGF,GAAA,GAAA,CAAA,IAAA,CAAA,KAAAoC,EAAA,IAAA,EAAA,GAAApC,EAAA,YADRjC,EAAA,GAAAO,EAQcC,GAAA;;IANX,IAAIJ,EAAAsC,CAAA;IACL,SAAQ;IACR,MAAK;IACL,OAAM;;IAEN,SAAAjC,QAAc,CAAXC,EAAAC,EAAAsB,EAAA,QAAQ,GAAA,CAAA,CAAA,CAAA;;GAIL,GAAA,GAAA,CAAA,IAAA,CAAA,KAAAoC,EAAA,IAAA,EAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAApC,EAAA,aAAanC,EAAAA,OAAM,qBAA/BE,EAAA,GAAAC,EAaM,OAbNuB,GAaM,CAZJrB,EAA8BiD,EAAA,QAAA,gBAAA,GAErBnB,EAAA,yBADTjC,EAAA,GAAAO,EAUcM,GAAA;;IARZ,OAAM;IACL,OAAOuB,EAAA;IACR,SAAQ;IACR,MAAK;IACL,MAAK;IACJ,SAAOhC,EAAAU,CAAA;;IAER,SAAAL,QAA2B,CAA3BM,EAA2BC,GAAA,EAAnB,MAAMZ,EAAAa,CAAA,EAAS,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,CAAA,CAAA;;;GAI7BX,EAMM,OANNmB,GAMM;IALJ,AAAAiC,EAAA,OAAApD,EAAoE,QAAA;KAA9D,OAAM;KAAmC,eAAY;;IAC3DA,EAEM,OAFNoB,GAEM,CADJvB,EAAQiD,EAAA,QAAA,SAAA,CAAA,CAAA;IAEV,AAAAM,EAAA,OAAApD,EAAuE,QAAA;KAAjE,OAAM;KAAsC,eAAY;;;GAElDR,EAAAA,OAAO,UAArBE,EAAA,GAAAC,EAES,UAFT0B,GAES,CADPxB,EAAsBiD,EAAA,QAAA,QAAA,CAAA,CAAA,KAAAiB,EAAA,IAAA,EAAA"}

package/dist/components/VEmptyState/VEmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"VEmptyState.js","names":[],"sources":["../../../src/components/VEmptyState/VEmptyState.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/** A static block saying that there is nothing to show, and what to do about it. */\nimport { computed } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\n/** The scale of the block: a panel or a list, a section, a whole page. */\nexport type EmptyStateSize = 'sm' | 'md' | 'lg'\n\n/** The heading level the title is rendered at. */\nexport type EmptyStateHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6\n\ninterface EmptyStateProps {\n  /** What is empty, in a few words: \"No invoices yet\". */\n  title?: string\n  /** A sentence saying why, or what to do next. The default slot replaces it. */\n  description?: string\n  /** An icon drawn in a round badge above the title. The `#media` slot replaces it. */\n  icon?: IconSource\n  /** The scale of the block: `sm` for a panel or a list, `lg` for a whole page. */\n  size?: EmptyStateSize\n  /**\n   * Renders the title as a heading of this level, without changing how it looks. Left out, the\n   * title is a paragraph, which keeps a block inside a panel out of the document outline.\n   */\n  headingLevel?: EmptyStateHeadingLevel\n}\n\nconst props = withDefaults(defineProps<EmptyStateProps>(), {\n  title: undefined,\n  description: undefined,\n  icon: undefined,\n  size: 'md',\n  headingLevel: undefined,\n})\n\ndefineSlots<{\n  /** Replaces `description`: text with links or formatting of its own. */\n  default?(): unknown\n  /** An illustration replacing the icon badge. */\n  media?(): unknown\n  /** The buttons or links that get out of the empty state: create, import, clear the search. */\n  actions?(): unknown\n}>()\n\nconst titleTag = computed(() => (props.headingLevel ? `h${props.headingLevel}` : 'p'))\n</script>\n\n<template>\n  <div class=\"v-empty-state\" :data-size=\"size\">\n    <div v-if=\"$slots.media\" class=\"v-empty-state-media\">\n      <slot name=\"media\" />\n    </div>\n    <span v-else-if=\"icon\" class=\"v-empty-state-icon\">\n      <VIcon v-bind=\"iconProps(icon)\" />\n    </span>\n    <component :is=\"titleTag\" v-if=\"title\" class=\"v-empty-state-title\">{{ title }}</component>\n    <div v-if=\"$slots.default || description\" class=\"v-empty-state-description\">\n      <slot>{{ description }}</slot>\n    </div>\n    <div v-if=\"$slots.actions\" class=\"v-empty-state-actions\">\n      <slot name=\"actions\" />\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-empty-state {\n    --empty-state-media: var(--vectis-control-size-empty-state-media-md);\n    --empty-state-gap: var(--vectis-space-3);\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--empty-state-gap);\n    padding: var(--vectis-space-8) var(--vectis-space-6);\n    text-align: center;\n    color: var(--vectis-color-text);\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-empty-state[data-size='sm'] {\n    --empty-state-media: var(--vectis-control-size-empty-state-media-sm);\n    --empty-state-gap: var(--vectis-space-2);\n\n    padding: var(--vectis-space-4);\n  }\n\n  .v-empty-state[data-size='lg'] {\n    --empty-state-media: var(--vectis-control-size-empty-state-media-lg);\n    --empty-state-gap: var(--vectis-space-4);\n\n    padding: var(--vectis-space-12) var(--vectis-space-8);\n  }\n\n  /* The glyph takes half the badge, whatever its size. */\n  .v-empty-state-icon {\n    --vectis-icon-size: calc(var(--empty-state-media) / 2);\n\n    display: inline-grid;\n    place-items: center;\n    inline-size: var(--empty-state-media);\n    block-size: var(--empty-state-media);\n    border-radius: var(--vectis-radius-full);\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* The badge's gap to the title is a step wider than the others: it opens the block. */\n  .v-empty-state-icon,\n  .v-empty-state-media {\n    margin-block-end: var(--vectis-space-1);\n  }\n\n  .v-empty-state-title,\n  .v-empty-state-description {\n    max-inline-size: var(--vectis-control-size-empty-state-text-max);\n    margin: 0;\n  }\n\n  .v-empty-state-title {\n    font-size: var(--vectis-text-heading-4-size);\n    font-weight: var(--vectis-text-heading-4-weight);\n    line-height: var(--vectis-text-heading-4-leading);\n  }\n\n  .v-empty-state-description {\n    font-size: var(--vectis-text-body-md-size);\n    font-weight: var(--vectis-text-body-md-weight);\n    line-height: var(--vectis-text-body-md-leading);\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-empty-state[data-size='sm'] .v-empty-state-title {\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  .v-empty-state[data-size='sm'] .v-empty-state-description {\n    font-size: var(--vectis-text-body-sm-size);\n    font-weight: var(--vectis-text-body-sm-weight);\n    line-height: var(--vectis-text-body-sm-leading);\n  }\n\n  .v-empty-state[data-size='lg'] .v-empty-state-title {\n    font-size: var(--vectis-text-heading-3-size);\n    font-weight: var(--vectis-text-heading-3-weight);\n    line-height: var(--vectis-text-heading-3-leading);\n  }\n\n  .v-empty-state-actions {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    gap: var(--vectis-space-3);\n    margin-block-start: var(--vectis-space-2);\n  }\n\n  /* Without a fill, the badge keeps its outline so the icon still sits in a circle. */\n  @media (forced-colors: active) {\n    .v-empty-state-icon {\n      outline: 1px solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VEmptyState.js","names":["_sfc_main","VEmptyState_vue_vue_type_script_setup_true_lang_default","VEmptyState_default"],"sources":["../../../src/components/VEmptyState/VEmptyState.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/** A static block saying that there is nothing to show, and what to do about it. */\nimport { computed } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\n/** The scale of the block: a panel or a list, a section, a whole page. */\nexport type EmptyStateSize = 'sm' | 'md' | 'lg'\n\n/** The heading level the title is rendered at. */\nexport type EmptyStateHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6\n\ninterface EmptyStateProps {\n  /** What is empty, in a few words: \"No invoices yet\". */\n  title?: string\n  /** A sentence saying why, or what to do next. The default slot replaces it. */\n  description?: string\n  /** An icon drawn in a round badge above the title. The `#media` slot replaces it. */\n  icon?: IconSource\n  /** The scale of the block: `sm` for a panel or a list, `lg` for a whole page. */\n  size?: EmptyStateSize\n  /**\n   * Renders the title as a heading of this level, without changing how it looks. Left out, the\n   * title is a paragraph, which keeps a block inside a panel out of the document outline.\n   */\n  headingLevel?: EmptyStateHeadingLevel\n}\n\nconst props = withDefaults(defineProps<EmptyStateProps>(), {\n  title: undefined,\n  description: undefined,\n  icon: undefined,\n  size: 'md',\n  headingLevel: undefined,\n})\n\ndefineSlots<{\n  /** Replaces `description`: text with links or formatting of its own. */\n  default?(): unknown\n  /** An illustration replacing the icon badge. */\n  media?(): unknown\n  /** The buttons or links that get out of the empty state: create, import, clear the search. */\n  actions?(): unknown\n}>()\n\nconst titleTag = computed(() => (props.headingLevel ? `h${props.headingLevel}` : 'p'))\n</script>\n\n<template>\n  <div class=\"v-empty-state\" :data-size=\"size\">\n    <div v-if=\"$slots.media\" class=\"v-empty-state-media\">\n      <slot name=\"media\" />\n    </div>\n    <span v-else-if=\"icon\" class=\"v-empty-state-icon\">\n      <VIcon v-bind=\"iconProps(icon)\" />\n    </span>\n    <component :is=\"titleTag\" v-if=\"title\" class=\"v-empty-state-title\">{{ title }}</component>\n    <div v-if=\"$slots.default || description\" class=\"v-empty-state-description\">\n      <slot>{{ description }}</slot>\n    </div>\n    <div v-if=\"$slots.actions\" class=\"v-empty-state-actions\">\n      <slot name=\"actions\" />\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-empty-state {\n    --empty-state-media: var(--vectis-control-size-empty-state-media-md);\n    --empty-state-gap: var(--vectis-space-3);\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--empty-state-gap);\n    padding: var(--vectis-space-8) var(--vectis-space-6);\n    text-align: center;\n    color: var(--vectis-color-text);\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-empty-state[data-size='sm'] {\n    --empty-state-media: var(--vectis-control-size-empty-state-media-sm);\n    --empty-state-gap: var(--vectis-space-2);\n\n    padding: var(--vectis-space-4);\n  }\n\n  .v-empty-state[data-size='lg'] {\n    --empty-state-media: var(--vectis-control-size-empty-state-media-lg);\n    --empty-state-gap: var(--vectis-space-4);\n\n    padding: var(--vectis-space-12) var(--vectis-space-8);\n  }\n\n  /* The glyph takes half the badge, whatever its size. */\n  .v-empty-state-icon {\n    --vectis-icon-size: calc(var(--empty-state-media) / 2);\n\n    display: inline-grid;\n    place-items: center;\n    inline-size: var(--empty-state-media);\n    block-size: var(--empty-state-media);\n    border-radius: var(--vectis-radius-full);\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* The badge's gap to the title is a step wider than the others: it opens the block. */\n  .v-empty-state-icon,\n  .v-empty-state-media {\n    margin-block-end: var(--vectis-space-1);\n  }\n\n  .v-empty-state-title,\n  .v-empty-state-description {\n    max-inline-size: var(--vectis-control-size-empty-state-text-max);\n    margin: 0;\n  }\n\n  .v-empty-state-title {\n    font-size: var(--vectis-text-heading-4-size);\n    font-weight: var(--vectis-text-heading-4-weight);\n    line-height: var(--vectis-text-heading-4-leading);\n  }\n\n  .v-empty-state-description {\n    font-size: var(--vectis-text-body-md-size);\n    font-weight: var(--vectis-text-body-md-weight);\n    line-height: var(--vectis-text-body-md-leading);\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-empty-state[data-size='sm'] .v-empty-state-title {\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  .v-empty-state[data-size='sm'] .v-empty-state-description {\n    font-size: var(--vectis-text-body-sm-size);\n    font-weight: var(--vectis-text-body-sm-weight);\n    line-height: var(--vectis-text-body-sm-leading);\n  }\n\n  .v-empty-state[data-size='lg'] .v-empty-state-title {\n    font-size: var(--vectis-text-heading-3-size);\n    font-weight: var(--vectis-text-heading-3-weight);\n    line-height: var(--vectis-text-heading-3-leading);\n  }\n\n  .v-empty-state-actions {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    gap: var(--vectis-space-3);\n    margin-block-start: var(--vectis-space-2);\n  }\n\n  /* Without a fill, the badge keeps its outline so the icon still sits in a circle. */\n  @media (forced-colors: active) {\n    .v-empty-state-icon {\n      outline: 1px solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"VEmptyState.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VEmptyState/VEmptyState.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/** A static block saying that there is nothing to show, and what to do about it. */\nimport { computed } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\n/** The scale of the block: a panel or a list, a section, a whole page. */\nexport type EmptyStateSize = 'sm' | 'md' | 'lg'\n\n/** The heading level the title is rendered at. */\nexport type EmptyStateHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6\n\ninterface EmptyStateProps {\n  /** What is empty, in a few words: \"No invoices yet\". */\n  title?: string\n  /** A sentence saying why, or what to do next. The default slot replaces it. */\n  description?: string\n  /** An icon drawn in a round badge above the title. The `#media` slot replaces it. */\n  icon?: IconSource\n  /** The scale of the block: `sm` for a panel or a list, `lg` for a whole page. */\n  size?: EmptyStateSize\n  /**\n   * Renders the title as a heading of this level, without changing how it looks. Left out, the\n   * title is a paragraph, which keeps a block inside a panel out of the document outline.\n   */\n  headingLevel?: EmptyStateHeadingLevel\n}\n\nconst props = withDefaults(defineProps<EmptyStateProps>(), {\n  title: undefined,\n  description: undefined,\n  icon: undefined,\n  size: 'md',\n  headingLevel: undefined,\n})\n\ndefineSlots<{\n  /** Replaces `description`: text with links or formatting of its own. */\n  default?(): unknown\n  /** An illustration replacing the icon badge. */\n  media?(): unknown\n  /** The buttons or links that get out of the empty state: create, import, clear the search. */\n  actions?(): unknown\n}>()\n\nconst titleTag = computed(() => (props.headingLevel ? `h${props.headingLevel}` : 'p'))\n</script>\n\n<template>\n  <div class=\"v-empty-state\" :data-size=\"size\">\n    <div v-if=\"$slots.media\" class=\"v-empty-state-media\">\n      <slot name=\"media\" />\n    </div>\n    <span v-else-if=\"icon\" class=\"v-empty-state-icon\">\n      <VIcon v-bind=\"iconProps(icon)\" />\n    </span>\n    <component :is=\"titleTag\" v-if=\"title\" class=\"v-empty-state-title\">{{ title }}</component>\n    <div v-if=\"$slots.default || description\" class=\"v-empty-state-description\">\n      <slot>{{ description }}</slot>\n    </div>\n    <div v-if=\"$slots.actions\" class=\"v-empty-state-actions\">\n      <slot name=\"actions\" />\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-empty-state {\n    --empty-state-media: var(--vectis-control-size-empty-state-media-md);\n    --empty-state-gap: var(--vectis-space-3);\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--empty-state-gap);\n    padding: var(--vectis-space-8) var(--vectis-space-6);\n    text-align: center;\n    color: var(--vectis-color-text);\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-empty-state[data-size='sm'] {\n    --empty-state-media: var(--vectis-control-size-empty-state-media-sm);\n    --empty-state-gap: var(--vectis-space-2);\n\n    padding: var(--vectis-space-4);\n  }\n\n  .v-empty-state[data-size='lg'] {\n    --empty-state-media: var(--vectis-control-size-empty-state-media-lg);\n    --empty-state-gap: var(--vectis-space-4);\n\n    padding: var(--vectis-space-12) var(--vectis-space-8);\n  }\n\n  /* The glyph takes half the badge, whatever its size. */\n  .v-empty-state-icon {\n    --vectis-icon-size: calc(var(--empty-state-media) / 2);\n\n    display: inline-grid;\n    place-items: center;\n    inline-size: var(--empty-state-media);\n    block-size: var(--empty-state-media);\n    border-radius: var(--vectis-radius-full);\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* The badge's gap to the title is a step wider than the others: it opens the block. */\n  .v-empty-state-icon,\n  .v-empty-state-media {\n    margin-block-end: var(--vectis-space-1);\n  }\n\n  .v-empty-state-title,\n  .v-empty-state-description {\n    max-inline-size: var(--vectis-control-size-empty-state-text-max);\n    margin: 0;\n  }\n\n  .v-empty-state-title {\n    font-size: var(--vectis-text-heading-4-size);\n    font-weight: var(--vectis-text-heading-4-weight);\n    line-height: var(--vectis-text-heading-4-leading);\n  }\n\n  .v-empty-state-description {\n    font-size: var(--vectis-text-body-md-size);\n    font-weight: var(--vectis-text-body-md-weight);\n    line-height: var(--vectis-text-body-md-leading);\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-empty-state[data-size='sm'] .v-empty-state-title {\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  .v-empty-state[data-size='sm'] .v-empty-state-description {\n    font-size: var(--vectis-text-body-sm-size);\n    font-weight: var(--vectis-text-body-sm-weight);\n    line-height: var(--vectis-text-body-sm-leading);\n  }\n\n  .v-empty-state[data-size='lg'] .v-empty-state-title {\n    font-size: var(--vectis-text-heading-3-size);\n    font-weight: var(--vectis-text-heading-3-weight);\n    line-height: var(--vectis-text-heading-3-leading);\n  }\n\n  .v-empty-state-actions {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    gap: var(--vectis-space-3);\n    margin-block-start: var(--vectis-space-2);\n  }\n\n  /* Without a fill, the badge keeps its outline so the icon still sits in a circle. */\n  @media (forced-colors: active) {\n    .v-empty-state-icon {\n      outline: 1px solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EA+BA,IAAM,IAAQ,GAiBR,IAAW,QAAgB,EAAM,eAAe,IAAI,EAAM,iBAAiB,GAAI;yBAInF,EAcM,OAAA;GAdD,OAAM;GAAiB,aAAW,EAAA;;GAC1BA,EAAAA,OAAO,SAAA,EAAA,GAAlB,EAEM,OAFN,GAEM,CADJ,EAAqB,EAAA,QAAA,OAAA,CAAA,CAAA,KAEN,EAAA,QAAA,EAAA,GAAjB,EAEO,QAFP,GAEO,CADL,EAAkC,GAAA,EAAA,EAAnB,EAAA,CAAA,CAAS,CAAC,EAAA,IAAI,CAAA,CAAA,GAAA,MAAA,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;GAEC,EAAA,SAAA,EAAA,GAAhC,EAA0F,EAA1E,EAAA,KAAQ,GAAA;;IAAe,OAAM;;qBAAiC,CAAA,EAAA,EAAR,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;;GAChEA,EAAAA,OAAO,WAAW,EAAA,eAAA,EAAA,GAA7B,EAEM,OAFN,GAEM,CADJ,EAA8B,EAAA,QAAA,WAAA,CAAA,SAAA,CAAA,EAAA,EAArB,EAAA,WAAW,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;GAEXA,EAAAA,OAAO,WAAA,EAAA,GAAlB,EAEM,OAFN,GAEM,CADJ,EAAuB,EAAA,QAAA,SAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}
+{"version":3,"file":"VEmptyState.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_renderSlot","_createVNode","VIcon","_normalizeProps","_guardReactiveProps","_unref","_createCommentVNode","_createBlock","_resolveDynamicComponent","_withCtx","_createTextVNode","_toDisplayString","VIcon_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","VEmptyState_vue_vue_type_script_setup_true_lang_default","props","__props","titleTag","computed","openBlock","createElementBlock","_ctx","renderSlot","createVNode","normalizeProps","guardReactiveProps","unref","iconProps","createCommentVNode","createBlock","resolveDynamicComponent","withCtx","createTextVNode","toDisplayString"],"sources":["../../../src/components/VEmptyState/VEmptyState.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/** A static block saying that there is nothing to show, and what to do about it. */\nimport { computed } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\n/** The scale of the block: a panel or a list, a section, a whole page. */\nexport type EmptyStateSize = 'sm' | 'md' | 'lg'\n\n/** The heading level the title is rendered at. */\nexport type EmptyStateHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6\n\ninterface EmptyStateProps {\n  /** What is empty, in a few words: \"No invoices yet\". */\n  title?: string\n  /** A sentence saying why, or what to do next. The default slot replaces it. */\n  description?: string\n  /** An icon drawn in a round badge above the title. The `#media` slot replaces it. */\n  icon?: IconSource\n  /** The scale of the block: `sm` for a panel or a list, `lg` for a whole page. */\n  size?: EmptyStateSize\n  /**\n   * Renders the title as a heading of this level, without changing how it looks. Left out, the\n   * title is a paragraph, which keeps a block inside a panel out of the document outline.\n   */\n  headingLevel?: EmptyStateHeadingLevel\n}\n\nconst props = withDefaults(defineProps<EmptyStateProps>(), {\n  title: undefined,\n  description: undefined,\n  icon: undefined,\n  size: 'md',\n  headingLevel: undefined,\n})\n\ndefineSlots<{\n  /** Replaces `description`: text with links or formatting of its own. */\n  default?(): unknown\n  /** An illustration replacing the icon badge. */\n  media?(): unknown\n  /** The buttons or links that get out of the empty state: create, import, clear the search. */\n  actions?(): unknown\n}>()\n\nconst titleTag = computed(() => (props.headingLevel ? `h${props.headingLevel}` : 'p'))\n</script>\n\n<template>\n  <div class=\"v-empty-state\" :data-size=\"size\">\n    <div v-if=\"$slots.media\" class=\"v-empty-state-media\">\n      <slot name=\"media\" />\n    </div>\n    <span v-else-if=\"icon\" class=\"v-empty-state-icon\">\n      <VIcon v-bind=\"iconProps(icon)\" />\n    </span>\n    <component :is=\"titleTag\" v-if=\"title\" class=\"v-empty-state-title\">{{ title }}</component>\n    <div v-if=\"$slots.default || description\" class=\"v-empty-state-description\">\n      <slot>{{ description }}</slot>\n    </div>\n    <div v-if=\"$slots.actions\" class=\"v-empty-state-actions\">\n      <slot name=\"actions\" />\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-empty-state {\n    --empty-state-media: var(--vectis-control-size-empty-state-media-md);\n    --empty-state-gap: var(--vectis-space-3);\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--empty-state-gap);\n    padding: var(--vectis-space-8) var(--vectis-space-6);\n    text-align: center;\n    color: var(--vectis-color-text);\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-empty-state[data-size='sm'] {\n    --empty-state-media: var(--vectis-control-size-empty-state-media-sm);\n    --empty-state-gap: var(--vectis-space-2);\n\n    padding: var(--vectis-space-4);\n  }\n\n  .v-empty-state[data-size='lg'] {\n    --empty-state-media: var(--vectis-control-size-empty-state-media-lg);\n    --empty-state-gap: var(--vectis-space-4);\n\n    padding: var(--vectis-space-12) var(--vectis-space-8);\n  }\n\n  /* The glyph takes half the badge, whatever its size. */\n  .v-empty-state-icon {\n    --vectis-icon-size: calc(var(--empty-state-media) / 2);\n\n    display: inline-grid;\n    place-items: center;\n    inline-size: var(--empty-state-media);\n    block-size: var(--empty-state-media);\n    border-radius: var(--vectis-radius-full);\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* The badge's gap to the title is a step wider than the others: it opens the block. */\n  .v-empty-state-icon,\n  .v-empty-state-media {\n    margin-block-end: var(--vectis-space-1);\n  }\n\n  .v-empty-state-title,\n  .v-empty-state-description {\n    max-inline-size: var(--vectis-control-size-empty-state-text-max);\n    margin: 0;\n  }\n\n  .v-empty-state-title {\n    font-size: var(--vectis-text-heading-4-size);\n    font-weight: var(--vectis-text-heading-4-weight);\n    line-height: var(--vectis-text-heading-4-leading);\n  }\n\n  .v-empty-state-description {\n    font-size: var(--vectis-text-body-md-size);\n    font-weight: var(--vectis-text-body-md-weight);\n    line-height: var(--vectis-text-body-md-leading);\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-empty-state[data-size='sm'] .v-empty-state-title {\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  .v-empty-state[data-size='sm'] .v-empty-state-description {\n    font-size: var(--vectis-text-body-sm-size);\n    font-weight: var(--vectis-text-body-sm-weight);\n    line-height: var(--vectis-text-body-sm-leading);\n  }\n\n  .v-empty-state[data-size='lg'] .v-empty-state-title {\n    font-size: var(--vectis-text-heading-3-size);\n    font-weight: var(--vectis-text-heading-3-weight);\n    line-height: var(--vectis-text-heading-3-leading);\n  }\n\n  .v-empty-state-actions {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    gap: var(--vectis-space-3);\n    margin-block-start: var(--vectis-space-2);\n  }\n\n  /* Without a fill, the badge keeps its outline so the icon still sits in a circle. */\n  @media (forced-colors: active) {\n    .v-empty-state-icon {\n      outline: 1px solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EA+BA,IAAMsB,IAAQC,GAiBRC,IAAWC,QAAgBH,EAAM,eAAe,IAAIA,EAAM,iBAAiB,GAAI;oBAInFrB,EAAA,GAAAC,EAcM,OAAA;GAdD,OAAM;GAAiB,aAAWqB,EAAA;;GAC1BvB,EAAAA,OAAO,SAAlBC,EAAA,GAAAC,EAEM,OAFNe,GAEM,CADJd,EAAqByB,EAAA,QAAA,OAAA,CAAA,CAAA,KAENL,EAAA,QAAjBtB,EAAA,GAAAC,EAEO,QAFPgB,GAEO,CADLd,EAAkCC,GAAAC,EAAAC,EAAnBC,EAAA0B,CAAA,CAAS,CAACX,EAAA,IAAI,CAAA,CAAA,GAAA,MAAA,EAAA,CAAA,CAAA,KAAAY,EAAA,IAAA,EAAA;GAECZ,EAAA,SAAhCtB,EAAA,GAAAS,EAA0FC,EAA1Ea,EAAA,KAAQ,GAAA;;IAAe,OAAM;;IAAsB,SAAAZ,QAAW,CAARC,EAAAC,EAAAS,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;;GAChEvB,EAAAA,OAAO,WAAWuB,EAAA,eAA7BtB,EAAA,GAAAC,EAEM,OAFNiB,GAEM,CADJhB,EAA8ByB,EAAA,QAAA,WAAA,CAAA,SAAA,CAArBf,EAAAC,EAAAS,EAAA,WAAW,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAAY,EAAA,IAAA,EAAA;GAEXnC,EAAAA,OAAO,WAAlBC,EAAA,GAAAC,EAEM,OAFNkB,GAEM,CADJjB,EAAuByB,EAAA,QAAA,SAAA,CAAA,CAAA,KAAAO,EAAA,IAAA,EAAA"}

package/dist/components/VField/VField.js.map

@@ -1 +1 @@
-{"version":3,"file":"VField.js","names":[],"sources":["../../../src/components/VField/VField.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * A label, a hint and an error message around one control of any kind. VField owns no control:\n * it hands the slot the attributes that tie the control to its label and messages, and the\n * consumer binds them. That works the same for a library control, a native element or a\n * third-party component.\n */\n\nimport { computed, useId } from 'vue'\n\nimport VTypography from '../VTypography/VTypography.vue'\nimport VFieldAnnouncer from './VFieldAnnouncer.vue'\nimport VFieldMessage from './VFieldMessage.vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { joinIds } from '../../utils/ids'\n\n/** Where the label sits: above the control, or at its start. */\nexport type FieldLabelPosition = 'top' | 'start'\n\n/**\n * What the slot hands over, to bind on the control with `v-bind`: its id, the references to\n * the hint and the error, `aria-invalid` while there is an error, `required`, `disabled`, and the\n * attributes set on the VField other than `class` and `style`. For a group, `aria-labelledby`\n * replaces the states a group may not carry. A key is absent rather than undefined, so that\n * binding it never cancels a value the control sets itself.\n */\nexport type FieldControlProps = {\n  id: string\n  'aria-labelledby'?: string\n  'aria-describedby'?: string\n  'aria-invalid'?: 'true'\n  required?: true\n  disabled?: true\n} & Record<string, unknown>\n\ninterface FieldProps {\n  /** The label, tied to the control so that clicking it focuses the control. */\n  label?: string\n  /** A line of help under the control, read along with it. */\n  hint?: string\n  /**\n   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the control invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /**\n   * Marks the control as required: an asterisk follows the label, and `required` is handed to\n   * the control, which is what assistive technology announces.\n   */\n  required?: boolean\n  /**\n   * Marks the control as disabled: the label and the hint grey out, and `disabled` is handed to\n   * the control.\n   */\n  disabled?: boolean\n  /** Hides the label visually. It still names the control for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the control (`top`, the default), or at its start, in a column\n   * of its own. A start label moves back above the control when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\n  /**\n   * Names a group of elements rather than one control, such as a row of fields with a `group`\n   * role. The label is then plain text that the slot's `aria-labelledby` points at, since a\n   * `<label for>` names one element, and the slot hands over neither `aria-invalid`, `required`\n   * nor `disabled`, which a group may not carry.\n   */\n  group?: boolean\n}\n\nconst props = withDefaults(defineProps<FieldProps>(), {\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  disabled: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  group: false,\n})\n\ndefineSlots<{\n  /** The control. Bind `fieldProps` on it. */\n  default(props: { fieldProps: FieldControlProps }): unknown\n  /**\n   * Content at the end of the hint's line, such as a character counter. Bind `id` on it: it\n   * joins the control's `aria-describedby`, after the error and the hint.\n   */\n  meta?(props: { id: string }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst { fieldId, hintId, errorId, describedBy } = useFieldIds(\n  attrs,\n  () => !!props.hint && !props.error,\n  undefined,\n  () => !!props.error,\n)\n\nconst labelId = useId()\nconst metaId = useId()\n\nconst fieldProps = computed<FieldControlProps>(() => {\n  const bound: FieldControlProps = { ...forwardedAttrs.value, id: fieldId.value }\n  if (describedBy.value) bound['aria-describedby'] = describedBy.value\n  if (props.group) {\n    // A consumer's `aria-labelledby` or `aria-label` names the group instead: ours would cancel\n    // an `aria-label`, `aria-labelledby` winning in the accessible name computation.\n    const named = attrs['aria-labelledby'] !== undefined || attrs['aria-label'] !== undefined\n    if (props.label && !named) bound['aria-labelledby'] = labelId\n    return bound\n  }\n  if (props.error) bound['aria-invalid'] = 'true'\n  if (props.required) bound.required = true\n  if (props.disabled) bound.disabled = true\n  return bound\n})\n\n// Called from the template, where reading `$slots` is reactive, unlike in a computed.\nfunction withMeta(bound: FieldControlProps): FieldControlProps {\n  return { ...bound, 'aria-describedby': joinIds(bound['aria-describedby'], metaId) }\n}\n</script>\n\n<template>\n  <div\n    class=\"v-field\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-label-position=\"labelPosition\"\n    :data-disabled=\"disabled ? '' : undefined\"\n  >\n    <VTypography\n      v-if=\"label\"\n      :id=\"group ? labelId : undefined\"\n      :as=\"group ? 'span' : 'label'\"\n      variant=\"label\"\n      class=\"v-field-label\"\n      :class=\"{ 'v-visually-hidden': hideLabel }\"\n      :for=\"group ? undefined : fieldId\"\n    >\n      {{ label }}<span v-if=\"required\" class=\"v-field-required\" aria-hidden=\"true\">*</span>\n    </VTypography>\n    <div class=\"v-field-main\">\n      <slot :field-props=\"$slots.meta ? withMeta(fieldProps) : fieldProps\" />\n      <div v-if=\"error || hint || $slots.meta\" class=\"v-field-meta\">\n        <VFieldMessage :hint=\"hint\" :error=\"error\" :hint-id=\"hintId\" :error-id=\"errorId\" />\n        <slot :id=\"metaId\" name=\"meta\" />\n      </div>\n      <VFieldAnnouncer :text=\"error\" />\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-field-main {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    min-inline-size: 0;\n  }\n\n  /* Child combinators, so that a disabled field leaves a field nested in it alone. */\n  .v-field[data-disabled] > .v-field-label,\n  .v-field[data-disabled] > .v-field-main > .v-field-meta > .v-field-hint {\n    --typography-color: var(--vectis-color-text-subtle);\n  }\n\n  /*\n   * Side by side without a container query, as in VCard: the label keeps its basis and the\n   * control takes the rest, until the two bases no longer fit on one line and the control wraps\n   * under the label. A hidden label is out of the flow, and the control takes the whole line.\n   */\n  .v-field[data-label-position='start'] {\n    flex-flow: row wrap;\n    column-gap: var(--vectis-space-4);\n  }\n\n  .v-field[data-label-position='start'] > .v-field-label {\n    flex: 1 1 var(--vectis-control-size-field-label);\n    /* Centres the first line of the label on a medium control, the size forms use most. */\n    padding-block-start: calc(\n      (\n          var(--vectis-control-height-md) - var(--vectis-text-label-size) *\n            var(--vectis-text-label-leading)\n        ) /\n        2\n    );\n  }\n\n  .v-field[data-label-position='start'] > .v-field-main {\n    flex: 999 1 var(--vectis-control-size-field-control-min);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VField.js","names":["_sfc_main","VField_vue_vue_type_script_setup_true_lang_default","VField_default"],"sources":["../../../src/components/VField/VField.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * A label, a hint and an error message around one control of any kind. VField owns no control:\n * it hands the slot the attributes that tie the control to its label and messages, and the\n * consumer binds them. That works the same for a library control, a native element or a\n * third-party component.\n */\n\nimport { computed, useId } from 'vue'\n\nimport VTypography from '../VTypography/VTypography.vue'\nimport VFieldAnnouncer from './VFieldAnnouncer.vue'\nimport VFieldMessage from './VFieldMessage.vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { joinIds } from '../../utils/ids'\n\n/** Where the label sits: above the control, or at its start. */\nexport type FieldLabelPosition = 'top' | 'start'\n\n/**\n * What the slot hands over, to bind on the control with `v-bind`: its id, the references to\n * the hint and the error, `aria-invalid` while there is an error, `required`, `disabled`, and the\n * attributes set on the VField other than `class` and `style`. For a group, `aria-labelledby`\n * replaces the states a group may not carry. A key is absent rather than undefined, so that\n * binding it never cancels a value the control sets itself.\n */\nexport type FieldControlProps = {\n  id: string\n  'aria-labelledby'?: string\n  'aria-describedby'?: string\n  'aria-invalid'?: 'true'\n  required?: true\n  disabled?: true\n} & Record<string, unknown>\n\ninterface FieldProps {\n  /** The label, tied to the control so that clicking it focuses the control. */\n  label?: string\n  /** A line of help under the control, read along with it. */\n  hint?: string\n  /**\n   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the control invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /**\n   * Marks the control as required: an asterisk follows the label, and `required` is handed to\n   * the control, which is what assistive technology announces.\n   */\n  required?: boolean\n  /**\n   * Marks the control as disabled: the label and the hint grey out, and `disabled` is handed to\n   * the control.\n   */\n  disabled?: boolean\n  /** Hides the label visually. It still names the control for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the control (`top`, the default), or at its start, in a column\n   * of its own. A start label moves back above the control when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\n  /**\n   * Names a group of elements rather than one control, such as a row of fields with a `group`\n   * role. The label is then plain text that the slot's `aria-labelledby` points at, since a\n   * `<label for>` names one element, and the slot hands over neither `aria-invalid`, `required`\n   * nor `disabled`, which a group may not carry.\n   */\n  group?: boolean\n}\n\nconst props = withDefaults(defineProps<FieldProps>(), {\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  disabled: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  group: false,\n})\n\ndefineSlots<{\n  /** The control. Bind `fieldProps` on it. */\n  default(props: { fieldProps: FieldControlProps }): unknown\n  /**\n   * Content at the end of the hint's line, such as a character counter. Bind `id` on it: it\n   * joins the control's `aria-describedby`, after the error and the hint.\n   */\n  meta?(props: { id: string }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst { fieldId, hintId, errorId, describedBy } = useFieldIds(\n  attrs,\n  () => !!props.hint && !props.error,\n  undefined,\n  () => !!props.error,\n)\n\nconst labelId = useId()\nconst metaId = useId()\n\nconst fieldProps = computed<FieldControlProps>(() => {\n  const bound: FieldControlProps = { ...forwardedAttrs.value, id: fieldId.value }\n  if (describedBy.value) bound['aria-describedby'] = describedBy.value\n  if (props.group) {\n    // A consumer's `aria-labelledby` or `aria-label` names the group instead: ours would cancel\n    // an `aria-label`, `aria-labelledby` winning in the accessible name computation.\n    const named = attrs['aria-labelledby'] !== undefined || attrs['aria-label'] !== undefined\n    if (props.label && !named) bound['aria-labelledby'] = labelId\n    return bound\n  }\n  if (props.error) bound['aria-invalid'] = 'true'\n  if (props.required) bound.required = true\n  if (props.disabled) bound.disabled = true\n  return bound\n})\n\n// Called from the template, where reading `$slots` is reactive, unlike in a computed.\nfunction withMeta(bound: FieldControlProps): FieldControlProps {\n  return { ...bound, 'aria-describedby': joinIds(bound['aria-describedby'], metaId) }\n}\n</script>\n\n<template>\n  <div\n    class=\"v-field\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-label-position=\"labelPosition\"\n    :data-disabled=\"disabled ? '' : undefined\"\n  >\n    <VTypography\n      v-if=\"label\"\n      :id=\"group ? labelId : undefined\"\n      :as=\"group ? 'span' : 'label'\"\n      variant=\"label\"\n      class=\"v-field-label\"\n      :class=\"{ 'v-visually-hidden': hideLabel }\"\n      :for=\"group ? undefined : fieldId\"\n    >\n      {{ label }}<span v-if=\"required\" class=\"v-field-required\" aria-hidden=\"true\">*</span>\n    </VTypography>\n    <div class=\"v-field-main\">\n      <slot :field-props=\"$slots.meta ? withMeta(fieldProps) : fieldProps\" />\n      <div v-if=\"error || hint || $slots.meta\" class=\"v-field-meta\">\n        <VFieldMessage :hint=\"hint\" :error=\"error\" :hint-id=\"hintId\" :error-id=\"errorId\" />\n        <slot :id=\"metaId\" name=\"meta\" />\n      </div>\n      <VFieldAnnouncer :text=\"error\" />\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-field-main {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    min-inline-size: 0;\n  }\n\n  /* Child combinators, so that a disabled field leaves a field nested in it alone. */\n  .v-field[data-disabled] > .v-field-label,\n  .v-field[data-disabled] > .v-field-main > .v-field-meta > .v-field-hint {\n    --typography-color: var(--vectis-color-text-subtle);\n  }\n\n  /*\n   * Side by side without a container query, as in VCard: the label keeps its basis and the\n   * control takes the rest, until the two bases no longer fit on one line and the control wraps\n   * under the label. A hidden label is out of the flow, and the control takes the whole line.\n   */\n  .v-field[data-label-position='start'] {\n    flex-flow: row wrap;\n    column-gap: var(--vectis-space-4);\n  }\n\n  .v-field[data-label-position='start'] > .v-field-label {\n    flex: 1 1 var(--vectis-control-size-field-label);\n    /* Centres the first line of the label on a medium control, the size forms use most. */\n    padding-block-start: calc(\n      (\n          var(--vectis-control-height-md) - var(--vectis-text-label-size) *\n            var(--vectis-text-label-leading)\n        ) /\n        2\n    );\n  }\n\n  .v-field[data-label-position='start'] > .v-field-main {\n    flex: 999 1 var(--vectis-control-size-field-control-min);\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"VField.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VField/VField.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * A label, a hint and an error message around one control of any kind. VField owns no control:\n * it hands the slot the attributes that tie the control to its label and messages, and the\n * consumer binds them. That works the same for a library control, a native element or a\n * third-party component.\n */\n\nimport { computed, useId } from 'vue'\n\nimport VTypography from '../VTypography/VTypography.vue'\nimport VFieldAnnouncer from './VFieldAnnouncer.vue'\nimport VFieldMessage from './VFieldMessage.vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { joinIds } from '../../utils/ids'\n\n/** Where the label sits: above the control, or at its start. */\nexport type FieldLabelPosition = 'top' | 'start'\n\n/**\n * What the slot hands over, to bind on the control with `v-bind`: its id, the references to\n * the hint and the error, `aria-invalid` while there is an error, `required`, `disabled`, and the\n * attributes set on the VField other than `class` and `style`. For a group, `aria-labelledby`\n * replaces the states a group may not carry. A key is absent rather than undefined, so that\n * binding it never cancels a value the control sets itself.\n */\nexport type FieldControlProps = {\n  id: string\n  'aria-labelledby'?: string\n  'aria-describedby'?: string\n  'aria-invalid'?: 'true'\n  required?: true\n  disabled?: true\n} & Record<string, unknown>\n\ninterface FieldProps {\n  /** The label, tied to the control so that clicking it focuses the control. */\n  label?: string\n  /** A line of help under the control, read along with it. */\n  hint?: string\n  /**\n   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the control invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /**\n   * Marks the control as required: an asterisk follows the label, and `required` is handed to\n   * the control, which is what assistive technology announces.\n   */\n  required?: boolean\n  /**\n   * Marks the control as disabled: the label and the hint grey out, and `disabled` is handed to\n   * the control.\n   */\n  disabled?: boolean\n  /** Hides the label visually. It still names the control for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the control (`top`, the default), or at its start, in a column\n   * of its own. A start label moves back above the control when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\n  /**\n   * Names a group of elements rather than one control, such as a row of fields with a `group`\n   * role. The label is then plain text that the slot's `aria-labelledby` points at, since a\n   * `<label for>` names one element, and the slot hands over neither `aria-invalid`, `required`\n   * nor `disabled`, which a group may not carry.\n   */\n  group?: boolean\n}\n\nconst props = withDefaults(defineProps<FieldProps>(), {\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  disabled: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  group: false,\n})\n\ndefineSlots<{\n  /** The control. Bind `fieldProps` on it. */\n  default(props: { fieldProps: FieldControlProps }): unknown\n  /**\n   * Content at the end of the hint's line, such as a character counter. Bind `id` on it: it\n   * joins the control's `aria-describedby`, after the error and the hint.\n   */\n  meta?(props: { id: string }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst { fieldId, hintId, errorId, describedBy } = useFieldIds(\n  attrs,\n  () => !!props.hint && !props.error,\n  undefined,\n  () => !!props.error,\n)\n\nconst labelId = useId()\nconst metaId = useId()\n\nconst fieldProps = computed<FieldControlProps>(() => {\n  const bound: FieldControlProps = { ...forwardedAttrs.value, id: fieldId.value }\n  if (describedBy.value) bound['aria-describedby'] = describedBy.value\n  if (props.group) {\n    // A consumer's `aria-labelledby` or `aria-label` names the group instead: ours would cancel\n    // an `aria-label`, `aria-labelledby` winning in the accessible name computation.\n    const named = attrs['aria-labelledby'] !== undefined || attrs['aria-label'] !== undefined\n    if (props.label && !named) bound['aria-labelledby'] = labelId\n    return bound\n  }\n  if (props.error) bound['aria-invalid'] = 'true'\n  if (props.required) bound.required = true\n  if (props.disabled) bound.disabled = true\n  return bound\n})\n\n// Called from the template, where reading `$slots` is reactive, unlike in a computed.\nfunction withMeta(bound: FieldControlProps): FieldControlProps {\n  return { ...bound, 'aria-describedby': joinIds(bound['aria-describedby'], metaId) }\n}\n</script>\n\n<template>\n  <div\n    class=\"v-field\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-label-position=\"labelPosition\"\n    :data-disabled=\"disabled ? '' : undefined\"\n  >\n    <VTypography\n      v-if=\"label\"\n      :id=\"group ? labelId : undefined\"\n      :as=\"group ? 'span' : 'label'\"\n      variant=\"label\"\n      class=\"v-field-label\"\n      :class=\"{ 'v-visually-hidden': hideLabel }\"\n      :for=\"group ? undefined : fieldId\"\n    >\n      {{ label }}<span v-if=\"required\" class=\"v-field-required\" aria-hidden=\"true\">*</span>\n    </VTypography>\n    <div class=\"v-field-main\">\n      <slot :field-props=\"$slots.meta ? withMeta(fieldProps) : fieldProps\" />\n      <div v-if=\"error || hint || $slots.meta\" class=\"v-field-meta\">\n        <VFieldMessage :hint=\"hint\" :error=\"error\" :hint-id=\"hintId\" :error-id=\"errorId\" />\n        <slot :id=\"metaId\" name=\"meta\" />\n      </div>\n      <VFieldAnnouncer :text=\"error\" />\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-field-main {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    min-inline-size: 0;\n  }\n\n  /* Child combinators, so that a disabled field leaves a field nested in it alone. */\n  .v-field[data-disabled] > .v-field-label,\n  .v-field[data-disabled] > .v-field-main > .v-field-meta > .v-field-hint {\n    --typography-color: var(--vectis-color-text-subtle);\n  }\n\n  /*\n   * Side by side without a container query, as in VCard: the label keeps its basis and the\n   * control takes the rest, until the two bases no longer fit on one line and the control wraps\n   * under the label. A hidden label is out of the flow, and the control takes the whole line.\n   */\n  .v-field[data-label-position='start'] {\n    flex-flow: row wrap;\n    column-gap: var(--vectis-space-4);\n  }\n\n  .v-field[data-label-position='start'] > .v-field-label {\n    flex: 1 1 var(--vectis-control-size-field-label);\n    /* Centres the first line of the label on a medium control, the size forms use most. */\n    padding-block-start: calc(\n      (\n          var(--vectis-control-height-md) - var(--vectis-text-label-size) *\n            var(--vectis-text-label-leading)\n        ) /\n        2\n    );\n  }\n\n  .v-field[data-label-position='start'] > .v-field-main {\n    flex: 999 1 var(--vectis-control-size-field-control-min);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2EA,IAAM,IAAQ,GAuBR,EAAE,UAAO,cAAW,cAAW,sBAAmB,EAAa,GAE/D,EAAE,YAAS,WAAQ,YAAS,mBAAgB,EAChD,SACM,CAAC,CAAC,EAAM,QAAQ,CAAC,EAAM,OAC7B,KAAA,SACM,CAAC,CAAC,EAAM,KAChB,GAEM,IAAU,EAAM,GAChB,IAAS,EAAM,GAEf,IAAa,QAAkC;GACnD,IAAM,IAA2B;IAAE,GAAG,EAAe;IAAO,IAAI,EAAQ;GAAM;GAE9E,IADI,EAAY,UAAO,EAAM,sBAAsB,EAAY,QAC3D,EAAM,OAAO;IAGf,IAAM,IAAQ,EAAM,uBAAuB,KAAA,KAAa,EAAM,kBAAkB,KAAA;IAEhF,OADI,EAAM,SAAS,CAAC,MAAO,EAAM,qBAAqB,IAC/C;GACT;GAIA,OAHI,EAAM,UAAO,EAAM,kBAAkB,SACrC,EAAM,aAAU,EAAM,WAAW,KACjC,EAAM,aAAU,EAAM,WAAW,KAC9B;EACT,CAAC;EAGD,SAAS,EAAS,GAA6C;GAC7D,OAAO;IAAE,GAAG;IAAO,oBAAoB,EAAQ,EAAM,qBAAqB,CAAM;GAAE;EACpF;yBAIE,EA0BM,OAAA;GAzBJ,OAAK,EAAA,CAAC,WACE,EAAA,CAAA,CAAS,CAAA;GAChB,OAAK,EAAE,EAAA,CAAA,CAAS;GAChB,uBAAqB,EAAA;GACrB,iBAAe,EAAA,WAAQ,KAAQ,KAAA;MAGxB,EAAA,SAAA,EAAA,GADR,EAUc,GAAA;;GARX,IAAI,EAAA,QAAQ,EAAA,CAAA,IAAU,KAAA;GACtB,IAAI,EAAA,QAAK,SAAA;GACV,SAAQ;GACR,OAAK,EAAA,CAAC,iBAAe,EAAA,qBACU,EAAA,UAAS,CAAA,CAAA;GACvC,KAAK,EAAA,QAAQ,KAAA,IAAY,EAAA,CAAA;;oBAEf,CAAA,EAAA,EAAR,EAAA,KAAK,GAAA,CAAA,GAAe,EAAA,YAAA,EAAA,GAAZ,EAA0E,QAA1E,GAAkE,GAAC,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA;;;;;;;mBAEhF,EAOM,OAPN,GAOM;GANJ,EAAuE,EAAA,QAAA,WAAA,EAAhE,YAAaA,EAAAA,OAAO,OAAO,EAAS,EAAA,KAAU,IAAI,EAAA,MAAA,CAAA;GAC9C,EAAA,SAAS,EAAA,QAAQA,EAAAA,OAAO,QAAA,EAAA,GAAnC,EAGM,OAHN,GAGM,CAFJ,EAAmF,GAAA;IAAnE,MAAM,EAAA;IAAO,OAAO,EAAA;IAAQ,WAAS,EAAA,CAAA;IAAS,YAAU,EAAA,CAAA;;;;;;OACxE,EAAiC,EAAA,QAAA,QAAA,EAA1B,IAAI,EAAA,CAAA,EAAM,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;GAEnB,EAAiC,GAAA,EAAf,MAAM,EAAA,MAAK,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA"}
+{"version":3,"file":"VField.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_createBlock","VTypography","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode","_createElementVNode","_renderSlot","_createVNode","VFieldMessage","VFieldAnnouncer","VTypography_default","VFieldAnnouncer_default","VFieldMessage_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","VField_vue_vue_type_script_setup_true_lang_default","props","__props","useRootAttrs","useFieldIds","attrs","labelId","useId","metaId","fieldProps","computed","bound","forwardedAttrs","fieldId","describedBy","named","withMeta","joinIds","openBlock","createElementBlock","normalizeClass","unref","rootClass","normalizeStyle","rootStyle","createBlock","withCtx","createTextVNode","toDisplayString","createCommentVNode","createElementVNode","renderSlot","_ctx","createVNode","hintId","errorId"],"sources":["../../../src/components/VField/VField.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * A label, a hint and an error message around one control of any kind. VField owns no control:\n * it hands the slot the attributes that tie the control to its label and messages, and the\n * consumer binds them. That works the same for a library control, a native element or a\n * third-party component.\n */\n\nimport { computed, useId } from 'vue'\n\nimport VTypography from '../VTypography/VTypography.vue'\nimport VFieldAnnouncer from './VFieldAnnouncer.vue'\nimport VFieldMessage from './VFieldMessage.vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { joinIds } from '../../utils/ids'\n\n/** Where the label sits: above the control, or at its start. */\nexport type FieldLabelPosition = 'top' | 'start'\n\n/**\n * What the slot hands over, to bind on the control with `v-bind`: its id, the references to\n * the hint and the error, `aria-invalid` while there is an error, `required`, `disabled`, and the\n * attributes set on the VField other than `class` and `style`. For a group, `aria-labelledby`\n * replaces the states a group may not carry. A key is absent rather than undefined, so that\n * binding it never cancels a value the control sets itself.\n */\nexport type FieldControlProps = {\n  id: string\n  'aria-labelledby'?: string\n  'aria-describedby'?: string\n  'aria-invalid'?: 'true'\n  required?: true\n  disabled?: true\n} & Record<string, unknown>\n\ninterface FieldProps {\n  /** The label, tied to the control so that clicking it focuses the control. */\n  label?: string\n  /** A line of help under the control, read along with it. */\n  hint?: string\n  /**\n   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the control invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /**\n   * Marks the control as required: an asterisk follows the label, and `required` is handed to\n   * the control, which is what assistive technology announces.\n   */\n  required?: boolean\n  /**\n   * Marks the control as disabled: the label and the hint grey out, and `disabled` is handed to\n   * the control.\n   */\n  disabled?: boolean\n  /** Hides the label visually. It still names the control for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the control (`top`, the default), or at its start, in a column\n   * of its own. A start label moves back above the control when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\n  /**\n   * Names a group of elements rather than one control, such as a row of fields with a `group`\n   * role. The label is then plain text that the slot's `aria-labelledby` points at, since a\n   * `<label for>` names one element, and the slot hands over neither `aria-invalid`, `required`\n   * nor `disabled`, which a group may not carry.\n   */\n  group?: boolean\n}\n\nconst props = withDefaults(defineProps<FieldProps>(), {\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  disabled: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  group: false,\n})\n\ndefineSlots<{\n  /** The control. Bind `fieldProps` on it. */\n  default(props: { fieldProps: FieldControlProps }): unknown\n  /**\n   * Content at the end of the hint's line, such as a character counter. Bind `id` on it: it\n   * joins the control's `aria-describedby`, after the error and the hint.\n   */\n  meta?(props: { id: string }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst { fieldId, hintId, errorId, describedBy } = useFieldIds(\n  attrs,\n  () => !!props.hint && !props.error,\n  undefined,\n  () => !!props.error,\n)\n\nconst labelId = useId()\nconst metaId = useId()\n\nconst fieldProps = computed<FieldControlProps>(() => {\n  const bound: FieldControlProps = { ...forwardedAttrs.value, id: fieldId.value }\n  if (describedBy.value) bound['aria-describedby'] = describedBy.value\n  if (props.group) {\n    // A consumer's `aria-labelledby` or `aria-label` names the group instead: ours would cancel\n    // an `aria-label`, `aria-labelledby` winning in the accessible name computation.\n    const named = attrs['aria-labelledby'] !== undefined || attrs['aria-label'] !== undefined\n    if (props.label && !named) bound['aria-labelledby'] = labelId\n    return bound\n  }\n  if (props.error) bound['aria-invalid'] = 'true'\n  if (props.required) bound.required = true\n  if (props.disabled) bound.disabled = true\n  return bound\n})\n\n// Called from the template, where reading `$slots` is reactive, unlike in a computed.\nfunction withMeta(bound: FieldControlProps): FieldControlProps {\n  return { ...bound, 'aria-describedby': joinIds(bound['aria-describedby'], metaId) }\n}\n</script>\n\n<template>\n  <div\n    class=\"v-field\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-label-position=\"labelPosition\"\n    :data-disabled=\"disabled ? '' : undefined\"\n  >\n    <VTypography\n      v-if=\"label\"\n      :id=\"group ? labelId : undefined\"\n      :as=\"group ? 'span' : 'label'\"\n      variant=\"label\"\n      class=\"v-field-label\"\n      :class=\"{ 'v-visually-hidden': hideLabel }\"\n      :for=\"group ? undefined : fieldId\"\n    >\n      {{ label }}<span v-if=\"required\" class=\"v-field-required\" aria-hidden=\"true\">*</span>\n    </VTypography>\n    <div class=\"v-field-main\">\n      <slot :field-props=\"$slots.meta ? withMeta(fieldProps) : fieldProps\" />\n      <div v-if=\"error || hint || $slots.meta\" class=\"v-field-meta\">\n        <VFieldMessage :hint=\"hint\" :error=\"error\" :hint-id=\"hintId\" :error-id=\"errorId\" />\n        <slot :id=\"metaId\" name=\"meta\" />\n      </div>\n      <VFieldAnnouncer :text=\"error\" />\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-field-main {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    min-inline-size: 0;\n  }\n\n  /* Child combinators, so that a disabled field leaves a field nested in it alone. */\n  .v-field[data-disabled] > .v-field-label,\n  .v-field[data-disabled] > .v-field-main > .v-field-meta > .v-field-hint {\n    --typography-color: var(--vectis-color-text-subtle);\n  }\n\n  /*\n   * Side by side without a container query, as in VCard: the label keeps its basis and the\n   * control takes the rest, until the two bases no longer fit on one line and the control wraps\n   * under the label. A hidden label is out of the flow, and the control takes the whole line.\n   */\n  .v-field[data-label-position='start'] {\n    flex-flow: row wrap;\n    column-gap: var(--vectis-space-4);\n  }\n\n  .v-field[data-label-position='start'] > .v-field-label {\n    flex: 1 1 var(--vectis-control-size-field-label);\n    /* Centres the first line of the label on a medium control, the size forms use most. */\n    padding-block-start: calc(\n      (\n          var(--vectis-control-height-md) - var(--vectis-text-label-size) *\n            var(--vectis-text-label-leading)\n        ) /\n        2\n    );\n  }\n\n  .v-field[data-label-position='start'] > .v-field-main {\n    flex: 999 1 var(--vectis-control-size-field-control-min);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2EA,IAAMyB,IAAQC,GAuBR,EAAE,UAAO,cAAW,cAAW,sBAAmBC,EAAa,GAE/D,EAAE,YAAS,WAAQ,YAAS,mBAAgBC,EAChDC,SACM,CAAC,CAACJ,EAAM,QAAQ,CAACA,EAAM,OAC7B,KAAA,SACM,CAAC,CAACA,EAAM,KAChB,GAEMK,IAAUC,EAAM,GAChBC,IAASD,EAAM,GAEfE,IAAaC,QAAkC;GACnD,IAAMC,IAA2B;IAAE,GAAGC,EAAe;IAAO,IAAIC,EAAQ;GAAM;GAE9E,IADIC,EAAY,UAAO,EAAM,sBAAsBA,EAAY,QAC3Db,EAAM,OAAO;IAGf,IAAMc,IAAQV,EAAM,uBAAuB,KAAA,KAAaA,EAAM,kBAAkB,KAAA;IAEhF,OADIJ,EAAM,SAAS,CAACc,MAAO,EAAM,qBAAqBT,IAC/CK;GACT;GAIA,OAHIV,EAAM,UAAO,EAAM,kBAAkB,SACrCA,EAAM,aAAU,EAAM,WAAW,KACjCA,EAAM,aAAU,EAAM,WAAW,KAC9BU;EACT,CAAC;EAGD,SAASK,EAAS,GAA6C;GAC7D,OAAO;IAAE,GAAGL;IAAO,oBAAoBM,EAAQN,EAAM,qBAAqBH,CAAM;GAAE;EACpF;oBAIE/B,EAAA,GAAAC,EA0BM,OAAA;GAzBJ,OAAKC,EAAA,CAAC,WACEC,EAAA0C,CAAA,CAAS,CAAA;GAChB,OAAKzC,EAAED,EAAA4C,CAAA,CAAS;GAChB,uBAAqBtB,EAAA;GACrB,iBAAeA,EAAA,WAAQ,KAAQ,KAAA;EAGxB,GAAA,CAAAA,EAAA,SADRzB,EAAA,GAAAK,EAUcC,GAAA;;GARX,IAAImB,EAAA,QAAQtB,EAAA0B,CAAA,IAAU,KAAA;GACtB,IAAIJ,EAAA,QAAK,SAAA;GACV,SAAQ;GACR,OAAKvB,EAAA,CAAC,iBAAe,EAAA,qBACUuB,EAAA,UAAS,CAAA,CAAA;GACvC,KAAKA,EAAA,QAAQ,KAAA,IAAYtB,EAAAiC,CAAA;;GAE1B,SAAA7B,QAAW,CAARC,EAAAC,EAAAgB,EAAA,KAAK,GAAA,CAAA,GAAeA,EAAA,YAAZzB,EAAA,GAAAC,EAA0E,QAA1EmB,GAAkE,GAAC,KAAAgC,EAAA,IAAA,EAAA,CAAA,CAAA;;;;;;;EAEhFzC,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,GAAAA,EAOM,OAPNU,GAOM;GANJT,EAAuE2C,EAAA,QAAA,WAAA,EAAhE,YAAaxD,EAAAA,OAAO,OAAOwC,EAASP,EAAA,KAAU,IAAIA,EAAA,MAAA,CAAA;GAC9CP,EAAA,SAASA,EAAA,QAAQ1B,EAAAA,OAAO,QAAnCC,EAAA,GAAAC,EAGM,OAHNqB,GAGM,CAFJT,EAAmFC,GAAA;IAAnE,MAAMW,EAAA;IAAO,OAAOA,EAAA;IAAQ,WAAStB,EAAAsD,CAAA;IAAS,YAAUtD,EAAAuD,CAAA;;;;;;GACxE9C,CAAAA,GAAAA,EAAiC2C,EAAA,QAAA,QAAA,EAA1B,IAAIpD,EAAA4B,CAAA,EAAM,CAAA,CAAA,CAAA,KAAAqB,EAAA,IAAA,EAAA;GAEnBvC,EAAiCE,GAAA,EAAf,MAAMU,EAAA,MAAK,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA"}

package/dist/components/VField/VFieldAnnouncer.js.map

@@ -1 +1 @@
-{"version":3,"file":"VFieldAnnouncer.js","names":[],"sources":["../../../src/components/VField/VFieldAnnouncer.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * Announces the error message of a field, for VField, VFieldset and every control with an\n * `error` prop. The visible message, which takes the place of the hint, is referenced by the\n * control's `aria-describedby` and read whenever the control is focused; this region announces\n * it when it appears or changes. It stays mounted at the root of the control, because a live\n * region inserted together with its text is not announced reliably. The first message, rendered\n * with the page, is not announced.\n */\n\nimport { nextTick, ref, watch } from 'vue'\n\nconst props = defineProps<{\n  /** The error message. Empty or absent, there is nothing to announce. */\n  text?: string\n}>()\n\nconst announced = ref('')\n\nwatch(\n  () => props.text,\n  async (text) => {\n    // Cleared first, so that the same message raised twice in a row is announced twice.\n    announced.value = ''\n    if (!text) return\n    await nextTick()\n    announced.value = text\n  },\n)\n</script>\n\n<template>\n  <span class=\"v-visually-hidden\" aria-live=\"polite\">{{ announced }}</span>\n</template>\n"],"mappings":""}
+{"version":3,"file":"VFieldAnnouncer.js","names":["_sfc_main","VFieldAnnouncer_vue_vue_type_script_setup_true_lang_default","VFieldAnnouncer_default"],"sources":["../../../src/components/VField/VFieldAnnouncer.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * Announces the error message of a field, for VField, VFieldset and every control with an\n * `error` prop. The visible message, which takes the place of the hint, is referenced by the\n * control's `aria-describedby` and read whenever the control is focused; this region announces\n * it when it appears or changes. It stays mounted at the root of the control, because a live\n * region inserted together with its text is not announced reliably. The first message, rendered\n * with the page, is not announced.\n */\n\nimport { nextTick, ref, watch } from 'vue'\n\nconst props = defineProps<{\n  /** The error message. Empty or absent, there is nothing to announce. */\n  text?: string\n}>()\n\nconst announced = ref('')\n\nwatch(\n  () => props.text,\n  async (text) => {\n    // Cleared first, so that the same message raised twice in a row is announced twice.\n    announced.value = ''\n    if (!text) return\n    await nextTick()\n    announced.value = text\n  },\n)\n</script>\n\n<template>\n  <span class=\"v-visually-hidden\" aria-live=\"polite\">{{ announced }}</span>\n</template>\n"],"mappings":""}

package/dist/components/VField/VFieldAnnouncer.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"VFieldAnnouncer.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VField/VFieldAnnouncer.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * Announces the error message of a field, for VField, VFieldset and every control with an\n * `error` prop. The visible message, which takes the place of the hint, is referenced by the\n * control's `aria-describedby` and read whenever the control is focused; this region announces\n * it when it appears or changes. It stays mounted at the root of the control, because a live\n * region inserted together with its text is not announced reliably. The first message, rendered\n * with the page, is not announced.\n */\n\nimport { nextTick, ref, watch } from 'vue'\n\nconst props = defineProps<{\n  /** The error message. Empty or absent, there is nothing to announce. */\n  text?: string\n}>()\n\nconst announced = ref('')\n\nwatch(\n  () => props.text,\n  async (text) => {\n    // Cleared first, so that the same message raised twice in a row is announced twice.\n    announced.value = ''\n    if (!text) return\n    await nextTick()\n    announced.value = text\n  },\n)\n</script>\n\n<template>\n  <span class=\"v-visually-hidden\" aria-live=\"polite\">{{ announced }}</span>\n</template>\n"],"mappings":";;;;;;;;;EAaA,IAAM,IAAQ,GAKR,IAAY,EAAI,EAAE;SAExB,QACQ,EAAM,MACZ,OAAO,MAAS;GAEd,EAAU,QAAQ,IACb,MACL,MAAM,EAAS,GACf,EAAU,QAAQ;EACpB,CACF,mBAIE,EAAyE,QAAzE,GAAyE,EAAnB,EAAA,KAAS,GAAA,CAAA"}
+{"version":3,"file":"VFieldAnnouncer.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_toDisplayString","_hoisted_1","VFieldAnnouncer_vue_vue_type_script_setup_true_lang_default","props","__props","announced","ref","watch","text","nextTick","openBlock","createElementBlock","toDisplayString"],"sources":["../../../src/components/VField/VFieldAnnouncer.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * Announces the error message of a field, for VField, VFieldset and every control with an\n * `error` prop. The visible message, which takes the place of the hint, is referenced by the\n * control's `aria-describedby` and read whenever the control is focused; this region announces\n * it when it appears or changes. It stays mounted at the root of the control, because a live\n * region inserted together with its text is not announced reliably. The first message, rendered\n * with the page, is not announced.\n */\n\nimport { nextTick, ref, watch } from 'vue'\n\nconst props = defineProps<{\n  /** The error message. Empty or absent, there is nothing to announce. */\n  text?: string\n}>()\n\nconst announced = ref('')\n\nwatch(\n  () => props.text,\n  async (text) => {\n    // Cleared first, so that the same message raised twice in a row is announced twice.\n    announced.value = ''\n    if (!text) return\n    await nextTick()\n    announced.value = text\n  },\n)\n</script>\n\n<template>\n  <span class=\"v-visually-hidden\" aria-live=\"polite\">{{ announced }}</span>\n</template>\n"],"mappings":";;;;;;;;;EAaA,IAAMK,IAAQC,GAKRC,IAAYC,EAAI,EAAE;SAExBC,QACQJ,EAAM,MACZ,OAAO,MAAS;GAGd,AADA,EAAU,QAAQ,IACbK,MACL,MAAMC,EAAS,GACf,EAAU,QAAQD;EACpB,CACF,cAIEV,EAAA,GAAAC,EAAyE,QAAzEE,GAAyED,EAAnBK,EAAA,KAAS,GAAA,CAAA"}

package/dist/components/VField/VFieldMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"VFieldMessage.js","names":[],"sources":["../../../src/components/VField/VFieldMessage.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * The line under a control: the error message, or the hint when there is none, so that raising\n * the error does not grow the field. Shared by VField, VFieldset and the choice controls, whose\n * layouts differ but whose message does not. The ids are the owner's, which also references them.\n */\n\nimport VTypography from '../VTypography/VTypography.vue'\n\ndefineProps<{\n  /** A line of help. */\n  hint?: string\n  /** What is wrong with the value, shown in place of the hint. */\n  error?: string\n  hintId: string\n  errorId: string\n}>()\n</script>\n\n<template>\n  <span v-if=\"error\" :id=\"errorId\" class=\"v-field-error\">{{ error }}</span>\n  <VTypography v-else-if=\"hint\" :id=\"hintId\" variant=\"caption\" tone=\"muted\" class=\"v-field-hint\">\n    {{ hint }}\n  </VTypography>\n</template>\n"],"mappings":""}
+{"version":3,"file":"VFieldMessage.js","names":["_sfc_main","VFieldMessage_vue_vue_type_script_setup_true_lang_default","VFieldMessage_default"],"sources":["../../../src/components/VField/VFieldMessage.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * The line under a control: the error message, or the hint when there is none, so that raising\n * the error does not grow the field. Shared by VField, VFieldset and the choice controls, whose\n * layouts differ but whose message does not. The ids are the owner's, which also references them.\n */\n\nimport VTypography from '../VTypography/VTypography.vue'\n\ndefineProps<{\n  /** A line of help. */\n  hint?: string\n  /** What is wrong with the value, shown in place of the hint. */\n  error?: string\n  hintId: string\n  errorId: string\n}>()\n</script>\n\n<template>\n  <span v-if=\"error\" :id=\"errorId\" class=\"v-field-error\">{{ error }}</span>\n  <VTypography v-else-if=\"hint\" :id=\"hintId\" variant=\"caption\" tone=\"muted\" class=\"v-field-hint\">\n    {{ hint }}\n  </VTypography>\n</template>\n"],"mappings":""}

package/dist/components/VField/VFieldMessage.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"VFieldMessage.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VField/VFieldMessage.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * The line under a control: the error message, or the hint when there is none, so that raising\n * the error does not grow the field. Shared by VField, VFieldset and the choice controls, whose\n * layouts differ but whose message does not. The ids are the owner's, which also references them.\n */\n\nimport VTypography from '../VTypography/VTypography.vue'\n\ndefineProps<{\n  /** A line of help. */\n  hint?: string\n  /** What is wrong with the value, shown in place of the hint. */\n  error?: string\n  hintId: string\n  errorId: string\n}>()\n</script>\n\n<template>\n  <span v-if=\"error\" :id=\"errorId\" class=\"v-field-error\">{{ error }}</span>\n  <VTypography v-else-if=\"hint\" :id=\"hintId\" variant=\"caption\" tone=\"muted\" class=\"v-field-hint\">\n    {{ hint }}\n  </VTypography>\n</template>\n"],"mappings":";;;;;;;;;;;;mBAqBc,EAAA,SAAA,EAAA,GAAZ,EAAyE,QAAA;;GAArD,IAAI,EAAA;GAAS,OAAM;OAAmB,EAAA,KAAK,GAAA,GAAA,CAAA,KACvC,EAAA,QAAA,EAAA,GAAxB,EAEc,GAAA;;GAFiB,IAAI,EAAA;GAAQ,SAAQ;GAAU,MAAK;GAAQ,OAAM;;oBACpE,CAAA,EAAA,EAAP,EAAA,IAAI,GAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"VFieldMessage.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_toDisplayString","_createBlock","VTypography","_withCtx","_createTextVNode","_createCommentVNode","VTypography_default","_hoisted_1","VFieldMessage_vue_vue_type_script_setup_true_lang_default","__props","openBlock","createElementBlock","toDisplayString","createBlock","withCtx","createTextVNode","createCommentVNode"],"sources":["../../../src/components/VField/VFieldMessage.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * The line under a control: the error message, or the hint when there is none, so that raising\n * the error does not grow the field. Shared by VField, VFieldset and the choice controls, whose\n * layouts differ but whose message does not. The ids are the owner's, which also references them.\n */\n\nimport VTypography from '../VTypography/VTypography.vue'\n\ndefineProps<{\n  /** A line of help. */\n  hint?: string\n  /** What is wrong with the value, shown in place of the hint. */\n  error?: string\n  hintId: string\n  errorId: string\n}>()\n</script>\n\n<template>\n  <span v-if=\"error\" :id=\"errorId\" class=\"v-field-error\">{{ error }}</span>\n  <VTypography v-else-if=\"hint\" :id=\"hintId\" variant=\"caption\" tone=\"muted\" class=\"v-field-hint\">\n    {{ hint }}\n  </VTypography>\n</template>\n"],"mappings":";;;;;;;;;;;;mBAqBcW,EAAA,SAAZX,EAAA,GAAAC,EAAyE,QAAA;;GAArD,IAAIU,EAAA;GAAS,OAAM;EAAmB,GAAAT,EAAAS,EAAA,KAAK,GAAA,GAAAF,CAAA,KACvCE,EAAA,QAAxBX,EAAA,GAAAG,EAEcC,GAAA;;GAFiB,IAAIO,EAAA;GAAQ,SAAQ;GAAU,MAAK;GAAQ,OAAM;;GAC9E,SAAAN,QAAU,CAAPC,EAAAJ,EAAAS,EAAA,IAAI,GAAA,CAAA,CAAA,CAAA"}

package/dist/components/VFieldset/VFieldset.js.map

@@ -1 +1 @@
-{"version":3,"file":"VFieldset.js","names":[],"sources":["../../../src/components/VFieldset/VFieldset.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * A native `<fieldset>`, named by its `<legend>`: a group of radios, checkboxes or related\n * fields announced as one. The hint and the error describe the group; `aria-invalid` is not\n * allowed on a group, so the invalid state reaches the controls through the slot.\n */\n\nimport { ref, useAttrs } from 'vue'\n\nimport VFieldAnnouncer from '../VField/VFieldAnnouncer.vue'\nimport VFieldMessage from '../VField/VFieldMessage.vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\n\n/** How the controls of the group are laid out: in a column, or in a wrapping row. */\nexport type FieldsetOrientation = 'vertical' | 'horizontal'\n\ninterface FieldsetProps {\n  /** The legend, which names the group for assistive technology. */\n  legend?: string\n  /** A line of help under the group, read along with its name. */\n  hint?: string\n  /**\n   * A message saying what is wrong with the group, shown in place of the hint and read along\n   * with its name. It is announced when it appears or changes, and the slot's `invalid` turns\n   * true.\n   */\n  error?: string\n  /**\n   * Marks the group as required: an asterisk follows the legend, and the slot's `required`\n   * turns true, to be set on the controls.\n   */\n  required?: boolean\n  /** Hides the legend visually. It still names the group for assistive technology. */\n  hideLegend?: boolean\n  /** Lays the controls out in a column (`vertical`, the default) or in a wrapping row. */\n  orientation?: FieldsetOrientation\n}\n\nconst props = withDefaults(defineProps<FieldsetProps>(), {\n  legend: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  hideLegend: false,\n  orientation: 'vertical',\n})\n\ndefineSlots<{\n  /**\n   * The controls of the group. `invalid` is true while there is an error, and `required`\n   * repeats the prop: bind them on the controls.\n   */\n  default(props: { invalid: boolean; required: boolean }): unknown\n}>()\n\n// The consumer's `aria-describedby` is merged with the hint and error references, and the\n// merged list is bound after the other attributes, which fallthrough would overwrite.\ndefineOptions({ inheritAttrs: false })\n\nconst attrs = useAttrs()\n\nconst { hintId, errorId, describedBy } = useFieldIds(\n  attrs,\n  () => !!props.hint && !props.error,\n  undefined,\n  () => !!props.error,\n)\n\nconst rootEl = ref<HTMLFieldSetElement | null>(null)\n\ndefineExpose({\n  /** The `<fieldset>`. */\n  el: rootEl,\n})\n</script>\n\n<template>\n  <fieldset\n    ref=\"rootEl\"\n    v-bind=\"attrs\"\n    class=\"v-fieldset\"\n    :aria-describedby=\"describedBy\"\n    :data-orientation=\"orientation\"\n  >\n    <legend v-if=\"legend\" class=\"v-fieldset-legend\" :class=\"{ 'v-visually-hidden': hideLegend }\">\n      {{ legend }}<span v-if=\"required\" class=\"v-field-required\" aria-hidden=\"true\">*</span>\n    </legend>\n    <div class=\"v-fieldset-body\">\n      <slot :invalid=\"!!error\" :required=\"required\" />\n    </div>\n    <VFieldMessage :hint=\"hint\" :error=\"error\" :hint-id=\"hintId\" :error-id=\"errorId\" />\n    <VFieldAnnouncer :text=\"error\" />\n  </fieldset>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-fieldset {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    min-inline-size: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n    font-family: var(--vectis-text-family);\n  }\n\n  /* A rendered legend is not a flex item of its fieldset, so the gap misses it: a margin. */\n  .v-fieldset-legend {\n    margin-block-end: var(--vectis-space-2);\n    padding: 0;\n    color: var(--vectis-color-text);\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  /* A native `disabled` disables every control of the group: its name and help grey out. */\n  .v-fieldset:disabled > .v-fieldset-legend {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-fieldset:disabled > .v-field-hint {\n    --typography-color: var(--vectis-color-text-subtle);\n  }\n\n  .v-fieldset-body {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--vectis-space-2);\n  }\n\n  .v-fieldset[data-orientation='horizontal'] > .v-fieldset-body {\n    flex-flow: row wrap;\n    column-gap: var(--vectis-space-4);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VFieldset.js","names":["_sfc_main","VFieldset_vue_vue_type_script_setup_true_lang_default","VFieldset_default"],"sources":["../../../src/components/VFieldset/VFieldset.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * A native `<fieldset>`, named by its `<legend>`: a group of radios, checkboxes or related\n * fields announced as one. The hint and the error describe the group; `aria-invalid` is not\n * allowed on a group, so the invalid state reaches the controls through the slot.\n */\n\nimport { ref, useAttrs } from 'vue'\n\nimport VFieldAnnouncer from '../VField/VFieldAnnouncer.vue'\nimport VFieldMessage from '../VField/VFieldMessage.vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\n\n/** How the controls of the group are laid out: in a column, or in a wrapping row. */\nexport type FieldsetOrientation = 'vertical' | 'horizontal'\n\ninterface FieldsetProps {\n  /** The legend, which names the group for assistive technology. */\n  legend?: string\n  /** A line of help under the group, read along with its name. */\n  hint?: string\n  /**\n   * A message saying what is wrong with the group, shown in place of the hint and read along\n   * with its name. It is announced when it appears or changes, and the slot's `invalid` turns\n   * true.\n   */\n  error?: string\n  /**\n   * Marks the group as required: an asterisk follows the legend, and the slot's `required`\n   * turns true, to be set on the controls.\n   */\n  required?: boolean\n  /** Hides the legend visually. It still names the group for assistive technology. */\n  hideLegend?: boolean\n  /** Lays the controls out in a column (`vertical`, the default) or in a wrapping row. */\n  orientation?: FieldsetOrientation\n}\n\nconst props = withDefaults(defineProps<FieldsetProps>(), {\n  legend: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  hideLegend: false,\n  orientation: 'vertical',\n})\n\ndefineSlots<{\n  /**\n   * The controls of the group. `invalid` is true while there is an error, and `required`\n   * repeats the prop: bind them on the controls.\n   */\n  default(props: { invalid: boolean; required: boolean }): unknown\n}>()\n\n// The consumer's `aria-describedby` is merged with the hint and error references, and the\n// merged list is bound after the other attributes, which fallthrough would overwrite.\ndefineOptions({ inheritAttrs: false })\n\nconst attrs = useAttrs()\n\nconst { hintId, errorId, describedBy } = useFieldIds(\n  attrs,\n  () => !!props.hint && !props.error,\n  undefined,\n  () => !!props.error,\n)\n\nconst rootEl = ref<HTMLFieldSetElement | null>(null)\n\ndefineExpose({\n  /** The `<fieldset>`. */\n  el: rootEl,\n})\n</script>\n\n<template>\n  <fieldset\n    ref=\"rootEl\"\n    v-bind=\"attrs\"\n    class=\"v-fieldset\"\n    :aria-describedby=\"describedBy\"\n    :data-orientation=\"orientation\"\n  >\n    <legend v-if=\"legend\" class=\"v-fieldset-legend\" :class=\"{ 'v-visually-hidden': hideLegend }\">\n      {{ legend }}<span v-if=\"required\" class=\"v-field-required\" aria-hidden=\"true\">*</span>\n    </legend>\n    <div class=\"v-fieldset-body\">\n      <slot :invalid=\"!!error\" :required=\"required\" />\n    </div>\n    <VFieldMessage :hint=\"hint\" :error=\"error\" :hint-id=\"hintId\" :error-id=\"errorId\" />\n    <VFieldAnnouncer :text=\"error\" />\n  </fieldset>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-fieldset {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    min-inline-size: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n    font-family: var(--vectis-text-family);\n  }\n\n  /* A rendered legend is not a flex item of its fieldset, so the gap misses it: a margin. */\n  .v-fieldset-legend {\n    margin-block-end: var(--vectis-space-2);\n    padding: 0;\n    color: var(--vectis-color-text);\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  /* A native `disabled` disables every control of the group: its name and help grey out. */\n  .v-fieldset:disabled > .v-fieldset-legend {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-fieldset:disabled > .v-field-hint {\n    --typography-color: var(--vectis-color-text-subtle);\n  }\n\n  .v-fieldset-body {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--vectis-space-2);\n  }\n\n  .v-fieldset[data-orientation='horizontal'] > .v-fieldset-body {\n    flex-flow: row wrap;\n    column-gap: var(--vectis-space-4);\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"VFieldset.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VFieldset/VFieldset.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * A native `<fieldset>`, named by its `<legend>`: a group of radios, checkboxes or related\n * fields announced as one. The hint and the error describe the group; `aria-invalid` is not\n * allowed on a group, so the invalid state reaches the controls through the slot.\n */\n\nimport { ref, useAttrs } from 'vue'\n\nimport VFieldAnnouncer from '../VField/VFieldAnnouncer.vue'\nimport VFieldMessage from '../VField/VFieldMessage.vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\n\n/** How the controls of the group are laid out: in a column, or in a wrapping row. */\nexport type FieldsetOrientation = 'vertical' | 'horizontal'\n\ninterface FieldsetProps {\n  /** The legend, which names the group for assistive technology. */\n  legend?: string\n  /** A line of help under the group, read along with its name. */\n  hint?: string\n  /**\n   * A message saying what is wrong with the group, shown in place of the hint and read along\n   * with its name. It is announced when it appears or changes, and the slot's `invalid` turns\n   * true.\n   */\n  error?: string\n  /**\n   * Marks the group as required: an asterisk follows the legend, and the slot's `required`\n   * turns true, to be set on the controls.\n   */\n  required?: boolean\n  /** Hides the legend visually. It still names the group for assistive technology. */\n  hideLegend?: boolean\n  /** Lays the controls out in a column (`vertical`, the default) or in a wrapping row. */\n  orientation?: FieldsetOrientation\n}\n\nconst props = withDefaults(defineProps<FieldsetProps>(), {\n  legend: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  hideLegend: false,\n  orientation: 'vertical',\n})\n\ndefineSlots<{\n  /**\n   * The controls of the group. `invalid` is true while there is an error, and `required`\n   * repeats the prop: bind them on the controls.\n   */\n  default(props: { invalid: boolean; required: boolean }): unknown\n}>()\n\n// The consumer's `aria-describedby` is merged with the hint and error references, and the\n// merged list is bound after the other attributes, which fallthrough would overwrite.\ndefineOptions({ inheritAttrs: false })\n\nconst attrs = useAttrs()\n\nconst { hintId, errorId, describedBy } = useFieldIds(\n  attrs,\n  () => !!props.hint && !props.error,\n  undefined,\n  () => !!props.error,\n)\n\nconst rootEl = ref<HTMLFieldSetElement | null>(null)\n\ndefineExpose({\n  /** The `<fieldset>`. */\n  el: rootEl,\n})\n</script>\n\n<template>\n  <fieldset\n    ref=\"rootEl\"\n    v-bind=\"attrs\"\n    class=\"v-fieldset\"\n    :aria-describedby=\"describedBy\"\n    :data-orientation=\"orientation\"\n  >\n    <legend v-if=\"legend\" class=\"v-fieldset-legend\" :class=\"{ 'v-visually-hidden': hideLegend }\">\n      {{ legend }}<span v-if=\"required\" class=\"v-field-required\" aria-hidden=\"true\">*</span>\n    </legend>\n    <div class=\"v-fieldset-body\">\n      <slot :invalid=\"!!error\" :required=\"required\" />\n    </div>\n    <VFieldMessage :hint=\"hint\" :error=\"error\" :hint-id=\"hintId\" :error-id=\"errorId\" />\n    <VFieldAnnouncer :text=\"error\" />\n  </fieldset>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-fieldset {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    min-inline-size: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n    font-family: var(--vectis-text-family);\n  }\n\n  /* A rendered legend is not a flex item of its fieldset, so the gap misses it: a margin. */\n  .v-fieldset-legend {\n    margin-block-end: var(--vectis-space-2);\n    padding: 0;\n    color: var(--vectis-color-text);\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  /* A native `disabled` disables every control of the group: its name and help grey out. */\n  .v-fieldset:disabled > .v-fieldset-legend {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-fieldset:disabled > .v-field-hint {\n    --typography-color: var(--vectis-color-text-subtle);\n  }\n\n  .v-fieldset-body {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--vectis-space-2);\n  }\n\n  .v-fieldset[data-orientation='horizontal'] > .v-fieldset-body {\n    flex-flow: row wrap;\n    column-gap: var(--vectis-space-4);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCA,IAAM,IAAQ,GAqBR,IAAQ,EAAS,GAEjB,EAAE,WAAQ,YAAS,mBAAgB,EACvC,SACM,CAAC,CAAC,EAAM,QAAQ,CAAC,EAAM,OAC7B,KAAA,SACM,CAAC,CAAC,EAAM,KAChB,GAEM,IAAS,EAAgC,IAAI;SAEnD,EAAa,EAEX,IAAI,EACN,CAAC,mBAIC,EAeW,YAfX,EAeW;YAdL;GAAJ,KAAI;KACI,EAAA,CAAA,GAAK;GACb,OAAM;GACL,oBAAkB,EAAA,CAAA;GAClB,oBAAkB,EAAA;;GAEL,EAAA,UAAA,EAAA,GAAd,EAES,UAAA;;IAFa,OAAK,EAAA,CAAC,qBAAmB,EAAA,qBAAgC,EAAA,WAAU,CAAA,CAAA;WACpF,EAAA,MAAM,GAAA,CAAA,GAAe,EAAA,YAAA,EAAA,GAAZ,EAA0E,QAA1E,GAAkE,GAAC,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;GAEjF,EAEM,OAFN,GAEM,CADJ,EAAgD,EAAA,QAAA,WAAA;IAAzC,SAAO,CAAA,CAAI,EAAA;IAAQ,UAAU,EAAA;;GAEtC,EAAmF,GAAA;IAAnE,MAAM,EAAA;IAAO,OAAO,EAAA;IAAQ,WAAS,EAAA,CAAA;IAAS,YAAU,EAAA,CAAA;;;;;;;GACxE,EAAiC,GAAA,EAAf,MAAM,EAAA,MAAK,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA"}
+{"version":3,"file":"VFieldset.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_mergeProps","_unref","_normalizeClass","_createTextVNode","_toDisplayString","_createCommentVNode","_createElementVNode","_renderSlot","_createVNode","VFieldMessage","VFieldAnnouncer","VFieldAnnouncer_default","VFieldMessage_default","_hoisted_1","_hoisted_2","_hoisted_3","VFieldset_vue_vue_type_script_setup_true_lang_default","__expose","props","__props","attrs","useAttrs","useFieldIds","rootEl","ref","openBlock","createElementBlock","mergeProps","unref","describedBy","normalizeClass","createTextVNode","toDisplayString","createCommentVNode","createElementVNode","renderSlot","_ctx","createVNode","hintId","errorId"],"sources":["../../../src/components/VFieldset/VFieldset.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * A native `<fieldset>`, named by its `<legend>`: a group of radios, checkboxes or related\n * fields announced as one. The hint and the error describe the group; `aria-invalid` is not\n * allowed on a group, so the invalid state reaches the controls through the slot.\n */\n\nimport { ref, useAttrs } from 'vue'\n\nimport VFieldAnnouncer from '../VField/VFieldAnnouncer.vue'\nimport VFieldMessage from '../VField/VFieldMessage.vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\n\n/** How the controls of the group are laid out: in a column, or in a wrapping row. */\nexport type FieldsetOrientation = 'vertical' | 'horizontal'\n\ninterface FieldsetProps {\n  /** The legend, which names the group for assistive technology. */\n  legend?: string\n  /** A line of help under the group, read along with its name. */\n  hint?: string\n  /**\n   * A message saying what is wrong with the group, shown in place of the hint and read along\n   * with its name. It is announced when it appears or changes, and the slot's `invalid` turns\n   * true.\n   */\n  error?: string\n  /**\n   * Marks the group as required: an asterisk follows the legend, and the slot's `required`\n   * turns true, to be set on the controls.\n   */\n  required?: boolean\n  /** Hides the legend visually. It still names the group for assistive technology. */\n  hideLegend?: boolean\n  /** Lays the controls out in a column (`vertical`, the default) or in a wrapping row. */\n  orientation?: FieldsetOrientation\n}\n\nconst props = withDefaults(defineProps<FieldsetProps>(), {\n  legend: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  hideLegend: false,\n  orientation: 'vertical',\n})\n\ndefineSlots<{\n  /**\n   * The controls of the group. `invalid` is true while there is an error, and `required`\n   * repeats the prop: bind them on the controls.\n   */\n  default(props: { invalid: boolean; required: boolean }): unknown\n}>()\n\n// The consumer's `aria-describedby` is merged with the hint and error references, and the\n// merged list is bound after the other attributes, which fallthrough would overwrite.\ndefineOptions({ inheritAttrs: false })\n\nconst attrs = useAttrs()\n\nconst { hintId, errorId, describedBy } = useFieldIds(\n  attrs,\n  () => !!props.hint && !props.error,\n  undefined,\n  () => !!props.error,\n)\n\nconst rootEl = ref<HTMLFieldSetElement | null>(null)\n\ndefineExpose({\n  /** The `<fieldset>`. */\n  el: rootEl,\n})\n</script>\n\n<template>\n  <fieldset\n    ref=\"rootEl\"\n    v-bind=\"attrs\"\n    class=\"v-fieldset\"\n    :aria-describedby=\"describedBy\"\n    :data-orientation=\"orientation\"\n  >\n    <legend v-if=\"legend\" class=\"v-fieldset-legend\" :class=\"{ 'v-visually-hidden': hideLegend }\">\n      {{ legend }}<span v-if=\"required\" class=\"v-field-required\" aria-hidden=\"true\">*</span>\n    </legend>\n    <div class=\"v-fieldset-body\">\n      <slot :invalid=\"!!error\" :required=\"required\" />\n    </div>\n    <VFieldMessage :hint=\"hint\" :error=\"error\" :hint-id=\"hintId\" :error-id=\"errorId\" />\n    <VFieldAnnouncer :text=\"error\" />\n  </fieldset>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-fieldset {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    min-inline-size: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n    font-family: var(--vectis-text-family);\n  }\n\n  /* A rendered legend is not a flex item of its fieldset, so the gap misses it: a margin. */\n  .v-fieldset-legend {\n    margin-block-end: var(--vectis-space-2);\n    padding: 0;\n    color: var(--vectis-color-text);\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  /* A native `disabled` disables every control of the group: its name and help grey out. */\n  .v-fieldset:disabled > .v-fieldset-legend {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-fieldset:disabled > .v-field-hint {\n    --typography-color: var(--vectis-color-text-subtle);\n  }\n\n  .v-fieldset-body {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--vectis-space-2);\n  }\n\n  .v-fieldset[data-orientation='horizontal'] > .v-fieldset-body {\n    flex-flow: row wrap;\n    column-gap: var(--vectis-space-4);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCA,IAAMoB,IAAQC,GAqBRC,IAAQC,EAAS,GAEjB,EAAE,WAAQ,YAAS,mBAAgBC,EACvCF,SACM,CAAC,CAACF,EAAM,QAAQ,CAACA,EAAM,OAC7B,KAAA,SACM,CAAC,CAACA,EAAM,KAChB,GAEMK,IAASC,EAAgC,IAAI;SAEnDP,EAAa,EAEX,IAAIM,EACN,CAAC,cAICzB,EAAA,GAAAC,EAeW,YAfXC,EAeW;GAdL,SAAA;GAAJ,KAAIuB;EACI,GAAAtB,EAAAmB,CAAA,GAAK;GACb,OAAM;GACL,oBAAkBnB,EAAA4B,CAAA;GAClB,oBAAkBV,EAAA;;GAELA,EAAA,UAAdrB,EAAA,GAAAC,EAES,UAAA;;IAFa,OAAKG,EAAA,CAAC,qBAAmB,EAAA,qBAAgCiB,EAAA,WAAU,CAAA,CAAA;GACpFhB,GAAAA,CAAAA,EAAAC,EAAAe,EAAA,MAAM,GAAA,CAAA,GAAeA,EAAA,YAAZrB,EAAA,GAAAC,EAA0E,QAA1Ee,GAAkE,GAAC,KAAAmB,EAAA,IAAA,EAAA,CAAA,GAAA,CAAA,KAAAA,EAAA,IAAA,EAAA;GAEjF3B,EAEM,OAFNS,GAEM,CADJR,EAAgD6B,EAAA,QAAA,WAAA;IAAzC,SAAO,CAAA,CAAIjB,EAAA;IAAQ,UAAUA,EAAA;;GAEtCX,EAAmFC,GAAA;IAAnE,MAAMU,EAAA;IAAO,OAAOA,EAAA;IAAQ,WAASlB,EAAAqC,CAAA;IAAS,YAAUrC,EAAAsC,CAAA;;;;;;;GACxE/B,EAAiCE,GAAA,EAAf,MAAMS,EAAA,MAAK,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA"}

package/dist/components/VFileInput/VFileInput.d.ts

@@ -16,8 +16,6 @@ export interface FileInputChipSlotProps {
     remove: () => void;
     /** The chip size worked out to sit inside the field, one step below it. */
     size: ChipSize;
-    /** Whether the chip takes its compact height, to catch up below the smallest step. */
-    compact: boolean;
 }
 /** What the `#counter` slot receives. */
 export interface FileInputCounterSlotProps {
@@ -55,8 +53,6 @@ interface FileInputProps {
     noDrop?: boolean;
     /** The height of the field: 32, 40 or 48 pixels. */
     size?: FileInputSize;
-    /** Takes 4px off the height, leaving the padding, the text and the icons as they are. */
-    compact?: boolean;
     /** Makes the field unusable, greyed out through the colour tokens. */
     disabled?: boolean;
     /**
@@ -186,7 +182,6 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
     pickerLabel: string;
     error: string;
     size: FileInputSize;
-    compact: boolean;
     iconStart: IconSource;
     disabled: boolean;
     required: boolean;