@zanichelli/albe-web-components 9.1.2 → 9.2.1

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

@@ -0,0 +1,244 @@
+:host,
+:host *,
+:host ::slotted(*) {
+  box-sizing: border-box;
+}
+
+:host {
+  --z-accordion-highlight-color: transparent;
+  --z-accordion-bg: var(--color-surface01);
+
+  display: block;
+  border-top: var(--border-size-small) solid var(--color-surface03);
+  border-bottom: var(--border-size-small) solid var(--color-surface03);
+  background-color: var(--z-accordion-bg);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+:host([variant="background"]) {
+  border: var(--border-size-small) solid var(--color-surface03);
+  border-radius: var(--border-radius);
+}
+
+:host([variant="background"][shadow]) {
+  box-shadow: var(--shadow-2);
+}
+
+details {
+  background-color: transparent;
+}
+
+summary {
+  --summary-x-small-height: 32px;
+  --summary-small-height: 36px;
+  --summary-big-height: 44px;
+  --summary-height: var(--summary-big-height);
+  --summary-y-padding: var(--space-unit);
+
+  position: relative;
+  display: flex;
+  height: var(--summary-height);
+  align-items: center;
+  padding: var(--summary-y-padding) var(--space-unit) var(--summary-y-padding) calc(var(--space-unit) * 2);
+  column-gap: var(--space-unit);
+  cursor: pointer;
+  list-style: none;
+}
+
+:host([size="x-small"]) summary {
+  --summary-height: var(--summary-x-small-height);
+}
+
+:host([size="small"]) summary {
+  --summary-height: var(--summary-small-height);
+}
+
+:host(:is([size="x-small"], [size="small"])) summary {
+  --summary-y-padding: calc(var(--space-unit) / 2);
+}
+
+:host([variant="background"]) summary {
+  padding-right: calc(var(--space-unit) * 2);
+
+  /* border-radius of the accordion - width of the accordion's border */
+  border-radius: calc(var(--border-radius) - var(--border-size-small));
+}
+
+:host([variant="background"][open]) summary {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+:host([is-disabled]) summary {
+  cursor: default;
+}
+
+summary:focus:focus-visible {
+  background-color: var(--color-surface03);
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}
+
+summary::before,
+:host([highlight][variant="background"]) .z-accordion-content::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: var(--space-unit);
+  height: 100%;
+  content: "";
+}
+
+:host([highlight][variant="background"]) summary::before {
+  /* border-radius of the accordion - width of the accordion's border */
+  border-top-left-radius: calc(var(--border-radius) - var(--border-size-small));
+}
+
+:host([highlight][variant="background"]:not([open])) summary::before,
+:host([highlight][variant="background"][open]) .z-accordion-content::before {
+  /* border-radius of the accordion - width of the accordion's border */
+  border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));
+}
+
+:host([highlight]) summary::before,
+:host([highlight][variant="background"]) .z-accordion-content::before {
+  background-color: var(--z-accordion-highlight-color, transparent);
+}
+
+:host([is-disabled][highlight]) summary::before,
+:host([is-disabled][highlight][variant="background"]) .z-accordion-content::before {
+  background-color: var(--color-text03);
+}
+
+summary > z-icon {
+  fill: var(--color-text01);
+}
+
+:host([is-disabled]) summary > z-icon {
+  fill: var(--color-text03);
+}
+
+.z-accordion-label {
+  color: var(--color-text01);
+  font-size: var(--font-size-3); /* for "small" and "big" sizes */
+  font-weight: var(--font-sb);
+}
+
+:host([size="x-small"]) .z-accordion-label {
+  font-size: var(--font-size-2);
+}
+
+:host([size="x-small"]) :is(.z-accordion-label-icon, .z-accordion-chevron) {
+  --z-icon-width: 16px;
+  --z-icon-height: 16px;
+}
+
+.z-accordion-tags {
+  display: flex;
+  align-items: center;
+  column-gap: calc(var(--space-unit) / 2);
+}
+
+summary z-icon.z-accordion-chevron {
+  margin-left: auto;
+}
+
+.z-accordion-content {
+  position: relative;
+  padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);
+  font-size: var(--font-size-2); /* for "small" and "big" sizes */
+}
+
+:host(:is([size="x-small"], [size="small"])) .z-accordion-content {
+  padding-bottom: var(--space-unit);
+}
+
+:host([size="x-small"]) .z-accordion-content {
+  font-size: var(--font-size-1);
+}
+
+:host([variant="background"]) .z-accordion-content {
+  padding-right: calc(var(--space-unit) * 2);
+}
+
+:host([is-disabled]) .z-accordion-label {
+  color: var(--color-text03);
+}
+
+:host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot="tag"]) {
+  --z-tag-bg: var(--color-text03) !important;
+  --z-tag-text-color: var(--color-text-inverse) !important;
+}
+
+@media (hover: hover) {
+  summary:focus:focus-visible {
+    /* prevents the focus shadow to be covered by the background of an hovered sibling accordion */
+    position: relative;
+    z-index: 1;
+  }
+
+  :host(:not([is-disabled])) summary:hover {
+    background-color: var(--color-surface03);
+  }
+
+  :host(:not([is-disabled])) summary:hover .z-accordion-label {
+    text-decoration: underline;
+  }
+}
+
+/* force "big" variant on touch devices */
+@media (hover: none) {
+  :host([size]) summary {
+    --summary-height: var(--summary-big-height);
+    --summary-y-padding: var(--space-unit);
+  }
+
+  :host([size]) .z-accordion-label {
+    font-size: var(--font-size-3);
+  }
+
+  :host([size]) .z-accordion-content {
+    font-size: var(--font-size-2);
+  }
+
+  :host([size]) :is(.z-accordion-label-icon, .z-accordion-chevron) {
+    --z-icon-width: 18px;
+    --z-icon-height: 18px;
+  }
+}
+
+/* Style for sibling accordions in a stack context */
+
+z-accordion + z-accordion {
+  border-top: none;
+}
+
+z-accordion[variant="background"] + z-accordion[variant="background"] {
+  border-radius: 0;
+}
+
+z-accordion[variant="background"]:first-of-type:not(:last-of-type) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+z-accordion[variant="background"] + z-accordion[variant="background"]:last-of-type {
+  border-bottom-left-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
+}
+
+z-accordion[variant="background"]:first-of-type:not(:last-of-type)::part(summary) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+z-accordion[variant="background"] + z-accordion[variant="background"]::part(summary) {
+  border-radius: 0;
+}
+
+z-accordion[variant="background"] + z-accordion[variant="background"]:last-of-type:not([open])::part(summary) {
+  border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));
+  border-bottom-right-radius: calc(var(--border-radius) - var(--border-size-small));
+}

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

