@medyll/idae-slotui-svelte 0.122.1 → 0.123.0

package/dist/slotui-css/slotui-min-css.css

@@ -2335,6 +2335,93 @@ body[data-theme=dark],
   --hide-selector: hide;
 }
 
+/** tabs.scss ----------------*/
+:root {
+  --tabs-nav-border-color: var(--sld-color-primary-alpha-high);
+  --tabs-content-background-color: var(--sld-color-background);
+  --tabs-content-secondary-padding: var(--box-density-preset-small);
+  --tabs-content-secondary-gap: var(--sld-gap-small);
+  --tabs-content-secondary-icon-border-right: var(--sld-color-border);
+  --tabs-content-secondary-icon-border-radius: var(--sld-radius-tiny);
+  --tabs-content-secondary-icon-box-shadow: var(--sld-elevation-3);
+  --tabs-content-secondary-icon-padding: var(--sld-padding-small);
+  --tabs-floating-cell-slot-border-radius: var(--sld-radius-small);
+  --tabs-floating-cell-slot-background-color: var(--sld-color-primary);
+}
+
+.tab {
+  position: relative;
+  display: flex;
+}
+.tab[aria-orientation=horizontal] ul {
+  flex-direction: column;
+}
+.tab[aria-orientation=vertical] {
+  flex-direction: column;
+}
+.tab-nav {
+  padding: 0.25rem 0;
+  gap: var(--sld-gap-med);
+  border-bottom: 1px solid var(--tabs-nav-border-color);
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.tab-nav[aria-orientation=horizontal] {
+  flex-direction: column;
+}
+.tab-nav-rail {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+}
+.tab-nav-rail > button {
+  padding: var(--box-density-preset-small);
+  min-width: 48px;
+  cursor: pointer;
+  background: none;
+  border: none;
+}
+.tab-nav-rail > button.active, .tab-nav-rail > button[aria-selected=true] {
+  font-weight: bold;
+}
+.tab-content {
+  flex: 1;
+  background-color: var(--tabs-content-background-color);
+  position: relative;
+  width: 100%;
+}
+.tab-content-secondary {
+  display: flex;
+  padding: var(--tabs-content-secondary-padding) unset;
+  gap: var(--tabs-content-secondary-gap);
+}
+.tab-content-secondary-icon {
+  border-right: 1px solid var(--tabs-content-secondary-icon-border-right);
+  border-radius: var(--tabs-content-secondary-icon-border-radius);
+  box-shadow: var(--tabs-content-secondary-icon-box-shadow);
+  padding: var(--tabs-content-secondary-icon-padding);
+}
+.tab-floating-cell {
+  top: auto;
+  position: relative;
+  min-height: 4px;
+  height: 4px;
+  transition: all 0.15;
+}
+.tab-floating-cell-snip {
+  border-radius: var(--tabs-floating-cell-slot-border-radius);
+  min-height: 4px;
+  background-color: var(--tabs-floating-cell-slot-background-color);
+  width: 100%;
+  position: absolute;
+  transition: all 0.25s ease-in;
+  z-index: 200;
+}
+
 /** drawer.scss ----------------*/
 :root {
   --drawer-color: inherit;
@@ -2425,93 +2512,6 @@ body[data-theme=dark],
   width: 100%;
 }
 
-/** tabs.scss ----------------*/
-:root {
-  --tabs-nav-border-color: var(--sld-color-primary-alpha-high);
-  --tabs-content-background-color: var(--sld-color-background);
-  --tabs-content-secondary-padding: var(--box-density-preset-small);
-  --tabs-content-secondary-gap: var(--sld-gap-small);
-  --tabs-content-secondary-icon-border-right: var(--sld-color-border);
-  --tabs-content-secondary-icon-border-radius: var(--sld-radius-tiny);
-  --tabs-content-secondary-icon-box-shadow: var(--sld-elevation-3);
-  --tabs-content-secondary-icon-padding: var(--sld-padding-small);
-  --tabs-floating-cell-slot-border-radius: var(--sld-radius-small);
-  --tabs-floating-cell-slot-background-color: var(--sld-color-primary);
-}
-
-.tab {
-  position: relative;
-  display: flex;
-}
-.tab[aria-orientation=horizontal] ul {
-  flex-direction: column;
-}
-.tab[aria-orientation=vertical] {
-  flex-direction: column;
-}
-.tab-nav {
-  padding: 0.25rem 0;
-  gap: var(--sld-gap-med);
-  border-bottom: 1px solid var(--tabs-nav-border-color);
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-}
-.tab-nav[aria-orientation=horizontal] {
-  flex-direction: column;
-}
-.tab-nav-rail {
-  display: flex;
-  flex: 1;
-  flex-wrap: wrap;
-  padding-left: 0;
-  margin-bottom: 0;
-}
-.tab-nav-rail > button {
-  padding: var(--box-density-preset-small);
-  min-width: 48px;
-  cursor: pointer;
-  background: none;
-  border: none;
-}
-.tab-nav-rail > button.active, .tab-nav-rail > button[aria-selected=true] {
-  font-weight: bold;
-}
-.tab-content {
-  flex: 1;
-  background-color: var(--tabs-content-background-color);
-  position: relative;
-  width: 100%;
-}
-.tab-content-secondary {
-  display: flex;
-  padding: var(--tabs-content-secondary-padding) unset;
-  gap: var(--tabs-content-secondary-gap);
-}
-.tab-content-secondary-icon {
-  border-right: 1px solid var(--tabs-content-secondary-icon-border-right);
-  border-radius: var(--tabs-content-secondary-icon-border-radius);
-  box-shadow: var(--tabs-content-secondary-icon-box-shadow);
-  padding: var(--tabs-content-secondary-icon-padding);
-}
-.tab-floating-cell {
-  top: auto;
-  position: relative;
-  min-height: 4px;
-  height: 4px;
-  transition: all 0.15;
-}
-.tab-floating-cell-snip {
-  border-radius: var(--tabs-floating-cell-slot-border-radius);
-  min-height: 4px;
-  background-color: var(--tabs-floating-cell-slot-background-color);
-  width: 100%;
-  position: absolute;
-  transition: all 0.25s ease-in;
-  z-index: 200;
-}
-
 /** sorterer.scss ----------------*/
 :root {
   --sorterer-gap: var(--sld-gap-tiny);
@@ -3126,6 +3126,17 @@ label {
   max-width: 100%;
 }
 
+/** confirm.scss ----------------*/
+.confirm {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.confirm-validate {
+  display: flex;
+  align-items: center;
+}
+
 /** checkbox.scss ----------------*/
 :root {
   --sld-checkbox-background: var(--sld-color-background-alpha-high);
@@ -4061,17 +4072,6 @@ input[type=submit].slotui-button.flat:focus {
   flex-shrink: 1;
 }
 
-/** confirm.scss ----------------*/
-.confirm {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-.confirm-validate {
-  display: flex;
-  align-items: center;
-}
-
 /** auto-complete.scss ----------------*/
 :root {
   --auto-complete-pad: var(--sld-pad-medium);
@@ -4175,6 +4175,29 @@ hr.vertical {
   border-right: 1px solid var(--divider-border-right);
 }
 
+/** content-switcher.scss ----------------*/
+:root {
+  --sld-content-switcher-overflow: hidden;
+}
+
+.content-switcher {
+  min-width: auto;
+  max-width: 100%;
+  width: 100%;
+  gap: 0.5rem;
+  overflow: var(--sld-content-switcher-overflow);
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+.content-switcher .content {
+  position: relative;
+  overflow: var(--sld-content-switcher-overflow);
+  min-width: auto;
+  flex: 1 1 auto;
+}
+
 /** chipper.scss ----------------*/
 :root {
   --chipper-gap: var(--sld-gap-tiny);
@@ -4349,45 +4372,9 @@ hr.vertical {
   display: none;
 }
 
-/** content-switcher.scss ----------------*/
-:root {
-  --sld-content-switcher-overflow: hidden;
-}
-
-.content-switcher {
-  min-width: auto;
-  max-width: 100%;
-  width: 100%;
-  gap: 0.5rem;
-  overflow: var(--sld-content-switcher-overflow);
-  position: relative;
+/** breadcrumb.scss ----------------*/
+.breadCrumb ul {
   display: flex;
-  align-items: center;
-  flex: 1;
-}
-.content-switcher .content {
-  position: relative;
-  overflow: var(--sld-content-switcher-overflow);
-  min-width: auto;
-  flex: 1 1 auto;
-}
-
-/** badge.scss ----------------*/
-:root {
-  --badge-color-border: var(--sld-color-border);
-}
-
-.badge {
-  position: absolute;
-  border-radius: 50%;
-  border: 1px solid var(--badge-color-border);
-  display: grid;
-  place-items: center;
-  width: 16px;
-  height: 16px;
-}
-.badge .hidden {
-  transform: scale(0, 0);
 }
 
 /** box.scss ----------------*/
@@ -4421,6 +4408,24 @@ hr.vertical {
   justify-content: end;
 }
 
+/** badge.scss ----------------*/
+:root {
+  --badge-color-border: var(--sld-color-border);
+}
+
+.badge {
+  position: absolute;
+  border-radius: 50%;
+  border: 1px solid var(--badge-color-border);
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+}
+.badge .hidden {
+  transform: scale(0, 0);
+}
+
 /** backdrop.scss ----------------*/
 :root {
   --backdrop-background-color: var(--sld-color-foreground-alpha-high);
@@ -4470,11 +4475,6 @@ hr.vertical {
   overflow: hidden;
 }
 
-/** breadcrumb.scss ----------------*/
-.breadCrumb ul {
-  display: flex;
-}
-
 /** alert.scss ----------------*/
 :root {
   --alert-radius: var(--sld-radius-small);

package/dist/styles/slotui-mixins.scss

@@ -1,168 +1,168 @@
-@use "slotui-presets.scss";
-
-@mixin ui-variants {
-    & {
-        &[variant*="square"] {
-            aspect-ratio: 1/1 !important;
-            height: auto;
-        }
-
-        &[variant*="rounded"] {
-            border-radius: 50%;
-        }
-    }
-}
-
-@mixin ui-ellipsises-presets {
-    & {
-        --preset-ellipsis-line: #{slotui-presets.$presets-ellipsis-line-default};
-    }
-
-    &[ellipsis],
-    &.ellipsis {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    @for $i from 1 through 5 {
-        &.ellipsis-line-#{$i} {
-            display: -webkit-box;
-            -webkit-line-clamp: #{$i};
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: normal;
-            --preset-ellipsis-line: #{$i};
-        }
-    }
-}
-
-@mixin ui-transition {
-    & {
-        transition: all 0.25s ease;
-    }
-}
-
-@mixin ui-tall-presets {
-    & {
-        min-height: var(--preset-tall-small);
-        height: var(--preset-tall-small);
-    }
-    & {
-        --preset-tall: var(--sld-tall-small);
-    }
-
-    @each $preset, $value in slotui-presets.$preset-tall-list {
-        &[tall="#{$preset}"],
-        &.tall-#{$preset} {
-            min-height: var(--sld-tall-#{$preset}) !important;
-        }
-    }
-}
-
-@mixin ui-width-presets {
-    & {
-        width: var(--sld-width-small);
-    }
-    & {
-        --preset-width: var(--sld-width-small);
-    }
-
-    @each $preset, $value in slotui-presets.$preset-width-list {
-        &[width="#{$preset}"],
-        &.width-#{$preset} {
-            --preset-width: var(--sld-width-#{$preset});
-            width: var(--sld-width-#{$preset}) !important;
-        }
-    }
-}
-
-@mixin ui-gutter-presets {
-    & {
-        --preset-gutter: var(--sld-gutter-default);
-    }
-
-    @each $preset, $value in slotui-presets.$preset-gutter-list {
-        & [gutter="#{$preset}"],
-        & .gutter-#{$preset} {
-            padding: var(--sld-gutter-#{$preset});
-            gap: var(--sld-gutter-#{$preset});
-            --preset-gutter: var(--sld-gutter-#{$preset});
-        }
-    }
-}
-
-@mixin ui-pad-presets {
-    & {
-        --preset-pad: var(--sld-pad-default);
-    }
-
-    @each $preset, $value in slotui-presets.$preset-pad-list {
-        &[pad="#{$preset}"],
-        &.pad-#{$preset} {
-            padding: var(--sld-pad-#{$preset});
-            --preset-pad: var(--sld-pad-#{$preset});
-        }
-    }
-}
-
-@mixin ui-radius-presets {
-    & {
-        --preset-radius: var(--sld-radius-default);
-    }
-
-    @each $preset, $value in slotui-presets.$preset-radius-list {
-        &[radius="#{$preset}"],
-        &.radius-#{$preset} {
-            border-radius: var(--sld-radius-#{$preset});
-            --preset-radius: var(--sld-radius-#{$preset});
-        }
-    }
-}
-
-@mixin elevation() {
-    @each $level in 0 through 5 {
-        &.elevation-#{$level},
-        &[elevation-#{$level}] {
-            box-shadow: var(--sld-elevation-#{$level});
-        }
-    }
-}
-
-@mixin data-hover {
-    &:hover {
-        border-color: var(--sld-hover-border-color);
-        background-color: var(--sld-background-disabled);
-    }
-}
-
-@mixin data-selected {
-    &.selected,
-    &[aria-selected="true"] {
-        border-color: none; //var(--sld-selected-border-color);
-        background-color: var(--sld-selected-background-color, var(--sld-color-background-darken-mid));
-        box-shadow: var(--sld-selected-shadow);
-        .chip,
-        .menuItemChip {
-            position: absolute;
-            min-height: 16px;
-            height: 50%;
-            width: 3px;
-            background-color: var(--sld-color-primary);
-            border-radius: var(--sld-radius-med);
-            left: 0;
-            border: 1px solid var(--sld-color-primary-alpha-mid);
-        }
-    }
-}
-
-@mixin flex($direction: row, $align-items: flex-start) {
-    display: flex;
-    flex-direction: $direction;
-    align-items: $align-items;
-}
-
-@mixin flex-main {
-    flex: 1 1 0;
-}
+@use "slotui-presets.scss";
+
+@mixin ui-variants {
+    & {
+        &[variant*="square"] {
+            aspect-ratio: 1/1 !important;
+            height: auto;
+        }
+
+        &[variant*="rounded"] {
+            border-radius: 50%;
+        }
+    }
+}
+
+@mixin ui-ellipsises-presets {
+    & {
+        --preset-ellipsis-line: #{slotui-presets.$presets-ellipsis-line-default};
+    }
+
+    &[ellipsis],
+    &.ellipsis {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    @for $i from 1 through 5 {
+        &.ellipsis-line-#{$i} {
+            display: -webkit-box;
+            -webkit-line-clamp: #{$i};
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: normal;
+            --preset-ellipsis-line: #{$i};
+        }
+    }
+}
+
+@mixin ui-transition {
+    & {
+        transition: all 0.25s ease;
+    }
+}
+
+@mixin ui-tall-presets {
+    & {
+        min-height: var(--preset-tall-small);
+        height: var(--preset-tall-small);
+    }
+    & {
+        --preset-tall: var(--sld-tall-small);
+    }
+
+    @each $preset, $value in slotui-presets.$preset-tall-list {
+        &[tall="#{$preset}"],
+        &.tall-#{$preset} {
+            min-height: var(--sld-tall-#{$preset}) !important;
+        }
+    }
+}
+
+@mixin ui-width-presets {
+    & {
+        width: var(--sld-width-small);
+    }
+    & {
+        --preset-width: var(--sld-width-small);
+    }
+
+    @each $preset, $value in slotui-presets.$preset-width-list {
+        &[width="#{$preset}"],
+        &.width-#{$preset} {
+            --preset-width: var(--sld-width-#{$preset});
+            width: var(--sld-width-#{$preset}) !important;
+        }
+    }
+}
+
+@mixin ui-gutter-presets {
+    & {
+        --preset-gutter: var(--sld-gutter-default);
+    }
+
+    @each $preset, $value in slotui-presets.$preset-gutter-list {
+        & [gutter="#{$preset}"],
+        & .gutter-#{$preset} {
+            padding: var(--sld-gutter-#{$preset});
+            gap: var(--sld-gutter-#{$preset});
+            --preset-gutter: var(--sld-gutter-#{$preset});
+        }
+    }
+}
+
+@mixin ui-pad-presets {
+    & {
+        --preset-pad: var(--sld-pad-default);
+    }
+
+    @each $preset, $value in slotui-presets.$preset-pad-list {
+        &[pad="#{$preset}"],
+        &.pad-#{$preset} {
+            padding: var(--sld-pad-#{$preset});
+            --preset-pad: var(--sld-pad-#{$preset});
+        }
+    }
+}
+
+@mixin ui-radius-presets {
+    & {
+        --preset-radius: var(--sld-radius-default);
+    }
+
+    @each $preset, $value in slotui-presets.$preset-radius-list {
+        &[radius="#{$preset}"],
+        &.radius-#{$preset} {
+            border-radius: var(--sld-radius-#{$preset});
+            --preset-radius: var(--sld-radius-#{$preset});
+        }
+    }
+}
+
+@mixin elevation() {
+    @each $level in 0 through 5 {
+        &.elevation-#{$level},
+        &[elevation-#{$level}] {
+            box-shadow: var(--sld-elevation-#{$level});
+        }
+    }
+}
+
+@mixin data-hover {
+    &:hover {
+        border-color: var(--sld-hover-border-color);
+        background-color: var(--sld-background-disabled);
+    }
+}
+
+@mixin data-selected {
+    &.selected,
+    &[aria-selected="true"] {
+        border-color: none; //var(--sld-selected-border-color);
+        background-color: var(--sld-selected-background-color, var(--sld-color-background-darken-mid));
+        box-shadow: var(--sld-selected-shadow);
+        .chip,
+        .menuItemChip {
+            position: absolute;
+            min-height: 16px;
+            height: 50%;
+            width: 3px;
+            background-color: var(--sld-color-primary);
+            border-radius: var(--sld-radius-med);
+            left: 0;
+            border: 1px solid var(--sld-color-primary-alpha-mid);
+        }
+    }
+}
+
+@mixin flex($direction: row, $align-items: flex-start) {
+    display: flex;
+    flex-direction: $direction;
+    align-items: $align-items;
+}
+
+@mixin flex-main {
+    flex: 1 1 0;
+}