@fusion.dev/helix 0.158.0 → 0.159.0

package/types/vue.d.ts

@@ -244,9 +244,9 @@ import type {
   HelixBeforeResizeEvent,
   HelixCollapseEvent,
   HelixResizedEvent,
+  HelixLoadEvent,
   HelixTourAskEvent,
   HelixTourStatusEvent,
-  HelixLoadEvent,
   HelixEndEvent,
   HelixNextEvent,
   HelixPreviousEvent,
@@ -565,6 +565,15 @@ export type HelixAppHeaderElementEvent<E = Event> = TypedEvent<
   HelixAppHeader,
   E
 >;
+/** `toggle` event type */
+export type HelixAppHeaderToggleElementEvent =
+  HelixAppHeaderElementEvent<ToggleEvent>;
+/** `helix-before-close` event type */
+export type HelixAppHeaderHelixBeforeCloseElementEvent =
+  HelixAppHeaderElementEvent<HelixBeforeCloseEvent>;
+/** `helix-before-open` event type */
+export type HelixAppHeaderHelixBeforeOpenElementEvent =
+  HelixAppHeaderElementEvent<HelixBeforeOpenEvent>;
 /** `helix-scrolled` event type */
 export type HelixAppHeaderHelixScrolledElementEvent =
   HelixAppHeaderElementEvent<HelixScrolledEvent>;
@@ -622,6 +631,23 @@ It pairs with `material`: a bar that does not stick is only ever over the
 top of the page, so `glass` and `transparent` have nothing to be
 translucent against and the `scrolled` state never lands. */
   sticky?: (HelixAppHeader["sticky"]) | undefined;
+  /** Whether the element starts open. Ignored once `open` is written. */
+  "default-open"?: (HelixAppHeader["defaultOpen"]) | undefined;
+  /** Whether the element starts open. Ignored once `open` is written. */
+  defaultOpen?: (HelixAppHeader["defaultOpen"]) | undefined;
+  /** Whether the element is open.
+
+One property, not two, so `dialog.open` answers the question anyone
+asking it meant. Writing always applies; `<helix-dialog open>` is the
+same statement in markup.
+
+**Not reflected, and that is required rather than tidy.** Reflection
+writes the resolved state back as an attribute, so an element that opened
+itself would put `open` on its own host: cloned, serialized for
+hydration, or diffed by a framework, it comes back holding whatever the
+last reader did rather than what the author wrote. `:state(open)` carries
+the resolved state for stylesheets, which is what the mirror is for. */
+  open?: (HelixAppHeader["open"]) | undefined;
   /** Where the middle region sits in the bar.
 
 Centered by default, which reads as the site's spine when the navigation is
@@ -669,9 +695,27 @@ page scrolls up. */
   /** The id of the element whose scrolling lifts the bar, for an app shell that
 scrolls a container instead of the window. Unset is the window. */
   scroller?: (HelixAppHeader["scroller"]) | undefined;
+  /** Where the toggle that opens a folded middle region sits: at the end of the
+bar, after the trailing content, or with `start`, before the leading
+content.
+
+Optional, so the resting bar writes no attribute onto the host. */
+  "toggle-placement"?: (HelixAppHeader["togglePlacement"]) | undefined;
+  /** Where the toggle that opens a folded middle region sits: at the end of the
+bar, after the trailing content, or with `start`, before the leading
+content.
+
+Optional, so the resting bar writes no attribute onto the host. */
+  togglePlacement?: (HelixAppHeader["togglePlacement"]) | undefined;
 };
 
 export type HelixAppHeaderVueEvents = {
+  /** The folded region opened or closed. The event carries `newState` and `oldState`. */
+  toggle: HelixAppHeaderToggleElementEvent;
+  /** The folded region is about to close. Cancelable: cancel it to keep it open. */
+  "helix-before-close": HelixAppHeaderHelixBeforeCloseElementEvent;
+  /** The folded region is about to open. Cancelable: cancel it to keep it closed. */
+  "helix-before-open": HelixAppHeaderHelixBeforeOpenElementEvent;
   /** Fired when the page crosses the scroll threshold, with the new state. A custom state cannot be observed the way an attribute can, so listen for this event to follow it. The event uses the header's own threshold and hysteresis, so you do not need a second scroll listener. */
   "helix-scrolled": HelixAppHeaderHelixScrolledElementEvent;
 };
@@ -1642,6 +1686,14 @@ separate actions. The semantics and the joining are separate questions:
 `role="group"` and a shared name are what make a set of buttons a set, and
 `helix-flex` gives the spacing without the group. */
   variant?: (HelixButtonGroup["variant"]) | undefined;
