@moni-labs/moni-ui 0.2.0 → 0.3.0

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

@@ -1,25 +1,92 @@
+/**
+ * @file components/moni-icon.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
 import { MoniElement } from './_base/index.js';
 /**
- * Visual-only icon.
+ * Visual-only icon component using Material Symbols variable font.
+ *
+ * Renders a Material Symbols glyph by its ligature name. The icon font
+ * must be loaded globally by the host document — it is not bundled with
+ * the component. Add the font via the `@moni-labs/moni-ui/styles` stylesheet
+ * or by including the Google Fonts CDN link.
+ *
+ * **Font rendering:**
+ * The icon uses `font-family: var(--font-icon)` which defaults to
+ * `'Material Symbols Rounded'`. Override `--font-icon-override` in the
+ * host document's `:root` to switch to a different icon set variant
+ * (e.g. `'Material Symbols Outlined'` or `'Material Symbols Sharp'`).
+ *
+ * **Variable font settings:**
+ * The default `font-variation-settings` is `'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24`.
+ * Setting the `filled` attribute switches to `'FILL' 1` for the solid icon variant.
+ *
+ * **Color inheritance:**
+ * The icon always inherits color from its parent via `color: inherit`, making it
+ * automatically adapt to button variants, chip selected states, list item active
+ * states, and other color-context containers.
+ *
+ * @example
+ * ```html
+ * <!-- Basic icon -->
+ * <moni-icon name="home"></moni-icon>
+ *
+ * <!-- Filled large icon -->
+ * <moni-icon name="favorite" size="large" filled></moni-icon>
  *
- * Renders a Material Symbols glyph by name. The font must be loaded
- * globally in the host document (see `@moni-labs/moni-ui/styles`).
+ * <!-- Custom SVG override via slot -->
+ * <moni-icon>
+ *   <svg slot="default" viewBox="0 0 24 24">...</svg>
+ * </moni-icon>
+ * ```
  *
- * Attributes:
- *  - name:   icon name from https://fonts.google.com/icons
- *  - size:   tiny | small | medium (default) | large | extra
- *  - filled: present → switches to the filled variant (font-variation-settings)
+ * @slot default - Fallback content when `name` is empty. Accepts `<svg>` or `<img>`
+ *                 elements which are sized to 100% of the icon box.
  *
- * Slots:
- *  - default: fallback text if no name is given
- *  - (also accepts slotted <svg> or <img> as override)
+ * @cssproperty --font-icon-override - Overrides the icon font family at the
+ *                                     document level. Set on `:root`.
  */
 export declare class MoniIcon extends MoniElement {
+    /**
+     * Material Symbols ligature name for the icon to render.
+     *
+     * Use the name exactly as shown on https://fonts.google.com/icons
+     * (e.g. `'home'`, `'settings'`, `'arrow_forward'`).
+     * When empty, the default slot is rendered instead.
+     *
+     * @default ''
+     */
     name: string;
+    /**
+     * Size of the icon bounding box.
+     *
+     * Maps to the `--_size` custom property:
+     * | Value      | Size     |
+     * |------------|----------|
+     * | `'tiny'`   | 1rem     |
+     * | `'small'`  | 1.25rem  |
+     * | `'medium'` | 1.5rem   |
+     * | `'large'`  | 1.75rem  |
+     * | `'extra'`  | 2rem     |
+     *
+     * @default 'medium'
+     */
     size: 'tiny' | 'small' | 'medium' | 'large' | 'extra';
+    /**
+     * When `true`, switches to the filled variant of the icon by setting
+     * `font-variation-settings: 'FILL' 1`.
+     *
+     * This works only with variable icon fonts that include the `FILL` axis
+     * (all Material Symbols variants do). It has no effect if a different
+     * icon font is loaded that does not support `FILL`.
+     *
+     * @default false
+     */
     filled: boolean;
     static styles: import("lit").CSSResult[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1 +1 @@
-{"version":3,"file":"moni-icon.d.ts","sourceRoot":"","sources":["../../src/components/moni-icon.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;GAcG;AACH,qBACa,QAAS,SAAQ,WAAW;IACX,IAAI,SAAM;IAEvC,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAY;IACrB,MAAM,UAAS;IAE3D,OAAgB,MAAM,4BAyDpB;IAEO,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"moni-icon.d.ts","sourceRoot":"","sources":["../../src/components/moni-icon.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qBACa,QAAS,SAAQ,WAAW;IACxC;;;;;;;;OAQG;IAC0B,IAAI,SAAM;IAEvC;;;;;;;;;;;;;OAaG;IAEH,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAY;IAEjE;;;;;;;;;OASG;IACyC,MAAM,UAAS;IAE3D,OAAgB,MAAM,4BAyDpB;IAEO,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD;AAED,eAAe,QAAQ,CAAC"}

package/dist/components/moni-icon.js

@@ -1,3 +1,9 @@
+/**
+ * @file components/moni-icon.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,25 +14,86 @@ import { html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 /**
- * Visual-only icon.
+ * Visual-only icon component using Material Symbols variable font.
+ *
+ * Renders a Material Symbols glyph by its ligature name. The icon font
+ * must be loaded globally by the host document — it is not bundled with
+ * the component. Add the font via the `@moni-labs/moni-ui/styles` stylesheet
+ * or by including the Google Fonts CDN link.
+ *
+ * **Font rendering:**
+ * The icon uses `font-family: var(--font-icon)` which defaults to
+ * `'Material Symbols Rounded'`. Override `--font-icon-override` in the
+ * host document's `:root` to switch to a different icon set variant
+ * (e.g. `'Material Symbols Outlined'` or `'Material Symbols Sharp'`).
+ *
+ * **Variable font settings:**
+ * The default `font-variation-settings` is `'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24`.
+ * Setting the `filled` attribute switches to `'FILL' 1` for the solid icon variant.
+ *
+ * **Color inheritance:**
+ * The icon always inherits color from its parent via `color: inherit`, making it
+ * automatically adapt to button variants, chip selected states, list item active
+ * states, and other color-context containers.
+ *
+ * @example
+ * ```html
+ * <!-- Basic icon -->
+ * <moni-icon name="home"></moni-icon>
+ *
+ * <!-- Filled large icon -->
+ * <moni-icon name="favorite" size="large" filled></moni-icon>
  *
- * Renders a Material Symbols glyph by name. The font must be loaded
- * globally in the host document (see `@moni-labs/moni-ui/styles`).
+ * <!-- Custom SVG override via slot -->
+ * <moni-icon>
+ *   <svg slot="default" viewBox="0 0 24 24">...</svg>
+ * </moni-icon>
+ * ```
  *
- * Attributes:
- *  - name:   icon name from https://fonts.google.com/icons
- *  - size:   tiny | small | medium (default) | large | extra
- *  - filled: present → switches to the filled variant (font-variation-settings)
+ * @slot default - Fallback content when `name` is empty. Accepts `<svg>` or `<img>`
+ *                 elements which are sized to 100% of the icon box.
  *
- * Slots:
- *  - default: fallback text if no name is given
- *  - (also accepts slotted <svg> or <img> as override)
+ * @cssproperty --font-icon-override - Overrides the icon font family at the
+ *                                     document level. Set on `:root`.
  */
 let MoniIcon = class MoniIcon extends MoniElement {
     constructor() {
         super(...arguments);
+        /**
+         * Material Symbols ligature name for the icon to render.
+         *
+         * Use the name exactly as shown on https://fonts.google.com/icons
+         * (e.g. `'home'`, `'settings'`, `'arrow_forward'`).
+         * When empty, the default slot is rendered instead.
+         *
+         * @default ''
+         */
         this.name = '';
+        /**
+         * Size of the icon bounding box.
+         *
+         * Maps to the `--_size` custom property:
+         * | Value      | Size     |
+         * |------------|----------|
+         * | `'tiny'`   | 1rem     |
+         * | `'small'`  | 1.25rem  |
+         * | `'medium'` | 1.5rem   |
+         * | `'large'`  | 1.75rem  |
+         * | `'extra'`  | 2rem     |
+         *
+         * @default 'medium'
+         */
         this.size = 'medium';
+        /**
+         * When `true`, switches to the filled variant of the icon by setting
+         * `font-variation-settings: 'FILL' 1`.
+         *
+         * This works only with variable icon fonts that include the `FILL` axis
+         * (all Material Symbols variants do). It has no effect if a different
+         * icon font is loaded that does not support `FILL`.
+         *
+         * @default false
+         */
         this.filled = false;
     }
     static { this.styles = [

package/dist/components/moni-list-item.d.ts

@@ -1,35 +1,66 @@
+/**
+ * @file components/moni-list-item.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
 import { MoniElement } from './_base/index.js';
 import './moni-icon.js';
 /**
- * Material 3 List Item (`m3-docs/components/lists/specs.md`).
- *
- * One row in a `<moni-list>`. Supports up to 3 lines of text:
- *  - line 1: headline (required).
- *  - line 2: supporting text (optional).
- *  - line 3: trailing meta text (optional).
- *
- * Plus optional leading/trailing icons or avatars.
- *
- * M3 measurements:
- *  - Min height: 56dp (1-line), 72dp (2-line), 88dp (3-line).
- *  - Horizontal padding: 16dp.
- *  - Vertical padding: 8dp top/bottom (so 1-line is 56dp tall).
- *  - Leading icon/avatar size: 24dp.
- *
- * Attributes:
- *  - lines: 1 (default) | 2 | 3
- *  - icon:   Material Symbols name (leading icon)
- *  - avatar: URL for a leading image
- *  - trailing-icon: Material Symbols name (trailing icon)
- *  - active:   present → background uses secondary-container
- *  - disabled: present → opacity 38%, cursor not-allowed
- *  - href:     present → renders as <a>; otherwise <button>
- *
- * Slots:
- *  - default:   headline (line 1)
- *  - supporting:line 2 text
- *  - meta:      line 3 text
- *  - trailing-meta: trailing small text (right side)
+ * Material Design 3 List Item component.
+ *
+ * A single row within a `<moni-list>`. List items display a headline and
+ * optional supporting text, metadata, icons, or avatars.
+ *
+ * **M3 spec reference:** `m3-docs/components/lists/specs.md`
+ *
+ * **Line configurations:**
+ * The `lines` attribute configures the layout and minimum height of the item:
+ * - `lines="1"` (default) — 56dp min height. Only the headline slot is shown.
+ * - `lines="2"` — 72dp min height. Shows headline and supporting text.
+ * - `lines="3"` — 88dp min height. Shows headline, supporting text, and meta text.
+ *
+ * **Interactive behavior:**
+ * By default, items render as `<button>` elements, gaining the M3 state layer
+ * (hover, focus, and press ripple effects).
+ * If the `href` attribute is provided, the item internally renders as an `<a>`
+ * element, allowing native link routing and interactions while preserving the
+ * list item styling.
+ *
+ * **Visual elements:**
+ * - `icon` (attribute) — Material Symbol name for the leading icon (24dp).
+ * - `avatar` (attribute) — URL for a leading circular image (40dp).
+ * - `trailing-icon` (attribute) — Material Symbol name for the trailing icon.
+ *
+ * @example
+ * ```html
+ * <!-- 1-line item with icon -->
+ * <moni-list-item icon="inbox">
+ *   Inbox
+ * </moni-list-item>
+ *
+ * <!-- 2-line item with avatar and trailing meta -->
+ * <moni-list-item lines="2" avatar="/user.jpg">
+ *   Ali Connors
+ *   <span slot="supporting">Brunch this weekend?</span>
+ *   <span slot="trailing-meta">10 min</span>
+ * </moni-list-item>
+ *
+ * <!-- Link item -->
+ * <moni-list-item href="/settings" icon="settings">
+ *   Settings
+ * </moni-list-item>
+ * ```
+ *
+ * @slot default       - Headline text (Line 1).
+ * @slot supporting    - Supporting text (Line 2, requires `lines>=2`).
+ * @slot meta          - Additional meta text (Line 3, requires `lines=3`).
+ * @slot trailing-meta - Small text displayed on the far right edge.
+ *
+ * @csspart item          - The outer `<button>` or `<a>` container.
+ * @csspart leading-icon  - Container for the leading icon/avatar.
+ * @csspart text          - Container for the multi-line text block.
+ * @csspart trailing-icon - Container for the trailing icon.
  */
 export declare class MoniListItem extends MoniElement {
     lines: 1 | 2 | 3;
@@ -40,7 +71,7 @@ export declare class MoniListItem extends MoniElement {
     disabled: boolean;
     href: string;
     static styles: import("lit").CSSResult[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/moni-list-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"moni-list-item.d.ts","sourceRoot":"","sources":["../../src/components/moni-list-item.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBACa,YAAa,SAAQ,WAAW;IAE5C,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAK;IACQ,IAAI,SAAM;IACV,MAAM,SAAM;IAEzC,YAAY,SAAM;IAC0B,MAAM,UAAS;IACf,QAAQ,UAAS;IAChC,IAAI,SAAM;IAEvC,OAAgB,MAAM,4BAoHpB;IAEO,MAAM;CA+Cf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,YAAY,CAAC;KAC/B;CACD;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"moni-list-item.d.ts","sourceRoot":"","sources":["../../src/components/moni-list-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,qBACa,YAAa,SAAQ,WAAW;IAE5C,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAK;IACQ,IAAI,SAAM;IACV,MAAM,SAAM;IAEzC,YAAY,SAAM;IAC0B,MAAM,UAAS;IACf,QAAQ,UAAS;IAChC,IAAI,SAAM;IAEvC,OAAgB,MAAM,4BAoHpB;IAEO,MAAM;CA+Cf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,YAAY,CAAC;KAC/B;CACD;AAED,eAAe,YAAY,CAAC"}

package/dist/components/moni-list-item.js

@@ -1,3 +1,9 @@
+/**
+ * @file components/moni-list-item.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);
@@ -9,35 +15,60 @@ import { customElement, property } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 import './moni-icon.js';
 /**
- * Material 3 List Item (`m3-docs/components/lists/specs.md`).
+ * Material Design 3 List Item component.
+ *
+ * A single row within a `<moni-list>`. List items display a headline and
+ * optional supporting text, metadata, icons, or avatars.
+ *
+ * **M3 spec reference:** `m3-docs/components/lists/specs.md`
+ *
+ * **Line configurations:**
+ * The `lines` attribute configures the layout and minimum height of the item:
+ * - `lines="1"` (default) — 56dp min height. Only the headline slot is shown.
+ * - `lines="2"` — 72dp min height. Shows headline and supporting text.
+ * - `lines="3"` — 88dp min height. Shows headline, supporting text, and meta text.
+ *
+ * **Interactive behavior:**
+ * By default, items render as `<button>` elements, gaining the M3 state layer
+ * (hover, focus, and press ripple effects).
+ * If the `href` attribute is provided, the item internally renders as an `<a>`
+ * element, allowing native link routing and interactions while preserving the
+ * list item styling.
+ *
+ * **Visual elements:**
+ * - `icon` (attribute) — Material Symbol name for the leading icon (24dp).
+ * - `avatar` (attribute) — URL for a leading circular image (40dp).
+ * - `trailing-icon` (attribute) — Material Symbol name for the trailing icon.
  *
- * One row in a `<moni-list>`. Supports up to 3 lines of text:
- *  - line 1: headline (required).
- *  - line 2: supporting text (optional).
- *  - line 3: trailing meta text (optional).
+ * @example
+ * ```html
+ * <!-- 1-line item with icon -->
+ * <moni-list-item icon="inbox">
+ *   Inbox
+ * </moni-list-item>
  *
- * Plus optional leading/trailing icons or avatars.
+ * <!-- 2-line item with avatar and trailing meta -->
+ * <moni-list-item lines="2" avatar="/user.jpg">
+ *   Ali Connors
+ *   <span slot="supporting">Brunch this weekend?</span>
+ *   <span slot="trailing-meta">10 min</span>
+ * </moni-list-item>
  *
- * M3 measurements:
- *  - Min height: 56dp (1-line), 72dp (2-line), 88dp (3-line).
- *  - Horizontal padding: 16dp.
- *  - Vertical padding: 8dp top/bottom (so 1-line is 56dp tall).
- *  - Leading icon/avatar size: 24dp.
+ * <!-- Link item -->
+ * <moni-list-item href="/settings" icon="settings">
+ *   Settings
+ * </moni-list-item>
+ * ```
  *
- * Attributes:
- *  - lines: 1 (default) | 2 | 3
- *  - icon:   Material Symbols name (leading icon)
- *  - avatar: URL for a leading image
- *  - trailing-icon: Material Symbols name (trailing icon)
- *  - active:   present → background uses secondary-container
- *  - disabled: present → opacity 38%, cursor not-allowed
- *  - href:     present → renders as <a>; otherwise <button>
+ * @slot default       - Headline text (Line 1).
+ * @slot supporting    - Supporting text (Line 2, requires `lines>=2`).
+ * @slot meta          - Additional meta text (Line 3, requires `lines=3`).
+ * @slot trailing-meta - Small text displayed on the far right edge.
  *
- * Slots:
- *  - default:   headline (line 1)
- *  - supporting:line 2 text
- *  - meta:      line 3 text
- *  - trailing-meta: trailing small text (right side)
+ * @csspart item          - The outer `<button>` or `<a>` container.
+ * @csspart leading-icon  - Container for the leading icon/avatar.
+ * @csspart text          - Container for the multi-line text block.
+ * @csspart trailing-icon - Container for the trailing icon.
  */
 let MoniListItem = class MoniListItem extends MoniElement {
     constructor() {

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

@@ -1,27 +1,51 @@
+/**
+ * @file components/moni-list.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
 import { MoniElement } from './_base/index.js';
 /**
- * Material 3 List (`m3-docs/components/lists/specs.md`).
+ * Material Design 3 List component.
+ *
+ * Lists are continuous, vertical indexes of text or images. They are
+ * container elements that provide structural grouping and optional
+ * divider lines for `<moni-list-item>` children.
+ *
+ * **M3 spec reference:** `m3-docs/components/lists/specs.md`
+ *
+ * **Container role:**
+ * The list itself does not apply padding or margins to its children. Spacing
+ * and internal padding are controlled entirely by the `<moni-list-item>`
+ * elements themselves to ensure proper hit targets and alignment.
  *
- * A list is a continuous vertical index of text and images. The
- * container itself is purely structural (no padding); spacing and
- * dividers are controlled by `<moni-list-item>` children.
+ * **Variants:**
+ * - `default` (empty string) — A clean, borderless list container.
+ * - `border` — Adds a bottom border to the list and displays horizontal
+ *   dividers (`outline-variant` color) between list items.
  *
- * Two visual variants:
- *  - **default**: 8dp top/bottom padding between items (handled by items).
- *  - **border**:  dividers drawn between items.
+ * @example
+ * ```html
+ * <!-- Standard list -->
+ * <moni-list>
+ *   <moni-list-item headline="Item 1"></moni-list-item>
+ *   <moni-list-item headline="Item 2"></moni-list-item>
+ * </moni-list>
  *
- * Attributes:
- *  - variant: '' (default) | border
- *  - rounded: when set, items use a 4dp corner radius.
+ * <!-- List with dividers and rounded items -->
+ * <moni-list variant="border" rounded>
+ *   <moni-list-item icon="inbox" headline="Inbox"></moni-list-item>
+ *   <moni-list-item icon="send" headline="Sent"></moni-list-item>
+ * </moni-list>
+ * ```
  *
- * Slots:
- *  - default: <moni-list-item> children.
+ * @slot default - `<moni-list-item>` elements.
  */
 export declare class MoniList extends MoniElement {
     variant: '' | 'border';
     rounded: boolean;
     static styles: import("lit").CSSResult[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1 +1 @@
-{"version":3,"file":"moni-list.d.ts","sourceRoot":"","sources":["../../src/components/moni-list.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,QAAS,SAAQ,WAAW;IACX,OAAO,EAAE,EAAE,GAAG,QAAQ,CAAM;IACb,OAAO,UAAS;IAE5D,OAAgB,MAAM,4BAkBpB;IAEO,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"moni-list.d.ts","sourceRoot":"","sources":["../../src/components/moni-list.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,qBACa,QAAS,SAAQ,WAAW;IACX,OAAO,EAAE,EAAE,GAAG,QAAQ,CAAM;IACb,OAAO,UAAS;IAE5D,OAAgB,MAAM,4BAkBpB;IAEO,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD;AAED,eAAe,QAAQ,CAAC"}

package/dist/components/moni-list.js

@@ -1,3 +1,9 @@
+/**
+ * @file components/moni-list.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,22 +14,40 @@ import { html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 /**
- * Material 3 List (`m3-docs/components/lists/specs.md`).
+ * Material Design 3 List component.
+ *
+ * Lists are continuous, vertical indexes of text or images. They are
+ * container elements that provide structural grouping and optional
+ * divider lines for `<moni-list-item>` children.
+ *
+ * **M3 spec reference:** `m3-docs/components/lists/specs.md`
+ *
+ * **Container role:**
+ * The list itself does not apply padding or margins to its children. Spacing
+ * and internal padding are controlled entirely by the `<moni-list-item>`
+ * elements themselves to ensure proper hit targets and alignment.
  *
- * A list is a continuous vertical index of text and images. The
- * container itself is purely structural (no padding); spacing and
- * dividers are controlled by `<moni-list-item>` children.
+ * **Variants:**
+ * - `default` (empty string) — A clean, borderless list container.
+ * - `border` — Adds a bottom border to the list and displays horizontal
+ *   dividers (`outline-variant` color) between list items.
  *
- * Two visual variants:
- *  - **default**: 8dp top/bottom padding between items (handled by items).
- *  - **border**:  dividers drawn between items.
+ * @example
+ * ```html
+ * <!-- Standard list -->
+ * <moni-list>
+ *   <moni-list-item headline="Item 1"></moni-list-item>
+ *   <moni-list-item headline="Item 2"></moni-list-item>
+ * </moni-list>
  *
- * Attributes:
- *  - variant: '' (default) | border
- *  - rounded: when set, items use a 4dp corner radius.
+ * <!-- List with dividers and rounded items -->
+ * <moni-list variant="border" rounded>
+ *   <moni-list-item icon="inbox" headline="Inbox"></moni-list-item>
+ *   <moni-list-item icon="send" headline="Sent"></moni-list-item>
+ * </moni-list>
+ * ```
  *
- * Slots:
- *  - default: <moni-list-item> children.
+ * @slot default - `<moni-list-item>` elements.
  */
 let MoniList = class MoniList extends MoniElement {
     constructor() {

package/dist/components/moni-loading-indicator.d.ts

@@ -1,17 +1,44 @@
+/**
+ * @file components/moni-loading-indicator.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
 import { MoniElement } from './_base/index.js';
 /**
- * Shape-shifting indeterminate loading indicator based on Material 3 Expressive spec.
+ * Material Design 3 Loading Indicator component.
+ *
+ * An indeterminate loading indicator that visually represents an unspecified
+ * wait time. Unlike standard circular spinners, this component uses a morphing
+ * polygon animation that shifts between shapes (circle, rounded square, etc.)
+ * in accordance with the high-fidelity M3 Expressive motion specifications.
+ *
+ * **Variants:**
+ * - `uncontained` (default) — A standalone morphing shape that inherits color
+ *   from its text context (or defaults to `primary`).
+ * - `contained` — The morphing shape is placed inside a circular container
+ *   with a distinct background color, useful for high-contrast loading states
+ *   or overlaying imagery.
+ *
+ * **Animation & Accessibility:**
+ * The component manages its own SVG `<animate>` tags. The animation is
+ * automatically started/stopped via `connectedCallback`/`disconnectedCallback`
+ * to save CPU cycles when the element is off-screen. It applies standard ARIA
+ * roles (`role="progressbar"`) and value attributes to ensure screen readers
+ * identify it correctly as an indeterminate loading state.
+ *
+ * @example
+ * ```html
+ * <!-- Uncontained indicator -->
+ * <moni-loading-indicator></moni-loading-indicator>
  *
- * Attributes:
- *  - variant: 'uncontained' (default) | 'contained'
+ * <!-- Contained indicator (default container is secondary-container) -->
+ * <moni-loading-indicator variant="contained"></moni-loading-indicator>
+ * ```
  *
- * CSS custom properties for customization:
- *  - --moni-loading-indicator-size: Size of the active indicator (default: 2.375rem)
- *  - --moni-loading-indicator-active-color: Active indicator color in uncontained mode (default: var(--primary))
- *  - --moni-loading-indicator-contained-active-color: Active indicator color in contained mode (default: var(--on-primary-container))
- *  - --moni-loading-indicator-contained-container-color: Background color of container in contained mode (default: var(--secondary-container))
- *  - --moni-loading-indicator-container-shape: Border radius of container in contained mode (default: 9999px)
- *  - --moni-loading-indicator-container-size: Container size (default: 3rem)
+ * @csspart container - The outer `.container` wrapper.
+ * @csspart svg       - The inner `<svg>` element.
+ * @csspart shape     - The `<path>` element that morphs.
  */
 export declare class MoniLoadingIndicator extends MoniElement {
     variant: 'uncontained' | 'contained';
@@ -21,7 +48,7 @@ export declare class MoniLoadingIndicator extends MoniElement {
     protected firstUpdated(): void;
     private _toggleAnimation;
     static styles: import("lit").CSSResult[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/moni-loading-indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"moni-loading-indicator.d.ts","sourceRoot":"","sources":["../../src/components/moni-loading-indicator.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAG7D;;;;;;;;;;;;;GAaG;AACH,qBACa,oBAAqB,SAAQ,WAAW;IAEpD,OAAO,EAAE,aAAa,GAAG,WAAW,CAAiB;IAEhC,OAAO,CAAC,UAAU,CAAC,CAAc;IAE7C,iBAAiB;IAQjB,oBAAoB;cAKV,YAAY;IAI/B,OAAO,CAAC,gBAAgB;IAMxB,OAAgB,MAAM,4BAuHpB;IAEO,MAAM;CASf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,wBAAwB,EAAE,oBAAoB,CAAC;KAC/C;CACD;AAED,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"moni-loading-indicator.d.ts","sourceRoot":"","sources":["../../src/components/moni-loading-indicator.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAG7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBACa,oBAAqB,SAAQ,WAAW;IAEpD,OAAO,EAAE,aAAa,GAAG,WAAW,CAAiB;IAEhC,OAAO,CAAC,UAAU,CAAC,CAAc;IAE7C,iBAAiB;IAQjB,oBAAoB;cAKV,YAAY;IAI/B,OAAO,CAAC,gBAAgB;IAMxB,OAAgB,MAAM,4BAuHpB;IAEO,MAAM;CASf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,wBAAwB,EAAE,oBAAoB,CAAC;KAC/C;CACD;AAED,eAAe,oBAAoB,CAAC"}