@medyll/idae-slotui-svelte 0.3.0

package/dist/styles/slotuisheet/SlotyuiSheet.demo.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">import { be } from "@medyll/idae-be";
+import { cssDom } from "@medyll/dom-events";
+import StyleSheet from "./SlotuiSheet.svelte";
+import { configCssVars, toContainerQuery } from "./utils.js";
+const tag = "hideMaxWidth";
+cssDom("[hideMaxWidth]").each((element, changes) => {
+  console.log(be(element).attr.get(tag));
+  let tagValue = be(element).attr.get(tag);
+  if (tag && tagValue) {
+    let objTag = toContainerQuery(tag, tagValue);
+    console.log(objTag);
+    be(element).classAdd(objTag.class).setStyle(objTag.style);
+    console.log(element, changes);
+    be(element).up("[container]").setStyle(objTag.style);
+    console.log(be(element).up("[container]").node);
+  }
+});
+</script>
+
+<StyleSheet showSelectors={true} />
+
+<div container="size" class="container-size" style="container:size;width:135px;relative">
+	<div hideMaxWidth="115px">hideMaxWidth</div>
+</div>

package/dist/styles/slotuisheet/SlotyuiSheet.demo.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SlotyuiSheetProps = typeof __propDef.props;
+export type SlotyuiSheetEvents = typeof __propDef.events;
+export type SlotyuiSheetSlots = typeof __propDef.slots;
+export default class SlotyuiSheet extends SvelteComponent<SlotyuiSheetProps, SlotyuiSheetEvents, SlotyuiSheetSlots> {
+}
+export {};

package/dist/styles/slotuisheet/containerConfig.css

@@ -0,0 +1,8 @@
+ 
+ :root {
+  --container-item: container-item;
+  --on-container: on-container;
+  --than: than;
+  --show-selector: show;
+  --hide-selector: hide; 
+}

package/dist/styles/slotuisheet/slotui-sheet.scss

