@sky.ui/core 0.0.1

package/dist/sky-col/sky-col.d.ts

@@ -0,0 +1,84 @@
+import { LitElement } from "lit";
+export type SkyColAlign = "stretch" | "start" | "center" | "end" | "baseline";
+export type SkyColJustify = "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
+/**
+ * @element sky-col
+ *
+ * @summary Grid/flex column helper with responsive spans and configurable alignment/justification.
+ *
+ * @status stable
+ * @since 1.0.0
+ *
+ * @documentation https://library.sky-ui.com/components/grid
+ *
+ * @slot title - Optional title content shown before main content.
+ * @slot - Default content for the column body.
+ *
+ * @csspart col - The column container.
+ *
+ * @property {number} span - Default column span.
+ * @property {string} gap - Internal content gap CSS value.
+ * @property {SkyColJustify} justify - Content justification within the column.
+ * @property {SkyColAlign} align - Content alignment within the column.
+ * @property {number | undefined} start - Optional explicit grid column start.
+ * @property {number | undefined} end - Optional explicit grid column end.
+ * @property {number | undefined} sm - Responsive span for small breakpoint.
+ * @property {number | undefined} md - Responsive span for medium breakpoint.
+ * @property {number | undefined} lg - Responsive span for large breakpoint.
+ * @property {number | undefined} xl - Responsive span for extra-large breakpoint.
+ * @method refreshLayout Reapplies internal CSS variables from current properties.
+ *
+ * @Behavior
+ * - Applies span and responsive spans through host CSS variables.
+ * - Supports explicit `start`/`end` grid positioning when provided.
+ * - Automatically updates layout variables when relevant properties change.
+ *
+ * @example
+ * ```html
+ * <sky-col span="4" md="6" justify="space-between" align="center">
+ *   <span slot="title">Revenue</span>
+ *   Q2 performance details
+ * </sky-col>
+ * ```
+ * ```vue
+ * <template>
+ *   <sky-col span="4" md="6" justify="space-between" align="center">
+ *     <span slot="title">Revenue</span>
+ *     Q2 performance details
+ *   </sky-col>
+ * </template>
+ * ```
+ * ```jsx
+ * export default function Demo() {
+ *   return (
+ *     <sky-col span="4" md="6" justify="space-between" align="center">
+ *       <span slot="title">Revenue</span>
+ *       Q2 performance details
+ *     </sky-col>
+ *   );
+ * }
+ * ```
+ */
+export declare class SkyCol extends LitElement {
+    span: number;
+    gap: string;
+    justify: SkyColJustify;
+    align: SkyColAlign;
+    start?: number;
+    end?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    static styles: import("lit").CSSResult;
+    firstUpdated(): void;
+    updated(changed: Map<string | number | symbol, unknown>): void;
+    /**
+     * Reapplies internal CSS variables from current properties.
+     *
+     * @returns {void}
+     */
+    refreshLayout(): void;
+    private syncVars;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/sky-col/sky-col.js

@@ -0,0 +1,46 @@
+import{__decorate as t,__metadata as s}from"tslib";import{property as e,customElement as i}from"lit/decorators.js";import{when as r}from"lit/directives/when.js";import{LitElement as o,css as p,html as a}from"lit";let l=class extends o{constructor(){super(...arguments),this.span=1,this.gap="0",this.justify="center",this.align="stretch"}static{this.styles=p`
+    :host {
+      display: contents;
+    }
+
+    .col {
+      display: flex;
+      flex-direction: column;
+      grid-column: span var(--col-span, 1);
+      gap: var(--col-gap, 0);
+      align-items: var(--col-align, stretch);
+      justify-content: var(--col-justify, center);
+    }
+
+    ::slotted([slot="title"]) {
+      font-weight: bold;
+      margin-bottom: 0.5rem;
+    }
+
+    @media (max-width: 768px) {
+      .col {
+        grid-column: span var(--col-span-sm, var(--col-span, 1));
+      }
+    }
+    @media (max-width: 992px) {
+      .col {
+        grid-column: span var(--col-span-md, var(--col-span, 1));
+      }
+    }
+    @media (max-width: 1200px) {
+      .col {
+        grid-column: span var(--col-span-lg, var(--col-span, 1));
+      }
+    }
+    @media (min-width: 1201px) {
+      .col {
+        grid-column: span var(--col-span-xl, var(--col-span, var(--col-span, 1)));
+      }
+    }
+  `}firstUpdated(){this.syncVars()}updated(t){(t.has("span")||t.has("gap")||t.has("justify")||t.has("align")||t.has("sm")||t.has("md")||t.has("lg")||t.has("xl")||t.has("start")||t.has("end"))&&this.syncVars()}refreshLayout(){this.syncVars()}syncVars(){this.style.setProperty("--col-span",String(this.span)),this.style.setProperty("--col-gap",this.gap),this.style.setProperty("--col-justify",this.justify),this.style.setProperty("--col-align",this.align),this.sm&&this.style.setProperty("--col-span-sm",String(this.sm)),this.md&&this.style.setProperty("--col-span-md",String(this.md)),this.lg&&this.style.setProperty("--col-span-lg",String(this.lg)),this.xl&&this.style.setProperty("--col-span-xl",String(this.xl)),this.start&&this.style.setProperty("--col-start",String(this.start)),this.end&&this.style.setProperty("--col-end",String(this.end))}render(){const t=this.start||this.end?`grid-column: ${this.start??"auto"} / ${this.end??"auto"};`:"";return a`
+      <div class="col" style=${r(this.start||this.end,()=>t,()=>"")} part="col">
+        <slot name="title"></slot>
+        <slot></slot>
+      </div>
+    `}};t([e({type:Number}),s("design:type",Object)],l.prototype,"span",void 0),t([e({type:String}),s("design:type",Object)],l.prototype,"gap",void 0),t([e({type:String}),s("design:type",String)],l.prototype,"justify",void 0),t([e({type:String}),s("design:type",String)],l.prototype,"align",void 0),t([e({type:Number}),s("design:type",Number)],l.prototype,"start",void 0),t([e({type:Number}),s("design:type",Number)],l.prototype,"end",void 0),t([e({type:Number}),s("design:type",Number)],l.prototype,"sm",void 0),t([e({type:Number}),s("design:type",Number)],l.prototype,"md",void 0),t([e({type:Number}),s("design:type",Number)],l.prototype,"lg",void 0),t([e({type:Number}),s("design:type",Number)],l.prototype,"xl",void 0),l=t([i("sky-col")],l);export{l as SkyCol};
+//# sourceMappingURL=sky-col.js.map

package/dist/sky-col/sky-col.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sky-col.js","sources":["../../src/sky-col/sky-col.ts"],"sourcesContent":[null],"names":["SkyCol","LitElement","constructor","this","span","gap","justify","align","styles","css","firstUpdated","syncVars","updated","changed","has","refreshLayout","style","setProperty","String","sm","md","lg","xl","start","end","render","gridStyle","html","when","__decorate","property","type","Number","prototype","customElement"],"mappings":"qNAwEO,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,uBACuBC,KAAAC,KAAO,EACPD,KAAAE,IAAM,IACNF,KAAAG,QAAyB,SACzBH,KAAAI,MAAqB,SA6GnD,QAnGkBJ,KAAAK,OAASC,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuC1B,CAEO,YAAAC,GACPP,KAAKQ,UACP,CAES,OAAAC,CAAQC,IAEbA,EAAQC,IAAI,SACZD,EAAQC,IAAI,QACZD,EAAQC,IAAI,YACZD,EAAQC,IAAI,UACZD,EAAQC,IAAI,OACZD,EAAQC,IAAI,OACZD,EAAQC,IAAI,OACZD,EAAQC,IAAI,OACZD,EAAQC,IAAI,UACZD,EAAQC,IAAI,SAEZX,KAAKQ,UAET,CAOO,aAAAI,GACLZ,KAAKQ,UACP,CAEQ,QAAAA,GACNR,KAAKa,MAAMC,YAAY,aAAcC,OAAOf,KAAKC,OACjDD,KAAKa,MAAMC,YAAY,YAAad,KAAKE,KACzCF,KAAKa,MAAMC,YAAY,gBAAiBd,KAAKG,SAC7CH,KAAKa,MAAMC,YAAY,cAAed,KAAKI,OAEvCJ,KAAKgB,IAAIhB,KAAKa,MAAMC,YAAY,gBAAiBC,OAAOf,KAAKgB,KAC7DhB,KAAKiB,IAAIjB,KAAKa,MAAMC,YAAY,gBAAiBC,OAAOf,KAAKiB,KAC7DjB,KAAKkB,IAAIlB,KAAKa,MAAMC,YAAY,gBAAiBC,OAAOf,KAAKkB,KAC7DlB,KAAKmB,IAAInB,KAAKa,MAAMC,YAAY,gBAAiBC,OAAOf,KAAKmB,KAE7DnB,KAAKoB,OAAOpB,KAAKa,MAAMC,YAAY,cAAeC,OAAOf,KAAKoB,QAC9DpB,KAAKqB,KAAKrB,KAAKa,MAAMC,YAAY,YAAaC,OAAOf,KAAKqB,KAChE,CAES,MAAAC,GACP,MAAMC,EACJvB,KAAKoB,OAASpB,KAAKqB,IACf,gBAAgBrB,KAAKoB,OAAS,YAAYpB,KAAKqB,KAAO,UACtD,GAEN,OAAOG,CAAI;+BACgBC,EAAKzB,KAAKoB,OAASpB,KAAKqB,IAAK,IAAME,EAAW,IAAM;;;;KAKjF,GA/G4BG,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,kCAAmBhC,EAAAiC,UAAA,eACTJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMb,kCAAoBlB,EAAAiC,UAAA,cACVJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMb,kCAA4ClB,EAAAiC,UAAA,kBAClCJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMb,kCAAyClB,EAAAiC,UAAA,gBAE/BJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,kCAAyBhC,EAAAiC,UAAA,gBACfJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,kCAAuBhC,EAAAiC,UAAA,cAEbJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,kCAAsBhC,EAAAiC,UAAA,aACZJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,kCAAsBhC,EAAAiC,UAAA,aACZJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,kCAAsBhC,EAAAiC,UAAA,aACZJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,kCAAsBhC,EAAAiC,UAAA,aAZ7BjC,EAAM6B,EAAA,CADlBK,EAAc,YACFlC"}

package/dist/sky-combobox/index.d.ts

@@ -0,0 +1 @@
+export * from "./sky-combobox";

package/dist/sky-combobox/index.js

@@ -0,0 +1 @@
+export * from './sky-combobox.js';

package/dist/sky-combobox/sky-combobox.d.ts

@@ -0,0 +1,313 @@
+import { FormControlBase, FormState } from "../helper/internals/form-control-base";
+export type SkyComboboxJustify = "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+export type SkyComboboxErrorDisplayMode = "single" | "all" | "none";
+export type SkyComboboxIconPosition = "left" | "right";
+export type SkyComboboxValueChangedDetail = {
+    value: any | any[];
+    selectedItems: any[];
+    emittedValues?: any | any[];
+    isFilteredSelection?: boolean;
+};
+export type SkyComboboxSearchQueryChangedDetail = {
+    searchQuery: string;
+};
+export type SkyComboboxValidationErrorDetail = {
+    errors: string[];
+};
+export type SkyComboboxValidationSuccessDetail = {
+    value: any;
+};
+export type SkyComboboxIconClickDetail = {
+    position: SkyComboboxIconPosition;
+    event: MouseEvent;
+};
+export type SkyComboboxAddNewOptionDetail = {
+    value: string;
+};
+/**
+ * @element sky-combobox
+ *
+ * @summary Interactive combobox with single/multi select, search, chips, validation, and popover-based option selection.
+ *
+ * @status stable
+ * @since 1.0.0
+ *
+ * @documentation https://library.sky-ui.com/components/combobox
+ * @dependency sky-icon
+ * @dependency sky-checkbox
+ *
+ * @uiVModel value value-changed
+ * @uiVModel searchQuery search-query-changed
+ *
+ * @slot icon-left - Slot for the left icon in the combobox (e.g., search icon).
+ * @slot icon-right - Slot for the right icon in the combobox (e.g., dropdown icon).
+ * @slot - Default slot for adding custom options or content.
+ *
+ * @csspart combo-box-container - The main container element wrapping the entire component
+ * @csspart input-wrapper - The input field wrapper that contains chips, icons, and dropdown button
+ * @csspart icon-slot - Both left and right icon containers
+ * @csspart placeholder-label - The placeholder text label
+ * @csspart clear-button - The clear (×) button
+ * @csspart dropdown-button - The dropdown toggle arrow button
+ * @csspart chip-container - Container for the chips in multi-select mode
+ * @csspart chip - Individual chip element
+ * @csspart single-select-chip - Chip shown in single-select mode
+ * @csspart overflow-chip - The "+N" chip that shows hidden chips count
+ * @csspart remove-chip-icon - The remove icon within chips
+ * @csspart hidden-chips-dropdown - Dropdown that appears when clicking overflow chip
+ * @csspart hidden-chip-inner - Individual chip in the hidden chips dropdown
+ * @csspart hidden-chip-label - Label text in hidden chips dropdown
+ * @csspart dropdown - The main dropdown container
+ * @csspart search-container - Container for the search input in the dropdown
+ * @csspart search-input - The search input field
+ * @csspart add-option-icon - The "+" icon for adding new options
+ * @csspart select-all - The "Select All" row in the dropdown
+ * @csspart checkbox - Checkbox elements in multi-select mode
+ * @csspart option - Individual option row in the dropdown
+ * @csspart highlighted-text - Highlighted text in search results
+ * @csspart no-options - "No options found" message
+ * @csspart error-list - Container for validation error messages
+ * @csspart error-item - Individual validation error message
+ * @csspart dropdown-scroller - Scrollable container for dropdown options
+ * @csspart chip-label - Label text within chips
+ *
+ * @fires {CustomEvent<SkyComboboxValueChangedDetail>} value-changed - Fired whenever selection changes.
+ * @fires {CustomEvent<SkyComboboxSearchQueryChangedDetail>} search-query-changed - Fired when search query changes.
+ * @fires {CustomEvent<SkyComboboxValidationErrorDetail>} validation-error - Fired when validation fails.
+ * @fires {CustomEvent<SkyComboboxValidationSuccessDetail>} validation-success - Fired when validation passes.
+ * @fires {CustomEvent<SkyComboboxIconClickDetail>} icon-click - Fired when icon slot is clicked.
+ * @fires {CustomEvent<SkyComboboxAddNewOptionDetail>} add-new-option - Fired when user confirms adding a new option.
+ *
+ * @property {any} value - Current selection value (single) or value array (multi).
+ * @property {string} placeholder - Main placeholder text.
+ * @property {string} searchPlaceholder - Search input placeholder text.
+ * @property {string} searchQuery - Current search filter text when `searchable` is enabled. Default: `""`.
+ * @property {string} label - Optional external label text.
+ * @property {any[]} options - Available options list.
+ * @property {boolean} searchable - Enables search input and filtering.
+ * @property {boolean} addOption - Enables ad-hoc option creation from search query.
+ * @property {boolean} multiSelect - Enables multi-select chip behavior.
+ * @property {boolean} selectAll - Shows select-all row in eligible modes.
+ * @property {boolean} clearable - Shows clear button when value exists.
+ * @property {boolean} loading - Shows loading affordance.
+ * @property {boolean} compact - Enables compact sizing.
+ * @property {boolean} disabled - Disables interaction.
+ * @property {boolean} required - Enables required validation.
+ * @property {boolean} readonly - Enables read-only mode.
+ * @property {boolean} emitFullObject - Emits full option objects in events.
+ * @property {string} emittedKey - Key emitted from object options when `emitFullObject` is false.
+ * @property {string} displayKey - Key used for visual labels in object options.
+ * @property {number} visibleChips - Number of visible chips before `+N` overflow chip.
+ * @property {number} chipSize - Maximum label length for each chip.
+ * @property {string} color - Accent color token/CSS color.
+ * @property {number} zIndex - Dropdown overlay z-index.
+ * @property {string} height - Max dropdown scroll height.
+ * @property {boolean} openAbove - Opens dropdown above when true.
+ * @property {SkyComboboxJustify} justify - Option-row content justification.
+ * @property {boolean} showErrors - Renders validation errors below control.
+ * @property {SkyComboboxErrorDisplayMode} errorDisplayMode - Validation error rendering strategy.
+ * @property {(value:any)=>true|string} validations - External validator callbacks.
+ * @property {boolean} validationArrayFormat - Sends selected array into validators when true.
+ * @property {string} prefix - Optional inline prefix text.
+ * @property {string} suffix - Optional inline suffix text.
+ * @property {string} prefixColor - Prefix color value.
+ * @property {string} suffixColor - Suffix color value.
+ * @property {string} requiredMessage - Required validation failure text.
+ * @property {boolean} enforceMinOneSelection - Prevents clearing all selections in multi-select mode.
+ * @property {boolean} validationActive - Enables validation UI state.
+ * @property {boolean} invalid - Reflects invalid state.
+ * @property {string} variant - Visual variant style.
+ *
+ * @method openDropdown Opens the combobox dropdown.
+ * @method closeDropdown Closes the combobox dropdown.
+ * @method clearSelection Clears current selection if allowed.
+ * @method reset Resets combobox state and clears validation UI.
+ *
+ * @example
+ * ```html
+ * <sky-combobox label="Assignee" searchable clearable placeholder="Select user"></sky-combobox>
+ * ```
+ * ```vue
+ * <template>
+ *   <sky-combobox label="Assignee" searchable clearable placeholder="Select user"></sky-combobox>
+ * </template>
+ * ```
+ * ```jsx
+ * export default function Demo() {
+ *   return <sky-combobox label="Assignee" searchable clearable placeholder="Select user"></sky-combobox>;
+ * }
+ * ```
+ */
+export declare class SkyCombobox extends FormControlBase {
+    static dependencies: Record<string, CustomElementConstructor>;
+    /** Current value. Set via attribute in HTML (e.g. value="option-1") or via JS (string or array when multiSelect). Not reflected when set to array from JS. */
+    value: any;
+    placeholder: string;
+    searchPlaceholder: string;
+    label: string;
+    options: any[];
+    chipSize: number;
+    color: string;
+    clearable: boolean;
+    loading: boolean;
+    compact: boolean;
+    disabled: boolean;
+    searchable: boolean;
+    multiSelect: boolean;
+    visibleChips: number;
+    selectAll: boolean;
+    validations: ((value: any) => true | string)[];
+    showErrors: boolean;
+    errorDisplayMode: SkyComboboxErrorDisplayMode;
+    required: boolean;
+    emitFullObject: boolean;
+    emittedKey: string;
+    displayKey: string;
+    addOption: boolean;
+    validationArrayFormat: boolean;
+    prefix: string;
+    suffix: string;
+    prefixColor: string;
+    suffixColor: string;
+    justify: SkyComboboxJustify;
+    zIndex: number;
+    height: string;
+    requiredMessage: string;
+    readonly: boolean;
+    enforceMinOneSelection: boolean;
+    openAbove: boolean;
+    validationActive: boolean;
+    invalid: boolean;
+    variant: string;
+    /** Current search filter when `searchable`; exposed for controlled search / `v-model:search-query`. */
+    searchQuery: string;
+    filteredOptions: any[];
+    focused: boolean;
+    open: boolean;
+    selectedItems: any[];
+    hiddenChipsOpen: boolean;
+    activeIndex: number;
+    validationErrors: string[];
+    validationStatus: any[];
+    private hasLeftIcon;
+    private hasRightIcon;
+    private optionSlotSet;
+    private inputWrapperEl;
+    private dropdownEl;
+    private hiddenDropdownEl;
+    private searchInputEl;
+    private overflowChipEl;
+    private comboContainerEl;
+    private rowEls;
+    private iconLeftEls;
+    private iconRightEls;
+    private _searchDebounceId;
+    private static readonly _SEARCH_DEBOUNCE_MS;
+    private static readonly _SEARCH_DEBOUNCE_OPTIONS_THRESHOLD;
+    private dropdownPopover;
+    private hiddenPopover;
+    static styles: import("lit").CSSResult;
+    constructor();
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    connectedCallback(): void;
+    firstUpdated(): void;
+    private refreshOptionSlots;
+    /** Get the current value for form submission */
+    protected getFormValue(): FormState;
+    /** Set value from form state (e.g., form reset) */
+    protected setValueFromFormState(state: FormState): void;
+    protected syncFormValue(): void;
+    private setValueFromArray;
+    /** Get the validity anchor (for validation messages) */
+    protected getValidityAnchor(): HTMLElement | undefined;
+    /** Check if empty (for required validation) */
+    protected isEmpty(): boolean;
+    protected getNativeControl(): HTMLElement | null;
+    /** Override to provide custom error messages */
+    protected getCustomErrorMessage(): string;
+    /** Override form reset callback */
+    protected onFormReset(): void;
+    /** Override form disabled callback */
+    protected onFormDisabled(disabled: boolean): void;
+    /** Override form state restore callback */
+    protected onFormStateRestore(state: FormState): void;
+    private toggleSelectAll;
+    private isAllFilteredSelected;
+    private truncateText;
+    private validateInput;
+    protected validateForForm(): string;
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    private handleFocus;
+    /**
+     * Resets combobox state and clears validation UI.
+     *
+     * @returns {void}
+     */
+    reset(): void;
+    /**
+     * Opens the combobox dropdown.
+     *
+     * @returns {void}
+     */
+    openDropdown(): void;
+    /**
+     * Closes the combobox dropdown.
+     *
+     * @returns {void}
+     */
+    closeDropdown(): void;
+    /**
+     * Clears current selection when allowed by component settings.
+     *
+     * @returns {void}
+     */
+    clearSelection(): void;
+    private handleBlur;
+    updated(changedProperties: Map<string, unknown>): void;
+    willUpdate(changedProperties: Map<string, unknown>): void;
+    private syncSelectedItemsWithValue;
+    private filterOptions;
+    /** Emit search query for hosts / `v-model:search-query` when `searchQuery` changes outside the search input handler. */
+    private emitSearchQueryChanged;
+    private handleInput;
+    disconnectedCallback(): void;
+    private handleClear;
+    selectOption(option: any): void;
+    toggleHiddenChips(e: Event): void;
+    renderHiddenChipsDropdown(): import("lit-html").TemplateResult<1>;
+    removeChip(option: any): void;
+    renderChips(): import("lit-html").TemplateResult<1>;
+    handleKeydown(event: KeyboardEvent): void;
+    private onSearchKeydown;
+    /** Number of non-option rows before the first option (search + select-all). */
+    private get headerRows();
+    private getOptionByActiveIndex;
+    /**
+     * Commits the current keyboard highlight on Enter (search row vs select-all vs option).
+     * Shared by {@link handleKeydown} and {@link onSearchKeydown} so focus in the search
+     * field matches the same semantics as the input wrapper.
+     */
+    private commitDropdownEnter;
+    /** Focus logic when opening the dropdown. */
+    private focusOnOpen;
+    private canAddaddOption;
+    private handleAddaddOption;
+    scrollActiveItemIntoView(): void;
+    toggleDropdown(event: MouseEvent): void;
+    renderDropdown(): import("lit-html").TemplateResult<1>;
+    getOptionValue(option: any): any;
+    getOptionLabel(option: any): string;
+    renderValidationErrors(): import("lit-html").TemplateResult<1> | null;
+    getErrorMessages(): string[];
+    handleIconClick(position: "left" | "right", event: MouseEvent): void;
+    private onIconSlotChange;
+    render(): import("lit-html").TemplateResult<1>;
+}