@uplynk/lynk-design 1.19.2 → 1.20.1

package/dist/types/vue/index.d.ts

@@ -1,30 +1,30 @@
 import type { DefineComponent } from "vue";
 
 import type { LynkAccordion } from "../../components/accordion/accordion.component.js";
+import type { LynkAlert } from "../../components/alert/alert.component.js";
 import type { LynkAnimation } from "../../components/animation/animation.component.js";
-import type { LynkAvatar } from "../../components/avatar/avatar.component.js";
+import type { LynkAutoGrid } from "../../components/auto-grid/auto-grid.component.js";
 import type { LynkBadge } from "../../components/badge/badge.component.js";
 import type { LynkBox } from "../../components/box/box.component.js";
-import type { LynkAlert } from "../../components/alert/alert.component.js";
+import type { LynkAvatar } from "../../components/avatar/avatar.component.js";
 import type { LynkBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
-import type { LynkAutoGrid } from "../../components/auto-grid/auto-grid.component.js";
 import type { LynkBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
-import type { LynkButtonGroup } from "../../components/button-group/button-group.component.js";
 import type { LynkButton } from "../../components/button/button.component.js";
+import type { LynkButtonGroup } from "../../components/button-group/button-group.component.js";
 import type { LynkCalendar } from "../../components/calendar/calendar.component.js";
 import type { LynkCard } from "../../components/card/card.component.js";
 import type { LynkCheckbox } from "../../components/checkbox/checkbox.component.js";
 import type { LynkClock } from "../../components/clock/clock.component.js";
 import type { LynkCol } from "../../components/col/col.component.js";
-import type { LynkColorPicker } from "../../components/color-picker/color-picker.component.js";
 import type { LynkColGroup } from "../../components/colgroup/colgroup.component.js";
+import type { LynkColorPicker } from "../../components/color-picker/color-picker.component.js";
 import type { LynkCombobox } from "../../components/combobox/combobox.component.js";
 import type { LynkCopyButton } from "../../components/copy-button/copy-button.component.js";
-import type { LynkDialog } from "../../components/dialog/dialog.component.js";
 import type { LynkDatePicker } from "../../components/date-picker/date-picker.component.js";
 import type { LynkDateTimePicker } from "../../components/date-time-picker/date-time-picker.component.js";
-import type { LynkDrawer } from "../../components/drawer/drawer.component.js";
+import type { LynkDialog } from "../../components/dialog/dialog.component.js";
 import type { LynkDivider } from "../../components/divider/divider.component.js";
+import type { LynkDrawer } from "../../components/drawer/drawer.component.js";
 import type { LynkDropdown } from "../../components/dropdown/dropdown.component.js";
 import type { LynkFlank } from "../../components/flank/flank.component.js";
 import type { LynkFormField } from "../../components/form-field/form-field.component.js";
@@ -65,8 +65,8 @@ import type { LynkRelativeTime } from "../../components/relative-time/relative-t
 import type { LynkResizeObserver } from "../../components/resize-observer/resize-observer.component.js";
 import type { LynkResponsiveMedia } from "../../components/responsive-media/responsive-media.component.js";
 import type { LynkScroller } from "../../components/scroller/scroller.component.js";
-import type { LynkSpinner } from "../../components/spinner/spinner.component.js";
 import type { LynkSelect } from "../../components/select/select.component.js";
+import type { LynkSpinner } from "../../components/spinner/spinner.component.js";
 import type { LynkSplit } from "../../components/split/split.component.js";
 import type { LynkSplitPanel } from "../../components/split-panel/split-panel.component.js";
 import type { LynkSplitter } from "../../components/splitter/splitter.component.js";
@@ -102,6 +102,37 @@ type LynkAccordionProps = {
   shape?: LynkAccordion["shape"];
 };
 
+type LynkAlertProps = {
+  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */
+  open?: LynkAlert["open"];
+  /** Makes the alert closable. */
+  closable?: LynkAlert["closable"];
+  /** The alert's type (color). */
+  type?: LynkAlert["type"];
+  /** The alert's visual appearance. */
+  appearance?: LynkAlert["appearance"];
+  /** The alert's size. */
+  size?: LynkAlert["size"];
+  /** The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with
+the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`. */
+  duration?: LynkAlert["duration"];
+  /** Enables a countdown that indicates the remaining time the alert will be displayed.
+Typically used to indicate the remaining time before a whole app refresh. */
+  countdown?: LynkAlert["countdown"];
+  /**  */
+  base?: LynkAlert["base"];
+  /**  */
+  countdownElement?: LynkAlert["countdownElement"];
+  /** Emitted when the alert opens. */
+  "onev-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the alert opens and all animations are complete. */
+  "onev-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the alert closes. */
+  "onev-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the alert closes and all animations are complete. */
+  "onev-after-hide"?: (e: CustomEvent<never>) => void;
+};
+
 type LynkAnimationProps = {
   /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
   name?: LynkAnimation["name"];
@@ -143,6 +174,26 @@ value can be changed without causing the animation to restart. */
   "onev-start"?: (e: CustomEvent<never>) => void;
 };
 
+type LynkAutoGridProps = {
+  /** How to justify auto-grid items */
+  "auto-size"?: LynkAutoGrid["autoSize"];
+  /** How to align auto-grid items to each-other */
+  "min-size"?: LynkAutoGrid["minSize"];
+  /** The space between auto-grid items. Use spacing tokens or any custom size. */
+  gap?: LynkAutoGrid["gap"];
+};
+
+type LynkBadgeProps = {
+  /** The badge's variant. */
+  type?: LynkBadge["type"];
+  /** Draws a pill-style badge with rounded edges. */
+  pill?: LynkBadge["pill"];
+  /** Makes the badge pulsate to draw attention. */
+  pulse?: LynkBadge["pulse"];
+};
+
+type LynkBoxProps = {};
+
 type LynkAvatarProps = {
   /** The image source to use for the avatar. */
   image?: LynkAvatar["image"];
@@ -159,48 +210,6 @@ type LynkAvatarProps = {
   "onev-error"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkBadgeProps = {
-  /** The badge's variant. */
-  type?: LynkBadge["type"];
-  /** Draws a pill-style badge with rounded edges. */
-  pill?: LynkBadge["pill"];
-  /** Makes the badge pulsate to draw attention. */
-  pulse?: LynkBadge["pulse"];
-};
-
-type LynkBoxProps = {};
-
-type LynkAlertProps = {
-  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */
-  open?: LynkAlert["open"];
-  /** Makes the alert closable. */
-  closable?: LynkAlert["closable"];
-  /** The alert's type (color). */
-  type?: LynkAlert["type"];
-  /** The alert's visual appearance. */
-  appearance?: LynkAlert["appearance"];
-  /** The alert's size. */
-  size?: LynkAlert["size"];
-  /** The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with
-the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`. */
-  duration?: LynkAlert["duration"];
-  /** Enables a countdown that indicates the remaining time the alert will be displayed.
-Typically used to indicate the remaining time before a whole app refresh. */
-  countdown?: LynkAlert["countdown"];
-  /**  */
-  base?: LynkAlert["base"];
-  /**  */
-  countdownElement?: LynkAlert["countdownElement"];
-  /** Emitted when the alert opens. */
-  "onev-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the alert opens and all animations are complete. */
-  "onev-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the alert closes. */
-  "onev-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the alert closes and all animations are complete. */
-  "onev-after-hide"?: (e: CustomEvent<never>) => void;
-};
-
 type LynkBreadcrumbProps = {
   /** The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
 screen readers and other assistive devices to provide more context for users. */
@@ -211,15 +220,6 @@ screen readers and other assistive devices to provide more context for users. */
   separatorSlot?: LynkBreadcrumb["separatorSlot"];
 };
 
-type LynkAutoGridProps = {
-  /** How to justify auto-grid items */
-  "auto-size"?: LynkAutoGrid["autoSize"];
-  /** How to align auto-grid items to each-other */
-  "min-size"?: LynkAutoGrid["minSize"];
-  /** The space between auto-grid items. Use spacing tokens or any custom size. */
-  gap?: LynkAutoGrid["gap"];
-};
-
 type LynkBreadcrumbItemProps = {
   /** Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered
 internally. When unset, a button will be rendered instead. */
@@ -232,18 +232,6 @@ internally. When unset, a button will be rendered instead. */
   defaultSlot?: LynkBreadcrumbItem["defaultSlot"];
 };
 
-type LynkButtonGroupProps = {
-  /** A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive
-devices when interacting with the control and is strongly recommended. */
-  label?: LynkButtonGroup["label"];
-  /** Add a gap between buttons so they appear like a cluster of buttons instead of a flush group */
-  gapped?: LynkButtonGroup["gapped"];
-  /**  */
-  defaultSlot?: LynkButtonGroup["defaultSlot"];
-  /**  */
-  disableRole?: LynkButtonGroup["disableRole"];
-};
-
 type LynkButtonProps = {
   /**  */
   title?: LynkButton["title"];
@@ -326,6 +314,18 @@ value of this attribute must be an id of a form in the same document or shadow r
   "onev-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type LynkButtonGroupProps = {
+  /** A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive
+devices when interacting with the control and is strongly recommended. */
+  label?: LynkButtonGroup["label"];
+  /** Add a gap between buttons so they appear like a cluster of buttons instead of a flush group */
+  gapped?: LynkButtonGroup["gapped"];
+  /**  */
+  defaultSlot?: LynkButtonGroup["defaultSlot"];
+  /**  */
+  disableRole?: LynkButtonGroup["disableRole"];
+};
+
 type LynkCalendarProps = {
   /** The type of calendar to display */
   type?: LynkCalendar["type"];
@@ -453,6 +453,8 @@ type LynkClockProps = {
 
 type LynkColProps = {};
 
+type LynkColGroupProps = {};
+
 type LynkColorPickerProps = {
   /** The current value of the color picker. The value's format will vary based the `format` attribute. To get the value
 in a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form
@@ -541,8 +543,6 @@ the same document or shadow root for this to work. */
   "onev-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkColGroupProps = {};
-
 type LynkComboboxProps = {
   /** The name of the combobox, submitted as a name/value pair with form data. */
   name?: LynkCombobox["name"];
@@ -712,40 +712,6 @@ scenarios. */
   "onev-error"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkDialogProps = {
-  /** Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
-use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state. */
-  open?: LynkDialog["open"];
-  /** The dialog's label as displayed in the header. You should always include a relevant label even when using
-`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead. */
-  label?: LynkDialog["label"];
-  /** Disables the header. This will also remove the default close button, so please ensure you provide an easy,
-accessible way for users to dismiss the dialog. */
-  "no-header"?: LynkDialog["noHeader"];
-  /** The dialog's size. */
-  size?: LynkDialog["size"];
-  /** Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Lynk modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Lynk's focus trapping. */
-  modal?: LynkDialog["modal"];
-  /**  */
-  dialog?: LynkDialog["dialog"];
-  /**  */
-  panel?: LynkDialog["panel"];
-  /**  */
-  overlay?: LynkDialog["overlay"];
-  /** Emitted when the dialog opens. */
-  "onev-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the dialog opens and all animations are complete. */
-  "onev-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the dialog closes. */
-  "onev-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the dialog closes and all animations are complete. */
-  "onev-after-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input. */
-  "onev-initial-focus"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss. */
-  "onev-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
-};
-
 type LynkDatePickerProps = {
   /** The input's name attribute. */
   name?: LynkDatePicker["name"];
@@ -903,6 +869,45 @@ inside of the viewport. */
   "onev-clear"?: (e: CustomEvent<never>) => void;
 };
 
+type LynkDialogProps = {
+  /** Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
+use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state. */
+  open?: LynkDialog["open"];
+  /** The dialog's label as displayed in the header. You should always include a relevant label even when using
+`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead. */
+  label?: LynkDialog["label"];
+  /** Disables the header. This will also remove the default close button, so please ensure you provide an easy,
+accessible way for users to dismiss the dialog. */
+  "no-header"?: LynkDialog["noHeader"];
+  /** The dialog's size. */
+  size?: LynkDialog["size"];
+  /** Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Lynk modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Lynk's focus trapping. */
+  modal?: LynkDialog["modal"];
+  /**  */
+  dialog?: LynkDialog["dialog"];
+  /**  */
+  panel?: LynkDialog["panel"];
+  /**  */
+  overlay?: LynkDialog["overlay"];
+  /** Emitted when the dialog opens. */
+  "onev-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the dialog opens and all animations are complete. */
+  "onev-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the dialog closes. */
+  "onev-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the dialog closes and all animations are complete. */
+  "onev-after-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input. */
+  "onev-initial-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss. */
+  "onev-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
+};
+
+type LynkDividerProps = {
+  /** Draws the divider in a vertical orientation. */
+  vertical?: LynkDivider["vertical"];
+};
+
 type LynkDrawerProps = {
   /** Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can
 use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state. */
@@ -941,11 +946,6 @@ accessible way for users to dismiss the drawer. */
   "onev-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
 };
 
-type LynkDividerProps = {
-  /** Draws the divider in a vertical orientation. */
-  vertical?: LynkDivider["vertical"];
-};
-
 type LynkDropdownProps = {
   /** Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you
 can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state. */
@@ -1514,13 +1514,30 @@ as spaces are used as delimiters when listing multiple values. */
   hasHover?: LynkOption["hasHover"];
 };
 
-type LynkPageProps = {};
+type LynkPageProps = {
+  /** The page's main area. This is the scroll container for stacked `<lynk-page-content>` sections that don't set a
+height, and for content that isn't wrapped in `<lynk-page-content>`. A single page content, or one with a set
+`height`, scrolls itself instead; use its `scrollContainer` to get the right element for a given section. */
+  scrollContainer?: LynkPage["scrollContainer"];
+};
 
 type LynkPageContentProps = {
   /** Set an optional maximum width for page content */
   width?: LynkPageContent["width"];
-  /**  */
-  pageContent?: LynkPageContent["pageContent"];
+  /** Gives the page content a fixed height (any CSS length, e.g. `320px`, `40vh`, `50%`) and makes it scroll its own
+content. Use it on stacked sections inside a `<lynk-page>`; without it a stacked section takes its natural height
+and the page's main area scrolls. A lone page content fills the main area and scrolls itself without a height. */
+  height?: LynkPageContent["height"];
+  /** Lets content that is wider than the page content scroll sideways inside it, instead of spilling out and making the
+page's main area scroll. The main content is wrapped in a `<lynk-scroller>`, which only becomes a focusable,
+labelled scroll region when its content overflows, and shows edge shadows where content is hidden. The sticky
+header stays outside the scroller. Off by default: the scroller clips anything that extends past it, so menus and
+other popups inside it should use `hoist`, and `position: sticky` inside it sticks to the scroller, not the page. */
+  "scroll-x"?: LynkPageContent["scrollX"];
+  /** The element that scrolls this page content's slotted content. That is the page content itself when it is a scroll
+container (the only content in a page, a set `height`, or a standalone page content with a header). Otherwise it is
+the nearest scrolling ancestor, which for stacked sections in a `<lynk-page>` is the page's main area. */
+  scrollContainer?: LynkPageContent["scrollContainer"];
 };
 
 type LynkPageFooterProps = {
@@ -1967,8 +1984,6 @@ type LynkScrollerProps = {
   canScroll?: LynkScroller["canScroll"];
 };
 
-type LynkSpinnerProps = {};
-
 type LynkSelectProps = {
   /** The name of the select, submitted as a name/value pair with form data. */
   name?: LynkSelect["name"];
@@ -2080,6 +2095,8 @@ be an array. **For this reason, values must not contain spaces.** */
   "onev-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type LynkSpinnerProps = {};
+
 type LynkSplitProps = {
   /** split items vertically */
   column?: LynkSplit["column"];
@@ -2743,44 +2760,76 @@ export type CustomElements = {
   "lynk-accordion": DefineComponent<LynkAccordionProps>;
 
   /**
-   * Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
+   * Alerts are used to display important messages inline or as toast notifications.
    * ---
    *
    *
    * ### **Events:**
-   *  - **ev-cancel** - Emitted when the animation is canceled.
-   * - **ev-finish** - Emitted when the animation finishes.
-   * - **ev-start** - Emitted when the animation starts or restarts.
+   *  - **ev-show** - Emitted when the alert opens.
+   * - **ev-after-show** - Emitted after the alert opens and all animations are complete.
+   * - **ev-hide** - Emitted when the alert closes.
+   * - **ev-after-hide** - Emitted after the alert closes and all animations are complete.
    *
    * ### **Methods:**
-   *  - **cancel()** - Clears all KeyframeEffects caused by this animation and aborts its playback.
-   * - **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.
+   *  - **show()** - Shows the alert.
+   * - **hide()** - Hides the alert
+   * - **toast(placement: _LynkToastPlacement_)** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
+   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
+   * calling this method again. The returned promise will resolve after the alert is hidden.
    *
    * ### **Slots:**
-   *  - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<lynk-animation>` elements.
-   */
-  "lynk-animation": DefineComponent<LynkAnimationProps>;
-
-  /**
-   * Avatars are used to represent a person or object.
-   * ---
+   *  - _default_ - The alert's content.
+   * - **icon** - An icon to show in the alert.
+   * - **action** - Append custom actions to alert.
+   *
+   * ### **CSS Properties:**
+   *  - **--box-shadow** - The alert's box shadow. _(default: undefined)_
+   * - **--padding** - The top and bottom padding of the message. Use any spacing token (--lynk-spacing-large) or a custom value. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's internal block wrapper.
+   * - **icon** - The container that wraps the alert icon.
+   * - **message** - The alert message.
+   * - **close-button** - The close button.
+   * - **close-button__base** - The close button's `base` part.
+   */
+  "lynk-alert": DefineComponent<LynkAlertProps>;
+
+  /**
+   * Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
+   * ---
    *
    *
    * ### **Events:**
-   *  - **ev-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.
+   *  - **ev-cancel** - Emitted when the animation is canceled.
+   * - **ev-finish** - Emitted when the animation finishes.
+   * - **ev-start** - Emitted when the animation starts or restarts.
+   *
+   * ### **Methods:**
+   *  - **cancel()** - Clears all KeyframeEffects caused by this animation and aborts its playback.
+   * - **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.
    *
    * ### **Slots:**
-   *  - **icon** - The default icon to use when no image or initials are present. Works best with `<wa-icon>`.
+   *  - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<lynk-animation>` elements.
+   */
+  "lynk-animation": DefineComponent<LynkAnimationProps>;
+
+  /**
+   * A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The default slot.
    *
    * ### **CSS Properties:**
-   *  - **--size** - The size of the avatar. _(default: undefined)_
+   *  - **--gap** - Customize the gap of the auto-grid group. _(default: var(--lynk-spacing-base))_
+   * - **--min-size** - Customize the allowed min-size of the auto-grid items. _(default: 20rem)_
    *
    * ### **CSS Parts:**
-   *  - **icon** - The container that wraps the avatar's icon.
-   * - **initials** - The container that wraps the avatar's initials.
-   * - **image** - The avatar image. Only shown when the `image` attribute is set.
+   *  - **base** - The component's internal wrapper.
    */
-  "lynk-avatar": DefineComponent<LynkAvatarProps>;
+  "lynk-auto-grid": DefineComponent<LynkAutoGridProps>;
 
   /**
    * Badges are used to draw attention and display statuses or counts.
@@ -2826,40 +2875,25 @@ export type CustomElements = {
   "lynk-box": DefineComponent<LynkBoxProps>;
 
   /**
-   * Alerts are used to display important messages inline or as toast notifications.
+   * Avatars are used to represent a person or object.
    * ---
    *
    *
    * ### **Events:**
-   *  - **ev-show** - Emitted when the alert opens.
-   * - **ev-after-show** - Emitted after the alert opens and all animations are complete.
-   * - **ev-hide** - Emitted when the alert closes.
-   * - **ev-after-hide** - Emitted after the alert closes and all animations are complete.
-   *
-   * ### **Methods:**
-   *  - **show()** - Shows the alert.
-   * - **hide()** - Hides the alert
-   * - **toast(placement: _LynkToastPlacement_)** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
-   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
-   * calling this method again. The returned promise will resolve after the alert is hidden.
+   *  - **ev-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.
    *
    * ### **Slots:**
-   *  - _default_ - The alert's content.
-   * - **icon** - An icon to show in the alert.
-   * - **action** - Append custom actions to alert.
+   *  - **icon** - The default icon to use when no image or initials are present. Works best with `<wa-icon>`.
    *
    * ### **CSS Properties:**
-   *  - **--box-shadow** - The alert's box shadow. _(default: undefined)_
-   * - **--padding** - The top and bottom padding of the message. Use any spacing token (--lynk-spacing-large) or a custom value. _(default: undefined)_
+   *  - **--size** - The size of the avatar. _(default: undefined)_
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's internal block wrapper.
-   * - **icon** - The container that wraps the alert icon.
-   * - **message** - The alert message.
-   * - **close-button** - The close button.
-   * - **close-button__base** - The close button's `base` part.
+   *  - **icon** - The container that wraps the avatar's icon.
+   * - **initials** - The container that wraps the avatar's initials.
+   * - **image** - The avatar image. Only shown when the `image` attribute is set.
    */
-  "lynk-alert": DefineComponent<LynkAlertProps>;
+  "lynk-avatar": DefineComponent<LynkAvatarProps>;
 
   /**
    * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
@@ -2875,23 +2909,6 @@ export type CustomElements = {
    */
   "lynk-breadcrumb": DefineComponent<LynkBreadcrumbProps>;
 
-  /**
-   * A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The default slot.
-   *
-   * ### **CSS Properties:**
-   *  - **--gap** - Customize the gap of the auto-grid group. _(default: var(--lynk-spacing-base))_
-   * - **--min-size** - Customize the allowed min-size of the auto-grid items. _(default: 20rem)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's internal wrapper.
-   */
-  "lynk-auto-grid": DefineComponent<LynkAutoGridProps>;
-
   /**
    * Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
    * ---
@@ -2912,19 +2929,6 @@ export type CustomElements = {
    */
   "lynk-breadcrumb-item": DefineComponent<LynkBreadcrumbItemProps>;
 
-  /**
-   * Button groups can be used to group related buttons into sections.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - One or more `<lynk-button>` elements to display in the button group.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's internal wrapper.
-   */
-  "lynk-button-group": DefineComponent<LynkButtonGroupProps>;
-
   /**
    * Buttons represent actions that are available to the user.
    * ---
@@ -2959,6 +2963,19 @@ export type CustomElements = {
    */
   "lynk-button": DefineComponent<LynkButtonProps>;
 
+  /**
+   * Button groups can be used to group related buttons into sections.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - One or more `<lynk-button>` elements to display in the button group.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's internal wrapper.
+   */
+  "lynk-button-group": DefineComponent<LynkButtonGroupProps>;
+
   /**
    * A calendar component that supports single date, multiple dates, and date range selection.
    * ---
@@ -3020,7 +3037,10 @@ export type CustomElements = {
    *  - **--border-color** - The card's border color, including borders that occur inside the card. _(default: undefined)_
    * - **--border-radius** - The border radius for the card's edges. _(default: undefined)_
    * - **--border-width** - The width of the card's borders. _(default: undefined)_
-   * - **--state-color** - A custom color for the interactive state. _(default: undefined)_
+   * - **--state-color** - A custom color for the interactive state. It is the middle of the outline gradient. _(default: undefined)_
+   * - **--state-color-start** - The outline gradient's first color. Named states use step 300 of their ramp; otherwise it's `--state-color` mixed 40% toward the page background. _(default: undefined)_
+   * - **--state-color-end** - The outline gradient's last color. Named states use step 700 of their ramp; otherwise it's `--state-color` mixed 30% toward the text color. _(default: undefined)_
+   * - **--state-gradient-angle** - The direction of the outline gradient. _(default: 135deg)_
    * - **--pulse-speed** - A custom speed for the pulse animation. _(default: undefined)_
    * - **--padding** - The padding to use for the card's sections. _(default: undefined)_
    *
@@ -3107,6 +3127,19 @@ export type CustomElements = {
    */
   "lynk-col": DefineComponent<LynkColProps>;
 
+  /**
+   * Table `<lynk-colgroup>` components will behave like a native `<colgroup>` HTML element within a `<lynk-table>`.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - Should contain 1 or more `<lynk-col>` components.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's internal wrapper.
+   */
+  "lynk-colgroup": DefineComponent<LynkColGroupProps>;
+
   /**
    * Color pickers allow the user to select a color.
    * ---
@@ -3173,19 +3206,6 @@ export type CustomElements = {
    */
   "lynk-color-picker": DefineComponent<LynkColorPickerProps>;
 
-  /**
-   * Table `<lynk-colgroup>` components will behave like a native `<colgroup>` HTML element within a `<lynk-table>`.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - Should contain 1 or more `<lynk-col>` components.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's internal wrapper.
-   */
-  "lynk-colgroup": DefineComponent<LynkColGroupProps>;
-
   /**
    * Comboboxes allow you to choose items from a menu of predefined options.
    * ---
@@ -3280,49 +3300,6 @@ export type CustomElements = {
    */
   "lynk-copy-button": DefineComponent<LynkCopyButtonProps>;
 
-  /**
-   * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **ev-show** - Emitted when the dialog opens.
-   * - **ev-after-show** - Emitted after the dialog opens and all animations are complete.
-   * - **ev-hide** - Emitted when the dialog closes.
-   * - **ev-after-hide** - Emitted after the dialog closes and all animations are complete.
-   * - **ev-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
-   * - **ev-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.
-   *
-   * ### **Methods:**
-   *  - **show()** - Shows the dialog.
-   * - **hide()** - Hides the dialog
-   *
-   * ### **Slots:**
-   *  - _default_ - The dialog's main content.
-   * - **label** - The dialog's label. Alternatively, you can use the label prop.
-   * - **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.
-   * - **footer** - The dialog's footer, usually one or more buttons representing various options.
-   *
-   * ### **CSS Properties:**
-   *  - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_
-   * - **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_
-   * - **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_
-   * - **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's internal wrapper.
-   * - **overlay** - The overlay.
-   * - **panel** - The dialog panel (where the dialog and its content is rendered).
-   * - **header** - The dialog header.
-   * - **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.
-   * - **title** - The dialog title.
-   * - **close-button** - The close button.
-   * - **close-button__base** - The close button's `base` part.
-   * - **body** - The dialog body.
-   * - **footer** - The dialog footer.
-   */
-  "lynk-dialog": DefineComponent<LynkDialogProps>;
-
   /**
    * A date picker that combines calendar component with accessible input field.
    * ---
@@ -3410,6 +3387,61 @@ export type CustomElements = {
    */
   "lynk-date-time-picker": DefineComponent<LynkDateTimePickerProps>;
 
+  /**
+   * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **ev-show** - Emitted when the dialog opens.
+   * - **ev-after-show** - Emitted after the dialog opens and all animations are complete.
+   * - **ev-hide** - Emitted when the dialog closes.
+   * - **ev-after-hide** - Emitted after the dialog closes and all animations are complete.
+   * - **ev-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
+   * - **ev-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.
+   *
+   * ### **Methods:**
+   *  - **show()** - Shows the dialog.
+   * - **hide()** - Hides the dialog
+   *
+   * ### **Slots:**
+   *  - _default_ - The dialog's main content.
+   * - **label** - The dialog's label. Alternatively, you can use the label prop.
+   * - **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.
+   * - **footer** - The dialog's footer, usually one or more buttons representing various options.
+   *
+   * ### **CSS Properties:**
+   *  - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_
+   * - **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_
+   * - **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_
+   * - **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's internal wrapper.
+   * - **overlay** - The overlay.
+   * - **panel** - The dialog panel (where the dialog and its content is rendered).
+   * - **header** - The dialog header.
+   * - **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.
+   * - **title** - The dialog title.
+   * - **close-button** - The close button.
+   * - **close-button__base** - The close button's `base` part.
+   * - **body** - The dialog body.
+   * - **footer** - The dialog footer.
+   */
+  "lynk-dialog": DefineComponent<LynkDialogProps>;
+
+  /**
+   * Dividers are used to visually separate or group elements.
+   * ---
+   *
+   *
+   * ### **CSS Properties:**
+   *  - **--color** - The color of the divider. _(default: undefined)_
+   * - **--width** - The width of the divider. _(default: undefined)_
+   * - **--spacing** - The spacing of the divider. _(default: undefined)_
+   */
+  "lynk-divider": DefineComponent<LynkDividerProps>;
+
   /**
    * Drawers slide in from a container to expose additional options and information.
    * ---
@@ -3452,18 +3484,6 @@ export type CustomElements = {
    */
   "lynk-drawer": DefineComponent<LynkDrawerProps>;
 
-  /**
-   * Dividers are used to visually separate or group elements.
-   * ---
-   *
-   *
-   * ### **CSS Properties:**
-   *  - **--color** - The color of the divider. _(default: undefined)_
-   * - **--width** - The width of the divider. _(default: undefined)_
-   * - **--spacing** - The spacing of the divider. _(default: undefined)_
-   */
-  "lynk-divider": DefineComponent<LynkDividerProps>;
-
   /**
    * Dropdowns expose additional content that "drops down" in a panel.
    * ---
@@ -3725,7 +3745,7 @@ export type CustomElements = {
    * - **submenu** - Used to denote a nested menu.
    *
    * ### **CSS Properties:**
-   *  - **--submenu-offset** - The distance submenus shift to overlap the parent menu. _(default: -2px)_
+   *  - **--submenu-offset** - The distance submenus shift from the item's edge. Items are inset 4px inside the menu, so the default places a submenu just inside the parent menu's outer edge. _(default: 2px)_
    *
    * ### **CSS Parts:**
    *  - **base** - The component's internal wrapper.
@@ -3941,7 +3961,7 @@ export type CustomElements = {
    *
    *
    * ### **Slots:**
-   *  - _default_ - The page's main content area. Works best with `<lynk-page-content>`.
+   *  - _default_ - The page's main content area. Works best with one or more `<lynk-page-content>` elements.
    * - **header** - The page's header area. Breadcrumb, title, tabs and other page level controls go in here. Works best with `<lynk-page-header>`
    * - **left-sidebar** - The page's left sidebar with a primary navigation menu. Works best with `<lynk-page-sidebar>`.
    * - **right-sidebar** - The page's right sidebar with a secondary navigation menu. Works best with `<lynk-page-sidebar>`.
@@ -3949,6 +3969,11 @@ export type CustomElements = {
    * - **right-inset-sidebar** - A visually nested right sidebar for displaying content specific menus or aside details. Works best with `<lynk-page-sidebar>`
    * - **footer** - The pages footer, usually one or more buttons representing various primary or secondary options like save or table pagination. Works best with `<lynk-page-footer>`
    *
+   * ### **CSS Properties:**
+   *  - **--background-color** - The background color of the whole page layout. _(default: var(--lynk-page-background-color))_
+   * - **--main-background-color** - The background color of the main content area. _(default: var(--lynk-page-main-background-color))_
+   * - **--content-gap** - The gap between stacked `<lynk-page-content>` sections. _(default: var(--lynk-page-content-gap))_
+   *
    * ### **CSS Parts:**
    *  - **base** - The page layout internal wrapper.
    * - **header** - The page header area's internal wrapper.
@@ -3967,7 +3992,26 @@ export type CustomElements = {
    *
    *
    * ### **Methods:**
-   *  - **scrollToTop()** - Scrolls the nearest scrollable parent element to the top.
+   *  - **scrollToTop()** - Scrolls the page content's scroll container to the top.
+   *
+   * ### **Slots:**
+   *  - _default_ - The page content.
+   * - **header** - Optional content that stays pinned to the top of the page content while the rest of it scrolls.
+   *
+   * ### **CSS Properties:**
+   *  - **--background-color** - The section's background color. _(default: var(--lynk-page-content-background-color))_
+   * - **--header-background-color** - The color painted beneath the sticky header so scrolled content doesn't show through it. The section's `--background-color` is layered on top. _(default: var(--lynk-page-content-header-background-color))_
+   * - **--border-radius** - The section's border radius. _(default: var(--lynk-page-content-border-radius))_
+   * - **--padding-top** - Padding above the content. _(default: var(--lynk-spacing-large))_
+   * - **--padding-bottom** - Padding below the content. _(default: var(--lynk-spacing-large))_
+   * - **--gap** - The space between the header and the main content. _(default: 8px)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's internal wrapper, which applies the width and page margins.
+   * - **header** - The sticky header area.
+   * - **main** - The main content area.
+   * - **scroller** - The `<lynk-scroller>` that wraps the main content area when `scroll-x` is set.
+   * - **scroller-content** - The scroller's scrolling container (the scroller's `content` part).
    */
   "lynk-page-content": DefineComponent<LynkPageContentProps>;
 
@@ -3981,6 +4025,12 @@ export type CustomElements = {
    * - **center** - Typically used for pagination info or other non interactive page metadata.
    * - **secondary** - The end-aligned slot for secondary page actions. Typically where `delete` or other secondary destructive actions should go..
    *
+   * ### **CSS Properties:**
+   *  - **--background-color** - The footer panel's background color. _(default: var(--lynk-page-footer-background-color))_
+   * - **--border-color** - The footer panel's border color. _(default: var(--lynk-page-footer-border-color))_
+   * - **--border-radius** - The radius of the footer panel's top corners. _(default: var(--lynk-page-footer-border-radius))_
+   * - **--shadow** - The footer panel's shadow. _(default: var(--lynk-page-footer-shadow))_
+   *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
    * - **primary** - The component's primary slot area.
@@ -4003,6 +4053,7 @@ export type CustomElements = {
    *
    * ### **CSS Properties:**
    *  - **--gap** - The gutter spacing between slots. _(default: undefined)_
+   * - **--background-color** - The header area's background color. _(default: var(--lynk-page-header-background-color))_
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
@@ -4040,6 +4091,11 @@ export type CustomElements = {
    * - **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_
    * - **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_
    * - **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_
+   * - **--background-color** - The sidebar's background color. _(default: var(--lynk-page-sidebar-background-color))_
+   * - **--border-color** - The sidebar's border color. _(default: var(--lynk-page-sidebar-border-color))_
+   * - **--nav-border-color** - The border between the `nav` slot and the sidebar body. _(default: var(--lynk-page-sidebar-nav-border-color))_
+   * - **--inset-spacing** - The space above and below an inset sidebar. _(default: var(--lynk-page-sidebar-inset-spacing))_
+   * - **--inset-border-radius** - An inset sidebar's border radius. _(default: var(--lynk-page-sidebar-inset-border-radius))_
    *
    * ### **CSS Parts:**
    *  - **base** - The component's internal wrapper.
@@ -4401,22 +4457,6 @@ export type CustomElements = {
    */
   "lynk-scroller": DefineComponent<LynkScrollerProps>;
 
-  /**
-   * Spinners are used to show the progress of an indeterminate operation.
-   * ---
-   *
-   *
-   * ### **CSS Properties:**
-   *  - **--track-width** - The width of the track. _(default: undefined)_
-   * - **--track-color** - The color of the track. _(default: undefined)_
-   * - **--indicator-color** - The color of the indicator. _(default: undefined)_
-   * - **--speed** - The time it takes for the spinner to complete one animation cycle. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's internal wrapper.
-   */
-  "lynk-spinner": DefineComponent<LynkSpinnerProps>;
-
   /**
    * Selects allow you to choose items from a menu of predefined options.
    * ---
@@ -4476,6 +4516,22 @@ export type CustomElements = {
    */
   "lynk-select": DefineComponent<LynkSelectProps>;
 
+  /**
+   * Spinners are used to show the progress of an indeterminate operation.
+   * ---
+   *
+   *
+   * ### **CSS Properties:**
+   *  - **--track-width** - The width of the track. _(default: undefined)_
+   * - **--track-color** - The color of the track. _(default: undefined)_
+   * - **--indicator-color** - The color of the indicator. _(default: undefined)_
+   * - **--speed** - The time it takes for the spinner to complete one animation cycle. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's internal wrapper.
+   */
+  "lynk-spinner": DefineComponent<LynkSpinnerProps>;
+
   /**
    * Distribute two or more items evenly across available space, either in a row or a column.
    * ---