@medyll/idae-slotui-svelte 0.3.0 → 0.4.0

package/dist/slotui-css/stylesheet.css

@@ -0,0 +1,374 @@
+@import "./containerConfig.css";
+: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;
+  }
+}
+: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;
+}
+
+@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;
+  }
+}

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

@@ -0,0 +1 @@
+@import"./containerConfig.css";: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}}: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}@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}}

package/dist/slotui-css/switch.css

@@ -0,0 +1,63 @@
+:root {
+  --switch-border-radius: var(--sld-radius-large);
+  --switch-background: var(--sld-color-paper);
+  --switch-checked-background: var(--sld-color-primary);
+  --switch-handle-background-color: var(--sld-color-primary);
+  --switch-handle-border: var(--sld-color-secondary-alpha-low);
+  --switch-gutter-border: var(--sld-color-primary-alpha-low);
+  --switch-gutter-background: var(--sld-switch-background);
+  --switch-gutter-padding: 3px;
+}
+
+.switch {
+  display: inline-block;
+  position: relative;
+  border-radius: var(--switch-border-radius);
+  overflow: hidden;
+  cursor: pointer;
+}
+.switch :hover .switchHandle {
+  background-color: var(--sld-color-secondary) !important;
+}
+.switch :has(input:checked) {
+  background-color: var(--switch-checked-background);
+}
+.switch .switchGutter {
+  border: 1px solid var(--switch-gutter-border);
+  border-radius: var(--switch-border-radius);
+  padding: var(--switch-gutter-padding);
+  background-color: var(--switch-gutter-background);
+}
+.switch .switchGutter input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  top: -50px;
+  left: -50px;
+}
+.switch .switchGutter input:checked + .switchHandle {
+  left: calc(100% - 16px);
+  border-color: var(--sld-color-secondary-alpha-mid);
+  box-shadow: var(--sld-elevation-3);
+  background-color: var(--sld-color-background);
+}
+.switch .switchGutter input + .switchHandle {
+  position: relative;
+  display: block;
+  width: 16px;
+  height: 16px;
+  background: white;
+  border-radius: var(--switch-border-radius);
+  left: 0;
+  transition: all 0.1s;
+  background-color: var(--switch-handle-background-color);
+  border: 1px solid var(--switch-handle-border);
+  box-shadow: var(--sld-elevation-1);
+}
+
+label {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  min-width: 42px;
+}

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

@@ -0,0 +1 @@
+:root{--switch-border-radius: var(--sld-radius-large);--switch-background: var(--sld-color-paper);--switch-checked-background: var(--sld-color-primary);--switch-handle-background-color: var(--sld-color-primary);--switch-handle-border: var(--sld-color-secondary-alpha-low);--switch-gutter-border: var(--sld-color-primary-alpha-low);--switch-gutter-background: var(--sld-switch-background);--switch-gutter-padding: 3px}.switch{display:inline-block;position:relative;border-radius:var(--switch-border-radius);overflow:hidden;cursor:pointer}.switch :hover .switchHandle{background-color:var(--sld-color-secondary) !important}.switch :has(input:checked){background-color:var(--switch-checked-background)}.switch .switchGutter{border:1px solid var(--switch-gutter-border);border-radius:var(--switch-border-radius);padding:var(--switch-gutter-padding);background-color:var(--switch-gutter-background)}.switch .switchGutter input{position:absolute;width:0;height:0;top:-50px;left:-50px}.switch .switchGutter input:checked+.switchHandle{left:calc(100% - 16px);border-color:var(--sld-color-secondary-alpha-mid);box-shadow:var(--sld-elevation-3);background-color:var(--sld-color-background)}.switch .switchGutter input+.switchHandle{position:relative;display:block;width:16px;height:16px;background:#fff;border-radius:var(--switch-border-radius);left:0;transition:all .1s;background-color:var(--switch-handle-background-color);border:1px solid var(--switch-handle-border);box-shadow:var(--sld-elevation-1)}label{background-color:rgba(0,0,0,0);border:none;padding:0;min-width:42px}

package/dist/slotui-css/tabs.css

@@ -0,0 +1,85 @@
+: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;
+}

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

@@ -0,0 +1 @@
+: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:.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 .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 .25s ease-in;z-index:200}

package/dist/slotui-css/taskbar.css

@@ -0,0 +1,25 @@
+:root {
+  --taskbar-grid-gap: var(--sld-gap-tiny);
+  --taskbar-background-color: rgba(255, 255, 255, 0.5);
+  --taskbar-backdrop-filter: blur(20px);
+  --taskbar-min-height: 48px;
+  --taskbar-border-bottom: rgba(255, 255, 255, 0.2);
+  --taskbar-box-shadow: var(--sld-elevation-3);
+}
+
+.taskbar {
+  display: flex;
+  align-items: center;
+  grid-gap: var(--taskbar-grid-gap);
+  background-size: auto;
+  background-color: var(--taskbar-background-color);
+  --moz-backdrop-filter: var(--taskbar-backdrop-filter);
+  backdrop-filter: var(--taskbar-backdrop-filter);
+  min-height: var(--taskbar-min-height);
+  border-bottom: 1px solid var(--taskbar-border-bottom);
+  box-shadow: var(--taskbar-box-shadow);
+  box-sizing: border-box;
+}
+.taskbar-main {
+  flex: 1;
+}

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

