use-scroll-animate 6.5.0 → 6.7.0

package/dist/components/widgets.d.cts

@@ -292,6 +292,136 @@ interface UsaCubeGalleryElement extends UsaElement {
 }
 declare function defineCubeGallery(tag?: string): CustomElementConstructor | undefined;
 
+/**
+ * `<usa-dock>` (6.6) — a macOS-style dock: items magnify with a smooth
+ * cosine falloff as the pointer moves along it, neighbours make room, and a
+ * click bounces the item (`bounce`). Children are the items (`<a>` /
+ * `<button>`, each with an accessible name); `data-label` shows a tooltip
+ * label above the hovered item. Attributes: `magnify` (max scale, 1.9),
+ * `range` (px of influence, 140), `orientation="horizontal | vertical"`.
+ * Keyboard focus magnifies the focused item. Reduced motion: no
+ * magnification or bounce (labels still show).
+ */
+interface UsaDockElement extends UsaElement {
+    readonly items: HTMLElement[];
+}
+declare function defineDock(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-nav-morph>` (6.6) — navigation links with an indicator that morphs
+ * between them: it follows the hovered / focused link (stretching from the
+ * old one, leading edge first) and settles back on the current page
+ * (`aria-current="page"`, `active` index, or a click). `indicator="underline |
+ * pill | blob | dot"`. Arrow keys move focus across links. Event
+ * `usa:change` (`{ index }`). Reduced motion: the indicator jumps.
+ */
+interface UsaNavMorphElement extends UsaElement {
+    active: number;
+}
+declare const NAV_INDICATORS: readonly ["underline", "pill", "blob", "dot"];
+declare function defineNavMorph(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-menu-toggle>` (6.6) — the hamburger button that morphs into its
+ * "open" icon: `variant="cross"` (✕, default), `arrow` (←), `minus` (—) or
+ * `plus-x` (+ turning into ✕). It is a real `<button>`-like control
+ * (`role="button"`, Space / Enter, `aria-expanded`); `for="<id>"` sets
+ * `aria-controls` and toggles the `hidden` attribute (or `.open()` /
+ * `.close()` / `.show()`) of that element. `pressed` reflects the state.
+ * Event `usa:toggle` (`{ open }`). Reduced motion: the icon switches without
+ * the morph.
+ */
+interface UsaMenuToggleElement extends UsaElement {
+    open: boolean;
+    toggle(force?: boolean): void;
+}
+declare const TOGGLE_VARIANTS: readonly ["cross", "arrow", "minus", "plus-x"];
+declare function defineMenuToggle(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-tip>` (6.6) — tooltip / popover 2.0. Wrap the trigger; the tip
+ * content is the `text` attribute or a child with `[slot="tip"]` / `[data-tip]`
+ * (rich content). It springs out of the trigger with its arrow,
+ * auto-flips to stay inside the viewport and shifts along the edge.
+ * `placement="top | bottom | left | right"`, `trigger="hover | click"`
+ * (`click` = popover: toggles, Esc / outside click close), `delay` (ms).
+ * Hover tips also open on keyboard focus and close on Esc (WCAG 1.4.13).
+ * Events `usa:open`, `usa:close`. Reduced motion: a short fade.
+ */
+interface UsaTipElement extends UsaElement {
+    readonly opened: boolean;
+    show(): void;
+    hide(): void;
+}
+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;
+
 /**
  * motionary/components/widgets — the 6.x animated UI widgets, in their own
  * entry so `motionary/components` and `components/lite` keep their size
@@ -329,8 +459,16 @@ declare global {
         'usa-masonry-flow': UsaMasonryFlowElement;
         'usa-compare': UsaCompareElement;
         'usa-cube-gallery': UsaCubeGalleryElement;
+        'usa-dock': UsaDockElement;
+        'usa-nav-morph': UsaNavMorphElement;
+        'usa-menu-toggle': UsaMenuToggleElement;
+        'usa-tip': UsaTipElement;
+        'usa-stepper': UsaStepperElement;
+        'usa-pagination': UsaPaginationElement;
+        'usa-segmented': UsaSegmentedElement;
+        'usa-switch': UsaSwitchElement;
     }
 }
 
-export { CAROUSEL_EFFECTS, MENU_EFFECTS, MODAL_EFFECTS, PROGRESS_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, TAB_INDICATORS, TOAST_POSITIONS, WIDGETS, WIDGET_TAGS, defineCarousel, defineCompare, defineCubeGallery, defineDisclosure, defineMasonryFlow, defineMenu, defineMilestones, defineModal, defineOdometer, defineProgressRing, defineSheet, defineSkeletonReveal, defineStarRating, defineStories, defineTabBar, defineToastStack, defineWidgets, stackToast };
-export type { StackToastOptions, UsaCarouselElement, UsaCompareElement, UsaCubeGalleryElement, UsaDisclosureElement, UsaMasonryFlowElement, UsaMenuElement, UsaMilestonesElement, UsaModalElement, UsaOdometerElement, UsaProgressRingElement, UsaSheetElement, UsaSkeletonRevealElement, UsaStarRatingElement, UsaStoriesElement, UsaTabBarElement, 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, WIDGETS, WIDGET_TAGS, defineCarousel, defineCompare, defineCubeGallery, defineDisclosure, defineDock, defineMasonryFlow, defineMenu, defineMenuToggle, defineMilestones, defineModal, defineNavMorph, defineOdometer, definePagination, defineProgressRing, defineSegmented, defineSheet, defineSkeletonReveal, defineStarRating, defineStepper, defineStories, defineSwitch, defineTabBar, defineTip, defineToastStack, defineWidgets, pageWindow, stackToast };
+export type { StackToastOptions, UsaCarouselElement, UsaCompareElement, UsaCubeGalleryElement, UsaDisclosureElement, UsaDockElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMilestonesElement, UsaModalElement, UsaNavMorphElement, UsaOdometerElement, UsaPaginationElement, UsaProgressRingElement, UsaSegmentedElement, UsaSheetElement, UsaSkeletonRevealElement, UsaStarRatingElement, UsaStepperElement, UsaStoriesElement, UsaSwitchElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement };

package/dist/components/widgets.d.ts

@@ -292,6 +292,136 @@ interface UsaCubeGalleryElement extends UsaElement {
 }
 declare function defineCubeGallery(tag?: string): CustomElementConstructor | undefined;
 
+/**
+ * `<usa-dock>` (6.6) — a macOS-style dock: items magnify with a smooth
+ * cosine falloff as the pointer moves along it, neighbours make room, and a
+ * click bounces the item (`bounce`). Children are the items (`<a>` /
+ * `<button>`, each with an accessible name); `data-label` shows a tooltip
+ * label above the hovered item. Attributes: `magnify` (max scale, 1.9),
+ * `range` (px of influence, 140), `orientation="horizontal | vertical"`.
+ * Keyboard focus magnifies the focused item. Reduced motion: no
+ * magnification or bounce (labels still show).
+ */
+interface UsaDockElement extends UsaElement {
+    readonly items: HTMLElement[];
+}
+declare function defineDock(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-nav-morph>` (6.6) — navigation links with an indicator that morphs
+ * between them: it follows the hovered / focused link (stretching from the
+ * old one, leading edge first) and settles back on the current page
+ * (`aria-current="page"`, `active` index, or a click). `indicator="underline |
+ * pill | blob | dot"`. Arrow keys move focus across links. Event
+ * `usa:change` (`{ index }`). Reduced motion: the indicator jumps.
+ */
+interface UsaNavMorphElement extends UsaElement {
+    active: number;
+}
+declare const NAV_INDICATORS: readonly ["underline", "pill", "blob", "dot"];
+declare function defineNavMorph(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-menu-toggle>` (6.6) — the hamburger button that morphs into its
+ * "open" icon: `variant="cross"` (✕, default), `arrow` (←), `minus` (—) or
+ * `plus-x` (+ turning into ✕). It is a real `<button>`-like control
+ * (`role="button"`, Space / Enter, `aria-expanded`); `for="<id>"` sets
+ * `aria-controls` and toggles the `hidden` attribute (or `.open()` /
+ * `.close()` / `.show()`) of that element. `pressed` reflects the state.
+ * Event `usa:toggle` (`{ open }`). Reduced motion: the icon switches without
+ * the morph.
+ */
+interface UsaMenuToggleElement extends UsaElement {
+    open: boolean;
+    toggle(force?: boolean): void;
+}
+declare const TOGGLE_VARIANTS: readonly ["cross", "arrow", "minus", "plus-x"];
+declare function defineMenuToggle(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-tip>` (6.6) — tooltip / popover 2.0. Wrap the trigger; the tip
+ * content is the `text` attribute or a child with `[slot="tip"]` / `[data-tip]`
+ * (rich content). It springs out of the trigger with its arrow,
+ * auto-flips to stay inside the viewport and shifts along the edge.
+ * `placement="top | bottom | left | right"`, `trigger="hover | click"`
+ * (`click` = popover: toggles, Esc / outside click close), `delay` (ms).
+ * Hover tips also open on keyboard focus and close on Esc (WCAG 1.4.13).
+ * Events `usa:open`, `usa:close`. Reduced motion: a short fade.
+ */
+interface UsaTipElement extends UsaElement {
+    readonly opened: boolean;
+    show(): void;
+    hide(): void;
+}
+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;
+
 /**
  * motionary/components/widgets — the 6.x animated UI widgets, in their own
  * entry so `motionary/components` and `components/lite` keep their size
@@ -329,8 +459,16 @@ declare global {
         'usa-masonry-flow': UsaMasonryFlowElement;
         'usa-compare': UsaCompareElement;
         'usa-cube-gallery': UsaCubeGalleryElement;
+        'usa-dock': UsaDockElement;
+        'usa-nav-morph': UsaNavMorphElement;
+        'usa-menu-toggle': UsaMenuToggleElement;
+        'usa-tip': UsaTipElement;
+        'usa-stepper': UsaStepperElement;
+        'usa-pagination': UsaPaginationElement;
+        'usa-segmented': UsaSegmentedElement;
+        'usa-switch': UsaSwitchElement;
     }
 }
 
-export { CAROUSEL_EFFECTS, MENU_EFFECTS, MODAL_EFFECTS, PROGRESS_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, TAB_INDICATORS, TOAST_POSITIONS, WIDGETS, WIDGET_TAGS, defineCarousel, defineCompare, defineCubeGallery, defineDisclosure, defineMasonryFlow, defineMenu, defineMilestones, defineModal, defineOdometer, defineProgressRing, defineSheet, defineSkeletonReveal, defineStarRating, defineStories, defineTabBar, defineToastStack, defineWidgets, stackToast };
-export type { StackToastOptions, UsaCarouselElement, UsaCompareElement, UsaCubeGalleryElement, UsaDisclosureElement, UsaMasonryFlowElement, UsaMenuElement, UsaMilestonesElement, UsaModalElement, UsaOdometerElement, UsaProgressRingElement, UsaSheetElement, UsaSkeletonRevealElement, UsaStarRatingElement, UsaStoriesElement, UsaTabBarElement, 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, WIDGETS, WIDGET_TAGS, defineCarousel, defineCompare, defineCubeGallery, defineDisclosure, defineDock, defineMasonryFlow, defineMenu, defineMenuToggle, defineMilestones, defineModal, defineNavMorph, defineOdometer, definePagination, defineProgressRing, defineSegmented, defineSheet, defineSkeletonReveal, defineStarRating, defineStepper, defineStories, defineSwitch, defineTabBar, defineTip, defineToastStack, defineWidgets, pageWindow, stackToast };
+export type { StackToastOptions, UsaCarouselElement, UsaCompareElement, UsaCubeGalleryElement, UsaDisclosureElement, UsaDockElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMilestonesElement, UsaModalElement, UsaNavMorphElement, UsaOdometerElement, UsaPaginationElement, UsaProgressRingElement, UsaSegmentedElement, UsaSheetElement, UsaSkeletonRevealElement, UsaStarRatingElement, UsaStepperElement, UsaStoriesElement, UsaSwitchElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement };