@zanichelli/albe-web-components 7.3.3 → 7.3.4

package/dist/collection/components/z-anchor-navigation/styles.css

@@ -1,129 +1,129 @@
-/* stylelint-disable value-no-vendor-prefix */
-html {
-  scroll-behavior: smooth;
-}
-
-z-anchor-navigation nav {
-  display: none;
-  flex-direction: column;
-  justify-content: flex-start;
-  row-gap: calc(var(--space-unit) / 2);
-}
-
-z-anchor-navigation[collapsed] nav {
-  display: flex;
-  margin-top: var(--space-unit);
-}
-
-z-anchor-navigation nav a {
-  display: -webkit-box;
-  overflow: clip;
-  width: 100%;
-  box-sizing: border-box;
-  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);
-  -webkit-box-orient: vertical;
-  color: inherit;
-  font-weight: inherit;
-  -webkit-line-clamp: 2;
-  overflow-clip-margin: content-box;
-  text-decoration: none;
-}
-
-z-anchor-navigation nav * a:not(:only-child) {
-  padding-right: calc(var(--space-unit) * 5);
-}
-
-@supports not (overflow-clip-margin: content-box) {
-  z-anchor-navigation nav a {
-    display: inline-block;
-    overflow: hidden;
-    -webkit-line-clamp: none;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
-z-anchor-navigation nav > * {
-  position: relative;
-  border-left: var(--border-size-large) solid var(--color-surface04);
-  color: var(--color-text01);
-  font-family: var(--font-family-sans);
-  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
-}
-
-z-anchor-navigation nav > [current] {
-  border-left-color: var(--color-primary01);
-  color: var(--color-link-primary);
-  font-weight: var(--font-sb);
-}
-
-z-anchor-navigation nav > * > *:is(z-button, button, z-icon) {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translateY(-50%);
-  transition: opacity 0.3s ease-in-out;
-}
-
-z-anchor-navigation nav button {
-  padding: 0;
-  border: none;
-  margin: 0;
-  background-color: transparent;
-}
-
-z-anchor-navigation nav z-icon {
-  --z-icon-width: 16px;
-  --z-icon-height: 16px;
-
-  display: flex;
-  padding: calc(var(--space-unit) * 1.5);
-  fill: var(--color-icon02);
-}
-
-@media (min-width: 768px) {
-  z-anchor-navigation z-button.toggle {
-    display: none !important;
-  }
-
-  z-anchor-navigation nav {
-    display: flex;
-  }
-
-  z-anchor-navigation nav a {
-    outline: none;
-  }
-
-  @media (hover: hover) {
-    z-anchor-navigation nav > *:hover {
-      border-left-color: var(--color-hover-secondary);
-      background-color: var(--color-hover-surface);
-      color: var(--color-hover-link);
-    }
-  }
-
-  z-anchor-navigation nav > *:is(:focus, :focus-within),
-  z-anchor-navigation nav :is(z-icon, button):focus:focus-visible {
-    box-shadow: var(--shadow-focus-primary);
-    outline: none;
-  }
-
-  z-anchor-navigation[hide-unselected] nav > *:not([current], :hover, :focus, :focus-within) {
-    color: transparent;
-  }
-
-  z-anchor-navigation
-    nav
-    > *:not([current], :hover, :focus, :focus-within)
-    > *:is(z-button, button, z-icon):not(:focus:focus-visible) {
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  @media (hover: none) {
-    z-anchor-navigation:not([hide-unselected]) nav > * > *:is(z-button, button, z-icon) {
-      opacity: 1;
-      pointer-events: all;
-    }
-  }
-}
+/* stylelint-disable value-no-vendor-prefix */
+html {
+  scroll-behavior: smooth;
+}
+
+z-anchor-navigation nav {
+  display: none;
+  flex-direction: column;
+  justify-content: flex-start;
+  row-gap: calc(var(--space-unit) / 2);
+}
+
+z-anchor-navigation[collapsed] nav {
+  display: flex;
+  margin-top: var(--space-unit);
+}
+
+z-anchor-navigation nav a {
+  display: -webkit-box;
+  overflow: clip;
+  width: 100%;
+  box-sizing: border-box;
+  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);
+  -webkit-box-orient: vertical;
+  color: inherit;
+  font-weight: inherit;
+  -webkit-line-clamp: 2;
+  overflow-clip-margin: content-box;
+  text-decoration: none;
+}
+
+z-anchor-navigation nav * a:not(:only-child) {
+  padding-right: calc(var(--space-unit) * 5);
+}
+
+@supports not (overflow-clip-margin: content-box) {
+  z-anchor-navigation nav a {
+    display: inline-block;
+    overflow: hidden;
+    -webkit-line-clamp: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+z-anchor-navigation nav > * {
+  position: relative;
+  border-left: var(--border-size-large) solid var(--color-surface04);
+  color: var(--color-text01);
+  font-family: var(--font-family-sans);
+  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
+}
+
+z-anchor-navigation nav > [current] {
+  border-left-color: var(--color-primary01);
+  color: var(--color-link-primary);
+  font-weight: var(--font-sb);
+}
+
+z-anchor-navigation nav > * > *:is(z-button, button, z-icon) {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  transition: opacity 0.3s ease-in-out;
+}
+
+z-anchor-navigation nav button {
+  padding: 0;
+  border: none;
+  margin: 0;
+  background-color: transparent;
+}
+
+z-anchor-navigation nav z-icon {
+  --z-icon-width: 16px;
+  --z-icon-height: 16px;
+
+  display: flex;
+  padding: calc(var(--space-unit) * 1.5);
+  fill: var(--color-icon02);
+}
+
+@media (min-width: 768px) {
+  z-anchor-navigation z-button.toggle {
+    display: none !important;
+  }
+
+  z-anchor-navigation nav {
+    display: flex;
+  }
+
+  z-anchor-navigation nav a {
+    outline: none;
+  }
+
+  @media (hover: hover) {
+    z-anchor-navigation nav > *:hover {
+      border-left-color: var(--color-hover-secondary);
+      background-color: var(--color-hover-surface);
+      color: var(--color-hover-link);
+    }
+  }
+
+  z-anchor-navigation nav > *:is(:focus, :focus-within),
+  z-anchor-navigation nav :is(z-icon, button):focus:focus-visible {
+    box-shadow: var(--shadow-focus-primary);
+    outline: none;
+  }
+
+  z-anchor-navigation[hide-unselected] nav > *:not([current], :hover, :focus, :focus-within) {
+    color: transparent;
+  }
+
+  z-anchor-navigation
+    nav
+    > *:not([current], :hover, :focus, :focus-within)
+    > *:is(z-button, button, z-icon):not(:focus:focus-visible) {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  @media (hover: none) {
+    z-anchor-navigation:not([hide-unselected]) nav > * > *:is(z-button, button, z-icon) {
+      opacity: 1;
+      pointer-events: all;
+    }
+  }
+}

package/dist/collection/components/z-aria-alert/index.js

@@ -1,39 +1,39 @@
-import { h, Host } from "@stencil/core";
-import { ZAriaAlertMode } from "../../beans";
-export class ZAriaAlert {
-  constructor() {
-    /** Aria live mode */
-    this.mode = ZAriaAlertMode.POLITE;
-  }
-  render() {
-    return (h(Host, { "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", null)));
-  }
-  static get is() { return "z-aria-alert"; }
-  static get properties() {
-    return {
-      "mode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ZAriaAlertMode",
-          "resolved": "ZAriaAlertMode.ASSERTIVE | ZAriaAlertMode.POLITE",
-          "references": {
-            "ZAriaAlertMode": {
-              "location": "import",
-              "path": "../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Aria live mode"
-        },
-        "attribute": "mode",
-        "reflect": false,
-        "defaultValue": "ZAriaAlertMode.POLITE"
-      }
-    };
-  }
-}
+import { h, Host } from "@stencil/core";
+import { ZAriaAlertMode } from "../../beans";
+export class ZAriaAlert {
+  constructor() {
+    /** Aria live mode */
+    this.mode = ZAriaAlertMode.POLITE;
+  }
+  render() {
+    return (h(Host, { "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", null)));
+  }
+  static get is() { return "z-aria-alert"; }
+  static get properties() {
+    return {
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ZAriaAlertMode",
+          "resolved": "ZAriaAlertMode.ASSERTIVE | ZAriaAlertMode.POLITE",
+          "references": {
+            "ZAriaAlertMode": {
+              "location": "import",
+              "path": "../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Aria live mode"
+        },
+        "attribute": "mode",
+        "reflect": false,
+        "defaultValue": "ZAriaAlertMode.POLITE"
+      }
+    };
+  }
+}

package/dist/collection/components/z-avatar/index.js

@@ -1,142 +1,142 @@
-import { h, Host } from "@stencil/core";
-import { AvatarSize } from "../../beans";
-export class ZAvatar {
-  constructor() {
-    var _a, _b;
-    /** [optional] Avatar size */
-    this.size = AvatarSize.MEDIUM;
-    /** [optional] Avatar text color */
-    this.textColor = "text-white";
-    /** [optional] Avatar background color */
-    this.backgroundColor = "bg-grey-700";
-    if (((_a = this.text) === null || _a === void 0 ? void 0 : _a.length) === 0 && ((_b = this.image) === null || _b === void 0 ? void 0 : _b.length) === 0) {
-      console.warn("z-avatar must contain at least one prop between text and image");
-    }
-  }
-  getTextSize() {
-    if (this.size === AvatarSize.SMALL) {
-      return "5";
-    }
-    else if (this.size === AvatarSize.MEDIUM) {
-      return "4";
-    }
-    else if (this.size === AvatarSize.LARGE) {
-      return "2";
-    }
-  }
-  render() {
-    return (h(Host, { class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
-        color: `var(--${this.textColor})`,
-        backgroundColor: `var(--${this.backgroundColor})`,
-      } }, this.text && !this.image && h("span", null, this.text.substring(0, 2)), this.image && (h("img", { src: this.image, onError: () => (this.image = "") }))));
-  }
-  static get is() { return "z-avatar"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "AvatarSize",
-          "resolved": "AvatarSize.LARGE | AvatarSize.MEDIUM | AvatarSize.SMALL",
-          "references": {
-            "AvatarSize": {
-              "location": "import",
-              "path": "../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Avatar size"
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "AvatarSize.MEDIUM"
-      },
-      "text": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Avatar text"
-        },
-        "attribute": "text",
-        "reflect": false
-      },
-      "textColor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Avatar text color"
-        },
-        "attribute": "text-color",
-        "reflect": false,
-        "defaultValue": "\"text-white\""
-      },
-      "backgroundColor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Avatar background color"
-        },
-        "attribute": "background-color",
-        "reflect": false,
-        "defaultValue": "\"bg-grey-700\""
-      },
-      "image": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Avatar image"
-        },
-        "attribute": "image",
-        "reflect": false
-      }
-    };
-  }
-}
+import { h, Host } from "@stencil/core";
+import { AvatarSize } from "../../beans";
+export class ZAvatar {
+  constructor() {
+    var _a, _b;
+    /** [optional] Avatar size */
+    this.size = AvatarSize.MEDIUM;
+    /** [optional] Avatar text color */
+    this.textColor = "text-white";
+    /** [optional] Avatar background color */
+    this.backgroundColor = "bg-grey-700";
+    if (((_a = this.text) === null || _a === void 0 ? void 0 : _a.length) === 0 && ((_b = this.image) === null || _b === void 0 ? void 0 : _b.length) === 0) {
+      console.warn("z-avatar must contain at least one prop between text and image");
+    }
+  }
+  getTextSize() {
+    if (this.size === AvatarSize.SMALL) {
+      return "5";
+    }
+    else if (this.size === AvatarSize.MEDIUM) {
+      return "4";
+    }
+    else if (this.size === AvatarSize.LARGE) {
+      return "2";
+    }
+  }
+  render() {
+    return (h(Host, { class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
+        color: `var(--${this.textColor})`,
+        backgroundColor: `var(--${this.backgroundColor})`,
+      } }, this.text && !this.image && h("span", null, this.text.substring(0, 2)), this.image && (h("img", { src: this.image, onError: () => (this.image = "") }))));
+  }
+  static get is() { return "z-avatar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "AvatarSize",
+          "resolved": "AvatarSize.LARGE | AvatarSize.MEDIUM | AvatarSize.SMALL",
+          "references": {
+            "AvatarSize": {
+              "location": "import",
+              "path": "../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Avatar size"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "AvatarSize.MEDIUM"
+      },
+      "text": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Avatar text"
+        },
+        "attribute": "text",
+        "reflect": false
+      },
+      "textColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Avatar text color"
+        },
+        "attribute": "text-color",
+        "reflect": false,
+        "defaultValue": "\"text-white\""
+      },
+      "backgroundColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Avatar background color"
+        },
+        "attribute": "background-color",
+        "reflect": false,
+        "defaultValue": "\"bg-grey-700\""
+      },
+      "image": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Avatar image"
+        },
+        "attribute": "image",
+        "reflect": false
+      }
+    };
+  }
+}