@vverchonov/web-components 0.1.0

package/dist/react/table.js

@@ -0,0 +1,14 @@
+import { t as e } from "../table--O5km0Wv.js";
+import * as t from "react";
+import { createComponent as n } from "@lit/react";
+const r = n({
+	tagName: "app-table",
+	elementClass: e,
+	react: t,
+	events: {
+		onTableSort: "table-sort",
+		onTablePage: "table-page",
+		onTableColumnToggle: "table-column-toggle"
+	}
+});
+export { r as Table };

package/dist/react/tabs.d.ts

@@ -0,0 +1,5 @@
+import { EventName } from '@lit/react';
+import { Tabs as TabsElement, TabChangeEventDetail } from '../components/tabs/tabs.ts';
+export declare const Tabs: import('@lit/react').ReactWebComponent<TabsElement, {
+    onTabChange: EventName<CustomEvent<TabChangeEventDetail>>;
+}>;

package/dist/react/tabs.js

@@ -0,0 +1,10 @@
+import { t as e } from "../tabs-C2lP0uxY.js";
+import * as t from "react";
+import { createComponent as n } from "@lit/react";
+const r = n({
+	tagName: "app-tabs",
+	elementClass: e,
+	react: t,
+	events: { onTabChange: "tab-change" }
+});
+export { r as Tabs };

package/dist/react/toggle.d.ts

@@ -0,0 +1,6 @@
+import { EventName } from '@lit/react';
+import { Toggle as ToggleElement } from '../components/toggle/toggle.ts';
+import { ToggleChangeEventDetail } from '../components/toggle/toggle-types.ts';
+export declare const Toggle: import('@lit/react').ReactWebComponent<ToggleElement, {
+    onToggleChange: EventName<CustomEvent<ToggleChangeEventDetail>>;
+}>;

package/dist/react/toggle.js

@@ -0,0 +1,10 @@
+import { t as e } from "../toggle-D6UMZ8UZ.js";
+import * as t from "react";
+import { createComponent as n } from "@lit/react";
+const r = n({
+	tagName: "app-toggle",
+	elementClass: e,
+	react: t,
+	events: { onToggleChange: "toggle-change" }
+});
+export { r as Toggle };

package/dist/react.js

@@ -0,0 +1,12 @@
+import { Button as e } from "./react/button.js";
+import { DropdownButton as t } from "./react/dropdown-button.js";
+import { Input as n } from "./react/input.js";
+import { Menu as r } from "./react/menu.js";
+import { Modal as i } from "./react/modal.js";
+import { Selector as a } from "./react/selector.js";
+import { Table as o } from "./react/table.js";
+import { Tabs as s } from "./react/tabs.js";
+import { Toggle as c } from "./react/toggle.js";
+import { FormLayout as l } from "./react/form-layout.js";
+import { Layout as u } from "./react/layout.js";
+export { e as Button, t as DropdownButton, l as FormLayout, n as Input, u as Layout, r as Menu, i as Modal, a as Selector, o as Table, s as Tabs, c as Toggle };

package/dist/selector-Bl7Nbkqo.js

