@vonage/vivid 4.31.0 → 5.1.0

package/{shared/definition52.cjs → tab-panel/definition.cjs}

@@ -1,12 +1,15 @@
 'use strict';
 
-const vividElement = require('./vivid-element.cjs');
-const hostSemantics = require('./host-semantics.cjs');
+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 = vividElement.html`
+const TabPanelTemplate = fastElement.html`
 	<template slot="tabpanel" ${hostSemantics.applyHostSemantics({ role: "tabpanel" })}>
 		<slot></slot>
 	</template>
@@ -21,6 +24,6 @@ const tabPanelDefinition = vividElement.defineVividComponent(
 );
 const registerTabPanel = vividElement.createRegisterFunction(tabPanelDefinition);
 
-exports.TabPanel = TabPanel;
+exports.VwcTabPanelElement = TabPanel;
 exports.registerTabPanel = registerTabPanel;
 exports.tabPanelDefinition = tabPanelDefinition;

package/{shared/definition52.js → tab-panel/definition.js}

@@ -1,5 +1,6 @@
-import { V as VividElement, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { H as HostSemantics, a as applyHostSemantics } from './host-semantics.js';
+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) {
 }
@@ -19,4 +20,4 @@ const tabPanelDefinition = defineVividComponent(
 );
 const registerTabPanel = createRegisterFunction(tabPanelDefinition);
 
-export { TabPanel as T, registerTabPanel as r, tabPanelDefinition as t };
+export { TabPanel as VwcTabPanelElement, registerTabPanel, tabPanelDefinition };

package/tab-panel/index.cjs

@@ -1,5 +1 @@
-'use strict';
-
-const definition = require('../shared/definition52.cjs');
-
-definition.registerTabPanel();
+"use strict";const e=require("../bundled/definition21.cjs");e.registerTabPanel();

package/tab-panel/index.js

@@ -1,3 +1,2 @@
-import { r as registerTabPanel } from '../shared/definition52.js';
-
-registerTabPanel();
+import { r } from "../bundled/definition21.js";
+r();

package/{shared/definition54.cjs → tabs/definition.cjs}

@@ -1,14 +1,13 @@
 'use strict';
 
