@getflip/swirl-components 0.3.0 → 0.4.0

package/dist/collection/components/flip-lightbox/flip-lightbox.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-lightbox.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-lightbox/flip-lightbox.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,qBAAqB,CAAC;AAEvC,eAAe;EACb,SAAS,EAAE,eAAe;EAC1B,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;MACV,MAAM,EAAE;QACN,IAAI,EAAE;;;;;;;;;;UAUJ;OACH;KACF;GACF;EACD,KAAK,EAAE,yBAAyB;CACjC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;EAChD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;EACtD,MAAM,OAAO,GAAG,oBAAoB,CAClC,eAAe,EACf,IAAI,CACsB,CAAC;EAE7B,OAAO,CAAC,KAAK,GAAG,eAAe,CAAC;EAChC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC;EAExD,OAAO,CAAC,SAAS,GAAG;;;;;GAKnB,CAAC;EAEF,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;EAEnC,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE9C,YAAY,CAAC,IAAI,GAAG;EAClB,KAAK,EAAE,UAAU;CAClB,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-lightbox.mdx\";\n\nexport default {\n  component: \"flip-lightbox\",\n  parameters: {\n    docs: {\n      page: Docs,\n      source: {\n        code: `<flip-lightbox id=\"lightbox\" label=\"Lightbox\">\n  <flip-file-viewer description=\"Cute dog in a blaket.\" file=\"/sample.jpg\" type=\"image/jpeg\"></flip-file-viewer>\n  <flip-file-viewer description=\"Another cute dog in a blanket.\" file=\"/sample-2.jpg\" type=\"image/jpeg\"></flip-file-viewer>\n  <flip-file-viewer description=\"Black puppy.\" file=\"/sample-3.jpg\" type=\"image/jpeg\"></flip-file-viewer>\n  <flip-file-viewer file=\"/sample.mp4\" type=\"video/mp4\"></flip-file-viewer>\n</flip-lightbox>\n\n<script>\n  const lightbox = document.body.querySelector('#lightbox');\n  lightbox.open();\n</script>`,\n      },\n    },\n  },\n  title: \"Components/FlipLightbox\",\n};\n\nconst Template = (args) => {\n  const container = document.createElement(\"div\");\n  const trigger = document.createElement(\"flip-button\");\n  const element = generateStoryElement(\n    \"flip-lightbox\",\n    args\n  ) as HTMLFlipLightboxElement;\n\n  trigger.label = \"Open lightbox\";\n  trigger.addEventListener(\"click\", () => element.open());\n\n  element.innerHTML = `\n    <flip-file-viewer description=\"Cute dog in a blanket.\" file=\"/sample.jpg\" type=\"image/jpeg\"></flip-file-viewer>\n    <flip-file-viewer description=\"Another cute dog in a blanket.\" file=\"/sample-2.jpg\" type=\"image/jpeg\"></flip-file-viewer>\n    <flip-file-viewer description=\"Black puppy.\" file=\"/sample-3.jpg\" type=\"image/jpeg\"></flip-file-viewer>\n    <flip-file-viewer file=\"/sample.mp4\" type=\"video/mp4\"></flip-file-viewer>\n  `;\n\n  container.append(trigger, element);\n\n  return container;\n};\n\nexport const FlipLightbox = Template.bind({});\n\nFlipLightbox.args = {\n  label: \"Lightbox\",\n};\n"]}

package/dist/collection/components/flip-modal/flip-modal.css

@@ -64,6 +64,17 @@
 }
   }
 
+@media (min-width: 768px) {
+
+.modal--scrollable .modal__content {
+      padding-bottom: 0
+  }
+    }
+
+.modal--scrollable:not(.modal--scrolled-down) .modal__controls {
+      border-top: var(--s-border-width-default) solid var(--s-border-default);
+    }
+
 @media (min-width: 768px) {
     .modal--scrolled .modal__header {
       border-bottom: var(--s-border-width-default) solid var(--s-border-default);
@@ -93,7 +104,7 @@
     max-width: 33.75rem;
     height: auto;
     max-height: 90vh;
-    border-radius: var(--s-border-radius-xl);
+    border-radius: var(--s-border-radius-base);
     box-shadow: 0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.14)
 }
   }
