@zanichelli/albe-web-components 19.2.12-rc3 → 19.2.12

package/dist/types/components/z-anchor-navigation/index.d.ts

@@ -33,7 +33,7 @@ export declare class ZAnchorNavigation implements ComponentInterface {
     collapsedLabel: string;
     /**
      * Explicitly collapse anchor navigation.
-     * If false will collapse automatically only on mobile.
+     * If false, it will collapse automatically only on mobile.
      */
     isCollapsed: boolean;
     /**

package/dist/types/components/z-app-header/index.d.ts

@@ -5,12 +5,6 @@ import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
  * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.
  * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.
  * @slot product-logo - To insert the product logo, it should be used with an img tag.
- * @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`.
  */
 export declare class ZAppHeader implements ComponentInterface {
     hostElement: HTMLZAppHeaderElement;
@@ -27,6 +21,10 @@ export declare class ZAppHeader implements ComponentInterface {
      * Enable the search bar.
      */
     enableSearch: boolean;
+    /**
+     * Visible label for the search bar.
+     */
+    searchLabel?: string;
     /**
      * Placeholder text for the search bar.
      */

package/dist/types/components/z-book-cover/index.d.ts

@@ -6,10 +6,6 @@ import { ComponentInterface } from "../../stencil-public-runtime";
  * Alignment of the image inside the container can be customized via CSS properties.
  *
  * @slot coverOverlay - Content to be displayed over the cover image (e.g. a label). The overlay is positioned at the bottom of the cover. Has some default styling (such as the colored background) that can be customized via CSS.
- * @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`)
  */
 export declare class ZBookCover implements ComponentInterface {
     /** URL of the cover image. */

package/dist/types/components/z-button/index.d.ts

@@ -8,7 +8,7 @@ export declare class ZButton implements ComponentInterface {
     /** defines a string value that labels the internal interactive element. Used for accessibility. */
     ariaLabel: string | undefined;
     /**
-     * **Deprecated:** Use `htmlrole` instead.
+     * Use `htmlrole` instead.
      * @deprecated This prop has been deprecated in favor of `htmlrole` for better accessibility.
      */
     role: string;

package/dist/types/components/z-card/index.d.ts

@@ -4,13 +4,6 @@ import { CardVariant } from "../../beans";
  * 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`
  * @slot cover - Image cover
  * @slot metadata - Metadata
  * @slot title - Using an `<a>` tag here will make the whole card clickable as if the link was wrapping it.
@@ -23,7 +16,7 @@ export declare class ZCard implements ComponentInterface {
      * Can be one of "text", "border", "shadow", "overlay".
      * Leave it undefined for the default card.
      */
-    variant: CardVariant;
+    variant?: CardVariant;
     /** Name of the icon to place over the image cover */
     coverIcon: string;
     /** Enable shadow. Default: false. */

package/dist/types/components/z-carousel/index.d.ts

@@ -2,8 +2,6 @@ import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 import { CarouselArrowsPosition, CarouselProgressMode } from "../../beans";
 /**
  * ZCarousel component.
- * @cssprop --z-carousel-gutter - The gutter between items.
- * @cssprop --z-carousel-items-shadow - The shadow around the items.
  * @slot - Carousel items. Use `<li>` elements inside this slot.
  */
 export declare class ZCarousel implements ComponentInterface {

package/dist/types/components/z-cover-hero/index.d.ts

@@ -7,9 +7,6 @@ import { CoverHeroContentPosition, CoverHeroVariant } from "../../beans";
  * @slot cover - slot for the cover image.
  * @slot content - slot for the content.
  * @slot info-reveal - slot for the info reveal.
- * @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`.
  */
 export declare class ZCoverHero implements ComponentInterface {
     host: HTMLZCoverHeroElement;

package/dist/types/components/z-info-reveal/index.d.ts

@@ -4,10 +4,6 @@ import { ControlSize, InfoRevealPosition } from "../../beans";
  * Info reveal component.
  *
  * @slot - content of the info panel.
- * @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.
  */
 export declare class ZInfoReveal implements ComponentInterface {
     /** Name of the icon for the trigger button */

package/dist/types/components/z-menu/index.d.ts

@@ -3,7 +3,6 @@ import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
  * @slot - Menu label
  * @slot header - Header to display as the first entry of the open menu.
  * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Set the `data-active` HTML attribute on the element to highlight it (`active` also works but `data-active` is preferable). Use `z-menu-section` for submenus.
- * @cssprop --z-menu-label-color - Color of the label's text.
  */
 export declare class ZMenu implements ComponentInterface {
     host: HTMLZMenuElement;

package/dist/types/components/z-modal/index.d.ts

@@ -1,10 +1,10 @@
-import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { EventEmitter } from "../../stencil-public-runtime";
+import { ReactiveControllerHost } from "../../utils/reactive-controller";
 /**
  * @slot modalCloseButton - slot for custom close button
  * @slot modalContent - slot for the content of the modal
- * @cssprop --z-modal-content-padding - padding of the modal's content. The default is 16px (--space-unit * 2)
  */
-export declare class ZModal implements ComponentInterface {
+export declare class ZModal extends ReactiveControllerHost {
     /** unique id */
     modalid: string;
     /** title text (optional) */
@@ -22,6 +22,7 @@ export declare class ZModal implements ComponentInterface {
     /** if true, the page scroll is locked when the modal is open (optional, default is true) */
     lockPageScroll?: boolean;
     private dialog;
+    private focusTrapController;
     host: HTMLZModalElement;
     /** emitted on close button click, returns modalid */
     modalClose: EventEmitter;
@@ -39,14 +40,6 @@ export declare class ZModal implements ComponentInterface {
     open(): Promise<void>;
     /** close modal */
     close(): Promise<void>;
-    /**
-     * Get a list of focusable elements in the dialog.
-     * Remove elements with `display: none` from the list, because they're not focusable.
-     *
-     * N.B. The list is built on the assumption that elements inside shadow root are placed ALL before the `modalContent` slot.
-     * Adding focusable elements after the `modalContent` slot would break the order of elements in the list.
-     */
-    private get focusableElements();
     handleKeyDown(e: KeyboardEvent): void;
     private closeButtonSlot;
     private handleEscape;

package/dist/types/components/z-navigation-tabs/index.d.ts

@@ -4,8 +4,6 @@ import { NavigationTabsOrientation, NavigationTabsSize } from "../../beans";
  * Navigation tabs component.
  * To select a specific tab programmatically, set the `aria-selected` attribute to `true` on the desired tab.
  * @slot - Main slot. Use `<button>` or `<a>` tags as children.
- * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.
- * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.
  */
 export declare class ZNavigationTabs implements ComponentInterface {
     /**

package/dist/types/components/z-notification/index.d.ts

@@ -3,9 +3,6 @@ import { NotificationType } from "../../beans";
 /**
  * Notification bar component.
  * @slot - The text of the notification.
- * @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).
  */
 export declare class ZNotification implements ComponentInterface {
     /** Name of the icon on the left of the content */

package/dist/types/components/z-offcanvas/index.d.ts

@@ -1,12 +1,11 @@
-import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { EventEmitter } from "../../stencil-public-runtime";
 import { OffCanvasVariant, TransitionDirection } from "../../beans";
+import { ReactiveControllerHost } from "../../utils/reactive-controller";
 /**
  * @slot canvasContent - Slot for the offcanvas content.
- * @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%`.
  */
-export declare class ZOffcanvas implements ComponentInterface {
+export declare class ZOffcanvas extends ReactiveControllerHost {
+    host: HTMLZOffcanvasElement;
     /**
      * Offcanvas variant.
      * - `overlay`: The offcanvas covers the page content putting an overlay.
@@ -25,53 +24,29 @@ export declare class ZOffcanvas implements ComponentInterface {
     /**
      * Skip the opening transition when the offcanvas is already open at the first render.
      * @deprecated This prop is not needed anymore, the component will automatically skip the transition
-     *  when it starts with `open` set to `true`. Only exists for Typescript backward compatibility.
+     * when it starts with `open` set to `true`. Only exists for Typescript backward compatibility.
      */
     skipLoadAnimation: 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` */
     showBackdrop: boolean;
     /** emitted when `open` prop changes */
-    canvasOpenStatusChanged: EventEmitter;
+    canvasOpenStatusChanged: EventEmitter<boolean>;
     /** Used to skip the opening transition when the offcanvas is already open at the first render. */
     private skipAnimation;
-    private canvasContainer;
     private canvasContent;
-    private allFocusableElements;
-    private previouslyFocusedElement;
+    private focusTrapController;
     /**
-     * Returns all focusable elements inside the offcanvas content.
-     * Elements are considered focusable if:
-     * - They are not disabled
-     * - They are visible in the layout
-     * - They have a non-negative tabIndex or an explicit tabindex="0"
-     */
-    private getFocusableElements;
-    /**
-     * Keeps keyboard navigation trapped inside the offcanvas when it is open.
-     * Implements circular tab navigation:
-     * - If Shift + Tab is pressed on the first focusable element, move focus to the last.
-     * - If Tab is pressed on the last focusable element, move focus to the first.
-     */
-    private trapFocus;
-    /**
-     * Handles keyboard interactions when the offcanvas is open.
-     * - Closes the offcanvas when the Escape key is pressed.
-     * - Traps focus inside the component when the Tab key is used.
+     * Handles Escape and wrap-around Tab navigation at the focus boundaries.
      */
     handleKeyDown(event: KeyboardEvent): void;
     /**
-     * Stop the event default behavior and propagation when the offcanvas is closed.
+     * Lock the page scroll when the offcanvas is open and unlock it when the offcanvas is closed.
      */
-    stopEvent(event: Event): void;
-    /**
-     * Hide the body overflow when the offcanvas is open.
-     */
-    private handlePageOverflow;
+    private handlePageScroll;
     onOpenChanged(): void;
     componentWillLoad(): void;
-    componentDidLoad(): void;
     componentDidRender(): void;
-    connectedCallback(): void;
+    componentDidLoad(): void;
     disconnectedCallback(): void;
     render(): HTMLZOffcanvasElement;
 }

package/dist/types/components/z-pagination/index.d.ts

@@ -1,8 +1,6 @@
 import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 /**
  * 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
  */
 export declare class ZPagination implements ComponentInterface {
     host: HTMLZPaginationElement;

package/dist/types/components/z-popover/index.d.ts

@@ -7,11 +7,6 @@ import { PopoverPosition } from "../../beans";
  *
  * 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))`.
  */
 export declare class ZPopover implements ComponentInterface {
     /**

package/dist/types/components/z-searchbar/index.d.ts

@@ -1,10 +1,5 @@
 import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 import { ButtonVariant, ControlSize, SearchbarItem } from "../../beans";
-/**
- * @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);
- */
 export declare class ZSearchbar implements ComponentInterface {
     host: HTMLZSearchbarElement;
     /** The id of the searchbar element */

package/dist/types/components/z-tag/index.d.ts

@@ -2,8 +2,6 @@ import { ComponentInterface } from "../../stencil-public-runtime";
 /**
  * Ztag component.
  * @slot - The text of the z-tag.
- * @cssprop --z-tag-text-color - text and icon color using tokens.
- * @cssprop --z-tag-bg - background color of the z-tag.
  */
 export declare class ZTag implements ComponentInterface {
     host: HTMLZTagElement;

package/dist/types/components/z-toolbar/index.d.ts

@@ -6,7 +6,6 @@ import { ZToolCustomEvent } from "../../components";
  * 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`.
  */
 export declare class ZToolbar implements ComponentInterface {
     hostElement: HTMLZToolbarElement;

package/dist/types/components/z-tooltip/index.d.ts

@@ -3,10 +3,6 @@ import { PopoverPosition } from "../../beans";
 /**
  * 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.
  */
 export declare class ZTooltip implements ComponentInterface {
     /** Tooltip position. */