use-scroll-animate 6.6.0 → 6.8.0

package/dist/components/widgets.d.cts

@@ -356,6 +356,139 @@ interface UsaTipElement extends UsaElement {
 declare const TIP_PLACEMENTS: readonly ["top", "bottom", "left", "right"];
 declare function defineTip(tag?: string): CustomElementConstructor | undefined;
 
+/**
+ * `<usa-stepper>` (6.7) — a step indicator / wizard. Each child is a step
+ * (its text is the label). `value` is the current step (0-based); finished
+ * steps pop a check mark, the connecting rail fills toward the current step
+ * and the current step pulses once. `orientation="vertical"` stacks the
+ * steps. `next()` / `prev()` / `value`; event `usa:change` (`{ value }`).
+ * The list is an ordered list with `aria-current="step"`. Reduced motion: no
+ * pop or pulse, the rail jumps.
+ */
+interface UsaStepperElement extends UsaElement {
+    value: number;
+    readonly steps: HTMLElement[];
+    next(): void;
+    prev(): void;
+}
+declare function defineStepper(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-pagination>` (6.7) — page buttons with a sliding "ink" that springs
+ * to the current page (squashing as it travels) and numbers that slide in
+ * from the direction of travel when the window of pages shifts. Attributes
+ * `total`, `page` (1-based), `siblings` (pages each side, 1). Prev / next
+ * buttons, ellipses, `aria-current="page"`; event `usa:change` (`{ page }`).
+ * Reduced motion: the ink jumps and numbers do not slide.
+ */
+interface UsaPaginationElement extends UsaElement {
+    page: number;
+    readonly total: number;
+}
+/** The visible page list: numbers and `'…'` gaps (1-based). */
+declare function pageWindow(page: number, total: number, siblings?: number): (number | '…')[];
+declare function definePagination(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-segmented>` (6.7) — a segmented control (iOS style): a thumb slides
+ * under the chosen segment with a spring and stretches while it travels;
+ * the chosen label scales up slightly. Children are the segments (buttons
+ * or any element). It is a radio group (`role="radiogroup"`, arrow keys,
+ * Home / End, roving tabindex). `value` is the selected index; `usa:change`
+ * (`{ value, label }`). `variant="ios | pill | outline"`. Reduced motion:
+ * the thumb jumps.
+ */
+interface UsaSegmentedElement extends UsaElement {
+    value: number;
+    readonly segments: HTMLElement[];
+}
+declare const SEGMENTED_VARIANTS: readonly ["ios", "pill", "outline"];
+declare function defineSegmented(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-switch>` (6.7) — toggle switch variants: `ios` (the thumb stretches
+ * while pressed and slides), `daynight` (sun → moon with stars and
+ * clouds), `bounce` (the thumb squashes and bounces at the end) and
+ * `liquid` (a gooey fill pours behind the thumb). A real switch:
+ * `role="switch"`, `aria-checked`, Space / Enter, `disabled`; `checked`
+ * property / attribute; inside a `<form>` with `name` it submits `value`
+ * ("on") when checked. Event `usa:change` (`{ checked }`). Reduced motion:
+ * no squash, bounce or pour — it just switches.
+ */
+interface UsaSwitchElement extends UsaElement {
+    checked: boolean;
+    toggle(force?: boolean): void;
+}
+declare const SWITCH_VARIANTS: readonly ["ios", "daynight", "bounce", "liquid"];
+declare function defineSwitch(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-kanban>` (6.8) — a kanban board with drag-sort. Children are the
+ * columns (any element; a `[data-title]` attribute or its first heading is
+ * the title); the column's `[data-card]` children (or `<li>`s) are cards.
+ * Drag a card (pointer or touch): it lifts and tilts toward the drag
+ * direction, a placeholder opens where it will land, and the other cards
+ * glide out of the way (FLIP). Keyboard: Space / Enter picks a card up,
+ * arrows move it (← → between columns, ↑ ↓ within), Space drops, Esc cancels;
+ * moves are announced politely. Event `usa:move` (`{ card, from, to, index }`).
+ * Reduced motion: no tilt or glide.
+ */
+interface UsaKanbanElement extends UsaElement {
+    readonly columns: HTMLElement[];
+    cardsOf(col: HTMLElement): HTMLElement[];
+    move(card: HTMLElement, to: HTMLElement, index: number): void;
+}
+declare function defineKanban(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-swipe-deck>` (6.8) — a stack of swipe cards (Tinder style). Drag the
+ * top card: it follows the pointer and rotates, "LIKE" / "NOPE" stamps fade
+ * in, and past `threshold` px (or a fast fling) it flies off; otherwise it
+ * springs back. The next card scales up from behind. Buttons / keys:
+ * `like()`, `nope()`, ← / →, and `undo()` brings the last card back.
+ * Event `usa:swipe` (`{ card, dir: 'left' | 'right', index }`) and
+ * `usa:empty`. Reduced motion: cards fade instead of flying.
+ */
+interface UsaSwipeDeckElement extends UsaElement {
+    readonly cards: HTMLElement[];
+    readonly top: HTMLElement | null;
+    like(): void;
+    nope(): void;
+    undo(): void;
+}
+declare function defineSwipeDeck(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-weather-card>` (6.8) — an animated weather widget. `condition`
+ * (`clear | cloudy | rain | snow | storm | fog | night`) picks an animated
+ * icon and sky (sun rays turn, clouds drift, rain and snow fall, a gentle —
+ * flash-safe — bolt, fog bands, twinkling stars); `temp` counts up to the
+ * value, `unit` (°), `place` and `label` fill the text. Changing `condition`
+ * cross-fades the scene. Reduced motion: static icon, no count-up. The scene
+ * is decorative; the text is the accessible summary (`role="group"` with an
+ * `aria-label` like "Rain, 12°, Lisbon").
+ */
+interface UsaWeatherCardElement extends UsaElement {
+    condition: string;
+}
+declare const WEATHER_CONDITIONS: readonly ["clear", "cloudy", "rain", "snow", "storm", "fog", "night"];
+declare function defineWeatherCard(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-pull-cord>` (6.8) — a lamp pull-cord switch. Drag the handle down
+ * (or click / Space / Enter): the cord stretches, and when released past
+ * `threshold` px it toggles `on` with a click-bounce; the cord swings back on
+ * a damped spring (simulated, drawn as an SVG curve). The lamp shade above
+ * glows when on (CSS custom property `--usa-pc-glow`). A real switch:
+ * `role="switch"`, `aria-checked`; event `usa:change` (`{ on }`). Reduced
+ * motion: no swing — it just toggles.
+ */
+interface UsaPullCordElement extends UsaElement {
+    on: boolean;
+    toggle(force?: boolean): void;
+}
+declare function definePullCord(tag?: string): CustomElementConstructor | undefined;
+
 /**
  * motionary/components/widgets — the 6.x animated UI widgets, in their own
  * entry so `motionary/components` and `components/lite` keep their size
@@ -397,8 +530,16 @@ declare global {
         'usa-nav-morph': UsaNavMorphElement;
         'usa-menu-toggle': UsaMenuToggleElement;
         'usa-tip': UsaTipElement;
+        'usa-stepper': UsaStepperElement;
+        'usa-pagination': UsaPaginationElement;
+        'usa-segmented': UsaSegmentedElement;
+        'usa-switch': UsaSwitchElement;
+        'usa-kanban': UsaKanbanElement;
+        'usa-swipe-deck': UsaSwipeDeckElement;
+        'usa-weather-card': UsaWeatherCardElement;
+        'usa-pull-cord': UsaPullCordElement;
     }
 }
 
-export { CAROUSEL_EFFECTS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PROGRESS_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WIDGETS, WIDGET_TAGS, defineCarousel, defineCompare, defineCubeGallery, defineDisclosure, defineDock, defineMasonryFlow, defineMenu, defineMenuToggle, defineMilestones, defineModal, defineNavMorph, defineOdometer, defineProgressRing, defineSheet, defineSkeletonReveal, defineStarRating, defineStories, defineTabBar, defineTip, defineToastStack, defineWidgets, stackToast };
-export type { StackToastOptions, UsaCarouselElement, UsaCompareElement, UsaCubeGalleryElement, UsaDisclosureElement, UsaDockElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMilestonesElement, UsaModalElement, UsaNavMorphElement, UsaOdometerElement, UsaProgressRingElement, UsaSheetElement, UsaSkeletonRevealElement, UsaStarRatingElement, UsaStoriesElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement };
+export { CAROUSEL_EFFECTS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PROGRESS_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, defineCarousel, defineCompare, defineCubeGallery, defineDisclosure, defineDock, defineKanban, defineMasonryFlow, defineMenu, defineMenuToggle, defineMilestones, defineModal, defineNavMorph, defineOdometer, definePagination, defineProgressRing, definePullCord, defineSegmented, defineSheet, defineSkeletonReveal, defineStarRating, defineStepper, defineStories, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineWeatherCard, defineWidgets, pageWindow, stackToast };
+export type { StackToastOptions, UsaCarouselElement, UsaCompareElement, UsaCubeGalleryElement, UsaDisclosureElement, UsaDockElement, UsaKanbanElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMilestonesElement, UsaModalElement, UsaNavMorphElement, UsaOdometerElement, UsaPaginationElement, UsaProgressRingElement, UsaPullCordElement, UsaSegmentedElement, UsaSheetElement, UsaSkeletonRevealElement, UsaStarRatingElement, UsaStepperElement, UsaStoriesElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement, UsaWeatherCardElement };

package/dist/components/widgets.d.ts

@@ -356,6 +356,139 @@ interface UsaTipElement extends UsaElement {
 declare const TIP_PLACEMENTS: readonly ["top", "bottom", "left", "right"];
 declare function defineTip(tag?: string): CustomElementConstructor | undefined;
 
+/**
+ * `<usa-stepper>` (6.7) — a step indicator / wizard. Each child is a step
+ * (its text is the label). `value` is the current step (0-based); finished
+ * steps pop a check mark, the connecting rail fills toward the current step
+ * and the current step pulses once. `orientation="vertical"` stacks the
+ * steps. `next()` / `prev()` / `value`; event `usa:change` (`{ value }`).
+ * The list is an ordered list with `aria-current="step"`. Reduced motion: no
+ * pop or pulse, the rail jumps.
+ */
+interface UsaStepperElement extends UsaElement {
+    value: number;
+    readonly steps: HTMLElement[];
+    next(): void;
+    prev(): void;
+}
+declare function defineStepper(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-pagination>` (6.7) — page buttons with a sliding "ink" that springs
+ * to the current page (squashing as it travels) and numbers that slide in
+ * from the direction of travel when the window of pages shifts. Attributes
+ * `total`, `page` (1-based), `siblings` (pages each side, 1). Prev / next
+ * buttons, ellipses, `aria-current="page"`; event `usa:change` (`{ page }`).
+ * Reduced motion: the ink jumps and numbers do not slide.
+ */
+interface UsaPaginationElement extends UsaElement {
+    page: number;
+    readonly total: number;
+}
+/** The visible page list: numbers and `'…'` gaps (1-based). */
+declare function pageWindow(page: number, total: number, siblings?: number): (number | '…')[];
+declare function definePagination(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-segmented>` (6.7) — a segmented control (iOS style): a thumb slides
+ * under the chosen segment with a spring and stretches while it travels;
+ * the chosen label scales up slightly. Children are the segments (buttons
+ * or any element). It is a radio group (`role="radiogroup"`, arrow keys,
+ * Home / End, roving tabindex). `value` is the selected index; `usa:change`
+ * (`{ value, label }`). `variant="ios | pill | outline"`. Reduced motion:
+ * the thumb jumps.
+ */
+interface UsaSegmentedElement extends UsaElement {
+    value: number;
+    readonly segments: HTMLElement[];
+}
+declare const SEGMENTED_VARIANTS: readonly ["ios", "pill", "outline"];
+declare function defineSegmented(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-switch>` (6.7) — toggle switch variants: `ios` (the thumb stretches
+ * while pressed and slides), `daynight` (sun → moon with stars and
+ * clouds), `bounce` (the thumb squashes and bounces at the end) and
+ * `liquid` (a gooey fill pours behind the thumb). A real switch:
+ * `role="switch"`, `aria-checked`, Space / Enter, `disabled`; `checked`
+ * property / attribute; inside a `<form>` with `name` it submits `value`
+ * ("on") when checked. Event `usa:change` (`{ checked }`). Reduced motion:
+ * no squash, bounce or pour — it just switches.
+ */
+interface UsaSwitchElement extends UsaElement {
+    checked: boolean;
+    toggle(force?: boolean): void;
+}
+declare const SWITCH_VARIANTS: readonly ["ios", "daynight", "bounce", "liquid"];
+declare function defineSwitch(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-kanban>` (6.8) — a kanban board with drag-sort. Children are the
+ * columns (any element; a `[data-title]` attribute or its first heading is
+ * the title); the column's `[data-card]` children (or `<li>`s) are cards.
+ * Drag a card (pointer or touch): it lifts and tilts toward the drag
+ * direction, a placeholder opens where it will land, and the other cards
+ * glide out of the way (FLIP). Keyboard: Space / Enter picks a card up,
+ * arrows move it (← → between columns, ↑ ↓ within), Space drops, Esc cancels;
+ * moves are announced politely. Event `usa:move` (`{ card, from, to, index }`).
+ * Reduced motion: no tilt or glide.
+ */
+interface UsaKanbanElement extends UsaElement {
+    readonly columns: HTMLElement[];
+    cardsOf(col: HTMLElement): HTMLElement[];
+    move(card: HTMLElement, to: HTMLElement, index: number): void;
+}
+declare function defineKanban(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-swipe-deck>` (6.8) — a stack of swipe cards (Tinder style). Drag the
+ * top card: it follows the pointer and rotates, "LIKE" / "NOPE" stamps fade
+ * in, and past `threshold` px (or a fast fling) it flies off; otherwise it
+ * springs back. The next card scales up from behind. Buttons / keys:
+ * `like()`, `nope()`, ← / →, and `undo()` brings the last card back.
+ * Event `usa:swipe` (`{ card, dir: 'left' | 'right', index }`) and
+ * `usa:empty`. Reduced motion: cards fade instead of flying.
+ */
+interface UsaSwipeDeckElement extends UsaElement {
+    readonly cards: HTMLElement[];
+    readonly top: HTMLElement | null;
+    like(): void;
+    nope(): void;
+    undo(): void;
+}
+declare function defineSwipeDeck(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-weather-card>` (6.8) — an animated weather widget. `condition`
+ * (`clear | cloudy | rain | snow | storm | fog | night`) picks an animated
+ * icon and sky (sun rays turn, clouds drift, rain and snow fall, a gentle —
+ * flash-safe — bolt, fog bands, twinkling stars); `temp` counts up to the
+ * value, `unit` (°), `place` and `label` fill the text. Changing `condition`
+ * cross-fades the scene. Reduced motion: static icon, no count-up. The scene
+ * is decorative; the text is the accessible summary (`role="group"` with an
+ * `aria-label` like "Rain, 12°, Lisbon").
+ */
+interface UsaWeatherCardElement extends UsaElement {
+    condition: string;
+}
+declare const WEATHER_CONDITIONS: readonly ["clear", "cloudy", "rain", "snow", "storm", "fog", "night"];
+declare function defineWeatherCard(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-pull-cord>` (6.8) — a lamp pull-cord switch. Drag the handle down
+ * (or click / Space / Enter): the cord stretches, and when released past
+ * `threshold` px it toggles `on` with a click-bounce; the cord swings back on
+ * a damped spring (simulated, drawn as an SVG curve). The lamp shade above
+ * glows when on (CSS custom property `--usa-pc-glow`). A real switch:
+ * `role="switch"`, `aria-checked`; event `usa:change` (`{ on }`). Reduced
+ * motion: no swing — it just toggles.
+ */
+interface UsaPullCordElement extends UsaElement {
+    on: boolean;
+    toggle(force?: boolean): void;
+}
+declare function definePullCord(tag?: string): CustomElementConstructor | undefined;
+
 /**
  * motionary/components/widgets — the 6.x animated UI widgets, in their own
  * entry so `motionary/components` and `components/lite` keep their size
@@ -397,8 +530,16 @@ declare global {
         'usa-nav-morph': UsaNavMorphElement;
         'usa-menu-toggle': UsaMenuToggleElement;
         'usa-tip': UsaTipElement;
+        'usa-stepper': UsaStepperElement;
+        'usa-pagination': UsaPaginationElement;
+        'usa-segmented': UsaSegmentedElement;
+        'usa-switch': UsaSwitchElement;
+        'usa-kanban': UsaKanbanElement;
+        'usa-swipe-deck': UsaSwipeDeckElement;
+        'usa-weather-card': UsaWeatherCardElement;
+        'usa-pull-cord': UsaPullCordElement;
     }
 }
 
-export { CAROUSEL_EFFECTS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PROGRESS_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WIDGETS, WIDGET_TAGS, defineCarousel, defineCompare, defineCubeGallery, defineDisclosure, defineDock, defineMasonryFlow, defineMenu, defineMenuToggle, defineMilestones, defineModal, defineNavMorph, defineOdometer, defineProgressRing, defineSheet, defineSkeletonReveal, defineStarRating, defineStories, defineTabBar, defineTip, defineToastStack, defineWidgets, stackToast };
-export type { StackToastOptions, UsaCarouselElement, UsaCompareElement, UsaCubeGalleryElement, UsaDisclosureElement, UsaDockElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMilestonesElement, UsaModalElement, UsaNavMorphElement, UsaOdometerElement, UsaProgressRingElement, UsaSheetElement, UsaSkeletonRevealElement, UsaStarRatingElement, UsaStoriesElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement };
+export { CAROUSEL_EFFECTS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PROGRESS_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, defineCarousel, defineCompare, defineCubeGallery, defineDisclosure, defineDock, defineKanban, defineMasonryFlow, defineMenu, defineMenuToggle, defineMilestones, defineModal, defineNavMorph, defineOdometer, definePagination, defineProgressRing, definePullCord, defineSegmented, defineSheet, defineSkeletonReveal, defineStarRating, defineStepper, defineStories, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineWeatherCard, defineWidgets, pageWindow, stackToast };
+export type { StackToastOptions, UsaCarouselElement, UsaCompareElement, UsaCubeGalleryElement, UsaDisclosureElement, UsaDockElement, UsaKanbanElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMilestonesElement, UsaModalElement, UsaNavMorphElement, UsaOdometerElement, UsaPaginationElement, UsaProgressRingElement, UsaPullCordElement, UsaSegmentedElement, UsaSheetElement, UsaSkeletonRevealElement, UsaStarRatingElement, UsaStepperElement, UsaStoriesElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement, UsaWeatherCardElement };