@vverchonov/web-components 0.1.0

package/dist/button-DYrT530y.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);background:var(--color-primary);color:var(--color-text-inverse);cursor:pointer;transition:background-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:hover{background:var(--color-primary-hover)}button:focus{outline:none}";
+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}"
+        @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";
+	}
+};
+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({ attribute: !1 })], s.prototype, "onClick", void 0), s = o([r("app-button")], s);
+export { s as t };

package/dist/button.js

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

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

@@ -0,0 +1,2 @@
+export type ButtonIconPosition = 'start' | 'end';
+export type ButtonType = 'button' | 'submit' | 'reset';

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

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+import { ButtonIconPosition, ButtonType } from './button-types.ts';
+/** Custom element name must contain a hyphen; use <app-button> in HTML. */
+export declare class Button extends LitElement {
+    static styles: import('lit').CSSResult[];
+    label: string;
+    /** Where to show the icon: before the label (start) or after (end). */
+    iconPosition: ButtonIconPosition;
+    type: ButtonType;
+    /** Optional click handler; 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

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

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

@@ -0,0 +1,13 @@
+import { TemplateResult } from 'lit';
+export type DropdownPlacement = 'bottom' | 'top';
+export interface DropdownItem {
+    label: string;
+    value?: string;
+    /** Optional per-item icon: string (icon name for slot) or TemplateResult. */
+    icon?: string | TemplateResult;
+    children?: DropdownItem[];
+}
+export interface DropdownSelectEventDetail {
+    item: DropdownItem;
+    value?: string;
+}

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

@@ -0,0 +1,34 @@
+import { LitElement, TemplateResult } from 'lit';
+import { DropdownItem, DropdownPlacement } from './dropdown-button-types';
+export declare class DropdownButton extends LitElement {
+    static styles: import('lit').CSSResult[];
+    label: string;
+    placement: DropdownPlacement;
+    items: DropdownItem[];
+    private _open;
+    /**
+     * Tracks which parent-item paths have their inline submenus expanded.
+     * Paths use dash-separated indices, e.g. "1" for the second top-level item,
+     * "1-0" for its first child, etc.
+     * We always assign a new Set so Lit detects the change.
+     */
+    private _openPaths;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onDocumentClick;
+    private _onDocumentKeydown;
+    private _toggle;
+    private _positionPanel;
+    /**
+     * 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.
+     */
+    private _toggleSubmenu;
+    private _onTriggerKeydown;
+    private _onPanelKeydown;
+    private _onItemClick;
+    private _renderItemIcon;
+    private _renderMenu;
+    render(): TemplateResult<1>;
+}

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

@@ -0,0 +1,2 @@
+export { DropdownButton } from './dropdown-button.ts';
+export type { DropdownItem, DropdownSelectEventDetail, DropdownPlacement } from './dropdown-button-types.ts';

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

@@ -0,0 +1,2 @@
+export { Input } from './input.ts';
+export type { InputType, InputState } from './input-types.ts';

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

