@uplynk/lynk-design 1.19.2 → 1.20.0

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

@@ -1,36 +1,36 @@
 import type { DefineComponent } from "vue";
 
 import type { LynkAccordion } from "../../components/accordion/accordion.component.js";
-import type { LynkAnimation } from "../../components/animation/animation.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 { LynkAlert } from "../../components/alert/alert.component.js";
-import type { LynkBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
 import type { LynkAutoGrid } from "../../components/auto-grid/auto-grid.component.js";
+import type { LynkBox } from "../../components/box/box.component.js";
+import type { LynkBadge } from "../../components/badge/badge.component.js";
+import type { LynkAnimation } from "../../components/animation/animation.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 { LynkButtonGroup } from "../../components/button-group/button-group.component.js";
 import type { LynkButton } from "../../components/button/button.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";
 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 { LynkDatePicker } from "../../components/date-picker/date-picker.component.js";
 import type { LynkDivider } from "../../components/divider/divider.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";
@@ -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,57 @@ 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"];
+  /** 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 LynkBoxProps = {};
+
+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 LynkAnimationProps = {
   /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
   name?: LynkAnimation["name"];
@@ -143,6 +194,16 @@ value can be changed without causing the animation to restart. */
   "onev-start"?: (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. */
+  label?: LynkBreadcrumb["label"];
+  /**  */
+  defaultSlot?: LynkBreadcrumb["defaultSlot"];
+  /**  */
+  separatorSlot?: LynkBreadcrumb["separatorSlot"];
+};
+
 type LynkAvatarProps = {
   /** The image source to use for the avatar. */
   image?: LynkAvatar["image"];
@@ -159,67 +220,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. */
-  label?: LynkBreadcrumb["label"];
-  /**  */
-  defaultSlot?: LynkBreadcrumb["defaultSlot"];
-  /**  */
-  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"];
@@ -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"];
@@ -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,102 +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"];
-  /** 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"];
@@ -903,42 +807,66 @@ inside of the viewport. */
   "onev-clear"?: (e: CustomEvent<never>) => void;
 };
 
-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. */
-  open?: LynkDrawer["open"];
-  /** The drawer'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, you can use the `label` slot
-instead. */
-  label?: LynkDrawer["label"];
-  /** The direction from which the drawer will open. */
-  placement?: LynkDrawer["placement"];
-  /** By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
-its parent element, set this prop and add `position: relative` to the parent. */
-  contained?: LynkDrawer["contained"];
-  /** Removes the header. This will also remove the default close button, so please ensure you provide an easy,
-accessible way for users to dismiss the drawer. */
-  "no-header"?: LynkDrawer["noHeader"];
-  /** 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?: LynkDrawer["modal"];
+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"];
   /**  */
-  drawer?: LynkDrawer["drawer"];
+  dropdown?: LynkDatePicker["dropdown"];
   /**  */
-  panel?: LynkDrawer["panel"];
+  calendar?: LynkDatePicker["calendar"];
   /**  */
-  overlay?: LynkDrawer["overlay"];
-  /** Emitted when the drawer opens. */
-  "onev-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the drawer opens and all animations are complete. */
-  "onev-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the drawer closes. */
-  "onev-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the drawer closes and all animations are complete. */
-  "onev-after-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the drawer 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 drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss. */
-  "onev-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
+  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 = {
@@ -970,22 +898,94 @@ controls that allow multiple selections. */
   /** Syncs the popup width or height to that of the trigger element. */
   sync?: LynkDropdown["sync"];
   /**  */
-  popup?: LynkDropdown["popup"];
+  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. */
+  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 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. */
+  open?: LynkDrawer["open"];
+  /** The drawer'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, you can use the `label` slot
+instead. */
+  label?: LynkDrawer["label"];
+  /** The direction from which the drawer will open. */
+  placement?: LynkDrawer["placement"];
+  /** By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
+its parent element, set this prop and add `position: relative` to the parent. */
+  contained?: LynkDrawer["contained"];
+  /** Removes the header. This will also remove the default close button, so please ensure you provide an easy,
+accessible way for users to dismiss the drawer. */
+  "no-header"?: LynkDrawer["noHeader"];
+  /** 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?: LynkDrawer["modal"];
+  /**  */
+  drawer?: LynkDrawer["drawer"];
   /**  */
-  trigger?: LynkDropdown["trigger"];
+  panel?: LynkDrawer["panel"];
   /**  */
-  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. */
+  overlay?: LynkDrawer["overlay"];
+  /** Emitted when the drawer opens. */
   "onev-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the dropdown opens and all animations are complete. */
+  /** Emitted after the drawer opens and all animations are complete. */
   "onev-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the dropdown closes. */
+  /** Emitted when the drawer closes. */
   "onev-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the dropdown closes and all animations are complete. */
+  /** Emitted after the drawer closes and all animations are complete. */
   "onev-after-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the drawer 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 drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss. */
+  "onev-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
 };
 
 type LynkFlankProps = {
@@ -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 = {
@@ -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,62 +2760,57 @@ 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.
-   *
-   * ### **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.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **ev-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.
+   *  - **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>;
 
   /**
    *
@@ -2826,40 +2838,41 @@ export type CustomElements = {
   "lynk-box": DefineComponent<LynkBoxProps>;
 
   /**
-   * Alerts are used to display important messages inline or as toast notifications.
+   * Badges are used to draw attention and display statuses or counts.
    * ---
    *
    *
-   * ### **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.
-   *
    * ### **Slots:**
-   *  - _default_ - The alert's content.
-   * - **icon** - An icon to show in the alert.
-   * - **action** - Append custom actions to alert.
+   *  - _default_ - The badge's content.
    *
    * ### **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)_
+   *  - **--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 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.
+   *  - **base** - The component's internal wrapper.
    */
-  "lynk-alert": DefineComponent<LynkAlertProps>;
+  "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).
+   * ---
+   *
+   *
+   * ### **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.
+   *
+   * ### **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:**
+   *  - _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>;
 
   /**
    * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
@@ -2876,21 +2889,25 @@ export type CustomElements = {
   "lynk-breadcrumb": DefineComponent<LynkBreadcrumbProps>;
 
   /**
-   * A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.
+   * Avatars are used to represent a person or object.
    * ---
    *
    *
+   * ### **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 default slot.
+   *  - **icon** - The default icon to use when no image or initials are present. Works best with `<wa-icon>`.
    *
    * ### **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)_
+   *  - **--size** - The size of the avatar. _(default: undefined)_
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's internal wrapper.
+   *  - **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-auto-grid": DefineComponent<LynkAutoGridProps>;
+  "lynk-avatar": DefineComponent<LynkAvatarProps>;
 
   /**
    * 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.
    * ---
@@ -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)_
    *
@@ -3105,7 +3125,20 @@ export type CustomElements = {
    * ---
    *
    */
-  "lynk-col": DefineComponent<LynkColProps>;
+  "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.
    * ---
@@ -3281,55 +3301,12 @@ 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.
+   * 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.
    *
@@ -3358,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.
    *
@@ -3399,16 +3381,95 @@ 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.
+   * ---
+   *
+   *
+   * ### **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>;
 
   /**
    * Drawers slide in from a container to expose additional options and information.
@@ -3452,47 +3513,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.
-   * ---
-   *
-   *
-   * ### **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.
@@ -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.
    * ---