@@ -0,0 +1,192 @@
+@import "../slotui-presets.scss";
+
+:root {
+    transition: all 0.3s ease-out;
+}
+
+:root {
+    @each $preset, $preset-value in $preset-radius-list {
+        --#{$vendor}-radius-#{$preset}: #{$preset-value};
+    }
+
+    @each $preset, $preset-value in $preset-pad-list {
+        --#{$vendor}-pad-#{$preset}: #{$preset-value};
+    }
+
+    @each $preset, $preset-value in $preset-gap-list {
+        --#{$vendor}-gap-#{$preset}: #{$preset-value};
+    }
+
+    @each $preset, $preset-value in $preset-gutter-list {
+        --#{$vendor}-gutter-#{$preset}: #{$preset-value};
+    }
+
+    @each $preset, $preset-value in $preset-tall-list {
+        --#{$vendor}-tall-#{$preset}: #{$preset-value};
+    }
+
+    @each $preset, $preset-value in $preset-width-list {
+        --#{$vendor}-width-#{$preset}: #{$preset-value};
+    }
+}
+
+: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 {
+    --#{$vendor}-color-foreground: #333333;
+    --#{$vendor}-color-background: #ffffff;
+
+    --#{$vendor}-color-paper: color-mix(
+        in srgb,
+        var(--#{$vendor}-color-background) 90%,
+        var(--#{$vendor}-color-foreground) 10%
+    );
+
+    --#{$vendor}-color-primary: color-mix(in srgb, var(--#{$vendor}-color-foreground) 60%, #4caf50);
+    --#{$vendor}-color-secondary: color-mix(in srgb, var(--#{$vendor}-color-foreground) 80%, #2196f3);
+    --#{$vendor}-color-tertiary: color-mix(in srgb, var(--#{$vendor}-color-foreground) 70%, #ffc107);
+
+    --#{$vendor}-color-disabled: color-mix(
+        in srgb,
+        var(--#{$vendor}-color-foreground) 20%,
+        var(--#{$vendor}-color-background)
+    );
+    --#{$vendor}-color-disabled-border: color-mix(
+        in srgb,
+        var(--#{$vendor}-color-foreground) 30%,
+        var(--#{$vendor}-color-background)
+    );
+    --#{$vendor}-background-disabled: color-mix(
+        in srgb,
+        var(--#{$vendor}-color-background) 90%,
+        var(--#{$vendor}-color-foreground)
+    );
+}
+
+:root.dark,
+:root[data-theme="dark"],
+body[data-theme="dark"],
+:root[theme="dark"] {
+    --#{$vendor}-color-foreground: #ffffff;
+    --#{$vendor}-color-background: #27323a;
+}
+
+:root {
+    --#{$vendor}-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);
+    --#{$vendor}-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);
+    --#{$vendor}-elevation-3: 0 0 5.17px 0 rgba(0, 0, 0, 0.15), 0 0 1.39px 0 rgba(0, 0, 0, 0.1);
+    --#{$vendor}-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);
+    --#{$vendor}-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 {
+    --#{$vendor}-color-discrete: #ccc;
+    --#{$vendor}-color-success: #075c07;
+    --#{$vendor}-color-info: #ffd324;
+    --#{$vendor}-color-warning: #b49104;
+    --#{$vendor}-color-alert: #cc5c00;
+    --#{$vendor}-color-error: #cc0000;
+}
+:root {
+    $tints: foreground, "background", primary, secondary, tertiary;
+
+    @each $tint in $tints {
+        /* alpha  #{$tint} */
+        --#{$vendor}-color-#{$tint}-alpha-low: color-mix(in srgb, var(--#{$vendor}-color-#{$tint}), transparent 10%);
+        --#{$vendor}-color-#{$tint}-alpha-mid: color-mix(in srgb, var(--#{$vendor}-color-#{$tint}), transparent 60%);
+        --#{$vendor}-color-#{$tint}-alpha-high: color-mix(in srgb, var(--#{$vendor}-color-#{$tint}), transparent 80%);
+    }
+    @each $tint in $tints {
+        /* darken  #{$tint} */
+        --#{$vendor}-color-#{$tint}-darken-low: color-mix(in srgb, var(--#{$vendor}-color-#{$tint}), black 10%);
+        --#{$vendor}-color-#{$tint}-darken-mid: color-mix(in srgb, var(--#{$vendor}-color-#{$tint}), black 30%);
+        --#{$vendor}-color-#{$tint}-darken-high: color-mix(in srgb, var(--#{$vendor}-color-#{$tint}), black 60%);
+    }
+    @each $tint in $tints {
+        /* lighten  #{$tint} */
+        --#{$vendor}-color-#{$tint}-lighten-low: color-mix(in srgb, var(--#{$vendor}-color-#{$tint}), white 10%);
+        --#{$vendor}-color-#{$tint}-lighten-mid: color-mix(in srgb, var(--#{$vendor}-color-#{$tint}), white 30%);
+        --#{$vendor}-color-#{$tint}-lighten-high: color-mix(in srgb, var(--#{$vendor}-color-#{$tint}), white 60%);
+    }
+
+    $tints: discrete, success, info, warning, alert, error;
+    @each $tint in $tints {
+        /* alpha  #{$tint} */
+        --#{$vendor}-color-#{$tint}-alpha-low: color-mix(in srgb, var(--#{$vendor}-color-#{$tint}), transparent 10%);
+        --#{$vendor}-color-#{$tint}-alpha-mid: color-mix(in srgb, var(--#{$vendor}-color-#{$tint}), transparent 30%);
+        --#{$vendor}-color-#{$tint}-alpha-high: color-mix(in srgb, var(--#{$vendor}-color-#{$tint}), transparent 60%);
+    }
+    @each $tint in $tints {
+        /* darken  #{$tint} */
+        --#{$vendor}-color-#{$tint}-darken-low: color-mix(in srgb, var(--#{$vendor}-color-#{$tint}), black 10%);
+        --#{$vendor}-color-#{$tint}-darken-mid: color-mix(in srgb, var(--#{$vendor}-color-#{$tint}), black 30%);
+        --#{$vendor}-color-#{$tint}-darken-high: color-mix(in srgb, var(--#{$vendor}-color-#{$tint}), black 60%);
+    }
+    @each $tint in $tints {
+        /* lighten  #{$tint} */
+        --#{$vendor}-color-#{$tint}-lighten-low: color-mix(in srgb, var(--#{$vendor}-color-#{$tint}), white 10%);
+        --#{$vendor}-color-#{$tint}-lighten-mid: color-mix(in srgb, var(--#{$vendor}-color-#{$tint}), white 30%);
+        --#{$vendor}-color-#{$tint}-lighten-high: color-mix(in srgb, var(--#{$vendor}-color-#{$tint}), white 60%);
+    }
+}
+/* presets */
+:root {
+    --#{$vendor}-color-border: var(--#{$vendor}-color-foreground-alpha-low);
+
+    --#{$vendor}-hover-background-color: var(--#{$vendor}-color-secondary-alpha-mid);
+    --#{$vendor}-hover-border-color: var(--#{$vendor}-color-foreground-alpha-high);
+    --#{$vendor}-hover-shadow: var(--#{$vendor}-elevation-3);
+
+    --#{$vendor}-selected-background-color: var(--#{$vendor}-color-primary-alpha-mid);
+    --#{$vendor}-selected-border-color: var(--#{$vendor}-color-primary);
+    --#{$vendor}-selected-shadow: var(--#{$vendor}-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;
+}

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

@@ -0,0 +1,147 @@
+@use "sass:map";
+@import "./containerConfig.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

@@ -0,0 +1,148 @@
+@use "sass:map";
+@import "./containerConfig.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;
+                }
+            }
+        }
+    }
+}
+
+[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/styles/slotuisheet/types.d.ts

@@ -0,0 +1,10 @@
+export type BreakPoints = Record<BreakPointName, BreakPointValue>;
+export type BreakPointName = string;
+export type BreakPointValue = string;
+export type BreakPointsKeys = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
+export type BeakPointsUnits = 'px' | 'em' | 'rem' | 'vw' | 'vh' | 'vmin' | 'vmax';
+export type BreakPointRule = Record<`--bkp-${BreakPointsKeys}`, `${string}${BeakPointsUnits}`>;
+export interface SlotUiStyleSheet extends Partial<BreakPointRule> {
+    breakpoints?: BreakPoints;
+    showSelectors?: boolean;
+}

package/dist/styles/slotuisheet/types.js

@@ -0,0 +1 @@
+export {};

package/dist/styles/slotuisheet/utils.d.ts

@@ -0,0 +1,14 @@
+export declare const configCssVars: Record<string, string>;
+export type ContainerQueryConfig = typeof configCssVars;
+export declare const containerQueryConfig: ContainerQueryConfig;
+export declare function parseCSSVariables(cssContent: string): Record<string, string>;
+export declare const containerQueryProps: {
+    readonly hideMaxWidth: "hide-max-width";
+    readonly hideMinWidth: "hide-min-width";
+    readonly hideMaxHeight: "hide-max-height";
+    readonly hideMinHeight: "hide-min-height";
+};
+export declare function toContainerQuery(attribute: keyof typeof containerQueryProps, value?: string, config?: Record<string, string>): {
+    class: string;
+    style: string | undefined;
+} | null;

package/dist/styles/slotuisheet/utils.js

@@ -0,0 +1,42 @@
+import sharedConfigCss from './containerConfig.css?raw';
+export const configCssVars = parseCSSVariables(sharedConfigCss);
+export const containerQueryConfig = {
+    ...configCssVars,
+    containerItem: 'container-item',
+    onContainer: 'on-container',
+    hideSelector: 'hide',
+    showSelector: 'show',
+    more: 'more',
+    than: 'than'
+};
+export function parseCSSVariables(cssContent) {
+    const variables = {};
+    const regex = /--([^:]+):\s*([^;]+);/g;
+    let match;
+    while ((match = regex.exec(cssContent)) !== null) {
+        const [, name, value] = match;
+        variables[name.trim()] = value.trim();
+    }
+    return variables;
+}
+export const containerQueryProps = {
+    hideMaxWidth: 'hide-max-width',
+    hideMinWidth: 'hide-min-width',
+    hideMaxHeight: 'hide-max-height',
+    hideMinHeight: 'hide-min-height'
+};
+export function toContainerQuery(attribute, value, config = containerQueryConfig) {
+    let castAttribute = containerQueryProps[attribute];
+    const regexPattern = new RegExp(`^${config.containerItem}-(${config.showSelector}|${config.hideSelector})-(max|min)-(width|height)$`);
+    const match = `${config.containerItem}-${castAttribute}`.match(regexPattern);
+    if (match) {
+        const [, showHide, maxMin, dimension] = match;
+        const isMax = maxMin === 'max';
+        const cssVariable = `--${showHide}-${config.onContainer}-${dimension}-${isMax ? `${config.more}-${config.than}` : `${config.less}-${config.than}`}`;
+        return {
+            class: `${config.containerItem}-${castAttribute}`, // add class to element
+            style: value ? `${cssVariable}: ${value};` : undefined // add style to element
+        };
+    }
+    return null;
+}