@vonage/vivid 4.14.1 → 4.14.2

package/shared/definition47.js

@@ -1,7 +1,7 @@
 import { i as iconDefinition } from './definition27.js';
 import { V as VividElement, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { L as Localized } from './localized.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';

package/shared/definition50.js

@@ -1,7 +1,7 @@
 import { i as iconDefinition } from './definition27.js';
 import { V as VividElement, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { L as Localized } from './localized.js';
 import { c as classNames } from './class-names.js';
 

package/shared/definition51.cjs

@@ -4,16 +4,38 @@ const definition = require('./definition50.cjs');
 const definition$1 = require('./definition49.cjs');
 const vividElement = require('./vivid-element.cjs');
 const keyCodes$1 = require('./key-codes.cjs');
-const keyCodes = require('./key-codes2.cjs');
+const foundationElement = require('./foundation-element.cjs');
+const startEnd = require('./start-end.cjs');
 const applyMixins = require('./apply-mixins2.cjs');
-const strings = require('./strings2.cjs');
-const strings$1 = require('./strings.cjs');
+const keyCodes = require('./key-codes2.cjs');
+const strings = require('./strings.cjs');
 const numbers = require('./numbers.cjs');
 const ref = require('./ref.cjs');
 const slotted = require('./slotted.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
+/**
+ * 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
@@ -38,7 +60,7 @@ const TabsOrientation = {
  *
  * @public
  */
-let Tabs$1 = class Tabs extends keyCodes.FoundationElement {
+let Tabs$1 = class Tabs extends foundationElement.FoundationElement {
     constructor() {
         super(...arguments);
         /**
@@ -278,13 +300,13 @@ let Tabs$1 = class Tabs extends keyCodes.FoundationElement {
     getTabIds() {
         return this.tabs.map((tab) => {
             var _a;
-            return (_a = tab.getAttribute("id")) !== null && _a !== void 0 ? _a : `tab-${strings.uniqueId()}`;
+            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-${strings.uniqueId()}`;
+            return (_a = tabPanel.getAttribute("id")) !== null && _a !== void 0 ? _a : `panel-${uniqueId()}`;
         });
     }
     setComponent() {
@@ -341,7 +363,7 @@ let Tabs$1 = class Tabs extends keyCodes.FoundationElement {
     adjust(adjustment) {
         const focusableTabs = this.tabs.filter(t => this.isFocusableElement(t));
         const currentActiveTabIndex = focusableTabs.indexOf(this.activetab);
-        const nextTabIndex = strings.limit(0, focusableTabs.length - 1, currentActiveTabIndex + adjustment);
+        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) {
@@ -361,28 +383,28 @@ let Tabs$1 = class Tabs extends keyCodes.FoundationElement {
         this.activeTabIndex = this.getActiveIndex();
     }
 };
-keyCodes.__decorate([
+foundationElement.__decorate([
     vividElement.attr
 ], Tabs$1.prototype, "orientation", void 0);
-keyCodes.__decorate([
+foundationElement.__decorate([
     vividElement.attr
 ], Tabs$1.prototype, "activeid", void 0);
-keyCodes.__decorate([
+foundationElement.__decorate([
     vividElement.observable
 ], Tabs$1.prototype, "tabs", void 0);
-keyCodes.__decorate([
+foundationElement.__decorate([
     vividElement.observable
 ], Tabs$1.prototype, "tabpanels", void 0);
-keyCodes.__decorate([
+foundationElement.__decorate([
     vividElement.attr({ mode: "boolean" })
 ], Tabs$1.prototype, "activeindicator", void 0);
-keyCodes.__decorate([
+foundationElement.__decorate([
     vividElement.observable
 ], Tabs$1.prototype, "activeIndicatorRef", void 0);
-keyCodes.__decorate([
+foundationElement.__decorate([
     vividElement.observable
 ], Tabs$1.prototype, "showActiveIndicator", void 0);
-applyMixins.applyMixins(Tabs$1, keyCodes.StartEnd);
+applyMixins.applyMixins(Tabs$1, startEnd.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}";
 
@@ -610,12 +632,12 @@ class Tabs extends vividElement.VividElement {
   }
   getTabIds() {
     return this.tabs.map((tab) => {
-      return tab.getAttribute("id") ?? `tab-${strings$1.uniqueId()}`;
+      return tab.getAttribute("id") ?? `tab-${strings.uniqueId()}`;
     });
   }
   getTabPanelIds() {
     return this.tabpanels.map((tabPanel) => {
-      return tabPanel.getAttribute("id") ?? `panel-${strings$1.uniqueId()}`;
+      return tabPanel.getAttribute("id") ?? `panel-${strings.uniqueId()}`;
     });
   }
   setComponent() {

package/shared/definition51.js

@@ -2,9 +2,10 @@ 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, S as StartEnd, F as FoundationElement, a as keyArrowRight, b as keyArrowLeft, c as keyArrowDown, d as keyArrowUp, e as keyEnd, f as keyHome } from './key-codes2.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 { u as uniqueId, l as limit } from './strings2.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 { r as ref } from './ref.js';
@@ -12,6 +13,27 @@ 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

package/shared/definition53.js

@@ -1,7 +1,7 @@
 import { I as Icon, i as iconDefinition } from './definition27.js';
 import { V as VividElement, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 

package/shared/definition59.js

@@ -1,7 +1,7 @@
 import { I as Icon, i as iconDefinition } from './definition27.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 { a as applyMixins } from './apply-mixins.js';
-import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { i as isHTMLElement } from './dom.js';
 import { e as elements, s as slotted } from './slotted.js';
 import { c as children } from './children.js';

package/shared/definition7.js

@@ -1,6 +1,6 @@
 import { V as VividElement, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { i as iconDefinition } from './definition27.js';
-import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';

package/shared/definition8.js

@@ -3,7 +3,7 @@ import { i as iconDefinition } from './definition27.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 { a as applyMixins } from './apply-mixins.js';
 import { C as Connotation } from './enums.js';
-import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { L as Localized } from './localized.js';
 import { s as slotted } from './slotted.js';
 import { w as when } from './when.js';