@moni-labs/moni-ui 0.2.0 → 0.3.0

package/dist/components/_base/index.d.ts

@@ -1,3 +1,28 @@
+/**
+ * @file components/_base/index.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
+/**
+ * @module _base
+ *
+ * Re-exports the foundational building blocks shared by all Moni Web Components.
+ *
+ * **Exports:**
+ * - {@link MoniElement}     — Abstract LitElement base class every component extends.
+ * - {@link sharedStyles}    — Baseline CSS: box-sizing, token bridge, utility classes.
+ * - {@link fieldStyles}     — CSS for field-like input components (text-field, select, etc.).
+ *
+ * `interactionStyles` is intentionally **not** re-exported from this barrel —
+ * it should be imported directly by components that need state layers to avoid
+ * adding its CSS to components that don't use `.interactive`.
+ *
+ * @example
+ * ```ts
+ * import { MoniElement, sharedStyles, fieldStyles } from './_base/index.js';
+ * ```
+ */
 export { MoniElement } from './moni-element.js';
 export { sharedStyles } from './shared-styles.js';
 export { fieldStyles } from './field-styles.js';

package/dist/components/_base/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/_base/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/_base/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/_base/index.js

@@ -1,3 +1,28 @@
+/**
+ * @file components/_base/index.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
+/**
+ * @module _base
+ *
+ * Re-exports the foundational building blocks shared by all Moni Web Components.
+ *
+ * **Exports:**
+ * - {@link MoniElement}     — Abstract LitElement base class every component extends.
+ * - {@link sharedStyles}    — Baseline CSS: box-sizing, token bridge, utility classes.
+ * - {@link fieldStyles}     — CSS for field-like input components (text-field, select, etc.).
+ *
+ * `interactionStyles` is intentionally **not** re-exported from this barrel —
+ * it should be imported directly by components that need state layers to avoid
+ * adding its CSS to components that don't use `.interactive`.
+ *
+ * @example
+ * ```ts
+ * import { MoniElement, sharedStyles, fieldStyles } from './_base/index.js';
+ * ```
+ */
 export { MoniElement } from './moni-element.js';
 export { sharedStyles } from './shared-styles.js';
 export { fieldStyles } from './field-styles.js';

package/dist/components/_base/interaction-styles.d.ts

@@ -1,21 +1,48 @@
 /**
- * M3 State Layer system — CSS-only implementation.
+ * @file components/_base/interaction-styles.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
+/**
+ * Material Design 3 State Layer system — CSS-only implementation.
+ *
+ * Material Design 3 defines **state layers** as semi-transparent color overlays
+ * that communicate interactive state visually to the user. They are applied on
+ * top of a component's background without altering its base color, allowing
+ * correct rendering across all surface and container colors.
  *
- * Material Design 3 defines "state layers" as semi-transparent overlays that
- * communicate interactive state: hover, focus, pressed, dragged. These are
- * applied via a `::before` pseudo-element so they compose with any background.
+ * **M3 state layer opacity values (from the spec):**
+ * | State     | Opacity |
+ * |-----------|---------|
+ * | Hover     | 8%      |
+ * | Focus     | 12%     |
+ * | Pressed   | 12%     |
+ * | Dragged   | 16%     |
  *
- * The host element MUST have:
- *   position: relative   (so the pseudo-element positions inside it)
- *   overflow: hidden     (so the layer clips to the element's shape)
+ * **Implementation strategy:**
+ * The state layer is rendered as a `::before` pseudo-element whose `opacity`
+ * transitions between states. A second `::after` pseudo-element provides a
+ * CSS-only center-origin ripple on press. For pointer-origin ripples
+ * (where the ripple starts at the tap/click point), use `<moni-ripple>` instead.
  *
- * Usage — include in any interactive component's `static styles`:
- *   static override styles = [sharedStyles, interactionStyles, css`...`];
+ * **Host element requirements:**
+ * The element bearing the `.interactive` class MUST have:
+ * - `position: relative` — so `::before` / `::after` are contained within it.
+ * - `overflow: hidden` — so the expanding ripple clips to the element's shape.
+ * - `isolation: isolate` — prevents the pseudo-elements from bleeding into
+ *   stacking contexts created by parent elements.
  *
- * The `.interactive` class activates the state layer. Apply it to the inner
- * element (button, anchor, div) that the user interacts with.
+ * **Usage:**
+ * ```ts
+ * static override styles = [sharedStyles, interactionStyles, css`...`];
+ * ```
+ * Then in the template:
+ * ```html
+ * <button class="interactive">Click me</button>
+ * ```
  *
- * Reference: https://m3.material.io/foundations/interaction/states/overview
+ * @see {@link https://m3.material.io/foundations/interaction/states/overview M3 State overview}
  */
 export declare const interactionStyles: import("lit").CSSResult;
 export default interactionStyles;

