@vonage/vivid 5.15.0 → 5.16.0

package/switch/index.js

@@ -1,103 +1,58 @@
-import { i as s } from "../bundled/definition2.js";
-import { V as d, a as n, o as p, h as v, c as h, d as u } from "../bundled/vivid-element.js";
-import { D as m, d as f } from "../bundled/delegates-aria.js";
-import { C as _ } from "../bundled/form-associated.js";
-import { l as y, f as b } from "../bundled/key-codes.js";
-import { w } from "../bundled/when.js";
-import { c as x } from "../bundled/class-names.js";
-const k = ':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(--vvd-color-neutral-500)}.control.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media (hover: hover){.control: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(--vvd-color-neutral-700)}.control: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.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(--vvd-color-neutral-700)}.control.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: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:disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.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.disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.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.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;outline:none}@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;flex-shrink:0;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}.control:focus-visible .switch{position:relative}.control:focus-visible .switch:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);--focus-stroke-gap-color: transparent;--focus-block-size-addition: 6px}.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 g = Object.defineProperty, c = (o, r, i, F) => {
-  for (var a = void 0, t = o.length - 1, l; t >= 0; t--)
-    (l = o[t]) && (a = l(r, i, a) || a);
-  return a && g(r, i, a), a;
+import { T as e, d as t, l as n, o as r, s as i, t as a } from "../bundled/vivid-element.js";
+import { t as o } from "../bundled/when.js";
+import { t as s } from "../bundled/definition2.js";
+import { t as c } from "../bundled/decorate.js";
+import { t as l } from "../bundled/class-names.js";
+import "../bundled/key-codes.js";
+import { n as u, t as d } from "../bundled/delegates-aria.js";
+import { t as f } from "../bundled/form-associated.js";
+//#region src/lib/switch/switch.scss?inline
+var p = ":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(--vvd-color-neutral-500)}.control.appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}@media (hover:hover){.control: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(--vvd-color-neutral-700)}.control: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.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(--vvd-color-neutral-700)}.control.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: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:disabled.appearance-filled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control.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.disabled.appearance-filled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control.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.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{border-radius:16px;outline:none;gap:8px;display:inline-flex}@supports (user-select:none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.switch{--_switch-inline-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * 1.8);box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:var(--_switch-inline-size);border-radius:40px;flex-shrink:0;align-items:center;transition:all .2s ease-in-out;display:flex}.control:focus-visible .switch{position:relative}.control:focus-visible .switch:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));--focus-stroke-gap-color:transparent;--focus-block-size-addition:6px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.checked-indicator{--_switch-checked-indicator-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) / 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}.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:translateX(calc(-1 * var(--_switch-inline-size) + var(--_switch-checked-indicator-size) + var(--_switch-gutter)))}.control.checked .checked-indicator{transform:translateX(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)}", m = class extends d(f(a)) {
+	readOnlyChanged() {
+		this.proxy instanceof HTMLInputElement && (this.proxy.readOnly = this.readOnly), this.readOnly ? this.classList.add("readonly") : this.classList.remove("readonly");
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.proxy.setAttribute("type", "checkbox"), this.updateForm();
+	}
+	constructor() {
+		super(), this.proxy = document.createElement("input"), this.initialValue = "on", this.keypressHandler = (e) => {
+			(e.key === " " || e.key === "Enter") && (this.checked = !this.checked);
+		}, this.clickHandler = () => {
+			!this.disabled && !this.readOnly && (this.checked = !this.checked);
+		}, this.checked = this.defaultChecked;
+	}
+	updateForm() {
+		let e = this.checked ? this.value : null;
+		this.setFormValue(e, e);
+	}
 };
