@solid-design-system/components 5.16.2 → 6.0.0-next.10

package/cdn-versioned/solid-components.css

@@ -1,21 +1,10 @@
-/*
- * This file contains utility classes that can't be contained in a component and must be applied to the light DOM. None
- * of the rules in this stylesheet should target component tags or HTML tags, and all classes *must* start with ".sd-"
- * to reduce the possibility of collisions.
- */
-
-:root {
-  --sd-duration-fast: 150ms;
-  --sd-duration-medium: 300ms;
-  --sd-duration-slow: 500ms;
-  --sd-duration-x-slow: 750ms;
-}
-
+/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
 .sd-scroll-lock {
   padding-right: var(--sd-scroll-lock-size) !important;
   overflow: hidden !important;
 }
-
 .sd-toast-stack {
   position: fixed;
   z-index: var(--sd-z-index-alert-group, 950);
@@ -23,27 +12,124 @@
   max-height: 100%;
   max-width: 400px;
 }
-
 .sd-toast-stack--top-right {
-  top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  right: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  margin-right: var(--sd-spacing-4, 1rem) /* 16px */;
-}
-
+    top: calc(var(--sd-spacing-1) * 0);
+    right: calc(var(--sd-spacing-1) * 0);
+    margin-right: var(--sd-spacing-4);
+  }
 .sd-toast-stack--bottom-center {
-  bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  --tw-translate-x: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    bottom: calc(var(--sd-spacing-1) * 0);
+    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
     inset-inline-start: 50%;
+  }
+.sd-toast-stack sd-6-0-0-next-10-notification::part(wrapper) {
+    --tw-shadow: var(--sd-shadow);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+.sd-toast-stack sd-6-0-0-next-10-notification::part(content) {
+    border-color: rgba(var(--sd-panel-color-border, rgba(255, 255, 255, 0)));
+  }
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
 }
-
-.sd-toast-stack sd-5-16-2-notification::part(wrapper) {
-  --tw-shadow: var(--sd-shadow, 0px 1px 3px 0px rgb(81 81 81 / 75%));
-  --tw-shadow-colored: 0px 1px 3px 0px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
 }
-
-.sd-toast-stack sd-5-16-2-notification::part(content) {
-  --tw-border-opacity: 1;
-  border-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-border-opacity, 1)) /* Used for buttons, inverted focus state */;
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+    }
+  }
 }

package/cdn-versioned/solid-components.d.ts

@@ -54,6 +54,7 @@ export { default as SdTeaserMedia } from './components/teaser-media/teaser-media
 export { default as SdTextarea } from './components/textarea/textarea.js';
 export { default as SdTooltip } from './components/tooltip/tooltip.js';
 export { default as SdVideo } from './components/video/video.js';
+export { default as SdThemeListener } from './components/theme-listener/theme-listener.js';
 export * from './utilities/icon-library';
 export * from './utilities/localize';
 export * from './utilities/autocomplete-config';