@solid-design-system/components 5.16.2 → 6.0.0-next.10

package/dist-versioned/chunks/{chunk.7QAWQQC2.js → chunk.3EAQUDVX.js}

@@ -4,13 +4,13 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.XZHOUXTG.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
 
 // src/components/range-tick/range-tick.ts
-import { html } from "lit";
+import { css, html } from "lit";
 import { property } from "lit/decorators.js";
 import cx from "classix";
 var SdRangeTick = class extends SolidElement {
@@ -20,15 +20,19 @@ var SdRangeTick = class extends SolidElement {
     this.subtick = false;
   }
   render() {
-    return html`<div part="base" class="${cx(this.subtick ? "w-0.25" : "w-0.5")}"><div part="line" class="${cx("bg-neutral-500", this.subtick ? "h-2" : "h-[10px]")}"></div><div part="label" class="flex items-center justify-center text-center text-nowrap text-sm"><slot></slot></div></div>`;
+    return html`<div part="base" class="${cx(this.subtick ? "w-0.25" : "w-0.5")}"><div part="line" class="${cx(this.subtick ? "h-2" : "h-[10px]")}"></div><div part="label" class="flex items-center justify-center text-center text-nowrap text-sm"><slot></slot></div></div>`;
   }
 };
-SdRangeTick.styles = SolidElement.styles;
+SdRangeTick.styles = [
+  ...SolidElement.styles,
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+[part='line']{background-color:rgba(var(--sd-color-border-neutral-400,rgba(var(--sd-color-neutral-400))))}`
+];
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdRangeTick.prototype, "subtick", 2);
 SdRangeTick = __decorateClass([
-  customElement("sd-5-16-2-range-tick")
+  customElement("sd-6-0-0-next-10-range-tick")
 ], SdRangeTick);
 
 export {

package/dist-versioned/chunks/{chunk.TWLOCD6V.js → chunk.3OSNOL5U.js}

@@ -17,7 +17,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.XZHOUXTG.js";
 import {
   animateTo,
   parseDuration,
@@ -206,15 +206,16 @@ var SdTooltip = class extends SolidElement {
   render() {
     const isStart = this.placement.endsWith("-start");
     const isEnd = this.placement.endsWith("-end");
-    return html`<sd-5-16-2-popup part="base" exportparts="
+    return html`<sd-6-0-0-next-10-popup part="base" exportparts="
           popup:base__popup,
           arrow:base__arrow
-        " class="${cx(this.open && "tooltip--open")}" placement="${this.placement}" distance="10" skidding="${{ start: 2, end: -2, default: 0 }[isStart ? "start" : isEnd ? "end" : "default"] * (this.size === "sm" ? -1 : 1)}" strategy="${this.hoist ? "fixed" : "absolute"}" flip shift arrow auto-size="vertical" arrow-padding="0">${this.hasCustomTrigger ? html`<slot slot="anchor"></slot>` : html`<button slot="anchor" aria-describedby="tooltip" class="${cx("flex sd-interactive rounded-full", this.size === "lg" ? "text-xl" : "text-base")}" ?disabled="${this.disabled}" aria-expanded="${this.open}" aria-controls="tooltip"><sd-5-16-2-icon library="_internal" name="info-circle" label="Tooltip" class="${cx(this.disabled && "sd-interactive--disabled")}"></sd-5-16-2-icon></button>`}<slot name="content" part="body" id="tooltip" class="bg-primary text-white py-3 px-4 block rounded-none text-sm text-left" role="tooltip" aria-label="${this.content}" aria-live="${this.open ? "polite" : "off"}">${this.content}</slot></sd-5-16-2-popup>`;
+        " class="${cx(this.open && "tooltip--open")}" placement="${this.placement}" distance="10" skidding="${{ start: 2, end: -2, default: 0 }[isStart ? "start" : isEnd ? "end" : "default"] * (this.size === "sm" ? -1 : 1)}" strategy="${this.hoist ? "fixed" : "absolute"}" flip shift arrow auto-size="vertical" arrow-padding="0">${this.hasCustomTrigger ? html`<slot slot="anchor"></slot>` : html`<button slot="anchor" aria-describedby="tooltip" class="${cx("flex sd-interactive rounded-full", this.size === "lg" ? "text-xl" : "text-base")}" ?disabled="${this.disabled}" aria-expanded="${this.open}" aria-controls="tooltip"><sd-6-0-0-next-10-icon library="_internal" name="info-circle" label="Tooltip" class="${cx(this.disabled && "sd-interactive--disabled")}"></sd-6-0-0-next-10-icon></button>`}<slot name="content" part="body" id="tooltip" class="bg-primary text-white py-3 px-4 block rounded-none text-sm text-left" role="tooltip" aria-label="${this.content}" aria-live="${this.open ? "polite" : "off"}">${this.content}</slot></sd-6-0-0-next-10-popup>`;
   }
 };
 SdTooltip.styles = [
   ...SolidElement.styles,
-  css`:host{--hide-delay:0ms;--show-delay:150ms;display:contents}sd-5-16-2-popup{--arrow-color:rgb(var(--sd-color-primary,0 53 142)/1);--arrow-size:10px}sd-5-16-2-popup::part(popup){pointer-events:none;z-index:10;--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-5-16-2-popup::part(arrow){--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-5-16-2-popup[placement^=top]::part(popup){transform-origin:bottom}sd-5-16-2-popup[placement^=bottom]::part(popup){transform-origin:top}#tooltip{max-width:var(--max-width)}::slotted([slot=content]){max-height:var(--auto-size-available-height)!important;max-width:var(--auto-size-available-width)!important;overflow:auto}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
+:host{--hide-delay:0ms;--show-delay:150ms;display:contents}sd-6-0-0-next-10-popup{--arrow-color:rgba(var(--sd-color-background-primary));--arrow-size:10px}sd-6-0-0-next-10-popup::part(popup){pointer-events:none;z-index:10;--tw-shadow:var(--sd-shadow);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}sd-6-0-0-next-10-popup::part(arrow){--tw-shadow:var(--sd-shadow, 0px 1px 3px 0px rgb(81 81 81 / 75%));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-6-0-0-next-10-popup[placement^=top]::part(popup){transform-origin:bottom}sd-6-0-0-next-10-popup[placement^=bottom]::part(popup){transform-origin:top}#tooltip{max-width:var(--max-width)}::slotted([slot=content]){overflow:auto;max-width:var(--auto-size-available-width)!important;max-height:var(--auto-size-available-height)!important}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}`
 ];
 __decorateClass([
   query("slot:not([name])")
@@ -223,7 +224,7 @@ __decorateClass([
   query("#tooltip")
 ], SdTooltip.prototype, "body", 2);
 __decorateClass([
-  query("sd-5-16-2-popup")
+  query("sd-6-0-0-next-10-popup")
 ], SdTooltip.prototype, "popup", 2);
 __decorateClass([
   property({ type: String, reflect: true })
@@ -256,7 +257,7 @@ __decorateClass([
   watch("disabled")
 ], SdTooltip.prototype, "handleDisabledChange", 1);
 SdTooltip = __decorateClass([
-  customElement("sd-5-16-2-tooltip")
+  customElement("sd-6-0-0-next-10-tooltip")
 ], SdTooltip);
 setDefaultAnimation("tooltip.show", {
   keyframes: [{ opacity: 0 }, { opacity: 1 }],

package/dist-versioned/chunks/chunk.3WAKJXC7.js

@@ -0,0 +1,78 @@
+import {
+  HasSlotController
+} from "./chunk.IVMQWO2L.js";
+import {
+  SolidElement,
+  customElement
+} from "./chunk.XZHOUXTG.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/teaser-media/teaser-media.ts
+import { css, html } from "lit";
+import { property, query } from "lit/decorators.js";
+import cx from "classix";
+var SdTeaserMedia = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "white";
+    this.hasSlotController = new HasSlotController(
+      this,
+      "[default]",
+      "media",
+      "meta",
+      "headline",
+      "expandable"
+    );
+  }
+  render() {
+    const slots = {
+      "teaser-has-default": this.hasSlotController.test("[default]"),
+      "teaser-has-media": this.hasSlotController.test("media"),
+      "teaser-has-meta": this.hasSlotController.test("meta"),
+      "teaser-has-headline": this.hasSlotController.test("headline"),
+      "teaser-has-expandable": this.hasSlotController.test("expandable")
+    };
+    return html`<div class="relative flex flex-col group" part="base"><div class="absolute flex flex-col justify-end h-full w-full pb-4"><div class="${cx(
+      "flex-1",
+      this.variant === "gradient-light" && "bg-gradient-to-t from-white/[.8] to-60%",
+      this.variant === "gradient-dark" && "bg-gradient-to-t from-primary-800/[.8] to-60%"
+    )}"></div><div class="${cx("relative", ["primary", "gradient-dark"].includes(this.variant) && "text-white")}"><div class="${cx(
+      "absolute inset-0",
+      {
+        white: "bg-white/[.8] group-hover:bg-white/90",
+        "neutral-100": "bg-neutral-100/[.8] group-hover:bg-neutral-100/90",
+        primary: "bg-primary/[.8] text-white group-hover:bg-primary/90",
+        "primary-100": "bg-primary-100/[.8] group-hover:bg-primary-100/90",
+        "gradient-light": "bg-gradient-to-t from-white/90 to-white/[.8]",
+        "gradient-dark": "bg-gradient-to-t from-primary-800/90 to-primary-800/[.8]"
+      }[this.variant]
+    )}"></div><div class="relative flex-col text-left p-4" part="content"><div class="flex flex-col"><div part="headline" class="text-lg font-bold m-0 order-2"><slot name="headline">Always insert one semantically correct heading element here (e. g. &lt;h2>)</slot></div><div part="meta" class="${cx("gap-2 mb-4 order-1", !slots["teaser-has-meta"] && "hidden")}"><slot name="meta"></slot></div></div><div class="${cx(
+      "hidden",
+      slots["teaser-has-expandable"] && "h-[0px] invisible opacity-0 md:[transition:_height_0.2s_linear,opacity_0.1s_linear_0.1s] md:block md:group-hover:h-auto md:group-hover:my-4 md:group-hover:opacity-[100%] md:group-hover:visible"
+    )}" part="expandable" aria-hidden="true"><slot name="expandable"></slot></div><div part="main" class="${cx(!slots["teaser-has-default"] && "hidden")}"><slot></slot></div></div></div></div><div class="${cx("mb-4 -z-10", !slots["teaser-has-media"] && "hidden")}" part="media"><slot name="media"></slot></div></div>`;
+  }
+};
+SdTeaserMedia.styles = [
+  ...SolidElement.styles,
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+:host{display:block}::slotted(*){margin:calc(var(--sd-spacing-1) * 0)}:host([variant=white]) .background:focus-within{background-color:rgba(var(--sd-color-background-white))}@supports (color:color-mix(in lab,red,red)){:host([variant=white]) .background:focus-within{background-color:color-mix(in oklab,rgba(var(--sd-color-background-white)) var(--sd-opacity-90),transparent)}}:host([variant=neutral-100]) .background:focus-within{background-color:rgba(var(--sd-color-background-neutral-100))}@supports (color:color-mix(in lab,red,red)){:host([variant=neutral-100]) .background:focus-within{background-color:color-mix(in oklab,rgba(var(--sd-color-background-neutral-100)) var(--sd-opacity-90),transparent)}}:host([variant=primary]) .background:focus-within{background-color:rgba(var(--sd-color-background-primary))}@supports (color:color-mix(in lab,red,red)){:host([variant=primary]) .background:focus-within{background-color:color-mix(in oklab,rgba(var(--sd-color-background-primary)) var(--sd-opacity-90),transparent)}}:host([variant=primary-100]) .background:focus-within{background-color:rgba(var(--sd-color-background-primary-100))}@supports (color:color-mix(in lab,red,red)){:host([variant=primary-100]) .background:focus-within{background-color:color-mix(in oklab,rgba(var(--sd-color-background-primary-100)) var(--sd-opacity-90),transparent)}}:host([variant=gradient-light]) .bg-gradient-to-t{--sd-color-background-white:rgba(
+          var(--sd-informational-gradient--white-color-background, rgba(var(--sd-color-white)))
+        )}:host([variant=gradient-dark]) .bg-gradient-to-t{--sd-color-background-primary-800:rgba(
+          var(--sd-informational-gradient--primary-800-color-background, rgba(var(--sd-color-primary-800)))
+        )}`
+];
+__decorateClass([
+  property({ type: String, reflect: true })
+], SdTeaserMedia.prototype, "variant", 2);
+__decorateClass([
+  query('[part="base"]')
+], SdTeaserMedia.prototype, "teaserMedia", 2);
+SdTeaserMedia = __decorateClass([
+  customElement("sd-6-0-0-next-10-teaser-media")
+], SdTeaserMedia);
+
+export {
+  SdTeaserMedia
+};

package/dist-versioned/chunks/{chunk.W5ZR6XJP.js → chunk.45QURS66.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.XZHOUXTG.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -51,7 +51,7 @@ var SdLink = class extends SolidElement {
       "icon-right": this.hasSlotController.test("icon-right")
     };
     return html`<a part="base" class="${cx(
-      "inline",
+      this.standalone ? "flex items-start" : "inline",
       this.href && !this.visuallyDisabled ? "cursor-pointer" : "",
       this.visuallyDisabled ? "cursor-not-allowed focus-visible:focus-outline" : "",
       {
@@ -61,10 +61,9 @@ var SdLink = class extends SolidElement {
       }[this.size],
       {
         disabled: !this.inverted ? "text-neutral-500" : "text-neutral-600",
-        enabled: !this.inverted ? ` text-primary hover:text-primary-500 active:text-primary-800 focus-visible:focus-outline` : `text-white hover:text-primary-200 active:text-primary-400 focus-visible:focus-outline-inverted`,
+        enabled: !this.inverted ? ` text-primary hover:text-primary-500 active:interactive--active-color-text focus-visible:focus-outline` : `text-white hover:text-primary-200 active:text-primary-400 focus-visible:focus-outline-inverted`,
         visuallyDisabled: !this.inverted ? "text-neutral-500" : "text-neutral-600"
-      }[this.href && !this.visuallyDisabled ? "enabled" : this.visuallyDisabled ? "visuallyDisabled" : "disabled"],
-      this.standalone && "flex items-start"
+      }[this.href && !this.visuallyDisabled ? "enabled" : this.visuallyDisabled ? "visuallyDisabled" : "disabled"]
     )}" href="${ifDefined(this.href || void 0)}" target="${ifDefined(this.target || void 0)}" download="${ifDefined(this.download)}" rel="${ifDefined(this.target ? "noreferrer noopener" : void 0)}" aria-disabled="${!this.href || this.visuallyDisabled ? "true" : "false"}" tabindex="${!this.href ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @click="${this.handleClick}"><slot name="icon-left" part="icon-left" class="${cx(
       "inline",
       slots["icon-left"] && (!this.standalone ? "mr-[0.25em]" : {
@@ -84,7 +83,8 @@ var SdLink = class extends SolidElement {
 };
 SdLink.styles = [
   ...SolidElement.styles,
-  css`::slotted(sd-5-16-2-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-5-16-2-icon){font-size:var(--sd-font-size-base,1rem)}:host([size=lg][standalone]) ::slotted(sd-5-16-2-icon){font-size:var(--sd-font-size-xl,1.5rem)}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+::slotted(sd-6-0-0-next-10-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-6-0-0-next-10-icon){font-size:var(--sd-text-base);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)))}:host([size=lg][standalone]) ::slotted(sd-6-0-0-next-10-icon){font-size:var(--sd-text-xl);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)))}`
 ];
 __decorateClass([
   query("a")
@@ -111,7 +111,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdLink.prototype, "download", 2);
 SdLink = __decorateClass([
-  customElement("sd-5-16-2-link")
+  customElement("sd-6-0-0-next-10-link")
 ], SdLink);
 
 export {

package/dist-versioned/chunks/{chunk.2SR73L2N.js → chunk.4EJCZJS5.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.XZHOUXTG.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -83,7 +83,8 @@ var SdMapMarker = class extends SolidElement {
  */
 SdMapMarker.styles = [
   ...SolidElement.styles,
-  css`:host{display:block}#motion-wrapper{mask-position:center;-webkit-mask-position:center;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-size:contain;-webkit-mask-size:contain}:host([variant=cluster]) [part=base],svg{width:calc(var(--sd-spacing-12,3rem)*var(--map-marker-scaling,1))}:host([variant=cluster]) [part=base]{height:calc(var(--sd-spacing-12,3rem)*var(--map-marker-scaling,1))}:host(:not([variant=cluster])) [part=base]{height:calc(var(--sd-spacing-16,4rem)*var(--map-marker-scaling,1))}:host([variant=cluster]) [part=content]{font-size:calc(var(--sd-font-size-sm,.875rem)*var(--map-marker-scaling,1))}:host([variant=place]) [part=content]{font-size:calc(var(--sd-font-size-3xl,2rem)*var(--map-marker-scaling,1));margin-top:calc(var(--sd-spacing-2,.5rem)*-1)}:host([variant=main]) [part=marker],:host([variant=place]) [part=marker]{--tw-drop-shadow:drop-shadow(var(--sd-shadow,0px 1px 3px #515151));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}:host([variant=main]) #marker-circle{height:calc(var(--sd-spacing-4,1rem)*var(--map-marker-scaling,1));left:calc(var(--sd-spacing-4,1rem)*var(--map-marker-scaling,1));right:calc(var(--sd-spacing-4,1rem)*var(--map-marker-scaling,1));top:calc(var(--sd-spacing-4,1rem)*var(--map-marker-scaling,1));width:calc(var(--sd-spacing-4,1rem)*var(--map-marker-scaling,1))}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
+:host{display:block}#motion-wrapper{mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:contain;-webkit-mask-size:contain}:host([variant=cluster]) [part=base],svg{width:calc(var(--sd-spacing-12,3rem) * var(--map-marker-scaling,1))}:host([variant=cluster]) [part=base]{height:calc(var(--sd-spacing-12,3rem) * var(--map-marker-scaling,1))}:host(:not([variant=cluster])) [part=base]{height:calc(var(--sd-spacing-16,4rem) * var(--map-marker-scaling,1))}:host([variant=cluster]) [part=content]{font-size:calc(var(--sd-font-size-sm,.875rem) * var(--map-marker-scaling,1))}:host([variant=place]) [part=content]{margin-top:calc(var(--sd-spacing-2) * -1);font-size:calc(var(--sd-font-size-3xl,2rem) * var(--map-marker-scaling,1))}:host([variant=main]) [part=marker],:host([variant=place]) [part=marker]{--tw-drop-shadow-size:drop-shadow(var(--sd-drop-shadow));--tw-drop-shadow:drop-shadow(var(--sd-drop-shadow));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}:host([variant=main]) #marker-circle{width:calc(var(--sd-spacing-4,1rem) * var(--map-marker-scaling,1));height:calc(var(--sd-spacing-4,1rem) * var(--map-marker-scaling,1));left:calc(var(--sd-spacing-4,1rem) * var(--map-marker-scaling,1));right:calc(var(--sd-spacing-4,1rem) * var(--map-marker-scaling,1));top:calc(var(--sd-spacing-4,1rem) * var(--map-marker-scaling,1))}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
@@ -107,7 +108,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdMapMarker.prototype, "label", 2);
 SdMapMarker = __decorateClass([
-  customElement("sd-5-16-2-map-marker")
+  customElement("sd-6-0-0-next-10-map-marker")
 ], SdMapMarker);
 
 export {

package/dist-versioned/chunks/{chunk.AXFVYO5L.js → chunk.4KJL7PWN.js}

@@ -11,7 +11,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.XZHOUXTG.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -152,7 +152,7 @@ var SdButton = class extends SolidElement {
     return html`<${tag} part="base" class="${cx(
       `group relative z-10 font-md no-underline
         w-full align-middle inline-flex items-stretch justify-center
-        transition-colors duration-fast ease-in-out rounded-default
+        transition-colors duration-fast ease-in-out
         select-none cursor-[inherit]`,
       !this.inverted ? "focus-visible:focus-outline" : "focus-visible:focus-outline-inverted",
       this.loading && "relative cursor-wait",
@@ -163,41 +163,47 @@ var SdButton = class extends SolidElement {
        * */
       {
         /* sizes, fonts */
-        sm: `text-sm varspacing-8 ${hasBorder ? "py-[0.281rem] px-[0.938rem]" : "py-[0.344rem] px-4"}`,
-        md: `text-base varspacing-10 ${hasBorder ? "py-[0.438rem] px-[0.938rem]" : "py-2 px-4"}`,
-        lg: `text-base varspacing-12 ${hasBorder ? "py-[0.688rem] px-[0.938rem]" : "py-3 px-4"}`
+        sm: `text-sm varspacing-8 rounded-default ${hasBorder ? "py-[0.281rem] px-[0.938rem]" : "py-[0.344rem] px-4"}`,
+        md: `sd-6-0-0-next-10-button--size-md-font-size sd-6-0-0-next-10-button--size-md-border-radius varspacing-10 ${hasBorder ? "py-[0.438rem] px-[0.938rem]" : "sd-6-0-0-next-10-button--size-md-padding-block px-4"}`,
+        lg: `sd-6-0-0-next-10-button--size-lg-font-size sd-6-0-0-next-10-button--size-lg-border-radius varspacing-12 ${hasBorder ? "py-[0.688rem] px-[0.938rem]" : "sd-6-0-0-next-10-button--size-lg-padding-block px-4"}`
       }[this.size],
       {
         /* variants */
-        primary: !this.inverted ? `text-white ${this.visuallyDisabled ? "bg-neutral-500 border-neutral-500 hover:bg-neutral-500" : "bg-primary border-transparent hover:text-primary-100 active:text-primary-200"}
-          disabled:bg-neutral-500` : `${this.visuallyDisabled ? "bg-neutral-500 text-white border-neutral-500 hover:bg-neutral-500 active:bg-neutral-500" : "text-primary bg-white border-white hover:text-primary-500 active:text-primary-800"}
+        primary: !this.inverted ? `sd-6-0-0-next-10-button--primary--default-color-text ${this.visuallyDisabled ? "bg-neutral-500 border-neutral-500 hover:bg-neutral-500" : "sd-6-0-0-next-10-button--primary--default-color-background border-transparent hover:text-primary-100 active:sd-6-0-0-next-10-button--primary--active-color-text"}
+          disabled:bg-neutral-500` : `${this.visuallyDisabled ? "bg-neutral-500 text-white border-neutral-500 hover:bg-neutral-500 active:bg-neutral-500" : "sd-6-0-0-next-10-button--primary--inverted--default-color-text sd-6-0-0-next-10-button--primary--inverted--default-color-background border-white hover:sd-6-0-0-next-10-button--primary--inverted--hover-color-text active:sd-6-0-0-next-10-button--primary--inverted--active-color-text"}
           disabled:bg-neutral-600 disabled:text-white disabled:border-neutral-600`,
         secondary: !this.inverted ? `border ${this.visuallyDisabled ? "text-neutral-500 border-neutral-500 hover:text-neutral-500 hover:border-neutral-500 active:text-neutral-500 active:border-neutral-500" : "text-primary border-primary hover:text-primary-500 hover:border-primary-500 active:text-primary-800 active:border-primary-800"}
-          disabled:text-neutral-500 disabled:border-neutral-500` : `border ${this.visuallyDisabled ? "text-neutral-600 border-neutral-600 hover:text-neutral-600 hover:border-neutral-600 active:text-neutral-600 active:border-neutral-600" : "text-white border-white hover:text-primary-100 hover:border-primary-100 active:text-primary-200"}
+          disabled:text-neutral-500 disabled:border-neutral-500` : `border ${this.visuallyDisabled ? "text-neutral-600 border-neutral-600 hover:text-neutral-600 hover:border-neutral-600 active:text-neutral-600 active:border-neutral-600" : "text-white border-white hover:sd-6-0-0-next-10-button--secondary--inverted--hover-color-text hover:border-primary-100 active:text-primary-200"}
           disabled:text-neutral-600 disabled:border-neutral-600`,
         tertiary: !this.inverted ? `border-transparent ${this.visuallyDisabled ? "text-neutral-500 hover:text-neutral-500 active:text-neutral-500" : "text-primary hover:text-primary-500 active:text-primary-800"}
-          disabled:text-neutral-500` : `border-transparent  ${this.visuallyDisabled ? "text-neutral-600 hover:text-neutral-600 active:text-neutral-600" : "text-white hover:text-primary-100 active:text-primary-200"}
+          disabled:text-neutral-500` : `border-transparent  ${this.visuallyDisabled ? "text-neutral-600 hover:text-neutral-600 active:text-neutral-600" : "text-white hover:sd-6-0-0-next-10-button--tertiary--inverted--hover-color-text active:text-primary-200"}
           disabled:text-neutral-600`,
         cta: `text-white ${this.visuallyDisabled ? "bg-neutral-500 border-neutral-500 hover:bg-neutral-500 active:bg-neutral-500" : "bg-accent-500 border-transparent"}
           ${!this.inverted ? "disabled:bg-neutral-500 disabled:border-neutral-500" : "disabled:bg-neutral-600 disabled:border-neutral-600"} disabled:text-white`
       }[this.variant]
     )}" ?disabled="${ifDefined(isLink ? void 0 : this.disabled)}" type="${ifDefined(isLink ? void 0 : this.type)}" title="${this.title}" name="${ifDefined(isLink ? void 0 : this.name)}" value="${ifDefined(isLink ? void 0 : this.value)}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}" rel="${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}" role="${ifDefined(isLink ? void 0 : "button")}" aria-disabled="${this.disabled || this.visuallyDisabled ? "true" : "false"}" aria-labelledby="content" tabindex="${this.disabled ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @invalid="${this.isButton() ? this.handleInvalid : null}" @click="${this.handleClick}"><div part="motion-wrapper" class="${cx(
-      "absolute inset-0 rounded-default -z-10 overflow-hidden pointer-events-none ",
-      (this.disabled || this.visuallyDisabled) && "hidden"
+      "absolute inset-0 -z-10 overflow-hidden pointer-events-none ",
+      (this.disabled || this.visuallyDisabled) && "hidden",
+      {
+        /* sizes, fonts */
+        sm: `rounded-default`,
+        md: `sd-6-0-0-next-10-button--size-md-border-radius`,
+        lg: `sd-6-0-0-next-10-button--size-lg-border-radius`
+      }[this.size]
     )}"><div class="absolute inset-0 w-full h-full transition-all duration-fast translate-y-full group-hover:translate-y-0 group-hover:mt-[-22%] mt-[11%]"><div class="${cx(
       "absolute right-0 min-w-full min-h-full aspect-square skew-y-[-11deg] mt-[11%]",
       {
-        primary: !this.inverted ? "bg-primary-500 group-active:bg-primary-800" : "bg-primary-100 group-active:bg-primary-200",
-        secondary: !this.inverted ? "bg-primary-100 group-active:bg-primary-200" : "bg-primary-500 group-active:bg-primary-800",
-        tertiary: !this.inverted ? "bg-primary-100 group-active:bg-primary-200" : "bg-primary-500 group-active:bg-primary-800",
+        primary: !this.inverted ? "sd-6-0-0-next-10-button--primary--hover-color-background group-active:bg-primary-800" : "sd-6-0-0-next-10-button--primary--inverted--hover-color-background group-active:bg-primary-200",
+        secondary: !this.inverted ? "sd-6-0-0-next-10-button--secondary--hover-color-background group-active:sd-6-0-0-next-10-button--secondary--active-color-background" : "bg-primary-500 group-active:sd-6-0-0-next-10-button--secondary--inverted--active-color-background",
+        tertiary: !this.inverted ? "sd-6-0-0-next-10-button--tertiary--hover-color-background group-active:sd-6-0-0-next-10-button--tertiary--active-color-background" : "bg-primary-500 group-active:sd-6-0-0-next-10-button--tertiary--inverted--active-color-background",
         cta: "bg-accent-550 group-active:bg-accent-700"
       }[this.variant]
     )}"></div><div class="${cx(
       "absolute w-full h-full mt-[22%]",
       {
-        primary: !this.inverted ? "bg-primary-500 group-active:bg-primary-800" : "bg-primary-100 group-active:bg-primary-200",
-        secondary: !this.inverted ? "bg-primary-100 group-active:bg-primary-200" : "bg-primary-500 group-active:bg-primary-800",
-        tertiary: !this.inverted ? "bg-primary-100 group-active:bg-primary-200" : "bg-primary-500 group-active:bg-primary-800",
+        primary: !this.inverted ? "sd-6-0-0-next-10-button--primary--hover-color-background group-active:bg-primary-800" : "sd-6-0-0-next-10-button--primary--inverted--hover-color-background group-active:bg-primary-200",
+        secondary: !this.inverted ? "sd-6-0-0-next-10-button--secondary--hover-color-background group-active:sd-6-0-0-next-10-button--secondary--active-color-background" : "bg-primary-500 group-active:sd-6-0-0-next-10-button--secondary--inverted--active-color-background",
+        tertiary: !this.inverted ? "sd-6-0-0-next-10-button--tertiary--hover-color-background group-active:sd-6-0-0-next-10-button--tertiary--active-color-background" : "bg-primary-500 group-active:sd-6-0-0-next-10-button--tertiary--inverted--active-color-background",
         cta: "bg-accent-550 group-active:bg-accent-700"
       }[this.variant]
     )}"></div></div></div><slot name="icon-left" part="icon-left" class="${cx(
@@ -222,7 +228,7 @@ var SdButton = class extends SolidElement {
         md: "ml-2",
         lg: "ml-2"
       }[this.size]
-    )}"></slot>${this.loading ? html`<sd-5-16-2-loader class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-5-16-2-loader>` : ""}</${tag}>`;
+    )}"></slot>${this.loading ? html`<sd-6-0-0-next-10-loader class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-6-0-0-next-10-loader>` : ""}</${tag}>`;
   }
 };
 /**
@@ -230,13 +236,14 @@ var SdButton = class extends SolidElement {
  */
 SdButton.styles = [
   ...SolidElement.styles,
-  css`:host{cursor:pointer;display:inline-block;position:relative;width:var(--sd-spacing-auto,auto);z-index:0}::slotted(sd-5-16-2-badge){pointer-events:none;position:absolute;right:var(--sd-spacing-0,0);top: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-5-16-2-icon),sd-5-16-2-loader{font-size:calc(var(--tw-varspacing)/2)}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
+:host{position:relative;z-index:0;display:inline-block;width:auto;cursor:pointer}::slotted(sd-6-0-0-next-10-badge){pointer-events:none;position:absolute;top:calc(var(--sd-spacing-1) * 0);right:calc(var(--sd-spacing-1) * 0);--tw-translate-x:calc(1/2 * 100%)!important;--tw-translate-y:calc(calc(1/2 * 100%) * -1)!important;translate:var(--tw-translate-x) var(--tw-translate-y)!important}::slotted(sd-6-0-0-next-10-icon),sd-6-0-0-next-10-loader{font-size:calc(var(--tw-varspacing)/ 2)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}`
 ];
 __decorateClass([
   query("a, button")
 ], SdButton.prototype, "button", 2);
 __decorateClass([
-  queryAssignedElements({ selector: "sd-5-16-2-icon" })
+  queryAssignedElements({ selector: "sd-6-0-0-next-10-icon" })
 ], SdButton.prototype, "_iconsInDefaultSlot", 2);
 __decorateClass([
   state()
@@ -302,7 +309,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdButton.prototype, "handleDisabledChange", 1);
 SdButton = __decorateClass([
-  customElement("sd-5-16-2-button")
+  customElement("sd-6-0-0-next-10-button")
 ], SdButton);
 
 export {

package/dist-versioned/chunks/{chunk.PB672B5H.js → chunk.4ONB2X42.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.XZHOUXTG.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -146,7 +146,8 @@ var SdAnimation = class extends SolidElement {
 };
 SdAnimation.styles = [
   ...SolidElement.styles,
-  css`:host{display:contents}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+:host{display:contents}`
 ];
 __decorateClass([
   queryAsync("slot")
@@ -208,7 +209,7 @@ __decorateClass([
   watch("playbackRate")
 ], SdAnimation.prototype, "handlePlaybackRateChange", 1);
 SdAnimation = __decorateClass([
-  customElement("sd-5-16-2-animation")
+  customElement("sd-6-0-0-next-10-animation")
 ], SdAnimation);
 
 export {

package/dist-versioned/chunks/{chunk.72VNUTTV.js → chunk.5NGEWIDT.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.XZHOUXTG.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -104,17 +104,7 @@ var SdBrandshape = class extends SolidElement {
   }
   render() {
     const isStylizedVariant = this.variant.startsWith("border-") || this.variant === "image";
-    return html`<div class="${cx(
-      {
-        "neutral-100": "fill-neutral-100",
-        primary: "fill-primary",
-        white: "fill-white",
-        "border-white": "fill-transparent",
-        "border-primary": "fill-transparent",
-        image: "fill-transparent"
-      }[this.variant],
-      "relative"
-    )}" part="base">${isStylizedVariant ? this.renderStylizedVariant() : ""} ${this.renderShapes()}</div>`;
+    return html`<div class="${cx(isStylizedVariant && "fill-transparent", "relative")}" part="base">${isStylizedVariant ? this.renderStylizedVariant() : ""} ${this.renderShapes()}</div>`;
   }
 };
 /**
@@ -122,7 +112,10 @@ var SdBrandshape = class extends SolidElement {
  */
 SdBrandshape.styles = [
   ...SolidElement.styles,
-  css`:host{container-type:inline-size;display:block;--angle:11deg;--radius:60px;--tan:tan(var(--angle));--adjacent:100cqw;--opposite:calc(var(--tan)*var(--adjacent));--curve:calc((var(--opposite) - (var(--radius)/3))*0.5)}@supports not (transform:skewY(11deg)){:host{--tan:0.1943803091}}@media (min-width:415px){:host{--radius:72px}}@media (min-width:640px){:host{--radius:84px}}:host([variant=image]) [part=stylized-container],:host([variant^=border-]) [part=stylized-container]:before{border-radius:0 var(--radius);height:calc(100% - var(--curve)*2);left:var(--sd-spacing-0,0);margin-top:calc(var(--curve));position:absolute;top:var(--sd-spacing-0,0);transform:skewY(calc(var(--angle)*-1))}slot[name=image]::slotted(img),slot[name=image]::slotted(video){height:calc(100% + var(--curve)*2)!important;-o-object-fit:cover;object-fit:cover;position:absolute!important;transform:translateY(calc(var(--curve)*-1)) skewY(var(--angle));width:100%}@supports not (height:100cqw){:host([variant=image]) [part=stylized-container],:host([variant^=border-]) [part=stylized-container]:before{height:100%;margin-top:0;transform:unset}slot[name=image]::slotted(img),slot[name=image]::slotted(video){height:100%!important;transform:unset}}:host([variant=border-primary]){--internal-border-color:rgb(var(--sd-color-primary,0 53 142))}:host([variant=border-white]){--internal-border-color:var(--sd-color-white,#fff)}:host([variant^=border-]) [part=stylized-container]:before{border-color:var(--internal-border-color,#000);border-style:solid;border-width:2px;content:"";right:var(--sd-spacing-0,0)}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
+:host{display:block;container-type:inline-size;--angle:11deg;--radius:60px;--tan:tan(var(--angle));--adjacent:100cqw;--opposite:calc(var(--tan) * var(--adjacent));--curve:calc(
+          (var(--opposite) - (var(--radius) / 3)) * 0.5
+        )}@supports not (transform:skewY(11deg)){:host{--tan:0.1943803091}}@media (min-width:415px){:host{--radius:72px}}@media (min-width:640px){:host{--radius:84px}}:host([variant=image]) [part=stylized-container],:host([variant^=border-]) [part=stylized-container]::before{position:absolute;top:calc(var(--sd-spacing-1) * 0);left:calc(var(--sd-spacing-1) * 0);transform:skewY(calc(var(--angle) * -1));height:calc(100% - var(--curve) * 2);border-radius:0 var(--radius);margin-top:calc(var(--curve))}slot[name=image]::slotted(img),slot[name=image]::slotted(video){width:100%;-o-object-fit:cover;object-fit:cover;transform:translateY(calc(var(--curve) * -1)) skewY(var(--angle));height:calc(100% + var(--curve) * 2)!important;position:absolute!important}@supports not (height:100cqw){:host([variant=image]) [part=stylized-container],:host([variant^=border-]) [part=stylized-container]::before{transform:unset;height:100%;margin-top:0}slot[name=image]::slotted(img),slot[name=image]::slotted(video){transform:unset;height:100%!important}}:host([variant=border-primary]){--internal-border-color:rgba(var(--sd-color-border-primary, rgba(var(--sd-color-primary))))}:host([variant=border-white]){--internal-border-color:rgba(var(--sd-color-border-white, rgba(var(--sd-color-white))))}:host([variant^=border-]) [part=stylized-container]::before{right:calc(var(--sd-spacing-1) * 0);border-style:var(--tw-border-style);border-width:var(--sd-border-width-2);--tw-border-style:solid;border-style:solid;content:'';border-color:var(--internal-border-color,#000)}:host([variant=neutral-100]) [part=base]{fill:rgba(var(--sd-color-background-neutral-100,rgba(var(--sd-color-neutral-100))))}:host([variant=white]) [part=base]{fill:rgba(var(--sd-color-background-white,rgba(var(--sd-color-white))))}:host([variant=primary]) [part=base]{fill:rgba(var(--sd-color-background-primary,rgba(var(--sd-color-primary))))}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}`
 ];
 __decorateClass([
   query("[part=base]")
@@ -137,7 +130,7 @@ __decorateClass([
   state()
 ], SdBrandshape.prototype, "componentBreakpoint", 2);
 SdBrandshape = __decorateClass([
-  customElement("sd-5-16-2-brandshape")
+  customElement("sd-6-0-0-next-10-brandshape")
 ], SdBrandshape);
 
 export {