vectis-ui 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"VButton.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VButton/VButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y — the component's ONLY behavioural JS, and it exists entirely for\n// accessibility: an <a> has no native `disabled`, so the inert-link bridge has to\n// reproduce it by hand.\n/**\n * The button that triggers an action, and the reference from which the tone and\n * variant tables of every other coloured component are taken.\n *\n * It renders a native <button>, or an <a> as soon as it is given an `href`, so\n * focus, keyboard activation and disabling all come from the browser. Its one piece\n * of behavioural code is the inert link: a link has no `disabled` attribute of its\n * own, so a disabled or loading <a> has its address removed — it can then be\n * neither focused nor followed — receives `aria-disabled` for assistive technology,\n * and has the click handlers it was given filtered out. Together these reproduce\n * the complete inertness that a <button disabled> gets for free.\n */\nimport { computed, useAttrs } from 'vue'\nimport type { ButtonHTMLAttributes } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\nimport VSpinner from '../VSpinner/VSpinner.vue'\n\ninterface ButtonProps {\n  /**\n   * How much visual weight the button carries: `solid` is filled with the tone,\n   * `soft` uses a tinted background, `outline` keeps only a border, and `ghost`\n   * shows nothing until it is hovered.\n   */\n  variant?: 'solid' | 'outline' | 'ghost' | 'soft'\n  /**\n   * What the action means: `accent` for the ordinary one, `neutral` for a secondary\n   * one, `danger` for one that destroys something. On a button a tone is an\n   * intention, which is why states such as success or warning are not offered here.\n   */\n  tone?: 'accent' | 'neutral' | 'danger'\n  /**\n   * Raises the button off the page: a shadow that grows on hover and settles back\n   * when pressed, whatever the variant. On `ghost` and `outline`, which have no\n   * background of their own, it also paints the raised surface — in the dark theme\n   * a shadow lying straight on the page background has nothing casting it.\n   */\n  elevated?: boolean\n  /** The height of the button, taken from the size scale shared by every control. */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  /** Takes 4px off the height, leaving the padding, the text and the icons as they are. */\n  compact?: boolean\n  /**\n   * Turns the button into an `<a>` pointing at this address. A disabled or loading\n   * link becomes inert: the address is dropped, so it can be neither focused nor\n   * followed.\n   */\n  href?: string\n  /** The native type of the button. It is ignored as soon as `href` makes it a link. */\n  type?: ButtonHTMLAttributes['type']\n  /**\n   * Makes the button unusable: it stops responding, leaves the tab order and greys\n   * out through the colour tokens.\n   */\n  disabled?: boolean\n  /**\n   * Shows a spinner, disables the button and announces it as busy. The spinner takes\n   * the place of the start slot (`iconStart` / `#start`), so an icon and a spinner\n   * are never displayed side by side.\n   */\n  loading?: boolean\n  /** An icon before the label. The `#start` slot replaces it when both are given. */\n  iconStart?: IconSource\n  /** An icon after the label. The `#end` slot replaces it when both are given. */\n  iconEnd?: IconSource\n  /**\n   * Renders `iconStart` and `iconEnd` in their filled form (the font's `FILL` axis).\n   * It has no effect on the `#start`/`#end` slots, whose icons the consumer builds.\n   */\n  iconFilled?: boolean\n}\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n  variant: 'solid',\n  tone: 'accent',\n  elevated: false,\n  size: 'md',\n  compact: false,\n  href: undefined,\n  type: 'button',\n  disabled: false,\n  loading: false,\n  iconStart: undefined,\n  iconEnd: undefined,\n  iconFilled: false,\n})\n\ndefineSlots<{\n  /** The label of the button. */\n  default(): unknown\n  /**\n   * Content placed before the label, usually an icon. Mark it `aria-hidden` when it\n   * only repeats what the label already says.\n   */\n  start?(): unknown\n  /** Content placed after the label. */\n  end?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst attrs = useAttrs()\nconst isLink = computed(() => props.href !== undefined)\nconst isInert = computed(() => props.disabled || props.loading)\nconst isInertLink = computed(() => isLink.value && isInert.value)\nconst passedAttrs = computed(() => {\n  if (!isInertLink.value) return attrs\n  const rest = { ...(attrs as Record<string, unknown>) }\n  delete rest.onClick\n  return rest\n})\n</script>\n\n<template>\n  <component\n    :is=\"isLink ? 'a' : 'button'\"\n    v-bind=\"passedAttrs\"\n    class=\"v-button v-control v-tone\"\n    :href=\"isLink && !isInert ? href : undefined\"\n    :type=\"isLink ? undefined : type\"\n    :disabled=\"isLink ? undefined : disabled || loading\"\n    :aria-disabled=\"isInertLink ? 'true' : undefined\"\n    :data-variant=\"variant\"\n    :data-tone=\"tone\"\n    :data-elevated=\"elevated ? '' : undefined\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-loading=\"loading ? '' : undefined\"\n    :aria-busy=\"loading || undefined\"\n  >\n    <!-- The button already carries aria-busy, so the spinner is hidden from\n         assistive technology: its own role=\"status\" would announce the same state a\n         second time -->\n    <span v-if=\"loading\" class=\"v-button-spinner\" aria-hidden=\"true\">\n      <VSpinner />\n    </span>\n    <slot v-else name=\"start\">\n      <VIcon v-if=\"iconStart\" v-bind=\"iconProps(iconStart)\" :filled=\"iconFilled\" />\n    </slot>\n    <slot />\n    <slot name=\"end\">\n      <VIcon v-if=\"iconEnd\" v-bind=\"iconProps(iconEnd)\" :filled=\"iconFilled\" />\n    </slot>\n  </component>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--control-gap);\n    height: var(--control-height);\n    padding-inline: var(--control-padding-inline);\n    border: 1px solid transparent;\n    border-radius: var(--vectis-radius-interactive);\n    font-family: var(--vectis-text-family);\n    font-size: var(--control-font-size);\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n    text-decoration: none;\n    cursor: pointer;\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-button:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  /* The tone table itself lives in styles/tones.css, on the `v-tone` class in the\n     vectis.tokens layer, and is shared with VChip and VToast. VButton overrides not\n     a single one of its values: it is the reference those values were written for. */\n\n  .v-button[data-variant='solid'] {\n    background: var(--tone-bg-solid);\n    color: var(--tone-text-solid);\n  }\n\n  .v-button[data-variant='solid']:hover:not(:disabled, [aria-disabled='true']) {\n    background: var(--tone-bg-solid-hover);\n  }\n\n  .v-button[data-variant='solid']:active:not(:disabled, [aria-disabled='true']) {\n    background: var(--tone-bg-solid-active);\n  }\n\n  .v-button[data-variant='outline'] {\n    background: transparent;\n    color: var(--tone-text-tinted);\n    border-color: var(--tone-border-soft);\n  }\n\n  .v-button[data-variant='ghost'] {\n    background: transparent;\n    color: var(--tone-text-tinted);\n  }\n\n  /* The `:not([data-elevated])` is what makes these rules DISJOINT from the\n     elevation rules below, rather than merely less specific than them. Nothing then\n     arbitrates the background of a raised ghost by a one-step specificity margin,\n     so a declaration added to either set later cannot silently leak into the other\n     case. */\n  .v-button[data-variant='outline']:not([data-elevated]):hover:not(\n      :disabled,\n      [aria-disabled='true']\n    ),\n  .v-button[data-variant='ghost']:not([data-elevated]):hover:not(\n      :disabled,\n      [aria-disabled='true']\n    ) {\n    background: var(--tone-bg-soft);\n  }\n\n  .v-button[data-variant='outline']:not([data-elevated]):active:not(\n      :disabled,\n      [aria-disabled='true']\n    ),\n  .v-button[data-variant='ghost']:not([data-elevated]):active:not(\n      :disabled,\n      [aria-disabled='true']\n    ) {\n    background: color-mix(in oklab, var(--tone-bg-soft), var(--tone-text-tinted) 8%);\n  }\n\n  .v-button[data-variant='soft'] {\n    background: var(--tone-bg-soft);\n    color: var(--tone-text-tinted);\n  }\n\n  .v-button[data-variant='soft']:hover:not(:disabled, [aria-disabled='true']) {\n    background: color-mix(in oklab, var(--tone-bg-soft), var(--tone-text-tinted) 8%);\n  }\n\n  .v-button[data-variant='soft']:active:not(:disabled, [aria-disabled='true']) {\n    background: color-mix(in oklab, var(--tone-bg-soft), var(--tone-text-tinted) 14%);\n  }\n\n  /* Elevation is ORTHOGONAL to the variant: the shadow scale applies to all four of\n     them, while the raised surface is only painted on the two that have no\n     background of their own. The `:is()` here is not decoration — it is what gives\n     these rules a specificity of (0,3,0), beating the (0,2,0) of the ghost and\n     outline bases without depending on the order the rules end up in. */\n  .v-button[data-elevated] {\n    box-shadow: var(--vectis-shadow-sm);\n  }\n\n  .v-button[data-elevated]:is([data-variant='ghost'], [data-variant='outline']) {\n    background: var(--vectis-color-surface-raised);\n  }\n\n  .v-button[data-elevated]:hover:not(:disabled, [aria-disabled='true']) {\n    box-shadow: var(--vectis-shadow-md);\n  }\n\n  .v-button[data-elevated]:is([data-variant='ghost'], [data-variant='outline']):hover:not(\n      :disabled,\n      [aria-disabled='true']\n    ) {\n    background: color-mix(in oklab, var(--vectis-color-surface-raised), var(--tone-text-tinted) 8%);\n  }\n\n  .v-button[data-elevated]:active:not(:disabled, [aria-disabled='true']) {\n    box-shadow: var(--vectis-shadow-sm);\n  }\n\n  .v-button[data-elevated]:is([data-variant='ghost'], [data-variant='outline']):active:not(\n      :disabled,\n      [aria-disabled='true']\n    ) {\n    background: color-mix(\n      in oklab,\n      var(--vectis-color-surface-raised),\n      var(--tone-text-tinted) 12%\n    );\n  }\n\n  .v-button:is(:disabled, [aria-disabled='true']) {\n    cursor: not-allowed;\n  }\n\n  .v-button[data-loading] {\n    opacity: 0.5;\n  }\n\n  /* A disabled button that is not loading greys out through the colour tokens and\n     never through opacity. These three rules are (0,4,0), so they already beat the\n     (0,3,0) of the raised background whatever the order they are read in. */\n  .v-button:is(:disabled, [aria-disabled='true']):not([data-loading]):is(\n      [data-variant='solid'],\n      [data-variant='soft']\n    ) {\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-button:is(:disabled, [aria-disabled='true']):not([data-loading])[data-variant='outline'] {\n    background: transparent;\n    color: var(--vectis-color-text-subtle);\n    border-color: var(--vectis-color-border);\n  }\n\n  .v-button:is(:disabled, [aria-disabled='true']):not([data-loading])[data-variant='ghost'] {\n    background: transparent;\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* The shadow needs a rule of its OWN. No variant declares a shadow, so none of the\n     three rules above cancels one, and a disabled raised ghost would otherwise go on\n     casting its shadow-sm. */\n  .v-button:is(:disabled, [aria-disabled='true']):not([data-loading])[data-elevated] {\n    box-shadow: none;\n  }\n\n  .v-button-spinner {\n    /* A box exactly the size of an icon, since the spinner takes the place of\n       iconStart: the button's width does not jump when it starts loading. The\n       font-size is set to that same size so that VSpinner's own box, which measures\n       1em, coincides with this one — VSpinner then draws its ring inside it at the\n       proportion Material Symbols gives `progress_activity`, which is what makes the\n       spinner and the icon it replaces read at the same size. */\n    width: var(--vectis-icon-size);\n    height: var(--vectis-icon-size);\n    font-size: var(--vectis-icon-size);\n    flex: none;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-button {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8EA,IAAM,IAAQ,GA6BR,IAAQ,EAAS,GACjB,IAAS,QAAe,EAAM,SAAS,KAAA,CAAS,GAChD,IAAU,QAAe,EAAM,YAAY,EAAM,OAAO,GACxD,IAAc,QAAe,EAAO,SAAS,EAAQ,KAAK,GAC1D,IAAc,QAAe;GACjC,IAAI,CAAC,EAAY,OAAO,OAAO;GAC/B,IAAM,IAAO,EAAE,GAAI,EAAkC;GAErD,OADA,OAAO,EAAK,SACL;EACT,CAAC;yBAIC,EA6BY,EA5BL,EAAA,QAAM,MAAA,QAAA,GADb,EAEU,EA2BE,OA3BS;GACnB,OAAM;GACL,MAAM,EAAA,SAAM,CAAK,EAAA,QAAU,EAAA,OAAO,KAAA;GAClC,MAAM,EAAA,QAAS,KAAA,IAAY,EAAA;GAC3B,UAAU,EAAA,QAAS,KAAA,IAAY,EAAA,YAAY,EAAA;GAC3C,iBAAe,EAAA,QAAW,SAAY,KAAA;GACtC,gBAAc,EAAA;GACd,aAAW,EAAA;GACX,iBAAe,EAAA,WAAQ,KAAQ,KAAA;GAC/B,aAAW,EAAA;GACX,gBAAc,EAAA,UAAO,KAAQ,KAAA;GAC7B,gBAAc,EAAA,UAAO,KAAQ,KAAA;GAC7B,aAAW,EAAA,WAAW,KAAA;;oBAOhB;IAFK,EAAA,WAAA,EAAA,GAAZ,EAEO,QAFP,GAEO,CADL,EAAY,CAAA,CAAA,CAAA,KAEd,EAEO,EAAA,QAAA,SAAA,CAAA,SAAA,CADQ,EAAA,aAAA,EAAA,GAAb,EAA6E,GAA7E,EAA6E,EAAA,KAAA,EAAA,GAA7C,EAAA,CAAA,CAAS,CAAC,EAAA,SAAS,GAAA,EAAI,QAAQ,EAAA,WAAU,CAAA,GAAA,MAAA,IAAA,CAAA,QAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,KAAA,GAAA,CAAA;IAE3E,EAAQ,EAAA,QAAA,SAAA;IACR,EAEO,EAAA,QAAA,OAAA,CAAA,SAAA,CADQ,EAAA,WAAA,EAAA,GAAb,EAAyE,GAAzE,EAAyE,EAAA,KAAA,EAAA,GAA3C,EAAA,CAAA,CAAS,CAAC,EAAA,OAAO,GAAA,EAAI,QAAQ,EAAA,WAAU,CAAA,GAAA,MAAA,IAAA,CAAA,QAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA"}

