@moni-labs/moni-ui 0.2.0 → 0.3.1

package/src/components/moni-snackbar.ts

@@ -1,37 +1,111 @@
+/**
+ * @file components/moni-snackbar.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
+
 import { html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 import './moni-icon.js';
 
 /**
- * Snackbar that faithfully ports BeerCSS's `.snackbar` styles.
+ * Material Design 3 Snackbar component.
+ *
+ * Snackbars provide brief messages about app processes at the bottom of the
+ * screen. They disappear automatically and do not require user action,
+ * but may contain a single optional action.
+ *
+ * **M3 spec reference:** `m3-docs/components/snackbar/specs.md`
+ *
+ * **Positioning model:**
+ * The snackbar uses `position: fixed` so it renders in the viewport
+ * regardless of which element it is placed in the DOM. The host element
+ * displays as `block` rather than `contents` to ensure `position: fixed`
+ * inside the shadow root anchors to the viewport (not to a stacking context
+ * created by a transformed ancestor).
  *
- * BeerCSS uses `.snackbar` with `position: fixed; inset: auto auto 6rem 50%;`
- * and `.snackbar.active` / `.snackbar:popover-open` to show it.
+ * **Show/hide mechanism:**
+ * Visibility is controlled by `:host([active]) .snackbar` via CSS
+ * `opacity`, `visibility`, and `transform`. This mirrors BeerCSS's
+ * `.snackbar.active` pattern and allows CSS transition animations.
  *
- * We use :host([active]) .snackbar with visibility/opacity/transform — same as BeerCSS.
- * The host is display:block so the fixed snackbar inside is part of the stacking context
- * of the document body (not clipped by any shadow root overflow).
+ * **M3 text truncation:**
+ * The message text is clamped to `maxLines` lines with `-webkit-line-clamp`.
+ * The M3 spec requires a maximum of 2 lines; consumers can override this
+ * via the `max-lines` attribute.
  *
- * Material 3 spec (`m3-docs/components/snackbar/specs.md`): the message text
- * must truncate at **2 lines** with ellipsis when too long. The container
- * width adapts to the screen size (full width on compact, 40% on expanded).
+ * @example
+ * ```ts
+ * const snackbar = document.querySelector('moni-snackbar') as MoniSnackbar;
  *
- * Attributes:
- *  - text:      message
- *  - action:    action label (visual only)
- *  - placement: bottom (default) | top
- *  - active:    present → visible
- *  - max-lines: 2 (default) | number — clamp text to N lines with ellipsis
+ * // Show for 3 seconds
+ * snackbar.text = 'Item deleted';
+ * snackbar.action = 'Undo';
+ * snackbar.active = true;
+ * setTimeout(() => { snackbar.active = false; }, 3000);
+ * ```
+ *
+ * @slot default - Additional content placed inside the snackbar container.
+ *
+ * @csspart snackbar - The inner snackbar container element.
+ * @csspart text     - The message text element.
+ * @csspart action   - The action button element.
  */
 @customElement('moni-snackbar')
 export class MoniSnackbar extends MoniElement {
+	/**
+	 * The main message text displayed in the snackbar.
+	 *
+	 * Clamped to `maxLines` lines. Long messages are truncated with `…`.
+	 * Per M3 spec, keep messages short and informative (under 60 characters).
+	 *
+	 * @default ''
+	 */
 	@property({ reflect: true }) text = '';
+
+	/**
+	 * Label for the optional action button.
+	 *
+	 * When non-empty, renders a text button on the trailing edge of the snackbar.
+	 * The component dispatches a `'action'` event when the action is clicked.
+	 * This is a visual-only label — the consumer handles the action logic.
+	 *
+	 * @default ''
+	 */
 	@property({ reflect: true }) action = '';
+
+	/**
+	 * Vertical placement of the snackbar on the screen.
+	 *
+	 * - `'bottom'` (default) — Fixed 6rem from the bottom, centered horizontally.
+	 * - `'top'` — Fixed 6rem from the top, centered horizontally.
+	 *
+	 * @default 'bottom'
+	 */
 	@property({ reflect: true })
 	placement: 'bottom' | 'top' = 'bottom';
+
+	/**
+	 * When `true`, the snackbar is visible.
+	 *
+	 * Toggle this attribute to show/hide the snackbar. The CSS transition
+	 * handles the fade-in/slide-up animation automatically.
+	 * Consumers are responsible for implementing the auto-dismiss timer.
+	 *
+	 * @default false
+	 */
 	@property({ type: Boolean, reflect: true }) active = false;
-	/** M3 spec: clamp the message text to N lines (default 2). */
+
+	/**
+	 * Maximum number of lines of message text before it is clamped.
+	 *
+	 * Uses `-webkit-line-clamp` with `display: -webkit-box` for cross-browser
+	 * multi-line truncation. The M3 spec recommends a maximum of 2 lines.
+	 *
+	 * @default 2
+	 */
 	@property({ type: Number, reflect: true, attribute: 'max-lines' })
 	maxLines = 2;
 

package/src/components/moni-split-button.ts

@@ -1,18 +1,48 @@
+/**
+ * @file components/moni-split-button.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
+
 import { html, css } from 'lit';
 import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 
 /**
- * Visual-only split button. Combines a primary action button and a dropdown menu trigger.
+ * Material Design 3 Split Button component.
+ *
+ * A split button combines a primary action button with a secondary dropdown
+ * button. The two buttons sit flush against each other, typically sharing
+ * a background color and elevation, but separated by a distinct border.
+ *
+ * **Visual architecture:**
+ * The component acts as a layout container (`display: inline-flex`) that
+ * groups two standard buttons. It overrides the margins of the trailing
+ * button to create the "connected" look (similar to connected button groups).
+ *
+ * **Usage:**
+ * Consumers must provide exactly two buttons via the named slots:
+ * - `slot="leading-button"` — The primary action (usually text or text+icon).
+ * - `slot="trailing-button"` — The secondary action (usually just a dropdown icon).
+ *
+ * Both buttons should be standard `<moni-button>` or `<moni-icon-button>`
+ * elements configured with matching variants for a cohesive appearance.
+ *
+ * @example
+ * ```html
+ * <moni-split-button variant="filled">
+ *   <moni-button slot="leading-button" icon="send">Send</moni-button>
+ *   <moni-button slot="trailing-button" icon="arrow_drop_down" id="schedule-trigger"></moni-button>
+ * </moni-split-button>
  *
- * Attributes:
- *  - variant: filled (default) | tonal | outlined | elevated
- *  - size:    small | medium (default) | large | extra
- *  - gap:     custom gap space (e.g. "8px" or "1rem")
+ * <moni-menu id="schedule-menu" placement="bottom">
+ *   <moni-menu-item>Schedule send...</moni-menu-item>
+ * </moni-menu>
+ * ```
  *
- * Slots:
- *  - leading-button:  The main action button
- *  - trailing-button: The menu dropdown button
+ * @slot leading-button  - The primary action button on the left.
+ * @slot trailing-button - The secondary action (dropdown trigger) on the right.
  */
 @customElement('moni-split-button')
 export class MoniSplitButton extends MoniElement {

package/src/components/moni-step.ts

@@ -1,18 +1,52 @@
+/**
+ * @file components/moni-step.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
+
 import { html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 import './moni-icon.js';
 
 /**
- * Visual-only step. Renders an icon/number, a title, and a description.
+ * Material Design 3 Step component.
+ *
+ * An individual step within a `<moni-stepper>`. Steps display progress through
+ * a sequence of logical and numbered operations.
+ *
+ * **M3 spec reference:** `m3-docs/components/progress-indicators/specs.md` (Stepper pattern)
+ *
+ * **Anatomy & Visuals:**
+ * A step renders a circular indicator containing either its sequence number
+ * (automatically injected by the parent stepper) or a custom icon. Below or
+ * beside the indicator (depending on the parent's `orientation`), it renders
+ * the `title` and an optional `description`.
+ *
+ * **State management:**
+ * The parent `<moni-stepper>` automatically calculates and injects the `index`,
+ * `active`, and `completed` properties based on its current state.
+ * - **Active:** Highlighted with the primary color, indicating the current step.
+ * - **Completed:** Displayed with a solid primary background and a checkmark
+ *   icon (`completed` state overrides the numeric index).
+ *
+ * @example
+ * ```html
+ * <!-- Typically used inside a stepper -->
+ * <moni-stepper current="1">
+ *   <moni-step title="Shipping" description="Enter address"></moni-step>
+ *   <moni-step title="Payment" description="Credit card details"></moni-step>
+ *   <moni-step title="Review" description="Confirm order"></moni-step>
+ * </moni-stepper>
+ *
+ * <!-- Overriding the icon -->
+ * <moni-step title="Done" icon="celebration"></moni-step>
+ * ```
  *
- * Attributes:
- *  - title:       step heading
- *  - description: step secondary text
- *  - active:      present → primary color highlight
- *  - completed:   present → filled circle with check
- *  - icon:        Material Symbols name (overrides the number)
- *  - index:       numeric label (auto-set by parent stepper, optional)
+ * @csspart step-indicator - The circular badge containing the number/icon.
+ * @csspart title          - The main title text.
+ * @csspart description    - The secondary description text.
  */
 @customElement('moni-step')
 export class MoniStep extends MoniElement {

package/src/components/moni-stepper.ts

@@ -1,15 +1,53 @@
+/**
+ * @file components/moni-stepper.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
+
 import { html, css } from 'lit';
 import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 import type { MoniStep } from './moni-step.js';
 
 /**
- * Visual-only stepper. Wraps a list of <moni-step> children, propagates the
- * `current` index to each child, and styles the connectors between them.
+ * Material Design 3 Stepper component.
+ *
+ * A container for a linear progression of `<moni-step>` elements. Steppers
+ * convey progress through numbered steps and indicate the user's current
+ * position within a flow.
+ *
+ * **M3 spec reference:** `m3-docs/components/progress-indicators/specs.md`
+ *
+ * **Orchestration:**
+ * This component acts as the orchestrator for its slotted `<moni-step>` children.
+ * Whenever the `current` property changes, or children are added/removed, the
+ * stepper iterates over all child steps and injects their state:
+ * - Assigns the sequential `index` (0-based) to each step.
+ * - Sets `active=true` on the step matching the `current` index.
+ * - Sets `completed=true` on all steps prior to the `current` index.
+ *
+ * **Visual layout:**
+ * The stepper manages the layout (flex row or column based on `orientation`)
+ * and ensures the connector lines between steps are rendered correctly via
+ * CSS pseudo-elements defined in the child `<moni-step>` styling.
+ *
+ * @example
+ * ```html
+ * <moni-stepper current="1" orientation="horizontal">
+ *   <moni-step title="Step 1"></moni-step>
+ *   <moni-step title="Step 2"></moni-step>
+ *   <moni-step title="Step 3"></moni-step>
+ * </moni-stepper>
+ *
+ * <script>
+ *   const stepper = document.querySelector('moni-stepper');
+ *   // Move to next step
+ *   stepper.current = 2;
+ * </script>
+ * ```
  *
- * Attributes:
- *  - orientation: horizontal (default) | vertical
- *  - current:     zero-based index of the active step
+ * @slot default - `<moni-step>` elements.
  */
 @customElement('moni-stepper')
 export class MoniStepper extends MoniElement {

package/src/components/moni-switch.ts

@@ -1,3 +1,10 @@
+/**
+ * @file components/moni-switch.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
+
 import { html, css } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -5,33 +12,111 @@ 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.
  *
- * 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
+ * @fires change - Bubbles and is composed. Fired when the switch is toggled.
+ *                 Read `element.checked` for the new state.
  *
- * 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
+ * @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.
  */
 @customElement('moni-switch')
 export 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 ''
+	 */
 	@property({ reflect: true }) 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
+	 */
 	@property({ type: Boolean, reflect: true }) checked = false;
+
+	/**
+	 * When `true`, the switch is non-interactive and renders at 50% opacity.
+	 *
+	 * @default false
+	 */
 	@property({ type: Boolean, reflect: true }) 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
+	 */
 	@property({ type: Boolean, reflect: true }) icon = false;
+
+	/**
+	 * Forwarded to the native `<input name>` attribute for form participation.
+	 *
+	 * @default ''
+	 */
 	@property({ reflect: true }) name = '';
+
+	/**
+	 * Forwarded to the native `<input value>` attribute.
+	 * The value submitted in a form when this switch is checked.
+	 *
+	 * @default ''
+	 */
 	@property({ reflect: true }) value = '';
 
+	/** Direct reference to the native input element for programmatic access. */
 	@query('input') private _input!: HTMLInputElement;
 
+	/**
+	 * Syncs `checked` and `disabled` imperatively to the native input after render.
+	 *
+	 * @param changed - Map of changed property names to their previous values.
+	 */
 	override updated(changed: Map<string, unknown>) {
 		if (this._input) {
 			if (changed.has('checked')) this._input.checked = this.checked;
@@ -39,6 +124,14 @@ export class MoniSwitch extends MoniElement {
 		}
 	}
 
+	/**
+	 * 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(e: Event) {
 		this.checked = (e.target as HTMLInputElement).checked;
 		this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));

package/src/components/moni-tab.ts

@@ -1,17 +1,45 @@
+/**
+ * @file components/moni-tab.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
+
 import { html, css } from 'lit';
 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.
  */
 @customElement('moni-tab')
 export class MoniTab extends MoniElement {

package/src/components/moni-tabs.ts

@@ -1,20 +1,59 @@
+/**
+ * @file components/moni-tabs.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
+
 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.
  */
 @customElement('moni-tabs')
 export class MoniTabs extends MoniElement {

package/src/components/moni-text-field.ts

@@ -1,3 +1,10 @@
+/**
+ * @file components/moni-text-field.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
+
 import { html, nothing } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -7,17 +14,56 @@ 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.
  */
 @customElement('moni-text-field')
 export class MoniTextField extends MoniElement {