@vonage/vivid 3.1.0 → 3.1.2

package/shared/definition43.js

@@ -1,282 +1,440 @@
-import { F as FoundationElement, _ as __decorate, a as attr, n as nullableNumberConverter, o as observable, b as __metadata, h as html, r as registerFactory } from './index.js';
-import { i as iconRegistries } from './definition3.js';
-import { f as focusRegistries } from './definition4.js';
-import './affix.js';
-import './focus.js';
-import { f as formElements, F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount, g as getFeedbackTemplate } from './form-elements.js';
-import { D as DelegatesARIATextbox } from './text-field2.js';
+import { F as FoundationElement, _ as __decorate, a as attr, o as observable, b as __metadata, h as html, r as registerFactory } from './index.js';
+import { t as tabRegistries } from './definition41.js';
+import { t as tabPanelRegistries } from './definition42.js';
+import { S as StartEnd } from './start-end.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { F as FormAssociated } from './form-associated.js';
-import { f as focusTemplateFactory } from './focus2.js';
+import { h as keyArrowRight, i as keyArrowLeft, b as keyArrowDown, c as keyArrowUp, k as keyEnd, a as keyHome } from './key-codes.js';
+import { u as uniqueId } from './strings.js';
+import { w as wrapInBounds } from './numbers.js';
+import { s as slotted } from './slotted.js';
 import { w as when } from './when.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
-class _TextArea extends FoundationElement {
-}
-/**
- * A form-associated base class for the {@link @microsoft/fast-foundation#(TextArea:class)} component.
- *
- * @internal
- */
-class FormAssociatedTextArea extends FormAssociated(_TextArea) {
-    constructor() {
-        super(...arguments);
-        this.proxy = document.createElement("textarea");
-    }
-}
-
 /**
- * Resize mode for a TextArea
+ * The orientation of the {@link @microsoft/fast-foundation#(Tabs:class)} component
  * @public
  */
