@uplynk/lynk-design 1.19.1 → 1.20.0

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

@@ -1,17 +1,17 @@
 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 { LynkAutoGrid } from "../../components/auto-grid/auto-grid.component.js";
-import type { LynkAvatar } from "../../components/avatar/avatar.component.js";
-import type { LynkBadge } from "../../components/badge/badge.component.js";
 import type { LynkBox } from "../../components/box/box.component.js";
-import type { LynkBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
+import type { LynkBadge } from "../../components/badge/badge.component.js";
 import type { LynkAnimation } from "../../components/animation/animation.component.js";
-import type { LynkAlert } from "../../components/alert/alert.component.js";
+import type { LynkBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
+import type { LynkAvatar } from "../../components/avatar/avatar.component.js";
 import type { LynkBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.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 { LynkButtonGroup } from "../../components/button-group/button-group.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";
@@ -20,17 +20,17 @@ import type { LynkColGroup } from "../../components/colgroup/colgroup.component.
 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 { LynkDatePicker } from "../../components/date-picker/date-picker.component.js";
 import type { LynkDateTimePicker } from "../../components/date-time-picker/date-time-picker.component.js";
-import type { LynkDialog } from "../../components/dialog/dialog.component.js";
+import type { LynkDatePicker } from "../../components/date-picker/date-picker.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 { LynkDialog } from "../../components/dialog/dialog.component.js";
+import type { LynkDrawer } from "../../components/drawer/drawer.component.js";
 import type { LynkFlank } from "../../components/flank/flank.component.js";
 import type { LynkFormField } from "../../components/form-field/form-field.component.js";
-import type { LynkFormatBytes } from "../../components/format-bytes/format-bytes.component.js";
-import type { LynkFormatDate } from "../../components/format-date/format-date.component.js";
 import type { LynkFormatNumber } from "../../components/format-number/format-number.component.js";
+import type { LynkFormatDate } from "../../components/format-date/format-date.component.js";
+import type { LynkFormatBytes } from "../../components/format-bytes/format-bytes.component.js";
 import type { LynkGrid } from "../../components/grid/grid.component.js";
 import type { LynkIcon } from "../../components/icon/icon.component.js";
 import type { LynkIconButton } from "../../components/icon-button/icon-button.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 LynkAutoGridProps = {
   /** How to justify auto-grid items */
   "auto-size"?: LynkAutoGrid["autoSize"];
@@ -111,21 +142,7 @@ type LynkAutoGridProps = {
   gap?: LynkAutoGrid["gap"];
 };
 
-type LynkAvatarProps = {
-  /** The image source to use for the avatar. */
-  image?: LynkAvatar["image"];
-  /** A label to use to describe the avatar to assistive devices. */
-  label?: LynkAvatar["label"];
-  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
-  initials?: LynkAvatar["initials"];
-  /** Indicates how the browser should load the image. */
-  loading?: LynkAvatar["loading"];
-  /** The shape of the avatar. */
-  shape?: LynkAvatar["shape"];
-
-  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
-  "onev-error"?: (e: CustomEvent<never>) => void;
-};
+type LynkBoxProps = {};
 
 type LynkBadgeProps = {
   /** The badge's variant. */
@@ -136,18 +153,6 @@ type LynkBadgeProps = {
   pulse?: LynkBadge["pulse"];
 };
 
-type LynkBoxProps = {};
-
-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. */
-  label?: LynkBreadcrumb["label"];
-  /**  */
-  defaultSlot?: LynkBreadcrumb["defaultSlot"];
-  /**  */
-  separatorSlot?: LynkBreadcrumb["separatorSlot"];
-};
-
 type LynkAnimationProps = {
   /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
   name?: LynkAnimation["name"];
@@ -189,35 +194,30 @@ value can be changed without causing the animation to restart. */
   "onev-start"?: (e: CustomEvent<never>) => void;
 };
 
-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"];
+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. */
+  label?: LynkBreadcrumb["label"];
   /**  */
-  base?: LynkAlert["base"];
+  defaultSlot?: LynkBreadcrumb["defaultSlot"];
   /**  */
-  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;
+  separatorSlot?: LynkBreadcrumb["separatorSlot"];
+};
+
+type LynkAvatarProps = {
+  /** The image source to use for the avatar. */
+  image?: LynkAvatar["image"];
+  /** A label to use to describe the avatar to assistive devices. */
+  label?: LynkAvatar["label"];
+  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
+  initials?: LynkAvatar["initials"];
+  /** Indicates how the browser should load the image. */
+  loading?: LynkAvatar["loading"];
+  /** The shape of the avatar. */
+  shape?: LynkAvatar["shape"];
+
+  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
+  "onev-error"?: (e: CustomEvent<never>) => void;
 };
 
 type LynkBreadcrumbItemProps = {
@@ -314,18 +314,6 @@ 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"];
@@ -359,6 +347,18 @@ type LynkCalendarProps = {
   "onev-change"?: (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 LynkCardProps = {
   /** The card's visual appearance. */
   appearance?: LynkCard["appearance"];
@@ -712,68 +712,6 @@ scenarios. */
   "onev-error"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkDatePickerProps = {
-  /** The input's name attribute. */
-  name?: LynkDatePicker["name"];
-  /** The current value in ISO format (YYYY-MM-DD). */
-  value?: LynkDatePicker["value"];
-  /** The input's label. */
-  label?: LynkDatePicker["label"];
-  /** Placeholder text to show when the input is empty. */
-  placeholder?: LynkDatePicker["placeholder"];
-  /** The help text below the input. */
-  "help-text"?: LynkDatePicker["helpText"];
-  /** Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot. */
-  "label-end"?: LynkDatePicker["labelEnd"];
-  /** Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot. */
-  "help-text-end"?: LynkDatePicker["helpTextEnd"];
-  /** The help tooltip appended to the label. Alternatively, you can use the help-tip slot. */
-  "help-tip"?: LynkDatePicker["helpTip"];
-  /** Disables the input. */
-  disabled?: LynkDatePicker["disabled"];
-  /** Makes the input readonly. */
-  readonly?: LynkDatePicker["readonly"];
-  /** Makes the input required. */
-  required?: LynkDatePicker["required"];
-  /** Marks the field as optional. */
-  optional?: LynkDatePicker["optional"];
-  /** Adds the dirty indicator mark. */
-  dirty?: LynkDatePicker["dirty"];
-  /** Arranges the label inline next to the date picker instead of above it. */
-  inline?: LynkDatePicker["inline"];
-  /** The input's size. */
-  size?: LynkDatePicker["size"];
-  /** The minimum date in ISO format (YYYY-MM-DD). */
-  min?: LynkDatePicker["min"];
-  /** The maximum date in ISO format (YYYY-MM-DD). */
-  max?: LynkDatePicker["max"];
-  /** Enable this option to prevent the panel from being clipped when the component is placed inside a container with
-`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios. */
-  hoist?: LynkDatePicker["hoist"];
-  /** Adds a clear button when the input is populated. */
-  clearable?: LynkDatePicker["clearable"];
-  /**  */
-  dropdown?: LynkDatePicker["dropdown"];
-  /**  */
-  calendar?: LynkDatePicker["calendar"];
-  /**  */
-  dateInput?: LynkDatePicker["dateInput"];
-  /**  */
-  isOpen?: LynkDatePicker["isOpen"];
-  /** Gets or sets the default value used to reset this element. */
-  defaultValue?: LynkDatePicker["defaultValue"];
-  /** Gets the validity state object */
-  validity?: LynkDatePicker["validity"];
-  /** Gets the validation message */
-  validationMessage?: LynkDatePicker["validationMessage"];
-  /** Emitted when the date value changes. */
-  "onev-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the control receives input. */
-  "onev-input"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the input is cleared. */
-  "onev-clear"?: (e: CustomEvent<never>) => void;
-};
-
 type LynkDateTimePickerProps = {
   /** The input's name attribute. */
   name?: LynkDateTimePicker["name"];
@@ -869,6 +807,115 @@ inside of the viewport. */
   "onev-clear"?: (e: CustomEvent<never>) => void;
 };
 
+type LynkDatePickerProps = {
+  /** The input's name attribute. */
+  name?: LynkDatePicker["name"];
+  /** The current value in ISO format (YYYY-MM-DD). */
+  value?: LynkDatePicker["value"];
+  /** The input's label. */
+  label?: LynkDatePicker["label"];
+  /** Placeholder text to show when the input is empty. */
+  placeholder?: LynkDatePicker["placeholder"];
+  /** The help text below the input. */
+  "help-text"?: LynkDatePicker["helpText"];
+  /** Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot. */
+  "label-end"?: LynkDatePicker["labelEnd"];
+  /** Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot. */
+  "help-text-end"?: LynkDatePicker["helpTextEnd"];
+  /** The help tooltip appended to the label. Alternatively, you can use the help-tip slot. */
+  "help-tip"?: LynkDatePicker["helpTip"];
+  /** Disables the input. */
+  disabled?: LynkDatePicker["disabled"];
+  /** Makes the input readonly. */
+  readonly?: LynkDatePicker["readonly"];
+  /** Makes the input required. */
+  required?: LynkDatePicker["required"];
+  /** Marks the field as optional. */
+  optional?: LynkDatePicker["optional"];
+  /** Adds the dirty indicator mark. */
+  dirty?: LynkDatePicker["dirty"];
+  /** Arranges the label inline next to the date picker instead of above it. */
+  inline?: LynkDatePicker["inline"];
+  /** The input's size. */
+  size?: LynkDatePicker["size"];
+  /** The minimum date in ISO format (YYYY-MM-DD). */
+  min?: LynkDatePicker["min"];
+  /** The maximum date in ISO format (YYYY-MM-DD). */
+  max?: LynkDatePicker["max"];
+  /** Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios. */
+  hoist?: LynkDatePicker["hoist"];
+  /** Adds a clear button when the input is populated. */
+  clearable?: LynkDatePicker["clearable"];
+  /**  */
+  dropdown?: LynkDatePicker["dropdown"];
+  /**  */
+  calendar?: LynkDatePicker["calendar"];
+  /**  */
+  dateInput?: LynkDatePicker["dateInput"];
+  /**  */
+  isOpen?: LynkDatePicker["isOpen"];
+  /** Gets or sets the default value used to reset this element. */
+  defaultValue?: LynkDatePicker["defaultValue"];
+  /** Gets the validity state object */
+  validity?: LynkDatePicker["validity"];
+  /** Gets the validation message */
+  validationMessage?: LynkDatePicker["validationMessage"];
+  /** Emitted when the date value changes. */
+  "onev-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control receives input. */
+  "onev-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the input is cleared. */
+  "onev-clear"?: (e: CustomEvent<never>) => 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. */
+  open?: LynkDropdown["open"];
+  /** The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
+inside of the viewport. */
+  placement?: LynkDropdown["placement"];
+  /** Disables the dropdown so the panel will not open. */
+  disabled?: LynkDropdown["disabled"];
+  /** By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for
+controls that allow multiple selections. */
+  "stay-open-on-select"?: LynkDropdown["stayOpenOnSelect"];
+  /** The distance in pixels from which to offset the panel away from its trigger. */
+  distance?: LynkDropdown["distance"];
+  /** The distance in pixels from which to offset the panel along its trigger. */
+  skidding?: LynkDropdown["skidding"];
+  /** Display the dropdown component as a block instead of inline-block. */
+  block?: LynkDropdown["block"];
+  /** Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios. */
+  hoist?: LynkDropdown["hoist"];
+  /** Syncs the popup width or height to that of the trigger element. */
+  sync?: LynkDropdown["sync"];
+  /**  */
+  popup?: LynkDropdown["popup"];
+  /**  */
+  trigger?: LynkDropdown["trigger"];
+  /**  */
+  panel?: LynkDropdown["panel"];
+  /** The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other
+components that use a dropdown internally. */
+  containingElement?: LynkDropdown["containingElement"];
+  /** Emitted when the dropdown opens. */
+  "onev-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the dropdown opens and all animations are complete. */
+  "onev-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the dropdown closes. */
+  "onev-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the dropdown closes and all animations are complete. */
+  "onev-after-hide"?: (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. */
@@ -903,11 +950,6 @@ accessible way for users to dismiss the dialog. */
   "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. */
@@ -946,48 +988,6 @@ accessible way for users to dismiss the drawer. */
   "onev-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
 };
 
-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. */
-  open?: LynkDropdown["open"];
-  /** The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
-inside of the viewport. */
-  placement?: LynkDropdown["placement"];
-  /** Disables the dropdown so the panel will not open. */
-  disabled?: LynkDropdown["disabled"];
-  /** By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for
-controls that allow multiple selections. */
-  "stay-open-on-select"?: LynkDropdown["stayOpenOnSelect"];
-  /** The distance in pixels from which to offset the panel away from its trigger. */
-  distance?: LynkDropdown["distance"];
-  /** The distance in pixels from which to offset the panel along its trigger. */
-  skidding?: LynkDropdown["skidding"];
-  /** Display the dropdown component as a block instead of inline-block. */
-  block?: LynkDropdown["block"];
-  /** Enable this option to prevent the panel from being clipped when the component is placed inside a container with
-`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios. */
-  hoist?: LynkDropdown["hoist"];
-  /** Syncs the popup width or height to that of the trigger element. */
-  sync?: LynkDropdown["sync"];
-  /**  */
-  popup?: LynkDropdown["popup"];
-  /**  */
-  trigger?: LynkDropdown["trigger"];
-  /**  */
-  panel?: LynkDropdown["panel"];
-  /** The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other
-components that use a dropdown internally. */
-  containingElement?: LynkDropdown["containingElement"];
-  /** Emitted when the dropdown opens. */
-  "onev-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the dropdown opens and all animations are complete. */
-  "onev-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the dropdown closes. */
-  "onev-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the dropdown closes and all animations are complete. */
-  "onev-after-hide"?: (e: CustomEvent<never>) => void;
-};
-
 type LynkFlankProps = {
   /** Flank from first item */
   start?: LynkFlank["start"];
@@ -1038,13 +1038,27 @@ type LynkFormFieldProps = {
   "onev-blur"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkFormatBytesProps = {
-  /** The number to format in bytes. */
-  value?: LynkFormatBytes["value"];
-  /** The type of unit to display. */
-  unit?: LynkFormatBytes["unit"];
-  /** Determines how to display the result, e.g. "100 bytes", "100 b", or "100b". */
-  display?: LynkFormatBytes["display"];
+type LynkFormatNumberProps = {
+  /** The number to format. */
+  value?: LynkFormatNumber["value"];
+  /** The formatting style to use. */
+  type?: LynkFormatNumber["type"];
+  /** Turns off grouping separators. */
+  "no-grouping"?: LynkFormatNumber["noGrouping"];
+  /** The currency to use when formatting. Must be an ISO 4217 currency code such as `USD` or `EUR`. */
+  currency?: LynkFormatNumber["currency"];
+  /** How to display the currency. */
+  "currency-display"?: LynkFormatNumber["currencyDisplay"];
+  /** The minimum number of integer digits to use. Possible values are 1 - 21. */
+  "minimum-integer-digits"?: LynkFormatNumber["minimumIntegerDigits"];
+  /** The minimum number of fraction digits to use. Possible values are 0 - 20. */
+  "minimum-fraction-digits"?: LynkFormatNumber["minimumFractionDigits"];
+  /** The maximum number of fraction digits to use. Possible values are 0 - 20. */
+  "maximum-fraction-digits"?: LynkFormatNumber["maximumFractionDigits"];
+  /** The minimum number of significant digits to use. Possible values are 1 - 21. */
+  "minimum-significant-digits"?: LynkFormatNumber["minimumSignificantDigits"];
+  /** The maximum number of significant digits to use,. Possible values are 1 - 21. */
+  "maximum-significant-digits"?: LynkFormatNumber["maximumSignificantDigits"];
 };
 
 type LynkFormatDateProps = {
@@ -1076,27 +1090,13 @@ in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/do
   "hour-format"?: LynkFormatDate["hourFormat"];
 };
 
-type LynkFormatNumberProps = {
-  /** The number to format. */
-  value?: LynkFormatNumber["value"];
-  /** The formatting style to use. */
-  type?: LynkFormatNumber["type"];
-  /** Turns off grouping separators. */
-  "no-grouping"?: LynkFormatNumber["noGrouping"];
-  /** The currency to use when formatting. Must be an ISO 4217 currency code such as `USD` or `EUR`. */
-  currency?: LynkFormatNumber["currency"];
-  /** How to display the currency. */
-  "currency-display"?: LynkFormatNumber["currencyDisplay"];
-  /** The minimum number of integer digits to use. Possible values are 1 - 21. */
-  "minimum-integer-digits"?: LynkFormatNumber["minimumIntegerDigits"];
-  /** The minimum number of fraction digits to use. Possible values are 0 - 20. */
-  "minimum-fraction-digits"?: LynkFormatNumber["minimumFractionDigits"];
-  /** The maximum number of fraction digits to use. Possible values are 0 - 20. */
-  "maximum-fraction-digits"?: LynkFormatNumber["maximumFractionDigits"];
-  /** The minimum number of significant digits to use. Possible values are 1 - 21. */
-  "minimum-significant-digits"?: LynkFormatNumber["minimumSignificantDigits"];
-  /** The maximum number of significant digits to use,. Possible values are 1 - 21. */
-  "maximum-significant-digits"?: LynkFormatNumber["maximumSignificantDigits"];
+type LynkFormatBytesProps = {
+  /** The number to format in bytes. */
+  value?: LynkFormatBytes["value"];
+  /** The type of unit to display. */
+  unit?: LynkFormatBytes["unit"];
+  /** Determines how to display the result, e.g. "100 bytes", "100 b", or "100b". */
+  display?: LynkFormatBytes["display"];
 };
 
 type LynkGridProps = {
@@ -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 = {
@@ -2736,67 +2753,64 @@ export type CustomElements = {
    * ---
    *
    *
-   * ### **Methods:**
-   *  - **expandAll()** - Expands all panels.
-   * - **collapseAll()** - Collapses all panels
-   */
-  "lynk-accordion": DefineComponent<LynkAccordionProps>;
-
-  /**
-   * 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.
+   * ### **Methods:**
+   *  - **expandAll()** - Expands all panels.
+   * - **collapseAll()** - Collapses all panels
    */
-  "lynk-auto-grid": DefineComponent<LynkAutoGridProps>;
+  "lynk-accordion": DefineComponent<LynkAccordionProps>;
 
   /**
-   * Avatars are used to represent a person or object.
+   * Alerts are used to display important messages inline or as toast notifications.
    * ---
    *
    *
    * ### **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-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.
    *
    * ### **Slots:**
-   *  - **icon** - The default icon to use when no image or initials are present. Works best with `<wa-icon>`.
+   *  - _default_ - The alert's content.
+   * - **icon** - An icon to show in the alert.
+   * - **action** - Append custom actions to alert.
    *
    * ### **CSS Properties:**
-   *  - **--size** - The size of the avatar. _(default: undefined)_
+   *  - **--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:**
-   *  - **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 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-avatar": DefineComponent<LynkAvatarProps>;
+  "lynk-alert": DefineComponent<LynkAlertProps>;
 
   /**
-   * Badges are used to draw attention and display statuses or counts.
+   * A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - The badge's content.
+   *  - _default_ - The default slot.
    *
    * ### **CSS Properties:**
-   *  - **--background-color** - The badges background and pulse color. _(default: undefined)_
-   * - **--color** - The badges text color. _(default: undefined)_
-   * - **--pulse-speed** - The badges pulse speed in seconds or ms. Default is 1.5s. _(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:**
    *  - **base** - The component's internal wrapper.
    */
-  "lynk-badge": DefineComponent<LynkBadgeProps>;
+  "lynk-auto-grid": DefineComponent<LynkAutoGridProps>;
 
   /**
    *
@@ -2824,18 +2838,22 @@ export type CustomElements = {
   "lynk-box": DefineComponent<LynkBoxProps>;
 
   /**
-   * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
+   * Badges are used to draw attention and display statuses or counts.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - One or more breadcrumb items to display.
-   * - **separator** - The separator to use between breadcrumb items. Works best with `<lynk-icon>`.
+   *  - _default_ - The badge's content.
+   *
+   * ### **CSS Properties:**
+   *  - **--background-color** - The badges background and pulse color. _(default: undefined)_
+   * - **--color** - The badges text color. _(default: undefined)_
+   * - **--pulse-speed** - The badges pulse speed in seconds or ms. Default is 1.5s. _(default: undefined)_
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
+   *  - **base** - The component's internal wrapper.
    */
-  "lynk-breadcrumb": DefineComponent<LynkBreadcrumbProps>;
+  "lynk-badge": DefineComponent<LynkBadgeProps>;
 
   /**
    * 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).
@@ -2857,40 +2875,39 @@ export type CustomElements = {
   "lynk-animation": DefineComponent<LynkAnimationProps>;
 
   /**
-   * Alerts are used to display important messages inline or as toast notifications.
+   * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
    * ---
    *
    *
-   * ### **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.
+   * ### **Slots:**
+   *  - _default_ - One or more breadcrumb items to display.
+   * - **separator** - The separator to use between breadcrumb items. Works best with `<lynk-icon>`.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "lynk-breadcrumb": DefineComponent<LynkBreadcrumbProps>;
+
+  /**
+   * Avatars are used to represent a person or object.
+   * ---
    *
-   * ### **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.
+   *
+   * ### **Events:**
+   *  - **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>;
 
   /**
    * Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
@@ -2946,19 +2963,6 @@ 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.
    * ---
@@ -3005,6 +3009,19 @@ export type CustomElements = {
    */
   "lynk-calendar": DefineComponent<LynkCalendarProps>;
 
+  /**
+   * 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>;
+
   /**
    * Cards can be used to group media with related subjects into a container.
    * ---
@@ -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)_
    *
@@ -3281,12 +3301,12 @@ export type CustomElements = {
   "lynk-copy-button": DefineComponent<LynkCopyButtonProps>;
 
   /**
-   * A date picker that combines calendar component with accessible input field.
+   * A date-time picker that combines calendar and clock components with accessible input fields. Accepts ISO 8601 format by default or Unix timestamps.
    * ---
    *
    *
    * ### **Events:**
-   *  - **ev-change** - Emitted when the date value changes.
+   *  - **ev-change** - Emitted when the date-time value changes.
    * - **ev-input** - Emitted when the control receives input.
    * - **ev-clear** - Emitted when the input is cleared.
    *
@@ -3315,19 +3335,24 @@ export type CustomElements = {
    * - **form-control-help-text** - The help text wrapper.
    * - **input-group** - The input group container.
    * - **date-input** - The date input field.
+   * - **time-input** - The time input field.
+   * - **hour-input** - The hour number input (24h mode).
+   * - **minute-input** - The minute number input (24h mode).
+   * - **second-input** - The second number input (24h mode).
    * - **trigger** - The dropdown trigger button.
    * - **dropdown** - The dropdown panel.
    * - **calendar** - The calendar component.
+   * - **clock** - The clock component.
    */
-  "lynk-date-picker": DefineComponent<LynkDatePickerProps>;
+  "lynk-date-time-picker": DefineComponent<LynkDateTimePickerProps>;
 
   /**
-   * A date-time picker that combines calendar and clock components with accessible input fields. Accepts ISO 8601 format by default or Unix timestamps.
+   * A date picker that combines calendar component with accessible input field.
    * ---
    *
    *
    * ### **Events:**
-   *  - **ev-change** - Emitted when the date-time value changes.
+   *  - **ev-change** - Emitted when the date value changes.
    * - **ev-input** - Emitted when the control receives input.
    * - **ev-clear** - Emitted when the input is cleared.
    *
@@ -3356,16 +3381,52 @@ export type CustomElements = {
    * - **form-control-help-text** - The help text wrapper.
    * - **input-group** - The input group container.
    * - **date-input** - The date input field.
-   * - **time-input** - The time input field.
-   * - **hour-input** - The hour number input (24h mode).
-   * - **minute-input** - The minute number input (24h mode).
-   * - **second-input** - The second number input (24h mode).
    * - **trigger** - The dropdown trigger button.
    * - **dropdown** - The dropdown panel.
    * - **calendar** - The calendar component.
-   * - **clock** - The clock component.
    */
-  "lynk-date-time-picker": DefineComponent<LynkDateTimePickerProps>;
+  "lynk-date-picker": DefineComponent<LynkDatePickerProps>;
+
+  /**
+   * 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.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **ev-show** - Emitted when the dropdown opens.
+   * - **ev-after-show** - Emitted after the dropdown opens and all animations are complete.
+   * - **ev-hide** - Emitted when the dropdown closes.
+   * - **ev-after-hide** - Emitted after the dropdown closes and all animations are complete.
+   *
+   * ### **Methods:**
+   *  - **show()** - Shows the dropdown panel.
+   * - **hide()** - Hides the dropdown panel
+   * - **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
+   * is activated.
+   *
+   * ### **Slots:**
+   *  - _default_ - The dropdown's content.
+   * - **trigger** - The dropdown's trigger, usually a `<lynk-button>` element.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper, an `<sl-popup>` element.
+   * - **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.
+   * - **trigger** - The container that wraps the trigger.
+   * - **panel** - The panel that gets shown when the dropdown is open.
+   */
+  "lynk-dropdown": DefineComponent<LynkDropdownProps>;
 
   /**
    * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
@@ -3410,18 +3471,6 @@ export type CustomElements = {
    */
   "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.
    * ---
@@ -3464,35 +3513,6 @@ export type CustomElements = {
    */
   "lynk-drawer": DefineComponent<LynkDrawerProps>;
 
-  /**
-   * Dropdowns expose additional content that "drops down" in a panel.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **ev-show** - Emitted when the dropdown opens.
-   * - **ev-after-show** - Emitted after the dropdown opens and all animations are complete.
-   * - **ev-hide** - Emitted when the dropdown closes.
-   * - **ev-after-hide** - Emitted after the dropdown closes and all animations are complete.
-   *
-   * ### **Methods:**
-   *  - **show()** - Shows the dropdown panel.
-   * - **hide()** - Hides the dropdown panel
-   * - **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
-   * is activated.
-   *
-   * ### **Slots:**
-   *  - _default_ - The dropdown's content.
-   * - **trigger** - The dropdown's trigger, usually a `<lynk-button>` element.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper, an `<sl-popup>` element.
-   * - **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.
-   * - **trigger** - The container that wraps the trigger.
-   * - **panel** - The panel that gets shown when the dropdown is open.
-   */
-  "lynk-dropdown": DefineComponent<LynkDropdownProps>;
-
   /**
    * Position two items side-by-side, with one item positioned alongside, or _flanking_, content that stretches to fill the available space..
    * ---
@@ -3543,11 +3563,11 @@ export type CustomElements = {
   "lynk-form-field": DefineComponent<LynkFormFieldProps>;
 
   /**
-   * Formats a number as a human readable bytes value.
+   * Formats a number using the specified locale and options.
    * ---
    *
    */
-  "lynk-format-bytes": DefineComponent<LynkFormatBytesProps>;
+  "lynk-format-number": DefineComponent<LynkFormatNumberProps>;
 
   /**
    * Formats a date/time using the specified locale and options.
@@ -3557,11 +3577,11 @@ export type CustomElements = {
   "lynk-format-date": DefineComponent<LynkFormatDateProps>;
 
   /**
-   * Formats a number using the specified locale and options.
+   * Formats a number as a human readable bytes value.
    * ---
    *
    */
-  "lynk-format-number": DefineComponent<LynkFormatNumberProps>;
+  "lynk-format-bytes": DefineComponent<LynkFormatBytesProps>;
 
   /**
    * The Grid component helps create visual consistency and structure between layouts while allowing flexibility across a wide variety of designs. It uses [CSS's Flexible Box module](https://www.w3.org/TR/css-flexbox-1/) for high flexibility.
@@ -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.