@vonage/vivid 4.12.0 → 4.12.1

package/shared/definition43.cjs

@@ -438,6 +438,7 @@ let SearchableSelect = class extends FormAssociatedSearchableSelect {
     }
     if (!e.defaultPrevented) {
       this._input.focus();
+      this.open = true;
     }
   }
   connectedCallback() {

package/shared/definition43.js

@@ -436,6 +436,7 @@ let SearchableSelect = class extends FormAssociatedSearchableSelect {
     }
     if (!e.defaultPrevented) {
       this._input.focus();
+      this.open = true;
     }
   }
   connectedCallback() {

package/shared/definition44.cjs

@@ -11,7 +11,7 @@ const applyMixins = require('./apply-mixins.cjs');
 const formAssociated = require('./form-associated.cjs');
 const select_options = require('./select.options.cjs');
 const strings = require('./strings.cjs');
-const keyCodes = require('./key-codes.cjs');
+const keyCodes = require('./key-codes2.cjs');
 const formElements = require('./form-elements.cjs');
 const affix = require('./affix.cjs');
 const definition$2 = require('./definition11.cjs');

package/shared/definition44.js

@@ -9,7 +9,7 @@ import { a as applyMixins } from './apply-mixins.js';
 import { F as FormAssociated } from './form-associated.js';
 import { S as SelectPosition } from './select.options.js';
 import { u as uniqueId } from './strings.js';
-import { c as keyTab, b as keyEscape, k as keyEnter, d as keyEnd, g as keyHome, a as keySpace, f as keyArrowDown, e as keyArrowUp } from './key-codes.js';
+import { c as keyTab, b as keyEscape, k as keyEnter, d as keyEnd, g as keyHome, a as keySpace, f as keyArrowDown, e as keyArrowUp } from './key-codes2.js';
 import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, g as getFeedbackTemplate } from './form-elements.js';
 import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { d as chevronTemplateFactory } from './definition11.js';

package/shared/definition47.cjs

@@ -2,11 +2,12 @@
 
 const index = require('./index.cjs');
 const definition = require('./definition64.cjs');
-const keyCodes = require('./key-codes2.cjs');
+const keyCodes = require('./key-codes.cjs');
 const slider_template = require('./slider.template.cjs');
 const formAssociated = require('./form-associated.cjs');
 const aria = require('./aria.cjs');
 const direction = require('./direction.cjs');
