@solid-design-system/components 5.16.0 → 5.16.1-next.0

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-5-16-0-button';
+            const isButton = this.host.tagName.toLowerCase() === 'sd-5-16-1-next-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-5-16-0-radio-group');
+                const sdRadioGroups = Array.from(invalidElements).filter(element => element.tagName.toLowerCase() === 'sd-5-16-1-next-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-5-16-0-input'],
+            assumeInteractionOn: ['sd-5-16-1-next-0-input'],
             ...options
         };
     }

package/cdn-versioned/internal/longpress.d.ts

@@ -19,5 +19,5 @@ declare class LongPressDirective extends AsyncDirective {
     private handlePointerUp;
     private stopSpinningAndCleanUp;
 }
-export declare const longPress: (_callback: Callbacks) => import("lit/async-directive").DirectiveResult<typeof LongPressDirective>;
+export declare const longPress: (_callback: Callbacks) => import("lit/async-directive.js").DirectiveResult<typeof LongPressDirective>;
 export type { LongPressDirective };

package/cdn-versioned/internal/solid-element.d.ts

@@ -2,6 +2,11 @@ import { LitElement } from 'lit';
 export default class SolidElement extends LitElement {
     dir: 'ltr' | 'rtl' | 'auto';
     lang: string;
+    protected onThemeChange?(e: CustomEvent<{
+        theme: string;
+    }>): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     static styles: import("lit").CSSResult[];
     emit(name: string, options?: CustomEventInit): CustomEvent<any>;
     token<T>(name: string, fallback: T): T;

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

@@ -12,22 +12,72 @@ const tokenProcessors = {
     'sd-duration': (value) => parseDuration(value)
 };
 export default class SolidElement extends LitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.onThemeChange)
+            return;
+        this.renderRoot.addEventListener('sd-theme-change', this.onThemeChange.bind(this));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (!this.onThemeChange)
+            return;
+        this.renderRoot.removeEventListener('sd-theme-change', this.onThemeChange.bind(this));
+    }
     static { this.styles = [
         css `
-      /* Import CSS styles once to make them available in every component */
-      @import url('../styles/src/modules/interactive.css');
-      @import url('../styles/src/modules/paragraph.css');
-      @import url('../styles/src/modules/headline.css');
-
-      /* TailwindCSS directives have to come after imports */
-      @tailwind base;
-      @tailwind components;
-      @tailwind utilities;
+      @import '../styles/src/modules/interactive.css';
+      @import '../styles/src/modules/paragraph.css';
+      @import '../styles/src/modules/headline.css';
 
       :host {
-        --tw-content: '';
+        /* Add default tailwind variables that get lost during compilation */
+        --tw-blur: initial;
+        --tw-border-style: solid;
+        --tw-brightness: initial;
+        --tw-contrast: initial;
+        --tw-divide-y-reverse: 0;
+        --tw-drop-shadow: initial;
+        --tw-duration: initial;
+        --tw-ease: initial;
+        --tw-font-weight: initial;
         --tw-gradient-from-position: 0%;
+        --tw-gradient-from: #0000;
+        --tw-gradient-position: initial;
+        --tw-gradient-stops: initial;
         --tw-gradient-to-position: 100%;
+        --tw-gradient-to: #0000;
+        --tw-gradient-via-position: 50%;
+        --tw-gradient-via-stops: initial;
+        --tw-gradient-via: #0000;
+        --tw-grayscale: initial;
+        --tw-hue-rotate: initial;
+        --tw-inset-ring-color: initial;
+        --tw-inset-ring-shadow: 0 0 #0000;
+        --tw-inset-shadow-color: initial;
+        --tw-inset-shadow: 0 0 #0000;
+        --tw-invert: initial;
+        --tw-opacity: initial;
+        --tw-ring-color: initial;
+        --tw-ring-inset: initial;
+        --tw-ring-offset-color: #fff;
+        --tw-ring-offset-shadow: 0 0 #0000;
+        --tw-ring-offset-width: 0px;
+        --tw-ring-shadow: 0 0 #0000;
+        --tw-rotate-x: rotateX(0);
+        --tw-rotate-y: rotateY(0);
+        --tw-rotate-z: rotateZ(0);
+        --tw-saturate: initial;
+        --tw-sepia: initial;
+        --tw-shadow-color: initial;
+        --tw-shadow: 0 0 #0000;
+        --tw-skew-x: skewX(0);
+        --tw-skew-y: skewY(0);
+        --tw-space-x-reverse: 0;
+        --tw-tracking: initial;
+        --tw-translate-x: 0;
+        --tw-translate-y: 0;
+        --tw-translate-z: 0;
 
         box-sizing: border-box;
       }
@@ -55,7 +105,7 @@ export default class SolidElement extends LitElement {
         return event;
     }
     token(name, fallback) {
-        const value = cssVar(`var(--${name})`, this);
+        const value = cssVar(`var(${name})`, this);
         if (value === null) {
             return fallback;
         }

package/cdn-versioned/internal/theme-observer.d.ts

@@ -0,0 +1,9 @@
+import type { LitElement } from 'lit';
+export declare class ThemeObserver {
+    private host;
+    private observer;
+    private callback;
+    constructor(host: LitElement, callback: (theme: string) => void);
+    connect(): void;
+    disconnect(): void;
+}

package/cdn-versioned/internal/theme-observer.js

@@ -0,0 +1,19 @@
+import StyleObserver from 'style-observer';
+export class ThemeObserver {
+    constructor(host, callback) {
+        this.host = host;
+        this.callback = callback;
+    }
+    connect() {
+        this.observer = new StyleObserver(records => {
+            const theme = records?.[0]?.value?.replaceAll(`'`, '');
+            if (!theme)
+                return;
+            this.callback(theme);
+        });
+        this.observer.observe(this.host, '--sd-theme');
+    }
+    disconnect() {
+        this.observer?.unobserve(this.host);
+    }
+}