@vonage/vivid 4.14.2 → 4.14.3

package/shared/definition51.js

@@ -1,409 +1,14 @@
 import { t as tabDefinition } from './definition50.js';
 import { t as tabPanelDefinition } from './definition49.js';
-import { a as attr, o as observable, V as VividElement, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
-import { i as keyArrowRight$1, h as keyArrowLeft$1, f as keyArrowDown$1, e as keyArrowUp$1, d as keyEnd$1, g as keyHome$1 } from './key-codes.js';
-import { _ as __decorate, F as FoundationElement } from './foundation-element.js';
-import { S as StartEnd } from './start-end.js';
-import { a as applyMixins } from './apply-mixins2.js';
-import { a as keyArrowRight, b as keyArrowLeft, c as keyArrowDown, d as keyArrowUp, e as keyEnd, f as keyHome } from './key-codes2.js';
-import { u as uniqueId$1 } from './strings.js';
-import { l as limit$1 } from './numbers.js';
+import { V as VividElement, a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { i as keyArrowRight, h as keyArrowLeft, f as keyArrowDown, e as keyArrowUp, 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 { r as ref } from './ref.js';
 import { s as slotted } from './slotted.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-/**
- * This method keeps a given value within the bounds of a min and max value. If the value
- * is larger than the max, the minimum value will be returned. If the value is smaller than the minimum,
- * the maximum will be returned. Otherwise, the value is returned un-changed.
- */
-/**
- * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
- * If value is greater than max, max will be returned.
- */
-function limit(min, max, value) {
-    return Math.min(Math.max(value, min), max);
-}
-
-let uniqueIdCounter = 0;
-/**
- * Generates a unique ID based on incrementing a counter.
- */
-function uniqueId(prefix = "") {
-    return `${prefix}${uniqueIdCounter++}`;
-}
-
-/**
- * The orientation of the {@link @microsoft/fast-foundation#(Tabs:class)} component
- * @public
- */
-const TabsOrientation = {
-    vertical: "vertical",
-    horizontal: "horizontal",
-};
-/**
- * A Tabs Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#tablist | ARIA tablist }.
- *
- * @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
- */
-let Tabs$1 = class Tabs extends FoundationElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The orientation
-         * @public
-         * @remarks
-         * HTML Attribute: orientation
-         */
-        this.orientation = TabsOrientation.horizontal;
-        /**
-         * Whether or not to show the active indicator
-         * @public
-         * @remarks
-         * HTML Attribute: activeindicator
-         */
-        this.activeindicator = true;
-        /**
-         * @internal
-         */
-        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.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;
-                    }
-                }
-                // 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();
-        }
-    }
-    /**
-     * @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();
-        }
-    }
-    /**
-     * @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();
-        }
-    }
-    /**
-     * @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();
-        }
-    }
-    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()}`;
-        });
-    }
-    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();
-        }
-    }
-    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");
-        });
-    }
-    /**
-     * 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 = 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) {
-            this.moveToTabByIndex(this.tabs, nextIndex);
-        }
-    }
-    focusTab() {
-        this.tabs[this.activeTabIndex].focus();
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        this.tabIds = this.getTabIds();
-        this.tabpanelIds = this.getTabPanelIds();
-        this.activeTabIndex = this.getActiveIndex();
-    }
-};
-__decorate([
-    attr
-], Tabs$1.prototype, "orientation", void 0);
-__decorate([
-    attr
-], Tabs$1.prototype, "activeid", void 0);
-__decorate([
-    observable
-], Tabs$1.prototype, "tabs", void 0);
-__decorate([
-    observable
-], Tabs$1.prototype, "tabpanels", void 0);
-__decorate([
-    attr({ mode: "boolean" })
-], Tabs$1.prototype, "activeindicator", void 0);
-__decorate([
-    observable
-], Tabs$1.prototype, "activeIndicatorRef", void 0);
-__decorate([
-    observable
-], Tabs$1.prototype, "showActiveIndicator", void 0);
-applyMixins(Tabs$1, StartEnd);
-
 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.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;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);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-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}.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-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-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/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;
@@ -417,6 +22,10 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 const ACTIVE_TAB_WIDTH = "--_tabs-active-tab-inline-size";
 const TABLIST_COLUMN = "--_tabs-tablist-column";
+const TabsOrientation = {
+  vertical: "vertical",
+  horizontal: "horizontal"
+};
 class Tabs extends VividElement {
   constructor() {
     super(...arguments);
@@ -508,33 +117,33 @@ class Tabs extends VividElement {
     this.#handleTabKeyDown = (event) => {
       if (this.#isHorizontal()) {
         switch (event.key) {
-          case keyArrowLeft$1:
+          case keyArrowLeft:
             event.preventDefault();
             this.adjustBackward(event);
             break;
-          case keyArrowRight$1:
+          case keyArrowRight:
             event.preventDefault();
             this.adjustForward(event);
             break;
         }
       } else {
         switch (event.key) {
-          case keyArrowUp$1:
+          case keyArrowUp:
             event.preventDefault();
             this.adjustBackward(event);
             break;
-          case keyArrowDown$1:
+          case keyArrowDown:
             event.preventDefault();
             this.adjustForward(event);
             break;
         }
       }
       switch (event.key) {
-        case keyHome$1:
+        case keyHome:
           event.preventDefault();
           this.adjust(-this.activeTabIndex);
           break;
-        case keyEnd$1:
+        case keyEnd:
           event.preventDefault();
           this.adjust(this.tabs.length - this.activeTabIndex - 1);
           break;
@@ -630,12 +239,12 @@ class Tabs extends VividElement {
   }
   getTabIds() {
     return this.tabs.map((tab) => {
-      return tab.getAttribute("id") ?? `tab-${uniqueId$1()}`;
+      return tab.getAttribute("id") ?? `tab-${uniqueId()}`;
     });
   }
   getTabPanelIds() {
     return this.tabpanels.map((tabPanel) => {
-      return tabPanel.getAttribute("id") ?? `panel-${uniqueId$1()}`;
+      return tabPanel.getAttribute("id") ?? `panel-${uniqueId()}`;
     });
   }
   setComponent() {
@@ -656,7 +265,7 @@ class Tabs extends VividElement {
   adjust(adjustment) {
     const focusableTabs = this.tabs.filter((t) => this.isFocusableElement(t));
     const currentActiveTabIndex = focusableTabs.indexOf(this.activetab);
-    const nextTabIndex = limit$1(
+    const nextTabIndex = limit(
       0,
       focusableTabs.length - 1,
       currentActiveTabIndex + adjustment

package/shared/definition54.js

@@ -1,5 +1,5 @@
 import { i as iconDefinition } from './definition27.js';
-import { V as VividElement, a as attr, n as nullableNumberConverter, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { V as VividElement, a as attr, o as observable, n as nullableNumberConverter, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { R as Reflector, D as DelegatesARIATextbox } from './text-field2.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { F as FormAssociated } from './form-associated.js';

package/shared/definition56.js

@@ -1,7 +1,7 @@
 import { t as textFieldDefinition } from './definition55.js';
 import { P as Popup, p as popupDefinition } from './definition63.js';
 import { B as Button, b as buttonDefinition } from './definition11.js';
-import { V as VividElement, O as Observable, i as defaultExecutionContext, D as DOM, a as attr, n as nullableNumberConverter, v as volatile, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { V as VividElement, O as Observable, i as defaultExecutionContext, D as DOM, a as attr, v as volatile, o as observable, n as nullableNumberConverter, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { h as handleEscapeKeyAndStopPropogation } from './index.js';
 import { s as scrollIntoView } from './scrollIntoView.js';

package/shared/direction.cjs

@@ -9,23 +9,9 @@ exports.Direction = void 0;
     Direction["rtl"] = "rtl";
 })(exports.Direction || (exports.Direction = {}));
 
-/**
- * Expose ltr and rtl strings
- */
-var Direction;
-(function (Direction) {
-    Direction["ltr"] = "ltr";
-    Direction["rtl"] = "rtl";
-})(Direction || (Direction = {}));
-
-/**
- * a method to determine the current localization direction of the view
- * @param rootNode - the HTMLElement to begin the query from, usually "this" when used in a component controller
- * @public
- */
 const getDirection = (rootNode) => {
-    const dirNode = rootNode.closest("[dir]");
-    return dirNode !== null && dirNode.dir === "rtl" ? Direction.rtl : Direction.ltr;
+  const dirNode = rootNode.closest("[dir]");
+  return dirNode !== null && dirNode.dir === "rtl" ? exports.Direction.rtl : exports.Direction.ltr;
 };
 
 exports.getDirection = getDirection;

