@solid-design-system/components 4.11.0 → 5.0.0

package/dist-versioned/internal/animate.d.ts

@@ -1,7 +1,7 @@
 interface ExtendedKeyframeAnimationOptions extends KeyframeAnimationOptions {
     reducedMotion?: 'allow';
 }
-export declare function cssVar(expression: string, el: HTMLElement): string;
+export declare function cssVar(expression: string, el: HTMLElement): string | null;
 export declare function animateTo(el: HTMLElement, keyframes: Keyframe[], options?: ExtendedKeyframeAnimationOptions): Promise<unknown>;
 export declare function parseDuration(delay: number | string): number;
 export declare function prefersReducedMotion(): boolean;

package/dist-versioned/internal/animate.js

@@ -4,7 +4,7 @@ export function cssVar(expression, el) {
         return expression;
     const [, variable, fallback] = match;
     const value = getComputedStyle(el).getPropertyValue(variable).trim();
-    return value || fallback || '';
+    return value || fallback || null;
 }
 export function animateTo(el, keyframes, options) {
     return new Promise(resolve => {
@@ -12,7 +12,7 @@ export function animateTo(el, keyframes, options) {
             throw new Error('Promise-based animations must be finite.');
         }
         const reducedMotion = prefersReducedMotion();
-        const duration = typeof options.duration === 'string' ? parseDuration(cssVar(options.duration, el)) : options.duration;
+        const duration = typeof options.duration === 'string' ? parseDuration(cssVar(options.duration, el) ?? '') : options.duration;
         const animation = el.animate(keyframes, {
             ...options,
             duration: reducedMotion && options?.reducedMotion !== 'allow' ? 0 : duration

package/dist-versioned/internal/form.js

@@ -9,7 +9,7 @@ export class FormControlController {
             const disabled = this.options.disabled(this.host);
             const name = this.options.name(this.host);
             const value = this.options.value(this.host);
-            const isButton = this.host.tagName.toLowerCase() === 'sd-4-11-0-button';
+            const isButton = this.host.tagName.toLowerCase() === 'sd-5-0-0-button';
             if (!disabled && !isButton && typeof name === 'string' && name.length > 0 && typeof value !== 'undefined') {
                 if (Array.isArray(value)) {
                     value.forEach(val => {
@@ -33,7 +33,7 @@ export class FormControlController {
                 event.preventDefault();
                 event.stopImmediatePropagation();
                 const invalidElements = this.form?.querySelectorAll('[data-invalid]');
-                const sdRadioGroups = Array.from(invalidElements).filter(element => element.tagName.toLowerCase() === 'sd-4-11-0-radio-group');
+                const sdRadioGroups = Array.from(invalidElements).filter(element => element.tagName.toLowerCase() === 'sd-5-0-0-radio-group');
                 sdRadioGroups.forEach(radioGroup => {
                     radioGroup.shadowRoot?.querySelector('input')?.dispatchEvent(new Event('invalid'));
                 });
@@ -76,7 +76,7 @@ export class FormControlController {
             disabled: input => input.disabled ?? false,
             reportValidity: input => (typeof input.reportValidity === 'function' ? input.reportValidity() : true),
             setValue: (input, value) => (input.value = value),
-            assumeInteractionOn: ['sd-4-11-0-input'],
+            assumeInteractionOn: ['sd-5-0-0-input'],
             ...options
         };
     }

package/dist-versioned/internal/solid-element.js

@@ -55,7 +55,10 @@ export default class SolidElement extends LitElement {
     }
     token(name, fallback) {
         const value = cssVar(`var(--${name})`, this);
-        return tokenProcessors[name]?.(value) ?? fallback;
+        if (value === null) {
+            return fallback;
+        }
+        return tokenProcessors[name]?.(value) ?? value ?? fallback;
     }
 }
 __decorate([

package/dist-versioned/solid-components.css

@@ -37,13 +37,13 @@
     inset-inline-start: 50%;
 }
 
-.sd-toast-stack sd-4-11-0-notification::part(base) {
+.sd-toast-stack sd-5-0-0-notification::part(base) {
   --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-toast-stack sd-4-11-0-notification::part(content) {
+.sd-toast-stack sd-5-0-0-notification::part(content) {
   --tw-border-opacity: 1;
   border-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-border-opacity, 1)) /* Used for buttons, inverted focus state */;
 }

package/dist-versioned/solid-components.js

@@ -4,180 +4,180 @@ import {
 import "./chunks/chunk.HAL7R4WT.js";
 import {
   SdTabPanel
-} from "./chunks/chunk.6V7KPUGO.js";
+} from "./chunks/chunk.QDFEG22S.js";
 import {
   SdTeaser
-} from "./chunks/chunk.VUKS4CBF.js";
+} from "./chunks/chunk.AUFB3CF2.js";
 import {
   SdTeaserMedia
-} from "./chunks/chunk.CWJB3CZO.js";
+} from "./chunks/chunk.EYYHIJ7Q.js";
 import {
   SdTextarea
-} from "./chunks/chunk.ZMWGNTP6.js";
+} from "./chunks/chunk.F5WZXOGP.js";
 import {
   SdTooltip
-} from "./chunks/chunk.JQD4QY3H.js";
+} from "./chunks/chunk.Q7ULKBP6.js";
 import {
   SdVideo
-} from "./chunks/chunk.LW7RVQTS.js";
+} from "./chunks/chunk.M7TUM74F.js";
 import {
   SdScrollable
-} from "./chunks/chunk.KWP3CREC.js";
+} from "./chunks/chunk.3MARQHUW.js";
 import {
   SdSelect
-} from "./chunks/chunk.BWIRKW7E.js";
+} from "./chunks/chunk.4JPDAEAZ.js";
 import {
   SdStep
-} from "./chunks/chunk.LQKJMBVH.js";
+} from "./chunks/chunk.SOAF3TY4.js";
 import {
   SdStepGroup
-} from "./chunks/chunk.CMK6UTW6.js";
+} from "./chunks/chunk.GCNQNIVQ.js";
 import {
   SdSwitch
-} from "./chunks/chunk.ZXC3A5GK.js";
+} from "./chunks/chunk.NMI37BFS.js";
 import {
   SdTab
-} from "./chunks/chunk.EQRUJQQW.js";
+} from "./chunks/chunk.XI3IZCLB.js";
 import {
   SdTabGroup
-} from "./chunks/chunk.VOWE6LHF.js";
+} from "./chunks/chunk.PK3XZW2G.js";
 import {
   SdNotification
-} from "./chunks/chunk.BABTMD4T.js";
+} from "./chunks/chunk.2BVPWR2S.js";
 import {
   SdOptgroup
-} from "./chunks/chunk.E73VDVFB.js";
+} from "./chunks/chunk.RHQ6U3DB.js";
 import {
   SdOption
-} from "./chunks/chunk.GAJFV5V3.js";
+} from "./chunks/chunk.4PVTBZ45.js";
 import {
   SdPopup
-} from "./chunks/chunk.C4WMHAOW.js";
+} from "./chunks/chunk.MGUEJDPC.js";
 import {
   SdQuickfact
-} from "./chunks/chunk.EYTEM45R.js";
+} from "./chunks/chunk.OGWBQ3DK.js";
 import {
   SdRadioButton
-} from "./chunks/chunk.LOW4LWP6.js";
+} from "./chunks/chunk.5TXDZ6OQ.js";
 import {
   SdRadioGroup
-} from "./chunks/chunk.QCQLFJGJ.js";
+} from "./chunks/chunk.ENBSTUKA.js";
 import {
   SdRadio
-} from "./chunks/chunk.KNZPI3QD.js";
+} from "./chunks/chunk.K3HF3JA4.js";
 import {
   SdInclude
-} from "./chunks/chunk.B7BIS5Y4.js";
+} from "./chunks/chunk.357PR2IB.js";
 import {
   SdInput
-} from "./chunks/chunk.H36YEYQD.js";
+} from "./chunks/chunk.X7HYCD3E.js";
 import {
   SdLink
-} from "./chunks/chunk.4TLTIOIY.js";
+} from "./chunks/chunk.4J3ZCSIH.js";
 import {
   SdMapMarker
-} from "./chunks/chunk.4UEQEUQ5.js";
+} from "./chunks/chunk.QQHF7ENZ.js";
 import {
   SdNavigationItem
-} from "./chunks/chunk.F4UAU4OM.js";
+} from "./chunks/chunk.YTDXH4KI.js";
 import {
   SdDropdown
-} from "./chunks/chunk.4LV4VHB5.js";
+} from "./chunks/chunk.QF3WLERT.js";
 import {
   SdExpandable
-} from "./chunks/chunk.O7OXBLZU.js";
+} from "./chunks/chunk.MJ3MZ7IA.js";
 import {
   SdFlipcard
-} from "./chunks/chunk.27LAMXW5.js";
+} from "./chunks/chunk.7GKULTU7.js";
 import {
   SdHeader
-} from "./chunks/chunk.RWUFX5GL.js";
+} from "./chunks/chunk.73ZM47SZ.js";
 import {
   SdCheckbox
-} from "./chunks/chunk.JNJHWACL.js";
+} from "./chunks/chunk.P4BL4RSV.js";
 import {
   SdCheckboxGroup
-} from "./chunks/chunk.JNTED6KG.js";
+} from "./chunks/chunk.G3LCJLER.js";
 import {
   SdCombobox
-} from "./chunks/chunk.QTZYBV5A.js";
+} from "./chunks/chunk.V5HD2RQH.js";
 import {
   SdTag
-} from "./chunks/chunk.C2LS4326.js";
+} from "./chunks/chunk.ZAWI6TGO.js";
 import "./chunks/chunk.GI7VDIWX.js";
 import "./chunks/chunk.WBJBQ4QI.js";
 import "./chunks/chunk.UIQBHPD3.js";
 import {
   SdDialog
-} from "./chunks/chunk.DYRAOE5L.js";
+} from "./chunks/chunk.3AQM6FKF.js";
 import {
   SdDivider
-} from "./chunks/chunk.BJSTXBIQ.js";
+} from "./chunks/chunk.AH4MJVKG.js";
 import {
   SdDrawer
-} from "./chunks/chunk.IFJ7LPJV.js";
+} from "./chunks/chunk.QHQBGFCN.js";
 import "./chunks/chunk.UFBRSKVR.js";
 import "./chunks/chunk.XHCTCU2Q.js";
 import "./chunks/chunk.WDWV53JP.js";
 import {
   SdBadge
-} from "./chunks/chunk.7VCFYOV5.js";
+} from "./chunks/chunk.QZCGIMWI.js";
 import {
   SdBrandshape
-} from "./chunks/chunk.ERRAXV4M.js";
-import "./chunks/chunk.MSSKOOJJ.js";
+} from "./chunks/chunk.MBOP4XDK.js";
+import "./chunks/chunk.YTDKF4U7.js";
 import {
   SdCarousel
-} from "./chunks/chunk.ULQU6P3E.js";
+} from "./chunks/chunk.F4LWSCE7.js";
 import "./chunks/chunk.F4VGSDIW.js";