+const numbers = require('./numbers.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const localized = require('./localized.cjs');
 
@@ -395,7 +396,7 @@ class Slider extends FormAssociatedSlider {
     return slider_template.lerp(this.min, this.max, slider_template.inverseLerp(minPos, maxPos, valuePos));
   }
   #roundToNearestStep(value) {
-    return slider_template.limit(
+    return numbers.limit(
       this.min,
       this.max,
       slider_template.roundToStepValue(value - this.min, this.step) + this.min

package/shared/definition47.js

@@ -1,10 +1,11 @@
 import { F as FoundationElement, a as attr, o as observable, n as nullableNumberConverter, v as volatile, r as registerFactory } from './index.js';
 import { p as popupRegistries } from './definition64.js';
-import { c as keyHome, d as keyEnd, e as keyArrowDown, k as keyArrowLeft, f as keyArrowUp, a as keyArrowRight } from './key-codes2.js';
-import { i as inverseLerp, l as lerp, a as limit, r as roundToStepValue, S as SliderTemplate } from './slider.template.js';
+import { b as keyHome, a as keyEnd, c as keyArrowDown, e as keyArrowLeft, d as keyArrowUp, f as keyArrowRight } from './key-codes.js';
+import { i as inverseLerp, l as lerp, r as roundToStepValue, S as SliderTemplate } from './slider.template.js';
 import { F as FormAssociated } from './form-associated.js';
 import { O as Orientation } from './aria.js';
 import { g as getDirection } from './direction.js';
+import { l as limit } from './numbers.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { L as Localized } from './localized.js';
 

package/shared/definition49.cjs

@@ -3,7 +3,7 @@
 const index = require('./index.cjs');
 const definition = require('./definition27.cjs');
 const formAssociated = require('./form-associated.cjs');
-const keyCodes = require('./key-codes.cjs');
+const keyCodes = require('./key-codes2.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 

package/shared/definition49.js

@@ -1,7 +1,7 @@
 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-codes.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';
 

package/shared/definition5.cjs

@@ -13,7 +13,7 @@ const when = require('./when.cjs');
 const repeat = require('./repeat.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ":host{display:block}.wrapper{container-type:inline-size}.base{display:inline-flex;box-sizing:border-box;align-items:center;padding:8px;color:var(--vvd-color-canvas-text);gap:16px;inline-size:100%;user-select:none}.base .slider{flex:1;grid-area:slider}.base .controls{display:flex;align-items:center;justify-content:center;gap:8px;grid-area:controls}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{margin-inline:6px;min-inline-size:32px}.base .playback-button{grid-area:playback}@container (max-width: 500px){.base.two-lines{display:inline-grid;grid-template:auto auto/1fr;grid-template-areas:\"slider\" \"controls\";inline-size:100%;row-gap:4px}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-areas:\"slider slider\" \"controls playback\";grid-template-columns:1fr auto}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}";
+const styles = ":host{display:block}.wrapper{container-type:inline-size}.base{display:inline-flex;box-sizing:border-box;align-items:center;padding:8px;color:var(--vvd-color-canvas-text);gap:16px;inline-size:100%;user-select:none}.base.disabled{color:var(--vvd-color-neutral-300)}.base .slider{flex:1;grid-area:slider}.base .controls{display:flex;align-items:center;justify-content:center;gap:8px;grid-area:controls}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{margin-inline:6px;min-inline-size:32px}.base .playback-button{grid-area:playback}@container (max-width: 500px){.base.two-lines{display:inline-grid;grid-template:auto auto/1fr;grid-template-areas:\"slider\" \"controls\";inline-size:100%;row-gap:4px}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-areas:\"slider slider\" \"controls playback\";grid-template-columns:1fr auto}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/definition5.js

@@ -11,7 +11,7 @@ import { w as when } from './when.js';
 import { r as repeat } from './repeat.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:block}.wrapper{container-type:inline-size}.base{display:inline-flex;box-sizing:border-box;align-items:center;padding:8px;color:var(--vvd-color-canvas-text);gap:16px;inline-size:100%;user-select:none}.base .slider{flex:1;grid-area:slider}.base .controls{display:flex;align-items:center;justify-content:center;gap:8px;grid-area:controls}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{margin-inline:6px;min-inline-size:32px}.base .playback-button{grid-area:playback}@container (max-width: 500px){.base.two-lines{display:inline-grid;grid-template:auto auto/1fr;grid-template-areas:\"slider\" \"controls\";inline-size:100%;row-gap:4px}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-areas:\"slider slider\" \"controls playback\";grid-template-columns:1fr auto}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}";
+const styles = ":host{display:block}.wrapper{container-type:inline-size}.base{display:inline-flex;box-sizing:border-box;align-items:center;padding:8px;color:var(--vvd-color-canvas-text);gap:16px;inline-size:100%;user-select:none}.base.disabled{color:var(--vvd-color-neutral-300)}.base .slider{flex:1;grid-area:slider}.base .controls{display:flex;align-items:center;justify-content:center;gap:8px;grid-area:controls}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{margin-inline:6px;min-inline-size:32px}.base .playback-button{grid-area:playback}@container (max-width: 500px){.base.two-lines{display:inline-grid;grid-template:auto auto/1fr;grid-template-areas:\"slider\" \"controls\";inline-size:100%;row-gap:4px}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-areas:\"slider slider\" \"controls playback\";grid-template-columns:1fr auto}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/definition50.cjs

@@ -2,17 +2,7 @@
 
 const index = require('./index.cjs');
 
-/**
- * A TabPanel Component to be used with {@link @microsoft/fast-foundation#(Tabs:class)}
- *
- * @slot - The default slot for the tabpanel content
- *
- * @public
- */
-let TabPanel$1 = class TabPanel extends index.FoundationElement {
-};
-
-class TabPanel extends TabPanel$1 {
+class TabPanel extends index.FoundationElement {
 }
 
 function TabPanelTemplate() {

package/shared/definition50.js

@@ -1,16 +1,6 @@
 import { F as FoundationElement, h as html, r as registerFactory } from './index.js';
 
-/**
- * A TabPanel Component to be used with {@link @microsoft/fast-foundation#(Tabs:class)}
- *
- * @slot - The default slot for the tabpanel content
- *
- * @public
- */
-let TabPanel$1 = class TabPanel extends FoundationElement {
-};
-
-class TabPanel extends TabPanel$1 {
+class TabPanel extends FoundationElement {
 }
 
 function TabPanelTemplate() {

package/shared/definition51.cjs

@@ -7,19 +7,6 @@ const applyMixins = require('./apply-mixins.cjs');
 const localized = require('./localized.cjs');
 const classNames = require('./class-names.cjs');
 
-/**
- * A Tab Component to be used with {@link @microsoft/fast-foundation#(Tabs:class)}
- *
- * @slot - The default slot for the tab content
- *
- * @public
- */
-let Tab$1 = class Tab extends index.FoundationElement {
-};
-index.__decorate([
-    index.attr({ mode: "boolean" })
-], Tab$1.prototype, "disabled", void 0);
-
 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}.base:where(.hover,: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:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,: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;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: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))}: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;block-size:24px;inline-size:24px;inset-block-start:50%;inset-inline-end:4px;transform:translateY(-50%)}.close vwc-icon{font-size:12px}.close .icon{display:flex;align-items:center;justify-content:center}";
 
 var __defProp = Object.defineProperty;
@@ -31,7 +18,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Tab extends Tab$1 {
+class Tab extends index.FoundationElement {
   constructor() {
     super(...arguments);
     this.removable = false;
@@ -49,6 +36,9 @@ class Tab extends Tab$1 {
     return false;
   }
 }
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], Tab.prototype, "disabled");
 __decorateClass([
   index.attr
 ], Tab.prototype, "connotation");

package/shared/definition51.js

@@ -1,23 +1,10 @@
-import { F as FoundationElement, _ as __decorate, a as attr, h as html, r as registerFactory } from './index.js';
+import { F as FoundationElement, a as attr, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition27.js';
 import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { L as Localized } from './localized.js';
 import { c as classNames } from './class-names.js';
 
-/**
- * A Tab Component to be used with {@link @microsoft/fast-foundation#(Tabs:class)}
- *
- * @slot - The default slot for the tab content
- *
- * @public
- */
-let Tab$1 = class Tab extends FoundationElement {
-};
-__decorate([
-    attr({ mode: "boolean" })
-], Tab$1.prototype, "disabled", void 0);
-
 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}.base:where(.hover,: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:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,: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;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: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))}: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;block-size:24px;inline-size:24px;inset-block-start:50%;inset-inline-end:4px;transform:translateY(-50%)}.close vwc-icon{font-size:12px}.close .icon{display:flex;align-items:center;justify-content:center}";
 
 var __defProp = Object.defineProperty;
@@ -29,7 +16,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Tab extends Tab$1 {
+class Tab extends FoundationElement {
   constructor() {
     super(...arguments);
     this.removable = false;
@@ -47,6 +34,9 @@ class Tab extends Tab$1 {
     return false;
   }
 }
+__decorateClass([
+  attr({ mode: "boolean" })
+], Tab.prototype, "disabled");
 __decorateClass([
   attr
 ], Tab.prototype, "connotation");

package/shared/definition52.cjs

@@ -3,9 +3,10 @@
 const index = require('./index.cjs');
 const definition = require('./definition51.cjs');
 const definition$1 = require('./definition50.cjs');
+const keyCodes$1 = require('./key-codes.cjs');
 const startEnd = require('./start-end.cjs');
 const applyMixins = require('./apply-mixins.cjs');
-const keyCodes = require('./key-codes.cjs');
+const keyCodes = require('./key-codes2.cjs');
 const strings = require('./strings.cjs');
 const numbers = require('./numbers.cjs');
 const ref = require('./ref.cjs');
@@ -340,7 +341,7 @@ let Tabs$1 = class Tabs extends index.FoundationElement {
     adjust(adjustment) {
         const focusableTabs = this.tabs.filter(t => this.isFocusableElement(t));
         const currentActiveTabIndex = focusableTabs.indexOf(this.activetab);
-        const nextTabIndex = numbers.limit(0, focusableTabs.length - 1, currentActiveTabIndex + adjustment);
+        const nextTabIndex = strings.limit(0, focusableTabs.length - 1, currentActiveTabIndex + adjustment);
         // the index of the next focusable tab within the context of all available tabs
         const nextIndex = this.tabs.indexOf(focusableTabs[nextTabIndex]);
         if (nextIndex > -1) {
@@ -383,6 +384,14 @@ index.__decorate([
 ], Tabs$1.prototype, "showActiveIndicator", void 0);
 applyMixins.applyMixins(Tabs$1, startEnd.StartEnd);
 
+let uniqueIdCounter = 0;
+/**
+ * Generates a unique ID based on incrementing a counter.
+ */
+function uniqueId(prefix = "") {
+    return `${prefix}${uniqueIdCounter++}`;
+}
+
 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){grid-template-columns:1fr;grid-template-rows:auto 1fr;max-block-size:100%}.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;box-sizing:border-box;color:var(--_appearance-color-text)}.base.orientation-vertical .tablist{padding:var(--_tabs-tablist-gutter);grid-row:1/2;grid-template-columns:auto 1fr;grid-template-rows:auto;inline-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-flow:column;grid-template-columns:auto;grid-template-rows:auto auto;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}.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}.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/auto/auto;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-column:1/auto;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 __defProp = Object.defineProperty;
@@ -395,43 +404,260 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 const ACTIVE_TAB_WIDTH = "--_tabs-active-tab-inline-size";
-class Tabs extends Tabs$1 {
+class Tabs extends index.FoundationElement {
   constructor() {
-    super();
+    super(...arguments);
+    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    this.orientation = TabsOrientation.horizontal;
+    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    this.activeindicator = true;
+    this.showActiveIndicator = true;
+    this.prevActiveTabIndex = 0;
+    this.activeTabIndex = 0;
+    this.tabIds = [];
+    this.tabpanelIds = [];
+    this.change = () => {
+      this.$emit("change", this.activetab);
+    };
+    this.isDisabledElement = (el) => {
+      return el.getAttribute("aria-disabled") === "true";
+    };
+    this.isHiddenElement = (el) => {
+      return el.hasAttribute("hidden");
+    };
+    this.isFocusableElement = (el) => {
+      return !this.isDisabledElement(el) && !this.isHiddenElement(el);
+    };
+    this.setTabs = () => {
+      const gridHorizontalProperty = "gridColumn";
+      const gridVerticalProperty = "gridRow";
+      const gridProperty = this.isHorizontal() ? gridHorizontalProperty : gridVerticalProperty;
+      this.activeTabIndex = this.getActiveIndex();
+      this.showActiveIndicator = false;
+      this.tabs.forEach((tab, index) => {
+        if (tab.slot === "tab") {
+          const isActiveTab = this.activeTabIndex === index && this.isFocusableElement(tab);
+          if (this.activeindicator && this.isFocusableElement(tab)) {
+            this.showActiveIndicator = true;
+          }
+          const tabId = this.tabIds[index];
+          const tabpanelId = this.tabpanelIds[index];
+          tab.setAttribute("id", tabId);
+          tab.setAttribute("aria-selected", isActiveTab ? "true" : "false");
+          tab.setAttribute("aria-controls", tabpanelId);
+          tab.addEventListener("click", this.handleTabClick);
+          tab.addEventListener("keydown", this.handleTabKeyDown);
+          tab.setAttribute("tabindex", isActiveTab ? "0" : "-1");
+          if (isActiveTab) {
+            this.activetab = tab;
+            this.activeid = tabId;
+          }
+        }
+        tab.style[gridHorizontalProperty] = "";
+        tab.style[gridVerticalProperty] = "";
+        tab.style[gridProperty] = `${index + 1}`;
+        !this.isHorizontal() ? tab.classList.add("vertical") : tab.classList.remove("vertical");
+      });
+    };
+    this.setTabPanels = () => {
+      this.tabpanels.forEach((tabpanel, index) => {
+        const tabId = this.tabIds[index];
+        const tabpanelId = this.tabpanelIds[index];
+        tabpanel.setAttribute("id", tabpanelId);
+        tabpanel.setAttribute("aria-labelledby", tabId);
+        this.activeTabIndex !== index ? tabpanel.setAttribute("hidden", "") : tabpanel.removeAttribute("hidden");
+      });
+    };
+    this.handleTabClick = (event) => {
+      const selectedTab = event.currentTarget;
+      if (selectedTab.nodeType === 1 && this.isFocusableElement(selectedTab)) {
+        this.prevActiveTabIndex = this.activeTabIndex;
+        this.activeTabIndex = this.tabs.indexOf(selectedTab);
+        this.setComponent();
+      }
+    };
+    this.handleTabKeyDown = (event) => {
+      if (this.isHorizontal()) {
+        switch (event.key) {
+          case keyCodes$1.keyArrowLeft:
+            event.preventDefault();
+            this.adjustBackward(event);
+            break;
+          case keyCodes$1.keyArrowRight:
+            event.preventDefault();
+            this.adjustForward(event);
+            break;
+        }
+      } else {
+        switch (event.key) {
+          case keyCodes$1.keyArrowUp:
+            event.preventDefault();
+            this.adjustBackward(event);
+            break;
+          case keyCodes$1.keyArrowDown:
+            event.preventDefault();
+            this.adjustForward(event);
+            break;
+        }
+      }
+      switch (event.key) {
+        case keyCodes$1.keyHome:
+          event.preventDefault();
+          this.adjust(-this.activeTabIndex);
+          break;
+        case keyCodes$1.keyEnd:
+          event.preventDefault();
+          this.adjust(this.tabs.length - this.activeTabIndex - 1);
+          break;
+      }
+    };
+    this.adjustForward = (_) => {
+      this.#moveToNextTab(1);
+    };
+    this.adjustBackward = (_) => {
+      this.#moveToNextTab(-1);
+    };
+    this.moveToTabByIndex = (group, index) => {
+      const tab = group[index];
+      this.activetab = tab;
+      this.prevActiveTabIndex = this.activeTabIndex;
+      this.activeTabIndex = index;
+      tab.focus();
+      this.setComponent();
+    };
     this.scrollablePanel = false;
     this._actionItemsSlottedContent = [];
-    this.handleActiveIndicatorPosition = () => this.#handleActiveIndicatorPosition();
-    this.animateActiveIndicator = () => this.#animateActiveIndicator();
-  }
-  connotationChanged() {
-    this.#updateTabsConnotation();
   }
+  /**
+   * @internal
+   */
   orientationChanged() {
-    super.orientationChanged();
+    if (this.$fastController.isConnected) {
+      this.setTabs();
+      this.setTabPanels();
+      this.handleActiveIndicatorPosition();
+    }
     this.patchIndicatorStyleTransition();
     if (!this.activeIndicatorRef) return;
     if (this.orientation === TabsOrientation.vertical) {
       this.activeIndicatorRef.style.removeProperty(ACTIVE_TAB_WIDTH);
     }
   }
-  activeidChanged(oldValue, newValue) {
-    super.activeidChanged(oldValue, newValue);
+  /**
+   * @internal
+   */
+  activeidChanged(oldValue, _) {
+    if (this.$fastController.isConnected && this.tabs.length <= this.tabpanels.length) {
+      this.prevActiveTabIndex = this.tabs.findIndex(
+        (item) => item.id === oldValue
+      );
+      this.setTabs();
+      this.setTabPanels();
+      this.handleActiveIndicatorPosition();
+    }
     this.patchIndicatorStyleTransition();
     this.#updateTabsConnotation();
     this.#scrollToIndex(this.activeTabIndex);
   }
+  /**
+   * @internal
+   */
   tabsChanged() {
-    super.tabsChanged();
+    if (this.$fastController.isConnected && this.tabs.length <= this.tabpanels.length) {
+      this.tabIds = this.getTabIds();
+      this.tabpanelIds = this.getTabPanelIds();
+      this.setTabs();
+      this.setTabPanels();
+      this.handleActiveIndicatorPosition();
+    }
     this.patchIndicatorStyleTransition();
     this.#updateScrollStatus();
   }
-  #updateScrollStatus() {
-    this.tablist.parentElement.dispatchEvent(new Event("scroll"));
-  }
+  /**
+   * @internal
+   */
   tabpanelsChanged() {
-    super.tabpanelsChanged();
+    if (this.$fastController.isConnected && this.tabpanels.length <= this.tabs.length) {
+      this.tabIds = this.getTabIds();
+      this.tabpanelIds = this.getTabPanelIds();
+      this.setTabs();
+      this.setTabPanels();
+      this.handleActiveIndicatorPosition();
+    }
     this.patchIndicatorStyleTransition();
   }
+  getActiveIndex() {
+    const id = this.activeid;
+    if (id !== void 0) {
+      return this.tabIds.indexOf(this.activeid) === -1 ? 0 : this.tabIds.indexOf(this.activeid);
+    } else {
+      return 0;
+    }
+  }
+  getTabIds() {
+    return this.tabs.map((tab) => {
+      return tab.getAttribute("id") ?? `tab-${uniqueId()}`;
+    });
+  }
+  getTabPanelIds() {
+    return this.tabpanels.map((tabPanel) => {
+      return tabPanel.getAttribute("id") ?? `panel-${uniqueId()}`;
+    });
+  }
+  setComponent() {
+    if (this.activeTabIndex !== this.prevActiveTabIndex) {
+      this.activeid = this.tabIds[this.activeTabIndex];
+      this.focusTab();
+      this.change();
+    }
+  }
+  isHorizontal() {
+    return this.orientation === TabsOrientation.horizontal;
+  }
+  /**
+   * The adjust method for FASTTabs
+   * @public
+   * @remarks
+   * This method allows the active index to be adjusted by numerical increments
+   */
+  adjust(adjustment) {
+    const focusableTabs = this.tabs.filter((t) => this.isFocusableElement(t));
+    const currentActiveTabIndex = focusableTabs.indexOf(this.activetab);
+    const nextTabIndex = numbers.limit(
+      0,
+      focusableTabs.length - 1,
+      currentActiveTabIndex + adjustment
+    );
+    const nextIndex = this.tabs.indexOf(focusableTabs[nextTabIndex]);
+    if (nextIndex > -1) {
+      this.moveToTabByIndex(this.tabs, nextIndex);
+    }
+  }
+  #moveToNextTab(direction) {
+    const activeIndex = this.tabs.indexOf(this.activetab);
+    for (let offset = 1; offset < this.tabs.length; offset++) {
+      const index = (activeIndex + direction * offset + this.tabs.length) % this.tabs.length;
+      if (this.isFocusableElement(this.tabs[index])) {
+        this.moveToTabByIndex(this.tabs, index);
+        break;
+      }
+    }
+  }
+  focusTab() {
+    this.tabs[this.activeTabIndex].focus();
+  }
+  /**
+   * @internal
+   */
+  connotationChanged() {
+    this.#updateTabsConnotation();
+  }
+  #updateScrollStatus() {
+    this.tablist.parentElement.dispatchEvent(new Event("scroll"));
+  }
+  /**
+   * @internal
+   */
   patchIndicatorStyleTransition() {
     if (!this.activetab || !this.activeIndicatorRef) return;
     if (this.orientation === TabsOrientation.vertical || !this.showActiveIndicator)
@@ -441,6 +667,9 @@ class Tabs extends Tabs$1 {
   }
   connectedCallback() {
     super.connectedCallback();
+    this.tabIds = this.getTabIds();
+    this.tabpanelIds = this.getTabPanelIds();
+    this.activeTabIndex = this.getActiveIndex();
     requestAnimationFrame(() => this.#updateScrollStatus());
     const scrollWrapper = this.tablist.parentElement;
     this.#resizeObserver = new ResizeObserver(() => {
@@ -496,12 +725,12 @@ class Tabs extends Tabs$1 {
   #getTranslateProperty() {
     return this.isHorizontal() ? "translateX" : "translateY";
   }
-  #handleActiveIndicatorPosition() {
+  handleActiveIndicatorPosition() {
     if (this.showActiveIndicator && this.activeindicator) {
       this.animateActiveIndicator();
     }
   }
-  #animateActiveIndicator() {
+  animateActiveIndicator() {
     const offsetProperty = this.isHorizontal() ? "offsetLeft" : "offsetTop";
     const currentOffset = this.activeIndicatorRef[offsetProperty];
     const currentGridValue = this.activeIndicatorRef.style[this.#getGridProperty()];
@@ -523,6 +752,27 @@ class Tabs extends Tabs$1 {
     });
   }
 }
+__decorateClass([
+  index.attr
+], Tabs.prototype, "orientation");
+__decorateClass([
+  index.attr
+], Tabs.prototype, "activeid");
+__decorateClass([
+  index.observable
+], Tabs.prototype, "tabs");
+__decorateClass([
+  index.observable
+], Tabs.prototype, "tabpanels");
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], Tabs.prototype, "activeindicator");
+__decorateClass([
+  index.observable
+], Tabs.prototype, "activeIndicatorRef");
+__decorateClass([
+  index.observable
+], Tabs.prototype, "showActiveIndicator");
 __decorateClass([
   index.observable
 ], Tabs.prototype, "tablist");