@syware/jlib 0.0.0-stage → 0.1.3

package/dist/templates/jl-split-view.js

@@ -0,0 +1,149 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { clampedNumber, oneOf } from "../lib/attributes.js";
+import { clampMin, clampSplit, positionAfterKey, positionAt } from "../lib/split.js";
+import jl_split_view_default from "./jl-split-view.css_raw.js";
+import { css } from "@jadis/core";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/templates/jl-split-view.tsx
+var SPLIT_ORIENTATIONS = ["horizontal", "vertical"];
+var DEFAULT_POSITION = 50;
+var DEFAULT_MIN = 15;
+var FULL = 100;
+var MAX_MIN = 50;
+var PRIMARY_BUTTON = 0;
+var DEFAULT_LABEL = "Resize the panes";
+var SEPARATOR_ORIENTATION = {
+	horizontal: "vertical",
+	vertical: "horizontal"
+};
+var parsePosition = clampedNumber(DEFAULT_POSITION, 0, FULL);
+/**
+* Two panes, `start` and `end`, side by side or one above the other, with a divider to drag between them. The
+* divider also moves with the arrows (Shift for large steps), Home and End; a double click puts it back. `position`
+* is the start pane's share, in percent; each pane keeps at least `min` percent.
+*/
+var JlSplitView = class extends JlElement {
+	static selector = "jl-split-view";
+	/** The new position, in percent, once a drag ends or a key moved the divider. */
+	events = this.useEvents();
+	orientation = this.useChange("horizontal", (value) => {
+		this.reflect("orientation", value);
+		this._refs.divider.setAttribute("aria-orientation", SEPARATOR_ORIENTATION[value]);
+	}, {
+		attribute: "orientation",
+		parse: oneOf(SPLIT_ORIENTATIONS, "horizontal")
+	});
+	/** The start pane's share of the room, in percent. */
+	position = this.useChange(DEFAULT_POSITION, () => this.renderPosition(), {
+		attribute: "position",
+		parse: parsePosition
+	});
+	/** The smallest share each pane keeps, in percent (0 to 50). */
+	min = this.useChange(DEFAULT_MIN, () => this.renderPosition(), {
+		attribute: "min",
+		parse: clampedNumber(DEFAULT_MIN, 0, MAX_MIN)
+	});
+	/** The divider's name for screen readers. */
+	label = this.useChange(DEFAULT_LABEL, (value) => {
+		this._refs.divider.setAttribute("aria-label", value === "" ? DEFAULT_LABEL : value);
+	}, { attribute: "label" });
+	_drag = { from: DEFAULT_POSITION };
+	_refs = this.useRefs((ref) => ({
+		divider: ref(".divider"),
+		split: ref(".split")
+	}));
+	/** Puts the divider back where the page first placed it. */
+	reset() {
+		this.whenRendered(() => this.commit(parsePosition(this.getAttribute("position"))));
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "split",
+			attrs: { part: "base" },
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					class: "pane start",
+					id: "start",
+					attrs: { part: "start" },
+					children: /* @__PURE__ */ jsx("slot", { name: "start" })
+				}),
+				/* @__PURE__ */ jsx("div", {
+					class: "divider",
+					role: "separator",
+					tabIndex: 0,
+					"aria-controls": "start",
+					"aria-valuenow": String(DEFAULT_POSITION),
+					"aria-valuemin": "0",
+					"aria-valuemax": "100",
+					attrs: { part: "divider" },
+					children: /* @__PURE__ */ jsx("span", { class: "grip" })
+				}),
+				/* @__PURE__ */ jsx("div", {
+					class: "pane end",
+					attrs: { part: "end" },
+					children: /* @__PURE__ */ jsx("slot", { name: "end" })
+				})
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_split_view_default}`;
+	}
+	onConnect() {
+		const divider = this._refs.divider;
+		this.on(divider, "pointerdown", (event) => this.startDrag(event));
+		this.on(divider, "pointermove", (event) => this.drag(event));
+		this.on(divider, "pointerup", (event) => this.endDrag(event));
+		this.on(divider, "pointercancel", (event) => this.endDrag(event));
+		this.on(divider, "keydown", (event) => this.onKey(event));
+		this.on(divider, "dblclick", () => this.reset());
+	}
+	current() {
+		return clampSplit(this.position.get(), this.min.get());
+	}
+	startDrag(event) {
+		if (event.button !== PRIMARY_BUTTON) return;
+		event.preventDefault();
+		this._refs.divider.setPointerCapture(event.pointerId);
+		this._drag.from = this.current();
+		this.reflect("dragging", true);
+	}
+	drag(event) {
+		if (!this._refs.divider.hasPointerCapture(event.pointerId)) return;
+		const rect = this._refs.split.getBoundingClientRect();
+		const position = this.orientation.get() === "horizontal" ? positionAt(event.clientX, rect.left, rect.width) : positionAt(event.clientY, rect.top, rect.height);
+		this.position.set(clampSplit(position, this.min.get()));
+	}
+	endDrag(event) {
+		const divider = this._refs.divider;
+		if (!divider.hasPointerCapture(event.pointerId)) return;
+		divider.releasePointerCapture(event.pointerId);
+		this.reflect("dragging", false);
+		if (this.current() !== this._drag.from) this.events.emit("change", this.current());
+	}
+	onKey(event) {
+		const next = positionAfterKey(this.current(), event.key, this.orientation.get(), this.min.get(), event.shiftKey);
+		if (next === null) return;
+		event.preventDefault();
+		this.commit(next);
+	}
+	/** Moves the divider as people asked, and says so when it moved. */
+	commit(position) {
+		const next = clampSplit(position, this.min.get());
+		const moved = next !== this.current();
+		this.position.set(next);
+		if (moved) this.events.emit("change", next);
+	}
+	renderPosition() {
+		const min = clampMin(this.min.get());
+		const position = this.current();
+		this._refs.split.style.setProperty("--position", `${position}%`);
+		const divider = this._refs.divider;
+		divider.setAttribute("aria-valuenow", String(Math.round(position)));
+		divider.setAttribute("aria-valuemin", String(min));
+		divider.setAttribute("aria-valuemax", String(FULL - min));
+	}
+};
+JlSplitView.register();
+export { JlSplitView, SPLIT_ORIENTATIONS };

package/dist/tokens.css

@@ -0,0 +1,188 @@
+/*
+ * The design tokens, as swai and swcode have them: ink and white, flat surfaces separated by lines, and one blue
+ * that marks what is live, selected or waiting for a person. Custom properties cross shadow roots, so every
+ * component reads them. They sit in the `jlib` layer: any unlayered rule of the page overrides them.
+ */
+@layer jlib {
+  :root,
+  [data-theme="light"] {
+    color-scheme: light;
+    --jl-font-sans: "Manrope Variable", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
+    --jl-font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
+
+    --jl-font-xs: 12px;
+    --jl-font-sm: 13px;
+    --jl-font-md: 14px;
+    --jl-font-lg: 16px;
+    --jl-font-xl: 20px;
+    --jl-font-2xl: 28px;
+
+    --jl-text: #0b0b0c;
+    --jl-text-2: #3a3f47;
+    /* Secondary text: 6.2:1 on white. */
+    --jl-muted: #5b616b;
+    /* Icons and decorations only: 3.2:1 on white is enough for them, not for text. */
+    --jl-faint: #8a9099;
+
+    --jl-bg: #ffffff;
+    --jl-surface: #ffffff;
+    --jl-surface-2: #f7f8f9;
+    --jl-surface-3: #eef0f2;
+    --jl-code-bg: #f0f2f4;
+    --jl-line: #e6e8eb;
+    --jl-line-soft: #eef0f2;
+    --jl-line-strong: #d5d9de;
+
+    /* The SyWare logo's blue: marks, focus rings, progress. 3.8:1 on white: enough for shapes, never for text. */
+    --jl-brand: #0e88d3;
+    /* The same hue, deep enough to carry text: buttons, links, the selection. 5.2:1 on white. */
+    --jl-accent: #0c72b0;
+    --jl-accent-strong: #095a8b;
+    --jl-accent-soft: #e9f4fb;
+    --jl-accent-line: #b7dbf2;
+    --jl-on-accent: #ffffff;
+
+    --jl-ok: #17784a;
+    --jl-ok-soft: #ecf6f0;
+    --jl-warn: #9a5b00;
+    --jl-warn-soft: #fcf4e6;
+    --jl-danger: #b42318;
+    --jl-danger-soft: #fdf0ef;
+    --jl-on-danger: #ffffff;
+    --jl-info: #0c72b0;
+    --jl-info-soft: #e9f4fb;
+
+    /* Code: the accent for keywords, quiet colours from the same family for the rest. */
+    --jl-code-keyword: #0c72b0;
+    --jl-code-tag: #095a8b;
+    --jl-code-attribute: #5b48c8;
+    --jl-code-string: #17784a;
+    --jl-code-number: #9a5b00;
+    --jl-code-function: #3d5a80;
+    --jl-code-property: #127a72;
+    --jl-code-comment: #8a9099;
+
+    --jl-radius-xs: 6px;
+    --jl-radius-sm: 8px;
+    --jl-radius: 10px;
+    --jl-radius-lg: 12px;
+    --jl-radius-xl: 20px;
+    --jl-radius-pill: 999px;
+
+    /* Spacing: a 4px grid, for the layouts pages build around the components. */
+    --jl-space-1: 4px;
+    --jl-space-2: 8px;
+    --jl-space-3: 12px;
+    --jl-space-4: 16px;
+    --jl-space-5: 20px;
+    --jl-space-6: 24px;
+    --jl-space-8: 32px;
+    --jl-space-10: 40px;
+    --jl-space-12: 48px;
+    --jl-space-16: 64px;
+
+    --jl-control-sm: 30px;
+    --jl-control-md: 36px;
+    --jl-control-lg: 44px;
+
+    /* Flat: lines separate; only what floats (menus, dialogs, toasts) casts a shadow. */
+    --jl-shadow-sm: 0 1px 2px rgb(11 11 12 / 0.05);
+    --jl-shadow: 0 6px 16px -6px rgb(11 11 12 / 0.12);
+    --jl-shadow-lg: 0 18px 44px -14px rgb(11 11 12 / 0.22);
+    --jl-focus-ring: 0 0 0 3px color-mix(in srgb, var(--jl-brand) 35%, transparent);
+    --jl-scrim: rgb(11 11 12 / 0.38);
+
+    --jl-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
+    --jl-fast: 120ms;
+    --jl-slow: 240ms;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      color-scheme: dark;
+      --jl-text: #eceef1;
+      --jl-text-2: #c3c8cf;
+      --jl-muted: #959ca6;
+      --jl-faint: #6b727c;
+      --jl-bg: #0f1113;
+      --jl-surface: #0f1113;
+      --jl-surface-2: #16191c;
+      --jl-surface-3: #1d2125;
+      --jl-code-bg: #1d2125;
+      --jl-line: #262a2f;
+      --jl-line-soft: #1f2327;
+      --jl-line-strong: #343a41;
+      --jl-brand: #1a9be0;
+      --jl-accent: #3ea6e8;
+      --jl-accent-strong: #6cc0f2;
+      --jl-accent-soft: #0f2a3b;
+      --jl-accent-line: #1e4a66;
+      --jl-on-accent: #04131c;
+      --jl-ok: #4cc38a;
+      --jl-ok-soft: #10261c;
+      --jl-warn: #e5a54b;
+      --jl-warn-soft: #2a2012;
+      --jl-danger: #f0786c;
+      --jl-danger-soft: #3a1a17;
+      --jl-on-danger: #1c0604;
+      --jl-info: #3ea6e8;
+      --jl-info-soft: #0f2a3b;
+      --jl-code-keyword: #3ea6e8;
+      --jl-code-tag: #6cc0f2;
+      --jl-code-attribute: #a99bf0;
+      --jl-code-string: #4cc38a;
+      --jl-code-number: #e5a54b;
+      --jl-code-function: #8fb0d6;
+      --jl-code-property: #4fc1b5;
+      --jl-code-comment: #6b727c;
+      --jl-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
+      --jl-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.6);
+      --jl-shadow-lg: 0 18px 44px -12px rgb(0 0 0 / 0.7);
+      --jl-scrim: rgb(0 0 0 / 0.55);
+    }
+  }
+
+  /* Dark: the same blue, lifted to read on a dark ground, with dark text on the buttons. */
+  [data-theme="dark"] {
+    color-scheme: dark;
+    --jl-text: #eceef1;
+    --jl-text-2: #c3c8cf;
+    --jl-muted: #959ca6;
+    --jl-faint: #6b727c;
+    --jl-bg: #0f1113;
+    --jl-surface: #0f1113;
+    --jl-surface-2: #16191c;
+    --jl-surface-3: #1d2125;
+    --jl-code-bg: #1d2125;
+    --jl-line: #262a2f;
+    --jl-line-soft: #1f2327;
+    --jl-line-strong: #343a41;
+    --jl-brand: #1a9be0;
+    --jl-accent: #3ea6e8;
+    --jl-accent-strong: #6cc0f2;
+    --jl-accent-soft: #0f2a3b;
+    --jl-accent-line: #1e4a66;
+    --jl-on-accent: #04131c;
+    --jl-ok: #4cc38a;
+    --jl-ok-soft: #10261c;
+    --jl-warn: #e5a54b;
+    --jl-warn-soft: #2a2012;
+    --jl-danger: #f0786c;
+    --jl-danger-soft: #3a1a17;
+    --jl-on-danger: #1c0604;
+    --jl-info: #3ea6e8;
+    --jl-info-soft: #0f2a3b;
+    --jl-code-keyword: #3ea6e8;
+    --jl-code-tag: #6cc0f2;
+    --jl-code-attribute: #a99bf0;
+    --jl-code-string: #4cc38a;
+    --jl-code-number: #e5a54b;
+    --jl-code-function: #8fb0d6;
+    --jl-code-property: #4fc1b5;
+    --jl-code-comment: #6b727c;
+    --jl-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
+    --jl-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.6);
+    --jl-shadow-lg: 0 18px 44px -12px rgb(0 0 0 / 0.7);
+    --jl-scrim: rgb(0 0 0 / 0.55);
+  }
+}

package/dist/types/calendar.types.d.ts

@@ -0,0 +1,11 @@
+/** A day on the calendar, without a time or a time zone: what an ISO date (`yyyy-mm-dd`) names. */
+export type CalendarDate = {
+    year: number;
+    /** 1 for January to 12 for December. */
+    month: number;
+    day: number;
+};
+/** A day of the week, counted as `Date#getDay` does: 0 is Sunday, 1 is Monday. */
+export type Weekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+/** How long the name of a weekday is: `Monday`, `Mon` or `M`. */
+export type WeekdayWidth = 'long' | 'short' | 'narrow';

