@zanichelli/albe-web-components 6.0.1-rc2 → 6.0.1-rc3

package/dist/cjs/z-app-switcher_9.cjs.entry.js

@@ -110,6 +110,8 @@ const ZInput = class {
     this.inputCheck = index.createEvent(this, "inputCheck", 7);
     /** the id of the input element */
     this.htmlid = `id-${utils.randomId()}`;
+    /** the input aria-label */
+    this.ariaLabel = "";
     /** the input is disabled */
     this.disabled = false;
     /** the input is readonly */

package/dist/cjs/z-button.cjs.entry.js

@@ -10,6 +10,8 @@ const stylesCss = ".sc-z-button-h{display:inline-block;--z-icon-width:16px;--z-i
 const ZButton = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /** defines a string value that labels an interactive element, used for accessibility. */
+    this.ariaLabel = "";
     /** HTML button disabled attribute. */
     this.disabled = false;
     /** HTML button type attribute. */

package/dist/cjs/z-date-picker.cjs.entry.js

@@ -314,6 +314,8 @@ const ZDatePicker = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.dateSelect = index.createEvent(this, "dateSelect", 7);
+    /** z-input aria label */
+    this.ariaLabel = "";
     /** [Optional] datepicker mode: date, datetime, only months */
     this.mode = index$1.ZDatePickerMode.DATE;
     this.flatpickrPosition = index$1.ZDatePickerPosition.BOTTOM;

package/dist/cjs/z-input-deprecated.cjs.entry.js

@@ -19,6 +19,8 @@ const ZInputDeprecated = class {
     this.optionSelect = index.createEvent(this, "optionSelect", 7);
     /** the id of the input element */
     this.htmlid = `id-${utils.randomId()}`;
+    /** the input aria-label */
+    this.ariaLabel = "";
     /** the input is disabled */
     this.disabled = false;
     /** the input is readonly */

package/dist/cjs/z-input-label_2.cjs.entry.js

@@ -29,6 +29,8 @@ const ZSelect = class {
     this.optionSelect = index.createEvent(this, "optionSelect", 7);
     /** the id of the input element */
     this.htmlid = `id-${utils.randomId()}`;
+    /** the input aria-label */
+    this.ariaLabel = "";
     /** the input is disabled */
     this.disabled = false;
     /** the input is readonly */

package/dist/cjs/z-myz-card-icon.cjs.entry.js

@@ -11,6 +11,8 @@ const ZMyzCardIcon = class {
     index.registerInstance(this, hostRef);
     /** disabled status flag */
     this.isdisabled = false;
+    /** description of the icon*/
+    this.ariaLabel = "";
   }
   render() {
     return (index.h("button", { disabled: this.isdisabled, "aria-label": this.ariaLabel }, index.h("span", null, index.h("z-icon", { name: this.icon, width: 16, height: 16 }))));

package/dist/cjs/z-pagination-page.cjs.entry.js

@@ -15,6 +15,8 @@ const ZPaginationPage = class {
     this.isdisabled = false;
     /** visited status flag */
     this.isvisited = false;
+    /** aria-label string */
+    this.ariaLabel = "";
   }
   render() {
     return (index.h("button", { id: this.pageid, "aria-label": this.ariaLabel ? this.ariaLabel : `Go to page ${this.value}`, class: { selected: this.isselected, visited: this.isvisited }, disabled: this.isdisabled, type: "button" }, this.value));

package/dist/collection/components/buttons/z-button/index.js

@@ -5,6 +5,8 @@ import { ButtonVariant, ButtonType, ButtonSize } from "../../../beans";
  */
 export class ZButton {
   constructor() {
+    /** defines a string value that labels an interactive element, used for accessibility. */
+    this.ariaLabel = "";
     /** HTML button disabled attribute. */
     this.disabled = false;
     /** HTML button type attribute. */
@@ -52,13 +54,14 @@ export class ZButton {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "defines a string value that labels an interactive element, used for accessibility."
         },
         "attribute": "aria-label",
-        "reflect": true
+        "reflect": true,
+        "defaultValue": "\"\""
       },
       "href": {
         "type": "string",

package/dist/collection/components/date-picker/z-date-picker/index.js

@@ -6,6 +6,8 @@ import { InputType, ZDatePickerMode, ZDatePickerPosition } from "../../../beans"
 import { setAriaOptions, setFlatpickrPosition, validateDate } from "../utils";
 export class ZDatePicker {
   constructor() {
+    /** z-input aria label */
+    this.ariaLabel = "";
     /** [Optional] datepicker mode: date, datetime, only months */
     this.mode = ZDatePickerMode.DATE;
     this.flatpickrPosition = ZDatePickerPosition.BOTTOM;
@@ -199,13 +201,14 @@ export class ZDatePicker {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "z-input aria label"
         },
         "attribute": "aria-label",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"\""
       },
       "label": {
         "type": "string",

package/dist/collection/components/inputs/z-input/index.js

@@ -5,6 +5,8 @@ export class ZInput {
   constructor() {
     /** the id of the input element */
     this.htmlid = `id-${randomId()}`;
+    /** the input aria-label */
+    this.ariaLabel = "";
     /** the input is disabled */
     this.disabled = false;
     /** the input is readonly */
@@ -310,13 +312,14 @@ export class ZInput {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "the input aria-label"
         },
         "attribute": "aria-label",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"\""
       },
       "value": {
         "type": "string",

package/dist/collection/components/inputs/z-select/index.js

@@ -5,6 +5,8 @@ export class ZSelect {
   constructor() {
     /** the id of the input element */
     this.htmlid = `id-${randomId()}`;
+    /** the input aria-label */
+    this.ariaLabel = "";
     /** the input is disabled */
     this.disabled = false;
     /** the input is readonly */
@@ -338,13 +340,14 @@ export class ZSelect {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "the input aria-label"
         },
         "attribute": "aria-label",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"\""
       },
       "disabled": {
         "type": "boolean",

package/dist/collection/deprecated/pagination/z-pagination-page/index.js

@@ -7,6 +7,8 @@ export class ZPaginationPage {
     this.isdisabled = false;
     /** visited status flag */
     this.isvisited = false;
+    /** aria-label string */
+    this.ariaLabel = "";
   }
   render() {
     return (h("button", { id: this.pageid, "aria-label": this.ariaLabel ? this.ariaLabel : `Go to page ${this.value}`, class: { selected: this.isselected, visited: this.isvisited }, disabled: this.isdisabled, type: "button" }, this.value));
@@ -122,13 +124,14 @@ export class ZPaginationPage {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "aria-label string"
         },
         "attribute": "aria-label",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"\""
       }
     };
   }

package/dist/collection/deprecated/z-input-deprecated/index.js

@@ -5,6 +5,8 @@ export class ZInputDeprecated {
   constructor() {
     /** the id of the input element */
     this.htmlid = `id-${randomId()}`;
+    /** the input aria-label */
+    this.ariaLabel = "";
     /** the input is disabled */
     this.disabled = false;
     /** the input is readonly */
@@ -335,13 +337,14 @@ export class ZInputDeprecated {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "the input aria-label"
         },
         "attribute": "aria-label",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"\""
       },
       "value": {
         "type": "string",

package/dist/collection/index.js

@@ -3,4 +3,5 @@ const UTILS = {
   colorFromId,
 };
 export { UTILS as Utils };
+export * from "./components";
 export * from "./beans";

package/dist/collection/snowflakes/myz/card/z-myz-card-icon/index.js

@@ -3,6 +3,8 @@ export class ZMyzCardIcon {
   constructor() {
     /** disabled status flag */
     this.isdisabled = false;
+    /** description of the icon*/
+    this.ariaLabel = "";
   }
   render() {
     return (h("button", { disabled: this.isdisabled, "aria-label": this.ariaLabel }, h("span", null, h("z-icon", { name: this.icon, width: 16, height: 16 }))));
@@ -65,13 +67,14 @@ export class ZMyzCardIcon {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "description of the icon"
         },
         "attribute": "aria-label",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"\""
       }
     };
   }

package/dist/esm/z-app-switcher_9.entry.js

@@ -106,6 +106,8 @@ const ZInput = class {
     this.inputCheck = createEvent(this, "inputCheck", 7);
     /** the id of the input element */
     this.htmlid = `id-${randomId()}`;
+    /** the input aria-label */
+    this.ariaLabel = "";
     /** the input is disabled */
     this.disabled = false;
     /** the input is readonly */

package/dist/esm/z-button.entry.js

@@ -6,6 +6,8 @@ const stylesCss = ".sc-z-button-h{display:inline-block;--z-icon-width:16px;--z-i
 const ZButton = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    /** defines a string value that labels an interactive element, used for accessibility. */
+    this.ariaLabel = "";
     /** HTML button disabled attribute. */
     this.disabled = false;
     /** HTML button type attribute. */

package/dist/esm/z-date-picker.entry.js

@@ -310,6 +310,8 @@ const ZDatePicker = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.dateSelect = createEvent(this, "dateSelect", 7);
+    /** z-input aria label */
+    this.ariaLabel = "";
     /** [Optional] datepicker mode: date, datetime, only months */
     this.mode = ZDatePickerMode.DATE;
     this.flatpickrPosition = ZDatePickerPosition.BOTTOM;

package/dist/esm/z-input-deprecated.entry.js

@@ -15,6 +15,8 @@ const ZInputDeprecated = class {
     this.optionSelect = createEvent(this, "optionSelect", 7);
     /** the id of the input element */
     this.htmlid = `id-${randomId()}`;
+    /** the input aria-label */
+    this.ariaLabel = "";
     /** the input is disabled */
     this.disabled = false;
     /** the input is readonly */

package/dist/esm/z-input-label_2.entry.js

@@ -25,6 +25,8 @@ const ZSelect = class {
     this.optionSelect = createEvent(this, "optionSelect", 7);
     /** the id of the input element */
     this.htmlid = `id-${randomId()}`;
+    /** the input aria-label */
+    this.ariaLabel = "";
     /** the input is disabled */
     this.disabled = false;
     /** the input is readonly */

package/dist/esm/z-myz-card-icon.entry.js

@@ -7,6 +7,8 @@ const ZMyzCardIcon = class {
     registerInstance(this, hostRef);
     /** disabled status flag */
     this.isdisabled = false;
+    /** description of the icon*/
+    this.ariaLabel = "";
   }
   render() {
     return (h("button", { disabled: this.isdisabled, "aria-label": this.ariaLabel }, h("span", null, h("z-icon", { name: this.icon, width: 16, height: 16 }))));

package/dist/esm/z-pagination-page.entry.js

@@ -11,6 +11,8 @@ const ZPaginationPage = class {
     this.isdisabled = false;
     /** visited status flag */
     this.isvisited = false;
+    /** aria-label string */
+    this.ariaLabel = "";
   }
   render() {
     return (h("button", { id: this.pageid, "aria-label": this.ariaLabel ? this.ariaLabel : `Go to page ${this.value}`, class: { selected: this.isselected, visited: this.isvisited }, disabled: this.isdisabled, type: "button" }, this.value));

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

@@ -5,7 +5,7 @@ import { ButtonVariant, ButtonType, ButtonSize } from "../../../beans";
 export declare class ZButton {
   hostElement: HTMLZButtonElement;
   /** defines a string value that labels an interactive element, used for accessibility. */
-  ariaLabel?: string;
+  ariaLabel: string;
   /** HTML <a> href attribute. If it is set, it renders an HTML <a> tag. */
   href?: string;
   /** HTML a target attribute. */

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

@@ -5,7 +5,7 @@ export declare class ZDatePicker {
   /** unique id */
   datePickerId: string;
   /** z-input aria label */
-  ariaLabel?: string;
+  ariaLabel: string;
   /** z-input label */
   label?: string;
   /** [Optional] datepicker mode: date, datetime, only months */

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

@@ -11,7 +11,7 @@ export declare class ZInput {
   /** the input label */
   label?: string;
   /** the input aria-label */
-  ariaLabel?: string;
+  ariaLabel: string;
   /** the input value */
   value?: string;
   /** the input is disabled */

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

@@ -11,7 +11,7 @@ export declare class ZSelect {
   /** the input label */
   label?: string;
   /** the input aria-label */
-  ariaLabel?: string;
+  ariaLabel: string;
   /** the input is disabled */
   disabled?: boolean;
   /** the input is readonly */

package/dist/types/components.d.ts

@@ -112,7 +112,7 @@ export namespace Components {
         /**
           * defines a string value that labels an interactive element, used for accessibility.
          */
-        "ariaLabel"?: string;
+        "ariaLabel": string;
         /**
           * HTML button disabled attribute.
          */
@@ -423,7 +423,7 @@ export namespace Components {
         /**
           * z-input aria label
          */
-        "ariaLabel"?: string;
+        "ariaLabel": string;
         /**
           * unique id
          */
@@ -613,7 +613,7 @@ export namespace Components {
         /**
           * the input aria-label
          */
-        "ariaLabel"?: string;
+        "ariaLabel": string;
         /**
           * the input has autocomplete option (optional): available for text, password, number, email
          */
@@ -707,7 +707,7 @@ export namespace Components {
         /**
           * the input aria-label
          */
-        "ariaLabel"?: string;
+        "ariaLabel": string;
         /**
           * the input has autocomplete option (optional): available for select, input
          */
@@ -1201,7 +1201,7 @@ export namespace Components {
         /**
           * description of the icon
          */
-        "ariaLabel"?: string;
+        "ariaLabel": string;
         /**
           * icon name
          */
@@ -1506,7 +1506,7 @@ export namespace Components {
         /**
           * aria-label string
          */
-        "ariaLabel"?: string;
+        "ariaLabel": string;
         /**
           * disabled status flag
          */
@@ -1694,7 +1694,7 @@ export namespace Components {
         /**
           * the input aria-label
          */
-        "ariaLabel"?: string;
+        "ariaLabel": string;
         /**
           * the input has autocomplete option
          */

package/dist/types/deprecated/pagination/z-pagination-page/index.d.ts

@@ -10,6 +10,6 @@ export declare class ZPaginationPage {
   /** visited status flag */
   isvisited: boolean;
   /** aria-label string */
-  ariaLabel?: string;
+  ariaLabel: string;
   render(): HTMLButtonElement;
 }

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

@@ -11,7 +11,7 @@ export declare class ZInputDeprecated {
   /** the input label */
   label?: string;
   /** the input aria-label */
-  ariaLabel?: string;
+  ariaLabel: string;
   /** the input value */
   value?: string;
   /** the input is disabled */

package/dist/types/index.d.ts

@@ -3,5 +3,5 @@ declare const UTILS: {
   colorFromId: typeof colorFromId;
 };
 export { UTILS as Utils };
-export { Components, JSX } from "./components";
+export * from "./components";
 export * from "./beans";

package/dist/types/snowflakes/myz/card/z-myz-card-icon/index.d.ts

@@ -4,6 +4,6 @@ export declare class ZMyzCardIcon {
   /** disabled status flag */
   isdisabled: boolean;
   /** description of the icon*/
-  ariaLabel?: string;
+  ariaLabel: string;
   render(): HTMLButtonElement;
 }

package/dist/web-components-library/p-05ced71c.entry.js

@@ -0,0 +1 @@
+import{r,h as o}from"./p-d17ebc2f.js";const a=class{constructor(o){r(this,o),this.isdisabled=!1,this.ariaLabel=""}render(){return o("button",{disabled:this.isdisabled,"aria-label":this.ariaLabel},o("span",null,o("z-icon",{name:this.icon,width:16,height:16})))}};a.style="button{display:flex;width:42px;width:calc(var(--space-unit) * 6);height:calc(var(--space-unit) * 5);height:calc(var(--space-unit) * 6);align-items:center;justify-content:center;padding:0;border:none;border-left:var(--border-size-medium) solid var(--color-surface03);margin:0;background:none;border-radius:0 var(--border-radius) 0 0;color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);outline:none}button:active,button:focus{color:var(--blue700);fill:var(--blue700)}button>span{display:flex;width:28px;height:28px;align-items:center;justify-content:center;border:0;border-radius:var(--border-radius)}button:hover>span{background:var(--color-primary03)}button:focus>span{background:var(--color-surface01);border-radius:var(--border-radius);box-shadow:0 0 2px 2px var(--accent-dark)}button:active>span{background:var(--color-surface01);border-radius:var(--border-radius);box-shadow:var(--shadow-2)}button:disabled{cursor:not-allowed}button:disabled>span{background:none;box-shadow:var(--shadow-0);pointer-events:none}button:disabled>span>z-icon{fill:var(--color-surface03)}button::-moz-focus-inner{border:0}";export{a as z_myz_card_icon}

package/dist/web-components-library/p-4d093e07.entry.js

@@ -0,0 +1 @@
+import{r as o,h as r,g as t}from"./p-d17ebc2f.js";import{b as a,B as n,c}from"./p-9f80c0b8.js";const e=class{constructor(r){o(this,r),this.ariaLabel="",this.disabled=!1,this.type=a.BUTTON,this.variant=n.PRIMARY,this.size=c.BIG}getAttributes(){return{id:this.htmlid,class:{"z-button--container":!0,"z-button--has-text":!!this.hostElement.textContent.trim()}}}render(){return this.href?r("a",Object.assign({},this.getAttributes(),{"aria-label":this.ariaLabel,href:this.href,target:this.target}),this.icon&&r("z-icon",{name:this.icon,width:16,height:16}),r("slot",null)):r("button",Object.assign({},this.getAttributes(),{"aria-label":this.ariaLabel,name:this.name,type:this.type,disabled:this.disabled}),this.icon&&r("z-icon",{name:this.icon,width:16,height:16}),r("slot",null))}get hostElement(){return t(this)}};e.style='.sc-z-button-h{display:inline-block;--z-icon-width:16px;--z-icon-height:16px;--z-icon-right-margin:0}[disabled].sc-z-button-h:not([disabled="false"]){pointer-events:none}.sc-z-button-h .z-button--container.sc-z-button{display:inline-flex;width:100%;box-sizing:border-box;align-items:center;justify-content:center;padding:0;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.3px;line-height:1;outline:none;text-decoration:none;text-transform:uppercase;white-space:nowrap}.sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-button-h .z-button--container.z-button--has-text.sc-z-button{min-width:calc(var(--space-unit) * 8);padding:0 calc(var(--space-unit) * 2)}.sc-z-button-h .z-button--container.z-button--has-text.sc-z-button z-icon.sc-z-button{--z-icon-right-margin:var(--space-unit)}[size="big"].sc-z-button-h .z-button--container.sc-z-button{min-width:44px;height:44px}[size="small"].sc-z-button-h .z-button--container.sc-z-button{min-width:36px;height:36px}[size="x-small"].sc-z-button-h .z-button--container.sc-z-button{min-width:32px;height:32px}[variant="primary"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-primary01);color:var(--color-text-inverse)}@media (hover: hover){[variant="primary"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-hover-primary);color:var(--color-text-inverse)}}[variant="primary"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-text-inverse)}[variant="primary"][disabled].sc-z-button-h:not([disabled="false"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-disabled01);color:var(--color-disabled02)}[variant="secondary"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-surface01);color:var(--color-primary01)}@media (hover: hover){[variant="secondary"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-surface01);color:var(--color-hover-primary)}}[variant="secondary"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-pressed-primary)}[variant="secondary"][disabled].sc-z-button-h:not([disabled="false"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-surface01);color:var(--color-disabled02)}[variant="tertiary"].sc-z-button-h .z-button--container.sc-z-button{border-color:transparent;background-color:transparent;color:var(--color-primary01)}@media (hover: hover){[variant="tertiary"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-primary03);background-color:var(--color-primary03);color:var(--color-hover-primary)}}[variant="tertiary"].sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{border-color:var(--color-surface01);background-color:var(--color-surface01);color:var(--color-primary01)}[variant="tertiary"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-surface01);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-primary01)}[variant="tertiary"][disabled].sc-z-button-h:not([disabled="false"]) .z-button--container.sc-z-button{border-color:transparent;background-color:transparent;color:var(--color-disabled02)}';export{e as z_button}