@moni-labs/moni-ui 0.2.0

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

@@ -0,0 +1,48 @@
+import { MoniElement } from './_base/index.js';
+/**
+ * Material 3 Card (`m3-docs/components/cards/specs.md`).
+ *
+ * Cards display content and actions on a single subject. Three variants:
+ *  - **elevated**: surface-container-low background + elevation 1 shadow.
+ *    Default for collections where the card needs separation from a
+ *    patterned background.
+ *  - **filled**: surface-container-highest background, no shadow.
+ *    Lowest emphasis; use when cards sit directly on the background.
+ *  - **outlined**: surface background + outline-variant 1dp stroke.
+ *    Highest emphasis without shadow; good on solid color backgrounds.
+ *
+ * M3 measurements:
+ *  - Container corner radius: **12dp**.
+ *  - Left/right padding: **16dp**.
+ *  - Padding between cards in a collection: max **8dp**.
+ *  - Headline text alignment: **start**.
+ *
+ * Slots:
+ *  - media:        image or video at the top of the card.
+ *  - default:      primary content (headline, subhead, supporting text).
+ *  - headline:     shortcut for the H3-equivalent title (semantic).
+ *  - subhead:      secondary title slot.
+ *  - supporting:   supporting text slot.
+ *  - actions:      action buttons row at the bottom of the card.
+ *
+ * Attributes:
+ *  - variant: elevated (default) | filled | outlined
+ *  - clickable: present → apply hover/focus/pressed state layers
+ *  - draggable:  present → apply dragged state elevation (3)
+ *  - disabled:   present → reduced opacity + cursor not-allowed
+ */
+export declare class MoniCard extends MoniElement {
+    variant: 'elevated' | 'filled' | 'outlined';
+    clickable: boolean;
+    draggable: boolean;
+    disabled: boolean;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-card': MoniCard;
+    }
+}
+export default MoniCard;
+//# sourceMappingURL=moni-card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moni-card.d.ts","sourceRoot":"","sources":["../../src/components/moni-card.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBACa,QAAS,SAAQ,WAAW;IAExC,OAAO,EAAE,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAc;IACb,SAAS,UAAS;IAClB,SAAS,UAAS;IAClB,QAAQ,UAAS;IAE7D,OAAgB,MAAM,4BAmIpB;IAEO,MAAM;CAiBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD;AAED,eAAe,QAAQ,CAAC"}

package/dist/components/moni-card.js

@@ -0,0 +1,216 @@
+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 } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+/**
+ * Material 3 Card (`m3-docs/components/cards/specs.md`).
+ *
+ * Cards display content and actions on a single subject. Three variants:
+ *  - **elevated**: surface-container-low background + elevation 1 shadow.
+ *    Default for collections where the card needs separation from a
+ *    patterned background.
+ *  - **filled**: surface-container-highest background, no shadow.
+ *    Lowest emphasis; use when cards sit directly on the background.
+ *  - **outlined**: surface background + outline-variant 1dp stroke.
+ *    Highest emphasis without shadow; good on solid color backgrounds.
+ *
+ * M3 measurements:
+ *  - Container corner radius: **12dp**.
+ *  - Left/right padding: **16dp**.
+ *  - Padding between cards in a collection: max **8dp**.
+ *  - Headline text alignment: **start**.
+ *
+ * Slots:
+ *  - media:        image or video at the top of the card.
+ *  - default:      primary content (headline, subhead, supporting text).
+ *  - headline:     shortcut for the H3-equivalent title (semantic).
+ *  - subhead:      secondary title slot.
+ *  - supporting:   supporting text slot.
+ *  - actions:      action buttons row at the bottom of the card.
+ *
+ * Attributes:
+ *  - variant: elevated (default) | filled | outlined
+ *  - clickable: present → apply hover/focus/pressed state layers
+ *  - draggable:  present → apply dragged state elevation (3)
+ *  - disabled:   present → reduced opacity + cursor not-allowed
+ */
+let MoniCard = class MoniCard extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.variant = 'elevated';
+        this.clickable = false;
+        this.draggable = false;
+        this.disabled = false;
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				display: block;
+				font-family: var(--font);
+				/* M3 spec: 12dp corner, 16dp padding, 8dp max between cards. */
+				border-radius: 0.75rem;
+				color: var(--on-surface);
+				position: relative;
+				overflow: hidden;
+				transition:
+					box-shadow var(--speed2),
+					background-color var(--speed2),
+					border-color var(--speed2);
+			}
+
+			/* Elevated variant: surface-container-low + elevation 1. */
+			:host([variant='elevated']) {
+				background-color: var(--surface-container-low);
+				box-shadow: var(--elevate1);
+			}
+
+			/* Filled variant: surface-container-highest, no shadow. */
+			:host([variant='filled']) {
+				background-color: var(--surface-container-highest);
+			}
+
+			/* Outlined variant: surface + outline-variant 1dp. */
+			:host([variant='outlined']) {
+				background-color: var(--surface);
+				border: 0.0625rem solid var(--outline-variant);
+			}
+
+			/* Clickable cards expose hover/focus/pressed state layers. */
+			:host([clickable]) {
+				cursor: pointer;
+			}
+			:host([clickable]:hover) {
+				box-shadow: var(--elevate2);
+			}
+			:host([clickable]:focus-visible) {
+				outline: 0.125rem solid var(--primary);
+				outline-offset: 0.125rem;
+			}
+			:host([clickable]:active) {
+				box-shadow: var(--elevate1);
+			}
+
+			/* Draggable cards show elevation 3 when picked up. */
+			:host([draggable]) {
+				cursor: grab;
+			}
+			:host([draggable]:active) {
+				cursor: grabbing;
+				box-shadow: var(--elevate3);
+			}
+
+			/* Disabled state. */
+			:host([disabled]) {
+				opacity: 0.38;
+				pointer-events: none;
+				cursor: not-allowed;
+			}
+
+			/* ─── Card slots layout ─── */
+			.media {
+				display: block;
+				margin-block-end: 1rem;
+			}
+			.media[hidden] {
+				display: none;
+			}
+
+			.body {
+				padding: 0 1rem;
+				display: flex;
+				flex-direction: column;
+				gap: 0.5rem;
+			}
+
+			.headline {
+				font-size: 1.25rem;
+				line-height: 1.75rem;
+				font-weight: 400;
+				letter-spacing: 0;
+				color: var(--on-surface);
+				margin: 0;
+				padding: 0;
+			}
+			.subhead {
+				font-size: 0.875rem;
+				line-height: 1.25rem;
+				font-weight: 500;
+				letter-spacing: 0.007em;
+				color: var(--on-surface-variant);
+				margin: 0;
+				padding: 0;
+			}
+			.supporting {
+				font-size: 0.875rem;
+				line-height: 1.25rem;
+				font-weight: 400;
+				letter-spacing: 0.014em;
+				color: var(--on-surface-variant);
+				margin: 0;
+				padding: 0;
+			}
+
+			.actions {
+				display: flex;
+				gap: 0.5rem;
+				padding: 0.75rem 1rem 1rem;
+			}
+			.actions[hidden] {
+				display: none;
+			}
+
+			/* Ensure slotted headings inherit our typography reset
+			   (margin/padding/font-size) so consumers can use semantic
+			   h1..h6 without breaking the visual rhythm. */
+			::slotted(:is(h1, h2, h3, h4, h5, h6)) {
+				margin: 0;
+				padding: 0;
+				font-size: inherit;
+				font-weight: inherit;
+				line-height: inherit;
+				letter-spacing: inherit;
+				color: inherit;
+			}
+		`
+    ]; }
+    render() {
+        return html `
+			<div class="media" part="media">
+				<slot name="media"></slot>
+			</div>
+			<div class="body" part="body">
+				<slot name="headline">
+					<slot></slot>
+				</slot>
+				<slot name="subhead"></slot>
+				<slot name="supporting"></slot>
+			</div>
+			<div class="actions" part="actions">
+				<slot name="actions"></slot>
+			</div>
+		`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniCard.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniCard.prototype, "clickable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniCard.prototype, "draggable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniCard.prototype, "disabled", void 0);
+MoniCard = __decorate([
+    customElement('moni-card')
+], MoniCard);
+export { MoniCard };
+export default MoniCard;

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

@@ -0,0 +1,111 @@
+import { MoniElement } from './_base/index.js';
+export interface CarouselItem {
+    title: string;
+    img: string;
+    href?: string;
+    target?: string;
+}
+/**
+ * Material Design 3 Expressive Carousel component.
+ * Supports three layouts:
+ *  - `multi-browse`: Shows a collection of items (large, medium, and small items).
+ *  - `hero`: Focuses on one large item with a smaller item peeking.
+ *  - `uncontained`: Standard same-sized layout bleeding off the edges.
+ *
+ * Attributes:
+ *  - layout: 'multi-browse' | 'hero' | 'uncontained'
+ *  - auto: if true, dynamically calculates items sizes to fit the container without gaps.
+ *  - large-width: width of large items (used in non-auto mode or as a guideline).
+ *  - medium-width: width of medium items (multi-browse layout).
+ *  - small-width: width of small/peeking items.
+ *  - gap: spacing between elements (default 8px).
+ *  - padding: leading/trailing padding (default 16px).
+ *  - border-radius: radius of cards (default 28px).
+ *  - header-text: header title of the carousel.
+ *  - show-all: renders a "Show all" action button/link.
+ *  - show-all-text: customize the text for the "Show all" action.
+ */
+export declare class MoniCarousel extends MoniElement {
+    items: CarouselItem[];
+    layout: 'multi-browse' | 'hero' | 'uncontained';
+    auto: boolean;
+    largeWidth: number;
+    mediumWidth: number;
+    smallWidth: number;
+    gap: number;
+    padding: number;
+    borderRadius: number;
+    showAll: boolean;
+    showAllText: string;
+    headerText: string;
+    hideNav: boolean;
+    private _containerWidth;
+    private _slottedItems;
+    private _hasSlottedShowAll;
+    get effectiveItems(): CarouselItem[];
+    private _scrollContainer;
+    private _cards;
+    private _resizeObserver;
+    private _isDown;
+    private _startX;
+    private _scrollLeftStart;
+    private _velocity;
+    private _lastTime;
+    private _lastX;
+    private _draggedDistance;
+    private _rafId;
+    private _isMobile;
+    private _tickerTarget;
+    private _tickerCurrent;
+    private _isTicking;
+    private _cardSetX;
+    private _cardSetWidth;
+    private _imgSetX;
+    private _titleSetOpacity;
+    static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, any>): void;
+    get computedLayout(): {
+        L: number;
+        M: number;
+        S: number;
+        N: number;
+    };
+    get itemSize(): number;
+    private _getCardLayout;
+    /**
+     * Rebuild quickSetter caches after cards change.
+     * quickSetter avoids gsap.set() overhead for properties updated every frame.
+     */
+    private _buildQuickSetters;
+    /**
+     * RAF-gated version of updateLayout for scroll events.
+     * Prevents multiple layout recalculations per frame.
+     */
+    private _tick;
+    private _scheduleLayout;
+    updateLayout: (instant?: boolean) => void;
+    private _applyLayout;
+    private _handleMouseDown;
+    private _handleMouseMove;
+    private _handleMouseUp;
+    private _handleTouchStart;
+    private _handleTouchMove;
+    private _handleTouchEnd;
+    private _handleWheel;
+    private _handleCardClick;
+    private _scrollPrevious;
+    private _scrollNext;
+    private _handleShowAllClick;
+    private _handleShowAllSlotChange;
+    private _handleSlotChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-carousel': MoniCarousel;
+    }
+}
+//# sourceMappingURL=moni-carousel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moni-carousel.d.ts","sourceRoot":"","sources":["../../src/components/moni-carousel.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAG7D,MAAM,WAAW,YAAY;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,YAAa,SAAQ,WAAW;IACjB,KAAK,EAAE,YAAY,EAAE,CAAM;IACzB,MAAM,EAAE,cAAc,GAAG,MAAM,GAAG,aAAa,CAAkB;IAClD,IAAI,UAAQ;IACF,UAAU,SAAO;IAChB,WAAW,SAAM;IAClB,UAAU,SAAM;IAC1C,GAAG,SAAK;IACR,OAAO,SAAM;IACe,YAAY,SAAM;IACtB,OAAO,UAAS;IAC1B,WAAW,SAAc;IAC3B,UAAU,SAAM;IACJ,OAAO,UAAS;IAE3D,OAAO,CAAC,eAAe,CAAK;IAC5B,OAAO,CAAC,aAAa,CAAsB;IAC3C,OAAO,CAAC,kBAAkB,CAAS;IAE5C,IAAI,cAAc,IAAI,YAAY,EAAE,CAEnC;IAE2B,OAAO,CAAC,gBAAgB,CAAkB;IACnD,OAAO,CAAC,MAAM,CAA8B;IAE/D,OAAO,CAAC,eAAe,CAA+B;IACtD,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,MAAM,CAAuB;IACrC,OAAO,CAAC,SAAS,CAAS;IAG1B,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,UAAU,CAAS;IAG3B,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,aAAa,CAAmC;IACxD,OAAO,CAAC,QAAQ,CAAmC;IACnD,OAAO,CAAC,gBAAgB,CAAmC;IAE3D,OAAgB,MAAM,4BAiOpB;IAEO,iBAAiB;IAwBjB,oBAAoB;IAoBpB,YAAY;IAaZ,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;IAwBpD,IAAI,cAAc;;;;;MAwEjB;IAED,IAAI,QAAQ,WAEX;IAED,OAAO,CAAC,cAAc;IA+EtB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAwB1B;;;OAGG;IACH,OAAO,CAAC,KAAK,CAaX;IAEF,OAAO,CAAC,eAAe,CAOrB;IAEF,YAAY,GAAI,iBAAe,UAmB7B;IAEF,OAAO,CAAC,YAAY;IAqBpB,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,cAAc;IAwCtB,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,YAAY;IAoCpB,OAAO,CAAC,gBAAgB;IAgBxB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,wBAAwB;IAYhC,OAAO,CAAC,iBAAiB;IA4ChB,MAAM;CAqIf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD"}