@moni-labs/moni-ui 0.2.0 → 0.3.0

package/src/components/moni-nav.ts

@@ -1,29 +1,65 @@
+/**
+ * @file components/moni-nav.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 navigation. Renders a `<nav>` styled with BeerCSS helpers.
+ * Material Design 3 Navigation container component.
+ *
+ * `<moni-nav>` is the container that wraps `<moni-nav-item>` elements and
+ * controls the M3 navigation pattern: navigation bar, navigation rail, or
+ * navigation drawer.
+ *
+ * **M3 spec references:**
+ * - Navigation bar: `m3-docs/components/navigation-bar/specs.md`
+ * - Navigation rail: `m3-docs/components/navigation-rail/specs.md`
+ * - Navigation drawer: `m3-docs/components/navigation-drawer/specs.md`
+ *
+ * **Navigation patterns:**
+ * - **Navigation bar** (`placement="bottom"`) — Horizontal bar of icon+label
+ *   items at the bottom of the screen. Best for 3–5 top-level destinations.
+ * - **Navigation rail** (`variant="rail"`) — Vertical rail of icon+label items
+ *   on the side of the screen. Best for medium/expanded breakpoints.
+ * - **Standard drawer** (`variant="drawer"`) — Always-visible vertical panel
+ *   with full text labels. No scrim. Best for large screens.
+ * - **Modal drawer** (`variant="drawer" modal`) — Overlay drawer with scrim.
+ *   Opened/closed via the `open` property. Traps keyboard focus while open.
+ *   Closes on `Escape` key press.
+ *
+ * **Keyboard handling:**
+ * When `modal=true`, the component adds a global `keydown` listener in
+ * `connectedCallback` that closes the drawer on `Escape`. The listener is
+ * removed in `disconnectedCallback`.
+ *
+ * @example
+ * ```html
+ * <!-- Bottom navigation bar -->
+ * <moni-nav placement="bottom">
+ *   <moni-nav-item icon="home" label="Home" active></moni-nav-item>
+ *   <moni-nav-item icon="search" label="Search"></moni-nav-item>
+ *   <moni-nav-item icon="person" label="Profile"></moni-nav-item>
+ * </moni-nav>
  *
- * M3 navigation patterns (`m3-docs/components/navigation-*`):
- *  - Navigation bar: placement="bottom"
- *  - Navigation rail: placement="left|right" variant="rail"
- *  - Navigation drawer: placement="left|right" variant="drawer"
- *    * Standard drawer: always visible, no scrim (default)
- *    * Modal drawer: `modal` toggles open/closed, renders a scrim and
- *      traps focus while open. See `m3-docs/components/navigation-drawer/specs.md`.
+ * <!-- Modal navigation drawer -->
+ * <moni-nav variant="drawer" modal open placement="left">
+ *   <h3 slot="header">My App</h3>
+ *   <moni-nav-item icon="home" label="Home" active></moni-nav-item>
+ *   <moni-nav-item icon="settings" label="Settings"></moni-nav-item>
+ * </moni-nav>
+ * ```
  *
- * Attributes:
- *  - placement: top (default) | bottom | left | right
- *  - variant:   rail | drawer
- *  - modal:     present → drawer is modal (requires variant="drawer")
- *  - open:      present → modal drawer is open (default true)
- *  - layout:    vertical | horizontal | auto (default)
+ * @slot default - `<moni-nav-item>` children.
+ * @slot header  - Content above the nav items (drawer variant only).
+ * @slot footer  - Content below the nav items (drawer variant only).
  *
- * Slots:
- *  - default: <moni-nav-item> children
- *  - header:  content above nav items (drawer only)
- *  - footer:  content below nav items (drawer only)
+ * @csspart nav     - The inner `<nav>` element.
+ * @csspart scrim   - The backdrop scrim (modal drawer only).
  */
 @customElement('moni-nav')
 export class MoniNav extends MoniElement {

package/src/components/moni-progress.ts

@@ -1,40 +1,133 @@
+/**
+ * @file components/moni-progress.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
+
 import { html, css, svg, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 
 /**
- * Progress indicator that faithfully ports BeerCSS's progress styles.
+ * Material Design 3 Progress Indicator component.
+ *
+ * Progress indicators express an unspecified wait time or display the length
+ * of a process. They inform users about the status of ongoing processes such
+ * as loading an app, submitting a form, or saving updates.
+ *
+ * **M3 spec reference:** `m3-docs/components/progress-indicators/specs.md`
+ *
+ * **Variants:**
+ * - `linear` (default) — A horizontal bar that fills left-to-right.
+ * - `circular` — A circular SVG stroke indicator.
+ * - `wavy` — An animated wave bar (Moni extension; not in M3 spec).
+ * - `circular-wavy` — Circular + wave combo (Moni extension).
  *
- * BeerCSS uses the native <progress> element with `::after`, `::before` and
- * `mask-image` pseudo-elements. Those don't work inside Shadow DOM because:
- *  - `<progress>` native pseudo-elements (::webkit-progress-value, ::after)
- *    are blocked by the UA shadow root in Chrome/Firefox within a custom shadow.
- *  - `mask-image` on those pseudo-elements doesn't apply at all in shadows.
+ * **Shadow DOM compatibility note:**
+ * BeerCSS's progress uses native `<progress>` pseudo-elements (`::before`,
+ * `::after`, `::webkit-progress-value`) and `mask-image`, which are blocked
+ * by the UA shadow root in Chrome/Firefox. This component uses a plain `<div>`
+ * wrapper that replicates the visual rules exactly, and an `<svg>` element
+ * for the circular variant using SVG stroke-dashoffset animation for superior
+ * cross-browser support compared to `conic-gradient`.
  *
- * Solution: use a plain <div> wrapper that replicates BeerCSS's visual rules
- * exactly, and an SVG for the circular variant (matching BeerCSS's conic-gradient
- * approach but with SVG stroke for better cross-browser support).
+ * **Percentage computation:**
+ * `_pct` is computed in `willUpdate()` as `(value / max) * 100`, clamped to
+ * `[0, 100]`. When `indeterminate` is set, `_pct` is fixed at `50` to drive
+ * the infinite loop animation.
  *
- * Attributes:
- *  - value:         0..max (omit for indeterminate)
- *  - max:           upper bound (default 100)
- *  - variant:       linear (default) | circular | wavy | circular-wavy
- *  - size:          small | medium (default) | large
- *  - indeterminate: present → infinite animation
+ * @example
+ * ```html
+ * <!-- Determinate linear progress -->
+ * <moni-progress value="65" max="100"></moni-progress>
+ *
+ * <!-- Indeterminate circular progress (loading spinner) -->
+ * <moni-progress variant="circular" indeterminate></moni-progress>
+ * ```
+ *
+ * @csspart bar      - The outer container div.
+ * @csspart fill     - The inner fill element (linear variant).
+ * @csspart svg      - The SVG element (circular variant).
  */
 @customElement('moni-progress')
 export class MoniProgress extends MoniElement {
+	/**
+	 * Current progress value.
+	 *
+	 * Must be in the range `[0, max]`. Values outside this range are clamped
+	 * during percentage computation in `willUpdate()`. Ignored when
+	 * `indeterminate` is set.
+	 *
+	 * @default 0
+	 */
 	@property({ type: Number, reflect: true }) value = 0;
+
+	/**
+	 * Maximum value of the progress range.
+	 *
+	 * Defaults to `100` so `value` can be set as a percentage directly.
+	 * For non-percentage ranges (e.g. steps), set `max` to the total step count
+	 * and `value` to the current step.
+	 *
+	 * @default 100
+	 */
 	@property({ type: Number, reflect: true }) max = 100;
+
+	/**
+	 * Visual variant of the progress indicator.
+	 *
+	 * - `'linear'` (default) — Horizontal fill bar.
+	 * - `'circular'` — SVG circle with stroke-dashoffset animation.
+	 * - `'wavy'` — Animated wave bar.
+	 * - `'circular-wavy'` — Combination of circular and wave.
+	 *
+	 * @default 'linear'
+	 */
 	@property({ reflect: true })
 	variant: 'linear' | 'circular' | 'wavy' | 'circular-wavy' = 'linear';
+
+	/**
+	 * Visual size of the progress indicator.
+	 *
+	 * - `'small'`  — Compact; suitable for inline or tight layouts.
+	 * - `'medium'` — Standard M3 size (default).
+	 * - `'large'`  — Prominent; for full-page loading states.
+	 *
+	 * @default 'medium'
+	 */
 	@property({ reflect: true })
 	size: 'small' | 'medium' | 'large' = 'medium';
+
+	/**
+	 * When `true`, the indicator animates in an infinite loop regardless of `value`.
+	 *
+	 * Use for operations where the completion percentage is unknown
+	 * (e.g. network requests, file processing). When `indeterminate` is set,
+	 * `_pct` is fixed at `50` to drive a continuous sweep animation.
+	 *
+	 * @default false
+	 */
 	@property({ type: Boolean, reflect: true }) indeterminate = false;
 
-	/** Computed fill percentage (0-100) used in styles/SVG */
+	/**
+	 * Computed fill percentage in the range `[0, 100]`.
+	 *
+	 * Updated in `willUpdate()` whenever `value`, `max`, or `indeterminate` changes.
+	 * Used directly in CSS custom property bindings and SVG stroke attributes.
+	 *
+	 * @internal
+	 */
 	@state() private _pct = 0;
 
+	/**
+	 * Computes the fill percentage before each render.
+	 *
+	 * Recalculates `_pct` whenever `value`, `max`, or `indeterminate` changes.
+	 * The `Math.max(1, max)` guard prevents division-by-zero when `max` is 0.
+	 *
+	 * @param changed - Map of property names to their previous values.
+	 */
 	override willUpdate(changed: Map<string, unknown>) {
 		if (changed.has('value') || changed.has('max') || changed.has('indeterminate')) {
 			this._pct = this.indeterminate

package/src/components/moni-radio.ts

@@ -1,3 +1,10 @@
+/**
+ * @file components/moni-radio.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,34 +12,112 @@ import { live } from 'lit/directives/live.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 
 /**
- * Radio that faithfully ports BeerCSS's `.radio` styles.
+ * Material Design 3 Radio Button component.
+ *
+ * Radio buttons allow users to select exactly one item from a set of mutually
+ * exclusive options. They share the same visual architecture as
+ * `<moni-checkbox>` but use `type="radio"` and implement group deselection.
+ *
+ * **M3 spec reference:** `m3-docs/components/radio/specs.md`
+ *
+ * **Visual architecture (BeerCSS pattern):**
+ * Identical to the checkbox pattern: the native `<input type="radio">` occupies
+ * real layout space at `--_size` × `--_size` but is hidden via `opacity: 0`.
+ * A sibling `<span>` renders:
+ * - `::before` — the radio icon (`radio_button_unchecked` / `radio_button_checked`).
+ * - `::after`  — the hover/focus ripple ring.
+ *
+ * **Group deselection:**
+ * When a radio is checked, `_onChange` queries the component's `getRootNode()`
+ * for all `moni-radio` elements sharing the same `name` attribute and sets
+ * their `checked` property to `false`. This mirrors native browser behavior
+ * for radio groups across shadow DOM boundaries where `name` grouping does
+ * not work natively.
  *
- * BeerCSS architecture:
- *  - `.radio` is inline-flex, aligns items center
- *  - `input` has width/height = --_size, opacity: 0  (real layout space, not absolute)
- *  - `span::before` shows "radio_button_unchecked" / "radio_button_checked" via Material Symbols font
- *  - `span::after` is the ripple hover effect
+ * @fires change - Bubbles and is composed. Fired when this radio is selected.
+ *                 Read `element.checked` for the new state.
  *
- * Attributes:
- *  - label:    text label
- *  - checked:  present
- *  - disabled: present
- *  - size:     small | medium (default) | large | extra
- *  - name:     forwarded to input.name (group radios by name)
- *  - value:    forwarded to input.value
+ * @example
+ * ```html
+ * <moni-radio name="color" value="red"   label="Red"></moni-radio>
+ * <moni-radio name="color" value="green" label="Green"></moni-radio>
+ * <moni-radio name="color" value="blue"  label="Blue" checked></moni-radio>
+ * ```
+ *
+ * @csspart radio - The outer `<label>` element.
  */
 @customElement('moni-radio')
 export class MoniRadio extends MoniElement {
+	/**
+	 * Text label displayed to the right of the radio icon.
+	 *
+	 * When non-empty, renders as a text node. When empty, the default slot
+	 * is rendered, allowing slotted HTML content as the label.
+	 *
+	 * @default ''
+	 */
 	@property({ reflect: true }) label = '';
+
+	/**
+	 * Whether this radio button is currently selected.
+	 *
+	 * Reflected as an attribute so CSS selectors can target it. Synced to
+	 * the native input via `updated()`.
+	 *
+	 * @default false
+	 */
 	@property({ type: Boolean, reflect: true }) checked = false;
+
+	/**
+	 * When `true`, the radio is non-interactive and renders at 50% opacity.
+	 *
+	 * @default false
+	 */
 	@property({ type: Boolean, reflect: true }) disabled = false;
+
+	/**
+	 * Visual size of the radio icon and its invisible hit area.
+	 *
+	 * | Value      | `--_size` |
+	 * |------------|-----------|
+	 * | `'small'`  | 1rem      |
+	 * | `'medium'` | 1.5rem    |
+	 * | `'large'`  | 2rem      |
+	 * | `'extra'`  | 2.5rem    |
+	 *
+	 * @default 'medium'
+	 */
 	@property({ reflect: true })
 	size: 'small' | 'medium' | 'large' | 'extra' = 'medium';
+
+	/**
+	 * Radio group name. Radios with the same `name` in the same root node
+	 * are treated as a mutual-exclusion group by `_onChange`.
+	 *
+	 * Note: Native `<input type="radio">` groups only work within the same
+	 * document root. Since `moni-radio` uses shadow DOM, the deselection
+	 * of siblings is handled imperatively in `_onChange`.
+	 *
+	 * @default ''
+	 */
 	@property({ reflect: true }) name = '';
+
+	/**
+	 * Forwarded to the native `<input value>` attribute.
+	 * The value submitted in a form when this radio is selected.
+	 *
+	 * @default ''
+	 */
 	@property({ reflect: true }) value = '';
 
+	/** Direct reference to the native input element for programmatic access. */
 	@query('input') private _input!: HTMLInputElement;
 
+	/**
+	 * Syncs `checked` and `disabled` to the native input after each render cycle.
+	 *
+	 * @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;
@@ -152,6 +237,19 @@ export class MoniRadio extends MoniElement {
 		`
 	];
 
+	/**
+	 * Handles the native input `change` event.
+	 *
+	 * On selection, deselects all sibling `moni-radio` elements with the same
+	 * `name` in the same root node (document or shadow root). This is necessary
+	 * because native radio group exclusion only works within the same document
+	 * root and does not cross shadow DOM boundaries.
+	 *
+	 * After deselection, dispatches a composed `'change'` event so it is
+	 * audible to parent elements in the light DOM.
+	 *
+	 * @param e - The native `change` event from the hidden `<input>`.
+	 */
 	private _onChange(e: Event) {
 		this.checked = (e.target as HTMLInputElement).checked;
 		if (this.checked && this.name) {

package/src/components/moni-ripple.ts

@@ -1,33 +1,135 @@
+/**
+ * @file components/moni-ripple.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 ripple decoration.
+ * Visual-only ripple decoration component.
+ *
+ * Provides a pointer-origin ripple animation — the expanding circle starts
+ * at the exact pointer-down coordinates rather than the element's center.
+ * This is the full-fidelity M3 ripple; for a simpler CSS-only center-ripple,
+ * use the `interactionStyles` `.interactive::after` pseudo-element instead.
+ *
+ * **Usage:**
+ * Drop `<moni-ripple>` as a **child** of any interactive element. The component
+ * automatically attaches a `pointerdown` listener to its `parentElement` and
+ * calculates the ripple origin in percentage coordinates relative to the parent.
+ *
+ * The parent element must NOT have `position: static` (the ripple applies
+ * `position: relative` automatically in `connectedCallback`).
+ *
+ * **Timing model:**
+ * On `pointerdown`:
+ * 1. `active = false` is set (cancels any in-progress ripple).
+ * 2. A `requestAnimationFrame` tick ensures the browser has processed the reset.
+ * 3. `active = true` triggers the CSS scale animation.
+ * 4. A `setTimeout` of `duration` ms (based on `speed`) resets `active = false`.
  *
- * To trigger a ripple at a specific point, set the `x` and `y` attributes
- * and toggle the `active` attribute. The visual scale-in animation will
- * run for `duration` ms and then the element becomes hidden.
+ * The duration matches the CSS transition duration so the opacity fade-out
+ * completes before `active` is cleared.
  *
- * Attributes:
- *  - x, y:        origin in px (0..100, %)
- *  - active:      present → visible
- *  - speed:       fast | normal (default) | slow
- *  - color:       primary (default) | secondary | surface
+ * **Cleanup:**
+ * `disconnectedCallback` removes the `pointerdown` listener and clears any
+ * pending timeout. Always call `super.disconnectedCallback()` if subclassing.
+ *
+ * @example
+ * ```html
+ * <!-- Ripple on a custom element -->
+ * <div class="my-button" style="position: relative; overflow: hidden;">
+ *   Click me
+ *   <moni-ripple color="primary"></moni-ripple>
+ * </div>
+ * ```
+ *
+ * @csspart ripple - The inner `<span>` that performs the scale animation.
  */
 @customElement('moni-ripple')
 export class MoniRipple extends MoniElement {
+	/**
+	 * Horizontal origin of the ripple as a percentage of the parent's width.
+	 *
+	 * Set automatically by `_onPointerDown` based on the pointer coordinates.
+	 * Can be set manually to trigger a ripple at a specific location.
+	 *
+	 * @default 50
+	 */
 	@property({ type: Number, reflect: true }) x = 50;
+
+	/**
+	 * Vertical origin of the ripple as a percentage of the parent's height.
+	 *
+	 * Set automatically by `_onPointerDown` based on the pointer coordinates.
+	 *
+	 * @default 50
+	 */
 	@property({ type: Number, reflect: true }) y = 50;
+
+	/**
+	 * When `true`, the ripple is visible and animating.
+	 *
+	 * Toggled automatically by `_onPointerDown`. Can be set manually for
+	 * programmatically-triggered ripple effects.
+	 *
+	 * @default false
+	 */
 	@property({ type: Boolean, reflect: true }) active = false;
+
+	/**
+	 * Animation speed of the ripple expand-and-fade sequence.
+	 *
+	 * Maps to the `--_dur` CSS custom property:
+	 * - `'fast'`   — 300ms
+	 * - `'normal'` — 600ms (default)
+	 * - `'slow'`   — 1200ms
+	 *
+	 * @default 'normal'
+	 */
 	@property({ reflect: true })
 	speed: 'fast' | 'normal' | 'slow' = 'normal';
+
+	/**
+	 * Color token for the ripple overlay.
+	 *
+	 * Sets the `color` CSS property on `:host`, which the `.ripple` span
+	 * inherits via `background-color: currentColor`.
+	 *
+	 * - `'primary'`   — `--primary` (default)
+	 * - `'secondary'` — `--secondary`
+	 * - `'surface'`   — `--surface-variant` (subtle, for surface containers)
+	 *
+	 * @default 'primary'
+	 */
 	@property({ reflect: true })
 	color: 'primary' | 'secondary' | 'surface' = 'primary';
 
+	/**
+	 * Reference to the parent element that the ripple is anchored to.
+	 * Populated in `connectedCallback`, cleared in `disconnectedCallback`.
+	 */
 	private _target: HTMLElement | null = null;
+
+	/**
+	 * ID of the pending `setTimeout` that clears `active` after the animation.
+	 * Stored so it can be cancelled if a second pointer event fires before the
+	 * first ripple finishes (rapid double-tap prevention).
+	 */
 	private _timeoutId: any = null;
 
+	/**
+	 * Attaches the ripple to its parent element.
+	 *
+	 * - Stores a reference to `parentElement` for pointer event listening.
+	 * - Ensures the parent has `position: relative` so the ripple's `position: absolute`
+	 *   stays within bounds.
+	 * - Registers the `_onPointerDown` event listener.
+	 */
 	override connectedCallback() {
 		super.connectedCallback();
 		this._target = this.parentElement;
@@ -40,6 +142,12 @@ export class MoniRipple extends MoniElement {
 		}
 	}
 
+	/**
+	 * Detaches the ripple from its parent element.
+	 *
+	 * Removes the `pointerdown` listener and clears any pending timeout to
+	 * prevent the `active` flag from being set after the element is removed.
+	 */
 	override disconnectedCallback() {
 		if (this._target) {
 			this._target.removeEventListener('pointerdown', this._onPointerDown);
@@ -50,6 +158,15 @@ export class MoniRipple extends MoniElement {
 		super.disconnectedCallback();
 	}
 
+	/**
+	 * Handles pointer-down events on the parent element.
+	 *
+	 * Computes the ripple origin as a percentage of the parent's bounding rect,
+	 * cancels any in-progress ripple, then triggers a new one after one
+	 * animation frame to guarantee the CSS transition fires from the new position.
+	 *
+	 * @param e - The `PointerEvent` from the parent's `pointerdown` listener.
+	 */
 	private _onPointerDown = (e: PointerEvent) => {
 		if (!this._target) return;
 		const rect = this._target.getBoundingClientRect();

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

@@ -1,26 +1,47 @@
+/**
+ * @file components/moni-segmented-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';
 import { MoniButtonSegment } from './moni-button-segment.js';
 
 /**
+ * Material Design 3 Segmented Button component (Legacy).
+ *
  * A form-associated group of selectable segmented buttons.
  *
- * @deprecated since v0.3.0 — `moni-segmented-button` is **no longer
- * recommended** by Material Design 3 Expressive. Use
- * `moni-button-group[variant="connected"]` instead, which has the same
- * functionality with an updated visual design. See
- * `m3-docs/components/segmented-buttons/overview.md` § M3 Expressive update.
+ * **Deprecation Notice:** The M3 spec (`m3-docs/components/segmented-buttons/overview.md`)
+ * has updated the segmented button pattern. The bespoke segments have been
+ * replaced with standard `<moni-button>` elements grouped inside a
+ * `<moni-button-group variant="connected">`.
  *
  * This component continues to work for backward compatibility but will be
  * removed in v1.0. A deprecation warning is logged to the console when the
  * element is connected to the DOM.
  *
- * Attributes:
- *  - name:       Name of the control in forms
- *  - multi:      Whether multiple options can be selected
- *  - hide-check: Hides checkmarks on all child segments
- *  - gap:        Custom gap space (e.g. "8px" or "1rem")
+ * @deprecated Use `<moni-button-group variant="connected">` instead.
+ *
+ * @example
+ * ```html
+ * <!-- Legacy usage (not recommended) -->
+ * <moni-segmented-button name="view" multi>
+ *   <moni-button-segment value="day">Day</moni-button-segment>
+ *   <moni-button-segment value="week">Week</moni-button-segment>
+ * </moni-segmented-button>
+ *
+ * <!-- Modern M3 equivalent -->
+ * <moni-button-group variant="connected">
+ *   <moni-button>Day</moni-button>
+ *   <moni-button>Week</moni-button>
+ * </moni-button-group>
+ * ```
+ *
+ * @slot default - `<moni-button-segment>` elements.
  */
 @customElement('moni-segmented-button')
 export class MoniSegmentedButton extends MoniElement {