@solid-design-system/components 4.6.18 → 4.7.1

package/cdn/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/cdn/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/cdn/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/cdn/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()