@chromvoid/uikit 0.1.0

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

@@ -0,0 +1,142 @@
+import { LitElement, css, html, nothing } from 'lit';
+export class CVSidebarItem extends LitElement {
+    static elementName = 'cv-sidebar-item';
+    static get properties() {
+        return {
+            href: { type: String, reflect: true },
+            active: { type: Boolean, reflect: true },
+            disabled: { type: Boolean, reflect: true },
+        };
+    }
+    constructor() {
+        super();
+        this.href = '';
+        this.active = false;
+        this.disabled = false;
+    }
+    static styles = [
+        css `
+      :host {
+        display: block;
+        outline: none;
+      }
+
+      :host([hidden]) {
+        display: none;
+      }
+
+      [part='base'] {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: var(--cv-sidebar-item-gap, var(--cv-space-2, 8px));
+        min-block-size: var(--cv-sidebar-item-min-block-size, 32px);
+        padding-block: var(--cv-sidebar-item-padding-block, var(--cv-space-2, 8px));
+        padding-inline: var(--cv-sidebar-item-padding-inline, var(--cv-space-3, 12px));
+        border-radius: var(--cv-sidebar-item-border-radius, var(--cv-radius-sm, 6px));
+        border-inline-start: var(--cv-sidebar-item-indicator-width, 2px) solid transparent;
+        background: var(--cv-sidebar-item-background, transparent);
+        color: var(--cv-sidebar-item-color, var(--cv-color-text-muted, #9aa6bf));
+        font-family: var(--cv-sidebar-item-font-family, inherit);
+        font-size: var(--cv-sidebar-item-font-size, inherit);
+        font-weight: var(--cv-sidebar-item-font-weight, inherit);
+        letter-spacing: var(--cv-sidebar-item-letter-spacing, normal);
+        text-decoration: none;
+        transition:
+          background var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease),
+          border-color var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease),
+          color var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease);
+        overflow: hidden;
+      }
+
+      [part='base']:focus-visible {
+        outline: 2px solid var(--cv-sidebar-item-outline-color, var(--cv-color-primary, #65d7ff));
+        outline-offset: 1px;
+      }
+
+      :host(:hover) [part='base'] {
+        background: var(
+          --cv-sidebar-item-background-hover,
+          color-mix(in oklab, var(--cv-color-surface, #141923) 82%, white 18%)
+        );
+        color: var(--cv-sidebar-item-color-hover, var(--cv-color-text, #e8ecf6));
+      }
+
+      :host([active]) [part='base'] {
+        background: var(--cv-sidebar-item-background-active, transparent);
+        color: var(--cv-sidebar-item-color-active, var(--cv-color-primary, #65d7ff));
+        border-inline-start-color: var(--cv-sidebar-item-indicator-color, var(--cv-color-primary, #65d7ff));
+      }
+
+      :host([disabled]) [part='base'] {
+        opacity: 0.55;
+        cursor: not-allowed;
+      }
+
+      [part='prefix'],
+      [part='suffix'] {
+        position: relative;
+        z-index: 1;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+      }
+
+      [part='label'] {
+        position: relative;
+        z-index: 1;
+        flex: 1;
+        min-inline-size: 0;
+      }
+
+      :host([data-sidebar-collapsed]:not([data-sidebar-mobile])) [part='base'] {
+        justify-content: center;
+        padding-inline: var(--cv-sidebar-item-collapsed-padding-inline, var(--cv-space-2, 8px));
+      }
+
+      :host([data-sidebar-collapsed]:not([data-sidebar-mobile])) [part='label'] {
+        position: absolute;
+        inline-size: 1px;
+        block-size: 1px;
+        margin: -1px;
+        padding: 0;
+        border: 0;
+        clip: rect(0 0 0 0);
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      :host([data-sidebar-collapsed]:not([data-sidebar-mobile])) [part='suffix'] {
+        display: none;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    handleClick(event) {
+        if (!this.disabled)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    render() {
+        return html `
+      <a
+        part="base"
+        href=${!this.disabled && this.href ? this.href : nothing}
+        aria-current=${this.active ? 'location' : nothing}
+        aria-disabled=${this.disabled ? 'true' : nothing}
+        tabindex=${this.disabled ? '-1' : nothing}
+        @click=${this.handleClick}
+      >
+        <span part="prefix"><slot name="prefix"></slot></span>
+        <span part="label"><slot></slot></span>
+        <span part="suffix"><slot name="suffix"></slot></span>
+      </a>
+    `;
+    }
+}

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

@@ -0,0 +1,171 @@
+import type { PropertyValues } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+type ScrollspyRoot = Document | ShadowRoot | Element | null;
+export type CVSidebarScrollspyStrategy = 'top-anchor' | 'viewport-dominant';
+export type CVSidebarInputDetail = {
+    expanded: boolean;
+} | {
+    overlayOpen: boolean;
+};
+export type CVSidebarChangeDetail = CVSidebarInputDetail;
+export interface CVSidebarScrollspyChangeDetail {
+    activeId: string | null;
+}
+export type CVSidebarInputEvent = CustomEvent<CVSidebarInputDetail>;
+export type CVSidebarChangeEvent = CustomEvent<CVSidebarChangeDetail>;
+export type CVSidebarScrollspyChangeEvent = CustomEvent<CVSidebarScrollspyChangeDetail>;
+export interface CVSidebarEventMap {
+    'cv-input': CVSidebarInputEvent;
+    'cv-change': CVSidebarChangeEvent;
+    'cv-scrollspy-change': CVSidebarScrollspyChangeEvent;
+}
+export declare class CVSidebar extends ReatomLitElement {
+    static elementName: string;
+    static get properties(): {
+        expanded: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        collapsed: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        mobile: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        overlayOpen: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        breakpoint: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        closeOnEscape: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        closeOnOutsidePointer: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        initialFocusId: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        scrollspy: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        scrollspyOffsetTop: {
+            type: NumberConstructor;
+            attribute: string;
+        };
+        scrollspyStrategy: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        scrollspySmoothScroll: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        scrollspyRoot: {
+            attribute: boolean;
+        };
+    };
+    expanded: boolean;
+    collapsed: boolean;
+    mobile: boolean;
+    overlayOpen: boolean;
+    size: 'small' | 'medium' | 'large';
+    breakpoint: string;
+    closeOnEscape: boolean;
+    closeOnOutsidePointer: boolean;
+    initialFocusId: string;
+    ariaLabel: string;
+    scrollspy: boolean;
+    scrollspyOffsetTop: number;
+    scrollspyStrategy: CVSidebarScrollspyStrategy;
+    scrollspySmoothScroll: boolean;
+    scrollspyRoot: ScrollspyRoot;
+    private readonly idBase;
+    private model;
+    private lockScrollApplied;
+    private previousBodyOverflow;
+    private lifecycleToken;
+    private suppressLifecycleFromUpdate;
+    private mediaQuery;
+    private mediaQueryHandler;
+    private scrollspyObserver;
+    private scrollspyBindings;
+    private scrollspyActiveId;
+    private scrollspyRefreshToken;
+    private scrollspyRecomputeFrame;
+    private activeRevealToken;
+    constructor();
+    get activeId(): string | null;
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
+    private createModel;
+    private captureState;
+    private setupMediaQuery;
+    private teardownMediaQuery;
+    private dispatchInput;
+    private dispatchChange;
+    private dispatchLifecycleEvent;
+    private dispatchDesktopLifecycle;
+    private dispatchOverlayLifecycle;
+    private dispatchScrollspyChange;
+    private applyInteractionResult;
+    private syncScrollLock;
+    private releaseScrollLock;
+    private getDefaultSlot;
+    private getAssignedElements;
+    private getSidebarItems;
+    private syncChildItemContext;
+    private handleDefaultSlotChange;
+    private handleToggleClick;
+    private handleOverlayPointerDown;
+    private handlePanelKeyDown;
+    private handleBodyClick;
+    private resolveBindingFromEvent;
+    private scheduleScrollspyRefresh;
+    private refreshScrollspy;
+    private destroyScrollspy;
+    private collectScrollspyBindings;
+    private getHashHref;
+    private resolveScrollspyTarget;
+    private resolveScrollspyContainer;
+    private handleScrollspyIntersection;
+    private computeActiveId;
+    private computeTopAnchorActiveId;
+    private computeViewportDominantActiveId;
+    private getScrollspyObserverOptions;
+    private resolveScrollspyStrategy;
+    private scrollBindingTarget;
+    private scheduleScrollspyRecompute;
+    private cancelScrollspyRecompute;
+    private updateActiveId;
+    private syncScrollspyActiveState;
+    private revealActiveBinding;
+    protected render(): import("lit").TemplateResult<1>;
+}
+export {};