@getufy/flint-ui 0.1.0

package/dist/relative-time/flint-relative-time.d.ts

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+export declare function pickUnit(absDiffSeconds: number): {
+    unit: Intl.RelativeTimeFormatUnit;
+    seconds: number;
+};
+/**
+ * Displays a localized time phrase relative to the current date and time.
+ * Uses the browser's `Intl.RelativeTimeFormat` API — no language packs needed.
+ *
+ * @attr {Date|string|number} date - The date to calculate from. Accepts a Date object,
+ *   ISO 8601 string, or Unix timestamp in milliseconds. Defaults to now.
+ * @attr {'long'|'short'|'narrow'} format  - Formatting style (default: `'long'`).
+ * @attr {'always'|'auto'} numeric - When `auto`, values like "yesterday" are used where possible (default: `'auto'`).
+ * @attr {boolean} sync        - Keep the displayed value up to date as time passes.
+ *
+ * @cssprop --flint-relative-time-color      - Text color (default: `inherit`).
+ * @cssprop --flint-relative-time-font-size  - Font size (default: `inherit`).
+ */
+export declare class FlintRelativeTime extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** The date to calculate time from. Accepts a Date, ISO string, or Unix ms timestamp. Defaults to the current date/time. */
+    date: Date | string | number;
+    /** The formatting style to use. */
+    format: 'long' | 'short' | 'narrow';
+    /**
+     * When `auto`, values such as "yesterday" and "tomorrow" will be shown when
+     * possible. When `always`, values such as "1 day ago" and "in 1 day" are used.
+     */
+    numeric: 'always' | 'auto';
+    /** Keep the displayed value up to date as time passes. */
+    sync: boolean;
+    /** BCP 47 language tag for formatting (e.g. "en", "de", "ja"). Inherits from the document when unset. */
+    lang: string;
+    private _timer;
+    updated(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    private _clearTimer;
+    private _scheduleSync;
+    /** Returns how many ms to wait before the displayed value will change. */
+    private _msUntilNextChange;
+    private _parseDate;
+    private _formatText;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'flint-relative-time': FlintRelativeTime;
+    }
+}
+//# sourceMappingURL=flint-relative-time.d.ts.map

package/dist/relative-time/flint-relative-time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flint-relative-time.d.ts","sourceRoot":"","sources":["../../src/relative-time/flint-relative-time.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAC;AAiB3D,wBAAgB,QAAQ,CAAC,cAAc,EAAE,MAAM,GAAG;IAAE,IAAI,EAAE,IAAI,CAAC,sBAAsB,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAKvG;AAMD;;;;;;;;;;;;GAYG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC7C,MAAM,CAAC,MAAM,0BAAqB;IAElC,4HAA4H;IAE5H,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAc;IAE1C,mCAAmC;IAEnC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAU;IAE7C;;;OAGG;IAEH,OAAO,EAAE,QAAQ,GAAG,MAAM,CAAU;IAEpC,0DAA0D;IAE1D,IAAI,UAAS;IAEb,yGAAyG;IAEhG,IAAI,SAAM;IAEnB,OAAO,CAAC,MAAM,CAA8C;IAE5D,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAUrC,oBAAoB;IAKpB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,aAAa;IAUrB,0EAA0E;IAC1E,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,WAAW;IAkBnB,MAAM;CAYT;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,qBAAqB,EAAE,iBAAiB,CAAC;KAC5C;CACJ"}

package/dist/relative-time/flint-relative-time.js

@@ -0,0 +1,2 @@
+import { n as e, t } from "../_shared/flint-relative-time-BFh5nQqz.js";
+export { t as FlintRelativeTime, e as pickUnit };

package/dist/resizable/flint-resizable.d.ts

