@chromvoid/uikit 0.1.0 → 0.2.0

package/dist/components/cv-guidance-anchor.js

@@ -0,0 +1,113 @@
+import { css } from 'lit';
+import { html } from '../reatom-lit/index.js';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export const GUIDANCE_ANCHOR_REGISTER_EVENT = 'guidance-anchor-register';
+export const GUIDANCE_ANCHOR_UNREGISTER_EVENT = 'guidance-anchor-unregister';
+export class CVGuidanceAnchor extends ReatomLitElement {
+    static elementName = 'cv-guidance-anchor';
+    static get properties() {
+        return {
+            anchorId: { type: String, attribute: 'anchor-id', reflect: true },
+            surface: { type: String, reflect: true },
+            owner: { type: String, reflect: true },
+        };
+    }
+    registeredDetail = null;
+    unregisterEventTarget = null;
+    constructor() {
+        super();
+        this.anchorId = '';
+        this.surface = '';
+        this.owner = '';
+    }
+    static styles = [
+        css `
+      :host {
+        display: contents;
+      }
+
+      :host([hidden]) {
+        display: none;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const root = this.getRootNode();
+        this.unregisterEventTarget = root instanceof ShadowRoot ? root.host : (this.parentNode ?? root);
+        this.dispatchRegister();
+    }
+    disconnectedCallback() {
+        this.dispatchUnregister(this.registeredDetail, this.unregisterEventTarget ?? undefined);
+        this.unregisterEventTarget = null;
+        super.disconnectedCallback();
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('anchorId') ||
+            changedProperties.has('surface') ||
+            changedProperties.has('owner')) {
+            this.dispatchRegister();
+        }
+    }
+    createDetail() {
+        return {
+            anchorId: this.anchorId,
+            surface: this.surface,
+            owner: this.owner,
+            element: this,
+        };
+    }
+    createDetailKey() {
+        return JSON.stringify([this.anchorId, this.surface, this.owner]);
+    }
+    hasRequiredMetadata() {
+        return Boolean(this.anchorId && this.surface && this.owner);
+    }
+    dispatchRegister() {
+        if (!this.hasRequiredMetadata())
+            return;
+        const detailKey = this.createDetailKey();
+        const registeredDetailKey = this.registeredDetail
+            ? JSON.stringify([
+                this.registeredDetail.anchorId,
+                this.registeredDetail.surface,
+                this.registeredDetail.owner,
+            ])
+            : '';
+        if (detailKey === registeredDetailKey)
+            return;
+        if (this.registeredDetail) {
+            this.dispatchUnregister(this.registeredDetail);
+        }
+        const detail = this.createDetail();
+        this.registeredDetail = detail;
+        this.dispatchEvent(new CustomEvent(GUIDANCE_ANCHOR_REGISTER_EVENT, {
+            detail,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    dispatchUnregister(detail = this.registeredDetail, target = this) {
+        if (!detail)
+            return;
+        if (detail === this.registeredDetail) {
+            this.registeredDetail = null;
+        }
+        target.dispatchEvent(new CustomEvent(GUIDANCE_ANCHOR_UNREGISTER_EVENT, {
+            detail,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return html `
+      <slot></slot>
+    `;
+    }
+}

package/dist/components/cv-guidance-panel.d.ts

@@ -0,0 +1,29 @@
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export type GuidancePanelVariant = 'coach-mark' | 'hint' | 'warning' | 'blocked';
+export type GuidancePanelDensity = 'comfortable' | 'compact';
+export declare class CVGuidancePanel extends ReatomLitElement {
+    static elementName: string;
+    static get properties(): {
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        density: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        hasIcon: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+    };
+    variant: GuidancePanelVariant;
+    density: GuidancePanelDensity;
+    hasIcon: boolean;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    private handleIconSlotChange;
+    protected render(): import("lit-html").TemplateResult;
+}

package/dist/components/cv-guidance-panel.js

@@ -0,0 +1,245 @@
+import { css } from 'lit';
+import { html } from '../reatom-lit/index.js';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export class CVGuidancePanel extends ReatomLitElement {
+    static elementName = 'cv-guidance-panel';
+    static get properties() {
+        return {
+            variant: { type: String, reflect: true },
+            density: { type: String, reflect: true },
+            hasIcon: { type: Boolean, attribute: 'has-icon', reflect: true },
+        };
+    }
+    constructor() {
+        super();
+        this.variant = 'coach-mark';
+        this.density = 'comfortable';
+        this.hasIcon = false;
+    }
+    static styles = [
+        css `
+      :host {
+        display: block;
+        color: var(--cv-guidance-panel-color, var(--cv-color-text, #e8ecf6));
+        font-size: var(--cv-guidance-panel-font-size, var(--cv-font-size-base, 14px));
+        line-height: var(--cv-guidance-panel-line-height, 1.45);
+        contain: content;
+      }
+
+      [part='base'] {
+        display: grid;
+        gap: var(--cv-guidance-panel-gap, 14px);
+        padding: var(--cv-guidance-panel-padding-block, 20px) var(--cv-guidance-panel-padding-inline, 20px);
+        border: 1px solid var(--cv-guidance-panel-border-color, var(--cv-color-border, #2a3245));
+        border-radius: var(--cv-guidance-panel-border-radius, 14px);
+        background: var(--cv-guidance-panel-background, var(--cv-color-surface-elevated, #1d2432));
+        box-shadow: var(--cv-guidance-panel-shadow, none);
+      }
+
+      [part='header'] {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) auto;
+        align-items: start;
+        gap: var(--cv-guidance-panel-header-gap, var(--cv-space-2, 8px));
+      }
+
+      [part='icon'] {
+        display: none;
+        align-items: center;
+        justify-content: center;
+        min-inline-size: var(--cv-guidance-panel-icon-size, 20px);
+        min-block-size: var(--cv-guidance-panel-icon-size, 20px);
+        color: var(--cv-guidance-panel-icon-color, currentColor);
+      }
+
+      :host([has-icon]) [part='header'] {
+        grid-template-columns: auto minmax(0, 1fr) auto;
+      }
+
+      :host([has-icon]) [part='icon'] {
+        display: inline-flex;
+      }
+
+      [part='title'] {
+        min-inline-size: 0;
+        color: var(--cv-guidance-panel-title-color, var(--cv-color-text-strong, currentColor));
+        font-size: var(--cv-guidance-panel-title-font-size, var(--cv-font-size-md, 16px));
+        font-weight: var(--cv-guidance-panel-title-font-weight, 700);
+        line-height: var(--cv-guidance-panel-title-line-height, 1.25);
+      }
+
+      [part='progress'] {
+        color: var(--cv-guidance-panel-progress-color, var(--cv-color-text-muted, #9ca8bd));
+        font-size: var(--cv-guidance-panel-progress-font-size, var(--cv-font-size-sm, 12px));
+        line-height: 1.3;
+        white-space: nowrap;
+      }
+
+      [part='body'] {
+        min-inline-size: 0;
+        color: var(--cv-guidance-panel-body-color, var(--cv-color-text-muted, #bac4d8));
+        line-height: var(--cv-guidance-panel-body-line-height, 1.55);
+      }
+
+      [part='body'] ::slotted(*) {
+        margin-block: 0;
+      }
+
+      [part='actions'] {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--cv-guidance-panel-actions-gap, 10px);
+        padding-block-start: var(--cv-guidance-panel-actions-padding-block-start, 2px);
+      }
+
+      ::slotted(button) {
+        min-block-size: 34px;
+        padding: 0 14px;
+        border: 1px solid transparent;
+        border-radius: var(--cv-guidance-panel-action-radius, 999px);
+        background: transparent;
+        color: var(--cv-guidance-panel-action-color, var(--cv-color-text, #e8ecf6));
+        font: inherit;
+        font-size: var(--cv-guidance-panel-action-font-size, 13px);
+        font-weight: var(--cv-guidance-panel-action-font-weight, 650);
+        line-height: 1;
+        cursor: pointer;
+      }
+
+      ::slotted(button:hover) {
+        background: var(--cv-guidance-panel-action-hover-background, rgba(255, 255, 255, 0.08));
+      }
+
+      ::slotted(button:focus-visible) {
+        outline: 2px solid var(--cv-color-primary, #65d7ff);
+        outline-offset: 2px;
+      }
+
+      ::slotted(button[data-guidance-action='primary']) {
+        border-color: var(--cv-guidance-panel-primary-border-color, transparent);
+        background: var(--cv-guidance-panel-primary-background, var(--cv-color-primary, #65d7ff));
+        color: var(--cv-guidance-panel-primary-color, var(--cv-color-on-primary, #06131a));
+      }
+
+      ::slotted(button[data-guidance-action='primary']:hover) {
+        background: var(
+          --cv-guidance-panel-primary-hover-background,
+          color-mix(in oklab, var(--cv-color-primary, #65d7ff) 86%, white)
+        );
+      }
+
+      ::slotted(button[data-guidance-action='secondary']) {
+        border-color: var(--cv-guidance-panel-secondary-border-color, var(--cv-color-border, #2a3245));
+        background: var(--cv-guidance-panel-secondary-background, rgba(255, 255, 255, 0.04));
+      }
+
+      ::slotted(button[data-guidance-action='close']) {
+        min-inline-size: 30px;
+        min-block-size: 30px;
+        padding: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--cv-guidance-panel-close-color, var(--cv-color-text-muted, #bac4d8));
+      }
+
+      :host([density='compact']) [part='base'] {
+        gap: var(--cv-guidance-panel-compact-gap, var(--cv-space-2, 8px));
+        padding: var(--cv-guidance-panel-compact-padding-block, var(--cv-space-3, 12px))
+          var(--cv-guidance-panel-compact-padding-inline, var(--cv-space-3, 12px));
+      }
+
+      :host([density='compact']) [part='title'] {
+        font-size: var(--cv-guidance-panel-compact-title-font-size, var(--cv-font-size-base, 14px));
+      }
+
+      :host([density='compact']) [part='body'] {
+        font-size: var(--cv-guidance-panel-compact-body-font-size, var(--cv-font-size-sm, 13px));
+      }
+
+      :host([variant='coach-mark']) [part='base'] {
+        border-color: color-mix(in oklab, var(--cv-color-info, #65d7ff) 44%, var(--cv-color-border, #2a3245));
+        background: color-mix(
+          in oklab,
+          var(--cv-color-info, #65d7ff) 10%,
+          var(--cv-color-surface-elevated, #1d2432)
+        );
+      }
+
+      :host([variant='coach-mark']) [part='icon'] {
+        color: var(--cv-color-info, #65d7ff);
+      }
+
+      :host([variant='hint']) [part='base'] {
+        border-color: var(--cv-guidance-panel-hint-border-color, var(--cv-color-border, #2a3245));
+        background: var(
+          --cv-guidance-panel-hint-background,
+          var(--cv-color-surface-subtle, var(--cv-color-surface-elevated, #1d2432))
+        );
+      }
+
+      :host([variant='hint']) [part='icon'] {
+        color: var(--cv-guidance-panel-hint-icon-color, var(--cv-color-text-muted, #9ca8bd));
+      }
+
+      :host([variant='warning']) [part='base'] {
+        border-color: color-mix(
+          in oklab,
+          var(--cv-color-warning, #ffc857) 54%,
+          var(--cv-color-border, #2a3245)
+        );
+        background: color-mix(
+          in oklab,
+          var(--cv-color-warning, #ffc857) 12%,
+          var(--cv-color-surface-elevated, #1d2432)
+        );
+      }
+
+      :host([variant='warning']) [part='icon'] {
+        color: var(--cv-color-warning, #ffc857);
+      }
+
+      :host([variant='blocked']) [part='base'] {
+        border-color: color-mix(
+          in oklab,
+          var(--cv-color-danger, #ff7d86) 54%,
+          var(--cv-color-border, #2a3245)
+        );
+        background: color-mix(
+          in oklab,
+          var(--cv-color-danger, #ff7d86) 12%,
+          var(--cv-color-surface-elevated, #1d2432)
+        );
+      }
+
+      :host([variant='blocked']) [part='icon'] {
+        color: var(--cv-color-danger, #ff7d86);
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    handleIconSlotChange(event) {
+        const slot = event.currentTarget;
+        if (!(slot instanceof HTMLSlotElement))
+            return;
+        this.hasIcon = slot.assignedElements({ flatten: true }).length > 0;
+    }
+    render() {
+        return html `
+      <section part="base" role="note" data-variant=${this.variant} data-density=${this.density}>
+        <header part="header">
+          <span part="icon"><slot name="icon" @slotchange=${this.handleIconSlotChange}></slot></span>
+          <div part="title"><slot name="title"></slot></div>
+          <div part="progress"><slot name="progress"></slot></div>
+        </header>
+        <div part="body"><slot></slot></div>
+        <div part="actions"><slot name="actions"></slot></div>
+      </section>
+    `;
+    }
+}

package/dist/components/cv-icon.d.ts

@@ -9,6 +9,7 @@ export declare class CVIcon extends ReatomLitElement {
     static elementName: string;
     private static svgCache;
     private static inFlight;
+    private loadVersion;
     static get properties(): {
         name: {
             type: StringConstructor;
@@ -51,7 +52,7 @@ export declare class CVIcon extends ReatomLitElement {
     private static fetchSvg;
     private static fetchSingleSvg;
     private handleSlotChange;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult;
 }
 export type LucideIconName = string;
 export type IconName = LucideIconName;

package/dist/components/cv-icon.js

@@ -1,5 +1,6 @@
-import { css, html } from 'lit';
+import { css } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { html } from '../reatom-lit/index.js';
 import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
 let iconBasePath = '/assets/icons/lucide';
 const iconCollections = new Map();
@@ -9,6 +10,15 @@ function normalizeBasePath(path) {
 function normalizeCollectionName(name) {
     return name.trim().toLowerCase();
 }
+function looksLikeSvgMarkup(markup) {
+    const normalized = markup.trim();
+    if (!normalized)
+        return false;
+    if (/<(html|head|body|script|meta|title|link)\b/i.test(normalized)) {
+        return false;
+    }
+    return /<svg[\s>]/i.test(normalized);
+}
 export function setIconBasePath(path) {
     iconBasePath = normalizeBasePath(path);
 }
@@ -66,6 +76,7 @@ const BOOTSTRAP_TO_LUCIDE = {
     x: 'x',
     'x-lg': 'x',
     'plus-lg': 'plus',
+    'check-lg': 'check',
     check: 'check',
     justify: 'align-justify',
     bars: 'menu',
@@ -132,6 +143,7 @@ export class CVIcon extends ReatomLitElement {
     static elementName = 'cv-icon';
     static svgCache = new Map();
     static inFlight = new Map();
+    loadVersion = 0;
     static get properties() {
         return {
             name: { type: String },
@@ -201,7 +213,12 @@ export class CVIcon extends ReatomLitElement {
       }
 
       .icon {
-        display: contents;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        inline-size: 100%;
+        block-size: 100%;
+        flex: 0 0 100%;
       }
 
       .icon svg,
@@ -282,7 +299,11 @@ export class CVIcon extends ReatomLitElement {
         return urls;
     }
     async loadSvg(urls) {
-        this.svgMarkup = await CVIcon.fetchSvg(urls);
+        const loadVersion = ++this.loadVersion;
+        const svgMarkup = await CVIcon.fetchSvg(urls);
+        if (loadVersion !== this.loadVersion)
+            return;
+        this.svgMarkup = svgMarkup;
         this.requestUpdate();
     }
     static async fetchSvg(urls) {
@@ -310,6 +331,10 @@ export class CVIcon extends ReatomLitElement {
                     return '';
                 }
                 const svg = await response.text();
+                if (!looksLikeSvgMarkup(svg)) {
+                    CVIcon.inFlight.delete(url);
+                    return '';
+                }
                 CVIcon.svgCache.set(url, svg);
                 CVIcon.inFlight.delete(url);
                 return svg;

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

@@ -4,6 +4,7 @@ import { FormAssociatedReatomElement } from '../form-associated/FormAssociatedRe
 import type { FormAssociatedValidity } from '../form-associated/withFormAssociated.js';
 type CVInputSize = 'small' | 'medium' | 'large';
 type CVInputVariant = 'outlined' | 'filled';
+type CVInputPreset = 'search-mobile';
 export interface CVInputValueDetail {
     value: string;
 }
@@ -61,6 +62,10 @@ export declare class CVInput extends FormAssociatedReatomElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        preset: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         name: {
             type: StringConstructor;
         };
@@ -89,6 +94,7 @@ export declare class CVInput extends FormAssociatedReatomElement {
     passwordToggle: boolean;
     size: CVInputSize;
     variant: CVInputVariant;
+    preset: CVInputPreset | undefined;
     name: string;
     autofocus: boolean;
     autocomplete: string;
@@ -122,6 +128,6 @@ export declare class CVInput extends FormAssociatedReatomElement {
     private handleNativeKeyDown;
     private handleClearClick;
     private handlePasswordToggleClick;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
 }
 export {};

package/dist/components/cv-input.js

@@ -17,6 +17,7 @@ export class CVInput extends FormAssociatedReatomElement {
             passwordToggle: { type: Boolean, reflect: true, attribute: 'password-toggle' },
             size: { type: String, reflect: true },
             variant: { type: String, reflect: true },
+            preset: { type: String, reflect: true },
             name: { type: String },
             autofocus: { type: Boolean, reflect: true },
             autocomplete: { type: String },
@@ -41,6 +42,7 @@ export class CVInput extends FormAssociatedReatomElement {
         this.passwordToggle = false;
         this.size = 'medium';
         this.variant = 'outlined';
+        this.preset = undefined;
         this.name = '';
         this.autofocus = false;
         this.autocomplete = '';
@@ -119,6 +121,7 @@ export class CVInput extends FormAssociatedReatomElement {
 
       [part='form-control-label'] {
         display: block;
+        margin-bottom: 5px;
       }
 
       [part='form-control-help-text'] {
@@ -147,7 +150,7 @@ export class CVInput extends FormAssociatedReatomElement {
       }
 
       :host([invalid][focused]) [part='base'] {
-        box-shadow: 0 0 0 2px color-mix(in oklch, var(--cv-color-danger, #ef4444) 35%, transparent);
+        box-shadow: 0 0 0 2px var(--cv-color-danger-border-strong);
       }
 
       /* --- sizes --- */
@@ -163,6 +166,35 @@ export class CVInput extends FormAssociatedReatomElement {
         --cv-input-font-size: var(--cv-font-size-md, 16px);
       }
 
+      :host([preset='search-mobile']) {
+        --cv-input-height: var(--cv-input-search-mobile-height, 42px);
+        --cv-input-padding-inline: var(--cv-input-search-mobile-padding-inline, 14px);
+        --cv-input-font-size: var(--cv-input-search-mobile-font-size, 16px);
+        --cv-input-border-radius: var(--cv-input-search-mobile-border-radius, 14px);
+        --cv-input-background: var(--cv-input-search-mobile-background, var(--cv-color-surface-2));
+        --cv-input-border-color: var(--cv-input-search-mobile-border-color, var(--cv-color-border-glass));
+        --cv-input-placeholder-color: var(
+          --cv-input-search-mobile-placeholder-color,
+          var(--cv-color-text-muted)
+        );
+        --cv-input-icon-size: var(--cv-input-search-mobile-icon-size, 20px);
+      }
+
+      :host([preset='search-mobile']) [part='base'] {
+        box-shadow: var(
+          --cv-input-search-mobile-shadow,
+          inset 0 1px 2px var(--cv-alpha-black-10),
+          0 1px 0 var(--cv-alpha-white-4)
+        );
+      }
+
+      :host([preset='search-mobile']:hover) {
+        --cv-input-border-color: var(
+          --cv-input-search-mobile-border-color-hover,
+          var(--cv-color-primary-border)
+        );
+      }
+
       /* --- disabled --- */
       :host([disabled]) [part='base'] {
         opacity: 0.55;

package/dist/components/cv-landmark.d.ts

@@ -28,5 +28,5 @@ export declare class CVLandmark extends ReatomLitElement {
     static define(): void;
     willUpdate(changedProperties: PropertyValues): void;
     private createModel;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult;
 }

package/dist/components/cv-landmark.js

@@ -1,5 +1,6 @@
 import { createLandmark } from '@chromvoid/headless-ui/landmarks';
-import { css, html, nothing } from 'lit';
+import { css, nothing } from 'lit';
+import { html } from '../reatom-lit/index.js';
 import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
 let cvLandmarkNonce = 0;
 export class CVLandmark extends ReatomLitElement {

package/dist/components/cv-link.d.ts

@@ -18,5 +18,5 @@ export declare class CVLink extends ReatomLitElement {
     private createModel;
     private handleClick;
     private handleKeyDown;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult;
 }

package/dist/components/cv-link.js

@@ -1,5 +1,6 @@
 import { createLink } from '@chromvoid/headless-ui/link';
-import { css, html, nothing } from 'lit';
+import { css, nothing } from 'lit';
+import { html } from '../reatom-lit/index.js';
 import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
 let cvLinkNonce = 0;
 export class CVLink extends ReatomLitElement {

package/dist/components/cv-listbox-group.d.ts

@@ -11,5 +11,5 @@ export declare class CVListboxGroup extends LitElement {
     constructor();
     static styles: import("lit").CSSResult[];
     static define(): void;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/cv-listbox.d.ts

@@ -76,6 +76,6 @@ export declare class CVListbox extends ReatomLitElement {
     private handleOptionPointerSelect;
     private handleListboxKeyDown;
     private handleSlotChange;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult;
 }
 export {};

package/dist/components/cv-listbox.js

@@ -1,5 +1,6 @@
 import { createListbox } from '@chromvoid/headless-ui/listbox';
-import { css, html, nothing } from 'lit';
+import { css, nothing } from 'lit';
+import { html } from '../reatom-lit/index.js';
 import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
 import { CVListboxGroup } from './cv-listbox-group.js';
 import { CVOption } from './cv-option.js';