vectis-ui 0.10.1 → 0.10.2

package/dist/components/VDatePicker/keyboard.d.ts

@@ -1,56 +1,24 @@
 /**
- * The pure half of VDatePicker's keyboard: it answers the single question "how far
- * does this key move?", and does nothing else. Actually moving the focus, calling
- * `preventDefault` and keeping the result inside the `min`/`max` bounds all stay in
- * the component, where the reactive state lives.
- *
- * It sits in VDatePicker's own folder rather than in `utils/` because it has exactly
- * one consumer, which fails the admission rule for shared code, and because
- * VDatePicker owns the contract (the same reasoning as `VHotkeys/platform.ts` and
- * `VCombobox/infiniteScroll.ts`). Being pure is also what makes this logic testable
- * without mounting anything: the handlers in the component only ever move DOM focus,
- * and jsdom lays nothing out to observe.
- *
- * One number has to be shared rather than repeated: `PICKER_COLUMNS` both cuts the
- * months and years grid into rows and defines what a vertical arrow steps over. Were
- * those two written as separate literals, widening the picker to four columns would
- * leave the arrows moving three cells, with no error anywhere to point at it.
- */
-/**
- * How many columns the months and years pickers are laid out in. It drives BOTH the
- * cutting of those grids into rows and the distance a vertical arrow travels: these
- * are the same number, and have to stay so.
+ * Decode date-navigation keys without side effects; the picker applies bounds, focus and model
+ * updates.
  */
+/** How many columns the months and years pickers are laid out in. */
 export declare const PICKER_COLUMNS = 3;
-/**
- * How far a key moves in the days view. It comes in two units because a month is not
- * a fixed number of days: `utils/date` provides one helper for each, and the caller
- * picks by looking at which shape it was handed.
- */
+/** How far a key moves in the days view. */
 export type DayStep = {
     days: number;
 } | {
     months: number;
 };
 /**
- * The step a key produces in the days view, given the key itself, whether Shift is
- * held, and how far the focused date sits from the start of its week: the last
- * being what Home and End need in order to land on the right day. Returning
- * `undefined` means the key is none of this table's business, and the event must be
- * left alone.
- *
- * `weekdayOffset` is passed in rather than worked out here, because it depends on
- * which day the week starts on in the current locale, and resolving that belongs to
- * `utils/date`, not to a keyboard table.
+ * The step a key produces in the days view, given the key itself, whether Shift is held, and
+ * how far the focused date sits from the start of its week: the last being what Home and End
+ * need to land on the right day.
  */
 export declare function dayStep(key: string, shiftKey: boolean, weekdayOffset: number): DayStep | undefined;
 /**
- * The step a key produces in the months and years views, expressed as a movement of
- * a flat index over a grid `PICKER_COLUMNS` wide. `undefined` again means the key is
- * not this table's business.
- *
- * Home and End are deliberately absent: both views are bounded: twelve months, a
- * year range fixed by `min` and `max`, and the component clamps whatever comes out,
- * so there is no wrapping behaviour left to define.
+ * The step a key produces in the months and years views, expressed as a movement of a flat
+ * index over a grid `PICKER_COLUMNS` wide. `undefined` again means the key is not this table's
+ * business.
  */
 export declare function gridDelta(key: string): number | undefined;

package/dist/components/VDatePicker/keyboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard.js","names":[],"sources":["../../../src/components/VDatePicker/keyboard.ts"],"sourcesContent":["// @keyboard @core\n/**\n * The pure half of VDatePicker's keyboard: it answers the single question \"how far\n * does this key move?\", and does nothing else. Actually moving the focus, calling\n * `preventDefault` and keeping the result inside the `min`/`max` bounds all stay in\n * the component, where the reactive state lives.\n *\n * It sits in VDatePicker's own folder rather than in `utils/` because it has exactly\n * one consumer, which fails the admission rule for shared code, and because\n * VDatePicker owns the contract (the same reasoning as `VHotkeys/platform.ts` and\n * `VCombobox/infiniteScroll.ts`). Being pure is also what makes this logic testable\n * without mounting anything: the handlers in the component only ever move DOM focus,\n * and jsdom lays nothing out to observe.\n *\n * One number has to be shared rather than repeated: `PICKER_COLUMNS` both cuts the\n * months and years grid into rows and defines what a vertical arrow steps over. Were\n * those two written as separate literals, widening the picker to four columns would\n * leave the arrows moving three cells, with no error anywhere to point at it.\n */\n\n/**\n * How many columns the months and years pickers are laid out in. It drives BOTH the\n * cutting of those grids into rows and the distance a vertical arrow travels: these\n * are the same number, and have to stay so.\n */\nexport const PICKER_COLUMNS = 3\n\nconst DAYS_PER_WEEK = 7\n\n/**\n * How far a key moves in the days view. It comes in two units because a month is not\n * a fixed number of days: `utils/date` provides one helper for each, and the caller\n * picks by looking at which shape it was handed.\n */\nexport type DayStep = { days: number } | { months: number }\n\n/**\n * The step a key produces in the days view, given the key itself, whether Shift is\n * held, and how far the focused date sits from the start of its week: the last\n * being what Home and End need in order to land on the right day. Returning\n * `undefined` means the key is none of this table's business, and the event must be\n * left alone.\n *\n * `weekdayOffset` is passed in rather than worked out here, because it depends on\n * which day the week starts on in the current locale, and resolving that belongs to\n * `utils/date`, not to a keyboard table.\n */\nexport function dayStep(\n  key: string,\n  shiftKey: boolean,\n  weekdayOffset: number,\n): DayStep | undefined {\n  switch (key) {\n    case 'ArrowRight':\n      return { days: 1 }\n    case 'ArrowLeft':\n      return { days: -1 }\n    case 'ArrowDown':\n      return { days: DAYS_PER_WEEK }\n    case 'ArrowUp':\n      return { days: -DAYS_PER_WEEK }\n    case 'Home':\n      // Negating an offset of zero yields `-0`, and the `|| 0` normalizes it back.\n      // `addDays` would not care either way, but a pure function should not hand out\n      // a value that `Object.is` reports as different from the zero every caller\n      // means.\n      return { days: -weekdayOffset || 0 }\n    case 'End':\n      return { days: DAYS_PER_WEEK - 1 - weekdayOffset }\n    case 'PageUp':\n      return { months: shiftKey ? -12 : -1 }\n    case 'PageDown':\n      return { months: shiftKey ? 12 : 1 }\n    default:\n      return undefined\n  }\n}\n\n/**\n * The step a key produces in the months and years views, expressed as a movement of\n * a flat index over a grid `PICKER_COLUMNS` wide. `undefined` again means the key is\n * not this table's business.\n *\n * Home and End are deliberately absent: both views are bounded: twelve months, a\n * year range fixed by `min` and `max`, and the component clamps whatever comes out,\n * so there is no wrapping behaviour left to define.\n */\nexport function gridDelta(key: string): number | undefined {\n  switch (key) {\n    case 'ArrowRight':\n      return 1\n    case 'ArrowLeft':\n      return -1\n    case 'ArrowDown':\n      return PICKER_COLUMNS\n    case 'ArrowUp':\n      return -PICKER_COLUMNS\n    default:\n      return undefined\n  }\n}\n"],"mappings":"AA+CA,SAAgB,EACd,GACA,GACA,GACqB;CACrB,QAAQ,GAAR;EACE,KAAK,cACH,OAAO,EAAE,MAAM,EAAE;EACnB,KAAK,aACH,OAAO,EAAE,MAAM,GAAG;EACpB,KAAK,aACH,OAAO,EAAE,MAAM,EAAc;EAC/B,KAAK,WACH,OAAO,EAAE,MAAM,GAAe;EAChC,KAAK,QAKH,OAAO,EAAE,MAAM,CAAC,KAAiB,EAAE;EACrC,KAAK,OACH,OAAO,EAAE,MAAM,IAAoB,EAAc;EACnD,KAAK,UACH,OAAO,EAAE,QAAQ,IAAW,MAAM,GAAG;EACvC,KAAK,YACH,OAAO,EAAE,QAAQ,IAAW,KAAK,EAAE;EACrC,SACE;CACJ;AACF;AAWA,SAAgB,EAAU,GAAiC;CACzD,QAAQ,GAAR;EACE,KAAK,cACH,OAAO;EACT,KAAK,aACH,OAAO;EACT,KAAK,aACH,OAAA;EACF,KAAK,WACH,OAAO;EACT,SACE;CACJ;AACF"}
+{"version":3,"file":"keyboard.js","names":[],"sources":["../../../src/components/VDatePicker/keyboard.ts"],"sourcesContent":["// @keyboard @core\n/**\n * Decode date-navigation keys without side effects; the picker applies bounds, focus and model\n * updates.\n */\n\n/** How many columns the months and years pickers are laid out in. */\nexport const PICKER_COLUMNS = 3\n\nconst DAYS_PER_WEEK = 7\n\n/** How far a key moves in the days view. */\nexport type DayStep = { days: number } | { months: number }\n\n/**\n * The step a key produces in the days view, given the key itself, whether Shift is held, and\n * how far the focused date sits from the start of its week: the last being what Home and End\n * need to land on the right day.\n */\nexport function dayStep(\n  key: string,\n  shiftKey: boolean,\n  weekdayOffset: number,\n): DayStep | undefined {\n  switch (key) {\n    case 'ArrowRight':\n      return { days: 1 }\n    case 'ArrowLeft':\n      return { days: -1 }\n    case 'ArrowDown':\n      return { days: DAYS_PER_WEEK }\n    case 'ArrowUp':\n      return { days: -DAYS_PER_WEEK }\n    case 'Home':\n      // Negating an offset of zero yields `-0`, and the `|| 0` normalizes it back.\n      // `addDays` would not care either way, but a pure function should not hand out\n      // a value that `Object.is` reports as different from the zero every caller\n      // means.\n      return { days: -weekdayOffset || 0 }\n    case 'End':\n      return { days: DAYS_PER_WEEK - 1 - weekdayOffset }\n    case 'PageUp':\n      return { months: shiftKey ? -12 : -1 }\n    case 'PageDown':\n      return { months: shiftKey ? 12 : 1 }\n    default:\n      return undefined\n  }\n}\n\n/**\n * The step a key produces in the months and years views, expressed as a movement of a flat\n * index over a grid `PICKER_COLUMNS` wide. `undefined` again means the key is not this table's\n * business.\n */\nexport function gridDelta(key: string): number | undefined {\n  switch (key) {\n    case 'ArrowRight':\n      return 1\n    case 'ArrowLeft':\n      return -1\n    case 'ArrowDown':\n      return PICKER_COLUMNS\n    case 'ArrowUp':\n      return -PICKER_COLUMNS\n    default:\n      return undefined\n  }\n}\n"],"mappings":"AAmBA,SAAgB,EACd,GACA,GACA,GACqB;CACrB,QAAQ,GAAR;EACE,KAAK,cACH,OAAO,EAAE,MAAM,EAAE;EACnB,KAAK,aACH,OAAO,EAAE,MAAM,GAAG;EACpB,KAAK,aACH,OAAO,EAAE,MAAM,EAAc;EAC/B,KAAK,WACH,OAAO,EAAE,MAAM,GAAe;EAChC,KAAK,QAKH,OAAO,EAAE,MAAM,CAAC,KAAiB,EAAE;EACrC,KAAK,OACH,OAAO,EAAE,MAAM,IAAoB,EAAc;EACnD,KAAK,UACH,OAAO,EAAE,QAAQ,IAAW,MAAM,GAAG;EACvC,KAAK,YACH,OAAO,EAAE,QAAQ,IAAW,KAAK,EAAE;EACrC,SACE;CACJ;AACF;AAOA,SAAgB,EAAU,GAAiC;CACzD,QAAQ,GAAR;EACE,KAAK,cACH,OAAO;EACT,KAAK,aACH,OAAO;EACT,KAAK,aACH,OAAA;EACF,KAAK,WACH,OAAO;EACT,SACE;CACJ;AACF"}

package/dist/components/VDatePicker/names.d.ts

@@ -1,34 +1,20 @@
 /**
- * The names of the months, as VDatePicker writes them in its header, its months view and
- * the title of its grid.
- *
- * It sits in the component's folder rather than in `utils/date.ts`: there is one consumer,
- * and `utils/date.ts` is in the import closure of every VCalendar component, which would
- * pay for rules only the picker needs, the `VTimeInput/search.ts` argument.
- *
- * Every name is read on a REFERENCE date pinned to `timeZone: 'UTC'`, so a label never
- * depends on the rendering machine's zone and the server agrees with the browser.
+ * Format reference dates in UTC so month and weekday names do not vary with the rendering
+ * machine's time zone.
  */
 /** The full names of the twelve months, in January-to-December order. */
 export declare function monthNames(locale: string): string[];
 /**
- * Month names shortened for the picker's narrow cells: a name of four characters or
- * fewer is kept whole ("May", "June", "July"), a longer one is cut to three
- * characters followed by a dot ("January" becomes "Jan."). The name is spread with
- * `[...n]` rather than indexed, so that an accented or non-Latin character counts as
- * one character and is never cut in half.
- *
- * TRAP: the cut is not safe everywhere. Vietnamese writes every month "Tháng N", so all
- * twelve come out "Thá.", and Estonian, Czech, Lithuanian or Greek lose a pair; the months
- * view then shows identical cells. When the cut repeats itself, the language's own short
- * names are used instead, which CLDR keeps distinct.
+ * The cut is not safe everywhere. Vietnamese writes every month "Tháng N", so all twelve come
+ * out "Thá.", and Estonian, Czech, Lithuanian or Greek lose a pair; the months view then shows
+ * identical cells.
  */
 export declare function monthNamesCompact(locale: string): string[];
 /** The full name of one month, 0 being January. */
 export declare function monthName(locale: string, month0: number): string;
 /**
- * A month and its year written the way the language writes them together: "June 2026",
- * "juin 2026", but "2026年6月" in Japanese and "2026. június" in Hungarian, where gluing the
- * two with a space gets the order wrong. The digits are Latin, as on the year button.
+ * A month and its year written the way the language writes them together: "June 2026", "juin
+ * 2026", but "2026年6月" in Japanese and "2026. június" in Hungarian, where gluing the two with a
+ * space gets the order wrong.
  */
 export declare function monthYearName(locale: string, year: number, month0: number): string;