package/dist/types/files.types.d.ts

@@ -0,0 +1,23 @@
+/** What the checks need of a file: a `File` fits, and so does a plain object in tests. */
+export type FileLike = {
+    name: string;
+    type: string;
+    size: number;
+};
+/** Why a file was refused: not of an accepted type, too large, or one too many for a single-file field. */
+export type FileRefusal = 'type' | 'size' | 'count';
+/** What a field takes: the `accept` list of an `<input type="file">`, a size limit in bytes (0: none), and how many. */
+export type FileRules = {
+    accept: string;
+    maxSize: number;
+    multiple: boolean;
+};
+export type RefusedFile<Item extends FileLike = FileLike> = {
+    file: Item;
+    reason: FileRefusal;
+};
+/** The files a field takes, and those it refuses with the reason. */
+export type FileCheck<Item extends FileLike = FileLike> = {
+    accepted: Item[];
+    refused: RefusedFile<Item>[];
+};

package/dist/types/floating.types.d.ts

@@ -0,0 +1,13 @@
+export type Side = 'top' | 'bottom' | 'left' | 'right';
+export type Align = 'start' | 'center' | 'end';
+/** A side of the anchor, and where along that side: `bottom-start` is under the anchor, left edges aligned. */
+export type Placement = Side | `${Side}-start` | `${Side}-end`;
+export type Point = {
+    top: number;
+    left: number;
+};
+export type Size = {
+    width: number;
+    height: number;
+};
+export type Rect = Point & Size;

