import type { SigveloIcon } from "src/components/icon/icon.ts";
import type { SigveloAccordionItem } from "src/components/accordion-item/accordion-item.ts";
import type { SigveloAccordion } from "src/components/accordion/accordion.ts";
import type { SigveloActionBar } from "src/components/action-bar/action-bar.ts";
import type { SigveloDialog } from "src/components/dialog/dialog.ts";
import type { SigveloAlertDialog } from "src/components/alert-dialog/alert-dialog.ts";
import type { SigveloAvatar } from "src/components/avatar/avatar.ts";
import type { SigveloBadge } from "src/components/badge/badge.ts";
import type { SigveloBreadcrumb } from "src/components/breadcrumb/breadcrumb.ts";
import type { SigveloBreadcrumbItem } from "src/components/breadcrumb-item/breadcrumb-item.ts";
import type { SigveloSpinner } from "src/components/spinner/spinner.ts";
import type { SigveloButton } from "src/components/button/button.ts";
import type { SigveloButtonGroup } from "src/components/button-group/button-group.ts";
import type { SigveloCallout } from "src/components/callout/callout.ts";
import type { SigveloCard } from "src/components/card/card.ts";
import type { SigveloCarouselItem } from "src/components/carousel-item/carousel-item.ts";
import type { SigveloCarousel } from "src/components/carousel/carousel.ts";
import type { SigveloCheckbox } from "src/components/checkbox/checkbox.ts";
import type { SigveloCheckboxGroup } from "src/components/checkbox-group/checkbox-group.ts";
import type { SigveloCopy } from "src/components/copy/copy.ts";
import type { SigveloTooltip } from "src/components/tooltip/tooltip.ts";
import type { SigveloSlider } from "src/components/slider/slider.ts";
import type { SigveloTextField } from "src/components/text-field/text-field.ts";
import type { SigveloColorPicker } from "src/components/color-picker/color-picker.ts";
import type { SigveloColorInput } from "src/components/color-input/color-input.ts";
import type { SigveloComboboxItem } from "src/components/combobox-item/combobox-item.ts";
import type { SigveloCombobox } from "src/components/combobox/combobox.ts";
import type { SigveloComparison } from "src/components/comparison/comparison.ts";
import type { SigveloDate } from "src/components/date/date.ts";
import type {
  SigveloDataTable,
  SigveloRowSelectEvent,
} from "src/components/data-table/data-table.ts";
import type { SigveloDivider } from "src/components/divider/divider.ts";
import type { SigveloDropdownItem } from "src/components/dropdown-item/dropdown-item.ts";
import type { SigveloDropdown } from "src/components/dropdown/dropdown.ts";
import type { SigveloEmptyState } from "src/components/empty-state/empty-state.ts";
import type { SigveloEmptyResult } from "src/components/empty-result/empty-result.ts";
import type { SigveloExpander } from "src/components/expander/expander.ts";
import type { SigveloField } from "src/components/field/field.ts";
import type { SigveloFileInput } from "src/components/file-input/file-input.ts";
import type {
  SigveloFilterBar,
  SigveloFilterChangeEvent,
} from "src/components/filter-bar/filter-bar.ts";
import type { SigveloFormSection } from "src/components/form-section/form-section.ts";
import type { SigveloInclude } from "src/components/include/include.ts";
import type { SigveloInfiniteScroller } from "src/components/infinite-scroller/infinite-scroller.ts";
import type { SigveloIntersectionObserver } from "src/components/intersection-observer/intersection-observer.ts";
import type { SigveloListboxItem } from "src/components/listbox-item/listbox-item.ts";
import type { SigveloListbox } from "src/components/listbox/listbox.ts";
import type { SigveloLoremIpsum } from "src/components/lorem-ipsum/lorem-ipsum.ts";
import type { SigveloMeter } from "src/components/meter/meter.ts";
import type { SigveloMetric } from "src/components/metric/metric.ts";
import type { SigveloMetricGrid } from "src/components/metric-grid/metric-grid.ts";
import type { SigveloMutationObserver } from "src/components/mutation-observer/mutation-observer.ts";
import type { SigveloNavicon } from "src/components/navicon/navicon.ts";
import type { SigveloNumber } from "src/components/number/number.ts";
import type { SigveloNumberField } from "src/components/number-field/number-field.ts";
import type { SigveloPagination } from "src/components/pagination/pagination.ts";
import type { SigveloPopover } from "src/components/popover/popover.ts";
import type { SigveloPreviewCard } from "src/components/preview-card/preview-card.ts";
import type { SigveloProgress } from "src/components/progress/progress.ts";
import type { SigveloRadioItem } from "src/components/radio-item/radio-item.ts";
import type { SigveloRadio } from "src/components/radio/radio.ts";
import type { SigveloRandomContent } from "src/components/random-content/random-content.ts";
import type { SigveloRating } from "src/components/rating/rating.ts";
import type { SigveloResizeObserver } from "src/components/resize-observer/resize-observer.ts";
import type { SigveloScrollArea } from "src/components/scroll-area/scroll-area.ts";
import type { SigveloScroller } from "src/components/scroller/scroller.ts";
import type { SigveloSearchList } from "src/components/search-list/search-list.ts";
import type { SigveloSelect } from "src/components/select/select.ts";
import type { SigveloSelectionSummary } from "src/components/selection-summary/selection-summary.ts";
import type { SigveloShare } from "src/components/share/share.ts";
import type { SigveloSlideActivator } from "src/components/slide-activator/slide-activator.ts";
import type { SigveloSparkline } from "src/components/sparkline/sparkline.ts";
import type { SigveloSplitter } from "src/components/splitter/splitter.ts";
import type { SigveloSwitch } from "src/components/switch/switch.ts";
import type { SigveloTab } from "src/components/tab/tab.ts";
import type { SigveloTabPanel } from "src/components/tab-panel/tab-panel.ts";
import type { SigveloTabList } from "src/components/tab-list/tab-list.ts";
import type { SigveloTextArea } from "src/components/text-area/text-area.ts";
import type { SigveloTextMask } from "src/components/text-mask/text-mask.ts";
import type { SigveloTimedContent } from "src/components/timed-content/timed-content.ts";
import type { SigveloToastItem } from "src/components/toast-item/toast-item.ts";
import type { SigveloTransitionGroup } from "src/components/transition-group/transition-group.ts";
import type { SigveloToast } from "src/components/toast/toast.ts";
import type { SigveloToggleIcon } from "src/components/toggle-icon/toggle-icon.ts";
import type { SigveloToggleTag } from "src/components/toggle-tag/toggle-tag.ts";
import type { SigveloToolbar } from "src/components/toolbar/toolbar.ts";
import type { SigveloZoomableFrame } from "src/components/zoomable-frame/zoomable-frame.ts";

/**
 * This type can be used to create scoped tags for your components.
 *
 * Usage:
 *
 * ```ts
 * import type { ScopedElements } from "path/to/library/jsx-integration";
 *
 * declare module "my-library" {
 *   namespace JSX {
 *     interface IntrinsicElements
 *       extends ScopedElements<'test-', ''> {}
 *   }
 * }
 * ```
 *
 * @deprecated Runtime scoped elements result in duplicate types and can confusing for developers. It is recommended to use the `prefix` and `suffix` options to generate new types instead.
 */
export type ScopedElements<
  Prefix extends string = "",
  Suffix extends string = ""
> = {
  [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
};

/**
 * A generic type for strongly typing custom events with their targets
 * @template T - The type of the event target (extends EventTarget)
 * @template D - The type of the detail payload for the custom event
 */
type TypedEvent<T extends EventTarget, E = Event> = E & {
  target: T;
};

type BaseProps<T extends HTMLElement> = {
  /** Content added between the opening and closing tags of the element */
  children?: any | undefined;
  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
  class?: string | undefined;
  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
  className?: string | undefined;
  /** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
  classList?: Record<string, boolean | undefined> | undefined;
  /** Specifies the text direction of the element. */
  dir?: "ltr" | "rtl" | undefined;
  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
  exportparts?: string | undefined;
  /** For <label> and <output>, lets you associate the label with some control. */
  htmlFor?: string | undefined;
  /** Specifies whether the element should be hidden. */
  hidden?: boolean | string | undefined;
  /** A unique identifier for the element. */
  id?: string | undefined;
  /** Keys tell React which array item each component corresponds to */
  key?: string | number | undefined;
  /** Specifies the language of the element. */
  lang?: string | undefined;
  /** Defines the element's semantic role for accessibility APIs. */
  role?: string | undefined;
  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
  part?: string | undefined;
  /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
  ref?: (T | ((e: T) => void)) | undefined;
  /** Adds a reference for a custom element slot */
  slot?: string | undefined;
  /** Prop for setting inline styles */
  style?: Record<string, string | number> | undefined;
  /** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
  tabIndex?: number | undefined;
  /** Specifies the tooltip text for the element. */
  title?: string | undefined;
  /** Passing 'no' excludes the element content from being translated. */
  translate?: "yes" | "no" | undefined;
  /** The popover global attribute is used to designate an element as a popover element. */
  popover?: "auto" | "hint" | "manual" | undefined;
  /** Turns an element element into a popover control button; takes the ID of the popover element to control as its value. */
  popovertarget?: "top" | "bottom" | "left" | "right" | "auto" | undefined;
  /** Specifies the action to be performed on a popover element being controlled by a control element. */
  popovertargetaction?: "show" | "hide" | "toggle" | undefined;
};

type BaseEvents = {};

/** `SigveloIcon` component event */
export type SigveloIconElementEvent<E = Event> = TypedEvent<SigveloIcon, E>;

export type SigveloIconProps = {
  /** The name of the icon library to use. */
  library?: SigveloIcon["library"] | undefined;
  /** The icon family to use for this icon, e.g. `filled` or `outline`. */
  family?: SigveloIcon["family"] | undefined;
  /** The name of the icon to render. */
  name?: SigveloIcon["name"] | undefined;
  /** A label to use for assistive devices. If omitted, the icon will be considered presentational. */
  label?: SigveloIcon["label"] | undefined;
  /** Flips the icon horizontally. */
  "flip-x"?: SigveloIcon["flipX"] | undefined;
  /** Flips the icon horizontally. */
  flipX?: SigveloIcon["flipX"] | undefined;
  /** Flips the icon vertically. */
  "flip-y"?: SigveloIcon["flipY"] | undefined;
  /** Flips the icon vertically. */
  flipY?: SigveloIcon["flipY"] | undefined;
  /** Rotates the icon the specified number of degrees. */
  rotate?: SigveloIcon["rotate"] | undefined;
  /**  */
  svg?: SigveloIcon["svg"] | undefined;

  /** The icon has reloaded and rendered. This event does not bubble. */
  "onsigvelo-loaded"?: ((e: SigveloIconElementEvent) => void) | undefined;
  /** The icon failed to load. This event does not bubble. */
  "onsigvelo-load-error"?: ((e: SigveloIconElementEvent) => void) | undefined;
};

export type SigveloIconSolidJsProps = {
  /** The name of the icon library to use. */
  "prop:library"?: SigveloIcon["library"] | undefined;
  /** The icon family to use for this icon, e.g. `filled` or `outline`. */
  "prop:family"?: SigveloIcon["family"] | undefined;
  /** The name of the icon to render. */
  "prop:name"?: SigveloIcon["name"] | undefined;
  /** A label to use for assistive devices. If omitted, the icon will be considered presentational. */
  "prop:label"?: SigveloIcon["label"] | undefined;
  /** Flips the icon horizontally. */
  "bool:flip-x"?: SigveloIcon["flipX"] | undefined;
  /** Flips the icon horizontally. */
  "prop:flipX"?: SigveloIcon["flipX"] | undefined;
  /** Flips the icon vertically. */
  "bool:flip-y"?: SigveloIcon["flipY"] | undefined;
  /** Flips the icon vertically. */
  "prop:flipY"?: SigveloIcon["flipY"] | undefined;
  /** Rotates the icon the specified number of degrees. */
  "prop:rotate"?: SigveloIcon["rotate"] | undefined;
  /**  */
  "prop:svg"?: SigveloIcon["svg"] | undefined;
  /** The icon has reloaded and rendered. This event does not bubble. */
  "on:sigvelo-loaded"?: ((e: SigveloIconElementEvent) => void) | undefined;
  /** The icon failed to load. This event does not bubble. */
  "on:sigvelo-load-error"?: ((e: SigveloIconElementEvent) => void) | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloAccordionItemProps = {
  /**  */
  expanded?: SigveloAccordionItem["expanded"] | undefined;
  /** The accordion item's label. If you need to provide HTML in the label, use the `label` slot instead. */
  label?: SigveloAccordionItem["label"] | undefined;
  /** The accordion item's variant. This will be set automatically by the accordion controller. */
  variant?: SigveloAccordionItem["variant"] | undefined;
  /** The position of the expand/collapse icon. This will be set automatically by the accordion controller. */
  "icon-placement"?: SigveloAccordionItem["iconPlacement"] | undefined;
  /** The position of the expand/collapse icon. This will be set automatically by the accordion controller. */
  iconPlacement?: SigveloAccordionItem["iconPlacement"] | undefined;
  /** Disables the accordion item. */
  disabled?: SigveloAccordionItem["disabled"] | undefined;
  /**  */
  body?: SigveloAccordionItem["body"] | undefined;
  /**  */
  content?: SigveloAccordionItem["content"] | undefined;
  /**  */
  header?: SigveloAccordionItem["header"] | undefined;
};

export type SigveloAccordionItemSolidJsProps = {
  /**  */
  "prop:expanded"?: SigveloAccordionItem["expanded"] | undefined;
  /** The accordion item's label. If you need to provide HTML in the label, use the `label` slot instead. */
  "prop:label"?: SigveloAccordionItem["label"] | undefined;
  /** The accordion item's variant. This will be set automatically by the accordion controller. */
  "prop:variant"?: SigveloAccordionItem["variant"] | undefined;
  /** The position of the expand/collapse icon. This will be set automatically by the accordion controller. */
  "attr:icon-placement"?: SigveloAccordionItem["iconPlacement"] | undefined;
  /** The position of the expand/collapse icon. This will be set automatically by the accordion controller. */
  "prop:iconPlacement"?: SigveloAccordionItem["iconPlacement"] | undefined;
  /** Disables the accordion item. */
  "prop:disabled"?: SigveloAccordionItem["disabled"] | undefined;
  /**  */
  "prop:body"?: SigveloAccordionItem["body"] | undefined;
  /**  */
  "prop:content"?: SigveloAccordionItem["content"] | undefined;
  /**  */
  "prop:header"?: SigveloAccordionItem["header"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloAccordion` component event */
export type SigveloAccordionElementEvent<E = Event> = TypedEvent<
  SigveloAccordion,
  E
>;

export type SigveloAccordionProps = {
  /** Allows more than one accordion item to be expanded at the same time. */
  multiple?: SigveloAccordion["multiple"] | undefined;
  /** Determines the accordion's variant. */
  variant?: SigveloAccordion["variant"] | undefined;
  /** Determines which side of the accordion item the expand/collapse icon shows. */
  "icon-placement"?: SigveloAccordion["iconPlacement"] | undefined;
  /** Determines which side of the accordion item the expand/collapse icon shows. */
  iconPlacement?: SigveloAccordion["iconPlacement"] | undefined;

  /** Emitted when an accordion item is instructed to expand but before it is shown. Calling `event.preventDefault()` will prevent the item from expanding. `event.detail.item` will contain the expanding item. */
  "onsigvelo-before-expand"?:
    | ((e: SigveloAccordionElementEvent) => void)
    | undefined;
  /** Emitted after an accordion item has been expanded. `event.detail.item` will contain the expanded item. */
  "onsigvelo-expand"?: ((e: SigveloAccordionElementEvent) => void) | undefined;
  /** Emitted when an accordion item is instructed to collapse but before it is hidden. Calling `event.preventDefault()` will prevent the item from collapsing. `event.detail.item` will contain the collapsing item. */
  "onsigvelo-before-collapse"?:
    | ((e: SigveloAccordionElementEvent) => void)
    | undefined;
  /** Emitted after an accordion item has been collapsed. `event.detail.item` will contain the collapsed item. */
  "onsigvelo-collapse"?:
    | ((e: SigveloAccordionElementEvent) => void)
    | undefined;
};

export type SigveloAccordionSolidJsProps = {
  /** Allows more than one accordion item to be expanded at the same time. */
  "prop:multiple"?: SigveloAccordion["multiple"] | undefined;
  /** Determines the accordion's variant. */
  "prop:variant"?: SigveloAccordion["variant"] | undefined;
  /** Determines which side of the accordion item the expand/collapse icon shows. */
  "attr:icon-placement"?: SigveloAccordion["iconPlacement"] | undefined;
  /** Determines which side of the accordion item the expand/collapse icon shows. */
  "prop:iconPlacement"?: SigveloAccordion["iconPlacement"] | undefined;
  /** Emitted when an accordion item is instructed to expand but before it is shown. Calling `event.preventDefault()` will prevent the item from expanding. `event.detail.item` will contain the expanding item. */
  "on:sigvelo-before-expand"?:
    | ((e: SigveloAccordionElementEvent) => void)
    | undefined;
  /** Emitted after an accordion item has been expanded. `event.detail.item` will contain the expanded item. */
  "on:sigvelo-expand"?: ((e: SigveloAccordionElementEvent) => void) | undefined;
  /** Emitted when an accordion item is instructed to collapse but before it is hidden. Calling `event.preventDefault()` will prevent the item from collapsing. `event.detail.item` will contain the collapsing item. */
  "on:sigvelo-before-collapse"?:
    | ((e: SigveloAccordionElementEvent) => void)
    | undefined;
  /** Emitted after an accordion item has been collapsed. `event.detail.item` will contain the collapsed item. */
  "on:sigvelo-collapse"?:
    | ((e: SigveloAccordionElementEvent) => void)
    | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloActionBarProps = {
  /** Alignment of the slotted content. */
  align?: SigveloActionBar["align"] | undefined;
};

export type SigveloActionBarSolidJsProps = {
  /** Alignment of the slotted content. */
  "prop:align"?: SigveloActionBar["align"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloDialog` component event */
export type SigveloDialogElementEvent<E = Event> = TypedEvent<SigveloDialog, E>;

export type SigveloDialogProps = {
  /** Opens or closes the dialog. */
  open?: SigveloDialog["open"] | undefined;
  /** An accessible name used when no visible heading is provided in the `header` slot. */
  label?: SigveloDialog["label"] | undefined;
  /** A concise description of the dialog. For rich content, use the `description` slot. */
  description?: SigveloDialog["description"] | undefined;
  /** By default, the dialog will appear in the center of the screen. Changing the placement will cause the dialog to
slide in from the side of the screen like a drawer. */
  placement?: SigveloDialog["placement"] | undefined;
  /** Allows the dialog to be closed when clicking outside of it. */
  "light-dismiss"?: SigveloDialog["lightDismiss"] | undefined;
  /** Allows the dialog to be closed when clicking outside of it. */
  lightDismiss?: SigveloDialog["lightDismiss"] | undefined;
  /** For dialogs that scroll, this will reset the scroll position when the dialog closes. */
  "reset-scroll"?: SigveloDialog["resetScroll"] | undefined;
  /** For dialogs that scroll, this will reset the scroll position when the dialog closes. */
  resetScroll?: SigveloDialog["resetScroll"] | undefined;

  /** Emitted when the dialog is instructed to open but before it is shown. Calling `event.preventDefault()` will prevent the dialog from opening. */
  "onsigvelo-before-open"?:
    | ((e: SigveloDialogElementEvent) => void)
    | undefined;
  /** Emitted after the dialog has been opened and the show animation has completed. */
  "onsigvelo-open"?: ((e: SigveloDialogElementEvent) => void) | undefined;
  /** Emitted when the dialog is dismissed. Calling `event.preventDefault()` will prevent the dialog from closing and show a brief animation.<br><br>You can check `event.detail.source` to see which element triggered the dialog to close, such as a button. If the source is the dialog itself, the user has pressed [[Escape]] or the dialog has been closed programmatically. */
  "onsigvelo-before-close"?:
    | ((e: SigveloDialogElementEvent) => void)
    | undefined;
  /** Emitted after the dialog has been closed and the hide animation has completed. */
  "onsigvelo-close"?: ((e: SigveloDialogElementEvent) => void) | undefined;
};

export type SigveloDialogSolidJsProps = {
  /** Opens or closes the dialog. */
  "prop:open"?: SigveloDialog["open"] | undefined;
  /** An accessible name used when no visible heading is provided in the `header` slot. */
  "prop:label"?: SigveloDialog["label"] | undefined;
  /** A concise description of the dialog. For rich content, use the `description` slot. */
  "prop:description"?: SigveloDialog["description"] | undefined;
  /** By default, the dialog will appear in the center of the screen. Changing the placement will cause the dialog to
slide in from the side of the screen like a drawer. */
  "prop:placement"?: SigveloDialog["placement"] | undefined;
  /** Allows the dialog to be closed when clicking outside of it. */
  "bool:light-dismiss"?: SigveloDialog["lightDismiss"] | undefined;
  /** Allows the dialog to be closed when clicking outside of it. */
  "prop:lightDismiss"?: SigveloDialog["lightDismiss"] | undefined;
  /** For dialogs that scroll, this will reset the scroll position when the dialog closes. */
  "bool:reset-scroll"?: SigveloDialog["resetScroll"] | undefined;
  /** For dialogs that scroll, this will reset the scroll position when the dialog closes. */
  "prop:resetScroll"?: SigveloDialog["resetScroll"] | undefined;
  /** Emitted when the dialog is instructed to open but before it is shown. Calling `event.preventDefault()` will prevent the dialog from opening. */
  "on:sigvelo-before-open"?:
    | ((e: SigveloDialogElementEvent) => void)
    | undefined;
  /** Emitted after the dialog has been opened and the show animation has completed. */
  "on:sigvelo-open"?: ((e: SigveloDialogElementEvent) => void) | undefined;
  /** Emitted when the dialog is dismissed. Calling `event.preventDefault()` will prevent the dialog from closing and show a brief animation.<br><br>You can check `event.detail.source` to see which element triggered the dialog to close, such as a button. If the source is the dialog itself, the user has pressed [[Escape]] or the dialog has been closed programmatically. */
  "on:sigvelo-before-close"?:
    | ((e: SigveloDialogElementEvent) => void)
    | undefined;
  /** Emitted after the dialog has been closed and the hide animation has completed. */
  "on:sigvelo-close"?: ((e: SigveloDialogElementEvent) => void) | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloAlertDialog` component event */
export type SigveloAlertDialogElementEvent<E = Event> = TypedEvent<
  SigveloAlertDialog,
  E
>;

export type SigveloAlertDialogProps = {
  /** Opens or closes the alert dialog. */
  open?: SigveloAlertDialog["open"] | undefined;

  /** Emitted when the cancel action is triggered. */
  "onsigvelo-cancel"?:
    | ((e: SigveloAlertDialogElementEvent) => void)
    | undefined;
  /** Emitted when the confirm action is triggered. */
  "onsigvelo-confirm"?:
    | ((e: SigveloAlertDialogElementEvent) => void)
    | undefined;
};

export type SigveloAlertDialogSolidJsProps = {
  /** Opens or closes the alert dialog. */
  "prop:open"?: SigveloAlertDialog["open"] | undefined;
  /** Emitted when the cancel action is triggered. */
  "on:sigvelo-cancel"?:
    | ((e: SigveloAlertDialogElementEvent) => void)
    | undefined;
  /** Emitted when the confirm action is triggered. */
  "on:sigvelo-confirm"?:
    | ((e: SigveloAlertDialogElementEvent) => void)
    | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloAvatarProps = {
  /** An accessible label for the avatar. This won't be visible, but it will be read to assistive devices so you should
always include one. */
  label?: SigveloAvatar["label"] | undefined;
  /** A string of characters to display in the avatar when an image isn't available or fails to load. Up to five
characters are supported. */
  characters?: SigveloAvatar["characters"] | undefined;
  /** The URL of an image to display in the avatar. Non-square images will be clipped to fit. */
  image?: SigveloAvatar["image"] | undefined;
  /**  */
  hasImageLoaded?: SigveloAvatar["hasImageLoaded"] | undefined;
};

export type SigveloAvatarSolidJsProps = {
  /** An accessible label for the avatar. This won't be visible, but it will be read to assistive devices so you should
always include one. */
  "prop:label"?: SigveloAvatar["label"] | undefined;
  /** A string of characters to display in the avatar when an image isn't available or fails to load. Up to five
characters are supported. */
  "prop:characters"?: SigveloAvatar["characters"] | undefined;
  /** The URL of an image to display in the avatar. Non-square images will be clipped to fit. */
  "prop:image"?: SigveloAvatar["image"] | undefined;
  /**  */
  "prop:hasImageLoaded"?: SigveloAvatar["hasImageLoaded"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloBadgeProps = {
  /** The type of badge to draw. */
  color?: SigveloBadge["color"] | undefined;
  /** Determines the badges's variant. */
  variant?: SigveloBadge["variant"] | undefined;
  /** Draws attention to the badge using an animation. */
  attention?: SigveloBadge["attention"] | undefined;
};

export type SigveloBadgeSolidJsProps = {
  /** The type of badge to draw. */
  "prop:color"?: SigveloBadge["color"] | undefined;
  /** Determines the badges's variant. */
  "prop:variant"?: SigveloBadge["variant"] | undefined;
  /** Draws attention to the badge using an animation. */
  "prop:attention"?: SigveloBadge["attention"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloBreadcrumbProps = {};

export type SigveloBreadcrumbSolidJsProps = {
  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloBreadcrumbItemProps = {
  /** Indicates that this item is the current page or view. */
  current?: SigveloBreadcrumbItem["current"] | undefined;
  /** The URL the breadcrumb item should point to. If omitted, the breadcrumb item will be drawn as a `<span>` instead of
a link, enabling alternate content such as dropdowns. */
  href?: SigveloBreadcrumbItem["href"] | undefined;
  /** Opens the link in the specified target. */
  target?: SigveloBreadcrumbItem["target"] | undefined;
  /** Sets the link's `rel` attribute. Note that the default value is `noreferrer noopener`, meaning you might need to
set it to an empty string if you're also using `target`. */
  rel?: SigveloBreadcrumbItem["rel"] | undefined;
};

export type SigveloBreadcrumbItemSolidJsProps = {
  /** Indicates that this item is the current page or view. */
  "prop:current"?: SigveloBreadcrumbItem["current"] | undefined;
  /** The URL the breadcrumb item should point to. If omitted, the breadcrumb item will be drawn as a `<span>` instead of
a link, enabling alternate content such as dropdowns. */
  "prop:href"?: SigveloBreadcrumbItem["href"] | undefined;
  /** Opens the link in the specified target. */
  "prop:target"?: SigveloBreadcrumbItem["target"] | undefined;
  /** Sets the link's `rel` attribute. Note that the default value is `noreferrer noopener`, meaning you might need to
set it to an empty string if you're also using `target`. */
  "prop:rel"?: SigveloBreadcrumbItem["rel"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloSpinnerProps = {
  /** A custom label for screen readers. */
  label?: SigveloSpinner["label"] | undefined;
};

export type SigveloSpinnerSolidJsProps = {
  /** A custom label for screen readers. */
  "prop:label"?: SigveloSpinner["label"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloButton` component event */
export type SigveloButtonElementEvent<E = Event> = TypedEvent<SigveloButton, E>;

export type SigveloButtonProps = {
  /** Determines the button's variant. */
  variant?: SigveloButton["variant"] | undefined;
  /** The semantic color intent of the button. */
  color?: SigveloButton["color"] | undefined;
  /** Disables the button. */
  disabled?: SigveloButton["disabled"] | undefined;
  /** Draws the button in a loading state. */
  loading?: SigveloButton["loading"] | undefined;
  /** Turns the button into a two-state toggle button. Clicking once will turn it on. Clicking again will turn it off.
Cannot be used with links buttons or submit buttons. */
  toggle?: SigveloButton["toggle"] | undefined;
  /** The button's size. */
  size?: SigveloButton["size"] | undefined;
  /** To create an icon button, slot an icon into the button's default slot and set this attribute to an appropriate
label. The label won't be visible, but it will be available to assistive devices. */
  "icon-label"?: SigveloButton["iconLabel"] | undefined;
  /** To create an icon button, slot an icon into the button's default slot and set this attribute to an appropriate
label. The label won't be visible, but it will be available to assistive devices. */
  iconLabel?: SigveloButton["iconLabel"] | undefined;
  /** Draws the button in a pill shape. */
  pill?: SigveloButton["pill"] | undefined;
  /** Determines the button's type. */
  type?: SigveloButton["type"] | undefined;
  /** The name to submit when the button is used to submit the form. */
  name?: SigveloButton["name"] | undefined;
  /** The value to submit when the button is used to submit the form. */
  value?: SigveloButton["value"] | undefined;
  /** When true, the button will be rendered with a caret to indicate a dropdown menu. */
  "with-caret"?: SigveloButton["withCaret"] | undefined;
  /** When true, the button will be rendered with a caret to indicate a dropdown menu. */
  withCaret?: SigveloButton["withCaret"] | undefined;
  /** Set this to render the button as an `<a>` tag instead of a `<button>`. The button will act as a link. When this is
set, form attributes and features will not work. */
  href?: SigveloButton["href"] | undefined;
  /** Opens the link in the specified target. Only works with link buttons. */
  target?: SigveloButton["target"] | undefined;
  /** Sets the link's `rel` attribute. Only works with link buttons. When linking to an external domain, you should
probably set this to `noreferrer noopener`. */
  rel?: SigveloButton["rel"] | undefined;
  /** Sets the link's `download` attribute, causing the linked file to be downloaded. Only works with link buttons. */
  download?: SigveloButton["download"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an ID of a form in the same document or shadow root. */
  form?: SigveloButton["form"] | undefined;
  /** Overrides the containing form's `action` attribute. */
  formaction?: SigveloButton["formAction"] | undefined;
  /** Overrides the containing form's `action` attribute. */
  formAction?: SigveloButton["formAction"] | undefined;
  /** Overrides the containing form's `enctype` attribute. */
  formenctype?: SigveloButton["formEnctype"] | undefined;
  /** Overrides the containing form's `enctype` attribute. */
  formEnctype?: SigveloButton["formEnctype"] | undefined;
  /** Overrides the containing form's `method` attribute. */
  formmethod?: SigveloButton["formMethod"] | undefined;
  /** Overrides the containing form's `method` attribute. */
  formMethod?: SigveloButton["formMethod"] | undefined;
  /** Overrides the containing form's `novalidate` attribute. */
  formnovalidate?: SigveloButton["formNoValidate"] | undefined;
  /** Overrides the containing form's `novalidate` attribute. */
  formNoValidate?: SigveloButton["formNoValidate"] | undefined;
  /** Overrides the containing form's `target` attribute.

`string & {}` keeps the four browsing-context keywords in autocomplete
while still accepting an arbitrary frame name; a bare `| string` would
absorb the literals and offer no suggestions at all. */
  formtarget?: SigveloButton["formTarget"] | undefined;
  /** Overrides the containing form's `target` attribute.

`string & {}` keeps the four browsing-context keywords in autocomplete
while still accepting an arbitrary frame name; a bare `| string` would
absorb the literals and offer no suggestions at all. */
  formTarget?: SigveloButton["formTarget"] | undefined;

  /** Emitted when the button loses focus. This event does not bubble. */
  "onsigvelo-blur"?: ((e: SigveloButtonElementEvent) => void) | undefined;
  /** Emitted when the button is pressed and held by tapping or with the mouse. You can look at `event.detail.originalEvent.type` to see the type of event that initiated the long press. */
  "onsigvelo-long-press"?: ((e: SigveloButtonElementEvent) => void) | undefined;
  /** Emitted when the button receives focus. This event does not bubble. */
  "onsigvelo-focus"?: ((e: SigveloButtonElementEvent) => void) | undefined;
};

export type SigveloButtonSolidJsProps = {
  /** Determines the button's variant. */
  "prop:variant"?: SigveloButton["variant"] | undefined;
  /** The semantic color intent of the button. */
  "prop:color"?: SigveloButton["color"] | undefined;
  /** Disables the button. */
  "prop:disabled"?: SigveloButton["disabled"] | undefined;
  /** Draws the button in a loading state. */
  "prop:loading"?: SigveloButton["loading"] | undefined;
  /** Turns the button into a two-state toggle button. Clicking once will turn it on. Clicking again will turn it off.
Cannot be used with links buttons or submit buttons. */
  "prop:toggle"?: SigveloButton["toggle"] | undefined;
  /** The button's size. */
  "prop:size"?: SigveloButton["size"] | undefined;
  /** To create an icon button, slot an icon into the button's default slot and set this attribute to an appropriate
label. The label won't be visible, but it will be available to assistive devices. */
  "attr:icon-label"?: SigveloButton["iconLabel"] | undefined;
  /** To create an icon button, slot an icon into the button's default slot and set this attribute to an appropriate
label. The label won't be visible, but it will be available to assistive devices. */
  "prop:iconLabel"?: SigveloButton["iconLabel"] | undefined;
  /** Draws the button in a pill shape. */
  "prop:pill"?: SigveloButton["pill"] | undefined;
  /** Determines the button's type. */
  "prop:type"?: SigveloButton["type"] | undefined;
  /** The name to submit when the button is used to submit the form. */
  "prop:name"?: SigveloButton["name"] | undefined;
  /** The value to submit when the button is used to submit the form. */
  "prop:value"?: SigveloButton["value"] | undefined;
  /** When true, the button will be rendered with a caret to indicate a dropdown menu. */
  "bool:with-caret"?: SigveloButton["withCaret"] | undefined;
  /** When true, the button will be rendered with a caret to indicate a dropdown menu. */
  "prop:withCaret"?: SigveloButton["withCaret"] | undefined;
  /** Set this to render the button as an `<a>` tag instead of a `<button>`. The button will act as a link. When this is
set, form attributes and features will not work. */
  "prop:href"?: SigveloButton["href"] | undefined;
  /** Opens the link in the specified target. Only works with link buttons. */
  "prop:target"?: SigveloButton["target"] | undefined;
  /** Sets the link's `rel` attribute. Only works with link buttons. When linking to an external domain, you should
probably set this to `noreferrer noopener`. */
  "prop:rel"?: SigveloButton["rel"] | undefined;
  /** Sets the link's `download` attribute, causing the linked file to be downloaded. Only works with link buttons. */
  "prop:download"?: SigveloButton["download"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an ID of a form in the same document or shadow root. */
  "prop:form"?: SigveloButton["form"] | undefined;
  /** Overrides the containing form's `action` attribute. */
  "attr:formaction"?: SigveloButton["formAction"] | undefined;
  /** Overrides the containing form's `action` attribute. */
  "prop:formAction"?: SigveloButton["formAction"] | undefined;
  /** Overrides the containing form's `enctype` attribute. */
  "attr:formenctype"?: SigveloButton["formEnctype"] | undefined;
  /** Overrides the containing form's `enctype` attribute. */
  "prop:formEnctype"?: SigveloButton["formEnctype"] | undefined;
  /** Overrides the containing form's `method` attribute. */
  "attr:formmethod"?: SigveloButton["formMethod"] | undefined;
  /** Overrides the containing form's `method` attribute. */
  "prop:formMethod"?: SigveloButton["formMethod"] | undefined;
  /** Overrides the containing form's `novalidate` attribute. */
  "bool:formnovalidate"?: SigveloButton["formNoValidate"] | undefined;
  /** Overrides the containing form's `novalidate` attribute. */
  "prop:formNoValidate"?: SigveloButton["formNoValidate"] | undefined;
  /** Overrides the containing form's `target` attribute.

`string & {}` keeps the four browsing-context keywords in autocomplete
while still accepting an arbitrary frame name; a bare `| string` would
absorb the literals and offer no suggestions at all. */
  "attr:formtarget"?: SigveloButton["formTarget"] | undefined;
  /** Overrides the containing form's `target` attribute.

`string & {}` keeps the four browsing-context keywords in autocomplete
while still accepting an arbitrary frame name; a bare `| string` would
absorb the literals and offer no suggestions at all. */
  "prop:formTarget"?: SigveloButton["formTarget"] | undefined;
  /** Emitted when the button loses focus. This event does not bubble. */
  "on:sigvelo-blur"?: ((e: SigveloButtonElementEvent) => void) | undefined;
  /** Emitted when the button is pressed and held by tapping or with the mouse. You can look at `event.detail.originalEvent.type` to see the type of event that initiated the long press. */
  "on:sigvelo-long-press"?:
    | ((e: SigveloButtonElementEvent) => void)
    | undefined;
  /** Emitted when the button receives focus. This event does not bubble. */
  "on:sigvelo-focus"?: ((e: SigveloButtonElementEvent) => void) | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloButtonGroupProps = {
  /** An accessible label for the tab list. This won't be visible, but it will be read to assistive devices so it's
usually a good idea to include one. */
  label?: SigveloButtonGroup["label"] | undefined;
  /** The button group's orientation. */
  orientation?: SigveloButtonGroup["orientation"] | undefined;
};

export type SigveloButtonGroupSolidJsProps = {
  /** An accessible label for the tab list. This won't be visible, but it will be read to assistive devices so it's
usually a good idea to include one. */
  "prop:label"?: SigveloButtonGroup["label"] | undefined;
  /** The button group's orientation. */
  "prop:orientation"?: SigveloButtonGroup["orientation"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloCalloutProps = {
  /** The type of callout to render. */
  color?: SigveloCallout["color"] | undefined;
};

export type SigveloCalloutSolidJsProps = {
  /** The type of callout to render. */
  "prop:color"?: SigveloCallout["color"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloCardProps = {
  /** Determines the card's variant. */
  variant?: SigveloCard["variant"] | undefined;
  /** The card's orientation. */
  orientation?: SigveloCard["orientation"] | undefined;
};

export type SigveloCardSolidJsProps = {
  /** Determines the card's variant. */
  "prop:variant"?: SigveloCard["variant"] | undefined;
  /** The card's orientation. */
  "prop:orientation"?: SigveloCard["orientation"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloCarouselItemProps = {
  /** An optional name for the carousel item so you can reference it with the `active-name` attribute. */
  name?: SigveloCarouselItem["name"] | undefined;
};

export type SigveloCarouselItemSolidJsProps = {
  /** An optional name for the carousel item so you can reference it with the `active-name` attribute. */
  "prop:name"?: SigveloCarouselItem["name"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloCarousel` component event */
export type SigveloCarouselElementEvent<E = Event> = TypedEvent<
  SigveloCarousel,
  E
>;

export type SigveloCarouselProps = {
  /** A custom label for the carousel. This won't be visible, but it will be read to assistive devices. */
  label?: SigveloCarousel["label"] | undefined;
  /** The current active item's index. */
  "active-index"?: SigveloCarousel["activeIndex"] | undefined;
  /** The current active item's index. */
  activeIndex?: SigveloCarousel["activeIndex"] | undefined;
  /** The current active item's name. */
  "active-name"?: SigveloCarousel["activeName"] | undefined;
  /** The current active item's name. */
  activeName?: SigveloCarousel["activeName"] | undefined;
  /** Enables looping navigation. When true, prev/next buttons wrap around to the opposite end. */
  loop?: SigveloCarousel["loop"] | undefined;
  /** Hides navigation buttons. */
  "without-nav"?: SigveloCarousel["withoutNav"] | undefined;
  /** Hides navigation buttons. */
  withoutNav?: SigveloCarousel["withoutNav"] | undefined;
  /** Hides pagination dots. */
  "without-pagination"?: SigveloCarousel["withoutPagination"] | undefined;
  /** Hides pagination dots. */
  withoutPagination?: SigveloCarousel["withoutPagination"] | undefined;
  /**  */
  items?: SigveloCarousel["items"] | undefined;
  /**  */
  isScrolling?: SigveloCarousel["isScrolling"] | undefined;
  /**  */
  itemCount?: SigveloCarousel["itemCount"] | undefined;

  /** Emitted when the active item changes and the slide has been fully scrolled into view. */
  "onsigvelo-item-change"?:
    | ((e: SigveloCarouselElementEvent) => void)
    | undefined;
};

export type SigveloCarouselSolidJsProps = {
  /** A custom label for the carousel. This won't be visible, but it will be read to assistive devices. */
  "prop:label"?: SigveloCarousel["label"] | undefined;
  /** The current active item's index. */
  "attr:active-index"?: SigveloCarousel["activeIndex"] | undefined;
  /** The current active item's index. */
  "prop:activeIndex"?: SigveloCarousel["activeIndex"] | undefined;
  /** The current active item's name. */
  "attr:active-name"?: SigveloCarousel["activeName"] | undefined;
  /** The current active item's name. */
  "prop:activeName"?: SigveloCarousel["activeName"] | undefined;
  /** Enables looping navigation. When true, prev/next buttons wrap around to the opposite end. */
  "prop:loop"?: SigveloCarousel["loop"] | undefined;
  /** Hides navigation buttons. */
  "bool:without-nav"?: SigveloCarousel["withoutNav"] | undefined;
  /** Hides navigation buttons. */
  "prop:withoutNav"?: SigveloCarousel["withoutNav"] | undefined;
  /** Hides pagination dots. */
  "bool:without-pagination"?: SigveloCarousel["withoutPagination"] | undefined;
  /** Hides pagination dots. */
  "prop:withoutPagination"?: SigveloCarousel["withoutPagination"] | undefined;
  /**  */
  "prop:items"?: SigveloCarousel["items"] | undefined;
  /**  */
  "prop:isScrolling"?: SigveloCarousel["isScrolling"] | undefined;
  /**  */
  "prop:itemCount"?: SigveloCarousel["itemCount"] | undefined;
  /** Emitted when the active item changes and the slide has been fully scrolled into view. */
  "on:sigvelo-item-change"?:
    | ((e: SigveloCarouselElementEvent) => void)
    | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloCheckbox` component event */
export type SigveloCheckboxElementEvent<E = Event> = TypedEvent<
  SigveloCheckbox,
  E
>;

export type SigveloCheckboxProps = {
  /** The checkbox's label. If you need to provide HTML in the label, use the `label` slot instead. */
  label?: SigveloCheckbox["label"] | undefined;
  /** The checkbox's description. If you need to provide HTML in the description, use the `description` slot instead. */
  description?: SigveloCheckbox["description"] | undefined;
  /** The name of the checkbox. This will be submitted with the form as a name/value pair. */
  name?: SigveloCheckbox["name"] | undefined;
  /** The checkbox's value. */
  value?: SigveloCheckbox["value"] | undefined;
  /** The checkbox's checked state. */
  checked?: SigveloCheckbox["checked"] | undefined;
  /** Puts the checkbox in an indeterminate state. */
  indeterminate?: SigveloCheckbox["indeterminate"] | undefined;
  /** Disables the checkbox. */
  disabled?: SigveloCheckbox["disabled"] | undefined;
  /** The type of checkbox to render. */
  variant?: SigveloCheckbox["variant"] | undefined;
  /** The checkbox's size. */
  size?: SigveloCheckbox["size"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an ID of a form in the same document or shadow root. */
  form?: SigveloCheckbox["form"] | undefined;
  /** Makes the checkbox required. Form submission will not be allowed until the checkbox is checked. */
  required?: SigveloCheckbox["required"] | undefined;
  /**  */
  isInvalid?: SigveloCheckbox["isInvalid"] | undefined;
  /**  */
  hadUserInteraction?: SigveloCheckbox["hadUserInteraction"] | undefined;
  /**  */
  wasSubmitted?: SigveloCheckbox["wasSubmitted"] | undefined;

  /** Emitted when the checkbox loses focus. This event does not bubble. */
  "onsigvelo-blur"?: ((e: SigveloCheckboxElementEvent) => void) | undefined;
  /** Emitted when the user commits changes to the checkbox's value. */
  "onsigvelo-change"?: ((e: SigveloCheckboxElementEvent) => void) | undefined;
  /** Emitted when the checkbox receives focus. This event does not bubble. */
  "onsigvelo-focus"?: ((e: SigveloCheckboxElementEvent) => void) | undefined;
  /** Emitted when the checkbox receives input. */
  "onsigvelo-input"?: ((e: SigveloCheckboxElementEvent) => void) | undefined;
};

export type SigveloCheckboxSolidJsProps = {
  /** The checkbox's label. If you need to provide HTML in the label, use the `label` slot instead. */
  "prop:label"?: SigveloCheckbox["label"] | undefined;
  /** The checkbox's description. If you need to provide HTML in the description, use the `description` slot instead. */
  "prop:description"?: SigveloCheckbox["description"] | undefined;
  /** The name of the checkbox. This will be submitted with the form as a name/value pair. */
  "prop:name"?: SigveloCheckbox["name"] | undefined;
  /** The checkbox's value. */
  "prop:value"?: SigveloCheckbox["value"] | undefined;
  /** The checkbox's checked state. */
  "prop:checked"?: SigveloCheckbox["checked"] | undefined;
  /** Puts the checkbox in an indeterminate state. */
  "prop:indeterminate"?: SigveloCheckbox["indeterminate"] | undefined;
  /** Disables the checkbox. */
  "prop:disabled"?: SigveloCheckbox["disabled"] | undefined;
  /** The type of checkbox to render. */
  "prop:variant"?: SigveloCheckbox["variant"] | undefined;
  /** The checkbox's size. */
  "prop:size"?: SigveloCheckbox["size"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an ID of a form in the same document or shadow root. */
  "prop:form"?: SigveloCheckbox["form"] | undefined;
  /** Makes the checkbox required. Form submission will not be allowed until the checkbox is checked. */
  "prop:required"?: SigveloCheckbox["required"] | undefined;
  /**  */
  "prop:isInvalid"?: SigveloCheckbox["isInvalid"] | undefined;
  /**  */
  "prop:hadUserInteraction"?: SigveloCheckbox["hadUserInteraction"] | undefined;
  /**  */
  "prop:wasSubmitted"?: SigveloCheckbox["wasSubmitted"] | undefined;
  /** Emitted when the checkbox loses focus. This event does not bubble. */
  "on:sigvelo-blur"?: ((e: SigveloCheckboxElementEvent) => void) | undefined;
  /** Emitted when the user commits changes to the checkbox's value. */
  "on:sigvelo-change"?: ((e: SigveloCheckboxElementEvent) => void) | undefined;
  /** Emitted when the checkbox receives focus. This event does not bubble. */
  "on:sigvelo-focus"?: ((e: SigveloCheckboxElementEvent) => void) | undefined;
  /** Emitted when the checkbox receives input. */
  "on:sigvelo-input"?: ((e: SigveloCheckboxElementEvent) => void) | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloCheckboxGroupProps = {
  /** The checkbox's label. If you need to provide HTML in the label, use the `label` slot instead. */
  label?: SigveloCheckboxGroup["label"] | undefined;
  /** The checkbox's description. If you need to provide HTML in the description, use the `description` slot instead. */
  description?: SigveloCheckboxGroup["description"] | undefined;
  /** The orientation of grouped items. */
  orientation?: SigveloCheckboxGroup["orientation"] | undefined;
  /** Indicates at least one option in the checkbox group is required. This just adds a visual indicator. To perform
validation, use the checkbox's `required` attribute and/or `setCustomValidity()` method. */
  required?: SigveloCheckboxGroup["required"] | undefined;
};

export type SigveloCheckboxGroupSolidJsProps = {
  /** The checkbox's label. If you need to provide HTML in the label, use the `label` slot instead. */
  "prop:label"?: SigveloCheckboxGroup["label"] | undefined;
  /** The checkbox's description. If you need to provide HTML in the description, use the `description` slot instead. */
  "prop:description"?: SigveloCheckboxGroup["description"] | undefined;
  /** The orientation of grouped items. */
  "prop:orientation"?: SigveloCheckboxGroup["orientation"] | undefined;
  /** Indicates at least one option in the checkbox group is required. This just adds a visual indicator. To perform
validation, use the checkbox's `required` attribute and/or `setCustomValidity()` method. */
  "prop:required"?: SigveloCheckboxGroup["required"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloCopy` component event */
export type SigveloCopyElementEvent<E = Event> = TypedEvent<SigveloCopy, E>;

export type SigveloCopyProps = {
  /** The text content that will be copied to the clipboard. */
  data?: SigveloCopy["data"] | undefined;
  /** Disables the button. */
  disabled?: SigveloCopy["disabled"] | undefined;
  /** The placement of the feedback animation. */
  "feedback-placement"?: SigveloCopy["feedbackPlacement"] | undefined;
  /** The placement of the feedback animation. */
  feedbackPlacement?: SigveloCopy["feedbackPlacement"] | undefined;

  /** Emitted when the content has been copied. This event does not bubble. You can inspect `event.detail.data` to see the content that was copied. */
  "onsigvelo-copy"?: ((e: SigveloCopyElementEvent) => void) | undefined;
  /** Emitted when the browser refuses to allow the content to be copied. This event does not bubble. You can inspect `event.detail.error` to see the error that occurred. */
  "onsigvelo-copy-error"?: ((e: SigveloCopyElementEvent) => void) | undefined;
};

export type SigveloCopySolidJsProps = {
  /** The text content that will be copied to the clipboard. */
  "prop:data"?: SigveloCopy["data"] | undefined;
  /** Disables the button. */
  "prop:disabled"?: SigveloCopy["disabled"] | undefined;
  /** The placement of the feedback animation. */
  "attr:feedback-placement"?: SigveloCopy["feedbackPlacement"] | undefined;
  /** The placement of the feedback animation. */
  "prop:feedbackPlacement"?: SigveloCopy["feedbackPlacement"] | undefined;
  /** Emitted when the content has been copied. This event does not bubble. You can inspect `event.detail.data` to see the content that was copied. */
  "on:sigvelo-copy"?: ((e: SigveloCopyElementEvent) => void) | undefined;
  /** Emitted when the browser refuses to allow the content to be copied. This event does not bubble. You can inspect `event.detail.error` to see the error that occurred. */
  "on:sigvelo-copy-error"?: ((e: SigveloCopyElementEvent) => void) | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloTooltip` component event */
export type SigveloTooltipElementEvent<E = Event> = TypedEvent<
  SigveloTooltip,
  E
>;

export type SigveloTooltipProps = {
  /** The ID of the tooltip's anchor element. This must be an interactive/focusable element such as a button and it must
be in the same document as the tooltip. */
  for?: SigveloTooltip["for"] | undefined;
  /** Shows or hides the tooltip. */
  open?: SigveloTooltip["open"] | undefined;
  /** The placement of the tooltip in reference to the anchor. The menu will shift to a more optimal location if the
preferred placement doesn't have enough room. */
  placement?: SigveloTooltip["placement"] | undefined;
  /** The distance of the tooltip from its anchor. */
  distance?: SigveloTooltip["distance"] | undefined;
  /** The offset of the tooltip along its trigger. */
  offset?: SigveloTooltip["offset"] | undefined;
  /** The number of milliseconds to wait before opening the tooltip when hovering in. */
  "open-delay"?: SigveloTooltip["openDelay"] | undefined;
  /** The number of milliseconds to wait before opening the tooltip when hovering in. */
  openDelay?: SigveloTooltip["openDelay"] | undefined;
  /** The number of milliseconds to wait before closing the tooltip when hovering out. */
  "close-delay"?: SigveloTooltip["closeDelay"] | undefined;
  /** The number of milliseconds to wait before closing the tooltip when hovering out. */
  closeDelay?: SigveloTooltip["closeDelay"] | undefined;
  /** By default, the tooltip automatically shows when the user focuses or hovers over the anchor. If you want to control
the tooltip programmatically, set this to `manual`. */
  activation?: SigveloTooltip["activation"] | undefined;
  /** Renders the tooltip without an arrow. */
  "without-arrow"?: SigveloTooltip["withoutArrow"] | undefined;
  /** Renders the tooltip without an arrow. */
  withoutArrow?: SigveloTooltip["withoutArrow"] | undefined;

  /** Emitted when the tooltip is instructed to open but before it is shown. */
  "onsigvelo-before-open"?:
    | ((e: SigveloTooltipElementEvent) => void)
    | undefined;
  /** Emitted when the tooltip has opened and the animation has completed. */
  "onsigvelo-open"?: ((e: SigveloTooltipElementEvent) => void) | undefined;
  /** Emitted when the tooltip is dismissed but before it is hidden. */
  "onsigvelo-before-close"?:
    | ((e: SigveloTooltipElementEvent) => void)
    | undefined;
  /** Emitted when the tooltip has closed. and the animation has completed. */
  "onsigvelo-close"?: ((e: SigveloTooltipElementEvent) => void) | undefined;
};

export type SigveloTooltipSolidJsProps = {
  /** The ID of the tooltip's anchor element. This must be an interactive/focusable element such as a button and it must
be in the same document as the tooltip. */
  "prop:for"?: SigveloTooltip["for"] | undefined;
  /** Shows or hides the tooltip. */
  "prop:open"?: SigveloTooltip["open"] | undefined;
  /** The placement of the tooltip in reference to the anchor. The menu will shift to a more optimal location if the
preferred placement doesn't have enough room. */
  "prop:placement"?: SigveloTooltip["placement"] | undefined;
  /** The distance of the tooltip from its anchor. */
  "prop:distance"?: SigveloTooltip["distance"] | undefined;
  /** The offset of the tooltip along its trigger. */
  "prop:offset"?: SigveloTooltip["offset"] | undefined;
  /** The number of milliseconds to wait before opening the tooltip when hovering in. */
  "attr:open-delay"?: SigveloTooltip["openDelay"] | undefined;
  /** The number of milliseconds to wait before opening the tooltip when hovering in. */
  "prop:openDelay"?: SigveloTooltip["openDelay"] | undefined;
  /** The number of milliseconds to wait before closing the tooltip when hovering out. */
  "attr:close-delay"?: SigveloTooltip["closeDelay"] | undefined;
  /** The number of milliseconds to wait before closing the tooltip when hovering out. */
  "prop:closeDelay"?: SigveloTooltip["closeDelay"] | undefined;
  /** By default, the tooltip automatically shows when the user focuses or hovers over the anchor. If you want to control
the tooltip programmatically, set this to `manual`. */
  "prop:activation"?: SigveloTooltip["activation"] | undefined;
  /** Renders the tooltip without an arrow. */
  "bool:without-arrow"?: SigveloTooltip["withoutArrow"] | undefined;
  /** Renders the tooltip without an arrow. */
  "prop:withoutArrow"?: SigveloTooltip["withoutArrow"] | undefined;
  /** Emitted when the tooltip is instructed to open but before it is shown. */
  "on:sigvelo-before-open"?:
    | ((e: SigveloTooltipElementEvent) => void)
    | undefined;
  /** Emitted when the tooltip has opened and the animation has completed. */
  "on:sigvelo-open"?: ((e: SigveloTooltipElementEvent) => void) | undefined;
  /** Emitted when the tooltip is dismissed but before it is hidden. */
  "on:sigvelo-before-close"?:
    | ((e: SigveloTooltipElementEvent) => void)
    | undefined;
  /** Emitted when the tooltip has closed. and the animation has completed. */
  "on:sigvelo-close"?: ((e: SigveloTooltipElementEvent) => void) | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloSlider` component event */
export type SigveloSliderElementEvent<E = Event> = TypedEvent<SigveloSlider, E>;

export type SigveloSliderProps = {
  /** The slider's label. If you need to provide HTML in the label, use the `label` slot instead. */
  label?: SigveloSlider["label"] | undefined;
  /** The slider's description. If you need to provide HTML in the description, use the `description` slot instead. */
  description?: SigveloSlider["description"] | undefined;
  /** The name of the slider. This will be submitted with the form as a name/value pair. */
  name?: SigveloSlider["name"] | undefined;
  /** The slider's value. Pass a two-number array to render a range slider. */
  value?: SigveloSlider["value"] | undefined;
  /** Disables the slider. */
  disabled?: SigveloSlider["disabled"] | undefined;
  /** Makes the slider a read-only field. */
  readonly?: SigveloSlider["readonly"] | undefined;
  /** The orientation of the slider. */
  orientation?: SigveloSlider["orientation"] | undefined;
  /** The slider's size. */
  size?: SigveloSlider["size"] | undefined;
  /** The starting value from which to draw the slider's fill, which is based on its current value. */
  "indicator-offset"?: SigveloSlider["indicatorOffset"] | undefined;
  /** The starting value from which to draw the slider's fill, which is based on its current value. */
  indicatorOffset?: SigveloSlider["indicatorOffset"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an ID of a form in the same document or shadow root. */
  form?: SigveloSlider["form"] | undefined;
  /** The minimum value allowed. */
  min?: SigveloSlider["min"] | undefined;
  /** The maximum value allowed. */
  max?: SigveloSlider["max"] | undefined;
  /** The granularity the value must adhere to when incrementing and decrementing. */
  step?: SigveloSlider["step"] | undefined;
  /** Tells the browser to focus the slider when the page loads or a dialog is shown. */
  autofocus?: SigveloSlider["autofocus"] | undefined;
  /** The distance of the tooltip from the slider's thumb. */
  "tooltip-distance"?: SigveloSlider["tooltipDistance"] | undefined;
  /** The distance of the tooltip from the slider's thumb. */
  tooltipDistance?: SigveloSlider["tooltipDistance"] | undefined;
  /** The placement of the tooltip in reference to the slider's thumb. */
  "tooltip-placement"?: SigveloSlider["tooltipPlacement"] | undefined;
  /** The placement of the tooltip in reference to the slider's thumb. */
  tooltipPlacement?: SigveloSlider["tooltipPlacement"] | undefined;
  /** Draws markers at each step along the slider. */
  "with-markers"?: SigveloSlider["withMarkers"] | undefined;
  /** Draws markers at each step along the slider. */
  withMarkers?: SigveloSlider["withMarkers"] | undefined;
  /** Draws a tooltip above the thumb when the control has focus or is dragged. */
  "with-tooltip"?: SigveloSlider["withTooltip"] | undefined;
  /** Draws a tooltip above the thumb when the control has focus or is dragged. */
  withTooltip?: SigveloSlider["withTooltip"] | undefined;
  /**  */
  slider?: SigveloSlider["slider"] | undefined;
  /**  */
  thumb?: SigveloSlider["thumb"] | undefined;
  /**  */
  thumbMin?: SigveloSlider["thumbMin"] | undefined;
  /**  */
  thumbMax?: SigveloSlider["thumbMax"] | undefined;
  /**  */
  track?: SigveloSlider["track"] | undefined;
  /**  */
  tooltip?: SigveloSlider["tooltip"] | undefined;
  /**  */
  tooltipMin?: SigveloSlider["tooltipMin"] | undefined;
  /**  */
  tooltipMax?: SigveloSlider["tooltipMax"] | undefined;
  /**  */
  isInvalid?: SigveloSlider["isInvalid"] | undefined;
  /**  */
  hadUserInteraction?: SigveloSlider["hadUserInteraction"] | undefined;
  /**  */
  wasSubmitted?: SigveloSlider["wasSubmitted"] | undefined;
  /** A custom formatting function to apply to the value. This will be shown in the tooltip and announced by screen
readers. Must be set with JavaScript. Property only. */
  valueFormatter?: SigveloSlider["valueFormatter"] | undefined;

  /** Emitted when the slider loses focus. This event does not bubble. */
  "onsigvelo-blur"?: ((e: SigveloSliderElementEvent) => void) | undefined;
  /** Emitted when the user commits changes to the slider's value. */
  "onsigvelo-change"?: ((e: SigveloSliderElementEvent) => void) | undefined;
  /** Emitted when the slider receives focus. This event does not bubble. */
  "onsigvelo-focus"?: ((e: SigveloSliderElementEvent) => void) | undefined;
  /** Emitted when the slider receives input. */
  "onsigvelo-input"?: ((e: SigveloSliderElementEvent) => void) | undefined;
};

export type SigveloSliderSolidJsProps = {
  /** The slider's label. If you need to provide HTML in the label, use the `label` slot instead. */
  "prop:label"?: SigveloSlider["label"] | undefined;
  /** The slider's description. If you need to provide HTML in the description, use the `description` slot instead. */
  "prop:description"?: SigveloSlider["description"] | undefined;
  /** The name of the slider. This will be submitted with the form as a name/value pair. */
  "prop:name"?: SigveloSlider["name"] | undefined;
  /** The slider's value. Pass a two-number array to render a range slider. */
  "prop:value"?: SigveloSlider["value"] | undefined;
  /** Disables the slider. */
  "prop:disabled"?: SigveloSlider["disabled"] | undefined;
  /** Makes the slider a read-only field. */
  "prop:readonly"?: SigveloSlider["readonly"] | undefined;
  /** The orientation of the slider. */
  "prop:orientation"?: SigveloSlider["orientation"] | undefined;
  /** The slider's size. */
  "prop:size"?: SigveloSlider["size"] | undefined;
  /** The starting value from which to draw the slider's fill, which is based on its current value. */
  "attr:indicator-offset"?: SigveloSlider["indicatorOffset"] | undefined;
  /** The starting value from which to draw the slider's fill, which is based on its current value. */
  "prop:indicatorOffset"?: SigveloSlider["indicatorOffset"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an ID of a form in the same document or shadow root. */
  "prop:form"?: SigveloSlider["form"] | undefined;
  /** The minimum value allowed. */
  "prop:min"?: SigveloSlider["min"] | undefined;
  /** The maximum value allowed. */
  "prop:max"?: SigveloSlider["max"] | undefined;
  /** The granularity the value must adhere to when incrementing and decrementing. */
  "prop:step"?: SigveloSlider["step"] | undefined;
  /** Tells the browser to focus the slider when the page loads or a dialog is shown. */
  "prop:autofocus"?: SigveloSlider["autofocus"] | undefined;
  /** The distance of the tooltip from the slider's thumb. */
  "attr:tooltip-distance"?: SigveloSlider["tooltipDistance"] | undefined;
  /** The distance of the tooltip from the slider's thumb. */
  "prop:tooltipDistance"?: SigveloSlider["tooltipDistance"] | undefined;
  /** The placement of the tooltip in reference to the slider's thumb. */
  "attr:tooltip-placement"?: SigveloSlider["tooltipPlacement"] | undefined;
  /** The placement of the tooltip in reference to the slider's thumb. */
  "prop:tooltipPlacement"?: SigveloSlider["tooltipPlacement"] | undefined;
  /** Draws markers at each step along the slider. */
  "bool:with-markers"?: SigveloSlider["withMarkers"] | undefined;
  /** Draws markers at each step along the slider. */
  "prop:withMarkers"?: SigveloSlider["withMarkers"] | undefined;
  /** Draws a tooltip above the thumb when the control has focus or is dragged. */
  "bool:with-tooltip"?: SigveloSlider["withTooltip"] | undefined;
  /** Draws a tooltip above the thumb when the control has focus or is dragged. */
  "prop:withTooltip"?: SigveloSlider["withTooltip"] | undefined;
  /**  */
  "prop:slider"?: SigveloSlider["slider"] | undefined;
  /**  */
  "prop:thumb"?: SigveloSlider["thumb"] | undefined;
  /**  */
  "prop:thumbMin"?: SigveloSlider["thumbMin"] | undefined;
  /**  */
  "prop:thumbMax"?: SigveloSlider["thumbMax"] | undefined;
  /**  */
  "prop:track"?: SigveloSlider["track"] | undefined;
  /**  */
  "prop:tooltip"?: SigveloSlider["tooltip"] | undefined;
  /**  */
  "prop:tooltipMin"?: SigveloSlider["tooltipMin"] | undefined;
  /**  */
  "prop:tooltipMax"?: SigveloSlider["tooltipMax"] | undefined;
  /**  */
  "prop:isInvalid"?: SigveloSlider["isInvalid"] | undefined;
  /**  */
  "prop:hadUserInteraction"?: SigveloSlider["hadUserInteraction"] | undefined;
  /**  */
  "prop:wasSubmitted"?: SigveloSlider["wasSubmitted"] | undefined;
  /** A custom formatting function to apply to the value. This will be shown in the tooltip and announced by screen
readers. Must be set with JavaScript. Property only. */
  "prop:valueFormatter"?: SigveloSlider["valueFormatter"] | undefined;
  /** Emitted when the slider loses focus. This event does not bubble. */
  "on:sigvelo-blur"?: ((e: SigveloSliderElementEvent) => void) | undefined;
  /** Emitted when the user commits changes to the slider's value. */
  "on:sigvelo-change"?: ((e: SigveloSliderElementEvent) => void) | undefined;
  /** Emitted when the slider receives focus. This event does not bubble. */
  "on:sigvelo-focus"?: ((e: SigveloSliderElementEvent) => void) | undefined;
  /** Emitted when the slider receives input. */
  "on:sigvelo-input"?: ((e: SigveloSliderElementEvent) => void) | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloTextField` component event */
export type SigveloTextFieldElementEvent<E = Event> = TypedEvent<
  SigveloTextField,
  E
>;

export type SigveloTextFieldProps = {
  /** The text field's label. If you need to provide HTML in the label, use the `label` slot instead. */
  label?: SigveloTextField["label"] | undefined;
  /** The text field's description. If you need to provide HTML in the description, use the `description` slot instead. */
  description?: SigveloTextField["description"] | undefined;
  /** The name of the text field. This will be submitted with the form as a name/value pair. */
  name?: SigveloTextField["name"] | undefined;
  /** The text field's value. */
  value?: SigveloTextField["value"] | undefined;
  /** A placeholder to show in the text field when it's blank. */
  placeholder?: SigveloTextField["placeholder"] | undefined;
  /** Disables the text field. */
  disabled?: SigveloTextField["disabled"] | undefined;
  /** Makes the text field a read-only field. */
  readonly?: SigveloTextField["readonly"] | undefined;
  /** Adds a clear button to the text field when it's not blank. */
  "with-clear"?: SigveloTextField["withClear"] | undefined;
  /** Adds a clear button to the text field when it's not blank. */
  withClear?: SigveloTextField["withClear"] | undefined;
  /** The type of text field to render. */
  variant?: SigveloTextField["variant"] | undefined;
  /** The text field's size. */
  size?: SigveloTextField["size"] | undefined;
  /** Draws the text field in a pill shape. */
  pill?: SigveloTextField["pill"] | undefined;
  /** The type of data the text field will accept. */
  type?: SigveloTextField["type"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an ID of a form in the same document or shadow root. */
  form?: SigveloTextField["form"] | undefined;
  /** Makes the text field required. Form submission will not be allowed when this is set and the text field is blank. */
  required?: SigveloTextField["required"] | undefined;
  /** A regular expression the value should match to be considered valid. */
  pattern?: SigveloTextField["pattern"] | undefined;
  /** The minimum string length that will be considered valid. */
  minlength?: SigveloTextField["minLength"] | undefined;
  /** The minimum string length that will be considered valid. */
  minLength?: SigveloTextField["minLength"] | undefined;
  /** The maximum string length that will be considered valid. */
  maxlength?: SigveloTextField["maxLength"] | undefined;
  /** The maximum string length that will be considered valid. */
  maxLength?: SigveloTextField["maxLength"] | undefined;
  /** The minimum value for date/time types. */
  min?: SigveloTextField["min"] | undefined;
  /** The maximum value for date/time types. */
  max?: SigveloTextField["max"] | undefined;
  /** The granularity the value must adhere to when incrementing and decrementing. */
  step?: SigveloTextField["step"] | undefined;
  /** Turns autocapitalize on or off in supported browsers. */
  autocapitalize?: SigveloTextField["autocapitalize"] | undefined;
  /** Tells the browser how to autocomplete the text field. See [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
for available values. */
  autocomplete?: SigveloTextField["autocomplete"] | undefined;
  /** Turns autocorrect on or off in supported browsers. Set to true or 'on' to enable, false or 'off' to disable. */
  autocorrect?: SigveloTextField["autocorrect"] | undefined;
  /** Tells the browser to focus the text field when the page loads or a dialog is shown. */
  autofocus?: SigveloTextField["autofocus"] | undefined;
  /** Sets the enter key label on virtual keyboards. */
  enterkeyhint?: SigveloTextField["enterkeyhint"] | undefined;
  /** Provides the browser with a hint about the type of data that might be entered by the user, allowing the appropriate
virtual keyboard to be displayed on supported devices. */
  inputmode?: SigveloTextField["inputmode"] | undefined;
  /** Turns spell checking on or off in supported browsers. */
  spellcheck?: SigveloTextField["spellcheck"] | undefined;
  /**  */
  isInvalid?: SigveloTextField["isInvalid"] | undefined;
  /**  */
  hadUserInteraction?: SigveloTextField["hadUserInteraction"] | undefined;
  /**  */
  wasSubmitted?: SigveloTextField["wasSubmitted"] | undefined;
  /**  */
  isPasswordVisible?: SigveloTextField["isPasswordVisible"] | undefined;

  /** Emitted when the text field loses focus. This event does not bubble. */
  "onsigvelo-blur"?: ((e: SigveloTextFieldElementEvent) => void) | undefined;
  /** Emitted when the user commits changes to the text field's value. */
  "onsigvelo-change"?: ((e: SigveloTextFieldElementEvent) => void) | undefined;
  /** Emitted when the text field receives focus. This event does not bubble. */
  "onsigvelo-focus"?: ((e: SigveloTextFieldElementEvent) => void) | undefined;
  /** Emitted when the text field receives input. */
  "onsigvelo-input"?: ((e: SigveloTextFieldElementEvent) => void) | undefined;
};

export type SigveloTextFieldSolidJsProps = {
  /** The text field's label. If you need to provide HTML in the label, use the `label` slot instead. */
  "prop:label"?: SigveloTextField["label"] | undefined;
  /** The text field's description. If you need to provide HTML in the description, use the `description` slot instead. */
  "prop:description"?: SigveloTextField["description"] | undefined;
  /** The name of the text field. This will be submitted with the form as a name/value pair. */
  "prop:name"?: SigveloTextField["name"] | undefined;
  /** The text field's value. */
  "prop:value"?: SigveloTextField["value"] | undefined;
  /** A placeholder to show in the text field when it's blank. */
  "prop:placeholder"?: SigveloTextField["placeholder"] | undefined;
  /** Disables the text field. */
  "prop:disabled"?: SigveloTextField["disabled"] | undefined;
  /** Makes the text field a read-only field. */
  "prop:readonly"?: SigveloTextField["readonly"] | undefined;
  /** Adds a clear button to the text field when it's not blank. */
  "bool:with-clear"?: SigveloTextField["withClear"] | undefined;
  /** Adds a clear button to the text field when it's not blank. */
  "prop:withClear"?: SigveloTextField["withClear"] | undefined;
  /** The type of text field to render. */
  "prop:variant"?: SigveloTextField["variant"] | undefined;
  /** The text field's size. */
  "prop:size"?: SigveloTextField["size"] | undefined;
  /** Draws the text field in a pill shape. */
  "prop:pill"?: SigveloTextField["pill"] | undefined;
  /** The type of data the text field will accept. */
  "prop:type"?: SigveloTextField["type"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an ID of a form in the same document or shadow root. */
  "prop:form"?: SigveloTextField["form"] | undefined;
  /** Makes the text field required. Form submission will not be allowed when this is set and the text field is blank. */
  "prop:required"?: SigveloTextField["required"] | undefined;
  /** A regular expression the value should match to be considered valid. */
  "prop:pattern"?: SigveloTextField["pattern"] | undefined;
  /** The minimum string length that will be considered valid. */
  "attr:minlength"?: SigveloTextField["minLength"] | undefined;
  /** The minimum string length that will be considered valid. */
  "prop:minLength"?: SigveloTextField["minLength"] | undefined;
  /** The maximum string length that will be considered valid. */
  "attr:maxlength"?: SigveloTextField["maxLength"] | undefined;
  /** The maximum string length that will be considered valid. */
  "prop:maxLength"?: SigveloTextField["maxLength"] | undefined;
  /** The minimum value for date/time types. */
  "prop:min"?: SigveloTextField["min"] | undefined;
  /** The maximum value for date/time types. */
  "prop:max"?: SigveloTextField["max"] | undefined;
  /** The granularity the value must adhere to when incrementing and decrementing. */
  "prop:step"?: SigveloTextField["step"] | undefined;
  /** Turns autocapitalize on or off in supported browsers. */
  "prop:autocapitalize"?: SigveloTextField["autocapitalize"] | undefined;
  /** Tells the browser how to autocomplete the text field. See [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
for available values. */
  "prop:autocomplete"?: SigveloTextField["autocomplete"] | undefined;
  /** Turns autocorrect on or off in supported browsers. Set to true or 'on' to enable, false or 'off' to disable. */
  "prop:autocorrect"?: SigveloTextField["autocorrect"] | undefined;
  /** Tells the browser to focus the text field when the page loads or a dialog is shown. */
  "prop:autofocus"?: SigveloTextField["autofocus"] | undefined;
  /** Sets the enter key label on virtual keyboards. */
  "prop:enterkeyhint"?: SigveloTextField["enterkeyhint"] | undefined;
  /** Provides the browser with a hint about the type of data that might be entered by the user, allowing the appropriate
virtual keyboard to be displayed on supported devices. */
  "prop:inputmode"?: SigveloTextField["inputmode"] | undefined;
  /** Turns spell checking on or off in supported browsers. */
  "prop:spellcheck"?: SigveloTextField["spellcheck"] | undefined;
  /**  */
  "prop:isInvalid"?: SigveloTextField["isInvalid"] | undefined;
  /**  */
  "prop:hadUserInteraction"?:
    | SigveloTextField["hadUserInteraction"]
    | undefined;
  /**  */
  "prop:wasSubmitted"?: SigveloTextField["wasSubmitted"] | undefined;
  /**  */
  "prop:isPasswordVisible"?: SigveloTextField["isPasswordVisible"] | undefined;
  /** Emitted when the text field loses focus. This event does not bubble. */
  "on:sigvelo-blur"?: ((e: SigveloTextFieldElementEvent) => void) | undefined;
  /** Emitted when the user commits changes to the text field's value. */
  "on:sigvelo-change"?: ((e: SigveloTextFieldElementEvent) => void) | undefined;
  /** Emitted when the text field receives focus. This event does not bubble. */
  "on:sigvelo-focus"?: ((e: SigveloTextFieldElementEvent) => void) | undefined;
  /** Emitted when the text field receives input. */
  "on:sigvelo-input"?: ((e: SigveloTextFieldElementEvent) => void) | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloColorPicker` component event */
export type SigveloColorPickerElementEvent<E = Event> = TypedEvent<
  SigveloColorPicker,
  E
>;

export type SigveloColorPickerProps = {
  /** The color picker's label. This won't be visible, but it will be read to assistive devices so you should always
include one. */
  label?: SigveloColorPicker["label"] | undefined;
  /** The color picker's value. */
  value?: SigveloColorPicker["value"] | undefined;
  /** The format to use for the color's value. */
  format?: SigveloColorPicker["format"] | undefined;
  /** Disables the color picker. */
  disabled?: SigveloColorPicker["disabled"] | undefined;
  /** The color picker's size. */
  size?: SigveloColorPicker["size"] | undefined;
  /** One or more semicolon-delimited colors (any valid CSS color format or name) to show as preset swatches below the
color picker. */
  swatches?: SigveloColorPicker["swatches"] | undefined;
  /** Enables the alpha slider. */
  "with-alpha"?: SigveloColorPicker["withAlpha"] | undefined;
  /** Enables the alpha slider. */
  withAlpha?: SigveloColorPicker["withAlpha"] | undefined;
  /** Enables the eye dropper button. Only available in
[supportive browsers](https://caniuse.com/?search=eyedropper%20API). */
  "with-eye-dropper"?: SigveloColorPicker["withEyeDropper"] | undefined;
  /** Enables the eye dropper button. Only available in
[supportive browsers](https://caniuse.com/?search=eyedropper%20API). */
  withEyeDropper?: SigveloColorPicker["withEyeDropper"] | undefined;
  /** Enables the color value text field. */
  "with-input"?: SigveloColorPicker["withInput"] | undefined;
  /** Enables the color value text field. */
  withInput?: SigveloColorPicker["withInput"] | undefined;
  /**  */
  h?: SigveloColorPicker["h"] | undefined;
  /**  */
  s?: SigveloColorPicker["s"] | undefined;
  /**  */
  v?: SigveloColorPicker["v"] | undefined;
  /**  */
  a?: SigveloColorPicker["a"] | undefined;
  /**  */
  colorSliderThumbX?: SigveloColorPicker["colorSliderThumbX"] | undefined;
  /**  */
  colorSliderThumbY?: SigveloColorPicker["colorSliderThumbY"] | undefined;
  /**  */
  hasFocus?: SigveloColorPicker["hasFocus"] | undefined;
  /**  */
  isChangingV?: SigveloColorPicker["isChangingV"] | undefined;
  /**  */
  isChangingS?: SigveloColorPicker["isChangingS"] | undefined;
  /**  */
  inputIsFocused?: SigveloColorPicker["inputIsFocused"] | undefined;
  /**  */
  displayValue?: SigveloColorPicker["displayValue"] | undefined;
  /**  */
  hadUserInteraction?: SigveloColorPicker["hadUserInteraction"] | undefined;

  /** Emitted when the user commits changes to the color picker's value. */
  "onsigvelo-change"?:
    | ((e: SigveloColorPickerElementEvent) => void)
    | undefined;
  /** Emitted when the color picker receives input. This can fire very frequently during dragging, so avoid doing expensive operations in the handler. If you don't live feedback, use the `sigvelo-change` event instead. */
  "onsigvelo-input"?: ((e: SigveloColorPickerElementEvent) => void) | undefined;
};

export type SigveloColorPickerSolidJsProps = {
  /** The color picker's label. This won't be visible, but it will be read to assistive devices so you should always
include one. */
  "prop:label"?: SigveloColorPicker["label"] | undefined;
  /** The color picker's value. */
  "prop:value"?: SigveloColorPicker["value"] | undefined;
  /** The format to use for the color's value. */
  "prop:format"?: SigveloColorPicker["format"] | undefined;
  /** Disables the color picker. */
  "prop:disabled"?: SigveloColorPicker["disabled"] | undefined;
  /** The color picker's size. */
  "prop:size"?: SigveloColorPicker["size"] | undefined;
  /** One or more semicolon-delimited colors (any valid CSS color format or name) to show as preset swatches below the
color picker. */
  "prop:swatches"?: SigveloColorPicker["swatches"] | undefined;
  /** Enables the alpha slider. */
  "bool:with-alpha"?: SigveloColorPicker["withAlpha"] | undefined;
  /** Enables the alpha slider. */
  "prop:withAlpha"?: SigveloColorPicker["withAlpha"] | undefined;
  /** Enables the eye dropper button. Only available in
[supportive browsers](https://caniuse.com/?search=eyedropper%20API). */
  "bool:with-eye-dropper"?: SigveloColorPicker["withEyeDropper"] | undefined;
  /** Enables the eye dropper button. Only available in
[supportive browsers](https://caniuse.com/?search=eyedropper%20API). */
  "prop:withEyeDropper"?: SigveloColorPicker["withEyeDropper"] | undefined;
  /** Enables the color value text field. */
  "bool:with-input"?: SigveloColorPicker["withInput"] | undefined;
  /** Enables the color value text field. */
  "prop:withInput"?: SigveloColorPicker["withInput"] | undefined;
  /**  */
  "prop:h"?: SigveloColorPicker["h"] | undefined;
  /**  */
  "prop:s"?: SigveloColorPicker["s"] | undefined;
  /**  */
  "prop:v"?: SigveloColorPicker["v"] | undefined;
  /**  */
  "prop:a"?: SigveloColorPicker["a"] | undefined;
  /**  */
  "prop:colorSliderThumbX"?:
    | SigveloColorPicker["colorSliderThumbX"]
    | undefined;
  /**  */
  "prop:colorSliderThumbY"?:
    | SigveloColorPicker["colorSliderThumbY"]
    | undefined;
  /**  */
  "prop:hasFocus"?: SigveloColorPicker["hasFocus"] | undefined;
  /**  */
  "prop:isChangingV"?: SigveloColorPicker["isChangingV"] | undefined;
  /**  */
  "prop:isChangingS"?: SigveloColorPicker["isChangingS"] | undefined;
  /**  */
  "prop:inputIsFocused"?: SigveloColorPicker["inputIsFocused"] | undefined;
  /**  */
  "prop:displayValue"?: SigveloColorPicker["displayValue"] | undefined;
  /**  */
  "prop:hadUserInteraction"?:
    | SigveloColorPicker["hadUserInteraction"]
    | undefined;
  /** Emitted when the user commits changes to the color picker's value. */
  "on:sigvelo-change"?:
    | ((e: SigveloColorPickerElementEvent) => void)
    | undefined;
  /** Emitted when the color picker receives input. This can fire very frequently during dragging, so avoid doing expensive operations in the handler. If you don't live feedback, use the `sigvelo-change` event instead. */
  "on:sigvelo-input"?:
    | ((e: SigveloColorPickerElementEvent) => void)
    | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloColorInput` component event */
export type SigveloColorInputElementEvent<E = Event> = TypedEvent<
  SigveloColorInput,
  E
>;

export type SigveloColorInputProps = {
  /** The color input's label. If you need to provide HTML in the label, use the `label` slot instead. */
  label?: SigveloColorInput["label"] | undefined;
  /** The color input's description. If you need to provide HTML in the description, use the `description` slot instead. */
  description?: SigveloColorInput["description"] | undefined;
  /** The name of the color input. This will be submitted with the form as a name/value pair. */
  name?: SigveloColorInput["name"] | undefined;
  /** The color input's value. */
  value?: SigveloColorInput["value"] | undefined;
  /** A placeholder to show in the color input when it's blank. */
  placeholder?: SigveloColorInput["placeholder"] | undefined;
  /** Disables the color input. */
  disabled?: SigveloColorInput["disabled"] | undefined;
  /** Makes the color input a read-only area. */
  readonly?: SigveloColorInput["readonly"] | undefined;
  /** Adds a clear button to the color input when it's not blank. */
  "with-clear"?: SigveloColorInput["withClear"] | undefined;
  /** Adds a clear button to the color input when it's not blank. */
  withClear?: SigveloColorInput["withClear"] | undefined;
  /** The type of color input to render. */
  variant?: SigveloColorInput["variant"] | undefined;
  /** The color input's size. */
  size?: SigveloColorInput["size"] | undefined;
  /** Draws the text field in a pill shape. */
  pill?: SigveloColorInput["pill"] | undefined;
  /** The format to use for the color's value. */
  format?: SigveloColorInput["format"] | undefined;
  /** One or more semicolon-delimited colors (any valid CSS color format or name) to show as preset swatches below the
color picker. */
  swatches?: SigveloColorInput["swatches"] | undefined;
  /** Enables the alpha slider. */
  "with-alpha"?: SigveloColorInput["withAlpha"] | undefined;
  /** Enables the alpha slider. */
  withAlpha?: SigveloColorInput["withAlpha"] | undefined;
  /** Enables the eye dropper button. Only available in
[supportive browsers](https://caniuse.com/?search=eyedropper%20API). */
  "with-eye-dropper"?: SigveloColorInput["withEyeDropper"] | undefined;
  /** Enables the eye dropper button. Only available in
[supportive browsers](https://caniuse.com/?search=eyedropper%20API). */
  withEyeDropper?: SigveloColorInput["withEyeDropper"] | undefined;
  /** The placement of the dropdown menu in reference to the trigger. The menu will shift to a more optimal location if
the preferred placement doesn't have enough room. */
  placement?: SigveloColorInput["placement"] | undefined;
  /** The distance of the dropdown menu from its trigger. */
  distance?: SigveloColorInput["distance"] | undefined;
  /** The offset of the dropdown menu along its trigger. */
  offset?: SigveloColorInput["offset"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an ID of a form in the same document or shadow root. */
  form?: SigveloColorInput["form"] | undefined;
  /** Makes the color input required. Form submission will not be allowed when this is set and the color input is blank. */
  required?: SigveloColorInput["required"] | undefined;
  /** Tells the browser how to autocomplete the color input. See [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
for available values. */
  autocomplete?: SigveloColorInput["autocomplete"] | undefined;
  /** Tells the browser to focus the color input when the page loads or a dialog is shown. */
  autofocus?: SigveloColorInput["autofocus"] | undefined;
  /** Sets the enter key label on virtual keyboards. */
  enterkeyhint?: SigveloColorInput["enterkeyhint"] | undefined;
  /** Provides the browser with a hint about the type of data that might be entered by the user, allowing the appropriate
virtual keyboard to be displayed on supported devices. */
  inputmode?: SigveloColorInput["inputmode"] | undefined;
  /**  */
  isOpen?: SigveloColorInput["isOpen"] | undefined;
  /**  */
  isInvalid?: SigveloColorInput["isInvalid"] | undefined;
  /**  */
  hadUserInteraction?: SigveloColorInput["hadUserInteraction"] | undefined;
  /**  */
  wasSubmitted?: SigveloColorInput["wasSubmitted"] | undefined;

  /** Emitted when the color input loses focus. This event does not bubble. */
  "onsigvelo-blur"?: ((e: SigveloColorInputElementEvent) => void) | undefined;
  /** Emitted when the user commits changes to the color input's value. */
  "onsigvelo-change"?: ((e: SigveloColorInputElementEvent) => void) | undefined;
  /** Emitted when the color input receives focus. This event does not bubble. */
  "onsigvelo-focus"?: ((e: SigveloColorInputElementEvent) => void) | undefined;
  /** Emitted when the color input receives input. */
  "onsigvelo-input"?: ((e: SigveloColorInputElementEvent) => void) | undefined;
};

export type SigveloColorInputSolidJsProps = {
  /** The color input's label. If you need to provide HTML in the label, use the `label` slot instead. */
  "prop:label"?: SigveloColorInput["label"] | undefined;
  /** The color input's description. If you need to provide HTML in the description, use the `description` slot instead. */
  "prop:description"?: SigveloColorInput["description"] | undefined;
  /** The name of the color input. This will be submitted with the form as a name/value pair. */
  "prop:name"?: SigveloColorInput["name"] | undefined;
  /** The color input's value. */
  "prop:value"?: SigveloColorInput["value"] | undefined;
  /** A placeholder to show in the color input when it's blank. */
  "prop:placeholder"?: SigveloColorInput["placeholder"] | undefined;
  /** Disables the color input. */
  "prop:disabled"?: SigveloColorInput["disabled"] | undefined;
  /** Makes the color input a read-only area. */
  "prop:readonly"?: SigveloColorInput["readonly"] | undefined;
  /** Adds a clear button to the color input when it's not blank. */
  "bool:with-clear"?: SigveloColorInput["withClear"] | undefined;
  /** Adds a clear button to the color input when it's not blank. */
  "prop:withClear"?: SigveloColorInput["withClear"] | undefined;
  /** The type of color input to render. */
  "prop:variant"?: SigveloColorInput["variant"] | undefined;
  /** The color input's size. */
  "prop:size"?: SigveloColorInput["size"] | undefined;
  /** Draws the text field in a pill shape. */
  "prop:pill"?: SigveloColorInput["pill"] | undefined;
  /** The format to use for the color's value. */
  "prop:format"?: SigveloColorInput["format"] | undefined;
  /** One or more semicolon-delimited colors (any valid CSS color format or name) to show as preset swatches below the
color picker. */
  "prop:swatches"?: SigveloColorInput["swatches"] | undefined;
  /** Enables the alpha slider. */
  "bool:with-alpha"?: SigveloColorInput["withAlpha"] | undefined;
  /** Enables the alpha slider. */
  "prop:withAlpha"?: SigveloColorInput["withAlpha"] | undefined;
  /** Enables the eye dropper button. Only available in
[supportive browsers](https://caniuse.com/?search=eyedropper%20API). */
  "bool:with-eye-dropper"?: SigveloColorInput["withEyeDropper"] | undefined;
  /** Enables the eye dropper button. Only available in
[supportive browsers](https://caniuse.com/?search=eyedropper%20API). */
  "prop:withEyeDropper"?: SigveloColorInput["withEyeDropper"] | undefined;
  /** The placement of the dropdown menu in reference to the trigger. The menu will shift to a more optimal location if
the preferred placement doesn't have enough room. */
  "prop:placement"?: SigveloColorInput["placement"] | undefined;
  /** The distance of the dropdown menu from its trigger. */
  "prop:distance"?: SigveloColorInput["distance"] | undefined;
  /** The offset of the dropdown menu along its trigger. */
  "prop:offset"?: SigveloColorInput["offset"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an ID of a form in the same document or shadow root. */
  "prop:form"?: SigveloColorInput["form"] | undefined;
  /** Makes the color input required. Form submission will not be allowed when this is set and the color input is blank. */
  "prop:required"?: SigveloColorInput["required"] | undefined;
  /** Tells the browser how to autocomplete the color input. See [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
for available values. */
  "prop:autocomplete"?: SigveloColorInput["autocomplete"] | undefined;
  /** Tells the browser to focus the color input when the page loads or a dialog is shown. */
  "prop:autofocus"?: SigveloColorInput["autofocus"] | undefined;
  /** Sets the enter key label on virtual keyboards. */
  "prop:enterkeyhint"?: SigveloColorInput["enterkeyhint"] | undefined;
  /** Provides the browser with a hint about the type of data that might be entered by the user, allowing the appropriate
virtual keyboard to be displayed on supported devices. */
  "prop:inputmode"?: SigveloColorInput["inputmode"] | undefined;
  /**  */
  "prop:isOpen"?: SigveloColorInput["isOpen"] | undefined;
  /**  */
  "prop:isInvalid"?: SigveloColorInput["isInvalid"] | undefined;
  /**  */
  "prop:hadUserInteraction"?:
    | SigveloColorInput["hadUserInteraction"]
    | undefined;
  /**  */
  "prop:wasSubmitted"?: SigveloColorInput["wasSubmitted"] | undefined;
  /** Emitted when the color input loses focus. This event does not bubble. */
  "on:sigvelo-blur"?: ((e: SigveloColorInputElementEvent) => void) | undefined;
  /** Emitted when the user commits changes to the color input's value. */
  "on:sigvelo-change"?:
    | ((e: SigveloColorInputElementEvent) => void)
    | undefined;
  /** Emitted when the color input receives focus. This event does not bubble. */
  "on:sigvelo-focus"?: ((e: SigveloColorInputElementEvent) => void) | undefined;
  /** Emitted when the color input receives input. */
  "on:sigvelo-input"?: ((e: SigveloColorInputElementEvent) => void) | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloComboboxItemProps = {
  /** The value to submit when this item is selected. If not provided, the text content is used. */
  value?: SigveloComboboxItem["value"] | undefined;
  /** Disables the item. */
  disabled?: SigveloComboboxItem["disabled"] | undefined;
  /**  */
  defaultSlot?: SigveloComboboxItem["defaultSlot"] | undefined;
};

export type SigveloComboboxItemSolidJsProps = {
  /** The value to submit when this item is selected. If not provided, the text content is used. */
  "prop:value"?: SigveloComboboxItem["value"] | undefined;
  /** Disables the item. */
  "prop:disabled"?: SigveloComboboxItem["disabled"] | undefined;
  /**  */
  "prop:defaultSlot"?: SigveloComboboxItem["defaultSlot"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloCombobox` component event */
export type SigveloComboboxElementEvent<E = Event> = TypedEvent<
  SigveloCombobox,
  E
>;

export type SigveloComboboxProps = {
  /** The combobox's label. */
  label?: SigveloCombobox["label"] | undefined;
  /** The combobox's description. */
  description?: SigveloCombobox["description"] | undefined;
  /** The name of the combobox for form submission. */
  name?: SigveloCombobox["name"] | undefined;
  /** The combobox's value(s). */
  value?: SigveloCombobox["value"] | undefined;
  /** Placeholder text for the input. */
  placeholder?: SigveloCombobox["placeholder"] | undefined;
  /** Disables the combobox. */
  disabled?: SigveloCombobox["disabled"] | undefined;
  /** Makes the combobox required. */
  required?: SigveloCombobox["required"] | undefined;
  /** Enables multiple selection. */
  multiple?: SigveloCombobox["multiple"] | undefined;
  /** Adds a clear button when not blank. */
  "with-clear"?: SigveloCombobox["withClear"] | undefined;
  /** Adds a clear button when not blank. */
  withClear?: SigveloCombobox["withClear"] | undefined;
  /** The visual variant of the combobox. */
  variant?: SigveloCombobox["variant"] | undefined;
  /** The size of the combobox. */
  size?: SigveloCombobox["size"] | undefined;
  /** Draws the combobox in a pill shape. */
  pill?: SigveloCombobox["pill"] | undefined;
  /** The dropdown's placement relative to the input. */
  placement?: SigveloCombobox["placement"] | undefined;
  /** The distance of the dropdown from the input. */
  distance?: SigveloCombobox["distance"] | undefined;
  /** The offset of the dropdown along the input. */
  offset?: SigveloCombobox["offset"] | undefined;
  /** The form to associate with. */
  form?: SigveloCombobox["form"] | undefined;
  /**  */
  open?: SigveloCombobox["open"] | undefined;
  /**  */
  inputValue?: SigveloCombobox["inputValue"] | undefined;

  /** Emitted when the combobox loses focus. */
  "onsigvelo-blur"?: ((e: SigveloComboboxElementEvent) => void) | undefined;
  /** Emitted when the user commits changes to the combobox's value. */
  "onsigvelo-change"?: ((e: SigveloComboboxElementEvent) => void) | undefined;
  /** Emitted when the combobox receives focus. */
  "onsigvelo-focus"?: ((e: SigveloComboboxElementEvent) => void) | undefined;
  /** Emitted when the combobox receives input. */
  "onsigvelo-input"?: ((e: SigveloComboboxElementEvent) => void) | undefined;
  /** Emitted when the dropdown is instructed to open but before it is shown. */
  "onsigvelo-before-open"?:
    | ((e: SigveloComboboxElementEvent) => void)
    | undefined;
  /** Emitted when the dropdown opens. */
  "onsigvelo-open"?: ((e: SigveloComboboxElementEvent) => void) | undefined;
  /** Emitted when the dropdown is instructed to close but before it is hidden. */
  "onsigvelo-before-close"?:
    | ((e: SigveloComboboxElementEvent) => void)
    | undefined;
  /** Emitted when the dropdown closes. */
  "onsigvelo-close"?: ((e: SigveloComboboxElementEvent) => void) | undefined;
};

export type SigveloComboboxSolidJsProps = {
  /** The combobox's label. */
  "prop:label"?: SigveloCombobox["label"] | undefined;
  /** The combobox's description. */
  "prop:description"?: SigveloCombobox["description"] | undefined;
  /** The name of the combobox for form submission. */
  "prop:name"?: SigveloCombobox["name"] | undefined;
  /** The combobox's value(s). */
  "prop:value"?: SigveloCombobox["value"] | undefined;
  /** Placeholder text for the input. */
  "prop:placeholder"?: SigveloCombobox["placeholder"] | undefined;
  /** Disables the combobox. */
  "prop:disabled"?: SigveloCombobox["disabled"] | undefined;
  /** Makes the combobox required. */
  "prop:required"?: SigveloCombobox["required"] | undefined;
  /** Enables multiple selection. */
  "prop:multiple"?: SigveloCombobox["multiple"] | undefined;
  /** Adds a clear button when not blank. */
  "bool:with-clear"?: SigveloCombobox["withClear"] | undefined;
  /** Adds a clear button when not blank. */
  "prop:withClear"?: SigveloCombobox["withClear"] | undefined;
  /** The visual variant of the combobox. */
  "prop:variant"?: SigveloCombobox["variant"] | undefined;
  /** The size of the combobox. */
  "prop:size"?: SigveloCombobox["size"] | undefined;
  /** Draws the combobox in a pill shape. */
  "prop:pill"?: SigveloCombobox["pill"] | undefined;
  /** The dropdown's placement relative to the input. */
  "prop:placement"?: SigveloCombobox["placement"] | undefined;
  /** The distance of the dropdown from the input. */
  "prop:distance"?: SigveloCombobox["distance"] | undefined;
  /** The offset of the dropdown along the input. */
  "prop:offset"?: SigveloCombobox["offset"] | undefined;
  /** The form to associate with. */
  "prop:form"?: SigveloCombobox["form"] | undefined;
  /**  */
  "prop:open"?: SigveloCombobox["open"] | undefined;
  /**  */
  "prop:inputValue"?: SigveloCombobox["inputValue"] | undefined;
  /** Emitted when the combobox loses focus. */
  "on:sigvelo-blur"?: ((e: SigveloComboboxElementEvent) => void) | undefined;
  /** Emitted when the user commits changes to the combobox's value. */
  "on:sigvelo-change"?: ((e: SigveloComboboxElementEvent) => void) | undefined;
  /** Emitted when the combobox receives focus. */
  "on:sigvelo-focus"?: ((e: SigveloComboboxElementEvent) => void) | undefined;
  /** Emitted when the combobox receives input. */
  "on:sigvelo-input"?: ((e: SigveloComboboxElementEvent) => void) | undefined;
  /** Emitted when the dropdown is instructed to open but before it is shown. */
  "on:sigvelo-before-open"?:
    | ((e: SigveloComboboxElementEvent) => void)
    | undefined;
  /** Emitted when the dropdown opens. */
  "on:sigvelo-open"?: ((e: SigveloComboboxElementEvent) => void) | undefined;
  /** Emitted when the dropdown is instructed to close but before it is hidden. */
  "on:sigvelo-before-close"?:
    | ((e: SigveloComboboxElementEvent) => void)
    | undefined;
  /** Emitted when the dropdown closes. */
  "on:sigvelo-close"?: ((e: SigveloComboboxElementEvent) => void) | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloComparison` component event */
export type SigveloComparisonElementEvent<E = Event> = TypedEvent<
  SigveloComparison,
  E
>;

export type SigveloComparisonProps = {
  /** The position of the divider as a decimal (0-1). */
  position?: SigveloComparison["position"] | undefined;
  /** The orientation of the comparison slider, either 'horizontal' or 'vertical'. */
  orientation?: SigveloComparison["orientation"] | undefined;
  /** Disables the comparison component, preventing it from being focused and adjusted. */
  disabled?: SigveloComparison["disabled"] | undefined;
  /**  */
  isDragging?: SigveloComparison["isDragging"] | undefined;

  /** Dispatched when the comparison's handle is moved. */
  "onsigvelo-resize"?: ((e: SigveloComparisonElementEvent) => void) | undefined;
};

export type SigveloComparisonSolidJsProps = {
  /** The position of the divider as a decimal (0-1). */
  "prop:position"?: SigveloComparison["position"] | undefined;
  /** The orientation of the comparison slider, either 'horizontal' or 'vertical'. */
  "prop:orientation"?: SigveloComparison["orientation"] | undefined;
  /** Disables the comparison component, preventing it from being focused and adjusted. */
  "prop:disabled"?: SigveloComparison["disabled"] | undefined;
  /**  */
  "prop:isDragging"?: SigveloComparison["isDragging"] | undefined;
  /** Dispatched when the comparison's handle is moved. */
  "on:sigvelo-resize"?:
    | ((e: SigveloComparisonElementEvent) => void)
    | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloDateProps = {
  /** The date to format. If an attribute is passed, the date should be an [ISO 8601 string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).
If set as a property, a `Date` object can be used instead. If unset, the current date will be assumed. */
  date?: SigveloDate["date"] | undefined;
  /** A shortcut property for formatting the date. This can be used with `time-style`, but not with other formatting
properties such as `weekday`, `hour`, `month`, etc. */
  "date-style"?: SigveloDate["dateStyle"] | undefined;
  /** A shortcut property for formatting the date. This can be used with `time-style`, but not with other formatting
properties such as `weekday`, `hour`, `month`, etc. */
  dateStyle?: SigveloDate["dateStyle"] | undefined;
  /** A shortcut property for formatting the time. This can be used with `date-style`, but not with other formatting
properties such as `weekday`, `hour`, `month`, etc. */
  "time-style"?: SigveloDate["timeStyle"] | undefined;
  /** A shortcut property for formatting the time. This can be used with `date-style`, but not with other formatting
properties such as `weekday`, `hour`, `month`, etc. */
  timeStyle?: SigveloDate["timeStyle"] | undefined;
  /** Whether to use 12-hour time (as opposed to 24-hour time). If `auto`, the default value is determined by the user's
locale. */
  "hour-format"?: SigveloDate["hourFormat"] | undefined;
  /** Whether to use 12-hour time (as opposed to 24-hour time). If `auto`, the default value is determined by the user's
locale. */
  hourFormat?: SigveloDate["hourFormat"] | undefined;
  /** The hour cycle to use. */
  hourCycle?: SigveloDate["hourCycle"] | undefined;
  /** The time zone to use. The default is the user's default time zone. */
  "time-zone"?: SigveloDate["timeZone"] | undefined;
  /** The time zone to use. The default is the user's default time zone. */
  timeZone?: SigveloDate["timeZone"] | undefined;
  /** The representation of the weekday. */
  weekday?: SigveloDate["weekday"] | undefined;
  /** The representation of the era. */
  era?: SigveloDate["era"] | undefined;
  /** The representation of the year. */
  year?: SigveloDate["year"] | undefined;
  /** The representation of the month. */
  month?: SigveloDate["month"] | undefined;
  /** The representation of the day. */
  day?: SigveloDate["day"] | undefined;
  /** The formatting style used for day periods like "in the morning", "am", "noon", "n" etc. This option only has an
effect if a 12-hour clock is used. */
  "day-period"?: SigveloDate["dayPeriod"] | undefined;
  /** The formatting style used for day periods like "in the morning", "am", "noon", "n" etc. This option only has an
effect if a 12-hour clock is used. */
  dayPeriod?: SigveloDate["dayPeriod"] | undefined;
  /** The representation of the hour. */
  hour?: SigveloDate["hour"] | undefined;
  /** The representation of the minute. */
  minute?: SigveloDate["minute"] | undefined;
  /** The representation of the second. */
  second?: SigveloDate["second"] | undefined;
  /** The number of digits used to represent fractions of a second (any additional digits are truncated). */
  "fractional-second-digits"?:
    | SigveloDate["fractionalSecondDigits"]
    | undefined;
  /** The number of digits used to represent fractions of a second (any additional digits are truncated). */
  fractionalSecondDigits?: SigveloDate["fractionalSecondDigits"] | undefined;
  /** The localized representation of the time zone name. */
  "time-zone-name"?: SigveloDate["timeZoneName"] | undefined;
  /** The localized representation of the time zone name. */
  timeZoneName?: SigveloDate["timeZoneName"] | undefined;
  /** The format matching algorithm to use. */
  "format-matcher"?: SigveloDate["formatMatcher"] | undefined;
  /** The format matching algorithm to use. */
  formatMatcher?: SigveloDate["formatMatcher"] | undefined;
};

export type SigveloDateSolidJsProps = {
  /** The date to format. If an attribute is passed, the date should be an [ISO 8601 string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).
If set as a property, a `Date` object can be used instead. If unset, the current date will be assumed. */
  "prop:date"?: SigveloDate["date"] | undefined;
  /** A shortcut property for formatting the date. This can be used with `time-style`, but not with other formatting
properties such as `weekday`, `hour`, `month`, etc. */
  "attr:date-style"?: SigveloDate["dateStyle"] | undefined;
  /** A shortcut property for formatting the date. This can be used with `time-style`, but not with other formatting
properties such as `weekday`, `hour`, `month`, etc. */
  "prop:dateStyle"?: SigveloDate["dateStyle"] | undefined;
  /** A shortcut property for formatting the time. This can be used with `date-style`, but not with other formatting
properties such as `weekday`, `hour`, `month`, etc. */
  "attr:time-style"?: SigveloDate["timeStyle"] | undefined;
  /** A shortcut property for formatting the time. This can be used with `date-style`, but not with other formatting
properties such as `weekday`, `hour`, `month`, etc. */
  "prop:timeStyle"?: SigveloDate["timeStyle"] | undefined;
  /** Whether to use 12-hour time (as opposed to 24-hour time). If `auto`, the default value is determined by the user's
locale. */
  "attr:hour-format"?: SigveloDate["hourFormat"] | undefined;
  /** Whether to use 12-hour time (as opposed to 24-hour time). If `auto`, the default value is determined by the user's
locale. */
  "prop:hourFormat"?: SigveloDate["hourFormat"] | undefined;
  /** The hour cycle to use. */
  "prop:hourCycle"?: SigveloDate["hourCycle"] | undefined;
  /** The time zone to use. The default is the user's default time zone. */
  "attr:time-zone"?: SigveloDate["timeZone"] | undefined;
  /** The time zone to use. The default is the user's default time zone. */
  "prop:timeZone"?: SigveloDate["timeZone"] | undefined;
  /** The representation of the weekday. */
  "prop:weekday"?: SigveloDate["weekday"] | undefined;
  /** The representation of the era. */
  "prop:era"?: SigveloDate["era"] | undefined;
  /** The representation of the year. */
  "prop:year"?: SigveloDate["year"] | undefined;
  /** The representation of the month. */
  "prop:month"?: SigveloDate["month"] | undefined;
  /** The representation of the day. */
  "prop:day"?: SigveloDate["day"] | undefined;
  /** The formatting style used for day periods like "in the morning", "am", "noon", "n" etc. This option only has an
effect if a 12-hour clock is used. */
  "attr:day-period"?: SigveloDate["dayPeriod"] | undefined;
  /** The formatting style used for day periods like "in the morning", "am", "noon", "n" etc. This option only has an
effect if a 12-hour clock is used. */
  "prop:dayPeriod"?: SigveloDate["dayPeriod"] | undefined;
  /** The representation of the hour. */
  "prop:hour"?: SigveloDate["hour"] | undefined;
  /** The representation of the minute. */
  "prop:minute"?: SigveloDate["minute"] | undefined;
  /** The representation of the second. */
  "prop:second"?: SigveloDate["second"] | undefined;
  /** The number of digits used to represent fractions of a second (any additional digits are truncated). */
  "attr:fractional-second-digits"?:
    | SigveloDate["fractionalSecondDigits"]
    | undefined;
  /** The number of digits used to represent fractions of a second (any additional digits are truncated). */
  "prop:fractionalSecondDigits"?:
    | SigveloDate["fractionalSecondDigits"]
    | undefined;
  /** The localized representation of the time zone name. */
  "attr:time-zone-name"?: SigveloDate["timeZoneName"] | undefined;
  /** The localized representation of the time zone name. */
  "prop:timeZoneName"?: SigveloDate["timeZoneName"] | undefined;
  /** The format matching algorithm to use. */
  "attr:format-matcher"?: SigveloDate["formatMatcher"] | undefined;
  /** The format matching algorithm to use. */
  "prop:formatMatcher"?: SigveloDate["formatMatcher"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloDataTable` component event */
export type SigveloDataTableElementEvent<E = Event> = TypedEvent<
  SigveloDataTable,
  E
>;

export type SigveloDataTableProps = {
  /** The row field used as its stable selection key. */
  "key-field"?: SigveloDataTable["keyField"] | undefined;
  /** The row field used as its stable selection key. */
  keyField?: SigveloDataTable["keyField"] | undefined;
  /** Enables no selection, single selection, or multiple selection. */
  selection?: SigveloDataTable["selection"] | undefined;
  /** Optional visible table caption. */
  caption?: SigveloDataTable["caption"] | undefined;
  /** Message displayed when there are no rows. */
  "empty-text"?: SigveloDataTable["emptyText"] | undefined;
  /** Message displayed when there are no rows. */
  emptyText?: SigveloDataTable["emptyText"] | undefined;
  /** Column definitions, in display order. */
  columns?: SigveloDataTable["columns"] | undefined;
  /** Row objects displayed by the table. */
  rows?: SigveloDataTable["rows"] | undefined;
  /** The currently selected row keys. */
  selectedKeys?: SigveloDataTable["selectedKeys"] | undefined;

  /** Emitted when a selectable row changes. The detail contains `rowKey`, `selected`, and the complete `selectedKeys` array. */
  "onsigvelo-row-select"?:
    | ((e: SigveloDataTableElementEvent) => void)
    | undefined;
};

export type SigveloDataTableSolidJsProps = {
  /** The row field used as its stable selection key. */
  "attr:key-field"?: SigveloDataTable["keyField"] | undefined;
  /** The row field used as its stable selection key. */
  "prop:keyField"?: SigveloDataTable["keyField"] | undefined;
  /** Enables no selection, single selection, or multiple selection. */
  "prop:selection"?: SigveloDataTable["selection"] | undefined;
  /** Optional visible table caption. */
  "prop:caption"?: SigveloDataTable["caption"] | undefined;
  /** Message displayed when there are no rows. */
  "attr:empty-text"?: SigveloDataTable["emptyText"] | undefined;
  /** Message displayed when there are no rows. */
  "prop:emptyText"?: SigveloDataTable["emptyText"] | undefined;
  /** Column definitions, in display order. */
  "prop:columns"?: SigveloDataTable["columns"] | undefined;
  /** Row objects displayed by the table. */
  "prop:rows"?: SigveloDataTable["rows"] | undefined;
  /** The currently selected row keys. */
  "prop:selectedKeys"?: SigveloDataTable["selectedKeys"] | undefined;
  /** Emitted when a selectable row changes. The detail contains `rowKey`, `selected`, and the complete `selectedKeys` array. */
  "on:sigvelo-row-select"?:
    | ((e: SigveloDataTableElementEvent) => void)
    | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloDividerProps = {
  /** Sets the divider's orientation. */
  orientation?: SigveloDivider["orientation"] | undefined;
};

export type SigveloDividerSolidJsProps = {
  /** Sets the divider's orientation. */
  "prop:orientation"?: SigveloDivider["orientation"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloDropdownItemProps = {
  /** An optional value for the menu item. This is useful for determining which item was selected when listening to the
dropdown's `sigvelo-select` event. */
  value?: SigveloDropdownItem["value"] | undefined;
  /** Set to `checkbox` to make the item a checkbox. */
  type?: SigveloDropdownItem["type"] | undefined;
  /** The type of menu item to render. */
  color?: SigveloDropdownItem["color"] | undefined;
  /** Set to true to check the dropdown item. Only valid when `type` is `checkbox`. */
  checked?: SigveloDropdownItem["checked"] | undefined;
  /** Disables the dropdown item. */
  disabled?: SigveloDropdownItem["disabled"] | undefined;
  /** Whether the submenu is currently open. */
  submenuOpen?: SigveloDropdownItem["submenuOpen"] | undefined;
  /** Tells the dropdown item to behave like a link. When selected, the browser will navigate to the target URL. */
  href?: SigveloDropdownItem["href"] | undefined;
  /** Opens the link in the specified target. Only works when `href` is provided. */
  target?: SigveloDropdownItem["target"] | undefined;
  /** Sets the link's `rel` attribute. Only works when `href` is provided. When linking to an external domain, you should
probably set this to `noreferrer noopener`. */
  rel?: SigveloDropdownItem["rel"] | undefined;
  /** Sets the link's `download` attribute, causing the linked file to be downloaded. Only works when `href` is provided. */
  download?: SigveloDropdownItem["download"] | undefined;
  /**  */
  hiddenLink?: SigveloDropdownItem["hiddenLink"] | undefined;
  /**  */
  submenuElement?: SigveloDropdownItem["submenuElement"] | undefined;
};

export type SigveloDropdownItemSolidJsProps = {
  /** An optional value for the menu item. This is useful for determining which item was selected when listening to the
dropdown's `sigvelo-select` event. */
  "prop:value"?: SigveloDropdownItem["value"] | undefined;
  /** Set to `checkbox` to make the item a checkbox. */
  "prop:type"?: SigveloDropdownItem["type"] | undefined;
  /** The type of menu item to render. */
  "prop:color"?: SigveloDropdownItem["color"] | undefined;
  /** Set to true to check the dropdown item. Only valid when `type` is `checkbox`. */
  "prop:checked"?: SigveloDropdownItem["checked"] | undefined;
  /** Disables the dropdown item. */
  "prop:disabled"?: SigveloDropdownItem["disabled"] | undefined;
  /** Whether the submenu is currently open. */
  "prop:submenuOpen"?: SigveloDropdownItem["submenuOpen"] | undefined;
  /** Tells the dropdown item to behave like a link. When selected, the browser will navigate to the target URL. */
  "prop:href"?: SigveloDropdownItem["href"] | undefined;
  /** Opens the link in the specified target. Only works when `href` is provided. */
  "prop:target"?: SigveloDropdownItem["target"] | undefined;
  /** Sets the link's `rel` attribute. Only works when `href` is provided. When linking to an external domain, you should
probably set this to `noreferrer noopener`. */
  "prop:rel"?: SigveloDropdownItem["rel"] | undefined;
  /** Sets the link's `download` attribute, causing the linked file to be downloaded. Only works when `href` is provided. */
  "prop:download"?: SigveloDropdownItem["download"] | undefined;
  /**  */
  "prop:hiddenLink"?: SigveloDropdownItem["hiddenLink"] | undefined;
  /**  */
  "prop:submenuElement"?: SigveloDropdownItem["submenuElement"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloDropdown` component event */
export type SigveloDropdownElementEvent<E = Event> = TypedEvent<
  SigveloDropdown,
  E
>;

export type SigveloDropdownProps = {
  /** Opens or closes the dropdown. */
  open?: SigveloDropdown["open"] | undefined;
  /** The ID of an element to apply the dropdown as a context menu. */
  "context-menu"?: SigveloDropdown["contextMenu"] | undefined;
  /** The ID of an element to apply the dropdown as a context menu. */
  contextMenu?: SigveloDropdown["contextMenu"] | undefined;
  /** The placement of the dropdown menu in reference to the trigger. The menu will shift to a more optimal location if
the preferred placement doesn't have enough room. */
  placement?: SigveloDropdown["placement"] | undefined;
  /** The distance of the dropdown menu from its trigger. */
  distance?: SigveloDropdown["distance"] | undefined;
  /** The offset of the dropdown menu along its trigger. */
  offset?: SigveloDropdown["offset"] | undefined;
  /**  */
  defaultSlot?: SigveloDropdown["defaultSlot"] | undefined;

  /** Emitted when the dropdown is instructed to open but before it is shown. */
  "onsigvelo-before-open"?:
    | ((e: SigveloDropdownElementEvent) => void)
    | undefined;
  /** Emitted when the dropdown menu has opened and the animation has completed. */
  "onsigvelo-open"?: ((e: SigveloDropdownElementEvent) => void) | undefined;
  /** Emitted when the dropdown is dismissed but before it is hidden. */
  "onsigvelo-before-close"?:
    | ((e: SigveloDropdownElementEvent) => void)
    | undefined;
  /** Emitted when the dropdown menu has closed and the animation has completed. */
  "onsigvelo-close"?: ((e: SigveloDropdownElementEvent) => void) | undefined;
  /** Emitted when a dropdown item has been selected. You can inspect `event.detail.item` to see the `<sigvelo-dropdown-item>` that was selected. Calling `event.preventDefault()` will keep the dropdown open. */
  "onsigvelo-select"?: ((e: SigveloDropdownElementEvent) => void) | undefined;
};

export type SigveloDropdownSolidJsProps = {
  /** Opens or closes the dropdown. */
  "prop:open"?: SigveloDropdown["open"] | undefined;
  /** The ID of an element to apply the dropdown as a context menu. */
  "attr:context-menu"?: SigveloDropdown["contextMenu"] | undefined;
  /** The ID of an element to apply the dropdown as a context menu. */
  "prop:contextMenu"?: SigveloDropdown["contextMenu"] | undefined;
  /** The placement of the dropdown menu in reference to the trigger. The menu will shift to a more optimal location if
the preferred placement doesn't have enough room. */
  "prop:placement"?: SigveloDropdown["placement"] | undefined;
  /** The distance of the dropdown menu from its trigger. */
  "prop:distance"?: SigveloDropdown["distance"] | undefined;
  /** The offset of the dropdown menu along its trigger. */
  "prop:offset"?: SigveloDropdown["offset"] | undefined;
  /**  */
  "prop:defaultSlot"?: SigveloDropdown["defaultSlot"] | undefined;
  /** Emitted when the dropdown is instructed to open but before it is shown. */
  "on:sigvelo-before-open"?:
    | ((e: SigveloDropdownElementEvent) => void)
    | undefined;
  /** Emitted when the dropdown menu has opened and the animation has completed. */
  "on:sigvelo-open"?: ((e: SigveloDropdownElementEvent) => void) | undefined;
  /** Emitted when the dropdown is dismissed but before it is hidden. */
  "on:sigvelo-before-close"?:
    | ((e: SigveloDropdownElementEvent) => void)
    | undefined;
  /** Emitted when the dropdown menu has closed and the animation has completed. */
  "on:sigvelo-close"?: ((e: SigveloDropdownElementEvent) => void) | undefined;
  /** Emitted when a dropdown item has been selected. You can inspect `event.detail.item` to see the `<sigvelo-dropdown-item>` that was selected. Calling `event.preventDefault()` will keep the dropdown open. */
  "on:sigvelo-select"?: ((e: SigveloDropdownElementEvent) => void) | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloEmptyStateProps = {};

export type SigveloEmptyStateSolidJsProps = {
  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloEmptyResultProps = {
  /** The empty-result heading. */
  title?: SigveloEmptyResult["title"] | undefined;
  /** Optional guidance for recovering from the empty state. */
  description?: SigveloEmptyResult["description"] | undefined;
};

export type SigveloEmptyResultSolidJsProps = {
  /** The empty-result heading. */
  "prop:title"?: SigveloEmptyResult["title"] | undefined;
  /** Optional guidance for recovering from the empty state. */
  "prop:description"?: SigveloEmptyResult["description"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloExpander` component event */
export type SigveloExpanderElementEvent<E = Event> = TypedEvent<
  SigveloExpander,
  E
>;

export type SigveloExpanderProps = {
  /** Whether the content is expanded */
  expanded?: SigveloExpander["expanded"] | undefined;
  /** Disables the expand/collapse functionality */
  disabled?: SigveloExpander["disabled"] | undefined;
  /** When true, the shadow above collapsed content will not be rendered. */
  "without-shadow"?: SigveloExpander["withoutShadow"] | undefined;
  /** When true, the shadow above collapsed content will not be rendered. */
  withoutShadow?: SigveloExpander["withoutShadow"] | undefined;
  /**  */
  content?: SigveloExpander["content"] | undefined;
  /**  */
  trigger?: SigveloExpander["trigger"] | undefined;

  /** Emitted before the expander opens. Cancelable event that prevents opening when canceled. */
  "onsigvelo-before-open"?:
    | ((e: SigveloExpanderElementEvent) => void)
    | undefined;
  /** Emitted after the expander has opened. */
  "onsigvelo-open"?: ((e: SigveloExpanderElementEvent) => void) | undefined;
  /** Emitted before the expander closes. Cancelable event that prevents closing when canceled. */
  "onsigvelo-before-close"?:
    | ((e: SigveloExpanderElementEvent) => void)
    | undefined;
  /** Emitted after the expander has closed. */
  "onsigvelo-close"?: ((e: SigveloExpanderElementEvent) => void) | undefined;
};

export type SigveloExpanderSolidJsProps = {
  /** Whether the content is expanded */
  "prop:expanded"?: SigveloExpander["expanded"] | undefined;
  /** Disables the expand/collapse functionality */
  "prop:disabled"?: SigveloExpander["disabled"] | undefined;
  /** When true, the shadow above collapsed content will not be rendered. */
  "bool:without-shadow"?: SigveloExpander["withoutShadow"] | undefined;
  /** When true, the shadow above collapsed content will not be rendered. */
  "prop:withoutShadow"?: SigveloExpander["withoutShadow"] | undefined;
  /**  */
  "prop:content"?: SigveloExpander["content"] | undefined;
  /**  */
  "prop:trigger"?: SigveloExpander["trigger"] | undefined;
  /** Emitted before the expander opens. Cancelable event that prevents opening when canceled. */
  "on:sigvelo-before-open"?:
    | ((e: SigveloExpanderElementEvent) => void)
    | undefined;
  /** Emitted after the expander has opened. */
  "on:sigvelo-open"?: ((e: SigveloExpanderElementEvent) => void) | undefined;
  /** Emitted before the expander closes. Cancelable event that prevents closing when canceled. */
  "on:sigvelo-before-close"?:
    | ((e: SigveloExpanderElementEvent) => void)
    | undefined;
  /** Emitted after the expander has closed. */
  "on:sigvelo-close"?: ((e: SigveloExpanderElementEvent) => void) | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloFieldProps = {
  /** The field label text. */
  label?: SigveloField["label"] | undefined;
  /** Help text displayed below the control. */
  description?: SigveloField["description"] | undefined;
  /** Error message displayed below the control. Puts the field in an error state. */
  error?: SigveloField["error"] | undefined;
  /** Marks the field as required. Shows the required indicator on the label. */
  required?: SigveloField["required"] | undefined;
};

export type SigveloFieldSolidJsProps = {
  /** The field label text. */
  "prop:label"?: SigveloField["label"] | undefined;
  /** Help text displayed below the control. */
  "prop:description"?: SigveloField["description"] | undefined;
  /** Error message displayed below the control. Puts the field in an error state. */
  "prop:error"?: SigveloField["error"] | undefined;
  /** Marks the field as required. Shows the required indicator on the label. */
  "prop:required"?: SigveloField["required"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloFileInput` component event */
export type SigveloFileInputElementEvent<E = Event> = TypedEvent<
  SigveloFileInput,
  E
>;

export type SigveloFileInputProps = {
  /** The text field's label. If you need to provide HTML in the label, use the `label` slot instead. */
  label?: SigveloFileInput["label"] | undefined;
  /** The text field's description. If you need to provide HTML in the description, use the `description` slot instead. */
  description?: SigveloFileInput["description"] | undefined;
  /** The name of the file input. This will be submitted with the form as a name/value pair. */
  name?: SigveloFileInput["name"] | undefined;
  /** Disables the file input. */
  disabled?: SigveloFileInput["disabled"] | undefined;
  /** A list of acceptable file types. Must be a comma-separated list of [unique file type
specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers). */
  accept?: SigveloFileInput["accept"] | undefined;
  /** Allows more than one file to be selected. */
  multiple?: SigveloFileInput["multiple"] | undefined;
  /** The file input's size. */
  size?: SigveloFileInput["size"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an ID of a form in the same document or shadow root. */
  form?: SigveloFileInput["form"] | undefined;
  /** Makes the file input required. Form submission will not be allowed when this is set and no files are selected. */
  required?: SigveloFileInput["required"] | undefined;
  /**  */
  dropzone?: SigveloFileInput["dropzone"] | undefined;
  /**  */
  fileInput?: SigveloFileInput["fileInput"] | undefined;
  /**  */
  isDragging?: SigveloFileInput["isDragging"] | undefined;
  /**  */
  isInvalid?: SigveloFileInput["isInvalid"] | undefined;
  /**  */
  hadUserInteraction?: SigveloFileInput["hadUserInteraction"] | undefined;
  /**  */
  wasSubmitted?: SigveloFileInput["wasSubmitted"] | undefined;
  /** An array of files that are currently selected. (Property only) */
  files?: SigveloFileInput["files"] | undefined;

  /** Emitted when the file input loses focus. This event does not bubble. */
  "onsigvelo-blur"?: ((e: SigveloFileInputElementEvent) => void) | undefined;
  /** Emitted when the user selects or removes a file. */
  "onsigvelo-change"?: ((e: SigveloFileInputElementEvent) => void) | undefined;
  /** Emitted when the file input receives focus. This event does not bubble. */
  "onsigvelo-focus"?: ((e: SigveloFileInputElementEvent) => void) | undefined;
  /** Emitted when the file input receives input. */
  "onsigvelo-input"?: ((e: SigveloFileInputElementEvent) => void) | undefined;
};

export type SigveloFileInputSolidJsProps = {
  /** The text field's label. If you need to provide HTML in the label, use the `label` slot instead. */
  "prop:label"?: SigveloFileInput["label"] | undefined;
  /** The text field's description. If you need to provide HTML in the description, use the `description` slot instead. */
  "prop:description"?: SigveloFileInput["description"] | undefined;
  /** The name of the file input. This will be submitted with the form as a name/value pair. */
  "prop:name"?: SigveloFileInput["name"] | undefined;
  /** Disables the file input. */
  "prop:disabled"?: SigveloFileInput["disabled"] | undefined;
  /** A list of acceptable file types. Must be a comma-separated list of [unique file type
specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers). */
  "prop:accept"?: SigveloFileInput["accept"] | undefined;
  /** Allows more than one file to be selected. */
  "prop:multiple"?: SigveloFileInput["multiple"] | undefined;
  /** The file input's size. */
  "prop:size"?: SigveloFileInput["size"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an ID of a form in the same document or shadow root. */
  "prop:form"?: SigveloFileInput["form"] | undefined;
  /** Makes the file input required. Form submission will not be allowed when this is set and no files are selected. */
  "prop:required"?: SigveloFileInput["required"] | undefined;
  /**  */
  "prop:dropzone"?: SigveloFileInput["dropzone"] | undefined;
  /**  */
  "prop:fileInput"?: SigveloFileInput["fileInput"] | undefined;
  /**  */
  "prop:isDragging"?: SigveloFileInput["isDragging"] | undefined;
  /**  */
  "prop:isInvalid"?: SigveloFileInput["isInvalid"] | undefined;
  /**  */
  "prop:hadUserInteraction"?:
    | SigveloFileInput["hadUserInteraction"]
    | undefined;
  /**  */
  "prop:wasSubmitted"?: SigveloFileInput["wasSubmitted"] | undefined;
  /** An array of files that are currently selected. (Property only) */
  "prop:files"?: SigveloFileInput["files"] | undefined;
  /** Emitted when the file input loses focus. This event does not bubble. */
  "on:sigvelo-blur"?: ((e: SigveloFileInputElementEvent) => void) | undefined;
  /** Emitted when the user selects or removes a file. */
  "on:sigvelo-change"?: ((e: SigveloFileInputElementEvent) => void) | undefined;
  /** Emitted when the file input receives focus. This event does not bubble. */
  "on:sigvelo-focus"?: ((e: SigveloFileInputElementEvent) => void) | undefined;
  /** Emitted when the file input receives input. */
  "on:sigvelo-input"?: ((e: SigveloFileInputElementEvent) => void) | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloFilterBar` component event */
export type SigveloFilterBarElementEvent<E = Event> = TypedEvent<
  SigveloFilterBar,
  E
>;

export type SigveloFilterBarProps = {
  /** The accessible visible label. */
  label?: SigveloFilterBar["label"] | undefined;
  /** Placeholder displayed when the query is empty. */
  placeholder?: SigveloFilterBar["placeholder"] | undefined;
  /** The controlled filter query. */
  query?: SigveloFilterBar["query"] | undefined;

  /** Emitted on each query change with `{ query }`. */
  "onsigvelo-filter-change"?:
    | ((e: SigveloFilterBarElementEvent) => void)
    | undefined;
};

export type SigveloFilterBarSolidJsProps = {
  /** The accessible visible label. */
  "prop:label"?: SigveloFilterBar["label"] | undefined;
  /** Placeholder displayed when the query is empty. */
  "prop:placeholder"?: SigveloFilterBar["placeholder"] | undefined;
  /** The controlled filter query. */
  "prop:query"?: SigveloFilterBar["query"] | undefined;
  /** Emitted on each query change with `{ query }`. */
  "on:sigvelo-filter-change"?:
    | ((e: SigveloFilterBarElementEvent) => void)
    | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloFormSectionProps = {
  /** The section title rendered as a fieldset legend. */
  title?: SigveloFormSection["title"] | undefined;
  /** Optional supporting description. */
  description?: SigveloFormSection["description"] | undefined;
};

export type SigveloFormSectionSolidJsProps = {
  /** The section title rendered as a fieldset legend. */
  "prop:title"?: SigveloFormSection["title"] | undefined;
  /** Optional supporting description. */
  "prop:description"?: SigveloFormSection["description"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloInclude` component event */
export type SigveloIncludeElementEvent<E = Event> = TypedEvent<
  SigveloInclude,
  E
>;

export type SigveloIncludeProps = {
  /** The URL of the file to include. Must be a CORS-enabled endpoint. */
  src?: SigveloInclude["src"] | undefined;
  /** The mode to use when fetching the request. */
  mode?: SigveloInclude["mode"] | undefined;
  /** By default, scripts in included files will not be executed. Setting this to true will allow them to run. If you use
this option, make sure you trust the included HTML, otherwise you may become vulnerable to XSS exploits. */
  "allow-scripts"?: SigveloInclude["allowScripts"] | undefined;
  /** By default, scripts in included files will not be executed. Setting this to true will allow them to run. If you use
this option, make sure you trust the included HTML, otherwise you may become vulnerable to XSS exploits. */
  allowScripts?: SigveloInclude["allowScripts"] | undefined;

  /** Emitted when the include file has been fetched and rendered. The HTTP status code will be available in `event.detail.status`. This event does not bubble. */
  "onsigvelo-included"?: ((e: SigveloIncludeElementEvent) => void) | undefined;
  /** Emitted when the fetch results in a network error or receives an HTTP response outside of the 200 range. If a network error occurs, it will be available in `event.detail.error`. If an HTTP status code was returned, it will be available in `event.detail.status`. This event does not bubble. */
  "onsigvelo-include-error"?:
    | ((e: SigveloIncludeElementEvent) => void)
    | undefined;
};

export type SigveloIncludeSolidJsProps = {
  /** The URL of the file to include. Must be a CORS-enabled endpoint. */
  "prop:src"?: SigveloInclude["src"] | undefined;
  /** The mode to use when fetching the request. */
  "prop:mode"?: SigveloInclude["mode"] | undefined;
  /** By default, scripts in included files will not be executed. Setting this to true will allow them to run. If you use
this option, make sure you trust the included HTML, otherwise you may become vulnerable to XSS exploits. */
  "bool:allow-scripts"?: SigveloInclude["allowScripts"] | undefined;
  /** By default, scripts in included files will not be executed. Setting this to true will allow them to run. If you use
this option, make sure you trust the included HTML, otherwise you may become vulnerable to XSS exploits. */
  "prop:allowScripts"?: SigveloInclude["allowScripts"] | undefined;
  /** Emitted when the include file has been fetched and rendered. The HTTP status code will be available in `event.detail.status`. This event does not bubble. */
  "on:sigvelo-included"?: ((e: SigveloIncludeElementEvent) => void) | undefined;
  /** Emitted when the fetch results in a network error or receives an HTTP response outside of the 200 range. If a network error occurs, it will be available in `event.detail.error`. If an HTTP status code was returned, it will be available in `event.detail.status`. This event does not bubble. */
  "on:sigvelo-include-error"?:
    | ((e: SigveloIncludeElementEvent) => void)
    | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloInfiniteScroller` component event */
export type SigveloInfiniteScrollerElementEvent<E = Event> = TypedEvent<
  SigveloInfiniteScroller,
  E
>;

export type SigveloInfiniteScrollerProps = {
  /** An accessible label for the feed. */
  label?: SigveloInfiniteScroller["label"] | undefined;
  /** The scroll threshold at which to trigger loading more items. Accepts percentages (e.g., "20%") or pixels
(e.g., "200px"). */
  threshold?: SigveloInfiniteScroller["threshold"] | undefined;
  /**  */
  defaultSlot?: SigveloInfiniteScroller["defaultSlot"] | undefined;
  /**  */
  isLoading?: SigveloInfiniteScroller["isLoading"] | undefined;
  /**  */
  isComplete?: SigveloInfiniteScroller["isComplete"] | undefined;

  /** Emitted when scrolling reaches the threshold and more items should be loaded. */
  "onsigvelo-load-more"?:
    | ((e: SigveloInfiniteScrollerElementEvent) => void)
    | undefined;
};

export type SigveloInfiniteScrollerSolidJsProps = {
  /** An accessible label for the feed. */
  "prop:label"?: SigveloInfiniteScroller["label"] | undefined;
  /** The scroll threshold at which to trigger loading more items. Accepts percentages (e.g., "20%") or pixels
(e.g., "200px"). */
  "prop:threshold"?: SigveloInfiniteScroller["threshold"] | undefined;
  /**  */
  "prop:defaultSlot"?: SigveloInfiniteScroller["defaultSlot"] | undefined;
  /**  */
  "prop:isLoading"?: SigveloInfiniteScroller["isLoading"] | undefined;
  /**  */
  "prop:isComplete"?: SigveloInfiniteScroller["isComplete"] | undefined;
  /** Emitted when scrolling reaches the threshold and more items should be loaded. */
  "on:sigvelo-load-more"?:
    | ((e: SigveloInfiniteScrollerElementEvent) => void)
    | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloIntersectionObserver` component event */
export type SigveloIntersectionObserverElementEvent<E = Event> = TypedEvent<
  SigveloIntersectionObserver,
  E
>;

export type SigveloIntersectionObserverProps = {
  /** The ID of the element to use as as the bounding box of the viewport for the observed targets. */
  root?: SigveloIntersectionObserver["root"] | undefined;
  /** Margin around the root. Can have values similar to the CSS margin property. */
  "root-margin"?: SigveloIntersectionObserver["rootMargin"] | undefined;
  /** Margin around the root. Can have values similar to the CSS margin property. */
  rootMargin?: SigveloIntersectionObserver["rootMargin"] | undefined;
  /** Either a single number or space-delimited numbers which indicate at what percentage of the target's visibility the observer's callback should be executed. */
  threshold?: SigveloIntersectionObserver["threshold"] | undefined;
  /** A CSS class name to apply to elements while they're intersecting. The class will be removed when the element is no
longer in the viewport. This allows you to apply styles to elements as they enter and exit the viewport using pure
CSS. */
  "intersect-class"?: SigveloIntersectionObserver["intersectClass"] | undefined;
  /** A CSS class name to apply to elements while they're intersecting. The class will be removed when the element is no
longer in the viewport. This allows you to apply styles to elements as they enter and exit the viewport using pure
CSS. */
  intersectClass?: SigveloIntersectionObserver["intersectClass"] | undefined;
  /** When true, stops observing after the first intersection. */
  once?: SigveloIntersectionObserver["once"] | undefined;
  /** Disables the intersection observer. */
  disabled?: SigveloIntersectionObserver["disabled"] | undefined;

  /** Emitted when an observed element starts or stops intersecting. `event.detail.entry` contains the respective [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) object. */
  "onsigvelo-intersect"?:
    | ((e: SigveloIntersectionObserverElementEvent) => void)
    | undefined;
};

export type SigveloIntersectionObserverSolidJsProps = {
  /** The ID of the element to use as as the bounding box of the viewport for the observed targets. */
  "prop:root"?: SigveloIntersectionObserver["root"] | undefined;
  /** Margin around the root. Can have values similar to the CSS margin property. */
  "attr:root-margin"?: SigveloIntersectionObserver["rootMargin"] | undefined;
  /** Margin around the root. Can have values similar to the CSS margin property. */
  "prop:rootMargin"?: SigveloIntersectionObserver["rootMargin"] | undefined;
  /** Either a single number or space-delimited numbers which indicate at what percentage of the target's visibility the observer's callback should be executed. */
  "prop:threshold"?: SigveloIntersectionObserver["threshold"] | undefined;
  /** A CSS class name to apply to elements while they're intersecting. The class will be removed when the element is no
longer in the viewport. This allows you to apply styles to elements as they enter and exit the viewport using pure
CSS. */
  "attr:intersect-class"?:
    | SigveloIntersectionObserver["intersectClass"]
    | undefined;
  /** A CSS class name to apply to elements while they're intersecting. The class will be removed when the element is no
longer in the viewport. This allows you to apply styles to elements as they enter and exit the viewport using pure
CSS. */
  "prop:intersectClass"?:
    | SigveloIntersectionObserver["intersectClass"]
    | undefined;
  /** When true, stops observing after the first intersection. */
  "prop:once"?: SigveloIntersectionObserver["once"] | undefined;
  /** Disables the intersection observer. */
  "prop:disabled"?: SigveloIntersectionObserver["disabled"] | undefined;
  /** Emitted when an observed element starts or stops intersecting. `event.detail.entry` contains the respective [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) object. */
  "on:sigvelo-intersect"?:
    | ((e: SigveloIntersectionObserverElementEvent) => void)
    | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloListboxItemProps = {
  /** The listbox item's label. If you need to provide HTML in the label, use the `label` slot instead. */
  label?: SigveloListboxItem["label"] | undefined;
  /** The listbox item's description. If you need to provide HTML in the description, use the `description` slot instead. */
  description?: SigveloListboxItem["description"] | undefined;
  /** The listbox item's value. */
  value?: SigveloListboxItem["value"] | undefined;
  /** The listbox item's selected state. */
  selected?: SigveloListboxItem["selected"] | undefined;
  /** Disables the listbox item. */
  disabled?: SigveloListboxItem["disabled"] | undefined;
};

export type SigveloListboxItemSolidJsProps = {
  /** The listbox item's label. If you need to provide HTML in the label, use the `label` slot instead. */
  "prop:label"?: SigveloListboxItem["label"] | undefined;
  /** The listbox item's description. If you need to provide HTML in the description, use the `description` slot instead. */
  "prop:description"?: SigveloListboxItem["description"] | undefined;
  /** The listbox item's value. */
  "prop:value"?: SigveloListboxItem["value"] | undefined;
  /** The listbox item's selected state. */
  "prop:selected"?: SigveloListboxItem["selected"] | undefined;
  /** Disables the listbox item. */
  "prop:disabled"?: SigveloListboxItem["disabled"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloListbox` component event */
export type SigveloListboxElementEvent<E = Event> = TypedEvent<
  SigveloListbox,
  E
>;

export type SigveloListboxProps = {
  /** The listbox's label. If you need to provide HTML in the label, use the `label` slot instead. */
  label?: SigveloListbox["label"] | undefined;
  /** The listbox's description. If you need to provide HTML in the description, use the `description` slot instead. */
  description?: SigveloListbox["description"] | undefined;
  /** The name of the listbox. This will be submitted with the form as a name/value pair. */
  name?: SigveloListbox["name"] | undefined;
  /** Enables multiple selection mode. */
  multiple?: SigveloListbox["multiple"] | undefined;
  /** Disables the listbox. */
  disabled?: SigveloListbox["disabled"] | undefined;
  /** Makes the text field a read-only field. */
  readonly?: SigveloListbox["readonly"] | undefined;
  /** The text field's size. */
  size?: SigveloListbox["size"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an ID of a form in the same document or shadow root. */
  form?: SigveloListbox["form"] | undefined;
  /** Makes the listbox required. Form submission will not be allowed when this is set and the listbox is blank. */
  required?: SigveloListbox["required"] | undefined;
  /** The listbox's value. For multiple selection, this will be the value of the first selected item. */
  value?: SigveloListbox["value"] | undefined;
  /** Gets or sets the currently selected values as an array. This property provides a consistent way to access or modify
the selection state regardless of whether the listbox is in single or multiple selection mode.

In single selection mode, it returns an array with either zero or one value. In multiple selection mode, it returns
an array of all selected values.

When setting this property in single mode, the first value in the array (if any) becomes the selected value. In
multiple mode, all values in the array become selected. */
  selectedValues?: SigveloListbox["selectedValues"] | undefined;
  /** Gets or sets an array of selected listbox items. */
  selectedItems?: SigveloListbox["selectedItems"] | undefined;

  /** Emitted when the list box loses focus. This event does not bubble. */
  "onsigvelo-blur"?: ((e: SigveloListboxElementEvent) => void) | undefined;
  /** Emitted when the user commits changes to the list box's selection. In single select mode, it occurs when a change is made and the listbox loses focus. In multiselect mode, it occurs whenever an option is toggled even while the listbox has focus. */
  "onsigvelo-change"?: ((e: SigveloListboxElementEvent) => void) | undefined;
  /** Emitted when the list box receives focus. This event does not bubble. */
  "onsigvelo-focus"?: ((e: SigveloListboxElementEvent) => void) | undefined;
  /** Emitted when the list box's selection changes from user input. */
  "onsigvelo-input"?: ((e: SigveloListboxElementEvent) => void) | undefined;
};

export type SigveloListboxSolidJsProps = {
  /** The listbox's label. If you need to provide HTML in the label, use the `label` slot instead. */
  "prop:label"?: SigveloListbox["label"] | undefined;
  /** The listbox's description. If you need to provide HTML in the description, use the `description` slot instead. */
  "prop:description"?: SigveloListbox["description"] | undefined;
  /** The name of the listbox. This will be submitted with the form as a name/value pair. */
  "prop:name"?: SigveloListbox["name"] | undefined;
  /** Enables multiple selection mode. */
  "prop:multiple"?: SigveloListbox["multiple"] | undefined;
  /** Disables the listbox. */
  "prop:disabled"?: SigveloListbox["disabled"] | undefined;
  /** Makes the text field a read-only field. */
  "prop:readonly"?: SigveloListbox["readonly"] | undefined;
  /** The text field's size. */
  "prop:size"?: SigveloListbox["size"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an ID of a form in the same document or shadow root. */
  "prop:form"?: SigveloListbox["form"] | undefined;
  /** Makes the listbox required. Form submission will not be allowed when this is set and the listbox is blank. */
  "prop:required"?: SigveloListbox["required"] | undefined;
  /** The listbox's value. For multiple selection, this will be the value of the first selected item. */
  "prop:value"?: SigveloListbox["value"] | undefined;
  /** Gets or sets the currently selected values as an array. This property provides a consistent way to access or modify
the selection state regardless of whether the listbox is in single or multiple selection mode.

In single selection mode, it returns an array with either zero or one value. In multiple selection mode, it returns
an array of all selected values.

When setting this property in single mode, the first value in the array (if any) becomes the selected value. In
multiple mode, all values in the array become selected. */
  "prop:selectedValues"?: SigveloListbox["selectedValues"] | undefined;
  /** Gets or sets an array of selected listbox items. */
  "prop:selectedItems"?: SigveloListbox["selectedItems"] | undefined;
  /** Emitted when the list box loses focus. This event does not bubble. */
  "on:sigvelo-blur"?: ((e: SigveloListboxElementEvent) => void) | undefined;
  /** Emitted when the user commits changes to the list box's selection. In single select mode, it occurs when a change is made and the listbox loses focus. In multiselect mode, it occurs whenever an option is toggled even while the listbox has focus. */
  "on:sigvelo-change"?: ((e: SigveloListboxElementEvent) => void) | undefined;
  /** Emitted when the list box receives focus. This event does not bubble. */
  "on:sigvelo-focus"?: ((e: SigveloListboxElementEvent) => void) | undefined;
  /** Emitted when the list box's selection changes from user input. */
  "on:sigvelo-input"?: ((e: SigveloListboxElementEvent) => void) | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloLoremIpsumProps = {
  /** The type of HTML content to generate. */
  type?: SigveloLoremIpsum["type"] | undefined;
  /** The length of the content to generate, e.g. the number of words, sentences, paragraphs, or list items. This should
be a number or a range in the format of `{min}-{max}`, e.g. `2-4`. */
  length?: SigveloLoremIpsum["length"] | undefined;
  /** By default, the generator will produce random content every time it runs. Use this option to seed the generator
with a non-zero number and force it to output the same content every time. */
  seed?: SigveloLoremIpsum["seed"] | undefined;
  /** The number of words that should occur in a sentence or list item. This should be a number or a range in the format
of `{min}-{max}`, e.g. `4-16`. */
  "words-per-sentence"?: SigveloLoremIpsum["wordsPerSentence"] | undefined;
  /** The number of words that should occur in a sentence or list item. This should be a number or a range in the format
of `{min}-{max}`, e.g. `4-16`. */
  wordsPerSentence?: SigveloLoremIpsum["wordsPerSentence"] | undefined;
  /** The number of sentences that should occur in a paragraph. This should be a number or a range in the format of
`{min}-{max}`, e.g. `3-6`. */
  "sentences-per-paragraph"?:
    | SigveloLoremIpsum["sentencesPerParagraph"]
    | undefined;
  /** The number of sentences that should occur in a paragraph. This should be a number or a range in the format of
`{min}-{max}`, e.g. `3-6`. */
  sentencesPerParagraph?:
    | SigveloLoremIpsum["sentencesPerParagraph"]
    | undefined;
};

export type SigveloLoremIpsumSolidJsProps = {
  /** The type of HTML content to generate. */
  "prop:type"?: SigveloLoremIpsum["type"] | undefined;
  /** The length of the content to generate, e.g. the number of words, sentences, paragraphs, or list items. This should
be a number or a range in the format of `{min}-{max}`, e.g. `2-4`. */
  "prop:length"?: SigveloLoremIpsum["length"] | undefined;
  /** By default, the generator will produce random content every time it runs. Use this option to seed the generator
with a non-zero number and force it to output the same content every time. */
  "prop:seed"?: SigveloLoremIpsum["seed"] | undefined;
  /** The number of words that should occur in a sentence or list item. This should be a number or a range in the format
of `{min}-{max}`, e.g. `4-16`. */
  "attr:words-per-sentence"?: SigveloLoremIpsum["wordsPerSentence"] | undefined;
  /** The number of words that should occur in a sentence or list item. This should be a number or a range in the format
of `{min}-{max}`, e.g. `4-16`. */
  "prop:wordsPerSentence"?: SigveloLoremIpsum["wordsPerSentence"] | undefined;
  /** The number of sentences that should occur in a paragraph. This should be a number or a range in the format of
`{min}-{max}`, e.g. `3-6`. */
  "attr:sentences-per-paragraph"?:
    | SigveloLoremIpsum["sentencesPerParagraph"]
    | undefined;
  /** The number of sentences that should occur in a paragraph. This should be a number or a range in the format of
`{min}-{max}`, e.g. `3-6`. */
  "prop:sentencesPerParagraph"?:
    | SigveloLoremIpsum["sentencesPerParagraph"]
    | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloMeterProps = {
  /** A label for the meter, displayed above the track. */
  label?: SigveloMeter["label"] | undefined;
  /** The meter's minimum value. */
  min?: SigveloMeter["min"] | undefined;
  /** The meter's maximum value. */
  max?: SigveloMeter["max"] | undefined;
  /** The meter's current value. */
  value?: SigveloMeter["value"] | undefined;
  /** The color intent for the indicator. */
  color?: SigveloMeter["color"] | undefined;
};

export type SigveloMeterSolidJsProps = {
  /** A label for the meter, displayed above the track. */
  "prop:label"?: SigveloMeter["label"] | undefined;
  /** The meter's minimum value. */
  "prop:min"?: SigveloMeter["min"] | undefined;
  /** The meter's maximum value. */
  "prop:max"?: SigveloMeter["max"] | undefined;
  /** The meter's current value. */
  "prop:value"?: SigveloMeter["value"] | undefined;
  /** The color intent for the indicator. */
  "prop:color"?: SigveloMeter["color"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloMetricProps = {
  /** The visible metric label. */
  label?: SigveloMetric["label"] | undefined;
  /** The metric value. Numbers are formatted according to `format`. */
  value?: SigveloMetric["value"] | undefined;
  /** Number formatting applied to numeric values. */
  format?: SigveloMetric["format"] | undefined;
  /** ISO 4217 currency code used when `format` is `currency`. */
  currency?: SigveloMetric["currency"] | undefined;
};

export type SigveloMetricSolidJsProps = {
  /** The visible metric label. */
  "prop:label"?: SigveloMetric["label"] | undefined;
  /** The metric value. Numbers are formatted according to `format`. */
  "prop:value"?: SigveloMetric["value"] | undefined;
  /** Number formatting applied to numeric values. */
  "prop:format"?: SigveloMetric["format"] | undefined;
  /** ISO 4217 currency code used when `format` is `currency`. */
  "prop:currency"?: SigveloMetric["currency"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloMetricGridProps = {};

export type SigveloMetricGridSolidJsProps = {
  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloMutationObserver` component event */
export type SigveloMutationObserverElementEvent<E = Event> = TypedEvent<
  SigveloMutationObserver,
  E
>;

export type SigveloMutationObserverProps = {
  /** Disables the mutation observer. */
  disabled?: SigveloMutationObserver["disabled"] | undefined;
  /** Indicates whether attributes should be observed. */
  attr?: SigveloMutationObserver["attr"] | undefined;
  /** Indicates whether attribute old value should be recorded. */
  "attr-old-value"?: SigveloMutationObserver["attrOldValue"] | undefined;
  /** Indicates whether attribute old value should be recorded. */
  attrOldValue?: SigveloMutationObserver["attrOldValue"] | undefined;
  /** One or more attributes to limit observations to, separate by a space. When not specified, all attributes are
observed. */
  "attr-filter"?: SigveloMutationObserver["attrFilter"] | undefined;
  /** One or more attributes to limit observations to, separate by a space. When not specified, all attributes are
observed. */
  attrFilter?: SigveloMutationObserver["attrFilter"] | undefined;
  /** Indicates whether mutations to target's children are to be observed. */
  "child-list"?: SigveloMutationObserver["childList"] | undefined;
  /** Indicates whether mutations to target's children are to be observed. */
  childList?: SigveloMutationObserver["childList"] | undefined;
  /** Indicates whether mutations to target's descendants are to be observed. */
  subtree?: SigveloMutationObserver["subtree"] | undefined;
  /** Indicates whether character data should be observed. */
  "character-data"?: SigveloMutationObserver["characterData"] | undefined;
  /** Indicates whether character data should be observed. */
  characterData?: SigveloMutationObserver["characterData"] | undefined;
  /** Indicates whether character data old value should be recorded. */
  "character-data-old-value"?:
    | SigveloMutationObserver["characterDataOldValue"]
    | undefined;
  /** Indicates whether character data old value should be recorded. */
  characterDataOldValue?:
    | SigveloMutationObserver["characterDataOldValue"]
    | undefined;

  /** Emitted when a slotted element is mutated. The `event.detail.record` property contains a [`MutationRecord`](https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord) with information about the mutation. */
  "onsigvelo-mutation"?:
    | ((e: SigveloMutationObserverElementEvent) => void)
    | undefined;
};

export type SigveloMutationObserverSolidJsProps = {
  /** Disables the mutation observer. */
  "prop:disabled"?: SigveloMutationObserver["disabled"] | undefined;
  /** Indicates whether attributes should be observed. */
  "prop:attr"?: SigveloMutationObserver["attr"] | undefined;
  /** Indicates whether attribute old value should be recorded. */
  "bool:attr-old-value"?: SigveloMutationObserver["attrOldValue"] | undefined;
  /** Indicates whether attribute old value should be recorded. */
  "prop:attrOldValue"?: SigveloMutationObserver["attrOldValue"] | undefined;
  /** One or more attributes to limit observations to, separate by a space. When not specified, all attributes are
observed. */
  "attr:attr-filter"?: SigveloMutationObserver["attrFilter"] | undefined;
  /** One or more attributes to limit observations to, separate by a space. When not specified, all attributes are
observed. */
  "prop:attrFilter"?: SigveloMutationObserver["attrFilter"] | undefined;
  /** Indicates whether mutations to target's children are to be observed. */
  "bool:child-list"?: SigveloMutationObserver["childList"] | undefined;
  /** Indicates whether mutations to target's children are to be observed. */
  "prop:childList"?: SigveloMutationObserver["childList"] | undefined;
  /** Indicates whether mutations to target's descendants are to be observed. */
  "prop:subtree"?: SigveloMutationObserver["subtree"] | undefined;
  /** Indicates whether character data should be observed. */
  "bool:character-data"?: SigveloMutationObserver["characterData"] | undefined;
  /** Indicates whether character data should be observed. */
  "prop:characterData"?: SigveloMutationObserver["characterData"] | undefined;
  /** Indicates whether character data old value should be recorded. */
  "bool:character-data-old-value"?:
    | SigveloMutationObserver["characterDataOldValue"]
    | undefined;
  /** Indicates whether character data old value should be recorded. */
  "prop:characterDataOldValue"?:
    | SigveloMutationObserver["characterDataOldValue"]
    | undefined;
  /** Emitted when a slotted element is mutated. The `event.detail.record` property contains a [`MutationRecord`](https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord) with information about the mutation. */
  "on:sigvelo-mutation"?:
    | ((e: SigveloMutationObserverElementEvent) => void)
    | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloNavicon` component event */
export type SigveloNaviconElementEvent<E = Event> = TypedEvent<
  SigveloNavicon,
  E
>;

export type SigveloNaviconProps = {
  /** The ID of the associated menu that gets shown/hidden when the navicon is toggled. The element must be in the same
document as the navicon. */
  for?: SigveloNavicon["for"] | undefined;
  /** Determines if the navicon is toggled on. */
  expanded?: SigveloNavicon["expanded"] | undefined;
  /** Determines the navicon's symbol. */
  symbol?: SigveloNavicon["symbol"] | undefined;
  /** Disables the navicon. */
  disabled?: SigveloNavicon["disabled"] | undefined;
  /** The accessible label for the navicon. */
  label?: SigveloNavicon["label"] | undefined;

  /** Emitted when the navicon loses focus. This event does not bubble. */
  "onsigvelo-blur"?: ((e: SigveloNaviconElementEvent) => void) | undefined;
  /** Emitted when the navicon receives focus. This event does not bubble. */
  "onsigvelo-focus"?: ((e: SigveloNaviconElementEvent) => void) | undefined;
};

export type SigveloNaviconSolidJsProps = {
  /** The ID of the associated menu that gets shown/hidden when the navicon is toggled. The element must be in the same
document as the navicon. */
  "prop:for"?: SigveloNavicon["for"] | undefined;
  /** Determines if the navicon is toggled on. */
  "prop:expanded"?: SigveloNavicon["expanded"] | undefined;
  /** Determines the navicon's symbol. */
  "prop:symbol"?: SigveloNavicon["symbol"] | undefined;
  /** Disables the navicon. */
  "prop:disabled"?: SigveloNavicon["disabled"] | undefined;
  /** The accessible label for the navicon. */
  "prop:label"?: SigveloNavicon["label"] | undefined;
  /** Emitted when the navicon loses focus. This event does not bubble. */
  "on:sigvelo-blur"?: ((e: SigveloNaviconElementEvent) => void) | undefined;
  /** Emitted when the navicon receives focus. This event does not bubble. */
  "on:sigvelo-focus"?: ((e: SigveloNaviconElementEvent) => void) | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloNumberProps = {
  /** The number to format. */
  number?: SigveloNumber["number"] | undefined;
  /** The formatting style to use. */
  type?: SigveloNumber["type"] | undefined;
  /** The currency to use when formatting currency. Must be an ISO 4217 currency code, e.g. "EUR" for euro. If not
provided, USD will be assumed. */
  currency?: SigveloNumber["currency"] | undefined;
  /** How to display the currency in currency formatting. */
  "currency-display"?: SigveloNumber["currencyDisplay"] | undefined;
  /** How to display the currency in currency formatting. */
  currencyDisplay?: SigveloNumber["currencyDisplay"] | undefined;
  /** In many locales, accounting format means to wrap the number with parentheses instead of appending a minus sign. */
  "currency-sign"?: SigveloNumber["currencySign"] | undefined;
  /** In many locales, accounting format means to wrap the number with parentheses instead of appending a minus sign. */
  currencySign?: SigveloNumber["currencySign"] | undefined;
  /** The unit to use in unit formatting. [Possible values can be found here.](https://tc39.es/ecma402/#table-sanctioned-single-unit-identifiers)
There is no default value. If the style is `unit`, this option must be provided. */
  unit?: SigveloNumber["unit"] | undefined;
  /** The unit formatting style to use in unit formatting. */
  "unit-display"?: SigveloNumber["unitDisplay"] | undefined;
  /** The unit formatting style to use in unit formatting. */
  unitDisplay?: SigveloNumber["unitDisplay"] | undefined;
  /** The minimum number of integer digits to use. A value with a smaller number of integer digits than this number will
be left-padded with zeros (to the specified length) when formatted. Possible values are from `1` to `21`. The
default is `1`. */
  "minimum-integer-digits"?: SigveloNumber["minimumIntegerDigits"] | undefined;
  /** The minimum number of integer digits to use. A value with a smaller number of integer digits than this number will
be left-padded with zeros (to the specified length) when formatted. Possible values are from `1` to `21`. The
default is `1`. */
  minimumIntegerDigits?: SigveloNumber["minimumIntegerDigits"] | undefined;
  /** The minimum number of fraction digits to use. Possible values are from `0` to `20`. */
  "minimum-fraction-digits"?:
    | SigveloNumber["minimumFractionDigits"]
    | undefined;
  /** The minimum number of fraction digits to use. Possible values are from `0` to `20`. */
  minimumFractionDigits?: SigveloNumber["minimumFractionDigits"] | undefined;
  /** The maximum number of fraction digits to use. Possible values are from `0` to `20`. */
  "maximum-fraction-digits"?:
    | SigveloNumber["maximumFractionDigits"]
    | undefined;
  /** The maximum number of fraction digits to use. Possible values are from `0` to `20`. */
  maximumFractionDigits?: SigveloNumber["maximumFractionDigits"] | undefined;
  /** The minimum number of significant digits to use. Possible values are from `1` to `21`; the default is `1`. */
  "minimum-significant-digits"?:
    | SigveloNumber["minimumSignificantDigits"]
    | undefined;
  /** The minimum number of significant digits to use. Possible values are from `1` to `21`; the default is `1`. */
  minimumSignificantDigits?:
    | SigveloNumber["minimumSignificantDigits"]
    | undefined;
  /** The maximum number of significant digits to use. Possible values are from `1` to `21`; the default is `21`. */
  "maximum-significant-digits"?:
    | SigveloNumber["maximumSignificantDigits"]
    | undefined;
  /** The maximum number of significant digits to use. Possible values are from `1` to `21`; the default is `21`. */
  maximumSignificantDigits?:
    | SigveloNumber["maximumSignificantDigits"]
    | undefined;
  /** Specifies how rounding conflicts will be resolved. */
  "rounding-priority"?: SigveloNumber["roundingPriority"] | undefined;
  /** Specifies how rounding conflicts will be resolved. */
  roundingPriority?: SigveloNumber["roundingPriority"] | undefined;
  /** Indicates the increment at which rounding should take place relative to the calculated rounding magnitude. Possible
values are `1`, `2`, `5`, `10`, `20`, `25`, `50`, `100`, `200`, `250`, `500`, `1000`, `2000`, `2500`, and `5000`.
Cannot be mixed with significant-digits rounding or any setting of `roundingPriority` other than auto. */
  "rounding-increment"?: SigveloNumber["roundingIncrement"] | undefined;
  /** Indicates the increment at which rounding should take place relative to the calculated rounding magnitude. Possible
values are `1`, `2`, `5`, `10`, `20`, `25`, `50`, `100`, `200`, `250`, `500`, `1000`, `2000`, `2500`, and `5000`.
Cannot be mixed with significant-digits rounding or any setting of `roundingPriority` other than auto. */
  roundingIncrement?: SigveloNumber["roundingIncrement"] | undefined;
  /** How decimals should be rounded. [See this page for more details.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#roundingmode) */
  "rounding-mode"?: SigveloNumber["roundingMode"] | undefined;
  /** How decimals should be rounded. [See this page for more details.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#roundingmode) */
  roundingMode?: SigveloNumber["roundingMode"] | undefined;
  /** The strategy for displaying trailing zeros on whole numbers. */
  "trailing-zero-display"?: SigveloNumber["trailingZeroDisplay"] | undefined;
  /** The strategy for displaying trailing zeros on whole numbers. */
  trailingZeroDisplay?: SigveloNumber["trailingZeroDisplay"] | undefined;
  /** The formatting that should be displayed for the number. */
  notation?: SigveloNumber["notation"] | undefined;
  /** Only used when `notation` is `compact`. */
  "compact-display"?: SigveloNumber["compactDisplay"] | undefined;
  /** Only used when `notation` is `compact`. */
  compactDisplay?: SigveloNumber["compactDisplay"] | undefined;
  /** Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators. */
  grouping?: SigveloNumber["grouping"] | undefined;
  /** When to display the sign for the number. */
  "sign-display"?: SigveloNumber["signDisplay"] | undefined;
  /** When to display the sign for the number. */
  signDisplay?: SigveloNumber["signDisplay"] | undefined;
};

export type SigveloNumberSolidJsProps = {
  /** The number to format. */
  "prop:number"?: SigveloNumber["number"] | undefined;
  /** The formatting style to use. */
  "prop:type"?: SigveloNumber["type"] | undefined;
  /** The currency to use when formatting currency. Must be an ISO 4217 currency code, e.g. "EUR" for euro. If not
provided, USD will be assumed. */
  "prop:currency"?: SigveloNumber["currency"] | undefined;
  /** How to display the currency in currency formatting. */
  "attr:currency-display"?: SigveloNumber["currencyDisplay"] | undefined;
  /** How to display the currency in currency formatting. */
  "prop:currencyDisplay"?: SigveloNumber["currencyDisplay"] | undefined;
  /** In many locales, accounting format means to wrap the number with parentheses instead of appending a minus sign. */
  "attr:currency-sign"?: SigveloNumber["currencySign"] | undefined;
  /** In many locales, accounting format means to wrap the number with parentheses instead of appending a minus sign. */
  "prop:currencySign"?: SigveloNumber["currencySign"] | undefined;
  /** The unit to use in unit formatting. [Possible values can be found here.](https://tc39.es/ecma402/#table-sanctioned-single-unit-identifiers)
There is no default value. If the style is `unit`, this option must be provided. */
  "prop:unit"?: SigveloNumber["unit"] | undefined;
  /** The unit formatting style to use in unit formatting. */
  "attr:unit-display"?: SigveloNumber["unitDisplay"] | undefined;
  /** The unit formatting style to use in unit formatting. */
  "prop:unitDisplay"?: SigveloNumber["unitDisplay"] | undefined;
  /** The minimum number of integer digits to use. A value with a smaller number of integer digits than this number will
be left-padded with zeros (to the specified length) when formatted. Possible values are from `1` to `21`. The
default is `1`. */
  "attr:minimum-integer-digits"?:
    | SigveloNumber["minimumIntegerDigits"]
    | undefined;
  /** The minimum number of integer digits to use. A value with a smaller number of integer digits than this number will
be left-padded with zeros (to the specified length) when formatted. Possible values are from `1` to `21`. The
default is `1`. */
  "prop:minimumIntegerDigits"?:
    | SigveloNumber["minimumIntegerDigits"]
    | undefined;
  /** The minimum number of fraction digits to use. Possible values are from `0` to `20`. */
  "attr:minimum-fraction-digits"?:
    | SigveloNumber["minimumFractionDigits"]
    | undefined;
  /** The minimum number of fraction digits to use. Possible values are from `0` to `20`. */
  "prop:minimumFractionDigits"?:
    | SigveloNumber["minimumFractionDigits"]
    | undefined;
  /** The maximum number of fraction digits to use. Possible values are from `0` to `20`. */
  "attr:maximum-fraction-digits"?:
    | SigveloNumber["maximumFractionDigits"]
    | undefined;
  /** The maximum number of fraction digits to use. Possible values are from `0` to `20`. */
  "prop:maximumFractionDigits"?:
    | SigveloNumber["maximumFractionDigits"]
    | undefined;
  /** The minimum number of significant digits to use. Possible values are from `1` to `21`; the default is `1`. */
  "attr:minimum-significant-digits"?:
    | SigveloNumber["minimumSignificantDigits"]
    | undefined;
  /** The minimum number of significant digits to use. Possible values are from `1` to `21`; the default is `1`. */
  "prop:minimumSignificantDigits"?:
    | SigveloNumber["minimumSignificantDigits"]
    | undefined;
  /** The maximum number of significant digits to use. Possible values are from `1` to `21`; the default is `21`. */
  "attr:maximum-significant-digits"?:
    | SigveloNumber["maximumSignificantDigits"]
    | undefined;
  /** The maximum number of significant digits to use. Possible values are from `1` to `21`; the default is `21`. */
  "prop:maximumSignificantDigits"?:
    | SigveloNumber["maximumSignificantDigits"]
    | undefined;
  /** Specifies how rounding conflicts will be resolved. */
  "attr:rounding-priority"?: SigveloNumber["roundingPriority"] | undefined;
  /** Specifies how rounding conflicts will be resolved. */
  "prop:roundingPriority"?: SigveloNumber["roundingPriority"] | undefined;
  /** Indicates the increment at which rounding should take place relative to the calculated rounding magnitude. Possible
values are `1`, `2`, `5`, `10`, `20`, `25`, `50`, `100`, `200`, `250`, `500`, `1000`, `2000`, `2500`, and `5000`.
Cannot be mixed with significant-digits rounding or any setting of `roundingPriority` other than auto. */
  "attr:rounding-increment"?: SigveloNumber["roundingIncrement"] | undefined;
  /** Indicates the increment at which rounding should take place relative to the calculated rounding magnitude. Possible
values are `1`, `2`, `5`, `10`, `20`, `25`, `50`, `100`, `200`, `250`, `500`, `1000`, `2000`, `2500`, and `5000`.
Cannot be mixed with significant-digits rounding or any setting of `roundingPriority` other than auto. */
  "prop:roundingIncrement"?: SigveloNumber["roundingIncrement"] | undefined;
  /** How decimals should be rounded. [See this page for more details.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#roundingmode) */
  "attr:rounding-mode"?: SigveloNumber["roundingMode"] | undefined;
  /** How decimals should be rounded. [See this page for more details.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#roundingmode) */
  "prop:roundingMode"?: SigveloNumber["roundingMode"] | undefined;
  /** The strategy for displaying trailing zeros on whole numbers. */
  "attr:trailing-zero-display"?:
    | SigveloNumber["trailingZeroDisplay"]
    | undefined;
  /** The strategy for displaying trailing zeros on whole numbers. */
  "prop:trailingZeroDisplay"?: SigveloNumber["trailingZeroDisplay"] | undefined;
  /** The formatting that should be displayed for the number. */
  "prop:notation"?: SigveloNumber["notation"] | undefined;
  /** Only used when `notation` is `compact`. */
  "attr:compact-display"?: SigveloNumber["compactDisplay"] | undefined;
  /** Only used when `notation` is `compact`. */
  "prop:compactDisplay"?: SigveloNumber["compactDisplay"] | undefined;
  /** Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators. */
  "prop:grouping"?: SigveloNumber["grouping"] | undefined;
  /** When to display the sign for the number. */
  "attr:sign-display"?: SigveloNumber["signDisplay"] | undefined;
  /** When to display the sign for the number. */
  "prop:signDisplay"?: SigveloNumber["signDisplay"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloNumberField` component event */
export type SigveloNumberFieldElementEvent<E = Event> = TypedEvent<
  SigveloNumberField,
  E
>;

export type SigveloNumberFieldProps = {
  /** The number field's label. If you need to provide HTML in the label, use the `label` slot instead. */
  label?: SigveloNumberField["label"] | undefined;
  /** The number field's description. If you need to provide HTML in the description, use the `description` slot instead. */
  description?: SigveloNumberField["description"] | undefined;
  /** The name of the number field. This will be submitted with the form as a name/value pair. */
  name?: SigveloNumberField["name"] | undefined;
  /** The number field's value. */
  value?: SigveloNumberField["value"] | undefined;
  /** A placeholder to show in the number field when it's blank. */
  placeholder?: SigveloNumberField["placeholder"] | undefined;
  /** Disables the number field. */
  disabled?: SigveloNumberField["disabled"] | undefined;
  /** Makes the number field a read-only field. */
  readonly?: SigveloNumberField["readonly"] | undefined;
  /** The type of number field to render. */
  variant?: SigveloNumberField["variant"] | undefined;
  /** The number field's size. */
  size?: SigveloNumberField["size"] | undefined;
  /** Draws the number field in a pill shape. */
  pill?: SigveloNumberField["pill"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an ID of a form in the same document or shadow root. */
  form?: SigveloNumberField["form"] | undefined;
  /** Makes the number field required. Form submission will not be allowed when this is set and the number field is blank. */
  required?: SigveloNumberField["required"] | undefined;
  /** A regular expression the value should match to be considered valid. */
  pattern?: SigveloNumberField["pattern"] | undefined;
  /** The minimum value for date/time types. */
  min?: SigveloNumberField["min"] | undefined;
  /** The maximum value for date/time types. */
  max?: SigveloNumberField["max"] | undefined;
  /** The granularity the value must adhere to when incrementing and decrementing. */
  step?: SigveloNumberField["step"] | undefined;
  /** Tells the browser how to autocomplete the number field. See [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
for available values. */
  autocomplete?: SigveloNumberField["autocomplete"] | undefined;
  /** Tells the browser to focus the number field when the page loads or a dialog is shown. */
  autofocus?: SigveloNumberField["autofocus"] | undefined;
  /** Sets the enter key label on virtual keyboards. */
  enterkeyhint?: SigveloNumberField["enterkeyhint"] | undefined;
  /** When true, the add/subtract steppers won't be displayed. */
  "without-steppers"?: SigveloNumberField["withoutSteppers"] | undefined;
  /** When true, the add/subtract steppers won't be displayed. */
  withoutSteppers?: SigveloNumberField["withoutSteppers"] | undefined;
  /**  */
  isInvalid?: SigveloNumberField["isInvalid"] | undefined;
  /**  */
  hadUserInteraction?: SigveloNumberField["hadUserInteraction"] | undefined;
  /**  */
  wasSubmitted?: SigveloNumberField["wasSubmitted"] | undefined;
  /**  */
  isPasswordVisible?: SigveloNumberField["isPasswordVisible"] | undefined;

  /** Emitted when the number field loses focus. This event does not bubble. */
  "onsigvelo-blur"?: ((e: SigveloNumberFieldElementEvent) => void) | undefined;
  /** Emitted when the user commits changes to the number field's value. */
  "onsigvelo-change"?:
    | ((e: SigveloNumberFieldElementEvent) => void)
    | undefined;
  /** Emitted when the number field receives focus. This event does not bubble. */
  "onsigvelo-focus"?: ((e: SigveloNumberFieldElementEvent) => void) | undefined;
  /** Emitted when the number field receives input. */
  "onsigvelo-input"?: ((e: SigveloNumberFieldElementEvent) => void) | undefined;
};

export type SigveloNumberFieldSolidJsProps = {
  /** The number field's label. If you need to provide HTML in the label, use the `label` slot instead. */
  "prop:label"?: SigveloNumberField["label"] | undefined;
  /** The number field's description. If you need to provide HTML in the description, use the `description` slot instead. */
  "prop:description"?: SigveloNumberField["description"] | undefined;
  /** The name of the number field. This will be submitted with the form as a name/value pair. */
  "prop:name"?: SigveloNumberField["name"] | undefined;
  /** The number field's value. */
  "prop:value"?: SigveloNumberField["value"] | undefined;
  /** A placeholder to show in the number field when it's blank. */
  "prop:placeholder"?: SigveloNumberField["placeholder"] | undefined;
  /** Disables the number field. */
  "prop:disabled"?: SigveloNumberField["disabled"] | undefined;
  /** Makes the number field a read-only field. */
  "prop:readonly"?: SigveloNumberField["readonly"] | undefined;
  /** The type of number field to render. */
  "prop:variant"?: SigveloNumberField["variant"] | undefined;
  /** The number field's size. */
  "prop:size"?: SigveloNumberField["size"] | undefined;
  /** Draws the number field in a pill shape. */
  "prop:pill"?: SigveloNumberField["pill"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an ID of a form in the same document or shadow root. */
  "prop:form"?: SigveloNumberField["form"] | undefined;
  /** Makes the number field required. Form submission will not be allowed when this is set and the number field is blank. */
  "prop:required"?: SigveloNumberField["required"] | undefined;
  /** A regular expression the value should match to be considered valid. */
  "prop:pattern"?: SigveloNumberField["pattern"] | undefined;
  /** The minimum value for date/time types. */
  "prop:min"?: SigveloNumberField["min"] | undefined;
  /** The maximum value for date/time types. */
  "prop:max"?: SigveloNumberField["max"] | undefined;
  /** The granularity the value must adhere to when incrementing and decrementing. */
  "prop:step"?: SigveloNumberField["step"] | undefined;
  /** Tells the browser how to autocomplete the number field. See [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
for available values. */
  "prop:autocomplete"?: SigveloNumberField["autocomplete"] | undefined;
  /** Tells the browser to focus the number field when the page loads or a dialog is shown. */
  "prop:autofocus"?: SigveloNumberField["autofocus"] | undefined;
  /** Sets the enter key label on virtual keyboards. */
  "prop:enterkeyhint"?: SigveloNumberField["enterkeyhint"] | undefined;
  /** When true, the add/subtract steppers won't be displayed. */
  "bool:without-steppers"?: SigveloNumberField["withoutSteppers"] | undefined;
  /** When true, the add/subtract steppers won't be displayed. */
  "prop:withoutSteppers"?: SigveloNumberField["withoutSteppers"] | undefined;
  /**  */
  "prop:isInvalid"?: SigveloNumberField["isInvalid"] | undefined;
  /**  */
  "prop:hadUserInteraction"?:
    | SigveloNumberField["hadUserInteraction"]
    | undefined;
  /**  */
  "prop:wasSubmitted"?: SigveloNumberField["wasSubmitted"] | undefined;
  /**  */
  "prop:isPasswordVisible"?:
    | SigveloNumberField["isPasswordVisible"]
    | undefined;
  /** Emitted when the number field loses focus. This event does not bubble. */
  "on:sigvelo-blur"?: ((e: SigveloNumberFieldElementEvent) => void) | undefined;
  /** Emitted when the user commits changes to the number field's value. */
  "on:sigvelo-change"?:
    | ((e: SigveloNumberFieldElementEvent) => void)
    | undefined;
  /** Emitted when the number field receives focus. This event does not bubble. */
  "on:sigvelo-focus"?:
    | ((e: SigveloNumberFieldElementEvent) => void)
    | undefined;
  /** Emitted when the number field receives input. */
  "on:sigvelo-input"?:
    | ((e: SigveloNumberFieldElementEvent) => void)
    | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloPagination` component event */
export type SigveloPaginationElementEvent<E = Event> = TypedEvent<
  SigveloPagination,
  E
>;

export type SigveloPaginationProps = {
  /** A label to use to describe the control to assistive devices. Defaults to "Pagination" when not set. */
  label?: SigveloPagination["label"] | undefined;
  /** The total number of pages to show. */
  "total-pages"?: SigveloPagination["totalPages"] | undefined;
  /** The total number of pages to show. */
  totalPages?: SigveloPagination["totalPages"] | undefined;
  /** The current page. */
  page?: SigveloPagination["page"] | undefined;
  /** The number of pages to show on each side of the current page. Minimum 2. */
  siblings?: SigveloPagination["siblings"] | undefined;
  /** The number of pages to increase or decrease when jump buttons are clicked. */
  jump?: SigveloPagination["jump"] | undefined;
  /** How the pagination will display buttons. */
  format?: SigveloPagination["format"] | undefined;
  /** A string that, when provided, renders `<a>` elements instead of `<${tag}s>` using this as the link's template.
Use `$page` to indicate the page number, e.g. `"/path/to/$page"`. Alternatively, you can provide a JavaScript
function that accepts a page number and returns a URL. */
  "link-formatter"?: SigveloPagination["linkFormatter"] | undefined;
  /** A string that, when provided, renders `<a>` elements instead of `<${tag}s>` using this as the link's template.
Use `$page` to indicate the page number, e.g. `"/path/to/$page"`. Alternatively, you can provide a JavaScript
function that accepts a page number and returns a URL. */
  linkFormatter?: SigveloPagination["linkFormatter"] | undefined;
  /** Disables the pagination control. */
  disabled?: SigveloPagination["disabled"] | undefined;
  /** Determine's the pagination's variant. */
  variant?: SigveloPagination["variant"] | undefined;
  /** Removes the previous and next buttons. */
  "without-nav"?: SigveloPagination["withoutNav"] | undefined;
  /** Removes the previous and next buttons. */
  withoutNav?: SigveloPagination["withoutNav"] | undefined;

  /** Emitted when the page is going to change but before it actually changes. Calling `event.preventDefault()` will prevent the page from changing. Inspect `event.detail` to get the `currentPage` and `requestedPage` properties. */
  "onsigvelo-before-page-change"?:
    | ((e: SigveloPaginationElementEvent) => void)
    | undefined;
  /** Emitted after the page has been changed and the UI has been updated. */
  "onsigvelo-page-change"?:
    | ((e: SigveloPaginationElementEvent) => void)
    | undefined;
};

export type SigveloPaginationSolidJsProps = {
  /** A label to use to describe the control to assistive devices. Defaults to "Pagination" when not set. */
  "prop:label"?: SigveloPagination["label"] | undefined;
  /** The total number of pages to show. */
  "attr:total-pages"?: SigveloPagination["totalPages"] | undefined;
  /** The total number of pages to show. */
  "prop:totalPages"?: SigveloPagination["totalPages"] | undefined;
  /** The current page. */
  "prop:page"?: SigveloPagination["page"] | undefined;
  /** The number of pages to show on each side of the current page. Minimum 2. */
  "prop:siblings"?: SigveloPagination["siblings"] | undefined;
  /** The number of pages to increase or decrease when jump buttons are clicked. */
  "prop:jump"?: SigveloPagination["jump"] | undefined;
  /** How the pagination will display buttons. */
  "prop:format"?: SigveloPagination["format"] | undefined;
  /** A string that, when provided, renders `<a>` elements instead of `<${tag}s>` using this as the link's template.
Use `$page` to indicate the page number, e.g. `"/path/to/$page"`. Alternatively, you can provide a JavaScript
function that accepts a page number and returns a URL. */
  "attr:link-formatter"?: SigveloPagination["linkFormatter"] | undefined;
  /** A string that, when provided, renders `<a>` elements instead of `<${tag}s>` using this as the link's template.
Use `$page` to indicate the page number, e.g. `"/path/to/$page"`. Alternatively, you can provide a JavaScript
function that accepts a page number and returns a URL. */
  "prop:linkFormatter"?: SigveloPagination["linkFormatter"] | undefined;
  /** Disables the pagination control. */
  "prop:disabled"?: SigveloPagination["disabled"] | undefined;
  /** Determine's the pagination's variant. */
  "prop:variant"?: SigveloPagination["variant"] | undefined;
  /** Removes the previous and next buttons. */
  "bool:without-nav"?: SigveloPagination["withoutNav"] | undefined;
  /** Removes the previous and next buttons. */
  "prop:withoutNav"?: SigveloPagination["withoutNav"] | undefined;
  /** Emitted when the page is going to change but before it actually changes. Calling `event.preventDefault()` will prevent the page from changing. Inspect `event.detail` to get the `currentPage` and `requestedPage` properties. */
  "on:sigvelo-before-page-change"?:
    | ((e: SigveloPaginationElementEvent) => void)
    | undefined;
  /** Emitted after the page has been changed and the UI has been updated. */
  "on:sigvelo-page-change"?:
    | ((e: SigveloPaginationElementEvent) => void)
    | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloPopover` component event */
export type SigveloPopoverElementEvent<E = Event> = TypedEvent<
  SigveloPopover,
  E
>;

export type SigveloPopoverProps = {
  /** The ID of of popover's anchor element. This must be an interactive/focusable element such as a button and it must
be in the same document as the popover. */
  for?: SigveloPopover["for"] | undefined;
  /** An accessible name for the popover. */
  label?: SigveloPopover["label"] | undefined;
  /** Shows or hides the popover. */
  open?: SigveloPopover["open"] | undefined;
  /** The placement of the popover in reference to the anchor. The menu will shift to a more optimal location if the
preferred placement doesn't have enough room. */
  placement?: SigveloPopover["placement"] | undefined;
  /** The distance of the popover from its anchor. */
  distance?: SigveloPopover["distance"] | undefined;
  /** The offset of the popover along its trigger. */
  offset?: SigveloPopover["offset"] | undefined;
  /** Renders the popover without an arrow. */
  "without-arrow"?: SigveloPopover["withoutArrow"] | undefined;
  /** Renders the popover without an arrow. */
  withoutArrow?: SigveloPopover["withoutArrow"] | undefined;

  /** Emitted when the popover is instructed to open but before it is shown. */
  "onsigvelo-before-open"?:
    | ((e: SigveloPopoverElementEvent) => void)
    | undefined;
  /** Emitted when the popover has opened and the animation has completed. */
  "onsigvelo-open"?: ((e: SigveloPopoverElementEvent) => void) | undefined;
  /** Emitted when the popover is dismissed but before it is hidden. */
  "onsigvelo-before-close"?:
    | ((e: SigveloPopoverElementEvent) => void)
    | undefined;
  /** Emitted when the popover has closed. and the animation has completed. */
  "onsigvelo-close"?: ((e: SigveloPopoverElementEvent) => void) | undefined;
};

export type SigveloPopoverSolidJsProps = {
  /** The ID of of popover's anchor element. This must be an interactive/focusable element such as a button and it must
be in the same document as the popover. */
  "prop:for"?: SigveloPopover["for"] | undefined;
  /** An accessible name for the popover. */
  "prop:label"?: SigveloPopover["label"] | undefined;
  /** Shows or hides the popover. */
  "prop:open"?: SigveloPopover["open"] | undefined;
  /** The placement of the popover in reference to the anchor. The menu will shift to a more optimal location if the
preferred placement doesn't have enough room. */
  "prop:placement"?: SigveloPopover["placement"] | undefined;
  /** The distance of the popover from its anchor. */
  "prop:distance"?: SigveloPopover["distance"] | undefined;
  /** The offset of the popover along its trigger. */
  "prop:offset"?: SigveloPopover["offset"] | undefined;
  /** Renders the popover without an arrow. */
  "bool:without-arrow"?: SigveloPopover["withoutArrow"] | undefined;
  /** Renders the popover without an arrow. */
  "prop:withoutArrow"?: SigveloPopover["withoutArrow"] | undefined;
  /** Emitted when the popover is instructed to open but before it is shown. */
  "on:sigvelo-before-open"?:
    | ((e: SigveloPopoverElementEvent) => void)
    | undefined;
  /** Emitted when the popover has opened and the animation has completed. */
  "on:sigvelo-open"?: ((e: SigveloPopoverElementEvent) => void) | undefined;
  /** Emitted when the popover is dismissed but before it is hidden. */
  "on:sigvelo-before-close"?:
    | ((e: SigveloPopoverElementEvent) => void)
    | undefined;
  /** Emitted when the popover has closed. and the animation has completed. */
  "on:sigvelo-close"?: ((e: SigveloPopoverElementEvent) => void) | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloPreviewCard` component event */
export type SigveloPreviewCardElementEvent<E = Event> = TypedEvent<
  SigveloPreviewCard,
  E
>;

export type SigveloPreviewCardProps = {
  /** The ID of the anchor element that triggers the preview card. */
  for?: SigveloPreviewCard["for"] | undefined;
  /** Shows or hides the preview card. */
  open?: SigveloPreviewCard["open"] | undefined;
  /** The placement of the card relative to the anchor. */
  placement?: SigveloPreviewCard["placement"] | undefined;
  /** The distance from the anchor in pixels. */
  distance?: SigveloPreviewCard["distance"] | undefined;
  /** Milliseconds to wait before opening on hover. */
  "open-delay"?: SigveloPreviewCard["openDelay"] | undefined;
  /** Milliseconds to wait before opening on hover. */
  openDelay?: SigveloPreviewCard["openDelay"] | undefined;
  /** Milliseconds to wait before closing when the pointer leaves. */
  "close-delay"?: SigveloPreviewCard["closeDelay"] | undefined;
  /** Milliseconds to wait before closing when the pointer leaves. */
  closeDelay?: SigveloPreviewCard["closeDelay"] | undefined;

  /** Emitted before the card opens. */
  "onsigvelo-before-open"?:
    | ((e: SigveloPreviewCardElementEvent) => void)
    | undefined;
  /** Emitted after the card has opened. */
  "onsigvelo-open"?: ((e: SigveloPreviewCardElementEvent) => void) | undefined;
  /** Emitted before the card closes. */
  "onsigvelo-before-close"?:
    | ((e: SigveloPreviewCardElementEvent) => void)
    | undefined;
  /** Emitted after the card has closed. */
  "onsigvelo-close"?: ((e: SigveloPreviewCardElementEvent) => void) | undefined;
};

export type SigveloPreviewCardSolidJsProps = {
  /** The ID of the anchor element that triggers the preview card. */
  "prop:for"?: SigveloPreviewCard["for"] | undefined;
  /** Shows or hides the preview card. */
  "prop:open"?: SigveloPreviewCard["open"] | undefined;
  /** The placement of the card relative to the anchor. */
  "prop:placement"?: SigveloPreviewCard["placement"] | undefined;
  /** The distance from the anchor in pixels. */
  "prop:distance"?: SigveloPreviewCard["distance"] | undefined;
  /** Milliseconds to wait before opening on hover. */
  "attr:open-delay"?: SigveloPreviewCard["openDelay"] | undefined;
  /** Milliseconds to wait before opening on hover. */
  "prop:openDelay"?: SigveloPreviewCard["openDelay"] | undefined;
  /** Milliseconds to wait before closing when the pointer leaves. */
  "attr:close-delay"?: SigveloPreviewCard["closeDelay"] | undefined;
  /** Milliseconds to wait before closing when the pointer leaves. */
  "prop:closeDelay"?: SigveloPreviewCard["closeDelay"] | undefined;
  /** Emitted before the card opens. */
  "on:sigvelo-before-open"?:
    | ((e: SigveloPreviewCardElementEvent) => void)
    | undefined;
  /** Emitted after the card has opened. */
  "on:sigvelo-open"?: ((e: SigveloPreviewCardElementEvent) => void) | undefined;
  /** Emitted before the card closes. */
  "on:sigvelo-before-close"?:
    | ((e: SigveloPreviewCardElementEvent) => void)
    | undefined;
  /** Emitted after the card has closed. */
  "on:sigvelo-close"?:
    | ((e: SigveloPreviewCardElementEvent) => void)
    | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloProgressProps = {
  /** A custom label for assistive devices. */
  label?: SigveloProgress["label"] | undefined;
  /** The type of progress bar to render. */
  variant?: SigveloProgress["variant"] | undefined;
  /** The progress bar's minimum value. */
  min?: SigveloProgress["min"] | undefined;
  /** The progress bar's maximum value. */
  max?: SigveloProgress["max"] | undefined;
  /** The progress bar's current value. */
  value?: SigveloProgress["value"] | undefined;
  /** When the completion status can't be determined, the progress bar is considered indeterminate and the value is
ignored. Useful for tasks whose progress can't be reported. */
  indeterminate?: SigveloProgress["indeterminate"] | undefined;
};

export type SigveloProgressSolidJsProps = {
  /** A custom label for assistive devices. */
  "prop:label"?: SigveloProgress["label"] | undefined;
  /** The type of progress bar to render. */
  "prop:variant"?: SigveloProgress["variant"] | undefined;
  /** The progress bar's minimum value. */
  "prop:min"?: SigveloProgress["min"] | undefined;
  /** The progress bar's maximum value. */
  "prop:max"?: SigveloProgress["max"] | undefined;
  /** The progress bar's current value. */
  "prop:value"?: SigveloProgress["value"] | undefined;
  /** When the completion status can't be determined, the progress bar is considered indeterminate and the value is
ignored. Useful for tasks whose progress can't be reported. */
  "prop:indeterminate"?: SigveloProgress["indeterminate"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloRadioItem` component event */
export type SigveloRadioItemElementEvent<E = Event> = TypedEvent<
  SigveloRadioItem,
  E
>;

export type SigveloRadioItemProps = {
  /** The radio item's label. If you need to provide HTML in the label, use the `label` slot instead. */
  label?: SigveloRadioItem["label"] | undefined;
  /** The radio item's description. If you need to provide HTML in the description, use the `description` slot instead. */
  description?: SigveloRadioItem["description"] | undefined;
  /** The radio item's value. */
  value?: SigveloRadioItem["value"] | undefined;
  /** The radio item's checked state. */
  checked?: SigveloRadioItem["checked"] | undefined;
  /** Disables the radio item. */
  disabled?: SigveloRadioItem["disabled"] | undefined;
  /** The type of radio item to render. */
  variant?: SigveloRadioItem["variant"] | undefined;
  /** The radio item's size. */
  size?: SigveloRadioItem["size"] | undefined;

  /** Emitted when the radio item loses focus. This event does not bubble. */
  "onsigvelo-blur"?: ((e: SigveloRadioItemElementEvent) => void) | undefined;
  /** Emitted when the radio item receives focus. This event does not bubble. */
  "onsigvelo-focus"?: ((e: SigveloRadioItemElementEvent) => void) | undefined;
};

export type SigveloRadioItemSolidJsProps = {
  /** The radio item's label. If you need to provide HTML in the label, use the `label` slot instead. */
  "prop:label"?: SigveloRadioItem["label"] | undefined;
  /** The radio item's description. If you need to provide HTML in the description, use the `description` slot instead. */
  "prop:description"?: SigveloRadioItem["description"] | undefined;
  /** The radio item's value. */
  "prop:value"?: SigveloRadioItem["value"] | undefined;
  /** The radio item's checked state. */
  "prop:checked"?: SigveloRadioItem["checked"] | undefined;
  /** Disables the radio item. */
  "prop:disabled"?: SigveloRadioItem["disabled"] | undefined;
  /** The type of radio item to render. */
  "prop:variant"?: SigveloRadioItem["variant"] | undefined;
  /** The radio item's size. */
  "prop:size"?: SigveloRadioItem["size"] | undefined;
  /** Emitted when the radio item loses focus. This event does not bubble. */
  "on:sigvelo-blur"?: ((e: SigveloRadioItemElementEvent) => void) | undefined;
  /** Emitted when the radio item receives focus. This event does not bubble. */
  "on:sigvelo-focus"?: ((e: SigveloRadioItemElementEvent) => void) | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloRadio` component event */
export type SigveloRadioElementEvent<E = Event> = TypedEvent<SigveloRadio, E>;

export type SigveloRadioProps = {
  /** The radio's label. If you need to provide HTML in the label, use the `label` slot instead. */
  label?: SigveloRadio["label"] | undefined;
  /** The radio's description. If you need to provide HTML in the description, use the `description` slot instead. */
  description?: SigveloRadio["description"] | undefined;
  /** The name of the radio. This will be submitted with the form as a name/value pair. */
  name?: SigveloRadio["name"] | undefined;
  /** The radio's current value. Set this to change the selected item. */
  value?: SigveloRadio["value"] | undefined;
  /** The orientation of grouped items. */
  orientation?: SigveloRadio["orientation"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an ID of a form in the same document or shadow root. */
  form?: SigveloRadio["form"] | undefined;
  /** Indicates at least one option in the radio is required. */
  required?: SigveloRadio["required"] | undefined;
  /** Disables the radio control. */
  disabled?: SigveloRadio["disabled"] | undefined;
  /**  */
  group?: SigveloRadio["group"] | undefined;
  /**  */
  isInvalid?: SigveloRadio["isInvalid"] | undefined;
  /**  */
  hadUserInteraction?: SigveloRadio["hadUserInteraction"] | undefined;
  /**  */
  wasSubmitted?: SigveloRadio["wasSubmitted"] | undefined;

  /** Emitted when the user commits changes to the radio's value. */
  "onsigvelo-change"?: ((e: SigveloRadioElementEvent) => void) | undefined;
  /** Emitted when the radio receives input. */
  "onsigvelo-input"?: ((e: SigveloRadioElementEvent) => void) | undefined;
};

export type SigveloRadioSolidJsProps = {
  /** The radio's label. If you need to provide HTML in the label, use the `label` slot instead. */
  "prop:label"?: SigveloRadio["label"] | undefined;
  /** The radio's description. If you need to provide HTML in the description, use the `description` slot instead. */
  "prop:description"?: SigveloRadio["description"] | undefined;
  /** The name of the radio. This will be submitted with the form as a name/value pair. */
  "prop:name"?: SigveloRadio["name"] | undefined;
  /** The radio's current value. Set this to change the selected item. */
  "prop:value"?: SigveloRadio["value"] | undefined;
  /** The orientation of grouped items. */
  "prop:orientation"?: SigveloRadio["orientation"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an ID of a form in the same document or shadow root. */
  "prop:form"?: SigveloRadio["form"] | undefined;
  /** Indicates at least one option in the radio is required. */
  "prop:required"?: SigveloRadio["required"] | undefined;
  /** Disables the radio control. */
  "prop:disabled"?: SigveloRadio["disabled"] | undefined;
  /**  */
  "prop:group"?: SigveloRadio["group"] | undefined;
  /**  */
  "prop:isInvalid"?: SigveloRadio["isInvalid"] | undefined;
  /**  */
  "prop:hadUserInteraction"?: SigveloRadio["hadUserInteraction"] | undefined;
  /**  */
  "prop:wasSubmitted"?: SigveloRadio["wasSubmitted"] | undefined;
  /** Emitted when the user commits changes to the radio's value. */
  "on:sigvelo-change"?: ((e: SigveloRadioElementEvent) => void) | undefined;
  /** Emitted when the radio receives input. */
  "on:sigvelo-input"?: ((e: SigveloRadioElementEvent) => void) | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloRandomContentProps = {
  /** The number of items to show. */
  items?: SigveloRandomContent["items"] | undefined;
  /** The selection mode. The default is 'unique', which ensures different items are shown after calling `randomize()`,
when possible. Use `random` for true randomization or `sequence` to show the next set of items based on their DOM
position. */
  mode?: SigveloRandomContent["mode"] | undefined;
};

export type SigveloRandomContentSolidJsProps = {
  /** The number of items to show. */
  "prop:items"?: SigveloRandomContent["items"] | undefined;
  /** The selection mode. The default is 'unique', which ensures different items are shown after calling `randomize()`,
when possible. Use `random` for true randomization or `sequence` to show the next set of items based on their DOM
position. */
  "prop:mode"?: SigveloRandomContent["mode"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloRating` component event */
export type SigveloRatingElementEvent<E = Event> = TypedEvent<SigveloRating, E>;

export type SigveloRatingProps = {
  /** The rating's label. If you need to provide HTML in the label, use the `label` slot instead. */
  label?: SigveloRating["label"] | undefined;
  /** The rating's description. If you need to provide HTML in the description, use the `description` slot instead. */
  description?: SigveloRating["description"] | undefined;
  /** The name of the rating. This will be submitted with the form as a name/value pair. */
  name?: SigveloRating["name"] | undefined;
  /** The rating's value. */
  value?: SigveloRating["value"] | undefined;
  /** Disables the rating. */
  disabled?: SigveloRating["disabled"] | undefined;
  /** Makes the rating a read-only field. */
  readonly?: SigveloRating["readonly"] | undefined;
  /** The rating's size. */
  size?: SigveloRating["size"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an iD of a form in the same document or shadow root. */
  form?: SigveloRating["form"] | undefined;
  /** Makes the rating required. Form submission will not be allowed when this is set and the rating is empty. */
  required?: SigveloRating["required"] | undefined;
  /** The maximum value allowed. */
  max?: SigveloRating["max"] | undefined;
  /** The granularity the value must adhere to when incrementing and decrementing. */
  step?: SigveloRating["step"] | undefined;
  /** Tells the browser to focus the rating when the page loads or a dialog is shown. */
  autofocus?: SigveloRating["autofocus"] | undefined;
  /**  */
  rating?: SigveloRating["rating"] | undefined;
  /**  */
  isInvalid?: SigveloRating["isInvalid"] | undefined;
  /**  */
  hadUserInteraction?: SigveloRating["hadUserInteraction"] | undefined;
  /**  */
  wasSubmitted?: SigveloRating["wasSubmitted"] | undefined;
  /** A function that returns the HTML for each symbol. The function will receive the `value` and `isSelected` arguments
that you can use to customize the symbol based on specific values or whether the symbol is in the selected state.
You should only return trusted HTML from this function, otherwise you may become vulnerable to XSS exploits. */
  symbolFormatter?: SigveloRating["symbolFormatter"] | undefined;

  /** Emitted when the rating loses focus. This event does not bubble. */
  "onsigvelo-blur"?: ((e: SigveloRatingElementEvent) => void) | undefined;
  /** Emitted when the user commits changes to the rating's value. */
  "onsigvelo-change"?: ((e: SigveloRatingElementEvent) => void) | undefined;
  /** Emitted when the rating receives focus. This event does not bubble. */
  "onsigvelo-focus"?: ((e: SigveloRatingElementEvent) => void) | undefined;
  /** Emitted when the rating receives input. */
  "onsigvelo-input"?: ((e: SigveloRatingElementEvent) => void) | undefined;
};

export type SigveloRatingSolidJsProps = {
  /** The rating's label. If you need to provide HTML in the label, use the `label` slot instead. */
  "prop:label"?: SigveloRating["label"] | undefined;
  /** The rating's description. If you need to provide HTML in the description, use the `description` slot instead. */
  "prop:description"?: SigveloRating["description"] | undefined;
  /** The name of the rating. This will be submitted with the form as a name/value pair. */
  "prop:name"?: SigveloRating["name"] | undefined;
  /** The rating's value. */
  "prop:value"?: SigveloRating["value"] | undefined;
  /** Disables the rating. */
  "prop:disabled"?: SigveloRating["disabled"] | undefined;
  /** Makes the rating a read-only field. */
  "prop:readonly"?: SigveloRating["readonly"] | undefined;
  /** The rating's size. */
  "prop:size"?: SigveloRating["size"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an iD of a form in the same document or shadow root. */
  "prop:form"?: SigveloRating["form"] | undefined;
  /** Makes the rating required. Form submission will not be allowed when this is set and the rating is empty. */
  "prop:required"?: SigveloRating["required"] | undefined;
  /** The maximum value allowed. */
  "prop:max"?: SigveloRating["max"] | undefined;
  /** The granularity the value must adhere to when incrementing and decrementing. */
  "prop:step"?: SigveloRating["step"] | undefined;
  /** Tells the browser to focus the rating when the page loads or a dialog is shown. */
  "prop:autofocus"?: SigveloRating["autofocus"] | undefined;
  /**  */
  "prop:rating"?: SigveloRating["rating"] | undefined;
  /**  */
  "prop:isInvalid"?: SigveloRating["isInvalid"] | undefined;
  /**  */
  "prop:hadUserInteraction"?: SigveloRating["hadUserInteraction"] | undefined;
  /**  */
  "prop:wasSubmitted"?: SigveloRating["wasSubmitted"] | undefined;
  /** A function that returns the HTML for each symbol. The function will receive the `value` and `isSelected` arguments
that you can use to customize the symbol based on specific values or whether the symbol is in the selected state.
You should only return trusted HTML from this function, otherwise you may become vulnerable to XSS exploits. */
  "prop:symbolFormatter"?: SigveloRating["symbolFormatter"] | undefined;
  /** Emitted when the rating loses focus. This event does not bubble. */
  "on:sigvelo-blur"?: ((e: SigveloRatingElementEvent) => void) | undefined;
  /** Emitted when the user commits changes to the rating's value. */
  "on:sigvelo-change"?: ((e: SigveloRatingElementEvent) => void) | undefined;
  /** Emitted when the rating receives focus. This event does not bubble. */
  "on:sigvelo-focus"?: ((e: SigveloRatingElementEvent) => void) | undefined;
  /** Emitted when the rating receives input. */
  "on:sigvelo-input"?: ((e: SigveloRatingElementEvent) => void) | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloResizeObserver` component event */
export type SigveloResizeObserverElementEvent<E = Event> = TypedEvent<
  SigveloResizeObserver,
  E
>;

export type SigveloResizeObserverProps = {
  /** Disables the resize observer. */
  disabled?: SigveloResizeObserver["disabled"] | undefined;
  /** Sets which box model the observer will observe changes to. */
  box?: SigveloResizeObserver["box"] | undefined;

  /** Emitted when a slotted element is resized. Like `ResizeObserver`, this event is also dispatched when each element is first observed. The `event.detail.entry` property contains a [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) with information about the element's dimensions. */
  "onsigvelo-resize"?:
    | ((e: SigveloResizeObserverElementEvent) => void)
    | undefined;
};

export type SigveloResizeObserverSolidJsProps = {
  /** Disables the resize observer. */
  "prop:disabled"?: SigveloResizeObserver["disabled"] | undefined;
  /** Sets which box model the observer will observe changes to. */
  "prop:box"?: SigveloResizeObserver["box"] | undefined;
  /** Emitted when a slotted element is resized. Like `ResizeObserver`, this event is also dispatched when each element is first observed. The `event.detail.entry` property contains a [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) with information about the element's dimensions. */
  "on:sigvelo-resize"?:
    | ((e: SigveloResizeObserverElementEvent) => void)
    | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloScrollAreaProps = {
  /** Which axis to allow scrolling on. */
  orientation?: SigveloScrollArea["orientation"] | undefined;
};

export type SigveloScrollAreaSolidJsProps = {
  /** Which axis to allow scrolling on. */
  "prop:orientation"?: SigveloScrollArea["orientation"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloScrollerProps = {
  /** The scroller's orientation. */
  orientation?: SigveloScroller["orientation"] | undefined;
  /** Removes the visible scrollbar. */
  "without-scrollbar"?: SigveloScroller["withoutScrollbar"] | undefined;
  /** Removes the visible scrollbar. */
  withoutScrollbar?: SigveloScroller["withoutScrollbar"] | undefined;
  /** Removes the shadows. */
  "without-shadow"?: SigveloScroller["withoutShadow"] | undefined;
  /** Removes the shadows. */
  withoutShadow?: SigveloScroller["withoutShadow"] | undefined;
  /**  */
  content?: SigveloScroller["content"] | undefined;
  /**  */
  canScroll?: SigveloScroller["canScroll"] | undefined;
};

export type SigveloScrollerSolidJsProps = {
  /** The scroller's orientation. */
  "prop:orientation"?: SigveloScroller["orientation"] | undefined;
  /** Removes the visible scrollbar. */
  "bool:without-scrollbar"?: SigveloScroller["withoutScrollbar"] | undefined;
  /** Removes the visible scrollbar. */
  "prop:withoutScrollbar"?: SigveloScroller["withoutScrollbar"] | undefined;
  /** Removes the shadows. */
  "bool:without-shadow"?: SigveloScroller["withoutShadow"] | undefined;
  /** Removes the shadows. */
  "prop:withoutShadow"?: SigveloScroller["withoutShadow"] | undefined;
  /**  */
  "prop:content"?: SigveloScroller["content"] | undefined;
  /**  */
  "prop:canScroll"?: SigveloScroller["canScroll"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloSearchListProps = {
  /** In most cases, you should slot the controller into the `controller` slot. However, when the controller must exist
outside the search list, you can set this property to the ID of an external `<input>` or `<sigvelo-text-field>`
element instead. */
  controller?: SigveloSearchList["controller"] | undefined;
  /** The search behavior to use when finding a matching item. The `exact` search is case-insensitive but requires an
exact match. The `fuzzy` search is more forgiving to typos. When using `custom`, you can set the `isMatch` property
to a custom function to determine if the provided query matches the element's content. */
  match?: SigveloSearchList["match"] | undefined;
  /** The time in milliseconds to use for debouncing the search results while the user types. */
  debounce?: SigveloSearchList["debounce"] | undefined;
  /**  */
  results?: SigveloSearchList["results"] | undefined;
  /**  */
  query?: SigveloSearchList["query"] | undefined;
  /** Whether any slotted item survived the current filter. Not the `empty` state — that one also needs a query.
Public like its siblings because Lit keys `changedProperties` on `keyof this`, which excludes private members. */
  hasVisibleItems?: SigveloSearchList["hasVisibleItems"] | undefined;
  /**  */
  isInitial?: SigveloSearchList["isInitial"] | undefined;
  /**  */
  resultsMessage?: SigveloSearchList["resultsMessage"] | undefined;
  /** A custom search function you can provide to change the search behavior. The function is applied to each item when
the search query changes. The `query` argument is the current search term, `content` is a string containing the
element's searchable content, including its `textContent` and `data-keywords"`, and `el` is the element being
searched. Property only. */
  isMatch?: SigveloSearchList["isMatch"] | undefined;
};

export type SigveloSearchListSolidJsProps = {
  /** In most cases, you should slot the controller into the `controller` slot. However, when the controller must exist
outside the search list, you can set this property to the ID of an external `<input>` or `<sigvelo-text-field>`
element instead. */
  "prop:controller"?: SigveloSearchList["controller"] | undefined;
  /** The search behavior to use when finding a matching item. The `exact` search is case-insensitive but requires an
exact match. The `fuzzy` search is more forgiving to typos. When using `custom`, you can set the `isMatch` property
to a custom function to determine if the provided query matches the element's content. */
  "prop:match"?: SigveloSearchList["match"] | undefined;
  /** The time in milliseconds to use for debouncing the search results while the user types. */
  "prop:debounce"?: SigveloSearchList["debounce"] | undefined;
  /**  */
  "prop:results"?: SigveloSearchList["results"] | undefined;
  /**  */
  "prop:query"?: SigveloSearchList["query"] | undefined;
  /** Whether any slotted item survived the current filter. Not the `empty` state — that one also needs a query.
Public like its siblings because Lit keys `changedProperties` on `keyof this`, which excludes private members. */
  "prop:hasVisibleItems"?: SigveloSearchList["hasVisibleItems"] | undefined;
  /**  */
  "prop:isInitial"?: SigveloSearchList["isInitial"] | undefined;
  /**  */
  "prop:resultsMessage"?: SigveloSearchList["resultsMessage"] | undefined;
  /** A custom search function you can provide to change the search behavior. The function is applied to each item when
the search query changes. The `query` argument is the current search term, `content` is a string containing the
element's searchable content, including its `textContent` and `data-keywords"`, and `el` is the element being
searched. Property only. */
  "prop:isMatch"?: SigveloSearchList["isMatch"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloSelect` component event */
export type SigveloSelectElementEvent<E = Event> = TypedEvent<SigveloSelect, E>;

export type SigveloSelectProps = {
  /** The select's label. If you need to provide HTML in the label, use the `label` slot instead. */
  label?: SigveloSelect["label"] | undefined;
  /** The select's description. If you need to provide HTML in the description, use the `description` slot instead. */
  description?: SigveloSelect["description"] | undefined;
  /** The name of the select. This will be submitted with the form as a name/value pair. */
  name?: SigveloSelect["name"] | undefined;
  /** The select's value. */
  value?: SigveloSelect["value"] | undefined;
  /** Disables the select. */
  disabled?: SigveloSelect["disabled"] | undefined;
  /** Makes the select a read-only field. */
  readonly?: SigveloSelect["readonly"] | undefined;
  /** The type of select to render. */
  variant?: SigveloSelect["variant"] | undefined;
  /** The select's size. */
  size?: SigveloSelect["size"] | undefined;
  /** Draws the select in a pill shape. */
  pill?: SigveloSelect["pill"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an ID of a form in the same document or shadow root. */
  form?: SigveloSelect["form"] | undefined;
  /** Makes the select required. Form submission will not be allowed when this is set and the select is blank. */
  required?: SigveloSelect["required"] | undefined;
  /** Tells the browser how to autocomplete the select. See [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
for available values. */
  autocomplete?: SigveloSelect["autocomplete"] | undefined;
  /** Sets the enter key label on virtual keyboards. */
  enterkeyhint?: SigveloSelect["enterkeyhint"] | undefined;
  /**  */
  isInvalid?: SigveloSelect["isInvalid"] | undefined;
  /**  */
  hadUserInteraction?: SigveloSelect["hadUserInteraction"] | undefined;
  /**  */
  wasSubmitted?: SigveloSelect["wasSubmitted"] | undefined;
  /**  */
  options?: SigveloSelect["options"] | undefined;

  /** Emitted when the select loses focus. This event does not bubble. */
  "onsigvelo-blur"?: ((e: SigveloSelectElementEvent) => void) | undefined;
  /** Emitted when the user commits changes to the select's value. */
  "onsigvelo-change"?: ((e: SigveloSelectElementEvent) => void) | undefined;
  /** Emitted when the select receives focus. This event does not bubble. */
  "onsigvelo-focus"?: ((e: SigveloSelectElementEvent) => void) | undefined;
  /** Emitted when the select receives input. */
  "onsigvelo-input"?: ((e: SigveloSelectElementEvent) => void) | undefined;
};

export type SigveloSelectSolidJsProps = {
  /** The select's label. If you need to provide HTML in the label, use the `label` slot instead. */
  "prop:label"?: SigveloSelect["label"] | undefined;
  /** The select's description. If you need to provide HTML in the description, use the `description` slot instead. */
  "prop:description"?: SigveloSelect["description"] | undefined;
  /** The name of the select. This will be submitted with the form as a name/value pair. */
  "prop:name"?: SigveloSelect["name"] | undefined;
  /** The select's value. */
  "prop:value"?: SigveloSelect["value"] | undefined;
  /** Disables the select. */
  "prop:disabled"?: SigveloSelect["disabled"] | undefined;
  /** Makes the select a read-only field. */
  "prop:readonly"?: SigveloSelect["readonly"] | undefined;
  /** The type of select to render. */
  "prop:variant"?: SigveloSelect["variant"] | undefined;
  /** The select's size. */
  "prop:size"?: SigveloSelect["size"] | undefined;
  /** Draws the select in a pill shape. */
  "prop:pill"?: SigveloSelect["pill"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an ID of a form in the same document or shadow root. */
  "prop:form"?: SigveloSelect["form"] | undefined;
  /** Makes the select required. Form submission will not be allowed when this is set and the select is blank. */
  "prop:required"?: SigveloSelect["required"] | undefined;
  /** Tells the browser how to autocomplete the select. See [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
for available values. */
  "prop:autocomplete"?: SigveloSelect["autocomplete"] | undefined;
  /** Sets the enter key label on virtual keyboards. */
  "prop:enterkeyhint"?: SigveloSelect["enterkeyhint"] | undefined;
  /**  */
  "prop:isInvalid"?: SigveloSelect["isInvalid"] | undefined;
  /**  */
  "prop:hadUserInteraction"?: SigveloSelect["hadUserInteraction"] | undefined;
  /**  */
  "prop:wasSubmitted"?: SigveloSelect["wasSubmitted"] | undefined;
  /**  */
  "prop:options"?: SigveloSelect["options"] | undefined;
  /** Emitted when the select loses focus. This event does not bubble. */
  "on:sigvelo-blur"?: ((e: SigveloSelectElementEvent) => void) | undefined;
  /** Emitted when the user commits changes to the select's value. */
  "on:sigvelo-change"?: ((e: SigveloSelectElementEvent) => void) | undefined;
  /** Emitted when the select receives focus. This event does not bubble. */
  "on:sigvelo-focus"?: ((e: SigveloSelectElementEvent) => void) | undefined;
  /** Emitted when the select receives input. */
  "on:sigvelo-input"?: ((e: SigveloSelectElementEvent) => void) | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloSelectionSummaryProps = {
  /** Number of selected items. */
  count?: SigveloSelectionSummary["count"] | undefined;
  /** Message shown when no items are selected. */
  "empty-label"?: SigveloSelectionSummary["emptyLabel"] | undefined;
  /** Message shown when no items are selected. */
  emptyLabel?: SigveloSelectionSummary["emptyLabel"] | undefined;
  /** Label used when exactly one item is selected. */
  "singular-label"?: SigveloSelectionSummary["singularLabel"] | undefined;
  /** Label used when exactly one item is selected. */
  singularLabel?: SigveloSelectionSummary["singularLabel"] | undefined;
  /** Label used when multiple items are selected. */
  "plural-label"?: SigveloSelectionSummary["pluralLabel"] | undefined;
  /** Label used when multiple items are selected. */
  pluralLabel?: SigveloSelectionSummary["pluralLabel"] | undefined;
};

export type SigveloSelectionSummarySolidJsProps = {
  /** Number of selected items. */
  "prop:count"?: SigveloSelectionSummary["count"] | undefined;
  /** Message shown when no items are selected. */
  "attr:empty-label"?: SigveloSelectionSummary["emptyLabel"] | undefined;
  /** Message shown when no items are selected. */
  "prop:emptyLabel"?: SigveloSelectionSummary["emptyLabel"] | undefined;
  /** Label used when exactly one item is selected. */
  "attr:singular-label"?: SigveloSelectionSummary["singularLabel"] | undefined;
  /** Label used when exactly one item is selected. */
  "prop:singularLabel"?: SigveloSelectionSummary["singularLabel"] | undefined;
  /** Label used when multiple items are selected. */
  "attr:plural-label"?: SigveloSelectionSummary["pluralLabel"] | undefined;
  /** Label used when multiple items are selected. */
  "prop:pluralLabel"?: SigveloSelectionSummary["pluralLabel"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloShareProps = {
  /** A human-readable label to be shared. This is sometimes ignored by the operating system, but you should usually
provide it as a fallback value. */
  label?: SigveloShare["label"] | undefined;
  /** A string of text to be shared. */
  text?: SigveloShare["text"] | undefined;
  /** A URL to be shares. */
  url?: SigveloShare["url"] | undefined;
  /** An array of [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) objects to be shared. Property only. */
  files?: SigveloShare["files"] | undefined;
  /** Disables the button. */
  disabled?: SigveloShare["disabled"] | undefined;
  /** The placement of the feedback animation when falling back to copying. */
  "feedback-placement"?: SigveloShare["feedbackPlacement"] | undefined;
  /** The placement of the feedback animation when falling back to copying. */
  feedbackPlacement?: SigveloShare["feedbackPlacement"] | undefined;
};

export type SigveloShareSolidJsProps = {
  /** A human-readable label to be shared. This is sometimes ignored by the operating system, but you should usually
provide it as a fallback value. */
  "prop:label"?: SigveloShare["label"] | undefined;
  /** A string of text to be shared. */
  "prop:text"?: SigveloShare["text"] | undefined;
  /** A URL to be shares. */
  "prop:url"?: SigveloShare["url"] | undefined;
  /** An array of [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) objects to be shared. Property only. */
  "prop:files"?: SigveloShare["files"] | undefined;
  /** Disables the button. */
  "prop:disabled"?: SigveloShare["disabled"] | undefined;
  /** The placement of the feedback animation when falling back to copying. */
  "attr:feedback-placement"?: SigveloShare["feedbackPlacement"] | undefined;
  /** The placement of the feedback animation when falling back to copying. */
  "prop:feedbackPlacement"?: SigveloShare["feedbackPlacement"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloSlideActivator` component event */
export type SigveloSlideActivatorElementEvent<E = Event> = TypedEvent<
  SigveloSlideActivator,
  E
>;

export type SigveloSlideActivatorProps = {
  /** The label to show in the slide activator's track. If you need to provide HTML in the label, use the `label` slot
instead. */
  label?: SigveloSlideActivator["label"] | undefined;
  /** The label to show when the control is activated. If omitted, the regular label will be shown. If you need to
provide HTML in the label, use the `label` slot instead. */
  "activated-label"?: SigveloSlideActivator["activatedLabel"] | undefined;
  /** The label to show when the control is activated. If omitted, the regular label will be shown. If you need to
provide HTML in the label, use the `label` slot instead. */
  activatedLabel?: SigveloSlideActivator["activatedLabel"] | undefined;
  /** Reflects when the control is activated. Remove this attribute to deactivate it. */
  activated?: SigveloSlideActivator["activated"] | undefined;
  /** Disables the control. */
  disabled?: SigveloSlideActivator["disabled"] | undefined;
  /** Draws attention to the track by adding a subtle animation. */
  attention?: SigveloSlideActivator["attention"] | undefined;
  /**  */
  thumb?: SigveloSlideActivator["thumb"] | undefined;
  /**  */
  isDragging?: SigveloSlideActivator["isDragging"] | undefined;
  /**  */
  isPressing?: SigveloSlideActivator["isPressing"] | undefined;
  /**  */
  thumbPosition?: SigveloSlideActivator["thumbPosition"] | undefined;

  /** Emitted when the control will activate. Calling `event.preventDefault()` will prevent the activation from occurring. */
  "onsigvelo-before-activate"?:
    | ((e: SigveloSlideActivatorElementEvent) => void)
    | undefined;
  /** Emitted immediately after the control is activated. */
  "onsigvelo-activate"?:
    | ((e: SigveloSlideActivatorElementEvent) => void)
    | undefined;
  /** Emitted when the control will deactivate. Calling `event.preventDefault()` will prevent the deactivation from occurring. */
  "onsigvelo-before-deactivate"?:
    | ((e: SigveloSlideActivatorElementEvent) => void)
    | undefined;
  /** Emitted immediately after the control is deactivated. */
  "onsigvelo-deactivate"?:
    | ((e: SigveloSlideActivatorElementEvent) => void)
    | undefined;
  /** Emitted as the slider progresses. Use `event.details.percent` to see how far along it is. */
  "onsigvelo-progress"?:
    | ((e: SigveloSlideActivatorElementEvent) => void)
    | undefined;
};

export type SigveloSlideActivatorSolidJsProps = {
  /** The label to show in the slide activator's track. If you need to provide HTML in the label, use the `label` slot
instead. */
  "prop:label"?: SigveloSlideActivator["label"] | undefined;
  /** The label to show when the control is activated. If omitted, the regular label will be shown. If you need to
provide HTML in the label, use the `label` slot instead. */
  "attr:activated-label"?: SigveloSlideActivator["activatedLabel"] | undefined;
  /** The label to show when the control is activated. If omitted, the regular label will be shown. If you need to
provide HTML in the label, use the `label` slot instead. */
  "prop:activatedLabel"?: SigveloSlideActivator["activatedLabel"] | undefined;
  /** Reflects when the control is activated. Remove this attribute to deactivate it. */
  "prop:activated"?: SigveloSlideActivator["activated"] | undefined;
  /** Disables the control. */
  "prop:disabled"?: SigveloSlideActivator["disabled"] | undefined;
  /** Draws attention to the track by adding a subtle animation. */
  "prop:attention"?: SigveloSlideActivator["attention"] | undefined;
  /**  */
  "prop:thumb"?: SigveloSlideActivator["thumb"] | undefined;
  /**  */
  "prop:isDragging"?: SigveloSlideActivator["isDragging"] | undefined;
  /**  */
  "prop:isPressing"?: SigveloSlideActivator["isPressing"] | undefined;
  /**  */
  "prop:thumbPosition"?: SigveloSlideActivator["thumbPosition"] | undefined;
  /** Emitted when the control will activate. Calling `event.preventDefault()` will prevent the activation from occurring. */
  "on:sigvelo-before-activate"?:
    | ((e: SigveloSlideActivatorElementEvent) => void)
    | undefined;
  /** Emitted immediately after the control is activated. */
  "on:sigvelo-activate"?:
    | ((e: SigveloSlideActivatorElementEvent) => void)
    | undefined;
  /** Emitted when the control will deactivate. Calling `event.preventDefault()` will prevent the deactivation from occurring. */
  "on:sigvelo-before-deactivate"?:
    | ((e: SigveloSlideActivatorElementEvent) => void)
    | undefined;
  /** Emitted immediately after the control is deactivated. */
  "on:sigvelo-deactivate"?:
    | ((e: SigveloSlideActivatorElementEvent) => void)
    | undefined;
  /** Emitted as the slider progresses. Use `event.details.percent` to see how far along it is. */
  "on:sigvelo-progress"?:
    | ((e: SigveloSlideActivatorElementEvent) => void)
    | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloSparklineProps = {
  /** An accessible label for the sparkline. This will be read by screen readers for users who can't see the chart, so
make sure to describe it appropriately. */
  label?: SigveloSparkline["label"] | undefined;
  /** A space-separated list of positive values to show in the sparkline, e.g. "10 25 18 30". At least two values are
required to generate a chart. */
  data?: SigveloSparkline["data"] | undefined;
  /** Determines the sparkline's variant. */
  variant?: SigveloSparkline["variant"] | undefined;
  /** Draws the component with colors to visually indicate the specified trend. */
  trend?: SigveloSparkline["trend"] | undefined;
  /** The interpolation method used to connect data points on the line. */
  curve?: SigveloSparkline["curve"] | undefined;
  /**  */
  points?: SigveloSparkline["points"] | undefined;
};

export type SigveloSparklineSolidJsProps = {
  /** An accessible label for the sparkline. This will be read by screen readers for users who can't see the chart, so
make sure to describe it appropriately. */
  "prop:label"?: SigveloSparkline["label"] | undefined;
  /** A space-separated list of positive values to show in the sparkline, e.g. "10 25 18 30". At least two values are
required to generate a chart. */
  "prop:data"?: SigveloSparkline["data"] | undefined;
  /** Determines the sparkline's variant. */
  "prop:variant"?: SigveloSparkline["variant"] | undefined;
  /** Draws the component with colors to visually indicate the specified trend. */
  "prop:trend"?: SigveloSparkline["trend"] | undefined;
  /** The interpolation method used to connect data points on the line. */
  "prop:curve"?: SigveloSparkline["curve"] | undefined;
  /**  */
  "prop:points"?: SigveloSparkline["points"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloSplitter` component event */
export type SigveloSplitterElementEvent<E = Event> = TypedEvent<
  SigveloSplitter,
  E
>;

export type SigveloSplitterProps = {
  /** The current position of the divider as a decimal (0-1). */
  position?: SigveloSplitter["position"] | undefined;
  /** The orientation of the splitter. */
  orientation?: SigveloSplitter["orientation"] | undefined;
  /** Disables the splitter, preventing it from being focused and resized. */
  disabled?: SigveloSplitter["disabled"] | undefined;
  /** A space-separated list of percentage snap points, e.g. "25% 50% 75%". */
  snap?: SigveloSplitter["snap"] | undefined;
  /** The maximum distance (in pixels) within which the divider will snap to a specified snap point. */
  "snap-threshold"?: SigveloSplitter["snapThreshold"] | undefined;
  /** The maximum distance (in pixels) within which the divider will snap to a specified snap point. */
  snapThreshold?: SigveloSplitter["snapThreshold"] | undefined;
  /**  */
  isCollapsed?: SigveloSplitter["isCollapsed"] | undefined;
  /**  */
  isDragging?: SigveloSplitter["isDragging"] | undefined;

  /** Dispatched when the splitter's handle is moved. */
  "onsigvelo-resize"?: ((e: SigveloSplitterElementEvent) => void) | undefined;
};

export type SigveloSplitterSolidJsProps = {
  /** The current position of the divider as a decimal (0-1). */
  "prop:position"?: SigveloSplitter["position"] | undefined;
  /** The orientation of the splitter. */
  "prop:orientation"?: SigveloSplitter["orientation"] | undefined;
  /** Disables the splitter, preventing it from being focused and resized. */
  "prop:disabled"?: SigveloSplitter["disabled"] | undefined;
  /** A space-separated list of percentage snap points, e.g. "25% 50% 75%". */
  "prop:snap"?: SigveloSplitter["snap"] | undefined;
  /** The maximum distance (in pixels) within which the divider will snap to a specified snap point. */
  "attr:snap-threshold"?: SigveloSplitter["snapThreshold"] | undefined;
  /** The maximum distance (in pixels) within which the divider will snap to a specified snap point. */
  "prop:snapThreshold"?: SigveloSplitter["snapThreshold"] | undefined;
  /**  */
  "prop:isCollapsed"?: SigveloSplitter["isCollapsed"] | undefined;
  /**  */
  "prop:isDragging"?: SigveloSplitter["isDragging"] | undefined;
  /** Dispatched when the splitter's handle is moved. */
  "on:sigvelo-resize"?: ((e: SigveloSplitterElementEvent) => void) | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloSwitch` component event */
export type SigveloSwitchElementEvent<E = Event> = TypedEvent<SigveloSwitch, E>;

export type SigveloSwitchProps = {
  /** The switch's label. If you need to provide HTML in the label, use the `label` slot instead. */
  label?: SigveloSwitch["label"] | undefined;
  /** The switch's description. If you need to provide HTML in the description, use the `description` slot instead. */
  description?: SigveloSwitch["description"] | undefined;
  /** The name of the switch. This will be submitted with the form as a name/value pair. */
  name?: SigveloSwitch["name"] | undefined;
  /** The switch's value. */
  value?: SigveloSwitch["value"] | undefined;
  /** The switch's checked state. */
  checked?: SigveloSwitch["checked"] | undefined;
  /** Disables the switch. */
  disabled?: SigveloSwitch["disabled"] | undefined;
  /** The switch's size. */
  size?: SigveloSwitch["size"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an ID of a form in the same document or shadow root. */
  form?: SigveloSwitch["form"] | undefined;
  /** Makes the switch required. Form submission will not be allowed until the switch is checked. */
  required?: SigveloSwitch["required"] | undefined;
  /**  */
  isInvalid?: SigveloSwitch["isInvalid"] | undefined;
  /**  */
  hadUserInteraction?: SigveloSwitch["hadUserInteraction"] | undefined;
  /**  */
  wasSubmitted?: SigveloSwitch["wasSubmitted"] | undefined;

  /** Emitted when the switch loses focus. This event does not bubble. */
  "onsigvelo-blur"?: ((e: SigveloSwitchElementEvent) => void) | undefined;
  /** Emitted when the user commits changes to the switch's value. */
  "onsigvelo-change"?: ((e: SigveloSwitchElementEvent) => void) | undefined;
  /** Emitted when the switch receives focus. This event does not bubble. */
  "onsigvelo-focus"?: ((e: SigveloSwitchElementEvent) => void) | undefined;
  /** Emitted when the switch receives input. */
  "onsigvelo-input"?: ((e: SigveloSwitchElementEvent) => void) | undefined;
};

export type SigveloSwitchSolidJsProps = {
  /** The switch's label. If you need to provide HTML in the label, use the `label` slot instead. */
  "prop:label"?: SigveloSwitch["label"] | undefined;
  /** The switch's description. If you need to provide HTML in the description, use the `description` slot instead. */
  "prop:description"?: SigveloSwitch["description"] | undefined;
  /** The name of the switch. This will be submitted with the form as a name/value pair. */
  "prop:name"?: SigveloSwitch["name"] | undefined;
  /** The switch's value. */
  "prop:value"?: SigveloSwitch["value"] | undefined;
  /** The switch's checked state. */
  "prop:checked"?: SigveloSwitch["checked"] | undefined;
  /** Disables the switch. */
  "prop:disabled"?: SigveloSwitch["disabled"] | undefined;
  /** The switch's size. */
  "prop:size"?: SigveloSwitch["size"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an ID of a form in the same document or shadow root. */
  "prop:form"?: SigveloSwitch["form"] | undefined;
  /** Makes the switch required. Form submission will not be allowed until the switch is checked. */
  "prop:required"?: SigveloSwitch["required"] | undefined;
  /**  */
  "prop:isInvalid"?: SigveloSwitch["isInvalid"] | undefined;
  /**  */
  "prop:hadUserInteraction"?: SigveloSwitch["hadUserInteraction"] | undefined;
  /**  */
  "prop:wasSubmitted"?: SigveloSwitch["wasSubmitted"] | undefined;
  /** Emitted when the switch loses focus. This event does not bubble. */
  "on:sigvelo-blur"?: ((e: SigveloSwitchElementEvent) => void) | undefined;
  /** Emitted when the user commits changes to the switch's value. */
  "on:sigvelo-change"?: ((e: SigveloSwitchElementEvent) => void) | undefined;
  /** Emitted when the switch receives focus. This event does not bubble. */
  "on:sigvelo-focus"?: ((e: SigveloSwitchElementEvent) => void) | undefined;
  /** Emitted when the switch receives input. */
  "on:sigvelo-input"?: ((e: SigveloSwitchElementEvent) => void) | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloTabProps = {
  /** The name of the tab panel this tab will link to. The tab panel must be an HTML element inside the
`<sigvelo-tab-list>` element with a `name` attribute. */
  panel?: SigveloTab["panel"] | undefined;
  /** Disables the tab, preventing it from being activated. */
  disabled?: SigveloTab["disabled"] | undefined;
};

export type SigveloTabSolidJsProps = {
  /** The name of the tab panel this tab will link to. The tab panel must be an HTML element inside the
`<sigvelo-tab-list>` element with a `name` attribute. */
  "prop:panel"?: SigveloTab["panel"] | undefined;
  /** Disables the tab, preventing it from being activated. */
  "prop:disabled"?: SigveloTab["disabled"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloTabPanelProps = {
  /** The name of the tab panel. Used for assigning tabs to panels. */
  name?: SigveloTabPanel["name"] | undefined;
};

export type SigveloTabPanelSolidJsProps = {
  /** The name of the tab panel. Used for assigning tabs to panels. */
  "prop:name"?: SigveloTabPanel["name"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloTabList` component event */
export type SigveloTabListElementEvent<E = Event> = TypedEvent<
  SigveloTabList,
  E
>;

export type SigveloTabListProps = {
  /** An accessible label for the tab list. This won't be visible, but it will be read to assistive devices so you should
always include one. */
  label?: SigveloTabList["label"] | undefined;
  /** The name of the tab panel that's currently active. */
  tab?: SigveloTabList["tab"] | undefined;
  /** The placement of tab controls. */
  placement?: SigveloTabList["placement"] | undefined;

  /** Emitted after a tab is shown. The event will include a `detail` object with `tab` and `panel`properties that reference the respective tab and panel elements. */
  "onsigvelo-tab-shown"?: ((e: SigveloTabListElementEvent) => void) | undefined;
  /** Emitted after a tab is hidden. The event will include a `detail` object with `tab` and `panel` properties that reference the respective tab and panel elements. */
  "onsigvelo-tab-hidden"?:
    | ((e: SigveloTabListElementEvent) => void)
    | undefined;
};

export type SigveloTabListSolidJsProps = {
  /** An accessible label for the tab list. This won't be visible, but it will be read to assistive devices so you should
always include one. */
  "prop:label"?: SigveloTabList["label"] | undefined;
  /** The name of the tab panel that's currently active. */
  "prop:tab"?: SigveloTabList["tab"] | undefined;
  /** The placement of tab controls. */
  "prop:placement"?: SigveloTabList["placement"] | undefined;
  /** Emitted after a tab is shown. The event will include a `detail` object with `tab` and `panel`properties that reference the respective tab and panel elements. */
  "on:sigvelo-tab-shown"?:
    | ((e: SigveloTabListElementEvent) => void)
    | undefined;
  /** Emitted after a tab is hidden. The event will include a `detail` object with `tab` and `panel` properties that reference the respective tab and panel elements. */
  "on:sigvelo-tab-hidden"?:
    | ((e: SigveloTabListElementEvent) => void)
    | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloTextArea` component event */
export type SigveloTextAreaElementEvent<E = Event> = TypedEvent<
  SigveloTextArea,
  E
>;

export type SigveloTextAreaProps = {
  /** The text area's label. If you need to provide HTML in the label, use the `label` slot instead. */
  label?: SigveloTextArea["label"] | undefined;
  /** The text area's description. If you need to provide HTML in the description, use the `description` slot instead. */
  description?: SigveloTextArea["description"] | undefined;
  /** The name of the text area. This will be submitted with the form as a name/value pair. */
  name?: SigveloTextArea["name"] | undefined;
  /** The text area's value. */
  value?: SigveloTextArea["value"] | undefined;
  /** A placeholder to show in the text area when it's blank. */
  placeholder?: SigveloTextArea["placeholder"] | undefined;
  /** Disables the text area. */
  disabled?: SigveloTextArea["disabled"] | undefined;
  /** Makes the text area a read-only area. */
  readonly?: SigveloTextArea["readonly"] | undefined;
  /** Determines how the text area can be resized. */
  resize?: SigveloTextArea["resize"] | undefined;
  /** The default number of rows visible in the text area. */
  rows?: SigveloTextArea["rows"] | undefined;
  /** The type of text area to render. */
  variant?: SigveloTextArea["variant"] | undefined;
  /** The text area's size. */
  size?: SigveloTextArea["size"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an ID of a form in the same document or shadow root. */
  form?: SigveloTextArea["form"] | undefined;
  /** Makes the text area required. Form submission will not be allowed when this is set and the text area is blank. */
  required?: SigveloTextArea["required"] | undefined;
  /** The minimum string length that will be considered valid. */
  minlength?: SigveloTextArea["minLength"] | undefined;
  /** The minimum string length that will be considered valid. */
  minLength?: SigveloTextArea["minLength"] | undefined;
  /** The maximum string length that will be considered valid. */
  maxlength?: SigveloTextArea["maxLength"] | undefined;
  /** The maximum string length that will be considered valid. */
  maxLength?: SigveloTextArea["maxLength"] | undefined;
  /** Turns autocapitalize on or off in supported browsers. */
  autocapitalize?: SigveloTextArea["autocapitalize"] | undefined;
  /** Tells the browser how to autocomplete the text area. See [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
for available values. */
  autocomplete?: SigveloTextArea["autocomplete"] | undefined;
  /** Turns autocorrect on or off in supported browsers. Set to true or 'on' to enable, false or 'off' to disable. */
  autocorrect?: SigveloTextArea["autocorrect"] | undefined;
  /** Tells the browser to focus the text area when the page loads or a dialog is shown. */
  autofocus?: SigveloTextArea["autofocus"] | undefined;
  /** Sets the enter key label on virtual keyboards. */
  enterkeyhint?: SigveloTextArea["enterkeyhint"] | undefined;
  /** Provides the browser with a hint about the type of data that might be entered by the user, allowing the appropriate
virtual keyboard to be displayed on supported devices. */
  inputmode?: SigveloTextArea["inputmode"] | undefined;
  /** Turns spell checking on or off in supported browsers. */
  spellcheck?: SigveloTextArea["spellcheck"] | undefined;
  /**  */
  isInvalid?: SigveloTextArea["isInvalid"] | undefined;
  /**  */
  hadUserInteraction?: SigveloTextArea["hadUserInteraction"] | undefined;
  /**  */
  wasSubmitted?: SigveloTextArea["wasSubmitted"] | undefined;

  /** Emitted when the text area loses focus. This event does not bubble. */
  "onsigvelo-blur"?: ((e: SigveloTextAreaElementEvent) => void) | undefined;
  /** Emitted when the user commits changes to the text area's value. */
  "onsigvelo-change"?: ((e: SigveloTextAreaElementEvent) => void) | undefined;
  /** Emitted when the text area receives focus. This event does not bubble. */
  "onsigvelo-focus"?: ((e: SigveloTextAreaElementEvent) => void) | undefined;
  /** Emitted when the text area receives input. */
  "onsigvelo-input"?: ((e: SigveloTextAreaElementEvent) => void) | undefined;
};

export type SigveloTextAreaSolidJsProps = {
  /** The text area's label. If you need to provide HTML in the label, use the `label` slot instead. */
  "prop:label"?: SigveloTextArea["label"] | undefined;
  /** The text area's description. If you need to provide HTML in the description, use the `description` slot instead. */
  "prop:description"?: SigveloTextArea["description"] | undefined;
  /** The name of the text area. This will be submitted with the form as a name/value pair. */
  "prop:name"?: SigveloTextArea["name"] | undefined;
  /** The text area's value. */
  "prop:value"?: SigveloTextArea["value"] | undefined;
  /** A placeholder to show in the text area when it's blank. */
  "prop:placeholder"?: SigveloTextArea["placeholder"] | undefined;
  /** Disables the text area. */
  "prop:disabled"?: SigveloTextArea["disabled"] | undefined;
  /** Makes the text area a read-only area. */
  "prop:readonly"?: SigveloTextArea["readonly"] | undefined;
  /** Determines how the text area can be resized. */
  "prop:resize"?: SigveloTextArea["resize"] | undefined;
  /** The default number of rows visible in the text area. */
  "prop:rows"?: SigveloTextArea["rows"] | undefined;
  /** The type of text area to render. */
  "prop:variant"?: SigveloTextArea["variant"] | undefined;
  /** The text area's size. */
  "prop:size"?: SigveloTextArea["size"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an ID of a form in the same document or shadow root. */
  "prop:form"?: SigveloTextArea["form"] | undefined;
  /** Makes the text area required. Form submission will not be allowed when this is set and the text area is blank. */
  "prop:required"?: SigveloTextArea["required"] | undefined;
  /** The minimum string length that will be considered valid. */
  "attr:minlength"?: SigveloTextArea["minLength"] | undefined;
  /** The minimum string length that will be considered valid. */
  "prop:minLength"?: SigveloTextArea["minLength"] | undefined;
  /** The maximum string length that will be considered valid. */
  "attr:maxlength"?: SigveloTextArea["maxLength"] | undefined;
  /** The maximum string length that will be considered valid. */
  "prop:maxLength"?: SigveloTextArea["maxLength"] | undefined;
  /** Turns autocapitalize on or off in supported browsers. */
  "prop:autocapitalize"?: SigveloTextArea["autocapitalize"] | undefined;
  /** Tells the browser how to autocomplete the text area. See [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
for available values. */
  "prop:autocomplete"?: SigveloTextArea["autocomplete"] | undefined;
  /** Turns autocorrect on or off in supported browsers. Set to true or 'on' to enable, false or 'off' to disable. */
  "prop:autocorrect"?: SigveloTextArea["autocorrect"] | undefined;
  /** Tells the browser to focus the text area when the page loads or a dialog is shown. */
  "prop:autofocus"?: SigveloTextArea["autofocus"] | undefined;
  /** Sets the enter key label on virtual keyboards. */
  "prop:enterkeyhint"?: SigveloTextArea["enterkeyhint"] | undefined;
  /** Provides the browser with a hint about the type of data that might be entered by the user, allowing the appropriate
virtual keyboard to be displayed on supported devices. */
  "prop:inputmode"?: SigveloTextArea["inputmode"] | undefined;
  /** Turns spell checking on or off in supported browsers. */
  "prop:spellcheck"?: SigveloTextArea["spellcheck"] | undefined;
  /**  */
  "prop:isInvalid"?: SigveloTextArea["isInvalid"] | undefined;
  /**  */
  "prop:hadUserInteraction"?: SigveloTextArea["hadUserInteraction"] | undefined;
  /**  */
  "prop:wasSubmitted"?: SigveloTextArea["wasSubmitted"] | undefined;
  /** Emitted when the text area loses focus. This event does not bubble. */
  "on:sigvelo-blur"?: ((e: SigveloTextAreaElementEvent) => void) | undefined;
  /** Emitted when the user commits changes to the text area's value. */
  "on:sigvelo-change"?: ((e: SigveloTextAreaElementEvent) => void) | undefined;
  /** Emitted when the text area receives focus. This event does not bubble. */
  "on:sigvelo-focus"?: ((e: SigveloTextAreaElementEvent) => void) | undefined;
  /** Emitted when the text area receives input. */
  "on:sigvelo-input"?: ((e: SigveloTextAreaElementEvent) => void) | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloTextMaskProps = {
  /** The URL of the image to use for the mask. */
  image?: SigveloTextMask["image"] | undefined;
  /** Creates a parallax-like effect where the image stays fixed while scrolling */
  fixed?: SigveloTextMask["fixed"] | undefined;
};

export type SigveloTextMaskSolidJsProps = {
  /** The URL of the image to use for the mask. */
  "prop:image"?: SigveloTextMask["image"] | undefined;
  /** Creates a parallax-like effect where the image stays fixed while scrolling */
  "prop:fixed"?: SigveloTextMask["fixed"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloTimedContentProps = {
  /** The date to start showing the content. */
  "start-date"?: SigveloTimedContent["startDate"] | undefined;
  /** The date to start showing the content. */
  startDate?: SigveloTimedContent["startDate"] | undefined;
  /** The date to stop showing the content. */
  "end-date"?: SigveloTimedContent["endDate"] | undefined;
  /** The date to stop showing the content. */
  endDate?: SigveloTimedContent["endDate"] | undefined;
  /** When set, the content will update as the time changes. */
  live?: SigveloTimedContent["live"] | undefined;
};

export type SigveloTimedContentSolidJsProps = {
  /** The date to start showing the content. */
  "attr:start-date"?: SigveloTimedContent["startDate"] | undefined;
  /** The date to start showing the content. */
  "prop:startDate"?: SigveloTimedContent["startDate"] | undefined;
  /** The date to stop showing the content. */
  "attr:end-date"?: SigveloTimedContent["endDate"] | undefined;
  /** The date to stop showing the content. */
  "prop:endDate"?: SigveloTimedContent["endDate"] | undefined;
  /** When set, the content will update as the time changes. */
  "prop:live"?: SigveloTimedContent["live"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloToastItem` component event */
export type SigveloToastItemElementEvent<E = Event> = TypedEvent<
  SigveloToastItem,
  E
>;

export type SigveloToastItemProps = {
  /** The type of notification to render. */
  color?: SigveloToastItem["color"] | undefined;
  /** The length of time to show the notification before removing it. Set this to `0` to show the notification until the
user dismisses it. */
  duration?: SigveloToastItem["duration"] | undefined;
  /** When set, the close button will be omitted. */
  "without-close"?: SigveloToastItem["withoutClose"] | undefined;
  /** When set, the close button will be omitted. */
  withoutClose?: SigveloToastItem["withoutClose"] | undefined;

  /** Emitted when the toast item is dismissed. */
  "onsigvelo-before-close"?:
    | ((e: SigveloToastItemElementEvent) => void)
    | undefined;
  /** Emitted after the toast has been dismissed and the hide animation has completed. */
  "onsigvelo-close"?: ((e: SigveloToastItemElementEvent) => void) | undefined;
};

export type SigveloToastItemSolidJsProps = {
  /** The type of notification to render. */
  "prop:color"?: SigveloToastItem["color"] | undefined;
  /** The length of time to show the notification before removing it. Set this to `0` to show the notification until the
user dismisses it. */
  "prop:duration"?: SigveloToastItem["duration"] | undefined;
  /** When set, the close button will be omitted. */
  "bool:without-close"?: SigveloToastItem["withoutClose"] | undefined;
  /** When set, the close button will be omitted. */
  "prop:withoutClose"?: SigveloToastItem["withoutClose"] | undefined;
  /** Emitted when the toast item is dismissed. */
  "on:sigvelo-before-close"?:
    | ((e: SigveloToastItemElementEvent) => void)
    | undefined;
  /** Emitted after the toast has been dismissed and the hide animation has completed. */
  "on:sigvelo-close"?: ((e: SigveloToastItemElementEvent) => void) | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloTransitionGroup` component event */
export type SigveloTransitionGroupElementEvent<E = Event> = TypedEvent<
  SigveloTransitionGroup,
  E
>;

export type SigveloTransitionGroupProps = {
  /** Disables transition animations. However, the `sigvelo-content-changed` and `sigvelo-transition-end` events will still
be dispatched. */
  "disable-transitions"?:
    | SigveloTransitionGroup["disableTransitions"]
    | undefined;
  /** Disables transition animations. However, the `sigvelo-content-changed` and `sigvelo-transition-end` events will still
be dispatched. */
  disableTransitions?: SigveloTransitionGroup["disableTransitions"] | undefined;
  /** By default, no animation will occur when the user indicates a preference for reduced motion. Use this attribute to
override this behavior when necessary. */
  "ignore-reduced-motion"?:
    | SigveloTransitionGroup["ignoreReducedMotion"]
    | undefined;
  /** By default, no animation will occur when the user indicates a preference for reduced motion. Use this attribute to
override this behavior when necessary. */
  ignoreReducedMotion?:
    | SigveloTransitionGroup["ignoreReducedMotion"]
    | undefined;
  /** Determines if the transition group is currently animating. (Property only) */
  isTransitioning?: SigveloTransitionGroup["isTransitioning"] | undefined;
  /** A custom enter/exit animation conforming to the `TransitionAnimation` interface.
(Property only) */
  transitionAnimation?:
    | SigveloTransitionGroup["transitionAnimation"]
    | undefined;
  /** By default, the transition group observes and animates its own children. In some cases, you may want it to control
another element's children. This is useful in cases where you can't directly wrap child elements with the
`<sigvelo-transition-group>` element.

For example, if you embed a transition group in a component's shadow root but need it to control slotted (light
DOM) elements, you can't simply wrap the slot because the mutation observer can't see projected (slotted) elements.
In this case, point this property to the target element and the transition group will hide itself and observe the
target container's children instead. (Property only) */
  transitionContainer?:
    | SigveloTransitionGroup["transitionContainer"]
    | undefined;

  /** Emitted when content changes and before the transition animation begins. */
  "onsigvelo-content-changed"?:
    | ((e: SigveloTransitionGroupElementEvent) => void)
    | undefined;
  /** Emitted when transition animations end. */
  "onsigvelo-transition-end"?:
    | ((e: SigveloTransitionGroupElementEvent) => void)
    | undefined;
};

export type SigveloTransitionGroupSolidJsProps = {
  /** Disables transition animations. However, the `sigvelo-content-changed` and `sigvelo-transition-end` events will still
be dispatched. */
  "bool:disable-transitions"?:
    | SigveloTransitionGroup["disableTransitions"]
    | undefined;
  /** Disables transition animations. However, the `sigvelo-content-changed` and `sigvelo-transition-end` events will still
be dispatched. */
  "prop:disableTransitions"?:
    | SigveloTransitionGroup["disableTransitions"]
    | undefined;
  /** By default, no animation will occur when the user indicates a preference for reduced motion. Use this attribute to
override this behavior when necessary. */
  "bool:ignore-reduced-motion"?:
    | SigveloTransitionGroup["ignoreReducedMotion"]
    | undefined;
  /** By default, no animation will occur when the user indicates a preference for reduced motion. Use this attribute to
override this behavior when necessary. */
  "prop:ignoreReducedMotion"?:
    | SigveloTransitionGroup["ignoreReducedMotion"]
    | undefined;
  /** Determines if the transition group is currently animating. (Property only) */
  "prop:isTransitioning"?:
    | SigveloTransitionGroup["isTransitioning"]
    | undefined;
  /** A custom enter/exit animation conforming to the `TransitionAnimation` interface.
(Property only) */
  "prop:transitionAnimation"?:
    | SigveloTransitionGroup["transitionAnimation"]
    | undefined;
  /** By default, the transition group observes and animates its own children. In some cases, you may want it to control
another element's children. This is useful in cases where you can't directly wrap child elements with the
`<sigvelo-transition-group>` element.

For example, if you embed a transition group in a component's shadow root but need it to control slotted (light
DOM) elements, you can't simply wrap the slot because the mutation observer can't see projected (slotted) elements.
In this case, point this property to the target element and the transition group will hide itself and observe the
target container's children instead. (Property only) */
  "prop:transitionContainer"?:
    | SigveloTransitionGroup["transitionContainer"]
    | undefined;
  /** Emitted when content changes and before the transition animation begins. */
  "on:sigvelo-content-changed"?:
    | ((e: SigveloTransitionGroupElementEvent) => void)
    | undefined;
  /** Emitted when transition animations end. */
  "on:sigvelo-transition-end"?:
    | ((e: SigveloTransitionGroupElementEvent) => void)
    | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloToastProps = {
  /** The placement of the toast stack on the screen. */
  placement?: SigveloToast["placement"] | undefined;
  /**  */
  stack?: SigveloToast["stack"] | undefined;
  /**  */
  transitionGroup?: SigveloToast["transitionGroup"] | undefined;
  /** A custom enter/exit animation passed through to the internal transition group.
(Property only) */
  transitionAnimation?: SigveloToast["transitionAnimation"] | undefined;
};

export type SigveloToastSolidJsProps = {
  /** The placement of the toast stack on the screen. */
  "prop:placement"?: SigveloToast["placement"] | undefined;
  /**  */
  "prop:stack"?: SigveloToast["stack"] | undefined;
  /**  */
  "prop:transitionGroup"?: SigveloToast["transitionGroup"] | undefined;
  /** A custom enter/exit animation passed through to the internal transition group.
(Property only) */
  "prop:transitionAnimation"?: SigveloToast["transitionAnimation"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloToggleIcon` component event */
export type SigveloToggleIconElementEvent<E = Event> = TypedEvent<
  SigveloToggleIcon,
  E
>;

export type SigveloToggleIconProps = {
  /** The toggle icon's label. The label won't be displayed, but it will be announced by assistive devices. */
  label?: SigveloToggleIcon["label"] | undefined;
  /** The name of the toggle icon. This will be submitted with the form as a name/value pair. */
  name?: SigveloToggleIcon["name"] | undefined;
  /** The toggle icon's value. */
  value?: SigveloToggleIcon["value"] | undefined;
  /** The toggle icon's checked state. */
  checked?: SigveloToggleIcon["checked"] | undefined;
  /** Disables the toggle icon. */
  disabled?: SigveloToggleIcon["disabled"] | undefined;
  /** The checkbox's size. */
  size?: SigveloToggleIcon["size"] | undefined;
  /** The animation to use when toggling. */
  effect?: SigveloToggleIcon["effect"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an ID of a form in the same document or shadow root. */
  form?: SigveloToggleIcon["form"] | undefined;
  /** Makes the toggle icon required. Form submission will not be allowed until the toggle icon is checked. */
  required?: SigveloToggleIcon["required"] | undefined;
  /**  */
  button?: SigveloToggleIcon["button"] | undefined;
  /**  */
  isInvalid?: SigveloToggleIcon["isInvalid"] | undefined;
  /**  */
  hadUserInteraction?: SigveloToggleIcon["hadUserInteraction"] | undefined;
  /**  */
  wasSubmitted?: SigveloToggleIcon["wasSubmitted"] | undefined;

  /** Emitted when the toggle icon loses focus. This event does not bubble. */
  "onsigvelo-blur"?: ((e: SigveloToggleIconElementEvent) => void) | undefined;
  /** Emitted when the user commits changes to the toggle's value. */
  "onsigvelo-change"?: ((e: SigveloToggleIconElementEvent) => void) | undefined;
  /** Emitted when the checkbox receives focus. This event does not bubble. */
  "onsigvelo-focus"?: ((e: SigveloToggleIconElementEvent) => void) | undefined;
  /** Emitted when the checkbox receives input. */
  "onsigvelo-input"?: ((e: SigveloToggleIconElementEvent) => void) | undefined;
};

export type SigveloToggleIconSolidJsProps = {
  /** The toggle icon's label. The label won't be displayed, but it will be announced by assistive devices. */
  "prop:label"?: SigveloToggleIcon["label"] | undefined;
  /** The name of the toggle icon. This will be submitted with the form as a name/value pair. */
  "prop:name"?: SigveloToggleIcon["name"] | undefined;
  /** The toggle icon's value. */
  "prop:value"?: SigveloToggleIcon["value"] | undefined;
  /** The toggle icon's checked state. */
  "prop:checked"?: SigveloToggleIcon["checked"] | undefined;
  /** Disables the toggle icon. */
  "prop:disabled"?: SigveloToggleIcon["disabled"] | undefined;
  /** The checkbox's size. */
  "prop:size"?: SigveloToggleIcon["size"] | undefined;
  /** The animation to use when toggling. */
  "prop:effect"?: SigveloToggleIcon["effect"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an ID of a form in the same document or shadow root. */
  "prop:form"?: SigveloToggleIcon["form"] | undefined;
  /** Makes the toggle icon required. Form submission will not be allowed until the toggle icon is checked. */
  "prop:required"?: SigveloToggleIcon["required"] | undefined;
  /**  */
  "prop:button"?: SigveloToggleIcon["button"] | undefined;
  /**  */
  "prop:isInvalid"?: SigveloToggleIcon["isInvalid"] | undefined;
  /**  */
  "prop:hadUserInteraction"?:
    | SigveloToggleIcon["hadUserInteraction"]
    | undefined;
  /**  */
  "prop:wasSubmitted"?: SigveloToggleIcon["wasSubmitted"] | undefined;
  /** Emitted when the toggle icon loses focus. This event does not bubble. */
  "on:sigvelo-blur"?: ((e: SigveloToggleIconElementEvent) => void) | undefined;
  /** Emitted when the user commits changes to the toggle's value. */
  "on:sigvelo-change"?:
    | ((e: SigveloToggleIconElementEvent) => void)
    | undefined;
  /** Emitted when the checkbox receives focus. This event does not bubble. */
  "on:sigvelo-focus"?: ((e: SigveloToggleIconElementEvent) => void) | undefined;
  /** Emitted when the checkbox receives input. */
  "on:sigvelo-input"?: ((e: SigveloToggleIconElementEvent) => void) | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloToggleTag` component event */
export type SigveloToggleTagElementEvent<E = Event> = TypedEvent<
  SigveloToggleTag,
  E
>;

export type SigveloToggleTagProps = {
  /** The toggle tag's label. If you need to provide HTML in the label, use the `label` slot instead. */
  label?: SigveloToggleTag["label"] | undefined;
  /** The name of the toggle tag. This will be submitted with the form as a name/value pair. */
  name?: SigveloToggleTag["name"] | undefined;
  /** The toggle tag's value. */
  value?: SigveloToggleTag["value"] | undefined;
  /** The toggle tag's checked state. */
  checked?: SigveloToggleTag["checked"] | undefined;
  /** Disables the toggle tag. */
  disabled?: SigveloToggleTag["disabled"] | undefined;
  /** The toggle tag's size. */
  size?: SigveloToggleTag["size"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an ID of a form in the same document or shadow root. */
  form?: SigveloToggleTag["form"] | undefined;
  /** Makes the toggle tag required. Form submission will not be allowed until the toggle tag is checked. */
  required?: SigveloToggleTag["required"] | undefined;
  /**  */
  isInvalid?: SigveloToggleTag["isInvalid"] | undefined;
  /**  */
  hadUserInteraction?: SigveloToggleTag["hadUserInteraction"] | undefined;
  /**  */
  wasSubmitted?: SigveloToggleTag["wasSubmitted"] | undefined;

  /** Emitted when the toggle tag loses focus. This event does not bubble. */
  "onsigvelo-blur"?: ((e: SigveloToggleTagElementEvent) => void) | undefined;
  /** Emitted when the user commits changes to the toggle tag's value. */
  "onsigvelo-change"?: ((e: SigveloToggleTagElementEvent) => void) | undefined;
  /** Emitted when the toggle tag receives focus. This event does not bubble. */
  "onsigvelo-focus"?: ((e: SigveloToggleTagElementEvent) => void) | undefined;
  /** Emitted when the toggle tag receives input. */
  "onsigvelo-input"?: ((e: SigveloToggleTagElementEvent) => void) | undefined;
};

export type SigveloToggleTagSolidJsProps = {
  /** The toggle tag's label. If you need to provide HTML in the label, use the `label` slot instead. */
  "prop:label"?: SigveloToggleTag["label"] | undefined;
  /** The name of the toggle tag. This will be submitted with the form as a name/value pair. */
  "prop:name"?: SigveloToggleTag["name"] | undefined;
  /** The toggle tag's value. */
  "prop:value"?: SigveloToggleTag["value"] | undefined;
  /** The toggle tag's checked state. */
  "prop:checked"?: SigveloToggleTag["checked"] | undefined;
  /** Disables the toggle tag. */
  "prop:disabled"?: SigveloToggleTag["disabled"] | undefined;
  /** The toggle tag's size. */
  "prop:size"?: SigveloToggleTag["size"] | undefined;
  /** The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
this attribute must be an ID of a form in the same document or shadow root. */
  "prop:form"?: SigveloToggleTag["form"] | undefined;
  /** Makes the toggle tag required. Form submission will not be allowed until the toggle tag is checked. */
  "prop:required"?: SigveloToggleTag["required"] | undefined;
  /**  */
  "prop:isInvalid"?: SigveloToggleTag["isInvalid"] | undefined;
  /**  */
  "prop:hadUserInteraction"?:
    | SigveloToggleTag["hadUserInteraction"]
    | undefined;
  /**  */
  "prop:wasSubmitted"?: SigveloToggleTag["wasSubmitted"] | undefined;
  /** Emitted when the toggle tag loses focus. This event does not bubble. */
  "on:sigvelo-blur"?: ((e: SigveloToggleTagElementEvent) => void) | undefined;
  /** Emitted when the user commits changes to the toggle tag's value. */
  "on:sigvelo-change"?: ((e: SigveloToggleTagElementEvent) => void) | undefined;
  /** Emitted when the toggle tag receives focus. This event does not bubble. */
  "on:sigvelo-focus"?: ((e: SigveloToggleTagElementEvent) => void) | undefined;
  /** Emitted when the toggle tag receives input. */
  "on:sigvelo-input"?: ((e: SigveloToggleTagElementEvent) => void) | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type SigveloToolbarProps = {
  /** The toolbar's orientation. This changes which arrow keys are used to select adjacent buttons. */
  orientation?: SigveloToolbar["orientation"] | undefined;
};

export type SigveloToolbarSolidJsProps = {
  /** The toolbar's orientation. This changes which arrow keys are used to select adjacent buttons. */
  "prop:orientation"?: SigveloToolbar["orientation"] | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

/** `SigveloZoomableFrame` component event */
export type SigveloZoomableFrameElementEvent<E = Event> = TypedEvent<
  SigveloZoomableFrame,
  E
>;

export type SigveloZoomableFrameProps = {
  /** The URL of the content to display. */
  src?: SigveloZoomableFrame["src"] | undefined;
  /** Inline HTML to display. */
  srcdoc?: SigveloZoomableFrame["srcdoc"] | undefined;
  /** Accessible label for the embedded document. */
  label?: SigveloZoomableFrame["label"] | undefined;
  /** Allows fullscreen mode. */
  allowfullscreen?: SigveloZoomableFrame["allowfullscreen"] | undefined;
  /** Controls iframe loading behavior. */
  loading?: SigveloZoomableFrame["loading"] | undefined;
  /** Controls referrer information. */
  referrerpolicy?: SigveloZoomableFrame["referrerpolicy"] | undefined;
  /** Security restrictions for the iframe. */
  sandbox?: SigveloZoomableFrame["sandbox"] | undefined;
  /** The current zoom of the frame, e.g. 0 = 0% and 1 = 100%. */
  zoom?: SigveloZoomableFrame["zoom"] | undefined;
  /** The zoom levels to step through when using zoom controls. This does not restrict programmatic changes to the zoom. */
  "zoom-levels"?: SigveloZoomableFrame["zoomLevels"] | undefined;
  /** The zoom levels to step through when using zoom controls. This does not restrict programmatic changes to the zoom. */
  zoomLevels?: SigveloZoomableFrame["zoomLevels"] | undefined;
  /** Removes the zoom controls. */
  "without-controls"?: SigveloZoomableFrame["withoutControls"] | undefined;
  /** Removes the zoom controls. */
  withoutControls?: SigveloZoomableFrame["withoutControls"] | undefined;
  /** Disables interaction when present. */
  "without-interaction"?:
    | SigveloZoomableFrame["withoutInteraction"]
    | undefined;
  /** Disables interaction when present. */
  withoutInteraction?: SigveloZoomableFrame["withoutInteraction"] | undefined;
  /**  */
  iframe?: SigveloZoomableFrame["iframe"] | undefined;

  /** Emitted when the internal iframe when it finishes loading. */
  onload?: ((e: SigveloZoomableFrameElementEvent) => void) | undefined;
  /** Emitted from the internal iframe when it fails to load. */
  onerror?: ((e: SigveloZoomableFrameElementEvent) => void) | undefined;
};

export type SigveloZoomableFrameSolidJsProps = {
  /** The URL of the content to display. */
  "prop:src"?: SigveloZoomableFrame["src"] | undefined;
  /** Inline HTML to display. */
  "prop:srcdoc"?: SigveloZoomableFrame["srcdoc"] | undefined;
  /** Accessible label for the embedded document. */
  "prop:label"?: SigveloZoomableFrame["label"] | undefined;
  /** Allows fullscreen mode. */
  "prop:allowfullscreen"?: SigveloZoomableFrame["allowfullscreen"] | undefined;
  /** Controls iframe loading behavior. */
  "prop:loading"?: SigveloZoomableFrame["loading"] | undefined;
  /** Controls referrer information. */
  "prop:referrerpolicy"?: SigveloZoomableFrame["referrerpolicy"] | undefined;
  /** Security restrictions for the iframe. */
  "prop:sandbox"?: SigveloZoomableFrame["sandbox"] | undefined;
  /** The current zoom of the frame, e.g. 0 = 0% and 1 = 100%. */
  "prop:zoom"?: SigveloZoomableFrame["zoom"] | undefined;
  /** The zoom levels to step through when using zoom controls. This does not restrict programmatic changes to the zoom. */
  "attr:zoom-levels"?: SigveloZoomableFrame["zoomLevels"] | undefined;
  /** The zoom levels to step through when using zoom controls. This does not restrict programmatic changes to the zoom. */
  "prop:zoomLevels"?: SigveloZoomableFrame["zoomLevels"] | undefined;
  /** Removes the zoom controls. */
  "bool:without-controls"?: SigveloZoomableFrame["withoutControls"] | undefined;
  /** Removes the zoom controls. */
  "prop:withoutControls"?: SigveloZoomableFrame["withoutControls"] | undefined;
  /** Disables interaction when present. */
  "bool:without-interaction"?:
    | SigveloZoomableFrame["withoutInteraction"]
    | undefined;
  /** Disables interaction when present. */
  "prop:withoutInteraction"?:
    | SigveloZoomableFrame["withoutInteraction"]
    | undefined;
  /**  */
  "prop:iframe"?: SigveloZoomableFrame["iframe"] | undefined;
  /** Emitted when the internal iframe when it finishes loading. */
  "on:load"?: ((e: SigveloZoomableFrameElementEvent) => void) | undefined;
  /** Emitted from the internal iframe when it fails to load. */
  "on:error"?: ((e: SigveloZoomableFrameElementEvent) => void) | undefined;

  /** Set the innerHTML of the element */
  innerHTML?: string | undefined;
  /** Set the textContent of the element */
  textContent?: string | number | undefined;
};

export type CustomElements = {
  /**
   * <sigvelo-icon>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `library`: The name of the icon library to use.
   * - `family`: The icon family to use for this icon, e.g. `filled` or `outline`.
   * - `name`: The name of the icon to render.
   * - `label`: A label to use for assistive devices. If omitted, the icon will be considered presentational.
   * - `flip-x`/`flipX`: Flips the icon horizontally.
   * - `flip-y`/`flipY`: Flips the icon vertically.
   * - `rotate`: Rotates the icon the specified number of degrees.
   * - `svg`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-loaded`: The icon has reloaded and rendered. This event does not bubble.
   * - `sigvelo-load-error`: The icon failed to load. This event does not bubble.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `load() => void`: Loads or reloads and draws the icon.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `svg`: The internal SVG element.
   */
  "sigvelo-icon": Partial<
    SigveloIconProps & BaseProps<SigveloIcon> & BaseEvents
  >;

  /**
   * <sigvelo-accordion-item>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `expanded`: undefined
   * - `label`: The accordion item's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `variant`: The accordion item's variant. This will be set automatically by the accordion controller.
   * - `icon-placement`/`iconPlacement`: The position of the expand/collapse icon. This will be set automatically by the accordion controller.
   * - `disabled`: Disables the accordion item.
   * - `body`: undefined (property only)
   * - `content`: undefined (property only)
   * - `header`: undefined (property only)
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The content to show when expanded.
   * - `icon`: The expand/collapse icon.
   * - `label`: The accordion item's label. For plain-text labels, you can use the `label` attribute instead.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `focus() => void`: Sets focus to the accordion item.
   * - `blur() => void`: Removes focus from the accordion item.
   * - `animateExpand() => void`: Animate the expansion of the body - called by the accordion controller
   * - `animateCollapse() => void`: Animate the collapse of the body - called by the accordion controller
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `header`: The accordion item's header that contains the label and icon.
   * - `label`: The label container.
   * - `icon`: The icon container.
   * - `body`: The accordion item's body that contains the content.
   * - `content`: The content wrapper inside the body.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applies when the accordion item is disabled.
   * - `expanded`: Applies when the accordion item is expanded.
   */
  "sigvelo-accordion-item": Partial<
    SigveloAccordionItemProps & BaseProps<SigveloAccordionItem> & BaseEvents
  >;

  /**
   * <sigvelo-accordion>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `multiple`: Allows more than one accordion item to be expanded at the same time.
   * - `variant`: Determines the accordion's variant.
   * - `icon-placement`/`iconPlacement`: Determines which side of the accordion item the expand/collapse icon shows.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-before-expand`: Emitted when an accordion item is instructed to expand but before it is shown. Calling `event.preventDefault()` will prevent the item from expanding. `event.detail.item` will contain the expanding item.
   * - `sigvelo-expand`: Emitted after an accordion item has been expanded. `event.detail.item` will contain the expanded item.
   * - `sigvelo-before-collapse`: Emitted when an accordion item is instructed to collapse but before it is hidden. Calling `event.preventDefault()` will prevent the item from collapsing. `event.detail.item` will contain the collapsing item.
   * - `sigvelo-collapse`: Emitted after an accordion item has been collapsed. `event.detail.item` will contain the collapsed item.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: One or more `<sigvelo-accordion-item>` elements to place in the accordion.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--duration`: The expand and collapse duration. (default: `200ms`)
   * - `--easing`: The expand and collapse easing. (default: `ease`)
   * - `--sigvelo-accordion-border-color`: The accordion's border color. (default: `var(--sigvelo-color-neutral-border-subtle)`)
   * - `--border-width`: The accordion's border width. (default: `var(--sigvelo-border-width)`)
   * - `--border-style`: The accordion's border style. (default: `var(--sigvelo-border-style)`)
   * - `--border-radius`: The border radius to apply to rounded edges. (default: `var(--sigvelo-radius-md)`)
   */
  "sigvelo-accordion": Partial<
    SigveloAccordionProps & BaseProps<SigveloAccordion> & BaseEvents
  >;

  /**
   * <sigvelo-action-bar>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `align`: Alignment of the slotted content.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Status, buttons, or other compact action controls.
   */
  "sigvelo-action-bar": Partial<
    SigveloActionBarProps & BaseProps<SigveloActionBar> & BaseEvents
  >;

  /**
   * <sigvelo-dialog>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `open`: Opens or closes the dialog.
   * - `label`: An accessible name used when no visible heading is provided in the `header` slot.
   * - `description`: A concise description of the dialog. For rich content, use the `description` slot.
   * - `placement`: By default, the dialog will appear in the center of the screen. Changing the placement will cause the dialog to
   * slide in from the side of the screen like a drawer.
   * - `light-dismiss`/`lightDismiss`: Allows the dialog to be closed when clicking outside of it.
   * - `reset-scroll`/`resetScroll`: For dialogs that scroll, this will reset the scroll position when the dialog closes.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-before-open`: Emitted when the dialog is instructed to open but before it is shown. Calling `event.preventDefault()` will prevent the dialog from opening.
   * - `sigvelo-open`: Emitted after the dialog has been opened and the show animation has completed.
   * - `sigvelo-before-close`: Emitted when the dialog is dismissed. Calling `event.preventDefault()` will prevent the dialog from closing and show a brief animation.<br><br>You can check `event.detail.source` to see which element triggered the dialog to close, such as a button. If the source is the dialog itself, the user has pressed [[Escape]] or the dialog has been closed programmatically.
   * - `sigvelo-close`: Emitted after the dialog has been closed and the hide animation has completed.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Content to place in the dialog's body. Note that, due to [this Chrome bug](https://issues.chromium.org/issues/40800208), you should wrap text nodes in an element to allow text selection in that browser.
   * - `header`: Content to place in the dialog's header.
   * - `description`: A concise description of the dialog's purpose, associated with the dialog for assistive technology.
   * - `actions`: Slot in one or more text buttons to customize the actions that appear in the dialog's header. Only available when the header is enabled.
   * - `footer`: Content to place in the dialog's footer.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `scrollBodyTo(options: ScrollToOptions) => void`: Scrolls the dialog's body to the specified position.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--height`: The default height of the dialog. Note that dialogs shrink to fit as necessary. (default: `fit-content`)
   * - `--show-duration`: The duration of the show/hide animation. (default: `200ms`)
   * - `--spacing`: The spacing to use throughout the dialog. (default: `1.5rem`)
   * - `--width`: The default width of the dialog. Note that dialogs shrink to fit as necessary. (default: `30rem`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `dialog`: The internal `<dialog>` element.
   * - `body`: The container that wraps the dialog's body.
   * - `header`: The container that wraps the dialog's header. A flex container, by default.
   * - `footer`: The container that wraps the dialog's footer. A flex container, by default.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `open`: Applied when the dialog is open.
   */
  "sigvelo-dialog": Partial<
    SigveloDialogProps & BaseProps<SigveloDialog> & BaseEvents
  >;

  /**
   * <sigvelo-alert-dialog>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `open`: Opens or closes the alert dialog.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-cancel`: Emitted when the cancel action is triggered.
   * - `sigvelo-confirm`: Emitted when the confirm action is triggered.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The alert description/body content.
   * - `header`: Content for the dialog header (typically a title).
   * - `cancel`: The cancel action button.
   * - `confirm`: The confirm action button.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `open`: Applied when the alert dialog is open.
   */
  "sigvelo-alert-dialog": Partial<
    SigveloAlertDialogProps & BaseProps<SigveloAlertDialog> & BaseEvents
  >;

  /**
   * <sigvelo-avatar>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: An accessible label for the avatar. This won't be visible, but it will be read to assistive devices so you should
   * always include one.
   * - `characters`: A string of characters to display in the avatar when an image isn't available or fails to load. Up to five
   * characters are supported.
   * - `image`: The URL of an image to display in the avatar. Non-square images will be clipped to fit.
   * - `hasImageLoaded`: undefined (property only)
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `icon`: A custom icon to use instead of the default. Will not be shown when an image or initials are present. For best results, use a `<sigvelo-icon>` or an `<svg>` element.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--size`: The size of the avatar to draw. (default: `3rem`)
   */
  "sigvelo-avatar": Partial<
    SigveloAvatarProps & BaseProps<SigveloAvatar> & BaseEvents
  >;

  /**
   * <sigvelo-badge>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `color`: The type of badge to draw.
   * - `variant`: Determines the badges's variant.
   * - `attention`: Draws attention to the badge using an animation.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The badge's content.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--attention-duration`: The speed at which the attention animation will run. (default: `1.5s`)
   * - `--attention-easing`: The easing to use for the attention animation. (default: `ease`)
   */
  "sigvelo-badge": Partial<
    SigveloBadgeProps & BaseProps<SigveloBadge> & BaseEvents
  >;

  /**
   * <sigvelo-breadcrumb>
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot containing one or more breadcrumb items.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--item-spacing`: The amount of spacing to use between breadcrumb items. (default: `0.5em`)
   */
  "sigvelo-breadcrumb": Partial<
    SigveloBreadcrumbProps & BaseProps<SigveloBreadcrumb> & BaseEvents
  >;

  /**
   * <sigvelo-breadcrumb-item>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `current`: Indicates that this item is the current page or view.
   * - `href`: The URL the breadcrumb item should point to. If omitted, the breadcrumb item will be drawn as a `<span>` instead of
   * a link, enabling alternate content such as dropdowns.
   * - `target`: Opens the link in the specified target.
   * - `rel`: Sets the link's `rel` attribute. Note that the default value is `noreferrer noopener`, meaning you might need to
   * set it to an empty string if you're also using `target`.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot.
   * - `start`: An icon or similar element to place before the breadcrumb item. Works great with `<sigvelo-icon>`.
   * - `end`: An icon or similar element to place after the breadcrumb item. Works great with `<sigvelo-icon>`.
   * - `separator`: A custom separator to show instead of the default. Works great with `<sigvelo-icon>`.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The breadcrumb's label, an `<a>` element if `href` is set or a `<span>` element otherwise.
   * - `separator`: The container that wraps the breadcrumb's separator, a `span` element.
   */
  "sigvelo-breadcrumb-item": Partial<
    SigveloBreadcrumbItemProps & BaseProps<SigveloBreadcrumbItem> & BaseEvents
  >;

  /**
   * <sigvelo-spinner>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: A custom label for screen readers.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: A custom spinner to show in lieu of the default one. Works best with `<img>` and `<svg>` elements. Custom spinners will not be animated, allowing you to use animated GIF, APNG, and SVG animations without conflict.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--indicator-color`: The color of the spinner's indicator. (default: `var(--sigvelo-color-primary-bg)`)
   * - `--track-color`: The color of the spinner's track. (default: `color-mix(in oklab, var(--sigvelo-color-neutral-bg), transparent 75%)`)
   * - `--speed`: The speed for one complete rotation. (default: `0.75s`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `track`: the spinner's track, a `<circle>` SVG element.
   * - `indicator`: the spinner's indicator, a `<circle>` SVG element.
   */
  "sigvelo-spinner": Partial<
    SigveloSpinnerProps & BaseProps<SigveloSpinner> & BaseEvents
  >;

  /**
   * <sigvelo-button>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `variant`: Determines the button's variant.
   * - `color`: The semantic color intent of the button.
   * - `disabled`: Disables the button.
   * - `loading`: Draws the button in a loading state.
   * - `toggle`: Turns the button into a two-state toggle button. Clicking once will turn it on. Clicking again will turn it off.
   * Cannot be used with links buttons or submit buttons.
   * - `size`: The button's size.
   * - `icon-label`/`iconLabel`: To create an icon button, slot an icon into the button's default slot and set this attribute to an appropriate
   * label. The label won't be visible, but it will be available to assistive devices.
   * - `pill`: Draws the button in a pill shape.
   * - `type`: Determines the button's type.
   * - `name`: The name to submit when the button is used to submit the form.
   * - `value`: The value to submit when the button is used to submit the form.
   * - `with-caret`/`withCaret`: When true, the button will be rendered with a caret to indicate a dropdown menu.
   * - `href`: Set this to render the button as an `<a>` tag instead of a `<button>`. The button will act as a link. When this is
   * set, form attributes and features will not work.
   * - `target`: Opens the link in the specified target. Only works with link buttons.
   * - `rel`: Sets the link's `rel` attribute. Only works with link buttons. When linking to an external domain, you should
   * probably set this to `noreferrer noopener`.
   * - `download`: Sets the link's `download` attribute, causing the linked file to be downloaded. Only works with link buttons.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   * - `formaction`/`formAction`: Overrides the containing form's `action` attribute.
   * - `formenctype`/`formEnctype`: Overrides the containing form's `enctype` attribute.
   * - `formmethod`/`formMethod`: Overrides the containing form's `method` attribute.
   * - `formnovalidate`/`formNoValidate`: Overrides the containing form's `novalidate` attribute.
   * - `formtarget`/`formTarget`: Overrides the containing form's `target` attribute.
   *
   * `string & {}` keeps the four browsing-context keywords in autocomplete
   * while still accepting an arbitrary frame name; a bare `| string` would
   * absorb the literals and offer no suggestions at all.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the button loses focus. This event does not bubble.
   * - `sigvelo-long-press`: Emitted when the button is pressed and held by tapping or with the mouse. You can look at `event.detail.originalEvent.type` to see the type of event that initiated the long press.
   * - `sigvelo-focus`: Emitted when the button receives focus. This event does not bubble.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The button's label.
   * - `start`: An icon or similar element to place before the label. Works great with `<sigvelo-icon>`.
   * - `end`: An icon or similar element to place after the label. Works great with `<sigvelo-icon>`.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `formDisabledCallback() => void`: undefined
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `button`: The internal `<button>` element. Other than `width`, this is where most custom styles should be applied.
   * - `caret`: The caret icon, a `<sigvelo-icon>` element. Only present with the `with-caret` attribute.
   * - `caret__svg`: The caret icon's `<svg>` part.
   * - `spinner`: The loading indicator, a `<sigvelo-spinner>` element. Only present with the `loading` attribute.
   * - `toggle-indicator`: When the button is a toggle button, this is the indicator that shows the current state.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the button is disabled.
   * - `focused`: Applied when the button has focus.
   * - `loading`: Applied when a toggle button is loading.
   * - `toggled`: Applied when a toggle button is activated.
   */
  "sigvelo-button": Partial<
    SigveloButtonProps & BaseProps<SigveloButton> & BaseEvents
  >;

  /**
   * <sigvelo-button-group>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: An accessible label for the tab list. This won't be visible, but it will be read to assistive devices so it's
   * usually a good idea to include one.
   * - `orientation`: The button group's orientation.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: One or more `<sigvelo-button>` elements to place in the button group.
   */
  "sigvelo-button-group": Partial<
    SigveloButtonGroupProps & BaseProps<SigveloButtonGroup> & BaseEvents
  >;

  /**
   * <sigvelo-callout>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `color`: The type of callout to render.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Content to show in the callout.
   * - `icon`: An optional icon to show in the callout. Works well with `<sigvelo-icon>` and `<svg>` elements.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `icon`: The container the wraps the icon.
   * - `body`: The container that wraps the callout's content.
   */
  "sigvelo-callout": Partial<
    SigveloCalloutProps & BaseProps<SigveloCallout> & BaseEvents
  >;

  /**
   * <sigvelo-card>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `variant`: Determines the card's variant.
   * - `orientation`: The card's orientation.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Content to place in the dialog's body.
   * - `header`: Content to place in the dialog's header.
   * - `actions`: Slot in one or more text buttons to add actions to the card's header (vertical) or footer (horizontal). Only available when the respective header/footer is enabled.
   * - `footer`: Content to place in the dialog's footer.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--spacing`: The spacing to use throughout the card. (default: `1.5rem`)
   * - `--border-width`: The width of the card's border, including interior borders. (default: `undefined`)
   * - `--border-style`: The style of the card's border. (default: `undefined`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `body`: The container that wraps the card's body.
   * - `header`: The container that wraps the card's header. A flex container, by default.
   * - `footer`: The container that wraps the card's footer. A flex container, by default.
   * - `media`: The container that wraps the card's media.
   */
  "sigvelo-card": Partial<
    SigveloCardProps & BaseProps<SigveloCard> & BaseEvents
  >;

  /**
   * <sigvelo-carousel-item>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `name`: An optional name for the carousel item so you can reference it with the `active-name` attribute.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The content to show inside the carousel item.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `content`: A flex wrapper around the carousel item's content.
   */
  "sigvelo-carousel-item": Partial<
    SigveloCarouselItemProps & BaseProps<SigveloCarouselItem> & BaseEvents
  >;

  /**
   * <sigvelo-carousel>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: A custom label for the carousel. This won't be visible, but it will be read to assistive devices.
   * - `active-index`/`activeIndex`: The current active item's index.
   * - `active-name`/`activeName`: The current active item's name.
   * - `loop`: Enables looping navigation. When true, prev/next buttons wrap around to the opposite end.
   * - `without-nav`/`withoutNav`: Hides navigation buttons.
   * - `without-pagination`/`withoutPagination`: Hides pagination dots.
   * - `items`: undefined (property only)
   * - `isScrolling`: undefined (property only)
   * - `itemCount`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-item-change`: Emitted when the active item changes and the slide has been fully scrolled into view.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot for carousel items.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `scrollToIndex(index: number, scrollBehavior: ScrollBehavior = "smooth") => void`: Navigate to the specified item.
   * - `scrollToNext(scrollBehavior: ScrollBehavior = "smooth") => void`: Navigate to the next item
   * - `scrollToPrevious(scrollBehavior: ScrollBehavior = "smooth") => void`: Navigate to the previous item
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--aspect-ratio`: The aspect ratio of the carousel. By default, carousels render 100% wide, so this helps retain proportions across various devices. Gets applied to the `items` part. (default: `16/9`)
   * - `--item-gap`: The gap between items in the carousel. (default: `2rem`)
   * - `--dot-size`: The size of each pagination dot. (default: `0.875em`)
   * - `--dot-gap`: The size of the gap between pagination dots. (default: `0.5em`)
   * - `--dot-color`: The color of inactive pagination dots. (default: `var(--sigvelo-color-neutral-bg-muted)`)
   * - `--dot-active-color`: The color of active pagination dots. (default: `var(--sigvelo-color-neutral-bg-strong)`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `items`: The scrollable container that holds the carousel items.
   * - `controls`: The container that surrounds nav buttons and pagination.
   * - `previous-button`: The previous button.
   * - `next-button`: The next button.
   * - `pagination`: The container for the pagination dots.
   * - `pagination-dot`: Each individual pagination dot.
   * - `pagination-dot-active`: The active pagination dot.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `scrolling`: Applied when the carousel is scrolling.
   */
  "sigvelo-carousel": Partial<
    SigveloCarouselProps & BaseProps<SigveloCarousel> & BaseEvents
  >;

  /**
   * <sigvelo-checkbox>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The checkbox's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The checkbox's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `name`: The name of the checkbox. This will be submitted with the form as a name/value pair.
   * - `value`: The checkbox's value.
   * - `checked`: The checkbox's checked state.
   * - `indeterminate`: Puts the checkbox in an indeterminate state.
   * - `disabled`: Disables the checkbox.
   * - `variant`: The type of checkbox to render.
   * - `size`: The checkbox's size.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   * - `required`: Makes the checkbox required. Form submission will not be allowed until the checkbox is checked.
   * - `isInvalid`: undefined (property only)
   * - `hadUserInteraction`: undefined (property only)
   * - `wasSubmitted`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the checkbox loses focus. This event does not bubble.
   * - `sigvelo-change`: Emitted when the user commits changes to the checkbox's value.
   * - `sigvelo-focus`: Emitted when the checkbox receives focus. This event does not bubble.
   * - `sigvelo-input`: Emitted when the checkbox receives input.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The checkbox's label. For plain-text labels, you can use the `label` attribute instead.
   * - `description`: The checkbox's description. For plain-text descriptions, you can use the `description` attribute instead.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `focus() => void`: Sets focus to the checkbox.
   * - `blur() => void`: Removes focus from the checkbox.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The `<label>` that wraps the entire control.
   * - `description`: The element that contains the checkbox's description.
   * - `visual-box`: The element that wraps the internal checkbox.
   * - `check-icon`: The check icon, a `<sigvelo-icon>` element.
   * - `check-icon__svg`: The check icon's `svg` part.
   * - `indeterminate-icon`: The indeterminate icon, a `<sigvelo-icon>` element.
   * - `indeterminate-icon__svg`: The indeterminate icon's `<svg>` part.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `checked`: Applied when the checkbox is checked.
   * - `disabled`: Applied when the checkbox is disabled.
   * - `focused`: Applied when the checkbox has focus.
   * - `user-valid`: Applied when the checkbox is valid and the user has sufficiently interacted with it.
   * - `user-invalid`: Applied when the checkbox is invalid and the user has sufficiently interacted with it.
   */
  "sigvelo-checkbox": Partial<
    SigveloCheckboxProps & BaseProps<SigveloCheckbox> & BaseEvents
  >;

  /**
   * <sigvelo-checkbox-group>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The checkbox's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The checkbox's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `orientation`: The orientation of grouped items.
   * - `required`: Indicates at least one option in the checkbox group is required. This just adds a visual indicator. To perform
   * validation, use the checkbox's `required` attribute and/or `setCustomValidity()` method.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The checkboxes to place in the group.
   * - `label`: The checkbox's label. For plain-text labels, you can use the `label` attribute instead.
   * - `description`: The checkbox's description. For plain-text descriptions, you can use the `description` attribute instead.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--gap`: The gap between checkboxes. (default: `1em`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The element that contains the checkbox group's label.
   * - `description`: The element that contains the checkbox group's description.
   * - `group`: The element that wraps the grouped checkboxes.
   */
  "sigvelo-checkbox-group": Partial<
    SigveloCheckboxGroupProps & BaseProps<SigveloCheckboxGroup> & BaseEvents
  >;

  /**
   * <sigvelo-copy>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `data`: The text content that will be copied to the clipboard.
   * - `disabled`: Disables the button.
   * - `feedback-placement`/`feedbackPlacement`: The placement of the feedback animation.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-copy`: Emitted when the content has been copied. This event does not bubble. You can inspect `event.detail.data` to see the content that was copied.
   * - `sigvelo-copy-error`: Emitted when the browser refuses to allow the content to be copied. This event does not bubble. You can inspect `event.detail.error` to see the error that occurred.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: A custom button to use instead of the default.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `copy-button`: The default copy button, a `<sigvelo-button>` element.
   * - `copy-button__button`: The default copy button's `button` part.
   * - `copy-icon`: The default copy icon, a `<sigvelo-icon>` element.
   * - `copy-icon__svg`: The copy icon's `svg` part.
   * - `feedback`: The feedback that shows when copying.
   */
  "sigvelo-copy": Partial<
    SigveloCopyProps & BaseProps<SigveloCopy> & BaseEvents
  >;

  /**
   * <sigvelo-tooltip>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `for`: The ID of the tooltip's anchor element. This must be an interactive/focusable element such as a button and it must
   * be in the same document as the tooltip.
   * - `open`: Shows or hides the tooltip.
   * - `placement`: The placement of the tooltip in reference to the anchor. The menu will shift to a more optimal location if the
   * preferred placement doesn't have enough room.
   * - `distance`: The distance of the tooltip from its anchor.
   * - `offset`: The offset of the tooltip along its trigger.
   * - `open-delay`/`openDelay`: The number of milliseconds to wait before opening the tooltip when hovering in.
   * - `close-delay`/`closeDelay`: The number of milliseconds to wait before closing the tooltip when hovering out.
   * - `activation`: By default, the tooltip automatically shows when the user focuses or hovers over the anchor. If you want to control
   * the tooltip programmatically, set this to `manual`.
   * - `without-arrow`/`withoutArrow`: Renders the tooltip without an arrow.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-before-open`: Emitted when the tooltip is instructed to open but before it is shown.
   * - `sigvelo-open`: Emitted when the tooltip has opened and the animation has completed.
   * - `sigvelo-before-close`: Emitted when the tooltip is dismissed but before it is hidden.
   * - `sigvelo-close`: Emitted when the tooltip has closed. and the animation has completed.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The tooltip's content. Do not include interactive elements such as button, links, etc. as they won't be accessible to users inside the tooltip.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--arrow-size`: The size of the arrow. To hide the arrow, use the `without-arrow` attribute. (default: `0.3125rem`)
   * - `--max-width`: The maximum width the tooltip can be before wrapping. (default: `20rem`)
   * - `--show-duration`: The duration of the show/hide animation. (default: `100ms`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `tooltip`: The element that powers the tooltip.
   * - `content`: The element that wraps the tooltip's content.
   * - `arrow`: The tooltip's arrow. To change the arrow's size, use `--arrow-size` instead.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `open`: Applied when the tooltip is open.
   */
  "sigvelo-tooltip": Partial<
    SigveloTooltipProps & BaseProps<SigveloTooltip> & BaseEvents
  >;

  /**
   * <sigvelo-slider>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The slider's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The slider's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `name`: The name of the slider. This will be submitted with the form as a name/value pair.
   * - `value`: The slider's value. Pass a two-number array to render a range slider.
   * - `disabled`: Disables the slider.
   * - `readonly`: Makes the slider a read-only field.
   * - `orientation`: The orientation of the slider.
   * - `size`: The slider's size.
   * - `indicator-offset`/`indicatorOffset`: The starting value from which to draw the slider's fill, which is based on its current value.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   * - `min`: The minimum value allowed.
   * - `max`: The maximum value allowed.
   * - `step`: The granularity the value must adhere to when incrementing and decrementing.
   * - `autofocus`: Tells the browser to focus the slider when the page loads or a dialog is shown.
   * - `tooltip-distance`/`tooltipDistance`: The distance of the tooltip from the slider's thumb.
   * - `tooltip-placement`/`tooltipPlacement`: The placement of the tooltip in reference to the slider's thumb.
   * - `with-markers`/`withMarkers`: Draws markers at each step along the slider.
   * - `with-tooltip`/`withTooltip`: Draws a tooltip above the thumb when the control has focus or is dragged.
   * - `slider`: undefined (property only)
   * - `thumb`: undefined (property only)
   * - `thumbMin`: undefined (property only)
   * - `thumbMax`: undefined (property only)
   * - `track`: undefined (property only)
   * - `tooltip`: undefined (property only)
   * - `tooltipMin`: undefined (property only)
   * - `tooltipMax`: undefined (property only)
   * - `isInvalid`: undefined (property only)
   * - `hadUserInteraction`: undefined (property only)
   * - `wasSubmitted`: undefined (property only)
   * - `isRange`: Get if this is a range slider (property only) (readonly)
   * - `valueFormatter`: A custom formatting function to apply to the value. This will be shown in the tooltip and announced by screen
   * readers. Must be set with JavaScript. Property only. (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the slider loses focus. This event does not bubble.
   * - `sigvelo-change`: Emitted when the user commits changes to the slider's value.
   * - `sigvelo-focus`: Emitted when the slider receives focus. This event does not bubble.
   * - `sigvelo-input`: Emitted when the slider receives input.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `label`: The slider's label. For plain-text labels, you can use the `label` attribute instead.
   * - `description`: The slider's description. For plain-text descriptions, you can use the `description` attribute instead.
   * - `reference`: One or more reference labels to show visually below the slider.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `formDisabledCallback() => void`: undefined
   * - `focus() => void`: Sets focus to the slider.
   * - `blur() => void`: Removes focus from the slider.
   * - `stepDown() => void`: Decreases the slider's value by `step`. This is a programmatic change, so `input` and `change` events will not be
   * emitted when this is called.
   * - `stepUp() => void`: Increases the slider's value by `step`. This is a programmatic change, so `input` and `change` events will not be
   * emitted when this is called.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--track-size`: The height or width of the slider's track. (default: `0.75em`)
   * - `--marker-width`: The width of each individual marker. (default: `0.1875em`)
   * - `--marker-height`: The height of each individual marker. (default: `0.1875em`)
   * - `--thumb-width`: The width of the thumb. (default: `1.25em`)
   * - `--thumb-height`: The height of the thumb. (default: `1.25em`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The element that contains the sliders's label.
   * - `description`: The element that contains the slider's description.
   * - `slider`: The focusable element with `role="slider"`. Contains the track and reference slot.
   * - `track`: The slider's track.
   * - `indicator`: The colored indicator that shows from the start of the slider to the current value.
   * - `markers`: The container that holds all the markers when `with-markers` is used.
   * - `marker`: The individual markers that are shown when `with-markers` is used.
   * - `references`: The container that holds references that get slotted in.
   * - `thumb`: The slider's thumb.
   * - `thumb-min`: The min value thumb in a range slider.
   * - `thumb-max`: The max value thumb in a range slider.
   * - `tooltip`: The tooltip, a `<sigvelo-tooltip>` element.
   * - `tooltip__tooltip`: The tooltip's `tooltip` part.
   * - `tooltip__content`: The tooltip's `content` part.
   * - `tooltip__arrow`: The tooltip's `arrow` part.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the slider is disabled.
   * - `dragging`: Applied when the slider is being dragged.
   * - `focused`: Applied when the slider has focus.
   * - `user-valid`: Applied when the slider is valid and the user has sufficiently interacted with it.
   * - `user-invalid`: Applied when the slider is invalid and the user has sufficiently interacted with it.
   */
  "sigvelo-slider": Partial<
    SigveloSliderProps & BaseProps<SigveloSlider> & BaseEvents
  >;

  /**
   * <sigvelo-text-field>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The text field's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The text field's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `name`: The name of the text field. This will be submitted with the form as a name/value pair.
   * - `value`: The text field's value.
   * - `placeholder`: A placeholder to show in the text field when it's blank.
   * - `disabled`: Disables the text field.
   * - `readonly`: Makes the text field a read-only field.
   * - `with-clear`/`withClear`: Adds a clear button to the text field when it's not blank.
   * - `variant`: The type of text field to render.
   * - `size`: The text field's size.
   * - `pill`: Draws the text field in a pill shape.
   * - `type`: The type of data the text field will accept.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   * - `required`: Makes the text field required. Form submission will not be allowed when this is set and the text field is blank.
   * - `pattern`: A regular expression the value should match to be considered valid.
   * - `minlength`/`minLength`: The minimum string length that will be considered valid.
   * - `maxlength`/`maxLength`: The maximum string length that will be considered valid.
   * - `min`: The minimum value for date/time types.
   * - `max`: The maximum value for date/time types.
   * - `step`: The granularity the value must adhere to when incrementing and decrementing.
   * - `autocapitalize`: Turns autocapitalize on or off in supported browsers.
   * - `autocomplete`: Tells the browser how to autocomplete the text field. See [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
   * for available values.
   * - `autocorrect`: Turns autocorrect on or off in supported browsers. Set to true or 'on' to enable, false or 'off' to disable.
   * - `autofocus`: Tells the browser to focus the text field when the page loads or a dialog is shown.
   * - `enterkeyhint`: Sets the enter key label on virtual keyboards.
   * - `inputmode`: Provides the browser with a hint about the type of data that might be entered by the user, allowing the appropriate
   * virtual keyboard to be displayed on supported devices.
   * - `spellcheck`: Turns spell checking on or off in supported browsers.
   * - `isInvalid`: undefined (property only)
   * - `hadUserInteraction`: undefined (property only)
   * - `wasSubmitted`: undefined (property only)
   * - `isPasswordVisible`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the text field loses focus. This event does not bubble.
   * - `sigvelo-change`: Emitted when the user commits changes to the text field's value.
   * - `sigvelo-focus`: Emitted when the text field receives focus. This event does not bubble.
   * - `sigvelo-input`: Emitted when the text field receives input.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `label`: The text field's label. For plain-text labels, you can use the `label` attribute instead.
   * - `description`: The text field's description. For plain-text descriptions, you can use the `description` attribute instead.
   * - `start`: An icon or similar element to place before the label. Works great with `<sigvelo-icon>`.
   * - `end`: An icon or similar element to place after the label. Works great with `<sigvelo-icon>`.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `focus() => void`: Sets focus to the text field.
   * - `blur() => void`: Removes focus from the text field.
   * - `select() => void`: Selects all text in the text field.
   * - `setSelectionRange(start: number, end: number, direction: "forward" | "backward" | "none" = "none") => void`: Sets the start and end positions of the current text selection in the text field.
   * - `setRangeText(replacement: string, start?: number, end?: number, selectMode?: "select" | "start" | "end" | "preserve") => void`: Replaces a range of text in the text field with a new string.
   * - `showPicker() => void`: For types that support a picker, such as color and date selectors, this will cause the picker to show.
   * - `stepDown() => void`: When a supported `type` is used, this method will decrease the text field's value by `step`. This is a programmatic
   * change, so `input` and `change` events will not be emitted when this is called.
   * - `stepUp() => void`: When a supported `type` is used, this method will increase the text field's value by `step`. This is a programmatic
   * change, so `input` and `change` events will not be emitted when this is called.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The element that contains the text field's label.
   * - `description`: The element that contains the text field's description.
   * - `visual-box`: The element that wraps the internal text box.
   * - `text-box`: The internal text box, an `<input>` element.
   * - `clear-button`: The clear button, a `<button>` element.
   * - `password-toggle-button`: The password toggle button, a `<button>` element.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the text field is disabled.
   * - `blank`: Applied when the text field has a blank value.
   * - `focused`: Applied when the text field has focus.
   * - `user-valid`: Applied when the text field is valid and the user has sufficiently interacted with it.
   * - `user-invalid`: Applied when the text field is invalid and the user has sufficiently interacted with it.
   */
  "sigvelo-text-field": Partial<
    SigveloTextFieldProps & BaseProps<SigveloTextField> & BaseEvents
  >;

  /**
   * <sigvelo-color-picker>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The color picker's label. This won't be visible, but it will be read to assistive devices so you should always
   * include one.
   * - `value`: The color picker's value.
   * - `format`: The format to use for the color's value.
   * - `disabled`: Disables the color picker.
   * - `size`: The color picker's size.
   * - `swatches`: One or more semicolon-delimited colors (any valid CSS color format or name) to show as preset swatches below the
   * color picker.
   * - `with-alpha`/`withAlpha`: Enables the alpha slider.
   * - `with-eye-dropper`/`withEyeDropper`: Enables the eye dropper button. Only available in
   * [supportive browsers](https://caniuse.com/?search=eyedropper%20API).
   * - `with-input`/`withInput`: Enables the color value text field.
   * - `h`: undefined (property only)
   * - `s`: undefined (property only)
   * - `v`: undefined (property only)
   * - `a`: undefined (property only)
   * - `colorSliderThumbX`: undefined (property only)
   * - `colorSliderThumbY`: undefined (property only)
   * - `hasFocus`: undefined (property only)
   * - `isChangingV`: undefined (property only)
   * - `isChangingS`: undefined (property only)
   * - `inputIsFocused`: undefined (property only)
   * - `displayValue`: undefined (property only)
   * - `hadUserInteraction`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-change`: Emitted when the user commits changes to the color picker's value.
   * - `sigvelo-input`: Emitted when the color picker receives input. This can fire very frequently during dragging, so avoid doing expensive operations in the handler. If you don't live feedback, use the `sigvelo-change` event instead.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `focus() => void`: Sets focus to the color picker.
   * - `blur() => void`: Removes focus from the color picker.
   * - `getValueAs(format: "hex" | "hex8" | "hsl" | "rgb" = "rgb") => void`: Gets the current value as a hex string, a hex8 string, an RGB object, or an HSL object. RBG objects have `r`, `g`,
   * and `b` properties ranging from 0–255 and an `a` property (representing opacity) that ranges from 0-1. HSL objects
   * have an `h` property ranging from `0-359` and `s`, `l`, and `a` properties ranging from 0–1.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `picker`: The element the wraps the color picker.
   * - `color-slider`: The 2d color slider.
   * - `color-slider-thumb`: The color slider's thumb.
   * - `controls`: The container that wraps the sliders and preview.
   * - `sliders`: The container that wraps the hue and alpha slider.
   * - `hue-slider`: The slider that controls the color's hue.
   * - `hue-slider__label`: The hue slider's `label` part.
   * - `hue-slider__description`: The hue slider's `description` part.
   * - `hue-slider__slider`: The hue slider's `slider` part.
   * - `hue-slider__track`: The hue slider's `track` part.
   * - `hue-slider__indicator`: The hue slider's `indicator` part.
   * - `hue-slider__thumb`: The hue slider's `thumb` part.
   * - `alpha-slider`: The slider that controls the color's opacity.
   * - `alpha-slider__label`: The alpha slider's `label` part.
   * - `alpha-slider__description`: The alpha slider's `description` part.
   * - `alpha-slider__slider`: The alpha slider's `slider` part.
   * - `alpha-slider__track`: The alpha slider's `track` part.
   * - `alpha-slider__indicator`: The alpha slider's `indicator` part.
   * - `alpha-slider__thumb`: The alpha slider's `thumb` part.
   * - `eye-dropper-button`: The eye dropper button, a `<sigvelo-button>` element.
   * - `preview-button`: The button that shows a preview of the current color, a `<sigvelo-button>` element.
   * - `color-input`: The color input text field, a `<sigvelo-text-field>` element.
   * - `color-input__visual-box`: The element that wraps the internal text box.
   * - `color-input__text-box`: The internal text box, an `<input>` element.
   * - `swatches`: The element that contains swatches.
   * - `swatch`: Each individual swatch.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the color picker is disabled.
   * - `focused`: Applied when the color picker has focus.
   */
  "sigvelo-color-picker": Partial<
    SigveloColorPickerProps & BaseProps<SigveloColorPicker> & BaseEvents
  >;

  /**
   * <sigvelo-color-input>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The color input's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The color input's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `name`: The name of the color input. This will be submitted with the form as a name/value pair.
   * - `value`: The color input's value.
   * - `placeholder`: A placeholder to show in the color input when it's blank.
   * - `disabled`: Disables the color input.
   * - `readonly`: Makes the color input a read-only area.
   * - `with-clear`/`withClear`: Adds a clear button to the color input when it's not blank.
   * - `variant`: The type of color input to render.
   * - `size`: The color input's size.
   * - `pill`: Draws the text field in a pill shape.
   * - `format`: The format to use for the color's value.
   * - `swatches`: One or more semicolon-delimited colors (any valid CSS color format or name) to show as preset swatches below the
   * color picker.
   * - `with-alpha`/`withAlpha`: Enables the alpha slider.
   * - `with-eye-dropper`/`withEyeDropper`: Enables the eye dropper button. Only available in
   * [supportive browsers](https://caniuse.com/?search=eyedropper%20API).
   * - `placement`: The placement of the dropdown menu in reference to the trigger. The menu will shift to a more optimal location if
   * the preferred placement doesn't have enough room.
   * - `distance`: The distance of the dropdown menu from its trigger.
   * - `offset`: The offset of the dropdown menu along its trigger.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   * - `required`: Makes the color input required. Form submission will not be allowed when this is set and the color input is blank.
   * - `autocomplete`: Tells the browser how to autocomplete the color input. See [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
   * for available values.
   * - `autofocus`: Tells the browser to focus the color input when the page loads or a dialog is shown.
   * - `enterkeyhint`: Sets the enter key label on virtual keyboards.
   * - `inputmode`: Provides the browser with a hint about the type of data that might be entered by the user, allowing the appropriate
   * virtual keyboard to be displayed on supported devices.
   * - `isOpen`: undefined (property only)
   * - `isInvalid`: undefined (property only)
   * - `hadUserInteraction`: undefined (property only)
   * - `wasSubmitted`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the color input loses focus. This event does not bubble.
   * - `sigvelo-change`: Emitted when the user commits changes to the color input's value.
   * - `sigvelo-focus`: Emitted when the color input receives focus. This event does not bubble.
   * - `sigvelo-input`: Emitted when the color input receives input.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `label`: The color input's label. For plain-text labels, you can use the `label` attribute instead.
   * - `description`: The color input's description. For plain-text descriptions, you can use the `description` attribute instead.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `blur() => void`: Removes focus from the color input.
   * - `focus() => void`: Sets focus to the color input.
   * - `getValueAs(format: "hex" | "hex8" | "hsl" | "rgb" = "rgb") => void`: Gets the current value as a hex string, a hex8 string, an RGB object, or an HSL object. RBG objects have `r`, `g`,
   * and `b` properties ranging from 0–255 and an `a` property (representing opacity) that ranges from 0-1. HSL objects
   * have an `h` property ranging from `0-359` and `s`, `l`, and `a` properties ranging from 0–1.
   * - `select() => void`: Selects all text in the color input.
   * - `setSelectionRange(start: number, end: number, direction: "forward" | "backward" | "none" = "none") => void`: Sets the start and end positions of the current text selection in the color input.
   * - `setRangeText(replacement: string, start?: number, end?: number, selectMode?: "select" | "start" | "end" | "preserve") => void`: Replaces a range of text in the color input with a new string.
   * - `showPicker() => void`: Shows the color picker.
   * - `hidePicker() => void`: Hides the color picker.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--show-duration`: The duration of the show/hide animation. (default: `50ms`)
   * - `--preview-size`: The size of the color preview. (default: `1.6em`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The element that contains the color input's label.
   * - `description`: The element that contains the color input's description.
   * - `visual-box`: The element that wraps the internal text box.
   * - `text-box`: The internal text box, an `<input>` element.
   * - `clear-button`: The clear button, a `<button>` element.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the color input is disabled.
   * - `blank`: Applied when the color input has a blank value.
   * - `focused`: Applied when the color input has focus.
   * - `open`: Applied when the color picker is open.
   * - `user-valid`: Applied when the color input is valid and the user has sufficiently interacted with it.
   * - `user-invalid`: Applied when the color input is invalid and the user has sufficiently interacted with it.
   */
  "sigvelo-color-input": Partial<
    SigveloColorInputProps & BaseProps<SigveloColorInput> & BaseEvents
  >;

  /**
   * <sigvelo-combobox-item>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `value`: The value to submit when this item is selected. If not provided, the text content is used.
   * - `disabled`: Disables the item.
   * - `defaultSlot`: undefined (property only)
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The item's label.
   * - `icon`: An optional icon to display at the start of the item.
   * - `details`: Optional details to display at the end of the item.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `getLabelText() => string`: Gets the text content from the combobox item's label.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `icon`: The container that wraps the icon slot.
   * - `label`: The container that wraps the item's label.
   * - `details`: The container that wraps the details slot.
   * - `checkmark`: The checkmark icon shown when selected in multiple mode.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `selected`: Applied when the item is selected.
   * - `disabled`: Applied when the item is disabled.
   * - `active`: Applied when the item is active (keyboard navigation).
   */
  "sigvelo-combobox-item": Partial<
    SigveloComboboxItemProps & BaseProps<SigveloComboboxItem> & BaseEvents
  >;

  /**
   * <sigvelo-combobox>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The combobox's label.
   * - `description`: The combobox's description.
   * - `name`: The name of the combobox for form submission.
   * - `value`: The combobox's value(s).
   * - `placeholder`: Placeholder text for the input.
   * - `disabled`: Disables the combobox.
   * - `required`: Makes the combobox required.
   * - `multiple`: Enables multiple selection.
   * - `with-clear`/`withClear`: Adds a clear button when not blank.
   * - `variant`: The visual variant of the combobox.
   * - `size`: The size of the combobox.
   * - `pill`: Draws the combobox in a pill shape.
   * - `placement`: The dropdown's placement relative to the input.
   * - `distance`: The distance of the dropdown from the input.
   * - `offset`: The offset of the dropdown along the input.
   * - `form`: The form to associate with.
   * - `open`: undefined (property only)
   * - `inputValue`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the combobox loses focus.
   * - `sigvelo-change`: Emitted when the user commits changes to the combobox's value.
   * - `sigvelo-focus`: Emitted when the combobox receives focus.
   * - `sigvelo-input`: Emitted when the combobox receives input.
   * - `sigvelo-before-open`: Emitted when the dropdown is instructed to open but before it is shown.
   * - `sigvelo-open`: Emitted when the dropdown opens.
   * - `sigvelo-before-close`: Emitted when the dropdown is instructed to close but before it is hidden.
   * - `sigvelo-close`: Emitted when the dropdown closes.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: One or more `<sigvelo-combobox-item>` elements to show as options.
   * - `label`: The combobox's label. For plain-text labels, use the `label` attribute instead.
   * - `description`: The combobox's description. For plain-text descriptions, use the `description` attribute instead.
   * - `start`: An icon or similar element to place before the input. Works great with `<sigvelo-icon>`.
   * - `end`: An icon or similar element to place after the input. Works great with `<sigvelo-icon>`.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `formResetCallback() => void`: undefined
   * - `getTagContent(item: SigveloComboboxItem) => TemplateResult`: A custom function for rendering tag content. By default, this function returns the item's full `textContent`. You
   * can override it to customize the content that gets rendered in tags in `multiple` mode.
   * - `focus() => void`: Sets focus to the combobox.
   * - `blur() => void`: Removes focus from the combobox.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--text-box-min-width`: The minimum width of the input field when shown next to tags. Only available in `multiple` mode. (default: `12ch`)
   * - `--show-duration`: The duration of the show/hide animation for the dropdown. (default: `50ms`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The element that contains the combobox's label.
   * - `description`: The element that contains the combobox's description.
   * - `visual-box`: The element that wraps the internal text box.
   * - `input-area`: The wrapper surrounding tags and the internal text box.
   * - `tag`: Individual tag elements.
   * - `tag-remove`: The remove button for tags.
   * - `text-box`: The internal text box, an `<input>` element.
   * - `chevron`: The chevron icon, a `<sigvelo-icon>` element.
   * - `chevron__svg`: The chevron icon's `<svg>` part.
   * - `clear-button`: The clear button.
   * - `dropdown`: The dropdown container.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `open`: Applied when the dropdown is open.
   * - `disabled`: Applied when the combobox is disabled.
   * - `focused`: Applied when the combobox has focus.
   * - `blank`: Applied when the combobox has no value.
   * - `user-valid`: Applied when valid after user interaction.
   * - `user-invalid`: Applied when invalid after user interaction.
   */
  "sigvelo-combobox": Partial<
    SigveloComboboxProps & BaseProps<SigveloCombobox> & BaseEvents
  >;

  /**
   * <sigvelo-comparison>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `position`: The position of the divider as a decimal (0-1).
   * - `orientation`: The orientation of the comparison slider, either 'horizontal' or 'vertical'.
   * - `disabled`: Disables the comparison component, preventing it from being focused and adjusted.
   * - `isDragging`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-resize`: Dispatched when the comparison's handle is moved.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `start`: The content to show on the left/start side or top side, depending on orientation.
   * - `end`: The content to show on the right/end side or bottom side, depending on orientation.
   * - `handle-icon`: A custom icon to use for the divider's handle.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `start`: The container for the start content.
   * - `end`: The container for the end content.
   * - `divider`: The draggable divider between start and end.
   * - `handle`: The visual handle within the divider.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the comparison is disabled.
   * - `dragging`: Applied when the divider is being dragged.
   * - `focused`: Applied when the divider has focus.
   */
  "sigvelo-comparison": Partial<
    SigveloComparisonProps & BaseProps<SigveloComparison> & BaseEvents
  >;

  /**
   * <sigvelo-date>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `date`: The date to format. If an attribute is passed, the date should be an [ISO 8601 string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).
   * If set as a property, a `Date` object can be used instead. If unset, the current date will be assumed.
   * - `date-style`/`dateStyle`: A shortcut property for formatting the date. This can be used with `time-style`, but not with other formatting
   * properties such as `weekday`, `hour`, `month`, etc.
   * - `time-style`/`timeStyle`: A shortcut property for formatting the time. This can be used with `date-style`, but not with other formatting
   * properties such as `weekday`, `hour`, `month`, etc.
   * - `hour-format`/`hourFormat`: Whether to use 12-hour time (as opposed to 24-hour time). If `auto`, the default value is determined by the user's
   * locale.
   * - `hourCycle`: The hour cycle to use.
   * - `time-zone`/`timeZone`: The time zone to use. The default is the user's default time zone.
   * - `weekday`: The representation of the weekday.
   * - `era`: The representation of the era.
   * - `year`: The representation of the year.
   * - `month`: The representation of the month.
   * - `day`: The representation of the day.
   * - `day-period`/`dayPeriod`: The formatting style used for day periods like "in the morning", "am", "noon", "n" etc. This option only has an
   * effect if a 12-hour clock is used.
   * - `hour`: The representation of the hour.
   * - `minute`: The representation of the minute.
   * - `second`: The representation of the second.
   * - `fractional-second-digits`/`fractionalSecondDigits`: The number of digits used to represent fractions of a second (any additional digits are truncated).
   * - `time-zone-name`/`timeZoneName`: The localized representation of the time zone name.
   * - `format-matcher`/`formatMatcher`: The format matching algorithm to use.
   */
  "sigvelo-date": Partial<
    SigveloDateProps & BaseProps<SigveloDate> & BaseEvents
  >;

  /**
   * <sigvelo-data-table>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `key-field`/`keyField`: The row field used as its stable selection key.
   * - `selection`: Enables no selection, single selection, or multiple selection.
   * - `caption`: Optional visible table caption.
   * - `empty-text`/`emptyText`: Message displayed when there are no rows.
   * - `columns`: Column definitions, in display order. (property only)
   * - `rows`: Row objects displayed by the table. (property only)
   * - `selectedKeys`: The currently selected row keys. (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-row-select`: Emitted when a selectable row changes. The detail contains `rowKey`, `selected`, and the complete `selectedKeys` array.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `scroller`: The horizontally scrollable table container.
   * - `table`: The native `<table>` element.
   * - `caption`: The table caption.
   * - `header`: The table header.
   * - `header-cell`: A column heading.
   * - `body`: The table body.
   * - `row`: A body row.
   * - `cell`: A body cell.
   * - `selection-cell`: A cell containing a row selection control.
   * - `empty`: The empty-result cell.
   */
  "sigvelo-data-table": Partial<
    SigveloDataTableProps & BaseProps<SigveloDataTable> & BaseEvents
  >;

  /**
   * <sigvelo-divider>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `orientation`: Sets the divider's orientation.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `symbol`: Optional text or a symbol to show in the center of the divider.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--color`: The color of the divider. (default: `var(--sigvelo-color-neutral-border-muted)`)
   * - `--spacing`: The spacing around the divider. (default: `1rem`)
   * - `--thickness`: The thickness of the divider. (default: `var(--sigvelo-border-width)`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `symbol`: The container that wraps the slotted symbol or icon.
   */
  "sigvelo-divider": Partial<
    SigveloDividerProps & BaseProps<SigveloDivider> & BaseEvents
  >;

  /**
   * <sigvelo-dropdown-item>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `value`: An optional value for the menu item. This is useful for determining which item was selected when listening to the
   * dropdown's `sigvelo-select` event.
   * - `type`: Set to `checkbox` to make the item a checkbox.
   * - `color`: The type of menu item to render.
   * - `checked`: Set to true to check the dropdown item. Only valid when `type` is `checkbox`.
   * - `disabled`: Disables the dropdown item.
   * - `submenuOpen`: Whether the submenu is currently open.
   * - `href`: Tells the dropdown item to behave like a link. When selected, the browser will navigate to the target URL.
   * - `target`: Opens the link in the specified target. Only works when `href` is provided.
   * - `rel`: Sets the link's `rel` attribute. Only works when `href` is provided. When linking to an external domain, you should
   * probably set this to `noreferrer noopener`.
   * - `download`: Sets the link's `download` attribute, causing the linked file to be downloaded. Only works when `href` is provided.
   * - `hiddenLink`: undefined (property only)
   * - `submenuElement`: undefined (property only)
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The item's label or description.
   * - `icon`: An optional icon to show at the start of the item.
   * - `details`: Optional details, such as a keyboard shortcut, to display at the end of the item.
   * - `submenu`: Optional submenu items to display in a nested dropdown. For best results, use `<sigvelo-submenu-item>` and `<sigvelo-divider>` elements.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `openSubmenu() => void`: Opens the submenu.
   * - `closeSubmenu() => void`: Closes the submenu.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `checkmark`: The checkmark icon that's shown when checked, a `<sigvelo-icon>` element.
   * - `checkmark__svg`: The checkmark icon's `svg` part.
   * - `icon`: The container that wraps the icon.
   * - `label`: The container that wraps the label.
   * - `details`: The container that wraps the menu item's details.
   * - `submenu`: The container that wraps the submenu items.
   * - `submenu-icon`: The icon indicating that a submenu is available.
   * - `submenu-icon__svg`: The submenu icon's `svg` part.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `active`: Applied when the dropdown item is active.
   * - `disabled`: Applied when the dropdown item is disabled.
   * - `checked`: Applied when the dropdown item is checked.
   * - `submenu-open`: Applied when the dropdown item's submenu is open.
   * - `has-submenu`: Applied when the dropdown item has a submenu.
   */
  "sigvelo-dropdown-item": Partial<
    SigveloDropdownItemProps & BaseProps<SigveloDropdownItem> & BaseEvents
  >;

  /**
   * <sigvelo-dropdown>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `open`: Opens or closes the dropdown.
   * - `context-menu`/`contextMenu`: The ID of an element to apply the dropdown as a context menu.
   * - `placement`: The placement of the dropdown menu in reference to the trigger. The menu will shift to a more optimal location if
   * the preferred placement doesn't have enough room.
   * - `distance`: The distance of the dropdown menu from its trigger.
   * - `offset`: The offset of the dropdown menu along its trigger.
   * - `defaultSlot`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-before-open`: Emitted when the dropdown is instructed to open but before it is shown.
   * - `sigvelo-open`: Emitted when the dropdown menu has opened and the animation has completed.
   * - `sigvelo-before-close`: Emitted when the dropdown is dismissed but before it is hidden.
   * - `sigvelo-close`: Emitted when the dropdown menu has closed and the animation has completed.
   * - `sigvelo-select`: Emitted when a dropdown item has been selected. You can inspect `event.detail.item` to see the `<sigvelo-dropdown-item>` that was selected. Calling `event.preventDefault()` will keep the dropdown open.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: One or more `<dropdown-item>` elements to show in the dropdown. You can also use `<sigvelo-divider>` here.
   * - `trigger`: The dropdown's trigger. Must be a `<sigvelo-button>` or `<button>` element.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--show-duration`: The duration of the show/hide animation. (default: `50ms`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `menu`: The dropdown menu's container.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `open`: Applied when the dropdown is open.
   */
  "sigvelo-dropdown": Partial<
    SigveloDropdownProps & BaseProps<SigveloDropdown> & BaseEvents
  >;

  /**
   * <sigvelo-empty-state>
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Content to show in the empty state. Usually includes a heading, a paragraph, and sometimes buttons.
   * - `illustration`: An optional illustration to show in the empty state. Works well with an image or a `<sigvelo-icon>` element.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--content-width`: The maximum width of the empty state's content. When space is limited, the content will wrap automatically. (default: `40ch`)
   * - `--illustration-width`: The maximum width of the illustration. By default, this will be half of `--content-width`. This property does not affect the size of icons. (default: `undefined`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `content`: The container that wraps the content.
   * - `illustration`: The container that wraps the illustration.
   */
  "sigvelo-empty-state": Partial<
    SigveloEmptyStateProps & BaseProps<SigveloEmptyState> & BaseEvents
  >;

  /**
   * <sigvelo-empty-result>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `title`: The empty-result heading.
   * - `description`: Optional guidance for recovering from the empty state.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `illustration`: An optional icon or illustration.
   * - `(default)`: Optional recovery actions.
   */
  "sigvelo-empty-result": Partial<
    SigveloEmptyResultProps & BaseProps<SigveloEmptyResult> & BaseEvents
  >;

  /**
   * <sigvelo-expander>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `expanded`: Whether the content is expanded
   * - `disabled`: Disables the expand/collapse functionality
   * - `without-shadow`/`withoutShadow`: When true, the shadow above collapsed content will not be rendered.
   * - `content`: undefined (property only)
   * - `trigger`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-before-open`: Emitted before the expander opens. Cancelable event that prevents opening when canceled.
   * - `sigvelo-open`: Emitted after the expander has opened.
   * - `sigvelo-before-close`: Emitted before the expander closes. Cancelable event that prevents closing when canceled.
   * - `sigvelo-close`: Emitted after the expander has closed.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot for content to be expanded/collapsed.
   * - `expand-label`: The label for the button that expands the content.
   * - `collapse-label`: The label for the button that collapses the content.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--preview-height`: The visible height of the expander's content when collapsed. (default: `3lh`)
   * - `--duration`: The duration of the expand/collapse animation. (default: `200ms`)
   * - `--easing`: The easing to use for the expand/collapse animation. (default: `ease`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `content`: The container holding the expandable content.
   * - `shadow`: The shadow that shows above collapsed content.
   * - `trigger`: The button that toggles between expanded and collapsed states.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the expander is disabled.
   * - `expanded`: Applied when the content is expanded.
   */
  "sigvelo-expander": Partial<
    SigveloExpanderProps & BaseProps<SigveloExpander> & BaseEvents
  >;

  /**
   * <sigvelo-field>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The field label text.
   * - `description`: Help text displayed below the control.
   * - `error`: Error message displayed below the control. Puts the field in an error state.
   * - `required`: Marks the field as required. Shows the required indicator on the label.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The form control (e.g. sigvelo-text-field, sigvelo-select).
   * - `label`: Custom label content. Overrides the `label` attribute.
   * - `description`: Custom description content. Overrides the `description` attribute.
   * - `error`: Custom error content. Overrides the `error` attribute.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `error`: Applied when the field has an error.
   */
  "sigvelo-field": Partial<
    SigveloFieldProps & BaseProps<SigveloField> & BaseEvents
  >;

  /**
   * <sigvelo-file-input>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The text field's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The text field's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `name`: The name of the file input. This will be submitted with the form as a name/value pair.
   * - `disabled`: Disables the file input.
   * - `accept`: A list of acceptable file types. Must be a comma-separated list of [unique file type
   * specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers).
   * - `multiple`: Allows more than one file to be selected.
   * - `size`: The file input's size.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   * - `required`: Makes the file input required. Form submission will not be allowed when this is set and no files are selected.
   * - `dropzone`: undefined (property only)
   * - `fileInput`: undefined (property only)
   * - `isDragging`: undefined (property only)
   * - `isInvalid`: undefined (property only)
   * - `hadUserInteraction`: undefined (property only)
   * - `wasSubmitted`: undefined (property only)
   * - `files`: An array of files that are currently selected. (Property only) (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the file input loses focus. This event does not bubble.
   * - `sigvelo-change`: Emitted when the user selects or removes a file.
   * - `sigvelo-focus`: Emitted when the file input receives focus. This event does not bubble.
   * - `sigvelo-input`: Emitted when the file input receives input.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `label`: The file input's label. For plain-text labels, you can use the `label` attribute instead.
   * - `description`: The file input's description. For plain-text descriptions, you can use the `description` attribute instead.
   * - `dropzone`: Custom content to show in the dropzone.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The element that contains the text field's label, a `<label>` element.
   * - `description`: The element that contains the text field's description.
   * - `dropzone`: The bordered region where files can be dropped.
   * - `file-list`: The list of files shown when at least one file is selected.
   * - `file`: A selected file will be drawn in this container.
   * - `file-thumbnail`: The container that hold's the file's image or icon.
   * - `file-image`: The file's image preview (if it's an image).
   * - `file-icon`: The file's icon (if it's not an image).
   * - `file-icon__svg`: The `<svg>` part of the file icon.
   * - `file-details`: The container that holds the filename and size.
   * - `file-name`: The container that holds the file's name, a `<span>` element.
   * - `file-size`: The container that holds the file's size, a `<small>` element.
   * - `file-actions`: The container that holds the file's remove button.
   * - `file-remove-button`: The file's remove button.
   * - `file-remove-button__button`: The `button` part of the file's remove button.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the file input is disabled.
   * - `blank`: Applied when the file input has a blank value.
   * - `focused`: Applied when the file input has focus.
   * - `user-valid`: Applied when the file input is valid and the user has sufficiently interacted with it.
   * - `user-invalid`: Applied when the file input is invalid and the user has sufficiently interacted with it.
   */
  "sigvelo-file-input": Partial<
    SigveloFileInputProps & BaseProps<SigveloFileInput> & BaseEvents
  >;

  /**
   * <sigvelo-filter-bar>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The accessible visible label.
   * - `placeholder`: Placeholder displayed when the query is empty.
   * - `query`: The controlled filter query.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-filter-change`: Emitted on each query change with `{ query }`.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `field`: The underlying `sigvelo-text-field`.
   */
  "sigvelo-filter-bar": Partial<
    SigveloFilterBarProps & BaseProps<SigveloFilterBar> & BaseEvents
  >;

  /**
   * <sigvelo-form-section>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `title`: The section title rendered as a fieldset legend.
   * - `description`: Optional supporting description.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Related form controls and supporting content.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `fieldset`: The semantic fieldset container.
   * - `title`: The fieldset legend.
   * - `description`: The optional description.
   * - `content`: The controls container.
   */
  "sigvelo-form-section": Partial<
    SigveloFormSectionProps & BaseProps<SigveloFormSection> & BaseEvents
  >;

  /**
   * <sigvelo-include>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `src`: The URL of the file to include. Must be a CORS-enabled endpoint.
   * - `mode`: The mode to use when fetching the request.
   * - `allow-scripts`/`allowScripts`: By default, scripts in included files will not be executed. Setting this to true will allow them to run. If you use
   * this option, make sure you trust the included HTML, otherwise you may become vulnerable to XSS exploits.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-included`: Emitted when the include file has been fetched and rendered. The HTTP status code will be available in `event.detail.status`. This event does not bubble.
   * - `sigvelo-include-error`: Emitted when the fetch results in a network error or receives an HTTP response outside of the 200 range. If a network error occurs, it will be available in `event.detail.error`. If an HTTP status code was returned, it will be available in `event.detail.status`. This event does not bubble.
   */
  "sigvelo-include": Partial<
    SigveloIncludeProps & BaseProps<SigveloInclude> & BaseEvents
  >;

  /**
   * <sigvelo-infinite-scroller>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: An accessible label for the feed.
   * - `threshold`: The scroll threshold at which to trigger loading more items. Accepts percentages (e.g., "20%") or pixels
   * (e.g., "200px").
   * - `defaultSlot`: undefined (property only)
   * - `isLoading`: undefined (property only)
   * - `isComplete`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-load-more`: Emitted when scrolling reaches the threshold and more items should be loaded.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot for feed items. Each item should have role="article" and be focusable.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `complete() => void`: Mark the feed as completed, preventing further load events. Changing content in the default slot will reset this
   * and re-enable infinite scrolling.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `loading`: Applied when the infinite scroller is loading more content.
   * - `complete`: Applied when the infinite scroller has no more content to load.
   */
  "sigvelo-infinite-scroller": Partial<
    SigveloInfiniteScrollerProps &
      BaseProps<SigveloInfiniteScroller> &
      BaseEvents
  >;

  /**
   * <sigvelo-intersection-observer>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `root`: The ID of the element to use as as the bounding box of the viewport for the observed targets.
   * - `root-margin`/`rootMargin`: Margin around the root. Can have values similar to the CSS margin property.
   * - `threshold`: Either a single number or space-delimited numbers which indicate at what percentage of the target's visibility the observer's callback should be executed.
   * - `intersect-class`/`intersectClass`: A CSS class name to apply to elements while they're intersecting. The class will be removed when the element is no
   * longer in the viewport. This allows you to apply styles to elements as they enter and exit the viewport using pure
   * CSS.
   * - `once`: When true, stops observing after the first intersection.
   * - `disabled`: Disables the intersection observer.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-intersect`: Emitted when an observed element starts or stops intersecting. `event.detail.entry` contains the respective [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) object.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The elements to observe. Only direct children of the host element are observed.
   */
  "sigvelo-intersection-observer": Partial<
    SigveloIntersectionObserverProps &
      BaseProps<SigveloIntersectionObserver> &
      BaseEvents
  >;

  /**
   * <sigvelo-listbox-item>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The listbox item's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The listbox item's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `value`: The listbox item's value.
   * - `selected`: The listbox item's selected state.
   * - `disabled`: Disables the listbox item.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The listbox item's label. For plain-text labels, you can use the `label` attribute instead.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `selected`: Applied when the listbox item is selected.
   * - `disabled`: Applied when the listbox item is disabled.
   * - `controller-disabled`: Applied when the listbox controller is disabled.
   * - `controller-focused`: Applied when the listbox controller focused.
   * - `controller-readonly`: Applied when the listbox controller is readonly.
   */
  "sigvelo-listbox-item": Partial<
    SigveloListboxItemProps & BaseProps<SigveloListboxItem> & BaseEvents
  >;

  /**
   * <sigvelo-listbox>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The listbox's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The listbox's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `name`: The name of the listbox. This will be submitted with the form as a name/value pair.
   * - `multiple`: Enables multiple selection mode.
   * - `disabled`: Disables the listbox.
   * - `readonly`: Makes the text field a read-only field.
   * - `size`: The text field's size.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   * - `required`: Makes the listbox required. Form submission will not be allowed when this is set and the listbox is blank.
   * - `value`: The listbox's value. For multiple selection, this will be the value of the first selected item.
   * - `selectedValues`: Gets or sets the currently selected values as an array. This property provides a consistent way to access or modify
   * the selection state regardless of whether the listbox is in single or multiple selection mode.
   *
   * In single selection mode, it returns an array with either zero or one value. In multiple selection mode, it returns
   * an array of all selected values.
   *
   * When setting this property in single mode, the first value in the array (if any) becomes the selected value. In
   * multiple mode, all values in the array become selected.
   * - `selectedItems`: Gets or sets an array of selected listbox items. (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the list box loses focus. This event does not bubble.
   * - `sigvelo-change`: Emitted when the user commits changes to the list box's selection. In single select mode, it occurs when a change is made and the listbox loses focus. In multiselect mode, it occurs whenever an option is toggled even while the listbox has focus.
   * - `sigvelo-focus`: Emitted when the list box receives focus. This event does not bubble.
   * - `sigvelo-input`: Emitted when the list box's selection changes from user input.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Listbox items to show in the listbox.
   * - `label`: The listbox's label. For plain-text labels, you can use the `label` attribute instead.
   * - `description`: The listbox's description. For plain-text descriptions, you can use the `description` attribute instead.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `formResetCallback() => void`: undefined
   * - `getSelectedValues() => void`: Returns an array of all selected values.
   * - `setSelectedValues(values: string|string[]) => void`: Sets the selected items by value(s) without triggering events.
   * Works for both single and multiple selection modes.
   * - `selectAll() => void`: Convenience method for selecting all items.
   * - `deselectAll() => void`: Convenience method for deselecting all items.
   * - `focus() => void`: Sets focus to the listbox.
   * - `blur() => void`: Removes focus from the listbox.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The element that contains the text field's label.
   * - `description`: The element that contains the text field's description.
   * - `listbox`: The internal listbox container that holds listbox items.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the text field is disabled.
   * - `blank`: Applied when the text field has a blank value.
   * - `focused`: Applied when the text field has focus.
   * - `user-valid`: Applied when the text field is valid and the user has sufficiently interacted with it.
   * - `user-invalid`: Applied when the text field is invalid and the user has sufficiently interacted with it.
   */
  "sigvelo-listbox": Partial<
    SigveloListboxProps & BaseProps<SigveloListbox> & BaseEvents
  >;

  /**
   * <sigvelo-lorem-ipsum>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `type`: The type of HTML content to generate.
   * - `length`: The length of the content to generate, e.g. the number of words, sentences, paragraphs, or list items. This should
   * be a number or a range in the format of `{min}-{max}`, e.g. `2-4`.
   * - `seed`: By default, the generator will produce random content every time it runs. Use this option to seed the generator
   * with a non-zero number and force it to output the same content every time.
   * - `words-per-sentence`/`wordsPerSentence`: The number of words that should occur in a sentence or list item. This should be a number or a range in the format
   * of `{min}-{max}`, e.g. `4-16`.
   * - `sentences-per-paragraph`/`sentencesPerParagraph`: The number of sentences that should occur in a paragraph. This should be a number or a range in the format of
   * `{min}-{max}`, e.g. `3-6`.
   */
  "sigvelo-lorem-ipsum": Partial<
    SigveloLoremIpsumProps & BaseProps<SigveloLoremIpsum> & BaseEvents
  >;

  /**
   * <sigvelo-meter>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: A label for the meter, displayed above the track.
   * - `min`: The meter's minimum value.
   * - `max`: The meter's maximum value.
   * - `value`: The meter's current value.
   * - `color`: The color intent for the indicator.
   * - `percentage`: The percentage of the meter filled (readonly). (property only) (readonly)
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Optional label content displayed above the meter.
   * - `value`: Optional formatted value displayed to the right of the label.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--track-color`: The color of the meter's track. (default: `var(--sigvelo-color-neutral-bg-subtle)`)
   * - `--track-size`: The height of the meter track. (default: `0.5rem`)
   * - `--indicator-color`: The color of the meter's indicator. Defaults to the color intent. (default: `undefined`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `track`: The meter's track element.
   * - `indicator`: The meter's value indicator.
   * - `label`: The container for the label and value.
   */
  "sigvelo-meter": Partial<
    SigveloMeterProps & BaseProps<SigveloMeter> & BaseEvents
  >;

  /**
   * <sigvelo-metric>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The visible metric label.
   * - `value`: The metric value. Numbers are formatted according to `format`.
   * - `format`: Number formatting applied to numeric values.
   * - `currency`: ISO 4217 currency code used when `format` is `currency`.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The metric label.
   * - `value`: The formatted metric value.
   */
  "sigvelo-metric": Partial<
    SigveloMetricProps & BaseProps<SigveloMetric> & BaseEvents
  >;

  /**
   * <sigvelo-metric-grid>
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: One or more `sigvelo-metric` elements.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--metric-min-width`: Minimum width of each grid item, clamped to the container width. (default: `9rem`)
   */
  "sigvelo-metric-grid": Partial<
    SigveloMetricGridProps & BaseProps<SigveloMetricGrid> & BaseEvents
  >;

  /**
   * <sigvelo-mutation-observer>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `disabled`: Disables the mutation observer.
   * - `attr`: Indicates whether attributes should be observed.
   * - `attr-old-value`/`attrOldValue`: Indicates whether attribute old value should be recorded.
   * - `attr-filter`/`attrFilter`: One or more attributes to limit observations to, separate by a space. When not specified, all attributes are
   * observed.
   * - `child-list`/`childList`: Indicates whether mutations to target's children are to be observed.
   * - `subtree`: Indicates whether mutations to target's descendants are to be observed.
   * - `character-data`/`characterData`: Indicates whether character data should be observed.
   * - `character-data-old-value`/`characterDataOldValue`: Indicates whether character data old value should be recorded.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-mutation`: Emitted when a slotted element is mutated. The `event.detail.record` property contains a [`MutationRecord`](https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord) with information about the mutation.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The elements to observe. All direct children of the host element are observed, but not nested elements.
   */
  "sigvelo-mutation-observer": Partial<
    SigveloMutationObserverProps &
      BaseProps<SigveloMutationObserver> &
      BaseEvents
  >;

  /**
   * <sigvelo-navicon>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `for`: The ID of the associated menu that gets shown/hidden when the navicon is toggled. The element must be in the same
   * document as the navicon.
   * - `expanded`: Determines if the navicon is toggled on.
   * - `symbol`: Determines the navicon's symbol.
   * - `disabled`: Disables the navicon.
   * - `label`: The accessible label for the navicon.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the navicon loses focus. This event does not bubble.
   * - `sigvelo-focus`: Emitted when the navicon receives focus. This event does not bubble.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--dot-size`: The width of each dot. Available when symbol is `vertical-dots` or `horizontal-dots`. (default: `0.125em`)
   * - `--line-width`: The width of each line. Available when symbol is `hamburger` or `equals`. (default: `0.0625em`)
   * - `--line-transition-duration`: The duration of the symbol's animation. (default: `200ms`)
   * - `--line-transition-easing`: The easing to use for the symbol's animation. (default: `cubic-bezier(0.4, 0, 0.2, 1)`)
   * - `--dot-size`: The size of the dots in the dots symbol. (default: `0.125em`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `line`: The individual lines that make up the navicon symbol.
   * - `line-top`: The top line.
   * - `line-middle`: The middle line (hamburger symbol only).
   * - `line-bottom`: The bottom line.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `expanded`: Applied when the navicon is toggled on.
   * - `disabled`: Applied when the navicon is disabled.
   * - `focused`: Applied when the navicon has focus.
   */
  "sigvelo-navicon": Partial<
    SigveloNaviconProps & BaseProps<SigveloNavicon> & BaseEvents
  >;

  /**
   * <sigvelo-number>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `number`: The number to format.
   * - `type`: The formatting style to use.
   * - `currency`: The currency to use when formatting currency. Must be an ISO 4217 currency code, e.g. "EUR" for euro. If not
   * provided, USD will be assumed.
   * - `currency-display`/`currencyDisplay`: How to display the currency in currency formatting.
   * - `currency-sign`/`currencySign`: In many locales, accounting format means to wrap the number with parentheses instead of appending a minus sign.
   * - `unit`: The unit to use in unit formatting. [Possible values can be found here.](https://tc39.es/ecma402/#table-sanctioned-single-unit-identifiers)
   * There is no default value. If the style is `unit`, this option must be provided.
   * - `unit-display`/`unitDisplay`: The unit formatting style to use in unit formatting.
   * - `minimum-integer-digits`/`minimumIntegerDigits`: The minimum number of integer digits to use. A value with a smaller number of integer digits than this number will
   * be left-padded with zeros (to the specified length) when formatted. Possible values are from `1` to `21`. The
   * default is `1`.
   * - `minimum-fraction-digits`/`minimumFractionDigits`: The minimum number of fraction digits to use. Possible values are from `0` to `20`.
   * - `maximum-fraction-digits`/`maximumFractionDigits`: The maximum number of fraction digits to use. Possible values are from `0` to `20`.
   * - `minimum-significant-digits`/`minimumSignificantDigits`: The minimum number of significant digits to use. Possible values are from `1` to `21`; the default is `1`.
   * - `maximum-significant-digits`/`maximumSignificantDigits`: The maximum number of significant digits to use. Possible values are from `1` to `21`; the default is `21`.
   * - `rounding-priority`/`roundingPriority`: Specifies how rounding conflicts will be resolved.
   * - `rounding-increment`/`roundingIncrement`: Indicates the increment at which rounding should take place relative to the calculated rounding magnitude. Possible
   * values are `1`, `2`, `5`, `10`, `20`, `25`, `50`, `100`, `200`, `250`, `500`, `1000`, `2000`, `2500`, and `5000`.
   * Cannot be mixed with significant-digits rounding or any setting of `roundingPriority` other than auto.
   * - `rounding-mode`/`roundingMode`: How decimals should be rounded. [See this page for more details.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#roundingmode)
   * - `trailing-zero-display`/`trailingZeroDisplay`: The strategy for displaying trailing zeros on whole numbers.
   * - `notation`: The formatting that should be displayed for the number.
   * - `compact-display`/`compactDisplay`: Only used when `notation` is `compact`.
   * - `grouping`: Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.
   * - `sign-display`/`signDisplay`: When to display the sign for the number.
   */
  "sigvelo-number": Partial<
    SigveloNumberProps & BaseProps<SigveloNumber> & BaseEvents
  >;

  /**
   * <sigvelo-number-field>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The number field's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The number field's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `name`: The name of the number field. This will be submitted with the form as a name/value pair.
   * - `value`: The number field's value.
   * - `placeholder`: A placeholder to show in the number field when it's blank.
   * - `disabled`: Disables the number field.
   * - `readonly`: Makes the number field a read-only field.
   * - `variant`: The type of number field to render.
   * - `size`: The number field's size.
   * - `pill`: Draws the number field in a pill shape.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   * - `required`: Makes the number field required. Form submission will not be allowed when this is set and the number field is blank.
   * - `pattern`: A regular expression the value should match to be considered valid.
   * - `min`: The minimum value for date/time types.
   * - `max`: The maximum value for date/time types.
   * - `step`: The granularity the value must adhere to when incrementing and decrementing.
   * - `autocomplete`: Tells the browser how to autocomplete the number field. See [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
   * for available values.
   * - `autofocus`: Tells the browser to focus the number field when the page loads or a dialog is shown.
   * - `enterkeyhint`: Sets the enter key label on virtual keyboards.
   * - `without-steppers`/`withoutSteppers`: When true, the add/subtract steppers won't be displayed.
   * - `isInvalid`: undefined (property only)
   * - `hadUserInteraction`: undefined (property only)
   * - `wasSubmitted`: undefined (property only)
   * - `isPasswordVisible`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the number field loses focus. This event does not bubble.
   * - `sigvelo-change`: Emitted when the user commits changes to the number field's value.
   * - `sigvelo-focus`: Emitted when the number field receives focus. This event does not bubble.
   * - `sigvelo-input`: Emitted when the number field receives input.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `label`: The number field's label. For plain-text labels, you can use the `label` attribute instead.
   * - `description`: The number field's description. For plain-text descriptions, you can use the `description` attribute instead.
   * - `start`: An icon or similar element to place before the label. Works great with `<sigvelo-icon>`.
   * - `end`: An icon or similar element to place after the label. Works great with `<sigvelo-icon>`.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `focus() => void`: Sets focus to the number field.
   * - `blur() => void`: Removes focus from the number field.
   * - `select() => void`: Selects all text in the number field.
   * - `setSelectionRange(start: number, end: number, direction: "forward" | "backward" | "none" = "none") => void`: Sets the start and end positions of the current text selection in the number field.
   * - `setRangeText(replacement: string, start?: number, end?: number, selectMode?: "select" | "start" | "end" | "preserve") => void`: Replaces a range of text in the number field with a new string.
   * - `stepDown() => void`: When a supported `type` is used, this method will decrease the number field's value by `step`. This is a programmatic
   * change, so `input` and `change` events will not be emitted when this is called.
   * - `stepUp() => void`: When a supported `type` is used, this method will increase the number field's value by `step`. This is a programmatic
   * change, so `input` and `change` events will not be emitted when this is called.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The element that contains the number field's label.
   * - `description`: The element that contains the number field's description.
   * - `visual-box`: The element that wraps the internal text box.
   * - `text-box`: The internal text box, an `<input>` element.
   * - `stepper`: The up and down stepper buttons.
   * - `stepper-up`: The up stepper button.
   * - `stepper-down`: The down stepper button.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the number field is disabled.
   * - `blank`: Applied when the number field has a blank value.
   * - `focused`: Applied when the number field has focus.
   * - `user-valid`: Applied when the number field is valid and the user has sufficiently interacted with it.
   * - `user-invalid`: Applied when the number field is invalid and the user has sufficiently interacted with it.
   */
  "sigvelo-number-field": Partial<
    SigveloNumberFieldProps & BaseProps<SigveloNumberField> & BaseEvents
  >;

  /**
   * <sigvelo-pagination>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: A label to use to describe the control to assistive devices. Defaults to "Pagination" when not set.
   * - `total-pages`/`totalPages`: The total number of pages to show.
   * - `page`: The current page.
   * - `siblings`: The number of pages to show on each side of the current page. Minimum 2.
   * - `jump`: The number of pages to increase or decrease when jump buttons are clicked.
   * - `format`: How the pagination will display buttons.
   * - `link-formatter`/`linkFormatter`: A string that, when provided, renders `<a>` elements instead of `<${tag}s>` using this as the link's template.
   * Use `$page` to indicate the page number, e.g. `"/path/to/$page"`. Alternatively, you can provide a JavaScript
   * function that accepts a page number and returns a URL.
   * - `disabled`: Disables the pagination control.
   * - `variant`: Determine's the pagination's variant.
   * - `without-nav`/`withoutNav`: Removes the previous and next buttons.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-before-page-change`: Emitted when the page is going to change but before it actually changes. Calling `event.preventDefault()` will prevent the page from changing. Inspect `event.detail` to get the `currentPage` and `requestedPage` properties.
   * - `sigvelo-page-change`: Emitted after the page has been changed and the UI has been updated.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `previous-icon`: A custom icon to use for the previous button.
   * - `next-icon`: A custom icon to use for the next button.
   * - `jump-backward-icon`: A custom icon to use for the jump backward button.
   * - `jump-forward-icon`: A custom icon to use for jump forward button.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `nav`: The navigation container, a `<nav>` element.
   * - `list`: The list that contains the pagination items, a `<ul>` element.
   * - `item`: A pagination item, an `<li>` element.
   * - `button`: A pagination button, a `<button>` or an `<a>` element.
   * - `button-first`: The button that navigates to the first page.
   * - `button-previous`: The button that navigates to the previous page.
   * - `button-next`: The button that navigates to the next page.
   * - `button-last`: The button that navigates to the last page.
   * - `button-page`: A button that navigates to a specific page.
   * - `button-current`: The button that represents the current page.
   * - `button-jump-backward`: The jump backward button.
   * - `button-jump-forward`: The jump forward button.
   * - `range`: The page range that shows the page when viewed in the compact format, e.g. "1 of 10".
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the pagination is disabled.
   */
  "sigvelo-pagination": Partial<
    SigveloPaginationProps & BaseProps<SigveloPagination> & BaseEvents
  >;

  /**
   * <sigvelo-popover>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `for`: The ID of of popover's anchor element. This must be an interactive/focusable element such as a button and it must
   * be in the same document as the popover.
   * - `label`: An accessible name for the popover.
   * - `open`: Shows or hides the popover.
   * - `placement`: The placement of the popover in reference to the anchor. The menu will shift to a more optimal location if the
   * preferred placement doesn't have enough room.
   * - `distance`: The distance of the popover from its anchor.
   * - `offset`: The offset of the popover along its trigger.
   * - `without-arrow`/`withoutArrow`: Renders the popover without an arrow.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-before-open`: Emitted when the popover is instructed to open but before it is shown.
   * - `sigvelo-open`: Emitted when the popover has opened and the animation has completed.
   * - `sigvelo-before-close`: Emitted when the popover is dismissed but before it is hidden.
   * - `sigvelo-close`: Emitted when the popover has closed. and the animation has completed.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The popover's content. Do not include interactive elements such as button, links, etc. as they won't be accessible to users inside the popover.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--arrow-size`: The size of the arrow. To hide the arrow, use the `without-arrow` attribute. (default: `0.3125rem`)
   * - `--max-width`: The maximum width the popover be before wrapping. (default: `25rem`)
   * - `--show-duration`: The duration of the show/hide animation. (default: `100ms`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `dialog`: The element that powers the popover, a `<dialog>` element.
   * - `content`: The element that wraps the popover's content.
   * - `arrow`: The popover's arrow. To change the arrow's size, use `--arrow-size` instead.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `open`: Applied when the popover is open.
   */
  "sigvelo-popover": Partial<
    SigveloPopoverProps & BaseProps<SigveloPopover> & BaseEvents
  >;

  /**
   * <sigvelo-preview-card>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `for`: The ID of the anchor element that triggers the preview card.
   * - `open`: Shows or hides the preview card.
   * - `placement`: The placement of the card relative to the anchor.
   * - `distance`: The distance from the anchor in pixels.
   * - `open-delay`/`openDelay`: Milliseconds to wait before opening on hover.
   * - `close-delay`/`closeDelay`: Milliseconds to wait before closing when the pointer leaves.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-before-open`: Emitted before the card opens.
   * - `sigvelo-open`: Emitted after the card has opened.
   * - `sigvelo-before-close`: Emitted before the card closes.
   * - `sigvelo-close`: Emitted after the card has closed.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The preview card's content.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--max-width`: The maximum width of the card. (default: `20rem`)
   * - `--show-duration`: The duration of the show/hide animation. (default: `150ms`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `card`: The card container.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `open`: Applied when the card is open.
   */
  "sigvelo-preview-card": Partial<
    SigveloPreviewCardProps & BaseProps<SigveloPreviewCard> & BaseEvents
  >;

  /**
   * <sigvelo-progress>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: A custom label for assistive devices.
   * - `variant`: The type of progress bar to render.
   * - `min`: The progress bar's minimum value.
   * - `max`: The progress bar's maximum value.
   * - `value`: The progress bar's current value.
   * - `indeterminate`: When the completion status can't be determined, the progress bar is considered indeterminate and the value is
   * ignored. Useful for tasks whose progress can't be reported.
   * - `percentage`: The progress bar's current value as a percentage. This is a readonly property. (property only) (readonly)
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Text to render inside the progress bar.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--track-color`: The color of the progress bar's track. (default: `var(--sigvelo-color-neutral-bg-subtle)`)
   * - `--track-size`: The height or thickness of the track, depending on the type of progress bar. (default: `1.5em | 1em`)
   * - `--indicator-color`: The color of the progress bar's value indicator. (default: `var(--sigvelo-color-primary-bg)`)
   * - `--diameter`: For progress rings, the diameter of the ring. (default: `10em`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `track`: The progress bar's track, a `<div>` for progress bars and a `<circle>` for progress rings.
   * - `indicator`: The progress bar's current value indicator, a `<div>` for progress bars and an SVG `<circle>` for progress rings.
   * - `content`: The container that holds any content that's been slotted in.
   */
  "sigvelo-progress": Partial<
    SigveloProgressProps & BaseProps<SigveloProgress> & BaseEvents
  >;

  /**
   * <sigvelo-radio-item>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The radio item's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The radio item's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `value`: The radio item's value.
   * - `checked`: The radio item's checked state.
   * - `disabled`: Disables the radio item.
   * - `variant`: The type of radio item to render.
   * - `size`: The radio item's size.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the radio item loses focus. This event does not bubble.
   * - `sigvelo-focus`: Emitted when the radio item receives focus. This event does not bubble.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The radio item's label. For plain-text labels, you can use the `label` attribute instead.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The `<label>` that wraps the entire control.
   * - `visual-box`: The element that wraps the internal radio.
   * - `radio-icon`: The radio icon, a `<sigvelo-icon>` element.
   * - `radio-icon__svg`: The radio icon's `svg` part.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `checked`: Applied when the radio item is checked.
   * - `disabled`: Applied when the radio item is disabled.
   * - `focused`: Applied when the radio item has focus.
   */
  "sigvelo-radio-item": Partial<
    SigveloRadioItemProps & BaseProps<SigveloRadioItem> & BaseEvents
  >;

  /**
   * <sigvelo-radio>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The radio's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The radio's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `name`: The name of the radio. This will be submitted with the form as a name/value pair.
   * - `value`: The radio's current value. Set this to change the selected item.
   * - `orientation`: The orientation of grouped items.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   * - `required`: Indicates at least one option in the radio is required.
   * - `disabled`: Disables the radio control.
   * - `group`: undefined (property only)
   * - `isInvalid`: undefined (property only)
   * - `hadUserInteraction`: undefined (property only)
   * - `wasSubmitted`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-change`: Emitted when the user commits changes to the radio's value.
   * - `sigvelo-input`: Emitted when the radio receives input.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The radio items to place in the group.
   * - `label`: The radio's label. For plain-text labels, you can use the `label` attribute instead.
   * - `description`: The radios's description. For plain-text descriptions, you can use the `description` attribute instead.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `focus(options?: FocusOptions) => void`: Sets focus to the selected item or the first item if none are selected.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The element that contains the radio's label.
   * - `description`: The element that contains the radio's description.
   * - `group`: The element that wraps the grouped radios.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `user-valid`: Applied when the radio is valid and the user has sufficiently interacted with it.
   * - `user-invalid`: Applied when the radio is invalid and the user has sufficiently interacted with it.
   */
  "sigvelo-radio": Partial<
    SigveloRadioProps & BaseProps<SigveloRadio> & BaseEvents
  >;

  /**
   * <sigvelo-random-content>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `items`: The number of items to show.
   * - `mode`: The selection mode. The default is 'unique', which ensures different items are shown after calling `randomize()`,
   * when possible. Use `random` for true randomization or `sequence` to show the next set of items based on their DOM
   * position.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: A pool of items that will be randomly displayed. Each item _must_ be a direct descendant of the host element.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `randomize() => void`: Rotates the visible item(s) based on the selected mode.
   */
  "sigvelo-random-content": Partial<
    SigveloRandomContentProps & BaseProps<SigveloRandomContent> & BaseEvents
  >;

  /**
   * <sigvelo-rating>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The rating's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The rating's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `name`: The name of the rating. This will be submitted with the form as a name/value pair.
   * - `value`: The rating's value.
   * - `disabled`: Disables the rating.
   * - `readonly`: Makes the rating a read-only field.
   * - `size`: The rating's size.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an iD of a form in the same document or shadow root.
   * - `required`: Makes the rating required. Form submission will not be allowed when this is set and the rating is empty.
   * - `max`: The maximum value allowed.
   * - `step`: The granularity the value must adhere to when incrementing and decrementing.
   * - `autofocus`: Tells the browser to focus the rating when the page loads or a dialog is shown.
   * - `rating`: undefined (property only)
   * - `isInvalid`: undefined (property only)
   * - `hadUserInteraction`: undefined (property only)
   * - `wasSubmitted`: undefined (property only)
   * - `symbolFormatter`: A function that returns the HTML for each symbol. The function will receive the `value` and `isSelected` arguments
   * that you can use to customize the symbol based on specific values or whether the symbol is in the selected state.
   * You should only return trusted HTML from this function, otherwise you may become vulnerable to XSS exploits. (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the rating loses focus. This event does not bubble.
   * - `sigvelo-change`: Emitted when the user commits changes to the rating's value.
   * - `sigvelo-focus`: Emitted when the rating receives focus. This event does not bubble.
   * - `sigvelo-input`: Emitted when the rating receives input.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `label`: The rating's label. For plain-text labels, you can use the `label` attribute instead.
   * - `description`: The rating's description. For plain-text descriptions, you can use the `description` attribute instead.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `formDisabledCallback() => void`: undefined
   * - `focus() => void`: Sets focus to the rating.
   * - `blur() => void`: Removes focus from the rating.
   * - `stepDown() => void`: Decreases the rating's value by `step`. This is a programmatic change, so `input` and `change` events will not be
   * emitted when this is called.
   * - `stepUp() => void`: Increases the rating's value by `step`. This is a programmatic change, so `input` and `change` events will not be
   * emitted when this is called.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The element that contains the ratings's label.
   * - `description`: The element that contains the rating's description.
   * - `rating`: The element that wraps all of the rating's symbols.
   * - `symbol`: The container that holds the selected and unselected version of each symbol.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the rating is disabled.
   * - `focused`: Applied when the rating has focus.
   * - `user-valid`: Applied when the rating is valid and the user has sufficiently interacted with it.
   * - `user-invalid`: Applied when the rating is invalid and the user has sufficiently interacted with it.
   */
  "sigvelo-rating": Partial<
    SigveloRatingProps & BaseProps<SigveloRating> & BaseEvents
  >;

  /**
   * <sigvelo-resize-observer>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `disabled`: Disables the resize observer.
   * - `box`: Sets which box model the observer will observe changes to.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-resize`: Emitted when a slotted element is resized. Like `ResizeObserver`, this event is also dispatched when each element is first observed. The `event.detail.entry` property contains a [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) with information about the element's dimensions.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The elements to observe. All direct children of the host element are observed, but not nested elements.
   */
  "sigvelo-resize-observer": Partial<
    SigveloResizeObserverProps & BaseProps<SigveloResizeObserver> & BaseEvents
  >;

  /**
   * <sigvelo-scroll-area>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `orientation`: Which axis to allow scrolling on.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The scrollable content.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--thumb-color`: The scrollbar thumb color. (default: `var(--sigvelo-color-neutral-bg)`)
   * - `--thumb-hover-color`: The scrollbar thumb color on hover. (default: `undefined`)
   * - `--track-color`: The scrollbar track color. (default: `transparent`)
   * - `--scroll-area-height`: The height of the scroll area. (default: `auto`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `viewport`: The scrollable viewport container.
   */
  "sigvelo-scroll-area": Partial<
    SigveloScrollAreaProps & BaseProps<SigveloScrollArea> & BaseEvents
  >;

  /**
   * <sigvelo-scroller>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `orientation`: The scroller's orientation.
   * - `without-scrollbar`/`withoutScrollbar`: Removes the visible scrollbar.
   * - `without-shadow`/`withoutShadow`: Removes the shadows.
   * - `content`: undefined (property only)
   * - `canScroll`: undefined (property only)
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The content to show inside the scroller.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--shadow-color`: The base color of the shadow. (default: `var(--sigvelo-color-neutral-bg)`)
   * - `--shadow-size`: The width of the shadow. (default: `2rem`)
   * - `--thumb-color`: The color of the scrollbar's thumb (supportive browsers only). (default: `var(--sigvelo-color-neutral-bg)`)
   * - `--track-color`: The color of the scrollbar's track (supportive browsers only). (default: `transparent`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `content`: The container that wraps the slotted content.
   * - `start-shadow`: The starting shadow.
   * - `end-shadow`: The ending shadow.
   */
  "sigvelo-scroller": Partial<
    SigveloScrollerProps & BaseProps<SigveloScroller> & BaseEvents
  >;

  /**
   * <sigvelo-search-list>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `controller`: In most cases, you should slot the controller into the `controller` slot. However, when the controller must exist
   * outside the search list, you can set this property to the ID of an external `<input>` or `<sigvelo-text-field>`
   * element instead.
   * - `match`: The search behavior to use when finding a matching item. The `exact` search is case-insensitive but requires an
   * exact match. The `fuzzy` search is more forgiving to typos. When using `custom`, you can set the `isMatch` property
   * to a custom function to determine if the provided query matches the element's content.
   * - `debounce`: The time in milliseconds to use for debouncing the search results while the user types.
   * - `results`: undefined (property only)
   * - `query`: undefined (property only)
   * - `hasVisibleItems`: Whether any slotted item survived the current filter. Not the `empty` state — that one also needs a query.
   * Public like its siblings because Lit keys `changedProperties` on `keyof this`, which excludes private members. (property only)
   * - `isInitial`: undefined (property only)
   * - `resultsMessage`: undefined (property only)
   * - `isMatch`: A custom search function you can provide to change the search behavior. The function is applied to each item when
   * the search query changes. The `query` argument is the current search term, `content` is a string containing the
   * element's searchable content, including its `textContent` and `data-keywords"`, and `el` is the element being
   * searched. Property only. (property only)
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: One or more elements to be searched. Each element must be a direct descendent of the host, i.e. do not wrap items in other containers. If desired, you can apply flex and grid styles to the `items` part to control how items appear in the list. By default, items will be displayed in a flex column.
   * - `controller`: A `<sigvelo-text-field>` or `<input>` element that will control the search list.
   * - `initial`: Optional content to display when no search query has been entered.
   * - `empty`: Optional content to display when the search yields no results.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `setQuery(searchQuery = "") => void`: Sets the search query and updates the results. To clear the search, set this to an empty string.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `items`: The container that wraps the slotted items. Displays as a flex column by default.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `empty`: Applied when a query is entered and no matching results are found.
   * - `initial`: Applied when the query is empty and the `initial` slot is showing.
   */
  "sigvelo-search-list": Partial<
    SigveloSearchListProps & BaseProps<SigveloSearchList> & BaseEvents
  >;

  /**
   * <sigvelo-select>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The select's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The select's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `name`: The name of the select. This will be submitted with the form as a name/value pair.
   * - `value`: The select's value.
   * - `disabled`: Disables the select.
   * - `readonly`: Makes the select a read-only field.
   * - `variant`: The type of select to render.
   * - `size`: The select's size.
   * - `pill`: Draws the select in a pill shape.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   * - `required`: Makes the select required. Form submission will not be allowed when this is set and the select is blank.
   * - `autocomplete`: Tells the browser how to autocomplete the select. See [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
   * for available values.
   * - `enterkeyhint`: Sets the enter key label on virtual keyboards.
   * - `isInvalid`: undefined (property only)
   * - `hadUserInteraction`: undefined (property only)
   * - `wasSubmitted`: undefined (property only)
   * - `options`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the select loses focus. This event does not bubble.
   * - `sigvelo-change`: Emitted when the user commits changes to the select's value.
   * - `sigvelo-focus`: Emitted when the select receives focus. This event does not bubble.
   * - `sigvelo-input`: Emitted when the select receives input.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `label`: The select's label. For plain-text labels, you can use the `label` attribute instead.
   * - `description`: The select's description. For plain-text descriptions, you can use the `description` attribute instead.
   * - `start`: An icon or similar element to place before the label. Works great with `<sigvelo-icon>`.
   * - `end`: An icon or similar element to place after the label. Works great with `<sigvelo-icon>`.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `focus() => void`: Sets focus to the select.
   * - `blur() => void`: Removes focus from the select.
   * - `showPicker() => void`: Shows the picker in supportive browsers.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The element that contains the select's label.
   * - `description`: The element that contains the select's description.
   * - `visual-box`: The element that wraps the internal text box.
   * - `text-box`: The internal text box, a `<select>` element.
   * - `chevron`: The chevron icon, a `<sigvelo-icon>` element.
   * - `chevron__svg`: The chevron icon's `<svg>` part.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the select is disabled.
   * - `blank`: Applied when the select has no selected option.
   * - `focused`: Applied when the select has focus.
   * - `user-valid`: Applied when the select is valid and the user has sufficiently interacted with it.
   * - `user-invalid`: Applied when the select is invalid and the user has sufficiently interacted with it.
   */
  "sigvelo-select": Partial<
    SigveloSelectProps & BaseProps<SigveloSelect> & BaseEvents
  >;

  /**
   * <sigvelo-selection-summary>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `count`: Number of selected items.
   * - `empty-label`/`emptyLabel`: Message shown when no items are selected.
   * - `singular-label`/`singularLabel`: Label used when exactly one item is selected.
   * - `plural-label`/`pluralLabel`: Label used when multiple items are selected.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `text`: The live status text.
   */
  "sigvelo-selection-summary": Partial<
    SigveloSelectionSummaryProps &
      BaseProps<SigveloSelectionSummary> &
      BaseEvents
  >;

  /**
   * <sigvelo-share>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: A human-readable label to be shared. This is sometimes ignored by the operating system, but you should usually
   * provide it as a fallback value.
   * - `text`: A string of text to be shared.
   * - `url`: A URL to be shares.
   * - `files`: An array of [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) objects to be shared. Property only.
   * - `disabled`: Disables the button.
   * - `feedback-placement`/`feedbackPlacement`: The placement of the feedback animation when falling back to copying.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: A custom button to use instead of the default.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `share-button`: The default share button, a `<sigvelo-button>` element.
   * - `share-button__button`: The default share button's `button` part.
   * - `share-icon`: The default share icon, a `<sigvelo-icon>` element.
   * - `share-icon__svg`: The share icon's `svg` part.
   * - `feedback`: The feedback that shows when copying (e.g. when the Web Share API is unsupported).
   */
  "sigvelo-share": Partial<
    SigveloShareProps & BaseProps<SigveloShare> & BaseEvents
  >;

  /**
   * <sigvelo-slide-activator>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The label to show in the slide activator's track. If you need to provide HTML in the label, use the `label` slot
   * instead.
   * - `activated-label`/`activatedLabel`: The label to show when the control is activated. If omitted, the regular label will be shown. If you need to
   * provide HTML in the label, use the `label` slot instead.
   * - `activated`: Reflects when the control is activated. Remove this attribute to deactivate it.
   * - `disabled`: Disables the control.
   * - `attention`: Draws attention to the track by adding a subtle animation.
   * - `thumb`: undefined (property only)
   * - `isDragging`: undefined (property only)
   * - `isPressing`: undefined (property only)
   * - `thumbPosition`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-before-activate`: Emitted when the control will activate. Calling `event.preventDefault()` will prevent the activation from occurring.
   * - `sigvelo-activate`: Emitted immediately after the control is activated.
   * - `sigvelo-before-deactivate`: Emitted when the control will deactivate. Calling `event.preventDefault()` will prevent the deactivation from occurring.
   * - `sigvelo-deactivate`: Emitted immediately after the control is deactivated.
   * - `sigvelo-progress`: Emitted as the slider progresses. Use `event.details.percent` to see how far along it is.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `label`: The slide activator's label. For plain-text labels, you can use the `label` attribute instead.
   * - `activated-label`: The label to show when activated. For plain-text labels, you can use the `activated-label` attribute instead.
   * - `thumb`: The thumb element that users drag. Defaults to a double chevron icon if not provided.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--border-radius`: The control's border radius. We use a CSS custom property so we can properly calculate the inset border radius for the thumb. (default: `var(--sigvelo-radius-lg)`)
   * - `--thumb-width`: The thumb's width. (default: `4em`)
   * - `--thumb-inset`: The thumb's inset from the host element. (default: `0.125em`)
   * - `--shimmer-color`: The color to use as a base for the shimmer animation. (default: `undefined`)
   * - `--thumb-position`: A read-only property that moves from 0 to 1 as the user slides the thumb to activate the control. Useful as a hook to transition background styles based on the thumb's position. (default: `(read-only)`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `thumb`: The slide activator's thumb.
   * - `label`: The slide activator's label.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `activated`: Applied briefly when the slide activator has been activated.
   * - `dragging`: Applied when the slide activator is dragging.
   * - `pressing`: Applied when the user is pressing a key to activate the slide activator.
   * - `disabled`: Applied when the slide activator is disabled.
   */
  "sigvelo-slide-activator": Partial<
    SigveloSlideActivatorProps & BaseProps<SigveloSlideActivator> & BaseEvents
  >;

  /**
   * <sigvelo-sparkline>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: An accessible label for the sparkline. This will be read by screen readers for users who can't see the chart, so
   * make sure to describe it appropriately.
   * - `data`: A space-separated list of positive values to show in the sparkline, e.g. "10 25 18 30". At least two values are
   * required to generate a chart.
   * - `variant`: Determines the sparkline's variant.
   * - `trend`: Draws the component with colors to visually indicate the specified trend.
   * - `curve`: The interpolation method used to connect data points on the line.
   * - `points`: undefined (property only)
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--fill-color`: The start color of the gradient fill (default: `undefined`)
   * - `--gradient-stop-color`: The end color of the gradient fill (default: `undefined`)
   */
  "sigvelo-sparkline": Partial<
    SigveloSparklineProps & BaseProps<SigveloSparkline> & BaseEvents
  >;

  /**
   * <sigvelo-splitter>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `position`: The current position of the divider as a decimal (0-1).
   * - `orientation`: The orientation of the splitter.
   * - `disabled`: Disables the splitter, preventing it from being focused and resized.
   * - `snap`: A space-separated list of percentage snap points, e.g. "25% 50% 75%".
   * - `snap-threshold`/`snapThreshold`: The maximum distance (in pixels) within which the divider will snap to a specified snap point.
   * - `isCollapsed`: undefined (property only)
   * - `isDragging`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-resize`: Dispatched when the splitter's handle is moved.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `start`: The content for the primary (start) panel.
   * - `end`: The content for the secondary (end) panel.
   * - `handle`: The draggable handle that separates the panels.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--divider-min-position`: Minimum position of the divider (as a percentage or pixel value). (default: `0%`)
   * - `--divider-max-position`: Maximum position of the divider (as a percentage or pixel value). (default: `100%`)
   * - `--divider-draggable-area`: The size of the divider's draggable area (can be larger than the visible area). (default: `1rem`)
   * - `--divider-width`: The width of the visual divider. (default: `0.125rem`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `start`: The content to show in the first (start) panel.
   * - `end`: The content to show in the second (end) panel.
   * - `divider`: The draggable divider that separates the panels.
   * - `handle`: The visual handle within the divider (only present when not using the `handle` slot).
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the splitter is disabled.
   * - `dragging`: Applied when the splitter is being dragged.
   * - `focused`: Applied when the splitter has focus.
   */
  "sigvelo-splitter": Partial<
    SigveloSplitterProps & BaseProps<SigveloSplitter> & BaseEvents
  >;

  /**
   * <sigvelo-switch>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The switch's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The switch's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `name`: The name of the switch. This will be submitted with the form as a name/value pair.
   * - `value`: The switch's value.
   * - `checked`: The switch's checked state.
   * - `disabled`: Disables the switch.
   * - `size`: The switch's size.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   * - `required`: Makes the switch required. Form submission will not be allowed until the switch is checked.
   * - `isInvalid`: undefined (property only)
   * - `hadUserInteraction`: undefined (property only)
   * - `wasSubmitted`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the switch loses focus. This event does not bubble.
   * - `sigvelo-change`: Emitted when the user commits changes to the switch's value.
   * - `sigvelo-focus`: Emitted when the switch receives focus. This event does not bubble.
   * - `sigvelo-input`: Emitted when the switch receives input.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The switch's label. For plain-text labels, you can use the `label` attribute instead.
   * - `description`: The switch's description. For plain-text descriptions, you can use the `description` attribute instead.
   * - `off-label`: The label to show when the switch is off.
   * - `on-label`: The label to show when the switch is on.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `focus() => void`: Sets focus to the switch.
   * - `blur() => void`: Removes focus from the switch.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The `<label>` that wraps the entire control.
   * - `description`: The element that contains the switch's description.
   * - `visual-box`: The element that wraps the internal switch.
   * - `switch`: The internal switch, an `<input type="checkbox" role="switch">` element.
   * - `thumb`: The switch's thumb.
   * - `on-label`: The container wrapping the `on-label`.
   * - `off-label`: The container wrapping the `off-label`.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the switch is disabled.
   * - `focused`: Applied when the switch has focus.
   * - `user-valid`: Applied when the switch is valid and the user has sufficiently interacted with it.
   * - `user-invalid`: Applied when the switch is invalid and the user has sufficiently interacted with it.
   */
  "sigvelo-switch": Partial<
    SigveloSwitchProps & BaseProps<SigveloSwitch> & BaseEvents
  >;

  /**
   * <sigvelo-tab>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `panel`: The name of the tab panel this tab will link to. The tab panel must be an HTML element inside the
   * `<sigvelo-tab-list>` element with a `name` attribute.
   * - `disabled`: Disables the tab, preventing it from being activated.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The tab's content. This is usually a short label, but sometimes includes an icon.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `active`: Applied when the tab is selected.
   * - `disabled`: Applied when the tab is selected.
   */
  "sigvelo-tab": Partial<SigveloTabProps & BaseProps<SigveloTab> & BaseEvents>;

  /**
   * <sigvelo-tab-panel>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `name`: The name of the tab panel. Used for assigning tabs to panels.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Content to show inside the tab panel.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `visible`: Applied when the tab panel is visible.
   */
  "sigvelo-tab-panel": Partial<
    SigveloTabPanelProps & BaseProps<SigveloTabPanel> & BaseEvents
  >;

  /**
   * <sigvelo-tab-list>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: An accessible label for the tab list. This won't be visible, but it will be read to assistive devices so you should
   * always include one.
   * - `tab`: The name of the tab panel that's currently active.
   * - `placement`: The placement of tab controls.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-tab-shown`: Emitted after a tab is shown. The event will include a `detail` object with `tab` and `panel`properties that reference the respective tab and panel elements.
   * - `sigvelo-tab-hidden`: Emitted after a tab is hidden. The event will include a `detail` object with `tab` and `panel` properties that reference the respective tab and panel elements.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: One or more `<sigvelo-tab-panel>` elements, each with a `name` attribute unique to the tab list.
   * - `tab`: One or more `<sigvelo-tab>` elements, each with a `panel` attribute linked to the `name` of a tab panel. Note that tabs will automatically apply this slot to themselves, so you can safely omit `slot="tab"` in your markup. Also useful for adding close buttons to tabs.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `tabs`: The container that holds all of the tabs, a `<sigvelo-scroller>` element.
   * - `tabs-content`: The scroller's `content` part.
   * - `panels`: The container that holds all of the tab panels.
   */
  "sigvelo-tab-list": Partial<
    SigveloTabListProps & BaseProps<SigveloTabList> & BaseEvents
  >;

  /**
   * <sigvelo-text-area>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The text area's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The text area's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `name`: The name of the text area. This will be submitted with the form as a name/value pair.
   * - `value`: The text area's value.
   * - `placeholder`: A placeholder to show in the text area when it's blank.
   * - `disabled`: Disables the text area.
   * - `readonly`: Makes the text area a read-only area.
   * - `resize`: Determines how the text area can be resized.
   * - `rows`: The default number of rows visible in the text area.
   * - `variant`: The type of text area to render.
   * - `size`: The text area's size.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   * - `required`: Makes the text area required. Form submission will not be allowed when this is set and the text area is blank.
   * - `minlength`/`minLength`: The minimum string length that will be considered valid.
   * - `maxlength`/`maxLength`: The maximum string length that will be considered valid.
   * - `autocapitalize`: Turns autocapitalize on or off in supported browsers.
   * - `autocomplete`: Tells the browser how to autocomplete the text area. See [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
   * for available values.
   * - `autocorrect`: Turns autocorrect on or off in supported browsers. Set to true or 'on' to enable, false or 'off' to disable.
   * - `autofocus`: Tells the browser to focus the text area when the page loads or a dialog is shown.
   * - `enterkeyhint`: Sets the enter key label on virtual keyboards.
   * - `inputmode`: Provides the browser with a hint about the type of data that might be entered by the user, allowing the appropriate
   * virtual keyboard to be displayed on supported devices.
   * - `spellcheck`: Turns spell checking on or off in supported browsers.
   * - `isInvalid`: undefined (property only)
   * - `hadUserInteraction`: undefined (property only)
   * - `wasSubmitted`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the text area loses focus. This event does not bubble.
   * - `sigvelo-change`: Emitted when the user commits changes to the text area's value.
   * - `sigvelo-focus`: Emitted when the text area receives focus. This event does not bubble.
   * - `sigvelo-input`: Emitted when the text area receives input.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `label`: The text area's label. For plain-text labels, you can use the `label` attribute instead.
   * - `description`: The text area's description. For plain-text descriptions, you can use the `description` attribute instead.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `focus() => void`: Sets focus to the text area.
   * - `blur() => void`: Removes focus from the text area.
   * - `select() => void`: Selects all text in the text area.
   * - `setSelectionRange(start: number, end: number, direction: "forward" | "backward" | "none" = "none") => void`: Sets the start and end positions of the current text selection in the text area.
   * - `setRangeText(replacement: string, start?: number, end?: number, selectMode?: "select" | "start" | "end" | "preserve") => void`: Replaces a range of text in the text area with a new string.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The element that contains the text area's label.
   * - `description`: The element that contains the text area's description.
   * - `visual-box`: The element that wraps the internal text box.
   * - `text-box`: The internal text box, a `<textarea>` element.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the text area is disabled.
   * - `blank`: Applied when the text area has a blank value.
   * - `focused`: Applied when the text area has focus.
   * - `user-valid`: Applied when the text area is valid and the user has sufficiently interacted with it.
   * - `user-invalid`: Applied when the text area is invalid and the user has sufficiently interacted with it.
   */
  "sigvelo-text-area": Partial<
    SigveloTextAreaProps & BaseProps<SigveloTextArea> & BaseEvents
  >;

  /**
   * <sigvelo-text-mask>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `image`: The URL of the image to use for the mask.
   * - `fixed`: Creates a parallax-like effect where the image stays fixed while scrolling
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The text to be masked.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--brightness`: Adjusts the brightness of the mask image (0-200%, where 100% is normal) (default: `undefined`)
   * - `--contrast`: Adjusts the contrast of the mask image (0-200%, where 100% is normal) (default: `undefined`)
   * - `--grayscale`: Converts the mask to grayscale (0-100%, where 0% is normal and 100% is fully grayscale) (default: `undefined`)
   * - `--hue-rotate`: Rotates the hue of the mask (0-360deg) (default: `undefined`)
   */
  "sigvelo-text-mask": Partial<
    SigveloTextMaskProps & BaseProps<SigveloTextMask> & BaseEvents
  >;

  /**
   * <sigvelo-timed-content>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `start-date`/`startDate`: The date to start showing the content.
   * - `end-date`/`endDate`: The date to stop showing the content.
   * - `live`: When set, the content will update as the time changes.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot.
   * - `before`: Optional content that shows before the specified date/time.
   * - `after`: Optional content that shows after the specified date/time.
   */
  "sigvelo-timed-content": Partial<
    SigveloTimedContentProps & BaseProps<SigveloTimedContent> & BaseEvents
  >;

  /**
   * <sigvelo-toast-item>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `color`: The type of notification to render.
   * - `duration`: The length of time to show the notification before removing it. Set this to `0` to show the notification until the
   * user dismisses it.
   * - `without-close`/`withoutClose`: When set, the close button will be omitted.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-before-close`: Emitted when the toast item is dismissed.
   * - `sigvelo-close`: Emitted after the toast has been dismissed and the hide animation has completed.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Content to show in the toast item.
   * - `icon`: Content to show as a visual. Usually an icon, image, avatar, etc.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--accent-line-width`: The width of the notification's accent line. (default: `0.33em`)
   * - `--progress`: A readonly value that goes from 100% to 0%, representing the progress remaining until the notification closes. Useful for creating custom content with visual indicators of the notification's progress. (default: `undefined`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `icon`: undefined
   * - `content`: undefined
   * - `close-button`: The close button, a `<button>` element.
   * - `progress`: The progress ring, a `<sigvelo-progress>` element.
   * - `progress__track`: The progress ring's exported `track` part.
   * - `progress__indicator`: The progress ring's exported `indicator` part.
   * - `progress__content`: The progress ring's exported `content` part.
   * - `close-icon`: The close icon, a `<sigvelo-icon>` element.
   * - `close-icon__svg`: The close icons exported `svg` part.
   */
  "sigvelo-toast-item": Partial<
    SigveloToastItemProps & BaseProps<SigveloToastItem> & BaseEvents
  >;

  /**
   * <sigvelo-transition-group>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `disable-transitions`/`disableTransitions`: Disables transition animations. However, the `sigvelo-content-changed` and `sigvelo-transition-end` events will still
   * be dispatched.
   * - `ignore-reduced-motion`/`ignoreReducedMotion`: By default, no animation will occur when the user indicates a preference for reduced motion. Use this attribute to
   * override this behavior when necessary.
   * - `isTransitioning`: Determines if the transition group is currently animating. (Property only) (property only)
   * - `transitionAnimation`: A custom enter/exit animation conforming to the `TransitionAnimation` interface.
   * (Property only) (property only)
   * - `transitionContainer`: By default, the transition group observes and animates its own children. In some cases, you may want it to control
   * another element's children. This is useful in cases where you can't directly wrap child elements with the
   * `<sigvelo-transition-group>` element.
   *
   * For example, if you embed a transition group in a component's shadow root but need it to control slotted (light
   * DOM) elements, you can't simply wrap the slot because the mutation observer can't see projected (slotted) elements.
   * In this case, point this property to the target element and the transition group will hide itself and observe the
   * target container's children instead. (Property only) (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-content-changed`: Emitted when content changes and before the transition animation begins.
   * - `sigvelo-transition-end`: Emitted when transition animations end.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: One or more elements to transition when adding, removing, and reordering the DOM.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `transitionComplete() => void`: Returns a promise that resolves when the current transition ends. If no transition is running, it resolves
   * immediately  This is a great way to ensure transitions have stopped before doing something else, such as adding or
   * removing new elements to the transition group.
   * - `updateElementPositions() => void`: Updates the cached coordinates of all child elements in the transition group. In most cases, you shouldn't have to
   * call this method. However, if you're resizing or animating elements imperatively, you may need to call this
   * immediately before appending or removing elements to ensure a smooth transition.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--duration`: The duration of each individual step (not the total transition time). (default: `0.25s`)
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `transitioning`: Applied when a transition is active.
   */
  "sigvelo-transition-group": Partial<
    SigveloTransitionGroupProps & BaseProps<SigveloTransitionGroup> & BaseEvents
  >;

  /**
   * <sigvelo-toast>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `placement`: The placement of the toast stack on the screen.
   * - `stack`: undefined (property only)
   * - `transitionGroup`: undefined (property only)
   * - `transitionAnimation`: A custom enter/exit animation passed through to the internal transition group.
   * (Property only) (property only)
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `create(content: string, options?: Partial<CreateOptions>) => void`: Creates a toast notification and adds it to the stack. Returns a reference to the created toast item.
   * - `createFromTemplate(template: HTMLTemplateElement) => void`: Creates a toast notification using an existing `<sigvelo-toast-item>` element. Useful if you want to create your own
   * toast items declaratively. Returns a reference to the cloned toast item.
   * - `empty() => void`: Removes all elements from the toast stack and turns when the remove transition finishes.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `visible`: Applied when the toast stack is visible.
   */
  "sigvelo-toast": Partial<
    SigveloToastProps & BaseProps<SigveloToast> & BaseEvents
  >;

  /**
   * <sigvelo-toggle-icon>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The toggle icon's label. The label won't be displayed, but it will be announced by assistive devices.
   * - `name`: The name of the toggle icon. This will be submitted with the form as a name/value pair.
   * - `value`: The toggle icon's value.
   * - `checked`: The toggle icon's checked state.
   * - `disabled`: Disables the toggle icon.
   * - `size`: The checkbox's size.
   * - `effect`: The animation to use when toggling.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   * - `required`: Makes the toggle icon required. Form submission will not be allowed until the toggle icon is checked.
   * - `button`: undefined (property only)
   * - `isInvalid`: undefined (property only)
   * - `hadUserInteraction`: undefined (property only)
   * - `wasSubmitted`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the toggle icon loses focus. This event does not bubble.
   * - `sigvelo-change`: Emitted when the user commits changes to the toggle's value.
   * - `sigvelo-focus`: Emitted when the checkbox receives focus. This event does not bubble.
   * - `sigvelo-input`: Emitted when the checkbox receives input.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `checked`: The icon to show when checked. Works best with a `<sigvelo-icon>` element.
   * - `unchecked`: The default icon to show when unchecked. Works best with a `<sigvelo-icon>` element.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--animation-speed`: The animation speed to use when effects are selected. (default: `300ms`)
   * - `--checked-color`: The color to use for checked toggle icons. (default: `#f59e0b`)
   * - `--unchecked-color`: The color to use for unchecked toggle icons. (default: `var(--sigvelo-color-neutral-bg)`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `button`: The internal button that contains the toggle icons, a `<button>` element.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `checked`: Applied when the toggle icon is active.
   * - `disabled`: Applied when the toggle icon is disabled.
   * - `focused`: Applied when the toggle icon has focus.
   * - `user-valid`: Applied when the toggle icon is valid and the user has sufficiently interacted with it.
   * - `user-invalid`: Applied when the toggle icon is invalid and the user has sufficiently interacted with it.
   */
  "sigvelo-toggle-icon": Partial<
    SigveloToggleIconProps & BaseProps<SigveloToggleIcon> & BaseEvents
  >;

  /**
   * <sigvelo-toggle-tag>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The toggle tag's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `name`: The name of the toggle tag. This will be submitted with the form as a name/value pair.
   * - `value`: The toggle tag's value.
   * - `checked`: The toggle tag's checked state.
   * - `disabled`: Disables the toggle tag.
   * - `size`: The toggle tag's size.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   * - `required`: Makes the toggle tag required. Form submission will not be allowed until the toggle tag is checked.
   * - `isInvalid`: undefined (property only)
   * - `hadUserInteraction`: undefined (property only)
   * - `wasSubmitted`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the toggle tag loses focus. This event does not bubble.
   * - `sigvelo-change`: Emitted when the user commits changes to the toggle tag's value.
   * - `sigvelo-focus`: Emitted when the toggle tag receives focus. This event does not bubble.
   * - `sigvelo-input`: Emitted when the toggle tag receives input.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The toggle tag's label. For plain-text labels, you can use the `label` attribute instead.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `focus() => void`: Sets focus to the toggle tag.
   * - `blur() => void`: Removes focus from the toggle tag.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The `<label>` that wraps the entire control.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `checked`: Applied when the toggle tag is checked.
   * - `disabled`: Applied when the toggle tag is disabled.
   * - `focused`: Applied when the toggle tag has focus.
   * - `user-valid`: Applied when the toggle tag is valid and the user has sufficiently interacted with it.
   * - `user-invalid`: Applied when the toggle tag is invalid and the user has sufficiently interacted with it.
   */
  "sigvelo-toggle-tag": Partial<
    SigveloToggleTagProps & BaseProps<SigveloToggleTag> & BaseEvents
  >;

  /**
   * <sigvelo-toolbar>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `orientation`: The toolbar's orientation. This changes which arrow keys are used to select adjacent buttons.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: A mixture of buttons and/or button groups.
   */
  "sigvelo-toolbar": Partial<
    SigveloToolbarProps & BaseProps<SigveloToolbar> & BaseEvents
  >;

  /**
   * <sigvelo-zoomable-frame>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `src`: The URL of the content to display.
   * - `srcdoc`: Inline HTML to display.
   * - `label`: Accessible label for the embedded document.
   * - `allowfullscreen`: Allows fullscreen mode.
   * - `loading`: Controls iframe loading behavior.
   * - `referrerpolicy`: Controls referrer information.
   * - `sandbox`: Security restrictions for the iframe.
   * - `zoom`: The current zoom of the frame, e.g. 0 = 0% and 1 = 100%.
   * - `zoom-levels`/`zoomLevels`: The zoom levels to step through when using zoom controls. This does not restrict programmatic changes to the zoom.
   * - `without-controls`/`withoutControls`: Removes the zoom controls.
   * - `without-interaction`/`withoutInteraction`: Disables interaction when present.
   * - `iframe`: undefined (property only)
   * - `contentWindow`: Returns the internal iframe's `window` object. (Readonly property) (property only) (readonly)
   * - `contentDocument`: Returns the internal iframe's `document` object. (Readonly property) (property only) (readonly)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `load`: Emitted when the internal iframe when it finishes loading.
   * - `error`: Emitted from the internal iframe when it fails to load.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `zoom-in-icon`: The slot that contains the zoom in icon.
   * - `zoom-out-icon`: The slot that contains the zoom out icon.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `zoomIn() => void`: Zooms in to the next available zoom level.
   * - `zoomOut() => void`: Zooms out to the previous available zoom level.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--aspect-ratio`: The aspect ratio of the frame. (default: `16/9`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `iframe`: The internal `<iframe>` element.
   * - `controls`: The container that surrounds zoom control buttons.
   * - `zoom-in-button`: The zoom in button.
   * - `zoom-out-button`: The zoom out button.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `loading`: Applied when the iframe is loading.
   * - `error`: Applied when the iframe failed to load.
   */
  "sigvelo-zoomable-frame": Partial<
    SigveloZoomableFrameProps & BaseProps<SigveloZoomableFrame> & BaseEvents
  >;
};

export type CustomElementsSolidJs = {
  /**
   * <sigvelo-icon>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `library`: The name of the icon library to use.
   * - `family`: The icon family to use for this icon, e.g. `filled` or `outline`.
   * - `name`: The name of the icon to render.
   * - `label`: A label to use for assistive devices. If omitted, the icon will be considered presentational.
   * - `flip-x`/`flipX`: Flips the icon horizontally.
   * - `flip-y`/`flipY`: Flips the icon vertically.
   * - `rotate`: Rotates the icon the specified number of degrees.
   * - `svg`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-loaded`: The icon has reloaded and rendered. This event does not bubble.
   * - `sigvelo-load-error`: The icon failed to load. This event does not bubble.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `load() => void`: Loads or reloads and draws the icon.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `svg`: The internal SVG element.
   */
  "sigvelo-icon": Partial<
    SigveloIconProps &
      SigveloIconSolidJsProps &
      BaseProps<SigveloIcon> &
      BaseEvents
  >;

  /**
   * <sigvelo-accordion-item>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `expanded`: undefined
   * - `label`: The accordion item's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `variant`: The accordion item's variant. This will be set automatically by the accordion controller.
   * - `icon-placement`/`iconPlacement`: The position of the expand/collapse icon. This will be set automatically by the accordion controller.
   * - `disabled`: Disables the accordion item.
   * - `body`: undefined (property only)
   * - `content`: undefined (property only)
   * - `header`: undefined (property only)
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The content to show when expanded.
   * - `icon`: The expand/collapse icon.
   * - `label`: The accordion item's label. For plain-text labels, you can use the `label` attribute instead.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `focus() => void`: Sets focus to the accordion item.
   * - `blur() => void`: Removes focus from the accordion item.
   * - `animateExpand() => void`: Animate the expansion of the body - called by the accordion controller
   * - `animateCollapse() => void`: Animate the collapse of the body - called by the accordion controller
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `header`: The accordion item's header that contains the label and icon.
   * - `label`: The label container.
   * - `icon`: The icon container.
   * - `body`: The accordion item's body that contains the content.
   * - `content`: The content wrapper inside the body.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applies when the accordion item is disabled.
   * - `expanded`: Applies when the accordion item is expanded.
   */
  "sigvelo-accordion-item": Partial<
    SigveloAccordionItemProps &
      SigveloAccordionItemSolidJsProps &
      BaseProps<SigveloAccordionItem> &
      BaseEvents
  >;

  /**
   * <sigvelo-accordion>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `multiple`: Allows more than one accordion item to be expanded at the same time.
   * - `variant`: Determines the accordion's variant.
   * - `icon-placement`/`iconPlacement`: Determines which side of the accordion item the expand/collapse icon shows.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-before-expand`: Emitted when an accordion item is instructed to expand but before it is shown. Calling `event.preventDefault()` will prevent the item from expanding. `event.detail.item` will contain the expanding item.
   * - `sigvelo-expand`: Emitted after an accordion item has been expanded. `event.detail.item` will contain the expanded item.
   * - `sigvelo-before-collapse`: Emitted when an accordion item is instructed to collapse but before it is hidden. Calling `event.preventDefault()` will prevent the item from collapsing. `event.detail.item` will contain the collapsing item.
   * - `sigvelo-collapse`: Emitted after an accordion item has been collapsed. `event.detail.item` will contain the collapsed item.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: One or more `<sigvelo-accordion-item>` elements to place in the accordion.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--duration`: The expand and collapse duration. (default: `200ms`)
   * - `--easing`: The expand and collapse easing. (default: `ease`)
   * - `--sigvelo-accordion-border-color`: The accordion's border color. (default: `var(--sigvelo-color-neutral-border-subtle)`)
   * - `--border-width`: The accordion's border width. (default: `var(--sigvelo-border-width)`)
   * - `--border-style`: The accordion's border style. (default: `var(--sigvelo-border-style)`)
   * - `--border-radius`: The border radius to apply to rounded edges. (default: `var(--sigvelo-radius-md)`)
   */
  "sigvelo-accordion": Partial<
    SigveloAccordionProps &
      SigveloAccordionSolidJsProps &
      BaseProps<SigveloAccordion> &
      BaseEvents
  >;

  /**
   * <sigvelo-action-bar>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `align`: Alignment of the slotted content.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Status, buttons, or other compact action controls.
   */
  "sigvelo-action-bar": Partial<
    SigveloActionBarProps &
      SigveloActionBarSolidJsProps &
      BaseProps<SigveloActionBar> &
      BaseEvents
  >;

  /**
   * <sigvelo-dialog>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `open`: Opens or closes the dialog.
   * - `label`: An accessible name used when no visible heading is provided in the `header` slot.
   * - `description`: A concise description of the dialog. For rich content, use the `description` slot.
   * - `placement`: By default, the dialog will appear in the center of the screen. Changing the placement will cause the dialog to
   * slide in from the side of the screen like a drawer.
   * - `light-dismiss`/`lightDismiss`: Allows the dialog to be closed when clicking outside of it.
   * - `reset-scroll`/`resetScroll`: For dialogs that scroll, this will reset the scroll position when the dialog closes.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-before-open`: Emitted when the dialog is instructed to open but before it is shown. Calling `event.preventDefault()` will prevent the dialog from opening.
   * - `sigvelo-open`: Emitted after the dialog has been opened and the show animation has completed.
   * - `sigvelo-before-close`: Emitted when the dialog is dismissed. Calling `event.preventDefault()` will prevent the dialog from closing and show a brief animation.<br><br>You can check `event.detail.source` to see which element triggered the dialog to close, such as a button. If the source is the dialog itself, the user has pressed [[Escape]] or the dialog has been closed programmatically.
   * - `sigvelo-close`: Emitted after the dialog has been closed and the hide animation has completed.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Content to place in the dialog's body. Note that, due to [this Chrome bug](https://issues.chromium.org/issues/40800208), you should wrap text nodes in an element to allow text selection in that browser.
   * - `header`: Content to place in the dialog's header.
   * - `description`: A concise description of the dialog's purpose, associated with the dialog for assistive technology.
   * - `actions`: Slot in one or more text buttons to customize the actions that appear in the dialog's header. Only available when the header is enabled.
   * - `footer`: Content to place in the dialog's footer.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `scrollBodyTo(options: ScrollToOptions) => void`: Scrolls the dialog's body to the specified position.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--height`: The default height of the dialog. Note that dialogs shrink to fit as necessary. (default: `fit-content`)
   * - `--show-duration`: The duration of the show/hide animation. (default: `200ms`)
   * - `--spacing`: The spacing to use throughout the dialog. (default: `1.5rem`)
   * - `--width`: The default width of the dialog. Note that dialogs shrink to fit as necessary. (default: `30rem`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `dialog`: The internal `<dialog>` element.
   * - `body`: The container that wraps the dialog's body.
   * - `header`: The container that wraps the dialog's header. A flex container, by default.
   * - `footer`: The container that wraps the dialog's footer. A flex container, by default.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `open`: Applied when the dialog is open.
   */
  "sigvelo-dialog": Partial<
    SigveloDialogProps &
      SigveloDialogSolidJsProps &
      BaseProps<SigveloDialog> &
      BaseEvents
  >;

  /**
   * <sigvelo-alert-dialog>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `open`: Opens or closes the alert dialog.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-cancel`: Emitted when the cancel action is triggered.
   * - `sigvelo-confirm`: Emitted when the confirm action is triggered.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The alert description/body content.
   * - `header`: Content for the dialog header (typically a title).
   * - `cancel`: The cancel action button.
   * - `confirm`: The confirm action button.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `open`: Applied when the alert dialog is open.
   */
  "sigvelo-alert-dialog": Partial<
    SigveloAlertDialogProps &
      SigveloAlertDialogSolidJsProps &
      BaseProps<SigveloAlertDialog> &
      BaseEvents
  >;

  /**
   * <sigvelo-avatar>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: An accessible label for the avatar. This won't be visible, but it will be read to assistive devices so you should
   * always include one.
   * - `characters`: A string of characters to display in the avatar when an image isn't available or fails to load. Up to five
   * characters are supported.
   * - `image`: The URL of an image to display in the avatar. Non-square images will be clipped to fit.
   * - `hasImageLoaded`: undefined (property only)
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `icon`: A custom icon to use instead of the default. Will not be shown when an image or initials are present. For best results, use a `<sigvelo-icon>` or an `<svg>` element.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--size`: The size of the avatar to draw. (default: `3rem`)
   */
  "sigvelo-avatar": Partial<
    SigveloAvatarProps &
      SigveloAvatarSolidJsProps &
      BaseProps<SigveloAvatar> &
      BaseEvents
  >;

  /**
   * <sigvelo-badge>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `color`: The type of badge to draw.
   * - `variant`: Determines the badges's variant.
   * - `attention`: Draws attention to the badge using an animation.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The badge's content.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--attention-duration`: The speed at which the attention animation will run. (default: `1.5s`)
   * - `--attention-easing`: The easing to use for the attention animation. (default: `ease`)
   */
  "sigvelo-badge": Partial<
    SigveloBadgeProps &
      SigveloBadgeSolidJsProps &
      BaseProps<SigveloBadge> &
      BaseEvents
  >;

  /**
   * <sigvelo-breadcrumb>
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot containing one or more breadcrumb items.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--item-spacing`: The amount of spacing to use between breadcrumb items. (default: `0.5em`)
   */
  "sigvelo-breadcrumb": Partial<
    SigveloBreadcrumbProps &
      SigveloBreadcrumbSolidJsProps &
      BaseProps<SigveloBreadcrumb> &
      BaseEvents
  >;

  /**
   * <sigvelo-breadcrumb-item>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `current`: Indicates that this item is the current page or view.
   * - `href`: The URL the breadcrumb item should point to. If omitted, the breadcrumb item will be drawn as a `<span>` instead of
   * a link, enabling alternate content such as dropdowns.
   * - `target`: Opens the link in the specified target.
   * - `rel`: Sets the link's `rel` attribute. Note that the default value is `noreferrer noopener`, meaning you might need to
   * set it to an empty string if you're also using `target`.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot.
   * - `start`: An icon or similar element to place before the breadcrumb item. Works great with `<sigvelo-icon>`.
   * - `end`: An icon or similar element to place after the breadcrumb item. Works great with `<sigvelo-icon>`.
   * - `separator`: A custom separator to show instead of the default. Works great with `<sigvelo-icon>`.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The breadcrumb's label, an `<a>` element if `href` is set or a `<span>` element otherwise.
   * - `separator`: The container that wraps the breadcrumb's separator, a `span` element.
   */
  "sigvelo-breadcrumb-item": Partial<
    SigveloBreadcrumbItemProps &
      SigveloBreadcrumbItemSolidJsProps &
      BaseProps<SigveloBreadcrumbItem> &
      BaseEvents
  >;

  /**
   * <sigvelo-spinner>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: A custom label for screen readers.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: A custom spinner to show in lieu of the default one. Works best with `<img>` and `<svg>` elements. Custom spinners will not be animated, allowing you to use animated GIF, APNG, and SVG animations without conflict.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--indicator-color`: The color of the spinner's indicator. (default: `var(--sigvelo-color-primary-bg)`)
   * - `--track-color`: The color of the spinner's track. (default: `color-mix(in oklab, var(--sigvelo-color-neutral-bg), transparent 75%)`)
   * - `--speed`: The speed for one complete rotation. (default: `0.75s`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `track`: the spinner's track, a `<circle>` SVG element.
   * - `indicator`: the spinner's indicator, a `<circle>` SVG element.
   */
  "sigvelo-spinner": Partial<
    SigveloSpinnerProps &
      SigveloSpinnerSolidJsProps &
      BaseProps<SigveloSpinner> &
      BaseEvents
  >;

  /**
   * <sigvelo-button>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `variant`: Determines the button's variant.
   * - `color`: The semantic color intent of the button.
   * - `disabled`: Disables the button.
   * - `loading`: Draws the button in a loading state.
   * - `toggle`: Turns the button into a two-state toggle button. Clicking once will turn it on. Clicking again will turn it off.
   * Cannot be used with links buttons or submit buttons.
   * - `size`: The button's size.
   * - `icon-label`/`iconLabel`: To create an icon button, slot an icon into the button's default slot and set this attribute to an appropriate
   * label. The label won't be visible, but it will be available to assistive devices.
   * - `pill`: Draws the button in a pill shape.
   * - `type`: Determines the button's type.
   * - `name`: The name to submit when the button is used to submit the form.
   * - `value`: The value to submit when the button is used to submit the form.
   * - `with-caret`/`withCaret`: When true, the button will be rendered with a caret to indicate a dropdown menu.
   * - `href`: Set this to render the button as an `<a>` tag instead of a `<button>`. The button will act as a link. When this is
   * set, form attributes and features will not work.
   * - `target`: Opens the link in the specified target. Only works with link buttons.
   * - `rel`: Sets the link's `rel` attribute. Only works with link buttons. When linking to an external domain, you should
   * probably set this to `noreferrer noopener`.
   * - `download`: Sets the link's `download` attribute, causing the linked file to be downloaded. Only works with link buttons.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   * - `formaction`/`formAction`: Overrides the containing form's `action` attribute.
   * - `formenctype`/`formEnctype`: Overrides the containing form's `enctype` attribute.
   * - `formmethod`/`formMethod`: Overrides the containing form's `method` attribute.
   * - `formnovalidate`/`formNoValidate`: Overrides the containing form's `novalidate` attribute.
   * - `formtarget`/`formTarget`: Overrides the containing form's `target` attribute.
   *
   * `string & {}` keeps the four browsing-context keywords in autocomplete
   * while still accepting an arbitrary frame name; a bare `| string` would
   * absorb the literals and offer no suggestions at all.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the button loses focus. This event does not bubble.
   * - `sigvelo-long-press`: Emitted when the button is pressed and held by tapping or with the mouse. You can look at `event.detail.originalEvent.type` to see the type of event that initiated the long press.
   * - `sigvelo-focus`: Emitted when the button receives focus. This event does not bubble.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The button's label.
   * - `start`: An icon or similar element to place before the label. Works great with `<sigvelo-icon>`.
   * - `end`: An icon or similar element to place after the label. Works great with `<sigvelo-icon>`.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `formDisabledCallback() => void`: undefined
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `button`: The internal `<button>` element. Other than `width`, this is where most custom styles should be applied.
   * - `caret`: The caret icon, a `<sigvelo-icon>` element. Only present with the `with-caret` attribute.
   * - `caret__svg`: The caret icon's `<svg>` part.
   * - `spinner`: The loading indicator, a `<sigvelo-spinner>` element. Only present with the `loading` attribute.
   * - `toggle-indicator`: When the button is a toggle button, this is the indicator that shows the current state.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the button is disabled.
   * - `focused`: Applied when the button has focus.
   * - `loading`: Applied when a toggle button is loading.
   * - `toggled`: Applied when a toggle button is activated.
   */
  "sigvelo-button": Partial<
    SigveloButtonProps &
      SigveloButtonSolidJsProps &
      BaseProps<SigveloButton> &
      BaseEvents
  >;

  /**
   * <sigvelo-button-group>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: An accessible label for the tab list. This won't be visible, but it will be read to assistive devices so it's
   * usually a good idea to include one.
   * - `orientation`: The button group's orientation.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: One or more `<sigvelo-button>` elements to place in the button group.
   */
  "sigvelo-button-group": Partial<
    SigveloButtonGroupProps &
      SigveloButtonGroupSolidJsProps &
      BaseProps<SigveloButtonGroup> &
      BaseEvents
  >;

  /**
   * <sigvelo-callout>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `color`: The type of callout to render.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Content to show in the callout.
   * - `icon`: An optional icon to show in the callout. Works well with `<sigvelo-icon>` and `<svg>` elements.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `icon`: The container the wraps the icon.
   * - `body`: The container that wraps the callout's content.
   */
  "sigvelo-callout": Partial<
    SigveloCalloutProps &
      SigveloCalloutSolidJsProps &
      BaseProps<SigveloCallout> &
      BaseEvents
  >;

  /**
   * <sigvelo-card>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `variant`: Determines the card's variant.
   * - `orientation`: The card's orientation.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Content to place in the dialog's body.
   * - `header`: Content to place in the dialog's header.
   * - `actions`: Slot in one or more text buttons to add actions to the card's header (vertical) or footer (horizontal). Only available when the respective header/footer is enabled.
   * - `footer`: Content to place in the dialog's footer.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--spacing`: The spacing to use throughout the card. (default: `1.5rem`)
   * - `--border-width`: The width of the card's border, including interior borders. (default: `undefined`)
   * - `--border-style`: The style of the card's border. (default: `undefined`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `body`: The container that wraps the card's body.
   * - `header`: The container that wraps the card's header. A flex container, by default.
   * - `footer`: The container that wraps the card's footer. A flex container, by default.
   * - `media`: The container that wraps the card's media.
   */
  "sigvelo-card": Partial<
    SigveloCardProps &
      SigveloCardSolidJsProps &
      BaseProps<SigveloCard> &
      BaseEvents
  >;

  /**
   * <sigvelo-carousel-item>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `name`: An optional name for the carousel item so you can reference it with the `active-name` attribute.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The content to show inside the carousel item.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `content`: A flex wrapper around the carousel item's content.
   */
  "sigvelo-carousel-item": Partial<
    SigveloCarouselItemProps &
      SigveloCarouselItemSolidJsProps &
      BaseProps<SigveloCarouselItem> &
      BaseEvents
  >;

  /**
   * <sigvelo-carousel>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: A custom label for the carousel. This won't be visible, but it will be read to assistive devices.
   * - `active-index`/`activeIndex`: The current active item's index.
   * - `active-name`/`activeName`: The current active item's name.
   * - `loop`: Enables looping navigation. When true, prev/next buttons wrap around to the opposite end.
   * - `without-nav`/`withoutNav`: Hides navigation buttons.
   * - `without-pagination`/`withoutPagination`: Hides pagination dots.
   * - `items`: undefined (property only)
   * - `isScrolling`: undefined (property only)
   * - `itemCount`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-item-change`: Emitted when the active item changes and the slide has been fully scrolled into view.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot for carousel items.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `scrollToIndex(index: number, scrollBehavior: ScrollBehavior = "smooth") => void`: Navigate to the specified item.
   * - `scrollToNext(scrollBehavior: ScrollBehavior = "smooth") => void`: Navigate to the next item
   * - `scrollToPrevious(scrollBehavior: ScrollBehavior = "smooth") => void`: Navigate to the previous item
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--aspect-ratio`: The aspect ratio of the carousel. By default, carousels render 100% wide, so this helps retain proportions across various devices. Gets applied to the `items` part. (default: `16/9`)
   * - `--item-gap`: The gap between items in the carousel. (default: `2rem`)
   * - `--dot-size`: The size of each pagination dot. (default: `0.875em`)
   * - `--dot-gap`: The size of the gap between pagination dots. (default: `0.5em`)
   * - `--dot-color`: The color of inactive pagination dots. (default: `var(--sigvelo-color-neutral-bg-muted)`)
   * - `--dot-active-color`: The color of active pagination dots. (default: `var(--sigvelo-color-neutral-bg-strong)`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `items`: The scrollable container that holds the carousel items.
   * - `controls`: The container that surrounds nav buttons and pagination.
   * - `previous-button`: The previous button.
   * - `next-button`: The next button.
   * - `pagination`: The container for the pagination dots.
   * - `pagination-dot`: Each individual pagination dot.
   * - `pagination-dot-active`: The active pagination dot.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `scrolling`: Applied when the carousel is scrolling.
   */
  "sigvelo-carousel": Partial<
    SigveloCarouselProps &
      SigveloCarouselSolidJsProps &
      BaseProps<SigveloCarousel> &
      BaseEvents
  >;

  /**
   * <sigvelo-checkbox>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The checkbox's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The checkbox's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `name`: The name of the checkbox. This will be submitted with the form as a name/value pair.
   * - `value`: The checkbox's value.
   * - `checked`: The checkbox's checked state.
   * - `indeterminate`: Puts the checkbox in an indeterminate state.
   * - `disabled`: Disables the checkbox.
   * - `variant`: The type of checkbox to render.
   * - `size`: The checkbox's size.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   * - `required`: Makes the checkbox required. Form submission will not be allowed until the checkbox is checked.
   * - `isInvalid`: undefined (property only)
   * - `hadUserInteraction`: undefined (property only)
   * - `wasSubmitted`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the checkbox loses focus. This event does not bubble.
   * - `sigvelo-change`: Emitted when the user commits changes to the checkbox's value.
   * - `sigvelo-focus`: Emitted when the checkbox receives focus. This event does not bubble.
   * - `sigvelo-input`: Emitted when the checkbox receives input.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The checkbox's label. For plain-text labels, you can use the `label` attribute instead.
   * - `description`: The checkbox's description. For plain-text descriptions, you can use the `description` attribute instead.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `focus() => void`: Sets focus to the checkbox.
   * - `blur() => void`: Removes focus from the checkbox.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The `<label>` that wraps the entire control.
   * - `description`: The element that contains the checkbox's description.
   * - `visual-box`: The element that wraps the internal checkbox.
   * - `check-icon`: The check icon, a `<sigvelo-icon>` element.
   * - `check-icon__svg`: The check icon's `svg` part.
   * - `indeterminate-icon`: The indeterminate icon, a `<sigvelo-icon>` element.
   * - `indeterminate-icon__svg`: The indeterminate icon's `<svg>` part.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `checked`: Applied when the checkbox is checked.
   * - `disabled`: Applied when the checkbox is disabled.
   * - `focused`: Applied when the checkbox has focus.
   * - `user-valid`: Applied when the checkbox is valid and the user has sufficiently interacted with it.
   * - `user-invalid`: Applied when the checkbox is invalid and the user has sufficiently interacted with it.
   */
  "sigvelo-checkbox": Partial<
    SigveloCheckboxProps &
      SigveloCheckboxSolidJsProps &
      BaseProps<SigveloCheckbox> &
      BaseEvents
  >;

  /**
   * <sigvelo-checkbox-group>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The checkbox's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The checkbox's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `orientation`: The orientation of grouped items.
   * - `required`: Indicates at least one option in the checkbox group is required. This just adds a visual indicator. To perform
   * validation, use the checkbox's `required` attribute and/or `setCustomValidity()` method.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The checkboxes to place in the group.
   * - `label`: The checkbox's label. For plain-text labels, you can use the `label` attribute instead.
   * - `description`: The checkbox's description. For plain-text descriptions, you can use the `description` attribute instead.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--gap`: The gap between checkboxes. (default: `1em`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The element that contains the checkbox group's label.
   * - `description`: The element that contains the checkbox group's description.
   * - `group`: The element that wraps the grouped checkboxes.
   */
  "sigvelo-checkbox-group": Partial<
    SigveloCheckboxGroupProps &
      SigveloCheckboxGroupSolidJsProps &
      BaseProps<SigveloCheckboxGroup> &
      BaseEvents
  >;

  /**
   * <sigvelo-copy>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `data`: The text content that will be copied to the clipboard.
   * - `disabled`: Disables the button.
   * - `feedback-placement`/`feedbackPlacement`: The placement of the feedback animation.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-copy`: Emitted when the content has been copied. This event does not bubble. You can inspect `event.detail.data` to see the content that was copied.
   * - `sigvelo-copy-error`: Emitted when the browser refuses to allow the content to be copied. This event does not bubble. You can inspect `event.detail.error` to see the error that occurred.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: A custom button to use instead of the default.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `copy-button`: The default copy button, a `<sigvelo-button>` element.
   * - `copy-button__button`: The default copy button's `button` part.
   * - `copy-icon`: The default copy icon, a `<sigvelo-icon>` element.
   * - `copy-icon__svg`: The copy icon's `svg` part.
   * - `feedback`: The feedback that shows when copying.
   */
  "sigvelo-copy": Partial<
    SigveloCopyProps &
      SigveloCopySolidJsProps &
      BaseProps<SigveloCopy> &
      BaseEvents
  >;

  /**
   * <sigvelo-tooltip>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `for`: The ID of the tooltip's anchor element. This must be an interactive/focusable element such as a button and it must
   * be in the same document as the tooltip.
   * - `open`: Shows or hides the tooltip.
   * - `placement`: The placement of the tooltip in reference to the anchor. The menu will shift to a more optimal location if the
   * preferred placement doesn't have enough room.
   * - `distance`: The distance of the tooltip from its anchor.
   * - `offset`: The offset of the tooltip along its trigger.
   * - `open-delay`/`openDelay`: The number of milliseconds to wait before opening the tooltip when hovering in.
   * - `close-delay`/`closeDelay`: The number of milliseconds to wait before closing the tooltip when hovering out.
   * - `activation`: By default, the tooltip automatically shows when the user focuses or hovers over the anchor. If you want to control
   * the tooltip programmatically, set this to `manual`.
   * - `without-arrow`/`withoutArrow`: Renders the tooltip without an arrow.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-before-open`: Emitted when the tooltip is instructed to open but before it is shown.
   * - `sigvelo-open`: Emitted when the tooltip has opened and the animation has completed.
   * - `sigvelo-before-close`: Emitted when the tooltip is dismissed but before it is hidden.
   * - `sigvelo-close`: Emitted when the tooltip has closed. and the animation has completed.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The tooltip's content. Do not include interactive elements such as button, links, etc. as they won't be accessible to users inside the tooltip.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--arrow-size`: The size of the arrow. To hide the arrow, use the `without-arrow` attribute. (default: `0.3125rem`)
   * - `--max-width`: The maximum width the tooltip can be before wrapping. (default: `20rem`)
   * - `--show-duration`: The duration of the show/hide animation. (default: `100ms`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `tooltip`: The element that powers the tooltip.
   * - `content`: The element that wraps the tooltip's content.
   * - `arrow`: The tooltip's arrow. To change the arrow's size, use `--arrow-size` instead.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `open`: Applied when the tooltip is open.
   */
  "sigvelo-tooltip": Partial<
    SigveloTooltipProps &
      SigveloTooltipSolidJsProps &
      BaseProps<SigveloTooltip> &
      BaseEvents
  >;

  /**
   * <sigvelo-slider>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The slider's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The slider's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `name`: The name of the slider. This will be submitted with the form as a name/value pair.
   * - `value`: The slider's value. Pass a two-number array to render a range slider.
   * - `disabled`: Disables the slider.
   * - `readonly`: Makes the slider a read-only field.
   * - `orientation`: The orientation of the slider.
   * - `size`: The slider's size.
   * - `indicator-offset`/`indicatorOffset`: The starting value from which to draw the slider's fill, which is based on its current value.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   * - `min`: The minimum value allowed.
   * - `max`: The maximum value allowed.
   * - `step`: The granularity the value must adhere to when incrementing and decrementing.
   * - `autofocus`: Tells the browser to focus the slider when the page loads or a dialog is shown.
   * - `tooltip-distance`/`tooltipDistance`: The distance of the tooltip from the slider's thumb.
   * - `tooltip-placement`/`tooltipPlacement`: The placement of the tooltip in reference to the slider's thumb.
   * - `with-markers`/`withMarkers`: Draws markers at each step along the slider.
   * - `with-tooltip`/`withTooltip`: Draws a tooltip above the thumb when the control has focus or is dragged.
   * - `slider`: undefined (property only)
   * - `thumb`: undefined (property only)
   * - `thumbMin`: undefined (property only)
   * - `thumbMax`: undefined (property only)
   * - `track`: undefined (property only)
   * - `tooltip`: undefined (property only)
   * - `tooltipMin`: undefined (property only)
   * - `tooltipMax`: undefined (property only)
   * - `isInvalid`: undefined (property only)
   * - `hadUserInteraction`: undefined (property only)
   * - `wasSubmitted`: undefined (property only)
   * - `isRange`: Get if this is a range slider (property only) (readonly)
   * - `valueFormatter`: A custom formatting function to apply to the value. This will be shown in the tooltip and announced by screen
   * readers. Must be set with JavaScript. Property only. (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the slider loses focus. This event does not bubble.
   * - `sigvelo-change`: Emitted when the user commits changes to the slider's value.
   * - `sigvelo-focus`: Emitted when the slider receives focus. This event does not bubble.
   * - `sigvelo-input`: Emitted when the slider receives input.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `label`: The slider's label. For plain-text labels, you can use the `label` attribute instead.
   * - `description`: The slider's description. For plain-text descriptions, you can use the `description` attribute instead.
   * - `reference`: One or more reference labels to show visually below the slider.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `formDisabledCallback() => void`: undefined
   * - `focus() => void`: Sets focus to the slider.
   * - `blur() => void`: Removes focus from the slider.
   * - `stepDown() => void`: Decreases the slider's value by `step`. This is a programmatic change, so `input` and `change` events will not be
   * emitted when this is called.
   * - `stepUp() => void`: Increases the slider's value by `step`. This is a programmatic change, so `input` and `change` events will not be
   * emitted when this is called.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--track-size`: The height or width of the slider's track. (default: `0.75em`)
   * - `--marker-width`: The width of each individual marker. (default: `0.1875em`)
   * - `--marker-height`: The height of each individual marker. (default: `0.1875em`)
   * - `--thumb-width`: The width of the thumb. (default: `1.25em`)
   * - `--thumb-height`: The height of the thumb. (default: `1.25em`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The element that contains the sliders's label.
   * - `description`: The element that contains the slider's description.
   * - `slider`: The focusable element with `role="slider"`. Contains the track and reference slot.
   * - `track`: The slider's track.
   * - `indicator`: The colored indicator that shows from the start of the slider to the current value.
   * - `markers`: The container that holds all the markers when `with-markers` is used.
   * - `marker`: The individual markers that are shown when `with-markers` is used.
   * - `references`: The container that holds references that get slotted in.
   * - `thumb`: The slider's thumb.
   * - `thumb-min`: The min value thumb in a range slider.
   * - `thumb-max`: The max value thumb in a range slider.
   * - `tooltip`: The tooltip, a `<sigvelo-tooltip>` element.
   * - `tooltip__tooltip`: The tooltip's `tooltip` part.
   * - `tooltip__content`: The tooltip's `content` part.
   * - `tooltip__arrow`: The tooltip's `arrow` part.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the slider is disabled.
   * - `dragging`: Applied when the slider is being dragged.
   * - `focused`: Applied when the slider has focus.
   * - `user-valid`: Applied when the slider is valid and the user has sufficiently interacted with it.
   * - `user-invalid`: Applied when the slider is invalid and the user has sufficiently interacted with it.
   */
  "sigvelo-slider": Partial<
    SigveloSliderProps &
      SigveloSliderSolidJsProps &
      BaseProps<SigveloSlider> &
      BaseEvents
  >;

  /**
   * <sigvelo-text-field>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The text field's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The text field's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `name`: The name of the text field. This will be submitted with the form as a name/value pair.
   * - `value`: The text field's value.
   * - `placeholder`: A placeholder to show in the text field when it's blank.
   * - `disabled`: Disables the text field.
   * - `readonly`: Makes the text field a read-only field.
   * - `with-clear`/`withClear`: Adds a clear button to the text field when it's not blank.
   * - `variant`: The type of text field to render.
   * - `size`: The text field's size.
   * - `pill`: Draws the text field in a pill shape.
   * - `type`: The type of data the text field will accept.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   * - `required`: Makes the text field required. Form submission will not be allowed when this is set and the text field is blank.
   * - `pattern`: A regular expression the value should match to be considered valid.
   * - `minlength`/`minLength`: The minimum string length that will be considered valid.
   * - `maxlength`/`maxLength`: The maximum string length that will be considered valid.
   * - `min`: The minimum value for date/time types.
   * - `max`: The maximum value for date/time types.
   * - `step`: The granularity the value must adhere to when incrementing and decrementing.
   * - `autocapitalize`: Turns autocapitalize on or off in supported browsers.
   * - `autocomplete`: Tells the browser how to autocomplete the text field. See [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
   * for available values.
   * - `autocorrect`: Turns autocorrect on or off in supported browsers. Set to true or 'on' to enable, false or 'off' to disable.
   * - `autofocus`: Tells the browser to focus the text field when the page loads or a dialog is shown.
   * - `enterkeyhint`: Sets the enter key label on virtual keyboards.
   * - `inputmode`: Provides the browser with a hint about the type of data that might be entered by the user, allowing the appropriate
   * virtual keyboard to be displayed on supported devices.
   * - `spellcheck`: Turns spell checking on or off in supported browsers.
   * - `isInvalid`: undefined (property only)
   * - `hadUserInteraction`: undefined (property only)
   * - `wasSubmitted`: undefined (property only)
   * - `isPasswordVisible`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the text field loses focus. This event does not bubble.
   * - `sigvelo-change`: Emitted when the user commits changes to the text field's value.
   * - `sigvelo-focus`: Emitted when the text field receives focus. This event does not bubble.
   * - `sigvelo-input`: Emitted when the text field receives input.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `label`: The text field's label. For plain-text labels, you can use the `label` attribute instead.
   * - `description`: The text field's description. For plain-text descriptions, you can use the `description` attribute instead.
   * - `start`: An icon or similar element to place before the label. Works great with `<sigvelo-icon>`.
   * - `end`: An icon or similar element to place after the label. Works great with `<sigvelo-icon>`.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `focus() => void`: Sets focus to the text field.
   * - `blur() => void`: Removes focus from the text field.
   * - `select() => void`: Selects all text in the text field.
   * - `setSelectionRange(start: number, end: number, direction: "forward" | "backward" | "none" = "none") => void`: Sets the start and end positions of the current text selection in the text field.
   * - `setRangeText(replacement: string, start?: number, end?: number, selectMode?: "select" | "start" | "end" | "preserve") => void`: Replaces a range of text in the text field with a new string.
   * - `showPicker() => void`: For types that support a picker, such as color and date selectors, this will cause the picker to show.
   * - `stepDown() => void`: When a supported `type` is used, this method will decrease the text field's value by `step`. This is a programmatic
   * change, so `input` and `change` events will not be emitted when this is called.
   * - `stepUp() => void`: When a supported `type` is used, this method will increase the text field's value by `step`. This is a programmatic
   * change, so `input` and `change` events will not be emitted when this is called.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The element that contains the text field's label.
   * - `description`: The element that contains the text field's description.
   * - `visual-box`: The element that wraps the internal text box.
   * - `text-box`: The internal text box, an `<input>` element.
   * - `clear-button`: The clear button, a `<button>` element.
   * - `password-toggle-button`: The password toggle button, a `<button>` element.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the text field is disabled.
   * - `blank`: Applied when the text field has a blank value.
   * - `focused`: Applied when the text field has focus.
   * - `user-valid`: Applied when the text field is valid and the user has sufficiently interacted with it.
   * - `user-invalid`: Applied when the text field is invalid and the user has sufficiently interacted with it.
   */
  "sigvelo-text-field": Partial<
    SigveloTextFieldProps &
      SigveloTextFieldSolidJsProps &
      BaseProps<SigveloTextField> &
      BaseEvents
  >;

  /**
   * <sigvelo-color-picker>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The color picker's label. This won't be visible, but it will be read to assistive devices so you should always
   * include one.
   * - `value`: The color picker's value.
   * - `format`: The format to use for the color's value.
   * - `disabled`: Disables the color picker.
   * - `size`: The color picker's size.
   * - `swatches`: One or more semicolon-delimited colors (any valid CSS color format or name) to show as preset swatches below the
   * color picker.
   * - `with-alpha`/`withAlpha`: Enables the alpha slider.
   * - `with-eye-dropper`/`withEyeDropper`: Enables the eye dropper button. Only available in
   * [supportive browsers](https://caniuse.com/?search=eyedropper%20API).
   * - `with-input`/`withInput`: Enables the color value text field.
   * - `h`: undefined (property only)
   * - `s`: undefined (property only)
   * - `v`: undefined (property only)
   * - `a`: undefined (property only)
   * - `colorSliderThumbX`: undefined (property only)
   * - `colorSliderThumbY`: undefined (property only)
   * - `hasFocus`: undefined (property only)
   * - `isChangingV`: undefined (property only)
   * - `isChangingS`: undefined (property only)
   * - `inputIsFocused`: undefined (property only)
   * - `displayValue`: undefined (property only)
   * - `hadUserInteraction`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-change`: Emitted when the user commits changes to the color picker's value.
   * - `sigvelo-input`: Emitted when the color picker receives input. This can fire very frequently during dragging, so avoid doing expensive operations in the handler. If you don't live feedback, use the `sigvelo-change` event instead.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `focus() => void`: Sets focus to the color picker.
   * - `blur() => void`: Removes focus from the color picker.
   * - `getValueAs(format: "hex" | "hex8" | "hsl" | "rgb" = "rgb") => void`: Gets the current value as a hex string, a hex8 string, an RGB object, or an HSL object. RBG objects have `r`, `g`,
   * and `b` properties ranging from 0–255 and an `a` property (representing opacity) that ranges from 0-1. HSL objects
   * have an `h` property ranging from `0-359` and `s`, `l`, and `a` properties ranging from 0–1.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `picker`: The element the wraps the color picker.
   * - `color-slider`: The 2d color slider.
   * - `color-slider-thumb`: The color slider's thumb.
   * - `controls`: The container that wraps the sliders and preview.
   * - `sliders`: The container that wraps the hue and alpha slider.
   * - `hue-slider`: The slider that controls the color's hue.
   * - `hue-slider__label`: The hue slider's `label` part.
   * - `hue-slider__description`: The hue slider's `description` part.
   * - `hue-slider__slider`: The hue slider's `slider` part.
   * - `hue-slider__track`: The hue slider's `track` part.
   * - `hue-slider__indicator`: The hue slider's `indicator` part.
   * - `hue-slider__thumb`: The hue slider's `thumb` part.
   * - `alpha-slider`: The slider that controls the color's opacity.
   * - `alpha-slider__label`: The alpha slider's `label` part.
   * - `alpha-slider__description`: The alpha slider's `description` part.
   * - `alpha-slider__slider`: The alpha slider's `slider` part.
   * - `alpha-slider__track`: The alpha slider's `track` part.
   * - `alpha-slider__indicator`: The alpha slider's `indicator` part.
   * - `alpha-slider__thumb`: The alpha slider's `thumb` part.
   * - `eye-dropper-button`: The eye dropper button, a `<sigvelo-button>` element.
   * - `preview-button`: The button that shows a preview of the current color, a `<sigvelo-button>` element.
   * - `color-input`: The color input text field, a `<sigvelo-text-field>` element.
   * - `color-input__visual-box`: The element that wraps the internal text box.
   * - `color-input__text-box`: The internal text box, an `<input>` element.
   * - `swatches`: The element that contains swatches.
   * - `swatch`: Each individual swatch.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the color picker is disabled.
   * - `focused`: Applied when the color picker has focus.
   */
  "sigvelo-color-picker": Partial<
    SigveloColorPickerProps &
      SigveloColorPickerSolidJsProps &
      BaseProps<SigveloColorPicker> &
      BaseEvents
  >;

  /**
   * <sigvelo-color-input>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The color input's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The color input's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `name`: The name of the color input. This will be submitted with the form as a name/value pair.
   * - `value`: The color input's value.
   * - `placeholder`: A placeholder to show in the color input when it's blank.
   * - `disabled`: Disables the color input.
   * - `readonly`: Makes the color input a read-only area.
   * - `with-clear`/`withClear`: Adds a clear button to the color input when it's not blank.
   * - `variant`: The type of color input to render.
   * - `size`: The color input's size.
   * - `pill`: Draws the text field in a pill shape.
   * - `format`: The format to use for the color's value.
   * - `swatches`: One or more semicolon-delimited colors (any valid CSS color format or name) to show as preset swatches below the
   * color picker.
   * - `with-alpha`/`withAlpha`: Enables the alpha slider.
   * - `with-eye-dropper`/`withEyeDropper`: Enables the eye dropper button. Only available in
   * [supportive browsers](https://caniuse.com/?search=eyedropper%20API).
   * - `placement`: The placement of the dropdown menu in reference to the trigger. The menu will shift to a more optimal location if
   * the preferred placement doesn't have enough room.
   * - `distance`: The distance of the dropdown menu from its trigger.
   * - `offset`: The offset of the dropdown menu along its trigger.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   * - `required`: Makes the color input required. Form submission will not be allowed when this is set and the color input is blank.
   * - `autocomplete`: Tells the browser how to autocomplete the color input. See [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
   * for available values.
   * - `autofocus`: Tells the browser to focus the color input when the page loads or a dialog is shown.
   * - `enterkeyhint`: Sets the enter key label on virtual keyboards.
   * - `inputmode`: Provides the browser with a hint about the type of data that might be entered by the user, allowing the appropriate
   * virtual keyboard to be displayed on supported devices.
   * - `isOpen`: undefined (property only)
   * - `isInvalid`: undefined (property only)
   * - `hadUserInteraction`: undefined (property only)
   * - `wasSubmitted`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the color input loses focus. This event does not bubble.
   * - `sigvelo-change`: Emitted when the user commits changes to the color input's value.
   * - `sigvelo-focus`: Emitted when the color input receives focus. This event does not bubble.
   * - `sigvelo-input`: Emitted when the color input receives input.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `label`: The color input's label. For plain-text labels, you can use the `label` attribute instead.
   * - `description`: The color input's description. For plain-text descriptions, you can use the `description` attribute instead.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `blur() => void`: Removes focus from the color input.
   * - `focus() => void`: Sets focus to the color input.
   * - `getValueAs(format: "hex" | "hex8" | "hsl" | "rgb" = "rgb") => void`: Gets the current value as a hex string, a hex8 string, an RGB object, or an HSL object. RBG objects have `r`, `g`,
   * and `b` properties ranging from 0–255 and an `a` property (representing opacity) that ranges from 0-1. HSL objects
   * have an `h` property ranging from `0-359` and `s`, `l`, and `a` properties ranging from 0–1.
   * - `select() => void`: Selects all text in the color input.
   * - `setSelectionRange(start: number, end: number, direction: "forward" | "backward" | "none" = "none") => void`: Sets the start and end positions of the current text selection in the color input.
   * - `setRangeText(replacement: string, start?: number, end?: number, selectMode?: "select" | "start" | "end" | "preserve") => void`: Replaces a range of text in the color input with a new string.
   * - `showPicker() => void`: Shows the color picker.
   * - `hidePicker() => void`: Hides the color picker.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--show-duration`: The duration of the show/hide animation. (default: `50ms`)
   * - `--preview-size`: The size of the color preview. (default: `1.6em`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The element that contains the color input's label.
   * - `description`: The element that contains the color input's description.
   * - `visual-box`: The element that wraps the internal text box.
   * - `text-box`: The internal text box, an `<input>` element.
   * - `clear-button`: The clear button, a `<button>` element.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the color input is disabled.
   * - `blank`: Applied when the color input has a blank value.
   * - `focused`: Applied when the color input has focus.
   * - `open`: Applied when the color picker is open.
   * - `user-valid`: Applied when the color input is valid and the user has sufficiently interacted with it.
   * - `user-invalid`: Applied when the color input is invalid and the user has sufficiently interacted with it.
   */
  "sigvelo-color-input": Partial<
    SigveloColorInputProps &
      SigveloColorInputSolidJsProps &
      BaseProps<SigveloColorInput> &
      BaseEvents
  >;

  /**
   * <sigvelo-combobox-item>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `value`: The value to submit when this item is selected. If not provided, the text content is used.
   * - `disabled`: Disables the item.
   * - `defaultSlot`: undefined (property only)
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The item's label.
   * - `icon`: An optional icon to display at the start of the item.
   * - `details`: Optional details to display at the end of the item.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `getLabelText() => string`: Gets the text content from the combobox item's label.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `icon`: The container that wraps the icon slot.
   * - `label`: The container that wraps the item's label.
   * - `details`: The container that wraps the details slot.
   * - `checkmark`: The checkmark icon shown when selected in multiple mode.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `selected`: Applied when the item is selected.
   * - `disabled`: Applied when the item is disabled.
   * - `active`: Applied when the item is active (keyboard navigation).
   */
  "sigvelo-combobox-item": Partial<
    SigveloComboboxItemProps &
      SigveloComboboxItemSolidJsProps &
      BaseProps<SigveloComboboxItem> &
      BaseEvents
  >;

  /**
   * <sigvelo-combobox>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The combobox's label.
   * - `description`: The combobox's description.
   * - `name`: The name of the combobox for form submission.
   * - `value`: The combobox's value(s).
   * - `placeholder`: Placeholder text for the input.
   * - `disabled`: Disables the combobox.
   * - `required`: Makes the combobox required.
   * - `multiple`: Enables multiple selection.
   * - `with-clear`/`withClear`: Adds a clear button when not blank.
   * - `variant`: The visual variant of the combobox.
   * - `size`: The size of the combobox.
   * - `pill`: Draws the combobox in a pill shape.
   * - `placement`: The dropdown's placement relative to the input.
   * - `distance`: The distance of the dropdown from the input.
   * - `offset`: The offset of the dropdown along the input.
   * - `form`: The form to associate with.
   * - `open`: undefined (property only)
   * - `inputValue`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the combobox loses focus.
   * - `sigvelo-change`: Emitted when the user commits changes to the combobox's value.
   * - `sigvelo-focus`: Emitted when the combobox receives focus.
   * - `sigvelo-input`: Emitted when the combobox receives input.
   * - `sigvelo-before-open`: Emitted when the dropdown is instructed to open but before it is shown.
   * - `sigvelo-open`: Emitted when the dropdown opens.
   * - `sigvelo-before-close`: Emitted when the dropdown is instructed to close but before it is hidden.
   * - `sigvelo-close`: Emitted when the dropdown closes.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: One or more `<sigvelo-combobox-item>` elements to show as options.
   * - `label`: The combobox's label. For plain-text labels, use the `label` attribute instead.
   * - `description`: The combobox's description. For plain-text descriptions, use the `description` attribute instead.
   * - `start`: An icon or similar element to place before the input. Works great with `<sigvelo-icon>`.
   * - `end`: An icon or similar element to place after the input. Works great with `<sigvelo-icon>`.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `formResetCallback() => void`: undefined
   * - `getTagContent(item: SigveloComboboxItem) => TemplateResult`: A custom function for rendering tag content. By default, this function returns the item's full `textContent`. You
   * can override it to customize the content that gets rendered in tags in `multiple` mode.
   * - `focus() => void`: Sets focus to the combobox.
   * - `blur() => void`: Removes focus from the combobox.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--text-box-min-width`: The minimum width of the input field when shown next to tags. Only available in `multiple` mode. (default: `12ch`)
   * - `--show-duration`: The duration of the show/hide animation for the dropdown. (default: `50ms`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The element that contains the combobox's label.
   * - `description`: The element that contains the combobox's description.
   * - `visual-box`: The element that wraps the internal text box.
   * - `input-area`: The wrapper surrounding tags and the internal text box.
   * - `tag`: Individual tag elements.
   * - `tag-remove`: The remove button for tags.
   * - `text-box`: The internal text box, an `<input>` element.
   * - `chevron`: The chevron icon, a `<sigvelo-icon>` element.
   * - `chevron__svg`: The chevron icon's `<svg>` part.
   * - `clear-button`: The clear button.
   * - `dropdown`: The dropdown container.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `open`: Applied when the dropdown is open.
   * - `disabled`: Applied when the combobox is disabled.
   * - `focused`: Applied when the combobox has focus.
   * - `blank`: Applied when the combobox has no value.
   * - `user-valid`: Applied when valid after user interaction.
   * - `user-invalid`: Applied when invalid after user interaction.
   */
  "sigvelo-combobox": Partial<
    SigveloComboboxProps &
      SigveloComboboxSolidJsProps &
      BaseProps<SigveloCombobox> &
      BaseEvents
  >;

  /**
   * <sigvelo-comparison>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `position`: The position of the divider as a decimal (0-1).
   * - `orientation`: The orientation of the comparison slider, either 'horizontal' or 'vertical'.
   * - `disabled`: Disables the comparison component, preventing it from being focused and adjusted.
   * - `isDragging`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-resize`: Dispatched when the comparison's handle is moved.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `start`: The content to show on the left/start side or top side, depending on orientation.
   * - `end`: The content to show on the right/end side or bottom side, depending on orientation.
   * - `handle-icon`: A custom icon to use for the divider's handle.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `start`: The container for the start content.
   * - `end`: The container for the end content.
   * - `divider`: The draggable divider between start and end.
   * - `handle`: The visual handle within the divider.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the comparison is disabled.
   * - `dragging`: Applied when the divider is being dragged.
   * - `focused`: Applied when the divider has focus.
   */
  "sigvelo-comparison": Partial<
    SigveloComparisonProps &
      SigveloComparisonSolidJsProps &
      BaseProps<SigveloComparison> &
      BaseEvents
  >;

  /**
   * <sigvelo-date>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `date`: The date to format. If an attribute is passed, the date should be an [ISO 8601 string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).
   * If set as a property, a `Date` object can be used instead. If unset, the current date will be assumed.
   * - `date-style`/`dateStyle`: A shortcut property for formatting the date. This can be used with `time-style`, but not with other formatting
   * properties such as `weekday`, `hour`, `month`, etc.
   * - `time-style`/`timeStyle`: A shortcut property for formatting the time. This can be used with `date-style`, but not with other formatting
   * properties such as `weekday`, `hour`, `month`, etc.
   * - `hour-format`/`hourFormat`: Whether to use 12-hour time (as opposed to 24-hour time). If `auto`, the default value is determined by the user's
   * locale.
   * - `hourCycle`: The hour cycle to use.
   * - `time-zone`/`timeZone`: The time zone to use. The default is the user's default time zone.
   * - `weekday`: The representation of the weekday.
   * - `era`: The representation of the era.
   * - `year`: The representation of the year.
   * - `month`: The representation of the month.
   * - `day`: The representation of the day.
   * - `day-period`/`dayPeriod`: The formatting style used for day periods like "in the morning", "am", "noon", "n" etc. This option only has an
   * effect if a 12-hour clock is used.
   * - `hour`: The representation of the hour.
   * - `minute`: The representation of the minute.
   * - `second`: The representation of the second.
   * - `fractional-second-digits`/`fractionalSecondDigits`: The number of digits used to represent fractions of a second (any additional digits are truncated).
   * - `time-zone-name`/`timeZoneName`: The localized representation of the time zone name.
   * - `format-matcher`/`formatMatcher`: The format matching algorithm to use.
   */
  "sigvelo-date": Partial<
    SigveloDateProps &
      SigveloDateSolidJsProps &
      BaseProps<SigveloDate> &
      BaseEvents
  >;

  /**
   * <sigvelo-data-table>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `key-field`/`keyField`: The row field used as its stable selection key.
   * - `selection`: Enables no selection, single selection, or multiple selection.
   * - `caption`: Optional visible table caption.
   * - `empty-text`/`emptyText`: Message displayed when there are no rows.
   * - `columns`: Column definitions, in display order. (property only)
   * - `rows`: Row objects displayed by the table. (property only)
   * - `selectedKeys`: The currently selected row keys. (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-row-select`: Emitted when a selectable row changes. The detail contains `rowKey`, `selected`, and the complete `selectedKeys` array.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `scroller`: The horizontally scrollable table container.
   * - `table`: The native `<table>` element.
   * - `caption`: The table caption.
   * - `header`: The table header.
   * - `header-cell`: A column heading.
   * - `body`: The table body.
   * - `row`: A body row.
   * - `cell`: A body cell.
   * - `selection-cell`: A cell containing a row selection control.
   * - `empty`: The empty-result cell.
   */
  "sigvelo-data-table": Partial<
    SigveloDataTableProps &
      SigveloDataTableSolidJsProps &
      BaseProps<SigveloDataTable> &
      BaseEvents
  >;

  /**
   * <sigvelo-divider>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `orientation`: Sets the divider's orientation.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `symbol`: Optional text or a symbol to show in the center of the divider.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--color`: The color of the divider. (default: `var(--sigvelo-color-neutral-border-muted)`)
   * - `--spacing`: The spacing around the divider. (default: `1rem`)
   * - `--thickness`: The thickness of the divider. (default: `var(--sigvelo-border-width)`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `symbol`: The container that wraps the slotted symbol or icon.
   */
  "sigvelo-divider": Partial<
    SigveloDividerProps &
      SigveloDividerSolidJsProps &
      BaseProps<SigveloDivider> &
      BaseEvents
  >;

  /**
   * <sigvelo-dropdown-item>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `value`: An optional value for the menu item. This is useful for determining which item was selected when listening to the
   * dropdown's `sigvelo-select` event.
   * - `type`: Set to `checkbox` to make the item a checkbox.
   * - `color`: The type of menu item to render.
   * - `checked`: Set to true to check the dropdown item. Only valid when `type` is `checkbox`.
   * - `disabled`: Disables the dropdown item.
   * - `submenuOpen`: Whether the submenu is currently open.
   * - `href`: Tells the dropdown item to behave like a link. When selected, the browser will navigate to the target URL.
   * - `target`: Opens the link in the specified target. Only works when `href` is provided.
   * - `rel`: Sets the link's `rel` attribute. Only works when `href` is provided. When linking to an external domain, you should
   * probably set this to `noreferrer noopener`.
   * - `download`: Sets the link's `download` attribute, causing the linked file to be downloaded. Only works when `href` is provided.
   * - `hiddenLink`: undefined (property only)
   * - `submenuElement`: undefined (property only)
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The item's label or description.
   * - `icon`: An optional icon to show at the start of the item.
   * - `details`: Optional details, such as a keyboard shortcut, to display at the end of the item.
   * - `submenu`: Optional submenu items to display in a nested dropdown. For best results, use `<sigvelo-submenu-item>` and `<sigvelo-divider>` elements.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `openSubmenu() => void`: Opens the submenu.
   * - `closeSubmenu() => void`: Closes the submenu.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `checkmark`: The checkmark icon that's shown when checked, a `<sigvelo-icon>` element.
   * - `checkmark__svg`: The checkmark icon's `svg` part.
   * - `icon`: The container that wraps the icon.
   * - `label`: The container that wraps the label.
   * - `details`: The container that wraps the menu item's details.
   * - `submenu`: The container that wraps the submenu items.
   * - `submenu-icon`: The icon indicating that a submenu is available.
   * - `submenu-icon__svg`: The submenu icon's `svg` part.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `active`: Applied when the dropdown item is active.
   * - `disabled`: Applied when the dropdown item is disabled.
   * - `checked`: Applied when the dropdown item is checked.
   * - `submenu-open`: Applied when the dropdown item's submenu is open.
   * - `has-submenu`: Applied when the dropdown item has a submenu.
   */
  "sigvelo-dropdown-item": Partial<
    SigveloDropdownItemProps &
      SigveloDropdownItemSolidJsProps &
      BaseProps<SigveloDropdownItem> &
      BaseEvents
  >;

  /**
   * <sigvelo-dropdown>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `open`: Opens or closes the dropdown.
   * - `context-menu`/`contextMenu`: The ID of an element to apply the dropdown as a context menu.
   * - `placement`: The placement of the dropdown menu in reference to the trigger. The menu will shift to a more optimal location if
   * the preferred placement doesn't have enough room.
   * - `distance`: The distance of the dropdown menu from its trigger.
   * - `offset`: The offset of the dropdown menu along its trigger.
   * - `defaultSlot`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-before-open`: Emitted when the dropdown is instructed to open but before it is shown.
   * - `sigvelo-open`: Emitted when the dropdown menu has opened and the animation has completed.
   * - `sigvelo-before-close`: Emitted when the dropdown is dismissed but before it is hidden.
   * - `sigvelo-close`: Emitted when the dropdown menu has closed and the animation has completed.
   * - `sigvelo-select`: Emitted when a dropdown item has been selected. You can inspect `event.detail.item` to see the `<sigvelo-dropdown-item>` that was selected. Calling `event.preventDefault()` will keep the dropdown open.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: One or more `<dropdown-item>` elements to show in the dropdown. You can also use `<sigvelo-divider>` here.
   * - `trigger`: The dropdown's trigger. Must be a `<sigvelo-button>` or `<button>` element.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--show-duration`: The duration of the show/hide animation. (default: `50ms`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `menu`: The dropdown menu's container.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `open`: Applied when the dropdown is open.
   */
  "sigvelo-dropdown": Partial<
    SigveloDropdownProps &
      SigveloDropdownSolidJsProps &
      BaseProps<SigveloDropdown> &
      BaseEvents
  >;

  /**
   * <sigvelo-empty-state>
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Content to show in the empty state. Usually includes a heading, a paragraph, and sometimes buttons.
   * - `illustration`: An optional illustration to show in the empty state. Works well with an image or a `<sigvelo-icon>` element.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--content-width`: The maximum width of the empty state's content. When space is limited, the content will wrap automatically. (default: `40ch`)
   * - `--illustration-width`: The maximum width of the illustration. By default, this will be half of `--content-width`. This property does not affect the size of icons. (default: `undefined`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `content`: The container that wraps the content.
   * - `illustration`: The container that wraps the illustration.
   */
  "sigvelo-empty-state": Partial<
    SigveloEmptyStateProps &
      SigveloEmptyStateSolidJsProps &
      BaseProps<SigveloEmptyState> &
      BaseEvents
  >;

  /**
   * <sigvelo-empty-result>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `title`: The empty-result heading.
   * - `description`: Optional guidance for recovering from the empty state.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `illustration`: An optional icon or illustration.
   * - `(default)`: Optional recovery actions.
   */
  "sigvelo-empty-result": Partial<
    SigveloEmptyResultProps &
      SigveloEmptyResultSolidJsProps &
      BaseProps<SigveloEmptyResult> &
      BaseEvents
  >;

  /**
   * <sigvelo-expander>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `expanded`: Whether the content is expanded
   * - `disabled`: Disables the expand/collapse functionality
   * - `without-shadow`/`withoutShadow`: When true, the shadow above collapsed content will not be rendered.
   * - `content`: undefined (property only)
   * - `trigger`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-before-open`: Emitted before the expander opens. Cancelable event that prevents opening when canceled.
   * - `sigvelo-open`: Emitted after the expander has opened.
   * - `sigvelo-before-close`: Emitted before the expander closes. Cancelable event that prevents closing when canceled.
   * - `sigvelo-close`: Emitted after the expander has closed.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot for content to be expanded/collapsed.
   * - `expand-label`: The label for the button that expands the content.
   * - `collapse-label`: The label for the button that collapses the content.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--preview-height`: The visible height of the expander's content when collapsed. (default: `3lh`)
   * - `--duration`: The duration of the expand/collapse animation. (default: `200ms`)
   * - `--easing`: The easing to use for the expand/collapse animation. (default: `ease`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `content`: The container holding the expandable content.
   * - `shadow`: The shadow that shows above collapsed content.
   * - `trigger`: The button that toggles between expanded and collapsed states.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the expander is disabled.
   * - `expanded`: Applied when the content is expanded.
   */
  "sigvelo-expander": Partial<
    SigveloExpanderProps &
      SigveloExpanderSolidJsProps &
      BaseProps<SigveloExpander> &
      BaseEvents
  >;

  /**
   * <sigvelo-field>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The field label text.
   * - `description`: Help text displayed below the control.
   * - `error`: Error message displayed below the control. Puts the field in an error state.
   * - `required`: Marks the field as required. Shows the required indicator on the label.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The form control (e.g. sigvelo-text-field, sigvelo-select).
   * - `label`: Custom label content. Overrides the `label` attribute.
   * - `description`: Custom description content. Overrides the `description` attribute.
   * - `error`: Custom error content. Overrides the `error` attribute.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `error`: Applied when the field has an error.
   */
  "sigvelo-field": Partial<
    SigveloFieldProps &
      SigveloFieldSolidJsProps &
      BaseProps<SigveloField> &
      BaseEvents
  >;

  /**
   * <sigvelo-file-input>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The text field's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The text field's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `name`: The name of the file input. This will be submitted with the form as a name/value pair.
   * - `disabled`: Disables the file input.
   * - `accept`: A list of acceptable file types. Must be a comma-separated list of [unique file type
   * specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers).
   * - `multiple`: Allows more than one file to be selected.
   * - `size`: The file input's size.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   * - `required`: Makes the file input required. Form submission will not be allowed when this is set and no files are selected.
   * - `dropzone`: undefined (property only)
   * - `fileInput`: undefined (property only)
   * - `isDragging`: undefined (property only)
   * - `isInvalid`: undefined (property only)
   * - `hadUserInteraction`: undefined (property only)
   * - `wasSubmitted`: undefined (property only)
   * - `files`: An array of files that are currently selected. (Property only) (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the file input loses focus. This event does not bubble.
   * - `sigvelo-change`: Emitted when the user selects or removes a file.
   * - `sigvelo-focus`: Emitted when the file input receives focus. This event does not bubble.
   * - `sigvelo-input`: Emitted when the file input receives input.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `label`: The file input's label. For plain-text labels, you can use the `label` attribute instead.
   * - `description`: The file input's description. For plain-text descriptions, you can use the `description` attribute instead.
   * - `dropzone`: Custom content to show in the dropzone.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The element that contains the text field's label, a `<label>` element.
   * - `description`: The element that contains the text field's description.
   * - `dropzone`: The bordered region where files can be dropped.
   * - `file-list`: The list of files shown when at least one file is selected.
   * - `file`: A selected file will be drawn in this container.
   * - `file-thumbnail`: The container that hold's the file's image or icon.
   * - `file-image`: The file's image preview (if it's an image).
   * - `file-icon`: The file's icon (if it's not an image).
   * - `file-icon__svg`: The `<svg>` part of the file icon.
   * - `file-details`: The container that holds the filename and size.
   * - `file-name`: The container that holds the file's name, a `<span>` element.
   * - `file-size`: The container that holds the file's size, a `<small>` element.
   * - `file-actions`: The container that holds the file's remove button.
   * - `file-remove-button`: The file's remove button.
   * - `file-remove-button__button`: The `button` part of the file's remove button.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the file input is disabled.
   * - `blank`: Applied when the file input has a blank value.
   * - `focused`: Applied when the file input has focus.
   * - `user-valid`: Applied when the file input is valid and the user has sufficiently interacted with it.
   * - `user-invalid`: Applied when the file input is invalid and the user has sufficiently interacted with it.
   */
  "sigvelo-file-input": Partial<
    SigveloFileInputProps &
      SigveloFileInputSolidJsProps &
      BaseProps<SigveloFileInput> &
      BaseEvents
  >;

  /**
   * <sigvelo-filter-bar>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The accessible visible label.
   * - `placeholder`: Placeholder displayed when the query is empty.
   * - `query`: The controlled filter query.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-filter-change`: Emitted on each query change with `{ query }`.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `field`: The underlying `sigvelo-text-field`.
   */
  "sigvelo-filter-bar": Partial<
    SigveloFilterBarProps &
      SigveloFilterBarSolidJsProps &
      BaseProps<SigveloFilterBar> &
      BaseEvents
  >;

  /**
   * <sigvelo-form-section>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `title`: The section title rendered as a fieldset legend.
   * - `description`: Optional supporting description.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Related form controls and supporting content.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `fieldset`: The semantic fieldset container.
   * - `title`: The fieldset legend.
   * - `description`: The optional description.
   * - `content`: The controls container.
   */
  "sigvelo-form-section": Partial<
    SigveloFormSectionProps &
      SigveloFormSectionSolidJsProps &
      BaseProps<SigveloFormSection> &
      BaseEvents
  >;

  /**
   * <sigvelo-include>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `src`: The URL of the file to include. Must be a CORS-enabled endpoint.
   * - `mode`: The mode to use when fetching the request.
   * - `allow-scripts`/`allowScripts`: By default, scripts in included files will not be executed. Setting this to true will allow them to run. If you use
   * this option, make sure you trust the included HTML, otherwise you may become vulnerable to XSS exploits.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-included`: Emitted when the include file has been fetched and rendered. The HTTP status code will be available in `event.detail.status`. This event does not bubble.
   * - `sigvelo-include-error`: Emitted when the fetch results in a network error or receives an HTTP response outside of the 200 range. If a network error occurs, it will be available in `event.detail.error`. If an HTTP status code was returned, it will be available in `event.detail.status`. This event does not bubble.
   */
  "sigvelo-include": Partial<
    SigveloIncludeProps &
      SigveloIncludeSolidJsProps &
      BaseProps<SigveloInclude> &
      BaseEvents
  >;

  /**
   * <sigvelo-infinite-scroller>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: An accessible label for the feed.
   * - `threshold`: The scroll threshold at which to trigger loading more items. Accepts percentages (e.g., "20%") or pixels
   * (e.g., "200px").
   * - `defaultSlot`: undefined (property only)
   * - `isLoading`: undefined (property only)
   * - `isComplete`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-load-more`: Emitted when scrolling reaches the threshold and more items should be loaded.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot for feed items. Each item should have role="article" and be focusable.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `complete() => void`: Mark the feed as completed, preventing further load events. Changing content in the default slot will reset this
   * and re-enable infinite scrolling.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `loading`: Applied when the infinite scroller is loading more content.
   * - `complete`: Applied when the infinite scroller has no more content to load.
   */
  "sigvelo-infinite-scroller": Partial<
    SigveloInfiniteScrollerProps &
      SigveloInfiniteScrollerSolidJsProps &
      BaseProps<SigveloInfiniteScroller> &
      BaseEvents
  >;

  /**
   * <sigvelo-intersection-observer>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `root`: The ID of the element to use as as the bounding box of the viewport for the observed targets.
   * - `root-margin`/`rootMargin`: Margin around the root. Can have values similar to the CSS margin property.
   * - `threshold`: Either a single number or space-delimited numbers which indicate at what percentage of the target's visibility the observer's callback should be executed.
   * - `intersect-class`/`intersectClass`: A CSS class name to apply to elements while they're intersecting. The class will be removed when the element is no
   * longer in the viewport. This allows you to apply styles to elements as they enter and exit the viewport using pure
   * CSS.
   * - `once`: When true, stops observing after the first intersection.
   * - `disabled`: Disables the intersection observer.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-intersect`: Emitted when an observed element starts or stops intersecting. `event.detail.entry` contains the respective [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) object.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The elements to observe. Only direct children of the host element are observed.
   */
  "sigvelo-intersection-observer": Partial<
    SigveloIntersectionObserverProps &
      SigveloIntersectionObserverSolidJsProps &
      BaseProps<SigveloIntersectionObserver> &
      BaseEvents
  >;

  /**
   * <sigvelo-listbox-item>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The listbox item's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The listbox item's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `value`: The listbox item's value.
   * - `selected`: The listbox item's selected state.
   * - `disabled`: Disables the listbox item.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The listbox item's label. For plain-text labels, you can use the `label` attribute instead.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `selected`: Applied when the listbox item is selected.
   * - `disabled`: Applied when the listbox item is disabled.
   * - `controller-disabled`: Applied when the listbox controller is disabled.
   * - `controller-focused`: Applied when the listbox controller focused.
   * - `controller-readonly`: Applied when the listbox controller is readonly.
   */
  "sigvelo-listbox-item": Partial<
    SigveloListboxItemProps &
      SigveloListboxItemSolidJsProps &
      BaseProps<SigveloListboxItem> &
      BaseEvents
  >;

  /**
   * <sigvelo-listbox>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The listbox's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The listbox's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `name`: The name of the listbox. This will be submitted with the form as a name/value pair.
   * - `multiple`: Enables multiple selection mode.
   * - `disabled`: Disables the listbox.
   * - `readonly`: Makes the text field a read-only field.
   * - `size`: The text field's size.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   * - `required`: Makes the listbox required. Form submission will not be allowed when this is set and the listbox is blank.
   * - `value`: The listbox's value. For multiple selection, this will be the value of the first selected item.
   * - `selectedValues`: Gets or sets the currently selected values as an array. This property provides a consistent way to access or modify
   * the selection state regardless of whether the listbox is in single or multiple selection mode.
   *
   * In single selection mode, it returns an array with either zero or one value. In multiple selection mode, it returns
   * an array of all selected values.
   *
   * When setting this property in single mode, the first value in the array (if any) becomes the selected value. In
   * multiple mode, all values in the array become selected.
   * - `selectedItems`: Gets or sets an array of selected listbox items. (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the list box loses focus. This event does not bubble.
   * - `sigvelo-change`: Emitted when the user commits changes to the list box's selection. In single select mode, it occurs when a change is made and the listbox loses focus. In multiselect mode, it occurs whenever an option is toggled even while the listbox has focus.
   * - `sigvelo-focus`: Emitted when the list box receives focus. This event does not bubble.
   * - `sigvelo-input`: Emitted when the list box's selection changes from user input.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Listbox items to show in the listbox.
   * - `label`: The listbox's label. For plain-text labels, you can use the `label` attribute instead.
   * - `description`: The listbox's description. For plain-text descriptions, you can use the `description` attribute instead.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `formResetCallback() => void`: undefined
   * - `getSelectedValues() => void`: Returns an array of all selected values.
   * - `setSelectedValues(values: string|string[]) => void`: Sets the selected items by value(s) without triggering events.
   * Works for both single and multiple selection modes.
   * - `selectAll() => void`: Convenience method for selecting all items.
   * - `deselectAll() => void`: Convenience method for deselecting all items.
   * - `focus() => void`: Sets focus to the listbox.
   * - `blur() => void`: Removes focus from the listbox.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The element that contains the text field's label.
   * - `description`: The element that contains the text field's description.
   * - `listbox`: The internal listbox container that holds listbox items.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the text field is disabled.
   * - `blank`: Applied when the text field has a blank value.
   * - `focused`: Applied when the text field has focus.
   * - `user-valid`: Applied when the text field is valid and the user has sufficiently interacted with it.
   * - `user-invalid`: Applied when the text field is invalid and the user has sufficiently interacted with it.
   */
  "sigvelo-listbox": Partial<
    SigveloListboxProps &
      SigveloListboxSolidJsProps &
      BaseProps<SigveloListbox> &
      BaseEvents
  >;

  /**
   * <sigvelo-lorem-ipsum>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `type`: The type of HTML content to generate.
   * - `length`: The length of the content to generate, e.g. the number of words, sentences, paragraphs, or list items. This should
   * be a number or a range in the format of `{min}-{max}`, e.g. `2-4`.
   * - `seed`: By default, the generator will produce random content every time it runs. Use this option to seed the generator
   * with a non-zero number and force it to output the same content every time.
   * - `words-per-sentence`/`wordsPerSentence`: The number of words that should occur in a sentence or list item. This should be a number or a range in the format
   * of `{min}-{max}`, e.g. `4-16`.
   * - `sentences-per-paragraph`/`sentencesPerParagraph`: The number of sentences that should occur in a paragraph. This should be a number or a range in the format of
   * `{min}-{max}`, e.g. `3-6`.
   */
  "sigvelo-lorem-ipsum": Partial<
    SigveloLoremIpsumProps &
      SigveloLoremIpsumSolidJsProps &
      BaseProps<SigveloLoremIpsum> &
      BaseEvents
  >;

  /**
   * <sigvelo-meter>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: A label for the meter, displayed above the track.
   * - `min`: The meter's minimum value.
   * - `max`: The meter's maximum value.
   * - `value`: The meter's current value.
   * - `color`: The color intent for the indicator.
   * - `percentage`: The percentage of the meter filled (readonly). (property only) (readonly)
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Optional label content displayed above the meter.
   * - `value`: Optional formatted value displayed to the right of the label.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--track-color`: The color of the meter's track. (default: `var(--sigvelo-color-neutral-bg-subtle)`)
   * - `--track-size`: The height of the meter track. (default: `0.5rem`)
   * - `--indicator-color`: The color of the meter's indicator. Defaults to the color intent. (default: `undefined`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `track`: The meter's track element.
   * - `indicator`: The meter's value indicator.
   * - `label`: The container for the label and value.
   */
  "sigvelo-meter": Partial<
    SigveloMeterProps &
      SigveloMeterSolidJsProps &
      BaseProps<SigveloMeter> &
      BaseEvents
  >;

  /**
   * <sigvelo-metric>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The visible metric label.
   * - `value`: The metric value. Numbers are formatted according to `format`.
   * - `format`: Number formatting applied to numeric values.
   * - `currency`: ISO 4217 currency code used when `format` is `currency`.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The metric label.
   * - `value`: The formatted metric value.
   */
  "sigvelo-metric": Partial<
    SigveloMetricProps &
      SigveloMetricSolidJsProps &
      BaseProps<SigveloMetric> &
      BaseEvents
  >;

  /**
   * <sigvelo-metric-grid>
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: One or more `sigvelo-metric` elements.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--metric-min-width`: Minimum width of each grid item, clamped to the container width. (default: `9rem`)
   */
  "sigvelo-metric-grid": Partial<
    SigveloMetricGridProps &
      SigveloMetricGridSolidJsProps &
      BaseProps<SigveloMetricGrid> &
      BaseEvents
  >;

  /**
   * <sigvelo-mutation-observer>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `disabled`: Disables the mutation observer.
   * - `attr`: Indicates whether attributes should be observed.
   * - `attr-old-value`/`attrOldValue`: Indicates whether attribute old value should be recorded.
   * - `attr-filter`/`attrFilter`: One or more attributes to limit observations to, separate by a space. When not specified, all attributes are
   * observed.
   * - `child-list`/`childList`: Indicates whether mutations to target's children are to be observed.
   * - `subtree`: Indicates whether mutations to target's descendants are to be observed.
   * - `character-data`/`characterData`: Indicates whether character data should be observed.
   * - `character-data-old-value`/`characterDataOldValue`: Indicates whether character data old value should be recorded.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-mutation`: Emitted when a slotted element is mutated. The `event.detail.record` property contains a [`MutationRecord`](https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord) with information about the mutation.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The elements to observe. All direct children of the host element are observed, but not nested elements.
   */
  "sigvelo-mutation-observer": Partial<
    SigveloMutationObserverProps &
      SigveloMutationObserverSolidJsProps &
      BaseProps<SigveloMutationObserver> &
      BaseEvents
  >;

  /**
   * <sigvelo-navicon>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `for`: The ID of the associated menu that gets shown/hidden when the navicon is toggled. The element must be in the same
   * document as the navicon.
   * - `expanded`: Determines if the navicon is toggled on.
   * - `symbol`: Determines the navicon's symbol.
   * - `disabled`: Disables the navicon.
   * - `label`: The accessible label for the navicon.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the navicon loses focus. This event does not bubble.
   * - `sigvelo-focus`: Emitted when the navicon receives focus. This event does not bubble.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--dot-size`: The width of each dot. Available when symbol is `vertical-dots` or `horizontal-dots`. (default: `0.125em`)
   * - `--line-width`: The width of each line. Available when symbol is `hamburger` or `equals`. (default: `0.0625em`)
   * - `--line-transition-duration`: The duration of the symbol's animation. (default: `200ms`)
   * - `--line-transition-easing`: The easing to use for the symbol's animation. (default: `cubic-bezier(0.4, 0, 0.2, 1)`)
   * - `--dot-size`: The size of the dots in the dots symbol. (default: `0.125em`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `line`: The individual lines that make up the navicon symbol.
   * - `line-top`: The top line.
   * - `line-middle`: The middle line (hamburger symbol only).
   * - `line-bottom`: The bottom line.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `expanded`: Applied when the navicon is toggled on.
   * - `disabled`: Applied when the navicon is disabled.
   * - `focused`: Applied when the navicon has focus.
   */
  "sigvelo-navicon": Partial<
    SigveloNaviconProps &
      SigveloNaviconSolidJsProps &
      BaseProps<SigveloNavicon> &
      BaseEvents
  >;

  /**
   * <sigvelo-number>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `number`: The number to format.
   * - `type`: The formatting style to use.
   * - `currency`: The currency to use when formatting currency. Must be an ISO 4217 currency code, e.g. "EUR" for euro. If not
   * provided, USD will be assumed.
   * - `currency-display`/`currencyDisplay`: How to display the currency in currency formatting.
   * - `currency-sign`/`currencySign`: In many locales, accounting format means to wrap the number with parentheses instead of appending a minus sign.
   * - `unit`: The unit to use in unit formatting. [Possible values can be found here.](https://tc39.es/ecma402/#table-sanctioned-single-unit-identifiers)
   * There is no default value. If the style is `unit`, this option must be provided.
   * - `unit-display`/`unitDisplay`: The unit formatting style to use in unit formatting.
   * - `minimum-integer-digits`/`minimumIntegerDigits`: The minimum number of integer digits to use. A value with a smaller number of integer digits than this number will
   * be left-padded with zeros (to the specified length) when formatted. Possible values are from `1` to `21`. The
   * default is `1`.
   * - `minimum-fraction-digits`/`minimumFractionDigits`: The minimum number of fraction digits to use. Possible values are from `0` to `20`.
   * - `maximum-fraction-digits`/`maximumFractionDigits`: The maximum number of fraction digits to use. Possible values are from `0` to `20`.
   * - `minimum-significant-digits`/`minimumSignificantDigits`: The minimum number of significant digits to use. Possible values are from `1` to `21`; the default is `1`.
   * - `maximum-significant-digits`/`maximumSignificantDigits`: The maximum number of significant digits to use. Possible values are from `1` to `21`; the default is `21`.
   * - `rounding-priority`/`roundingPriority`: Specifies how rounding conflicts will be resolved.
   * - `rounding-increment`/`roundingIncrement`: Indicates the increment at which rounding should take place relative to the calculated rounding magnitude. Possible
   * values are `1`, `2`, `5`, `10`, `20`, `25`, `50`, `100`, `200`, `250`, `500`, `1000`, `2000`, `2500`, and `5000`.
   * Cannot be mixed with significant-digits rounding or any setting of `roundingPriority` other than auto.
   * - `rounding-mode`/`roundingMode`: How decimals should be rounded. [See this page for more details.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#roundingmode)
   * - `trailing-zero-display`/`trailingZeroDisplay`: The strategy for displaying trailing zeros on whole numbers.
   * - `notation`: The formatting that should be displayed for the number.
   * - `compact-display`/`compactDisplay`: Only used when `notation` is `compact`.
   * - `grouping`: Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.
   * - `sign-display`/`signDisplay`: When to display the sign for the number.
   */
  "sigvelo-number": Partial<
    SigveloNumberProps &
      SigveloNumberSolidJsProps &
      BaseProps<SigveloNumber> &
      BaseEvents
  >;

  /**
   * <sigvelo-number-field>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The number field's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The number field's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `name`: The name of the number field. This will be submitted with the form as a name/value pair.
   * - `value`: The number field's value.
   * - `placeholder`: A placeholder to show in the number field when it's blank.
   * - `disabled`: Disables the number field.
   * - `readonly`: Makes the number field a read-only field.
   * - `variant`: The type of number field to render.
   * - `size`: The number field's size.
   * - `pill`: Draws the number field in a pill shape.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   * - `required`: Makes the number field required. Form submission will not be allowed when this is set and the number field is blank.
   * - `pattern`: A regular expression the value should match to be considered valid.
   * - `min`: The minimum value for date/time types.
   * - `max`: The maximum value for date/time types.
   * - `step`: The granularity the value must adhere to when incrementing and decrementing.
   * - `autocomplete`: Tells the browser how to autocomplete the number field. See [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
   * for available values.
   * - `autofocus`: Tells the browser to focus the number field when the page loads or a dialog is shown.
   * - `enterkeyhint`: Sets the enter key label on virtual keyboards.
   * - `without-steppers`/`withoutSteppers`: When true, the add/subtract steppers won't be displayed.
   * - `isInvalid`: undefined (property only)
   * - `hadUserInteraction`: undefined (property only)
   * - `wasSubmitted`: undefined (property only)
   * - `isPasswordVisible`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the number field loses focus. This event does not bubble.
   * - `sigvelo-change`: Emitted when the user commits changes to the number field's value.
   * - `sigvelo-focus`: Emitted when the number field receives focus. This event does not bubble.
   * - `sigvelo-input`: Emitted when the number field receives input.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `label`: The number field's label. For plain-text labels, you can use the `label` attribute instead.
   * - `description`: The number field's description. For plain-text descriptions, you can use the `description` attribute instead.
   * - `start`: An icon or similar element to place before the label. Works great with `<sigvelo-icon>`.
   * - `end`: An icon or similar element to place after the label. Works great with `<sigvelo-icon>`.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `focus() => void`: Sets focus to the number field.
   * - `blur() => void`: Removes focus from the number field.
   * - `select() => void`: Selects all text in the number field.
   * - `setSelectionRange(start: number, end: number, direction: "forward" | "backward" | "none" = "none") => void`: Sets the start and end positions of the current text selection in the number field.
   * - `setRangeText(replacement: string, start?: number, end?: number, selectMode?: "select" | "start" | "end" | "preserve") => void`: Replaces a range of text in the number field with a new string.
   * - `stepDown() => void`: When a supported `type` is used, this method will decrease the number field's value by `step`. This is a programmatic
   * change, so `input` and `change` events will not be emitted when this is called.
   * - `stepUp() => void`: When a supported `type` is used, this method will increase the number field's value by `step`. This is a programmatic
   * change, so `input` and `change` events will not be emitted when this is called.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The element that contains the number field's label.
   * - `description`: The element that contains the number field's description.
   * - `visual-box`: The element that wraps the internal text box.
   * - `text-box`: The internal text box, an `<input>` element.
   * - `stepper`: The up and down stepper buttons.
   * - `stepper-up`: The up stepper button.
   * - `stepper-down`: The down stepper button.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the number field is disabled.
   * - `blank`: Applied when the number field has a blank value.
   * - `focused`: Applied when the number field has focus.
   * - `user-valid`: Applied when the number field is valid and the user has sufficiently interacted with it.
   * - `user-invalid`: Applied when the number field is invalid and the user has sufficiently interacted with it.
   */
  "sigvelo-number-field": Partial<
    SigveloNumberFieldProps &
      SigveloNumberFieldSolidJsProps &
      BaseProps<SigveloNumberField> &
      BaseEvents
  >;

  /**
   * <sigvelo-pagination>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: A label to use to describe the control to assistive devices. Defaults to "Pagination" when not set.
   * - `total-pages`/`totalPages`: The total number of pages to show.
   * - `page`: The current page.
   * - `siblings`: The number of pages to show on each side of the current page. Minimum 2.
   * - `jump`: The number of pages to increase or decrease when jump buttons are clicked.
   * - `format`: How the pagination will display buttons.
   * - `link-formatter`/`linkFormatter`: A string that, when provided, renders `<a>` elements instead of `<${tag}s>` using this as the link's template.
   * Use `$page` to indicate the page number, e.g. `"/path/to/$page"`. Alternatively, you can provide a JavaScript
   * function that accepts a page number and returns a URL.
   * - `disabled`: Disables the pagination control.
   * - `variant`: Determine's the pagination's variant.
   * - `without-nav`/`withoutNav`: Removes the previous and next buttons.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-before-page-change`: Emitted when the page is going to change but before it actually changes. Calling `event.preventDefault()` will prevent the page from changing. Inspect `event.detail` to get the `currentPage` and `requestedPage` properties.
   * - `sigvelo-page-change`: Emitted after the page has been changed and the UI has been updated.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `previous-icon`: A custom icon to use for the previous button.
   * - `next-icon`: A custom icon to use for the next button.
   * - `jump-backward-icon`: A custom icon to use for the jump backward button.
   * - `jump-forward-icon`: A custom icon to use for jump forward button.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `nav`: The navigation container, a `<nav>` element.
   * - `list`: The list that contains the pagination items, a `<ul>` element.
   * - `item`: A pagination item, an `<li>` element.
   * - `button`: A pagination button, a `<button>` or an `<a>` element.
   * - `button-first`: The button that navigates to the first page.
   * - `button-previous`: The button that navigates to the previous page.
   * - `button-next`: The button that navigates to the next page.
   * - `button-last`: The button that navigates to the last page.
   * - `button-page`: A button that navigates to a specific page.
   * - `button-current`: The button that represents the current page.
   * - `button-jump-backward`: The jump backward button.
   * - `button-jump-forward`: The jump forward button.
   * - `range`: The page range that shows the page when viewed in the compact format, e.g. "1 of 10".
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the pagination is disabled.
   */
  "sigvelo-pagination": Partial<
    SigveloPaginationProps &
      SigveloPaginationSolidJsProps &
      BaseProps<SigveloPagination> &
      BaseEvents
  >;

  /**
   * <sigvelo-popover>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `for`: The ID of of popover's anchor element. This must be an interactive/focusable element such as a button and it must
   * be in the same document as the popover.
   * - `label`: An accessible name for the popover.
   * - `open`: Shows or hides the popover.
   * - `placement`: The placement of the popover in reference to the anchor. The menu will shift to a more optimal location if the
   * preferred placement doesn't have enough room.
   * - `distance`: The distance of the popover from its anchor.
   * - `offset`: The offset of the popover along its trigger.
   * - `without-arrow`/`withoutArrow`: Renders the popover without an arrow.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-before-open`: Emitted when the popover is instructed to open but before it is shown.
   * - `sigvelo-open`: Emitted when the popover has opened and the animation has completed.
   * - `sigvelo-before-close`: Emitted when the popover is dismissed but before it is hidden.
   * - `sigvelo-close`: Emitted when the popover has closed. and the animation has completed.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The popover's content. Do not include interactive elements such as button, links, etc. as they won't be accessible to users inside the popover.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--arrow-size`: The size of the arrow. To hide the arrow, use the `without-arrow` attribute. (default: `0.3125rem`)
   * - `--max-width`: The maximum width the popover be before wrapping. (default: `25rem`)
   * - `--show-duration`: The duration of the show/hide animation. (default: `100ms`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `dialog`: The element that powers the popover, a `<dialog>` element.
   * - `content`: The element that wraps the popover's content.
   * - `arrow`: The popover's arrow. To change the arrow's size, use `--arrow-size` instead.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `open`: Applied when the popover is open.
   */
  "sigvelo-popover": Partial<
    SigveloPopoverProps &
      SigveloPopoverSolidJsProps &
      BaseProps<SigveloPopover> &
      BaseEvents
  >;

  /**
   * <sigvelo-preview-card>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `for`: The ID of the anchor element that triggers the preview card.
   * - `open`: Shows or hides the preview card.
   * - `placement`: The placement of the card relative to the anchor.
   * - `distance`: The distance from the anchor in pixels.
   * - `open-delay`/`openDelay`: Milliseconds to wait before opening on hover.
   * - `close-delay`/`closeDelay`: Milliseconds to wait before closing when the pointer leaves.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-before-open`: Emitted before the card opens.
   * - `sigvelo-open`: Emitted after the card has opened.
   * - `sigvelo-before-close`: Emitted before the card closes.
   * - `sigvelo-close`: Emitted after the card has closed.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The preview card's content.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--max-width`: The maximum width of the card. (default: `20rem`)
   * - `--show-duration`: The duration of the show/hide animation. (default: `150ms`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `card`: The card container.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `open`: Applied when the card is open.
   */
  "sigvelo-preview-card": Partial<
    SigveloPreviewCardProps &
      SigveloPreviewCardSolidJsProps &
      BaseProps<SigveloPreviewCard> &
      BaseEvents
  >;

  /**
   * <sigvelo-progress>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: A custom label for assistive devices.
   * - `variant`: The type of progress bar to render.
   * - `min`: The progress bar's minimum value.
   * - `max`: The progress bar's maximum value.
   * - `value`: The progress bar's current value.
   * - `indeterminate`: When the completion status can't be determined, the progress bar is considered indeterminate and the value is
   * ignored. Useful for tasks whose progress can't be reported.
   * - `percentage`: The progress bar's current value as a percentage. This is a readonly property. (property only) (readonly)
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Text to render inside the progress bar.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--track-color`: The color of the progress bar's track. (default: `var(--sigvelo-color-neutral-bg-subtle)`)
   * - `--track-size`: The height or thickness of the track, depending on the type of progress bar. (default: `1.5em | 1em`)
   * - `--indicator-color`: The color of the progress bar's value indicator. (default: `var(--sigvelo-color-primary-bg)`)
   * - `--diameter`: For progress rings, the diameter of the ring. (default: `10em`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `track`: The progress bar's track, a `<div>` for progress bars and a `<circle>` for progress rings.
   * - `indicator`: The progress bar's current value indicator, a `<div>` for progress bars and an SVG `<circle>` for progress rings.
   * - `content`: The container that holds any content that's been slotted in.
   */
  "sigvelo-progress": Partial<
    SigveloProgressProps &
      SigveloProgressSolidJsProps &
      BaseProps<SigveloProgress> &
      BaseEvents
  >;

  /**
   * <sigvelo-radio-item>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The radio item's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The radio item's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `value`: The radio item's value.
   * - `checked`: The radio item's checked state.
   * - `disabled`: Disables the radio item.
   * - `variant`: The type of radio item to render.
   * - `size`: The radio item's size.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the radio item loses focus. This event does not bubble.
   * - `sigvelo-focus`: Emitted when the radio item receives focus. This event does not bubble.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The radio item's label. For plain-text labels, you can use the `label` attribute instead.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The `<label>` that wraps the entire control.
   * - `visual-box`: The element that wraps the internal radio.
   * - `radio-icon`: The radio icon, a `<sigvelo-icon>` element.
   * - `radio-icon__svg`: The radio icon's `svg` part.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `checked`: Applied when the radio item is checked.
   * - `disabled`: Applied when the radio item is disabled.
   * - `focused`: Applied when the radio item has focus.
   */
  "sigvelo-radio-item": Partial<
    SigveloRadioItemProps &
      SigveloRadioItemSolidJsProps &
      BaseProps<SigveloRadioItem> &
      BaseEvents
  >;

  /**
   * <sigvelo-radio>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The radio's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The radio's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `name`: The name of the radio. This will be submitted with the form as a name/value pair.
   * - `value`: The radio's current value. Set this to change the selected item.
   * - `orientation`: The orientation of grouped items.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   * - `required`: Indicates at least one option in the radio is required.
   * - `disabled`: Disables the radio control.
   * - `group`: undefined (property only)
   * - `isInvalid`: undefined (property only)
   * - `hadUserInteraction`: undefined (property only)
   * - `wasSubmitted`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-change`: Emitted when the user commits changes to the radio's value.
   * - `sigvelo-input`: Emitted when the radio receives input.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The radio items to place in the group.
   * - `label`: The radio's label. For plain-text labels, you can use the `label` attribute instead.
   * - `description`: The radios's description. For plain-text descriptions, you can use the `description` attribute instead.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `focus(options?: FocusOptions) => void`: Sets focus to the selected item or the first item if none are selected.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The element that contains the radio's label.
   * - `description`: The element that contains the radio's description.
   * - `group`: The element that wraps the grouped radios.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `user-valid`: Applied when the radio is valid and the user has sufficiently interacted with it.
   * - `user-invalid`: Applied when the radio is invalid and the user has sufficiently interacted with it.
   */
  "sigvelo-radio": Partial<
    SigveloRadioProps &
      SigveloRadioSolidJsProps &
      BaseProps<SigveloRadio> &
      BaseEvents
  >;

  /**
   * <sigvelo-random-content>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `items`: The number of items to show.
   * - `mode`: The selection mode. The default is 'unique', which ensures different items are shown after calling `randomize()`,
   * when possible. Use `random` for true randomization or `sequence` to show the next set of items based on their DOM
   * position.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: A pool of items that will be randomly displayed. Each item _must_ be a direct descendant of the host element.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `randomize() => void`: Rotates the visible item(s) based on the selected mode.
   */
  "sigvelo-random-content": Partial<
    SigveloRandomContentProps &
      SigveloRandomContentSolidJsProps &
      BaseProps<SigveloRandomContent> &
      BaseEvents
  >;

  /**
   * <sigvelo-rating>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The rating's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The rating's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `name`: The name of the rating. This will be submitted with the form as a name/value pair.
   * - `value`: The rating's value.
   * - `disabled`: Disables the rating.
   * - `readonly`: Makes the rating a read-only field.
   * - `size`: The rating's size.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an iD of a form in the same document or shadow root.
   * - `required`: Makes the rating required. Form submission will not be allowed when this is set and the rating is empty.
   * - `max`: The maximum value allowed.
   * - `step`: The granularity the value must adhere to when incrementing and decrementing.
   * - `autofocus`: Tells the browser to focus the rating when the page loads or a dialog is shown.
   * - `rating`: undefined (property only)
   * - `isInvalid`: undefined (property only)
   * - `hadUserInteraction`: undefined (property only)
   * - `wasSubmitted`: undefined (property only)
   * - `symbolFormatter`: A function that returns the HTML for each symbol. The function will receive the `value` and `isSelected` arguments
   * that you can use to customize the symbol based on specific values or whether the symbol is in the selected state.
   * You should only return trusted HTML from this function, otherwise you may become vulnerable to XSS exploits. (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the rating loses focus. This event does not bubble.
   * - `sigvelo-change`: Emitted when the user commits changes to the rating's value.
   * - `sigvelo-focus`: Emitted when the rating receives focus. This event does not bubble.
   * - `sigvelo-input`: Emitted when the rating receives input.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `label`: The rating's label. For plain-text labels, you can use the `label` attribute instead.
   * - `description`: The rating's description. For plain-text descriptions, you can use the `description` attribute instead.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `formDisabledCallback() => void`: undefined
   * - `focus() => void`: Sets focus to the rating.
   * - `blur() => void`: Removes focus from the rating.
   * - `stepDown() => void`: Decreases the rating's value by `step`. This is a programmatic change, so `input` and `change` events will not be
   * emitted when this is called.
   * - `stepUp() => void`: Increases the rating's value by `step`. This is a programmatic change, so `input` and `change` events will not be
   * emitted when this is called.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The element that contains the ratings's label.
   * - `description`: The element that contains the rating's description.
   * - `rating`: The element that wraps all of the rating's symbols.
   * - `symbol`: The container that holds the selected and unselected version of each symbol.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the rating is disabled.
   * - `focused`: Applied when the rating has focus.
   * - `user-valid`: Applied when the rating is valid and the user has sufficiently interacted with it.
   * - `user-invalid`: Applied when the rating is invalid and the user has sufficiently interacted with it.
   */
  "sigvelo-rating": Partial<
    SigveloRatingProps &
      SigveloRatingSolidJsProps &
      BaseProps<SigveloRating> &
      BaseEvents
  >;

  /**
   * <sigvelo-resize-observer>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `disabled`: Disables the resize observer.
   * - `box`: Sets which box model the observer will observe changes to.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-resize`: Emitted when a slotted element is resized. Like `ResizeObserver`, this event is also dispatched when each element is first observed. The `event.detail.entry` property contains a [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) with information about the element's dimensions.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The elements to observe. All direct children of the host element are observed, but not nested elements.
   */
  "sigvelo-resize-observer": Partial<
    SigveloResizeObserverProps &
      SigveloResizeObserverSolidJsProps &
      BaseProps<SigveloResizeObserver> &
      BaseEvents
  >;

  /**
   * <sigvelo-scroll-area>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `orientation`: Which axis to allow scrolling on.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The scrollable content.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--thumb-color`: The scrollbar thumb color. (default: `var(--sigvelo-color-neutral-bg)`)
   * - `--thumb-hover-color`: The scrollbar thumb color on hover. (default: `undefined`)
   * - `--track-color`: The scrollbar track color. (default: `transparent`)
   * - `--scroll-area-height`: The height of the scroll area. (default: `auto`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `viewport`: The scrollable viewport container.
   */
  "sigvelo-scroll-area": Partial<
    SigveloScrollAreaProps &
      SigveloScrollAreaSolidJsProps &
      BaseProps<SigveloScrollArea> &
      BaseEvents
  >;

  /**
   * <sigvelo-scroller>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `orientation`: The scroller's orientation.
   * - `without-scrollbar`/`withoutScrollbar`: Removes the visible scrollbar.
   * - `without-shadow`/`withoutShadow`: Removes the shadows.
   * - `content`: undefined (property only)
   * - `canScroll`: undefined (property only)
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The content to show inside the scroller.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--shadow-color`: The base color of the shadow. (default: `var(--sigvelo-color-neutral-bg)`)
   * - `--shadow-size`: The width of the shadow. (default: `2rem`)
   * - `--thumb-color`: The color of the scrollbar's thumb (supportive browsers only). (default: `var(--sigvelo-color-neutral-bg)`)
   * - `--track-color`: The color of the scrollbar's track (supportive browsers only). (default: `transparent`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `content`: The container that wraps the slotted content.
   * - `start-shadow`: The starting shadow.
   * - `end-shadow`: The ending shadow.
   */
  "sigvelo-scroller": Partial<
    SigveloScrollerProps &
      SigveloScrollerSolidJsProps &
      BaseProps<SigveloScroller> &
      BaseEvents
  >;

  /**
   * <sigvelo-search-list>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `controller`: In most cases, you should slot the controller into the `controller` slot. However, when the controller must exist
   * outside the search list, you can set this property to the ID of an external `<input>` or `<sigvelo-text-field>`
   * element instead.
   * - `match`: The search behavior to use when finding a matching item. The `exact` search is case-insensitive but requires an
   * exact match. The `fuzzy` search is more forgiving to typos. When using `custom`, you can set the `isMatch` property
   * to a custom function to determine if the provided query matches the element's content.
   * - `debounce`: The time in milliseconds to use for debouncing the search results while the user types.
   * - `results`: undefined (property only)
   * - `query`: undefined (property only)
   * - `hasVisibleItems`: Whether any slotted item survived the current filter. Not the `empty` state — that one also needs a query.
   * Public like its siblings because Lit keys `changedProperties` on `keyof this`, which excludes private members. (property only)
   * - `isInitial`: undefined (property only)
   * - `resultsMessage`: undefined (property only)
   * - `isMatch`: A custom search function you can provide to change the search behavior. The function is applied to each item when
   * the search query changes. The `query` argument is the current search term, `content` is a string containing the
   * element's searchable content, including its `textContent` and `data-keywords"`, and `el` is the element being
   * searched. Property only. (property only)
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: One or more elements to be searched. Each element must be a direct descendent of the host, i.e. do not wrap items in other containers. If desired, you can apply flex and grid styles to the `items` part to control how items appear in the list. By default, items will be displayed in a flex column.
   * - `controller`: A `<sigvelo-text-field>` or `<input>` element that will control the search list.
   * - `initial`: Optional content to display when no search query has been entered.
   * - `empty`: Optional content to display when the search yields no results.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `setQuery(searchQuery = "") => void`: Sets the search query and updates the results. To clear the search, set this to an empty string.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `items`: The container that wraps the slotted items. Displays as a flex column by default.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `empty`: Applied when a query is entered and no matching results are found.
   * - `initial`: Applied when the query is empty and the `initial` slot is showing.
   */
  "sigvelo-search-list": Partial<
    SigveloSearchListProps &
      SigveloSearchListSolidJsProps &
      BaseProps<SigveloSearchList> &
      BaseEvents
  >;

  /**
   * <sigvelo-select>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The select's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The select's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `name`: The name of the select. This will be submitted with the form as a name/value pair.
   * - `value`: The select's value.
   * - `disabled`: Disables the select.
   * - `readonly`: Makes the select a read-only field.
   * - `variant`: The type of select to render.
   * - `size`: The select's size.
   * - `pill`: Draws the select in a pill shape.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   * - `required`: Makes the select required. Form submission will not be allowed when this is set and the select is blank.
   * - `autocomplete`: Tells the browser how to autocomplete the select. See [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
   * for available values.
   * - `enterkeyhint`: Sets the enter key label on virtual keyboards.
   * - `isInvalid`: undefined (property only)
   * - `hadUserInteraction`: undefined (property only)
   * - `wasSubmitted`: undefined (property only)
   * - `options`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the select loses focus. This event does not bubble.
   * - `sigvelo-change`: Emitted when the user commits changes to the select's value.
   * - `sigvelo-focus`: Emitted when the select receives focus. This event does not bubble.
   * - `sigvelo-input`: Emitted when the select receives input.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `label`: The select's label. For plain-text labels, you can use the `label` attribute instead.
   * - `description`: The select's description. For plain-text descriptions, you can use the `description` attribute instead.
   * - `start`: An icon or similar element to place before the label. Works great with `<sigvelo-icon>`.
   * - `end`: An icon or similar element to place after the label. Works great with `<sigvelo-icon>`.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `focus() => void`: Sets focus to the select.
   * - `blur() => void`: Removes focus from the select.
   * - `showPicker() => void`: Shows the picker in supportive browsers.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The element that contains the select's label.
   * - `description`: The element that contains the select's description.
   * - `visual-box`: The element that wraps the internal text box.
   * - `text-box`: The internal text box, a `<select>` element.
   * - `chevron`: The chevron icon, a `<sigvelo-icon>` element.
   * - `chevron__svg`: The chevron icon's `<svg>` part.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the select is disabled.
   * - `blank`: Applied when the select has no selected option.
   * - `focused`: Applied when the select has focus.
   * - `user-valid`: Applied when the select is valid and the user has sufficiently interacted with it.
   * - `user-invalid`: Applied when the select is invalid and the user has sufficiently interacted with it.
   */
  "sigvelo-select": Partial<
    SigveloSelectProps &
      SigveloSelectSolidJsProps &
      BaseProps<SigveloSelect> &
      BaseEvents
  >;

  /**
   * <sigvelo-selection-summary>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `count`: Number of selected items.
   * - `empty-label`/`emptyLabel`: Message shown when no items are selected.
   * - `singular-label`/`singularLabel`: Label used when exactly one item is selected.
   * - `plural-label`/`pluralLabel`: Label used when multiple items are selected.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `text`: The live status text.
   */
  "sigvelo-selection-summary": Partial<
    SigveloSelectionSummaryProps &
      SigveloSelectionSummarySolidJsProps &
      BaseProps<SigveloSelectionSummary> &
      BaseEvents
  >;

  /**
   * <sigvelo-share>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: A human-readable label to be shared. This is sometimes ignored by the operating system, but you should usually
   * provide it as a fallback value.
   * - `text`: A string of text to be shared.
   * - `url`: A URL to be shares.
   * - `files`: An array of [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) objects to be shared. Property only.
   * - `disabled`: Disables the button.
   * - `feedback-placement`/`feedbackPlacement`: The placement of the feedback animation when falling back to copying.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: A custom button to use instead of the default.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `share-button`: The default share button, a `<sigvelo-button>` element.
   * - `share-button__button`: The default share button's `button` part.
   * - `share-icon`: The default share icon, a `<sigvelo-icon>` element.
   * - `share-icon__svg`: The share icon's `svg` part.
   * - `feedback`: The feedback that shows when copying (e.g. when the Web Share API is unsupported).
   */
  "sigvelo-share": Partial<
    SigveloShareProps &
      SigveloShareSolidJsProps &
      BaseProps<SigveloShare> &
      BaseEvents
  >;

  /**
   * <sigvelo-slide-activator>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The label to show in the slide activator's track. If you need to provide HTML in the label, use the `label` slot
   * instead.
   * - `activated-label`/`activatedLabel`: The label to show when the control is activated. If omitted, the regular label will be shown. If you need to
   * provide HTML in the label, use the `label` slot instead.
   * - `activated`: Reflects when the control is activated. Remove this attribute to deactivate it.
   * - `disabled`: Disables the control.
   * - `attention`: Draws attention to the track by adding a subtle animation.
   * - `thumb`: undefined (property only)
   * - `isDragging`: undefined (property only)
   * - `isPressing`: undefined (property only)
   * - `thumbPosition`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-before-activate`: Emitted when the control will activate. Calling `event.preventDefault()` will prevent the activation from occurring.
   * - `sigvelo-activate`: Emitted immediately after the control is activated.
   * - `sigvelo-before-deactivate`: Emitted when the control will deactivate. Calling `event.preventDefault()` will prevent the deactivation from occurring.
   * - `sigvelo-deactivate`: Emitted immediately after the control is deactivated.
   * - `sigvelo-progress`: Emitted as the slider progresses. Use `event.details.percent` to see how far along it is.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `label`: The slide activator's label. For plain-text labels, you can use the `label` attribute instead.
   * - `activated-label`: The label to show when activated. For plain-text labels, you can use the `activated-label` attribute instead.
   * - `thumb`: The thumb element that users drag. Defaults to a double chevron icon if not provided.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--border-radius`: The control's border radius. We use a CSS custom property so we can properly calculate the inset border radius for the thumb. (default: `var(--sigvelo-radius-lg)`)
   * - `--thumb-width`: The thumb's width. (default: `4em`)
   * - `--thumb-inset`: The thumb's inset from the host element. (default: `0.125em`)
   * - `--shimmer-color`: The color to use as a base for the shimmer animation. (default: `undefined`)
   * - `--thumb-position`: A read-only property that moves from 0 to 1 as the user slides the thumb to activate the control. Useful as a hook to transition background styles based on the thumb's position. (default: `(read-only)`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `thumb`: The slide activator's thumb.
   * - `label`: The slide activator's label.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `activated`: Applied briefly when the slide activator has been activated.
   * - `dragging`: Applied when the slide activator is dragging.
   * - `pressing`: Applied when the user is pressing a key to activate the slide activator.
   * - `disabled`: Applied when the slide activator is disabled.
   */
  "sigvelo-slide-activator": Partial<
    SigveloSlideActivatorProps &
      SigveloSlideActivatorSolidJsProps &
      BaseProps<SigveloSlideActivator> &
      BaseEvents
  >;

  /**
   * <sigvelo-sparkline>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: An accessible label for the sparkline. This will be read by screen readers for users who can't see the chart, so
   * make sure to describe it appropriately.
   * - `data`: A space-separated list of positive values to show in the sparkline, e.g. "10 25 18 30". At least two values are
   * required to generate a chart.
   * - `variant`: Determines the sparkline's variant.
   * - `trend`: Draws the component with colors to visually indicate the specified trend.
   * - `curve`: The interpolation method used to connect data points on the line.
   * - `points`: undefined (property only)
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--fill-color`: The start color of the gradient fill (default: `undefined`)
   * - `--gradient-stop-color`: The end color of the gradient fill (default: `undefined`)
   */
  "sigvelo-sparkline": Partial<
    SigveloSparklineProps &
      SigveloSparklineSolidJsProps &
      BaseProps<SigveloSparkline> &
      BaseEvents
  >;

  /**
   * <sigvelo-splitter>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `position`: The current position of the divider as a decimal (0-1).
   * - `orientation`: The orientation of the splitter.
   * - `disabled`: Disables the splitter, preventing it from being focused and resized.
   * - `snap`: A space-separated list of percentage snap points, e.g. "25% 50% 75%".
   * - `snap-threshold`/`snapThreshold`: The maximum distance (in pixels) within which the divider will snap to a specified snap point.
   * - `isCollapsed`: undefined (property only)
   * - `isDragging`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-resize`: Dispatched when the splitter's handle is moved.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `start`: The content for the primary (start) panel.
   * - `end`: The content for the secondary (end) panel.
   * - `handle`: The draggable handle that separates the panels.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--divider-min-position`: Minimum position of the divider (as a percentage or pixel value). (default: `0%`)
   * - `--divider-max-position`: Maximum position of the divider (as a percentage or pixel value). (default: `100%`)
   * - `--divider-draggable-area`: The size of the divider's draggable area (can be larger than the visible area). (default: `1rem`)
   * - `--divider-width`: The width of the visual divider. (default: `0.125rem`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `start`: The content to show in the first (start) panel.
   * - `end`: The content to show in the second (end) panel.
   * - `divider`: The draggable divider that separates the panels.
   * - `handle`: The visual handle within the divider (only present when not using the `handle` slot).
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the splitter is disabled.
   * - `dragging`: Applied when the splitter is being dragged.
   * - `focused`: Applied when the splitter has focus.
   */
  "sigvelo-splitter": Partial<
    SigveloSplitterProps &
      SigveloSplitterSolidJsProps &
      BaseProps<SigveloSplitter> &
      BaseEvents
  >;

  /**
   * <sigvelo-switch>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The switch's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The switch's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `name`: The name of the switch. This will be submitted with the form as a name/value pair.
   * - `value`: The switch's value.
   * - `checked`: The switch's checked state.
   * - `disabled`: Disables the switch.
   * - `size`: The switch's size.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   * - `required`: Makes the switch required. Form submission will not be allowed until the switch is checked.
   * - `isInvalid`: undefined (property only)
   * - `hadUserInteraction`: undefined (property only)
   * - `wasSubmitted`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the switch loses focus. This event does not bubble.
   * - `sigvelo-change`: Emitted when the user commits changes to the switch's value.
   * - `sigvelo-focus`: Emitted when the switch receives focus. This event does not bubble.
   * - `sigvelo-input`: Emitted when the switch receives input.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The switch's label. For plain-text labels, you can use the `label` attribute instead.
   * - `description`: The switch's description. For plain-text descriptions, you can use the `description` attribute instead.
   * - `off-label`: The label to show when the switch is off.
   * - `on-label`: The label to show when the switch is on.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `focus() => void`: Sets focus to the switch.
   * - `blur() => void`: Removes focus from the switch.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The `<label>` that wraps the entire control.
   * - `description`: The element that contains the switch's description.
   * - `visual-box`: The element that wraps the internal switch.
   * - `switch`: The internal switch, an `<input type="checkbox" role="switch">` element.
   * - `thumb`: The switch's thumb.
   * - `on-label`: The container wrapping the `on-label`.
   * - `off-label`: The container wrapping the `off-label`.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the switch is disabled.
   * - `focused`: Applied when the switch has focus.
   * - `user-valid`: Applied when the switch is valid and the user has sufficiently interacted with it.
   * - `user-invalid`: Applied when the switch is invalid and the user has sufficiently interacted with it.
   */
  "sigvelo-switch": Partial<
    SigveloSwitchProps &
      SigveloSwitchSolidJsProps &
      BaseProps<SigveloSwitch> &
      BaseEvents
  >;

  /**
   * <sigvelo-tab>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `panel`: The name of the tab panel this tab will link to. The tab panel must be an HTML element inside the
   * `<sigvelo-tab-list>` element with a `name` attribute.
   * - `disabled`: Disables the tab, preventing it from being activated.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The tab's content. This is usually a short label, but sometimes includes an icon.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `active`: Applied when the tab is selected.
   * - `disabled`: Applied when the tab is selected.
   */
  "sigvelo-tab": Partial<
    SigveloTabProps &
      SigveloTabSolidJsProps &
      BaseProps<SigveloTab> &
      BaseEvents
  >;

  /**
   * <sigvelo-tab-panel>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `name`: The name of the tab panel. Used for assigning tabs to panels.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Content to show inside the tab panel.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `visible`: Applied when the tab panel is visible.
   */
  "sigvelo-tab-panel": Partial<
    SigveloTabPanelProps &
      SigveloTabPanelSolidJsProps &
      BaseProps<SigveloTabPanel> &
      BaseEvents
  >;

  /**
   * <sigvelo-tab-list>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: An accessible label for the tab list. This won't be visible, but it will be read to assistive devices so you should
   * always include one.
   * - `tab`: The name of the tab panel that's currently active.
   * - `placement`: The placement of tab controls.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-tab-shown`: Emitted after a tab is shown. The event will include a `detail` object with `tab` and `panel`properties that reference the respective tab and panel elements.
   * - `sigvelo-tab-hidden`: Emitted after a tab is hidden. The event will include a `detail` object with `tab` and `panel` properties that reference the respective tab and panel elements.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: One or more `<sigvelo-tab-panel>` elements, each with a `name` attribute unique to the tab list.
   * - `tab`: One or more `<sigvelo-tab>` elements, each with a `panel` attribute linked to the `name` of a tab panel. Note that tabs will automatically apply this slot to themselves, so you can safely omit `slot="tab"` in your markup. Also useful for adding close buttons to tabs.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `tabs`: The container that holds all of the tabs, a `<sigvelo-scroller>` element.
   * - `tabs-content`: The scroller's `content` part.
   * - `panels`: The container that holds all of the tab panels.
   */
  "sigvelo-tab-list": Partial<
    SigveloTabListProps &
      SigveloTabListSolidJsProps &
      BaseProps<SigveloTabList> &
      BaseEvents
  >;

  /**
   * <sigvelo-text-area>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The text area's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `description`: The text area's description. If you need to provide HTML in the description, use the `description` slot instead.
   * - `name`: The name of the text area. This will be submitted with the form as a name/value pair.
   * - `value`: The text area's value.
   * - `placeholder`: A placeholder to show in the text area when it's blank.
   * - `disabled`: Disables the text area.
   * - `readonly`: Makes the text area a read-only area.
   * - `resize`: Determines how the text area can be resized.
   * - `rows`: The default number of rows visible in the text area.
   * - `variant`: The type of text area to render.
   * - `size`: The text area's size.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   * - `required`: Makes the text area required. Form submission will not be allowed when this is set and the text area is blank.
   * - `minlength`/`minLength`: The minimum string length that will be considered valid.
   * - `maxlength`/`maxLength`: The maximum string length that will be considered valid.
   * - `autocapitalize`: Turns autocapitalize on or off in supported browsers.
   * - `autocomplete`: Tells the browser how to autocomplete the text area. See [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
   * for available values.
   * - `autocorrect`: Turns autocorrect on or off in supported browsers. Set to true or 'on' to enable, false or 'off' to disable.
   * - `autofocus`: Tells the browser to focus the text area when the page loads or a dialog is shown.
   * - `enterkeyhint`: Sets the enter key label on virtual keyboards.
   * - `inputmode`: Provides the browser with a hint about the type of data that might be entered by the user, allowing the appropriate
   * virtual keyboard to be displayed on supported devices.
   * - `spellcheck`: Turns spell checking on or off in supported browsers.
   * - `isInvalid`: undefined (property only)
   * - `hadUserInteraction`: undefined (property only)
   * - `wasSubmitted`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the text area loses focus. This event does not bubble.
   * - `sigvelo-change`: Emitted when the user commits changes to the text area's value.
   * - `sigvelo-focus`: Emitted when the text area receives focus. This event does not bubble.
   * - `sigvelo-input`: Emitted when the text area receives input.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `label`: The text area's label. For plain-text labels, you can use the `label` attribute instead.
   * - `description`: The text area's description. For plain-text descriptions, you can use the `description` attribute instead.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `focus() => void`: Sets focus to the text area.
   * - `blur() => void`: Removes focus from the text area.
   * - `select() => void`: Selects all text in the text area.
   * - `setSelectionRange(start: number, end: number, direction: "forward" | "backward" | "none" = "none") => void`: Sets the start and end positions of the current text selection in the text area.
   * - `setRangeText(replacement: string, start?: number, end?: number, selectMode?: "select" | "start" | "end" | "preserve") => void`: Replaces a range of text in the text area with a new string.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The element that contains the text area's label.
   * - `description`: The element that contains the text area's description.
   * - `visual-box`: The element that wraps the internal text box.
   * - `text-box`: The internal text box, a `<textarea>` element.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `disabled`: Applied when the text area is disabled.
   * - `blank`: Applied when the text area has a blank value.
   * - `focused`: Applied when the text area has focus.
   * - `user-valid`: Applied when the text area is valid and the user has sufficiently interacted with it.
   * - `user-invalid`: Applied when the text area is invalid and the user has sufficiently interacted with it.
   */
  "sigvelo-text-area": Partial<
    SigveloTextAreaProps &
      SigveloTextAreaSolidJsProps &
      BaseProps<SigveloTextArea> &
      BaseEvents
  >;

  /**
   * <sigvelo-text-mask>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `image`: The URL of the image to use for the mask.
   * - `fixed`: Creates a parallax-like effect where the image stays fixed while scrolling
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The text to be masked.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--brightness`: Adjusts the brightness of the mask image (0-200%, where 100% is normal) (default: `undefined`)
   * - `--contrast`: Adjusts the contrast of the mask image (0-200%, where 100% is normal) (default: `undefined`)
   * - `--grayscale`: Converts the mask to grayscale (0-100%, where 0% is normal and 100% is fully grayscale) (default: `undefined`)
   * - `--hue-rotate`: Rotates the hue of the mask (0-360deg) (default: `undefined`)
   */
  "sigvelo-text-mask": Partial<
    SigveloTextMaskProps &
      SigveloTextMaskSolidJsProps &
      BaseProps<SigveloTextMask> &
      BaseEvents
  >;

  /**
   * <sigvelo-timed-content>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `start-date`/`startDate`: The date to start showing the content.
   * - `end-date`/`endDate`: The date to stop showing the content.
   * - `live`: When set, the content will update as the time changes.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot.
   * - `before`: Optional content that shows before the specified date/time.
   * - `after`: Optional content that shows after the specified date/time.
   */
  "sigvelo-timed-content": Partial<
    SigveloTimedContentProps &
      SigveloTimedContentSolidJsProps &
      BaseProps<SigveloTimedContent> &
      BaseEvents
  >;

  /**
   * <sigvelo-toast-item>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `color`: The type of notification to render.
   * - `duration`: The length of time to show the notification before removing it. Set this to `0` to show the notification until the
   * user dismisses it.
   * - `without-close`/`withoutClose`: When set, the close button will be omitted.
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-before-close`: Emitted when the toast item is dismissed.
   * - `sigvelo-close`: Emitted after the toast has been dismissed and the hide animation has completed.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Content to show in the toast item.
   * - `icon`: Content to show as a visual. Usually an icon, image, avatar, etc.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--accent-line-width`: The width of the notification's accent line. (default: `0.33em`)
   * - `--progress`: A readonly value that goes from 100% to 0%, representing the progress remaining until the notification closes. Useful for creating custom content with visual indicators of the notification's progress. (default: `undefined`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `icon`: undefined
   * - `content`: undefined
   * - `close-button`: The close button, a `<button>` element.
   * - `progress`: The progress ring, a `<sigvelo-progress>` element.
   * - `progress__track`: The progress ring's exported `track` part.
   * - `progress__indicator`: The progress ring's exported `indicator` part.
   * - `progress__content`: The progress ring's exported `content` part.
   * - `close-icon`: The close icon, a `<sigvelo-icon>` element.
   * - `close-icon__svg`: The close icons exported `svg` part.
   */
  "sigvelo-toast-item": Partial<
    SigveloToastItemProps &
      SigveloToastItemSolidJsProps &
      BaseProps<SigveloToastItem> &
      BaseEvents
  >;

  /**
   * <sigvelo-transition-group>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `disable-transitions`/`disableTransitions`: Disables transition animations. However, the `sigvelo-content-changed` and `sigvelo-transition-end` events will still
   * be dispatched.
   * - `ignore-reduced-motion`/`ignoreReducedMotion`: By default, no animation will occur when the user indicates a preference for reduced motion. Use this attribute to
   * override this behavior when necessary.
   * - `isTransitioning`: Determines if the transition group is currently animating. (Property only) (property only)
   * - `transitionAnimation`: A custom enter/exit animation conforming to the `TransitionAnimation` interface.
   * (Property only) (property only)
   * - `transitionContainer`: By default, the transition group observes and animates its own children. In some cases, you may want it to control
   * another element's children. This is useful in cases where you can't directly wrap child elements with the
   * `<sigvelo-transition-group>` element.
   *
   * For example, if you embed a transition group in a component's shadow root but need it to control slotted (light
   * DOM) elements, you can't simply wrap the slot because the mutation observer can't see projected (slotted) elements.
   * In this case, point this property to the target element and the transition group will hide itself and observe the
   * target container's children instead. (Property only) (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-content-changed`: Emitted when content changes and before the transition animation begins.
   * - `sigvelo-transition-end`: Emitted when transition animations end.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: One or more elements to transition when adding, removing, and reordering the DOM.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `transitionComplete() => void`: Returns a promise that resolves when the current transition ends. If no transition is running, it resolves
   * immediately  This is a great way to ensure transitions have stopped before doing something else, such as adding or
   * removing new elements to the transition group.
   * - `updateElementPositions() => void`: Updates the cached coordinates of all child elements in the transition group. In most cases, you shouldn't have to
   * call this method. However, if you're resizing or animating elements imperatively, you may need to call this
   * immediately before appending or removing elements to ensure a smooth transition.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--duration`: The duration of each individual step (not the total transition time). (default: `0.25s`)
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `transitioning`: Applied when a transition is active.
   */
  "sigvelo-transition-group": Partial<
    SigveloTransitionGroupProps &
      SigveloTransitionGroupSolidJsProps &
      BaseProps<SigveloTransitionGroup> &
      BaseEvents
  >;

  /**
   * <sigvelo-toast>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `placement`: The placement of the toast stack on the screen.
   * - `stack`: undefined (property only)
   * - `transitionGroup`: undefined (property only)
   * - `transitionAnimation`: A custom enter/exit animation passed through to the internal transition group.
   * (Property only) (property only)
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `create(content: string, options?: Partial<CreateOptions>) => void`: Creates a toast notification and adds it to the stack. Returns a reference to the created toast item.
   * - `createFromTemplate(template: HTMLTemplateElement) => void`: Creates a toast notification using an existing `<sigvelo-toast-item>` element. Useful if you want to create your own
   * toast items declaratively. Returns a reference to the cloned toast item.
   * - `empty() => void`: Removes all elements from the toast stack and turns when the remove transition finishes.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `visible`: Applied when the toast stack is visible.
   */
  "sigvelo-toast": Partial<
    SigveloToastProps &
      SigveloToastSolidJsProps &
      BaseProps<SigveloToast> &
      BaseEvents
  >;

  /**
   * <sigvelo-toggle-icon>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The toggle icon's label. The label won't be displayed, but it will be announced by assistive devices.
   * - `name`: The name of the toggle icon. This will be submitted with the form as a name/value pair.
   * - `value`: The toggle icon's value.
   * - `checked`: The toggle icon's checked state.
   * - `disabled`: Disables the toggle icon.
   * - `size`: The checkbox's size.
   * - `effect`: The animation to use when toggling.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   * - `required`: Makes the toggle icon required. Form submission will not be allowed until the toggle icon is checked.
   * - `button`: undefined (property only)
   * - `isInvalid`: undefined (property only)
   * - `hadUserInteraction`: undefined (property only)
   * - `wasSubmitted`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the toggle icon loses focus. This event does not bubble.
   * - `sigvelo-change`: Emitted when the user commits changes to the toggle's value.
   * - `sigvelo-focus`: Emitted when the checkbox receives focus. This event does not bubble.
   * - `sigvelo-input`: Emitted when the checkbox receives input.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `checked`: The icon to show when checked. Works best with a `<sigvelo-icon>` element.
   * - `unchecked`: The default icon to show when unchecked. Works best with a `<sigvelo-icon>` element.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--animation-speed`: The animation speed to use when effects are selected. (default: `300ms`)
   * - `--checked-color`: The color to use for checked toggle icons. (default: `#f59e0b`)
   * - `--unchecked-color`: The color to use for unchecked toggle icons. (default: `var(--sigvelo-color-neutral-bg)`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `button`: The internal button that contains the toggle icons, a `<button>` element.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `checked`: Applied when the toggle icon is active.
   * - `disabled`: Applied when the toggle icon is disabled.
   * - `focused`: Applied when the toggle icon has focus.
   * - `user-valid`: Applied when the toggle icon is valid and the user has sufficiently interacted with it.
   * - `user-invalid`: Applied when the toggle icon is invalid and the user has sufficiently interacted with it.
   */
  "sigvelo-toggle-icon": Partial<
    SigveloToggleIconProps &
      SigveloToggleIconSolidJsProps &
      BaseProps<SigveloToggleIcon> &
      BaseEvents
  >;

  /**
   * <sigvelo-toggle-tag>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: The toggle tag's label. If you need to provide HTML in the label, use the `label` slot instead.
   * - `name`: The name of the toggle tag. This will be submitted with the form as a name/value pair.
   * - `value`: The toggle tag's value.
   * - `checked`: The toggle tag's checked state.
   * - `disabled`: Disables the toggle tag.
   * - `size`: The toggle tag's size.
   * - `form`: The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   * - `required`: Makes the toggle tag required. Form submission will not be allowed until the toggle tag is checked.
   * - `isInvalid`: undefined (property only)
   * - `hadUserInteraction`: undefined (property only)
   * - `wasSubmitted`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `sigvelo-blur`: Emitted when the toggle tag loses focus. This event does not bubble.
   * - `sigvelo-change`: Emitted when the user commits changes to the toggle tag's value.
   * - `sigvelo-focus`: Emitted when the toggle tag receives focus. This event does not bubble.
   * - `sigvelo-input`: Emitted when the toggle tag receives input.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The toggle tag's label. For plain-text labels, you can use the `label` attribute instead.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `focus() => void`: Sets focus to the toggle tag.
   * - `blur() => void`: Removes focus from the toggle tag.
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `label`: The `<label>` that wraps the entire control.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `checked`: Applied when the toggle tag is checked.
   * - `disabled`: Applied when the toggle tag is disabled.
   * - `focused`: Applied when the toggle tag has focus.
   * - `user-valid`: Applied when the toggle tag is valid and the user has sufficiently interacted with it.
   * - `user-invalid`: Applied when the toggle tag is invalid and the user has sufficiently interacted with it.
   */
  "sigvelo-toggle-tag": Partial<
    SigveloToggleTagProps &
      SigveloToggleTagSolidJsProps &
      BaseProps<SigveloToggleTag> &
      BaseEvents
  >;

  /**
   * <sigvelo-toolbar>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `orientation`: The toolbar's orientation. This changes which arrow keys are used to select adjacent buttons.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: A mixture of buttons and/or button groups.
   */
  "sigvelo-toolbar": Partial<
    SigveloToolbarProps &
      SigveloToolbarSolidJsProps &
      BaseProps<SigveloToolbar> &
      BaseEvents
  >;

  /**
   * <sigvelo-zoomable-frame>
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `src`: The URL of the content to display.
   * - `srcdoc`: Inline HTML to display.
   * - `label`: Accessible label for the embedded document.
   * - `allowfullscreen`: Allows fullscreen mode.
   * - `loading`: Controls iframe loading behavior.
   * - `referrerpolicy`: Controls referrer information.
   * - `sandbox`: Security restrictions for the iframe.
   * - `zoom`: The current zoom of the frame, e.g. 0 = 0% and 1 = 100%.
   * - `zoom-levels`/`zoomLevels`: The zoom levels to step through when using zoom controls. This does not restrict programmatic changes to the zoom.
   * - `without-controls`/`withoutControls`: Removes the zoom controls.
   * - `without-interaction`/`withoutInteraction`: Disables interaction when present.
   * - `iframe`: undefined (property only)
   * - `contentWindow`: Returns the internal iframe's `window` object. (Readonly property) (property only) (readonly)
   * - `contentDocument`: Returns the internal iframe's `document` object. (Readonly property) (property only) (readonly)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `load`: Emitted when the internal iframe when it finishes loading.
   * - `error`: Emitted from the internal iframe when it fails to load.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `zoom-in-icon`: The slot that contains the zoom in icon.
   * - `zoom-out-icon`: The slot that contains the zoom out icon.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `zoomIn() => void`: Zooms in to the next available zoom level.
   * - `zoomOut() => void`: Zooms out to the previous available zoom level.
   *
   * ## CSS Custom Properties
   *
   * CSS variables available for styling the component.
   *
   * - `--aspect-ratio`: The aspect ratio of the frame. (default: `16/9`)
   *
   * ## CSS Parts
   *
   * Custom selectors for styling elements within the component.
   *
   * - `iframe`: The internal `<iframe>` element.
   * - `controls`: The container that surrounds zoom control buttons.
   * - `zoom-in-button`: The zoom in button.
   * - `zoom-out-button`: The zoom out button.
   *
   * ## CSS States
   *
   * These can be used to apply styling when a component is in a given state.
   *
   * - `loading`: Applied when the iframe is loading.
   * - `error`: Applied when the iframe failed to load.
   */
  "sigvelo-zoomable-frame": Partial<
    SigveloZoomableFrameProps &
      SigveloZoomableFrameSolidJsProps &
      BaseProps<SigveloZoomableFrame> &
      BaseEvents
  >;
};

export type CustomCssProperties = {
  /** The expand and collapse duration. */
  "--duration"?: string | undefined;
  /** The expand and collapse easing. */
  "--easing"?: string | undefined;
  /** The accordion's border color. */
  "--sigvelo-accordion-border-color"?: string | undefined;
  /** The accordion's border width. */
  "--border-width"?: string | undefined;
  /** The accordion's border style. */
  "--border-style"?: string | undefined;
  /** The border radius to apply to rounded edges. */
  "--border-radius"?: string | undefined;
  /** The default height of the dialog. Note that dialogs shrink to fit as necessary. */
  "--height"?: string | undefined;
  /** The duration of the show/hide animation. */
  "--show-duration"?: string | undefined;
  /** The spacing to use throughout the dialog. */
  "--spacing"?: string | undefined;
  /** The default width of the dialog. Note that dialogs shrink to fit as necessary. */
  "--width"?: string | undefined;
  /** The size of the avatar to draw. */
  "--size"?: string | undefined;
  /** The speed at which the attention animation will run. */
  "--attention-duration"?: string | undefined;
  /** The easing to use for the attention animation. */
  "--attention-easing"?: string | undefined;
  /** The amount of spacing to use between breadcrumb items. */
  "--item-spacing"?: string | undefined;
  /** The color of the spinner's indicator. */
  "--indicator-color"?: string | undefined;
  /** The color of the spinner's track. */
  "--track-color"?: string | undefined;
  /** The speed for one complete rotation. */
  "--speed"?: string | undefined;
  /** The aspect ratio of the carousel. By default, carousels render 100% wide, so this helps retain proportions across various devices. Gets applied to the `items` part. */
  "--aspect-ratio"?: string | undefined;
  /** The gap between items in the carousel. */
  "--item-gap"?: string | undefined;
  /** The size of each pagination dot. */
  "--dot-size"?: string | undefined;
  /** The size of the gap between pagination dots. */
  "--dot-gap"?: string | undefined;
  /** The color of inactive pagination dots. */
  "--dot-color"?: string | undefined;
  /** The color of active pagination dots. */
  "--dot-active-color"?: string | undefined;
  /** The gap between checkboxes. */
  "--gap"?: string | undefined;
  /** The size of the arrow. To hide the arrow, use the `without-arrow` attribute. */
  "--arrow-size"?: string | undefined;
  /** The maximum width the tooltip can be before wrapping. */
  "--max-width"?: string | undefined;
  /** The height or width of the slider's track. */
  "--track-size"?: string | undefined;
  /** The width of each individual marker. */
  "--marker-width"?: string | undefined;
  /** The height of each individual marker. */
  "--marker-height"?: string | undefined;
  /** The width of the thumb. */
  "--thumb-width"?: string | undefined;
  /** The height of the thumb. */
  "--thumb-height"?: string | undefined;
  /** The size of the color preview. */
  "--preview-size"?: string | undefined;
  /** The minimum width of the input field when shown next to tags. Only available in `multiple` mode. */
  "--text-box-min-width"?: string | undefined;
  /** The color of the divider. */
  "--color"?: string | undefined;
  /** The thickness of the divider. */
  "--thickness"?: string | undefined;
  /** The maximum width of the empty state's content. When space is limited, the content will wrap automatically. */
  "--content-width"?: string | undefined;
  /** The maximum width of the illustration. By default, this will be half of `--content-width`. This property does not affect the size of icons. */
  "--illustration-width"?: string | undefined;
  /** The visible height of the expander's content when collapsed. */
  "--preview-height"?: string | undefined;
  /** Minimum width of each grid item, clamped to the container width. */
  "--metric-min-width"?: string | undefined;
  /** The width of each line. Available when symbol is `hamburger` or `equals`. */
  "--line-width"?: string | undefined;
  /** The duration of the symbol's animation. */
  "--line-transition-duration"?: string | undefined;
  /** The easing to use for the symbol's animation. */
  "--line-transition-easing"?: string | undefined;
  /** For progress rings, the diameter of the ring. */
  "--diameter"?: string | undefined;
  /** The scrollbar thumb color. */
  "--thumb-color"?: string | undefined;
  /** The scrollbar thumb color on hover. */
  "--thumb-hover-color"?: string | undefined;
  /** The height of the scroll area. */
  "--scroll-area-height"?: string | undefined;
  /** The base color of the shadow. */
  "--shadow-color"?: string | undefined;
  /** The width of the shadow. */
  "--shadow-size"?: string | undefined;
  /** The thumb's inset from the host element. */
  "--thumb-inset"?: string | undefined;
  /** The color to use as a base for the shimmer animation. */
  "--shimmer-color"?: string | undefined;
  /** A read-only property that moves from 0 to 1 as the user slides the thumb to activate the control. Useful as a hook to transition background styles based on the thumb's position. */
  "--thumb-position"?: string | undefined;
  /** The start color of the gradient fill */
  "--fill-color"?: string | undefined;
  /** The end color of the gradient fill */
  "--gradient-stop-color"?: string | undefined;
  /** Minimum position of the divider (as a percentage or pixel value). */
  "--divider-min-position"?: string | undefined;
  /** Maximum position of the divider (as a percentage or pixel value). */
  "--divider-max-position"?: string | undefined;
  /** The size of the divider's draggable area (can be larger than the visible area). */
  "--divider-draggable-area"?: string | undefined;
  /** The width of the visual divider. */
  "--divider-width"?: string | undefined;
  /** Adjusts the brightness of the mask image (0-200%, where 100% is normal) */
  "--brightness"?: string | undefined;
  /** Adjusts the contrast of the mask image (0-200%, where 100% is normal) */
  "--contrast"?: string | undefined;
  /** Converts the mask to grayscale (0-100%, where 0% is normal and 100% is fully grayscale) */
  "--grayscale"?: string | undefined;
  /** Rotates the hue of the mask (0-360deg) */
  "--hue-rotate"?: string | undefined;
  /** The width of the notification's accent line. */
  "--accent-line-width"?: string | undefined;
  /** A readonly value that goes from 100% to 0%, representing the progress remaining until the notification closes. Useful for creating custom content with visual indicators of the notification's progress. */
  "--progress"?: string | undefined;
  /** The animation speed to use when effects are selected. */
  "--animation-speed"?: string | undefined;
  /** The color to use for checked toggle icons. */
  "--checked-color"?: string | undefined;
  /** The color to use for unchecked toggle icons. */
  "--unchecked-color"?: string | undefined;
};

declare module "react" {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare module "react/jsx-runtime" {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare module "react/jsx-dev-runtime" {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare module "preact" {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare module "@builder.io/qwik" {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare module "@stencil/core" {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare module "hono/jsx" {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare module "react-native" {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare module "solid-js" {
  namespace JSX {
    interface IntrinsicElements extends CustomElementsSolidJs {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare global {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}