@vonage/vivid 4.9.0 → 4.11.0

package/shared/definition5.cjs

@@ -238,7 +238,7 @@ const isMenuItemChekced = (playbackRate, { parent }) => {
   return playbackRate === parent.playbackRate;
 };
 function renderButton(context) {
-  const buttonTag = context.tagFor(definition$1.Button);
+  const buttonTag = context.tagFor(definition$1.Button$1);
   return index.html`<${buttonTag} class="pause" @click="${(x) => x.paused ? x.play() : x.pause()}"
 	icon="${(x) => x.paused ? "play-solid" : "pause-solid"}"
 	aria-label="${(x) => x.paused ? x.playButtonAriaLabel || x.locale.audioPlayer.playButtonLabel : x.pauseButtonAriaLabel || x.locale.audioPlayer.pauseButtonLabel}"
@@ -248,7 +248,7 @@ function renderButton(context) {
   ></${buttonTag}>`;
 }
 function renderBackwardSkipButtons(context) {
-  const buttonTag = context.tagFor(definition$1.Button);
+  const buttonTag = context.tagFor(definition$1.Button$1);
   return index.html`
 		<${buttonTag} class="skip backward"
 			@click="${(element) => skip(element, SKIP_DIRECTIONS.BACKWARD)}"
@@ -261,7 +261,7 @@ function renderBackwardSkipButtons(context) {
 	`;
 }
 function renderForwardSkipButtons(context) {
-  const buttonTag = context.tagFor(definition$1.Button);
+  const buttonTag = context.tagFor(definition$1.Button$1);
   return index.html`
 		<${buttonTag} class="skip forward"
 		@click="${(element) => skip(element, SKIP_DIRECTIONS.FORWARD)}"
@@ -299,7 +299,7 @@ function handlePlaybackRateClick(playbackRate, context) {
 }
 const AudioPlayerTemplate = (context) => {
   const menuTag = context.tagFor(definition.Menu);
-  const buttonTag = context.tagFor(definition$1.Button);
+  const buttonTag = context.tagFor(definition$1.Button$1);
   const menuItemTag = context.tagFor(definition.MenuItem);
   return index.html` <div class="wrapper">
 		<div class="base ${getClasses}">
@@ -319,7 +319,7 @@ const AudioPlayerTemplate = (context) => {
 			${when.when(
     (x) => Boolean(x.playbackRates),
     index.html`
-			<${menuTag} class="playback-rates" trigger="auto" placement="top-start" auto-dismiss id="playback-menu">
+			<${menuTag} class="playback-rates" trigger="auto" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
 				<${buttonTag} id="playback-open-button"
 							  class="playback-button"
 							  slot="anchor"

package/shared/definition5.js

@@ -1,5 +1,5 @@
 import { F as FoundationElement, O as Observable, a as attr, h as html, r as registerFactory } from './index.js';
-import { B as Button, a as buttonRegistries } from './definition11.js';
+import { c as Button, a as buttonRegistries } from './definition11.js';
 import { S as Slider, a as sliderRegistries } from './definition47.js';
 import { a as menuRegistries } from './definition30.js';
 import { M as MediaSkipBy } from './enums.js';
@@ -317,7 +317,7 @@ const AudioPlayerTemplate = (context) => {
 			${when(
     (x) => Boolean(x.playbackRates),
     html`
-			<${menuTag} class="playback-rates" trigger="auto" placement="top-start" auto-dismiss id="playback-menu">
+			<${menuTag} class="playback-rates" trigger="auto" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
 				<${buttonTag} id="playback-open-button"
 							  class="playback-button"
 							  slot="anchor"

package/shared/definition51.cjs

@@ -20,7 +20,7 @@ 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}:host(:not(.vertical)) .base:after{position:absolute;border-radius:2px;background:currentColor;block-size:2px;content:\"\";inline-size:100%;inset-block-end:0;inset-inline-start:0;pointer-events:none;transition-property:opacity}:host(:not(.vertical)):host([aria-selected=true]) .base:after{transition-delay:.2s}:host(:not(.vertical)):host(:not([aria-selected=true])) .base:after{opacity:0}.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}";
+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;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/definition51.js

@@ -18,7 +18,7 @@ __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}:host(:not(.vertical)) .base:after{position:absolute;border-radius:2px;background:currentColor;block-size:2px;content:\"\";inline-size:100%;inset-block-end:0;inset-inline-start:0;pointer-events:none;transition-property:opacity}:host(:not(.vertical)):host([aria-selected=true]) .base:after{transition-delay:.2s}:host(:not(.vertical)):host(:not([aria-selected=true])) .base:after{opacity:0}.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}";
+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;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/definition52.cjs

@@ -383,7 +383,7 @@ index.__decorate([
 ], Tabs$1.prototype, "showActiveIndicator", void 0);
 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{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;inline-size:100%;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}.tablist{--_tabs-tablist-gutter: 8px;--_tabs-active-indicator-stroke-width: 2px;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:not(.orientation-vertical) .tablist-wrapper{overflow:auto hidden;align-self:end;border-bottom:1px solid var(--vvd-color-neutral-300);inline-size:100%}.base.orientation-vertical .tablist-wrapper{overflow:hidden auto;block-size:100%;box-shadow:1px 0 0 0 var(--vvd-color-neutral-300)}.tablist-wrapper::-webkit-scrollbar{display:none}.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;block-size:var(--_tabs-active-indicator-stroke-width);grid-column:1/auto;inline-size:calc(var(--_tabs-active-tab-inline-size) - 32px);inset-block-end:0;inset-inline-start:8px;justify-self:center;padding-inline:var(--_tabs-tablist-gutter)}.activeIndicatorTransition{transition:transform .2s ease-out 0s,inline-size .2s ease-out 0s}.base:not(.orientation-vertical) .active-indicator:not(.activeIndicatorTransition){opacity:0}";
+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;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -397,8 +397,11 @@ var __decorateClass = (decorators, target, key, kind) => {
 const ACTIVE_TAB_WIDTH = "--_tabs-active-tab-inline-size";
 class Tabs extends Tabs$1 {
   constructor() {
-    super(...arguments);
+    super();
     this.scrollablePanel = false;
+    this._actionItemsSlottedContent = [];
+    this.handleActiveIndicatorPosition = () => this.#handleActiveIndicatorPosition();
+    this.animateActiveIndicator = () => this.#animateActiveIndicator();
   }
   connotationChanged() {
     this.#updateTabsConnotation();
@@ -410,17 +413,16 @@ class Tabs extends Tabs$1 {
     if (this.orientation === TabsOrientation.vertical) {
       this.activeIndicatorRef.style.removeProperty(ACTIVE_TAB_WIDTH);
     }
-    this.#patchActiveID();
   }
   activeidChanged(oldValue, newValue) {
     super.activeidChanged(oldValue, newValue);
     this.patchIndicatorStyleTransition();
-    this.#patchActiveID();
+    this.#updateTabsConnotation();
+    this.#scrollToIndex(this.activeTabIndex);
   }
   tabsChanged() {
     super.tabsChanged();
     this.patchIndicatorStyleTransition();
-    this.#patchActiveID();
     this.#updateScrollStatus();
   }
   #updateScrollStatus() {
@@ -429,7 +431,6 @@ class Tabs extends Tabs$1 {
   tabpanelsChanged() {
     super.tabpanelsChanged();
     this.patchIndicatorStyleTransition();
-    this.#patchActiveID();
   }
   patchIndicatorStyleTransition() {
     if (!this.activetab || !this.activeIndicatorRef) return;
@@ -444,6 +445,7 @@ class Tabs extends Tabs$1 {
     const scrollWrapper = this.tablist.parentElement;
     this.#resizeObserver = new ResizeObserver(() => {
       this.#updateScrollStatus();
+      this.patchIndicatorStyleTransition();
     });
     this.#resizeObserver.observe(scrollWrapper);
   }
@@ -467,7 +469,7 @@ class Tabs extends Tabs$1 {
     return this.shadowRoot.querySelector(".tablist-wrapper");
   }
   #scrollToIndex(index) {
-    const tab = this.tabs[index];
+    const tab = this.tabs?.[index];
     if (!tab) return;
     let left = 0;
     let top = 0;
@@ -488,13 +490,37 @@ class Tabs extends Tabs$1 {
     }
     this.#tabListWrapper.scrollTo({ top, left, behavior: "smooth" });
   }
-  // adapted FAST fix https://github.com/microsoft/fast/pull/6606
-  #patchActiveID() {
-    if (!this.activetab) return;
-    const idx = this.tabs.indexOf(this.activetab);
-    this.activeid = this["tabIds"][idx];
-    this.#updateTabsConnotation();
-    this.#scrollToIndex(idx);
+  #getGridProperty() {
+    return this.isHorizontal() ? "gridColumn" : "gridRow";
+  }
+  #getTranslateProperty() {
+    return this.isHorizontal() ? "translateX" : "translateY";
+  }
+  #handleActiveIndicatorPosition() {
+    if (this.showActiveIndicator && this.activeindicator) {
+      this.animateActiveIndicator();
+    }
+  }
+  #animateActiveIndicator() {
+    const offsetProperty = this.isHorizontal() ? "offsetLeft" : "offsetTop";
+    const currentOffset = this.activeIndicatorRef[offsetProperty];
+    const currentGridValue = this.activeIndicatorRef.style[this.#getGridProperty()];
+    this.activeIndicatorRef.style[this.#getGridProperty()] = `${this.activeTabIndex + 1}`;
+    const targetOffset = this.activeIndicatorRef[offsetProperty];
+    this.activeIndicatorRef.style[this.#getGridProperty()] = currentGridValue;
+    const relativeOffset = targetOffset - currentOffset;
+    this.activeIndicatorRef.style.transform = `${this.#getTranslateProperty()}(${relativeOffset}px)`;
+    this.activeIndicatorRef.classList.add("activeIndicatorTransition");
+  }
+  /**
+   * @internal
+   */
+  activeIndicatorRefChanged() {
+    this.activeIndicatorRef.addEventListener("transitionend", () => {
+      this.activeIndicatorRef.style[this.#getGridProperty()] = `${this.activeTabIndex + 1}`;
+      this.activeIndicatorRef.style.transform = `${this.#getTranslateProperty()}(0px)`;
+      this.activeIndicatorRef.classList.remove("activeIndicatorTransition");
+    });
   }
 }
 __decorateClass([
@@ -509,18 +535,23 @@ __decorateClass([
 __decorateClass([
   index.attr({ mode: "boolean", attribute: "scrollable-panel" })
 ], Tabs.prototype, "scrollablePanel");
+__decorateClass([
+  index.observable
+], Tabs.prototype, "_actionItemsSlottedContent");
 
 const getClasses = ({
   connotation,
   orientation,
   gutters,
-  scrollablePanel
+  scrollablePanel,
+  _actionItemsSlottedContent
 }) => classNames.classNames(
   "base",
   [`connotation-${connotation}`, Boolean(connotation)],
   [`orientation-${orientation}`, Boolean(orientation)],
   `gutters-${gutters ?? "small"}`,
-  ["scroll", Boolean(scrollablePanel)]
+  ["scroll", Boolean(scrollablePanel)],
+  ["has-action-items", Boolean(_actionItemsSlottedContent.length)]
 );
 function setNoScrollState(scrollShadow, scrollWrapper) {
   if (scrollWrapper.scrollWidth <= scrollWrapper.clientWidth) {
@@ -552,21 +583,27 @@ function TabsTemplate() {
   return index.html`
 		<template>
 			<div class="${getClasses}">
-				<div class="scroll-shadow">
-					<div class="tablist-wrapper" @scroll="${setShadowWhenScrollTabs}">
-						<div class="tablist" role="tablist" ${ref.ref("tablist")}>
-							<slot name="tab" ${slotted.slotted("tabs")}></slot>
-							${when.when(
+				<div class="tabs">
+					<div class="scroll-shadow">
+						<div class="tablist-wrapper" @scroll="${setShadowWhenScrollTabs}">
+							<div class="tablist" role="tablist" ${ref.ref("tablist")}>
+								<slot name="tab" ${slotted.slotted("tabs")}></slot>
+								${when.when(
     (x) => x.showActiveIndicator,
     index.html`
-									<div
-										${ref.ref("activeIndicatorRef")}
-										class="active-indicator"
-									></div>
-								`
+										<div
+											${ref.ref("activeIndicatorRef")}
+											class="active-indicator"
+										></div>
+									`
   )}
+							</div>
 						</div>
 					</div>
+					<slot
+						name="action-items"
+						${slotted.slotted("_actionItemsSlottedContent")}
+					></slot>
 				</div>
 				<div class="tabpanel" part="tab-panel">
 					<slot name="tabpanel" ${slotted.slotted("tabpanels")}></slot>

package/shared/definition52.js

@@ -381,7 +381,7 @@ __decorate([
 ], 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{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;inline-size:100%;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}.tablist{--_tabs-tablist-gutter: 8px;--_tabs-active-indicator-stroke-width: 2px;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:not(.orientation-vertical) .tablist-wrapper{overflow:auto hidden;align-self:end;border-bottom:1px solid var(--vvd-color-neutral-300);inline-size:100%}.base.orientation-vertical .tablist-wrapper{overflow:hidden auto;block-size:100%;box-shadow:1px 0 0 0 var(--vvd-color-neutral-300)}.tablist-wrapper::-webkit-scrollbar{display:none}.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;block-size:var(--_tabs-active-indicator-stroke-width);grid-column:1/auto;inline-size:calc(var(--_tabs-active-tab-inline-size) - 32px);inset-block-end:0;inset-inline-start:8px;justify-self:center;padding-inline:var(--_tabs-tablist-gutter)}.activeIndicatorTransition{transition:transform .2s ease-out 0s,inline-size .2s ease-out 0s}.base:not(.orientation-vertical) .active-indicator:not(.activeIndicatorTransition){opacity:0}";
+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;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -395,8 +395,11 @@ var __decorateClass = (decorators, target, key, kind) => {
 const ACTIVE_TAB_WIDTH = "--_tabs-active-tab-inline-size";
 class Tabs extends Tabs$1 {
   constructor() {
-    super(...arguments);
+    super();
     this.scrollablePanel = false;
+    this._actionItemsSlottedContent = [];
+    this.handleActiveIndicatorPosition = () => this.#handleActiveIndicatorPosition();
+    this.animateActiveIndicator = () => this.#animateActiveIndicator();
   }
   connotationChanged() {
     this.#updateTabsConnotation();
@@ -408,17 +411,16 @@ class Tabs extends Tabs$1 {
     if (this.orientation === TabsOrientation.vertical) {
       this.activeIndicatorRef.style.removeProperty(ACTIVE_TAB_WIDTH);
     }
-    this.#patchActiveID();
   }
   activeidChanged(oldValue, newValue) {
     super.activeidChanged(oldValue, newValue);
     this.patchIndicatorStyleTransition();
-    this.#patchActiveID();
+    this.#updateTabsConnotation();
+    this.#scrollToIndex(this.activeTabIndex);
   }
   tabsChanged() {
     super.tabsChanged();
     this.patchIndicatorStyleTransition();
-    this.#patchActiveID();
     this.#updateScrollStatus();
   }
   #updateScrollStatus() {
@@ -427,7 +429,6 @@ class Tabs extends Tabs$1 {
   tabpanelsChanged() {
     super.tabpanelsChanged();
     this.patchIndicatorStyleTransition();
-    this.#patchActiveID();
   }
   patchIndicatorStyleTransition() {
     if (!this.activetab || !this.activeIndicatorRef) return;
@@ -442,6 +443,7 @@ class Tabs extends Tabs$1 {
     const scrollWrapper = this.tablist.parentElement;
     this.#resizeObserver = new ResizeObserver(() => {
       this.#updateScrollStatus();
+      this.patchIndicatorStyleTransition();
     });
     this.#resizeObserver.observe(scrollWrapper);
   }
@@ -465,7 +467,7 @@ class Tabs extends Tabs$1 {
     return this.shadowRoot.querySelector(".tablist-wrapper");
   }
   #scrollToIndex(index) {
-    const tab = this.tabs[index];
+    const tab = this.tabs?.[index];
     if (!tab) return;
     let left = 0;
     let top = 0;
@@ -486,13 +488,37 @@ class Tabs extends Tabs$1 {
     }
     this.#tabListWrapper.scrollTo({ top, left, behavior: "smooth" });
   }
-  // adapted FAST fix https://github.com/microsoft/fast/pull/6606
-  #patchActiveID() {
-    if (!this.activetab) return;
-    const idx = this.tabs.indexOf(this.activetab);
-    this.activeid = this["tabIds"][idx];
-    this.#updateTabsConnotation();
-    this.#scrollToIndex(idx);
+  #getGridProperty() {
+    return this.isHorizontal() ? "gridColumn" : "gridRow";
+  }
+  #getTranslateProperty() {
+    return this.isHorizontal() ? "translateX" : "translateY";
+  }
+  #handleActiveIndicatorPosition() {
+    if (this.showActiveIndicator && this.activeindicator) {
+      this.animateActiveIndicator();
+    }
+  }
+  #animateActiveIndicator() {
+    const offsetProperty = this.isHorizontal() ? "offsetLeft" : "offsetTop";
+    const currentOffset = this.activeIndicatorRef[offsetProperty];
+    const currentGridValue = this.activeIndicatorRef.style[this.#getGridProperty()];
+    this.activeIndicatorRef.style[this.#getGridProperty()] = `${this.activeTabIndex + 1}`;
+    const targetOffset = this.activeIndicatorRef[offsetProperty];
+    this.activeIndicatorRef.style[this.#getGridProperty()] = currentGridValue;
+    const relativeOffset = targetOffset - currentOffset;
+    this.activeIndicatorRef.style.transform = `${this.#getTranslateProperty()}(${relativeOffset}px)`;
+    this.activeIndicatorRef.classList.add("activeIndicatorTransition");
+  }
+  /**
+   * @internal
+   */
+  activeIndicatorRefChanged() {
+    this.activeIndicatorRef.addEventListener("transitionend", () => {
+      this.activeIndicatorRef.style[this.#getGridProperty()] = `${this.activeTabIndex + 1}`;
+      this.activeIndicatorRef.style.transform = `${this.#getTranslateProperty()}(0px)`;
+      this.activeIndicatorRef.classList.remove("activeIndicatorTransition");
+    });
   }
 }
 __decorateClass([
@@ -507,18 +533,23 @@ __decorateClass([
 __decorateClass([
   attr({ mode: "boolean", attribute: "scrollable-panel" })
 ], Tabs.prototype, "scrollablePanel");
+__decorateClass([
+  observable
+], Tabs.prototype, "_actionItemsSlottedContent");
 
 const getClasses = ({
   connotation,
   orientation,
   gutters,
-  scrollablePanel
+  scrollablePanel,
+  _actionItemsSlottedContent
 }) => classNames(
   "base",
   [`connotation-${connotation}`, Boolean(connotation)],
   [`orientation-${orientation}`, Boolean(orientation)],
   `gutters-${gutters ?? "small"}`,
-  ["scroll", Boolean(scrollablePanel)]
+  ["scroll", Boolean(scrollablePanel)],
+  ["has-action-items", Boolean(_actionItemsSlottedContent.length)]
 );
 function setNoScrollState(scrollShadow, scrollWrapper) {
   if (scrollWrapper.scrollWidth <= scrollWrapper.clientWidth) {
@@ -550,21 +581,27 @@ function TabsTemplate() {
   return html`
 		<template>
 			<div class="${getClasses}">
-				<div class="scroll-shadow">
-					<div class="tablist-wrapper" @scroll="${setShadowWhenScrollTabs}">
-						<div class="tablist" role="tablist" ${ref("tablist")}>
-							<slot name="tab" ${slotted("tabs")}></slot>
-							${when(
+				<div class="tabs">
+					<div class="scroll-shadow">
+						<div class="tablist-wrapper" @scroll="${setShadowWhenScrollTabs}">
+							<div class="tablist" role="tablist" ${ref("tablist")}>
+								<slot name="tab" ${slotted("tabs")}></slot>
+								${when(
     (x) => x.showActiveIndicator,
     html`
-									<div
-										${ref("activeIndicatorRef")}
-										class="active-indicator"
-									></div>
-								`
+										<div
+											${ref("activeIndicatorRef")}
+											class="active-indicator"
+										></div>
+									`
   )}
+							</div>
 						</div>
 					</div>
+					<slot
+						name="action-items"
+						${slotted("_actionItemsSlottedContent")}
+					></slot>
 				</div>
 				<div class="tabpanel" part="tab-panel">
 					<slot name="tabpanel" ${slotted("tabpanels")}></slot>

package/shared/definition56.cjs

@@ -13,59 +13,57 @@ const when = require('./when.cjs');
 const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
 
-// Unique ID creation requires a high quality random # generator. In the browser we therefore
-// require the crypto API and do not support built-in fallback to lower quality random number
-// generators (like Math.random()).
+const byteToHex = [];
+for (let i = 0; i < 256; ++i) {
+    byteToHex.push((i + 0x100).toString(16).slice(1));
+}
+function unsafeStringify(arr, offset = 0) {
+    return (byteToHex[arr[offset + 0]] +
+        byteToHex[arr[offset + 1]] +
+        byteToHex[arr[offset + 2]] +
+        byteToHex[arr[offset + 3]] +
+        '-' +
+        byteToHex[arr[offset + 4]] +
+        byteToHex[arr[offset + 5]] +
+        '-' +
+        byteToHex[arr[offset + 6]] +
+        byteToHex[arr[offset + 7]] +
+        '-' +
+        byteToHex[arr[offset + 8]] +
+        byteToHex[arr[offset + 9]] +
+        '-' +
+        byteToHex[arr[offset + 10]] +
+        byteToHex[arr[offset + 11]] +
+        byteToHex[arr[offset + 12]] +
+        byteToHex[arr[offset + 13]] +
+        byteToHex[arr[offset + 14]] +
+        byteToHex[arr[offset + 15]]).toLowerCase();
+}
+
 let getRandomValues;
 const rnds8 = new Uint8Array(16);
 function rng() {
-  // lazy load so that environments that need to polyfill have a chance to do so
-  if (!getRandomValues) {
-    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
-    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
-
     if (!getRandomValues) {
-      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+        if (typeof crypto === 'undefined' || !crypto.getRandomValues) {
+            throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+        }
+        getRandomValues = crypto.getRandomValues.bind(crypto);
     }
-  }
-
-  return getRandomValues(rnds8);
-}
-
-/**
- * Convert array of 16 byte values to UUID string format of the form:
- * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
- */
-
-const byteToHex = [];
-
-for (let i = 0; i < 256; ++i) {
-  byteToHex.push((i + 0x100).toString(16).slice(1));
-}
-
-function unsafeStringify(arr, offset = 0) {
-  // Note: Be careful editing this code!  It's been tuned for performance
-  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
-  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
+    return getRandomValues(rnds8);
 }
 
 const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
-const native = {
-  randomUUID
-};
+const native = { randomUUID };
 
 function v4(options, buf, offset) {
-  if (native.randomUUID && !buf && !options) {
-    return native.randomUUID();
-  }
-
-  options = options || {};
-  const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
-
-  rnds[6] = rnds[6] & 0x0f | 0x40;
-  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
-
-  return unsafeStringify(rnds);
+    if (native.randomUUID && !buf && !options) {
+        return native.randomUUID();
+    }
+    options = options || {};
+    const rnds = options.random || (options.rng || rng)();
+    rnds[6] = (rnds[6] & 0x0f) | 0x40;
+    rnds[8] = (rnds[8] & 0x3f) | 0x80;
+    return unsafeStringify(rnds);
 }
 
 const generateRandomId = () => v4();
@@ -189,6 +187,7 @@ exports.TextField = class TextField extends textField.TextField {
     __privateGet(this, _reflectToInput).attribute("size", "size");
     __privateGet(this, _reflectToInput).attribute("autoComplete", "autocomplete");
     __privateGet(this, _reflectToInput).attribute("type", "type");
+    __privateGet(this, _reflectToInput).attribute("inputMode", "inputmode");
     __privateGet(this, _reflectToInput).attribute("ariaAtomic", "aria-atomic");
     __privateGet(this, _reflectToInput).attribute("ariaBusy", "aria-busy");
     __privateGet(this, _reflectToInput).attribute("ariaCurrent", "aria-current");
@@ -294,6 +293,9 @@ __decorateClass([
 __decorateClass([
   index.attr()
 ], exports.TextField.prototype, "scale", 2);
+__decorateClass([
+  index.attr({ attribute: "inputmode" })
+], exports.TextField.prototype, "inputMode", 2);
 __decorateClass([
   index.observable
 ], exports.TextField.prototype, "actionItemsSlottedContent", 2);