@zanichelli/albe-web-components 5.6.2 → 6.0.0

package/dist/esm/z-pocket_3.entry.js

@@ -1,26 +1,26 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a2ca4b97.js';
-import { s as PocketStatusEnum } from './index-8390ddaf.js';
-import { h as handleKeyboardSubmit } from './utils-2c5dfb88.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-3517583d.js';
+import { r as PocketStatus } from './index-9d028352.js';
+import { h as handleKeyboardSubmit } from './utils-39ca028c.js';
 import { h as hammer } from './hammer-c3266b17.js';
 import './breakpoints-c386984e.js';
 import './_commonjsHelpers-9943807e.js';
 
-const stylesCss$2 = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);width:inherit;height:100%;margin:inherit}:host>div{width:inherit;height:100%;margin:inherit}:host>div>div.background{position:fixed;left:0;right:0;top:0;bottom:0;z-index:998;width:0;height:0}:host>div>div.background.open{height:100%;width:100%}:host>div>div.contentWrapper{position:fixed;z-index:999;bottom:0;left:0;width:inherit;margin:inherit}:host>div>div.contentWrapper>div{border-radius:var(--space-unit) var(--space-unit) 0px 0px;box-shadow:0px -2px calc(var(--space-unit) * 0.5) 0px rgba(66, 69, 72, 0.4);margin:calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 0.5) 0 calc(var(--space-unit) * 0.5)}";
+const stylesCss$2 = ":host{width:inherit;height:100%;margin:inherit;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{width:inherit;height:100%;margin:inherit}:host>div>div.background{position:fixed;z-index:998;top:0;right:0;bottom:0;left:0;width:0;height:0}:host>div>div.background.open{width:100%;height:100%}:host>div>div.content-wrapper{position:fixed;z-index:999;bottom:0;left:0;width:inherit;margin:inherit}:host>div>div.content-wrapper>div{margin:calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 0.5) 0 calc(var(--space-unit) * 0.5);border-radius:var(--space-unit) var(--space-unit) 0 0;box-shadow:0 -2px calc(var(--space-unit) * 0.5) 0 rgb(66 69 72 / 40%)}";
 
 const ZPocket = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.pocketToggle = createEvent(this, "pocketToggle", 7);
     /** pocket status */
-    this.status = PocketStatusEnum.preview;
+    this.status = PocketStatus.PREVIEW;
   }
   /** open z-pocket */
   async open() {
-    this.status = PocketStatusEnum.open;
+    this.status = PocketStatus.OPEN;
   }
   /** close z-pocket */
   async close() {
-    this.status = PocketStatusEnum.closed;
+    this.status = PocketStatus.CLOSED;
   }
   emitPocketToggle(id, status) {
     this.pocketToggle.emit({ id, status });
@@ -28,12 +28,12 @@ const ZPocket = class {
   handlePocketHeaderClick(e) {
     if (e.detail.id && e.detail.id === this.pocketid) {
       switch (this.status) {
-        case PocketStatusEnum.preview:
-        case PocketStatusEnum.closed:
-          this.status = PocketStatusEnum.open;
+        case PocketStatus.PREVIEW:
+        case PocketStatus.CLOSED:
+          this.status = PocketStatus.OPEN;
           break;
-        case PocketStatusEnum.open:
-          this.status = PocketStatusEnum.closed;
+        case PocketStatus.OPEN:
+          this.status = PocketStatus.CLOSED;
           break;
       }
     }
@@ -41,10 +41,10 @@ const ZPocket = class {
   handlePocketHeaderPan(e) {
     if (e.detail.id && e.detail.id === this.pocketid) {
       if (e.detail.direction === "up") {
-        this.status = PocketStatusEnum.open;
+        this.status = PocketStatus.OPEN;
       }
       else if (e.detail.direction === "down") {
-        this.status = PocketStatusEnum.closed;
+        this.status = PocketStatus.CLOSED;
       }
     }
   }
@@ -60,7 +60,7 @@ const ZPocket = class {
     }
   }
   render() {
-    return (h("div", null, h("div", { "data-action": "pocketBackground", "data-pocket": this.pocketid, class: `background ${this.status}`, onClick: (e) => this.handleBackgroundClick(e) }), h("div", { id: this.pocketid, class: "contentWrapper" }, h("div", null, h("slot", null)))));
+    return (h("div", null, h("div", { "data-action": "pocketBackground", "data-pocket": this.pocketid, class: `background ${this.status}`, onClick: (e) => this.handleBackgroundClick(e) }), h("div", { id: this.pocketid, class: "content-wrapper" }, h("div", null, h("slot", null)))));
   }
   get hostElement() { return getElement(this); }
   static get watchers() { return {
@@ -69,13 +69,13 @@ const ZPocket = class {
 };
 ZPocket.style = stylesCss$2;
 
-const stylesCss$1 = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);display:block;width:100%;box-sizing:border-box}:host>main{background:var(--color-surface01);border-left:var(--border-size-small) solid var(--color-surface03);border-right:var(--border-size-small) solid var(--color-surface03);overflow:auto;scrollbar-width:none}:host>main.preview{max-height:225px;transition:all 200ms ease-in-out, top 200ms ease-in-out}:host>main.open{max-height:calc(100vh - 48px);transition:all 200ms ease-in-out, top 200ms ease-in-out}:host>main.closed{height:0px;transition:all 200ms ease-in-out, top 200ms ease-in-out}:host ::-webkit-scrollbar{width:0}@media only screen and (min-width: 768px){:host>main.preview{max-height:157px}}";
+const stylesCss$1 = ":host{display:block;width:100%;box-sizing:border-box;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>main{overflow:auto;border-right:var(--border-size-small) solid var(--color-surface03);border-left:var(--border-size-small) solid var(--color-surface03);background:var(--color-surface01);scrollbar-width:none}:host>main.preview{max-height:225px;transition:all 200ms ease-in-out, top 200ms ease-in-out}:host>main.open{max-height:calc(100vh - 48px);transition:all 200ms ease-in-out, top 200ms ease-in-out}:host>main.closed{height:0;transition:all 200ms ease-in-out, top 200ms ease-in-out}:host ::-webkit-scrollbar{width:0}@media only screen and (min-width: 768px){:host>main.preview{max-height:157px}}";
 
 const ZPocketBody = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     /** pocket status */
-    this.status = PocketStatusEnum.preview;
+    this.status = PocketStatus.PREVIEW;
   }
   handlePocketToggle(e) {
     if (e.detail.id && e.detail.id === this.pocketid) {
@@ -88,7 +88,7 @@ const ZPocketBody = class {
 };
 ZPocketBody.style = stylesCss$1;
 
-const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);display:block;width:100%;box-sizing:border-box}:host>header{background:var(--color-surface01);border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--space-unit) var(--space-unit) 0px 0px;height:36px;cursor:pointer;display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:center;align-items:center}:host>header:focus{outline:none}:host>header::-moz-focus-inner{border:0}";
+const stylesCss = ":host{display:block;width:100%;box-sizing:border-box;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>header{display:flex;height:36px;flex-flow:row nowrap;align-items:center;justify-content:center;border:var(--border-size-small) solid var(--color-surface03);background:var(--color-surface01);border-radius:var(--space-unit) var(--space-unit) 0 0;cursor:pointer}:host>header:focus{outline:none}:host>header::-moz-focus-inner{border:0}";
 
 const ZPocketHeader = class {
   constructor(hostRef) {
@@ -111,7 +111,7 @@ const ZPocketHeader = class {
     mc.on("pandown", () => this.emitPocketHeaderPan("down"));
   }
   render() {
-    return (h("header", { role: "button", tabindex: 0, onClick: () => this.emitPocketHeaderClick(), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitPocketHeaderClick), ref: el => (this.swipeWrap = el) }, h("slot", null)));
+    return (h("header", { role: "button", tabindex: 0, onClick: () => this.emitPocketHeaderClick(), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitPocketHeaderClick), ref: (el) => (this.swipeWrap = el) }, h("slot", null)));
   }
 };
 ZPocketHeader.style = stylesCss;