@@ -1,95 +1,95 @@
-import { h, Host } from "@stencil/core";
-import { ButtonVariant } from "../../beans";
-/**
- * * Anchor navigation component.
- * @slot Main slot. Put some `<a>` tags inside. If you need an action button/icon, wrap it and the <a> inside another tag.
- * @example
- * ```
- * <z-anchor-navigation>
- *  <div>
- *    <a href="#section-id">Section name</a>
- *    <button type="button">
- *      <z-icon name="share" />
- *    </button>
- *  </div>
- * </z-anchor-navigation>
- * ```
- */
-export class ZAnchorNavigation {
-  constructor() {
-    /**
-     * If enabled, the text of each anchor will be hidden unless
-     * for the current one or the one the user is hovering.
-     */
-    this.hideUnselected = false;
-    /**
-     * Whether the mobile list is collapsed.
-     */
-    this.collapsed = false;
-  }
-  /**
-   * Set aria-current attribute to the anchors and `current` to nav children.
-   */
-  setAriaCurrent() {
-    Array.from(this.nav.children).forEach((item) => {
-      const anchor = item instanceof HTMLAnchorElement ? item : item.querySelector("a");
-      const isCurrent = window.location.href === anchor.href;
-      anchor.setAttribute("aria-current", isCurrent.toString());
-      item.toggleAttribute("current", isCurrent);
-    });
-  }
-  /**
-   * Toggle collapsed state.
-   */
-  toggleCollapsed() {
-    this.collapsed = !this.collapsed;
-  }
-  componentDidLoad() {
-    window.addEventListener("hashchange", this.setAriaCurrent.bind(this));
-    this.setAriaCurrent();
-  }
-  disconnectedCallback() {
-    window.removeEventListener("hashchange", this.setAriaCurrent);
-  }
-  render() {
-    return (h(Host, { collapsed: this.collapsed }, h("z-button", { class: "toggle", variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, "salta a"), h("nav", { ref: (el) => (this.nav = el) }, h("slot", null))));
-  }
-  static get is() { return "z-anchor-navigation"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "hideUnselected": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If enabled, the text of each anchor will be hidden unless\nfor the current one or the one the user is hovering."
-        },
-        "attribute": "hide-unselected",
-        "reflect": true,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "collapsed": {}
-    };
-  }
-}
+import { h, Host } from "@stencil/core";
+import { ButtonVariant } from "../../beans";
+/**
+ * * Anchor navigation component.
+ * @slot Main slot. Put some `<a>` tags inside. If you need an action button/icon, wrap it and the <a> inside another tag.
+ * @example
+ * ```
+ * <z-anchor-navigation>
+ *  <div>
+ *    <a href="#section-id">Section name</a>
+ *    <button type="button">
+ *      <z-icon name="share" />
+ *    </button>
+ *  </div>
+ * </z-anchor-navigation>
+ * ```
+ */
+export class ZAnchorNavigation {
+  constructor() {
+    /**
+     * If enabled, the text of each anchor will be hidden unless
+     * for the current one or the one the user is hovering.
+     */
+    this.hideUnselected = false;
+    /**
+     * Whether the mobile list is collapsed.
+     */
+    this.collapsed = false;
+  }
+  /**
+   * Set aria-current attribute to the anchors and `current` to nav children.
+   */
+  setAriaCurrent() {
+    Array.from(this.nav.children).forEach((item) => {
+      const anchor = item instanceof HTMLAnchorElement ? item : item.querySelector("a");
+      const isCurrent = window.location.href === anchor.href;
+      anchor.setAttribute("aria-current", isCurrent.toString());
+      item.toggleAttribute("current", isCurrent);
+    });
+  }
+  /**
+   * Toggle collapsed state.
+   */
+  toggleCollapsed() {
+    this.collapsed = !this.collapsed;
+  }
+  componentDidLoad() {
+    window.addEventListener("hashchange", this.setAriaCurrent.bind(this));
+    this.setAriaCurrent();
+  }
+  disconnectedCallback() {
+    window.removeEventListener("hashchange", this.setAriaCurrent);
+  }
+  render() {
+    return (h(Host, { collapsed: this.collapsed }, h("z-button", { class: "toggle", variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, "salta a"), h("nav", { ref: (el) => (this.nav = el) }, h("slot", null))));
+  }
+  static get is() { return "z-anchor-navigation"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "hideUnselected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If enabled, the text of each anchor will be hidden unless\r\nfor the current one or the one the user is hovering."
+        },
+        "attribute": "hide-unselected",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "collapsed": {}
+    };
+  }
+}

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

@@ -1,128 +1,128 @@
-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;
-    }
-  }
-}
+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;
+    }
+  }
+}