@vonage/vivid 4.12.1 → 4.14.0

package/shared/definition49.cjs

@@ -1,167 +1,25 @@
 'use strict';
 
-const index = require('./index.cjs');
-const definition = require('./definition27.cjs');
-const formAssociated = require('./form-associated.cjs');
-const keyCodes = require('./key-codes2.cjs');
-const when = require('./when.cjs');
-const classNames = require('./class-names.cjs');
+const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 
-class _Switch extends index.FoundationElement {
+class TabPanel extends vividElement.VividElement {
 }
-/**
- * A form-associated base class for the {@link @microsoft/fast-foundation#(Switch:class)} component.
- *
- * @internal
- */
-class FormAssociatedSwitch extends formAssociated.CheckableFormAssociated(_Switch) {
-    constructor() {
-        super(...arguments);
-        this.proxy = document.createElement("input");
-    }
-}
-
-/**
- * A Switch Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#switch | ARIA switch }.
- *
- * @slot - The deafult slot for the label
- * @slot checked-message - The message when in a checked state
- * @slot unchecked-message - The message when in an unchecked state
- * @csspart label - The label
- * @csspart switch - The element representing the switch, which wraps the indicator
- * @csspart status-message - The wrapper for the status messages
- * @csspart checked-message - The checked message
- * @csspart unchecked-message - The unchecked message
- * @fires change - Emits a custom change event when the checked state changes
- *
- * @public
- */
-let Switch$1 = class Switch extends FormAssociatedSwitch {
-    constructor() {
-        super();
-        /**
-         * The element's value to be included in form submission when checked.
-         * Default to "on" to reach parity with input[type="checkbox"]
-         *
-         * @internal
-         */
-        this.initialValue = "on";
-        /**
-         * @internal
-         */
-        this.keypressHandler = (e) => {
-            if (this.readOnly) {
-                return;
-            }
-            switch (e.key) {
-                case keyCodes.keyEnter:
-                case keyCodes.keySpace:
-                    this.checked = !this.checked;
-                    break;
-            }
-        };
-        /**
-         * @internal
-         */
-        this.clickHandler = (e) => {
-            if (!this.disabled && !this.readOnly) {
-                this.checked = !this.checked;
-            }
-        };
-        this.proxy.setAttribute("type", "checkbox");
-    }
-    readOnlyChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.readOnly = this.readOnly;
-        }
-        this.readOnly
-            ? this.classList.add("readonly")
-            : this.classList.remove("readonly");
-    }
-    /**
-     * @internal
-     */
-    checkedChanged(prev, next) {
-        super.checkedChanged(prev, next);
-        /**
-         * @deprecated - this behavior already exists in the template and should not exist in the class.
-         */
-        this.checked ? this.classList.add("checked") : this.classList.remove("checked");
-    }
-};
-index.__decorate([
-    index.attr({ attribute: "readonly", mode: "boolean" })
-], Switch$1.prototype, "readOnly", void 0);
-index.__decorate([
-    index.observable
-], Switch$1.prototype, "defaultSlottedNodes", void 0);
-
-const styles = ":host(.disabled){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary-text: var(--vvd-switch-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-increment: var(--vvd-switch-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-switch-cta-firm, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-switch-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-fierce: var(--vvd-switch-cta-fierce, var(--vvd-color-cta-700))}.control.connotation-alert{--_connotation-color-primary-text: var(--vvd-switch-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-increment: var(--vvd-switch-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-firm: var(--vvd-switch-alert-firm, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-switch-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-fierce: var(--vvd-switch-alert-fierce, var(--vvd-color-alert-700))}.control.connotation-success{--_connotation-color-primary-text: var(--vvd-switch-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-increment: var(--vvd-switch-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-firm: var(--vvd-switch-success-firm, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-switch-success-intermediate, var(--vvd-color-success-500));--_connotation-color-fierce: var(--vvd-switch-success-fierce, var(--vvd-color-success-700))}.control.connotation-announcement{--_connotation-color-primary-text: var(--vvd-switch-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-increment: var(--vvd-switch-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-firm: var(--vvd-switch-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-intermediate: var(--vvd-switch-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-fierce: var(--vvd-switch-announcement-fierce, var(--vvd-color-announcement-700))}.control:not(.connotation-cta,.connotation-alert,.connotation-success,.connotation-announcement){--_connotation-color-primary-text: var(--vvd-switch-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-increment: var(--vvd-switch-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-switch-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-switch-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-fierce: var(--vvd-switch-accent-fierce, var(--vvd-color-neutral-700))}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.control.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control: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)}.control:where(.disabled,:disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control:where(.readonly):where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-800);--_appearance-color-fill: var(--vvd-color-neutral-500);--_appearance-color-outline: transparent}.control{display:inline-flex;border-radius:16px;gap:8px;--focus-inset: -4px;--focus-stroke-gap-color: transparent}.control:focus-visible{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))}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.switch{--_switch-inline-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*1.8) ;display:flex;box-sizing:border-box;align-items:center;border-radius:40px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:var(--_switch-inline-size);transition:all .2s ease-in-out 0s}.checked-indicator{--_switch-checked-indicator-size: calc( calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 1.6667);--_switch-gutter: calc(var(--_switch-checked-indicator-size) / 3);border-radius:inherit;block-size:var(--_switch-checked-indicator-size);inline-size:var(--_switch-checked-indicator-size);margin-inline-start:auto;transition:all .2s ease-in-out 0s}.control:not(.appearance-filled) .checked-indicator{background-color:var(--_appearance-color-outline)}.control:not(.appearance-filled):where(.readonly) .checked-indicator{background-color:var(--vvd-color-neutral-600)}.control.appearance-filled .checked-indicator{background-color:var(--vvd-color-neutral-100)}.control:not(.checked) .checked-indicator{transform:translate(calc(-1 * var(--_switch-inline-size) + var(--_switch-checked-indicator-size) + var(--_switch-gutter)))}.control.checked .checked-indicator{transform:translate(calc(-1 * var(--_switch-gutter)))}.control.appearance-filled.disabled .checked-indicator{background-color:var(--_appearance-color-text)}.control.appearance-filled.readonly .checked-indicator{background-color:var(--vvd-color-neutral-50)}.label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}";
 
