@zanichelli/albe-web-components 2.31.0 → 2.31.1

package/dist/collection/components/navigation/z-navigation-tab/index.js

@@ -1,151 +1,151 @@
-import { Component, Prop, h, Element, Listen, Event, Watch } from "@stencil/core";
-/**
- * @slot icon - tab icon
- * @slot label - tab label
- */
-export class ZNavigationTab {
-  constructor() {
-    this.selected = false;
-    this.disabled = false;
-    this.orientation = 'horizontal';
-    this.size = 'big';
-  }
-  onFocus() {
-    this.host.scrollIntoView({
-      behavior: 'smooth',
-      block: 'nearest',
-      inline: 'nearest',
-    });
-  }
-  onClick() {
-    if (!this.disabled) {
-      this.selected = true;
-    }
-  }
-  onSelected() {
-    if (this.selected) {
-      this.emitSelected.emit();
-    }
-  }
-  render() {
-    return (h("button", { disabled: this.disabled, role: "tab" },
-      h("slot", { name: "icon" }),
-      this.orientation === "horizontal" && h("slot", { name: "label" })));
-  }
-  static get is() { return "z-navigation-tab"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "selected": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "selected",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "orientation": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "orientation",
-      "reflect": true,
-      "defaultValue": "'horizontal'"
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "size",
-      "reflect": true,
-      "defaultValue": "'big'"
-    }
-  }; }
-  static get events() { return [{
-      "method": "emitSelected",
-      "name": "selected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "selected",
-      "methodName": "onSelected"
-    }]; }
-  static get listeners() { return [{
-      "name": "focus",
-      "method": "onFocus",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "click",
-      "method": "onClick",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
-}
+import { Component, Prop, h, Element, Listen, Event, Watch } from "@stencil/core";
+/**
+ * @slot icon - tab icon
+ * @slot label - tab label
+ */
+export class ZNavigationTab {
+  constructor() {
+    this.selected = false;
+    this.disabled = false;
+    this.orientation = 'horizontal';
+    this.size = 'big';
+  }
+  onFocus() {
+    this.host.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'nearest',
+    });
+  }
+  onClick() {
+    if (!this.disabled) {
+      this.selected = true;
+    }
+  }
+  onSelected() {
+    if (this.selected) {
+      this.emitSelected.emit();
+    }
+  }
+  render() {
+    return (h("button", { disabled: this.disabled, role: "tab" },
+      h("slot", { name: "icon" }),
+      this.orientation === "horizontal" && h("slot", { name: "label" })));
+  }
+  static get is() { return "z-navigation-tab"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "selected": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "selected",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "orientation": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "orientation",
+      "reflect": true,
+      "defaultValue": "'horizontal'"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": true,
+      "defaultValue": "'big'"
+    }
+  }; }
+  static get events() { return [{
+      "method": "emitSelected",
+      "name": "selected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "selected",
+      "methodName": "onSelected"
+    }]; }
+  static get listeners() { return [{
+      "name": "focus",
+      "method": "onFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "click",
+      "method": "onClick",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -1,113 +1,113 @@
-button {
-  position: relative;
-  z-index: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  margin: 0;
-  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);
-  background-color: unset;
-  text-align: center;
-  font-size: inherit;
-  font-family: var(--font-family-sans);
-  line-height: inherit;
-  letter-spacing: inherit;
-  white-space: nowrap;
-  color: var(--color-primary01);
-  fill: currentColor;
-  border: none;
-  border-radius: var(--border-no-radius);
-  outline: none;
-  cursor: pointer;
-}
-
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-:host(:hover:not([disabled])) button,
-:host([selected]) button {
-  color: var(--color-hover-secondary);
-  fill: currentColor;
-}
-
-:host(:hover:not([disabled])) button::after,
-:host([selected]) button::after {
-  content: '';
-  position: absolute;
-  background-color: var(--color-hover-secondary);
-}
-
-:host([orientation='horizontal']:not([disabled]):hover) button::after,
-:host([orientation='horizontal'][selected]) button::after {
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: var(--border-size-large);
-}
-
-:host([orientation='horizontal']) ::slotted(z-icon) {
-  margin-right: var(--space-unit);
-}
-
-:host(:hover:not([disabled])) button {
-  background-color: var(--color-background);
-}
-
-button:focus:focus-visible {
-  box-shadow: var(--shadow-focus-primary);
-}
-
-:host([disabled]) button {
-  pointer-events: all;
-  cursor: not-allowed;
-  color: var(--gray500);
-  fill: currentColor;
-}
-
-/* Size small (only available for horizontal) */
-:host([size='small']) button {
-  font-size: var(--font-size-2);
-  line-height: 1.4;
-  letter-spacing: 0.16px;
-}
-
-:host([size='small'][orientation='horizontal']) button {
-  padding: var(--space-unit) calc(var(--space-unit) * 2);
-}
-
-:host([size='small'][orientation='horizontal']:not([disabled]):hover) button::after,
-:host([size='small'][orientation='horizontal'][selected]) button::after {
-  height: var(--border-size-medium);
-}
-
-:host([size='small']:not([orientation='vertical'])) ::slotted(z-icon) {
-  --z-icon-width: 14px;
-  --z-icon-height: 14px;
-}
-
-/* Orientation Vertical */
-:host([orientation='vertical']) button {
-  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);
-}
-
-:host([orientation='vertical']:hover:not([disabled])) button::after,
-:host([orientation='vertical'][selected]) button::after {
-  width: var(--border-size-large);
-  height: 100%;
-  top: 0;
-  right: 0;
-}
-
-:host([orientation='vertical']) ::slotted([slot='label']) {
-  display: none;
-}
-
-::slotted(z-icon) {
-  --z-icon-width: calc(var(--space-unit) * 2);
-  --z-icon-height: calc(var(--space-unit) * 2);
-  margin: 0;
-}
-
+button {
+  position: relative;
+  z-index: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin: 0;
+  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);
+  background-color: unset;
+  text-align: center;
+  font-size: inherit;
+  font-family: var(--font-family-sans);
+  line-height: inherit;
+  letter-spacing: inherit;
+  white-space: nowrap;
+  color: var(--color-primary01);
+  fill: currentColor;
+  border: none;
+  border-radius: var(--border-no-radius);
+  outline: none;
+  cursor: pointer;
+}
+
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host(:hover:not([disabled])) button,
+:host([selected]) button {
+  color: var(--color-hover-secondary);
+  fill: currentColor;
+}
+
+:host(:hover:not([disabled])) button::after,
+:host([selected]) button::after {
+  content: '';
+  position: absolute;
+  background-color: var(--color-hover-secondary);
+}
+
+:host([orientation='horizontal']:not([disabled]):hover) button::after,
+:host([orientation='horizontal'][selected]) button::after {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: var(--border-size-large);
+}
+
+:host([orientation='horizontal']) ::slotted(z-icon) {
+  margin-right: var(--space-unit);
+}
+
+:host(:hover:not([disabled])) button {
+  background-color: var(--color-background);
+}
+
+button:focus:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+:host([disabled]) button {
+  pointer-events: all;
+  cursor: not-allowed;
+  color: var(--gray500);
+  fill: currentColor;
+}
+
+/* Size small (only available for horizontal) */
+:host([size='small']) button {
+  font-size: var(--font-size-2);
+  line-height: 1.4;
+  letter-spacing: 0.16px;
+}
+
+:host([size='small'][orientation='horizontal']) button {
+  padding: var(--space-unit) calc(var(--space-unit) * 2);
+}
+
+:host([size='small'][orientation='horizontal']:not([disabled]):hover) button::after,
+:host([size='small'][orientation='horizontal'][selected]) button::after {
+  height: var(--border-size-medium);
+}
+
+:host([size='small']:not([orientation='vertical'])) ::slotted(z-icon) {
+  --z-icon-width: 14px;
+  --z-icon-height: 14px;
+}
+
+/* Orientation Vertical */
+:host([orientation='vertical']) button {
+  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);
+}
+
+:host([orientation='vertical']:hover:not([disabled])) button::after,
+:host([orientation='vertical'][selected]) button::after {
+  width: var(--border-size-large);
+  height: 100%;
+  top: 0;
+  right: 0;
+}
+
+:host([orientation='vertical']) ::slotted([slot='label']) {
+  display: none;
+}
+
+::slotted(z-icon) {
+  --z-icon-width: calc(var(--space-unit) * 2);
+  --z-icon-height: calc(var(--space-unit) * 2);
+  margin: 0;
+}
+