@medyll/idae-slotui-svelte 0.122.1 → 0.124.0

package/dist/navigation/tabs/tabs.scss

@@ -1,92 +1,92 @@
-@use "../../styles/slotui-mixins.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;
-  &[aria-orientation="horizontal"] {
-    ul {
-      flex-direction: column;
-    }
-  }
-  &[aria-orientation="vertical"] {
-    flex-direction: column;
-  }
-
-  &-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%;
-    &[aria-orientation="horizontal"] {
-      flex-direction: column;
-    }
-    &-rail {
-      display: flex;
-      flex: 1;
-      flex-wrap: wrap;
-      padding-left: 0;
-      margin-bottom: 0;
-      > button {
-        padding: var(--box-density-preset-small);
-        min-width: 48px;
-        cursor: pointer;
-        background: none;
-        border: none;
-        &.active,
-        &[aria-selected="true"] {
-          font-weight: bold;
-        }
-      }
-    }
-  }
-  &-content {
-    flex: 1;
-    background-color: var(--tabs-content-background-color);
-    position: relative;
-    width: 100%;
-    &-secondary {
-      display: flex;
-      padding: var(--tabs-content-secondary-padding) unset;
-      gap: var(--tabs-content-secondary-gap);
-      &-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);
-      }
-    }
-  }
-
-  &-floating-cell {
-    top: auto;
-    position: relative;
-    min-height: 4px;
-    height: 4px;
-    transition: all 0.15;
-    &-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;
-    }
-  }
-}
+@use "../../styles/slotui-mixins.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;
+  &[aria-orientation="horizontal"] {
+    ul {
+      flex-direction: column;
+    }
+  }
+  &[aria-orientation="vertical"] {
+    flex-direction: column;
+  }
+
+  &-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%;
+    &[aria-orientation="horizontal"] {
+      flex-direction: column;
+    }
+    &-rail {
+      display: flex;
+      flex: 1;
+      flex-wrap: wrap;
+      padding-left: 0;
+      margin-bottom: 0;
+      > button {
+        padding: var(--box-density-preset-small);
+        min-width: 48px;
+        cursor: pointer;
+        background: none;
+        border: none;
+        &.active,
+        &[aria-selected="true"] {
+          font-weight: bold;
+        }
+      }
+    }
+  }
+  &-content {
+    flex: 1;
+    background-color: var(--tabs-content-background-color);
+    position: relative;
+    width: 100%;
+    &-secondary {
+      display: flex;
+      padding: var(--tabs-content-secondary-padding) unset;
+      gap: var(--tabs-content-secondary-gap);
+      &-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);
+      }
+    }
+  }
+
+  &-floating-cell {
+    top: auto;
+    position: relative;
+    min-height: 4px;
+    height: 4px;
+    transition: all 0.15;
+    &-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;
+    }
+  }
+}

package/dist/slotui-css/slotui-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);