@vonage/vivid 4.14.3 → 4.14.4

package/lib/option/option.d.ts

@@ -1,3 +1,5 @@
+import { AffixIconWithTrailing } from '../../shared/patterns/affix';
+import { ARIAGlobalStatesAndProperties } from '../../shared/foundation/patterns/aria-global';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 export declare function isListboxOption(el: Element): el is ListboxOption;
 export declare class ListboxOption extends VividElement {
@@ -31,3 +33,7 @@ export declare class DelegatesARIAListboxOption {
     ariaSelected: 'true' | 'false' | string | null;
     ariaSetSize: string | null;
 }
+export interface DelegatesARIAListboxOption extends ARIAGlobalStatesAndProperties {
+}
+export interface ListboxOption extends DelegatesARIAListboxOption, AffixIconWithTrailing {
+}

package/package.json

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

package/shared/definition17.cjs

@@ -2,10 +2,10 @@
 
 const definition = require('./definition27.cjs');
 const vividElement = require('./vivid-element.cjs');
-const keyCodes = require('./key-codes.cjs');
 const repeat = require('./repeat.cjs');
-const slotted = require('./slotted.cjs');
+const keyCodes = require('./key-codes.cjs');
 const children = require('./children.cjs');
+const slotted = require('./slotted.cjs');
 const when = require('./when.cjs');
 
 /**

package/shared/definition17.js

@@ -1,9 +1,9 @@
 import { I as Icon, i as iconDefinition } from './definition27.js';
 import { a as attr, o as observable, V as VividElement, D as DOM, O as Observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
-import { d as keyEnd, g as keyHome, j as keyPageDown, l as keyPageUp, f as keyArrowDown, e as keyArrowUp, i as keyArrowRight, h as keyArrowLeft, b as keyEscape, m as keyFunction2, k as keyEnter, a as keySpace } from './key-codes.js';
 import { R as RepeatDirective } from './repeat.js';
-import { s as slotted, e as elements } from './slotted.js';
+import { d as keyEnd, g as keyHome, j as keyPageDown, l as keyPageUp, f as keyArrowDown, e as keyArrowUp, i as keyArrowRight, h as keyArrowLeft, b as keyEscape, m as keyFunction2, k as keyEnter, a as keySpace } from './key-codes.js';
 import { c as children } from './children.js';
+import { s as slotted, e as elements } from './slotted.js';
 import { w as when } from './when.js';
 
 /**

package/shared/definition2.cjs

@@ -20,11 +20,11 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 const AccordionExpandMode$1 = {
   /**
-   * Designates only a single {@link @microsoft/fast-foundation#(AccordionItem:class) } can be open a time.
+   * Designates only a single AccordionItem can be open a time.
    */
   single: "single",
   /**
-   * Designates multiple {@link @microsoft/fast-foundation#(AccordionItem:class) | AccordionItems} can be open simultaneously.
+   * Designates multiple AccordionItems can be open simultaneously.
    */
   multi: "multi"
 };

package/shared/definition2.js

@@ -18,11 +18,11 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 const AccordionExpandMode$1 = {
   /**
-   * Designates only a single {@link @microsoft/fast-foundation#(AccordionItem:class) } can be open a time.
+   * Designates only a single AccordionItem can be open a time.
    */
   single: "single",
   /**
-   * Designates multiple {@link @microsoft/fast-foundation#(AccordionItem:class) | AccordionItems} can be open simultaneously.
+   * Designates multiple AccordionItems can be open simultaneously.
    */
   multi: "multi"
 };

package/shared/definition29.cjs