package/dist/components/VButton/VButtonGroup.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-button-group{align-items:stretch;display:inline-flex}.v-button-group[data-orientation=vertical]{flex-direction:column}.v-button-group[data-orientation=horizontal]>.v-button:not(:first-child){border-inline-start-color:var(--vectis-color-border);border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:-1px}.v-button-group[data-orientation=horizontal]>.v-button:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.v-button-group[data-orientation=vertical]>.v-button:not(:first-child){border-block-start-color:var(--vectis-color-border);border-start-start-radius:0;border-start-end-radius:0;margin-block-start:-1px}.v-button-group[data-orientation=vertical]>.v-button:not(:last-child){border-end-end-radius:0;border-end-start-radius:0}.v-button-group>.v-button:hover,.v-button-group>.v-button:focus-visible,.v-button-group>.v-button:active{z-index:1}}

package/dist/components/VButton/VButtonGroup.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Joins several VButtons or VIconButtons into one segmented control: the borders
+ * they share are merged into a single line, and only the two ends of the group keep
+ * their rounded corners, so the row reads as one object rather than as buttons
+ * placed side by side.
+ *
+ * Everything here is CSS — the group passes nothing down to its children, and each
+ * button keeps the props it was given. Setting the same variant, tone and size on
+ * all of them is therefore what makes the group look coherent.
+ */
+interface ButtonGroupProps {
+    /**
+     * The direction the buttons are joined in: a row by default, or a column under
+     * `vertical`.
+     */
+    orientation?: 'horizontal' | 'vertical';
+}
+type __VLS_Slots = {
+    /** The VButtons and VIconButtons to join together. */
+    default(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<ButtonGroupProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ButtonGroupProps> & Readonly<{}>, {
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VButton/VButtonGroup.js

@@ -0,0 +1,9 @@
+import './VButtonGroup.css';
+import e from "./VButtonGroup.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                             */
+//#region src/components/VButton/VButtonGroup.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=VButtonGroup.js.map

package/dist/components/VButton/VButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VButtonGroup.js","names":[],"sources":["../../../src/components/VButton/VButtonGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Joins several VButtons or VIconButtons into one segmented control: the borders\n * they share are merged into a single line, and only the two ends of the group keep\n * their rounded corners, so the row reads as one object rather than as buttons\n * placed side by side.\n *\n * Everything here is CSS — the group passes nothing down to its children, and each\n * button keeps the props it was given. Setting the same variant, tone and size on\n * all of them is therefore what makes the group look coherent.\n */\ninterface ButtonGroupProps {\n  /**\n   * The direction the buttons are joined in: a row by default, or a column under\n   * `vertical`.\n   */\n  orientation?: 'horizontal' | 'vertical'\n}\n\nwithDefaults(defineProps<ButtonGroupProps>(), {\n  orientation: 'horizontal',\n})\n\ndefineSlots<{\n  /** The VButtons and VIconButtons to join together. */\n  default(): unknown\n}>()\n</script>\n\n<template>\n  <div class=\"v-button-group\" role=\"group\" :data-orientation=\"orientation\">\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-button-group {\n    display: inline-flex;\n    /* Gives every segment the same height in a row, and the same width in a column,\n       whatever each button's own content measures. */\n    align-items: stretch;\n  }\n\n  .v-button-group[data-orientation='vertical'] {\n    flex-direction: column;\n  }\n\n  /* The negative margin pulls each segment onto its neighbour so their two 1px\n     borders collapse into one, and that single line is then coloured as a neutral\n     seam: it draws the separation the filled variants would otherwise lack (their\n     border is transparent) and unifies the joint between two outlined ones.\n\n     Each block is scoped to one orientation on purpose. Left unscoped, the\n     horizontal rules would also flatten the side corners and borders in a vertical\n     group, where those are precisely the edges that must stay round. */\n  .v-button-group[data-orientation='horizontal'] > .v-button:not(:first-child) {\n    margin-inline-start: -1px;\n    border-inline-start-color: var(--vectis-color-border);\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n  }\n\n  .v-button-group[data-orientation='horizontal'] > .v-button:not(:last-child) {\n    border-start-end-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  .v-button-group[data-orientation='vertical'] > .v-button:not(:first-child) {\n    margin-block-start: -1px;\n    border-block-start-color: var(--vectis-color-border);\n    border-start-start-radius: 0;\n    border-start-end-radius: 0;\n  }\n\n  .v-button-group[data-orientation='vertical'] > .v-button:not(:last-child) {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  /* A button being hovered, focused or pressed rises above its neighbours. Since the\n     segments overlap by one pixel, the one drawn later would otherwise clip its\n     tinted border and, more visibly, cut through its focus ring. */\n  .v-button-group > .v-button:hover,\n  .v-button-group > .v-button:focus-visible,\n  .v-button-group > .v-button:active {\n    z-index: 1;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VButton/VButtonGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,17 @@
+import { createElementBlock as e, defineComponent as t, openBlock as n, renderSlot as r } from "vue";
+//#region src/components/VButton/VButtonGroup.vue?vue&type=script&setup=true&lang.ts
+var i = ["data-orientation"], a = /*@__PURE__*/ t({
+	__name: "VButtonGroup",
+	props: { orientation: { default: "horizontal" } },
+	setup(t) {
+		return (a, o) => (n(), e("div", {
+			class: "v-button-group",
+			role: "group",
+			"data-orientation": t.orientation
+		}, [r(a.$slots, "default")], 8, i));
+	}
+});
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=VButtonGroup.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VButton/VButtonGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VButtonGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VButton/VButtonGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Joins several VButtons or VIconButtons into one segmented control: the borders\n * they share are merged into a single line, and only the two ends of the group keep\n * their rounded corners, so the row reads as one object rather than as buttons\n * placed side by side.\n *\n * Everything here is CSS — the group passes nothing down to its children, and each\n * button keeps the props it was given. Setting the same variant, tone and size on\n * all of them is therefore what makes the group look coherent.\n */\ninterface ButtonGroupProps {\n  /**\n   * The direction the buttons are joined in: a row by default, or a column under\n   * `vertical`.\n   */\n  orientation?: 'horizontal' | 'vertical'\n}\n\nwithDefaults(defineProps<ButtonGroupProps>(), {\n  orientation: 'horizontal',\n})\n\ndefineSlots<{\n  /** The VButtons and VIconButtons to join together. */\n  default(): unknown\n}>()\n</script>\n\n<template>\n  <div class=\"v-button-group\" role=\"group\" :data-orientation=\"orientation\">\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-button-group {\n    display: inline-flex;\n    /* Gives every segment the same height in a row, and the same width in a column,\n       whatever each button's own content measures. */\n    align-items: stretch;\n  }\n\n  .v-button-group[data-orientation='vertical'] {\n    flex-direction: column;\n  }\n\n  /* The negative margin pulls each segment onto its neighbour so their two 1px\n     borders collapse into one, and that single line is then coloured as a neutral\n     seam: it draws the separation the filled variants would otherwise lack (their\n     border is transparent) and unifies the joint between two outlined ones.\n\n     Each block is scoped to one orientation on purpose. Left unscoped, the\n     horizontal rules would also flatten the side corners and borders in a vertical\n     group, where those are precisely the edges that must stay round. */\n  .v-button-group[data-orientation='horizontal'] > .v-button:not(:first-child) {\n    margin-inline-start: -1px;\n    border-inline-start-color: var(--vectis-color-border);\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n  }\n\n  .v-button-group[data-orientation='horizontal'] > .v-button:not(:last-child) {\n    border-start-end-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  .v-button-group[data-orientation='vertical'] > .v-button:not(:first-child) {\n    margin-block-start: -1px;\n    border-block-start-color: var(--vectis-color-border);\n    border-start-start-radius: 0;\n    border-start-end-radius: 0;\n  }\n\n  .v-button-group[data-orientation='vertical'] > .v-button:not(:last-child) {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  /* A button being hovered, focused or pressed rises above its neighbours. Since the\n     segments overlap by one pixel, the one drawn later would otherwise clip its\n     tinted border and, more visibly, cut through its focus ring. */\n  .v-button-group > .v-button:hover,\n  .v-button-group > .v-button:focus-visible,\n  .v-button-group > .v-button:active {\n    z-index: 1;\n  }\n}\n</style>\n"],"mappings":";;;;;;yBA8BE,EAEM,OAAA;GAFD,OAAM;GAAiB,MAAK;GAAS,oBAAkB,EAAA;MAC1D,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,GAAA,CAAA"}

package/dist/components/VCalendar/VCalendar.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-calendar{block-size:100%;min-block-size:0;font-family:var(--vectis-text-family);color:var(--vectis-color-text);display:flex}.v-calendar-region{flex-direction:column;flex:1;min-block-size:0;min-inline-size:0;display:flex}.v-calendar-toolbar{align-items:center;gap:var(--vectis-space-2);flex-wrap:wrap;flex:none;padding-block-end:var(--vectis-space-3);display:flex}.v-calendar-nav{align-items:center;gap:var(--vectis-space-1);display:flex}.v-calendar-title{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;overflow:hidden}.v-calendar-actions{align-items:center;gap:var(--vectis-space-2);margin-inline-start:auto;display:flex}.v-calendar-view{border:1px solid var(--vectis-color-border);border-radius:var(--vectis-radius-surface);flex:1;min-block-size:0}}