package/dist/types/fuzzy.types.d.ts

@@ -0,0 +1,10 @@
+/** How well a search matches a text, and which characters of the text it matched. */
+export type FuzzyMatch = {
+    score: number;
+    positions: number[];
+};
+/** A run of letters of a text, matched by the search or not. */
+export type TextSegment = {
+    text: string;
+    marked: boolean;
+};

package/dist/types/highlight.types.d.ts

@@ -0,0 +1,6 @@
+export type CodeLanguage = 'html' | 'css' | 'ts' | 'bash' | 'text';
+export type TokenKind = 'plain' | 'comment' | 'string' | 'number' | 'keyword' | 'tag' | 'attribute' | 'property' | 'function' | 'punctuation';
+export type Token = {
+    kind: TokenKind;
+    text: string;
+};

package/dist/types/hotkey.types.d.ts

@@ -0,0 +1,19 @@
+/** A key combination, as `parseHotkey('mod+shift+k')` reads it. */
+export type Hotkey = {
+    /** The key itself, lower case: `k`, `enter`, `/`. */
+    key: string;
+    /** ⌘ on Apple, Ctrl elsewhere. */
+    mod: boolean;
+    ctrl: boolean;
+    meta: boolean;
+    shift: boolean;
+    alt: boolean;
+};
+/** The parts of a keyboard event a hotkey looks at. */
+export type KeyPress = {
+    key: string;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+    altKey: boolean;
+};

