@vonage/vivid 5.4.0 → 5.5.0

package/unbundled/calendar-picker.template.cjs

@@ -7,7 +7,7 @@ const divider = require('./divider.cjs');
 const button_definition = require('./definition.cjs');
 const visuallyHidden_definition = require('../visually-hidden/definition.cjs');
 
-const calendarStyles = ".segments{display:inline-flex;gap:24px}.segment{display:flex;flex-direction:column;gap:12px}.segment .header{display:flex;align-items:center;padding-block:8px}.segment .title{display:flex;flex-grow:1;justify-content:center}.segment .title-action{border-radius:8px;block-size:24px;font:var(--vvd-typography-base-extended);padding-inline:8px}.calendar{display:flex;flex-direction:column;margin-top:8px;gap:4px}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{display:flex;justify-content:center}.calendar .calendar-weekday{display:inline-flex;align-items:center;justify-content:center;block-size:16px;font:var(--vvd-typography-base-condensed);inline-size:40px}.calendar .calendar-week{display:flex;justify-content:center}.calendar .calendar-day{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:28px;font:var(--vvd-typography-base);margin-inline:6px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar:focus-visible .calendar .calendar-day.start,.calendar:focus-visible .calendar .calendar-day.end{border-width:3px}.calendar .calendar-day:before,.calendar .calendar-day:after{position:absolute;z-index:-1;display:block;width:20px;height:28px}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{display:flex;flex-direction:column;gap:34px}.month-grid .months-row{display:flex;justify-content:center;gap:29px}.month-grid .month{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{--_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-date-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300))}.button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.button:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.button.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.button.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.button.selected:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button.selected.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.button:disabled{cursor:not-allowed}.button:focus:not(.title-action),.button.title-action:focus-visible{--focus-stroke-gap-color: transparent;color:var(--vvd-color-canvas-text);box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.button:focus:not(.title-action).start,.button:focus:not(.title-action).end,.button.title-action:focus-visible.start,.button.title-action:focus-visible.end{border-width:3px}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button.selected{border:1px solid var(--vvd-color-neutral-900)}";
+const calendarStyles = ".segments{gap:24px}@media (width >= 648px){.segments{display:inline-flex}}.segment{display:flex;flex-direction:column;gap:12px}.segment .header{display:flex;align-items:center;padding-block:8px}.segment .title{display:flex;flex-grow:1;justify-content:center}.segment .title-action{border-radius:8px;block-size:24px;font:var(--vvd-typography-base-extended);padding-inline:8px}.calendar{display:flex;flex-direction:column;margin-top:8px;gap:4px}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{display:flex;justify-content:center}.calendar .calendar-weekday{display:inline-flex;align-items:center;justify-content:center;block-size:16px;font:var(--vvd-typography-base-condensed);inline-size:40px}.calendar .calendar-week{display:flex;justify-content:center}.calendar .calendar-day{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:28px;font:var(--vvd-typography-base);margin-inline:6px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar:focus-visible .calendar .calendar-day.start,.calendar:focus-visible .calendar .calendar-day.end{border-width:3px}.calendar .calendar-day:before,.calendar .calendar-day:after{position:absolute;z-index:-1;display:block;width:20px;height:28px}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{display:flex;flex-direction:column;gap:34px}.month-grid .months-row{display:flex;justify-content:center;gap:29px}.month-grid .month{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{--_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-date-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300))}.button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.button:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.button.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.button.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.button.selected:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button.selected.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.button:disabled{cursor:not-allowed}.button:focus:not(.title-action),.button.title-action:focus-visible{--focus-stroke-gap-color: transparent;color:var(--vvd-color-canvas-text);box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.button:focus:not(.title-action).start,.button:focus:not(.title-action).end,.button.title-action:focus-visible.start,.button.title-action:focus-visible.end{border-width:3px}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button.selected{border:1px solid var(--vvd-color-neutral-900)}";
 
 const formatDateStr = (date) => dateFns.formatISO(date, { representation: "date" });
 const currentDateStr = (now = /* @__PURE__ */ new Date()) => formatDateStr(now);

