@getflip/swirl-components 0.21.1 → 0.23.0

package/dist/collection/components/swirl-app-bar/swirl-app-bar.js

@@ -0,0 +1,279 @@
+import { h, Host, } from "@stencil/core";
+import classnames from "classnames";
+/**
+ * @slot heading - The app bar's heading element
+ * @slot center-controls - Container for controls displayed in the center
+ * @slot cta - Container for a call to action button
+ * @slot heading - Container for controls displayed at the end of the bar
+ */
+export class SwirlAppBar {
+  constructor() {
+    this.onBackButtonClick = (event) => {
+      this.backButtonClick.emit(event);
+    };
+    this.onCloseButtonClick = (event) => {
+      this.closeButtonClick.emit(event);
+    };
+    this.onStepUpButtonClick = (event) => {
+      this.stepUpButtonClick.emit(event);
+    };
+    this.onStepDownButtonClick = (event) => {
+      this.stepDownButtonClick.emit(event);
+    };
+    this.backButtonLabel = "Go back";
+    this.closeButtonLabel = "Close";
+    this.stepUpButtonLabel = "Previous item";
+    this.stepDownButtonLabel = "Next item";
+    this.showBackButton = undefined;
+    this.showCloseButton = undefined;
+    this.showStepperControls = undefined;
+    this.hasCta = undefined;
+  }
+  componentWillLoad() {
+    this.mutationObserver = new MutationObserver(() => {
+      this.updateCtaStatus();
+    });
+    this.mutationObserver.observe(this.el, { childList: true });
+    queueMicrotask(() => {
+      this.updateCtaStatus();
+    });
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  updateCtaStatus() {
+    this.hasCta = Boolean(this.el.querySelector('[slot="cta"]'));
+  }
+  render() {
+    const showLeftControls = this.showBackButton || this.showCloseButton || this.showStepperControls;
+    const className = classnames("app-bar", {
+      "app-bar--has-cta": this.hasCta,
+    });
+    return (h(Host, null, h("div", { class: className }, showLeftControls && (h("div", { class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && (h("div", { class: "app-bar__main-navigation-control" }, this.showBackButton && (h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick })), this.showCloseButton && (h("swirl-button", { hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })))), this.showStepperControls && (h("div", { class: "app-bar__stepper-controls" }, h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))))), h("div", { class: "app-bar__cta" }, h("slot", { name: "cta" })), h("div", { class: "app-bar__heading" }, h("slot", { name: "heading" })), h("div", { class: "app-bar__center-controls" }, h("slot", { name: "center-controls" })), h("div", { class: "app-bar__right-controls" }, h("slot", { name: "right-controls" })))));
+  }
+  static get is() { return "swirl-app-bar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["swirl-app-bar.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["swirl-app-bar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "backButtonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "back-button-label",
+        "reflect": false,
+        "defaultValue": "\"Go back\""
+      },
+      "closeButtonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "close-button-label",
+        "reflect": false,
+        "defaultValue": "\"Close\""
+      },
+      "stepUpButtonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "step-up-button-label",
+        "reflect": false,
+        "defaultValue": "\"Previous item\""
+      },
+      "stepDownButtonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "step-down-button-label",
+        "reflect": false,
+        "defaultValue": "\"Next item\""
+      },
+      "showBackButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-back-button",
+        "reflect": false
+      },
+      "showCloseButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-close-button",
+        "reflect": false
+      },
+      "showStepperControls": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-stepper-controls",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasCta": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "backButtonClick",
+        "name": "backButtonClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "MouseEvent",
+          "resolved": "MouseEvent",
+          "references": {
+            "MouseEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "closeButtonClick",
+        "name": "closeButtonClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "MouseEvent",
+          "resolved": "MouseEvent",
+          "references": {
+            "MouseEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "stepUpButtonClick",
+        "name": "stepUpButtonClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "MouseEvent",
+          "resolved": "MouseEvent",
+          "references": {
+            "MouseEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "stepDownButtonClick",
+        "name": "stepDownButtonClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "MouseEvent",
+          "resolved": "MouseEvent",
+          "references": {
+            "MouseEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/swirl-app-bar/swirl-app-bar.stories.js

@@ -0,0 +1,32 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-app-bar.mdx";
+export default {
+  component: "swirl-app-bar",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlAppBar",
+};
+const Template = (args) => {
+  const element = generateStoryElement("swirl-app-bar", args);
+  element.innerHTML = `
+    <swirl-heading as="h1" level="3" slot="heading" text="Heading" truncate></swirl-heading>
+    <swirl-stack justify="center" orientation="horizontal" spacing="8" slot="center-controls">
+      <swirl-button label="All posts" variant="flat"></swirl-button>
+      <swirl-button label="Groups"></swirl-button>
+      <swirl-button label="Saved"></swirl-button>
+      <swirl-button label="Scheduled"></swirl-button>
+    </swirl-stack>
+    <div slot="right-controls">
+      <swirl-button hide-label="true" icon="<swirl-icon-search></swirl-icon-search>" label="Search"></swirl-button>
+    </div>
+  `;
+  return element;
+};
+export const SwirlAppBar = Template.bind({});
+SwirlAppBar.args = {
+  showCloseButton: true,
+  showStepperControls: true,
+};

package/dist/collection/components/swirl-description-list/swirl-description-list.css

@@ -12,6 +12,7 @@
   display: block;
   max-width: 100%;
   margin: 0;
+  padding-top: var(--s-space-16);
 }
 
 .description-list ::slotted(*) {

package/dist/collection/components/swirl-description-list-item/swirl-description-list-item.css

@@ -41,40 +41,40 @@
 }
 
 @container description-list (min-width: 480px) {
-  .description-list-item {
+  .description-list-item--orientation-horizontal {
     display: flex;
   }
 
-  .description-list-item__term {
-    margin-right: var(--s-space-16);
-    margin-bottom: 0;
-    flex-basis: 12rem;
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
+    .description-list-item--orientation-horizontal .description-list-item__term {
+      margin-right: var(--s-space-16);
+      margin-bottom: 0;
+      flex-basis: 12rem;
+      flex-grow: 0;
+      flex-shrink: 0;
+    }
 
-  .description-list-item__description {
-    flex-grow: 1;
-  }
+    .description-list-item--orientation-horizontal .description-list-item__description {
+      flex-grow: 1;
+    }
 }
 
 /* Fallback styles for browsers without container query support */
 @supports not (container-type: inline-size) {
   @media (min-width: 768px) {
-    .description-list-item {
+    .description-list-item--orientation-horizontal {
       display: flex;
     }
 
-    .description-list-item__term {
-      margin-right: var(--s-space-16);
-      margin-bottom: 0;
-      flex-basis: 12rem;
-      flex-grow: 0;
-      flex-shrink: 0;
-    }
+      .description-list-item--orientation-horizontal .description-list-item__term {
+        margin-right: var(--s-space-16);
+        margin-bottom: 0;
+        flex-basis: 12rem;
+        flex-grow: 0;
+        flex-shrink: 0;
+      }
 
-    .description-list-item__description {
-      flex-grow: 1;
-    }
+      .description-list-item--orientation-horizontal .description-list-item__description {
+        flex-grow: 1;
+      }
   }
 }

package/dist/collection/components/swirl-description-list-item/swirl-description-list-item.js

@@ -1,13 +1,16 @@
 import { h, Host } from "@stencil/core";
+import classNames from "classnames";
 /**
  * @slot slot - The description
  */
 export class SwirlDescriptionListItem {
   constructor() {
+    this.orientation = "horizontal";
     this.term = undefined;
   }
   render() {
-    return (h(Host, null, h("div", { class: "description-list-item", part: "description-list-item" }, h("dt", { class: "description-list-item__term", part: "description-list-item__term" }, this.term), h("dd", { class: "description-list-item__description" }, h("slot", null)))));
+    const className = classNames("description-list-item", `description-list-item--orientation-${this.orientation}`);
+    return (h(Host, null, h("div", { class: className, part: "description-list-item" }, h("dt", { class: "description-list-item__term", part: "description-list-item__term" }, this.term), h("dd", { class: "description-list-item__description" }, h("slot", null)))));
   }
   static get is() { return "swirl-description-list-item"; }
   static get encapsulation() { return "shadow"; }
@@ -23,6 +26,29 @@ export class SwirlDescriptionListItem {
   }
   static get properties() {
     return {
+      "orientation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlDescriptionListItemOrientation",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {
+            "SwirlDescriptionListItemOrientation": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-description-list-item/swirl-description-list-item.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "orientation",
+        "reflect": false,
+        "defaultValue": "\"horizontal\""
+      },
       "term": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/swirl-heading/swirl-heading.css

@@ -58,3 +58,9 @@
   font-weight: var(--s-font-weight-semibold);
   line-height: var(--s-line-height-sm);
 }
+
+.heading--truncate {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/dist/collection/components/swirl-heading/swirl-heading.js

@@ -9,6 +9,7 @@ export class SwirlHeading {
     this.headingId = undefined;
     this.level = 1;
     this.text = undefined;
+    this.truncate = undefined;
   }
   componentDidRender() {
     this.rebalance();
@@ -24,7 +25,9 @@ export class SwirlHeading {
   }
   render() {
     const Tag = this.as || `h${this.level}`;
-    const className = classnames("heading", `heading--align-${this.align}`, `heading--level-${this.level}`);
+    const className = classnames("heading", `heading--align-${this.align}`, `heading--level-${this.level}`, {
+      "heading--truncate": this.truncate,
+    });
     return (h(Host, null, h(Tag, { class: className, id: this.headingId, ref: (el) => (this.headingEl = el) }, this.text)));
   }
   static get is() { return "swirl-heading"; }
@@ -160,6 +163,23 @@ export class SwirlHeading {
         },
         "attribute": "text",
         "reflect": false
+      },
+      "truncate": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "truncate",
+        "reflect": false
       }
     };
   }

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

@@ -110,6 +110,7 @@
   display: flex;
   overflow: hidden;
   width: 100vw;
+  max-width: 40rem;
   height: 100vh;
   background-color: var(--s-surface-overlay-default);
   flex-direction: column;
@@ -119,7 +120,6 @@
 
 .modal__body {
     width: 90vw;
-    max-width: 33.75rem;
     height: auto;
     max-height: 90vh;
     border-radius: var(--s-border-radius-base);

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

@@ -40,6 +40,7 @@ export class SwirlModal {
     this.hideCloseButton = undefined;
     this.hideLabel = undefined;
     this.label = undefined;
+    this.maxWidth = undefined;
     this.padded = true;
     this.primaryActionLabel = undefined;
     this.secondaryActionLabel = undefined;
@@ -99,7 +100,7 @@ export class SwirlModal {
       "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) }, h("div", { class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { class: "modal__body", role: "document" }, !this.hideCloseButton && (h("swirl-button", { class: "modal__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), !this.hideLabel && (h("header", { class: "modal__header" }, h("swirl-heading", { as: "h2", class: "modal__heading", level: 3, text: this.label }))), h("div", { class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", null)), showControls && (h("footer", { class: "modal__controls" }, h("swirl-button-group", { wrap: true }, this.secondaryActionLabel && (h("swirl-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))))));
+    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) }, h("div", { class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { class: "modal__body", role: "document", style: { maxWidth: this.maxWidth } }, !this.hideCloseButton && (h("swirl-button", { class: "modal__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), !this.hideLabel && (h("header", { class: "modal__header" }, h("swirl-heading", { as: "h2", class: "modal__heading", level: 3, text: this.label }))), h("div", { class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", null)), showControls && (h("footer", { class: "modal__controls" }, h("swirl-button-group", { wrap: true }, this.secondaryActionLabel && (h("swirl-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))))));
   }
   static get is() { return "swirl-modal"; }
   static get encapsulation() { return "shadow"; }
@@ -184,6 +185,23 @@ export class SwirlModal {
         "attribute": "label",
         "reflect": false
       },
+      "maxWidth": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-width",
+        "reflect": false
+      },
       "padded": {
         "type": "boolean",
         "mutable": false,

package/dist/components/swirl-app-bar.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlAppBar extends Components.SwirlAppBar, HTMLElement {}
+export const SwirlAppBar: {
+  prototype: SwirlAppBar;
+  new (): SwirlAppBar;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-app-bar.js

@@ -0,0 +1,95 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$2 } from './swirl-button2.js';
+
+const swirlAppBarCss = ":host{display:block;overflow-x:auto;width:100%}:host *{box-sizing:border-box}.app-bar{display:flex;min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content;min-height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;gap:var(--s-space-16)}.app-bar--has-cta .app-bar__cta{display:block}.app-bar__left-controls{display:flex;min-width:0;flex-shrink:0;align-items:center;gap:var(--s-space-16)}.app-bar__main-navigation-control{flex-shrink:0}.app-bar__cta{display:none}.app-bar__heading{display:flex;min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content;flex-grow:1;align-items:center}@media (min-width: 992px){.app-bar__heading{flex-grow:0}}.app-bar__stepper-controls{position:relative;display:flex;flex-shrink:0;gap:var(--s-space-4)}.app-bar__stepper-controls:not(:first-child){padding-left:var(--s-space-16)}.app-bar__stepper-controls:not(:first-child):after{position:absolute;top:50%;left:0;width:var(--s-border-width-default);height:1.25rem;background-color:var(--s-border-default);content:\"\";transform:translateY(-50%)}.app-bar__center-controls{display:none;flex-grow:1;justify-content:center;align-items:center}@media (min-width: 992px){.app-bar__center-controls{display:flex}}.app-bar__right-controls{display:flex;min-width:0;flex-shrink:0;justify-content:flex-end;align-items:center}";
+
+const SwirlAppBar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.backButtonClick = createEvent(this, "backButtonClick", 7);
+    this.closeButtonClick = createEvent(this, "closeButtonClick", 7);
+    this.stepUpButtonClick = createEvent(this, "stepUpButtonClick", 7);
+    this.stepDownButtonClick = createEvent(this, "stepDownButtonClick", 7);
+    this.onBackButtonClick = (event) => {
+      this.backButtonClick.emit(event);
+    };
+    this.onCloseButtonClick = (event) => {
+      this.closeButtonClick.emit(event);
+    };
+    this.onStepUpButtonClick = (event) => {
+      this.stepUpButtonClick.emit(event);
+    };
+    this.onStepDownButtonClick = (event) => {
+      this.stepDownButtonClick.emit(event);
+    };
+    this.backButtonLabel = "Go back";
+    this.closeButtonLabel = "Close";
+    this.stepUpButtonLabel = "Previous item";
+    this.stepDownButtonLabel = "Next item";
+    this.showBackButton = undefined;
+    this.showCloseButton = undefined;
+    this.showStepperControls = undefined;
+    this.hasCta = undefined;
+  }
+  componentWillLoad() {
+    this.mutationObserver = new MutationObserver(() => {
+      this.updateCtaStatus();
+    });
+    this.mutationObserver.observe(this.el, { childList: true });
+    queueMicrotask(() => {
+      this.updateCtaStatus();
+    });
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  updateCtaStatus() {
+    this.hasCta = Boolean(this.el.querySelector('[slot="cta"]'));
+  }
+  render() {
+    const showLeftControls = this.showBackButton || this.showCloseButton || this.showStepperControls;
+    const className = classnames("app-bar", {
+      "app-bar--has-cta": this.hasCta,
+    });
+    return (h(Host, null, h("div", { class: className }, showLeftControls && (h("div", { class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && (h("div", { class: "app-bar__main-navigation-control" }, this.showBackButton && (h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick })), this.showCloseButton && (h("swirl-button", { hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })))), this.showStepperControls && (h("div", { class: "app-bar__stepper-controls" }, h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))))), h("div", { class: "app-bar__cta" }, h("slot", { name: "cta" })), h("div", { class: "app-bar__heading" }, h("slot", { name: "heading" })), h("div", { class: "app-bar__center-controls" }, h("slot", { name: "center-controls" })), h("div", { class: "app-bar__right-controls" }, h("slot", { name: "right-controls" })))));
+  }
+  get el() { return this; }
+  static get style() { return swirlAppBarCss; }
+}, [1, "swirl-app-bar", {
+    "backButtonLabel": [1, "back-button-label"],
+    "closeButtonLabel": [1, "close-button-label"],
+    "stepUpButtonLabel": [1, "step-up-button-label"],
+    "stepDownButtonLabel": [1, "step-down-button-label"],
+    "showBackButton": [4, "show-back-button"],
+    "showCloseButton": [4, "show-close-button"],
+    "showStepperControls": [4, "show-stepper-controls"],
+    "hasCta": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-app-bar", "swirl-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-app-bar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlAppBar$1);
+      }
+      break;
+    case "swirl-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlAppBar = SwirlAppBar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlAppBar, defineCustomElement };