package/dist/types/jl-accordion.types.d.ts

@@ -0,0 +1,2 @@
+/** Plain: items separated by lines on the page. Bordered: the items in a box, lines between them. */
+export type AccordionVariant = 'plain' | 'bordered';

package/dist/types/jl-avatar.types.d.ts

@@ -0,0 +1,10 @@
+/** The four sizes of an avatar: 24, 32, 40 and 56 pixels. */
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarShape = 'circle' | 'square';
+/** A person's presence, shown as a dot at the avatar's corner. */
+export type AvatarStatus = 'online' | 'busy' | 'away' | 'offline';
+/** One person of an avatar group. */
+export type AvatarItem = {
+    name: string;
+    src?: string;
+};

package/dist/types/jl-breadcrumb.types.d.ts

@@ -0,0 +1,6 @@
+/** One level of a breadcrumb: a link when it has an `href`, plain text otherwise. */
+export type BreadcrumbItem = {
+    label: string;
+    href?: string;
+    icon?: string;
+};

package/dist/types/jl-button.types.d.ts

@@ -0,0 +1,3 @@
+export type ButtonVariant = 'secondary' | 'primary' | 'ghost' | 'danger';
+/** What the button does in a form, as a native button's `type`. */
+export type ButtonType = 'button' | 'submit' | 'reset';

