@vonage/vivid 4.14.1 → 4.14.2

package/shared/listbox.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const definition = require('./definition35.cjs');
+const option = require('./option.cjs');
 const vividElement = require('./vivid-element.cjs');
 const keyCodes = require('./key-codes.cjs');
 const strings = require('./strings.cjs');
@@ -108,7 +108,7 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
      * @param n - element to filter
      * @public
      */
-    this.slottedOptionFilter = (n) => definition.isListboxOption(n) && !n.hidden;
+    this.slottedOptionFilter = (n) => option.isListboxOption(n) && !n.hidden;
   }
   static {
     /**
@@ -419,7 +419,7 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
    */
   slottedOptionsChanged(_, next) {
     this.options = next.reduce((options, item) => {
-      if (definition.isListboxOption(item)) {
+      if (option.isListboxOption(item)) {
         options.push(item);
       }
       return options;

package/shared/listbox.js

@@ -1,4 +1,4 @@
-import { i as isListboxOption } from './definition35.js';
+import { i as isListboxOption } from './option.js';
 import { V as VividElement, O as Observable, a as attr, o as observable } from './vivid-element.js';
 import { a as keySpace, b as keyEscape, k as keyEnter, c as keyTab, d as keyEnd, e as keyArrowUp, f as keyArrowDown, g as keyHome } from './key-codes.js';
 import { u as uniqueId } from './strings.js';

package/shared/option.cjs

@@ -0,0 +1,205 @@
+'use strict';
+
+const applyMixins = require('./apply-mixins.cjs');
+const affix = require('./affix.cjs');
+const ariaGlobal = require('./aria-global.cjs');
+const vividElement = require('./vivid-element.cjs');
+const dom = require('./dom.cjs');
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+function isListboxOption(el) {
+  return dom.isHTMLElement(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement);
+}
+class ListboxOption extends vividElement.VividElement {
+  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;
+  }
+  /**
+   * 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;
+  }
+  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;
+  }
+  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;
+    }
+    vividElement.Observable.notify(this, "value");
+  }
+  get value() {
+    vividElement.Observable.track(this, "value");
+    return this._value ?? this.text;
+  }
+  get form() {
+    return null;
+  }
+  /**
+   * @internal
+   */
+  get _matchedRangeSafe() {
+    return this._matchedRange ?? { from: 0, to: 0 };
+  }
+}
+__decorateClass([
+  vividElement.observable
+], ListboxOption.prototype, "checked");
+__decorateClass([
+  vividElement.observable
+], ListboxOption.prototype, "defaultSelected");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  vividElement.attr({ mode: "boolean" })
+], ListboxOption.prototype, "disabled");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  vividElement.attr({ attribute: "selected", mode: "boolean" })
+], ListboxOption.prototype, "selectedAttribute");
+__decorateClass([
+  vividElement.observable
+], ListboxOption.prototype, "selected");
+__decorateClass([
+  vividElement.attr({ attribute: "value", mode: "fromView" })
+], ListboxOption.prototype, "initialValue");
+__decorateClass([
+  vividElement.attr({
+    attribute: "label"
+  })
+], ListboxOption.prototype, "_label");
+__decorateClass([
+  vividElement.attr({
+    attribute: "text"
+  })
+], ListboxOption.prototype, "_text");
+__decorateClass([
+  vividElement.observable
+], ListboxOption.prototype, "_highlighted");
+__decorateClass([
+  vividElement.observable
+], ListboxOption.prototype, "_displayCheckmark");
+__decorateClass([
+  vividElement.observable
+], ListboxOption.prototype, "_matchedRange");
+class DelegatesARIAListboxOption {
+}
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  vividElement.observable
+], DelegatesARIAListboxOption.prototype, "ariaChecked");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  vividElement.observable
+], DelegatesARIAListboxOption.prototype, "ariaPosInSet");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  vividElement.observable
+], DelegatesARIAListboxOption.prototype, "ariaSelected");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  vividElement.observable
+], DelegatesARIAListboxOption.prototype, "ariaSetSize");
+applyMixins.applyMixins(DelegatesARIAListboxOption, ariaGlobal.ARIAGlobalStatesAndProperties);
+applyMixins.applyMixins(ListboxOption, affix.AffixIconWithTrailing, DelegatesARIAListboxOption);
+
+exports.ListboxOption = ListboxOption;
+exports.isListboxOption = isListboxOption;

package/shared/option.js

