mates-devtools 0.1.0-beta.1

package/dist/types/Mates-DevTools/src/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,aAAa,CAAC;AAChD,eAAO,MAAM,oBAAoB,aAAa,CAAC;AAE/C,eAAO,MAAM,cAAc,QAGzB,CAAC;AAeH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAw4BjB,CAAC"}

package/dist/types/Mates-DevTools/src/types.d.ts

@@ -0,0 +1,19 @@
+import type { Component } from "mates";
+export interface ComponentInfo {
+    component: any;
+    name: string;
+}
+/**
+ * A group of component instances that share the same view function (by reference).
+ * The left column shows one row per group; expanding it in the right column
+ * reveals individual instances.
+ */
+export interface ComponentGroup {
+    /** The shared view function reference */
+    viewFn: Function;
+    /** Display name derived from the view function */
+    name: string;
+    /** All currently mounted instances that use this view */
+    instances: Component[];
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types/Mates-DevTools/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,GAAG,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B,yCAAyC;IACzC,MAAM,EAAE,QAAQ,CAAC;IACjB,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,SAAS,EAAE,SAAS,EAAE,CAAC;CACxB"}

package/dist/types/lib/Directives/$.d.ts

@@ -0,0 +1,371 @@
+import type { TemplateResult } from "lit-html";
+import type { MatesRef } from "../Mutables/ref/ref";
+import type { ClassesInput } from "./classesDirective";
+import type { AttrMap } from "./resolveAttrValue";
+import type { StyleMap } from "./styleDirective";
+/** Any value accepted by the `data()` method — serialised via String(). */
+type DataMap = Record<string, string | number | boolean | null | undefined>;
+/** Subset of DOM event names + a loose string for custom events. */
+type EventName = keyof HTMLElementEventMap | (string & {});
+/** Event listener options forwarded to addEventListener. */
+type ListenerOptions = boolean | AddEventListenerOptions;
+/** ARIA attribute map — keys are aria-* names (with or without the "aria-" prefix). */
+type AriaMap = Record<string, string | number | boolean | null | undefined>;
+/** Scroll options for .scroll(). */
+type ScrollToOptions = {
+    top?: number;
+    left?: number;
+    behavior?: ScrollBehavior;
+};
+/** Measurement result returned by .measure(). */
+export interface Measurements {
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+    x: number;
+    y: number;
+}
+/**
+ * Fluent chain returned by `$(element)`.
+ *
+ * Every method returns `this` so calls can be chained:
+ *
+ * ```ts
+ * $(el)
+ *   .attr({ "aria-label": "Close", disabled: isDisabled })
+ *   .style({ color: "red", fontSize: "14px" })
+ *   .classes(["btn", [isActive, "btn-active"]])
+ *   .on("click", () => handleClick())
+ *   .text("Hello");
+ * ```
+ */
+export interface DollarChain {
+    /**
+     * Set / remove attributes on the element.
+     *
+     * - `true`  → sets attribute with empty string value (boolean attribute)
+     * - `false` → removes the attribute
+     * - `null` / `undefined` → removes the attribute
+     * - string / number → sets the attribute to that value
+     *
+     * ```ts
+     * $(el).attr({ disabled: true, "aria-label": "Close", tabindex: 0 });
+     * ```
+     */
+    attr(attrs: AttrMap): this;
+    /**
+     * Mutate the currently-applied attributes in-place via a draft object.
+     *
+     * The callback receives a **mutable draft** — a plain `Record<string, string>`
+     * pre-populated with every attribute that was set by a previous `.attr()` or
+     * `.updateAttr()` call on this element. Modify it freely: add keys, change
+     * values, delete keys. Whatever the draft looks like when the callback returns
+     * is applied to the element — removed keys cause the corresponding attribute
+     * to be removed from the DOM.
+     *
+     * No return value is needed (or used). This is intentionally different from
+     * `.attr()`, which replaces the whole map. `.updateAttr()` is for surgical,
+     * read-modify-write updates where you only want to touch a few keys.
+     *
+     * ```ts
+     * // Toggle aria-expanded based on its current value
+     * $(el).updateAttr((draft) => {
+     *   draft["aria-expanded"] = draft["aria-expanded"] === "true" ? "false" : "true";
+     * });
+     *
+     * // Increment a counter attribute
+     * $(el).updateAttr((draft) => {
+     *   draft["data-step"] = String(Number(draft["data-step"] ?? 0) + 1);
+     * });
+     *
+     * // Conditionally add/remove attributes
+     * $(el).updateAttr((draft) => {
+     *   if (isLoading) {
+     *     draft["disabled"] = "";
+     *     draft["aria-busy"] = "true";
+     *   } else {
+     *     delete draft["disabled"];
+     *     delete draft["aria-busy"];
+     *   }
+     * });
+     *
+     * // Chain freely — reads the live state at call time
+     * $(el)
+     *   .attr({ "data-loading": "true", tabindex: -1 })
+     *   .updateAttr((draft) => { draft["aria-busy"] = draft["data-loading"]; });
+     * ```
+     */
+    updateAttr(fn: (draft: Record<string, string>) => void): this;
+    /**
+     * Apply inline styles to the element.
+     * Accepts camelCase CSS property names (type-safe via csstype) or
+     * kebab-case / custom property strings.
+     *
+     * Previously applied styles that are absent on a subsequent call are
+     * automatically removed.
+     *
+     * ```ts
+     * $(el).style({ color: "red", fontSize: "14px", "--gap": "8px" });
+     * ```
+     */
+    style(styles: StyleMap): this;
+    /**
+     * Declaratively manage the element's class list.
+     *
+     * Accepts:
+     * - an array of `ClassEntry` items (strings, conditionals, ternaries)
+     * - an object map `{ className: condition }`
+     * - a plain space-separated string
+     *
+     * Classes applied by a previous `classes()` call that are absent in the
+     * next call are removed automatically.
+     *
+     * ```ts
+     * $(el).classes(["btn", [isActive, "btn-active"], [isError, "btn-error", "btn-ok"]]);
+     * ```
+     */
+    classes(input: ClassesInput): this;
+    /**
+     * Add one or more space-separated class names to the element.
+     * Does not remove any existing classes.
+     *
+     * ```ts
+     * $(el).addClass("active highlighted");
+     * ```
+     */
+    addClass(names: string): this;
+    /**
+     * Remove one or more space-separated class names from the element.
+     *
+     * ```ts
+     * $(el).removeClass("active highlighted");
+     * ```
+     */
+    removeClass(names: string): this;
+    /**
+     * Toggle one or more space-separated class names on the element.
+     * Optionally accepts a `force` boolean:
+     * - `true`  → always add
+     * - `false` → always remove
+     * - omitted → toggle
+     *
+     * ```ts
+     * $(el).toggleClass("open");
+     * $(el).toggleClass("open", isOpen);
+     * ```
+     */
+    toggleClass(names: string, force?: boolean): this;
+    /**
+     * Render a lit-html template inside the element.
+     * Accepts a factory function that returns a `TemplateResult` from `html\`…\``.
+     * Uses lit-html's `render()` under the hood, so the template is efficiently
+     * patched on subsequent calls.
+     *
+     * The factory must return a value — bare `html\`…\`` without a return is not
+     * valid here.
+     *
+     * ```ts
+     * $(el).html(() => html`<strong>${userName}</strong>`);
+     * ```
+     */
+    html(templateResult: TemplateResult): this;
+    /**
+     * Set the element's `textContent`.
+     * Any existing child nodes are replaced.
+     *
+     * ```ts
+     * $(el).text("Hello, world!");
+     * ```
+     */
+    text(content: string | number): this;
+    /**
+     * Attach a DOM event listener to the element.
+     * Subsequent calls with the same `event` name replace the previous listener
+     * (the old one is removed before the new one is added).
+     *
+     * ```ts
+     * $(el).on("click", (e) => handleClick(e));
+     * $(el).on("input", (e) => handleInput(e), { passive: true });
+     * ```
+     */
+    on<K extends EventName>(event: K, handler: K extends keyof HTMLElementEventMap ? (e: HTMLElementEventMap[K]) => void : (e: Event) => void, options?: ListenerOptions): this;
+    /**
+     * Set `data-*` attributes on the element.
+     * Keys are used as-is if they start with `data-`, otherwise `data-` is
+     * prepended automatically.
+     * `null` / `undefined` values remove the corresponding attribute.
+     *
+     * ```ts
+     * $(el).data({ id: 7, status: "active" });
+     * // → data-id="7"  data-status="active"
+     * ```
+     */
+    data(map: DataMap): this;
+    /** The underlying element. */
+    readonly el: Element;
+    /**
+     * Focus the element, with an optional `FocusOptions` object.
+     *
+     * ```ts
+     * $(inputEl).focus();
+     * $(inputEl).focus({ preventScroll: true });
+     * ```
+     */
+    focus(options?: FocusOptions): this;
+    /**
+     * Remove focus from the element.
+     *
+     * ```ts
+     * $(el).blur();
+     * ```
+     */
+    blur(): this;
+    /**
+     * Scroll the element to a specific position, or pass a `behavior` string
+     * (`"smooth"` | `"instant"` | `"auto"`) as a shorthand for smooth scrolling
+     * to the top.
+     *
+     * ```ts
+     * $(el).scroll({ top: 0, behavior: "smooth" });
+     * $(el).scroll("smooth");   // shorthand — scrolls to top smoothly
+     * ```
+     */
+    scroll(options?: ScrollToOptions | ScrollBehavior): this;
+    /**
+     * Scroll the element into the viewport.
+     * Delegates to the native `scrollIntoView()`.
+     *
+     * ```ts
+     * $(el).scrollIntoView();
+     * $(el).scrollIntoView({ behavior: "smooth", block: "start" });
+     * ```
+     */
+    scrollIntoView(options?: ScrollIntoViewOptions | boolean): this;
+    /**
+     * Read the element's bounding rect via `getBoundingClientRect()` and return
+     * the measurements synchronously. The chain continues normally — the
+     * measurements are only available through the callback.
+     *
+     * ```ts
+     * $(el).measure(({ width, height, top }) => {
+     *   console.log("size:", width, height, "top:", top);
+     * });
+     * ```
+     */
+    measure(callback: (rect: Measurements) => void): this;
+    /**
+     * Remove a previously registered listener for `event`.
+     * If no `handler` is provided, removes ALL listeners registered via `.on()`
+     * for that event name.
+     *
+     * ```ts
+     * $(el).off("click");                // remove all click listeners
+     * $(el).off("click", myHandler);     // remove specific listener
+     * ```
+     */
+    off(event: EventName, handler?: EventListener): this;
+    /**
+     * Add a one-time event listener that automatically removes itself after
+     * firing once. Accepts the same options as `.on()`.
+     *
+     * ```ts
+     * $(el).once("transitionend", () => el.remove());
+     * ```
+     */
+    once<K extends EventName>(event: K, handler: K extends keyof HTMLElementEventMap ? (e: HTMLElementEventMap[K]) => void : (e: Event) => void, options?: ListenerOptions): this;
+    /**
+     * Attach a delegated event listener on this element that fires only when
+     * the event target matches `selector`. Useful for lists and dynamic children.
+     *
+     * ```ts
+     * $(listEl).delegate("click", "li.item", (e, target) => {
+     *   console.log("item clicked:", target.dataset.id);
+     * });
+     * ```
+     */
+    delegate<K extends EventName>(event: K, selector: string, handler: (e: K extends keyof HTMLElementEventMap ? HTMLElementEventMap[K] : Event, matchedTarget: Element) => void, options?: ListenerOptions): this;
+    /**
+     * Set `aria-*` attributes. Keys may include or omit the `aria-` prefix.
+     * `null` / `undefined` / `false` removes the attribute.
+     *
+     * ```ts
+     * $(el).aria({ label: "Close dialog", hidden: false, expanded: isOpen });
+     * // → aria-label="Close dialog"  aria-expanded="true/false"
+     * ```
+     */
+    aria(map: AriaMap): this;
+}
+/**
+ * Fluent DOM utility — wrap any element and chain imperative DOM operations.
+ *
+ * ```ts
+ * import { $ } from "mates";
+ *
+ * $(buttonEl)
+ *   .attr({ disabled: isDisabled, "aria-pressed": isActive })
+ *   .style({ opacity: [isDisabled, "0.5", "1"] })
+ *   .classes(["btn", [isActive, "btn-active"]])
+ *   .on("click", handleClick)
+ *   .text("Click me");
+ * ```
+ *
+ * ### Methods
+ *
+ * | Method | Description |
+ * |--------|-------------|
+ * | `.attr(map)` | Set / remove attributes. Supports boolean, conditional `[cond, val]` and ternary `[cond, t, f]` values. |
+ * | `.style(map)` | Apply inline styles (camelCase or kebab-case). Previously applied styles removed automatically. |
+ * | `.classes(input)` | Manage class list via array, object map, or string. Stale classes removed automatically. |
+ * | `.addClass(names)` | Add space-separated class names. |
+ * | `.removeClass(names)` | Remove space-separated class names. |
+ * | `.toggleClass(names, force?)` | Toggle space-separated class names. |
+ * | `.html(factory)` | Render a lit-html template inside the element via `() => html\`…\``. |
+ * | `.text(content)` | Set `textContent`. |
+ * | `.on(event, handler, opts?)` | Add a DOM event listener. Re-calling with the same event replaces the previous listener. |
+ * | `.updateAttr(fn)` | Mutate current attrs via a draft object — add/change/delete keys, no return needed. |
+ * | `.off(event, handler?)` | Remove a listener added by `.on()`. Omit handler to remove all for that event. |
+ * | `.once(event, handler, opts?)` | One-time listener — auto-removes itself after firing. |
+ * | `.delegate(event, selector, handler)` | Delegated listener — fires only when target matches `selector`. |
+ * | `.props(map)` | Set JS properties directly on the element (for custom elements). |
+ * | `.data(map)` | Set `data-*` attributes. `null`/`undefined` removes the attribute. |
+ * | `.aria(map)` | Set `aria-*` attributes. Keys may omit the `aria-` prefix. `false`/`null` removes. |
+ * | `.cssVar(map)` | Set CSS custom properties (`--var`). Keys may omit `--`. `null` removes. |
+ * | `.show()` | Remove `display:none` inline style. |
+ * | `.hide()` | Set `display:none` inline style. |
+ * | `.toggle(force?)` | Toggle visibility. Optional `force` boolean overrides auto-detection. |
+ * | `.focus(opts?)` | Focus the element. |
+ * | `.blur()` | Blur the element. |
+ * | `.scroll(opts?)` | Scroll element to position. Pass `"smooth"` as shorthand for smooth-scroll-to-top. |
+ * | `.scrollIntoView(opts?)` | Scroll element into the viewport. |
+ * | `.measure(cb)` | Read `getBoundingClientRect()` synchronously inside a callback, keeps chain alive. |
+ * | `.getAttr(name)` | Read a single attribute value. Returns `null` if absent. |
+ * | `.clone(deep?)` | Clone the element and return a new `DollarChain` wrapping it. |
+ *
+ * Accepts either a raw `Element` **or** a `MatesRef` created by `ref()` /
+ * `createRef()`. When a `MatesRef` is passed and its `.value` is `undefined`
+ * (the element has not mounted yet, or has already been removed from the DOM),
+ * a descriptive error is thrown pointing to the correct lifecycle hooks.
+ *
+ * ```ts
+ * // ✅ Inside onMount / onPaint / onUpdate — element is guaranteed to exist
+ * const inputRef = ref<HTMLInputElement>();
+ *
+ * onMount(() => {
+ *   $(inputRef).focus();
+ * });
+ *
+ * onUpdate(() => {
+ *   $(inputRef).updateAttr((d) => { d["aria-invalid"] = hasError ? "true" : "false"; });
+ * });
+ * ```
+ *
+ * @param elementOrRef - A DOM `Element` or a `MatesRef<T>`.
+ * @returns A `DollarChain` instance bound to the element.
+ * @throws If a `MatesRef` is passed whose `.value` is `undefined`.
+ */
+export declare function $<T extends Element = Element>(elementOrRef: T | MatesRef<T>): DollarChain;
+export {};
+//# sourceMappingURL=$.d.ts.map

package/dist/types/lib/Directives/$.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"$.d.ts","sourceRoot":"","sources":["../../../../../lib/Directives/$.ts"],"names":[],"mappings":"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"}