-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;
-};
-class Switch extends Switch$1 {
-}
-__decorateClass([
-  index.attr
-], Switch.prototype, "label");
-__decorateClass([
-  index.attr
-], Switch.prototype, "connotation");
-
-const getClasses = (_) => classNames.classNames(
-  "control",
-  ["appearance-filled", _.checked],
-  ["checked", _.checked],
-  ["disabled", _.disabled],
-  ["readonly", _.readOnly],
-  [
-    `connotation-${_.connotation}`,
-    Boolean(_.checked) && Boolean(_.connotation)
-  ]
+const TabPanelTemplate = defineVividComponent.html`
+	<template slot="tabpanel" role="tabpanel">
+		<slot></slot>
+	</template>
+`;
+
+const tabPanelDefinition = defineVividComponent.defineVividComponent(
+  "tab-panel",
+  TabPanel,
+  TabPanelTemplate,
+  [],
+  {}
 );
-const SwitchTemplate = () => {
-  return index.html`
-		<div
-			class="${getClasses}"
-			role="switch"
-			aria-checked="${(x) => x.checked}"
-			aria-disabled="${(x) => x.disabled}"
-			aria-readonly="${(x) => x.readOnly}"
-			tabindex="${(x) => x.disabled ? null : 0}"
-			@keypress="${(x, c) => x.keypressHandler(c.event)}"
-			@click="${(x, c) => x.clickHandler(c.event)}"
-		>
-			<div class="switch">
-				<span class="checked-indicator"></span>
-			</div>
-			${when.when(
-    (x) => x.label,
-    index.html`<div class="label">${(x) => x.label}</div>`
-  )}
-		</div>
-	`;
-};
-
-const switchDefinition = Switch.compose({
-  baseName: "switch",
-  template: SwitchTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
-  }
-});
-const switchRegistries = [switchDefinition(), ...definition.iconRegistries];
-const registerSwitch = index.registerFactory(switchRegistries);
+const registerTabPanel = defineVividComponent.createRegisterFunction(tabPanelDefinition);
 
