@vonage/vivid 3.56.0 → 3.58.0

package/shared/definition5.js

@@ -1,4 +1,4 @@
-import { a as attr, F as FoundationElement, o as observable, h as html, r as registerFactory } from './index.js';
+import { a as attr, F as FoundationElement, O as Observable, h as html, r as registerFactory } from './index.js';
 import { B as Button, a as buttonRegistries } from './definition11.js';
 import { S as Slider, a as sliderRegistries } from './definition46.js';
 import { M as MediaSkipBy } from './enums.js';
@@ -7,7 +7,6 @@ import './index2.js';
 import { L as Localized } from './localized.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { w as when } from './when.js';
-import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
 const styles = ":host{display:block;max-inline-size:350px}.wrapper{container-type:inline-size}.base{display:inline-flex;box-sizing:border-box;align-items:center;padding:8px;color:var(--vvd-color-canvas-text);gap:16px;inline-size:100%;user-select:none}.base .slider{flex:1;grid-area:slider;min-inline-size:var(--audio-player-min-inline-size, 200px)}.base .controls{display:flex;align-items:center;justify-content:center;gap:8px;grid-area:controls}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{margin-inline:6px;min-inline-size:32px}.base .playback{grid-area:playback}@container (max-width: 500px){.base.two-lines{display:inline-grid;grid-template:auto auto/1fr;grid-template-areas:\"slider\" \"controls\";inline-size:100%;row-gap:4px}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-areas:\"slider slider\" \"controls playback\";grid-template-columns:1fr auto}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}";