package/shared/direction.js

@@ -1,12 +1,3 @@
-/**
- * Expose ltr and rtl strings
- */
-var Direction$1;
-(function (Direction) {
-    Direction["ltr"] = "ltr";
-    Direction["rtl"] = "rtl";
-})(Direction$1 || (Direction$1 = {}));
-
 /**
  * Expose ltr and rtl strings
  */
@@ -16,14 +7,9 @@ var Direction;
     Direction["rtl"] = "rtl";
 })(Direction || (Direction = {}));
 
-/**
- * a method to determine the current localization direction of the view
- * @param rootNode - the HTMLElement to begin the query from, usually "this" when used in a component controller
- * @public
- */
 const getDirection = (rootNode) => {
-    const dirNode = rootNode.closest("[dir]");
-    return dirNode !== null && dirNode.dir === "rtl" ? Direction.rtl : Direction.ltr;
+  const dirNode = rootNode.closest("[dir]");
+  return dirNode !== null && dirNode.dir === "rtl" ? Direction.rtl : Direction.ltr;
 };
 
-export { Direction$1 as D, getDirection as g };
+export { Direction as D, getDirection as g };

package/shared/foundation/utilities/direction.d.ts

@@ -0,0 +1,2 @@
+import { Direction } from '@microsoft/fast-web-utilities';
+export declare const getDirection: (rootNode: HTMLElement) => Direction;

