jsl-ui 9.28.7 → 10.0.0

package/lib/components/select/SelectStyle.scss

@@ -1,187 +1,205 @@
-.select-comp {
-    border: solid 1px #bdbdbd;
-    border-radius: 0.2rem;
-    position: relative;
-    min-width: 8rem;
-    display: inline-block;
-    box-sizing: border-box;
-    padding-left: 0.2rem;
-    height: 1.6rem;
-    line-height: 1.6rem;
-    vertical-align: middle;
-
-    &.expanded {
-        border-color: #3B99FF;
-    }
-
-    &.disabled {
-        color:#999999;
-    }
-
-    .sel-result {
-
-        .clear-btn {
-            position: absolute;
-            right: 1.2rem;
-            top: 0;
-            font-size: 1.4rem;
-            line-height: 1.4rem;
-            font-weight: bold;
-            color: #999999;
-            font-family: sans-serif;
-            cursor: pointer;
-            opacity: 0.3;
-            z-index: 10;
-            border: none;
-            background: none;
-
-            &:not([disabled]):hover {
-                color:#d00000;
-            }
-        }
-
-        &:hover .clear-btn:not([disabled]) {
-            opacity: 1;
-        }
-    }
-
-    .sel-expander {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        width: 1.5rem;
-        box-sizing: border-box;
-        border: none;
-        // border-left: solid 2px #bdbdbd;
-        // border-bottom-left-radius: 3px;
-        // border-top-left-radius: 3px;
-        text-align: center;
-        border-bottom-right-radius: 0.2rem;
-        border-top-right-radius: 0.2rem;
-        background: white;
-        opacity: 0.7;
-        cursor: pointer;
-        font-size: 0.65em;
-
-        &:focus {
-            outline:0;
-            color: white;
-            background: #3b9aff;
-        }
-    }
-
-    .sel-expander::before {
-        content: "";
-        display: block;
-        position: absolute;
-        left: 0;
-        top: 2px;
-        bottom: 2px;
-        width: 0;
-        box-sizing: content-box;
-        padding: 0;
-        margin: 0;
-        border-left: solid 1px #bdbdbd;
-        // box-shadow: -1px 0px 1px 1px #f0f0f0;
-    }
-
-    .sel-dd-item {
-        overflow: hidden;
-        display: block;
-        height: 100%;
-        margin-right: 2.6rem;
-        white-space: nowrap;
-    }
-    
-    &:hover .sel-expander {
-        opacity: 1;
-        background: #dadada;
-    }
+@import "../../ui/theme.css";
+
+.select-comp {
+    position: relative;
+    display: inline-flex;
+    box-sizing: border-box;
+    width: 14rem;
+    max-width: 100%;
+    min-width: 0;
+    min-height: 2.5rem;
+    vertical-align: middle;
+    color: var(--jsl-color-text);
+    font: inherit;
+    font-size: .875rem;
+}
+.select-comp *, .sel-comp-dd * { box-sizing: border-box; }
+.select-comp .sel-expander {
+    appearance: none;
+    display: flex;
+    align-items: center;
+    gap: .625rem;
+    width: 100%;
+    min-width: 0;
+    min-height: inherit;
+    padding: .5rem .75rem;
+    border: 1px solid var(--jsl-color-border);
+    border-radius: .5rem;
+    background: var(--jsl-color-surface);
+    color: inherit;
+    font: inherit;
+    line-height: 1.4;
+    text-align: left;
+    cursor: pointer;
+    transition: border-color .15s;
+}
+.select-comp:has(.clear-btn:not([hidden])) .sel-expander { padding-right: 3.5rem; }
+.select-comp .sel-expander:hover:not(:disabled) { border-color: var(--jsl-color-text-muted); }
+.select-comp.expanded .sel-expander { border-color: var(--jsl-color-accent); }
+.select-comp .sel-expander:focus-visible, .select-comp .clear-btn:focus-visible {
+    outline: 2px solid var(--jsl-color-focus);
+    outline-offset: 2px;
+}
+.select-comp .sel-result {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.select-comp .sel-placeholder { color: var(--jsl-color-text-muted); }
+.select-comp .sel-result > .sel-dd-item { display: block; overflow: hidden; text-overflow: ellipsis; }
+.select-comp .sel-chevron {
+    flex: 0 0 7px;
+    width: 7px;
+    height: 7px;
+    border: solid var(--jsl-color-text-muted);
+    border-width: 0 1.5px 1.5px 0;
+    transform: rotate(45deg) translateY(-2px);
+    margin-left: auto;
+}
+.select-comp.expanded .sel-chevron { transform: rotate(225deg) translate(-2px, -1px); }
+.select-comp:has(.clear-btn:not([hidden])) .sel-chevron { position: absolute; right: .875rem; }
+.select-comp .clear-btn {
+    appearance: none;
+    display: grid;
+    place-items: center;
+    position: absolute;
+    right: 1.875rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1.5rem;
+    height: 1.5rem;
+    border: 0;
+    border-radius: .25rem;
+    padding: 0;
+    font: inherit;
+    font-size: 1.125rem;
+    line-height: 1;
+    background: transparent;
+    color: var(--jsl-color-text-muted);
+    cursor: pointer;
+}
+.select-comp .clear-btn:hover:not(:disabled) { background: var(--jsl-color-surface-hover); color: var(--jsl-color-text); }
+.select-comp .clear-btn[hidden] { display: none; }
+.select-comp:is(.disabled, :has(> .sel-expander:disabled)) .sel-expander {
+    background: var(--jsl-color-disabled-surface);
+    color: var(--jsl-color-disabled-text);
+    cursor: not-allowed;
+}
+.select-comp:is(.disabled, :has(> .sel-expander:disabled)) .clear-btn { color: var(--jsl-color-disabled-text); cursor: not-allowed; }
+.select-comp:is(.disabled, :has(> .sel-expander:disabled)) .sel-result,
+.select-comp:is(.disabled, :has(> .sel-expander:disabled)) .sel-chevron { opacity: .65; }
+.select-comp.multiple .sel-result:not(.sel-placeholder) { display: flex; flex-wrap: wrap; gap: .25rem; white-space: normal; }
+.select-comp.multiple .sel-expander { padding-top: .375rem; padding-bottom: .375rem; }
+.sel-chip {
+    display: inline-block;
+    min-width: 0;
+    max-width: 100%;
+    padding: .125rem .4375rem;
+    border-radius: .25rem;
+    background: var(--jsl-color-surface-selected);
+    color: var(--jsl-color-text-secondary);
+    font-size: .75rem;
+    line-height: 1.5;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.sel-chip-count { color: var(--jsl-color-text-muted); background: var(--jsl-color-surface-hover); }
+.sel-comp-dd {
+    position: absolute;
+    z-index: 2200;
+    box-sizing: border-box;
+    overflow: hidden;
+    padding: 4px;
+    border: 1px solid var(--jsl-color-border);
+    border-radius: .625rem;
+    background: var(--jsl-color-surface);
+    color: var(--jsl-color-text);
+    font: inherit;
+    font-size: .875rem;
+    box-shadow: 0 12px 32px rgba(0, 0, 0, .12), 0 2px 6px rgba(0, 0, 0, .06);
+}
+.sel-dd-panel { height: 100%; display: flex; flex-direction: column; min-height: 0; }
+.sel-search { flex: 0 0 44px; padding: 3px 4px 7px; }
+.sel-search[hidden] { display: none; }
+.sel-search input {
+    appearance: none;
+    width: 100%;
+    height: 34px;
+    border: 1px solid var(--jsl-color-border-subtle);
+    border-radius: .375rem;
+    background: var(--jsl-color-surface-subtle);
+    color: var(--jsl-color-text);
+    padding: .375rem .625rem .375rem 2rem;
+    font: inherit;
+    font-size: .8125rem;
+    line-height: 1.4;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='m10.5 10.5 3 3'/%3E%3C/svg%3E");
+    background-position: .625rem center;
+    background-repeat: no-repeat;
+}
+.sel-search input::placeholder { color: var(--jsl-color-text-muted); }
+.sel-search input:focus { outline: 0; border-color: var(--jsl-color-focus); }
+.sel-listbox { position: relative; min-height: 0; flex: 1; outline: none; }
+.sel-comp-dd .sel-dd-items { overscroll-behavior: contain; scrollbar-width: thin; }
+.sel-comp-dd .sel-dd-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 2rem 0 .625rem;
+    border-radius: .375rem;
+    font-size: .8125rem;
+    line-height: 1.4;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
+}
+.sel-comp-dd .sel-dd-item:hover:not(.sel-dd-group) { background: var(--jsl-color-surface-hover); }
+.sel-comp-dd .sel-dd-item.selected { background: var(--jsl-color-surface-selected); }
+.sel-comp-dd .sel-dd-item.focused { outline: 1px solid var(--jsl-color-focus); outline-offset: -2px; }
+.sel-comp-dd .sel-dd-item.selected::after {
+    content: "";
+    position: absolute;
+    right: .875rem;
+    width: 5px;
+    height: 9px;
+    border: solid var(--jsl-color-text);
+    border-width: 0 1.5px 1.5px 0;
+    transform: rotate(45deg) translateY(-2px);
+}
+.sel-comp-dd .multiple .sel-dd-item:not(.sel-dd-group) { padding-left: 2rem; padding-right: .625rem; }
+.sel-comp-dd .multiple .sel-dd-item:not(.sel-dd-group)::before {
+    content: "";
+    position: absolute;
+    left: .625rem;
+    width: 14px;
+    height: 14px;
+    border: 1px solid var(--jsl-color-border);
+    border-radius: .25rem;
+    background: var(--jsl-color-surface);
+}
+.sel-comp-dd .multiple .sel-dd-item.selected::before { border-color: var(--jsl-color-accent); background: var(--jsl-color-accent); }
+.sel-comp-dd .multiple .sel-dd-item.selected::after { left: .875rem; right: auto; width: 4px; height: 7px; border-color: var(--jsl-color-on-accent); }
+.sel-comp-dd .sel-dd-group {
+    padding: 0 .625rem;
+    color: var(--jsl-color-text-muted);
+    font-size: .6875rem;
+    font-weight: 600;
+    cursor: default;
+}
+.sel-empty { padding: 1.25rem .625rem; color: var(--jsl-color-text-muted); font-size: .8125rem; text-align: center; }
+.sel-empty[hidden] { display: none; }
+.sel-dd-animate { animation: jsl-select-appear .12s ease-out; }
+@keyframes jsl-select-appear { from { opacity: 0; } to { opacity: 1; } }
+@media (prefers-reduced-motion: reduce) {
+    .sel-dd-animate { animation: none; }
+    .select-comp .sel-expander { transition: none; }
+}
+@media (forced-colors: active) {
+    .sel-comp-dd .sel-dd-item.selected { outline: 2px solid Highlight; outline-offset: -2px; }
+    .sel-chip { border: 1px solid ButtonText; }
 }
-
-.sel-comp-dd {
-    position: absolute;
-    // overflow: hidden;
-    box-sizing: border-box;
-    background: white;
-    z-index:2010;
-
-    > div {
-        position: absolute;
-        top: 0; left: 0; right: 0; bottom: 0;
-        box-sizing: border-box;
-        border: solid 1px #bcbcbc;
-        border-radius: 2px;
-        white-space: nowrap;
-        overflow: hidden;
-        cursor: pointer;
-    }
-
-    .sel-search {
-        height: 1.8rem;
-        padding: 0.1rem;
-        overflow: hidden;
-        box-sizing: border-box;
-    }
-
-    .sel-search > input {
-        height: 1.6rem;
-        line-height: 1.6rem;
-        border: none;
-        border-bottom: 2px solid #c8c8c8;
-        margin: 0 2px;
-        width: calc(100% - 4px);
-        box-sizing: border-box;
-        
-        &:focus {
-            outline: none;
-        }
-    }
-
-    .sel-dd-item:not(.sel-dd-group) {
-        &:hover {
-            background: #d0d0d0;
-        }
-    }
-
-    .sel-dd-items {
-
-        .focused {
-            background: #CCE8FF;
-        }
-        .selected {
-            background: #3B99FF;
-        }
-    }
-
-    .sel-dd-items.multiple {
-        .sel-dd-item {
-            padding-left: 1rem;
-        }
-        .sel-dd-item.selected {
-            // padding-left: 0;
-            &::before {
-                content: "✓";
-                position: absolute;
-                color: #404040;
-                font-weight: bold;
-                left: 0;
-            }
-        }
-    }
-
-    .sel-dd-item {
-        height: 100%;
-        line-height: 26px;
-    }
-
-    .sel-dd-group {
-        font-weight: bold;
-        background: #e0e0e0;
-        text-align: center;
-        // &:hover {
-        //     background: #d0d0d0;
-        // }
-    }
-}

package/lib/components/slider/nouislider.css

@@ -1,3 +1,5 @@
+@import "../../ui/theme.css";
+
 /*! nouislider - 14.6.0 - 6/27/2020 */
 /* Functional styling;
  * These styles are required for noUiSlider to function.
@@ -88,41 +90,41 @@
 /* Slider size and handle placement;
  */
 .noUi-horizontal {
-  height: 18px;
+  height: 6px;
 }
 .noUi-horizontal .noUi-handle {
-  width: 34px;
-  height: 28px;
-  right: -17px;
+  width: 18px;
+  height: 18px;
+  right: -9px;
   top: -6px;
 }
 .noUi-vertical {
-  width: 18px;
+  width: 6px;
 }
 .noUi-vertical .noUi-handle {
-  width: 28px;
-  height: 34px;
+  width: 18px;
+  height: 18px;
   right: -6px;
-  top: -17px;
+  top: -9px;
 }
 .noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
-  left: -17px;
+  left: -9px;
   right: auto;
 }
 /* Styling;
  * Giving the connect element a border radius causes issues with using transform: scale
  */
 .noUi-target {
-  background: #FAFAFA;
-  border-radius: 4px;
-  border: 1px solid #D3D3D3;
-  box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
+  background: var(--jsl-slider-track, var(--jsl-color-border-subtle));
+  border-radius: 999px;
+  border: 0;
+  box-shadow: none;
 }
 .noUi-connects {
   border-radius: 3px;
 }
 .noUi-connect {
-  background: #3B99FF;
+  background: var(--jsl-slider-connect, var(--jsl-color-accent));
 }
 /* Handles and cursors;
  */
@@ -133,45 +135,19 @@
   cursor: ns-resize;
 }
 .noUi-handle {
-  border: 1px solid #D9D9D9;
-  border-radius: 3px;
-  background: #FFF;
+  border: 2px solid var(--jsl-color-accent);
+  border-radius: 50%;
+  background: var(--jsl-color-surface);
   cursor: default;
-  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
 }
 .noUi-active {
-  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
-}
-/* Handle stripes;
- */
-.noUi-handle:before,
-.noUi-handle:after {
-  content: "";
-  display: block;
-  position: absolute;
-  height: 14px;
-  width: 1px;
-  background: #E8E7E6;
-  left: 14px;
-  top: 6px;
-}
-.noUi-handle:after {
-  left: 17px;
-}
-.noUi-vertical .noUi-handle:before,
-.noUi-vertical .noUi-handle:after {
-  width: 14px;
-  height: 1px;
-  left: 6px;
-  top: 14px;
-}
-.noUi-vertical .noUi-handle:after {
-  top: 17px;
+  border-color: var(--jsl-color-accent);
 }
 /* Disabled state;
  */
 [disabled] .noUi-connect {
-  background: #B8B8B8;
+  background: var(--jsl-color-disabled-text);
 }
 [disabled].noUi-target,
 [disabled].noUi-handle,