-const TextAreaResize = {
-    /**
-     * No resize.
-     */
-    none: "none",
-    /**
-     * Resize vertically and horizontally.
-     */
-    both: "both",
-    /**
-     * Resize horizontally.
-     */
-    horizontal: "horizontal",
-    /**
-     * Resize vertically.
-     */
+const TabsOrientation = {
     vertical: "vertical",
+    horizontal: "horizontal",
 };
-
 /**
- * A Text Area Custom HTML Element.
- * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea | <textarea> element }.
+ * A Tabs Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#tablist | ARIA tablist }.
  *
- * @slot - The default slot for the label
- * @csspart label - The label
- * @csspart root - The element wrapping the control
- * @csspart control - The textarea element
- * @fires change - Emits a custom 'change' event when the textarea emits a change event
+ * @slot start - Content which can be provided before the tablist element
+ * @slot end - Content which can be provided after the tablist element
+ * @slot tab - The slot for tabs
+ * @slot tabpanel - The slot for tabpanels
+ * @csspart tablist - The element wrapping for the tabs
+ * @csspart tab - The tab slot
+ * @csspart activeIndicator - The visual indicator
+ * @csspart tabpanel - The tabpanel slot
+ * @fires change - Fires a custom 'change' event when a tab is clicked or during keyboard navigation
  *
  * @public
  */
-class TextArea$1 extends FormAssociatedTextArea {
+class Tabs$1 extends FoundationElement {
     constructor() {
         super(...arguments);
         /**
-         * The resize mode of the element.
+         * The orientation
          * @public
          * @remarks
-         * HTML Attribute: resize
+         * HTML Attribute: orientation
          */
-        this.resize = TextAreaResize.none;
+        this.orientation = TabsOrientation.horizontal;
         /**
-         * Sizes the element horizontally by a number of character columns.
-         *
+         * Whether or not to show the active indicator
          * @public
          * @remarks
-         * HTML Attribute: cols
+         * HTML Attribute: activeindicator
          */
-        this.cols = 20;
+        this.activeindicator = true;
         /**
          * @internal
          */
-        this.handleTextInput = () => {
-            this.value = this.control.value;
+        this.showActiveIndicator = true;
+        this.prevActiveTabIndex = 0;
+        this.activeTabIndex = 0;
+        this.ticking = false;
+        this.change = () => {
+            this.$emit("change", this.activetab);
         };
+        this.isDisabledElement = (el) => {
+            return el.getAttribute("aria-disabled") === "true";
+        };
+        this.isFocusableElement = (el) => {
+            return !this.isDisabledElement(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;
+                    }
+                }
+                // If the original property isn't emptied out,
+                // the next set will morph into a grid-area style setting that is not what we want
+                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 keyArrowLeft:
+                        event.preventDefault();
+                        this.adjustBackward(event);
+                        break;
+                    case keyArrowRight:
+                        event.preventDefault();
+                        this.adjustForward(event);
+                        break;
+                }
+            }
+            else {
+                switch (event.key) {
+                    case keyArrowUp:
+                        event.preventDefault();
+                        this.adjustBackward(event);
+                        break;
+                    case keyArrowDown:
+                        event.preventDefault();
+                        this.adjustForward(event);
+                        break;
+                }
+            }
+            switch (event.key) {
+                case keyHome:
+                    event.preventDefault();
+                    this.adjust(-this.activeTabIndex);
+                    break;
+                case keyEnd:
+                    event.preventDefault();
+                    this.adjust(this.tabs.length - this.activeTabIndex - 1);
+                    break;
+            }
+        };
+        this.adjustForward = (e) => {
+            const group = this.tabs;
+            let index = 0;
+            index = this.activetab ? group.indexOf(this.activetab) + 1 : 1;
+            if (index === group.length) {
+                index = 0;
+            }
+            while (index < group.length && group.length > 1) {
+                if (this.isFocusableElement(group[index])) {
+                    this.moveToTabByIndex(group, index);
+                    break;
+                }
+                else if (this.activetab && index === group.indexOf(this.activetab)) {
+                    break;
+                }
+                else if (index + 1 >= group.length) {
+                    index = 0;
+                }
+                else {
+                    index += 1;
+                }
+            }
+        };
+        this.adjustBackward = (e) => {
+            const group = this.tabs;
+            let index = 0;
+            index = this.activetab ? group.indexOf(this.activetab) - 1 : 0;
+            index = index < 0 ? group.length - 1 : index;
+            while (index >= 0 && group.length > 1) {
+                if (this.isFocusableElement(group[index])) {
+                    this.moveToTabByIndex(group, index);
+                    break;
+                }
+                else if (index - 1 < 0) {
+                    index = group.length - 1;
+                }
+                else {
+                    index -= 1;
+                }
+            }
+        };
+        this.moveToTabByIndex = (group, index) => {
+            const tab = group[index];
+            this.activetab = tab;
+            this.prevActiveTabIndex = this.activeTabIndex;
+            this.activeTabIndex = index;
+            tab.focus();
+            this.setComponent();
+        };
+    }
+    /**
+     * @internal
+     */
+    orientationChanged() {
+        if (this.$fastController.isConnected) {
+            this.setTabs();
+            this.setTabPanels();
+            this.handleActiveIndicatorPosition();
+        }
     }
-    readOnlyChanged() {
-        if (this.proxy instanceof HTMLTextAreaElement) {
-            this.proxy.readOnly = this.readOnly;
+    /**
+     * @internal
+     */
+    activeidChanged(oldValue, newValue) {
+        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();
         }
     }
-    autofocusChanged() {
-        if (this.proxy instanceof HTMLTextAreaElement) {
-            this.proxy.autofocus = this.autofocus;
+    /**
+     * @internal
+     */
+    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();
         }
     }
-    listChanged() {
-        if (this.proxy instanceof HTMLTextAreaElement) {
-            this.proxy.setAttribute("list", this.list);
+    /**
+     * @internal
+     */
+    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();
         }
     }
-    maxlengthChanged() {
-        if (this.proxy instanceof HTMLTextAreaElement) {
-            this.proxy.maxLength = this.maxlength;
+    getActiveIndex() {
+        const id = this.activeid;
+        if (id !== undefined) {
+            return this.tabIds.indexOf(this.activeid) === -1
+                ? 0
+                : this.tabIds.indexOf(this.activeid);
         }
+        else {
+            return 0;
+        }
+    }
+    getTabIds() {
+        return this.tabs.map((tab) => {
+            var _a;
+            return (_a = tab.getAttribute("id")) !== null && _a !== void 0 ? _a : `tab-${uniqueId()}`;
+        });
     }
-    minlengthChanged() {
-        if (this.proxy instanceof HTMLTextAreaElement) {
-            this.proxy.minLength = this.minlength;
+    getTabPanelIds() {
+        return this.tabpanels.map((tabPanel) => {
+            var _a;
+            return (_a = tabPanel.getAttribute("id")) !== null && _a !== void 0 ? _a : `panel-${uniqueId()}`;
+        });
+    }
+    setComponent() {
+        if (this.activeTabIndex !== this.prevActiveTabIndex) {
+            this.activeid = this.tabIds[this.activeTabIndex];
+            this.focusTab();
+            this.change();
         }
     }
-    spellcheckChanged() {
-        if (this.proxy instanceof HTMLTextAreaElement) {
-            this.proxy.spellcheck = this.spellcheck;
+    isHorizontal() {
+        return this.orientation === TabsOrientation.horizontal;
+    }
+    handleActiveIndicatorPosition() {
+        // Ignore if we click twice on the same tab
+        if (this.showActiveIndicator &&
+            this.activeindicator &&
+            this.activeTabIndex !== this.prevActiveTabIndex) {
+            if (this.ticking) {
+                this.ticking = false;
+            }
+            else {
+                this.ticking = true;
+                this.animateActiveIndicator();
+            }
         }
     }
+    animateActiveIndicator() {
+        this.ticking = true;
+        const gridProperty = this.isHorizontal() ? "gridColumn" : "gridRow";
+        const translateProperty = this.isHorizontal()
+            ? "translateX"
+            : "translateY";
+        const offsetProperty = this.isHorizontal() ? "offsetLeft" : "offsetTop";
+        const prev = this.activeIndicatorRef[offsetProperty];
+        this.activeIndicatorRef.style[gridProperty] = `${this.activeTabIndex + 1}`;
+        const next = this.activeIndicatorRef[offsetProperty];
+        this.activeIndicatorRef.style[gridProperty] = `${this.prevActiveTabIndex + 1}`;
+        const dif = next - prev;
+        this.activeIndicatorRef.style.transform = `${translateProperty}(${dif}px)`;
+        this.activeIndicatorRef.classList.add("activeIndicatorTransition");
+        this.activeIndicatorRef.addEventListener("transitionend", () => {
+            this.ticking = false;
+            this.activeIndicatorRef.style[gridProperty] = `${this.activeTabIndex + 1}`;
+            this.activeIndicatorRef.style.transform = `${translateProperty}(0px)`;
+            this.activeIndicatorRef.classList.remove("activeIndicatorTransition");
+        });
+    }
     /**
-     * Selects all the text in the text area
-     *
+     * The adjust method for FASTTabs
      * @public
+     * @remarks
+     * This method allows the active index to be adjusted by numerical increments
      */
-    select() {
-        this.control.select();
-        /**
-         * The select event does not permeate the shadow DOM boundary.
-         * This fn effectively proxies the select event,
-         * emitting a `select` event whenever the internal
-         * control emits a `select` event
-         */
-        this.$emit("select");
+    adjust(adjustment) {
+        this.prevActiveTabIndex = this.activeTabIndex;
+        this.activeTabIndex = wrapInBounds(0, this.tabs.length - 1, this.activeTabIndex + adjustment);
+        this.setComponent();
+    }
+    focusTab() {
+        this.tabs[this.activeTabIndex].focus();
     }
     /**
-     * Change event handler for inner control.
-     * @remarks
-     * "Change" events are not `composable` so they will not
-     * permeate the shadow DOM boundary. This fn effectively proxies
-     * the change event, emitting a `change` event whenever the internal
-     * control emits a `change` event
      * @internal
      */
-    handleChange() {
-        this.$emit("change");
-    }
-    /** {@inheritDoc (FormAssociated:interface).validate} */
-    validate() {
-        super.validate(this.control);
+    connectedCallback() {
+        super.connectedCallback();
+        this.tabIds = this.getTabIds();
+        this.tabpanelIds = this.getTabPanelIds();
+        this.activeTabIndex = this.getActiveIndex();
     }
 }
-__decorate([
-    attr({ mode: "boolean" })
-], TextArea$1.prototype, "readOnly", void 0);
-__decorate([
-    attr
-], TextArea$1.prototype, "resize", void 0);
-__decorate([
-    attr({ mode: "boolean" })
-], TextArea$1.prototype, "autofocus", void 0);
-__decorate([
-    attr({ attribute: "form" })
-], TextArea$1.prototype, "formId", void 0);
-__decorate([
-    attr
-], TextArea$1.prototype, "list", void 0);
-__decorate([
-    attr({ converter: nullableNumberConverter })
-], TextArea$1.prototype, "maxlength", void 0);
-__decorate([
-    attr({ converter: nullableNumberConverter })
-], TextArea$1.prototype, "minlength", void 0);
 __decorate([
     attr
-], TextArea$1.prototype, "name", void 0);
+], Tabs$1.prototype, "orientation", void 0);
 __decorate([
     attr
-], TextArea$1.prototype, "placeholder", void 0);
+], Tabs$1.prototype, "activeid", void 0);
 __decorate([
-    attr({ converter: nullableNumberConverter, mode: "fromView" })
-], TextArea$1.prototype, "cols", void 0);
+    observable
+], Tabs$1.prototype, "tabs", void 0);
 __decorate([
-    attr({ converter: nullableNumberConverter, mode: "fromView" })
-], TextArea$1.prototype, "rows", void 0);
+    observable
+], Tabs$1.prototype, "tabpanels", void 0);
 __decorate([
     attr({ mode: "boolean" })
-], TextArea$1.prototype, "spellcheck", void 0);
+], Tabs$1.prototype, "activeindicator", void 0);
 __decorate([
     observable
-], TextArea$1.prototype, "defaultSlottedNodes", void 0);
-applyMixins(TextArea$1, DelegatesARIATextbox);
+], Tabs$1.prototype, "activeIndicatorRef", void 0);
+__decorate([
+    observable
+], Tabs$1.prototype, "showActiveIndicator", void 0);
+applyMixins(Tabs$1, StartEnd);
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Fri, 03 Feb 2023 15:57:56 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  display: inline-grid;\n  width: 100%;\n  gap: 4px;\n  grid-template-columns: 1fr max-content;\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success-500);\n  --_connotation-color-backdrop: var(--vvd-color-success-50);\n  --_connotation-color-intermediate: var(--vvd-color-success-500);\n  --_connotation-color-firm: var(--vvd-color-success-600);\n  --_connotation-color-faint: var(--vvd-color-success-50);\n  --_connotation-color-soft: var(--vvd-color-success-100);\n}\n.base.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert-500);\n  --_connotation-color-backdrop: var(--vvd-color-alert-50);\n  --_connotation-color-intermediate: var(--vvd-color-alert-500);\n  --_connotation-color-firm: var(--vvd-color-alert-600);\n  --_connotation-color-faint: var(--vvd-color-alert-50);\n  --_connotation-color-soft: var(--vvd-color-alert-100);\n}\n.base:not(.connotation-success, .connotation-alert) {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-backdrop: var(--vvd-color-canvas);\n  --_connotation-color-intermediate: var(--vvd-color-neutral-500);\n  --_connotation-color-firm: var(--vvd-color-canvas-text);\n  --_connotation-color-faint: var(--vvd-color-neutral-50);\n  --_connotation-color-soft: var(--vvd-color-neutral-100);\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n  --_low-ink-color: var(--_appearance-color-text);\n  pointer-events: none;\n}\n\n.label {\n  color: var(--vvd-color-canvas-text);\n  contain: inline-size;\n  font: var(--vvd-typography-base);\n  grid-column: 1/3;\n  grid-row: 1;\n  line-height: 20px;\n}\n\n.fieldset {\n  position: relative;\n  display: flex;\n  align-items: center;\n  border-radius: 6px;\n  grid-column: 1/3;\n}\n\n.control {\n  width: 100%;\n  padding: 8px 16px;\n  border: 0 none;\n  background-color: var(--_appearance-color-fill);\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n  min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  transition: box-shadow 0.2s, background-color 0.2s, color 0.2s;\n}\n.control:disabled {\n  cursor: not-allowed;\n  opacity: 1; /* 2. correct opacity on iOS */\n  pointer-events: none;\n  -webkit-text-fill-color: var(--_appearance-color-text); /* 1. sets text fill to current `color` for safari */\n}\n.control::placeholder, .control:disabled::placeholder {\n  opacity: 1; /* 2. correct opacity on iOS */\n  pointer-events: none;\n  -webkit-text-fill-color: var(--_low-ink-color); /* 1. sets text fill to current `color` for safari */\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  pointer-events: none;\n}\n.fieldset:not(:focus-visible, :focus-within) > .focus-indicator {\n  display: none;\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 15 Feb 2023 11:31:49 GMT\n */\n.base {\n  display: grid;\n  box-sizing: border-box;\n}\n.base {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-neutral-800);\n  --_connotation-color-faint: var(--vvd-color-neutral-50);\n  --_connotation-color-soft: var(--vvd-color-neutral-100);\n}\n.base.orientation-vertical {\n  grid-template-columns: auto 1fr;\n  grid-template-rows: 1fr;\n}\n.base:not(.orientation-vertical) {\n  grid-template-columns: 1fr;\n  grid-template-rows: auto 1fr;\n}\n\n.tablist {\n  --_tabs-tablist-gutter: 8px;\n  --_tabs-active-indicator-stroke-width: 2px;\n  position: relative;\n  display: grid;\n  box-sizing: border-box;\n  padding: var(--_tabs-tablist-gutter);\n  gap: var(--_tabs-tablist-gutter);\n}\n.base.orientation-vertical .tablist {\n  box-shadow: 1px 0 0 0 var(--vvd-color-neutral-300);\n  grid-row: 1/2;\n  grid-template-columns: auto 1fr;\n  grid-template-rows: auto;\n  inline-size: 100%;\n  place-self: flex-start end;\n}\n.base:not(.orientation-vertical) .tablist {\n  align-self: end;\n  justify-content: flex-start;\n  border-bottom: 1px solid var(--vvd-color-neutral-300);\n  grid-auto-flow: column;\n  grid-template-columns: auto;\n  grid-template-rows: auto auto;\n  inline-size: 100%;\n}\n\n.active-indicator {\n  background: currentColor;\n  margin-inline-start: calc(var(--_tabs-tablist-gutter) * -1);\n}\n.base.orientation-vertical .active-indicator {\n  align-self: center;\n  block-size: 80%;\n  grid-area: 2/1/auto/auto;\n  inline-size: var(--_tabs-active-indicator-stroke-width);\n}\n.base:not(.orientation-vertical) .active-indicator {\n  position: absolute;\n  z-index: 1;\n  block-size: var(--_tabs-active-indicator-stroke-width);\n  grid-column: 1/auto;\n  inline-size: var(--_tabs-active-tab-inline-size);\n  inset-block-end: 0;\n  inset-inline-start: 0;\n  justify-self: center;\n  padding-inline: var(--_tabs-tablist-gutter);\n}\n\n.activeIndicatorTransition {\n  transition: transform 0.2s ease-out 0s, inline-size 0.2s ease-out 0s;\n}\n\n.base:not(.orientation-vertical) .active-indicator:not(.activeIndicatorTransition) {\n  opacity: 0;\n}";
 
