jsl-ui 10.0.1 → 10.0.3

package/examples/showcase/grids.ts

@@ -210,7 +210,7 @@ export const gridShowcase: IJSLVNode = {
         { tag: "details", attr: { class: "usage" }, children: [
             text("summary", "Grid showcase scope"),
             text("p", 'NumericFormatter supplies right-aligned cells; NumericFormatter and DateFormatter apply tabular numerals. Set headerCssClass: "right" or "center" explicitly to match a column’s content. Header alignment is never inferred from its formatter.'),
-            text("p", "These examples use the existing GridComponent constructor, column definitions, editors, and DataView APIs. The default row height is 36 px; rowHeight can retain a different density. Core presentation follows the shared theme and inherits the host's typography. Filter dialogs, menus, and lifecycle behavior are reserved for later steps.")
+            text("p", "These examples use the existing GridComponent constructor, column definitions, editors, and DataView APIs. The default row height is 40 px; rowHeight can retain a different density. Column headers fit up to two lines. Core presentation follows the shared theme and inherits the host's typography. Filter dialogs, menus, and lifecycle behavior are reserved for later steps.")
         ] }
     ]
 };

package/examples/showcase/showcase.css

@@ -8,7 +8,42 @@
     -webkit-font-smoothing: antialiased;
 }
 
-* { box-sizing: border-box; }
+/* Keep the showcase layout predictable without resetting sizing on library DOM.
+   Grid cells and component internals should exercise their own box model. */
+:where(
+    .skip-link, .sidebar, .brand, .brand-caption, .brand-mark, .nav-label, .nav-item,
+    .nav-number, .nav-icon, .sidebar-note, .status-dot, main, .page-meta, .page-tools,
+    .theme-picker, .version, .hero, .eyebrow, .hero-preview, .preview-caption,
+    .preview-note, .hero-description, .overview-bar, .overview-label, .overview-stat,
+    .sample-grid, .sample-card, .card-heading, .sample-number, .card-description,
+    .sample-row, .sample-status, .sample-code, .inline-note, .showcase-icon,
+    .format-bold, .format-italic, .format-underline, .sample-divider, .size-row,
+    .size-sample, .size-caption, .context-panel, .context-body, .context-eyebrow,
+    .context-copy, .context-footer, .count-badge, .usage, .page-footer,
+    .component-section, .showcase-dialog-copy, .dialog-summary, .dialog-summary-label,
+    .dialog-form-field, .dialog-member, .dialog-member-avatar, .dialog-member-role,
+    .dialog-help, .dialog-check, .tabs-example-copy, .tabs-draft-input,
+    .tabs-example-check, .tabs-header-badge, .tabs-rich-header, .date-hero-preview,
+    .date-showcase-field, .slider-sample, .showcase-slider, .slider-readout,
+    .slider-with-tooltip, .slider-orientations, .showcase-slider-vertical,
+    .slider-disabled-example, .showcase-calendar, .select-showcase-field,
+    .select-hero-preview, .select-person, .select-person-avatar, .select-person-copy,
+    .checks-expander-preview, .checkbox-stack, .checkbox-child-list,
+    .expander-example-copy, .expander-preview-copy, .expander-rich-header,
+    .expander-stack, .expander-custom-icon, .fields-preview, .field-sample,
+    .unstyled-input-sample, .showcase-inline-input, .composed-fields,
+    .notification-samples, .notification-action-copy, .loading-label-samples,
+    .loading-demo, .loading-demo-panel, .navigation-preview,
+    .navigation-compact-sample, .navigation-rich-brand, .navigation-brand-mark,
+    .remaining-demo, .layout-demo-panel, .tree-demo-content, .grid-samples,
+    .grid-sample-card, .grid-sample-host, .format-preview
+) { box-sizing: border-box; }
+
+/* Showcase-owned native controls also keep the page's intended dimensions. */
+.theme-picker select, .dialog-form-field input, .dialog-form-field textarea,
+.dialog-check input, .tabs-draft-input, .tabs-example-check input {
+    box-sizing: border-box;
+}
 body { margin: 0; font-size: 14px; line-height: 1.6; }
 a { color: inherit; }
 .skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 5; padding: 0.5rem 1rem; background: var(--jsl-color-surface); }
