@medyll/idae-slotui-svelte 0.122.1 → 0.123.0

package/dist/styles/slotuisheet/stylesheet-container.scss

@@ -1,147 +1,147 @@
-@use "sass:map";
-@import "./sheetConfig.css";
-
-$breakpoints: (
-    "xs": var(--breakpoint-xs, 320px),
-    "sm": var(--breakpoint-sm, 480px),
-    "md": var(--breakpoint-md, 640px),
-    "lg": var(--breakpoint-lg, 960px),
-    "xl": var(--breakpoint-xl, 1280px),
-    "xxl": var(--breakpoint-xxl, 1920px),
-    "xxxl": var(--breakpoint-xxxl, 1440px)
-);
-
-$breakpoint-name: "bkp";
-
-$containerItem: "container-item"; //var(--container-item, "container-item");
-$onContainer: var(--on-container, "on-container");
-$than: "than"; // var(--than, "than");
-$showSelector: var(--show, "show");
-$hideSelector: var(--hide, "hide");
-
-@debug ($containerItem);
-:root {
-    @each $name, $size in $breakpoints {
-        --#{$breakpoint-name}-#{$name}: #{$size};
-    }
-}
-
-@mixin hidden {
-    content-visibility: hidden;
-    opacity: 0;
-    position: absolute;
-    z-index: -10;
-    visibility: hidden;
-}
-
-@mixin visible {
-    content-visibility: auto;
-    opacity: 1;
-    position: static;
-    z-index: auto;
-    visibility: visible;
-}
-
-@function generate-visibility-classes($breakpoints) {
-    $result: ();
-    @each $name, $size in $breakpoints {
-        $result: map.merge(
-            $result,
-            (
-                "hide-more-#{$name}": (
-                    min-width: var(--#{$breakpoint-name}-#{$name}),
-                    class: hidden
-                ),
-                "show-more-#{$name}": (
-                    min-width: var(--#{$breakpoint-name}-#{$name}),
-                    class: visible
-                ),
-                "hide-less-#{$name}": (
-                    max-width: calc(var(--#{$breakpoint-name}-#{$name}) - 1px),
-                    class: hidden
-                ),
-                "show-less-#{$name}": (
-                    max-width: calc(var(--#{$breakpoint-name}-#{$name}) - 1px),
-                    class: visible
-                )
-            )
-        );
-    }
-    @return $result;
-}
-
-// this mixin uses the @container pseudo-class to generate container queries
-// it is used to hide/show elements based on the container width
-// it uses css properties --hide-on-container-width-less-than and --hide-on-container-more-more-than and
-@mixin generate-container-queries() {
-    @container (max-width: var(--hide-on-container-width-more-#{than})) {
-        :global(.#{$containerItem}-hide-max-width) {
-            color: red;
-            @include hidden;
-        }
-    }
-    @container (max-width: var(--hide-on-container-width-more-#{than})) {
-        .#{$containerItem}-hide-min-width {
-            @include hidden;
-        }
-    }
-    @container (min-height: var(--hide-on-container-height-less-#{than})) {
-        .#{$containerItem}-hide-max-height {
-            @include hidden;
-        }
-    }
-    @container (max-width: var(--hide-on-container-height-more-#{than})) {
-        .#{$containerItem}-hide-min-height {
-            @include hidden;
-        }
-    }
-}
-
-$visibility-classes: generate-visibility-classes($breakpoints);
-
-@each $breakp, $props in $visibility-classes {
-    @if map.has-key($props, "min-width") {
-        @media (min-width: #{map.get($props, 'min-width')}) {
-            [#{$breakp}],
-            [breakpoints*="#{$breakp}"],
-            .#{$breakp} {
-                @if map.get($props, "class") == hidden {
-                    @include hidden;
-                } @else if map.get($props, "class") == visible {
-                    @include visible;
-                }
-            }
-        }
-    } @else if map.has-key($props, "max-width") {
-        @media (max-width: #{map.get($props, 'max-width')}) {
-            [#{$breakp}],
-            [breakpoints*="#{$breakp}"],
-            .#{$breakp} {
-                @if map.get($props, "class") == hidden {
-                    @include hidden;
-                } @else if map.get($props, "class") == visible {
-                    @include visible;
-                }
-            }
-        }
-    }
-}
-
-:global([container-inline]),
-:global([container="inline"]),
-:global(.container-inline) {
-    container-type: inline-size;
-}
-
-:global([container-size]),
-:global([container="size"]),
-:global(.container-size) {
-    container-type: size;
-}
-
-:global([container-normal]),
-:global([container="normal"]),
-:global(.container-normal) {
-    container-type: normal;
-}
-@include generate-container-queries;
+@use "sass:map";
+@import "./sheetConfig.css";
+
+$breakpoints: (
+    "xs": var(--breakpoint-xs, 320px),
+    "sm": var(--breakpoint-sm, 480px),
+    "md": var(--breakpoint-md, 640px),
+    "lg": var(--breakpoint-lg, 960px),
+    "xl": var(--breakpoint-xl, 1280px),
+    "xxl": var(--breakpoint-xxl, 1920px),
+    "xxxl": var(--breakpoint-xxxl, 1440px)
+);
+
+$breakpoint-name: "bkp";
+
+$containerItem: "container-item"; //var(--container-item, "container-item");
+$onContainer: var(--on-container, "on-container");
+$than: "than"; // var(--than, "than");
+$showSelector: var(--show, "show");
+$hideSelector: var(--hide, "hide");
+
+@debug ($containerItem);
+:root {
+    @each $name, $size in $breakpoints {
+        --#{$breakpoint-name}-#{$name}: #{$size};
+    }
+}
+
+@mixin hidden {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+}
+
+@mixin visible {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+}
+
+@function generate-visibility-classes($breakpoints) {
+    $result: ();
+    @each $name, $size in $breakpoints {
+        $result: map.merge(
+            $result,
+            (
+                "hide-more-#{$name}": (
+                    min-width: var(--#{$breakpoint-name}-#{$name}),
+                    class: hidden
+                ),
+                "show-more-#{$name}": (
+                    min-width: var(--#{$breakpoint-name}-#{$name}),
+                    class: visible
+                ),
+                "hide-less-#{$name}": (
+                    max-width: calc(var(--#{$breakpoint-name}-#{$name}) - 1px),
+                    class: hidden
+                ),
+                "show-less-#{$name}": (
+                    max-width: calc(var(--#{$breakpoint-name}-#{$name}) - 1px),
+                    class: visible
+                )
+            )
+        );
+    }
+    @return $result;
+}
+
+// this mixin uses the @container pseudo-class to generate container queries
+// it is used to hide/show elements based on the container width
+// it uses css properties --hide-on-container-width-less-than and --hide-on-container-more-more-than and
+@mixin generate-container-queries() {
+    @container (max-width: var(--hide-on-container-width-more-#{than})) {
+        :global(.#{$containerItem}-hide-max-width) {
+            color: red;
+            @include hidden;
+        }
+    }
+    @container (max-width: var(--hide-on-container-width-more-#{than})) {
+        .#{$containerItem}-hide-min-width {
+            @include hidden;
+        }
+    }
+    @container (min-height: var(--hide-on-container-height-less-#{than})) {
+        .#{$containerItem}-hide-max-height {
+            @include hidden;
+        }
+    }
+    @container (max-width: var(--hide-on-container-height-more-#{than})) {
+        .#{$containerItem}-hide-min-height {
+            @include hidden;
+        }
+    }
+}
+
+$visibility-classes: generate-visibility-classes($breakpoints);
+
+@each $breakp, $props in $visibility-classes {
+    @if map.has-key($props, "min-width") {
+        @media (min-width: #{map.get($props, 'min-width')}) {
+            [#{$breakp}],
+            [breakpoints*="#{$breakp}"],
+            .#{$breakp} {
+                @if map.get($props, "class") == hidden {
+                    @include hidden;
+                } @else if map.get($props, "class") == visible {
+                    @include visible;
+                }
+            }
+        }
+    } @else if map.has-key($props, "max-width") {
+        @media (max-width: #{map.get($props, 'max-width')}) {
+            [#{$breakp}],
+            [breakpoints*="#{$breakp}"],
+            .#{$breakp} {
+                @if map.get($props, "class") == hidden {
+                    @include hidden;
+                } @else if map.get($props, "class") == visible {
+                    @include visible;
+                }
+            }
+        }
+    }
+}
+
+:global([container-inline]),
+:global([container="inline"]),
+:global(.container-inline) {
+    container-type: inline-size;
+}
+
+:global([container-size]),
+:global([container="size"]),
+:global(.container-size) {
+    container-type: size;
+}
+
+:global([container-normal]),
+:global([container="normal"]),
+:global(.container-normal) {
+    container-type: normal;
+}
+@include generate-container-queries;

package/dist/styles/slotuisheet/stylesheet.scss

@@ -1,156 +1,156 @@
-@use "sass:map";
-@use "sheetConfig.scss";
-
-$breakpoints: (
-    "xs": 320px,
-    //var(--breakpoint-xs, 320px),
-    "sm": 480px,
-    //var(--breakpoint-sm, 480px),
-    "md": 640px,
-    // var(--breakpoint-md, 640px),
-    "lg": 960px,
-    // var(--breakpoint-lg, 960px),
-    "xl": 1280px,
-    //var(--breakpoint-xl, 1280px),
-    "xxl": 1920px,
-    //var(--breakpoint-xxl, 1920px),
-    "xxxl": 1440px,
-    //var(--breakpoint-xxxl, 1440px)
-);
-
-$breakpoint-name: "bkp";
-
-$containerItem: "container-item"; //var(--container-item, "container-item");
-$onContainer: var(--on-container, "on-container");
-$than: "than"; // var(--than, "than");
-$showSelector: var(--show, "show");
-$hideSelector: var(--hide, "hide");
-
-:root {
-    // export css properties variables
-    @each $name, $size in $breakpoints {
-        --#{$breakpoint-name}-#{$name}: #{$size};
-    }
-}
-
-@mixin hidden {
-    display: none;
-    opacity: 0;
-    position: absolute;
-    z-index: -10;
-    content-visibility: hidden;
-    transition: all 0.5s ease-in;
-}
-
-@mixin visible {
-    z-index: auto;
-    visibility: visible;
-    transition: all 1s ease-in;
-}
-
-// this mixin uses the @container pseudo-class to generate container queries
-// it is used to hide/show elements based on the container width
-// it uses css properties --hide-on-container-width-less-than and --hide-on-container-more-more-than and
-@mixin generate-container-queries() {
-    @container (max-width: var(--hide-on-container-width-more-#{than})) {
-        .#{$containerItem}-hide-max-width {
-            color: red;
-            @include hidden;
-        }
-    }
-    @container (max-width: var(--hide-on-container-width-more-#{than})) {
-        .#{$containerItem}-hide-min-width {
-            @include hidden;
-        }
-    }
-    @container (min-height: var(--hide-on-container-height-less-#{than})) {
-        .#{$containerItem}-hide-max-height {
-            @include hidden;
-        }
-    }
-    @container (max-width: var(--hide-on-container-height-more-#{than})) {
-        .#{$containerItem}-hide-min-height {
-            @include hidden;
-        }
-    }
-}
-
-@function generate-visibility-classes($breakpoints) {
-    $result: ();
-    @each $name, $size in $breakpoints {
-        $result: map.merge(
-            $result,
-            (
-                "hide-more-#{$name}": (
-                    min-width: $size,
-                    class: hidden
-                ),
-                "hide-less-#{$name}": (
-                    max-width: $size,
-                    class: hidden
-                ),
-                "show-more-#{$name}": (
-                    min-width: $size,
-                    class: visible
-                ),
-                "show-less-#{$name}": (
-                    max-width: (
-                        $size - 1px
-                    ),
-                    class: visible
-                )
-            )
-        );
-    }
-    @return $result;
-}
-
-$visibility-classes: generate-visibility-classes($breakpoints);
-
-@each $breakp, $props in $visibility-classes {
-    @if map.has-key($props, "min-width") {
-        @media (min-width: #{map.get($props, 'min-width')}) {
-            [#{$breakp}],
-            [breakpoints*="#{$breakp}"],
-            .#{$breakp} {
-                @if map.get($props, "class") == hidden {
-                    @include hidden;
-                } @else if map.get($props, "class") == visible {
-                    @include visible;
-                }
-            }
-        }
-    } @else if map.has-key($props, "max-width") {
-        @media (max-width: #{map.get($props, 'max-width')}) {
-            [#{$breakp}],
-            [breakpoints*="#{$breakp}"],
-            .#{$breakp} {
-                @if map.get($props, "class") == hidden {
-                    @include hidden;
-                } @else if map.get($props, "class") == visible {
-                    @include 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;
-}
-
-@include generate-container-queries;
+@use "sass:map";
+@use "sheetConfig.scss";
+
+$breakpoints: (
+    "xs": 320px,
+    //var(--breakpoint-xs, 320px),
+    "sm": 480px,
+    //var(--breakpoint-sm, 480px),
+    "md": 640px,
+    // var(--breakpoint-md, 640px),
+    "lg": 960px,
+    // var(--breakpoint-lg, 960px),
+    "xl": 1280px,
+    //var(--breakpoint-xl, 1280px),
+    "xxl": 1920px,
+    //var(--breakpoint-xxl, 1920px),
+    "xxxl": 1440px,
+    //var(--breakpoint-xxxl, 1440px)
+);
+
+$breakpoint-name: "bkp";
+
+$containerItem: "container-item"; //var(--container-item, "container-item");
+$onContainer: var(--on-container, "on-container");
+$than: "than"; // var(--than, "than");
+$showSelector: var(--show, "show");
+$hideSelector: var(--hide, "hide");
+
+:root {
+    // export css properties variables
+    @each $name, $size in $breakpoints {
+        --#{$breakpoint-name}-#{$name}: #{$size};
+    }
+}
+
+@mixin hidden {
+    display: none;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    content-visibility: hidden;
+    transition: all 0.5s ease-in;
+}
+
+@mixin visible {
+    z-index: auto;
+    visibility: visible;
+    transition: all 1s ease-in;
+}
+
+// this mixin uses the @container pseudo-class to generate container queries
+// it is used to hide/show elements based on the container width
+// it uses css properties --hide-on-container-width-less-than and --hide-on-container-more-more-than and
+@mixin generate-container-queries() {
+    @container (max-width: var(--hide-on-container-width-more-#{than})) {
+        .#{$containerItem}-hide-max-width {
+            color: red;
+            @include hidden;
+        }
+    }
+    @container (max-width: var(--hide-on-container-width-more-#{than})) {
+        .#{$containerItem}-hide-min-width {
+            @include hidden;
+        }
+    }
+    @container (min-height: var(--hide-on-container-height-less-#{than})) {
+        .#{$containerItem}-hide-max-height {
+            @include hidden;
+        }
+    }
+    @container (max-width: var(--hide-on-container-height-more-#{than})) {
+        .#{$containerItem}-hide-min-height {
+            @include hidden;
+        }
+    }
+}
+
+@function generate-visibility-classes($breakpoints) {
+    $result: ();
+    @each $name, $size in $breakpoints {
+        $result: map.merge(
+            $result,
+            (
+                "hide-more-#{$name}": (
+                    min-width: $size,
+                    class: hidden
+                ),
+                "hide-less-#{$name}": (
+                    max-width: $size,
+                    class: hidden
+                ),
+                "show-more-#{$name}": (
+                    min-width: $size,
+                    class: visible
+                ),
+                "show-less-#{$name}": (
+                    max-width: (
+                        $size - 1px
+                    ),
+                    class: visible
+                )
+            )
+        );
+    }
+    @return $result;
+}
+
+$visibility-classes: generate-visibility-classes($breakpoints);
+
+@each $breakp, $props in $visibility-classes {
+    @if map.has-key($props, "min-width") {
+        @media (min-width: #{map.get($props, 'min-width')}) {
+            [#{$breakp}],
+            [breakpoints*="#{$breakp}"],
+            .#{$breakp} {
+                @if map.get($props, "class") == hidden {
+                    @include hidden;
+                } @else if map.get($props, "class") == visible {
+                    @include visible;
+                }
+            }
+        }
+    } @else if map.has-key($props, "max-width") {
+        @media (max-width: #{map.get($props, 'max-width')}) {
+            [#{$breakp}],
+            [breakpoints*="#{$breakp}"],
+            .#{$breakp} {
+                @if map.get($props, "class") == hidden {
+                    @include hidden;
+                } @else if map.get($props, "class") == visible {
+                    @include 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;
+}
+
+@include generate-container-queries;

package/dist/types/slotui-ambient.d.ts

@@ -1,27 +1,27 @@
-import { type ElementProps, type ContainerQueriesUnitsAttributes } from './index.ts';
-
-declare module 'svelte/elements' {
-	export interface SvelteHTMLElements {
-		full: HTMLButtonAttributes;
-	}
-
-	export interface HTMLAttributes<T> {
-		width?: ElementProps['width'];
-		tall?: ElementProps['tall'];
-		gutter?: ElementProps['gutter'];
-		variant?: ElementProps['variant'];
-		ratio?: string | `true` | `false`;
-		square?: string | boolean | `true` | `false`;
-		rotation?: string | number;
-		/** media queries */
-		'hide-more-than'?: string;
-		/** for container of containerQueries */
-		container?: `inline` | `size` | `normal`;
-		'hide-max-width'?: ContainerQueriesUnitsAttributes;
-		'hide-max-height'?: ContainerQueriesUnitsAttributes;
-		'hide-min-width'?: ContainerQueriesUnitsAttributes;
-		'hide-min-height'?: ContainerQueriesUnitsAttributes;
-	}
-}
-
-export {};
+import { type ElementProps, type ContainerQueriesUnitsAttributes } from './index.ts';
+
+declare module 'svelte/elements' {
+	export interface SvelteHTMLElements {
+		full: HTMLButtonAttributes;
+	}
+
+	export interface HTMLAttributes<T> {
+		width?: ElementProps['width'];
+		tall?: ElementProps['tall'];
+		gutter?: ElementProps['gutter'];
+		variant?: ElementProps['variant'];
+		ratio?: string | `true` | `false`;
+		square?: string | boolean | `true` | `false`;
+		rotation?: string | number;
+		/** media queries */
+		'hide-more-than'?: string;
+		/** for container of containerQueries */
+		container?: `inline` | `size` | `normal`;
+		'hide-max-width'?: ContainerQueriesUnitsAttributes;
+		'hide-max-height'?: ContainerQueriesUnitsAttributes;
+		'hide-min-width'?: ContainerQueriesUnitsAttributes;
+		'hide-min-height'?: ContainerQueriesUnitsAttributes;
+	}
+}
+
+export {};