package/dist/types/lib/Directives/animatedConditional.d.ts

@@ -0,0 +1,67 @@
+/**
+ * animatedConditional.ts
+ *
+ * Animated conditional rendering using the same atom + effect + animateSwap
+ * pattern proven in animatedRouter.
+ *
+ * - `animatedIf(condition, trueTemplate, falseTemplate?, config?)`
+ *   Wraps content in a <div>, animates the div on swap.
+ *
+ * - `animatedX(component, props, config)`
+ *   Thin wrapper over animatedIf — passes `x-view` as the true template.
+ */
+import { nothing, type TemplateResult } from "lit-html";
+import type { AnimationPreset } from "../actions/animateTypes";
+import type { ComponentType } from "../Template/x-x.types";
+export interface AnimatedIfConfig {
+    /** Animation played on the wrapper when new content enters. Default: fadeIn(250). */
+    enter?: AnimationPreset;
+    /** Animation played on the wrapper when current content exits. Default: fadeOut(200). */
+    exit?: AnimationPreset;
+}
+export interface AnimatedXConfig extends AnimatedIfConfig {
+    /** Whether the component is visible. */
+    show: boolean;
+}
+/**
+ * Conditional rendering with animated transitions.
+ *
+ * Renders `trueTemplate` when `condition` is `true`, `falseTemplate` otherwise.
+ * On condition change the wrapper div plays exit → swap → enter, using the
+ * same `animateSwap` utility as `animatedRouter`.
+ *
+ * @example
+ * ```ts
+ * html`${animatedIf(
+ *   isOpen.val,
+ *   html`<div class="panel">Hello</div>`,
+ *   html`<div class="placeholder">Gone</div>`,
+ *   {
+ *     enter: slideInPreset("up", "16px", 300),
+ *     exit:  fadeOutPreset(200),
+ *   },
+ * )}`
+ * ```
+ */
+export declare function animatedIf(condition: boolean, trueTemplate: TemplateResult | typeof nothing, falseTemplate?: TemplateResult | typeof nothing, config?: AnimatedIfConfig): TemplateResult<1>;
+/**
+ * Animated show/hide for a component.
+ *
+ * Internally uses `animatedIf` — when `config.show` is `true` the component
+ * is rendered via `<x-view>`, when `false` it swaps to `nothing`.
+ *
+ * @example
+ * ```ts
+ * html`${animatedX(
+ *   MyPanel,
+ *   { title: "Hello" },
+ *   {
+ *     show: isOpen.val,
+ *     enter: slideInPreset("up", "24px", 300),
+ *     exit:  fadeOutPreset(200),
+ *   },
+ * )}`
+ * ```
+ */
+export declare function animatedX(component: ComponentType, props: Record<string, any>, config: AnimatedXConfig): TemplateResult<1>;
+//# sourceMappingURL=animatedConditional.d.ts.map

