@porsche-design-system/components-angular
Version:
Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.
1,939 lines (1,936 loc) • 242 kB
TypeScript
export { componentsReady } from '@porsche-design-system/components-js';
import * as i0 from '@angular/core';
import { OnChanges, ChangeDetectorRef, ElementRef, EventEmitter, Renderer2, ModuleWithProviders } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import * as _porsche_design_system_components_angular from '@porsche-design-system/components-angular';
declare abstract class BaseComponent implements OnChanges {
protected el: HTMLElement;
constructor(cdr: ChangeDetectorRef, elementRef: ElementRef);
ngOnChanges(props: Record<string, {
previousValue: any;
currentValue: any;
firstChange: boolean;
}>): void;
static ɵfac: i0.ɵɵFactoryDeclaration<BaseComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<BaseComponent, "ng-component", never, {}, {}, never, never, true, never>;
}
declare const ACCORDIONS_BACKGROUNDS: readonly [
"canvas",
"surface",
"frosted",
"none"
];
type AccordionBackground = (typeof ACCORDIONS_BACKGROUNDS)[number];
declare const ACCORDION_ALIGN_MARKERS: readonly [
"start",
"end"
];
type AccordionAlignMarker = (typeof ACCORDION_ALIGN_MARKERS)[number];
type AccordionUpdateEventDetail = {
open: boolean;
};
declare const ACCORDION_HEADINGS_DEPRECATED: readonly [
"h1",
"h2",
"h3",
"h4",
"h5",
"h6"
];
/** @deprecated */
type AccordionHeadingTag = (typeof ACCORDION_HEADINGS_DEPRECATED)[number];
declare const ACCORDION_SIZES: readonly [
"small",
"medium"
];
/** @deprecated */
type AccordionSize = (typeof ACCORDION_SIZES)[number];
type Booleanish = boolean | "true" | "false";
type AriaAttributes = {
/** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */
"aria-activedescendant"?: string | undefined;
/** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */
"aria-atomic"?: Booleanish | undefined;
/**
* Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be
* presented if they are made.
*/
"aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
/** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. */
/**
* Defines a string value that labels the current element, which is intended to be converted into Braille.
* @see aria-label.
*/
"aria-braillelabel"?: string | undefined;
/**
* Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.
* @see aria-roledescription.
*/
"aria-brailleroledescription"?: string | undefined;
"aria-busy"?: Booleanish | undefined;
/**
* Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
* @see aria-pressed @see aria-selected.
*/
"aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
/**
* Defines the total number of columns in a table, grid, or treegrid.
* @see aria-colindex.
*/
"aria-colcount"?: number | undefined;
/**
* Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
* @see aria-colcount @see aria-colspan.
*/
"aria-colindex"?: number | undefined;
/**
* Defines a human readable text alternative of aria-colindex.
* @see aria-rowindextext.
*/
"aria-colindextext"?: string | undefined;
/**
* Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
* @see aria-colindex @see aria-rowspan.
*/
"aria-colspan"?: number | undefined;
/**
* Identifies the element (or elements) whose contents or presence are controlled by the current element.
* @see aria-owns.
*/
"aria-controls"?: string | undefined;
/** Indicates the element that represents the current item within a container or set of related elements. */
"aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
/**
* Identifies the element (or elements) that describes the object.
* @see aria-labelledby
*/
"aria-describedby"?: string | undefined;
/**
* Defines a string value that describes or annotates the current element.
* @see related aria-describedby.
*/
"aria-description"?: string | undefined;
/**
* Identifies the element that provides a detailed, extended description for the object.
* @see aria-describedby.
*/
"aria-details"?: string | undefined;
/**
* Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
* @see aria-hidden @see aria-readonly.
*/
"aria-disabled"?: Booleanish | undefined;
/**
* Indicates what functions can be performed when a dragged object is released on the drop target.
* @deprecated in ARIA 1.1
*/
"aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
/**
* Identifies the element that provides an error message for the object.
* @see aria-invalid @see aria-describedby.
*/
"aria-errormessage"?: string | undefined;
/** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
"aria-expanded"?: Booleanish | undefined;
/**
* Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
* allows assistive technology to override the general default of reading in document source order.
*/
"aria-flowto"?: string | undefined;
/**
* Indicates an element's "grabbed" state in a drag-and-drop operation.
* @deprecated in ARIA 1.1
*/
"aria-grabbed"?: Booleanish | undefined;
/** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */
"aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
/**
* Indicates whether the element is exposed to an accessibility API.
* @see aria-disabled.
*/
"aria-hidden"?: Booleanish | undefined;
/**
* Indicates the entered value does not conform to the format expected by the application.
* @see aria-errormessage.
*/
"aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
/** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */
"aria-keyshortcuts"?: string | undefined;
/**
* Defines a string value that labels the current element.
* @see aria-labelledby.
*/
"aria-label"?: string | undefined;
/**
* Identifies the element (or elements) that labels the current element.
* @see aria-describedby.
*/
"aria-labelledby"?: string | undefined;
/** Defines the hierarchical level of an element within a structure. */
"aria-level"?: number | undefined;
/** Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */
"aria-live"?: "off" | "assertive" | "polite" | undefined;
/** Indicates whether an element is modal when displayed. */
"aria-modal"?: Booleanish | undefined;
/** Indicates whether a text box accepts multiple lines of input or only a single line. */
"aria-multiline"?: Booleanish | undefined;
/** Indicates that the user may select more than one item from the current selectable descendants. */
"aria-multiselectable"?: Booleanish | undefined;
/** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */
"aria-orientation"?: "horizontal" | "vertical" | undefined;
/**
* Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
* between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
* @see aria-controls.
*/
"aria-owns"?: string | undefined;
/**
* Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
* A hint could be a sample value or a brief description of the expected format.
*/
"aria-placeholder"?: string | undefined;
/**
* Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
* @see aria-setsize.
*/
"aria-posinset"?: number | undefined;
/**
* Indicates the current "pressed" state of toggle buttons.
* @see aria-checked @see aria-selected.
*/
"aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
/**
* Indicates that the element is not editable, but is otherwise operable.
* @see aria-disabled.
*/
"aria-readonly"?: Booleanish | undefined;
/**
* Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
* @see aria-atomic.
*/
"aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
/** Indicates that user input is required on the element before a form may be submitted. */
"aria-required"?: Booleanish | undefined;
/** Defines a human-readable, author-localized description for the role of an element. */
"aria-roledescription"?: string | undefined;
/**
* Defines the total number of rows in a table, grid, or treegrid.
* @see aria-rowindex.
*/
"aria-rowcount"?: number | undefined;
/**
* Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
* @see aria-rowcount @see aria-rowspan.
*/
"aria-rowindex"?: number | undefined;
/**
* Defines a human readable text alternative of aria-rowindex.
* @see aria-colindextext.
*/
"aria-rowindextext"?: string | undefined;
/**
* Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
* @see aria-rowindex @see aria-colspan.
*/
"aria-rowspan"?: number | undefined;
/**
* Indicates the current "selected" state of various widgets.
* @see aria-checked @see aria-pressed.
*/
"aria-selected"?: Booleanish | undefined;
/**
* Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
* @see aria-posinset.
*/
"aria-setsize"?: number | undefined;
/** Indicates if items in a table or grid are sorted in ascending or descending order. */
"aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
/** Defines the maximum allowed value for a range widget. */
"aria-valuemax"?: number | undefined;
/** Defines the minimum allowed value for a range widget. */
"aria-valuemin"?: number | undefined;
/**
* Defines the current value for a range widget.
* @see aria-valuetext.
*/
"aria-valuenow"?: number | undefined;
/** Defines the human readable text alternative of aria-valuenow for a range widget. */
"aria-valuetext"?: string | undefined;
/** All the WAI-ARIA 1.1 role attribute values from https://w3.org/TR/wai-aria-1.1/#role_definitions */
role?: AriaRole;
};
type AriaRole = "alert" | "alertdialog" | "application" | "article" | "banner" | "button" | "cell" | "checkbox" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "dialog" | "directory" | "document" | "feed" | "figure" | "form" | "grid" | "gridcell" | "group" | "heading" | "img" | "link" | "list" | "listbox" | "listitem" | "log" | "main" | "marquee" | "math" | "menu" | "menubar" | "menuitem" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "none" | "note" | "option" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "search" | "searchbox" | "separator" | "slider" | "spinbutton" | "status" | "switch" | "tab" | "table" | "tablist" | "tabpanel" | "term" | "textbox" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem";
declare const ICON_NAMES: readonly [
"360",
"4-wheel-drive",
"accessibility",
"active-cabin-ventilation",
"add",
"adjust",
"aggregation",
"ai-3d-object",
"ai-code",
"ai-edit",
"ai-image",
"ai-scale",
"ai-sound",
"ai-spark",
"ai-spark-filled",
"ai-text",
"ai-video",
"arrow-compact-down",
"arrow-compact-left",
"arrow-compact-right",
"arrow-compact-up",
"arrow-double-down",
"arrow-double-left",
"arrow-double-right",
"arrow-double-up",
"arrow-down",
"arrow-down-left",
"arrow-down-right",
"arrow-first",
"arrow-head-down",
"arrow-head-left",
"arrow-head-right",
"arrow-head-up",
"arrow-last",
"arrow-left",
"arrow-right",
"arrow-up",
"arrow-up-left",
"arrow-up-right",
"arrows",
"attachment",
"augmented-reality",
"battery-empty",
"battery-empty-co2",
"battery-empty-fuel",
"battery-full",
"battery-half",
"battery-one-quarter",
"battery-three-quarters",
"bell",
"bookmark",
"bookmark-filled",
"brain",
"broadcast",
"cabriolet",
"calculator",
"calendar",
"camera",
"car",
"car-battery",
"card",
"charging-active",
"charging-network",
"charging-state",
"charging-station",
"chart",
"chat",
"check",
"city",
"climate",
"climate-control",
"clock",
"close",
"closed-caption",
"cloud",
"co2-class",
"co2-emission",
"color-picker",
"compare",
"compass",
"configurate",
"copy",
"country-road",
"coupe",
"cubic-capacity",
"cut",
"delete",
"disable",
"dislike",
"dislike-filled",
"document",
"door",
"download",
"drag",
"duration",
"ear",
"edit",
"email",
"error",
"error-filled",
"exclamation",
"exclamation-filled",
"external",
"fast-backward",
"fast-forward",
"file-csv",
"file-excel",
"filter",
"fingerprint",
"flag",
"flash",
"fuel-station",
"garage",
"genuine-parts",
"geo-localization",
"gift",
"globe",
"grid",
"grip",
"group",
"hand",
"heart",
"heart-filled",
"highway",
"highway-filled",
"history",
"home",
"horn",
"image",
"increase",
"information",
"information-filled",
"key",
"laptop",
"leaf",
"leather",
"light",
"like",
"like-filled",
"limousine",
"linked",
"list",
"locate",
"lock",
"lock-open",
"logo-apple-carplay",
"logo-apple-music",
"logo-apple-podcast",
"logo-baidu",
"logo-delicious",
"logo-digg",
"logo-facebook",
"logo-foursquare",
"logo-gmail",
"logo-google",
"logo-hatena",
"logo-instagram",
"logo-kaixin",
"logo-kakaotalk",
"logo-kununu",
"logo-linkedin",
"logo-naver",
"logo-pinterest",
"logo-qq",
"logo-qq-share",
"logo-reddit",
"logo-skyrock",
"logo-snapchat",
"logo-sohu",
"logo-spotify",
"logo-tecent",
"logo-telegram",
"logo-tiktok",
"logo-tumblr",
"logo-twitter",
"logo-viber",
"logo-vk",
"logo-wechat",
"logo-weibo",
"logo-whatsapp",
"logo-x",
"logo-xing",
"logo-yahoo",
"logo-youku",
"logo-youtube",
"logout",
"map",
"menu-dots-horizontal",
"menu-dots-vertical",
"menu-lines",
"microphone",
"minus",
"mobile",
"moon",
"new-chat",
"news",
"north-arrow",
"oil-can",
"online-search",
"parking-brake",
"parking-light",
"paste",
"pause",
"phone",
"pin",
"pin-filled",
"pivot",
"play",
"play-filled",
"plug",
"plus",
"preheating",
"price-tag",
"printer",
"purchase",
"push-pin",
"push-pin-off",
"qr",
"qr-off",
"question",
"question-filled",
"racing-flag",
"radar",
"radio",
"refresh",
"replay",
"reset",
"return",
"road",
"roof-closed",
"roof-open",
"route",
"rss",
"save",
"screen",
"search",
"seat",
"send",
"service-technician",
"share",
"shopping-bag",
"shopping-bag-filled",
"shopping-cart",
"shopping-cart-filled",
"sidebar",
"sidelights",
"skip-backward",
"skip-forward",
"snowflake",
"sort",
"stack",
"star",
"star-filled",
"steering-wheel",
"stop",
"stopwatch",
"subtract",
"success",
"success-filled",
"sun",
"suv",
"switch",
"tablet",
"tachometer",
"theme",
"tire",
"trigger-finger",
"truck",
"turismo",
"unlinked",
"upload",
"user",
"user-filled",
"user-group",
"user-manual",
"video",
"view",
"view-off",
"volume-off",
"volume-up",
"warning",
"warning-filled",
"weather",
"weight",
"wifi",
"work",
"wrench",
"wrenches",
"zoom-in",
"zoom-out"
];
type IconName = typeof ICON_NAMES[number];
declare const FLAG_NAMES: readonly [
"ad",
"ae",
"al",
"am",
"ar",
"at",
"au",
"az",
"ba",
"bd",
"be",
"bg",
"bh",
"bn",
"bo",
"br",
"by",
"ca",
"ch",
"cl",
"cn",
"co",
"cr",
"cw",
"cy",
"cz",
"de",
"dk",
"do",
"dz",
"ec",
"ee",
"eg",
"es",
"fi",
"fr",
"gb",
"ge",
"gh",
"gi",
"gr",
"gt",
"hk",
"hn",
"hr",
"ht",
"hu",
"id",
"ie",
"il",
"in",
"is",
"it",
"jm",
"jo",
"jp",
"ke",
"kh",
"kr",
"kw",
"kz",
"lb",
"li",
"lk",
"lt",
"lu",
"lv",
"ma",
"mc",
"md",
"me",
"mk",
"mn",
"mo",
"mq",
"mt",
"mu",
"mx",
"my",
"ng",
"nl",
"no",
"nz",
"om",
"pa",
"pe",
"pf",
"ph",
"pk",
"pl",
"pr",
"pt",
"py",
"qa",
"re",
"ro",
"rs",
"ru",
"sa",
"se",
"sg",
"si",
"sk",
"sv",
"th",
"tn",
"tr",
"tt",
"tw",
"ua",
"us",
"uy",
"uz",
"ve",
"vn",
"xx",
"za"
];
type FlagName = typeof FLAG_NAMES[number];
declare const FORM_STATES: readonly [
"none",
"error",
"success"
];
type FormState = (typeof FORM_STATES)[number];
declare const BUTTON_ARIA_ATTRIBUTES: readonly [
"aria-label",
"aria-description",
"aria-expanded",
"aria-pressed",
"aria-haspopup"
];
type ButtonAriaAttribute = (typeof BUTTON_ARIA_ATTRIBUTES)[number];
declare const LINK_ARIA_ATTRIBUTES: readonly [
"aria-label",
"aria-description",
"aria-current",
"aria-haspopup"
];
type LinkAriaAttribute = (typeof LINK_ARIA_ATTRIBUTES)[number];
declare const breakpoints: readonly [
"base",
"xs",
"s",
"m",
"l",
"xl",
"xxl"
];
type Breakpoint = (typeof breakpoints)[number];
type BreakpointValues<T> = {
[key in Breakpoint]?: T;
} & {
base: T;
};
type BreakpointCustomizable<T> = T | BreakpointValues<T>;
declare const LINK_TARGETS: readonly [
"_self",
"_blank",
"_parent",
"_top"
];
type LinkTarget = (typeof LINK_TARGETS)[number] | string;
declare const TILE_ASPECT_RATIOS: readonly [
"1/1",
"4/3",
"3/4",
"16/9",
"9/16",
"auto"
];
type TileAspectRatio = (typeof TILE_ASPECT_RATIOS)[number];
declare const TILE_SIZES: readonly [
"medium",
"large",
"inherit"
];
type TileSize = (typeof TILE_SIZES)[number];
declare const TILE_WEIGHTS: readonly [
"regular",
"semi-bold"
];
type TileWeight = (typeof TILE_WEIGHTS)[number];
declare const TILE_ALIGNS: readonly [
"top",
"bottom"
];
type TileAlign = (typeof TILE_ALIGNS)[number];
type MultiSelectState = FormState;
type MultiSelectDropdownDirection = SelectComponentsDropdownDirection;
type MultiSelectChangeEventDetail = {
name: string;
value: string[] | number[];
};
type MultiSelectToggleEventDetail = {
open: boolean;
};
type SelectState = FormState;
type SelectDropdownDirection = SelectComponentsDropdownDirection;
type SelectChangeEventDetail = {
name: string;
value: string | number | null | undefined;
};
type SelectToggleEventDetail = {
open: boolean;
};
declare const SELECT_DROPDOWN_DIRECTIONS: readonly [
"down",
"up",
"auto"
];
type SelectComponentsDropdownDirection = (typeof SELECT_DROPDOWN_DIRECTIONS)[number];
declare const ALIGN_LABELS: readonly [
"start",
"end"
];
type AlignLabel = (typeof ALIGN_LABELS)[number];
declare const BUTTON_TYPES: readonly [
"button",
"submit",
"reset"
];
type ButtonType = (typeof BUTTON_TYPES)[number];
declare const LINK_BUTTON_VARIANTS: readonly [
"primary",
"secondary"
];
type LinkButtonVariant = (typeof LINK_BUTTON_VARIANTS)[number];
type LinkButtonIconName = IconName | "none";
type ButtonVariant = LinkButtonVariant;
type LinkVariant = LinkButtonVariant;
type PorscheDesignSystem = {
[key: `${number}.${number}.${number}${`-rc.${number}` | ""}`]: {
prefixes: string[];
isReady: () => Promise<void>;
readyResolve: () => void;
};
cdn: {
url: string;
prefixes: string[];
};
};
type SelectedAriaAttributes<T extends keyof AriaAttributes> = Pick<AriaAttributes, T>;
type SelectedAriaRole<T> = {
role: Extract<AriaRole, T>;
};
declare const AI_TAG_VARIANTS: readonly [
"abbreviation",
"generated",
"modified"
];
type AiTagVariant = (typeof AI_TAG_VARIANTS)[number];
declare const AI_TAG_TRANSLATIONS: {
bg_BG: {
short: string;
long: string;
generated: string;
modified: string;
};
bs_BA: {
short: string;
long: string;
generated: string;
modified: string;
};
cs_CZ: {
short: string;
long: string;
generated: string;
modified: string;
};
da_DK: {
short: string;
long: string;
generated: string;
modified: string;
};
de_DE: {
short: string;
long: string;
generated: string;
modified: string;
};
el_GR: {
short: string;
long: string;
generated: string;
modified: string;
};
en_CY: {
short: string;
long: string;
generated: string;
modified: string;
};
en_GB: {
short: string;
long: string;
generated: string;
modified: string;
};
en_US: {
short: string;
long: string;
generated: string;
modified: string;
};
es_ES: {
short: string;
long: string;
generated: string;
modified: string;
};
et_EE: {
short: string;
long: string;
generated: string;
modified: string;
};
fi_FI: {
short: string;
long: string;
generated: string;
modified: string;
};
fr_FR: {
short: string;
long: string;
generated: string;
modified: string;
};
he_IL: {
short: string;
long: string;
generated: string;
modified: string;
};
hr_HR: {
short: string;
long: string;
generated: string;
modified: string;
};
hu_HU: {
short: string;
long: string;
generated: string;
modified: string;
};
is_IS: {
short: string;
long: string;
generated: string;
modified: string;
};
it_IT: {
short: string;
long: string;
generated: string;
modified: string;
};
lt_LT: {
short: string;
long: string;
generated: string;
modified: string;
};
lv_LV: {
short: string;
long: string;
generated: string;
modified: string;
};
me_ME: {
short: string;
long: string;
generated: string;
modified: string;
};
mk_MK: {
short: string;
long: string;
generated: string;
modified: string;
};
mt_MT: {
short: string;
long: string;
generated: string;
modified: string;
};
nb_NO: {
short: string;
long: string;
generated: string;
modified: string;
};
nl_NL: {
short: string;
long: string;
generated: string;
modified: string;
};
pl_PL: {
short: string;
long: string;
generated: string;
modified: string;
};
pt_PT: {
short: string;
long: string;
generated: string;
modified: string;
};
ro_RO: {
short: string;
long: string;
generated: string;
modified: string;
};
ru_RU: {
short: string;
long: string;
generated: string;
modified: string;
};
sk_SK: {
short: string;
long: string;
generated: string;
modified: string;
};
sl_SI: {
short: string;
long: string;
generated: string;
modified: string;
};
sr_RS: {
short: string;
long: string;
generated: string;
modified: string;
};
sv_SE: {
short: string;
long: string;
generated: string;
modified: string;
};
tr_TR: {
short: string;
long: string;
generated: string;
modified: string;
};
uk_UA: {
short: string;
long: string;
generated: string;
modified: string;
};
};
type AiTagLocale = keyof typeof AI_TAG_TRANSLATIONS;
declare const BANNER_POSITIONS: readonly [
"top",
"bottom"
];
type BannerPosition = (typeof BANNER_POSITIONS)[number];
declare const BANNER_STATES: readonly [
"info",
"success",
"warning",
"error"
];
type BannerState = (typeof BANNER_STATES)[number];
declare const BANNER_HEADING_TAGS: readonly [
"h1",
"h2",
"h3",
"h4",
"h5",
"h6"
];
type BannerHeadingTag = (typeof BANNER_HEADING_TAGS)[number];
type ButtonIcon = LinkButtonIconName;
type ButtonPureType = ButtonType;
type ButtonPureIcon = LinkButtonIconName;
type ButtonPureAriaAttribute = ButtonAriaAttribute;
type ButtonPureAlignLabel = AlignLabel;
declare const BUTTON_PURE_SIZES: readonly [
"2xs",
"xs",
"sm",
"md",
"lg",
"xl",
"2xl",
"3xl",
"4xl",
"5xl",
"inherit",
"xx-small",
"x-small",
"small",
"medium",
"large",
"x-large"
];
type ButtonPureSize = (typeof BUTTON_PURE_SIZES)[number];
declare const BUTTON_PURE_COLORS: readonly [
"primary",
"contrast-higher",
"contrast-high",
"contrast-medium",
"inherit"
];
type ButtonPureColor = (typeof BUTTON_PURE_COLORS)[number];
type ButtonTileAriaAttribute = ButtonAriaAttribute;
type ButtonTileIcon = LinkButtonIconName;
type ButtonTileType = ButtonType;
type ButtonTileAspectRatio = TileAspectRatio;
type ButtonTileSize = TileSize;
type ButtonTileWeight = TileWeight;
type ButtonTileAlign = TileAlign;
type CanvasSidebarStartUpdateEventDetail = {
open: boolean;
};
declare const CANVAS_BACKGROUNDS: readonly [
"canvas",
"surface"
];
type CanvasBackground = (typeof CANVAS_BACKGROUNDS)[number];
declare const CAROUSEL_WIDTHS: readonly [
"basic",
"extended",
"wide",
"full"
];
type CarouselWidth = (typeof CAROUSEL_WIDTHS)[number];
declare const CAROUSEL_SLIDES_PER_PAGE: (string | number)[];
type CarouselSlidesPerPage = (typeof CAROUSEL_SLIDES_PER_PAGE)[number];
declare const CAROUSEL_ALIGN_HEADERS: readonly [
"start",
"center"
];
type CarouselAlignHeader = (typeof CAROUSEL_ALIGN_HEADERS)[number];
declare const CAROUSEL_HEADING_SIZES: readonly [
"x-large",
"xx-large"
];
type CarouselHeadingSize = (typeof CAROUSEL_HEADING_SIZES)[number];
declare const CAROUSEL_ARIA_ATTRIBUTES: readonly [
"aria-label"
];
type CarouselAriaAttribute = (typeof CAROUSEL_ARIA_ATTRIBUTES)[number];
type CarouselInternationalization = Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>>;
type CarouselUpdateEventDetail = {
activeIndex: number;
previousIndex: number;
};
declare const CAROUSEL_ALIGN_CONTROLS: readonly [
"start",
"center",
"auto"
];
type CarouselAlignControls = (typeof CAROUSEL_ALIGN_CONTROLS)[number];
type CheckboxState = FormState;
type CheckboxBlurEventDetail = Event;
type CheckboxChangeEventDetail = Event;
type CrestTarget = LinkTarget;
type CrestAriaAttribute = LinkAriaAttribute;
declare const DISPLAY_TAGS: readonly [
"h1",
"h2",
"h3",
"h4",
"h5",
"h6"
];
type DisplayTag = (typeof DISPLAY_TAGS)[number];
declare const DISPLAY_SIZES: readonly [
"small",
"medium",
"large",
"inherit"
];
type DisplaySize = (typeof DISPLAY_SIZES)[number];
declare const DISPLAY_COLORS: readonly [
"primary",
"inherit"
];
type DisplayColor = (typeof DISPLAY_COLORS)[number];
declare const DISPLAY_ALIGNS: readonly [
"start",
"center",
"end",
"inherit"
];
type DisplayAlign = (typeof DISPLAY_ALIGNS)[number];
declare const DIVIDER_COLORS: readonly [
"contrast-lower",
"contrast-low",
"contrast-medium",
"contrast-high"
];
type DividerColor = (typeof DIVIDER_COLORS)[number];
declare const DIVIDER_DIRECTIONS: readonly [
"vertical",
"horizontal"
];
type DividerDirection = (typeof DIVIDER_DIRECTIONS)[number];
declare const DRILLDOWN_ARIA_ATTRIBUTES: readonly [
"aria-label"
];
type DrilldownAriaAttribute = (typeof DRILLDOWN_ARIA_ATTRIBUTES)[number];
type DrilldownUpdateEventDetail = {
activeIdentifier: string | undefined;
};
type DrilldownLinkTarget = LinkTarget;
type DrilldownLinkAriaAttribute = LinkAriaAttribute;
declare const FIELDSET_LABEL_SIZES: readonly [
"small",
"medium"
];
type FieldsetLabelSize = (typeof FIELDSET_LABEL_SIZES)[number];
type FieldsetState = FormState;
declare const FLAG_ARIA_ATTRIBUTES: readonly [
"aria-label"
];
type FlagAriaAttribute = (typeof FLAG_ARIA_ATTRIBUTES)[number];
declare const FLAG_SIZES: readonly [
"2xs",
"xs",
"sm",
"md",
"lg",
"xl",
"2xl",
"3xl",
"4xl",
"5xl",
"inherit",
"xx-small",
"x-small",
"small",
"medium",
"large",
"x-large",
"xx-large"
];
type FlagSize = (typeof FLAG_SIZES)[number];
declare const BACKDROPS: readonly [
"blur",
"shading"
];
type Backdrop = (typeof BACKDROPS)[number];
declare const FLYOUT_BACKGROUNDS: readonly [
"canvas",
"surface"
];
type FlyoutBackground = (typeof FLYOUT_BACKGROUNDS)[number];
declare const FLYOUT_POSITIONS: readonly [
"start",
"end"
];
type FlyoutPosition = (typeof FLYOUT_POSITIONS)[number];
declare const FLYOUT_FOOTER_BEHAVIOR: readonly [
"sticky",
"fixed"
];
type FlyoutFooterBehavior = (typeof FLYOUT_FOOTER_BEHAVIOR)[number];
declare const FLYOUT_ARIA_ATTRIBUTES: readonly [
"aria-label"
];
type FlyoutAriaAttribute = (typeof FLYOUT_ARIA_ATTRIBUTES)[number];
type FlyoutMotionVisibleEndEventDetail = TransitionEvent;
type FlyoutMotionHiddenEndEventDetail = TransitionEvent;
type FlyoutBackdrop = Backdrop;
declare const HEADING_TAGS: readonly [
"h1",
"h2",
"h3",
"h4",
"h5",
"h6"
];
type HeadingTag = (typeof HEADING_TAGS)[number];
declare const HEADING_COLORS: readonly [
"primary",
"contrast-higher",
"contrast-high",
"contrast-medium",
"inherit"
];
type HeadingColor = (typeof HEADING_COLORS)[number];
declare const HEADING_WEIGHTS: readonly [
"normal",
"semibold",
"bold",
"regular",
"semi-bold"
];
type HeadingWeight = (typeof HEADING_WEIGHTS)[number];
declare const HEADING_ALIGNS: readonly [
"start",
"center",
"end",
"inherit"
];
type HeadingAlign = (typeof HEADING_ALIGNS)[number];
declare const HEADING_SIZES: readonly [
"2xs",
"xs",
"sm",
"md",
"lg",
"xl",
"2xl",
"3xl",
"4xl",
"5xl",
"inherit",
"small",
"medium",
"large",
"x-large",
"xx-large"
];
type HeadingSize = (typeof HEADING_SIZES)[number];
declare const HEADING_HYPHENS: readonly [
"none",
"manual",
"auto",
"inherit"
];
type HeadingHyphens = (typeof HEADING_HYPHENS)[number];
declare const ICON_ARIA_ATTRIBUTES: readonly [
"aria-label"
];
type IconAriaAttribute = (typeof ICON_ARIA_ATTRIBUTES)[number];
declare const ICON_SIZES: readonly [
"2xs",
"xs",
"sm",
"md",
"lg",
"xl",
"2xl",
"3xl",
"4xl",
"5xl",
"inherit",
"xx-small",
"x-small",
"small",
"medium",
"large",
"x-large",
"xx-large"
];
type IconSize = (typeof ICON_SIZES)[number];
declare const ICON_COLORS: readonly [
"primary",
"contrast-higher",
"contrast-high",
"contrast-medium",
"contrast-low",
"contrast-lower",
"success",
"warning",
"error",
"info",
"inherit"
];
type IconColor = (typeof ICON_COLORS)[number];
declare const INLINE_NOTIFICATION_STATES: readonly [
"info",
"success",
"warning",
"error"
];
type InlineNotificationState = (typeof INLINE_NOTIFICATION_STATES)[number];
type InlineNotificationActionIcon = IconName;
declare const INLINE_NOTIFICATION_HEADING_TAGS: readonly [
"h1",
"h2",
"h3",
"h4",
"h5",
"h6"
];
type InlineNotificationHeadingTag = (typeof INLINE_NOTIFICATION_HEADING_TAGS)[number];
type InputDateState = FormState;
type InputDateChangeEventDetail = Event;
type InputDateBlurEventDetail = Event;
type InputDateInputEventDetail = InputEvent;
type InputEmailState = FormState;
type InputEmailChangeEventDetail = Event;
type InputEmailBlurEventDetail = Event;
type InputEmailInputEventDetail = InputEvent;
type InputMonthState = FormState;
type InputMonthChangeEventDetail = Event;
type InputMonthBlurEventDetail = Event;
type InputMonthInputEventDetail = InputEvent;
type InputNumberState = FormState;
type InputNumberChangeEventDetail = Event;
type InputNumberBlurEventDetail = Event;
type InputNumberInputEventDetail = InputEvent;
type InputPasswordState = FormState;
type InputPasswordChangeEventDetail = Event;
type InputPasswordBlurEventDetail = Event;
type InputPasswordInputEventDetail = InputEvent;
type InputSearchState = FormState;
type InputSearchChangeEventDetail = Event;
type InputSearchBlurEventDetail = Event;
type InputSearchInputEventDetail = InputEvent;
declare const INPUT_SEARCH_ARIA_ATTRIBUTES: readonly [
"role",
"aria-autocomplete",
"aria-controls",
"aria-expanded",
"aria-haspopup",
"aria-label"
];
type InputSearchAriaAttribute = (typeof INPUT_SEARCH_ARIA_ATTRIBUTES)[number];
type InputTelState = FormState;
type InputTelChangeEventDetail = Event;
type InputTelBlurEventDetail = Event;
type InputTelInputEventDetail = InputEvent;
type InputTextState = FormState;
type InputTextChangeEventDetail = Event;
type InputTextBlurEventDetail = Event;
type InputTextInputEventDetail = InputEvent;
type InputTimeState = FormState;
type InputTimeChangeEventDetail = Event;
type InputTimeBlurEventDetail = Event;
type InputTimeInputEventDetail = InputEvent;
type InputUrlState = FormState;
type InputUrlChangeEventDetail = Event;
type InputUrlBlurEventDetail = Event;
type InputUrlInputEventDetail = InputEvent;
type InputWeekState = FormState;
type InputWeekChangeEventDetail = Event;
type InputWeekBlurEventDetail = Event;
type InputWeekInputEventDetail = InputEvent;
type LinkIcon = LinkButtonIconName;
type LinkPureIcon = LinkButtonIconName;
type LinkPureAriaAttribute = LinkAriaAttribute;
type LinkPureAlignLabel = AlignLabel;
type LinkPureTarget = LinkTarget;
declare const LINK_PURE_SIZES: readonly [
"2xs",
"xs",
"sm",
"md",
"lg",
"xl",
"2xl",
"3xl",
"4xl",
"5xl",
"inherit",
"xx-small",
"x-small",
"small",
"medium",
"large",
"x-large"
];
type LinkPureSize = (typeof LINK_PURE_SIZES)[number];
declare const LINK_PURE_COLORS: readonly [
"primary",
"contrast-higher",
"contrast-high",
"contrast-medium",
"inherit"
];
type LinkPureColor = (typeof LINK_PURE_COLORS)[number];
type LinkTileTarget = LinkTarget;
type LinkTileAriaAttribute = LinkAriaAttribute;
type LinkTileAspectRatio = TileAspectRatio;
type LinkTileSize = TileSize;
type LinkTileAlign = TileAlign;
type LinkTileWeight = (typeof TILE_WEIGHTS)[number];
type LinkTileProductTarget = LinkTarget;
type LinkTileProductLikeEventDetail = {
liked: boolean;
};
declare const TILE_PRODUCT_ASPECT_RATIOS: readonly [
"3/4",
"9/16"
];
type LinkTileProductAspectRatio = (typeof TILE_PRODUCT_ASPECT_RATIOS)[number];
declare const MODAL_ARIA_ATTRIBUTES: readonly [
"aria-label",
"role"
];
type ModalAriaAttribute = (typeof MODAL_ARIA_ATTRIBUTES)[number];
declare const MODAL_BACKGROUNDS: readonly [
"canvas",
"surface"
];
type ModalBackground = (typeof MODAL_BACKGROUNDS)[number];
type ModalBackdrop = Backdrop;
type ModalMotionVisibleEndEventDetail = TransitionEvent;
type ModalMotionHiddenEndEventDetail = TransitionEvent;
declare const MODEL_SIGNATURES_MANIFEST: {
"718": {
src: string;
width: number;
height: number;
};
"911": {
src: string;
width: number;
height: number;
};
boxster: {
src: string;
width: number;
height: number;
};
cayenne: {
src: string;
width: number;
height: number;
};
cayman: {
src: string;
width: number;
height: number;
};
"gt3-rs": {
src: string;
width: number;
height: number;
};
gt3: {
src: string;
width: number;
height: number;
};
gts: {
src: string;
width: number;
height: number;
};
macan: {
src: string;
width: number;
height: number;
};
panamera: {
src: string;
width: number;
height: number;
};
taycan: {
src: string;
width: number;
height: number;
};
"turbo-s": {
src: string;
width: number;
height: number;
};
turbo: {
src: string;
width: number;
height: number;
};
};
declare const MODEL_SIGNATURE_FETCH_PRIORITY: readonly [
"low",
"high",
"auto"
];
type ModelSignatureFetchPriority = (typeof MODEL_SIGNATURE_FETCH_PRIORITY)[number];
declare const MODEL_SIGNATURE_SIZES: readonly [
"small",
"inherit"
];
type ModelSignatureSize = (typeof MODEL_SIGNATURE_SIZES)[number];
type ModelSignatureModel = keyof typeof MODEL_SIGNATURES_MANIFEST;
declare const MODEL_SIGNATURE_COLORS: readonly [
"primary",
"contrast-low",
"contrast-medium",
"contrast-high",
"inherit"
];
type ModelSignatureColor = (typeof MODEL_SIGNATURE_COLORS)[number];
type PaginationUpdateEventDetail = {
page: number;
previousPage: number;
};
type PaginationInternationalization = Partial<Record<"root" | "prev" | "next" | "page", string>>;
declare const PIN_CODE_TYPES: readonly [
"number",
"password"
];
type PinCodeType = (typeof PIN_CODE_TYPES)[number];
declare const PIN_CODE_LENGTHS: readonly [
1,
2,
3,
4,
5,
6
];
type PinCodeLength = (typeof PIN_CODE_LENGTHS)[number];
type PinCodeChangeEventDetail = {
value: string;
isComplete: boolean;
};
type PinCodeState = FormState;
declare const POPOVER_DIRECTIONS: readonly [
"top",
"right",
"bottom",
"left"
];
type PopoverDirection = (typeof POPOVER_DIRECTIONS)[number];
declare const POPOVER_ARIA_ATTRIBUTES: readonly [
"aria-label"
];
type PopoverAriaAttribute = (typeof POPOVER_ARIA_ATTRIBUTES)[number];
declare const GROUP_DIRECTIONS: readonly [
"row",
"column"
];
type GroupDirection = (typeof GROUP_DIRECTIONS)[number];
type RadioGroupState = FormState;
type RadioGroupDirection = GroupDirection;
type RadioGroupChangeEventDetail = Event;
declare const SCROLLER_ALIGN_SCROLL_INDICATORS: readonly [
"top",
"center"
];
/** @deprecated */
type ScrollerAlignScrollIndicator = (typeof SCROLLER_ALIGN_SCROLL_INDICATORS)[number];
declare const SCROLLER_ARIA_ATTRIBUTES: readonly [
"role",
"aria-label",
"aria-description"
];
type ScrollerAriaAttribute = (typeof SCROLLER_ARIA_ATTRIBUTES)[number];
/** @deprecated */
type ScrollerScrollToPosition = {
scrollPosition: number;
isSmooth?: boolean;
} | string;
type SegmentedControlChangeEventDetail = {
value: string | number;
};
declare const SEGMENTED_CONTROL_COLUMNS: (string | number)[];
type SegmentedControlColumns = (typeof SEGMENTED_CONTROL_COLUMNS)[number];
type SegmentedControlState = FormState;
type SegmentedControlItemIcon = LinkButtonIconName;
declare const SEGMENTED_CONTROL_ITEM_ARIA_ATTRIBUTES: readonly [
"aria-label"
];
type SegmentedControlItemAriaAttribute = (typeof SEGMENTED_CONTROL_ITEM_ARIA_ATTRIBUTES)[number];
declare const SHEET_ARIA_ATTRIBUTES: readonly [
"aria-label",
"role"
];
type SheetAriaAttribute = (typeof SHEET_ARIA_ATTRIBUTES)[number];
declare const SHEET_BACKGROUNDS: readonly [
"canvas",
"surface"
];
type SheetBackground = (typeof SHEET_BACKGROUNDS)[number];
type SheetMotionVisibleEndEventDetail = TransitionEvent;
type SheetMotionHiddenEndEventDetail = TransitionEvent;
declare const SPINNER_COLORS: readonly [
"primary",
"inherit"
];
type SpinnerColor = (typeof SPINNER_COLORS)[number];
declare const SPINNER_SIZES: readonly [
"2xs",
"xs",
"sm",
"md",
"lg",
"xl",
"2xl",
"3xl",
"4xl",
"5xl",
"inherit",
"small",
"medium",
"large"
];
type SpinnerSize = (typeof SPINNER_SIZES)[number];
declare const SPINNER_ARIA_ATTRIBUTES: readonly [
"aria-label"
];
type SpinnerAriaAttribute = (typeof SPINNER_ARIA_ATTRIBUTES)[number];
declare const STEPPER_HORIZONTAL_SIZES: readonly [
"small",
"medium"
];
type StepperHorizontalSize = (typeof STEPPER_HORIZONTAL_SIZES)[number];
type StepperHorizontalUpdateEventDetail = {
activeStepIndex: number;
};
declare const STEPPER_ITEM_STATES: readonly [
"current",
"complete",
"warning"
];
type StepperHorizontalItemState = (typeof STEPPER_ITEM_STATES)[number];
type SwitchAlignLabel = AlignLabel;
type SwitchUpdateEventDetail = {
checked: boolean;
};
type Direction = "asc" | "desc";
declare const TABLE_LAYOUTS: readonly [
"auto",
"fixed"
];
type TableLayout = (typeof TABLE_LAYOUTS)[number];
type TableHeadCellSort = {
id: string;
active?: boolean;
direction?: Direction;
};
type TableUpdateEventDetail = TableHeadCellSort;
declare const TABS_ARIA_ATTRIBUTES: readonly [
"aria-label",
"aria-description"
];
type TabsAriaAttribute = (typeof TABS_ARIA_ATTRIBUTES)[number];
declare const TABS_SIZES: readonly [
"small",
"medium"
];
type TabsSize = (typeof TABS_SIZES)[number];
declare const TABS_BACKGROUNDS: readonly [
"canvas",
"surface",
"frosted",
"none"
];
type TabsBackground = (typeof TABS_BACKGROUNDS)[number];
declare const TABS_WEIGHTS: readonly [
"regular",
"semi-bold"
];
/** @deprecated */
type TabsWeight = (typeof TABS_WEIGHTS)[number];
type TabsUpdateEventDetail = {
activeTabIndex: number;
};
declare const TABS_BAR_ARIA_ATTRIBUTES: readonly [
"aria-label",
"aria-description"
];
type TabsBarAriaAttribute = (typeof TABS_BAR_ARIA_ATTRIBUTES)[number];
declare const TABS_BAR_BACKGROUNDS: readonly [
"canvas",
"surface",
"frosted",
"none"
];
type TabsBarBackground = (typeof TABS_BAR_BACKGROUNDS)[number];
declare const TABS_BAR_SIZES: readonly [
"small",
"medium"
];
type TabsBarSize = (typeof TABS_BAR_SIZES)[number];
type TabsBarUpdateEventDetail = {
activeTabIndex: number;
};
declare const TABS_BAR_WEIGHTS: readonly [
"regular",
"semi-bold"
];
/** @deprecated */
type TabsBarWeight = (typeof TABS_BAR_WEIGHTS)[number];
type TagIcon = IconName | "none";
declare const TAG_VARIANTS: readonly [
"primary",
"secondary",
"info",
"info-frosted",
"warning",
"warning-frosted",
"success",
"success-frosted",
"error",
"error-frosted"
];
type TagVariant = (typeof TAG_VARIANTS)[number];
declare const TAG_DISMISSIBLE_ARIA_ATTRIBUTES: readonly [
"aria-label"
];
type TagDismissibleAriaAttribute = (typeof TAG_DISMISSIBLE_ARIA_ATTRIBUTES)[number];
declare const TEXT_TAGS: readonly [
"p",
"span",
"div",
"address",
"blockquote",
"figcaption",
"cite",
"time",
"legend"
];
type TextTag = (typeof TEXT_TAGS)[number];
declare const TEXT_COLORS: readonly [
"primary",
"contrast-higher",
"contrast-high",
"contrast-medium",
"success",
"warning",
"error",
"info",
"inherit"
];
type TextColor = (typeof TEXT_COLORS)[number];
declare const TEXT_WEIGHTS: readonly [
"normal",
"semibold",
"bold",
"regular",
"semi-bold"
];
type TextWeight = (typeof TEXT_WEIGHTS)[number];
declare const TEXT_ALIGNS: readonly [
"start",
"center",
"end",
"inherit"
];
type TextAlign = (typeof TEXT_ALIGNS)[number];
declare const TEXT_SIZES: readonly [
"2xs",
"xs",
"sm",
"md",
"lg",
"xl",
"2xl",
"3xl",
"4xl",
"5xl",
"inherit",
"xx-small",
"x-small",
"small",
"medium",
"large",
"x-large"
];
type TextSize = (typeof TEXT_SIZES)[number];
declare const TEXT_HYPHENS: readonly [
"none",
"manual",
"auto",
"inherit"
];
type TextHyphens = (typeof TEXT_HYPHENS)[number];
declare const TEXT_LIST_TYPES: readonly [
"unordered",
"numbered",
"alphabetically"
];
type TextListType = (typeof TEXT_LIST_TYPES)[number];
type TextareaState = FormState;
declare const TEXTAREA_WRAPS: readonly [
"hard",
"soft",
"off"
];
type TextareaWrap = (typeof TEXTAREA_WRAPS)[number];
declare const TEXTAREA_RESIZE: readonly [
"none",
"both",
"horizontal",
"vertical",
"block",
"inline"
];
type TextareaResize = (typeof TEXTAREA_RESIZE)[number];
type TextareaChangeEventDetail = Event;
type TextareaBlurEventDetail = Event;
type TextareaInputEventDetail = InputEvent;
declare const TOAST_STATES: readonly [
"info",
"success",
"warning",
"error"
];
type ToastState = (typeof TOAST_STATES)[number];
type ToastMessage = {
text: string;
state?: ToastState;
};
declare const WORDMARK_SIZES: readonly [
"small",
"inherit"
];
type WordmarkSize = (typeof WORDMARK_SIZES)[number];
type WordmarkTarget = LinkTarget;
type WordmarkAriaAttribute = LinkAriaAttribute;
type PCheckboxProps = {
/**
* Reflects the checkbox's current checked state and allows setting the initial checked value on load.
* @default false
*/
checked?: boolean;
/**
* Reduces the checkbox size and spacing for a more compact layout.
* @default false
*/
compact?: boolean;
/**
* Disables the checkbox, preventing all interaction. The value is not submitted with the form.
* @default false
*/
disabled?: boolean;
/**
* Associates the checkbox with a form element by its ID when not directly nested inside it.
*/
form?: string;
/**
* Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values.
* @default false
*/
hideLabel?: BreakpointCustomizable<boolean>;
/**
* Puts the checkbox into an indeterminate state, indicating that a group of child items is only partially selected.
* @default false
*/
indeterminate?: boolean;
/**
* Sets the visible label text displayed next to the checkbox.
* @default ''
*/
label?: string;
/**
* @experimental Disables the checkbox and displays a loading spinner to indicate an ongoing operation.
* @default false
*/
loading?: boolean;
/**
* Sets the validation feedback message displayed below the checkbox when `state` is `success` or `error`.
* @default ''
*/
message?: string;
/**
* Sets the name submitted with the form data to identify this checkbox's value on the server.
* @default ''
*/
name?: string;
/**
* Marks the checkbox as required — form submission is blocked unless the checkbox is checked.
* @default false
*/
required?: boolean;
/**
* Sets the validation state, controlling the visual appearance and style of the feedback message (`none`, `success`, `error`).
* @default 'none'
*/
state?: CheckboxState;
/**
* Sets the value submitted with the form data when the checkbox is checked. Unchecked checkboxes are excluded from form submissions.
* @default 'on'
*/
value?: string;
};
declare class PCheckbox extends BaseComponent implements ControlValueAc