package/dist/components/VDatePicker/names.js.map

@@ -1 +1 @@
-{"version":3,"file":"names.js","names":[],"sources":["../../../src/components/VDatePicker/names.ts"],"sourcesContent":["// @core\n/**\n * The names of the months, as VDatePicker writes them in its header, its months view and\n * the title of its grid.\n *\n * It sits in the component's folder rather than in `utils/date.ts`: there is one consumer,\n * and `utils/date.ts` is in the import closure of every VCalendar component, which would\n * pay for rules only the picker needs, the `VTimeInput/search.ts` argument.\n *\n * Every name is read on a REFERENCE date pinned to `timeZone: 'UTC'`, so a label never\n * depends on the rendering machine's zone and the server agrees with the browser.\n */\n\nimport { memo } from '../../utils/memo'\n\n/** The full names of the twelve months, in January-to-December order. */\nexport function monthNames(locale: string): string[] {\n  const fmt = new Intl.DateTimeFormat(locale, MONTH_LONG)\n  return Array.from({ length: 12 }, (_, i) => fmt.format(Date.UTC(2021, i, 1)))\n}\n\n/**\n * The options every month name is read with. `calendar: 'gregory'` is not optional: the\n * grid is Gregorian, and a locale whose default calendar is another one (fa-IR, or any tag\n * carrying `-u-ca-islamic`) would otherwise title a January grid with the month of ITS\n * calendar that happens to hold the 1st, \"Dey\" in Persian.\n */\nconst MONTH_LONG = { month: 'long', calendar: 'gregory', timeZone: 'UTC' } as const\n\n/**\n * Month names shortened for the picker's narrow cells: a name of four characters or\n * fewer is kept whole (\"May\", \"June\", \"July\"), a longer one is cut to three\n * characters followed by a dot (\"January\" becomes \"Jan.\"). The name is spread with\n * `[...n]` rather than indexed, so that an accented or non-Latin character counts as\n * one character and is never cut in half.\n *\n * TRAP: the cut is not safe everywhere. Vietnamese writes every month \"Tháng N\", so all\n * twelve come out \"Thá.\", and Estonian, Czech, Lithuanian or Greek lose a pair; the months\n * view then shows identical cells. When the cut repeats itself, the language's own short\n * names are used instead, which CLDR keeps distinct.\n */\nexport function monthNamesCompact(locale: string): string[] {\n  const cut = monthNames(locale).map((n) => {\n    const chars = [...n]\n    return chars.length <= 4 ? n : chars.slice(0, 3).join('') + '.'\n  })\n  if (new Set(cut).size === 12) return cut\n  const fmt = new Intl.DateTimeFormat(locale, { ...MONTH_LONG, month: 'short' })\n  return Array.from({ length: 12 }, (_, i) => fmt.format(Date.UTC(2021, i, 1)))\n}\n\n/**\n * One formatter kept per locale and set of options, for the lifetime of the module: the\n * two functions below are asked one month at a time, and building an `Intl` formatter\n * costs far more than using one.\n */\nconst formatters = new Map<string, Intl.DateTimeFormat>()\n\nfunction formatterFor(locale: string, options: Intl.DateTimeFormatOptions): Intl.DateTimeFormat {\n  return memo(\n    formatters,\n    `${locale}|${JSON.stringify(options)}`,\n    () => new Intl.DateTimeFormat(locale, options),\n  )\n}\n\n/** The full name of one month, 0 being January. */\nexport function monthName(locale: string, month0: number): string {\n  return formatterFor(locale, MONTH_LONG).format(Date.UTC(2021, month0, 1))\n}\n\n/**\n * A month and its year written the way the language writes them together: \"June 2026\",\n * \"juin 2026\", but \"2026年6月\" in Japanese and \"2026. június\" in Hungarian, where gluing the\n * two with a space gets the order wrong. The digits are Latin, as on the year button.\n */\nexport function monthYearName(locale: string, year: number, month0: number): string {\n  const at = new Date(Date.UTC(2021, month0, 1))\n  at.setUTCFullYear(year)\n  return formatterFor(locale, {\n    ...MONTH_LONG,\n    year: 'numeric',\n    numberingSystem: 'latn',\n  }).format(at)\n}\n"],"mappings":";;AAgBA,SAAgB,EAAW,GAA0B;CACnD,IAAM,IAAM,IAAI,KAAK,eAAe,GAAQ,CAAU;CACtD,OAAO,MAAM,KAAK,EAAE,QAAQ,GAAG,IAAI,GAAG,MAAM,EAAI,OAAO,KAAK,IAAI,MAAM,GAAG,CAAC,CAAC,CAAC;AAC9E;AAQA,IAAM,IAAa;CAAE,OAAO;CAAQ,UAAU;CAAW,UAAU;AAAM;AAczE,SAAgB,EAAkB,GAA0B;CAC1D,IAAM,IAAM,EAAW,CAAM,CAAC,CAAC,KAAK,MAAM;EACxC,IAAM,IAAQ,CAAC,GAAG,CAAC;EACnB,OAAO,EAAM,UAAU,IAAI,IAAI,EAAM,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,IAAI;CAC9D,CAAC;CACD,IAAI,IAAI,IAAI,CAAG,CAAC,CAAC,SAAS,IAAI,OAAO;CACrC,IAAM,IAAM,IAAI,KAAK,eAAe,GAAQ;EAAE,GAAG;EAAY,OAAO;CAAQ,CAAC;CAC7E,OAAO,MAAM,KAAK,EAAE,QAAQ,GAAG,IAAI,GAAG,MAAM,EAAI,OAAO,KAAK,IAAI,MAAM,GAAG,CAAC,CAAC,CAAC;AAC9E;AAOA,IAAM,oBAAa,IAAI,IAAiC;AAExD,SAAS,EAAa,GAAgB,GAA0D;CAC9F,OAAO,EACL,GACA,GAAG,EAAO,GAAG,KAAK,UAAU,CAAO,WAC7B,IAAI,KAAK,eAAe,GAAQ,CAAO,CAC/C;AACF;AAGA,SAAgB,EAAU,GAAgB,GAAwB;CAChE,OAAO,EAAa,GAAQ,CAAU,CAAC,CAAC,OAAO,KAAK,IAAI,MAAM,GAAQ,CAAC,CAAC;AAC1E;AAOA,SAAgB,EAAc,GAAgB,GAAc,GAAwB;CAClF,IAAM,IAAK,IAAI,KAAK,KAAK,IAAI,MAAM,GAAQ,CAAC,CAAC;CAE7C,OADA,EAAG,eAAe,CAAI,GACf,EAAa,GAAQ;EAC1B,GAAG;EACH,MAAM;EACN,iBAAiB;CACnB,CAAC,CAAC,CAAC,OAAO,CAAE;AACd"}
+{"version":3,"file":"names.js","names":[],"sources":["../../../src/components/VDatePicker/names.ts"],"sourcesContent":["// @core\n/**\n * Format reference dates in UTC so month and weekday names do not vary with the rendering\n * machine's time zone.\n */\n\nimport { memo } from '../../utils/memo'\n\n/** The full names of the twelve months, in January-to-December order. */\nexport function monthNames(locale: string): string[] {\n  const fmt = new Intl.DateTimeFormat(locale, MONTH_LONG)\n  return Array.from({ length: 12 }, (_, i) => fmt.format(Date.UTC(2021, i, 1)))\n}\n\n/**\n * The options every month name is read with. `calendar: 'gregory'` is not optional: the\n * grid is Gregorian, and a locale whose default calendar is another one (fa-IR, or any tag\n * carrying `-u-ca-islamic`) would otherwise title a January grid with the month of ITS\n * calendar that happens to hold the 1st, \"Dey\" in Persian.\n */\nconst MONTH_LONG = { month: 'long', calendar: 'gregory', timeZone: 'UTC' } as const\n\n/**\n * The cut is not safe everywhere. Vietnamese writes every month \"Tháng N\", so all twelve come\n * out \"Thá.\", and Estonian, Czech, Lithuanian or Greek lose a pair; the months view then shows\n * identical cells.\n */\nexport function monthNamesCompact(locale: string): string[] {\n  const cut = monthNames(locale).map((n) => {\n    const chars = [...n]\n    return chars.length <= 4 ? n : chars.slice(0, 3).join('') + '.'\n  })\n  if (new Set(cut).size === 12) return cut\n  const fmt = new Intl.DateTimeFormat(locale, { ...MONTH_LONG, month: 'short' })\n  return Array.from({ length: 12 }, (_, i) => fmt.format(Date.UTC(2021, i, 1)))\n}\n\n/**\n * One formatter kept per locale and set of options, for the lifetime of the module: the\n * two functions below are asked one month at a time, and building an `Intl` formatter\n * costs far more than using one.\n */\nconst formatters = new Map<string, Intl.DateTimeFormat>()\n\nfunction formatterFor(locale: string, options: Intl.DateTimeFormatOptions): Intl.DateTimeFormat {\n  return memo(\n    formatters,\n    `${locale}|${JSON.stringify(options)}`,\n    () => new Intl.DateTimeFormat(locale, options),\n  )\n}\n\n/** The full name of one month, 0 being January. */\nexport function monthName(locale: string, month0: number): string {\n  return formatterFor(locale, MONTH_LONG).format(Date.UTC(2021, month0, 1))\n}\n\n/**\n * A month and its year written the way the language writes them together: \"June 2026\", \"juin\n * 2026\", but \"2026年6月\" in Japanese and \"2026. június\" in Hungarian, where gluing the two with a\n * space gets the order wrong.\n */\nexport function monthYearName(locale: string, year: number, month0: number): string {\n  const at = new Date(Date.UTC(2021, month0, 1))\n  at.setUTCFullYear(year)\n  return formatterFor(locale, {\n    ...MONTH_LONG,\n    year: 'numeric',\n    numberingSystem: 'latn',\n  }).format(at)\n}\n"],"mappings":";;AASA,SAAgB,EAAW,GAA0B;CACnD,IAAM,IAAM,IAAI,KAAK,eAAe,GAAQ,CAAU;CACtD,OAAO,MAAM,KAAK,EAAE,QAAQ,GAAG,IAAI,GAAG,MAAM,EAAI,OAAO,KAAK,IAAI,MAAM,GAAG,CAAC,CAAC,CAAC;AAC9E;AAQA,IAAM,IAAa;CAAE,OAAO;CAAQ,UAAU;CAAW,UAAU;AAAM;AAOzE,SAAgB,EAAkB,GAA0B;CAC1D,IAAM,IAAM,EAAW,CAAM,CAAC,CAAC,KAAK,MAAM;EACxC,IAAM,IAAQ,CAAC,GAAG,CAAC;EACnB,OAAO,EAAM,UAAU,IAAI,IAAI,EAAM,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,IAAI;CAC9D,CAAC;CACD,IAAI,IAAI,IAAI,CAAG,CAAC,CAAC,SAAS,IAAI,OAAO;CACrC,IAAM,IAAM,IAAI,KAAK,eAAe,GAAQ;EAAE,GAAG;EAAY,OAAO;CAAQ,CAAC;CAC7E,OAAO,MAAM,KAAK,EAAE,QAAQ,GAAG,IAAI,GAAG,MAAM,EAAI,OAAO,KAAK,IAAI,MAAM,GAAG,CAAC,CAAC,CAAC;AAC9E;AAOA,IAAM,oBAAa,IAAI,IAAiC;AAExD,SAAS,EAAa,GAAgB,GAA0D;CAC9F,OAAO,EACL,GACA,GAAG,EAAO,GAAG,KAAK,UAAU,CAAO,WAC7B,IAAI,KAAK,eAAe,GAAQ,CAAO,CAC/C;AACF;AAGA,SAAgB,EAAU,GAAgB,GAAwB;CAChE,OAAO,EAAa,GAAQ,CAAU,CAAC,CAAC,OAAO,KAAK,IAAI,MAAM,GAAQ,CAAC,CAAC;AAC1E;AAOA,SAAgB,EAAc,GAAgB,GAAc,GAAwB;CAClF,IAAM,IAAK,IAAI,KAAK,KAAK,IAAI,MAAM,GAAQ,CAAC,CAAC;CAE7C,OADA,EAAG,eAAe,CAAI,GACf,EAAa,GAAQ;EAC1B,GAAG;EACH,MAAM;EACN,iBAAiB;CACnB,CAAC,CAAC,CAAC,OAAO,CAAE;AACd"}

package/dist/components/VDialog/VDialog.d.ts

