@moni-labs/moni-ui 0.2.0 → 0.3.0

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

@@ -1,34 +1,121 @@
+/**
+ * @file components/moni-switch.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
 import { MoniElement } from './_base/index.js';
 import './moni-icon.js';
 /**
- * Switch styled per Material Design 3 specs.
- *
- * M3 measurements (`m3-docs/components/switch/specs.md`):
- *  - Track: 52dp × 32dp, 2dp outline, full corner radius
- *  - Handle (thumb): 16dp unselected, 24dp selected, 28dp pressed
- *  - State layer: 40dp circular ripple on hover/focus/pressed
- *  - Icon (optional): 16dp on selected and/or unselected handle
- *
- * Attributes:
- *  - label:    text label (displayed to the right of the switch)
- *  - checked:  present
- *  - disabled: present
- *  - icon:     present → renders check/close icons inside the thumb
- *  - name:     forwarded to input.name
- *  - value:    forwarded to input.value
+ * Material Design 3 Switch component.
+ *
+ * Switches toggle the state of a single setting on or off. They are the
+ * binary on/off equivalent of a checkbox, but optimized for toggling a
+ * single state rather than selecting from a list.
+ *
+ * **M3 spec reference:** `m3-docs/components/switch/specs.md`
+ *
+ * **M3 measurements:**
+ * - Track: 52dp × 32dp, 2dp border, full-radius pill shape.
+ * - Handle (thumb): 16dp unselected → 24dp selected → 28dp pressed.
+ * - State layer: 40dp circular ripple on hover/focus/pressed states.
+ * - Icon (optional): 16dp icon rendered inside the thumb when `icon` is set.
+ *
+ * **Visual architecture:**
+ * Like `<moni-checkbox>`, the native `<input type="checkbox" role="switch">`
+ * occupies real layout space but is visually hidden via `opacity: 0`. Two
+ * `<span>` pseudo-elements render the track (`::after`) and thumb (`::before`).
+ * When `icon=true`, `<i>` elements render `close` and `check` glyphs inside
+ * the thumb, with visibility toggled via CSS based on the checked state.
+ *
+ * @fires change - Bubbles and is composed. Fired when the switch is toggled.
+ *                 Read `element.checked` for the new state.
+ *
+ * @example
+ * ```html
+ * <moni-switch label="Dark mode" name="dark-mode"></moni-switch>
+ * <moni-switch icon checked label="Notifications"></moni-switch>
+ *
+ * <script>
+ *   document.querySelector('moni-switch').addEventListener('change', (e) => {
+ *     console.log('enabled:', e.target.checked);
+ *   });
+ * </script>
+ * ```
+ *
+ * @csspart switch - The outer `<label>` element containing the switch.
  */
 export declare class MoniSwitch extends MoniElement {
+    /**
+     * Text label displayed to the right of the switch.
+     *
+     * When non-empty, renders as a padded text span after the track.
+     * When empty, the default slot is rendered, allowing custom HTML labels.
+     *
+     * @default ''
+     */
     label: string;
+    /**
+     * Whether the switch is in the "on" (checked) state.
+     *
+     * When `true`:
+     * - Track fills with `--primary` color.
+     * - Thumb grows from 16dp to 24dp and slides to the trailing edge.
+     * - Thumb color changes to `--on-primary`.
+     *
+     * @default false
+     */
     checked: boolean;
+    /**
+     * When `true`, the switch is non-interactive and renders at 50% opacity.
+     *
+     * @default false
+     */
     disabled: boolean;
+    /**
+     * When `true`, renders icon glyphs inside the thumb.
+     *
+     * Uses Material Symbols ligatures:
+     * - Unchecked state: `close` icon.
+     * - Checked state: `check` icon.
+     *
+     * The icon size (16dp) is set via the `--_thumb` CSS custom property.
+     *
+     * @default false
+     */
     icon: boolean;
+    /**
+     * Forwarded to the native `<input name>` attribute for form participation.
+     *
+     * @default ''
+     */
     name: string;
+    /**
+     * Forwarded to the native `<input value>` attribute.
+     * The value submitted in a form when this switch is checked.
+     *
+     * @default ''
+     */
     value: string;
+    /** Direct reference to the native input element for programmatic access. */
     private _input;
+    /**
+     * Syncs `checked` and `disabled` imperatively to the native input after render.
+     *
+     * @param changed - Map of changed property names to their previous values.
+     */
     updated(changed: Map<string, unknown>): void;
+    /**
+     * Handles the native input `change` event.
+     *
+     * Updates `this.checked` and re-dispatches a composed `'change'` event
+     * so it bubbles across shadow DOM boundaries.
+     *
+     * @param e - The native `change` event from the hidden `<input>`.
+     */
     private _onChange;
     static styles: import("lit").CSSResult[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1 +1 @@
-{"version":3,"file":"moni-switch.d.ts","sourceRoot":"","sources":["../../src/components/moni-switch.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,UAAW,SAAQ,WAAW;IACb,KAAK,SAAM;IACI,OAAO,UAAS;IAChB,QAAQ,UAAS;IACjB,IAAI,UAAS;IAC5B,IAAI,SAAM;IACV,KAAK,SAAM;IAExB,OAAO,CAAC,MAAM,CAAoB;IAEzC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAO9C,OAAO,CAAC,SAAS;IAKjB,OAAgB,MAAM,4BAiKpB;IAEO,MAAM;CAmBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"moni-switch.d.ts","sourceRoot":"","sources":["../../src/components/moni-switch.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBACa,UAAW,SAAQ,WAAW;IAC1C;;;;;;;OAOG;IAC0B,KAAK,SAAM;IAExC;;;;;;;;;OASG;IACyC,OAAO,UAAS;IAE5D;;;;OAIG;IACyC,QAAQ,UAAS;IAE7D;;;;;;;;;;OAUG;IACyC,IAAI,UAAS;IAEzD;;;;OAIG;IAC0B,IAAI,SAAM;IAEvC;;;;;OAKG;IAC0B,KAAK,SAAM;IAExC,4EAA4E;IAC5D,OAAO,CAAC,MAAM,CAAoB;IAElD;;;;OAIG;IACM,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAO9C;;;;;;;OAOG;IACH,OAAO,CAAC,SAAS;IAKjB,OAAgB,MAAM,4BAiKpB;IAEO,MAAM;CAmBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD;AAED,eAAe,UAAU,CAAC"}

package/dist/components/moni-switch.js

@@ -1,3 +1,9 @@
+/**
+ * @file components/moni-switch.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,32 +16,104 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 import './moni-icon.js';
 /**
- * Switch styled per Material Design 3 specs.
+ * Material Design 3 Switch component.
+ *
+ * Switches toggle the state of a single setting on or off. They are the
+ * binary on/off equivalent of a checkbox, but optimized for toggling a
+ * single state rather than selecting from a list.
+ *
+ * **M3 spec reference:** `m3-docs/components/switch/specs.md`
+ *
+ * **M3 measurements:**
+ * - Track: 52dp × 32dp, 2dp border, full-radius pill shape.
+ * - Handle (thumb): 16dp unselected → 24dp selected → 28dp pressed.
+ * - State layer: 40dp circular ripple on hover/focus/pressed states.
+ * - Icon (optional): 16dp icon rendered inside the thumb when `icon` is set.
+ *
+ * **Visual architecture:**
+ * Like `<moni-checkbox>`, the native `<input type="checkbox" role="switch">`
+ * occupies real layout space but is visually hidden via `opacity: 0`. Two
+ * `<span>` pseudo-elements render the track (`::after`) and thumb (`::before`).
+ * When `icon=true`, `<i>` elements render `close` and `check` glyphs inside
+ * the thumb, with visibility toggled via CSS based on the checked state.
+ *
+ * @fires change - Bubbles and is composed. Fired when the switch is toggled.
+ *                 Read `element.checked` for the new state.
+ *
+ * @example
+ * ```html
+ * <moni-switch label="Dark mode" name="dark-mode"></moni-switch>
+ * <moni-switch icon checked label="Notifications"></moni-switch>
  *
- * M3 measurements (`m3-docs/components/switch/specs.md`):
- *  - Track: 52dp × 32dp, 2dp outline, full corner radius
- *  - Handle (thumb): 16dp unselected, 24dp selected, 28dp pressed
- *  - State layer: 40dp circular ripple on hover/focus/pressed
- *  - Icon (optional): 16dp on selected and/or unselected handle
+ * <script>
+ *   document.querySelector('moni-switch').addEventListener('change', (e) => {
+ *     console.log('enabled:', e.target.checked);
+ *   });
+ * </script>
+ * ```
  *
- * Attributes:
- *  - label:    text label (displayed to the right of the switch)
- *  - checked:  present
- *  - disabled: present
- *  - icon:     present → renders check/close icons inside the thumb
- *  - name:     forwarded to input.name
- *  - value:    forwarded to input.value
+ * @csspart switch - The outer `<label>` element containing the switch.
  */
 let MoniSwitch = class MoniSwitch extends MoniElement {
     constructor() {
         super(...arguments);
+        /**
+         * Text label displayed to the right of the switch.
+         *
+         * When non-empty, renders as a padded text span after the track.
+         * When empty, the default slot is rendered, allowing custom HTML labels.
+         *
+         * @default ''
+         */
         this.label = '';
+        /**
+         * Whether the switch is in the "on" (checked) state.
+         *
+         * When `true`:
+         * - Track fills with `--primary` color.
+         * - Thumb grows from 16dp to 24dp and slides to the trailing edge.
+         * - Thumb color changes to `--on-primary`.
+         *
+         * @default false
+         */
         this.checked = false;
+        /**
+         * When `true`, the switch is non-interactive and renders at 50% opacity.
+         *
+         * @default false
+         */
         this.disabled = false;
+        /**
+         * When `true`, renders icon glyphs inside the thumb.
+         *
+         * Uses Material Symbols ligatures:
+         * - Unchecked state: `close` icon.
+         * - Checked state: `check` icon.
+         *
+         * The icon size (16dp) is set via the `--_thumb` CSS custom property.
+         *
+         * @default false
+         */
         this.icon = false;
+        /**
+         * Forwarded to the native `<input name>` attribute for form participation.
+         *
+         * @default ''
+         */
         this.name = '';
+        /**
+         * Forwarded to the native `<input value>` attribute.
+         * The value submitted in a form when this switch is checked.
+         *
+         * @default ''
+         */
         this.value = '';
     }
+    /**
+     * Syncs `checked` and `disabled` imperatively to the native input after render.
+     *
+     * @param changed - Map of changed property names to their previous values.
+     */
     updated(changed) {
         if (this._input) {
             if (changed.has('checked'))
@@ -44,6 +122,14 @@ let MoniSwitch = class MoniSwitch extends MoniElement {
                 this._input.disabled = this.disabled;
         }
     }
+    /**
+     * Handles the native input `change` event.
+     *
+     * Updates `this.checked` and re-dispatches a composed `'change'` event
+     * so it bubbles across shadow DOM boundaries.
+     *
+     * @param e - The native `change` event from the hidden `<input>`.
+     */
     _onChange(e) {
         this.checked = e.target.checked;
         this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));

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

@@ -1,14 +1,41 @@
+/**
+ * @file components/moni-tab.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
 import { MoniElement } from './_base/index.js';
 import './moni-icon.js';
 /**
- * Visual-only tab. Renders an `<a>` styled with the BeerCSS `.tabs > a`
- * helper.
+ * Material Design 3 Tab component.
+ *
+ * An individual interactive tab element designed to be placed inside a
+ * `<moni-tabs>` container. Tabs organize content across different screens,
+ * data sets, and other interactions.
+ *
+ * **M3 spec reference:** `m3-docs/components/tabs/specs.md`
+ *
+ * **Visual layout & interaction:**
+ * Internally renders as an `<a>` element to support native link behavior when
+ * an `href` is provided, but behaves visually as a tab button. It displays a
+ * text label and an optional Material icon. If the parent `<moni-tabs>` has the
+ * `vertical` attribute set, the layout automatically adjusts to stack the icon
+ * above the text.
+ *
+ * **State:**
+ * The `active` attribute highlights the tab, applying the primary color to the
+ * text and rendering the active indicator line (handled via CSS in the parent
+ * container or pseudo-elements).
+ *
+ * @example
+ * ```html
+ * <moni-tabs>
+ *   <moni-tab active icon="home" label="Home"></moni-tab>
+ *   <moni-tab icon="settings" label="Settings" href="/settings"></moni-tab>
+ * </moni-tabs>
+ * ```
  *
- * Attributes:
- *  - active: present → active style
- *  - icon:   Material Symbols name
- *  - label:  tab text
- *  - href:   link target
+ * @csspart tab - The inner `<a>` element acting as the tab button.
  */
 export declare class MoniTab extends MoniElement {
     active: boolean;
@@ -16,7 +43,7 @@ export declare class MoniTab extends MoniElement {
     label: string;
     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-tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"moni-tab.d.ts","sourceRoot":"","sources":["../../src/components/moni-tab.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;GASG;AACH,qBACa,OAAQ,SAAQ,WAAW;IACK,MAAM,UAAS;IAC9B,IAAI,SAAM;IACV,KAAK,SAAM;IACX,IAAI,SAAO;IAExC,OAAgB,MAAM,4BAuFpB;IAEO,MAAM;CAaf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD;AAED,eAAe,OAAO,CAAC"}
+{"version":3,"file":"moni-tab.d.ts","sourceRoot":"","sources":["../../src/components/moni-tab.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBACa,OAAQ,SAAQ,WAAW;IACK,MAAM,UAAS;IAC9B,IAAI,SAAM;IACV,KAAK,SAAM;IACX,IAAI,SAAO;IAExC,OAAgB,MAAM,4BAuFpB;IAEO,MAAM;CAaf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD;AAED,eAAe,OAAO,CAAC"}

package/dist/components/moni-tab.js

@@ -1,3 +1,9 @@
+/**
+ * @file components/moni-tab.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,14 +15,35 @@ import { customElement, property } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 import './moni-icon.js';
 /**
- * Visual-only tab. Renders an `<a>` styled with the BeerCSS `.tabs > a`
- * helper.
+ * Material Design 3 Tab component.
+ *
+ * An individual interactive tab element designed to be placed inside a
+ * `<moni-tabs>` container. Tabs organize content across different screens,
+ * data sets, and other interactions.
+ *
+ * **M3 spec reference:** `m3-docs/components/tabs/specs.md`
+ *
+ * **Visual layout & interaction:**
+ * Internally renders as an `<a>` element to support native link behavior when
+ * an `href` is provided, but behaves visually as a tab button. It displays a
+ * text label and an optional Material icon. If the parent `<moni-tabs>` has the
+ * `vertical` attribute set, the layout automatically adjusts to stack the icon
+ * above the text.
+ *
+ * **State:**
+ * The `active` attribute highlights the tab, applying the primary color to the
+ * text and rendering the active indicator line (handled via CSS in the parent
+ * container or pseudo-elements).
+ *
+ * @example
+ * ```html
+ * <moni-tabs>
+ *   <moni-tab active icon="home" label="Home"></moni-tab>
+ *   <moni-tab icon="settings" label="Settings" href="/settings"></moni-tab>
+ * </moni-tabs>
+ * ```
  *
- * Attributes:
- *  - active: present → active style
- *  - icon:   Material Symbols name
- *  - label:  tab text
- *  - href:   link target
+ * @csspart tab - The inner `<a>` element acting as the tab button.
  */
 let MoniTab = class MoniTab extends MoniElement {
     constructor() {

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

@@ -1,17 +1,55 @@
+/**
+ * @file components/moni-tabs.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
 import { MoniElement } from './_base/index.js';
 /**
- * Visual-only tab bar. Renders a `<nav>` styled with the BeerCSS `.tabs`
- * helper.
- *
- * Attributes:
- *  - mode:      primary (default) | secondary
- *  - scrollable: present → overflow-x: auto
- *  - align:     default (space-around) | left | center | right
- *  - indicator: default (full) | min | max
- *  - vertical:  present → icon above label
- *
- * Slots:
- *  - default: <moni-tab> children
+ * Material Design 3 Tabs container component.
+ *
+ * A navigational container that groups multiple `<moni-tab>` elements. Tabs
+ * organize content into high-level categories and allow the user to switch
+ * between them.
+ *
+ * **M3 spec reference:** `m3-docs/components/tabs/specs.md`
+ *
+ * **Modes (Primary vs Secondary):**
+ * - `primary` (default): Used for top-level navigation at the highest hierarchy,
+ *   often placed directly below a top app bar. They span the full width and
+ *   feature a prominent active indicator.
+ * - `secondary`: Used for deeper content hierarchies within a specific area
+ *   or page. They are typically more subtle.
+ *
+ * **Layout & Alignment:**
+ * - `scrollable`: If the number of tabs exceeds the container width, this
+ *   enables horizontal scrolling (`overflow-x: auto`) rather than squishing.
+ * - `align`: Controls how the tabs are distributed (`default` space-around,
+ *   `left`, `center`, or `right`).
+ * - `vertical`: Stacks the icon above the text label inside the child tabs.
+ *
+ * **Active Indicator:**
+ * The `indicator-size` attribute allows customizing the width of the active
+ * underline indicator (`default` fits the tab content, `min` is narrow, `max`
+ * fills the full tab width).
+ *
+ * @example
+ * ```html
+ * <!-- Primary, scrollable tabs -->
+ * <moni-tabs scrollable>
+ *   <moni-tab active label="Flights"></moni-tab>
+ *   <moni-tab label="Trips"></moni-tab>
+ *   <moni-tab label="Explore"></moni-tab>
+ * </moni-tabs>
+ *
+ * <!-- Secondary, centered tabs with vertical layout -->
+ * <moni-tabs mode="secondary" align="center" vertical>
+ *   <moni-tab active icon="video_camera_front" label="Video"></moni-tab>
+ *   <moni-tab icon="photo_camera" label="Photo"></moni-tab>
+ * </moni-tabs>
+ * ```
+ *
+ * @slot default - `<moni-tab>` child elements.
  */
 export declare class MoniTabs extends MoniElement {
     mode: 'primary' | 'secondary';
@@ -20,7 +58,7 @@ export declare class MoniTabs extends MoniElement {
     align: 'default' | 'left' | 'center' | 'right';
     indicatorSize: 'default' | 'min' | 'max';
     static styles: import("lit").CSSResult[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1 +1 @@
-{"version":3,"file":"moni-tabs.d.ts","sourceRoot":"","sources":["../../src/components/moni-tabs.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;GAaG;AACH,qBACa,QAAS,SAAQ,WAAW;IAExC,IAAI,EAAE,SAAS,GAAG,WAAW,CAAa;IACE,UAAU,UAAS;IACnB,QAAQ,UAAS;IAE7D,KAAK,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAa;IAE3D,aAAa,EAAE,SAAS,GAAG,KAAK,GAAG,KAAK,CAAa;IAErD,OAAgB,MAAM,4BAsCpB;IAEO,MAAM;CAcf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"moni-tabs.d.ts","sourceRoot":"","sources":["../../src/components/moni-tabs.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,qBACa,QAAS,SAAQ,WAAW;IAExC,IAAI,EAAE,SAAS,GAAG,WAAW,CAAa;IACE,UAAU,UAAS;IACnB,QAAQ,UAAS;IAE7D,KAAK,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAa;IAE3D,aAAa,EAAE,SAAS,GAAG,KAAK,GAAG,KAAK,CAAa;IAErD,OAAgB,MAAM,4BAsCpB;IAEO,MAAM;CAcf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD;AAED,eAAe,QAAQ,CAAC"}

package/dist/components/moni-tabs.js

@@ -1,3 +1,9 @@
+/**
+ * @file components/moni-tabs.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,18 +14,50 @@ import { html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 /**
- * Visual-only tab bar. Renders a `<nav>` styled with the BeerCSS `.tabs`
- * helper.
+ * Material Design 3 Tabs container component.
+ *
+ * A navigational container that groups multiple `<moni-tab>` elements. Tabs
+ * organize content into high-level categories and allow the user to switch
+ * between them.
+ *
+ * **M3 spec reference:** `m3-docs/components/tabs/specs.md`
+ *
+ * **Modes (Primary vs Secondary):**
+ * - `primary` (default): Used for top-level navigation at the highest hierarchy,
+ *   often placed directly below a top app bar. They span the full width and
+ *   feature a prominent active indicator.
+ * - `secondary`: Used for deeper content hierarchies within a specific area
+ *   or page. They are typically more subtle.
+ *
+ * **Layout & Alignment:**
+ * - `scrollable`: If the number of tabs exceeds the container width, this
+ *   enables horizontal scrolling (`overflow-x: auto`) rather than squishing.
+ * - `align`: Controls how the tabs are distributed (`default` space-around,
+ *   `left`, `center`, or `right`).
+ * - `vertical`: Stacks the icon above the text label inside the child tabs.
+ *
+ * **Active Indicator:**
+ * The `indicator-size` attribute allows customizing the width of the active
+ * underline indicator (`default` fits the tab content, `min` is narrow, `max`
+ * fills the full tab width).
+ *
+ * @example
+ * ```html
+ * <!-- Primary, scrollable tabs -->
+ * <moni-tabs scrollable>
+ *   <moni-tab active label="Flights"></moni-tab>
+ *   <moni-tab label="Trips"></moni-tab>
+ *   <moni-tab label="Explore"></moni-tab>
+ * </moni-tabs>
  *
- * Attributes:
- *  - mode:      primary (default) | secondary
- *  - scrollable: present → overflow-x: auto
- *  - align:     default (space-around) | left | center | right
- *  - indicator: default (full) | min | max
- *  - vertical:  present → icon above label
+ * <!-- Secondary, centered tabs with vertical layout -->
+ * <moni-tabs mode="secondary" align="center" vertical>
+ *   <moni-tab active icon="video_camera_front" label="Video"></moni-tab>
+ *   <moni-tab icon="photo_camera" label="Photo"></moni-tab>
+ * </moni-tabs>
+ * ```
  *
- * Slots:
- *  - default: <moni-tab> children
+ * @slot default - `<moni-tab>` child elements.
  */
 let MoniTabs = class MoniTabs extends MoniElement {
     constructor() {

package/dist/components/moni-text-field.d.ts

@@ -1,18 +1,63 @@
+/**
+ * @file components/moni-text-field.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';
 /**
- * Visual-only text field. Renders the `.field` family of BeerCSS helpers
- * with a native `<input>`.
+ * Material Design 3 Text Field component.
+ *
+ * A full-featured input field that wraps a native `<input>` inside the M3
+ * field shell (`.field` class from `fieldStyles`). Supports floating labels,
+ * filled and outlined variants, leading/trailing icons, helper text, and
+ * error states.
+ *
+ * **M3 spec reference:** `m3-docs/components/text-fields/specs.md`
+ *
+ * **Visual architecture:**
+ * Uses `fieldStyles` for the complete CSS field shell. The field container
+ * is a `<div class="field [modifiers]">` wrapping:
+ * 1. Optional leading icon.
+ * 2. Native `<input>` element.
+ * 3. Floating `<label>` (when `label` is set).
+ * 4. Optional trailing icon or loading spinner.
+ * 5. `<output>` for helper/error text.
+ *
+ * **Visual-only contract:**
+ * This component does **not** listen to `@input` events to sync the `value`
+ * attribute back from the underlying `<input>`. Consumers must either:
+ * - Submit the native form (the `<input name>` participates in form submission).
+ * - Listen to `change` or `input` events via standard DOM event handling.
+ * - Use a framework binding (e.g. `bind:value` in Svelte, `v-model` in Vue).
+ *
+ * @example
+ * ```html
+ * <moni-text-field
+ *   label="Email address"
+ *   type="email"
+ *   name="email"
+ *   icon="mail"
+ *   variant="outlined"
+ *   helper="We'll never share your email."
+ * ></moni-text-field>
  *
- * This component is **visual-only**: it does NOT listen to `@input` to
- * sync the `value` attribute back from the underlying input. Consumers
- * either use form submission or wire their own change handling.
+ * <moni-text-field
+ *   label="Amount"
+ *   type="number"
+ *   prefix="$"
+ *   error
+ *   error-text="Value must be positive"
+ * ></moni-text-field>
+ * ```
  *
- * Attributes:
- *  - name, label, value, variant, size, shape, type, icon, trailing-icon,
- *    prefix, suffix, helper, error, error-text, disabled, placeholder — see below.
- *  - loading:   present → shows indeterminate circular progress
+ * @csspart field         - The outer `.field` div container.
+ * @csspart input         - The native `<input>` element.
+ * @csspart label         - The floating `<label>` element.
+ * @csspart helper        - The helper `<output>` element.
+ * @csspart error-output  - The error `<output>` element.
  */
 export declare class MoniTextField extends MoniElement {
     name: string;
@@ -35,7 +80,7 @@ export declare class MoniTextField extends MoniElement {
     private _input;
     updated(changed: Map<string, unknown>): void;
     static styles: import("lit").CSSResult[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/moni-text-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"moni-text-field.d.ts","sourceRoot":"","sources":["../../src/components/moni-text-field.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAA6B,MAAM,kBAAkB,CAAC;AAC1E,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAE5B;;;;;;;;;;;;GAYG;AACH,qBACa,aAAc,SAAQ,WAAW;IAChB,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;IAEpD,IAAI,EACD,MAAM,GACN,UAAU,GACV,OAAO,GACP,QAAQ,GACR,KAAK,GACL,KAAK,GACL,QAAQ,CAAU;IACQ,IAAI,SAAM;IACkB,YAAY,SAAM;IAC9C,MAAM,SAAM;IACZ,MAAM,SAAM;IACZ,MAAM,SAAM;IACa,SAAS,SAAM;IACzB,KAAK,UAAS;IACd,OAAO,UAAS;IAChB,QAAQ,UAAS;IAChC,KAAK,SAAM;IACX,WAAW,SAAM;IAE9B,OAAO,CAAC,MAAM,CAAoB;IAEzC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAO9C,OAAgB,MAAM,4BAA+B;IAE5C,MAAM;CA8Ef;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"moni-text-field.d.ts","sourceRoot":"","sources":["../../src/components/moni-text-field.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,OAAO,EAAE,WAAW,EAA6B,MAAM,kBAAkB,CAAC;AAC1E,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAE5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,qBACa,aAAc,SAAQ,WAAW;IAChB,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;IAEpD,IAAI,EACD,MAAM,GACN,UAAU,GACV,OAAO,GACP,QAAQ,GACR,KAAK,GACL,KAAK,GACL,QAAQ,CAAU;IACQ,IAAI,SAAM;IACkB,YAAY,SAAM;IAC9C,MAAM,SAAM;IACZ,MAAM,SAAM;IACZ,MAAM,SAAM;IACa,SAAS,SAAM;IACzB,KAAK,UAAS;IACd,OAAO,UAAS;IAChB,QAAQ,UAAS;IAChC,KAAK,SAAM;IACX,WAAW,SAAM;IAE9B,OAAO,CAAC,MAAM,CAAoB;IAEzC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAO9C,OAAgB,MAAM,4BAA+B;IAE5C,MAAM;CA8Ef;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD;AAED,eAAe,aAAa,CAAC"}