@porsche-design-system/components-react 3.1.0-rc.2 → 3.2.0-rc.0

package/lib/types.d.ts

@@ -1,3 +1,193 @@
+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. */
+    "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 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;
+    /**
+     * 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 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://www.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",
     "accessibility",
@@ -355,196 +545,6 @@ declare const LINK_TARGETS: readonly [
     "_top"
 ];
 export type LinkTarget = typeof LINK_TARGETS[number] | string;
-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. */
-    "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 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;
-    /**
-     * 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 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://www.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";
 export type LinkButtonIconName = IconName | "none";
 export type ButtonVariant = LinkButtonVariant;
 export type LinkVariant = LinkButtonVariant;
@@ -634,19 +634,19 @@ declare const DISPLAY_TAGS: readonly [
     "h5",
     "h6"
 ];
-export type DisplayTag = typeof DISPLAY_TAGS[number];
+export type DisplayTag = (typeof DISPLAY_TAGS)[number];
 declare const DISPLAY_SIZES: readonly [
     "small",
     "medium",
     "large",
     "inherit"
 ];
-export type DisplaySize = typeof DISPLAY_SIZES[number];
+export type DisplaySize = (typeof DISPLAY_SIZES)[number];
 declare const DISPLAY_COLORS: readonly [
     "primary",
     "inherit"
 ];
-export type DisplayColor = typeof DISPLAY_COLORS[number];
+export type DisplayColor = (typeof DISPLAY_COLORS)[number];
 export type DisplayAlign = TextAlign;
 declare const DIVIDER_COLORS: readonly [
     "contrast-low",
@@ -822,12 +822,12 @@ declare const HEADING_SIZES: readonly [
     "xx-large",
     "inherit"
 ];
-export type HeadingSize = typeof HEADING_SIZES[number];
+export type HeadingSize = (typeof HEADING_SIZES)[number];
 declare const HEADING_COLORS: readonly [
     "primary",
     "inherit"
 ];
-export type HeadingColor = typeof HEADING_COLORS[number];
+export type HeadingColor = (typeof HEADING_COLORS)[number];
 export type HeadingAlign = TextAlign;
 declare const HEADLINE_VARIANTS: readonly [
     "large-title",
@@ -999,11 +999,11 @@ declare const POPOVER_DIRECTIONS: readonly [
     "bottom",
     "left"
 ];
-export type PopoverDirection = typeof POPOVER_DIRECTIONS[number];
+export type PopoverDirection = (typeof POPOVER_DIRECTIONS)[number];
 declare const POPOVER_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
-export type PopoverAriaAttribute = typeof POPOVER_ARIA_ATTRIBUTES[number];
+export type PopoverAriaAttribute = (typeof POPOVER_ARIA_ATTRIBUTES)[number];
 export type RadioButtonWrapperState = FormState;
 declare const SEGMENTED_CONTROL_BACKGROUND_COLORS: readonly [
     "background-surface",
@@ -1045,7 +1045,7 @@ declare const STEPPER_ITEM_STATES: readonly [
     "complete",
     "warning"
 ];
-export type StepperHorizontalItemState = typeof STEPPER_ITEM_STATES[number];
+export type StepperHorizontalItemState = (typeof STEPPER_ITEM_STATES)[number];
 export type SwitchAlignLabel = AlignLabel;
 export type SwitchUpdateEvent = {
     checked: boolean;
@@ -1123,7 +1123,7 @@ declare const UNIT_POSITIONS: readonly [
     "prefix",
     "suffix"
 ];
-export type TextFieldWrapperUnitPosition = typeof UNIT_POSITIONS[number];
+export type TextFieldWrapperUnitPosition = (typeof UNIT_POSITIONS)[number];
 export type TextFieldWrapperActionIcon = Extract<IconName, "locate">;
 export type TextFieldWrapperState = FormState;
 declare const LIST_TYPES: readonly [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.1.0-rc.2",
+  "version": "3.2.0-rc.0",
   "description": "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.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.1.0-rc.2"
+    "@porsche-design-system/components-js": "3.2.0-rc.0"
   },
   "peerDependencies": {
     "react": ">=17.0.0 <19.0.0",

package/ssr/components/dist/styles/esm/styles-entry.js

@@ -315,14 +315,17 @@ const hasVisibleIcon = (iconName, iconSource) => {
 };
 
 const childrenMutationMap = new Map();
-const getObservedNode = (mutatedNode) => childrenMutationMap.has(mutatedNode) ? mutatedNode : getObservedNode(mutatedNode.parentNode);
 hasWindow &&
     new MutationObserver((mutations) => {
-        mutations
-            // remove duplicates so we execute callback only once per node
-            .filter((mutation, idx, arr) => arr.findIndex((m) => m.target === mutation.target) === idx)
-            .map((mutation) => getObservedNode(mutation.target)) // recursively find root node that is initially observed
-            .forEach((node) => childrenMutationMap.get(node)());
+        // there may be race conditions in jsdom-polyfill tests  where the map is already empty when a mutation happens
+        if (childrenMutationMap.size) {
+            const mapKeys = Array.from(childrenMutationMap.keys());
+            mutations
+                // remove duplicates so we execute callback only once per node
+                .filter((mutation, idx, arr) => arr.findIndex((m) => m.target === mutation.target) === idx)
+                // find node in map that contains the mutated element to find and invoke its callback
+                .forEach((mutation) => { var _a; return (_a = childrenMutationMap.get(mapKeys.find((node) => node.contains(mutation.target)))) === null || _a === void 0 ? void 0 : _a(); });
+        }
     });
 
 /* eslint-disable no-undefined,no-param-reassign,no-shadow */
