@moni-labs/moni-ui 0.2.0

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

@@ -0,0 +1,39 @@
+import { MoniElement } from './_base/index.js';
+/**
+ * Checkbox that faithfully ports BeerCSS's `.checkbox` styles.
+ *
+ * BeerCSS architecture:
+ *  - `.checkbox` is inline-flex, aligns items center
+ *  - `input` has width/height = --_size, opacity: 0  (occupies real space, no absolute!)
+ *  - `span::before` is the visible checkbox box (position: absolute, inset from the input)
+ *  - `span::after` is the ripple hover effect
+ *  - Content is set via CSS: "check_box_outline_blank" / "check_box" (Material Symbols font)
+ *
+ * Attributes:
+ *  - label:    text label
+ *  - checked:  present → input is checked
+ *  - disabled: present → input is disabled
+ *  - size:     small | medium (default) | large | extra
+ *  - name:     forwarded to input.name
+ *  - value:    forwarded to input.value
+ */
+export declare class MoniCheckbox extends MoniElement {
+    label: string;
+    checked: boolean;
+    disabled: boolean;
+    size: 'small' | 'medium' | 'large' | 'extra';
+    name: string;
+    value: string;
+    private _input;
+    updated(changed: Map<string, unknown>): void;
+    static styles: import("lit").CSSResult[];
+    private _onChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-checkbox': MoniCheckbox;
+    }
+}
+export default MoniCheckbox;
+//# sourceMappingURL=moni-checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moni-checkbox.d.ts","sourceRoot":"","sources":["../../src/components/moni-checkbox.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,YAAa,SAAQ,WAAW;IACf,KAAK,SAAM;IACI,OAAO,UAAS;IAChB,QAAQ,UAAS;IAE7D,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAY;IAC3B,IAAI,SAAM;IACV,KAAK,SAAM;IAExB,OAAO,CAAC,MAAM,CAAoB;IAEzC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAO9C,OAAgB,MAAM,4BAoHpB;IAEF,OAAO,CAAC,SAAS;IAKR,MAAM;CAiBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD;AAED,eAAe,YAAY,CAAC"}

package/dist/components/moni-checkbox.js

