jsl-ui 10.0.0 → 10.0.2

package/docs/ButtonComponent.md

@@ -12,3 +12,11 @@ const bookmark = new ButtonComponent({
 - Set `type: "button"` for actions inside forms; omitting it retains native submit behavior.
 - `pressed` is the initial state. Afterwards, use `bookmark.pressed`; assigning it does not raise callbacks.
 - Icon strings are literal text, not HTML or icon-library class names. Supply a VNode/component for markup; name icon-only buttons with `ariaLabel` or hidden `content`.
+- Manual markup uses the same styles; load `jsl-ui/lib/ui/button.css` when not importing components:
+
+```html
+<button type="button" class="jsl-button jsl-button-outline">View projects</button>
+<a href="/projects" class="jsl-button jsl-button-outline">View projects</a>
+```
+
+- Use links for navigation and buttons for actions. Disable buttons with native `disabled`; for links, use `aria-disabled="true"` for styling and omit `href` or prevent activation yourself. Manual toggles need their own event handler to update `aria-pressed`.

package/examples/showcase/grids.ts

@@ -1,9 +1,14 @@
 import { IJSLVNode, JSLRender } from "jsl-render";
 import { GridComponent } from "../../components/grid/GridComponent";
 import { ISlickColumn } from "../../grid/slick.core";
-import { TextEditor, NumericEditor, BooleanEditor } from "../../grid/slick.editors.core";
-import { DateEditor } from "../../grid/slick.editors.date";
-import { DateFormatter, NumericFormatter, CheckboxFormatter } from "../../grid/slick.formatters";
+import { TextEditor, MultiLineTextEditor, NumericEditor, BooleanEditor } from "../../grid/slick.editors.core";
+import { DateEditor, TimeEditor } from "../../grid/slick.editors.date";
+import { AutoSuggestEditor, LookupEditor, MultiLookupEditor } from "../../grid/slick.editors.lookup";
+import {
+    CheckboxFormatter, DateFormatter, DateTimeFormatter, LookupFormatter,
+    MultiLineTextFormatter, MultiLookupFormatter, NumericFormatter, TextFormatter, TimeFormatter,
+    TooltipFormatter, YesNoFormatter
+} from "../../grid/slick.formatters";
 import { ButtonComponent } from "../../components/button/ButtonComponent";
 import { numeric } from "../../core/numeric";
 
@@ -44,6 +49,66 @@ editable.initEvents(grid => grid.onAfterEdit.subscribe((_event, args) => {
     // Grid events run independently of the showcase renderer.
     JSLRender.lastCreatedRenderer?.refresh();
 }));
+
+interface EditorSample {
+    id: number;
+    title: string;
+    notes: string;
+    amount: number;
+    start: Date;
+    startTime: string;
+    meeting: Date;
+    approved: boolean;
+    completed: boolean;
+    status: string;
+    tags: string[];
+    owner: string;
+    detail: string;
+}
+const editorValueList = [
+    { text: "Planning", value: "planning" },
+    { text: "In progress", value: "in-progress" },
+    { text: "In review", value: "in-review" },
+    { text: "Complete", value: "complete" }
+];
+const editorSamples: EditorSample[] = Array.from({ length: 8 }, (_, index) => ({
+    id: index + 1,
+    title: ["Design system", "Website refresh", "Customer research", "Mobile workspace"][index % 4],
+    notes: ["Review the latest proposal", "Collect feedback from the team", "Prepare the next milestone"][index % 3],
+    amount: 1250 + index * 175.5,
+    start: new Date(2026, 9, 2 + index),
+    startTime: ["09:00", "10:30", "13:15", "15:45"][index % 4],
+    meeting: new Date(2026, 9, 2 + index, 9 + index % 8, 30),
+    approved: index % 2 === 0,
+    completed: index % 3 === 0,
+    status: ["planning", "in-progress", "in-review", "complete"][index % 4],
+    tags: index % 2 === 0 ? ["Design", "Internal"] : ["Customer", "Research"],
+    owner: ["Alex Morgan", "Sam Weber", "Jordan Lee", "Robin Taylor"][index % 4],
+    detail: "Updated by the project team. Hover this cell to see the full tooltip text."
+}));
+const editorSampleColumns: ISlickColumn[] = [
+    { id: "title", name: "Text", width: 155, formatter: TextFormatter, editor: TextEditor },
+    { id: "notes", name: "Multiline text", width: 185, formatter: MultiLineTextFormatter, editor: MultiLineTextEditor },
+    { id: "amount", name: "Number", width: 115, headerCssClass: "right", formatter: NumericFormatter, format: "#,0.00", editor: NumericEditor },
+    { id: "start", name: "Date", width: 125, formatter: DateFormatter, editor: DateEditor },
+    { id: "startTime", name: "Time input", width: 115, formatter: TextFormatter, editor: TimeEditor },
+    { id: "meeting", name: "Time display", width: 110, formatter: TimeFormatter },
+    { id: "meetingDateTime", field: "meeting", name: "Date & time", width: 165, formatter: DateTimeFormatter },
+    { id: "approved", name: "Checkbox", width: 100, headerCssClass: "center", formatter: CheckboxFormatter, editor: BooleanEditor },
+    { id: "completed", name: "Yes / no", width: 95, formatter: YesNoFormatter, editor: BooleanEditor },
+    { id: "status", name: "Lookup", width: 130, formatter: LookupFormatter, valueList: editorValueList, editor: LookupEditor },
+    { id: "tags", name: "Multi-lookup", width: 175, formatter: MultiLookupFormatter, valueList: ["Design", "Internal", "Customer", "Research"], editor: MultiLookupEditor },
+    { id: "owner", name: "Autosuggest", width: 145, formatter: LookupFormatter, valueList: ["Alex Morgan", "Sam Weber", "Jordan Lee", "Robin Taylor"], editor: AutoSuggestEditor },
+    { id: "detail", name: "Tooltip", width: 230, formatter: TooltipFormatter, editor: TextEditor }
+];
+const editorCatalog = new GridComponent(editorSamples, editorSampleColumns, {
+    primaryKey: "id", editable: true, autoEdit: false, rowHeight: 38
+}, "340px");
+const editorCatalogStatus: IJSLVNode = { tag: "p", content: "Double-click a cell or press F2 to edit. Enter commits; Escape cancels.", attr: { role: "status", class: "sample-status" } };
+editorCatalog.initEvents(grid => grid.onAfterEdit.subscribe((_event, args) => {
+    editorCatalogStatus.content = "Updated " + args.column.name + " for sample " + args.item.id + ".";
+    JSLRender.lastCreatedRenderer?.refresh();
+}));
 const grouped = new GridComponent(data(45), columns(), { primaryKey: "id" }, "320px");
 grouped.initEvents(grid => grid.dataView.setGrouping({
     getter: "team", formatter: group => group.value + " · " + group.count + " projects", aggregators: [], displayTotalsRow: false
@@ -123,11 +188,12 @@ export const gridShowcase: IJSLVNode = {
         { tag: "div", attr: { class: "hero-copy" }, children: [
             { tag: "p", content: "THE ESSENTIALS / 22", attr: { class: "eyebrow" } },
             { tag: "h2", content: "Grids", attr: { id: "grids-title", class: "section-title" } },
-            text("p", "Representative data, editing, grouping, and scrolling examples for the grid redesign.")
+            text("p", "Representative data, formatting, editing, grouping, and scrolling examples for the grid redesign.")
         ] },
         { tag: "div", attr: { class: "grid-samples" }, children: [
             card("grid-basic", "Browse and sort", "30 projects. Click a heading to sort, then Shift-click other headings to add sort levels. Numbers show sorting priority. Select rows and resize or reorder columns.", basic),
             card("grid-editable", "Edit in place", "Double-click an editable cell or press F2. Enter commits and Escape cancels. Editors retain their existing behavior and styling in this step.", editable, [edits]),
+            card("grid-editors-formatters", "Formatters and editors", "Try text, multiline, numeric, date, time, boolean, lookup, multi-lookup, and autosuggest editors. The adjacent columns demonstrate the matching display formatters; TimeFormatter displays a Date value, while TimeEditor edits a time string.", editorCatalog, [editorCatalogStatus]),
             card("grid-grouped", "Grouped projects", "45 projects grouped by team. Expand and collapse groups independently.", grouped, [
                 { tag: "div", attr: { class: "sample-row" }, children: [
                     action("Collapse groups", () => { grouped.getRef().then(grid => grid.dataView.collapseAllGroups()); }),
@@ -144,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. Editors, 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/package.json

@@ -0,0 +1,10 @@
+{
+  "private": true,
+  "source": "index.html",
+  "targets": {
+    "showcase": {
+      "context": "browser",
+      "distDir": "../../dist/showcase"
+    }
+  }
+}

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/examples/showcase/showcase.ts

@@ -150,7 +150,13 @@ const cards = [
                 button({ content: "Save changes", icon: icon("check"), click: () => { saveStatus.content = "All changes saved."; } })
             ], "context-footer")
         ], "context-panel"),
-        node("p", "The same styles also apply to vanilla buttons using .jsl-button.", "inline-note")
+        node("p", "The same classes style component buttons, manual buttons, and links.", "inline-note"),
+        ...["", " jsl-button-outline", " jsl-button-ghost"].map(variant => group([
+            button({ content: "View projects", variant: variant.includes("outline") ? "outline" : variant.includes("ghost") ? "ghost" : "solid" }),
+            { tag: "button", attr: { type: "button", class: "jsl-button" + variant }, content: "View projects" },
+            { tag: "a", attr: { href: "#grids", class: "jsl-button" + variant }, content: "View projects" }
+        ])),
+        node("p", "Each row shows a ButtonComponent, a manual <button>, and an <a> link.", "inline-note")
     ]),
     card("customization", "07", "Make it yours", "Custom content and application colors still fit the same button API.", [
         group([

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

@@ -62,6 +62,32 @@ classes should alter those!
   padding-right: 4px;
 }
 
+/* The themed Select control has a comfortable form-field minimum height.
+   In a grid editor it must fit the row instead of imposing that height. */
+.slick-cell.editable .select-comp {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  max-width: none;
+}
+
+.slick-cell.editable .select-comp > .sel-expander {
+  height: 100%;
+  min-height: 0;
+  padding: 0 0.5rem;
+  border-radius: 0.25rem;
+}
+
+.slick-cell.editable .select-comp.multiple > .sel-expander {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.slick-cell.editable .select-comp .sel-chip {
+  padding: 0.0625rem 0.375rem;
+  font-size: 0.6875rem;
+}
+
 .slick-group {
   border-bottom: 2px solid var(--jsl-color-border-subtle);
 }
@@ -183,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,
@@ -195,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,