-let TextArea = class TextArea extends TextArea$1 {};
-__decorate([attr, __metadata("design:type", String)], TextArea.prototype, "wrap", void 0);
-TextArea = __decorate([formElements], TextArea);
-applyMixins(TextArea, FormElementCharCount, FormElementHelperText, FormElementSuccessText);
+const ACTIVE_TAB_WIDTH = '--_tabs-active-tab-inline-size';
+class Tabs extends Tabs$1 {
+  orientationChanged() {
+    super.orientationChanged();
+    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);
+    this.patchIndicatorStyleTransition();
+  }
+  tabsChanged() {
+    super.tabsChanged();
+    this.patchIndicatorStyleTransition();
+  }
+  tabpanelsChanged() {
+    super.tabpanelsChanged();
+    this.patchIndicatorStyleTransition();
+  }
+  patchIndicatorStyleTransition() {
+    if (!this.activetab || !this.activeIndicatorRef) return;
+    if (this.orientation === TabsOrientation.vertical || !this.showActiveIndicator) return;
+    const width = this.activetab.getBoundingClientRect().width;
+    this.activeIndicatorRef.style.setProperty(ACTIVE_TAB_WIDTH, `${width}px`);
+  }
+}
+__decorate([observable, __metadata("design:type", HTMLElement)], Tabs.prototype, "tablist", void 0);
 
 let _ = t => t,
   _t,
   _t2;
 const getClasses = ({
-  value,
-  errorValidationMessage,
-  disabled,
-  placeholder,
-  readOnly,
-  successText
-}) => classNames('base', ['readonly', readOnly], ['placeholder', Boolean(placeholder)], ['disabled', disabled], ['error connotation-alert', Boolean(errorValidationMessage)], ['has-value', Boolean(value)], ['success connotation-success', !!successText]);
-function renderLabel() {
+  orientation
+}) => classNames('base', [`orientation-${orientation}`, Boolean(orientation)]);
+function TabsTemplate() {
   return html(_t || (_t = _`
-	  <label for="control" class="label">
-		  ${0}
-	  </label>`), x => x.label);
-}
-const TextAreaTemplate = context => {
-  const focusTemplate = focusTemplateFactory(context);
-  return html(_t2 || (_t2 = _`
-	  <div class="${0}">
-		  ${0}
-		  <div class="fieldset">
-			<textarea class="control"
-				?autofocus="${0}"
-				placeholder="${0}"
-				name="${0}"
-				maxlength="${0}"
-				rows="${0}"
-				cols="${0}"
-				wrap="${0}"
-				?readonly="${0}"
-				?disabled="${0}"
-				?required="${0}"
-				?spellcheck="${0}"
-				:value="${0}"
-				aria-atomic="${0}"
-				aria-busy="${0}"
-				aria-controls="${0}"
-				aria-current="${0}"
-				aria-describedby="${0}"
-				aria-details="${0}"
-				aria-disabled="${0}"
-				aria-errormessage="${0}"
-				aria-flowto="${0}"
-				aria-haspopup="${0}"
-				aria-hidden="${0}"
-				aria-invalid="${0}"
-				aria-keyshortcuts="${0}"
-				aria-label="${0}"
-				aria-labelledby="${0}"
-				aria-live="${0}"
-				aria-owns="${0}"
-				aria-relevant="${0}"
-				aria-roledescription="${0}"
-				@input="${0}"
-				@change="${0}"
+	<template role="tablist">
+		<div class="${0}">
+			<div class="tablist" ${0}>
+				<slot name="tab" ${0}></slot>
 				${0}
-	  >
-			</textarea>
-			  ${0}
-		  </div>
-		${0}
-		${0}
-		${0}
-	  </div>
-	`), getClasses, when(x => x.label, renderLabel()), x => x.autofocus, x => x.placeholder ? x.placeholder : null, x => x.name ? x.name : null, x => x.maxlength ? x.maxlength : null, x => x.rows ? x.rows : null, x => x.cols ? x.cols : null, x => x.wrap ? x.wrap : null, x => x.readOnly, x => x.disabled, x => x.required, x => x.spellcheck, x => x.value, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaRelevant, x => x.ariaRoledescription, x => x.handleTextInput(), x => x.handleChange(), ref('control'), () => focusTemplate, when(x => {
-    var _a;
-    return !x.successText && !x.errorValidationMessage && ((_a = x.helperText) === null || _a === void 0 ? void 0 : _a.length);
-  }, getFeedbackTemplate('helper', context)), when(x => !x.successText && x.errorValidationMessage, getFeedbackTemplate('error', context)), when(x => x.successText, getFeedbackTemplate('success', context)));
-};
+			</div>
+			<div class="tabpanel">
+				<slot name="tabpanel" ${0}></slot>
+			</div>
+		</div>
+	</template>
+    `), getClasses, ref('tablist'), slotted('tabs'), when(x => x.showActiveIndicator, html(_t2 || (_t2 = _`
+					<div ${0} class="active-indicator"></div>
+				`), ref('activeIndicatorRef'))), slotted('tabpanels'));
+}
 
-const textAreaDefinition = TextArea.compose({
-  baseName: 'text-area',
-  template: TextAreaTemplate,
-  styles: css_248z,
-  shadowOptions: {
-    delegatesFocus: true
-  }
+const tabsDefinition = Tabs.compose({
+  baseName: 'tabs',
+  template: TabsTemplate,
+  styles: css_248z
 });
-const textAreaRegistries = [textAreaDefinition(), ...iconRegistries, ...focusRegistries];
-const registerTextArea = registerFactory(textAreaRegistries);
+const tabsRegistries = [tabsDefinition(), ...tabRegistries, ...tabPanelRegistries];
+const registerTabs = registerFactory(tabsRegistries);
 
-export { textAreaRegistries as a, registerTextArea as r, textAreaDefinition as t };
+export { tabsRegistries as a, registerTabs as r, tabsDefinition as t };