@@ -0,0 +1,2 @@
+export type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
+export type InputState = 'default' | 'valid' | 'invalid';

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

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+import { InputType, InputState } from './input-types.ts';
+export declare class Input extends LitElement {
+    static styles: import('lit').CSSResult[];
+    private readonly _uid;
+    type: InputType;
+    label: string;
+    placeholder: string;
+    value: string;
+    name: string;
+    required: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    state: InputState;
+    errorMessage: string;
+    onChange?: (value: string) => void;
+    private _hasIcon;
+    private _onIconSlotChange;
+    private _handleInput;
+    private _renderStateIcon;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,3 @@
+export interface FormLayoutStageEventDetail {
+    stage: number;
+}

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

@@ -0,0 +1,53 @@
+import { LitElement } from 'lit';
+/**
+ * app-form-layout — a 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">
+ *     <app-input slot="fields" label="First name"></app-input>
+ *     <app-input slot="fields" label="Last name"></app-input>
+ *   </app-form-layout>
+ *
+ * Multi-step usage:
+ *   <app-form-layout title="Onboarding" .stages=${['Personal', 'Address', 'Review']}>
+ *     <div slot="stage-0">…step 1 fields…</div>
+ *     <div slot="stage-1">…step 2 fields…</div>
+ *     <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
+ */
+export declare class FormLayout extends LitElement {
+    static styles: import('lit').CSSResult[];
+    title: string;
+    description: string;
+    /** Number of columns for the fields grid. */
+    columns: 1 | 2 | 3;
+    /**
+     * Stage labels. When non-empty, the form renders a step indicator and
+     * Back / Next / Submit navigation buttons. The slot for each stage is
+     * `slot="stage-{index}"`.
+     */
+    stages: string[];
+    /**
+     * Seamless mode — strips the outer card shell (border, background, border-radius).
+     * Use when embedding inside another container such as app-modal with flush.
+     */
+    seamless: boolean;
+    /** Active stage index (0-based). Controlled externally or managed internally. */
+    currentStage: number;
+    private _stage;
+    willUpdate(changed: Map<string, unknown>): void;
+    private get _isMultiStep();
+    private get _isLastStage();
+    private _handleBack;
+    private _handleNext;
+    private _handleSubmit;
+    private _renderStepIndicator;
+    private _renderFields;
+    private _renderActions;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/components/layouts/form/index.d.ts

@@ -0,0 +1,2 @@
+export { FormLayout } from './form-layout.ts';
+export type { FormLayoutStageEventDetail } from './form-layout-types.ts';

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

@@ -0,0 +1,3 @@
+export { Layout } from './page';
+export { FormLayout } from './form';
+export type { FormLayoutStageEventDetail } from './form';

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

@@ -0,0 +1 @@
+export { Layout } from './layout.ts';

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

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+/**
+ * app-layout — 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.
+ *
+ * Usage:
+ *   <app-layout>
+ *     <app-menu slot="sidebar" collapsed></app-menu>
+ *     <main slot="content">…</main>
+ *   </app-layout>
+ *
+ * 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.
+ */
+export declare class Layout extends LitElement {
+    createRenderRoot(): HTMLElement;
+}

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

@@ -0,0 +1,2 @@
+export { Menu } from './menu';
+export type { MenuItem, MenuSelectEventDetail, MenuSearchEventDetail } from './menu-types';

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

@@ -0,0 +1,16 @@
+import { TemplateResult } from 'lit';
+export interface MenuItem {
+    label: string;
+    value?: string;
+    icon?: string | TemplateResult;
+    href?: string;
+    active?: boolean;
+    children?: MenuItem[];
+}
+export interface MenuSelectEventDetail {
+    item: MenuItem;
+    value: string | undefined;
+}
+export interface MenuSearchEventDetail {
+    query: string;
+}

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

@@ -0,0 +1,36 @@
+import { LitElement, TemplateResult } from 'lit';
+import { MenuItem } from './menu-types';
+export declare class Menu extends LitElement {
+    static styles: import('lit').CSSResult[];
+    items: MenuItem[];
+    footerItems: MenuItem[];
+    searchable: boolean;
+    searchPlaceholder: string;
+    activeValue?: string;
+    /**
+     * When true the menu renders in semi-open (icon-only) mode by default.
+     * Hovering the component temporarily expands it to full width.
+     */
+    collapsed: boolean;
+    private _openPaths;
+    private _searchQuery;
+    private _hoverExpanded;
+    private _bottomSlotPopulated;
+    private get _isCollapsed();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    private _itemContainsActiveValue;
+    private _getPathToActiveValue;
+    private _onBottomSlotChange;
+    private _onMouseEnter;
+    private _onMouseLeave;
+    private _toggleSubmenu;
+    private _onItemClick;
+    private _onSearchInput;
+    private _onNavKeydown;
+    private _renderItemIcon;
+    private _renderItems;
+    private _renderMenu;
+    render(): TemplateResult<1>;
+}

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

@@ -0,0 +1,2 @@
+export { Modal } from './modal';
+export type { ModalVariant, ModalSize } from './modal-types.ts';

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

@@ -0,0 +1,2 @@
+export type ModalVariant = 'info' | 'confirm' | 'form';
+export type ModalSize = 'sm' | 'md' | 'lg';

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

@@ -0,0 +1,103 @@
+import { LitElement } from 'lit';
+import { ModalVariant, ModalSize } from './modal-types.ts';
+/**
+ * app-modal — a 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>
+ *
+ * Confirm (two buttons):
+ *   <app-modal open title="Delete?" description="Cannot be undone." variant="confirm"></app-modal>
+ *
+ * Form (two buttons + slotted content):
+ *   <app-modal open title="Edit profile" variant="form">
+ *     <app-input label="Name"></app-input>
+ *   </app-modal>
+ *
+ * Custom footer buttons (footer slot replaces built-in actions):
+ *   <app-modal open title="Request">
+ *     <app-input label="Subject"></app-input>
+ *     <div slot="footer">
+ *       <app-button label="Save draft"></app-button>
+ *       <app-button label="Submit"></app-button>
+ *     </div>
+ *   </app-modal>
+ *
+ * Embedded multi-step form (hide-actions + flush + seamless form-layout):
+ *   <app-modal open title="Create account" hide-actions flush size="lg">
+ *     <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)
+ */
+export declare class Modal extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Whether the modal is visible. Reflect so CSS :host([open]) works. */
+    open: boolean;
+    /** Dialog heading. */
+    title: string;
+    /** Subtitle / body text shown below the title (optional). */
+    description: string;
+    /**
+     * Controls the built-in button layout:
+     * - `info`    → single OK button
+     * - `confirm` → Cancel + Confirm
+     * - `form`    → Cancel + Save
+     */
+    variant: ModalVariant;
+    /**
+     * Dialog width:
+     * - `sm`  → 24rem
+     * - `md`  → 32rem (default, uses --modal-width token)
+     * - `lg`  → 44rem (good for multi-step forms)
+     */
+    size: ModalSize;
+    /** Label for the primary action button. Defaults to variant-appropriate text. */
+    confirmLabel: string;
+    /** Label for the cancel button. */
+    cancelLabel: string;
+    /** Label for the OK button (info variant only). */
+    okLabel: string;
+    /** Close the modal when the backdrop is clicked. */
+    closeOnBackdrop: boolean;
+    /**
+     * Hide the built-in footer (divider + action buttons).
+     * Use when the slotted content manages its own actions (e.g. app-form-layout).
+     * Has no effect when the `footer` slot is populated — the slot always shows.
+     */
+    hideActions: boolean;
+    /**
+     * Remove body padding so slotted content fills edge-to-edge.
+     * Pair with `seamless` on app-form-layout for a clean embedded form.
+     */
+    flush: boolean;
+    /** True when the named `footer` slot has slotted content. */
+    private _hasFooterContent;
+    private _dialog;
+    /** The element that had focus before the modal opened — restored on close. */
+    private _previousFocus;
+    updated(changed: Map<string, unknown>): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleKeydown;
+    private _focusableSelectors;
+    private _getFocusable;
+    private _focusFirst;
+    private _trapFocus;
+    private _handleBackdropClick;
+    private _close;
+    private _handleConfirm;
+    private _handleCancel;
+    private get _resolvedConfirmLabel();
+    private _onFooterSlotChange;
+    private _renderBuiltInActions;
+    /**
+     * Whether the footer area (divider + buttons) should be visible at all.
+     * Hidden only when hide-actions=true AND the footer slot has no content.
+     */
+    private get _showFooter();
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,2 @@
+export { Selector } from './selector.ts';
+export type { SelectorOption, SelectorGroup, SelectorChangeEventDetail, SelectorState } from './selector-types.ts';

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

@@ -0,0 +1,19 @@
+import { TemplateResult } from 'lit';
+export type SelectorState = 'default' | 'valid' | 'invalid';
+export interface SelectorOption {
+    label: string;
+    value: string;
+    /** Optional per-item icon: string (icon name for slot) or TemplateResult. */
+    icon?: string | TemplateResult;
+    disabled?: boolean;
+    /** Group key — matches `SelectorGroup.key` for visual grouping. */
+    group?: string;
+}
+export interface SelectorGroup {
+    key: string;
+    label: string;
+}
+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

@@ -0,0 +1,56 @@
+import { LitElement } from 'lit';
+import { SelectorOption, SelectorGroup, SelectorState } from './selector-types';
+export declare class Selector extends LitElement {
+    static styles: import('lit').CSSResult[];
+    private readonly _uid;
+    items: SelectorOption[];
+    groups: SelectorGroup[];
+    value: string[];
+    label: string;
+    placeholder: string;
+    searchable: boolean;
+    multiple: boolean;
+    disabled: boolean;
+    name: string;
+    state: SelectorState;
+    errorMessage: string;
+    private _open;
+    private _search;
+    private _focusedIndex;
+    private _liveMessage;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get _filteredItems();
+    private _isSelected;
+    private _getOptionById;
+    /**
+     * Returns filtered items organized by group.
+     * Ungrouped items come first, then each group in the order defined by `this.groups`.
+     */
+    private _getGroupedItems;
+    /**
+     * Flat list of visible option values (for keyboard index tracking).
+     * Skips disabled items.
+     */
+    private get _navigableValues();
+    private _select;
+    private _deselect;
+    private _dispatchChange;
+    private _announceLive;
+    private _toggle;
+    private _openPanel;
+    private _close;
+    private _positionPanel;
+    private _onDocumentClick;
+    private _onDocumentKeydown;
+    private _onTriggerKeydown;
+    private _onPanelKeydown;
+    private _scrollToFocused;
+    private _onSearchInput;
+    private _onChipRemove;
+    private _renderOptionIcon;
+    private _renderChipIcon;
+    private _renderTriggerContent;
+    private _renderOptions;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,2 @@
+export { Table } from './table.ts';
+export type { ColumnDef, SortDir, TableSortEvent, TablePageEvent, TableColumnToggleEvent } from './table-types.ts';

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

@@ -0,0 +1,35 @@
+import { TemplateResult } from 'lit';
+export interface ColumnDef<T = Record<string, unknown>> {
+    /** Unique key — matched against row object properties for default text rendering. */
+    key: string;
+    /** Column header label. */
+    label: string;
+    /** When set, columns sharing the same group string are merged under a group header row. */
+    group?: string;
+    /** Adds a clickable sort indicator in the header. */
+    sortable?: boolean;
+    /** Start hidden; the user can reveal it via the column-toggle panel. */
+    hidden?: boolean;
+    /** Fixed column width, e.g. '200px'. Omit for auto. */
+    width?: string;
+    /**
+     * Custom cell renderer. Return a Lit TemplateResult (or any renderable value).
+     * The result is rendered directly inside the table's Shadow DOM — no extra
+     * shadow root per cell.
+     */
+    renderCell?: (row: T, rowIndex: number) => TemplateResult | unknown;
+}
+export type SortDir = 'asc' | 'desc';
+export interface TableSortEvent {
+    column: string;
+    dir: SortDir;
+    pageSize: number;
+}
+export interface TablePageEvent {
+    page: number;
+    pageSize: number;
+}
+export interface TableColumnToggleEvent {
+    column: string;
+    hidden: boolean;
+}

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

@@ -0,0 +1,47 @@
+import { LitElement } from 'lit';
+import { ColumnDef } from './table-types';
+export declare class Table extends LitElement {
+    static styles: import('lit').CSSResult[];
+    columns: ColumnDef<any>[];
+    rows: Record<string, unknown>[];
+    /** If > 0, enables pagination with this many rows per page. */
+    pageSize: number;
+    /**
+     * Total number of items across all pages. When > 0 (with pageSize > 0),
+     * the table enters server-side pagination mode: `rows` is treated as the
+     * current page's data and no local slicing is performed.
+     */
+    totalItems: number;
+    /** Current page (1-based). Can be set externally to navigate programmatically. */
+    page: number;
+    /** Shows a loading overlay on the table body while data is being fetched. */
+    loading: boolean;
+    /** When true, sorting is not performed locally — only the `table-sort` event fires. */
+    externalSort: boolean;
+    /** Show the column visibility toggle panel. */
+    showColumnToggle: boolean;
+    private _hiddenCols;
+    private _sortCol;
+    private _sortDir;
+    private _togglePanelOpen;
+    willUpdate(changed: Map<string, unknown>): void;
+    private get _visibleCols();
+    private get _hasGroups();
+    private get _hasPagination();
+    private get _isServerPagination();
+    private get _sortedRows();
+    private get _pagedRows();
+    private get _totalPages();
+    private _dispatchSort;
+    private _dispatchPage;
+    private _dispatchColumnToggle;
+    private _handleSortClick;
+    private _handleToggleColumn;
+    private _handlePageChange;
+    private _renderColumnToggle;
+    private _renderGroupRow;
+    private _renderHeaderRow;
+    private _renderRows;
+    private _renderPagination;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,2 @@
+export { Tabs } from './tabs.ts';
+export type { TabItem, TabChangeEventDetail } from './tabs.ts';

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+export interface TabItem {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+export interface TabChangeEventDetail {
+    value: string;
+}
+export declare class Tabs extends LitElement {
+    static styles: import('lit').CSSResult[];
+    tabs: TabItem[];
+    value: string;
+    onChange?: (e: CustomEvent<TabChangeEventDetail>) => void;
+    private _selectTab;
+    private _handleKeydown;
+    private _activeValue;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,2 @@
+export { Toggle } from './toggle.ts';
+export type { ToggleIconPosition, ToggleChangeEventDetail } from './toggle-types.ts';

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

@@ -0,0 +1,4 @@
+export type ToggleIconPosition = 'start' | 'end';
+export interface ToggleChangeEventDetail {
+    checked: boolean;
+}

package/dist/components/toggle/toggle.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+import { ToggleIconPosition, ToggleChangeEventDetail } from './toggle-types';
+/** Custom element name must contain a hyphen; use <app-toggle> in HTML. */
+export declare class Toggle extends LitElement {
+    static styles: import('lit').CSSResult[];
+    checked: boolean;
+    disabled: boolean;
+    label: string;
+    /** Where to show the icon: before the label (start) or after (end). */
+    iconPosition: ToggleIconPosition;
+    /** Optional change handler; set via property (e.g. el.onChange = (e) => ...). */
+    onChange?: (e: CustomEvent<ToggleChangeEventDetail>) => void;
+    private _handleClick;
+    render(): import('lit-html').TemplateResult<1>;
+}