@vonage/vivid 3.53.0 → 3.55.0

package/shared/definition5.cjs

@@ -3,6 +3,7 @@
 const index = require('./index.cjs');
 const definition = require('./definition11.cjs');
 const definition$1 = require('./definition46.cjs');
+const enums = require('./enums.cjs');
 require('./affix.cjs');
 require('./index2.cjs');
 const localized = require('./localized.cjs');
@@ -11,25 +12,34 @@ const when = require('./when.cjs');
 const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ".base{display:inline-flex;align-items:center;padding:8px;color:var(--vvd-color-canvas-text);user-select:none}.base .slider{min-inline-size:var(--audio-player-min-inline-size, 200px)}.base .controls{display:flex;align-items:center;gap:16px}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{margin-inline:6px;min-inline-size:32px}\n";
+const styles = ".base{display:inline-flex;align-items:center;padding:8px;color:var(--vvd-color-canvas-text);user-select:none}.base .slider{min-inline-size:var(--audio-player-min-inline-size, 200px)}.base .controls{display:flex;align-items:center;gap:16px}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{margin-inline:6px;min-inline-size:32px}";
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp(target, key, result);
   return result;
 };
+const validSkipByConverter = {
+  toView(value) {
+    return value;
+  },
+  fromView(value) {
+    return Object.values(enums.MediaSkipBy).includes(value) ? value : void 0;
+  }
+};
 class AudioPlayer extends index.FoundationElement {
   constructor() {
     super(...arguments);
     this.playButtonAriaLabel = null;
     this.pauseButtonAriaLabel = null;
     this.sliderAriaLabel = null;
+    this.skipForwardButtonAriaLabel = null;
+    this.skipBackwardButtonAriaLabel = null;
     this.disabled = false;
     this.notime = false;
     this.paused = true;
@@ -37,26 +47,18 @@ class AudioPlayer extends index.FoundationElement {
      * @internal
      */
     this._rewind = () => {
-      this.paused = true;
       if (this._playerEl) {
-        this._playerEl.pause();
         this._playerEl.currentTime = this._playerEl.duration * (Number(this._sliderEl.value) / 100);
       }
     };
   }
   connectedCallback() {
     super.connectedCallback();
-    this.addEventListener("keydown", this._rewind);
-    this.addEventListener("mousedown", this._rewind);
-    this.addEventListener("keyup", this._rewind);
     document.addEventListener("mouseup", this._rewind);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener("keydown", this._rewind);
-    this.removeEventListener("mousedown", this._rewind);
-    this.removeEventListener("keyup", this._rewind);
-    document.removeEventListener("mouseup", this._rewind);
+    document.addEventListener("mouseup", this._rewind);
   }
   /**
    * @internal
@@ -70,6 +72,22 @@ class AudioPlayer extends index.FoundationElement {
     }
     this.paused = !this.paused;
   }
+  /**
+   * @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();
+    }
+  }
   /**
    * @internal
    */
@@ -103,6 +121,19 @@ class AudioPlayer extends index.FoundationElement {
         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
    */
@@ -114,50 +145,86 @@ class AudioPlayer extends index.FoundationElement {
 }
 __decorateClass([
   index.attr({ attribute: "play-button-aria-label" })
-], AudioPlayer.prototype, "playButtonAriaLabel", 2);
+], AudioPlayer.prototype, "playButtonAriaLabel");
 __decorateClass([
   index.attr({ attribute: "pause-button-aria-label" })
-], AudioPlayer.prototype, "pauseButtonAriaLabel", 2);
+], AudioPlayer.prototype, "pauseButtonAriaLabel");
 __decorateClass([
   index.attr({ attribute: "slider-aria-label" })
-], AudioPlayer.prototype, "sliderAriaLabel", 2);
+], AudioPlayer.prototype, "sliderAriaLabel");
+__decorateClass([
+  index.attr({ attribute: "skip-forward-aria-label" })
+], AudioPlayer.prototype, "skipForwardButtonAriaLabel");
+__decorateClass([
+  index.attr({ attribute: "skip-backward-aria-label" })
+], AudioPlayer.prototype, "skipBackwardButtonAriaLabel");
 __decorateClass([
   index.attr
-], AudioPlayer.prototype, "connotation", 2);
+], AudioPlayer.prototype, "connotation");
 __decorateClass([
   index.attr
-], AudioPlayer.prototype, "src", 2);
+], AudioPlayer.prototype, "src");
 __decorateClass([
   index.attr({ mode: "boolean" })
-], AudioPlayer.prototype, "disabled", 2);
+], AudioPlayer.prototype, "disabled");
 __decorateClass([
   index.attr({ mode: "boolean" })
-], AudioPlayer.prototype, "notime", 2);
+], AudioPlayer.prototype, "notime");
+__decorateClass([
+  index.attr({
+    attribute: "skip-by",
+    converter: validSkipByConverter
+  })
+], AudioPlayer.prototype, "skipBy");
 __decorateClass([
   index.observable
-], AudioPlayer.prototype, "paused", 2);
+], AudioPlayer.prototype, "paused");
 __decorateClass([
   index.observable
-], AudioPlayer.prototype, "duration", 2);
+], AudioPlayer.prototype, "duration");
 applyMixins.applyMixins(AudioPlayer, localized.Localized);
 
