@solid-design-system/components 3.17.12 → 3.19.0

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

@@ -0,0 +1,55 @@
+import { Wave } from './wave';
+import SolidElement from '../../internal/solid-element';
+import type SdDrawer from '../drawer/drawer';
+export default class SdAudio extends SolidElement {
+    private readonly localize;
+    private readonly hasSlotController;
+    reversedLayout: boolean;
+    hideTimestamps: boolean;
+    animated: boolean;
+    inverted: boolean;
+    speed: number;
+    currentTime: string;
+    duration: string;
+    isPlaying: boolean;
+    isMuted: boolean;
+    progress: number;
+    progressSlider: HTMLInputElement;
+    audioPlayerContainer: HTMLElement;
+    drawer: SdDrawer;
+    canvas: HTMLCanvasElement;
+    context: CanvasRenderingContext2D;
+    waveList: Wave[];
+    constructor();
+    firstUpdated(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private get audioElement();
+    private setAudioProgress;
+    private updateCurrentTime;
+    private updateAudioDuration;
+    playAudio(): void;
+    pauseAudio(): void;
+    handleAudioEnd(): void;
+    private toggleMute;
+    private toggleMuteKeydown;
+    togglePlaybackSpeed(): void;
+    private togglePlaybackSpeedKeydown;
+    private formatTime;
+    private handleAudioProgress;
+    private handleAudioProgressKeydown;
+    private showTranscript;
+    private showTranscriptKeydown;
+    private rgbToHex;
+    private initAnimation;
+    private drawStillWaves;
+    private stopAnimation;
+    private clear;
+    draw(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sd-audio': SdAudio;
+    }
+}

package/dist/package/components/audio/audio.js

@@ -0,0 +1,353 @@
+import { unsafeCSS, css, html } from "lit";
+import { customElement } from "../../internal/register-custom-element.js";
+import { HasSlotController } from "../../internal/slot.js";
+import { LocalizeController } from "../../utilities/localize.js";
+import { property, state, query } from "lit/decorators.js";
+import { Wave } from "./wave.js";
+import cx from "classix";
+import InteractiveStyles from "../../styles/interactive/interactive.css.js";
+import SolidElement from "../../internal/solid-element.js";
+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;
+  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) __defProp(target, key, result);
+  return result;
+};
+let SdAudio = class extends SolidElement {
+  constructor() {
+    super();
+    this.localize = new LocalizeController(this);
+    this.hasSlotController = new HasSlotController(this, "transcript");
+    this.reversedLayout = false;
+    this.hideTimestamps = false;
+    this.animated = false;
+    this.inverted = false;
+    this.speed = 1;
+    this.currentTime = this.formatTime(0);
+    this.duration = "";
+    this.isPlaying = false;
+    this.isMuted = 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);
+  }
+  firstUpdated() {
+    if (!this.audioElement) return;
+    this.audioElement.addEventListener("timeupdate", this.updateCurrentTime);
+    this.audioElement.addEventListener("ended", this.handleAudioEnd);
+    this.audioElement.setAttribute("controlsList", "nodownload");
+    this.audioElement.playbackRate = this.speed;
+    if (this.animated) {
+      this.initAnimation();
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("animated")) {
+      const oldValue = changedProperties.get("animated");
+      if (!oldValue && this.animated) {
+        this.initAnimation();
+      } else if (oldValue && !this.animated) {
+        this.clear();
+      }
+    }
+  }
+  get audioElement() {
+    const slot = this.shadowRoot.querySelector("slot");
+    if ((slot == null ? void 0 : slot.assignedElements().length) > 0) {
+      return slot.assignedElements()[0];
+    }
+    return null;
+  }
+  updateCurrentTime() {
+    if (!this.audioElement) return;
+    const currentTime = this.audioElement.currentTime;
+    this.currentTime = this.formatTime(currentTime);
+    this.progress = Math.floor(currentTime);
+    if (this.progressSlider) {
+      this.progressSlider.value = this.progress.toString();
+    }
+  }
+  updateAudioDuration() {
+    if (!this.audioElement) return;
+    if (isNaN(this.audioElement.duration)) {
+      setTimeout(() => {
+        this.updateAudioDuration();
+      }, 100);
+      return;
+    }
+    this.duration = this.formatTime(this.audioElement.duration);
+    this.setAudioProgress();
+  }
+  playAudio() {
+    if (!this.audioElement) return;
+    this.isPlaying = true;
+    this.audioElement.play();
+    this.emit("sd-playback-start");
+    if (this.animated) {
+      this.draw();
+    }
+  }
+  pauseAudio() {
+    if (!this.audioElement) return;
+    this.isPlaying = false;
+    this.audioElement.pause();
+    this.emit("sd-playback-pause");
+    if (this.animated) {
+      this.stopAnimation();
+    }
+  }
+  handleAudioEnd() {
+    this.emit("sd-playback-end");
+    this.isPlaying = false;
+    this.progress = 0;
+    this.progressSlider.value = "0";
+    this.currentTime = this.formatTime(0);
+    if (this.animated) {
+      this.stopAnimation();
+    }
+  }
+  toggleMute() {
+    if (!this.audioElement) return;
+    this.isMuted = !this.isMuted;
+    if (this.isMuted) {
+      this.emit("sd-playback-mute");
+      this.audioElement.muted = true;
+    } else {
+      this.emit("sd-playback-unmute");
+      this.audioElement.muted = false;
+    }
+  }
+  toggleMuteKeydown(event) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      this.toggleMute();
+    }
+  }
+  togglePlaybackSpeed() {
+    if (!this.audioElement) return;
+    this.emit("sd-playback-speed");
+    this.speed = this.speed === 1.5 ? 1 : this.speed + 0.25;
+    this.audioElement.playbackRate = this.speed;
+  }
+  togglePlaybackSpeedKeydown(event) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      this.togglePlaybackSpeed();
+    }
+  }
+  formatTime(time) {
+    const minutes = Math.floor(time / 60);
+    const seconds = Math.floor(time % 60);
+    return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
+  }
+  handleAudioProgress() {
+    if (!this.audioElement) return;
+    const newTime = Number(this.progressSlider.value);
+    this.audioElement.currentTime = newTime;
+    this.progress = newTime;
+    this.currentTime = this.formatTime(newTime);
+  }
+  handleAudioProgressKeydown(event) {
+    if (event.key === "ArrowRight") {
+      this.progressSlider.value = (Number(this.progressSlider.value) + 1).toString();
+      this.handleAudioProgress();
+    }
+    if (event.key === "ArrowLeft") {
+      this.progressSlider.value = (Number(this.progressSlider.value) - 1).toString();
+      this.handleAudioProgress();
+    }
+  }
+  showTranscript() {
+    this.emit("sd-transcript-click");
+    this.drawer.open = true;
+  }
+  showTranscriptKeydown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      this.showTranscript();
+    }
+  }
+  rgbToHex(rgbString) {
+    const result = rgbString.match(/\d+/g);
+    if (result && result.length === 3) {
+      const r = parseInt(result[0]);
+      const g = parseInt(result[1]);
+      const b = parseInt(result[2]);
+      const valueToHex = (value) => value.toString(16).padStart(2, "0");
+      const hex = `#${valueToHex(r)}${valueToHex(g)}${valueToHex(b)}`.toUpperCase();
+      return hex;
+    }
+    return null;
+  }
+  initAnimation() {
+    this.context = this.canvas.getContext("2d");
+    const button = this.audioPlayerContainer.querySelector(".playback-speed");
+    const computedStyles = window.getComputedStyle(button);
+    const color = computedStyles.color;
+    let computedColor;
+    if (this.inverted) {
+      computedColor = `#FFFFFF33`;
+    } else {
+      computedColor = this.rgbToHex(color) + "33";
+    }
+    this.waveList = [
+      new Wave({
+        canvas: this.canvas,
+        color: computedColor,
+        phase: 240,
+        shift: 1.5,
+        amplitude: 230,
+        frequency: 0.012,
+        damping: 1
+      }),
+      new Wave({
+        canvas: this.canvas,
+        color: computedColor,
+        phase: 180,
+        shift: 2.5,
+        amplitude: 250,
+        frequency: 5e-3,
+        damping: 1
+      }),
+      new Wave({
+        canvas: this.canvas,
+        color: computedColor,
+        phase: 180,
+        shift: -2.5,
+        amplitude: 250,
+        frequency: 5e-3,
+        damping: 1
+      }),
+      new Wave({
+        canvas: this.canvas,
+        color: computedColor,
+        phase: 180,
+        shift: -1,
+        amplitude: 200,
+        frequency: 0.018,
+        damping: 1
+      }),
+      new Wave({
+        canvas: this.canvas,
+        color: computedColor,
+        phase: 180,
+        shift: 1.5,
+        amplitude: 150,
+        frequency: 0.01,
+        damping: 1
+      })
+    ];
+    if (this.animated) {
+      this.drawStillWaves();
+    }
+  }
+  drawStillWaves() {
+    this.waveList.forEach((wave) => {
+      wave.redraw();
+    });
+  }
+  stopAnimation() {
+    this.isPlaying = false;
+  }
+  clear() {
+    if (!this.context || !this.canvas) return;
+    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+  }
+  async draw() {
+    if (!this.isPlaying || !this.animated) return;
+    this.clear();
+    this.waveList.forEach((wave) => {
+      wave.redraw();
+    });
+    await new Promise((resolve) => {
+      setTimeout(resolve, 1e3 / 30);
+    });
+    await this.draw();
+  }
+  render() {
+    const progressPercentage = this.audioElement ? this.progress / this.audioElement.duration * 100 : 0;
+    const renderAudioControls = html`<div class="${cx(
+      "controls grid grid-cols-3 justify-items-center items-center",
+      !this.animated && "relative",
+      this.animated && !this.reversedLayout && "absolute -top-4 left-0 w-full",
+      this.reversedLayout ? "mt-2" : "mb-2"
+    )}" 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")}">${this.isPlaying ? html`<sd-icon name="pause" library="system"></sd-icon>` : html`<sd-icon name="start" library="system"></sd-icon>`}</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>`;
+    const renderTimestamps = html`<div class="${cx(
+      "w-full flex justify-between",
+      this.reversedLayout ? "mb-2" : "mt-2",
+      this.animated && this.reversedLayout && "absolute bottom-0 left-0 mb-2",
+      this.animated && !this.reversedLayout && "mt-2"
+    )}" part="timestamps"><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "text-neutral-700")}">${this.currentTime}</div><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "text-neutral-700")}">${this.duration}</div></div>`;
+    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>`;
+  }
+};
+SdAudio.styles = [
+  SolidElement.styles,
+  unsafeCSS(InteractiveStyles),
+  css`.progress-slider:focus-visible{outline:2px solid transparent;outline-offset:2px}.progress-slider::-webkit-slider-thumb{background-color:currentColor;height:var(--sd-spacing-4,1rem);width:var(--sd-spacing-4,1rem);-webkit-appearance:none;appearance:none;border-radius:var(--sd-border-radius-full,9999px);border-style:none;-webkit-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.progress-slider:focus-visible::-webkit-slider-thumb{outline-style:solid;outline-offset:2px}.progress-slider::-moz-range-thumb{background-color:currentColor;height:var(--sd-spacing-4,1rem);width:var(--sd-spacing-4,1rem);-moz-appearance:none;appearance:none;border-radius:var(--sd-border-radius-full,9999px);border-style:none;-moz-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.progress-slider:focus-visible::-moz-range-thumb{outline-style:solid;outline-offset:2px}sd-button::part(base){display:flex;height:var(--sd-spacing-16,4rem);width:var(--sd-spacing-16,4rem);align-items:center;justify-content:center;border-radius:var(--sd-border-radius-full,9999px)}sd-button::part(label){flex-grow:0}`
+];
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "reversed-layout" })
+], SdAudio.prototype, "reversedLayout", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "hide-timestamps" })
+], SdAudio.prototype, "hideTimestamps", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdAudio.prototype, "animated", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdAudio.prototype, "inverted", 2);
+__decorateClass([
+  property({ type: Number })
+], SdAudio.prototype, "speed", 2);
+__decorateClass([
+  state()
+], SdAudio.prototype, "currentTime", 2);
+__decorateClass([
+  state()
+], SdAudio.prototype, "duration", 2);
+__decorateClass([
+  state()
+], SdAudio.prototype, "isPlaying", 2);
+__decorateClass([
+  state()
+], SdAudio.prototype, "isMuted", 2);
+__decorateClass([
+  state()
+], SdAudio.prototype, "progress", 2);
+__decorateClass([
+  query('[part="progress-slider"]')
+], SdAudio.prototype, "progressSlider", 2);
+__decorateClass([
+  query('[part="audio-player"]')
+], SdAudio.prototype, "audioPlayerContainer", 2);
+__decorateClass([
+  query("sd-drawer")
+], SdAudio.prototype, "drawer", 2);
+__decorateClass([
+  query("canvas")
+], SdAudio.prototype, "canvas", 2);
+SdAudio = __decorateClass([
+  customElement("sd-audio")
+], SdAudio);
+export {
+  SdAudio as default
+};

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

@@ -0,0 +1,38 @@
+export declare class Wave {
+    constructor(config: {
+        phase: number;
+        canvas: HTMLCanvasElement;
+        amplitude: number;
+        frequency: number;
+        color: string;
+        shift: number;
+        damping: number;
+    });
+    canvas: HTMLCanvasElement;
+    context: CanvasRenderingContext2D | null;
+    color: string;
+    origin: {
+        x: number;
+        y: number;
+    };
+    damping: number;
+    lineWidth: number;
+    shift: number;
+    amplitude: number;
+    phase: number;
+    frequency: number;
+    fixedEnd: boolean;
+    fixedStart: boolean;
+    gradient: boolean;
+    outline: boolean;
+    paused: boolean;
+    playbackSpeed: number;
+    map: (num: number, inMin: number, inMax: number, outMin: number, outMax: number) => number;
+    damp: (end: number, x: number, size: number) => number;
+    drawPoint(x: number, y: number, color: string): void;
+    buildSine(wavelength: number, phase: number, color: string, amplitude: number, frequency: number): void;
+    redraw(): void;
+    setPlay(): void;
+    setPause(): void;
+    setPlaybackSpeed(playbackSpeed: number): void;
+}

package/dist/package/components/audio/wave.js

@@ -0,0 +1,85 @@
+class Wave {
+  constructor(config) {
+    this.fixedEnd = true;
+    this.fixedStart = true;
+    this.gradient = false;
+    this.outline = false;
+    this.map = (num, inMin, inMax, outMin, outMax) => (num - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
+    this.damp = (end, x, size) => {
+      const effectiveValue = 1 - x / end;
+      return 2 * effectiveValue * (x / end) * size;
+    };
+    this.canvas = config.canvas;
+    this.frequency = config.frequency;
+    this.phase = config.phase;
+    this.amplitude = config.amplitude;
+    this.color = config.color;
+    this.shift = config.shift;
+    this.lineWidth = 2;
+    this.damping = config.damping;
+    this.context = this.canvas.getContext("2d");
+    this.paused = true;
+    this.playbackSpeed = 1;
+    this.origin = {
+      x: 0,
+      y: this.canvas.height
+    };
+  }
+  /**
+   * Draw a single point on the canvas
+   * Uses arc() method of the context with radius 2
+   * Depending on the values of outline, fill and graient flags , it will draw a point on the wave
+   * */
+  drawPoint(x, y, color) {
+    if (!this.context) {
+      return;
+    }
+    const r = this.lineWidth / 2;
+    this.context.beginPath();
+    if (this.outline) {
+      this.context.fillStyle = color;
+      this.context.lineWidth = 2;
+      this.context.arc(x, y, r, 0, 2 * Math.PI);
+      this.context.fill();
+    }
+    if (this.gradient) {
+      const linearGradient = this.context.createLinearGradient(0, 0, 0, this.canvas.height);
+      linearGradient.addColorStop(0.1, color);
+      linearGradient.addColorStop(1, "transparent");
+      this.context.fillStyle = linearGradient;
+    } else {
+      this.context.fillStyle = color;
+    }
+    this.context.fillRect(x - r, y - r, r, this.canvas.height - y + r);
+  }
+  buildSine(wavelength, phase, color, amplitude, frequency) {
+    for (let i = this.origin.x, n = this.origin.x + wavelength; i < n; i += 1) {
+      const y = amplitude * Math.sin(frequency * (i + phase));
+      if (this.fixedStart && this.fixedEnd) {
+        this.drawPoint(i, this.origin.y + this.damp(n, i, this.damping) * y, color);
+      } else if (this.fixedStart) {
+        this.drawPoint(i, this.origin.y + this.map(i, this.origin.x, n, 0, this.damping) * y, color);
+      } else if (this.fixedEnd) {
+        this.drawPoint(i, this.origin.y + (this.damping - this.map(i, this.origin.x, n, 0, this.damping)) * y, color);
+      } else {
+        this.drawPoint(i, this.origin.y + y, color);
+      }
+    }
+  }
+  redraw() {
+    this.phase += this.shift * (this.paused ? 1 : 2 * this.playbackSpeed);
+    this.buildSine(this.canvas.width, this.phase, this.color, this.amplitude, this.frequency);
+  }
+  setPlay() {
+    this.paused = false;
+  }
+  setPause() {
+    this.paused = true;
+  }
+  setPlaybackSpeed(playbackSpeed) {
+    this.playbackSpeed = playbackSpeed;
+  }
+}
+export {
+  Wave
+};

package/dist/package/components/icon/library.system.d.ts

@@ -18,6 +18,9 @@ export declare const icons: {
     warning: string;
     'exclamation-circle': string;
     'magnifying-glass': string;
+    transcript: string;
+    mute: string;
+    volume: string;
 };
 declare const systemLibrary: IconLibrary;
 export default systemLibrary;

package/dist/package/components/icon/library.system.js

@@ -78,7 +78,12 @@ const icons = {
   "exclamation-circle": `
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 17C13 17.552 12.552 18 12 18C11.448 18 11 17.552 11 17C11 16.448 11.448 16 12 16C12.552 16 13 16.448 13 17Z"/><path d="M12 6C11.448 6 11 6.448 11 7V13C11 13.552 11.448 14 12 14C12.552 14 13 13.552 13 13V7C13 6.448 12.552 6 12 6Z"/><path d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2ZM12 20C7.582 20 4 16.418 4 12C4 7.582 7.582 4 12 4C16.418 4 20 7.582 20 12C20 16.418 16.418 20 12 20Z"/></svg>`,
   "magnifying-glass": `
-    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M21.707 20.293l-6.967-6.96c-0.046-0.046-0.096-0.087-0.15-0.124l-0.004-0.002c0.882-1.162 1.413-2.632 1.413-4.227 0-3.881-3.146-7.027-7.027-7.027s-7.027 3.146-7.027 7.027c0 3.881 3.146 7.027 7.027 7.027 1.594 0 3.065-0.531 4.244-1.426l-0.017 0.013c0.039 0.057 0.081 0.107 0.127 0.153l6.967 6.967c0.181 0.181 0.431 0.292 0.707 0.292s0.526-0.112 0.707-0.292v0c0.183-0.181 0.296-0.432 0.296-0.71s-0.113-0.529-0.296-0.71l-0-0zM9 14c-2.761 0-5-2.239-5-5s2.239-5 5-5c2.761 0 5 2.239 5 5v0c0 2.761-2.239 5-5 5v0z"></path></svg>`
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M21.707 20.293l-6.967-6.96c-0.046-0.046-0.096-0.087-0.15-0.124l-0.004-0.002c0.882-1.162 1.413-2.632 1.413-4.227 0-3.881-3.146-7.027-7.027-7.027s-7.027 3.146-7.027 7.027c0 3.881 3.146 7.027 7.027 7.027 1.594 0 3.065-0.531 4.244-1.426l-0.017 0.013c0.039 0.057 0.081 0.107 0.127 0.153l6.967 6.967c0.181 0.181 0.431 0.292 0.707 0.292s0.526-0.112 0.707-0.292v0c0.183-0.181 0.296-0.432 0.296-0.71s-0.113-0.529-0.296-0.71l-0-0zM9 14c-2.761 0-5-2.239-5-5s2.239-5 5-5c2.761 0 5 2.239 5 5v0c0 2.761-2.239 5-5 5v0z"></path></svg>`,
+  transcript: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <path d="M19 22H5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h9a1 1 0 0 1 .707.293l5 5c.186.187.293.444.293.707v13a1 1 0 0 1-1 1ZM6 20h12V8.413L13.587 4H6v16Z"/> <path d="M19 10h-6a1 1 0 0 1-1-1V3a1 1 0 1 1 2 0v5h5a1 1 0 1 1 0 2Zm-3 4H8a1 1 0 1 1 0-2h8a1 1 0 1 1 0 2Zm-2 4H8a1 1 0 1 1 0-2h6a1 1 0 1 1 0 2Z"/></svg>`,
+  mute: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+  <path d="M10.717 4.077a.997.997 0 0 0-1.09.217L5.92 8.001H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.92l3.707 3.707a.997.997 0 0 0 .707.293h.007a.953.953 0 0 0 .382-.079l-.006.002c.365-.154.617-.509.617-.923v-14a1 1 0 0 0-.61-.921l-.007-.002v-.001ZM4 10h1.333v4H4v-4Zm5.333 6.587-2-2V9.414l2-2v9.173Zm12.374-8.96a1 1 0 0 0-1.414 0l-2.96 2.96-2.96-2.96a1 1 0 0 0-1.413 1.414l-.001-.001 2.96 2.96-2.96 2.96a1 1 0 0 0 1.414 1.414l2.96-2.96 2.96 2.96a1 1 0 0 0 1.414-1.414L18.747 12l2.96-2.96a1 1 0 0 0 0-1.414v.001Z"/></svg>`,
+  volume: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+  <path d="M10.717 4.077a.997.997 0 0 0-1.09.217L5.92 8.001H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.92l3.707 3.707a.997.997 0 0 0 .707.293h.007a.953.953 0 0 0 .382-.079l-.006.002c.365-.154.617-.509.617-.923v-14a1 1 0 0 0-.61-.921l-.007-.002v-.001ZM4 10h1.333v4H4v-4Zm5.333 6.587-2-2V9.414l2-2v9.173Zm9.217-13.48a1 1 0 0 0-.44 1.339l-.003-.006c1.177 2.191 1.876 4.792 1.893 7.555V12a16.365 16.365 0 0 1-1.936 7.638l.043-.088a1.002 1.002 0 0 0 .438 1.331l.006.003c.13.071.285.114.449.117h.001a.999.999 0 0 0 .89-.544l.003-.006c1.312-2.45 2.09-5.357 2.107-8.445v-.005c-.017-3.093-.794-6-2.155-8.549l.048.099a1.001 1.001 0 0 0-1.349-.44l.006-.003-.001-.001Z"/><path d="M14.447 5.167a1 1 0 0 0-.278 1.39l-.002-.004C15.35 8.333 16 10.266 16 12s-.667 3.667-1.833 5.447a1 1 0 0 0 1.664 1.11l.002-.004C17.23 16.45 18 14.12 18 12s-.77-4.45-2.167-6.553a1 1 0 0 0-1.39-.278l.004-.002Z"/></svg>`
 };
 const systemLibrary = {
   name: "system",

package/dist/package/components/tab-group/tab-group.d.ts

@@ -1,6 +1,5 @@
 import { LocalizeController } from '../../utilities/localize';
 import SolidElement from '../../internal/solid-element';
-import type SdTab from '../tab/tab';
 export default class SdTabGroup extends SolidElement {
     localize: LocalizeController;
     private activeTab?;
@@ -23,10 +22,7 @@ export default class SdTabGroup extends SolidElement {
     private handleKeyDown;
     private handleScrollToStart;
     private handleScrollToEnd;
-    setActiveTab(tab: SdTab, options?: {
-        emitEvents?: boolean;
-        scrollBehavior?: 'auto' | 'smooth';
-    }): void;
+    private setActiveTab;
     private setAriaLabels;
     private syncTabsAndPanels;
     private updateScrollControls;

package/dist/package/solid-components.d.ts

@@ -1,5 +1,6 @@
 export { default as SdAccordion } from './components/accordion/accordion';
 export { default as SdAccordionGroup } from './components/accordion-group/accordion-group';
+export { default as SdAudio } from './components/audio/audio';
 export { default as SdBadge } from './components/badge/badge';
 export { default as SdBrandshape } from './components/brandshape/brandshape';
 export { default as SdButton } from './components/button/button';