@zanichelli/albe-web-components 4.1.0 → 4.2.0

package/dist/types/components/date-picker/z-range-picker/index.d.ts

@@ -0,0 +1,43 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { ZDatePickerMode, ZDatePickerPosition } from "../../../beans";
+export declare class ZRangePicker {
+  element: HTMLElement;
+  /** unique id */
+  rangePickerId: string;
+  /** first z-input aria label */
+  firstAriaLabel?: string;
+  /** first z-input label */
+  firstLabel?: string;
+  /** second z-input aria label */
+  secondAriaLabel?: string;
+  /** second z-input label */
+  secondLabel?: string;
+  /** [Optional] datepicker mode: date, datetime, only months */
+  mode: ZDatePickerMode;
+  flatpickrPosition: ZDatePickerPosition;
+  activeInput: string;
+  private flatpickrInstance;
+  private flatpickrInstance2;
+  /** emitted when date changes, returns an array with the two selected dates */
+  dateSelect: EventEmitter;
+  handleClick(): void;
+  handleKeyDown(ev: KeyboardEvent): void;
+  /** Set background color before or after first selected date, before selecting the second one */
+  onMouseOver(e: CustomEvent): void;
+  componentDidLoad(): void;
+  onDateSelect(selectedDates: any, instance: any): void;
+  getDate(date: any): string;
+  printDate(firstDate: any, lastDate: any): void;
+  /** Replace month word to month number */
+  parseDate(date: any): Date;
+  /** Get the current focused input, first or last */
+  getFocusedInput(): void;
+  /** Set current month after flatpickr opened */
+  getCurrentMonth(): void;
+  /** Set style of the days between the two selected dates */
+  setRangeStyle(): void;
+  /** Set style of the days between first selected date and hovered date */
+  setRangeHoverStyle(e: any, flatpickr: any, calendar: any): void;
+  onStopTyping(value: any): void;
+  render(): any;
+}

package/dist/types/components/file-upload/z-file/index.d.ts

@@ -1,11 +1,11 @@
 import { EventEmitter } from "../../../stencil-public-runtime";
-import "./index";
 export declare class ZFile {
   private icon;
   private ellipsis?;
+  private chip?;
   fileNumber: number;
-  allowTooltip: boolean;
-  tooltipVisible: boolean;
+  allowPopover: boolean;
+  popoverVisible: boolean;
   el: HTMLElement;
   /** Emitted when a z-file component is removed from the DOM */
   removeFile: EventEmitter;

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

@@ -1,12 +1,17 @@
-import { EventEmitter } from "../../../stencil-public-runtime";
-import { TooltipPosition } from "../../../beans/index";
+import { PopoverPositions } from "../../../beans";
+/**
+ * Tooltip component.
+ * It is basically a wrapper for the `<z-popover>` component with custom configuration.
+ *
+ * @cssprop --z-popover-theme--surface - background color of the popover.
+ * @cssprop --z-popover-theme--text - foreground color of the popover.
+ * @cssprop --z-popover-shadow-filter - drop-shadow filter of the popover.
+ */
 export declare class ZTooltip {
-  /** Content text.
-   * @deprecated
-   */
-  content: string;
   /** Tooltip position. */
-  type: TooltipPosition;
+  position: PopoverPositions;
+  /** Enable tooltip dark mode. */
+  dark: boolean;
   /**
    * The open state of the tooltip.
    */
@@ -15,27 +20,7 @@ export declare class ZTooltip {
    * The selector or the element bound with the tooltip.
    */
   bindTo?: string | HTMLElement;
-  /**
-   * The current position of the tooltip.
-   */
-  position?: TooltipPosition;
-  /**
-   * Position change event.
-   */
-  positionChange: EventEmitter;
-  host: HTMLElement;
-  private animationFrameRequestId?;
-  validateType(newValue: any): void;
-  onPositionChange(): void;
-  disconnectedCallback(): void;
-  /**
-   * Setup tooltip behaviors on opening.
-   */
-  onOpen(): void;
-  /**
-   * Set the position of the tooltip.
-   */
-  private setPosition;
-  componentWillLoad(): void;
+  popover: HTMLZPopoverElement;
+  onPopoverOpenChange(): void;
   render(): any;
 }

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

@@ -1,8 +1,8 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { PopoverPosition } from "../../beans";
+import { PopoverPositions } from "../../beans";
 export declare class ZContextualMenu {
   /**
-   *  elements of ZContextualMenu
+   * Elements of ZContextualMenu
    */
   elements?: string;
   /**
@@ -12,11 +12,15 @@ export declare class ZContextualMenu {
   /**
    * [optional] Sets the position of the popover
    */
-  popoverPosition?: PopoverPosition;
+  popoverPosition?: PopoverPositions;
+  private triggerButton?;
+  private popover?;
   /** remove filter click event, returns filterid */
   clickContextualMenu: EventEmitter;
   private jsonElements;
   componentWillRender(): void;
+  componentDidLoad(): void;
   showIcon(): boolean;
-  render(): any;
+  togglePopover(): void;
+  render(): any[];
 }

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

@@ -1,33 +1,62 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { PopoverPosition, PopoverBorderRadius, PopoverShadow } from "../../beans";
+import { PopoverPositions } from "../../beans";
+/**
+ * Popover component.
+ *
+ * @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 {
-  /** [optional] Popover position */
-  position?: PopoverPosition;
-  /** [optional] Background color token for popover */
-  backgroundColor?: string;
-  /** [optional] Border radius token for popover */
-  borderRadius?: PopoverBorderRadius;
-  /** [optional] Box shadow token for popover */
-  boxShadow?: PopoverShadow;
-  /** [optional] Show or hide arrow */
-  showArrow?: boolean;
-  /** [optional] Sets padding for Popover container */
-  padding?: string;
-  isVisible: boolean;
-  popoverPosition: PopoverPosition;
-  /** Emitted on popover click, returns isVisible state */
-  triggerClick: EventEmitter;
-  emitTriggerClick(): void;
-  private popoverElem;
-  /**
-   * Constructor.
-   */
-  constructor();
-  openPopover(): void;
-  closePopover(): void;
-  closePopoverWithKeyboard(e: any): void;
-  handleClick(event: any): void;
-  handleKeyDown(event: any): void;
+  /** Popover position. */
+  position: PopoverPositions;
+  /**
+   * The open state of the popover.
+   */
+  open: boolean;
+  /**
+   * The selector or the element bound with the popover.
+   */
+  bindTo?: string | HTMLElement;
+  /**
+   * Whether to show popover's arrow.
+   */
+  showArrow: boolean;
+  /**
+   * Whether to center the popup on the main side (according to "position").
+   */
+  center: boolean;
+  /**
+   * Whether the popover should be closed when the user clicks outside of it or hit "ESC".
+   */
+  closable: boolean;
+  /**
+   * The current position of the popover.
+   */
+  currentPosition?: PopoverPositions;
+  /**
+   * Position change event.
+   */
+  positionChange: EventEmitter;
+  /**
+   * Open change event.
+   */
+  openChange: EventEmitter;
+  host: HTMLElement;
+  private animationFrameRequestId?;
+  closePopoverWithKeyboard(e: KeyboardEvent): void;
   handleOutsideClick(e: any): void;
+  validatePosition(newValue: any): void;
+  /**
+   * Setup popover behaviors on opening.
+   */
+  onOpen(): void;
+  disconnectedCallback(): void;
+  /**
+   * Set the position of the popover.
+   */
+  private setPosition;
+  componentWillLoad(): void;
   render(): any;
 }

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

@@ -13,7 +13,8 @@ export declare class ZTableHeader {
   /** [Optional] Default sort order */
   defaultSortDirection?: SortDirection;
   sortDirection: SortDirection;
-  isMenuOpened: boolean;
+  private popover?;
+  private triggerButton?;
   constructor();
   /** [Optional] callback for sorting */
   sort: EventEmitter;

package/dist/types/components.d.ts

@@ -5,8 +5,8 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { AlertTypes, LicenseTypeEnum, MenuItem as MenuItem1, TooltipPosition } from "./beans/index";
-import { AvatarSize, ButtonSizeEnum, ButtonVariantBean, ButtonVariantEnum, CardVariants, ComboItemBean, DictionaryData, DividerOrientation, DividerSize, ExpandableListButtonAlign, ExpandableListStyle, HeaderUserData, InputStatusBean, InputTypeBean, LabelPosition, ListDividerType, ListSize, MenuItem, NavigationTabsOrientation, NavigationTabsSize, NotificationType, OffCanvasVariantsEnum, PocketStatus, PopoverBorderRadius, PopoverPosition, PopoverShadow, SelectItemBean, Size, SkipToContentLink, SortDirection, StatusTagStatus, ThemeVariant, ThemeVariantBean, ToastNotificationPositionsTypes, ToastNotificationTransitionTypes, ToastNotificationTypes, TransitionDirectionEnum, ZChipType, ZDatePickerMode, ZFileUploadTypeEnum, ZSectionTitleDividerPosition, ZTableRowExpandedType } from "./beans";
+import { AlertTypes, LicenseTypeEnum, MenuItem as MenuItem1, PopoverPositions as PopoverPositions1 } from "./beans/index";
+import { AvatarSize, ButtonSizeEnum, ButtonVariantBean, ButtonVariantEnum, CardVariants, ComboItemBean, DictionaryData, DividerOrientation, DividerSize, ExpandableListButtonAlign, ExpandableListStyle, HeaderUserData, InputStatusBean, InputTypeBean, LabelPosition, ListDividerType, ListSize, MenuItem, NavigationTabsOrientation, NavigationTabsSize, NotificationType, OffCanvasVariantsEnum, PocketStatus, PopoverPositions, SelectItemBean, Size, SkipToContentLink, SortDirection, StatusTagStatus, ThemeVariant, ThemeVariantBean, ToastNotificationPositionsTypes, ToastNotificationTransitionTypes, ToastNotificationTypes, TransitionDirectionEnum, ZChipType, ZDatePickerMode, ZFileUploadTypeEnum, ZSectionTitleDividerPosition, ZTableRowExpandedType } from "./beans";
 import { ListItemBean } from "./beans/index.js";
 import { ZTypographyLevels } from "./components/typography/z-typography/index";
 export namespace Components {
@@ -353,13 +353,13 @@ export namespace Components {
          */
         "color"?: string;
         /**
-          * elements of ZContextualMenu
+          * Elements of ZContextualMenu
          */
         "elements"?: string;
         /**
           * [optional] Sets the position of the popover
          */
-        "popoverPosition"?: PopoverPosition;
+        "popoverPosition"?: PopoverPositions;
     }
     interface ZCookiebar {
         /**
@@ -383,7 +383,7 @@ export namespace Components {
         /**
           * unique id
          */
-        "datepickerid": string;
+        "datePickerId": string;
         /**
           * z-input label
          */
@@ -1495,29 +1495,77 @@ export namespace Components {
     }
     interface ZPopover {
         /**
-          * [optional] Background color token for popover
+          * The selector or the element bound with the popover.
          */
-        "backgroundColor"?: string;
+        "bindTo"?: string | HTMLElement;
         /**
-          * [optional] Border radius token for popover
+          * Whether to center the popup on the main side (according to "position").
          */
-        "borderRadius"?: PopoverBorderRadius;
+        "center": boolean;
         /**
-          * [optional] Box shadow token for popover
+          * Whether the popover should be closed when the user clicks outside of it or hit "ESC".
          */
-        "boxShadow"?: PopoverShadow;
+        "closable": boolean;
         /**
-          * [optional] Sets padding for Popover container
+          * The open state of the popover.
          */
-        "padding"?: string;
+        "open": boolean;
         /**
-          * [optional] Popover position
+          * Popover position.
          */
-        "position"?: PopoverPosition;
+        "position": PopoverPositions;
         /**
-          * [optional] Show or hide arrow
+          * Whether to show popover's arrow.
          */
-        "showArrow"?: boolean;
+        "showArrow": boolean;
+    }
+    interface ZPopoverDeprecated {
+        /**
+          * The selector or the element bound with the popover.
+         */
+        "bindTo"?: string | HTMLElement;
+        /**
+          * Whether center the popup on the main side - according to "position".
+         */
+        "center": boolean;
+        /**
+          * The open state of the popover.
+         */
+        "open": boolean;
+        /**
+          * Popover position.
+         */
+        "position": PopoverPositions;
+        /**
+          * Whether to show popover's arrow.
+         */
+        "showArrow": boolean;
+    }
+    interface ZRangePicker {
+        /**
+          * first z-input aria label
+         */
+        "firstAriaLabel"?: string;
+        /**
+          * first z-input label
+         */
+        "firstLabel"?: string;
+        /**
+          * [Optional] datepicker mode: date, datetime, only months
+         */
+        "mode": ZDatePickerMode;
+        /**
+          * unique id
+         */
+        "rangePickerId": string;
+        /**
+          * second z-input aria label
+         */
+        "secondAriaLabel"?: string;
+        /**
+          * second z-input label
+         */
+        "secondLabel"?: string;
     }
     interface ZSectionTitle {
         /**
@@ -1853,6 +1901,24 @@ export namespace Components {
         "labelPosition"?: LabelPosition;
     }
     interface ZTooltip {
+        /**
+          * The selector or the element bound with the tooltip.
+         */
+        "bindTo"?: string | HTMLElement;
+        /**
+          * Enable tooltip dark mode.
+         */
+        "dark": boolean;
+        /**
+          * The open state of the tooltip.
+         */
+        "open": boolean;
+        /**
+          * Tooltip position.
+         */
+        "position": PopoverPositions;
+    }
+    interface ZTooltipDeprecated {
         /**
           * The selector or the element bound with the tooltip.
          */
@@ -1869,7 +1935,7 @@ export namespace Components {
         /**
           * Tooltip position.
          */
-        "type": TooltipPosition;
+        "type": PopoverPositions1;
     }
     interface ZTypography {
         "component": string;
@@ -2364,6 +2430,18 @@ declare global {
         prototype: HTMLZPopoverElement;
         new (): HTMLZPopoverElement;
     };
+    interface HTMLZPopoverDeprecatedElement extends Components.ZPopoverDeprecated, HTMLStencilElement {
+    }
+    var HTMLZPopoverDeprecatedElement: {
+        prototype: HTMLZPopoverDeprecatedElement;
+        new (): HTMLZPopoverDeprecatedElement;
+    };
+    interface HTMLZRangePickerElement extends Components.ZRangePicker, HTMLStencilElement {
+    }
+    var HTMLZRangePickerElement: {
+        prototype: HTMLZRangePickerElement;
+        new (): HTMLZRangePickerElement;
+    };
     interface HTMLZSectionTitleElement extends Components.ZSectionTitle, HTMLStencilElement {
     }
     var HTMLZSectionTitleElement: {
@@ -2508,6 +2586,12 @@ declare global {
         prototype: HTMLZTooltipElement;
         new (): HTMLZTooltipElement;
     };
+    interface HTMLZTooltipDeprecatedElement extends Components.ZTooltipDeprecated, HTMLStencilElement {
+    }
+    var HTMLZTooltipDeprecatedElement: {
+        prototype: HTMLZTooltipDeprecatedElement;
+        new (): HTMLZTooltipDeprecatedElement;
+    };
     interface HTMLZTypographyElement extends Components.ZTypography, HTMLStencilElement {
     }
     var HTMLZTypographyElement: {
@@ -2604,6 +2688,8 @@ declare global {
         "z-pocket-header": HTMLZPocketHeaderElement;
         "z-pocket-message": HTMLZPocketMessageElement;
         "z-popover": HTMLZPopoverElement;
+        "z-popover-deprecated": HTMLZPopoverDeprecatedElement;
+        "z-range-picker": HTMLZRangePickerElement;
         "z-section-title": HTMLZSectionTitleElement;
         "z-select": HTMLZSelectElement;
         "z-skip-to-content": HTMLZSkipToContentElement;
@@ -2628,6 +2714,7 @@ declare global {
         "z-toggle-button": HTMLZToggleButtonElement;
         "z-toggle-switch": HTMLZToggleSwitchElement;
         "z-tooltip": HTMLZTooltipElement;
+        "z-tooltip-deprecated": HTMLZTooltipDeprecatedElement;
         "z-typography": HTMLZTypographyElement;
         "z-user-dropdown": HTMLZUserDropdownElement;
         "z-visually-hidden": HTMLZVisuallyHiddenElement;
@@ -3005,7 +3092,7 @@ declare namespace LocalJSX {
          */
         "color"?: string;
         /**
-          * elements of ZContextualMenu
+          * Elements of ZContextualMenu
          */
         "elements"?: string;
         /**
@@ -3015,7 +3102,7 @@ declare namespace LocalJSX {
         /**
           * [optional] Sets the position of the popover
          */
-        "popoverPosition"?: PopoverPosition;
+        "popoverPosition"?: PopoverPositions;
     }
     interface ZCookiebar {
         /**
@@ -3043,7 +3130,7 @@ declare namespace LocalJSX {
         /**
           * unique id
          */
-        "datepickerid"?: string;
+        "datePickerId"?: string;
         /**
           * z-input label
          */
@@ -4314,34 +4401,98 @@ declare namespace LocalJSX {
     }
     interface ZPopover {
         /**
-          * [optional] Background color token for popover
+          * The selector or the element bound with the popover.
          */
-        "backgroundColor"?: string;
+        "bindTo"?: string | HTMLElement;
         /**
-          * [optional] Border radius token for popover
+          * Whether to center the popup on the main side (according to "position").
          */
-        "borderRadius"?: PopoverBorderRadius;
+        "center"?: boolean;
         /**
-          * [optional] Box shadow token for popover
+          * Whether the popover should be closed when the user clicks outside of it or hit "ESC".
          */
-        "boxShadow"?: PopoverShadow;
+        "closable"?: boolean;
         /**
-          * Emitted on popover click, returns isVisible state
+          * Open change event.
          */
-        "onTriggerClick"?: (event: CustomEvent<any>) => void;
+        "onOpenChange"?: (event: CustomEvent<any>) => void;
         /**
-          * [optional] Sets padding for Popover container
+          * Position change event.
          */
-        "padding"?: string;
+        "onPositionChange"?: (event: CustomEvent<any>) => void;
         /**
-          * [optional] Popover position
+          * The open state of the popover.
          */
-        "position"?: PopoverPosition;
+        "open"?: boolean;
+        /**
+          * Popover position.
+         */
+        "position"?: PopoverPositions;
+        /**
+          * Whether to show popover's arrow.
+         */
+        "showArrow"?: boolean;
+    }
+    interface ZPopoverDeprecated {
+        /**
+          * The selector or the element bound with the popover.
+         */
+        "bindTo"?: string | HTMLElement;
+        /**
+          * Whether center the popup on the main side - according to "position".
+         */
+        "center"?: boolean;
+        /**
+          * Open change event.
+         */
+        "onOpenChange"?: (event: CustomEvent<any>) => void;
         /**
-          * [optional] Show or hide arrow
+          * Position change event.
+         */
+        "onPositionChange"?: (event: CustomEvent<any>) => void;
+        /**
+          * The open state of the popover.
+         */
+        "open"?: boolean;
+        /**
+          * Popover position.
+         */
+        "position"?: PopoverPositions;
+        /**
+          * Whether to show popover's arrow.
          */
         "showArrow"?: boolean;
     }
+    interface ZRangePicker {
+        /**
+          * first z-input aria label
+         */
+        "firstAriaLabel"?: string;
+        /**
+          * first z-input label
+         */
+        "firstLabel"?: string;
+        /**
+          * [Optional] datepicker mode: date, datetime, only months
+         */
+        "mode"?: ZDatePickerMode;
+        /**
+          * emitted when date changes, returns an array with the two selected dates
+         */
+        "onDateSelect"?: (event: CustomEvent<any>) => void;
+        /**
+          * unique id
+         */
+        "rangePickerId"?: string;
+        /**
+          * second z-input aria label
+         */
+        "secondAriaLabel"?: string;
+        /**
+          * second z-input label
+         */
+        "secondLabel"?: string;
+    }
     interface ZSectionTitle {
         /**
           * Divider position for the primary title. This prop only works if the secondary title is not set.
@@ -4690,6 +4841,24 @@ declare namespace LocalJSX {
         "onToggleClick"?: (event: CustomEvent<any>) => void;
     }
     interface ZTooltip {
+        /**
+          * The selector or the element bound with the tooltip.
+         */
+        "bindTo"?: string | HTMLElement;
+        /**
+          * Enable tooltip dark mode.
+         */
+        "dark"?: boolean;
+        /**
+          * The open state of the tooltip.
+         */
+        "open"?: boolean;
+        /**
+          * Tooltip position.
+         */
+        "position"?: PopoverPositions;
+    }
+    interface ZTooltipDeprecated {
         /**
           * The selector or the element bound with the tooltip.
          */
@@ -4710,7 +4879,7 @@ declare namespace LocalJSX {
         /**
           * Tooltip position.
          */
-        "type"?: TooltipPosition;
+        "type"?: PopoverPositions1;
     }
     interface ZTypography {
         "component"?: string;
@@ -4827,6 +4996,8 @@ declare namespace LocalJSX {
         "z-pocket-header": ZPocketHeader;
         "z-pocket-message": ZPocketMessage;
         "z-popover": ZPopover;
+        "z-popover-deprecated": ZPopoverDeprecated;
+        "z-range-picker": ZRangePicker;
         "z-section-title": ZSectionTitle;
         "z-select": ZSelect;
         "z-skip-to-content": ZSkipToContent;
@@ -4851,6 +5022,7 @@ declare namespace LocalJSX {
         "z-toggle-button": ZToggleButton;
         "z-toggle-switch": ZToggleSwitch;
         "z-tooltip": ZTooltip;
+        "z-tooltip-deprecated": ZTooltipDeprecated;
         "z-typography": ZTypography;
         "z-user-dropdown": ZUserDropdown;
         "z-visually-hidden": ZVisuallyHidden;
@@ -4937,6 +5109,8 @@ declare module "@stencil/core" {
             "z-pocket-header": LocalJSX.ZPocketHeader & JSXBase.HTMLAttributes<HTMLZPocketHeaderElement>;
             "z-pocket-message": LocalJSX.ZPocketMessage & JSXBase.HTMLAttributes<HTMLZPocketMessageElement>;
             "z-popover": LocalJSX.ZPopover & JSXBase.HTMLAttributes<HTMLZPopoverElement>;
+            "z-popover-deprecated": LocalJSX.ZPopoverDeprecated & JSXBase.HTMLAttributes<HTMLZPopoverDeprecatedElement>;
+            "z-range-picker": LocalJSX.ZRangePicker & JSXBase.HTMLAttributes<HTMLZRangePickerElement>;
             "z-section-title": LocalJSX.ZSectionTitle & JSXBase.HTMLAttributes<HTMLZSectionTitleElement>;
             "z-select": LocalJSX.ZSelect & JSXBase.HTMLAttributes<HTMLZSelectElement>;
             "z-skip-to-content": LocalJSX.ZSkipToContent & JSXBase.HTMLAttributes<HTMLZSkipToContentElement>;
@@ -4961,6 +5135,7 @@ declare module "@stencil/core" {
             "z-toggle-button": LocalJSX.ZToggleButton & JSXBase.HTMLAttributes<HTMLZToggleButtonElement>;
             "z-toggle-switch": LocalJSX.ZToggleSwitch & JSXBase.HTMLAttributes<HTMLZToggleSwitchElement>;
             "z-tooltip": LocalJSX.ZTooltip & JSXBase.HTMLAttributes<HTMLZTooltipElement>;
+            "z-tooltip-deprecated": LocalJSX.ZTooltipDeprecated & JSXBase.HTMLAttributes<HTMLZTooltipDeprecatedElement>;
             "z-typography": LocalJSX.ZTypography & JSXBase.HTMLAttributes<HTMLZTypographyElement>;
             "z-user-dropdown": LocalJSX.ZUserDropdown & JSXBase.HTMLAttributes<HTMLZUserDropdownElement>;
             "z-visually-hidden": LocalJSX.ZVisuallyHidden & JSXBase.HTMLAttributes<HTMLZVisuallyHiddenElement>;