@mhmo91/schmancy 0.10.35 → 0.10.37

package/types/src/chips/chips.d.ts

@@ -1,43 +1 @@
-import { SchmancyElement } from '@mixins/index';
-import { PropertyValues } from 'lit';
-import type { FilterChipChangeEvent as SchmancyChipChangeEvent } from './filter-chip';
-import { SchmancyFilterChip as SchmancyChip } from './filter-chip';
-export default class SchmancyChips extends SchmancyElement {
-    static styles: import("lit").CSSResult[];
-    private value$;
-    private values$;
-    private _value;
-    private _values;
-    private _multi;
-    private _valueSet;
-    private _valuesSet;
-    /**
-     * @deprecated Use .values for multi-selection or .value for single-selection instead.
-     * The mode is now automatically determined based on which property is used.
-     */
-    get multi(): boolean;
-    set multi(value: boolean);
-    /**
-     * Automatically determines the selection mode based on which properties are in use
-     */
-    private get mode();
-    get values(): string[];
-    set values(value: string[]);
-    get value(): string;
-    set value(value: string);
-    chips: (SchmancyChip | HTMLElement)[];
-    wrap: boolean;
-    required: boolean;
-    justify: 'start' | 'center' | 'end';
-    connectedCallback(): void;
-    private updateChipStates;
-    change(e: CustomEvent<SchmancyChipChangeEvent>): Promise<void>;
-    protected firstUpdated(_changedProperties: PropertyValues): void;
-    protected render(): unknown;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'schmancy-chips': SchmancyChips;
-    }
-}
-export type SchmancyChipsChangeEvent = string | Array<string>;
+export * from '../form/fields/chips/chips';

package/types/src/chips/filter-chip.d.ts

@@ -1,67 +1 @@
-import { SchmancyElement } from '@mixins/index';
-/**
- * Filter chip component for content filtering.
- *
- * Filter chips are the ONLY chip type that maintains persistent selected state.
- * They are used for filtering content by toggling on/off different filter criteria.
- *
- * @fires change - Dispatched when selection state changes with {value, selected}
- * @fires remove - Dispatched when remove button is clicked (if removable)
- *
- * @example
- * ```html
- * <schmancy-filter-chip value="category-1" selected>
- *   Category 1
- * </schmancy-filter-chip>
- * ```
- */
-export declare class SchmancyFilterChip extends SchmancyElement {
-    static styles: import("lit").CSSResult[];
-    /** Unique identifier for this filter chip */
-    value: string;
-    /** Whether the filter chip is selected (active filter) */
-    private _selected;
-    get selected(): boolean;
-    set selected(value: boolean);
-    /** Whether to show a remove button */
-    removable: boolean;
-    /** Whether the chip is disabled */
-    disabled: boolean;
-    /** Whether to use elevated style with shadow */
-    elevated: boolean;
-    constructor();
-    protected static shadowRootOptions: {
-        delegatesFocus: boolean;
-        clonable?: boolean;
-        customElementRegistry?: CustomElementRegistry;
-        mode: ShadowRootMode;
-        serializable?: boolean;
-        slotAssignment?: SlotAssignmentMode;
-    };
-    static formAssociated: boolean;
-    internals: ElementInternals | undefined;
-    get form(): HTMLFormElement;
-    connectedCallback(): void;
-    protected updated(changed: Map<string, unknown>): void;
-    formResetCallback(): void;
-    formDisabledCallback(disabled: boolean): void;
-    private handleClick;
-    private handleRemove;
-    private handleKeyDown;
-    protected render(): unknown;
-}
-export { SchmancyFilterChip as SchmancyChip };
-declare global {
-    interface HTMLElementTagNameMap {
-        'schmancy-chip': SchmancyFilterChip;
-        'schmancy-filter-chip': SchmancyFilterChip;
-    }
-}
-export type FilterChipChangeEvent = {
-    value: string;
-    selected: boolean;
-};
-export type FilterChipRemoveEvent = {
-    value: string;
-};
-export type SchmancyChipChangeEvent = FilterChipChangeEvent;
+export * from '../form/fields/chips/filter-chip';

package/types/src/chips/index.d.ts

@@ -1,5 +1 @@
-export * from './assist-chip';
-export * from './chips';
-export * from './filter-chip';
-export * from './input-chip';
-export * from './suggestion-chip';
+export * from '../form/fields/chips';

