@zanichelli/albe-web-components 19.3.0-rc1 → 19.4.0

package/dist/types/components.d.ts

@@ -5,12 +5,12 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { AccordionVariant, AvatarSize, BookCardDeprecatedVariant, BookCardVariant, BreadcrumbHomepageVariant, BreadcrumbPath, BreadcrumbPathStyle, ButtonSize, ButtonType, ButtonVariant, CardVariant, CarouselArrowsPosition, CarouselProgressMode, ColorPickerPalette, ComboItem, ControlSize, CoverHeroContentPosition, CoverHeroVariant, DictionaryData, DividerOrientation, DividerSize, ExpandableListButtonAlign, ExpandableListStyle, IconPosition, InfoRevealPosition, InputStatus, InputType, LabelPosition, ListDividerType, ListSize, ListType, NavigationTabsOrientation, NavigationTabsSize, NotificationType, OffCanvasVariant, PopoverPosition, SearchbarItem, SelectItem, SkipToContentLink, SortDirection, ThemeVariant, ToastNotification, ToastNotificationPosition, ToastNotificationTransition, TransitionDirection, TreeListItem, VisibilityCondition, ZAriaAlertMode, ZChipType, ZDatePickerMode, ZFileUploadType, ZRangePickerMode, ZSectionTitleDividerPosition } from "./beans";
+import { AccordionVariant, AvatarSize, BookCardDeprecatedVariant, BookCardVariant, BreadcrumbHomepageVariant, BreadcrumbPath, BreadcrumbPathStyle, ButtonSize, ButtonType, ButtonVariant, CardVariant, CarouselArrowsPosition, CarouselProgressMode, ColorPickerPalette, ComboItem, ControlSize, CoverHeroContentPosition, CoverHeroVariant, DictionaryData, DividerOrientation, DividerSize, ExpandableListButtonAlign, ExpandableListStyle, IconPosition, InfoRevealPosition, InputStatus, InputType, LabelPosition, ListDividerType, ListSize, ListType, NavigationTabsOrientation, NavigationTabsSize, NotificationType, OffCanvasVariant, Orientation, PopoverPosition, SearchbarItem, SelectItem, SkipToContentLink, SortDirection, ThemeVariant, ToastNotification, ToastNotificationPosition, ToastNotificationTransition, TransitionDirection, TreeListItem, VisibilityCondition, ZAriaAlertMode, ZChipType, ZDatePickerMode, ZFileUploadType, ZRangePickerMode, ZSectionTitleDividerPosition } from "./beans";
 import { AlertType, LicenseType } from "./beans/index";
 import { ZFileUploadError } from "./components/file-upload/z-file-upload/index";
 import { ListItem } from "./beans/index.js";
 import { IconName } from "./constants/iconset";
-export { AccordionVariant, AvatarSize, BookCardDeprecatedVariant, BookCardVariant, BreadcrumbHomepageVariant, BreadcrumbPath, BreadcrumbPathStyle, ButtonSize, ButtonType, ButtonVariant, CardVariant, CarouselArrowsPosition, CarouselProgressMode, ColorPickerPalette, ComboItem, ControlSize, CoverHeroContentPosition, CoverHeroVariant, DictionaryData, DividerOrientation, DividerSize, ExpandableListButtonAlign, ExpandableListStyle, IconPosition, InfoRevealPosition, InputStatus, InputType, LabelPosition, ListDividerType, ListSize, ListType, NavigationTabsOrientation, NavigationTabsSize, NotificationType, OffCanvasVariant, PopoverPosition, SearchbarItem, SelectItem, SkipToContentLink, SortDirection, ThemeVariant, ToastNotification, ToastNotificationPosition, ToastNotificationTransition, TransitionDirection, TreeListItem, VisibilityCondition, ZAriaAlertMode, ZChipType, ZDatePickerMode, ZFileUploadType, ZRangePickerMode, ZSectionTitleDividerPosition } from "./beans";
+export { AccordionVariant, AvatarSize, BookCardDeprecatedVariant, BookCardVariant, BreadcrumbHomepageVariant, BreadcrumbPath, BreadcrumbPathStyle, ButtonSize, ButtonType, ButtonVariant, CardVariant, CarouselArrowsPosition, CarouselProgressMode, ColorPickerPalette, ComboItem, ControlSize, CoverHeroContentPosition, CoverHeroVariant, DictionaryData, DividerOrientation, DividerSize, ExpandableListButtonAlign, ExpandableListStyle, IconPosition, InfoRevealPosition, InputStatus, InputType, LabelPosition, ListDividerType, ListSize, ListType, NavigationTabsOrientation, NavigationTabsSize, NotificationType, OffCanvasVariant, Orientation, PopoverPosition, SearchbarItem, SelectItem, SkipToContentLink, SortDirection, ThemeVariant, ToastNotification, ToastNotificationPosition, ToastNotificationTransition, TransitionDirection, TreeListItem, VisibilityCondition, ZAriaAlertMode, ZChipType, ZDatePickerMode, ZFileUploadType, ZRangePickerMode, ZSectionTitleDividerPosition } from "./beans";
 export { AlertType, LicenseType } from "./beans/index";
 export { ZFileUploadError } from "./components/file-upload/z-file-upload/index";
 export { ListItem } from "./beans/index.js";
