@moni-labs/moni-ui 0.2.0 → 0.3.0

package/dist/components/moni-select-option.js

@@ -1,3 +1,9 @@
+/**
+ * @file components/moni-select-option.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -8,14 +14,42 @@ import { html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 /**
- * Option item for custom moni-select dropdown.
+ * Material Design 3 Select Option component.
+ *
+ * An individual selectable item designed to be placed inside a
+ * `<moni-select>` dropdown.
+ *
+ * **Interaction and layout:**
+ * Options are rendered as accessible `<li>` elements styled identically to
+ * `<moni-menu-item>`. When slotted into a `<moni-select>`, the parent
+ * component extracts their `value`, `label`, and `group` attributes to build
+ * its internal data model and handles the actual selection logic, keyboard
+ * navigation, and rendering within the dropdown popup.
+ *
+ * **Grouping:**
+ * Options can be categorized into subcategories by providing a `group`
+ * attribute. The parent `<moni-select>` uses this to automatically generate
+ * group headers (`<moni-select-group>`) in the dropdown list.
+ *
+ * @example
+ * ```html
+ * <moni-select label="Favorite framework">
+ *   <!-- Standard option -->
+ *   <moni-select-option value="lit">Lit Element</moni-select-option>
+ *
+ *   <!-- Disabled option -->
+ *   <moni-select-option value="react" disabled>React (not allowed)</moni-select-option>
+ *
+ *   <!-- Grouped option -->
+ *   <moni-select-option value="vue" group="Other">Vue.js</moni-select-option>
+ * </moni-select>
+ * ```
+ *
+ * @slot default - The text label for the option. If the `label` attribute is
+ *                omitted, the parent `<moni-select>` will read this slot's
+ *                `textContent`.
  *
- * Attributes:
- *  - value:    string value of the option
- *  - label:    text label (uses textContent or slot if empty)
- *  - group:    subcategory group/category name
- *  - selected: present -> active highlight state
- *  - disabled: present -> disabled
+ * @csspart item - The outer `<li>` element.
  */
 let MoniSelectOption = class MoniSelectOption extends MoniElement {
     constructor() {

package/dist/components/moni-select.d.ts

@@ -1,9 +1,66 @@
+/**
+ * @file components/moni-select.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
 import { MoniElement } from './_base/index.js';
 import './moni-icon.js';
 import './moni-progress.js';
 import './moni-select-option.js';
 /**
- * Custom Searchable Select Component with Subcategories, Animations, and Drawer/Sheet option.
+ * Material Design 3 Select (Dropdown) component.
+ *
+ * A fully-featured custom select dropdown with searchability, option groups,
+ * keyboard navigation, animation, and optional mobile drawer/sheet mode.
+ * Replaces the native `<select>` element with a fully styled, accessible
+ * M3-compliant alternative.
+ *
+ * **M3 spec reference:** `m3-docs/components/menus/specs.md` (dropdown menus)
+ *
+ * **Feature summary:**
+ * - Filled and outlined variants matching the M3 text field styles.
+ * - Floating label with the standard field-styles floating label animation.
+ * - Searchable mode: `searchable` attribute adds an inline filter input.
+ * - Option groups: slot `<moni-select-group>` elements for hierarchical options.
+ * - Mobile drawer: `drawer` attribute opens options in a `<moni-bottom-sheet>`
+ *   instead of a dropdown popup, ideal for touch UIs.
+ * - Keyboard navigation: Arrow keys, Enter, Escape, and Tab per ARIA combobox.
+ * - Loading state: `loading` shows an indeterminate circular progress.
+ * - Multi-value support: `multiple` enables multiple selection.
+ *
+ * **Option sources:**
+ * Options can be provided in two ways:
+ * 1. **Slotted `<moni-select-option>` elements** (default, recommended for SSR).
+ * 2. **`options` property** — a `DropdownNode[]` array for fully programmatic control.
+ *
+ * **Value binding:**
+ * The `value` property holds the currently selected option's value string.
+ * For multiple selection, `values` holds `string[]`. On change, a composed
+ * `'change'` event is fired.
+ *
+ * @fires change - Bubbles and is composed. Fired when the selected value changes.
+ *                 Read `element.value` (or `element.values` for `multiple`).
+ *
+ * @example
+ * ```html
+ * <moni-select label="Country" name="country" variant="outlined">
+ *   <moni-select-option value="us">United States</moni-select-option>
+ *   <moni-select-option value="gb">United Kingdom</moni-select-option>
+ *   <moni-select-option value="de">Germany</moni-select-option>
+ * </moni-select>
+ *
+ * <!-- Searchable select -->
+ * <moni-select label="Language" searchable>
+ *   <moni-select-option value="ts">TypeScript</moni-select-option>
+ *   <moni-select-option value="py">Python</moni-select-option>
+ * </moni-select>
+ * ```
+ *
+ * @slot default - `<moni-select-option>` or `<moni-select-group>` children.
+ *
+ * @csspart field    - The outer `.field` div container.
+ * @csspart dropdown - The floating option list container.
  */
 export declare class MoniSelect extends MoniElement {
     name: string;
@@ -65,7 +122,7 @@ export declare class MoniSelect extends MoniElement {
     private _renderSubcategoryList;
     private _renderDesktopNode;
     private _renderOptionsList;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/moni-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"moni-select.d.ts","sourceRoot":"","sources":["../../src/components/moni-select.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAA6B,MAAM,kBAAkB,CAAC;AAC1E,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,yBAAyB,CAAC;AAmBjC;;GAEG;AACH,qBACa,UAAW,SAAQ,WAAW;IACb,IAAI,SAAM;IACV,KAAK,SAAM;IACX,OAAO,EAAE,QAAQ,GAAG,UAAU,CAAY;IAEvE,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAY;IAExD,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAc;IACR,QAAQ,UAAS;IACjB,OAAO,UAAS;IAC/B,MAAM,SAAM;IACa,SAAS,SAAM;IACzB,KAAK,UAAS;IAC7B,KAAK,SAAM;IACX,IAAI,SAAM;IACkB,YAAY,SAClD;IACyB,UAAU,UAAS;IACnB,SAAS,UAAS;IAClB,KAAK,UAAS;IAC7B,WAAW,SAAM;IACjB,WAAW,EAAE,UAAU,GAAG,OAAO,CAAc;IAC/C,SAAS,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAU;IACpC,aAAa,SAAa;IAE3E,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,YAAY,CAAM;IAC1B,OAAO,CAAC,gBAAgB,CAAiD;IACzE,OAAO,CAAC,cAAc,CAAsB;IAC5C,OAAO,CAAC,YAAY,CAAM;IAC1B,OAAO,CAAC,UAAU,CAAM;IACxB,OAAO,CAAC,oBAAoB,CAAS;IACrC,OAAO,CAAC,cAAc,CAAmB;IAEnC,OAAO,CAAC,KAAK,CAAmB;IAC/B,OAAO,CAAC,MAAM,CAAoB;IAElD,OAAgB,MAAM,4BAmUpB;IAEO,iBAAiB;IAOjB,oBAAoB;IAOpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAa1E,OAAO,CAAC,oBAAoB;IAoB5B,OAAO,CAAC,mBAAmB,CAIzB;IAEF,OAAO,CAAC,yBAAyB;IAgDjC,OAAO,CAAC,aAAa,CAKnB;IAEF,OAAO,CAAC,aAAa,CAKnB;IAEF,OAAO,CAAC,mBAAmB;IAwD3B,OAAO,CAAC,aAAa;IAarB,OAAO,CAAC,aAAa;IAqDrB,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,aAAa;IAkCrB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,cAAc;IAsBtB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,oBAAoB;IAmB5B,OAAO,CAAC,UAAU;IAkClB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,eAAe;IAavB,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,kBAAkB;IAe1B,OAAO,CAAC,eAAe;IA0BvB,OAAO,CAAC,sBAAsB;IAoC9B,OAAO,CAAC,kBAAkB;IA+B1B,OAAO,CAAC,kBAAkB;IAsDjB,MAAM;CA6Hf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"moni-select.d.ts","sourceRoot":"","sources":["../../src/components/moni-select.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,OAAO,EAAE,WAAW,EAA6B,MAAM,kBAAkB,CAAC;AAC1E,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,yBAAyB,CAAC;AAuCjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,qBACa,UAAW,SAAQ,WAAW;IACb,IAAI,SAAM;IACV,KAAK,SAAM;IACX,OAAO,EAAE,QAAQ,GAAG,UAAU,CAAY;IAEvE,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAY;IAExD,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAc;IACR,QAAQ,UAAS;IACjB,OAAO,UAAS;IAC/B,MAAM,SAAM;IACa,SAAS,SAAM;IACzB,KAAK,UAAS;IAC7B,KAAK,SAAM;IACX,IAAI,SAAM;IACkB,YAAY,SAClD;IACyB,UAAU,UAAS;IACnB,SAAS,UAAS;IAClB,KAAK,UAAS;IAC7B,WAAW,SAAM;IACjB,WAAW,EAAE,UAAU,GAAG,OAAO,CAAc;IAC/C,SAAS,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAU;IACpC,aAAa,SAAa;IAE3E,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,YAAY,CAAM;IAC1B,OAAO,CAAC,gBAAgB,CAAiD;IACzE,OAAO,CAAC,cAAc,CAAsB;IAC5C,OAAO,CAAC,YAAY,CAAM;IAC1B,OAAO,CAAC,UAAU,CAAM;IACxB,OAAO,CAAC,oBAAoB,CAAS;IACrC,OAAO,CAAC,cAAc,CAAmB;IAEnC,OAAO,CAAC,KAAK,CAAmB;IAC/B,OAAO,CAAC,MAAM,CAAoB;IAElD,OAAgB,MAAM,4BAmUpB;IAEO,iBAAiB;IAOjB,oBAAoB;IAOpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAa1E,OAAO,CAAC,oBAAoB;IAoB5B,OAAO,CAAC,mBAAmB,CAIzB;IAEF,OAAO,CAAC,yBAAyB;IAgDjC,OAAO,CAAC,aAAa,CAKnB;IAEF,OAAO,CAAC,aAAa,CAKnB;IAEF,OAAO,CAAC,mBAAmB;IAwD3B,OAAO,CAAC,aAAa;IAarB,OAAO,CAAC,aAAa;IAqDrB,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,aAAa;IAkCrB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,cAAc;IAsBtB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,oBAAoB;IAmB5B,OAAO,CAAC,UAAU;IAkClB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,eAAe;IAavB,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,kBAAkB;IAe1B,OAAO,CAAC,eAAe;IA0BvB,OAAO,CAAC,sBAAsB;IAoC9B,OAAO,CAAC,kBAAkB;IA+B1B,OAAO,CAAC,kBAAkB;IAsDjB,MAAM;CA6Hf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD;AAED,eAAe,UAAU,CAAC"}

package/dist/components/moni-select.js

@@ -1,3 +1,9 @@
+/**
+ * @file components/moni-select.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -13,7 +19,58 @@ import './moni-icon.js';
 import './moni-progress.js';
 import './moni-select-option.js';
 /**
- * Custom Searchable Select Component with Subcategories, Animations, and Drawer/Sheet option.
+ * Material Design 3 Select (Dropdown) component.
+ *
+ * A fully-featured custom select dropdown with searchability, option groups,
+ * keyboard navigation, animation, and optional mobile drawer/sheet mode.
+ * Replaces the native `<select>` element with a fully styled, accessible
+ * M3-compliant alternative.
+ *
+ * **M3 spec reference:** `m3-docs/components/menus/specs.md` (dropdown menus)
+ *
+ * **Feature summary:**
+ * - Filled and outlined variants matching the M3 text field styles.
+ * - Floating label with the standard field-styles floating label animation.
+ * - Searchable mode: `searchable` attribute adds an inline filter input.
+ * - Option groups: slot `<moni-select-group>` elements for hierarchical options.
+ * - Mobile drawer: `drawer` attribute opens options in a `<moni-bottom-sheet>`
+ *   instead of a dropdown popup, ideal for touch UIs.
+ * - Keyboard navigation: Arrow keys, Enter, Escape, and Tab per ARIA combobox.
+ * - Loading state: `loading` shows an indeterminate circular progress.
+ * - Multi-value support: `multiple` enables multiple selection.
+ *
+ * **Option sources:**
+ * Options can be provided in two ways:
+ * 1. **Slotted `<moni-select-option>` elements** (default, recommended for SSR).
+ * 2. **`options` property** — a `DropdownNode[]` array for fully programmatic control.
+ *
+ * **Value binding:**
+ * The `value` property holds the currently selected option's value string.
+ * For multiple selection, `values` holds `string[]`. On change, a composed
+ * `'change'` event is fired.
+ *
+ * @fires change - Bubbles and is composed. Fired when the selected value changes.
+ *                 Read `element.value` (or `element.values` for `multiple`).
+ *
+ * @example
+ * ```html
+ * <moni-select label="Country" name="country" variant="outlined">
+ *   <moni-select-option value="us">United States</moni-select-option>
+ *   <moni-select-option value="gb">United Kingdom</moni-select-option>
+ *   <moni-select-option value="de">Germany</moni-select-option>
+ * </moni-select>
+ *
+ * <!-- Searchable select -->
+ * <moni-select label="Language" searchable>
+ *   <moni-select-option value="ts">TypeScript</moni-select-option>
+ *   <moni-select-option value="py">Python</moni-select-option>
+ * </moni-select>
+ * ```
+ *
+ * @slot default - `<moni-select-option>` or `<moni-select-group>` children.
+ *
+ * @csspart field    - The outer `.field` div container.
+ * @csspart dropdown - The floating option list container.
  */
 let MoniSelect = class MoniSelect extends MoniElement {
     constructor() {

package/dist/components/moni-shape.d.ts

@@ -19,7 +19,7 @@ export declare class MoniShape extends MoniElement {
     shapeRadius: string;
     color: 'primary' | 'secondary' | 'tertiary' | 'surface';
     static styles: import("lit").CSSResult[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/moni-side-sheet.d.ts

@@ -1,26 +1,63 @@
+/**
+ * @file components/moni-side-sheet.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
 import { PropertyValues } from 'lit';
 import { MoniElement } from './_base/index.js';
 import './moni-icon.js';
 import './moni-button.js';
 /**
- * Material Design 3 Side Sheet Component.
- * Can act as a standard (non-modal) side sheet or a modal side sheet.
- *
- * Attributes:
- *  - open:            boolean (reflect: true)
- *  - modal:           boolean (reflect: true)
- *  - side:            'right' | 'left' (default: 'right')
- *  - title:           Header text (default: '')
- *  - detached:        boolean (adds 16px/16dp margins/rounded corners all around)
- *  - showClose:       boolean (shows standard close button)
- *  - showBack:        boolean (shows standard back button)
- *  - noBorder:        boolean (removes borders, default: false)
- *  - withHandle:      boolean (shows grab handle and enables dragging to close/resize, default: false)
- *  - expanded-width:  string (width when expanded, default: '600px')
- *  - max-width:       string (maximum width restriction, default: '100%')
- *
- * Events:
- *  - close:       Fired when the sheet is closed/dismissed
+ * Material Design 3 Side Sheet component.
+ *
+ * Side sheets show supplementary content that is anchored to the left or right
+ * edge of the screen. They can be standard (inline with content) or modal
+ * (overlaying content with a scrim).
+ *
+ * **M3 spec reference:** `m3-docs/components/side-sheets/specs.md`
+ *
+ * **Dialog behavior:**
+ * Internally, this component uses the native HTML `<dialog>` element for robust
+ * accessibility, focus trapping, and top-layer rendering.
+ * - When `modal=true`, the sheet uses `dialog.showModal()`, rendering a scrim
+ *   backdrop and trapping focus. Pressing `Escape` closes it.
+ * - When `modal=false`, the sheet uses `dialog.show()` and remains interactive
+ *   alongside the main page content.
+ *
+ * **Drag & Resize (Moni feature):**
+ * Setting the `with-handle` attribute adds a draggable grab handle to the inner
+ * edge of the sheet. Users can click and drag this handle to resize the sheet's
+ * width up to the `max-width` limit. If the user drags the sheet towards the
+ * screen edge quickly or beyond a certain threshold, it automatically closes.
+ *
+ * **Animations:**
+ * Side sheets slide in from the specified `side` (`left` or `right`). The open
+ * and close animations are handled via CSS transitions tied to the `open` property.
+ *
+ * @fires close - Fired when the side sheet is completely closed (after animations
+ *                finish), either via the close button, scrim click, drag-to-close,
+ *                or `Escape` key.
+ *
+ * @example
+ * ```html
+ * <!-- Modal side sheet on the right -->
+ * <moni-side-sheet id="details-sheet" modal title="Item Details">
+ *   <p>Here is more information about the selected item.</p>
+ *   <div slot="footer">
+ *     <moni-button>Save</moni-button>
+ *   </div>
+ * </moni-side-sheet>
+ *
+ * <!-- Resizable, detached side sheet on the left -->
+ * <moni-side-sheet side="left" detached with-handle max-width="50vw">
+ *   <p>Navigation options</p>
+ * </moni-side-sheet>
+ * ```
+ *
+ * @slot default - Main body content.
+ * @slot header  - Custom header content (overrides `title`, close/back buttons remain).
+ * @slot footer  - Bottom-anchored action area.
  */
 export declare class MoniSideSheet extends MoniElement {
     open: boolean;
@@ -51,7 +88,7 @@ export declare class MoniSideSheet extends MoniElement {
     private _onBackClick;
     private _onDialogClick;
     static styles: import("lit").CSSResult[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/moni-side-sheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"moni-side-sheet.d.ts","sourceRoot":"","sources":["../../src/components/moni-side-sheet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AACxB,OAAO,kBAAkB,CAAC;AAE1B;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,aAAc,SAAQ,WAAW;IACD,IAAI,UAAS;IACb,KAAK,UAAS;IAC7B,IAAI,EAAE,OAAO,GAAG,MAAM,CAAW;IACjC,KAAK,SAAM;IACI,QAAQ,UAAS;IACO,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACf,UAAU,UAAS;IACpB,SAAS,UAAS;IAC7B,aAAa,SAAW;IAC7B,QAAQ,SAAM;IAElD,OAAO,CAAC,OAAO,CAAqB;IAErD,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,oBAAoB,CAAK;IACjC,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,cAAc;IAcb,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAyDlD,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,cAAc;IAkCtB,OAAO,CAAC,YAAY;IAiFpB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,cAAc;IAUtB,OAAgB,MAAM,4BAgMpB;IAEO,MAAM;CA0Df;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"moni-side-sheet.d.ts","sourceRoot":"","sources":["../../src/components/moni-side-sheet.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AACxB,OAAO,kBAAkB,CAAC;AAE1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,qBACa,aAAc,SAAQ,WAAW;IACD,IAAI,UAAS;IACb,KAAK,UAAS;IAC7B,IAAI,EAAE,OAAO,GAAG,MAAM,CAAW;IACjC,KAAK,SAAM;IACI,QAAQ,UAAS;IACO,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACf,UAAU,UAAS;IACpB,SAAS,UAAS;IAC7B,aAAa,SAAW;IAC7B,QAAQ,SAAM;IAElD,OAAO,CAAC,OAAO,CAAqB;IAErD,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,oBAAoB,CAAK;IACjC,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,cAAc;IAcb,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAyDlD,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,cAAc;IAkCtB,OAAO,CAAC,YAAY;IAiFpB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,cAAc;IAUtB,OAAgB,MAAM,4BAgMpB;IAEO,MAAM;CA0Df;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD;AAED,eAAe,aAAa,CAAC"}

package/dist/components/moni-side-sheet.js

@@ -1,3 +1,9 @@
+/**
+ * @file components/moni-side-sheet.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -10,24 +16,55 @@ import { MoniElement, sharedStyles } from './_base/index.js';
 import './moni-icon.js';
 import './moni-button.js';
 /**
- * Material Design 3 Side Sheet Component.
- * Can act as a standard (non-modal) side sheet or a modal side sheet.
+ * Material Design 3 Side Sheet component.
+ *
+ * Side sheets show supplementary content that is anchored to the left or right
+ * edge of the screen. They can be standard (inline with content) or modal
+ * (overlaying content with a scrim).
+ *
+ * **M3 spec reference:** `m3-docs/components/side-sheets/specs.md`
+ *
+ * **Dialog behavior:**
+ * Internally, this component uses the native HTML `<dialog>` element for robust
+ * accessibility, focus trapping, and top-layer rendering.
+ * - When `modal=true`, the sheet uses `dialog.showModal()`, rendering a scrim
+ *   backdrop and trapping focus. Pressing `Escape` closes it.
+ * - When `modal=false`, the sheet uses `dialog.show()` and remains interactive
+ *   alongside the main page content.
+ *
+ * **Drag & Resize (Moni feature):**
+ * Setting the `with-handle` attribute adds a draggable grab handle to the inner
+ * edge of the sheet. Users can click and drag this handle to resize the sheet's
+ * width up to the `max-width` limit. If the user drags the sheet towards the
+ * screen edge quickly or beyond a certain threshold, it automatically closes.
+ *
+ * **Animations:**
+ * Side sheets slide in from the specified `side` (`left` or `right`). The open
+ * and close animations are handled via CSS transitions tied to the `open` property.
+ *
+ * @fires close - Fired when the side sheet is completely closed (after animations
+ *                finish), either via the close button, scrim click, drag-to-close,
+ *                or `Escape` key.
+ *
+ * @example
+ * ```html
+ * <!-- Modal side sheet on the right -->
+ * <moni-side-sheet id="details-sheet" modal title="Item Details">
+ *   <p>Here is more information about the selected item.</p>
+ *   <div slot="footer">
+ *     <moni-button>Save</moni-button>
+ *   </div>
+ * </moni-side-sheet>
  *
- * Attributes:
- *  - open:            boolean (reflect: true)
- *  - modal:           boolean (reflect: true)
- *  - side:            'right' | 'left' (default: 'right')
- *  - title:           Header text (default: '')
- *  - detached:        boolean (adds 16px/16dp margins/rounded corners all around)
- *  - showClose:       boolean (shows standard close button)
- *  - showBack:        boolean (shows standard back button)
- *  - noBorder:        boolean (removes borders, default: false)
- *  - withHandle:      boolean (shows grab handle and enables dragging to close/resize, default: false)
- *  - expanded-width:  string (width when expanded, default: '600px')
- *  - max-width:       string (maximum width restriction, default: '100%')
+ * <!-- Resizable, detached side sheet on the left -->
+ * <moni-side-sheet side="left" detached with-handle max-width="50vw">
+ *   <p>Navigation options</p>
+ * </moni-side-sheet>
+ * ```
  *
- * Events:
- *  - close:       Fired when the sheet is closed/dismissed
+ * @slot default - Main body content.
+ * @slot header  - Custom header content (overrides `title`, close/back buttons remain).
+ * @slot footer  - Bottom-anchored action area.
  */
 let MoniSideSheet = class MoniSideSheet extends MoniElement {
     constructor() {

package/dist/components/moni-slider.d.ts

@@ -1,33 +1,64 @@
+/**
+ * @file components/moni-slider.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
 import { MoniElement } from './_base/index.js';
 import './moni-icon.js';
 /**
- * Slider that faithfully ports BeerCSS's `.slider` styles.
+ * Material Design 3 Slider component.
+ *
+ * Sliders allow users to select a single value or a range of values from a
+ * continuous or discrete scale.
+ *
+ * **M3 spec reference:** `m3-docs/components/sliders/specs.md`
+ *
+ * **Slider modes:**
+ * - **Continuous** (default) — Smooth drag between `min` and `max`. Use when
+ *   the exact value does not need to be defined by the user (e.g. volume).
+ * - **Discrete** — Set `step` to snap to discrete intervals. Tick marks
+ *   appear via the native `<datalist>` element in Chrome/Edge. Firefox does
+ *   not render datalist ticks for range inputs.
+ * - **Range** (`range` attribute) — Two thumbs that define a minimum and
+ *   maximum value within the slider's extent.
+ * - **Vertical** (`vertical` attribute) — 90° rotated slider.
+ *
+ * **Value label tooltip:**
+ * When `indicator` is set, the current value is displayed in a tooltip above
+ * (or below, via `indicator-placement`) the active thumb during focus/drag.
+ *
+ * **Tick marks:**
+ * - `ticks` attribute: adds datalist with marks at `min` and `max` only.
+ * - `tick-interval` attribute: generates datalist options at every N units
+ *   between `min` and `max`, creating visible tick marks at those positions.
+ *
+ * **Internal state management:**
+ * Uses `@state()` for `_value` and `_valueHigh` so the fill track width and
+ * tooltip position update reactively on every drag `input` event without
+ * waiting for the `change` event.
+ *
+ * @fires change - Bubbles and is composed. Fired when dragging ends and the
+ *                 value is committed. Read `element.value` for the new value.
+ * @fires input  - Fired on every drag step. Read `element.value` for the
+ *                 live value during drag.
+ *
+ * @example
+ * ```html
+ * <!-- Continuous slider -->
+ * <moni-slider name="volume" min="0" max="100" value="60"></moni-slider>
  *
- * Fixes:
- *  - Uses @state() for internal reactive values so CSS vars update on every input
- *  - Track visual (span) and tooltip positions update immediately on drag
+ * <!-- Discrete slider with ticks every 10 units -->
+ * <moni-slider step="10" tick-interval="10" indicator></moni-slider>
  *
- * M3 spec (`m3-docs/components/sliders/specs.md`):
- *  - Continuous slider: smooth drag between min/max.
- *  - Discrete slider: snap to `step` intervals; tick marks visible.
- *  - Tick marks: in Chrome/Edge, native `<datalist>` ticks render at every
- *    option value. In Firefox, the datalist ticks are not rendered for
- *    range inputs; consumers can use `tick-interval` to manually generate
- *    a visual fallback if needed (P3.4 — outside the scope of this release).
- *  - State layer: hover/focus state uses CSS `::before` overlay at 0.08/0.12
- *    opacity per M3 (handled by `interaction-styles.ts`).
+ * <!-- Range slider -->
+ * <moni-slider range min="0" max="100" value="20" value-high="80"></moni-slider>
+ * ```
  *
- * Attributes:
- *  - name, min, max, step, value, disabled
- *  - size:       tiny | small | medium (default) | large | extra
- *  - vertical:   present → rotated
- *  - range:      present → two thumbs
- *  - ticks:      present → datalist with min/max marks
- *  - tick-interval: number — when set, generates datalist options every
- *                    N units between min and max. Overrides `ticks`.
- *  - indicator:  present → show value tooltip on focus
- *  - indicator-placement: top (default) | bottom
- *  - inset-icon: Material Symbols name inside the colored track
+ * @csspart slider    - The outer slider container.
+ * @csspart track     - The track background.
+ * @csspart fill      - The filled portion of the track.
+ * @csspart indicator - The value label tooltip.
  */
 export declare class MoniSlider extends MoniElement {
     name: string;
@@ -62,7 +93,7 @@ export declare class MoniSlider extends MoniElement {
      */
     private _renderDatalist;
     static styles: import("lit").CSSResult[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/moni-slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"moni-slider.d.ts","sourceRoot":"","sources":["../../src/components/moni-slider.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBACa,UAAW,SAAQ,WAAW;IACb,IAAI,SAAM;IACV,GAAG,SAAO;IACV,GAAG,SAAS;IACZ,IAAI,SAAM;IAEvC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAQ;IACmB,SAAS,SAAM;IAErE,kBAAkB,EAAE,KAAK,GAAG,QAAQ,CAAS;IAE7C,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAY;IAGrB,KAAK,UAAS;IACd,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,SAAS,UAAS;IACK,UAAU,UAAS;IAEtF,8EAA8E;IACrE,OAAO,CAAC,MAAM,CAAQ;IACtB,OAAO,CAAC,SAAS,CAAQ;IAElC,IACI,KAAK,IACI,MAAM,CADgB;IACnC,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAAsB;IAEzC,IACI,QAAQ,IACI,MAAM,CADmB;IACzC,IAAI,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAyB;IAE/C,OAAO,CAAC,IAAI;IAOZ,OAAO,CAAC,QAAQ;IAUhB,OAAO,CAAC,SAAS;IAUjB;;;;;;OAMG;IACH,OAAO,CAAC,eAAe;IAsBvB,OAAgB,MAAM,4BA0MpB;IAEO,MAAM;CAkDf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"moni-slider.d.ts","sourceRoot":"","sources":["../../src/components/moni-slider.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,qBACa,UAAW,SAAQ,WAAW;IACb,IAAI,SAAM;IACV,GAAG,SAAO;IACV,GAAG,SAAS;IACZ,IAAI,SAAM;IAEvC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAQ;IACmB,SAAS,SAAM;IAErE,kBAAkB,EAAE,KAAK,GAAG,QAAQ,CAAS;IAE7C,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAY;IAGrB,KAAK,UAAS;IACd,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,SAAS,UAAS;IACK,UAAU,UAAS;IAEtF,8EAA8E;IACrE,OAAO,CAAC,MAAM,CAAQ;IACtB,OAAO,CAAC,SAAS,CAAQ;IAElC,IACI,KAAK,IACI,MAAM,CADgB;IACnC,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAAsB;IAEzC,IACI,QAAQ,IACI,MAAM,CADmB;IACzC,IAAI,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAyB;IAE/C,OAAO,CAAC,IAAI;IAOZ,OAAO,CAAC,QAAQ;IAUhB,OAAO,CAAC,SAAS;IAUjB;;;;;;OAMG;IACH,OAAO,CAAC,eAAe;IAsBvB,OAAgB,MAAM,4BA0MpB;IAEO,MAAM;CAkDf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD;AAED,eAAe,UAAU,CAAC"}

package/dist/components/moni-slider.js

@@ -1,3 +1,9 @@
+/**
+ * @file components/moni-slider.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -10,33 +16,58 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 import './moni-icon.js';
 /**
- * Slider that faithfully ports BeerCSS's `.slider` styles.
+ * Material Design 3 Slider component.
+ *
+ * Sliders allow users to select a single value or a range of values from a
+ * continuous or discrete scale.
+ *
+ * **M3 spec reference:** `m3-docs/components/sliders/specs.md`
+ *
+ * **Slider modes:**
+ * - **Continuous** (default) — Smooth drag between `min` and `max`. Use when
+ *   the exact value does not need to be defined by the user (e.g. volume).
+ * - **Discrete** — Set `step` to snap to discrete intervals. Tick marks
+ *   appear via the native `<datalist>` element in Chrome/Edge. Firefox does
+ *   not render datalist ticks for range inputs.
+ * - **Range** (`range` attribute) — Two thumbs that define a minimum and
+ *   maximum value within the slider's extent.
+ * - **Vertical** (`vertical` attribute) — 90° rotated slider.
+ *
+ * **Value label tooltip:**
+ * When `indicator` is set, the current value is displayed in a tooltip above
+ * (or below, via `indicator-placement`) the active thumb during focus/drag.
+ *
+ * **Tick marks:**
+ * - `ticks` attribute: adds datalist with marks at `min` and `max` only.
+ * - `tick-interval` attribute: generates datalist options at every N units
+ *   between `min` and `max`, creating visible tick marks at those positions.
+ *
+ * **Internal state management:**
+ * Uses `@state()` for `_value` and `_valueHigh` so the fill track width and
+ * tooltip position update reactively on every drag `input` event without
+ * waiting for the `change` event.
+ *
+ * @fires change - Bubbles and is composed. Fired when dragging ends and the
+ *                 value is committed. Read `element.value` for the new value.
+ * @fires input  - Fired on every drag step. Read `element.value` for the
+ *                 live value during drag.
+ *
+ * @example
+ * ```html
+ * <!-- Continuous slider -->
+ * <moni-slider name="volume" min="0" max="100" value="60"></moni-slider>
  *
- * Fixes:
- *  - Uses @state() for internal reactive values so CSS vars update on every input
- *  - Track visual (span) and tooltip positions update immediately on drag
+ * <!-- Discrete slider with ticks every 10 units -->
+ * <moni-slider step="10" tick-interval="10" indicator></moni-slider>
  *
- * M3 spec (`m3-docs/components/sliders/specs.md`):
- *  - Continuous slider: smooth drag between min/max.
- *  - Discrete slider: snap to `step` intervals; tick marks visible.
- *  - Tick marks: in Chrome/Edge, native `<datalist>` ticks render at every
- *    option value. In Firefox, the datalist ticks are not rendered for
- *    range inputs; consumers can use `tick-interval` to manually generate
- *    a visual fallback if needed (P3.4 — outside the scope of this release).
- *  - State layer: hover/focus state uses CSS `::before` overlay at 0.08/0.12
- *    opacity per M3 (handled by `interaction-styles.ts`).
+ * <!-- Range slider -->
+ * <moni-slider range min="0" max="100" value="20" value-high="80"></moni-slider>
+ * ```
  *
- * Attributes:
- *  - name, min, max, step, value, disabled
- *  - size:       tiny | small | medium (default) | large | extra
- *  - vertical:   present → rotated
- *  - range:      present → two thumbs
- *  - ticks:      present → datalist with min/max marks
- *  - tick-interval: number — when set, generates datalist options every
- *                    N units between min and max. Overrides `ticks`.
- *  - indicator:  present → show value tooltip on focus
- *  - indicator-placement: top (default) | bottom
- *  - inset-icon: Material Symbols name inside the colored track
+ * @csspart slider    - The outer slider container.
+ * @csspart track     - The track background.
+ * @csspart fill      - The filled portion of the track.
+ * @csspart indicator - The value label tooltip.
  */
 let MoniSlider = class MoniSlider extends MoniElement {
     constructor() {