@@ -9,9 +9,8 @@ interface DialogProps {
     /** A line under the title, explaining what the dialog is asking. */
     subtitle?: string;
     /**
-     * How wide the dialog is: a number is read as pixels, a string as any CSS length. Left
-     * out, it takes the `--vectis-control-size-dialog-width` token, 400px by default. It is
-     * never allowed to exceed the width of the viewport.
+     * How wide the dialog is: a number is read as pixels, a string as any CSS length. Left out,
+     * it takes the `--vectis-control-size-dialog-width` token, 400px by default.
      */
     width?: number | string;
     /**
@@ -52,8 +51,8 @@ type __VLS_Slots = {
     /** The buttons at the foot of the dialog. */
     footer?(): unknown;
     /**
-     * The button that opens the dialog. Bind the `triggerProps` it receives onto it. It
-     * stays rendered at all times, unlike the dialog itself.
+     * The button that opens the dialog. Bind the `triggerProps` it receives onto it. It stays
+     * rendered always, unlike the dialog itself.
      */
     trigger?(props: {
         triggerProps: DialogTriggerProps;
@@ -62,11 +61,7 @@ type __VLS_Slots = {
 declare function show(): Promise<void>;
 declare function requestClose(): void;
 type __VLS_ModelProps = {
-    /**
-     * Whether the dialog is showing. It starts closed, and it is BIDIRECTIONAL: the browser
-     * writes back to it whenever the dialog closes on its own, through Escape or the backdrop,
-     * so a consumer never has to reset it by hand.
-     */
+    /** Whether the dialog is showing. */
     'open'?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;

package/dist/components/VDialog/VDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"VDialog.js","names":[],"sources":["../../../src/components/VDialog/VDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * A modal dialog: it takes over the page until the reader answers it.\n *\n * Almost everything that makes a modal correct comes free with the native `<dialog>`\n * element opened as a modal — it is drawn above the whole page, the background is\n * dimmed and made unusable, the focus is trapped inside it and handed back to the\n * trigger on closing, and whether a click outside or Escape dismisses it is declared\n * with an attribute rather than coded.\n *\n * The ONLY behavioural JavaScript is the bridge between `v-model:open` and the two\n * methods the platform offers no declarative equivalent for: opening as a modal, and\n * closing.\n */\n\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, useId, watch } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport VTypography from '../VTypography/VTypography.vue'\nimport { useMessages } from '../../i18n/state'\nimport { cssSize } from '../../utils/css'\n\n/** How assistive technology announces the dialog. */\nexport type DialogRole = 'dialog' | 'alertdialog'\n\ninterface DialogProps {\n  /**\n   * The title of the dialog, which also names it for assistive technology. It is\n   * ignored when the `#header` slot replaces the whole header.\n   */\n  title?: string\n  /** A line under the title, explaining what the dialog is asking. */\n  subtitle?: string\n  /**\n   * How wide the dialog is: a number is read as pixels, a string as any CSS length. Left\n   * out, it takes the `--vectis-control-size-dialog-width` token, 400px by default. It is\n   * never allowed to exceed the width of the viewport.\n   */\n  width?: number | string\n  /**\n   * What kind of dialog this is. `alertdialog` is for one that must be answered\n   * explicitly, and it makes screen readers announce it more insistently. VDialogAlert is\n   * exactly that.\n   */\n  role?: DialogRole\n  /**\n   * Takes the close cross out of the header, leaving the reader with Escape, the\n   * backdrop and whatever the footer offers.\n   */\n  hideClose?: boolean\n  /** Stops a click outside the dialog from closing it. */\n  persistentBackdrop?: boolean\n  /**\n   * Stops the Escape key from closing the dialog. Note that refusing Escape while the\n   * backdrop still closes cannot be expressed natively, so both routes are then\n   * allowed.\n   */\n  persistentEscape?: boolean\n  /** What the close cross does, in words. It falls back to the design system dictionary. */\n  closeLabel?: string\n}\n\nconst props = withDefaults(defineProps<DialogProps>(), {\n  title: undefined,\n  subtitle: undefined,\n  width: undefined,\n  role: 'dialog',\n  hideClose: false,\n  persistentBackdrop: false,\n  persistentEscape: false,\n  closeLabel: undefined,\n})\n\nconst m = useMessages()\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? m.value.common.close)\n\n/**\n * Whether the dialog is showing. It starts closed, and it is BIDIRECTIONAL: the browser\n * writes back to it whenever the dialog closes on its own, through Escape or the backdrop,\n * so a consumer never has to reset it by hand.\n */\nconst open = defineModel<boolean>('open', { default: false })\n\n/** What the trigger has to carry: the click that opens the dialog, and the fact that it does. */\nexport type DialogTriggerProps = {\n  onClick: () => void\n  'aria-haspopup': 'dialog'\n}\n\ndefineSlots<{\n  /** The body of the dialog. This is the part that scrolls when there is too much of it. */\n  default(): unknown\n  /** Replaces the title and subtitle block with content of your own. */\n  header?(): unknown\n  /** Extra controls in the header, placed before the close cross: a menu, a full-screen toggle. */\n  'header-actions'?(): unknown\n  /** The buttons at the foot of the dialog. */\n  footer?(): unknown\n  /**\n   * The button that opens the dialog. Bind the `triggerProps` it receives onto it. It\n   * stays rendered at all times, unlike the dialog itself.\n   */\n  trigger?(props: { triggerProps: DialogTriggerProps }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst attrs = useAttrs()\nconst dialogEl = ref<HTMLDialogElement | null>(null)\nconst titleId = useId()\nconst subtitleId = useId()\n\n/**\n * Which dismissals the browser itself accepts, declared as an attribute rather than\n * handled in code: everything, Escape alone, or nothing.\n *\n * One combination cannot be expressed that way — a click outside allowed while Escape\n * is not — and it falls back to allowing both. Nothing in the design system asks for\n * it, and it would be a strange thing to want.\n */\nconst closedby = computed(() =>\n  props.persistentBackdrop ? (props.persistentEscape ? 'none' : 'closerequest') : 'any',\n)\n\n// @fallback\n// The `closedby` attribute is newer than the type definitions shipped with\n// TypeScript, so writing it directly in the template would be reported as an unknown\n// attribute. Passing it inside a bound object goes through the same path as any\n// forwarded attribute, which is not checked element by element. Vue still merges the\n// `class` and `style` it may contain with the static ones below.\nconst rootAttrs = computed(() => ({ ...attrs, closedby: closedby.value }))\n\n// The dialog and its content only exist while it is open, which also spares the page\n// whatever heavy thing it contains. Every opening therefore builds a BRAND NEW\n// element, so it is always opened as a modal from a clean slate, and closing removes\n// it entirely — nothing is left behind to swallow clicks, and reopening cannot race\n// with a closing that is still finishing. The trigger, by contrast, stays rendered at\n// all times.\nconst rendered = ref(open.value)\n\n/**\n * Settles once the dialog opened by the latest change of `open` is actually showing. The\n * opening waits for the element to be rendered, so it is always a tick behind the model.\n */\nlet opening: Promise<void> = Promise.resolve()\n\nfunction show(): Promise<void> {\n  open.value = true\n  // The watcher below only runs when the scheduler flushes, so `opening` is read from a\n  // tick later: read at once, it would still be the promise of the previous opening.\n  return nextTick(() => opening)\n}\n\nfunction requestClose() {\n  // Closing the element is enough: the browser then fires its own close event, which\n  // is what puts the model back in step below.\n  dialogEl.value?.close()\n}\n\nconst triggerProps = computed<DialogTriggerProps>(() => ({\n  onClick: show,\n  'aria-haspopup': 'dialog',\n}))\n\n// The `<dialog>` element is asymmetric in a way that shapes this whole bridge: it\n// announces every closing with an event, but announces nothing at all when it opens —\n// where a popover reports both. So the two directions are not written the same way:\n//\n//  - opening: render the element, then, once Vue has actually put it in the document,\n//    open it as a modal;\n//  - closing: whatever closed it — the cross, our own call, Escape, a click outside —\n//    the browser's close event is what puts the model back in step, and only then is\n//    the element removed.\nwatch(open, (value) => {\n  if (value) {\n    rendered.value = true\n    // the brand new <dialog> has to exist before it can be opened\n    opening = nextTick(() => dialogEl.value?.showModal())\n  } else {\n    dialogEl.value?.close()\n    rendered.value = false\n  }\n})\n\n// @ssr\nonMounted(() => {\n  // A watcher does not run during the server render, so a dialog asked to be open from\n  // the start would never be opened. The element is already there — the flag above was\n  // initialized from the model — it just has to be told to show itself.\n  if (open.value) dialogEl.value?.showModal()\n})\n\n// The browser's own close event, whatever caused it, is what brings the model back in\n// step with reality.\n//\n// TRAP — only the element on screen may do it. A close event is queued as a TASK, so the\n// one fired by the element a quick close-and-reopen has just replaced arrives after the new\n// element exists, and without the check it closed the dialog that had just opened.\nfunction onClose(event: Event) {\n  if (event.target !== dialogEl.value) return\n  open.value = false\n}\n\n// @core\n// An open dialog removed with its parent (a `v-if`, a route change) runs no close steps,\n// so no close event would come: the model is handed back closed here, or it stayed `true`\n// and the dialog reopened by itself the next time its parent was shown.\nonBeforeUnmount(() => {\n  if (open.value) open.value = false\n})\n\n// @fallback\n/*\n * `closedby` is what applies `persistentBackdrop` and `persistentEscape`, and Safari does\n * not implement it: there Escape always closes and the backdrop never does. The two halves\n * are rebuilt below, and ONLY where the attribute is unknown, so a browser that has it is\n * never second-guessed. The support is asked at event time: there is no DOM during setup.\n */\nconst closedbyUnsupported = () => !('closedBy' in HTMLDialogElement.prototype)\n\nfunction onCancel(event: Event) {\n  if (closedbyUnsupported() && closedby.value === 'none') event.preventDefault()\n}\n\n/**\n * Whether a point lies outside the dialog's box, which is where the backdrop is: a click on\n * the `::backdrop` is dispatched to the dialog element itself.\n */\nfunction outsideBox(event: MouseEvent) {\n  const box = dialogEl.value?.getBoundingClientRect()\n  if (!box) return false\n  return (\n    event.clientX < box.left ||\n    event.clientX > box.right ||\n    event.clientY < box.top ||\n    event.clientY > box.bottom\n  )\n}\n\n// A press that STARTED inside and ended on the backdrop (a text selection dragged past the\n// edge) is not a click on the backdrop, so the press is remembered, not only the release.\nlet pressedOnBackdrop = false\nfunction onPointerdown(event: PointerEvent) {\n  pressedOnBackdrop = event.target === dialogEl.value && outsideBox(event)\n}\nfunction onBackdropClick(event: MouseEvent) {\n  const onBackdrop = pressedOnBackdrop && event.target === dialogEl.value && outsideBox(event)\n  pressedOnBackdrop = false\n  if (onBackdrop && closedbyUnsupported() && closedby.value === 'any') requestClose()\n}\n\ndefineExpose({\n  /**\n   * Opens the dialog, exactly as setting `open` does. The opening lands on the next tick,\n   * once the element has been rendered: `el` is still null right after the call, and the\n   * promise returned settles once the dialog is showing.\n   */\n  show,\n  /**\n   * Closes the dialog. It closes unconditionally, `persistentEscape` and\n   * `persistentBackdrop` governing only the two routes the reader can take.\n   */\n  close: requestClose,\n  /** The `<dialog>` element. It is null while closed: each opening builds a fresh one. */\n  el: dialogEl,\n})\n</script>\n\n<template>\n  <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n  <dialog\n    v-if=\"rendered\"\n    ref=\"dialogEl\"\n    :aria-labelledby=\"title ? titleId : undefined\"\n    :aria-describedby=\"subtitle ? subtitleId : undefined\"\n    v-bind=\"rootAttrs\"\n    class=\"v-dialog\"\n    :style=\"{ '--dialog-width': cssSize(width) }\"\n    :role=\"role === 'alertdialog' ? 'alertdialog' : undefined\"\n    @close=\"onClose\"\n    @cancel=\"onCancel\"\n    @pointerdown=\"onPointerdown\"\n    @click=\"onBackdropClick\"\n  >\n    <!--\n      The header and the footer stay put while only the body scrolls, so the scrollbar\n      is confined to the body and never runs along them.\n\n      The lines that appear under the header and above the footer once the body is\n      scrolled are drawn by two sentinels stuck INSIDE the scrolling area, and not by\n      the header and footer themselves: a container query can only style what is inside\n      the container it asks about, never a sibling of it.\n    -->\n    <header class=\"v-dialog-header\">\n      <slot name=\"header\">\n        <div class=\"v-dialog-titles\">\n          <VTypography\n            v-if=\"title\"\n            :id=\"titleId\"\n            as=\"h2\"\n            variant=\"heading-3\"\n            class=\"v-dialog-title\"\n          >\n            {{ title }}\n          </VTypography>\n          <VTypography\n            v-if=\"subtitle\"\n            :id=\"subtitleId\"\n            variant=\"subtitle\"\n            tone=\"muted\"\n            class=\"v-dialog-subtitle\"\n          >\n            {{ subtitle }}\n          </VTypography>\n        </div>\n      </slot>\n      <div v-if=\"!hideClose || $slots['header-actions']\" class=\"v-dialog-header-actions\">\n        <slot name=\"header-actions\" />\n        <VIconButton\n          v-if=\"!hideClose\"\n          class=\"v-dialog-close\"\n          :label=\"resolvedCloseLabel\"\n          variant=\"ghost\"\n          tone=\"neutral\"\n          size=\"sm\"\n          @click=\"requestClose\"\n        >\n          <VIcon :name=\"closeIcon\" />\n        </VIconButton>\n      </div>\n    </header>\n    <div class=\"v-dialog-scroll\">\n      <span class=\"v-dialog-edge v-dialog-edge--top\" aria-hidden=\"true\" />\n      <div class=\"v-dialog-body\">\n        <slot />\n      </div>\n      <span class=\"v-dialog-edge v-dialog-edge--bottom\" aria-hidden=\"true\" />\n    </div>\n    <footer v-if=\"$slots.footer\" class=\"v-dialog-footer\">\n      <slot name=\"footer\" />\n    </footer>\n  </dialog>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-dialog {\n    /* The width comes from the prop, set inline, or from the token when there is none.\n       Whatever it asks for, the dialog is never allowed past the viewport, margins included.\n\n       TRAP — the token is declared ON the element rather than written as a `var()` fallback.\n       A custom property inherits, and a dialog opened from inside another one is its DOM\n       descendant: with a fallback, an alert confirming something in an 800px dialog would\n       read that dialog's inline width and open 800px wide itself, with no error anywhere. */\n    --dialog-width: var(--vectis-control-size-dialog-width);\n    inline-size: var(--dialog-width);\n    max-inline-size: calc(100dvi - 2 * var(--vectis-space-4));\n    max-block-size: calc(100dvb - 2 * var(--vectis-space-4));\n    /* This puts the dialog back in the middle of the screen. The browser centres a\n       modal with an automatic margin, which the design system's own reset — where\n       every element loses its margins — had removed; restoring it here works because\n       the component layer is stronger than the reset one. */\n    margin: auto;\n    /* The header and footer stay put while only the body scrolls, and hiding the\n       overflow is what keeps the content inside the rounded corners. */\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    padding: 0;\n    border: none;\n    border-radius: var(--vectis-radius-overlay);\n    background: var(--vectis-color-surface-overlay);\n    color: var(--vectis-color-text);\n    box-shadow: var(--vectis-shadow-xl);\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * An indispensable guard. The browser hides a closed dialog with a rule of its own,\n   * but any display we declare above beats it — so without this, a closed dialog would\n   * sit in the page at the top left, swallowing clicks.\n   *\n   * It also covers the two moments where the element exists without being open yet: the\n   * frame between rendering it and opening it, and the server-rendered markup. The\n   * popovers have the very same guard.\n   */\n  .v-dialog:not([open]) {\n    display: none;\n  }\n\n  /* Opening a modal puts the focus on the dialog itself. No ring is drawn around the\n     whole thing for that: the focus a reader needs to see is the one on the controls\n     inside. */\n  .v-dialog:focus-visible {\n    outline: none;\n  }\n\n  .v-dialog-scroll {\n    /* The ONLY part that scrolls. It takes whatever room is left between the header\n       and the footer, which is what keeps the scrollbar confined to it. The zero\n       minimum is load-bearing: without it a flex item refuses to shrink below its\n       content, and nothing would ever scroll. */\n    flex: 1 1 auto;\n    min-block-size: 0;\n    overflow-y: auto;\n    /* A wheel reaching the end of the content stops there rather than scrolling the page\n       behind the modal. */\n    overscroll-behavior: contain;\n    display: flex;\n    flex-direction: column;\n    /* This makes the box something its descendants can ask questions about — namely\n       whether there is content hidden above or below. It adds no containment of size. */\n    container-type: scroll-state;\n  }\n\n  /*\n   * The two sentinels: hairlines stuck to the top and the bottom of the scrolling\n   * area, and descendants of it, which is what allows them to ask about its scroll\n   * state. Their negative margins mean they occupy no space at all. They are\n   * transparent until the rules further down reveal them.\n   */\n  .v-dialog-edge {\n    flex: none;\n    block-size: 1px;\n    position: sticky;\n    background: transparent;\n  }\n\n  .v-dialog-edge--top {\n    inset-block-start: 0;\n    margin-block-end: -1px;\n  }\n\n  .v-dialog-edge--bottom {\n    inset-block-end: 0;\n    margin-block-start: -1px;\n  }\n\n  .v-dialog-header {\n    flex: none; /* stays at the top, outside whatever scrolls */\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--vectis-space-4);\n    padding: var(--vectis-space-6) var(--vectis-space-6) var(--vectis-space-3);\n  }\n\n  .v-dialog-titles {\n    display: flex;\n    flex-direction: column;\n    min-inline-size: 0;\n  }\n\n  /* The title and the subtitle are rendered by VTypography, which carries their type.\n     Their classes remain as hooks, for a consumer's overrides and for the tests. */\n\n  .v-dialog-header-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n    /* The cross is a button, so it carries invisible padding of its own; pulling the\n       row back by that amount is what makes the glyph line up with the header's edge\n       rather than floating inside it. */\n    margin-block-start: calc(-1 * var(--vectis-space-1));\n    margin-inline-end: calc(-1 * var(--vectis-space-2));\n  }\n\n  .v-dialog-body {\n    /* Short content is stretched to fill the space, so the footer stays at the bottom\n       of the dialog rather than floating halfway up; long content keeps its natural\n       height, overflows, and is what scrolls. */\n    flex: 1 0 auto;\n    padding: var(--vectis-space-1) var(--vectis-space-6) var(--vectis-space-3);\n    font-size: var(--vectis-text-body-md-size);\n    line-height: var(--vectis-text-body-md-leading);\n  }\n\n  .v-dialog-footer {\n    flex: none; /* stays at the bottom, outside whatever scrolls */\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-wrap: wrap;\n    gap: var(--vectis-space-3);\n    padding: var(--vectis-space-3) var(--vectis-space-6) var(--vectis-space-6);\n  }\n\n  /*\n   * The lines only appear when they mean something. Asking the scrolling area whether\n   * it can still be scrolled upwards tells us content is hidden ABOVE, so the line\n   * under the header is shown; the same question downwards reveals the one above the\n   * footer. In other words each line is drawn exactly when content is passing behind\n   * the edge it marks.\n   *\n   * This kind of query is Chrome 133 and later for now. Where it is missing the\n   * sentinels simply stay transparent, which is the intended fallback.\n   */\n  @container scroll-state(scrollable: top) {\n    .v-dialog-edge--top {\n      background: var(--vectis-color-border);\n    }\n  }\n\n  @container scroll-state(scrollable: bottom) {\n    .v-dialog-edge--bottom {\n      background: var(--vectis-color-border);\n    }\n  }\n\n  /*\n   * The dialog animates on the way IN and not on the way out. Since it is removed from\n   * the page the moment it closes, there is nothing left to animate out — that is the\n   * price of the clean slate the lazy rendering buys, and it also spares the extra\n   * declarations an exit animation would need.\n   *\n   * The starting values below are where a freshly rendered dialog begins, before\n   * settling into its open state.\n   */\n  .v-dialog {\n    transition:\n      opacity var(--vectis-duration-base) var(--vectis-ease-default),\n      transform var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  @starting-style {\n    .v-dialog[open] {\n      opacity: 0;\n      transform: scale(0.97);\n    }\n  }\n\n  .v-dialog::backdrop {\n    background: var(--vectis-color-backdrop);\n    transition: opacity var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  @starting-style {\n    .v-dialog[open]::backdrop {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-dialog,\n    .v-dialog::backdrop {\n      transition: none;\n    }\n  }\n\n  /* Windows forced colors flattens the dialog's background to Canvas and drops its shadow,\n     which were its only edge: it would float over the page with no boundary at all. An\n     outline draws one without moving the layout by a pixel. */\n  @media (forced-colors: active) {\n    .v-dialog {\n      outline: 1px solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VDialog.js","names":[],"sources":["../../../src/components/VDialog/VDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * Native showModal supplies top-layer placement and modal focus. JavaScript bridges v-model to\n * imperative open/close and provides guarded dismissal where closedBy is absent.\n */\n\nimport { computed, nextTick, onBeforeUnmount, ref, useAttrs, useId, watch } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport VTypography from '../VTypography/VTypography.vue'\nimport { useMessages } from '../../i18n/state'\nimport { cssSize } from '../../utils/css'\n\n/** How assistive technology announces the dialog. */\nexport type DialogRole = 'dialog' | 'alertdialog'\n\ninterface DialogProps {\n  /**\n   * The title of the dialog, which also names it for assistive technology. It is\n   * ignored when the `#header` slot replaces the whole header.\n   */\n  title?: string\n  /** A line under the title, explaining what the dialog is asking. */\n  subtitle?: string\n  /**\n   * How wide the dialog is: a number is read as pixels, a string as any CSS length. Left out,\n   * it takes the `--vectis-control-size-dialog-width` token, 400px by default.\n   */\n  width?: number | string\n  /**\n   * What kind of dialog this is. `alertdialog` is for one that must be answered\n   * explicitly, and it makes screen readers announce it more insistently. VDialogAlert is\n   * exactly that.\n   */\n  role?: DialogRole\n  /**\n   * Takes the close cross out of the header, leaving the reader with Escape, the\n   * backdrop and whatever the footer offers.\n   */\n  hideClose?: boolean\n  /** Stops a click outside the dialog from closing it. */\n  persistentBackdrop?: boolean\n  /**\n   * Stops the Escape key from closing the dialog. Note that refusing Escape while the\n   * backdrop still closes cannot be expressed natively, so both routes are then\n   * allowed.\n   */\n  persistentEscape?: boolean\n  /** What the close cross does, in words. It falls back to the design system dictionary. */\n  closeLabel?: string\n}\n\nconst props = withDefaults(defineProps<DialogProps>(), {\n  title: undefined,\n  subtitle: undefined,\n  width: undefined,\n  role: 'dialog',\n  hideClose: false,\n  persistentBackdrop: false,\n  persistentEscape: false,\n  closeLabel: undefined,\n})\n\nconst m = useMessages()\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? m.value.common.close)\n\n/** Whether the dialog is showing. */\nconst open = defineModel<boolean>('open', { default: false })\n\n/** What the trigger has to carry: the click that opens the dialog, and the fact that it does. */\nexport type DialogTriggerProps = {\n  onClick: () => void\n  'aria-haspopup': 'dialog'\n}\n\ndefineSlots<{\n  /** The body of the dialog. This is the part that scrolls when there is too much of it. */\n  default(): unknown\n  /** Replaces the title and subtitle block with content of your own. */\n  header?(): unknown\n  /** Extra controls in the header, placed before the close cross: a menu, a full-screen toggle. */\n  'header-actions'?(): unknown\n  /** The buttons at the foot of the dialog. */\n  footer?(): unknown\n  /**\n   * The button that opens the dialog. Bind the `triggerProps` it receives onto it. It stays\n   * rendered always, unlike the dialog itself.\n   */\n  trigger?(props: { triggerProps: DialogTriggerProps }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst attrs = useAttrs()\nconst dialogEl = ref<HTMLDialogElement | null>(null)\nconst titleId = useId()\nconst subtitleId = useId()\n\n/**\n * Which dismissals the browser itself accepts, declared as an attribute rather than handled in\n * code: everything, Escape alone, or nothing. One combination cannot be expressed that way; a\n * click outside allowed while Escape is not; and it falls back to allowing both.\n */\nconst closedby = computed(() =>\n  props.persistentBackdrop ? (props.persistentEscape ? 'none' : 'closerequest') : 'any',\n)\n\n// @fallback\n// The `closedby` attribute is newer than the type definitions shipped with TypeScript, so\n// writing it directly in the template would be reported as an unknown attribute. Passing it\n// inside a bound object goes through the same path as any forwarded attribute, which is not\n// checked element by element.\nconst rootAttrs = computed(() => ({ ...attrs, closedby: closedby.value }))\n\nfunction show(): Promise<void> {\n  open.value = true\n  return nextTick()\n}\n\nfunction requestClose() {\n  // Closing the element is enough: the browser then fires its own close event, which puts the\n  // model back in step below.\n  dialogEl.value?.close()\n}\n\nconst triggerProps = computed<DialogTriggerProps>(() => ({\n  onClick: show,\n  'aria-haspopup': 'dialog',\n}))\n\n// Close before v-if removes the element so the browser restores the invoker's focus.\nwatch(open, (value) => {\n  if (!value) dialogEl.value?.close()\n})\n\n// @ssr\n// Template refs become available after mounting, including when hydrating an open dialog.\nwatch(dialogEl, (dialog) => dialog?.showModal(), { flush: 'post' })\n\n// Ignore close events from replaced elements: the queued event from a quick close-and-reopen\n// must not close the new dialog.\nfunction onClose(event: Event) {\n  if (event.target !== dialogEl.value) return\n  open.value = false\n}\n\n// @core\n// An open dialog removed with its parent (a `v-if`, a route change) runs no close steps,\n// so no close event would come: the model is handed back closed here, or it stayed `true`\n// and the dialog reopened by itself the next time its parent was shown.\nonBeforeUnmount(() => {\n  if (open.value) open.value = false\n})\n\n// @fallback\n/*\n * `closedby` is what applies `persistentBackdrop` and `persistentEscape`, and Safari does not\n * implement it: there Escape always closes and the backdrop never does. The two halves are\n * rebuilt below, and only where the attribute is unknown, so a browser that has it is never\n * second-guessed.\n */\nconst closedbyUnsupported = () => !('closedBy' in HTMLDialogElement.prototype)\n\nfunction onCancel(event: Event) {\n  if (closedbyUnsupported() && closedby.value === 'none') event.preventDefault()\n}\n\n/**\n * Whether a point lies outside the dialog's box, which is where the backdrop is: a click on\n * the `::backdrop` is dispatched to the dialog element itself.\n */\nfunction outsideBox(event: MouseEvent) {\n  const box = dialogEl.value?.getBoundingClientRect()\n  if (!box) return false\n  return (\n    event.clientX < box.left ||\n    event.clientX > box.right ||\n    event.clientY < box.top ||\n    event.clientY > box.bottom\n  )\n}\n\n// A press that STARTED inside and ended on the backdrop (a text selection dragged past the\n// edge) is not a click on the backdrop, so the press is remembered, not only the release.\nlet pressedOnBackdrop = false\nfunction onPointerdown(event: PointerEvent) {\n  pressedOnBackdrop = closedbyUnsupported() && event.target === dialogEl.value && outsideBox(event)\n}\nfunction onBackdropClick(event: MouseEvent) {\n  const onBackdrop = pressedOnBackdrop && event.target === dialogEl.value && outsideBox(event)\n  pressedOnBackdrop = false\n  if (onBackdrop && closedbyUnsupported() && closedby.value === 'any') requestClose()\n}\n\ndefineExpose({\n  /**\n   * Opens the dialog, exactly as setting `open` does. The opening lands on the next tick,\n   * once the element has been rendered: `el` is still null right after the call, and the\n   * promise returned settles once the dialog is showing.\n   */\n  show,\n  /**\n   * Closes the dialog. It closes unconditionally, `persistentEscape` and\n   * `persistentBackdrop` governing only the two routes the reader can take.\n   */\n  close: requestClose,\n  /** The `<dialog>` element. It is null while closed: each opening builds a fresh one. */\n  el: dialogEl,\n})\n</script>\n\n<template>\n  <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n  <dialog\n    v-if=\"open\"\n    ref=\"dialogEl\"\n    :aria-labelledby=\"title ? titleId : undefined\"\n    :aria-describedby=\"subtitle ? subtitleId : undefined\"\n    v-bind=\"rootAttrs\"\n    class=\"v-dialog\"\n    :style=\"{ '--dialog-width': cssSize(width) }\"\n    :role=\"role === 'alertdialog' ? 'alertdialog' : undefined\"\n    @close=\"onClose\"\n    @cancel=\"onCancel\"\n    @pointerdown=\"onPointerdown\"\n    @click=\"onBackdropClick\"\n  >\n    <!--\n      The header and the footer stay put while only the body scrolls, so the scrollbar\n      is confined to the body and never runs along them.\n\n      The lines that appear under the header and above the footer once the body is\n      scrolled are drawn by two sentinels stuck INSIDE the scrolling area, and not by\n      the header and footer themselves: a container query can only style what is inside\n      the container it asks about, never a sibling of it.\n    -->\n    <header class=\"v-dialog-header\">\n      <slot name=\"header\">\n        <div class=\"v-dialog-titles\">\n          <VTypography\n            v-if=\"title\"\n            :id=\"titleId\"\n            as=\"h2\"\n            variant=\"heading-3\"\n            class=\"v-dialog-title\"\n          >\n            {{ title }}\n          </VTypography>\n          <VTypography\n            v-if=\"subtitle\"\n            :id=\"subtitleId\"\n            variant=\"subtitle\"\n            tone=\"muted\"\n            class=\"v-dialog-subtitle\"\n          >\n            {{ subtitle }}\n          </VTypography>\n        </div>\n      </slot>\n      <div v-if=\"!hideClose || $slots['header-actions']\" class=\"v-dialog-header-actions\">\n        <slot name=\"header-actions\" />\n        <VIconButton\n          v-if=\"!hideClose\"\n          class=\"v-dialog-close\"\n          :label=\"resolvedCloseLabel\"\n          variant=\"ghost\"\n          tone=\"neutral\"\n          size=\"sm\"\n          @click=\"requestClose\"\n        >\n          <VIcon :name=\"closeIcon\" />\n        </VIconButton>\n      </div>\n    </header>\n    <div class=\"v-dialog-scroll\">\n      <span class=\"v-dialog-edge v-dialog-edge--top\" aria-hidden=\"true\" />\n      <div class=\"v-dialog-body\">\n        <slot />\n      </div>\n      <span class=\"v-dialog-edge v-dialog-edge--bottom\" aria-hidden=\"true\" />\n    </div>\n    <footer v-if=\"$slots.footer\" class=\"v-dialog-footer\">\n      <slot name=\"footer\" />\n    </footer>\n  </dialog>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-dialog {\n    /*\n     * The token is declared on the element rather than written as a `var()` fallback. A custom\n     * property inherits, and a dialog opened from inside another one is its DOM descendant:\n     * with a fallback, an alert confirming something in an 800px dialog would read that\n     * dialog's inline width and open 800px wide itself, with no error anywhere.\n     */\n    --dialog-width: var(--vectis-control-size-dialog-width);\n    inline-size: var(--dialog-width);\n    max-inline-size: calc(100dvi - 2 * var(--vectis-space-4));\n    max-block-size: calc(100dvb - 2 * var(--vectis-space-4));\n    /*\n     * Restore the modal's automatic margins in the component layer because the reset removes\n     * native dialog centring.\n     */\n    margin: auto;\n    /* The header and footer stay put while only the body scrolls, and hiding the\n       overflow is what keeps the content inside the rounded corners. */\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    padding: 0;\n    border: none;\n    border-radius: var(--vectis-radius-overlay);\n    background: var(--vectis-color-surface-overlay);\n    color: var(--vectis-color-text);\n    box-shadow: var(--vectis-shadow-xl);\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * An indispensable guard. The browser hides a closed dialog with a rule of its own, but any\n   * display we declare above beats it; so without this, a closed dialog would sit in the page\n   * at the top left, swallowing clicks.\n   */\n  .v-dialog:not([open]) {\n    display: none;\n  }\n\n  /* Opening a modal puts the focus on the dialog itself. No ring is drawn around the\n     whole thing for that: the focus a reader needs to see is the one on the controls\n     inside. */\n  .v-dialog:focus-visible {\n    outline: none;\n  }\n\n  .v-dialog-scroll {\n    /*\n     * The zero minimum is load-bearing: without it a flex item refuses to shrink below its\n     * content, and nothing would ever scroll.\n     */\n    flex: 1 1 auto;\n    min-block-size: 0;\n    overflow-y: auto;\n    /* A wheel reaching the end of the content stops there rather than scrolling the page\n       behind the modal. */\n    overscroll-behavior: contain;\n    display: flex;\n    flex-direction: column;\n    /*\n     * This makes the box something its descendants can ask questions about; namely whether\n     * there is content hidden above or below. It adds no containment of size.\n     */\n    container-type: scroll-state;\n  }\n\n  /*\n   * The two sentinels: hairlines stuck to the top and the bottom of the scrolling area, and\n   * descendants of it, which allows them to ask about its scroll state. Their negative margins\n   * mean they occupy no space at all.\n   */\n  .v-dialog-edge {\n    flex: none;\n    block-size: 1px;\n    position: sticky;\n    background: transparent;\n  }\n\n  .v-dialog-edge--top {\n    inset-block-start: 0;\n    margin-block-end: -1px;\n  }\n\n  .v-dialog-edge--bottom {\n    inset-block-end: 0;\n    margin-block-start: -1px;\n  }\n\n  .v-dialog-header {\n    flex: none;\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--vectis-space-4);\n    padding: var(--vectis-space-6) var(--vectis-space-6) var(--vectis-space-3);\n  }\n\n  .v-dialog-titles {\n    display: flex;\n    flex-direction: column;\n    min-inline-size: 0;\n  }\n\n  /* The title and the subtitle are rendered by VTypography, which carries their type.\n     Their classes remain as hooks, for a consumer's overrides and for the tests. */\n\n  .v-dialog-header-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n    /* The cross is a button, so it carries invisible padding of its own; pulling the\n       row back by that amount is what makes the glyph line up with the header's edge\n       rather than floating inside it. */\n    margin-block-start: calc(-1 * var(--vectis-space-1));\n    margin-inline-end: calc(-1 * var(--vectis-space-2));\n  }\n\n  .v-dialog-body {\n    /* Short content is stretched to fill the space, so the footer stays at the bottom\n       of the dialog rather than floating halfway up; long content keeps its natural\n       height, overflows, and is what scrolls. */\n    flex: 1 0 auto;\n    padding: var(--vectis-space-1) var(--vectis-space-6) var(--vectis-space-3);\n    font-size: var(--vectis-text-body-md-size);\n    line-height: var(--vectis-text-body-md-leading);\n  }\n\n  .v-dialog-footer {\n    flex: none;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-wrap: wrap;\n    gap: var(--vectis-space-3);\n    padding: var(--vectis-space-3) var(--vectis-space-6) var(--vectis-space-6);\n  }\n\n  /* Where it is missing the sentinels simply stay transparent, which is the intended fallback. */\n  @container scroll-state(scrollable: top) {\n    .v-dialog-edge--top {\n      background: var(--vectis-color-border);\n    }\n  }\n\n  @container scroll-state(scrollable: bottom) {\n    .v-dialog-edge--bottom {\n      background: var(--vectis-color-border);\n    }\n  }\n\n  /*\n   * The dialog animates on the way in and not on the way out. Since it is removed from the page\n   * the moment it closes, there is nothing left to animate out; that is the price of the clean\n   * slate the lazy rendering buys, and it also spares the extra declarations an exit animation\n   * would need.\n   */\n  .v-dialog {\n    transition:\n      opacity var(--vectis-duration-base) var(--vectis-ease-default),\n      transform var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  @starting-style {\n    .v-dialog[open] {\n      opacity: 0;\n      transform: scale(0.97);\n    }\n  }\n\n  .v-dialog::backdrop {\n    background: var(--vectis-color-backdrop);\n    transition: opacity var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  @starting-style {\n    .v-dialog[open]::backdrop {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-dialog,\n    .v-dialog::backdrop {\n      transition: none;\n    }\n  }\n\n  /* An outline draws one without moving the layout by a pixel. */\n  @media (forced-colors: active) {\n    .v-dialog {\n      outline: 1px solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VDialog/VDialog.vue_vue_type_script_setup_true_lang.js

@@ -4,19 +4,19 @@ import n from "../VIcon/VIcon.js";
 import r from "../VTypography/VTypography.js";
 import i from "../VIconButton/VIconButton.js";
 import { close as a } from "../VIcon/icons/close.js";
-import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeModels as h, mergeProps as g, nextTick as _, onBeforeUnmount as v, onMounted as ee, openBlock as y, ref as b, renderSlot as x, toDisplayString as S, unref as C, useAttrs as w, useId as T, useModel as E, watch as D, withCtx as O } from "vue";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeModels as h, mergeProps as g, nextTick as _, onBeforeUnmount as v, openBlock as y, ref as b, renderSlot as x, toDisplayString as S, unref as C, useAttrs as w, useId as T, useModel as E, watch as D, withCtx as O } from "vue";
 //#region src/components/VDialog/VDialog.vue?vue&type=script&setup=true&lang.ts
 var k = [
 	"aria-labelledby",
 	"aria-describedby",
 	"role"
-], te = { class: "v-dialog-header" }, A = { class: "v-dialog-titles" }, j = {
+], A = { class: "v-dialog-header" }, j = { class: "v-dialog-titles" }, M = {
 	key: 0,
 	class: "v-dialog-header-actions"
-}, M = { class: "v-dialog-scroll" }, N = { class: "v-dialog-body" }, P = {
+}, N = { class: "v-dialog-scroll" }, P = { class: "v-dialog-body" }, F = {
 	key: 0,
 	class: "v-dialog-footer"
-}, F = /*@__PURE__*/ m({
+}, I = /*@__PURE__*/ m({
 	inheritAttrs: !1,
 	__name: "VDialog",
 	props: /*@__PURE__*/ h({
@@ -46,69 +46,67 @@ var k = [
 	}),
 	emits: ["update:open"],
 	setup(m, { expose: h }) {
-		let F = m, I = e(), L = s(() => F.closeLabel ?? I.value.common.close), R = E(m, "open"), z = w(), B = b(null), V = T(), H = T(), U = s(() => F.persistentBackdrop ? F.persistentEscape ? "none" : "closerequest" : "any"), W = s(() => ({
-			...z,
-			closedby: U.value
-		})), G = b(R.value), K = Promise.resolve();
-		function q() {
-			return R.value = !0, _(() => K);
+		let I = m, L = e(), R = s(() => I.closeLabel ?? L.value.common.close), z = E(m, "open"), B = w(), V = b(null), H = T(), U = T(), W = s(() => I.persistentBackdrop ? I.persistentEscape ? "none" : "closerequest" : "any"), G = s(() => ({
+			...B,
+			closedby: W.value
+		}));
+		function K() {
+			return z.value = !0, _();
 		}
-		function J() {
-			B.value?.close();
+		function q() {
+			V.value?.close();
 		}
-		let Y = s(() => ({
-			onClick: q,
+		let J = s(() => ({
+			onClick: K,
 			"aria-haspopup": "dialog"
 		}));
-		D(R, (e) => {
-			e ? (G.value = !0, K = _(() => B.value?.showModal())) : (B.value?.close(), G.value = !1);
-		}), ee(() => {
-			R.value && B.value?.showModal();
-		});
-		function X(e) {
-			e.target === B.value && (R.value = !1);
+		D(z, (e) => {
+			e || V.value?.close();
+		}), D(V, (e) => e?.showModal(), { flush: "post" });
+		function Y(e) {
+			e.target === V.value && (z.value = !1);
 		}
 		v(() => {
-			R.value &&= !1;
+			z.value &&= !1;
 		});
-		let Z = () => !("closedBy" in HTMLDialogElement.prototype);
-		function ne(e) {
-			Z() && U.value === "none" && e.preventDefault();
+		let X = () => !("closedBy" in HTMLDialogElement.prototype);
+		function Z(e) {
+			X() && W.value === "none" && e.preventDefault();
 		}
 		function Q(e) {
-			let t = B.value?.getBoundingClientRect();
+			let t = V.value?.getBoundingClientRect();
 			return t ? e.clientX < t.left || e.clientX > t.right || e.clientY < t.top || e.clientY > t.bottom : !1;
 		}
 		let $ = !1;
-		function re(e) {
-			$ = e.target === B.value && Q(e);
+		function ee(e) {
+			$ = X() && e.target === V.value && Q(e);
 		}
-		function ie(e) {
-			let t = $ && e.target === B.value && Q(e);
-			$ = !1, t && Z() && U.value === "any" && J();
+		function te(e) {
+			let t = $ && e.target === V.value && Q(e);
+			$ = !1, t && X() && W.value === "any" && q();
 		}
 		return h({
-			show: q,
-			close: J,
-			el: B
-		}), (e, s) => (y(), u(o, null, [x(e.$slots, "trigger", { triggerProps: Y.value }), G.value ? (y(), u("dialog", g({
+			show: K,
+			close: q,
+			el: V
+		}), (e, s) => (y(), u(o, null, [x(e.$slots, "trigger", { triggerProps: J.value }), z.value ? (y(), u("dialog", g({
 			key: 0,
 			ref_key: "dialogEl",
-			ref: B,
-			"aria-labelledby": m.title ? C(V) : void 0,
-			"aria-describedby": m.subtitle ? C(H) : void 0
-		}, W.value, {
+			ref: V,
+			"aria-labelledby": m.title ? C(H) : void 0,
+			"aria-describedby": m.subtitle ? C(U) : void 0
+		}, G.value, {
 			class: "v-dialog",
 			style: { "--dialog-width": C(t)(m.width) },
 			role: m.role === "alertdialog" ? "alertdialog" : void 0,
-			onClose: X,
-			onCancel: ne,
-			onPointerdown: re,
-			onClick: ie
+			onClose: Y,
+			onCancel: Z,
+			onPointerdown: ee,
+			onClick: te
 		}), [
-			d("header", te, [x(e.$slots, "header", {}, () => [d("div", A, [m.title ? (y(), c(r, {
+			d("header", A, [x(e.$slots, "header", {}, () => [d("div", j, [m.title ? (y(), c(r, {
 				key: 0,
-				id: C(V),
+				id: C(H),
 				as: "h2",
 				variant: "heading-3",
 				class: "v-dialog-title"
@@ -117,41 +115,41 @@ var k = [
 				_: 1
 			}, 8, ["id"])) : l("", !0), m.subtitle ? (y(), c(r, {
 				key: 1,
-				id: C(H),
+				id: C(U),
 				variant: "subtitle",
 				tone: "muted",
 				class: "v-dialog-subtitle"
 			}, {
 				default: O(() => [f(S(m.subtitle), 1)]),
 				_: 1
-			}, 8, ["id"])) : l("", !0)])]), !m.hideClose || e.$slots["header-actions"] ? (y(), u("div", j, [x(e.$slots, "header-actions"), m.hideClose ? l("", !0) : (y(), c(i, {
+			}, 8, ["id"])) : l("", !0)])]), !m.hideClose || e.$slots["header-actions"] ? (y(), u("div", M, [x(e.$slots, "header-actions"), m.hideClose ? l("", !0) : (y(), c(i, {
 				key: 0,
 				class: "v-dialog-close",
-				label: L.value,
+				label: R.value,
 				variant: "ghost",
 				tone: "neutral",
 				size: "sm",
-				onClick: J
+				onClick: q
 			}, {
 				default: O(() => [p(n, { name: C(a) }, null, 8, ["name"])]),
 				_: 1
 			}, 8, ["label"]))])) : l("", !0)]),
-			d("div", M, [
+			d("div", N, [
 				s[0] ||= d("span", {
 					class: "v-dialog-edge v-dialog-edge--top",
 					"aria-hidden": "true"
 				}, null, -1),
-				d("div", N, [x(e.$slots, "default")]),
+				d("div", P, [x(e.$slots, "default")]),
 				s[1] ||= d("span", {
 					class: "v-dialog-edge v-dialog-edge--bottom",
 					"aria-hidden": "true"
 				}, null, -1)
 			]),
-			e.$slots.footer ? (y(), u("footer", P, [x(e.$slots, "footer")])) : l("", !0)
+			e.$slots.footer ? (y(), u("footer", F, [x(e.$slots, "footer")])) : l("", !0)
 		], 16, k)) : l("", !0)], 64));
 	}
 });
 //#endregion
-export { F as default };
+export { I as default };
 
 //# sourceMappingURL=VDialog.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"VDialog.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VDialog/VDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * A modal dialog: it takes over the page until the reader answers it.\n *\n * Almost everything that makes a modal correct comes free with the native `<dialog>`\n * element opened as a modal — it is drawn above the whole page, the background is\n * dimmed and made unusable, the focus is trapped inside it and handed back to the\n * trigger on closing, and whether a click outside or Escape dismisses it is declared\n * with an attribute rather than coded.\n *\n * The ONLY behavioural JavaScript is the bridge between `v-model:open` and the two\n * methods the platform offers no declarative equivalent for: opening as a modal, and\n * closing.\n */\n\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, useId, watch } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport VTypography from '../VTypography/VTypography.vue'\nimport { useMessages } from '../../i18n/state'\nimport { cssSize } from '../../utils/css'\n\n/** How assistive technology announces the dialog. */\nexport type DialogRole = 'dialog' | 'alertdialog'\n\ninterface DialogProps {\n  /**\n   * The title of the dialog, which also names it for assistive technology. It is\n   * ignored when the `#header` slot replaces the whole header.\n   */\n  title?: string\n  /** A line under the title, explaining what the dialog is asking. */\n  subtitle?: string\n  /**\n   * How wide the dialog is: a number is read as pixels, a string as any CSS length. Left\n   * out, it takes the `--vectis-control-size-dialog-width` token, 400px by default. It is\n   * never allowed to exceed the width of the viewport.\n   */\n  width?: number | string\n  /**\n   * What kind of dialog this is. `alertdialog` is for one that must be answered\n   * explicitly, and it makes screen readers announce it more insistently. VDialogAlert is\n   * exactly that.\n   */\n  role?: DialogRole\n  /**\n   * Takes the close cross out of the header, leaving the reader with Escape, the\n   * backdrop and whatever the footer offers.\n   */\n  hideClose?: boolean\n  /** Stops a click outside the dialog from closing it. */\n  persistentBackdrop?: boolean\n  /**\n   * Stops the Escape key from closing the dialog. Note that refusing Escape while the\n   * backdrop still closes cannot be expressed natively, so both routes are then\n   * allowed.\n   */\n  persistentEscape?: boolean\n  /** What the close cross does, in words. It falls back to the design system dictionary. */\n  closeLabel?: string\n}\n\nconst props = withDefaults(defineProps<DialogProps>(), {\n  title: undefined,\n  subtitle: undefined,\n  width: undefined,\n  role: 'dialog',\n  hideClose: false,\n  persistentBackdrop: false,\n  persistentEscape: false,\n  closeLabel: undefined,\n})\n\nconst m = useMessages()\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? m.value.common.close)\n\n/**\n * Whether the dialog is showing. It starts closed, and it is BIDIRECTIONAL: the browser\n * writes back to it whenever the dialog closes on its own, through Escape or the backdrop,\n * so a consumer never has to reset it by hand.\n */\nconst open = defineModel<boolean>('open', { default: false })\n\n/** What the trigger has to carry: the click that opens the dialog, and the fact that it does. */\nexport type DialogTriggerProps = {\n  onClick: () => void\n  'aria-haspopup': 'dialog'\n}\n\ndefineSlots<{\n  /** The body of the dialog. This is the part that scrolls when there is too much of it. */\n  default(): unknown\n  /** Replaces the title and subtitle block with content of your own. */\n  header?(): unknown\n  /** Extra controls in the header, placed before the close cross: a menu, a full-screen toggle. */\n  'header-actions'?(): unknown\n  /** The buttons at the foot of the dialog. */\n  footer?(): unknown\n  /**\n   * The button that opens the dialog. Bind the `triggerProps` it receives onto it. It\n   * stays rendered at all times, unlike the dialog itself.\n   */\n  trigger?(props: { triggerProps: DialogTriggerProps }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst attrs = useAttrs()\nconst dialogEl = ref<HTMLDialogElement | null>(null)\nconst titleId = useId()\nconst subtitleId = useId()\n\n/**\n * Which dismissals the browser itself accepts, declared as an attribute rather than\n * handled in code: everything, Escape alone, or nothing.\n *\n * One combination cannot be expressed that way — a click outside allowed while Escape\n * is not — and it falls back to allowing both. Nothing in the design system asks for\n * it, and it would be a strange thing to want.\n */\nconst closedby = computed(() =>\n  props.persistentBackdrop ? (props.persistentEscape ? 'none' : 'closerequest') : 'any',\n)\n\n// @fallback\n// The `closedby` attribute is newer than the type definitions shipped with\n// TypeScript, so writing it directly in the template would be reported as an unknown\n// attribute. Passing it inside a bound object goes through the same path as any\n// forwarded attribute, which is not checked element by element. Vue still merges the\n// `class` and `style` it may contain with the static ones below.\nconst rootAttrs = computed(() => ({ ...attrs, closedby: closedby.value }))\n\n// The dialog and its content only exist while it is open, which also spares the page\n// whatever heavy thing it contains. Every opening therefore builds a BRAND NEW\n// element, so it is always opened as a modal from a clean slate, and closing removes\n// it entirely — nothing is left behind to swallow clicks, and reopening cannot race\n// with a closing that is still finishing. The trigger, by contrast, stays rendered at\n// all times.\nconst rendered = ref(open.value)\n\n/**\n * Settles once the dialog opened by the latest change of `open` is actually showing. The\n * opening waits for the element to be rendered, so it is always a tick behind the model.\n */\nlet opening: Promise<void> = Promise.resolve()\n\nfunction show(): Promise<void> {\n  open.value = true\n  // The watcher below only runs when the scheduler flushes, so `opening` is read from a\n  // tick later: read at once, it would still be the promise of the previous opening.\n  return nextTick(() => opening)\n}\n\nfunction requestClose() {\n  // Closing the element is enough: the browser then fires its own close event, which\n  // is what puts the model back in step below.\n  dialogEl.value?.close()\n}\n\nconst triggerProps = computed<DialogTriggerProps>(() => ({\n  onClick: show,\n  'aria-haspopup': 'dialog',\n}))\n\n// The `<dialog>` element is asymmetric in a way that shapes this whole bridge: it\n// announces every closing with an event, but announces nothing at all when it opens —\n// where a popover reports both. So the two directions are not written the same way:\n//\n//  - opening: render the element, then, once Vue has actually put it in the document,\n//    open it as a modal;\n//  - closing: whatever closed it — the cross, our own call, Escape, a click outside —\n//    the browser's close event is what puts the model back in step, and only then is\n//    the element removed.\nwatch(open, (value) => {\n  if (value) {\n    rendered.value = true\n    // the brand new <dialog> has to exist before it can be opened\n    opening = nextTick(() => dialogEl.value?.showModal())\n  } else {\n    dialogEl.value?.close()\n    rendered.value = false\n  }\n})\n\n// @ssr\nonMounted(() => {\n  // A watcher does not run during the server render, so a dialog asked to be open from\n  // the start would never be opened. The element is already there — the flag above was\n  // initialized from the model — it just has to be told to show itself.\n  if (open.value) dialogEl.value?.showModal()\n})\n\n// The browser's own close event, whatever caused it, is what brings the model back in\n// step with reality.\n//\n// TRAP — only the element on screen may do it. A close event is queued as a TASK, so the\n// one fired by the element a quick close-and-reopen has just replaced arrives after the new\n// element exists, and without the check it closed the dialog that had just opened.\nfunction onClose(event: Event) {\n  if (event.target !== dialogEl.value) return\n  open.value = false\n}\n\n// @core\n// An open dialog removed with its parent (a `v-if`, a route change) runs no close steps,\n// so no close event would come: the model is handed back closed here, or it stayed `true`\n// and the dialog reopened by itself the next time its parent was shown.\nonBeforeUnmount(() => {\n  if (open.value) open.value = false\n})\n\n// @fallback\n/*\n * `closedby` is what applies `persistentBackdrop` and `persistentEscape`, and Safari does\n * not implement it: there Escape always closes and the backdrop never does. The two halves\n * are rebuilt below, and ONLY where the attribute is unknown, so a browser that has it is\n * never second-guessed. The support is asked at event time: there is no DOM during setup.\n */\nconst closedbyUnsupported = () => !('closedBy' in HTMLDialogElement.prototype)\n\nfunction onCancel(event: Event) {\n  if (closedbyUnsupported() && closedby.value === 'none') event.preventDefault()\n}\n\n/**\n * Whether a point lies outside the dialog's box, which is where the backdrop is: a click on\n * the `::backdrop` is dispatched to the dialog element itself.\n */\nfunction outsideBox(event: MouseEvent) {\n  const box = dialogEl.value?.getBoundingClientRect()\n  if (!box) return false\n  return (\n    event.clientX < box.left ||\n    event.clientX > box.right ||\n    event.clientY < box.top ||\n    event.clientY > box.bottom\n  )\n}\n\n// A press that STARTED inside and ended on the backdrop (a text selection dragged past the\n// edge) is not a click on the backdrop, so the press is remembered, not only the release.\nlet pressedOnBackdrop = false\nfunction onPointerdown(event: PointerEvent) {\n  pressedOnBackdrop = event.target === dialogEl.value && outsideBox(event)\n}\nfunction onBackdropClick(event: MouseEvent) {\n  const onBackdrop = pressedOnBackdrop && event.target === dialogEl.value && outsideBox(event)\n  pressedOnBackdrop = false\n  if (onBackdrop && closedbyUnsupported() && closedby.value === 'any') requestClose()\n}\n\ndefineExpose({\n  /**\n   * Opens the dialog, exactly as setting `open` does. The opening lands on the next tick,\n   * once the element has been rendered: `el` is still null right after the call, and the\n   * promise returned settles once the dialog is showing.\n   */\n  show,\n  /**\n   * Closes the dialog. It closes unconditionally, `persistentEscape` and\n   * `persistentBackdrop` governing only the two routes the reader can take.\n   */\n  close: requestClose,\n  /** The `<dialog>` element. It is null while closed: each opening builds a fresh one. */\n  el: dialogEl,\n})\n</script>\n\n<template>\n  <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n  <dialog\n    v-if=\"rendered\"\n    ref=\"dialogEl\"\n    :aria-labelledby=\"title ? titleId : undefined\"\n    :aria-describedby=\"subtitle ? subtitleId : undefined\"\n    v-bind=\"rootAttrs\"\n    class=\"v-dialog\"\n    :style=\"{ '--dialog-width': cssSize(width) }\"\n    :role=\"role === 'alertdialog' ? 'alertdialog' : undefined\"\n    @close=\"onClose\"\n    @cancel=\"onCancel\"\n    @pointerdown=\"onPointerdown\"\n    @click=\"onBackdropClick\"\n  >\n    <!--\n      The header and the footer stay put while only the body scrolls, so the scrollbar\n      is confined to the body and never runs along them.\n\n      The lines that appear under the header and above the footer once the body is\n      scrolled are drawn by two sentinels stuck INSIDE the scrolling area, and not by\n      the header and footer themselves: a container query can only style what is inside\n      the container it asks about, never a sibling of it.\n    -->\n    <header class=\"v-dialog-header\">\n      <slot name=\"header\">\n        <div class=\"v-dialog-titles\">\n          <VTypography\n            v-if=\"title\"\n            :id=\"titleId\"\n            as=\"h2\"\n            variant=\"heading-3\"\n            class=\"v-dialog-title\"\n          >\n            {{ title }}\n          </VTypography>\n          <VTypography\n            v-if=\"subtitle\"\n            :id=\"subtitleId\"\n            variant=\"subtitle\"\n            tone=\"muted\"\n            class=\"v-dialog-subtitle\"\n          >\n            {{ subtitle }}\n          </VTypography>\n        </div>\n      </slot>\n      <div v-if=\"!hideClose || $slots['header-actions']\" class=\"v-dialog-header-actions\">\n        <slot name=\"header-actions\" />\n        <VIconButton\n          v-if=\"!hideClose\"\n          class=\"v-dialog-close\"\n          :label=\"resolvedCloseLabel\"\n          variant=\"ghost\"\n          tone=\"neutral\"\n          size=\"sm\"\n          @click=\"requestClose\"\n        >\n          <VIcon :name=\"closeIcon\" />\n        </VIconButton>\n      </div>\n    </header>\n    <div class=\"v-dialog-scroll\">\n      <span class=\"v-dialog-edge v-dialog-edge--top\" aria-hidden=\"true\" />\n      <div class=\"v-dialog-body\">\n        <slot />\n      </div>\n      <span class=\"v-dialog-edge v-dialog-edge--bottom\" aria-hidden=\"true\" />\n    </div>\n    <footer v-if=\"$slots.footer\" class=\"v-dialog-footer\">\n      <slot name=\"footer\" />\n    </footer>\n  </dialog>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-dialog {\n    /* The width comes from the prop, set inline, or from the token when there is none.\n       Whatever it asks for, the dialog is never allowed past the viewport, margins included.\n\n       TRAP — the token is declared ON the element rather than written as a `var()` fallback.\n       A custom property inherits, and a dialog opened from inside another one is its DOM\n       descendant: with a fallback, an alert confirming something in an 800px dialog would\n       read that dialog's inline width and open 800px wide itself, with no error anywhere. */\n    --dialog-width: var(--vectis-control-size-dialog-width);\n    inline-size: var(--dialog-width);\n    max-inline-size: calc(100dvi - 2 * var(--vectis-space-4));\n    max-block-size: calc(100dvb - 2 * var(--vectis-space-4));\n    /* This puts the dialog back in the middle of the screen. The browser centres a\n       modal with an automatic margin, which the design system's own reset — where\n       every element loses its margins — had removed; restoring it here works because\n       the component layer is stronger than the reset one. */\n    margin: auto;\n    /* The header and footer stay put while only the body scrolls, and hiding the\n       overflow is what keeps the content inside the rounded corners. */\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    padding: 0;\n    border: none;\n    border-radius: var(--vectis-radius-overlay);\n    background: var(--vectis-color-surface-overlay);\n    color: var(--vectis-color-text);\n    box-shadow: var(--vectis-shadow-xl);\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * An indispensable guard. The browser hides a closed dialog with a rule of its own,\n   * but any display we declare above beats it — so without this, a closed dialog would\n   * sit in the page at the top left, swallowing clicks.\n   *\n   * It also covers the two moments where the element exists without being open yet: the\n   * frame between rendering it and opening it, and the server-rendered markup. The\n   * popovers have the very same guard.\n   */\n  .v-dialog:not([open]) {\n    display: none;\n  }\n\n  /* Opening a modal puts the focus on the dialog itself. No ring is drawn around the\n     whole thing for that: the focus a reader needs to see is the one on the controls\n     inside. */\n  .v-dialog:focus-visible {\n    outline: none;\n  }\n\n  .v-dialog-scroll {\n    /* The ONLY part that scrolls. It takes whatever room is left between the header\n       and the footer, which is what keeps the scrollbar confined to it. The zero\n       minimum is load-bearing: without it a flex item refuses to shrink below its\n       content, and nothing would ever scroll. */\n    flex: 1 1 auto;\n    min-block-size: 0;\n    overflow-y: auto;\n    /* A wheel reaching the end of the content stops there rather than scrolling the page\n       behind the modal. */\n    overscroll-behavior: contain;\n    display: flex;\n    flex-direction: column;\n    /* This makes the box something its descendants can ask questions about — namely\n       whether there is content hidden above or below. It adds no containment of size. */\n    container-type: scroll-state;\n  }\n\n  /*\n   * The two sentinels: hairlines stuck to the top and the bottom of the scrolling\n   * area, and descendants of it, which is what allows them to ask about its scroll\n   * state. Their negative margins mean they occupy no space at all. They are\n   * transparent until the rules further down reveal them.\n   */\n  .v-dialog-edge {\n    flex: none;\n    block-size: 1px;\n    position: sticky;\n    background: transparent;\n  }\n\n  .v-dialog-edge--top {\n    inset-block-start: 0;\n    margin-block-end: -1px;\n  }\n\n  .v-dialog-edge--bottom {\n    inset-block-end: 0;\n    margin-block-start: -1px;\n  }\n\n  .v-dialog-header {\n    flex: none; /* stays at the top, outside whatever scrolls */\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--vectis-space-4);\n    padding: var(--vectis-space-6) var(--vectis-space-6) var(--vectis-space-3);\n  }\n\n  .v-dialog-titles {\n    display: flex;\n    flex-direction: column;\n    min-inline-size: 0;\n  }\n\n  /* The title and the subtitle are rendered by VTypography, which carries their type.\n     Their classes remain as hooks, for a consumer's overrides and for the tests. */\n\n  .v-dialog-header-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n    /* The cross is a button, so it carries invisible padding of its own; pulling the\n       row back by that amount is what makes the glyph line up with the header's edge\n       rather than floating inside it. */\n    margin-block-start: calc(-1 * var(--vectis-space-1));\n    margin-inline-end: calc(-1 * var(--vectis-space-2));\n  }\n\n  .v-dialog-body {\n    /* Short content is stretched to fill the space, so the footer stays at the bottom\n       of the dialog rather than floating halfway up; long content keeps its natural\n       height, overflows, and is what scrolls. */\n    flex: 1 0 auto;\n    padding: var(--vectis-space-1) var(--vectis-space-6) var(--vectis-space-3);\n    font-size: var(--vectis-text-body-md-size);\n    line-height: var(--vectis-text-body-md-leading);\n  }\n\n  .v-dialog-footer {\n    flex: none; /* stays at the bottom, outside whatever scrolls */\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-wrap: wrap;\n    gap: var(--vectis-space-3);\n    padding: var(--vectis-space-3) var(--vectis-space-6) var(--vectis-space-6);\n  }\n\n  /*\n   * The lines only appear when they mean something. Asking the scrolling area whether\n   * it can still be scrolled upwards tells us content is hidden ABOVE, so the line\n   * under the header is shown; the same question downwards reveals the one above the\n   * footer. In other words each line is drawn exactly when content is passing behind\n   * the edge it marks.\n   *\n   * This kind of query is Chrome 133 and later for now. Where it is missing the\n   * sentinels simply stay transparent, which is the intended fallback.\n   */\n  @container scroll-state(scrollable: top) {\n    .v-dialog-edge--top {\n      background: var(--vectis-color-border);\n    }\n  }\n\n  @container scroll-state(scrollable: bottom) {\n    .v-dialog-edge--bottom {\n      background: var(--vectis-color-border);\n    }\n  }\n\n  /*\n   * The dialog animates on the way IN and not on the way out. Since it is removed from\n   * the page the moment it closes, there is nothing left to animate out — that is the\n   * price of the clean slate the lazy rendering buys, and it also spares the extra\n   * declarations an exit animation would need.\n   *\n   * The starting values below are where a freshly rendered dialog begins, before\n   * settling into its open state.\n   */\n  .v-dialog {\n    transition:\n      opacity var(--vectis-duration-base) var(--vectis-ease-default),\n      transform var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  @starting-style {\n    .v-dialog[open] {\n      opacity: 0;\n      transform: scale(0.97);\n    }\n  }\n\n  .v-dialog::backdrop {\n    background: var(--vectis-color-backdrop);\n    transition: opacity var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  @starting-style {\n    .v-dialog[open]::backdrop {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-dialog,\n    .v-dialog::backdrop {\n      transition: none;\n    }\n  }\n\n  /* Windows forced colors flattens the dialog's background to Canvas and drops its shadow,\n     which were its only edge: it would float over the page with no boundary at all. An\n     outline draws one without moving the layout by a pixel. */\n  @media (forced-colors: active) {\n    .v-dialog {\n      outline: 1px solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"VDialog.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VDialog/VDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * Native showModal supplies top-layer placement and modal focus. JavaScript bridges v-model to\n * imperative open/close and provides guarded dismissal where closedBy is absent.\n */\n\nimport { computed, nextTick, onBeforeUnmount, ref, useAttrs, useId, watch } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport VTypography from '../VTypography/VTypography.vue'\nimport { useMessages } from '../../i18n/state'\nimport { cssSize } from '../../utils/css'\n\n/** How assistive technology announces the dialog. */\nexport type DialogRole = 'dialog' | 'alertdialog'\n\ninterface DialogProps {\n  /**\n   * The title of the dialog, which also names it for assistive technology. It is\n   * ignored when the `#header` slot replaces the whole header.\n   */\n  title?: string\n  /** A line under the title, explaining what the dialog is asking. */\n  subtitle?: string\n  /**\n   * How wide the dialog is: a number is read as pixels, a string as any CSS length. Left out,\n   * it takes the `--vectis-control-size-dialog-width` token, 400px by default.\n   */\n  width?: number | string\n  /**\n   * What kind of dialog this is. `alertdialog` is for one that must be answered\n   * explicitly, and it makes screen readers announce it more insistently. VDialogAlert is\n   * exactly that.\n   */\n  role?: DialogRole\n  /**\n   * Takes the close cross out of the header, leaving the reader with Escape, the\n   * backdrop and whatever the footer offers.\n   */\n  hideClose?: boolean\n  /** Stops a click outside the dialog from closing it. */\n  persistentBackdrop?: boolean\n  /**\n   * Stops the Escape key from closing the dialog. Note that refusing Escape while the\n   * backdrop still closes cannot be expressed natively, so both routes are then\n   * allowed.\n   */\n  persistentEscape?: boolean\n  /** What the close cross does, in words. It falls back to the design system dictionary. */\n  closeLabel?: string\n}\n\nconst props = withDefaults(defineProps<DialogProps>(), {\n  title: undefined,\n  subtitle: undefined,\n  width: undefined,\n  role: 'dialog',\n  hideClose: false,\n  persistentBackdrop: false,\n  persistentEscape: false,\n  closeLabel: undefined,\n})\n\nconst m = useMessages()\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? m.value.common.close)\n\n/** Whether the dialog is showing. */\nconst open = defineModel<boolean>('open', { default: false })\n\n/** What the trigger has to carry: the click that opens the dialog, and the fact that it does. */\nexport type DialogTriggerProps = {\n  onClick: () => void\n  'aria-haspopup': 'dialog'\n}\n\ndefineSlots<{\n  /** The body of the dialog. This is the part that scrolls when there is too much of it. */\n  default(): unknown\n  /** Replaces the title and subtitle block with content of your own. */\n  header?(): unknown\n  /** Extra controls in the header, placed before the close cross: a menu, a full-screen toggle. */\n  'header-actions'?(): unknown\n  /** The buttons at the foot of the dialog. */\n  footer?(): unknown\n  /**\n   * The button that opens the dialog. Bind the `triggerProps` it receives onto it. It stays\n   * rendered always, unlike the dialog itself.\n   */\n  trigger?(props: { triggerProps: DialogTriggerProps }): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst attrs = useAttrs()\nconst dialogEl = ref<HTMLDialogElement | null>(null)\nconst titleId = useId()\nconst subtitleId = useId()\n\n/**\n * Which dismissals the browser itself accepts, declared as an attribute rather than handled in\n * code: everything, Escape alone, or nothing. One combination cannot be expressed that way; a\n * click outside allowed while Escape is not; and it falls back to allowing both.\n */\nconst closedby = computed(() =>\n  props.persistentBackdrop ? (props.persistentEscape ? 'none' : 'closerequest') : 'any',\n)\n\n// @fallback\n// The `closedby` attribute is newer than the type definitions shipped with TypeScript, so\n// writing it directly in the template would be reported as an unknown attribute. Passing it\n// inside a bound object goes through the same path as any forwarded attribute, which is not\n// checked element by element.\nconst rootAttrs = computed(() => ({ ...attrs, closedby: closedby.value }))\n\nfunction show(): Promise<void> {\n  open.value = true\n  return nextTick()\n}\n\nfunction requestClose() {\n  // Closing the element is enough: the browser then fires its own close event, which puts the\n  // model back in step below.\n  dialogEl.value?.close()\n}\n\nconst triggerProps = computed<DialogTriggerProps>(() => ({\n  onClick: show,\n  'aria-haspopup': 'dialog',\n}))\n\n// Close before v-if removes the element so the browser restores the invoker's focus.\nwatch(open, (value) => {\n  if (!value) dialogEl.value?.close()\n})\n\n// @ssr\n// Template refs become available after mounting, including when hydrating an open dialog.\nwatch(dialogEl, (dialog) => dialog?.showModal(), { flush: 'post' })\n\n// Ignore close events from replaced elements: the queued event from a quick close-and-reopen\n// must not close the new dialog.\nfunction onClose(event: Event) {\n  if (event.target !== dialogEl.value) return\n  open.value = false\n}\n\n// @core\n// An open dialog removed with its parent (a `v-if`, a route change) runs no close steps,\n// so no close event would come: the model is handed back closed here, or it stayed `true`\n// and the dialog reopened by itself the next time its parent was shown.\nonBeforeUnmount(() => {\n  if (open.value) open.value = false\n})\n\n// @fallback\n/*\n * `closedby` is what applies `persistentBackdrop` and `persistentEscape`, and Safari does not\n * implement it: there Escape always closes and the backdrop never does. The two halves are\n * rebuilt below, and only where the attribute is unknown, so a browser that has it is never\n * second-guessed.\n */\nconst closedbyUnsupported = () => !('closedBy' in HTMLDialogElement.prototype)\n\nfunction onCancel(event: Event) {\n  if (closedbyUnsupported() && closedby.value === 'none') event.preventDefault()\n}\n\n/**\n * Whether a point lies outside the dialog's box, which is where the backdrop is: a click on\n * the `::backdrop` is dispatched to the dialog element itself.\n */\nfunction outsideBox(event: MouseEvent) {\n  const box = dialogEl.value?.getBoundingClientRect()\n  if (!box) return false\n  return (\n    event.clientX < box.left ||\n    event.clientX > box.right ||\n    event.clientY < box.top ||\n    event.clientY > box.bottom\n  )\n}\n\n// A press that STARTED inside and ended on the backdrop (a text selection dragged past the\n// edge) is not a click on the backdrop, so the press is remembered, not only the release.\nlet pressedOnBackdrop = false\nfunction onPointerdown(event: PointerEvent) {\n  pressedOnBackdrop = closedbyUnsupported() && event.target === dialogEl.value && outsideBox(event)\n}\nfunction onBackdropClick(event: MouseEvent) {\n  const onBackdrop = pressedOnBackdrop && event.target === dialogEl.value && outsideBox(event)\n  pressedOnBackdrop = false\n  if (onBackdrop && closedbyUnsupported() && closedby.value === 'any') requestClose()\n}\n\ndefineExpose({\n  /**\n   * Opens the dialog, exactly as setting `open` does. The opening lands on the next tick,\n   * once the element has been rendered: `el` is still null right after the call, and the\n   * promise returned settles once the dialog is showing.\n   */\n  show,\n  /**\n   * Closes the dialog. It closes unconditionally, `persistentEscape` and\n   * `persistentBackdrop` governing only the two routes the reader can take.\n   */\n  close: requestClose,\n  /** The `<dialog>` element. It is null while closed: each opening builds a fresh one. */\n  el: dialogEl,\n})\n</script>\n\n<template>\n  <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n  <dialog\n    v-if=\"open\"\n    ref=\"dialogEl\"\n    :aria-labelledby=\"title ? titleId : undefined\"\n    :aria-describedby=\"subtitle ? subtitleId : undefined\"\n    v-bind=\"rootAttrs\"\n    class=\"v-dialog\"\n    :style=\"{ '--dialog-width': cssSize(width) }\"\n    :role=\"role === 'alertdialog' ? 'alertdialog' : undefined\"\n    @close=\"onClose\"\n    @cancel=\"onCancel\"\n    @pointerdown=\"onPointerdown\"\n    @click=\"onBackdropClick\"\n  >\n    <!--\n      The header and the footer stay put while only the body scrolls, so the scrollbar\n      is confined to the body and never runs along them.\n\n      The lines that appear under the header and above the footer once the body is\n      scrolled are drawn by two sentinels stuck INSIDE the scrolling area, and not by\n      the header and footer themselves: a container query can only style what is inside\n      the container it asks about, never a sibling of it.\n    -->\n    <header class=\"v-dialog-header\">\n      <slot name=\"header\">\n        <div class=\"v-dialog-titles\">\n          <VTypography\n            v-if=\"title\"\n            :id=\"titleId\"\n            as=\"h2\"\n            variant=\"heading-3\"\n            class=\"v-dialog-title\"\n          >\n            {{ title }}\n          </VTypography>\n          <VTypography\n            v-if=\"subtitle\"\n            :id=\"subtitleId\"\n            variant=\"subtitle\"\n            tone=\"muted\"\n            class=\"v-dialog-subtitle\"\n          >\n            {{ subtitle }}\n          </VTypography>\n        </div>\n      </slot>\n      <div v-if=\"!hideClose || $slots['header-actions']\" class=\"v-dialog-header-actions\">\n        <slot name=\"header-actions\" />\n        <VIconButton\n          v-if=\"!hideClose\"\n          class=\"v-dialog-close\"\n          :label=\"resolvedCloseLabel\"\n          variant=\"ghost\"\n          tone=\"neutral\"\n          size=\"sm\"\n          @click=\"requestClose\"\n        >\n          <VIcon :name=\"closeIcon\" />\n        </VIconButton>\n      </div>\n    </header>\n    <div class=\"v-dialog-scroll\">\n      <span class=\"v-dialog-edge v-dialog-edge--top\" aria-hidden=\"true\" />\n      <div class=\"v-dialog-body\">\n        <slot />\n      </div>\n      <span class=\"v-dialog-edge v-dialog-edge--bottom\" aria-hidden=\"true\" />\n    </div>\n    <footer v-if=\"$slots.footer\" class=\"v-dialog-footer\">\n      <slot name=\"footer\" />\n    </footer>\n  </dialog>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-dialog {\n    /*\n     * The token is declared on the element rather than written as a `var()` fallback. A custom\n     * property inherits, and a dialog opened from inside another one is its DOM descendant:\n     * with a fallback, an alert confirming something in an 800px dialog would read that\n     * dialog's inline width and open 800px wide itself, with no error anywhere.\n     */\n    --dialog-width: var(--vectis-control-size-dialog-width);\n    inline-size: var(--dialog-width);\n    max-inline-size: calc(100dvi - 2 * var(--vectis-space-4));\n    max-block-size: calc(100dvb - 2 * var(--vectis-space-4));\n    /*\n     * Restore the modal's automatic margins in the component layer because the reset removes\n     * native dialog centring.\n     */\n    margin: auto;\n    /* The header and footer stay put while only the body scrolls, and hiding the\n       overflow is what keeps the content inside the rounded corners. */\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    padding: 0;\n    border: none;\n    border-radius: var(--vectis-radius-overlay);\n    background: var(--vectis-color-surface-overlay);\n    color: var(--vectis-color-text);\n    box-shadow: var(--vectis-shadow-xl);\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * An indispensable guard. The browser hides a closed dialog with a rule of its own, but any\n   * display we declare above beats it; so without this, a closed dialog would sit in the page\n   * at the top left, swallowing clicks.\n   */\n  .v-dialog:not([open]) {\n    display: none;\n  }\n\n  /* Opening a modal puts the focus on the dialog itself. No ring is drawn around the\n     whole thing for that: the focus a reader needs to see is the one on the controls\n     inside. */\n  .v-dialog:focus-visible {\n    outline: none;\n  }\n\n  .v-dialog-scroll {\n    /*\n     * The zero minimum is load-bearing: without it a flex item refuses to shrink below its\n     * content, and nothing would ever scroll.\n     */\n    flex: 1 1 auto;\n    min-block-size: 0;\n    overflow-y: auto;\n    /* A wheel reaching the end of the content stops there rather than scrolling the page\n       behind the modal. */\n    overscroll-behavior: contain;\n    display: flex;\n    flex-direction: column;\n    /*\n     * This makes the box something its descendants can ask questions about; namely whether\n     * there is content hidden above or below. It adds no containment of size.\n     */\n    container-type: scroll-state;\n  }\n\n  /*\n   * The two sentinels: hairlines stuck to the top and the bottom of the scrolling area, and\n   * descendants of it, which allows them to ask about its scroll state. Their negative margins\n   * mean they occupy no space at all.\n   */\n  .v-dialog-edge {\n    flex: none;\n    block-size: 1px;\n    position: sticky;\n    background: transparent;\n  }\n\n  .v-dialog-edge--top {\n    inset-block-start: 0;\n    margin-block-end: -1px;\n  }\n\n  .v-dialog-edge--bottom {\n    inset-block-end: 0;\n    margin-block-start: -1px;\n  }\n\n  .v-dialog-header {\n    flex: none;\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--vectis-space-4);\n    padding: var(--vectis-space-6) var(--vectis-space-6) var(--vectis-space-3);\n  }\n\n  .v-dialog-titles {\n    display: flex;\n    flex-direction: column;\n    min-inline-size: 0;\n  }\n\n  /* The title and the subtitle are rendered by VTypography, which carries their type.\n     Their classes remain as hooks, for a consumer's overrides and for the tests. */\n\n  .v-dialog-header-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n    /* The cross is a button, so it carries invisible padding of its own; pulling the\n       row back by that amount is what makes the glyph line up with the header's edge\n       rather than floating inside it. */\n    margin-block-start: calc(-1 * var(--vectis-space-1));\n    margin-inline-end: calc(-1 * var(--vectis-space-2));\n  }\n\n  .v-dialog-body {\n    /* Short content is stretched to fill the space, so the footer stays at the bottom\n       of the dialog rather than floating halfway up; long content keeps its natural\n       height, overflows, and is what scrolls. */\n    flex: 1 0 auto;\n    padding: var(--vectis-space-1) var(--vectis-space-6) var(--vectis-space-3);\n    font-size: var(--vectis-text-body-md-size);\n    line-height: var(--vectis-text-body-md-leading);\n  }\n\n  .v-dialog-footer {\n    flex: none;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-wrap: wrap;\n    gap: var(--vectis-space-3);\n    padding: var(--vectis-space-3) var(--vectis-space-6) var(--vectis-space-6);\n  }\n\n  /* Where it is missing the sentinels simply stay transparent, which is the intended fallback. */\n  @container scroll-state(scrollable: top) {\n    .v-dialog-edge--top {\n      background: var(--vectis-color-border);\n    }\n  }\n\n  @container scroll-state(scrollable: bottom) {\n    .v-dialog-edge--bottom {\n      background: var(--vectis-color-border);\n    }\n  }\n\n  /*\n   * The dialog animates on the way in and not on the way out. Since it is removed from the page\n   * the moment it closes, there is nothing left to animate out; that is the price of the clean\n   * slate the lazy rendering buys, and it also spares the extra declarations an exit animation\n   * would need.\n   */\n  .v-dialog {\n    transition:\n      opacity var(--vectis-duration-base) var(--vectis-ease-default),\n      transform var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  @starting-style {\n    .v-dialog[open] {\n      opacity: 0;\n      transform: scale(0.97);\n    }\n  }\n\n  .v-dialog::backdrop {\n    background: var(--vectis-color-backdrop);\n    transition: opacity var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  @starting-style {\n    .v-dialog[open]::backdrop {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-dialog,\n    .v-dialog::backdrop {\n      transition: none;\n    }\n  }\n\n  /* An outline draws one without moving the layout by a pixel. */\n  @media (forced-colors: active) {\n    .v-dialog {\n      outline: 1px solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VDialog/VDialogAlert.d.ts

@@ -8,9 +8,8 @@ interface DialogAlertProps {
     /** A line under the title, spelling out the consequences of the answer. */
     subtitle?: string;
     /**
-     * How wide the alert is: a number is read as pixels, a string as any CSS length. Left
-     * out, it takes the `--vectis-control-size-dialog-width` token, 400px by default. It is
-     * never allowed to exceed the width of the viewport.
+     * How wide the alert is: a number is read as pixels, a string as any CSS length. Left out, it
+     * takes the `--vectis-control-size-dialog-width` token, 400px by default.
      */
     width?: number | string;
 }