package/dist/types/jl-card.types.d.ts

@@ -0,0 +1,2 @@
+/** The room around a card's content; `none` leaves the body edge to edge, for a list or a table. */
+export type CardPadding = 'none' | 'sm' | 'md' | 'lg';

package/dist/types/jl-chip.types.d.ts

@@ -0,0 +1 @@
+export type ChipSize = 'sm' | 'md';

package/dist/types/jl-combobox.types.d.ts

@@ -0,0 +1,8 @@
+/** One choice of a combobox: the field shows its `label` and the form gets its `value`. */
+export type ComboboxOption = {
+    value: string;
+    label: string;
+    /** A second, quieter line under the label. */
+    description?: string;
+    disabled?: boolean;
+};

package/dist/types/jl-command-palette.types.d.ts

@@ -0,0 +1,22 @@
+export type PaletteCommand = {
+    id: string;
+    label: string;
+    /** The heading the command is listed under. */
+    group?: string;
+    icon?: string;
+    /** Keys shown beside it, joined by `+`: `mod+shift+p` (`mod` is ⌘ on Apple, Ctrl elsewhere). */
+    shortcut?: string;
+    /** Other words that find it: `["preferences", "options"]` for "Settings". */
+    keywords?: string[];
+};
+/** A command that matches the search, with the places of the matched letters in its label. */
+export type PaletteMatch = {
+    command: PaletteCommand;
+    score: number;
+    positions: number[];
+};
+/** Commands under one heading, in the order they are listed. */
+export type PaletteGroup = {
+    label: string;
+    matches: PaletteMatch[];
+};

