@vonage/vivid 4.12.0 → 4.12.1

package/lib/accordion/accordion.d.ts

@@ -1,5 +1,24 @@
-import { AccordionExpandMode, Accordion as FastAccordion } from '@microsoft/fast-foundation';
-export declare class Accordion extends FastAccordion {
+import { FoundationElement } from '@microsoft/fast-foundation';
+export declare const AccordionExpandMode: {
+    readonly single: "single";
+    readonly multi: "multi";
+};
+export type AccordionExpandMode = typeof AccordionExpandMode[keyof typeof AccordionExpandMode];
+export declare class Accordion extends FoundationElement {
     expandmode: AccordionExpandMode;
+    activeid: string | null;
+    activeItemIndex: number;
+    accordionIds: Array<string | null>;
+    private change;
+    private findExpandedItem;
+    private setItems;
+    private resetItems;
+    private removeItemListeners;
+    private activeItemChange;
+    private getItemIds;
+    private isSingleExpandMode;
+    private handleItemKeyDown;
+    private adjust;
+    private focusItem;
     closeAll(): void;
 }

package/lib/accordion-item/accordion-item.d.ts

@@ -1,12 +1,16 @@
-import { AccordionItem as FASTAccordionItem } from '@microsoft/fast-foundation';
+import { FoundationElement } from '@microsoft/fast-foundation';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
 import type { Size } from '../enums.js';
 export type AccordionItemSize = Extract<Size, Size.Condensed | Size.Normal>;
-export declare class AccordionItem extends FASTAccordionItem {
+export declare class AccordionItem extends FoundationElement {
+    headinglevel: 1 | 2 | 3 | 4 | 5 | 6;
+    expanded: boolean;
+    id: string;
     heading?: string;
     noIndicator: boolean;
     meta?: string;
     size?: AccordionItemSize;
+    private change;
 }
 export interface AccordionItem extends AffixIconWithTrailing {
 }

package/lib/calendar/calendar.d.ts

@@ -5,7 +5,7 @@ export declare class Calendar extends FoundationElement {
     startDay?: 'sunday' | 'monday';
     locales?: string | string[] | undefined;
     hour12: boolean;
-    getEventContext: (this: Calendar, e: MouseEvent | KeyboardEvent) => import("./helpers/calendar.event-context").CalendarEventContext | null;
+    getEventContext: (this: Calendar, e: KeyboardEvent | MouseEvent) => import("./helpers/calendar.event-context").CalendarEventContext | null;
     private getCalendarEventContainingCell;
     private arrowKeysInteractions;
     private activateElement;

package/lib/date-picker/date-picker.d.ts

@@ -2,6 +2,7 @@ import { type ErrorText, type FormElement } from '../../shared/patterns';
 import { DatePickerBase } from '../../shared/date-picker/date-picker-base';
 export declare class DatePicker extends DatePickerBase {
     #private;
+    protected _updatePresentationValue(): void;
     constructor();
 }
 export interface DatePicker extends ErrorText, FormElement {

package/lib/radio/radio.d.ts

@@ -1,8 +1,18 @@
-import { Radio as FastRadio } from '@microsoft/fast-foundation';
+import { type SyntheticViewTemplate } from '@microsoft/fast-element';
+import { type FoundationElementDefinition } from '@microsoft/fast-foundation';
 import type { Connotation } from '../enums.js';
+import { FormAssociatedRadio } from './radio.form-associated';
 export type RadioConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA>;
-export declare class Radio extends FastRadio {
+export type RadioControl = Pick<HTMLInputElement, 'checked' | 'disabled' | 'readOnly' | 'focus' | 'setAttribute' | 'getAttribute'>;
+export type RadioOptions = FoundationElementDefinition & {
+    checkedIndicator?: string | SyntheticViewTemplate;
+};
+export declare class Radio extends FormAssociatedRadio {
     ariaLabel: string | null;
     label?: string;
     connotation?: RadioConnotation;
+    readOnly: boolean;
+    name: string;
+    constructor();
+    private isInsideRadioGroup;
 }

package/lib/radio/radio.form-associated.d.ts

@@ -0,0 +1,10 @@
+import { CheckableFormAssociated, FoundationElement } from '@microsoft/fast-foundation';
+declare class _Radio extends FoundationElement {
+}
+interface _Radio extends CheckableFormAssociated {
+}
+declare const FormAssociatedRadio_base: typeof _Radio;
+export declare class FormAssociatedRadio extends FormAssociatedRadio_base {
+    proxy: HTMLInputElement;
+}
+export {};

package/lib/radio-group/radio-group.d.ts

@@ -1,4 +1,22 @@
-import { RadioGroup as FastRadioGroup } from '@microsoft/fast-foundation';
-export declare class RadioGroup extends FastRadioGroup {
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { Orientation } from '@microsoft/fast-web-utilities';
+export declare class RadioGroup extends FoundationElement {
+    #private;
     label?: string;
+    readOnly: boolean;
+    disabled: boolean;
+    name: string;
+    nameChanged(): void;
+    value: string;
+    orientation: Orientation | 'horizontal' | 'vertical';
+    private get isInsideToolbar();
+    disconnectedCallback(): void;
+    private setupRadioButtons;
+    private radioChangeHandler;
+    private moveToRadioByIndex;
+    private moveRightOffGroup;
+    private moveLeftOffGroup;
+    private checkFocusedRadio;
+    private moveRight;
+    private moveLeft;
 }

package/lib/tab/tab.d.ts

@@ -1,10 +1,11 @@
-import { Tab as FoundationTab } from '@microsoft/fast-foundation';
+import { FoundationElement } from '@microsoft/fast-foundation';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
 import { Localized } from '../../shared/patterns';
 import type { Connotation, Shape } from '../enums.js';
 export type TabConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA>;
 export type TabShape = Extract<Shape, Shape.Rounded | Shape.Sharp>;
-export declare class Tab extends FoundationTab {
+export declare class Tab extends FoundationElement {
+    disabled: boolean;
     connotation?: TabConnotation;
     shape?: TabShape;
     label?: string;

package/lib/tab-panel/tab-panel.d.ts

@@ -1,3 +1,3 @@
-import { TabPanel as FoundationTabPanel } from '@microsoft/fast-foundation';
-export declare class TabPanel extends FoundationTabPanel {
+import { FoundationElement } from '@microsoft/fast-foundation';
+export declare class TabPanel extends FoundationElement {
 }

package/lib/tabs/tabs.d.ts

@@ -1,21 +1,42 @@
-import { Tabs as FoundationTabs } from '@microsoft/fast-foundation';
+import { FoundationElement, TabsOrientation } from '@microsoft/fast-foundation';
 import type { Connotation, TabsGutters } from '../enums.js';
 export declare const ACTIVE_TAB_WIDTH = "--_tabs-active-tab-inline-size";
 export type TabsConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA>;
 export type Gutters = Extract<TabsGutters, TabsGutters.Small | TabsGutters.None>;
-export declare class Tabs extends FoundationTabs {
+export declare class Tabs extends FoundationElement {
     #private;
+    orientation: TabsOrientation;
+    activeid: string;
+    activeindicator: boolean;
+    activetab: HTMLElement;
+    private prevActiveTabIndex;
+    private activeTabIndex;
+    private tabIds;
+    private tabpanelIds;
+    private change;
+    private isDisabledElement;
+    private isHiddenElement;
+    private isFocusableElement;
+    private getActiveIndex;
+    private setTabs;
+    private setTabPanels;
+    private getTabIds;
+    private getTabPanelIds;
+    private setComponent;
+    private handleTabClick;
+    private isHorizontal;
+    private handleTabKeyDown;
+    adjust(adjustment: number): void;
+    private adjustForward;
+    private adjustBackward;
+    private moveToTabByIndex;
+    private focusTab;
     tablist?: HTMLElement;
     connotation?: TabsConnotation;
     gutters?: Gutters;
     scrollablePanel: boolean;
-    connotationChanged(): void;
-    orientationChanged(): void;
-    activeidChanged(oldValue: string, newValue: string): void;
-    tabsChanged(): void;
-    tabpanelsChanged(): void;
-    patchIndicatorStyleTransition(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    constructor();
+    private handleActiveIndicatorPosition;
+    private animateActiveIndicator;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vonage/vivid",
-	"version": "4.12.0",
+	"version": "4.12.1",
 	"type": "module",
 	"module": "./index.js",
 	"main": "./index.cjs",

package/shared/date-picker/date-picker-base.d.ts

@@ -14,6 +14,7 @@ export declare abstract class DatePickerBase extends FormAssociatedDatePickerBas
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected abstract _getCustomValidationError(): string | null;
+    protected abstract _updatePresentationValue(): void;
     protected abstract _getSelectedDates(): DateStr[];
 }
 export interface DatePickerBase extends Localized, FormElementHelperText, TrappedFocus {

package/shared/definition.cjs

@@ -3,79 +3,10 @@
 const index = require('./index.cjs');
 const definition = require('./definition27.cjs');
 const affix = require('./affix.cjs');
-const startEnd = require('./start-end.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const ref = require('./ref.cjs');
 const when = require('./when.cjs');
 
-/**
- * An individual item in an {@link @microsoft/fast-foundation#(Accordion:class) }.
- *
- * @slot start - Content which can be provided between the heading and the icon
- * @slot end - Content which can be provided between the start slot and icon
- * @slot heading - Content which serves as the accordion item heading and text of the expand button
- * @slot - The default slot for accordion item content
- * @slot expanded-icon - The expanded icon
- * @slot collapsed-icon - The collapsed icon
- * @fires change - Fires a custom 'change' event when the button is invoked
- * @csspart heading - Wraps the button
- * @csspart button - The button which serves to invoke the item
- * @csspart heading-content - Wraps the slot for the heading content within the button
- * @csspart icon - The icon container
- * @csspart expanded-icon - The expanded icon slot
- * @csspart collapsed-icon - The collapsed icon
- * @csspart region - The wrapper for the accordion item content
- *
- * @public
- */
-let AccordionItem$1 = class AccordionItem extends index.FoundationElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Configures the {@link https://www.w3.org/TR/wai-aria-1.1/#aria-level | level} of the
-         * heading element.
-         *
-         * @defaultValue 2
-         * @public
-         * @remarks
-         * HTML attribute: heading-level
-         */
-        this.headinglevel = 2;
-        /**
-         * Expands or collapses the item.
-         *
-         * @public
-         * @remarks
-         * HTML attribute: expanded
-         */
-        this.expanded = false;
-        /**
-         * @internal
-         */
-        this.clickHandler = (e) => {
-            this.expanded = !this.expanded;
-            this.change();
-        };
-        this.change = () => {
-            this.$emit("change");
-        };
-    }
-};
-index.__decorate([
-    index.attr({
-        attribute: "heading-level",
-        mode: "fromView",
-        converter: index.nullableNumberConverter,
-    })
-], AccordionItem$1.prototype, "headinglevel", void 0);
-index.__decorate([
-    index.attr({ mode: "boolean" })
-], AccordionItem$1.prototype, "expanded", void 0);
-index.__decorate([
-    index.attr
-], AccordionItem$1.prototype, "id", void 0);
-applyMixins.applyMixins(AccordionItem$1, startEnd.StartEnd);
-
 const styles = ":host{--_vvd-accordion-item-accent-firm-wrapper: var( --vvd-accordion-item-accent-firm )}.heading-button{--vvd-accordion-item-accent-firm: var( --_vvd-accordion-item-accent-firm-wrapper, var(--vvd-accordion-item-accent-primary) )}:host{display:flex;box-sizing:border-box;flex-direction:column}.heading-container{margin:0}.heading-button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.heading-button:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.heading-button:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.heading-button{--_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-accordion-item-accent-firm, var(--vvd-color-canvas-text))}.heading-button{--focus-stroke-gap-color: transparent;display:flex;width:100%;align-items:center;padding:16px;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;text-align:left}.heading-button:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{overflow:hidden;max-width:var(--accordion-item-meta-inline-size, 20%);flex-shrink:0;color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{display:none;padding:8px 32px 24px 16px}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
 
 var __defProp = Object.defineProperty;
@@ -87,12 +18,38 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class AccordionItem extends AccordionItem$1 {
+class AccordionItem extends index.FoundationElement {
   constructor() {
     super(...arguments);
+    this.headinglevel = 2;
+    this.expanded = false;
     this.noIndicator = false;
+    /**
+     * @internal
+     */
+    this.clickHandler = () => {
+      this.expanded = !this.expanded;
+      this.change();
+    };
+    this.change = () => {
+      this.$emit("change");
+    };
   }
 }
+__decorateClass([
+  index.attr({
+    attribute: "heading-level",
+    mode: "fromView",
+    converter: index.nullableNumberConverter
+  })
+], AccordionItem.prototype, "headinglevel");
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], AccordionItem.prototype, "expanded");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  index.attr
+], AccordionItem.prototype, "id");
 __decorateClass([
   index.attr
 ], AccordionItem.prototype, "heading");
@@ -116,7 +73,7 @@ const header = (context, hTag) => {
 				id="${(x) => x.id}"
 				aria-expanded="${(x) => x.expanded}"
 				aria-controls="${(x) => x.id}-panel"
-				@click="${(x, c) => x.clickHandler(c.event)}"
+				@click="${(x) => x.clickHandler()}"
 				${ref.ref("expandbutton")}
 			>
 
@@ -158,7 +115,7 @@ const accordionItemRegistries = [
 ];
 const registerAccordionItem = index.registerFactory(accordionItemRegistries);
 
-exports.AccordionItem = AccordionItem$1;
+exports.AccordionItem = AccordionItem;
 exports.accordionItemDefinition = accordionItemDefinition;
 exports.accordionItemRegistries = accordionItemRegistries;
 exports.registerAccordionItem = registerAccordionItem;

package/shared/definition.js

@@ -1,79 +1,10 @@
-import { F as FoundationElement, _ as __decorate, a as attr, n as nullableNumberConverter, h as html, r as registerFactory } from './index.js';
+import { F as FoundationElement, a as attr, n as nullableNumberConverter, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition27.js';
 import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { S as StartEnd } from './start-end.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { r as ref } from './ref.js';
 import { w as when } from './when.js';
 
-/**
- * An individual item in an {@link @microsoft/fast-foundation#(Accordion:class) }.
- *
- * @slot start - Content which can be provided between the heading and the icon
- * @slot end - Content which can be provided between the start slot and icon
- * @slot heading - Content which serves as the accordion item heading and text of the expand button
- * @slot - The default slot for accordion item content
- * @slot expanded-icon - The expanded icon
- * @slot collapsed-icon - The collapsed icon
- * @fires change - Fires a custom 'change' event when the button is invoked
- * @csspart heading - Wraps the button
- * @csspart button - The button which serves to invoke the item
- * @csspart heading-content - Wraps the slot for the heading content within the button
- * @csspart icon - The icon container
- * @csspart expanded-icon - The expanded icon slot
- * @csspart collapsed-icon - The collapsed icon
- * @csspart region - The wrapper for the accordion item content
- *
- * @public
- */
-let AccordionItem$1 = class AccordionItem extends FoundationElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Configures the {@link https://www.w3.org/TR/wai-aria-1.1/#aria-level | level} of the
-         * heading element.
-         *
-         * @defaultValue 2
-         * @public
-         * @remarks
-         * HTML attribute: heading-level
-         */
-        this.headinglevel = 2;
-        /**
-         * Expands or collapses the item.
-         *
-         * @public
-         * @remarks
-         * HTML attribute: expanded
-         */
-        this.expanded = false;
-        /**
-         * @internal
-         */
-        this.clickHandler = (e) => {
-            this.expanded = !this.expanded;
-            this.change();
-        };
-        this.change = () => {
-            this.$emit("change");
-        };
-    }
-};
-__decorate([
-    attr({
-        attribute: "heading-level",
-        mode: "fromView",
-        converter: nullableNumberConverter,
-    })
-], AccordionItem$1.prototype, "headinglevel", void 0);
-__decorate([
-    attr({ mode: "boolean" })
-], AccordionItem$1.prototype, "expanded", void 0);
-__decorate([
-    attr
-], AccordionItem$1.prototype, "id", void 0);
-applyMixins(AccordionItem$1, StartEnd);
-
 const styles = ":host{--_vvd-accordion-item-accent-firm-wrapper: var( --vvd-accordion-item-accent-firm )}.heading-button{--vvd-accordion-item-accent-firm: var( --_vvd-accordion-item-accent-firm-wrapper, var(--vvd-accordion-item-accent-primary) )}:host{display:flex;box-sizing:border-box;flex-direction:column}.heading-container{margin:0}.heading-button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.heading-button:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.heading-button:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.heading-button{--_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-accordion-item-accent-firm, var(--vvd-color-canvas-text))}.heading-button{--focus-stroke-gap-color: transparent;display:flex;width:100%;align-items:center;padding:16px;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;text-align:left}.heading-button:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{overflow:hidden;max-width:var(--accordion-item-meta-inline-size, 20%);flex-shrink:0;color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{display:none;padding:8px 32px 24px 16px}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
 
 var __defProp = Object.defineProperty;
@@ -85,12 +16,38 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class AccordionItem extends AccordionItem$1 {
+class AccordionItem extends FoundationElement {
   constructor() {
     super(...arguments);
+    this.headinglevel = 2;
+    this.expanded = false;
     this.noIndicator = false;
+    /**
+     * @internal
+     */
+    this.clickHandler = () => {
+      this.expanded = !this.expanded;
+      this.change();
+    };
+    this.change = () => {
+      this.$emit("change");
+    };
   }
 }
+__decorateClass([
+  attr({
+    attribute: "heading-level",
+    mode: "fromView",
+    converter: nullableNumberConverter
+  })
+], AccordionItem.prototype, "headinglevel");
+__decorateClass([
+  attr({ mode: "boolean" })
+], AccordionItem.prototype, "expanded");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  attr
+], AccordionItem.prototype, "id");
 __decorateClass([
   attr
 ], AccordionItem.prototype, "heading");
@@ -114,7 +71,7 @@ const header = (context, hTag) => {
 				id="${(x) => x.id}"
 				aria-expanded="${(x) => x.expanded}"
 				aria-controls="${(x) => x.id}-panel"
-				@click="${(x, c) => x.clickHandler(c.event)}"
+				@click="${(x) => x.clickHandler()}"
 				${ref("expandbutton")}
 			>
 
@@ -156,4 +113,4 @@ const accordionItemRegistries = [
 ];
 const registerAccordionItem = registerFactory(accordionItemRegistries);
 
-export { AccordionItem$1 as A, accordionItemDefinition as a, accordionItemRegistries as b, registerAccordionItem as r };
+export { AccordionItem as A, accordionItemDefinition as a, accordionItemRegistries as b, registerAccordionItem as r };

package/shared/definition16.cjs

@@ -10,7 +10,6 @@ const startEnd = require('./start-end.cjs');
 const select_options = require('./select.options.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const formAssociated = require('./form-associated.cjs');
-const numbers = require('./numbers.cjs');
 const strings = require('./strings.cjs');
 const affix = require('./affix.cjs');
 const formElements = require('./form-elements.cjs');
@@ -445,7 +444,7 @@ let Combobox$1 = class Combobox extends FormAssociatedCombobox {
      */
     selectedIndexChanged(prev, next) {
         if (this.$fastController.isConnected) {
-            next = numbers.limit(-1, this.options.length - 1, next);
+            next = strings.limit(-1, this.options.length - 1, next);
             // we only want to call the super method when the selectedIndex is in range
             if (next !== this.selectedIndex) {
                 this.selectedIndex = next;

package/shared/definition16.js

@@ -8,8 +8,7 @@ import { S as StartEnd } from './start-end.js';
 import { S as SelectPosition } from './select.options.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { F as FormAssociated } from './form-associated.js';
-import { l as limit } from './numbers.js';
-import { u as uniqueId } from './strings.js';
+import { u as uniqueId, l as limit } from './strings.js';
 import { A as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
 import { f as formElements } from './form-elements.js';
 import { h as handleEscapeKeyAndStopPropogation } from './index2.js';

package/shared/definition17.cjs

@@ -2,13 +2,13 @@
 
 const definition = require('./definition27.cjs');
 const index = require('./index.cjs');
-const keyCodes = require('./key-codes.cjs');
+const keyCodes = require('./key-codes2.cjs');
 const repeat = require('./repeat.cjs');
 const slotted = require('./slotted.cjs');
 const children = require('./children.cjs');
 const icon = require('./icon.cjs');
 const when = require('./when.cjs');
-const keyCodes$1 = require('./key-codes2.cjs');
+const keyCodes$1 = require('./key-codes.cjs');
 
 /**
  * This set of exported strings reference https://developer.mozilla.org/en-US/docs/Web/Events

package/shared/definition17.js

@@ -1,12 +1,12 @@
 import { a as iconRegistries } from './definition27.js';
 import { F as FoundationElement, _ as __decorate, a as attr, o as observable, D as DOM, h as html, O as Observable, r as registerFactory } from './index.js';
-import { d as keyEnd, g as keyHome, h as keyArrowRight, i as keyArrowLeft, j as keyPageDown, l as keyPageUp, f as keyArrowDown, e as keyArrowUp, b as keyEscape, m as keyFunction2, k as keyEnter } from './key-codes.js';
+import { d as keyEnd, g as keyHome, h as keyArrowRight, i as keyArrowLeft, j as keyPageDown, l as keyPageUp, f as keyArrowDown, e as keyArrowUp, b as keyEscape, m as keyFunction2, k as keyEnter } from './key-codes2.js';
 import { R as RepeatDirective } from './repeat.js';
 import { s as slotted, e as elements } from './slotted.js';
 import { c as children } from './children.js';
 import { I as Icon } from './icon.js';
 import { w as when } from './when.js';
-import { b as keyEnter$1, g as keySpace } from './key-codes2.js';
+import { g as keyEnter$1, k as keySpace } from './key-codes.js';
 
 /**
  * This set of exported strings reference https://developer.mozilla.org/en-US/docs/Web/Events

package/shared/definition18.cjs

@@ -45,11 +45,16 @@ let DatePicker = class extends presentationDate.DatePickerBase {
         this.value = "";
         return;
       }
+      this._adjustSelectedMonthToEnsureVisibilityOf(this.value);
+    }
+    this._updatePresentationValue();
+  }
+  _updatePresentationValue() {
+    if (this.value) {
       this._presentationValue = presentationDate.formatPresentationDate(
         this.value,
         this.locale.datePicker
       );
-      this._adjustSelectedMonthToEnsureVisibilityOf(this.value);
     } else {
       this._presentationValue = "";
     }

package/shared/definition18.js

@@ -43,11 +43,16 @@ let DatePicker = class extends DatePickerBase {
         this.value = "";
         return;
       }
+      this._adjustSelectedMonthToEnsureVisibilityOf(this.value);
+    }
+    this._updatePresentationValue();
+  }
+  _updatePresentationValue() {
+    if (this.value) {
       this._presentationValue = formatPresentationDate(
         this.value,
         this.locale.datePicker
       );
-      this._adjustSelectedMonthToEnsureVisibilityOf(this.value);
     } else {
       this._presentationValue = "";
     }

package/shared/definition19.cjs

@@ -134,6 +134,22 @@ let DateRangePicker = class extends presentationDate.DatePickerBase {
   currentEndChanged() {
     this.end = this.currentEnd;
   }
+  /**
+   * @internal
+   */
+  _updatePresentationValue() {
+    if (this.start && this.end) {
+      this._presentationValue = formatPresentationDateRange(
+        {
+          start: this.start,
+          end: this.end
+        },
+        this.locale.datePicker
+      );
+    } else {
+      this._presentationValue = "";
+    }
+  }
   /**
    * @internal
    */
@@ -335,18 +351,11 @@ handleChangedValues_fn = function() {
       __privateMethod(this, _DateRangePicker_instances, updateValues_fn).call(this, { start: this.end, end: this.start });
       return;
     }
-    this._presentationValue = formatPresentationDateRange(
-      {
-        start: this.start,
-        end: this.end
-      },
-      this.locale.datePicker
-    );
     this.value = formatRange(this.start, this.end);
   } else {
     this.value = "";
-    this._presentationValue = "";
   }
+  this._updatePresentationValue();
   const dateToEnsureVisibilityOf = this.start || this.end;
   if (dateToEnsureVisibilityOf) {
     this._adjustSelectedMonthToEnsureVisibilityOf(dateToEnsureVisibilityOf);