@vverchonov/web-components 0.1.0

package/dist/dropdown-button-B6XNoy4L.js

@@ -0,0 +1,172 @@
+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:inline-block;position:relative}.trigger{align-items:center;gap:var(--button-icon-gap);margin:var(--button-margin-block) var(--button-margin-inline);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);background:var(--color-primary);color:var(--color-text-inverse);cursor:pointer;transition:background-color var(--button-transition-duration) var(--ease-emphasized);border:none;display:inline-flex}.trigger:hover{background:var(--color-primary-hover)}.trigger:focus{outline:none}.trigger .icon-wrapper{align-items:center;display:inline-flex}.trigger .icon-wrapper:not(:has(*)){display:none}.trigger .label{display:inline}.trigger .label:empty{display:none}.chevron{transition:transform var(--button-transition-duration) var(--ease-emphasized);justify-content:center;align-items:center;display:inline-flex}.trigger[aria-expanded=true] .chevron{transform:rotate(180deg)}.panel{z-index:9999;min-width:180px;max-width:320px;max-height:min(80vh,400px);padding:var(--dropdown-padding,.375rem);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);margin:0;display:none;position:fixed;overflow-y:auto;box-shadow:0 4px 12px oklch(0% 0 0/.12)}.panel.is-open{display:block}.menu{flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;display:flex}.menu-item-wrapper{flex-direction:column;display:flex}.menu-item{align-items:center;gap:var(--dropdown-item-icon-gap,.5rem);width:100%;padding:var(--dropdown-item-padding-block,.375rem) var(--dropdown-item-padding-inline,.5rem);font-size:var(--dropdown-item-font-size,.875rem);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;font-weight:400;display:flex}.menu-item:hover,.menu-item:focus{background:var(--color-primary-muted);outline:none}.menu-item.is-expanded{background:var(--color-primary-muted);color:var(--color-primary)}.menu-item .item-icon{width:1.25em;height:1.25em;color:var(--color-text-muted);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.menu-item .item-icon:empty{display:none}.menu-item .item-label{flex:1}.menu-item .submenu-indicator{color:var(--color-text-muted);transition:transform var(--button-transition-duration) var(--ease-emphasized);flex-shrink:0;align-items:center;display:inline-flex;transform:rotate(-90deg)}.menu-item.is-expanded .submenu-indicator{color:var(--color-primary);transform:rotate(0)}.submenu{margin:2px 0 4px calc(var(--dropdown-item-padding-inline,.5rem) + .25rem);border-left:2px solid var(--color-border);padding-left:.5rem;display:none}.submenu.is-open{display:flex}";
+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">
+    <polyline points="6 9 12 15 18 9"></polyline>
+  </svg>
+`, d = 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);
+	}
+	_toggle() {
+		this._open = !this._open, this._open || (this._openPaths = /* @__PURE__ */ new Set()), this._open && this.updateComplete.then(() => this._positionPanel());
+	}
+	_positionPanel() {
+		let e = this.shadowRoot?.querySelector(".trigger"), t = this.shadowRoot?.querySelector(".panel");
+		if (!e || !t) return;
+		let n = e.getBoundingClientRect();
+		t.style.right = "auto", t.style.bottom = "auto", t.style.top = "auto", this.placement === "top" ? (t.style.bottom = `${window.innerHeight - n.top + 4}px`, t.style.top = "auto") : t.style.top = `${n.bottom + 4}px`, t.style.left = `${n.left}px`;
+	}
+	/**
+	* Toggle an inline submenu open/closed.
+	* Closing a parent also removes all its descendant paths.
+	* Opening a parent closes any sibling at the same depth+parent.
+	*/ _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 {
+			let n = e.split("-"), r = n.length, i = n.slice(0, -1).join("-");
+			for (let e of [...t]) {
+				let n = e.split("-");
+				if (n.length === r && n.slice(0, -1).join("-") === i) for (let n of [...t]) (n === e || n.startsWith(`${e}-`)) && t.delete(n);
+			}
+			t.add(e);
+		}
+		this._openPaths = t;
+	}
+	_onTriggerKeydown(e) {
+		(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._open || (this._open = !0, this._openPaths = /* @__PURE__ */ new Set(), this.updateComplete.then(() => {
+			this._positionPanel(), this.shadowRoot?.querySelector("[role=\"menuitem\"]")?.focus();
+		})));
+	}
+	_onPanelKeydown(e) {
+		let t = e.target;
+		if (t.getAttribute("role") !== "menuitem") return;
+		let n = t.closest(".menu-item-wrapper"), r = n?.getAttribute("data-path") ?? "", i = t.closest(".menu"), a = i ? Array.from(i.children).map((e) => e.querySelector(":scope > [role=\"menuitem\"]")).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 && (e.preventDefault(), this._openPaths.has(r) || (this._toggleSubmenu(r), this.updateComplete.then(() => {
+					(n?.querySelector(".submenu [role=\"menuitem\"]"))?.focus();
+				})));
+				break;
+			case "ArrowLeft":
+				if (e.preventDefault(), r.includes("-")) {
+					let e = r.split("-").slice(0, -1).join("-"), t = new Set(this._openPaths);
+					for (let n of [...t]) (n === e || n.startsWith(`${e}-`)) && t.delete(n);
+					this._openPaths = t, (this.shadowRoot?.querySelector(`.menu-item-wrapper[data-path="${e}"]`))?.querySelector(":scope > [role=\"menuitem\"]")?.focus();
+				}
+				break;
+			case "Escape":
+				e.preventDefault(), this._openPaths.size > 0 ? this._openPaths = /* @__PURE__ */ new Set() : (this._open = !1, this.shadowRoot?.querySelector(".trigger")?.focus());
+				break;
+			default: break;
+		}
+	}
+	_onItemClick(e, t) {
+		if (e.children?.length) {
+			this._toggleSubmenu(t);
+			return;
+		}
+		this._open = !1, this._openPaths = /* @__PURE__ */ new Set(), this.dispatchEvent(new CustomEvent("dropdown-select", {
+			detail: {
+				item: e,
+				value: e.value
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_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>`;
+	}
+	_renderMenu(e, r = "") {
+		return t`
+      <ul class="menu" role="menu">
+        ${s(e, (e, t) => `${r}-${t}-${e.label}`, (e, i) => {
+			let a = r ? `${r}-${i}` : String(i), o = !!e.children?.length, s = this._openPaths.has(a);
+			return t`
+              <li class="menu-item-wrapper" data-path=${a}>
+                <button
+                  type="button"
+                  role="menuitem"
+                  aria-expanded=${o ? s ? "true" : "false" : n}
+                  class="menu-item ${o ? "has-children" : ""} ${s ? "is-expanded" : ""}"
+                  @click=${() => this._onItemClick(e, a)}
+                >
+                  ${this._renderItemIcon(e)}
+                  <span class="item-label">${e.label}</span>
+                  ${o ? t`<span class="submenu-indicator" aria-hidden="true">${u}</span>` : ""}
+                </button>
+                ${o ? t`
+                      <ul class="submenu menu ${s ? "is-open" : ""}" role="menu">
+                        ${this._renderMenu(e.children, a)}
+                      </ul>
+                    ` : ""}
+              </li>
+            `;
+		})}
+      </ul>
+    `;
+	}
+	render() {
+		return t`
+      <button
+        type="button"
+        class="trigger"
+        aria-haspopup="menu"
+        aria-expanded=${this._open ? "true" : "false"}
+        @click=${this._toggle}
+        @keydown=${this._onTriggerKeydown}
+      >
+        <span class="icon-wrapper">
+          <slot name="icon"></slot>
+        </span>
+        <span class="label">${this.label}</span>
+        <span class="chevron" aria-hidden="true">${u}</span>
+      </button>
+      <div
+        class="panel ${this._open ? "is-open" : ""}"
+        role="menu"
+        @keydown=${this._onPanelKeydown}
+      >
+        ${this._renderMenu(this.items)}
+      </div>
+    `;
+	}
+	constructor(...e) {
+		super(...e), this.label = "", this.placement = "bottom", this.items = [], this._open = !1, this._openPaths = /* @__PURE__ */ new Set(), this._onDocumentClick = (e) => {
+			this._open && (e.composedPath().includes(this) || (this._open = !1, this._openPaths = /* @__PURE__ */ new Set()));
+		}, this._onDocumentKeydown = (e) => {
+			e.key === "Escape" && this._open && (this._open = !1, this._openPaths = /* @__PURE__ */ new Set(), this.shadowRoot?.querySelector(".trigger")?.focus());
+		};
+	}
+};
+l([a({ type: String })], d.prototype, "label", void 0), l([a({ type: String })], d.prototype, "placement", void 0), l([a({ attribute: !1 })], d.prototype, "items", void 0), l([o()], d.prototype, "_open", void 0), l([o()], d.prototype, "_openPaths", void 0), d = l([i("app-dropdown-button")], d);
+export { d as t };