@@ -570,9 +570,6 @@ __decorateClass([
 __decorateClass([
   vividElement.attr({ mode: "boolean" })
 ], MenuItem.prototype, "checked");
-__decorateClass([
-  vividElement.observable
-], MenuItem.prototype, "submenuRegion");
 __decorateClass([
   vividElement.observable
 ], MenuItem.prototype, "hasSubmenu");

package/shared/definition29.js

@@ -568,9 +568,6 @@ __decorateClass([
 __decorateClass([
   attr({ mode: "boolean" })
 ], MenuItem.prototype, "checked");
-__decorateClass([
-  observable
-], MenuItem.prototype, "submenuRegion");
 __decorateClass([
   observable
 ], MenuItem.prototype, "hasSubmenu");

package/shared/definition5.cjs

@@ -8,8 +8,8 @@ const enums = require('./enums.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const localized = require('./localized.cjs');
 const playbackRates = require('./playbackRates.cjs');
-const when = require('./when.cjs');
 const repeat = require('./repeat.cjs');
+const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
 const styles = ":host{display:block}.wrapper{container-type:inline-size}.base{display:inline-flex;box-sizing:border-box;align-items:center;padding:8px;color:var(--vvd-color-canvas-text);gap:8px;inline-size:100%;user-select:none}.base.disabled{color:var(--vvd-color-neutral-300)}.base .slider{flex:1;grid-area:slider}.base .controls{display:flex;align-items:center;justify-content:center;gap:8px;grid-area:controls}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{margin-inline:6px;min-inline-size:32px}.base .playback-button{grid-area:playback}@container (max-width: 500px){.base.two-lines{display:inline-grid;grid-template:auto auto/1fr;grid-template-areas:\"slider\" \"controls\";inline-size:100%;row-gap:4px}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-areas:\"slider slider\" \"controls playback\";grid-template-columns:1fr auto}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}";

package/shared/definition5.js

@@ -6,8 +6,8 @@ import { M as MediaSkipBy } from './enums.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { L as Localized } from './localized.js';
 import { g as getPlaybackRatesArray } from './playbackRates.js';
-import { w as when } from './when.js';
 import { r as repeat } from './repeat.js';
+import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
 const styles = ":host{display:block}.wrapper{container-type:inline-size}.base{display:inline-flex;box-sizing:border-box;align-items:center;padding:8px;color:var(--vvd-color-canvas-text);gap:8px;inline-size:100%;user-select:none}.base.disabled{color:var(--vvd-color-neutral-300)}.base .slider{flex:1;grid-area:slider}.base .controls{display:flex;align-items:center;justify-content:center;gap:8px;grid-area:controls}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{margin-inline:6px;min-inline-size:32px}.base .playback-button{grid-area:playback}@container (max-width: 500px){.base.two-lines{display:inline-grid;grid-template:auto auto/1fr;grid-template-areas:\"slider\" \"controls\";inline-size:100%;row-gap:4px}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-areas:\"slider slider\" \"controls playback\";grid-template-columns:1fr auto}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}";

package/shared/listbox.cjs

@@ -2,6 +2,7 @@
 
 const option = require('./option.cjs');
 const vividElement = require('./vivid-element.cjs');
+const applyMixins = require('./apply-mixins.cjs');
 const keyCodes = require('./key-codes.cjs');
 const strings = require('./strings.cjs');
 const ariaGlobal = require('./aria-global.cjs');
@@ -22,26 +23,6 @@ function findLastIndex(array, predicate) {
     return -1;
 }
 
-/**
- * Apply mixins to a constructor.
- * Sourced from {@link https://www.typescriptlang.org/docs/handbook/mixins.html | TypeScript Documentation }.
- * @public
- */
-function applyMixins(derivedCtor, ...baseCtors) {
-    const derivedAttributes = vividElement.AttributeConfiguration.locate(derivedCtor);
-    baseCtors.forEach(baseCtor => {
-        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
-            if (name !== "constructor") {
-                Object.defineProperty(derivedCtor.prototype, name, 
-                /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-                Object.getOwnPropertyDescriptor(baseCtor.prototype, name));
-            }
-        });
-        const baseAttributes = vividElement.AttributeConfiguration.locate(baseCtor);
-        baseAttributes.forEach(x => derivedAttributes.push(x));
-    });
-}
-
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0 ;
@@ -509,7 +490,7 @@ __decorateClass([
 __decorateClass([
   vividElement.observable
 ], DelegatesARIAListbox.prototype, "ariaMultiSelectable");
-applyMixins(DelegatesARIAListbox, ariaGlobal.ARIAGlobalStatesAndProperties);
-applyMixins(Listbox, DelegatesARIAListbox);
+applyMixins.applyMixins(DelegatesARIAListbox, ariaGlobal.ARIAGlobalStatesAndProperties);
+applyMixins.applyMixins(Listbox, DelegatesARIAListbox);
 
 exports.Listbox = Listbox;

package/shared/listbox.js

@@ -1,5 +1,6 @@
 import { i as isListboxOption } from './option.js';
-import { A as AttributeConfiguration, V as VividElement, O as Observable, a as attr, o as observable } from './vivid-element.js';
+import { V as VividElement, O as Observable, a as attr, o as observable } from './vivid-element.js';
+import { a as applyMixins } from './apply-mixins.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';
 import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
@@ -20,26 +21,6 @@ function findLastIndex(array, predicate) {
     return -1;
 }
 
-/**
- * Apply mixins to a constructor.
- * Sourced from {@link https://www.typescriptlang.org/docs/handbook/mixins.html | TypeScript Documentation }.
- * @public
- */
-function applyMixins(derivedCtor, ...baseCtors) {
-    const derivedAttributes = AttributeConfiguration.locate(derivedCtor);
-    baseCtors.forEach(baseCtor => {
-        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
-            if (name !== "constructor") {
-                Object.defineProperty(derivedCtor.prototype, name, 
-                /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-                Object.getOwnPropertyDescriptor(baseCtor.prototype, name));
-            }
-        });
-        const baseAttributes = AttributeConfiguration.locate(baseCtor);
-        baseAttributes.forEach(x => derivedAttributes.push(x));
-    });
-}
-
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0 ;

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 08:59:25 GMT
+ * Generated on Tue, 04 Feb 2025 16:43:13 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 08:59:25 GMT
+ * Generated on Tue, 04 Feb 2025 16:43:13 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 08:59:25 GMT
+ * Generated on Tue, 04 Feb 2025 16:43:13 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 Tue, 04 Feb 2025 08:59:25 GMT
+ * Generated on Tue, 04 Feb 2025 16:43:13 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 08:59:25 GMT
+ * Generated on Tue, 04 Feb 2025 16:43:13 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 08:59:25 GMT
+ * Generated on Tue, 04 Feb 2025 16:43:13 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 08:59:25 GMT
+ * Generated on Tue, 04 Feb 2025 16:43:13 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 08:59:25 GMT
+ * Generated on Tue, 04 Feb 2025 16:43:13 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 08:59:25 GMT
+ * Generated on Tue, 04 Feb 2025 16:43:13 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 08:59:25 GMT
+ * Generated on Tue, 04 Feb 2025 16:43:13 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 08:59:25 GMT
+ * Generated on Tue, 04 Feb 2025 16:43:13 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 08:59:25 GMT
+ * Generated on Tue, 04 Feb 2025 16:43:13 GMT
  */
 .vvd-root, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {