@vverchonov/web-components 0.1.3 → 0.1.5

package/dist/button-DQ0O2D-7.js

@@ -0,0 +1,39 @@
+import { LitElement as e, html as t, unsafeCSS as n } from "lit";
+import { customElement as r, property as i } from "lit/decorators.js";
+var a = ":host{display:inline-block}button{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);cursor:pointer;transition:background-color var(--button-transition-duration) var(--ease-emphasized), border-color var(--button-transition-duration) var(--ease-emphasized), color var(--button-transition-duration) var(--ease-emphasized);border:none;align-items:center;display:inline-flex}button:has(.icon-wrapper:has(*)){gap:var(--button-icon-gap)}button .icon-wrapper{align-items:center;display:inline-flex}button .icon-wrapper:not(:has(*)){display:none}button.icon-start .icon-wrapper{order:0}button.icon-start .label{order:1}button.icon-end .label{order:0}button.icon-end .icon-wrapper{order:1}button.variant-primary{background:var(--color-primary);color:var(--color-text-inverse)}button.variant-primary:hover{background:var(--color-primary-hover)}button.variant-secondary{color:var(--color-primary);border:2px solid var(--color-primary);background:0 0}button.variant-secondary:hover{background:var(--color-primary-muted)}button.variant-ghost{color:var(--color-primary);background:0 0;border:none}button.variant-ghost:hover{background:var(--color-primary-muted)}button.variant-danger{background:var(--color-invalid);color:var(--color-text-inverse);border:none}button.variant-danger:hover{background:var(--color-invalid-hover)}button:focus{outline:none}button:focus-visible{outline:var(--button-focus-ring-width) solid var(--color-primary);outline-offset:var(--button-focus-ring-offset)}";
+function o(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 s = class extends e {
+	static {
+		this.styles = [n(a)];
+	}
+	_handleClick(e) {
+		this.onClick?.(e);
+	}
+	render() {
+		return t`
+      <button
+        type=${this.type}
+        class="icon-${this.iconPosition} variant-${this.variant}"
+        @click=${this._handleClick}
+      >
+        <span class="icon-wrapper">
+          <slot name="icon"></slot>
+        </span>
+        <span class="label">${this.label}</span>
+      </button>
+    `;
+	}
+	constructor(...e) {
+		super(...e), this.label = "Click me", this.iconPosition = "start", this.type = "button", this.variant = "primary";
+	}
+};
+o([i({ type: String })], s.prototype, "label", void 0), o([i({
+	type: String,
+	attribute: "icon-position"
+})], s.prototype, "iconPosition", void 0), o([i({ type: String })], s.prototype, "type", void 0), o([i({ type: String })], s.prototype, "variant", void 0), o([i({ attribute: !1 })], s.prototype, "onClick", void 0), s = o([r("app-button")], s);
+export { s as t };

package/dist/button.js

@@ -1,2 +1,4 @@
-import { t as e } from "./button-DYrT530y.js";
-export { e as Button };
+import { t as e } from "./inject-theme-BJHnhQgY.js";
+import { t } from "./button-DQ0O2D-7.js";
+e();
+export { t as Button };

package/dist/card-3IqRfmms.js

@@ -0,0 +1,83 @@
+import { LitElement as e, html as t, nothing as n, unsafeCSS as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+var o = ":host{display:block}.card{border-radius:var(--radius-card);color:var(--color-text);transition:box-shadow var(--card-transition-duration) var(--ease-emphasized), border-color var(--card-transition-duration) var(--ease-emphasized), background-color var(--card-transition-duration) var(--ease-emphasized);overflow:hidden}.card.variant-elevated{background:var(--color-surface);box-shadow:0 1px 3px oklch(0% 0 0/.1),0 1px 2px -1px oklch(0% 0 0/.1)}.card.variant-outlined{background:var(--color-surface);border:1px solid var(--color-border)}.card.variant-filled{background:var(--color-surface-elevated)}.card.clickable{cursor:pointer}.card.clickable:hover.variant-elevated{box-shadow:0 4px 6px -1px oklch(0% 0 0/.1),0 2px 4px -2px oklch(0% 0 0/.1)}.card.clickable:hover.variant-outlined{border-color:var(--color-border-strong)}.card.clickable:hover.variant-filled{background:var(--color-border)}.card.clickable:active{transform:scale(.99)}.header{padding:var(--card-padding);justify-content:space-between;align-items:center;gap:var(--card-gap);cursor:pointer;user-select:none;text-align:start;width:100%;font:inherit;color:inherit;background:0 0;border:none;display:flex}.header:focus{outline:none}.header:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;border-radius:var(--radius-card)}.header-content{flex:1;min-width:0}.chevron{width:1.25rem;height:1.25rem;color:var(--color-text-muted);transition:transform var(--card-transition-duration) var(--ease-emphasized);flex-shrink:0}.chevron.rotated{transform:rotate(180deg)}.body-wrapper{transition:grid-template-rows var(--card-transition-duration) var(--ease-emphasized);grid-template-rows:0fr;display:grid}.body-wrapper.open{grid-template-rows:1fr}.body-inner{overflow:hidden}.body,.footer{padding:0 var(--card-padding) var(--card-padding)}.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 = [r(o)];
+	}
+	_toggle() {
+		this.open = !this.open, this.dispatchEvent(new CustomEvent("card-toggle", {
+			detail: { open: this.open },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_handleCardClick(e) {
+		this.clickable && this.onClick?.(e);
+	}
+	render() {
+		return t`
+      <div
+        class=${[
+			"card",
+			`variant-${this.variant}`,
+			this.clickable ? "clickable" : ""
+		].filter(Boolean).join(" ")}
+        @click=${this._handleCardClick}
+        role=${this.clickable ? "button" : n}
+        tabindex=${this.clickable ? "0" : n}
+      >
+        <button
+          class="header"
+          type="button"
+          aria-expanded=${this.open}
+          @click=${(e) => {
+			e.stopPropagation(), this._toggle();
+		}}
+        >
+          <span class="header-content">
+            <slot name="title"></slot>
+          </span>
+          <svg
+            class="chevron ${this.open ? "rotated" : ""}"
+            xmlns="http://www.w3.org/2000/svg"
+            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>
+        </button>
+
+        <div class="body-wrapper ${this.open ? "open" : ""}">
+          <div class="body-inner">
+            <div class="body">
+              <slot></slot>
+            </div>
+            <div class="footer">
+              <slot name="footer"></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+	constructor(...e) {
+		super(...e), this.variant = "elevated", this.open = !0, this.clickable = !1;
+	}
+};
+s([a({ type: String })], c.prototype, "variant", void 0), s([a({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "open", void 0), s([a({ type: Boolean })], c.prototype, "clickable", void 0), s([a({ attribute: !1 })], c.prototype, "onClick", void 0), c = s([i("app-card")], c);
+export { c as t };

package/dist/card.js

@@ -0,0 +1,4 @@
+import { t as e } from "./inject-theme-BJHnhQgY.js";
+import { t } from "./card-3IqRfmms.js";
+e();
+export { t as Card };

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

@@ -1,2 +1,6 @@
+/** Icon placement relative to the button label. */
 export type ButtonIconPosition = 'start' | 'end';
+/** HTML button type attribute values. */
 export type ButtonType = 'button' | 'submit' | 'reset';
+/** Visual style variant for `<app-button>`. */
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';

package/dist/components/button/button.d.ts

@@ -1,13 +1,22 @@
 import { LitElement } from 'lit';
-import { ButtonIconPosition, ButtonType } from './button-types.ts';
-/** Custom element name must contain a hyphen; use <app-button> in HTML. */
+import { ButtonIconPosition, ButtonType, ButtonVariant } from './button-types.ts';
+/**
+ * General-purpose button with label, optional icon slot, and visual variants.
+ *
+ * @tag app-button
+ * @slot icon - Optional icon rendered before or after the label (controlled by `icon-position`).
+ */
 export declare class Button extends LitElement {
     static styles: import('lit').CSSResult[];
+    /** Visible button text. */
     label: string;
-    /** Where to show the icon: before the label (start) or after (end). */
+    /** Where to show the icon: before the label (start) or after (end) (attribute: `icon-position`). */
     iconPosition: ButtonIconPosition;
+    /** HTML button type attribute. */
     type: ButtonType;
-    /** Optional click handler; set via property (e.g. el.onClick = (e) => ...). */
+    /** Visual style variant. */
+    variant: ButtonVariant;
+    /** Optional click callback. Set via property (e.g. `el.onClick = (e) => ...`). */
     onClick?: (e: MouseEvent) => void;
     private _handleClick;
     render(): import('lit-html').TemplateResult<1>;

package/dist/components/button/index.d.ts

@@ -1,2 +1,2 @@
 export { Button } from './button.ts';
-export type { ButtonIconPosition, ButtonType } from './button-types.ts';
+export type { ButtonIconPosition, ButtonType, ButtonVariant } from './button-types.ts';

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

@@ -0,0 +1,7 @@
+/** Visual style variant for `<app-card>`. */
+export type CardVariant = 'elevated' | 'outlined' | 'filled';
+/** Detail payload for the `card-toggle` custom event. */
+export interface CardToggleEventDetail {
+    /** Whether the card body is now visible. */
+    open: boolean;
+}

package/dist/components/card/card.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+import { CardVariant } from './card-types.ts';
+/**
+ * Collapsible card with title, body, and footer slots, three visual variants,
+ * and optional click interaction.
+ *
+ * @tag app-card
+ * @slot title - Header content, always visible. Clicking toggles the body open/closed.
+ * @slot - Default slot for the card body content (hidden when collapsed).
+ * @slot footer - Bottom actions area (hidden when collapsed).
+ * @fires card-toggle - Fires when the card is toggled open or closed. Detail: `{ open: boolean }`.
+ */
+export declare class Card extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Visual style variant. */
+    variant: CardVariant;
+    /** Whether the card body is expanded. */
+    open: boolean;
+    /** Enables hover/active effects and click handling on the card. */
+    clickable: boolean;
+    /** Optional click callback. Set via property (e.g. `el.onClick = (e) => ...`). */
+    onClick?: (e: MouseEvent) => void;
+    private _toggle;
+    private _handleCardClick;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/components/card/index.d.ts

@@ -0,0 +1,2 @@
+export { Card } from './card.ts';
+export type { CardVariant, CardToggleEventDetail } from './card-types.ts';

package/dist/components/dropdown-button/dropdown-button-types.d.ts

@@ -1,13 +1,21 @@
 import { TemplateResult } from 'lit';
+/** Direction the dropdown panel opens relative to the trigger. */
 export type DropdownPlacement = 'bottom' | 'top';
+/** A single item (or parent of nested items) in a dropdown menu. */
 export interface DropdownItem {
+    /** Visible label text. */
     label: string;
+    /** Value emitted in the `dropdown-select` event. */
     value?: string;
-    /** Optional per-item icon: string (icon name for slot) or TemplateResult. */
+    /** Per-item icon: a slot name string or an inline Lit TemplateResult. */
     icon?: string | TemplateResult;
+    /** Nested child items; renders an inline sub-menu when present. */
     children?: DropdownItem[];
 }
+/** Detail payload for the `dropdown-select` custom event. */
 export interface DropdownSelectEventDetail {
+    /** The selected item object. */
     item: DropdownItem;
+    /** Shorthand for `item.value`. */
     value?: string;
 }

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

@@ -1,9 +1,19 @@
 import { LitElement, TemplateResult } from 'lit';
 import { DropdownItem, DropdownPlacement } from './dropdown-button-types';
+/**
+ * Button that opens a dropdown menu with nested sub-menu support.
+ *
+ * @tag app-dropdown-button
+ * @slot icon - Optional icon shown in the trigger button.
+ * @fires dropdown-select - Fired when a leaf item is selected. Detail: `{ item, value }`.
+ */
 export declare class DropdownButton extends LitElement {
     static styles: import('lit').CSSResult[];
+    /** Text label displayed in the trigger button. */
     label: string;
+    /** Preferred direction for the dropdown panel. Auto-flips when insufficient viewport space. */
     placement: DropdownPlacement;
+    /** Menu items (supports nested `children` for sub-menus). */
     items: DropdownItem[];
     private _open;
     /**

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

@@ -1,2 +1,4 @@
+/** Allowed HTML input types for `<app-input>`. */
 export type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
+/** Visual validation state for `<app-input>`. */
 export type InputState = 'default' | 'valid' | 'invalid';

package/dist/components/input/input.d.ts

@@ -1,18 +1,35 @@
 import { LitElement } from 'lit';
 import { InputType, InputState } from './input-types.ts';
+/**
+ * Text input with optional label, leading icon slot, and validation state.
+ *
+ * @tag app-input
+ * @slot icon - Optional leading icon displayed before the input field.
+ */
 export declare class Input extends LitElement {
     static styles: import('lit').CSSResult[];
     private readonly _uid;
+    /** HTML input type. */
     type: InputType;
+    /** Visible label rendered above the input. */
     label: string;
+    /** Placeholder text shown when the input is empty. */
     placeholder: string;
+    /** Current input value (two-way: updates on user input). */
     value: string;
+    /** Form field name submitted with the value. */
     name: string;
+    /** Marks the input as required for form validation. */
     required: boolean;
+    /** Disables the input and prevents interaction. */
     disabled: boolean;
+    /** Makes the input read-only (focusable but not editable). */
     readonly: boolean;
+    /** Validation state controlling visual feedback and ARIA. */
     state: InputState;
+    /** Error text displayed below the input when `state` is `'invalid'` (attribute: `error-message`). */
     errorMessage: string;
+    /** Callback invoked with the new value string on every input event. Set via property. */
     onChange?: (value: string) => void;
     private _hasIcon;
     private _onIconSlotChange;

package/dist/components/layouts/form/form-layout-types.d.ts

@@ -1,3 +1,5 @@
+/** Detail payload for `form-layout-next`, `form-layout-back`, and `form-layout-submit` events. */
 export interface FormLayoutStageEventDetail {
+    /** The stage index after the navigation action (0-based). */
     stage: number;
 }

package/dist/components/layouts/form/form-layout.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 /**
- * app-form-layout — a configurable form shell with optional multi-step stages.
+ * Configurable form shell with optional multi-step stages.
  *
  * Single-step usage:
  *   <app-form-layout title="Create account" description="Fill in the details below." columns="2">
@@ -15,14 +15,18 @@ import { LitElement } from 'lit';
  *     <div slot="stage-2">…step 3 fields…</div>
  *   </app-form-layout>
  *
- * Events:
- *   form-layout-next   — fired when moving to the next stage
- *   form-layout-back   — fired when moving to the previous stage
- *   form-layout-submit — fired when the submit button is clicked
+ * @tag app-form-layout
+ * @slot fields - Form fields for single-step mode.
+ * @slot stage-{index} - Form fields for each stage in multi-step mode.
+ * @fires form-layout-next - Fired when moving to the next stage. Detail: `{ stage }`.
+ * @fires form-layout-back - Fired when moving to the previous stage. Detail: `{ stage }`.
+ * @fires form-layout-submit - Fired when the submit button is clicked. Detail: `{ stage }`.
  */
 export declare class FormLayout extends LitElement {
     static styles: import('lit').CSSResult[];
+    /** Form heading displayed at the top. */
     title: string;
+    /** Subtitle text shown below the title. */
     description: string;
     /** Number of columns for the fields grid. */
     columns: 1 | 2 | 3;

package/dist/components/layouts/page/layout.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 /**
- * app-layout — two-column shell with a sticky sidebar and a scrollable content area.
+ * Two-column shell with a sticky sidebar and a scrollable content area.
  *
  * No Shadow DOM: styles are injected once into document.head and target
  * `app-layout > [slot="sidebar"]` / `app-layout > [slot="content"]` directly.
@@ -14,6 +14,10 @@ import { LitElement } from 'lit';
  * The sidebar width is fixed to --menu-collapsed-width (default 3.5rem).
  * When the menu expands on hover it overlays the content via overflow:visible
  * on the sidebar — the content area never moves.
+ *
+ * @tag app-layout
+ * @slot sidebar - Fixed sidebar area (typically `<app-menu collapsed>`).
+ * @slot content - Main scrollable content area.
  */
 export declare class Layout extends LitElement {
     createRenderRoot(): HTMLElement;

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

@@ -1,16 +1,28 @@
 import { TemplateResult } from 'lit';
+/** A single navigation item (or parent of nested items) in `<app-menu>`. */
 export interface MenuItem {
+    /** Visible label text. */
     label: string;
+    /** Unique value emitted in the `menu-select` event. */
     value?: string;
+    /** Per-item icon: a slot name string or an inline Lit TemplateResult. */
     icon?: string | TemplateResult;
+    /** When set, the item renders as an `<a>` link instead of a `<button>`. */
     href?: string;
+    /** @deprecated Use `activeValue` on the component instead. */
     active?: boolean;
+    /** Nested child items; renders an expandable sub-menu when present. */
     children?: MenuItem[];
 }
+/** Detail payload for the `menu-select` custom event. */
 export interface MenuSelectEventDetail {
+    /** The selected item object. */
     item: MenuItem;
+    /** Shorthand for `item.value`. */
     value: string | undefined;
 }
+/** Detail payload for the `menu-search` custom event. */
 export interface MenuSearchEventDetail {
+    /** Current search query string. */
     query: string;
 }

package/dist/components/menu/menu.d.ts

@@ -1,11 +1,26 @@
 import { LitElement, TemplateResult } from 'lit';
 import { MenuItem } from './menu-types';
+/**
+ * Sidebar navigation menu with nested items, search, and collapsible mode.
+ *
+ * @tag app-menu
+ * @slot logo - Full-width logo shown when the menu is expanded.
+ * @slot logo-icon - Compact logo/icon shown when the menu is collapsed.
+ * @slot bottom - Content rendered at the bottom of the sidebar (e.g. user profile).
+ * @fires menu-select - Fired when a leaf menu item is clicked. Detail: `{ item, value }`.
+ * @fires menu-search - Fired on search input. Detail: `{ query }`.
+ */
 export declare class Menu extends LitElement {
     static styles: import('lit').CSSResult[];
+    /** Primary navigation items rendered in the main section. */
     items: MenuItem[];
+    /** Secondary items rendered in the footer section below the main items. */
     footerItems: MenuItem[];
+    /** Enables the search input above the navigation items. */
     searchable: boolean;
+    /** Placeholder text for the search input. */
     searchPlaceholder: string;
+    /** Value of the currently active item; highlights the matching item and auto-expands its parents. */
     activeValue?: string;
     /**
      * When true the menu renders in semi-open (icon-only) mode by default.

package/dist/components/modal/modal-types.d.ts

@@ -1,2 +1,4 @@
+/** Button-layout variant for `<app-modal>`: info (OK), confirm (Cancel + Confirm), form (Cancel + Save). */
 export type ModalVariant = 'info' | 'confirm' | 'form';
+/** Dialog width preset for `<app-modal>`. */
 export type ModalSize = 'sm' | 'md' | 'lg';

package/dist/components/modal/modal.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 import { ModalVariant, ModalSize } from './modal-types.ts';
 /**
- * app-modal — a configurable dialog for info, confirm, form, and custom use-cases.
+ * Configurable dialog for info, confirm, form, and custom use-cases.
  *
  * Info (single OK button):
  *   <app-modal open title="Note" description="Saved." variant="info"></app-modal>
@@ -28,10 +28,12 @@ import { ModalVariant, ModalSize } from './modal-types.ts';
  *     <app-form-layout seamless .stages=${[…]}>…</app-form-layout>
  *   </app-modal>
  *
- * Events:
- *   modal-confirm — primary action (Save / Confirm / OK) clicked
- *   modal-cancel  — secondary action (Cancel) clicked
- *   modal-close   — any close action (Escape, backdrop, OK, Confirm, Cancel)
+ * @tag app-modal
+ * @slot - Default slot for body content.
+ * @slot footer - Custom footer that replaces the built-in action buttons.
+ * @fires modal-confirm - Primary action (Save / Confirm / OK) clicked.
+ * @fires modal-cancel - Secondary action (Cancel) clicked.
+ * @fires modal-close - Any close action (Escape, backdrop, OK, Confirm, Cancel).
  */
 export declare class Modal extends LitElement {
     static styles: import('lit').CSSResult[];

package/dist/components/radio-group/index.d.ts

@@ -0,0 +1,2 @@
+export { RadioGroup } from './radio-group.ts';
+export type { RadioGroupItem, RadioGroupOrientation, RadioGroupState, RadioGroupChangeEventDetail } from './radio-group-types.ts';

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

@@ -0,0 +1,18 @@
+/** Layout direction for `<app-radio-group>`. */
+export type RadioGroupOrientation = 'vertical' | 'horizontal';
+/** Visual validation state for `<app-radio-group>`. */
+export type RadioGroupState = 'default' | 'valid' | 'invalid';
+/** A single option in `<app-radio-group>`. */
+export interface RadioGroupItem {
+    /** Visible label text. */
+    label: string;
+    /** Unique value identifying this option. */
+    value: string;
+    /** When true the option cannot be selected. */
+    disabled?: boolean;
+}
+/** Detail payload for the `radio-change` custom event. */
+export interface RadioGroupChangeEventDetail {
+    /** The newly selected value. */
+    value: string;
+}

package/dist/components/radio-group/radio-group.d.ts

@@ -0,0 +1,40 @@
+import { LitElement } from 'lit';
+import { RadioGroupItem, RadioGroupOrientation, RadioGroupState, RadioGroupChangeEventDetail } from './radio-group-types';
+/**
+ * Radio group for single-option selection with keyboard navigation and validation.
+ *
+ * @tag app-radio-group
+ * @fires radio-change - Fired when the selected option changes. Detail: `{ value: string }`.
+ */
+export declare class RadioGroup extends LitElement {
+    static styles: import('lit').CSSResult[];
+    private readonly _uid;
+    /** Array of selectable radio options. */
+    items: RadioGroupItem[];
+    /** Currently selected value. */
+    value: string;
+    /** Visible label rendered above the radio options. */
+    label: string;
+    /** Form field name. */
+    name: string;
+    /** Disables the entire group. */
+    disabled: boolean;
+    /** Layout direction: vertical (default) or horizontal. */
+    orientation: RadioGroupOrientation;
+    /** Validation state controlling visual feedback and ARIA. */
+    state: RadioGroupState;
+    /** Error text displayed below the group when `state` is `'invalid'` (attribute: `error-message`). */
+    errorMessage: string;
+    /** Optional callback invoked with the `radio-change` custom event. Set via property. */
+    onChange?: (e: CustomEvent<RadioGroupChangeEventDetail>) => void;
+    private _focusedIndex;
+    private get _enabledItems();
+    private _select;
+    private _onRadioClick;
+    private _onKeydown;
+    private _enabledIndexFromAbsolute;
+    private _focusOption;
+    private _onFocus;
+    private _getInitialTabIndex;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/components/selector/selector-types.d.ts

@@ -1,18 +1,27 @@
 import { TemplateResult } from 'lit';
+/** Visual validation state for `<app-selector>`. */
 export type SelectorState = 'default' | 'valid' | 'invalid';
+/** A single option in `<app-selector>`. */
 export interface SelectorOption {
+    /** Visible label text. */
     label: string;
+    /** Unique value identifying this option. */
     value: string;
-    /** Optional per-item icon: string (icon name for slot) or TemplateResult. */
+    /** Per-item icon: a slot name string or an inline Lit TemplateResult. */
     icon?: string | TemplateResult;
+    /** When true the option cannot be selected. */
     disabled?: boolean;
     /** Group key — matches `SelectorGroup.key` for visual grouping. */
     group?: string;
 }
+/** Defines a named group for visually grouping selector options. */
 export interface SelectorGroup {
+    /** Unique group identifier referenced by `SelectorOption.group`. */
     key: string;
+    /** Visible group header label. */
     label: string;
 }
+/** Detail payload for the `selector-change` custom event. */
 export interface SelectorChangeEventDetail {
     /** Selected values. Always an array (single-select wraps in a one-element array). */
     value: string[];

package/dist/components/selector/selector.d.ts

@@ -1,18 +1,35 @@
 import { LitElement } from 'lit';
 import { SelectorOption, SelectorGroup, SelectorState } from './selector-types';
+/**
+ * Dropdown selector (single or multi-select) with search, groups, and validation.
+ *
+ * @tag app-selector
+ * @fires selector-change - Fired when the selection changes. Detail: `{ value: string[] }`.
+ */
 export declare class Selector extends LitElement {
     static styles: import('lit').CSSResult[];
     private readonly _uid;
+    /** Flat list of selectable options. */
     items: SelectorOption[];
+    /** Optional group definitions for visually grouping options. */
     groups: SelectorGroup[];
+    /** Currently selected values (always an array, even in single-select mode). */
     value: string[];
+    /** Visible label rendered above the trigger. */
     label: string;
+    /** Placeholder text shown when nothing is selected. */
     placeholder: string;
+    /** Enables a text search input inside the dropdown panel. */
     searchable: boolean;
+    /** Allows selecting more than one option at a time. */
     multiple: boolean;
+    /** Disables the selector and prevents interaction. */
     disabled: boolean;
+    /** Form field name submitted with the value. */
     name: string;
+    /** Validation state controlling visual feedback and ARIA. */
     state: SelectorState;
+    /** Error text displayed below the selector when `state` is `'invalid'` (attribute: `error-message`). */
     errorMessage: string;
     private _open;
     private _search;

package/dist/components/table/table-types.d.ts

@@ -1,4 +1,5 @@
 import { TemplateResult } from 'lit';
+/** Describes a single column in `<app-table>`. */
 export interface ColumnDef<T = Record<string, unknown>> {
     /** Unique key — matched against row object properties for default text rendering. */
     key: string;
@@ -19,17 +20,28 @@ export interface ColumnDef<T = Record<string, unknown>> {
      */
     renderCell?: (row: T, rowIndex: number) => TemplateResult | unknown;
 }
+/** Sort direction for a table column. */
 export type SortDir = 'asc' | 'desc';
+/** Detail payload for the `table-sort` custom event. */
 export interface TableSortEvent {
+    /** Key of the column being sorted. */
     column: string;
+    /** Current sort direction. */
     dir: SortDir;
+    /** Active page size (useful when re-fetching server data). */
     pageSize: number;
 }
+/** Detail payload for the `table-page` custom event. */
 export interface TablePageEvent {
+    /** Newly selected page (1-based). */
     page: number;
+    /** Active page size. */
     pageSize: number;
 }
+/** Detail payload for the `table-column-toggle` custom event. */
 export interface TableColumnToggleEvent {
+    /** Key of the toggled column. */
     column: string;
+    /** Whether the column is now hidden. */
     hidden: boolean;
 }

package/dist/components/table/table.d.ts

@@ -1,8 +1,19 @@
 import { LitElement } from 'lit';
 import { ColumnDef } from './table-types';
+/**
+ * Data table with sortable columns, pagination, column-visibility toggle,
+ * and optional server-side data mode.
+ *
+ * @tag app-table
+ * @fires table-sort - Fired when a sortable column header is clicked. Detail: `{ column, dir, pageSize }`.
+ * @fires table-page - Fired when the user navigates to a different page. Detail: `{ page, pageSize }`.
+ * @fires table-column-toggle - Fired when a column is shown/hidden via the toggle panel. Detail: `{ column, hidden }`.
+ */
 export declare class Table extends LitElement {
     static styles: import('lit').CSSResult[];
+    /** Column definitions describing each table column. */
     columns: ColumnDef<any>[];
+    /** Row data objects keyed by column `key`. */
     rows: Record<string, unknown>[];
     /** If > 0, enables pagination with this many rows per page. */
     pageSize: number;