@@ -0,0 +1,212 @@
+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);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, css } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+/**
+ * Checkbox that faithfully ports BeerCSS's `.checkbox` styles.
+ *
+ * BeerCSS architecture:
+ *  - `.checkbox` is inline-flex, aligns items center
+ *  - `input` has width/height = --_size, opacity: 0  (occupies real space, no absolute!)
+ *  - `span::before` is the visible checkbox box (position: absolute, inset from the input)
+ *  - `span::after` is the ripple hover effect
+ *  - Content is set via CSS: "check_box_outline_blank" / "check_box" (Material Symbols font)
+ *
+ * Attributes:
+ *  - label:    text label
+ *  - checked:  present → input is checked
+ *  - disabled: present → input is disabled
+ *  - size:     small | medium (default) | large | extra
+ *  - name:     forwarded to input.name
+ *  - value:    forwarded to input.value
+ */
+let MoniCheckbox = class MoniCheckbox extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.checked = false;
+        this.disabled = false;
+        this.size = 'medium';
+        this.name = '';
+        this.value = '';
+    }
+    updated(changed) {
+        if (this._input) {
+            if (changed.has('checked'))
+                this._input.checked = this.checked;
+            if (changed.has('disabled'))
+                this._input.disabled = this.disabled;
+        }
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				--_size: 1.5rem;
+				display: inline-flex;
+				font-family: var(--font);
+			}
+			:host([size='small'])  { --_size: 1rem; }
+			:host([size='large'])  { --_size: 2rem; }
+			:host([size='extra'])  { --_size: 2.5rem; }
+
+			/* BeerCSS .checkbox */
+			label {
+				inline-size: auto;
+				block-size: auto;
+				line-height: normal;
+				white-space: nowrap;
+				cursor: pointer;
+				display: inline-flex;
+				align-items: center;
+			}
+
+			/* BeerCSS: input has real size, opacity 0 — occupies real layout space */
+			input {
+				inline-size: var(--_size);
+				block-size: var(--_size);
+				opacity: 0;
+				cursor: pointer;
+				flex: none;
+			}
+
+			/* BeerCSS: span wraps the visible indicator + label text */
+			span {
+				display: inline-flex;
+				align-items: center;
+				color: var(--on-surface);
+				font-size: 0.875rem;
+				position: relative;
+			}
+
+			/* BeerCSS: span::before = the checkbox icon (absolute, overlaid on input) */
+			span::before {
+				--_size: inherit;
+				content: 'check_box_outline_blank';
+				inline-size: var(--_size);
+				block-size: var(--_size);
+				box-sizing: border-box;
+				margin: 0 auto;
+				outline: none;
+				color: var(--on-surface-variant);
+				position: absolute;
+				inset: auto auto auto calc(var(--_size) * -1);
+				border-radius: 50%;
+				user-select: none;
+				z-index: 1;
+				font-family: var(--font-icon);
+				font-size: var(--_size);
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			/* Checked: filled checkbox icon */
+			input:checked + span::before {
+				content: 'check_box';
+				font-variation-settings: 'FILL' 1;
+				color: var(--primary);
+			}
+
+			/* Indeterminate */
+			input:indeterminate + span::before {
+				content: 'indeterminate_check_box';
+			}
+
+			/* BeerCSS: span::after = ripple/hover ring */
+			span::after {
+				--_size: inherit;
+				content: '';
+				inline-size: var(--_size);
+				block-size: var(--_size);
+				box-sizing: border-box;
+				margin: 0 auto;
+				position: absolute;
+				inset: auto auto auto calc(var(--_size) * -1);
+				border-radius: 50%;
+				user-select: none;
+				transition: all var(--speed1);
+				background-color: currentColor;
+				box-shadow: 0 0 0 0 currentColor;
+				opacity: 0;
+			}
+
+			label:hover > input:not(:disabled) + span::after,
+			input:not(:disabled):focus + span::after {
+				box-shadow: 0 0 0 0.5rem currentColor;
+				opacity: 0.1;
+			}
+
+			/* BeerCSS: span:not(:empty) gets a small inline-start padding for the label */
+			span.has-label {
+				padding-inline-start: 0.25rem;
+			}
+
+			/* Disabled */
+			input:disabled + span {
+				opacity: 0.5;
+				cursor: not-allowed;
+			}
+
+			/* Focus ring */
+			input:focus-visible + span::before {
+				outline: 0.125rem solid var(--primary);
+				outline-offset: 0.375rem;
+			}
+		`
+    ]; }
+    _onChange(e) {
+        this.checked = e.target.checked;
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+    }
+    render() {
+        return html `<label part="checkbox">
+			<input
+				type="checkbox"
+				.checked=${live(this.checked)}
+				?disabled=${this.disabled}
+				name=${ifDefined(this.name || undefined)}
+				value=${ifDefined(this.value || undefined)}
+				@change=${this._onChange}
+			/>
+			<span class=${this.label ? 'has-label' : ''}>
+				${this.label
+            ? html `${this.label}`
+            : html `<slot></slot>`}
+			</span>
+		</label>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniCheckbox.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniCheckbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniCheckbox.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniCheckbox.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniCheckbox.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniCheckbox.prototype, "value", void 0);
+__decorate([
+    query('input')
+], MoniCheckbox.prototype, "_input", void 0);
+MoniCheckbox = __decorate([
+    customElement('moni-checkbox')
+], MoniCheckbox);
+export { MoniCheckbox };
+export default MoniCheckbox;

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

