@vonage/vivid 4.14.1 → 4.14.3

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>;

package/listbox/index.cjs

@@ -1,54 +0,0 @@
-'use strict';
-
-const definition = require('../shared/definition35.cjs');
-const vividElement = require('../shared/vivid-element.cjs');
-const listbox = require('../shared/listbox2.cjs');
-const slotted = require('../shared/slotted.cjs');
-const classNames = require('../shared/class-names.cjs');
-
-const getClasses = ({ appearance, shape, disabled, orientation }) => classNames.classNames(
-  "base",
-  ["disabled", disabled],
-  [`appearance-${appearance}`, Boolean(appearance)],
-  [`shape-${shape}`, Boolean(shape) && orientation === "horizontal"],
-  [`orientation-${orientation}`, Boolean(orientation)]
-);
-const ListboxTemplate = vividElement.html`
-	<template
-		aria-activedescendant="${(x) => x.ariaActiveDescendant}"
-		aria-multiselectable="${(x) => x.ariaMultiSelectable}"
-		aria-orientation="${(x) => x.ariaOrientation}"
-		aria-label="listbox"
-		role="listbox"
-		@click="${(x, c) => x.clickHandler(c.event)}"
-		@focusin="${(x, c) => x.focusinHandler(c.event)}"
-		@keydown="${(x, c) => x.keydownHandler(c.event)}"
-		@mousedown="${(x, c) => x.mousedownHandler(c.event)}"
-		tabindex="${(x) => !x.disabled ? "0" : null}"
-	>
-		<div class="${getClasses}">
-			<slot
-				${slotted.slotted({
-  filter: listbox.ListboxElement.slottedOptionFilter,
-  flatten: true,
-  property: "slottedOptions"
-})}
-			></slot>
-		</div>
-	</template>
-`;
-
-const styles = ":host{display:inline-block;inline-size:fit-content}:host(:focus-within){outline:none}:host([disabled]){cursor:not-allowed}.base{--_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base{display:inline-flex;box-sizing:border-box;padding:4px;border-radius:var(--_listbox-border-radius);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);contain:paint;gap:4px;inline-size:100%}.base:not(.orientation-horizontal){flex-direction:column}.base:not(.shape-pill){--_listbox-border-radius: 8px}.base.shape-pill{--_listbox-border-radius: 24px}:host(:focus-within) .base{--focus-stroke-gap-color: transparent;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))}::slotted([role=option]){border-radius:var(--_listbox-border-radius);contain:content}.base.disabled ::slotted([role=option]){--_option-appearance-color-text: var(--_appearance-color-outline);pointer-events:none}";
-
-const listboxDefinition = vividElement.defineVividComponent(
-  "listbox",
-  listbox.Listbox,
-  ListboxTemplate,
-  [definition.listboxOptionDefinition],
-  {
-    styles
-  }
-);
-const registerListbox = vividElement.createRegisterFunction(listboxDefinition);
-
-registerListbox();

package/listbox/index.js

@@ -1,52 +0,0 @@
-import { l as listboxOptionDefinition } from '../shared/definition35.js';
-import { h as html, f as createRegisterFunction, d as defineVividComponent } from '../shared/vivid-element.js';
-import { L as ListboxElement, a as Listbox } from '../shared/listbox2.js';
-import { s as slotted } from '../shared/slotted.js';
-import { c as classNames } from '../shared/class-names.js';
-
-const getClasses = ({ appearance, shape, disabled, orientation }) => classNames(
-  "base",
-  ["disabled", disabled],
-  [`appearance-${appearance}`, Boolean(appearance)],
-  [`shape-${shape}`, Boolean(shape) && orientation === "horizontal"],
-  [`orientation-${orientation}`, Boolean(orientation)]
-);
-const ListboxTemplate = html`
-	<template
-		aria-activedescendant="${(x) => x.ariaActiveDescendant}"
-		aria-multiselectable="${(x) => x.ariaMultiSelectable}"
-		aria-orientation="${(x) => x.ariaOrientation}"
-		aria-label="listbox"
-		role="listbox"
-		@click="${(x, c) => x.clickHandler(c.event)}"
-		@focusin="${(x, c) => x.focusinHandler(c.event)}"
-		@keydown="${(x, c) => x.keydownHandler(c.event)}"
-		@mousedown="${(x, c) => x.mousedownHandler(c.event)}"
-		tabindex="${(x) => !x.disabled ? "0" : null}"
-	>
-		<div class="${getClasses}">
-			<slot
-				${slotted({
-  filter: ListboxElement.slottedOptionFilter,
-  flatten: true,
-  property: "slottedOptions"
-})}
-			></slot>
-		</div>
-	</template>
-`;
-
-const styles = ":host{display:inline-block;inline-size:fit-content}:host(:focus-within){outline:none}:host([disabled]){cursor:not-allowed}.base{--_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base{display:inline-flex;box-sizing:border-box;padding:4px;border-radius:var(--_listbox-border-radius);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);contain:paint;gap:4px;inline-size:100%}.base:not(.orientation-horizontal){flex-direction:column}.base:not(.shape-pill){--_listbox-border-radius: 8px}.base.shape-pill{--_listbox-border-radius: 24px}:host(:focus-within) .base{--focus-stroke-gap-color: transparent;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))}::slotted([role=option]){border-radius:var(--_listbox-border-radius);contain:content}.base.disabled ::slotted([role=option]){--_option-appearance-color-text: var(--_appearance-color-outline);pointer-events:none}";
-
-const listboxDefinition = defineVividComponent(
-  "listbox",
-  Listbox,
-  ListboxTemplate,
-  [listboxOptionDefinition],
-  {
-    styles
-  }
-);
-const registerListbox = createRegisterFunction(listboxDefinition);
-
-registerListbox();

