@solid-design-system/components 4.2.1 → 4.2.3

package/{dist-versioned/chunks/chunk.EJ6ZLEEW.js → dist/chunks/chunk.G5A32O76.js}

@@ -23,6 +23,7 @@ var translation = {
     if (num === 0) return "";
     return `Optionen ausgew\xE4hlt (${num})`;
   },
+  openTranscript: "Abschrift \xF6ffnen",
   pauseAudio: "Audio pausieren",
   playAudio: "Audio abspielen",
   playbackSpeed: "Wiedergabe Geschwindigkeit",
@@ -32,6 +33,7 @@ var translation = {
   removed: (name) => `${name} entfernt`,
   resize: "Gr\xF6\xDFe \xE4ndern",
   scrollToEnd: "Zum Ende scrollen",
+  seekBar: "Bar suchen",
   scrollToStart: "Zum Anfang scrollen",
   selectAColorFromTheScreen: "Farbe vom Bildschirm ausw\xE4hlen",
   selectDefaultPlaceholder: "Bitte ausw\xE4hlen",
@@ -41,6 +43,7 @@ var translation = {
   slideNum: (slide, count) => `Folie ${slide} von ${count}`,
   tagsSelected: "Optionen ausgew\xE4hlt",
   toggleColorFormat: "Farbformat umschalten",
+  transcriptIsOpen: "Abschrift ist offen",
   unmute: "Unmute"
 };
 registerTranslation(translation);

package/dist/chunks/{chunk.ZXR3YX6W.js → chunk.J7KRCFRG.js}

@@ -23,6 +23,7 @@ var translation = {
     if (num === 0) return "";
     return `Options Selected (${num})`;
   },
+  openTranscript: "Open transcript",
   pauseAudio: "Pause Audio",
   playAudio: "Play Audio",
   playbackSpeed: "Playback Speed",
@@ -33,6 +34,7 @@ var translation = {
   resize: "Resize",
   scrollToEnd: "Scroll to end",
   scrollToStart: "Scroll to start",
+  seekBar: "Seek bar",
   selectAColorFromTheScreen: "Select a color from the screen",
   selectDefaultPlaceholder: "Please select",
   showLess: "Show less",
@@ -41,6 +43,7 @@ var translation = {
   slideNum: (num) => `Slide ${num}`,
   tagsSelected: "Options selected",
   toggleColorFormat: "Toggle color format",
+  transcriptIsOpen: "Transcript is open",
   unmute: "Unmute"
 };
 registerTranslation(translation);

package/dist/chunks/{chunk.TLTEUGRS.js → chunk.UTL7JKFI.js}

@@ -33,20 +33,20 @@ var SdAudio = class extends SolidElement {
     this.duration = "";
     this.isPlaying = false;
     this.isMuted = false;
+    this.isTranscriptOpen = false;
     this.progress = 0;
-    this.setAudioProgress = () => {
-      this.progressSlider.max = Math.floor(this.audioElement.duration).toString();
-    };
     this.updateCurrentTime = this.updateCurrentTime.bind(this);
     this.handleAudioEnd = this.handleAudioEnd.bind(this);
     this.handleAudioProgress = this.handleAudioProgress.bind(this);
     this.handleAudioProgressKeydown = this.handleAudioProgressKeydown.bind(this);
+    this.handleTranscriptDrawerToggle = this.handleTranscriptDrawerToggle.bind(this);
   }
   firstUpdated() {
     if (!this.audioElement) return;
     this.audioElement.addEventListener("timeupdate", this.updateCurrentTime);
     this.audioElement.addEventListener("ended", this.handleAudioEnd);
     this.audioElement.setAttribute("controlsList", "nodownload");
+    document.addEventListener("sd-after-hide", this.handleTranscriptDrawerToggle);
     this.audioElement.playbackRate = this.speed;
     if (this.animated) {
       this.initAnimation();
@@ -73,7 +73,7 @@ var SdAudio = class extends SolidElement {
     if (!this.audioElement) return;
     const currentTime = this.audioElement.currentTime;
     this.currentTime = this.formatTime(currentTime);
-    this.progress = Math.floor(currentTime);
+    this.progress = currentTime;
     if (this.progressSlider) {
       this.progressSlider.value = this.progress.toString();
     }
@@ -87,7 +87,7 @@ var SdAudio = class extends SolidElement {
       return;
     }
     this.duration = this.formatTime(this.audioElement.duration);
-    this.setAudioProgress();
+    this.progressSlider.max = this.audioElement.duration.toString();
   }
   playAudio() {
     if (!this.audioElement) return;
@@ -168,9 +168,13 @@ var SdAudio = class extends SolidElement {
       this.handleAudioProgress();
     }
   }
+  handleTranscriptDrawerToggle() {
+    this.isTranscriptOpen = !this.isTranscriptOpen;
+  }
   showTranscript() {
     this.emit("sd-transcript-click");
     this.drawer.open = true;
+    this.handleTranscriptDrawerToggle();
   }
   showTranscriptKeydown(event) {
     if (event.key === "Enter" || event.key === " ") {
@@ -284,10 +288,10 @@ var SdAudio = class extends SolidElement {
     )}" part="audio-controls"><button class="${cx(
       "playback-speed justify-self-start text-base font-bold hover:cursor-pointer sd-interactive",
       this.inverted && "sd-interactive--inverted"
-    )}" aria-label="${this.localize.term("playbackSpeed")}" tabindex="0" @click="${this.togglePlaybackSpeed}" @keydown="${this.togglePlaybackSpeedKeydown}" part="playback-speed">${this.speed}x</button><sd-button ?inverted="${this.inverted ? true : false}" part="play-button" size="lg" @click="${!this.isPlaying ? this.playAudio : this.pauseAudio}" aria-label="${this.isPlaying ? this.localize.term("pauseAudio") : this.localize.term("playAudio")}" class="text-3xl">${this.isPlaying ? html`<slot name="pause-icon"><sd-icon class="text-3xl" name="pause" library="system"></sd-icon></slot>` : html`<slot name="play-icon"><sd-icon class="text-3xl" name="start" library="system"></sd-icon></slot>`}</sd-button><div class="flex items-center justify-self-end">${this.hasSlotController.test("transcript") ? html`<button class="${cx(
+    )}" aria-label="${this.localize.term("playbackSpeed")}" tabindex="0" @click="${this.togglePlaybackSpeed}" @keydown="${this.togglePlaybackSpeedKeydown}" part="playback-speed">${this.speed}x</button><sd-button ?inverted="${this.inverted ? true : false}" part="play-button" size="lg" @click="${!this.isPlaying ? this.playAudio : this.pauseAudio}" aria-label="${this.isPlaying ? this.localize.term("pauseAudio") : this.localize.term("playAudio")}" title="${this.isPlaying ? this.localize.term("pauseAudio") : this.localize.term("playAudio")}" class="text-3xl">${this.isPlaying ? html`<slot name="pause-icon"><sd-icon class="text-3xl" name="pause" library="system"></sd-icon></slot>` : html`<slot name="play-icon"><sd-icon class="text-3xl" name="start" library="system"></sd-icon></slot>`}</sd-button><div class="flex items-center justify-self-end">${this.hasSlotController.test("transcript") ? html`<button class="${cx(
       "mr-6 w-6 h-6 hover:cursor-pointer sd-interactive",
       this.inverted && "sd-interactive--inverted"
-    )}" @click="${this.showTranscript}" @keydown="${this.showTranscriptKeydown}" tab-index="0"><sd-icon class="w-6 h-6" name="transcript" library="system" label="${this.isMuted ? this.localize.term("unmute") : this.localize.term("mute")}"></sd-icon></button>` : null} <button class="${cx("w-6 h-6 hover:cursor-pointer sd-interactive", this.inverted && "sd-interactive--inverted")}" part="volume" aria-label="${this.localize.term("mute")}" tabindex="0" @click="${this.toggleMute}" @keydown="${this.toggleMuteKeydown}"><sd-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="system"></sd-icon></button></div></div>`;
+    )}" aria-label="${this.isTranscriptOpen ? this.localize.term("transcriptIsOpen") : this.localize.term("openTranscript")}" @click="${this.showTranscript}" @keydown="${this.showTranscriptKeydown}" tab-index="0" part="transcript"><sd-icon class="w-6 h-6" name="transcript" library="system"></sd-icon></button>` : null} <button class="${cx("w-6 h-6 hover:cursor-pointer sd-interactive", this.inverted && "sd-interactive--inverted")}" part="volume" aria-label="${!this.isMuted ? this.localize.term("mute") : this.localize.term("unmute")}" tabindex="0" @click="${this.toggleMute}" @keydown="${this.toggleMuteKeydown}"><sd-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="system"></sd-icon></button></div></div>`;
     const renderTimestamps = html`<div class="${cx(
       "w-full flex justify-between",
       this.reversedLayout ? "mb-2" : "mt-2",
@@ -297,7 +301,7 @@ var SdAudio = class extends SolidElement {
     return html`<div class="${cx("w-full flex relative", this.reversedLayout ? "flex-col-reverse" : "flex-col")}" aria-label="${this.localize.term("audioPlayer")}" part="audio-player"><slot @slotchange="${this.updateAudioDuration}"></slot>${!this.animated || this.animated && this.reversedLayout ? renderAudioControls : null}<div class="relative">${this.animated && !this.reversedLayout ? html`${renderAudioControls}` : null} ${this.animated ? html`<canvas class="w-full h-16"></canvas>` : null} ${!this.hideTimestamps && this.animated && this.reversedLayout ? renderTimestamps : null} <input class="${cx(
       "progress-slider bg-primary appearance-none w-full cursor-pointer outline-none h-1 flex items-center sd-interactive",
       this.inverted && "sd-interactive--inverted"
-    )}" type="range" max="100" step="0.001" value="${this.progress}" tabindex="0" @input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}" part="progress-slider" style="background:linear-gradient(to right,${this.inverted ? "rgb(var(--sd-color-white, 255 255 255) / 1)" : "rgb(var(--sd-color-primary, 0 53 142) / 1)"} ${progressPercentage}%,${this.animated ? "transparent" : this.inverted ? "rgb(var(--sd-color-primary-400, 153 171 208) / 1)" : "rgb(var(--sd-color-grey-400, 195 195 195) / 1)"} ${progressPercentage}%)"></div>${this.hasSlotController.test("transcript") ? html`<sd-drawer><slot name="transcript"></slot></sd-drawer>` : null} ${!this.hideTimestamps && (!this.animated || !this.reversedLayout) ? renderTimestamps : null}</div>`;
+    )}" type="range" max="100" step="0.001" value="${this.progress}" tabindex="0" @input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}" aria-label="${this.localize.term("seekBar")}" part="progress-slider" style="background:linear-gradient(to right,${this.inverted ? "rgb(var(--sd-color-white, 255 255 255) / 1)" : "rgb(var(--sd-color-primary, 0 53 142) / 1)"} ${progressPercentage}%,${this.animated ? "transparent" : this.inverted ? "rgb(var(--sd-color-primary-400, 153 171 208) / 1)" : "rgb(var(--sd-color-grey-400, 195 195 195) / 1)"} ${progressPercentage}%)"></div>${this.hasSlotController.test("transcript") ? html`<sd-drawer><slot name="transcript"></slot></sd-drawer>` : null} ${!this.hideTimestamps && (!this.animated || !this.reversedLayout) ? renderTimestamps : null}</div>`;
   }
 };
 SdAudio.styles = [
@@ -331,6 +335,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], SdAudio.prototype, "isMuted", 2);
+__decorateClass([
+  state()
+], SdAudio.prototype, "isTranscriptOpen", 2);
 __decorateClass([
   state()
 ], SdAudio.prototype, "progress", 2);