package/dist/components/_base/interaction-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interaction-styles.d.ts","sourceRoot":"","sources":["../../../src/components/_base/interaction-styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,iBAAiB,yBAqG7B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"interaction-styles.d.ts","sourceRoot":"","sources":["../../../src/components/_base/interaction-styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,iBAAiB,yBA8H7B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/_base/interaction-styles.js

@@ -1,106 +1,156 @@
+/**
+ * @file components/_base/interaction-styles.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
 import { css } from 'lit';
 /**
- * M3 State Layer system — CSS-only implementation.
+ * Material Design 3 State Layer system — CSS-only implementation.
+ *
+ * Material Design 3 defines **state layers** as semi-transparent color overlays
+ * that communicate interactive state visually to the user. They are applied on
+ * top of a component's background without altering its base color, allowing
+ * correct rendering across all surface and container colors.
  *
- * Material Design 3 defines "state layers" as semi-transparent overlays that
- * communicate interactive state: hover, focus, pressed, dragged. These are
- * applied via a `::before` pseudo-element so they compose with any background.
+ * **M3 state layer opacity values (from the spec):**
+ * | State     | Opacity |
+ * |-----------|---------|
+ * | Hover     | 8%      |
+ * | Focus     | 12%     |
+ * | Pressed   | 12%     |
+ * | Dragged   | 16%     |
  *
- * The host element MUST have:
- *   position: relative   (so the pseudo-element positions inside it)
- *   overflow: hidden     (so the layer clips to the element's shape)
+ * **Implementation strategy:**
+ * The state layer is rendered as a `::before` pseudo-element whose `opacity`
+ * transitions between states. A second `::after` pseudo-element provides a
+ * CSS-only center-origin ripple on press. For pointer-origin ripples
+ * (where the ripple starts at the tap/click point), use `<moni-ripple>` instead.
  *
- * Usage — include in any interactive component's `static styles`:
- *   static override styles = [sharedStyles, interactionStyles, css`...`];
+ * **Host element requirements:**
+ * The element bearing the `.interactive` class MUST have:
+ * - `position: relative` — so `::before` / `::after` are contained within it.
+ * - `overflow: hidden` — so the expanding ripple clips to the element's shape.
+ * - `isolation: isolate` — prevents the pseudo-elements from bleeding into
+ *   stacking contexts created by parent elements.
  *
- * The `.interactive` class activates the state layer. Apply it to the inner
- * element (button, anchor, div) that the user interacts with.
+ * **Usage:**
+ * ```ts
+ * static override styles = [sharedStyles, interactionStyles, css`...`];
+ * ```
+ * Then in the template:
+ * ```html
+ * <button class="interactive">Click me</button>
+ * ```
  *
- * Reference: https://m3.material.io/foundations/interaction/states/overview
+ * @see {@link https://m3.material.io/foundations/interaction/states/overview M3 State overview}
  */
 export const interactionStyles = css `
-	/* ─── State layer opacity tokens (M3 spec) ─── */
+	/* ─── State layer opacity tokens (M3 spec values) ──────────────────────── */
 	:host {
+		/** Opacity applied on hover. M3 spec: 8%. */
 		--_state-hover: 0.08;
+		/** Opacity applied on keyboard focus. M3 spec: 12%. */
 		--_state-focus: 0.12;
+		/** Opacity applied on press/active. M3 spec: 12%. */
 		--_state-pressed: 0.12;
+		/** Opacity applied during drag. M3 spec: 16%. */
 		--_state-dragged: 0.16;
+		/**
+		 * Color of the state layer overlay.
+		 * Defaults to currentColor so it adapts to the element's text color.
+		 * Override with --_state-color: var(--primary) for selected states.
+		 */
 		--_state-color: currentColor;
 	}
 
-	/* ─── The pseudo-element overlay ─── */
+	/* ─── The interactive container ─────────────────────────────────────────── */
 	.interactive {
 		position: relative;
 		overflow: hidden;
-		/* Needed for ripple containment */
+		/* isolation: isolate prevents the pseudo-elements from mixing with
+		   parent stacking contexts that use opacity or transform. */
 		isolation: isolate;
 	}
 
+	/* ─── State layer pseudo-element (::before) ─────────────────────────────── */
+	/* The layer sits above the element's background but below its content.      */
 	.interactive::before {
 		content: '';
 		position: absolute;
 		inset: 0;
+		/* Inherit the border-radius from the host so the layer clips correctly
+		   on rounded buttons, chips, and cards. */
 		border-radius: inherit;
 		background-color: var(--_state-color);
-		opacity: 0;
-		pointer-events: none;
-		/* Use the same transition speed as other properties on the element */
+		opacity: 0; /* Hidden by default; transitions in on state change. */
+		pointer-events: none; /* Never intercept pointer events. */
 		transition: opacity var(--speed2, 200ms) ease;
-		/* Ensure the layer sits above background but below content */
+		/* z-index 0 places the layer above the background (z=-1 would be behind). */
 		z-index: 0;
 	}
 
-	/* Hover */
+	/* Hover: slight overlay to signal interactivity. */
 	.interactive:hover::before {
 		opacity: var(--_state-hover);
 	}
 
-	/* Focus-visible (keyboard / programmatic) */
+	/* Focus-visible: stronger overlay for keyboard / programmatic focus.
+	   :focus-visible is preferred over :focus to avoid showing the indicator
+	   on mouse clicks (which have their own press state). */
 	.interactive:focus-visible::before {
 		opacity: var(--_state-focus);
 	}
 
-	/* Pressed / active */
+	/* Pressed / active: same opacity as focus but instant onset — the transition
+	   handles the fade-out on pointer-up via the inherited duration. */
 	.interactive:active::before {
 		opacity: var(--_state-pressed);
-		/* Instant on press — fade out on release handled by transition */
+		/* transition-duration: 0s — state layer appears instantaneously on press. */
 		transition-duration: 0s;
 	}
 
-	/* Disabled — no state layer at all */
+	/* Disabled — no state layer rendered at all (not just hidden). */
 	.interactive:disabled::before,
 	.interactive[aria-disabled='true']::before,
 	:host([disabled]) .interactive::before {
 		display: none;
 	}
 
-	/* ─── Selected/active modifier ─── */
-	/* When an element is in a "selected" state (e.g. active nav item, checked
-	   chip) the state layer color shifts to match the container color. */
+	/* ─── Selected / active modifier ────────────────────────────────────────── */
+	/* When a component is in a "selected" state (active nav item, checked chip,
+	   current tab), the state layer color switches to the primary color so the
+	   overlay is visually meaningful even on primary-container backgrounds. */
 	.interactive.selected::before,
 	.interactive[aria-selected='true']::before,
 	.interactive[aria-current]::before {
 		--_state-color: var(--primary);
+		/* Always show a subtle primary overlay to reinforce the selected state. */
 		opacity: var(--_state-hover);
 	}
 	.interactive.selected:hover::before,
 	.interactive[aria-selected='true']:hover::before {
+		/* Increase opacity slightly on hover within a selected element. */
 		opacity: calc(var(--_state-hover) * 1.5);
 	}
 
-	/* ─── Ensure content renders above the state layer ─── */
+	/* ─── Content z-index ────────────────────────────────────────────────────── */
+	/* Ensure all direct children of .interactive render above the state layer
+	   (z-index: 0) and the ripple pseudo-element (z-index: 0). */
 	.interactive > * {
 		position: relative;
 		z-index: 1;
 	}
 
-	/* ─── Ripple (CSS-only expanding circle) ─── */
-	/* This provides a basic CSS ripple from center on :active.
-	   For a pointer-origin ripple, use <moni-ripple> with JS activation. */
+	/* ─── CSS-only center-origin ripple (::after) ───────────────────────────── */
+	/* Provides a basic expanding circle animation on :active. The circle always
+	   originates from the element's center. For a pointer-origin ripple (where
+	   the ripple starts at the exact tap/click coordinate), use <moni-ripple>
+	   with JS activation instead. */
 	.interactive::after {
 		content: '';
 		position: absolute;
-		inset: 50%;
+		inset: 50%; /* Collapses to a point at the center. */
 		border-radius: 50%;
 		background-color: var(--_state-color);
 		opacity: 0;
@@ -109,11 +159,13 @@ export const interactionStyles = css `
 		z-index: 0;
 	}
 
