@vonage/vivid 4.12.1 → 4.13.0

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 20 Nov 2024 13:40:01 GMT
+ * Generated on Mon, 02 Dec 2024 10:48:08 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);
@@ -8,6 +8,26 @@
   color: var(--vvd-color-canvas-text);
 }
 
+.vvd-scrollbar {
+  --scrollbar-track-color: transparent;
+  --scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);
+}
+.vvd-scrollbar {
+  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
+  scrollbar-width: thin;
+}
+.vvd-scrollbar ::-webkit-scrollbar {
+  width: 4px;
+}
+.vvd-scrollbar ::-webkit-scrollbar-track {
+  background: var(--scrollbar-track-color);
+}
+.vvd-scrollbar ::-webkit-scrollbar-thumb {
+  border: 0;
+  border-radius: 4px;
+  background-color: var(--scrollbar-thumb-color);
+}
+
 .vvd-root:root {
   --vvd-size-font-scale-base: 1rem;
   font-size: unset;

package/styles/core/theme.css

@@ -1,9 +1,29 @@
 /**
  * Do not edit directly
- * Generated on Wed, 20 Nov 2024 13:40:01 GMT
+ * Generated on Mon, 02 Dec 2024 10:48:08 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);
   background-color: var(--vvd-color-canvas);
   color: var(--vvd-color-canvas-text);
 }
+
+.vvd-scrollbar {
+  --scrollbar-track-color: transparent;
+  --scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);
+}
+.vvd-scrollbar {
+  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
+  scrollbar-width: thin;
+}
+.vvd-scrollbar ::-webkit-scrollbar {
+  width: 4px;
+}
+.vvd-scrollbar ::-webkit-scrollbar-track {
+  background: var(--scrollbar-track-color);
+}
+.vvd-scrollbar ::-webkit-scrollbar-thumb {
+  border: 0;
+  border-radius: 4px;
+  background-color: var(--scrollbar-thumb-color);
+}

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 20 Nov 2024 13:40:01 GMT
+ * Generated on Mon, 02 Dec 2024 10:48:08 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, 20 Nov 2024 13:40:01 GMT
+ * Generated on Mon, 02 Dec 2024 10:48:08 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 20 Nov 2024 13:40:01 GMT
+ * Generated on Mon, 02 Dec 2024 10:48:08 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 20 Nov 2024 13:40:01 GMT
+ * Generated on Mon, 02 Dec 2024 10:48:08 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 20 Nov 2024 13:40:01 GMT
+ * Generated on Mon, 02 Dec 2024 10:48:08 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Wed, 20 Nov 2024 13:40:01 GMT
+ * Generated on Mon, 02 Dec 2024 10:48:08 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 20 Nov 2024 13:40:01 GMT
+ * Generated on Mon, 02 Dec 2024 10:48:08 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 20 Nov 2024 13:40:01 GMT
+ * Generated on Mon, 02 Dec 2024 10:48:08 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 20 Nov 2024 13:40:01 GMT
+ * Generated on Mon, 02 Dec 2024 10:48:08 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, 20 Nov 2024 13:40:01 GMT
+ * Generated on Mon, 02 Dec 2024 10:48:08 GMT
  */
 .vvd-root, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {

package/vivid.api.json

@@ -4636,6 +4636,50 @@
           ],
           "name": "menuItemDefinition"
         },
