vectis-ui 0.11.0 → 0.13.0

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

@@ -1 +1 @@
-{"version":3,"file":"gesture.js","names":[],"sources":["../../../src/components/VCalendar/gesture.ts"],"sourcesContent":["// @keyboard @a11y @core\n/**\n * Share pointer and keyboard editing gestures across month and time-grid views; each view\n * supplies its own cell geometry.\n */\nimport { computed, nextTick, ref, watch } from 'vue'\nimport type { Ref } from 'vue'\n\nimport { isRtl as isElementRtl } from '../../utils/direction'\n\nimport { useMessages } from '../../i18n/state'\n\nimport { EDGE_BAND, useEdgeStep } from './edgeStep'\nimport { calendarIntent, type CalendarIntent } from './keyboard'\nimport { DRAG_THRESHOLD, inlineEdgeAt, pointWithin, type GridGeometry } from './layout'\nimport type { CalendarEvent, CalendarEventId, CalendarEventTimes } from './types'\n\n/**\n * The prefix marking the copy an event leaves behind at its old place while it is being\n * dragged.\n */\nconst GHOST_PREFIX = '__vectis-calendar-ghost__'\n\n/**\n * The id the ghost of a dragged event carries. It has to DIFFER from the event's own, or the\n * two would collide in every map the layout keys by id and only one would ever be drawn.\n */\nexport const ghostIdOf = (id: CalendarEventId) => `${GHOST_PREFIX}${id}`\n/** The dragged event's own id, read back off its ghost's. */\nexport const originalIdOf = (id: CalendarEventId) => String(id).slice(GHOST_PREFIX.length)\nexport const isGhostId = (id: CalendarEventId) => String(id).startsWith(GHOST_PREFIX)\n\n/** The id a card belongs to, read back off the DOM. */\nexport function cardIdOf(card: HTMLElement, has: (id: CalendarEventId) => boolean) {\n  const raw = card.dataset.eventId ?? ''\n  return has(raw) ? raw : Number(raw)\n}\n\n/**\n * `inlineStart` is the edge the first column starts at, which is the RIGHT one in a\n * right-to-left page.\n */\nexport function gridGeometryOf(rect: DOMRect, columns: number, rtl: boolean): GridGeometry {\n  return {\n    top: rect.top,\n    height: rect.height,\n    inlineStart: rtl ? rect.right : rect.left,\n    inlineSize: rect.width,\n    columns,\n  }\n}\n\n/** The state every gesture carries, whatever each grid adds to it. */\nexport interface GestureBase {\n  id: CalendarEventId\n  /**\n   * Where the event was when the gesture began. Every pointer frame is computed from this and\n   * never from the frame before it, so a long drag cannot accumulate rounding drift.\n   */\n  origin: CalendarEventTimes\n  /** What the card shows right now. The model is not touched until the gesture ends. */\n  preview: CalendarEventTimes\n  /** The pointer holding the gesture, or null for a keyboard grab. */\n  pointerId: number | null\n  originX: number\n  originY: number\n  /**\n   * Where the pointer last was. Two things move the calendar UNDER a still pointer: paging at\n   * an edge, and auto-scrolling. Each has to work out afresh what the pointer is now over.\n   */\n  lastX: number\n  lastY: number\n  /** Whether it moved past the threshold, which separates a drag from a click. */\n  moved: boolean\n  /**\n   * Whether the pointer is off the calendar altogether: over the toolbar, or over the page\n   * beside it. A KEYBOARD grab can never set it, and structurally rather than by a guard:\n   * `onPointermove` is the only writer, and it returns on the id mismatch first: a grab's\n   * `pointerId` is null, which no real pointer's id ever equals.\n   */\n  outside: boolean\n  /**\n   * The reading direction, read once when the gesture begins. It cannot change under a live\n   * drag, and asking the document on every frame costs a style resolution each time.\n   */\n  rtl: boolean\n}\n\n/** What a grid hands over to start a gesture; the rest is filled in here. */\nexport type GestureInit<G extends GestureBase> = Omit<\n  G,\n  'preview' | 'lastX' | 'lastY' | 'moved' | 'outside' | 'rtl'\n>\n\n/**\n * A gesture held by the KEYBOARD rather than by a pointer: grabbed with Space, and waiting for\n * the arrows to move it.\n */\nexport const isGrabbed = (state: GestureBase | null) => state !== null && state.pointerId === null\n\n/** The two intents that move a grabbed event, which only a grid can turn into times. */\nexport type GrabStep = Extract<CalendarIntent, { kind: 'grabMove' | 'grabResize' }>\n\nexport interface CalendarGestureOptions<E extends CalendarEvent, G extends GestureBase> {\n  /** Every event as it is currently drawn, the ghost's original among them. */\n  events: () => readonly E[]\n  /** The event drawn under an id, for the handlers. */\n  eventOf: (id: CalendarEventId) => E | undefined\n  rootEl: Ref<HTMLElement | null>\n  /** The element the pointer is captured on once a press travels. */\n  captureEl: Ref<HTMLElement | null>\n  /** The box the cells occupy, which points and edges are read against. */\n  measureEl: Ref<HTMLElement | null>\n  /** How many columns that box is divided into. */\n  columns: () => number\n  /** Whether events may be moved at all. */\n  editable: () => boolean\n  /** The node every card points at to say how it can be moved. */\n  hintId: () => string\n  /** The step a grabbed event moves by, handed to the keyboard table. */\n  slotMinutes: () => number\n  edgeStepDelay: () => number\n  /** Whatever the grid's cells are made of, so paging under a still pointer re-places the card. */\n  layout: () => unknown\n  /** Works out where the gesture's event belongs from the pointer's last position. */\n  applyPoint: (state: G, rect: DOMRect) => void\n  /** Called on every pointer move past the threshold, after the edge watch, with both rects. */\n  onEdges?: (state: G, rootRect: DOMRect | undefined) => void\n  /** Everything else a gesture leaves running, dropped on every path out of one. */\n  onRelease?: () => void\n  /**\n   * A pointer gesture let go inside the calendar. Returns true when the grid has answered it\n   * itself, such as a slot drawn out, and nothing is left to drop.\n   */\n  onLetGo?: (state: G) => boolean\n  /** A gesture that moved, committed: the grid reports the new times. */\n  onDrop: (state: G) => void\n  /** What a keyboard grab of this event starts, or null when it cannot be grabbed. */\n  grab: (item: E) => GestureInit<G> | null\n  /** Applies one arrow step to a grabbed event. Returns false when the step means nothing here. */\n  onGrabStep: (state: G, step: GrabStep, item: E) => boolean\n  step: (direction: -1 | 1) => void\n  announce: (message: string) => void\n}\n\nexport function useCalendarGesture<E extends CalendarEvent, G extends GestureBase>(\n  options: CalendarGestureOptions<E, G>,\n) {\n  const m = useMessages()\n  const gesture = ref<G | null>(null) as Ref<G | null>\n\n  /** True while a card is being held by the keyboard rather than dragged by a pointer. */\n  const grabbing = computed(() => isGrabbed(gesture.value))\n\n  const isRtl = () => isElementRtl(options.measureEl.value)\n\n  /**\n   * The echo of where the gestured event began, so the reader can see what they are moving it\n   * FROM. A press that has not travelled yet produces none, or a click would flash a second\n   * card over the first.\n   */\n  const ghostEvent = computed<E | null>(() => {\n    const state = gesture.value\n    if (!state?.moved) return null\n    const original = options.events().find((event) => event.id === state.id)\n    return original ? ({ ...original, ...state.origin, id: ghostIdOf(state.id) } as E) : null\n  })\n\n  /** A list with the gestured event moved to wherever it is now, plus its echo. */\n  function withPreview(events: readonly E[]): E[] {\n    const state = gesture.value\n    if (!state) return [...events]\n    const moving = events.map((event) =>\n      event.id === state.id ? ({ ...event, ...state.preview } as E) : event,\n    )\n    return ghostEvent.value ? [...moving, ghostEvent.value] : moving\n  }\n\n  /**\n   * Set click suppression on pointerup, not pointercancel; clear it before every press guard\n   * and keyboard activation. Captured releases may never send their click to an event card.\n   */\n  let dragged = false\n\n  /** Closes the books on the previous gesture. */\n  function endLastGesture() {\n    dragged = false\n    if (grabbing.value) revertGrab()\n  }\n\n  /** Puts a keyboard grab back where it was taken from, writing nothing, and says so. */\n  function revertGrab() {\n    const state = gesture.value\n    if (!state) return\n    gesture.value = null\n    options.announce(m.value.calendar.reverted)\n    return state\n  }\n\n  /**\n   * A keyboard grab ends when the focus moves on to something else, the toolbar or another\n   * control.\n   */\n  function onFocusout(event: FocusEvent) {\n    const state = gesture.value\n    const next = event.relatedTarget as HTMLElement | null\n    if (!grabbing.value || !state || !next) return\n    const card = next.closest<HTMLElement>('.v-calendar-event')\n    if (card && card.dataset.eventId === String(state.id)) return\n    revertGrab()\n  }\n\n  /** Whether the gesture that just ended actually moved; asking lowers the flag. */\n  function consumeDrag() {\n    const was = dragged\n    dragged = false\n    return was\n  }\n\n  const edge = useEdgeStep(options.step, options.edgeStepDelay)\n\n  /** Which edge is counting down, as the attribute the stylesheet reads. */\n  const edgeCue = computed(() =>\n    edge.pending.value === -1 ? 'start' : edge.pending.value === 1 ? 'end' : undefined,\n  )\n\n  function release() {\n    edge.cancel()\n    options.onRelease?.()\n  }\n\n  /** Starts a gesture. */\n  function start(init: GestureInit<G>, rtl = isRtl()) {\n    gesture.value = {\n      ...init,\n      preview: { ...init.origin },\n      lastX: init.originX,\n      lastY: init.originY,\n      moved: false,\n      outside: false,\n      rtl,\n    } as G\n  }\n\n  /**\n   * Called when the press crosses the drag threshold, never at the press. The browser sends the\n   * `click` that follows a captured `pointerup` to the CAPTURE element, so a press captured at\n   * once reaches the scroller instead of the card or the cell under it: clicking an event would\n   * open nothing and clicking an empty slot would report nothing, on every calendar whose\n   * events can be moved or drawn.\n   */\n  function capture(pointerId: number) {\n    // @fallback\n    /*\n     * Synthetic pointer events may not have a capturable pointer; allow the gesture to continue\n     * within the element if capture fails.\n     */\n    try {\n      options.captureEl.value?.setPointerCapture(pointerId)\n    } catch {\n      /* Synthetic pointers cannot be captured. */\n    }\n  }\n\n  function reapply(state: G) {\n    const rect = options.measureEl.value?.getBoundingClientRect()\n    if (rect) options.applyPoint(state, rect)\n  }\n\n  function onPointermove(event: PointerEvent) {\n    const state = gesture.value\n    if (!state || state.pointerId !== event.pointerId) return\n\n    state.lastX = event.clientX\n    state.lastY = event.clientY\n\n    // Below the threshold nothing has happened yet. That is what keeps a click a click: the\n    // hand's tremor during a press would otherwise register as a one-pixel drag.\n    if (\n      !state.moved &&\n      Math.abs(event.clientX - state.originX) < DRAG_THRESHOLD &&\n      Math.abs(event.clientY - state.originY) < DRAG_THRESHOLD\n    ) {\n      return\n    }\n\n    if (!state.moved) capture(event.pointerId)\n    state.moved = true\n    const rootRect = options.rootEl.value?.getBoundingClientRect()\n    const rect = options.measureEl.value?.getBoundingClientRect()\n\n    /*\n     * Neither the placement nor the edge watch below is gated on it, and neither may become so.\n     * The card must keep following the pointer while it is out, which makes coming back in\n     * seamless, and paging must keep running, pushing past the edge being how one crosses into\n     * the next period.\n     */\n    state.outside = rootRect ? !pointWithin({ x: state.lastX, y: state.lastY }, rootRect) : false\n\n    if (!rect) return\n    options.applyPoint(state, rect)\n    edge.watchEdge(\n      inlineEdgeAt(\n        state.lastX,\n        gridGeometryOf(rect, options.columns(), state.rtl),\n        EDGE_BAND,\n        state.rtl,\n      ),\n    )\n    options.onEdges?.(state, rootRect)\n  }\n\n  function onPointerup(event: PointerEvent) {\n    const state = gesture.value\n    if (!state || state.pointerId !== event.pointerId) return\n    gesture.value = null\n    dragged = state.moved\n    release()\n\n    /*\n     * Nothing is announced: the pointer says nothing on a SUCCESSFUL drop either; `grabbed`,\n     * `dropped` and `reverted` belong to the keyboard grab, which has no pointer to show where\n     * the event went.\n     */\n    if (state.outside) return\n    if (options.onLetGo?.(state)) return\n    // A press that never travelled is an ordinary click, which the button's own click event is\n    // about to report. Writing anything here would move an event nobody dragged.\n    if (state.moved) options.onDrop(state)\n  }\n\n  /*\n   * The gesture was taken away; a system gesture, a context menu, the page starting to scroll.\n   * Nothing is written and nothing is announced: the card goes back to where the model still\n   * says it is.\n   */\n  function onPointercancel(event: PointerEvent) {\n    // Another pointer's cancel, a second finger starting to pan, is not this gesture's. A\n    // keyboard grab carries no pointer id, so no cancel can end it either.\n    if (gesture.value?.pointerId !== event.pointerId) return\n    abandon()\n  }\n\n  function abandon() {\n    gesture.value = null\n    release()\n  }\n\n  /*\n   * Its `pointerup` then lands outside and never reaches the bindings, so without this the\n   * gesture would outlive the press: a mouse keeps the same pointer id, and bringing it back\n   * over the calendar with the button up would pick the event up and carry it. A captured\n   * pointer never leaves, so a real drag is untouched.\n   */\n  function onPointerleave(event: PointerEvent) {\n    const state = gesture.value\n    if (!state || state.pointerId !== event.pointerId || state.moved) return\n    abandon()\n  }\n\n  /*\n   * Paging swaps the cells out from under a live drag, and the dragged event's day is then off\n   * screen; the card would vanish until the next pointer move, which never comes if the hand is\n   * holding still against the edge. Re-applying the last position once the new cells are\n   * rendered is what keeps the card under the pointer across the boundary.\n   */\n  watch(\n    options.layout,\n    () => {\n      const state = gesture.value\n      if (state?.moved) reapply(state)\n    },\n    { flush: 'post' },\n  )\n\n  /**\n   * The card is found by WALKING the cards rather than by building an attribute selector. An id\n   * belongs to the consumer, so it may hold a quote or a backslash a selector would need\n   * escaped, and `CSS.escape` cannot do that escaping here: jsdom defines no `CSS` object at\n   * all, so the call threw on every keyboard grab, from inside a `nextTick` where nothing could\n   * catch it; an unhandled rejection, which fails the run while every assertion still passes.\n   */\n  function refocusCard(id: CalendarEventId) {\n    void nextTick(() => {\n      // Searched from the view's root: the time grid's all-day bars sit in its sticky header,\n      // outside the box the cells occupy.\n      const cards = options.rootEl.value?.querySelectorAll<HTMLElement>('.v-calendar-event')\n      Array.from(cards ?? [])\n        .find((card) => card.dataset.eventId === String(id))\n        ?.focus()\n    })\n  }\n\n  /** Puts the focus on a cell by its id, once the render that made it tabbable has run. */\n  function focusCell(id: string, deferred = false, focusOptions?: FocusOptions) {\n    const move = () => document.getElementById(id)?.focus(focusOptions)\n    if (deferred) void nextTick(move)\n    else move()\n  }\n\n  /** The event a card stands for, read back off the attribute the card publishes. */\n  const idOfCard = (card: HTMLElement) => cardIdOf(card, (id) => options.eventOf(id) !== undefined)\n\n  /**\n   * A card answers a different table from the grid it sits in; that is what a grab mode IS.\n   * Without it the grid would offer a gesture the pointer alone could reach (WCAG 2.1.1).\n   */\n  function onCardKeydown(event: KeyboardEvent, card: HTMLElement) {\n    // Whatever click follows is this key's, never the end of an earlier drag.\n    dragged = false\n    const item = options.eventOf(idOfCard(card))\n    if (!item) return\n\n    const held = grabbing.value && gesture.value?.id === item.id\n    const state = held ? gesture.value! : null\n    const intent = calendarIntent(\n      event,\n      held ? 'grabbed' : 'event',\n      options.slotMinutes(),\n      state?.rtl ?? isRtl(),\n    )\n    if (!intent) return\n\n    if (!state) {\n      // An event that cannot be moved keeps a button's ordinary behaviour: Space presses it,\n      // which the card's click handler reports.\n      const init = intent.kind === 'grab' ? options.grab(item) : null\n      if (!init) return\n      /*\n       * Cancelling the keydown is what stops that press, so the keystroke that takes hold of\n       * the event does not open it too: without it every attempt to move something would fire\n       * the consumer's editor over it.\n       */\n      event.preventDefault()\n      start(init)\n      options.announce(m.value.calendar.grabbed)\n      return\n    }\n\n    event.preventDefault()\n\n    if (intent.kind === 'grabMove' || intent.kind === 'grabResize') {\n      if (!options.onGrabStep(state, intent, item)) return\n      state.moved = true\n      refocusCard(state.id)\n      return\n    }\n\n    if (intent.kind === 'activate') {\n      gesture.value = null\n      if (state.moved) options.onDrop(state)\n      options.announce(m.value.calendar.dropped)\n      refocusCard(state.id)\n      return\n    }\n\n    if (intent.kind === 'cancel') {\n      revertGrab()\n      refocusCard(state.id)\n    }\n  }\n\n  /**\n   * The five things every card is told about the gesture, bound with `v-bind` so the two grids\n   * cannot describe the same state in two different ways.\n   */\n  function cardState(id: CalendarEventId) {\n    const state = gesture.value\n    const mine = state !== null && state.id === id\n    return {\n      /*\n       * Only once the press has travelled. A dragged card takes no pointer events, so marked at\n       * the press it lets the release land on the cell beneath it: the click then goes to that\n       * cell, and clicking an event reports an empty slot instead of opening it.\n       */\n      dragging: mine && state.pointerId !== null && state.moved,\n      rejected: mine && state.outside,\n      grabbed: mine && state.pointerId === null,\n      hintId: options.editable() && !isGhostId(id) ? options.hintId() : undefined,\n      ghostOf: isGhostId(id) ? originalIdOf(id) : undefined,\n    }\n  }\n\n  return {\n    gesture,\n    grabbing,\n    ghostEvent,\n    withPreview,\n    edgeCue,\n    isRtl,\n    start,\n    reapply,\n    release,\n    endLastGesture,\n    consumeDrag,\n    onPointermove,\n    onPointerup,\n    onPointercancel,\n    onPointerleave,\n    onFocusout,\n    onCardKeydown,\n    refocusCard,\n    focusCell,\n    idOfCard,\n    cardState,\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"gesture.js","names":[],"sources":["../../../src/components/VCalendar/gesture.ts"],"sourcesContent":["// @keyboard @a11y @core\n/**\n * Share pointer and keyboard editing gestures across month and time-grid views; each view\n * supplies its own cell geometry.\n */\nimport { computed, nextTick, ref, watch } from 'vue'\nimport type { Ref } from 'vue'\n\nimport { isRtl as isElementRtl } from '../../utils/direction'\n\nimport { useMessages } from '../../i18n/state'\n\nimport { EDGE_BAND, useEdgeStep } from './edgeStep'\nimport { calendarIntent, type CalendarIntent } from './keyboard'\nimport { DRAG_THRESHOLD, inlineEdgeAt, pointWithin, type GridGeometry } from './layout'\nimport type { CalendarEvent, CalendarEventId, CalendarEventTimes } from './types'\n\n/**\n * The prefix marking the copy an event leaves behind at its old place while it is being\n * dragged.\n */\nconst GHOST_PREFIX = '__vectis-calendar-ghost__'\n\n/**\n * The id the ghost of a dragged event carries. It has to DIFFER from the event's own, or the\n * two would collide in every map the layout keys by id and only one would ever be drawn.\n */\nconst ghostIdOf = (id: CalendarEventId) => `${GHOST_PREFIX}${id}`\n/** The dragged event's own id, read back off its ghost's. */\nconst originalIdOf = (id: CalendarEventId) => String(id).slice(GHOST_PREFIX.length)\nconst isGhostId = (id: CalendarEventId) => String(id).startsWith(GHOST_PREFIX)\n\n/** The id a card belongs to, read back off the DOM. */\nfunction cardIdOf(card: HTMLElement, has: (id: CalendarEventId) => boolean) {\n  const raw = card.dataset.eventId ?? ''\n  return has(raw) ? raw : Number(raw)\n}\n\n/**\n * `inlineStart` is the edge the first column starts at, which is the RIGHT one in a\n * right-to-left page.\n */\nexport function gridGeometryOf(rect: DOMRect, columns: number, rtl: boolean): GridGeometry {\n  return {\n    top: rect.top,\n    height: rect.height,\n    inlineStart: rtl ? rect.right : rect.left,\n    inlineSize: rect.width,\n    columns,\n  }\n}\n\n/** The state every gesture carries, whatever each grid adds to it. */\nexport interface GestureBase {\n  id: CalendarEventId\n  /**\n   * Where the event was when the gesture began. Every pointer frame is computed from this and\n   * never from the frame before it, so a long drag cannot accumulate rounding drift.\n   */\n  origin: CalendarEventTimes\n  /** What the card shows right now. The model is not touched until the gesture ends. */\n  preview: CalendarEventTimes\n  /** The pointer holding the gesture, or null for a keyboard grab. */\n  pointerId: number | null\n  originX: number\n  originY: number\n  /**\n   * Where the pointer last was. Two things move the calendar UNDER a still pointer: paging at\n   * an edge, and auto-scrolling. Each has to work out afresh what the pointer is now over.\n   */\n  lastX: number\n  lastY: number\n  /** Whether it moved past the threshold, which separates a drag from a click. */\n  moved: boolean\n  /**\n   * Whether the pointer is off the calendar altogether: over the toolbar, or over the page\n   * beside it. A KEYBOARD grab can never set it, and structurally rather than by a guard:\n   * `onPointermove` is the only writer, and it returns on the id mismatch first: a grab's\n   * `pointerId` is null, which no real pointer's id ever equals.\n   */\n  outside: boolean\n  /**\n   * The reading direction, read once when the gesture begins. It cannot change under a live\n   * drag, and asking the document on every frame costs a style resolution each time.\n   */\n  rtl: boolean\n}\n\n/** What a grid hands over to start a gesture; the rest is filled in here. */\nexport type GestureInit<G extends GestureBase> = Omit<\n  G,\n  'preview' | 'lastX' | 'lastY' | 'moved' | 'outside' | 'rtl'\n>\n\n/**\n * A gesture held by the KEYBOARD rather than by a pointer: grabbed with Space, and waiting for\n * the arrows to move it.\n */\nconst isGrabbed = (state: GestureBase | null) => state !== null && state.pointerId === null\n\n/** The two intents that move a grabbed event, which only a grid can turn into times. */\nexport type GrabStep = Extract<CalendarIntent, { kind: 'grabMove' | 'grabResize' }>\n\nexport interface CalendarGestureOptions<E extends CalendarEvent, G extends GestureBase> {\n  /** Every event as it is currently drawn, the ghost's original among them. */\n  events: () => readonly E[]\n  /** The event drawn under an id, for the handlers. */\n  eventOf: (id: CalendarEventId) => E | undefined\n  rootEl: Ref<HTMLElement | null>\n  /** The element the pointer is captured on once a press travels. */\n  captureEl: Ref<HTMLElement | null>\n  /** The box the cells occupy, which points and edges are read against. */\n  measureEl: Ref<HTMLElement | null>\n  /** How many columns that box is divided into. */\n  columns: () => number\n  /** Whether events may be moved at all. */\n  editable: () => boolean\n  /** The node every card points at to say how it can be moved. */\n  hintId: () => string\n  /** The step a grabbed event moves by, handed to the keyboard table. */\n  slotMinutes: () => number\n  edgeStepDelay: () => number\n  /** Whatever the grid's cells are made of, so paging under a still pointer re-places the card. */\n  layout: () => unknown\n  /** Works out where the gesture's event belongs from the pointer's last position. */\n  applyPoint: (state: G, rect: DOMRect) => void\n  /** Called on every pointer move past the threshold, after the edge watch, with both rects. */\n  onEdges?: (state: G, rootRect: DOMRect | undefined) => void\n  /** Everything else a gesture leaves running, dropped on every path out of one. */\n  onRelease?: () => void\n  /**\n   * A pointer gesture let go inside the calendar. Returns true when the grid has answered it\n   * itself, such as a slot drawn out, and nothing is left to drop.\n   */\n  onLetGo?: (state: G) => boolean\n  /** A gesture that moved, committed: the grid reports the new times. */\n  onDrop: (state: G) => void\n  /** What a keyboard grab of this event starts, or null when it cannot be grabbed. */\n  grab: (item: E) => GestureInit<G> | null\n  /** Applies one arrow step to a grabbed event. Returns false when the step means nothing here. */\n  onGrabStep: (state: G, step: GrabStep, item: E) => boolean\n  step: (direction: -1 | 1) => void\n  announce: (message: string) => void\n}\n\nexport function useCalendarGesture<E extends CalendarEvent, G extends GestureBase>(\n  options: CalendarGestureOptions<E, G>,\n) {\n  const m = useMessages()\n  const gesture = ref<G | null>(null) as Ref<G | null>\n\n  /** True while a card is being held by the keyboard rather than dragged by a pointer. */\n  const grabbing = computed(() => isGrabbed(gesture.value))\n\n  const isRtl = () => isElementRtl(options.measureEl.value)\n\n  /**\n   * The echo of where the gestured event began, so the reader can see what they are moving it\n   * FROM. A press that has not travelled yet produces none, or a click would flash a second\n   * card over the first.\n   */\n  const ghostEvent = computed<E | null>(() => {\n    const state = gesture.value\n    if (!state?.moved) return null\n    const original = options.events().find((event) => event.id === state.id)\n    return original ? ({ ...original, ...state.origin, id: ghostIdOf(state.id) } as E) : null\n  })\n\n  /** A list with the gestured event moved to wherever it is now, plus its echo. */\n  function withPreview(events: readonly E[]): E[] {\n    const state = gesture.value\n    if (!state) return [...events]\n    const moving = events.map((event) =>\n      event.id === state.id ? ({ ...event, ...state.preview } as E) : event,\n    )\n    return ghostEvent.value ? [...moving, ghostEvent.value] : moving\n  }\n\n  /**\n   * Set click suppression on pointerup, not pointercancel; clear it before every press guard\n   * and keyboard activation. Captured releases may never send their click to an event card.\n   */\n  let dragged = false\n\n  /** Closes the books on the previous gesture. */\n  function endLastGesture() {\n    dragged = false\n    if (grabbing.value) revertGrab()\n  }\n\n  /** Puts a keyboard grab back where it was taken from, writing nothing, and says so. */\n  function revertGrab() {\n    const state = gesture.value\n    if (!state) return\n    gesture.value = null\n    options.announce(m.value.calendar.reverted)\n    return state\n  }\n\n  /**\n   * A keyboard grab ends when the focus moves on to something else, the toolbar or another\n   * control.\n   */\n  function onFocusout(event: FocusEvent) {\n    const state = gesture.value\n    const next = event.relatedTarget as HTMLElement | null\n    if (!grabbing.value || !state || !next) return\n    const card = next.closest<HTMLElement>('.v-calendar-event')\n    if (card && card.dataset.eventId === String(state.id)) return\n    revertGrab()\n  }\n\n  /** Whether the gesture that just ended actually moved; asking lowers the flag. */\n  function consumeDrag() {\n    const was = dragged\n    dragged = false\n    return was\n  }\n\n  const edge = useEdgeStep(options.step, options.edgeStepDelay)\n\n  /** Which edge is counting down, as the attribute the stylesheet reads. */\n  const edgeCue = computed(() =>\n    edge.pending.value === -1 ? 'start' : edge.pending.value === 1 ? 'end' : undefined,\n  )\n\n  function release() {\n    edge.cancel()\n    options.onRelease?.()\n  }\n\n  /** Starts a gesture. */\n  function start(init: GestureInit<G>, rtl = isRtl()) {\n    gesture.value = {\n      ...init,\n      preview: { ...init.origin },\n      lastX: init.originX,\n      lastY: init.originY,\n      moved: false,\n      outside: false,\n      rtl,\n    } as G\n  }\n\n  /**\n   * Called when the press crosses the drag threshold, never at the press. The browser sends the\n   * `click` that follows a captured `pointerup` to the CAPTURE element, so a press captured at\n   * once reaches the scroller instead of the card or the cell under it: clicking an event would\n   * open nothing and clicking an empty slot would report nothing, on every calendar whose\n   * events can be moved or drawn.\n   */\n  function capture(pointerId: number) {\n    // @fallback\n    /*\n     * Synthetic pointer events may not have a capturable pointer; allow the gesture to continue\n     * within the element if capture fails.\n     */\n    try {\n      options.captureEl.value?.setPointerCapture(pointerId)\n    } catch {\n      /* Synthetic pointers cannot be captured. */\n    }\n  }\n\n  function reapply(state: G) {\n    const rect = options.measureEl.value?.getBoundingClientRect()\n    if (rect) options.applyPoint(state, rect)\n  }\n\n  function onPointermove(event: PointerEvent) {\n    const state = gesture.value\n    if (!state || state.pointerId !== event.pointerId) return\n\n    state.lastX = event.clientX\n    state.lastY = event.clientY\n\n    // Below the threshold nothing has happened yet. That is what keeps a click a click: the\n    // hand's tremor during a press would otherwise register as a one-pixel drag.\n    if (\n      !state.moved &&\n      Math.abs(event.clientX - state.originX) < DRAG_THRESHOLD &&\n      Math.abs(event.clientY - state.originY) < DRAG_THRESHOLD\n    ) {\n      return\n    }\n\n    if (!state.moved) capture(event.pointerId)\n    state.moved = true\n    const rootRect = options.rootEl.value?.getBoundingClientRect()\n    const rect = options.measureEl.value?.getBoundingClientRect()\n\n    /*\n     * Neither the placement nor the edge watch below is gated on it, and neither may become so.\n     * The card must keep following the pointer while it is out, which makes coming back in\n     * seamless, and paging must keep running, pushing past the edge being how one crosses into\n     * the next period.\n     */\n    state.outside = rootRect ? !pointWithin({ x: state.lastX, y: state.lastY }, rootRect) : false\n\n    if (!rect) return\n    options.applyPoint(state, rect)\n    edge.watchEdge(\n      inlineEdgeAt(\n        state.lastX,\n        gridGeometryOf(rect, options.columns(), state.rtl),\n        EDGE_BAND,\n        state.rtl,\n      ),\n    )\n    options.onEdges?.(state, rootRect)\n  }\n\n  function onPointerup(event: PointerEvent) {\n    const state = gesture.value\n    if (!state || state.pointerId !== event.pointerId) return\n    gesture.value = null\n    dragged = state.moved\n    release()\n\n    /*\n     * Nothing is announced: the pointer says nothing on a SUCCESSFUL drop either; `grabbed`,\n     * `dropped` and `reverted` belong to the keyboard grab, which has no pointer to show where\n     * the event went.\n     */\n    if (state.outside) return\n    if (options.onLetGo?.(state)) return\n    // A press that never travelled is an ordinary click, which the button's own click event is\n    // about to report. Writing anything here would move an event nobody dragged.\n    if (state.moved) options.onDrop(state)\n  }\n\n  /*\n   * The gesture was taken away; a system gesture, a context menu, the page starting to scroll.\n   * Nothing is written and nothing is announced: the card goes back to where the model still\n   * says it is.\n   */\n  function onPointercancel(event: PointerEvent) {\n    // Another pointer's cancel, a second finger starting to pan, is not this gesture's. A\n    // keyboard grab carries no pointer id, so no cancel can end it either.\n    if (gesture.value?.pointerId !== event.pointerId) return\n    abandon()\n  }\n\n  function abandon() {\n    gesture.value = null\n    release()\n  }\n\n  /*\n   * Its `pointerup` then lands outside and never reaches the bindings, so without this the\n   * gesture would outlive the press: a mouse keeps the same pointer id, and bringing it back\n   * over the calendar with the button up would pick the event up and carry it. A captured\n   * pointer never leaves, so a real drag is untouched.\n   */\n  function onPointerleave(event: PointerEvent) {\n    const state = gesture.value\n    if (!state || state.pointerId !== event.pointerId || state.moved) return\n    abandon()\n  }\n\n  /*\n   * Paging swaps the cells out from under a live drag, and the dragged event's day is then off\n   * screen; the card would vanish until the next pointer move, which never comes if the hand is\n   * holding still against the edge. Re-applying the last position once the new cells are\n   * rendered is what keeps the card under the pointer across the boundary.\n   */\n  watch(\n    options.layout,\n    () => {\n      const state = gesture.value\n      if (state?.moved) reapply(state)\n    },\n    { flush: 'post' },\n  )\n\n  /**\n   * The card is found by WALKING the cards rather than by building an attribute selector. An id\n   * belongs to the consumer, so it may hold a quote or a backslash a selector would need\n   * escaped, and `CSS.escape` cannot do that escaping here: jsdom defines no `CSS` object at\n   * all, so the call threw on every keyboard grab, from inside a `nextTick` where nothing could\n   * catch it; an unhandled rejection, which fails the run while every assertion still passes.\n   */\n  function refocusCard(id: CalendarEventId) {\n    void nextTick(() => {\n      // Searched from the view's root: the time grid's all-day bars sit in its sticky header,\n      // outside the box the cells occupy.\n      const cards = options.rootEl.value?.querySelectorAll<HTMLElement>('.v-calendar-event')\n      Array.from(cards ?? [])\n        .find((card) => card.dataset.eventId === String(id))\n        ?.focus()\n    })\n  }\n\n  /** Puts the focus on a cell by its id, once the render that made it tabbable has run. */\n  function focusCell(id: string, deferred = false, focusOptions?: FocusOptions) {\n    const move = () => document.getElementById(id)?.focus(focusOptions)\n    if (deferred) void nextTick(move)\n    else move()\n  }\n\n  /** The event a card stands for, read back off the attribute the card publishes. */\n  const idOfCard = (card: HTMLElement) => cardIdOf(card, (id) => options.eventOf(id) !== undefined)\n\n  /**\n   * A card answers a different table from the grid it sits in; that is what a grab mode IS.\n   * Without it the grid would offer a gesture the pointer alone could reach (WCAG 2.1.1).\n   */\n  function onCardKeydown(event: KeyboardEvent, card: HTMLElement) {\n    // Whatever click follows is this key's, never the end of an earlier drag.\n    dragged = false\n    const item = options.eventOf(idOfCard(card))\n    if (!item) return\n\n    const held = grabbing.value && gesture.value?.id === item.id\n    const state = held ? gesture.value! : null\n    const intent = calendarIntent(\n      event,\n      held ? 'grabbed' : 'event',\n      options.slotMinutes(),\n      state?.rtl ?? isRtl(),\n    )\n    if (!intent) return\n\n    if (!state) {\n      // An event that cannot be moved keeps a button's ordinary behaviour: Space presses it,\n      // which the card's click handler reports.\n      const init = intent.kind === 'grab' ? options.grab(item) : null\n      if (!init) return\n      /*\n       * Cancelling the keydown is what stops that press, so the keystroke that takes hold of\n       * the event does not open it too: without it every attempt to move something would fire\n       * the consumer's editor over it.\n       */\n      event.preventDefault()\n      start(init)\n      options.announce(m.value.calendar.grabbed)\n      return\n    }\n\n    event.preventDefault()\n\n    if (intent.kind === 'grabMove' || intent.kind === 'grabResize') {\n      if (!options.onGrabStep(state, intent, item)) return\n      state.moved = true\n      refocusCard(state.id)\n      return\n    }\n\n    if (intent.kind === 'activate') {\n      gesture.value = null\n      if (state.moved) options.onDrop(state)\n      options.announce(m.value.calendar.dropped)\n      refocusCard(state.id)\n      return\n    }\n\n    if (intent.kind === 'cancel') {\n      revertGrab()\n      refocusCard(state.id)\n    }\n  }\n\n  /**\n   * The five things every card is told about the gesture, bound with `v-bind` so the two grids\n   * cannot describe the same state in two different ways.\n   */\n  function cardState(id: CalendarEventId) {\n    const state = gesture.value\n    const mine = state !== null && state.id === id\n    return {\n      /*\n       * Only once the press has travelled. A dragged card takes no pointer events, so marked at\n       * the press it lets the release land on the cell beneath it: the click then goes to that\n       * cell, and clicking an event reports an empty slot instead of opening it.\n       */\n      dragging: mine && state.pointerId !== null && state.moved,\n      rejected: mine && state.outside,\n      grabbed: mine && state.pointerId === null,\n      hintId: options.editable() && !isGhostId(id) ? options.hintId() : undefined,\n      ghostOf: isGhostId(id) ? originalIdOf(id) : undefined,\n    }\n  }\n\n  return {\n    gesture,\n    grabbing,\n    ghostEvent,\n    withPreview,\n    edgeCue,\n    isRtl,\n    start,\n    reapply,\n    release,\n    endLastGesture,\n    consumeDrag,\n    onPointermove,\n    onPointerup,\n    onPointercancel,\n    onPointerleave,\n    onFocusout,\n    onCardKeydown,\n    refocusCard,\n    focusCell,\n    idOfCard,\n    cardState,\n  }\n}\n"],"mappings":"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"}

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

@@ -37,6 +37,8 @@ export interface CalendarEvent {
 export type CalendarView = 'day' | '4days' | 'week' | 'month' | 'year' | 'custom';
 /** Whether times are written on a twelve or a twenty-four hour clock. */
 export type CalendarFormat = HourFormat;
+/** How the view is set off from the page: nothing, a border, a shadow, or a muted fill. */
+export type CalendarVariant = 'flat' | 'outline' | 'elevated' | 'filled';
 /**
  * The shape an event's card takes: a block, which fills the box the calendar gives it and
  * can show a second line, or a chip, one line high in a row of others.

package/dist/components/VCard/VCard.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-card{--card-padding:var(--vectis-space-4);--card-gap:var(--vectis-space-3);border-radius:var(--vectis-radius-surface);background:var(--vectis-color-surface);color:var(--vectis-color-text);font-family:var(--vectis-text-family);font-size:var(--vectis-text-body-md-size);font-weight:var(--vectis-text-body-md-weight);line-height:var(--vectis-text-body-md-leading);transition:border-color var(--vectis-duration-fast) var(--vectis-ease-default), box-shadow var(--vectis-duration-fast) var(--vectis-ease-default), background-color var(--vectis-duration-fast) var(--vectis-ease-default);border:1px solid #0000;flex-direction:column;display:flex;position:relative;overflow:clip}.v-card[data-size=sm]{--card-padding:var(--vectis-space-3);--card-gap:var(--vectis-space-2)}.v-card[data-size=lg]{--card-padding:var(--vectis-space-6);--card-gap:var(--vectis-space-4)}.v-card[data-variant=flat]{background:0 0}.v-card[data-variant=outline]{border-color:var(--vectis-color-border)}.v-card[data-variant=elevated]{background:var(--vectis-color-surface-raised);box-shadow:var(--vectis-shadow-sm)}.v-card[data-variant=filled]{background:var(--vectis-color-surface-muted)}.v-card[data-orientation=horizontal]{flex-flow:wrap}.v-card[data-orientation=horizontal]>.v-card-media{flex:1 1 var(--vectis-control-size-card-media)}.v-card[data-orientation=horizontal]>.v-card-content{flex:999 1 var(--vectis-control-size-card-body-min)}.v-card-media>:is(img,video,picture,svg,iframe){object-fit:cover;block-size:100%;inline-size:100%;display:block}.v-card-media>.v-skeleton-loader{block-size:100%;min-block-size:var(--vectis-control-size-skeleton-surface)}.v-card-content{gap:var(--card-gap);min-inline-size:0;padding:var(--card-padding);flex-direction:column;flex:1;display:flex}.v-card-header{flex-direction:column;display:flex}.v-card-title{font-size:var(--vectis-text-heading-4-size);font-weight:var(--vectis-text-heading-4-weight);line-height:var(--vectis-text-heading-4-leading)}.v-card-subtitle{color:var(--vectis-color-text-muted);font-size:var(--vectis-text-body-sm-size);font-weight:var(--vectis-text-body-sm-weight);line-height:var(--vectis-text-body-sm-leading)}.v-card-footer{align-items:center;gap:var(--vectis-space-2);flex-wrap:wrap;margin-block-start:auto;display:flex}.v-card-link{color:inherit;outline:none;text-decoration:none}.v-card-link:after{content:"";position:absolute;inset:0}.v-card[data-interactive] :is(a[href],button,input,select,textarea,summary,label,[tabindex]):not(.v-card-link){z-index:1;position:relative}.v-card:has(.v-card-link:focus-visible){outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-card[data-interactive][data-variant=flat]:not([data-disabled]):hover{background:var(--vectis-color-surface-muted)}.v-card[data-interactive][data-variant=outline]:not([data-disabled]):hover{border-color:var(--vectis-color-border-strong)}.v-card[data-interactive][data-variant=elevated]:not([data-disabled]):hover{box-shadow:var(--vectis-shadow-md)}.v-card[data-interactive][data-variant=filled]:not([data-disabled]):hover{background:color-mix(in oklab, var(--vectis-color-surface-muted), var(--vectis-color-text) 4%)}.v-card[data-interactive]:not([data-disabled]):hover .v-card-link{text-decoration:underline}.v-card[data-disabled] .v-card-link{color:var(--vectis-color-text-subtle);cursor:not-allowed}.v-card[data-disabled] .v-card-media{opacity:.5}@media (prefers-reduced-motion:reduce){.v-card{transition:none}}}

package/dist/components/VCard/VCard.d.ts

@@ -0,0 +1,87 @@
+/** How the card is set off from the page: nothing, a border, a shadow, or a muted fill. */
+export type CardVariant = 'flat' | 'outline' | 'elevated' | 'filled';
+/** Whether the media sits above the content or beside it. */
+export type CardOrientation = 'vertical' | 'horizontal';
+/** How much room the card leaves around and between its parts. */
+export type CardSize = 'sm' | 'md' | 'lg';
+/** The heading level of the title, when it should be part of the page outline. */
+export type CardHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+interface CardProps {
+    /**
+     * How the card is set off from the page: nothing at all (`flat`), a border (`outline`, the
+     * default), a shadow over a raised surface (`elevated`), or a muted fill with no border
+     * (`filled`).
+     */
+    variant?: CardVariant;
+    /**
+     * Where the `#media` slot sits: above the content (`vertical`, the default), or at its start
+     * (`horizontal`). A horizontal card puts the media back above the content when it is too
+     * narrow for both side by side.
+     */
+    orientation?: CardOrientation;
+    /** The padding of the card and the gaps between its parts. */
+    size?: CardSize;
+    /** The title of the card. With `href`, it is the text of the card's link. */
+    title?: string;
+    /** A line under the title. */
+    subtitle?: string;
+    /**
+     * Renders the title as a heading of this level, so that the card takes its place in the
+     * page outline. Left out, the title is a paragraph.
+     */
+    headingLevel?: CardHeadingLevel;
+    /**
+     * Makes the whole card a link to this address. The link is the title, whose clickable area
+     * covers the card; buttons and links inside the card remain separate targets. It requires
+     * `title`.
+     */
+    href?: string;
+    /**
+     * Makes a linked card unusable: the link loses its address and is marked disabled, and the
+     * title and media are dimmed. Controls in the slots are not affected.
+     */
+    disabled?: boolean;
+    /**
+     * Replaces the content with placeholders, and the media too when there is one. The footer
+     * is hidden until the content arrives.
+     */
+    loading?: boolean;
+    /**
+     * Announces the loading to screen readers with this text. Left out, a loading card is
+     * silent, so that a grid of them does not read out the same word a dozen times.
+     */
+    loadingText?: string;
+    /** The element the card is rendered as: `article`, `section` or `li` instead of a `div`. */
+    as?: string;
+}
+type __VLS_Slots = {
+    /** The body of the card. */
+    default?(): unknown;
+    /** An image, a video or an illustration, drawn edge to edge. */
+    media?(): unknown;
+    /** Replaces the title and subtitle with content of your own. A linked card loses its link. */
+    header?(): unknown;
+    /** Actions at the foot of the card, pushed to the bottom when the card is stretched. */
+    footer?(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<CardProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CardProps> & Readonly<{}>, {
+    loading: boolean;
+    size: CardSize;
+    title: string;
+    variant: CardVariant;
+    href: string;
+    disabled: boolean;
+    subtitle: string;
+    as: string;
+    orientation: CardOrientation;
+    loadingText: string;
+    headingLevel: CardHeadingLevel;
+}, {}, {}, {}, 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/VCard/VCard.js

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

package/dist/components/VCard/VCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VCard.js","names":[],"sources":["../../../src/components/VCard/VCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * A clickable card is one real link, its title, stretched over the card by a pseudo-element:\n * the reader hears one link named by the title, and the controls inside the card stay separate\n * targets. Wrapping the whole card in an `<a>` would name the link with all its text and forbid\n * the buttons it holds.\n */\n\nimport { computed, watchEffect } from 'vue'\n\nimport VSkeletonLoader from '../VSkeletonLoader/VSkeletonLoader.vue'\nimport { useInertLink } from '../../composables/useInertLink'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { isDev } from '../../utils/env'\n\n/** How the card is set off from the page: nothing, a border, a shadow, or a muted fill. */\nexport type CardVariant = 'flat' | 'outline' | 'elevated' | 'filled'\n/** Whether the media sits above the content or beside it. */\nexport type CardOrientation = 'vertical' | 'horizontal'\n/** How much room the card leaves around and between its parts. */\nexport type CardSize = 'sm' | 'md' | 'lg'\n/** The heading level of the title, when it should be part of the page outline. */\nexport type CardHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6\n\ninterface CardProps {\n  /**\n   * How the card is set off from the page: nothing at all (`flat`), a border (`outline`, the\n   * default), a shadow over a raised surface (`elevated`), or a muted fill with no border\n   * (`filled`).\n   */\n  variant?: CardVariant\n  /**\n   * Where the `#media` slot sits: above the content (`vertical`, the default), or at its start\n   * (`horizontal`). A horizontal card puts the media back above the content when it is too\n   * narrow for both side by side.\n   */\n  orientation?: CardOrientation\n  /** The padding of the card and the gaps between its parts. */\n  size?: CardSize\n  /** The title of the card. With `href`, it is the text of the card's link. */\n  title?: string\n  /** A line under the title. */\n  subtitle?: string\n  /**\n   * Renders the title as a heading of this level, so that the card takes its place in the\n   * page outline. Left out, the title is a paragraph.\n   */\n  headingLevel?: CardHeadingLevel\n  /**\n   * Makes the whole card a link to this address. The link is the title, whose clickable area\n   * covers the card; buttons and links inside the card remain separate targets. It requires\n   * `title`.\n   */\n  href?: string\n  /**\n   * Makes a linked card unusable: the link loses its address and is marked disabled, and the\n   * title and media are dimmed. Controls in the slots are not affected.\n   */\n  disabled?: boolean\n  /**\n   * Replaces the content with placeholders, and the media too when there is one. The footer\n   * is hidden until the content arrives.\n   */\n  loading?: boolean\n  /**\n   * Announces the loading to screen readers with this text. Left out, a loading card is\n   * silent, so that a grid of them does not read out the same word a dozen times.\n   */\n  loadingText?: string\n  /** The element the card is rendered as: `article`, `section` or `li` instead of a `div`. */\n  as?: string\n}\n\nconst props = withDefaults(defineProps<CardProps>(), {\n  variant: 'outline',\n  orientation: 'vertical',\n  size: 'md',\n  title: undefined,\n  subtitle: undefined,\n  headingLevel: undefined,\n  href: undefined,\n  disabled: false,\n  loading: false,\n  loadingText: undefined,\n  as: 'div',\n})\n\nconst slots = defineSlots<{\n  /** The body of the card. */\n  default?(): unknown\n  /** An image, a video or an illustration, drawn edge to edge. */\n  media?(): unknown\n  /** Replaces the title and subtitle with content of your own. A linked card loses its link. */\n  header?(): unknown\n  /** Actions at the foot of the card, pushed to the bottom when the card is stretched. */\n  footer?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\n/*\n * A linked card follows the wrapper-root pattern: the link is the element that acts, so it\n * receives the forwarded attributes (`target`, `rel`, a router's click handler) and the root\n * keeps only `class` and `style`. A card that is not a link is a plain container and keeps all\n * of them.\n */\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst {\n  isLink,\n  isInertLink,\n  linkHref,\n  attrs: linkAttrs,\n} = useInertLink({\n  href: () => props.href,\n  inert: () => props.disabled,\n  attrs: () => forwardedAttrs.value,\n})\n\nconst rootAttrs = computed(() =>\n  isLink.value ? { class: rootClass.value, style: rootStyle.value } : attrs,\n)\n\nconst titleTag = computed(() => (props.headingLevel ? `h${props.headingLevel}` : 'p'))\n\n// @devwarn\n// The link is the title: without one, the card would hold an empty link.\nif (isDev) {\n  watchEffect(() => {\n    if (props.href !== undefined && (!props.title || slots.header))\n      console.warn(\n        '[VCard] `href` needs the `title` prop, which becomes the text of the link; the `#header` slot replaces it and drops the link.',\n      )\n  })\n}\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"rootAttrs\"\n    class=\"v-card\"\n    :data-variant=\"variant\"\n    :data-orientation=\"orientation\"\n    :data-size=\"size\"\n    :data-interactive=\"isLink ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :aria-busy=\"loading || undefined\"\n  >\n    <div v-if=\"$slots.media\" class=\"v-card-media\">\n      <VSkeletonLoader v-if=\"loading\" shape=\"surface\" animation=\"pulse\" />\n      <slot v-else name=\"media\" />\n    </div>\n    <div class=\"v-card-content\">\n      <template v-if=\"loading\">\n        <VSkeletonLoader v-if=\"title || subtitle || $slots.header\" width=\"60%\" />\n        <VSkeletonLoader :lines=\"3\" :label=\"loadingText\" />\n      </template>\n      <template v-else>\n        <div v-if=\"$slots.header || title || subtitle\" class=\"v-card-header\">\n          <slot name=\"header\">\n            <component :is=\"titleTag\" v-if=\"title\" class=\"v-card-title\">\n              <a\n                v-if=\"isLink\"\n                class=\"v-card-link\"\n                :aria-disabled=\"isInertLink ? 'true' : undefined\"\n                v-bind=\"linkAttrs\"\n                :href=\"linkHref\"\n                >{{ title }}</a\n              >\n              <template v-else>{{ title }}</template>\n            </component>\n            <p v-if=\"subtitle\" class=\"v-card-subtitle\">{{ subtitle }}</p>\n          </slot>\n        </div>\n        <div v-if=\"$slots.default\" class=\"v-card-body\">\n          <slot />\n        </div>\n        <div v-if=\"$slots.footer\" class=\"v-card-footer\">\n          <slot name=\"footer\" />\n        </div>\n      </template>\n    </div>\n  </component>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-card {\n    --card-padding: var(--vectis-space-4);\n    --card-gap: var(--vectis-space-3);\n\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    /* Clips the media to the rounded corners, whichever side it ends up on. */\n    overflow: clip;\n    /* Transparent rather than absent: forced colours paint it, and the card keeps an edge. */\n    border: 1px solid transparent;\n    border-radius: var(--vectis-radius-surface);\n    background: var(--vectis-color-surface);\n    color: var(--vectis-color-text);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-body-md-size);\n    font-weight: var(--vectis-text-body-md-weight);\n    line-height: var(--vectis-text-body-md-leading);\n    transition:\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default),\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-card[data-size='sm'] {\n    --card-padding: var(--vectis-space-3);\n    --card-gap: var(--vectis-space-2);\n  }\n\n  .v-card[data-size='lg'] {\n    --card-padding: var(--vectis-space-6);\n    --card-gap: var(--vectis-space-4);\n  }\n\n  .v-card[data-variant='flat'] {\n    background: transparent;\n  }\n\n  .v-card[data-variant='outline'] {\n    border-color: var(--vectis-color-border);\n  }\n\n  .v-card[data-variant='elevated'] {\n    background: var(--vectis-color-surface-raised);\n    box-shadow: var(--vectis-shadow-sm);\n  }\n\n  .v-card[data-variant='filled'] {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  /*\n   * Side by side without a container query: the content's flex basis is its narrowest\n   * comfortable width, and its huge grow factor keeps the media at its own basis. When the card\n   * cannot fit both bases on one line, the content wraps under the media and both take the\n   * full width. A container query would need size containment on the card, which collapses it\n   * to nothing in any parent that sizes it from its content.\n   */\n  .v-card[data-orientation='horizontal'] {\n    flex-flow: row wrap;\n  }\n\n  .v-card[data-orientation='horizontal'] > .v-card-media {\n    flex: 1 1 var(--vectis-control-size-card-media);\n  }\n\n  .v-card[data-orientation='horizontal'] > .v-card-content {\n    flex: 999 1 var(--vectis-control-size-card-body-min);\n  }\n\n  .v-card-media > :is(img, video, picture, svg, iframe) {\n    display: block;\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: cover;\n  }\n\n  /*\n   * The placeholder has no intrinsic height: the percentage fills a media stretched beside the\n   * content, and the minimum gives it the skeleton's surface height everywhere else.\n   */\n  .v-card-media > .v-skeleton-loader {\n    block-size: 100%;\n    min-block-size: var(--vectis-control-size-skeleton-surface);\n  }\n\n  .v-card-content {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--card-gap);\n    min-inline-size: 0;\n    padding: var(--card-padding);\n  }\n\n  .v-card-header {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .v-card-title {\n    font-size: var(--vectis-text-heading-4-size);\n    font-weight: var(--vectis-text-heading-4-weight);\n    line-height: var(--vectis-text-heading-4-leading);\n  }\n\n  .v-card-subtitle {\n    color: var(--vectis-color-text-muted);\n    font-size: var(--vectis-text-body-sm-size);\n    font-weight: var(--vectis-text-body-sm-weight);\n    line-height: var(--vectis-text-body-sm-leading);\n  }\n\n  /* Pushed to the bottom, so that cards stretched to one height line their actions up. */\n  .v-card-footer {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--vectis-space-2);\n    margin-block-start: auto;\n  }\n\n  .v-card-link {\n    color: inherit;\n    text-decoration: none;\n    outline: none;\n  }\n\n  /* The link's hit area: the whole card, which is its positioned ancestor. */\n  .v-card-link::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n  }\n\n  /*\n   * The controls inside a linked card are lifted above the stretched link so that they stay\n   * their own targets. Consumer styles are unlayered and still override this positioning.\n   */\n  .v-card[data-interactive]\n    :is(a[href], button, input, select, textarea, summary, label, [tabindex]):not(.v-card-link) {\n    position: relative;\n    z-index: 1;\n  }\n\n  /* The link draws no ring of its own; the card does, around the area that is clicked. */\n  .v-card:has(.v-card-link: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  .v-card[data-interactive][data-variant='flat']:not([data-disabled]):hover {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-card[data-interactive][data-variant='outline']:not([data-disabled]):hover {\n    border-color: var(--vectis-color-border-strong);\n  }\n\n  .v-card[data-interactive][data-variant='elevated']:not([data-disabled]):hover {\n    box-shadow: var(--vectis-shadow-md);\n  }\n\n  .v-card[data-interactive][data-variant='filled']:not([data-disabled]):hover {\n    background: color-mix(in oklab, var(--vectis-color-surface-muted), var(--vectis-color-text) 4%);\n  }\n\n  .v-card[data-interactive]:not([data-disabled]):hover .v-card-link {\n    text-decoration: underline;\n  }\n\n  /*\n   * Only the link, which carries `aria-disabled`, and the media are dimmed: the rest of the\n   * text stays readable, since it is still content rather than a control.\n   */\n  .v-card[data-disabled] .v-card-link {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  .v-card[data-disabled] .v-card-media {\n    opacity: 0.5;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-card {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VCard/VCard.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,103 @@
+import { isDev as e } from "../../utils/env.js";
+import { useInertLink as t } from "../../composables/useInertLink.js";
+import { useRootAttrs as n } from "../../composables/useRootAttrs.js";
+import r from "../VSkeletonLoader/VSkeletonLoader.js";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, mergeProps as p, openBlock as m, renderSlot as h, resolveDynamicComponent as g, toDisplayString as _, unref as v, useSlots as y, watchEffect as b, withCtx as x } from "vue";
+//#region src/components/VCard/VCard.vue?vue&type=script&setup=true&lang.ts
+var S = {
+	key: 0,
+	class: "v-card-media"
+}, C = { class: "v-card-content" }, w = {
+	key: 0,
+	class: "v-card-header"
+}, T = ["aria-disabled", "href"], E = {
+	key: 1,
+	class: "v-card-subtitle"
+}, D = {
+	key: 1,
+	class: "v-card-body"
+}, O = {
+	key: 2,
+	class: "v-card-footer"
+}, k = /*@__PURE__*/ f({
+	inheritAttrs: !1,
+	__name: "VCard",
+	props: {
+		variant: { default: "outline" },
+		orientation: { default: "vertical" },
+		size: { default: "md" },
+		title: { default: void 0 },
+		subtitle: { default: void 0 },
+		headingLevel: { default: void 0 },
+		href: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		loadingText: { default: void 0 },
+		as: { default: "div" }
+	},
+	setup(f) {
+		let k = f, A = y(), { attrs: j, rootClass: M, rootStyle: N, forwardedAttrs: P } = n(), { isLink: F, isInertLink: I, linkHref: L, attrs: R } = t({
+			href: () => k.href,
+			inert: () => k.disabled,
+			attrs: () => P.value
+		}), z = a(() => F.value ? {
+			class: M.value,
+			style: N.value
+		} : j), B = a(() => k.headingLevel ? `h${k.headingLevel}` : "p");
+		return e && b(() => {
+			k.href !== void 0 && (!k.title || A.header) && console.warn("[VCard] `href` needs the `title` prop, which becomes the text of the link; the `#header` slot replaces it and drops the link.");
+		}), (e, t) => (m(), o(g(f.as), p(z.value, {
+			class: "v-card",
+			"data-variant": f.variant,
+			"data-orientation": f.orientation,
+			"data-size": f.size,
+			"data-interactive": v(F) ? "" : void 0,
+			"data-disabled": f.disabled ? "" : void 0,
+			"aria-busy": f.loading || void 0
+		}), {
+			default: x(() => [e.$slots.media ? (m(), c("div", S, [f.loading ? (m(), o(r, {
+				key: 0,
+				shape: "surface",
+				animation: "pulse"
+			})) : h(e.$slots, "media", {}, void 0, void 0, 1)])) : s("", !0), l("div", C, [f.loading ? (m(), c(i, { key: 0 }, [f.title || f.subtitle || e.$slots.header ? (m(), o(r, {
+				key: 0,
+				width: "60%"
+			})) : s("", !0), d(r, {
+				lines: 3,
+				label: f.loadingText
+			}, null, 8, ["label"])], 64)) : (m(), c(i, { key: 1 }, [
+				e.$slots.header || f.title || f.subtitle ? (m(), c("div", w, [h(e.$slots, "header", {}, () => [f.title ? (m(), o(g(B.value), {
+					key: 0,
+					class: "v-card-title"
+				}, {
+					default: x(() => [v(F) ? (m(), c("a", p({
+						key: 0,
+						class: "v-card-link",
+						"aria-disabled": v(I) ? "true" : void 0
+					}, v(R), { href: v(L) }), _(f.title), 17, T)) : (m(), c(i, { key: 1 }, [u(_(f.title), 1)], 64))]),
+					_: 1
+				})) : s("", !0), f.subtitle ? (m(), c("p", E, _(f.subtitle), 1)) : s("", !0)])])) : s("", !0),
+				e.$slots.default ? (m(), c("div", D, [h(e.$slots, "default")])) : s("", !0),
+				e.$slots.footer ? (m(), c("div", O, [h(e.$slots, "footer")])) : s("", !0)
+			], 64))])]),
+			_: 3
+		}, 16, [
+			"data-variant",
+			"data-orientation",
+			"data-size",
+			"data-interactive",
+			"data-disabled",
+			"aria-busy"
+		]));
+	}
+});
+//#endregion
+export { k as default };
+
+//# sourceMappingURL=VCard.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VCard.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VCard/VCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * A clickable card is one real link, its title, stretched over the card by a pseudo-element:\n * the reader hears one link named by the title, and the controls inside the card stay separate\n * targets. Wrapping the whole card in an `<a>` would name the link with all its text and forbid\n * the buttons it holds.\n */\n\nimport { computed, watchEffect } from 'vue'\n\nimport VSkeletonLoader from '../VSkeletonLoader/VSkeletonLoader.vue'\nimport { useInertLink } from '../../composables/useInertLink'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { isDev } from '../../utils/env'\n\n/** How the card is set off from the page: nothing, a border, a shadow, or a muted fill. */\nexport type CardVariant = 'flat' | 'outline' | 'elevated' | 'filled'\n/** Whether the media sits above the content or beside it. */\nexport type CardOrientation = 'vertical' | 'horizontal'\n/** How much room the card leaves around and between its parts. */\nexport type CardSize = 'sm' | 'md' | 'lg'\n/** The heading level of the title, when it should be part of the page outline. */\nexport type CardHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6\n\ninterface CardProps {\n  /**\n   * How the card is set off from the page: nothing at all (`flat`), a border (`outline`, the\n   * default), a shadow over a raised surface (`elevated`), or a muted fill with no border\n   * (`filled`).\n   */\n  variant?: CardVariant\n  /**\n   * Where the `#media` slot sits: above the content (`vertical`, the default), or at its start\n   * (`horizontal`). A horizontal card puts the media back above the content when it is too\n   * narrow for both side by side.\n   */\n  orientation?: CardOrientation\n  /** The padding of the card and the gaps between its parts. */\n  size?: CardSize\n  /** The title of the card. With `href`, it is the text of the card's link. */\n  title?: string\n  /** A line under the title. */\n  subtitle?: string\n  /**\n   * Renders the title as a heading of this level, so that the card takes its place in the\n   * page outline. Left out, the title is a paragraph.\n   */\n  headingLevel?: CardHeadingLevel\n  /**\n   * Makes the whole card a link to this address. The link is the title, whose clickable area\n   * covers the card; buttons and links inside the card remain separate targets. It requires\n   * `title`.\n   */\n  href?: string\n  /**\n   * Makes a linked card unusable: the link loses its address and is marked disabled, and the\n   * title and media are dimmed. Controls in the slots are not affected.\n   */\n  disabled?: boolean\n  /**\n   * Replaces the content with placeholders, and the media too when there is one. The footer\n   * is hidden until the content arrives.\n   */\n  loading?: boolean\n  /**\n   * Announces the loading to screen readers with this text. Left out, a loading card is\n   * silent, so that a grid of them does not read out the same word a dozen times.\n   */\n  loadingText?: string\n  /** The element the card is rendered as: `article`, `section` or `li` instead of a `div`. */\n  as?: string\n}\n\nconst props = withDefaults(defineProps<CardProps>(), {\n  variant: 'outline',\n  orientation: 'vertical',\n  size: 'md',\n  title: undefined,\n  subtitle: undefined,\n  headingLevel: undefined,\n  href: undefined,\n  disabled: false,\n  loading: false,\n  loadingText: undefined,\n  as: 'div',\n})\n\nconst slots = defineSlots<{\n  /** The body of the card. */\n  default?(): unknown\n  /** An image, a video or an illustration, drawn edge to edge. */\n  media?(): unknown\n  /** Replaces the title and subtitle with content of your own. A linked card loses its link. */\n  header?(): unknown\n  /** Actions at the foot of the card, pushed to the bottom when the card is stretched. */\n  footer?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\n/*\n * A linked card follows the wrapper-root pattern: the link is the element that acts, so it\n * receives the forwarded attributes (`target`, `rel`, a router's click handler) and the root\n * keeps only `class` and `style`. A card that is not a link is a plain container and keeps all\n * of them.\n */\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst {\n  isLink,\n  isInertLink,\n  linkHref,\n  attrs: linkAttrs,\n} = useInertLink({\n  href: () => props.href,\n  inert: () => props.disabled,\n  attrs: () => forwardedAttrs.value,\n})\n\nconst rootAttrs = computed(() =>\n  isLink.value ? { class: rootClass.value, style: rootStyle.value } : attrs,\n)\n\nconst titleTag = computed(() => (props.headingLevel ? `h${props.headingLevel}` : 'p'))\n\n// @devwarn\n// The link is the title: without one, the card would hold an empty link.\nif (isDev) {\n  watchEffect(() => {\n    if (props.href !== undefined && (!props.title || slots.header))\n      console.warn(\n        '[VCard] `href` needs the `title` prop, which becomes the text of the link; the `#header` slot replaces it and drops the link.',\n      )\n  })\n}\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"rootAttrs\"\n    class=\"v-card\"\n    :data-variant=\"variant\"\n    :data-orientation=\"orientation\"\n    :data-size=\"size\"\n    :data-interactive=\"isLink ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :aria-busy=\"loading || undefined\"\n  >\n    <div v-if=\"$slots.media\" class=\"v-card-media\">\n      <VSkeletonLoader v-if=\"loading\" shape=\"surface\" animation=\"pulse\" />\n      <slot v-else name=\"media\" />\n    </div>\n    <div class=\"v-card-content\">\n      <template v-if=\"loading\">\n        <VSkeletonLoader v-if=\"title || subtitle || $slots.header\" width=\"60%\" />\n        <VSkeletonLoader :lines=\"3\" :label=\"loadingText\" />\n      </template>\n      <template v-else>\n        <div v-if=\"$slots.header || title || subtitle\" class=\"v-card-header\">\n          <slot name=\"header\">\n            <component :is=\"titleTag\" v-if=\"title\" class=\"v-card-title\">\n              <a\n                v-if=\"isLink\"\n                class=\"v-card-link\"\n                :aria-disabled=\"isInertLink ? 'true' : undefined\"\n                v-bind=\"linkAttrs\"\n                :href=\"linkHref\"\n                >{{ title }}</a\n              >\n              <template v-else>{{ title }}</template>\n            </component>\n            <p v-if=\"subtitle\" class=\"v-card-subtitle\">{{ subtitle }}</p>\n          </slot>\n        </div>\n        <div v-if=\"$slots.default\" class=\"v-card-body\">\n          <slot />\n        </div>\n        <div v-if=\"$slots.footer\" class=\"v-card-footer\">\n          <slot name=\"footer\" />\n        </div>\n      </template>\n    </div>\n  </component>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-card {\n    --card-padding: var(--vectis-space-4);\n    --card-gap: var(--vectis-space-3);\n\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    /* Clips the media to the rounded corners, whichever side it ends up on. */\n    overflow: clip;\n    /* Transparent rather than absent: forced colours paint it, and the card keeps an edge. */\n    border: 1px solid transparent;\n    border-radius: var(--vectis-radius-surface);\n    background: var(--vectis-color-surface);\n    color: var(--vectis-color-text);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-body-md-size);\n    font-weight: var(--vectis-text-body-md-weight);\n    line-height: var(--vectis-text-body-md-leading);\n    transition:\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default),\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-card[data-size='sm'] {\n    --card-padding: var(--vectis-space-3);\n    --card-gap: var(--vectis-space-2);\n  }\n\n  .v-card[data-size='lg'] {\n    --card-padding: var(--vectis-space-6);\n    --card-gap: var(--vectis-space-4);\n  }\n\n  .v-card[data-variant='flat'] {\n    background: transparent;\n  }\n\n  .v-card[data-variant='outline'] {\n    border-color: var(--vectis-color-border);\n  }\n\n  .v-card[data-variant='elevated'] {\n    background: var(--vectis-color-surface-raised);\n    box-shadow: var(--vectis-shadow-sm);\n  }\n\n  .v-card[data-variant='filled'] {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  /*\n   * Side by side without a container query: the content's flex basis is its narrowest\n   * comfortable width, and its huge grow factor keeps the media at its own basis. When the card\n   * cannot fit both bases on one line, the content wraps under the media and both take the\n   * full width. A container query would need size containment on the card, which collapses it\n   * to nothing in any parent that sizes it from its content.\n   */\n  .v-card[data-orientation='horizontal'] {\n    flex-flow: row wrap;\n  }\n\n  .v-card[data-orientation='horizontal'] > .v-card-media {\n    flex: 1 1 var(--vectis-control-size-card-media);\n  }\n\n  .v-card[data-orientation='horizontal'] > .v-card-content {\n    flex: 999 1 var(--vectis-control-size-card-body-min);\n  }\n\n  .v-card-media > :is(img, video, picture, svg, iframe) {\n    display: block;\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: cover;\n  }\n\n  /*\n   * The placeholder has no intrinsic height: the percentage fills a media stretched beside the\n   * content, and the minimum gives it the skeleton's surface height everywhere else.\n   */\n  .v-card-media > .v-skeleton-loader {\n    block-size: 100%;\n    min-block-size: var(--vectis-control-size-skeleton-surface);\n  }\n\n  .v-card-content {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--card-gap);\n    min-inline-size: 0;\n    padding: var(--card-padding);\n  }\n\n  .v-card-header {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .v-card-title {\n    font-size: var(--vectis-text-heading-4-size);\n    font-weight: var(--vectis-text-heading-4-weight);\n    line-height: var(--vectis-text-heading-4-leading);\n  }\n\n  .v-card-subtitle {\n    color: var(--vectis-color-text-muted);\n    font-size: var(--vectis-text-body-sm-size);\n    font-weight: var(--vectis-text-body-sm-weight);\n    line-height: var(--vectis-text-body-sm-leading);\n  }\n\n  /* Pushed to the bottom, so that cards stretched to one height line their actions up. */\n  .v-card-footer {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--vectis-space-2);\n    margin-block-start: auto;\n  }\n\n  .v-card-link {\n    color: inherit;\n    text-decoration: none;\n    outline: none;\n  }\n\n  /* The link's hit area: the whole card, which is its positioned ancestor. */\n  .v-card-link::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n  }\n\n  /*\n   * The controls inside a linked card are lifted above the stretched link so that they stay\n   * their own targets. Consumer styles are unlayered and still override this positioning.\n   */\n  .v-card[data-interactive]\n    :is(a[href], button, input, select, textarea, summary, label, [tabindex]):not(.v-card-link) {\n    position: relative;\n    z-index: 1;\n  }\n\n  /* The link draws no ring of its own; the card does, around the area that is clicked. */\n  .v-card:has(.v-card-link: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  .v-card[data-interactive][data-variant='flat']:not([data-disabled]):hover {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-card[data-interactive][data-variant='outline']:not([data-disabled]):hover {\n    border-color: var(--vectis-color-border-strong);\n  }\n\n  .v-card[data-interactive][data-variant='elevated']:not([data-disabled]):hover {\n    box-shadow: var(--vectis-shadow-md);\n  }\n\n  .v-card[data-interactive][data-variant='filled']:not([data-disabled]):hover {\n    background: color-mix(in oklab, var(--vectis-color-surface-muted), var(--vectis-color-text) 4%);\n  }\n\n  .v-card[data-interactive]:not([data-disabled]):hover .v-card-link {\n    text-decoration: underline;\n  }\n\n  /*\n   * Only the link, which carries `aria-disabled`, and the media are dimmed: the rest of the\n   * text stays readable, since it is still content rather than a control.\n   */\n  .v-card[data-disabled] .v-card-link {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  .v-card[data-disabled] .v-card-media {\n    opacity: 0.5;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-card {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0EA,IAAM,IAAQ,GAcR,IAAQ,EAAA,GAmBR,EAAE,UAAO,cAAW,cAAW,sBAAmB,EAAa,GAE/D,EACJ,WACA,gBACA,aACA,OAAO,MACL,EAAa;GACf,YAAY,EAAM;GAClB,aAAa,EAAM;GACnB,aAAa,EAAe;EAC9B,CAAC,GAEK,IAAY,QAChB,EAAO,QAAQ;GAAE,OAAO,EAAU;GAAO,OAAO,EAAU;EAAM,IAAI,CACtE,GAEM,IAAW,QAAgB,EAAM,eAAe,IAAI,EAAM,iBAAiB,GAAI;SAIjF,KACF,QAAkB;GAChB,AAAI,EAAM,SAAS,KAAA,MAAc,CAAC,EAAM,SAAS,EAAM,WACrD,QAAQ,KACN,+HACF;EACJ,CAAC,mBAKD,EA6CY,EA5CL,EAAA,EAAE,GADT,EAEU,EA2CE,OA3CO;GACjB,OAAM;GACL,gBAAc,EAAA;GACd,oBAAkB,EAAA;GAClB,aAAW,EAAA;GACX,oBAAkB,EAAA,CAAA,IAAM,KAAQ,KAAA;GAChC,iBAAe,EAAA,WAAQ,KAAQ,KAAA;GAC/B,aAAW,EAAA,WAAW,KAAA;;oBAKjB,CAHKA,EAAAA,OAAO,SAAA,EAAA,GAAlB,EAGM,OAHN,GAGM,CAFmB,EAAA,WAAA,EAAA,GAAvB,EAAoE,GAAA;;IAApC,OAAM;IAAU,WAAU;SAC1D,EAA4B,EAAA,QAAA,SAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAE9B,EA6BM,OA7BN,GA6BM,CA5BY,EAAA,WAAA,EAAA,GAAhB,EAGW,GAAA,EAAA,KAAA,EAAA,GAAA,CAFc,EAAA,SAAS,EAAA,YAAYA,EAAAA,OAAO,UAAA,EAAA,GAAnD,EAAyE,GAAA;;IAAd,OAAM;oBACjE,EAAmD,GAAA;IAAjC,OAAO;IAAI,OAAO,EAAA;yCAEtC,EAuBW,GAAA,EAAA,KAAA,EAAA,GAAA;IAtBEA,EAAAA,OAAO,UAAU,EAAA,SAAS,EAAA,YAAA,EAAA,GAArC,EAeM,OAfN,GAeM,CAdJ,EAaO,EAAA,QAAA,UAAA,CAAA,SAAA,CAZ2B,EAAA,SAAA,EAAA,GAAhC,EAUY,EAVI,EAAA,KAAQ,GAAA;;KAAe,OAAM;;sBAQ1C,CANO,EAAA,CAAA,KAAA,EAAA,GADR,EAOC,KAPD,EAOC;;MALC,OAAM;MACL,iBAAe,EAAA,CAAA,IAAW,SAAY,KAAA;QAC/B,EAAA,CAAA,GAAS,EAChB,MAAM,EAAA,CAAA,EAAQ,CAAA,GAAA,EACX,EAAA,KAAK,GAAA,IAAA,CAAA,MAAA,EAAA,GAEX,EAAuC,GAAA,EAAA,KAAA,EAAA,GAAA,CAAA,EAAA,EAAnB,EAAA,KAAK,GAAA,CAAA,CAAA,GAAA,EAAA,EAAA,CAAA;;qBAElB,EAAA,YAAA,EAAA,GAAT,EAA6D,KAA7D,GAA6D,EAAf,EAAA,QAAQ,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;IAG/CA,EAAAA,OAAO,WAAA,EAAA,GAAlB,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;IAECA,EAAAA,OAAO,UAAA,EAAA,GAAlB,EAEM,OAFN,GAEM,CADJ,EAAsB,EAAA,QAAA,QAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}

package/dist/components/VCarousel/VCarousel.d.ts

@@ -145,13 +145,13 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     label: string;
     indicators: CarouselIndicators;
     orientation: CarouselOrientation;
+    height: number | string;
     controls: CarouselControls;
     prevIcon: IconSource;
     nextIcon: IconSource;
     gap: number | string;
     prevLabel: string;
     nextLabel: string;
-    height: number | string;
     itemsPerView: number;
     itemMinSize: number | string;
     peek: number | string;