+	/* Trigger the ripple keyframe animation on active/press. */
 	.interactive:active::after {
 		animation: to-ripple var(--speed3, 300ms) cubic-bezier(0.2, 0, 0, 1) forwards;
 	}
 
-	/* Disable ripple animation when motion is reduced */
+	/* Respect the user's reduced-motion preference by disabling the ripple.
+	   The ::before state layer still functions, providing a static visual cue. */
 	@media (prefers-reduced-motion: reduce) {
 		.interactive::after {
 			display: none;

package/dist/components/_base/moni-element.d.ts

@@ -1,17 +1,52 @@
+/**
+ * @file components/_base/moni-element.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
 import { LitElement } from 'lit';
 /**
- * Base class for every Moni UI Web Component.
+ * Abstract base class for every Moni UI Web Component.
+ *
+ * **Design philosophy — visual shells, no behavior:**
+ * All Moni components are intentionally "dumb" — they encapsulate only
+ * visual structure, styling, and attribute-to-DOM mapping. Consumers own
+ * interaction logic, validation, async data fetching, and state management.
+ * This keeps components framework-agnostic and composable with any
+ * state management solution (Svelte stores, Vue reactive, vanilla JS, etc.).
+ *
+ * **Shadow DOM:**
+ * The default `LitElement.createRenderRoot()` returns an open shadow root,
+ * which is preserved here unchanged. Shadow DOM encapsulation ensures that
+ * internal CSS class names (`.button`, `.field`, `.slider`, etc.) do not leak
+ * into or collide with the consumer's global stylesheet.
+ *
+ * **Extension contract:**
+ * Every subclass must:
+ *  1. Be decorated with `@customElement('moni-<name>')`.
+ *  2. Define `static override styles = [sharedStyles, css`...`]`.
+ *  3. Implement `override render(): TemplateResult`.
  *
- * This class intentionally adds **no behavior**: components are visual-only
- * shells. All styling, slots, and attribute-to-DOM mapping are owned by each
- * individual element. Consumers wire up interaction, validation, async logic,
- * and state management themselves.
+ * Subclasses MUST NOT add behavior (event handling, timers, fetch calls) that
+ * is not directly related to rendering the shadow DOM. See CONTRIBUTING.md
+ * for the full component authoring guide.
  *
- * The default LitElement `createRenderRoot` returns a standard open shadow
- * root, which is what we want — BeerCSS class names like `.button`, `.field`,
- * `.slider`, etc. live inside the shadow root and stay encapsulated.
+ * @see {@link https://lit.dev/docs/components/overview/ Lit component overview}
  */
 export declare class MoniElement extends LitElement {
+    /**
+     * Returns the component's render root.
+     *
+     * Delegates to `LitElement.createRenderRoot()` which attaches an **open**
+     * shadow root (`{ mode: 'open' }`). Open mode allows external tools (browser
+     * devtools, testing frameworks) to traverse the shadow tree.
+     *
+     * This override exists explicitly to document the shadow root mode and to
+     * provide a hook for subclasses that may need to change the root in the future
+     * (e.g. to support `adoptedStyleSheets` in a specific environment).
+     *
+     * @returns The shadow root that Lit will render templates into.
+     */
     protected createRenderRoot(): HTMLElement | DocumentFragment;
 }
 export default MoniElement;

package/dist/components/_base/moni-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"moni-element.d.ts","sourceRoot":"","sources":["../../../src/components/_base/moni-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC;;;;;;;;;;;GAWG;AACH,qBAAa,WAAY,SAAQ,UAAU;cACvB,gBAAgB;CAGnC;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"moni-element.d.ts","sourceRoot":"","sources":["../../../src/components/_base/moni-element.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,WAAY,SAAQ,UAAU;IAC1C;;;;;;;;;;;;OAYG;cACgB,gBAAgB;CAGnC;AAED,eAAe,WAAW,CAAC"}

package/dist/components/_base/moni-element.js

@@ -1,17 +1,52 @@
+/**
+ * @file components/_base/moni-element.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
 import { LitElement } from 'lit';
 /**
- * Base class for every Moni UI Web Component.
+ * Abstract base class for every Moni UI Web Component.
+ *
+ * **Design philosophy — visual shells, no behavior:**
+ * All Moni components are intentionally "dumb" — they encapsulate only
+ * visual structure, styling, and attribute-to-DOM mapping. Consumers own
+ * interaction logic, validation, async data fetching, and state management.
+ * This keeps components framework-agnostic and composable with any
+ * state management solution (Svelte stores, Vue reactive, vanilla JS, etc.).
+ *
+ * **Shadow DOM:**
+ * The default `LitElement.createRenderRoot()` returns an open shadow root,
+ * which is preserved here unchanged. Shadow DOM encapsulation ensures that
+ * internal CSS class names (`.button`, `.field`, `.slider`, etc.) do not leak
+ * into or collide with the consumer's global stylesheet.
+ *
+ * **Extension contract:**
+ * Every subclass must:
+ *  1. Be decorated with `@customElement('moni-<name>')`.
+ *  2. Define `static override styles = [sharedStyles, css`...`]`.
+ *  3. Implement `override render(): TemplateResult`.
  *
- * This class intentionally adds **no behavior**: components are visual-only
- * shells. All styling, slots, and attribute-to-DOM mapping are owned by each
- * individual element. Consumers wire up interaction, validation, async logic,
- * and state management themselves.
+ * Subclasses MUST NOT add behavior (event handling, timers, fetch calls) that
+ * is not directly related to rendering the shadow DOM. See CONTRIBUTING.md
+ * for the full component authoring guide.
  *
- * The default LitElement `createRenderRoot` returns a standard open shadow
- * root, which is what we want — BeerCSS class names like `.button`, `.field`,
- * `.slider`, etc. live inside the shadow root and stay encapsulated.
+ * @see {@link https://lit.dev/docs/components/overview/ Lit component overview}
  */
 export class MoniElement extends LitElement {
+    /**
+     * Returns the component's render root.
+     *
+     * Delegates to `LitElement.createRenderRoot()` which attaches an **open**
+     * shadow root (`{ mode: 'open' }`). Open mode allows external tools (browser
+     * devtools, testing frameworks) to traverse the shadow tree.
+     *
+     * This override exists explicitly to document the shadow root mode and to
+     * provide a hook for subclasses that may need to change the root in the future
+     * (e.g. to support `adoptedStyleSheets` in a specific environment).
+     *
+     * @returns The shadow root that Lit will render templates into.
+     */
     createRenderRoot() {
         return super.createRenderRoot();
     }

package/dist/components/_base/shared-styles.d.ts

@@ -1,21 +1,45 @@
 /**
- * Shared baseline injected into every Moni Web Component shadow root.
- *
- * Provides:
- *  1. Box-sizing reset on the host and its descendants.
- *  2. CSS custom property bridge: exposes the **BeerCSS token namespace**
- *     (`--primary`, `--on-primary`, `--surface`, `--elevate1`, …) inside the
- *     shadow root, falling back to sensible Material 3 defaults if the host
- *     document has not provided the alias yet.
- *  3. The `--md-sys-color-*` and `--color-*` aliases kept for backward
- *     compatibility with the MD3 theme engine that the rest of the Moni apps
- *     (MoniAuth-Client, MoniAuth-Yo, Moni-Labs) still rely on.
- *  4. Helper utility classes (`.truncate`, `.visually-hidden`).
- *
- * The MD3 → BeerCSS mapping is intentionally *inverted* with respect to the
- * previous design: BeerCSS variables are the primary, MD3 ones are aliases.
- * Components authored against `var(--primary)` will work in any environment
- * that ships the MD3 scheme because the alias resolves upstream.
+ * @file components/_base/shared-styles.ts
+ * @package @moni-labs/moni-ui
+ * @license MIT
+ * @contributors Moni Labs & Contributors
+ */
+/**
+ * Baseline CSS injected into the shadow root of **every** Moni Web Component.
+ *
+ * This stylesheet is the foundational layer of the Moni design system. It serves
+ * four distinct responsibilities:
+ *
+ * **1. Box-sizing reset**
+ * Applies `box-sizing: border-box` to `:host`, all descendants, and slotted
+ * elements so every component has predictable sizing without override surprises.
+ *
+ * **2. CSS custom property bridge (Token namespace)**
+ * The component library uses short "bare" variable names internally (e.g.
+ * `var(--primary)`) for concise CSS. Because shadow DOM isolates custom
+ * properties by default, this sheet creates a bridge that resolves these
+ * internal names from the global token namespaces in the following priority:
+ *
+ *   `--moni-*` (Moni namespace) → `--md-sys-color-*` (MD3 spec) → hardcoded M3 default
+ *
+ * This lets a host document use any of the three namespaces to theme components.
+ *
+ * **3. MD3 `--color-*` aliases**
+ * A second `:host` block maps the older `--color-<role>` prefix to the primary
+ * bare tokens. These aliases ensure backward compatibility with Moni apps
+ * (MoniAuth-Client, MoniAuth-Yo) that still reference `--color-primary`, etc.
+ *
+ * **4. Utility classes**
+ * Provides `.truncate` (single-line text clipping) and `.visually-hidden`
+ * (screen-reader-only content) for use inside component shadow trees.
+ *
+ * **Usage:**
+ * ```ts
+ * static override styles = [sharedStyles, css`/* component-specific styles *\/`];
+ * ```
+ *
+ * @see {@link fieldStyles}       — Additional styles for input field components.
+ * @see {@link interactionStyles} — M3 state layer system for interactive elements.
  */
 export declare const sharedStyles: import("lit").CSSResult;
 export default sharedStyles;

package/dist/components/_base/shared-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shared-styles.d.ts","sourceRoot":"","sources":["../../../src/components/_base/shared-styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,YAAY,yBA4HxB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"shared-styles.d.ts","sourceRoot":"","sources":["../../../src/components/_base/shared-styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,YAAY,yBAgMxB,CAAC;AAEF,eAAe,YAAY,CAAC"}