@@ -18,16 +18,6 @@ export { IconName } from "./constants/iconset";
 export namespace Components {
     /**
      * Accordion component.
-     * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.
-     * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.
-     * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.
-     * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.
-     * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.
-     * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.
-     * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.
-     * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.
-     * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.
-     * @cssprop --z-accordion-label-font-weight - Font weight of the summary label. Default: `--font-sb`.
      */
     interface ZAccordion {
         /**
@@ -105,19 +95,11 @@ export namespace Components {
          */
         "hideUnselected": boolean;
         /**
-          * Explicitly collapse anchor navigation. If false will collapse automatically only on mobile.
+          * Explicitly collapse anchor navigation. If false, it will collapse automatically only on mobile.
           * @default false
          */
         "isCollapsed": boolean;
     }
-    /**
-     * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
-     * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
-     * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
-     * @cssprop --app-header-text-color - Header text color. Defaults to `--color-default-text`.
-     * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
-     * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
-     */
     interface ZAppHeader {
         /**
           * The opening state of the drawer.
@@ -143,6 +125,10 @@ export namespace Components {
           * Label of the search button.
          */
         "searchButtonLabel"?: string;
+        /**
+          * Visible label for the search bar.
+         */
+        "searchLabel"?: string;
         /**
           * Url to the search page. Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar. The link will also appear on the sticky header.
          */
@@ -163,61 +149,6 @@ export namespace Components {
          */
         "stuck": boolean;
     }
-    /**
-     * @cssprop --app-header-typography-1-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.
-     * @cssprop --app-header-typography-2-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.
-     * @cssprop --app-header-typography-3-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `32px`.
-     * @cssprop --app-header-typography-4-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `36px`.
-     * @cssprop --app-header-typography-5-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `42px`.
-     * @cssprop --app-header-typography-6-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `48px`.
-     * @cssprop --app-header-typography-7-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `54px`.
-     * @cssprop --app-header-typography-8-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `60px`.
-     * @cssprop --app-header-typography-9-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `68px`.
-     * @cssprop --app-header-typography-10-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `76px`.
-     * @cssprop --app-header-typography-11-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `84px`.
-     * @cssprop --app-header-typography-12-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `92px`.
-     * @cssprop --app-header-typography-1-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.33`.
-     * @cssprop --app-header-typography-2-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.29`.
-     * @cssprop --app-header-typography-3-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
-     * @cssprop --app-header-typography-4-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
-     * @cssprop --app-header-typography-5-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
-     * @cssprop --app-header-typography-6-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
-     * @cssprop --app-header-typography-7-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
-     * @cssprop --app-header-typography-8-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
-     * @cssprop --app-header-typography-9-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
-     * @cssprop --app-header-typography-10-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
-     * @cssprop --app-header-typography-11-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
-     * @cssprop --app-header-typography-12-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
-     * @cssprop --app-header-typography-1-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.2 / 1em)`.
-     * @cssprop --app-header-typography-2-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.4 / 1em)`.
-     * @cssprop --app-header-typography-3-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.6 / 1em)`.
-     * @cssprop --app-header-typography-4-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.8 / 1em)`.
-     * @cssprop --app-header-typography-5-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1 / 1em)`.
-     * @cssprop --app-header-typography-6-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.2 / 1em)`.
-     * @cssprop --app-header-typography-7-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.4 / 1em)`.
-     * @cssprop --app-header-typography-8-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.6 / 1em)`.
-     * @cssprop --app-header-typography-9-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.8 / 1em)`.
-     * @cssprop --app-header-typography-10-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2 / 1em)`.
-     * @cssprop --app-header-typography-11-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.2 / 1em)`.
-     * @cssprop --app-header-typography-12-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.4 / 1em)`.
-     * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
-     * @cssprop --app-header-height - Defaults to `auto`.
-     * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
-     * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.
-     * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
-     * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
-     * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-default-text`.
-     * @cssprop --app-header-title-font-size - Variable to customize the title's font size.
-     * NOTE: Only use one of the exported `--app-header-typography-*-size` as a value.
-     * Defaults to `--app-header-typography-3-size`.
-     * @cssprop --app-header-title-lineheight - Variable to customize the title's line-height.
-     * NOTE: Only use one of the exported `--app-header-typography-*-lineheight` as a value and use the same level as the one of the font size.
-     * Defaults to `--app-header-typography-3-lineheight`.
-     * @cssprop --app-header-title-letter-spacing - Variable to customize the title's letter-spacing.
-     * NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value and use the same level as the one of the font size.
-     * Defaults to `--app-header-typography-3-tracking`.
-     * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
-     */
     interface ZAppHeaderDeprecated {
         /**
           * The opening state of the drawer.
@@ -295,15 +226,6 @@ export namespace Components {
          */
         "textColor"?: string;
     }
-    /**
-     * @cssprop --z-book-card-portrait-cover-height - Set custom cover height for portrait variant - Default: `378px`
-     * @cssprop --z-book-card-title-lines - Set title avilable lines - Default: `2`
-     * @cssprop --z-book-card-title-word-break - Set title word-break rule - Default: `initial`
-     * @cssprop --z-book-card-subtitle-lines - Set subtitle available lines - Default: `1`
-     * @cssprop --z-book-card-subtitle-word-break - Set subtitle word-break rule - Default: `break-all`
-     * @cssprop --z-book-card-authors-lines - Set authors available lines - Default: `1`
-     * @cssprop --z-book-card-authors-word-break - Set authors word-break rule - Default: `break-all`
-     */
     interface ZBookCard {
         /**
           * [optional] Authors
@@ -364,8 +286,6 @@ export namespace Components {
     }
     /**
      * ZBookCardApp component
-     * @cssprop --z-book-card-app-padding-x - set left and right padding
-     * @cssprop --z-book-card-app-padding-y - set top and bottom padding
      */
     interface ZBookCardApp {
         /**
@@ -390,12 +310,6 @@ export namespace Components {
          */
         "name": string;
     }
-    /**
-     * @cssprop --z-book-card-ribbon-background-color - ribbon backgrund color
-     * @cssprop --z-book-card-ribbon-shadow-color - ribbon shadow color
-     * @cssprop --z-book-card-compact-width - compact card custom width
-     * @cssprop --z-book-card-compact-height - compact card custom height
-     */
     interface ZBookCardDeprecated {
         /**
           * [optional] Authors
@@ -456,10 +370,6 @@ export namespace Components {
      * with options for borders and a representation of multiple books with a stack of fake covers behind the original one.
      * The aspect ratio of the cover image is preserved.
      * Alignment of the image inside the container can be customized via CSS properties.
-     * @cssprop --z-book-cover-height - height of the book cover (default: `378px`). The width is calculated automatically to maintain an aspect ratio of 1.33.
-     * @cssprop --z-book-cover-border-radius - border radius of the book cover (default: `var(--border-radius)`)
-     * @cssprop --z-book-cover-stack-shift-x - the horizontal shift of each stacked cover when `multiple` is `true` (default: `8px`)
-     * @cssprop --z-book-cover-stack-shift-y - the vertical shift of each stacked cover when `multiple` is `true` (default: `12px`)
      */
     interface ZBookCover {
         /**
@@ -550,7 +460,7 @@ export namespace Components {
          */
         "name"?: string;
         /**
-          * **Deprecated:** Use `htmlrole` instead.
+          * Use `htmlrole` instead.
           * @deprecated This prop has been deprecated in favor of `htmlrole` for better accessibility.
           * @default ""
          */
@@ -616,13 +526,6 @@ export namespace Components {
     /**
      * ZCard component.
      * The width of the card must be set by its container, following the grid indications of the design.
-     * @cssprop --aspect-ratio - Cover aspect ratio. Default: `1.62`
-     * @cssprop --z-card--border-color - Default: `var(--gray200)`
-     * @cssprop --z-card--color-cover-background - Cover color. Default: `var(--color-surface01)`
-     * @cssprop --z-card--text-background - Background color for the `text` variant. Default: `var(--color-surface01)`
-     * @cssprop --z-card--text-border-radius - Default: `none`
-     * @cssprop --z-card--text-border - Configure CSS `border`. Default: `none`
-     * @cssprop --z-card--text-padding - Configure CSS `padding`. Default: `none`
      */
     interface ZCard {
         /**
@@ -642,12 +545,10 @@ export namespace Components {
         /**
           * Card variant. Can be one of "text", "border", "shadow", "overlay". Leave it undefined for the default card.
          */
-        "variant": CardVariant;
+        "variant"?: CardVariant;
     }
     /**
      * ZCarousel component.
-     * @cssprop --z-carousel-gutter - The gutter between items.
-     * @cssprop --z-carousel-items-shadow - The shadow around the items.
      */
     interface ZCarousel {
         /**
@@ -828,9 +729,6 @@ export namespace Components {
     /**
      * Cover hero component.
      * Component to display a hero image with content.
-     * @cssprop --cover-hero-overlay - overlay color of the cover hero (CSS `background` property). **Default**: `linear-gradient(270deg, #0000 0%, #000000e6 100%)`.
-     * @cssprop --cover-hero-text-color - color of the text.
-     * @cssprop --cover-hero-aspect-ratio - aspect ratio to use for the image. You can pass a fraction or a number representing the ratio. **Default**: the intrinsic aspect ratio of the slotted image or `16/9`.
      */
     interface ZCoverHero {
         /**
@@ -1045,10 +943,6 @@ export namespace Components {
     }
     /**
      * Info reveal component.
-     * @cssprop --z-info-reveal-panel-width - Width of the info panel.
-     * @cssprop --trigger-icon-size - Size of the trigger icon for big size.
-     * @cssprop --trigger-icon-size-small - Size of the trigger icon for small size.
-     * @cssprop --trigger-icon-size-x-small - Size of the trigger icon for x-small size.
      */
     interface ZInfoReveal {
         /**
@@ -1114,7 +1008,7 @@ export namespace Components {
          */
         "htmlAriaControls"?: string;
         /**
-          * input helper message id (optional): available for text, password, number, email, textarea - if set, it will be used to populate the aria-describedby attribute, otherwise the attribute (if present) will be populated with an auto-generated value
+          * the input aria-describedby (optional)
          */
         "htmlAriaDescribedBy"?: string;
         /**
@@ -1122,6 +1016,10 @@ export namespace Components {
           * @default ""
          */
         "htmlAriaExpanded": string;
+        /**
+          * the input aria-labelledby (optional)
+         */
+        "htmlAriaLabelledby"?: string;
         /**
           * the id of the input element
           * @default `id-${randomId()}`
@@ -1242,6 +1140,66 @@ export namespace Components {
          */
         "status"?: InputStatus;
     }
+    /**
+     * Input range component.
+     */
+    interface ZInputRange {
+        /**
+          * Whether the input range is disabled.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * The aria label of the input range. for accessibility. Not necessary if the `label` prop is set.
+         */
+        "htmlAriaLabel": string;
+        /**
+          * ID of the input range.
+          * @default `z-input-range-${randomId()}`
+         */
+        "htmlId": string;
+        /**
+          * The label of the input range. When `orientation` is set to `vertical`, the label is not visible but used as `aria-label`, unless `htmlAriaLabel` is provided.
+         */
+        "label": string;
+        /**
+          * The greatest value in the range of permitted values.
+          * @default 100
+         */
+        "max": number;
+        /**
+          * The lowest value in the range of permitted values.
+          * @default 0
+         */
+        "min": number;
+        /**
+          * The orientation of the input range.
+         */
+        "orientation": Orientation;
+        /**
+          * Whether to show `min` and `max` values of the input range. Only visible with the `horizontal` orientation.
+          * @default false
+         */
+        "showEdges": boolean;
+        /**
+          * The size of the input range. Default: `ControlSize.BIG`
+         */
+        "size": ControlSize.BIG;
+        /**
+          * The step value for the input range.
+          * @default 1
+         */
+        "step": number;
+        /**
+          * The value of the input range.
+          * @default 0
+         */
+        "value": number;
+        /**
+          * The position of the tooltip displaying the current value. Defaults to `top` for horizontal orientation and `left` for vertical orientation. May be necessary to adjust this prop when the input range is close to the edges of the screen, to prevent the tooltip from showing out of the screen or in an unintended position due to auto adjustment. For example, for a horizontal input range close to the top of the screen, you may want to set this prop to `bottom`.
+         */
+        "valuePosition": PopoverPosition.TOP | PopoverPosition.BOTTOM | PopoverPosition.LEFT | PopoverPosition.RIGHT;
+    }
     interface ZList {
         /**
           * [optional] type of the list marker for each element
@@ -1401,9 +1359,6 @@ export namespace Components {
          */
         "width"?: number;
     }
-    /**
-     * @cssprop --z-menu-label-color - Color of the label's text.
-     */
     interface ZMenu {
         /**
           * Flag to set the active status of the menu.
@@ -1438,9 +1393,6 @@ export namespace Components {
          */
         "verticalContext": boolean;
     }
-    /**
-     * @cssprop --z-menu-label-color - Color of the label's text.
-     */
     interface ZMenuDeprecated {
         /**
           * Flag to set the active status of the menu.
@@ -1497,9 +1449,6 @@ export namespace Components {
          */
         "active"?: boolean;
     }
-    /**
-     * @cssprop --z-modal-content-padding - padding of the modal's content. The default is 16px (--space-unit * 2)
-     */
     interface ZModal {
         /**
           * add role "alertdialog" to dialog (optional, default is false)
@@ -1761,8 +1710,6 @@ export namespace Components {
     /**
      * Navigation tabs component.
      * To select a specific tab programmatically, set the `aria-selected` attribute to `true` on the desired tab.
-     * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.
-     * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.
      */
     interface ZNavigationTabs {
         /**
@@ -1788,9 +1735,6 @@ export namespace Components {
     }
     /**
      * Notification bar component.
-     * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.
-     * @cssprop --z-notification--content-max-width - The max width of the notification content. Useful to align the content with other elements on the page, keeping the colored background full width. Default: 100%. Note: the content is automatically centered, so if you want to limit the width only for the slotted content, you can wrap it in a container with the desired width and leave the `z-notification` width to 100%.
-     * @cssprop --z-notification--inline-padding - The inline padding of the notification content. It can be useful to align the content when the `--z-notification--content-max-width` is set. Default: calc(var(--space-unit) * 2).
      */
     interface ZNotification {
         /**
@@ -1827,11 +1771,6 @@ export namespace Components {
          */
         "type": NotificationType;
     }
-    /**
-     * @cssprop --z-offcanvas--top-space - Top offset of the offcanvas, for `overlay` variant. Useful when there is some fixed element above the offcanvas. Default: `0`.
-     * @cssprop --z-offcanvas--container-width - Width of the offcanvas for `left` and `right` direction. Default: `375px`.
-     * @cssprop --z-offcanvas--container-height - Height of the offcanvas for `up` direction. Default: `90%`.
-     */
     interface ZOffcanvas {
         /**
           * Whether the offcanvas is open. Default: false
@@ -1839,7 +1778,7 @@ export namespace Components {
          */
         "open": boolean;
         /**
-          * Whether to show the backdrop when the offcanvas is open. Default: true
+          * Whether to show the backdrop when the offcanvas is open and variant is not `pushcontent`. Default: `true`
           * @default true
          */
         "showBackdrop": boolean;
@@ -1877,8 +1816,6 @@ export namespace Components {
     }
     /**
      * Pagination bar component.
-     * @cssprop --z-pagination-background-color - background of the pagination's tabs. The default is --color-background
-     * @cssprop --z-pagination-background-color-hover - background of the pagination's tabs on hover. The default is --color-surface01
      */
     interface ZPagination {
         /**
@@ -1968,10 +1905,6 @@ export namespace Components {
      * It supports various positions and can automatically adjust it based on available space, accounting for scrollable containers.
      * Notes:
      * - If positioning has an odd behavior, consider manually adjusting the size of the slotted elements (using `width`, `height`, `max-width`, `max-height`, etc...) when its content is "fluid" (like text), because it can interfere with the position calculation (for example a long text on one single line can be bigger than the available space, letting the algorithm think the popover doesn't fits).
-     * @cssprop --z-popover-theme--surface - background color of the popover.
-     * @cssprop --z-popover-theme--text - foreground color of the popover.
-     * @cssprop --z-popover-padding - padding of the popover.
-     * @cssprop --z-popover-shadow-filter - drop-shadow filter of the popover. Defaults to `drop-shadow(0 1px 2px var(--shadow-color-base))`.
      */
     interface ZPopover {
         /**
@@ -2087,11 +2020,6 @@ export namespace Components {
          */
         "titleHtmlTag"?: string;
     }
-    /**
-     * @cssprop --z-searchbar-results-height - Max height of the results container (default: 540px)
-     * @cssprop --z-searchbar-tag-text-color - Color of tag's text (default --color-primary03);
-     * @cssprop --z-searchbar-tag-bg - Color of tag's background (default --color-hover-primary);
-     */
     interface ZSearchbar {
         /**
           * Show autocomplete results
@@ -2176,7 +2104,6 @@ export namespace Components {
     /**
      * Section title component.
      * An optional secondary title can be put over the primary one.
-     * @cssprop --z-section-title--divider-color - Color of the divider. Use a CSS prop string like `"--red500"`. Default is `"--red500"`.
      */
     interface ZSectionTitle {
         /**
@@ -2331,7 +2258,6 @@ export namespace Components {
     }
     /**
      * ZTable component.
-     * @cssprop --z-table--cells-padding - Padding of the cells.
      */
     interface ZTable {
         /**
@@ -2342,8 +2268,6 @@ export namespace Components {
     }
     /**
      * Ztag component.
-     * @cssprop --z-tag-text-color - text and icon color using tokens.
-     * @cssprop --z-tag-bg - background color of the z-tag.
      */
     interface ZTag {
         /**
@@ -2608,7 +2532,6 @@ export namespace Components {
      * Implements WCAG toolbar pattern with roving tabindex keyboard navigation.
      * Tools can be visually grouped using `z-divider` elements as separators.
      * @see https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/
-     * @cssprop --z-toolbar-columns - Number of items per row in the toolbar. Only applies on mobile viewport, when the toolbar can be displayed in a multi-row layout. Default: `6`.
      */
     interface ZToolbar {
         /**
@@ -2619,9 +2542,6 @@ export namespace Components {
     /**
      * Tooltip component.
      * It is basically a wrapper for the `<z-popover>` component with custom configuration.
-     * @cssprop --z-tooltip-theme--surface - background color of the popover.
-     * @cssprop --z-tooltip-theme--text - foreground color of the popover.
-     * @cssprop --z-tooltip-shadow-filter - drop-shadow filter of the popover.
      */
     interface ZTooltip {
         /**
@@ -2751,6 +2671,10 @@ export interface ZInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLZInputElement;
 }
+export interface ZInputRangeCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLZInputRangeElement;
+}
 export interface ZListElementCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLZListElementElement;
@@ -2869,16 +2793,6 @@ declare global {
     }
     /**
      * Accordion component.
-     * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.
-     * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.
-     * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.
-     * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.
-     * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.
-     * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.
-     * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.
-     * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.
-     * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.
-     * @cssprop --z-accordion-label-font-weight - Font weight of the summary label. Default: `--font-sb`.
      */
     interface HTMLZAccordionElement extends Components.ZAccordion, HTMLStencilElement {
         addEventListener<K extends keyof HTMLZAccordionElementEventMap>(type: K, listener: (this: HTMLZAccordionElement, ev: ZAccordionCustomEvent<HTMLZAccordionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2922,14 +2836,6 @@ declare global {
     interface HTMLZAppHeaderElementEventMap {
         "sticking": any;
     }
-    /**
-     * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
-     * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
-     * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
-     * @cssprop --app-header-text-color - Header text color. Defaults to `--color-default-text`.
-     * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
-     * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
-     */
     interface HTMLZAppHeaderElement extends Components.ZAppHeader, HTMLStencilElement {
         addEventListener<K extends keyof HTMLZAppHeaderElementEventMap>(type: K, listener: (this: HTMLZAppHeaderElement, ev: ZAppHeaderCustomEvent<HTMLZAppHeaderElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2947,61 +2853,6 @@ declare global {
     interface HTMLZAppHeaderDeprecatedElementEventMap {
         "sticking": any;
     }
-    /**
-     * @cssprop --app-header-typography-1-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.
-     * @cssprop --app-header-typography-2-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.
-     * @cssprop --app-header-typography-3-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `32px`.
-     * @cssprop --app-header-typography-4-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `36px`.
-     * @cssprop --app-header-typography-5-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `42px`.
-     * @cssprop --app-header-typography-6-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `48px`.
-     * @cssprop --app-header-typography-7-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `54px`.
-     * @cssprop --app-header-typography-8-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `60px`.
-     * @cssprop --app-header-typography-9-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `68px`.
-     * @cssprop --app-header-typography-10-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `76px`.
-     * @cssprop --app-header-typography-11-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `84px`.
-     * @cssprop --app-header-typography-12-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `92px`.
-     * @cssprop --app-header-typography-1-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.33`.
-     * @cssprop --app-header-typography-2-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.29`.
-     * @cssprop --app-header-typography-3-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
-     * @cssprop --app-header-typography-4-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
-     * @cssprop --app-header-typography-5-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
-     * @cssprop --app-header-typography-6-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
-     * @cssprop --app-header-typography-7-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
-     * @cssprop --app-header-typography-8-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
-     * @cssprop --app-header-typography-9-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
-     * @cssprop --app-header-typography-10-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
-     * @cssprop --app-header-typography-11-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
-     * @cssprop --app-header-typography-12-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
-     * @cssprop --app-header-typography-1-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.2 / 1em)`.
-     * @cssprop --app-header-typography-2-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.4 / 1em)`.
-     * @cssprop --app-header-typography-3-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.6 / 1em)`.
-     * @cssprop --app-header-typography-4-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.8 / 1em)`.
-     * @cssprop --app-header-typography-5-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1 / 1em)`.
-     * @cssprop --app-header-typography-6-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.2 / 1em)`.
-     * @cssprop --app-header-typography-7-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.4 / 1em)`.
-     * @cssprop --app-header-typography-8-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.6 / 1em)`.
-     * @cssprop --app-header-typography-9-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.8 / 1em)`.
-     * @cssprop --app-header-typography-10-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2 / 1em)`.
-     * @cssprop --app-header-typography-11-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.2 / 1em)`.
-     * @cssprop --app-header-typography-12-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.4 / 1em)`.
-     * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
-     * @cssprop --app-header-height - Defaults to `auto`.
-     * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
-     * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.
-     * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
-     * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
-     * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-default-text`.
-     * @cssprop --app-header-title-font-size - Variable to customize the title's font size.
-     * NOTE: Only use one of the exported `--app-header-typography-*-size` as a value.
-     * Defaults to `--app-header-typography-3-size`.
-     * @cssprop --app-header-title-lineheight - Variable to customize the title's line-height.
-     * NOTE: Only use one of the exported `--app-header-typography-*-lineheight` as a value and use the same level as the one of the font size.
-     * Defaults to `--app-header-typography-3-lineheight`.
-     * @cssprop --app-header-title-letter-spacing - Variable to customize the title's letter-spacing.
-     * NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value and use the same level as the one of the font size.
-     * Defaults to `--app-header-typography-3-tracking`.
-     * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
-     */
     interface HTMLZAppHeaderDeprecatedElement extends Components.ZAppHeaderDeprecated, HTMLStencilElement {
         addEventListener<K extends keyof HTMLZAppHeaderDeprecatedElementEventMap>(type: K, listener: (this: HTMLZAppHeaderDeprecatedElement, ev: ZAppHeaderDeprecatedCustomEvent<HTMLZAppHeaderDeprecatedElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3033,15 +2884,6 @@ declare global {
         "coverClick": any;
         "titleClick": any;
     }
-    /**
-     * @cssprop --z-book-card-portrait-cover-height - Set custom cover height for portrait variant - Default: `378px`
-     * @cssprop --z-book-card-title-lines - Set title avilable lines - Default: `2`
-     * @cssprop --z-book-card-title-word-break - Set title word-break rule - Default: `initial`
-     * @cssprop --z-book-card-subtitle-lines - Set subtitle available lines - Default: `1`
-     * @cssprop --z-book-card-subtitle-word-break - Set subtitle word-break rule - Default: `break-all`
-     * @cssprop --z-book-card-authors-lines - Set authors available lines - Default: `1`
-     * @cssprop --z-book-card-authors-word-break - Set authors word-break rule - Default: `break-all`
-     */
     interface HTMLZBookCardElement extends Components.ZBookCard, HTMLStencilElement {
         addEventListener<K extends keyof HTMLZBookCardElementEventMap>(type: K, listener: (this: HTMLZBookCardElement, ev: ZBookCardCustomEvent<HTMLZBookCardElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3061,8 +2903,6 @@ declare global {
     }
     /**
      * ZBookCardApp component
-     * @cssprop --z-book-card-app-padding-x - set left and right padding
-     * @cssprop --z-book-card-app-padding-y - set top and bottom padding
      */
     interface HTMLZBookCardAppElement extends Components.ZBookCardApp, HTMLStencilElement {
         addEventListener<K extends keyof HTMLZBookCardAppElementEventMap>(type: K, listener: (this: HTMLZBookCardAppElement, ev: ZBookCardAppCustomEvent<HTMLZBookCardAppElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3081,12 +2921,6 @@ declare global {
     interface HTMLZBookCardDeprecatedElementEventMap {
         "ribbonClick": any;
     }
-    /**
-     * @cssprop --z-book-card-ribbon-background-color - ribbon backgrund color
-     * @cssprop --z-book-card-ribbon-shadow-color - ribbon shadow color
-     * @cssprop --z-book-card-compact-width - compact card custom width
-     * @cssprop --z-book-card-compact-height - compact card custom height
-     */
     interface HTMLZBookCardDeprecatedElement extends Components.ZBookCardDeprecated, HTMLStencilElement {
         addEventListener<K extends keyof HTMLZBookCardDeprecatedElementEventMap>(type: K, listener: (this: HTMLZBookCardDeprecatedElement, ev: ZBookCardDeprecatedCustomEvent<HTMLZBookCardDeprecatedElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3106,10 +2940,6 @@ declare global {
      * with options for borders and a representation of multiple books with a stack of fake covers behind the original one.
      * The aspect ratio of the cover image is preserved.
      * Alignment of the image inside the container can be customized via CSS properties.
-     * @cssprop --z-book-cover-height - height of the book cover (default: `378px`). The width is calculated automatically to maintain an aspect ratio of 1.33.
-     * @cssprop --z-book-cover-border-radius - border radius of the book cover (default: `var(--border-radius)`)
-     * @cssprop --z-book-cover-stack-shift-x - the horizontal shift of each stacked cover when `multiple` is `true` (default: `8px`)
-     * @cssprop --z-book-cover-stack-shift-y - the vertical shift of each stacked cover when `multiple` is `true` (default: `12px`)
      */
     interface HTMLZBookCoverElement extends Components.ZBookCover, HTMLStencilElement {
     }
@@ -3160,13 +2990,6 @@ declare global {
     /**
      * ZCard component.
      * The width of the card must be set by its container, following the grid indications of the design.
-     * @cssprop --aspect-ratio - Cover aspect ratio. Default: `1.62`
-     * @cssprop --z-card--border-color - Default: `var(--gray200)`
-     * @cssprop --z-card--color-cover-background - Cover color. Default: `var(--color-surface01)`
-     * @cssprop --z-card--text-background - Background color for the `text` variant. Default: `var(--color-surface01)`
-     * @cssprop --z-card--text-border-radius - Default: `none`
-     * @cssprop --z-card--text-border - Configure CSS `border`. Default: `none`
-     * @cssprop --z-card--text-padding - Configure CSS `padding`. Default: `none`
      */
     interface HTMLZCardElement extends Components.ZCard, HTMLStencilElement {
     }
@@ -3179,8 +3002,6 @@ declare global {
     }
     /**
      * ZCarousel component.
-     * @cssprop --z-carousel-gutter - The gutter between items.
-     * @cssprop --z-carousel-items-shadow - The shadow around the items.
      */
     interface HTMLZCarouselElement extends Components.ZCarousel, HTMLStencilElement {
         addEventListener<K extends keyof HTMLZCarouselElementEventMap>(type: K, listener: (this: HTMLZCarouselElement, ev: ZCarouselCustomEvent<HTMLZCarouselElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3254,9 +3075,6 @@ declare global {
     /**
      * Cover hero component.
      * Component to display a hero image with content.
-     * @cssprop --cover-hero-overlay - overlay color of the cover hero (CSS `background` property). **Default**: `linear-gradient(270deg, #0000 0%, #000000e6 100%)`.
-     * @cssprop --cover-hero-text-color - color of the text.
-     * @cssprop --cover-hero-aspect-ratio - aspect ratio to use for the image. You can pass a fraction or a number representing the ratio. **Default**: the intrinsic aspect ratio of the slotted image or `16/9`.
      */
     interface HTMLZCoverHeroElement extends Components.ZCoverHero, HTMLStencilElement {
     }
@@ -3374,10 +3192,6 @@ declare global {
     };
     /**
      * Info reveal component.
-     * @cssprop --z-info-reveal-panel-width - Width of the info panel.
-     * @cssprop --trigger-icon-size - Size of the trigger icon for big size.
-     * @cssprop --trigger-icon-size-small - Size of the trigger icon for small size.
-     * @cssprop --trigger-icon-size-x-small - Size of the trigger icon for x-small size.
      */
     interface HTMLZInfoRevealElement extends Components.ZInfoReveal, HTMLStencilElement {
     }
@@ -3413,6 +3227,27 @@ declare global {
         prototype: HTMLZInputMessageElement;
         new (): HTMLZInputMessageElement;
     };
+    interface HTMLZInputRangeElementEventMap {
+        "rangeInput": number;
+        "rangeChange": number;
+    }
+    /**
+     * Input range component.
+     */
+    interface HTMLZInputRangeElement extends Components.ZInputRange, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLZInputRangeElementEventMap>(type: K, listener: (this: HTMLZInputRangeElement, ev: ZInputRangeCustomEvent<HTMLZInputRangeElementEventMap[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 HTMLZInputRangeElementEventMap>(type: K, listener: (this: HTMLZInputRangeElement, ev: ZInputRangeCustomEvent<HTMLZInputRangeElementEventMap[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 HTMLZInputRangeElement: {
+        prototype: HTMLZInputRangeElement;
+        new (): HTMLZInputRangeElement;
+    };
     interface HTMLZListElement extends Components.ZList, HTMLStencilElement {
     }
     var HTMLZListElement: {
@@ -3454,9 +3289,6 @@ declare global {
         "opened": any;
         "closed": any;
     }
-    /**
-     * @cssprop --z-menu-label-color - Color of the label's text.
-     */
     interface HTMLZMenuElement extends Components.ZMenu, HTMLStencilElement {
         addEventListener<K extends keyof HTMLZMenuElementEventMap>(type: K, listener: (this: HTMLZMenuElement, ev: ZMenuCustomEvent<HTMLZMenuElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3475,9 +3307,6 @@ declare global {
         "opened": any;
         "closed": any;
     }
-    /**
-     * @cssprop --z-menu-label-color - Color of the label's text.
-     */
     interface HTMLZMenuDeprecatedElement extends Components.ZMenuDeprecated, HTMLStencilElement {
         addEventListener<K extends keyof HTMLZMenuDeprecatedElementEventMap>(type: K, listener: (this: HTMLZMenuDeprecatedElement, ev: ZMenuDeprecatedCustomEvent<HTMLZMenuDeprecatedElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3539,9 +3368,6 @@ declare global {
         "modalHeaderActive": any;
         "modalBackgroundClick": any;
     }
-    /**
-     * @cssprop --z-modal-content-padding - padding of the modal's content. The default is 16px (--space-unit * 2)
-     */
     interface HTMLZModalElement extends Components.ZModal, HTMLStencilElement {
         addEventListener<K extends keyof HTMLZModalElementEventMap>(type: K, listener: (this: HTMLZModalElement, ev: ZModalCustomEvent<HTMLZModalElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3685,8 +3511,6 @@ declare global {
     /**
      * Navigation tabs component.
      * To select a specific tab programmatically, set the `aria-selected` attribute to `true` on the desired tab.
-     * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.
-     * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.
      */
     interface HTMLZNavigationTabsElement extends Components.ZNavigationTabs, HTMLStencilElement {
         addEventListener<K extends keyof HTMLZNavigationTabsElementEventMap>(type: K, listener: (this: HTMLZNavigationTabsElement, ev: ZNavigationTabsCustomEvent<HTMLZNavigationTabsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3708,9 +3532,6 @@ declare global {
     }
     /**
      * Notification bar component.
-     * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.
-     * @cssprop --z-notification--content-max-width - The max width of the notification content. Useful to align the content with other elements on the page, keeping the colored background full width. Default: 100%. Note: the content is automatically centered, so if you want to limit the width only for the slotted content, you can wrap it in a container with the desired width and leave the `z-notification` width to 100%.
-     * @cssprop --z-notification--inline-padding - The inline padding of the notification content. It can be useful to align the content when the `--z-notification--content-max-width` is set. Default: calc(var(--space-unit) * 2).
      */
     interface HTMLZNotificationElement extends Components.ZNotification, HTMLStencilElement {
         addEventListener<K extends keyof HTMLZNotificationElementEventMap>(type: K, listener: (this: HTMLZNotificationElement, ev: ZNotificationCustomEvent<HTMLZNotificationElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3727,13 +3548,8 @@ declare global {
         new (): HTMLZNotificationElement;
     };
     interface HTMLZOffcanvasElementEventMap {
-        "canvasOpenStatusChanged": any;
+        "canvasOpenStatusChanged": boolean;
     }
-    /**
-     * @cssprop --z-offcanvas--top-space - Top offset of the offcanvas, for `overlay` variant. Useful when there is some fixed element above the offcanvas. Default: `0`.
-     * @cssprop --z-offcanvas--container-width - Width of the offcanvas for `left` and `right` direction. Default: `375px`.
-     * @cssprop --z-offcanvas--container-height - Height of the offcanvas for `up` direction. Default: `90%`.
-     */
     interface HTMLZOffcanvasElement extends Components.ZOffcanvas, HTMLStencilElement {
         addEventListener<K extends keyof HTMLZOffcanvasElementEventMap>(type: K, listener: (this: HTMLZOffcanvasElement, ev: ZOffcanvasCustomEvent<HTMLZOffcanvasElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3770,8 +3586,6 @@ declare global {
     }
     /**
      * Pagination bar component.
-     * @cssprop --z-pagination-background-color - background of the pagination's tabs. The default is --color-background
-     * @cssprop --z-pagination-background-color-hover - background of the pagination's tabs on hover. The default is --color-surface01
      */
     interface HTMLZPaginationElement extends Components.ZPagination, HTMLStencilElement {
         addEventListener<K extends keyof HTMLZPaginationElementEventMap>(type: K, listener: (this: HTMLZPaginationElement, ev: ZPaginationCustomEvent<HTMLZPaginationElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3803,10 +3617,6 @@ declare global {
      * It supports various positions and can automatically adjust it based on available space, accounting for scrollable containers.
      * Notes:
      * - If positioning has an odd behavior, consider manually adjusting the size of the slotted elements (using `width`, `height`, `max-width`, `max-height`, etc...) when its content is "fluid" (like text), because it can interfere with the position calculation (for example a long text on one single line can be bigger than the available space, letting the algorithm think the popover doesn't fits).
-     * @cssprop --z-popover-theme--surface - background color of the popover.
-     * @cssprop --z-popover-theme--text - foreground color of the popover.
-     * @cssprop --z-popover-padding - padding of the popover.
-     * @cssprop --z-popover-shadow-filter - drop-shadow filter of the popover. Defaults to `drop-shadow(0 1px 2px var(--shadow-color-base))`.
      */
     interface HTMLZPopoverElement extends Components.ZPopover, HTMLStencilElement {
         addEventListener<K extends keyof HTMLZPopoverElementEventMap>(type: K, listener: (this: HTMLZPopoverElement, ev: ZPopoverCustomEvent<HTMLZPopoverElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3850,11 +3660,6 @@ declare global {
         "searchTyping": string;
         "searchItemClick": SearchbarItem;
     }
-    /**
-     * @cssprop --z-searchbar-results-height - Max height of the results container (default: 540px)
-     * @cssprop --z-searchbar-tag-text-color - Color of tag's text (default --color-primary03);
-     * @cssprop --z-searchbar-tag-bg - Color of tag's background (default --color-hover-primary);
-     */
     interface HTMLZSearchbarElement extends Components.ZSearchbar, HTMLStencilElement {
         addEventListener<K extends keyof HTMLZSearchbarElementEventMap>(type: K, listener: (this: HTMLZSearchbarElement, ev: ZSearchbarCustomEvent<HTMLZSearchbarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3872,7 +3677,6 @@ declare global {
     /**
      * Section title component.
      * An optional secondary title can be put over the primary one.
-     * @cssprop --z-section-title--divider-color - Color of the divider. Use a CSS prop string like `"--red500"`. Default is `"--red500"`.
      */
     interface HTMLZSectionTitleElement extends Components.ZSectionTitle, HTMLStencilElement {
     }
@@ -3927,7 +3731,6 @@ declare global {
     };
     /**
      * ZTable component.
-     * @cssprop --z-table--cells-padding - Padding of the cells.
      */
     interface HTMLZTableElement extends Components.ZTable, HTMLStencilElement {
     }
@@ -3937,8 +3740,6 @@ declare global {
     };
     /**
      * Ztag component.
-     * @cssprop --z-tag-text-color - text and icon color using tokens.
-     * @cssprop --z-tag-bg - background color of the z-tag.
      */
     interface HTMLZTagElement extends Components.ZTag, HTMLStencilElement {
     }
@@ -4099,7 +3900,6 @@ declare global {
      * Implements WCAG toolbar pattern with roving tabindex keyboard navigation.
      * Tools can be visually grouped using `z-divider` elements as separators.
      * @see https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/
-     * @cssprop --z-toolbar-columns - Number of items per row in the toolbar. Only applies on mobile viewport, when the toolbar can be displayed in a multi-row layout. Default: `6`.
      */
     interface HTMLZToolbarElement extends Components.ZToolbar, HTMLStencilElement {
     }
@@ -4113,9 +3913,6 @@ declare global {
     /**
      * Tooltip component.
      * It is basically a wrapper for the `<z-popover>` component with custom configuration.
-     * @cssprop --z-tooltip-theme--surface - background color of the popover.
-     * @cssprop --z-tooltip-theme--text - foreground color of the popover.
-     * @cssprop --z-tooltip-shadow-filter - drop-shadow filter of the popover.
      */
     interface HTMLZTooltipElement extends Components.ZTooltip, HTMLStencilElement {
         addEventListener<K extends keyof HTMLZTooltipElementEventMap>(type: K, listener: (this: HTMLZTooltipElement, ev: ZTooltipCustomEvent<HTMLZTooltipElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4208,6 +4005,7 @@ declare global {
         "z-info-reveal": HTMLZInfoRevealElement;
         "z-input": HTMLZInputElement;
         "z-input-message": HTMLZInputMessageElement;
+        "z-input-range": HTMLZInputRangeElement;
         "z-list": HTMLZListElement;
         "z-list-element": HTMLZListElementElement;
         "z-list-group": HTMLZListGroupElement;
@@ -4270,16 +4068,6 @@ declare namespace LocalJSX {
 
     /**
      * Accordion component.
-     * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.
-     * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.
-     * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.
-     * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.
-     * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.
-     * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.
-     * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.
-     * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.
-     * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.
-     * @cssprop --z-accordion-label-font-weight - Font weight of the summary label. Default: `--font-sb`.
      */
     interface ZAccordion {
         /**
@@ -4361,19 +4149,11 @@ declare namespace LocalJSX {
          */
         "hideUnselected"?: boolean;
         /**
-          * Explicitly collapse anchor navigation. If false will collapse automatically only on mobile.
+          * Explicitly collapse anchor navigation. If false, it will collapse automatically only on mobile.
           * @default false
          */
         "isCollapsed"?: boolean;
     }
-    /**
-     * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
-     * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
-     * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
-     * @cssprop --app-header-text-color - Header text color. Defaults to `--color-default-text`.
-     * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
-     * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
-     */
     interface ZAppHeader {
         /**
           * The opening state of the drawer.
@@ -4403,6 +4183,10 @@ declare namespace LocalJSX {
           * Label of the search button.
          */
         "searchButtonLabel"?: string;
+        /**
+          * Visible label for the search bar.
+         */
+        "searchLabel"?: string;
         /**
           * Url to the search page. Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar. The link will also appear on the sticky header.
          */
@@ -4423,61 +4207,6 @@ declare namespace LocalJSX {
          */
         "stuck"?: boolean;
     }
-    /**
-     * @cssprop --app-header-typography-1-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.
-     * @cssprop --app-header-typography-2-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.
-     * @cssprop --app-header-typography-3-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `32px`.
-     * @cssprop --app-header-typography-4-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `36px`.
-     * @cssprop --app-header-typography-5-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `42px`.
-     * @cssprop --app-header-typography-6-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `48px`.
-     * @cssprop --app-header-typography-7-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `54px`.
-     * @cssprop --app-header-typography-8-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `60px`.
-     * @cssprop --app-header-typography-9-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `68px`.
-     * @cssprop --app-header-typography-10-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `76px`.
-     * @cssprop --app-header-typography-11-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `84px`.
-     * @cssprop --app-header-typography-12-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `92px`.
-     * @cssprop --app-header-typography-1-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.33`.
-     * @cssprop --app-header-typography-2-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.29`.
-     * @cssprop --app-header-typography-3-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
-     * @cssprop --app-header-typography-4-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
-     * @cssprop --app-header-typography-5-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
-     * @cssprop --app-header-typography-6-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
-     * @cssprop --app-header-typography-7-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
-     * @cssprop --app-header-typography-8-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
-     * @cssprop --app-header-typography-9-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
-     * @cssprop --app-header-typography-10-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
-     * @cssprop --app-header-typography-11-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
-     * @cssprop --app-header-typography-12-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
-     * @cssprop --app-header-typography-1-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.2 / 1em)`.
-     * @cssprop --app-header-typography-2-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.4 / 1em)`.
-     * @cssprop --app-header-typography-3-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.6 / 1em)`.
-     * @cssprop --app-header-typography-4-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.8 / 1em)`.
-     * @cssprop --app-header-typography-5-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1 / 1em)`.
-     * @cssprop --app-header-typography-6-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.2 / 1em)`.
-     * @cssprop --app-header-typography-7-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.4 / 1em)`.
-     * @cssprop --app-header-typography-8-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.6 / 1em)`.
-     * @cssprop --app-header-typography-9-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.8 / 1em)`.
-     * @cssprop --app-header-typography-10-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2 / 1em)`.
-     * @cssprop --app-header-typography-11-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.2 / 1em)`.
-     * @cssprop --app-header-typography-12-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.4 / 1em)`.
-     * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
-     * @cssprop --app-header-height - Defaults to `auto`.
-     * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
-     * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.
-     * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
-     * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
-     * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-default-text`.
-     * @cssprop --app-header-title-font-size - Variable to customize the title's font size.
-     * NOTE: Only use one of the exported `--app-header-typography-*-size` as a value.
-     * Defaults to `--app-header-typography-3-size`.
-     * @cssprop --app-header-title-lineheight - Variable to customize the title's line-height.
-     * NOTE: Only use one of the exported `--app-header-typography-*-lineheight` as a value and use the same level as the one of the font size.
-     * Defaults to `--app-header-typography-3-lineheight`.
-     * @cssprop --app-header-title-letter-spacing - Variable to customize the title's letter-spacing.
-     * NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value and use the same level as the one of the font size.
-     * Defaults to `--app-header-typography-3-tracking`.
-     * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
-     */
     interface ZAppHeaderDeprecated {
         /**
           * The opening state of the drawer.
@@ -4559,15 +4288,6 @@ declare namespace LocalJSX {
          */
         "textColor"?: string;
     }
-    /**
-     * @cssprop --z-book-card-portrait-cover-height - Set custom cover height for portrait variant - Default: `378px`
-     * @cssprop --z-book-card-title-lines - Set title avilable lines - Default: `2`
-     * @cssprop --z-book-card-title-word-break - Set title word-break rule - Default: `initial`
-     * @cssprop --z-book-card-subtitle-lines - Set subtitle available lines - Default: `1`
-     * @cssprop --z-book-card-subtitle-word-break - Set subtitle word-break rule - Default: `break-all`
-     * @cssprop --z-book-card-authors-lines - Set authors available lines - Default: `1`
-     * @cssprop --z-book-card-authors-word-break - Set authors word-break rule - Default: `break-all`
-     */
     interface ZBookCard {
         /**
           * [optional] Authors
@@ -4640,8 +4360,6 @@ declare namespace LocalJSX {
     }
     /**
      * ZBookCardApp component
-     * @cssprop --z-book-card-app-padding-x - set left and right padding
-     * @cssprop --z-book-card-app-padding-y - set top and bottom padding
      */
     interface ZBookCardApp {
         /**
@@ -4670,12 +4388,6 @@ declare namespace LocalJSX {
          */
         "onAppClick"?: (event: ZBookCardAppCustomEvent<any>) => void;
     }
-    /**
-     * @cssprop --z-book-card-ribbon-background-color - ribbon backgrund color
-     * @cssprop --z-book-card-ribbon-shadow-color - ribbon shadow color
-     * @cssprop --z-book-card-compact-width - compact card custom width
-     * @cssprop --z-book-card-compact-height - compact card custom height
-     */
     interface ZBookCardDeprecated {
         /**
           * [optional] Authors
@@ -4740,10 +4452,6 @@ declare namespace LocalJSX {
      * with options for borders and a representation of multiple books with a stack of fake covers behind the original one.
      * The aspect ratio of the cover image is preserved.
      * Alignment of the image inside the container can be customized via CSS properties.
-     * @cssprop --z-book-cover-height - height of the book cover (default: `378px`). The width is calculated automatically to maintain an aspect ratio of 1.33.
-     * @cssprop --z-book-cover-border-radius - border radius of the book cover (default: `var(--border-radius)`)
-     * @cssprop --z-book-cover-stack-shift-x - the horizontal shift of each stacked cover when `multiple` is `true` (default: `8px`)
-     * @cssprop --z-book-cover-stack-shift-y - the vertical shift of each stacked cover when `multiple` is `true` (default: `12px`)
      */
     interface ZBookCover {
         /**
@@ -4838,7 +4546,7 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * **Deprecated:** Use `htmlrole` instead.
+          * Use `htmlrole` instead.
           * @deprecated This prop has been deprecated in favor of `htmlrole` for better accessibility.
           * @default ""
          */
@@ -4908,13 +4616,6 @@ declare namespace LocalJSX {
     /**
      * ZCard component.
      * The width of the card must be set by its container, following the grid indications of the design.
-     * @cssprop --aspect-ratio - Cover aspect ratio. Default: `1.62`
-     * @cssprop --z-card--border-color - Default: `var(--gray200)`
-     * @cssprop --z-card--color-cover-background - Cover color. Default: `var(--color-surface01)`
-     * @cssprop --z-card--text-background - Background color for the `text` variant. Default: `var(--color-surface01)`
-     * @cssprop --z-card--text-border-radius - Default: `none`
-     * @cssprop --z-card--text-border - Configure CSS `border`. Default: `none`
-     * @cssprop --z-card--text-padding - Configure CSS `padding`. Default: `none`
      */
     interface ZCard {
         /**
@@ -4938,8 +4639,6 @@ declare namespace LocalJSX {
     }
     /**
      * ZCarousel component.
-     * @cssprop --z-carousel-gutter - The gutter between items.
-     * @cssprop --z-carousel-items-shadow - The shadow around the items.
      */
     interface ZCarousel {
         /**
@@ -5132,9 +4831,6 @@ declare namespace LocalJSX {
     /**
      * Cover hero component.
      * Component to display a hero image with content.
-     * @cssprop --cover-hero-overlay - overlay color of the cover hero (CSS `background` property). **Default**: `linear-gradient(270deg, #0000 0%, #000000e6 100%)`.
-     * @cssprop --cover-hero-text-color - color of the text.
-     * @cssprop --cover-hero-aspect-ratio - aspect ratio to use for the image. You can pass a fraction or a number representing the ratio. **Default**: the intrinsic aspect ratio of the slotted image or `16/9`.
      */
     interface ZCoverHero {
         /**
@@ -5365,10 +5061,6 @@ declare namespace LocalJSX {
     }
     /**
      * Info reveal component.
-     * @cssprop --z-info-reveal-panel-width - Width of the info panel.
-     * @cssprop --trigger-icon-size - Size of the trigger icon for big size.
-     * @cssprop --trigger-icon-size-small - Size of the trigger icon for small size.
-     * @cssprop --trigger-icon-size-x-small - Size of the trigger icon for x-small size.
      */
     interface ZInfoReveal {
         /**
@@ -5434,7 +5126,7 @@ declare namespace LocalJSX {
          */
         "htmlAriaControls"?: string;
         /**
-          * input helper message id (optional): available for text, password, number, email, textarea - if set, it will be used to populate the aria-describedby attribute, otherwise the attribute (if present) will be populated with an auto-generated value
+          * the input aria-describedby (optional)
          */
         "htmlAriaDescribedBy"?: string;
         /**
@@ -5442,6 +5134,10 @@ declare namespace LocalJSX {
           * @default ""
          */
         "htmlAriaExpanded"?: string;
+        /**
+          * the input aria-labelledby (optional)
+         */
+        "htmlAriaLabelledby"?: string;
         /**
           * the id of the input element
           * @default `id-${randomId()}`
@@ -5582,6 +5278,82 @@ declare namespace LocalJSX {
          */
         "status"?: InputStatus;
     }
+    /**
+     * Input range component.
+     */
+    interface ZInputRange {
+        /**
+          * Whether the input range is disabled.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
+        /**
+          * The aria label of the input range. for accessibility. Not necessary if the `label` prop is set.
+         */
+        "htmlAriaLabel"?: string;
+        /**
+          * ID of the input range.
+          * @default `z-input-range-${randomId()}`
+         */
+        "htmlId"?: string;
+        /**
+          * The label of the input range. When `orientation` is set to `vertical`, the label is not visible but used as `aria-label`, unless `htmlAriaLabel` is provided.
+         */
+        "label"?: string;
+        /**
+          * The greatest value in the range of permitted values.
+          * @default 100
+         */
+        "max"?: number;
+        /**
+          * The lowest value in the range of permitted values.
+          * @default 0
+         */
+        "min"?: number;
+        /**
+          * The name of the element, used when submitting an HTML form.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the value of the input range has changed (`change` native event).
+         */
+        "onRangeChange"?: (event: ZInputRangeCustomEvent<number>) => void;
+        /**
+          * Emitted when the value of the input range is being changed (`input` native event).
+         */
+        "onRangeInput"?: (event: ZInputRangeCustomEvent<number>) => void;
+        /**
+          * The orientation of the input range.
+         */
+        "orientation"?: Orientation;
+        /**
+          * Whether to show `min` and `max` values of the input range. Only visible with the `horizontal` orientation.
+          * @default false
+         */
+        "showEdges"?: boolean;
+        /**
+          * The size of the input range. Default: `ControlSize.BIG`
+         */
+        "size"?: ControlSize.BIG;
+        /**
+          * The step value for the input range.
+          * @default 1
+         */
+        "step"?: number;
+        /**
+          * The value of the input range.
+          * @default 0
+         */
+        "value"?: number;
+        /**
+          * The position of the tooltip displaying the current value. Defaults to `top` for horizontal orientation and `left` for vertical orientation. May be necessary to adjust this prop when the input range is close to the edges of the screen, to prevent the tooltip from showing out of the screen or in an unintended position due to auto adjustment. For example, for a horizontal input range close to the top of the screen, you may want to set this prop to `bottom`.
+         */
+        "valuePosition"?: PopoverPosition.TOP | PopoverPosition.BOTTOM | PopoverPosition.LEFT | PopoverPosition.RIGHT;
+    }
     interface ZList {
         /**
           * [optional] type of the list marker for each element
@@ -5753,9 +5525,6 @@ declare namespace LocalJSX {
          */
         "width"?: number;
     }
-    /**
-     * @cssprop --z-menu-label-color - Color of the label's text.
-     */
     interface ZMenu {
         /**
           * Flag to set the active status of the menu.
@@ -5790,9 +5559,6 @@ declare namespace LocalJSX {
          */
         "verticalContext"?: boolean;
     }
-    /**
-     * @cssprop --z-menu-label-color - Color of the label's text.
-     */
     interface ZMenuDeprecated {
         /**
           * Flag to set the active status of the menu.
@@ -5865,9 +5631,6 @@ declare namespace LocalJSX {
          */
         "onOpened"?: (event: ZMenuSectionDeprecatedCustomEvent<any>) => void;
     }
-    /**
-     * @cssprop --z-modal-content-padding - padding of the modal's content. The default is 16px (--space-unit * 2)
-     */
     interface ZModal {
         /**
           * add role "alertdialog" to dialog (optional, default is false)
@@ -6153,8 +5916,6 @@ declare namespace LocalJSX {
     /**
      * Navigation tabs component.
      * To select a specific tab programmatically, set the `aria-selected` attribute to `true` on the desired tab.
-     * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.
-     * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.
      */
     interface ZNavigationTabs {
         /**
@@ -6184,9 +5945,6 @@ declare namespace LocalJSX {
     }
     /**
      * Notification bar component.
-     * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.
-     * @cssprop --z-notification--content-max-width - The max width of the notification content. Useful to align the content with other elements on the page, keeping the colored background full width. Default: 100%. Note: the content is automatically centered, so if you want to limit the width only for the slotted content, you can wrap it in a container with the desired width and leave the `z-notification` width to 100%.
-     * @cssprop --z-notification--inline-padding - The inline padding of the notification content. It can be useful to align the content when the `--z-notification--content-max-width` is set. Default: calc(var(--space-unit) * 2).
      */
     interface ZNotification {
         /**
@@ -6231,23 +5989,18 @@ declare namespace LocalJSX {
          */
         "type"?: NotificationType;
     }
-    /**
-     * @cssprop --z-offcanvas--top-space - Top offset of the offcanvas, for `overlay` variant. Useful when there is some fixed element above the offcanvas. Default: `0`.
-     * @cssprop --z-offcanvas--container-width - Width of the offcanvas for `left` and `right` direction. Default: `375px`.
-     * @cssprop --z-offcanvas--container-height - Height of the offcanvas for `up` direction. Default: `90%`.
-     */
     interface ZOffcanvas {
         /**
           * emitted when `open` prop changes
          */
-        "onCanvasOpenStatusChanged"?: (event: ZOffcanvasCustomEvent<any>) => void;
+        "onCanvasOpenStatusChanged"?: (event: ZOffcanvasCustomEvent<boolean>) => void;
         /**
           * Whether the offcanvas is open. Default: false
           * @default false
          */
         "open"?: boolean;
         /**
-          * Whether to show the backdrop when the offcanvas is open. Default: true
+          * Whether to show the backdrop when the offcanvas is open and variant is not `pushcontent`. Default: `true`
           * @default true
          */
         "showBackdrop"?: boolean;
@@ -6289,8 +6042,6 @@ declare namespace LocalJSX {
     }
     /**
      * Pagination bar component.
-     * @cssprop --z-pagination-background-color - background of the pagination's tabs. The default is --color-background
-     * @cssprop --z-pagination-background-color-hover - background of the pagination's tabs on hover. The default is --color-surface01
      */
     interface ZPagination {
         /**
@@ -6384,10 +6135,6 @@ declare namespace LocalJSX {
      * It supports various positions and can automatically adjust it based on available space, accounting for scrollable containers.
      * Notes:
      * - If positioning has an odd behavior, consider manually adjusting the size of the slotted elements (using `width`, `height`, `max-width`, `max-height`, etc...) when its content is "fluid" (like text), because it can interfere with the position calculation (for example a long text on one single line can be bigger than the available space, letting the algorithm think the popover doesn't fits).
-     * @cssprop --z-popover-theme--surface - background color of the popover.
-     * @cssprop --z-popover-theme--text - foreground color of the popover.
-     * @cssprop --z-popover-padding - padding of the popover.
-     * @cssprop --z-popover-shadow-filter - drop-shadow filter of the popover. Defaults to `drop-shadow(0 1px 2px var(--shadow-color-base))`.
      */
     interface ZPopover {
         /**
@@ -6515,11 +6262,6 @@ declare namespace LocalJSX {
          */
         "titleHtmlTag"?: string;
     }
-    /**
-     * @cssprop --z-searchbar-results-height - Max height of the results container (default: 540px)
-     * @cssprop --z-searchbar-tag-text-color - Color of tag's text (default --color-primary03);
-     * @cssprop --z-searchbar-tag-bg - Color of tag's background (default --color-hover-primary);
-     */
     interface ZSearchbar {
         /**
           * Show autocomplete results
@@ -6616,7 +6358,6 @@ declare namespace LocalJSX {
     /**
      * Section title component.
      * An optional secondary title can be put over the primary one.
-     * @cssprop --z-section-title--divider-color - Color of the divider. Use a CSS prop string like `"--red500"`. Default is `"--red500"`.
      */
     interface ZSectionTitle {
         /**
@@ -6767,7 +6508,6 @@ declare namespace LocalJSX {
     }
     /**
      * ZTable component.
-     * @cssprop --z-table--cells-padding - Padding of the cells.
      */
     interface ZTable {
         /**
@@ -6778,8 +6518,6 @@ declare namespace LocalJSX {
     }
     /**
      * Ztag component.
-     * @cssprop --z-tag-text-color - text and icon color using tokens.
-     * @cssprop --z-tag-bg - background color of the z-tag.
      */
     interface ZTag {
         /**
@@ -7060,7 +6798,6 @@ declare namespace LocalJSX {
      * Implements WCAG toolbar pattern with roving tabindex keyboard navigation.
      * Tools can be visually grouped using `z-divider` elements as separators.
      * @see https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/
-     * @cssprop --z-toolbar-columns - Number of items per row in the toolbar. Only applies on mobile viewport, when the toolbar can be displayed in a multi-row layout. Default: `6`.
      */
     interface ZToolbar {
         /**
@@ -7071,9 +6808,6 @@ declare namespace LocalJSX {
     /**
      * Tooltip component.
      * It is basically a wrapper for the `<z-popover>` component with custom configuration.
-     * @cssprop --z-tooltip-theme--surface - background color of the popover.
-     * @cssprop --z-tooltip-theme--text - foreground color of the popover.
-     * @cssprop --z-tooltip-shadow-filter - drop-shadow filter of the popover.
      */
     interface ZTooltip {
         /**
@@ -7166,6 +6900,7 @@ declare namespace LocalJSX {
         "stuck": boolean;
         "enableOffcanvas": boolean;
         "enableSearch": boolean;
+        "searchLabel": string;
         "searchPlaceholder": string;
         "searchButtonLabel": string;
         "searchString": string;
@@ -7392,6 +7127,8 @@ declare namespace LocalJSX {
         "htmlAriaControls": string;
         "htmlAriaAutocomplete": string;
         "htmlAriaActivedescendant": string;
+        "htmlAriaDescribedBy": string;
+        "htmlAriaLabelledby": string;
         "value": string;
         "disabled": boolean;
         "readonly": boolean;
@@ -7401,7 +7138,6 @@ declare namespace LocalJSX {
         "htmltitle": string;
         "status": InputStatus;
         "message": string;
-        "htmlAriaDescribedBy": string;
         "labelPosition": LabelPosition;
         "autocomplete": string;
         "role": string;
@@ -7422,6 +7158,20 @@ declare namespace LocalJSX {
         "status": InputStatus;
         "disabled": boolean;
     }
+    interface ZInputRangeAttributes {
+        "disabled": boolean;
+        "htmlAriaLabel": string;
+        "htmlId": string;
+        "label": string;
+        "max": number;
+        "min": number;
+        "orientation": Orientation;
+        "showEdges": boolean;
+        "size": ControlSize.BIG;
+        "step": number;
+        "value": number;
+        "valuePosition": PopoverPosition.TOP | PopoverPosition.BOTTOM | PopoverPosition.LEFT | PopoverPosition.RIGHT;
+    }
     interface ZListAttributes {
         "size": ListSize;
         "listType": ListType;
@@ -7813,6 +7563,7 @@ declare namespace LocalJSX {
         "z-info-reveal": Omit<ZInfoReveal, keyof ZInfoRevealAttributes> & { [K in keyof ZInfoReveal & keyof ZInfoRevealAttributes]?: ZInfoReveal[K] } & { [K in keyof ZInfoReveal & keyof ZInfoRevealAttributes as `attr:${K}`]?: ZInfoRevealAttributes[K] } & { [K in keyof ZInfoReveal & keyof ZInfoRevealAttributes as `prop:${K}`]?: ZInfoReveal[K] };
         "z-input": Omit<ZInput, keyof ZInputAttributes> & { [K in keyof ZInput & keyof ZInputAttributes]?: ZInput[K] } & { [K in keyof ZInput & keyof ZInputAttributes as `attr:${K}`]?: ZInputAttributes[K] } & { [K in keyof ZInput & keyof ZInputAttributes as `prop:${K}`]?: ZInput[K] };
         "z-input-message": Omit<ZInputMessage, keyof ZInputMessageAttributes> & { [K in keyof ZInputMessage & keyof ZInputMessageAttributes]?: ZInputMessage[K] } & { [K in keyof ZInputMessage & keyof ZInputMessageAttributes as `attr:${K}`]?: ZInputMessageAttributes[K] } & { [K in keyof ZInputMessage & keyof ZInputMessageAttributes as `prop:${K}`]?: ZInputMessage[K] };
+        "z-input-range": Omit<ZInputRange, keyof ZInputRangeAttributes> & { [K in keyof ZInputRange & keyof ZInputRangeAttributes]?: ZInputRange[K] } & { [K in keyof ZInputRange & keyof ZInputRangeAttributes as `attr:${K}`]?: ZInputRangeAttributes[K] } & { [K in keyof ZInputRange & keyof ZInputRangeAttributes as `prop:${K}`]?: ZInputRange[K] };
         "z-list": Omit<ZList, keyof ZListAttributes> & { [K in keyof ZList & keyof ZListAttributes]?: ZList[K] } & { [K in keyof ZList & keyof ZListAttributes as `attr:${K}`]?: ZListAttributes[K] } & { [K in keyof ZList & keyof ZListAttributes as `prop:${K}`]?: ZList[K] };
         "z-list-element": Omit<ZListElement, keyof ZListElementAttributes> & { [K in keyof ZListElement & keyof ZListElementAttributes]?: ZListElement[K] } & { [K in keyof ZListElement & keyof ZListElementAttributes as `attr:${K}`]?: ZListElementAttributes[K] } & { [K in keyof ZListElement & keyof ZListElementAttributes as `prop:${K}`]?: ZListElement[K] };
         "z-list-group": Omit<ZListGroup, keyof ZListGroupAttributes> & { [K in keyof ZListGroup & keyof ZListGroupAttributes]?: ZListGroup[K] } & { [K in keyof ZListGroup & keyof ZListGroupAttributes as `attr:${K}`]?: ZListGroupAttributes[K] } & { [K in keyof ZListGroup & keyof ZListGroupAttributes as `prop:${K}`]?: ZListGroup[K] };
@@ -7876,16 +7627,6 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             /**
              * Accordion component.
-             * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.
-             * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.
-             * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.
-             * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.
-             * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.
-             * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.
-             * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.
-             * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.
-             * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.
-             * @cssprop --z-accordion-label-font-weight - Font weight of the summary label. Default: `--font-sb`.
              */
             "z-accordion": LocalJSX.IntrinsicElements["z-accordion"] & JSXBase.HTMLAttributes<HTMLZAccordionElement>;
             "z-alert": LocalJSX.IntrinsicElements["z-alert"] & JSXBase.HTMLAttributes<HTMLZAlertElement>;
@@ -7903,105 +7644,21 @@ declare module "@stencil/core" {
              * ```
              */
             "z-anchor-navigation": LocalJSX.IntrinsicElements["z-anchor-navigation"] & JSXBase.HTMLAttributes<HTMLZAnchorNavigationElement>;
-            /**
-             * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
-             * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
-             * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
-             * @cssprop --app-header-text-color - Header text color. Defaults to `--color-default-text`.
-             * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
-             * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
-             */
             "z-app-header": LocalJSX.IntrinsicElements["z-app-header"] & JSXBase.HTMLAttributes<HTMLZAppHeaderElement>;
-            /**
-             * @cssprop --app-header-typography-1-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.
-             * @cssprop --app-header-typography-2-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.
-             * @cssprop --app-header-typography-3-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `32px`.
-             * @cssprop --app-header-typography-4-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `36px`.
-             * @cssprop --app-header-typography-5-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `42px`.
-             * @cssprop --app-header-typography-6-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `48px`.
-             * @cssprop --app-header-typography-7-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `54px`.
-             * @cssprop --app-header-typography-8-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `60px`.
-             * @cssprop --app-header-typography-9-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `68px`.
-             * @cssprop --app-header-typography-10-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `76px`.
-             * @cssprop --app-header-typography-11-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `84px`.
-             * @cssprop --app-header-typography-12-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `92px`.
-             * @cssprop --app-header-typography-1-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.33`.
-             * @cssprop --app-header-typography-2-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.29`.
-             * @cssprop --app-header-typography-3-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
-             * @cssprop --app-header-typography-4-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
-             * @cssprop --app-header-typography-5-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
-             * @cssprop --app-header-typography-6-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
-             * @cssprop --app-header-typography-7-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
-             * @cssprop --app-header-typography-8-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
-             * @cssprop --app-header-typography-9-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
-             * @cssprop --app-header-typography-10-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
-             * @cssprop --app-header-typography-11-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
-             * @cssprop --app-header-typography-12-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
-             * @cssprop --app-header-typography-1-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.2 / 1em)`.
-             * @cssprop --app-header-typography-2-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.4 / 1em)`.
-             * @cssprop --app-header-typography-3-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.6 / 1em)`.
-             * @cssprop --app-header-typography-4-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.8 / 1em)`.
-             * @cssprop --app-header-typography-5-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1 / 1em)`.
-             * @cssprop --app-header-typography-6-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.2 / 1em)`.
-             * @cssprop --app-header-typography-7-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.4 / 1em)`.
-             * @cssprop --app-header-typography-8-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.6 / 1em)`.
-             * @cssprop --app-header-typography-9-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.8 / 1em)`.
-             * @cssprop --app-header-typography-10-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2 / 1em)`.
-             * @cssprop --app-header-typography-11-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.2 / 1em)`.
-             * @cssprop --app-header-typography-12-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.4 / 1em)`.
-             * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
-             * @cssprop --app-header-height - Defaults to `auto`.
-             * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
-             * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.
-             * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
-             * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
-             * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-default-text`.
-             * @cssprop --app-header-title-font-size - Variable to customize the title's font size.
-             * NOTE: Only use one of the exported `--app-header-typography-*-size` as a value.
-             * Defaults to `--app-header-typography-3-size`.
-             * @cssprop --app-header-title-lineheight - Variable to customize the title's line-height.
-             * NOTE: Only use one of the exported `--app-header-typography-*-lineheight` as a value and use the same level as the one of the font size.
-             * Defaults to `--app-header-typography-3-lineheight`.
-             * @cssprop --app-header-title-letter-spacing - Variable to customize the title's letter-spacing.
-             * NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value and use the same level as the one of the font size.
-             * Defaults to `--app-header-typography-3-tracking`.
-             * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
-             */
             "z-app-header-deprecated": LocalJSX.IntrinsicElements["z-app-header-deprecated"] & JSXBase.HTMLAttributes<HTMLZAppHeaderDeprecatedElement>;
             "z-aria-alert": LocalJSX.IntrinsicElements["z-aria-alert"] & JSXBase.HTMLAttributes<HTMLZAriaAlertElement>;
             "z-avatar": LocalJSX.IntrinsicElements["z-avatar"] & JSXBase.HTMLAttributes<HTMLZAvatarElement>;
-            /**
-             * @cssprop --z-book-card-portrait-cover-height - Set custom cover height for portrait variant - Default: `378px`
-             * @cssprop --z-book-card-title-lines - Set title avilable lines - Default: `2`
-             * @cssprop --z-book-card-title-word-break - Set title word-break rule - Default: `initial`
-             * @cssprop --z-book-card-subtitle-lines - Set subtitle available lines - Default: `1`
-             * @cssprop --z-book-card-subtitle-word-break - Set subtitle word-break rule - Default: `break-all`
-             * @cssprop --z-book-card-authors-lines - Set authors available lines - Default: `1`
-             * @cssprop --z-book-card-authors-word-break - Set authors word-break rule - Default: `break-all`
-             */
             "z-book-card": LocalJSX.IntrinsicElements["z-book-card"] & JSXBase.HTMLAttributes<HTMLZBookCardElement>;
             /**
              * ZBookCardApp component
-             * @cssprop --z-book-card-app-padding-x - set left and right padding
-             * @cssprop --z-book-card-app-padding-y - set top and bottom padding
              */
             "z-book-card-app": LocalJSX.IntrinsicElements["z-book-card-app"] & JSXBase.HTMLAttributes<HTMLZBookCardAppElement>;
-            /**
-             * @cssprop --z-book-card-ribbon-background-color - ribbon backgrund color
-             * @cssprop --z-book-card-ribbon-shadow-color - ribbon shadow color
-             * @cssprop --z-book-card-compact-width - compact card custom width
-             * @cssprop --z-book-card-compact-height - compact card custom height
-             */
             "z-book-card-deprecated": LocalJSX.IntrinsicElements["z-book-card-deprecated"] & JSXBase.HTMLAttributes<HTMLZBookCardDeprecatedElement>;
             /**
              * This component displays a book cover image,
              * with options for borders and a representation of multiple books with a stack of fake covers behind the original one.
              * The aspect ratio of the cover image is preserved.
              * Alignment of the image inside the container can be customized via CSS properties.
-             * @cssprop --z-book-cover-height - height of the book cover (default: `378px`). The width is calculated automatically to maintain an aspect ratio of 1.33.
-             * @cssprop --z-book-cover-border-radius - border radius of the book cover (default: `var(--border-radius)`)
-             * @cssprop --z-book-cover-stack-shift-x - the horizontal shift of each stacked cover when `multiple` is `true` (default: `8px`)
-             * @cssprop --z-book-cover-stack-shift-y - the vertical shift of each stacked cover when `multiple` is `true` (default: `12px`)
              */
             "z-book-cover": LocalJSX.IntrinsicElements["z-book-cover"] & JSXBase.HTMLAttributes<HTMLZBookCoverElement>;
             "z-breadcrumb": LocalJSX.IntrinsicElements["z-breadcrumb"] & JSXBase.HTMLAttributes<HTMLZBreadcrumbElement>;
@@ -8010,19 +7667,10 @@ declare module "@stencil/core" {
             /**
              * ZCard component.
              * The width of the card must be set by its container, following the grid indications of the design.
-             * @cssprop --aspect-ratio - Cover aspect ratio. Default: `1.62`
-             * @cssprop --z-card--border-color - Default: `var(--gray200)`
-             * @cssprop --z-card--color-cover-background - Cover color. Default: `var(--color-surface01)`
-             * @cssprop --z-card--text-background - Background color for the `text` variant. Default: `var(--color-surface01)`
-             * @cssprop --z-card--text-border-radius - Default: `none`
-             * @cssprop --z-card--text-border - Configure CSS `border`. Default: `none`
-             * @cssprop --z-card--text-padding - Configure CSS `padding`. Default: `none`
              */
             "z-card": LocalJSX.IntrinsicElements["z-card"] & JSXBase.HTMLAttributes<HTMLZCardElement>;
             /**
              * ZCarousel component.
-             * @cssprop --z-carousel-gutter - The gutter between items.
-             * @cssprop --z-carousel-items-shadow - The shadow around the items.
              */
             "z-carousel": LocalJSX.IntrinsicElements["z-carousel"] & JSXBase.HTMLAttributes<HTMLZCarouselElement>;
             "z-chip": LocalJSX.IntrinsicElements["z-chip"] & JSXBase.HTMLAttributes<HTMLZChipElement>;
@@ -8035,9 +7683,6 @@ declare module "@stencil/core" {
             /**
              * Cover hero component.
              * Component to display a hero image with content.
-             * @cssprop --cover-hero-overlay - overlay color of the cover hero (CSS `background` property). **Default**: `linear-gradient(270deg, #0000 0%, #000000e6 100%)`.
-             * @cssprop --cover-hero-text-color - color of the text.
-             * @cssprop --cover-hero-aspect-ratio - aspect ratio to use for the image. You can pass a fraction or a number representing the ratio. **Default**: the intrinsic aspect ratio of the slotted image or `16/9`.
              */
             "z-cover-hero": LocalJSX.IntrinsicElements["z-cover-hero"] & JSXBase.HTMLAttributes<HTMLZCoverHeroElement>;
             "z-date-picker": LocalJSX.IntrinsicElements["z-date-picker"] & JSXBase.HTMLAttributes<HTMLZDatePickerElement>;
@@ -8054,25 +7699,19 @@ declare module "@stencil/core" {
             "z-info-box": LocalJSX.IntrinsicElements["z-info-box"] & JSXBase.HTMLAttributes<HTMLZInfoBoxElement>;
             /**
              * Info reveal component.
-             * @cssprop --z-info-reveal-panel-width - Width of the info panel.
-             * @cssprop --trigger-icon-size - Size of the trigger icon for big size.
-             * @cssprop --trigger-icon-size-small - Size of the trigger icon for small size.
-             * @cssprop --trigger-icon-size-x-small - Size of the trigger icon for x-small size.
              */
             "z-info-reveal": LocalJSX.IntrinsicElements["z-info-reveal"] & JSXBase.HTMLAttributes<HTMLZInfoRevealElement>;
             "z-input": LocalJSX.IntrinsicElements["z-input"] & JSXBase.HTMLAttributes<HTMLZInputElement>;
             "z-input-message": LocalJSX.IntrinsicElements["z-input-message"] & JSXBase.HTMLAttributes<HTMLZInputMessageElement>;
+            /**
+             * Input range component.
+             */
+            "z-input-range": LocalJSX.IntrinsicElements["z-input-range"] & JSXBase.HTMLAttributes<HTMLZInputRangeElement>;
             "z-list": LocalJSX.IntrinsicElements["z-list"] & JSXBase.HTMLAttributes<HTMLZListElement>;
             "z-list-element": LocalJSX.IntrinsicElements["z-list-element"] & JSXBase.HTMLAttributes<HTMLZListElementElement>;
             "z-list-group": LocalJSX.IntrinsicElements["z-list-group"] & JSXBase.HTMLAttributes<HTMLZListGroupElement>;
             "z-logo": LocalJSX.IntrinsicElements["z-logo"] & JSXBase.HTMLAttributes<HTMLZLogoElement>;
-            /**
-             * @cssprop --z-menu-label-color - Color of the label's text.
-             */
             "z-menu": LocalJSX.IntrinsicElements["z-menu"] & JSXBase.HTMLAttributes<HTMLZMenuElement>;
-            /**
-             * @cssprop --z-menu-label-color - Color of the label's text.
-             */
             "z-menu-deprecated": LocalJSX.IntrinsicElements["z-menu-deprecated"] & JSXBase.HTMLAttributes<HTMLZMenuDeprecatedElement>;
             /**
              * A component to create submenus inside the ZMenu.
@@ -8082,9 +7721,6 @@ declare module "@stencil/core" {
              * A component to create submenus inside the ZMenu.
              */
             "z-menu-section-deprecated": LocalJSX.IntrinsicElements["z-menu-section-deprecated"] & JSXBase.HTMLAttributes<HTMLZMenuSectionDeprecatedElement>;
-            /**
-             * @cssprop --z-modal-content-padding - padding of the modal's content. The default is 16px (--space-unit * 2)
-             */
             "z-modal": LocalJSX.IntrinsicElements["z-modal"] & JSXBase.HTMLAttributes<HTMLZModalElement>;
             "z-myz-card": LocalJSX.IntrinsicElements["z-myz-card"] & JSXBase.HTMLAttributes<HTMLZMyzCardElement>;
             "z-myz-card-alert": LocalJSX.IntrinsicElements["z-myz-card-alert"] & JSXBase.HTMLAttributes<HTMLZMyzCardAlertElement>;
@@ -8102,28 +7738,16 @@ declare module "@stencil/core" {
             /**
              * Navigation tabs component.
              * To select a specific tab programmatically, set the `aria-selected` attribute to `true` on the desired tab.
-             * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.
-             * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.
              */
             "z-navigation-tabs": LocalJSX.IntrinsicElements["z-navigation-tabs"] & JSXBase.HTMLAttributes<HTMLZNavigationTabsElement>;
             /**
              * Notification bar component.
-             * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.
-             * @cssprop --z-notification--content-max-width - The max width of the notification content. Useful to align the content with other elements on the page, keeping the colored background full width. Default: 100%. Note: the content is automatically centered, so if you want to limit the width only for the slotted content, you can wrap it in a container with the desired width and leave the `z-notification` width to 100%.
-             * @cssprop --z-notification--inline-padding - The inline padding of the notification content. It can be useful to align the content when the `--z-notification--content-max-width` is set. Default: calc(var(--space-unit) * 2).
              */
             "z-notification": LocalJSX.IntrinsicElements["z-notification"] & JSXBase.HTMLAttributes<HTMLZNotificationElement>;
-            /**
-             * @cssprop --z-offcanvas--top-space - Top offset of the offcanvas, for `overlay` variant. Useful when there is some fixed element above the offcanvas. Default: `0`.
-             * @cssprop --z-offcanvas--container-width - Width of the offcanvas for `left` and `right` direction. Default: `375px`.
-             * @cssprop --z-offcanvas--container-height - Height of the offcanvas for `up` direction. Default: `90%`.
-             */
             "z-offcanvas": LocalJSX.IntrinsicElements["z-offcanvas"] & JSXBase.HTMLAttributes<HTMLZOffcanvasElement>;
             "z-otp": LocalJSX.IntrinsicElements["z-otp"] & JSXBase.HTMLAttributes<HTMLZOtpElement>;
             /**
              * Pagination bar component.
-             * @cssprop --z-pagination-background-color - background of the pagination's tabs. The default is --color-background
-             * @cssprop --z-pagination-background-color-hover - background of the pagination's tabs on hover. The default is --color-surface01
              */
             "z-pagination": LocalJSX.IntrinsicElements["z-pagination"] & JSXBase.HTMLAttributes<HTMLZPaginationElement>;
             "z-panel-elem": LocalJSX.IntrinsicElements["z-panel-elem"] & JSXBase.HTMLAttributes<HTMLZPanelElemElement>;
@@ -8133,24 +7757,14 @@ declare module "@stencil/core" {
              * It supports various positions and can automatically adjust it based on available space, accounting for scrollable containers.
              * Notes:
              * - If positioning has an odd behavior, consider manually adjusting the size of the slotted elements (using `width`, `height`, `max-width`, `max-height`, etc...) when its content is "fluid" (like text), because it can interfere with the position calculation (for example a long text on one single line can be bigger than the available space, letting the algorithm think the popover doesn't fits).
-             * @cssprop --z-popover-theme--surface - background color of the popover.
-             * @cssprop --z-popover-theme--text - foreground color of the popover.
-             * @cssprop --z-popover-padding - padding of the popover.
-             * @cssprop --z-popover-shadow-filter - drop-shadow filter of the popover. Defaults to `drop-shadow(0 1px 2px var(--shadow-color-base))`.
              */
             "z-popover": LocalJSX.IntrinsicElements["z-popover"] & JSXBase.HTMLAttributes<HTMLZPopoverElement>;
             "z-range-picker": LocalJSX.IntrinsicElements["z-range-picker"] & JSXBase.HTMLAttributes<HTMLZRangePickerElement>;
             "z-result-card": LocalJSX.IntrinsicElements["z-result-card"] & JSXBase.HTMLAttributes<HTMLZResultCardElement>;
-            /**
-             * @cssprop --z-searchbar-results-height - Max height of the results container (default: 540px)
-             * @cssprop --z-searchbar-tag-text-color - Color of tag's text (default --color-primary03);
-             * @cssprop --z-searchbar-tag-bg - Color of tag's background (default --color-hover-primary);
-             */
             "z-searchbar": LocalJSX.IntrinsicElements["z-searchbar"] & JSXBase.HTMLAttributes<HTMLZSearchbarElement>;
             /**
              * Section title component.
              * An optional secondary title can be put over the primary one.
-             * @cssprop --z-section-title--divider-color - Color of the divider. Use a CSS prop string like `"--red500"`. Default is `"--red500"`.
              */
             "z-section-title": LocalJSX.IntrinsicElements["z-section-title"] & JSXBase.HTMLAttributes<HTMLZSectionTitleElement>;
             "z-select": LocalJSX.IntrinsicElements["z-select"] & JSXBase.HTMLAttributes<HTMLZSelectElement>;
@@ -8163,13 +7777,10 @@ declare module "@stencil/core" {
             "z-stepper-item": LocalJSX.IntrinsicElements["z-stepper-item"] & JSXBase.HTMLAttributes<HTMLZStepperItemElement>;
             /**
              * ZTable component.
-             * @cssprop --z-table--cells-padding - Padding of the cells.
              */
             "z-table": LocalJSX.IntrinsicElements["z-table"] & JSXBase.HTMLAttributes<HTMLZTableElement>;
             /**
              * Ztag component.
-             * @cssprop --z-tag-text-color - text and icon color using tokens.
-             * @cssprop --z-tag-bg - background color of the z-tag.
              */
             "z-tag": LocalJSX.IntrinsicElements["z-tag"] & JSXBase.HTMLAttributes<HTMLZTagElement>;
             /**
@@ -8208,15 +7819,11 @@ declare module "@stencil/core" {
              * Implements WCAG toolbar pattern with roving tabindex keyboard navigation.
              * Tools can be visually grouped using `z-divider` elements as separators.
              * @see https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/
-             * @cssprop --z-toolbar-columns - Number of items per row in the toolbar. Only applies on mobile viewport, when the toolbar can be displayed in a multi-row layout. Default: `6`.
              */
             "z-toolbar": LocalJSX.IntrinsicElements["z-toolbar"] & JSXBase.HTMLAttributes<HTMLZToolbarElement>;
             /**
              * Tooltip component.
              * It is basically a wrapper for the `<z-popover>` component with custom configuration.
-             * @cssprop --z-tooltip-theme--surface - background color of the popover.
-             * @cssprop --z-tooltip-theme--text - foreground color of the popover.
-             * @cssprop --z-tooltip-shadow-filter - drop-shadow filter of the popover.
              */
             "z-tooltip": LocalJSX.IntrinsicElements["z-tooltip"] & JSXBase.HTMLAttributes<HTMLZTooltipElement>;
             /**