@chromvoid/uikit 0.1.0

package/dist/components/cv-command-item.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+export declare class CVCommandItem extends LitElement {
+    static elementName: string;
+    static get properties(): {
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        active: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        selected: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    value: string;
+    disabled: boolean;
+    active: boolean;
+    selected: boolean;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    protected render(): import("lit").TemplateResult<1>;
+}

package/dist/components/cv-command-item.js

@@ -0,0 +1,68 @@
+import { LitElement, css, html } from 'lit';
+export class CVCommandItem extends LitElement {
+    static elementName = 'cv-command-item';
+    static get properties() {
+        return {
+            value: { type: String, reflect: true },
+            disabled: { type: Boolean, reflect: true },
+            active: { type: Boolean, reflect: true },
+            selected: { type: Boolean, reflect: true },
+        };
+    }
+    constructor() {
+        super();
+        this.value = '';
+        this.disabled = false;
+        this.active = false;
+        this.selected = false;
+    }
+    static styles = [
+        css `
+      :host {
+        display: block;
+        outline: none;
+      }
+
+      :host([hidden]) {
+        display: none;
+      }
+
+      [part='base'] {
+        display: block;
+        padding: var(--cv-space-2, 8px) var(--cv-space-3, 12px);
+        border-radius: var(--cv-radius-sm, 6px);
+        color: var(--cv-color-text, #e8ecf6);
+        transition:
+          background var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease),
+          color var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease);
+      }
+
+      :host([active]) [part='base'] {
+        background: color-mix(in oklab, var(--cv-color-primary, #65d7ff) 24%, transparent);
+      }
+
+      :host([selected]) [part='base'] {
+        background: color-mix(in oklab, var(--cv-color-primary, #65d7ff) 32%, transparent);
+      }
+
+      :host([disabled]) [part='base'] {
+        opacity: 0.5;
+      }
+
+      :host(:focus-visible) [part='base'] {
+        outline: 2px solid var(--cv-color-primary, #65d7ff);
+        outline-offset: 1px;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    render() {
+        return html `
+      <div part="base"><slot></slot></div>
+    `;
+    }
+}

package/dist/components/cv-command-palette.d.ts

@@ -0,0 +1,105 @@
+import type { PropertyValues } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export interface CVCommandPaletteEventDetail {
+    value: string | null;
+    inputValue: string;
+    activeId: string | null;
+    open: boolean;
+    lastExecutedValue: string | null;
+}
+export type CVCommandPaletteInputEvent = CustomEvent<CVCommandPaletteEventDetail>;
+export type CVCommandPaletteChangeEvent = CustomEvent<CVCommandPaletteEventDetail>;
+export type CVCommandPaletteExecuteEvent = CustomEvent<CVCommandPaletteEventDetail>;
+export declare class CVCommandPalette extends ReatomLitElement {
+    static elementName: string;
+    static get properties(): {
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        inputValue: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        lastExecutedValue: {
+            attribute: boolean;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        openShortcutKey: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        closeOnExecute: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        closeOnOutsidePointer: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        listenGlobalShortcut: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+    };
+    value: string;
+    inputValue: string;
+    open: boolean;
+    lastExecutedValue: string | null;
+    placeholder: string;
+    ariaLabel: string;
+    openShortcutKey: string;
+    closeOnExecute: boolean;
+    closeOnOutsidePointer: boolean;
+    listenGlobalShortcut: boolean;
+    private readonly idBase;
+    private itemRecords;
+    private itemListeners;
+    private model?;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
+    openPalette(): void;
+    closePalette(): void;
+    private getItemElements;
+    private ensureItemValue;
+    private rebuildModelFromSlot;
+    private detachItemListeners;
+    private attachItemListeners;
+    private syncItemElements;
+    private captureState;
+    private dispatchInput;
+    private dispatchChange;
+    private dispatchExecute;
+    private focusInput;
+    private applyInteractionResult;
+    private syncOutsidePointerListener;
+    private syncGlobalShortcutListener;
+    private handleDocumentPointerDown;
+    private handleDocumentKeyDown;
+    private handleTriggerClick;
+    private handleTriggerKeyDown;
+    private handleDialogKeyDown;
+    private handleInputChange;
+    private handleInputKeyDown;
+    private handleItemClick;
+    private handleSlotChange;
+    protected render(): import("lit").TemplateResult<1>;
+}