-const definition = require('./definition53.cjs');
-const definition$1 = require('./definition52.cjs');
-const vividElement = require('./vivid-element.cjs');
-const keyCodes = require('./key-codes.cjs');
-const strings = require('./strings.cjs');
-const numbers = require('./numbers.cjs');
-const classNames = require('./class-names.cjs');
-const ref = require('./ref.cjs');
-const slotted = require('./slotted.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const tab_definition = require('../tab/definition.cjs');
+const tabPanel_definition = require('../tab-panel/definition.cjs');
+const vividElement = require('../unbundled/vivid-element.cjs');
+const fastElement = require('@microsoft/fast-element');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+const keyCodes = require('../unbundled/key-codes.cjs');
 
 const styles = ":host{display:block}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-firm: var(--vvd-tabs-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-firm: var(--vvd-tabs-accent-firm, var(--vvd-color-canvas-text))}.base{--_tabs-tablist-gutter: 8px;--_tabs-active-indicator-stroke-width: 2px;display:grid;box-sizing:border-box}.base.orientation-vertical{overflow:hidden;block-size:inherit;grid-template-columns:auto 1fr;grid-template-rows:1fr}.base:not(.orientation-vertical){block-size:var(--tabs-block-size, auto);grid-template-columns:1fr;grid-template-rows:auto 1fr;max-block-size:100%}.base.layout-stretch .scroll-shadow{flex:1}.base:not(.orientation-vertical) .scroll-shadow{position:relative;overflow:hidden;isolation:isolate}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.start-scroll:after,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{position:absolute;content:\"\";inline-size:10px;inset-block:0;opacity:0;transition:opacity .1s}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before{z-index:1;box-shadow:inset 7px 1px 5px -3px var(--vvd-color-neutral-950);inset-inline-start:0;opacity:.2}.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{box-shadow:inset -7px 1px 5px -3px var(--vvd-color-neutral-950);inset-inline-end:0;opacity:.2}.tabs{display:flex;overflow:hidden}.base.orientation-vertical .tabs{flex-direction:column;box-shadow:1px 0 0 0 var(--vvd-color-neutral-300)}.base.orientation-horizontal .tabs{flex-direction:row;border-bottom:1px solid var(--vvd-color-neutral-300)}.tablist{position:relative;display:grid;overflow:hidden;box-sizing:border-box;color:var(--_appearance-color-text)}.base.layout-stretch .tablist{--_tab-justify-content: center;--_tabs-tablist-column: 1fr}.tablist .base:not(.layout-stretch){--_tabs-tablist-column: auto}.base.orientation-vertical .tablist{padding:var(--_tabs-tablist-gutter);block-size:fit-content;grid-row:1/2;grid-template-columns:auto 1fr;grid-template-rows:auto;inline-size:100%;min-block-size:100%;place-self:flex-start end;row-gap:var(--_tabs-tablist-gutter)}.base:not(.orientation-vertical) .tablist{justify-content:flex-start;column-gap:var(--_tabs-tablist-gutter);grid-auto-columns:var(--_tabs-tablist-column);grid-auto-flow:column;grid-template-rows:auto auto;inline-size:fit-content;min-inline-size:100%;padding-inline:var(--_tabs-tablist-gutter)}.base.has-action-items.orientation-vertical .tablist{padding-block-end:0}.base.has-action-items:not(.orientation-vertical) .tablist{padding-inline-end:0}.tablist-wrapper{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.tablist-wrapper{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.tablist-wrapper ::-webkit-scrollbar{width:4px}.tablist-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.tablist-wrapper ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base:not(.orientation-vertical) .tablist-wrapper{overflow:auto hidden;align-self:end;inline-size:100%}.base.orientation-vertical .tablist-wrapper{overflow:hidden auto;block-size:100%}.tablist-wrapper::-webkit-scrollbar{display:none}slot[name=action-items]{display:flex}.base.has-action-items.orientation-horizontal slot[name=action-items]{align-items:center;margin-inline:var(--_tabs-tablist-gutter)}.base.has-action-items.orientation-vertical slot[name=action-items]{margin-block:var(--_tabs-tablist-gutter)}.tabpanel{box-sizing:border-box;block-size:100%;min-block-size:0;min-inline-size:0}.base.scroll .tabpanel{overflow-y:auto;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base.scroll .tabpanel{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base.scroll .tabpanel ::-webkit-scrollbar{width:4px}.base.scroll .tabpanel ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base.scroll .tabpanel ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base.gutters-small .tabpanel{padding:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.active-indicator{background:currentColor;margin-inline-start:calc(var(--_tabs-tablist-gutter) * -1)}.base.orientation-vertical .active-indicator{align-self:center;border-radius:2px;block-size:80%;grid-area:1/1;inline-size:var(--_tabs-active-indicator-stroke-width)}.base:not(.orientation-vertical) .active-indicator{position:absolute;z-index:1;border-radius:2px;block-size:var(--_tabs-active-indicator-stroke-width);grid-area:2/1;inline-size:calc(var(--_tabs-active-tab-inline-size));inset-block-end:0;inset-inline-start:8px}.activeIndicatorTransition{transition:transform .2s ease-out 0s,inline-size .2s ease-out 0s}";
 
@@ -34,7 +33,8 @@ const oppositeOrientation = (orientation) => orientation === TabsOrientation.hor
 const gridProperty = (orientation) => orientation === TabsOrientation.horizontal ? "gridColumn" : "gridRow";
 const translateProperty = (orientation) => orientation === TabsOrientation.horizontal ? "translateX" : "translateY";
 const offsetProperty = (orientation) => orientation === TabsOrientation.horizontal ? "offsetLeft" : "offsetTop";
-const isFocusableElement = (el) => el.getAttribute("aria-disabled") !== "true" && !el.hasAttribute("hidden");
+const isFocusableElement = (el) => el.getAttribute("aria-disabled") !== "true" && !el.disabled && !el.hasAttribute("hidden");
+const arrayShallowEquals = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
 class Tabs extends vividElement.VividElement {
   constructor() {
     super(...arguments);
@@ -56,12 +56,12 @@ class Tabs extends vividElement.VividElement {
       if (!activeTab) {
         return;
       }
-      const [arrowKeyPrev, arrowKeyNext] = this.orientation === TabsOrientation.horizontal ? [keyCodes.keyArrowLeft, keyCodes.keyArrowRight] : [keyCodes.keyArrowUp, keyCodes.keyArrowDown];
+      const [arrowKeyPrev, arrowKeyNext] = this.orientation === TabsOrientation.horizontal ? [keyCodes.keyArrowLeft, keyCodes.keyArrowRight] : [fastWebUtilities.keyArrowUp, fastWebUtilities.keyArrowDown];
       const keyToNextTab = {
         [arrowKeyPrev]: () => tabs[(tabs.indexOf(activeTab) - 1 + tabs.length) % tabs.length],
         [arrowKeyNext]: () => tabs[(tabs.indexOf(activeTab) + 1) % tabs.length],
-        [keyCodes.keyHome]: () => tabs[0],
-        [keyCodes.keyEnd]: () => tabs[tabs.length - 1]
+        [fastWebUtilities.keyHome]: () => tabs[0],
+        [fastWebUtilities.keyEnd]: () => tabs[tabs.length - 1]
       };
       if (keyToNextTab[event.key]) {
         event.preventDefault();
@@ -80,7 +80,7 @@ class Tabs extends vividElement.VividElement {
   orientationChanged() {
     this._registerTabsChange();
     if (this.$fastController.isConnected) {
-      vividElement.DOM.queueUpdate(() => this.#moveActiveIndicator(false));
+      fastElement.DOM.queueUpdate(() => this.#moveActiveIndicator(false));
     }
   }
   /**
@@ -89,7 +89,7 @@ class Tabs extends vividElement.VividElement {
   tabsChanged() {
     for (const tab of this.tabs) {
       if (!tab.id) {
-        tab.id = `tab-${strings.uniqueId()}`;
+        tab.id = `tab-${fastWebUtilities.uniqueId()}`;
       }
       tab.addEventListener("click", this.#onTabClick);
       tab.addEventListener("keydown", this.#onTabKeyDown);
@@ -102,11 +102,14 @@ class Tabs extends vividElement.VividElement {
   tabpanelsChanged() {
     for (const panel of this.tabpanels) {
       if (!panel.id) {
-        panel.id = `panel-${strings.uniqueId()}`;
+        panel.id = `panel-${fastWebUtilities.uniqueId()}`;
       }
     }
     this._registerTabsChange();
   }
+  #areSlotsSynced() {
+    return arrayShallowEquals(this.tabs, this._tabsSlot.assignedNodes()) && arrayShallowEquals(this.tabpanels, this._tabPanelsSlot.assignedNodes());
+  }
   /**
    * Tabs that are paired with a tabpanel. Ignore any excess tabs or panels.
    */
@@ -151,7 +154,7 @@ class Tabs extends vividElement.VividElement {
     }
     this.#isTabsChangeQueued = true;
     window.queueMicrotask(() => {
-      if (this.$fastController.isConnected) {
+      if (this.$fastController.isConnected && this.#areSlotsSynced()) {
         this.#handleTabsChange();
       }
       this.#isTabsChangeQueued = false;
@@ -190,7 +193,7 @@ class Tabs extends vividElement.VividElement {
     for (const [index, tab] of this._pairedTabs.entries()) {
       const panel = this.tabpanels[index];
       const isActiveTab = tab.id === this.activeid;
-      if (tab instanceof definition.Tab) {
+      if (tab instanceof tab_definition.VwcTabElement) {
         tab.active = isActiveTab;
       }
       tab.setAttribute("aria-controls", panel.id);
@@ -226,7 +229,7 @@ class Tabs extends vividElement.VividElement {
     if (currentActiveTabIndex === -1) {
       return;
     }
-    const nextTabIndex = numbers.limit(
+    const nextTabIndex = fastWebUtilities.limit(
       0,
       focusableTabs.length - 1,
       currentActiveTabIndex + adjustment
@@ -335,40 +338,40 @@ class Tabs extends vividElement.VividElement {
   }
 }
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Tabs.prototype, "orientation");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], Tabs.prototype, "tabs");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], Tabs.prototype, "tabpanels");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Tabs.prototype, "activeid");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], Tabs.prototype, "activeIndicatorRef");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], Tabs.prototype, "tablist");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Tabs.prototype, "connotation");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Tabs.prototype, "gutters");
 __decorateClass([
-  vividElement.attr({ mode: "boolean", attribute: "scrollable-panel" })
+  fastElement.attr({ mode: "boolean", attribute: "scrollable-panel" })
 ], Tabs.prototype, "scrollablePanel");
 __decorateClass([
-  vividElement.attr({ attribute: "tabs-layout" })
+  fastElement.attr({ attribute: "tabs-layout" })
 ], Tabs.prototype, "tabsLayout");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], Tabs.prototype, "_actionItemsSlottedContent");
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], Tabs.prototype, "activeindicator");
 
 const getClasses = ({
@@ -378,7 +381,7 @@ const getClasses = ({
   scrollablePanel,
   tabsLayout,
   _actionItemsSlottedContent
-}) => classNames.classNames(
+}) => fastWebUtilities.classNames(
   "base",
   `layout-${tabsLayout ?? "align-start"}`,
   [`connotation-${connotation}`, Boolean(connotation)],
@@ -413,16 +416,16 @@ function setShadowWhenScrollTabs(_, { event }) {
   addStartShadow(scrollShadow, scrollWrapper);
   addEndShadow(scrollShadow, scrollWrapper);
 }
-const TabsTemplate = vividElement.html`
+const TabsTemplate = fastElement.html`
 	<template>
 		<div class="${getClasses}">
 			<div class="tabs">
 				<div class="scroll-shadow">
 					<div class="tablist-wrapper" @scroll="${setShadowWhenScrollTabs}">
-						<div class="tablist" role="tablist" ${ref.ref("tablist")}>
-							<slot name="tab" ${slotted.slotted("tabs")}></slot>
+						<div class="tablist" role="tablist" ${fastElement.ref("tablist")}>
+							<slot name="tab" ${fastElement.ref("_tabsSlot")} ${fastElement.slotted("tabs")}></slot>
 							<div
-								${ref.ref("activeIndicatorRef")}
+								${fastElement.ref("activeIndicatorRef")}
 								class="active-indicator"
 								@transitionend="${(x, c) => x._onActiveIndicatorTransitionend(
   c.event
@@ -433,11 +436,15 @@ const TabsTemplate = vividElement.html`
 				</div>
 				<slot
 					name="action-items"
-					${slotted.slotted("_actionItemsSlottedContent")}
+					${fastElement.slotted("_actionItemsSlottedContent")}
 				></slot>
 			</div>
 			<div class="tabpanel" part="tab-panel">
-				<slot name="tabpanel" ${slotted.slotted("tabpanels")}></slot>
+				<slot
+					name="tabpanel"
+					${fastElement.ref("_tabPanelsSlot")}
+					${fastElement.slotted("tabpanels")}
+				></slot>
 			</div>
 		</div>
 	</template>
@@ -447,14 +454,14 @@ const tabsDefinition = vividElement.defineVividComponent(
   "tabs",
   Tabs,
   TabsTemplate,
-  [definition.tabDefinition, definition$1.tabPanelDefinition],
+  [tab_definition.tabDefinition, tabPanel_definition.tabPanelDefinition],
   {
     styles
   }
 );
 const registerTabs = vividElement.createRegisterFunction(tabsDefinition);
 
-exports.Tabs = Tabs;
 exports.TabsGutters = TabsGutters;
+exports.VwcTabsElement = Tabs;
 exports.registerTabs = registerTabs;
 exports.tabsDefinition = tabsDefinition;

package/{shared/definition54.js → tabs/definition.js}

@@ -1,12 +1,9 @@
-import { T as Tab, t as tabDefinition } from './definition53.js';
-import { t as tabPanelDefinition } from './definition52.js';
-import { V as VividElement, D as DOM, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { i as keyArrowLeft, h as keyArrowRight, e as keyArrowUp, f as keyArrowDown, d as keyEnd, g as keyHome } from './key-codes.js';
-import { u as uniqueId } from './strings.js';
-import { l as limit } from './numbers.js';
-import { c as classNames } from './class-names.js';
-import { r as ref } from './ref.js';
-import { s as slotted } from './slotted.js';
+import { VwcTabElement as Tab, tabDefinition } from '../tab/definition.js';
+import { tabPanelDefinition } from '../tab-panel/definition.js';
+import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { DOM, attr, observable, ref, slotted, html } from '@microsoft/fast-element';
+import { keyArrowUp, keyArrowDown, uniqueId, limit, keyEnd, keyHome, classNames } from '@microsoft/fast-web-utilities';
+import { a as keyArrowLeft, k as keyArrowRight } from '../unbundled/key-codes.js';
 
 const styles = ":host{display:block}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-firm: var(--vvd-tabs-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-firm: var(--vvd-tabs-accent-firm, var(--vvd-color-canvas-text))}.base{--_tabs-tablist-gutter: 8px;--_tabs-active-indicator-stroke-width: 2px;display:grid;box-sizing:border-box}.base.orientation-vertical{overflow:hidden;block-size:inherit;grid-template-columns:auto 1fr;grid-template-rows:1fr}.base:not(.orientation-vertical){block-size:var(--tabs-block-size, auto);grid-template-columns:1fr;grid-template-rows:auto 1fr;max-block-size:100%}.base.layout-stretch .scroll-shadow{flex:1}.base:not(.orientation-vertical) .scroll-shadow{position:relative;overflow:hidden;isolation:isolate}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.start-scroll:after,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{position:absolute;content:\"\";inline-size:10px;inset-block:0;opacity:0;transition:opacity .1s}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before{z-index:1;box-shadow:inset 7px 1px 5px -3px var(--vvd-color-neutral-950);inset-inline-start:0;opacity:.2}.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{box-shadow:inset -7px 1px 5px -3px var(--vvd-color-neutral-950);inset-inline-end:0;opacity:.2}.tabs{display:flex;overflow:hidden}.base.orientation-vertical .tabs{flex-direction:column;box-shadow:1px 0 0 0 var(--vvd-color-neutral-300)}.base.orientation-horizontal .tabs{flex-direction:row;border-bottom:1px solid var(--vvd-color-neutral-300)}.tablist{position:relative;display:grid;overflow:hidden;box-sizing:border-box;color:var(--_appearance-color-text)}.base.layout-stretch .tablist{--_tab-justify-content: center;--_tabs-tablist-column: 1fr}.tablist .base:not(.layout-stretch){--_tabs-tablist-column: auto}.base.orientation-vertical .tablist{padding:var(--_tabs-tablist-gutter);block-size:fit-content;grid-row:1/2;grid-template-columns:auto 1fr;grid-template-rows:auto;inline-size:100%;min-block-size:100%;place-self:flex-start end;row-gap:var(--_tabs-tablist-gutter)}.base:not(.orientation-vertical) .tablist{justify-content:flex-start;column-gap:var(--_tabs-tablist-gutter);grid-auto-columns:var(--_tabs-tablist-column);grid-auto-flow:column;grid-template-rows:auto auto;inline-size:fit-content;min-inline-size:100%;padding-inline:var(--_tabs-tablist-gutter)}.base.has-action-items.orientation-vertical .tablist{padding-block-end:0}.base.has-action-items:not(.orientation-vertical) .tablist{padding-inline-end:0}.tablist-wrapper{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.tablist-wrapper{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.tablist-wrapper ::-webkit-scrollbar{width:4px}.tablist-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.tablist-wrapper ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base:not(.orientation-vertical) .tablist-wrapper{overflow:auto hidden;align-self:end;inline-size:100%}.base.orientation-vertical .tablist-wrapper{overflow:hidden auto;block-size:100%}.tablist-wrapper::-webkit-scrollbar{display:none}slot[name=action-items]{display:flex}.base.has-action-items.orientation-horizontal slot[name=action-items]{align-items:center;margin-inline:var(--_tabs-tablist-gutter)}.base.has-action-items.orientation-vertical slot[name=action-items]{margin-block:var(--_tabs-tablist-gutter)}.tabpanel{box-sizing:border-box;block-size:100%;min-block-size:0;min-inline-size:0}.base.scroll .tabpanel{overflow-y:auto;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base.scroll .tabpanel{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base.scroll .tabpanel ::-webkit-scrollbar{width:4px}.base.scroll .tabpanel ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base.scroll .tabpanel ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base.gutters-small .tabpanel{padding:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.active-indicator{background:currentColor;margin-inline-start:calc(var(--_tabs-tablist-gutter) * -1)}.base.orientation-vertical .active-indicator{align-self:center;border-radius:2px;block-size:80%;grid-area:1/1;inline-size:var(--_tabs-active-indicator-stroke-width)}.base:not(.orientation-vertical) .active-indicator{position:absolute;z-index:1;border-radius:2px;block-size:var(--_tabs-active-indicator-stroke-width);grid-area:2/1;inline-size:calc(var(--_tabs-active-tab-inline-size));inset-block-end:0;inset-inline-start:8px}.activeIndicatorTransition{transition:transform .2s ease-out 0s,inline-size .2s ease-out 0s}";
 
@@ -32,7 +29,8 @@ const oppositeOrientation = (orientation) => orientation === TabsOrientation.hor
 const gridProperty = (orientation) => orientation === TabsOrientation.horizontal ? "gridColumn" : "gridRow";
 const translateProperty = (orientation) => orientation === TabsOrientation.horizontal ? "translateX" : "translateY";
 const offsetProperty = (orientation) => orientation === TabsOrientation.horizontal ? "offsetLeft" : "offsetTop";
-const isFocusableElement = (el) => el.getAttribute("aria-disabled") !== "true" && !el.hasAttribute("hidden");
+const isFocusableElement = (el) => el.getAttribute("aria-disabled") !== "true" && !el.disabled && !el.hasAttribute("hidden");
+const arrayShallowEquals = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
 class Tabs extends VividElement {
   constructor() {
     super(...arguments);
@@ -105,6 +103,9 @@ class Tabs extends VividElement {
     }
     this._registerTabsChange();
   }
+  #areSlotsSynced() {
+    return arrayShallowEquals(this.tabs, this._tabsSlot.assignedNodes()) && arrayShallowEquals(this.tabpanels, this._tabPanelsSlot.assignedNodes());
+  }
   /**
    * Tabs that are paired with a tabpanel. Ignore any excess tabs or panels.
    */
@@ -149,7 +150,7 @@ class Tabs extends VividElement {
     }
     this.#isTabsChangeQueued = true;
     window.queueMicrotask(() => {
-      if (this.$fastController.isConnected) {
+      if (this.$fastController.isConnected && this.#areSlotsSynced()) {
         this.#handleTabsChange();
       }
       this.#isTabsChangeQueued = false;
@@ -418,7 +419,7 @@ const TabsTemplate = html`
 				<div class="scroll-shadow">
 					<div class="tablist-wrapper" @scroll="${setShadowWhenScrollTabs}">
 						<div class="tablist" role="tablist" ${ref("tablist")}>
-							<slot name="tab" ${slotted("tabs")}></slot>
+							<slot name="tab" ${ref("_tabsSlot")} ${slotted("tabs")}></slot>
 							<div
 								${ref("activeIndicatorRef")}
 								class="active-indicator"
@@ -435,7 +436,11 @@ const TabsTemplate = html`
 				></slot>
 			</div>
 			<div class="tabpanel" part="tab-panel">
-				<slot name="tabpanel" ${slotted("tabpanels")}></slot>
+				<slot
+					name="tabpanel"
+					${ref("_tabPanelsSlot")}
+					${slotted("tabpanels")}
+				></slot>
 			</div>
 		</div>
 	</template>
@@ -452,4 +457,4 @@ const tabsDefinition = defineVividComponent(
 );
 const registerTabs = createRegisterFunction(tabsDefinition);
 
-export { Tabs as T, TabsGutters as a, registerTabs as r, tabsDefinition as t };
+export { TabsGutters, Tabs as VwcTabsElement, registerTabs, tabsDefinition };

package/tabs/index.cjs

@@ -1,5 +1,31 @@
-'use strict';
-
-const definition = require('../shared/definition54.cjs');
-
-definition.registerTabs();
+"use strict";const w=require("../bundled/definition20.cjs"),k=require("../bundled/definition21.cjs"),o=require("../bundled/vivid-element.cjs"),d=require("../bundled/key-codes.cjs"),u=require("../bundled/strings.cjs"),T=require("../bundled/numbers.cjs"),_=require("../bundled/class-names.cjs"),h=require("../bundled/ref.cjs"),p=require("../bundled/slotted.cjs"),z=':host{display:block}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-firm: var(--vvd-tabs-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-firm: var(--vvd-tabs-accent-firm, var(--vvd-color-canvas-text))}.base{--_tabs-tablist-gutter: 8px;--_tabs-active-indicator-stroke-width: 2px;display:grid;box-sizing:border-box}.base.orientation-vertical{overflow:hidden;block-size:inherit;grid-template-columns:auto 1fr;grid-template-rows:1fr}.base:not(.orientation-vertical){block-size:var(--tabs-block-size, auto);grid-template-columns:1fr;grid-template-rows:auto 1fr;max-block-size:100%}.base.layout-stretch .scroll-shadow{flex:1}.base:not(.orientation-vertical) .scroll-shadow{position:relative;overflow:hidden;isolation:isolate}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.start-scroll:after,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{position:absolute;content:"";inline-size:10px;inset-block:0;opacity:0;transition:opacity .1s}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before{z-index:1;box-shadow:inset 7px 1px 5px -3px var(--vvd-color-neutral-950);inset-inline-start:0;opacity:.2}.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{box-shadow:inset -7px 1px 5px -3px var(--vvd-color-neutral-950);inset-inline-end:0;opacity:.2}.tabs{display:flex;overflow:hidden}.base.orientation-vertical .tabs{flex-direction:column;box-shadow:1px 0 0 0 var(--vvd-color-neutral-300)}.base.orientation-horizontal .tabs{flex-direction:row;border-bottom:1px solid var(--vvd-color-neutral-300)}.tablist{position:relative;display:grid;overflow:hidden;box-sizing:border-box;color:var(--_appearance-color-text)}.base.layout-stretch .tablist{--_tab-justify-content: center;--_tabs-tablist-column: 1fr}.tablist .base:not(.layout-stretch){--_tabs-tablist-column: auto}.base.orientation-vertical .tablist{padding:var(--_tabs-tablist-gutter);block-size:fit-content;grid-row:1/2;grid-template-columns:auto 1fr;grid-template-rows:auto;inline-size:100%;min-block-size:100%;place-self:flex-start end;row-gap:var(--_tabs-tablist-gutter)}.base:not(.orientation-vertical) .tablist{justify-content:flex-start;column-gap:var(--_tabs-tablist-gutter);grid-auto-columns:var(--_tabs-tablist-column);grid-auto-flow:column;grid-template-rows:auto auto;inline-size:fit-content;min-inline-size:100%;padding-inline:var(--_tabs-tablist-gutter)}.base.has-action-items.orientation-vertical .tablist{padding-block-end:0}.base.has-action-items:not(.orientation-vertical) .tablist{padding-inline-end:0}.tablist-wrapper{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.tablist-wrapper{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.tablist-wrapper ::-webkit-scrollbar{width:4px}.tablist-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.tablist-wrapper ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base:not(.orientation-vertical) .tablist-wrapper{overflow:auto hidden;align-self:end;inline-size:100%}.base.orientation-vertical .tablist-wrapper{overflow:hidden auto;block-size:100%}.tablist-wrapper::-webkit-scrollbar{display:none}slot[name=action-items]{display:flex}.base.has-action-items.orientation-horizontal slot[name=action-items]{align-items:center;margin-inline:var(--_tabs-tablist-gutter)}.base.has-action-items.orientation-vertical slot[name=action-items]{margin-block:var(--_tabs-tablist-gutter)}.tabpanel{box-sizing:border-box;block-size:100%;min-block-size:0;min-inline-size:0}.base.scroll .tabpanel{overflow-y:auto;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base.scroll .tabpanel{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base.scroll .tabpanel ::-webkit-scrollbar{width:4px}.base.scroll .tabpanel ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base.scroll .tabpanel ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base.gutters-small .tabpanel{padding:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.active-indicator{background:currentColor;margin-inline-start:calc(var(--_tabs-tablist-gutter) * -1)}.base.orientation-vertical .active-indicator{align-self:center;border-radius:2px;block-size:80%;grid-area:1/1;inline-size:var(--_tabs-active-indicator-stroke-width)}.base:not(.orientation-vertical) .active-indicator{position:absolute;z-index:1;border-radius:2px;block-size:var(--_tabs-active-indicator-stroke-width);grid-area:2/1;inline-size:calc(var(--_tabs-active-tab-inline-size));inset-block-end:0;inset-inline-start:8px}.activeIndicatorTransition{transition:transform .2s ease-out 0s,inline-size .2s ease-out 0s}';var C=Object.defineProperty,l=(a,t,e,i)=>{for(var s=void 0,r=a.length-1,b;r>=0;r--)(b=a[r])&&(s=b(t,e,s)||s);return s&&C(t,e,s),s};const I="--_tabs-active-tab-inline-size",c={vertical:"vertical",horizontal:"horizontal"},$=a=>a===c.horizontal?c.vertical:c.horizontal,v=a=>a===c.horizontal?"gridColumn":"gridRow",A=a=>a===c.horizontal?"translateX":"translateY",g=a=>a===c.horizontal?"offsetLeft":"offsetTop",S=a=>a.getAttribute("aria-disabled")!=="true"&&!a.disabled&&!a.hasAttribute("hidden"),m=(a,t)=>a.length===t.length&&a.every((e,i)=>e===t[i]);class n extends o.VividElement{constructor(){super(...arguments),this.orientation=c.horizontal,this.tabs=[],this.tabpanels=[],this.#i=!1,this.#a=void 0,this.#n=t=>{const e=t.currentTarget;this._validTabs.includes(e)&&this.#r(e)},this.#l=t=>{const e=this._validTabs,i=this.activetab;if(!i)return;const[s,r]=this.orientation===c.horizontal?[d.keyArrowLeft,d.keyArrowRight]:[d.keyArrowUp,d.keyArrowDown],b={[s]:()=>e[(e.indexOf(i)-1+e.length)%e.length],[r]:()=>e[(e.indexOf(i)+1)%e.length],[d.keyHome]:()=>e[0],[d.keyEnd]:()=>e[e.length-1]};b[t.key]&&(t.preventDefault(),this.#r(b[t.key]()))},this.#t=!1,this.scrollablePanel=!1,this._actionItemsSlottedContent=[],this.activeindicator=!0}orientationChanged(){this._registerTabsChange(),this.$fastController.isConnected&&o.DOM.queueUpdate(()=>this.#s(!1))}tabsChanged(){for(const t of this.tabs)t.id||(t.id=`tab-${u.uniqueId()}`),t.addEventListener("click",this.#n),t.addEventListener("keydown",this.#l);this._registerTabsChange()}tabpanelsChanged(){for(const t of this.tabpanels)t.id||(t.id=`panel-${u.uniqueId()}`);this._registerTabsChange()}#d(){return m(this.tabs,this._tabsSlot.assignedNodes())&&m(this.tabpanels,this._tabPanelsSlot.assignedNodes())}get _pairedTabs(){return this.tabs.slice(0,Math.min(this.tabs.length,this.tabpanels.length))}get _validTabs(){return this._pairedTabs.filter(S)}activeidChanged(){this._registerTabsChange()}get activetab(){return this._validTabs.find(t=>t.id===this.activeid)??null}#r(t){this.activeid=t.id,t.focus(),this.$emit("change",t)}#i;_registerTabsChange(){this.#i||(this.#i=!0,window.queueMicrotask(()=>{this.$fastController.isConnected&&this.#d()&&this.#h(),this.#i=!1}))}#a;#h(){const t=this._validTabs;let e=this.activeid;if((!t.length||e&&!t.find(i=>i.id===e))&&(e=void 0),!e&&t.length&&(e=t[0].id),this.activeid!==e&&(this.activeid=e,this.$emit("change",this.activetab)),this.#v(),this.activeid!==this.#a){if(this.activetab){const i=this.#a!==void 0;this.#f(this.activetab,i),this.#s(i)}this.#a=this.activeid}else this.#s(this.#t)}#v(){for(const[t,e]of this._pairedTabs.entries()){const i=this.tabpanels[t],s=e.id===this.activeid;e instanceof w.Tab&&(e.active=s),e.setAttribute("aria-controls",i.id),e.setAttribute("tabindex",s?"0":"-1"),s&&this.connotation?e.setAttribute("connotation",this.connotation):e.removeAttribute("connotation"),e.classList.toggle("vertical",this.orientation===c.vertical),e.style[v($(this.orientation))]="",e.style[v(this.orientation)]=`${t+1}`,i.setAttribute("aria-labelledby",e.id),i.hidden=!s}}#n;#l;adjust(t){const e=this._validTabs,i=e.findIndex(r=>r.id===this.activeid);if(i===-1)return;const s=T.limit(0,e.length-1,i+t);this.#r(e[s])}#t;_onActiveIndicatorTransitionend(t){t.propertyName==="transform"&&(this.#t=!1)}#p(){this.#t=!1,this.activeIndicatorRef.classList.remove("activeIndicatorTransition")}#s(t){const e=this._pairedTabs.findIndex(x=>x.id===this.activeid);if(e===-1)return;const i=this.activeIndicatorRef,s=i[g(this.orientation)];i.style[v(this.orientation)]=`${e+1}`;const r=i[g(this.orientation)];i.style[v(this.orientation)]="";const b=r-s,y=i.style.transform,f=`${A(this.orientation)}(${b}px)`;t?(i.classList.add("activeIndicatorTransition"),y!==f&&(this.#t=!0)):this.#p(),i.style.transform=f,i.style.setProperty(I,this.tabs[e].getBoundingClientRect().width+"px")}connotationChanged(){this._registerTabsChange()}#c(){this.#b.dispatchEvent(new Event("scroll"))}#o;connectedCallback(){super.connectedCallback(),this._registerTabsChange(),requestAnimationFrame(()=>this.#c()),this.#o=new ResizeObserver(()=>{this.#s(this.#t),this.#c()}),this.#o.observe(this.#b),this.#o.observe(this.tablist)}disconnectedCallback(){super.disconnectedCallback(),this.#o.disconnect()}get#e(){return this.shadowRoot.querySelector(".tablist-wrapper")}get#b(){return this.tablist.parentElement}#f(t,e=!0){const i=this.tabs.findIndex(b=>b===t);let s=0,r=0;this.orientation===c.vertical?(i===this.tabs.length-1&&(r=this.#e.scrollHeight),i>0&&i<this.tabs.length-1&&(r=t.offsetTop-this.#e.offsetHeight/2+t.offsetHeight/2)):(i===this.tabs.length-1&&(s=this.#e.scrollWidth),i>0&&i<this.tabs.length-1&&(s=t.offsetLeft-this.#e.offsetWidth/2+t.offsetWidth/2)),this.#e.scrollTo({top:r,left:s,behavior:e?"smooth":"instant"})}}l([o.attr],n.prototype,"orientation");l([o.observable],n.prototype,"tabs");l([o.observable],n.prototype,"tabpanels");l([o.attr],n.prototype,"activeid");l([o.observable],n.prototype,"activeIndicatorRef");l([o.observable],n.prototype,"tablist");l([o.attr],n.prototype,"connotation");l([o.attr],n.prototype,"gutters");l([o.attr({mode:"boolean",attribute:"scrollable-panel"})],n.prototype,"scrollablePanel");l([o.attr({attribute:"tabs-layout"})],n.prototype,"tabsLayout");l([o.observable],n.prototype,"_actionItemsSlottedContent");l([o.attr({mode:"boolean"})],n.prototype,"activeindicator");const L=({connotation:a,orientation:t,gutters:e,scrollablePanel:i,tabsLayout:s,_actionItemsSlottedContent:r})=>_.classNames("base",`layout-${s??"align-start"}`,[`connotation-${a}`,!!a],[`orientation-${t}`,!!t],`gutters-${e??"small"}`,["scroll",!!i],["has-action-items",!!r.length]);function q(a,t){return t.scrollWidth<=t.clientWidth?(a.classList.toggle("start-scroll",!1),a.classList.toggle("end-scroll",!1),!0):!1}function E(a,t){a.classList.toggle("start-scroll",t.scrollLeft>0)}function P(a,t){a.classList.toggle("end-scroll",t.scrollLeft+1<t.scrollWidth-t.clientWidth)}function O(a,{event:t}){const e=t.currentTarget,i=e.parentElement;q(i,e)||(E(i,e),P(i,e))}const R=o.html`
+	<template>
+		<div class="${L}">
+			<div class="tabs">
+				<div class="scroll-shadow">
+					<div class="tablist-wrapper" @scroll="${O}">
+						<div class="tablist" role="tablist" ${h.ref("tablist")}>
+							<slot name="tab" ${h.ref("_tabsSlot")} ${p.slotted("tabs")}></slot>
+							<div
+								${h.ref("activeIndicatorRef")}
+								class="active-indicator"
+								@transitionend="${(a,t)=>a._onActiveIndicatorTransitionend(t.event)}"
+							></div>
+						</div>
+					</div>
+				</div>
+				<slot
+					name="action-items"
+					${p.slotted("_actionItemsSlottedContent")}
+				></slot>
+			</div>
+			<div class="tabpanel" part="tab-panel">
+				<slot
+					name="tabpanel"
+					${h.ref("_tabPanelsSlot")}
+					${p.slotted("tabpanels")}
+				></slot>
+			</div>
+		</div>
+	</template>
+`,D=o.defineVividComponent("tabs",n,R,[w.tabDefinition,k.tabPanelDefinition],{styles:z}),N=o.createRegisterFunction(D);N();