package/dist/chunks/{chunk.UWKWJ6WX.js → chunk.XQ7I46XG.js}

@@ -126,7 +126,7 @@ var SdCheckbox = class extends SolidElement {
         md: "text-base",
         lg: "text-base"
       }[this.size]
-    )}"><input class="peer absolute opacity-0 p-0 m-0 pointer-events-none" type="checkbox" title="${this.title}" name="${this.name}" value="${ifDefined(this.value)}" .indeterminate="${live(this.indeterminate)}" .checked="${live(this.checked)}" .disabled="${this.disabled}" .required="${this.required}" aria-checked="${this.checked ? "true" : "false"}" aria-describedby="invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled ? "true" : "false"}" @click="${this.handleClick}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @blur="${this.handleBlur}" @focus="${this.handleFocus}"> <span id="control" part="control ${this.checked ? " control--checked" : "control--unchecked"} ${this.indeterminate ? " control--indeterminate" : ""}" class="${cx(
+    )}"><input class="peer absolute opacity-0 p-0 m-0 pointer-events-none" type="checkbox" title="${this.title}" name="${this.name}" value="${ifDefined(this.value)}" .indeterminate="${live(this.indeterminate)}" .checked="${live(this.checked)}" .disabled="${this.disabled}" .required="${this.required}" aria-checked="${this.indeterminate ? "mixed" : this.checked}" aria-describedby="invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled ? "true" : "false"}" @click="${this.handleClick}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @blur="${this.handleBlur}" @focus="${this.handleFocus}"> <span id="control" part="control ${this.checked ? " control--checked" : "control--unchecked"} ${this.indeterminate ? " control--indeterminate" : ""}" class="${cx(
       `relative flex flex-shrink-0 items-center justify-center border rounded-sm h-4 w-4`,
       !this.visuallyDisabled ? "peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary" : "",
       {

package/dist/components/accordion/accordion.js

@@ -13,8 +13,8 @@ import "../../chunks/chunk.EY4JPJJQ.js";
 import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.ZXR3YX6W.js";
-import "../../chunks/chunk.EJ6ZLEEW.js";
+import "../../chunks/chunk.J7KRCFRG.js";
+import "../../chunks/chunk.G5A32O76.js";
 import "../../chunks/chunk.M4CPDAKC.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/accordion-group/accordion-group.js

@@ -14,8 +14,8 @@ import "../../chunks/chunk.EY4JPJJQ.js";
 import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.ZXR3YX6W.js";
-import "../../chunks/chunk.EJ6ZLEEW.js";
+import "../../chunks/chunk.J7KRCFRG.js";
+import "../../chunks/chunk.G5A32O76.js";
 import "../../chunks/chunk.M4CPDAKC.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/audio/audio.d.ts

@@ -13,6 +13,7 @@ export default class SdAudio extends SolidElement {
     duration: string;
     isPlaying: boolean;
     isMuted: boolean;
+    isTranscriptOpen: boolean;
     progress: number;
     progressSlider: HTMLInputElement;
     audioPlayerContainer: HTMLElement;
@@ -24,7 +25,6 @@ export default class SdAudio extends SolidElement {
     firstUpdated(): void;
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
     private get audioElement();
-    private setAudioProgress;
     private updateCurrentTime;
     private updateAudioDuration;
     playAudio(): void;
@@ -37,6 +37,7 @@ export default class SdAudio extends SolidElement {
     private formatTime;
     private handleAudioProgress;
     private handleAudioProgressKeydown;
+    private handleTranscriptDrawerToggle;
     private showTranscript;
     private showTranscriptKeydown;
     private rgbToHex;

package/dist/components/audio/audio.js

@@ -1,10 +1,10 @@
 import {
   SdAudio
-} from "../../chunks/chunk.TLTEUGRS.js";
+} from "../../chunks/chunk.UTL7JKFI.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.ZXR3YX6W.js";
-import "../../chunks/chunk.EJ6ZLEEW.js";
+import "../../chunks/chunk.J7KRCFRG.js";
+import "../../chunks/chunk.G5A32O76.js";
 import "../../chunks/chunk.M4CPDAKC.js";
 import "../../chunks/chunk.POFWU6ZT.js";
 import "../../chunks/chunk.S3NI7NKU.js";

package/dist/components/button/button.js

@@ -6,8 +6,8 @@ import "../../chunks/chunk.KVKRZJS7.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.ZXR3YX6W.js";
-import "../../chunks/chunk.EJ6ZLEEW.js";
+import "../../chunks/chunk.J7KRCFRG.js";
+import "../../chunks/chunk.G5A32O76.js";
 import "../../chunks/chunk.M4CPDAKC.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/carousel/carousel.js

@@ -16,8 +16,8 @@ import "../../chunks/chunk.EY4JPJJQ.js";
 import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.ZXR3YX6W.js";
-import "../../chunks/chunk.EJ6ZLEEW.js";
+import "../../chunks/chunk.J7KRCFRG.js";
+import "../../chunks/chunk.G5A32O76.js";
 import "../../chunks/chunk.M4CPDAKC.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/checkbox/checkbox.js

@@ -1,6 +1,6 @@
 import {
   SdCheckbox
-} from "../../chunks/chunk.UWKWJ6WX.js";
+} from "../../chunks/chunk.XQ7I46XG.js";
 import "../../chunks/chunk.GI7VDIWX.js";
 import "../../chunks/chunk.KVKRZJS7.js";
 import "../../chunks/chunk.33QCSKQD.js";

package/dist/components/combobox/combobox.js

@@ -21,8 +21,8 @@ import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.ZXR3YX6W.js";
-import "../../chunks/chunk.EJ6ZLEEW.js";
+import "../../chunks/chunk.J7KRCFRG.js";
+import "../../chunks/chunk.G5A32O76.js";
 import "../../chunks/chunk.M4CPDAKC.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/dialog/dialog.js

@@ -20,8 +20,8 @@ import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.ZXR3YX6W.js";
-import "../../chunks/chunk.EJ6ZLEEW.js";
+import "../../chunks/chunk.J7KRCFRG.js";
+import "../../chunks/chunk.G5A32O76.js";
 import "../../chunks/chunk.M4CPDAKC.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/drawer/drawer.js

@@ -20,8 +20,8 @@ import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.ZXR3YX6W.js";
-import "../../chunks/chunk.EJ6ZLEEW.js";
+import "../../chunks/chunk.J7KRCFRG.js";
+import "../../chunks/chunk.G5A32O76.js";
 import "../../chunks/chunk.M4CPDAKC.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/dropdown/dropdown.js

@@ -9,8 +9,8 @@ import "../../chunks/chunk.EY4JPJJQ.js";
 import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.ZXR3YX6W.js";
-import "../../chunks/chunk.EJ6ZLEEW.js";
+import "../../chunks/chunk.J7KRCFRG.js";
+import "../../chunks/chunk.G5A32O76.js";
 import "../../chunks/chunk.M4CPDAKC.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/expandable/expandable.js

@@ -4,8 +4,8 @@ import {
 import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.ZXR3YX6W.js";
-import "../../chunks/chunk.EJ6ZLEEW.js";
+import "../../chunks/chunk.J7KRCFRG.js";
+import "../../chunks/chunk.G5A32O76.js";
 import "../../chunks/chunk.M4CPDAKC.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/flipcard/flipcard.js

@@ -14,8 +14,8 @@ import "../../chunks/chunk.XS4QJO4N.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.ZXR3YX6W.js";
-import "../../chunks/chunk.EJ6ZLEEW.js";
+import "../../chunks/chunk.J7KRCFRG.js";
+import "../../chunks/chunk.G5A32O76.js";
 import "../../chunks/chunk.M4CPDAKC.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/input/input.js

@@ -13,8 +13,8 @@ import "../../chunks/chunk.XS4QJO4N.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.ZXR3YX6W.js";
-import "../../chunks/chunk.EJ6ZLEEW.js";
+import "../../chunks/chunk.J7KRCFRG.js";
+import "../../chunks/chunk.G5A32O76.js";
 import "../../chunks/chunk.M4CPDAKC.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/notification/notification.js

@@ -6,8 +6,8 @@ import "../../chunks/chunk.EY4JPJJQ.js";
 import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.ZXR3YX6W.js";
-import "../../chunks/chunk.EJ6ZLEEW.js";
+import "../../chunks/chunk.J7KRCFRG.js";
+import "../../chunks/chunk.G5A32O76.js";
 import "../../chunks/chunk.M4CPDAKC.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/quickfact/quickfact.js

@@ -14,8 +14,8 @@ import "../../chunks/chunk.EY4JPJJQ.js";
 import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.ZXR3YX6W.js";
-import "../../chunks/chunk.EJ6ZLEEW.js";
+import "../../chunks/chunk.J7KRCFRG.js";
+import "../../chunks/chunk.G5A32O76.js";
 import "../../chunks/chunk.M4CPDAKC.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/scrollable/scrollable.js

@@ -2,8 +2,8 @@ import {
   SdScrollable
 } from "../../chunks/chunk.QINFB4CI.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.ZXR3YX6W.js";
-import "../../chunks/chunk.EJ6ZLEEW.js";
+import "../../chunks/chunk.J7KRCFRG.js";
+import "../../chunks/chunk.G5A32O76.js";
 import "../../chunks/chunk.M4CPDAKC.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/select/select.js

@@ -19,8 +19,8 @@ import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.ZXR3YX6W.js";
-import "../../chunks/chunk.EJ6ZLEEW.js";
+import "../../chunks/chunk.J7KRCFRG.js";
+import "../../chunks/chunk.G5A32O76.js";
 import "../../chunks/chunk.M4CPDAKC.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/spinner/spinner.js

@@ -2,8 +2,8 @@ import {
   SdSpinner
 } from "../../chunks/chunk.SUVILVZH.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.ZXR3YX6W.js";
-import "../../chunks/chunk.EJ6ZLEEW.js";
+import "../../chunks/chunk.J7KRCFRG.js";
+import "../../chunks/chunk.G5A32O76.js";
 import "../../chunks/chunk.M4CPDAKC.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/tab-group/tab-group.js

@@ -3,8 +3,8 @@ import {
 } from "../../chunks/chunk.MM7UZ56N.js";
 import "../../chunks/chunk.WDWV53JP.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.ZXR3YX6W.js";
-import "../../chunks/chunk.EJ6ZLEEW.js";
+import "../../chunks/chunk.J7KRCFRG.js";
+import "../../chunks/chunk.G5A32O76.js";
 import "../../chunks/chunk.M4CPDAKC.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/tooltip/tooltip.js

@@ -7,8 +7,8 @@ import "../../chunks/chunk.EY4JPJJQ.js";
 import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.ZXR3YX6W.js";
-import "../../chunks/chunk.EJ6ZLEEW.js";
+import "../../chunks/chunk.J7KRCFRG.js";
+import "../../chunks/chunk.G5A32O76.js";
 import "../../chunks/chunk.M4CPDAKC.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/custom-elements.json

@@ -967,6 +967,14 @@
               },
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "isTranscriptOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "progress",
@@ -16973,7 +16981,7 @@
   "package": {
     "name": "@solid-design-system/components",
     "description": "Solid Design System: Components",
-    "version": "4.2.1",
+    "version": "4.2.3",
     "author": "Union Investment",
     "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
     "license": "MIT"

package/dist/solid-components.js

@@ -91,7 +91,7 @@ import {
 } from "./chunks/chunk.X27M4U7I.js";
 import {
   SdCheckbox
-} from "./chunks/chunk.UWKWJ6WX.js";
+} from "./chunks/chunk.XQ7I46XG.js";
 import {
   SdCheckboxGroup
 } from "./chunks/chunk.6Q2FPQCD.js";
@@ -170,13 +170,13 @@ import "./chunks/chunk.X2OQMWGY.js";
 import "./chunks/chunk.TJOP7HQP.js";
 import {
   SdAudio
-} from "./chunks/chunk.TLTEUGRS.js";
+} from "./chunks/chunk.UTL7JKFI.js";
 import "./chunks/chunk.YEZS5ZR2.js";
 import {
   LocalizeController
 } from "./chunks/chunk.YKM42GKF.js";
-import "./chunks/chunk.ZXR3YX6W.js";
-import "./chunks/chunk.EJ6ZLEEW.js";
+import "./chunks/chunk.J7KRCFRG.js";
+import "./chunks/chunk.G5A32O76.js";
 import "./chunks/chunk.M4CPDAKC.js";
 import "./chunks/chunk.POFWU6ZT.js";
 import "./chunks/chunk.S3NI7NKU.js";

package/dist/translations/de.js

@@ -1,6 +1,6 @@
 import {
   de_default
-} from "../chunks/chunk.EJ6ZLEEW.js";
+} from "../chunks/chunk.G5A32O76.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   de_default as default

