@chromvoid/uikit 0.1.0

package/dist/components/cv-textarea.js

@@ -0,0 +1,328 @@
+import { createTextarea } from '@chromvoid/headless-ui/textarea';
+import { css, html, nothing } from 'lit';
+import { FormAssociatedReatomElement } from '../form-associated/FormAssociatedReatomElement.js';
+let cvTextareaNonce = 0;
+export class CVTextarea extends FormAssociatedReatomElement {
+    static elementName = 'cv-textarea';
+    static get properties() {
+        return {
+            value: { type: String },
+            placeholder: { type: String },
+            disabled: { type: Boolean, reflect: true },
+            readonly: { type: Boolean, reflect: true },
+            required: { type: Boolean, reflect: true },
+            rows: { type: Number },
+            cols: { type: Number },
+            minLength: { type: Number, attribute: 'minlength' },
+            maxLength: { type: Number, attribute: 'maxlength' },
+            resize: { type: String, reflect: true },
+            size: { type: String, reflect: true },
+            variant: { type: String, reflect: true },
+            name: { type: String },
+        };
+    }
+    model;
+    valueOnFocus = '';
+    defaultValue = '';
+    didCaptureDefaultValue = false;
+    constructor() {
+        super();
+        this.value = '';
+        this.placeholder = '';
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.rows = 4;
+        this.cols = 20;
+        this.minLength = undefined;
+        this.maxLength = undefined;
+        this.resize = 'vertical';
+        this.size = 'medium';
+        this.variant = 'outlined';
+        this.name = '';
+        this.model = this.createModel();
+    }
+    static styles = [
+        css `
+      :host {
+        display: block;
+        --cv-textarea-min-height: 96px;
+        --cv-textarea-padding-inline: var(--cv-space-3, 12px);
+        --cv-textarea-padding-block: var(--cv-space-2, 8px);
+        --cv-textarea-font-size: var(--cv-font-size-base, 14px);
+        --cv-textarea-border-radius: var(--cv-radius-sm, 6px);
+        --cv-textarea-border-color: var(--cv-color-border, #2a3245);
+        --cv-textarea-background: transparent;
+        --cv-textarea-color: var(--cv-color-text, #e8ecf6);
+        --cv-textarea-placeholder-color: var(--cv-color-text-muted, #6b7a99);
+        --cv-textarea-focus-ring: 0 0 0 2px var(--cv-color-primary, #65d7ff);
+        --cv-textarea-transition-duration: var(--cv-duration-fast, 120ms);
+      }
+
+      [part='base'] {
+        display: block;
+        border: 1px solid var(--cv-textarea-border-color);
+        border-radius: var(--cv-textarea-border-radius);
+        background: var(--cv-textarea-background);
+        color: var(--cv-textarea-color);
+        transition:
+          border-color var(--cv-textarea-transition-duration) var(--cv-easing-standard, ease),
+          background var(--cv-textarea-transition-duration) var(--cv-easing-standard, ease),
+          box-shadow var(--cv-textarea-transition-duration) var(--cv-easing-standard, ease);
+        box-sizing: border-box;
+        width: 100%;
+      }
+
+      [part='textarea'] {
+        display: block;
+        box-sizing: border-box;
+        width: 100%;
+        min-height: var(--cv-textarea-min-height);
+        border: 0;
+        outline: none;
+        margin: 0;
+        resize: vertical;
+        border-radius: inherit;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        font-size: var(--cv-textarea-font-size);
+        line-height: 1.5;
+        padding-inline: var(--cv-textarea-padding-inline);
+        padding-block: var(--cv-textarea-padding-block);
+      }
+
+      [part='textarea']::placeholder {
+        color: var(--cv-textarea-placeholder-color);
+      }
+
+      [part='form-control-label'] {
+        display: block;
+      }
+
+      [part='form-control-help-text'] {
+        display: block;
+      }
+
+      :host([variant='outlined']) [part='base'] {
+        border-color: var(--cv-textarea-border-color);
+        background: var(--cv-textarea-background);
+      }
+
+      :host([variant='filled']) [part='base'] {
+        background: var(--cv-color-surface, #141923);
+        border-color: transparent;
+      }
+
+      :host([focused]) [part='base'] {
+        box-shadow: var(--cv-textarea-focus-ring);
+      }
+
+      :host([size='small']) {
+        --cv-textarea-min-height: 72px;
+        --cv-textarea-padding-inline: var(--cv-space-2, 8px);
+        --cv-textarea-font-size: var(--cv-font-size-sm, 13px);
+      }
+
+      :host([size='large']) {
+        --cv-textarea-min-height: 120px;
+        --cv-textarea-padding-inline: var(--cv-space-4, 16px);
+        --cv-textarea-font-size: var(--cv-font-size-md, 16px);
+      }
+
+      :host([disabled]) {
+        pointer-events: none;
+      }
+
+      :host([disabled]) [part='base'] {
+        opacity: 0.55;
+      }
+
+      :host([readonly]) [part='textarea'] {
+        cursor: default;
+      }
+
+      :host([resize='none']) [part='textarea'] {
+        resize: none;
+      }
+
+      :host([resize='vertical']) [part='textarea'] {
+        resize: vertical;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.didCaptureDefaultValue) {
+            this.defaultValue = this.value;
+            this.didCaptureDefaultValue = true;
+        }
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('value') && this.model.state.value() !== this.value) {
+            this.model.actions.setValue(this.value);
+        }
+        if (changedProperties.has('placeholder')) {
+            this.model.actions.setPlaceholder(this.placeholder);
+        }
+        if (changedProperties.has('disabled')) {
+            this.model.actions.setDisabled(this.isEffectivelyDisabled());
+        }
+        if (changedProperties.has('readonly')) {
+            this.model.actions.setReadonly(this.readonly);
+        }
+        if (changedProperties.has('required')) {
+            this.model.actions.setRequired(this.required);
+        }
+        if (changedProperties.has('rows')) {
+            this.model.actions.setRows(this.rows);
+        }
+        if (changedProperties.has('cols')) {
+            this.model.actions.setCols(this.cols);
+        }
+        if (changedProperties.has('minLength')) {
+            this.model.actions.setMinLength(this.toNonNegativeIntegerOrUndefined(this.minLength));
+        }
+        if (changedProperties.has('maxLength')) {
+            this.model.actions.setMaxLength(this.toNonNegativeIntegerOrUndefined(this.maxLength));
+        }
+        if (changedProperties.has('resize')) {
+            this.model.actions.setResize(this.normalizeResize(this.resize));
+        }
+        this.toggleAttribute('focused', this.model.state.focused());
+        this.toggleAttribute('filled', this.model.state.filled());
+        this.syncFormAssociatedState();
+    }
+    createModel() {
+        return createTextarea({
+            idBase: `cv-textarea-${++cvTextareaNonce}`,
+            value: this.value,
+            disabled: this.isEffectivelyDisabled(),
+            readonly: this.readonly,
+            required: this.required,
+            placeholder: this.placeholder,
+            rows: this.rows,
+            cols: this.cols,
+            minLength: this.toNonNegativeIntegerOrUndefined(this.minLength),
+            maxLength: this.toNonNegativeIntegerOrUndefined(this.maxLength),
+            resize: this.normalizeResize(this.resize),
+            onInput: (value) => {
+                this.value = value;
+                this.dispatchEvent(new CustomEvent('cv-input', {
+                    detail: { value },
+                    bubbles: true,
+                    composed: true,
+                }));
+            },
+        });
+    }
+    onFormDisabledChanged(_disabled) {
+        this.model.actions.setDisabled(this.isEffectivelyDisabled());
+    }
+    onFormReset() {
+        this.value = this.defaultValue;
+        this.model.actions.setValue(this.defaultValue);
+    }
+    onFormStateRestore(state) {
+        if (typeof state !== 'string')
+            return;
+        this.value = state;
+        this.model.actions.setValue(state);
+    }
+    isFormAssociatedDisabled() {
+        return this.isEffectivelyDisabled();
+    }
+    getFormAssociatedValue() {
+        return this.model.state.value();
+    }
+    getFormAssociatedValidity() {
+        if (this.required && this.model.state.value().length === 0) {
+            return {
+                flags: { valueMissing: true },
+                message: 'Please fill out this field.',
+            };
+        }
+        return { flags: {} };
+    }
+    isEffectivelyDisabled() {
+        return this.disabled || this.formDisabled;
+    }
+    normalizeResize(resize) {
+        return resize === 'none' ? 'none' : 'vertical';
+    }
+    toNonNegativeIntegerOrUndefined(value) {
+        if (typeof value !== 'number' || !Number.isFinite(value) || value < 0) {
+            return undefined;
+        }
+        return Math.floor(value);
+    }
+    handleNativeInput(event) {
+        const target = event.target;
+        this.model.actions.handleInput(target.value);
+        this.syncFormAssociatedState();
+    }
+    handleNativeFocus() {
+        this.valueOnFocus = this.model.state.value();
+        this.model.actions.setFocused(true);
+        this.requestUpdate();
+        this.dispatchEvent(new CustomEvent('cv-focus', {
+            detail: {},
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleNativeBlur() {
+        this.model.actions.setFocused(false);
+        this.requestUpdate();
+        const currentValue = this.model.state.value();
+        this.dispatchEvent(new CustomEvent('cv-blur', {
+            detail: {},
+            bubbles: true,
+            composed: true,
+        }));
+        if (currentValue !== this.valueOnFocus) {
+            this.dispatchEvent(new CustomEvent('cv-change', {
+                detail: { value: currentValue },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        this.syncFormAssociatedState();
+    }
+    render() {
+        const textareaProps = this.model.contracts.getTextareaProps();
+        return html `
+      <span part="form-control-label"><slot name="label"></slot></span>
+      <div part="base">
+        <textarea
+          part="textarea"
+          id=${textareaProps.id}
+          .value=${this.model.state.value()}
+          name=${this.name || nothing}
+          tabindex=${textareaProps.tabindex}
+          rows=${textareaProps.rows}
+          cols=${textareaProps.cols}
+          aria-disabled=${textareaProps['aria-disabled'] ?? nothing}
+          aria-readonly=${textareaProps['aria-readonly'] ?? nothing}
+          aria-required=${textareaProps['aria-required'] ?? nothing}
+          placeholder=${textareaProps.placeholder ?? nothing}
+          ?disabled=${textareaProps.disabled}
+          ?readonly=${textareaProps.readonly}
+          ?required=${textareaProps.required}
+          minlength=${textareaProps.minlength ?? nothing}
+          maxlength=${textareaProps.maxlength ?? nothing}
+          @input=${this.handleNativeInput}
+          @focus=${this.handleNativeFocus}
+          @blur=${this.handleNativeBlur}
+        ></textarea>
+      </div>
+      <span part="form-control-help-text"><slot name="help-text"></slot></span>
+    `;
+    }
+}

package/dist/components/cv-toast-region.d.ts

@@ -0,0 +1,39 @@
+import type { PropertyValues } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+import { type CVToastController } from '../toast/create-toast-controller.js';
+export type ToastRegionPosition = 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end';
+export interface CVToastRegionCloseDetail {
+    id: string;
+}
+export type CVToastRegionCloseEvent = CustomEvent<CVToastRegionCloseDetail>;
+export declare class CVToastRegion extends ReatomLitElement {
+    static elementName: string;
+    static get properties(): {
+        controller: {
+            attribute: boolean;
+        };
+        position: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        maxVisible: {
+            type: NumberConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+    };
+    controller: CVToastController;
+    position: ToastRegionPosition;
+    maxVisible: number;
+    private previousToastIds;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    connectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
+    private handlePause;
+    private handleResume;
+    private handleToastClose;
+    protected render(): import("lit").TemplateResult<1>;
+}

package/dist/components/cv-toast-region.js

@@ -0,0 +1,162 @@
+import { css, html } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+import { createToastController } from '../toast/create-toast-controller.js';
+import { CVToast } from './cv-toast.js';
+export class CVToastRegion extends ReatomLitElement {
+    static elementName = 'cv-toast-region';
+    static get properties() {
+        return {
+            controller: { attribute: false },
+            position: { type: String, reflect: true },
+            maxVisible: { type: Number, attribute: 'max-visible', reflect: true },
+        };
+    }
+    previousToastIds = new Set();
+    constructor() {
+        super();
+        this.position = 'top-end';
+        this.maxVisible = 3;
+        this.controller = createToastController({ maxVisible: this.maxVisible });
+    }
+    static styles = [
+        css `
+      :host {
+        display: block;
+        position: fixed;
+        z-index: var(--cv-toast-region-z-index, 9999);
+        inline-size: var(--cv-toast-region-width, auto);
+        max-width: var(--cv-toast-region-max-width, 420px);
+        pointer-events: none;
+      }
+
+      :host([position='top-start']) {
+        top: var(--cv-toast-region-inset, var(--cv-space-4, 16px));
+        left: var(--cv-toast-region-inset, var(--cv-space-4, 16px));
+      }
+
+      :host([position='top-center']) {
+        top: var(--cv-toast-region-inset, var(--cv-space-4, 16px));
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      :host([position='top-end']) {
+        top: var(--cv-toast-region-inset, var(--cv-space-4, 16px));
+        right: var(--cv-toast-region-inset, var(--cv-space-4, 16px));
+      }
+
+      :host([position='bottom-start']) {
+        bottom: var(--cv-toast-region-inset, var(--cv-space-4, 16px));
+        left: var(--cv-toast-region-inset, var(--cv-space-4, 16px));
+      }
+
+      :host([position='bottom-center']) {
+        bottom: var(--cv-toast-region-inset, var(--cv-space-4, 16px));
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      :host([position='bottom-end']) {
+        bottom: var(--cv-toast-region-inset, var(--cv-space-4, 16px));
+        right: var(--cv-toast-region-inset, var(--cv-space-4, 16px));
+      }
+
+      [part='base'] {
+        display: grid;
+        gap: var(--cv-toast-region-gap, var(--cv-space-2, 8px));
+        pointer-events: auto;
+      }
+
+      [part='item'] {
+        display: block;
+        inline-size: 100%;
+      }
+    `,
+    ];
+    static define() {
+        CVToast.define();
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.previousToastIds = new Set(this.controller.model.state.items().map((item) => item.id));
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('maxVisible') && changedProperties.get('maxVisible') !== undefined) {
+            this.controller = createToastController({ maxVisible: this.maxVisible });
+            this.previousToastIds = new Set();
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('controller')) {
+            this.previousToastIds = new Set(this.controller.model.state.items().map((item) => item.id));
+            return;
+        }
+        const currentIds = new Set(this.controller.model.state.items().map((item) => item.id));
+        for (const previousId of this.previousToastIds) {
+            if (!currentIds.has(previousId)) {
+                this.dispatchEvent(new CustomEvent('cv-close', {
+                    detail: { id: previousId },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        }
+        this.previousToastIds = currentIds;
+    }
+    handlePause() {
+        this.controller.pause();
+    }
+    handleResume() {
+        this.controller.resume();
+    }
+    handleToastClose(event) {
+        const customEvent = event;
+        this.controller.dismiss(customEvent.detail.id);
+    }
+    render() {
+        const model = this.controller.model;
+        const regionProps = model.contracts.getRegionProps();
+        const items = model.state.visibleItems();
+        const paused = model.state.isPaused();
+        return html `
+      <section
+        id=${regionProps.id}
+        role=${regionProps.role}
+        aria-live=${regionProps['aria-live']}
+        aria-atomic=${regionProps['aria-atomic']}
+        part="base"
+        data-paused=${paused ? 'true' : 'false'}
+        @mouseenter=${this.handlePause}
+        @mouseleave=${this.handleResume}
+      >
+        ${items.map((item) => {
+            const toastProps = model.contracts.getToastProps(item.id);
+            return html `
+            <cv-toast
+              id=${toastProps.id}
+              role=${toastProps.role}
+              data-level=${toastProps['data-level']}
+              part="item"
+              .toastId=${item.id}
+              .level=${item.level ?? 'info'}
+              .closable=${item.closable ?? true}
+              .title=${item.title ?? ''}
+              .message=${item.message}
+              .iconName=${item.icon ?? ''}
+              .progress=${Boolean(item.progress)}
+              .durationMs=${item.durationMs ?? 0}
+              .paused=${paused}
+              .actions=${item.actions ?? []}
+              @cv-close=${this.handleToastClose}
+            ></cv-toast>
+          `;
+        })}
+      </section>
+    `;
+    }
+}

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

@@ -0,0 +1,67 @@
+import type { ToastAction, ToastLevel } from '@chromvoid/headless-ui/toast';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export interface CVToastCloseDetail {
+    id: string;
+}
+export type CVToastCloseEvent = CustomEvent<CVToastCloseDetail>;
+export declare class CVToast extends ReatomLitElement {
+    static elementName: string;
+    static get properties(): {
+        level: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        closable: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        toastId: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        title: {
+            type: StringConstructor;
+        };
+        message: {
+            type: StringConstructor;
+        };
+        iconName: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        progress: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        paused: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        durationMs: {
+            type: NumberConstructor;
+            attribute: boolean;
+        };
+        actions: {
+            attribute: boolean;
+        };
+    };
+    level: ToastLevel;
+    closable: boolean;
+    toastId: string;
+    title: string;
+    message: string;
+    iconName: string;
+    progress: boolean;
+    paused: boolean;
+    durationMs: number;
+    actions: readonly ToastAction[];
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    private getRole;
+    private handleDismiss;
+    private handleActionClick;
+    updated(changedProperties: Map<string, unknown>): void;
+    private renderFallbackIcon;
+    protected render(): import("lit").TemplateResult<1>;
+}