package/dist/components/VCalendar/VCalendar.d.ts

@@ -0,0 +1,129 @@
+import { HourFormat } from '../../utils/time.js';
+import { CalendarEvent, CalendarEventTimes, CalendarView } from './types.js';
+export interface CalendarProps {
+    /**
+     * Which views the menu offers, in the order it lists them. Narrowing it is how a
+     * calendar that only ever shows weeks stops offering anything else.
+     */
+    views?: CalendarView[];
+    /** How many days the custom view shows, and how far Previous and Next step in it. */
+    customDays?: number;
+    /**
+     * Which weekdays are on show, as numbers from 0 for Sunday. `[1,2,3,4,5]` hides the
+     * weekend everywhere. The ORDER matters as well: the first entry is the day a week
+     * starts on, which is why there is no separate first-day setting. Left out, the seven
+     * days in the order the locale puts them.
+     */
+    weekdays?: number[];
+    /** The language the days, months and times are written in. Falls back to the global one. */
+    locale?: string;
+    /** Whether times are shown on a twelve or twenty-four hour clock. Follows the locale. */
+    hourFormat?: HourFormat;
+    /** The hour the grid starts at, from 0. */
+    dayStart?: number;
+    /** The hour it ends at, up to 24. */
+    dayEnd?: number;
+    /**
+     * The step everything snaps to, in minutes: how far a nudge moves an event, and how long
+     * a newly created one is.
+     */
+    slotDuration?: number;
+    /** Where the grid is scrolled to when it first appears, so the working day is in view. */
+    scrollTime?: string;
+    /**
+     * Draws a line across today's column at the time it is now, with a dot on its leading
+     * edge. It ticks once a minute while the calendar is on screen.
+     */
+    showCurrentTime?: boolean;
+    /** How many events a day of the month view shows before it starts counting the rest. */
+    monthEventLimit?: number;
+    /**
+     * Lets events be moved and stretched — by dragging them, and with the keyboard. Turning it
+     * off leaves them readable and clickable, and nothing else.
+     */
+    editable?: boolean;
+    /**
+     * Makes an event when an empty part of a day is taken up: a click makes one `slotDuration`
+     * long, a drag makes one as long as it was drawn. `slot-activate` still fires either way,
+     * so a consumer who wants their own form can turn this off and keep the signal.
+     */
+    creatable?: boolean;
+    /**
+     * How long a dragged event has to rest against the side of the calendar before the view
+     * turns to the previous or next period, in milliseconds. `0` turns that off.
+     *
+     * The wait is the point of it: paging the instant the pointer touched the edge would make
+     * the last day of a week impossible to aim at.
+     */
+    edgeStepDelay?: number;
+    /** Whether dragging near the top or bottom of a time grid scrolls it. */
+    autoScroll?: boolean;
+    /** What the calendar is called, for anyone who cannot see it. */
+    label?: string;
+}
+declare const __VLS_export: <E extends CalendarEvent>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<(CalendarProps & {
+        view?: CalendarView;
+        date?: string;
+        events?: E[];
+    }) & {
+        "onEvent-activate"?: ((event: E) => any) | undefined;
+        "onSlot-activate"?: ((slot: {
+            date: string;
+            time: string;
+        }) => any) | undefined;
+        "onEvent-move"?: ((event: E, previous: CalendarEventTimes) => any) | undefined;
+        "onEvent-resize"?: ((event: E, previous: CalendarEventTimes) => any) | undefined;
+        "onEvent-create"?: ((event: CalendarEvent) => any) | undefined;
+        "onUpdate:view"?: ((value: CalendarView) => any) | undefined;
+        "onUpdate:date"?: ((value: string) => any) | undefined;
+        "onUpdate:events"?: ((value: E[]) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import('vue').ShallowUnwrapRef<{
+        /** Brings the focus into the grid, onto the cell it is currently showing. */
+        focus: () => void | undefined;
+        /** Goes back to the current day, exactly as the Today button does. */
+        today: () => void;
+        previous: () => void;
+        next: () => void;
+        /** Scrolls the grid so a given `HH:mm` sits at the top of the visible area. */
+        scrollTo: (time: string) => void;
+    }>) => void;
+    attrs: any;
+    slots: {
+        /** Extra controls in the toolbar, between the range and the view menu. */
+        actions?(): unknown;
+        /** The content of one event's card, replacing the title and times. */
+        event?(props: {
+            event: E;
+            layout: "block" | "chip";
+            timeText: string;
+            continuesBefore: boolean;
+            continuesAfter: boolean;
+        }): unknown;
+        /** The head of one day column, replacing the weekday and the number. */
+        'day-header'?(props: {
+            iso: string;
+            weekday: string;
+            day: string;
+            today: boolean;
+        }): unknown;
+        /** The label beside the band of all-day events. */
+        'all-day-label'?(): unknown;
+    };
+    emit: (((evt: "event-activate", event: E) => void) & ((evt: "slot-activate", slot: {
+        date: string;
+        time: string;
+    }) => void) & ((evt: "event-move", event: E, previous: CalendarEventTimes) => void) & ((evt: "event-resize", event: E, previous: CalendarEventTimes) => void) & ((evt: "event-create", event: CalendarEvent) => void)) & (((event: "update:view", value: CalendarView) => void) & ((event: "update:date", value: string) => void) & ((event: "update:events", value: E[]) => void));
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/VCalendar/VCalendar.js

@@ -0,0 +1,9 @@
+import './VCalendar.css';
+import e from "./VCalendar.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                          */
+//#region src/components/VCalendar/VCalendar.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=VCalendar.js.map

package/dist/components/VCalendar/VCalendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VCalendar.js","names":[],"sources":["../../../src/components/VCalendar/VCalendar.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"E extends CalendarEvent\">\n// @a11y @ssr @core\n/**\n * An agenda: the days laid out side by side with the hours running down them, and the\n * events drawn where they fall.\n *\n * It is a place to READ and REARRANGE a schedule, not to write one. Opening an event for\n * editing, and adding one by any route other than pointing at an empty slot, stay with the\n * consumer — the component tells them what was asked for and leaves the form to them.\n *\n * Everything is handled in local time as ISO `YYYY-MM-DD` dates and 24-hour `HH:mm` times\n * (see `utils/date` and `utils/time`), which is what keeps the server and the browser in\n * agreement. An event may name a time zone, and that name is shown beside its times as an\n * annotation; it is never applied. Converting would mean the card moved depending on where\n * the page was rendered, which is the one thing a calendar must not do.\n *\n * The JavaScript here is what the platform gives no way to avoid. There is no accessible\n * time grid to build on and no way to express \"these three meetings overlap, so share the\n * width between them\" in CSS, so the ARIA grid pattern and the overlap layout are written\n * out by hand. Every geometric and calendrical decision lives in `layout.ts`, pure, because\n * the test environment lays nothing out and that is the only place any of it can be checked.\n */\nimport { computed, onMounted, ref, useId } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { arrow_drop_down as arrowDropDownIcon } from '../VIcon/icons/arrow_drop_down'\nimport { chevron_left as chevronLeftIcon } from '../VIcon/icons/chevron_left'\nimport { chevron_right as chevronRightIcon } from '../VIcon/icons/chevron_right'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport VMenu from '../VMenu/VMenu.vue'\nimport VMenuItem from '../VMenu/VMenuItem.vue'\nimport VTypography from '../VTypography/VTypography.vue'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useTimer } from '../../composables/useTimer'\nimport {\n  firstDayOfWeekFor,\n  formatDisplay as formatDate,\n  formatDisplayRange,\n} from '../../utils/date'\nimport { hourCycleFor, minutesOf, type HourFormat } from '../../utils/time'\n\nimport { useLocale, useMessages } from '../../i18n/state'\n\nimport VCalendarMonth from './VCalendarMonth.vue'\nimport VCalendarTimeGrid, { type FocusedCell } from './VCalendarTimeGrid.vue'\nimport VCalendarYear from './VCalendarYear.vue'\nimport { EDGE_STEP_DELAY } from './edgeStep'\nimport {\n  monthWeeks,\n  monthsOfYear,\n  normalizeWeekdays,\n  stepAnchor,\n  timeOf,\n  timesOf,\n  todayISO,\n  visibleDays,\n  visibleRange,\n  windowOf,\n} from './layout'\nimport type { CalendarEvent, CalendarEventId, CalendarEventTimes, CalendarView } from './types'\n\nexport interface CalendarProps {\n  /**\n   * Which views the menu offers, in the order it lists them. Narrowing it is how a\n   * calendar that only ever shows weeks stops offering anything else.\n   */\n  views?: CalendarView[]\n  /** How many days the custom view shows, and how far Previous and Next step in it. */\n  customDays?: number\n  /**\n   * Which weekdays are on show, as numbers from 0 for Sunday. `[1,2,3,4,5]` hides the\n   * weekend everywhere. The ORDER matters as well: the first entry is the day a week\n   * starts on, which is why there is no separate first-day setting. Left out, the seven\n   * days in the order the locale puts them.\n   */\n  weekdays?: number[]\n  /** The language the days, months and times are written in. Falls back to the global one. */\n  locale?: string\n  /** Whether times are shown on a twelve or twenty-four hour clock. Follows the locale. */\n  hourFormat?: HourFormat\n  /** The hour the grid starts at, from 0. */\n  dayStart?: number\n  /** The hour it ends at, up to 24. */\n  dayEnd?: number\n  /**\n   * The step everything snaps to, in minutes: how far a nudge moves an event, and how long\n   * a newly created one is.\n   */\n  slotDuration?: number\n  /** Where the grid is scrolled to when it first appears, so the working day is in view. */\n  scrollTime?: string\n  /**\n   * Draws a line across today's column at the time it is now, with a dot on its leading\n   * edge. It ticks once a minute while the calendar is on screen.\n   */\n  showCurrentTime?: boolean\n  /** How many events a day of the month view shows before it starts counting the rest. */\n  monthEventLimit?: number\n  /**\n   * Lets events be moved and stretched — by dragging them, and with the keyboard. Turning it\n   * off leaves them readable and clickable, and nothing else.\n   */\n  editable?: boolean\n  /**\n   * Makes an event when an empty part of a day is taken up: a click makes one `slotDuration`\n   * long, a drag makes one as long as it was drawn. `slot-activate` still fires either way,\n   * so a consumer who wants their own form can turn this off and keep the signal.\n   */\n  creatable?: boolean\n  /**\n   * How long a dragged event has to rest against the side of the calendar before the view\n   * turns to the previous or next period, in milliseconds. `0` turns that off.\n   *\n   * The wait is the point of it: paging the instant the pointer touched the edge would make\n   * the last day of a week impossible to aim at.\n   */\n  edgeStepDelay?: number\n  /** Whether dragging near the top or bottom of a time grid scrolls it. */\n  autoScroll?: boolean\n  /** What the calendar is called, for anyone who cannot see it. */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<CalendarProps>(), {\n  views: () => ['day', '4days', 'week'],\n  customDays: 4,\n  weekdays: undefined,\n  locale: undefined,\n  hourFormat: undefined,\n  dayStart: 0,\n  dayEnd: 24,\n  slotDuration: 15,\n  scrollTime: '08:00',\n  showCurrentTime: true,\n  monthEventLimit: 3,\n  editable: true,\n  creatable: true,\n  edgeStepDelay: EDGE_STEP_DELAY,\n  autoScroll: true,\n  label: undefined,\n})\n\n/*\n * The wrapper-root pattern: the consumer's class and style stay on the outer box, and\n * everything else — their `id`, their `aria-*` — goes on the region, which is the part\n * that carries the role and is therefore the part they mean.\n */\ndefineOptions({ inheritAttrs: false })\n\nconst view = defineModel<CalendarView>('view', { default: 'week' })\n\n/*\n * @ssr — the anchor is read from the clock at setup, so the server and the client can in\n * principle disagree across a midnight boundary. That is the trade VDatePicker already\n * makes for the month it opens on, and it is a safer one here: what the anchor decides is\n * a whole WEEK or month, which is the same on both sides for all but a few seconds a day.\n * Today's date, which marks a single column, is a different matter and is read below in\n * `onMounted` where the server cannot see it at all.\n */\nconst date = defineModel<string>('date', { default: () => todayISO() })\nconst events = defineModel<E[]>('events', { default: () => [] })\n\nconst emit = defineEmits<{\n  /** A card was clicked or activated — the cue to open an editor of your own. */\n  'event-activate': [event: E]\n  /** An empty part of the grid was activated, at this day and this time. */\n  'slot-activate': [slot: { date: string; time: string }]\n  /**\n   * An event was dragged or nudged somewhere else. It carries the event as it now stands and\n   * where it came from, so undoing it needs no copy of your own.\n   */\n  'event-move': [event: E, previous: CalendarEventTimes]\n  /** An event's end was dragged or nudged, in the same two parts. */\n  'event-resize': [event: E, previous: CalendarEventTimes]\n  /**\n   * An event was made by taking up an empty part of a day. It has already been added to\n   * `events`; this is the cue to give it a real name, or to save it.\n   */\n  'event-create': [event: CalendarEvent]\n}>()\n\ndefineSlots<{\n  /** Extra controls in the toolbar, between the range and the view menu. */\n  actions?(): unknown\n  /** The content of one event's card, replacing the title and times. */\n  event?(props: {\n    event: E\n    layout: 'block' | 'chip'\n    timeText: string\n    continuesBefore: boolean\n    continuesAfter: boolean\n  }): unknown\n  /** The head of one day column, replacing the weekday and the number. */\n  'day-header'?(props: { iso: string; weekday: string; day: string; today: boolean }): unknown\n  /** The label beside the band of all-day events. */\n  'all-day-label'?(): unknown\n}>()\n\nconst m = useMessages()\nconst vectisLocale = useLocale()\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\n/*\n * The prop wins, and the design system's global locale is what it falls back to. Every read\n * goes through this one derivation, so the two sources can never be consulted in a\n * different order somewhere else.\n */\nconst resolvedLocale = computed(() => props.locale ?? vectisLocale.value)\nconst resolvedHourFormat = computed(() => props.hourFormat ?? hourCycleFor(resolvedLocale.value))\nconst resolvedWeekdays = computed(() =>\n  normalizeWeekdays(props.weekdays, firstDayOfWeekFor(resolvedLocale.value)),\n)\n\nconst window = computed(() => windowOf(props.dayStart, props.dayEnd))\n\nconst days = computed(() =>\n  visibleDays(date.value, view.value, resolvedWeekdays.value, props.customDays),\n)\n\n/** Which view is a time grid, and which is a summary. Several things below turn on this. */\nconst isTimeGrid = computed(() => view.value !== 'month' && view.value !== 'year')\n\nconst weeks = computed(() =>\n  view.value === 'month' ? monthWeeks(date.value, resolvedWeekdays.value) : [],\n)\n\nconst months = computed(() => (view.value === 'year' ? monthsOfYear(date.value) : []))\n\n// @ssr — today and the time it is now can only be known on the client: the server has no\n// way to tell either where the reader is, and rendering a guess would make the two markups\n// differ. Both stay null until then, and every rule that draws them is written to expect it.\nconst today = ref<string | null>(null)\nconst now = ref<number | null>(null)\n\nconst clock = useTimer()\n\n/**\n * Re-reads the clock, then arms itself for the top of the next minute — so the line moves\n * when the minute does rather than drifting by however long the interval was.\n *\n * TRAP — the floor on the delay is not a nicety. `useTimer` runs a delay of zero or less\n * SYNCHRONOUSLY, by design, so a tick that ever computed one would call itself straight back\n * and go on doing so until the stack gave out. A second is well below the resolution\n * anything here needs and comfortably above the point where that could happen.\n */\nfunction tick() {\n  const at = new Date()\n  now.value = at.getHours() * 60 + at.getMinutes()\n  clock.start(tick, Math.max(1000, (60 - at.getSeconds()) * 1000))\n}\n\nonMounted(() => {\n  today.value = todayISO()\n  if (props.showCurrentTime) tick()\n  const at = minutesOf(props.scrollTime)\n  if (at !== null) gridRef.value?.scrollToMinutes(at)\n})\n\n/**\n * The grid, named by what it exposes rather than by `InstanceType<typeof …>`.\n *\n * TRAP — the usual form does not work here and the error it gives says nothing useful about\n * why. A generic `<script setup>` compiles to a FUNCTION, not to a class, so it has no\n * construct signature for `InstanceType` to read: the message complains that the component\n * \"provides no match for the signature `new (...args: any)`\", pointing at the template.\n * Writing the contract out is also the more honest of the two, since these two methods are\n * the whole of what this component asks of that one.\n */\nconst gridRef = ref<{ focus(): void; scrollToMinutes(minutes: number): void } | null>(null)\n\n/*\n * Which cell holds the tab stop, kept as two refs because the two kinds of view mean\n * different things by it: a time grid needs a day AND an hour, a month only a day. One ref\n * carrying an hour the month ignores would leave that hour to go stale, and the grid would\n * then reopen on whatever the month happened to leave behind.\n */\nconst focused = ref<FocusedCell>({ iso: date.value, minutes: window.value.start })\nconst focusedDay = ref(date.value)\n\nconst range = computed(() =>\n  visibleRange(date.value, view.value, resolvedWeekdays.value, props.customDays),\n)\n\n/**\n * What the toolbar says the calendar is showing. Each view names itself at the coarsest\n * granularity that still identifies it: a single day says its weekday, a year says nothing\n * but the number.\n */\nconst rangeText = computed(() => {\n  const locale = resolvedLocale.value\n  if (view.value === 'year') return formatDate(range.value.start, locale, { year: 'numeric' })\n  if (view.value === 'month') {\n    return formatDate(range.value.start, locale, { month: 'long', year: 'numeric' })\n  }\n  if (view.value === 'day') {\n    return formatDate(range.value.start, locale, {\n      weekday: 'long',\n      day: 'numeric',\n      month: 'long',\n      year: 'numeric',\n    })\n  }\n  return formatDisplayRange(range.value.start, range.value.end, locale, {\n    day: 'numeric',\n    month: 'long',\n    year: 'numeric',\n  })\n})\n\nconst viewLabel = (value: CalendarView) => {\n  const words = m.value.calendar\n  if (value === 'day') return words.viewDay\n  if (value === '4days') return words.view4Days\n  if (value === 'week') return words.viewWeek\n  if (value === 'month') return words.viewMonth\n  if (value === 'year') return words.viewYear\n  return words.viewCustom(props.customDays)\n}\n\n/**\n * What the two navigation buttons are called. They name the step rather than saying\n * \"previous\" alone, because the step is what changes from one view to the next and a bare\n * \"previous\" leaves a reader to guess whether it is a day or a year they are about to lose.\n */\nconst stepLabels = computed(() => {\n  const words = m.value.calendar\n  if (view.value === 'day') return { previous: words.previousDay, next: words.nextDay }\n  if (view.value === 'week') return { previous: words.previousWeek, next: words.nextWeek }\n  if (view.value === 'month') return { previous: words.previousMonth, next: words.nextMonth }\n  if (view.value === 'year') return { previous: words.previousYear, next: words.nextYear }\n  return { previous: words.previousPeriod, next: words.nextPeriod }\n})\n\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.calendar.label)\n\nfunction step(delta: -1 | 1) {\n  date.value = stepAnchor(date.value, view.value, delta, resolvedWeekdays.value, props.customDays)\n}\n\nfunction today_() {\n  date.value = todayISO()\n}\n\nfunction setView(value: CalendarView) {\n  view.value = value\n}\n\nfunction onCellActivate(iso: string, minutes: number) {\n  emit('slot-activate', { date: iso, time: timeOf(minutes) })\n}\n\n/**\n * Going from a summary to the thing it summarises: opening a day from the month view, or a\n * month from the year view.\n *\n * The view only changes if the calendar was offering that one in the first place. A consumer\n * who narrowed `views` to a week and a year has said what their calendar is for, and jumping\n * it into a day view they deliberately left out would be the component overruling them —\n * so the date moves and the view stays, which is still a step towards what was asked for.\n */\nfunction openIn(iso: string, target: CalendarView) {\n  date.value = iso\n  if (props.views.includes(target)) view.value = target\n}\n\n/**\n * What a reader who cannot see the grid is told: the range after every step of a move, and\n * whether the move was taken or given up.\n *\n * The node is rendered from the FIRST paint and left empty, never inserted along with its\n * first message — a live region that appears at the same moment as its text is not announced\n * at all, which is the trap VDataTable's selection count already documents.\n */\nconst announcement = ref('')\nconst uid = useId()\nconst hintId = `${uid}-hint`\n\nfunction announce(message: string) {\n  announcement.value = message\n}\n\n/**\n * Writes one event's new times into the model and says what happened.\n *\n * The array is replaced rather than edited in place: a new reference is what wakes a\n * consumer's own watchers, and it is the design system's rule for every v-model holding a\n * list. This runs ONCE, when a gesture ends — never per frame of a drag, which would fill an\n * undo stack with sixty entries a second and send each one back as a render fighting the\n * finger.\n */\nfunction onEventDrop(id: CalendarEventId, times: CalendarEventTimes, kind: 'move' | 'resize') {\n  const current = events.value.find((item) => item.id === id)\n  if (!current) return\n\n  const previous = timesOf(current)\n  const next = { ...current, ...times }\n  events.value = events.value.map((item) => (item.id === id ? next : item))\n  // Written out rather than picking the name with a conditional: the emit signatures are an\n  // overload set, and TypeScript resolves one only against a literal.\n  if (kind === 'resize') emit('event-resize', next, previous)\n  else emit('event-move', next, previous)\n}\n\n/**\n * How many events this calendar has minted, which is what numbers their default names.\n *\n * It counts from one per calendar rather than from the length of the list, so removing an\n * event does not make the next one reuse its name.\n */\nlet created = 0\n\nfunction onSlotCreate(times: CalendarEventTimes) {\n  // The grid only ever asks for this when it was told it could create, so there is no second\n  // guard here: `creatable` is decided once, where the press is read.\n  emit('slot-activate', { date: times.start, time: times.startTime })\n\n  created++\n  const draft: CalendarEvent = {\n    // Vue's own id makes it unique to this calendar, so two on one page cannot collide, and\n    // it is stable across the server and the client.\n    id: `${uid}-${created}`,\n    title: m.value.calendar.newEvent(created),\n    ...times,\n  }\n\n  /*\n   * A consumer whose own event type adds REQUIRED fields gets a draft without them — there\n   * is nothing here that could invent a room number or an attendee list. That is what\n   * `event-create` is for: it fires with the event as made, and replacing that entry with a\n   * complete one is the intended answer. Documented in the `.mdx`.\n   */\n  events.value = [...events.value, draft as E]\n  emit('event-create', draft)\n}\n\ndefineExpose({\n  /** Brings the focus into the grid, onto the cell it is currently showing. */\n  focus: () => gridRef.value?.focus(),\n  /** Goes back to the current day, exactly as the Today button does. */\n  today: today_,\n  previous: () => step(-1),\n  next: () => step(1),\n  /** Scrolls the grid so a given `HH:mm` sits at the top of the visible area. */\n  scrollTo: (time: string) => {\n    const at = minutesOf(time)\n    if (at !== null) gridRef.value?.scrollToMinutes(at)\n  },\n})\n</script>\n\n<template>\n  <div class=\"v-calendar\" :class=\"rootClass\" :style=\"rootStyle\">\n    <section\n      v-bind=\"forwardedAttrs\"\n      class=\"v-calendar-region\"\n      :aria-label=\"ariaLabel\"\n      :aria-roledescription=\"m.calendar.roleDescription\"\n    >\n      <div class=\"v-calendar-toolbar\">\n        <div class=\"v-calendar-nav\">\n          <VIconButton\n            :icon=\"chevronLeftIcon\"\n            :label=\"stepLabels.previous\"\n            size=\"sm\"\n            @click=\"step(-1)\"\n          />\n          <VIconButton\n            :icon=\"chevronRightIcon\"\n            :label=\"stepLabels.next\"\n            size=\"sm\"\n            @click=\"step(1)\"\n          />\n        </div>\n\n        <VButton variant=\"outline\" tone=\"neutral\" size=\"sm\" @click=\"today_\">\n          {{ m.calendar.today }}\n        </VButton>\n\n        <VTypography variant=\"heading-4\" as=\"h2\" class=\"v-calendar-title\">\n          {{ rangeText }}\n        </VTypography>\n\n        <div class=\"v-calendar-actions\">\n          <slot name=\"actions\" />\n\n          <VMenu v-if=\"views.length > 1\" size=\"sm\" placement=\"bottom-end\" match-trigger>\n            <template #trigger=\"{ triggerProps }\">\n              <VButton\n                variant=\"outline\"\n                tone=\"neutral\"\n                size=\"sm\"\n                v-bind=\"triggerProps\"\n                :aria-label=\"`${m.calendar.view}: ${viewLabel(view)}`\"\n              >\n                {{ viewLabel(view) }}\n                <VIcon :name=\"arrowDropDownIcon\" />\n              </VButton>\n            </template>\n            <VMenuItem\n              v-for=\"value in views\"\n              :key=\"value\"\n              :label=\"viewLabel(value)\"\n              :selected=\"value === view\"\n              @select=\"setView(value)\"\n            />\n          </VMenu>\n        </div>\n      </div>\n\n      <VCalendarTimeGrid\n        v-if=\"isTimeGrid\"\n        ref=\"gridRef\"\n        v-model:focused=\"focused\"\n        class=\"v-calendar-view\"\n        :days=\"days\"\n        :events=\"events\"\n        :window=\"window\"\n        :slot-duration=\"slotDuration\"\n        :locale=\"resolvedLocale\"\n        :hour-format=\"resolvedHourFormat\"\n        :today=\"today\"\n        :now=\"showCurrentTime ? now : null\"\n        :editable=\"editable\"\n        :creatable=\"creatable\"\n        :hint-id=\"hintId\"\n        :edge-step-delay=\"edgeStepDelay\"\n        :auto-scroll=\"autoScroll\"\n        :label=\"rangeText\"\n        @cell-activate=\"onCellActivate\"\n        @event-activate=\"emit('event-activate', $event)\"\n        @event-drop=\"onEventDrop\"\n        @slot-create=\"onSlotCreate\"\n        @announce=\"announce\"\n        @step=\"step\"\n      >\n        <template v-if=\"$slots.event\" #event=\"slotProps\">\n          <slot name=\"event\" v-bind=\"slotProps\" />\n        </template>\n        <template v-if=\"$slots['day-header']\" #day-header=\"slotProps\">\n          <slot name=\"day-header\" v-bind=\"slotProps\" />\n        </template>\n        <template v-if=\"$slots['all-day-label']\" #all-day-label>\n          <slot name=\"all-day-label\" />\n        </template>\n      </VCalendarTimeGrid>\n\n      <VCalendarMonth\n        v-else-if=\"view === 'month'\"\n        ref=\"gridRef\"\n        v-model:focused=\"focusedDay\"\n        class=\"v-calendar-view\"\n        :weeks=\"weeks\"\n        :events=\"events\"\n        :locale=\"resolvedLocale\"\n        :hour-format=\"resolvedHourFormat\"\n        :today=\"today\"\n        :event-limit=\"monthEventLimit\"\n        :editable=\"editable\"\n        :hint-id=\"hintId\"\n        :edge-step-delay=\"edgeStepDelay\"\n        :label=\"rangeText\"\n        @day-activate=\"openIn($event, 'day')\"\n        @cell-activate=\"onCellActivate($event, window.start)\"\n        @event-activate=\"emit('event-activate', $event)\"\n        @event-drop=\"onEventDrop\"\n        @announce=\"announce\"\n        @step=\"step\"\n      >\n        <template v-if=\"$slots.event\" #event=\"slotProps\">\n          <slot name=\"event\" v-bind=\"slotProps\" />\n        </template>\n      </VCalendarMonth>\n\n      <VCalendarYear\n        v-else\n        class=\"v-calendar-view\"\n        :months=\"months\"\n        :events=\"events\"\n        :locale=\"resolvedLocale\"\n        :weekdays=\"resolvedWeekdays\"\n        :today=\"today\"\n        :label=\"rangeText\"\n        @month-activate=\"openIn($event, 'month')\"\n      />\n\n      <!--\n        Both of these are rendered from the first paint and never conditionally.\n\n        The live region has to EXIST before it has anything to say: one inserted along with\n        its first message is not announced at all. And the hint is what every card points at\n        with `aria-describedby`, so one node serves the whole calendar rather than repeating\n        the same sentence on each of a hundred events.\n      -->\n      <div class=\"v-visually-hidden\" role=\"status\" aria-live=\"polite\">{{ announcement }}</div>\n      <span :id=\"hintId\" class=\"v-visually-hidden\">{{ m.calendar.eventHint }}</span>\n    </section>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-calendar {\n    display: flex;\n    block-size: 100%;\n    min-block-size: 0;\n    font-family: var(--vectis-text-family);\n    color: var(--vectis-color-text);\n  }\n\n  /*\n   * The height is settled in CSS rather than measured, the VDataTable idiom: the region is\n   * a flex column at full height, the toolbar refuses to grow and the grid takes what is\n   * left. `min-block-size: 0` on the grid is what lets it shrink below its content and\n   * therefore scroll — without it the automatic minimum of a flex item would hold it at its\n   * full 24-hour height and the whole page would scroll instead.\n   *\n   * All of it is a no-op when the parent's height is auto, where the percentage falls back\n   * to auto and the calendar is simply as tall as its content. That is what makes an opt-in\n   * prop unnecessary.\n   */\n  .v-calendar-region {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-inline-size: 0;\n    min-block-size: 0;\n  }\n\n  .v-calendar-toolbar {\n    display: flex;\n    flex: none;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--vectis-space-2);\n    padding-block-end: var(--vectis-space-3);\n  }\n\n  .v-calendar-nav {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n  }\n\n  .v-calendar-title {\n    /* It may be long — a full weekday and month in the day view — so it is the part that\n       gives way first, and the controls keep their size. */\n    min-inline-size: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .v-calendar-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-2);\n    /* The two siblings are pushed apart from here rather than by a `justify-content` on the\n       toolbar, which would space every control equally instead of grouping them. */\n    margin-inline-start: auto;\n  }\n\n  .v-calendar-view {\n    flex: 1;\n    min-block-size: 0;\n    border: 1px solid var(--vectis-color-border);\n    border-radius: var(--vectis-radius-surface);\n  }\n}\n</style>\n"],"mappings":""}