@@ -129,6 +140,7 @@
 @media (min-width: 768px) {
 
 .modal__header {
+    height: 4.125rem;
     padding-top: var(--s-space-24);
     padding-right: calc(var(--s-space-16) + 2.5rem + var(--s-space-8));
     padding-bottom: var(--s-space-16);
@@ -167,7 +179,7 @@
 .modal__content {
     padding-top: 0;
     padding-right: var(--s-space-24);
-    padding-bottom: var(--s-space-32);
+    padding-bottom: var(--s-space-16);
     padding-left: var(--s-space-24)
 }
   }
@@ -180,7 +192,6 @@
   padding-left: var(--s-space-24);
   flex-shrink: 0;
   justify-content: flex-end;
-  border-top: var(--s-border-width-default) solid var(--s-border-default);
 }
 
 @-webkit-keyframes modal-scale-in {

package/dist/collection/components/flip-modal/flip-modal.js

@@ -6,7 +6,9 @@ export class FlipModal {
   constructor() {
     this.closeButtonLabel = "Close modal";
     this.closing = false;
+    this.scrollable = false;
     this.scrolled = false;
+    this.scrolledDown = false;
     this.onKeyDown = (event) => {
       if (event.code === "Escape") {
         this.close();
@@ -27,11 +29,19 @@ export class FlipModal {
       this.close();
     };
     this.determineScrollStatus = () => {
-      var _a;
+      var _a, _b, _c, _d, _e, _f;
       const scrolled = ((_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.scrollTop) > 0;
+      const scrolledDown = Math.ceil(((_b = this.scrollContainer) === null || _b === void 0 ? void 0 : _b.scrollTop) + ((_c = this.scrollContainer) === null || _c === void 0 ? void 0 : _c.offsetHeight)) >= ((_d = this.scrollContainer) === null || _d === void 0 ? void 0 : _d.scrollHeight);
+      const scrollable = ((_e = this.scrollContainer) === null || _e === void 0 ? void 0 : _e.scrollHeight) > ((_f = this.scrollContainer) === null || _f === void 0 ? void 0 : _f.offsetHeight);
       if (scrolled !== this.scrolled) {
         this.scrolled = scrolled;
       }
+      if (scrolledDown !== this.scrolledDown) {
+        this.scrolledDown = scrolledDown;
+      }
+      if (scrollable !== this.scrollable) {
+        this.scrollable = scrollable;
+      }
     };
   }
   componentDidLoad() {
@@ -77,7 +87,9 @@ export class FlipModal {
   render() {
     const className = classnames("modal", {
       "modal--closing": this.closing,
+      "modal--scrollable": this.scrollable,
       "modal--scrolled": this.scrolled,
+      "modal--scrolled-down": this.scrolledDown,
     });
     return (h(Host, null,
       h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "modal", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) },
@@ -174,7 +186,9 @@ export class FlipModal {
   }; }
   static get states() { return {
     "closing": {},
-    "scrolled": {}
+    "scrollable": {},
+    "scrolled": {},
+    "scrolledDown": {}
   }; }
   static get events() { return [{
       "method": "primaryAction",

package/dist/collection/components/flip-modal/flip-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"flip-modal.js","sourceRoot":"","sources":["../../../../src/components/flip-modal/flip-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport A11yDialog from \"a11y-dialog\";\nimport { disableBodyScroll, enableBodyScroll } from \"body-scroll-lock\";\nimport classnames from \"classnames\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-modal.css\",\n  tag: \"flip-modal\",\n})\nexport class FlipModal {\n  @Prop() closeButtonLabel?: string = \"Close modal\";\n  @Prop() label!: string;\n  @Prop() primaryActionLabel?: string;\n  @Prop() secondaryActionLabel?: string;\n\n  @Event() primaryAction: EventEmitter<MouseEvent>;\n  @Event() secondaryAction: EventEmitter<MouseEvent>;\n\n  @State() closing = false;\n  @State() scrolled = false;\n\n  private modal: A11yDialog;\n  private modalEl: HTMLElement;\n  private scrollContainer: HTMLElement;\n\n  componentDidLoad() {\n    this.modal = new A11yDialog(this.modalEl);\n    this.determineScrollStatus();\n  }\n\n  disconnectedCallback() {\n    this.modal?.destroy();\n    this.unlockBodyScroll();\n  }\n\n  @Listen(\"resize\", { target: \"window\" })\n  onWindowResize() {\n    this.determineScrollStatus();\n  }\n\n  /**\n   * Open the modal.\n   */\n  @Method()\n  async open() {\n    this.modal.show();\n    this.lockBodyScroll();\n    this.determineScrollStatus();\n  }\n\n  /**\n   * Close the modal.\n   */\n  @Method()\n  async close() {\n    if (this.closing) {\n      return;\n    }\n\n    this.closing = true;\n    this.unlockBodyScroll();\n\n    setTimeout(() => {\n      this.modal.hide();\n      this.closing = false;\n    }, 150);\n  }\n\n  onKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"Escape\") {\n      this.close();\n    }\n  };\n\n  private onBackdropClick = () => {\n    this.close();\n  };\n\n  private onCloseButtonClick = () => {\n    this.close();\n  };\n\n  private onPrimaryAction = (event: MouseEvent) => {\n    this.primaryAction.emit(event);\n    this.close();\n  };\n\n  private onSecondaryAction = (event: MouseEvent) => {\n    this.secondaryAction.emit(event);\n    this.close();\n  };\n\n  private determineScrollStatus = () => {\n    const scrolled = this.scrollContainer?.scrollTop > 0;\n\n    if (scrolled !== this.scrolled) {\n      this.scrolled = scrolled;\n    }\n  };\n\n  private lockBodyScroll() {\n    disableBodyScroll(this.scrollContainer);\n  }\n\n  private unlockBodyScroll() {\n    enableBodyScroll(this.scrollContainer);\n  }\n\n  render() {\n    const className = classnames(\"modal\", {\n      \"modal--closing\": this.closing,\n      \"modal--scrolled\": this.scrolled,\n    });\n\n    return (\n      <Host>\n        <section\n          aria-hidden=\"true\"\n          aria-label={this.label}\n          class={className}\n          id=\"modal\"\n          onKeyDown={this.onKeyDown}\n          ref={(el) => (this.modalEl = el)}\n        >\n          <div class=\"modal__backdrop\" onClick={this.onBackdropClick}></div>\n          <div class=\"modal__body\" role=\"document\">\n            <flip-button\n              class=\"modal__close-button\"\n              hideLabel\n              icon=\"<flip-icon-close></flip-icon-close>\"\n              label={this.closeButtonLabel}\n              onClick={this.onCloseButtonClick}\n            ></flip-button>\n            <header class=\"modal__header\">\n              <flip-heading\n                as=\"h2\"\n                class=\"modal__heading\"\n                level={3}\n                text={this.label}\n              ></flip-heading>\n            </header>\n            <div\n              class=\"modal__content\"\n              onScroll={this.determineScrollStatus}\n              ref={(el) => (this.scrollContainer = el)}\n            >\n              <slot></slot>\n            </div>\n            <footer class=\"modal__controls\">\n              <flip-button-group wrap>\n                {this.secondaryActionLabel && (\n                  <flip-button\n                    label={this.secondaryActionLabel}\n                    onClick={this.onSecondaryAction}\n                  ></flip-button>\n                )}\n                {this.primaryActionLabel && (\n                  <flip-button\n                    intent=\"primary\"\n                    label={this.primaryActionLabel}\n                    onClick={this.onPrimaryAction}\n                    variant=\"flat\"\n                  ></flip-button>\n                )}\n              </flip-button-group>\n            </footer>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"flip-modal.js","sourceRoot":"","sources":["../../../../src/components/flip-modal/flip-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport A11yDialog from \"a11y-dialog\";\nimport { disableBodyScroll, enableBodyScroll } from \"body-scroll-lock\";\nimport classnames from \"classnames\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-modal.css\",\n  tag: \"flip-modal\",\n})\nexport class FlipModal {\n  @Prop() closeButtonLabel?: string = \"Close modal\";\n  @Prop() label!: string;\n  @Prop() primaryActionLabel?: string;\n  @Prop() secondaryActionLabel?: string;\n\n  @Event() primaryAction: EventEmitter<MouseEvent>;\n  @Event() secondaryAction: EventEmitter<MouseEvent>;\n\n  @State() closing = false;\n  @State() scrollable = false;\n  @State() scrolled = false;\n  @State() scrolledDown = false;\n\n  private modal: A11yDialog;\n  private modalEl: HTMLElement;\n  private scrollContainer: HTMLElement;\n\n  componentDidLoad() {\n    this.modal = new A11yDialog(this.modalEl);\n    this.determineScrollStatus();\n  }\n\n  disconnectedCallback() {\n    this.modal?.destroy();\n    this.unlockBodyScroll();\n  }\n\n  @Listen(\"resize\", { target: \"window\" })\n  onWindowResize() {\n    this.determineScrollStatus();\n  }\n\n  /**\n   * Open the modal.\n   */\n  @Method()\n  async open() {\n    this.modal.show();\n    this.lockBodyScroll();\n    this.determineScrollStatus();\n  }\n\n  /**\n   * Close the modal.\n   */\n  @Method()\n  async close() {\n    if (this.closing) {\n      return;\n    }\n\n    this.closing = true;\n    this.unlockBodyScroll();\n\n    setTimeout(() => {\n      this.modal.hide();\n      this.closing = false;\n    }, 150);\n  }\n\n  onKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"Escape\") {\n      this.close();\n    }\n  };\n\n  private onBackdropClick = () => {\n    this.close();\n  };\n\n  private onCloseButtonClick = () => {\n    this.close();\n  };\n\n  private onPrimaryAction = (event: MouseEvent) => {\n    this.primaryAction.emit(event);\n    this.close();\n  };\n\n  private onSecondaryAction = (event: MouseEvent) => {\n    this.secondaryAction.emit(event);\n    this.close();\n  };\n\n  private determineScrollStatus = () => {\n    const scrolled = this.scrollContainer?.scrollTop > 0;\n\n    const scrolledDown =\n      Math.ceil(\n        this.scrollContainer?.scrollTop + this.scrollContainer?.offsetHeight\n      ) >= this.scrollContainer?.scrollHeight;\n\n    const scrollable =\n      this.scrollContainer?.scrollHeight > this.scrollContainer?.offsetHeight;\n\n    if (scrolled !== this.scrolled) {\n      this.scrolled = scrolled;\n    }\n\n    if (scrolledDown !== this.scrolledDown) {\n      this.scrolledDown = scrolledDown;\n    }\n\n    if (scrollable !== this.scrollable) {\n      this.scrollable = scrollable;\n    }\n  };\n\n  private lockBodyScroll() {\n    disableBodyScroll(this.scrollContainer);\n  }\n\n  private unlockBodyScroll() {\n    enableBodyScroll(this.scrollContainer);\n  }\n\n  render() {\n    const className = classnames(\"modal\", {\n      \"modal--closing\": this.closing,\n      \"modal--scrollable\": this.scrollable,\n      \"modal--scrolled\": this.scrolled,\n      \"modal--scrolled-down\": this.scrolledDown,\n    });\n\n    return (\n      <Host>\n        <section\n          aria-hidden=\"true\"\n          aria-label={this.label}\n          class={className}\n          id=\"modal\"\n          onKeyDown={this.onKeyDown}\n          ref={(el) => (this.modalEl = el)}\n        >\n          <div class=\"modal__backdrop\" onClick={this.onBackdropClick}></div>\n          <div class=\"modal__body\" role=\"document\">\n            <flip-button\n              class=\"modal__close-button\"\n              hideLabel\n              icon=\"<flip-icon-close></flip-icon-close>\"\n              label={this.closeButtonLabel}\n              onClick={this.onCloseButtonClick}\n            ></flip-button>\n            <header class=\"modal__header\">\n              <flip-heading\n                as=\"h2\"\n                class=\"modal__heading\"\n                level={3}\n                text={this.label}\n              ></flip-heading>\n            </header>\n            <div\n              class=\"modal__content\"\n              onScroll={this.determineScrollStatus}\n              ref={(el) => (this.scrollContainer = el)}\n            >\n              <slot></slot>\n            </div>\n            <footer class=\"modal__controls\">\n              <flip-button-group wrap>\n                {this.secondaryActionLabel && (\n                  <flip-button\n                    label={this.secondaryActionLabel}\n                    onClick={this.onSecondaryAction}\n                  ></flip-button>\n                )}\n                {this.primaryActionLabel && (\n                  <flip-button\n                    intent=\"primary\"\n                    label={this.primaryActionLabel}\n                    onClick={this.onPrimaryAction}\n                    variant=\"flat\"\n                  ></flip-button>\n                )}\n              </flip-button-group>\n            </footer>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-popover/flip-popover.css

@@ -128,7 +128,7 @@
     bottom: unset;
     left: unset;
     max-width: 22.5rem;
-    border-radius: var(--s-border-radius-xl);
+    border-radius: var(--s-border-radius-sm);
     -webkit-animation: none;
             animation: none;
     box-shadow: 0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14)

package/dist/collection/components/flip-popover/flip-popover.js

@@ -50,6 +50,9 @@ export class FlipPopover {
         strategy: "fixed",
       });
     };
+    this.onCloseButtonClick = () => {
+      this.close();
+    };
   }
   componentDidLoad() {
     this.connectTrigger();
@@ -84,7 +87,7 @@ export class FlipPopover {
       this.updateTriggerAttributes();
     }, 150);
     this.unlockBodyScroll();
-    (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+    (_a = this.getNativeTriggerElement()) === null || _a === void 0 ? void 0 : _a.focus();
   }
   /**
    * Open the popover.
@@ -111,23 +114,28 @@ export class FlipPopover {
     });
   }
   connectTrigger() {
-    var _a;
-    const triggerComponent = querySelectorAllDeep(document.body, `#${this.trigger}`)[0];
-    this.triggerEl = ((triggerComponent === null || triggerComponent === void 0 ? void 0 : triggerComponent.children[0]) ||
-      ((_a = triggerComponent === null || triggerComponent === void 0 ? void 0 : triggerComponent.shadowRoot) === null || _a === void 0 ? void 0 : _a.children[0]) ||
-      triggerComponent);
+    this.triggerEl = querySelectorAllDeep(document.body, `#${this.trigger}`)[0];
     if (!Boolean(this.triggerEl)) {
       return;
     }
     this.triggerEl.addEventListener("click", this.toggle);
   }
+  getNativeTriggerElement() {
+    var _a, _b, _c;
+    return this.triggerEl.tagName.startsWith("FLIP-")
+      ? (((_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.children[0]) ||
+        ((_c = (_b = this.triggerEl) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.children[0]) ||
+        this.triggerEl)
+      : this.triggerEl;
+  }
   updateTriggerAttributes() {
     if (!Boolean(this.triggerEl)) {
       return;
     }
-    this.triggerEl.setAttribute("aria-controls", this.popoverId);
-    this.triggerEl.setAttribute("aria-expanded", String(this.active));
-    this.triggerEl.setAttribute("aria-haspopup", "dialog");
+    const nativeTriggerEl = this.getNativeTriggerElement();
+    nativeTriggerEl.setAttribute("aria-controls", this.popoverId);
+    nativeTriggerEl.setAttribute("aria-expanded", String(this.active));
+    nativeTriggerEl.setAttribute("aria-haspopup", "dialog");
   }
   updateChildMenuItems() {
     this.childMenuItems = querySelectorAllDeep(this.el, '[role="menuitem"]');
@@ -158,7 +166,7 @@ export class FlipPopover {
           h("span", { class: "popover__handle" }),
           h("div", { class: "popover__scroll-container", ref: (el) => (this.scrollContainer = el) },
             h("slot", null))),
-        this.active && (h("div", { class: "popover__backdrop", onClick: this.close })))));
+        this.active && (h("div", { class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
   }
   static get is() { return "flip-popover"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/flip-popover/flip-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"flip-popover.js","sourceRoot":"","sources":["../../../../src/components/flip-popover/flip-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  autoUpdate,\n  computePosition,\n  ComputePositionReturn,\n  flip,\n  Placement,\n  shift,\n} from \"@floating-ui/dom\";\nimport {\n  Component,\n  Element,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport { disableBodyScroll, enableBodyScroll } from \"body-scroll-lock\";\nimport classnames from \"classnames\";\nimport { isMobileViewport, querySelectorAllDeep } from \"../../utils\";\n\n/**\n * @slot slot - The popover content.\n */\n@Component({\n  shadow: true,\n  styleUrl: \"flip-popover.css\",\n  tag: \"flip-popover\",\n})\nexport class FlipPopover {\n  @Element() el: HTMLElement;\n\n  @Prop() label!: string;\n  @Prop() placement?: Placement = \"bottom-start\";\n  @Prop() popoverId!: string;\n  @Prop() trigger!: string;\n\n  @State() active = false;\n  @State() closing = false;\n  @State() position: ComputePositionReturn;\n\n  private childMenuItems: HTMLElement[];\n  private disableAutoUpdate: any;\n  private contentContainer: HTMLDivElement;\n  private scrollContainer: HTMLDivElement;\n  private triggerEl: HTMLElement;\n\n  componentDidLoad() {\n    this.connectTrigger();\n    this.updateChildMenuItems();\n    this.updateTriggerAttributes();\n  }\n\n  disconnectedCallback() {\n    enableBodyScroll(this.scrollContainer);\n  }\n\n  @Listen(\"click\", { target: \"window\" })\n  onWindowClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (!this.el.contains(target)) {\n      this.close();\n    }\n  }\n\n  onFocusOut = (event: FocusEvent) => {\n    if (!this.active) {\n      return;\n    }\n\n    const target =\n      (event.relatedTarget as HTMLElement) || (event.target as HTMLElement);\n\n    const popoverLostFocus = !this.el.contains(target);\n\n    if (popoverLostFocus) {\n      this.close();\n    }\n  };\n\n  /**\n   * Close the popover.\n   * @returns\n   */\n  @Method()\n  public async close() {\n    if (this.closing) {\n      return;\n    }\n\n    if (this.disableAutoUpdate) {\n      this.disableAutoUpdate();\n    }\n\n    this.closing = true;\n\n    setTimeout(() => {\n      this.active = false;\n      this.closing = false;\n      this.updateTriggerAttributes();\n    }, 150);\n\n    this.unlockBodyScroll();\n\n    this.triggerEl?.focus();\n  }\n\n  /**\n   * Open the popover.\n   * @returns\n   */\n  @Method()\n  public async open() {\n    this.active = true;\n\n    this.updateChildMenuItems();\n    this.updateTriggerAttributes();\n\n    requestAnimationFrame(async () => {\n      await this.reposition();\n\n      if (this.childMenuItems.length > 0) {\n        (this.childMenuItems[0] as HTMLElement).focus();\n      } else {\n        this.contentContainer.focus();\n      }\n\n      if (this.disableAutoUpdate) {\n        this.disableAutoUpdate();\n      }\n\n      this.disableAutoUpdate = autoUpdate(\n        this.triggerEl,\n        this.contentContainer,\n        this.reposition\n      );\n\n      this.scrollContainer.scrollTop = 0;\n\n      this.lockBodyScroll();\n    });\n  }\n\n  toggle = (event: Event) => {\n    event.stopPropagation();\n\n    if (this.active) {\n      this.close();\n    } else {\n      this.open();\n    }\n  };\n\n  private connectTrigger() {\n    const triggerComponent = querySelectorAllDeep(\n      document.body,\n      `#${this.trigger}`\n    )[0];\n\n    this.triggerEl = (triggerComponent?.children[0] ||\n      triggerComponent?.shadowRoot?.children[0] ||\n      triggerComponent) as HTMLElement;\n\n    if (!Boolean(this.triggerEl)) {\n      return;\n    }\n\n    this.triggerEl.addEventListener(\"click\", this.toggle);\n  }\n\n  private onKeydown = (event: KeyboardEvent) => {\n    if (event.code === \"Escape\" && this.active) {\n      this.close();\n    }\n  };\n\n  private updateTriggerAttributes() {\n    if (!Boolean(this.triggerEl)) {\n      return;\n    }\n\n    this.triggerEl.setAttribute(\"aria-controls\", this.popoverId);\n    this.triggerEl.setAttribute(\"aria-expanded\", String(this.active));\n    this.triggerEl.setAttribute(\"aria-haspopup\", \"dialog\");\n  }\n\n  private updateChildMenuItems() {\n    this.childMenuItems = querySelectorAllDeep(this.el, '[role=\"menuitem\"]');\n  }\n\n  private reposition = async () => {\n    const mobile = isMobileViewport();\n\n    if (!Boolean(this.triggerEl) || !Boolean(this.contentContainer)) {\n      return;\n    }\n\n    if (mobile) {\n      this.position = undefined;\n      return;\n    }\n\n    this.position = await computePosition(\n      this.triggerEl,\n      this.contentContainer,\n      {\n        middleware: [shift(), flip()],\n        placement: this.placement,\n        strategy: \"fixed\",\n      }\n    );\n  };\n\n  private lockBodyScroll() {\n    const mobile = isMobileViewport();\n\n    if (!mobile) {\n      return;\n    }\n\n    disableBodyScroll(this.scrollContainer);\n  }\n\n  private unlockBodyScroll() {\n    enableBodyScroll(this.scrollContainer);\n  }\n\n  render() {\n    const className = classnames(\"popover\", {\n      \"popover--closing\": this.closing,\n      \"popover--active\": this.active,\n      \"popover--inactive\": !this.active,\n    });\n\n    return (\n      <Host id={this.popoverId} onFocusout={this.onFocusOut}>\n        <div class={className} onKeyDown={this.onKeydown}>\n          <div\n            aria-hidden={!this.active ? \"true\" : \"false\"}\n            aria-label={this.label}\n            class=\"popover__content\"\n            role=\"dialog\"\n            tabindex=\"-1\"\n            ref={(el) => (this.contentContainer = el)}\n            style={{\n              top: Boolean(this.position) ? `${this.position?.y}px` : \"\",\n              left: Boolean(this.position) ? `${this.position?.x}px` : \"\",\n            }}\n          >\n            <span class=\"popover__handle\"></span>\n            <div\n              class=\"popover__scroll-container\"\n              ref={(el) => (this.scrollContainer = el)}\n            >\n              <slot></slot>\n            </div>\n          </div>\n          {this.active && (\n            <div class=\"popover__backdrop\" onClick={this.close}></div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"flip-popover.js","sourceRoot":"","sources":["../../../../src/components/flip-popover/flip-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  autoUpdate,\n  computePosition,\n  ComputePositionReturn,\n  flip,\n  Placement,\n  shift,\n} from \"@floating-ui/dom\";\nimport {\n  Component,\n  Element,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport { disableBodyScroll, enableBodyScroll } from \"body-scroll-lock\";\nimport classnames from \"classnames\";\nimport { isMobileViewport, querySelectorAllDeep } from \"../../utils\";\n\n/**\n * @slot slot - The popover content.\n */\n@Component({\n  shadow: true,\n  styleUrl: \"flip-popover.css\",\n  tag: \"flip-popover\",\n})\nexport class FlipPopover {\n  @Element() el: HTMLElement;\n\n  @Prop() label!: string;\n  @Prop() placement?: Placement = \"bottom-start\";\n  @Prop() popoverId!: string;\n  @Prop() trigger!: string;\n\n  @State() active = false;\n  @State() closing = false;\n  @State() position: ComputePositionReturn;\n\n  private childMenuItems: HTMLElement[];\n  private disableAutoUpdate: any;\n  private contentContainer: HTMLDivElement;\n  private scrollContainer: HTMLDivElement;\n  private triggerEl: HTMLElement;\n\n  componentDidLoad() {\n    this.connectTrigger();\n    this.updateChildMenuItems();\n    this.updateTriggerAttributes();\n  }\n\n  disconnectedCallback() {\n    enableBodyScroll(this.scrollContainer);\n  }\n\n  @Listen(\"click\", { target: \"window\" })\n  onWindowClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (!this.el.contains(target)) {\n      this.close();\n    }\n  }\n\n  onFocusOut = (event: FocusEvent) => {\n    if (!this.active) {\n      return;\n    }\n\n    const target =\n      (event.relatedTarget as HTMLElement) || (event.target as HTMLElement);\n\n    const popoverLostFocus = !this.el.contains(target);\n\n    if (popoverLostFocus) {\n      this.close();\n    }\n  };\n\n  /**\n   * Close the popover.\n   * @returns\n   */\n  @Method()\n  public async close() {\n    if (this.closing) {\n      return;\n    }\n\n    if (this.disableAutoUpdate) {\n      this.disableAutoUpdate();\n    }\n\n    this.closing = true;\n\n    setTimeout(() => {\n      this.active = false;\n      this.closing = false;\n      this.updateTriggerAttributes();\n    }, 150);\n\n    this.unlockBodyScroll();\n\n    this.getNativeTriggerElement()?.focus();\n  }\n\n  /**\n   * Open the popover.\n   * @returns\n   */\n  @Method()\n  public async open() {\n    this.active = true;\n\n    this.updateChildMenuItems();\n    this.updateTriggerAttributes();\n\n    requestAnimationFrame(async () => {\n      await this.reposition();\n\n      if (this.childMenuItems.length > 0) {\n        (this.childMenuItems[0] as HTMLElement).focus();\n      } else {\n        this.contentContainer.focus();\n      }\n\n      if (this.disableAutoUpdate) {\n        this.disableAutoUpdate();\n      }\n\n      this.disableAutoUpdate = autoUpdate(\n        this.triggerEl,\n        this.contentContainer,\n        this.reposition\n      );\n\n      this.scrollContainer.scrollTop = 0;\n\n      this.lockBodyScroll();\n    });\n  }\n\n  toggle = (event: Event) => {\n    event.stopPropagation();\n\n    if (this.active) {\n      this.close();\n    } else {\n      this.open();\n    }\n  };\n\n  private connectTrigger() {\n    this.triggerEl = querySelectorAllDeep(document.body, `#${this.trigger}`)[0];\n\n    if (!Boolean(this.triggerEl)) {\n      return;\n    }\n\n    this.triggerEl.addEventListener(\"click\", this.toggle);\n  }\n\n  private getNativeTriggerElement() {\n    return this.triggerEl.tagName.startsWith(\"FLIP-\")\n      ? ((this.triggerEl?.children[0] ||\n          this.triggerEl?.shadowRoot?.children[0] ||\n          this.triggerEl) as HTMLElement)\n      : this.triggerEl;\n  }\n\n  private onKeydown = (event: KeyboardEvent) => {\n    if (event.code === \"Escape\" && this.active) {\n      this.close();\n    }\n  };\n\n  private updateTriggerAttributes() {\n    if (!Boolean(this.triggerEl)) {\n      return;\n    }\n\n    const nativeTriggerEl = this.getNativeTriggerElement();\n\n    nativeTriggerEl.setAttribute(\"aria-controls\", this.popoverId);\n    nativeTriggerEl.setAttribute(\"aria-expanded\", String(this.active));\n    nativeTriggerEl.setAttribute(\"aria-haspopup\", \"dialog\");\n  }\n\n  private updateChildMenuItems() {\n    this.childMenuItems = querySelectorAllDeep(this.el, '[role=\"menuitem\"]');\n  }\n\n  private reposition = async () => {\n    const mobile = isMobileViewport();\n\n    if (!Boolean(this.triggerEl) || !Boolean(this.contentContainer)) {\n      return;\n    }\n\n    if (mobile) {\n      this.position = undefined;\n      return;\n    }\n\n    this.position = await computePosition(\n      this.triggerEl,\n      this.contentContainer,\n      {\n        middleware: [shift(), flip()],\n        placement: this.placement,\n        strategy: \"fixed\",\n      }\n    );\n  };\n\n  private lockBodyScroll() {\n    const mobile = isMobileViewport();\n\n    if (!mobile) {\n      return;\n    }\n\n    disableBodyScroll(this.scrollContainer);\n  }\n\n  private unlockBodyScroll() {\n    enableBodyScroll(this.scrollContainer);\n  }\n\n  private onCloseButtonClick = () => {\n    this.close();\n  };\n\n  render() {\n    const className = classnames(\"popover\", {\n      \"popover--closing\": this.closing,\n      \"popover--active\": this.active,\n      \"popover--inactive\": !this.active,\n    });\n\n    return (\n      <Host id={this.popoverId} onFocusout={this.onFocusOut}>\n        <div class={className} onKeyDown={this.onKeydown}>\n          <div\n            aria-hidden={!this.active ? \"true\" : \"false\"}\n            aria-label={this.label}\n            class=\"popover__content\"\n            role=\"dialog\"\n            tabindex=\"-1\"\n            ref={(el) => (this.contentContainer = el)}\n            style={{\n              top: Boolean(this.position) ? `${this.position?.y}px` : \"\",\n              left: Boolean(this.position) ? `${this.position?.x}px` : \"\",\n            }}\n          >\n            <span class=\"popover__handle\"></span>\n            <div\n              class=\"popover__scroll-container\"\n              ref={(el) => (this.scrollContainer = el)}\n            >\n              <slot></slot>\n            </div>\n          </div>\n          {this.active && (\n            <div\n              class=\"popover__backdrop\"\n              onClick={this.onCloseButtonClick}\n            ></div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-radio/flip-radio.css

@@ -106,7 +106,7 @@
 
 .radio__label-container {
   display: inline-flex;
-  margin-left: var(--s-space-12);
+  margin-left: var(--s-space-8);
   padding-top: var(--s-space-2);
   flex-direction: column;
 }

package/dist/collection/components/flip-radio-group/flip-radio-group.css

@@ -9,5 +9,5 @@
 .radio-group {
   display: flex;
   flex-direction: column;
-  gap: var(--s-space-4);
+  gap: var(--s-space-12);
 }

package/dist/collection/components/flip-tabs/flip-tabs.css

@@ -15,25 +15,16 @@
   position: relative;
   display: flex;
   width: 100%;
-  padding-right: var(--s-space-16);
-  padding-left: var(--s-space-16);
   justify-content: flex-start;
   border-bottom: var(--s-border-width-default) solid var(--s-border-default);
 }
 
-@media (--from-tablet) {
-
-.tabs__tab-bar {
-    padding-right: 0;
-    padding-left: 0
-}
-  }
-
 .tabs__tab {
+  position: relative;
   display: block;
   min-width: 0;
   margin: 0;
-  padding: var(--s-space-4) 0;
+  padding: var(--s-space-4) var(--s-space-8);
   border: none;
   background-color: transparent;
   font: inherit;
@@ -51,13 +42,18 @@
       box-shadow: inset 0 0 0 0.125rem var(--s-focus-default);
     }
 
-.tabs__tab:not(:first-of-type) {
-    padding-left: var(--s-space-8);
-  }
-
-.tabs__tab:not(:last-of-type) {
-    padding-right: var(--s-space-8);
-  }
+.tabs__tab:not(.tabs__tab--active):hover:after {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        width: calc(100% - var(--s-space-8));
+        height: 0.1875rem;
+        border-radius: 0.125rem;
+        background-color: var(--s-border-default);
+        content: "";
+        transform: translateX(-50%);
+        pointer-events: none;
+      }
 
 .tabs__tab-label {
   display: block;
@@ -73,22 +69,15 @@
   color: var(--s-text-highlight);
 }
 
-.tabs__indicator {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 0;
-  height: 0.125rem;
-  border-radius: 0.0625rem;
-  background-color: var(--s-border-highlight);
-  transition: background-color 0.15s, transform 0.15s, width 0.15s;
-  transform: translate3d(0, 0, 0);
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion) {
-
-.tabs__indicator {
-    transition: none
-}
+.tabs__tab--active:after {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: calc(100% - var(--s-space-8));
+    height: 0.1875rem;
+    border-radius: 0.125rem;
+    background-color: var(--s-border-highlight);
+    content: "";
+    transform: translateX(-50%);
+    pointer-events: none;
   }

package/dist/collection/components/flip-tabs/flip-tabs.js

@@ -1,4 +1,4 @@
-import { Component, Element, Event, h, Host, Listen, Method, Prop, State, } from "@stencil/core";
+import { Component, Element, Event, h, Host, Method, Prop, State, } from "@stencil/core";
 import classnames from "classnames";
 export class FlipTabs {
   constructor() {
@@ -13,27 +13,10 @@ export class FlipTabs {
         this.activateNextTab();
       }
     };
-    this.onMouseEnter = (event, tab) => {
-      if (tab.tabId === this.activeTab) {
-        this.highlightedTab = undefined;
-        return;
-      }
-      this.highlightedTab =
-        event.target.closest(".tabs__tab") || undefined;
-    };
-    this.onMouseLeave = () => {
-      this.highlightedTab = undefined;
-    };
   }
   componentWillLoad() {
     this.collectTabs();
   }
-  componentDidRender() {
-    this.updateIndicatorPosition();
-  }
-  onWindowResize() {
-    this.updateIndicatorPosition();
-  }
   /**
    * Activate a tab.
    * @param tabId
@@ -48,7 +31,6 @@ export class FlipTabs {
     if (!Boolean(tab)) {
       return;
     }
-    this.highlightedTab = undefined;
     tab.active = true;
     this.tabActivated.emit(tab);
   }
@@ -78,40 +60,19 @@ export class FlipTabs {
     const initialTab = this.tabs.find((tab) => tab.tabId === this.initialTab);
     this.activateTab(Boolean(initialTab) ? initialTab.tabId : this.tabs[0].tabId);
   }
-  updateIndicatorPosition() {
-    const activeTab = this.tabs.find((tab) => tab.tabId === this.activeTab);
-    if (!Boolean(activeTab) && !Boolean(this.highlightedTab)) {
-      this.indicatorEl.style.width = "";
-      this.indicatorEl.style.transform = "";
-      this.indicatorEl.style.backgroundColor = "";
-      return;
-    }
-    const activeTabEl = this.highlightedTab ||
-      this.el.querySelector(`#tab-${activeTab.tabId}`);
-    const activeTabLabelEl = activeTabEl.querySelector(".tabs__tab-label");
-    this.indicatorEl.style.width = `${activeTabLabelEl.getBoundingClientRect().width / 16}rem`;
-    this.indicatorEl.style.transform = `translate3d(${activeTabLabelEl.offsetLeft / 16}rem, 0, 0)`;
-    this.indicatorEl.style.backgroundColor = Boolean(this.highlightedTab)
-      ? "var(--s-border-default)"
-      : "";
-  }
   render() {
     return (h(Host, null,
       h("div", { class: "tabs" },
-        h("div", { "aria-label": this.label, class: "tabs__tab-bar", onKeyDown: this.onKeyDown, role: "tablist" },
-          this.tabs.map((tab) => {
-            const isActive = tab.tabId === this.activeTab;
-            const className = classnames("tabs__tab", {
-              "tabs__tab--active": isActive,
-            });
-            return (h("button", { "aria-controls": tab.tabId, "aria-selected": isActive ? "true" : "false", class: className, id: `tab-${tab.tabId}`, key: tab.tabId, 
-              // eslint-disable-next-line react/jsx-no-bind
-              onClick: () => this.activateTab(tab.tabId), 
-              // eslint-disable-next-line react/jsx-no-bind
-              onMouseEnter: (event) => this.onMouseEnter(event, tab), onMouseLeave: this.onMouseLeave, role: "tab", tabIndex: isActive ? 0 : -1, type: "button" },
-              h("span", { class: "tabs__tab-label" }, tab.label)));
-          }),
-          h("span", { class: "tabs__indicator", ref: (el) => (this.indicatorEl = el) })),
+        h("div", { "aria-label": this.label, class: "tabs__tab-bar", onKeyDown: this.onKeyDown, role: "tablist" }, this.tabs.map((tab) => {
+          const isActive = tab.tabId === this.activeTab;
+          const className = classnames("tabs__tab", {
+            "tabs__tab--active": isActive,
+          });
+          return (h("button", { "aria-controls": tab.tabId, "aria-selected": isActive ? "true" : "false", class: className, id: `tab-${tab.tabId}`, key: tab.tabId, 
+            // eslint-disable-next-line react/jsx-no-bind
+            onClick: () => this.activateTab(tab.tabId), role: "tab", tabIndex: isActive ? 0 : -1, type: "button" },
+            h("span", { class: "tabs__tab-label" }, tab.label)));
+        })),
         h("slot", null))));
   }
   static get is() { return "flip-tabs"; }
@@ -159,8 +120,7 @@ export class FlipTabs {
     }
   }; }
   static get states() { return {
-    "activeTab": {},
-    "highlightedTab": {}
+    "activeTab": {}
   }; }
   static get events() { return [{
       "method": "tabActivated",
@@ -210,12 +170,5 @@ export class FlipTabs {
     }
   }; }
   static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "resize",
-      "method": "onWindowResize",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }]; }
 }
 //# sourceMappingURL=flip-tabs.js.map

package/dist/collection/components/flip-tabs/flip-tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"flip-tabs.js","sourceRoot":"","sources":["../../../../src/components/flip-tabs/flip-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n@Component({\n  scoped: true,\n  shadow: false,\n  styleUrl: \"flip-tabs.css\",\n  tag: \"flip-tabs\",\n})\nexport class FlipTabs {\n  @Element() el: HTMLElement;\n\n  @Prop() initialTab?: string;\n  @Prop() label!: string;\n\n  @State() activeTab?: string;\n  @State() highlightedTab: HTMLElement | undefined;\n\n  @Event() tabActivated: EventEmitter<HTMLFlipTabElement>;\n\n  private indicatorEl: HTMLElement;\n  private tabs: HTMLFlipTabElement[] = [];\n\n  componentWillLoad() {\n    this.collectTabs();\n  }\n\n  componentDidRender() {\n    this.updateIndicatorPosition();\n  }\n\n  @Listen(\"resize\", { target: \"window\" })\n  onWindowResize() {\n    this.updateIndicatorPosition();\n  }\n\n  /**\n   * Activate a tab.\n   * @param tabId\n   */\n  @Method()\n  public async activateTab(tabId: string) {\n    if (this.activeTab === tabId) {\n      return;\n    }\n\n    this.activeTab = tabId;\n    this.tabs.forEach((tab) => (tab.active = false));\n\n    const tab = this.tabs.find((tab) => tab.tabId === tabId);\n\n    if (!Boolean(tab)) {\n      return;\n    }\n\n    this.highlightedTab = undefined;\n\n    tab.active = true;\n    this.tabActivated.emit(tab);\n  }\n\n  private activateNextTab() {\n    const currentIndex = this.tabs.findIndex(\n      (tab) => tab.tabId === this.activeTab\n    );\n\n    const nextIndex = Math.min(this.tabs.length - 1, currentIndex + 1);\n\n    this.activateTab(this.tabs[nextIndex].tabId);\n\n    requestAnimationFrame(() => {\n      this.el.querySelector<HTMLButtonElement>(\".tabs__tab--active\")?.focus();\n    });\n  }\n\n  private activatePreviousTab() {\n    const currentIndex = this.tabs.findIndex(\n      (tab) => tab.tabId === this.activeTab\n    );\n\n    const previousIndex = Math.max(0, currentIndex - 1);\n\n    this.activateTab(this.tabs[previousIndex].tabId);\n\n    requestAnimationFrame(() => {\n      this.el.querySelector<HTMLButtonElement>(\".tabs__tab--active\")?.focus();\n    });\n  }\n\n  private collectTabs() {\n    this.tabs = Array.from(this.el.querySelectorAll(\"flip-tab\"));\n\n    if (this.tabs.length === 0) {\n      return;\n    }\n\n    const initialTab = this.tabs.find((tab) => tab.tabId === this.initialTab);\n\n    this.activateTab(\n      Boolean(initialTab) ? initialTab.tabId : this.tabs[0].tabId\n    );\n  }\n\n  private updateIndicatorPosition() {\n    const activeTab = this.tabs.find((tab) => tab.tabId === this.activeTab);\n\n    if (!Boolean(activeTab) && !Boolean(this.highlightedTab)) {\n      this.indicatorEl.style.width = \"\";\n      this.indicatorEl.style.transform = \"\";\n      this.indicatorEl.style.backgroundColor = \"\";\n      return;\n    }\n\n    const activeTabEl =\n      this.highlightedTab ||\n      this.el.querySelector<HTMLButtonElement>(`#tab-${activeTab.tabId}`);\n\n    const activeTabLabelEl =\n      activeTabEl.querySelector<HTMLSpanElement>(\".tabs__tab-label\");\n\n    this.indicatorEl.style.width = `${\n      activeTabLabelEl.getBoundingClientRect().width / 16\n    }rem`;\n\n    this.indicatorEl.style.transform = `translate3d(${\n      activeTabLabelEl.offsetLeft / 16\n    }rem, 0, 0)`;\n\n    this.indicatorEl.style.backgroundColor = Boolean(this.highlightedTab)\n      ? \"var(--s-border-default)\"\n      : \"\";\n  }\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"ArrowLeft\") {\n      event.preventDefault();\n      this.activatePreviousTab();\n    } else if (event.code === \"ArrowRight\") {\n      event.preventDefault();\n      this.activateNextTab();\n    }\n  };\n\n  private onMouseEnter = (event: MouseEvent, tab: HTMLFlipTabElement) => {\n    if (tab.tabId === this.activeTab) {\n      this.highlightedTab = undefined;\n      return;\n    }\n\n    this.highlightedTab =\n      (event.target as HTMLElement).closest(\".tabs__tab\") || undefined;\n  };\n\n  private onMouseLeave = () => {\n    this.highlightedTab = undefined;\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"tabs\">\n          <div\n            aria-label={this.label}\n            class=\"tabs__tab-bar\"\n            onKeyDown={this.onKeyDown}\n            role=\"tablist\"\n          >\n            {this.tabs.map((tab) => {\n              const isActive = tab.tabId === this.activeTab;\n              const className = classnames(\"tabs__tab\", {\n                \"tabs__tab--active\": isActive,\n              });\n\n              return (\n                <button\n                  aria-controls={tab.tabId}\n                  aria-selected={isActive ? \"true\" : \"false\"}\n                  class={className}\n                  id={`tab-${tab.tabId}`}\n                  key={tab.tabId}\n                  // eslint-disable-next-line react/jsx-no-bind\n                  onClick={() => this.activateTab(tab.tabId)}\n                  // eslint-disable-next-line react/jsx-no-bind\n                  onMouseEnter={(event) => this.onMouseEnter(event, tab)}\n                  onMouseLeave={this.onMouseLeave}\n                  role=\"tab\"\n                  tabIndex={isActive ? 0 : -1}\n                  type=\"button\"\n                >\n                  <span class=\"tabs__tab-label\">{tab.label}</span>\n                </button>\n              );\n            })}\n\n            <span\n              class=\"tabs__indicator\"\n              ref={(el) => (this.indicatorEl = el)}\n            ></span>\n          </div>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"flip-tabs.js","sourceRoot":"","sources":["../../../../src/components/flip-tabs/flip-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n@Component({\n  scoped: true,\n  shadow: false,\n  styleUrl: \"flip-tabs.css\",\n  tag: \"flip-tabs\",\n})\nexport class FlipTabs {\n  @Element() el: HTMLElement;\n\n  @Prop() initialTab?: string;\n  @Prop() label!: string;\n\n  @State() activeTab?: string;\n\n  @Event() tabActivated: EventEmitter<HTMLFlipTabElement>;\n\n  private tabs: HTMLFlipTabElement[] = [];\n\n  componentWillLoad() {\n    this.collectTabs();\n  }\n\n  /**\n   * Activate a tab.\n   * @param tabId\n   */\n  @Method()\n  public async activateTab(tabId: string) {\n    if (this.activeTab === tabId) {\n      return;\n    }\n\n    this.activeTab = tabId;\n    this.tabs.forEach((tab) => (tab.active = false));\n\n    const tab = this.tabs.find((tab) => tab.tabId === tabId);\n\n    if (!Boolean(tab)) {\n      return;\n    }\n\n    tab.active = true;\n    this.tabActivated.emit(tab);\n  }\n\n  private activateNextTab() {\n    const currentIndex = this.tabs.findIndex(\n      (tab) => tab.tabId === this.activeTab\n    );\n\n    const nextIndex = Math.min(this.tabs.length - 1, currentIndex + 1);\n\n    this.activateTab(this.tabs[nextIndex].tabId);\n\n    requestAnimationFrame(() => {\n      this.el.querySelector<HTMLButtonElement>(\".tabs__tab--active\")?.focus();\n    });\n  }\n\n  private activatePreviousTab() {\n    const currentIndex = this.tabs.findIndex(\n      (tab) => tab.tabId === this.activeTab\n    );\n\n    const previousIndex = Math.max(0, currentIndex - 1);\n\n    this.activateTab(this.tabs[previousIndex].tabId);\n\n    requestAnimationFrame(() => {\n      this.el.querySelector<HTMLButtonElement>(\".tabs__tab--active\")?.focus();\n    });\n  }\n\n  private collectTabs() {\n    this.tabs = Array.from(this.el.querySelectorAll(\"flip-tab\"));\n\n    if (this.tabs.length === 0) {\n      return;\n    }\n\n    const initialTab = this.tabs.find((tab) => tab.tabId === this.initialTab);\n\n    this.activateTab(\n      Boolean(initialTab) ? initialTab.tabId : this.tabs[0].tabId\n    );\n  }\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"ArrowLeft\") {\n      event.preventDefault();\n      this.activatePreviousTab();\n    } else if (event.code === \"ArrowRight\") {\n      event.preventDefault();\n      this.activateNextTab();\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"tabs\">\n          <div\n            aria-label={this.label}\n            class=\"tabs__tab-bar\"\n            onKeyDown={this.onKeyDown}\n            role=\"tablist\"\n          >\n            {this.tabs.map((tab) => {\n              const isActive = tab.tabId === this.activeTab;\n              const className = classnames(\"tabs__tab\", {\n                \"tabs__tab--active\": isActive,\n              });\n\n              return (\n                <button\n                  aria-controls={tab.tabId}\n                  aria-selected={isActive ? \"true\" : \"false\"}\n                  class={className}\n                  id={`tab-${tab.tabId}`}\n                  key={tab.tabId}\n                  // eslint-disable-next-line react/jsx-no-bind\n                  onClick={() => this.activateTab(tab.tabId)}\n                  role=\"tab\"\n                  tabIndex={isActive ? 0 : -1}\n                  type=\"button\"\n                >\n                  <span class=\"tabs__tab-label\">{tab.label}</span>\n                </button>\n              );\n            })}\n          </div>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-text-input/flip-text-input.css

@@ -125,10 +125,12 @@ input.text-input__input:not([type="password"]) {
 
 .text-input__prefix {
   padding-right: var(--s-space-4);
+  color: var(--s-text-subdued);
   font-size: var(--s-font-size-base);
 }
 
 .text-input__suffix {
   padding-left: var(--s-space-4);
+  color: var(--s-text-subdued);
   font-size: var(--s-font-size-base);
 }

package/dist/collection/components/flip-toast/flip-toast.css

@@ -11,7 +11,7 @@
   width: 100%;
   max-width: 28rem;
   padding: var(--s-space-16);
-  border-radius: 0.75rem;
+  border-radius: var(--s-border-radius-sm);
   color: var(--s-text-on-status);
   background-color: var(--s-surface-neutral-default);
 }

package/dist/components/flip-action-list-item.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
 
-const flipActionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-surface-overlay-hovered)}.action-list-item:focus{background-color:var(--s-surface-overlay-hovered);outline:none}.action-list-item:active{background-color:var(--s-surface-overlay-pressed)}.action-list-item:disabled{background-color:var(--s-surface-overlay-default);cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;padding-top:0.0625rem;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}";
+const flipActionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-surface-overlay-hovered)}.action-list-item:focus{background-color:var(--s-surface-overlay-hovered);outline:none}.action-list-item:active{background-color:var(--s-surface-overlay-pressed)}.action-list-item:disabled{background-color:var(--s-surface-overlay-default);cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical ::part(icon){color:var(--s-icon-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;padding-top:0.0625rem;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}";
 
 const FlipActionListItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/flip-action-list-item.js.map

@@ -1 +1 @@
-{"file":"flip-action-list-item.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,usDAAusD;;MCYxtDA,oBAAkB;EAL/B;;;;IASU,WAAM,GAA8B,SAAS,CAAC;IAE9C,SAAI,GAA4B,GAAG,CAAC;GA0C7C;EAvCC,MAAM;IACJ,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;IAE1D,MAAM,SAAS,GAAG,UAAU,CAC1B,kBAAkB,EAClB,4BAA4B,IAAI,CAAC,MAAM,EAAE,EACzC,0BAA0B,IAAI,CAAC,IAAI,EAAE,CACtC,CAAC;IAEF,QACE,EAAC,IAAI,QACH,cACE,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,IAAI,KACR,YAAM,KAAK,EAAC,wBAAwB,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAS,CACnE,EACD,YAAM,KAAK,EAAC,mCAAmC,IAC7C,YAAM,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACxD,IAAI,CAAC,WAAW,KACf,YAAM,KAAK,EAAC,+BAA+B,IACxC,IAAI,CAAC,WAAW,CACZ,CACR,CACI,EACN,UAAU,KACT,YACE,KAAK,EAAC,0BAA0B,EAChC,SAAS,EAAE,IAAI,CAAC,MAAM,GAChB,CACT,CACM,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["FlipActionListItem"],"sources":["./src/components/flip-action-list-item/flip-action-list-item.css?tag=flip-action-list-item&encapsulation=shadow","./src/components/flip-action-list-item/flip-action-list-item.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.action-list-item {\n  display: inline-flex;\n  width: 100%;\n  min-width: 15rem;\n  margin: 0;\n  padding: var(--s-space-12) var(--s-space-16);\n  justify-content: flex-start;\n  align-items: center;\n  border: none;\n  color: var(--s-text-default);\n  background-color: var(--s-surface-overlay-default);\n  font: inherit;\n  line-height: var(--s-line-height-base);\n  text-align: left;\n  cursor: pointer;\n  gap: var(--s-space-12);\n\n  &:hover {\n    background-color: var(--s-surface-overlay-hovered);\n  }\n\n  &:focus {\n    background-color: var(--s-surface-overlay-hovered);\n    outline: none;\n  }\n\n  &:active {\n    background-color: var(--s-surface-overlay-pressed);\n  }\n\n  &:disabled {\n    background-color: var(--s-surface-overlay-default);\n    cursor: default;\n\n    & .action-list-item__label,\n    & .action-list-item__description {\n      color: var(--s-text-disabled);\n    }\n\n    & .action-list-item__icon {\n      color: var(--s-icon-disabled);\n    }\n  }\n}\n\n.action-list-item--size-l {\n  padding: var(--s-space-16);\n}\n\n.action-list-item--intent-critical {\n  &:not(:disabled) {\n    & .action-list-item__label {\n      color: var(--s-text-critical);\n    }\n\n    & .action-list-item__icon {\n      color: var(--s-icon-critical);\n    }\n  }\n}\n\n.action-list-item__icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  color: var(--s-icon-default);\n}\n\n.action-list-item__label-container {\n  display: inline-flex;\n  min-width: 0;\n  flex-grow: 1;\n  align-items: flex-start;\n  flex-direction: column;\n}\n\n.action-list-item__label {\n  overflow: hidden;\n  max-width: 100%;\n  padding-top: 0.0625rem;\n  font-weight: var(--s-font-weight-medium);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.action-list-item__description {\n  color: var(--s-text-subdued);\n}\n\n.action-list-item__suffix {\n  display: inline-flex;\n  flex-shrink: 0;\n  color: var(--s-icon-highlight);\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipActionListItemIntent = \"default\" | \"critical\";\n\nexport type FlipActionListItemSize = \"m\" | \"l\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-action-list-item.css\",\n  tag: \"flip-action-list-item\",\n})\nexport class FlipActionListItem {\n  @Prop() disabled?: boolean;\n  @Prop() description?: string;\n  @Prop() icon?: string;\n  @Prop() intent?: FlipActionListItemIntent = \"default\";\n  @Prop() label!: string;\n  @Prop() size?: FlipActionListItemSize = \"m\";\n  @Prop() suffix?: string;\n\n  render() {\n    const showSuffix = Boolean(this.suffix) && !this.disabled;\n\n    const className = classnames(\n      \"action-list-item\",\n      `action-list-item--intent-${this.intent}`,\n      `action-list-item--size-${this.size}`\n    );\n\n    return (\n      <Host>\n        <button\n          class={className}\n          disabled={this.disabled}\n          role=\"menuitem\"\n          tabIndex={-1}\n          type=\"button\"\n        >\n          {this.icon && (\n            <span class=\"action-list-item__icon\" innerHTML={this.icon}></span>\n          )}\n          <span class=\"action-list-item__label-container\">\n            <span class=\"action-list-item__label\">{this.label}</span>\n            {this.description && (\n              <span class=\"action-list-item__description\">\n                {this.description}\n              </span>\n            )}\n          </span>\n          {showSuffix && (\n            <span\n              class=\"action-list-item__suffix\"\n              innerHTML={this.suffix}\n            ></span>\n          )}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"flip-action-list-item.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,oxDAAoxD;;MCYryDA,oBAAkB;EAL/B;;;;IASU,WAAM,GAA8B,SAAS,CAAC;IAE9C,SAAI,GAA4B,GAAG,CAAC;GA0C7C;EAvCC,MAAM;IACJ,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;IAE1D,MAAM,SAAS,GAAG,UAAU,CAC1B,kBAAkB,EAClB,4BAA4B,IAAI,CAAC,MAAM,EAAE,EACzC,0BAA0B,IAAI,CAAC,IAAI,EAAE,CACtC,CAAC;IAEF,QACE,EAAC,IAAI,QACH,cACE,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,IAAI,KACR,YAAM,KAAK,EAAC,wBAAwB,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAS,CACnE,EACD,YAAM,KAAK,EAAC,mCAAmC,IAC7C,YAAM,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACxD,IAAI,CAAC,WAAW,KACf,YAAM,KAAK,EAAC,+BAA+B,IACxC,IAAI,CAAC,WAAW,CACZ,CACR,CACI,EACN,UAAU,KACT,YACE,KAAK,EAAC,0BAA0B,EAChC,SAAS,EAAE,IAAI,CAAC,MAAM,GAChB,CACT,CACM,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["FlipActionListItem"],"sources":["./src/components/flip-action-list-item/flip-action-list-item.css?tag=flip-action-list-item&encapsulation=shadow","./src/components/flip-action-list-item/flip-action-list-item.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.action-list-item {\n  display: inline-flex;\n  width: 100%;\n  min-width: 15rem;\n  margin: 0;\n  padding: var(--s-space-12) var(--s-space-16);\n  justify-content: flex-start;\n  align-items: center;\n  border: none;\n  color: var(--s-text-default);\n  background-color: var(--s-surface-overlay-default);\n  font: inherit;\n  line-height: var(--s-line-height-base);\n  text-align: left;\n  cursor: pointer;\n  gap: var(--s-space-12);\n\n  &:hover {\n    background-color: var(--s-surface-overlay-hovered);\n  }\n\n  &:focus {\n    background-color: var(--s-surface-overlay-hovered);\n    outline: none;\n  }\n\n  &:active {\n    background-color: var(--s-surface-overlay-pressed);\n  }\n\n  &:disabled {\n    background-color: var(--s-surface-overlay-default);\n    cursor: default;\n\n    & .action-list-item__label,\n    & .action-list-item__description {\n      color: var(--s-text-disabled);\n    }\n\n    & .action-list-item__icon {\n      color: var(--s-icon-disabled);\n    }\n  }\n}\n\n.action-list-item--size-l {\n  padding: var(--s-space-16);\n}\n\n.action-list-item--intent-critical {\n  & ::part(icon) {\n    color: var(--s-icon-critical);\n  }\n\n  &:not(:disabled) {\n    & .action-list-item__label {\n      color: var(--s-text-critical);\n    }\n\n    & .action-list-item__icon {\n      color: var(--s-icon-critical);\n    }\n  }\n}\n\n.action-list-item__icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  color: var(--s-icon-default);\n}\n\n.action-list-item__label-container {\n  display: inline-flex;\n  min-width: 0;\n  flex-grow: 1;\n  align-items: flex-start;\n  flex-direction: column;\n}\n\n.action-list-item__label {\n  overflow: hidden;\n  max-width: 100%;\n  padding-top: 0.0625rem;\n  font-weight: var(--s-font-weight-medium);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.action-list-item__description {\n  color: var(--s-text-subdued);\n}\n\n.action-list-item__suffix {\n  display: inline-flex;\n  flex-shrink: 0;\n  color: var(--s-icon-highlight);\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipActionListItemIntent = \"default\" | \"critical\";\n\nexport type FlipActionListItemSize = \"m\" | \"l\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-action-list-item.css\",\n  tag: \"flip-action-list-item\",\n})\nexport class FlipActionListItem {\n  @Prop() disabled?: boolean;\n  @Prop() description?: string;\n  @Prop() icon?: string;\n  @Prop() intent?: FlipActionListItemIntent = \"default\";\n  @Prop() label!: string;\n  @Prop() size?: FlipActionListItemSize = \"m\";\n  @Prop() suffix?: string;\n\n  render() {\n    const showSuffix = Boolean(this.suffix) && !this.disabled;\n\n    const className = classnames(\n      \"action-list-item\",\n      `action-list-item--intent-${this.intent}`,\n      `action-list-item--size-${this.size}`\n    );\n\n    return (\n      <Host>\n        <button\n          class={className}\n          disabled={this.disabled}\n          role=\"menuitem\"\n          tabIndex={-1}\n          type=\"button\"\n        >\n          {this.icon && (\n            <span class=\"action-list-item__icon\" innerHTML={this.icon}></span>\n          )}\n          <span class=\"action-list-item__label-container\">\n            <span class=\"action-list-item__label\">{this.label}</span>\n            {this.description && (\n              <span class=\"action-list-item__description\">\n                {this.description}\n              </span>\n            )}\n          </span>\n          {showSuffix && (\n            <span\n              class=\"action-list-item__suffix\"\n              innerHTML={this.suffix}\n            ></span>\n          )}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}