@zanichelli/albe-web-components 7.1.3 → 7.2.0-offcanvas-RC1

package/dist/collection/components/buttons/z-button-sort/styles.css

@@ -27,7 +27,7 @@ button:hover {
 
 button:focus {
   border-color: var(--myz-blue);
-  box-shadow: var(--shadow-focus-primary);
+  box-shadow: 0 0 2px 2px var(--accent-dark);
   color: var(--myz-blue);
   fill: var(--myz-blue);
 }

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

@@ -1,14 +1,12 @@
 import { h } from "@stencil/core";
 import { Device, ZChipType } from "../../../beans";
-import { getDevice } from "../../../utils/utils";
+import { getDevice, handleKeyboardSubmit } from "../../../utils/utils";
 export class ZChip {
   constructor() {
     /** z-chip size type, can be default, medium or small */
     this.type = ZChipType.DEFAULT;
     /** set z-chip as disabled  */
     this.disabled = false;
-    /** z-chip aria-label string */
-    this.ariaLabel = "";
   }
   emitinteractiveIconClick() {
     this.interactiveIconClick.emit();
@@ -18,11 +16,9 @@ export class ZChip {
   }
   render() {
     if (this.interactiveIcon) {
-      return (h("div", { class: `z-chip-container ${this.type}`, "aria-disabled": this.disabled }, this.icon && (h("z-icon", { class: "icon-sx", name: this.icon, width: this.getIconSize(), height: this.getIconSize() })), h("slot", null), h("button", { type: "button", onClick: () => this.emitinteractiveIconClick(), onKeyUp: () => {
-          () => this.emitinteractiveIconClick();
-        }, "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { name: this.interactiveIcon, width: this.getIconSize(), height: this.getIconSize() }))));
+      return (h("button", { class: this.type, disabled: this.disabled, tabindex: "0", type: "button" }, this.icon && (h("z-icon", { class: "icon-sx", name: this.icon, width: this.getIconSize(), height: this.getIconSize() })), h("slot", null), h("z-icon", { tabIndex: this.disabled ? -1 : 0, onClick: () => this.emitinteractiveIconClick(), onKeyUp: (e) => handleKeyboardSubmit(e, this.emitinteractiveIconClick.bind(this)), name: this.interactiveIcon, width: this.getIconSize(), height: this.getIconSize() })));
     }
-    return (h("div", { class: `${this.type}` }, this.icon && (h("z-icon", { name: this.icon, width: this.getIconSize(), height: this.getIconSize() })), h("slot", null)));
+    return (h("div", { class: `${this.type}`, tabindex: "0" }, this.icon && (h("z-icon", { name: this.icon, width: this.getIconSize(), height: this.getIconSize() })), h("slot", null)));
   }
   static get is() { return "z-chip"; }
   static get encapsulation() { return "scoped"; }
@@ -112,24 +108,6 @@ export class ZChip {
         "attribute": "disabled",
         "reflect": true,
         "defaultValue": "false"
-      },
-      "ariaLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "z-chip aria-label string"
-        },
-        "attribute": "aria-label",
-        "reflect": false,
-        "defaultValue": "\"\""
       }
     };
   }

package/dist/collection/components/buttons/z-chip/styles.css

@@ -1,4 +1,4 @@
-:host > .z-chip-container {
+:host > button {
   display: inline-flex;
   align-items: center;
   padding: 0 calc(var(--space-unit) * 1.5);
@@ -12,53 +12,46 @@
   font-weight: var(--font-sb);
 }
 
-:host > .z-chip-container:not([aria-disabled]) button > z-icon:last-child:hover {
+:host > button:not(:disabled) > z-icon:last-child:hover {
   color: var(--color-hover-primary);
   fill: var(--color-hover-primary);
 }
 
-:host > .z-chip-container:hover:not([aria-disabled]) > z-icon:first-child {
+:host > button:hover:not(:disabled) > z-icon:first-child {
   fill: var(--color-icon02);
 }
 
-:host > .z-chip-container > button {
-  padding: 0;
-  border: none;
-  margin-left: var(--space-unit);
-  background-color: transparent;
-  cursor: pointer;
-}
-
-:host > .z-chip-container > z-icon.icon-sx {
+:host > button > z-icon.icon-sx {
   margin-right: calc(var(--space-unit) / 2);
 }
 
-:host > .z-chip-container > button > z-icon:last-child {
+:host > button > z-icon:last-child {
+  margin-left: var(--space-unit);
+  cursor: pointer;
   fill: var(--color-primary01);
 }
 
-:host > .z-chip-container[aria-disabled],
-:host > .z-chip-container[aria-disabled] > z-icon,
-:host > .z-chip-container[aria-disabled] > button > z-icon {
+:host > button:disabled,
+:host > button:disabled > z-icon {
   color: var(--color-disabled03);
   fill: var(--color-disabled03);
 }
 
-:host > .z-chip-container[aria-disabled] > button > z-icon {
+:host > button:disabled > z-icon {
   cursor: auto;
 }
 
-:host > .z-chip-container[aria-disabled] {
+:host > button:disabled {
   border: var(--border-size-small) solid var(--color-disabled01);
 }
 
-:host > .z-chip-container > button:focus:focus-visible {
-  border-radius: 100%;
+:host > button:focus:focus-visible,
+:host > div:focus:focus-visible {
   box-shadow: var(--shadow-focus-primary);
   outline: none;
 }
 
-:host > button:hover:not(:disabled):active:hover > button > z-icon:last-child {
+:host > button:hover:not(:disabled):active:hover > z-icon:last-child {
   color: var(--color-primary01);
   fill: var(--color-primary01);
 }
@@ -83,21 +76,21 @@
 }
 
 /* :host type */
-:host > .z-chip-container.default,
+:host > button.default,
 :host > div.default {
   min-height: 44px;
   border-radius: 22px;
   line-height: 44px;
 }
 
-:host > .z-chip-container.medium,
+:host > button.medium,
 :host > div.medium {
   min-height: 40px;
   border-radius: 22px;
   line-height: 40px;
 }
 
-:host > .z-chip-container.small,
+:host > button.small,
 :host > div.small {
   min-height: 36px;
   border-radius: 22px;
@@ -106,7 +99,7 @@
 
 /* Desktop breakpoint */
 @media only screen and (min-width: 1152px) {
-  :host > .z-chip-container {
+  :host > button {
     font-size: 12px;
   }
 
@@ -115,21 +108,21 @@
   }
 
   /* :host type */
-  :host > .z-chip-container.default,
+  :host > button.default,
   :host > div.default {
     min-height: 32px;
     border-radius: 16px;
     line-height: 32px;
   }
 
-  :host > .z-chip-container.medium,
+  :host > button.medium,
   :host > div.medium {
     min-height: 28px;
     border-radius: 16px;
     line-height: 28px;
   }
 
-  :host > .z-chip-container.small,
+  :host > button.small,
   :host > div.small {
     min-height: 24px;
     border-radius: 16px;

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

@@ -5,8 +5,6 @@ export class ZToggleButton {
     this.isdisabled = false;
     /** open by default (optional) */
     this.opened = false;
-    /**  aria-label for the button */
-    this.ariaLabel = "";
   }
   emitToggleClick() {
     if (this.isdisabled) {
@@ -19,7 +17,7 @@ export class ZToggleButton {
     return (h("button", { tabindex: this.avoidclick ? "-1" : "0", class: {
         "isopen": this.opened,
         "avoid-clicks": this.avoidclick,
-      }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, h("z-icon", { name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
+      }, disabled: this.isdisabled, onClick: () => this.emitToggleClick() }, h("z-icon", { name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
   }
   static get is() { return "z-toggle-button"; }
   static get encapsulation() { return "shadow"; }
@@ -104,24 +102,6 @@ export class ZToggleButton {
         "attribute": "opened",
         "reflect": false,
         "defaultValue": "false"
-      },
-      "ariaLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "aria-label for the button"
-        },
-        "attribute": "aria-label",
-        "reflect": false,
-        "defaultValue": "\"\""
       }
     };
   }

package/dist/collection/components/buttons/z-toggle-button/styles.css

@@ -15,6 +15,7 @@ button {
   font-weight: var(--font-sb);
   outline: none;
   text-transform: uppercase;
+  transition: all 200ms linear;
 }
 
 button::-moz-focus-inner {
@@ -27,7 +28,8 @@ button:hover {
 }
 
 button:focus {
-  box-shadow: var(--shadow-focus-primary);
+  border-color: var(--myz-blue);
+  box-shadow: 0 0 2px 2px var(--accent-dark);
   color: var(--myz-blue);
   fill: var(--myz-blue);
 }

package/dist/collection/components/indicators/z-stepper-item/styles.css

@@ -78,7 +78,7 @@
 }
 
 :host(:not([disabled]):focus-within) .indicator {
-  box-shadow: var(--shadow-focus-primary);
+  box-shadow: 0 0 2px 2px var(--accent-dark);
 }
 
 :host([disabled]) .indicator {

package/dist/collection/components/notification/z-toast-notification/index.js

@@ -295,7 +295,7 @@ export class ZToastNotification {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "toast notification type: dark, light, accent, error, success, warning"
+          "text": "toast notification type:  dark, light, accent, error, success, warning"
         },
         "attribute": "type",
         "reflect": false

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

@@ -1,14 +1,5 @@
 import { h, Host } from "@stencil/core";
 import { CardVariant } from "../../beans";
-/**
- * ZCard component.
- * @cssprop --aspect-ratio - Cover aspect ratio. Default: `1.62`
- * @cssprop --z-card--border-color - Default: `var(--gray200)`
- * @cssprop --z-card--color-cover-background - Cover color. Default: `var(--color-surface01)`
- * @cssprop --z-card--text-background - Background color for the `text` variant. Default: `var(--color-surface01)`
- * @cssprop --z-card--text-border-radius - Default: `none`
- * @cssprop --z-card--text-border - Configure CSS `border`. Default: `none`
- */
 export class ZCard {
   constructor() {
     /** Enable click interactions on the card. Default: false */

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

@@ -183,7 +183,7 @@ Unfortunately the `aspect-ratio` property is still experimental */
 
 :host([variant="shadow"][clickable]:focus:focus-visible),
 :host([clickable][showshadow]:focus:focus-visible) {
-  box-shadow: var(--shadow-focus-primary);
+  box-shadow: var(--shadow-4);
 }
 
 :host([variant="shadow"][clickable]:active),

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

@@ -13,46 +13,29 @@ export class ZOffcanvas {
     this.variant = OffCanvasVariant.PUSHCONTENT;
     /** open component. Default: false */
     this.open = false;
+    /** allows you to skip the entry animation on page load, to be used with the open prop at true */
+    this.skipanimationonload = false;
     /** open content transitioning in a specified direction left | right. Default: left */
     this.transitiondirection = TransitionDirection.LEFT;
   }
-  componentWillLoad() {
-    this.handleOpenStatus();
-  }
   onOpenChanged() {
-    this.handleOpenStatus();
-    this.canvasOpenStatusChanged.emit(this.open);
-  }
-  handleOpenStatus() {
-    if (this.open) {
-      this.hostElement.style.opacity = "0";
-      this.hostElement.style.display = "flex";
-      if (this.variant === OffCanvasVariant.OVERLAY) {
-        document.body.style.overflowY = "hidden";
-      }
+    if (!this.open && this.skipanimationonload) {
+      this.skipanimationonload = false;
     }
-    else if (this.variant === OffCanvasVariant.PUSHCONTENT) {
-      this.hostElement.style.display = "none";
-      document.body.style.overflowX = "hidden";
+    if (this.open) {
+      this.handleOverflowProperty();
     }
+    this.canvasOpenStatusChanged.emit(this.open);
   }
-  handleAnimationEnd() {
-    if (this.hostElement.hasAttribute("open")) {
-      this.hostElement.querySelector(`.canvas-content`).focus();
-    }
-    else if (this.variant === OffCanvasVariant.OVERLAY) {
-      this.hostElement.style.display = "none";
-      document.body.style.overflowX = "initial";
-      document.body.style.overflowY = "initial";
-    }
+  handleOverflowProperty() {
+    const overflow = this.variant === OffCanvasVariant.OVERLAY ? "overflow-y" : "overflow-x";
+    document.body.style[overflow] = this.open ? "hidden" : "";
   }
-  handleAnimationStart() {
-    if (this.hostElement.hasAttribute("open")) {
-      this.hostElement.style.opacity = "1";
-    }
+  handledTransitionEnd() {
+    this.handleOverflowProperty();
   }
   render() {
-    return (h(Host, null, h("div", { class: "canvas-container", onAnimationEnd: () => this.handleAnimationEnd(), onAnimationStart: () => this.handleAnimationStart() }, h("div", { class: "canvas-content" }, h("slot", { name: "canvasContent" }))), h("div", { class: "canvas-background", "data-action": "canvasBackground", onClick: () => (this.open = false) })));
+    return (h(Host, { class: { "skip-animation": this.skipanimationonload } }, h("div", { role: "presentation", class: "canvas-container", onTransitionEnd: () => this.handledTransitionEnd() }, h("div", { role: "presentation", class: "canvas-content" }, h("slot", { name: "canvasContent" }))), this.variant == OffCanvasVariant.OVERLAY && (h("div", { class: "canvas-background", "data-action": "canvasBackground", onClick: () => (this.open = false) }))));
   }
   static get is() { return "z-offcanvas"; }
   static get encapsulation() { return "scoped"; }
@@ -109,6 +92,24 @@ export class ZOffcanvas {
         "reflect": true,
         "defaultValue": "false"
       },
+      "skipanimationonload": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "allows you to skip the entry animation on page load, to be used with the open prop at true"
+        },
+        "attribute": "skipanimationonload",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "transitiondirection": {
         "type": "string",
         "mutable": false,

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

@@ -2,12 +2,11 @@
   --z-offcanvas--container-width: 375px;
   --z-offcanvas--top-space: 0;
 
-  display: none;
   min-width: 100%;
   height: 100%;
-  justify-content: end;
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
+  visibility: hidden;
 }
 
 .canvas-container {
@@ -18,41 +17,15 @@
   height: 100%;
   flex-direction: column;
   background: var(--color-surface01);
-  transform: translateX(100%);
-}
-
-@keyframes enter-right {
-  from {
-    transform: translateX(100%);
-  }
-
-  to {
-    transform: translateX(0);
-  }
 }
 
-:host([open]) > .canvas-container {
-  animation-duration: 0.4s;
-  animation-name: enter-right;
-  animation-timing-function: ease-out;
-  transform: translateX(0);
-}
-
-@keyframes exit-right {
-  from {
-    transform: translateX(0);
-  }
-
-  to {
-    transform: translateX(100%);
-  }
+:host([variant="pushcontent"]) {
+  display: none;
 }
 
-:host(:not([open])[variant="overlay"]) > .canvas-container {
-  animation-duration: 0.4s;
-  animation-name: exit-right;
-  animation-timing-function: ease-out;
-  transform: translateX(100%);
+:host([open]) {
+  display: flex;
+  visibility: visible;
 }
 
 :host([variant="overlay"]) {
@@ -62,9 +35,14 @@
   right: 0;
   bottom: 0;
   left: 0;
+  display: flex;
   height: calc(100% - var(--z-offcanvas--top-space));
 }
 
+:host([variant="overlay"][transitiondirection="left"]) {
+  justify-content: end;
+}
+
 :host([variant="overlay"]) > .canvas-container {
   z-index: 1010;
 }
@@ -78,48 +56,6 @@
   opacity: 0.7;
 }
 
-:host([transitiondirection="right"]) {
-  justify-content: start;
-}
-
-:host([transitiondirection="right"]) > .canvas-container {
-  transform: translateX(-100%);
-}
-
-@keyframes enter-left {
-  from {
-    transform: translateX(-100%);
-  }
-
-  to {
-    transform: translateX(0);
-  }
-}
-
-:host([transitiondirection="right"][open]) > .canvas-container {
-  animation-duration: 0.4s;
-  animation-name: enter-left;
-  animation-timing-function: ease-out;
-  transform: translateX(0);
-}
-
-@keyframes exit-left {
-  from {
-    transform: translateX(0);
-  }
-
-  to {
-    transform: translateX(-100%);
-  }
-}
-
-:host(:not([open])[variant="overlay"][transitiondirection="right"]) > .canvas-container {
-  animation-duration: 0.4s;
-  animation-name: exit-left;
-  animation-timing-function: ease-out;
-  transform: translateX(-100%);
-}
-
 .canvas-container > .canvas-content {
   overflow: auto;
   flex: 1 auto;
@@ -133,6 +69,7 @@
   margin: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) 0 0;
 }
 
+/* Webkit Scrollbar */
 .canvas-container .canvas-content::-webkit-scrollbar {
   width: 10px;
   background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
@@ -158,6 +95,17 @@
   scrollbar-color: var(--color-primary01) transparent;
 }
 
+/* Mobile */
+@media only screen and (max-width: 768px) {
+  :host([open][transitiondirection="left"]:not(.skip-animation)) > .canvas-container {
+    animation: enter-right 0.4s ease-out;
+  }
+
+  :host([open][transitiondirection="right"]:not(.skip-animation)) > .canvas-container {
+    animation: enter-left 0.4s ease-out;
+  }
+}
+
 /* Tablet / Desktop */
 @media only screen and (min-width: 768px) {
   :host {
@@ -172,20 +120,63 @@
     min-height: calc(var(--space-unit) * 40);
   }
 
-  @keyframes grow {
-    from {
-      width: 0;
-    }
+  :host(:not([variant="overlay"])[open]:not(.skip-animation)) {
+    width: auto;
+    animation: grow 0.4s ease-out;
+  }
+}
+
+/* ANIMATION */
 
-    to {
-      width: max(var(--z-offcanvas--container-width), 375px);
-    }
+@keyframes grow {
+  from {
+    width: 0;
   }
 
-  :host(:not([variant="overlay"])[open]) {
-    width: auto;
-    animation-duration: 0.4s;
-    animation-name: grow;
-    animation-timing-function: ease-out;
+  to {
+    width: max(var(--z-offcanvas--container-width), 375px);
+  }
+}
+
+@keyframes enter-left {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes enter-right {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0);
   }
 }
+
+:host([open][variant="overlay"][transitiondirection="left"]:not(.skip-animation)) > .canvas-container {
+  animation: enter-right 0.4s ease-out;
+}
+
+:host([open][transitiondirection="right"]:not(.skip-animation)) > .canvas-container {
+  animation: enter-left 0.4s ease-out;
+}
+
+:host(:not([open])[variant="overlay"][transitiondirection="right"]) > .canvas-container {
+  transform: translateX(-100%);
+  transition: visibility 0.4s ease-out, transform 0.4s ease-out;
+}
+
+:host(:not([open])[variant="overlay"][transitiondirection="left"]) > .canvas-container {
+  transform: translateX(100%);
+  transition: visibility 0.4s ease-out, transform 0.4s ease-out;
+}
+
+:host(:not([open])[variant="overlay"]) .canvas-background {
+  transition: visibility 0.4s ease-out;
+  visibility: hidden;
+}

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

@@ -15,14 +15,6 @@ export class ZMyzCardFooter {
   }
   handleToggle() {
     this.isOpen = !this.isOpen;
-    if (this.isOpen) {
-      const firstElem = this.getFirstListItem();
-      if (firstElem) {
-        requestAnimationFrame(() => {
-          firstElem.focus();
-        });
-      }
-    }
   }
   getTitleAuthors() {
     return this.allowTooltipAuthors ? this.autori : "";
@@ -52,11 +44,8 @@ export class ZMyzCardFooter {
       this.elementsEllipsis();
     }
   }
-  getFirstListItem() {
-    return this.host.querySelector("[slot=list] > li a");
-  }
   render() {
-    return (h("div", { class: Object.assign(Object.assign({}, this.retrieveClass()), { wrapper: true }) }, h("footer", { class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) }, h("span", { class: "toggle" }, h("slot", { name: "toggle" })), this.titolo && h("p", { class: { "custom-content": this.customContent } }, this.titolo), h("div", { class: { "content": true, "custom-content": this.customContent } }, h("div", null, h("p", { class: "authors", ref: (el) => (this.ellipsisAuthors = el) }, h("span", { title: this.getTitleAuthors() }, h("span", { "aria-description": "Autori", class: "bold" }, this.autori))), h("p", { class: "year-isbn" }, h("span", { class: "isbn" }, h("span", null, h("span", { "aria-description": "ISBN edizione cartacea", class: "bold" }, this.isbn), " ", "(ed. cartacea)")))), h("div", { class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` }, h("slot", { name: "list" })))), this.customContent && h("slot", { name: "content" })));
+    return (h("div", { class: Object.assign(Object.assign({}, this.retrieveClass()), { wrapper: true }) }, h("footer", { class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) }, h("span", { class: "toggle" }, h("slot", { name: "toggle" })), this.titolo && h("p", { class: { "custom-content": this.customContent } }, this.titolo), h("div", { class: { "content": true, "custom-content": this.customContent } }, h("div", null, h("p", { class: "authors", ref: (el) => (this.ellipsisAuthors = el) }, h("span", { title: this.getTitleAuthors() }, h("span", { class: "bold" }, this.autori))), h("p", { class: "year-isbn" }, h("span", { class: "isbn" }, h("span", null, h("span", { class: "bold" }, this.isbn), " (ed. cartacea)")))), h("div", { class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` }, h("slot", { name: "list" })))), this.customContent && h("slot", { name: "content" })));
   }
   static get is() { return "z-myz-card-footer"; }
   static get encapsulation() { return "shadow"; }
@@ -206,7 +195,6 @@ export class ZMyzCardFooter {
       "allowTooltipAuthors": {}
     };
   }
-  static get elementRef() { return "host"; }
   static get listeners() {
     return [{
         "name": "toggleClick",

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

@@ -27,7 +27,7 @@ export class ZMyzCardHeader {
     };
   }
   render() {
-    return (h("header", { class: this.retrieveClass() }, h("slot", { name: "aria-heading" }), h("span", { class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), h("slot", { name: "icon" })));
+    return (h("header", { class: this.retrieveClass() }, h("span", { class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), h("slot", { name: "icon" })));
   }
   static get is() { return "z-myz-card-header"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card-header/styles.css

@@ -11,18 +11,6 @@ header {
   border-radius: var(--border-radius) var(--border-radius) var(--border-no-radius) var(--border-no-radius);
 }
 
-slot[name="aria-heading"]::slotted(*) {
-  position: absolute;
-  overflow: hidden !important;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  border: 0 none !important;
-  margin: -1px !important;
-  clip: rect(0, 0, 0, 0) !important;
-  white-space: nowrap !important;
-}
-
 header.real,
 header.trial,
 header.temp {