-exports.registerSwitch = registerSwitch;
-exports.switchDefinition = switchDefinition;
-exports.switchRegistries = switchRegistries;
+exports.registerTabPanel = registerTabPanel;
+exports.tabPanelDefinition = tabPanelDefinition;

package/shared/definition49.js

@@ -1,163 +1,22 @@
-import { F as FoundationElement, _ as __decorate, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition27.js';
-import { C as CheckableFormAssociated } from './form-associated.js';
-import { a as keySpace, k as keyEnter } from './key-codes2.js';
-import { w as when } from './when.js';
-import { c as classNames } from './class-names.js';
+import { h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { V as VividElement } from './vivid-element.js';
 
-class _Switch extends FoundationElement {
+class TabPanel extends VividElement {
 }
-/**
- * A form-associated base class for the {@link @microsoft/fast-foundation#(Switch:class)} component.
- *
- * @internal
- */
-class FormAssociatedSwitch extends CheckableFormAssociated(_Switch) {
-    constructor() {
-        super(...arguments);
-        this.proxy = document.createElement("input");
-    }
-}
-
-/**
- * A Switch Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#switch | ARIA switch }.
- *
- * @slot - The deafult slot for the label
- * @slot checked-message - The message when in a checked state
- * @slot unchecked-message - The message when in an unchecked state
- * @csspart label - The label
- * @csspart switch - The element representing the switch, which wraps the indicator
- * @csspart status-message - The wrapper for the status messages
- * @csspart checked-message - The checked message
- * @csspart unchecked-message - The unchecked message
- * @fires change - Emits a custom change event when the checked state changes
- *
- * @public
- */
-let Switch$1 = class Switch extends FormAssociatedSwitch {
-    constructor() {
-        super();
-        /**
-         * The element's value to be included in form submission when checked.
-         * Default to "on" to reach parity with input[type="checkbox"]
-         *
-         * @internal
-         */
-        this.initialValue = "on";
-        /**
-         * @internal
-         */
-        this.keypressHandler = (e) => {
-            if (this.readOnly) {
-                return;
-            }
-            switch (e.key) {
-                case keyEnter:
-                case keySpace:
-                    this.checked = !this.checked;
-                    break;
-            }
-        };
-        /**
-         * @internal
-         */
-        this.clickHandler = (e) => {
-            if (!this.disabled && !this.readOnly) {
-                this.checked = !this.checked;
-            }
-        };
-        this.proxy.setAttribute("type", "checkbox");
-    }
-    readOnlyChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.readOnly = this.readOnly;
-        }
-        this.readOnly
-            ? this.classList.add("readonly")
-            : this.classList.remove("readonly");
-    }
-    /**
-     * @internal
-     */
-    checkedChanged(prev, next) {
-        super.checkedChanged(prev, next);
-        /**
-         * @deprecated - this behavior already exists in the template and should not exist in the class.
-         */
-        this.checked ? this.classList.add("checked") : this.classList.remove("checked");
-    }
-};
-__decorate([
-    attr({ attribute: "readonly", mode: "boolean" })
-], Switch$1.prototype, "readOnly", void 0);
-__decorate([
-    observable
-], Switch$1.prototype, "defaultSlottedNodes", void 0);
 
-const styles = ":host(.disabled){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary-text: var(--vvd-switch-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-increment: var(--vvd-switch-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-switch-cta-firm, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-switch-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-fierce: var(--vvd-switch-cta-fierce, var(--vvd-color-cta-700))}.control.connotation-alert{--_connotation-color-primary-text: var(--vvd-switch-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-increment: var(--vvd-switch-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-firm: var(--vvd-switch-alert-firm, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-switch-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-fierce: var(--vvd-switch-alert-fierce, var(--vvd-color-alert-700))}.control.connotation-success{--_connotation-color-primary-text: var(--vvd-switch-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-increment: var(--vvd-switch-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-firm: var(--vvd-switch-success-firm, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-switch-success-intermediate, var(--vvd-color-success-500));--_connotation-color-fierce: var(--vvd-switch-success-fierce, var(--vvd-color-success-700))}.control.connotation-announcement{--_connotation-color-primary-text: var(--vvd-switch-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-increment: var(--vvd-switch-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-firm: var(--vvd-switch-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-intermediate: var(--vvd-switch-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-fierce: var(--vvd-switch-announcement-fierce, var(--vvd-color-announcement-700))}.control:not(.connotation-cta,.connotation-alert,.connotation-success,.connotation-announcement){--_connotation-color-primary-text: var(--vvd-switch-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-increment: var(--vvd-switch-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-switch-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-switch-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-fierce: var(--vvd-switch-accent-fierce, var(--vvd-color-neutral-700))}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.control.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control: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)}.control:where(.disabled,:disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control:where(.readonly):where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-800);--_appearance-color-fill: var(--vvd-color-neutral-500);--_appearance-color-outline: transparent}.control{display:inline-flex;border-radius:16px;gap:8px;--focus-inset: -4px;--focus-stroke-gap-color: transparent}.control:focus-visible{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))}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.switch{--_switch-inline-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*1.8) ;display:flex;box-sizing:border-box;align-items:center;border-radius:40px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:var(--_switch-inline-size);transition:all .2s ease-in-out 0s}.checked-indicator{--_switch-checked-indicator-size: calc( calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 1.6667);--_switch-gutter: calc(var(--_switch-checked-indicator-size) / 3);border-radius:inherit;block-size:var(--_switch-checked-indicator-size);inline-size:var(--_switch-checked-indicator-size);margin-inline-start:auto;transition:all .2s ease-in-out 0s}.control:not(.appearance-filled) .checked-indicator{background-color:var(--_appearance-color-outline)}.control:not(.appearance-filled):where(.readonly) .checked-indicator{background-color:var(--vvd-color-neutral-600)}.control.appearance-filled .checked-indicator{background-color:var(--vvd-color-neutral-100)}.control:not(.checked) .checked-indicator{transform:translate(calc(-1 * var(--_switch-inline-size) + var(--_switch-checked-indicator-size) + var(--_switch-gutter)))}.control.checked .checked-indicator{transform:translate(calc(-1 * var(--_switch-gutter)))}.control.appearance-filled.disabled .checked-indicator{background-color:var(--_appearance-color-text)}.control.appearance-filled.readonly .checked-indicator{background-color:var(--vvd-color-neutral-50)}.label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}";
+const TabPanelTemplate = html`
+	<template slot="tabpanel" role="tabpanel">
+		<slot></slot>
+	</template>
+`;
 
-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;
-};
-class Switch extends Switch$1 {
-}
-__decorateClass([
-  attr
-], Switch.prototype, "label");
-__decorateClass([
-  attr
-], Switch.prototype, "connotation");
-
-const getClasses = (_) => classNames(
-  "control",
-  ["appearance-filled", _.checked],
-  ["checked", _.checked],
-  ["disabled", _.disabled],
-  ["readonly", _.readOnly],
-  [
-    `connotation-${_.connotation}`,
-    Boolean(_.checked) && Boolean(_.connotation)
-  ]
+const tabPanelDefinition = defineVividComponent(
+  "tab-panel",
+  TabPanel,
+  TabPanelTemplate,
+  [],
+  {}
 );
-const SwitchTemplate = () => {
-  return html`
-		<div
-			class="${getClasses}"
-			role="switch"
-			aria-checked="${(x) => x.checked}"
-			aria-disabled="${(x) => x.disabled}"
-			aria-readonly="${(x) => x.readOnly}"
-			tabindex="${(x) => x.disabled ? null : 0}"
-			@keypress="${(x, c) => x.keypressHandler(c.event)}"
-			@click="${(x, c) => x.clickHandler(c.event)}"
-		>
-			<div class="switch">
-				<span class="checked-indicator"></span>
-			</div>
-			${when(
-    (x) => x.label,
-    html`<div class="label">${(x) => x.label}</div>`
-  )}
-		</div>
-	`;
-};
-
-const switchDefinition = Switch.compose({
-  baseName: "switch",
-  template: SwitchTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
-  }
-});
-const switchRegistries = [switchDefinition(), ...iconRegistries];
-const registerSwitch = registerFactory(switchRegistries);
+const registerTabPanel = createRegisterFunction(tabPanelDefinition);
 