@@ -0,0 +1,300 @@
+import { LitElement as e, html as t, nothing as n, unsafeCSS as r } from "lit";
+import { customElement as i, property as a, state as o } from "lit/decorators.js";
+import { repeat as s } from "lit/directives/repeat.js";
+var c = ":host{display:block}.wrapper{flex-direction:column;gap:.375rem;display:flex}.label{color:var(--color-text);font-size:.875rem;font-weight:500;line-height:1.25}.trigger{align-items:center;gap:var(--selector-chip-gap);min-height:var(--selector-min-height);padding:.3125rem 2rem .3125rem var(--input-padding-inline);background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-input);cursor:pointer;transition:border-color var(--selector-transition-duration) var(--ease-emphasized), box-shadow var(--selector-transition-duration) var(--ease-emphasized);box-sizing:border-box;width:100%;font-size:var(--input-font-size);color:var(--color-text);text-align:left;outline:none;flex-wrap:wrap;display:flex;position:relative}.trigger:hover:not(.is-disabled){border-color:var(--color-border-strong);box-shadow:0 0 0 1px var(--color-border-strong)}.trigger:focus-visible:not(.is-disabled),.trigger.is-open:not(.is-disabled){border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary)}.trigger.is-disabled{opacity:.5;cursor:not-allowed;background:var(--color-surface-elevated)}.chevron{right:var(--input-padding-inline);color:var(--color-text-muted);pointer-events:none;transition:transform var(--selector-transition-duration) var(--ease-emphasized);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}.trigger.is-open .chevron{transform:translateY(-50%)rotate(180deg)}.placeholder{color:var(--color-text-muted);user-select:none}.single-value{text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:.375rem;display:flex;overflow:hidden}.chip{padding:var(--selector-chip-padding-block) var(--selector-chip-padding-inline);font-size:var(--selector-chip-font-size);background:var(--color-primary-muted);color:var(--color-text);border-radius:var(--radius-full);white-space:nowrap;align-items:center;gap:.25rem;max-width:10rem;line-height:1.25;display:inline-flex}.chip-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.chip-icon{width:1em;height:1em;color:var(--color-text-muted);flex-shrink:0;align-items:center;display:inline-flex}.chip-remove{border-radius:var(--radius-full);width:1rem;height:1rem;color:var(--color-text-muted);cursor:pointer;transition:color .15s var(--ease-emphasized), background .15s var(--ease-emphasized);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex}.chip-remove:hover{color:var(--color-invalid);background:var(--color-invalid-muted)}.chip-remove:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.panel{z-index:9999;min-width:180px;max-height:var(--selector-panel-max-height);padding:var(--dropdown-padding);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);display:none;position:fixed;overflow-y:auto;box-shadow:0 4px 12px oklch(0% 0 0/.12)}.panel.is-open{flex-direction:column;display:flex}.search-wrapper{flex-shrink:0;padding:.25rem .25rem .375rem}.search-input{box-sizing:border-box;width:100%;font-size:var(--selector-chip-font-size);color:var(--color-text);background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:calc(var(--radius-card) - 2px);transition:border-color var(--selector-transition-duration) var(--ease-emphasized);outline:none;padding:.375rem .5rem}.search-input::placeholder{color:var(--color-text-muted)}.search-input:focus-visible{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}.option-list{flex-direction:column;flex:1;gap:2px;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.group-header{text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted);user-select:none;padding:.5rem .5rem .25rem;font-size:.75rem;font-weight:600}.option{width:100%;padding:var(--dropdown-item-padding-block) var(--dropdown-item-padding-inline);font-size:var(--dropdown-item-font-size);text-align:left;color:var(--color-text);border-radius:calc(var(--radius-card) - 2px);cursor:pointer;transition:background-color .15s var(--ease-emphasized);background:0 0;border:none;outline:none;align-items:center;gap:.5rem;font-weight:400;display:flex}.option:hover:not(.is-disabled){background:var(--color-primary-muted)}.option:focus-visible:not(.is-disabled){background:var(--color-primary-muted);outline:none}.option.is-focused:not(.is-disabled){background:var(--color-primary-muted)}.option.is-selected{color:var(--color-primary);font-weight:500}.option.is-disabled{opacity:.45;cursor:not-allowed}.option-check{width:1.125em;height:1.125em;color:var(--color-primary);opacity:0;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.option.is-selected .option-check{opacity:1}.option-icon{width:1.25em;height:1.25em;color:var(--color-text-muted);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.option-icon:empty{display:none}.option-label{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.empty-message{font-size:var(--dropdown-item-font-size);color:var(--color-text-muted);text-align:center;padding:.75rem .5rem}:host([state=valid]) .trigger{border-color:var(--color-valid)}:host([state=valid]) .trigger:focus-visible,:host([state=valid]) .trigger.is-open{box-shadow:0 0 0 2px var(--color-valid)}:host([state=invalid]) .trigger{border-color:var(--color-invalid);background:var(--color-invalid-muted)}:host([state=invalid]) .trigger:focus-visible,:host([state=invalid]) .trigger.is-open{box-shadow:0 0 0 2px var(--color-invalid)}.error-text{color:var(--color-invalid);font-size:.8125rem;line-height:1.4}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}";
+function l(e, t, n, r) {
+	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
+	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
+	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
+	return i > 3 && a && Object.defineProperty(t, n, a), a;
+}
+var u = t`
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
+       fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+       stroke-linejoin="round" aria-hidden="true">
+    <polyline points="6 9 12 15 18 9"></polyline>
+  </svg>
+`, d = t`
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
+       fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+       stroke-linejoin="round" aria-hidden="true">
+    <polyline points="20 6 9 17 4 12"></polyline>
+  </svg>
+`, f = t`
+  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"
+       fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
+       stroke-linejoin="round" aria-hidden="true">
+    <line x1="18" y1="6" x2="6" y2="18"></line>
+    <line x1="6" y1="6" x2="18" y2="18"></line>
+  </svg>
+`, p = 0, m = class extends e {
+	static {
+		this.styles = [r(c)];
+	}
+	connectedCallback() {
+		super.connectedCallback(), document.addEventListener("click", this._onDocumentClick), document.addEventListener("keydown", this._onDocumentKeydown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), document.removeEventListener("click", this._onDocumentClick), document.removeEventListener("keydown", this._onDocumentKeydown);
+	}
+	get _filteredItems() {
+		if (!this._search) return this.items;
+		let e = this._search.toLowerCase();
+		return this.items.filter((t) => t.label.toLowerCase().includes(e));
+	}
+	_isSelected(e) {
+		return this.value.includes(e);
+	}
+	_getOptionById(e) {
+		return this.items.find((t) => t.value === e);
+	}
+	/**
+	* Returns filtered items organized by group.
+	* Ungrouped items come first, then each group in the order defined by `this.groups`.
+	*/ _getGroupedItems() {
+		let e = this._filteredItems;
+		if (this.groups.length === 0) return [{
+			group: null,
+			items: e
+		}];
+		let t = [], n = /* @__PURE__ */ new Map();
+		for (let e of this.groups) n.set(e.key, []);
+		for (let r of e) r.group && n.has(r.group) ? n.get(r.group).push(r) : t.push(r);
+		let r = [];
+		t.length && r.push({
+			group: null,
+			items: t
+		});
+		for (let e of this.groups) {
+			let t = n.get(e.key);
+			t.length && r.push({
+				group: e,
+				items: t
+			});
+		}
+		return r;
+	}
+	/**
+	* Flat list of visible option values (for keyboard index tracking).
+	* Skips disabled items.
+	*/ get _navigableValues() {
+		return this._filteredItems.filter((e) => !e.disabled).map((e) => e.value);
+	}
+	_select(e) {
+		let t = this._getOptionById(e);
+		if (!t || t.disabled) return;
+		let n;
+		this.multiple ? n = this._isSelected(e) ? this.value.filter((t) => t !== e) : [...this.value, e] : (n = this._isSelected(e) ? [] : [e], this._close()), this.value = n, this._dispatchChange(n), this._announceLive(t, n.includes(e));
+	}
+	_deselect(e) {
+		let t = this.value.filter((t) => t !== e);
+		this.value = t, this._dispatchChange(t);
+		let n = this._getOptionById(e);
+		n && this._announceLive(n, !1);
+	}
+	_dispatchChange(e) {
+		this.dispatchEvent(new CustomEvent("selector-change", {
+			detail: { value: e },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_announceLive(e, t) {
+		this._liveMessage = t ? `${e.label} selected` : `${e.label} removed`;
+	}
+	_toggle() {
+		this.disabled || (this._open ? this._close() : this._openPanel());
+	}
+	_openPanel() {
+		this._open = !0, this._search = "", this._focusedIndex = -1, this.updateComplete.then(() => {
+			this._positionPanel(), this.searchable && this.shadowRoot?.querySelector(".search-input")?.focus();
+		});
+	}
+	_close() {
+		this._open = !1, this._search = "", this._focusedIndex = -1;
+	}
+	_positionPanel() {
+		let e = this.shadowRoot?.querySelector(".trigger"), t = this.shadowRoot?.querySelector(".panel");
+		if (!e || !t) return;
+		let n = e.getBoundingClientRect();
+		t.style.width = `${n.width}px`, t.style.left = `${n.left}px`;
+		let r = window.innerHeight - n.bottom - 8;
+		r < t.scrollHeight && n.top > r ? (t.style.bottom = `${window.innerHeight - n.top + 4}px`, t.style.top = "auto") : (t.style.top = `${n.bottom + 4}px`, t.style.bottom = "auto");
+	}
+	_onTriggerKeydown(e) {
+		switch (e.key) {
+			case "ArrowDown":
+			case "Enter":
+			case " ":
+				e.preventDefault(), this._open || (this._openPanel(), this.updateComplete.then(() => {
+					this._focusedIndex = 0, this._scrollToFocused();
+				}));
+				break;
+			case "ArrowUp":
+				e.preventDefault(), this._open || (this._openPanel(), this.updateComplete.then(() => {
+					this._focusedIndex = this._navigableValues.length - 1, this._scrollToFocused();
+				}));
+				break;
+		}
+	}
+	_onPanelKeydown(e) {
+		let t = this._navigableValues;
+		if (t.length) switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), this._focusedIndex = this._focusedIndex < t.length - 1 ? this._focusedIndex + 1 : 0, this._scrollToFocused();
+				break;
+			case "ArrowUp":
+				e.preventDefault(), this._focusedIndex = this._focusedIndex > 0 ? this._focusedIndex - 1 : t.length - 1, this._scrollToFocused();
+				break;
+			case "Home":
+				e.preventDefault(), this._focusedIndex = 0, this._scrollToFocused();
+				break;
+			case "End":
+				e.preventDefault(), this._focusedIndex = t.length - 1, this._scrollToFocused();
+				break;
+			case "Enter":
+			case " ":
+				e.preventDefault(), this._focusedIndex >= 0 && this._focusedIndex < t.length && this._select(t[this._focusedIndex]);
+				break;
+			case "Escape":
+				e.preventDefault(), this._close(), this.shadowRoot?.querySelector(".trigger")?.focus();
+				break;
+		}
+	}
+	_scrollToFocused() {
+		this.updateComplete.then(() => {
+			(this.shadowRoot?.querySelector(".option.is-focused"))?.scrollIntoView({ block: "nearest" });
+		});
+	}
+	_onSearchInput(e) {
+		this._search = e.target.value, this._focusedIndex = -1;
+	}
+	_onChipRemove(e, t) {
+		e.stopPropagation(), this._deselect(t);
+	}
+	_renderOptionIcon(e) {
+		return e.icon == null ? n : typeof e.icon == "string" ? t`<span class="option-icon"><slot name=${`icon-${e.icon}`}></slot></span>` : t`<span class="option-icon">${e.icon}</span>`;
+	}
+	_renderChipIcon(e) {
+		return e.icon == null || typeof e.icon == "string" ? n : t`<span class="chip-icon">${e.icon}</span>`;
+	}
+	_renderTriggerContent() {
+		if (this.value.length === 0) return t`<span class="placeholder">${this.placeholder}</span>`;
+		if (!this.multiple) {
+			let e = this._getOptionById(this.value[0]);
+			return e ? t`
+        <span class="single-value">
+          ${this._renderChipIcon(e)}
+          ${e.label}
+        </span>
+      ` : t`<span class="placeholder">${this.placeholder}</span>`;
+		}
+		return s(this.value, (e) => e, (e) => {
+			let r = this._getOptionById(e);
+			return r ? t`
+          <span class="chip">
+            ${this._renderChipIcon(r)}
+            <span class="chip-label">${r.label}</span>
+            <button
+              type="button"
+              class="chip-remove"
+              aria-label="Remove ${r.label}"
+              @click=${(t) => this._onChipRemove(t, e)}
+              @keydown=${(t) => {
+				(t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), this._deselect(e));
+			}}
+            >${f}</button>
+          </span>
+        ` : n;
+		});
+	}
+	_renderOptions() {
+		let e = this._getGroupedItems(), r = this._navigableValues;
+		return e.some((e) => e.items.length > 0) ? e.map(({ group: e, items: i }) => t`
+      ${e ? t`<div class="group-header" role="presentation">${e.label}</div>` : n}
+      ${s(i, (e) => e.value, (e) => {
+			let i = this._isSelected(e.value), a = r.indexOf(e.value) === this._focusedIndex;
+			return t`
+            <div
+              role="option"
+              aria-selected=${i ? "true" : "false"}
+              aria-disabled=${e.disabled ? "true" : "false"}
+              id=${`${this._uid}-opt-${e.value}`}
+              class="option ${i ? "is-selected" : ""} ${a ? "is-focused" : ""} ${e.disabled ? "is-disabled" : ""}"
+              @click=${() => this._select(e.value)}
+            >
+              ${this.multiple ? t`<span class="option-check">${d}</span>` : n}
+              ${this._renderOptionIcon(e)}
+              <span class="option-label">${e.label}</span>
+            </div>
+          `;
+		})}
+    `) : t`<div class="empty-message">No options found</div>`;
+	}
+	render() {
+		let e = `${this._uid}-error`, r = this.state === "invalid" && this.errorMessage, i = `${this._uid}-listbox`, a = this._navigableValues, o = this._focusedIndex >= 0 && this._focusedIndex < a.length ? `${this._uid}-opt-${a[this._focusedIndex]}` : void 0;
+		return t`
+      <div class="wrapper">
+        ${this.label ? t`<label id=${`${this._uid}-label`} class="label">${this.label}</label>` : n}
+        <div
+          class="trigger ${this._open ? "is-open" : ""} ${this.disabled ? "is-disabled" : ""}"
+          role="combobox"
+          aria-expanded=${this._open ? "true" : "false"}
+          aria-haspopup="listbox"
+          aria-owns=${i}
+          aria-labelledby=${this.label ? `${this._uid}-label` : n}
+          aria-describedby=${r ? e : n}
+          aria-activedescendant=${o ?? n}
+          tabindex=${this.disabled ? "-1" : "0"}
+          @click=${this._toggle}
+          @keydown=${this._onTriggerKeydown}
+        >
+          ${this._renderTriggerContent()}
+          <span class="chevron">${u}</span>
+        </div>
+
+        <div
+          id=${i}
+          class="panel ${this._open ? "is-open" : ""}"
+          role="listbox"
+          aria-multiselectable=${this.multiple ? "true" : "false"}
+          aria-label=${this.label || "Options"}
+          @keydown=${this._onPanelKeydown}
+        >
+          ${this.searchable ? t`
+            <div class="search-wrapper">
+              <input
+                type="text"
+                class="search-input"
+                placeholder="Search…"
+                .value=${this._search}
+                @input=${this._onSearchInput}
+                @keydown=${this._onPanelKeydown}
+                aria-label="Search options"
+              />
+            </div>
+          ` : n}
+          <div class="option-list">
+            ${this._renderOptions()}
+          </div>
+        </div>
+
+        <span class="sr-only" aria-live="polite">${this._liveMessage}</span>
+
+        ${r ? t`<span id=${e} class="error-text" role="alert">${this.errorMessage}</span>` : n}
+      </div>
+    `;
+	}
+	constructor(...e) {
+		super(...e), this._uid = `app-selector-${++p}`, this.items = [], this.groups = [], this.value = [], this.label = "", this.placeholder = "Select…", this.searchable = !1, this.multiple = !1, this.disabled = !1, this.name = "", this.state = "default", this.errorMessage = "", this._open = !1, this._search = "", this._focusedIndex = -1, this._liveMessage = "", this._onDocumentClick = (e) => {
+			this._open && (e.composedPath().includes(this) || this._close());
+		}, this._onDocumentKeydown = (e) => {
+			e.key === "Escape" && this._open && (this._close(), this.shadowRoot?.querySelector(".trigger")?.focus());
+		};
+	}
+};
+l([a({ attribute: !1 })], m.prototype, "items", void 0), l([a({ attribute: !1 })], m.prototype, "groups", void 0), l([a({ attribute: !1 })], m.prototype, "value", void 0), l([a({ type: String })], m.prototype, "label", void 0), l([a({ type: String })], m.prototype, "placeholder", void 0), l([a({ type: Boolean })], m.prototype, "searchable", void 0), l([a({ type: Boolean })], m.prototype, "multiple", void 0), l([a({ type: Boolean })], m.prototype, "disabled", void 0), l([a({ type: String })], m.prototype, "name", void 0), l([a({ type: String })], m.prototype, "state", void 0), l([a({
+	type: String,
+	attribute: "error-message"
+})], m.prototype, "errorMessage", void 0), l([o()], m.prototype, "_open", void 0), l([o()], m.prototype, "_search", void 0), l([o()], m.prototype, "_focusedIndex", void 0), l([o()], m.prototype, "_liveMessage", void 0), m = l([i("app-selector")], m);
+export { m as t };

package/dist/selector.js

@@ -0,0 +1,2 @@
+import { t as e } from "./selector-Bl7Nbkqo.js";
+export { e as Selector };

package/dist/styles/tailwind-base.d.ts

@@ -0,0 +1 @@
+export declare const tailwindBase: import('lit').CSSResult;

package/dist/table--O5km0Wv.js

@@ -0,0 +1,279 @@
+import { LitElement as e, html as t, nothing as n, unsafeCSS as r } from "lit";
+import { customElement as i, property as a, state as o } from "lit/decorators.js";
+import { repeat as s } from "lit/directives/repeat.js";
+var c = ":host{color:var(--table-text-color,var(--color-text));font-size:.875rem;display:block}.toolbar{justify-content:flex-end;margin-block-end:.5rem;display:flex;position:relative}.toggle-btn{color:var(--color-text-muted);background:var(--color-surface-elevated);border:1px solid var(--table-border-color,var(--color-border));border-radius:var(--radius-button);cursor:pointer;align-items:center;gap:.375rem;padding:.375rem .625rem;font-size:.8125rem;font-weight:500;transition:color .15s,background .15s;display:inline-flex}.toggle-btn:hover{color:var(--color-text);background:var(--color-primary-muted)}.toggle-panel{z-index:10;background:var(--color-surface);border:1px solid var(--table-border-color,var(--color-border));border-radius:var(--radius-card);min-width:160px;padding:.375rem;position:absolute;top:calc(100% + 4px);right:0;box-shadow:0 4px 12px oklch(0% 0 0/.1)}.toggle-item{border-radius:calc(var(--radius-card) - 2px);cursor:pointer;user-select:none;align-items:center;gap:.5rem;padding:.375rem .5rem;font-size:.8125rem;display:flex}.toggle-item:hover{background:var(--color-primary-muted)}.toggle-item input[type=checkbox]{accent-color:var(--color-primary);cursor:pointer;width:14px;height:14px}.table-wrapper{border:1px solid var(--table-border-color,var(--color-border));border-radius:var(--radius-card);position:relative;overflow-x:auto}.loading-overlay{background:oklch(from var(--color-surface) l c h / .7);z-index:2;border-radius:inherit;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.spinner{border:2px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;width:1.5rem;height:1.5rem;animation:.6s linear infinite table-spin}@keyframes table-spin{to{transform:rotate(360deg)}}table{table-layout:fixed;border-collapse:collapse;background:var(--table-body-bg,var(--color-surface));width:100%}thead{z-index:1;position:sticky;top:0}th{padding:var(--table-cell-padding-block,.5rem) var(--table-cell-padding-inline,.75rem);font-weight:var(--table-header-font-weight,600);text-align:left;background:var(--table-header-bg,var(--color-surface-elevated));border-bottom:1px solid var(--table-border-color,var(--color-border));white-space:nowrap}.group-row th{border-bottom:none;padding-block-end:.25rem}.group-header{text-align:center;border-inline:1px solid var(--table-border-color,var(--color-border));color:var(--color-primary);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;border-bottom:2px solid var(--color-primary)!important}.group-empty{border-inline:none;border-bottom:1px solid #0000!important}th.sortable{padding:0}.sort-btn{width:100%;padding:var(--table-cell-padding-block,.5rem) var(--table-cell-padding-inline,.75rem);font-weight:inherit;font-size:inherit;text-align:left;cursor:pointer;color:inherit;white-space:nowrap;background:0 0;border:none;align-items:center;gap:.375rem;display:flex}.sort-btn:hover{background:var(--color-primary-muted)}.sort-icon{color:var(--color-text-muted);flex-shrink:0;transition:color .15s}.sort-icon--none .sort-asc,.sort-icon--none .sort-desc{opacity:.35}.sort-icon--asc{color:var(--color-primary)}.sort-icon--asc .sort-asc{opacity:1}.sort-icon--asc .sort-desc{opacity:0}.sort-icon--desc{color:var(--color-primary)}.sort-icon--desc .sort-asc{opacity:0}.sort-icon--desc .sort-desc{opacity:1}td{padding:var(--table-cell-padding-block,.5rem) var(--table-cell-padding-inline,.75rem);border-bottom:1px solid var(--table-border-color,var(--color-border));vertical-align:middle}tbody tr:last-child td{border-bottom:none}tbody tr:hover td{background:var(--color-primary-muted)}.empty-cell{text-align:center;color:var(--color-text-muted);padding-block:2rem}.pagination{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-block-start:.75rem;display:flex}.page-info{color:var(--color-text-muted);font-size:.8125rem}.page-controls{align-items:center;gap:.25rem;display:flex}.page-btn{border:1px solid var(--table-border-color,var(--color-border));border-radius:var(--radius-button);background:var(--color-surface);min-width:2rem;height:2rem;color:var(--color-text);cursor:pointer;justify-content:center;align-items:center;padding-inline:.375rem;font-size:.8125rem;transition:background .15s,color .15s,border-color .15s;display:inline-flex}.page-btn:hover:not(:disabled){background:var(--color-primary-muted);border-color:var(--color-primary);color:var(--color-primary)}.page-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}.page-btn:disabled{opacity:.4;cursor:not-allowed}.page-ellipsis{min-width:2rem;height:2rem;color:var(--color-text-muted);justify-content:center;align-items:center;font-size:.8125rem;display:inline-flex}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}";
+function l(e, t, n, r) {
+	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
+	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
+	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
+	return i > 3 && a && Object.defineProperty(t, n, a), a;
+}
+var u = class extends e {
+	static {
+		this.styles = [r(c)];
+	}
+	willUpdate(e) {
+		if (e.has("columns")) {
+			let e = /* @__PURE__ */ new Set();
+			for (let t of this.columns) t.hidden && e.add(t.key);
+			this._hiddenCols = e;
+		}
+		(e.has("rows") || e.has("pageSize")) && !this._isServerPagination && (this.page = 1);
+	}
+	get _visibleCols() {
+		return this.columns.filter((e) => !this._hiddenCols.has(e.key));
+	}
+	get _hasGroups() {
+		return this.columns.some((e) => e.group);
+	}
+	get _hasPagination() {
+		return this.pageSize > 0;
+	}
+	get _isServerPagination() {
+		return this.totalItems > 0 && this.pageSize > 0;
+	}
+	get _sortedRows() {
+		if (this.externalSort || !this._sortCol) return this.rows;
+		let e = this._sortCol, t = this._sortDir === "asc" ? 1 : -1;
+		return [...this.rows].sort((n, r) => {
+			let i = n[e], a = r[e];
+			return i == null && a == null ? 0 : i == null ? t : a == null ? -t : typeof i == "number" && typeof a == "number" ? (i - a) * t : String(i).localeCompare(String(a)) * t;
+		});
+	}
+	get _pagedRows() {
+		if (this._isServerPagination || !this._hasPagination) return this._sortedRows;
+		let e = (this.page - 1) * this.pageSize;
+		return this._sortedRows.slice(e, e + this.pageSize);
+	}
+	get _totalPages() {
+		return this._isServerPagination ? Math.max(1, Math.ceil(this.totalItems / this.pageSize)) : this._hasPagination ? Math.max(1, Math.ceil(this.rows.length / this.pageSize)) : 1;
+	}
+	_dispatchSort(e, t) {
+		this.dispatchEvent(new CustomEvent("table-sort", {
+			detail: {
+				column: e,
+				dir: t,
+				pageSize: this.pageSize
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_dispatchPage(e) {
+		this.dispatchEvent(new CustomEvent("table-page", {
+			detail: {
+				page: e,
+				pageSize: this.pageSize
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_dispatchColumnToggle(e, t) {
+		this.dispatchEvent(new CustomEvent("table-column-toggle", {
+			detail: {
+				column: e,
+				hidden: t
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_handleSortClick(e) {
+		this._sortCol === e ? this._sortDir = this._sortDir === "asc" ? "desc" : "asc" : (this._sortCol = e, this._sortDir = "asc"), this._isServerPagination || (this.page = 1), this._dispatchSort(this._sortCol, this._sortDir);
+	}
+	_handleToggleColumn(e) {
+		let t = new Set(this._hiddenCols), n = !t.has(e);
+		n ? t.add(e) : t.delete(e), this._hiddenCols = t, this._dispatchColumnToggle(e, n);
+	}
+	_handlePageChange(e) {
+		this.page = Math.max(1, Math.min(e, this._totalPages)), this._dispatchPage(this.page);
+	}
+	_renderColumnToggle() {
+		return t`
+      <div class="toolbar">
+        <button
+          class="toggle-btn"
+          aria-expanded=${this._togglePanelOpen}
+          @click=${() => {
+			this._togglePanelOpen = !this._togglePanelOpen;
+		}}
+        >
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+            <rect x="1" y="3" width="14" height="1.5" rx=".75" fill="currentColor"/>
+            <rect x="1" y="7.25" width="14" height="1.5" rx=".75" fill="currentColor"/>
+            <rect x="1" y="11.5" width="14" height="1.5" rx=".75" fill="currentColor"/>
+            <circle cx="5" cy="3.75" r="2" fill="var(--color-surface)" stroke="currentColor" stroke-width="1.5"/>
+            <circle cx="11" cy="8" r="2" fill="var(--color-surface)" stroke="currentColor" stroke-width="1.5"/>
+            <circle cx="5" cy="12.25" r="2" fill="var(--color-surface)" stroke="currentColor" stroke-width="1.5"/>
+          </svg>
+          Columns
+        </button>
+
+        ${this._togglePanelOpen ? t`
+          <div class="toggle-panel" role="menu">
+            ${this.columns.map((e) => t`
+              <label class="toggle-item" role="menuitemcheckbox">
+                <input
+                  type="checkbox"
+                  .checked=${!this._hiddenCols.has(e.key)}
+                  @change=${() => this._handleToggleColumn(e.key)}
+                />
+                ${e.label}
+              </label>
+            `)}
+          </div>
+        ` : n}
+      </div>
+    `;
+	}
+	_renderGroupRow(e) {
+		let n = [];
+		for (let t of e) {
+			let e = n[n.length - 1];
+			e && e.label === (t.group ?? null) ? e.span++ : n.push({
+				label: t.group ?? null,
+				span: 1
+			});
+		}
+		return t`
+      <tr class="group-row">
+        ${n.map((e) => t`
+          <th
+            colspan=${e.span}
+            class=${e.label ? "group-header" : "group-empty"}
+          >${e.label ?? ""}</th>
+        `)}
+      </tr>
+    `;
+	}
+	_renderHeaderRow(e) {
+		return t`
+      <tr>
+        ${e.map((e) => {
+			let n = this._sortCol === e.key;
+			return t`
+            <th
+              style=${e.width ? `width:${e.width}` : ""}
+              class=${e.sortable ? "sortable" : ""}
+              aria-sort=${n ? this._sortDir === "asc" ? "ascending" : "descending" : "none"}
+            >
+              ${e.sortable ? t`
+                <button class="sort-btn" @click=${() => this._handleSortClick(e.key)}>
+                  <span>${e.label}</span>
+                  <svg
+                    class="sort-icon sort-icon--${n ? this._sortDir : "none"}"
+                    width="12"
+                    height="12"
+                    viewBox="0 0 12 12"
+                    fill="currentColor"
+                    aria-hidden="true"
+                  >
+                    <path class="sort-asc"  d="M6 1 L10 6 H2 Z"/>
+                    <path class="sort-desc" d="M6 11 L2 6 H10 Z"/>
+                  </svg>
+                </button>
+              ` : e.label}
+            </th>
+          `;
+		})}
+      </tr>
+    `;
+	}
+	_renderRows(e) {
+		let n = this._pagedRows;
+		return n.length === 0 ? t`
+        <tr>
+          <td class="empty-cell" colspan=${e.length}>No data</td>
+        </tr>
+      ` : s(n, (e, t) => t, (n, r) => t`
+        <tr>
+          ${e.map((e) => t`
+            <td style=${e.width ? `width:${e.width}` : ""}>
+              ${e.renderCell ? e.renderCell(n, r) : n[e.key] ?? ""}
+            </td>
+          `)}
+        </tr>
+      `);
+	}
+	_renderPagination() {
+		let e = this._totalPages, r = this.page, i = this._isServerPagination ? this.totalItems : this.rows.length, a = [], o = (e) => {
+			a.includes(e) || a.push(e);
+		};
+		o(1), r - 2 > 2 && a.push("ellipsis");
+		for (let t = Math.max(2, r - 1); t <= Math.min(e - 1, r + 1); t++) o(t);
+		return r + 2 < e - 1 && a.push("ellipsis"), e > 1 && o(e), t`
+      <div class="pagination" role="navigation" aria-label="Pagination">
+        <span class="page-info">${(r - 1) * this.pageSize + 1}–${Math.min(r * this.pageSize, i)} of ${i}</span>
+        <div class="page-controls">
+          <button
+            class="page-btn"
+            ?disabled=${r === 1}
+            aria-label="Previous page"
+            @click=${() => this._handlePageChange(r - 1)}
+          >‹</button>
+
+          ${a.map((e) => e === "ellipsis" ? t`<span class="page-ellipsis">…</span>` : t`
+              <button
+                class="page-btn ${e === r ? "active" : ""}"
+                aria-current=${e === r ? "page" : n}
+                @click=${() => this._handlePageChange(e)}
+              >${e}</button>
+            `)}
+
+          <button
+            class="page-btn"
+            ?disabled=${r === e}
+            aria-label="Next page"
+            @click=${() => this._handlePageChange(r + 1)}
+          >›</button>
+        </div>
+      </div>
+      <span class="sr-only" aria-live="polite">Page ${r} of ${e}</span>
+    `;
+	}
+	render() {
+		let e = this._visibleCols;
+		return t`
+      ${this.showColumnToggle ? this._renderColumnToggle() : n}
+
+      <div class="table-wrapper" role="region" aria-label="Data table">
+        <table aria-busy=${this.loading}>
+          <thead>
+            ${this._hasGroups ? this._renderGroupRow(e) : n}
+            ${this._renderHeaderRow(e)}
+          </thead>
+          <tbody>
+            ${this._renderRows(e)}
+          </tbody>
+        </table>
+
+        ${this.loading ? t`
+          <div class="loading-overlay" role="status">
+            <div class="spinner" aria-hidden="true"></div>
+            <span class="sr-only">Loading table data</span>
+          </div>
+        ` : n}
+      </div>
+
+      ${this._hasPagination ? this._renderPagination() : n}
+    `;
+	}
+	constructor(...e) {
+		super(...e), this.columns = [], this.rows = [], this.pageSize = 0, this.totalItems = 0, this.page = 1, this.loading = !1, this.externalSort = !1, this.showColumnToggle = !1, this._hiddenCols = /* @__PURE__ */ new Set(), this._sortCol = null, this._sortDir = "asc", this._togglePanelOpen = !1;
+	}
+};
+l([a({ attribute: !1 })], u.prototype, "columns", void 0), l([a({ attribute: !1 })], u.prototype, "rows", void 0), l([a({
+	type: Number,
+	attribute: "page-size"
+})], u.prototype, "pageSize", void 0), l([a({
+	type: Number,
+	attribute: "total-items"
+})], u.prototype, "totalItems", void 0), l([a({ type: Number })], u.prototype, "page", void 0), l([a({ type: Boolean })], u.prototype, "loading", void 0), l([a({
+	type: Boolean,
+	attribute: "external-sort"
+})], u.prototype, "externalSort", void 0), l([a({
+	type: Boolean,
+	attribute: "show-column-toggle"
+})], u.prototype, "showColumnToggle", void 0), l([o()], u.prototype, "_hiddenCols", void 0), l([o()], u.prototype, "_sortCol", void 0), l([o()], u.prototype, "_sortDir", void 0), l([o()], u.prototype, "_togglePanelOpen", void 0), u = l([i("app-table")], u);
+export { u as t };