@solid-design-system/components 4.6.17 → 4.7.0

package/dist/internal/animate.d.ts

@@ -1,4 +1,8 @@
-export declare function animateTo(el: HTMLElement, keyframes: Keyframe[], options?: KeyframeAnimationOptions): Promise<unknown>;
+interface ExtendedKeyframeAnimationOptions extends KeyframeAnimationOptions {
+    reducedMotion?: 'allow';
+}
+export declare function cssVar(expression: string, el: HTMLElement): string;
+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;
 export declare function stopAnimations(el: HTMLElement): Promise<unknown[]>;
@@ -8,3 +12,4 @@ export declare function shimKeyframesHeightAuto(keyframes: Keyframe[], calculate
     easing?: string;
     offset?: number | null;
 }[];
+export {};

package/dist/internal/animate.js

@@ -1,11 +1,21 @@
+export function cssVar(expression, el) {
+    const match = /var\((--[\w-]+)(?:,\s*([^)]+))?\)/.exec(expression);
+    if (!match)
+        return expression;
+    const [, variable, fallback] = match;
+    const value = getComputedStyle(el).getPropertyValue(variable).trim();
+    return value || fallback || '';
+}
 export function animateTo(el, keyframes, options) {
     return new Promise(resolve => {
         if (options?.duration === Infinity) {
             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 animation = el.animate(keyframes, {
             ...options,
-            duration: prefersReducedMotion() ? 0 : options.duration
+            duration: reducedMotion && options?.reducedMotion !== 'allow' ? 0 : duration
         });
         animation.addEventListener('cancel', resolve, { once: true });
         animation.addEventListener('finish', resolve, { once: true });

package/dist/internal/solid-element.d.ts

@@ -4,6 +4,7 @@ export default class SolidElement extends LitElement {
     lang: string;
     static styles: import("lit").CSSResult[];
     emit(name: string, options?: CustomEventInit): CustomEvent<any>;
+    token<T>(name: string, fallback: T): T;
 }
 export interface SolidFormControl extends SolidElement {
     name: string;

package/dist/internal/solid-element.js

@@ -4,9 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+import { cssVar, parseDuration } from './animate';
 import { LitElement, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 const css = unsafeCSS;
+const tokenProcessors = {
+    'sd-duration': (value) => parseDuration(value)
+};
 export default class SolidElement extends LitElement {
     static { this.styles = [
         css `
@@ -49,6 +53,10 @@ export default class SolidElement extends LitElement {
         this.dispatchEvent(event);
         return event;
     }
+    token(name, fallback) {
+        const value = cssVar(`var(--${name})`, this);
+        return tokenProcessors[name]?.(value) ?? fallback;
+    }
 }
 __decorate([
     property()

package/dist/solid-components.css

@@ -4,6 +4,13 @@
  * to reduce the possibility of collisions.
  */
 
+:root {
+  --sd-duration-fast: 150ms;
+  --sd-duration-medium: 300ms;
+  --sd-duration-slow: 500ms;
+  --sd-duration-x-slow: 750ms;
+}
+
 .sd-scroll-lock {
   padding-right: var(--sd-scroll-lock-size) !important;
   overflow: hidden !important;

package/dist/solid-components.js

@@ -4,164 +4,163 @@ import {
 import "./chunks/chunk.HAL7R4WT.js";
 import {
   SdTabPanel
-} from "./chunks/chunk.F6XYVX4T.js";
+} from "./chunks/chunk.5WACQD2F.js";
 import {
   SdTeaser
-} from "./chunks/chunk.DZ2V3IQW.js";
+} from "./chunks/chunk.TPVMHWEM.js";
 import {
   SdTeaserMedia
-} from "./chunks/chunk.ERSYOXHV.js";
+} from "./chunks/chunk.IQ7IQWIB.js";
 import {
   SdTextarea
-} from "./chunks/chunk.V5S3KO2G.js";
+} from "./chunks/chunk.CO7QX2EW.js";
 import {
   SdTooltip
-} from "./chunks/chunk.HIOTTMRM.js";
+} from "./chunks/chunk.WAYFISPO.js";
 import {
   SdVideo
-} from "./chunks/chunk.VGPSQWRX.js";
+} from "./chunks/chunk.TBJ2K5CM.js";
 import {
   SdScrollable
-} from "./chunks/chunk.FTGGE5XH.js";
+} from "./chunks/chunk.UOWEL76U.js";
 import {
   SdSelect
-} from "./chunks/chunk.AGI5ZMYC.js";
+} from "./chunks/chunk.5U2SJOTV.js";
 import {
   SdStep
-} from "./chunks/chunk.L3TICIB2.js";
+} from "./chunks/chunk.U37W2B3U.js";
 import {
   SdStepGroup
-} from "./chunks/chunk.V3OFS667.js";
+} from "./chunks/chunk.QCKLKM6O.js";
 import {
   SdSwitch
-} from "./chunks/chunk.YDCALUT4.js";
+} from "./chunks/chunk.W4P6LQXL.js";
 import {
   SdTab
-} from "./chunks/chunk.4ASHVYWQ.js";
+} from "./chunks/chunk.KALJB7Q2.js";
 import {
   SdTabGroup
-} from "./chunks/chunk.SOC7MXFP.js";
+} from "./chunks/chunk.O3HODN3U.js";
 import {
   SdNotification
-} from "./chunks/chunk.EDGHZRRO.js";
+} from "./chunks/chunk.VA6HEC7C.js";
 import {
   SdOptgroup
-} from "./chunks/chunk.VL533T34.js";
+} from "./chunks/chunk.QWTYLITE.js";
 import {
   SdOption
-} from "./chunks/chunk.KWTDQ4KK.js";
+} from "./chunks/chunk.ESXXYVU6.js";
 import {
   SdPopup
-} from "./chunks/chunk.YEECK5EL.js";
+} from "./chunks/chunk.72UMKQ7O.js";
 import {
   SdQuickfact
-} from "./chunks/chunk.W5O6ZSSQ.js";
+} from "./chunks/chunk.J7W7ZOQO.js";
 import {
   SdRadioButton
-} from "./chunks/chunk.2B6KEGZJ.js";
+} from "./chunks/chunk.M3MSH2U2.js";
 import {
   SdRadioGroup
-} from "./chunks/chunk.TECYWP64.js";
+} from "./chunks/chunk.XKPIO6ZK.js";
 import {
   SdRadio
-} from "./chunks/chunk.FUTSGCSR.js";
+} from "./chunks/chunk.UHGWZDAA.js";
 import {
   SdInclude
-} from "./chunks/chunk.ZOBNVT2R.js";
+} from "./chunks/chunk.PP4HPJME.js";
 import {
   SdInput
-} from "./chunks/chunk.STR7Q2AE.js";
+} from "./chunks/chunk.VEOF7FJ7.js";
 import {
   SdLink
-} from "./chunks/chunk.JUFMAAP2.js";
+} from "./chunks/chunk.NC3YA6W4.js";
 import {
   SdMapMarker
-} from "./chunks/chunk.LBJZBVP4.js";
+} from "./chunks/chunk.GLUFF74G.js";
 import {
   SdNavigationItem
-} from "./chunks/chunk.KHQD2N5S.js";
+} from "./chunks/chunk.KL3FS5YT.js";
 import {
   SdDropdown
-} from "./chunks/chunk.GEYUPHEW.js";
+} from "./chunks/chunk.RX6XKJHU.js";
 import {
   SdExpandable
-} from "./chunks/chunk.DWHZP4ID.js";
+} from "./chunks/chunk.56N3RSAE.js";
 import {
   SdFlipcard
-} from "./chunks/chunk.TQJ46AIM.js";
+} from "./chunks/chunk.5JQXTFQP.js";
 import {
   SdHeader
-} from "./chunks/chunk.5FSG57H2.js";
+} from "./chunks/chunk.DHAZFPCB.js";
 import {
   SdCheckbox
-} from "./chunks/chunk.4RFDH3SL.js";
+} from "./chunks/chunk.WOR3YQDI.js";
 import {
   SdCheckboxGroup
-} from "./chunks/chunk.S4EWMXGX.js";
+} from "./chunks/chunk.DO3SM5IZ.js";
 import {
   SdCombobox
-} from "./chunks/chunk.R55MBA6F.js";
+} from "./chunks/chunk.JMF35STD.js";
 import {
   SdTag
-} from "./chunks/chunk.EBWV7WLX.js";
+} from "./chunks/chunk.QDMA3Q4K.js";
 import "./chunks/chunk.GI7VDIWX.js";
 import "./chunks/chunk.WBJBQ4QI.js";
 import "./chunks/chunk.UIQBHPD3.js";
 import {
   SdDialog
-} from "./chunks/chunk.SLGJ34KM.js";
+} from "./chunks/chunk.34ZYNTK2.js";
 import {
   SdDivider
-} from "./chunks/chunk.GFSU4Q7M.js";
+} from "./chunks/chunk.VJXC54A5.js";
 import {
   SdDrawer
-} from "./chunks/chunk.ZCYYTGMW.js";
+} from "./chunks/chunk.VCPNOCNJ.js";
 import "./chunks/chunk.UFBRSKVR.js";
 import "./chunks/chunk.XHCTCU2Q.js";
 import "./chunks/chunk.WDWV53JP.js";
 import {
   SdBadge
-} from "./chunks/chunk.5EBZIKYH.js";
+} from "./chunks/chunk.CFQBV5W2.js";
 import {
   SdBrandshape
-} from "./chunks/chunk.O7I7F6Q2.js";
-import "./chunks/chunk.H7LBUXAT.js";
+} from "./chunks/chunk.52C5F7DJ.js";
+import "./chunks/chunk.DROA7RNH.js";
 import {
   SdCarousel
-} from "./chunks/chunk.6WYL4JXU.js";
+} from "./chunks/chunk.FPGTELPD.js";
 import "./chunks/chunk.F4VGSDIW.js";
-import "./chunks/chunk.2LMWBUBT.js";
+import "./chunks/chunk.DLBXYZN6.js";
 import "./chunks/chunk.NOWCQZBS.js";
 import {
   SdCarouselItem
-} from "./chunks/chunk.F3R45NNC.js";
+} from "./chunks/chunk.M6SZ7ZI5.js";
 import {
   SdAccordionGroup
-} from "./chunks/chunk.B6IKQ26W.js";
+} from "./chunks/chunk.ZLDJAXO4.js";
 import {
   SdAccordion
-} from "./chunks/chunk.PVLYUNK7.js";
+} from "./chunks/chunk.Z7FOHDKA.js";
 import "./chunks/chunk.N4LHE3QK.js";
-import "./chunks/chunk.EY4JPJJQ.js";
 import "./chunks/chunk.B4BZKR24.js";
 import {
   SdAnimation
-} from "./chunks/chunk.HYV22M4U.js";
+} from "./chunks/chunk.FJRN44TA.js";
 import "./chunks/chunk.TJOP7HQP.js";
 import {
   SdAudio
-} from "./chunks/chunk.SIDHPKLE.js";
+} from "./chunks/chunk.Z5JLAHEA.js";
 import {
   SdButton
-} from "./chunks/chunk.EEICCCWB.js";
+} from "./chunks/chunk.ZGAYBN5D.js";
 import {
   SdSpinner
-} from "./chunks/chunk.3FCEMGCI.js";
+} from "./chunks/chunk.JB2C7BEZ.js";
 import "./chunks/chunk.KVKRZJS7.js";
 import "./chunks/chunk.YEZS5ZR2.js";
 import {
   SdIcon
-} from "./chunks/chunk.TG3K5WND.js";
+} from "./chunks/chunk.6ZPX5OTF.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
@@ -177,7 +176,8 @@ import {
 import "./chunks/chunk.WEDOS4Q6.js";
 import "./chunks/chunk.CVCJY3ME.js";
 import "./chunks/chunk.X2OQMWGY.js";
-import "./chunks/chunk.5TWLYNWT.js";
+import "./chunks/chunk.WKOQPOCH.js";
+import "./chunks/chunk.25AH7KN2.js";
 import "./chunks/chunk.POFWU6ZT.js";
 import "./chunks/chunk.S3NI7NKU.js";
 export {

package/dist/utilities/animation-registry.d.ts

@@ -1,7 +1,10 @@
+interface ExtendedKeyframeAnimationOptions extends KeyframeAnimationOptions {
+    reducedMotion?: 'allow';
+}
 export interface ElementAnimation {
     keyframes: Keyframe[];
     rtlKeyframes?: Keyframe[];
-    options?: KeyframeAnimationOptions;
+    options?: ExtendedKeyframeAnimationOptions;
 }
 export interface ElementAnimationMap {
     [animationName: string]: ElementAnimation;
@@ -12,3 +15,4 @@ export interface GetAnimationOptions {
 export declare function setDefaultAnimation(animationName: string, animation: ElementAnimation | null): void;
 export declare function setAnimation(el: Element, animationName: string, animation: ElementAnimation | null): void;
 export declare function getAnimation(el: Element, animationName: string, options: GetAnimationOptions): ElementAnimation;
+export {};

package/dist/utilities/autocomplete-config.js

@@ -1,8 +1,9 @@
 import {
   setupAutocomplete
 } from "../chunks/chunk.6DKXZWRN.js";
-import "../chunks/chunk.YEECK5EL.js";
-import "../chunks/chunk.5TWLYNWT.js";
+import "../chunks/chunk.72UMKQ7O.js";
+import "../chunks/chunk.WKOQPOCH.js";
+import "../chunks/chunk.25AH7KN2.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   setupAutocomplete