@medyll/idae-slotui-svelte 0.3.0

package/dist/styles/slotuisheet/SlotuiSheet.svelte

@@ -0,0 +1,700 @@
+<script lang="ts">import {} from "./types.js";
+import { configCssVars, toContainerQuery } from "./utils.js";
+let { breakpoints, showSelectors } = $props();
+function castToCssProps(breakpoints2) {
+  if (!breakpoints2) return "";
+  let cssProps = "";
+  for (let key in breakpoints2) {
+    cssProps += `--${key}: ${breakpoints2[key]};`;
+  }
+  return cssProps;
+}
+</script>
+
+<svelte:head>
+	{castToCssProps(breakpoints)}
+	<style id="idae-slotui-sheet">:root {
+  transition: all 0.3s ease-out;
+}
+
+:root {
+  --sld-radius-tiny: 2px;
+  --sld-radius-small: 4px;
+  --sld-radius-med: 8px;
+  --sld-radius-large: 16px;
+  --sld-pad-tiny: 0.25rem;
+  --sld-pad-small: 0.5rem;
+  --sld-pad-med: 1rem;
+  --sld-pad-large: 1.5rem;
+  --sld-gap-tiny: 0.25rem;
+  --sld-gap-mini: 0.4rem;
+  --sld-gap-small: 0.5rem;
+  --sld-gap-med: 1rem;
+  --sld-gap-large: 1.5rem;
+  --sld-gap-default: 0.5rem;
+  --sld-gutter-tiny: 0.25rem;
+  --sld-gutter-mini: 0.5rem;
+  --sld-gutter-small: 1rem;
+  --sld-gutter-med: 2rem;
+  --sld-gutter-kind: 3rem;
+  --sld-gutter-default: 1rem;
+  --sld-tall-tiny: 1rem;
+  --sld-tall-mini: 1.5rem;
+  --sld-tall-small: 2.5rem;
+  --sld-tall-med: 3.5rem;
+  --sld-tall-kind: 4rem;
+  --sld-tall-auto: auto;
+  --sld-tall-default: 2.5rem;
+  --sld-width-tiny: 2rem;
+  --sld-width-mini: 3rem;
+  --sld-width-small: 10rem;
+  --sld-width-med: 14rem;
+  --sld-width-kind: 20rem;
+  --sld-width-full: 100%;
+  --sld-width-auto: auto;
+  --sld-width-default: 10rem;
+}
+
+:root {
+  --white: #fff;
+  --black: #333;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --white: #333;
+    --black: #ccc;
+  }
+}
+
+:root.dark,
+:root[data-theme=dark],
+body[data-theme=dark],
+:root[theme=dark] {
+  --white: #333;
+  --black: #ccc;
+}
+
+:root {
+  --sld-color-foreground: #333333;
+  --sld-color-background: #ffffff;
+  --sld-color-paper: color-mix(
+      in srgb,
+      var(--sld-color-background) 90%,
+      var(--sld-color-foreground) 10%
+  );
+  --sld-color-primary: color-mix(in srgb, var(--sld-color-foreground) 60%, #4caf50);
+  --sld-color-secondary: color-mix(in srgb, var(--sld-color-foreground) 80%, #2196f3);
+  --sld-color-tertiary: color-mix(in srgb, var(--sld-color-foreground) 70%, #ffc107);
+  --sld-color-disabled: color-mix(
+      in srgb,
+      var(--sld-color-foreground) 20%,
+      var(--sld-color-background)
+  );
+  --sld-color-disabled-border: color-mix(
+      in srgb,
+      var(--sld-color-foreground) 30%,
+      var(--sld-color-background)
+  );
+  --sld-background-disabled: color-mix(
+      in srgb,
+      var(--sld-color-background) 90%,
+      var(--sld-color-foreground)
+  );
+}
+
+:root.dark,
+:root[data-theme=dark],
+body[data-theme=dark],
+:root[theme=dark] {
+  --sld-color-foreground: #ffffff;
+  --sld-color-background: #27323a;
+}
+
+:root {
+  --sld-elevation-1: 0 0 1.75px 0 rgba(0, 0, 0, 0.15), 0 0.15px 0.46px 0 rgba(0, 0, 0, 0.1);
+  --sld-elevation-2: 0 0 3.44px 0 rgba(0, 0, 0, 0.15), 0 0.3px 0.93px 0 rgba(0, 0, 0, 0.1);
+  --sld-elevation-3: 0 0 5.17px 0 rgba(0, 0, 0, 0.15), 0 0 1.39px 0 rgba(0, 0, 0, 0.1);
+  --sld-elevation-4: 0 0 6.89px 0 rgba(0, 0, 0, 0.15), 0 0.61px 1.86px 0 rgba(0, 0, 0, 0.1);
+  --sld-elevation-5: 0 0 8.62px 0 rgba(0, 0, 0, 0.15), 0 0.76px 2.32px 0 rgba(0, 0, 0, 0.1);
+}
+
+:root {
+  --sld-color-discrete: #ccc;
+  --sld-color-success: #075c07;
+  --sld-color-info: #ffd324;
+  --sld-color-warning: #b49104;
+  --sld-color-alert: #cc5c00;
+  --sld-color-error: #cc0000;
+}
+
+:root {
+  /* alpha  foreground */
+  --sld-color-foreground-alpha-low: color-mix(in srgb, var(--sld-color-foreground), transparent 10%);
+  --sld-color-foreground-alpha-mid: color-mix(in srgb, var(--sld-color-foreground), transparent 60%);
+  --sld-color-foreground-alpha-high: color-mix(in srgb, var(--sld-color-foreground), transparent 80%);
+  /* alpha  background */
+  --sld-color-background-alpha-low: color-mix(in srgb, var(--sld-color-background), transparent 10%);
+  --sld-color-background-alpha-mid: color-mix(in srgb, var(--sld-color-background), transparent 60%);
+  --sld-color-background-alpha-high: color-mix(in srgb, var(--sld-color-background), transparent 80%);
+  /* alpha  primary */
+  --sld-color-primary-alpha-low: color-mix(in srgb, var(--sld-color-primary), transparent 10%);
+  --sld-color-primary-alpha-mid: color-mix(in srgb, var(--sld-color-primary), transparent 60%);
+  --sld-color-primary-alpha-high: color-mix(in srgb, var(--sld-color-primary), transparent 80%);
+  /* alpha  secondary */
+  --sld-color-secondary-alpha-low: color-mix(in srgb, var(--sld-color-secondary), transparent 10%);
+  --sld-color-secondary-alpha-mid: color-mix(in srgb, var(--sld-color-secondary), transparent 60%);
+  --sld-color-secondary-alpha-high: color-mix(in srgb, var(--sld-color-secondary), transparent 80%);
+  /* alpha  tertiary */
+  --sld-color-tertiary-alpha-low: color-mix(in srgb, var(--sld-color-tertiary), transparent 10%);
+  --sld-color-tertiary-alpha-mid: color-mix(in srgb, var(--sld-color-tertiary), transparent 60%);
+  --sld-color-tertiary-alpha-high: color-mix(in srgb, var(--sld-color-tertiary), transparent 80%);
+  /* darken  foreground */
+  --sld-color-foreground-darken-low: color-mix(in srgb, var(--sld-color-foreground), black 10%);
+  --sld-color-foreground-darken-mid: color-mix(in srgb, var(--sld-color-foreground), black 30%);
+  --sld-color-foreground-darken-high: color-mix(in srgb, var(--sld-color-foreground), black 60%);
+  /* darken  background */
+  --sld-color-background-darken-low: color-mix(in srgb, var(--sld-color-background), black 10%);
+  --sld-color-background-darken-mid: color-mix(in srgb, var(--sld-color-background), black 30%);
+  --sld-color-background-darken-high: color-mix(in srgb, var(--sld-color-background), black 60%);
+  /* darken  primary */
+  --sld-color-primary-darken-low: color-mix(in srgb, var(--sld-color-primary), black 10%);
+  --sld-color-primary-darken-mid: color-mix(in srgb, var(--sld-color-primary), black 30%);
+  --sld-color-primary-darken-high: color-mix(in srgb, var(--sld-color-primary), black 60%);
+  /* darken  secondary */
+  --sld-color-secondary-darken-low: color-mix(in srgb, var(--sld-color-secondary), black 10%);
+  --sld-color-secondary-darken-mid: color-mix(in srgb, var(--sld-color-secondary), black 30%);
+  --sld-color-secondary-darken-high: color-mix(in srgb, var(--sld-color-secondary), black 60%);
+  /* darken  tertiary */
+  --sld-color-tertiary-darken-low: color-mix(in srgb, var(--sld-color-tertiary), black 10%);
+  --sld-color-tertiary-darken-mid: color-mix(in srgb, var(--sld-color-tertiary), black 30%);
+  --sld-color-tertiary-darken-high: color-mix(in srgb, var(--sld-color-tertiary), black 60%);
+  /* lighten  foreground */
+  --sld-color-foreground-lighten-low: color-mix(in srgb, var(--sld-color-foreground), white 10%);
+  --sld-color-foreground-lighten-mid: color-mix(in srgb, var(--sld-color-foreground), white 30%);
+  --sld-color-foreground-lighten-high: color-mix(in srgb, var(--sld-color-foreground), white 60%);
+  /* lighten  background */
+  --sld-color-background-lighten-low: color-mix(in srgb, var(--sld-color-background), white 10%);
+  --sld-color-background-lighten-mid: color-mix(in srgb, var(--sld-color-background), white 30%);
+  --sld-color-background-lighten-high: color-mix(in srgb, var(--sld-color-background), white 60%);
+  /* lighten  primary */
+  --sld-color-primary-lighten-low: color-mix(in srgb, var(--sld-color-primary), white 10%);
+  --sld-color-primary-lighten-mid: color-mix(in srgb, var(--sld-color-primary), white 30%);
+  --sld-color-primary-lighten-high: color-mix(in srgb, var(--sld-color-primary), white 60%);
+  /* lighten  secondary */
+  --sld-color-secondary-lighten-low: color-mix(in srgb, var(--sld-color-secondary), white 10%);
+  --sld-color-secondary-lighten-mid: color-mix(in srgb, var(--sld-color-secondary), white 30%);
+  --sld-color-secondary-lighten-high: color-mix(in srgb, var(--sld-color-secondary), white 60%);
+  /* lighten  tertiary */
+  --sld-color-tertiary-lighten-low: color-mix(in srgb, var(--sld-color-tertiary), white 10%);
+  --sld-color-tertiary-lighten-mid: color-mix(in srgb, var(--sld-color-tertiary), white 30%);
+  --sld-color-tertiary-lighten-high: color-mix(in srgb, var(--sld-color-tertiary), white 60%);
+  /* alpha  discrete */
+  --sld-color-discrete-alpha-low: color-mix(in srgb, var(--sld-color-discrete), transparent 10%);
+  --sld-color-discrete-alpha-mid: color-mix(in srgb, var(--sld-color-discrete), transparent 30%);
+  --sld-color-discrete-alpha-high: color-mix(in srgb, var(--sld-color-discrete), transparent 60%);
+  /* alpha  success */
+  --sld-color-success-alpha-low: color-mix(in srgb, var(--sld-color-success), transparent 10%);
+  --sld-color-success-alpha-mid: color-mix(in srgb, var(--sld-color-success), transparent 30%);
+  --sld-color-success-alpha-high: color-mix(in srgb, var(--sld-color-success), transparent 60%);
+  /* alpha  info */
+  --sld-color-info-alpha-low: color-mix(in srgb, var(--sld-color-info), transparent 10%);
+  --sld-color-info-alpha-mid: color-mix(in srgb, var(--sld-color-info), transparent 30%);
+  --sld-color-info-alpha-high: color-mix(in srgb, var(--sld-color-info), transparent 60%);
+  /* alpha  warning */
+  --sld-color-warning-alpha-low: color-mix(in srgb, var(--sld-color-warning), transparent 10%);
+  --sld-color-warning-alpha-mid: color-mix(in srgb, var(--sld-color-warning), transparent 30%);
+  --sld-color-warning-alpha-high: color-mix(in srgb, var(--sld-color-warning), transparent 60%);
+  /* alpha  alert */
+  --sld-color-alert-alpha-low: color-mix(in srgb, var(--sld-color-alert), transparent 10%);
+  --sld-color-alert-alpha-mid: color-mix(in srgb, var(--sld-color-alert), transparent 30%);
+  --sld-color-alert-alpha-high: color-mix(in srgb, var(--sld-color-alert), transparent 60%);
+  /* alpha  error */
+  --sld-color-error-alpha-low: color-mix(in srgb, var(--sld-color-error), transparent 10%);
+  --sld-color-error-alpha-mid: color-mix(in srgb, var(--sld-color-error), transparent 30%);
+  --sld-color-error-alpha-high: color-mix(in srgb, var(--sld-color-error), transparent 60%);
+  /* darken  discrete */
+  --sld-color-discrete-darken-low: color-mix(in srgb, var(--sld-color-discrete), black 10%);
+  --sld-color-discrete-darken-mid: color-mix(in srgb, var(--sld-color-discrete), black 30%);
+  --sld-color-discrete-darken-high: color-mix(in srgb, var(--sld-color-discrete), black 60%);
+  /* darken  success */
+  --sld-color-success-darken-low: color-mix(in srgb, var(--sld-color-success), black 10%);
+  --sld-color-success-darken-mid: color-mix(in srgb, var(--sld-color-success), black 30%);
+  --sld-color-success-darken-high: color-mix(in srgb, var(--sld-color-success), black 60%);
+  /* darken  info */
+  --sld-color-info-darken-low: color-mix(in srgb, var(--sld-color-info), black 10%);
+  --sld-color-info-darken-mid: color-mix(in srgb, var(--sld-color-info), black 30%);
+  --sld-color-info-darken-high: color-mix(in srgb, var(--sld-color-info), black 60%);
+  /* darken  warning */
+  --sld-color-warning-darken-low: color-mix(in srgb, var(--sld-color-warning), black 10%);
+  --sld-color-warning-darken-mid: color-mix(in srgb, var(--sld-color-warning), black 30%);
+  --sld-color-warning-darken-high: color-mix(in srgb, var(--sld-color-warning), black 60%);
+  /* darken  alert */
+  --sld-color-alert-darken-low: color-mix(in srgb, var(--sld-color-alert), black 10%);
+  --sld-color-alert-darken-mid: color-mix(in srgb, var(--sld-color-alert), black 30%);
+  --sld-color-alert-darken-high: color-mix(in srgb, var(--sld-color-alert), black 60%);
+  /* darken  error */
+  --sld-color-error-darken-low: color-mix(in srgb, var(--sld-color-error), black 10%);
+  --sld-color-error-darken-mid: color-mix(in srgb, var(--sld-color-error), black 30%);
+  --sld-color-error-darken-high: color-mix(in srgb, var(--sld-color-error), black 60%);
+  /* lighten  discrete */
+  --sld-color-discrete-lighten-low: color-mix(in srgb, var(--sld-color-discrete), white 10%);
+  --sld-color-discrete-lighten-mid: color-mix(in srgb, var(--sld-color-discrete), white 30%);
+  --sld-color-discrete-lighten-high: color-mix(in srgb, var(--sld-color-discrete), white 60%);
+  /* lighten  success */
+  --sld-color-success-lighten-low: color-mix(in srgb, var(--sld-color-success), white 10%);
+  --sld-color-success-lighten-mid: color-mix(in srgb, var(--sld-color-success), white 30%);
+  --sld-color-success-lighten-high: color-mix(in srgb, var(--sld-color-success), white 60%);
+  /* lighten  info */
+  --sld-color-info-lighten-low: color-mix(in srgb, var(--sld-color-info), white 10%);
+  --sld-color-info-lighten-mid: color-mix(in srgb, var(--sld-color-info), white 30%);
+  --sld-color-info-lighten-high: color-mix(in srgb, var(--sld-color-info), white 60%);
+  /* lighten  warning */
+  --sld-color-warning-lighten-low: color-mix(in srgb, var(--sld-color-warning), white 10%);
+  --sld-color-warning-lighten-mid: color-mix(in srgb, var(--sld-color-warning), white 30%);
+  --sld-color-warning-lighten-high: color-mix(in srgb, var(--sld-color-warning), white 60%);
+  /* lighten  alert */
+  --sld-color-alert-lighten-low: color-mix(in srgb, var(--sld-color-alert), white 10%);
+  --sld-color-alert-lighten-mid: color-mix(in srgb, var(--sld-color-alert), white 30%);
+  --sld-color-alert-lighten-high: color-mix(in srgb, var(--sld-color-alert), white 60%);
+  /* lighten  error */
+  --sld-color-error-lighten-low: color-mix(in srgb, var(--sld-color-error), white 10%);
+  --sld-color-error-lighten-mid: color-mix(in srgb, var(--sld-color-error), white 30%);
+  --sld-color-error-lighten-high: color-mix(in srgb, var(--sld-color-error), white 60%);
+}
+
+/* presets */
+
+:root {
+  --sld-color-border: var(--sld-color-foreground-alpha-low);
+  --sld-hover-background-color: var(--sld-color-secondary-alpha-mid);
+  --sld-hover-border-color: var(--sld-color-foreground-alpha-high);
+  --sld-hover-shadow: var(--sld-elevation-3);
+  --sld-selected-background-color: var(--sld-color-primary-alpha-mid);
+  --sld-selected-border-color: var(--sld-color-primary);
+  --sld-selected-shadow: var(--sld-elevation-3);
+}
+
+.bg-themed-scheme-discrete {
+  color: black;
+  text-shadow: 0 0 0.125rem #b3b3b3;
+  background-color: #ccc;
+}
+
+.bg-themed-scheme-success {
+  color: white;
+  text-shadow: 0 0 0.125rem #004d00;
+  background-color: green;
+}
+
+.bg-themed-scheme-info {
+  color: black;
+  text-shadow: 0 0 0.125rem #ffd324;
+  background-color: #ffdd57;
+}
+
+.bg-themed-scheme-warning {
+  color: black;
+  text-shadow: 0 0 0.125rem #b49104;
+  background-color: #e6b905;
+}
+
+.bg-themed-scheme-alert {
+  color: black;
+  text-shadow: 0 0 0.125rem #cc5c00;
+  background-color: #ff7300;
+}
+
+.bg-themed-scheme-error {
+  color: white;
+  text-shadow: 0 0 0.125rem #cc0000;
+  background-color: red;
+}</style>
+	<style id="idae-slotui-queries"> 
+ :root {
+  --container-item: container-item;
+  --on-container: on-container;
+  --than: than;
+  --show-selector: show;
+  --hide-selector: hide; 
+}
+:root {
+  --bkp-xs: var(--breakpoint-xs, 320px);
+  --bkp-sm: var(--breakpoint-sm, 480px);
+  --bkp-md: var(--breakpoint-md, 640px);
+  --bkp-lg: var(--breakpoint-lg, 960px);
+  --bkp-xl: var(--breakpoint-xl, 1280px);
+  --bkp-xxl: var(--breakpoint-xxl, 1920px);
+  --bkp-xxxl: var(--breakpoint-xxxl, 1440px);
+}
+@media (min-width: var(--bkp-xs)) {
+  [hide-more-xs],
+  [breakpoints*=hide-more-xs],
+  .hide-more-xs {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@media (min-width: var(--bkp-xs)) {
+  [show-more-xs],
+  [breakpoints*=show-more-xs],
+  .show-more-xs {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+  }
+}
+@media (max-width: calc(var(--bkp-xs) - 1px)) {
+  [hide-less-xs],
+  [breakpoints*=hide-less-xs],
+  .hide-less-xs {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@media (max-width: calc(var(--bkp-xs) - 1px)) {
+  [show-less-xs],
+  [breakpoints*=show-less-xs],
+  .show-less-xs {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+  }
+}
+@media (min-width: var(--bkp-sm)) {
+  [hide-more-sm],
+  [breakpoints*=hide-more-sm],
+  .hide-more-sm {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@media (min-width: var(--bkp-sm)) {
+  [show-more-sm],
+  [breakpoints*=show-more-sm],
+  .show-more-sm {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+  }
+}
+@media (max-width: calc(var(--bkp-sm) - 1px)) {
+  [hide-less-sm],
+  [breakpoints*=hide-less-sm],
+  .hide-less-sm {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@media (max-width: calc(var(--bkp-sm) - 1px)) {
+  [show-less-sm],
+  [breakpoints*=show-less-sm],
+  .show-less-sm {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+  }
+}
+@media (min-width: var(--bkp-md)) {
+  [hide-more-md],
+  [breakpoints*=hide-more-md],
+  .hide-more-md {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@media (min-width: var(--bkp-md)) {
+  [show-more-md],
+  [breakpoints*=show-more-md],
+  .show-more-md {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+  }
+}
+@media (max-width: calc(var(--bkp-md) - 1px)) {
+  [hide-less-md],
+  [breakpoints*=hide-less-md],
+  .hide-less-md {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@media (max-width: calc(var(--bkp-md) - 1px)) {
+  [show-less-md],
+  [breakpoints*=show-less-md],
+  .show-less-md {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+  }
+}
+@media (min-width: var(--bkp-lg)) {
+  [hide-more-lg],
+  [breakpoints*=hide-more-lg],
+  .hide-more-lg {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@media (min-width: var(--bkp-lg)) {
+  [show-more-lg],
+  [breakpoints*=show-more-lg],
+  .show-more-lg {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+  }
+}
+@media (max-width: calc(var(--bkp-lg) - 1px)) {
+  [hide-less-lg],
+  [breakpoints*=hide-less-lg],
+  .hide-less-lg {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@media (max-width: calc(var(--bkp-lg) - 1px)) {
+  [show-less-lg],
+  [breakpoints*=show-less-lg],
+  .show-less-lg {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+  }
+}
+@media (min-width: var(--bkp-xl)) {
+  [hide-more-xl],
+  [breakpoints*=hide-more-xl],
+  .hide-more-xl {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@media (min-width: var(--bkp-xl)) {
+  [show-more-xl],
+  [breakpoints*=show-more-xl],
+  .show-more-xl {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+  }
+}
+@media (max-width: calc(var(--bkp-xl) - 1px)) {
+  [hide-less-xl],
+  [breakpoints*=hide-less-xl],
+  .hide-less-xl {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@media (max-width: calc(var(--bkp-xl) - 1px)) {
+  [show-less-xl],
+  [breakpoints*=show-less-xl],
+  .show-less-xl {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+  }
+}
+@media (min-width: var(--bkp-xxl)) {
+  [hide-more-xxl],
+  [breakpoints*=hide-more-xxl],
+  .hide-more-xxl {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@media (min-width: var(--bkp-xxl)) {
+  [show-more-xxl],
+  [breakpoints*=show-more-xxl],
+  .show-more-xxl {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+  }
+}
+@media (max-width: calc(var(--bkp-xxl) - 1px)) {
+  [hide-less-xxl],
+  [breakpoints*=hide-less-xxl],
+  .hide-less-xxl {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@media (max-width: calc(var(--bkp-xxl) - 1px)) {
+  [show-less-xxl],
+  [breakpoints*=show-less-xxl],
+  .show-less-xxl {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+  }
+}
+@media (min-width: var(--bkp-xxxl)) {
+  [hide-more-xxxl],
+  [breakpoints*=hide-more-xxxl],
+  .hide-more-xxxl {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@media (min-width: var(--bkp-xxxl)) {
+  [show-more-xxxl],
+  [breakpoints*=show-more-xxxl],
+  .show-more-xxxl {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+  }
+}
+@media (max-width: calc(var(--bkp-xxxl) - 1px)) {
+  [hide-less-xxxl],
+  [breakpoints*=hide-less-xxxl],
+  .hide-less-xxxl {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@media (max-width: calc(var(--bkp-xxxl) - 1px)) {
+  [show-less-xxxl],
+  [breakpoints*=show-less-xxxl],
+  .show-less-xxxl {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+  }
+}
+[container-inline],
+[container=inline],
+.container-inline {
+  container-type: inline-size;
+}
+[container-size],
+[container=size],
+.container-size {
+  container-type: size;
+}
+[container-normal],
+[container=normal],
+.container-normal {
+  container-type: normal;
+}
+@container (max-width: var(--hide-on-container-width-more-than)) {
+  :global(.container-item-hide-max-width) {
+    color: red;
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@container (max-width: var(--hide-on-container-width-more-than)) {
+  .container-item-hide-min-width {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@container (min-height: var(--hide-on-container-height-less-than)) {
+  .container-item-hide-max-height {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@container (max-width: var(--hide-on-container-height-more-than)) {
+  .container-item-hide-min-height {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}</style>
+</svelte:head>
+
+{#if showSelectors}
+	{castToCssProps(breakpoints)}ss
+	<pre>
+        {JSON.stringify(configCssVars, undefined, ' ')}
+    </pre>
+	<pre>
+        {JSON.stringify(toContainerQuery('hideMaxWidth', '115px'), undefined, ' ')}
+    </pre>
+{/if}

package/dist/styles/slotuisheet/SlotuiSheet.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import { type SlotUiStyleSheet } from './types.js';
+declare const __propDef: {
+    props: SlotUiStyleSheet;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SlotuiSheetProps = typeof __propDef.props;
+export type SlotuiSheetEvents = typeof __propDef.events;
+export type SlotuiSheetSlots = typeof __propDef.slots;
+export default class SlotuiSheet extends SvelteComponent<SlotuiSheetProps, SlotuiSheetEvents, SlotuiSheetSlots> {
+}
+export {};