@vonage/vivid 4.28.0 → 4.30.0

package/shared/definition45.js

@@ -19,9 +19,9 @@ import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
 import { r as repeat } from './repeat.js';
 
-const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.fieldset:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.fieldset:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.fieldset:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.fieldset:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;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);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.fieldset:focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:min(100px,40%);outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 100%)}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
+const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.fieldset:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.fieldset:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.fieldset:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.fieldset:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;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);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:min(100px,40%);outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 100%)}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}::slotted([data-vvd-component=option][data-highlighted]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}";
 
-const optionTagStyles = ".base.connotation-cta{--_connotation-color-contrast: var(--vvd-option-tag-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--fill-color);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.disabled){--text-color: var(--_connotation-color-contrast);--fill-color: color-mix( in srgb, var(--_connotation-color-contrast), transparent 87.5% );--outline-color: transparent}.base.disabled{--text-color: var(--vvd-color-neutral-300);--fill-color: color-mix( in srgb, var(--vvd-color-neutral-800), transparent 87.5% );--outline-color: transparent}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}";
+const optionTagStyles = ".base.connotation-cta{--_connotation-color-contrast: var(--vvd-option-tag-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--fill-color);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.disabled){--text-color: var(--_connotation-color-contrast);--fill-color: var(--_connotation-color-soft);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base:not(.disabled){--fill-color: color-mix( in srgb, var(--_connotation-color-contrast), transparent 87.5% )}}.base.disabled{--text-color: var(--vvd-color-neutral-300);--fill-color: var(--vvd-color-neutral-200);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base.disabled{--fill-color: color-mix( in srgb, var(--vvd-color-neutral-800), transparent 87.5% )}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}";
 
 var __defProp$1 = Object.defineProperty;
 var __decorateClass$1 = (decorators, target, key, kind) => {
@@ -449,7 +449,9 @@ class SearchableSelect extends WithFeedback(
   }
   #transitionHighlightedOptionTo(index) {
     if (typeof this._highlightedOptionIndex === "number") {
-      this._filteredEnabledOptions[this._highlightedOptionIndex]._highlighted = false;
+      const prevOption = this._filteredEnabledOptions[this._highlightedOptionIndex];
+      prevOption._highlighted = false;
+      prevOption.removeAttribute("data-highlighted");
     }
     if (typeof index === "number") {
       if (!this._filteredEnabledOptions.length) {
@@ -465,6 +467,7 @@ class SearchableSelect extends WithFeedback(
     if (typeof this._highlightedOptionIndex === "number") {
       const highlightedOption = this._filteredEnabledOptions[this._highlightedOptionIndex];
       highlightedOption._highlighted = true;
+      highlightedOption.setAttribute("data-highlighted", "");
       scrollIntoView(highlightedOption, this._listbox, "nearest");
       this._changeDescription = this.locale.searchableSelect.optionFocusedMessage(
         highlightedOption.text,
@@ -539,7 +542,10 @@ class SearchableSelect extends WithFeedback(
     return this.disabled || option.disabled;
   }
   #textForValue(value) {
-    return this._slottedOptions?.find((option) => option.value === value)?.text;
+    const option = this._slottedOptions?.find(
+      (option2) => option2.value === value
+    );
+    return option?.label;
   }
   /**
    * @internal
@@ -966,7 +972,8 @@ const getStateClasses = (x) => classNames(
   [`appearance-${x.appearance}`, Boolean(x.appearance)],
   [`shape-${x.shape}`, Boolean(x.shape)],
   ["error", Boolean(x.errorValidationMessage)],
-  ["success", !!x.successText]
+  ["success", !!x.successText],
+  ["has-highlighted-option", x._highlightedOptionIndex !== null]
 );
 function renderLabel() {
   return html`

package/shared/definition47.cjs

@@ -8,7 +8,7 @@ const enums = require('./enums.cjs');
 const classNames = require('./class-names.cjs');
 const when = require('./when.cjs');
 
-const styles = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-selectable-box-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all: var(--vvd-selectable-box-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;padding-block-start:calc(var(--selectable-box-spacing, 16px) + 36px);text-align:start}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px);inset-inline-end:var(--selectable-box-spacing, 16px)}";
+const styles = ":host{display:flex}.base{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-selectable-box-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all: var(--vvd-selectable-box-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;text-align:start}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing, 16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing, 16px)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -25,6 +25,7 @@ class SelectableBox extends delegatesAria.DelegatesAria(vividElement.VividElemen
     this.checked = false;
     this.clickable = false;
     this.clickableBox = false;
+    this.controlPlacement = "end-stacked";
     this.tight = false;
   }
   /**
@@ -63,6 +64,9 @@ __decorateClass([
 __decorateClass([
   vividElement.attr({ attribute: "control-type" })
 ], SelectableBox.prototype, "controlType");
+__decorateClass([
+  vividElement.attr({ attribute: "control-placement", mode: "fromView" })
+], SelectableBox.prototype, "controlPlacement");
 __decorateClass([
   vividElement.attr({ mode: "boolean" })
 ], SelectableBox.prototype, "tight");
@@ -71,14 +75,16 @@ const getClasses = ({
   connotation,
   tight,
   checked,
-  clickableBox
+  clickableBox,
+  controlPlacement
 }) => classNames.classNames(
   "base",
   [`connotation-${connotation}`, Boolean(connotation)],
   ["tight", tight],
   ["selected", checked],
   ["clickable", clickableBox],
-  ["readonly", !clickableBox]
+  ["readonly", !clickableBox],
+  [`control-placement-${controlPlacement}`, Boolean(controlPlacement)]
 );
 function handleControlChange(x) {
   if (!x.clickableBox) x._handleCheckedChange();
@@ -96,7 +102,7 @@ function checkbox(context) {
       { onlySpecified: true }
     )}
 			@change="${(x) => handleControlChange(x)}"
-			class="control checkbox"
+			class="control checkbox ${(x) => x.controlPlacement}"
 			connotation="${(x) => x.connotation === "cta" ? enums.Connotation.CTA : enums.Connotation.Accent}"
 			:checked="${(x) => x.checked}"
 			inert="${(x) => x.clickableBox ? true : null}"
@@ -116,7 +122,7 @@ function radio(context) {
       { onlySpecified: true }
     )}
 			@change="${(x) => handleControlChange(x)}"
-			class="control radio"
+			class="control radio ${(x) => x.controlPlacement}"
 			connotation="${(x) => x.connotation === "cta" ? enums.Connotation.CTA : enums.Connotation.Accent}"
 			:checked="${(x) => x.checked}"
 			inert="${(x) => x.clickableBox ? true : null}"

package/shared/definition47.js

@@ -6,7 +6,7 @@ import { C as Connotation } from './enums.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
 
-const styles = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-selectable-box-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all: var(--vvd-selectable-box-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;padding-block-start:calc(var(--selectable-box-spacing, 16px) + 36px);text-align:start}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px);inset-inline-end:var(--selectable-box-spacing, 16px)}";
+const styles = ":host{display:flex}.base{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-selectable-box-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all: var(--vvd-selectable-box-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;text-align:start}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing, 16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing, 16px)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -23,6 +23,7 @@ class SelectableBox extends DelegatesAria(VividElement) {
     this.checked = false;
     this.clickable = false;
     this.clickableBox = false;
+    this.controlPlacement = "end-stacked";
     this.tight = false;
   }
   /**
@@ -61,6 +62,9 @@ __decorateClass([
 __decorateClass([
   attr({ attribute: "control-type" })
 ], SelectableBox.prototype, "controlType");
+__decorateClass([
+  attr({ attribute: "control-placement", mode: "fromView" })
+], SelectableBox.prototype, "controlPlacement");
 __decorateClass([
   attr({ mode: "boolean" })
 ], SelectableBox.prototype, "tight");
@@ -69,14 +73,16 @@ const getClasses = ({
   connotation,
   tight,
   checked,
-  clickableBox
+  clickableBox,
+  controlPlacement
 }) => classNames(
   "base",
   [`connotation-${connotation}`, Boolean(connotation)],
   ["tight", tight],
   ["selected", checked],
   ["clickable", clickableBox],
-  ["readonly", !clickableBox]
+  ["readonly", !clickableBox],
+  [`control-placement-${controlPlacement}`, Boolean(controlPlacement)]
 );
 function handleControlChange(x) {
   if (!x.clickableBox) x._handleCheckedChange();
@@ -94,7 +100,7 @@ function checkbox(context) {
       { onlySpecified: true }
     )}
 			@change="${(x) => handleControlChange(x)}"
-			class="control checkbox"
+			class="control checkbox ${(x) => x.controlPlacement}"
 			connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
 			:checked="${(x) => x.checked}"
 			inert="${(x) => x.clickableBox ? true : null}"
@@ -114,7 +120,7 @@ function radio(context) {
       { onlySpecified: true }
     )}
 			@change="${(x) => handleControlChange(x)}"
-			class="control radio"
+			class="control radio ${(x) => x.controlPlacement}"
 			connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
 			:checked="${(x) => x.checked}"
 			inert="${(x) => x.clickableBox ? true : null}"

package/shared/definition5.cjs

@@ -57,6 +57,8 @@ class AudioPlayer extends localized.Localized(vividElement.VividElement) {
     this.notime = false;
     this.playbackRates = null;
     this.#playerEl = new Audio();
+    this.#isProgrammaticSliderUpdate = false;
+    this.durationFallback = false;
     this.#pausedChanged = (pausing) => {
       if (pausing === this.paused) {
         this.#setPausedState();
@@ -70,18 +72,28 @@ class AudioPlayer extends localized.Localized(vividElement.VividElement) {
       }
       this.#setPausedState();
     };
-    this.#currentTimeChanged = false;
     this.#updateProgress = () => {
-      this.#currentTimeChanged = true;
       vividElement.Observable.notify(this, "currentTime");
-      const percent = this.currentTime / this.duration * 100;
-      this.#sliderEl.value = percent.toString();
-      if (percent === 100) {
+      const duration = this.duration;
+      const currentTime = this.currentTime;
+      const isValid = Number.isFinite(duration) && duration > 0 && Number.isFinite(currentTime) && currentTime >= 0;
+      const percent = isValid ? currentTime / duration * 100 : 0;
+      if (this.#sliderEl) {
+        this.#isProgrammaticSliderUpdate = true;
+        this.#sliderEl.value = percent.toString();
+        this.#isProgrammaticSliderUpdate = false;
+      }
+      if (isValid && percent === 100) {
         this.pause();
       }
     };
     this.#updateTotalTime = () => {
       vividElement.Observable.notify(this, "duration");
+      if (!Number.isFinite(this.#playerEl.duration) || this.#playerEl.duration <= 0) {
+        if (this.durationFallback) {
+          this.#fetchAndCacheAudioBuffer();
+        }
+      }
     };
     this.#updateCurrentTimeOnSliderChange = () => {
       if (!this.paused && this.#sliderEl.isDragging) {
@@ -93,16 +105,28 @@ class AudioPlayer extends localized.Localized(vividElement.VividElement) {
           }
         }, 0);
       }
-      if (!this.#currentTimeChanged && this.#playerEl) {
+      if (this.#isProgrammaticSliderUpdate) {
+        return;
+      }
+      if (this.#playerEl) {
         this.currentTime = this.duration * Number(this.#sliderEl.value) / 100;
       }
-      this.#currentTimeChanged = false;
     };
     this.#setPausedState = () => {
       vividElement.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;
+    }
+    this.#audioBuffer = void 0;
+    if (this.#fetchAbortController) {
+      this.#fetchAbortController.abort();
+    }
+    this.#fetchAbortController = void 0;
   }
   get playbackRate() {
     vividElement.Observable.track(this, "playbackRate");
@@ -112,22 +136,41 @@ class AudioPlayer extends localized.Localized(vividElement.VividElement) {
     this.#playerEl.playbackRate = value;
     vividElement.Observable.notify(this, "playbackRate");
   }
-  srcChanged() {
-    if (this.src === void 0) {
-      this.#playerEl.removeAttribute("src");
-    } else {
-      this.#playerEl.src = this.src;
-    }
-  }
   get paused() {
     vividElement.Observable.track(this, "paused");
     return this.#playerEl.paused;
   }
   set paused(_) {
   }
+  #audioBuffer;
+  #fetchAbortController;
+  async #fetchAndCacheAudioBuffer() {
+    if (this.#audioBuffer || !this.src) return;
+    this.#fetchAbortController = new AbortController();
+    const signal = this.#fetchAbortController.signal;
+    try {
+      const response = await fetch(this.src, { signal });
+      const arrayBuffer = await response.arrayBuffer();
+      const audioContext = new window.AudioContext();
+      const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+      audioContext.close();
+      this.#audioBuffer = audioBuffer;
+      vividElement.Observable.notify(this, "duration");
+    } catch (e) {
+    } finally {
+      this.#fetchAbortController = void 0;
+    }
+  }
   get duration() {
     vividElement.Observable.track(this, "duration");
-    return this.#playerEl.duration;
+    const duration = this.#playerEl.duration;
+    if (Number.isFinite(duration) && duration > 0) {
+      return duration;
+    }
+    if (this.#audioBuffer && this.#audioBuffer.duration > 0) {
+      return this.#audioBuffer.duration;
+    }
+    return duration;
   }
   set duration(_) {
   }
@@ -142,15 +185,23 @@ class AudioPlayer extends localized.Localized(vividElement.VividElement) {
     return this.shadowRoot.querySelector(".slider");
   }
   #playerEl;
+  #isProgrammaticSliderUpdate;
   connectedCallback() {
     super.connectedCallback();
+    this.#playerEl.addEventListener("timeupdate", this.#updateProgress);
+    this.#playerEl.addEventListener("loadedmetadata", this.#updateTotalTime);
+    this.#playerEl.addEventListener("durationchange", this.#updateTotalTime);
     this.#setSliderInteractionListeners();
     this.#setPausedState();
+    this.#updateProgress();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#setSliderInteractionListeners(false);
     this.pause();
+    this.#playerEl.removeEventListener("timeupdate", this.#updateProgress);
+    this.#playerEl.removeEventListener("loadedmetadata", this.#updateTotalTime);
+    this.#playerEl.removeEventListener("durationchange", this.#updateTotalTime);
   }
   play() {
     this.#pausedChanged(PLAY);
@@ -165,12 +216,24 @@ class AudioPlayer extends localized.Localized(vividElement.VividElement) {
     }
   }
   #pausedChanged;
-  #currentTimeChanged;
   #updateProgress;
   #updateTotalTime;
   #dragInterval;
   #updateCurrentTimeOnSliderChange;
   #setPausedState;
+  /**
+   * Skips the current time by the skipBy value
+   *
+   * @param skipDirection - the direction to skip
+   *
+   * @internal
+   */
+  skip(skipDirection) {
+    const currentTime = this.currentTime;
+    const skipValue = parseInt(this.skipBy) * skipDirection;
+    const newTime = currentTime + skipValue;
+    this.currentTime = Math.max(0, Math.min(this.duration, newTime));
+  }
 }
 __decorateClass([
   vividElement.attr({ attribute: "play-button-aria-label" })
@@ -208,16 +271,10 @@ __decorateClass([
 __decorateClass([
   vividElement.attr({ attribute: "playback-rates" })
 ], AudioPlayer.prototype, "playbackRates");
+__decorateClass([
+  vividElement.attr({ mode: "boolean", attribute: "duration-fallback" })
+], AudioPlayer.prototype, "durationFallback");
 
-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 = ({
   notime,
   disabled,
@@ -249,7 +306,7 @@ function renderBackwardSkipButtons(context) {
   const buttonTag = context.tagFor(definition$1.Button);
   return vividElement.html`
 		<${buttonTag} class="skip backward"
-			@click="${(element) => skip(element, SKIP_DIRECTIONS.BACKWARD)}"
+			@click="${(element) => element.skip(SKIP_DIRECTIONS.BACKWARD)}"
 		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}"
@@ -262,7 +319,7 @@ function renderForwardSkipButtons(context) {
   const buttonTag = context.tagFor(definition$1.Button);
   return vividElement.html`
 		<${buttonTag} class="skip forward"
-		@click="${(element) => skip(element, SKIP_DIRECTIONS.FORWARD)}"
+		@click="${(element) => element.skip(SKIP_DIRECTIONS.FORWARD)}"
 		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}"
@@ -276,7 +333,6 @@ function renderSlider(context) {
   return vividElement.html`
 	<${sliderTag}
 		class="slider"
-		value="0"
 		aria-label="${(x) => x.sliderAriaLabel || x.locale.audioPlayer.sliderLabel}"
 		max="100"
 		aria-valuetext="${(x) => formatTime(x.currentTime)}"

package/shared/definition5.js

@@ -55,6 +55,8 @@ class AudioPlayer extends Localized(VividElement) {
     this.notime = false;
     this.playbackRates = null;
     this.#playerEl = new Audio();
+    this.#isProgrammaticSliderUpdate = false;
+    this.durationFallback = false;
     this.#pausedChanged = (pausing) => {
       if (pausing === this.paused) {
         this.#setPausedState();
@@ -68,18 +70,28 @@ class AudioPlayer extends Localized(VividElement) {
       }
       this.#setPausedState();
     };
-    this.#currentTimeChanged = false;
     this.#updateProgress = () => {
-      this.#currentTimeChanged = true;
       Observable.notify(this, "currentTime");
-      const percent = this.currentTime / this.duration * 100;
-      this.#sliderEl.value = percent.toString();
-      if (percent === 100) {
+      const duration = this.duration;
+      const currentTime = this.currentTime;
+      const isValid = Number.isFinite(duration) && duration > 0 && Number.isFinite(currentTime) && currentTime >= 0;
+      const percent = isValid ? currentTime / duration * 100 : 0;
+      if (this.#sliderEl) {
+        this.#isProgrammaticSliderUpdate = true;
+        this.#sliderEl.value = percent.toString();
+        this.#isProgrammaticSliderUpdate = false;
+      }
+      if (isValid && percent === 100) {
         this.pause();
       }
     };
     this.#updateTotalTime = () => {
       Observable.notify(this, "duration");
+      if (!Number.isFinite(this.#playerEl.duration) || this.#playerEl.duration <= 0) {
+        if (this.durationFallback) {
+          this.#fetchAndCacheAudioBuffer();
+        }
+      }
     };
     this.#updateCurrentTimeOnSliderChange = () => {
       if (!this.paused && this.#sliderEl.isDragging) {
@@ -91,16 +103,28 @@ class AudioPlayer extends Localized(VividElement) {
           }
         }, 0);
       }
-      if (!this.#currentTimeChanged && this.#playerEl) {
+      if (this.#isProgrammaticSliderUpdate) {
+        return;
+      }
+      if (this.#playerEl) {
         this.currentTime = this.duration * Number(this.#sliderEl.value) / 100;
       }
-      this.#currentTimeChanged = false;
     };
     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;
+    }
+    this.#audioBuffer = void 0;
+    if (this.#fetchAbortController) {
+      this.#fetchAbortController.abort();
+    }
+    this.#fetchAbortController = void 0;
   }
   get playbackRate() {
     Observable.track(this, "playbackRate");
@@ -110,22 +134,41 @@ class AudioPlayer extends Localized(VividElement) {
     this.#playerEl.playbackRate = value;
     Observable.notify(this, "playbackRate");
   }
-  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(_) {
   }
+  #audioBuffer;
+  #fetchAbortController;
+  async #fetchAndCacheAudioBuffer() {
+    if (this.#audioBuffer || !this.src) return;
+    this.#fetchAbortController = new AbortController();
+    const signal = this.#fetchAbortController.signal;
+    try {
+      const response = await fetch(this.src, { signal });
+      const arrayBuffer = await response.arrayBuffer();
+      const audioContext = new window.AudioContext();
+      const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+      audioContext.close();
+      this.#audioBuffer = audioBuffer;
+      Observable.notify(this, "duration");
+    } catch (e) {
+    } finally {
+      this.#fetchAbortController = void 0;
+    }
+  }
   get duration() {
     Observable.track(this, "duration");
-    return this.#playerEl.duration;
+    const duration = this.#playerEl.duration;
+    if (Number.isFinite(duration) && duration > 0) {
+      return duration;
+    }
+    if (this.#audioBuffer && this.#audioBuffer.duration > 0) {
+      return this.#audioBuffer.duration;
+    }
+    return duration;
   }
   set duration(_) {
   }
@@ -140,15 +183,23 @@ class AudioPlayer extends Localized(VividElement) {
     return this.shadowRoot.querySelector(".slider");
   }
   #playerEl;
+  #isProgrammaticSliderUpdate;
   connectedCallback() {
     super.connectedCallback();
+    this.#playerEl.addEventListener("timeupdate", this.#updateProgress);
+    this.#playerEl.addEventListener("loadedmetadata", this.#updateTotalTime);
+    this.#playerEl.addEventListener("durationchange", this.#updateTotalTime);
     this.#setSliderInteractionListeners();
     this.#setPausedState();
+    this.#updateProgress();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#setSliderInteractionListeners(false);
     this.pause();
+    this.#playerEl.removeEventListener("timeupdate", this.#updateProgress);
+    this.#playerEl.removeEventListener("loadedmetadata", this.#updateTotalTime);
+    this.#playerEl.removeEventListener("durationchange", this.#updateTotalTime);
   }
   play() {
     this.#pausedChanged(PLAY);
@@ -163,12 +214,24 @@ class AudioPlayer extends Localized(VividElement) {
     }
   }
   #pausedChanged;
-  #currentTimeChanged;
   #updateProgress;
   #updateTotalTime;
   #dragInterval;
   #updateCurrentTimeOnSliderChange;
   #setPausedState;
+  /**
+   * Skips the current time by the skipBy value
+   *
+   * @param skipDirection - the direction to skip
+   *
+   * @internal
+   */
+  skip(skipDirection) {
+    const currentTime = this.currentTime;
+    const skipValue = parseInt(this.skipBy) * skipDirection;
+    const newTime = currentTime + skipValue;
+    this.currentTime = Math.max(0, Math.min(this.duration, newTime));
+  }
 }
 __decorateClass([
   attr({ attribute: "play-button-aria-label" })
@@ -206,16 +269,10 @@ __decorateClass([
 __decorateClass([
   attr({ attribute: "playback-rates" })
 ], AudioPlayer.prototype, "playbackRates");
+__decorateClass([
+  attr({ mode: "boolean", attribute: "duration-fallback" })
+], AudioPlayer.prototype, "durationFallback");
 
-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 = ({
   notime,
   disabled,
@@ -247,7 +304,7 @@ function renderBackwardSkipButtons(context) {
   const buttonTag = context.tagFor(Button);
   return html`
 		<${buttonTag} class="skip backward"
-			@click="${(element) => skip(element, SKIP_DIRECTIONS.BACKWARD)}"
+			@click="${(element) => element.skip(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}"
@@ -260,7 +317,7 @@ function renderForwardSkipButtons(context) {
   const buttonTag = context.tagFor(Button);
   return html`
 		<${buttonTag} class="skip forward"
-		@click="${(element) => skip(element, SKIP_DIRECTIONS.FORWARD)}"
+		@click="${(element) => element.skip(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}"
@@ -274,7 +331,6 @@ function renderSlider(context) {
   return html`
 	<${sliderTag}
 		class="slider"
-		value="0"
 		aria-label="${(x) => x.sliderAriaLabel || x.locale.audioPlayer.sliderLabel}"
 		max="100"
 		aria-valuetext="${(x) => formatTime(x.currentTime)}"