@vonage/vivid 4.14.1 → 4.14.2

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