@solid-design-system/components 3.18.0 → 3.19.0

package/dist/versioned-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-3-19-0-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-3-19-0-icon name="pause" library="system"></sd-3-19-0-icon>` : html`<sd-3-19-0-icon name="start" library="system"></sd-3-19-0-icon>`}</sd-3-19-0-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-3-19-0-icon class="w-6 h-6" name="transcript" library="system" label="${this.isMuted ? this.localize.term("unmute") : this.localize.term("mute")}"></sd-3-19-0-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-3-19-0-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="system"></sd-3-19-0-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-3-19-0-drawer><slot name="transcript"></slot></sd-3-19-0-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-3-19-0-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-3-19-0-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-3-19-0-drawer")
+], SdAudio.prototype, "drawer", 2);
+__decorateClass([
+  query("canvas")
+], SdAudio.prototype, "canvas", 2);
+SdAudio = __decorateClass([
+  customElement("sd-3-19-0-audio")
+], SdAudio);
+export {
+  SdAudio as default
+};

package/dist/versioned-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/versioned-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/versioned-package/components/badge/badge.d.ts

@@ -8,6 +8,6 @@ export default class SdBadge extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-3-18-0-badge': SdBadge;
+        'sd-3-19-0-badge': SdBadge;
     }
 }

package/dist/versioned-package/components/badge/badge.js

@@ -52,7 +52,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdBadge.prototype, "inverted", 2);
 SdBadge = __decorateClass([
-  customElement("sd-3-18-0-badge")
+  customElement("sd-3-19-0-badge")
 ], SdBadge);
 export {
   SdBadge as default

package/dist/versioned-package/components/brandshape/brandshape.d.ts

@@ -26,7 +26,7 @@ export default class SdBrandshape extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-3-18-0-brandshape': SdBrandshape;
+        'sd-3-19-0-brandshape': SdBrandshape;
     }
 }
 export {};

package/dist/versioned-package/components/brandshape/brandshape.js

@@ -146,7 +146,7 @@ __decorateClass([
   state()
 ], SdBrandshape.prototype, "componentBreakpoint", 2);
 SdBrandshape = __decorateClass([
-  customElement("sd-3-18-0-brandshape")
+  customElement("sd-3-19-0-brandshape")
 ], SdBrandshape);
 export {
   SdBrandshape as default

package/dist/versioned-package/components/button/button.d.ts

@@ -47,6 +47,6 @@ export default class SdButton extends SolidElement implements SolidFormControl {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-3-18-0-button': SdButton;
+        'sd-3-19-0-button': SdButton;
     }
 }

package/dist/versioned-package/components/button/button.js

@@ -212,19 +212,19 @@ let SdButton = class extends SolidElement {
         md: "ml-2",
         lg: "ml-2"
       }[this.size]
-    )}"></slot>${this.loading ? html`<sd-3-18-0-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-3-18-0-spinner>` : ""}</${tag}>`;
+    )}"></slot>${this.loading ? html`<sd-3-19-0-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-3-19-0-spinner>` : ""}</${tag}>`;
   }
 };
 SdButton.styles = [
   componentStyles,
   SolidElement.styles,
-  css`:host{position:relative;display:inline-block;width:var(--sd-spacing-auto,auto);cursor:pointer}sd-3-18-0-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-3-18-0-badge){pointer-events:none;position:absolute;top:var(--sd-spacing-0,0);right:var(--sd-spacing-0,0);--tw-translate-x:50%!important;--tw-translate-y:-50%!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}::slotted(sd-3-18-0-icon),sd-3-18-0-spinner{font-size:calc(var(--tw-varspacing)/ 2)}`
+  css`:host{position:relative;display:inline-block;width:var(--sd-spacing-auto,auto);cursor:pointer}sd-3-19-0-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-3-19-0-badge){pointer-events:none;position:absolute;top:var(--sd-spacing-0,0);right:var(--sd-spacing-0,0);--tw-translate-x:50%!important;--tw-translate-y:-50%!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}::slotted(sd-3-19-0-icon),sd-3-19-0-spinner{font-size:calc(var(--tw-varspacing)/ 2)}`
 ];
 __decorateClass([
   query("a, button")
 ], SdButton.prototype, "button", 2);
 __decorateClass([
-  queryAssignedElements({ selector: "sd-3-18-0-icon" })
+  queryAssignedElements({ selector: "sd-3-19-0-icon" })
 ], SdButton.prototype, "_iconsInDefaultSlot", 2);
 __decorateClass([
   state()
@@ -287,7 +287,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdButton.prototype, "handleDisabledChange", 1);
 SdButton = __decorateClass([
-  customElement("sd-3-18-0-button")
+  customElement("sd-3-19-0-button")
 ], SdButton);
 export {
   SdButton as default

package/dist/versioned-package/components/carousel/carousel.d.ts

@@ -44,6 +44,6 @@ export default class SdCarousel extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-3-18-0-carousel': SdCarousel;
+        'sd-3-19-0-carousel': SdCarousel;
     }
 }

