jsl-ui 10.0.5 → 10.1.0

package/lib/components/slider/SliderStyle.scss

@@ -0,0 +1,21 @@
+@import "../../ui/theme.css";
+
+.jsl-slider {
+    width: 100%;
+    margin: .625rem 0 1.25rem;
+}
+
+.jsl-slider.noUi-target {
+    border: 0;
+}
+
+.jsl-slider[disabled] {
+    pointer-events: none;
+    opacity: .6;
+}
+
+.jsl-slider-vertical {
+    width: 6px;
+    height: 12rem;
+    margin: .625rem auto 1.25rem;
+}

package/lib/components/tabs/TabsStyle.scss

@@ -54,7 +54,7 @@
         justify-content: center;
         gap: 0.5rem;
         box-sizing: border-box;
-        min-height: 2.5rem;
+        min-height: 2.4rem;
         min-width: 0;
         padding: 0.625rem 0.875rem;
         margin: 0;

package/lib/grid.css

@@ -1539,7 +1539,7 @@ input.editor-text, textarea.editor-text {
   width: 14rem;
   min-width: 0;
   max-width: 100%;
-  min-height: 2.5rem;
+  min-height: 2.2rem;
   color: var(--jsl-color-text);
   font: inherit;
   display: inline-flex;
@@ -2458,7 +2458,7 @@ textarea.jsl-input {
 .stabcomponent .tab-trigger {
   box-sizing: border-box;
   min-width: 0;
-  min-height: 2.5rem;
+  min-height: 2.4rem;
   color: inherit;
   font: inherit;
   text-align: start;
@@ -3548,32 +3548,6 @@ textarea.jsl-input {
   font-size: .6875rem;
 }
 
-:where(:root) {
-  --jsl-color-canvas: #f7f7f8;
-  --jsl-color-surface: #fff;
-  --jsl-color-surface-subtle: #fafafa;
-  --jsl-color-surface-hover: #f0f0f2;
-  --jsl-color-surface-selected: #e8e8eb;
-  --jsl-color-border: #d4d4d8;
-  --jsl-color-border-subtle: #e4e4e7;
-  --jsl-color-text: #27272a;
-  --jsl-color-text-secondary: #52525b;
-  --jsl-color-text-muted: #71717a;
-  --jsl-color-accent: #3f3f46;
-  --jsl-color-accent-hover: #27272a;
-  --jsl-color-accent-active: #18181b;
-  --jsl-color-on-accent: #fff;
-  --jsl-color-focus: #52525b;
-  --jsl-color-danger: #b42318;
-  --jsl-color-success: #15803d;
-  --jsl-color-warning: #b45309;
-  --jsl-color-info: #2563eb;
-  --jsl-color-disabled-surface: #f4f4f5;
-  --jsl-color-disabled-text: #71717a;
-  --jsl-color-overlay: #18181b73;
-  --jsl-shadow-dialog: 0 24px 64px #0000002e, 0 4px 16px #00000014;
-}
-
 .jsl-overlay-overlay {
   color: var(--jsl-color-text);
   width: fit-content;
@@ -3686,4 +3660,123 @@ textarea.jsl-input {
     animation: none !important;
   }
 }
+
+.jsl-slider {
+  width: 100%;
+  margin: .625rem 0 1.25rem;
+}
+
+.jsl-slider.noUi-target {
+  border: 0;
+}
+
+.jsl-slider[disabled] {
+  pointer-events: none;
+  opacity: .6;
+}
+
+.jsl-slider-vertical {
+  width: 6px;
+  height: 12rem;
+  margin: .625rem auto 1.25rem;
+}
+
+:where(:root) {
+  --jsl-color-canvas: #f7f7f8;
+  --jsl-color-surface: #fff;
+  --jsl-color-surface-subtle: #fafafa;
+  --jsl-color-surface-hover: #f0f0f2;
+  --jsl-color-surface-selected: #e8e8eb;
+  --jsl-color-border: #d4d4d8;
+  --jsl-color-border-subtle: #e4e4e7;
+  --jsl-color-text: #27272a;
+  --jsl-color-text-secondary: #52525b;
+  --jsl-color-text-muted: #71717a;
+  --jsl-color-accent: #3f3f46;
+  --jsl-color-accent-hover: #27272a;
+  --jsl-color-accent-active: #18181b;
+  --jsl-color-on-accent: #fff;
+  --jsl-color-focus: #52525b;
+  --jsl-color-danger: #b42318;
+  --jsl-color-success: #15803d;
+  --jsl-color-warning: #b45309;
+  --jsl-color-info: #2563eb;
+  --jsl-color-disabled-surface: #f4f4f5;
+  --jsl-color-disabled-text: #71717a;
+  --jsl-color-overlay: #18181b73;
+  --jsl-shadow-dialog: 0 24px 64px #0000002e, 0 4px 16px #00000014;
+}
+
+.jsl-dropdown-trigger:not(.jsl-dropdown-trigger--no-indicator):after {
+  content: "";
+  border-bottom: 1.5px solid;
+  border-right: 1.5px solid;
+  flex: none;
+  width: .42em;
+  height: .42em;
+  margin-inline-start: .55em;
+  transition: transform .15s;
+  display: inline-block;
+  transform: translateY(-.12em) rotate(45deg);
+}
+
+.jsl-dropdown-trigger[aria-expanded="true"]:after {
+  transform: translateY(.08em) rotate(225deg);
+}
+
+.jsl-dropdown-portal {
+  z-index: 3000;
+  pointer-events: none;
+  position: fixed;
+  inset: 0;
+}
+
+.jsl-dropdown-menu {
+  box-sizing: border-box;
+  border: 1px solid var(--jsl-color-border);
+  background: var(--jsl-color-surface);
+  color: var(--jsl-color-text);
+  pointer-events: auto;
+  border-radius: .5rem;
+  outline: none;
+  padding: .2rem;
+  overflow: auto;
+  box-shadow: 0 8px 24px #00000029, 0 2px 6px #00000014;
+}
+
+.dd-menu-comp > * {
+  width: calc(100% - .2rem);
+  margin: .1rem;
+  display: block;
+}
+
+.dd-menu-comp {
+  --jsl-button-primary: var(--jsl-color-surface);
+  --jsl-button-on-primary: var(--jsl-color-text);
+  --jsl-button-primary-hover: var(--jsl-color-surface-hover);
+  --jsl-button-primary-active: var(--jsl-color-surface-selected);
+  --jsl-button-radius: .25rem;
+  flex-direction: column;
+  display: flex;
+}
+
+.dd-menu-comp > .jsl-button {
+  --jsl-button-height: 2.2rem;
+  text-align: left;
+  flex: none;
+  justify-content: flex-start;
+  align-items: center;
+  display: flex;
+}
+
+.jsl-dropdown-menu [role^="menuitem"]:focus-visible {
+  outline: 2px solid var(--jsl-color-focus);
+  outline-offset: -2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .jsl-dropdown-trigger:after {
+    transition: none;
+  }
+}
 /*# sourceMappingURL=index.css.map */

package/lib/index.css

@@ -1539,7 +1539,7 @@ input.editor-text, textarea.editor-text {
   width: 14rem;
   min-width: 0;
   max-width: 100%;
-  min-height: 2.5rem;
+  min-height: 2.2rem;
   color: var(--jsl-color-text);
   font: inherit;
   display: inline-flex;
@@ -2458,7 +2458,7 @@ textarea.jsl-input {
 .stabcomponent .tab-trigger {
   box-sizing: border-box;
   min-width: 0;
-  min-height: 2.5rem;
+  min-height: 2.4rem;
   color: inherit;
   font: inherit;
   text-align: start;
@@ -3548,32 +3548,6 @@ textarea.jsl-input {
   font-size: .6875rem;
 }
 
-:where(:root) {
-  --jsl-color-canvas: #f7f7f8;
-  --jsl-color-surface: #fff;
-  --jsl-color-surface-subtle: #fafafa;
-  --jsl-color-surface-hover: #f0f0f2;
-  --jsl-color-surface-selected: #e8e8eb;
-  --jsl-color-border: #d4d4d8;
-  --jsl-color-border-subtle: #e4e4e7;
-  --jsl-color-text: #27272a;
-  --jsl-color-text-secondary: #52525b;
-  --jsl-color-text-muted: #71717a;
-  --jsl-color-accent: #3f3f46;
-  --jsl-color-accent-hover: #27272a;
-  --jsl-color-accent-active: #18181b;
-  --jsl-color-on-accent: #fff;
-  --jsl-color-focus: #52525b;
-  --jsl-color-danger: #b42318;
-  --jsl-color-success: #15803d;
-  --jsl-color-warning: #b45309;
-  --jsl-color-info: #2563eb;
-  --jsl-color-disabled-surface: #f4f4f5;
-  --jsl-color-disabled-text: #71717a;
-  --jsl-color-overlay: #18181b73;
-  --jsl-shadow-dialog: 0 24px 64px #0000002e, 0 4px 16px #00000014;
-}
-
 .jsl-overlay-overlay {
   color: var(--jsl-color-text);
   width: fit-content;
@@ -3686,4 +3660,123 @@ textarea.jsl-input {
     animation: none !important;
   }
 }
+
+.jsl-slider {
+  width: 100%;
+  margin: .625rem 0 1.25rem;
+}
+
+.jsl-slider.noUi-target {
+  border: 0;
+}
+
+.jsl-slider[disabled] {
+  pointer-events: none;
+  opacity: .6;
+}
+
+.jsl-slider-vertical {
+  width: 6px;
+  height: 12rem;
+  margin: .625rem auto 1.25rem;
+}
+
+:where(:root) {
+  --jsl-color-canvas: #f7f7f8;
+  --jsl-color-surface: #fff;
+  --jsl-color-surface-subtle: #fafafa;
+  --jsl-color-surface-hover: #f0f0f2;
+  --jsl-color-surface-selected: #e8e8eb;
+  --jsl-color-border: #d4d4d8;
+  --jsl-color-border-subtle: #e4e4e7;
+  --jsl-color-text: #27272a;
+  --jsl-color-text-secondary: #52525b;
+  --jsl-color-text-muted: #71717a;
+  --jsl-color-accent: #3f3f46;
+  --jsl-color-accent-hover: #27272a;
+  --jsl-color-accent-active: #18181b;
+  --jsl-color-on-accent: #fff;
+  --jsl-color-focus: #52525b;
+  --jsl-color-danger: #b42318;
+  --jsl-color-success: #15803d;
+  --jsl-color-warning: #b45309;
+  --jsl-color-info: #2563eb;
+  --jsl-color-disabled-surface: #f4f4f5;
+  --jsl-color-disabled-text: #71717a;
+  --jsl-color-overlay: #18181b73;
+  --jsl-shadow-dialog: 0 24px 64px #0000002e, 0 4px 16px #00000014;
+}
+
+.jsl-dropdown-trigger:not(.jsl-dropdown-trigger--no-indicator):after {
+  content: "";
+  border-bottom: 1.5px solid;
+  border-right: 1.5px solid;
+  flex: none;
+  width: .42em;
+  height: .42em;
+  margin-inline-start: .55em;
+  transition: transform .15s;
+  display: inline-block;
+  transform: translateY(-.12em) rotate(45deg);
+}
+
+.jsl-dropdown-trigger[aria-expanded="true"]:after {
+  transform: translateY(.08em) rotate(225deg);
+}
+
+.jsl-dropdown-portal {
+  z-index: 3000;
+  pointer-events: none;
+  position: fixed;
+  inset: 0;
+}
+
+.jsl-dropdown-menu {
+  box-sizing: border-box;
+  border: 1px solid var(--jsl-color-border);
+  background: var(--jsl-color-surface);
+  color: var(--jsl-color-text);
+  pointer-events: auto;
+  border-radius: .5rem;
+  outline: none;
+  padding: .2rem;
+  overflow: auto;
+  box-shadow: 0 8px 24px #00000029, 0 2px 6px #00000014;
+}
+
+.dd-menu-comp > * {
+  width: calc(100% - .2rem);
+  margin: .1rem;
+  display: block;
+}
+
+.dd-menu-comp {
+  --jsl-button-primary: var(--jsl-color-surface);
+  --jsl-button-on-primary: var(--jsl-color-text);
+  --jsl-button-primary-hover: var(--jsl-color-surface-hover);
+  --jsl-button-primary-active: var(--jsl-color-surface-selected);
+  --jsl-button-radius: .25rem;
+  flex-direction: column;
+  display: flex;
+}
+
+.dd-menu-comp > .jsl-button {
+  --jsl-button-height: 2.2rem;
+  text-align: left;
+  flex: none;
+  justify-content: flex-start;
+  align-items: center;
+  display: flex;
+}
+
+.jsl-dropdown-menu [role^="menuitem"]:focus-visible {
+  outline: 2px solid var(--jsl-color-focus);
+  outline-offset: -2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .jsl-dropdown-trigger:after {
+    transition: none;
+  }
+}
 /*# sourceMappingURL=index.css.map */