// 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>) => void, options?: boolean | AddEventListenerOptions): void; addEventListener(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(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>) => void, options?: boolean | AddEventListenerOptions): void; addEventListener(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>; 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; value: unknown }>) => void, options?: boolean | AddEventListenerOptions): void; addEventListener(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>; addEventListener(type: "noora-action", listener: (this: NooraButtonDropdown, event: CustomEvent>) => 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; value: unknown }>) => void, options?: boolean | AddEventListenerOptions): void; addEventListener(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>; addEventListener(type: "noora-select", listener: (this: NooraButtonGroup, event: CustomEvent<{ index: number; item: Record; value: unknown }>) => void, options?: boolean | AddEventListenerOptions): void; addEventListener(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; /** 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(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(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>; 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>) => void, options?: boolean | AddEventListenerOptions): void; addEventListener(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(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>) => void, options?: boolean | AddEventListenerOptions): void; addEventListener(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>; 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; value: unknown }>) => void, options?: boolean | AddEventListenerOptions): void; addEventListener(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>; /** Gets or sets active filters programmatically. */ filters: Array>; addEventListener(type: "noora-filter-change", listener: (this: NooraFilter, event: CustomEvent<{ filters: Array> }>) => void, options?: boolean | AddEventListenerOptions): void; addEventListener(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>; 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; value: unknown }>) => void, options?: boolean | AddEventListenerOptions): void; addEventListener(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(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(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(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>; /** 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; value: string }>) => void, options?: boolean | AddEventListenerOptions): void; addEventListener(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>; } 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>; addEventListener(type: "noora-tab-change", listener: (this: NooraTabMenu, event: CustomEvent<{ item: Record; value: unknown }>) => void, options?: boolean | AddEventListenerOptions): void; addEventListener(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>; /** Defines rows programmatically when declarative noora-table-row children are not used. */ rows: Record[]; addEventListener(type: "noora-row-select", listener: (this: NooraTable, event: CustomEvent<{ index: number; row: Record }>) => void, options?: boolean | AddEventListenerOptions): void; addEventListener(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(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(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(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(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(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; } }