@@ -0,0 +1,57 @@
+import { MoniElement } from './_base/index.js';
+import './moni-icon.js';
+import './moni-progress.js';
+/**
+ * Visual-only chip. Renders a native `<button>` styled per Material 3 Expressive.
+ *
+ * M3 spec (`m3-docs/components/chips/specs.md`) defines **4 variants**:
+ *  - **assist**     — smart/automated actions; outlined; `outline` 1dp stroke.
+ *  - **filter**     — filters for a collection; outlined; leading check when selected.
+ *  - **input**      — discrete user input; outlined; trailing remove icon.
+ *  - **suggestion** — product-generated suggestions; outlined; no icons.
+ *
+ * All variants share M3 measurements: 32dp height, 8dp corner, 18dp icon.
+ * Container height scales with `size` (`small` = 32dp = M3 default,
+ * `medium`/`large` are Moni extensions with larger touch targets).
+ *
+ * **A11y** — `assist` and `suggestion` use `var(--outline)` for the
+ * stroke to ensure 3:1 contrast (per `m3-docs/components/chips/accessibility.md`
+ * § *Showing chip interactivity*). `filter` and `input` use `outline-variant`
+ * for the resting state but show a clear `secondary-container` background
+ * when selected, passing contrast.
+ *
+ * Attributes:
+ *  - variant:   assist (default) | filter | input | suggestion
+ *               | outlined (alias for assist) | fill (alias for filter)
+ *  - size:      small (default, 32dp = M3) | medium | large
+ *  - shape:     round (default) | square | circle | no-round
+ *               | left-round | right-round | top-round | bottom-round
+ *  - selected:  present → background uses secondary-container (M3 filter/input)
+ *  - removable: present → adds a trailing ✕ icon (M3 input chip, visual only)
+ *  - disabled:  present → native disabled
+ *  - loading:   present → shows indeterminate circular progress
+ *  - icon:      Material Symbols name (leading icon)
+ */
+export declare class MoniChip extends MoniElement {
+    variant: 'assist' | 'filter' | 'input' | 'suggestion' | 'outlined' | 'fill';
+    size: 'small' | 'medium' | 'large';
+    shape: 'round' | 'no-round' | 'square' | 'circle' | 'left-round' | 'right-round' | 'top-round' | 'bottom-round';
+    selected: boolean;
+    removable: boolean;
+    disabled: boolean;
+    loading: boolean;
+    icon: string;
+    private _hasSlottedIcon;
+    private _handleSlotChange;
+    /** Normalize legacy variant names to M3 spec. */
+    private get _variant();
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-chip': MoniChip;
+    }
+}
+export default MoniChip;
+//# sourceMappingURL=moni-chip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moni-chip.d.ts","sourceRoot":"","sources":["../../src/components/moni-chip.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAE5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBACa,QAAS,SAAQ,WAAW;IAExC,OAAO,EACJ,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,YAAY,GACZ,UAAU,GACV,MAAM,CAAY;IAErB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAW;IAE7C,KAAK,EACF,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,YAAY,GACZ,aAAa,GACb,WAAW,GACX,cAAc,CAAW;IACgB,QAAQ,UAAS;IACjB,SAAS,UAAS;IAClB,QAAQ,UAAS;IACjB,OAAO,UAAS;IAC/B,IAAI,SAAM;IAGvC,OAAO,CAAC,eAAe,CAAS;IAEhC,OAAO,CAAC,iBAAiB;IAKzB,iDAAiD;IACjD,OAAO,KAAK,QAAQ,GAInB;IAED,OAAgB,MAAM,4BAqLpB;IAEO,MAAM;CA+Df;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD;AAED,eAAe,QAAQ,CAAC"}

package/dist/components/moni-chip.js

