@vonage/vivid 4.12.1 → 4.13.0

package/shared/definition36.cjs

@@ -3,7 +3,7 @@
 const index = require('./index.cjs');
 const definition = require('./definition27.cjs');
 const affix = require('./affix.cjs');
-const listboxOption = require('./listbox-option.cjs');
+const ariaGlobal = require('./aria-global2.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const icon = require('./icon.cjs');
 const when = require('./when.cjs');
@@ -18,19 +18,93 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class ListboxOption extends listboxOption.ListboxOption {
-  constructor() {
-    super(...arguments);
+class ListboxOption extends index.FoundationElement {
+  constructor(text, value, defaultSelected, selected) {
+    super();
+    this.defaultSelected = false;
+    /**
+     * Tracks whether the "selected" property has been changed.
+     * @internal
+     */
+    this.dirtySelected = false;
+    this.selected = this.defaultSelected;
+    /**
+     * Track whether the value has been changed from the initial value
+     */
+    this.dirtyValue = false;
     this._highlighted = false;
     this._displayCheckmark = false;
     this._matchedRange = null;
+    if (text) {
+      this.text = text;
+    }
+    if (value) {
+      this.initialValue = value;
+    }
+    if (defaultSelected) {
+      this.defaultSelected = defaultSelected;
+    }
+    if (selected) {
+      this.selected = selected;
+    }
+    this.proxy = new Option(
+      this.text,
+      // @ts-expect-error Propery is used before it is assigned
+      this.initialValue,
+      this.defaultSelected,
+      this.selected
+    );
+    this.proxy.disabled = this.disabled;
   }
-  // #region overrides base class accessor
-  set text(value) {
-    this._text = value;
+  /**
+   * Updates the ariaChecked property when the checked property changes.
+   *
+   * @param _ - the previous checked value
+   * @param next - the current checked value
+   *
+   * @public
+   */
+  checkedChanged(_, next) {
+    if (typeof next === "boolean") {
+      this.ariaChecked = next ? "true" : "false";
+      return;
+    }
+    this.ariaChecked = null;
   }
-  get text() {
-    return this._text ?? "";
+  defaultSelectedChanged() {
+    if (!this.dirtySelected) {
+      this.selected = this.defaultSelected;
+      if (this.proxy instanceof HTMLOptionElement) {
+        this.proxy.selected = this.defaultSelected;
+      }
+    }
+  }
+  disabledChanged() {
+    this.ariaDisabled = this.disabled ? "true" : "false";
+    if (this.proxy instanceof HTMLOptionElement) {
+      this.proxy.disabled = this.disabled;
+    }
+  }
+  selectedAttributeChanged() {
+    this.defaultSelected = this.selectedAttribute;
+    if (this.proxy instanceof HTMLOptionElement) {
+      this.proxy.defaultSelected = this.defaultSelected;
+    }
+  }
+  selectedChanged() {
+    this.ariaSelected = this.selected ? "true" : "false";
+    if (!this.dirtySelected) {
+      this.dirtySelected = true;
+    }
+    if (this.proxy instanceof HTMLOptionElement) {
+      this.proxy.selected = this.selected;
+    }
+  }
+  initialValueChanged() {
+    if (!this.dirtyValue) {
+      this.value = this.initialValue;
+      this.dirtyValue = false;
+    }
   }
   get label() {
     return this._label ?? this.text;
@@ -38,6 +112,28 @@ class ListboxOption extends listboxOption.ListboxOption {
   set label(value) {
     this._label = value;
   }
+  set text(value) {
+    this._text = value;
+  }
+  get text() {
+    return this._text ?? "";
+  }
+  set value(next) {
+    const newValue = `${next ?? ""}`;
+    this._value = newValue;
+    this.dirtyValue = true;
+    if (this.proxy instanceof HTMLOptionElement) {
+      this.proxy.value = newValue;
+    }
+    index.Observable.notify(this, "value");
+  }
+  get value() {
+    index.Observable.track(this, "value");
+    return this._value ?? this.text;
+  }
+  get form() {
+    return null;
+  }
   /**
    * @internal
    */
@@ -46,15 +142,35 @@ class ListboxOption extends listboxOption.ListboxOption {
   }
 }
 __decorateClass([
-  index.attr({
-    attribute: "text"
-  })
-], ListboxOption.prototype, "_text");
+  index.observable
+], ListboxOption.prototype, "checked");
+__decorateClass([
+  index.observable
+], ListboxOption.prototype, "defaultSelected");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], ListboxOption.prototype, "disabled");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  index.attr({ attribute: "selected", mode: "boolean" })
+], ListboxOption.prototype, "selectedAttribute");
+__decorateClass([
+  index.observable
+], ListboxOption.prototype, "selected");
+__decorateClass([
+  index.attr({ attribute: "value", mode: "fromView" })
+], ListboxOption.prototype, "initialValue");
 __decorateClass([
   index.attr({
     attribute: "label"
   })
 ], ListboxOption.prototype, "_label");
+__decorateClass([
+  index.attr({
+    attribute: "text"
+  })
+], ListboxOption.prototype, "_text");
 __decorateClass([
   index.observable
 ], ListboxOption.prototype, "_highlighted");
@@ -64,7 +180,26 @@ __decorateClass([
 __decorateClass([
   index.observable
 ], ListboxOption.prototype, "_matchedRange");
-applyMixins.applyMixins(ListboxOption, affix.AffixIconWithTrailing);
+class DelegatesARIAListboxOption {
+}
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  index.observable
+], DelegatesARIAListboxOption.prototype, "ariaChecked");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  index.observable
+], DelegatesARIAListboxOption.prototype, "ariaPosInSet");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  index.observable
+], DelegatesARIAListboxOption.prototype, "ariaSelected");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  index.observable
+], DelegatesARIAListboxOption.prototype, "ariaSetSize");
+applyMixins.applyMixins(DelegatesARIAListboxOption, ariaGlobal.ARIAGlobalStatesAndProperties);
+applyMixins.applyMixins(ListboxOption, affix.AffixIconWithTrailing, DelegatesARIAListboxOption);
 
 const getClasses = (x) => classNames.classNames(
   "base",

package/shared/definition36.js

@@ -1,7 +1,7 @@
-import { a as attr, o as observable, h as html, r as registerFactory } from './index.js';
+import { F as FoundationElement, O as Observable, o as observable, a as attr, 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 { L as ListboxOption$1 } from './listbox-option.js';
+import { A as ARIAGlobalStatesAndProperties } from './aria-global2.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { I as Icon } from './icon.js';
 import { w as when } from './when.js';
@@ -16,19 +16,93 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class ListboxOption extends ListboxOption$1 {
-  constructor() {
-    super(...arguments);
+class ListboxOption extends FoundationElement {
+  constructor(text, value, defaultSelected, selected) {
+    super();
+    this.defaultSelected = false;
+    /**
+     * Tracks whether the "selected" property has been changed.
+     * @internal
+     */
+    this.dirtySelected = false;
+    this.selected = this.defaultSelected;
+    /**
+     * Track whether the value has been changed from the initial value
+     */
+    this.dirtyValue = false;
     this._highlighted = false;
     this._displayCheckmark = false;
     this._matchedRange = null;
+    if (text) {
+      this.text = text;
+    }
+    if (value) {
+      this.initialValue = value;
+    }
+    if (defaultSelected) {
+      this.defaultSelected = defaultSelected;
+    }
+    if (selected) {
+      this.selected = selected;
+    }
+    this.proxy = new Option(
+      this.text,
+      // @ts-expect-error Propery is used before it is assigned
+      this.initialValue,
+      this.defaultSelected,
+      this.selected
+    );
+    this.proxy.disabled = this.disabled;
   }
-  // #region overrides base class accessor
-  set text(value) {
-    this._text = value;
+  /**
+   * Updates the ariaChecked property when the checked property changes.
+   *
+   * @param _ - the previous checked value
+   * @param next - the current checked value
+   *
+   * @public
+   */
+  checkedChanged(_, next) {
+    if (typeof next === "boolean") {
+      this.ariaChecked = next ? "true" : "false";
+      return;
+    }
+    this.ariaChecked = null;
   }
-  get text() {
-    return this._text ?? "";
+  defaultSelectedChanged() {
+    if (!this.dirtySelected) {
+      this.selected = this.defaultSelected;
+      if (this.proxy instanceof HTMLOptionElement) {
+        this.proxy.selected = this.defaultSelected;
+      }
+    }
+  }
+  disabledChanged() {
+    this.ariaDisabled = this.disabled ? "true" : "false";
+    if (this.proxy instanceof HTMLOptionElement) {
+      this.proxy.disabled = this.disabled;
+    }
+  }
+  selectedAttributeChanged() {
+    this.defaultSelected = this.selectedAttribute;
+    if (this.proxy instanceof HTMLOptionElement) {
+      this.proxy.defaultSelected = this.defaultSelected;
+    }
+  }
+  selectedChanged() {
+    this.ariaSelected = this.selected ? "true" : "false";
+    if (!this.dirtySelected) {
+      this.dirtySelected = true;
+    }
+    if (this.proxy instanceof HTMLOptionElement) {
+      this.proxy.selected = this.selected;
+    }
+  }
+  initialValueChanged() {
+    if (!this.dirtyValue) {
+      this.value = this.initialValue;
+      this.dirtyValue = false;
+    }
   }
   get label() {
     return this._label ?? this.text;
@@ -36,6 +110,28 @@ class ListboxOption extends ListboxOption$1 {
   set label(value) {
     this._label = value;
   }
+  set text(value) {
+    this._text = value;
+  }
+  get text() {
+    return this._text ?? "";
+  }
+  set value(next) {
+    const newValue = `${next ?? ""}`;
+    this._value = newValue;
+    this.dirtyValue = true;
+    if (this.proxy instanceof HTMLOptionElement) {
+      this.proxy.value = newValue;
+    }
+    Observable.notify(this, "value");
+  }
+  get value() {
+    Observable.track(this, "value");
+    return this._value ?? this.text;
+  }
+  get form() {
+    return null;
+  }
   /**
    * @internal
    */
@@ -44,15 +140,35 @@ class ListboxOption extends ListboxOption$1 {
   }
 }
 __decorateClass([
-  attr({
-    attribute: "text"
-  })
-], ListboxOption.prototype, "_text");
+  observable
+], ListboxOption.prototype, "checked");
+__decorateClass([
+  observable
+], ListboxOption.prototype, "defaultSelected");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  attr({ mode: "boolean" })
+], ListboxOption.prototype, "disabled");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  attr({ attribute: "selected", mode: "boolean" })
+], ListboxOption.prototype, "selectedAttribute");
+__decorateClass([
+  observable
+], ListboxOption.prototype, "selected");
+__decorateClass([
+  attr({ attribute: "value", mode: "fromView" })
+], ListboxOption.prototype, "initialValue");
 __decorateClass([
   attr({
     attribute: "label"
   })
 ], ListboxOption.prototype, "_label");
+__decorateClass([
+  attr({
+    attribute: "text"
+  })
+], ListboxOption.prototype, "_text");
 __decorateClass([
   observable
 ], ListboxOption.prototype, "_highlighted");
@@ -62,7 +178,26 @@ __decorateClass([
 __decorateClass([
   observable
 ], ListboxOption.prototype, "_matchedRange");
-applyMixins(ListboxOption, AffixIconWithTrailing);
+class DelegatesARIAListboxOption {
+}
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  observable
+], DelegatesARIAListboxOption.prototype, "ariaChecked");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  observable
+], DelegatesARIAListboxOption.prototype, "ariaPosInSet");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  observable
+], DelegatesARIAListboxOption.prototype, "ariaSelected");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  observable
+], DelegatesARIAListboxOption.prototype, "ariaSetSize");
+applyMixins(DelegatesARIAListboxOption, ARIAGlobalStatesAndProperties);
+applyMixins(ListboxOption, AffixIconWithTrailing, DelegatesARIAListboxOption);
 
 const getClasses = (x) => classNames(
   "base",

package/shared/definition46.cjs

@@ -80,7 +80,7 @@ __decorateClass([
   })
 ], SideDrawer.prototype, "trailing");
 