@@ -219,7 +254,7 @@ h2 { font-size: 14px; font-weight: 600; margin: 0; letter-spacing: -0.15px; }
 .navigation-brand-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--jsl-color-accent); color: var(--jsl-color-on-accent); font-size: 12px; }
 .remaining-demo { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }
 .remaining-demo h3 { margin: 0; font-size: 14px; font-weight: 600; }
-.layout-demo-panel { padding: 16px; background: var(--jsl-color-surface); color: var(--jsl-color-text); overflow: auto; height: 100%; box-sizing: border-box; }
+.layout-demo-panel { padding: 16px; background: var(--jsl-color-surface); color: var(--jsl-color-text); overflow: auto; height: 100%; }
 .layout-demo-panel p { color: var(--jsl-color-text-secondary); font-size: 13px; line-height: 1.6; }
 .tree-demo-content { display: flex; align-items: center; gap: 8px; }
 .grid-samples { display: flex; flex-direction: column; gap: 24px; margin: 24px 0; }

package/lib/components/checkbox/CheckBoxStyle.scss

@@ -7,7 +7,7 @@
     max-width: 100%;
     color: var(--jsl-color-text);
     font: inherit;
-    font-size: .875rem;
+    // font-size: .875rem;
     line-height: 1.5;
     vertical-align: middle;
 }
@@ -70,4 +70,4 @@
 @media (forced-colors: active) {
     .checkbox-comp { appearance: auto; }
     .checkbox-comp::after { display: none; }
-}
+}

package/lib/components/expander/ExpanderStyle.scss

@@ -8,7 +8,7 @@
     background: var(--jsl-color-surface);
     color: var(--jsl-color-text);
     font: inherit;
-    font-size: .875rem;
+    // font-size: .875rem;
     line-height: 1.5;
 }
 .expander-comp > .header {
@@ -58,4 +58,4 @@
 .expander-comp.disabled > .header { color: var(--jsl-color-disabled-text); cursor: default; background: var(--jsl-color-disabled-surface); }
 .expander-comp > .header > .toggler:disabled { color: var(--jsl-color-disabled-text); cursor: not-allowed; }
 @keyframes jsl-expander-appear { from { opacity: 0; } to { opacity: 1; } }
-@media (prefers-reduced-motion: reduce) { .expander-comp.expanded > .body { animation: none; } }
+@media (prefers-reduced-motion: reduce) { .expander-comp.expanded > .body { animation: none; } }

package/lib/components/form-field/FormFieldStyle.scss

@@ -10,7 +10,7 @@
     margin: 0 0 1rem;
     color: var(--jsl-color-text);
     font: inherit;
-    font-size: .875rem;
+    // font-size: .875rem;
 }
 .form-field__label { display: block; color: var(--jsl-color-text-secondary); font-size: .75rem; font-weight: 500; line-height: 1.5; }
 .form-field__required { color: var(--jsl-color-text-muted); }
@@ -33,4 +33,4 @@
     padding: 0 .25rem;
     background: var(--jsl-color-surface);
 }
-.form-field:has(.form-field__control:disabled) > .form-field__label { color: var(--jsl-color-disabled-text); }
+.form-field:has(.form-field__control:disabled) > .form-field__label { color: var(--jsl-color-disabled-text); }

package/lib/components/select/SelectStyle.scss

@@ -11,7 +11,7 @@
     vertical-align: middle;
     color: var(--jsl-color-text);
     font: inherit;
