@vverchonov/web-components 0.1.0

package/dist/menu-DmAFaVi5.js

@@ -0,0 +1,248 @@
+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{width:var(--menu-width,240px);background:var(--menu-bg,var(--color-surface));border-right:1px solid var(--color-border);box-sizing:border-box;height:100%;transition:width .25s var(--ease-emphasized);flex-direction:column;font-family:inherit;display:flex;overflow:hidden}:host(.is-collapsed){width:var(--menu-collapsed-width,3.5rem)}.logo-wrapper{padding:var(--menu-logo-padding,1rem);border-bottom:1px solid var(--color-border);flex-shrink:0;justify-content:flex-start;align-items:center;min-height:3.5rem;display:flex;overflow:hidden}:host(.is-collapsed) .logo-wrapper{justify-content:center;padding-inline:.5rem}.logo-wrapper:not(:has(slot[name=logo]>*)):not(:has(slot[name=logo-icon]>*)){display:none}.logo-expanded,.logo-icon{align-items:center;min-width:0;display:flex}:host(.is-collapsed) .logo-expanded,:host(:not(.is-collapsed)) .logo-icon{display:none}:host(.is-collapsed) .logo-wrapper:not(:has(slot[name=logo-icon]>*)) .logo-expanded{display:flex}.search-wrapper{padding:var(--menu-search-padding,.75rem);border-bottom:1px solid var(--color-border);transition:opacity .15s var(--ease-emphasized-out);flex-shrink:0;align-items:center;gap:.5rem;display:flex;overflow:hidden}:host(.is-collapsed) .search-wrapper{opacity:0;pointer-events:none;border-bottom-width:0;max-height:0;padding-block:0}.search-icon{color:var(--color-text-muted);flex-shrink:0;align-items:center;display:flex}.search-input{background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-input);min-width:0;font-size:var(--menu-item-font-size,.875rem);color:var(--color-text);appearance:none;outline:none;flex:1;padding:.375rem .5rem;transition:border-color .15s,box-shadow .15s}.search-input::placeholder{color:var(--color-text-muted)}.search-input:hover{border-color:var(--color-border-strong)}.search-input:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px;border-color:var(--color-primary)}.search-input::-webkit-search-cancel-button{-webkit-appearance:none}.nav-main{flex:1;padding-block:.5rem;overflow:hidden auto}.nav-footer{border-top:1px solid var(--color-border);flex-shrink:0;padding-block:.5rem}.menu,.submenu{margin:0;padding:0;list-style:none}.menu-item-wrapper{display:block}.menu-item{align-items:center;gap:var(--menu-item-icon-gap,.625rem);padding-block:var(--menu-item-padding-block,.5rem);padding-inline:var(--menu-item-padding-inline,.75rem);border-radius:var(--radius-button);width:calc(100% - .5rem);font-size:var(--menu-item-font-size,.875rem);color:var(--color-text);text-align:left;cursor:pointer;transition:background-color .15s var(--ease-emphasized-out), color .15s var(--ease-emphasized-out);box-sizing:border-box;white-space:nowrap;background:0 0;border:none;min-height:2.25rem;margin-inline:.25rem;padding-inline-start:calc(var(--menu-item-padding-inline,.75rem) + var(--depth,0) * var(--menu-indent,1rem));font-weight:400;text-decoration:none;display:flex;overflow:hidden}.menu-item:hover{background:var(--color-surface-elevated);color:var(--color-text)}.menu-item.is-active{background:var(--color-primary-muted);color:var(--color-primary);font-weight:500}.menu-item.is-active:hover{background:var(--color-primary-muted)}.menu-item:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}:host(.is-collapsed) .menu-item{justify-content:center;gap:0;width:100%;margin-inline:0;padding-inline:0}.item-icon{color:inherit;flex-shrink:0;align-items:center;display:flex}.item-label{text-overflow:ellipsis;white-space:nowrap;opacity:1;min-width:0;transition:opacity .1s var(--ease-emphasized-out) .1s;flex:1;overflow:hidden}:host(.is-collapsed) .item-label{opacity:0;width:0;min-width:0;transition:opacity 50ms var(--ease-emphasized-in);flex:0 0 0;overflow:hidden}.submenu-indicator{color:var(--color-text-muted);opacity:1;transition:transform .2s var(--ease-emphasized), opacity .1s var(--ease-emphasized-out) .1s;flex-shrink:0;align-items:center;margin-inline-start:auto;display:flex}.menu-item.is-expanded .submenu-indicator{transform:rotate(180deg)}:host(.is-collapsed) .submenu-indicator{opacity:0;width:0;min-width:0;transition:opacity 50ms var(--ease-emphasized-in);flex:0 0 0;margin:0;overflow:hidden}.submenu{max-height:0;transition:max-height .25s var(--ease-emphasized-out);overflow:hidden}.submenu.is-open{max-height:9999px;transition:max-height .35s var(--ease-emphasized)}:host(.is-collapsed) .submenu{transition:none;max-height:0!important}.menu:empty:after{padding:.5rem var(--menu-item-padding-inline,.75rem);font-size:var(--menu-item-font-size,.875rem);color:var(--color-text-muted);content:\"No results\";display:block}:host(.is-collapsed) .menu:empty:after{display:none}.bottom-slot{border-top:1px solid var(--color-border);padding:var(--menu-item-padding-block,.5rem) var(--menu-item-padding-inline,.75rem);flex-shrink:0;align-items:center;display:flex;overflow:hidden}.bottom-slot.is-empty{display:none}:host(.is-collapsed) .bottom-slot{justify-content:center;padding-inline:0}:host(.is-collapsed) ::slotted(app-toggle){--toggle-label-display:none;--toggle-track-display:none}.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">
+    <circle cx="11" cy="11" r="8"></circle>
+    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+  </svg>
+`;
+function f(e, t) {
+	if (!t) return !0;
+	let n = t.toLowerCase();
+	return e.label.toLowerCase().includes(n) ? !0 : e.children?.some((e) => f(e, t)) ?? !1;
+}
+function p(e, t) {
+	return t ? e.reduce((e, n) => (n.label.toLowerCase().includes(t.toLowerCase()) ? e.push(n) : n.children?.some((e) => f(e, t)) && e.push({
+		...n,
+		children: p(n.children, t)
+	}), e), []) : e;
+}
+var m = class extends e {
+	static {
+		this.styles = [r(c)];
+	}
+	get _isCollapsed() {
+		return this.collapsed && !this._hoverExpanded;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("mouseenter", this._onMouseEnter), this.addEventListener("mouseleave", this._onMouseLeave);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("mouseenter", this._onMouseEnter), this.removeEventListener("mouseleave", this._onMouseLeave);
+	}
+	updated() {
+		if (this.classList.toggle("is-collapsed", this._isCollapsed), !this._isCollapsed && this.activeValue != null) {
+			let e = this._getPathToActiveValue(this.items, this.activeValue, "m") ?? this._getPathToActiveValue(this.footerItems, this.activeValue, "f") ?? null;
+			if (e) {
+				let t = e.split("-"), n = /* @__PURE__ */ new Set();
+				for (let e = 2; e < t.length; e++) n.add(t.slice(0, e).join("-"));
+				n.size > 0 && [...n].some((e) => !this._openPaths.has(e)) && (this._openPaths = new Set([...this._openPaths, ...n]));
+			}
+		}
+	}
+	_itemContainsActiveValue(e) {
+		return this.activeValue == null ? !1 : e.value === this.activeValue ? !0 : e.children?.some((e) => this._itemContainsActiveValue(e)) ?? !1;
+	}
+	_getPathToActiveValue(e, t, n) {
+		for (let r = 0; r < e.length; r++) {
+			let i = e[r], a = `${n}-${r}`;
+			if (i.value === t) return a;
+			if (i.children?.length) {
+				let e = this._getPathToActiveValue(i.children, t, a);
+				if (e) return e;
+			}
+		}
+		return null;
+	}
+	_toggleSubmenu(e) {
+		let t = new Set(this._openPaths);
+		if (t.has(e)) for (let n of [...t]) (n === e || n.startsWith(`${e}-`)) && t.delete(n);
+		else t.add(e);
+		this._openPaths = t;
+	}
+	_onItemClick(e, t) {
+		if (e.children?.length) {
+			this._toggleSubmenu(t);
+			return;
+		}
+		this.dispatchEvent(new CustomEvent("menu-select", {
+			detail: {
+				item: e,
+				value: e.value
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_onSearchInput(e) {
+		this._searchQuery = e.target.value, this.dispatchEvent(new CustomEvent("menu-search", {
+			detail: { query: this._searchQuery },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_onNavKeydown(e) {
+		let t = e.target;
+		if (!t.classList.contains("menu-item")) return;
+		let n = t.closest(".menu-item-wrapper"), r = n?.getAttribute("data-path") ?? "", i = n?.parentElement, a = i ? Array.from(i.children).map((e) => e.querySelector(":scope > .menu-item")).filter(Boolean) : [], o = !!n?.querySelector(":scope > .submenu");
+		switch (e.key) {
+			case "ArrowDown": {
+				e.preventDefault();
+				let n = a.indexOf(t);
+				n < a.length - 1 && a[n + 1].focus();
+				break;
+			}
+			case "ArrowUp": {
+				e.preventDefault();
+				let n = a.indexOf(t);
+				n > 0 && a[n - 1].focus();
+				break;
+			}
+			case "ArrowRight":
+			case "Enter":
+				o && !this._openPaths.has(r) && (e.preventDefault(), this._toggleSubmenu(r), this.updateComplete.then(() => {
+					(n?.querySelector(":scope > .submenu > .menu-item-wrapper > .menu-item"))?.focus();
+				}));
+				break;
+			case "ArrowLeft": {
+				e.preventDefault();
+				let t = r.split("-");
+				if (t.length > 2) {
+					let e = t.slice(0, -1).join("-"), n = new Set(this._openPaths);
+					for (let e of [...n]) (e === r || e.startsWith(`${r}-`)) && n.delete(e);
+					this._openPaths = n, this.shadowRoot?.querySelector(`.menu-item-wrapper[data-path="${e}"] > .menu-item`)?.focus();
+				}
+				break;
+			}
+			case "Escape":
+				if (e.preventDefault(), this._openPaths.size > 0) {
+					let e = [...this._openPaths].sort((e, t) => t.split("-").length - e.split("-").length)[0], t = new Set(this._openPaths);
+					for (let n of [...t]) (n === e || n.startsWith(`${e}-`)) && t.delete(n);
+					this._openPaths = t;
+				}
+				break;
+			default: break;
+		}
+	}
+	_renderItemIcon(e) {
+		return e.icon == null ? t`` : typeof e.icon == "string" ? t`<span class="item-icon"><slot name=${`icon-${e.icon}`}></slot></span>` : t`<span class="item-icon">${e.icon}</span>`;
+	}
+	_renderItems(e, r, i) {
+		return t`${s(e, (e, t) => `${r}-${t}-${e.label}`, (e, a) => {
+			let o = `${r}-${a}`, s = !!e.children?.length, c = this._openPaths.has(o), l = this.activeValue != null && (e.value === this.activeValue || s && this._itemContainsActiveValue(e)), d = this.activeValue != null && e.value === this.activeValue;
+			return t`
+          <li class="menu-item-wrapper" data-path=${o} role="none">
+            ${e.href && !s ? t`
+                  <a
+                    href=${e.href}
+                    class="menu-item ${l ? "is-active" : ""}"
+                    role="treeitem"
+                    aria-current=${d ? "page" : n}
+                    title=${e.label}
+                    style="--depth: ${i}"
+                    @click=${() => this._onItemClick(e, o)}
+                  >
+                    ${this._renderItemIcon(e)}
+                    <span class="item-label">${e.label}</span>
+                  </a>
+                ` : t`
+                  <button
+                    type="button"
+                    class="menu-item ${l ? "is-active" : ""} ${s ? "has-children" : ""} ${c ? "is-expanded" : ""}"
+                    role="treeitem"
+                    aria-expanded=${s ? c ? "true" : "false" : n}
+                    aria-current=${d ? "page" : n}
+                    title=${e.label}
+                    style="--depth: ${i}"
+                    @click=${() => this._onItemClick(e, o)}
+                  >
+                    ${this._renderItemIcon(e)}
+                    <span class="item-label">${e.label}</span>
+                    ${s ? t`<span class="submenu-indicator" aria-hidden="true">${u}</span>` : n}
+                  </button>
+                `}
+            ${s ? t`
+                  <ul class="submenu ${c ? "is-open" : ""}" role="group">
+                    ${this._renderItems(e.children, o, i + 1)}
+                  </ul>
+                ` : n}
+          </li>
+        `;
+		})}`;
+	}
+	_renderMenu(e, n, r) {
+		return t`
+      <ul class="menu" role="tree" aria-label=${r}>
+        ${this._renderItems(e, n, 0)}
+      </ul>
+    `;
+	}
+	render() {
+		let e = p(this.items, this._searchQuery), r = p(this.footerItems, this._searchQuery);
+		return t`
+      <div class="logo-wrapper">
+        <span class="logo-expanded"><slot name="logo"></slot></span>
+        <span class="logo-icon"><slot name="logo-icon"></slot></span>
+      </div>
+
+      ${this.searchable ? t`
+            <div class="search-wrapper">
+              <span class="search-icon">${d}</span>
+              <input
+                type="search"
+                class="search-input"
+                placeholder=${this.searchPlaceholder}
+                aria-label="Search navigation"
+                .value=${this._searchQuery}
+                @input=${this._onSearchInput}
+              />
+            </div>
+          ` : n}
+
+      <nav
+        class="nav-main"
+        aria-label="Main"
+        @keydown=${this._onNavKeydown}
+      >
+        ${this._renderMenu(e, "m", "Main navigation")}
+      </nav>
+
+      ${this.footerItems.length > 0 ? t`
+            <nav
+              class="nav-footer"
+              aria-label="Footer"
+              @keydown=${this._onNavKeydown}
+            >
+              ${this._renderMenu(r, "f", "Footer navigation")}
+            </nav>
+          ` : n}
+
+      <div class="bottom-slot ${this._bottomSlotPopulated ? "" : "is-empty"}">
+        <slot name="bottom" @slotchange=${this._onBottomSlotChange}></slot>
+      </div>
+    `;
+	}
+	constructor(...e) {
+		super(...e), this.items = [], this.footerItems = [], this.searchable = !1, this.searchPlaceholder = "Search…", this.collapsed = !1, this._openPaths = /* @__PURE__ */ new Set(), this._searchQuery = "", this._hoverExpanded = !1, this._bottomSlotPopulated = !1, this._onBottomSlotChange = (e) => {
+			this._bottomSlotPopulated = e.target.assignedNodes({ flatten: !0 }).length > 0;
+		}, this._onMouseEnter = () => {
+			this.collapsed && (this._hoverExpanded = !0);
+		}, this._onMouseLeave = () => {
+			this.collapsed && (this._hoverExpanded = !1, this._openPaths = /* @__PURE__ */ new Set());
+		};
+	}
+};
+l([a({ attribute: !1 })], m.prototype, "items", void 0), l([a({ attribute: !1 })], m.prototype, "footerItems", void 0), l([a({ type: Boolean })], m.prototype, "searchable", void 0), l([a({ type: String })], m.prototype, "searchPlaceholder", void 0), l([a({ attribute: !1 })], m.prototype, "activeValue", void 0), l([a({ type: Boolean })], m.prototype, "collapsed", void 0), l([o()], m.prototype, "_openPaths", void 0), l([o()], m.prototype, "_searchQuery", void 0), l([o()], m.prototype, "_hoverExpanded", void 0), l([o()], m.prototype, "_bottomSlotPopulated", void 0), m = l([i("app-menu")], m);
+export { m as t };

package/dist/menu.js

@@ -0,0 +1,2 @@
+import { t as e } from "./menu-DmAFaVi5.js";
+export { e as Menu };

package/dist/mock/table-data.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Mock data for app-table demos and tests.
+ * Use: import { mockTableRows, type MockTableRow } from './mock/table-data'
+ */
+export interface MockTableRow {
+    id: number;
+    name: string;
+    department: string;
+    role: string;
+    salary: number;
+    status: 'active' | 'inactive';
+}
+/** Default mock rows for table (42 items). */
+export declare const mockTableRows: MockTableRow[];
+/** Small subset (e.g. for minimal table demos). */
+export declare const mockTableRowsSmall: MockTableRow[];

package/dist/modal-v1GlqMF_.js

@@ -0,0 +1,174 @@
+import { LitElement as e, html as t, unsafeCSS as n } from "lit";
+import { customElement as r, property as i, query as a, state as o } from "lit/decorators.js";
+var s = ":host{display:contents}.backdrop{z-index:100;background:var(--modal-backdrop);animation:backdrop-in var(--modal-transition-duration) var(--ease-emphasized-out) forwards;position:fixed;inset:0}@keyframes backdrop-in{0%{opacity:0}to{opacity:1}}.dialog{z-index:101;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--modal-border-radius);animation:dialog-in var(--modal-transition-duration) var(--ease-emphasized-out) forwards;outline:none;flex-direction:column;max-height:calc(100dvh - 2rem);display:flex;position:fixed;inset-block-start:50%;inset-inline-start:50%;overflow-y:auto;translate:-50% -50%;box-shadow:0 4px 6px -1px oklch(0% 0 0/.08),0 10px 15px -3px oklch(0% 0 0/.06)}.dialog--sm{width:min(24rem,100vw - 2rem)}.dialog--md{width:min(var(--modal-width), calc(100vw - 2rem))}.dialog--lg{width:min(44rem,100vw - 2rem)}@keyframes dialog-in{0%{opacity:0;scale:.96}to{opacity:1;scale:1}}.header{padding:var(--modal-padding);flex-shrink:0;justify-content:space-between;align-items:center;gap:1rem;padding-block-end:1rem;display:flex}.title{color:var(--color-text);margin:0;font-size:1.125rem;font-weight:600;line-height:1.3}.close-btn{border-radius:var(--radius-button);width:2rem;height:2rem;color:var(--color-text-muted);cursor:pointer;transition:background-color var(--modal-transition-duration) var(--ease-emphasized);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.close-btn:hover{background:var(--color-surface-elevated);color:var(--color-text)}.close-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.description{padding-inline:var(--modal-padding);color:var(--color-text-muted);flex-shrink:0;margin:0;padding-block-end:1rem;font-size:.9375rem;line-height:1.5}.body{padding-inline:var(--modal-padding);flex-direction:column;gap:.75rem;padding-block-end:var(--modal-padding);display:flex;overflow-y:auto}.body:empty{display:none}.body--flush{gap:0;padding:0}.footer{flex-shrink:0}.footer[hidden]{display:none!important}.divider{background:var(--color-border);height:1px}.footer-slot{display:none}.footer-slot--active,.actions{padding:var(--modal-padding);justify-content:flex-end;align-items:center;gap:.5rem;padding-block-start:1rem;display:flex}.actions--center{justify-content:center}.btn{min-width:5rem;min-height:2.5rem;padding:var(--button-padding-block) var(--button-padding-inline);font-size:var(--button-font-size);font-weight:var(--button-font-weight);border-radius:var(--radius-button);cursor:pointer;transition:background-color var(--button-transition-duration) var(--ease-emphasized);border:none;justify-content:center;align-items:center;display:inline-flex}.btn--primary{background:var(--color-primary);color:var(--color-text-inverse)}.btn--primary:hover{background:var(--color-primary-hover)}.btn--ghost{color:var(--color-text-muted);border:1px solid var(--color-border);background:0 0}.btn--ghost:hover{background:var(--color-surface-elevated);color:var(--color-text);border-color:var(--color-border-strong)}.btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.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 c(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 l = class extends e {
+	static {
+		this.styles = [n(s)];
+	}
+	updated(e) {
+		e.has("open") && (this.open ? (this._previousFocus = document.activeElement, requestAnimationFrame(() => this._focusFirst()), document.body.style.overflow = "hidden") : (document.body.style.overflow = "", this._previousFocus?.focus(), this._previousFocus = null));
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("keydown", this._handleKeydown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("keydown", this._handleKeydown), document.body.style.overflow = "";
+	}
+	_getFocusable() {
+		return this._dialog ? Array.from(this._dialog.querySelectorAll(this._focusableSelectors)) : [];
+	}
+	_focusFirst() {
+		let e = this._getFocusable();
+		e.length ? e[0].focus() : this._dialog?.focus();
+	}
+	_trapFocus(e) {
+		let t = this._getFocusable();
+		if (!t.length) return;
+		let n = t[0], r = t[t.length - 1];
+		e.shiftKey ? document.activeElement === n && (e.preventDefault(), r.focus()) : document.activeElement === r && (e.preventDefault(), n.focus());
+	}
+	_handleBackdropClick(e) {
+		this.closeOnBackdrop && e.target === e.currentTarget && this._close();
+	}
+	_close() {
+		this.open = !1, this.dispatchEvent(new CustomEvent("modal-close", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_handleConfirm() {
+		this.dispatchEvent(new CustomEvent("modal-confirm", {
+			bubbles: !0,
+			composed: !0
+		})), this._close();
+	}
+	_handleCancel() {
+		this.dispatchEvent(new CustomEvent("modal-cancel", {
+			bubbles: !0,
+			composed: !0
+		})), this._close();
+	}
+	get _resolvedConfirmLabel() {
+		return this.confirmLabel ? this.confirmLabel : this.variant === "form" ? "Save" : "Confirm";
+	}
+	_onFooterSlotChange(e) {
+		this._hasFooterContent = e.target.assignedNodes({ flatten: !0 }).length > 0;
+	}
+	_renderBuiltInActions() {
+		return this.variant === "info" ? t`
+        <div class="actions actions--center">
+          <button type="button" class="btn btn--primary" @click=${this._handleConfirm}>
+            ${this.okLabel}
+          </button>
+        </div>
+      ` : t`
+      <div class="actions">
+        <button type="button" class="btn btn--ghost" @click=${this._handleCancel}>
+          ${this.cancelLabel}
+        </button>
+        <button type="button" class="btn btn--primary" @click=${this._handleConfirm}>
+          ${this._resolvedConfirmLabel}
+        </button>
+      </div>
+    `;
+	}
+	/**
+	* Whether the footer area (divider + buttons) should be visible at all.
+	* Hidden only when hide-actions=true AND the footer slot has no content.
+	*/ get _showFooter() {
+		return this._hasFooterContent || !this.hideActions;
+	}
+	render() {
+		return this.open ? t`
+      <div
+        class="backdrop"
+        @click=${this._handleBackdropClick}
+        aria-hidden="true"
+      ></div>
+
+      <div
+        class="dialog dialog--${this.size}"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-title"
+        aria-describedby=${this.description ? "modal-desc" : ""}
+        tabindex="-1"
+      >
+        <header class="header">
+          <h2 class="title" id="modal-title">${this.title}</h2>
+          <button
+            type="button"
+            class="close-btn"
+            aria-label="Close dialog"
+            @click=${this._close}
+          >
+            <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" width="16" height="16">
+              <path d="M3 3l10 10M13 3L3 13" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/>
+            </svg>
+          </button>
+        </header>
+
+        ${this.description ? t`
+          <p class="description" id="modal-desc">${this.description}</p>
+        ` : ""}
+
+        <div class="body ${this.flush ? "body--flush" : ""}">
+          <slot></slot>
+        </div>
+
+        <!--
+          Footer slot is always rendered (even when hide-actions) so slotchange
+          fires correctly. The outer .footer wrapper hides via [hidden] when
+          hide-actions=true AND the slot is empty.
+        -->
+        <div class="footer" ?hidden=${!this._showFooter}>
+          <div class="divider" aria-hidden="true"></div>
+          <!-- Custom footer: slot content replaces built-in action buttons -->
+          <div class="footer-slot ${this._hasFooterContent ? "footer-slot--active" : ""}">
+            <slot name="footer" @slotchange=${this._onFooterSlotChange}></slot>
+          </div>
+          <!-- Built-in actions: shown only when footer slot is empty -->
+          ${this._hasFooterContent ? "" : this._renderBuiltInActions()}
+        </div>
+      </div>
+    ` : t``;
+	}
+	constructor(...e) {
+		super(...e), this.open = !1, this.title = "", this.description = "", this.variant = "info", this.size = "md", this.confirmLabel = "", this.cancelLabel = "Cancel", this.okLabel = "OK", this.closeOnBackdrop = !0, this.hideActions = !1, this.flush = !1, this._hasFooterContent = !1, this._previousFocus = null, this._handleKeydown = (e) => {
+			this.open && (e.key === "Escape" && (e.stopPropagation(), this._close()), e.key === "Tab" && this._trapFocus(e));
+		}, this._focusableSelectors = [
+			"button:not([disabled])",
+			"[href]",
+			"input:not([disabled])",
+			"select:not([disabled])",
+			"textarea:not([disabled])",
+			"[tabindex]:not([tabindex=\"-1\"])"
+		].join(", ");
+	}
+};
+c([i({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "open", void 0), c([i({ type: String })], l.prototype, "title", void 0), c([i({ type: String })], l.prototype, "description", void 0), c([i({ type: String })], l.prototype, "variant", void 0), c([i({ type: String })], l.prototype, "size", void 0), c([i({
+	type: String,
+	attribute: "confirm-label"
+})], l.prototype, "confirmLabel", void 0), c([i({
+	type: String,
+	attribute: "cancel-label"
+})], l.prototype, "cancelLabel", void 0), c([i({
+	type: String,
+	attribute: "ok-label"
+})], l.prototype, "okLabel", void 0), c([i({
+	type: Boolean,
+	attribute: "close-on-backdrop"
+})], l.prototype, "closeOnBackdrop", void 0), c([i({
+	type: Boolean,
+	attribute: "hide-actions"
+})], l.prototype, "hideActions", void 0), c([i({ type: Boolean })], l.prototype, "flush", void 0), c([o()], l.prototype, "_hasFooterContent", void 0), c([a(".dialog")], l.prototype, "_dialog", void 0), l = c([r("app-modal")], l);
+export { l as t };

package/dist/modal.js

@@ -0,0 +1,2 @@
+import { t as e } from "./modal-v1GlqMF_.js";
+export { e as Modal };

package/dist/react/button.d.ts

@@ -0,0 +1,2 @@
+import { Button as ButtonElement } from '../components/button/button.ts';
+export declare const Button: import('@lit/react').ReactWebComponent<ButtonElement, {}>;

package/dist/react/button.js

@@ -0,0 +1,9 @@
+import { t as e } from "../button-DYrT530y.js";
+import * as t from "react";
+import { createComponent as n } from "@lit/react";
+const r = n({
+	tagName: "app-button",
+	elementClass: e,
+	react: t
+});
+export { r as Button };

package/dist/react/dropdown-button.d.ts

@@ -0,0 +1,6 @@
+import { EventName } from '@lit/react';
+import { DropdownButton as DropdownButtonElement } from '../components/dropdown-button/dropdown-button.ts';
+import { DropdownSelectEventDetail } from '../components/dropdown-button/dropdown-button-types.ts';
+export declare const DropdownButton: import('@lit/react').ReactWebComponent<DropdownButtonElement, {
+    onDropdownSelect: EventName<CustomEvent<DropdownSelectEventDetail>>;
+}>;

package/dist/react/dropdown-button.js

@@ -0,0 +1,10 @@
+import { t as e } from "../dropdown-button-B6XNoy4L.js";
+import * as t from "react";
+import { createComponent as n } from "@lit/react";
+const r = n({
+	tagName: "app-dropdown-button",
+	elementClass: e,
+	react: t,
+	events: { onDropdownSelect: "dropdown-select" }
+});
+export { r as DropdownButton };

package/dist/react/form-layout.d.ts

@@ -0,0 +1,8 @@
+import { EventName } from '@lit/react';
+import { FormLayout as FormLayoutElement } from '../components/layouts/form/form-layout.ts';
+import { FormLayoutStageEventDetail } from '../components/layouts/form/form-layout-types.ts';
+export declare const FormLayout: import('@lit/react').ReactWebComponent<FormLayoutElement, {
+    onFormLayoutNext: EventName<CustomEvent<FormLayoutStageEventDetail>>;
+    onFormLayoutBack: EventName<CustomEvent<FormLayoutStageEventDetail>>;
+    onFormLayoutSubmit: EventName<CustomEvent<FormLayoutStageEventDetail>>;
+}>;

package/dist/react/form-layout.js

@@ -0,0 +1,14 @@
+import { t as e } from "../form-layout-DCX8X-8-.js";
+import * as t from "react";
+import { createComponent as n } from "@lit/react";
+const r = n({
+	tagName: "app-form-layout",
+	elementClass: e,
+	react: t,
+	events: {
+		onFormLayoutNext: "form-layout-next",
+		onFormLayoutBack: "form-layout-back",
+		onFormLayoutSubmit: "form-layout-submit"
+	}
+});
+export { r as FormLayout };

package/dist/react/index.d.ts

@@ -0,0 +1,21 @@
+export { Button } from './button.ts';
+export { DropdownButton } from './dropdown-button.ts';
+export { Input } from './input.ts';
+export { Menu } from './menu.ts';
+export { Modal } from './modal.ts';
+export { Selector } from './selector.ts';
+export { Table } from './table.ts';
+export { Tabs } from './tabs.ts';
+export { Toggle } from './toggle.ts';
+export { FormLayout } from './form-layout.ts';
+export { Layout } from './layout.ts';
+export type { ButtonIconPosition, ButtonType } from '../components/button/button-types.ts';
+export type { DropdownItem, DropdownSelectEventDetail, DropdownPlacement } from '../components/dropdown-button/dropdown-button-types.ts';
+export type { InputType, InputState } from '../components/input/input-types.ts';
+export type { MenuItem, MenuSelectEventDetail, MenuSearchEventDetail } from '../components/menu/menu-types.ts';
+export type { ModalVariant, ModalSize } from '../components/modal/modal-types.ts';
+export type { SelectorOption, SelectorGroup, SelectorChangeEventDetail, SelectorState } from '../components/selector/selector-types.ts';
+export type { ColumnDef, SortDir, TableSortEvent, TablePageEvent, TableColumnToggleEvent } from '../components/table/table-types.ts';
+export type { TabItem, TabChangeEventDetail } from '../components/tabs/tabs.ts';
+export type { ToggleIconPosition, ToggleChangeEventDetail } from '../components/toggle/toggle-types.ts';
+export type { FormLayoutStageEventDetail } from '../components/layouts/form/form-layout-types.ts';

package/dist/react/input.d.ts

@@ -0,0 +1,2 @@
+import { Input as InputElement } from '../components/input/input.ts';
+export declare const Input: import('@lit/react').ReactWebComponent<InputElement, {}>;

package/dist/react/input.js

@@ -0,0 +1,9 @@
+import { t as e } from "../input-BVlPYqTe.js";
+import * as t from "react";
+import { createComponent as n } from "@lit/react";
+const r = n({
+	tagName: "app-input",
+	elementClass: e,
+	react: t
+});
+export { r as Input };

package/dist/react/layout.d.ts

@@ -0,0 +1,2 @@
+import { Layout as LayoutElement } from '../components/layouts/page/layout.ts';
+export declare const Layout: import('@lit/react').ReactWebComponent<LayoutElement, {}>;

package/dist/react/layout.js

@@ -0,0 +1,9 @@
+import { t as e } from "../layout-CYvgu_WE.js";
+import * as t from "react";
+import { createComponent as n } from "@lit/react";
+const r = n({
+	tagName: "app-layout",
+	elementClass: e,
+	react: t
+});
+export { r as Layout };

package/dist/react/menu.d.ts

@@ -0,0 +1,7 @@
+import { EventName } from '@lit/react';
+import { Menu as MenuElement } from '../components/menu/menu.ts';
+import { MenuSelectEventDetail, MenuSearchEventDetail } from '../components/menu/menu-types.ts';
+export declare const Menu: import('@lit/react').ReactWebComponent<MenuElement, {
+    onMenuSelect: EventName<CustomEvent<MenuSelectEventDetail>>;
+    onMenuSearch: EventName<CustomEvent<MenuSearchEventDetail>>;
+}>;

package/dist/react/menu.js

@@ -0,0 +1,13 @@
+import { t as e } from "../menu-DmAFaVi5.js";
+import * as t from "react";
+import { createComponent as n } from "@lit/react";
+const r = n({
+	tagName: "app-menu",
+	elementClass: e,
+	react: t,
+	events: {
+		onMenuSelect: "menu-select",
+		onMenuSearch: "menu-search"
+	}
+});
+export { r as Menu };

package/dist/react/modal.d.ts

@@ -0,0 +1,7 @@
+import { EventName } from '@lit/react';
+import { Modal as ModalElement } from '../components/modal/modal.ts';
+export declare const Modal: import('@lit/react').ReactWebComponent<ModalElement, {
+    onModalConfirm: EventName<CustomEvent>;
+    onModalCancel: EventName<CustomEvent>;
+    onModalClose: EventName<CustomEvent>;
+}>;

package/dist/react/modal.js

@@ -0,0 +1,14 @@
+import { t as e } from "../modal-v1GlqMF_.js";
+import * as t from "react";
+import { createComponent as n } from "@lit/react";
+const r = n({
+	tagName: "app-modal",
+	elementClass: e,
+	react: t,
+	events: {
+		onModalConfirm: "modal-confirm",
+		onModalCancel: "modal-cancel",
+		onModalClose: "modal-close"
+	}
+});
+export { r as Modal };

package/dist/react/selector.d.ts

@@ -0,0 +1,6 @@
+import { EventName } from '@lit/react';
+import { Selector as SelectorElement } from '../components/selector/selector.ts';
+import { SelectorChangeEventDetail } from '../components/selector/selector-types.ts';
+export declare const Selector: import('@lit/react').ReactWebComponent<SelectorElement, {
+    onSelectorChange: EventName<CustomEvent<SelectorChangeEventDetail>>;
+}>;

package/dist/react/selector.js

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

package/dist/react/table.d.ts

@@ -0,0 +1,8 @@
+import { EventName } from '@lit/react';
+import { Table as TableElement } from '../components/table/table.ts';
+import { TableSortEvent, TablePageEvent, TableColumnToggleEvent } from '../components/table/table-types.ts';
+export declare const Table: import('@lit/react').ReactWebComponent<TableElement, {
+    onTableSort: EventName<CustomEvent<TableSortEvent>>;
+    onTablePage: EventName<CustomEvent<TablePageEvent>>;
+    onTableColumnToggle: EventName<CustomEvent<TableColumnToggleEvent>>;
+}>;