-class e extends m(
-  _(d)
-) {
-  constructor() {
-    super(), this.proxy = document.createElement("input"), this.initialValue = "on", this.keypressHandler = (r) => {
-      (r.key === y || r.key === b) && (this.checked = !this.checked);
-    }, this.clickHandler = () => {
-      !this.disabled && !this.readOnly && (this.checked = !this.checked);
-    }, this.checked = this.defaultChecked;
-  }
-  // Map to proxy element
-  /**
-   * @internal
-   */
-  readOnlyChanged() {
-    /* v8 ignore if -- @preserve */
-    this.proxy instanceof HTMLInputElement && (this.proxy.readOnly = this.readOnly), this.readOnly ? this.classList.add("readonly") : this.classList.remove("readonly");
-  }
-  /**
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback(), this.proxy.setAttribute("type", "checkbox"), this.updateForm();
-  }
-  /**
-   * @internal
-   */
-  updateForm() {
-    const r = this.checked ? this.value : null;
-    this.setFormValue(r, r);
-  }
-}
-c([
-  n
-], e.prototype, "label");
-c([
-  n
-], e.prototype, "connotation");
-c([
-  n({ attribute: "readonly", mode: "boolean" })
-], e.prototype, "readOnly");
-c([
-  p
-], e.prototype, "defaultSlottedNodes");
-const z = (o) => x(
-  "control",
-  ["appearance-filled", o.checked],
-  ["checked", o.checked],
-  ["disabled", o.disabled],
-  ["readonly", o.readOnly],
-  [
-    `connotation-${o.connotation}`,
-    !!o.checked && !!o.connotation
-  ]
-), C = v`
+//#endregion
+//#region src/lib/switch/index.ts
+c([n], m.prototype, "label", void 0), c([n], m.prototype, "connotation", void 0), c([n({
+	attribute: "readonly",
+	mode: "boolean"
+})], m.prototype, "readOnly", void 0), c([e], m.prototype, "defaultSlottedNodes", void 0), i(r("switch", m, t`
 	<template>
 		<div
