@zanichelli/albe-web-components 19.2.3-RC1 → 19.2.4

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

@@ -1,6 +1,6 @@
-import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { EventEmitter } from "../../stencil-public-runtime";
 import { ComboItem, ControlSize } from "../../beans";
-export declare class ZCombobox implements ComponentInterface {
+export declare class ZCombobox {
     element: HTMLZComboboxElement;
     /** input unique id */
     inputid: string;

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

@@ -1,4 +1,3 @@
-import { ComponentInterface } from "../../stencil-public-runtime";
 import { CoverHeroContentPosition, CoverHeroVariant } from "../../beans";
 /**
  * Cover hero component.
@@ -11,7 +10,7 @@ import { CoverHeroContentPosition, CoverHeroVariant } from "../../beans";
  * @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 {
+export declare class ZCoverHero {
     host: HTMLZCoverHeroElement;
     /**
      * Cover hero variant. Can be `OVERLAY` or `STACKED`.

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

@@ -1,6 +1,5 @@
-import { ComponentInterface } from "../../stencil-public-runtime";
 import { DividerOrientation, DividerSize } from "../../beans";
-export declare class ZDivider implements ComponentInterface {
+export declare class ZDivider {
     /** [optional] Divider size */
     size?: DividerSize;
     /** [optional] Divider color */

package/dist/types/components/z-ghost-loading/index.d.ts

@@ -1,4 +1,3 @@
-import { ComponentInterface } from "../../stencil-public-runtime";
-export declare class ZGhostLoading implements ComponentInterface {
+export declare class ZGhostLoading {
     render(): HTMLZGhostLoadingElement;
 }

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

@@ -1,9 +1,8 @@
-import { ComponentInterface } from "../../stencil-public-runtime";
 /**
  * Component to render an SVG icon from the internal icon set, selected by `name`.
  * This component automatically recognizes icons that have an indicator (e.g. `bg-color`, `font-color`, etc.), that can be filled with a custom color via the `indicatorColor` prop.
  */
-export declare class ZIcon implements ComponentInterface {
+export declare class ZIcon {
     /** Icon name */
     name: string;
     /** Icon height (optional) */

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

@@ -1,8 +1,8 @@
-import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { EventEmitter } from "../../stencil-public-runtime";
 /**
  * @slot content - set the info box content
  */
-export declare class ZInfoBox implements ComponentInterface {
+export declare class ZInfoBox {
     /** info box unique id */
     boxid: string;
     /** render close icon flag */

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

@@ -1,4 +1,3 @@
-import { ComponentInterface } from "../../stencil-public-runtime";
 import { ControlSize, InfoRevealPosition } from "../../beans";
 /**
  * Info reveal component.
@@ -9,7 +8,7 @@ import { ControlSize, InfoRevealPosition } from "../../beans";
  * @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 {
+export declare class ZInfoReveal {
     /** Name of the icon for the trigger button */
     icon?: string;
     /**

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

@@ -1,6 +1,6 @@
-import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { EventEmitter } from "../../stencil-public-runtime";
 import { ControlSize, InputStatus, InputType, LabelPosition } from "../../beans";
-export declare class ZInput implements ComponentInterface {
+export declare class ZInput {
     hostElement: HTMLZInputElement;
     /** the id of the input element */
     htmlid: string;
@@ -38,6 +38,8 @@ export declare class ZInput implements ComponentInterface {
     status?: InputStatus;
     /** input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed */
     message?: string | boolean;
+    /** 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 */
+    htmlAriaDescribedBy?: string;
     /** the input label position: available for checkbox, radio */
     labelPosition?: LabelPosition;
     /** the input has autocomplete option (optional): available for text, password, number, email */
@@ -93,6 +95,7 @@ export declare class ZInput implements ComponentInterface {
     private getNumberAttributes;
     private getPatternAttribute;
     private getRoleAttribute;
+    private inputHasMessage;
     private getAriaAttrubutes;
     private getFocusBlurAttributes;
     private renderInputText;

package/dist/types/components/z-input-message/index.d.ts

@@ -1,8 +1,11 @@
-import { ComponentInterface } from "../../stencil-public-runtime";
 import { InputStatus } from "../../beans";
-export declare class ZInputMessage implements ComponentInterface {
+export declare class ZInputMessage {
     /** input helper message */
     message: string;
+    /** the id of the message element (optional)*/
+    htmlId?: string;
+    /** the role to set when both the message and the status are populated (optional)*/
+    htmlRole: null | string;
     /** input status (optional) */
     status?: InputStatus;
     /** input disabled status (optional) */

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

@@ -1,5 +1,4 @@
-import { ComponentInterface } from "../../stencil-public-runtime";
-export declare class ZLogo implements ComponentInterface {
+export declare class ZLogo {
     /** image width */
     width?: number;
     /** image height */

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

@@ -1,11 +1,11 @@
-import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { 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 {
+export declare class ZMenu {
     host: HTMLZMenuElement;
     /** Flag to set the active status of the menu. */
     active?: boolean;

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

@@ -1,10 +1,10 @@
-import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { EventEmitter } from "../../stencil-public-runtime";
 /**
  * A component to create submenus inside the ZMenu.
  * @slot - Label of the menu section.
  * @slot section - Single entry of the menu section. Set the same slot name to different elements to put many of them. Add the `data-active` attribute to a slotted element to highlight it (`active` also works but `data-active` is preferable).
  */
-export declare class ZMenuSection implements ComponentInterface {
+export declare class ZMenuSection {
     host: HTMLZMenuSectionElement;
     /** Active state */
     active?: boolean;

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";
 /**
  * @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 {
     /** unique id */
     modalid: string;
     /** title text (optional) */

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

@@ -1,4 +1,4 @@
-import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { EventEmitter } from "../../stencil-public-runtime";
 import { NavigationTabsOrientation, NavigationTabsSize } from "../../beans";
 /**
  * Navigation tabs component.
@@ -7,7 +7,7 @@ import { NavigationTabsOrientation, NavigationTabsSize } from "../../beans";
  * @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 {
+export declare class ZNavigationTabs {
     /**
      * Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.
      */

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

@@ -1,11 +1,12 @@
-import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { EventEmitter } from "../../stencil-public-runtime";
 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.
  */
-export declare class ZNotification implements ComponentInterface {
+export declare class ZNotification {
     /** Name of the icon on the left of the content */
     contenticonname?: string;
     /** Action button text */
@@ -21,6 +22,8 @@ export declare class ZNotification implements ComponentInterface {
     showshadow?: boolean;
     /** Enable sticky notification bar. */
     sticky?: boolean;
+    /** Border position */
+    borderposition?: "top" | "bottom";
     /** Call to action clicked */
     notificationAction: EventEmitter;
     private handleActionButtonClick;

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

@@ -1,10 +1,11 @@
 import { type ZNotification } from ".";
 import { NotificationType } from "../../beans";
+import { CSSVarsArguments } from "../../utils/storybook-utils";
 import "./index";
 import "./index.stories.css";
 type ZNotificationStoriesArgs = ZNotification & {
     notificationText: string;
-};
+} & CSSVarsArguments<"--z-notification--content-max-width">;
 declare const StoryMeta: {
     title: string;
     component: string;
@@ -17,6 +18,7 @@ declare const StoryMeta: {
         };
     };
     args: {
+        "--z-notification--content-max-width": string;
         contenticonname: string;
         actiontext: string;
         showclose: false;
@@ -28,6 +30,15 @@ export default StoryMeta;
 export declare const Default: {
     render: (args: ZNotificationStoriesArgs) => import("lit-html").TemplateResult<1>;
 };
+/**
+ * To use the border top variant set the `borderposition` property to `top`.
+ */
+export declare const BorderTop: {
+    args: {
+        borderposition: "top";
+    };
+    render: (args: ZNotificationStoriesArgs) => import("lit-html").TemplateResult<1>;
+};
 export declare const LongText: {
     render: (args: ZNotificationStoriesArgs) => import("lit-html").TemplateResult<1>;
 };

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

@@ -1,4 +1,4 @@
-import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { EventEmitter } from "../../stencil-public-runtime";
 import { OffCanvasVariant, TransitionDirection } from "../../beans";
 /**
  * @slot canvasContent - Slot for the offcanvas content.
@@ -6,7 +6,7 @@ import { OffCanvasVariant, TransitionDirection } from "../../beans";
  * @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 {
     /**
      * Offcanvas variant.
      * - `overlay`: The offcanvas covers the page content putting an overlay.

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

@@ -1,10 +1,10 @@
-import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { 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 {
+export declare class ZPagination {
     host: HTMLZPaginationElement;
     /** Pagination label placed before the bar. */
     label?: string;

package/dist/types/components/z-panel-elem/index.d.ts

@@ -1,8 +1,7 @@
-import { ComponentInterface } from "../../stencil-public-runtime";
 /**
  * @slot `descrSlotName` - description content
  */
-export declare class ZPanelElem implements ComponentInterface {
+export declare class ZPanelElem {
     /** html element id (optional) */
     elemid?: string;
     /** image url source (optional) */

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

@@ -1,4 +1,4 @@
-import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { EventEmitter } from "../../stencil-public-runtime";
 import { PopoverPosition } from "../../beans";
 /**
  * Popover component.
@@ -13,7 +13,7 @@ import { PopoverPosition } from "../../beans";
  * @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 {
+export declare class ZPopover {
     /**
      * The preferred position to render the popover.
      * The popover will automatically search another position if not enough space is available for the preferred position.

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

@@ -1,9 +1,8 @@
-import { ComponentInterface } from "../../stencil-public-runtime";
 /**
  * @slot tags - slot containing the descriptors for the opera variant
  * @slot volumes - slot containing the volume count to be displayed in the opera variant
  */
-export declare class ZResultCard implements ComponentInterface {
+export declare class ZResultCard {
     hostElement: HTMLZResultCardElement;
     /** The title of the card. */
     cardTitle: string;

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

@@ -1,11 +1,11 @@
-import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { 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 {
+export declare class ZSearchbar {
     /** the id of the searchbar element */
     htmlid: string;
     /** Prevent submit action */

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

@@ -1,6 +1,6 @@
-import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { EventEmitter } from "../../stencil-public-runtime";
 import { ControlSize, InputStatus, SelectItem } from "../../beans";
-export declare class ZSelect implements ComponentInterface {
+export declare class ZSelect {
     host: HTMLZSelectElement;
     /** the id of the input element */
     htmlid: string;

package/dist/types/components/z-skip-to-content/index.d.ts

@@ -1,9 +1,8 @@
-import { ComponentInterface } from "../../stencil-public-runtime";
 import { SkipToContentLink, ThemeVariant } from "../../beans";
 /**
  * Component short description.
  */
-export declare class ZSkipToContent implements ComponentInterface {
+export declare class ZSkipToContent {
     /** Graphical variant: `dark`, `light`. */
     variant?: ThemeVariant;
     /** Array to fill link into skip-content */

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

@@ -1,7 +1,6 @@
-import { ComponentInterface } from "../../stencil-public-runtime";
 /**
  * @slot - slot for `z-stepper-item`
  */
-export declare class ZStepper implements ComponentInterface {
+export declare class ZStepper {
     render(): HTMLSlotElement;
 }

package/dist/types/components/z-stepper-item/index.d.ts

@@ -1,5 +1,4 @@
-import { ComponentInterface } from "../../stencil-public-runtime";
-export declare class ZStepperItem implements ComponentInterface {
+export declare class ZStepperItem {
     /**
      * The number of the step item.
      */

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

@@ -1,11 +1,10 @@
-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 {
+export declare class ZTag {
     host: HTMLZTagElement;
     /** [optional] Tag icon */
     icon?: string;

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

@@ -1,11 +1,11 @@
-import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { EventEmitter } from "../../stencil-public-runtime";
 import { ToastNotification, ToastNotificationTransition } from "../../beans";
 /**
  * ZToastNotification component.
  * @slot message - Custom HTML message
  * @slot button - Custom button
  */
-export declare class ZToastNotification implements ComponentInterface {
+export declare class ZToastNotification {
     hostElement: HTMLZToastNotificationElement;
     /** toast notification's title */
     heading?: string;

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

@@ -1,6 +1,5 @@
-import { ComponentInterface } from "../../stencil-public-runtime";
 import { ToastNotificationPosition } from "../../beans";
-export declare class ZToastNotificationList implements ComponentInterface {
+export declare class ZToastNotificationList {
     hostElement: HTMLZToastNotificationListElement;
     /**Set the position of toast notification list - top-left, top-centre, top-right, bottom-left, bottom-centre, bottom-right */
     position: ToastNotificationPosition;

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

@@ -1,5 +1,5 @@
-import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
-export declare class ZToggleButton implements ComponentInterface {
+import { EventEmitter } from "../../stencil-public-runtime";
+export declare class ZToggleButton {
     /** label text */
     label: string;
     /** disabled status flag (optional) */

package/dist/types/components/z-toggle-switch/index.d.ts

@@ -1,6 +1,6 @@
-import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { EventEmitter } from "../../stencil-public-runtime";
 import { LabelPosition } from "../../beans";
-export declare class ZToggleSwitch implements ComponentInterface {
+export declare class ZToggleSwitch {
     /** Disabled flag */
     disabled?: boolean;
     /** Label position */

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

@@ -1,4 +1,4 @@
-import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { EventEmitter } from "../../stencil-public-runtime";
 import { ColorPickerPalette, PopoverPosition } from "../../beans";
 import { ZColorPickerCustomEvent, ZToolCustomEvent } from "../../components";
 import { IconName } from "../../constants/iconset";
@@ -6,7 +6,7 @@ import { IconName } from "../../constants/iconset";
  * ZTool component. Can display an icon, an optional tooltip (mainly for hints about the tool's functionality), and can contain a nested `z-toolbar` as a submenu that opens on click.
  * @slot - Optional slot for nested content (e.g., a secondary `z-toolbar`) that appears when the tool is open/clicked.
  */
-export declare class ZTool implements ComponentInterface {
+export declare class ZTool {
     hostElement: HTMLZToolElement;
     /** Tool icon */
     icon: IconName;

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

@@ -1,4 +1,3 @@
-import { ComponentInterface } from "../../stencil-public-runtime";
 import { ZToolCustomEvent } from "../../components";
 /**
  * ZToolbar component. This component mainly serves as a container for `z-tool` elements, but can also be nested inside a `z-tool` to create submenus.
@@ -8,7 +7,7 @@ import { ZToolCustomEvent } from "../../components";
  *
  * @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 {
+export declare class ZToolbar {
     hostElement: HTMLZToolbarElement;
     /** Accessible label for the toolbar. */
     htmlAriaLabel?: string;

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

@@ -1,4 +1,4 @@
-import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { EventEmitter } from "../../stencil-public-runtime";
 import { PopoverPosition } from "../../beans";
 /**
  * Tooltip component.
@@ -8,7 +8,7 @@ import { PopoverPosition } from "../../beans";
  * @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 {
+export declare class ZTooltip {
     /** Tooltip position. */
     position: PopoverPosition;
     /** Enable tooltip dark mode. */

package/dist/types/components/z-visually-hidden/index.d.ts

@@ -1,4 +1,3 @@
-import { ComponentInterface } from "../../stencil-public-runtime";
-export declare class ZVisuallyHidden implements ComponentInterface {
+export declare class ZVisuallyHidden {
     render(): HTMLSlotElement;
 }