@solid-design-system/components 5.16.2-next.0 → 5.16.2

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-2-next-0-button';
+            const isButton = this.host.tagName.toLowerCase() === 'sd-5-16-2-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-2-next-0-radio-group');
+                const sdRadioGroups = Array.from(invalidElements).filter(element => element.tagName.toLowerCase() === 'sd-5-16-2-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-2-next-0-input'],
+            assumeInteractionOn: ['sd-5-16-2-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.js").DirectiveResult<typeof LongPressDirective>;
+export declare const longPress: (_callback: Callbacks) => import("lit/async-directive").DirectiveResult<typeof LongPressDirective>;
 export type { LongPressDirective };

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

@@ -2,11 +2,6 @@ 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,72 +12,22 @@ 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 '../styles/src/modules/interactive.css';
-      @import '../styles/src/modules/paragraph.css';
-      @import '../styles/src/modules/headline.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;
 
       :host {
-        /* 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-content: '';
         --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;
       }
@@ -105,7 +55,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;
         }