@solid-design-system/components 6.17.1 → 6.18.0

package/dist/chunks/{chunk.DOQJMWSI.js → chunk.BWFGZZU7.js}

@@ -52,6 +52,7 @@ var SdCarousel = class extends SolidElement {
     this.inverted = false;
     this.loop = false;
     this.autoplay = false;
+    this.autoplayInterval = 5;
     this.fade = false;
     this.slidesPerPage = 1;
     this.slidesPerMove = 1;
@@ -252,7 +253,7 @@ var SdCarousel = class extends SolidElement {
     if (this.pausedAutoplay) {
       this.autoplayController.stop();
     } else if (this.autoplay) {
-      this.autoplayController.start(3e3);
+      this.autoplayController.start(this.autoplayInterval * 1e3);
     }
   }
   handleFadeChange() {
@@ -354,9 +355,14 @@ var SdCarousel = class extends SolidElement {
   handleAutoplayChange() {
     this.autoplayController.stop();
     if (this.autoplay && !this.pausedAutoplay) {
-      this.autoplayController.start(3e3);
+      this.autoplayController.start(this.autoplayInterval * 1e3);
     }
   }
+  handleautoplayIntervalChange() {
+    if (!this.autoplay || this.pausedAutoplay) return;
+    this.autoplayController.stop();
+    this.autoplayController.start(this.autoplayInterval * 1e3);
+  }
   /**
    * Move the carousel backward by `slides-per-move` slides.
    *
@@ -516,7 +522,7 @@ var SdCarousel = class extends SolidElement {
 SdCarousel.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-: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}:host([fade]){--carousel-height:auto}:host([fade]) .carousel__slides{position:relative;display:block;overflow:hidden;height:var(--carousel-height)}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__navigation{grid-area:navigation}sd-button::part(label){pointer-events:none;display:flex;flex:auto;align-items:center}#carousel__navigation-button--next,#carousel__navigation-button--previous{color:rgba(var(--sd-color-icon-fill-primary))}#carousel__navigation-button--next:disabled,#carousel__navigation-button--previous:disabled{color:rgba(var(--sd-color-icon-fill-neutral-500))}:host([inverted]) #carousel__navigation-button--next,:host([inverted]) #carousel__navigation-button--previous{color:rgba(var(--sd-color-icon-fill-white))}:host([inverted]) #carousel__navigation-button--next:disabled,:host([inverted]) #carousel__navigation-button--previous:disabled{color:rgba(var(--sd-color-icon-fill-neutral-600))}`
+: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}[part=autoplay-controls]{z-index:1}:host([fade]){--carousel-height:auto}:host([fade]) .carousel__slides{position:relative;display:block;overflow:hidden;height:var(--carousel-height)}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__navigation{grid-area:navigation}sd-button::part(label){pointer-events:none;display:flex;flex:auto;align-items:center}#carousel__navigation-button--next,#carousel__navigation-button--previous{color:rgba(var(--sd-color-icon-fill-primary))}#carousel__navigation-button--next:disabled,#carousel__navigation-button--previous:disabled{color:rgba(var(--sd-color-icon-fill-neutral-500))}:host([inverted]) #carousel__navigation-button--next,:host([inverted]) #carousel__navigation-button--previous{color:rgba(var(--sd-color-icon-fill-white))}:host([inverted]) #carousel__navigation-button--next:disabled,:host([inverted]) #carousel__navigation-button--previous:disabled{color:rgba(var(--sd-color-icon-fill-neutral-600))}`
 ];
 __decorateClass([
   query('[part~="autoplay-controls"]')
@@ -542,6 +548,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdCarousel.prototype, "autoplay", 2);
+__decorateClass([
+  property({ type: Number, attribute: "autoplay-interval", reflect: true })
+], SdCarousel.prototype, "autoplayInterval", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdCarousel.prototype, "fade", 2);
@@ -594,6 +603,9 @@ __decorateClass([
 __decorateClass([
   watch("autoplay")
 ], SdCarousel.prototype, "handleAutoplayChange", 1);
+__decorateClass([
+  watch("autoplayInterval")
+], SdCarousel.prototype, "handleautoplayIntervalChange", 1);
 SdCarousel = __decorateClass([
   customElement("sd-carousel")
 ], SdCarousel);

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

@@ -11,6 +11,7 @@ export default class SdCarousel extends SolidElement {
     inverted: boolean;
     loop: boolean;
     autoplay: boolean;
+    autoplayInterval: number;
     fade: boolean;
     slidesPerPage: number;
     slidesPerMove: number;
@@ -55,6 +56,7 @@ export default class SdCarousel extends SolidElement {
     handleSlideChange(): void;
     handleSlidesPerMoveChange(): void;
     handleAutoplayChange(): void;
+    handleautoplayIntervalChange(): void;
     previous(behavior?: ScrollBehavior): void;
     next(behavior?: ScrollBehavior): void;
     nextTillFirst(behavior?: ScrollBehavior): void;

package/dist/components/carousel/carousel.js

@@ -1,6 +1,6 @@
 import {
   SdCarousel
-} from "../../chunks/chunk.DOQJMWSI.js";
+} from "../../chunks/chunk.BWFGZZU7.js";
 import "../../chunks/chunk.W2YDXTG5.js";
 import "../../chunks/chunk.6RE6UZ72.js";
 import "../../chunks/chunk.UVI5HHLF.js";

package/dist/custom-elements.json

@@ -3765,6 +3765,17 @@
               "attribute": "autoplay",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "autoplayInterval",
+              "type": {
+                "text": "number"
+              },
+              "default": "5",
+              "description": "Time (in seconds) between automatic slide transitions.",
+              "attribute": "autoplay-interval",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "fade",
@@ -3993,6 +4004,15 @@
               "description": "When set, the slides will scroll automatically when the user is not interacting with them.",
               "fieldName": "autoplay"
             },
+            {
+              "name": "autoplay-interval",
+              "type": {
+                "text": "number"
+              },
+              "default": "5",
+              "description": "Time (in seconds) between automatic slide transitions.",
+              "fieldName": "autoplayInterval"
+            },
             {
               "name": "fade",
               "type": {
@@ -22867,7 +22887,7 @@
   "package": {
     "name": "@solid-design-system/components",
     "description": "Solid Design System: Components",
-    "version": "6.17.1",
+    "version": "6.18.0",
     "author": "Union Investment",
     "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
     "license": "MIT"

package/dist/solid-components.js

@@ -155,7 +155,7 @@ import {
 import "./chunks/chunk.KVQN5R3X.js";
 import {
   SdCarousel
-} from "./chunks/chunk.DOQJMWSI.js";
+} from "./chunks/chunk.BWFGZZU7.js";
 import "./chunks/chunk.W2YDXTG5.js";
 import "./chunks/chunk.6RE6UZ72.js";
 import "./chunks/chunk.UVI5HHLF.js";

package/dist/vscode.html-custom-data.json

@@ -530,6 +530,11 @@
           "description": "When set, the slides will scroll automatically when the user is not interacting with them.",
           "values": []
         },
+        {
+          "name": "autoplay-interval",
+          "description": "Time (in seconds) between automatic slide transitions.",
+          "values": []
+        },
         {
           "name": "fade",
           "description": "When set, slides will fade between each other instead of scrolling.",

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": "6.17.1",
+  "version": "6.18.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1102,6 +1102,11 @@
               "description": "When set, the slides will scroll automatically when the user is not interacting with them.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "autoplay-interval",
+              "description": "Time (in seconds) between automatic slide transitions.",
+              "value": { "type": "number", "default": "5" }
+            },
             {
               "name": "fade",
               "description": "When set, slides will fade between each other instead of scrolling.",
@@ -1179,6 +1184,11 @@
                 "description": "When set, the slides will scroll automatically when the user is not interacting with them.",
                 "type": "boolean"
               },
+              {
+                "name": "autoplayInterval",
+                "description": "Time (in seconds) between automatic slide transitions.",
+                "type": "number"
+              },
               {
                 "name": "fade",
                 "description": "When set, slides will fade between each other instead of scrolling.",

package/dist-versioned/chunks/chunk.2U32VSHR.js

@@ -38,13 +38,13 @@ var SdBreadcrumbItem = class extends SolidElement {
     requestAnimationFrame(() => this.handleCurrentChange());
   }
   render() {
-    return html`<sd-6-17-1-link part="base" href="${ifDefined(!this.current ? this.href : void 0)}" target="${this.target}" standalone class="text-nowrap"><slot></slot></sd-6-17-1-link>`;
+    return html`<sd-6-18-0-link part="base" href="${ifDefined(!this.current ? this.href : void 0)}" target="${this.target}" standalone class="text-nowrap"><slot></slot></sd-6-18-0-link>`;
   }
 };
 SdBreadcrumbItem.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{display:inline-flex;align-items:center}sd-6-17-1-link::part(base){align-items:center}sd-6-17-1-link::part(icon-left){margin-right:calc(var(--sd-spacing-1) * 0);display:inline-flex}:host([current]) sd-6-17-1-link::part(base){color:rgba(var(--sd-color-text-neutral-700))}:host([current]) sd-6-17-1-link::part(label){text-decoration-line:none}`
+:host{display:inline-flex;align-items:center}sd-6-18-0-link::part(base){align-items:center}sd-6-18-0-link::part(icon-left){margin-right:calc(var(--sd-spacing-1) * 0);display:inline-flex}:host([current]) sd-6-18-0-link::part(base){color:rgba(var(--sd-color-text-neutral-700))}:host([current]) sd-6-18-0-link::part(label){text-decoration-line:none}`
 ];
 __decorateClass([
   query('[part="base"]')
@@ -62,7 +62,7 @@ __decorateClass([
   watch("current")
 ], SdBreadcrumbItem.prototype, "handleCurrentChange", 1);
 SdBreadcrumbItem = __decorateClass([
-  customElement("sd-6-17-1-breadcrumb-item")
+  customElement("sd-6-18-0-breadcrumb-item")
 ], SdBreadcrumbItem);
 
 export {

package/dist-versioned/chunks/chunk.2WGBXYET.js

@@ -22,7 +22,7 @@ var SdDivider = class extends SolidElement {
   }
   render() {
     return html`<hr part="main" aria-orientation="${this.orientation}" class="${cx(
-      this.inverted ? "sd-6-17-1-divider--inverted-color-border" : "border-neutral-400",
+      this.inverted ? "sd-6-18-0-divider--inverted-color-border" : "border-neutral-400",
       this.orientation === "horizontal" ? "border-t w-full" : " border-l h-full"
     )}">`;
   }
@@ -33,7 +33,7 @@ var SdDivider = class extends SolidElement {
 SdDivider.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{margin:calc(var(--sd-spacing-1) * 0)}:host(sd-6-17-1-divider[orientation=horizontal]){display:block}:host(sd-6-17-1-divider[orientation=vertical]){display:inline-block}`
+:host{margin:calc(var(--sd-spacing-1) * 0)}:host(sd-6-18-0-divider[orientation=horizontal]){display:block}:host(sd-6-18-0-divider[orientation=vertical]){display:inline-block}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
@@ -42,7 +42,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdDivider.prototype, "inverted", 2);
 SdDivider = __decorateClass([
-  customElement("sd-6-17-1-divider")
+  customElement("sd-6-18-0-divider")
 ], SdDivider);
 
 export {

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

@@ -69,7 +69,7 @@ __decorateClass([
   watch("src")
 ], SdInclude.prototype, "handleSrcChange", 1);
 SdInclude = __decorateClass([
-  customElement("sd-6-17-1-include")
+  customElement("sd-6-18-0-include")
 ], SdInclude);
 
 export {