jsl-ui 9.28.7 → 10.0.0

package/examples/showcase/showcase.ts

@@ -0,0 +1,214 @@
+import "../../ui/base.css";
+import "./cultures";
+import { gridShowcase } from "./grids";
+import "./themes";
+import { dialogShowcase } from "./dialogs";
+import { tabsShowcase } from "./tabs";
+import { selectShowcase } from "./selects";
+import { checkboxShowcase, expanderShowcase } from "./checks-and-expanders";
+import { inputShowcase, numberShowcase, formFieldShowcase } from "./fields";
+import { notificationShowcase, loadingShowcase, navigationShowcase } from "./feedback-and-navigation";
+import { progressShowcase, stackShowcase, treeShowcase, overlayShowcase, ribbonShowcase } from "./layout-and-navigation";
+import { sliderShowcase, dateShowcase, dateRangeShowcase, dateTimeShowcase } from "./dates";
+import { IJSLComponent, IJSLVNode, JSLRender } from "jsl-render";
+import { ButtonComponent, IButtonOptions } from "../../components/button/ButtonComponent";
+
+// Add each redesigned component as a section below, with its own navigation entry.
+type Content = IJSLVNode | IJSLComponent;
+const node = (tag: string, content: string, className?: string): IJSLVNode => ({
+    tag, content, attr: { class: className }
+});
+const group = (children: Content[], className = "sample-row"): IJSLVNode => ({
+    tag: "div", attr: { class: className }, children
+});
+const button = (options: IButtonOptions) => new ButtonComponent({ type: "button", ...options });
+
+// Self-contained sample icons. Applications can supply their own VNodes, images,
+// icon components, or plain strings; ButtonComponent has no icon-library dependency.
+const paths = {
+    plus: '<path d="M12 5v14M5 12h14"/>',
+    arrow: '<path d="M5 12h14m-6-6 6 6-6 6"/>',
+    download: '<path d="M12 3v12m-5-5 5 5 5-5M5 16v4h14v-4"/>',
+    refresh: '<path d="M20 7v5h-5M4 17v-5h5M6 7a7 7 0 0 1 12-1l2 6M4 12l2 6a7 7 0 0 0 12-1"/>',
+    more: '<circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/>',
+    bookmark: '<path d="M6 3h12v18l-6-4-6 4z"/>',
+    check: '<path d="m5 12 4 4L19 6"/>'
+};
+function icon(name: keyof typeof paths): IJSLVNode {
+    const svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">' + paths[name] + '</svg>';
+    const url = 'url("data:image/svg+xml,' + encodeURIComponent(svg) + '")';
+    return { tag: "span", attr: { class: "showcase-icon", style: "mask-image:" + url + ";-webkit-mask-image:" + url } };
+}
+
+function card(id: string, number: string, title: string, description: string, children: Content[]): IJSLVNode {
+    return {
+        tag: "article", attr: { class: "sample-card", id, "aria-labelledby": id + "-title" },
+        children: [
+            group([node("span", number, "sample-number"), { tag: "h2", content: title, attr: { id: id + "-title" } }], "card-heading"),
+            node("p", description, "card-description"),
+            ...children
+        ]
+    };
+}
+
+const actionStatus = node("p", "Choose an action to try it.", "sample-status");
+actionStatus.attr.role = "status";
+const action = (text: string) => () => { actionStatus.content = text; };
+
+const toggleStatus = node("p", "No formatting selected.", "sample-status");
+toggleStatus.attr.role = "status";
+const formatting: ButtonComponent[] = [];
+const labels = ["Bold", "Italic", "Underline"];
+const updateFormatting = () => {
+    const selected = labels.filter((_, index) => formatting[index].pressed);
+    toggleStatus.content = selected.length ? "Selected: " + selected.join(", ") + "." : "No formatting selected.";
+};
+labels.forEach((label, index) => formatting.push(button({
+    content: label,
+    icon: { tag: "span", content: label[0], attr: { class: ["format-bold", "format-italic", "format-underline"][index] } },
+    iconOnly: true, outlined: true, title: label, toggle: true, onToggle: updateFormatting
+})));
+
+const bookmarkStatus = node("p", "Save this view for later.", "sample-status");
+bookmarkStatus.attr.role = "status";
+const bookmark = button({
+    content: "Save view", icon: icon("bookmark"), variant: "outline", toggle: true,
+    onToggle: pressed => { bookmarkStatus.content = pressed ? "View saved. Click again to remove it." : "Save this view for later."; }
+});
+
+const saveStatus = node("p", "Your changes are ready to save.", "context-copy");
+saveStatus.attr.role = "status";
+
+const cards = [
+    card("hierarchy", "01", "A clear hierarchy", "Three treatments for primary, secondary, and quieter actions.", [
+        group([
+            button({ content: "Save changes", click: action("Changes saved.") }),
+            button({ content: "Cancel", outlined: true, click: action("Action cancelled.") }),
+            button({ content: "Learn more", variant: "ghost", click: action("Choose solid for the main action, outline for alternatives, and ghost for quieter actions.") })
+        ]), actionStatus,
+        node("pre", 'new ButtonComponent({ content: "Save changes" })', "sample-code")
+    ]),
+    card("icons", "02", "Icons, with or without text", "Bring your own icons. Place them before or after the label.", [
+        group([
+            button({ content: "Create project", icon: icon("plus"), click: action("Project created.") }),
+            button({ content: "Download", icon: icon("download"), outlined: true, click: action("Download action clicked.") }),
+            button({ content: "Continue", icon: icon("arrow"), iconPosition: "end", variant: "ghost", click: action("Continue action clicked.") })
+        ]),
+        group([
+            button({ icon: icon("plus"), ariaLabel: "Add item", title: "Add item", click: action("Item added.") }),
+            button({ icon: icon("refresh"), ariaLabel: "Refresh", title: "Refresh", outlined: true, click: action("View refreshed.") }),
+            button({ icon: icon("more"), ariaLabel: "More options", title: "More options", variant: "ghost", click: action("More options action clicked.") }),
+            node("span", "Icon-only buttons have accessible names.", "inline-note")
+        ]),
+        node("pre", '{ icon: myIcon, ariaLabel: "Add item" }', "sample-code")
+    ]),
+    card("toggles", "03", "Actions that stay selected", "Toggle buttons expose their state to assistive technology. Try a few.", [
+        { tag: "div", attr: { class: "sample-row", role: "group", "aria-label": "Text formatting" }, children: [
+            ...formatting,
+            node("span", "", "sample-divider"),
+            button({ content: "Reset", variant: "ghost", click: () => {
+                formatting.forEach(item => { item.pressed = false; });
+                updateFormatting();
+            } })
+        ] },
+        toggleStatus,
+        group([bookmark]), bookmarkStatus,
+        node("pre", '{ toggle: true, pressed: false, onToggle: pressed => { … } }', "sample-code")
+    ]),
+    card("sizes", "04", "The right amount of space", "Compact controls for toolbars, comfortable actions for forms.", [
+        group([
+            group([button({ content: "Small", icon: icon("plus"), size: "small" }), node("span", "28 px", "size-caption")], "size-sample"),
+            group([button({ content: "Medium", icon: icon("plus") }), node("span", "32 px · default", "size-caption")], "size-sample"),
+            group([button({ content: "Large", icon: icon("plus"), size: "large" }), node("span", "40 px", "size-caption")], "size-sample")
+        ], "sample-row size-row"),
+        group([
+            button({ icon: icon("plus"), ariaLabel: "Small add", title: "Small add", size: "small", outlined: true }),
+            button({ icon: icon("plus"), ariaLabel: "Medium add", title: "Medium add", outlined: true }),
+            button({ icon: icon("plus"), ariaLabel: "Large add", title: "Large add", size: "large", outlined: true })
+        ]),
+        node("pre", '{ size: "small" | "medium" | "large" }', "sample-code")
+    ]),
+    card("states", "05", "Every state considered", "Native disabled behavior, a visible keyboard focus ring, and pressed states.", [
+        group([
+            button({ content: "Available" }),
+            button({ content: "Unavailable", enabled: false }),
+            button({ content: "Unavailable", outlined: true, enabled: false })
+        ]),
+        group([
+            button({ content: "Selected", icon: icon("check"), outlined: true, toggle: true, pressed: true }),
+            button({ content: "Selected", icon: icon("check"), outlined: true, toggle: true, pressed: true, enabled: false }),
+            button({ icon: icon("plus"), ariaLabel: "Unavailable add", title: "Unavailable add", variant: "ghost", enabled: false })
+        ]),
+        node("p", "Use Tab to explore keyboard focus. Enter and Space activate a focused button.", "inline-note"),
+        node("pre", '{ enabled: false }', "sample-code")
+    ]),
+    card("context", "06", "At home in an application", "Consistent actions, whether they appear on their own or in a footer.", [
+        group([
+            group([node("span", "PROJECT SETTINGS", "context-eyebrow"), node("h3", "Keep everything up to date"), saveStatus], "context-body"),
+            group([
+                button({ content: "Discard", outlined: true, click: () => { saveStatus.content = "Changes discarded."; } }),
+                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")
+    ]),
+    card("customization", "07", "Make it yours", "Custom content and application colors still fit the same button API.", [
+        group([
+            button({ content: { tag: "span", children: [node("span", "Inbox"), node("span", "8", "count-badge")] }, outlined: true }),
+            button({ content: "Publish", icon: icon("arrow"), iconPosition: "end", class: "brand-teal" })
+        ]),
+        node("pre", '.brand-teal {\n  --jsl-button-primary: #0f766e;\n  --jsl-button-on-primary: #fff;\n  --jsl-button-primary-hover: #115e59;\n  --jsl-button-primary-active: #134e4a;\n  --jsl-button-focus: #0f766e;\n}', "sample-code")
+    ])
+];
+
+const usage: IJSLVNode = {
+    tag: "details", attr: { class: "usage" }, children: [
+        node("summary", "Usage & compatibility"),
+        node("p", "Existing content, enabled, class, outlined, style, and click options continue to work. variant takes precedence over outlined when both are supplied."),
+        node("pre", 'import { ButtonComponent } from "jsl-ui";\n\nnew ButtonComponent({\n  content: "Save view",\n  icon: myBookmarkIcon,\n  outlined: true,\n  toggle: true,\n  pressed: false,\n  type: "button",\n  onToggle: pressed => console.log(pressed),\n  click: event => console.log(event)\n});', "sample-code"),
+        node("p", "For an icon-only button, omit content and supply ariaLabel, or set iconOnly: true to visually hide the content while keeping its accessible name. Icons can be strings, VNodes, or IJSLComponents. Keep icons decorative; place interactive elements outside the button."),
+        node("p", "The pressed option sets the initial toggle state. Read or assign button.pressed to update it later without firing events. User activation updates pressed, then raises onToggle and the existing click event. Toggle state survives jsl-render refreshes, including when a parent creates a new ButtonComponent instance during render."),
+        node("p", "The native button type is unchanged when type is omitted, including form submission. Use type: 'button' for actions inside a form that should not submit it. Disabled buttons are now natively disabled and skipped during keyboard navigation."),
+        node("p", "The neutral base palette lives in ui/theme.css. Override --jsl-color-* CSS variables on a container to theme components together, or --jsl-button-* variables to customize just buttons. ButtonComponent imports its own CSS. Vanilla controls receive the same styles through ui/base.css.")
+    ]
+};
+
+JSLRender.PrintRenderTime = false;
+new JSLRender(document.getElementById("showcase"), true).render({
+    tag: "div", children: [{
+    tag: "section", attr: { id: "buttons", "aria-labelledby": "buttons-title" }, children: [
+        group([
+            group([node("p", "THE ESSENTIALS / 01", "eyebrow"), { tag: "h1", content: "Buttons", attr: { id: "buttons-title" } }, node("p", "A clear next step. A quiet alternative. An action that feels right.", "hero-description")], "hero-copy"),
+            group([node("span", "INTERACTIVE PREVIEW", "preview-caption"), button({ content: "Create something", icon: icon("plus"), size: "large", click: action("Something created. Your next step starts here.") }), node("span", "Simple by default. Flexible by design.", "preview-note")], "hero-preview")
+        ], "hero"),
+        group([node("span", "Overview", "overview-label"), node("span", "3 variants", "overview-stat"), node("span", "3 sizes", "overview-stat"), node("span", "Keyboard accessible", "overview-stat")], "overview-bar"),
+        group(cards, "sample-grid"), usage
+    ]
+    }, dialogShowcase, tabsShowcase, sliderShowcase, dateShowcase, dateRangeShowcase, dateTimeShowcase, selectShowcase, checkboxShowcase, expanderShowcase, inputShowcase, numberShowcase, formFieldShowcase, notificationShowcase, loadingShowcase, navigationShowcase, progressShowcase, stackShowcase, treeShowcase, overlayShowcase, ribbonShowcase, gridShowcase]
+});
+
+const navigation = Array.from(document.querySelectorAll<HTMLAnchorElement>(".nav-item"));
+let navigationScheduled = false;
+function updateNavigation() {
+    navigationScheduled = false;
+    let current = navigation[0];
+    for (const link of navigation) {
+        if (document.querySelector(link.hash).getBoundingClientRect().top <= window.innerHeight * 0.35) {
+            current = link;
+        }
+    }
+    for (const link of navigation) {
+        if (link === current) {
+            link.setAttribute("aria-current", "location");
+        } else {
+            link.removeAttribute("aria-current");
+        }
+    }
+}
+window.addEventListener("scroll", () => {
+    if (!navigationScheduled) {
+        navigationScheduled = true;
+        requestAnimationFrame(updateNavigation);
+    }
+}, { passive: true });
+updateNavigation();

package/examples/showcase/tabs.ts

@@ -0,0 +1,161 @@
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { TabsComponent, ITabItemOption } from "../../components/tabs/TabsComponent";
+import { ButtonComponent } from "../../components/button/ButtonComponent";
+
+type Content = IJSLVNode | IJSLComponent;
+const text = (tag: string, content: string, className?: string): IJSLVNode => ({ tag, content, attr: { class: className } });
+const group = (children: Content[], className?: string): IJSLVNode => ({ tag: "div", attr: { class: className }, children });
+const status = (content: string): IJSLVNode => ({ tag: "p", content, attr: { class: "sample-status", role: "status" } });
+const action = (content: string, click: () => void) => new ButtonComponent({ content, type: "button", outlined: true, size: "small", click });
+const copy = (title: string, content: string) => group([text("h4", title), text("p", content)], "tabs-example-copy");
+
+const basicStatus = status("Overview is selected.");
+const basicNames = ["Overview", "Activity", "Settings"];
+const basic = new TabsComponent({
+    ariaLabel: "Project views",
+    tabs: [
+        { header: "Overview", content: copy("Everything in one place", "A clear view of your project, its progress, and what needs your attention.") },
+        { header: "Activity", content: copy("The latest updates", "Your team created a project, shared a draft, and reviewed the next release.") },
+        { header: "Settings", content: copy("Make it your own", "Manage project preferences, access, and notifications from a single view.") }
+    ],
+    onSelect: index => { basicStatus.content = basicNames[index] + " is selected."; }
+});
+
+const preserved = new TabsComponent({
+    ariaLabel: "Preserved project draft", preserveContent: true,
+    tabs: [
+        { header: "Draft", content: group([
+            { tag: "label", content: "Project name", attr: { for: "tabs-project-draft" } },
+            { tag: "input", attr: { id: "tabs-project-draft", class: "tabs-draft-input", type: "text", placeholder: "Type something, then switch tabs" } },
+            text("p", "Your unfinished work stays exactly where you left it.")
+        ], "tabs-example-copy") },
+        { header: "Preview", content: copy("Your draft is still there", "Switch back to Draft. The input keeps its value and its DOM element.") }
+    ]
+});
+
+const lazyStatus = status("No detail panels have been created yet.");
+let createdPanels = 0;
+const lazyTab = (header: string): ITabItemOption => ({
+    header,
+    onCreate: () => {
+        createdPanels++;
+        lazyStatus.content = createdPanels + (createdPanels === 1 ? " detail panel created." : " detail panels created.");
+        return copy(header, "This content was created on the first visit. Revisit this tab and the creation count stays the same.");
+    }
+});
+const lazy = new TabsComponent({
+    ariaLabel: "Lazy project details", preserveContent: true,
+    tabs: [
+        { header: "Summary", content: copy("Ready when you are", "Details are created only when you select their tab. Try Reports or History.") },
+        lazyTab("Reports"), lazyTab("History")
+    ]
+});
+
+const documentStatus = status("Add a draft, close one, or try closing the protected tab.");
+let allowProtectedClose = false;
+let nextDocument = 2;
+const documents = new TabsComponent({
+    ariaLabel: "Open documents", preserveContent: true,
+    tabs: [
+        { header: "Overview", content: copy("Your workspace", "Keep a few documents open while you work.") },
+        { id: "showcase-tabs-draft-1", header: "Draft 1", canClose: true, content: copy("Draft 1", "A document that can be closed and replaced with another.") },
+        { id: "showcase-tabs-protected", header: "Protected", canClose: true,
+            content: copy("A little protection", "Allow this tab to close using the checkbox below, or keep it open with onClosing."),
+            onClosing: () => {
+                if (!allowProtectedClose) {
+                    documentStatus.content = "The protected tab is still open. Allow closing it using the checkbox.";
+                    return false;
+                }
+                return true;
+            }
+        }
+    ],
+    onSelect: index => { documentStatus.content = index < 0 ? "No document selected." : "Selected tab " + (index + 1) + "."; }
+});
+
+const disabledStatus = status("Audit is unavailable. Keyboard navigation skips it.");
+const disabled = new TabsComponent({
+    ariaLabel: "Workspace sections",
+    tabs: [
+        { header: "Workspace", content: copy("Choose where to work", "Tabs can remain visible while an action or section is unavailable.") },
+        { header: "Audit", enabled: false, content: copy("Audit trail", "This section is now enabled and ready to use.") },
+        { header: "Team", content: copy("Work together", "Arrow keys move between available tabs, skipping disabled ones.") }
+    ]
+});
+
+const overflow = new TabsComponent({
+    ariaLabel: "Workspace information", maxHeight: "10rem",
+    tabs: [
+        { header: "Overview", content: copy("A place for every view", "When space gets tight, the header scrolls horizontally. Focused tabs stay in view.") },
+        { header: group([text("span", "Release notes"), { tag: "span", content: "3", attr: { class: "tabs-header-badge", "aria-hidden": "true" } }], "tabs-rich-header"),
+            ariaLabel: "Release notes, 3 updates",
+            content: group(Array.from({ length: 8 }, (_, index) => text("p", "Release " + (index + 1) + ": improvements to everyday work and collaboration.")), "tabs-example-copy") },
+        { header: "Deployment history", content: copy("Recent deployments", "The latest deployment completed successfully.") },
+        { header: "Team permissions", content: copy("Who can do what", "Keep access and responsibilities clear across the workspace.") },
+        { header: "Integrations", content: copy("Connected tools", "Connect your team's existing tools to its daily workflow.") },
+        { header: "Audit log", content: copy("A record of changes", "Track what changed, when it changed, and who made the update.") }
+    ]
+});
+
+const preview = new TabsComponent({
+    ariaLabel: "Tabs preview", class: "tabs-hero-demo",
+    tabs: [
+        { header: "Preview", content: text("p", "A clear view of the task at hand.") },
+        { header: "Details", content: text("p", "Another view, one selection away.") }
+    ]
+});
+
+function card(id: string, number: string, title: string, description: string, children: Content[]): IJSLVNode {
+    return { tag: "article", attr: { class: "sample-card", id, "aria-labelledby": id + "-title" }, children: [
+        group([text("span", number, "sample-number"), { tag: "h3", content: title, attr: { id: id + "-title" } }], "card-heading"),
+        text("p", description, "card-description"), ...children
+    ] };
+}
+
+export const tabsShowcase: IJSLVNode = {
+    tag: "section", attr: { id: "tabs", class: "component-section", "aria-labelledby": "tabs-title" }, children: [
+        group([
+            group([
+                text("p", "THE ESSENTIALS / 03", "eyebrow"),
+                { tag: "h2", content: "Tabs", attr: { id: "tabs-title", class: "section-title" } },
+                text("p", "Related views, one clear selection. Keep the context and make room for the details.", "hero-description")
+            ], "hero-copy"),
+            group([text("span", "INTERACTIVE PREVIEW", "preview-caption"), preview, text("span", "Use the arrow keys to explore.", "preview-note")], "hero-preview")
+        ], "hero"),
+        group([text("span", "Overview", "overview-label"), text("span", "Lazy content", "overview-stat"), text("span", "Closable tabs", "overview-stat"), text("span", "Keyboard accessible", "overview-stat")], "overview-bar"),
+        group([
+            card("tabs-basic", "01", "One view at a time", "An understated active indicator, comfortable labels, and linked content panels.", [basic, basicStatus]),
+            card("tabs-preserved", "02", "Keep your work", "Preserved panels keep draft input and component state when you switch views.", [preserved, text("pre", "{ preserveContent: true }", "sample-code")]),
+            card("tabs-lazy", "03", "Create only when needed", "Load content on its first selection, then keep the result for future visits.", [lazy, lazyStatus]),
+            card("tabs-documents", "04", "Tabs that come and go", "Add and close documents. Use Delete on a closable tab, or its close button.", [
+                documents,
+                group([action("Add draft", () => {
+                    const number = nextDocument++;
+                    const index = documents.AddTab({ header: "Draft " + number, canClose: true, content: copy("Draft " + number, "A new document, ready for your next idea.") });
+                    documents.SetSelectedTab(index);
+                    documentStatus.content = "Draft " + number + " added.";
+                })], "sample-row"),
+                { tag: "label", attr: { class: "tabs-example-check" }, children: [
+                    { tag: "input", attr: { type: "checkbox", id: "tabs-allow-close", change: (event: Event) => { allowProtectedClose = (event.target as HTMLInputElement).checked; } } },
+                    text("span", "Allow closing the protected tab")
+                ] }, documentStatus
+            ]),
+            card("tabs-disabled", "05", "Available when you need it", "Disabled tabs stay visible and are skipped by pointer and keyboard activation.", [
+                disabled,
+                group([
+                    action("Enable all", () => { disabled.EnableAll(); disabledStatus.content = "All sections are available."; }),
+                    action("Disable all", () => { disabled.DisableAll(); disabledStatus.content = "All sections are disabled. Current content stays visible."; })
+                ], "sample-row"), disabledStatus
+            ]),
+            card("tabs-overflow", "06", "Labels with room to grow", "Rich headers and long lists fit a scrolling tab bar. Content height can be limited independently.", [overflow, text("pre", '{ maxHeight: "10rem" }', "sample-code")])
+        ], "sample-grid tabs-sample-grid"),
+        { tag: "details", attr: { class: "usage" }, children: [
+            text("summary", "Tabs usage & compatibility"),
+            text("pre", 'new TabsComponent({\n  tabs: [\n    { id: "overview", header: "Overview", content: "Project overview" },\n    { id: "reports", header: "Reports", onCreate: () => createReports(), canClose: true }\n  ],\n  preserveContent: true,\n  onSelect: index => { /* Return false to veto user selection. */ }\n});', "sample-code"),
+            text("p", "Existing options and AddTab, SetSelectedTab, getActiveTabIndex, GetByID, closeTabIndex, EnableAll, and DisableAll methods are preserved. SetSelectedTab selects without raising onSelect; -1 clears selection. Invalid indices are ignored."),
+            text("p", "Arrow Left/Right, Home, and End focus and select enabled tabs. Enter and Space activate a focused tab. Delete closes a closable tab. onClosing can veto closure; closeTabIndex(index, true) also emits the resulting selection."),
+            text("p", "onCreate runs once per tab, on its first selection. By default, inactive content is unmounted; preserveContent keeps it mounted and hidden. Closing a tab keeps the current document selected when possible, or selects the next enabled neighbor. Empty tab sets are supported."),
+            text("p", "Tab IDs must be unique. Each tab is linked to a panel with accessible roles and selection state. Use ariaLabel on the tab set or individual items, and closeButtonLabel to translate a close control. Custom headers should contain decorative content, keeping interactive controls in the panel.")
+        ] }
+    ]
+};

package/examples/showcase/themes.css

@@ -0,0 +1,83 @@
+/* Showcase-only examples of overriding the shared library palette. */
+:root { color-scheme: light; }
+
+:root[data-showcase-theme="ocean"] {
+    --jsl-color-canvas: #f5f8fc;
+    --jsl-color-surface-subtle: #f8fafd;
+    --jsl-color-surface-hover: #edf2f9;
+    --jsl-color-surface-selected: #e3edfc;
+    --jsl-color-border: #c7d4e8;
+    --jsl-color-border-subtle: #e0e7f1;
+    --jsl-color-text: #24344a;
+    --jsl-color-text-secondary: #4b5e78;
+    --jsl-color-text-muted: #62748a;
+    --jsl-color-accent: #245fc7;
+    --jsl-color-accent-hover: #1d4fa8;
+    --jsl-color-accent-active: #184187;
+    --jsl-color-focus: #245fc7;
+    --jsl-color-disabled-surface: #edf2f7;
+    --jsl-color-disabled-text: #62748a;
+}
+
+:root[data-showcase-theme="forest"] {
+    --jsl-color-canvas: #f5f8f5;
+    --jsl-color-surface-subtle: #f9fbf8;
+    --jsl-color-surface-hover: #eef4ed;
+    --jsl-color-surface-selected: #dfeddf;
+    --jsl-color-border: #c6d6c5;
+    --jsl-color-border-subtle: #dfe8dd;
+    --jsl-color-text: #293b2b;
+    --jsl-color-text-secondary: #4c6250;
+    --jsl-color-text-muted: #647667;
+    --jsl-color-accent: #356b45;
+    --jsl-color-accent-hover: #295436;
+    --jsl-color-accent-active: #203f29;
+    --jsl-color-focus: #356b45;
+    --jsl-color-disabled-surface: #eef3ed;
+    --jsl-color-disabled-text: #647667;
+}
+
+:root[data-showcase-theme="plum"] {
+    --jsl-color-canvas: #faf6fa;
+    --jsl-color-surface-subtle: #fcf9fc;
+    --jsl-color-surface-hover: #f4edf5;
+    --jsl-color-surface-selected: #efdef0;
+    --jsl-color-border: #dac8dd;
+    --jsl-color-border-subtle: #ebdfed;
+    --jsl-color-text: #412b46;
+    --jsl-color-text-secondary: #6c5271;
+    --jsl-color-text-muted: #7b667f;
+    --jsl-color-accent: #80458b;
+    --jsl-color-accent-hover: #693872;
+    --jsl-color-accent-active: #542d5c;
+    --jsl-color-focus: #80458b;
+    --jsl-color-disabled-surface: #f3edf4;
+    --jsl-color-disabled-text: #7b667f;
+}
+
+:root[data-showcase-theme="midnight"] {
+    --jsl-color-success: #86efac;
+    --jsl-color-warning: #fcd34d;
+    --jsl-color-info: #93c5fd;
+    --jsl-color-danger: #fda4af;
+    color-scheme: dark;
+    --jsl-color-overlay: rgba(0, 0, 0, 0.65);
+    --jsl-shadow-dialog: 0 24px 80px rgba(0, 0, 0, 0.55);
+    --jsl-color-canvas: #18181b;
+    --jsl-color-surface: #232326;
+    --jsl-color-surface-subtle: #1e1e21;
+    --jsl-color-surface-hover: #303035;
+    --jsl-color-surface-selected: #3b3b43;
+    --jsl-color-border: #62626d;
+    --jsl-color-border-subtle: #3d3d45;
+    --jsl-color-text: #f4f4f5;
+    --jsl-color-text-secondary: #d4d4d8;
+    --jsl-color-text-muted: #a1a1aa;
+    --jsl-color-accent: #e4e4e7;
+    --jsl-color-accent-hover: #ffffff;
+    --jsl-color-accent-active: #a1a1aa;
+    --jsl-color-on-accent: #18181b;
+    --jsl-color-focus: #a1a1aa;
+    --jsl-color-disabled-surface: #2b2b30;
+    --jsl-color-disabled-text: #91919c;
+}

package/examples/showcase/themes.ts

@@ -0,0 +1,54 @@
+import "./themes.css";
+import "./nivona.css";
+
+export const showcaseThemes = [
+    { id: "default", label: "Default (neutral)" },
+    { id: "nivona", label: "Nivona" },
+    { id: "ocean", label: "Ocean" },
+    { id: "forest", label: "Forest" },
+    { id: "plum", label: "Plum" },
+    { id: "midnight", label: "Midnight (dark)" }
+] as const;
+
+export type ShowcaseTheme = typeof showcaseThemes[number]["id"];
+
+const storageKey = "jsl-showcase-theme";
+const themePicker = document.getElementById("showcase-theme") as HTMLSelectElement;
+
+/** Switch the showcase palette without recreating components or resetting their state. */
+export function changeTheme(themeId: string): ShowcaseTheme {
+    const theme = showcaseThemes.find(item => item.id === themeId)?.id ?? "default";
+    if (theme === "default") {
+        // Removing the override restores the library's actual built-in palette.
+        document.documentElement.removeAttribute("data-showcase-theme");
+    } else {
+        document.documentElement.setAttribute("data-showcase-theme", theme);
+    }
+    themePicker.value = theme;
+    try {
+        localStorage.setItem(storageKey, theme);
+    } catch {
+        // Theme switching also works when browser storage is unavailable.
+    }
+    return theme;
+}
+
+themePicker.replaceChildren(...showcaseThemes.map(theme => {
+    const option = document.createElement("option");
+    option.value = theme.id;
+    option.textContent = theme.label;
+    return option;
+}));
+themePicker.addEventListener("change", () => changeTheme(themePicker.value));
+
+let savedTheme = "default";
+try {
+    savedTheme = localStorage.getItem(storageKey) ?? "default";
+} catch {
+    // Use the built-in palette when browser storage is unavailable.
+}
+// Share a particular palette with ?theme=nivona (or any registered theme id).
+// A valid URL choice takes precedence over the saved preference, including default.
+const urlTheme = new URLSearchParams(window.location.search).get("theme");
+const initialTheme = showcaseThemes.some(theme => theme.id === urlTheme) ? urlTheme : savedTheme;
+changeTheme(initialTheme);

package/lib/components/IntervalComponent.d.ts

@@ -7,6 +7,11 @@ export interface IIntervalOptions {
 export declare class IntervalComponent implements IJSLComponent {
     private fnc;
     private options;
+    State: {
+        run?: {
+            active: boolean;
+        };
+    };
     private renderer;
     constructor(fnc: any, options: IIntervalOptions);
     isEqual(node: IJSLComponent): boolean;

package/lib/components/IntervalComponent.js

@@ -2,6 +2,8 @@ export class IntervalComponent {
     constructor(fnc, options) {
         this.fnc = fnc;
         this.options = options;
+        // Shared by jsl-render when a refresh replaces the component instance.
+        this.State = {};
     }
     isEqual(node) {
         return this.__proto__ === node.__proto__;
@@ -13,12 +15,31 @@ export class IntervalComponent {
         this.renderer = render;
     }
     onCreate(node) {
+        if (this.State.run) {
+            this.State.run.active = false;
+        }
+        const run = this.State.run = { active: true };
         const timeoutRef = node.dom.value;
         if (timeoutRef && timeoutRef !== "0") {
             clearTimeout(parseInt(timeoutRef, 10));
             node.dom.value = "";
         }
+        const complete = () => {
+            if (!run.active) {
+                return;
+            }
+            if (!this.options.noRefresh) {
+                this.renderer.refresh();
+            }
+            // Refreshing may synchronously remove this component.
+            if (run.active) {
+                node.dom.value = setTimeout(f, this.options.interval).toString();
+            }
+        };
         const f = () => {
+            if (!run.active) {
+                return;
+            }
             let result;
             try {
                 result = this.fnc();
@@ -31,31 +52,26 @@ export class IntervalComponent {
             }
             const isPromise = result && typeof result.then === "function" && typeof result.catch === "function";
             if (isPromise) {
-                result.then(() => {
-                    if (!this.options.noRefresh) {
-                        this.renderer.refresh();
+                result.then(complete).catch((e) => {
+                    if (!run.active) {
+                        return;
                     }
-                    node.dom.value = setTimeout(f, this.options.interval).toString();
-                }).catch((e) => {
                     console.error(e);
                     if (!this.options.stopOnError) {
-                        if (!this.options.noRefresh) {
-                            this.renderer.refresh();
-                        }
-                        node.dom.value = setTimeout(f, this.options.interval).toString();
+                        complete();
                     }
                 });
             }
             else {
-                if (!this.options.noRefresh) {
-                    this.renderer.refresh();
-                }
-                node.dom.value = setTimeout(f, this.options.interval).toString();
+                complete();
             }
         };
         f();
     }
     onRemove(node) {
+        if (this.State.run) {
+            this.State.run.active = false;
+        }
         const timeoutRef = node.dom.value;
         if (timeoutRef && timeoutRef !== "0") {
             clearTimeout(parseInt(timeoutRef, 10));

package/lib/components/auto-suggest/AutoSuggestComponent.d.ts

@@ -1,22 +1,24 @@
-import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { IJSLVNode } from "jsl-render";
 import { IAutoSuggestOptions, IAutoSuggest } from "../../ui/auto.suggest";
+import { InputComponent } from "../input/InputComponent";
 export interface IAutoSuggestComponentOptions extends IAutoSuggestOptions {
+    id?: string;
     value?: string;
     class?: string;
     style?: string;
     placeholder?: string;
+    enabled?: boolean;
+    readOnly?: boolean;
+    unstyled?: boolean;
+    ariaLabel?: string;
+    maxLength?: number;
 }
-export declare class AutoSuggestComponent implements IJSLComponent {
-    private options;
+export declare class AutoSuggestComponent extends InputComponent {
     private ref;
-    private dom;
+    private input;
+    private suggestOptions;
     constructor(options: IAutoSuggestComponentOptions);
-    render(): IJSLVNode;
     getRef(): IAutoSuggest;
-    getValue(): string;
-    setValue(val: string): void;
-    focus(): void;
     onCreate(node: IJSLVNode): void;
-    onUpdate(node: IJSLVNode): void;
     onRemove(): void;
 }