package/shared/apply-mixins2.cjs

@@ -1,25 +0,0 @@
-'use strict';
-
-const vividElement = require('./vivid-element.cjs');
-
-/**
- * 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));
-    });
-}
-
-exports.applyMixins = applyMixins;

package/shared/apply-mixins2.js

@@ -1,23 +0,0 @@
-import { A as AttributeConfiguration } from './vivid-element.js';
-
-/**
- * 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));
-    });
-}
-
-export { applyMixins as a };

package/shared/aria-global2.cjs

@@ -1,75 +0,0 @@
-'use strict';
-
-const keyCodes = require('./key-codes2.cjs');
-const vividElement = require('./vivid-element.cjs');
-
-/**
- * Some states and properties are applicable to all host language elements regardless of whether a role is applied.
- * The following global states and properties are supported by all roles and by all base markup elements.
- * {@link https://www.w3.org/TR/wai-aria-1.1/#global_states}
- *
- * This is intended to be used as a mixin. Be sure you extend FASTElement.
- *
- * @public
- */
-class ARIAGlobalStatesAndProperties {
-}
-keyCodes.__decorate([
-    vividElement.attr({ attribute: "aria-atomic" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", void 0);
-keyCodes.__decorate([
-    vividElement.attr({ attribute: "aria-busy" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", void 0);
-keyCodes.__decorate([
-    vividElement.attr({ attribute: "aria-controls" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaControls", void 0);
-keyCodes.__decorate([
-    vividElement.attr({ attribute: "aria-current" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", void 0);
-keyCodes.__decorate([
-    vividElement.attr({ attribute: "aria-describedby" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", void 0);
-keyCodes.__decorate([
-    vividElement.attr({ attribute: "aria-details" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", void 0);
-keyCodes.__decorate([
-    vividElement.attr({ attribute: "aria-disabled" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", void 0);
-keyCodes.__decorate([
-    vividElement.attr({ attribute: "aria-errormessage" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", void 0);
-keyCodes.__decorate([
-    vividElement.attr({ attribute: "aria-flowto" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", void 0);
-keyCodes.__decorate([
-    vividElement.attr({ attribute: "aria-haspopup" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", void 0);
-keyCodes.__decorate([
-    vividElement.attr({ attribute: "aria-hidden" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", void 0);
-keyCodes.__decorate([
-    vividElement.attr({ attribute: "aria-invalid" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", void 0);
-keyCodes.__decorate([
-    vividElement.attr({ attribute: "aria-keyshortcuts" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", void 0);
-keyCodes.__decorate([
-    vividElement.attr({ attribute: "aria-label" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", void 0);
-keyCodes.__decorate([
-    vividElement.attr({ attribute: "aria-labelledby" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", void 0);
-keyCodes.__decorate([
-    vividElement.attr({ attribute: "aria-live" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaLive", void 0);
-keyCodes.__decorate([
-    vividElement.attr({ attribute: "aria-owns" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", void 0);
-keyCodes.__decorate([
-    vividElement.attr({ attribute: "aria-relevant" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", void 0);
-keyCodes.__decorate([
-    vividElement.attr({ attribute: "aria-roledescription" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", void 0);
-
-exports.ARIAGlobalStatesAndProperties = ARIAGlobalStatesAndProperties;

package/shared/aria-global2.js

@@ -1,73 +0,0 @@
-import { _ as __decorate } from './key-codes2.js';
-import { a as attr } from './vivid-element.js';
-
-/**
- * Some states and properties are applicable to all host language elements regardless of whether a role is applied.
- * The following global states and properties are supported by all roles and by all base markup elements.
- * {@link https://www.w3.org/TR/wai-aria-1.1/#global_states}
- *
- * This is intended to be used as a mixin. Be sure you extend FASTElement.
- *
- * @public
- */
-class ARIAGlobalStatesAndProperties {
-}
-__decorate([
-    attr({ attribute: "aria-atomic" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", void 0);
-__decorate([
-    attr({ attribute: "aria-busy" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", void 0);
-__decorate([
-    attr({ attribute: "aria-controls" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaControls", void 0);
-__decorate([
-    attr({ attribute: "aria-current" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", void 0);
-__decorate([
-    attr({ attribute: "aria-describedby" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", void 0);
-__decorate([
-    attr({ attribute: "aria-details" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", void 0);
-__decorate([
-    attr({ attribute: "aria-disabled" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", void 0);
-__decorate([
-    attr({ attribute: "aria-errormessage" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", void 0);
-__decorate([
-    attr({ attribute: "aria-flowto" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", void 0);
-__decorate([
-    attr({ attribute: "aria-haspopup" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", void 0);
-__decorate([
-    attr({ attribute: "aria-hidden" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", void 0);
-__decorate([
-    attr({ attribute: "aria-invalid" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", void 0);
-__decorate([
-    attr({ attribute: "aria-keyshortcuts" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", void 0);
-__decorate([
-    attr({ attribute: "aria-label" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", void 0);
-__decorate([
-    attr({ attribute: "aria-labelledby" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", void 0);
-__decorate([
-    attr({ attribute: "aria-live" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaLive", void 0);
-__decorate([
-    attr({ attribute: "aria-owns" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", void 0);
-__decorate([
-    attr({ attribute: "aria-relevant" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", void 0);
-__decorate([
-    attr({ attribute: "aria-roledescription" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", void 0);
-
-export { ARIAGlobalStatesAndProperties as A };