package/dist/dropdown-button.js

@@ -0,0 +1,2 @@
+import { t as e } from "./dropdown-button-B6XNoy4L.js";
+export { e as DropdownButton };

package/dist/form-layout-DCX8X-8-.js

@@ -0,0 +1,140 @@
+import { LitElement as e, html as t, unsafeCSS as n } from "lit";
+import { customElement as r, property as i, state as a } from "lit/decorators.js";
+var o = ":host{box-sizing:border-box;display:block}.shell{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);overflow:hidden}.shell--seamless{background:0 0;border:none;border-radius:0;overflow:visible}.header{padding:1.5rem 1.75rem 1.25rem}.title{color:var(--color-text);margin:0;font-size:1.125rem;font-weight:600;line-height:1.4}.description{color:var(--color-text-muted);margin:.375rem 0 0;font-size:.875rem;line-height:1.5}.divider{background:var(--color-border);height:1px}.steps{scrollbar-width:none;align-items:center;gap:0;padding:1rem 1.75rem;display:flex;overflow-x:auto}.steps::-webkit-scrollbar{display:none}.step-connector{background:var(--color-border);flex:1;min-width:1rem;max-width:3rem;height:1px}.step{cursor:default;color:var(--color-text-muted);white-space:nowrap;background:0 0;border:none;flex-shrink:0;align-items:center;gap:.5rem;padding:0;font-size:.875rem;font-weight:500;display:flex}.step--done{cursor:pointer;color:var(--color-primary)}.step--done:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:2px}.step--active{color:var(--color-text)}.step-number{border-radius:var(--radius-full);border:2px solid;flex-shrink:0;justify-content:center;align-items:center;width:1.75rem;height:1.75rem;font-size:.8125rem;font-weight:600;transition:background .15s,color .15s,border-color .15s;display:flex}.step--active .step-number,.step--done .step-number{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}slot{display:contents}[hidden]{display:none!important}.fields{align-items:start;gap:1rem;padding:1.5rem 1.75rem;display:grid}.fields--cols-1{grid-template-columns:1fr}.fields--cols-2{grid-template-columns:repeat(2,1fr)}.fields--cols-3{grid-template-columns:repeat(3,1fr)}@media (width<=640px){.fields--cols-2,.fields--cols-3{grid-template-columns:1fr}}@media (width>=641px) and (width<=900px){.fields--cols-3{grid-template-columns:repeat(2,1fr)}}.actions{justify-content:flex-end;align-items:center;gap:.5rem;padding:1rem 1.75rem;display:flex}.btn{padding:var(--button-padding-block,.5rem) var(--button-padding-inline,1rem);font-size:var(--button-font-size,1rem);font-weight:var(--button-font-weight,500);border-radius:var(--radius-button);cursor:pointer;transition:background var(--button-transition-duration,.2s) var(--ease-emphasized), color var(--button-transition-duration,.2s) var(--ease-emphasized), border-color var(--button-transition-duration,.2s) var(--ease-emphasized);border:1px solid #0000;justify-content:center;align-items:center;min-width:5rem;min-height:2.5rem;line-height:1;display:inline-flex}.btn:focus-visible{outline:var(--button-focus-ring-width,2px) solid var(--color-primary);outline-offset:var(--button-focus-ring-offset,2px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn--primary{background:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary)}.btn--primary:not(:disabled):hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}.btn--ghost{color:var(--color-text);border-color:var(--color-border);background:0 0}.btn--ghost:not(:disabled):hover{background:var(--color-surface-elevated);border-color:var(--color-border-strong)}.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 s(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 c = class extends e {
+	static {
+		this.styles = [n(o)];
+	}
+	willUpdate(e) {
+		e.has("currentStage") && (this._stage = this.currentStage);
+	}
+	get _isMultiStep() {
+		return this.stages.length > 0;
+	}
+	get _isLastStage() {
+		return this._stage === this.stages.length - 1;
+	}
+	_handleBack() {
+		this._stage !== 0 && (this._stage--, this.dispatchEvent(new CustomEvent("form-layout-back", {
+			detail: { stage: this._stage },
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	_handleNext() {
+		this._isLastStage || (this._stage++, this.dispatchEvent(new CustomEvent("form-layout-next", {
+			detail: { stage: this._stage },
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	_handleSubmit() {
+		this.dispatchEvent(new CustomEvent("form-layout-submit", {
+			detail: { stage: this._stage },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_renderStepIndicator() {
+		return t`
+      <nav class="steps" aria-label="Form progress">
+        ${this.stages.map((e, n) => t`
+          ${n > 0 ? t`<span class="step-connector" aria-hidden="true"></span>` : ""}
+          <button
+            type="button"
+            class="step ${n === this._stage ? "step--active" : ""} ${n < this._stage ? "step--done" : ""}"
+            aria-current=${n === this._stage ? "step" : "false"}
+            @click=${() => {
+			n < this._stage && (this._stage = n);
+		}}
+          >
+            <span class="step-number" aria-hidden="true">${n < this._stage ? t`
+              <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" width="14" height="14">
+                <path d="M3 8l3.5 3.5L13 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>` : n + 1}
+            </span>
+            <span class="step-label">${e}</span>
+          </button>
+        `)}
+      </nav>
+    `;
+	}
+	_renderFields() {
+		return this._isMultiStep ? t`
+        ${this.stages.map((e, n) => t`
+          <div
+            class="fields fields--cols-${this.columns}"
+            role="group"
+            aria-label=${e}
+            ?hidden=${n !== this._stage}
+          >
+            <slot name="stage-${n}"></slot>
+          </div>
+        `)}
+      ` : t`
+      <div class="fields fields--cols-${this.columns}">
+        <slot name="fields"></slot>
+      </div>
+    `;
+	}
+	_renderActions() {
+		return this._isMultiStep ? t`
+        <div class="actions">
+          <button
+            type="button"
+            class="btn btn--ghost"
+            ?disabled=${this._stage === 0}
+            @click=${this._handleBack}
+          >
+            Back
+          </button>
+          ${this._isLastStage ? t`<button type="button" class="btn btn--primary" @click=${this._handleSubmit}>Submit</button>` : t`<button type="button" class="btn btn--primary" @click=${this._handleNext}>Next</button>`}
+        </div>
+      ` : t`
+      <div class="actions">
+        <button type="button" class="btn btn--primary" @click=${this._handleSubmit}>Submit</button>
+      </div>
+    `;
+	}
+	render() {
+		return t`
+      <div class="shell ${this.seamless ? "shell--seamless" : ""}" role="region" aria-label=${this.title || "Form"}>
+        <header class="header">
+          <h2 class="title">${this.title}</h2>
+          ${this.description ? t`<p class="description">${this.description}</p>` : ""}
+        </header>
+
+        ${this._isMultiStep ? t`
+          <div class="divider" aria-hidden="true"></div>
+          ${this._renderStepIndicator()}
+        ` : ""}
+
+        <div class="divider" aria-hidden="true"></div>
+
+        ${this._renderFields()}
+
+        <div class="divider" aria-hidden="true"></div>
+
+        ${this._renderActions()}
+      </div>
+
+      <span aria-live="polite" class="sr-only">
+        ${this._isMultiStep ? `Step ${this._stage + 1} of ${this.stages.length}: ${this.stages[this._stage]}` : ""}
+      </span>
+    `;
+	}
+	constructor(...e) {
+		super(...e), this.title = "", this.description = "", this.columns = 1, this.stages = [], this.seamless = !1, this.currentStage = 0, this._stage = 0;
+	}
+};
+s([i({ type: String })], c.prototype, "title", void 0), s([i({ type: String })], c.prototype, "description", void 0), s([i({ type: Number })], c.prototype, "columns", void 0), s([i({ type: Array })], c.prototype, "stages", void 0), s([i({ type: Boolean })], c.prototype, "seamless", void 0), s([i({
+	type: Number,
+	attribute: "current-stage"
+})], c.prototype, "currentStage", void 0), s([a()], c.prototype, "_stage", void 0), c = s([r("app-form-layout")], c);
+export { c as t };

package/dist/index.d.ts

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

package/dist/input-BVlPYqTe.js

@@ -0,0 +1,70 @@
+import { LitElement as e, html as t, unsafeCSS as n } from "lit";
+import { customElement as r, property as i, state as a } from "lit/decorators.js";
+var o = ":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}.input-row{align-items:center;display:flex;position:relative}.icon-wrapper{left:var(--input-padding-inline);color:var(--color-text-muted);pointer-events:none;align-items:center;display:inline-flex;position:absolute}input{box-sizing:border-box;width:100%;font-size:var(--input-font-size);color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-input);padding-block:var(--input-padding-block);padding-inline:var(--input-padding-inline);transition:border-color var(--input-transition-duration) var(--ease-emphasized), box-shadow var(--input-transition-duration) var(--ease-emphasized);appearance:none;outline:none}.input-row.has-icon input{padding-left:calc(var(--input-padding-inline) + var(--input-icon-size) + var(--input-icon-gap))}:host([state=valid]) input,:host([state=invalid]) input{padding-right:calc(var(--input-padding-inline) + var(--input-icon-size) + var(--input-icon-gap))}input::placeholder{color:var(--color-text-muted)}input:hover:not(:disabled){border-color:var(--color-border-strong);box-shadow:0 0 0 1px var(--color-border-strong)}input:focus-visible{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary)}input:disabled{opacity:.5;cursor:not-allowed;background:var(--color-surface-elevated)}.state-icon{right:var(--input-padding-inline);pointer-events:none;align-items:center;display:inline-flex;position:absolute}.state-icon--valid{color:var(--color-valid)}.state-icon--invalid{color:var(--color-invalid)}:host([state=valid]) input{border-color:var(--color-valid)}:host([state=valid]) input:focus-visible{box-shadow:0 0 0 2px var(--color-valid)}:host([state=invalid]) input{border-color:var(--color-invalid);background:var(--color-invalid-muted)}:host([state=invalid]) input:focus-visible{box-shadow:0 0 0 2px var(--color-invalid)}.error-text{color:var(--color-invalid);font-size:.8125rem;line-height:1.4}";
+function s(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 c = 0, l = class extends e {
+	static {
+		this.styles = [n(o)];
+	}
+	_handleInput(e) {
+		this.value = e.target.value, this.onChange?.(this.value);
+	}
+	_renderStateIcon() {
+		return this.state === "valid" ? t`
+        <span class="state-icon state-icon--valid" aria-hidden="true">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="18" height="18">
+            <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
+          </svg>
+        </span>
+      ` : this.state === "invalid" ? t`
+        <span class="state-icon state-icon--invalid" aria-hidden="true">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="18" height="18">
+            <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
+          </svg>
+        </span>
+      ` : t``;
+	}
+	render() {
+		let e = `${this._uid}-error`, n = this.state === "invalid" && this.errorMessage;
+		return t`
+      <div class="wrapper">
+        ${this.label ? t`<label for=${this._uid} class="label">${this.label}</label>` : ""}
+        <div class="input-row ${this._hasIcon ? "has-icon" : ""}">
+          <span class="icon-wrapper">
+            <slot name="icon" @slotchange=${this._onIconSlotChange}></slot>
+          </span>
+          <input
+            id=${this._uid}
+            type=${this.type}
+            name=${this.name}
+            placeholder=${this.placeholder}
+            .value=${this.value}
+            ?required=${this.required}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            aria-invalid=${this.state === "invalid" ? "true" : "false"}
+            aria-describedby=${n ? e : ""}
+            @input=${this._handleInput}
+          />
+          ${this._renderStateIcon()}
+        </div>
+        ${n ? t`<span id=${e} class="error-text" role="alert">${this.errorMessage}</span>` : ""}
+      </div>
+    `;
+	}
+	constructor(...e) {
+		super(...e), this._uid = `app-input-${++c}`, this.type = "text", this.label = "", this.placeholder = "", this.value = "", this.name = "", this.required = !1, this.disabled = !1, this.readonly = !1, this.state = "default", this.errorMessage = "", this._hasIcon = !1, this._onIconSlotChange = (e) => {
+			this._hasIcon = e.target.assignedNodes({ flatten: !0 }).length > 0;
+		};
+	}
+};
+s([i({ type: String })], l.prototype, "type", void 0), s([i({ type: String })], l.prototype, "label", void 0), s([i({ type: String })], l.prototype, "placeholder", void 0), s([i({ type: String })], l.prototype, "value", void 0), s([i({ type: String })], l.prototype, "name", void 0), s([i({ type: Boolean })], l.prototype, "required", void 0), s([i({ type: Boolean })], l.prototype, "disabled", void 0), s([i({ type: Boolean })], l.prototype, "readonly", void 0), s([i({ type: String })], l.prototype, "state", void 0), s([i({
+	type: String,
+	attribute: "error-message"
+})], l.prototype, "errorMessage", void 0), s([i({ attribute: !1 })], l.prototype, "onChange", void 0), s([a()], l.prototype, "_hasIcon", void 0), l = s([r("app-input")], l);
+export { l as t };

package/dist/input.js

@@ -0,0 +1,2 @@
+import { t as e } from "./input-BVlPYqTe.js";
+export { e as Input };

package/dist/layout-CYvgu_WE.js

@@ -0,0 +1,23 @@
+import { LitElement as e } from "lit";
+import { customElement as t } from "lit/decorators.js";
+var n = "app-layout{box-sizing:border-box;width:100%;min-height:100vh;display:block}app-layout>[slot=sidebar]{z-index:100;height:100vh;position:fixed;top:0;left:0}app-layout>[slot=content]{margin-left:var(--menu-collapsed-width,3.5rem);min-height:100vh;overflow:auto}";
+function r(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 i = !1;
+function a() {
+	if (i) return;
+	i = !0;
+	let e = document.createElement("style");
+	e.dataset.appLayout = "", e.textContent = n, document.head.appendChild(e);
+}
+var o = class extends e {
+	createRenderRoot() {
+		return a(), this;
+	}
+};
+o = r([t("app-layout")], o);
+export { o as t };

package/dist/layouts.js

@@ -0,0 +1,3 @@
+import { t as e } from "./layout-CYvgu_WE.js";
+import { t } from "./form-layout-DCX8X-8-.js";
+export { t as FormLayout, e as Layout };