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

package/cdn-versioned/solid-components.css

@@ -1,9 +1,21 @@
-/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
-@layer properties;
+/*
+ * 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;
+}
+
 .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);
@@ -11,124 +23,27 @@
   max-height: 100%;
   max-width: 400px;
 }
+
 .sd-toast-stack--top-right {
-    top: calc(var(--sd-spacing-1) * 0);
-    right: calc(var(--sd-spacing-1) * 0);
-    margin-right: var(--sd-spacing-4);
-  }
+  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 */;
+}
+
 .sd-toast-stack--bottom-center {
-    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);
+  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));
     inset-inline-start: 50%;
-  }
-.sd-toast-stack sd-5-16-0-next-0-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-5-16-0-next-0-notification::part(content) {
-    border-color: 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;
 }
-@property --tw-ring-offset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
+
+.sd-toast-stack sd-5-16-0-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);
 }
-@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;
-    }
-  }
+
+.sd-toast-stack sd-5-16-0-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 */;
 }

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

@@ -12,6 +12,7 @@ export { default as SdCarouselItem } from './components/carousel-item/carousel-i
 export { default as SdCheckbox } from './components/checkbox/checkbox.js';
 export { default as SdCheckboxGroup } from './components/checkbox-group/checkbox-group.js';
 export { default as SdCombobox } from './components/combobox/combobox.js';
+export { default as SdDatepicker } from './components/datepicker/datepicker.js';
 export { default as SdDialog } from './components/dialog/dialog.js';
 export { default as SdDivider } from './components/divider/divider.js';
 export { default as SdDrawer } from './components/drawer/drawer.js';
@@ -53,7 +54,6 @@ 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';