@@ -0,0 +1,340 @@
+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);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, css, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+import './moni-icon.js';
+import './moni-progress.js';
+/**
+ * Visual-only chip. Renders a native `<button>` styled per Material 3 Expressive.
+ *
+ * M3 spec (`m3-docs/components/chips/specs.md`) defines **4 variants**:
+ *  - **assist**     — smart/automated actions; outlined; `outline` 1dp stroke.
+ *  - **filter**     — filters for a collection; outlined; leading check when selected.
+ *  - **input**      — discrete user input; outlined; trailing remove icon.
+ *  - **suggestion** — product-generated suggestions; outlined; no icons.
+ *
+ * All variants share M3 measurements: 32dp height, 8dp corner, 18dp icon.
+ * Container height scales with `size` (`small` = 32dp = M3 default,
+ * `medium`/`large` are Moni extensions with larger touch targets).
+ *
+ * **A11y** — `assist` and `suggestion` use `var(--outline)` for the
+ * stroke to ensure 3:1 contrast (per `m3-docs/components/chips/accessibility.md`
+ * § *Showing chip interactivity*). `filter` and `input` use `outline-variant`
+ * for the resting state but show a clear `secondary-container` background
+ * when selected, passing contrast.
+ *
+ * Attributes:
+ *  - variant:   assist (default) | filter | input | suggestion
+ *               | outlined (alias for assist) | fill (alias for filter)
+ *  - size:      small (default, 32dp = M3) | medium | large
+ *  - shape:     round (default) | square | circle | no-round
+ *               | left-round | right-round | top-round | bottom-round
+ *  - selected:  present → background uses secondary-container (M3 filter/input)
+ *  - removable: present → adds a trailing ✕ icon (M3 input chip, visual only)
+ *  - disabled:  present → native disabled
+ *  - loading:   present → shows indeterminate circular progress
+ *  - icon:      Material Symbols name (leading icon)
+ */
+let MoniChip = class MoniChip extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.variant = 'assist';
+        this.size = 'small';
+        this.shape = 'round';
+        this.selected = false;
+        this.removable = false;
+        this.disabled = false;
+        this.loading = false;
+        this.icon = '';
+        this._hasSlottedIcon = false;
+    }
+    _handleSlotChange(e) {
+        const slot = e.target;
+        this._hasSlottedIcon = slot.assignedNodes({ flatten: true }).length > 0;
+    }
+    /** Normalize legacy variant names to M3 spec. */
+    get _variant() {
+        if (this.variant === 'outlined')
+            return 'assist';
+        if (this.variant === 'fill')
+            return 'filter';
+        return this.variant;
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				display: inline-flex;
+				vertical-align: middle;
+				font-family: var(--font);
+				position: relative;
+				user-select: none;
+			}
+
+			.chip {
+				--_padding: 1rem; /* 16dp when no leading icon (M3 spec) */
+				--_size: 2rem;
+				--_round: calc(var(--_size) / 2);
+				--_icon-size: 1.125rem;
+				box-sizing: border-box;
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				block-size: var(--_size);
+				min-inline-size: var(--_size);
+				font-size: 0.875rem;
+				font-weight: 500;
+				background-color: transparent;
+				border: 0.0625rem solid var(--outline);
+				color: var(--on-surface);
+				padding: 0 var(--_padding);
+				border-radius: 0.5rem;
+				transition:
+					transform var(--speed2),
+					background-color var(--speed2),
+					border-color var(--speed2),
+					border-radius var(--speed2),
+					padding var(--speed3);
+				user-select: none;
+				gap: 0.5rem;
+				line-height: normal;
+				letter-spacing: normal;
+				font-family: inherit;
+				cursor: pointer;
+				position: relative;
+				overflow: hidden;
+			}
+
+			.chip::after {
+				content: '';
+				position: absolute;
+				inset: 0;
+				background: currentColor;
+				opacity: 0;
+				transition: opacity var(--speed2);
+				border-radius: inherit;
+				pointer-events: none;
+			}
+
+			.chip.has-icon {
+				--_padding: 0.5rem; /* 8dp when a leading icon is present (M3 spec) */
+			}
+
+			.chip.medium {
+				--_size: 2.5rem;
+				--_padding: 0.75rem;
+				--_icon-size: 1.25rem;
+			}
+			.chip.medium.has-icon {
+				--_padding: 0.75rem;
+			}
+			.chip.large {
+				--_padding: 1rem;
+				--_size: 3rem;
+				--_icon-size: 1.5rem;
+			}
+
+			.chip:hover:not(:disabled)::after {
+				opacity: 0.08;
+			}
+
+			.chip:active:not(:disabled) {
+				transform: scale(0.97);
+			}
+
+			/* ─── M3 variant colors ─── */
+			/* Filter and input chips use outline-variant + on-surface-variant
+			   for the resting state (M3 spec). Assist and suggestion use
+			   outline + on-surface for 3:1 contrast (a11y). */
+			.chip.filter,
+			.chip.input {
+				border-color: var(--outline-variant);
+				color: var(--on-surface-variant);
+			}
+
+			.chip.suggestion {
+				border-color: var(--outline);
+				color: var(--on-surface-variant);
+			}
+
+			/* Selected state — M3 filter/input show a leading check and
+			   secondary-container background. */
+			.chip.selected {
+				background-color: var(--secondary-container);
+				color: var(--on-secondary-container);
+				border-color: transparent;
+			}
+
+			/* Filter without selection can have leading check on hover to
+			   indicate the action. */
+			.chip.filter.selected::before,
+			.chip.input.selected::before {
+				content: '\\e5ca';
+				font-family: var(--font-icon);
+				font-size: var(--_icon-size);
+				font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+				margin-inline-end: 0.25rem;
+				color: currentColor;
+			}
+
+			.chip.no-round {
+				border-radius: 0;
+			}
+			.chip.square {
+				border-radius: 0.25rem;
+			}
+			.chip.circle {
+				inline-size: var(--_size);
+				padding: 0;
+				aspect-ratio: 1;
+				border-radius: 50%;
+			}
+			.chip.left-round {
+				border-radius: var(--_round) 0 0 var(--_round) !important;
+			}
+			.chip.right-round {
+				border-radius: 0 var(--_round) var(--_round) 0 !important;
+			}
+			.chip.top-round {
+				border-radius: var(--_round) var(--_round) 0 0 !important;
+			}
+			.chip.bottom-round {
+				border-radius: 0 0 var(--_round) var(--_round) !important;
+			}
+
+			.chip:disabled {
+				opacity: 0.5;
+				cursor: not-allowed;
+				pointer-events: none;
+			}
+
+			.chip:focus-visible {
+				outline: 0.125rem solid var(--primary);
+				outline-offset: 0.125rem;
+			}
+
+			.icon,
+			::slotted([slot='icon']) {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				font-size: var(--_icon-size);
+				flex: none;
+				color: inherit;
+			}
+
+			.remove {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				font-size: var(--_icon-size);
+				opacity: 0.7;
+				margin-inline-start: 0.125rem;
+			}
+
+			.loading-spinner {
+				inline-size: var(--_icon-size);
+				block-size: var(--_icon-size);
+				color: currentColor;
+			}
+			.loading-spinner::part(progress) {
+				border-width: 0.1875rem;
+			}
+		`
+    ]; }
+    render() {
+        const variant = this._variant;
+        const hasIcon = Boolean(this.icon) || this._hasSlottedIcon;
+        const classes = [
+            'chip',
+            variant,
+            this.size,
+            this.shape,
+            this.selected ? 'selected' : '',
+            hasIcon ? 'has-icon' : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+        if (this.loading) {
+            return html `<button
+				class=${classes}
+				part="chip"
+				type="button"
+				?disabled=${this.disabled}
+				aria-busy="true"
+			>
+				<moni-progress
+					class="loading-spinner"
+					part="loading"
+					variant="circular"
+					indeterminate
+					size="small"
+				></moni-progress>
+			</button>`;
+        }
+        // M3 input chips must always show a trailing remove icon.
+        const showRemove = this.removable || variant === 'input';
+        const iconEl = this.icon
+            ? html `<span class="icon" part="icon"
+					><moni-icon name="${this.icon}"></moni-icon
+				></span>`
+            : html `<slot
+					name="icon"
+					part="icon"
+					class="icon"
+					@slotchange=${this._handleSlotChange}
+				></slot>`;
+        const removeEl = showRemove
+            ? html `<span class="remove" part="remove" aria-hidden="true"
+					><moni-icon name="close"></moni-icon
+				></span>`
+            : nothing;
+        return html `<button
+			class=${classes}
+			part="chip"
+			type="button"
+			?disabled=${this.disabled}
+		>
+			${iconEl}
+			<span part="label"><slot></slot></span>
+			${removeEl}
+		</button>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniChip.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniChip.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniChip.prototype, "shape", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniChip.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniChip.prototype, "removable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniChip.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniChip.prototype, "loading", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniChip.prototype, "icon", void 0);
+__decorate([
+    state()
+], MoniChip.prototype, "_hasSlottedIcon", void 0);
+MoniChip = __decorate([
+    customElement('moni-chip')
+], MoniChip);
+export { MoniChip };
+export default MoniChip;