-import "./chunks/chunk.DLBXYZN6.js";
+import "./chunks/chunk.FNYEXUNK.js";
 import "./chunks/chunk.NOWCQZBS.js";
 import {
   SdCarouselItem
-} from "./chunks/chunk.X7IRGFBS.js";
+} from "./chunks/chunk.P3M4RPHM.js";
 import {
   SdAccordionGroup
-} from "./chunks/chunk.NI45NXZV.js";
+} from "./chunks/chunk.WM4AGOIZ.js";
 import {
   SdAccordion
-} from "./chunks/chunk.R3PPZNKA.js";
+} from "./chunks/chunk.BLQFQXCU.js";
 import "./chunks/chunk.N4LHE3QK.js";
 import "./chunks/chunk.B4BZKR24.js";
 import {
   SdAnimation
-} from "./chunks/chunk.QEQDPEN2.js";
+} from "./chunks/chunk.O6YESZHA.js";
 import "./chunks/chunk.TJOP7HQP.js";
 import {
   SdAudio
-} from "./chunks/chunk.ECH5BTRG.js";
+} from "./chunks/chunk.M2VTLBRP.js";
 import {
   SdButton
-} from "./chunks/chunk.HEYBJG64.js";
+} from "./chunks/chunk.75VFJ3VZ.js";
 import {
   SdSpinner
-} from "./chunks/chunk.T5QL4V5F.js";
+} from "./chunks/chunk.2FRKOJLK.js";
 import "./chunks/chunk.KVKRZJS7.js";
 import "./chunks/chunk.YEZS5ZR2.js";
 import {
   SdIcon
-} from "./chunks/chunk.YGRJQZFR.js";
+} from "./chunks/chunk.P775L6OS.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "./chunks/chunk.7WEXXSFH.js";
+} from "./chunks/chunk.OC7IH3HF.js";
 import "./chunks/chunk.P52GZVKG.js";
 import "./chunks/chunk.RPB53XXV.js";
 import "./chunks/chunk.7VPFFNHR.js";