-export { switchRegistries as a, registerSwitch as r, switchDefinition as s };
+export { registerTabPanel as r, tabPanelDefinition as t };

package/shared/definition5.cjs

@@ -1,13 +1,13 @@
 'use strict';
 
-const index = require('./index.cjs');
 const definition$1 = require('./definition11.cjs');
-const definition$2 = require('./definition47.cjs');
-const definition$3 = require('./definition30.cjs');
+const definition$2 = require('./definition46.cjs');
+const definition = require('./definition29.cjs');
+const defineVividComponent = require('./defineVividComponent.cjs');
 const enums = require('./enums.cjs');
 const applyMixins = require('./apply-mixins.cjs');
+const vividElement = require('./vivid-element.cjs');
 const localized = require('./localized.cjs');
-const definition = require('./definition29.cjs');
 const playbackRates = require('./playbackRates.cjs');
 const when = require('./when.cjs');
 const repeat = require('./repeat.cjs');
@@ -46,7 +46,7 @@ const validSkipByConverter = {
     return Object.values(enums.MediaSkipBy).includes(value) ? value : void 0;
   }
 };
-class AudioPlayer extends index.FoundationElement {
+class AudioPlayer extends vividElement.VividElement {
   constructor() {
     super();
     this.playButtonAriaLabel = null;
@@ -74,7 +74,7 @@ class AudioPlayer extends index.FoundationElement {
     this.#currentTimeChanged = false;
     this.#updateProgress = () => {
       this.#currentTimeChanged = true;
-      index.Observable.notify(this, "currentTime");
+      defineVividComponent.Observable.notify(this, "currentTime");
       const percent = this.currentTime / this.duration * 100;
       this.#sliderEl.currentValue = percent.toString();
       if (percent === 100) {
@@ -82,7 +82,7 @@ class AudioPlayer extends index.FoundationElement {
       }
     };
     this.#updateTotalTime = () => {
-      index.Observable.notify(this, "duration");
+      defineVividComponent.Observable.notify(this, "duration");
     };
     this.#updateCurrentTimeOnSliderChange = () => {
       if (!this.paused && this.#sliderEl.isDragging) {
@@ -100,18 +100,18 @@ class AudioPlayer extends index.FoundationElement {
       this.#currentTimeChanged = false;
     };
     this.#setPausedState = () => {
-      index.Observable.notify(this, "paused");
+      defineVividComponent.Observable.notify(this, "paused");
     };
     this.#playerEl.addEventListener("timeupdate", this.#updateProgress);
     this.#playerEl.addEventListener("loadedmetadata", this.#updateTotalTime);
   }
   get playbackRate() {
-    index.Observable.track(this, "playbackRate");
+    defineVividComponent.Observable.track(this, "playbackRate");
     return this.#playerEl.playbackRate;
   }
   set playbackRate(value) {
     this.#playerEl.playbackRate = value;
-    index.Observable.notify(this, "playbackRate");
+    defineVividComponent.Observable.notify(this, "playbackRate");
   }
   srcChanged() {
     if (this.src === void 0) {
@@ -121,19 +121,19 @@ class AudioPlayer extends index.FoundationElement {
     }
   }
   get paused() {
-    index.Observable.track(this, "paused");
+    defineVividComponent.Observable.track(this, "paused");
     return this.#playerEl.paused;
   }
   set paused(_) {
   }
   get duration() {
-    index.Observable.track(this, "duration");
+    defineVividComponent.Observable.track(this, "duration");
     return this.#playerEl.duration;
   }
   set duration(_) {
   }
   get currentTime() {
-    index.Observable.track(this, "currentTime");
+    defineVividComponent.Observable.track(this, "currentTime");
     return this.#playerEl.currentTime;
   }
   set currentTime(value) {
@@ -174,40 +174,40 @@ class AudioPlayer extends index.FoundationElement {
   #setPausedState;
 }
 __decorateClass([
-  index.attr({ attribute: "play-button-aria-label" })
+  defineVividComponent.attr({ attribute: "play-button-aria-label" })
 ], AudioPlayer.prototype, "playButtonAriaLabel");
 __decorateClass([
-  index.attr({ attribute: "pause-button-aria-label" })
+  defineVividComponent.attr({ attribute: "pause-button-aria-label" })
 ], AudioPlayer.prototype, "pauseButtonAriaLabel");
 __decorateClass([
-  index.attr({ attribute: "slider-aria-label" })
+  defineVividComponent.attr({ attribute: "slider-aria-label" })
 ], AudioPlayer.prototype, "sliderAriaLabel");
 __decorateClass([
-  index.attr({ attribute: "skip-forward-aria-label" })
+  defineVividComponent.attr({ attribute: "skip-forward-aria-label" })
 ], AudioPlayer.prototype, "skipForwardButtonAriaLabel");
 __decorateClass([
-  index.attr({ attribute: "skip-backward-aria-label" })
+  defineVividComponent.attr({ attribute: "skip-backward-aria-label" })
 ], AudioPlayer.prototype, "skipBackwardButtonAriaLabel");
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], AudioPlayer.prototype, "connotation");
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], AudioPlayer.prototype, "src");
 __decorateClass([
-  index.attr({ mode: "boolean" })
+  defineVividComponent.attr({ mode: "boolean" })
 ], AudioPlayer.prototype, "disabled");
 __decorateClass([
-  index.attr({ mode: "boolean" })
+  defineVividComponent.attr({ mode: "boolean" })
 ], AudioPlayer.prototype, "notime");
 __decorateClass([
-  index.attr({
+  defineVividComponent.attr({
     attribute: "skip-by",
     converter: validSkipByConverter
   })
 ], AudioPlayer.prototype, "skipBy");
 __decorateClass([
-  index.attr({ attribute: "playback-rates" })
+  defineVividComponent.attr({ attribute: "playback-rates" })
 ], AudioPlayer.prototype, "playbackRates");
 applyMixins.applyMixins(AudioPlayer, localized.Localized);
 
@@ -238,8 +238,8 @@ const isMenuItemChekced = (playbackRate, { parent }) => {
   return playbackRate === parent.playbackRate;
 };
 function renderButton(context) {
-  const buttonTag = context.tagFor(definition$1.Button$1);
-  return index.html`<${buttonTag} class="pause" @click="${(x) => x.paused ? x.play() : x.pause()}"
+  const buttonTag = context.tagFor(definition$1.Button);
+  return defineVividComponent.html`<${buttonTag} class="pause" @click="${(x) => x.paused ? x.play() : x.pause()}"
 	icon="${(x) => x.paused ? "play-solid" : "pause-solid"}"
 	aria-label="${(x) => x.paused ? x.playButtonAriaLabel || x.locale.audioPlayer.playButtonLabel : x.pauseButtonAriaLabel || x.locale.audioPlayer.pauseButtonLabel}"
 	size='condensed'
@@ -248,8 +248,8 @@ function renderButton(context) {
   ></${buttonTag}>`;
 }
 function renderBackwardSkipButtons(context) {
-  const buttonTag = context.tagFor(definition$1.Button$1);
-  return index.html`
+  const buttonTag = context.tagFor(definition$1.Button);
+  return defineVividComponent.html`
 		<${buttonTag} class="skip backward"
 			@click="${(element) => skip(element, SKIP_DIRECTIONS.BACKWARD)}"
 		icon="${(x) => x.skipBy == enums.MediaSkipBy.Five ? "5-sec-backward-line" : x.skipBy == enums.MediaSkipBy.Thirty ? "30-sec-backward-line" : "10-sec-backward-line"}"
@@ -261,8 +261,8 @@ function renderBackwardSkipButtons(context) {
 	`;
 }
 function renderForwardSkipButtons(context) {
-  const buttonTag = context.tagFor(definition$1.Button$1);
-  return index.html`
+  const buttonTag = context.tagFor(definition$1.Button);
+  return defineVividComponent.html`
 		<${buttonTag} class="skip forward"
 		@click="${(element) => skip(element, SKIP_DIRECTIONS.FORWARD)}"
 		icon="${(x) => x.skipBy == enums.MediaSkipBy.Five ? "5-sec-forward-line" : x.skipBy == enums.MediaSkipBy.Thirty ? "30-sec-forward-line" : "10-sec-forward-line"}"
@@ -275,7 +275,7 @@ function renderForwardSkipButtons(context) {
 }
 function renderSlider(context) {
   const sliderTag = context.tagFor(definition$2.Slider);
-  return index.html`
+  return defineVividComponent.html`
 	<${sliderTag}
 		class="slider"
 		value="0"
@@ -287,7 +287,7 @@ function renderSlider(context) {
 	</${sliderTag}>`;
 }
 function renderTimestamp() {
-  return index.html` <div class="time-stamp">
+  return defineVividComponent.html` <div class="time-stamp">
 		<span class="current-time">${(x) => formatTime(x.currentTime)}</span>
 		<span>/</span>
 		<span class="total-time">${(x) => formatTime(x.duration)}</span>
@@ -299,9 +299,9 @@ function handlePlaybackRateClick(playbackRate, context) {
 }
 const AudioPlayerTemplate = (context) => {
   const menuTag = context.tagFor(definition.Menu);
-  const buttonTag = context.tagFor(definition$1.Button$1);
+  const buttonTag = context.tagFor(definition$1.Button);
   const menuItemTag = context.tagFor(definition.MenuItem);
-  return index.html` <div class="wrapper">
+  return defineVividComponent.html` <div class="wrapper">
 		<div class="base ${getClasses}">
 			<div class="controls">
 				${when.when(
@@ -318,7 +318,7 @@ const AudioPlayerTemplate = (context) => {
 			${renderSlider(context)}
 			${when.when(
     (x) => Boolean(x.playbackRates),
-    index.html`
+    defineVividComponent.html`
 			<${menuTag} class="playback-rates" trigger="auto" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
 				<${buttonTag} id="playback-open-button"
 							  class="playback-button"
@@ -332,7 +332,7 @@ const AudioPlayerTemplate = (context) => {
 
 				${repeat.repeat(
       (x) => playbackRates.getPlaybackRatesArray(x.playbackRates),
-      index.html`<${menuItemTag} @click="${handlePlaybackRateClick}"
+      defineVividComponent.html`<${menuItemTag} @click="${handlePlaybackRateClick}"
 																			 role="menuitemradio"
 																			 class="playback-rate"
 																			 text="${(x) => x}"
@@ -345,19 +345,18 @@ const AudioPlayerTemplate = (context) => {
 	</div>`;
 };
 
-const audioPlayerDefinition = AudioPlayer.compose({
-  baseName: "audio-player",
-  template: AudioPlayerTemplate,
-  styles
-});
-const audioPlayerRegistries = [
-  audioPlayerDefinition(),
-  ...definition$1.buttonRegistries,
-  ...definition$2.sliderRegistries,
-  ...definition$3.menuRegistries
-];
-const registerAudioPlayer = index.registerFactory(audioPlayerRegistries);
+const audioPlayerDefinition = defineVividComponent.defineVividComponent(
+  "audio-player",
+  AudioPlayer,
+  AudioPlayerTemplate,
+  [definition$1.buttonDefinition, definition$2.sliderDefinition, definition.menuDefinition, definition.menuItemDefinition],
+  {
+    styles
+  }
+);
+const registerAudioPlayer = defineVividComponent.createRegisterFunction(
+  audioPlayerDefinition
+);
 
 exports.audioPlayerDefinition = audioPlayerDefinition;
-exports.audioPlayerRegistries = audioPlayerRegistries;
 exports.registerAudioPlayer = registerAudioPlayer;