@zanichelli/albe-web-components 6.6.2 → 6.6.3

package/dist/collection/components/z-popover/styles.css

@@ -1,147 +1,147 @@
-:host {
-  --z-popover-theme--surface: var(--color-surface01);
-  --z-popover-theme--text: var(--color-text01);
-  --z-popover-padding: 0;
-  --z-popover-shadow-filter: drop-shadow(0 1px 2px var(--shadow-color-base));
-
-  position: relative;
-  display: none;
-  min-width: calc(var(--space-unit) * 8);
-  min-height: calc(var(--space-unit) * 4);
-  align-items: center;
-  justify-content: center;
-  padding: var(--z-popover-padding);
-  background: var(--z-popover-theme--surface);
-  border-radius: var(--border-radius-small);
-  color: var(--z-popover-theme--text);
-  fill: currentcolor;
-  filter: var(--z-popover-shadow-filter);
-  font-family: var(--font-family-sans);
-  text-align: center;
-}
-
-:host([open][current-position]),
-:host([open="true"][current-position]) {
-  display: flex;
-}
-
-:host([center][current-position="top"]),
-:host([center][current-position="bottom"]) {
-  transform: translateX(-50%);
-}
-
-:host([center][current-position="right"]),
-:host([center][current-position="left"]) {
-  transform: translateY(-50%);
-}
-
-:host([current-position^="top"]) {
-  margin: 0 0 var(--space-unit);
-}
-
-:host([current-position^="bottom"]) {
-  margin: var(--space-unit) 0 0;
-}
-
-:host([current-position^="left"]) {
-  margin: 0 var(--space-unit) 0 0;
-}
-
-:host([current-position^="right"]) {
-  margin: 0 0 0 var(--space-unit);
-}
-
-/* Arrow style */
-
-:host([current-position])::before {
-  --arrow-size: 6px;
-  --arrow-edge-offset: calc(100% - var(--space-unit) - (var(--arrow-size) / 2));
-  --arrow-center-x-offset: calc(50% - (var(--arrow-size) / 2));
-  --arrow-center-y-offset: calc(100% - (var(--arrow-size) / 2));
-
-  position: absolute;
-  display: block;
-  width: var(--arrow-size);
-  height: var(--arrow-size);
-  background: var(--z-popover-theme--surface);
-  content: "";
-  transform: rotate(45deg);
-}
-
-:host([show-arrow="false"])::before,
-:host(:not([show-arrow]))::before {
-  display: none;
-}
-
-:host([current-position^="top"])::before {
-  top: var(--arrow-center-y-offset);
-}
-
-:host([current-position^="bottom"])::before {
-  bottom: var(--arrow-center-y-offset);
-}
-
-:host([current-position="top"])::before,
-:host([current-position="bottom"])::before {
-  right: var(--arrow-edge-offset);
-}
-
-:host([current-position="right"])::before,
-:host([current-position="left"])::before {
-  bottom: var(--arrow-edge-offset);
-}
-
-:host([current-position="right"])::before {
-  right: var(--arrow-center-y-offset);
-}
-
-:host([current-position="left"])::before {
-  left: var(--arrow-center-y-offset);
-}
-
-:host([current-position="top_right"])::before,
-:host([current-position="bottom_right"])::before {
-  right: var(--arrow-edge-offset);
-}
-
-:host([current-position="top_left"])::before,
-:host([current-position="bottom_left"])::before {
-  left: var(--arrow-edge-offset);
-}
-
-:host([current-position="right_top"])::before,
-:host([current-position="left_top"])::before {
-  top: var(--arrow-edge-offset);
-}
-
-:host([current-position="right_top"])::before,
-:host([current-position="right_bottom"])::before {
-  right: var(--arrow-center-y-offset);
-}
-
-:host([current-position="left_top"])::before,
-:host([current-position="left_bottom"])::before {
-  left: var(--arrow-center-y-offset);
-}
-
-:host([current-position="right_bottom"])::before,
-:host([current-position="left_bottom"])::before {
-  bottom: var(--arrow-edge-offset);
-}
-
-:host([center][current-position="top"])::before,
-:host([center][current-position="bottom"])::before {
-  right: auto;
-  left: var(--arrow-center-x-offset);
-}
-
-:host([center][current-position="right"])::before,
-:host([center][current-position="left"])::before {
-  top: var(--arrow-center-x-offset);
-  bottom: auto;
-}
-
-::slotted(*) {
-  overflow: auto;
-  flex: 1 auto;
-}
+:host {
+  --z-popover-theme--surface: var(--color-surface01);
+  --z-popover-theme--text: var(--color-text01);
+  --z-popover-padding: 0;
+  --z-popover-shadow-filter: drop-shadow(0 1px 2px var(--shadow-color-base));
+
+  position: relative;
+  display: none;
+  min-width: calc(var(--space-unit) * 8);
+  min-height: calc(var(--space-unit) * 4);
+  align-items: center;
+  justify-content: center;
+  padding: var(--z-popover-padding);
+  background: var(--z-popover-theme--surface);
+  border-radius: var(--border-radius-small);
+  color: var(--z-popover-theme--text);
+  fill: currentcolor;
+  filter: var(--z-popover-shadow-filter);
+  font-family: var(--font-family-sans);
+  text-align: center;
+}
+
+:host([open][current-position]),
+:host([open="true"][current-position]) {
+  display: flex;
+}
+
+:host([center][current-position="top"]),
+:host([center][current-position="bottom"]) {
+  transform: translateX(-50%);
+}
+
+:host([center][current-position="right"]),
+:host([center][current-position="left"]) {
+  transform: translateY(-50%);
+}
+
+:host([current-position^="top"]) {
+  margin: 0 0 var(--space-unit);
+}
+
+:host([current-position^="bottom"]) {
+  margin: var(--space-unit) 0 0;
+}
+
+:host([current-position^="left"]) {
+  margin: 0 var(--space-unit) 0 0;
+}
+
+:host([current-position^="right"]) {
+  margin: 0 0 0 var(--space-unit);
+}
+
+/* Arrow style */
+
+:host([current-position])::before {
+  --arrow-size: 6px;
+  --arrow-edge-offset: calc(100% - var(--space-unit) - (var(--arrow-size) / 2));
+  --arrow-center-x-offset: calc(50% - (var(--arrow-size) / 2));
+  --arrow-center-y-offset: calc(100% - (var(--arrow-size) / 2));
+
+  position: absolute;
+  display: block;
+  width: var(--arrow-size);
+  height: var(--arrow-size);
+  background: var(--z-popover-theme--surface);
+  content: "";
+  transform: rotate(45deg);
+}
+
+:host([show-arrow="false"])::before,
+:host(:not([show-arrow]))::before {
+  display: none;
+}
+
+:host([current-position^="top"])::before {
+  top: var(--arrow-center-y-offset);
+}
+
+:host([current-position^="bottom"])::before {
+  bottom: var(--arrow-center-y-offset);
+}
+
+:host([current-position="top"])::before,
+:host([current-position="bottom"])::before {
+  right: var(--arrow-edge-offset);
+}
+
+:host([current-position="right"])::before,
+:host([current-position="left"])::before {
+  bottom: var(--arrow-edge-offset);
+}
+
+:host([current-position="right"])::before {
+  right: var(--arrow-center-y-offset);
+}
+
+:host([current-position="left"])::before {
+  left: var(--arrow-center-y-offset);
+}
+
+:host([current-position="top_right"])::before,
+:host([current-position="bottom_right"])::before {
+  right: var(--arrow-edge-offset);
+}
+
+:host([current-position="top_left"])::before,
+:host([current-position="bottom_left"])::before {
+  left: var(--arrow-edge-offset);
+}
+
+:host([current-position="right_top"])::before,
+:host([current-position="left_top"])::before {
+  top: var(--arrow-edge-offset);
+}
+
+:host([current-position="right_top"])::before,
+:host([current-position="right_bottom"])::before {
+  right: var(--arrow-center-y-offset);
+}
+
+:host([current-position="left_top"])::before,
+:host([current-position="left_bottom"])::before {
+  left: var(--arrow-center-y-offset);
+}
+
+:host([current-position="right_bottom"])::before,
+:host([current-position="left_bottom"])::before {
+  bottom: var(--arrow-edge-offset);
+}
+
+:host([center][current-position="top"])::before,
+:host([center][current-position="bottom"])::before {
+  right: auto;
+  left: var(--arrow-center-x-offset);
+}
+
+:host([center][current-position="right"])::before,
+:host([center][current-position="left"])::before {
+  top: var(--arrow-center-x-offset);
+  bottom: auto;
+}
+
+::slotted(*) {
+  overflow: auto;
+  flex: 1 auto;
+}