@@ -4352,6 +4355,11 @@ const getComponentCss$U = (icon, iconSource, variant, hideLabel, disabled, loadi
 
 const carouselTransitionDuration = 400;
 const bulletActiveClass = 'bullet--active';
+const paginationInfiniteStartCaseClass = 'pagination--infinite';
+const bulletInfiniteClass = 'bullet--infinite';
+const paginationBulletSize = '8px';
+const paginationInfiniteBulletSize = '4px';
+const paginationActiveBulletSize = '20px';
 const selectorHeading = 'h2,::slotted([slot=heading])';
 const selectorDescription = 'p,::slotted([slot=description])';
 const mediaQueryS = getMediaQueryMin('s');
@@ -4359,13 +4367,13 @@ const mediaQueryXXL = getMediaQueryMin('xxl');
 // we need an explicit grid template, therefor we need to calculate the button group width
 const buttonSize$1 = `calc(${spacingStaticSmall} * 2 + ${fontLineHeight})`;
 // + 2px, compensates hover offset of button-pure
-const buttonGroupWidth = `calc(${buttonSize$1} * 2 + ${spacingStaticXSmall} + 2px)`;
+const buttonGroupWidth = `calc(${buttonSize$1} * 3 + ${spacingStaticXSmall} + 2px)`;
 const spacingMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$T = (width, hasPagination, alignHeader, theme) => {
-    const { primaryColor, contrastMediumColor } = getThemedColors(theme);
+const getComponentCss$T = (width, hasPagination, isInfinitePagination, alignHeader, theme) => {
+    const { primaryColor, contrastMediumColor, focusColor } = getThemedColors(theme);
     const { canvasTextColor } = getHighContrastColors();
     const isHeaderAlignCenter = alignHeader === 'center';
     return getCss(Object.assign({ '@global': {
@@ -4395,12 +4403,23 @@ const getComponentCss$T = (width, hasPagination, alignHeader, theme) => {
                 gap: spacingStaticXSmall,
                 gridArea: '1 / 3 / 3 / auto',
                 alignItems: 'end',
+                justifyContent: 'end',
+                justifySelf: 'end',
             },
         }, btn: {
             padding: spacingStaticSmall,
+        }, 'skip-link': {
+            opacity: 0,
+            pointerEvents: 'none',
+            '&:focus': {
+                opacity: 1,
+                pointerEvents: 'all',
+            },
         }, splide: {
             overflow: 'hidden',
             // visibility: 'hidden',
+            padding: '4px 0',
+            margin: '-4px 0',
             '&__track': Object.assign(Object.assign({ cursor: 'grab' }, addImportantToEachRule({
                 padding: `0 ${spacingMap[width].base}`,
                 [getMediaQueryMax('xs')]: {
@@ -4417,26 +4436,57 @@ const getComponentCss$T = (width, hasPagination, alignHeader, theme) => {
                     WebkitUserSelect: 'none',
                     WebkitTouchCallout: 'none',
                 } }),
-            '&__list': Object.assign({ display: 'flex', height: '100%' }, getBackfaceVisibilityJssStyle()),
-            '&__slide': Object.assign(Object.assign({ position: 'relative', flexShrink: 0 }, getBackfaceVisibilityJssStyle()), { transform: 'translateZ(0)' }),
+            '&__list': Object.assign({ display: 'flex' }, getBackfaceVisibilityJssStyle()),
+            '&__slide': Object.assign(Object.assign({ position: 'relative', flexShrink: 0 }, getBackfaceVisibilityJssStyle()), { transform: 'translateZ(0)', borderRadius: borderRadiusLarge, overflow: 'hidden', '&:focus-visible': {
+                    outline: `${borderWidthBase} solid ${focusColor}`,
+                    outlineOffset: '2px',
+                } }),
             '&__sr': getHiddenTextJssStyle(), // appears in the DOM when sliding
-        } }, (hasPagination && {
-        pagination: Object.assign(Object.assign({}, buildResponsiveStyles(hasPagination, (hasPaginationValue) => ({
+        } }, (hasPagination && Object.assign(Object.assign({ ['pagination-container']: Object.assign(Object.assign({}, buildResponsiveStyles(hasPagination, (hasPaginationValue) => ({
             display: hasPaginationValue ? 'flex' : 'none',
-        }))), { justifyContent: 'center', gap: spacingStaticSmall }),
-        bullet: {
-            borderRadius: borderRadiusSmall,
-            background: isHighContrastMode ? canvasTextColor : contrastMediumColor,
-            // set transition to have the same speed as switching slides in splide
-            transition: `background-color ${carouselTransitionDuration}ms, width ${carouselTransitionDuration}ms`,
-            width: '8px',
-            height: '8px',
-        },
-        [bulletActiveClass]: {
-            background: isHighContrastMode ? canvasTextColor : primaryColor,
-            width: '20px',
+        }))), { position: 'relative', justifyContent: isInfinitePagination ? 'flex-start' : 'center', width: `calc(${paginationActiveBulletSize} + ${paginationBulletSize} * 4 + ${spacingStaticSmall} * 4)`, left: 'calc(50% - 42px)', overflowX: 'hidden' }), pagination: {
+            display: 'flex',
+            alignItems: 'center',
+            width: 'fit-content',
+            gap: spacingStaticSmall,
+            transition: `transform ${carouselTransitionDuration}ms`,
+        }, bullet: Object.assign({ borderRadius: borderRadiusSmall, background: isHighContrastMode ? canvasTextColor : contrastMediumColor }, (isInfinitePagination
+            ? {
+                width: '0px',
+                height: '0px',
+                transition: `background-color ${carouselTransitionDuration}ms, width ${carouselTransitionDuration}ms, height ${carouselTransitionDuration}ms`,
+            }
+            : {
+                width: paginationBulletSize,
+                height: paginationBulletSize,
+                transition: `background-color ${carouselTransitionDuration}ms, width ${carouselTransitionDuration}ms`,
+            })) }, (isInfinitePagination && {
+        [`${paginationInfiniteStartCaseClass}`]: {
+            ['& > .bullet:nth-child(-n+4)']: {
+                width: paginationBulletSize,
+                height: paginationBulletSize,
+            },
         },
-    })));
+        [`${bulletInfiniteClass}`]: Object.assign(Object.assign({}, addImportantToEachRule({
+            width: paginationInfiniteBulletSize,
+            height: paginationInfiniteBulletSize,
+        })), { '& ~ span': {
+                width: paginationBulletSize,
+                height: paginationBulletSize,
+            }, [`& ~ .${bulletInfiniteClass} ~ span`]: {
+                width: '0px',
+                height: '0px',
+            } }),
+    })), { [`${bulletActiveClass}`]: Object.assign({ background: isHighContrastMode ? canvasTextColor : primaryColor, height: paginationBulletSize, width: addImportantToRule(paginationActiveBulletSize) }, (isInfinitePagination && {
+            '& ~ span': {
+                width: paginationBulletSize,
+                height: paginationBulletSize,
+            },
+            [`& ~ .${bulletInfiniteClass} ~ span`]: {
+                width: '0px',
+                height: '0px',
+            },
+        })) }))));
 };
 
 const getThemedFormStateColors = (theme, state) => {
@@ -5330,7 +5380,7 @@ const getComponentCss$v = (maxNumberOfPageLinks, theme) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
-            nav: Object.assign({ display: 'flex', justifyContent: 'center' }, buildResponsiveStyles(maxNumberOfPageLinks, (n) => ({
+            nav: Object.assign({ display: 'flex', justifyContent: 'center', userSelect: 'none' }, buildResponsiveStyles(maxNumberOfPageLinks, (n) => ({
                 counterReset: `size ${n}`,
             }))),
             ul: {
@@ -5354,16 +5404,8 @@ const getComponentCss$v = (maxNumberOfPageLinks, theme) => {
                 },
             },
             span: Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', justifyContent: 'center', alignItems: 'center', transition: ['color', 'border-color', 'background-color'].map(getTransition).join(), position: 'relative', width: buttonSize, height: buttonSize, boxSizing: 'border-box' }, textSmallStyle), { whiteSpace: 'nowrap', cursor: 'pointer', color: primaryColor, outline: 0, borderRadius: borderRadiusSmall, borderColor: 'transparent' }), hoverMediaQuery({
-                '&:not([aria-disabled]):not(.ellipsis):hover': Object.assign(Object.assign({}, frostedGlassStyle), { backgroundColor: hoverColor }),
-            })), { '&:not(.ellipsis):focus::before': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(-4)), { border: `${borderWidthBase} solid ${focusColor}`, borderRadius: borderRadiusMedium }), '&:focus:not(:focus-visible)::before': {
-                    borderColor: 'transparent',
-                }, '&[aria-current]': {
-                    disabledCursorStyle,
-                    color: primaryColor,
-                    border: `${borderWidthBase} solid ${primaryColor}`,
-                    borderRadius: borderRadiusSmall,
-                    '&:not(.ellipsis):focus::before': Object.assign({}, getInsetJssStyle(-6)),
-                }, '&[aria-disabled]': Object.assign(Object.assign({}, disabledCursorStyle), { color: disabledColor }) }),
+                '&:not([aria-disabled]):not(.ellipsis):hover': Object.assign(Object.assign({}, frostedGlassStyle), { background: hoverColor }),
+            })), { '&:not(.ellipsis):focus:focus-visible::before': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(-4)), { border: `${borderWidthBase} solid ${focusColor}`, borderRadius: borderRadiusMedium }), '&[aria-current]': Object.assign(Object.assign({}, disabledCursorStyle), { color: primaryColor, border: `${borderWidthBase} solid ${primaryColor}`, '&:not(.ellipsis):focus::before': getInsetJssStyle(-6) }), '&[aria-disabled]': Object.assign(Object.assign({}, disabledCursorStyle), { color: disabledColor }) }),
         },
         ellipsis: Object.assign(Object.assign({}, disabledCursorStyle), { '&::after': {
                 content: '"…"',