+import "./chunks/chunk.YNSZZDYQ.js";
 import "./chunks/chunk.4TPOL3LB.js";
-import "./chunks/chunk.XS4QJO4N.js";
 import {
   LocalizeController
 } from "./chunks/chunk.YKM42GKF.js";
 import "./chunks/chunk.WEDOS4Q6.js";
 import "./chunks/chunk.CVCJY3ME.js";
 import "./chunks/chunk.X2OQMWGY.js";
-import "./chunks/chunk.OWACJFST.js";
-import "./chunks/chunk.25AH7KN2.js";
+import "./chunks/chunk.DXLUBAVX.js";
+import "./chunks/chunk.HQWAKJBV.js";
 import "./chunks/chunk.POFWU6ZT.js";
 import "./chunks/chunk.S3NI7NKU.js";
 export {

package/dist-versioned/utilities/autocomplete-config.js

@@ -1,9 +1,9 @@
 import {
   setupAutocomplete
 } from "../chunks/chunk.6DKXZWRN.js";
-import "../chunks/chunk.C4WMHAOW.js";
-import "../chunks/chunk.OWACJFST.js";
-import "../chunks/chunk.25AH7KN2.js";
+import "../chunks/chunk.MGUEJDPC.js";
+import "../chunks/chunk.DXLUBAVX.js";
+import "../chunks/chunk.HQWAKJBV.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   setupAutocomplete

package/dist-versioned/utilities/icon-library.js

@@ -2,10 +2,10 @@ import "../chunks/chunk.HAL7R4WT.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "../chunks/chunk.7WEXXSFH.js";
+} from "../chunks/chunk.OC7IH3HF.js";
 import "../chunks/chunk.7VPFFNHR.js";
+import "../chunks/chunk.YNSZZDYQ.js";
 import "../chunks/chunk.4TPOL3LB.js";
-import "../chunks/chunk.XS4QJO4N.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   registerIconLibrary,