+        {
+          "kind": "TypeAlias",
+          "canonicalReference": "@vonage/vivid!MenuItemRole:type",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export type MenuItemRole = "
+            },
+            {
+              "kind": "Content",
+              "text": "typeof "
+            },
+            {
+              "kind": "Reference",
+              "text": "MenuItemRole",
+              "canonicalReference": "@vonage/vivid!MenuItemRole:var"
+            },
+            {
+              "kind": "Content",
+              "text": "[keyof typeof "
+            },
+            {
+              "kind": "Reference",
+              "text": "MenuItemRole",
+              "canonicalReference": "@vonage/vivid!MenuItemRole:var"
+            },
+            {
+              "kind": "Content",
+              "text": "]"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "../../dist/libs/components/lib/menu-item/menu-item.d.ts",
+          "releaseTag": "Public",
+          "name": "MenuItemRole",
+          "typeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 6
+          }
+        },
         {
           "kind": "Variable",
           "canonicalReference": "@vonage/vivid!MenuItemRole:var",

package/shared/Reflector.cjs

@@ -1,71 +0,0 @@
-'use strict';
-
-const index = require('./index.cjs');
-
-class Reflector {
-  #reflectedProperties = /* @__PURE__ */ new Map();
-  #source;
-  #target;
-  constructor(source, target) {
-    this.#source = source;
-    this.#target = target;
-  }
-  attribute(propertyName, attributeName) {
-    this.#addReflectedProperty(propertyName, {
-      type: "attribute",
-      destination: attributeName
-    });
-  }
-  booleanAttribute(propertyName, attributeName) {
-    this.#addReflectedProperty(propertyName, {
-      type: "boolean-attribute",
-      destination: attributeName
-    });
-  }
-  property(propertyName, targetProperty, skipIfEqual = false) {
-    this.#addReflectedProperty(propertyName, {
-      type: "property",
-      destination: targetProperty,
-      skipIfEqual
-    });
-  }
-  destroy() {
-    const notifier = index.Observable.getNotifier(this.#source);
-    for (const prop of this.#reflectedProperties.keys()) {
-      notifier.unsubscribe(this.#propertyChangeHandler, prop);
-    }
-    this.#reflectedProperties.clear();
-  }
-  #addReflectedProperty(name, reflected) {
-    this.#reflectedProperties.set(name, reflected);
-    const notifier = index.Observable.getNotifier(this.#source);
-    notifier.subscribe(this.#propertyChangeHandler, name);
-    this.#propertyChangeHandler.handleChange(this.#source, name);
-  }
-  #propertyChangeHandler = {
-    handleChange: (source, propertyName) => {
-      const reflectedProperty = this.#reflectedProperties.get(propertyName);
-      const value = source[propertyName];
-      switch (reflectedProperty.type) {
-        case "boolean-attribute":
-          index.DOM.setBooleanAttribute(
-            this.#target,
-            reflectedProperty.destination,
-            Boolean(value)
-          );
-          break;
-        case "attribute":
-          index.DOM.setAttribute(this.#target, reflectedProperty.destination, value);
-          break;
-        case "property":
-          if (reflectedProperty.skipIfEqual && this.#target[reflectedProperty.destination] === value) {
-            return;
-          }
-          this.#target[reflectedProperty.destination] = value;
-          break;
-      }
-    }
-  };
-}
-
-exports.Reflector = Reflector;

package/shared/Reflector.js

@@ -1,69 +0,0 @@
-import { O as Observable, D as DOM } from './index.js';
-
-class Reflector {
-  #reflectedProperties = /* @__PURE__ */ new Map();
-  #source;
-  #target;
-  constructor(source, target) {
-    this.#source = source;
-    this.#target = target;
-  }
-  attribute(propertyName, attributeName) {
-    this.#addReflectedProperty(propertyName, {
-      type: "attribute",
-      destination: attributeName
-    });
-  }
-  booleanAttribute(propertyName, attributeName) {
-    this.#addReflectedProperty(propertyName, {
-      type: "boolean-attribute",
-      destination: attributeName
-    });
-  }
-  property(propertyName, targetProperty, skipIfEqual = false) {
-    this.#addReflectedProperty(propertyName, {
-      type: "property",
-      destination: targetProperty,
-      skipIfEqual
-    });
-  }
-  destroy() {
-    const notifier = Observable.getNotifier(this.#source);
-    for (const prop of this.#reflectedProperties.keys()) {
-      notifier.unsubscribe(this.#propertyChangeHandler, prop);
-    }
-    this.#reflectedProperties.clear();
-  }
-  #addReflectedProperty(name, reflected) {
-    this.#reflectedProperties.set(name, reflected);
-    const notifier = Observable.getNotifier(this.#source);
-    notifier.subscribe(this.#propertyChangeHandler, name);
-    this.#propertyChangeHandler.handleChange(this.#source, name);
-  }
-  #propertyChangeHandler = {
-    handleChange: (source, propertyName) => {
-      const reflectedProperty = this.#reflectedProperties.get(propertyName);
-      const value = source[propertyName];
-      switch (reflectedProperty.type) {
-        case "boolean-attribute":
-          DOM.setBooleanAttribute(
-            this.#target,
-            reflectedProperty.destination,
-            Boolean(value)
-          );
-          break;
-        case "attribute":
-          DOM.setAttribute(this.#target, reflectedProperty.destination, value);
-          break;
-        case "property":
-          if (reflectedProperty.skipIfEqual && this.#target[reflectedProperty.destination] === value) {
-            return;
-          }
-          this.#target[reflectedProperty.destination] = value;
-          break;
-      }
-    }
-  };
-}
-
-export { Reflector as R };

package/shared/listbox-option.cjs

@@ -1,204 +0,0 @@
-'use strict';
-
-const index = require('./index.cjs');
-const ariaGlobal = require('./aria-global.cjs');
-const startEnd = require('./start-end.cjs');
-const applyMixins = require('./apply-mixins.cjs');
-const dom = require('./dom.cjs');
-
-/**
- * Determines if the element is a {@link (ListboxOption:class)}
- *
- * @param element - the element to test.
- * @public
- */
-function isListboxOption(el) {
-    return (dom.isHTMLElement(el) &&
-        (el.getAttribute("role") === "option" ||
-            el instanceof HTMLOptionElement));
-}
-/**
- * An Option Custom HTML Element.
- * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option }.
- *
- * @slot start - Content which can be provided before the listbox option content
- * @slot end - Content which can be provided after the listbox option content
- * @slot - The default slot for listbox option content
- * @csspart content - Wraps the listbox option content
- *
- * @public
- */
-let ListboxOption$1 = class ListboxOption extends index.FoundationElement {
-    constructor(text, value, defaultSelected, selected) {
-        super();
-        /**
-         * The defaultSelected state of the option.
-         * @public
-         */
-        this.defaultSelected = false;
-        /**
-         * Tracks whether the "selected" property has been changed.
-         * @internal
-         */
-        this.dirtySelected = false;
-        /**
-         * The checked state of the control.
-         *
-         * @public
-         */
-        this.selected = this.defaultSelected;
-        /**
-         * Track whether the value has been changed from the initial value
-         */
-        this.dirtyValue = false;
-        if (text) {
-            this.textContent = text;
-        }
-        if (value) {
-            this.initialValue = value;
-        }
-        if (defaultSelected) {
-            this.defaultSelected = defaultSelected;
-        }
-        if (selected) {
-            this.selected = selected;
-        }
-        this.proxy = new Option(`${this.textContent}`, this.initialValue, this.defaultSelected, this.selected);
-        this.proxy.disabled = this.disabled;
-    }
-    /**
-     * Updates the ariaChecked property when the checked property changes.
-     *
-     * @param prev - the previous checked value
-     * @param next - the current checked value
-     *
-     * @public
-     */
-    checkedChanged(prev, next) {
-        if (typeof next === "boolean") {
-            this.ariaChecked = next ? "true" : "false";
-            return;
-        }
-        this.ariaChecked = null;
-    }
-    /**
-     * Updates the proxy's text content when the default slot changes.
-     * @param prev - the previous content value
-     * @param next - the current content value
-     *
-     * @internal
-     */
-    contentChanged(prev, next) {
-        if (this.proxy instanceof HTMLOptionElement) {
-            this.proxy.textContent = this.textContent;
-        }
-        this.$emit("contentchange", null, { bubbles: true });
-    }
-    defaultSelectedChanged() {
-        if (!this.dirtySelected) {
-            this.selected = this.defaultSelected;
-            if (this.proxy instanceof HTMLOptionElement) {
-                this.proxy.selected = this.defaultSelected;
-            }
-        }
-    }
-    disabledChanged(prev, next) {
-        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(previous, next) {
-        // If the value is clean and the component is connected to the DOM
-        // then set value equal to the attribute value.
-        if (!this.dirtyValue) {
-            this.value = this.initialValue;
-            this.dirtyValue = false;
-        }
-    }
-    get label() {
-        var _a;
-        return (_a = this.value) !== null && _a !== void 0 ? _a : this.text;
-    }
-    get text() {
-        var _a, _b;
-        return (_b = (_a = this.textContent) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, " ").trim()) !== null && _b !== void 0 ? _b : "";
-    }
-    set value(next) {
-        const newValue = `${next !== null && next !== void 0 ? next : ""}`;
-        this._value = newValue;
-        this.dirtyValue = true;
-        if (this.proxy instanceof HTMLOptionElement) {
-            this.proxy.value = newValue;
-        }
-        index.Observable.notify(this, "value");
-    }
-    get value() {
-        var _a;
-        index.Observable.track(this, "value");
-        return (_a = this._value) !== null && _a !== void 0 ? _a : this.text;
-    }
-    get form() {
-        return this.proxy ? this.proxy.form : null;
-    }
-};
-index.__decorate([
-    index.observable
-], ListboxOption$1.prototype, "checked", void 0);
-index.__decorate([
-    index.observable
-], ListboxOption$1.prototype, "content", void 0);
-index.__decorate([
-    index.observable
-], ListboxOption$1.prototype, "defaultSelected", void 0);
-index.__decorate([
-    index.attr({ mode: "boolean" })
-], ListboxOption$1.prototype, "disabled", void 0);
-index.__decorate([
-    index.attr({ attribute: "selected", mode: "boolean" })
-], ListboxOption$1.prototype, "selectedAttribute", void 0);
-index.__decorate([
-    index.observable
-], ListboxOption$1.prototype, "selected", void 0);
-index.__decorate([
-    index.attr({ attribute: "value", mode: "fromView" })
-], ListboxOption$1.prototype, "initialValue", void 0);
-/**
- * States and properties relating to the ARIA `option` role.
- *
- * @public
- */
-class DelegatesARIAListboxOption {
-}
-index.__decorate([
-    index.observable
-], DelegatesARIAListboxOption.prototype, "ariaChecked", void 0);
-index.__decorate([
-    index.observable
-], DelegatesARIAListboxOption.prototype, "ariaPosInSet", void 0);
-index.__decorate([
-    index.observable
-], DelegatesARIAListboxOption.prototype, "ariaSelected", void 0);
-index.__decorate([
-    index.observable
-], DelegatesARIAListboxOption.prototype, "ariaSetSize", void 0);
-applyMixins.applyMixins(DelegatesARIAListboxOption, ariaGlobal.ARIAGlobalStatesAndProperties);
-applyMixins.applyMixins(ListboxOption$1, startEnd.StartEnd, DelegatesARIAListboxOption);
-
-exports.ListboxOption = ListboxOption$1;
-exports.isListboxOption = isListboxOption;