@porsche-design-system/components-react
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,855 lines (1,854 loc) • 48.6 kB
TypeScript
declare const ACCORDIONS_BACKGROUNDS: readonly [
"canvas",
"surface",
"frosted",
"none"
];
export type AccordionBackground = (typeof ACCORDIONS_BACKGROUNDS)[number];
declare const ACCORDION_ALIGN_MARKERS: readonly [
"start",
"end"
];
export type AccordionAlignMarker = (typeof ACCORDION_ALIGN_MARKERS)[number];
export type AccordionUpdateEventDetail = {
open: boolean;
};
declare const ACCORDION_HEADINGS_DEPRECATED: readonly [
"h1",
"h2",
"h3",
"h4",
"h5",
"h6"
];
/** @deprecated */
export type AccordionHeadingTag = (typeof ACCORDION_HEADINGS_DEPRECATED)[number];
declare const ACCORDION_SIZES: readonly [
"small",
"medium"
];
/** @deprecated */
export type AccordionSize = (typeof ACCORDION_SIZES)[number];
export type Booleanish = boolean | "true" | "false";
export 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;
};
export 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"
];
export 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"
];
export type FlagName = typeof FLAG_NAMES[number];
declare const FORM_STATES: readonly [
"none",
"error",
"success"
];
export type FormState = (typeof FORM_STATES)[number];
declare const BUTTON_ARIA_ATTRIBUTES: readonly [
"aria-label",
"aria-description",
"aria-expanded",
"aria-pressed",
"aria-haspopup"
];
export type ButtonAriaAttribute = (typeof BUTTON_ARIA_ATTRIBUTES)[number];
declare const LINK_ARIA_ATTRIBUTES: readonly [
"aria-label",
"aria-description",
"aria-current",
"aria-haspopup"
];
export type LinkAriaAttribute = (typeof LINK_ARIA_ATTRIBUTES)[number];
declare const breakpoints: readonly [
"base",
"xs",
"s",
"m",
"l",
"xl",
"xxl"
];
export type Breakpoint = (typeof breakpoints)[number];
export type BreakpointValues<T> = {
[key in Breakpoint]?: T;
} & {
base: T;
};
export type BreakpointCustomizable<T> = T | BreakpointValues<T>;
declare const LINK_TARGETS: readonly [
"_self",
"_blank",
"_parent",
"_top"
];
export type LinkTarget = (typeof LINK_TARGETS)[number] | string;
declare const TILE_ASPECT_RATIOS: readonly [
"1/1",
"4/3",
"3/4",
"16/9",
"9/16",
"auto"
];
export type TileAspectRatio = (typeof TILE_ASPECT_RATIOS)[number];
declare const TILE_SIZES: readonly [
"medium",
"large",
"inherit"
];
export type TileSize = (typeof TILE_SIZES)[number];
declare const TILE_WEIGHTS: readonly [
"regular",
"semi-bold"
];
export type TileWeight = (typeof TILE_WEIGHTS)[number];
declare const TILE_ALIGNS: readonly [
"top",
"bottom"
];
export type TileAlign = (typeof TILE_ALIGNS)[number];
export type MultiSelectState = FormState;
export type MultiSelectDropdownDirection = SelectComponentsDropdownDirection;
export type MultiSelectChangeEventDetail = {
name: string;
value: string[] | number[];
};
export type MultiSelectToggleEventDetail = {
open: boolean;
};
export type SelectState = FormState;
export type SelectDropdownDirection = SelectComponentsDropdownDirection;
export type SelectChangeEventDetail = {
name: string;
value: string | number | null | undefined;
};
export type SelectToggleEventDetail = {
open: boolean;
};
declare const SELECT_DROPDOWN_DIRECTIONS: readonly [
"down",
"up",
"auto"
];
export type SelectComponentsDropdownDirection = (typeof SELECT_DROPDOWN_DIRECTIONS)[number];
declare const ALIGN_LABELS: readonly [
"start",
"end"
];
export type AlignLabel = (typeof ALIGN_LABELS)[number];
declare const BUTTON_TYPES: readonly [
"button",
"submit",
"reset"
];
export type ButtonType = (typeof BUTTON_TYPES)[number];
declare const LINK_BUTTON_VARIANTS: readonly [
"primary",
"secondary"
];
export type LinkButtonVariant = (typeof LINK_BUTTON_VARIANTS)[number];
export type LinkButtonIconName = IconName | "none";
export type ButtonVariant = LinkButtonVariant;
export type LinkVariant = LinkButtonVariant;
export type PorscheDesignSystem = {
[key: `${number}.${number}.${number}${`-rc.${number}` | ""}`]: {
prefixes: string[];
isReady: () => Promise<void>;
readyResolve: () => void;
};
cdn: {
url: string;
prefixes: string[];
};
};
export type SelectedAriaAttributes<T extends keyof AriaAttributes> = Pick<AriaAttributes, T>;
export type SelectedAriaRole<T> = {
role: Extract<AriaRole, T>;
};
declare const AI_TAG_VARIANTS: readonly [
"abbreviation",
"generated",
"modified"
];
export 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;
};
};
export type AiTagLocale = keyof typeof AI_TAG_TRANSLATIONS;
declare const BANNER_POSITIONS: readonly [
"top",
"bottom"
];
export type BannerPosition = (typeof BANNER_POSITIONS)[number];
declare const BANNER_STATES: readonly [
"info",
"success",
"warning",
"error"
];
export type BannerState = (typeof BANNER_STATES)[number];
declare const BANNER_HEADING_TAGS: readonly [
"h1",
"h2",
"h3",
"h4",
"h5",
"h6"
];
export type BannerHeadingTag = (typeof BANNER_HEADING_TAGS)[number];
export type ButtonIcon = LinkButtonIconName;
export type ButtonPureType = ButtonType;
export type ButtonPureIcon = LinkButtonIconName;
export type ButtonPureAriaAttribute = ButtonAriaAttribute;
export 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"
];
export type ButtonPureSize = (typeof BUTTON_PURE_SIZES)[number];
declare const BUTTON_PURE_COLORS: readonly [
"primary",
"contrast-higher",
"contrast-high",
"contrast-medium",
"inherit"
];
export type ButtonPureColor = (typeof BUTTON_PURE_COLORS)[number];
export type ButtonTileAriaAttribute = ButtonAriaAttribute;
export type ButtonTileIcon = LinkButtonIconName;
export type ButtonTileType = ButtonType;
export type ButtonTileAspectRatio = TileAspectRatio;
export type ButtonTileSize = TileSize;
export type ButtonTileWeight = TileWeight;
export type ButtonTileAlign = TileAlign;
export type CanvasSidebarStartUpdateEventDetail = {
open: boolean;
};
declare const CANVAS_BACKGROUNDS: readonly [
"canvas",
"surface"
];
export type CanvasBackground = (typeof CANVAS_BACKGROUNDS)[number];
declare const CAROUSEL_WIDTHS: readonly [
"basic",
"extended",
"wide",
"full"
];
export type CarouselWidth = (typeof CAROUSEL_WIDTHS)[number];
declare const CAROUSEL_SLIDES_PER_PAGE: (string | number)[];
export type CarouselSlidesPerPage = (typeof CAROUSEL_SLIDES_PER_PAGE)[number];
declare const CAROUSEL_ALIGN_HEADERS: readonly [
"start",
"center"
];
export type CarouselAlignHeader = (typeof CAROUSEL_ALIGN_HEADERS)[number];
declare const CAROUSEL_HEADING_SIZES: readonly [
"x-large",
"xx-large"
];
export type CarouselHeadingSize = (typeof CAROUSEL_HEADING_SIZES)[number];
declare const CAROUSEL_ARIA_ATTRIBUTES: readonly [
"aria-label"
];
export type CarouselAriaAttribute = (typeof CAROUSEL_ARIA_ATTRIBUTES)[number];
export type CarouselInternationalization = Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>>;
export type CarouselUpdateEventDetail = {
activeIndex: number;
previousIndex: number;
};
declare const CAROUSEL_ALIGN_CONTROLS: readonly [
"start",
"center",
"auto"
];
export type CarouselAlignControls = (typeof CAROUSEL_ALIGN_CONTROLS)[number];
export type CheckboxState = FormState;
export type CheckboxBlurEventDetail = Event;
export type CheckboxChangeEventDetail = Event;
export type CrestTarget = LinkTarget;
export type CrestAriaAttribute = LinkAriaAttribute;
declare const DISPLAY_TAGS: readonly [
"h1",
"h2",
"h3",
"h4",
"h5",
"h6"
];
export type DisplayTag = (typeof DISPLAY_TAGS)[number];
declare const DISPLAY_SIZES: readonly [
"small",
"medium",
"large",
"inherit"
];
export type DisplaySize = (typeof DISPLAY_SIZES)[number];
declare const DISPLAY_COLORS: readonly [
"primary",
"inherit"
];
export type DisplayColor = (typeof DISPLAY_COLORS)[number];
declare const DISPLAY_ALIGNS: readonly [
"start",
"center",
"end",
"inherit"
];
export type DisplayAlign = (typeof DISPLAY_ALIGNS)[number];
declare const DIVIDER_COLORS: readonly [
"contrast-lower",
"contrast-low",
"contrast-medium",
"contrast-high"
];
export type DividerColor = (typeof DIVIDER_COLORS)[number];
declare const DIVIDER_DIRECTIONS: readonly [
"vertical",
"horizontal"
];
export type DividerDirection = (typeof DIVIDER_DIRECTIONS)[number];
declare const DRILLDOWN_ARIA_ATTRIBUTES: readonly [
"aria-label"
];
export type DrilldownAriaAttribute = (typeof DRILLDOWN_ARIA_ATTRIBUTES)[number];
export type DrilldownUpdateEventDetail = {
activeIdentifier: string | undefined;
};
export type DrilldownLinkTarget = LinkTarget;
export type DrilldownLinkAriaAttribute = LinkAriaAttribute;
declare const FIELDSET_LABEL_SIZES: readonly [
"small",
"medium"
];
export type FieldsetLabelSize = (typeof FIELDSET_LABEL_SIZES)[number];
export type FieldsetState = FormState;
declare const FLAG_ARIA_ATTRIBUTES: readonly [
"aria-label"
];
export 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"
];
export type FlagSize = (typeof FLAG_SIZES)[number];
declare const BACKDROPS: readonly [
"blur",
"shading"
];
export type Backdrop = (typeof BACKDROPS)[number];
declare const FLYOUT_BACKGROUNDS: readonly [
"canvas",
"surface"
];
export type FlyoutBackground = (typeof FLYOUT_BACKGROUNDS)[number];
declare const FLYOUT_POSITIONS: readonly [
"start",
"end"
];
export type FlyoutPosition = (typeof FLYOUT_POSITIONS)[number];
declare const FLYOUT_FOOTER_BEHAVIOR: readonly [
"sticky",
"fixed"
];
export type FlyoutFooterBehavior = (typeof FLYOUT_FOOTER_BEHAVIOR)[number];
declare const FLYOUT_ARIA_ATTRIBUTES: readonly [
"aria-label"
];
export type FlyoutAriaAttribute = (typeof FLYOUT_ARIA_ATTRIBUTES)[number];
export type FlyoutMotionVisibleEndEventDetail = TransitionEvent;
export type FlyoutMotionHiddenEndEventDetail = TransitionEvent;
export type FlyoutBackdrop = Backdrop;
declare const HEADING_TAGS: readonly [
"h1",
"h2",
"h3",
"h4",
"h5",
"h6"
];
export type HeadingTag = (typeof HEADING_TAGS)[number];
declare const HEADING_COLORS: readonly [
"primary",
"contrast-higher",
"contrast-high",
"contrast-medium",
"inherit"
];
export type HeadingColor = (typeof HEADING_COLORS)[number];
declare const HEADING_WEIGHTS: readonly [
"normal",
"semibold",
"bold",
"regular",
"semi-bold"
];
export type HeadingWeight = (typeof HEADING_WEIGHTS)[number];
declare const HEADING_ALIGNS: readonly [
"start",
"center",
"end",
"inherit"
];
export 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"
];
export type HeadingSize = (typeof HEADING_SIZES)[number];
declare const HEADING_HYPHENS: readonly [
"none",
"manual",
"auto",
"inherit"
];
export type HeadingHyphens = (typeof HEADING_HYPHENS)[number];
declare const ICON_ARIA_ATTRIBUTES: readonly [
"aria-label"
];
export 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"
];
export 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"
];
export type IconColor = (typeof ICON_COLORS)[number];
declare const INLINE_NOTIFICATION_STATES: readonly [
"info",
"success",
"warning",
"error"
];
export type InlineNotificationState = (typeof INLINE_NOTIFICATION_STATES)[number];
export type InlineNotificationActionIcon = IconName;
declare const INLINE_NOTIFICATION_HEADING_TAGS: readonly [
"h1",
"h2",
"h3",
"h4",
"h5",
"h6"
];
export type InlineNotificationHeadingTag = (typeof INLINE_NOTIFICATION_HEADING_TAGS)[number];
export type InputDateState = FormState;
export type InputDateChangeEventDetail = Event;
export type InputDateBlurEventDetail = Event;
export type InputDateInputEventDetail = InputEvent;
export type InputEmailState = FormState;
export type InputEmailChangeEventDetail = Event;
export type InputEmailBlurEventDetail = Event;
export type InputEmailInputEventDetail = InputEvent;
export type InputMonthState = FormState;
export type InputMonthChangeEventDetail = Event;
export type InputMonthBlurEventDetail = Event;
export type InputMonthInputEventDetail = InputEvent;
export type InputNumberState = FormState;
export type InputNumberChangeEventDetail = Event;
export type InputNumberBlurEventDetail = Event;
export type InputNumberInputEventDetail = InputEvent;
export type InputPasswordState = FormState;
export type InputPasswordChangeEventDetail = Event;
export type InputPasswordBlurEventDetail = Event;
export type InputPasswordInputEventDetail = InputEvent;
export type InputSearchState = FormState;
export type InputSearchChangeEventDetail = Event;
export type InputSearchBlurEventDetail = Event;
export type InputSearchInputEventDetail = InputEvent;
declare const INPUT_SEARCH_ARIA_ATTRIBUTES: readonly [
"role",
"aria-autocomplete",
"aria-controls",
"aria-expanded",
"aria-haspopup",
"aria-label"
];
export type InputSearchAriaAttribute = (typeof INPUT_SEARCH_ARIA_ATTRIBUTES)[number];
export type InputTelState = FormState;
export type InputTelChangeEventDetail = Event;
export type InputTelBlurEventDetail = Event;
export type InputTelInputEventDetail = InputEvent;
export type InputTextState = FormState;
export type InputTextChangeEventDetail = Event;
export type InputTextBlurEventDetail = Event;
export type InputTextInputEventDetail = InputEvent;
export type InputTimeState = FormState;
export type InputTimeChangeEventDetail = Event;
export type InputTimeBlurEventDetail = Event;
export type InputTimeInputEventDetail = InputEvent;
export type InputUrlState = FormState;
export type InputUrlChangeEventDetail = Event;
export type InputUrlBlurEventDetail = Event;
export type InputUrlInputEventDetail = InputEvent;
export type InputWeekState = FormState;
export type InputWeekChangeEventDetail = Event;
export type InputWeekBlurEventDetail = Event;
export type InputWeekInputEventDetail = InputEvent;
export type LinkIcon = LinkButtonIconName;
export type LinkPureIcon = LinkButtonIconName;
export type LinkPureAriaAttribute = LinkAriaAttribute;
export type LinkPureAlignLabel = AlignLabel;
export 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"
];
export type LinkPureSize = (typeof LINK_PURE_SIZES)[number];
declare const LINK_PURE_COLORS: readonly [
"primary",
"contrast-higher",
"contrast-high",
"contrast-medium",
"inherit"
];
export type LinkPureColor = (typeof LINK_PURE_COLORS)[number];
export type LinkTileTarget = LinkTarget;
export type LinkTileAriaAttribute = LinkAriaAttribute;
export type LinkTileAspectRatio = TileAspectRatio;
export type LinkTileSize = TileSize;
export type LinkTileAlign = TileAlign;
export type LinkTileWeight = (typeof TILE_WEIGHTS)[number];
export type LinkTileProductTarget = LinkTarget;
export type LinkTileProductLikeEventDetail = {
liked: boolean;
};
declare const TILE_PRODUCT_ASPECT_RATIOS: readonly [
"3/4",
"9/16"
];
export type LinkTileProductAspectRatio = (typeof TILE_PRODUCT_ASPECT_RATIOS)[number];
declare const MODAL_ARIA_ATTRIBUTES: readonly [
"aria-label",
"role"
];
export type ModalAriaAttribute = (typeof MODAL_ARIA_ATTRIBUTES)[number];
declare const MODAL_BACKGROUNDS: readonly [
"canvas",
"surface"
];
export type ModalBackground = (typeof MODAL_BACKGROUNDS)[number];
export type ModalBackdrop = Backdrop;
export type ModalMotionVisibleEndEventDetail = TransitionEvent;
export 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"
];
export type ModelSignatureFetchPriority = (typeof MODEL_SIGNATURE_FETCH_PRIORITY)[number];
declare const MODEL_SIGNATURE_SIZES: readonly [
"small",
"inherit"
];
export type ModelSignatureSize = (typeof MODEL_SIGNATURE_SIZES)[number];
export type ModelSignatureModel = keyof typeof MODEL_SIGNATURES_MANIFEST;
declare const MODEL_SIGNATURE_COLORS: readonly [
"primary",
"contrast-low",
"contrast-medium",
"contrast-high",
"inherit"
];
export type ModelSignatureColor = (typeof MODEL_SIGNATURE_COLORS)[number];
export type PaginationUpdateEventDetail = {
page: number;
previousPage: number;
};
export type PaginationInternationalization = Partial<Record<"root" | "prev" | "next" | "page", string>>;
declare const PIN_CODE_TYPES: readonly [
"number",
"password"
];
export type PinCodeType = (typeof PIN_CODE_TYPES)[number];
declare const PIN_CODE_LENGTHS: readonly [
1,
2,
3,
4,
5,
6
];
export type PinCodeLength = (typeof PIN_CODE_LENGTHS)[number];
export type PinCodeChangeEventDetail = {
value: string;
isComplete: boolean;
};
export type PinCodeState = FormState;
declare const POPOVER_DIRECTIONS: readonly [
"top",
"right",
"bottom",
"left"
];
export type PopoverDirection = (typeof POPOVER_DIRECTIONS)[number];
declare const POPOVER_ARIA_ATTRIBUTES: readonly [
"aria-label"
];
export type PopoverAriaAttribute = (typeof POPOVER_ARIA_ATTRIBUTES)[number];
declare const GROUP_DIRECTIONS: readonly [
"row",
"column"
];
export type GroupDirection = (typeof GROUP_DIRECTIONS)[number];
export type RadioGroupState = FormState;
export type RadioGroupDirection = GroupDirection;
export type RadioGroupChangeEventDetail = Event;
declare const SCROLLER_ALIGN_SCROLL_INDICATORS: readonly [
"top",
"center"
];
/** @deprecated */
export type ScrollerAlignScrollIndicator = (typeof SCROLLER_ALIGN_SCROLL_INDICATORS)[number];
declare const SCROLLER_ARIA_ATTRIBUTES: readonly [
"role",
"aria-label",
"aria-description"
];
export type ScrollerAriaAttribute = (typeof SCROLLER_ARIA_ATTRIBUTES)[number];
/** @deprecated */
export type ScrollerScrollToPosition = {
scrollPosition: number;
isSmooth?: boolean;
} | string;
export type SegmentedControlChangeEventDetail = {
value: string | number;
};
declare const SEGMENTED_CONTROL_COLUMNS: (string | number)[];
export type SegmentedControlColumns = (typeof SEGMENTED_CONTROL_COLUMNS)[number];
export type SegmentedControlState = FormState;
export type SegmentedControlItemIcon = LinkButtonIconName;
declare const SEGMENTED_CONTROL_ITEM_ARIA_ATTRIBUTES: readonly [
"aria-label"
];
export type SegmentedControlItemAriaAttribute = (typeof SEGMENTED_CONTROL_ITEM_ARIA_ATTRIBUTES)[number];
declare const SHEET_ARIA_ATTRIBUTES: readonly [
"aria-label",
"role"
];
export type SheetAriaAttribute = (typeof SHEET_ARIA_ATTRIBUTES)[number];
declare const SHEET_BACKGROUNDS: readonly [
"canvas",
"surface"
];
export type SheetBackground = (typeof SHEET_BACKGROUNDS)[number];
export type SheetMotionVisibleEndEventDetail = TransitionEvent;
export type SheetMotionHiddenEndEventDetail = TransitionEvent;
declare const SPINNER_COLORS: readonly [
"primary",
"inherit"
];
export 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"
];
export type SpinnerSize = (typeof SPINNER_SIZES)[number];
declare const SPINNER_ARIA_ATTRIBUTES: readonly [
"aria-label"
];
export type SpinnerAriaAttribute = (typeof SPINNER_ARIA_ATTRIBUTES)[number];
declare const STEPPER_HORIZONTAL_SIZES: readonly [
"small",
"medium"
];
export type StepperHorizontalSize = (typeof STEPPER_HORIZONTAL_SIZES)[number];
export type StepperHorizontalUpdateEventDetail = {
activeStepIndex: number;
};
declare const STEPPER_ITEM_STATES: readonly [
"current",
"complete",
"warning"
];
export type StepperHorizontalItemState = (typeof STEPPER_ITEM_STATES)[number];
export type SwitchAlignLabel = AlignLabel;
export type SwitchUpdateEventDetail = {
checked: boolean;
};
export type Direction = "asc" | "desc";
declare const TABLE_LAYOUTS: readonly [
"auto",
"fixed"
];
export type TableLayout = (typeof TABLE_LAYOUTS)[number];
export type TableHeadCellSort = {
id: string;
active?: boolean;
direction?: Direction;
};
export type TableUpdateEventDetail = TableHeadCellSort;
declare const TABS_ARIA_ATTRIBUTES: readonly [
"aria-label",
"aria-description"
];
export type TabsAriaAttribute = (typeof TABS_ARIA_ATTRIBUTES)[number];
declare const TABS_SIZES: readonly [
"small",
"medium"
];
export type TabsSize = (typeof TABS_SIZES)[number];
declare const TABS_BACKGROUNDS: readonly [
"canvas",
"surface",
"frosted",
"none"
];
export type TabsBackground = (typeof TABS_BACKGROUNDS)[number];
declare const TABS_WEIGHTS: readonly [
"regular",
"semi-bold"
];
/** @deprecated */
export type TabsWeight = (typeof TABS_WEIGHTS)[number];
export type TabsUpdateEventDetail = {
activeTabIndex: number;
};
declare const TABS_BAR_ARIA_ATTRIBUTES: readonly [
"aria-label",
"aria-description"
];
export type TabsBarAriaAttribute = (typeof TABS_BAR_ARIA_ATTRIBUTES)[number];
declare const TABS_BAR_BACKGROUNDS: readonly [
"canvas",
"surface",
"frosted",
"none"
];
export type TabsBarBackground = (typeof TABS_BAR_BACKGROUNDS)[number];
declare const TABS_BAR_SIZES: readonly [
"small",
"medium"
];
export type TabsBarSize = (typeof TABS_BAR_SIZES)[number];
export type TabsBarUpdateEventDetail = {
activeTabIndex: number;
};
declare const TABS_BAR_WEIGHTS: readonly [
"regular",
"semi-bold"
];
/** @deprecated */
export type TabsBarWeight = (typeof TABS_BAR_WEIGHTS)[number];
export type TagIcon = IconName | "none";
declare const TAG_VARIANTS: readonly [
"primary",
"secondary",
"info",
"info-frosted",
"warning",
"warning-frosted",
"success",
"success-frosted",
"error",
"error-frosted"
];
export type TagVariant = (typeof TAG_VARIANTS)[number];
declare const TAG_DISMISSIBLE_ARIA_ATTRIBUTES: readonly [
"aria-label"
];
export type TagDismissibleAriaAttribute = (typeof TAG_DISMISSIBLE_ARIA_ATTRIBUTES)[number];
declare const TEXT_TAGS: readonly [
"p",
"span",
"div",
"address",
"blockquote",
"figcaption",
"cite",
"time",
"legend"
];
export type TextTag = (typeof TEXT_TAGS)[number];
declare const TEXT_COLORS: readonly [
"primary",
"contrast-higher",
"contrast-high",
"contrast-medium",
"success",
"warning",
"error",
"info",
"inherit"
];
export type TextColor = (typeof TEXT_COLORS)[number];
declare const TEXT_WEIGHTS: readonly [
"normal",
"semibold",
"bold",
"regular",
"semi-bold"
];
export type TextWeight = (typeof TEXT_WEIGHTS)[number];
declare const TEXT_ALIGNS: readonly [
"start",
"center",
"end",
"inherit"
];
export 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"
];
export type TextSize = (typeof TEXT_SIZES)[number];
declare const TEXT_HYPHENS: readonly [
"none",
"manual",
"auto",
"inherit"
];
export type TextHyphens = (typeof TEXT_HYPHENS)[number];
declare const TEXT_LIST_TYPES: readonly [
"unordered",
"numbered",
"alphabetically"
];
export type TextListType = (typeof TEXT_LIST_TYPES)[number];
export type TextareaState = FormState;
declare const TEXTAREA_WRAPS: readonly [
"hard",
"soft",
"off"
];
export type TextareaWrap = (typeof TEXTAREA_WRAPS)[number];
declare const TEXTAREA_RESIZE: readonly [
"none",
"both",
"horizontal",
"vertical",
"block",
"inline"
];
export type TextareaResize = (typeof TEXTAREA_RESIZE)[number];
export type TextareaChangeEventDetail = Event;
export type TextareaBlurEventDetail = Event;
export type TextareaInputEventDetail = InputEvent;
declare const TOAST_STATES: readonly [
"info",
"success",
"warning",
"error"
];
export type ToastState = (typeof TOAST_STATES)[number];
export type ToastMessage = {
text: string;
state?: ToastState;
};
declare const WORDMARK_SIZES: readonly [
"small",
"inherit"
];
export type WordmarkSize = (typeof WORDMARK_SIZES)[number];
export type WordmarkTarget = LinkTarget;
export type WordmarkAriaAttribute = LinkAriaAttribute;
export {};