package/dist/translations/en.js

@@ -1,6 +1,6 @@
 import {
   en_default
-} from "../chunks/chunk.ZXR3YX6W.js";
+} from "../chunks/chunk.J7KRCFRG.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   en_default as default

package/dist/utilities/localize.d.ts

@@ -34,6 +34,7 @@ export interface Translation extends DefaultTranslation {
     noResults: string;
     notifications: string;
     numOptionsSelected: (num: number) => string;
+    openTranscript: string;
     pauseAudio: string;
     playAudio: string;
     playbackSpeed: string;
@@ -44,6 +45,7 @@ export interface Translation extends DefaultTranslation {
     resize: string;
     scrollToEnd: string;
     scrollToStart: string;
+    seekBar: string;
     selectAColorFromTheScreen: string;
     selectDefaultPlaceholder: string;
     showLess: string;
@@ -52,5 +54,6 @@ export interface Translation extends DefaultTranslation {
     slideNum: (slide: number, count: number) => string;
     tagsSelected: string;
     toggleColorFormat: string;
+    transcriptIsOpen: string;
     unmute: string;
 }

package/dist/utilities/localize.js

@@ -1,8 +1,8 @@
 import {
   LocalizeController
 } from "../chunks/chunk.YKM42GKF.js";
-import "../chunks/chunk.ZXR3YX6W.js";
-import "../chunks/chunk.EJ6ZLEEW.js";
+import "../chunks/chunk.J7KRCFRG.js";
+import "../chunks/chunk.G5A32O76.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   LocalizeController

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@solid-design-system/components",
-  "version": "4.2.1",
+  "version": "4.2.3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -452,6 +452,7 @@
               { "name": "duration", "type": "string" },
               { "name": "isPlaying", "type": "boolean" },
               { "name": "isMuted", "type": "boolean" },
+              { "name": "isTranscriptOpen", "type": "boolean" },
               { "name": "progress", "type": "number" },
               { "name": "drawer", "type": "SdDrawer" },
               { "name": "context", "type": "CanvasRenderingContext2D" },

package/dist-versioned/_components/menu/menu.js

@@ -32,7 +32,7 @@ let SdMenu = class SdMenu extends SolidElement {
         if (item.type === 'checkbox') {
             item.checked = !item.checked;
         }
-        this.emit('sd-4-2-1-select', { detail: { item } });
+        this.emit('sd-4-2-3-select', { detail: { item } });
     }
     handleKeyDown(event) {
         if (event.key === 'Enter') {

package/dist-versioned/_components/menu/menu.styles.js

@@ -11,7 +11,7 @@ export default css `
     overscroll-behavior: none;
   }
 
-  ::slotted(sd-4-2-1-divider) {
+  ::slotted(sd-4-2-3-divider) {
     --spacing: var(--sd-spacing-x-small);
   }
 `;

package/dist-versioned/_components/menu-item/menu-item.js

@@ -74,7 +74,7 @@ let SdMenuItem = class SdMenuItem extends SolidElement {
         })}
       >
         <span part="checked-icon" class="menu-item__check">
-          <sd-4-2-1-icon name="check" library="system" aria-hidden="true"></sd-4-2-1-icon>
+          <sd-4-2-3-icon name="check" library="system" aria-hidden="true"></sd-4-2-3-icon>
         </span>
 
         <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
@@ -84,7 +84,7 @@ let SdMenuItem = class SdMenuItem extends SolidElement {
         <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
 
         <span class="menu-item__chevron">
-          <sd-4-2-1-icon name="chevron-right" library="system" aria-hidden="true"></sd-4-2-1-icon>
+          <sd-4-2-3-icon name="chevron-right" library="system" aria-hidden="true"></sd-4-2-3-icon>
         </span>
       </div>
     `;

package/dist-versioned/chunks/chunk.33QCSKQD.js

@@ -126,7 +126,7 @@ __decorateClass([
   watch(["name", "src", "library"])
 ], SdIcon.prototype, "setIcon", 1);
 SdIcon = __decorateClass([
-  customElement("sd-4-2-1-icon")
+  customElement("sd-4-2-3-icon")
 ], SdIcon);
 
 export {

package/dist-versioned/chunks/chunk.5U42A4N2.js

@@ -98,7 +98,7 @@ __decorateClass([
   state()
 ], SdTeaser.prototype, "_orientation", 2);
 SdTeaser = __decorateClass([
-  customElement("sd-4-2-1-teaser")
+  customElement("sd-4-2-3-teaser")
 ], SdTeaser);
 
 export {