package/dist/types/jl-confirm.types.d.ts

@@ -0,0 +1,10 @@
+/** The colour of the confirm button: the accent for a normal decision, danger for what destroys data. */
+export type ConfirmTone = 'accent' | 'danger';
+/** What `confirmDialog()` asks. */
+export type ConfirmOptions = {
+    heading: string;
+    text?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    tone?: ConfirmTone;
+};

package/dist/types/jl-dialog.types.d.ts

@@ -0,0 +1 @@
+export type DialogSize = 'sm' | 'md' | 'lg' | 'full';

package/dist/types/jl-divider.types.d.ts

@@ -0,0 +1,2 @@
+/** Where a divider's label sits along the line. */
+export type DividerAlign = 'start' | 'center' | 'end';

package/dist/types/jl-drawer.types.d.ts

@@ -0,0 +1,4 @@
+/** The edge of the window the drawer slides from. */
+export type DrawerPlacement = 'right' | 'left' | 'bottom';
+/** The drawer's width (or height, from the bottom). */
+export type DrawerSize = 'sm' | 'md' | 'lg';

package/dist/types/jl-empty.types.d.ts

@@ -0,0 +1,2 @@
+/** sm inside a panel or a card, md for a whole page or section. */
+export type EmptySize = 'sm' | 'md';

package/dist/types/jl-field.types.d.ts

@@ -0,0 +1,2 @@
+/** `vertical` puts the label over the control, `horizontal` beside it. */
+export type FieldOrientation = 'vertical' | 'horizontal';

package/dist/types/jl-input.types.d.ts

@@ -0,0 +1 @@
+export type InputType = 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url' | 'date' | 'time' | 'datetime-local' | 'month' | 'week';

package/dist/types/jl-link.types.d.ts

@@ -0,0 +1,2 @@
+/** default: accent and underlined; quiet: accent, underlined on hover; muted: secondary text, for footers. */
+export type LinkVariant = 'default' | 'quiet' | 'muted';

package/dist/types/jl-menu.types.d.ts

@@ -0,0 +1,22 @@
+/** A choice of a menu: `select` fires with its value. */
+export type MenuAction = {
+    value: string;
+    label: string;
+    icon?: string;
+    /** The keys that do the same, shown at the end: "⌘D". */
+    shortcut?: string;
+    /** A second, quieter line under the label. */
+    description?: string;
+    /** Destroys or removes something: drawn in the danger colour. */
+    danger?: boolean;
+    disabled?: boolean;
+};
+/** A line between groups of choices. */
+export type MenuDivider = {
+    divider: true;
+};
+/** A title over the choices that follow it, up to the next title. */
+export type MenuHeading = {
+    heading: string;
+};
+export type MenuItem = MenuAction | MenuDivider | MenuHeading;