-const getClasses = ({ disabled, duration }) => classNames.classNames(["disabled", Boolean(disabled) || !Boolean(duration)]);
+const getClasses = ({ disabled, duration }) => classNames.classNames(["disabled", Boolean(disabled) || !duration]);
 function renderButton(context) {
   const buttonTag = context.tagFor(definition.Button);
   return index.html`<${buttonTag} class="pause" @click="${(x) => x._togglePlay()}"
-	icon="${(x) => x.paused ? "play-solid" : "pause-solid"}" 
-	aria-label="${(x) => x.paused ? x.playButtonAriaLabel || x.locale.audioPlayer.playButtonLabel : x.pauseButtonAriaLabel || x.locale.audioPlayer.playButtonLabel}" 
-	size='condensed' 
+	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'
 	connotation="${(x) => x.connotation}"
-	?disabled="${(x) => x.disabled || !x.duration}" 
+	?disabled="${(x) => x.disabled || !x.duration}"
   ></${buttonTag}>`;
 }
+function renderBackwardSkipButtons(context) {
+  const buttonTag = context.tagFor(definition.Button);
+  return index.html`
+		<${buttonTag} class="skip backward" @click="${(x) => x._onSkipButtonClick(false)}"
+		icon="${(x) => x.skipBy == enums.MediaSkipBy.Five ? "5-sec-backward-line" : x.skipBy == enums.MediaSkipBy.Thirty ? "30-sec-backward-line" : "10-sec-backward-line"}"
+		size='condensed'
+		aria-label="${(x) => x.skipBackwardButtonAriaLabel || x.locale.audioPlayer.skipBackwardButton}"
+		connotation="${(x) => x.connotation}"
+		?disabled="${(x) => x.disabled || !x.duration}"
+		></${buttonTag}>
+	`;
+}
+function renderForwardSkipButtons(context) {
+  const buttonTag = context.tagFor(definition.Button);
+  return index.html`
+		<${buttonTag} class="skip forward" @click="${(x) => x._onSkipButtonClick(true)}"
+		icon="${(x) => x.skipBy == enums.MediaSkipBy.Five ? "5-sec-forward-line" : x.skipBy == enums.MediaSkipBy.Thirty ? "30-sec-forward-line" : "10-sec-forward-line"}"
+		size='condensed'
+		aria-label="${(x) => x.skipForwardButtonAriaLabel || x.locale.audioPlayer.skipForwardButton}"
+		connotation="${(x) => x.connotation}"
+		?disabled="${(x) => x.disabled || !x.duration}"
+		></${buttonTag}>
+	`;
+}
 function renderSlider(context) {
   const sliderTag = context.tagFor(definition$1.Slider);
   return index.html`<${sliderTag}
-	${ref.ref("_sliderEl")} class="slider" 
+	${ref.ref("_sliderEl")} class="slider"
 	aria-label="${(x) => x.sliderAriaLabel || x.locale.audioPlayer.sliderLabel}"
-	value="0" max="100" 
+	value="0" max="100"
 	connotation="${(x) => x.connotation}"
 	?disabled="${(x) => x.disabled || !x.duration}">
 	</${sliderTag}>`;
@@ -170,10 +237,23 @@ function renderTimestamp() {
 	</div>`;
 }
 const AudioPlayerTemplate = (context) => {
-  return index.html` <div class="base ${getClasses}">
+  return index.html` <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="controls">
-			${renderButton(context)} ${when.when((x) => !x.notime, renderTimestamp())}
-			${renderSlider(context)}
+			${when.when(
+    (x) => x.skipBy && x.skipBy != enums.MediaSkipBy.Zero,
+    renderBackwardSkipButtons(context)
+  )}
+			${renderButton(context)}
+			${when.when(
+    (x) => x.skipBy && x.skipBy != enums.MediaSkipBy.Zero,
+    renderForwardSkipButtons(context)
+  )}
+			${when.when((x) => !x.notime, renderTimestamp())} ${renderSlider(context)}
 		</div>
 		<audio
 			${ref.ref("_playerEl")}

package/shared/definition5.js

@@ -1,6 +1,7 @@
 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';
 import './affix.js';
 import './index2.js';
 import { L as Localized } from './localized.js';
@@ -9,25 +10,34 @@ import { w as when } from './when.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ".base{display:inline-flex;align-items:center;padding:8px;color:var(--vvd-color-canvas-text);user-select:none}.base .slider{min-inline-size:var(--audio-player-min-inline-size, 200px)}.base .controls{display:flex;align-items:center;gap:16px}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{margin-inline:6px;min-inline-size:32px}\n";
+const styles = ".base{display:inline-flex;align-items:center;padding:8px;color:var(--vvd-color-canvas-text);user-select:none}.base .slider{min-inline-size:var(--audio-player-min-inline-size, 200px)}.base .controls{display:flex;align-items:center;gap:16px}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{margin-inline:6px;min-inline-size:32px}";
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp(target, key, result);
   return result;
 };
+const validSkipByConverter = {
+  toView(value) {
+    return value;
+  },
+  fromView(value) {
+    return Object.values(MediaSkipBy).includes(value) ? value : void 0;
+  }
+};
 class AudioPlayer extends FoundationElement {
   constructor() {
     super(...arguments);
     this.playButtonAriaLabel = null;
     this.pauseButtonAriaLabel = null;
     this.sliderAriaLabel = null;
+    this.skipForwardButtonAriaLabel = null;
+    this.skipBackwardButtonAriaLabel = null;
     this.disabled = false;
     this.notime = false;
     this.paused = true;
@@ -35,26 +45,18 @@ class AudioPlayer extends FoundationElement {
      * @internal
      */
     this._rewind = () => {
-      this.paused = true;
       if (this._playerEl) {
-        this._playerEl.pause();
         this._playerEl.currentTime = this._playerEl.duration * (Number(this._sliderEl.value) / 100);
       }
     };
   }
   connectedCallback() {
     super.connectedCallback();
-    this.addEventListener("keydown", this._rewind);
-    this.addEventListener("mousedown", this._rewind);
-    this.addEventListener("keyup", this._rewind);
     document.addEventListener("mouseup", this._rewind);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener("keydown", this._rewind);
-    this.removeEventListener("mousedown", this._rewind);
-    this.removeEventListener("keyup", this._rewind);
-    document.removeEventListener("mouseup", this._rewind);
+    document.addEventListener("mouseup", this._rewind);
   }
   /**
    * @internal
@@ -68,6 +70,22 @@ class AudioPlayer extends FoundationElement {
     }
     this.paused = !this.paused;
   }
+  /**
+   * @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();
+    }
+  }
   /**
    * @internal
    */
@@ -101,6 +119,19 @@ class AudioPlayer extends FoundationElement {
         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
    */
@@ -112,50 +143,86 @@ class AudioPlayer extends FoundationElement {
 }
 __decorateClass([
   attr({ attribute: "play-button-aria-label" })
-], AudioPlayer.prototype, "playButtonAriaLabel", 2);
+], AudioPlayer.prototype, "playButtonAriaLabel");
 __decorateClass([
   attr({ attribute: "pause-button-aria-label" })
-], AudioPlayer.prototype, "pauseButtonAriaLabel", 2);
+], AudioPlayer.prototype, "pauseButtonAriaLabel");
 __decorateClass([
   attr({ attribute: "slider-aria-label" })
-], AudioPlayer.prototype, "sliderAriaLabel", 2);
+], AudioPlayer.prototype, "sliderAriaLabel");
+__decorateClass([
+  attr({ attribute: "skip-forward-aria-label" })
+], AudioPlayer.prototype, "skipForwardButtonAriaLabel");
+__decorateClass([
+  attr({ attribute: "skip-backward-aria-label" })
+], AudioPlayer.prototype, "skipBackwardButtonAriaLabel");
 __decorateClass([
   attr
-], AudioPlayer.prototype, "connotation", 2);
+], AudioPlayer.prototype, "connotation");
 __decorateClass([
   attr
-], AudioPlayer.prototype, "src", 2);
+], AudioPlayer.prototype, "src");
 __decorateClass([
   attr({ mode: "boolean" })
-], AudioPlayer.prototype, "disabled", 2);
+], AudioPlayer.prototype, "disabled");
 __decorateClass([
   attr({ mode: "boolean" })
-], AudioPlayer.prototype, "notime", 2);
+], AudioPlayer.prototype, "notime");
+__decorateClass([
+  attr({
+    attribute: "skip-by",
+    converter: validSkipByConverter
+  })
+], AudioPlayer.prototype, "skipBy");
 __decorateClass([
   observable
-], AudioPlayer.prototype, "paused", 2);
+], AudioPlayer.prototype, "paused");
 __decorateClass([
   observable
-], AudioPlayer.prototype, "duration", 2);
+], AudioPlayer.prototype, "duration");
 applyMixins(AudioPlayer, Localized);
 
-const getClasses = ({ disabled, duration }) => classNames(["disabled", Boolean(disabled) || !Boolean(duration)]);
+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()}"
-	icon="${(x) => x.paused ? "play-solid" : "pause-solid"}" 
-	aria-label="${(x) => x.paused ? x.playButtonAriaLabel || x.locale.audioPlayer.playButtonLabel : x.pauseButtonAriaLabel || x.locale.audioPlayer.playButtonLabel}" 
-	size='condensed' 
+	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'
 	connotation="${(x) => x.connotation}"
-	?disabled="${(x) => x.disabled || !x.duration}" 
+	?disabled="${(x) => x.disabled || !x.duration}"
   ></${buttonTag}>`;
 }
+function renderBackwardSkipButtons(context) {
+  const buttonTag = context.tagFor(Button);
+  return html`
+		<${buttonTag} class="skip backward" @click="${(x) => x._onSkipButtonClick(false)}"
+		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}"
+		connotation="${(x) => x.connotation}"
+		?disabled="${(x) => x.disabled || !x.duration}"
+		></${buttonTag}>
+	`;
+}
+function renderForwardSkipButtons(context) {
+  const buttonTag = context.tagFor(Button);
+  return html`
+		<${buttonTag} class="skip forward" @click="${(x) => x._onSkipButtonClick(true)}"
+		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}"
+		connotation="${(x) => x.connotation}"
+		?disabled="${(x) => x.disabled || !x.duration}"
+		></${buttonTag}>
+	`;
+}
 function renderSlider(context) {
   const sliderTag = context.tagFor(Slider);
   return html`<${sliderTag}
-	${ref("_sliderEl")} class="slider" 
+	${ref("_sliderEl")} class="slider"
 	aria-label="${(x) => x.sliderAriaLabel || x.locale.audioPlayer.sliderLabel}"
-	value="0" max="100" 
+	value="0" max="100"
 	connotation="${(x) => x.connotation}"
 	?disabled="${(x) => x.disabled || !x.duration}">
 	</${sliderTag}>`;
@@ -168,10 +235,23 @@ function renderTimestamp() {
 	</div>`;
 }
 const AudioPlayerTemplate = (context) => {
-  return html` <div class="base ${getClasses}">
+  return html` <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="controls">
-			${renderButton(context)} ${when((x) => !x.notime, renderTimestamp())}
-			${renderSlider(context)}
+			${when(
+    (x) => x.skipBy && x.skipBy != MediaSkipBy.Zero,
+    renderBackwardSkipButtons(context)
+  )}
+			${renderButton(context)}
+			${when(
+    (x) => x.skipBy && x.skipBy != MediaSkipBy.Zero,
+    renderForwardSkipButtons(context)
+  )}
+			${when((x) => !x.notime, renderTimestamp())} ${renderSlider(context)}
 		</div>
 		<audio
 			${ref("_playerEl")}

package/shared/definition50.cjs

@@ -19,16 +19,15 @@ 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}\n";
+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}";
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp(target, key, result);
   return result;
 };
@@ -41,19 +40,19 @@ class Tab extends Tab$1 {
 }
 __decorateClass([
   index.attr
-], Tab.prototype, "connotation", 2);
+], Tab.prototype, "connotation");
 __decorateClass([
   index.attr
-], Tab.prototype, "shape", 2);
+], Tab.prototype, "shape");
 __decorateClass([
   index.attr
-], Tab.prototype, "label", 2);
+], Tab.prototype, "label");
 __decorateClass([
   index.attr({ mode: "fromView" })
-], Tab.prototype, "tabIndex", 2);
+], Tab.prototype, "tabIndex");
 __decorateClass([
   index.attr({ attribute: "aria-selected" })
-], Tab.prototype, "ariaSelected", 2);
+], Tab.prototype, "ariaSelected");
 applyMixins.applyMixins(Tab, affix.AffixIconWithTrailing);
 
 const getClasses = ({

package/shared/definition50.js

@@ -17,16 +17,15 @@ __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}\n";
+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}";
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp(target, key, result);
   return result;
 };
@@ -39,19 +38,19 @@ class Tab extends Tab$1 {
 }
 __decorateClass([
   attr
-], Tab.prototype, "connotation", 2);
+], Tab.prototype, "connotation");
 __decorateClass([
   attr
-], Tab.prototype, "shape", 2);
+], Tab.prototype, "shape");
 __decorateClass([
   attr
-], Tab.prototype, "label", 2);
+], Tab.prototype, "label");
 __decorateClass([
   attr({ mode: "fromView" })
-], Tab.prototype, "tabIndex", 2);
+], Tab.prototype, "tabIndex");
 __decorateClass([
   attr({ attribute: "aria-selected" })
-], Tab.prototype, "ariaSelected", 2);
+], Tab.prototype, "ariaSelected");
 applyMixins(Tab, AffixIconWithTrailing);
 
 const getClasses = ({

package/shared/definition51.cjs

@@ -383,16 +383,15 @@ index.__decorate([
 ], Tabs$1.prototype, "showActiveIndicator", void 0);
 applyMixins.applyMixins(Tabs$1, startEnd.StartEnd);
 
-const styles = ":host{display:block}.base{display:grid;box-sizing:border-box}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-tabs-cta-primary, var(--vvd-color-cta-500))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-tabs-accent-primary, var(--vvd-color-canvas-text))}.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%}.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}\n";
+const styles = ":host{display:block}.base{display:grid;box-sizing:border-box}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-tabs-cta-primary, var(--vvd-color-cta-500))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-tabs-accent-primary, var(--vvd-color-canvas-text))}.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%}.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}";
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp(target, key, result);
   return result;
 };
@@ -487,16 +486,16 @@ class Tabs extends Tabs$1 {
 }
 __decorateClass([
   index.observable
-], Tabs.prototype, "tablist", 2);
+], Tabs.prototype, "tablist");
 __decorateClass([
   index.attr
-], Tabs.prototype, "connotation", 2);
+], Tabs.prototype, "connotation");
 __decorateClass([
   index.attr
-], Tabs.prototype, "gutters", 2);
+], Tabs.prototype, "gutters");
 __decorateClass([
   index.attr({ mode: "boolean", attribute: "scrollable-panel" })
-], Tabs.prototype, "scrollablePanel", 2);
+], Tabs.prototype, "scrollablePanel");
 
 const getClasses = ({
   connotation,