noora

// Generated by scripts/generate-web-components.js. Do not edit directly.

/**
 * Communicates contextual information with a semantic status.
 *
 * @element noora-alert
 * @slot - Rich description content that takes precedence over the description attribute.
 * @slot action - Actions displayed beside or below the title.
 * @csspart alert - The alert container.
 * @csspart title - The title.
 * @csspart description - The description.
 * @csspart actions - The action container.
 * @fires noora-dismiss - Emitted after the alert is dismissed.
 */
export class NooraAlert extends HTMLElement {
  /** Controls the visual emphasis. */
  type: "primary" | "secondary";
  /** Sets the semantic status. */
  status: "information" | "warning" | "error" | "success";
  /** Controls the alert dimensions and content layout. */
  size: "small" | "medium" | "large";
  /** Shows a dismiss control. */
  dismissible: boolean;
  /** Shows the semantic status icon. */
  showIcon: boolean;
  /** Sets the alert title. */
  title: string;
  /** Sets the description shown by large alerts. */
  description: string | undefined;
  addEventListener(type: "noora-dismiss", listener: (this: NooraAlert, event: CustomEvent<Record<string, never>>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: NooraAlert, event: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

}

export function registerNooraAlert(): void;

/**
 * Displays an image, initials, or a placeholder for an account.
 *
 * @element noora-avatar

 * @csspart avatar - The avatar container.
 * @csspart image - The image.
 * @csspart initials - The initials fallback.
 * @fires noora-status-change - Emitted when the avatar image loads or fails.
 */
export class NooraAvatar extends HTMLElement {
  /** Provides the account name and accessible label. */
  name: string;
  /** Controls the fallback color. */
  color: "gray" | "red" | "orange" | "yellow" | "green" | "azure" | "blue" | "purple" | "pink";
  /** Sets the image location. */
  imageHref: string | undefined;
  /** Controls image decoding. */
  imageDecoding: "sync" | "async" | "auto";
  /** Controls image loading. */
  imageLoading: "eager" | "lazy" | undefined;
  /** Chooses the fallback when the image is unavailable. */
  fallback: "initials" | "placeholder";
  /** Controls the avatar dimensions. */
  size: "2xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge";
  addEventListener(type: "noora-status-change", listener: (this: NooraAvatar, event: CustomEvent<{ status: "loaded" | "error" }>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: NooraAvatar, event: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

}

export function registerNooraAvatar(): void;

/**
 * Labels an item with compact status or categorization information.
 *
 * @element noora-badge
 * @slot - The visible label.
 * @slot icon - An icon displayed before the label. It takes precedence over dot.
 * @csspart badge - The badge container.
 * @csspart icon - The icon or dot container.
 * @csspart label - The visible label.

 */
export class NooraBadge extends HTMLElement {
  /** Controls whether the badge uses a solid or light fill. */
  appearance: "fill" | "light-fill";
  /** Controls the semantic color. Disabled badges ignore this value. */
  color: "neutral" | "destructive" | "warning" | "attention" | "success" | "information" | "focus" | "primary" | "secondary";
  /** Controls the badge dimensions and text size. */
  size: "small" | "large";
  /** Uses the disabled presentation regardless of color. */
  disabled: boolean;
  /** Displays a dot before the label when the icon slot is empty. */
  dot: boolean;
  /** Hides the label and displays only the icon slot. */
  iconOnly: boolean;
  /** Provides fallback text when the default slot is empty. */
  label: string;

}

export function registerNooraBadge(): void;

/**
 * Displays a page-level message with an optional dismiss action.
 *
 * @element noora-banner
 * @slot icon - A custom icon used by primary banners.
 * @csspart banner - The banner container.
 * @csspart title - The title.
 * @csspart description - The description.
 * @fires noora-dismiss - Emitted after the banner is dismissed.
 */
export class NooraBanner extends HTMLElement {
  /** Sets the semantic status. */
  status: "primary" | "error" | "success" | "warning" | "information";
  /** Sets the banner title. */
  title: string;
  /** Sets the optional description. */
  description: string | undefined;
  /** Shows a dismiss control. */
  dismissible: boolean;
  addEventListener(type: "noora-dismiss", listener: (this: NooraBanner, event: CustomEvent<Record<string, never>>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: NooraBanner, event: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

}

export function registerNooraBanner(): void;

/**
 * Describes one declarative item inside breadcrumbs.
 *
 * @element noora-breadcrumb-item
 * @slot - The label followed by optional noora-dropdown-item children.


 */
export class NooraBreadcrumbItem extends HTMLElement {
  /** Sets the label instead of using text content. */
  label: string;
  /** Sets the navigation address. */
  href: string | undefined;
  /** Shows an icon before the label. */
  icon: string | undefined;
  /** Shows an avatar before the label. */
  avatar: boolean;
  /** Sets the avatar name. */
  avatarName: string | undefined;
  /** Sets the avatar color. */
  avatarColor: string | undefined;
  /** Sets the avatar image address. */
  avatarImageHref: string | undefined;
  /** Shows a badge with this label. */
  badgeLabel: string | undefined;
  /** Sets the badge color. */
  badgeColor: string | undefined;

}

export function registerNooraBreadcrumbItem(): void;

/**
 * Shows the current location in a navigational hierarchy.
 *
 * @element noora-breadcrumbs
 * @slot - Declarative noora-breadcrumb-item children.
 * @csspart breadcrumbs - The breadcrumb container.
 * @fires noora-open-change - Emitted when a breadcrumb menu opens or closes.
 * @fires noora-select - Emitted when a breadcrumb menu item is selected.
 */
export class NooraBreadcrumbs extends HTMLElement {
  /** Controls the separator style. */
  styleVariant: "slash" | "arrow";
  /** Defines breadcrumbs programmatically when declarative noora-breadcrumb-item children are not used. */
  items: Array<Record<string, unknown>>;
  addEventListener(type: "noora-open-change", listener: (this: NooraBreadcrumbs, event: CustomEvent<{ index: number; open: boolean }>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: "noora-select", listener: (this: NooraBreadcrumbs, event: CustomEvent<{ index: number; item: Record<string, unknown>; value: unknown }>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: NooraBreadcrumbs, event: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

}

export function registerNooraBreadcrumbs(): void;

/**
 * Combines a primary button action with an attached menu.
 *
 * @element noora-button-dropdown
 * @slot icon-left - An icon before the main label.
 * @slot icon-right - An icon after the main label.
 * @slot - Declarative noora-dropdown-item children.
 * @csspart main-button - The main action.
 * @csspart trigger - The menu trigger.
 * @csspart content - The menu content.
 * @fires noora-action - Emitted when the primary button is activated.
 * @fires noora-open-change - Emitted when the menu opens or closes.
 * @fires noora-select - Emitted when a menu item is selected.
 */
export class NooraButtonDropdown extends HTMLElement {
  /** Sets the main action label. */
  label: string;
  /** Controls the dimensions. */
  size: "medium" | "large";
  /** Disables both controls. */
  disabled: boolean;
  /** Controls whether the menu is open. */
  open: boolean;
  /** Closes the menu after a selection. */
  closeOnSelect: boolean;
  /** Keeps the menu open after selection. */
  keepOpen: boolean;
  /** Aligns the menu to the button. */
  align: "start" | "end";
  /** Defines menu items programmatically when declarative noora-dropdown-item children are not used. */
  items: Array<Record<string, unknown>>;
  addEventListener(type: "noora-action", listener: (this: NooraButtonDropdown, event: CustomEvent<Record<string, never>>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: "noora-open-change", listener: (this: NooraButtonDropdown, event: CustomEvent<{ open: boolean }>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: "noora-select", listener: (this: NooraButtonDropdown, event: CustomEvent<{ item: Record<string, unknown>; value: unknown }>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: NooraButtonDropdown, event: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

}

export function registerNooraButtonDropdown(): void;

/**
 * Describes one declarative control inside a button group.
 *
 * @element noora-button-group-item
 * @slot - The item label.


 */
export class NooraButtonGroupItem extends HTMLElement {
  /** Sets the item label instead of using text content. */
  label: string;
  /** Sets the value emitted when the item is selected. */
  value: string | undefined;
  /** Renders the item as a link. */
  href: string | undefined;
  /** Sets the icon for an icon-only item. */
  icon: string | undefined;
  /** Shows an icon before the label. */
  iconLeft: string | undefined;
  /** Shows an icon after the label. */
  iconRight: string | undefined;
  /** Uses the icon as the complete item content. */
  iconOnly: boolean;
  /** Provides an accessible label for an icon-only item. */
  ariaLabel: string | undefined;
  /** Disables the item. */
  disabled: boolean;
  /** Shows the item in its selected state. */
  selected: boolean;

}

export function registerNooraButtonGroupItem(): void;

/**
 * Groups related controls into a compact segmented surface.
 *
 * @element noora-button-group
 * @slot - Declarative noora-button-group-item children.
 * @csspart group - The group container.
 * @fires noora-select - Emitted when an enabled group item is selected.
 */
export class NooraButtonGroup extends HTMLElement {
  /** Controls child dimensions. */
  size: "small" | "medium" | "large";
  /** Defines group items programmatically when declarative noora-button-group-item children are not used. */
  items: Array<Record<string, unknown>>;
  addEventListener(type: "noora-select", listener: (this: NooraButtonGroup, event: CustomEvent<{ index: number; item: Record<string, unknown>; value: unknown }>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: NooraButtonGroup, event: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

}

export function registerNooraButtonGroup(): void;

/**
 * Triggers an action, submits a form, or navigates to another location.
 *
 * @element noora-button
 * @slot - The visible label, or the complete content when icon-only is present.
 * @slot icon-left - An icon displayed before the label.
 * @slot icon-right - An icon displayed after the label.
 * @csspart control - The native link or button control.

 */
export class NooraButton extends HTMLElement {
  /** Focuses the button when the page loads. */
  autofocus: boolean;
  /** Prevents activation and form submission. */
  disabled: boolean;
  /** Downloads the linked resource, optionally using this value as the filename. */
  download: string | undefined;
  /** Associates the button with a form by element identifier. */
  formId: string | undefined;
  /** Overrides the associated form action for this submit button. */
  formAction: string | undefined;
  /** Overrides the associated form encoding type for this submit button. */
  formEnctype: string | undefined;
  /** Overrides the associated form method for this submit button. */
  formMethod: string | undefined;
  /** Skips validation when this button submits its associated form. */
  formNoValidate: boolean;
  /** Overrides where the associated form response is displayed. */
  formTarget: string | undefined;
  /** Renders the control as a link to this location. */
  href: string;
  /** Uses the default slot as the entire button content. An accessible label is required. */
  iconOnly: boolean;
  /** Provides fallback text when the default slot is empty. */
  label: string;
  /** Sets the form field name submitted with the button value. */
  name: string;
  /** Sets the relationship between the current page and a linked resource. */
  rel: string | undefined;
  /** Controls the button dimensions and text size. */
  size: "small" | "medium" | "large";
  /** Controls where a linked resource is opened. */
  target: string | undefined;
  /** Controls native button behavior when href is absent. */
  type: "button" | "reset" | "submit";
  /** Sets the form value submitted with the button name. */
  value: string;
  /** Controls the visual emphasis and semantic intent. */
  variant: "primary" | "secondary" | "destructive";
  /** The native link or button rendered inside the component. */
  readonly control: HTMLAnchorElement | HTMLButtonElement | null;
  /** The form associated with the button, if one exists. */
  readonly form: HTMLFormElement | null;

}

export function registerNooraButton(): void;

/**
 * Groups related content into a titled surface.
 *
 * @element noora-card
 * @slot - The card body.
 * @slot icon - A custom icon that takes precedence over the icon attribute.
 * @slot actions - Header actions.
 * @slot section - Additional independently styled card sections.
 * @csspart card - The card container.
 * @csspart header - The card header.
 * @csspart body - The card body section.

 */
export class NooraCard extends HTMLElement {
  /** Sets a Noora icon in the header. */
  icon: string | undefined;
  /** Sets the card title. */
  title: string;

}

export function registerNooraCard(): void;

/**
 * Describes one declarative chart axis.
 *
 * @element noora-chart-axis
 * @slot - Declarative noora-chart-category children.


 */
export class NooraChartAxis extends HTMLElement {
  /** Chooses the horizontal or vertical axis. */
  dimension: "x" | "y";
  /** Chooses a categorical or numeric axis. */
  type: "category" | "value";
  /** Sets the minimum numeric value. */
  min: number | undefined;
  /** Sets the maximum numeric value. */
  max: number | undefined;
  /** Formats axis labels using an Apache ECharts value template. */
  labelFormat: string | undefined;
  /** Sets the axis-label font size. */
  labelSize: number | undefined;
  /** Sets the distance between labels and the axis. */
  labelMargin: number | undefined;
  /** Hides the complete axis. */
  axisHidden: boolean;
  /** Hides the axis line. */
  hideLine: boolean;
  /** Hides axis tick marks. */
  hideTicks: boolean;
  /** Uses dashed split lines. */
  dashedGrid: boolean;
  /** Removes the category-axis boundary gap. */
  noBoundaryGap: boolean;

}

export function registerNooraChartAxis(): void;

/**
 * Describes one declarative category on a chart axis.
 *
 * @element noora-chart-category
 * @slot - The category value.


 */
export class NooraChartCategory extends HTMLElement {
  /** Sets the category value instead of using text content. */
  value: string | undefined;

}

export function registerNooraChartCategory(): void;

/**
 * Describes declarative chart-grid dimensions.
 *
 * @element noora-chart-grid



 */
export class NooraChartGrid extends HTMLElement {
  /** Includes axis labels within the grid dimensions. */
  containLabel: boolean;
  /** Sets the grid height. */
  height: number | undefined;
  /** Sets the grid width. */
  width: number | undefined;

}

export function registerNooraChartGrid(): void;

/**
 * Describes one declarative chart data point.
 *
 * @element noora-chart-point



 */
export class NooraChartPoint extends HTMLElement {
  /** Sets the numeric data value. */
  value: number | undefined;
  /** Overrides the point color, including with a Noora semantic chart color. */
  color: string | undefined;
  /** Navigates to this address when the point is selected. */
  url: string | undefined;

}

export function registerNooraChartPoint(): void;

/**
 * Describes one declarative chart data series.
 *
 * @element noora-chart-series
 * @slot - Declarative noora-chart-point children.


 */
export class NooraChartSeries extends HTMLElement {
  /** Sets the series name. */
  name: string | undefined;
  /** Chooses the series visualization. */
  type: "bar" | "line";
  /** Sets the symbol used for line-series points. */
  symbol: string | undefined;
  /** Sets the width of bars. */
  barWidth: number | undefined;
  /** Sets the gap between bar series. */
  barGap: string | undefined;
  /** Rounds bar corners. */
  borderRadius: number | undefined;

}

export function registerNooraChartSeries(): void;

/**
 * Renders an Apache ECharts visualization from declarative configuration elements.
 *
 * @element noora-chart
 * @slot - Declarative grid, axis, and series configuration elements.
 * @csspart container - The chart wrapper.
 * @csspart chart - The chart drawing surface.
 * @fires noora-chart-select - Emitted when an interactive chart item is selected. Prevent the default action to stop navigation for items with a link target.
 */
export class NooraChart extends HTMLElement {
  /** Chooses the chart renderer. */
  renderer: "canvas" | "svg";
  /** Shows a tooltip for an axis or an individual item. */
  tooltipTrigger: "axis" | "item";
  /** Hides the chart tooltip. */
  hideTooltip: boolean;
  /** Hides the chart legend. */
  hideLegend: boolean;
  /** Sets an Apache ECharts configuration object when programmatic configuration is needed. */
  options: Record<string, unknown>;
  /** The underlying Apache ECharts instance. */
  readonly chart: unknown | null;
  addEventListener(type: "noora-chart-select", listener: (this: NooraChart, event: CustomEvent<{ item: unknown; parameters: unknown }>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: NooraChart, event: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

}

export function registerNooraChart(): void;

/**
 * Lets a user select one or more independent options.
 *
 * @element noora-checkbox

 * @csspart root - The checkbox label.
 * @csspart control - The visual checkbox control.
 * @csspart label - The label text.
 * @fires input - Emitted while the checked state changes.
 * @fires change - Emitted after the checked state changes.
 */
export class NooraCheckbox extends HTMLElement {
  /** Sets the visible label. */
  label: string;
  /** Sets supporting text. */
  description: string | undefined;
  /** Controls the checked state. */
  checked: boolean;
  /** Controls the mixed state. */
  indeterminate: boolean;
  /** Disables interaction. */
  disabled: boolean;
  /** Sets the submitted field name. */
  name: string;
  /** Sets the submitted field value. */
  value: string;
  /** Marks the field as required. */
  required: boolean;
  /** The native checkbox input. */
  readonly control: HTMLInputElement | null;
  /** The associated form. */
  readonly form: HTMLFormElement | null;
  addEventListener(type: "input", listener: (this: NooraCheckbox, event: InputEvent) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: "change", listener: (this: NooraCheckbox, event: Event) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: NooraCheckbox, event: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

}

export function registerNooraCheckbox(): void;

/**
 * Describes one declarative date-range preset.
 *
 * @element noora-date-picker-preset
 * @slot - The preset label.


 */
export class NooraDatePickerPreset extends HTMLElement {
  /** Sets the preset identifier. */
  value: string;
  /** Sets the preset label instead of using text content. */
  label: string;
  /** Sets the start date in year-month-day format. */
  start: string;
  /** Sets the end date in year-month-day format. */
  end: string;

}

export function registerNooraDatePickerPreset(): void;

/**
 * Selects a date range with a two-month calendar, optional presets, and editable range fields.
 *
 * @element noora-date-picker
 * @slot - Declarative noora-date-picker-preset children.
 * @slot actions - Additional footer actions.
 * @csspart trigger - The range trigger.
 * @csspart content - The picker content.
 * @csspart calendar - The calendar and range controls.
 * @csspart month - One calendar month.
 * @fires noora-open-change - Emitted when the date picker opens or closes.
 * @fires noora-period-change - Emitted when a date range is applied.
 * @fires noora-cancel - Emitted when date selection is cancelled.
 */
export class NooraDatePicker extends HTMLElement {
  /** Sets the trigger label when no range is selected. */
  label: string;
  /** Sets the submitted field-name prefix for `[start]` and `[end]` values. */
  name: string | undefined;
  /** Sets the start date in year-month-day format. */
  start: string | undefined;
  /** Sets the end date in year-month-day format. */
  end: string | undefined;
  /** Sets the earliest selectable date. */
  min: string | undefined;
  /** Sets the latest selectable date. */
  max: string | undefined;
  /** Identifies the selected preset. */
  selectedPreset: string | undefined;
  /** Sets the first weekday, where zero is Sunday and one is Monday. */
  startOfWeek: number;
  /** Disables interaction. */
  disabled: boolean;
  /** Controls whether the picker is open. */
  open: boolean;
  /** Defines presets programmatically when declarative noora-date-picker-preset children are not used. */
  presets: Array<Record<string, unknown>>;
  addEventListener(type: "noora-open-change", listener: (this: NooraDatePicker, event: CustomEvent<{ open: boolean }>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: "noora-period-change", listener: (this: NooraDatePicker, event: CustomEvent<{ start: string; end: string; preset: string | undefined }>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: "noora-cancel", listener: (this: NooraDatePicker, event: CustomEvent<Record<string, never>>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: NooraDatePicker, event: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

}

export function registerNooraDatePicker(): void;

/**
 * Collects a fixed-length verification or personal identification code.
 *
 * @element noora-digit-input

 * @csspart root - The field group.
 * @csspart input - Each character input.
 * @fires input - Emitted while the entered code changes.
 * @fires change - Emitted when every field contains a valid character.
 * @fires noora-input - Emitted with the current code after a valid input.
 * @fires noora-complete - Emitted when every field contains a valid character.
 * @fires noora-invalid - Emitted when an entered or pasted value is rejected.
 */
export class NooraDigitInput extends HTMLElement {
  /** Limits accepted characters. */
  type: "alphanumeric" | "numeric" | "alphabetic";
  /** Sets the number of fields. */
  characters: number;
  /** Sets each field placeholder. */
  placeholder: string;
  /** Enables one-time-code autofill. */
  oneTimeCode: boolean;
  /** Shows the error state. */
  error: boolean;
  /** Disables all fields. */
  disabled: boolean;
  /** Gets or sets the combined value. */
  value: string;
  /** Sets the hidden submitted field name. */
  name: string;
  addEventListener(type: "input", listener: (this: NooraDigitInput, event: InputEvent) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: "change", listener: (this: NooraDigitInput, event: Event) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: "noora-input", listener: (this: NooraDigitInput, event: CustomEvent<{ value: string }>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: "noora-complete", listener: (this: NooraDigitInput, event: CustomEvent<{ value: string }>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: "noora-invalid", listener: (this: NooraDigitInput, event: CustomEvent<{ value: string }>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: NooraDigitInput, event: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

}

export function registerNooraDigitInput(): void;

/**
 * Provides a compact, accessible dismiss button.
 *
 * @element noora-dismiss-icon

 * @csspart button - The native button.
 * @fires noora-dismiss - Emitted when the dismiss control is activated.
 */
export class NooraDismissIcon extends HTMLElement {
  /** Controls the icon dimensions. */
  size: "small" | "large";
  /** Disables the button. */
  disabled: boolean;
  /** Sets the accessible label. */
  label: string;
  addEventListener(type: "noora-dismiss", listener: (this: NooraDismissIcon, event: CustomEvent<Record<string, never>>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: NooraDismissIcon, event: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

}

export function registerNooraDismissIcon(): void;

/**
 * Describes one declarative item inside a dropdown or breadcrumb menu.
 *
 * @element noora-dropdown-item
 * @slot - The item label.


 */
export class NooraDropdownItem extends HTMLElement {
  /** Sets the item label instead of using its text content. */
  label: string;
  /** Sets the value emitted when the item is selected. */
  value: string | undefined;
  /** Shows an icon before the label. */
  icon: string | undefined;
  /** Shows an icon after the label. */
  rightIcon: string | undefined;
  /** Controls the item dimensions. */
  size: "small" | "large";
  /** Renders the item as a link. */
  href: string | undefined;
  /** Adds compact secondary text beside the label. */
  secondaryText: string | undefined;
  /** Adds supporting text below the label. */
  description: string | undefined;
  /** Disables selection. */
  disabled: boolean;
  /** Shows a checkbox indicator. */
  checkable: boolean;
  /** Marks a checkable item as selected. */
  checked: boolean;
  /** Marks a breadcrumb menu item as selected. */
  selected: boolean;
  /** Shows an avatar before the label. */
  avatar: boolean;
  /** Sets the avatar name. */
  avatarName: string | undefined;
  /** Sets the avatar color. */
  avatarColor: string | undefined;
  /** Sets the avatar image address. */
  avatarImageHref: string | undefined;
  /** Shows a badge with this label. */
  badgeLabel: string | undefined;
  /** Sets the badge color. */
  badgeColor: string | undefined;

}

export function registerNooraDropdownItem(): void;

/**
 * Opens a menu of actions or navigational items.
 *
 * @element noora-dropdown
 * @slot icon - The trigger icon.
 * @slot search - Search content above the item list.
 * @slot - Declarative noora-dropdown-item children.
 * @csspart trigger - The menu trigger.
 * @csspart content - The menu content.
 * @csspart items - The item list.
 * @fires noora-open-change - Emitted when the dropdown opens or closes.
 * @fires noora-select - Emitted when an enabled item is selected.
 */
export class NooraDropdown extends HTMLElement {
  /** Sets the trigger label. */
  label: string;
  /** Controls the trigger dimensions. */
  size: "medium" | "large";
  /** Adds text before the main label. */
  secondaryText: string | undefined;
  /** Uses the icon slot as the complete trigger. */
  iconOnly: boolean;
  /** Adds supporting text. */
  hint: string | undefined;
  /** Disables the trigger. */
  disabled: boolean;
  /** Controls whether the menu is open. */
  open: boolean;
  /** Closes the menu after selection. */
  closeOnSelect: boolean;
  /** Keeps the menu open after selection. */
  keepOpen: boolean;
  /** Defines menu items programmatically when declarative noora-dropdown-item children are not used. */
  items: Array<Record<string, unknown>>;
  addEventListener(type: "noora-open-change", listener: (this: NooraDropdown, event: CustomEvent<{ open: boolean }>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: "noora-select", listener: (this: NooraDropdown, event: CustomEvent<{ item: Record<string, unknown>; value: unknown }>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: NooraDropdown, event: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

}

export function registerNooraDropdown(): void;

/**
 * Describes one filter that a user can add.
 *
 * @element noora-filter-definition
 * @slot - The allowed noora-filter-option children.


 */
export class NooraFilterDefinition extends HTMLElement {
  /** Sets the filter identifier. */
  name: string;
  /** Sets the filter label. */
  label: string;
  /** Sets the filter value type and available operators. */
  type: "option" | "text" | "number" | "percentage" | "list";
  /** Sets the initial comparison operator. */
  operator: "==" | "!=" | "=~" | "!=~" | "<" | ">" | "<=" | ">=" | undefined;
  /** Sets the value used when the filter is added. */
  defaultValue: string | undefined;
  /** Adds search to option-value menus. */
  searchable: boolean;

}

export function registerNooraFilterDefinition(): void;

/**
 * Describes one allowed value for a filter definition.
 *
 * @element noora-filter-option
 * @slot - The option label.


 */
export class NooraFilterOption extends HTMLElement {
  /** Sets the option value. */
  value: string;
  /** Sets the option label instead of using text content. */
  label: string;

}

export function registerNooraFilterOption(): void;

/**
 * Describes one initially active filter.
 *
 * @element noora-filter-value



 */
export class NooraFilterValue extends HTMLElement {
  /** Sets the filter identifier. */
  name: string;
  /** Sets the filter label. */
  label: string | undefined;
  /** Overrides the matching definition's value type. */
  type: "option" | "text" | "number" | "percentage" | "list" | undefined;
  /** Sets the active comparison operator. */
  operator: "==" | "!=" | "=~" | "!=~" | "<" | ">" | "<=" | ">=" | undefined;
  /** Sets the active value. */
  value: string;
  /** Sets a human-readable value. */
  displayValue: string | undefined;

}

export function registerNooraFilterValue(): void;

/**
 * Builds and displays a set of structured filters.
 *
 * @element noora-filter
 * @slot - Declarative noora-filter-definition and noora-filter-value children.
 * @csspart filter - The filter container.
 * @csspart active-filters - The active-filter list.
 * @csspart add - The add-filter control.
 * @csspart active-filter - An active filter control.
 * @fires noora-filter-change - Emitted when a filter is added, changed, or removed.
 */
export class NooraFilter extends HTMLElement {
  /** Sets the add-filter label. */
  label: string;
  /** Disables editing. */
  disabled: boolean;
  /** Defines available filters programmatically when declarative definitions are not used. */
  availableFilters: Array<Record<string, unknown>>;
  /** Gets or sets active filters programmatically. */
  filters: Array<Record<string, unknown>>;
  addEventListener(type: "noora-filter-change", listener: (this: NooraFilter, event: CustomEvent<{ filters: Array<Record<string, unknown>> }>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: NooraFilter, event: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

}

export function registerNooraFilter(): void;

/**
 * Provides supporting or validation text for a form field.
 *
 * @element noora-hint-text

 * @csspart hint - The hint container.

 */
export class NooraHintText extends HTMLElement {
  /** Sets the hint text. */
  label: string;
  /** Controls the semantic presentation. */
  variant: "default" | "destructive" | "disabled";

}

export function registerNooraHintText(): void;

/**
 * Renders an icon from Noora's shared icon catalog.
 *
 * @element noora-icon

 * @csspart icon - The rendered scalable vector graphic.

 */
export class NooraIcon extends HTMLElement {
  /** Selects the icon by its underscore or hyphen-separated name. */
  name: string;
  /** Provides an accessible label. Omit for decorative icons. */
  label: string | undefined;
  /** Sets the width and height in pixels. */
  size: number;
  /** Selects the icon shown while the parent element has an open data state. */
  activeName: string | undefined;
  /** Controls the animated transition between the default and active icons. */
  transition: "morph" | "crossfade_rotate" | "auto";

}

export function registerNooraIcon(): void;

/**
 * Opens a compact inline menu.
 *
 * @element noora-inline-dropdown
 * @slot icon - The trigger icon.
 * @slot - Declarative noora-dropdown-item children.
 * @csspart trigger - The menu trigger.
 * @csspart content - The menu content.
 * @fires noora-open-change - Emitted when the dropdown opens or closes.
 * @fires noora-select - Emitted when an enabled item is selected.
 */
export class NooraInlineDropdown extends HTMLElement {
  /** Sets the trigger label. */
  label: string;
  /** Controls the trigger dimensions. */
  size: "small" | "large";
  /** Disables the trigger. */
  disabled: boolean;
  /** Controls whether the menu is open. */
  open: boolean;
  /** Keeps the menu open after selection. */
  keepOpen: boolean;
  /** Defines menu items programmatically when declarative noora-dropdown-item children are not used. */
  items: Array<Record<string, unknown>>;
  addEventListener(type: "noora-open-change", listener: (this: NooraInlineDropdown, event: CustomEvent<{ open: boolean }>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: "noora-select", listener: (this: NooraInlineDropdown, event: CustomEvent<{ item: Record<string, unknown>; value: unknown }>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: NooraInlineDropdown, event: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

}

export function registerNooraInlineDropdown(): void;

/**
 * Labels a form control with optional supporting text.
 *
 * @element noora-label

 * @csspart label - The native label.
 * @csspart sublabel - The secondary label.

 */
export class NooraLabel extends HTMLElement {
  /** Sets the main label. */
  label: string;
  /** Sets secondary label text. */
  sublabel: string | undefined;
  /** Shows the required indicator. */
  required: boolean;
  /** Shows the disabled state. */
  disabled: boolean;
  /** Associates the label with a control identifier. */
  htmlFor: string | undefined;

}

export function registerNooraLabel(): void;

/**
 * Separates adjacent content with an optional inline label.
 *
 * @element noora-line-divider

 * @csspart divider - The divider.
 * @csspart text - The inline label.

 */
export class NooraLineDivider extends HTMLElement {
  /** Sets the optional inline label. */
  text: string | undefined;

}

export function registerNooraLineDivider(): void;

/**
 * Presents a text-oriented button or link.
 *
 * @element noora-link-button
 * @slot icon-left - An icon before the label.
 * @slot icon-right - An icon after the label.
 * @csspart control - The native link or button.

 */
export class NooraLinkButton extends HTMLElement {
  /** Sets the visible label. */
  label: string;
  /** Controls semantic emphasis. */
  variant: "primary" | "secondary" | "destructive";
  /** Controls dimensions. */
  size: "small" | "medium" | "large";
  /** Renders a native link to this location. */
  href: string | undefined;
  /** Underlines the label. */
  underline: boolean;
  /** Disables activation. */
  disabled: boolean;

}

export function registerNooraLinkButton(): void;

/**
 * Presents focused content above the current page.
 *
 * @element noora-modal
 * @slot trigger - The control that opens the modal.
 * @slot header-icon - A custom icon for icon headers.
 * @slot header-button - A custom header action.
 * @slot - The modal body.
 * @slot footer - The modal footer.
 * @csspart backdrop - The page backdrop.
 * @csspart content - The modal surface.
 * @csspart header - The modal header.
 * @csspart body - The modal body.
 * @csspart footer - The modal footer.
 * @fires noora-open-change - Emitted when the modal opens or closes.
 * @fires noora-dismiss - Emitted when the modal is dismissed without a direct open-property assignment.
 */
export class NooraModal extends HTMLElement {
  /** Sets the modal title. */
  title: string | undefined;
  /** Sets the large-header description. */
  description: string | undefined;
  /** Controls the header icon and semantics. */
  headerType: "default" | "icon" | "success" | "info" | "warning" | "error";
  /** Controls header dimensions. */
  headerSize: "small" | "large";
  /** Controls whether the modal is open. */
  open: boolean;
  /** Closes the modal when Escape is pressed. */
  closeOnEscape: boolean;
  /** Closes the modal when its backdrop is activated. */
  closeOnInteractOutside: boolean;
  addEventListener(type: "noora-open-change", listener: (this: NooraModal, event: CustomEvent<{ open: boolean }>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: "noora-dismiss", listener: (this: NooraModal, event: CustomEvent<{ reason: "close-button" | "escape" | "outside" | "action" }>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: NooraModal, event: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

}

export function registerNooraModal(): void;

/**
 * Provides a low-emphasis compact control.
 *
 * @element noora-neutral-button
 * @slot - The complete control content.
 * @csspart control - The native link or button.

 */
export class NooraNeutralButton extends HTMLElement {
  /** Controls the dimensions. */
  size: "small" | "medium" | "large";
  /** Renders a native link to this location. */
  href: string | undefined;
  /** Disables activation. */
  disabled: boolean;

}

export function registerNooraNeutralButton(): void;

/**
 * Navigates a finite collection of numbered pages.
 *
 * @element noora-pagination-group

 * @csspart pagination - The pagination container.
 * @csspart page - Each page control.
 * @csspart previous - The previous-page control.
 * @csspart next - The next-page control.
 * @fires noora-page-change - Emitted when a page control is activated.
 */
export class NooraPaginationGroup extends HTMLElement {
  /** Sets the selected page. */
  currentPage: number;
  /** Sets the total page count. */
  numberOfPages: number;
  /** Sets link locations by replacing `{page}` with the page number. */
  hrefTemplate: string | undefined;
  addEventListener(type: "noora-page-change", listener: (this: NooraPaginationGroup, event: CustomEvent<{ page: number }>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: NooraPaginationGroup, event: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

}

export function registerNooraPaginationGroup(): void;

/**
 * Displays contextual content anchored to a trigger.
 *
 * @element noora-popover
 * @slot trigger - The control that toggles the popover.
 * @slot - The popover content.
 * @csspart trigger - The trigger wrapper.
 * @csspart content - The popover surface.
 * @fires noora-open-change - Emitted when the popover opens or closes.
 */
export class NooraPopover extends HTMLElement {
  /** Controls whether the popover is open. */
  open: boolean;
  /** Enables modal interaction behavior. */
  modal: boolean;
  /** Focuses the first focusable element after opening. */
  autoFocus: boolean;
  /** Closes after outside interaction. */
  closeOnInteractOutside: boolean;
  /** Closes when Escape is pressed. */
  closeOnEscape: boolean;
  /** Controls the preferred placement. */
  placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end";
  addEventListener(type: "noora-open-change", listener: (this: NooraPopover, event: CustomEvent<{ open: boolean }>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: NooraPopover, event: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

}

export function registerNooraPopover(): void;

/**
 * Visualizes progress toward a maximum value.
 *
 * @element noora-progress-bar
 * @slot description - Supporting content below the bar.
 * @csspart progress - The progress container.
 * @csspart track - The complete track.
 * @csspart value - The filled track.

 */
export class NooraProgressBar extends HTMLElement {
  /** Sets the current value. */
  value: number;
  /** Sets the maximum value. */
  max: number;
  /** Sets the optional title. */
  title: string | undefined;

}

export function registerNooraProgressBar(): void;

/**
 * Selects one value from a list of options.
 *
 * @element noora-select
 * @slot - Declarative native option children.
 * @csspart select - The visible select trigger.
 * @csspart content - The options menu.
 * @csspart items - The options list.
 * @csspart hint - The supporting text.
 * @fires input - Emitted while the selected value changes.
 * @fires change - Emitted after the selected value changes.
 * @fires noora-open-change - Emitted when the options menu opens or closes.
 * @fires noora-select - Emitted with the selected option and value.
 */
export class NooraSelect extends HTMLElement {
  /** Sets the placeholder label. */
  label: string;
  /** Sets the submitted field name. */
  name: string;
  /** Gets or sets the selected value. */
  value: string;
  /** Adds supporting text. */
  hint: string | undefined;
  /** Disables the select. */
  disabled: boolean;
  /** Marks the field as required. */
  required: boolean;
  /** Controls whether the options menu is open. */
  open: boolean;
  /** Defines options programmatically when declarative option children are not used. Each option can include label, value, icon, and disabled fields. */
  options: Array<Record<string, unknown>>;
  /** The native select control. */
  readonly control: HTMLSelectElement | null;
  /** The associated form. */
  readonly form: HTMLFormElement | null;
  addEventListener(type: "input", listener: (this: NooraSelect, event: InputEvent) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: "change", listener: (this: NooraSelect, event: Event) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: "noora-open-change", listener: (this: NooraSelect, event: CustomEvent<{ open: boolean }>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: "noora-select", listener: (this: NooraSelect, event: CustomEvent<{ item: Record<string, unknown>; value: string }>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: NooraSelect, event: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

}

export function registerNooraSelect(): void;

/**
 * Displays a keyboard shortcut.
 *
 * @element noora-shortcut-key
 * @slot - The shortcut text.
 * @csspart key - The keyboard key.

 */
export class NooraShortcutKey extends HTMLElement {
  /** Controls the key dimensions. */
  size: "small" | "large";

}

export function registerNooraShortcutKey(): void;

/**
 * Groups declarative sidebar destinations.
 *
 * @element noora-sidebar-group
 * @slot - The noora-sidebar-item children.


 */
export class NooraSidebarGroup extends HTMLElement {
  /** Sets the group label. */
  label: string;
  /** Expands the group initially. */
  defaultOpen: boolean;
  /** Keeps the group expanded and removes its collapse interaction. */
  fixed: boolean;

}

export function registerNooraSidebarGroup(): void;

/**
 * Describes one declarative sidebar destination.
 *
 * @element noora-sidebar-item
 * @slot - The destination label.


 */
export class NooraSidebarItem extends HTMLElement {
  /** Sets the label instead of using text content. */
  label: string;
  /** Sets the navigation address. */
  href: string;
  /** Shows an icon before the label. */
  icon: string | undefined;
  /** Marks the destination as the current page. */
  selected: boolean;

}

export function registerNooraSidebarItem(): void;

/**
 * Provides responsive side navigation.
 *
 * @element noora-sidebar
 * @slot - Declarative noora-sidebar-item and noora-sidebar-group children.
 * @csspart sidebar - The sidebar container.
 * @csspart viewport - The scrollable navigation viewport.

 */
export class NooraSidebar extends HTMLElement {
  /** Sets the accessible navigation label. */
  label: string;
  /** Defines navigation programmatically when declarative sidebar children are not used. */
  items: Array<Record<string, unknown>>;

}

export function registerNooraSidebar(): void;

/**
 * Displays a compact workflow status with a semantic icon or dot.
 *
 * @element noora-status-badge
 * @slot - Custom label content that takes precedence over the label attribute.
 * @csspart badge - The status badge container.
 * @csspart icon - The semantic icon or dot.
 * @csspart label - The visible label.

 */
export class NooraStatusBadge extends HTMLElement {
  /** Chooses a semantic icon or a dot indicator. */
  type: "icon" | "dot";
  /** Sets the semantic status. */
  status: "success" | "error" | "warning" | "attention" | "disabled" | "in_progress";
  /** Sets the visible label. */
  label: string;

}

export function registerNooraStatusBadge(): void;

/**
 * Describes one declarative tab item.
 *
 * @element noora-tab-item
 * @slot - The tab label.


 */
export class NooraTabItem extends HTMLElement {
  /** Sets the label instead of using text content. */
  label: string;
  /** Sets the selected value. */
  value: string | undefined;
  /** Shows an icon before the label. */
  icon: string | undefined;
  /** Shows an icon after the label. */
  rightIcon: string | undefined;
  /** Renders the tab as a navigation link. */
  href: string | undefined;
  /** Disables selection. */
  disabled: boolean;

}

export function registerNooraTabItem(): void;

/**
 * Switches between related views or navigation destinations.
 *
 * @element noora-tab-menu
 * @slot - Declarative noora-tab-item children.
 * @csspart menu - The menu container.
 * @csspart item - Each tab item.
 * @fires noora-tab-change - Emitted when an enabled tab is selected.
 */
export class NooraTabMenu extends HTMLElement {
  /** Controls the menu layout. */
  orientation: "horizontal" | "vertical";
  /** Gets or sets the selected item value. */
  value: string | undefined;
  /** Defines tabs programmatically when declarative noora-tab-item children are not used. */
  items: Array<Record<string, unknown>>;
  addEventListener(type: "noora-tab-change", listener: (this: NooraTabMenu, event: CustomEvent<{ item: Record<string, unknown>; value: unknown }>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: NooraTabMenu, event: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

}

export function registerNooraTabMenu(): void;

/**
 * Describes one declarative table cell.
 *
 * @element noora-table-cell
 * @slot - The cell value.


 */
export class NooraTableCell extends HTMLElement {
  /** Associates the cell with a table column. */
  column: string;
  /** Sets the cell value instead of using text content. */
  value: string | undefined;

}

export function registerNooraTableCell(): void;

/**
 * Describes one declarative table column.
 *
 * @element noora-table-column
 * @slot - The column heading.


 */
export class NooraTableColumn extends HTMLElement {
  /** Sets the column key. */
  name: string;
  /** Sets the heading instead of using text content. */
  label: string;
  /** Shows an icon in the heading. */
  icon: string | undefined;
  /** Shows the current sort direction. */
  sortOrder: "asc" | "desc" | undefined;
  /** Formats property-driven cell values. */
  format: "date" | "number" | undefined;

}

export function registerNooraTableColumn(): void;

/**
 * Describes one declarative table row.
 *
 * @element noora-table-row
 * @slot - The noora-table-cell children.


 */
export class NooraTableRow extends HTMLElement {
  /** Sets the row identifier. */
  rowKey: string | undefined;

}

export function registerNooraTableRow(): void;

/**
 * Displays structured rows and columns with optional sorting and expansion.
 *
 * @element noora-table
 * @slot - Declarative noora-table-column and noora-table-row children.
 * @slot empty - A custom empty state.
 * @csspart table - The native table.
 * @csspart row - Each body row.
 * @csspart cell - Each body cell.
 * @fires noora-row-select - Emitted when a selectable row is activated.
 */
export class NooraTable extends HTMLElement {
  /** Selects the property used as each row key. */
  rowKey: string;
  /** Sets the empty-state title. */
  emptyTitle: string;
  /** Makes rows selectable. */
  selectable: boolean;
  /** Defines columns programmatically when declarative noora-table-column children are not used. */
  columns: Array<Record<string, unknown>>;
  /** Defines rows programmatically when declarative noora-table-row children are not used. */
  rows: Record<string, unknown>[];
  addEventListener(type: "noora-row-select", listener: (this: NooraTable, event: CustomEvent<{ index: number; row: Record<string, unknown> }>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: NooraTable, event: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

}

export function registerNooraTable(): void;

/**
 * Displays a compact label with optional icon and dismissal.
 *
 * @element noora-tag
 * @slot icon - A custom icon that takes precedence over the icon attribute.
 * @csspart tag - The tag container.
 * @csspart label - The label.
 * @csspart dismiss - The dismiss control.
 * @fires noora-dismiss - Emitted when the tag dismiss control is activated.
 */
export class NooraTag extends HTMLElement {
  /** Sets the visible label. */
  label: string;
  /** Shows a dismiss control. */
  dismissible: boolean;
  /** Adds a value to the dismiss event. */
  dismissValue: string | undefined;
  /** Sets a Noora icon before the label. */
  icon: string | undefined;
  /** Disables dismissal. */
  disabled: boolean;
  addEventListener(type: "noora-dismiss", listener: (this: NooraTag, event: CustomEvent<{ value: string | undefined }>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: NooraTag, event: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

}

export function registerNooraTag(): void;

/**
 * Collects multi-line text with labels, hints, errors, and character counting.
 *
 * @element noora-text-area

 * @csspart textarea - The native text area.
 * @csspart character-count - The character counter.
 * @fires input - Emitted while the text value changes.
 * @fires change - Emitted after the text value is committed.
 */
export class NooraTextArea extends HTMLElement {
  /** Sets the field label. */
  label: string | undefined;
  /** Sets secondary label text. */
  sublabel: string | undefined;
  /** Sets supporting text. */
  hint: string | undefined;
  /** Controls hint semantics. */
  hintVariant: "default" | "destructive" | "disabled";
  /** Sets the validation error. */
  error: string | undefined;
  /** Sets the submitted field name. */
  name: string;
  /** Gets or sets the field value. */
  value: string;
  /** Sets placeholder text. */
  placeholder: string | undefined;
  /** Marks the field as required. */
  required: boolean;
  /** Shows the required indicator. */
  showRequired: boolean;
  /** Sets the visible row count. */
  rows: number;
  /** Sets the maximum character count. */
  maxLength: number;
  /** Shows the current character count. */
  showCharacterCount: boolean;
  /** Controls native resizing. */
  resize: "none" | "both" | "horizontal" | "vertical";
  /** Disables the field. */
  disabled: boolean;
  /** The native text area. */
  readonly control: HTMLTextAreaElement | null;
  /** The associated form. */
  readonly form: HTMLFormElement | null;
  addEventListener(type: "input", listener: (this: NooraTextArea, event: InputEvent) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: "change", listener: (this: NooraTextArea, event: Event) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: NooraTextArea, event: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

}

export function registerNooraTextArea(): void;

/**
 * Renders a compact textual section divider.
 *
 * @element noora-text-divider

 * @csspart divider - The text divider.

 */
export class NooraTextDivider extends HTMLElement {
  /** Sets the divider text. */
  text: string;

}

export function registerNooraTextDivider(): void;

/**
 * Collects single-line text with Noora labels, hints, prefixes, and suffixes.
 *
 * @element noora-text-input
 * @slot prefix - A custom prefix for basic fields.
 * @slot suffix - A custom suffix.
 * @csspart input - The native input.
 * @csspart wrapper - The input wrapper.
 * @fires input - Emitted while the input value changes.
 * @fires change - Emitted after the input value is committed.
 */
export class NooraTextInput extends HTMLElement {
  /** Controls the semantic field presentation. */
  type: "basic" | "email" | "card_number" | "search" | "password";
  /** Sets the native input type for basic fields. */
  inputType: string;
  /** Sets the field label. */
  label: string | undefined;
  /** Sets secondary label text. */
  sublabel: string | undefined;
  /** Sets supporting text. */
  hint: string | undefined;
  /** Controls hint semantics. */
  hintVariant: "default" | "destructive" | "disabled";
  /** Sets the validation error. */
  error: string | undefined;
  /** Sets the submitted field name. */
  name: string;
  /** Gets or sets the field value. */
  value: string;
  /** Sets placeholder text. */
  placeholder: string | undefined;
  /** Marks the field as required. */
  required: boolean;
  /** Shows the required indicator. */
  showRequired: boolean;
  /** Sets the native minimum value. */
  min: string | undefined;
  /** Sets the native maximum value. */
  max: string | undefined;
  /** Sets the native step value. */
  step: string | undefined;
  /** Disables the field. */
  disabled: boolean;
  /** The native input. */
  readonly control: HTMLInputElement | null;
  /** The associated form. */
  readonly form: HTMLFormElement | null;
  addEventListener(type: "input", listener: (this: NooraTextInput, event: InputEvent) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: "change", listener: (this: NooraTextInput, event: Event) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: NooraTextInput, event: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

}

export function registerNooraTextInput(): void;

/**
 * Formats an absolute or relative date and time.
 *
 * @element noora-time

 * @csspart time - The native time element.

 */
export class NooraTime extends HTMLElement {
  /** Sets an international date and time string. */
  datetime: string | undefined;
  /** Includes the localized time. */
  showTime: boolean;
  /** Shows a relative time label. */
  relative: boolean;

}

export function registerNooraTime(): void;

/**
 * Turns a setting on or off.
 *
 * @element noora-toggle

 * @csspart root - The toggle label.
 * @csspart control - The visual switch.
 * @csspart label - The label text.
 * @fires input - Emitted while the checked state changes.
 * @fires change - Emitted after the checked state changes.
 */
export class NooraToggle extends HTMLElement {
  /** Sets the visible label. */
  label: string | undefined;
  /** Sets supporting text. */
  description: string | undefined;
  /** Controls the checked state. */
  checked: boolean;
  /** Disables interaction. */
  disabled: boolean;
  /** Sets the submitted field name. */
  name: string;
  /** Sets the submitted field value. */
  value: string;
  /** The native checkbox input. */
  readonly control: HTMLInputElement | null;
  /** The associated form. */
  readonly form: HTMLFormElement | null;
  addEventListener(type: "input", listener: (this: NooraToggle, event: InputEvent) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: "change", listener: (this: NooraToggle, event: Event) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: NooraToggle, event: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

}

export function registerNooraToggle(): void;

/**
 * Explains an element on pointer hover or keyboard focus.
 *
 * @element noora-tooltip
 * @slot trigger - The described element.
 * @slot icon - An icon shown by large tooltips.
 * @csspart trigger - The trigger wrapper.
 * @csspart content - The tooltip content.
 * @fires noora-open-change - Emitted when the tooltip opens or closes.
 */
export class NooraTooltip extends HTMLElement {
  /** Disables the tooltip. */
  disabled: boolean;
  /** Controls the content layout. */
  size: "small" | "large";
  /** Sets the tooltip title. */
  title: string;
  /** Sets the large-tooltip description. */
  description: string | undefined;
  /** Controls whether the tooltip is open. */
  open: boolean;
  addEventListener(type: "noora-open-change", listener: (this: NooraTooltip, event: CustomEvent<{ open: boolean }>) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: NooraTooltip, event: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

}

export function registerNooraTooltip(): void;

declare global {
  interface HTMLElementTagNameMap {
    "noora-alert": NooraAlert;
    "noora-avatar": NooraAvatar;
    "noora-badge": NooraBadge;
    "noora-banner": NooraBanner;
    "noora-breadcrumb-item": NooraBreadcrumbItem;
    "noora-breadcrumbs": NooraBreadcrumbs;
    "noora-button-dropdown": NooraButtonDropdown;
    "noora-button-group-item": NooraButtonGroupItem;
    "noora-button-group": NooraButtonGroup;
    "noora-button": NooraButton;
    "noora-card": NooraCard;
    "noora-chart-axis": NooraChartAxis;
    "noora-chart-category": NooraChartCategory;
    "noora-chart-grid": NooraChartGrid;
    "noora-chart-point": NooraChartPoint;
    "noora-chart-series": NooraChartSeries;
    "noora-chart": NooraChart;
    "noora-checkbox": NooraCheckbox;
    "noora-date-picker-preset": NooraDatePickerPreset;
    "noora-date-picker": NooraDatePicker;
    "noora-digit-input": NooraDigitInput;
    "noora-dismiss-icon": NooraDismissIcon;
    "noora-dropdown-item": NooraDropdownItem;
    "noora-dropdown": NooraDropdown;
    "noora-filter-definition": NooraFilterDefinition;
    "noora-filter-option": NooraFilterOption;
    "noora-filter-value": NooraFilterValue;
    "noora-filter": NooraFilter;
    "noora-hint-text": NooraHintText;
    "noora-icon": NooraIcon;
    "noora-inline-dropdown": NooraInlineDropdown;
    "noora-label": NooraLabel;
    "noora-line-divider": NooraLineDivider;
    "noora-link-button": NooraLinkButton;
    "noora-modal": NooraModal;
    "noora-neutral-button": NooraNeutralButton;
    "noora-pagination-group": NooraPaginationGroup;
    "noora-popover": NooraPopover;
    "noora-progress-bar": NooraProgressBar;
    "noora-select": NooraSelect;
    "noora-shortcut-key": NooraShortcutKey;
    "noora-sidebar-group": NooraSidebarGroup;
    "noora-sidebar-item": NooraSidebarItem;
    "noora-sidebar": NooraSidebar;
    "noora-status-badge": NooraStatusBadge;
    "noora-tab-item": NooraTabItem;
    "noora-tab-menu": NooraTabMenu;
    "noora-table-cell": NooraTableCell;
    "noora-table-column": NooraTableColumn;
    "noora-table-row": NooraTableRow;
    "noora-table": NooraTable;
    "noora-tag": NooraTag;
    "noora-text-area": NooraTextArea;
    "noora-text-divider": NooraTextDivider;
    "noora-text-input": NooraTextInput;
    "noora-time": NooraTime;
    "noora-toggle": NooraToggle;
    "noora-tooltip": NooraTooltip;
  }
}