package/dist/versioned-package/components/carousel/carousel.js

@@ -39,7 +39,7 @@ let SdCarousel = class extends SolidElement {
     this.pausedAutoplay = false;
     this.autoplayController = new AutoplayController(this, () => this.next());
     this.scrollController = new ScrollController(this);
-    this.slides = this.getElementsByTagName("sd-3-18-0-carousel-item");
+    this.slides = this.getElementsByTagName("sd-3-19-0-carousel-item");
     this.intersectionObserverEntries = /* @__PURE__ */ new Map();
     this.localize = new LocalizeController(this);
     this.handleSlotChange = (mutations) => {
@@ -312,7 +312,7 @@ let SdCarousel = class extends SolidElement {
       "!mr-6 !rounded-sm sd-interactive",
       !prevEnabled && "sd-interactive--disabled",
       this.inverted ? "sd-interactive--inverted" : "sd-interactive--reset"
-    )}" aria-label="${this.localize.term("previousSlide")}" aria-controls="scroll-container" aria-disabled="${prevEnabled ? "false" : "true"}" @click="${prevEnabled ? () => this.previous() : null}"><slot name="previous-icon"><sd-3-18-0-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-down" : "chevron-up"}"></sd-3-18-0-icon></slot></button> ${this.variant === "dot" ? html`<div part="pagination-dot" role="tablist" class="${cx("carousel__pagination dot flex wrap items-center gap-2")}" aria-controls="scroll-container">${map(range(pagesCount), (index) => {
+    )}" aria-label="${this.localize.term("previousSlide")}" aria-controls="scroll-container" aria-disabled="${prevEnabled ? "false" : "true"}" @click="${prevEnabled ? () => this.previous() : null}"><slot name="previous-icon"><sd-3-19-0-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-down" : "chevron-up"}"></sd-3-19-0-icon></slot></button> ${this.variant === "dot" ? html`<div part="pagination-dot" role="tablist" class="${cx("carousel__pagination dot flex wrap items-center gap-2")}" aria-controls="scroll-container">${map(range(pagesCount), (index) => {
       const isActive = index + 1 === currentPage;
       return html`<button part="pagination-item ${isActive ? "pagination-item--active" : ""}" class="${cx(
         "carousel__pagination-item",
@@ -331,19 +331,19 @@ let SdCarousel = class extends SolidElement {
       this.inverted ? "sd-interactive--inverted" : "sd-interactive--reset"
     )}" aria-label="${this.localize.term("nextSlide")}" aria-controls="scroll-container" aria-disabled="${nextEnabled ? "false" : "true"}" @click="${nextEnabled ? () => {
       this.next();
-    } : null}"><slot name="next-icon"><sd-3-18-0-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-up" : "chevron-down"}"></sd-3-18-0-icon></slot></button></div><button class="${cx(
+    } : null}"><slot name="next-icon"><sd-3-19-0-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-up" : "chevron-down"}"></sd-3-19-0-icon></slot></button></div><button class="${cx(
       "ml-6 !rounded-sm",
       "!absolute !right-0 sd-interactive",
       this.inverted ? "sd-interactive--inverted" : "sd-interactive--reset",
       !this.autoplay && "!hidden"
-    )}" part="autoplay-controls" @click="${() => this.pausedAutoplay = !this.pausedAutoplay}"><slot name="autoplay-start" class="${cx(!this.pausedAutoplay ? "hidden" : "")}"><sd-3-18-0-icon class="h-6 w-6 grid place-items-center" library="system" name="start"></sd-3-18-0-icon></slot><slot name="autoplay-pause" class="${cx(this.pausedAutoplay ? "hidden" : "")}"><sd-3-18-0-icon class="h-6 w-6 grid place-items-center" library="system" name="pause"></sd-3-18-0-icon></slot></button></div></div>`;
+    )}" part="autoplay-controls" @click="${() => this.pausedAutoplay = !this.pausedAutoplay}"><slot name="autoplay-start" class="${cx(!this.pausedAutoplay ? "hidden" : "")}"><sd-3-19-0-icon class="h-6 w-6 grid place-items-center" library="system" name="start"></sd-3-19-0-icon></slot><slot name="autoplay-pause" class="${cx(this.pausedAutoplay ? "hidden" : "")}"><sd-3-19-0-icon class="h-6 w-6 grid place-items-center" library="system" name="pause"></sd-3-19-0-icon></slot></button></div></div>`;
   }
 };
 SdCarousel.styles = [
   SolidElement.styles,
   unsafeCSS(InteractiveStyles),
   componentStyles,
-  css`:host{--slide-gap:var(--sl-spacing-medium, 1rem);--scroll-hint:0px;display:flex}.carousel{grid-template-areas:'. slides .' '. pagination .'}.carousel__pagination{grid-area:pagination}.carousel__slides{grid-area:slides;scrollbar-width:none;--slide-size:calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));grid-auto-columns:var(--slide-size);-moz-column-gap:var(--slide-gap);column-gap:var(--slide-gap);scroll-padding-inline:var(--scroll-hint);padding-inline:var(--scroll-hint)}.carousel__slides::-webkit-scrollbar{display:none}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__navigation{grid-area:navigation}sd-3-18-0-button::part(label){pointer-events:none;display:flex;flex:1 1 auto;align-items:center}`
+  css`:host{--slide-gap:var(--sl-spacing-medium, 1rem);--scroll-hint:0px;display:flex}.carousel{grid-template-areas:'. slides .' '. pagination .'}.carousel__pagination{grid-area:pagination}.carousel__slides{grid-area:slides;scrollbar-width:none;--slide-size:calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));grid-auto-columns:var(--slide-size);-moz-column-gap:var(--slide-gap);column-gap:var(--slide-gap);scroll-padding-inline:var(--scroll-hint);padding-inline:var(--scroll-hint)}.carousel__slides::-webkit-scrollbar{display:none}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__navigation{grid-area:navigation}sd-3-19-0-button::part(label){pointer-events:none;display:flex;flex:1 1 auto;align-items:center}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
@@ -398,7 +398,7 @@ __decorateClass([
   watch("autoplay")
 ], SdCarousel.prototype, "handleAutoplayChange", 1);
 SdCarousel = __decorateClass([
-  customElement("sd-3-18-0-carousel")
+  customElement("sd-3-19-0-carousel")
 ], SdCarousel);
 export {
   SdCarousel as default

package/dist/versioned-package/components/carousel-item/carousel-item.d.ts

@@ -7,6 +7,6 @@ export default class SdCarouselItem extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-3-18-0-carousel-item': SdCarouselItem;
+        'sd-3-19-0-carousel-item': SdCarouselItem;
     }
 }

package/dist/versioned-package/components/carousel-item/carousel-item.js

@@ -30,7 +30,7 @@ SdCarouselItem.styles = [
   css`:host{aspect-ratio:var(--aspect-ratio);scroll-snap-align:start;scroll-snap-stop:always;display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center}::slotted(img){height:100%;width:100%;-o-object-fit:cover;object-fit:cover}`
 ];
 SdCarouselItem = __decorateClass([
-  customElement("sd-3-18-0-carousel-item")
+  customElement("sd-3-19-0-carousel-item")
 ], SdCarouselItem);
 export {
   SdCarouselItem as default

package/dist/versioned-package/components/checkbox/checkbox.d.ts

@@ -37,6 +37,6 @@ export default class SdCheckbox extends SolidElement implements SolidFormControl
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-3-18-0-checkbox': SdCheckbox;
+        'sd-3-19-0-checkbox': SdCheckbox;
     }
 }