package/types/src/chips/input-chip.d.ts

@@ -1,82 +1 @@
-import { SchmancyElement } from '@mixins/index';
-/**
- * Input chip component - represents user-provided information that can be removed.
- *
- * IMPORTANT: Per Material Design 3 specification, input chips do NOT have selected state.
- * They represent discrete pieces of user input (like entered tags, selections from lists, etc.)
- * that can only be removed, not toggled on/off.
- *
- * Use cases:
- * - Displaying selected recipients in an email
- * - Showing applied filters that can be removed
- * - Tags or keywords entered by the user
- * - Selected items from a multi-select dropdown
- *
- * @fires click - Optional click event on chip body (value)
- * @fires remove - Dispatched when remove button is clicked (value)
- *
- * @example
- * ```html
- * <schmancy-input-chip value="john@example.com" avatar="/avatars/john.jpg">
- *   John Doe
- * </schmancy-input-chip>
- * ```
- */
-export declare class SchmancyInputChip extends SchmancyElement {
-    static styles: import("lit").CSSResult[];
-    /** Value identifier for the chip */
-    value: string;
-    /** Optional icon name (Material Symbols) */
-    icon: string;
-    /** Optional avatar image URL */
-    avatar: string;
-    /** Whether to show remove button (default true for input chips) */
-    removable: boolean;
-    /** Disable the chip */
-    disabled: boolean;
-    /** Elevated style variant */
-    elevated: boolean;
-    private chipHover$;
-    private removeHover$;
-    private focused$;
-    private pressed$;
-    uiState: {
-        chipHover: boolean;
-        removeHover: boolean;
-        focused: boolean;
-        pressed: boolean;
-    };
-    private ripples;
-    private nextRippleId;
-    constructor();
-    protected static shadowRootOptions: {
-        delegatesFocus: boolean;
-        clonable?: boolean;
-        customElementRegistry?: CustomElementRegistry;
-        mode: ShadowRootMode;
-        serializable?: boolean;
-        slotAssignment?: SlotAssignmentMode;
-    };
-    static formAssociated: boolean;
-    internals: ElementInternals | undefined;
-    get form(): HTMLFormElement;
-    protected updated(changed: Map<string, unknown>): void;
-    connectedCallback(): void;
-    private handleChipClick;
-    private handleRemove;
-    private handleKeyDown;
-    private handleFocus;
-    private handleBlur;
-    protected render(): unknown;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'schmancy-input-chip': SchmancyInputChip;
-    }
-}
-export type InputChipClickEvent = {
-    value: string;
-};
-export type InputChipRemoveEvent = {
-    value: string;
-};
+export * from '../form/fields/chips/input-chip';

package/types/src/chips/suggestion-chip.d.ts

@@ -1,52 +1 @@
-import { SchmancyElement } from '@mixins/index';
-/**
- * Suggestion chip component - provides contextual recommendations to users
- *
- * IMPORTANT: Suggestion chips do NOT have a selected state. They are designed to
- * provide suggestions and recommendations that trigger actions when clicked.
- * Unlike filter chips, they cannot be toggled on/off.
- *
- * Pure Schmancy implementation with Tailwind CSS and RxJS state management
- */
-export declare class SchmancySuggestionChip extends SchmancyElement {
-    static styles: import("lit").CSSResult[];
-    /** Value identifier for the chip */
-    value: string;
-    /** Optional icon name (Material Symbols) */
-    icon: string;
-    /** Optional href for navigation */
-    href: string;
-    /** Target for navigation (e.g., '_blank') */
-    target: string;
-    /** Disable the chip */
-    disabled: boolean;
-    /** Elevated style variant - flat by default per M3 spec */
-    elevated: boolean;
-    private hover$;
-    private pressed$;
-    private focused$;
-    private ripples;
-    protected static shadowRootOptions: {
-        delegatesFocus: boolean;
-        clonable?: boolean;
-        customElementRegistry?: CustomElementRegistry;
-        mode: ShadowRootMode;
-        serializable?: boolean;
-        slotAssignment?: SlotAssignmentMode;
-    };
-    private nextRippleId;
-    connectedCallback(): void;
-    private handleClick;
-    private handleKeyDown;
-    private handleFocus;
-    private handleBlur;
-    protected render(): unknown;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'schmancy-suggestion-chip': SchmancySuggestionChip;
-    }
-}
-export type SuggestionChipActionEvent = {
-    value: string;
-};
+export * from '../form/fields/chips/suggestion-chip';