+  /** Keeps at least one button pressed once one is, as React Aria's
+`disallowEmptySelection`: a press that would leave none pressed is
+refused. */
+  "disallow-empty-selection"?: (HelixButtonGroup["disallowEmptySelection"]) | undefined;
+  /** Keeps at least one button pressed once one is, as React Aria's
+`disallowEmptySelection`: a press that would leave none pressed is
+refused. */
+  disallowEmptySelection?: (HelixButtonGroup["disallowEmptySelection"]) | undefined;
   /** The group's name, read by screen readers.
 
 On the host through internals, so an author's `aria-label` still overrides
@@ -17038,7 +17090,16 @@ known by its place among the rows as written. */
 
 export type HelixTableRowVueEvents = {};
 
+/** `HelixTabPanel` component event */
+export type HelixTabPanelElementEvent<E = Event> = TypedEvent<HelixTabPanel, E>;
+/** `helix-load` event type */
+export type HelixTabPanelHelixLoadElementEvent =
+  HelixTabPanelElementEvent<HelixLoadEvent>;
+
 export type HelixTabPanelVueProps = {
+  /** Whether the panel's content waits in a `<template>` until the panel is
+first shown. */
+  lazy?: (HelixTabPanel["lazy"]) | undefined;
   /** Whether this panel is the visible one. */
   selected?: (HelixTabPanel["selected"]) | undefined;
   /** Pairs the panel with the tab of the same value. */
@@ -17056,7 +17117,10 @@ the pattern names one anyway. */
   label?: (HelixTabPanel["label"]) | undefined;
 };
 
-export type HelixTabPanelVueEvents = {};
+export type HelixTabPanelVueEvents = {
+  /** Fired the first time a `lazy` panel is shown, once its template's content is in. */
+  "helix-load": HelixTabPanelHelixLoadElementEvent;
+};
 
 /** `HelixTabs` component event */
 export type HelixTabsElementEvent<E = Event> = TypedEvent<HelixTabs, E>;
@@ -18544,6 +18608,12 @@ consumer's server markup does not have. A sheet carries the resting
 arrangement in its own `:host` rule and the selectors describe only the
 departures, which is what `orientation` does. */
   placement?: (HelixToast["placement"]) | undefined;
+  /** The edge a touch or a pen swipes a message toward to dismiss it: `end`,
+the end of the line, or `start`, `top` or `bottom`. Unset is `end`. */
+  "swipe-direction"?: (HelixToast["swipeDirection"]) | undefined;
+  /** The edge a touch or a pen swipes a message toward to dismiss it: `end`,
+the end of the line, or `start`, `top` or `bottom`. Unset is `end`. */
+  swipeDirection?: (HelixToast["swipeDirection"]) | undefined;
 };
 
 export type HelixToastVueEvents = {
@@ -19097,6 +19167,14 @@ The shape is `Carousel`'s, which is the nearest thing in the library: a
   "next-label"?: (HelixTour["nextLabel"]) | undefined;
   /** Label for the control that goes on. */
   nextLabel?: (HelixTour["nextLabel"]) | undefined;
+  /** What a press outside the current stop and its target does while the tour
+runs. Unset, nothing: the page stays usable. `close` ends the tour, as
+Skip does, and `block` refuses the press. */
+  "outside-press"?: (HelixTour["outsidePress"]) | undefined;
+  /** What a press outside the current stop and its target does while the tour
+runs. Unset, nothing: the page stays usable. `close` ends the tour, as
+Skip does, and `block` refuses the press. */
+  outsidePress?: (HelixTour["outsidePress"]) | undefined;
   /** Draws each stop's place in the run in its panel, as well as saying it. */
   progress?: (HelixTour["progress"]) | undefined;
   /** Each stop's place in the run, with `{index}` and `{count}` filled in and
@@ -19185,6 +19263,9 @@ heading. */
 Reflected, because the styled tier places a dialog and a floating panel by
 it, and unset at rest, so no default is written onto the host. */
   type?: (HelixTourStop["type"]) | undefined;
+  /** Run as the tour reaches the stop, before it is shown: see the description
+above. A function, so it is set from script and has no attribute. */
+  effect?: (HelixTourStop["effect"]) | undefined;
 };
 
 export type HelixTourStopVueEvents = {
@@ -22562,6 +22643,8 @@ export type CustomCssProperties = {
   "--toast-duration"?: (string) | undefined;
   /** How far a swipe has moved the message across, in pixels, toward the right. */
   "--toast-swipe-x"?: (string) | undefined;
+  /** How far a swipe has moved the message down, in pixels, under a `swipe-direction` of `top` or `bottom`. */
+  "--toast-swipe-y"?: (string) | undefined;
   /** Space between one message and the next. */
   "--toast-gap"?: (string) | undefined;
   /** Width of a message. */