package/dist/types/lib/Directives/animatedConditional.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animatedConditional.d.ts","sourceRoot":"","sources":["../../../../../lib/Directives/animatedConditional.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAQ,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AAG9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAM/D,OAAO,KAAK,EAAE,aAAa,EAAS,MAAM,uBAAuB,CAAC;AAIlE,MAAM,WAAW,gBAAgB;IAC/B,qFAAqF;IACrF,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,yFAAyF;IACzF,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,wCAAwC;IACxC,IAAI,EAAE,OAAO,CAAC;CACf;AAoFD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,UAAU,CACxB,SAAS,EAAE,OAAO,EAClB,YAAY,EAAE,cAAc,GAAG,OAAO,OAAO,EAC7C,aAAa,GAAE,cAAc,GAAG,OAAO,OAAiB,EACxD,MAAM,CAAC,EAAE,gBAAgB,qBAQ1B;AASD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CACvB,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC1B,MAAM,EAAE,eAAe,qBASxB"}

package/dist/types/lib/Directives/animationClasses.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Inject mates animation utility classes into the global stylesheet.
+ * Safe to call multiple times — injected only once.
+ *
+ * This is called automatically when the module is imported, so no manual
+ * setup is needed. You can still call it explicitly if desired.
+ *
+ * Apply classes directly on any element:
+ * ```html
+ * <div class="mates-fade-in">Hello</div>
+ * <div class="mates-slide-in-up" style="--mates-duration:500ms">Hello</div>
+ * ```
+ */
+export declare function injectMatesAnimations(): void;
+/**
+ * Typed constants for every mates animation class name.
+ * Use instead of raw strings for autocomplete and refactor safety.
+ *
+ * @example
+ * ```ts
+ * import { MA } from "@mates";
+ * html`<div class=${MA.fadeIn}>Hello</div>`
+ * html`<div class="${MA.slideInUp}" style="--mates-duration:500ms">Hi</div>`
+ * ```
+ */
+export declare const MA: {
+    readonly fadeIn: "mates-fade-in";
+    readonly fadeOut: "mates-fade-out";
+    readonly slideInUp: "mates-slide-in-up";
+    readonly slideOutUp: "mates-slide-out-up";
+    readonly slideInDown: "mates-slide-in-down";
+    readonly slideOutDown: "mates-slide-out-down";
+    readonly slideInLeft: "mates-slide-in-left";
+    readonly slideOutLeft: "mates-slide-out-left";
+    readonly slideInRight: "mates-slide-in-right";
+    readonly slideOutRight: "mates-slide-out-right";
+    readonly scaleIn: "mates-scale-in";
+    readonly scaleOut: "mates-scale-out";
+    readonly springIn: "mates-spring-in";
+    readonly flipInX: "mates-flip-in-x";
+    readonly flipInY: "mates-flip-in-y";
+    readonly blurIn: "mates-blur-in";
+    readonly blurOut: "mates-blur-out";
+    readonly shake: "mates-shake";
+    readonly pulse: "mates-pulse";
+    readonly bounce: "mates-bounce";
+    readonly spin: "mates-spin";
+};
+export type MatesAnimationClass = (typeof MA)[keyof typeof MA];
+//# sourceMappingURL=animationClasses.d.ts.map