-const styles = ":host{display:block}.side-drawer-app-content{block-size:100%}.control{position:fixed;z-index:1;background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);inline-size:280px;inset-block:0;overflow-y:auto}.control[part~=vvd-theme-alternate]{background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);color-scheme:var(--vvd-color-scheme)}.control.trailing{inset-inline-end:0}.control:not(.open).trailing{transform:translate(100%)}.control:not(.open):not(.trailing){transform:translate(-100%)}.control.open:not(.modal).trailing+.side-drawer-app-content{margin-inline-end:var(--side-drawer-app-content-offset, 280px)}.control.open:not(.modal):not(.trailing)+.side-drawer-app-content{margin-inline-start:var(--side-drawer-app-content-offset, 280px)}@media (prefers-reduced-motion: no-preference){.control{transition:transform .2s cubic-bezier(.4,0,.2,1)}}.scrim{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5;position:fixed;inset:0}.scrim:not(.open){display:none}";
+const styles = ":host{display:block}.side-drawer-app-content{block-size:100%}.control{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.control{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-thumb-color)}.control{position:fixed;z-index:1;background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);inline-size:280px;inset-block:0;overflow-y:auto}.control[part~=vvd-theme-alternate]{background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);color-scheme:var(--vvd-color-scheme)}.control.trailing{inset-inline-end:0}.control:not(.open).trailing{transform:translate(100%)}.control:not(.open):not(.trailing){transform:translate(-100%)}.control.open:not(.modal).trailing+.side-drawer-app-content{margin-inline-end:var(--side-drawer-app-content-offset, 280px)}.control.open:not(.modal):not(.trailing)+.side-drawer-app-content{margin-inline-start:var(--side-drawer-app-content-offset, 280px)}@media (prefers-reduced-motion: no-preference){.control{transition:transform .2s cubic-bezier(.4,0,.2,1)}}.scrim{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5;position:fixed;inset:0}.scrim:not(.open){display:none}";
 
 const getClasses = ({ modal, open, trailing }) => classNames.classNames(
   "control",

package/shared/definition46.js

@@ -78,7 +78,7 @@ __decorateClass([
   })
 ], SideDrawer.prototype, "trailing");
 
-const styles = ":host{display:block}.side-drawer-app-content{block-size:100%}.control{position:fixed;z-index:1;background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);inline-size:280px;inset-block:0;overflow-y:auto}.control[part~=vvd-theme-alternate]{background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);color-scheme:var(--vvd-color-scheme)}.control.trailing{inset-inline-end:0}.control:not(.open).trailing{transform:translate(100%)}.control:not(.open):not(.trailing){transform:translate(-100%)}.control.open:not(.modal).trailing+.side-drawer-app-content{margin-inline-end:var(--side-drawer-app-content-offset, 280px)}.control.open:not(.modal):not(.trailing)+.side-drawer-app-content{margin-inline-start:var(--side-drawer-app-content-offset, 280px)}@media (prefers-reduced-motion: no-preference){.control{transition:transform .2s cubic-bezier(.4,0,.2,1)}}.scrim{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5;position:fixed;inset:0}.scrim:not(.open){display:none}";
+const styles = ":host{display:block}.side-drawer-app-content{block-size:100%}.control{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.control{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-thumb-color)}.control{position:fixed;z-index:1;background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);inline-size:280px;inset-block:0;overflow-y:auto}.control[part~=vvd-theme-alternate]{background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);color-scheme:var(--vvd-color-scheme)}.control.trailing{inset-inline-end:0}.control:not(.open).trailing{transform:translate(100%)}.control:not(.open):not(.trailing){transform:translate(-100%)}.control.open:not(.modal).trailing+.side-drawer-app-content{margin-inline-end:var(--side-drawer-app-content-offset, 280px)}.control.open:not(.modal):not(.trailing)+.side-drawer-app-content{margin-inline-start:var(--side-drawer-app-content-offset, 280px)}@media (prefers-reduced-motion: no-preference){.control{transition:transform .2s cubic-bezier(.4,0,.2,1)}}.scrim{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5;position:fixed;inset:0}.scrim:not(.open){display:none}";
 
 const getClasses = ({ modal, open, trailing }) => classNames(
   "control",

package/shared/definition47.cjs

@@ -5,21 +5,12 @@ const definition = require('./definition64.cjs');
 const keyCodes = require('./key-codes.cjs');
 const slider_template = require('./slider.template.cjs');
 const formAssociated = require('./form-associated.cjs');
+const localization = require('./localization.cjs');
 const aria = require('./aria.cjs');
-const direction = require('./direction.cjs');
 const numbers = require('./numbers.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const localized = require('./localized.cjs');
 
-/**
- * Expose ltr and rtl strings
- */
-var Direction;
-(function (Direction) {
-    Direction["ltr"] = "ltr";
-    Direction["rtl"] = "rtl";
-})(Direction || (Direction = {}));
-
 const styles = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{position:absolute;block-size:100%;inline-size:6px;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start: 1px;border-radius:0}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline:none;touch-action:none}.thumb-container.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));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha: .12}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha: .25}.thumb-container:before{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha, 0);transition:opacity .2s ease-out 0s}.thumb-container:after{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2)}.popup{pointer-events:none}.tooltip{width:auto;padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}";
 
 class _Slider extends index.FoundationElement {
@@ -47,7 +38,7 @@ const SliderMode = {
 class Slider extends FormAssociatedSlider {
   constructor() {
     super(...arguments);
-    this.direction = Direction.ltr;
+    this.direction = localization.Direction.ltr;
     this.isDragging = false;
     this.trackWidth = 0;
     this.trackMinWidth = 0;
@@ -308,7 +299,7 @@ class Slider extends FormAssociatedSlider {
   connectedCallback() {
     super.connectedCallback();
     this.proxy.setAttribute("type", "range");
-    this.direction = direction.getDirection(this);
+    this.direction = localization.getDirection(this);
     this.updateStepMultiplier();
     this.setupTrackConstraints();
     this.setupListeners();
@@ -329,7 +320,7 @@ class Slider extends FormAssociatedSlider {
    * @public
    */
   increment() {
-    const newVal = this.direction !== Direction.rtl && this.orientation !== aria.Orientation.vertical ? Number(this.value) + Number(this.step) : Number(this.value) - Number(this.step);
+    const newVal = this.direction !== localization.Direction.rtl && this.orientation !== aria.Orientation.vertical ? Number(this.value) + Number(this.step) : Number(this.value) - Number(this.step);
     this.value = this.#roundToNearestStep(newVal).toString();
   }
   /**
@@ -338,7 +329,7 @@ class Slider extends FormAssociatedSlider {
    * @public
    */
   decrement() {
-    const newVal = this.direction !== Direction.rtl && this.orientation !== aria.Orientation.vertical ? Number(this.value) - Number(this.step) : Number(this.value) + Number(this.step);
+    const newVal = this.direction !== localization.Direction.rtl && this.orientation !== aria.Orientation.vertical ? Number(this.value) - Number(this.step) : Number(this.value) + Number(this.step);
     this.value = this.#roundToNearestStep(newVal).toString();
   }
   /**

package/shared/definition47.js

@@ -3,21 +3,12 @@ import { p as popupRegistries } from './definition64.js';
 import { b as keyHome, a as keyEnd, c as keyArrowDown, e as keyArrowLeft, d as keyArrowUp, f as keyArrowRight } from './key-codes.js';
 import { i as inverseLerp, l as lerp, r as roundToStepValue, S as SliderTemplate } from './slider.template.js';
 import { F as FormAssociated } from './form-associated.js';
+import { D as Direction, g as getDirection } from './localization.js';
 import { O as Orientation } from './aria.js';
-import { g as getDirection } from './direction.js';
 import { l as limit } from './numbers.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { L as Localized } from './localized.js';
 
-/**
- * Expose ltr and rtl strings
- */
-var Direction;
-(function (Direction) {
-    Direction["ltr"] = "ltr";
-    Direction["rtl"] = "rtl";
-})(Direction || (Direction = {}));
-
 const styles = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{position:absolute;block-size:100%;inline-size:6px;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start: 1px;border-radius:0}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline:none;touch-action:none}.thumb-container.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));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha: .12}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha: .25}.thumb-container:before{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha, 0);transition:opacity .2s ease-out 0s}.thumb-container:after{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2)}.popup{pointer-events:none}.tooltip{width:auto;padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}";
 
 class _Slider extends FoundationElement {