package/dist/types/jl-navbar.types.d.ts

@@ -0,0 +1,6 @@
+/** A link of a navigation bar; the `active` one is the page people are on. */
+export type NavbarLink = {
+    label: string;
+    href: string;
+    active?: boolean;
+};

package/dist/types/jl-progress.types.d.ts

@@ -0,0 +1,3 @@
+/** The colour of a progress bar or ring: the accent while it runs, a semantic colour for what it means. */
+export type ProgressTone = 'accent' | 'ok' | 'warn' | 'danger';
+export type ProgressSize = 'sm' | 'md';

package/dist/types/jl-radio-group.types.d.ts

@@ -0,0 +1,10 @@
+/** One choice of a radio group, with an optional line that explains it. */
+export type RadioOption = {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+};
+export type RadioGroupOrientation = 'vertical' | 'horizontal';
+/** `plain` draws a dot beside each label, `cards` a bordered card per option. */
+export type RadioGroupVariant = 'plain' | 'cards';

package/dist/types/jl-segmented.types.d.ts

@@ -0,0 +1,7 @@
+/** One choice of a segmented control; without a label it shows its icon, and its value names it. */
+export type SegmentedOption = {
+    value: string;
+    label?: string;
+    icon?: string;
+    disabled?: boolean;
+};

package/dist/types/jl-select.types.d.ts

@@ -0,0 +1,12 @@
+/** One choice of a select: `group` gathers it with the others of the same group under that heading. */
+export type SelectOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    group?: string;
+};
+/** A run of options under one heading, or outside any group when `label` is null. */
+export type SelectOptionGroup = {
+    label: string | null;
+    options: SelectOption[];
+};

package/dist/types/jl-side-nav.types.d.ts

@@ -0,0 +1,17 @@
+/** One entry of a side navigation; with `children`, it opens and closes to show them. */
+export type SideNavItem = {
+    id: string;
+    label: string;
+    /** An icon name; the collapsed rail shows only the icons. */
+    icon?: string;
+    /** A link to follow; without it the item is a button that fires `select`. */
+    href?: string;
+    /** A count or a short word beside the label: `3`, `New`. */
+    badge?: string | number;
+    children?: SideNavItem[];
+};
+/** A group of items under an optional heading. */
+export type SideNavSection = {
+    label?: string;
+    items: SideNavItem[];
+};

package/dist/types/jl-skeleton.types.d.ts

@@ -0,0 +1,2 @@
+/** What a skeleton stands for: lines of text, a block (an image, a card), or a round avatar. */
+export type SkeletonShape = 'text' | 'rect' | 'circle';

package/dist/types/jl-slider.types.d.ts

@@ -0,0 +1,5 @@
+/** A tick under the slider's track, at a value, with an optional label. */
+export type SliderMark = {
+    value: number;
+    label?: string;
+};

package/dist/types/jl-split-view.types.d.ts

@@ -0,0 +1,2 @@
+/** `horizontal` puts the panes side by side, `vertical` one above the other. */
+export type SplitOrientation = 'horizontal' | 'vertical';

package/dist/types/jl-stat.types.d.ts

@@ -0,0 +1,2 @@
+/** Which way a figure went: up, down, or unchanged. */
+export type StatTrend = 'up' | 'down' | 'flat';

package/dist/types/jl-steps.types.d.ts

@@ -0,0 +1,8 @@
+/** One step of a process. */
+export type StepItem = {
+    label: string;
+    description?: string;
+};
+export type StepsOrientation = 'horizontal' | 'vertical';
+/** Where a step stands against the current one. */
+export type StepStatus = 'done' | 'current' | 'upcoming';

package/dist/types/jl-switch.types.d.ts

@@ -0,0 +1 @@
+export type SwitchSize = 'sm' | 'md';