@chromvoid/uikit 0.1.0 → 0.2.0

package/LICENSE

@@ -1,8 +1,21 @@
-ChromVoid uses the GNU Affero General Public License, version 3, for the
-components identified as `AGPL-3.0-only` in `LICENSING.md`.
+MIT License
 
-Canonical text:
-https://www.gnu.org/licenses/agpl-3.0.txt
+Copyright (c) 2026 ChromVoid Team
 
-Human-readable overview:
-https://www.gnu.org/licenses/agpl-3.0.en.html
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -8,6 +8,7 @@ Thin Lit UI layer over `@chromvoid/headless-ui`.
 - `cv-accordion` + `cv-accordion-item`
 - `cv-alert-dialog`
 - `cv-alert`
+- `cv-bottom-sheet`
 - `cv-breadcrumb` + `cv-breadcrumb-item`
 - `cv-button`
 - `cv-carousel` + `cv-carousel-slide`

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

@@ -64,6 +64,6 @@ export declare class CVAccordionItem extends LitElement {
     private handleTriggerClick;
     private handleTriggerFocus;
     private handleTriggerKeyDown;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
 }
 export {};

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

@@ -75,5 +75,5 @@ export declare class CVAccordion extends ReatomLitElement {
     private handleItemTriggerFocus;
     private handleItemTriggerKeyDown;
     private handleSlotChange;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult;
 }

package/dist/components/cv-accordion.js

@@ -1,5 +1,6 @@
 import { createAccordion } from '@chromvoid/headless-ui/accordion';
-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 { CVAccordionItem } from './cv-accordion-item.js';
 const accordionKeysToPrevent = new Set(['ArrowDown', 'ArrowUp', 'Home', 'End', 'Enter', ' ', 'Spacebar']);

package/dist/components/cv-alert-dialog.d.ts

@@ -82,5 +82,5 @@ export declare class CVAlertDialog extends ReatomLitElement {
     private handleContentKeyDown;
     private handleCancelClick;
     private handleActionClick;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult;
 }

package/dist/components/cv-alert-dialog.js

@@ -1,5 +1,6 @@
 import { createAlertDialog } from '@chromvoid/headless-ui/alert-dialog';
-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 cvAlertDialogNonce = 0;
 export class CVAlertDialog extends ReatomLitElement {
@@ -61,12 +62,25 @@ export class CVAlertDialog extends ReatomLitElement {
         z-index: 45;
         display: grid;
         place-items: center;
-        background: color-mix(in oklab, black 62%, transparent);
+        background: var(--cv-alpha-black-62);
         padding: var(--cv-space-4, 16px);
+        opacity: 1;
+        transition:
+          opacity var(--cv-alert-dialog-transition-duration, var(--cv-duration-fast, 120ms))
+            var(--cv-easing-standard, ease),
+          display var(--cv-alert-dialog-transition-duration, var(--cv-duration-fast, 120ms)) allow-discrete;
+        transition-behavior: allow-discrete;
       }
 
       [part='overlay'][hidden] {
         display: none;
+        opacity: 0;
+      }
+
+      @starting-style {
+        [part='overlay']:not([hidden]) {
+          opacity: 0;
+        }
       }
 
       [part='content'] {
@@ -339,6 +353,7 @@ export class CVAlertDialog extends ReatomLitElement {
       <div
         id=${overlayProps.id}
         ?hidden=${overlayProps.hidden}
+        class="cv-u-discrete-presence"
         data-open=${overlayProps['data-open']}
         part="overlay"
         @mousedown=${this.handleOverlayPointerDown}

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

@@ -44,5 +44,5 @@ export declare class CVAlert extends ReatomLitElement {
     private dispatchInput;
     private dispatchChange;
     private syncFromModel;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult;
 }

package/dist/components/cv-alert.js

@@ -1,5 +1,6 @@
 import { createAlert } from '@chromvoid/headless-ui/alert';
-import { css, html } from 'lit';
+import { css } from 'lit';
+import { html } from '../reatom-lit/index.js';
 import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
 let cvAlertNonce = 0;
 export class CVAlert extends ReatomLitElement {

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

@@ -52,5 +52,5 @@ export declare class CVBadge 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-badge.js

@@ -1,5 +1,6 @@
 import { createBadge } from '@chromvoid/headless-ui/badge';
-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';
 export class CVBadge extends ReatomLitElement {
     static elementName = 'cv-badge';

package/dist/components/cv-bottom-sheet.d.ts

@@ -0,0 +1,127 @@
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export interface CVBottomSheetEventDetail {
+    open: boolean;
+    detent?: CVBottomSheetDetent;
+}
+export type CVBottomSheetDetent = 'collapsed' | 'middle' | 'expanded';
+export type CVBottomSheetInputEvent = CustomEvent<CVBottomSheetEventDetail>;
+export type CVBottomSheetChangeEvent = CustomEvent<CVBottomSheetEventDetail>;
+export interface CVBottomSheetEventMap {
+    'cv-input': CVBottomSheetInputEvent;
+    'cv-change': CVBottomSheetChangeEvent;
+}
+export declare class CVBottomSheet extends ReatomLitElement {
+    static elementName: string;
+    static get properties(): {
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        modal: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        type: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        closeOnEscape: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        closeOnOutsidePointer: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        closeOnOutsideFocus: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        initialFocusId: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        noHeader: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        closable: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        showHandle: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        dragToClose: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        detents: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        detent: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        handleLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+    };
+    open: boolean;
+    modal: boolean;
+    type: 'dialog' | 'alertdialog';
+    closeOnEscape: boolean;
+    closeOnOutsidePointer: boolean;
+    closeOnOutsideFocus: boolean;
+    initialFocusId: string;
+    noHeader: boolean;
+    closable: boolean;
+    showHandle: boolean;
+    dragToClose: boolean;
+    detents: string;
+    detent: CVBottomSheetDetent;
+    handleLabel: string;
+    private dragPointerId;
+    private dragStartY;
+    private dragStartedAt;
+    private dragStartDetent;
+    private dragMoved;
+    private suppressNextHandleClick;
+    constructor();
+    static styles: import("lit").CSSResult;
+    static define(): void;
+    disconnectedCallback(): void;
+    private getDialogElement;
+    private getEnabledDetents;
+    private hasDetents;
+    private isDetent;
+    private getResolvedDetent;
+    private getResolvedDetentIndex;
+    private resetSheetDragState;
+    private setSheetDragOffset;
+    private createEventDetail;
+    private dispatchInput;
+    private dispatchChange;
+    private commitUserClose;
+    private commitUserDetent;
+    private commitDragClose;
+    private handleDialogInput;
+    private handleDialogChange;
+    private handleDragPointerDown;
+    private handleDragPointerMove;
+    private getNextDetentForDrag;
+    private handleDragPointerUp;
+    private handleDragPointerCancel;
+    private handleHandleClick;
+    private handleDialogAfterHide;
+    protected render(): import("lit-html").TemplateResult;
+}