@syware/jlib 0.0.0-stage → 0.1.0

package/dist/molecules/jl-tabs.css_raw.js

@@ -0,0 +1,3 @@
+// src/molecules/jl-tabs.css?raw
+var jl_tabs_default = ":host {\n  display: block;\n}\n\n.scroller {\n  position: relative;\n  overflow-x: auto;\n  scrollbar-width: none;\n  /* The row scrolls rather than widening what holds the tabs: its labels do not count in the page's layout. */\n  contain: inline-size;\n}\n\n.list {\n  display: flex;\n  gap: 4px;\n  width: max-content;\n  min-width: 100%;\n}\n\n.tab {\n  position: relative;\n  z-index: 1;\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  height: 40px;\n  padding: 0 12px;\n  border: none;\n  border-radius: var(--jl-radius-xs);\n  background: none;\n  color: var(--jl-muted);\n  font-size: var(--jl-font-md);\n  font-weight: 600;\n  white-space: nowrap;\n  cursor: pointer;\n  transition: color var(--jl-fast) var(--jl-ease);\n}\n\n.tab:hover {\n  color: var(--jl-text);\n}\n\n.tab[aria-selected=\"true\"] {\n  color: var(--jl-text);\n}\n\n.tab[aria-disabled] {\n  color: var(--jl-faint);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.badge {\n  min-width: 20px;\n  padding: 1px 6px;\n  border-radius: var(--jl-radius-pill);\n  background: var(--jl-surface-3);\n  color: var(--jl-text-2);\n  font-size: 11px;\n  font-weight: 650;\n  font-variant-numeric: tabular-nums;\n  line-height: 16px;\n}\n\n.tab[aria-selected=\"true\"] .badge {\n  background: var(--jl-accent-soft);\n  color: var(--jl-accent);\n}\n\n.indicator {\n  position: absolute;\n  top: 0;\n  left: 0;\n  pointer-events: none;\n}\n\n.indicator[data-placed] {\n  transition:\n    transform var(--jl-slow) var(--jl-ease),\n    width var(--jl-slow) var(--jl-ease);\n}\n\n/* Line: a row of labels over a rule; the open tab is underlined in the accent colour. */\n:host(:not([variant=\"pill\"])) .scroller {\n  box-shadow: inset 0 -1px 0 var(--jl-line);\n}\n\n:host(:not([variant=\"pill\"])) .indicator {\n  top: auto;\n  bottom: 0;\n  width: var(--w);\n  height: 2px;\n  border-radius: 2px 2px 0 0;\n  background: var(--jl-accent);\n  transform: translateX(var(--x));\n}\n\n/* Pill: the open tab sits on a soft accent pill. */\n:host([variant=\"pill\"]) .tab {\n  height: 32px;\n  padding: 0 14px;\n  border-radius: var(--jl-radius-pill);\n}\n\n:host([variant=\"pill\"]) .tab:hover:not([aria-selected=\"true\"]) {\n  background: var(--jl-surface-2);\n}\n\n:host([variant=\"pill\"]) .tab[aria-selected=\"true\"] {\n  color: var(--jl-accent);\n}\n\n:host([variant=\"pill\"]) .indicator {\n  width: var(--w);\n  height: var(--h);\n  border-radius: var(--jl-radius-pill);\n  background: var(--jl-accent-soft);\n  transform: translate(var(--x), var(--y));\n}\n\n:host([variant=\"pill\"]) .tab[aria-selected=\"true\"] .badge {\n  background: var(--jl-surface);\n}\n\n:host([block]) .list {\n  width: 100%;\n}\n\n:host([block]) .tab {\n  flex: 1;\n}\n\n.panels {\n  padding-top: 16px;\n}\n\n/* Inside the scrolling row, a ring drawn outside the tab would be cut: draw it inside. */\n.tab:focus-visible {\n  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--jl-brand) 60%, transparent);\n}\n";
+export { jl_tabs_default as default };

package/dist/molecules/jl-tabs.d.ts

@@ -0,0 +1,51 @@
+import { JlElement } from '../base/jl-element';
+import type { TabsVariant } from '../types/jl-tabs.types';
+export declare const TAB_VARIANTS: readonly TabsVariant[];
+/**
+ * Tabs over panels: the `jl-tab-panel` children make the tabs, and one panel shows at a time. `value` is the open
+ * panel's name (the first panel by default); `change` fires with the name when people pick another tab.
+ */
+export declare class JlTabs extends JlElement {
+    static readonly selector = "jl-tabs";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        change: string;
+    }>>;
+    readonly value: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly variant: Readonly<Readonly<{
+        get(): TabsVariant;
+        set(setter: ((prevState: TabsVariant) => TabsVariant) | TabsVariant): void;
+    }>>;
+    /** The tabs share the whole width. */
+    readonly block: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** The tab list's name for screen readers, when the page has no heading that says it. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _observers;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    onDisconnect(): void;
+    private panels;
+    private tabs;
+    /** Only the tabs' own panels matter, not the attributes of what the panels hold. */
+    private onMutations;
+    /** The index of the open panel: the one `value` names, or the first that can open. */
+    private selectedIndex;
+    private render;
+    /** Adds or removes tab buttons to match the panels; the buttons left keep their focus. */
+    private syncTabCount;
+    private renderTab;
+    private placeIndicator;
+    private onKeydown;
+    /** Opens the panel of a tab people picked, and says so. */
+    private choose;
+}