package/shared/listbox.cjs

@@ -4,7 +4,6 @@ const option = require('./option.cjs');
 const vividElement = require('./vivid-element.cjs');
 const keyCodes = require('./key-codes.cjs');
 const strings = require('./strings.cjs');
-const applyMixins = require('./apply-mixins2.cjs');
 const ariaGlobal = require('./aria-global.cjs');
 
 /**
@@ -23,6 +22,26 @@ function findLastIndex(array, predicate) {
     return -1;
 }
 
+/**
+ * Apply mixins to a constructor.
+ * Sourced from {@link https://www.typescriptlang.org/docs/handbook/mixins.html | TypeScript Documentation }.
+ * @public
+ */
+function applyMixins(derivedCtor, ...baseCtors) {
+    const derivedAttributes = vividElement.AttributeConfiguration.locate(derivedCtor);
+    baseCtors.forEach(baseCtor => {
+        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
+            if (name !== "constructor") {
+                Object.defineProperty(derivedCtor.prototype, name, 
+                /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+                Object.getOwnPropertyDescriptor(baseCtor.prototype, name));
+            }
+        });
+        const baseAttributes = vividElement.AttributeConfiguration.locate(baseCtor);
+        baseAttributes.forEach(x => derivedAttributes.push(x));
+    });
+}
+
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0 ;
@@ -490,7 +509,7 @@ __decorateClass([
 __decorateClass([
   vividElement.observable
 ], DelegatesARIAListbox.prototype, "ariaMultiSelectable");
-applyMixins.applyMixins(DelegatesARIAListbox, ariaGlobal.ARIAGlobalStatesAndProperties);
-applyMixins.applyMixins(Listbox, DelegatesARIAListbox);
+applyMixins(DelegatesARIAListbox, ariaGlobal.ARIAGlobalStatesAndProperties);
+applyMixins(Listbox, DelegatesARIAListbox);
 
 exports.Listbox = Listbox;

package/shared/listbox.js

@@ -1,8 +1,7 @@
 import { i as isListboxOption } from './option.js';
-import { V as VividElement, O as Observable, a as attr, o as observable } from './vivid-element.js';
+import { A as AttributeConfiguration, V as VividElement, O as Observable, a as attr, o as observable } from './vivid-element.js';
 import { a as keySpace, b as keyEscape, k as keyEnter, c as keyTab, d as keyEnd, e as keyArrowUp, f as keyArrowDown, g as keyHome } from './key-codes.js';
 import { u as uniqueId } from './strings.js';
-import { a as applyMixins } from './apply-mixins2.js';
 import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
 
 /**
@@ -21,6 +20,26 @@ function findLastIndex(array, predicate) {
     return -1;
 }
 
+/**
+ * Apply mixins to a constructor.
+ * Sourced from {@link https://www.typescriptlang.org/docs/handbook/mixins.html | TypeScript Documentation }.
+ * @public
+ */
+function applyMixins(derivedCtor, ...baseCtors) {
+    const derivedAttributes = AttributeConfiguration.locate(derivedCtor);
+    baseCtors.forEach(baseCtor => {
+        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
+            if (name !== "constructor") {
+                Object.defineProperty(derivedCtor.prototype, name, 
+                /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+                Object.getOwnPropertyDescriptor(baseCtor.prototype, name));
+            }
+        });
+        const baseAttributes = AttributeConfiguration.locate(baseCtor);
+        baseAttributes.forEach(x => derivedAttributes.push(x));
+    });
+}
+
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0 ;

package/shared/text-anchor.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
+const vividElement = require('./vivid-element.cjs');
 const affix = require('./affix.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const anchor = require('./anchor.cjs');
-const vividElement = require('./vivid-element.cjs');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/text-anchor.js

@@ -1,7 +1,7 @@
+import { V as VividElement, a as attr } from './vivid-element.js';
 import { b as AffixIcon } from './affix.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { A as Anchor } from './anchor.js';
-import { V as VividElement, a as attr } from './vivid-element.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {