@moni-labs/moni-ui 0.2.0 → 0.3.0

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

@@ -1 +1 @@
-{"version":3,"file":"moni-tooltip.d.ts","sourceRoot":"","sources":["../../src/components/moni-tooltip.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBACa,WAAY,SAAQ,WAAW;IACd,IAAI,SAAM;IAEvC,QAAQ,EACL,KAAK,GACL,WAAW,GACX,SAAS,GACT,QAAQ,GACR,cAAc,GACd,YAAY,CAAS;IAExB,IAAI,EAAE,EAAE,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAM;IACD,IAAI,UAAS;IAEzD,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,WAAW,CAAmD;IACtE;;;;OAIG;IACH,OAAO,CAAC,WAAW,CAAuB;IAEjC,iBAAiB;IAoCjB,oBAAoB;IAe7B,OAAO,CAAC,KAAK,CAOX;IAEF,OAAO,CAAC,KAAK,CAOX;IAEF,OAAO,CAAC,iBAAiB;IAMzB;;;OAGG;IACH,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,OAAgB,MAAM,4BA2JpB;IAEO,MAAM;CAgBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"moni-tooltip.d.ts","sourceRoot":"","sources":["../../src/components/moni-tooltip.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,qBACa,WAAY,SAAQ,WAAW;IACd,IAAI,SAAM;IAEvC,QAAQ,EACL,KAAK,GACL,WAAW,GACX,SAAS,GACT,QAAQ,GACR,cAAc,GACd,YAAY,CAAS;IAExB,IAAI,EAAE,EAAE,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAM;IACD,IAAI,UAAS;IAEzD,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,WAAW,CAAmD;IACtE;;;;OAIG;IACH,OAAO,CAAC,WAAW,CAAuB;IAEjC,iBAAiB;IAoCjB,oBAAoB;IAe7B,OAAO,CAAC,KAAK,CAOX;IAEF,OAAO,CAAC,KAAK,CAOX;IAEF,OAAO,CAAC,iBAAiB;IAMzB;;;OAGG;IACH,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,OAAgB,MAAM,4BA2JpB;IAEO,MAAM;CAgBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD;AAED,eAAe,WAAW,CAAC"}

package/dist/components/moni-tooltip.js

@@ -1,3 +1,9 @@
+/**
+ * @file components/moni-tooltip.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,34 +14,58 @@ import { html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 /**
- * Tooltip that faithfully ports BeerCSS's `.tooltip` styles and adds M3
- * Expressive semantics.
+ * Material Design 3 Tooltip component.
+ *
+ * Tooltips provide contextual text labels or rich content that appear when
+ * users hover over, focus on, or tap an element. They surface supplementary
+ * information that helps users understand interface elements without
+ * permanently occupying screen space.
+ *
+ * **M3 spec reference:** `m3-docs/components/tooltips/specs.md`
+ *
+ * **Types:**
+ * - **Plain** (default) — Text-only label for simple descriptions (max 1 line).
+ * - **Rich** (`rich` attribute) — HTML content including formatted text,
+ *   links, and icons. Rich tooltips can contain multiple lines and action links.
+ *
+ * **Placements:**
+ * - `top` (default), `top-start`, `top-end`
+ * - `bottom`, `bottom-start`, `bottom-end`
+ *
+ * **Trigger mechanism:**
+ * The tooltip uses `position: absolute` inside the parent element. The parent
+ * must have `position: relative` (set automatically via `connectedCallback`).
+ * Hover/focus events on the parent trigger the tooltip's CSS `:hover` and
+ * `:focus-within` selectors, which drive the show/hide transition.
+ *
+ * **Accessibility:**
+ * - The tooltip has `role="tooltip"`.
+ * - For keyboard accessibility, the parent should have `aria-describedby`
+ *   pointing to the tooltip's `id` attribute. The component exposes a
+ *   `tooltipId` getter for this purpose.
+ * - The `Escape` key closes rich tooltips.
  *
- * **M3 spec** (`m3-docs/components/tooltips/specs.md`):
- *  - Two types: **plain** (text only) and **rich** (HTML content).
- *  - 6 placements: top, top-start, top-end, bottom, bottom-start, bottom-end.
- *  - Trigger: hover (mouse) or focus (keyboard) on the parent.
- *  - Auto-dismiss: tooltip hides on `mouseleave` / `focusout` / `Escape`.
+ * @example
+ * ```html
+ * <!-- Plain tooltip -->
+ * <button aria-describedby="save-tip">
+ *   Save
+ *   <moni-tooltip id="save-tip" text="Ctrl+S"></moni-tooltip>
+ * </button>
  *
- * The component delegates trigger detection to the parent element (consistent
- * with the original BeerCSS port). The tooltip element is `position: absolute`
- * inside the parent so it follows the trigger naturally.
+ * <!-- Rich tooltip -->
+ * <button>
+ *   Filter
+ *   <moni-tooltip rich position="bottom">
+ *     <strong>Filter by date</strong>
+ *     <p>Select a date range to filter results.</p>
+ *   </moni-tooltip>
+ * </button>
+ * ```
  *
- * **Accessibility**:
- *  - The tooltip has `role="tooltip"` (M3 spec).
- *  - When `rich` content is used, the parent should also have
- *    `aria-describedby="<tooltip-id>"`. The component sets a unique `id` on
- *    the tooltip element and exposes it via `tooltipId` getter.
- *  - `Escape` closes the tooltip (WAI-ARIA tooltip pattern).
+ * @slot default - Rich content for the tooltip body (only used when `rich=true`).
  *
- * Attributes:
- *  - text:      tooltip text (plain tooltip)
- *  - position:  top (default) | top-start | top-end | bottom | bottom-start | bottom-end
- *  - size:      '' (default) | small | medium | large
- *  - rich:      boolean — when true, the default slot accepts arbitrary HTML
- *               for rich content (links, icons, etc.). When false (default),
- *               the slot is rendered as text only.
- *  - id:        forwarded to the tooltip element (useful for aria-describedby)
+ * @csspart tooltip - The tooltip container element.
  */
 let MoniTooltip = class MoniTooltip extends MoniElement {
     constructor() {

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

@@ -1,27 +1,52 @@
+/**
+ * @file components/moni-typography.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
 import { MoniElement } from './_base/index.js';
 /**
- * Material 3 Typography (`m3-docs/components/`).
+ * Material Design 3 Typography component.
+ *
+ * A specialized text component that enforces the M3 type scale. It ensures
+ * typography is consistent, accessible, and correctly styled across the
+ * application without requiring manual CSS classes.
+ *
+ * **M3 spec reference:** `m3-docs/components/typography/specs.md`
+ *
+ * **Type Scale Categories:**
+ * - `display`: The largest text on the screen, reserved for short, important
+ *   text or numerals. Works best on large screens. (Renders `<h1>` by default).
+ * - `headline`: High-emphasis text for primary page/section headers.
+ *   (Renders `<h2>` by default).
+ * - `title`: Medium-emphasis text used for dialog headers or smaller section
+ *   titles. (Renders `<h3>` by default).
+ * - `body`: Standard paragraph text used for long-form content.
+ *   (Renders `<p>` by default).
+ * - `label`: Small, utilitarian text used for buttons, captions, and form
+ *   elements. (Renders `<label>` by default).
+ *
+ * Each category supports three sizes: `large`, `medium`, and `small`.
  *
- * Renders a single piece of text using the M3 type scale. The component
- * chooses both the semantic tag and the typography class based on the
- * `variant` attribute. Consumers can override the tag via `as`.
+ * **Semantic Tags:**
+ * The component automatically selects an appropriate HTML semantic tag based on
+ * the variant. You can explicitly override this by setting the `as` attribute
+ * (e.g., to render a `headline` style but using a `<span>` tag for SEO or
+ * structural reasons).
  *
- * M3 type scale (5 categories, 3 sizes each):
- *  - **display**: largest text, used for marketing or hero content.
- *  - **headline**: page-level headings (H1 equivalent).
- *  - **title**:    section headings, dialog titles.
- *  - **body**:     paragraph text.
- *  - **label**:    button text, captions.
+ * @example
+ * ```html
+ * <!-- Renders an <h1> with display-large styles -->
+ * <moni-typography variant="display" size="large">Hero Text</moni-typography>
  *
- * Each category has `large`, `medium`, and `small` sizes (per M3 spec).
+ * <!-- Renders a <p> with body-medium styles -->
+ * <moni-typography variant="body">Standard paragraph text.</moni-typography>
  *
- * Attributes:
- *  - variant: display | headline | title | body | label (default body)
- *  - size:    large | medium | small (default medium)
- *  - as:      override the rendered tag (e.g. "span", "p", "label")
+ * <!-- Overriding the semantic tag -->
+ * <moni-typography variant="title" as="span">Inline title</moni-typography>
+ * ```
  *
- * Slots:
- *  - default: text content (falls back to `text` attribute if empty)
+ * @slot default - The text content to display.
  */
 export declare class MoniTypography extends MoniElement {
     variant: 'display' | 'headline' | 'title' | 'body' | 'label';
@@ -30,7 +55,7 @@ export declare class MoniTypography extends MoniElement {
     text: string;
     /** Default semantic tag for each variant per M3 spec. */
     private static _tagFor;
-    render(): import("lit-html").TemplateResult;
+    render(): import("lit").TemplateResult;
     static styles: import("lit").CSSResult[];
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"moni-typography.d.ts","sourceRoot":"","sources":["../../src/components/moni-typography.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,cAAe,SAAQ,WAAW;IAE9C,OAAO,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAU;IAEtE,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE9C,EAAE,EAAE,MAAM,GAAG,IAAI,CAAQ;IACI,IAAI,SAAM;IAEvC,yDAAyD;IACzD,OAAO,CAAC,MAAM,CAAC,OAAO;IAiBb,MAAM;IAcf,OAAgB,MAAM,4BAkHpB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,cAAc,CAAC;KAClC;CACD;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"moni-typography.d.ts","sourceRoot":"","sources":["../../src/components/moni-typography.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qBACa,cAAe,SAAQ,WAAW;IAE9C,OAAO,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAU;IAEtE,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE9C,EAAE,EAAE,MAAM,GAAG,IAAI,CAAQ;IACI,IAAI,SAAM;IAEvC,yDAAyD;IACzD,OAAO,CAAC,MAAM,CAAC,OAAO;IAiBb,MAAM;IAcf,OAAgB,MAAM,4BAkHpB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,cAAc,CAAC;KAClC;CACD;AAED,eAAe,cAAc,CAAC"}

package/dist/components/moni-typography.js

@@ -1,3 +1,9 @@
+/**
+ * @file components/moni-typography.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,28 +16,47 @@ import { customElement, property } from 'lit/decorators.js';
 import { unsafeStatic, html as staticHtml } from 'lit/static-html.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 /**
- * Material 3 Typography (`m3-docs/components/`).
+ * Material Design 3 Typography component.
+ *
+ * A specialized text component that enforces the M3 type scale. It ensures
+ * typography is consistent, accessible, and correctly styled across the
+ * application without requiring manual CSS classes.
+ *
+ * **M3 spec reference:** `m3-docs/components/typography/specs.md`
+ *
+ * **Type Scale Categories:**
+ * - `display`: The largest text on the screen, reserved for short, important
+ *   text or numerals. Works best on large screens. (Renders `<h1>` by default).
+ * - `headline`: High-emphasis text for primary page/section headers.
+ *   (Renders `<h2>` by default).
+ * - `title`: Medium-emphasis text used for dialog headers or smaller section
+ *   titles. (Renders `<h3>` by default).
+ * - `body`: Standard paragraph text used for long-form content.
+ *   (Renders `<p>` by default).
+ * - `label`: Small, utilitarian text used for buttons, captions, and form
+ *   elements. (Renders `<label>` by default).
+ *
+ * Each category supports three sizes: `large`, `medium`, and `small`.
  *
- * Renders a single piece of text using the M3 type scale. The component
- * chooses both the semantic tag and the typography class based on the
- * `variant` attribute. Consumers can override the tag via `as`.
+ * **Semantic Tags:**
+ * The component automatically selects an appropriate HTML semantic tag based on
+ * the variant. You can explicitly override this by setting the `as` attribute
+ * (e.g., to render a `headline` style but using a `<span>` tag for SEO or
+ * structural reasons).
  *
- * M3 type scale (5 categories, 3 sizes each):
- *  - **display**: largest text, used for marketing or hero content.
- *  - **headline**: page-level headings (H1 equivalent).
- *  - **title**:    section headings, dialog titles.
- *  - **body**:     paragraph text.
- *  - **label**:    button text, captions.
+ * @example
+ * ```html
+ * <!-- Renders an <h1> with display-large styles -->
+ * <moni-typography variant="display" size="large">Hero Text</moni-typography>
  *
- * Each category has `large`, `medium`, and `small` sizes (per M3 spec).
+ * <!-- Renders a <p> with body-medium styles -->
+ * <moni-typography variant="body">Standard paragraph text.</moni-typography>
  *
- * Attributes:
- *  - variant: display | headline | title | body | label (default body)
- *  - size:    large | medium | small (default medium)
- *  - as:      override the rendered tag (e.g. "span", "p", "label")
+ * <!-- Overriding the semantic tag -->
+ * <moni-typography variant="title" as="span">Inline title</moni-typography>
+ * ```
  *
- * Slots:
- *  - default: text content (falls back to `text` attribute if empty)
+ * @slot default - The text content to display.
  */
 let MoniTypography = class MoniTypography extends MoniElement {
     constructor() {

package/dist/index.d.ts

@@ -1,7 +1,54 @@
+/**
+ * @file index.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
+/**
+ * @module @moni-labs/moni-ui
+ *
+ * Main entry point for the Moni UI component library.
+ *
+ * **What this file does:**
+ * 1. **Side-effect import** — `import './components/index.js'` triggers the
+ *    auto-registration of every `<moni-*>` custom element with the browser's
+ *    Custom Element registry. This must happen before any component is rendered
+ *    in the DOM.
+ * 2. **Re-exports** — All component classes, utilities, and TypeScript types
+ *    are re-exported so consumers get a single import path:
+ *
+ * ```ts
+ * import {
+ *   MoniButton,
+ *   getThemeEngine,
+ *   generateScheme,
+ *   type ColorScheme
+ * } from '@moni-labs/moni-ui';
+ * ```
+ *
+ * **Import strategies:**
+ * - **Full bundle** (this file): imports and registers ALL components at once.
+ *   Best for SPAs that use many components.
+ * - **Tree-shaken per-component**: import individual files from
+ *   `@moni-labs/moni-ui/components/moni-button.js` etc. to let bundlers
+ *   include only what is used. Better for apps that use a small subset.
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry Custom Element Registry}
+ */
 import './components/index.js';
 export { MoniBadge, MoniBottomSheet, MoniButton, MoniCheckbox, MoniChip, MoniColorField, MoniContextMenu, MoniDialog, MoniExpansion, MoniFileField, MoniMenu, MoniMenuItem, MoniNav, MoniNavItem, MoniProgress, MoniRadio, MoniRipple, MoniSelect, MoniSlider, MoniSnackbar, MoniStep, MoniStepper, MoniSwitch, MoniTab, MoniTabs, MoniTextarea, MoniTextField, MoniTimePicker, MoniSideSheet, MoniTooltip, MoniFab, MoniFabMenu, MoniButtonGroup, MoniSplitButton, MoniButtonSegment, MoniSegmentedButton, MoniLoadingIndicator, MoniMorphModal, MoniCarousel, MoniShape, } from './components/index.js';
+/**
+ * Theme engine singleton factory.
+ * @see {@link getThemeEngine} for full documentation.
+ */
 export { getThemeEngine, resetThemeEngine } from './utils/theme.svelte.js';
+/** TypeScript types for theme engine configuration. */
 export type { ThemeSettings, ThemeMode, ThemeDensity, ThemeRadius, ThemeFont } from './utils/theme.svelte.js';
+/**
+ * Color generation and application utilities.
+ * @see utils/color.ts for full documentation.
+ */
 export { generateScheme, applySchemeToDocument, getDefaultSeed, hexToHsl, hslToHex } from './utils/color.js';
+/** TypeScript types for the color system. */
 export type { ColorScheme, ContrastLevel } from './utils/color.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,uBAAuB,CAAC;AAG/B,OAAO,EACN,SAAS,EACT,eAAe,EACf,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,eAAe,EACf,UAAU,EACV,aAAa,EACb,aAAa,EACb,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,UAAU,EACV,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,UAAU,EACV,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,cAAc,EACd,aAAa,EACb,WAAW,EACX,OAAO,EACP,WAAW,EACX,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,mBAAmB,EACnB,oBAAoB,EACpB,cAAc,EACd,YAAY,EACZ,SAAS,GACT,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,YAAY,EACX,aAAa,EACb,SAAS,EACT,YAAY,EACZ,WAAW,EACX,SAAS,EACT,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACN,cAAc,EACd,qBAAqB,EACrB,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAOH,OAAO,uBAAuB,CAAC;AAS/B,OAAO,EACN,SAAS,EACT,eAAe,EACf,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,eAAe,EACf,UAAU,EACV,aAAa,EACb,aAAa,EACb,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,UAAU,EACV,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,UAAU,EACV,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,cAAc,EACd,aAAa,EACb,WAAW,EACX,OAAO,EACP,WAAW,EACX,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,mBAAmB,EACnB,oBAAoB,EACpB,cAAc,EACd,YAAY,EACZ,SAAS,GACT,MAAM,uBAAuB,CAAC;AAM/B;;;GAGG;AACH,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3E,uDAAuD;AACvD,YAAY,EACX,aAAa,EACb,SAAS,EACT,YAAY,EACZ,WAAW,EACX,SAAS,EACT,MAAM,yBAAyB,CAAC;AAEjC;;;GAGG;AACH,OAAO,EACN,cAAc,EACd,qBAAqB,EACrB,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,MAAM,kBAAkB,CAAC;AAE1B,6CAA6C;AAC7C,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -1,7 +1,64 @@
+/**
+ * @file index.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
+/**
+ * @module @moni-labs/moni-ui
+ *
+ * Main entry point for the Moni UI component library.
+ *
+ * **What this file does:**
+ * 1. **Side-effect import** — `import './components/index.js'` triggers the
+ *    auto-registration of every `<moni-*>` custom element with the browser's
+ *    Custom Element registry. This must happen before any component is rendered
+ *    in the DOM.
+ * 2. **Re-exports** — All component classes, utilities, and TypeScript types
+ *    are re-exported so consumers get a single import path:
+ *
+ * ```ts
+ * import {
+ *   MoniButton,
+ *   getThemeEngine,
+ *   generateScheme,
+ *   type ColorScheme
+ * } from '@moni-labs/moni-ui';
+ * ```
+ *
+ * **Import strategies:**
+ * - **Full bundle** (this file): imports and registers ALL components at once.
+ *   Best for SPAs that use many components.
+ * - **Tree-shaken per-component**: import individual files from
+ *   `@moni-labs/moni-ui/components/moni-button.js` etc. to let bundlers
+ *   include only what is used. Better for apps that use a small subset.
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry Custom Element Registry}
+ */
+// ─────────────────────────────────────────────────────────────────────────────
 // Auto-register all Moni UI Web Components
+// ─────────────────────────────────────────────────────────────────────────────
+// This import has side effects: it calls customElements.define() for every
+// <moni-*> element. Bundlers must NOT tree-shake this import.
 import './components/index.js';
-// Web Components (visual-only)
+// ─────────────────────────────────────────────────────────────────────────────
+// Web Component class exports
+// ─────────────────────────────────────────────────────────────────────────────
+// Exporting the class enables TypeScript consumers to:
+//  - Subclass components for customization.
+//  - Use the class in type narrowing (instanceof MoniButton).
+//  - Access static members and properties programmatically.
 export { MoniBadge, MoniBottomSheet, MoniButton, MoniCheckbox, MoniChip, MoniColorField, MoniContextMenu, MoniDialog, MoniExpansion, MoniFileField, MoniMenu, MoniMenuItem, MoniNav, MoniNavItem, MoniProgress, MoniRadio, MoniRipple, MoniSelect, MoniSlider, MoniSnackbar, MoniStep, MoniStepper, MoniSwitch, MoniTab, MoniTabs, MoniTextarea, MoniTextField, MoniTimePicker, MoniSideSheet, MoniTooltip, MoniFab, MoniFabMenu, MoniButtonGroup, MoniSplitButton, MoniButtonSegment, MoniSegmentedButton, MoniLoadingIndicator, MoniMorphModal, MoniCarousel, MoniShape, } from './components/index.js';
-// Utils
+// ─────────────────────────────────────────────────────────────────────────────
+// Utility exports
+// ─────────────────────────────────────────────────────────────────────────────
+/**
+ * Theme engine singleton factory.
+ * @see {@link getThemeEngine} for full documentation.
+ */
 export { getThemeEngine, resetThemeEngine } from './utils/theme.svelte.js';
+/**
+ * Color generation and application utilities.
+ * @see utils/color.ts for full documentation.
+ */
 export { generateScheme, applySchemeToDocument, getDefaultSeed, hexToHsl, hslToHex } from './utils/color.js';

package/dist/styles/tailwind.css

@@ -0,0 +1,67 @@
+/**
+ * @file styles/tailwind.css
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
+
+@import 'tailwindcss';
+
+@theme {
+	/* ─── Material Design 3 Expressive tokens integration ─── */
+	--color-primary: var(--moni-primary);
+	--color-on-primary: var(--moni-on-primary);
+	--color-primary-container: var(--moni-primary-container);
+	--color-on-primary-container: var(--moni-on-primary-container);
+
+	--color-secondary: var(--moni-secondary);
+	--color-on-secondary: var(--moni-on-secondary);
+	--color-secondary-container: var(--moni-secondary-container);
+	--color-on-secondary-container: var(--moni-on-secondary-container);
+
+	--color-tertiary: var(--moni-tertiary);
+	--color-on-tertiary: var(--moni-on-tertiary);
+	--color-tertiary-container: var(--moni-tertiary-container);
+	--color-on-tertiary-container: var(--moni-on-tertiary-container);
+
+	--color-error: var(--moni-error);
+	--color-on-error: var(--moni-on-error);
+	--color-error-container: var(--moni-error-container);
+	--color-on-error-container: var(--moni-on-error-container);
+
+	--color-background: var(--moni-background);
+	--color-on-background: var(--moni-on-background);
+	--color-surface: var(--moni-surface);
+	--color-on-surface: var(--moni-on-surface);
+	--color-surface-variant: var(--moni-surface-variant);
+	--color-on-surface-variant: var(--moni-on-surface-variant);
+
+	--color-outline: var(--moni-outline);
+	--color-outline-variant: var(--moni-outline-variant);
+
+	--color-surface-container-lowest: var(--moni-surface-container-lowest);
+	--color-surface-container-low: var(--moni-surface-container-low);
+	--color-surface-container: var(--moni-surface-container);
+	--color-surface-container-high: var(--moni-surface-container-high);
+	--color-surface-container-highest: var(--moni-surface-container-highest);
+
+	--color-inverse-surface: var(--moni-inverse-surface);
+	--color-inverse-on-surface: var(--moni-inverse-on-surface);
+	--color-inverse-primary: var(--moni-inverse-primary);
+
+	/* ─── Typography ─── */
+	--font-sans: var(--moni-font-sans, 'Geist', system-ui, -apple-system, sans-serif);
+	--font-serif: var(--moni-font-title, 'Instrument Serif', Georgia, serif);
+	--font-mono: 'Geist Mono', 'Fira Code', monospace;
+	--font-brand: var(--moni-font-sans, 'Geist', system-ui, sans-serif);
+	--font-title: var(--moni-font-title, 'Instrument Serif', Georgia, serif);
+	--font-icon: var(--moni-font-icon, 'Material Symbols Rounded');
+
+	/* ─── Radius scale ─── */
+	--radius-base: var(--moni-radius-base, 12px);
+	--radius-sm: calc(var(--moni-radius-base, 12px) * 0.5);
+	--radius-md: var(--moni-radius-base, 12px);
+	--radius-lg: calc(var(--moni-radius-base, 12px) * 1.5);
+	--radius-xl: calc(var(--moni-radius-base, 12px) * 2);
+	--radius-full: 9999px;
+}