@mhmo91/schmancy 0.10.34 → 0.10.36

package/src/overlay/overlay.types.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
@@ -103,6 +102,19 @@ export interface ShowOptions {
 	 *  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/src/theme/theme.component.ts

@@ -9,6 +9,7 @@ import { formatTheme } from './theme.format'
 import { TSchmancyTheme } from './theme.interface'
 import { ThemeHereIAm, ThemeWhereAreYou, ThemeWhereAreYouEvent } from './theme.events'
 import style from './theme.style.css?inline'
+import '../surface/surface'
 export const tailwindStyles = unsafeCSS(style)
 const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
 const $colorScheme = new Observable<string>(subscriber => {

package/src/theme/theme.style.css

@@ -407,6 +407,9 @@
 	--tracking-wide: 0.025em;
 	--tracking-wider: 0.05em;
 	--tracking-widest: 0.1em;
+	--tracking-eyebrow: 0.18em;
+	--tracking-label: 0.14em;
+	--leading-display: 0.95;
 	--leading-tight: 1.25;
 	--leading-snug: 1.375;
 	--leading-normal: 1.5;

package/types/src/boat/boat.d.ts

@@ -2,45 +2,60 @@ import { SchmancyElement } from '@mixins/index';
 import { type PropertyValues } from 'lit';
 type Corner = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 /**
- * Material-3 extended FAB that delegates its expanded panel to the `show()`
- * overlay service. Collapsed: a draggable, corner-anchored pill (icon + label,
- * circular when no label). Activated: the default-slot content blooms from the
- * FAB as an overlay (backdrop / Esc / back-button / sheet-on-narrow handled by
- * the overlay primitive).
+ * Corner-anchored launcher that delegates its expanded panel to the `show()`
+ * overlay service.
+ *
+ * Three slots, three non-overlapping intents — no element-type sniffing,
+ * ever:
+ *
+ *   - `trigger`  — pure consumer content. A native click anywhere on it
+ *     opens the panel; interactive children (buttons, FABs, inputs) work
+ *     with zero special-casing because the boat never calls
+ *     `preventDefault` / `stopPropagation` / `setPointerCapture` here.
+ *   - `drag-handle` — opt-in. Pointer-drag is wired ONLY to this slot's
+ *     boat-owned wrapper. Slot it to make the boat draggable; omit it and
+ *     the boat is static at its corner. (A no-move tap on the handle also
+ *     opens, so the grip doubles as a launcher.)
+ *   - _(default)_ — the panel body; parked hidden while collapsed,
+ *     relocated into the `show()` overlay on open.
+ *
+ * The boat owns drag, corner-snapping, position persistence and the glass
+ * surface — never the collapsed shape.
  */
 export default class SchmancyBoat extends SchmancyElement {
     #private;
-    static styles: import("lit").CSSResult[];
+    /** Identity for localStorage drag-position persistence. */
     id: string;
-    icon?: string;
-    label?: string;
-    /** When true, uses a lower elevation shadow on the FAB. */
-    lowered: boolean;
-    /** Corner the FAB is anchored to. */
+    /** Corner the launcher is anchored to. */
     corner: Corner;
     /** Open state. Bind `?open=${…}` to drive the overlay; reflected to the attribute. */
     open: boolean;
     private isDragging;
-    private _currentCorner;
-    private _slotted;
-    private _position;
-    private _containerRef;
-    private _headerRef;
-    private _currentAnimation?;
-    private _applyContainerPosition;
-    private _loadPosition;
-    private _savePosition;
-    private _validateBounds;
-    private _reorientToNearestCorner;
-    private _setupDrag;
-    private _openOverlay;
-    private _restoreSlotted;
+    private currentCorner;
+    private hasHandle;
+    /** Default-slot nodes — the overlay body. */
+    private slotted;
+    /** Slotted drag-handle nodes — presence toggles draggability. */
+    private handleNodes;
+    private position;
+    private containerRef;
+    private triggerRef;
+    private handleRef;
+    private currentAnimation?;
+    private applyContainerPosition;
+    private loadPosition;
+    private savePosition;
+    private validateBounds;
+    private reorientToNearestCorner;
+    private openOverlay;
+    private restoreSlotted;
     connectedCallback(): void;
     firstUpdated(): void;
     protected willUpdate(changed: PropertyValues<this>): void;
     disconnectedCallback(): void;
     /** Flip open ↔ closed. */
     toggle(): void;
+    private onHandleSlotChange;
     protected render(): unknown;
 }
 declare global {

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

@@ -0,0 +1,2 @@
+import './boat';
+import '../surface/surface';

package/types/src/button/icon-button.d.ts

@@ -68,9 +68,10 @@ export declare class SchmnacyIconButton extends SchmancyElement {
      */
     icon?: string;
     private _capturedIcon?;
+    private _observer?;
     connectedCallback(): void;
-    private _captureIconFromChildren;
-    private _handleSlotChange;
+    disconnectedCallback(): void;
+    private _captureIcon;
     set ariaLabel(value: string);
     get ariaLabel(): string;
     /** Sets focus in the button. */

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

@@ -1,47 +1 @@
-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;
-};
+export * from '../form/fields/chips/assist-chip';

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/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 {};