@moni-labs/moni-ui 0.2.0 → 0.3.0

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

@@ -1,32 +1,140 @@
+/**
+ * @file components/moni-badge.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
 import { MoniElement } from './_base/index.js';
 /**
- * Badge that faithfully ports BeerCSS's `.badge` styles.
+ * Material Design 3 Badge component.
+ *
+ * Badges are small status descriptors anchored to a parent element, used to
+ * convey supplementary information such as a notification count, online
+ * status, or selection indicator.
+ *
+ * **Positioning contract:**
+ * The badge uses `position: absolute` and anchors to the parent element.
+ * On `connectedCallback`, if the parent's computed `position` is `'static'`,
+ * the badge automatically sets `parent.style.position = 'relative'`.
+ * Consumers do not need to manually add `position: relative` to the parent.
+ *
+ * **Rendering model:**
+ * The `:host` displays as `contents`, making it transparent to layout.
+ * Only the inner `.badge` span is visually rendered. This allows the badge
+ * to be dropped inside any element without affecting its layout flow.
  *
- * BeerCSS `.badge` uses:
- *  - `position: absolute; inset: 50% auto auto 50%; transform: translate(var(--_x), var(--_y))`
- *  - Default: --_x: 0, --_y: -100% → top-right corner
+ * @example
+ * ```html
+ * <!-- Notification badge on a button -->
+ * <div style="position: relative; display: inline-flex;">
+ *   <moni-button icon="notifications" variant="text"></moni-button>
+ *   <moni-badge value="5"></moni-badge>
+ * </div>
+ * ```
  *
- * The parent element MUST have `position: relative` for the badge to anchor correctly.
- * We ensure this in connectedCallback.
+ * @example
+ * ```html
+ * <!-- Inline dot badge for status -->
+ * <moni-badge shape="min" color="primary" inline></moni-badge>
+ * Online
+ * ```
  *
- * Attributes:
- *  - value:    text content (also accepts slotted content)
- *  - position: '' (top-right default) | top | bottom | left | right | none
- *  - shape:    '' (round) | circle | square | min
- *  - color:    error (default) | primary | secondary | tertiary
- *  - border:   present → outlined badge (BeerCSS .badge.border)
- *  - inline:   present → badge becomes inline (BeerCSS .badge.none)
+ * @csspart badge - The badge `<span>` element. Override `background-color`,
+ *                  `color`, or `border-radius` to customize appearance.
  */
 export declare class MoniBadge extends MoniElement {
+    /**
+     * Text content of the badge label.
+     *
+     * Also accepts slotted content — the default slot inside the badge span
+     * falls back to this value when no children are slotted.
+     * Use an empty string with `shape="min"` to render a dot-only badge.
+     *
+     * @default ''
+     */
     value: string;
+    /**
+     * Anchor position relative to the parent element's edges.
+     *
+     * Uses `inset: 50% auto auto 50%` as the base and adjusts translation:
+     * - `''` (default) — top-right corner (translate: 0, -100%).
+     * - `'top'`    — same as default, explicit alias.
+     * - `'bottom'` — bottom-right corner (translate: 0, 0).
+     * - `'left'`   — top-left corner (translate: -100%, -100%).
+     * - `'right'`  — top-right corner (translate: 0, -100%).
+     * - `'none'`   — disables absolute positioning; see also the `inline` attribute.
+     *
+     * @default ''
+     */
     position: 'top' | 'bottom' | 'left' | 'right' | 'none' | '';
+    /**
+     * Shape of the badge container.
+     *
+     * - `''` (default) — Rounded pill shape (border-radius: 1rem).
+     * - `'circle'`     — Alias for pill; the badge is always circular when the
+     *                    content is a single character or absent.
+     * - `'square'`     — No border-radius (angular badge).
+     * - `'min'`        — Dot only; content is hidden via `display: none` and the
+     *                    shape is clipped to a small circle via `clip-path`.
+     *
+     * @default ''
+     */
     shape: 'circle' | 'square' | 'min' | '';
+    /**
+     * Semantic color role of the badge.
+     *
+     * Maps to the M3 color palette roles:
+     * - `'error'` (default) — Red; standard for notification counts and alerts.
+     * - `'primary'`         — Brand primary color; for selection or active states.
+     * - `'secondary'`       — Secondary accent; for supplementary indicators.
+     * - `'tertiary'`        — Tertiary accent; for decorative or informational badges.
+     *
+     * @default 'error'
+     */
     color: 'primary' | 'secondary' | 'tertiary' | 'error';
+    /**
+     * When `true`, the badge renders inline (resets `position: absolute` to
+     * `position: relative`) rather than anchoring to the parent.
+     *
+     * Equivalent to BeerCSS's `.badge.none` class. Use for inline status
+     * indicators that flow within text or flex containers.
+     *
+     * @default false
+     */
     inline: boolean;
+    /**
+     * When present, renders the badge with an outlined style:
+     * - Background becomes `--surface` (same as the page background).
+     * - Border and text color use the palette color token (e.g. `--error`).
+     *
+     * Equivalent to BeerCSS's `.badge.border` class.
+     *
+     * @default false
+     */
     border: boolean;
+    /**
+     * Ensures the parent element can contain the absolutely-positioned badge.
+     *
+     * Reads the parent's computed `position` via `getComputedStyle`. If it is
+     * `'static'` (the browser default), sets `parent.style.position = 'relative'`
+     * so the badge anchors correctly. This is a convenience that avoids requiring
+     * consumers to remember to add `position: relative` to the parent themselves.
+     */
     connectedCallback(): void;
     static styles: import("lit").CSSResult[];
-    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Renders the badge span with the computed class list.
+     *
+     * Class composition:
+     * - `'badge'`       — always present (base styles).
+     * - `this.position` — position variant class (e.g. `'bottom'`, `'left'`).
+     * - `this.shape`    — shape variant class (e.g. `'min'`, `'square'`).
+     * - `'none'`        — added when `inline=true` to reset absolute positioning.
+     *
+     * Falsy values are filtered out so no extra spaces appear in the class string.
+     * The default slot falls back to the `value` attribute text node.
+     */
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1 +1 @@
-{"version":3,"file":"moni-badge.d.ts","sourceRoot":"","sources":["../../src/components/moni-badge.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,SAAU,SAAQ,WAAW;IACZ,KAAK,SAAM;IAExC,QAAQ,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,EAAE,CAAM;IAEjE,KAAK,EAAE,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,EAAE,CAAM;IAE7C,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAW;IACpB,MAAM,UAAS;IACf,MAAM,UAAS;IAElD,iBAAiB;IAY1B,OAAgB,MAAM,4BAqEpB;IAEO,MAAM;CAYf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"moni-badge.d.ts","sourceRoot":"","sources":["../../src/components/moni-badge.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,qBACa,SAAU,SAAQ,WAAW;IACzC;;;;;;;;OAQG;IAC0B,KAAK,SAAM;IAExC;;;;;;;;;;;;OAYG;IAEH,QAAQ,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,EAAE,CAAM;IAEjE;;;;;;;;;;;OAWG;IAEH,KAAK,EAAE,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,EAAE,CAAM;IAE7C;;;;;;;;;;OAUG;IAEH,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAW;IAEhE;;;;;;;;OAQG;IACyC,MAAM,UAAS;IAE3D;;;;;;;;OAQG;IACyC,MAAM,UAAS;IAE3D;;;;;;;OAOG;IACM,iBAAiB;IAY1B,OAAgB,MAAM,4BAqEpB;IAEF;;;;;;;;;;;OAWG;IACM,MAAM;CAYf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD;AAED,eAAe,SAAS,CAAC"}

package/dist/components/moni-badge.js

@@ -1,3 +1,9 @@
+/**
+ * @file components/moni-badge.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,36 +14,126 @@ import { html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 /**
- * Badge that faithfully ports BeerCSS's `.badge` styles.
+ * Material Design 3 Badge component.
+ *
+ * Badges are small status descriptors anchored to a parent element, used to
+ * convey supplementary information such as a notification count, online
+ * status, or selection indicator.
+ *
+ * **Positioning contract:**
+ * The badge uses `position: absolute` and anchors to the parent element.
+ * On `connectedCallback`, if the parent's computed `position` is `'static'`,
+ * the badge automatically sets `parent.style.position = 'relative'`.
+ * Consumers do not need to manually add `position: relative` to the parent.
+ *
+ * **Rendering model:**
+ * The `:host` displays as `contents`, making it transparent to layout.
+ * Only the inner `.badge` span is visually rendered. This allows the badge
+ * to be dropped inside any element without affecting its layout flow.
  *
- * BeerCSS `.badge` uses:
- *  - `position: absolute; inset: 50% auto auto 50%; transform: translate(var(--_x), var(--_y))`
- *  - Default: --_x: 0, --_y: -100% → top-right corner
+ * @example
+ * ```html
+ * <!-- Notification badge on a button -->
+ * <div style="position: relative; display: inline-flex;">
+ *   <moni-button icon="notifications" variant="text"></moni-button>
+ *   <moni-badge value="5"></moni-badge>
+ * </div>
+ * ```
  *
- * The parent element MUST have `position: relative` for the badge to anchor correctly.
- * We ensure this in connectedCallback.
+ * @example
+ * ```html
+ * <!-- Inline dot badge for status -->
+ * <moni-badge shape="min" color="primary" inline></moni-badge>
+ * Online
+ * ```
  *
- * Attributes:
- *  - value:    text content (also accepts slotted content)
- *  - position: '' (top-right default) | top | bottom | left | right | none
- *  - shape:    '' (round) | circle | square | min
- *  - color:    error (default) | primary | secondary | tertiary
- *  - border:   present → outlined badge (BeerCSS .badge.border)
- *  - inline:   present → badge becomes inline (BeerCSS .badge.none)
+ * @csspart badge - The badge `<span>` element. Override `background-color`,
+ *                  `color`, or `border-radius` to customize appearance.
  */
 let MoniBadge = class MoniBadge extends MoniElement {
     constructor() {
         super(...arguments);
+        /**
+         * Text content of the badge label.
+         *
+         * Also accepts slotted content — the default slot inside the badge span
+         * falls back to this value when no children are slotted.
+         * Use an empty string with `shape="min"` to render a dot-only badge.
+         *
+         * @default ''
+         */
         this.value = '';
+        /**
+         * Anchor position relative to the parent element's edges.
+         *
+         * Uses `inset: 50% auto auto 50%` as the base and adjusts translation:
+         * - `''` (default) — top-right corner (translate: 0, -100%).
+         * - `'top'`    — same as default, explicit alias.
+         * - `'bottom'` — bottom-right corner (translate: 0, 0).
+         * - `'left'`   — top-left corner (translate: -100%, -100%).
+         * - `'right'`  — top-right corner (translate: 0, -100%).
+         * - `'none'`   — disables absolute positioning; see also the `inline` attribute.
+         *
+         * @default ''
+         */
         this.position = '';
+        /**
+         * Shape of the badge container.
+         *
+         * - `''` (default) — Rounded pill shape (border-radius: 1rem).
+         * - `'circle'`     — Alias for pill; the badge is always circular when the
+         *                    content is a single character or absent.
+         * - `'square'`     — No border-radius (angular badge).
+         * - `'min'`        — Dot only; content is hidden via `display: none` and the
+         *                    shape is clipped to a small circle via `clip-path`.
+         *
+         * @default ''
+         */
         this.shape = '';
+        /**
+         * Semantic color role of the badge.
+         *
+         * Maps to the M3 color palette roles:
+         * - `'error'` (default) — Red; standard for notification counts and alerts.
+         * - `'primary'`         — Brand primary color; for selection or active states.
+         * - `'secondary'`       — Secondary accent; for supplementary indicators.
+         * - `'tertiary'`        — Tertiary accent; for decorative or informational badges.
+         *
+         * @default 'error'
+         */
         this.color = 'error';
+        /**
+         * When `true`, the badge renders inline (resets `position: absolute` to
+         * `position: relative`) rather than anchoring to the parent.
+         *
+         * Equivalent to BeerCSS's `.badge.none` class. Use for inline status
+         * indicators that flow within text or flex containers.
+         *
+         * @default false
+         */
         this.inline = false;
+        /**
+         * When present, renders the badge with an outlined style:
+         * - Background becomes `--surface` (same as the page background).
+         * - Border and text color use the palette color token (e.g. `--error`).
+         *
+         * Equivalent to BeerCSS's `.badge.border` class.
+         *
+         * @default false
+         */
         this.border = false;
     }
+    /**
+     * Ensures the parent element can contain the absolutely-positioned badge.
+     *
+     * Reads the parent's computed `position` via `getComputedStyle`. If it is
+     * `'static'` (the browser default), sets `parent.style.position = 'relative'`
+     * so the badge anchors correctly. This is a convenience that avoids requiring
+     * consumers to remember to add `position: relative` to the parent themselves.
+     */
     connectedCallback() {
         super.connectedCallback();
-        // BeerCSS requirement: parent must be position:relative for badge to anchor
+        // Ensure the badge's absolutely-positioned anchor point is correct.
         const parent = this.parentElement;
         if (parent) {
             const computed = getComputedStyle(parent);
@@ -116,6 +212,18 @@ let MoniBadge = class MoniBadge extends MoniElement {
 			.badge.min { clip-path: circle(18.75% at 50% 50%); }
 		`
     ]; }
+    /**
+     * Renders the badge span with the computed class list.
+     *
+     * Class composition:
+     * - `'badge'`       — always present (base styles).
+     * - `this.position` — position variant class (e.g. `'bottom'`, `'left'`).
+     * - `this.shape`    — shape variant class (e.g. `'min'`, `'square'`).
+     * - `'none'`        — added when `inline=true` to reset absolute positioning.
+     *
+     * Falsy values are filtered out so no extra spaces appear in the class string.
+     * The default slot falls back to the `value` attribute text node.
+     */
     render() {
         const classes = [
             'badge',

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

@@ -1,30 +1,135 @@
+/**
+ * @file components/moni-bottom-sheet.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
 import { MoniElement } from './_base/index.js';
 /**
- * Visual-only bottom sheet. Renders a `<dialog>` that the consumer opens
- * by calling `dialog.showModal()` from the light DOM. The `open` attribute
- * mirrors that state.
- *
- * Attributes:
- *  - open:  present → visibility on
- *  - size:  small | medium (default) | large | auto
- *  - modal: present → backdrop rendered
- *  - title: heading text
- *
- * Slots:
- *  - handle:  grab handle
- *  - default: body
- *  - footer:  action buttons
+ * Material Design 3 Bottom Sheet component.
+ *
+ * Bottom sheets are surfaces anchored to the bottom of the screen that
+ * supplement the main view. They display supplementary content, contextual
+ * actions, or task flows without fully obscuring the primary content.
+ *
+ * **M3 spec reference:** `m3-docs/components/sheets-bottom/specs.md`
+ *
+ * **Implementation note — native `<dialog>` element:**
+ * Like `<moni-dialog>`, this component wraps the native `<dialog>` element.
+ * The `open` property drives `dialog.showModal()` / `dialog.close()`. When
+ * `modal=true` (default), a `::backdrop` scrim is rendered automatically.
+ *
+ * **Teleportation (body-level mounting):**
+ * When `positioning="body"` (default), the component moves itself to
+ * `document.body` on `connectedCallback` so the fixed-bottom dialog renders
+ * above all stacking contexts. On `disconnectedCallback`, it is moved back
+ * to its original DOM position. This avoids clipping by `overflow: hidden`
+ * or `transform` ancestors.
+ *
+ * **Sizes:**
+ * - `small`  — Compact sheet; suitable for simple action menus.
+ * - `medium` — Standard height (default).
+ * - `large`  — Expanded height (`expandedHeight` controls the max block-size).
+ * - `auto`   — Content-driven height.
+ *
+ * @example
+ * ```html
+ * <moni-bottom-sheet title="Share">
+ *   <moni-list-item icon="share">Copy link</moni-list-item>
+ *   <moni-list-item icon="mail">Send via email</moni-list-item>
+ * </moni-bottom-sheet>
+ *
+ * <script>
+ *   document.querySelector('moni-bottom-sheet').open = true;
+ * </script>
+ * ```
+ *
+ * @slot default - The body content of the bottom sheet.
+ * @slot handle  - The drag handle area at the top of the sheet.
+ * @slot footer  - Action buttons at the bottom of the sheet.
+ *
+ * @csspart dialog - The native `<dialog>` element.
+ * @csspart header - The header container with title and close button.
+ * @csspart body   - The scrollable body content area.
+ * @csspart footer - The footer action buttons area.
  */
 export declare class MoniBottomSheet extends MoniElement {
+    /**
+     * Controls the open/closed state of the bottom sheet.
+     *
+     * When set to `true`, calls `dialog.showModal()` or `dialog.show()`
+     * depending on the `modal` property. When set to `false`, calls `dialog.close()`.
+     *
+     * @default false
+     */
     open: boolean;
+    /**
+     * Height variant of the sheet container.
+     *
+     * - `'small'`  — Compact; suitable for quick confirmations.
+     * - `'medium'` — Standard height (default).
+     * - `'large'`  — Fills `expandedHeight` of the viewport.
+     * - `'auto'`   — Content-driven; height adapts to the slotted content.
+     *
+     * @default 'medium'
+     */
     size: 'small' | 'medium' | 'large' | 'auto';
+    /**
+     * When `true` (default), the sheet opens as a modal dialog with a backdrop
+     * scrim. When `false`, it opens as a non-modal overlay with no scrim.
+     *
+     * @default true
+     */
     modal: boolean;
+    /**
+     * Heading text displayed in the sheet's header area.
+     *
+     * @default ''
+     */
     title: string;
+    /**
+     * Controls how the sheet is positioned in the document.
+     *
+     * - `'body'` (default) — Teleports the element to `document.body` so
+     *   the fixed overlay renders above all stacking contexts.
+     * - `'fixed'` — Fixed positioning within its current DOM subtree.
+     * - `'absolute'` — Absolute within the nearest positioned ancestor.
+     * - `'static'` — Static flow (rarely needed; for testing only).
+     *
+     * @default 'fixed'
+     */
     positioning: 'body' | 'fixed' | 'absolute' | 'static';
+    /**
+     * Maximum block-size (height) of the sheet when `size="large"`.
+     *
+     * Accepts any valid CSS `max-block-size` value (e.g. `'85%'`, `'600px'`).
+     * Defaults to `'85%'` which is the M3-recommended maximum for bottom sheets
+     * on compact screens.
+     *
+     * @default '85%'
+     */
     expandedHeight: string;
+    /**
+     * Optional maximum inline-size (width) constraint for the sheet.
+     *
+     * When set (e.g. `'640px'`), the sheet will not exceed this width even on
+     * wide displays. Useful for tablet/desktop breakpoints where a centered
+     * modal is preferred over a full-width sheet.
+     *
+     * @default '' (no constraint)
+     */
     maxWidth: string;
+    /**
+     * Original parent node before teleportation to `document.body`.
+     * Used to restore the element's DOM position in `disconnectedCallback`.
+     */
     private _originalParent;
+    /**
+     * Original next sibling before teleportation to `document.body`.
+     * Used alongside `_originalParent` to restore the exact DOM position.
+     */
     private _originalSibling;
+    /** Direct reference to the native `<dialog>` element. */
     private _dialog;
     private _isDragging;
     private _startY;
@@ -41,7 +146,7 @@ export declare class MoniBottomSheet extends MoniElement {
     updated(changed: Map<string, unknown>): void;
     disconnectedCallback(): 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-bottom-sheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"moni-bottom-sheet.d.ts","sourceRoot":"","sources":["../../src/components/moni-bottom-sheet.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;GAeG;AACH,qBACa,eAAgB,SAAQ,WAAW;IACH,IAAI,UAAS;IAEzD,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAY;IACX,KAAK,UAAQ;IAC5B,KAAK,SAAM;IAExC,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAW;IAEhE,cAAc,SAAS;IAEvB,QAAQ,SAAM;IAEd,OAAO,CAAC,eAAe,CAAqB;IAC5C,OAAO,CAAC,gBAAgB,CAAqB;IAE5B,OAAO,CAAC,OAAO,CAAqB;IAErD,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,oBAAoB,CAAK;IACjC,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,eAAe;IAcvB,OAAO,CAAC,cAAc;IAkBtB,OAAO,CAAC,cAAc;IAkCtB,OAAO,CAAC,YAAY;IAwFpB,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,cAAc;IAyBb,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IA4BrC,oBAAoB;IAO7B,OAAgB,MAAM,4BAyHpB;IAEO,MAAM;CAsBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"moni-bottom-sheet.d.ts","sourceRoot":"","sources":["../../src/components/moni-bottom-sheet.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,qBACa,eAAgB,SAAQ,WAAW;IAC/C;;;;;;;OAOG;IACyC,IAAI,UAAS;IAEzD;;;;;;;;;OASG;IAEH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAY;IAEvD;;;;;OAKG;IACyC,KAAK,UAAQ;IAEzD;;;;OAIG;IAC0B,KAAK,SAAM;IAExC;;;;;;;;;;OAUG;IAEH,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAW;IAEhE;;;;;;;;OAQG;IAEH,cAAc,SAAS;IAEvB;;;;;;;;OAQG;IAEH,QAAQ,SAAM;IAEd;;;OAGG;IACH,OAAO,CAAC,eAAe,CAAqB;IAE5C;;;OAGG;IACH,OAAO,CAAC,gBAAgB,CAAqB;IAE7C,yDAAyD;IACxC,OAAO,CAAC,OAAO,CAAqB;IACrD,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,oBAAoB,CAAK;IACjC,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,eAAe;IAcvB,OAAO,CAAC,cAAc;IAkBtB,OAAO,CAAC,cAAc;IAkCtB,OAAO,CAAC,YAAY;IAwFpB,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,cAAc;IAyBb,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IA4BrC,oBAAoB;IAO7B,OAAgB,MAAM,4BAyHpB;IAEO,MAAM;CAsBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD;AAED,eAAe,eAAe,CAAC"}

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

@@ -1,3 +1,9 @@
+/**
+ * @file components/moni-bottom-sheet.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -8,32 +14,130 @@ import { html, css } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 /**
- * Visual-only bottom sheet. Renders a `<dialog>` that the consumer opens
- * by calling `dialog.showModal()` from the light DOM. The `open` attribute
- * mirrors that state.
+ * Material Design 3 Bottom Sheet component.
+ *
+ * Bottom sheets are surfaces anchored to the bottom of the screen that
+ * supplement the main view. They display supplementary content, contextual
+ * actions, or task flows without fully obscuring the primary content.
+ *
+ * **M3 spec reference:** `m3-docs/components/sheets-bottom/specs.md`
+ *
+ * **Implementation note — native `<dialog>` element:**
+ * Like `<moni-dialog>`, this component wraps the native `<dialog>` element.
+ * The `open` property drives `dialog.showModal()` / `dialog.close()`. When
+ * `modal=true` (default), a `::backdrop` scrim is rendered automatically.
+ *
+ * **Teleportation (body-level mounting):**
+ * When `positioning="body"` (default), the component moves itself to
+ * `document.body` on `connectedCallback` so the fixed-bottom dialog renders
+ * above all stacking contexts. On `disconnectedCallback`, it is moved back
+ * to its original DOM position. This avoids clipping by `overflow: hidden`
+ * or `transform` ancestors.
+ *
+ * **Sizes:**
+ * - `small`  — Compact sheet; suitable for simple action menus.
+ * - `medium` — Standard height (default).
+ * - `large`  — Expanded height (`expandedHeight` controls the max block-size).
+ * - `auto`   — Content-driven height.
+ *
+ * @example
+ * ```html
+ * <moni-bottom-sheet title="Share">
+ *   <moni-list-item icon="share">Copy link</moni-list-item>
+ *   <moni-list-item icon="mail">Send via email</moni-list-item>
+ * </moni-bottom-sheet>
+ *
+ * <script>
+ *   document.querySelector('moni-bottom-sheet').open = true;
+ * </script>
+ * ```
  *
- * Attributes:
- *  - open:  present → visibility on
- *  - size:  small | medium (default) | large | auto
- *  - modal: present → backdrop rendered
- *  - title: heading text
+ * @slot default - The body content of the bottom sheet.
+ * @slot handle  - The drag handle area at the top of the sheet.
+ * @slot footer  - Action buttons at the bottom of the sheet.
  *
- * Slots:
- *  - handle:  grab handle
- *  - default: body
- *  - footer:  action buttons
+ * @csspart dialog - The native `<dialog>` element.
+ * @csspart header - The header container with title and close button.
+ * @csspart body   - The scrollable body content area.
+ * @csspart footer - The footer action buttons area.
  */
 let MoniBottomSheet = class MoniBottomSheet extends MoniElement {
     constructor() {
         super(...arguments);
+        /**
+         * Controls the open/closed state of the bottom sheet.
+         *
+         * When set to `true`, calls `dialog.showModal()` or `dialog.show()`
+         * depending on the `modal` property. When set to `false`, calls `dialog.close()`.
+         *
+         * @default false
+         */
         this.open = false;
+        /**
+         * Height variant of the sheet container.
+         *
+         * - `'small'`  — Compact; suitable for quick confirmations.
+         * - `'medium'` — Standard height (default).
+         * - `'large'`  — Fills `expandedHeight` of the viewport.
+         * - `'auto'`   — Content-driven; height adapts to the slotted content.
+         *
+         * @default 'medium'
+         */
         this.size = 'medium';
+        /**
+         * When `true` (default), the sheet opens as a modal dialog with a backdrop
+         * scrim. When `false`, it opens as a non-modal overlay with no scrim.
+         *
+         * @default true
+         */
         this.modal = true;
+        /**
+         * Heading text displayed in the sheet's header area.
+         *
+         * @default ''
+         */
         this.title = '';
+        /**
+         * Controls how the sheet is positioned in the document.
+         *
+         * - `'body'` (default) — Teleports the element to `document.body` so
+         *   the fixed overlay renders above all stacking contexts.
+         * - `'fixed'` — Fixed positioning within its current DOM subtree.
+         * - `'absolute'` — Absolute within the nearest positioned ancestor.
+         * - `'static'` — Static flow (rarely needed; for testing only).
+         *
+         * @default 'fixed'
+         */
         this.positioning = 'fixed';
+        /**
+         * Maximum block-size (height) of the sheet when `size="large"`.
+         *
+         * Accepts any valid CSS `max-block-size` value (e.g. `'85%'`, `'600px'`).
+         * Defaults to `'85%'` which is the M3-recommended maximum for bottom sheets
+         * on compact screens.
+         *
+         * @default '85%'
+         */
         this.expandedHeight = '85%';
+        /**
+         * Optional maximum inline-size (width) constraint for the sheet.
+         *
+         * When set (e.g. `'640px'`), the sheet will not exceed this width even on
+         * wide displays. Useful for tablet/desktop breakpoints where a centered
+         * modal is preferred over a full-width sheet.
+         *
+         * @default '' (no constraint)
+         */
         this.maxWidth = '';
+        /**
+         * Original parent node before teleportation to `document.body`.
+         * Used to restore the element's DOM position in `disconnectedCallback`.
+         */
         this._originalParent = null;
+        /**
+         * Original next sibling before teleportation to `document.body`.
+         * Used alongside `_originalParent` to restore the exact DOM position.
+         */
         this._originalSibling = null;
         this._isDragging = false;
         this._startY = 0;