-    font-size: .875rem;
+    // font-size: .875rem;
 }
 .select-comp *, .sel-comp-dd * { box-sizing: border-box; }
 .select-comp .sel-expander {
@@ -118,7 +118,7 @@
     background: var(--jsl-color-surface);
     color: var(--jsl-color-text);
     font: inherit;
-    font-size: .875rem;
+    // 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; }
@@ -202,4 +202,4 @@
 @media (forced-colors: active) {
     .sel-comp-dd .sel-dd-item.selected { outline: 2px solid Highlight; outline-offset: -2px; }
     .sel-chip { border: 1px solid ButtonText; }
-}
+}

package/lib/components/tree-view/TreeViewStyle.scss

@@ -1,5 +1,7 @@
 @import "../../ui/theme.css";
-.treeview-comp { color: var(--jsl-color-text); font: inherit; font-size: .875rem; line-height: 1.5; }
+.treeview-comp { color: var(--jsl-color-text); font: inherit; 
+    // font-size: .875rem;
+    line-height: 1.5; }
 .treeview-comp .tv-ul { list-style: none; padding: 0; margin: 0; }
 .treeview-comp .tv-ul .tv-ul { margin-left: 1rem; padding-left: .5rem; border-left: 1px solid var(--jsl-color-border-subtle); }
 .treeview-comp [hidden] { display: none; }
@@ -9,4 +11,4 @@
 .tv-row:focus-visible { outline: 2px solid var(--jsl-color-focus); outline-offset: -2px; }
 .tv-chevron { flex: 0 0 .375rem; width: .375rem; height: .375rem; border-right: 1.5px solid var(--jsl-color-text-muted); border-bottom: 1.5px solid var(--jsl-color-text-muted); transform: rotate(-45deg); margin-right: .25rem; }
 .tv-row[aria-expanded=true] > .tv-chevron { transform: translateY(-.125rem) rotate(45deg); }
-.tv-leaf { border-color: transparent; }
+.tv-leaf { border-color: transparent; }

package/lib/grid/slick-default-theme.css

@@ -209,9 +209,12 @@ classes should alter those!
   margin-bottom: 0;
   display: inline-block;
   max-width: 100%;
+  max-height: 2.4em;
   overflow: hidden;
   text-overflow: ellipsis;
-  vertical-align: top;
+  white-space: normal;
+  line-height: 1.2;
+  vertical-align: middle;
 }
 .slick-header-sortable .slick-column-name { max-width: calc(100% - 1.25rem); }
 .slick-header-column .slick-sort-indicator,
@@ -221,8 +224,8 @@ classes should alter those!
   position: relative;
   vertical-align: top;
   margin: 0 0 0 .375rem;
-  height: var(--jsl-grid-header-height, 26px);
-  line-height: var(--jsl-grid-header-height, 26px);
+  height: var(--jsl-grid-header-height, 40px);
+  line-height: var(--jsl-grid-header-height, 40px);
   color: var(--jsl-color-accent);
 }
 .slick-header-column .slick-sort-indicator { width: .65rem; }

package/lib/grid/slick.grid.css

@@ -46,10 +46,10 @@ classes should alter those!
   float: left;
 }
 
-/* Column headers are 6px taller; grouped headers retain their existing size. */
+/* Column headers fit up to two lines; grouped headers retain their existing size. */
 .slick-header-column.ui-state-default {
-  height: var(--jsl-grid-header-height, 26px);
-  line-height: var(--jsl-grid-header-height, 26px);
+  height: var(--jsl-grid-header-height, 40px);
+  line-height: var(--jsl-grid-header-height, 40px);
 }
 
 .slick-footerrow-column.ui-state-default {

package/lib/grid/slick.grid.js

@@ -28,7 +28,7 @@ export function SlickGrid(container, data, columns, options) {
         alwaysShowHorizontalScroll: false,
         alwaysAllowHorizontalScroll: false,
         explicitInitialization: false,
-        rowHeight: 36,
+        rowHeight: 40,
         defaultColumnWidth: 80,
         enableAddRow: false,
         leaveSpaceForNewRows: false,