@solid-design-system/components 4.6.17 → 4.7.0

package/cdn-versioned/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-versioned/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-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-6-17-button';
+            const isButton = this.host.tagName.toLowerCase() === 'sd-4-7-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-6-17-radio-group');
+                const sdRadioGroups = Array.from(invalidElements).filter(element => element.tagName.toLowerCase() === 'sd-4-7-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-6-17-input'],
+            assumeInteractionOn: ['sd-4-7-0-input'],
             ...options
         };
     }

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