package/types/src/directives/reveal.d.ts

@@ -4,6 +4,9 @@
  * Uses Blackbird spring physics for natural, organic motion.
  * Element stays in DOM to prevent layout shift.
  *
+ * When fully revealed, no directive-imposed max-height or overflow:hidden
+ * is left on the element — it lays out at its natural full height.
+ *
  * Usage:
  * ```ts
  * // Basic - uses 'smooth' preset
@@ -12,7 +15,7 @@
  * // With preset - 'snappy' for quick interactions
  * html`<div ${reveal(this.isVisible, { preset: 'snappy' })}>Content</div>`
  *
- * // With custom max height
+ * // Opt-in scroll cap (explicit maxHeight — keeps overflow:auto, does NOT clip)
  * html`<div ${reveal(this.items.length > 1, { maxHeight: '200px' })}>Content</div>`
  *
  * // Bouncy for playful UI
@@ -28,12 +31,17 @@
  * @see packages/schmancy/src/utils/animation.ts for Blackbird system
  */
 import { AsyncDirective } from 'lit/async-directive.js';
-import type { ElementPart, PartInfo } from 'lit/directive.js';
+import { type ElementPart, type PartInfo } from 'lit/directive.js';
 export type RevealPreset = 'smooth' | 'snappy' | 'bouncy' | 'gentle';
 export interface RevealOptions {
     /** Animation preset (default: 'smooth') */
     preset?: RevealPreset;
-    /** Max height when revealed (default: '10rem') */
+    /**
+     * Explicit scroll cap (opt-in). When set the element is constrained to
+     * this height with overflow:auto — content scrolls rather than clips.
+     * When omitted (the default) the element is fully unconstrained after
+     * opening: no max-height, no overflow:hidden left on it.
+     */
     maxHeight?: string;
     /** Custom duration override in ms (uses preset duration if not specified) */
     duration?: number;
@@ -42,11 +50,13 @@ export interface RevealOptions {
 }
 declare class RevealDirective extends AsyncDirective {
     private initialized;
-    private element;
+    /** Fires on disconnect to tear down the transitionend subscription. */
+    private teardown$;
+    /** True if this is the very first update call — used to detect always-true initial mount. */
+    private firstUpdate;
     constructor(partInfo: PartInfo);
     render(_show?: boolean, _options?: RevealOptions): symbol;
     update(part: ElementPart, [show, options]: [boolean | undefined, RevealOptions?]): symbol;
-    private setupElement;
     disconnected(): void;
     reconnected(): void;
 }

package/types/src/fab/fab.d.ts

@@ -0,0 +1,80 @@
+import { SchmancyElement } from '@mixins/index';
+export type FabVariant = 'surface' | 'primary' | 'secondary' | 'tertiary';
+export type FabSize = 'small' | 'medium' | 'large';
+/**
+ * Material 3 Floating Action Button.
+ *
+ * Mirrors the `md-fab` reference implementation
+ * (github.com/material-components/material-web) and the M3 spec
+ * (m3.material.io/components/floating-action-button): four colour
+ * variants, three container sizes, an extended form (set `label`),
+ * and a `lowered` elevation register. Per M3 guidance a FAB is never
+ * disabled, so there is no `disabled` property.
+ *
+ * Sizing, shape, icon size and elevation are M3 design tokens expressed
+ * as `:host` rules (the same token-driven model as `md-fab`'s SCSS);
+ * colour roles and the state layer are schmancy theme utilities. The
+ * host shrink-wraps the inner button and clips its rounded shape.
+ *
+ * @element schmancy-fab
+ * @slot - The icon (typically `<schmancy-icon>`).
+ * @csspart base - The underlying native `<button>`.
+ */
+export declare class SchmancyFab extends SchmancyElement {
+    static styles: import("lit").CSSResult[];
+    protected static shadowRootOptions: {
+        mode: string;
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    private nativeElement;
+    private ariaLabelValue;
+    /**
+     * Colour variant. M3 maps each to a container + on-container role.
+     * @attr
+     * @default 'surface'
+     */
+    variant: FabVariant;
+    /**
+     * Container size. Ignored while extended (extended is always 56dp tall).
+     * @attr
+     * @default 'medium'
+     */
+    size: FabSize;
+    /**
+     * Extended-FAB label. A non-empty value switches the FAB to its
+     * extended form (icon + text), exactly as `md-fab` derives extended
+     * from a truthy label.
+     * @attr
+     */
+    label: string;
+    /**
+     * Reflected mirror of "label is non-empty" so `:host([extended])`
+     * can drive the extended geometry. Synced from `label`; read it,
+     * don't set it.
+     * @attr
+     */
+    extended: boolean;
+    /**
+     * Lowers the FAB's elevation register (M3 lowered FAB).
+     * @attr
+     * @default false
+     */
+    lowered: boolean;
+    set ariaLabel(value: string);
+    get ariaLabel(): string;
+    /** Sets focus on the FAB. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the FAB. */
+    blur(): void;
+    protected willUpdate(changed: Map<string, unknown>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-fab': SchmancyFab;
+    }
+}

package/types/src/fab/fab.test.d.ts

@@ -0,0 +1,2 @@
+import './fab';
+import '../icons/icon';

package/types/src/fab/index.d.ts

@@ -0,0 +1 @@
+export * from './fab';

package/types/src/form/fields/chips/assist-chip.d.ts

@@ -0,0 +1,47 @@
+import { SchmancyElement } from '@mixins/index';
+/**
+ * Assist chip component - prompts user actions like opening calendar events or sharing content
+ * Pure Schmancy implementation with Tailwind CSS and RxJS state management
+ */
+export declare class SchmancyAssistChip extends SchmancyElement {
+    static styles: import("lit").CSSResult[];
+    /** Value identifier for the chip */
+    value: string;
+    /** Optional icon name (Material Symbols) */
+    icon: string;
+    /** Optional href for navigation */
+    href: string;
+    /** Target for navigation (e.g., '_blank') */
+    target: string;
+    /** Disable the chip */
+    disabled: boolean;
+    /** Elevated style variant - true by default per M3 spec for assist chips */
+    elevated: boolean;
+    private hover$;
+    private pressed$;
+    private focused$;
+    private ripples;
+    protected static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    private nextRippleId;
+    connectedCallback(): void;
+    private handleClick;
+    private handleKeyDown;
+    private handleFocus;
+    private handleBlur;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-assist-chip': SchmancyAssistChip;
+    }
+}
+export type AssistChipActionEvent = {
+    value: string;
+};

package/types/src/form/fields/chips/chips.d.ts

@@ -0,0 +1,35 @@
+import { PropertyValues } from 'lit';
+import type { FilterChipChangeEvent as SchmancyChipChangeEvent } from './filter-chip';
+import { SchmancyFilterChip as SchmancyChip } from './filter-chip';
+export type SchmancyChipsChangeEvent = CustomEvent<{
+    value: string | string[];
+}>;
+declare const SchmancyChips_base: import("../../../../mixins").Constructor<import("@mixins/formField.mixin").IFormFieldMixin> & import("../../../../mixins").Constructor<import("../../../../mixins").ITailwindElementMixin> & import("../../../../mixins").Constructor<import("lit").LitElement> & import("../../../../mixins").Constructor<import("../../../../mixins").IBaseMixin>;
+export default class SchmancyChips extends SchmancyChips_base {
+    /** Whether multiple chips can be selected simultaneously. */
+    multi: boolean;
+    get value(): string | string[];
+    set value(v: string | string[]);
+    /** Typed convenience alias for multi-mode consumers. */
+    get values(): string[];
+    set values(v: string[]);
+    wrap: boolean;
+    justify: 'start' | 'center' | 'end';
+    chips: (SchmancyChip | HTMLElement)[];
+    private value$;
+    private values$;
+    protected willUpdate(changedProps: PropertyValues): void;
+    checkValidity(): boolean;
+    connectedCallback(): void;
+    private updateChipStates;
+    change(e: CustomEvent<SchmancyChipChangeEvent>): Promise<void>;
+    resetForm(): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-chips': SchmancyChips;
+    }
+}
+export {};

package/types/src/form/fields/chips/filter-chip.d.ts

@@ -0,0 +1,67 @@
+import { SchmancyElement } from '@mixins/index';
+/**
+ * Filter chip component for content filtering.
+ *
+ * Filter chips are the ONLY chip type that maintains persistent selected state.
+ * They are used for filtering content by toggling on/off different filter criteria.
+ *
+ * @fires change - Dispatched when selection state changes with {value, selected}
+ * @fires remove - Dispatched when remove button is clicked (if removable)
+ *
+ * @example
+ * ```html
+ * <schmancy-filter-chip value="category-1" selected>
+ *   Category 1
+ * </schmancy-filter-chip>
+ * ```
+ */
+export declare class SchmancyFilterChip extends SchmancyElement {
+    static styles: import("lit").CSSResult[];
+    /** Unique identifier for this filter chip */
+    value: string;
+    /** Whether the filter chip is selected (active filter) */
+    private _selected;
+    get selected(): boolean;
+    set selected(value: boolean);
+    /** Whether to show a remove button */
+    removable: boolean;
+    /** Whether the chip is disabled */
+    disabled: boolean;
+    /** Whether to use elevated style with shadow */
+    elevated: boolean;
+    constructor();
+    protected static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    static formAssociated: boolean;
+    internals: ElementInternals | undefined;
+    get form(): HTMLFormElement;
+    connectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    private handleClick;
+    private handleRemove;
+    private handleKeyDown;
+    protected render(): unknown;
+}
+export { SchmancyFilterChip as SchmancyChip };
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-chip': SchmancyFilterChip;
+        'schmancy-filter-chip': SchmancyFilterChip;
+    }
+}
+export type FilterChipChangeEvent = {
+    value: string;
+    selected: boolean;
+};
+export type FilterChipRemoveEvent = {
+    value: string;
+};
+export type SchmancyChipChangeEvent = FilterChipChangeEvent;

package/types/src/form/fields/chips/index.d.ts

@@ -0,0 +1,5 @@
+export * from './assist-chip';
+export * from './chips';
+export * from './filter-chip';
+export * from './input-chip';
+export * from './suggestion-chip';

package/types/src/form/fields/chips/input-chip.d.ts

@@ -0,0 +1,82 @@
+import { SchmancyElement } from '@mixins/index';
+/**
+ * Input chip component - represents user-provided information that can be removed.
+ *
+ * IMPORTANT: Per Material Design 3 specification, input chips do NOT have selected state.
+ * They represent discrete pieces of user input (like entered tags, selections from lists, etc.)
+ * that can only be removed, not toggled on/off.
+ *
+ * Use cases:
+ * - Displaying selected recipients in an email
+ * - Showing applied filters that can be removed
+ * - Tags or keywords entered by the user
+ * - Selected items from a multi-select dropdown
+ *
+ * @fires click - Optional click event on chip body (value)
+ * @fires remove - Dispatched when remove button is clicked (value)
+ *
+ * @example
+ * ```html
+ * <schmancy-input-chip value="john@example.com" avatar="/avatars/john.jpg">
+ *   John Doe
+ * </schmancy-input-chip>
+ * ```
+ */
+export declare class SchmancyInputChip extends SchmancyElement {
+    static styles: import("lit").CSSResult[];
+    /** Value identifier for the chip */
+    value: string;
+    /** Optional icon name (Material Symbols) */
+    icon: string;
+    /** Optional avatar image URL */
+    avatar: string;
+    /** Whether to show remove button (default true for input chips) */
+    removable: boolean;
+    /** Disable the chip */
+    disabled: boolean;
+    /** Elevated style variant */
+    elevated: boolean;
+    private chipHover$;
+    private removeHover$;
+    private focused$;
+    private pressed$;
+    uiState: {
+        chipHover: boolean;
+        removeHover: boolean;
+        focused: boolean;
+        pressed: boolean;
+    };
+    private ripples;
+    private nextRippleId;
+    constructor();
+    protected static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    static formAssociated: boolean;
+    internals: ElementInternals | undefined;
+    get form(): HTMLFormElement;
+    protected updated(changed: Map<string, unknown>): void;
+    connectedCallback(): void;
+    private handleChipClick;
+    private handleRemove;
+    private handleKeyDown;
+    private handleFocus;
+    private handleBlur;
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-input-chip': SchmancyInputChip;
+    }
+}
+export type InputChipClickEvent = {
+    value: string;
+};
+export type InputChipRemoveEvent = {
+    value: string;
+};