package/dist/esm/z-popover-deprecated.entry.js

@@ -1,11 +1,9 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-a2ca4b97.js';
-import { c as classnames } from './index-abb47b30.js';
-import { e as PopoverPosition, f as PopoverBorderRadius, g as PopoverShadow, i as KeyboardKeys } from './index-8390ddaf.js';
-import { a as getElementTree } from './utils-2c5dfb88.js';
-import './_commonjsHelpers-9943807e.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-3517583d.js';
+import { e as PopoverPosition, f as PopoverBorderRadius, g as PopoverShadow, h as KeyboardCode } from './index-9d028352.js';
+import { a as getElementTree } from './utils-39ca028c.js';
 import './breakpoints-c386984e.js';
 
-const stylesCss = ".sc-z-popover-deprecated-h{font-family:var(--dashboard-font);font-weight:var(--font-rg);position:relative;display:inline-block;--shadow-arrow-color:rgba(66, 69, 72, 0.2);--shadow-arrow-below-color:rgba(66, 69, 72, 0.1)}.popover-content-container.sc-z-popover-deprecated{box-sizing:border-box;visibility:hidden;position:absolute;min-width:64px;min-height:32px;z-index:999}.popover-content-container.visible.sc-z-popover-deprecated{visibility:visible}.popover-content-container.border-radius-none.sc-z-popover-deprecated{border-radius:0}.popover-content-container.border-radius-small.sc-z-popover-deprecated{border-radius:var(--border-radius-small)}.popover-content-container.border-radius-medium.sc-z-popover-deprecated{border-radius:var(--border-radius)}.popover-content-container.shadow-1.sc-z-popover-deprecated{box-shadow:var(--shadow-1)}.popover-content-container.shadow-2.sc-z-popover-deprecated{box-shadow:var(--shadow-2)}.popover-content-container.shadow-3.sc-z-popover-deprecated{box-shadow:var(--shadow-3)}.popover-content-container.shadow-4.sc-z-popover-deprecated{box-shadow:var(--shadow-4)}.popover-content-container.shadow-6.sc-z-popover-deprecated{box-shadow:var(--shadow-6)}.popover-content-container.shadow-8.sc-z-popover-deprecated{box-shadow:var(--shadow-8)}.popover-content-container.shadow-12.sc-z-popover-deprecated{box-shadow:var(--shadow-12)}.popover-content-container.shadow-16.sc-z-popover-deprecated{box-shadow:var(--shadow-16)}.popover-content-container.shadow-24.sc-z-popover-deprecated{box-shadow:var(--shadow-24)}.popover-content-container.after-down.sc-z-popover-deprecated{top:0;left:calc(100% + var(--space-unit))}.popover-content-container.after-center.sc-z-popover-deprecated{top:50%;left:calc(100% + var(--space-unit));transform:translateY(-50%)}.popover-content-container.after-up.sc-z-popover-deprecated{bottom:0;left:calc(100% + var(--space-unit))}.popover-content-container.below-right.sc-z-popover-deprecated{left:0;top:calc(100% + var(--space-unit))}.popover-content-container.below-center.sc-z-popover-deprecated{left:50%;top:calc(100% + var(--space-unit));transform:translateX(-50%)}.popover-content-container.below-left.sc-z-popover-deprecated{right:0;top:calc(100% + var(--space-unit))}.popover-content-container.before-down.sc-z-popover-deprecated{top:0;right:calc(100% + var(--space-unit))}.popover-content-container.before-center.sc-z-popover-deprecated{top:50%;right:calc(100% + var(--space-unit));transform:translateY(-50%)}.popover-content-container.before-up.sc-z-popover-deprecated{bottom:0;right:calc(100% + var(--space-unit))}.popover-content-container.above-right.sc-z-popover-deprecated{left:0;bottom:calc(100% + var(--space-unit))}.popover-content-container.above-center.sc-z-popover-deprecated{left:50%;bottom:calc(100% + var(--space-unit));transform:translateX(-50%)}.popover-content-container.above-left.sc-z-popover-deprecated{right:0;bottom:calc(100% + var(--space-unit))}.popover-content-container.sc-z-popover-deprecated:before{display:none;position:absolute;content:\"\";width:8px;height:8px;z-index:-1;background-color:inherit;transform:rotate(45deg)}.popover-content-container.after-down.sc-z-popover-deprecated:before{top:12px;left:-4px;box-shadow:-1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.after-center.sc-z-popover-deprecated:before{top:calc(50% - 4px);left:-4px;box-shadow:-1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.after-up.sc-z-popover-deprecated:before{bottom:12px;left:-4px;box-shadow:-1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.below-right.sc-z-popover-deprecated:before{left:12px;top:-4px;box-shadow:-1px -1px 2px var(--shadow-arrow-below-color)}.popover-content-container.below-center.sc-z-popover-deprecated:before{left:calc(50% - 4px);top:-4px;box-shadow:-1px -1px 2px var(--shadow-arrow-below-color)}.popover-content-container.below-left.sc-z-popover-deprecated:before{right:12px;top:-4px;box-shadow:-1px -1px 2px var(--shadow-arrow-below-color)}.popover-content-container.before-down.sc-z-popover-deprecated:before{top:12px;right:-4px;box-shadow:1px -1px 1.5px var(--shadow-arrow-color)}.popover-content-container.before-center.sc-z-popover-deprecated:before{top:calc(50% - 4px);right:-4px;box-shadow:1px -1px 1.5px var(--shadow-arrow-color)}.popover-content-container.before-up.sc-z-popover-deprecated:before{bottom:12px;right:-4px;box-shadow:1px -1px 1.5px var(--shadow-arrow-color)}.popover-content-container.above-right.sc-z-popover-deprecated:before{left:12px;bottom:-4px;box-shadow:1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.above-center.sc-z-popover-deprecated:before{left:calc(50% - 4px);bottom:-4px;box-shadow:1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.above-left.sc-z-popover-deprecated:before{right:12px;bottom:-4px;box-shadow:1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.show-arrow.sc-z-popover-deprecated:before{display:block}";
+const stylesCss = ".sc-z-popover-deprecated-h{position:relative;display:inline-block;font-family:var(--dashboard-font);font-weight:var(--font-rg);--shadow-arrow-color:rgb(66 69 72 / 20%);--shadow-arrow-below-color:rgb(66 69 72 / 10%)}.popover-content-container.sc-z-popover-deprecated{position:absolute;z-index:999;min-width:64px;min-height:32px;box-sizing:border-box;visibility:hidden}.popover-content-container.visible.sc-z-popover-deprecated{visibility:visible}.popover-content-container.border-radius-none.sc-z-popover-deprecated{border-radius:0}.popover-content-container.border-radius-small.sc-z-popover-deprecated{border-radius:var(--border-radius-small)}.popover-content-container.border-radius-medium.sc-z-popover-deprecated{border-radius:var(--border-radius)}.popover-content-container.shadow-1.sc-z-popover-deprecated{box-shadow:var(--shadow-1)}.popover-content-container.shadow-2.sc-z-popover-deprecated{box-shadow:var(--shadow-2)}.popover-content-container.shadow-3.sc-z-popover-deprecated{box-shadow:var(--shadow-3)}.popover-content-container.shadow-4.sc-z-popover-deprecated{box-shadow:var(--shadow-4)}.popover-content-container.shadow-6.sc-z-popover-deprecated{box-shadow:var(--shadow-6)}.popover-content-container.shadow-8.sc-z-popover-deprecated{box-shadow:var(--shadow-8)}.popover-content-container.shadow-12.sc-z-popover-deprecated{box-shadow:var(--shadow-12)}.popover-content-container.shadow-16.sc-z-popover-deprecated{box-shadow:var(--shadow-16)}.popover-content-container.shadow-24.sc-z-popover-deprecated{box-shadow:var(--shadow-24)}.popover-content-container.after-down.sc-z-popover-deprecated{top:0;left:calc(100% + var(--space-unit))}.popover-content-container.after-center.sc-z-popover-deprecated{top:50%;left:calc(100% + var(--space-unit));transform:translateY(-50%)}.popover-content-container.after-up.sc-z-popover-deprecated{bottom:0;left:calc(100% + var(--space-unit))}.popover-content-container.below-right.sc-z-popover-deprecated{top:calc(100% + var(--space-unit));left:0}.popover-content-container.below-center.sc-z-popover-deprecated{top:calc(100% + var(--space-unit));left:50%;transform:translateX(-50%)}.popover-content-container.below-left.sc-z-popover-deprecated{top:calc(100% + var(--space-unit));right:0}.popover-content-container.before-down.sc-z-popover-deprecated{top:0;right:calc(100% + var(--space-unit))}.popover-content-container.before-center.sc-z-popover-deprecated{top:50%;right:calc(100% + var(--space-unit));transform:translateY(-50%)}.popover-content-container.before-up.sc-z-popover-deprecated{right:calc(100% + var(--space-unit));bottom:0}.popover-content-container.above-right.sc-z-popover-deprecated{bottom:calc(100% + var(--space-unit));left:0}.popover-content-container.above-center.sc-z-popover-deprecated{bottom:calc(100% + var(--space-unit));left:50%;transform:translateX(-50%)}.popover-content-container.above-left.sc-z-popover-deprecated{right:0;bottom:calc(100% + var(--space-unit))}.popover-content-container.sc-z-popover-deprecated::before{position:absolute;z-index:-1;display:none;width:8px;height:8px;background-color:inherit;content:\"\";transform:rotate(45deg)}.popover-content-container.after-down.sc-z-popover-deprecated::before{top:12px;left:-4px;box-shadow:-1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.after-center.sc-z-popover-deprecated::before{top:calc(50% - 4px);left:-4px;box-shadow:-1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.after-up.sc-z-popover-deprecated::before{bottom:12px;left:-4px;box-shadow:-1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.below-right.sc-z-popover-deprecated::before{top:-4px;left:12px;box-shadow:-1px -1px 2px var(--shadow-arrow-below-color)}.popover-content-container.below-center.sc-z-popover-deprecated::before{top:-4px;left:calc(50% - 4px);box-shadow:-1px -1px 2px var(--shadow-arrow-below-color)}.popover-content-container.below-left.sc-z-popover-deprecated::before{top:-4px;right:12px;box-shadow:-1px -1px 2px var(--shadow-arrow-below-color)}.popover-content-container.before-down.sc-z-popover-deprecated::before{top:12px;right:-4px;box-shadow:1px -1px 1.5px var(--shadow-arrow-color)}.popover-content-container.before-center.sc-z-popover-deprecated::before{top:calc(50% - 4px);right:-4px;box-shadow:1px -1px 1.5px var(--shadow-arrow-color)}.popover-content-container.before-up.sc-z-popover-deprecated::before{right:-4px;bottom:12px;box-shadow:1px -1px 1.5px var(--shadow-arrow-color)}.popover-content-container.above-right.sc-z-popover-deprecated::before{bottom:-4px;left:12px;box-shadow:1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.above-center.sc-z-popover-deprecated::before{bottom:-4px;left:calc(50% - 4px);box-shadow:1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.above-left.sc-z-popover-deprecated::before{right:12px;bottom:-4px;box-shadow:1px 1px 1.5px var(--shadow-arrow-color)}.popover-content-container.show-arrow.sc-z-popover-deprecated::before{display:block}";
 
 const ZPopoverDeprecated = class {
   /**
@@ -15,13 +13,13 @@ const ZPopoverDeprecated = class {
     registerInstance(this, hostRef);
     this.triggerClick = createEvent(this, "triggerClick", 7);
     /** [optional] Popover position */
-    this.position = PopoverPosition["after-up"];
+    this.position = PopoverPosition.AFTER_UP;
     /** [optional] Background color token for popover */
     this.backgroundColor = "color-white";
     /** [optional] Border radius token for popover */
-    this.borderRadius = PopoverBorderRadius.small;
+    this.borderRadius = PopoverBorderRadius.SMALL;
     /** [optional] Box shadow token for popover */
-    this.boxShadow = PopoverShadow["shadow-1"];
+    this.boxShadow = PopoverShadow.SHADOW_1;
     /** [optional] Show or hide arrow */
     this.showArrow = false;
     /** [optional] Sets padding for Popover container */
@@ -65,8 +63,7 @@ const ZPopoverDeprecated = class {
     }
     // If right is outside viewport
     if (r > width) {
-      if (this.position.startsWith("above") ||
-        this.position.startsWith("below")) {
+      if (this.position.startsWith("above") || this.position.startsWith("below")) {
         secondSide = "left";
       }
       else {
@@ -75,8 +72,7 @@ const ZPopoverDeprecated = class {
     }
     // If left is outside viewport
     if (l < 0) {
-      if (this.position.startsWith("above") ||
-        this.position.startsWith("below")) {
+      if (this.position.startsWith("above") || this.position.startsWith("below")) {
         secondSide = "right";
       }
       else {
@@ -91,7 +87,7 @@ const ZPopoverDeprecated = class {
     this.isVisible = false;
   }
   closePopoverWithKeyboard(e) {
-    if (e.key === KeyboardKeys.ESC) {
+    if (e.key === KeyboardCode.ESC) {
       this.closePopover();
     }
   }
@@ -101,7 +97,7 @@ const ZPopoverDeprecated = class {
     event.stopPropagation();
   }
   handleKeyDown(event) {
-    if (event.code === KeyboardKeys.ENTER) {
+    if (event.code === KeyboardCode.ENTER) {
       this.isVisible ? this.closePopover() : this.openPopover();
     }
   }
@@ -114,10 +110,17 @@ const ZPopoverDeprecated = class {
   }
   render() {
     return (h(Host, { onKeyDown: this.handleKeyDown }, h("div", { tabindex: "0", onClick: (event) => this.handleClick(event), onKeyDown: (event) => {
-        if (event.key === KeyboardKeys.ENTER) {
+        if (event.key === KeyboardCode.ENTER) {
           this.handleClick(event);
         }
-      } }, h("slot", { name: "trigger" })), h("div", { ref: (e) => (this.popoverElem = e), class: classnames("popover-content-container", this.popoverPosition, `border-radius-${this.borderRadius}`, this.boxShadow, { "show-arrow": this.showArrow }, { visible: this.isVisible }), style: {
+      } }, h("slot", { name: "trigger" })), h("div", { ref: (e) => (this.popoverElem = e), class: {
+        "popover-content-container": true,
+        [this.popoverPosition]: true,
+        [`border-radius-${this.borderRadius}`]: true,
+        [this.boxShadow]: true,
+        "show-arrow": this.showArrow,
+        "visible": this.isVisible,
+      }, style: {
         backgroundColor: `var(--${this.backgroundColor})`,
         padding: this.padding,
       } }, h("slot", { name: "popover" }))));

package/dist/esm/z-popover.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a2ca4b97.js';
-import { P as PopoverPositions, i as KeyboardKeys } from './index-8390ddaf.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-3517583d.js';
+import { P as PopoverPositions, h as KeyboardCode } from './index-9d028352.js';
 
-const stylesCss = ":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;align-items:center;justify-content:center;padding:var(--z-popover-padding);min-width:calc(var(--space-unit) * 8);min-height:calc(var(--space-unit) * 4);color:var(--z-popover-theme--text);fill:currentColor;font-family:var(--font-family-sans);text-align:center;border-radius:var(--border-radius-small);background:var(--z-popover-theme--surface);filter:var(--z-popover-shadow-filter)}: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)}: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));display:block;content:\"\";position:absolute;width:var(--arrow-size);height:var(--arrow-size);background:var(--z-popover-theme--surface);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(*){flex:1 auto;overflow:auto}";
+const stylesCss = ":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)}: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}";
 
-const documentElement = document.documentElement;
+const DOCUMENT_ELEMENT = document.documentElement;
 function getParentElement(element) {
   if (element.parentNode.host) {
     return element.parentNode.host;
@@ -17,24 +17,18 @@ function getParentElement(element) {
  */
 function findScrollableParent(element) {
   let parent = getParentElement(element);
-  while (parent && parent !== documentElement) {
+  while (parent && parent !== DOCUMENT_ELEMENT) {
     const { overflow, overflowX, overflowY } = window.getComputedStyle(parent);
-    if (overflow === "hidden" ||
-      overflowY === "hidden" ||
-      overflowX === "hidden") {
+    if (overflow === "hidden" || overflowY === "hidden" || overflowX === "hidden") {
       return parent;
     }
-    if ((parent.scrollHeight > parent.clientHeight &&
-      overflow !== "visible" &&
-      overflowY !== "visible") ||
-      (parent.scrollWidth > parent.clientWidth &&
-        overflow !== "visible" &&
-        overflowX !== "visible")) {
+    if ((parent.scrollHeight > parent.clientHeight && overflow !== "visible" && overflowY !== "visible") ||
+      (parent.scrollWidth > parent.clientWidth && overflow !== "visible" && overflowX !== "visible")) {
       return parent;
     }
     parent = getParentElement(parent);
   }
-  return documentElement;
+  return DOCUMENT_ELEMENT;
 }
 /**
  * Calculate computed offset.
@@ -96,7 +90,7 @@ const ZPopover = class {
     this.positionChange = createEvent(this, "positionChange", 7);
     this.openChange = createEvent(this, "openChange", 7);
     /** Popover position. */
-    this.position = PopoverPositions.auto;
+    this.position = PopoverPositions.AUTO;
     /**
      * The open state of the popover.
      */
@@ -115,7 +109,7 @@ const ZPopover = class {
     this.closable = true;
   }
   closePopoverWithKeyboard(e) {
-    if (this.closable && e.key === KeyboardKeys.ESC) {
+    if (this.closable && e.key === KeyboardCode.ESC) {
       this.open = false;
     }
   }
@@ -123,6 +117,7 @@ const ZPopover = class {
     if (!this.closable) {
       return;
     }
+    // @ts-ignore
     const parent = e.path.find((elem) => elem === this.host);
     if (!parent) {
       this.open = false;
@@ -130,9 +125,8 @@ const ZPopover = class {
     }
   }
   validatePosition(newValue) {
-    if (newValue &&
-      !Object.values(PopoverPositions).includes(newValue)) {
-      this.position = PopoverPositions.auto;
+    if (newValue && !Object.values(PopoverPositions).includes(newValue)) {
+      this.position = PopoverPositions.AUTO;
     }
     this.currentPosition = this.position;
     this.positionChange.emit({ position: this.currentPosition });
@@ -151,8 +145,8 @@ const ZPopover = class {
       };
       setPosition();
     }
-    else if (this.host.hasAttribute('current-position')) {
-      this.host.removeAttribute('current-position');
+    else if (this.host.hasAttribute("current-position")) {
+      this.host.removeAttribute("current-position");
       this.currentPosition = undefined;
     }
     this.openChange.emit({ open: this.open });
@@ -185,19 +179,11 @@ const ZPopover = class {
       : { top: 0, right: 0, bottom: 0, left: 0 };
     const boundingRect = computeOffset(element, scrollContainer);
     const top = boundingRect.top - scrollContainer.scrollTop;
-    const bottom = scrollingBoundingRect.height -
-      (boundingRect.top + boundingRect.height) +
-      scrollContainer.scrollTop;
+    const bottom = scrollingBoundingRect.height - (boundingRect.top + boundingRect.height) + scrollContainer.scrollTop;
     const left = boundingRect.left - scrollContainer.scrollLeft;
-    const right = scrollingBoundingRect.width -
-      (boundingRect.left + boundingRect.width) +
-      scrollContainer.scrollLeft;
-    const overflowBottom = Math.max(0, scrollingBoundingRect.top +
-      scrollingBoundingRect.height -
-      window.innerHeight);
-    const overflowRight = Math.max(0, scrollingBoundingRect.left +
-      scrollingBoundingRect.width -
-      window.innerWidth);
+    const right = scrollingBoundingRect.width - (boundingRect.left + boundingRect.width) + scrollContainer.scrollLeft;
+    const overflowBottom = Math.max(0, scrollingBoundingRect.top + scrollingBoundingRect.height - window.innerHeight);
+    const overflowRight = Math.max(0, scrollingBoundingRect.left + scrollingBoundingRect.width - window.innerWidth);
     const availableTop = Math.min(top, top + scrollingBoundingRect.top);
     const availableBottom = Math.min(bottom, bottom - overflowBottom);
     const availableLeft = Math.min(left, left + scrollingBoundingRect.left);
@@ -206,28 +192,28 @@ const ZPopover = class {
     const availableWidth = availableLeft + availableRight + boundingRect.width;
     let position = this.currentPosition;
     const positions = [];
-    if (this.position === PopoverPositions.auto) {
+    if (this.position === PopoverPositions.AUTO) {
       /**
        * The `AUTO` position tries to place the popover in the 'safest' area,
        * where there's more space available.
        */
       if (availableLeft / availableWidth > 0.6) {
-        positions.push(PopoverPositions.left);
+        positions.push(PopoverPositions.LEFT);
       }
       else if (availableLeft / availableWidth < 0.4) {
-        positions.push(PopoverPositions.right);
+        positions.push(PopoverPositions.RIGHT);
       }
       if (availableTop / availableHeight > 0.9) {
-        positions.unshift(PopoverPositions.top);
+        positions.unshift(PopoverPositions.TOP);
       }
       else if (availableTop / availableHeight > 0.6) {
-        positions.push(PopoverPositions.top);
+        positions.push(PopoverPositions.TOP);
       }
       else if (availableTop / availableHeight < 0.1) {
-        positions.unshift(PopoverPositions.bottom);
+        positions.unshift(PopoverPositions.BOTTOM);
       }
       else {
-        positions.push(PopoverPositions.bottom);
+        positions.push(PopoverPositions.BOTTOM);
       }
       position = positions.join("_");
     }
@@ -239,18 +225,17 @@ const ZPopover = class {
     const offsetLeft = boundingRect.left - relativeBoundingRect.left;
     const offsetModifier = this.center ? 0.5 : 0;
     const sizeModifier = this.center ? 0.5 : 0;
-    if (position === PopoverPositions.top ||
-      position === PopoverPositions.top_right) {
+    if (position === PopoverPositions.TOP || position === PopoverPositions.TOP_RIGHT) {
       style.top = "auto";
       style.right = "auto";
       style.bottom = `${offsetBottom + boundingRect.height}px`;
       style.left = `${offsetLeft + boundingRect.width * offsetModifier}px`;
       style.maxHeight = `${availableTop}px`;
-      if (position === PopoverPositions.top_right) {
+      if (position === PopoverPositions.TOP_RIGHT) {
         style.maxWidth = `${availableRight + boundingRect.width * sizeModifier}px`;
       }
     }
-    else if (position === PopoverPositions.top_left) {
+    else if (position === PopoverPositions.TOP_LEFT) {
       style.top = "auto";
       style.right = `${offsetRight + boundingRect.width * offsetModifier}px`;
       style.bottom = `${offsetBottom + boundingRect.height}px`;
@@ -258,18 +243,17 @@ const ZPopover = class {
       style.maxWidth = `${availableLeft}px`;
       style.maxHeight = `${availableTop}px`;
     }
-    else if (position === PopoverPositions.bottom ||
-      position === PopoverPositions.bottom_right) {
+    else if (position === PopoverPositions.BOTTOM || position === PopoverPositions.BOTTOM_RIGHT) {
       style.top = `${offsetTop + boundingRect.height}px`;
       style.right = "auto";
       style.bottom = "auto";
       style.left = `${offsetLeft + boundingRect.width * offsetModifier}px`;
       style.maxHeight = `${availableBottom}px`;
-      if (position === PopoverPositions.bottom_right) {
+      if (position === PopoverPositions.BOTTOM_RIGHT) {
         style.maxWidth = `${availableRight + boundingRect.width * sizeModifier}px`;
       }
     }
-    else if (position === PopoverPositions.bottom_left) {
+    else if (position === PopoverPositions.BOTTOM_LEFT) {
       style.top = `${offsetTop + boundingRect.height}px`;
       style.right = `${offsetRight + boundingRect.width * offsetModifier}px`;
       style.bottom = "auto";
@@ -277,8 +261,7 @@ const ZPopover = class {
       style.maxWidth = `${availableLeft}px`;
       style.maxHeight = `${availableBottom}px`;
     }
-    else if (position === PopoverPositions.right ||
-      position === PopoverPositions.right_bottom) {
+    else if (position === PopoverPositions.RIGHT || position === PopoverPositions.RIGHT_BOTTOM) {
       style.top = `${offsetTop + boundingRect.height * offsetModifier}px`;
       style.right = "auto";
       style.bottom = "auto";
@@ -286,7 +269,7 @@ const ZPopover = class {
       style.maxWidth = `${availableRight}px`;
       style.maxHeight = `${availableBottom + boundingRect.height * sizeModifier}px`;
     }
-    else if (position === PopoverPositions.right_top) {
+    else if (position === PopoverPositions.RIGHT_TOP) {
       style.top = "auto";
       style.right = "auto";
       style.bottom = `${offsetBottom + boundingRect.height * offsetModifier}px`;
@@ -294,8 +277,7 @@ const ZPopover = class {
       style.maxWidth = `${availableRight}px`;
       style.maxHeight = `${availableTop + boundingRect.height * sizeModifier}px`;
     }
-    else if (position === PopoverPositions.left ||
-      position === PopoverPositions.left_bottom) {
+    else if (position === PopoverPositions.LEFT || position === PopoverPositions.LEFT_BOTTOM) {
       style.top = `${offsetTop + boundingRect.height * offsetModifier}px`;
       style.right = `${offsetRight + boundingRect.width}px`;
       style.bottom = "auto";
@@ -303,7 +285,7 @@ const ZPopover = class {
       style.maxWidth = `${availableLeft}px`;
       style.maxHeight = `${availableBottom + boundingRect.height * sizeModifier}px`;
     }
-    else if (position === PopoverPositions.left_top) {
+    else if (position === PopoverPositions.LEFT_TOP) {
       style.top = "auto";
       style.right = `${offsetRight + boundingRect.width}px`;
       style.bottom = `${offsetBottom + boundingRect.height * offsetModifier}px`;
@@ -312,7 +294,7 @@ const ZPopover = class {
       style.maxHeight = `${availableTop + boundingRect.height * sizeModifier}px`;
     }
     this.currentPosition = position || this.position;
-    this.host.setAttribute('current-position', this.currentPosition);
+    this.host.setAttribute("current-position", this.currentPosition);
   }
   componentWillLoad() {
     this.validatePosition(this.position);

package/dist/esm/z-section-title.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, g as getElement } from './index-a2ca4b97.js';
-import { F as ZSectionTitleDividerPositions, D as DividerSize } from './index-8390ddaf.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-3517583d.js';
+import { z as ZSectionTitleDividerPosition, D as DividerSize } from './index-9d028352.js';
 
-const stylesCss = ":host{--z-section-title--divider-color:var(--red500);display:flex;flex-direction:column;align-items:flex-start;width:fit-content;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);text-transform:uppercase;font-size:var(--font-size-3);line-height:1.5rem}::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}@media (min-width: 1152px){::slotted([slot=\"primary-title\"]){font-size:var(--font-size-7);line-height:2.25rem}}";
+const stylesCss = ":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}@media (min-width: 1152px){::slotted([slot=\"primary-title\"]){font-size:var(--font-size-7);line-height:2.25rem}}";
 
 const ZSectionTitle = class {
   constructor(hostRef) {
@@ -10,7 +10,7 @@ const ZSectionTitle = class {
      * Divider position for the primary title.
      * This prop only works if the secondary title is not set.
      */
-    this.dividerPosition = ZSectionTitleDividerPositions.before;
+    this.dividerPosition = ZSectionTitleDividerPosition.BEFORE;
     /**
      * Whether the primary title text is uppercase.
      */
@@ -20,16 +20,7 @@ const ZSectionTitle = class {
     this.hasSecondaryTitle = !!this.host.querySelector("[slot=secondary-title]");
   }
   render() {
-    return [
-      h("slot", { name: "secondary-title" }),
-      !this.hasSecondaryTitle &&
-        this.dividerPosition == ZSectionTitleDividerPositions.before &&
-        h("z-divider", { size: DividerSize.large, color: "z-section-title--divider-color" }),
-      h("slot", { name: "primary-title" }),
-      !this.hasSecondaryTitle &&
-        this.dividerPosition == ZSectionTitleDividerPositions.after &&
-        h("z-divider", { size: DividerSize.large, color: "z-section-title--divider-color" }),
-    ];
+    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" }))));
   }
   get host() { return getElement(this); }
 };

package/dist/esm/z-skip-to-content.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-a2ca4b97.js';
-import { a as getElementTree, h as handleKeyboardSubmit } from './utils-2c5dfb88.js';
-import { T as ThemeVariant } from './index-8390ddaf.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-3517583d.js';
+import { a as getElementTree, h as handleKeyboardSubmit } from './utils-39ca028c.js';
+import { T as ThemeVariant } from './index-9d028352.js';
 import './breakpoints-c386984e.js';
 
-const stylesCss = ".sc-z-skip-to-content-h{font-family:var(--font-family-sans);font-weight:var(--font-rg);position:absolute;left:-100%;background-color:#24f4ff;padding:calc(var(--space-unit) * 1.25) calc(var(--space-unit) * 3);height:60px;box-sizing:border-box}.skip-to-content-visible.sc-z-skip-to-content-h,.sc-z-skip-to-content-h:focus{position:static;display:block}.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content{display:block;text-align:center}.sc-z-skip-to-content-h>z-link.link-invisible.sc-z-skip-to-content{height:0;width:0;overflow:hidden}.sc-z-skip-to-content-h>z-link.link-visible.sc-z-skip-to-content{height:initial;width:initial}.dark.sc-z-skip-to-content-h{background-color:var(--bg-grey-800);color:var(--color-white)}.light.sc-z-skip-to-content-h{background-color:var(--bg-white);color:var(--text-grey-800);border:2px solid var(--text-grey-800)}@media (min-width: 768px){.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content{text-align:left}}@media (min-width: 1152px){.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content{display:inline-block;padding:0 calc(var(--space-unit) * 3);border-right:1px solid var(--bg-grey-800)}.sc-z-skip-to-content-h>z-link.link-invisible.sc-z-skip-to-content{height:initial;width:initial;overflow:initial}.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content:first-child{padding-left:0}.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content:last-child,.dark.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content:last-child,.light.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content:last-child{border-right:none;padding-right:0}.dark.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content{border-right:1px solid var(--bg-white)}}";
+const stylesCss = ".sc-z-skip-to-content-h{position:absolute;left:-100%;height:60px;box-sizing:border-box;padding:calc(var(--space-unit) * 1.25) calc(var(--space-unit) * 3);background-color:#24f4ff;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.skip-to-content-visible.sc-z-skip-to-content-h,.sc-z-skip-to-content-h:focus{position:static;display:block}.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content{display:block;text-align:center}.sc-z-skip-to-content-h>z-link.link-invisible.sc-z-skip-to-content{overflow:hidden;width:0;height:0}.sc-z-skip-to-content-h>z-link.link-visible.sc-z-skip-to-content{width:initial;height:initial}.dark.sc-z-skip-to-content-h{background-color:var(--bg-grey-800);color:var(--color-white)}.light.sc-z-skip-to-content-h{border:2px solid var(--text-grey-800);background-color:var(--bg-white);color:var(--text-grey-800)}@media (min-width: 768px){.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content{text-align:left}}@media (min-width: 1152px){.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content{display:inline-block;padding:0 calc(var(--space-unit) * 3);border-right:1px solid var(--bg-grey-800)}.sc-z-skip-to-content-h>z-link.link-invisible.sc-z-skip-to-content{overflow:initial;width:initial;height:initial}.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content:first-child{padding-left:0}.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content:last-child,.dark.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content:last-child,.light.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content:last-child{padding-right:0;border-right:none}.dark.sc-z-skip-to-content-h>z-link.sc-z-skip-to-content{border-right:1px solid var(--bg-white)}}";
 
 const ZSkipToContent = class {
   constructor(hostRef) {
@@ -14,47 +14,45 @@ const ZSkipToContent = class {
     this.visibleLink = "";
   }
   handleFocusOutSkipToContent(e) {
-    if (this.isInSkipToContent(e.target))
+    if (this.isInSkipToContent(e.target)) {
       this.visible = false;
+    }
   }
   handleFocusSkipToContent(e) {
-    if (this.isInSkipToContent(e.target))
+    if (this.isInSkipToContent(e.target)) {
       this.visible = true;
+    }
   }
   componentDidLoad() {
     this.showFirstChild();
   }
   componentWillRender() {
     if (this.links) {
-      this.links =
-        typeof this.links === "string" ? JSON.parse(this.links) : this.links;
+      this.links = typeof this.links === "string" ? JSON.parse(this.links) : this.links;
     }
   }
   isInSkipToContent(elem) {
     const tree = getElementTree(elem);
     const menuParent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-skip-to-content");
-    if (menuParent)
-      return true;
-    return false;
-  }
-  getFirstChild() {
-    const children = this.hostElement.children;
-    if (children.length)
-      return children[0];
-    return false;
+    return !!menuParent;
   }
   showFirstChild() {
-    const firstChild = this.getFirstChild();
-    if (firstChild)
+    var _a;
+    const firstChild = (_a = this.hostElement.children) === null || _a === void 0 ? void 0 : _a[0];
+    if (firstChild) {
       this.visibleLink = firstChild.id;
+    }
   }
   handleLinkClick() {
     this.visible = false;
   }
   render() {
-    return (h(Host, { class: `${this.variant} ${this.visible && "skip-to-content-visible"} `, ref: (el) => el }, this.links.map((link, i) => {
+    return (h(Host, { class: {
+        [this.variant]: true,
+        "skip-to-content-visible": this.visible,
+      } }, this.links.map((link, i) => {
       const id = `skip-to-content-${i}`;
-      return (h("z-link", { id: id, underline: true, "aria-label": link.ariaLabel || link.label, class: `body-1-sb ${id == this.visibleLink ? "link-visible" : "link-invisible"}`, href: link.href, textcolor: this.variant === ThemeVariant.dark ? "white" : "black", onFocus: () => (this.visibleLink = id), onClick: () => this.handleLinkClick(), onKeyUp: (e) => handleKeyboardSubmit(e, this.handleLinkClick.bind(this)) }, link.label));
+      return (h("z-link", { id: id, underline: true, "aria-label": link.ariaLabel || link.label, class: `body-1-sb ${id == this.visibleLink ? "link-visible" : "link-invisible"}`, href: link.href, textcolor: this.variant === ThemeVariant.DARK ? "white" : "black", onFocus: () => (this.visibleLink = id), onClick: () => this.handleLinkClick(), onKeyUp: (e) => handleKeyboardSubmit(e, this.handleLinkClick.bind(this)) }, link.label));
     })));
   }
   get hostElement() { return getElement(this); }