vectis-ui 0.14.0 → 0.16.0

package/dist/components/VPagination/VPagination.vue_vue_type_script_setup_true_lang.js

@@ -36,10 +36,6 @@ var N = [
 		selectedVariant: { default: "solid" },
 		tone: { default: "accent" },
 		size: { default: "md" },
-		compact: {
-			type: Boolean,
-			default: !1
-		},
 		elevated: {
 			type: Boolean,
 			default: !1
@@ -225,7 +221,6 @@ var N = [
 			detached: u.detached,
 			bordered: u.bordered,
 			size: u.size,
-			compact: u.compact || void 0,
 			elevated: u.elevated || void 0
 		}, {
 			default: M(() => [
@@ -284,7 +279,6 @@ var N = [
 			"detached",
 			"bordered",
 			"size",
-			"compact",
 			"elevated"
 		])], 40, N));
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"VPagination.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VPagination/VPagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @core\n/**\n * Native buttons activate pages. JavaScript builds bounded page windows and provides roving\n * keyboard navigation.\n */\nimport { computed, h, nextTick, ref } from 'vue'\nimport type { FunctionalComponent } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VButtonGroup from '../VButton/VButtonGroup.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { chevron_left as chevronLeftIcon } from '../VIcon/icons/chevron_left'\nimport { chevron_right as chevronRightIcon } from '../VIcon/icons/chevron_right'\nimport { first_page as firstPageIcon } from '../VIcon/icons/first_page'\nimport { last_page as lastPageIcon } from '../VIcon/icons/last_page'\nimport { more_horiz as moreHorizIcon } from '../VIcon/icons/more_horiz'\nimport type { IconSource } from '../VIcon/types'\nimport VIconButton from '../VIconButton/VIconButton.vue'\n\nimport { arrowNavigate, navigableItems } from '../../utils/arrowNav'\nimport { clamp } from '../../utils/number'\nimport { resolveMatcher } from '../../utils/matcher'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\n\n/** How the pages that are not the current one are drawn. */\nexport type PaginationItemVariant = 'ghost' | 'outline'\n\n/** How the current page is drawn. */\nexport type PaginationSelectedVariant = 'solid' | 'soft' | 'ghost'\n\n/** The colour of the current page. */\nexport type PaginationTone = 'accent' | 'neutral' | 'danger'\n\n/** The height of the pills, from the scale every control shares. */\nexport type PaginationSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\n/** Where the row sits in the width it is given. */\nexport type PaginationAlign = 'start' | 'center' | 'end'\n\n/** Whether the previous and next controls are rendered, and what they show. */\nexport type PaginationControls = false | 'icon' | 'text' | 'both'\n\n/**\n * Which pages cannot be reached, given either as a list of page numbers or as a function\n * answering that question for a page.\n */\nexport type PaginationMatcher = number[] | ((page: number) => boolean)\n\ninterface PaginationProps {\n  /**\n   * How many pages there are in all. It is 1 by default, which renders a single page: the\n   * real count almost always has to be given.\n   */\n  length?: number\n  /**\n   * How many slots to render, ellipses counted among them, so the row keeps exactly the same\n   * width whichever page is current. Below 5, the row drops the bounds and the ellipses and\n   * shows that many consecutive pages around the current one. At 0, no page is rendered and the\n   * controls alone remain. Left out, every page is rendered.\n   */\n  totalVisible?: number\n\n  /**\n   * Separates the buttons instead of joining them into one segmented control. It is the\n   * word VButtonGroup and VToggle use for the same question, in the same direction.\n   */\n  detached?: boolean\n  /**\n   * Draws a line between the joined buttons, so the row reads as segments rather than as one\n   * frame, on the terms of VButtonGroup's own `bordered`. It has no effect under `detached`.\n   */\n  bordered?: boolean\n  /**\n   * How the pages OTHER than the current one, and the controls, are drawn. It is named for the\n   * ITEMS because that is what it paints: on VTabs and VDataTable `variant` names the\n   * decoration of the frame instead.\n   */\n  itemVariant?: PaginationItemVariant\n  /**\n   * How the current page is drawn, in the row's tone: filled, tinted, or the colour of its\n   * text alone. The same choice as VToggle's `selectedVariant`.\n   */\n  selectedVariant?: PaginationSelectedVariant\n  /** The colour the current page takes. The other pages and the controls stay neutral. */\n  tone?: PaginationTone\n  /** The height of the buttons, from the scale shared by every control. */\n  size?: PaginationSize\n  /** Takes 4px off the height of every button. */\n  compact?: boolean\n  /** Raises the row off the page, on the terms of VButton's own `elevated`. */\n  elevated?: boolean\n  /** Where the row sits in the width it is given. */\n  align?: PaginationAlign\n\n  /**\n   * The previous and next buttons on either side of the pages: what they show, or `false` to\n   * leave them out.\n   */\n  controls?: PaginationControls\n  /** The icon of the previous control: an icon name, or an explicit render. */\n  prevIcon?: IconSource\n  /** The icon of the next control: an icon name, or an explicit render. */\n  nextIcon?: IconSource\n  /**\n   * The wording of the previous control, used both as its visible text and as what\n   * screen readers announce. It falls back to the design system dictionary.\n   */\n  prevText?: string\n  /**\n   * The wording of the next control, used both as its visible text and as what screen\n   * readers announce. It falls back to the design system dictionary.\n   */\n  nextText?: string\n  /**\n   * Adds first and last page controls outside the previous and next ones, drawn the way\n   * `controls` draws those. It has no effect when `controls` is `false`.\n   */\n  edgeControls?: boolean\n  /** The icon of the first page control: an icon name, or an explicit render. */\n  firstIcon?: IconSource\n  /** The icon of the last page control: an icon name, or an explicit render. */\n  lastIcon?: IconSource\n  /**\n   * The wording of the first page control, used both as its visible text and as what\n   * screen readers announce. It falls back to the design system dictionary.\n   */\n  firstText?: string\n  /**\n   * The wording of the last page control, used both as its visible text and as what\n   * screen readers announce. It falls back to the design system dictionary.\n   */\n  lastText?: string\n\n  /** Makes the whole component unusable. */\n  disabled?: boolean\n  /**\n   * Which pages cannot be reached, as a list or as a function. The previous and next\n   * controls step OVER them rather than stopping at one.\n   */\n  disabledPages?: PaginationMatcher\n\n  /**\n   * What screen readers announce for the navigation itself. It falls back to the\n   * design system dictionary.\n   */\n  label?: string\n  /**\n   * How a page is announced. A pill shows a bare number, which alone means nothing to\n   * a screen reader: this is what turns it into \"Page 3\". It falls back to the design\n   * system dictionary.\n   */\n  pageLabel?: (page: number) => string\n  /** The address of a page. Left out, they are buttons. */\n  href?: (page: number) => string\n}\n\nconst props = withDefaults(defineProps<PaginationProps>(), {\n  length: 1,\n  totalVisible: undefined,\n  detached: false,\n  bordered: false,\n  itemVariant: 'outline',\n  selectedVariant: 'solid',\n  tone: 'accent',\n  size: 'md',\n  compact: false,\n  elevated: false,\n  align: 'start',\n  controls: 'icon',\n  prevIcon: () => chevronLeftIcon,\n  nextIcon: () => chevronRightIcon,\n  prevText: undefined,\n  nextText: undefined,\n  edgeControls: false,\n  firstIcon: () => firstPageIcon,\n  lastIcon: () => lastPageIcon,\n  firstText: undefined,\n  lastText: undefined,\n  disabled: false,\n  disabledPages: undefined,\n  label: undefined,\n  pageLabel: undefined,\n  href: undefined,\n})\n\nconst emit = defineEmits<{\n  /**\n   * A page was chosen from the row, a pill or a control, with the click that chose it. It comes\n   * before the model changes, so under `href` a single-page application calls\n   * `preventDefault()` on the event and hands the address to its router instead of letting the\n   * browser load it.\n   */\n  navigate: [page: number, event: MouseEvent]\n}>()\n\n// The prop wins over the dictionary, and above both, a consumer's own aria-label or\n// aria-labelledby still wins; that arbitration is what `useAriaLabel` is for.\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.pagination.label)\nconst resolvedPrevText = computed(() => props.prevText ?? m.value.pagination.previous)\nconst resolvedNextText = computed(() => props.nextText ?? m.value.pagination.next)\nconst resolvedFirstText = computed(() => props.firstText ?? m.value.pagination.first)\nconst resolvedLastText = computed(() => props.lastText ?? m.value.pagination.last)\n\n/** The page being shown, counted from 1. It starts on the first. */\nconst page = defineModel<number>({ default: 1 })\n\n/** One slot in the row: either a page, or the ellipsis standing for those left out. */\ntype PaginationItem = { kind: 'page'; key: string; page: number } | { kind: 'gap'; key: string }\n\n// A length or a model that is not a whole number (`NaN` while a page size is still loading,\n// a computed `2.5`) is brought back to a page that exists, or no pill would ever match it.\nconst total = computed(() => Math.max(Math.trunc(props.length) || 1, 1))\nconst currentPage = computed(() => clamp(Math.round(page.value) || 1, 1, total.value))\n\nconst isPageDisabled = computed(() => resolveMatcher(props.disabledPages))\n\n// @a11y\n// A pill shows nothing but a number, which on its own tells a screen reader\n// nothing at all; this is what has it announced as \"Page 3\".\nfunction pageLabelFor(n: number): string {\n  return props.pageLabel ? props.pageLabel(n) : m.value.pagination.page(n)\n}\n\n/** Works out which slots the row holds. */\nconst items = computed<PaginationItem[]>(() => {\n  const count = total.value\n  const current = currentPage.value\n\n  const pageItem = (n: number): PaginationItem => ({ kind: 'page', key: `page-${n}`, page: n })\n  const pages = (from: number, to: number): PaginationItem[] => {\n    const out: PaginationItem[] = []\n    for (let n = from; n <= to; n++) out.push(pageItem(n))\n    return out\n  }\n  // Keyed by the side it stands on, never by the page it follows: there is at most one\n  // ellipsis per side, and the left one always comes after the first page while the right\n  // one always comes before the last. A key derived from the window would change on every\n  // navigation, so the right-hand ellipsis would be destroyed and rebuilt each time the\n  // window slid, for a node that never changes.\n  const gap = (side: 'start' | 'end'): PaginationItem => ({ kind: 'gap', key: `gap-${side}` })\n\n  // With no limit given, nothing is left out. At 0 the row holds the controls alone.\n  const limit = Math.trunc(props.totalVisible ?? count)\n  const visible = Number.isNaN(limit) ? count : Math.max(limit, 0)\n  if (visible === 0) return []\n  if (visible >= count) return pages(1, count)\n\n  // Below five slots there is no room for the first page, an ellipsis, the current page,\n  // another ellipsis and the last: the row is a plain window of consecutive pages, held\n  // against the bounds so it keeps the same number of slots.\n  if (visible < 5) {\n    const from = clamp(current - Math.floor((visible - 1) / 2), 1, count - visible + 1)\n    return pages(from, from + visible - 1)\n  }\n\n  const start = current - Math.floor((visible - 5) / 2)\n  const end = start + (visible - 5)\n\n  // The window is stretched to the bound instead, which both avoids that and keeps the number\n  // of slots exactly the same.\n  if (start <= 3) return [...pages(1, visible - 2), gap('end'), pageItem(count)]\n  if (end >= count - 2) return [pageItem(1), gap('start'), ...pages(count - visible + 3, count)]\n  return [pageItem(1), gap('start'), ...pages(start, end), gap('end'), pageItem(count)]\n})\n\n/**\n * Where a control leads: the nearest page in that direction that can actually be reached,\n * disabled ones being stepped over rather than stopped at. Answering `undefined` means there is\n * none left, which disables the control; and that single answer also covers being on the first\n * or the last page, with no separate test for the ends.\n */\nfunction step(direction: -1 | 1): number | undefined {\n  for (let n = currentPage.value + direction; n >= 1 && n <= total.value; n += direction) {\n    if (!isPageDisabled.value(n)) return n\n  }\n  return undefined\n}\n\n/**\n * Where a first or last control leads: the reachable page farthest in that direction. It is\n * `undefined` exactly when `step` is, so each edge control disables itself with its neighbour.\n */\nfunction leap(direction: -1 | 1): number | undefined {\n  const end = direction < 0 ? 1 : total.value\n  for (let n = end; n !== currentPage.value; n -= direction) {\n    if (!isPageDisabled.value(n)) return n\n  }\n  return undefined\n}\n\nconst firstTarget = computed(() => leap(-1))\nconst prevTarget = computed(() => step(-1))\nconst nextTarget = computed(() => step(1))\nconst lastTarget = computed(() => leap(1))\n\nfunction goTo(n: number | undefined) {\n  if (n === undefined) return\n  page.value = clamp(n, 1, total.value)\n}\n\n/** The address a pill or a control links to, or `undefined` when the row is made of buttons. */\nfunction hrefFor(n: number): string | undefined {\n  return props.href?.(n)\n}\n\n// @core\n/*\n * A link clicked with a modifier held (Ctrl or Cmd for a new tab, Shift for a window, Alt for a\n * download) opens somewhere ELSE: the page on screen stays where it is, so the model must not\n * move. The test the routers themselves make before taking a click over.\n */\nfunction opensElsewhere(event: MouseEvent): boolean {\n  return (\n    props.href !== undefined &&\n    (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)\n  )\n}\n\nfunction choose(event: MouseEvent, n: number | undefined) {\n  if (n === undefined || opensElsewhere(event)) return\n  emit('navigate', n, event)\n  goTo(n)\n}\n\nfunction isUnusable(el: HTMLElement): boolean {\n  return el.matches(':disabled, [aria-disabled=\"true\"]')\n}\n\n// @a11y\n/*\n * The previous and next controls disable themselves once no page is left in their direction,\n * and a focused button that becomes disabled hands the focus to <body>: a keyboard reader\n * pressing \"Next page\" on the second to last page would be sent back to the top of the document\n * by the next Tab. The focus goes to the page just reached instead, the current page being\n * always rendered. A row without pages hands it to the nearest control still usable, the one\n * before it first.\n */\nasync function goFromControl(event: MouseEvent, n: number | undefined) {\n  const control = event.currentTarget as HTMLElement\n  const hadFocus = control === document.activeElement\n  choose(event, n)\n  if (!hadFocus) return\n  await nextTick()\n  const nav = navEl.value\n  if (!nav || !isUnusable(control)) return\n  const current = nav.querySelector<HTMLElement>('[aria-current=\"page\"]')\n  if (current) return current.focus()\n  const usable = [...nav.querySelectorAll<HTMLElement>(':is(button, a[href]):not(:disabled)')]\n  const before = usable.filter(\n    (el) => control.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_PRECEDING,\n  )\n  ;(before.at(-1) ?? usable[0])?.focus()\n}\n\ntype ControlSide = 'first' | 'prev' | 'next' | 'last'\n\n/*\n * The four controls, written once: they differ only by their direction and reach, and template\n * blocks drifting apart on the next change is exactly what this avoids. A functional component\n * because they sit at either end of the row, with the pages in between, where a `v-for` over\n * descriptors could not put them.\n */\nconst PageControl: FunctionalComponent<{ side: ControlSide }> = ({ side }) => {\n  const { label, icon, target } = {\n    first: { label: resolvedFirstText.value, icon: props.firstIcon, target: firstTarget.value },\n    prev: { label: resolvedPrevText.value, icon: props.prevIcon, target: prevTarget.value },\n    next: { label: resolvedNextText.value, icon: props.nextIcon, target: nextTarget.value },\n    last: { label: resolvedLastText.value, icon: props.lastIcon, target: lastTarget.value },\n  }[side]\n  const disabled = props.disabled || target === undefined\n  const common = {\n    class: 'v-pagination-control',\n    'data-side': side,\n    variant: props.itemVariant,\n    disabled,\n    href: hrefFor(target ?? currentPage.value),\n    rel: props.href && !disabled ? side : undefined,\n    onClick: (event: MouseEvent) => goFromControl(event, target),\n  }\n  const glyph = () => h(VIcon, { ...iconProps(icon), mirrored: true })\n  if (props.controls === 'icon') return h(VIconButton, { ...common, label }, glyph)\n  const backward = side === 'first' || side === 'prev'\n  return h(\n    VButton,\n    { ...common, tone: 'neutral' },\n    {\n      ...(props.controls === 'both' ? { [backward ? 'start' : 'end']: glyph } : {}),\n      default: () => h('span', { class: 'v-pagination-control-label' }, label),\n    },\n  )\n}\n\nconst navEl = ref<HTMLElement | null>(null)\n\n// @keyboard @a11y\n/** The arrow keys, through the shared implementation in `utils/arrowNav`. */\nfunction onKeydown(event: KeyboardEvent) {\n  const nav = navEl.value\n  if (!nav) return\n  arrowNavigate(event, nav, () =>\n    navigableItems(nav, '.v-pagination-page:not(:disabled, [aria-disabled=\"true\"])'),\n  )\n}\n\n// The pills are rendered by a VButtonGroup inside the nav, so a template ref reaches none of\n// them. `focus` goes to the current page.\ndefineExpose({\n  // Two queries, not one selector list: a list matches in DOM order, which would hand the\n  // focus to the previous control ahead of the current page. `a[href]` because an inert link\n  // has lost its address, and with it the ability to take the focus.\n  /** Moves the focus to the current page, or to the first control that can take it. */\n  focus: (options?: FocusOptions) =>\n    (\n      navEl.value?.querySelector<HTMLElement>(\n        '[aria-current=\"page\"]:is(button, a[href]):not(:disabled)',\n      ) ?? navEl.value?.querySelector<HTMLElement>(':is(button, a[href]):not(:disabled)')\n    )?.focus(options),\n  /** The `<nav>` element, which is also where the consumer's attributes land. */\n  el: navEl,\n})\n</script>\n\n<template>\n  <nav\n    ref=\"navEl\"\n    class=\"v-pagination\"\n    :aria-label=\"ariaLabel\"\n    :data-align=\"align\"\n    :data-item-variant=\"itemVariant\"\n    @keydown=\"onKeydown\"\n  >\n    <!-- The row is a VButtonGroup either way: joined it merges the borders of its DIRECT\n         button children, and detached it spaces them, which is all this prop asks of it.\n         That is why there is no list markup wrapping the pills, and why the ellipsis is\n         itself an inert button rather than a plain span: anything else between two pills\n         would break the seam. -->\n    <!--\n      `|| undefined` keeps the group opinion-free when the row does not ask, `undefined` being\n      what means \"no opinion\" there where `false` is an order. The size is always an opinion,\n      the pagination having a default of its own.\n    -->\n    <VButtonGroup\n      class=\"v-pagination-items\"\n      :detached=\"detached\"\n      :bordered=\"bordered\"\n      :size=\"size\"\n      :compact=\"compact || undefined\"\n      :elevated=\"elevated || undefined\"\n    >\n      <PageControl v-if=\"controls && edgeControls\" side=\"first\" />\n      <PageControl v-if=\"controls\" side=\"prev\" />\n\n      <template v-for=\"item in items\" :key=\"item.key\">\n        <VButton\n          v-if=\"item.kind === 'page'\"\n          class=\"v-pagination-page\"\n          :variant=\"item.page === currentPage ? selectedVariant : itemVariant\"\n          :tone=\"item.page === currentPage ? tone : 'neutral'\"\n          :disabled=\"disabled || isPageDisabled(item.page)\"\n          :aria-label=\"pageLabelFor(item.page)\"\n          :aria-current=\"item.page === currentPage ? 'page' : undefined\"\n          :href=\"hrefFor(item.page)\"\n          @click=\"choose($event, item.page)\"\n        >\n          {{ item.page }}\n        </VButton>\n        <!--\n          The ellipsis is a disabled icon-only button rather than a span: being a button, it\n          keeps the joined row's seam continuous and follows the size and density like\n          everything else. Disabling it takes it out of the tab order, and it is hidden from\n          screen readers, which have the page numbers themselves; which is also why it is a\n          VButton and not a VIconButton, whose required label would name something nobody can\n          reach.\n        -->\n        <VButton\n          v-else\n          class=\"v-pagination-ellipsis\"\n          aria-hidden=\"true\"\n          data-icon-only\n          :variant=\"itemVariant\"\n          tone=\"neutral\"\n          disabled\n        >\n          <template #start>\n            <VIcon :name=\"moreHorizIcon\" />\n          </template>\n        </VButton>\n      </template>\n\n      <PageControl v-if=\"controls\" side=\"next\" />\n      <PageControl v-if=\"controls && edgeControls\" side=\"last\" />\n    </VButtonGroup>\n  </nav>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-pagination {\n    display: flex;\n  }\n\n  .v-pagination[data-align='center'] {\n    justify-content: center;\n  }\n\n  .v-pagination[data-align='end'] {\n    justify-content: flex-end;\n  }\n\n  /*\n   * Qualified by an attribute VButton always renders, which makes both of these beat that\n   * button's own padding and its own transition whatever order the two sheets end up in; the\n   * VIconButton idiom.\n   */\n  .v-pagination-page[data-size] {\n    /* A one-digit pill is square, and widens by itself past that. The height variable\n       is set by the shared size class on this very element, so this single rule covers\n       all five sizes and their compact forms. */\n    min-inline-size: var(--control-height);\n    padding-inline: var(--vectis-space-2);\n\n    /*\n     * The highlight changes instantly, and this must not be \"restored for consistency\". VButton\n     * fades `background-color` over `--vectis-duration-fast`, which is right for a button that\n     * stays put and wrong here: truncation SHIFTS its window, so from one page to the next the\n     * highlight keeps its slot but changes ELEMENT, and the outgoing and incoming pills are\n     * both half-tinted for a few frames; read as a flicker, with nothing in the console.\n     */\n    transition: none;\n  }\n\n  /* The ellipsis is a disabled button only as a technical device; to the reader it is\n     not a control that has been turned off, so it does not take the forbidden\n     cursor. Qualified like the pills: VButton's disabled cursor weighs (0,2,0), and a bare\n     class loses to it whatever the sheet order. */\n  .v-pagination-ellipsis[data-size] {\n    cursor: default;\n  }\n\n  /*\n   * A disabled page or control greys its outline to a different token, hence a variable the\n   * second rule changes. VToggle's `--toggle-frame` is the same device.\n   */\n  .v-pagination[data-item-variant='outline'] {\n    --pagination-frame: var(--vectis-color-border-strong);\n  }\n\n  .v-pagination[data-item-variant='outline'] > * > :is(:disabled, [aria-disabled='true']) {\n    --pagination-frame: var(--vectis-color-border);\n  }\n\n  .v-pagination[data-item-variant='outline']\n    > *\n    > .v-pagination-page[aria-current='page']:is([data-variant='soft'], [data-variant='ghost']) {\n    border-color: var(--pagination-frame);\n  }\n\n  /*\n   * The class is repeated to reach (0,6,0). The variant, hover and active rules reach (0,5,0),\n   * and with the forcing turned off any of them that still won would paint its tone over the\n   * selection, with HighlightText on top of it.\n   */\n  @media (forced-colors: active) {\n    .v-pagination-page.v-pagination-page.v-pagination-page.v-pagination-page[aria-current='page']:not(\n        :disabled,\n        [aria-disabled='true']\n      ) {\n      forced-color-adjust: none;\n      background-color: Highlight;\n      color: HighlightText;\n      border-color: Highlight;\n      outline-color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"VPagination.vue_vue_type_script_setup_true_lang.js","names":["chevronLeftIcon","chevronRightIcon","firstPageIcon","lastPageIcon","_useModel","VIcon","VIconButton","VButton","_openBlock","_createElementBlock","_unref","_createVNode","VButtonGroup","_withCtx","_createBlock","_createCommentVNode","_Fragment","_renderList","_createTextVNode","_toDisplayString","moreHorizIcon","VIcon_default","VButton_default","VIconButton_default","VButtonGroup_default","_hoisted_1","VPagination_vue_vue_type_script_setup_true_lang_default","chevron_left","chevron_right","first_page","last_page","\"modelValue\"","\"modelModifiers\"","__expose","__emit","props","__props","emit","m","useMessages","ariaLabel","useAriaLabel","resolvedPrevText","computed","resolvedNextText","resolvedFirstText","resolvedLastText","page","useModel","total","currentPage","clamp","isPageDisabled","resolveMatcher","pageLabelFor","n","items","count","current","pageItem","pages","out","from","to","gap","side","limit","visible","start","end","step","direction","leap","firstTarget","prevTarget","nextTarget","lastTarget","goTo","hrefFor","opensElsewhere","event","choose","isUnusable","el","goFromControl","control","hadFocus","nextTick","nav","navEl","usable","PageControl","disabled","target","common","glyph","h","iconProps","icon","backward","label","ref","onKeydown","arrowNavigate","navigableItems","options","openBlock","createElementBlock","unref","createVNode","withCtx","createBlock","createCommentVNode","Fragment","renderList","item","$event","createTextVNode","toDisplayString","more_horiz"],"sources":["../../../src/components/VPagination/VPagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @core\n/**\n * Native buttons activate pages. JavaScript builds bounded page windows and provides roving\n * keyboard navigation.\n */\nimport { computed, h, nextTick, ref } from 'vue'\nimport type { FunctionalComponent } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VButtonGroup from '../VButton/VButtonGroup.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { chevron_left as chevronLeftIcon } from '../VIcon/icons/chevron_left'\nimport { chevron_right as chevronRightIcon } from '../VIcon/icons/chevron_right'\nimport { first_page as firstPageIcon } from '../VIcon/icons/first_page'\nimport { last_page as lastPageIcon } from '../VIcon/icons/last_page'\nimport { more_horiz as moreHorizIcon } from '../VIcon/icons/more_horiz'\nimport type { IconSource } from '../VIcon/types'\nimport VIconButton from '../VIconButton/VIconButton.vue'\n\nimport { arrowNavigate, navigableItems } from '../../utils/arrowNav'\nimport { clamp } from '../../utils/number'\nimport { resolveMatcher } from '../../utils/matcher'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\n\n/** How the pages that are not the current one are drawn. */\nexport type PaginationItemVariant = 'ghost' | 'outline'\n\n/** How the current page is drawn. */\nexport type PaginationSelectedVariant = 'solid' | 'soft' | 'ghost'\n\n/** The colour of the current page. */\nexport type PaginationTone = 'accent' | 'neutral' | 'danger'\n\n/** The height of the pills, from the scale every control shares. */\nexport type PaginationSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\n/** Where the row sits in the width it is given. */\nexport type PaginationAlign = 'start' | 'center' | 'end'\n\n/** Whether the previous and next controls are rendered, and what they show. */\nexport type PaginationControls = false | 'icon' | 'text' | 'both'\n\n/**\n * Which pages cannot be reached, given either as a list of page numbers or as a function\n * answering that question for a page.\n */\nexport type PaginationMatcher = number[] | ((page: number) => boolean)\n\ninterface PaginationProps {\n  /**\n   * How many pages there are in all. It is 1 by default, which renders a single page: the\n   * real count almost always has to be given.\n   */\n  length?: number\n  /**\n   * How many slots to render, ellipses counted among them, so the row keeps exactly the same\n   * width whichever page is current. Below 5, the row drops the bounds and the ellipses and\n   * shows that many consecutive pages around the current one. At 0, no page is rendered and the\n   * controls alone remain. Left out, every page is rendered.\n   */\n  totalVisible?: number\n\n  /**\n   * Separates the buttons instead of joining them into one segmented control. It is the\n   * word VButtonGroup and VToggle use for the same question, in the same direction.\n   */\n  detached?: boolean\n  /**\n   * Draws a line between the joined buttons, so the row reads as segments rather than as one\n   * frame, on the terms of VButtonGroup's own `bordered`. It has no effect under `detached`.\n   */\n  bordered?: boolean\n  /**\n   * How the pages OTHER than the current one, and the controls, are drawn. It is named for the\n   * ITEMS because that is what it paints: on VTabs and VDataTable `variant` names the\n   * decoration of the frame instead.\n   */\n  itemVariant?: PaginationItemVariant\n  /**\n   * How the current page is drawn, in the row's tone: filled, tinted, or the colour of its\n   * text alone. The same choice as VToggle's `selectedVariant`.\n   */\n  selectedVariant?: PaginationSelectedVariant\n  /** The colour the current page takes. The other pages and the controls stay neutral. */\n  tone?: PaginationTone\n  /** The height of the buttons, from the scale shared by every control. */\n  size?: PaginationSize\n  /** Raises the row off the page, on the terms of VButton's own `elevated`. */\n  elevated?: boolean\n  /** Where the row sits in the width it is given. */\n  align?: PaginationAlign\n\n  /**\n   * The previous and next buttons on either side of the pages: what they show, or `false` to\n   * leave them out.\n   */\n  controls?: PaginationControls\n  /** The icon of the previous control: an icon name, or an explicit render. */\n  prevIcon?: IconSource\n  /** The icon of the next control: an icon name, or an explicit render. */\n  nextIcon?: IconSource\n  /**\n   * The wording of the previous control, used both as its visible text and as what\n   * screen readers announce. It falls back to the design system dictionary.\n   */\n  prevText?: string\n  /**\n   * The wording of the next control, used both as its visible text and as what screen\n   * readers announce. It falls back to the design system dictionary.\n   */\n  nextText?: string\n  /**\n   * Adds first and last page controls outside the previous and next ones, drawn the way\n   * `controls` draws those. It has no effect when `controls` is `false`.\n   */\n  edgeControls?: boolean\n  /** The icon of the first page control: an icon name, or an explicit render. */\n  firstIcon?: IconSource\n  /** The icon of the last page control: an icon name, or an explicit render. */\n  lastIcon?: IconSource\n  /**\n   * The wording of the first page control, used both as its visible text and as what\n   * screen readers announce. It falls back to the design system dictionary.\n   */\n  firstText?: string\n  /**\n   * The wording of the last page control, used both as its visible text and as what\n   * screen readers announce. It falls back to the design system dictionary.\n   */\n  lastText?: string\n\n  /** Makes the whole component unusable. */\n  disabled?: boolean\n  /**\n   * Which pages cannot be reached, as a list or as a function. The previous and next\n   * controls step OVER them rather than stopping at one.\n   */\n  disabledPages?: PaginationMatcher\n\n  /**\n   * What screen readers announce for the navigation itself. It falls back to the\n   * design system dictionary.\n   */\n  label?: string\n  /**\n   * How a page is announced. A pill shows a bare number, which alone means nothing to\n   * a screen reader: this is what turns it into \"Page 3\". It falls back to the design\n   * system dictionary.\n   */\n  pageLabel?: (page: number) => string\n  /** The address of a page. Left out, they are buttons. */\n  href?: (page: number) => string\n}\n\nconst props = withDefaults(defineProps<PaginationProps>(), {\n  length: 1,\n  totalVisible: undefined,\n  detached: false,\n  bordered: false,\n  itemVariant: 'outline',\n  selectedVariant: 'solid',\n  tone: 'accent',\n  size: 'md',\n  elevated: false,\n  align: 'start',\n  controls: 'icon',\n  prevIcon: () => chevronLeftIcon,\n  nextIcon: () => chevronRightIcon,\n  prevText: undefined,\n  nextText: undefined,\n  edgeControls: false,\n  firstIcon: () => firstPageIcon,\n  lastIcon: () => lastPageIcon,\n  firstText: undefined,\n  lastText: undefined,\n  disabled: false,\n  disabledPages: undefined,\n  label: undefined,\n  pageLabel: undefined,\n  href: undefined,\n})\n\nconst emit = defineEmits<{\n  /**\n   * A page was chosen from the row, a pill or a control, with the click that chose it. It comes\n   * before the model changes, so under `href` a single-page application calls\n   * `preventDefault()` on the event and hands the address to its router instead of letting the\n   * browser load it.\n   */\n  navigate: [page: number, event: MouseEvent]\n}>()\n\n// The prop wins over the dictionary, and above both, a consumer's own aria-label or\n// aria-labelledby still wins; that arbitration is what `useAriaLabel` is for.\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.pagination.label)\nconst resolvedPrevText = computed(() => props.prevText ?? m.value.pagination.previous)\nconst resolvedNextText = computed(() => props.nextText ?? m.value.pagination.next)\nconst resolvedFirstText = computed(() => props.firstText ?? m.value.pagination.first)\nconst resolvedLastText = computed(() => props.lastText ?? m.value.pagination.last)\n\n/** The page being shown, counted from 1. It starts on the first. */\nconst page = defineModel<number>({ default: 1 })\n\n/** One slot in the row: either a page, or the ellipsis standing for those left out. */\ntype PaginationItem = { kind: 'page'; key: string; page: number } | { kind: 'gap'; key: string }\n\n// A length or a model that is not a whole number (`NaN` while a page size is still loading,\n// a computed `2.5`) is brought back to a page that exists, or no pill would ever match it.\nconst total = computed(() => Math.max(Math.trunc(props.length) || 1, 1))\nconst currentPage = computed(() => clamp(Math.round(page.value) || 1, 1, total.value))\n\nconst isPageDisabled = computed(() => resolveMatcher(props.disabledPages))\n\n// @a11y\n// A pill shows nothing but a number, which on its own tells a screen reader\n// nothing at all; this is what has it announced as \"Page 3\".\nfunction pageLabelFor(n: number): string {\n  return props.pageLabel ? props.pageLabel(n) : m.value.pagination.page(n)\n}\n\n/** Works out which slots the row holds. */\nconst items = computed<PaginationItem[]>(() => {\n  const count = total.value\n  const current = currentPage.value\n\n  const pageItem = (n: number): PaginationItem => ({ kind: 'page', key: `page-${n}`, page: n })\n  const pages = (from: number, to: number): PaginationItem[] => {\n    const out: PaginationItem[] = []\n    for (let n = from; n <= to; n++) out.push(pageItem(n))\n    return out\n  }\n  // Keyed by the side it stands on, never by the page it follows: there is at most one\n  // ellipsis per side, and the left one always comes after the first page while the right\n  // one always comes before the last. A key derived from the window would change on every\n  // navigation, so the right-hand ellipsis would be destroyed and rebuilt each time the\n  // window slid, for a node that never changes.\n  const gap = (side: 'start' | 'end'): PaginationItem => ({ kind: 'gap', key: `gap-${side}` })\n\n  // With no limit given, nothing is left out. At 0 the row holds the controls alone.\n  const limit = Math.trunc(props.totalVisible ?? count)\n  const visible = Number.isNaN(limit) ? count : Math.max(limit, 0)\n  if (visible === 0) return []\n  if (visible >= count) return pages(1, count)\n\n  // Below five slots there is no room for the first page, an ellipsis, the current page,\n  // another ellipsis and the last: the row is a plain window of consecutive pages, held\n  // against the bounds so it keeps the same number of slots.\n  if (visible < 5) {\n    const from = clamp(current - Math.floor((visible - 1) / 2), 1, count - visible + 1)\n    return pages(from, from + visible - 1)\n  }\n\n  const start = current - Math.floor((visible - 5) / 2)\n  const end = start + (visible - 5)\n\n  // The window is stretched to the bound instead, which both avoids that and keeps the number\n  // of slots exactly the same.\n  if (start <= 3) return [...pages(1, visible - 2), gap('end'), pageItem(count)]\n  if (end >= count - 2) return [pageItem(1), gap('start'), ...pages(count - visible + 3, count)]\n  return [pageItem(1), gap('start'), ...pages(start, end), gap('end'), pageItem(count)]\n})\n\n/**\n * Where a control leads: the nearest page in that direction that can actually be reached,\n * disabled ones being stepped over rather than stopped at. Answering `undefined` means there is\n * none left, which disables the control; and that single answer also covers being on the first\n * or the last page, with no separate test for the ends.\n */\nfunction step(direction: -1 | 1): number | undefined {\n  for (let n = currentPage.value + direction; n >= 1 && n <= total.value; n += direction) {\n    if (!isPageDisabled.value(n)) return n\n  }\n  return undefined\n}\n\n/**\n * Where a first or last control leads: the reachable page farthest in that direction. It is\n * `undefined` exactly when `step` is, so each edge control disables itself with its neighbour.\n */\nfunction leap(direction: -1 | 1): number | undefined {\n  const end = direction < 0 ? 1 : total.value\n  for (let n = end; n !== currentPage.value; n -= direction) {\n    if (!isPageDisabled.value(n)) return n\n  }\n  return undefined\n}\n\nconst firstTarget = computed(() => leap(-1))\nconst prevTarget = computed(() => step(-1))\nconst nextTarget = computed(() => step(1))\nconst lastTarget = computed(() => leap(1))\n\nfunction goTo(n: number | undefined) {\n  if (n === undefined) return\n  page.value = clamp(n, 1, total.value)\n}\n\n/** The address a pill or a control links to, or `undefined` when the row is made of buttons. */\nfunction hrefFor(n: number): string | undefined {\n  return props.href?.(n)\n}\n\n// @core\n/*\n * A link clicked with a modifier held (Ctrl or Cmd for a new tab, Shift for a window, Alt for a\n * download) opens somewhere ELSE: the page on screen stays where it is, so the model must not\n * move. The test the routers themselves make before taking a click over.\n */\nfunction opensElsewhere(event: MouseEvent): boolean {\n  return (\n    props.href !== undefined &&\n    (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)\n  )\n}\n\nfunction choose(event: MouseEvent, n: number | undefined) {\n  if (n === undefined || opensElsewhere(event)) return\n  emit('navigate', n, event)\n  goTo(n)\n}\n\nfunction isUnusable(el: HTMLElement): boolean {\n  return el.matches(':disabled, [aria-disabled=\"true\"]')\n}\n\n// @a11y\n/*\n * The previous and next controls disable themselves once no page is left in their direction,\n * and a focused button that becomes disabled hands the focus to <body>: a keyboard reader\n * pressing \"Next page\" on the second to last page would be sent back to the top of the document\n * by the next Tab. The focus goes to the page just reached instead, the current page being\n * always rendered. A row without pages hands it to the nearest control still usable, the one\n * before it first.\n */\nasync function goFromControl(event: MouseEvent, n: number | undefined) {\n  const control = event.currentTarget as HTMLElement\n  const hadFocus = control === document.activeElement\n  choose(event, n)\n  if (!hadFocus) return\n  await nextTick()\n  const nav = navEl.value\n  if (!nav || !isUnusable(control)) return\n  const current = nav.querySelector<HTMLElement>('[aria-current=\"page\"]')\n  if (current) return current.focus()\n  const usable = [...nav.querySelectorAll<HTMLElement>(':is(button, a[href]):not(:disabled)')]\n  const before = usable.filter(\n    (el) => control.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_PRECEDING,\n  )\n  ;(before.at(-1) ?? usable[0])?.focus()\n}\n\ntype ControlSide = 'first' | 'prev' | 'next' | 'last'\n\n/*\n * The four controls, written once: they differ only by their direction and reach, and template\n * blocks drifting apart on the next change is exactly what this avoids. A functional component\n * because they sit at either end of the row, with the pages in between, where a `v-for` over\n * descriptors could not put them.\n */\nconst PageControl: FunctionalComponent<{ side: ControlSide }> = ({ side }) => {\n  const { label, icon, target } = {\n    first: { label: resolvedFirstText.value, icon: props.firstIcon, target: firstTarget.value },\n    prev: { label: resolvedPrevText.value, icon: props.prevIcon, target: prevTarget.value },\n    next: { label: resolvedNextText.value, icon: props.nextIcon, target: nextTarget.value },\n    last: { label: resolvedLastText.value, icon: props.lastIcon, target: lastTarget.value },\n  }[side]\n  const disabled = props.disabled || target === undefined\n  const common = {\n    class: 'v-pagination-control',\n    'data-side': side,\n    variant: props.itemVariant,\n    disabled,\n    href: hrefFor(target ?? currentPage.value),\n    rel: props.href && !disabled ? side : undefined,\n    onClick: (event: MouseEvent) => goFromControl(event, target),\n  }\n  const glyph = () => h(VIcon, { ...iconProps(icon), mirrored: true })\n  if (props.controls === 'icon') return h(VIconButton, { ...common, label }, glyph)\n  const backward = side === 'first' || side === 'prev'\n  return h(\n    VButton,\n    { ...common, tone: 'neutral' },\n    {\n      ...(props.controls === 'both' ? { [backward ? 'start' : 'end']: glyph } : {}),\n      default: () => h('span', { class: 'v-pagination-control-label' }, label),\n    },\n  )\n}\n\nconst navEl = ref<HTMLElement | null>(null)\n\n// @keyboard @a11y\n/** The arrow keys, through the shared implementation in `utils/arrowNav`. */\nfunction onKeydown(event: KeyboardEvent) {\n  const nav = navEl.value\n  if (!nav) return\n  arrowNavigate(event, nav, () =>\n    navigableItems(nav, '.v-pagination-page:not(:disabled, [aria-disabled=\"true\"])'),\n  )\n}\n\n// The pills are rendered by a VButtonGroup inside the nav, so a template ref reaches none of\n// them. `focus` goes to the current page.\ndefineExpose({\n  // Two queries, not one selector list: a list matches in DOM order, which would hand the\n  // focus to the previous control ahead of the current page. `a[href]` because an inert link\n  // has lost its address, and with it the ability to take the focus.\n  /** Moves the focus to the current page, or to the first control that can take it. */\n  focus: (options?: FocusOptions) =>\n    (\n      navEl.value?.querySelector<HTMLElement>(\n        '[aria-current=\"page\"]:is(button, a[href]):not(:disabled)',\n      ) ?? navEl.value?.querySelector<HTMLElement>(':is(button, a[href]):not(:disabled)')\n    )?.focus(options),\n  /** The `<nav>` element, which is also where the consumer's attributes land. */\n  el: navEl,\n})\n</script>\n\n<template>\n  <nav\n    ref=\"navEl\"\n    class=\"v-pagination\"\n    :aria-label=\"ariaLabel\"\n    :data-align=\"align\"\n    :data-item-variant=\"itemVariant\"\n    @keydown=\"onKeydown\"\n  >\n    <!-- The row is a VButtonGroup either way: joined it merges the borders of its DIRECT\n         button children, and detached it spaces them, which is all this prop asks of it.\n         That is why there is no list markup wrapping the pills, and why the ellipsis is\n         itself an inert button rather than a plain span: anything else between two pills\n         would break the seam. -->\n    <!--\n      `|| undefined` keeps the group opinion-free when the row does not ask, `undefined` being\n      what means \"no opinion\" there where `false` is an order. The size is always an opinion,\n      the pagination having a default of its own.\n    -->\n    <VButtonGroup\n      class=\"v-pagination-items\"\n      :detached=\"detached\"\n      :bordered=\"bordered\"\n      :size=\"size\"\n      :elevated=\"elevated || undefined\"\n    >\n      <PageControl v-if=\"controls && edgeControls\" side=\"first\" />\n      <PageControl v-if=\"controls\" side=\"prev\" />\n\n      <template v-for=\"item in items\" :key=\"item.key\">\n        <VButton\n          v-if=\"item.kind === 'page'\"\n          class=\"v-pagination-page\"\n          :variant=\"item.page === currentPage ? selectedVariant : itemVariant\"\n          :tone=\"item.page === currentPage ? tone : 'neutral'\"\n          :disabled=\"disabled || isPageDisabled(item.page)\"\n          :aria-label=\"pageLabelFor(item.page)\"\n          :aria-current=\"item.page === currentPage ? 'page' : undefined\"\n          :href=\"hrefFor(item.page)\"\n          @click=\"choose($event, item.page)\"\n        >\n          {{ item.page }}\n        </VButton>\n        <!--\n          The ellipsis is a disabled icon-only button rather than a span: being a button, it\n          keeps the joined row's seam continuous and follows the size and density like\n          everything else. Disabling it takes it out of the tab order, and it is hidden from\n          screen readers, which have the page numbers themselves; which is also why it is a\n          VButton and not a VIconButton, whose required label would name something nobody can\n          reach.\n        -->\n        <VButton\n          v-else\n          class=\"v-pagination-ellipsis\"\n          aria-hidden=\"true\"\n          data-icon-only\n          :variant=\"itemVariant\"\n          tone=\"neutral\"\n          disabled\n        >\n          <template #start>\n            <VIcon :name=\"moreHorizIcon\" />\n          </template>\n        </VButton>\n      </template>\n\n      <PageControl v-if=\"controls\" side=\"next\" />\n      <PageControl v-if=\"controls && edgeControls\" side=\"last\" />\n    </VButtonGroup>\n  </nav>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-pagination {\n    display: flex;\n  }\n\n  .v-pagination[data-align='center'] {\n    justify-content: center;\n  }\n\n  .v-pagination[data-align='end'] {\n    justify-content: flex-end;\n  }\n\n  /*\n   * Qualified by an attribute VButton always renders, which makes both of these beat that\n   * button's own padding and its own transition whatever order the two sheets end up in; the\n   * VIconButton idiom.\n   */\n  .v-pagination-page[data-size] {\n    /* A one-digit pill is square, and widens by itself past that. The height variable\n       is set by the shared size class on this very element, so this single rule covers\n       all five sizes in either density. */\n    min-inline-size: var(--control-height);\n    padding-inline: var(--vectis-space-2);\n\n    /*\n     * The highlight changes instantly, and this must not be \"restored for consistency\". VButton\n     * fades `background-color` over `--vectis-duration-fast`, which is right for a button that\n     * stays put and wrong here: truncation SHIFTS its window, so from one page to the next the\n     * highlight keeps its slot but changes ELEMENT, and the outgoing and incoming pills are\n     * both half-tinted for a few frames; read as a flicker, with nothing in the console.\n     */\n    transition: none;\n  }\n\n  /* The ellipsis is a disabled button only as a technical device; to the reader it is\n     not a control that has been turned off, so it does not take the forbidden\n     cursor. Qualified like the pills: VButton's disabled cursor weighs (0,2,0), and a bare\n     class loses to it whatever the sheet order. */\n  .v-pagination-ellipsis[data-size] {\n    cursor: default;\n  }\n\n  /*\n   * A disabled page or control greys its outline to a different token, hence a variable the\n   * second rule changes. VToggle's `--toggle-frame` is the same device.\n   */\n  .v-pagination[data-item-variant='outline'] {\n    --pagination-frame: var(--vectis-color-border-strong);\n  }\n\n  .v-pagination[data-item-variant='outline'] > * > :is(:disabled, [aria-disabled='true']) {\n    --pagination-frame: var(--vectis-color-border);\n  }\n\n  .v-pagination[data-item-variant='outline']\n    > *\n    > .v-pagination-page[aria-current='page']:is([data-variant='soft'], [data-variant='ghost']) {\n    border-color: var(--pagination-frame);\n  }\n\n  /*\n   * The class is repeated to reach (0,6,0). The variant, hover and active rules reach (0,5,0),\n   * and with the forcing turned off any of them that still won would paint its tone over the\n   * selection, with HighlightText on top of it.\n   */\n  @media (forced-colors: active) {\n    .v-pagination-page.v-pagination-page.v-pagination-page.v-pagination-page[aria-current='page']:not(\n        :disabled,\n        [aria-disabled='true']\n      ) {\n      forced-color-adjust: none;\n      background-color: Highlight;\n      color: HighlightText;\n      border-color: Highlight;\n      outline-color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VPopover/VPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"VPopover.js","names":[],"sources":["../../../src/components/VPopover/VPopover.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * Bridge native popover state to v-model while CSS anchors the panel. Roles, keyboard handling\n * and dismissal policy belong to the consuming widget.\n */\nimport { computed, ref, useId } from 'vue'\n\nimport { usePopover, usePopoverModel } from '../../composables/usePopover'\n\nexport type PopoverPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n\n/**\n * What the trigger has to carry for the browser to open the panel and for assistive technology\n * to know what it controls.\n */\nexport type PopoverTriggerProps = {\n  popovertarget: string\n  'aria-expanded': boolean\n  'aria-controls': string\n}\n\n/** Whether the browser dismisses the panel on its own. */\nexport type PopoverMode = 'auto' | 'manual'\n\ninterface PopoverProps {\n  /**\n   * The id of the panel, which the trigger points at. One is generated when none is\n   * given, so this is only needed to tie the panel to something outside the\n   * component.\n   */\n  id?: string\n  /**\n   * Where the panel is placed relative to its trigger. The browser flips it to the\n   * opposite side by itself when there is not enough room.\n   */\n  placement?: PopoverPlacement\n  /** How the panel closes. */\n  mode?: PopoverMode\n  /**\n   * The name of an anchor the consumer has set on its own control, written as a CSS\n   * dashed identifier such as `--tooltip-anchor`. Supplying it replaces the internal\n   * wrapper, which is the required route as soon as the trigger is a text input,\n   * where the browser's own `popovertarget` attribute is not allowed.\n   */\n  anchor?: string\n  /**\n   * Strips the panel of the design system's surface: no background, no border, no\n   * shadow and no rounded corners. It is what a panel whose content brings its own\n   * asks for, as VDatePicker does.\n   */\n  bare?: boolean\n  /** Stops the panel being narrower than whatever it is anchored to. */\n  matchTrigger?: boolean\n}\n\nconst props = withDefaults(defineProps<PopoverProps>(), {\n  id: undefined,\n  placement: 'bottom-start',\n  mode: 'auto',\n  anchor: undefined,\n  bare: false,\n  matchTrigger: false,\n})\n\n/**\n * Whether the panel is showing. Setting it opens and closes the panel; a consumer needing the\n * change to be synchronous uses the exposed `show`/ `close` instead, which VTooltip and the\n * pickers do.\n */\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /**\n   * The element that opens the panel. Bind the `triggerProps` it receives onto a\n   * button of your own: that is what wires the two together.\n   */\n  trigger?(props: { triggerProps: PopoverTriggerProps }): unknown\n  /** What the panel contains. */\n  default(): unknown\n}>()\n\n/*\n * Everything the consumer passes; the ARIA role, the aria-*, the data-*, class, style and the\n * listeners; goes on the PANEL rather than on the anchoring wrapper, because the panel is what\n * the consumer is really describing and styling. This is a deliberate departure from the design\n * system's usual wrapper pattern, which keeps class and style on the root; `useRootAttrs`\n * therefore does not apply here.\n */\ndefineOptions({ inheritAttrs: false })\n\nconst panelEl = ref<HTMLElement | null>(null)\nconst generatedId = useId()\nconst panelId = computed(() => props.id ?? generatedId)\n\n// The invariant to respect here: `shown` is fed by the panel's own events and never assigned by\n// hand, so the browser stays the source of truth; it can close the panel without asking us.\nconst { shown, syncShown, show, hide } = usePopover(panelEl)\n\nconst triggerProps = computed<PopoverTriggerProps>(() => ({\n  popovertarget: panelId.value,\n  'aria-expanded': open.value,\n  'aria-controls': panelId.value,\n}))\n\n// Set the anchor explicitly in both trigger modes; an unset custom property would inherit an\n// ancestor popover's anchor.\nconst panelStyle = computed(() => ({\n  '--popover-anchor-name': props.anchor ?? '--popover-anchor',\n}))\n\nfunction onToggle(event: Event) {\n  syncShown(event)\n  open.value = shown.value\n}\n\nusePopoverModel(open, () => shown.value, show, hide)\n\n// The imperative counterpart of `v-model:open`, for a consumer whose opening must be\n// SYNCHRONOUS: the model would insert a tick, which is exactly what VTooltip's delay and\n// the pickers' focus frame cannot afford.\ndefineExpose({\n  /** Opens the panel at once, without waiting for the model to come round. */\n  show,\n  /** Closes it at once. Safe to call on a panel that is already closed. */\n  close: hide,\n  /** The panel element itself, which is the popover. */\n  el: panelEl,\n})\n</script>\n\n<template>\n  <span class=\"v-popover\" :data-trigger=\"$slots.trigger ? '' : undefined\">\n    <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n    <div\n      :id=\"panelId\"\n      ref=\"panelEl\"\n      :popover=\"mode\"\n      class=\"v-overlay v-popover-panel v-floating\"\n      :class=\"{ 'v-panel': !bare }\"\n      :data-placement=\"placement\"\n      :data-match-trigger=\"matchTrigger ? '' : undefined\"\n      :style=\"panelStyle\"\n      v-bind=\"$attrs\"\n      @beforetoggle=\"syncShown\"\n      @toggle=\"onToggle\"\n    >\n      <slot />\n    </div>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * Without a trigger the wrapper has nothing to wrap, so `display: contents` takes it out of\n   * the layout entirely; the panel is positioned against the viewport and does not depend on\n   * it. Left as an empty inline-block it would still create a line box, and therefore add\n   * height, inside every component using this route.\n   */\n  .v-popover {\n    display: contents;\n  }\n\n  /*\n   * With a trigger the wrapper must generate a box, since that box is the ANCHOR; which is why\n   * `display: contents` stops at the rule above. It is FLEX rather than inline-block, the\n   * `.v-badge-host` and `.v-tooltip` form: both are inline-level atomic boxes, so text flows\n   * around them identically, but an inline-block opens an inline formatting context for the\n   * trigger, which then lands on a line box and adds the strut's descender to the wrapper.\n   */\n  .v-popover[data-trigger] {\n    display: inline-flex;\n    align-items: center;\n    anchor-name: --popover-anchor;\n    /*\n     * Without the confinement every panel on the page would attach itself to the last wrapper\n     * carrying this name.\n     */\n    anchor-scope: --popover-anchor;\n  }\n\n  /*\n   * Widths, heights and overflow differ from one consumer to the next, and since each component\n   * ships its own stylesheet, a declaration here would sit at equal specificity with theirs;\n   * leaving the winner to whichever order the consumer's bundler happens to produce.\n   */\n  .v-popover-panel {\n    position-anchor: var(--popover-anchor-name);\n  }\n\n  /*\n   * `:where()` keeps this at (0,1,0). A bare consumer restyles its panel through the\n   * `.v-popover-panel.v-x-panel` compound (VTooltip), at (0,2,0), which must win; a (0,2,0)\n   * rule here would tie with it across two sheets.\n   */\n  .v-popover-panel:where(:not(.v-panel)) {\n    border: none;\n    padding: 0;\n    background: none;\n    color: inherit;\n    overflow: visible;\n  }\n\n  /*\n   * It is written here rather than in each consumer because `anchor-size()` resolves against\n   * `position-anchor`, which is the declaration above; the same reason the anchoring itself\n   * lives here. A minimum beats a maximum, so a consumer's own `max-inline-size` does not clamp\n   * it: a trigger wider than the ceiling widens the panel past it, which is intended.\n   */\n  .v-popover-panel[data-match-trigger] {\n    min-inline-size: anchor-size(width);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VPopover.js","names":["_sfc_main","VPopover_vue_vue_type_script_setup_true_lang_default","VPopover_default"],"sources":["../../../src/components/VPopover/VPopover.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * Bridge native popover state to v-model while CSS anchors the panel. Roles, keyboard handling\n * and dismissal policy belong to the consuming widget.\n */\nimport { computed, ref, useId } from 'vue'\n\nimport { usePopover, usePopoverModel } from '../../composables/usePopover'\n\nexport type PopoverPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n\n/**\n * What the trigger has to carry for the browser to open the panel and for assistive technology\n * to know what it controls.\n */\nexport type PopoverTriggerProps = {\n  popovertarget: string\n  'aria-expanded': boolean\n  'aria-controls': string\n}\n\n/** Whether the browser dismisses the panel on its own. */\nexport type PopoverMode = 'auto' | 'manual'\n\ninterface PopoverProps {\n  /**\n   * The id of the panel, which the trigger points at. One is generated when none is\n   * given, so this is only needed to tie the panel to something outside the\n   * component.\n   */\n  id?: string\n  /**\n   * Where the panel is placed relative to its trigger. The browser flips it to the\n   * opposite side by itself when there is not enough room.\n   */\n  placement?: PopoverPlacement\n  /** How the panel closes. */\n  mode?: PopoverMode\n  /**\n   * The name of an anchor the consumer has set on its own control, written as a CSS\n   * dashed identifier such as `--tooltip-anchor`. Supplying it replaces the internal\n   * wrapper, which is the required route as soon as the trigger is a text input,\n   * where the browser's own `popovertarget` attribute is not allowed.\n   */\n  anchor?: string\n  /**\n   * Strips the panel of the design system's surface: no background, no border, no\n   * shadow and no rounded corners. It is what a panel whose content brings its own\n   * asks for, as VDatePicker does.\n   */\n  bare?: boolean\n  /** Stops the panel being narrower than whatever it is anchored to. */\n  matchTrigger?: boolean\n}\n\nconst props = withDefaults(defineProps<PopoverProps>(), {\n  id: undefined,\n  placement: 'bottom-start',\n  mode: 'auto',\n  anchor: undefined,\n  bare: false,\n  matchTrigger: false,\n})\n\n/**\n * Whether the panel is showing. Setting it opens and closes the panel; a consumer needing the\n * change to be synchronous uses the exposed `show`/ `close` instead, which VTooltip and the\n * pickers do.\n */\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /**\n   * The element that opens the panel. Bind the `triggerProps` it receives onto a\n   * button of your own: that is what wires the two together.\n   */\n  trigger?(props: { triggerProps: PopoverTriggerProps }): unknown\n  /** What the panel contains. */\n  default(): unknown\n}>()\n\n/*\n * Everything the consumer passes; the ARIA role, the aria-*, the data-*, class, style and the\n * listeners; goes on the PANEL rather than on the anchoring wrapper, because the panel is what\n * the consumer is really describing and styling. This is a deliberate departure from the design\n * system's usual wrapper pattern, which keeps class and style on the root; `useRootAttrs`\n * therefore does not apply here.\n */\ndefineOptions({ inheritAttrs: false })\n\nconst panelEl = ref<HTMLElement | null>(null)\nconst generatedId = useId()\nconst panelId = computed(() => props.id ?? generatedId)\n\n// The invariant to respect here: `shown` is fed by the panel's own events and never assigned by\n// hand, so the browser stays the source of truth; it can close the panel without asking us.\nconst { shown, syncShown, show, hide } = usePopover(panelEl)\n\nconst triggerProps = computed<PopoverTriggerProps>(() => ({\n  popovertarget: panelId.value,\n  'aria-expanded': open.value,\n  'aria-controls': panelId.value,\n}))\n\n// Set the anchor explicitly in both trigger modes; an unset custom property would inherit an\n// ancestor popover's anchor.\nconst panelStyle = computed(() => ({\n  '--popover-anchor-name': props.anchor ?? '--popover-anchor',\n}))\n\nfunction onToggle(event: Event) {\n  syncShown(event)\n  open.value = shown.value\n}\n\nusePopoverModel(open, () => shown.value, show, hide)\n\n// The imperative counterpart of `v-model:open`, for a consumer whose opening must be\n// SYNCHRONOUS: the model would insert a tick, which is exactly what VTooltip's delay and\n// the pickers' focus frame cannot afford.\ndefineExpose({\n  /** Opens the panel at once, without waiting for the model to come round. */\n  show,\n  /** Closes it at once. Safe to call on a panel that is already closed. */\n  close: hide,\n  /** The panel element itself, which is the popover. */\n  el: panelEl,\n})\n</script>\n\n<template>\n  <span class=\"v-popover\" :data-trigger=\"$slots.trigger ? '' : undefined\">\n    <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n    <div\n      :id=\"panelId\"\n      ref=\"panelEl\"\n      :popover=\"mode\"\n      class=\"v-overlay v-popover-panel v-floating\"\n      :class=\"{ 'v-panel': !bare }\"\n      :data-placement=\"placement\"\n      :data-match-trigger=\"matchTrigger ? '' : undefined\"\n      :style=\"panelStyle\"\n      v-bind=\"$attrs\"\n      @beforetoggle=\"syncShown\"\n      @toggle=\"onToggle\"\n    >\n      <slot />\n    </div>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * Without a trigger the wrapper has nothing to wrap, so `display: contents` takes it out of\n   * the layout entirely; the panel is positioned against the viewport and does not depend on\n   * it. Left as an empty inline-block it would still create a line box, and therefore add\n   * height, inside every component using this route.\n   */\n  .v-popover {\n    display: contents;\n  }\n\n  /*\n   * With a trigger the wrapper must generate a box, since that box is the ANCHOR; which is why\n   * `display: contents` stops at the rule above. It is FLEX rather than inline-block, the\n   * `.v-badge-host` and `.v-tooltip` form: both are inline-level atomic boxes, so text flows\n   * around them identically, but an inline-block opens an inline formatting context for the\n   * trigger, which then lands on a line box and adds the strut's descender to the wrapper.\n   */\n  .v-popover[data-trigger] {\n    display: inline-flex;\n    align-items: center;\n    anchor-name: --popover-anchor;\n    /*\n     * Without the confinement every panel on the page would attach itself to the last wrapper\n     * carrying this name.\n     */\n    anchor-scope: --popover-anchor;\n  }\n\n  /*\n   * Widths, heights and overflow differ from one consumer to the next, and since each component\n   * ships its own stylesheet, a declaration here would sit at equal specificity with theirs;\n   * leaving the winner to whichever order the consumer's bundler happens to produce.\n   */\n  .v-popover-panel {\n    position-anchor: var(--popover-anchor-name);\n  }\n\n  /*\n   * `:where()` keeps this at (0,1,0). A bare consumer restyles its panel through the\n   * `.v-popover-panel.v-x-panel` compound (VTooltip), at (0,2,0), which must win; a (0,2,0)\n   * rule here would tie with it across two sheets.\n   */\n  .v-popover-panel:where(:not(.v-panel)) {\n    border: none;\n    padding: 0;\n    background: none;\n    color: inherit;\n    overflow: visible;\n  }\n\n  /*\n   * It is written here rather than in each consumer because `anchor-size()` resolves against\n   * `position-anchor`, which is the declaration above; the same reason the anchoring itself\n   * lives here. A minimum beats a maximum, so a consumer's own `max-inline-size` does not clamp\n   * it: a trigger wider than the ceiling widens the panel past it, which is intended.\n   */\n  .v-popover-panel[data-match-trigger] {\n    min-inline-size: anchor-size(width);\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"VPopover.vue_vue_type_script_setup_true_lang.js","names":["$slots","$attrs"],"sources":["../../../src/components/VPopover/VPopover.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * Bridge native popover state to v-model while CSS anchors the panel. Roles, keyboard handling\n * and dismissal policy belong to the consuming widget.\n */\nimport { computed, ref, useId } from 'vue'\n\nimport { usePopover, usePopoverModel } from '../../composables/usePopover'\n\nexport type PopoverPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n\n/**\n * What the trigger has to carry for the browser to open the panel and for assistive technology\n * to know what it controls.\n */\nexport type PopoverTriggerProps = {\n  popovertarget: string\n  'aria-expanded': boolean\n  'aria-controls': string\n}\n\n/** Whether the browser dismisses the panel on its own. */\nexport type PopoverMode = 'auto' | 'manual'\n\ninterface PopoverProps {\n  /**\n   * The id of the panel, which the trigger points at. One is generated when none is\n   * given, so this is only needed to tie the panel to something outside the\n   * component.\n   */\n  id?: string\n  /**\n   * Where the panel is placed relative to its trigger. The browser flips it to the\n   * opposite side by itself when there is not enough room.\n   */\n  placement?: PopoverPlacement\n  /** How the panel closes. */\n  mode?: PopoverMode\n  /**\n   * The name of an anchor the consumer has set on its own control, written as a CSS\n   * dashed identifier such as `--tooltip-anchor`. Supplying it replaces the internal\n   * wrapper, which is the required route as soon as the trigger is a text input,\n   * where the browser's own `popovertarget` attribute is not allowed.\n   */\n  anchor?: string\n  /**\n   * Strips the panel of the design system's surface: no background, no border, no\n   * shadow and no rounded corners. It is what a panel whose content brings its own\n   * asks for, as VDatePicker does.\n   */\n  bare?: boolean\n  /** Stops the panel being narrower than whatever it is anchored to. */\n  matchTrigger?: boolean\n}\n\nconst props = withDefaults(defineProps<PopoverProps>(), {\n  id: undefined,\n  placement: 'bottom-start',\n  mode: 'auto',\n  anchor: undefined,\n  bare: false,\n  matchTrigger: false,\n})\n\n/**\n * Whether the panel is showing. Setting it opens and closes the panel; a consumer needing the\n * change to be synchronous uses the exposed `show`/ `close` instead, which VTooltip and the\n * pickers do.\n */\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /**\n   * The element that opens the panel. Bind the `triggerProps` it receives onto a\n   * button of your own: that is what wires the two together.\n   */\n  trigger?(props: { triggerProps: PopoverTriggerProps }): unknown\n  /** What the panel contains. */\n  default(): unknown\n}>()\n\n/*\n * Everything the consumer passes; the ARIA role, the aria-*, the data-*, class, style and the\n * listeners; goes on the PANEL rather than on the anchoring wrapper, because the panel is what\n * the consumer is really describing and styling. This is a deliberate departure from the design\n * system's usual wrapper pattern, which keeps class and style on the root; `useRootAttrs`\n * therefore does not apply here.\n */\ndefineOptions({ inheritAttrs: false })\n\nconst panelEl = ref<HTMLElement | null>(null)\nconst generatedId = useId()\nconst panelId = computed(() => props.id ?? generatedId)\n\n// The invariant to respect here: `shown` is fed by the panel's own events and never assigned by\n// hand, so the browser stays the source of truth; it can close the panel without asking us.\nconst { shown, syncShown, show, hide } = usePopover(panelEl)\n\nconst triggerProps = computed<PopoverTriggerProps>(() => ({\n  popovertarget: panelId.value,\n  'aria-expanded': open.value,\n  'aria-controls': panelId.value,\n}))\n\n// Set the anchor explicitly in both trigger modes; an unset custom property would inherit an\n// ancestor popover's anchor.\nconst panelStyle = computed(() => ({\n  '--popover-anchor-name': props.anchor ?? '--popover-anchor',\n}))\n\nfunction onToggle(event: Event) {\n  syncShown(event)\n  open.value = shown.value\n}\n\nusePopoverModel(open, () => shown.value, show, hide)\n\n// The imperative counterpart of `v-model:open`, for a consumer whose opening must be\n// SYNCHRONOUS: the model would insert a tick, which is exactly what VTooltip's delay and\n// the pickers' focus frame cannot afford.\ndefineExpose({\n  /** Opens the panel at once, without waiting for the model to come round. */\n  show,\n  /** Closes it at once. Safe to call on a panel that is already closed. */\n  close: hide,\n  /** The panel element itself, which is the popover. */\n  el: panelEl,\n})\n</script>\n\n<template>\n  <span class=\"v-popover\" :data-trigger=\"$slots.trigger ? '' : undefined\">\n    <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n    <div\n      :id=\"panelId\"\n      ref=\"panelEl\"\n      :popover=\"mode\"\n      class=\"v-overlay v-popover-panel v-floating\"\n      :class=\"{ 'v-panel': !bare }\"\n      :data-placement=\"placement\"\n      :data-match-trigger=\"matchTrigger ? '' : undefined\"\n      :style=\"panelStyle\"\n      v-bind=\"$attrs\"\n      @beforetoggle=\"syncShown\"\n      @toggle=\"onToggle\"\n    >\n      <slot />\n    </div>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * Without a trigger the wrapper has nothing to wrap, so `display: contents` takes it out of\n   * the layout entirely; the panel is positioned against the viewport and does not depend on\n   * it. Left as an empty inline-block it would still create a line box, and therefore add\n   * height, inside every component using this route.\n   */\n  .v-popover {\n    display: contents;\n  }\n\n  /*\n   * With a trigger the wrapper must generate a box, since that box is the ANCHOR; which is why\n   * `display: contents` stops at the rule above. It is FLEX rather than inline-block, the\n   * `.v-badge-host` and `.v-tooltip` form: both are inline-level atomic boxes, so text flows\n   * around them identically, but an inline-block opens an inline formatting context for the\n   * trigger, which then lands on a line box and adds the strut's descender to the wrapper.\n   */\n  .v-popover[data-trigger] {\n    display: inline-flex;\n    align-items: center;\n    anchor-name: --popover-anchor;\n    /*\n     * Without the confinement every panel on the page would attach itself to the last wrapper\n     * carrying this name.\n     */\n    anchor-scope: --popover-anchor;\n  }\n\n  /*\n   * Widths, heights and overflow differ from one consumer to the next, and since each component\n   * ships its own stylesheet, a declaration here would sit at equal specificity with theirs;\n   * leaving the winner to whichever order the consumer's bundler happens to produce.\n   */\n  .v-popover-panel {\n    position-anchor: var(--popover-anchor-name);\n  }\n\n  /*\n   * `:where()` keeps this at (0,1,0). A bare consumer restyles its panel through the\n   * `.v-popover-panel.v-x-panel` compound (VTooltip), at (0,2,0), which must win; a (0,2,0)\n   * rule here would tie with it across two sheets.\n   */\n  .v-popover-panel:where(:not(.v-panel)) {\n    border: none;\n    padding: 0;\n    background: none;\n    color: inherit;\n    overflow: visible;\n  }\n\n  /*\n   * It is written here rather than in each consumer because `anchor-size()` resolves against\n   * `position-anchor`, which is the declaration above; the same reason the anchoring itself\n   * lives here. A minimum beats a maximum, so a consumer's own `max-inline-size` does not clamp\n   * it: a trigger wider than the ceiling widens the panel past it, which is intended.\n   */\n  .v-popover-panel[data-match-trigger] {\n    min-inline-size: anchor-size(width);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoEA,IAAM,IAAQ,GAcR,IAAO,EAAoB,GAAC,MAA0B,GAqBtD,IAAU,EAAwB,IAAI,GACtC,IAAc,EAAM,GACpB,IAAU,QAAe,EAAM,MAAM,CAAW,GAIhD,EAAE,UAAO,cAAW,SAAM,YAAS,EAAW,CAAO,GAErD,IAAe,SAAqC;GACxD,eAAe,EAAQ;GACvB,iBAAiB,EAAK;GACtB,iBAAiB,EAAQ;EAC3B,EAAE,GAII,IAAa,SAAgB,EACjC,yBAAyB,EAAM,UAAU,mBAC3C,EAAE;EAEF,SAAS,EAAS,GAAc;GAE9B,AADA,EAAU,CAAK,GACf,EAAK,QAAQ,EAAM;EACrB;SAEA,EAAgB,SAAY,EAAM,OAAO,GAAM,CAAI,GAKnD,EAAa;GAEX;GAEA,OAAO;GAEP,IAAI;EACN,CAAC,mBAIC,EAiBO,QAAA;GAjBD,OAAM;GAAa,gBAAcA,EAAAA,OAAO,UAAO,KAAQ,KAAA;MAC3D,EAAqD,EAAA,QAAA,WAAA,EAA/B,cAAe,EAAA,MAAY,CAAA,GACjD,EAcM,OAdN,EAcM;GAbH,IAAI,EAAA;YACD;GAAJ,KAAI;GACH,SAAS,EAAA;GACV,OAAK,CAAC,wCAAsC,EAAA,WAAA,CACtB,EAAA,KAAI,CAAA;GACzB,kBAAgB,EAAA;GAChB,sBAAoB,EAAA,eAAY,KAAQ,KAAA;GACxC,OAAO,EAAA;KACAC,EAAAA,QAAM;GACb,gBAAY,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;GACN;OAET,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,IAAA,CAAA,CAAA,GAAA,GAAA,CAAA"}
+{"version":3,"file":"VPopover.vue_vue_type_script_setup_true_lang.js","names":["$slots","$attrs","_useModel","_openBlock","_createElementBlock","_renderSlot","_createElementVNode","_mergeProps","_unref","_hoisted_1","_hoisted_2","VPopover_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","__expose","props","__props","open","useModel","panelEl","ref","generatedId","useId","panelId","computed","usePopover","triggerProps","panelStyle","onToggle","syncShown","event","shown","usePopoverModel","show","hide","openBlock","createElementBlock","_ctx","renderSlot","createElementVNode","mergeProps","_cache","args","unref"],"sources":["../../../src/components/VPopover/VPopover.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * Bridge native popover state to v-model while CSS anchors the panel. Roles, keyboard handling\n * and dismissal policy belong to the consuming widget.\n */\nimport { computed, ref, useId } from 'vue'\n\nimport { usePopover, usePopoverModel } from '../../composables/usePopover'\n\nexport type PopoverPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n\n/**\n * What the trigger has to carry for the browser to open the panel and for assistive technology\n * to know what it controls.\n */\nexport type PopoverTriggerProps = {\n  popovertarget: string\n  'aria-expanded': boolean\n  'aria-controls': string\n}\n\n/** Whether the browser dismisses the panel on its own. */\nexport type PopoverMode = 'auto' | 'manual'\n\ninterface PopoverProps {\n  /**\n   * The id of the panel, which the trigger points at. One is generated when none is\n   * given, so this is only needed to tie the panel to something outside the\n   * component.\n   */\n  id?: string\n  /**\n   * Where the panel is placed relative to its trigger. The browser flips it to the\n   * opposite side by itself when there is not enough room.\n   */\n  placement?: PopoverPlacement\n  /** How the panel closes. */\n  mode?: PopoverMode\n  /**\n   * The name of an anchor the consumer has set on its own control, written as a CSS\n   * dashed identifier such as `--tooltip-anchor`. Supplying it replaces the internal\n   * wrapper, which is the required route as soon as the trigger is a text input,\n   * where the browser's own `popovertarget` attribute is not allowed.\n   */\n  anchor?: string\n  /**\n   * Strips the panel of the design system's surface: no background, no border, no\n   * shadow and no rounded corners. It is what a panel whose content brings its own\n   * asks for, as VDatePicker does.\n   */\n  bare?: boolean\n  /** Stops the panel being narrower than whatever it is anchored to. */\n  matchTrigger?: boolean\n}\n\nconst props = withDefaults(defineProps<PopoverProps>(), {\n  id: undefined,\n  placement: 'bottom-start',\n  mode: 'auto',\n  anchor: undefined,\n  bare: false,\n  matchTrigger: false,\n})\n\n/**\n * Whether the panel is showing. Setting it opens and closes the panel; a consumer needing the\n * change to be synchronous uses the exposed `show`/ `close` instead, which VTooltip and the\n * pickers do.\n */\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /**\n   * The element that opens the panel. Bind the `triggerProps` it receives onto a\n   * button of your own: that is what wires the two together.\n   */\n  trigger?(props: { triggerProps: PopoverTriggerProps }): unknown\n  /** What the panel contains. */\n  default(): unknown\n}>()\n\n/*\n * Everything the consumer passes; the ARIA role, the aria-*, the data-*, class, style and the\n * listeners; goes on the PANEL rather than on the anchoring wrapper, because the panel is what\n * the consumer is really describing and styling. This is a deliberate departure from the design\n * system's usual wrapper pattern, which keeps class and style on the root; `useRootAttrs`\n * therefore does not apply here.\n */\ndefineOptions({ inheritAttrs: false })\n\nconst panelEl = ref<HTMLElement | null>(null)\nconst generatedId = useId()\nconst panelId = computed(() => props.id ?? generatedId)\n\n// The invariant to respect here: `shown` is fed by the panel's own events and never assigned by\n// hand, so the browser stays the source of truth; it can close the panel without asking us.\nconst { shown, syncShown, show, hide } = usePopover(panelEl)\n\nconst triggerProps = computed<PopoverTriggerProps>(() => ({\n  popovertarget: panelId.value,\n  'aria-expanded': open.value,\n  'aria-controls': panelId.value,\n}))\n\n// Set the anchor explicitly in both trigger modes; an unset custom property would inherit an\n// ancestor popover's anchor.\nconst panelStyle = computed(() => ({\n  '--popover-anchor-name': props.anchor ?? '--popover-anchor',\n}))\n\nfunction onToggle(event: Event) {\n  syncShown(event)\n  open.value = shown.value\n}\n\nusePopoverModel(open, () => shown.value, show, hide)\n\n// The imperative counterpart of `v-model:open`, for a consumer whose opening must be\n// SYNCHRONOUS: the model would insert a tick, which is exactly what VTooltip's delay and\n// the pickers' focus frame cannot afford.\ndefineExpose({\n  /** Opens the panel at once, without waiting for the model to come round. */\n  show,\n  /** Closes it at once. Safe to call on a panel that is already closed. */\n  close: hide,\n  /** The panel element itself, which is the popover. */\n  el: panelEl,\n})\n</script>\n\n<template>\n  <span class=\"v-popover\" :data-trigger=\"$slots.trigger ? '' : undefined\">\n    <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n    <div\n      :id=\"panelId\"\n      ref=\"panelEl\"\n      :popover=\"mode\"\n      class=\"v-overlay v-popover-panel v-floating\"\n      :class=\"{ 'v-panel': !bare }\"\n      :data-placement=\"placement\"\n      :data-match-trigger=\"matchTrigger ? '' : undefined\"\n      :style=\"panelStyle\"\n      v-bind=\"$attrs\"\n      @beforetoggle=\"syncShown\"\n      @toggle=\"onToggle\"\n    >\n      <slot />\n    </div>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * Without a trigger the wrapper has nothing to wrap, so `display: contents` takes it out of\n   * the layout entirely; the panel is positioned against the viewport and does not depend on\n   * it. Left as an empty inline-block it would still create a line box, and therefore add\n   * height, inside every component using this route.\n   */\n  .v-popover {\n    display: contents;\n  }\n\n  /*\n   * With a trigger the wrapper must generate a box, since that box is the ANCHOR; which is why\n   * `display: contents` stops at the rule above. It is FLEX rather than inline-block, the\n   * `.v-badge-host` and `.v-tooltip` form: both are inline-level atomic boxes, so text flows\n   * around them identically, but an inline-block opens an inline formatting context for the\n   * trigger, which then lands on a line box and adds the strut's descender to the wrapper.\n   */\n  .v-popover[data-trigger] {\n    display: inline-flex;\n    align-items: center;\n    anchor-name: --popover-anchor;\n    /*\n     * Without the confinement every panel on the page would attach itself to the last wrapper\n     * carrying this name.\n     */\n    anchor-scope: --popover-anchor;\n  }\n\n  /*\n   * Widths, heights and overflow differ from one consumer to the next, and since each component\n   * ships its own stylesheet, a declaration here would sit at equal specificity with theirs;\n   * leaving the winner to whichever order the consumer's bundler happens to produce.\n   */\n  .v-popover-panel {\n    position-anchor: var(--popover-anchor-name);\n  }\n\n  /*\n   * `:where()` keeps this at (0,1,0). A bare consumer restyles its panel through the\n   * `.v-popover-panel.v-x-panel` compound (VTooltip), at (0,2,0), which must win; a (0,2,0)\n   * rule here would tie with it across two sheets.\n   */\n  .v-popover-panel:where(:not(.v-panel)) {\n    border: none;\n    padding: 0;\n    background: none;\n    color: inherit;\n    overflow: visible;\n  }\n\n  /*\n   * It is written here rather than in each consumer because `anchor-size()` resolves against\n   * `position-anchor`, which is the declaration above; the same reason the anchoring itself\n   * lives here. A minimum beats a maximum, so a consumer's own `max-inline-size` does not clamp\n   * it: a trigger wider than the ceiling widens the panel past it, which is intended.\n   */\n  .v-popover-panel[data-match-trigger] {\n    min-inline-size: anchor-size(width);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoEA,IAAMe,IAAQC,GAcRC,IAAOf,EAAoBc,GAAC,MAA0B,GAqBtDG,IAAUC,EAAwB,IAAI,GACtCC,IAAcC,EAAM,GACpBC,IAAUC,QAAeT,EAAM,MAAMM,CAAW,GAIhD,EAAE,UAAO,cAAW,SAAM,YAASI,EAAWN,CAAO,GAErDO,IAAeF,SAAqC;GACxD,eAAeD,EAAQ;GACvB,iBAAiBN,EAAK;GACtB,iBAAiBM,EAAQ;EAC3B,EAAE,GAIII,IAAaH,SAAgB,EACjC,yBAAyBT,EAAM,UAAU,mBAC3C,EAAE;EAEF,SAASa,EAAS,GAAc;GAE9B,AADAC,EAAUC,CAAK,GACf,EAAK,QAAQC,EAAM;EACrB;SAEAC,EAAgBf,SAAYc,EAAM,OAAOE,GAAMC,CAAI,GAKnDpB,EAAa;GAEX;GAEA,OAAOoB;GAEP,IAAIf;EACN,CAAC,cAIChB,EAAA,GAAAC,EAiBO,QAAA;GAjBD,OAAM;GAAa,gBAAcJ,EAAAA,OAAO,UAAO,KAAQ,KAAA;EAC3DK,GAAAA,CAAAA,EAAqDgC,EAAA,QAAA,WAAA,EAA/B,cAAeX,EAAA,MAAY,CAAA,GACjDpB,EAcM,OAdNC,EAcM;GAbH,IAAIgB,EAAA;GACD,SAAA;GAAJ,KAAIJ;GACH,SAASH,EAAA;GACV,OAAK,CAAC,wCAAsC,EAAA,WAAA,CACtBA,EAAA,KAAI,CAAA;GACzB,kBAAgBA,EAAA;GAChB,sBAAoBA,EAAA,eAAY,KAAQ,KAAA;GACxC,OAAOW,EAAA;EACA1B,GAAAA,EAAAA,QAAM;GACb,gBAAY,AAAAwC,EAAA,QAAE,GAAAC,MAAAlC,EAAAqB,CAAA,KAAArB,EAAAqB,CAAA,CAAA,CAAA,GAAAa,CAAA;GACN;EAETrC,CAAAA,GAAAA,CAAAA,EAAQgC,EAAA,QAAA,SAAA,CAAA,GAAA,IAAA3B,CAAA,CAAA,GAAA,GAAAD,CAAA"}

package/dist/components/VProgressCircular/VProgressCircular.js.map

@@ -1 +1 @@
-{"version":3,"file":"VProgressCircular.js","names":[],"sources":["../../../src/components/VProgressCircular/VProgressCircular.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * CSS draws the progress arc. JavaScript normalizes values shared by geometry, slots and\n * progressbar ARIA attributes.\n */\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useProgressValue } from '../../composables/useProgressValue'\nimport { useMessages } from '../../i18n/state'\nimport { px } from '../../utils/css'\n\n/** What the progress means, in colour. */\nexport type ProgressCircularTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\n\n/** How the arc ends. */\nexport type ProgressCircularShape = 'rounded' | 'square'\n\n/** What the default slot receives. */\nexport interface ProgressCircularSlotProps {\n  /** The value, brought back into the range. */\n  value: number\n  /** The bound, zero or more. */\n  max: number\n  /** How far along it is, as a percentage and unrounded. */\n  percent: number\n}\n\ninterface ProgressCircularProps {\n  /** How far along it is. Anything outside the range is brought back into it. */\n  value?: number\n  /**\n   * What is progressing, in words, for screen readers. It draws nothing on screen, and falls\n   * back to the design system dictionary; an `aria-label` or `aria-labelledby` of your own\n   * takes precedence over it.\n   */\n  label?: string\n  /** What counts as finished. The other end is always zero. */\n  max?: number\n  indeterminate?: boolean\n  /** What the progress means, expressed as a colour. */\n  tone?: ProgressCircularTone\n  /**\n   * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. The\n   * unfilled ring's shade is derived from it against the theme, so it follows the light\n   * and the dark one.\n   */\n  color?: string\n  /** The diameter, always in PIXELS: `96` and `'96'` both give 96px. */\n  size?: number | string\n  /** How thick the ring is, always in PIXELS: `8` and `'8'` both give 8px. */\n  thickness?: number | string\n  /** Whether the ends of the drawn arc are rounded or cut square. */\n  shape?: ProgressCircularShape\n  /**\n   * Writes the percentage in the middle of the ring. It is ignored while the progress is\n   * unmeasurable, there being no figure to write.\n   */\n  showValue?: boolean\n}\n\nconst props = withDefaults(defineProps<ProgressCircularProps>(), {\n  value: 0,\n  label: undefined,\n  max: 100,\n  indeterminate: false,\n  tone: 'accent',\n  color: undefined,\n  size: undefined,\n  thickness: undefined,\n  shape: 'rounded',\n  showValue: false,\n})\n\ndefineSlots<{\n  /**\n   * What to put in the middle of the ring instead of the percentage: a count of files,\n   * an icon, a shortened figure.\n   */\n  default?(props: ProgressCircularSlotProps): unknown\n}>()\n\n/* The percent sign, and the non-breaking space French puts before it where English puts\n   nothing, are a convention of the language: they belong in the dictionary rather than\n   in this file. Any other format goes through the slot above. */\nconst m = useMessages()\n\nconst {\n  max: normalizedMax,\n  clamped,\n  fraction,\n  percent,\n  roundedPercent,\n} = useProgressValue(\n  () => props.value,\n  () => props.max,\n)\n\n// @a11y\n// The canonical cascade: a consumer's `aria-labelledby`, then their `aria-label`, then the\n// `label` prop, then the dictionary. An indicator takes no name from the text inside it, so\n// without the last step it would have none at all.\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.progress.label)\n</script>\n\n<template>\n  <span\n    class=\"v-progress-circular v-tone\"\n    role=\"progressbar\"\n    :aria-label=\"ariaLabel\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :data-shape=\"shape\"\n    :data-indeterminate=\"indeterminate ? '' : undefined\"\n    :aria-valuenow=\"indeterminate ? undefined : clamped\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"normalizedMax\"\n    :style=\"{\n      '--fill-fraction': String(fraction),\n      '--custom-color': color,\n      '--progress-diameter': px(size),\n      '--progress-thickness': px(thickness),\n    }\"\n  >\n    <svg class=\"v-progress-circular-svg\" aria-hidden=\"true\">\n      <circle class=\"v-progress-circular-track\" pathLength=\"100\" />\n      <circle class=\"v-progress-circular-bar\" pathLength=\"100\" />\n    </svg>\n    <span v-if=\"!indeterminate && (showValue || $slots.default)\" class=\"v-progress-circular-label\">\n      <slot :value=\"clamped\" :max=\"normalizedMax\" :percent=\"percent\">\n        {{ m.progress.percent(roundedPercent) }}\n      </slot>\n    </span>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The two dimensions are declared here as defaults, on the very element the props write to\n   * inline; which makes an explicit size or thickness always win.\n   */\n  .v-progress-circular {\n    --progress-diameter: var(--vectis-control-size-progress-circular-diameter);\n    --progress-thickness: var(--vectis-control-size-progress-circular-thickness);\n    /* Arc and track are the tone's solid and soft colours, read from the shared table\n       (`.v-tone`, set in the template). No text colour is taken from it: the figure sits\n       in the hole of the ring, against the page, in the ordinary text colour. */\n    --progress-fill: var(--tone-bg-solid);\n    --progress-track: var(--tone-bg-soft);\n    display: inline-grid;\n    inline-size: var(--progress-diameter);\n    block-size: var(--progress-diameter);\n    vertical-align: middle;\n  }\n\n  .v-progress-circular-svg,\n  .v-progress-circular-label {\n    grid-area: 1 / 1;\n  }\n\n  .v-progress-circular-svg {\n    inline-size: 100%;\n    block-size: 100%;\n    /* Turns the ring so that it starts at twelve o'clock rather than at three. It is\n       written as its own property and not as a transform, so that it COMPOSES with the\n       spinning of the unmeasurable mode instead of being overwritten by it. */\n    rotate: -90deg;\n  }\n\n  /*\n   * In a right-to-left page the ring fills the other way round, following the reading\n   * direction. These individual properties are applied in a fixed order; move, turn, then\n   * mirror; so the mirroring is taken into account before the quarter turn above.\n   */\n  .v-progress-circular:dir(rtl) .v-progress-circular-svg {\n    scale: 1 -1;\n  }\n\n  /*\n   * Percentages are avoided deliberately: a radius given as a percentage is resolved against a\n   * normalized diagonal rather than against the width, and there is no reason to expose the\n   * component to that when the diameter is always a length to begin with.\n   */\n  .v-progress-circular-track,\n  .v-progress-circular-bar {\n    cx: calc(var(--progress-diameter) / 2);\n    cy: calc(var(--progress-diameter) / 2);\n    /* A thickness as large as the diameter would give a NEGATIVE radius, which is an\n       error in SVG: the circle would simply not be drawn. The floor degrades that case\n       to a radius of zero instead. */\n    r: max(0px, calc((var(--progress-diameter) - var(--progress-thickness)) / 2));\n    fill: none;\n    stroke-width: var(--progress-thickness);\n  }\n\n  .v-progress-circular-track {\n    stroke: var(--progress-track);\n  }\n\n  .v-progress-circular-bar {\n    stroke: var(--progress-fill);\n    stroke-linecap: round;\n    stroke-dasharray: 100;\n    stroke-dashoffset: calc(100 - 100 * var(--fill-fraction));\n    transition: stroke-dashoffset var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-progress-circular[data-shape='square'] .v-progress-circular-bar {\n    stroke-linecap: butt;\n  }\n\n  .v-progress-circular-label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    /*\n     * This centres the BOX itself in its cell, and it is not redundant with the centring above.\n     * The maximum width below stops the box from being stretched to fill the cell, and a\n     * stretch that cannot apply falls back to the START edge: the figure would end up against\n     * the side of the ring.\n     */\n    place-self: center;\n    max-inline-size: calc(var(--progress-diameter) - var(--progress-thickness) * 2);\n    color: var(--vectis-color-text);\n    font-family: var(--vectis-text-family);\n    /*\n     * Sized as a fraction of the diameter so it stays in proportion at every size; the same\n     * tolerance already granted to VSpinner's stroke; with a floor at the smallest type token,\n     * below which it would be unreadable.\n     */\n    font-size: max(var(--vectis-text-caption-size), calc(var(--progress-diameter) / 4));\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n    text-align: center;\n  }\n\n  /*\n   * Their periods are deliberately not multiples of one another; were the arc to restart on\n   * every rotation, the pair would repeat the same picture over and over and read as a\n   * mechanical beat. At 1s and 1.5s they only realign every third turn; the slowed-down pair\n   * below is 3s and 5s, so every fifth.\n   */\n  .v-progress-circular[data-indeterminate] .v-progress-circular-svg {\n    animation: v-progress-circular-spin var(--vectis-duration-1000) linear infinite;\n  }\n\n  .v-progress-circular[data-indeterminate] .v-progress-circular-bar {\n    animation: v-progress-circular-dash var(--vectis-duration-1500) var(--vectis-ease-default)\n      infinite;\n    transition: none;\n  }\n\n  /* The turn of the whole ring. VSpinner writes the same one under its own name: shared\n     in the core sheet it cost every consumer the bytes, where the two copies only meet in\n     an application that loads both components. */\n  @keyframes v-progress-circular-spin {\n    to {\n      transform: rotate(1turn);\n    }\n  }\n\n  @keyframes v-progress-circular-dash {\n    0% {\n      stroke-dasharray: 5 100;\n      stroke-dashoffset: 0;\n    }\n\n    50% {\n      stroke-dasharray: 70 100;\n      stroke-dashoffset: -20;\n    }\n\n    100% {\n      stroke-dasharray: 5 100;\n      stroke-dashoffset: -100;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-progress-circular-bar {\n      transition: none;\n    }\n\n    .v-progress-circular[data-indeterminate] .v-progress-circular-svg {\n      animation-duration: var(--vectis-duration-3000);\n    }\n\n    .v-progress-circular[data-indeterminate] .v-progress-circular-bar {\n      animation-duration: var(--vectis-duration-5000);\n    }\n  }\n\n  /* An SVG keeps its authored colours under Windows forced colours, so the ring would\n     stay pale indigo on a system palette. It is drawn in the system colours instead: the\n     remaining part in GrayText, the progress in Highlight. */\n  @media (forced-colors: active) {\n    .v-progress-circular {\n      forced-color-adjust: none;\n    }\n\n    .v-progress-circular-track {\n      stroke: GrayText;\n    }\n\n    .v-progress-circular-bar {\n      stroke: Highlight;\n    }\n\n    .v-progress-circular-label {\n      color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VProgressCircular.js","names":["_sfc_main","VProgressCircular_vue_vue_type_script_setup_true_lang_default","VProgressCircular_default"],"sources":["../../../src/components/VProgressCircular/VProgressCircular.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * CSS draws the progress arc. JavaScript normalizes values shared by geometry, slots and\n * progressbar ARIA attributes.\n */\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useProgressValue } from '../../composables/useProgressValue'\nimport { useMessages } from '../../i18n/state'\nimport { px } from '../../utils/css'\n\n/** What the progress means, in colour. */\nexport type ProgressCircularTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\n\n/** How the arc ends. */\nexport type ProgressCircularShape = 'rounded' | 'square'\n\n/** What the default slot receives. */\nexport interface ProgressCircularSlotProps {\n  /** The value, brought back into the range. */\n  value: number\n  /** The bound, zero or more. */\n  max: number\n  /** How far along it is, as a percentage and unrounded. */\n  percent: number\n}\n\ninterface ProgressCircularProps {\n  /** How far along it is. Anything outside the range is brought back into it. */\n  value?: number\n  /**\n   * What is progressing, in words, for screen readers. It draws nothing on screen, and falls\n   * back to the design system dictionary; an `aria-label` or `aria-labelledby` of your own\n   * takes precedence over it.\n   */\n  label?: string\n  /** What counts as finished. The other end is always zero. */\n  max?: number\n  indeterminate?: boolean\n  /** What the progress means, expressed as a colour. */\n  tone?: ProgressCircularTone\n  /**\n   * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. The\n   * unfilled ring's shade is derived from it against the theme, so it follows the light\n   * and the dark one.\n   */\n  color?: string\n  /** The diameter, always in PIXELS: `96` and `'96'` both give 96px. */\n  size?: number | string\n  /** How thick the ring is, always in PIXELS: `8` and `'8'` both give 8px. */\n  thickness?: number | string\n  /** Whether the ends of the drawn arc are rounded or cut square. */\n  shape?: ProgressCircularShape\n  /**\n   * Writes the percentage in the middle of the ring. It is ignored while the progress is\n   * unmeasurable, there being no figure to write.\n   */\n  showValue?: boolean\n}\n\nconst props = withDefaults(defineProps<ProgressCircularProps>(), {\n  value: 0,\n  label: undefined,\n  max: 100,\n  indeterminate: false,\n  tone: 'accent',\n  color: undefined,\n  size: undefined,\n  thickness: undefined,\n  shape: 'rounded',\n  showValue: false,\n})\n\ndefineSlots<{\n  /**\n   * What to put in the middle of the ring instead of the percentage: a count of files,\n   * an icon, a shortened figure.\n   */\n  default?(props: ProgressCircularSlotProps): unknown\n}>()\n\n/* The percent sign, and the non-breaking space French puts before it where English puts\n   nothing, are a convention of the language: they belong in the dictionary rather than\n   in this file. Any other format goes through the slot above. */\nconst m = useMessages()\n\nconst {\n  max: normalizedMax,\n  clamped,\n  fraction,\n  percent,\n  roundedPercent,\n} = useProgressValue(\n  () => props.value,\n  () => props.max,\n)\n\n// @a11y\n// The canonical cascade: a consumer's `aria-labelledby`, then their `aria-label`, then the\n// `label` prop, then the dictionary. An indicator takes no name from the text inside it, so\n// without the last step it would have none at all.\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.progress.label)\n</script>\n\n<template>\n  <span\n    class=\"v-progress-circular v-tone\"\n    role=\"progressbar\"\n    :aria-label=\"ariaLabel\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :data-shape=\"shape\"\n    :data-indeterminate=\"indeterminate ? '' : undefined\"\n    :aria-valuenow=\"indeterminate ? undefined : clamped\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"normalizedMax\"\n    :style=\"{\n      '--fill-fraction': String(fraction),\n      '--custom-color': color,\n      '--progress-diameter': px(size),\n      '--progress-thickness': px(thickness),\n    }\"\n  >\n    <svg class=\"v-progress-circular-svg\" aria-hidden=\"true\">\n      <circle class=\"v-progress-circular-track\" pathLength=\"100\" />\n      <circle class=\"v-progress-circular-bar\" pathLength=\"100\" />\n    </svg>\n    <span v-if=\"!indeterminate && (showValue || $slots.default)\" class=\"v-progress-circular-label\">\n      <slot :value=\"clamped\" :max=\"normalizedMax\" :percent=\"percent\">\n        {{ m.progress.percent(roundedPercent) }}\n      </slot>\n    </span>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The two dimensions are declared here as defaults, on the very element the props write to\n   * inline; which makes an explicit size or thickness always win.\n   */\n  .v-progress-circular {\n    --progress-diameter: var(--vectis-control-size-progress-circular-diameter);\n    --progress-thickness: var(--vectis-control-size-progress-circular-thickness);\n    /* Arc and track are the tone's solid and soft colours, read from the shared table\n       (`.v-tone`, set in the template). No text colour is taken from it: the figure sits\n       in the hole of the ring, against the page, in the ordinary text colour. */\n    --progress-fill: var(--tone-bg-solid);\n    --progress-track: var(--tone-bg-soft);\n    display: inline-grid;\n    inline-size: var(--progress-diameter);\n    block-size: var(--progress-diameter);\n    vertical-align: middle;\n  }\n\n  .v-progress-circular-svg,\n  .v-progress-circular-label {\n    grid-area: 1 / 1;\n  }\n\n  .v-progress-circular-svg {\n    inline-size: 100%;\n    block-size: 100%;\n    /* Turns the ring so that it starts at twelve o'clock rather than at three. It is\n       written as its own property and not as a transform, so that it COMPOSES with the\n       spinning of the unmeasurable mode instead of being overwritten by it. */\n    rotate: -90deg;\n  }\n\n  /*\n   * In a right-to-left page the ring fills the other way round, following the reading\n   * direction. These individual properties are applied in a fixed order; move, turn, then\n   * mirror; so the mirroring is taken into account before the quarter turn above.\n   */\n  .v-progress-circular:dir(rtl) .v-progress-circular-svg {\n    scale: 1 -1;\n  }\n\n  /*\n   * Percentages are avoided deliberately: a radius given as a percentage is resolved against a\n   * normalized diagonal rather than against the width, and there is no reason to expose the\n   * component to that when the diameter is always a length to begin with.\n   */\n  .v-progress-circular-track,\n  .v-progress-circular-bar {\n    cx: calc(var(--progress-diameter) / 2);\n    cy: calc(var(--progress-diameter) / 2);\n    /* A thickness as large as the diameter would give a NEGATIVE radius, which is an\n       error in SVG: the circle would simply not be drawn. The floor degrades that case\n       to a radius of zero instead. */\n    r: max(0px, calc((var(--progress-diameter) - var(--progress-thickness)) / 2));\n    fill: none;\n    stroke-width: var(--progress-thickness);\n  }\n\n  .v-progress-circular-track {\n    stroke: var(--progress-track);\n  }\n\n  .v-progress-circular-bar {\n    stroke: var(--progress-fill);\n    stroke-linecap: round;\n    stroke-dasharray: 100;\n    stroke-dashoffset: calc(100 - 100 * var(--fill-fraction));\n    transition: stroke-dashoffset var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-progress-circular[data-shape='square'] .v-progress-circular-bar {\n    stroke-linecap: butt;\n  }\n\n  .v-progress-circular-label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    /*\n     * This centres the BOX itself in its cell, and it is not redundant with the centring above.\n     * The maximum width below stops the box from being stretched to fill the cell, and a\n     * stretch that cannot apply falls back to the START edge: the figure would end up against\n     * the side of the ring.\n     */\n    place-self: center;\n    max-inline-size: calc(var(--progress-diameter) - var(--progress-thickness) * 2);\n    color: var(--vectis-color-text);\n    font-family: var(--vectis-text-family);\n    /*\n     * Sized as a fraction of the diameter so it stays in proportion at every size; the same\n     * tolerance already granted to VSpinner's stroke; with a floor at the smallest type token,\n     * below which it would be unreadable.\n     */\n    font-size: max(var(--vectis-text-caption-size), calc(var(--progress-diameter) / 4));\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n    text-align: center;\n  }\n\n  /*\n   * Their periods are deliberately not multiples of one another; were the arc to restart on\n   * every rotation, the pair would repeat the same picture over and over and read as a\n   * mechanical beat. At 1s and 1.5s they only realign every third turn; the slowed-down pair\n   * below is 3s and 5s, so every fifth.\n   */\n  .v-progress-circular[data-indeterminate] .v-progress-circular-svg {\n    animation: v-progress-circular-spin var(--vectis-duration-1000) linear infinite;\n  }\n\n  .v-progress-circular[data-indeterminate] .v-progress-circular-bar {\n    animation: v-progress-circular-dash var(--vectis-duration-1500) var(--vectis-ease-default)\n      infinite;\n    transition: none;\n  }\n\n  /* The turn of the whole ring. VSpinner writes the same one under its own name: shared\n     in the core sheet it cost every consumer the bytes, where the two copies only meet in\n     an application that loads both components. */\n  @keyframes v-progress-circular-spin {\n    to {\n      transform: rotate(1turn);\n    }\n  }\n\n  @keyframes v-progress-circular-dash {\n    0% {\n      stroke-dasharray: 5 100;\n      stroke-dashoffset: 0;\n    }\n\n    50% {\n      stroke-dasharray: 70 100;\n      stroke-dashoffset: -20;\n    }\n\n    100% {\n      stroke-dasharray: 5 100;\n      stroke-dashoffset: -100;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-progress-circular-bar {\n      transition: none;\n    }\n\n    .v-progress-circular[data-indeterminate] .v-progress-circular-svg {\n      animation-duration: var(--vectis-duration-3000);\n    }\n\n    .v-progress-circular[data-indeterminate] .v-progress-circular-bar {\n      animation-duration: var(--vectis-duration-5000);\n    }\n  }\n\n  /* An SVG keeps its authored colours under Windows forced colours, so the ring would\n     stay pale indigo on a system palette. It is drawn in the system colours instead: the\n     remaining part in GrayText, the progress in Highlight. */\n  @media (forced-colors: active) {\n    .v-progress-circular {\n      forced-color-adjust: none;\n    }\n\n    .v-progress-circular-track {\n      stroke: GrayText;\n    }\n\n    .v-progress-circular-bar {\n      stroke: Highlight;\n    }\n\n    .v-progress-circular-label {\n      color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"VProgressCircular.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VProgressCircular/VProgressCircular.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * CSS draws the progress arc. JavaScript normalizes values shared by geometry, slots and\n * progressbar ARIA attributes.\n */\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useProgressValue } from '../../composables/useProgressValue'\nimport { useMessages } from '../../i18n/state'\nimport { px } from '../../utils/css'\n\n/** What the progress means, in colour. */\nexport type ProgressCircularTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\n\n/** How the arc ends. */\nexport type ProgressCircularShape = 'rounded' | 'square'\n\n/** What the default slot receives. */\nexport interface ProgressCircularSlotProps {\n  /** The value, brought back into the range. */\n  value: number\n  /** The bound, zero or more. */\n  max: number\n  /** How far along it is, as a percentage and unrounded. */\n  percent: number\n}\n\ninterface ProgressCircularProps {\n  /** How far along it is. Anything outside the range is brought back into it. */\n  value?: number\n  /**\n   * What is progressing, in words, for screen readers. It draws nothing on screen, and falls\n   * back to the design system dictionary; an `aria-label` or `aria-labelledby` of your own\n   * takes precedence over it.\n   */\n  label?: string\n  /** What counts as finished. The other end is always zero. */\n  max?: number\n  indeterminate?: boolean\n  /** What the progress means, expressed as a colour. */\n  tone?: ProgressCircularTone\n  /**\n   * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. The\n   * unfilled ring's shade is derived from it against the theme, so it follows the light\n   * and the dark one.\n   */\n  color?: string\n  /** The diameter, always in PIXELS: `96` and `'96'` both give 96px. */\n  size?: number | string\n  /** How thick the ring is, always in PIXELS: `8` and `'8'` both give 8px. */\n  thickness?: number | string\n  /** Whether the ends of the drawn arc are rounded or cut square. */\n  shape?: ProgressCircularShape\n  /**\n   * Writes the percentage in the middle of the ring. It is ignored while the progress is\n   * unmeasurable, there being no figure to write.\n   */\n  showValue?: boolean\n}\n\nconst props = withDefaults(defineProps<ProgressCircularProps>(), {\n  value: 0,\n  label: undefined,\n  max: 100,\n  indeterminate: false,\n  tone: 'accent',\n  color: undefined,\n  size: undefined,\n  thickness: undefined,\n  shape: 'rounded',\n  showValue: false,\n})\n\ndefineSlots<{\n  /**\n   * What to put in the middle of the ring instead of the percentage: a count of files,\n   * an icon, a shortened figure.\n   */\n  default?(props: ProgressCircularSlotProps): unknown\n}>()\n\n/* The percent sign, and the non-breaking space French puts before it where English puts\n   nothing, are a convention of the language: they belong in the dictionary rather than\n   in this file. Any other format goes through the slot above. */\nconst m = useMessages()\n\nconst {\n  max: normalizedMax,\n  clamped,\n  fraction,\n  percent,\n  roundedPercent,\n} = useProgressValue(\n  () => props.value,\n  () => props.max,\n)\n\n// @a11y\n// The canonical cascade: a consumer's `aria-labelledby`, then their `aria-label`, then the\n// `label` prop, then the dictionary. An indicator takes no name from the text inside it, so\n// without the last step it would have none at all.\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.progress.label)\n</script>\n\n<template>\n  <span\n    class=\"v-progress-circular v-tone\"\n    role=\"progressbar\"\n    :aria-label=\"ariaLabel\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :data-shape=\"shape\"\n    :data-indeterminate=\"indeterminate ? '' : undefined\"\n    :aria-valuenow=\"indeterminate ? undefined : clamped\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"normalizedMax\"\n    :style=\"{\n      '--fill-fraction': String(fraction),\n      '--custom-color': color,\n      '--progress-diameter': px(size),\n      '--progress-thickness': px(thickness),\n    }\"\n  >\n    <svg class=\"v-progress-circular-svg\" aria-hidden=\"true\">\n      <circle class=\"v-progress-circular-track\" pathLength=\"100\" />\n      <circle class=\"v-progress-circular-bar\" pathLength=\"100\" />\n    </svg>\n    <span v-if=\"!indeterminate && (showValue || $slots.default)\" class=\"v-progress-circular-label\">\n      <slot :value=\"clamped\" :max=\"normalizedMax\" :percent=\"percent\">\n        {{ m.progress.percent(roundedPercent) }}\n      </slot>\n    </span>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The two dimensions are declared here as defaults, on the very element the props write to\n   * inline; which makes an explicit size or thickness always win.\n   */\n  .v-progress-circular {\n    --progress-diameter: var(--vectis-control-size-progress-circular-diameter);\n    --progress-thickness: var(--vectis-control-size-progress-circular-thickness);\n    /* Arc and track are the tone's solid and soft colours, read from the shared table\n       (`.v-tone`, set in the template). No text colour is taken from it: the figure sits\n       in the hole of the ring, against the page, in the ordinary text colour. */\n    --progress-fill: var(--tone-bg-solid);\n    --progress-track: var(--tone-bg-soft);\n    display: inline-grid;\n    inline-size: var(--progress-diameter);\n    block-size: var(--progress-diameter);\n    vertical-align: middle;\n  }\n\n  .v-progress-circular-svg,\n  .v-progress-circular-label {\n    grid-area: 1 / 1;\n  }\n\n  .v-progress-circular-svg {\n    inline-size: 100%;\n    block-size: 100%;\n    /* Turns the ring so that it starts at twelve o'clock rather than at three. It is\n       written as its own property and not as a transform, so that it COMPOSES with the\n       spinning of the unmeasurable mode instead of being overwritten by it. */\n    rotate: -90deg;\n  }\n\n  /*\n   * In a right-to-left page the ring fills the other way round, following the reading\n   * direction. These individual properties are applied in a fixed order; move, turn, then\n   * mirror; so the mirroring is taken into account before the quarter turn above.\n   */\n  .v-progress-circular:dir(rtl) .v-progress-circular-svg {\n    scale: 1 -1;\n  }\n\n  /*\n   * Percentages are avoided deliberately: a radius given as a percentage is resolved against a\n   * normalized diagonal rather than against the width, and there is no reason to expose the\n   * component to that when the diameter is always a length to begin with.\n   */\n  .v-progress-circular-track,\n  .v-progress-circular-bar {\n    cx: calc(var(--progress-diameter) / 2);\n    cy: calc(var(--progress-diameter) / 2);\n    /* A thickness as large as the diameter would give a NEGATIVE radius, which is an\n       error in SVG: the circle would simply not be drawn. The floor degrades that case\n       to a radius of zero instead. */\n    r: max(0px, calc((var(--progress-diameter) - var(--progress-thickness)) / 2));\n    fill: none;\n    stroke-width: var(--progress-thickness);\n  }\n\n  .v-progress-circular-track {\n    stroke: var(--progress-track);\n  }\n\n  .v-progress-circular-bar {\n    stroke: var(--progress-fill);\n    stroke-linecap: round;\n    stroke-dasharray: 100;\n    stroke-dashoffset: calc(100 - 100 * var(--fill-fraction));\n    transition: stroke-dashoffset var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-progress-circular[data-shape='square'] .v-progress-circular-bar {\n    stroke-linecap: butt;\n  }\n\n  .v-progress-circular-label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    /*\n     * This centres the BOX itself in its cell, and it is not redundant with the centring above.\n     * The maximum width below stops the box from being stretched to fill the cell, and a\n     * stretch that cannot apply falls back to the START edge: the figure would end up against\n     * the side of the ring.\n     */\n    place-self: center;\n    max-inline-size: calc(var(--progress-diameter) - var(--progress-thickness) * 2);\n    color: var(--vectis-color-text);\n    font-family: var(--vectis-text-family);\n    /*\n     * Sized as a fraction of the diameter so it stays in proportion at every size; the same\n     * tolerance already granted to VSpinner's stroke; with a floor at the smallest type token,\n     * below which it would be unreadable.\n     */\n    font-size: max(var(--vectis-text-caption-size), calc(var(--progress-diameter) / 4));\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n    text-align: center;\n  }\n\n  /*\n   * Their periods are deliberately not multiples of one another; were the arc to restart on\n   * every rotation, the pair would repeat the same picture over and over and read as a\n   * mechanical beat. At 1s and 1.5s they only realign every third turn; the slowed-down pair\n   * below is 3s and 5s, so every fifth.\n   */\n  .v-progress-circular[data-indeterminate] .v-progress-circular-svg {\n    animation: v-progress-circular-spin var(--vectis-duration-1000) linear infinite;\n  }\n\n  .v-progress-circular[data-indeterminate] .v-progress-circular-bar {\n    animation: v-progress-circular-dash var(--vectis-duration-1500) var(--vectis-ease-default)\n      infinite;\n    transition: none;\n  }\n\n  /* The turn of the whole ring. VSpinner writes the same one under its own name: shared\n     in the core sheet it cost every consumer the bytes, where the two copies only meet in\n     an application that loads both components. */\n  @keyframes v-progress-circular-spin {\n    to {\n      transform: rotate(1turn);\n    }\n  }\n\n  @keyframes v-progress-circular-dash {\n    0% {\n      stroke-dasharray: 5 100;\n      stroke-dashoffset: 0;\n    }\n\n    50% {\n      stroke-dasharray: 70 100;\n      stroke-dashoffset: -20;\n    }\n\n    100% {\n      stroke-dasharray: 5 100;\n      stroke-dashoffset: -100;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-progress-circular-bar {\n      transition: none;\n    }\n\n    .v-progress-circular[data-indeterminate] .v-progress-circular-svg {\n      animation-duration: var(--vectis-duration-3000);\n    }\n\n    .v-progress-circular[data-indeterminate] .v-progress-circular-bar {\n      animation-duration: var(--vectis-duration-5000);\n    }\n  }\n\n  /* An SVG keeps its authored colours under Windows forced colours, so the ring would\n     stay pale indigo on a system palette. It is drawn in the system colours instead: the\n     remaining part in GrayText, the progress in Highlight. */\n  @media (forced-colors: active) {\n    .v-progress-circular {\n      forced-color-adjust: none;\n    }\n\n    .v-progress-circular-track {\n      stroke: GrayText;\n    }\n\n    .v-progress-circular-bar {\n      stroke: Highlight;\n    }\n\n    .v-progress-circular-label {\n      color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2DA,IAAM,IAAQ,GAwBR,IAAI,EAAY,GAEhB,EACJ,KAAK,GACL,YACA,aACA,YACA,sBACE,QACI,EAAM,aACN,EAAM,GACd,GAMM,IAAY,QAAmB,EAAM,SAAS,EAAE,MAAM,SAAS,KAAK;yBAIxE,EA2BO,QAAA;GA1BL,OAAM;GACN,MAAK;GACJ,cAAY,EAAA,CAAA;GACZ,aAAW,EAAA;GACX,eAAa,EAAA,UAAU,KAAA,IAAiB,KAAA,IAAR;GAChC,cAAY,EAAA;GACZ,sBAAoB,EAAA,gBAAa,KAAQ,KAAA;GACzC,iBAAe,EAAA,gBAAgB,KAAA,IAAY,EAAA,CAAA;GAC5C,iBAAc;GACb,iBAAe,EAAA,CAAA;GACf,OAAK,EAAA;uBAA6B,OAAO,EAAA,CAAA,CAAQ;sBAA2B,EAAA;2BAAoC,EAAA,CAAA,CAAE,CAAC,EAAA,IAAI;4BAAiC,EAAA,CAAA,CAAE,CAAC,EAAA,SAAS;;eAOrK,EAGM,OAAA;GAHD,OAAM;GAA0B,eAAY;MAC/C,EAA6D,UAAA;GAArD,OAAM;GAA4B,YAAW;MACrD,EAA2D,UAAA;GAAnD,OAAM;GAA0B,YAAW;aAExC,EAAA,kBAAkB,EAAA,aAAaA,EAAAA,OAAO,YAAA,EAAA,GAAnD,EAIO,QAJP,GAIO,CAHL,EAEO,EAAA,QAAA,WAAA;GAFA,OAAO,EAAA,CAAA;GAAU,KAAK,EAAA,CAAA;GAAgB,SAAS,EAAA,CAAA;WAE/C,CAAA,EAAA,EADF,EAAA,CAAA,CAAC,CAAC,SAAS,QAAQ,EAAA,CAAA,CAAc,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,IAAA,CAAA"}
+{"version":3,"file":"VProgressCircular.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_unref","_normalizeStyle","_createElementVNode","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_hoisted_1","_hoisted_2","VProgressCircular_vue_vue_type_script_setup_true_lang_default","props","__props","m","useMessages","normalizedMax","useProgressValue","ariaLabel","useAriaLabel","openBlock","createElementBlock","unref","clamped","normalizeStyle","fraction","px","_cache","createElementVNode","_ctx","renderSlot","percent","createTextVNode","toDisplayString","roundedPercent","createCommentVNode"],"sources":["../../../src/components/VProgressCircular/VProgressCircular.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * CSS draws the progress arc. JavaScript normalizes values shared by geometry, slots and\n * progressbar ARIA attributes.\n */\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useProgressValue } from '../../composables/useProgressValue'\nimport { useMessages } from '../../i18n/state'\nimport { px } from '../../utils/css'\n\n/** What the progress means, in colour. */\nexport type ProgressCircularTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\n\n/** How the arc ends. */\nexport type ProgressCircularShape = 'rounded' | 'square'\n\n/** What the default slot receives. */\nexport interface ProgressCircularSlotProps {\n  /** The value, brought back into the range. */\n  value: number\n  /** The bound, zero or more. */\n  max: number\n  /** How far along it is, as a percentage and unrounded. */\n  percent: number\n}\n\ninterface ProgressCircularProps {\n  /** How far along it is. Anything outside the range is brought back into it. */\n  value?: number\n  /**\n   * What is progressing, in words, for screen readers. It draws nothing on screen, and falls\n   * back to the design system dictionary; an `aria-label` or `aria-labelledby` of your own\n   * takes precedence over it.\n   */\n  label?: string\n  /** What counts as finished. The other end is always zero. */\n  max?: number\n  indeterminate?: boolean\n  /** What the progress means, expressed as a colour. */\n  tone?: ProgressCircularTone\n  /**\n   * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. The\n   * unfilled ring's shade is derived from it against the theme, so it follows the light\n   * and the dark one.\n   */\n  color?: string\n  /** The diameter, always in PIXELS: `96` and `'96'` both give 96px. */\n  size?: number | string\n  /** How thick the ring is, always in PIXELS: `8` and `'8'` both give 8px. */\n  thickness?: number | string\n  /** Whether the ends of the drawn arc are rounded or cut square. */\n  shape?: ProgressCircularShape\n  /**\n   * Writes the percentage in the middle of the ring. It is ignored while the progress is\n   * unmeasurable, there being no figure to write.\n   */\n  showValue?: boolean\n}\n\nconst props = withDefaults(defineProps<ProgressCircularProps>(), {\n  value: 0,\n  label: undefined,\n  max: 100,\n  indeterminate: false,\n  tone: 'accent',\n  color: undefined,\n  size: undefined,\n  thickness: undefined,\n  shape: 'rounded',\n  showValue: false,\n})\n\ndefineSlots<{\n  /**\n   * What to put in the middle of the ring instead of the percentage: a count of files,\n   * an icon, a shortened figure.\n   */\n  default?(props: ProgressCircularSlotProps): unknown\n}>()\n\n/* The percent sign, and the non-breaking space French puts before it where English puts\n   nothing, are a convention of the language: they belong in the dictionary rather than\n   in this file. Any other format goes through the slot above. */\nconst m = useMessages()\n\nconst {\n  max: normalizedMax,\n  clamped,\n  fraction,\n  percent,\n  roundedPercent,\n} = useProgressValue(\n  () => props.value,\n  () => props.max,\n)\n\n// @a11y\n// The canonical cascade: a consumer's `aria-labelledby`, then their `aria-label`, then the\n// `label` prop, then the dictionary. An indicator takes no name from the text inside it, so\n// without the last step it would have none at all.\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.progress.label)\n</script>\n\n<template>\n  <span\n    class=\"v-progress-circular v-tone\"\n    role=\"progressbar\"\n    :aria-label=\"ariaLabel\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :data-shape=\"shape\"\n    :data-indeterminate=\"indeterminate ? '' : undefined\"\n    :aria-valuenow=\"indeterminate ? undefined : clamped\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"normalizedMax\"\n    :style=\"{\n      '--fill-fraction': String(fraction),\n      '--custom-color': color,\n      '--progress-diameter': px(size),\n      '--progress-thickness': px(thickness),\n    }\"\n  >\n    <svg class=\"v-progress-circular-svg\" aria-hidden=\"true\">\n      <circle class=\"v-progress-circular-track\" pathLength=\"100\" />\n      <circle class=\"v-progress-circular-bar\" pathLength=\"100\" />\n    </svg>\n    <span v-if=\"!indeterminate && (showValue || $slots.default)\" class=\"v-progress-circular-label\">\n      <slot :value=\"clamped\" :max=\"normalizedMax\" :percent=\"percent\">\n        {{ m.progress.percent(roundedPercent) }}\n      </slot>\n    </span>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The two dimensions are declared here as defaults, on the very element the props write to\n   * inline; which makes an explicit size or thickness always win.\n   */\n  .v-progress-circular {\n    --progress-diameter: var(--vectis-control-size-progress-circular-diameter);\n    --progress-thickness: var(--vectis-control-size-progress-circular-thickness);\n    /* Arc and track are the tone's solid and soft colours, read from the shared table\n       (`.v-tone`, set in the template). No text colour is taken from it: the figure sits\n       in the hole of the ring, against the page, in the ordinary text colour. */\n    --progress-fill: var(--tone-bg-solid);\n    --progress-track: var(--tone-bg-soft);\n    display: inline-grid;\n    inline-size: var(--progress-diameter);\n    block-size: var(--progress-diameter);\n    vertical-align: middle;\n  }\n\n  .v-progress-circular-svg,\n  .v-progress-circular-label {\n    grid-area: 1 / 1;\n  }\n\n  .v-progress-circular-svg {\n    inline-size: 100%;\n    block-size: 100%;\n    /* Turns the ring so that it starts at twelve o'clock rather than at three. It is\n       written as its own property and not as a transform, so that it COMPOSES with the\n       spinning of the unmeasurable mode instead of being overwritten by it. */\n    rotate: -90deg;\n  }\n\n  /*\n   * In a right-to-left page the ring fills the other way round, following the reading\n   * direction. These individual properties are applied in a fixed order; move, turn, then\n   * mirror; so the mirroring is taken into account before the quarter turn above.\n   */\n  .v-progress-circular:dir(rtl) .v-progress-circular-svg {\n    scale: 1 -1;\n  }\n\n  /*\n   * Percentages are avoided deliberately: a radius given as a percentage is resolved against a\n   * normalized diagonal rather than against the width, and there is no reason to expose the\n   * component to that when the diameter is always a length to begin with.\n   */\n  .v-progress-circular-track,\n  .v-progress-circular-bar {\n    cx: calc(var(--progress-diameter) / 2);\n    cy: calc(var(--progress-diameter) / 2);\n    /* A thickness as large as the diameter would give a NEGATIVE radius, which is an\n       error in SVG: the circle would simply not be drawn. The floor degrades that case\n       to a radius of zero instead. */\n    r: max(0px, calc((var(--progress-diameter) - var(--progress-thickness)) / 2));\n    fill: none;\n    stroke-width: var(--progress-thickness);\n  }\n\n  .v-progress-circular-track {\n    stroke: var(--progress-track);\n  }\n\n  .v-progress-circular-bar {\n    stroke: var(--progress-fill);\n    stroke-linecap: round;\n    stroke-dasharray: 100;\n    stroke-dashoffset: calc(100 - 100 * var(--fill-fraction));\n    transition: stroke-dashoffset var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-progress-circular[data-shape='square'] .v-progress-circular-bar {\n    stroke-linecap: butt;\n  }\n\n  .v-progress-circular-label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    /*\n     * This centres the BOX itself in its cell, and it is not redundant with the centring above.\n     * The maximum width below stops the box from being stretched to fill the cell, and a\n     * stretch that cannot apply falls back to the START edge: the figure would end up against\n     * the side of the ring.\n     */\n    place-self: center;\n    max-inline-size: calc(var(--progress-diameter) - var(--progress-thickness) * 2);\n    color: var(--vectis-color-text);\n    font-family: var(--vectis-text-family);\n    /*\n     * Sized as a fraction of the diameter so it stays in proportion at every size; the same\n     * tolerance already granted to VSpinner's stroke; with a floor at the smallest type token,\n     * below which it would be unreadable.\n     */\n    font-size: max(var(--vectis-text-caption-size), calc(var(--progress-diameter) / 4));\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n    text-align: center;\n  }\n\n  /*\n   * Their periods are deliberately not multiples of one another; were the arc to restart on\n   * every rotation, the pair would repeat the same picture over and over and read as a\n   * mechanical beat. At 1s and 1.5s they only realign every third turn; the slowed-down pair\n   * below is 3s and 5s, so every fifth.\n   */\n  .v-progress-circular[data-indeterminate] .v-progress-circular-svg {\n    animation: v-progress-circular-spin var(--vectis-duration-1000) linear infinite;\n  }\n\n  .v-progress-circular[data-indeterminate] .v-progress-circular-bar {\n    animation: v-progress-circular-dash var(--vectis-duration-1500) var(--vectis-ease-default)\n      infinite;\n    transition: none;\n  }\n\n  /* The turn of the whole ring. VSpinner writes the same one under its own name: shared\n     in the core sheet it cost every consumer the bytes, where the two copies only meet in\n     an application that loads both components. */\n  @keyframes v-progress-circular-spin {\n    to {\n      transform: rotate(1turn);\n    }\n  }\n\n  @keyframes v-progress-circular-dash {\n    0% {\n      stroke-dasharray: 5 100;\n      stroke-dashoffset: 0;\n    }\n\n    50% {\n      stroke-dasharray: 70 100;\n      stroke-dashoffset: -20;\n    }\n\n    100% {\n      stroke-dasharray: 5 100;\n      stroke-dashoffset: -100;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-progress-circular-bar {\n      transition: none;\n    }\n\n    .v-progress-circular[data-indeterminate] .v-progress-circular-svg {\n      animation-duration: var(--vectis-duration-3000);\n    }\n\n    .v-progress-circular[data-indeterminate] .v-progress-circular-bar {\n      animation-duration: var(--vectis-duration-5000);\n    }\n  }\n\n  /* An SVG keeps its authored colours under Windows forced colours, so the ring would\n     stay pale indigo on a system palette. It is drawn in the system colours instead: the\n     remaining part in GrayText, the progress in Highlight. */\n  @media (forced-colors: active) {\n    .v-progress-circular {\n      forced-color-adjust: none;\n    }\n\n    .v-progress-circular-track {\n      stroke: GrayText;\n    }\n\n    .v-progress-circular-bar {\n      stroke: Highlight;\n    }\n\n    .v-progress-circular-label {\n      color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2DA,IAAMa,IAAQC,GAwBRC,IAAIC,EAAY,GAEhB,EACJ,KAAKC,GACL,YACA,aACA,YACA,sBACEC,QACIL,EAAM,aACNA,EAAM,GACd,GAMMM,IAAYC,QAAmBP,EAAM,SAASE,EAAE,MAAM,SAAS,KAAK;oBAIxEd,EAAA,GAAAC,EA2BO,QAAA;GA1BL,OAAM;GACN,MAAK;GACJ,cAAYC,EAAAgB,CAAA;GACZ,aAAWL,EAAA;GACX,eAAaA,EAAA,UAAU,KAAA,IAAiB,KAAA,IAAR;GAChC,cAAYA,EAAA;GACZ,sBAAoBA,EAAA,gBAAa,KAAQ,KAAA;GACzC,iBAAeA,EAAA,gBAAgB,KAAA,IAAYX,EAAAqB,CAAA;GAC5C,iBAAc;GACb,iBAAerB,EAAAc,CAAA;GACf,OAAKb,EAAA;IAA6B,mBAAA,OAAOD,EAAAuB,CAAA,CAAQ;IAA2B,kBAAAZ,EAAA;IAAoC,uBAAAX,EAAAwB,CAAA,CAAE,CAACb,EAAA,IAAI;IAAiC,wBAAAX,EAAAwB,CAAA,CAAE,CAACb,EAAA,SAAS;;EAOrK,GAAA,CAAA,AAAAc,EAAA,OAAAvB,EAGM,OAAA;GAHD,OAAM;GAA0B,eAAY;EAC/CA,GAAAA,CAAAA,EAA6D,UAAA;GAArD,OAAM;GAA4B,YAAW;EACrDA,CAAAA,GAAAA,EAA2D,UAAA;GAAnD,OAAM;GAA0B,YAAW;EAExC,CAAA,CAAA,GAAA,EAAA,GAAA,CAAAS,EAAA,kBAAkBA,EAAA,aAAad,EAAAA,OAAO,YAAnDC,EAAA,GAAAC,EAIO,QAJPS,GAIO,CAHLL,EAEOwB,EAAA,QAAA,WAAA;GAFA,OAAO3B,EAAAqB,CAAA;GAAU,KAAKrB,EAAAc,CAAA;GAAgB,SAASd,EAAA6B,CAAA;EAAtD,SAEO,CADFzB,EAAAC,EAAAL,EAAAY,CAAA,CAAC,CAAC,SAAS,QAAQZ,EAAAgC,CAAA,CAAc,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAAC,EAAA,IAAA,EAAA,CAAA,GAAA,IAAA1B,CAAA"}

package/dist/components/VProgressLinear/VProgressLinear.js.map

@@ -1 +1 @@
-{"version":3,"file":"VProgressLinear.js","names":[],"sources":["../../../src/components/VProgressLinear/VProgressLinear.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * CSS draws the fill. JavaScript normalizes values shared by geometry, slots and progressbar\n * ARIA attributes.\n */\nimport { computed, useId } from 'vue'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useProgressValue } from '../../composables/useProgressValue'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useMessages } from '../../i18n/state'\nimport { px } from '../../utils/css'\n\n/** What the progress means, in colour. */\nexport type ProgressLinearTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\n\n/** How the track and the fill end. */\nexport type ProgressLinearShape = 'rounded' | 'square'\n\n/** Where the value sits along the bar. */\nexport type ProgressLinearValuePosition = 'start' | 'center' | 'end'\n\n/** Which way the bar fills. */\nexport type ProgressLinearOrientation = 'horizontal' | 'vertical'\n\n/** What the default slot receives. */\nexport interface ProgressLinearSlotProps {\n  /** The value, brought back into the range. */\n  value: number\n  /** The bound, zero or more. */\n  max: number\n  /** How far along it is, as a percentage and unrounded. */\n  percent: number\n}\n\ninterface ProgressLinearProps {\n  /** How far along it is. Anything outside the range is brought back into it. */\n  value?: number\n  /**\n   * What is progressing, shown above the bar and naming it for screen readers. Without it, the\n   * bar is named from the design system dictionary; an `aria-label` or `aria-labelledby` of your\n   * own takes precedence.\n   */\n  label?: string\n  /** Hides the label visually. It still names the bar for screen readers. */\n  hideLabel?: boolean\n  /** What counts as finished. The other end is always zero. */\n  max?: number\n  /** Shows progress that cannot be measured, such as a server that reports no percentage. */\n  indeterminate?: boolean\n  /** What the progress means, expressed as a colour. */\n  tone?: ProgressLinearTone\n  /**\n   * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. The\n   * track's own shade is derived from it against the theme, so it follows the light and\n   * the dark one.\n   */\n  color?: string\n  /**\n   * How thick the bar is, always in PIXELS: `12` and `'12'` both give 12px. It is 4px by\n   * default, and showing text inside a bar that thin needs an explicit thickness.\n   */\n  thickness?: number | string\n  /** Whether the ends of the bar are rounded or square. */\n  shape?: ProgressLinearShape\n  /**\n   * Writes the percentage inside the bar. It is ignored while the progress is\n   * unmeasurable, there being no figure to write.\n   */\n  showValue?: boolean\n  /**\n   * Where that text sits along the bar. On a vertical bar the start is the zero end,\n   * hence the bottom.\n   */\n  valuePosition?: ProgressLinearValuePosition\n  /** Turns the bar upright, filling from the bottom up. */\n  orientation?: ProgressLinearOrientation\n}\n\nconst props = withDefaults(defineProps<ProgressLinearProps>(), {\n  value: 0,\n  label: undefined,\n  hideLabel: false,\n  max: 100,\n  indeterminate: false,\n  tone: 'accent',\n  color: undefined,\n  thickness: undefined,\n  shape: 'rounded',\n  showValue: false,\n  valuePosition: 'center',\n  orientation: 'horizontal',\n})\n\ndefineSlots<{\n  /** What to write inside the bar instead of the percentage. */\n  default?(props: ProgressLinearSlotProps): unknown\n}>()\n\n/* The percent sign, and the non-breaking space French puts before it where English puts\n   nothing, are a convention of the language: they belong in the dictionary rather than\n   in this file. Any other format goes through the slot above. */\nconst m = useMessages()\n\nconst {\n  max: normalizedMax,\n  clamped,\n  fraction,\n  percent,\n  roundedPercent,\n} = useProgressValue(\n  () => props.value,\n  () => props.max,\n)\n\n// The root is a layout box holding the label and the bar: `class` and `style` stay on it, with\n// the tone and the custom properties the bar inherits, and every other attribute goes to the bar.\ndefineOptions({ inheritAttrs: false })\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\n// @a11y\n// A visible label names the bar by reference, unless the consumer named it themselves; without\n// one, the dictionary does. An indicator takes no name from the text inside it.\nconst labelId = useId()\nconst ariaLabel = useAriaLabel(() => (props.label ? undefined : m.value.progress.label))\nconst labelledBy = computed(() =>\n  props.label && attrs['aria-label'] == null && attrs['aria-labelledby'] == null\n    ? labelId\n    : undefined,\n)\n</script>\n\n<template>\n  <div\n    class=\"v-progress-linear-field v-tone\"\n    :class=\"rootClass\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :data-orientation=\"orientation\"\n    :style=\"[{ '--custom-color': color, '--progress-thickness': px(thickness) }, rootStyle]\"\n  >\n    <span\n      v-if=\"label\"\n      :id=\"labelId\"\n      class=\"v-progress-linear-label\"\n      :class=\"{ 'v-visually-hidden': hideLabel }\"\n      >{{ label }}</span\n    >\n    <div\n      class=\"v-progress-linear\"\n      role=\"progressbar\"\n      :aria-labelledby=\"labelledBy\"\n      :aria-label=\"ariaLabel\"\n      v-bind=\"forwardedAttrs\"\n      :data-shape=\"shape\"\n      :data-orientation=\"orientation\"\n      :data-value-position=\"valuePosition\"\n      :data-indeterminate=\"indeterminate ? '' : undefined\"\n      :aria-valuenow=\"indeterminate ? undefined : clamped\"\n      aria-valuemin=\"0\"\n      :aria-valuemax=\"normalizedMax\"\n      :style=\"{ '--fill-fraction': String(fraction) }\"\n    >\n      <span class=\"v-progress-linear-fill\" />\n      <!--\n        The same text twice, each copy cut at the fill's edge so that the two complete\n        each other exactly: the first in the ordinary text colour over the empty track,\n        the second over the filled part, coloured to contrast with it. The second is\n        hidden from screen readers, being a duplicate of text already there.\n      -->\n      <template v-if=\"!indeterminate && (showValue || $slots.default)\">\n        <span class=\"v-progress-linear-text\">\n          <slot :value=\"clamped\" :max=\"normalizedMax\" :percent=\"percent\">\n            {{ m.progress.percent(roundedPercent) }}\n          </slot>\n        </span>\n        <span class=\"v-progress-linear-text\" data-on-fill aria-hidden=\"true\">\n          <slot :value=\"clamped\" :max=\"normalizedMax\" :percent=\"percent\">\n            {{ m.progress.percent(roundedPercent) }}\n          </slot>\n        </span>\n      </template>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The root holds the label and the bar, and declares what the bar reads, so a consumer's style\n   * on it (outside our layers) overrides the thickness and the colours. The bar takes the whole\n   * length available: sizing it is the consumer's business, through the parent or a width of\n   * their own on the root.\n   */\n  .v-progress-linear-field {\n    --progress-thickness: var(--vectis-control-size-progress-linear-thickness);\n    /* Fill, track and the text over the fill are the tone's solid, soft and on-solid\n       colours, read from the shared table (`.v-tone`, set in the template). */\n    --progress-fill: var(--tone-bg-solid);\n    --progress-track: var(--tone-bg-soft);\n    --progress-text-fallback: var(--tone-text-solid);\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n  }\n\n  .v-progress-linear-label {\n    color: var(--vectis-color-text);\n    font-family: var(--vectis-text-family);\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  /* The element IS the track. */\n  .v-progress-linear {\n    position: relative;\n    display: block;\n    inline-size: 100%;\n    block-size: var(--progress-thickness);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--progress-track);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-caption-size);\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n  }\n\n  .v-progress-linear[data-shape='square'] {\n    border-radius: 0;\n  }\n\n  .v-progress-linear-fill {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    inline-size: calc(100% * var(--fill-fraction));\n    border-radius: inherit;\n    background: var(--progress-fill);\n    /*\n     * The fill is animated by changing its LENGTH, which the browser has to lay out again on\n     * every frame. Scaling it would be cheaper, but a scale is physical: it would have to be\n     * undone for the vertical orientation and again for a right-to-left page, where a logical\n     * length simply works.\n     */\n    transition: inline-size var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  /*\n   * The two copies are COMPLEMENTARY and never superimposed: this one is cut OUT of the filled\n   * part, the other cut TO it, so every letter is painted exactly once. Removing either clip\n   * raises no error and stays invisible for as long as both copies resolve to the same colour,\n   * which happens wherever the adaptive colour function is unsupported.\n   */\n  .v-progress-linear-text {\n    /*\n     * The two insets of the cut: one on the edge the fill grows FROM, one on the edge it grows\n     * towards. They are named after those roles rather than after physical sides, so the three\n     * geometry rules further down; horizontal, right-to-left, vertical; all read the same pair.\n     */\n    --progress-clip-start: calc(100% * var(--fill-fraction));\n    --progress-clip-end: -100vmax;\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding-inline: var(--vectis-space-2);\n    color: var(--vectis-color-text);\n    /*\n     * The large negative inset on the two sides that do not carry the cut is what stops text\n     * taller or wider than the bar from being cropped by its own clip.\n     */\n    clip-path: inset(-100vmax var(--progress-clip-end) -100vmax var(--progress-clip-start));\n    /* The same duration and easing as the fill's own length, or the colour boundary\n       would drift away from the fill's edge for the length of the transition. */\n    transition: clip-path var(--vectis-duration-base) var(--vectis-ease-default);\n    /* The bar itself is turned on its side in vertical mode; the text is put back\n       upright here, since a label read sideways is not the point. */\n    writing-mode: horizontal-tb;\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  .v-progress-linear[data-value-position='start'] .v-progress-linear-text {\n    justify-content: start;\n  }\n\n  .v-progress-linear[data-value-position='end'] .v-progress-linear-text {\n    justify-content: end;\n  }\n\n  .v-progress-linear-text[data-on-fill] {\n    /* The exact complement of the copy above: the cut moves to the other end of the\n       axis, so the two together cover the whole bar and overlap nowhere. */\n    --progress-clip-start: -100vmax;\n    --progress-clip-end: calc(100% * (1 - var(--fill-fraction)));\n    /*\n     * The per-tone fallback colour. The adaptive one cannot simply be written as a second\n     * declaration after it: because that declaration contains a var(), a browser with no\n     * support does not reject it at parse time; it would win the cascade and only then turn\n     * invalid, which resets the colour to inherited and leaves the fallback never applied.\n     */\n    color: var(--progress-text-fallback);\n  }\n\n  /* Where the adaptive colour function exists, the text picks black or white against\n     whatever colour the fill ended up with. */\n  @supports (color: contrast-color(red)) {\n    .v-progress-linear-text[data-on-fill] {\n      color: contrast-color(var(--progress-fill));\n    }\n  }\n\n  /*\n   * In a right-to-left page the fill grows from the right, so the two insets change physical\n   * sides; the variables themselves keep their meaning.\n   */\n  .v-progress-linear:dir(rtl) .v-progress-linear-text {\n    clip-path: inset(-100vmax var(--progress-clip-start) -100vmax var(--progress-clip-end));\n  }\n\n  /*\n   * Putting zero at the bottom is not done by reversing the direction, which would also apply\n   * to the text of the two copies: bidirectional reordering would then display \"50 %\" as \"%\n   * 50\". The fill is anchored to the far end of the axis instead.\n   */\n  /*\n   * Upright, the root carries the length, so a consumer's height on it sets the bar's: the bar\n   * takes whatever the label leaves, its own inline size being the physical height.\n   */\n  .v-progress-linear-field[data-orientation='vertical'] {\n    align-items: flex-start;\n    block-size: var(--vectis-control-size-progress-linear-length);\n  }\n\n  .v-progress-linear[data-orientation='vertical'] {\n    flex: 1 1 0;\n    writing-mode: vertical-lr;\n    inline-size: auto;\n  }\n\n  .v-progress-linear[data-orientation='vertical'] .v-progress-linear-fill {\n    inset-inline-start: auto;\n    inset-inline-end: 0;\n  }\n\n  /*\n   * A right-to-left page reverses the inline axis of a vertical writing mode too: `vertical-lr`\n   * then runs from the bottom up, so the far end anchored above is the TOP. The fill goes back\n   * to the start of the axis, which is now the bottom.\n   */\n  .v-progress-linear[data-orientation='vertical']:dir(rtl) .v-progress-linear-fill {\n    inset-inline-start: 0;\n    inset-inline-end: auto;\n  }\n\n  .v-progress-linear[data-orientation='vertical'] .v-progress-linear-text {\n    flex-direction: column-reverse;\n    padding-inline: 0;\n    padding-block: var(--vectis-space-2);\n  }\n\n  /*\n   * The second selector is what neutralizes it, and it is written that way on purpose: it is\n   * one step MORE specific than that rule, where the first selector alone would merely tie with\n   * it and win by source order; a far more fragile arrangement.\n   */\n  .v-progress-linear[data-orientation='vertical'] .v-progress-linear-text,\n  .v-progress-linear[data-orientation='vertical']:dir(rtl) .v-progress-linear-text {\n    clip-path: inset(var(--progress-clip-end) -100vmax var(--progress-clip-start) -100vmax);\n  }\n\n  /*\n   * At each extreme it is exactly flush with the edge without ever pulling away from it, which\n   * makes the loop invisible and keeps the track from ever looking empty; no second bar is\n   * needed. The easing carries the whole impression: a gradual entry, a quick crossing, a\n   * damped exit.\n   */\n  .v-progress-linear[data-indeterminate] {\n    overflow: hidden;\n  }\n\n  .v-progress-linear[data-indeterminate] .v-progress-linear-fill {\n    /* The starting position is derived from this size, and the two must stay tied: that\n       is what has the bar begin exactly off the track rather than half on it. */\n    --progress-bar: 40%;\n    /*\n     * The anchoring is put back at the start of the axis, vertical case included; where a\n     * measurable progress anchors at the far end instead.\n     */\n    inset-inline-start: 0;\n    inset-inline-end: auto;\n    inline-size: var(--progress-bar);\n    /* The transition of a measurable progress has no place here: switching to this mode\n       would otherwise be animated as the bar growing to its new size. */\n    transition: none;\n    animation: v-progress-linear-indeterminate var(--vectis-duration-1500) var(--vectis-ease-in-out)\n      infinite;\n  }\n\n  @keyframes v-progress-linear-indeterminate {\n    from {\n      inset-inline-start: calc(-1 * var(--progress-bar));\n    }\n\n    to {\n      inset-inline-start: 100%;\n    }\n  }\n\n  /*\n   * The same keyframes are simply read backwards, which changes nothing else BECAUSE the easing\n   * curve is symmetric; an asymmetric one would need a second set of keyframes. A horizontal\n   * right-to-left page needs nothing: the logical inset already follows the reading direction.\n   */\n  .v-progress-linear[data-orientation='vertical'][data-indeterminate] .v-progress-linear-fill {\n    animation-direction: reverse;\n  }\n\n  /* On a right-to-left page the vertical axis already runs upwards (see the trap above),\n     so the keyframes are read forwards again. */\n  .v-progress-linear[data-orientation='vertical'][data-indeterminate]:dir(rtl)\n    .v-progress-linear-fill {\n    animation-direction: normal;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-progress-linear-fill,\n    .v-progress-linear-text {\n      transition: none;\n    }\n\n    .v-progress-linear[data-indeterminate] .v-progress-linear-fill {\n      animation-duration: var(--vectis-duration-5000);\n    }\n  }\n\n  /* `forced-color-adjust` inherits, so both copies of the text are given their colour here too. */\n  @media (forced-colors: active) {\n    .v-progress-linear {\n      forced-color-adjust: none;\n      background: Canvas;\n      box-shadow: inset 0 0 0 var(--vectis-control-border-width) CanvasText;\n    }\n\n    .v-progress-linear-fill {\n      background: Highlight;\n    }\n\n    .v-progress-linear-text {\n      color: CanvasText;\n    }\n\n    .v-progress-linear-text[data-on-fill] {\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VProgressLinear.js","names":["_sfc_main","VProgressLinear_vue_vue_type_script_setup_true_lang_default","VProgressLinear_default"],"sources":["../../../src/components/VProgressLinear/VProgressLinear.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * CSS draws the fill. JavaScript normalizes values shared by geometry, slots and progressbar\n * ARIA attributes.\n */\nimport { computed, useId } from 'vue'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useProgressValue } from '../../composables/useProgressValue'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useMessages } from '../../i18n/state'\nimport { px } from '../../utils/css'\n\n/** What the progress means, in colour. */\nexport type ProgressLinearTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\n\n/** How the track and the fill end. */\nexport type ProgressLinearShape = 'rounded' | 'square'\n\n/** Where the value sits along the bar. */\nexport type ProgressLinearValuePosition = 'start' | 'center' | 'end'\n\n/** Which way the bar fills. */\nexport type ProgressLinearOrientation = 'horizontal' | 'vertical'\n\n/** What the default slot receives. */\nexport interface ProgressLinearSlotProps {\n  /** The value, brought back into the range. */\n  value: number\n  /** The bound, zero or more. */\n  max: number\n  /** How far along it is, as a percentage and unrounded. */\n  percent: number\n}\n\ninterface ProgressLinearProps {\n  /** How far along it is. Anything outside the range is brought back into it. */\n  value?: number\n  /**\n   * What is progressing, shown above the bar and naming it for screen readers. Without it, the\n   * bar is named from the design system dictionary; an `aria-label` or `aria-labelledby` of your\n   * own takes precedence.\n   */\n  label?: string\n  /** Hides the label visually. It still names the bar for screen readers. */\n  hideLabel?: boolean\n  /** What counts as finished. The other end is always zero. */\n  max?: number\n  /** Shows progress that cannot be measured, such as a server that reports no percentage. */\n  indeterminate?: boolean\n  /** What the progress means, expressed as a colour. */\n  tone?: ProgressLinearTone\n  /**\n   * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. The\n   * track's own shade is derived from it against the theme, so it follows the light and\n   * the dark one.\n   */\n  color?: string\n  /**\n   * How thick the bar is, always in PIXELS: `12` and `'12'` both give 12px. It is 4px by\n   * default, and showing text inside a bar that thin needs an explicit thickness.\n   */\n  thickness?: number | string\n  /** Whether the ends of the bar are rounded or square. */\n  shape?: ProgressLinearShape\n  /**\n   * Writes the percentage inside the bar. It is ignored while the progress is\n   * unmeasurable, there being no figure to write.\n   */\n  showValue?: boolean\n  /**\n   * Where that text sits along the bar. On a vertical bar the start is the zero end,\n   * hence the bottom.\n   */\n  valuePosition?: ProgressLinearValuePosition\n  /** Turns the bar upright, filling from the bottom up. */\n  orientation?: ProgressLinearOrientation\n}\n\nconst props = withDefaults(defineProps<ProgressLinearProps>(), {\n  value: 0,\n  label: undefined,\n  hideLabel: false,\n  max: 100,\n  indeterminate: false,\n  tone: 'accent',\n  color: undefined,\n  thickness: undefined,\n  shape: 'rounded',\n  showValue: false,\n  valuePosition: 'center',\n  orientation: 'horizontal',\n})\n\ndefineSlots<{\n  /** What to write inside the bar instead of the percentage. */\n  default?(props: ProgressLinearSlotProps): unknown\n}>()\n\n/* The percent sign, and the non-breaking space French puts before it where English puts\n   nothing, are a convention of the language: they belong in the dictionary rather than\n   in this file. Any other format goes through the slot above. */\nconst m = useMessages()\n\nconst {\n  max: normalizedMax,\n  clamped,\n  fraction,\n  percent,\n  roundedPercent,\n} = useProgressValue(\n  () => props.value,\n  () => props.max,\n)\n\n// The root is a layout box holding the label and the bar: `class` and `style` stay on it, with\n// the tone and the custom properties the bar inherits, and every other attribute goes to the bar.\ndefineOptions({ inheritAttrs: false })\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\n// @a11y\n// A visible label names the bar by reference, unless the consumer named it themselves; without\n// one, the dictionary does. An indicator takes no name from the text inside it.\nconst labelId = useId()\nconst ariaLabel = useAriaLabel(() => (props.label ? undefined : m.value.progress.label))\nconst labelledBy = computed(() =>\n  props.label && attrs['aria-label'] == null && attrs['aria-labelledby'] == null\n    ? labelId\n    : undefined,\n)\n</script>\n\n<template>\n  <div\n    class=\"v-progress-linear-field v-tone\"\n    :class=\"rootClass\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :data-orientation=\"orientation\"\n    :style=\"[{ '--custom-color': color, '--progress-thickness': px(thickness) }, rootStyle]\"\n  >\n    <span\n      v-if=\"label\"\n      :id=\"labelId\"\n      class=\"v-progress-linear-label\"\n      :class=\"{ 'v-visually-hidden': hideLabel }\"\n      >{{ label }}</span\n    >\n    <div\n      class=\"v-progress-linear\"\n      role=\"progressbar\"\n      :aria-labelledby=\"labelledBy\"\n      :aria-label=\"ariaLabel\"\n      v-bind=\"forwardedAttrs\"\n      :data-shape=\"shape\"\n      :data-orientation=\"orientation\"\n      :data-value-position=\"valuePosition\"\n      :data-indeterminate=\"indeterminate ? '' : undefined\"\n      :aria-valuenow=\"indeterminate ? undefined : clamped\"\n      aria-valuemin=\"0\"\n      :aria-valuemax=\"normalizedMax\"\n      :style=\"{ '--fill-fraction': String(fraction) }\"\n    >\n      <span class=\"v-progress-linear-fill\" />\n      <!--\n        The same text twice, each copy cut at the fill's edge so that the two complete\n        each other exactly: the first in the ordinary text colour over the empty track,\n        the second over the filled part, coloured to contrast with it. The second is\n        hidden from screen readers, being a duplicate of text already there.\n      -->\n      <template v-if=\"!indeterminate && (showValue || $slots.default)\">\n        <span class=\"v-progress-linear-text\">\n          <slot :value=\"clamped\" :max=\"normalizedMax\" :percent=\"percent\">\n            {{ m.progress.percent(roundedPercent) }}\n          </slot>\n        </span>\n        <span class=\"v-progress-linear-text\" data-on-fill aria-hidden=\"true\">\n          <slot :value=\"clamped\" :max=\"normalizedMax\" :percent=\"percent\">\n            {{ m.progress.percent(roundedPercent) }}\n          </slot>\n        </span>\n      </template>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The root holds the label and the bar, and declares what the bar reads, so a consumer's style\n   * on it (outside our layers) overrides the thickness and the colours. The bar takes the whole\n   * length available: sizing it is the consumer's business, through the parent or a width of\n   * their own on the root.\n   */\n  .v-progress-linear-field {\n    --progress-thickness: var(--vectis-control-size-progress-linear-thickness);\n    /* Fill, track and the text over the fill are the tone's solid, soft and on-solid\n       colours, read from the shared table (`.v-tone`, set in the template). */\n    --progress-fill: var(--tone-bg-solid);\n    --progress-track: var(--tone-bg-soft);\n    --progress-text-fallback: var(--tone-text-solid);\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n  }\n\n  .v-progress-linear-label {\n    color: var(--vectis-color-text);\n    font-family: var(--vectis-text-family);\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  /* The element IS the track. */\n  .v-progress-linear {\n    position: relative;\n    display: block;\n    inline-size: 100%;\n    block-size: var(--progress-thickness);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--progress-track);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-caption-size);\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n  }\n\n  .v-progress-linear[data-shape='square'] {\n    border-radius: 0;\n  }\n\n  .v-progress-linear-fill {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    inline-size: calc(100% * var(--fill-fraction));\n    border-radius: inherit;\n    background: var(--progress-fill);\n    /*\n     * The fill is animated by changing its LENGTH, which the browser has to lay out again on\n     * every frame. Scaling it would be cheaper, but a scale is physical: it would have to be\n     * undone for the vertical orientation and again for a right-to-left page, where a logical\n     * length simply works.\n     */\n    transition: inline-size var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  /*\n   * The two copies are COMPLEMENTARY and never superimposed: this one is cut OUT of the filled\n   * part, the other cut TO it, so every letter is painted exactly once. Removing either clip\n   * raises no error and stays invisible for as long as both copies resolve to the same colour,\n   * which happens wherever the adaptive colour function is unsupported.\n   */\n  .v-progress-linear-text {\n    /*\n     * The two insets of the cut: one on the edge the fill grows FROM, one on the edge it grows\n     * towards. They are named after those roles rather than after physical sides, so the three\n     * geometry rules further down; horizontal, right-to-left, vertical; all read the same pair.\n     */\n    --progress-clip-start: calc(100% * var(--fill-fraction));\n    --progress-clip-end: -100vmax;\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding-inline: var(--vectis-space-2);\n    color: var(--vectis-color-text);\n    /*\n     * The large negative inset on the two sides that do not carry the cut is what stops text\n     * taller or wider than the bar from being cropped by its own clip.\n     */\n    clip-path: inset(-100vmax var(--progress-clip-end) -100vmax var(--progress-clip-start));\n    /* The same duration and easing as the fill's own length, or the colour boundary\n       would drift away from the fill's edge for the length of the transition. */\n    transition: clip-path var(--vectis-duration-base) var(--vectis-ease-default);\n    /* The bar itself is turned on its side in vertical mode; the text is put back\n       upright here, since a label read sideways is not the point. */\n    writing-mode: horizontal-tb;\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  .v-progress-linear[data-value-position='start'] .v-progress-linear-text {\n    justify-content: start;\n  }\n\n  .v-progress-linear[data-value-position='end'] .v-progress-linear-text {\n    justify-content: end;\n  }\n\n  .v-progress-linear-text[data-on-fill] {\n    /* The exact complement of the copy above: the cut moves to the other end of the\n       axis, so the two together cover the whole bar and overlap nowhere. */\n    --progress-clip-start: -100vmax;\n    --progress-clip-end: calc(100% * (1 - var(--fill-fraction)));\n    /*\n     * The per-tone fallback colour. The adaptive one cannot simply be written as a second\n     * declaration after it: because that declaration contains a var(), a browser with no\n     * support does not reject it at parse time; it would win the cascade and only then turn\n     * invalid, which resets the colour to inherited and leaves the fallback never applied.\n     */\n    color: var(--progress-text-fallback);\n  }\n\n  /* Where the adaptive colour function exists, the text picks black or white against\n     whatever colour the fill ended up with. */\n  @supports (color: contrast-color(red)) {\n    .v-progress-linear-text[data-on-fill] {\n      color: contrast-color(var(--progress-fill));\n    }\n  }\n\n  /*\n   * In a right-to-left page the fill grows from the right, so the two insets change physical\n   * sides; the variables themselves keep their meaning.\n   */\n  .v-progress-linear:dir(rtl) .v-progress-linear-text {\n    clip-path: inset(-100vmax var(--progress-clip-start) -100vmax var(--progress-clip-end));\n  }\n\n  /*\n   * Putting zero at the bottom is not done by reversing the direction, which would also apply\n   * to the text of the two copies: bidirectional reordering would then display \"50 %\" as \"%\n   * 50\". The fill is anchored to the far end of the axis instead.\n   */\n  /*\n   * Upright, the root carries the length, so a consumer's height on it sets the bar's: the bar\n   * takes whatever the label leaves, its own inline size being the physical height.\n   */\n  .v-progress-linear-field[data-orientation='vertical'] {\n    align-items: flex-start;\n    block-size: var(--vectis-control-size-progress-linear-length);\n  }\n\n  .v-progress-linear[data-orientation='vertical'] {\n    flex: 1 1 0;\n    writing-mode: vertical-lr;\n    inline-size: auto;\n  }\n\n  .v-progress-linear[data-orientation='vertical'] .v-progress-linear-fill {\n    inset-inline-start: auto;\n    inset-inline-end: 0;\n  }\n\n  /*\n   * A right-to-left page reverses the inline axis of a vertical writing mode too: `vertical-lr`\n   * then runs from the bottom up, so the far end anchored above is the TOP. The fill goes back\n   * to the start of the axis, which is now the bottom.\n   */\n  .v-progress-linear[data-orientation='vertical']:dir(rtl) .v-progress-linear-fill {\n    inset-inline-start: 0;\n    inset-inline-end: auto;\n  }\n\n  .v-progress-linear[data-orientation='vertical'] .v-progress-linear-text {\n    flex-direction: column-reverse;\n    padding-inline: 0;\n    padding-block: var(--vectis-space-2);\n  }\n\n  /*\n   * The second selector is what neutralizes it, and it is written that way on purpose: it is\n   * one step MORE specific than that rule, where the first selector alone would merely tie with\n   * it and win by source order; a far more fragile arrangement.\n   */\n  .v-progress-linear[data-orientation='vertical'] .v-progress-linear-text,\n  .v-progress-linear[data-orientation='vertical']:dir(rtl) .v-progress-linear-text {\n    clip-path: inset(var(--progress-clip-end) -100vmax var(--progress-clip-start) -100vmax);\n  }\n\n  /*\n   * At each extreme it is exactly flush with the edge without ever pulling away from it, which\n   * makes the loop invisible and keeps the track from ever looking empty; no second bar is\n   * needed. The easing carries the whole impression: a gradual entry, a quick crossing, a\n   * damped exit.\n   */\n  .v-progress-linear[data-indeterminate] {\n    overflow: hidden;\n  }\n\n  .v-progress-linear[data-indeterminate] .v-progress-linear-fill {\n    /* The starting position is derived from this size, and the two must stay tied: that\n       is what has the bar begin exactly off the track rather than half on it. */\n    --progress-bar: 40%;\n    /*\n     * The anchoring is put back at the start of the axis, vertical case included; where a\n     * measurable progress anchors at the far end instead.\n     */\n    inset-inline-start: 0;\n    inset-inline-end: auto;\n    inline-size: var(--progress-bar);\n    /* The transition of a measurable progress has no place here: switching to this mode\n       would otherwise be animated as the bar growing to its new size. */\n    transition: none;\n    animation: v-progress-linear-indeterminate var(--vectis-duration-1500) var(--vectis-ease-in-out)\n      infinite;\n  }\n\n  @keyframes v-progress-linear-indeterminate {\n    from {\n      inset-inline-start: calc(-1 * var(--progress-bar));\n    }\n\n    to {\n      inset-inline-start: 100%;\n    }\n  }\n\n  /*\n   * The same keyframes are simply read backwards, which changes nothing else BECAUSE the easing\n   * curve is symmetric; an asymmetric one would need a second set of keyframes. A horizontal\n   * right-to-left page needs nothing: the logical inset already follows the reading direction.\n   */\n  .v-progress-linear[data-orientation='vertical'][data-indeterminate] .v-progress-linear-fill {\n    animation-direction: reverse;\n  }\n\n  /* On a right-to-left page the vertical axis already runs upwards (see the trap above),\n     so the keyframes are read forwards again. */\n  .v-progress-linear[data-orientation='vertical'][data-indeterminate]:dir(rtl)\n    .v-progress-linear-fill {\n    animation-direction: normal;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-progress-linear-fill,\n    .v-progress-linear-text {\n      transition: none;\n    }\n\n    .v-progress-linear[data-indeterminate] .v-progress-linear-fill {\n      animation-duration: var(--vectis-duration-5000);\n    }\n  }\n\n  /* `forced-color-adjust` inherits, so both copies of the text are given their colour here too. */\n  @media (forced-colors: active) {\n    .v-progress-linear {\n      forced-color-adjust: none;\n      background: Canvas;\n      box-shadow: inset 0 0 0 var(--vectis-control-border-width) CanvasText;\n    }\n\n    .v-progress-linear-fill {\n      background: Highlight;\n    }\n\n    .v-progress-linear-text {\n      color: CanvasText;\n    }\n\n    .v-progress-linear-text[data-on-fill] {\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}