@@ -0,0 +1,124 @@
+import { LitElement, type PropertyValues } from 'lit';
+/**
+ * Resizable Group: a container that enables resizable panels with draggable handles.
+ *
+ * @fires flint-resizable-change - Fired when panel sizes change via drag or keyboard.
+ * @fires flint-resizable-collapse - Fired when a panel is collapsed.
+ * @fires flint-resizable-expand - Fired when a collapsed panel is expanded.
+ */
+export declare class FlintResizableGroup extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Layout direction — 'horizontal' (row) or 'vertical' (column). */
+    orientation: 'horizontal' | 'vertical';
+    /** Text direction for RTL support. */
+    dir: 'ltr' | 'rtl';
+    private _panels;
+    private _handles;
+    /** Collapsible panels eligible to collapse in the current drag session. */
+    private _collapsibleAtDragStart;
+    /** Accumulated overshoot past minSize per panel (percentage points) in current drag. */
+    private _collapseOvershoot;
+    /** Returns a snapshot of panel sizes as percentages (0-100). */
+    getLayout(): number[];
+    private _collectChildren;
+    private _syncChildren;
+    /**
+     * Builds the CSS value for `--_rg-handle-total` — the sum of all handle
+     * pixel sizes (honouring `with-handle` vs plain).  Panels use this in
+     * `calc()` so their `flex-basis` never pushes a handle off-screen.
+     */
+    private _computeHandleTotal;
+    private _distributeDefaultSizes;
+    private _syncAriaOnHandles;
+    /** @internal – called by handle on pointerdown */
+    _startDrag(): void;
+    /** @internal – called by handle on pointerup / cancel / lost */
+    _endDrag(): void;
+    /** @internal – called by FlintResizablePanel.collapse() */
+    _collapsePanel(panel: FlintResizablePanel): void;
+    /** @internal – called by FlintResizablePanel.expand() */
+    _expandPanel(panel: FlintResizablePanel): void;
+    /** @internal */
+    _handleResize(handle: FlintResizableHandle, delta: number): void;
+    /** @internal – keyboard step resize */
+    _handleKeyResize(handle: FlintResizableHandle, direction: number): void;
+    private _fireChange;
+    updated(changed: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export declare class FlintResizablePanel extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Current size as percentage (0–100). */
+    size: number;
+    /** Default size — applied once on first update. */
+    defaultSize: number;
+    /** Minimum size percentage (0–100). */
+    minSize: number;
+    /** Maximum size percentage (0–100). */
+    maxSize: number;
+    /** Whether the panel can collapse to zero size via drag. */
+    collapsible: boolean;
+    /**
+     * Whether the panel is currently collapsed via the programmatic API.
+     * Set automatically by `collapse()` / `expand()` / `toggle()`.
+     */
+    collapsed: boolean;
+    /** @internal – last non-zero size, used by expand() to restore. */
+    _restoreSize: number;
+    /** @internal */
+    _orientation: 'horizontal' | 'vertical';
+    /** @internal */
+    _hasExplicitSize: boolean;
+    private _firstUpdate;
+    willUpdate(changed: PropertyValues): void;
+    /** @internal */
+    _applySize(): void;
+    connectedCallback(): void;
+    /**
+     * Collapse this panel to zero size, transferring its space to the adjacent
+     * sibling. Sets `collapsed = true` and stores the current size for `expand()`.
+     * No-op if already collapsed.
+     */
+    collapse(): void;
+    /**
+     * Expand this panel back to its previous size (or `defaultSize` as fallback).
+     * Sets `collapsed = false`. No-op if not currently collapsed.
+     */
+    expand(): void;
+    /**
+     * Toggle between collapsed and expanded states.
+     */
+    toggle(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export declare class FlintResizableHandle extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Show a visible drag grip. */
+    withHandle: boolean;
+    /** Disable interaction. */
+    disabled: boolean;
+    /** @internal – set by parent group, reflects to attribute for CSS. */
+    orientation: 'horizontal' | 'vertical';
+    /** @internal */
+    _dir: 'ltr' | 'rtl';
+    private _dragging;
+    private _startPos;
+    private _onPointerDown;
+    private _onPointerMove;
+    private _onPointerUp;
+    private _onPointerCancel;
+    private _onLostPointerCapture;
+    private _onKeyDown;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    private _renderDots;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'flint-resizable-group': FlintResizableGroup;
+        'flint-resizable-panel': FlintResizablePanel;
+        'flint-resizable-handle': FlintResizableHandle;
+    }
+}
+//# sourceMappingURL=flint-resizable.d.ts.map