package/unbundled/calendar-picker.template.js

@@ -5,7 +5,7 @@ import { D as Divider } from './divider.js';
 import { B as Button } from './definition.js';
 import { VwcVisuallyHiddenElement as VisuallyHidden } from '../visually-hidden/definition.js';
 
-const calendarStyles = ".segments{display:inline-flex;gap:24px}.segment{display:flex;flex-direction:column;gap:12px}.segment .header{display:flex;align-items:center;padding-block:8px}.segment .title{display:flex;flex-grow:1;justify-content:center}.segment .title-action{border-radius:8px;block-size:24px;font:var(--vvd-typography-base-extended);padding-inline:8px}.calendar{display:flex;flex-direction:column;margin-top:8px;gap:4px}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{display:flex;justify-content:center}.calendar .calendar-weekday{display:inline-flex;align-items:center;justify-content:center;block-size:16px;font:var(--vvd-typography-base-condensed);inline-size:40px}.calendar .calendar-week{display:flex;justify-content:center}.calendar .calendar-day{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:28px;font:var(--vvd-typography-base);margin-inline:6px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar:focus-visible .calendar .calendar-day.start,.calendar:focus-visible .calendar .calendar-day.end{border-width:3px}.calendar .calendar-day:before,.calendar .calendar-day:after{position:absolute;z-index:-1;display:block;width:20px;height:28px}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{display:flex;flex-direction:column;gap:34px}.month-grid .months-row{display:flex;justify-content:center;gap:29px}.month-grid .month{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{--_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-date-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300))}.button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.button:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.button.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.button.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.button.selected:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button.selected.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.button:disabled{cursor:not-allowed}.button:focus:not(.title-action),.button.title-action:focus-visible{--focus-stroke-gap-color: transparent;color:var(--vvd-color-canvas-text);box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.button:focus:not(.title-action).start,.button:focus:not(.title-action).end,.button.title-action:focus-visible.start,.button.title-action:focus-visible.end{border-width:3px}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button.selected{border:1px solid var(--vvd-color-neutral-900)}";
+const calendarStyles = ".segments{gap:24px}@media (width >= 648px){.segments{display:inline-flex}}.segment{display:flex;flex-direction:column;gap:12px}.segment .header{display:flex;align-items:center;padding-block:8px}.segment .title{display:flex;flex-grow:1;justify-content:center}.segment .title-action{border-radius:8px;block-size:24px;font:var(--vvd-typography-base-extended);padding-inline:8px}.calendar{display:flex;flex-direction:column;margin-top:8px;gap:4px}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{display:flex;justify-content:center}.calendar .calendar-weekday{display:inline-flex;align-items:center;justify-content:center;block-size:16px;font:var(--vvd-typography-base-condensed);inline-size:40px}.calendar .calendar-week{display:flex;justify-content:center}.calendar .calendar-day{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:28px;font:var(--vvd-typography-base);margin-inline:6px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar:focus-visible .calendar .calendar-day.start,.calendar:focus-visible .calendar .calendar-day.end{border-width:3px}.calendar .calendar-day:before,.calendar .calendar-day:after{position:absolute;z-index:-1;display:block;width:20px;height:28px}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{display:flex;flex-direction:column;gap:34px}.month-grid .months-row{display:flex;justify-content:center;gap:29px}.month-grid .month{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{--_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-date-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300))}.button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.button:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.button.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.button.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.button.selected:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button.selected.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.button:disabled{cursor:not-allowed}.button:focus:not(.title-action),.button.title-action:focus-visible{--focus-stroke-gap-color: transparent;color:var(--vvd-color-canvas-text);box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.button:focus:not(.title-action).start,.button:focus:not(.title-action).end,.button.title-action:focus-visible.start,.button.title-action:focus-visible.end{border-width:3px}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button.selected{border:1px solid var(--vvd-color-neutral-900)}";
 
 const formatDateStr = (date) => formatISO(date, { representation: "date" });
 const currentDateStr = (now = /* @__PURE__ */ new Date()) => formatDateStr(now);

