@postnord/pn-marketweb-components 4.3.5 → 4.3.7

package/umd/modules/@postnord/web-components/types/components.d.ts

@@ -399,17 +399,19 @@ export namespace Components {
     interface PnCheckbox {
         /**
           * A unique HTML ID for the checkbox.
-          * @default this.id
+          * @deprecated Use `pn-id` instead.
+          * @category HTML attributes
          */
         "checkboxid"?: string;
         /**
-          * Check the checkbox.
+          * Programmatically check the input.
+          * @category Native attributes
           * @default false
          */
         "checked"?: boolean;
         /**
           * Disable the checkbox.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "disabled"?: boolean;
@@ -417,7 +419,7 @@ export namespace Components {
           * Allow the checkbox to control the slot area "content". When checked, the area is visible, when unchecked, the area is hidden.  The prop `tile` must be used at the same time.
           * @see {@link tile }
           * @since v7.17.0
-          * @category Tile
+          * @category Features
           * @default false
          */
         "expand"?: boolean;
@@ -428,44 +430,64 @@ export namespace Components {
         /**
           * Add an icon on the right of your checkbox tile. The `tile` prop must be `true` for the icon to work.
           * @see {@link tile }
-          * @category Tile
+          * @category Features
           * @default null
          */
         "icon"?: string;
         /**
           * Sets the checkbox to an indeterminate state, allowing for a mixed or intermediate checkbox state.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "indeterminate": boolean;
         /**
-          * If set to true, color scheme will turn red, indicating that there is an issue or incorrect input related the checkbox.
-          * @category State
+          * If set to true, color scheme will turn red, indicating that there is an issue related to the checkbox.
+          * @category Native attributes
           * @default false
          */
         "invalid"?: boolean;
         /**
-          * The checkbox label
+          * The checkbox label, this is required for the checkbox to be 100% accessible out of the box.
          */
         "label"?: string;
         /**
           * The name of the checkbox group.
+          * @category Native attributes
          */
         "name"?: string;
+        /**
+          * Provide the label via an aria attribute. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabel"?: string;
+        /**
+          * Provide the label from another element via its ID. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelledby"?: string;
+        /**
+          * A unique HTML ID for the checkbox.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnId"?: string;
         /**
           * Set the checkbox as required.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "required"?: boolean;
         /**
           * Turn the checkbox into a clickable tile. A border and padding is added.  **Do not** use interactive elements (links/buttons) inside of the slots when using this prop. An exception is made when using the `tile` + `expand` props together, which allows you to use interactive elements.
-          * @category Tile
+          * @category Features
           * @default false
          */
         "tile"?: boolean;
         /**
           * This will be emitted on change and input events.
+          * @category Native attributes
          */
         "value": string;
     }
@@ -476,58 +498,70 @@ export namespace Components {
      */
     interface PnChoiceChip {
         /**
-          * Precheck the choice chip
+          * Programatically check the input.
+          * @category Native attributes
           * @default false
          */
         "checked"?: boolean;
         /**
-          * A unique HTML id
-          * @default `pn-choice-chip-${uuidv4()}`
+          * A unique HTML ID for the choice chip.
+          * @deprecated Use the `pn-id` prop instead.
+          * @category HTML attributes
          */
-        "choiceid": string;
+        "choiceid"?: string;
         /**
-          * Disable the choice chip.
-          * @category State
+          * Disable the input.
+          * @category Native attributes
           * @default false
          */
         "disabled": boolean;
         /**
-          * Include an icon
+          * Add an icon to the choice chip.
+          * @category Features
          */
         "icon"?: string;
         /**
-          * The choice chip label
+          * The choice chip label. This is required for the component to be accessible.
          */
         "label": string;
         /**
-          * Set the size to large.
-          * @category Size
+          * Use the large size for the choice chip.
+          * @category Features
           * @default false
          */
         "large": boolean;
         /**
-          * The name of the checkbox group
+          * The name of the checkbox group. This is required if you use the `radio` prop.
+          * @category Native attributes
          */
         "name"?: string;
         /**
-          * Make the choice chip a radio
+          * A unique HTML ID for the choice chip
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnId"?: string;
+        /**
+          * Make the choice chip a radio input. By default, it behaves as a checkbox. You must assign a `name` for the radio to work.
+          * @category Features
           * @default false
          */
         "radio": boolean;
         /**
-          * Set the choice chip as required.
-          * @category State
+          * Set the input as required.
+          * @category Native attributes
           * @default false
          */
         "required": boolean;
         /**
-          * Set the size to small.
-          * @category Size
+          * Use the small size for the choice chip.
+          * @category Features
           * @default false
          */
         "small": boolean;
         /**
-          * This will be emitted on change and input
+          * This will be emitted on change and input.
+          * @category Native attributes
          */
         "value": string;
     }
@@ -540,17 +574,19 @@ export namespace Components {
         /**
           * Use the compact label variant.
           * @since v7.21.0
+          * @category Features
           * @default false
          */
         "compact"?: boolean;
         /**
-          * Set a unique HTML ID for the counter
-          * @default this.id
+          * Set a unique HTML ID for the counter.
+          * @deprecated Use `pn-id` instead.
+          * @category HTML attributes
          */
-        "counterid": string;
+        "counterid"?: string;
         /**
           * Set the counter as disabled.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "disabled": boolean;
@@ -559,74 +595,100 @@ export namespace Components {
          */
         "helpertext"?: string;
         /**
-          * Label for the counter
+          * Hide the tooltips for the increase/decrease button.
+          * @since v7.25.0
+          * @category Features
+          * @default false
          */
-        "label": string;
+        "hideTooltips"?: boolean;
+        /**
+          * Label for the counter. This is required for the counter to be 100% accessible out of the box.
+         */
+        "label"?: string;
         /**
           * Text for the decrease button. Default is "Decrease".
-          * @category Translation
+          * @category Features
          */
         "labelDecrease"?: string;
         /**
           * Text for the increase button. Default is "Increase".
-          * @category Translation
+          * @category Features
          */
         "labelIncrease"?: string;
         /**
           * Set the language manually for the built in translations.
-          * @default null
+          * @default undefined
          */
         "language"?: PnLanguages;
         /**
           * Suggest values for the counter input.
-          * @category HTML input
+          * @category Native attributes
          */
         "list"?: string;
         /**
           * Maximum value.
-          * @category HTML input
+          * @category Native attributes
          */
-        "max": number;
+        "max"?: number;
         /**
           * Set a message that shows below input when user wants to set a value that is above `max`. Default is "Maximum value is x"
-          * @category Translation
+          * @category Features
          */
         "maxMessage"?: string;
         /**
           * Minimum value.
-          * @category HTML input
+          * @category Native attributes
          */
-        "min": number;
+        "min"?: number;
         /**
           * Set a message that shows below input when user wants to set a value that is below `min`. Default is "Minimum value is x"
-          * @category Translation
+          * @category Features
          */
         "minMessage"?: string;
         /**
           * HTML input name.
-          * @category HTML input
+          * @category Native attributes
          */
         "name"?: string;
+        /**
+          * Provide the label via an aria attribute. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabel"?: string;
+        /**
+          * Provide the label from another element via its ID. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelledby"?: string;
+        /**
+          * Set a unique HTML ID for the counter.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnId"?: string;
         /**
           * Set the counter as readonly.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "readonly": boolean;
         /**
           * Set the counter as required.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "required": boolean;
         /**
           * Increase/decrease the value in steps, default is 1.
-          * @category HTML input
+          * @category Native attributes
           * @default 1
          */
         "step": number;
         /**
-          * Set a predefined value
+          * Set a predefined value.
+          * @category Native attributes
           * @default 0
          */
         "value": number;
@@ -641,7 +703,7 @@ export namespace Components {
     interface PnDatePicker {
         /**
           * Set the input `autocomplete` attribute.
-          * @category HTML attributes
+          * @category Native attributes
          */
         "autocomplete"?: string;
         /**
@@ -654,18 +716,20 @@ export namespace Components {
         /**
           * Set the date picker label as compact. If used, the `placeholder` will no longer be displayed.
           * @since v7.21.0
+          * @category Features
           * @default false
          */
         "compact"?: boolean;
         /**
           * Set a custom ID for the calendar.
           * @since v7.6.0
+          * @deprecated Use `pn-id` instead.
           * @category HTML attributes
-          * @default this.id
          */
-        "dateId": string;
+        "dateId"?: string;
         /**
           * If you use a format with an unknown length, disable the max length.
+          * @since 7.11.3
           * @category Features
           * @default false
          */
@@ -686,7 +750,7 @@ export namespace Components {
         /**
           * Set the date picker as disabled.
           * @since v7.6.0
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "disabled": boolean;
@@ -698,29 +762,31 @@ export namespace Components {
          */
         "disabledDates"?: string;
         /**
-          * Set a predefined value for the from date.
+          * Set a predefined value for the from date. (input value end)
           * @see {@link range }
           * @see {@link format }
+          * @category Native attributes
           * @default ''
          */
         "end": string;
         /**
           * Placeholder for end date (defaults to the format prop).
           * @see {@link format }
-          * @category HTML attributes
-          * @default this.format
+          * @deprecated Use `placeholder-end` instead
+          * @category Native attributes
          */
         "endPlaceholder"?: string;
         /**
           * Set an error message for the date picker. Overwrites the helpertext if used at the same time.
           * @since v7.6.0
-          * @category Validation
+          * @category Features
          */
         "error"?: string;
         /**
           * Set the date format of the value.  While you can set any date value from the Dayjs documentation, we strongly recommend you pick a simple format that you can also type manually.
           * @since v7.6.0
           * @see {@link https://day.js.org/docs/en/display/format Day.js format documentation.}
+          * @category Features
           * @default 'YYYY-MM-DD'
          */
         "format": string;
@@ -731,14 +797,14 @@ export namespace Components {
         /**
           * Trigger the invalid state without an error message.
           * @since v7.6.0
-          * @category Validation
+          * @category Features
           * @default false
          */
         "invalid": boolean;
         /**
           * Set a label for the from date.
          */
-        "labelFrom": string;
+        "labelFrom"?: string;
         /**
           * Set a label for the to date.
           * @see {@link range }
@@ -746,26 +812,26 @@ export namespace Components {
         "labelTo"?: string;
         /**
           * Manually set language; this will be inherited from the topbar.
-          * @default null
+          * @default undefined
          */
         "language"?: PnLanguages;
         /**
           * Set the input `list` attribute for the first date input.
           * @since v7.6.0
-          * @category HTML attributes
+          * @category Native attributes
          */
         "list"?: string;
         /**
           * Set the input `list` attribute for the second date input.
           * @since v7.6.0
-          * @category HTML attributes
+          * @category Native attributes
          */
         "listEnd"?: string;
         /**
           * Latest date possible, this will determine how many years forward the date picker will show.  Remember to use the same format that you have in the `format` prop.
           * @see {@link format }
           * @example "2024-06-25"
-          * @category Min/max date
+          * @category Features
           * @default null
          */
         "maxDate"?: string;
@@ -773,29 +839,71 @@ export namespace Components {
           * Earliest date possible, this will determine how many years back the date picker will show.  Remember to use the same format that you have in the `format` prop.
           * @see {@link format }
           * @example "2024-05-25"
-          * @category Min/max date
+          * @category Features
           * @default null
          */
         "minDate"?: string;
         /**
           * HTML input name
           * @since v7.6.0
-          * @category HTML attributes
+          * @category Native attributes
          */
         "name"?: string;
+        /**
+          * HTML input name
+          * @since v7.25.0
+          * @category Native attributes
+         */
+        "nameEnd"?: string;
         /**
           * Set the HTML pattern prop on the input elements. Make sure it matches the format.
           * @since v7.6.0
-          * @category HTML attributes
+          * @category Native attributes
          */
         "pattern"?: string;
         /**
           * Placeholder for the input field (defaults to the format prop).
           * @see {@link format }
-          * @category HTML attributes
-          * @default this.format
+          * @category Native attributes
          */
         "placeholder"?: string;
+        /**
+          * Placeholder for end date (defaults to the format prop).
+          * @see {@link format }
+          * @since v7.25.0
+          * @category Native attributes
+         */
+        "placeholderEnd"?: string;
+        /**
+          * Provide the label via an aria attribute. We strongly recommend you use the `label-from` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabel"?: string;
+        /**
+          * Provide the label for the end input via an aria attribute. We strongly recommend you use the `label-to` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelEnd"?: string;
+        /**
+          * Provide the label from another element via its ID. We strongly recommend you use the `label-from` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelledby"?: string;
+        /**
+          * Provide the label for the end input from another element via its ID. We strongly recommend you use the `label-to` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelledbyEnd"?: string;
+        /**
+          * Set a custom ID for the calendar. If you use `range`, the end input will use `${pn-id}-end`.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnId"?: string;
         /**
           * Allow the selection of a date range.
           * @category Features
@@ -813,19 +921,20 @@ export namespace Components {
         /**
           * Set the date picker as readonly.
           * @since v7.6.0
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "readonly": boolean;
         /**
           * Set the date picker as required.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "required": boolean;
         /**
-          * Set a predefined value for the from date.
+          * Set a predefined value for the from date (input value).
           * @see {@link format }
+          * @category Native attributes
           * @default ''
          */
         "start": string;
@@ -833,7 +942,7 @@ export namespace Components {
           * The calendar grid is shown as default. You can set either `months` or `years` as your first choice.
           * @since v7.6.0
           * @category Features
-          * @default CALENDAR
+          * @default 'calendar'
          */
         "view": CalendarView;
         /**
@@ -851,20 +960,25 @@ export namespace Components {
     interface PnFieldset {
         /**
           * Disable all of the inputs inside of the fieldset.
+          * @category Native attributes
           * @default false
          */
         "disabled": boolean;
         /**
           * Error message, applies warning styles and icon.
+          * @category Features
          */
         "error"?: string;
         /**
-          * Give the fieldset a custom HTML id.
+          * Set a custom ID for the fieldset.
+          * @deprecated Use `pn-id` instead.
+          * @category HTML attributes
           * @default this.id
          */
         "fieldsetId": string;
         /**
           * The id of the form you want the fieldset to be part of. If you want the inputs inside to be associated with a specific form, you need to set on those elements directly.
+          * @category Native attributes
          */
         "form"?: string;
         /**
@@ -873,6 +987,7 @@ export namespace Components {
         "helpertext"?: string;
         /**
           * Set the fieldset as `invalid`, will add red error styles.
+          * @category Features
           * @default false
          */
         "invalid": boolean;
@@ -882,8 +997,16 @@ export namespace Components {
         "legend": string;
         /**
           * Give the fieldset a HTML name.
+          * @category Native attributes
          */
         "name"?: string;
+        /**
+          * Set a custom ID for the fieldset.
+          * @since v7.25.0
+          * @category HTML attributes
+          * @default this.id
+         */
+        "pnId": string;
     }
     /**
      * Users can drop files directly into the upload area of the component
@@ -895,13 +1018,13 @@ export namespace Components {
     interface PnFileUpload {
         /**
           * Set which file types the input accepts. Ex: .docs,.xml
-          * @category HTML attributes
+          * @category Native attributes
          */
         "accept": string;
         /**
           * Use the capture mode.
           * @since v7.1.0
-          * @category HTML attributes
+          * @category Native attributes
          */
         "capture"?: '' | 'user' | 'environment';
         /**
@@ -910,7 +1033,7 @@ export namespace Components {
         "clearUpload": () => Promise<void>;
         /**
           * Disable the input.
-          * @category HTML attributes
+          * @category Native attributes
           * @default false
          */
         "disabled": boolean;
@@ -921,6 +1044,7 @@ export namespace Components {
         "helpertext"?: string;
         /**
           * Always hide the progress bar, even when upload has begun.
+          * @since v7.1.0
           * @category Features
           * @default false
          */
@@ -932,40 +1056,47 @@ export namespace Components {
         "label"?: string;
         /**
           * Manually set the language.
-          * @category Features
-          * @default null
+          * @since v7.1.0
+          * @default undefined
          */
         "language"?: PnLanguages;
         /**
           * Set maximum amount of files to be selected. Any value above 1 will force the `multiple` to be `true`.
-          * @category HTML attributes
+          * @category Features
           * @default 1
          */
         "limit": number;
         /**
           * Set the maximum upload size.
-          * @category HTML attributes
+          * @category Features
           * @default ''
          */
         "maxSize": string;
         /**
           * Allow multiple files to be selected. Will be overwritten to true, if `limit` is above 1.
-          * @category HTML attributes
+          * @category Native attributes
          */
         "multiple": boolean;
         /**
           * Set a HTML name.
           * @since v7.1.0
-          * @category HTML attributes
+          * @category Native attributes
          */
         "name": string;
+        /**
+          * Set a custom ID for the file upload.
+          * @since v7.25.0
+          * @category HTML attributes
+          * @default this.id
+         */
+        "pnId": string;
         /**
           * Remove the selected file.
          */
         "removeFile": (targetFile: PnUploadFileItem) => Promise<void>;
         /**
           * Set the input as required.
-          * @category HTML attributes
+          * @category Native attributes
           * @default false
          */
         "required"?: boolean;
@@ -1031,15 +1162,15 @@ export namespace Components {
      */
     interface PnIcon {
         /**
-          * Color the icon with one of the follwing colors from our library.
-          * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-colors--docs PostNord Colors (Storybook)}
+          * Color the icon with one of the following colors from our library. Has no effects if you use flags from our library.
+          * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-colors--docs Colors (Storybook)}
           * @default 'gray900'
          */
         "color"?: PnColors;
         /**
-          * The SVG content of the icon you want to use.  Flags cannot be colored.
-          * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-icon--docs PostNord Icons (Storybook)}
-          * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-flag--docs PostNord Flags (Storybook)}
+          * The SVG content of the icon you want to use.
+          * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-icon--docs Icons (Storybook)}
+          * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-flag--docs Flags (Storybook)}
           * @default ''
          */
         "icon": string;
@@ -1049,6 +1180,12 @@ export namespace Components {
          */
         "small": boolean;
     }
+    /**
+     * The `pn-illustration` is a wrapper for an SVG string.
+     * The component will look at the viewBox property of the SVG to determine the default width and height,
+     * but you can also set these manually with the `width` and `height` props.
+     * Setting the `fill` prop will make the illustration fill its parent container, which is useful for responsive designs.
+     */
     interface PnIllustration {
         /**
           * Make the SVG fill to its parent size (sets width/height 100% and `display: block` instead of `inline-block`)
@@ -1077,37 +1214,40 @@ export namespace Components {
     interface PnInput {
         /**
           * Set the ID of what this input controls.
-          * @category HTML input
+          * @deprecated Use `pn-aria-controls` instead.
+          * @category HTML attributes
          */
         "ariacontrols"?: string;
         /**
           * While you can use the `aria-label`, using a `label` is far more accessible.
-          * @category HTML input
+          * @deprecated Use `pn-aria-label` instead.
+          * @category HTML attributes
          */
         "arialabel"?: string;
         /**
-          * Let the browser know what type of autocorrects the input should use. Works much better if a `name` and `inputid` is supplied.
+          * Let the browser know what type of autocorrects the input should use. Works much better if a `name` and `pn-id` is supplied.
           * @see {@link name }
           * @see {@link inputid }
-          * @category HTML input
+          * @category Native attributes
          */
         "autocomplete"?: string;
         /**
           * Use the compact label variant. The `placeholder` you provide will not be visible if used at the same time.
           * @since v7.21.0
+          * @category Features
           * @default false
          */
         "compact"?: boolean;
         /**
           * Set the input as `disabled`.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "disabled": boolean;
         /**
           * Set the input as `invalid` and display an error message (applies the same style as `invalid`).  Error message; will take precedence over helpertext if both are provided.
           * @see {@link invalid Set invalid without an error message.}
-          * @category Validation
+          * @category Features
          */
         "error"?: string;
         /**
@@ -1117,114 +1257,140 @@ export namespace Components {
         /**
           * Select an icon to display before the input field value. `icon` takes precedence over the `text-prefix` prop.
           * @see {@link textPrefix }
-          * @category Visual
+          * @category Features
          */
         "icon": string;
         /**
-          * Provide a unique HTML id to connect the input with the label. A unique uuid ID will be generated if this field is left empty.
-          * @default this.id
+          * Set a custom ID for the input (default is a generated UUID).
+          * @deprecated Use `pn-id` instead.
+          * @category HTML attributes
          */
-        "inputid": string;
+        "inputid"?: string;
         /**
           * Hint the browser about what type of virtual keyboard should be used. The browser will be able to decide this on its own most of the time, especially if you use the `type`, `name` and `inputid` props.  Leave empty or with a `''` value if you want the browsers default behaviour (`text`).
-          * @category HTML input
+          * @category Native attributes
          */
         "inputmode"?: 'text' | 'none' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
         /**
           * Set the input as `invalid`. Provides a red color and red warning icon.
           * @see {@link error Provide an error message.}
-          * @category Validation
+          * @category Features
           * @default false
          */
         "invalid": boolean;
         /**
           * Text label placed above the input field.
          */
-        "label": string;
+        "label"?: string;
         /**
           * Set the language manually for the translations of show/hide/clear button text. Not needed if you have the pntopbar on the page.
-          * @default null
+          * @default undefined
          */
         "language"?: PnLanguages;
         /**
           * Point to a datalist element for this input.
-          * @category HTML input
+          * @category Native attributes
          */
         "list"?: string;
         /**
           * Set the `max` value of the `number` input.
-          * @category HTML input
+          * @category Native attributes
          */
         "max"?: number | string;
         /**
           * The maximum number of characters the user should be able to add, also adds a visible counter.
-          * @category HTML input
+          * @category Native attributes
          */
         "maxlength": number;
         /**
           * Set the `min` value of the `number` input.
-          * @category HTML input
+          * @category Native attributes
          */
         "min"?: number | string;
         /**
           * HTML input name. Setting a name will help the browser understand what type of data the input have and can better assist with autofill data based on previous entires much better.
-          * @category HTML input
+          * @category Native attributes
          */
         "name"?: string;
         /**
           * Pattern prop.
-          * @category HTML input
+          * @category Native attributes
          */
         "pattern"?: string;
         /**
           * Provide a placeholder text. Remember that this is no replacement for a label. The placeholder should be a nice addition to the label/helpertext, not important information.
-          * @category HTML input
+          * @category Native attributes
          */
         "placeholder"?: string;
+        /**
+          * Set the ID of what this input controls.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaControls"?: string;
+        /**
+          * Provide the label via an aria attribute. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabel"?: string;
+        /**
+          * Provide the label from another element via its ID. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelledby"?: string;
+        /**
+          * Set a custom ID for the input (default is a generated UUID).
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnId"?: string;
         /**
           * Set the input as `readonly`.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "readonly": boolean;
         /**
           * Set the input as `required`.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "required": boolean;
         /**
           * Set a `step` for the number input.
-          * @category HTML input
+          * @category Native attributes
          */
         "step"?: number | string;
         /**
           * Set a small text before the input field value. Cannot be used together with an `icon` at the same time.
           * @see {@link icon }
           * @see {@link textSuffix }
-          * @category Visual
+          * @category Features
          */
         "textPrefix": string;
         /**
           * Set a small text after the input field value. Cannot be used with the `text-prefix` prop at the same time.
           * @see {@link textPrefix }
-          * @category Visual
+          * @category Features
          */
         "textSuffix": string;
         /**
           * pn-input supports: `text`, `password`, `url`, `tel`, `search`, `number` & `email`.
-          * @category HTML input
+          * @category Native attributes
           * @default 'text'
          */
         "type"?: 'text' | 'password' | 'url' | 'tel' | 'search' | 'number' | 'email' | '';
         /**
           * Set the input as `valid`. Provides a green color and a check icon.
-          * @category Validation
+          * @category Features
           * @default false
          */
         "valid"?: boolean;
         /**
           * Set the value of the input.
+          * @category Native attributes
           * @default ''
          */
         "value": string;
@@ -1236,8 +1402,9 @@ export namespace Components {
      */
     interface PnModal {
         /**
-          * Allow overflow if possible. When the modal opens, it will check scrollHeight > offsetHeight. Do not use if you have a lot of conditional rendering inside the modal.
+          * Allow overflow *when* it is possible. Do not use if you have a lot of conditional rendering inside the modal as it can cause layout shifts.
           * @since v7.14.0
+          * @category Features
           * @default false
          */
         "allowOverflow"?: boolean;
@@ -1247,7 +1414,7 @@ export namespace Components {
          */
         "helpertext"?: string;
         /**
-          * Hide the close button. If you disable this, make sure you build your own cancel button.
+          * Hide the close button. If you enable this, make sure you build your own cancel button.
           * @since v7.14.0
           * @category Features
           * @default false
@@ -1272,7 +1439,7 @@ export namespace Components {
          */
         "maxWidth"?: string;
         /**
-          * Bind to this property if you want to control the visibility of the modal from your own data.
+          * Use this prop if you want to control the visibility of the modal programmatically.
           * @category Features
           * @default false
          */
@@ -1285,7 +1452,13 @@ export namespace Components {
          */
         "persistent"?: boolean;
         /**
-          * Use the `sheet` visual. Aligns the modal to the right.
+          * Set a custom HTML id.
+          * @since v7.24.0
+          * @default null
+         */
+        "pnId"?: string;
+        /**
+          * Use the `sheet` visual. Aligns the modal to the right instead of the center.
           * @since v7.14.0
           * @category Visual
           * @default false
@@ -1316,18 +1489,19 @@ export namespace Components {
         /**
           * Set the date picker label as compact. If used, the `placeholder` will no longer be displayed.
           * @since v7.21.0
+          * @category Features
           * @default false
          */
         "compact"?: boolean;
         /**
           * Disable the select.
-          * @category Validation
+          * @category Native attributes
           * @default false
          */
         "disabled"?: boolean;
         /**
           * Display an error message and trigger the invalid state.
-          * @category Validation
+          * @category Features
          */
         "error"?: string;
         /**
@@ -1336,11 +1510,12 @@ export namespace Components {
         "helpertext"?: string;
         /**
           * Display an icon to the left of the select input
+          * @category Features
          */
         "icon"?: string;
         /**
           * Trigger the invalid state.
-          * @category Validation
+          * @category Features
           * @default false
          */
         "invalid"?: boolean;
@@ -1354,34 +1529,54 @@ export namespace Components {
         /**
           * Label placed above the select
          */
-        "label": string;
+        "label"?: string;
         /**
           * Manually set the language, not needed if you have the pnTopbar available
-          * @default null
+          * @default undefined
          */
         "language"?: PnLanguages;
         /**
-          * Use a custom max-height for the dropdown list.
-          * @description The component will automatically set the max height of the dropdown list on its own. It takes the `pn-topbar` into account and will open in the direction that fits best. Use this prop to override this behaviour and use a custom max-height.
+          * The component will automatically set the max height of the dropdown list on its own. It takes the `pn-topbar` into account and will open in the direction that fits best. Use this prop to override this behaviour and use a custom max-height.
           * @category Features
          */
         "maxHeight"?: string;
         /**
           * HTML name of the checkbox elements. Used for each checkbox inside the multiselect.
+          * @category Native attributes
          */
         "name"?: string;
         /**
-          * Array of options.
-          * @hide true
+          * The array of `PnMultiselectOption` objects.
+          * @see {@link PnMultiselectOption } for the option object properties.
+          * @category Features
          */
         "options": PnMultiselectOption[];
         /**
           * This is what will be shown on load if no value is used. The `placeholder` will override the default text used if you have the `search` prop active.
+          * @category Native attributes
          */
         "placeholder"?: string;
+        /**
+          * Provide the label via an aria attribute. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabel"?: string;
+        /**
+          * Provide the label from another element via its ID. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelledby"?: string;
+        /**
+          * Set a custom ID for the select.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnId"?: string;
         /**
           * Set the select as required.
-          * @category Validation
+          * @category Native attributes
           * @default false
          */
         "required"?: boolean;
@@ -1407,11 +1602,13 @@ export namespace Components {
         "selectAll"?: boolean;
         /**
           * Select HTML id
-          * @default this.id
+          * @deprecated Use `pn-id` instead.
+          * @category HTML attributes
          */
         "selectId"?: string;
         /**
           * HTML name of the input element.
+          * @category Native attributes
          */
         "selectName"?: string;
         /**
@@ -1671,13 +1868,14 @@ export namespace Components {
      */
     interface PnRadioButton {
         /**
-          * Check the radio.
+          * Programmatically check the input.
+          * @category Native attributes
           * @default false
          */
         "checked"?: boolean;
         /**
           * Disable the radio.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "disabled"?: boolean;
@@ -1685,7 +1883,7 @@ export namespace Components {
           * Allow the radio to control the slot area "content". When checked, the area is visible, when unchecked, the area is hidden.  The prop `tile` must be used at the same time.
           * @see {@link tile }
           * @since v7.17.0
-          * @category Tile
+          * @category Features
           * @default false
          */
         "expand"?: boolean;
@@ -1696,13 +1894,13 @@ export namespace Components {
         /**
           * Add an icon on the right of your radio tile. The `tile` prop must be `true` for the icon to work.
           * @see {@link tile }
-          * @category Tile
+          * @category Features
           * @default null
          */
         "icon"?: string;
         /**
           * If set to true, color scheme will turn red, indicating that there is an issue or incorrect input related the radio.
-          * @category State
+          * @category Features
           * @default false
          */
         "invalid"?: boolean;
@@ -1712,27 +1910,48 @@ export namespace Components {
         "label"?: string;
         /**
           * The name of the radio group.
+          * @category Native attributes
          */
         "name"?: string;
+        /**
+          * Provide the label via an aria attribute. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabel"?: string;
+        /**
+          * Provide the label from another element via its ID. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelledby"?: string;
         /**
           * A unique HTML ID for the radio.
-          * @default this.id
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnId"?: string;
+        /**
+          * A unique HTML ID for the radio.
+          * @deprecated Use `pn-id` instead.
+          * @category HTML attributes
          */
         "radioid"?: string;
         /**
           * Set the radio as required.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "required"?: boolean;
         /**
           * Turn the radio into a clickable tile. A border and padding is added.  **Do not** use interactive elements (links/buttons) inside of the slots when using this prop. An exception is made when using the `tile` + `expand` props together, which allows you to use interactive elements.
-          * @category Tile
+          * @category Features
           * @default false
          */
         "tile"?: boolean;
         /**
           * This will be emitted on change and input events.
+          * @category Native attributes
          */
         "value": string;
     }
@@ -1746,13 +1965,13 @@ export namespace Components {
     interface PnRange {
         /**
           * Disable the range input.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "disabled"?: boolean;
         /**
           * Set an error message for the range input.
-          * @category State
+          * @category Features
           * @default null
          */
         "error"?: string;
@@ -1763,11 +1982,13 @@ export namespace Components {
         "helpertext"?: string;
         /**
           * Set an icon for the range/input field.
+          * @category Features
           * @default null
          */
         "icon"?: string;
         /**
           * Set an icon at the end of the range or for the second input field when using `multiple`.
+          * @category Features
           * @default null
          */
         "iconEnd"?: string;
@@ -1779,32 +2000,33 @@ export namespace Components {
         "input"?: boolean;
         /**
           * Set the error visual for the range input, same as `error`, but without a message.
-          * @category State
+          * @category Features
           * @default false
          */
         "invalid"?: boolean;
         /**
           * Label for the range input.
          */
-        "label": string;
+        "label"?: string;
         /**
           * Label for the range end input.
          */
-        "labelEnd": string;
+        "labelEnd"?: string;
         /**
           * Add markers. This will also render a `datalist` element with `options`. Omitting the `label` for a marker will use the `value` as label instead. Set `label` to `null` or `''` to hide it completely.
+          * @category Features
           * @default []
          */
         "markers"?: { value: number; label?: string }[];
         /**
           * The range input max value.
-          * @category HTML Attributes
+          * @category Native attributes
           * @default 100
          */
         "max"?: number;
         /**
           * The range input min value.
-          * @category HTML Attributes
+          * @category Native attributes
           * @default 0
          */
         "min"?: number;
@@ -1816,37 +2038,65 @@ export namespace Components {
         "multiple"?: boolean;
         /**
           * The range input name.
-          * @category HTML Attributes
+          * @category Native attributes
          */
         "name"?: string;
         /**
           * The range input name.
-          * @category HTML Attributes
+          * @category Native attributes
          */
         "nameEnd"?: string;
         /**
-          * Set a custom HTML id.
+          * Provide the label via an aria attribute. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabel"?: string;
+        /**
+          * Provide the label for the end input via an aria attribute. We strongly recommend you use the `label-end` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelEnd"?: string;
+        /**
+          * Provide the label from another element via its ID. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelledby"?: string;
+        /**
+          * Provide the label for the end input from another element via its ID. We strongly recommend you use the `label-end` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelledbyEnd"?: string;
+        /**
+          * Set a custom ID for the input.
+          * @category HTML attributes
           * @default this.id
          */
         "pnId"?: string;
         /**
-          * Set a custom HTML id.
+          * Set a custom ID for the end input.
+          * @category HTML attributes
           * @default this.idEnd
          */
         "pnIdEnd"?: string;
         /**
           * Set a step value for the range input.
-          * @category HTML Attributes
+          * @category Native attributes
           * @default ''
          */
         "step"?: HTMLInputElement['step'];
         /**
           * Set a prefix for the range/input field.
+          * @category Features
           * @default null
          */
         "textPrefix"?: string;
         /**
           * Set a suffix for the range/input field.
+          * @category Features
           * @default null
          */
         "textSuffix"?: string;
@@ -1865,13 +2115,13 @@ export namespace Components {
         "tooltipTemplate"?: string;
         /**
           * The range input value.
-          * @category HTML Attributes
+          * @category Native attributes
           * @default 0
          */
         "value"?: number;
         /**
           * The range end input value.
-          * @category HTML Attributes
+          * @category Native attributes
           * @default 0
          */
         "valueEnd"?: number;
@@ -1915,78 +2165,96 @@ export namespace Components {
     interface PnSearchField {
         /**
           * Allow the browser to autocomplete the search field.
+          * @category Native attributes
          */
         "autocomplete"?: string;
         /**
           * Button variant changes the visual of the search field: - `''` Standard with a blue button. - `simple` | ~~`icon`~~ with simple white icon only button. - `auto` | ~~`icon-inline`~~ | ~~`none`~~ with a white inline search button. - `jumbo` with a larger blue icon only button.
           * @since v7.18.0: Use `''`, `simple`, `auto` or `jumbo`.
-          * @category Button
+          * @category Features
           * @default ''
          */
         "button": PnSearchFieldButton;
         /**
           * Label for the button element.
-          * @category Button
+          * @category Features
          */
         "buttonLabel"?: string;
         /**
           * Light instead of dark search button.
           * @deprecated The color is now set automatically based on the button prop.
-          * @category Button
+          * @category Features
           * @default false
          */
         "buttonLight": boolean;
         /**
           * Add a tooltip to the search button.
-          * @category Button
+          * @category Features
          */
         "buttonTooltip"?: string;
         /**
           * Disable the search field.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "disabled": boolean;
         /**
           * Provide an aria-label for the search field.
          */
-        "label": string;
+        "label"?: string;
         /**
           * Override the pntopbar language.
-          * @default null
+          * @default undefined
          */
         "language"?: PnLanguages;
         /**
           * Point to a datalist element with this id.
+          * @category Native attributes
          */
         "list"?: string;
         /**
           * Display loading animation.
-          * @category State
+          * @category Features
           * @default false
          */
         "loading": boolean;
         /**
           * Set HTML name of the search input.
+          * @category Native attributes
          */
         "name"?: string;
         /**
-          * Set a search field placeholder. This is no replacement for a `label`.
+          * Set a search field placeholder.
+          * @category Native attributes
          */
         "placeholder"?: string;
+        /**
+          * Provide the label from another element via its ID. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelledby"?: string;
+        /**
+          * Set a custom ID for the search input.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnId"?: string;
         /**
           * Set the search field as required.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "required": boolean;
         /**
           * Set a unique ID for the search input.
-          * @default this.id
+          * @deprecated Use `pn-id` instead.
+          * @category HTML attributes
          */
-        "searchid": string;
+        "searchid"?: string;
         /**
           * Set the value of the search field.
+          * @category Native attributes
           * @default ''
          */
         "value": string;
@@ -1999,11 +2267,13 @@ export namespace Components {
         /**
           * Disable the segment.
           * @since v7.7.0
+          * @category Native attributes
           * @default false
          */
         "disabled": boolean;
         /**
           * The SVG content of the icon you want.
+          * @category Features
          */
         "icon"?: string;
         /**
@@ -2013,13 +2283,21 @@ export namespace Components {
         "label"?: string;
         /**
           * The segment controller name.
+          * @category Native attributes
          */
         "name": string;
         /**
-          * A unique HTML id.
-          * @default this.id
+          * Set a custom ID for the segment.
+          * @since v7.25.0
+          * @category HTML attributes
          */
-        "segmentid": string;
+        "pnId"?: string;
+        /**
+          * Set a custom ID for the segment.
+          * @deprecated Use `pn-id` instead.
+          * @category HTML attributes
+         */
+        "segmentid"?: string;
         /**
           * Set the segment as selected. Used by the `pn-segmented-control`. **Do not use manually**.
           * @hide true
@@ -2028,6 +2306,7 @@ export namespace Components {
         "selected": boolean;
         /**
           * The segment value.
+          * @category Native attributes
          */
         "value": string;
     }
@@ -2041,11 +2320,11 @@ export namespace Components {
           * This is the name of the radio buttons inside the controller.
           * @deprecated Set the name in the nested `pn-segment` components.
          */
-        "name": string;
+        "name"?: string;
         /**
           * Currently active segment value.
          */
-        "value": string;
+        "value"?: string;
     }
     /**
      * The `pn-select` uses a native `select` element under the hood.
@@ -2056,29 +2335,30 @@ export namespace Components {
     interface PnSelect {
         /**
           * HTML autocomplete.
-          * @category HTML
+          * @category Native attributes
          */
         "autocomplete": string;
         /**
           * Use the compact label variant.
           * @since v7.21.0
+          * @category Features
           * @default false
          */
         "compact"?: boolean;
         /**
           * Disable the select.
-          * @category Validation
+          * @category Native attributes
           * @default false
          */
         "disabled"?: boolean;
         /**
           * Display an error message and trigger the invalid state.
-          * @category Validation
+          * @category Features
          */
         "error"?: string;
         /**
           * HTML form name.
-          * @category HTML
+          * @category Native attributes
          */
         "form": string;
         /**
@@ -2087,34 +2367,54 @@ export namespace Components {
         "helpertext"?: string;
         /**
           * Display an icon to the left of the select input.
+          * @category Features
          */
         "icon"?: string;
         /**
           * Trigger the invalid state.
-          * @category Validation
+          * @category Features
           * @default false
          */
         "invalid"?: boolean;
         /**
           * Label placed above the select.
          */
-        "label": string;
+        "label"?: string;
         /**
           * HTML select name.
-          * @category HTML
+          * @category Native attributes
          */
         "name": string;
+        /**
+          * Provide the label via an aria attribute. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabel"?: string;
+        /**
+          * Provide the label from another element via its ID. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelledby"?: string;
+        /**
+          * Set a custom ID for the select.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnId"?: string;
         /**
           * Set the select as required.
-          * @category Validation
+          * @category Native attributes
           * @default false
          */
         "required"?: boolean;
         /**
-          * Select HTML id
-          * @default this.id
+          * Set a custom ID for the select.
+          * @deprecated Use `pn-id` instead.
+          * @category HTML attributes
          */
-        "selectId": string;
+        "selectId"?: string;
     }
     /**
      * Display a spinner to indicate a loading state.
@@ -2343,36 +2643,37 @@ export namespace Components {
     interface PnTextarea {
         /**
           * Allow the browser to autocomplete the textarea.
-          * @category HTML Textarea
+          * @category Native attributes
           * @default 'off'
          */
         "autocomplete"?: string;
         /**
           * Set the col count for the textarea.
-          * @category HTML Textarea
+          * @category Native attributes
           * @default 20
          */
         "cols"?: number;
         /**
           * Use the compact label variant.
           * @since v7.21.0
+          * @category Features
           * @default false
          */
         "compact"?: boolean;
         /**
           * Disable the textarea.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "disabled"?: boolean;
         /**
           * Same as `invalid`, but will display the string as an error message under the textarea.
-          * @category State
+          * @category Features
          */
         "error"?: string;
         /**
           * Set the associated form.
-          * @category HTML Textarea
+          * @category Native attributes
          */
         "form"?: string;
         /**
@@ -2381,79 +2682,98 @@ export namespace Components {
         "helpertext"?: string;
         /**
           * Set the textarea as `invalid`, will make the Label and focus rings red.
-          * @category State
+          * @category Features
           * @default false
          */
         "invalid"?: boolean;
         /**
           * The label describing the textarea.
          */
-        "label": string;
+        "label"?: string;
         /**
           * The maximum number of characters the user should be able to add, also adds a visible counter.
-          * @category HTML Textarea
+          * @category Native attributes
          */
         "maxlength"?: number;
         /**
           * HTML name.
-          * @category HTML Textarea
+          * @category Native attributes
          */
         "name"?: string;
         /**
           * Placeholder for the textarea.
-          * @category HTML Textarea
+          * @category Native attributes
          */
         "placeholder"?: string;
+        /**
+          * Provide the label via an aria attribute. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabel"?: string;
+        /**
+          * Provide the label from another element via its ID. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelledby"?: string;
+        /**
+          * Set a custom ID for the textarea.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnId"?: string;
         /**
           * Make the textarea readonly.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "readonly"?: boolean;
         /**
           * Make the textarea required.
-          * @category HTML Textarea
+          * @category Native attributes
           * @default false
          */
         "required"?: boolean;
         /**
           * Allow the user to resize the textarea vertically. Handle width in your own layout.
-          * @category HTML Textarea
+          * @category Native attributes
           * @default false
          */
         "resize"?: boolean;
         /**
           * Set the row count for the textarea.
-          * @category HTML Textarea
+          * @category Native attributes
           * @default 2
          */
         "rows"?: number;
         /**
           * Allow the browser to spellcheck the textarea.
-          * @category HTML Textarea
+          * @category Native attributes
           * @default false
          */
         "spellcheck": boolean;
         /**
-          * A unique ID connecting the element to the label.
-          * @category HTML Textarea
-          * @default this.id
+          * Set a custom ID for the textarea.
+          * @deprecated Use `pn-id` instead.
+          * @category HTML attributes
          */
         "textareaid"?: string;
         /**
           * Set the textarea as `valid`, will make the Label and focus rings green.
-          * @category State
+          * @category Features
           * @default false
          */
         "valid"?: boolean;
         /**
           * The textarea content, do not provide slotted content.
+          * @category Native attributes
           * @default ''
          */
         "value": string;
         /**
           * Set the wrap control.
-          * @category HTML Textarea
+          * @category Native attributes
           * @default 'soft'
          */
         "wrap"?: string;
@@ -2580,12 +2900,13 @@ export namespace Components {
     interface PnToggleSwitch {
         /**
           * Precheck the toggle.
+          * @category Native attributes
           * @default false
          */
         "checked": boolean;
         /**
           * Disable the toggle.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "disabled": boolean;
@@ -2596,39 +2917,65 @@ export namespace Components {
         /**
           * A label for the toggle switch.
          */
-        "label": string;
+        "label"?: string;
         /**
           * Make the toggle larger.
-          * @category Visual
+          * @category Features
           * @default false
          */
         "large": boolean;
         /**
           * Set the loading state.
-          * @category State
+          * @category Features
           * @default false
          */
         "loading": boolean;
         /**
           * HTML toggle name.
-          * @category HTML
+          * @category Native attributes
           * @default null
          */
         "name"?: string;
+        /**
+          * Provide the label via an aria attribute. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabel"?: string;
+        /**
+          * Provide the label from another element via its ID. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelledby"?: string;
+        /**
+          * Set a custom ID for the switch.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnId"?: string;
+        /**
+          * Set the switch as required.
+          * @since v7.25.0
+          * @category Native attributes
+          * @default false
+         */
+        "required": boolean;
         /**
           * Make the toggle smaller.
-          * @category Visual
+          * @category Features
           * @default false
          */
         "small": boolean;
         /**
-          * Set a unique HTML id.
-          * @default this.id
+          * Set a custom ID for the switch.
+          * @deprecated Use `pn-id` instead.
+          * @category HTML attributes
          */
-        "toggleid": string;
+        "toggleid"?: string;
         /**
           * HTML toggle value.
-          * @category HTML
+          * @category Native attributes
           * @default null
          */
         "value"?: string;
@@ -2746,7 +3093,7 @@ export namespace Components {
          */
         "step": number;
         /**
-          * The list of querySelectors that the wizards will highlight. Recommended maximum of 7 steps.
+          * The list of querySelectors that the wizards will highlight. If a selector is invalid or empty, the wizard will be centered on the screen.  Recommended maximum of 7 steps.
           * @category Wizard steps
           * @default []
          */
@@ -2783,6 +3130,10 @@ export interface PnCardCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPnCardElement;
 }
+export interface PnCheckboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPnCheckboxElement;
+}
 export interface PnCounterCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPnCounterElement;
@@ -2827,6 +3178,10 @@ export interface PnProgressIndicatorStepCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPnProgressIndicatorStepElement;
 }
+export interface PnRadioButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPnRadioButtonElement;
+}
 export interface PnRangeCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPnRangeElement;
@@ -2992,12 +3347,23 @@ declare global {
         prototype: HTMLPnCardElement;
         new (): HTMLPnCardElement;
     };
+    interface HTMLPnCheckboxElementEventMap {
+        "pnCheckboxChange": Event;
+    }
     /**
      * The `pn-checkbox` is built with a native `input[type="checkbox"]` in the background.
      * This means you can use native events to listen to the changes.
      * @nativeChange Use the `change` event to listen when the checkbox state is being toggled.
      */
     interface HTMLPnCheckboxElement extends Components.PnCheckbox, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPnCheckboxElementEventMap>(type: K, listener: (this: HTMLPnCheckboxElement, ev: PnCheckboxCustomEvent<HTMLPnCheckboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLPnCheckboxElementEventMap>(type: K, listener: (this: HTMLPnCheckboxElement, ev: PnCheckboxCustomEvent<HTMLPnCheckboxElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLPnCheckboxElement: {
         prototype: HTMLPnCheckboxElement;
@@ -3142,6 +3508,12 @@ declare global {
         prototype: HTMLPnIconElement;
         new (): HTMLPnIconElement;
     };
+    /**
+     * The `pn-illustration` is a wrapper for an SVG string.
+     * The component will look at the viewBox property of the SVG to determine the default width and height,
+     * but you can also set these manually with the `width` and `height` props.
+     * Setting the `fill` prop will make the illustration fill its parent container, which is useful for responsive designs.
+     */
     interface HTMLPnIllustrationElement extends Components.PnIllustration, HTMLStencilElement {
     }
     var HTMLPnIllustrationElement: {
@@ -3162,6 +3534,7 @@ declare global {
     };
     interface HTMLPnModalElementEventMap {
         "modalToggle": { open: boolean };
+        "modalVisibility": { visible: boolean };
         "modalVisiblity": { visible: boolean };
         "close": boolean;
     }
@@ -3370,12 +3743,23 @@ declare global {
         prototype: HTMLPnProgressStepperElement;
         new (): HTMLPnProgressStepperElement;
     };
+    interface HTMLPnRadioButtonElementEventMap {
+        "pnRadioChange": Event;
+    }
     /**
      * The `pn-radio-button` is built with a native `input[type="radio"]` in the background.
      * This means you can use native events to listen to the changes.
      * @nativeChange Use the `change` event to listen when the radio state is being changed.
      */
     interface HTMLPnRadioButtonElement extends Components.PnRadioButton, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPnRadioButtonElementEventMap>(type: K, listener: (this: HTMLPnRadioButtonElement, ev: PnRadioButtonCustomEvent<HTMLPnRadioButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLPnRadioButtonElementEventMap>(type: K, listener: (this: HTMLPnRadioButtonElement, ev: PnRadioButtonCustomEvent<HTMLPnRadioButtonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLPnRadioButtonElement: {
         prototype: HTMLPnRadioButtonElement;
@@ -3758,6 +4142,8 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    type OneOf<K extends string, PropT, AttrT = PropT> = { [P in K]: PropT } & { [P in `attr:${K}` | `prop:${K}`]?: never } | { [P in `attr:${K}`]: AttrT } & { [P in K | `prop:${K}`]?: never } | { [P in `prop:${K}`]: PropT } & { [P in K | `attr:${K}`]?: never };
+
     /**
      * The `pn-accordion` is a wrapper for `pn-accordion-row` components.
      * This component gives the accordion rows some space between each one and provides the `single` feature.
@@ -4177,17 +4563,19 @@ declare namespace LocalJSX {
     interface PnCheckbox {
         /**
           * A unique HTML ID for the checkbox.
-          * @default this.id
+          * @deprecated Use `pn-id` instead.
+          * @category HTML attributes
          */
         "checkboxid"?: string;
         /**
-          * Check the checkbox.
+          * Programmatically check the input.
+          * @category Native attributes
           * @default false
          */
         "checked"?: boolean;
         /**
           * Disable the checkbox.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "disabled"?: boolean;
@@ -4195,7 +4583,7 @@ declare namespace LocalJSX {
           * Allow the checkbox to control the slot area "content". When checked, the area is visible, when unchecked, the area is hidden.  The prop `tile` must be used at the same time.
           * @see {@link tile }
           * @since v7.17.0
-          * @category Tile
+          * @category Features
           * @default false
          */
         "expand"?: boolean;
@@ -4206,44 +4594,69 @@ declare namespace LocalJSX {
         /**
           * Add an icon on the right of your checkbox tile. The `tile` prop must be `true` for the icon to work.
           * @see {@link tile }
-          * @category Tile
+          * @category Features
           * @default null
          */
         "icon"?: string;
         /**
           * Sets the checkbox to an indeterminate state, allowing for a mixed or intermediate checkbox state.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "indeterminate"?: boolean;
         /**
-          * If set to true, color scheme will turn red, indicating that there is an issue or incorrect input related the checkbox.
-          * @category State
+          * If set to true, color scheme will turn red, indicating that there is an issue related to the checkbox.
+          * @category Native attributes
           * @default false
          */
         "invalid"?: boolean;
         /**
-          * The checkbox label
+          * The checkbox label, this is required for the checkbox to be 100% accessible out of the box.
          */
         "label"?: string;
         /**
           * The name of the checkbox group.
+          * @category Native attributes
          */
         "name"?: string;
+        /**
+          * This is the same as the native `change` event, but without bubbling. This is useful when you want to listen to the event directly on the `pn-checkbox` element without having to worry about catching events from nested pn-checkboxes.
+          * @since v7.25.0
+         */
+        "onPnCheckboxChange"?: (event: PnCheckboxCustomEvent<Event>) => void;
+        /**
+          * Provide the label via an aria attribute. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabel"?: string;
+        /**
+          * Provide the label from another element via its ID. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelledby"?: string;
+        /**
+          * A unique HTML ID for the checkbox.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnId"?: string;
         /**
           * Set the checkbox as required.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "required"?: boolean;
         /**
           * Turn the checkbox into a clickable tile. A border and padding is added.  **Do not** use interactive elements (links/buttons) inside of the slots when using this prop. An exception is made when using the `tile` + `expand` props together, which allows you to use interactive elements.
-          * @category Tile
+          * @category Features
           * @default false
          */
         "tile"?: boolean;
         /**
           * This will be emitted on change and input events.
+          * @category Native attributes
          */
         "value": string;
     }
@@ -4254,58 +4667,70 @@ declare namespace LocalJSX {
      */
     interface PnChoiceChip {
         /**
-          * Precheck the choice chip
+          * Programatically check the input.
+          * @category Native attributes
           * @default false
          */
         "checked"?: boolean;
         /**
-          * A unique HTML id
-          * @default `pn-choice-chip-${uuidv4()}`
+          * A unique HTML ID for the choice chip.
+          * @deprecated Use the `pn-id` prop instead.
+          * @category HTML attributes
          */
         "choiceid"?: string;
         /**
-          * Disable the choice chip.
-          * @category State
+          * Disable the input.
+          * @category Native attributes
           * @default false
          */
         "disabled"?: boolean;
         /**
-          * Include an icon
+          * Add an icon to the choice chip.
+          * @category Features
          */
         "icon"?: string;
         /**
-          * The choice chip label
+          * The choice chip label. This is required for the component to be accessible.
          */
         "label": string;
         /**
-          * Set the size to large.
-          * @category Size
+          * Use the large size for the choice chip.
+          * @category Features
           * @default false
          */
         "large"?: boolean;
         /**
-          * The name of the checkbox group
+          * The name of the checkbox group. This is required if you use the `radio` prop.
+          * @category Native attributes
          */
         "name"?: string;
         /**
-          * Make the choice chip a radio
+          * A unique HTML ID for the choice chip
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnId"?: string;
+        /**
+          * Make the choice chip a radio input. By default, it behaves as a checkbox. You must assign a `name` for the radio to work.
+          * @category Features
           * @default false
          */
         "radio"?: boolean;
         /**
-          * Set the choice chip as required.
-          * @category State
+          * Set the input as required.
+          * @category Native attributes
           * @default false
          */
         "required"?: boolean;
         /**
-          * Set the size to small.
-          * @category Size
+          * Use the small size for the choice chip.
+          * @category Features
           * @default false
          */
         "small"?: boolean;
         /**
-          * This will be emitted on change and input
+          * This will be emitted on change and input.
+          * @category Native attributes
          */
         "value": string;
     }
@@ -4318,17 +4743,19 @@ declare namespace LocalJSX {
         /**
           * Use the compact label variant.
           * @since v7.21.0
+          * @category Features
           * @default false
          */
         "compact"?: boolean;
         /**
-          * Set a unique HTML ID for the counter
-          * @default this.id
+          * Set a unique HTML ID for the counter.
+          * @deprecated Use `pn-id` instead.
+          * @category HTML attributes
          */
         "counterid"?: string;
         /**
           * Set the counter as disabled.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "disabled"?: boolean;
@@ -4337,78 +4764,104 @@ declare namespace LocalJSX {
          */
         "helpertext"?: string;
         /**
-          * Label for the counter
+          * Hide the tooltips for the increase/decrease button.
+          * @since v7.25.0
+          * @category Features
+          * @default false
          */
-        "label": string;
+        "hideTooltips"?: boolean;
+        /**
+          * Label for the counter. This is required for the counter to be 100% accessible out of the box.
+         */
+        "label"?: string;
         /**
           * Text for the decrease button. Default is "Decrease".
-          * @category Translation
+          * @category Features
          */
         "labelDecrease"?: string;
         /**
           * Text for the increase button. Default is "Increase".
-          * @category Translation
+          * @category Features
          */
         "labelIncrease"?: string;
         /**
           * Set the language manually for the built in translations.
-          * @default null
+          * @default undefined
          */
         "language"?: PnLanguages;
         /**
           * Suggest values for the counter input.
-          * @category HTML input
+          * @category Native attributes
          */
         "list"?: string;
         /**
           * Maximum value.
-          * @category HTML input
+          * @category Native attributes
          */
         "max"?: number;
         /**
           * Set a message that shows below input when user wants to set a value that is above `max`. Default is "Maximum value is x"
-          * @category Translation
+          * @category Features
          */
         "maxMessage"?: string;
         /**
           * Minimum value.
-          * @category HTML input
+          * @category Native attributes
          */
         "min"?: number;
         /**
           * Set a message that shows below input when user wants to set a value that is below `min`. Default is "Minimum value is x"
-          * @category Translation
+          * @category Features
          */
         "minMessage"?: string;
         /**
           * HTML input name.
-          * @category HTML input
+          * @category Native attributes
          */
         "name"?: string;
         /**
           * Instead of listening to multiple input, change and/or click events, we bundled them into one. - `value` is the current counter value. - `input` is true if the user changed the value with the HTML input. - `decrease` is true if the user clicked on the decrease button. - `increase` is true if the user clicked on the increase button.
          */
         "onCounterInput"?: (event: PnCounterCustomEvent<{ value: number; input?: boolean; decrease?: boolean; increase?: boolean }>) => void;
+        /**
+          * Provide the label via an aria attribute. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabel"?: string;
+        /**
+          * Provide the label from another element via its ID. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelledby"?: string;
+        /**
+          * Set a unique HTML ID for the counter.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnId"?: string;
         /**
           * Set the counter as readonly.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "readonly"?: boolean;
         /**
           * Set the counter as required.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "required"?: boolean;
         /**
           * Increase/decrease the value in steps, default is 1.
-          * @category HTML input
+          * @category Native attributes
           * @default 1
          */
         "step"?: number;
         /**
-          * Set a predefined value
+          * Set a predefined value.
+          * @category Native attributes
           * @default 0
          */
         "value"?: number;
@@ -4423,7 +4876,7 @@ declare namespace LocalJSX {
     interface PnDatePicker {
         /**
           * Set the input `autocomplete` attribute.
-          * @category HTML attributes
+          * @category Native attributes
          */
         "autocomplete"?: string;
         /**
@@ -4436,18 +4889,20 @@ declare namespace LocalJSX {
         /**
           * Set the date picker label as compact. If used, the `placeholder` will no longer be displayed.
           * @since v7.21.0
+          * @category Features
           * @default false
          */
         "compact"?: boolean;
         /**
           * Set a custom ID for the calendar.
           * @since v7.6.0
+          * @deprecated Use `pn-id` instead.
           * @category HTML attributes
-          * @default this.id
          */
         "dateId"?: string;
         /**
           * If you use a format with an unknown length, disable the max length.
+          * @since 7.11.3
           * @category Features
           * @default false
          */
@@ -4468,7 +4923,7 @@ declare namespace LocalJSX {
         /**
           * Set the date picker as disabled.
           * @since v7.6.0
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "disabled"?: boolean;
@@ -4480,29 +4935,31 @@ declare namespace LocalJSX {
          */
         "disabledDates"?: string;
         /**
-          * Set a predefined value for the from date.
+          * Set a predefined value for the from date. (input value end)
           * @see {@link range }
           * @see {@link format }
+          * @category Native attributes
           * @default ''
          */
         "end"?: string;
         /**
           * Placeholder for end date (defaults to the format prop).
           * @see {@link format }
-          * @category HTML attributes
-          * @default this.format
+          * @deprecated Use `placeholder-end` instead
+          * @category Native attributes
          */
         "endPlaceholder"?: string;
         /**
           * Set an error message for the date picker. Overwrites the helpertext if used at the same time.
           * @since v7.6.0
-          * @category Validation
+          * @category Features
          */
         "error"?: string;
         /**
           * Set the date format of the value.  While you can set any date value from the Dayjs documentation, we strongly recommend you pick a simple format that you can also type manually.
           * @since v7.6.0
           * @see {@link https://day.js.org/docs/en/display/format Day.js format documentation.}
+          * @category Features
           * @default 'YYYY-MM-DD'
          */
         "format"?: string;
@@ -4513,14 +4970,14 @@ declare namespace LocalJSX {
         /**
           * Trigger the invalid state without an error message.
           * @since v7.6.0
-          * @category Validation
+          * @category Features
           * @default false
          */
         "invalid"?: boolean;
         /**
           * Set a label for the from date.
          */
-        "labelFrom": string;
+        "labelFrom"?: string;
         /**
           * Set a label for the to date.
           * @see {@link range }
@@ -4528,26 +4985,26 @@ declare namespace LocalJSX {
         "labelTo"?: string;
         /**
           * Manually set language; this will be inherited from the topbar.
-          * @default null
+          * @default undefined
          */
         "language"?: PnLanguages;
         /**
           * Set the input `list` attribute for the first date input.
           * @since v7.6.0
-          * @category HTML attributes
+          * @category Native attributes
          */
         "list"?: string;
         /**
           * Set the input `list` attribute for the second date input.
           * @since v7.6.0
-          * @category HTML attributes
+          * @category Native attributes
          */
         "listEnd"?: string;
         /**
           * Latest date possible, this will determine how many years forward the date picker will show.  Remember to use the same format that you have in the `format` prop.
           * @see {@link format }
           * @example "2024-06-25"
-          * @category Min/max date
+          * @category Features
           * @default null
          */
         "maxDate"?: string;
@@ -4555,16 +5012,22 @@ declare namespace LocalJSX {
           * Earliest date possible, this will determine how many years back the date picker will show.  Remember to use the same format that you have in the `format` prop.
           * @see {@link format }
           * @example "2024-05-25"
-          * @category Min/max date
+          * @category Features
           * @default null
          */
         "minDate"?: string;
         /**
           * HTML input name
           * @since v7.6.0
-          * @category HTML attributes
+          * @category Native attributes
          */
         "name"?: string;
+        /**
+          * HTML input name
+          * @since v7.25.0
+          * @category Native attributes
+         */
+        "nameEnd"?: string;
         /**
           * Emmitted when you select a new view.
           * @since v7.6.0
@@ -4593,16 +5056,52 @@ declare namespace LocalJSX {
         /**
           * Set the HTML pattern prop on the input elements. Make sure it matches the format.
           * @since v7.6.0
-          * @category HTML attributes
+          * @category Native attributes
          */
         "pattern"?: string;
         /**
           * Placeholder for the input field (defaults to the format prop).
           * @see {@link format }
-          * @category HTML attributes
-          * @default this.format
+          * @category Native attributes
          */
         "placeholder"?: string;
+        /**
+          * Placeholder for end date (defaults to the format prop).
+          * @see {@link format }
+          * @since v7.25.0
+          * @category Native attributes
+         */
+        "placeholderEnd"?: string;
+        /**
+          * Provide the label via an aria attribute. We strongly recommend you use the `label-from` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabel"?: string;
+        /**
+          * Provide the label for the end input via an aria attribute. We strongly recommend you use the `label-to` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelEnd"?: string;
+        /**
+          * Provide the label from another element via its ID. We strongly recommend you use the `label-from` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelledby"?: string;
+        /**
+          * Provide the label for the end input from another element via its ID. We strongly recommend you use the `label-to` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelledbyEnd"?: string;
+        /**
+          * Set a custom ID for the calendar. If you use `range`, the end input will use `${pn-id}-end`.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnId"?: string;
         /**
           * Allow the selection of a date range.
           * @category Features
@@ -4620,19 +5119,20 @@ declare namespace LocalJSX {
         /**
           * Set the date picker as readonly.
           * @since v7.6.0
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "readonly"?: boolean;
         /**
           * Set the date picker as required.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "required"?: boolean;
         /**
-          * Set a predefined value for the from date.
+          * Set a predefined value for the from date (input value).
           * @see {@link format }
+          * @category Native attributes
           * @default ''
          */
         "start"?: string;
@@ -4640,7 +5140,7 @@ declare namespace LocalJSX {
           * The calendar grid is shown as default. You can set either `months` or `years` as your first choice.
           * @since v7.6.0
           * @category Features
-          * @default CALENDAR
+          * @default 'calendar'
          */
         "view"?: CalendarView;
         /**
@@ -4658,20 +5158,25 @@ declare namespace LocalJSX {
     interface PnFieldset {
         /**
           * Disable all of the inputs inside of the fieldset.
+          * @category Native attributes
           * @default false
          */
         "disabled"?: boolean;
         /**
           * Error message, applies warning styles and icon.
+          * @category Features
          */
         "error"?: string;
         /**
-          * Give the fieldset a custom HTML id.
+          * Set a custom ID for the fieldset.
+          * @deprecated Use `pn-id` instead.
+          * @category HTML attributes
           * @default this.id
          */
         "fieldsetId"?: string;
         /**
           * The id of the form you want the fieldset to be part of. If you want the inputs inside to be associated with a specific form, you need to set on those elements directly.
+          * @category Native attributes
          */
         "form"?: string;
         /**
@@ -4680,6 +5185,7 @@ declare namespace LocalJSX {
         "helpertext"?: string;
         /**
           * Set the fieldset as `invalid`, will add red error styles.
+          * @category Features
           * @default false
          */
         "invalid"?: boolean;
@@ -4689,8 +5195,16 @@ declare namespace LocalJSX {
         "legend": string;
         /**
           * Give the fieldset a HTML name.
+          * @category Native attributes
          */
         "name"?: string;
+        /**
+          * Set a custom ID for the fieldset.
+          * @since v7.25.0
+          * @category HTML attributes
+          * @default this.id
+         */
+        "pnId"?: string;
     }
     /**
      * Users can drop files directly into the upload area of the component
@@ -4702,18 +5216,18 @@ declare namespace LocalJSX {
     interface PnFileUpload {
         /**
           * Set which file types the input accepts. Ex: .docs,.xml
-          * @category HTML attributes
+          * @category Native attributes
          */
         "accept"?: string;
         /**
           * Use the capture mode.
           * @since v7.1.0
-          * @category HTML attributes
+          * @category Native attributes
          */
         "capture"?: '' | 'user' | 'environment';
         /**
           * Disable the input.
-          * @category HTML attributes
+          * @category Native attributes
           * @default false
          */
         "disabled"?: boolean;
@@ -4724,6 +5238,7 @@ declare namespace LocalJSX {
         "helpertext"?: string;
         /**
           * Always hide the progress bar, even when upload has begun.
+          * @since v7.1.0
           * @category Features
           * @default false
          */
@@ -4735,31 +5250,31 @@ declare namespace LocalJSX {
         "label"?: string;
         /**
           * Manually set the language.
-          * @category Features
-          * @default null
+          * @since v7.1.0
+          * @default undefined
          */
         "language"?: PnLanguages;
         /**
           * Set maximum amount of files to be selected. Any value above 1 will force the `multiple` to be `true`.
-          * @category HTML attributes
+          * @category Features
           * @default 1
          */
         "limit"?: number;
         /**
           * Set the maximum upload size.
-          * @category HTML attributes
+          * @category Features
           * @default ''
          */
         "maxSize"?: string;
         /**
           * Allow multiple files to be selected. Will be overwritten to true, if `limit` is above 1.
-          * @category HTML attributes
+          * @category Native attributes
          */
         "multiple"?: boolean;
         /**
           * Set a HTML name.
           * @since v7.1.0
-          * @category HTML attributes
+          * @category Native attributes
          */
         "name"?: string;
         /**
@@ -4795,8 +5310,15 @@ declare namespace LocalJSX {
          */
         "onValid"?: (event: PnFileUploadCustomEvent<this>) => void;
         /**
-          * Set the input as required.
+          * Set a custom ID for the file upload.
+          * @since v7.25.0
           * @category HTML attributes
+          * @default this.id
+         */
+        "pnId"?: string;
+        /**
+          * Set the input as required.
+          * @category Native attributes
           * @default false
          */
         "required"?: boolean;
@@ -4854,15 +5376,15 @@ declare namespace LocalJSX {
      */
     interface PnIcon {
         /**
-          * Color the icon with one of the follwing colors from our library.
-          * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-colors--docs PostNord Colors (Storybook)}
+          * Color the icon with one of the following colors from our library. Has no effects if you use flags from our library.
+          * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-colors--docs Colors (Storybook)}
           * @default 'gray900'
          */
         "color"?: PnColors;
         /**
-          * The SVG content of the icon you want to use.  Flags cannot be colored.
-          * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-icon--docs PostNord Icons (Storybook)}
-          * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-flag--docs PostNord Flags (Storybook)}
+          * The SVG content of the icon you want to use.
+          * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-icon--docs Icons (Storybook)}
+          * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-flag--docs Flags (Storybook)}
           * @default ''
          */
         "icon"?: string;
@@ -4872,6 +5394,12 @@ declare namespace LocalJSX {
          */
         "small"?: boolean;
     }
+    /**
+     * The `pn-illustration` is a wrapper for an SVG string.
+     * The component will look at the viewBox property of the SVG to determine the default width and height,
+     * but you can also set these manually with the `width` and `height` props.
+     * Setting the `fill` prop will make the illustration fill its parent container, which is useful for responsive designs.
+     */
     interface PnIllustration {
         /**
           * Make the SVG fill to its parent size (sets width/height 100% and `display: block` instead of `inline-block`)
@@ -4900,37 +5428,40 @@ declare namespace LocalJSX {
     interface PnInput {
         /**
           * Set the ID of what this input controls.
-          * @category HTML input
+          * @deprecated Use `pn-aria-controls` instead.
+          * @category HTML attributes
          */
         "ariacontrols"?: string;
         /**
           * While you can use the `aria-label`, using a `label` is far more accessible.
-          * @category HTML input
+          * @deprecated Use `pn-aria-label` instead.
+          * @category HTML attributes
          */
         "arialabel"?: string;
         /**
-          * Let the browser know what type of autocorrects the input should use. Works much better if a `name` and `inputid` is supplied.
+          * Let the browser know what type of autocorrects the input should use. Works much better if a `name` and `pn-id` is supplied.
           * @see {@link name }
           * @see {@link inputid }
-          * @category HTML input
+          * @category Native attributes
          */
         "autocomplete"?: string;
         /**
           * Use the compact label variant. The `placeholder` you provide will not be visible if used at the same time.
           * @since v7.21.0
+          * @category Features
           * @default false
          */
         "compact"?: boolean;
         /**
           * Set the input as `disabled`.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "disabled"?: boolean;
         /**
           * Set the input as `invalid` and display an error message (applies the same style as `invalid`).  Error message; will take precedence over helpertext if both are provided.
           * @see {@link invalid Set invalid without an error message.}
-          * @category Validation
+          * @category Features
          */
         "error"?: string;
         /**
@@ -4940,114 +5471,140 @@ declare namespace LocalJSX {
         /**
           * Select an icon to display before the input field value. `icon` takes precedence over the `text-prefix` prop.
           * @see {@link textPrefix }
-          * @category Visual
+          * @category Features
          */
         "icon"?: string;
         /**
-          * Provide a unique HTML id to connect the input with the label. A unique uuid ID will be generated if this field is left empty.
-          * @default this.id
+          * Set a custom ID for the input (default is a generated UUID).
+          * @deprecated Use `pn-id` instead.
+          * @category HTML attributes
          */
         "inputid"?: string;
         /**
           * Hint the browser about what type of virtual keyboard should be used. The browser will be able to decide this on its own most of the time, especially if you use the `type`, `name` and `inputid` props.  Leave empty or with a `''` value if you want the browsers default behaviour (`text`).
-          * @category HTML input
+          * @category Native attributes
          */
         "inputmode"?: 'text' | 'none' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
         /**
           * Set the input as `invalid`. Provides a red color and red warning icon.
           * @see {@link error Provide an error message.}
-          * @category Validation
+          * @category Features
           * @default false
          */
         "invalid"?: boolean;
         /**
           * Text label placed above the input field.
          */
-        "label": string;
+        "label"?: string;
         /**
           * Set the language manually for the translations of show/hide/clear button text. Not needed if you have the pntopbar on the page.
-          * @default null
+          * @default undefined
          */
         "language"?: PnLanguages;
         /**
           * Point to a datalist element for this input.
-          * @category HTML input
+          * @category Native attributes
          */
         "list"?: string;
         /**
           * Set the `max` value of the `number` input.
-          * @category HTML input
+          * @category Native attributes
          */
         "max"?: number | string;
         /**
           * The maximum number of characters the user should be able to add, also adds a visible counter.
-          * @category HTML input
+          * @category Native attributes
          */
         "maxlength"?: number;
         /**
           * Set the `min` value of the `number` input.
-          * @category HTML input
+          * @category Native attributes
          */
         "min"?: number | string;
         /**
           * HTML input name. Setting a name will help the browser understand what type of data the input have and can better assist with autofill data based on previous entires much better.
-          * @category HTML input
+          * @category Native attributes
          */
         "name"?: string;
         /**
           * Pattern prop.
-          * @category HTML input
+          * @category Native attributes
          */
         "pattern"?: string;
         /**
           * Provide a placeholder text. Remember that this is no replacement for a label. The placeholder should be a nice addition to the label/helpertext, not important information.
-          * @category HTML input
+          * @category Native attributes
          */
         "placeholder"?: string;
+        /**
+          * Set the ID of what this input controls.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaControls"?: string;
+        /**
+          * Provide the label via an aria attribute. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabel"?: string;
+        /**
+          * Provide the label from another element via its ID. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelledby"?: string;
+        /**
+          * Set a custom ID for the input (default is a generated UUID).
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnId"?: string;
         /**
           * Set the input as `readonly`.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "readonly"?: boolean;
         /**
           * Set the input as `required`.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "required"?: boolean;
         /**
           * Set a `step` for the number input.
-          * @category HTML input
+          * @category Native attributes
          */
         "step"?: number | string;
         /**
           * Set a small text before the input field value. Cannot be used together with an `icon` at the same time.
           * @see {@link icon }
           * @see {@link textSuffix }
-          * @category Visual
+          * @category Features
          */
         "textPrefix"?: string;
         /**
           * Set a small text after the input field value. Cannot be used with the `text-prefix` prop at the same time.
           * @see {@link textPrefix }
-          * @category Visual
+          * @category Features
          */
         "textSuffix"?: string;
         /**
           * pn-input supports: `text`, `password`, `url`, `tel`, `search`, `number` & `email`.
-          * @category HTML input
+          * @category Native attributes
           * @default 'text'
          */
         "type"?: 'text' | 'password' | 'url' | 'tel' | 'search' | 'number' | 'email' | '';
         /**
           * Set the input as `valid`. Provides a green color and a check icon.
-          * @category Validation
+          * @category Features
           * @default false
          */
         "valid"?: boolean;
         /**
           * Set the value of the input.
+          * @category Native attributes
           * @default ''
          */
         "value"?: string;
@@ -5059,8 +5616,9 @@ declare namespace LocalJSX {
      */
     interface PnModal {
         /**
-          * Allow overflow if possible. When the modal opens, it will check scrollHeight > offsetHeight. Do not use if you have a lot of conditional rendering inside the modal.
+          * Allow overflow *when* it is possible. Do not use if you have a lot of conditional rendering inside the modal as it can cause layout shifts.
           * @since v7.14.0
+          * @category Features
           * @default false
          */
         "allowOverflow"?: boolean;
@@ -5070,7 +5628,7 @@ declare namespace LocalJSX {
          */
         "helpertext"?: string;
         /**
-          * Hide the close button. If you disable this, make sure you build your own cancel button.
+          * Hide the close button. If you enable this, make sure you build your own cancel button.
           * @since v7.14.0
           * @category Features
           * @default false
@@ -5104,12 +5662,18 @@ declare namespace LocalJSX {
          */
         "onModalToggle"?: (event: PnModalCustomEvent<{ open: boolean }>) => void;
         /**
-          * This event is dispatched after the opening/closing animation has finished playing. {@since v7.14.0}
+          * This event is dispatched after the opening/closing animation has finished playing. {@since v7.22.0}
          */
-        "onModalVisiblity"?: (event: PnModalCustomEvent<{ visible: boolean }>) => void;
+        "onModalVisibility"?: (event: PnModalCustomEvent<{ visible: boolean }>) => void;
         /**
-          * Bind to this property if you want to control the visibility of the modal from your own data.
-          * @category Features
+          * This event is dispatched after the opening/closing animation has finished playing.
+          * @since v7.14.0
+          * @deprecated v7.22.0. Use `modalVisibility` instead due to typo.
+         */
+        "onModalVisiblity"?: (event: PnModalCustomEvent<{ visible: boolean }>) => void;
+        /**
+          * Use this prop if you want to control the visibility of the modal programmatically.
+          * @category Features
           * @default false
          */
         "open"?: boolean;
@@ -5121,7 +5685,13 @@ declare namespace LocalJSX {
          */
         "persistent"?: boolean;
         /**
-          * Use the `sheet` visual. Aligns the modal to the right.
+          * Set a custom HTML id.
+          * @since v7.24.0
+          * @default null
+         */
+        "pnId"?: string;
+        /**
+          * Use the `sheet` visual. Aligns the modal to the right instead of the center.
           * @since v7.14.0
           * @category Visual
           * @default false
@@ -5152,18 +5722,19 @@ declare namespace LocalJSX {
         /**
           * Set the date picker label as compact. If used, the `placeholder` will no longer be displayed.
           * @since v7.21.0
+          * @category Features
           * @default false
          */
         "compact"?: boolean;
         /**
           * Disable the select.
-          * @category Validation
+          * @category Native attributes
           * @default false
          */
         "disabled"?: boolean;
         /**
           * Display an error message and trigger the invalid state.
-          * @category Validation
+          * @category Features
          */
         "error"?: string;
         /**
@@ -5172,11 +5743,12 @@ declare namespace LocalJSX {
         "helpertext"?: string;
         /**
           * Display an icon to the left of the select input
+          * @category Features
          */
         "icon"?: string;
         /**
           * Trigger the invalid state.
-          * @category Validation
+          * @category Features
           * @default false
          */
         "invalid"?: boolean;
@@ -5190,20 +5762,20 @@ declare namespace LocalJSX {
         /**
           * Label placed above the select
          */
-        "label": string;
+        "label"?: string;
         /**
           * Manually set the language, not needed if you have the pnTopbar available
-          * @default null
+          * @default undefined
          */
         "language"?: PnLanguages;
         /**
-          * Use a custom max-height for the dropdown list.
-          * @description The component will automatically set the max height of the dropdown list on its own. It takes the `pn-topbar` into account and will open in the direction that fits best. Use this prop to override this behaviour and use a custom max-height.
+          * The component will automatically set the max height of the dropdown list on its own. It takes the `pn-topbar` into account and will open in the direction that fits best. Use this prop to override this behaviour and use a custom max-height.
           * @category Features
          */
         "maxHeight"?: string;
         /**
           * HTML name of the checkbox elements. Used for each checkbox inside the multiselect.
+          * @category Native attributes
          */
         "name"?: string;
         /**
@@ -5235,17 +5807,37 @@ declare namespace LocalJSX {
          */
         "onToggleSelect"?: (event: PnMultiselectCustomEvent<{ open: boolean }>) => void;
         /**
-          * Array of options.
-          * @hide true
+          * The array of `PnMultiselectOption` objects.
+          * @see {@link PnMultiselectOption } for the option object properties.
+          * @category Features
          */
         "options": PnMultiselectOption[];
         /**
           * This is what will be shown on load if no value is used. The `placeholder` will override the default text used if you have the `search` prop active.
+          * @category Native attributes
          */
         "placeholder"?: string;
+        /**
+          * Provide the label via an aria attribute. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabel"?: string;
+        /**
+          * Provide the label from another element via its ID. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelledby"?: string;
+        /**
+          * Set a custom ID for the select.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnId"?: string;
         /**
           * Set the select as required.
-          * @category Validation
+          * @category Native attributes
           * @default false
          */
         "required"?: boolean;
@@ -5271,11 +5863,13 @@ declare namespace LocalJSX {
         "selectAll"?: boolean;
         /**
           * Select HTML id
-          * @default this.id
+          * @deprecated Use `pn-id` instead.
+          * @category HTML attributes
          */
         "selectId"?: string;
         /**
           * HTML name of the input element.
+          * @category Native attributes
          */
         "selectName"?: string;
         /**
@@ -5560,13 +6154,14 @@ declare namespace LocalJSX {
      */
     interface PnRadioButton {
         /**
-          * Check the radio.
+          * Programmatically check the input.
+          * @category Native attributes
           * @default false
          */
         "checked"?: boolean;
         /**
           * Disable the radio.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "disabled"?: boolean;
@@ -5574,7 +6169,7 @@ declare namespace LocalJSX {
           * Allow the radio to control the slot area "content". When checked, the area is visible, when unchecked, the area is hidden.  The prop `tile` must be used at the same time.
           * @see {@link tile }
           * @since v7.17.0
-          * @category Tile
+          * @category Features
           * @default false
          */
         "expand"?: boolean;
@@ -5585,13 +6180,13 @@ declare namespace LocalJSX {
         /**
           * Add an icon on the right of your radio tile. The `tile` prop must be `true` for the icon to work.
           * @see {@link tile }
-          * @category Tile
+          * @category Features
           * @default null
          */
         "icon"?: string;
         /**
           * If set to true, color scheme will turn red, indicating that there is an issue or incorrect input related the radio.
-          * @category State
+          * @category Features
           * @default false
          */
         "invalid"?: boolean;
@@ -5601,27 +6196,53 @@ declare namespace LocalJSX {
         "label"?: string;
         /**
           * The name of the radio group.
+          * @category Native attributes
          */
         "name"?: string;
+        /**
+          * This is the same as the native `change` event, but without bubbling. This is useful when you want to listen to the event directly on the `pn-radio-button` element without having to worry about catching events from nested pn-radio-buttons.
+          * @since v7.25.0
+         */
+        "onPnRadioChange"?: (event: PnRadioButtonCustomEvent<Event>) => void;
+        /**
+          * Provide the label via an aria attribute. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabel"?: string;
+        /**
+          * Provide the label from another element via its ID. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelledby"?: string;
         /**
           * A unique HTML ID for the radio.
-          * @default this.id
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnId"?: string;
+        /**
+          * A unique HTML ID for the radio.
+          * @deprecated Use `pn-id` instead.
+          * @category HTML attributes
          */
         "radioid"?: string;
         /**
           * Set the radio as required.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "required"?: boolean;
         /**
           * Turn the radio into a clickable tile. A border and padding is added.  **Do not** use interactive elements (links/buttons) inside of the slots when using this prop. An exception is made when using the `tile` + `expand` props together, which allows you to use interactive elements.
-          * @category Tile
+          * @category Features
           * @default false
          */
         "tile"?: boolean;
         /**
           * This will be emitted on change and input events.
+          * @category Native attributes
          */
         "value": string;
     }
@@ -5635,13 +6256,13 @@ declare namespace LocalJSX {
     interface PnRange {
         /**
           * Disable the range input.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "disabled"?: boolean;
         /**
           * Set an error message for the range input.
-          * @category State
+          * @category Features
           * @default null
          */
         "error"?: string;
@@ -5652,11 +6273,13 @@ declare namespace LocalJSX {
         "helpertext"?: string;
         /**
           * Set an icon for the range/input field.
+          * @category Features
           * @default null
          */
         "icon"?: string;
         /**
           * Set an icon at the end of the range or for the second input field when using `multiple`.
+          * @category Features
           * @default null
          */
         "iconEnd"?: string;
@@ -5668,32 +6291,33 @@ declare namespace LocalJSX {
         "input"?: boolean;
         /**
           * Set the error visual for the range input, same as `error`, but without a message.
-          * @category State
+          * @category Features
           * @default false
          */
         "invalid"?: boolean;
         /**
           * Label for the range input.
          */
-        "label": string;
+        "label"?: string;
         /**
           * Label for the range end input.
          */
         "labelEnd"?: string;
         /**
           * Add markers. This will also render a `datalist` element with `options`. Omitting the `label` for a marker will use the `value` as label instead. Set `label` to `null` or `''` to hide it completely.
+          * @category Features
           * @default []
          */
         "markers"?: { value: number; label?: string }[];
         /**
           * The range input max value.
-          * @category HTML Attributes
+          * @category Native attributes
           * @default 100
          */
         "max"?: number;
         /**
           * The range input min value.
-          * @category HTML Attributes
+          * @category Native attributes
           * @default 0
          */
         "min"?: number;
@@ -5705,12 +6329,12 @@ declare namespace LocalJSX {
         "multiple"?: boolean;
         /**
           * The range input name.
-          * @category HTML Attributes
+          * @category Native attributes
          */
         "name"?: string;
         /**
           * The range input name.
-          * @category HTML Attributes
+          * @category Native attributes
          */
         "nameEnd"?: string;
         /**
@@ -5726,28 +6350,56 @@ declare namespace LocalJSX {
     difference?: number;
   }>) => void;
         /**
-          * Set a custom HTML id.
+          * Provide the label via an aria attribute. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabel"?: string;
+        /**
+          * Provide the label for the end input via an aria attribute. We strongly recommend you use the `label-end` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelEnd"?: string;
+        /**
+          * Provide the label from another element via its ID. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelledby"?: string;
+        /**
+          * Provide the label for the end input from another element via its ID. We strongly recommend you use the `label-end` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelledbyEnd"?: string;
+        /**
+          * Set a custom ID for the input.
+          * @category HTML attributes
           * @default this.id
          */
         "pnId"?: string;
         /**
-          * Set a custom HTML id.
+          * Set a custom ID for the end input.
+          * @category HTML attributes
           * @default this.idEnd
          */
         "pnIdEnd"?: string;
         /**
           * Set a step value for the range input.
-          * @category HTML Attributes
+          * @category Native attributes
           * @default ''
          */
         "step"?: HTMLInputElement['step'];
         /**
           * Set a prefix for the range/input field.
+          * @category Features
           * @default null
          */
         "textPrefix"?: string;
         /**
           * Set a suffix for the range/input field.
+          * @category Features
           * @default null
          */
         "textSuffix"?: string;
@@ -5766,13 +6418,13 @@ declare namespace LocalJSX {
         "tooltipTemplate"?: string;
         /**
           * The range input value.
-          * @category HTML Attributes
+          * @category Native attributes
           * @default 0
          */
         "value"?: number;
         /**
           * The range end input value.
-          * @category HTML Attributes
+          * @category Native attributes
           * @default 0
          */
         "valueEnd"?: number;
@@ -5816,59 +6468,62 @@ declare namespace LocalJSX {
     interface PnSearchField {
         /**
           * Allow the browser to autocomplete the search field.
+          * @category Native attributes
          */
         "autocomplete"?: string;
         /**
           * Button variant changes the visual of the search field: - `''` Standard with a blue button. - `simple` | ~~`icon`~~ with simple white icon only button. - `auto` | ~~`icon-inline`~~ | ~~`none`~~ with a white inline search button. - `jumbo` with a larger blue icon only button.
           * @since v7.18.0: Use `''`, `simple`, `auto` or `jumbo`.
-          * @category Button
+          * @category Features
           * @default ''
          */
         "button"?: PnSearchFieldButton;
         /**
           * Label for the button element.
-          * @category Button
+          * @category Features
          */
         "buttonLabel"?: string;
         /**
           * Light instead of dark search button.
           * @deprecated The color is now set automatically based on the button prop.
-          * @category Button
+          * @category Features
           * @default false
          */
         "buttonLight"?: boolean;
         /**
           * Add a tooltip to the search button.
-          * @category Button
+          * @category Features
          */
         "buttonTooltip"?: string;
         /**
           * Disable the search field.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "disabled"?: boolean;
         /**
           * Provide an aria-label for the search field.
          */
-        "label": string;
+        "label"?: string;
         /**
           * Override the pntopbar language.
-          * @default null
+          * @default undefined
          */
         "language"?: PnLanguages;
         /**
           * Point to a datalist element with this id.
+          * @category Native attributes
          */
         "list"?: string;
         /**
           * Display loading animation.
-          * @category State
+          * @category Features
           * @default false
          */
         "loading"?: boolean;
         /**
           * Set HTML name of the search input.
+          * @category Native attributes
          */
         "name"?: string;
         /**
@@ -5880,22 +6535,37 @@ declare namespace LocalJSX {
          */
         "onUpdate"?: (event: PnSearchFieldCustomEvent<string>) => void;
         /**
-          * Set a search field placeholder. This is no replacement for a `label`.
+          * Set a search field placeholder.
+          * @category Native attributes
          */
         "placeholder"?: string;
+        /**
+          * Provide the label from another element via its ID. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelledby"?: string;
+        /**
+          * Set a custom ID for the search input.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnId"?: string;
         /**
           * Set the search field as required.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "required"?: boolean;
         /**
           * Set a unique ID for the search input.
-          * @default this.id
+          * @deprecated Use `pn-id` instead.
+          * @category HTML attributes
          */
         "searchid"?: string;
         /**
           * Set the value of the search field.
+          * @category Native attributes
           * @default ''
          */
         "value"?: string;
@@ -5908,11 +6578,13 @@ declare namespace LocalJSX {
         /**
           * Disable the segment.
           * @since v7.7.0
+          * @category Native attributes
           * @default false
          */
         "disabled"?: boolean;
         /**
           * The SVG content of the icon you want.
+          * @category Features
          */
         "icon"?: string;
         /**
@@ -5922,6 +6594,7 @@ declare namespace LocalJSX {
         "label"?: string;
         /**
           * The segment controller name.
+          * @category Native attributes
          */
         "name": string;
         /**
@@ -5929,8 +6602,15 @@ declare namespace LocalJSX {
          */
         "onSegmentHover"?: (event: PnSegmentCustomEvent<MouseEvent>) => void;
         /**
-          * A unique HTML id.
-          * @default this.id
+          * Set a custom ID for the segment.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnId"?: string;
+        /**
+          * Set a custom ID for the segment.
+          * @deprecated Use `pn-id` instead.
+          * @category HTML attributes
          */
         "segmentid"?: string;
         /**
@@ -5941,6 +6621,7 @@ declare namespace LocalJSX {
         "selected"?: boolean;
         /**
           * The segment value.
+          * @category Native attributes
          */
         "value": string;
     }
@@ -5954,7 +6635,7 @@ declare namespace LocalJSX {
           * This is the name of the radio buttons inside the controller.
           * @deprecated Set the name in the nested `pn-segment` components.
          */
-        "name": string;
+        "name"?: string;
         /**
           * Currently active segment value.
          */
@@ -5969,29 +6650,30 @@ declare namespace LocalJSX {
     interface PnSelect {
         /**
           * HTML autocomplete.
-          * @category HTML
+          * @category Native attributes
          */
         "autocomplete"?: string;
         /**
           * Use the compact label variant.
           * @since v7.21.0
+          * @category Features
           * @default false
          */
         "compact"?: boolean;
         /**
           * Disable the select.
-          * @category Validation
+          * @category Native attributes
           * @default false
          */
         "disabled"?: boolean;
         /**
           * Display an error message and trigger the invalid state.
-          * @category Validation
+          * @category Features
          */
         "error"?: string;
         /**
           * HTML form name.
-          * @category HTML
+          * @category Native attributes
          */
         "form"?: string;
         /**
@@ -6000,32 +6682,52 @@ declare namespace LocalJSX {
         "helpertext"?: string;
         /**
           * Display an icon to the left of the select input.
+          * @category Features
          */
         "icon"?: string;
         /**
           * Trigger the invalid state.
-          * @category Validation
+          * @category Features
           * @default false
          */
         "invalid"?: boolean;
         /**
           * Label placed above the select.
          */
-        "label": string;
+        "label"?: string;
         /**
           * HTML select name.
-          * @category HTML
+          * @category Native attributes
          */
         "name"?: string;
+        /**
+          * Provide the label via an aria attribute. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabel"?: string;
+        /**
+          * Provide the label from another element via its ID. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelledby"?: string;
+        /**
+          * Set a custom ID for the select.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnId"?: string;
         /**
           * Set the select as required.
-          * @category Validation
+          * @category Native attributes
           * @default false
          */
         "required"?: boolean;
         /**
-          * Select HTML id
-          * @default this.id
+          * Set a custom ID for the select.
+          * @deprecated Use `pn-id` instead.
+          * @category HTML attributes
          */
         "selectId"?: string;
     }
@@ -6272,36 +6974,37 @@ declare namespace LocalJSX {
     interface PnTextarea {
         /**
           * Allow the browser to autocomplete the textarea.
-          * @category HTML Textarea
+          * @category Native attributes
           * @default 'off'
          */
         "autocomplete"?: string;
         /**
           * Set the col count for the textarea.
-          * @category HTML Textarea
+          * @category Native attributes
           * @default 20
          */
         "cols"?: number;
         /**
           * Use the compact label variant.
           * @since v7.21.0
+          * @category Features
           * @default false
          */
         "compact"?: boolean;
         /**
           * Disable the textarea.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "disabled"?: boolean;
         /**
           * Same as `invalid`, but will display the string as an error message under the textarea.
-          * @category State
+          * @category Features
          */
         "error"?: string;
         /**
           * Set the associated form.
-          * @category HTML Textarea
+          * @category Native attributes
          */
         "form"?: string;
         /**
@@ -6310,79 +7013,98 @@ declare namespace LocalJSX {
         "helpertext"?: string;
         /**
           * Set the textarea as `invalid`, will make the Label and focus rings red.
-          * @category State
+          * @category Features
           * @default false
          */
         "invalid"?: boolean;
         /**
           * The label describing the textarea.
          */
-        "label": string;
+        "label"?: string;
         /**
           * The maximum number of characters the user should be able to add, also adds a visible counter.
-          * @category HTML Textarea
+          * @category Native attributes
          */
         "maxlength"?: number;
         /**
           * HTML name.
-          * @category HTML Textarea
+          * @category Native attributes
          */
         "name"?: string;
         /**
           * Placeholder for the textarea.
-          * @category HTML Textarea
+          * @category Native attributes
          */
         "placeholder"?: string;
+        /**
+          * Provide the label via an aria attribute. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabel"?: string;
+        /**
+          * Provide the label from another element via its ID. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelledby"?: string;
+        /**
+          * Set a custom ID for the textarea.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnId"?: string;
         /**
           * Make the textarea readonly.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "readonly"?: boolean;
         /**
           * Make the textarea required.
-          * @category HTML Textarea
+          * @category Native attributes
           * @default false
          */
         "required"?: boolean;
         /**
           * Allow the user to resize the textarea vertically. Handle width in your own layout.
-          * @category HTML Textarea
+          * @category Native attributes
           * @default false
          */
         "resize"?: boolean;
         /**
           * Set the row count for the textarea.
-          * @category HTML Textarea
+          * @category Native attributes
           * @default 2
          */
         "rows"?: number;
         /**
           * Allow the browser to spellcheck the textarea.
-          * @category HTML Textarea
+          * @category Native attributes
           * @default false
          */
         "spellcheck"?: boolean;
         /**
-          * A unique ID connecting the element to the label.
-          * @category HTML Textarea
-          * @default this.id
+          * Set a custom ID for the textarea.
+          * @deprecated Use `pn-id` instead.
+          * @category HTML attributes
          */
         "textareaid"?: string;
         /**
           * Set the textarea as `valid`, will make the Label and focus rings green.
-          * @category State
+          * @category Features
           * @default false
          */
         "valid"?: boolean;
         /**
           * The textarea content, do not provide slotted content.
+          * @category Native attributes
           * @default ''
          */
         "value"?: string;
         /**
           * Set the wrap control.
-          * @category HTML Textarea
+          * @category Native attributes
           * @default 'soft'
          */
         "wrap"?: string;
@@ -6523,12 +7245,13 @@ declare namespace LocalJSX {
     interface PnToggleSwitch {
         /**
           * Precheck the toggle.
+          * @category Native attributes
           * @default false
          */
         "checked"?: boolean;
         /**
           * Disable the toggle.
-          * @category State
+          * @category Native attributes
           * @default false
          */
         "disabled"?: boolean;
@@ -6539,39 +7262,65 @@ declare namespace LocalJSX {
         /**
           * A label for the toggle switch.
          */
-        "label": string;
+        "label"?: string;
         /**
           * Make the toggle larger.
-          * @category Visual
+          * @category Features
           * @default false
          */
         "large"?: boolean;
         /**
           * Set the loading state.
-          * @category State
+          * @category Features
           * @default false
          */
         "loading"?: boolean;
         /**
           * HTML toggle name.
-          * @category HTML
+          * @category Native attributes
           * @default null
          */
         "name"?: string;
+        /**
+          * Provide the label via an aria attribute. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabel"?: string;
+        /**
+          * Provide the label from another element via its ID. We strongly recommend you use the `label` prop instead.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnAriaLabelledby"?: string;
+        /**
+          * Set a custom ID for the switch.
+          * @since v7.25.0
+          * @category HTML attributes
+         */
+        "pnId"?: string;
+        /**
+          * Set the switch as required.
+          * @since v7.25.0
+          * @category Native attributes
+          * @default false
+         */
+        "required"?: boolean;
         /**
           * Make the toggle smaller.
-          * @category Visual
+          * @category Features
           * @default false
          */
         "small"?: boolean;
         /**
-          * Set a unique HTML id.
-          * @default this.id
+          * Set a custom ID for the switch.
+          * @deprecated Use `pn-id` instead.
+          * @category HTML attributes
          */
         "toggleid"?: string;
         /**
           * HTML toggle value.
-          * @category HTML
+          * @category Native attributes
           * @default null
          */
         "value"?: string;
@@ -6701,7 +7450,7 @@ declare namespace LocalJSX {
          */
         "step"?: number;
         /**
-          * The list of querySelectors that the wizards will highlight. Recommended maximum of 7 steps.
+          * The list of querySelectors that the wizards will highlight. If a selector is invalid or empty, the wizard will be centered on the screen.  Recommended maximum of 7 steps.
           * @category Wizard steps
           * @default []
          */
@@ -6725,55 +7474,640 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+
+    interface PnAccordionAttributes {
+        "single": boolean;
+        "transparent": boolean;
+    }
+    interface PnAccordionRowAttributes {
+        "label": string;
+        "state": boolean;
+        "buttonid": string;
+        "contentid": string;
+        "transparent": boolean;
+    }
+    interface PnActionMenuAttributes {
+        "menuId": string;
+        "language": PnLanguages;
+        "open": boolean;
+        "menuUp": boolean;
+        "menuLeft": boolean;
+    }
+    interface PnButtonAttributes {
+        "label": string;
+        "appearance": PnButtonAppearance;
+        "variant": PnButtonVariant;
+        "small": boolean;
+        "loading": boolean;
+        "icon": string;
+        "iconOnly": boolean;
+        "leftIcon": boolean;
+        "tooltip": string;
+        "tooltipUp": boolean;
+        "type": 'button' | 'reset' | 'submit' | '';
+        "form": string;
+        "href": string;
+        "rel": string;
+        "target": string;
+        "download": string;
+        "buttonId": string;
+        "arialabel": string;
+        "arialabelledby": string;
+        "ariacurrent": string;
+        "ariacontrols": string;
+        "ariapressed": string;
+        "ariahaspopup": string;
+        "ariaexpanded": string;
+        "noTab": boolean;
+    }
+    interface PnButtonDropdownAttributes {
+        "label": string;
+        "icon": string;
+        "appearance": PnButtonAppearance;
+        "variant": PnButtonVariant;
+        "small": boolean;
+        "tooltip": string;
+        "open": boolean;
+    }
+    interface PnCardAttributes {
+        "label": string;
+        "labelTag": 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+        "overline": string;
+        "text": string;
+        "cardId": string;
+        "horizontal": boolean;
+        "reverse": boolean;
+        "aspectRatio": string | '3/3' | '16/9';
+        "href": string;
+        "hrefLabel": string;
+        "target": string;
+        "rel": string;
+        "icon": string;
+    }
+    interface PnCheckboxAttributes {
+        "label": string;
+        "helpertext": string;
+        "value": string;
+        "name": string;
+        "checked": boolean;
+        "required": boolean;
+        "disabled": boolean;
+        "invalid": boolean;
+        "indeterminate": boolean;
+        "tile": boolean;
+        "expand": boolean;
+        "icon": string;
+        "pnId": string;
+        "pnAriaLabel": string;
+        "pnAriaLabelledby": string;
+        "checkboxid": string;
+    }
+    interface PnChoiceChipAttributes {
+        "label": string;
+        "value": string;
+        "name": string;
+        "checked": boolean;
+        "required": boolean;
+        "disabled": boolean;
+        "radio": boolean;
+        "icon": string;
+        "small": boolean;
+        "large": boolean;
+        "pnId": string;
+        "choiceid": string;
+    }
+    interface PnCounterAttributes {
+        "label": string;
+        "helpertext": string;
+        "language": PnLanguages;
+        "value": number;
+        "name": string;
+        "min": number;
+        "max": number;
+        "step": number;
+        "list": string;
+        "required": boolean;
+        "readonly": boolean;
+        "disabled": boolean;
+        "compact": boolean;
+        "labelDecrease": string;
+        "labelIncrease": string;
+        "hideTooltips": boolean;
+        "minMessage": string;
+        "maxMessage": string;
+        "pnId": string;
+        "pnAriaLabel": string;
+        "pnAriaLabelledby": string;
+        "counterid": string;
+    }
+    interface PnDatePickerAttributes {
+        "labelFrom": string;
+        "labelTo": string;
+        "helpertext": string;
+        "language": PnLanguages;
+        "start": string;
+        "end": string;
+        "name": string;
+        "nameEnd": string;
+        "placeholder": string;
+        "endPlaceholder": string;
+        "placeholderEnd": string;
+        "autocomplete": string;
+        "list": string;
+        "listEnd": string;
+        "pattern": string;
+        "required": boolean;
+        "readonly": boolean;
+        "disabled": boolean;
+        "format": string;
+        "disableTypeAhead": boolean;
+        "disableWeekends": boolean;
+        "disabledDates": string;
+        "disableMaxLength": boolean;
+        "range": boolean;
+        "rangeLimit": number;
+        "weekNumbers": boolean;
+        "compact": boolean;
+        "calendarUp": boolean;
+        "view": CalendarView;
+        "invalid": boolean;
+        "error": string;
+        "pnId": string;
+        "pnAriaLabel": string;
+        "pnAriaLabelEnd": string;
+        "pnAriaLabelledby": string;
+        "pnAriaLabelledbyEnd": string;
+        "dateId": string;
+        "minDate": string;
+        "maxDate": string;
+    }
+    interface PnFieldsetAttributes {
+        "legend": string;
+        "helpertext": string;
+        "name": string;
+        "form": string;
+        "disabled": boolean;
+        "invalid": boolean;
+        "error": string;
+        "pnId": string;
+        "fieldsetId": string;
+    }
+    interface PnFileUploadAttributes {
+        "label": string;
+        "helpertext": string;
+        "language": PnLanguages;
+        "name": string;
+        "accept": string;
+        "capture": '' | 'user' | 'environment';
+        "multiple": boolean;
+        "required": boolean;
+        "disabled": boolean;
+        "limit": number;
+        "maxSize": string;
+        "hideProgress": boolean;
+        "pnId": string;
+    }
+    interface PnFooterAttributes {
+        "market": PnMarkets;
+        "language": PnLanguages;
+    }
+    interface PnHeaderAttributes {
+        "heading": string;
+        "maxWidth": string;
+        "goBackHref": string;
+        "goBackText": string;
+        "language": PnLanguages;
+    }
+    interface PnIconAttributes {
+        "icon": string;
+        "small": boolean;
+        "color": PnColors;
+    }
+    interface PnIllustrationAttributes {
+        "illustration": string;
+        "width": string;
+        "height": string;
+        "fill": boolean;
+    }
+    interface PnInputAttributes {
+        "label": string;
+        "helpertext": string;
+        "language": PnLanguages;
+        "value": string;
+        "type": 'text' | 'password' | 'url' | 'tel' | 'search' | 'number' | 'email' | '';
+        "name": string;
+        "placeholder": string;
+        "autocomplete": string;
+        "maxlength": number;
+        "inputmode": 'text' | 'none' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+        "list": string;
+        "pattern": string;
+        "min": string;
+        "max": string;
+        "step": string;
+        "required": boolean;
+        "readonly": boolean;
+        "disabled": boolean;
+        "compact": boolean;
+        "icon": string;
+        "textPrefix": string;
+        "textSuffix": string;
+        "valid": boolean;
+        "invalid": boolean;
+        "error": string;
+        "pnId": string;
+        "pnAriaLabel": string;
+        "pnAriaLabelledby": string;
+        "pnAriaControls": string;
+        "inputid": string;
+        "arialabel": string;
+        "ariacontrols": string;
+    }
+    interface PnModalAttributes {
+        "label": string;
+        "helpertext": string;
+        "language": PnLanguages;
+        "pnId": string;
+        "open": boolean;
+        "persistent": boolean;
+        "hideClose": boolean;
+        "allowOverflow": boolean;
+        "sheet": boolean;
+        "maxWidth": string;
+    }
+    interface PnMultiselectAttributes {
+        "label": string;
+        "helpertext": string;
+        "language": PnLanguages;
+        "name": string;
+        "selectName": string;
+        "placeholder": string;
+        "required": boolean;
+        "disabled": boolean;
+        "compact": boolean;
+        "icon": string;
+        "selectAll": boolean;
+        "allValue": string;
+        "search": boolean;
+        "searchQuery": string;
+        "itemCount": number;
+        "maxHeight": string;
+        "top": boolean;
+        "bottom": boolean;
+        "invalid": boolean;
+        "error": string;
+        "pnId": string;
+        "pnAriaLabel": string;
+        "pnAriaLabelledby": string;
+        "selectId": string;
+    }
+    interface PnOcrSearchAttributes {
+        "language": PnLanguages;
+    }
+    interface PnPageNavAttributes {
+        "value": string;
+        "dropdown": string;
+        "navid": string;
+    }
+    interface PnPageNavDropdownItemAttributes {
+        "value": string;
+        "href": string;
+        "active": boolean;
+    }
+    interface PnPageNavItemAttributes {
+        "value": string;
+        "href": string;
+        "icon": string;
+    }
+    interface PnPaginationAttributes {
+        "label": string;
+        "urlTemplate": string;
+        "paginationId": string;
+        "language": PnLanguages;
+        "page": number;
+        "pages": number;
+        "pagesVisible": number;
+        "rows": number;
+        "rowsList": string;
+        "rowsLabel": string;
+    }
+    interface PnProgressBarAttributes {
+        "label": string;
+        "progress": number;
+        "progressText": string;
+        "successText": string;
+        "error": string;
+        "progressId": string;
+    }
+    interface PnProgressIndicatorAttributes {
+        "activeStep": number;
+    }
+    interface PnProgressIndicatorStepAttributes {
+        "activeStep": number;
+        "index": number;
+        "name": string;
+        "checked": boolean;
+        "active": 'yes' | 'no';
+    }
+    interface PnProgressStepperAttributes {
+        "label": string;
+        "progressStepperId": string;
+        "language": PnLanguages;
+        "totalSteps": number;
+        "currentStep": number;
+        "stepName": string;
+        "dots": boolean;
+    }
+    interface PnRadioButtonAttributes {
+        "label": string;
+        "helpertext": string;
+        "value": string;
+        "name": string;
+        "checked": boolean;
+        "required": boolean;
+        "disabled": boolean;
+        "tile": boolean;
+        "expand": boolean;
+        "icon": string;
+        "invalid": boolean;
+        "pnId": string;
+        "pnAriaLabel": string;
+        "pnAriaLabelledby": string;
+        "radioid": string;
+    }
+    interface PnRangeAttributes {
+        "label": string;
+        "labelEnd": string;
+        "helpertext": string;
+        "value": number;
+        "valueEnd": number;
+        "name": string;
+        "nameEnd": string;
+        "min": number;
+        "max": number;
+        "step": HTMLInputElement['step'];
+        "disabled": boolean;
+        "input": boolean;
+        "tooltipTemplate": string;
+        "tooltipHide": boolean;
+        "textPrefix": string;
+        "textSuffix": string;
+        "icon": string;
+        "iconEnd": string;
+        "multiple": boolean;
+        "invalid": boolean;
+        "error": string;
+        "pnId": string;
+        "pnIdEnd": string;
+        "pnAriaLabel": string;
+        "pnAriaLabelEnd": string;
+        "pnAriaLabelledby": string;
+        "pnAriaLabelledbyEnd": string;
+    }
+    interface PnReadOnlyButtonAttributes {
+        "icon": string;
+        "leftIcon": boolean;
+        "iconOnly": boolean;
+        "small": boolean;
+        "language": PnLanguages;
+    }
+    interface PnSearchFieldAttributes {
+        "label": string;
+        "language": PnLanguages;
+        "value": string;
+        "name": string;
+        "placeholder": string;
+        "autocomplete": string;
+        "list": string;
+        "required": boolean;
+        "disabled": boolean;
+        "loading": boolean;
+        "button": PnSearchFieldButton;
+        "buttonLabel": string;
+        "buttonTooltip": string;
+        "buttonLight": boolean;
+        "pnId": string;
+        "pnAriaLabelledby": string;
+        "searchid": string;
+    }
+    interface PnSegmentAttributes {
+        "label": string;
+        "value": string;
+        "name": string;
+        "disabled": boolean;
+        "selected": boolean;
+        "icon": string;
+        "pnId": string;
+        "segmentid": string;
+    }
+    interface PnSegmentedControlAttributes {
+        "name": string;
+        "value": string;
+    }
+    interface PnSelectAttributes {
+        "label": string;
+        "helpertext": string;
+        "name": string;
+        "form": string;
+        "autocomplete": string;
+        "required": boolean;
+        "disabled": boolean;
+        "compact": boolean;
+        "icon": string;
+        "invalid": boolean;
+        "error": string;
+        "pnId": string;
+        "pnAriaLabel": string;
+        "pnAriaLabelledby": string;
+        "selectId": string;
+    }
+    interface PnSpinnerAttributes {
+        "light": boolean;
+        "size": number;
+    }
+    interface PnTabAttributes {
+        "label": string;
+        "value": string;
+        "href": string;
+        "icon": string;
+        "ariacontrols": string;
+        "tabid": string;
+        "activeTab": string;
+    }
+    interface PnTableAttributes {
+        "gray": boolean;
+        "bordered": boolean;
+        "striped": boolean;
+    }
+    interface PnTablistAttributes {
+        "label": string;
+        "value": string;
+        "small": boolean;
+        "stackedicons": boolean;
+        "language": PnLanguages;
+    }
+    interface PnTagAttributes {
+        "label": string;
+        "icon": string;
+        "appearance": '' | 'discrete' | 'positive' | 'warning' | 'error';
+        "dark": boolean;
+        "large": boolean;
+        "small": boolean;
+        "xsmall": boolean;
+    }
+    interface PnTextLinkAttributes {
+        "label": string;
+        "href": string;
+        "light": boolean;
+        "icon": string;
+        "leftIcon": boolean;
+        "download": string;
+        "hreflang": string;
+        "media": string;
+        "referrerpolicy": ReferrerPolicy;
+        "rel": string;
+        "target": string;
+        "linkid": string;
+    }
+    interface PnTextareaAttributes {
+        "label": string;
+        "helpertext": string;
+        "value": string;
+        "name": string;
+        "placeholder": string;
+        "form": string;
+        "rows": number;
+        "cols": number;
+        "wrap": string;
+        "maxlength": number;
+        "autocomplete": string;
+        "spellcheck": boolean;
+        "resize": boolean;
+        "required": boolean;
+        "disabled": boolean;
+        "readonly": boolean;
+        "compact": boolean;
+        "valid": boolean;
+        "invalid": boolean;
+        "error": string;
+        "pnId": string;
+        "pnAriaLabel": string;
+        "pnAriaLabelledby": string;
+        "textareaid": string;
+    }
+    interface PnTileAttributes {
+        "label": string;
+        "text": string;
+        "url": string;
+        "target": string;
+        "rel": string;
+        "illustration": string;
+        "icon": string;
+        "horizontal": boolean;
+    }
+    interface PnToastAttributes {
+        "heading": string;
+        "text": string;
+        "toastId": string;
+        "appearance": '' | 'success' | 'warning' | 'error';
+        "temporary": boolean;
+        "icon": string;
+        "illustration": string;
+        "hide": boolean;
+        "closable": boolean;
+        "language": PnLanguages;
+    }
+    interface PnToggleSwitchAttributes {
+        "label": string;
+        "helpertext": string;
+        "value": string;
+        "name": string;
+        "checked": boolean;
+        "required": boolean;
+        "disabled": boolean;
+        "small": boolean;
+        "large": boolean;
+        "loading": boolean;
+        "pnId": string;
+        "pnAriaLabel": string;
+        "pnAriaLabelledby": string;
+        "toggleid": string;
+    }
+    interface PnTooltipAttributes {
+        "warning": boolean;
+        "light": boolean;
+        "tooltip": string;
+    }
+    interface PnWizardAttributes {
+        "label": string;
+        "helpertext": string;
+        "language": PnLanguages;
+        "pnId": string;
+        "step": number;
+        "progress": '' | 'dots' | 'text';
+        "scrollBlock": 'start' | 'center' | 'end' | 'nearest';
+        "displayOverflow": boolean;
+        "hideBack": boolean;
+        "hideNext": boolean;
+        "hideFinish": boolean;
+        "labelBack": string;
+        "labelNext": string;
+        "labelFinish": string;
+    }
+    interface PnZipcodeSearchAttributes {
+        "language": PnZipCodeSearchLanguages;
+        "value": string;
+    }
+
     interface IntrinsicElements {
-        "pn-accordion": PnAccordion;
-        "pn-accordion-row": PnAccordionRow;
-        "pn-action-menu": PnActionMenu;
-        "pn-button": PnButton;
-        "pn-button-dropdown": PnButtonDropdown;
-        "pn-card": PnCard;
-        "pn-checkbox": PnCheckbox;
-        "pn-choice-chip": PnChoiceChip;
-        "pn-counter": PnCounter;
-        "pn-date-picker": PnDatePicker;
-        "pn-fieldset": PnFieldset;
-        "pn-file-upload": PnFileUpload;
-        "pn-footer": PnFooter;
-        "pn-header": PnHeader;
-        "pn-icon": PnIcon;
-        "pn-illustration": PnIllustration;
-        "pn-input": PnInput;
-        "pn-modal": PnModal;
-        "pn-multiselect": PnMultiselect;
-        "pn-ocr-search": PnOcrSearch;
-        "pn-page-nav": PnPageNav;
-        "pn-page-nav-dropdown-item": PnPageNavDropdownItem;
-        "pn-page-nav-item": PnPageNavItem;
-        "pn-pagination": PnPagination;
-        "pn-progress-bar": PnProgressBar;
-        "pn-progress-indicator": PnProgressIndicator;
-        "pn-progress-indicator-step": PnProgressIndicatorStep;
-        "pn-progress-stepper": PnProgressStepper;
-        "pn-radio-button": PnRadioButton;
-        "pn-range": PnRange;
-        "pn-read-only-button": PnReadOnlyButton;
-        "pn-search-field": PnSearchField;
-        "pn-segment": PnSegment;
-        "pn-segmented-control": PnSegmentedControl;
-        "pn-select": PnSelect;
-        "pn-spinner": PnSpinner;
-        "pn-tab": PnTab;
-        "pn-table": PnTable;
-        "pn-tablist": PnTablist;
-        "pn-tag": PnTag;
-        "pn-text-link": PnTextLink;
-        "pn-textarea": PnTextarea;
-        "pn-tile": PnTile;
-        "pn-toast": PnToast;
-        "pn-toggle-switch": PnToggleSwitch;
-        "pn-tooltip": PnTooltip;
-        "pn-wizard": PnWizard;
-        "pn-zipcode-search": PnZipcodeSearch;
+        "pn-accordion": Omit<PnAccordion, keyof PnAccordionAttributes> & { [K in keyof PnAccordion & keyof PnAccordionAttributes]?: PnAccordion[K] } & { [K in keyof PnAccordion & keyof PnAccordionAttributes as `attr:${K}`]?: PnAccordionAttributes[K] } & { [K in keyof PnAccordion & keyof PnAccordionAttributes as `prop:${K}`]?: PnAccordion[K] };
+        "pn-accordion-row": Omit<PnAccordionRow, keyof PnAccordionRowAttributes> & { [K in keyof PnAccordionRow & keyof PnAccordionRowAttributes]?: PnAccordionRow[K] } & { [K in keyof PnAccordionRow & keyof PnAccordionRowAttributes as `attr:${K}`]?: PnAccordionRowAttributes[K] } & { [K in keyof PnAccordionRow & keyof PnAccordionRowAttributes as `prop:${K}`]?: PnAccordionRow[K] };
+        "pn-action-menu": Omit<PnActionMenu, keyof PnActionMenuAttributes> & { [K in keyof PnActionMenu & keyof PnActionMenuAttributes]?: PnActionMenu[K] } & { [K in keyof PnActionMenu & keyof PnActionMenuAttributes as `attr:${K}`]?: PnActionMenuAttributes[K] } & { [K in keyof PnActionMenu & keyof PnActionMenuAttributes as `prop:${K}`]?: PnActionMenu[K] };
+        "pn-button": Omit<PnButton, keyof PnButtonAttributes> & { [K in keyof PnButton & keyof PnButtonAttributes]?: PnButton[K] } & { [K in keyof PnButton & keyof PnButtonAttributes as `attr:${K}`]?: PnButtonAttributes[K] } & { [K in keyof PnButton & keyof PnButtonAttributes as `prop:${K}`]?: PnButton[K] };
+        "pn-button-dropdown": Omit<PnButtonDropdown, keyof PnButtonDropdownAttributes> & { [K in keyof PnButtonDropdown & keyof PnButtonDropdownAttributes]?: PnButtonDropdown[K] } & { [K in keyof PnButtonDropdown & keyof PnButtonDropdownAttributes as `attr:${K}`]?: PnButtonDropdownAttributes[K] } & { [K in keyof PnButtonDropdown & keyof PnButtonDropdownAttributes as `prop:${K}`]?: PnButtonDropdown[K] } & OneOf<"label", PnButtonDropdown["label"], PnButtonDropdownAttributes["label"]>;
+        "pn-card": Omit<PnCard, keyof PnCardAttributes> & { [K in keyof PnCard & keyof PnCardAttributes]?: PnCard[K] } & { [K in keyof PnCard & keyof PnCardAttributes as `attr:${K}`]?: PnCardAttributes[K] } & { [K in keyof PnCard & keyof PnCardAttributes as `prop:${K}`]?: PnCard[K] };
+        "pn-checkbox": Omit<PnCheckbox, keyof PnCheckboxAttributes> & { [K in keyof PnCheckbox & keyof PnCheckboxAttributes]?: PnCheckbox[K] } & { [K in keyof PnCheckbox & keyof PnCheckboxAttributes as `attr:${K}`]?: PnCheckboxAttributes[K] } & { [K in keyof PnCheckbox & keyof PnCheckboxAttributes as `prop:${K}`]?: PnCheckbox[K] } & OneOf<"value", PnCheckbox["value"], PnCheckboxAttributes["value"]>;
+        "pn-choice-chip": Omit<PnChoiceChip, keyof PnChoiceChipAttributes> & { [K in keyof PnChoiceChip & keyof PnChoiceChipAttributes]?: PnChoiceChip[K] } & { [K in keyof PnChoiceChip & keyof PnChoiceChipAttributes as `attr:${K}`]?: PnChoiceChipAttributes[K] } & { [K in keyof PnChoiceChip & keyof PnChoiceChipAttributes as `prop:${K}`]?: PnChoiceChip[K] } & OneOf<"label", PnChoiceChip["label"], PnChoiceChipAttributes["label"]> & OneOf<"value", PnChoiceChip["value"], PnChoiceChipAttributes["value"]>;
+        "pn-counter": Omit<PnCounter, keyof PnCounterAttributes> & { [K in keyof PnCounter & keyof PnCounterAttributes]?: PnCounter[K] } & { [K in keyof PnCounter & keyof PnCounterAttributes as `attr:${K}`]?: PnCounterAttributes[K] } & { [K in keyof PnCounter & keyof PnCounterAttributes as `prop:${K}`]?: PnCounter[K] };
+        "pn-date-picker": Omit<PnDatePicker, keyof PnDatePickerAttributes> & { [K in keyof PnDatePicker & keyof PnDatePickerAttributes]?: PnDatePicker[K] } & { [K in keyof PnDatePicker & keyof PnDatePickerAttributes as `attr:${K}`]?: PnDatePickerAttributes[K] } & { [K in keyof PnDatePicker & keyof PnDatePickerAttributes as `prop:${K}`]?: PnDatePicker[K] };
+        "pn-fieldset": Omit<PnFieldset, keyof PnFieldsetAttributes> & { [K in keyof PnFieldset & keyof PnFieldsetAttributes]?: PnFieldset[K] } & { [K in keyof PnFieldset & keyof PnFieldsetAttributes as `attr:${K}`]?: PnFieldsetAttributes[K] } & { [K in keyof PnFieldset & keyof PnFieldsetAttributes as `prop:${K}`]?: PnFieldset[K] } & OneOf<"legend", PnFieldset["legend"], PnFieldsetAttributes["legend"]>;
+        "pn-file-upload": Omit<PnFileUpload, keyof PnFileUploadAttributes> & { [K in keyof PnFileUpload & keyof PnFileUploadAttributes]?: PnFileUpload[K] } & { [K in keyof PnFileUpload & keyof PnFileUploadAttributes as `attr:${K}`]?: PnFileUploadAttributes[K] } & { [K in keyof PnFileUpload & keyof PnFileUploadAttributes as `prop:${K}`]?: PnFileUpload[K] };
+        "pn-footer": Omit<PnFooter, keyof PnFooterAttributes> & { [K in keyof PnFooter & keyof PnFooterAttributes]?: PnFooter[K] } & { [K in keyof PnFooter & keyof PnFooterAttributes as `attr:${K}`]?: PnFooterAttributes[K] } & { [K in keyof PnFooter & keyof PnFooterAttributes as `prop:${K}`]?: PnFooter[K] };
+        "pn-header": Omit<PnHeader, keyof PnHeaderAttributes> & { [K in keyof PnHeader & keyof PnHeaderAttributes]?: PnHeader[K] } & { [K in keyof PnHeader & keyof PnHeaderAttributes as `attr:${K}`]?: PnHeaderAttributes[K] } & { [K in keyof PnHeader & keyof PnHeaderAttributes as `prop:${K}`]?: PnHeader[K] };
+        "pn-icon": Omit<PnIcon, keyof PnIconAttributes> & { [K in keyof PnIcon & keyof PnIconAttributes]?: PnIcon[K] } & { [K in keyof PnIcon & keyof PnIconAttributes as `attr:${K}`]?: PnIconAttributes[K] } & { [K in keyof PnIcon & keyof PnIconAttributes as `prop:${K}`]?: PnIcon[K] };
+        "pn-illustration": Omit<PnIllustration, keyof PnIllustrationAttributes> & { [K in keyof PnIllustration & keyof PnIllustrationAttributes]?: PnIllustration[K] } & { [K in keyof PnIllustration & keyof PnIllustrationAttributes as `attr:${K}`]?: PnIllustrationAttributes[K] } & { [K in keyof PnIllustration & keyof PnIllustrationAttributes as `prop:${K}`]?: PnIllustration[K] } & OneOf<"illustration", PnIllustration["illustration"], PnIllustrationAttributes["illustration"]>;
+        "pn-input": Omit<PnInput, keyof PnInputAttributes> & { [K in keyof PnInput & keyof PnInputAttributes]?: PnInput[K] } & { [K in keyof PnInput & keyof PnInputAttributes as `attr:${K}`]?: PnInputAttributes[K] } & { [K in keyof PnInput & keyof PnInputAttributes as `prop:${K}`]?: PnInput[K] };
+        "pn-modal": Omit<PnModal, keyof PnModalAttributes> & { [K in keyof PnModal & keyof PnModalAttributes]?: PnModal[K] } & { [K in keyof PnModal & keyof PnModalAttributes as `attr:${K}`]?: PnModalAttributes[K] } & { [K in keyof PnModal & keyof PnModalAttributes as `prop:${K}`]?: PnModal[K] };
+        "pn-multiselect": Omit<PnMultiselect, keyof PnMultiselectAttributes> & { [K in keyof PnMultiselect & keyof PnMultiselectAttributes]?: PnMultiselect[K] } & { [K in keyof PnMultiselect & keyof PnMultiselectAttributes as `attr:${K}`]?: PnMultiselectAttributes[K] } & { [K in keyof PnMultiselect & keyof PnMultiselectAttributes as `prop:${K}`]?: PnMultiselect[K] };
+        "pn-ocr-search": Omit<PnOcrSearch, keyof PnOcrSearchAttributes> & { [K in keyof PnOcrSearch & keyof PnOcrSearchAttributes]?: PnOcrSearch[K] } & { [K in keyof PnOcrSearch & keyof PnOcrSearchAttributes as `attr:${K}`]?: PnOcrSearchAttributes[K] } & { [K in keyof PnOcrSearch & keyof PnOcrSearchAttributes as `prop:${K}`]?: PnOcrSearch[K] };
+        "pn-page-nav": Omit<PnPageNav, keyof PnPageNavAttributes> & { [K in keyof PnPageNav & keyof PnPageNavAttributes]?: PnPageNav[K] } & { [K in keyof PnPageNav & keyof PnPageNavAttributes as `attr:${K}`]?: PnPageNavAttributes[K] } & { [K in keyof PnPageNav & keyof PnPageNavAttributes as `prop:${K}`]?: PnPageNav[K] };
+        "pn-page-nav-dropdown-item": Omit<PnPageNavDropdownItem, keyof PnPageNavDropdownItemAttributes> & { [K in keyof PnPageNavDropdownItem & keyof PnPageNavDropdownItemAttributes]?: PnPageNavDropdownItem[K] } & { [K in keyof PnPageNavDropdownItem & keyof PnPageNavDropdownItemAttributes as `attr:${K}`]?: PnPageNavDropdownItemAttributes[K] } & { [K in keyof PnPageNavDropdownItem & keyof PnPageNavDropdownItemAttributes as `prop:${K}`]?: PnPageNavDropdownItem[K] } & OneOf<"value", PnPageNavDropdownItem["value"], PnPageNavDropdownItemAttributes["value"]>;
+        "pn-page-nav-item": Omit<PnPageNavItem, keyof PnPageNavItemAttributes> & { [K in keyof PnPageNavItem & keyof PnPageNavItemAttributes]?: PnPageNavItem[K] } & { [K in keyof PnPageNavItem & keyof PnPageNavItemAttributes as `attr:${K}`]?: PnPageNavItemAttributes[K] } & { [K in keyof PnPageNavItem & keyof PnPageNavItemAttributes as `prop:${K}`]?: PnPageNavItem[K] } & OneOf<"value", PnPageNavItem["value"], PnPageNavItemAttributes["value"]>;
+        "pn-pagination": Omit<PnPagination, keyof PnPaginationAttributes> & { [K in keyof PnPagination & keyof PnPaginationAttributes]?: PnPagination[K] } & { [K in keyof PnPagination & keyof PnPaginationAttributes as `attr:${K}`]?: PnPaginationAttributes[K] } & { [K in keyof PnPagination & keyof PnPaginationAttributes as `prop:${K}`]?: PnPagination[K] } & OneOf<"pages", PnPagination["pages"], PnPaginationAttributes["pages"]>;
+        "pn-progress-bar": Omit<PnProgressBar, keyof PnProgressBarAttributes> & { [K in keyof PnProgressBar & keyof PnProgressBarAttributes]?: PnProgressBar[K] } & { [K in keyof PnProgressBar & keyof PnProgressBarAttributes as `attr:${K}`]?: PnProgressBarAttributes[K] } & { [K in keyof PnProgressBar & keyof PnProgressBarAttributes as `prop:${K}`]?: PnProgressBar[K] };
+        "pn-progress-indicator": Omit<PnProgressIndicator, keyof PnProgressIndicatorAttributes> & { [K in keyof PnProgressIndicator & keyof PnProgressIndicatorAttributes]?: PnProgressIndicator[K] } & { [K in keyof PnProgressIndicator & keyof PnProgressIndicatorAttributes as `attr:${K}`]?: PnProgressIndicatorAttributes[K] } & { [K in keyof PnProgressIndicator & keyof PnProgressIndicatorAttributes as `prop:${K}`]?: PnProgressIndicator[K] };
+        "pn-progress-indicator-step": Omit<PnProgressIndicatorStep, keyof PnProgressIndicatorStepAttributes> & { [K in keyof PnProgressIndicatorStep & keyof PnProgressIndicatorStepAttributes]?: PnProgressIndicatorStep[K] } & { [K in keyof PnProgressIndicatorStep & keyof PnProgressIndicatorStepAttributes as `attr:${K}`]?: PnProgressIndicatorStepAttributes[K] } & { [K in keyof PnProgressIndicatorStep & keyof PnProgressIndicatorStepAttributes as `prop:${K}`]?: PnProgressIndicatorStep[K] };
+        "pn-progress-stepper": Omit<PnProgressStepper, keyof PnProgressStepperAttributes> & { [K in keyof PnProgressStepper & keyof PnProgressStepperAttributes]?: PnProgressStepper[K] } & { [K in keyof PnProgressStepper & keyof PnProgressStepperAttributes as `attr:${K}`]?: PnProgressStepperAttributes[K] } & { [K in keyof PnProgressStepper & keyof PnProgressStepperAttributes as `prop:${K}`]?: PnProgressStepper[K] };
+        "pn-radio-button": Omit<PnRadioButton, keyof PnRadioButtonAttributes> & { [K in keyof PnRadioButton & keyof PnRadioButtonAttributes]?: PnRadioButton[K] } & { [K in keyof PnRadioButton & keyof PnRadioButtonAttributes as `attr:${K}`]?: PnRadioButtonAttributes[K] } & { [K in keyof PnRadioButton & keyof PnRadioButtonAttributes as `prop:${K}`]?: PnRadioButton[K] } & OneOf<"value", PnRadioButton["value"], PnRadioButtonAttributes["value"]>;
+        "pn-range": Omit<PnRange, keyof PnRangeAttributes> & { [K in keyof PnRange & keyof PnRangeAttributes]?: PnRange[K] } & { [K in keyof PnRange & keyof PnRangeAttributes as `attr:${K}`]?: PnRangeAttributes[K] } & { [K in keyof PnRange & keyof PnRangeAttributes as `prop:${K}`]?: PnRange[K] };
+        "pn-read-only-button": Omit<PnReadOnlyButton, keyof PnReadOnlyButtonAttributes> & { [K in keyof PnReadOnlyButton & keyof PnReadOnlyButtonAttributes]?: PnReadOnlyButton[K] } & { [K in keyof PnReadOnlyButton & keyof PnReadOnlyButtonAttributes as `attr:${K}`]?: PnReadOnlyButtonAttributes[K] } & { [K in keyof PnReadOnlyButton & keyof PnReadOnlyButtonAttributes as `prop:${K}`]?: PnReadOnlyButton[K] };
+        "pn-search-field": Omit<PnSearchField, keyof PnSearchFieldAttributes> & { [K in keyof PnSearchField & keyof PnSearchFieldAttributes]?: PnSearchField[K] } & { [K in keyof PnSearchField & keyof PnSearchFieldAttributes as `attr:${K}`]?: PnSearchFieldAttributes[K] } & { [K in keyof PnSearchField & keyof PnSearchFieldAttributes as `prop:${K}`]?: PnSearchField[K] };
+        "pn-segment": Omit<PnSegment, keyof PnSegmentAttributes> & { [K in keyof PnSegment & keyof PnSegmentAttributes]?: PnSegment[K] } & { [K in keyof PnSegment & keyof PnSegmentAttributes as `attr:${K}`]?: PnSegmentAttributes[K] } & { [K in keyof PnSegment & keyof PnSegmentAttributes as `prop:${K}`]?: PnSegment[K] } & OneOf<"value", PnSegment["value"], PnSegmentAttributes["value"]> & OneOf<"name", PnSegment["name"], PnSegmentAttributes["name"]>;
+        "pn-segmented-control": Omit<PnSegmentedControl, keyof PnSegmentedControlAttributes> & { [K in keyof PnSegmentedControl & keyof PnSegmentedControlAttributes]?: PnSegmentedControl[K] } & { [K in keyof PnSegmentedControl & keyof PnSegmentedControlAttributes as `attr:${K}`]?: PnSegmentedControlAttributes[K] } & { [K in keyof PnSegmentedControl & keyof PnSegmentedControlAttributes as `prop:${K}`]?: PnSegmentedControl[K] };
+        "pn-select": Omit<PnSelect, keyof PnSelectAttributes> & { [K in keyof PnSelect & keyof PnSelectAttributes]?: PnSelect[K] } & { [K in keyof PnSelect & keyof PnSelectAttributes as `attr:${K}`]?: PnSelectAttributes[K] } & { [K in keyof PnSelect & keyof PnSelectAttributes as `prop:${K}`]?: PnSelect[K] };
+        "pn-spinner": Omit<PnSpinner, keyof PnSpinnerAttributes> & { [K in keyof PnSpinner & keyof PnSpinnerAttributes]?: PnSpinner[K] } & { [K in keyof PnSpinner & keyof PnSpinnerAttributes as `attr:${K}`]?: PnSpinnerAttributes[K] } & { [K in keyof PnSpinner & keyof PnSpinnerAttributes as `prop:${K}`]?: PnSpinner[K] };
+        "pn-tab": Omit<PnTab, keyof PnTabAttributes> & { [K in keyof PnTab & keyof PnTabAttributes]?: PnTab[K] } & { [K in keyof PnTab & keyof PnTabAttributes as `attr:${K}`]?: PnTabAttributes[K] } & { [K in keyof PnTab & keyof PnTabAttributes as `prop:${K}`]?: PnTab[K] } & OneOf<"label", PnTab["label"], PnTabAttributes["label"]> & OneOf<"value", PnTab["value"], PnTabAttributes["value"]>;
+        "pn-table": Omit<PnTable, keyof PnTableAttributes> & { [K in keyof PnTable & keyof PnTableAttributes]?: PnTable[K] } & { [K in keyof PnTable & keyof PnTableAttributes as `attr:${K}`]?: PnTableAttributes[K] } & { [K in keyof PnTable & keyof PnTableAttributes as `prop:${K}`]?: PnTable[K] };
+        "pn-tablist": Omit<PnTablist, keyof PnTablistAttributes> & { [K in keyof PnTablist & keyof PnTablistAttributes]?: PnTablist[K] } & { [K in keyof PnTablist & keyof PnTablistAttributes as `attr:${K}`]?: PnTablistAttributes[K] } & { [K in keyof PnTablist & keyof PnTablistAttributes as `prop:${K}`]?: PnTablist[K] } & OneOf<"label", PnTablist["label"], PnTablistAttributes["label"]> & OneOf<"value", PnTablist["value"], PnTablistAttributes["value"]>;
+        "pn-tag": Omit<PnTag, keyof PnTagAttributes> & { [K in keyof PnTag & keyof PnTagAttributes]?: PnTag[K] } & { [K in keyof PnTag & keyof PnTagAttributes as `attr:${K}`]?: PnTagAttributes[K] } & { [K in keyof PnTag & keyof PnTagAttributes as `prop:${K}`]?: PnTag[K] } & OneOf<"label", PnTag["label"], PnTagAttributes["label"]>;
+        "pn-text-link": Omit<PnTextLink, keyof PnTextLinkAttributes> & { [K in keyof PnTextLink & keyof PnTextLinkAttributes]?: PnTextLink[K] } & { [K in keyof PnTextLink & keyof PnTextLinkAttributes as `attr:${K}`]?: PnTextLinkAttributes[K] } & { [K in keyof PnTextLink & keyof PnTextLinkAttributes as `prop:${K}`]?: PnTextLink[K] } & OneOf<"href", PnTextLink["href"], PnTextLinkAttributes["href"]>;
+        "pn-textarea": Omit<PnTextarea, keyof PnTextareaAttributes> & { [K in keyof PnTextarea & keyof PnTextareaAttributes]?: PnTextarea[K] } & { [K in keyof PnTextarea & keyof PnTextareaAttributes as `attr:${K}`]?: PnTextareaAttributes[K] } & { [K in keyof PnTextarea & keyof PnTextareaAttributes as `prop:${K}`]?: PnTextarea[K] };
+        "pn-tile": Omit<PnTile, keyof PnTileAttributes> & { [K in keyof PnTile & keyof PnTileAttributes]?: PnTile[K] } & { [K in keyof PnTile & keyof PnTileAttributes as `attr:${K}`]?: PnTileAttributes[K] } & { [K in keyof PnTile & keyof PnTileAttributes as `prop:${K}`]?: PnTile[K] } & OneOf<"label", PnTile["label"], PnTileAttributes["label"]> & OneOf<"url", PnTile["url"], PnTileAttributes["url"]>;
+        "pn-toast": Omit<PnToast, keyof PnToastAttributes> & { [K in keyof PnToast & keyof PnToastAttributes]?: PnToast[K] } & { [K in keyof PnToast & keyof PnToastAttributes as `attr:${K}`]?: PnToastAttributes[K] } & { [K in keyof PnToast & keyof PnToastAttributes as `prop:${K}`]?: PnToast[K] };
+        "pn-toggle-switch": Omit<PnToggleSwitch, keyof PnToggleSwitchAttributes> & { [K in keyof PnToggleSwitch & keyof PnToggleSwitchAttributes]?: PnToggleSwitch[K] } & { [K in keyof PnToggleSwitch & keyof PnToggleSwitchAttributes as `attr:${K}`]?: PnToggleSwitchAttributes[K] } & { [K in keyof PnToggleSwitch & keyof PnToggleSwitchAttributes as `prop:${K}`]?: PnToggleSwitch[K] };
+        "pn-tooltip": Omit<PnTooltip, keyof PnTooltipAttributes> & { [K in keyof PnTooltip & keyof PnTooltipAttributes]?: PnTooltip[K] } & { [K in keyof PnTooltip & keyof PnTooltipAttributes as `attr:${K}`]?: PnTooltipAttributes[K] } & { [K in keyof PnTooltip & keyof PnTooltipAttributes as `prop:${K}`]?: PnTooltip[K] };
+        "pn-wizard": Omit<PnWizard, keyof PnWizardAttributes> & { [K in keyof PnWizard & keyof PnWizardAttributes]?: PnWizard[K] } & { [K in keyof PnWizard & keyof PnWizardAttributes as `attr:${K}`]?: PnWizardAttributes[K] } & { [K in keyof PnWizard & keyof PnWizardAttributes as `prop:${K}`]?: PnWizard[K] };
+        "pn-zipcode-search": Omit<PnZipcodeSearch, keyof PnZipcodeSearchAttributes> & { [K in keyof PnZipcodeSearch & keyof PnZipcodeSearchAttributes]?: PnZipcodeSearch[K] } & { [K in keyof PnZipcodeSearch & keyof PnZipcodeSearchAttributes as `attr:${K}`]?: PnZipcodeSearchAttributes[K] } & { [K in keyof PnZipcodeSearch & keyof PnZipcodeSearchAttributes as `prop:${K}`]?: PnZipcodeSearch[K] };
     }
 }
 export { LocalJSX as JSX };
@@ -6785,13 +8119,13 @@ declare module "@stencil/core" {
              * This component gives the accordion rows some space between each one and provides the `single` feature.
              * Which will force the rule that only a single row to be open at one time.
              */
-            "pn-accordion": LocalJSX.PnAccordion & JSXBase.HTMLAttributes<HTMLPnAccordionElement>;
+            "pn-accordion": LocalJSX.IntrinsicElements["pn-accordion"] & JSXBase.HTMLAttributes<HTMLPnAccordionElement>;
             /**
              * Use this row component inside a `pn-accordion` to create an accordion group.
              * **Note**: you can use the `pn-accordion-row` without the parent accordion.
              * But you will have to style the gap between each row.
              */
-            "pn-accordion-row": LocalJSX.PnAccordionRow & JSXBase.HTMLAttributes<HTMLPnAccordionRowElement>;
+            "pn-accordion-row": LocalJSX.IntrinsicElements["pn-accordion-row"] & JSXBase.HTMLAttributes<HTMLPnAccordionRowElement>;
             /**
              * Create a list of actions in an accessible way.
              * Option types include:
@@ -6804,17 +8138,17 @@ declare module "@stencil/core" {
              * @since v7.13.0
              * @see {@link PnActionMenuItem }
              */
-            "pn-action-menu": LocalJSX.PnActionMenu & JSXBase.HTMLAttributes<HTMLPnActionMenuElement>;
+            "pn-action-menu": LocalJSX.IntrinsicElements["pn-action-menu"] & JSXBase.HTMLAttributes<HTMLPnActionMenuElement>;
             /**
              * The `pn-button` is built with a native `button` or `a` element, if you use the `href` attribute.
              * @nativeClick Use the `click` event to listen when the button is clicked.
              */
-            "pn-button": LocalJSX.PnButton & JSXBase.HTMLAttributes<HTMLPnButtonElement>;
+            "pn-button": LocalJSX.IntrinsicElements["pn-button"] & JSXBase.HTMLAttributes<HTMLPnButtonElement>;
             /**
              * The open/closing of the dropdown is handled by the component itself.
              * @nativeClick Use the `click` event to listen when the button is clicked.
              */
-            "pn-button-dropdown": LocalJSX.PnButtonDropdown & JSXBase.HTMLAttributes<HTMLPnButtonDropdownElement>;
+            "pn-button-dropdown": LocalJSX.IntrinsicElements["pn-button-dropdown"] & JSXBase.HTMLAttributes<HTMLPnButtonDropdownElement>;
             /**
              * The card component is more than just a navigational element.
              * It is a flexible component that can be used as a product item, a clickable link card, etc...
@@ -6822,25 +8156,25 @@ declare module "@stencil/core" {
              * If you need content to be interactable inside the card, do not use the `href` prop.
              * @since v7.12.0
              */
-            "pn-card": LocalJSX.PnCard & JSXBase.HTMLAttributes<HTMLPnCardElement>;
+            "pn-card": LocalJSX.IntrinsicElements["pn-card"] & JSXBase.HTMLAttributes<HTMLPnCardElement>;
             /**
              * The `pn-checkbox` is built with a native `input[type="checkbox"]` in the background.
              * This means you can use native events to listen to the changes.
              * @nativeChange Use the `change` event to listen when the checkbox state is being toggled.
              */
-            "pn-checkbox": LocalJSX.PnCheckbox & JSXBase.HTMLAttributes<HTMLPnCheckboxElement>;
+            "pn-checkbox": LocalJSX.IntrinsicElements["pn-checkbox"] & JSXBase.HTMLAttributes<HTMLPnCheckboxElement>;
             /**
              * The `pn-choice-chip` is built with a native `input[type="checkbox|radio"]` in the background.
              * This means you can use native events to listen to the changes.
              * @nativeChange Use the `change` event to listen when the choice chip state is being toggled. Works for both checkbox/radio variant.
              */
-            "pn-choice-chip": LocalJSX.PnChoiceChip & JSXBase.HTMLAttributes<HTMLPnChoiceChipElement>;
+            "pn-choice-chip": LocalJSX.IntrinsicElements["pn-choice-chip"] & JSXBase.HTMLAttributes<HTMLPnChoiceChipElement>;
             /**
              * The `pn-counter` is an input with a button on each side that can be used to increase and decrease the input value.
              * @nativeInput Use the `input` event to listen to content being modified by the user. It is emitted everytime a user writes or removes content in the input.
              * @nativeChange The `change` event is emitted when the input loses focus, the user clicks `Enter` or makes a selection (such as auto complete or suggestions).
              */
-            "pn-counter": LocalJSX.PnCounter & JSXBase.HTMLAttributes<HTMLPnCounterElement>;
+            "pn-counter": LocalJSX.IntrinsicElements["pn-counter"] & JSXBase.HTMLAttributes<HTMLPnCounterElement>;
             /**
              * The date picker allows a single or a range of dates to be selected.
              * Based on the `format` prop, separators will automatically be added if you type the date.
@@ -6848,12 +8182,12 @@ declare module "@stencil/core" {
              * @nativeInput Use the `input` event to listen to content being modified by the user. It is emitted everytime a user writes or removes content in the input.
              * @nativeChange The `change` event is emitted when the input loses focus, the user clicks `Enter` or makes a selection (such as auto complete or suggestions).
              */
-            "pn-date-picker": LocalJSX.PnDatePicker & JSXBase.HTMLAttributes<HTMLPnDatePickerElement>;
+            "pn-date-picker": LocalJSX.IntrinsicElements["pn-date-picker"] & JSXBase.HTMLAttributes<HTMLPnDatePickerElement>;
             /**
              * The fielset is a wrapper to give context and information about inputs. Most commonly, a set of radio/checkboxes.
              * However, you may include any type of input such as textareas, toggles and selects.
              */
-            "pn-fieldset": LocalJSX.PnFieldset & JSXBase.HTMLAttributes<HTMLPnFieldsetElement>;
+            "pn-fieldset": LocalJSX.IntrinsicElements["pn-fieldset"] & JSXBase.HTMLAttributes<HTMLPnFieldsetElement>;
             /**
              * Users can drop files directly into the upload area of the component
              * or simply click on it to open their native file explorer.
@@ -6861,7 +8195,7 @@ declare module "@stencil/core" {
              * @nativeCancel The `cancel` event lets you know the user canceled their selection.
              * Either via clicking on the "Cancel" button or pressing `ESC`.
              */
-            "pn-file-upload": LocalJSX.PnFileUpload & JSXBase.HTMLAttributes<HTMLPnFileUploadElement>;
+            "pn-file-upload": LocalJSX.IntrinsicElements["pn-file-upload"] & JSXBase.HTMLAttributes<HTMLPnFileUploadElement>;
             /**
              * The default market and language is SE/en.
              * Make sure you set the market **and** language prop.
@@ -6869,32 +8203,38 @@ declare module "@stencil/core" {
              * @deprecated This component has been replaced with the pn-footer-nav.
              * @see {@link https://portal.postnord.com/web-components/?path=/docs/external-components-pn-footer-nav--docs pn-footer-nav}
              */
-            "pn-footer": LocalJSX.PnFooter & JSXBase.HTMLAttributes<HTMLPnFooterElement>;
+            "pn-footer": LocalJSX.IntrinsicElements["pn-footer"] & JSXBase.HTMLAttributes<HTMLPnFooterElement>;
             /**
              * The header component is a simple layout component used to display a page heading with optional text, buttons and tablist menu.
              */
-            "pn-header": LocalJSX.PnHeader & JSXBase.HTMLAttributes<HTMLPnHeaderElement>;
+            "pn-header": LocalJSX.IntrinsicElements["pn-header"] & JSXBase.HTMLAttributes<HTMLPnHeaderElement>;
             /**
              * The `pn-icon` is a wrapper for an SVG string.
              * While its built with PostNords specific icon dimensions in mind (24x24px), you can use any SVG content in this component.
              * As long as its 3x3 in size, there should be no problem.
              * The color feature will not overwrite the color of flags.
              */
-            "pn-icon": LocalJSX.PnIcon & JSXBase.HTMLAttributes<HTMLPnIconElement>;
-            "pn-illustration": LocalJSX.PnIllustration & JSXBase.HTMLAttributes<HTMLPnIllustrationElement>;
+            "pn-icon": LocalJSX.IntrinsicElements["pn-icon"] & JSXBase.HTMLAttributes<HTMLPnIconElement>;
+            /**
+             * The `pn-illustration` is a wrapper for an SVG string.
+             * The component will look at the viewBox property of the SVG to determine the default width and height,
+             * but you can also set these manually with the `width` and `height` props.
+             * Setting the `fill` prop will make the illustration fill its parent container, which is useful for responsive designs.
+             */
+            "pn-illustration": LocalJSX.IntrinsicElements["pn-illustration"] & JSXBase.HTMLAttributes<HTMLPnIllustrationElement>;
             /**
              * The `pn-input` is a regular `input` but styled. This means you can use native events to listen to the changes.
              * Always use the `label` prop to make sure the input is accessible.
              * @nativeInput Use the `input` event to listen to content being modified by the user. It is emitted everytime a user writes or removes content in the input.
              * @nativeChange The `change` event is emitted when the input loses focus, the user clicks `Enter` or makes a selection (such as auto complete or suggestions).
              */
-            "pn-input": LocalJSX.PnInput & JSXBase.HTMLAttributes<HTMLPnInputElement>;
+            "pn-input": LocalJSX.IntrinsicElements["pn-input"] & JSXBase.HTMLAttributes<HTMLPnInputElement>;
             /**
              * Present content in a modal that overlays everything on the current page.
              * Use the prop `open` to toggle the visiblity.
              * Use the event `modalToggle` to determine when the modal is being closed/opened by the user.
              */
-            "pn-modal": LocalJSX.PnModal & JSXBase.HTMLAttributes<HTMLPnModalElement>;
+            "pn-modal": LocalJSX.IntrinsicElements["pn-modal"] & JSXBase.HTMLAttributes<HTMLPnModalElement>;
             /**
              * The `pn-multiselect` gets its options via javascript.
              * Native HTML does not accept arrays of objects. Most frameworks solves this automatically (Vue, react, etc...),
@@ -6902,51 +8242,51 @@ declare module "@stencil/core" {
              * @nativeChange The `pn-multiselect` is built with `input[type=checkbox]` elements, so the `change` event works. However, we recommend the customEvents described above.
              * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-input-multiselect--docs#pn-multiselect%20(options) Options documentation}
              */
-            "pn-multiselect": LocalJSX.PnMultiselect & JSXBase.HTMLAttributes<HTMLPnMultiselectElement>;
-            "pn-ocr-search": LocalJSX.PnOcrSearch & JSXBase.HTMLAttributes<HTMLPnOcrSearchElement>;
+            "pn-multiselect": LocalJSX.IntrinsicElements["pn-multiselect"] & JSXBase.HTMLAttributes<HTMLPnMultiselectElement>;
+            "pn-ocr-search": LocalJSX.IntrinsicElements["pn-ocr-search"] & JSXBase.HTMLAttributes<HTMLPnOcrSearchElement>;
             /**
              * @deprecated This component will be removed in v8. Please use the `pn-tablist` instead.
              * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-navigation-tablist--docs Use `pn-tablist` instead.}
              */
-            "pn-page-nav": LocalJSX.PnPageNav & JSXBase.HTMLAttributes<HTMLPnPageNavElement>;
+            "pn-page-nav": LocalJSX.IntrinsicElements["pn-page-nav"] & JSXBase.HTMLAttributes<HTMLPnPageNavElement>;
             /**
              * @deprecated This component will be removed in v8. Please use the `pn-tablist` instead.
              * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-navigation-tablist--docs Use `pn-tablist` instead.}
              */
-            "pn-page-nav-dropdown-item": LocalJSX.PnPageNavDropdownItem & JSXBase.HTMLAttributes<HTMLPnPageNavDropdownItemElement>;
+            "pn-page-nav-dropdown-item": LocalJSX.IntrinsicElements["pn-page-nav-dropdown-item"] & JSXBase.HTMLAttributes<HTMLPnPageNavDropdownItemElement>;
             /**
              * @deprecated This component will be removed in v8. Please use the `pn-tablist` instead.
              * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-navigation-tablist--docs Use `pn-tablist` instead.}
              */
-            "pn-page-nav-item": LocalJSX.PnPageNavItem & JSXBase.HTMLAttributes<HTMLPnPageNavItemElement>;
+            "pn-page-nav-item": LocalJSX.IntrinsicElements["pn-page-nav-item"] & JSXBase.HTMLAttributes<HTMLPnPageNavItemElement>;
             /**
              * Accessible pagination needs each item to link to a different part of the document.
              * This means that you must `preventDefault` on the `MouseEvent` emitted from the `pageSelected` event if you have a SPA.
              * If you set a `page` value that is higher than `pages`, the component will automatically lower it to the `pages` value.
              * @since v7.9.0
              */
-            "pn-pagination": LocalJSX.PnPagination & JSXBase.HTMLAttributes<HTMLPnPaginationElement>;
-            "pn-progress-bar": LocalJSX.PnProgressBar & JSXBase.HTMLAttributes<HTMLPnProgressBarElement>;
+            "pn-pagination": LocalJSX.IntrinsicElements["pn-pagination"] & JSXBase.HTMLAttributes<HTMLPnPaginationElement>;
+            "pn-progress-bar": LocalJSX.IntrinsicElements["pn-progress-bar"] & JSXBase.HTMLAttributes<HTMLPnProgressBarElement>;
             /**
              * @deprecated This component will be removed in v8. Please use the `pn-progress-stepper` instead.
              * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-feedback-progress-stepper--docs Use `pn-progress-stepper` instead.}
              */
-            "pn-progress-indicator": LocalJSX.PnProgressIndicator & JSXBase.HTMLAttributes<HTMLPnProgressIndicatorElement>;
+            "pn-progress-indicator": LocalJSX.IntrinsicElements["pn-progress-indicator"] & JSXBase.HTMLAttributes<HTMLPnProgressIndicatorElement>;
             /**
              * @deprecated This component will be removed in v8. Please use the `pn-progress-stepper` instead.
              * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-feedback-progress-stepper--docs Use `pn-progress-stepper` instead.}
              */
-            "pn-progress-indicator-step": LocalJSX.PnProgressIndicatorStep & JSXBase.HTMLAttributes<HTMLPnProgressIndicatorStepElement>;
+            "pn-progress-indicator-step": LocalJSX.IntrinsicElements["pn-progress-indicator-step"] & JSXBase.HTMLAttributes<HTMLPnProgressIndicatorStepElement>;
             /**
              * The `pn-progress-stepper` is used to visualize the users progress through a flow (checkout/survey, etc...).
              */
-            "pn-progress-stepper": LocalJSX.PnProgressStepper & JSXBase.HTMLAttributes<HTMLPnProgressStepperElement>;
+            "pn-progress-stepper": LocalJSX.IntrinsicElements["pn-progress-stepper"] & JSXBase.HTMLAttributes<HTMLPnProgressStepperElement>;
             /**
              * The `pn-radio-button` is built with a native `input[type="radio"]` in the background.
              * This means you can use native events to listen to the changes.
              * @nativeChange Use the `change` event to listen when the radio state is being changed.
              */
-            "pn-radio-button": LocalJSX.PnRadioButton & JSXBase.HTMLAttributes<HTMLPnRadioButtonElement>;
+            "pn-radio-button": LocalJSX.IntrinsicElements["pn-radio-button"] & JSXBase.HTMLAttributes<HTMLPnRadioButtonElement>;
             /**
              * Allow the user to use the slider to set a number value. Its built on the native `input[type=range]` element and
              * has support for most attributes.
@@ -6954,41 +8294,41 @@ declare module "@stencil/core" {
              * @nativeChange The `change` event is emitted when the user makes a final selection (letting go of the range/input).
              * @since v7.20.0
              */
-            "pn-range": LocalJSX.PnRange & JSXBase.HTMLAttributes<HTMLPnRangeElement>;
+            "pn-range": LocalJSX.IntrinsicElements["pn-range"] & JSXBase.HTMLAttributes<HTMLPnRangeElement>;
             /**
              * There are no events or features other than the `icon`, `small` and `language` prop.
              * Our rule is to not have disabled buttons.
              * However, this component is an exception for a very specific use case regarding portal users.
              */
-            "pn-read-only-button": LocalJSX.PnReadOnlyButton & JSXBase.HTMLAttributes<HTMLPnReadOnlyButtonElement>;
+            "pn-read-only-button": LocalJSX.IntrinsicElements["pn-read-only-button"] & JSXBase.HTMLAttributes<HTMLPnReadOnlyButtonElement>;
             /**
              * The search field has multiple button variants that changes the visual appearance.
              * @nativeInput Use the `input` event to listen to content being modified by the user. It is emitted everytime a user writes or removes content in the input.
              * @nativeChange The `change` event is emitted when the input loses focus, the user clicks `Enter` or makes a selection (such as auto complete or suggestions).
              */
-            "pn-search-field": LocalJSX.PnSearchField & JSXBase.HTMLAttributes<HTMLPnSearchFieldElement>;
+            "pn-search-field": LocalJSX.IntrinsicElements["pn-search-field"] & JSXBase.HTMLAttributes<HTMLPnSearchFieldElement>;
             /**
              * The `pn-segment` is built with a native `input[type="radio"]` in the background.
              * Do not listen to events on the `pn-segment`, but on the `pn-segmented-control` instead.
              */
-            "pn-segment": LocalJSX.PnSegment & JSXBase.HTMLAttributes<HTMLPnSegmentElement>;
+            "pn-segment": LocalJSX.IntrinsicElements["pn-segment"] & JSXBase.HTMLAttributes<HTMLPnSegmentElement>;
             /**
              * The `pn-segmented-control` and `pn-segmented` is built with native `input[type="radio"]` in the background.
              * This means you can use native events to listen to the changes.
              * @nativeChange Use the `change` event to listen when the segment state is being changed.
              */
-            "pn-segmented-control": LocalJSX.PnSegmentedControl & JSXBase.HTMLAttributes<HTMLPnSegmentedControlElement>;
+            "pn-segmented-control": LocalJSX.IntrinsicElements["pn-segmented-control"] & JSXBase.HTMLAttributes<HTMLPnSegmentedControlElement>;
             /**
              * The `pn-select` uses a native `select` element under the hood.
              * Use the slot to include `option` elements.
              * Just like a regular `select`, you can use the `selected` prop on the nested option elements to preselect an option.
              * @nativeChange Use the `change` event to listen to changes on the select element.
              */
-            "pn-select": LocalJSX.PnSelect & JSXBase.HTMLAttributes<HTMLPnSelectElement>;
+            "pn-select": LocalJSX.IntrinsicElements["pn-select"] & JSXBase.HTMLAttributes<HTMLPnSelectElement>;
             /**
              * Display a spinner to indicate a loading state.
              */
-            "pn-spinner": LocalJSX.PnSpinner & JSXBase.HTMLAttributes<HTMLPnSpinnerElement>;
+            "pn-spinner": LocalJSX.IntrinsicElements["pn-spinner"] & JSXBase.HTMLAttributes<HTMLPnSpinnerElement>;
             /**
              * This tab should control a tab panel.
              * Use the `ariacontrols` and `tabid` props to connect the tab with the tab panel.
@@ -6996,60 +8336,60 @@ declare module "@stencil/core" {
              * If you use the `href` prop, the tab will turn into an anchor element instead of a button.
              * This does not required the ariacontrols and tabid props.
              */
-            "pn-tab": LocalJSX.PnTab & JSXBase.HTMLAttributes<HTMLPnTabElement>;
+            "pn-tab": LocalJSX.IntrinsicElements["pn-tab"] & JSXBase.HTMLAttributes<HTMLPnTabElement>;
             /**
              * The `pn-table` component is just a wrapper for your HTML table element.
              * You need to create the markup, but the component will deal with the styling.
              * We have a built in class for divs inside table colums called `column-wrapper`.
              * This will line up your content and provide a grid gap.
              */
-            "pn-table": LocalJSX.PnTable & JSXBase.HTMLAttributes<HTMLPnTableElement>;
+            "pn-table": LocalJSX.IntrinsicElements["pn-table"] & JSXBase.HTMLAttributes<HTMLPnTableElement>;
             /**
              * The tablist allows you to create a list with nested `pn-tab` components.
              * These should control the visibility of panel elements on the page.
              * If you use the slot name "menu" the tablist will adapt to be used inside of
              * a `pn-header` component. This also allows the pn-tabs to use the `href` prop.
              */
-            "pn-tablist": LocalJSX.PnTablist & JSXBase.HTMLAttributes<HTMLPnTablistElement>;
+            "pn-tablist": LocalJSX.IntrinsicElements["pn-tablist"] & JSXBase.HTMLAttributes<HTMLPnTablistElement>;
             /**
              * The `pn-tag` is a non-interactive visual marker designed to emphasize important aspects of an item, such as its status.
              */
-            "pn-tag": LocalJSX.PnTag & JSXBase.HTMLAttributes<HTMLPnTagElement>;
+            "pn-tag": LocalJSX.IntrinsicElements["pn-tag"] & JSXBase.HTMLAttributes<HTMLPnTagElement>;
             /**
              * The `pn-text-link` is a styled `a` element with some extra functionality built in. Such as `icon` and `light` support.
              */
-            "pn-text-link": LocalJSX.PnTextLink & JSXBase.HTMLAttributes<HTMLPnTextLinkElement>;
+            "pn-text-link": LocalJSX.IntrinsicElements["pn-text-link"] & JSXBase.HTMLAttributes<HTMLPnTextLinkElement>;
             /**
              * The `pn-textarea` is built with a native `textarea`.
              * This means you can use native events to listen to the input.
              * @nativeInput Use the `input` event to listen to content being modified by the user.
              */
-            "pn-textarea": LocalJSX.PnTextarea & JSXBase.HTMLAttributes<HTMLPnTextareaElement>;
+            "pn-textarea": LocalJSX.IntrinsicElements["pn-textarea"] & JSXBase.HTMLAttributes<HTMLPnTextareaElement>;
             /**
              * The `pn-tile` is a navigational element that is intended to be accompanied by an illustration.
              * It is very important that you use the `label` and `url`. This component renders an `a` element if the URL prop is set,
              * so you do not need to wrap or nest the tile in another `a` element. Doing so makes the component inaccessible.
              */
-            "pn-tile": LocalJSX.PnTile & JSXBase.HTMLAttributes<HTMLPnTileElement>;
+            "pn-tile": LocalJSX.IntrinsicElements["pn-tile"] & JSXBase.HTMLAttributes<HTMLPnTileElement>;
             /**
              * This component is able to fill many roles of a classic toast.
              * It has 4 different colors, a temporary state, hide button, icon and illustration support.
              * The `pn-toast` will expand to its parent containers full width.
              * Either limit the parent width or set a CSS rule to your specific width if needed.
              */
-            "pn-toast": LocalJSX.PnToast & JSXBase.HTMLAttributes<HTMLPnToastElement>;
+            "pn-toast": LocalJSX.IntrinsicElements["pn-toast"] & JSXBase.HTMLAttributes<HTMLPnToastElement>;
             /**
              * The `pn-toggle-switch` is built with a native `input[type="checkbox"]` in the background.
              * This means you can use native events to listen to the changes.
              * @nativeChange Use the `change` event to listen when the switch state is being toggled.
              */
-            "pn-toggle-switch": LocalJSX.PnToggleSwitch & JSXBase.HTMLAttributes<HTMLPnToggleSwitchElement>;
+            "pn-toggle-switch": LocalJSX.IntrinsicElements["pn-toggle-switch"] & JSXBase.HTMLAttributes<HTMLPnToggleSwitchElement>;
             /**
              * The `pn-tooltip` can display slotted HTML content or a text `string` with the `tooltip` prop.
              * Remember that the component is techincally a `button` element, don't put any HTML content that would be out of place in a regular button
              * (no headlines, other input elements, etc...).
              */
-            "pn-tooltip": LocalJSX.PnTooltip & JSXBase.HTMLAttributes<HTMLPnTooltipElement>;
+            "pn-tooltip": LocalJSX.IntrinsicElements["pn-tooltip"] & JSXBase.HTMLAttributes<HTMLPnTooltipElement>;
             /**
              * The wizard component lets you highlight areas on the page
              * that is accompanied with a modal for user guidance.
@@ -7059,11 +8399,11 @@ declare module "@stencil/core" {
              * Set the step prop to start the wizard at a specific step (0-indexed). -1 closes the wizard.
              * @since v7.19.0
              */
-            "pn-wizard": LocalJSX.PnWizard & JSXBase.HTMLAttributes<HTMLPnWizardElement>;
+            "pn-wizard": LocalJSX.IntrinsicElements["pn-wizard"] & JSXBase.HTMLAttributes<HTMLPnWizardElement>;
             /**
              * Check the delivery date for letters, newspapers and direct mail that are distributed every second day.
              */
-            "pn-zipcode-search": LocalJSX.PnZipcodeSearch & JSXBase.HTMLAttributes<HTMLPnZipcodeSearchElement>;
+            "pn-zipcode-search": LocalJSX.IntrinsicElements["pn-zipcode-search"] & JSXBase.HTMLAttributes<HTMLPnZipcodeSearchElement>;
         }
     }
 }