-			class="${z}"
-			${f({
-  role: "switch",
-  ariaChecked: (o) => o.checked,
-  ariaDisabled: (o) => o.disabled,
-  ariaReadOnly: (o) => o.readOnly
+			class="${(e) => l("control", ["appearance-filled", e.checked], ["checked", e.checked], ["disabled", e.disabled], ["readonly", e.readOnly], [`connotation-${e.connotation}`, !!e.checked && !!e.connotation])}"
+			${u({
+	role: "switch",
+	ariaChecked: (e) => e.checked,
+	ariaDisabled: (e) => e.disabled,
+	ariaReadOnly: (e) => e.readOnly
 })}
-			tabindex="${(o) => o.disabled ? null : 0}"
-			@keypress="${(o, r) => o.keypressHandler(r.event)}"
-			@click="${(o) => o.clickHandler()}"
+			tabindex="${(e) => e.disabled ? null : 0}"
+			@keypress="${(e, t) => e.keypressHandler(t.event)}"
+			@click="${(e) => e.clickHandler()}"
 		>
 			<div class="switch">
 				<span class="checked-indicator"></span>
 			</div>
-			${w(
-  (o) => o.label,
-  v`<div class="label">${(o) => o.label}</div>`
-)}
+			${o((e) => e.label, t`<div class="label">${(e) => e.label}</div>`)}
 		</div>
 	</template>
-`, O = u(
-  "switch",
-  e,
-  C,
-  [s],
-  {
-    styles: k,
-    shadowOptions: {
-      delegatesFocus: !0
-    }
-  }
-), $ = h(O);
-$();
+`, [s], {
+	styles: p,
+	shadowOptions: { delegatesFocus: !0 }
+}))();
+//#endregion

package/tab/definition.cjs

@@ -1,127 +1,6 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const icon_definition = require('../icon/definition.cjs');
-const vividElement = require('../unbundled/vivid-element.cjs');
-const fastElement = require('@microsoft/fast-element');
-const affix = require('../unbundled/affix.cjs');
-const hostSemantics = require('../unbundled/host-semantics.cjs');
-const localized = require('../unbundled/localized.cjs');
-const fastWebUtilities = require('@microsoft/fast-web-utilities');
-
-const styles = ":host{--_vvd-tab-accent-firm-wrapper: var( --vvd-tab-accent-firm );--_vvd-tab-cta-firm-wrapper: var( --vvd-tab-cta-firm )}.base{--vvd-tab-accent-firm: var( --_vvd-tab-accent-firm-wrapper, var(--vvd-tab-accent-primary) );--vvd-tab-cta-firm: var( --_vvd-tab-cta-firm-wrapper, var(--vvd-tab-cta-primary) )}:host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}:host([removable]){position:relative}:host(:focus-visible){outline:none}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary-text: var(--vvd-tab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tab-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce: var(--vvd-tab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-tab-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-tab-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-primary-text: var(--vvd-tab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tab-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-tab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-tab-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-tab-accent-soft, var(--vvd-color-neutral-100))}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;justify-content:var(--_tab-justify-content);padding:var(--_tabs-tablist-gutter);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);gap:var(--_tabs-tablist-gutter);min-block-size:40px;vertical-align:middle;white-space:nowrap}@supports (user-select: none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base.removable{padding-inline-end:40px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host(.vertical) .base{margin-inline-start:var(--_tabs-active-indicator-stroke-width)}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1;margin-inline-start:auto}.close{position:absolute;display:flex;align-items:center;justify-content:center;border:none;border-radius:4px;background:transparent;block-size:24px;inline-size:24px;inset-block-start:50%;inset-inline-end:4px;transform:translateY(-50%)}.close:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.close vwc-icon{font-size:12px}.close .icon{display:flex;align-items:center;justify-content:center}";
-
-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 Tab extends hostSemantics.HostSemantics(
-  affix.AffixIconWithTrailing(localized.Localized(vividElement.VividElement))
-) {
-  constructor() {
-    super(...arguments);
-    this.removable = false;
-    this.tabIndex = "-1";
-    this.active = false;
-  }
-  _handleCloseClick(e) {
-    e.stopImmediatePropagation();
-    this.$emit("close");
-  }
-  _onKeyDown(e) {
-    if (!this.removable || e.key !== "Delete") return true;
-    e.stopImmediatePropagation();
-    this.$emit("close");
-    return false;
-  }
-}
-__decorateClass([
-  fastElement.attr({ mode: "boolean" })
-], Tab.prototype, "disabled");
-__decorateClass([
-  fastElement.attr
-], Tab.prototype, "connotation");
-__decorateClass([
-  fastElement.attr
-], Tab.prototype, "shape");
-__decorateClass([
-  fastElement.attr
-], Tab.prototype, "label");
-__decorateClass([
-  fastElement.attr({ mode: "boolean" })
-], Tab.prototype, "removable");
-__decorateClass([
-  fastElement.attr({ mode: "fromView" })
-], Tab.prototype, "tabIndex");
-__decorateClass([
-  fastElement.observable
-], Tab.prototype, "active");
-
-const getClasses = ({
-  connotation,
-  disabled,
-  active,
-  iconTrailing,
-  shape,
-  removable
-}) => fastWebUtilities.classNames(
-  "base",
-  [`connotation-${connotation}`, Boolean(connotation) && Boolean(active)],
-  [`shape-${shape}`, Boolean(shape)],
-  ["disabled", Boolean(disabled)],
-  ["selected", Boolean(active)],
-  ["icon-trailing", iconTrailing],
-  ["removable", removable]
-);
-function renderDismissButton(context) {
-  const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return fastElement.html`<button
-		aria-label="${(x) => x.locale.tab.dismissButtonLabel}"
-		class="close"
-		id="close-btn"
-		@click="${(x, c) => x._handleCloseClick(c.event)}"
-	>
-		${() => affixIconTemplate("close-line", affix.IconWrapper.Span)}
-	</button>`;
-}
-const TabTemplate = (context) => {
-  const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return fastElement.html`
-		<template
-			slot="tab"
-			?active="${(x) => x.active}"
-			${hostSemantics.applyHostSemantics({
-    role: "tab",
-    ariaDisabled: (x) => x.disabled,
-    ariaSelected: (x) => x.active
-  })}
-			@keydown="${(x, c) => x._onKeyDown(c.event)}"
-		>
-			<div class="${getClasses}">
-				${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)} ${(x) => x.label}
-				${(x) => x.removable ? renderDismissButton(context) : null}
-			</div>
-		</template>
-	`;
-};
-
-const tabDefinition = vividElement.defineVividComponent(
-  "tab",
-  Tab,
-  TabTemplate,
-  [icon_definition.iconDefinition],
-  {
-    styles
-  }
-);
-const registerTab = vividElement.createRegisterFunction(tabDefinition);
-
-exports.VwcTabElement = Tab;
-exports.registerTab = registerTab;
-exports.tabDefinition = tabDefinition;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../unbundled/definition2.cjs");
+const require_definition$1 = require("../unbundled/definition67.cjs");
+exports.VwcTabElement = require_definition$1.Tab;
+exports.registerTab = require_definition$1.registerTab;
+exports.tabDefinition = require_definition$1.tabDefinition;

package/tab/definition.js

@@ -1,121 +1,3 @@
-import { iconDefinition } from '../icon/definition.js';
-import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { attr, observable, html } from '@microsoft/fast-element';
-import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
-import { H as HostSemantics, a as applyHostSemantics } from '../unbundled/host-semantics.js';
-import { L as Localized } from '../unbundled/localized.js';
-import { classNames } from '@microsoft/fast-web-utilities';
-
-const styles = ":host{--_vvd-tab-accent-firm-wrapper: var( --vvd-tab-accent-firm );--_vvd-tab-cta-firm-wrapper: var( --vvd-tab-cta-firm )}.base{--vvd-tab-accent-firm: var( --_vvd-tab-accent-firm-wrapper, var(--vvd-tab-accent-primary) );--vvd-tab-cta-firm: var( --_vvd-tab-cta-firm-wrapper, var(--vvd-tab-cta-primary) )}:host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}:host([removable]){position:relative}:host(:focus-visible){outline:none}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary-text: var(--vvd-tab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tab-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce: var(--vvd-tab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-tab-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-tab-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-primary-text: var(--vvd-tab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tab-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-tab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-tab-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-tab-accent-soft, var(--vvd-color-neutral-100))}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;justify-content:var(--_tab-justify-content);padding:var(--_tabs-tablist-gutter);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);gap:var(--_tabs-tablist-gutter);min-block-size:40px;vertical-align:middle;white-space:nowrap}@supports (user-select: none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base.removable{padding-inline-end:40px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host(.vertical) .base{margin-inline-start:var(--_tabs-active-indicator-stroke-width)}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1;margin-inline-start:auto}.close{position:absolute;display:flex;align-items:center;justify-content:center;border:none;border-radius:4px;background:transparent;block-size:24px;inline-size:24px;inset-block-start:50%;inset-inline-end:4px;transform:translateY(-50%)}.close:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.close vwc-icon{font-size:12px}.close .icon{display:flex;align-items:center;justify-content:center}";
-
-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 Tab extends HostSemantics(
-  AffixIconWithTrailing(Localized(VividElement))
-) {
-  constructor() {
-    super(...arguments);
-    this.removable = false;
-    this.tabIndex = "-1";
-    this.active = false;
-  }
-  _handleCloseClick(e) {
-    e.stopImmediatePropagation();
-    this.$emit("close");
-  }
-  _onKeyDown(e) {
-    if (!this.removable || e.key !== "Delete") return true;
-    e.stopImmediatePropagation();
-    this.$emit("close");
-    return false;
-  }
-}
-__decorateClass([
-  attr({ mode: "boolean" })
-], Tab.prototype, "disabled");
-__decorateClass([
-  attr
-], Tab.prototype, "connotation");
-__decorateClass([
-  attr
-], Tab.prototype, "shape");
-__decorateClass([
-  attr
-], Tab.prototype, "label");
-__decorateClass([
-  attr({ mode: "boolean" })
-], Tab.prototype, "removable");
-__decorateClass([
-  attr({ mode: "fromView" })
-], Tab.prototype, "tabIndex");
-__decorateClass([
-  observable
-], Tab.prototype, "active");
-
-const getClasses = ({
-  connotation,
-  disabled,
-  active,
-  iconTrailing,
-  shape,
-  removable
-}) => classNames(
-  "base",
-  [`connotation-${connotation}`, Boolean(connotation) && Boolean(active)],
-  [`shape-${shape}`, Boolean(shape)],
-  ["disabled", Boolean(disabled)],
-  ["selected", Boolean(active)],
-  ["icon-trailing", iconTrailing],
-  ["removable", removable]
-);
-function renderDismissButton(context) {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  return html`<button
-		aria-label="${(x) => x.locale.tab.dismissButtonLabel}"
-		class="close"
-		id="close-btn"
-		@click="${(x, c) => x._handleCloseClick(c.event)}"
-	>
-		${() => affixIconTemplate("close-line", IconWrapper.Span)}
-	</button>`;
-}
-const TabTemplate = (context) => {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  return html`
-		<template
-			slot="tab"
-			?active="${(x) => x.active}"
-			${applyHostSemantics({
-    role: "tab",
-    ariaDisabled: (x) => x.disabled,
-    ariaSelected: (x) => x.active
-  })}
-			@keydown="${(x, c) => x._onKeyDown(c.event)}"
-		>
-			<div class="${getClasses}">
-				${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)} ${(x) => x.label}
-				${(x) => x.removable ? renderDismissButton(context) : null}
-			</div>
-		</template>
-	`;
-};
-
-const tabDefinition = defineVividComponent(
-  "tab",
-  Tab,
-  TabTemplate,
-  [iconDefinition],
-  {
-    styles
-  }
-);
-const registerTab = createRegisterFunction(tabDefinition);
-
+import "../unbundled/definition2.js";
+import { n as tabDefinition, r as Tab, t as registerTab } from "../unbundled/definition67.js";
 export { Tab as VwcTabElement, registerTab, tabDefinition };

package/tab/index.cjs

@@ -1 +1 @@
-"use strict";const e=require("../bundled/definition20.cjs");e.registerTab();
+require(`../bundled/vivid-element.cjs`),require(`../bundled/definition2.cjs`),require(`../bundled/definition21.cjs`).t();

package/tab/index.js

@@ -1,2 +1,6 @@
-import { r } from "../bundled/definition20.js";
-r();
+import "../bundled/vivid-element.js";
+import "../bundled/definition2.js";
+import { t as e } from "../bundled/definition21.js";
+//#region src/lib/tab/index.ts
+e();
+//#endregion

package/tab-panel/definition.cjs

@@ -1,29 +1,5 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const vividElement = require('../unbundled/vivid-element.cjs');
-const hostSemantics = require('../unbundled/host-semantics.cjs');
-const fastElement = require('@microsoft/fast-element');
-
-class TabPanel extends hostSemantics.HostSemantics(vividElement.VividElement) {
-}
-
-const TabPanelTemplate = fastElement.html`
-	<template slot="tabpanel" ${hostSemantics.applyHostSemantics({ role: "tabpanel" })}>
-		<slot></slot>
-	</template>
-`;
-
-const tabPanelDefinition = vividElement.defineVividComponent(
-  "tab-panel",
-  TabPanel,
-  TabPanelTemplate,
-  [],
-  {}
-);
-const registerTabPanel = vividElement.createRegisterFunction(tabPanelDefinition);
-
-exports.VwcTabPanelElement = TabPanel;
-exports.registerTabPanel = registerTabPanel;
-exports.tabPanelDefinition = tabPanelDefinition;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_definition = require("../unbundled/definition66.cjs");
+exports.VwcTabPanelElement = require_definition.TabPanel;
+exports.registerTabPanel = require_definition.registerTabPanel;
+exports.tabPanelDefinition = require_definition.tabPanelDefinition;

package/tab-panel/definition.js

@@ -1,23 +1,2 @@
-import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { H as HostSemantics, a as applyHostSemantics } from '../unbundled/host-semantics.js';
-import { html } from '@microsoft/fast-element';
-
-class TabPanel extends HostSemantics(VividElement) {
-}
-
-const TabPanelTemplate = html`
-	<template slot="tabpanel" ${applyHostSemantics({ role: "tabpanel" })}>
-		<slot></slot>
-	</template>
-`;
-
-const tabPanelDefinition = defineVividComponent(
-  "tab-panel",
-  TabPanel,
-  TabPanelTemplate,
-  [],
-  {}
-);
-const registerTabPanel = createRegisterFunction(tabPanelDefinition);
-
+import { n as tabPanelDefinition, r as TabPanel, t as registerTabPanel } from "../unbundled/definition66.js";
 export { TabPanel as VwcTabPanelElement, registerTabPanel, tabPanelDefinition };

package/tab-panel/index.cjs

@@ -1 +1 @@
-"use strict";const e=require("../bundled/definition21.cjs");e.registerTabPanel();
+require(`../bundled/vivid-element.cjs`),require(`../bundled/definition20.cjs`).t();

package/tab-panel/index.js

@@ -1,2 +1,5 @@
-import { r } from "../bundled/definition21.js";
-r();
+import "../bundled/vivid-element.js";
+import { t as e } from "../bundled/definition20.js";
+//#region src/lib/tab-panel/index.ts
+e();
+//#endregion