@getflip/swirl-components 0.127.2 → 0.128.0

package/dist/collection/components/swirl-app-layout/swirl-app-layout.css

@@ -219,6 +219,19 @@
     display: block;
   }
 
+.app-layout--has-bottom-bar .app-layout__body {
+    grid-template-rows: minmax(3.5rem, auto) auto 1fr auto;
+    grid-template-areas:
+      "app-bar"
+      "banner"
+      "content"
+      "bottom-bar";
+  }
+
+.app-layout--has-bottom-bar .app-layout__bottom-bar {
+    display: block;
+  }
+
 .app-layout--has-custom-app-bar-back-button .app-layout__custom-app-bar-back-button {
     display: block;
   }
@@ -355,6 +368,15 @@
   gap: var(--s-space-8);
 }
 
+.app-layout__bottom-bar {
+  display: none;
+  min-width: 0;
+  align-items: center;
+  border-top: var(--s-border-width-default) solid var(--s-border-default);
+  background-color: var(--s-background-default);
+  grid-area: bottom-bar;
+}
+
 .app-layout__back-to-navigation-button {
   padding-left: var(--s-space-8);
 }

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

@@ -7,6 +7,7 @@ import { isMobileViewport } from "../../utils";
  * @slot navigation-controls - Controls for the navigation header
  * @slot navigation-mobile-menu-button - Used to add a mobile shell layout menu button to navigation
  * @slot app-bar - The app bar contents
+ * @slot bottom-bar - The bottom bar contents
  * @slot custom-app-bar-back-button - Replaces the mobile default back button of the content app bar
  * @slot app-bar-mobile-menu-button - Used to add a mobile shell layout menu button to the app bar
  * @slot banner - Used to show a banner below the app bar
@@ -178,6 +179,7 @@ export class SwirlAppLayout {
       this.hasNavigation &&
       !this.hasCustomAppBarBackButton;
     const hasAppBarControls = Boolean(this.el.querySelector('[slot="app-bar-controls"]'));
+    const hasBottomBar = Boolean(this.el.querySelector('[slot="bottom-bar"]'));
     const hasAppBarMobileMenuButton = Boolean(this.el.querySelector('[slot="app-bar-mobile-menu-button"]'));
     const hasCustomSidebarHeader = Boolean(this.el.querySelector('[slot="custom-sidebar-header"]'));
     const hasFloatingActionButton = Boolean(this.el.querySelector('[slot="floating-action-button"]')) ||
@@ -185,6 +187,7 @@ export class SwirlAppLayout {
     const className = classnames("app-layout", `app-layout--mobile-view-${this.mobileView}`, `app-layout--transitioning-from-${this.transitioningFrom}`, `app-layout--transitioning-to-${this.transitioningTo}`, `app-layout--transition-style-${this.transitionStyle}`, {
       "app-layout--has-app-bar-mobile-menu-button": hasAppBarMobileMenuButton,
       "app-layout--has-app-bar-controls": hasAppBarControls,
+      "app-layout--has-bottom-bar": hasBottomBar,
       "app-layout--has-custom-app-bar-back-button": this.hasCustomAppBarBackButton,
       "app-layout--has-custom-sidebar-header": hasCustomSidebarHeader,
       "app-layout--has-floating-action-button": hasFloatingActionButton,
@@ -196,7 +199,7 @@ export class SwirlAppLayout {
     });
     return (h(Host, null, h("section", { "aria-labelledby": "app-name", class: className, role: "document", tabIndex: 0 }, h("div", { class: "app-layout__grid" }, h("header", { class: "app-layout__header" }, h("span", { class: "app-layout__navigation-mobile-menu-button" }, h("slot", { name: "navigation-mobile-menu-button" })), this.showNavigationBackButton && (h("span", { class: "app-layout__navigation-back-button" }, h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), this.hasNavigation && (h("span", { class: "app-layout__navigation-controls" }, h("slot", { name: "navigation-controls" })))), h("nav", { "aria-label": this.navigationLabel, class: "app-layout__navigation" }, h("slot", { name: "navigation" })), h("section", { "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { class: "app-layout__app-bar" }, h("span", { class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { class: "app-layout__back-to-navigation-button" }, h("swirl-button", { hideLabel: true, icon: this.transitionStyle === "dialog"
         ? "<swirl-icon-close></swirl-icon-close>"
-        : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), h("span", { class: "app-layout__custom-app-bar-back-button" }, h("slot", { name: "custom-app-bar-back-button" })), h("div", { class: "app-layout__app-bar-content" }, h("slot", { name: "app-bar" })), h("div", { class: "app-layout__app-bar-controls" }, h("slot", { name: "app-bar-controls" })))), h("div", { class: "app-layout__banner" }, h("slot", { name: "banner" })), h("div", { class: "app-layout__content" }, h("slot", { name: "content" }))), h("aside", { class: "app-layout__sidebar" }, h("header", { class: "app-layout__custom-sidebar-header" }, h("slot", { name: "custom-sidebar-header" })), h("header", { class: "app-layout__sidebar-header" }, h("swirl-button", { class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), h("swirl-heading", { as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { class: "app-layout__sidebar-content" }, h("slot", { name: "sidebar" }))), h("span", { class: "app-layout__floating-action-button" }, this.ctaLabel && (h("swirl-button", { hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), h("slot", { name: "floating-action-button" }))))));
+        : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), h("span", { class: "app-layout__custom-app-bar-back-button" }, h("slot", { name: "custom-app-bar-back-button" })), h("div", { class: "app-layout__app-bar-content" }, h("slot", { name: "app-bar" })), h("div", { class: "app-layout__app-bar-controls" }, h("slot", { name: "app-bar-controls" })))), h("div", { class: "app-layout__banner" }, h("slot", { name: "banner" })), h("div", { class: "app-layout__content" }, h("slot", { name: "content" })), h("div", { class: "app-layout__bottom-bar" }, h("slot", { name: "bottom-bar" }))), h("aside", { class: "app-layout__sidebar" }, h("header", { class: "app-layout__custom-sidebar-header" }, h("slot", { name: "custom-sidebar-header" })), h("header", { class: "app-layout__sidebar-header" }, h("swirl-button", { class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), h("swirl-heading", { as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { class: "app-layout__sidebar-content" }, h("slot", { name: "sidebar" }))), h("span", { class: "app-layout__floating-action-button" }, this.ctaLabel && (h("swirl-button", { hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), h("slot", { name: "floating-action-button" }))))));
   }
   static get is() { return "swirl-app-layout"; }
   static get encapsulation() { return "shadow"; }

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

@@ -11,6 +11,7 @@
   display: flex;
   width: 100%;
   max-width: 100%;
+  margin: 0;
 }
 
 .stack ::slotted(*) {