package/dist/resizable/flint-resizable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flint-resizable.d.ts","sourceRoot":"","sources":["../../src/resizable/flint-resizable.ts"],"names":[],"mappings":"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"}

package/dist/resizable/flint-resizable.js

@@ -0,0 +1,346 @@
+import { t as e } from "../_shared/decorate-DPS9PT8d.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+//#region src/resizable/flint-resizable.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.orientation = "horizontal", this.dir = "ltr", this._panels = [], this._handles = [], this._collapsibleAtDragStart = /* @__PURE__ */ new Set(), this._collapseOvershoot = /* @__PURE__ */ new Map();
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: flex;
+      height: 100%;
+      width: 100%;
+      overflow: hidden;
+      /* Internal: total pixel width/height of all handles — set by JS. */
+      --_rg-handle-total: 0px;
+    }
+    :host([orientation='vertical']) {
+      flex-direction: column;
+    }
+  `;
+	}
+	getLayout() {
+		return this._panels.map((e) => e.size);
+	}
+	_collectChildren() {
+		let e = [], t = [], n = this.querySelectorAll("flint-resizable-panel, flint-resizable-handle");
+		for (let r of n) r.closest("flint-resizable-group") === this && (r instanceof s ? e.push(r) : r instanceof c && t.push(r));
+		this._panels = e, this._handles = t, this._syncChildren();
+	}
+	_syncChildren() {
+		for (let e of this._panels) e._orientation = this.orientation;
+		for (let e of this._handles) e.orientation = this.orientation, e._dir = this.dir;
+		this.style.setProperty("--_rg-handle-total", this._computeHandleTotal()), this._distributeDefaultSizes(), this._syncAriaOnHandles();
+	}
+	_computeHandleTotal() {
+		if (this._handles.length === 0) return "0px";
+		let e = this._handles.map((e) => e.withHandle ? "var(--flint-resizable-handle-active-size, 12px)" : "var(--flint-resizable-handle-size, 4px)");
+		return e.length === 1 ? e[0] : `calc(${e.join(" + ")})`;
+	}
+	_distributeDefaultSizes() {
+		for (let e of this._panels) !e._hasExplicitSize && e.defaultSize > 0 ? (e.size = e.defaultSize, e._hasExplicitSize = !0) : e.size > 0 && (e._hasExplicitSize = !0);
+		let e = 0, t = 0;
+		for (let n of this._panels) n._hasExplicitSize ? e += n.size : t++;
+		if (t > 0) {
+			let n = Math.max(0, 100 - e) / t;
+			for (let e of this._panels) e._hasExplicitSize ||= (e.size = n, !0);
+		}
+		for (let e of this._panels) e._applySize();
+	}
+	_syncAriaOnHandles() {
+		for (let e = 0; e < this._handles.length; e++) {
+			let t = this._handles[e], n = this._panels[e], r = this._panels[e + 1];
+			!n || !r || (t.setAttribute("aria-valuenow", String(Math.round(n.size))), t.setAttribute("aria-valuemin", String(Math.round(n.minSize))), t.setAttribute("aria-valuemax", String(Math.round(n.maxSize))), t.setAttribute("aria-orientation", this.orientation));
+		}
+	}
+	_startDrag() {
+		this._collapsibleAtDragStart.clear(), this._collapseOvershoot.clear();
+		for (let e of this._panels) e.collapsible && this._collapsibleAtDragStart.add(e);
+	}
+	_endDrag() {
+		this._collapsibleAtDragStart.clear(), this._collapseOvershoot.clear();
+	}
+	_collapsePanel(e) {
+		let t = this._panels.indexOf(e);
+		if (t === -1 || e.collapsed) return;
+		let n = this._panels[t + 1] ?? this._panels[t - 1];
+		n && (n.size += e.size, e.size = 0, e.collapsed = !0, e._applySize(), n._applySize(), this._syncAriaOnHandles(), this._fireChange(), this.dispatchEvent(new CustomEvent("flint-resizable-collapse", {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				index: t,
+				layout: this.getLayout()
+			}
+		})));
+	}
+	_expandPanel(e) {
+		let t = this._panels.indexOf(e);
+		if (t === -1 || !e.collapsed) return;
+		let n = this._panels[t + 1] ?? this._panels[t - 1];
+		if (!n) return;
+		let r = e._restoreSize > 0 ? e._restoreSize : Math.max(e.minSize > 0 ? e.minSize : 0, e.defaultSize > 0 ? e.defaultSize : 20), i = n.size - n.minSize, a = Math.min(r, Math.max(0, i));
+		a <= 0 || (e.size = a, n.size = Math.max(n.minSize, n.size - a), e.collapsed = !1, e._applySize(), n._applySize(), this._syncAriaOnHandles(), this._fireChange(), this.dispatchEvent(new CustomEvent("flint-resizable-expand", {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				index: t,
+				layout: this.getLayout()
+			}
+		})));
+	}
+	_handleResize(e, t) {
+		let n = this._handles.indexOf(e);
+		if (n === -1) return;
+		let r = this._panels[n], i = this._panels[n + 1];
+		if (!r || !i) return;
+		let a = this.orientation === "horizontal" && this.dir === "rtl" ? -t : t, o = this.orientation === "horizontal" ? this.getBoundingClientRect().width : this.getBoundingClientRect().height;
+		if (o === 0) return;
+		let s = a / o * 100, c = r.size + s, l = i.size - s;
+		if (c < r.minSize) if (r.size === 0) if (c <= 0) l += c, c = 0;
+		else {
+			let e = r.minSize - c;
+			c = r.minSize, l -= e;
+		}
+		else if (this._collapsibleAtDragStart.has(r)) {
+			let e = (this._collapseOvershoot.get(r) ?? 0) + (r.minSize - c);
+			if (e >= r.minSize / 2) l += c, c = 0, this._collapseOvershoot.delete(r);
+			else {
+				this._collapseOvershoot.set(r, e);
+				let t = r.minSize - c;
+				c = r.minSize, l -= t;
+			}
+		} else {
+			let e = r.minSize - c;
+			c = r.minSize, l -= e;
+		}
+		else this._collapseOvershoot.delete(r);
+		if (l < i.minSize) if (i.size === 0) if (l <= 0) c += l, l = 0;
+		else {
+			let e = i.minSize - l;
+			l = i.minSize, c -= e;
+		}
+		else if (this._collapsibleAtDragStart.has(i)) {
+			let e = (this._collapseOvershoot.get(i) ?? 0) + (i.minSize - l);
+			if (e >= i.minSize / 2) c += l, l = 0, this._collapseOvershoot.delete(i);
+			else {
+				this._collapseOvershoot.set(i, e);
+				let t = i.minSize - l;
+				l = i.minSize, c -= t;
+			}
+		} else {
+			let e = i.minSize - l;
+			l = i.minSize, c -= e;
+		}
+		else this._collapseOvershoot.delete(i);
+		if (r.maxSize < 100 && c > r.maxSize) {
+			let e = c - r.maxSize;
+			c = r.maxSize, l += e;
+		}
+		if (i.maxSize < 100 && l > i.maxSize) {
+			let e = l - i.maxSize;
+			l = i.maxSize, c += e;
+		}
+		c = Math.max(0, Math.min(100, c)), l = Math.max(0, Math.min(100, l)), r.size = c, i.size = l, r._applySize(), i._applySize(), this._syncAriaOnHandles(), this._fireChange();
+	}
+	_handleKeyResize(e, t) {
+		let n = getComputedStyle(this).getPropertyValue("--flint-resizable-step").trim(), r = n ? parseFloat(n) : 5;
+		this._handleResize(e, t * ((this.orientation === "horizontal" ? this.getBoundingClientRect().width : this.getBoundingClientRect().height) * r / 100));
+	}
+	_fireChange() {
+		this.dispatchEvent(new CustomEvent("flint-resizable-change", {
+			bubbles: !0,
+			composed: !0,
+			detail: { layout: this.getLayout() }
+		}));
+	}
+	updated(e) {
+		(e.has("orientation") || e.has("dir")) && this._syncChildren();
+	}
+	render() {
+		return r`<slot @slotchange=${() => this._collectChildren()}></slot>`;
+	}
+};
+e([a({ reflect: !0 })], o.prototype, "orientation", void 0), e([a({ reflect: !0 })], o.prototype, "dir", void 0), o = e([i("flint-resizable-group")], o);
+var s = class extends t {
+	constructor(...e) {
+		super(...e), this.size = 0, this.defaultSize = 0, this.minSize = 0, this.maxSize = 100, this.collapsible = !1, this.collapsed = !1, this._restoreSize = 0, this._orientation = "horizontal", this._hasExplicitSize = !1, this._firstUpdate = !0;
+	}
+	static {
+		this.styles = n`
+    :host {
+      position: relative;
+      overflow: hidden;
+      flex-shrink: 0;
+      flex-grow: 0;
+      min-width: 0;
+      min-height: 0;
+    }
+  `;
+	}
+	willUpdate(e) {
+		this._firstUpdate && (this._firstUpdate = !1, this.defaultSize > 0 && this.size === 0 && (this.size = this.defaultSize, this._hasExplicitSize = !0)), e.has("size") && this._applySize();
+	}
+	_applySize() {
+		this.size > 0 && (this._restoreSize = this.size), this.style.flexBasis = `calc(${this.size} * (1% - var(--_rg-handle-total, 0px) / 100))`;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.size > 0 && (this._hasExplicitSize = !0, this._applySize());
+	}
+	collapse() {
+		this.closest("flint-resizable-group")?._collapsePanel(this);
+	}
+	expand() {
+		this.closest("flint-resizable-group")?._expandPanel(this);
+	}
+	toggle() {
+		this.collapsed ? this.expand() : this.collapse();
+	}
+	render() {
+		return r`<slot></slot>`;
+	}
+};
+e([a({ type: Number })], s.prototype, "size", void 0), e([a({
+	type: Number,
+	attribute: "default-size"
+})], s.prototype, "defaultSize", void 0), e([a({
+	type: Number,
+	attribute: "min-size"
+})], s.prototype, "minSize", void 0), e([a({
+	type: Number,
+	attribute: "max-size"
+})], s.prototype, "maxSize", void 0), e([a({ type: Boolean })], s.prototype, "collapsible", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "collapsed", void 0), s = e([i("flint-resizable-panel")], s);
+var c = class extends t {
+	constructor(...e) {
+		super(...e), this.withHandle = !1, this.disabled = !1, this.orientation = "horizontal", this._dir = "ltr", this._dragging = !1, this._startPos = 0, this._onPointerDown = (e) => {
+			this.disabled || e.button !== 0 || (e.preventDefault(), this._dragging = !0, this._startPos = this.orientation === "horizontal" ? e.clientX : e.clientY, this.setPointerCapture(e.pointerId), this.closest("flint-resizable-group")?._startDrag());
+		}, this._onPointerMove = (e) => {
+			if (!this._dragging) return;
+			if (e.buttons === 0) {
+				this._dragging = !1;
+				return;
+			}
+			let t = this.orientation === "horizontal" ? e.clientX : e.clientY, n = t - this._startPos;
+			this._startPos = t, this.closest("flint-resizable-group")?._handleResize(this, n);
+		}, this._onPointerUp = (e) => {
+			this._dragging && (this._dragging = !1, this.releasePointerCapture(e.pointerId), this.closest("flint-resizable-group")?._endDrag());
+		}, this._onPointerCancel = (e) => {
+			this._dragging && (this._dragging = !1, this.releasePointerCapture(e.pointerId), this.closest("flint-resizable-group")?._endDrag());
+		}, this._onLostPointerCapture = () => {
+			this._dragging = !1, this.closest("flint-resizable-group")?._endDrag();
+		}, this._onKeyDown = (e) => {
+			if (this.disabled) return;
+			let t = this.closest("flint-resizable-group");
+			if (!t) return;
+			let n = 0;
+			this.orientation === "horizontal" ? e.key === "ArrowLeft" ? n = -1 : e.key === "ArrowRight" && (n = 1) : e.key === "ArrowUp" ? n = -1 : e.key === "ArrowDown" && (n = 1), e.key === "Home" ? n = -100 : e.key === "End" && (n = 100), n !== 0 && (e.preventDefault(), t._handleKeyResize(this, n));
+		};
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      outline: none;
+      background: var(--flint-resizable-handle-bg, var(--flint-border-color, #e4e4e7));
+      border-radius: var(--flint-resizable-handle-border-radius, 0px);
+      transition: background var(--flint-resizable-handle-transition, 150ms) ease;
+    }
+    :host(:hover) {
+      background: var(--flint-resizable-handle-hover-bg, var(--flint-primary-color, #2563eb));
+    }
+    :host(:focus-visible) {
+      background: var(--flint-resizable-handle-focus-bg, var(--flint-primary-color, #2563eb));
+      outline: 2px solid var(--flint-resizable-handle-focus-bg, var(--flint-primary-color, #2563eb));
+      outline-offset: 1px;
+    }
+    :host([orientation='horizontal']) {
+      width: var(--flint-resizable-handle-size, 4px);
+      cursor: col-resize;
+      touch-action: none;
+    }
+    :host([orientation='vertical']) {
+      height: var(--flint-resizable-handle-size, 4px);
+      cursor: row-resize;
+      touch-action: none;
+    }
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: var(--flint-resizable-handle-disabled-opacity, 0.5);
+    }
+
+    .grip {
+      display: none;
+      border-radius: var(--flint-border-radius-sm, 2px);
+      background: var(--flint-resizable-grip-bg, var(--flint-background, #fff));
+      z-index: 1;
+    }
+    :host([with-handle]) .grip {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    :host([orientation='horizontal'][with-handle]) .grip {
+      width: var(--flint-resizable-grip-width, 12px);
+      height: var(--flint-resizable-grip-height, 24px);
+    }
+    :host([orientation='vertical'][with-handle]) .grip {
+      width: var(--flint-resizable-grip-height, 24px);
+      height: var(--flint-resizable-grip-width, 12px);
+    }
+    :host([orientation='horizontal'][with-handle]) {
+      width: var(--flint-resizable-handle-active-size, 12px);
+    }
+    :host([orientation='vertical'][with-handle]) {
+      height: var(--flint-resizable-handle-active-size, 12px);
+    }
+
+    .grip-dots {
+      display: flex;
+      gap: var(--flint-resizable-grip-dot-gap, 1px);
+    }
+    :host([orientation='horizontal']) .grip-dots {
+      flex-direction: column;
+    }
+    :host([orientation='vertical']) .grip-dots {
+      flex-direction: row;
+    }
+    .grip-dot {
+      width: var(--flint-resizable-grip-dot-size, 2px);
+      height: var(--flint-resizable-grip-dot-size, 2px);
+      border-radius: 50%;
+      background: var(--flint-resizable-grip-dot-color, var(--flint-text-color-muted, #71717a));
+    }
+  `;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.setAttribute("role", "separator"), this.setAttribute("tabindex", "0"), this.addEventListener("pointerdown", this._onPointerDown), this.addEventListener("pointermove", this._onPointerMove), this.addEventListener("pointerup", this._onPointerUp), this.addEventListener("pointercancel", this._onPointerCancel), this.addEventListener("lostpointercapture", this._onLostPointerCapture), this.addEventListener("keydown", this._onKeyDown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("pointerdown", this._onPointerDown), this.removeEventListener("pointermove", this._onPointerMove), this.removeEventListener("pointerup", this._onPointerUp), this.removeEventListener("pointercancel", this._onPointerCancel), this.removeEventListener("lostpointercapture", this._onLostPointerCapture), this.removeEventListener("keydown", this._onKeyDown);
+	}
+	render() {
+		return r`<div class="grip"><div class="grip-dots">${this._renderDots()}</div></div>`;
+	}
+	_renderDots() {
+		let e = [];
+		for (let t = 0; t < 5; t++) e.push(r`<div class="grip-dot"></div>`);
+		return e;
+	}
+};
+e([a({
+	type: Boolean,
+	reflect: !0,
+	attribute: "with-handle"
+})], c.prototype, "withHandle", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "disabled", void 0), e([a({ reflect: !0 })], c.prototype, "orientation", void 0), c = e([i("flint-resizable-handle")], c);
+//#endregion
+export { o as FlintResizableGroup, c as FlintResizableHandle, s as FlintResizablePanel };