package/unbundled/picker-field.template.cjs

@@ -8,45 +8,13 @@ const vividElement = require('./vivid-element.cjs');
 const withContextualHelp = require('./with-contextual-help.cjs');
 const withErrorText = require('./with-error-text.cjs');
 const formElement = require('./form-element.cjs');
+const trappedFocus = require('./trapped-focus.cjs');
 const localized = require('./localized.cjs');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
 const popup_definition = require('./definition5.cjs');
 const textField_definition = require('../text-field/definition.cjs');
 const button_definition = require('./definition.cjs');
 
-const ignoredEvents = /* @__PURE__ */ new WeakSet();
-const ignoreEventInFocusTraps = (event) => {
-  ignoredEvents.add(event);
-};
-const TrappedFocus = (Base) => {
-  class TrappedFocusElement extends Base {
-    /**
-     * @returns Whether focus was trapped.
-     * @internal
-     */
-    _trappedFocus(event, getFocusableEls) {
-      if (!ignoredEvents.has(event) && event.key === "Tab") {
-        const focusableEls = getFocusableEls();
-        const firstFocusableEl = focusableEls[0];
-        const lastFocusableEl = focusableEls[focusableEls.length - 1];
-        if (event.shiftKey) {
-          if (this.shadowRoot.activeElement === firstFocusableEl) {
-            lastFocusableEl.focus();
-            return true;
-          }
-        } else {
-          if (this.shadowRoot.activeElement === lastFocusableEl) {
-            firstFocusableEl.focus();
-            return true;
-          }
-        }
-      }
-      return false;
-    }
-  }
-  return TrappedFocusElement;
-};
-
 const pickerFieldStyles = ":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column}.dialog--padded{padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}";
 
 var __defProp = Object.defineProperty;