package/dist/molecules/jl-tabs.js

@@ -0,0 +1,198 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { oneOf } from "../lib/attributes.js";
+import { define } from "../lib/define.js";
+import { setOrRemove, uniqueId } from "../lib/dom.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import { firstIndex, lastIndex, stepIndex } from "../lib/roving.js";
+import { moveIndicator } from "../lib/indicator.js";
+import { JlTabPanel } from "./jl-tab-panel.js";
+import jl_tabs_default from "./jl-tabs.css_raw.js";
+import { css } from "@jadis/core";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-tabs.tsx
+var TAB_VARIANTS = ["line", "pill"];
+define(JlTabPanel);
+var ICON_SIZE = 16;
+var PANEL_ATTRIBUTES = [
+	"name",
+	"label",
+	"icon",
+	"badge",
+	"disabled"
+];
+var KEY_MOVES = /* @__PURE__ */ new Map([
+	["ArrowLeft", (enabled, from) => stepIndex(enabled, from, -1)],
+	["ArrowRight", (enabled, from) => stepIndex(enabled, from, 1)],
+	["End", lastIndex],
+	["Home", firstIndex]
+]);
+var isPanel = (element) => element.localName === JlTabPanel.selector;
+/** A panel's name for `value`: its `name`, or its position when it has none. */
+var panelName = (panel, index) => panel.getAttribute("name") || String(index);
+var isDisabled = (panel) => panel.hasAttribute("disabled");
+/**
+* Tabs over panels: the `jl-tab-panel` children make the tabs, and one panel shows at a time. `value` is the open
+* panel's name (the first panel by default); `change` fires with the name when people pick another tab.
+*/
+var JlTabs = class extends JlElement {
+	static selector = "jl-tabs";
+	events = this.useEvents();
+	value = this.useChange("", () => this.render(), { attribute: "value" });
+	variant = this.useChange("line", (value) => {
+		this.reflect("variant", value);
+		this.placeIndicator();
+	}, {
+		attribute: "variant",
+		parse: oneOf(TAB_VARIANTS, "line")
+	});
+	/** The tabs share the whole width. */
+	block = this.useChange(false, (value) => {
+		this.reflect("block", value);
+		this.placeIndicator();
+	}, { attribute: "block" });
+	/** The tab list's name for screen readers, when the page has no heading that says it. */
+	label = this.useChange("", (value) => setOrRemove(this._refs.list, "aria-label", value), { attribute: "label" });
+	_observers = {
+		mutations: new MutationObserver((records) => this.onMutations(records)),
+		resize: new ResizeObserver(() => this.placeIndicator())
+	};
+	_refs = this.useRefs((ref) => ({
+		indicator: ref(".indicator"),
+		list: ref(".list")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "tabs",
+			attrs: { part: "base" },
+			children: [/* @__PURE__ */ jsxs("div", {
+				class: "scroller",
+				children: [/* @__PURE__ */ jsx("div", {
+					class: "list",
+					role: "tablist"
+				}), /* @__PURE__ */ jsx("span", {
+					class: "indicator",
+					"aria-hidden": "true",
+					hidden: true
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				class: "panels",
+				children: /* @__PURE__ */ jsx("slot", {})
+			})]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_tabs_default}`;
+	}
+	onConnect() {
+		this.render();
+		this._observers.mutations.observe(this, {
+			attributeFilter: PANEL_ATTRIBUTES,
+			attributes: true,
+			childList: true,
+			subtree: true
+		});
+		this._observers.resize.observe(this._refs.list);
+		this.on(this._refs.list, "click", (event) => {
+			const tab = event.target.closest("[role=\"tab\"]");
+			if (tab !== null) this.choose(this.tabs().indexOf(tab), false);
+		});
+		this.on(this._refs.list, "keydown", (event) => this.onKeydown(event));
+	}
+	onDisconnect() {
+		this._observers.mutations.disconnect();
+		this._observers.resize.disconnect();
+	}
+	panels() {
+		return [...this.children].filter(isPanel);
+	}
+	tabs() {
+		return [...this._refs.list.children];
+	}
+	/** Only the tabs' own panels matter, not the attributes of what the panels hold. */
+	onMutations(records) {
+		if (records.some((record) => record.target === this || record.target.parentElement === this)) this.render();
+	}
+	/** The index of the open panel: the one `value` names, or the first that can open. */
+	selectedIndex(panels) {
+		const value = this.value.get();
+		const named = panels.findIndex((panel, index) => panelName(panel, index) === value && !isDisabled(panel));
+		return named === -1 ? panels.findIndex((panel) => !isDisabled(panel)) : named;
+	}
+	render() {
+		const panels = this.panels();
+		this.syncTabCount(panels.length);
+		const selected = this.selectedIndex(panels);
+		const tabs = this.tabs();
+		panels.forEach((panel, index) => {
+			const tab = tabs[index];
+			if (tab !== void 0) this.renderTab(tab, panel, index === selected);
+		});
+		this.placeIndicator();
+	}
+	/** Adds or removes tab buttons to match the panels; the buttons left keep their focus. */
+	syncTabCount(count) {
+		const list = this._refs.list;
+		while (list.childElementCount > count) list.lastElementChild?.remove();
+		while (list.childElementCount < count) list.append(/* @__PURE__ */ jsx("button", {
+			type: "button",
+			role: "tab",
+			class: "tab",
+			id: uniqueId("jl-tab")
+		}));
+	}
+	renderTab(tab, panel, selected) {
+		const icon = panel.getAttribute("icon") ?? "";
+		const badge = panel.getAttribute("badge") ?? "";
+		tab.replaceChildren(icon === "" ? "" : /* @__PURE__ */ jsx(JlIcon, {
+			name: icon,
+			size: ICON_SIZE
+		}), /* @__PURE__ */ jsx("span", {
+			class: "label",
+			children: panel.getAttribute("label") ?? ""
+		}), badge === "" ? "" : /* @__PURE__ */ jsx("span", {
+			class: "badge",
+			children: badge
+		}));
+		tab.setAttribute("aria-selected", String(selected));
+		tab.tabIndex = selected ? 0 : -1;
+		tab.toggleAttribute("aria-disabled", isDisabled(panel));
+		if (panel.id === "") panel.id = uniqueId("jl-tab-panel");
+		tab.ariaControlsElements = [panel];
+		panel.toggleAttribute("selected", selected);
+		panel.tabIndex = 0;
+	}
+	placeIndicator() {
+		const selected = this.tabs().find((tab) => tab.getAttribute("aria-selected") === "true") ?? null;
+		moveIndicator(this._refs.indicator, selected);
+	}
+	onKeydown(event) {
+		const move = KEY_MOVES.get(event.key);
+		const tabs = this.tabs();
+		const from = tabs.indexOf(event.target);
+		if (move === void 0 || from === -1) return;
+		event.preventDefault();
+		const enabled = tabs.map((tab) => !tab.hasAttribute("aria-disabled"));
+		this.choose(move(enabled, from), true);
+	}
+	/** Opens the panel of a tab people picked, and says so. */
+	choose(index, focus) {
+		const panels = this.panels();
+		const panel = panels[index];
+		const tab = this.tabs()[index];
+		if (panel === void 0 || tab === void 0 || isDisabled(panel)) return;
+		if (focus) {
+			tab.focus();
+			tab.scrollIntoView({
+				block: "nearest",
+				inline: "nearest"
+			});
+		}
+		if (index === this.selectedIndex(panels)) return;
+		const name = panelName(panel, index);
+		this.value.set(name);
+		this.events.emit("change", name);
+	}
+};
+JlTabs.register();
+export { JlTabs, TAB_VARIANTS };

package/dist/molecules/jl-tag-input.css_raw.js

@@ -0,0 +1,3 @@
+// src/molecules/jl-tag-input.css?raw
+var jl_tag_input_default = ":host {\n  display: block;\n  /* As a grid or flex item, the field may be narrower than its text field would like. */\n  min-width: 0;\n  --chip-height: calc(var(--height, var(--jl-control-md)) - 12px);\n}\n\n.control {\n  flex-wrap: wrap;\n  gap: 4px;\n  padding: 4px 6px;\n  cursor: text;\n}\n\n/* The chips are items of the frame's own flow, so the field follows the last one on its line. */\n.tags {\n  display: contents;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n  max-width: 100%;\n  height: var(--chip-height);\n  padding: 0 3px 0 8px;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius-xs);\n  background: var(--jl-surface-2);\n  color: var(--jl-text);\n  font-size: var(--jl-font-sm);\n  line-height: 1;\n  cursor: default;\n}\n\n:host([size=\"sm\"]) .tag {\n  padding-left: 6px;\n  font-size: var(--jl-font-xs);\n}\n\n.tag.flash {\n  animation: flash 600ms var(--jl-ease);\n}\n\n.tag-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tag-remove {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  padding: 0;\n  border: none;\n  border-radius: 4px;\n  background: none;\n  color: var(--jl-faint);\n  cursor: pointer;\n}\n\n.tag-remove:hover,\n.tag-remove:focus-visible {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n\n.native {\n  flex: 1 0 80px;\n  height: calc(var(--height, var(--jl-control-md)) - 10px);\n  padding-left: 6px;\n}\n\n:host([disabled]) .tag {\n  padding-right: 8px;\n  color: var(--jl-muted);\n}\n\n.popup {\n  min-width: 180px;\n  padding: 4px;\n}\n\n.listbox {\n  position: relative;\n  max-height: 240px;\n  margin: 0;\n  padding: 0;\n  overflow-y: auto;\n  list-style: none;\n}\n\n.option {\n  padding: 6px 10px;\n  border-radius: var(--jl-radius-xs);\n  color: var(--jl-text);\n  font-size: var(--jl-font-md);\n  line-height: 1.4;\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n}\n\n.option.active,\n.option:hover {\n  background: var(--jl-surface-3);\n}\n\nmark {\n  background: none;\n  color: var(--jl-accent);\n  font-weight: 700;\n}\n\n@keyframes flash {\n  30% {\n    border-color: var(--jl-accent-line);\n    background: var(--jl-accent-soft);\n    color: var(--jl-accent-strong);\n  }\n}\n";
+export { jl_tag_input_default as default };

package/dist/molecules/jl-tag-input.d.ts

@@ -0,0 +1,103 @@
+import { JlFormControl } from '../base/jl-form-control';
+import type { ControlSize } from '../types/options.types';
+/**
+ * A field that collects short texts as chips: Enter or a comma adds what was typed, Backspace in the empty field
+ * removes the last chip, a pasted list adds each of its items. The form gets each tag under the field's name.
+ */
+export declare class JlTagInput extends JlFormControl {
+    static readonly selector = "jl-tag-input";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        change: string[];
+    }>>;
+    readonly value: Readonly<Readonly<{
+        get(): string[];
+        set(setter: string[] | ((prevState: string[]) => string[])): void;
+    }>>;
+    readonly placeholder: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The field's name for screen readers, when no visible label names it. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The most tags the field takes; 0 for no limit. */
+    readonly max: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    /** Tags offered in a list while people type. */
+    readonly suggestions: Readonly<Readonly<{
+        get(): string[];
+        set(setter: string[] | ((prevState: string[]) => string[])): void;
+    }>>;
+    readonly required: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    readonly disabled: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** Draws the field in the danger colour, for an error the page found itself. */
+    readonly invalid: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    readonly size: Readonly<Readonly<{
+        get(): ControlSize;
+        set(setter: ((prevState: ControlSize) => ControlSize) | ControlSize): void;
+    }>>;
+    private readonly _listId;
+    private readonly _state;
+    private readonly _nameWatch;
+    private readonly _refs;
+    focus(options?: FocusOptions): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    onDisconnect(): void;
+    protected resetValue(): void;
+    protected setDisabledByForm(disabled: boolean): void;
+    private onType;
+    private onFieldKey;
+    /** Enter adds the suggestion the arrows reached, or the typed text; in an empty field it submits the form. */
+    private onEnter;
+    /** A pasted list adds each of its items; a single word is pasted as text. */
+    private onPaste;
+    private onControlClick;
+    /** On a chip's remove button: arrows move between chips and back to the field, Backspace or Delete removes it. */
+    private onTagKey;
+    /** Adds the typed text as tags; true when there was text to add. */
+    private commitText;
+    private add;
+    private removeAt;
+    private removeAndFocus;
+    private removeLastIfEmpty;
+    private focusLastTag;
+    /** Focuses a chip's remove button; past the last chip, the field. */
+    private focusTag;
+    /** Points at the chips people tried to add again. */
+    private flash;
+    private announce;
+    private isOpen;
+    /** The suggestions that match the typed text and are not tags yet; the list opens while there are some. */
+    private renderMatches;
+    private openList;
+    /** Closes the suggestions; true when they were open, so Escape goes no further. */
+    private closeList;
+    private moveActive;
+    private renderActive;
+    private suggestionAt;
+    private pick;
+    /** The field is a combobox only when it offers suggestions. */
+    private renderSuggestionRole;
+    private renderTags;
+    /** The placeholder shows while there is no tag; chips take its place. */
+    private renderPlaceholder;
+    /** Each tag is its own entry under the field's name, as several checked boxes of one name would be. */
+    private renderFormValue;
+    private renderValidity;
+    private renderDisabled;
+}