package/dist/scroll-area/flint-scroll-area.d.ts

@@ -0,0 +1,126 @@
+import { LitElement } from 'lit';
+/**
+ * Custom overlay scrollbar. Place inside `flint-scroll-area` with
+ * `slot="scrollbar"` for an explicit horizontal or second-axis bar.
+ *
+ * The parent `flint-scroll-area` calls `setThumb()` and `setVisible()` to
+ * keep this element in sync with the viewport's scroll position.
+ *
+ * @slot  — none (fully shadow DOM)
+ *
+ * @attr {'vertical'|'horizontal'} orientation - Axis this bar controls.
+ *
+ * @cssprop --flint-scrollbar-size              - Bar track width/height (default: `8px`)
+ * @cssprop --flint-scrollbar-thumb-color       - Thumb fill (default: `rgba(0,0,0,.35)`)
+ * @cssprop --flint-scrollbar-thumb-hover-color - Thumb fill on hover/drag
+ * @cssprop --flint-scrollbar-thumb-radius      - Thumb border radius (default: `9999px`)
+ * @cssprop --flint-scrollbar-track-color       - Track background (default: `transparent`)
+ */
+export declare class FlintScrollBar extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Which axis this scrollbar controls. Reflects to attribute. */
+    orientation: 'vertical' | 'horizontal';
+    /** Thumb leading-edge position as percentage of track (0–100). */
+    _thumbPos: number;
+    /** Thumb size as percentage of track (0–100). */
+    _thumbSize: number;
+    private _dragging;
+    private _dragStart;
+    private _scrollStart;
+    /** Push updated thumb geometry from the parent scroll area. */
+    setThumb(pos: number, size: number): void;
+    /** Show or hide the scrollbar (parent controls visibility). */
+    setVisible(visible: boolean): void;
+    private get _area();
+    private _onPointerDown;
+    private _onPointerMove;
+    private _onPointerUp;
+    render(): import("lit-html").TemplateResult<1>;
+}
+/**
+ * Augments native scroll with custom, cross-browser overlay scrollbars.
+ * Native scrollbars are hidden; lightweight custom thumbs are rendered in
+ * shadow DOM and synced to the viewport via scroll + ResizeObserver events.
+ *
+ * @slot           - Scrollable content.
+ * @slot scrollbar - Optional explicit `flint-scroll-bar` elements (e.g. horizontal).
+ *
+ * @attr {'auto'|'always'|'scroll'|'hover'} type
+ *   - `'hover'`  (default) — visible on hover when content overflows
+ *   - `'auto'`             — always visible when content overflows
+ *   - `'always'`           — always visible regardless of overflow
+ *   - `'scroll'`           — visible while scrolling, hidden after ~600 ms
+ * @attr {'ltr'|'rtl'} dir - Text direction. RTL flips the vertical bar to the left.
+ *
+ * @method scrollTo(options)       - Delegates to the inner viewport.
+ * @method scrollBy(options)       - Delegates to the inner viewport.
+ *
+ * @cssprop --flint-scrollbar-size              - Bar width/height (default: `8px`)
+ * @cssprop --flint-scrollbar-thumb-color       - Thumb fill (default: `rgba(0,0,0,.35)`)
+ * @cssprop --flint-scrollbar-thumb-hover-color - Thumb hover/drag fill
+ * @cssprop --flint-scrollbar-thumb-radius      - Thumb border radius (default: `9999px`)
+ * @cssprop --flint-scrollbar-track-color       - Track background (default: `transparent`)
+ */
+export declare class FlintScrollArea extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Controls when the scrollbars appear.
+     * - `'hover'`  (default) — on hover, when content overflows
+     * - `'auto'`             — when content overflows
+     * - `'always'`           — always
+     * - `'scroll'`           — briefly while scrolling
+     */
+    type: 'auto' | 'always' | 'scroll' | 'hover';
+    /** Text direction. `'rtl'` flips the vertical bar to the left side. */
+    dir: 'ltr' | 'rtl';
+    _viewport: HTMLDivElement;
+    private _scrollbarY;
+    private _scrollbarX;
+    private _thumbYPos;
+    private _thumbYSize;
+    private _thumbXPos;
+    private _thumbXSize;
+    private _hasOverflowY;
+    private _hasOverflowX;
+    private _isScrolling;
+    private _resizeObserver?;
+    private _hideTimer;
+    private _draggingY;
+    private _dragYStart;
+    private _scrollYStart;
+    private _draggingX;
+    private _dragXStart;
+    private _scrollXStart;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    /** Scroll the viewport to a position. */
+    scrollTo(options?: ScrollToOptions): void;
+    scrollTo(x: number, y: number): void;
+    /** Scroll the viewport by a relative amount. */
+    scrollBy(options?: ScrollToOptions): void;
+    scrollBy(x: number, y: number): void;
+    _getScrollPos(orientation: 'vertical' | 'horizontal'): number;
+    _getScrollRange(orientation: 'vertical' | 'horizontal'): number;
+    _setScrollPos(orientation: 'vertical' | 'horizontal', pos: number): void;
+    private _onScroll;
+    private _updateOverflow;
+    private _computeThumb;
+    private _syncScrollBars;
+    private _shouldShowBar;
+    private _scrollbarClasses;
+    private _onThumbYDown;
+    private _onThumbYMove;
+    private _onThumbYUp;
+    private _onThumbXDown;
+    private _onThumbXMove;
+    private _onThumbXUp;
+    private _onSlotChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'flint-scroll-area': FlintScrollArea;
+        'flint-scroll-bar': FlintScrollBar;
+    }
+}
+//# sourceMappingURL=flint-scroll-area.d.ts.map

package/dist/scroll-area/flint-scroll-area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flint-scroll-area.d.ts","sourceRoot":"","sources":["../../src/scroll-area/flint-scroll-area.ts"],"names":[],"mappings":"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"}

package/dist/scroll-area/flint-scroll-area.js

@@ -0,0 +1,2 @@
+import { n as e, t } from "../_shared/flint-scroll-area-Dn9yT7ZU.js";
+export { t as FlintScrollArea, e as FlintScrollBar };