@@ -0,0 +1,202 @@
+import { a as applyMixins } from './apply-mixins.js';
+import { A as AffixIconWithTrailing } from './affix.js';
+import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
+import { V as VividElement, O as Observable, o as observable, a as attr } from './vivid-element.js';
+import { i as isHTMLElement } from './dom.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+function isListboxOption(el) {
+  return isHTMLElement(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement);
+}
+class ListboxOption extends VividElement {
+  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;
+  }
+  /**
+   * 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;
+  }
+  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;
+  }
+  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
+   */
+  get _matchedRangeSafe() {
+    return this._matchedRange ?? { from: 0, to: 0 };
+  }
+}
+__decorateClass([
+  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");
+__decorateClass([
+  observable
+], ListboxOption.prototype, "_displayCheckmark");
+__decorateClass([
+  observable
+], ListboxOption.prototype, "_matchedRange");
+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);
+
+export { ListboxOption as L, isListboxOption as i };

package/shared/start-end.cjs

@@ -0,0 +1,52 @@
+'use strict';
+
+const vividElement = require('./vivid-element.cjs');
+const ref = require('./ref.cjs');
+
+/**
+ * A mixin class implementing start and end elements.
+ * These are generally used to decorate text elements with icons or other visual indicators.
+ * @public
+ */
+class StartEnd {
+    handleStartContentChange() {
+        this.startContainer.classList.toggle("start", this.start.assignedNodes().length > 0);
+    }
+    handleEndContentChange() {
+        this.endContainer.classList.toggle("end", this.end.assignedNodes().length > 0);
+    }
+}
+/**
+ * The template for the end element.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ * @deprecated - use endSlotTemplate
+ */
+vividElement.html `
+    <span part="end" ${ref.ref("endContainer")}>
+        <slot
+            name="end"
+            ${ref.ref("end")}
+            @slotchange="${x => x.handleEndContentChange()}"
+        ></slot>
+    </span>
+`;
+/**
+ * The template for the start element.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ * @deprecated - use startSlotTemplate
+ */
+vividElement.html `
+    <span part="start" ${ref.ref("startContainer")}>
+        <slot
+            name="start"
+            ${ref.ref("start")}
+            @slotchange="${x => x.handleStartContentChange()}"
+        ></slot>
+    </span>
+`;
+
+exports.StartEnd = StartEnd;

package/shared/start-end.js

@@ -0,0 +1,50 @@
+import { h as html } from './vivid-element.js';
+import { r as ref } from './ref.js';
+
+/**
+ * A mixin class implementing start and end elements.
+ * These are generally used to decorate text elements with icons or other visual indicators.
+ * @public
+ */
+class StartEnd {
+    handleStartContentChange() {
+        this.startContainer.classList.toggle("start", this.start.assignedNodes().length > 0);
+    }
+    handleEndContentChange() {
+        this.endContainer.classList.toggle("end", this.end.assignedNodes().length > 0);
+    }
+}
+/**
+ * The template for the end element.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ * @deprecated - use endSlotTemplate
+ */
+html `
+    <span part="end" ${ref("endContainer")}>
+        <slot
+            name="end"
+            ${ref("end")}
+            @slotchange="${x => x.handleEndContentChange()}"
+        ></slot>
+    </span>
+`;
+/**
+ * The template for the start element.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ * @deprecated - use startSlotTemplate
+ */
+html `
+    <span part="start" ${ref("startContainer")}>
+        <slot
+            name="start"
+            ${ref("start")}
+            @slotchange="${x => x.handleStartContentChange()}"
+        ></slot>
+    </span>
+`;
+
+export { StartEnd as S };

package/shared/text-anchor.js

@@ -1,4 +1,4 @@
-import { A as AffixIcon } from './affix.js';
+import { b as AffixIcon } from './affix.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { A as Anchor } from './anchor.js';
 import { V as VividElement, a as attr } from './vivid-element.js';

package/shared/text-field2.js

@@ -5,7 +5,7 @@ import { F as FormAssociated } from './form-associated.js';
 import { m as memoizeWith } from './definition27.js';
 import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount } from './form-elements.js';
 import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
-import { A as AffixIcon } from './affix.js';
+import { b as AffixIcon } from './affix.js';
 
 const byteToHex = [];
 for (let i = 0; i < 256; ++i) {

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 12:46:31 GMT
+ * Generated on Tue, 28 Jan 2025 12:08:04 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 12:46:31 GMT
+ * Generated on Tue, 28 Jan 2025 12:08:04 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 12:46:31 GMT
+ * Generated on Tue, 28 Jan 2025 12:08:04 GMT
  */
 .vvd-root:root {
   --vvd-size-font-scale-base: 1rem;

package/styles/tokens/theme-dark.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 12:46:31 GMT
+ * Generated on Tue, 28 Jan 2025 12:08:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 12:46:31 GMT
+ * Generated on Tue, 28 Jan 2025 12:08:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 12:46:31 GMT
+ * Generated on Tue, 28 Jan 2025 12:08:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 12:46:31 GMT
+ * Generated on Tue, 28 Jan 2025 12:08:04 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 12:46:31 GMT
+ * Generated on Tue, 28 Jan 2025 12:08:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 12:46:31 GMT
+ * Generated on Tue, 28 Jan 2025 12:08:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 12:46:31 GMT
+ * Generated on Tue, 28 Jan 2025 12:08:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 12:46:31 GMT
+ * Generated on Tue, 28 Jan 2025 12:08:04 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/vivid-2-compat.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 12:46:31 GMT
+ * Generated on Tue, 28 Jan 2025 12:08:04 GMT
  */
 .vvd-root, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {

package/lib/listbox/definition.d.ts

@@ -1,2 +0,0 @@
-export type { LisboxAppearance } from './listbox';
-export declare const registerListbox: (prefix?: string) => void;

package/lib/listbox/listbox.d.ts

@@ -1,14 +0,0 @@
-import { ListboxElement as FoundationListboxElement } from '@microsoft/fast-foundation';
-import type { Appearance, Shape } from '../enums';
-export type LisboxAppearance = Extract<Appearance, Appearance.Fieldset | Appearance.Ghost>;
-type ListboxShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
-export declare class Listbox extends FoundationListboxElement {
-    #private;
-    appearance?: LisboxAppearance;
-    orientation?: 'horizontal' | 'vertical';
-    orientationChanged(): void;
-    shape?: ListboxShape;
-    slottedOptionsChanged(prev: Element[] | undefined, next: Element[]): void;
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-}
-export {};

package/lib/listbox/listbox.template.d.ts

@@ -1,2 +0,0 @@
-import type { Listbox } from './listbox';
-export declare const ListboxTemplate: import("@microsoft/fast-element").ViewTemplate<Listbox, any>;