@@ -61,7 +29,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 class PickerField extends withContextualHelp.WithContextualHelp(
   mixins.WithFeedback(
     withErrorText.WithErrorText(
-      formElement.FormElement(TrappedFocus(localized.Localized(formAssociated.FormAssociated(vividElement.VividElement))))
+      formElement.FormElement(trappedFocus.TrappedFocus(localized.Localized(formAssociated.FormAssociated(vividElement.VividElement))))
     )
   )
 ) {
@@ -308,5 +276,4 @@ const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, pad
 
 exports.PickerField = PickerField;
 exports.PickerFieldTemplate = PickerFieldTemplate;
-exports.ignoreEventInFocusTraps = ignoreEventInFocusTraps;
 exports.pickerFieldStyles = pickerFieldStyles;

package/unbundled/picker-field.template.js

@@ -6,45 +6,13 @@ import { V as VividElement } from './vivid-element.js';
 import { W as WithContextualHelp } from './with-contextual-help.js';
 import { W as WithErrorText } from './with-error-text.js';
 import { F as FormElement } from './form-element.js';
+import { T as TrappedFocus } from './trapped-focus.js';
 import { L as Localized } from './localized.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { P as Popup } from './definition5.js';
 import { VwcTextFieldElement as TextField } from '../text-field/definition.js';
 import { B as Button } from './definition.js';
 
-const ignoredEvents = /* @__PURE__ */ new WeakSet();
-const ignoreEventInFocusTraps = (event) => {
-  ignoredEvents.add(event);
-};
-const TrappedFocus = (Base) => {
-  class TrappedFocusElement extends Base {
-    /**
-     * @returns Whether focus was trapped.
-     * @internal
-     */
-    _trappedFocus(event, getFocusableEls) {
-      if (!ignoredEvents.has(event) && event.key === "Tab") {
-        const focusableEls = getFocusableEls();
-        const firstFocusableEl = focusableEls[0];
-        const lastFocusableEl = focusableEls[focusableEls.length - 1];
-        if (event.shiftKey) {
-          if (this.shadowRoot.activeElement === firstFocusableEl) {
-            lastFocusableEl.focus();
-            return true;
-          }
-        } else {
-          if (this.shadowRoot.activeElement === lastFocusableEl) {
-            firstFocusableEl.focus();
-            return true;
-          }
-        }
-      }
-      return false;
-    }
-  }
-  return TrappedFocusElement;
-};
-
 const pickerFieldStyles = ":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column}.dialog--padded{padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}";
 
 var __defProp = Object.defineProperty;
@@ -304,4 +272,4 @@ const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, pad
 		</div>`;
 };
 
-export { PickerFieldTemplate as P, PickerField as a, ignoreEventInFocusTraps as i, pickerFieldStyles as p };
+export { PickerFieldTemplate as P, PickerField as a, pickerFieldStyles as p };

package/unbundled/time-selection-picker.template.cjs

@@ -6,6 +6,7 @@ const pickerField_template = require('./picker-field.template.cjs');
 const singleValuePicker = require('./single-value-picker.cjs');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
 const scrollIntoView = require('./scrollIntoView.cjs');
+const trappedFocus = require('./trapped-focus.cjs');
 const localized = require('./localized.cjs');
 
 const isValidTimeStr = (timeStr) => {
@@ -261,7 +262,7 @@ const onBaseKeyDown = (x, event) => {
     const focusableElements = x.shadowRoot.querySelectorAll(".picker");
     const terminalElement = event.shiftKey ? focusableElements[0] : focusableElements[focusableElements.length - 1];
     if (x.shadowRoot.activeElement !== terminalElement) {
-      pickerField_template.ignoreEventInFocusTraps(event);
+      trappedFocus.ignoreEventInFocusTraps(event);
     }
     x._applyFocusedClass();
   }

package/unbundled/time-selection-picker.template.js

@@ -1,9 +1,10 @@
 import { V as VividElement, d as defineVividComponent } from './vivid-element.js';
 import { when, html, repeat, observable, attr, nullableNumberConverter, Observable, ExecutionContext, Updates, volatile, ref } from '@microsoft/fast-element';
-import { i as ignoreEventInFocusTraps, a as PickerField } from './picker-field.template.js';
+import { a as PickerField } from './picker-field.template.js';
 import { S as SingleValuePicker } from './single-value-picker.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { s as scrollIntoView } from './scrollIntoView.js';
+import { i as ignoreEventInFocusTraps } from './trapped-focus.js';
 import { L as Localized } from './localized.js';
 
 const isValidTimeStr = (timeStr) => {

package/unbundled/trapped-focus.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+const ignoredEvents = /* @__PURE__ */ new WeakSet();
+const ignoreEventInFocusTraps = (event) => {
+  ignoredEvents.add(event);
+};
+const TrappedFocus = (Base) => {
+  class TrappedFocusElement extends Base {
+    /**
+     * @returns Whether focus was trapped.
+     * @internal
+     */
+    _trappedFocus(event, getFocusableEls) {
+      if (!ignoredEvents.has(event) && event.key === "Tab") {
+        const focusableEls = getFocusableEls();
+        const firstFocusableEl = focusableEls[0];
+        const lastFocusableEl = focusableEls[focusableEls.length - 1];
+        if (event.shiftKey) {
+          if (this.shadowRoot.activeElement === firstFocusableEl) {
+            lastFocusableEl.focus();
+            return true;
+          }
+        } else {
+          if (this.shadowRoot.activeElement === lastFocusableEl) {
+            firstFocusableEl.focus();
+            return true;
+          }
+        }
+      }
+      return false;
+    }
+  }
+  return TrappedFocusElement;
+};
+
+exports.TrappedFocus = TrappedFocus;
+exports.ignoreEventInFocusTraps = ignoreEventInFocusTraps;

package/unbundled/trapped-focus.js

@@ -0,0 +1,34 @@
+const ignoredEvents = /* @__PURE__ */ new WeakSet();
+const ignoreEventInFocusTraps = (event) => {
+  ignoredEvents.add(event);
+};
+const TrappedFocus = (Base) => {
+  class TrappedFocusElement extends Base {
+    /**
+     * @returns Whether focus was trapped.
+     * @internal
+     */
+    _trappedFocus(event, getFocusableEls) {
+      if (!ignoredEvents.has(event) && event.key === "Tab") {
+        const focusableEls = getFocusableEls();
+        const firstFocusableEl = focusableEls[0];
+        const lastFocusableEl = focusableEls[focusableEls.length - 1];
+        if (event.shiftKey) {
+          if (this.shadowRoot.activeElement === firstFocusableEl) {
+            lastFocusableEl.focus();
+            return true;
+          }
+        } else {
+          if (this.shadowRoot.activeElement === lastFocusableEl) {
+            firstFocusableEl.focus();
+            return true;
+          }
+        }
+      }
+      return false;
+    }
+  }
+  return TrappedFocusElement;
+};
+
+export { TrappedFocus as T, ignoreEventInFocusTraps as i };

package/unbundled/vivid-element.cjs

@@ -268,7 +268,7 @@ const ReplacedPropHandling = (Base) => {
 
 class VividElement extends AriaMixin(ReplacedPropHandling(fastElement.FASTElement)) {
   static {
-    this.VIVID_VERSION = "5.4.0";
+    this.VIVID_VERSION = "5.5.0";
   }
   /**
    * Add data-vvd-component attribute with component name globally,

package/unbundled/vivid-element.js

@@ -266,7 +266,7 @@ const ReplacedPropHandling = (Base) => {
 
 class VividElement extends AriaMixin(ReplacedPropHandling(FASTElement)) {
   static {
-    this.VIVID_VERSION = "5.4.0";
+    this.VIVID_VERSION = "5.5.0";
   }
   /**
    * Add data-vvd-component attribute with component name globally,

package/visually-hidden/index.cjs

@@ -1 +1 @@
-"use strict";const i=require("../bundled/definition13.cjs");i.registerVisuallyHidden();
+"use strict";const i=require("../bundled/definition14.cjs");i.registerVisuallyHidden();

package/visually-hidden/index.js

@@ -1,2 +1,2 @@
-import { r } from "../bundled/definition13.js";
+import { r } from "../bundled/definition14.js";
 r();

package/bundled/_has.cjs

@@ -1 +0,0 @@
-"use strict";function e(r){return r!=null&&typeof r=="object"&&r["@@functional/placeholder"]===!0}function o(r){return function n(t){return arguments.length===0||e(t)?n:r.apply(this,arguments)}}function i(r){return function n(t,c){switch(arguments.length){case 0:return n;case 1:return e(t)?n:o(function(u){return r(t,u)});default:return e(t)&&e(c)?n:e(t)?o(function(u){return r(u,c)}):e(c)?o(function(u){return r(t,u)}):r(t,c)}}}function l(r,n){return Object.prototype.hasOwnProperty.call(n,r)}exports._curry1=o;exports._curry2=i;exports._has=l;

package/bundled/_has.js

@@ -1,34 +0,0 @@
-function e(r) {
-  return r != null && typeof r == "object" && r["@@functional/placeholder"] === !0;
-}
-function o(r) {
-  return function n(t) {
-    return arguments.length === 0 || e(t) ? n : r.apply(this, arguments);
-  };
-}
-function i(r) {
-  return function n(t, c) {
-    switch (arguments.length) {
-      case 0:
-        return n;
-      case 1:
-        return e(t) ? n : o(function(u) {
-          return r(t, u);
-        });
-      default:
-        return e(t) && e(c) ? n : e(t) ? o(function(u) {
-          return r(u, c);
-        }) : e(c) ? o(function(u) {
-          return r(t, u);
-        }) : r(t, c);
-    }
-  };
-}
-function l(r, n) {
-  return Object.prototype.hasOwnProperty.call(n, r);
-}
-export {
-  l as _,
-  o as a,
-  i as b
-};