package/dist/components/moni-color-field.d.ts

@@ -0,0 +1,33 @@
+import { MoniElement } from './_base/index.js';
+/**
+ * Visual-only color field. Renders a hidden `<input type="color">` plus a
+ * preview swatch and a read-only text display of the current value.
+ *
+ * Attributes:
+ *  - name, label, value, variant, size, shape, disabled, helper, error,
+ *    error-text, placeholder — see moni-text-field.
+ */
+export declare class MoniColorField extends MoniElement {
+    name: string;
+    label: string;
+    variant: 'filled' | 'outlined';
+    size: 'small' | 'medium' | 'large' | 'extra';
+    shape: 'round' | 'square' | 'no-round';
+    disabled: boolean;
+    helper: string;
+    errorText: string;
+    error: boolean;
+    value: string;
+    private _colorInput;
+    private _textInput;
+    updated(changed: Map<string, unknown>): void;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-color-field': MoniColorField;
+    }
+}
+export default MoniColorField;
+//# sourceMappingURL=moni-color-field.d.ts.map

package/dist/components/moni-color-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"moni-color-field.d.ts","sourceRoot":"","sources":["../../src/components/moni-color-field.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAA6B,MAAM,kBAAkB,CAAC;AAE1E;;;;;;;GAOG;AACH,qBACa,cAAe,SAAQ,WAAW;IACjB,IAAI,SAAM;IACV,KAAK,SAAM;IACX,OAAO,EAAE,QAAQ,GAAG,UAAU,CAAc;IAEzE,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAY;IAExD,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAc;IACR,QAAQ,UAAS;IAChC,MAAM,SAAM;IACa,SAAS,SAAM;IACzB,KAAK,UAAS;IAC7B,KAAK,SAAa;IAEjB,OAAO,CAAC,WAAW,CAAoB;IACxC,OAAO,CAAC,UAAU,CAAoB;IAE1D,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAW9C,OAAgB,MAAM,4BA0BpB;IAEO,MAAM;CAuDf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,cAAc,CAAC;KACnC;CACD;AAED,eAAe,cAAc,CAAC"}