@mhmo91/schmancy 0.10.34 → 0.10.36

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;
+};

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

@@ -0,0 +1,52 @@
+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;
+};

package/types/src/form/fields/date-range/date-range.d.ts

@@ -34,6 +34,9 @@ export declare class SchmancyDateRange extends SchmancyDateRange_base {
     step?: 'day' | 'week' | 'month' | 'year' | number;
     /** When true, collapses to just an icon button on mobile screens */
     collapse: boolean;
+    private readonly open$;
+    private readonly close$;
+    private readonly announce$;
     private isOpen;
     private selectedDateRange;
     private activePreset;
@@ -43,7 +46,6 @@ export declare class SchmancyDateRange extends SchmancyDateRange_base {
     private memoizedPresets;
     disconnectedCallback(): void;
     connectedCallback(): void;
-    private setupEventHandlers;
     updated(changedProps: PropertyValues): void;
     willUpdate(changed: PropertyValues): void;
     /**
@@ -59,8 +61,8 @@ export declare class SchmancyDateRange extends SchmancyDateRange_base {
      */
     toFormEntries(): Array<[string, FormDataEntryValue]>;
     /** `dirty` tracks the underlying date strings, not the wide-union value. */
-    private _dateFromDefault;
-    private _dateToDefault;
+    private dateFromDefault;
+    private dateToDefault;
     firstUpdated(changed: PropertyValues): void;
     get dirty(): boolean;
     resetForm(): void;
@@ -72,9 +74,6 @@ export declare class SchmancyDateRange extends SchmancyDateRange_base {
     private updateSelectedDateRange;
     private setDateRange;
     private toggleDropdown;
-    private _overlaySubscription;
-    private openDropdown;
-    private closeDropdown;
     /**
      * Shifts the date range based on the step property
      */
@@ -96,10 +95,6 @@ export declare class SchmancyDateRange extends SchmancyDateRange_base {
      * Check if we can navigate forward
      */
     private canNavigateForward;
-    /**
-     * Announce messages to screen readers
-     */
-    private announceToScreenReader;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

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

@@ -1,5 +1,6 @@
 export * from './autocomplete';
 export * from './checkbox';
+export * from './chips';
 export * from './date-range';
 export * from './input';
 export * from './radio-group';

package/types/src/index.d.ts

@@ -7,7 +7,7 @@ export * from './busy';
 export * from './button';
 export * from './card';
 export * from './form/fields/checkbox';
-export * from './chips';
+export * from './form/fields/chips';
 export * from './connectivity';
 export * from './content-drawer';
 export * from './form/fields/date-range';
@@ -19,6 +19,7 @@ export * from './discovery';
 export * from './divider';
 export * from './dropdown';
 export * from './expand';
+export * from './fab';
 export * from './float';
 export * from './window';
 export * from './form';

package/types/src/overlay/overlay.component.d.ts

@@ -28,6 +28,7 @@ export declare class SchmancyOverlay extends SchmancyElement {
     modal: boolean;
     tier: OverlayTier;
     private _active;
+    private _full;
     private _backdrop?;
     private _surface;
     private _shell?;

package/types/src/overlay/overlay.types.d.ts

@@ -1,7 +1,6 @@
 import type { TemplateResult } from 'lit';
 import type { Observable } from 'rxjs';
-import type { ComponentType } from '../area/router.types';
-import type { THistoryStrategy } from '../area/router.types';
+import type { ComponentType, THistoryStrategy } from '../area/router.types';
 /**
  * Sync factory that returns a TemplateResult. Called at mount time so closed-over
  * variables are evaluated lazily — no snapshot staleness.
@@ -76,6 +75,17 @@ export interface ShowOptions {
      *  better than the resolver can — e.g. `as: 'sheet'` for an immersive
      *  takeover view that doesn't have an anchor. */
     as?: OverlayLayout;
+    /** When `true` and layout resolves to `'sheet'`, the surface takes the
+     *  full available height (`h-[90dvh]`) instead of sizing to content.
+     *  The mount point becomes `flex-1 min-h-0 overflow-hidden` so the
+     *  mounted component can fill it via `height: 100%`. Default `false`. */
+    full?: boolean;
+    /** When `true` and layout is `'sheet'`, the surface takes the full
+     *  available height (`h-[90dvh]`) rather than sizing to content. The
+     *  mount point becomes `flex-1` so the mounted component can fill it
+     *  via `height: 100%`. Use for immersive full-height panels (e.g. a
+     *  document review). Default `false`. */
+    fillHeight?: boolean;
     /** Default `'push'`. Same vocabulary as `area.push()`.
      *  - `'push'` — new history entry; back dismisses, forward re-opens.
      *  - `'replace'` — replace current entry; back skips the overlay.

package/types/src/theme/theme.component.d.ts

@@ -1,5 +1,6 @@
 import { SchmancyElement } from '../../mixins/index';
 import { TSchmancyTheme } from './theme.interface';
+import '../surface/surface';
 export declare const tailwindStyles: import("lit").CSSResult;
 /**
  * SchmancyThemeComponent - Provides theming capabilities for Schmancy components.