@@ -188,7 +164,7 @@
 }
 .noUi-pips {
   position: absolute;
-  color: #999;
+  color: var(--jsl-color-text-muted);
 }
 /* Values;
  *
@@ -199,7 +175,7 @@
   text-align: center;
 }
 .noUi-value-sub {
-  color: #ccc;
+  color: var(--jsl-color-text-muted);
   font-size: 10px;
 }
 /* Markings;
@@ -207,13 +183,13 @@
  */
 .noUi-marker {
   position: absolute;
-  background: #CCC;
+  background: var(--jsl-color-border);
 }
 .noUi-marker-sub {
-  background: #AAA;
+  background: var(--jsl-color-border);
 }
 .noUi-marker-large {
-  background: #AAA;
+  background: var(--jsl-color-border);
 }
 /* Horizontal layout;
  *
@@ -276,10 +252,10 @@
 .noUi-tooltip {
   display: block;
   position: absolute;
-  border: 1px solid #D9D9D9;
+  border: 1px solid var(--jsl-color-border);
   border-radius: 3px;
-  background: #fff;
-  color: #000;
+  background: var(--jsl-color-surface);
+  color: var(--jsl-color-text);
   padding: 5px;
   text-align: center;
   white-space: nowrap;
@@ -308,3 +284,13 @@
   top: auto;
   right: 28px;
 }
+
+/* Larger interaction targets without changing slider geometry. */
+.noUi-touch-area { position: absolute; inset: -6px; width: auto; height: auto; }
+.noUi-base::before { content: ""; position: absolute; inset: -10px 0; }
+.noUi-vertical .noUi-base::before { inset: 0 -10px; }
+.noUi-handle { cursor: grab; }
+.noUi-handle:active { cursor: grabbing; }
+.noUi-handle:focus-visible { outline: 2px solid var(--jsl-color-focus); outline-offset: 3px; }
+[disabled] .noUi-handle, .noUi-handle[disabled] { border-color: var(--jsl-color-disabled-text); background: var(--jsl-color-disabled-surface); }
+.noUi-tooltip { font: inherit; font-size: 0.75rem; border-radius: 0.375rem; padding: 4px 8px; }

package/lib/components/stack-panel/SplitterComponent.d.ts

@@ -6,16 +6,32 @@ export interface ISplitterComponentOptions {
     maxSizesInPX?: number[];
     onResize?: EventHandler<void>;
     onResizeDone?: EventHandler<ISplitterDoneArgs>;
+    ariaLabel?: string;
 }
 export interface ISplitterDoneArgs {
     size1InPX?: number;
 }
 export declare class SplitterComponent implements IJSLComponent {
-    private static listenerRegistered;
-    _is_splitter: boolean;
     private options;
+    _is_splitter: boolean;
+    State: {
+        dom?: HTMLElement;
+        drag?: {
+            id: number;
+            start: number;
+            first: number;
+            total: number;
+        };
+    };
     constructor(options?: ISplitterComponentOptions);
     isEqual(node: IJSLComponent): boolean;
     render(): IJSLVNode;
-    private registerListener;
+    onCreate(node: IJSLVNode): void;
+    onRemove(): void;
+    private vertical;
+    private panels;
+    private size;
+    private resize;
+    private updateAria;
+    private finish;
 }