@@ -0,0 +1 @@
+:root{--taskbar-grid-gap: var(--sld-gap-tiny);--taskbar-background-color: rgba(255, 255, 255, 0.5);--taskbar-backdrop-filter: blur(20px);--taskbar-min-height: 48px;--taskbar-border-bottom: rgba(255, 255, 255, 0.2);--taskbar-box-shadow: var(--sld-elevation-3)}.taskbar{display:flex;align-items:center;grid-gap:var(--taskbar-grid-gap);background-size:auto;background-color:var(--taskbar-background-color);--moz-backdrop-filter: var(--taskbar-backdrop-filter);backdrop-filter:var(--taskbar-backdrop-filter);min-height:var(--taskbar-min-height);border-bottom:1px solid var(--taskbar-border-bottom);box-shadow:var(--taskbar-box-shadow);box-sizing:border-box}.taskbar-main{flex:1}

package/dist/slotui-css/textfield.css

@@ -0,0 +1,127 @@
+.textfield {
+  --textfield-background: var(--sld-color-background-alpha-high);
+  --textfield-border-width: 1px;
+  --textfield-border-color: var(--sld-color-foreground-alpha-mid);
+  --textfield-border-bottom-width: 2px;
+  --textfield-border-bottom-color: var(--sld-color-primary-darker, rgb(208, 191, 151));
+  --textfield-radius: var(--sld-radius-small);
+  --textfield-padding: 0 0.5rem;
+  --textfield-shadow: inset 0px 0px 3px 1px rgba(51, 51, 51, 0.1);
+}
+
+.textfield {
+  border: var(--textfield-border-width) solid var(--textfield-border-color);
+  border-bottom: var(--textfield-border-bottom-width) solid var(--textfield-border-bottom-color);
+  border-radius: var(--textfield-radius);
+  padding: var(--textfield-padding);
+  box-shadow: var(--textfield-shadow);
+  background-color: var(--textfield-background);
+  color: var(--sld-color-foreground);
+  --preset-width: var(--sld-width-small);
+  width: var(--preset-width-small);
+}
+.textfield [error] {
+  border-bottom: red;
+}
+.textfield {
+  --preset-width: var(--sld-width-small);
+  width: var(--preset-width-small);
+  min-width: var(--preset-width-small);
+}
+.textfield[width=tiny], .textfield.width-tiny {
+  --preset-width: var(--sld-width-tiny);
+  width: var(--sld-width-tiny) !important;
+}
+.textfield[width=mini], .textfield.width-mini {
+  --preset-width: var(--sld-width-mini);
+  width: var(--sld-width-mini) !important;
+}
+.textfield[width=small], .textfield.width-small {
+  --preset-width: var(--sld-width-small);
+  width: var(--sld-width-small) !important;
+}
+.textfield[width=med], .textfield.width-med {
+  --preset-width: var(--sld-width-med);
+  width: var(--sld-width-med) !important;
+}
+.textfield[width=kind], .textfield.width-kind {
+  --preset-width: var(--sld-width-kind);
+  width: var(--sld-width-kind) !important;
+}
+.textfield[width=full], .textfield.width-full {
+  --preset-width: var(--sld-width-full);
+  width: var(--sld-width-full) !important;
+}
+.textfield[width=auto], .textfield.width-auto {
+  --preset-width: var(--sld-width-auto);
+  width: var(--sld-width-auto) !important;
+}
+.textfield[width=default], .textfield.width-default {
+  --preset-width: var(--sld-width-default);
+  width: var(--sld-width-default) !important;
+}
+.textfield {
+  --preset-tall: var(--sld-tall-small);
+  min-height: var(--preset-tall-small);
+  height: var(--preset-tall-small);
+}
+.textfield[tall=tiny], .textfield.tall-tiny {
+  min-height: var(--sld-tall-tiny) !important;
+}
+.textfield[tall=mini], .textfield.tall-mini {
+  min-height: var(--sld-tall-mini) !important;
+}
+.textfield[tall=small], .textfield.tall-small {
+  min-height: var(--sld-tall-small) !important;
+}
+.textfield[tall=med], .textfield.tall-med {
+  min-height: var(--sld-tall-med) !important;
+}
+.textfield[tall=kind], .textfield.tall-kind {
+  min-height: var(--sld-tall-kind) !important;
+}
+.textfield[tall=auto], .textfield.tall-auto {
+  min-height: var(--sld-tall-auto) !important;
+}
+.textfield[tall=default], .textfield.tall-default {
+  min-height: var(--sld-tall-default) !important;
+}
+.textfield:hover {
+  border-color: var(--sld-hover-border-color);
+  background-color: var(--sld-background-disabled);
+}
+.textfield-container {
+  position: relative;
+  display: inline-flex;
+  overflow: hidden;
+}
+.textfield-start {
+  position: absolute;
+  height: 100%;
+  max-height: 100%;
+  width: 24px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: var(--textfield-radius, var(--sld-radius-small));
+}
+.textfield-end {
+  position: absolute;
+  right: 0;
+  height: 100%;
+  max-height: 100%;
+  min-width: 24px;
+  overflow: hidden;
+  display: flex;
+  gap: 4px;
+  padding: 2px;
+  align-items: center;
+  border-radius: var(--textfield-radius, var(--sld-radius-small));
+}
+.textfield-end > * {
+  max-height: calc(100% - 40px) !important;
+  border: 1px solid pink;
+}