package/dist/types/lib/Directives/animationClasses.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animationClasses.d.ts","sourceRoot":"","sources":["../../../../../lib/Directives/animationClasses.ts"],"names":[],"mappings":"AAyBA;;;;;;;;;;;;GAYG;AACH,wBAAgB,qBAAqB,IAAI,IAAI,CA+K5C;AAID;;;;;;;;;;GAUG;AACH,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;CA6BL,CAAC;AAEX,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,OAAO,EAAE,CAAC,CAAC"}

package/dist/types/lib/Directives/attrDirective.d.ts

@@ -0,0 +1,69 @@
+export { type AttrMap, type AttrValue, resolveAttrValue, } from "./resolveAttrValue";
+import type { AttrMap } from "./resolveAttrValue";
+/**
+ * A plain attribute value — a string, number, or boolean.
+ * - `true`  → sets the attribute with an empty string value (boolean attribute)
+ * - `false` → removes the attribute
+ * - string/number → sets the attribute to that value
+ */
+type PlainValue = string | number | boolean;
+/**
+ * Conditional attribute value (2-element tuple):
+ *   [condition, value]
+ * The attribute is only applied when `condition` is truthy.
+ * When falsy, the attribute is removed from the element.
+ */
+type ConditionalValue = [condition: unknown, value: PlainValue];
+/**
+ * Ternary attribute value (3-element tuple):
+ *   [condition, trueValue, falseValue]
+ * Sets the attribute to `trueValue` when condition is truthy,
+ * `falseValue` otherwise.
+ */
+type TernaryValue = [
+    condition: unknown,
+    trueValue: PlainValue,
+    falseValue: PlainValue
+];
+export type { PlainValue, ConditionalValue, TernaryValue };
+/**
+ * Declarative, conditional attribute directive for lit-html templates.
+ *
+ * Accepts a map of attribute names to values. Values can be:
+ *  - **plain**: always applied (`"aria-label": "Close"`)
+ *  - **boolean**: `true` sets the attribute (empty value), `false` removes it
+ *    (`disabled: isDisabled`)
+ *  - **conditional** (2-element array): applied only when condition is truthy
+ *    (`"aria-expanded": [isOpen, "true"]`)
+ *  - **ternary** (3-element array): picks between two values
+ *    (`"aria-pressed": [isActive, "true", "false"]`)
+ *
+ * Attributes whose conditions are falsy (or whose keys are removed between
+ * renders) are automatically removed from the element.
+ *
+ * @example
+ * ```ts
+ * import { html } from "mates";
+ * import { attr } from "mates";
+ *
+ * const isDisabled = false;
+ * const isOpen = true;
+ *
+ * html`
+ *   <button ${attr({
+ *     "aria-label": "Submit form",
+ *     "aria-expanded": [isOpen, "true", "false"],
+ *     "aria-disabled": [isDisabled, "true"],
+ *     "data-testid": "submit-btn",
+ *     disabled: isDisabled,
+ *     tabindex: 0,
+ *   })}>
+ *     Submit
+ *   </button>
+ * `;
+ * ```
+ */
+export declare function attr(attrs: AttrMap): import("lit-html/directive.js").DirectiveResult<import("lit-html/directive.js").DirectiveClass>;
+/** No-op — kept for backwards compatibility. */
+export declare function removeAttr(_el: Element): void;
+//# sourceMappingURL=attrDirective.d.ts.map

package/dist/types/lib/Directives/attrDirective.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attrDirective.d.ts","sourceRoot":"","sources":["../../../../../lib/Directives/attrDirective.ts"],"names":[],"mappings":"AAYA,OAAO,EACL,KAAK,OAAO,EACZ,KAAK,SAAS,EACd,gBAAgB,GACjB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAIlD;;;;;GAKG;AACH,KAAK,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAE5C;;;;;GAKG;AACH,KAAK,gBAAgB,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC;AAEhE;;;;;GAKG;AACH,KAAK,YAAY,GAAG;IAClB,SAAS,EAAE,OAAO;IAClB,SAAS,EAAE,UAAU;IACrB,UAAU,EAAE,UAAU;CACvB,CAAC;AAIF,YAAY,EAAE,UAAU,EAAE,gBAAgB,EAAE,YAAY,EAAE,CAAC;AAmB3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,OAAO,mGAElC;AAED,gDAAgD;AAChD,wBAAgB,UAAU,CAAC,GAAG,EAAE,OAAO,GAAG,IAAI,CAAG"}