@getflip/swirl-components 0.101.5 → 0.101.6

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

@@ -14,6 +14,8 @@
   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);
 }
@@ -22,6 +24,10 @@
     display: block;
   }
 
+.app-bar:not(.app-bar--has-right-controls) .app-bar__right-controls {
+    display: none;
+  }
+
 .app-bar__left-controls {
   display: flex;
   min-width: 0;

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

@@ -46,8 +46,10 @@ export class SwirlAppBar {
   }
   render() {
     const showLeftControls = this.showBackButton || this.showCloseButton || this.showStepperControls;
+    const hasRightControls = Boolean(this.el.querySelector('[slot="right-controls"]'));
     const className = classnames("app-bar", {
       "app-bar--has-cta": this.hasCta,
+      "app-bar--has-right-controls": hasRightControls,
     });
     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" })))));
   }

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

@@ -21,7 +21,7 @@ describe("swirl-app-bar", () => {
     expect(page.root).toEqualHtml(`
       <swirl-app-bar>
         <mock:shadow-root>
-          <div class="app-bar app-bar--has-cta">
+          <div class="app-bar app-bar--has-cta app-bar--has-right-controls">
             <div class="app-bar__cta">
               <slot name="cta"></slot>
             </div>

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

@@ -322,14 +322,6 @@
   gap: var(--s-space-8);
 }
 
-@media (min-width: 768px) {
-
-.app-layout__app-bar {
-    padding-right: var(--s-space-16);
-    padding-left: var(--s-space-16)
-}
-  }
-
 .app-layout__back-to-navigation-button {
   padding-left: var(--s-space-8);
 }
@@ -348,16 +340,8 @@
 .app-layout__app-bar-content {
   min-width: 0;
   flex-grow: 1;
-  padding-right: var(--s-space-8);
 }
 
-@media (min-width: 768px) {
-
-.app-layout__app-bar-content {
-    padding-right: 0
-}
-  }
-
 .app-layout__app-bar-controls {
   display: none;
   padding-right: var(--s-space-8);
@@ -366,7 +350,7 @@
 @media (min-width: 768px) {
 
 .app-layout__app-bar-controls {
-    padding-right: 0
+    padding-right: var(--s-space-16)
 }
   }
 

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

@@ -26,16 +26,16 @@ const Template = (args) => {
   element.innerHTML = `
     <swirl-button hide-label="true" icon="<swirl-icon-menu></swirl-icon-menu>" label="Menu" slot="navigation-mobile-menu-button"></swirl-button>
     <swirl-resource-list label="Items" slot="navigation">
-    <swirl-resource-list-item description="With a description" label="This is a resource item" class="item"></swirl-resource-list-item>
-    <swirl-resource-list-item description="With a description" label="This is a resource item" class="item"></swirl-resource-list-item>
-    <swirl-resource-list-item description="With a description" label="This is a resource item" class="item"></swirl-resource-list-item>
+      <swirl-resource-list-item description="With a description" label="This is a resource item" class="item"></swirl-resource-list-item>
+      <swirl-resource-list-item description="With a description" label="This is a resource item" class="item"></swirl-resource-list-item>
+      <swirl-resource-list-item description="With a description" label="This is a resource item" class="item"></swirl-resource-list-item>
     </swirl-resource-list>
     <swirl-button
-    hide-label
-    icon="<swirl-icon-settings></swirl-icon-settings>"
-    label="Settings"
-    slot="navigation-controls"
-    ></swirl-button>
+      hide-label
+      icon="<swirl-icon-settings></swirl-icon-settings>"
+      label="Settings"
+      slot="navigation-controls"
+      ></swirl-button>
     <swirl-app-bar show-close-button="false" show-stepper-controls="false" slot="app-bar">
       <swirl-heading as="h2" level="3" slot="heading" text="Heading" truncate=""></swirl-heading>
       <swirl-stack justify="center" orientation="horizontal" spacing="8" slot="center-controls">