package/dist/collection/components/z-section-title/index.js

@@ -1,88 +1,88 @@
-import { h, Host } from "@stencil/core";
-import { DividerSize, ZSectionTitleDividerPosition } from "../../beans";
-/**
- * Section title component.
- * An optional secondary title can be put over the primary one.
- *
- * @slot secondary-title - Slot for the secondary title. When present, the divider is always displayed under it,
- * following its width and removing the one for the primary title.
- * @slot primary-title - Slot for the primary title.
- * @cssprop --z-section-title--divider-color - Color of the divider. Use a CSS prop string like `"--red500"`. Default is `"--red500"`.
- */
-export class ZSectionTitle {
-  constructor() {
-    /**
-     * Divider position for the primary title.
-     * This prop only works if the secondary title is not set.
-     */
-    this.dividerPosition = ZSectionTitleDividerPosition.BEFORE;
-    /**
-     * Whether the primary title text is uppercase.
-     */
-    this.uppercase = true;
-  }
-  componentWillRender() {
-    this.hasSecondaryTitle = !!this.host.querySelector("[slot=secondary-title]");
-  }
-  render() {
-    return (h(Host, null, h("slot", { name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
-  }
-  static get is() { return "z-section-title"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "dividerPosition": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ZSectionTitleDividerPosition",
-          "resolved": "ZSectionTitleDividerPosition.AFTER | ZSectionTitleDividerPosition.BEFORE",
-          "references": {
-            "ZSectionTitleDividerPosition": {
-              "location": "import",
-              "path": "../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Divider position for the primary title.\r\nThis prop only works if the secondary title is not set."
-        },
-        "attribute": "divider-position",
-        "reflect": false,
-        "defaultValue": "ZSectionTitleDividerPosition.BEFORE"
-      },
-      "uppercase": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the primary title text is uppercase."
-        },
-        "attribute": "uppercase",
-        "reflect": true,
-        "defaultValue": "true"
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-}
+import { h, Host } from "@stencil/core";
+import { DividerSize, ZSectionTitleDividerPosition } from "../../beans";
+/**
+ * Section title component.
+ * An optional secondary title can be put over the primary one.
+ *
+ * @slot secondary-title - Slot for the secondary title. When present, the divider is always displayed under it,
+ * following its width and removing the one for the primary title.
+ * @slot primary-title - Slot for the primary title.
+ * @cssprop --z-section-title--divider-color - Color of the divider. Use a CSS prop string like `"--red500"`. Default is `"--red500"`.
+ */
+export class ZSectionTitle {
+  constructor() {
+    /**
+     * Divider position for the primary title.
+     * This prop only works if the secondary title is not set.
+     */
+    this.dividerPosition = ZSectionTitleDividerPosition.BEFORE;
+    /**
+     * Whether the primary title text is uppercase.
+     */
+    this.uppercase = true;
+  }
+  componentWillRender() {
+    this.hasSecondaryTitle = !!this.host.querySelector("[slot=secondary-title]");
+  }
+  render() {
+    return (h(Host, null, h("slot", { name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
+  }
+  static get is() { return "z-section-title"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "dividerPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ZSectionTitleDividerPosition",
+          "resolved": "ZSectionTitleDividerPosition.AFTER | ZSectionTitleDividerPosition.BEFORE",
+          "references": {
+            "ZSectionTitleDividerPosition": {
+              "location": "import",
+              "path": "../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Divider position for the primary title.\nThis prop only works if the secondary title is not set."
+        },
+        "attribute": "divider-position",
+        "reflect": false,
+        "defaultValue": "ZSectionTitleDividerPosition.BEFORE"
+      },
+      "uppercase": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the primary title text is uppercase."
+        },
+        "attribute": "uppercase",
+        "reflect": true,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/z-section-title/styles.css

@@ -1,44 +1,44 @@
-:host {
-  --z-section-title--divider-color: var(--red500);
-
-  display: flex;
-  width: fit-content;
-  flex-direction: column;
-  align-items: flex-start;
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
-}
-
-:host,
-:host ::slotted(*) {
-  box-sizing: border-box;
-}
-
-::slotted(*) {
-  margin: 0;
-}
-
-::slotted([slot="secondary-title"]) {
-  padding-bottom: calc(var(--space-unit) / 2);
-  border-bottom: var(--border-size-large) solid var(--z-section-title--divider-color);
-  font-size: var(--font-size-3);
-  line-height: 1.5rem;
-  text-transform: uppercase;
-}
-
-::slotted([slot="primary-title"]) {
-  font-size: var(--font-size-6);
-  line-height: 2rem;
-}
-
-:host([uppercase]:not([uppercase="false"])) ::slotted([slot="primary-title"]) {
-  text-transform: uppercase;
-}
-
-/* Desktop breakpoint */
-@media (min-width: 1152px) {
-  ::slotted([slot="primary-title"]) {
-    font-size: var(--font-size-7);
-    line-height: 2.25rem;
-  }
-}
+:host {
+  --z-section-title--divider-color: var(--red500);
+
+  display: flex;
+  width: fit-content;
+  flex-direction: column;
+  align-items: flex-start;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+:host,
+:host ::slotted(*) {
+  box-sizing: border-box;
+}
+
+::slotted(*) {
+  margin: 0;
+}
+
+::slotted([slot="secondary-title"]) {
+  padding-bottom: calc(var(--space-unit) / 2);
+  border-bottom: var(--border-size-large) solid var(--z-section-title--divider-color);
+  font-size: var(--font-size-3);
+  line-height: 1.5rem;
+  text-transform: uppercase;
+}
+
+::slotted([slot="primary-title"]) {
+  font-size: var(--font-size-6);
+  line-height: 2rem;
+}
+
+:host([uppercase]:not([uppercase="false"])) ::slotted([slot="primary-title"]) {
+  text-transform: uppercase;
+}
+
+/* Desktop breakpoint */
+@media (min-width: 1152px) {
+  ::slotted([slot="primary-title"]) {
+    font-size: var(--font-size-7);
+    line-height: 2.25rem;
+  }
+}