@@ -22,6 +21,20 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
+const SKIP_DIRECTIONS = {
+  FORWARD: 1,
+  BACKWARD: -1
+};
+function formatTime(time) {
+  if (!time || Number.isNaN(time)) {
+    return "0:00";
+  }
+  const min = Math.floor(time / 60);
+  const sec = Math.floor(time % 60);
+  return min + ":" + (sec < 10 ? "0" + sec : sec);
+}
+const PAUSE = true;
+const PLAY = false;
 const validSkipByConverter = {
   toView(value) {
     return value;
@@ -32,7 +45,7 @@ const validSkipByConverter = {
 };
 class AudioPlayer extends FoundationElement {
   constructor() {
-    super(...arguments);
+    super();
     this.playButtonAriaLabel = null;
     this.pauseButtonAriaLabel = null;
     this.sliderAriaLabel = null;
@@ -40,106 +53,109 @@ class AudioPlayer extends FoundationElement {
     this.skipBackwardButtonAriaLabel = null;
     this.disabled = false;
     this.notime = false;
-    this.paused = true;
-    /**
-     * @internal
-     */
-    this._rewind = () => {
-      if (this._playerEl) {
-        this._playerEl.currentTime = this._playerEl.duration * (Number(this._sliderEl.value) / 100);
+    this.#playerEl = new Audio();
+    this.#pausedChanged = (pausing) => {
+      if (pausing === this.paused) {
+        return;
+      }
+      if (!this.paused) {
+        this.#playerEl.pause();
+      } else {
+        this.#updateProgress();
+        this.#playerEl.play();
+      }
+      this.#setPausedState();
+    };
+    this.#updateProgress = () => {
+      Observable.notify(this, "currentTime");
+      const percent = this.currentTime / this.duration * 100;
+      if (percent === 100) {
+        this.pause();
+      }
+    };
+    this.#updateTotalTime = () => {
+      Observable.notify(this, "duration");
+    };
+    this.#rewind = () => {
+      if (this.#playerEl) {
+        this.currentTime = this.duration * Number(this.#sliderEl.value) / 100;
+      }
+    };
+    this.#handleSliderEvent = (event) => {
+      if (event.target === this.#sliderEl) {
+        this.pause();
+        this.#rewind();
       }
+      return true;
     };
+    this.#setPausedState = () => {
+      Observable.notify(this, "paused");
+    };
+    this.#playerEl.addEventListener("timeupdate", this.#updateProgress);
+    this.#playerEl.addEventListener("loadedmetadata", this.#updateTotalTime);
+  }
+  srcChanged() {
+    if (this.src === void 0) {
+      this.#playerEl.removeAttribute("src");
+    } else {
+      this.#playerEl.src = this.src;
+    }
+  }
+  get paused() {
+    Observable.track(this, "paused");
+    return this.#playerEl.paused;
+  }
+  set paused(_) {
+  }
+  get duration() {
+    Observable.track(this, "duration");
+    return this.#playerEl.duration;
+  }
+  set duration(_) {
+  }
+  get currentTime() {
+    Observable.track(this, "currentTime");
+    return this.#playerEl.currentTime;
+  }
+  set currentTime(value) {
+    this.#playerEl.currentTime = value;
+  }
+  get #sliderEl() {
+    return this.shadowRoot.querySelector(".slider");
+  }
+  #playerEl;
+  get #baseElement() {
+    return this.shadowRoot.querySelector(".base");
   }
   connectedCallback() {
     super.connectedCallback();
-    document.addEventListener("mouseup", this._rewind);
+    document.addEventListener("mouseup", this.#rewind);
+    this.#setInteractionListeners();
+    this.#setPausedState();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    document.addEventListener("mouseup", this._rewind);
+    document.addEventListener("mouseup", this.#rewind);
+    this.#setInteractionListeners(false);
   }
-  /**
-   * @internal
-   */
-  _togglePlay() {
-    if (this.paused) {
-      this._updateProgress();
-      this._playerEl.play();
-    } else {
-      this._playerEl.pause();
-    }
-    this.paused = !this.paused;
+  play() {
+    this.#pausedChanged(PLAY);
   }
-  /**
-   * @internal
-   */
-  _onSkipButtonClick(isForward) {
-    if (this._playerEl) {
-      const currentTime = this._playerEl.currentTime;
-      const skipDirection = isForward ? 1 : -1;
-      const skipValue = parseInt(this.skipBy) * skipDirection;
-      const newTime = currentTime + skipValue;
-      this._playerEl.currentTime = Math.max(
-        0,
-        Math.min(this._playerEl.duration, newTime)
-      );
-      this._updateProgress();
-    }
+  pause() {
+    this.#pausedChanged(PAUSE);
   }
-  /**
-   * @internal
-   */
-  _updateProgress() {
-    let currentTime;
-    const current = this._playerEl.currentTime;
-    const percent = current / this._playerEl.duration * 100;
-    if (this._sliderEl) {
-      this._sliderEl.value = percent.toString();
-      this._sliderEl.ariaValuetext = this._formatTime(current);
-    }
-    if (percent === 100) {
-      this.paused = true;
-    }
-    if (this._timeStampEl) {
-      currentTime = this._timeStampEl.querySelector(".current-time");
-      if (currentTime)
-        currentTime.textContent = this._formatTime(current);
-    }
-  }
-  /**
-   * @internal
-   */
-  _updateTotalTime() {
-    let totalTime;
-    if (this._playerEl)
-      this.duration = this._playerEl.duration;
-    if (this._timeStampEl) {
-      totalTime = this._timeStampEl.querySelector(".total-time");
-      if (totalTime)
-        totalTime.textContent = this._formatTime(this._playerEl.duration);
-    }
-  }
-  /**
-   * @internal
-   */
-  _handleSliderEvent(event) {
-    if (event.target === this._sliderEl) {
-      this.paused = true;
-      if (this._playerEl) {
-        this._playerEl.pause();
-      }
-      this._rewind();
-    }
-    return true;
-  }
-  /**
-   * @internal
-   */
-  _formatTime(time) {
-    const min = Math.floor(time / 60);
-    const sec = Math.floor(time % 60);
-    return min + ":" + (sec < 10 ? "0" + sec : sec);
+  #setInteractionListeners(add = true) {
+    const action = add ? "addEventListener" : "removeEventListener";
+    this.#baseElement[action]("keyup", this.#handleSliderEvent);
+    this.#baseElement[action]("keydown", this.#handleSliderEvent);
+    this.#baseElement[action]("mousedown", this.#handleSliderEvent);
   }
+  #pausedChanged;
+  #updateProgress;
+  #updateTotalTime;
+  #rewind;
+  #handleSliderEvent;
+  #setPausedState;
 }
 __decorateClass([
   attr({ attribute: "play-button-aria-label" })
@@ -174,18 +190,27 @@ __decorateClass([
     converter: validSkipByConverter
   })
 ], AudioPlayer.prototype, "skipBy");
-__decorateClass([
-  observable
-], AudioPlayer.prototype, "paused");
-__decorateClass([
-  observable
-], AudioPlayer.prototype, "duration");
 applyMixins(AudioPlayer, Localized);
 
+function getCurrentTimePercentage(x) {
+  if (Number.isNaN(x.currentTime) || Number.isNaN(x.duration)) {
+    return 0;
+  }
+  return x.currentTime / x.duration * 100;
+}
+function skip(audioElement, skipDirection) {
+  const currentTime = audioElement.currentTime;
+  const skipValue = parseInt(audioElement.skipBy) * skipDirection;
+  const newTime = currentTime + skipValue;
+  audioElement.currentTime = Math.max(
+    0,
+    Math.min(audioElement.duration, newTime)
+  );
+}
 const getClasses = ({ disabled, duration }) => classNames(["disabled", Boolean(disabled) || !duration]);
 function renderButton(context) {
   const buttonTag = context.tagFor(Button);
-  return html`<${buttonTag} class="pause" @click="${(x) => x._togglePlay()}"
+  return 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}"
 	size='condensed'
@@ -196,7 +221,8 @@ function renderButton(context) {
 function renderBackwardSkipButtons(context) {
   const buttonTag = context.tagFor(Button);
   return html`
-		<${buttonTag} class="skip backward" @click="${(x) => x._onSkipButtonClick(false)}"
+		<${buttonTag} class="skip backward"
+			@click="${(element) => skip(element, SKIP_DIRECTIONS.BACKWARD)}"
 		icon="${(x) => x.skipBy == MediaSkipBy.Five ? "5-sec-backward-line" : x.skipBy == MediaSkipBy.Thirty ? "30-sec-backward-line" : "10-sec-backward-line"}"
 		size='condensed'
 		aria-label="${(x) => x.skipBackwardButtonAriaLabel || x.locale.audioPlayer.skipBackwardButton}"
@@ -208,7 +234,8 @@ function renderBackwardSkipButtons(context) {
 function renderForwardSkipButtons(context) {
   const buttonTag = context.tagFor(Button);
   return html`
-		<${buttonTag} class="skip forward" @click="${(x) => x._onSkipButtonClick(true)}"
+		<${buttonTag} class="skip forward"
+		@click="${(element) => skip(element, SKIP_DIRECTIONS.FORWARD)}"
 		icon="${(x) => x.skipBy == MediaSkipBy.Five ? "5-sec-forward-line" : x.skipBy == MediaSkipBy.Thirty ? "30-sec-forward-line" : "10-sec-forward-line"}"
 		size='condensed'
 		aria-label="${(x) => x.skipForwardButtonAriaLabel || x.locale.audioPlayer.skipForwardButton}"
@@ -219,29 +246,26 @@ function renderForwardSkipButtons(context) {
 }
 function renderSlider(context) {
   const sliderTag = context.tagFor(Slider);
-  return html`<${sliderTag}
-	${ref("_sliderEl")} class="slider"
-	aria-label="${(x) => x.sliderAriaLabel || x.locale.audioPlayer.sliderLabel}"
-	value="0" max="100"
-	connotation="${(x) => x.connotation}"
-	?disabled="${(x) => x.disabled || !x.duration}">
+  return html`
+	<${sliderTag}
+		class="slider"
+		aria-label="${(x) => x.sliderAriaLabel || x.locale.audioPlayer.sliderLabel}"
+		value="${getCurrentTimePercentage}" max="100"
+		ariaValuetext="${(x) => formatTime(x.currentTime)}"
+		connotation="${(x) => x.connotation}"
+		?disabled="${(x) => x.disabled || !x.duration}">
 	</${sliderTag}>`;
 }
 function renderTimestamp() {
-  return html` <div class="time-stamp" ${ref("_timeStampEl")}>
-		<span class="current-time">0:00</span>
+  return html` <div class="time-stamp">
+		<span class="current-time">${(x) => formatTime(x.currentTime)}</span>
 		<span>/</span>
-		<span class="total-time">0:00</span>
+		<span class="total-time">${(x) => formatTime(x.duration)}</span>
 	</div>`;
 }
 const AudioPlayerTemplate = (context) => {
   return html` <div class="wrapper">
-		<div
-			class="base ${getClasses}"
-			@keyup="${(x, c) => x._handleSliderEvent(c.event)}"
-			@keydown="${(x, c) => x._handleSliderEvent(c.event)}"
-			@mousedown="${(x, c) => x._handleSliderEvent(c.event)}"
-		>
+		<div class="base ${getClasses}">
 			<div class="controls">
 				${when(
     (x) => x.skipBy && x.skipBy != MediaSkipBy.Zero,
@@ -255,12 +279,6 @@ const AudioPlayerTemplate = (context) => {
 				${when((x) => !x.notime, renderTimestamp())}
 			</div>
 			${renderSlider(context)}
-			<audio
-				${ref("_playerEl")}
-				src="${(x) => x.src}"
-				@timeupdate="${(x) => x._updateProgress()}"
-				@loadedmetadata="${(x) => x._updateTotalTime()}"
-			></audio>
 		</div>
 	</div>`;
 };

package/shared/definition50.cjs

@@ -19,7 +19,7 @@ index.__decorate([
     index.attr({ mode: "boolean" })
 ], Tab$1.prototype, "disabled", void 0);
 
-const styles = ":host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}:host(:focus-visible){outline:none}.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}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_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-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-tab-cta-primary, var(--vvd-color-cta-500));--_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))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-tab-accent-primary, var(--vvd-color-canvas-text));--_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))}@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}: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{padding-inline-start:calc(var(--_tabs-active-indicator-stroke-width) + var(--_tabs-tablist-gutter))}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}";
+const styles = ":host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}:host(:focus-visible){outline:none}.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}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_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-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-tab-cta-primary, var(--vvd-color-cta-500));--_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))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-tab-accent-primary, var(--vvd-color-canvas-text));--_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))}@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}: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}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/definition50.js

@@ -17,7 +17,7 @@ __decorate([
     attr({ mode: "boolean" })
 ], Tab$1.prototype, "disabled", void 0);
 
-const styles = ":host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}:host(:focus-visible){outline:none}.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}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_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-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-tab-cta-primary, var(--vvd-color-cta-500));--_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))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-tab-accent-primary, var(--vvd-color-canvas-text));--_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))}@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}: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{padding-inline-start:calc(var(--_tabs-active-indicator-stroke-width) + var(--_tabs-tablist-gutter))}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}";
+const styles = ":host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}:host(:focus-visible){outline:none}.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}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_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-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-tab-cta-primary, var(--vvd-color-cta-500));--_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))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-tab-accent-primary, var(--vvd-color-canvas-text));--_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))}@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}: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}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/definition58.cjs

@@ -5,7 +5,7 @@ const definition = require('./definition63.cjs');
 const anchored = require('./anchored.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size, auto)}.tooltip-text{padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}";
+const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size, auto);max-inline-size:var(--tooltip-max-inline-size, none)}.tooltip-text{padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition58.js

@@ -3,7 +3,7 @@ import { P as Popup, p as popupRegistries } from './definition63.js';
 import { b as anchored, a as anchorSlotTemplateFactory } from './anchored.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size, auto)}.tooltip-text{padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}";
+const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size, auto);max-inline-size:var(--tooltip-max-inline-size, none)}.tooltip-text{padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;