@getflip/swirl-components 0.31.2 → 0.33.0

package/dist/cjs/swirl-shell-layout.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-83363034.js');
 const index$1 = require('./index-2ddd0598.js');
 const utils = require('./utils-f1b4e064.js');
 
-const swirlShellLayoutCss = ":host{--extended-sidebar-width:17rem;--collapsed-sidebar-width:4rem;display:flex;width:100%;height:100%}:host *{box-sizing:border-box}.shell-layout{display:grid;width:100%;min-height:100%;transition:grid-template-columns 0.2s;grid-template-columns:0 1fr;grid-template-rows:auto 1fr;grid-template-areas:\"banner banner\"\n    \"sidebar main\"}@media (min-width: 992px){.shell-layout{grid-template-columns:var(--extended-sidebar-width) 1fr}}.shell-layout--collapsed-sidebar{grid-template-columns:0 1fr}@media (min-width: 992px){.shell-layout--collapsed-sidebar:not(.shell-layout--collapsing) .shell-layout__sidebar-wrapper.shell-layout__sidebar-wrapper--hovered .shell-layout__sidebar,.shell-layout--collapsed-sidebar:not(.shell-layout--collapsing) .shell-layout__sidebar-wrapper:focus-within .shell-layout__sidebar{width:var(--extended-sidebar-width);box-shadow:0 0.75rem 2rem rgba(25, 26, 28, 0.12),\n              0 0.25rem 0.75rem rgba(25, 26, 28, 0.08)}}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper{transform:translate3d(-100%, 0, 0)}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper .shell-layout__sidebar{width:100%;box-shadow:none}@media (min-width: 992px){.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper{max-width:var(--collapsed-sidebar-width);flex-basis:var(--collapsed-sidebar-width);transform:none}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__sidebar{box-shadow:none}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__collapsed-logo{display:inline-flex;justify-content:center;align-items:center}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__expanded-logo{display:none}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__toggle{display:none}}@media (min-width: 992px){.shell-layout--collapsed-sidebar{grid-template-columns:var(--collapsed-sidebar-width) 1fr}}.shell-layout__banner{grid-area:banner}.shell-layout__sidebar-wrapper{position:absolute;z-index:2;top:0;bottom:0;left:0;width:100%;max-width:var(--extended-sidebar-width);min-height:0;flex-basis:var(--extended-sidebar-width);flex-shrink:0;transition:max-width 0.2s, transform 0.2s;grid-area:sidebar}@media (min-width: 992px){.shell-layout__sidebar-wrapper{position:relative;inset:auto}}.shell-layout__sidebar{display:flex;width:var(--extended-sidebar-width);height:100%;border-right:var(--s-border-width-default) solid var(--s-border-default);flex-direction:column;transition:box-shadow 0.2s, width 0.2s;box-shadow:0 0.75rem 2rem rgba(25, 26, 28, 0.12),\n    0 0.25rem 0.75rem rgba(25, 26, 28, 0.08)}@media (min-width: 992px){.shell-layout__sidebar{box-shadow:none}}.shell-layout__header{flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default)}.shell-layout__logo-bar{display:flex;overflow:hidden;align-items:center;height:4.5rem}.shell-layout__expanded-logo{padding-right:var(--s-space-12);padding-left:var(--s-space-12);flex-grow:1}.shell-layout__collapsed-logo{display:none;padding-right:var(--s-space-12);padding-left:var(--s-space-12);flex-grow:1}.shell-layout__toggle{padding-right:var(--s-space-16);padding-left:var(--s-space-12);flex-grow:0;flex-shrink:0}.shell-layout__mobile-toggle{position:absolute;z-index:2;top:var(--s-space-12);left:calc(100% + var(--s-space-16))}@media (min-width: 992px){.shell-layout__mobile-toggle{display:none}}.shell-layout__main-navigation{overflow:auto;flex-grow:1;background-color:var(--s-background-default)}.shell-layout__main{min-height:0;background-color:var(--s-background-default);grid-area:main}.shell-layout__main>*,.shell-layout__main ::slotted(*){height:100%}.shell-layout__backdrop{position:fixed;z-index:1;background-color:rgba(0, 0, 0, 0.4);-webkit-animation:shell-layout-backdrop-fade-in 0.1s;animation:shell-layout-backdrop-fade-in 0.1s;inset:0}@media (min-width: 992px){.shell-layout__backdrop{display:none}}.shell-layout__backdrop--fading{-webkit-animation:shell-layout-backdrop-fade-out 0.2s;animation:shell-layout-backdrop-fade-out 0.2s}@-webkit-keyframes shell-layout-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes shell-layout-backdrop-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes shell-layout-backdrop-fade-out{from{opacity:1}to{opacity:0}}@keyframes shell-layout-backdrop-fade-out{from{opacity:1}to{opacity:0}}";
+const swirlShellLayoutCss = ":host{--extended-sidebar-width:17rem;--collapsed-sidebar-width:4rem;display:flex;width:100%;height:100%}:host *{box-sizing:border-box}.shell-layout{display:grid;width:100%;min-height:100%;transition:grid-template-columns 0.2s;grid-template-columns:0 1fr;grid-template-rows:auto 1fr;grid-template-areas:\"banner banner\"\n    \"sidebar main\"}@media (min-width: 992px){.shell-layout{grid-template-columns:var(--extended-sidebar-width) 1fr}}.shell-layout--collapsed-sidebar{grid-template-columns:0 1fr}@media (min-width: 992px){.shell-layout--collapsed-sidebar:not(.shell-layout--collapsing) .shell-layout__sidebar-wrapper.shell-layout__sidebar-wrapper--hovered .shell-layout__sidebar,.shell-layout--collapsed-sidebar:not(.shell-layout--collapsing) .shell-layout__sidebar-wrapper:focus-within .shell-layout__sidebar{width:var(--extended-sidebar-width);box-shadow:0 0.75rem 2rem rgba(25, 26, 28, 0.12),\n              0 0.25rem 0.75rem rgba(25, 26, 28, 0.08)}}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper{transform:translate3d(-100%, 0, 0)}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper .shell-layout__sidebar{width:100%;box-shadow:none}@media (min-width: 992px){.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper{max-width:var(--collapsed-sidebar-width);flex-basis:var(--collapsed-sidebar-width);transform:none}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__sidebar{box-shadow:none}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__collapsed-logo{display:inline-flex;justify-content:center;align-items:center}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__expanded-logo{display:none}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__toggle{display:none}}@media (min-width: 992px){.shell-layout--collapsed-sidebar{grid-template-columns:var(--collapsed-sidebar-width) 1fr}}.shell-layout--hide-sidebar{grid-template-columns:1fr;grid-template-areas:\"banner\"\n    \"main\"}@media (min-width: 992px){.shell-layout--hide-sidebar{grid-template-columns:1fr}}.shell-layout__banner{grid-area:banner}.shell-layout__sidebar-wrapper{position:absolute;z-index:2;top:0;bottom:0;left:0;width:100%;max-width:var(--extended-sidebar-width);min-height:0;flex-basis:var(--extended-sidebar-width);flex-shrink:0;transition:max-width 0.2s, transform 0.2s;grid-area:sidebar}@media (min-width: 992px){.shell-layout__sidebar-wrapper{position:relative;inset:auto}}.shell-layout__sidebar{display:flex;width:var(--extended-sidebar-width);height:100%;border-right:var(--s-border-width-default) solid var(--s-border-default);flex-direction:column;transition:box-shadow 0.2s, width 0.2s;box-shadow:0 0.75rem 2rem rgba(25, 26, 28, 0.12),\n    0 0.25rem 0.75rem rgba(25, 26, 28, 0.08)}@media (min-width: 992px){.shell-layout__sidebar{box-shadow:none}}.shell-layout__header{flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default)}.shell-layout__logo-bar{display:flex;overflow:hidden;align-items:center;height:4.5rem}.shell-layout__expanded-logo{padding-right:var(--s-space-12);padding-left:var(--s-space-12);flex-grow:1}.shell-layout__collapsed-logo{display:none;padding-right:var(--s-space-12);padding-left:var(--s-space-12);flex-grow:1}.shell-layout__toggle{padding-right:var(--s-space-16);padding-left:var(--s-space-12);flex-grow:0;flex-shrink:0}.shell-layout__mobile-toggle{position:absolute;z-index:2;top:var(--s-space-12);left:calc(100% + var(--s-space-16))}@media (min-width: 992px){.shell-layout__mobile-toggle{display:none}}.shell-layout__main-navigation{overflow:auto;flex-grow:1;background-color:var(--s-background-default)}.shell-layout__main{min-height:0;background-color:var(--s-background-default);grid-area:main}.shell-layout__main>*,.shell-layout__main ::slotted(*){height:100%}.shell-layout__backdrop{position:fixed;z-index:1;background-color:rgba(0, 0, 0, 0.4);-webkit-animation:shell-layout-backdrop-fade-in 0.1s;animation:shell-layout-backdrop-fade-in 0.1s;inset:0}@media (min-width: 992px){.shell-layout__backdrop{display:none}}.shell-layout__backdrop--fading{-webkit-animation:shell-layout-backdrop-fade-out 0.2s;animation:shell-layout-backdrop-fade-out 0.2s}@-webkit-keyframes shell-layout-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes shell-layout-backdrop-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes shell-layout-backdrop-fade-out{from{opacity:1}to{opacity:0}}@keyframes shell-layout-backdrop-fade-out{from{opacity:1}to{opacity:0}}";
 
 const SwirlShellLayout = class {
   constructor(hostRef) {
@@ -14,13 +14,13 @@ const SwirlShellLayout = class {
     this.desktopMediaQuery = utils.getDesktopMediaQuery();
     this.desktopMediaQueryHandler = (event) => {
       if (event.matches) {
-        this.showSidebar();
+        this.expandLeftSidebar();
       }
       else {
-        this.hideSidebar();
+        this.collapseLeftSidebar();
       }
     };
-    this.hideSidebar = () => {
+    this.collapseLeftSidebar = () => {
       this.collapsedSidebar = true;
       this.collapsing = true;
       setTimeout(() => {
@@ -31,20 +31,23 @@ const SwirlShellLayout = class {
         this.sidebarHovered = false;
       }, 200);
     };
-    this.showSidebar = () => {
+    this.expandLeftSidebar = () => {
+      if (this.hideSidebar) {
+        return;
+      }
       this.collapsedSidebar = false;
     };
     this.toggleSidebar = () => {
       if (this.collapsedSidebar) {
-        this.showSidebar();
+        this.expandLeftSidebar();
       }
       else {
-        this.hideSidebar();
+        this.collapseLeftSidebar();
       }
     };
     this.onBackdropClick = () => {
       if (!this.collapsedSidebar) {
-        this.hideSidebar();
+        this.collapseLeftSidebar();
       }
     };
     this.onSidebarClick = () => {
@@ -60,6 +63,7 @@ const SwirlShellLayout = class {
     this.onSidebarMouseLeave = () => {
       this.sidebarHovered = false;
     };
+    this.hideSidebar = undefined;
     this.mainNavigationLabel = "Main";
     this.sidebarToggleLabel = "Toggle sidebar";
     this.collapsedSidebar = undefined;
@@ -69,7 +73,7 @@ const SwirlShellLayout = class {
   componentWillLoad() {
     var _a, _b;
     if (!this.desktopMediaQuery.matches) {
-      this.hideSidebar();
+      this.collapseLeftSidebar();
     }
     (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
   }
@@ -77,18 +81,19 @@ const SwirlShellLayout = class {
    * Collapse the left sidebar.
    */
   async collapseSidebar() {
-    this.hideSidebar();
+    this.collapseLeftSidebar();
   }
   /**
    * Extend the left sidebar.
    */
   async extendSidebar() {
-    this.showSidebar();
+    this.expandLeftSidebar();
   }
   render() {
     const className = index$1.classnames("shell-layout", {
       "shell-layout--collapsed-sidebar": this.collapsedSidebar,
       "shell-layout--collapsing": this.collapsing,
+      "shell-layout--hide-sidebar": this.hideSidebar,
     });
     const sidebarWrapperClassName = index$1.classnames("shell-layout__sidebar-wrapper", {
       "shell-layout__sidebar-wrapper--hovered": this.sidebarHovered,
@@ -96,9 +101,9 @@ const SwirlShellLayout = class {
     const backdropClassName = index$1.classnames("shell-layout__backdrop", {
       "shell-layout__backdrop--fading": this.collapsing,
     });
-    return (index.h(index.Host, null, index.h("div", { class: className }, index.h("div", { class: "shell-layout__banner" }, index.h("slot", { name: "banner" })), index.h("div", { class: sidebarWrapperClassName, onClick: this.onSidebarClick, onMouseEnter: this.onSidebarMouseEnter, onMouseLeave: this.onSidebarMouseLeave }, index.h("div", { class: "shell-layout__sidebar" }, index.h("header", { class: "shell-layout__header" }, index.h("div", { class: "shell-layout__logo-bar" }, index.h("div", { class: "shell-layout__expanded-logo" }, index.h("slot", { name: "logo-expanded" })), index.h("div", { class: "shell-layout__collapsed-logo" }, index.h("slot", { name: "logo-collapsed" })), index.h("div", { class: "shell-layout__toggle" }, index.h("swirl-button", { swirlAriaExpanded: String(!this.collapsedSidebar), hideLabel: true, icon: this.collapsedSidebar
+    return (index.h(index.Host, null, index.h("div", { class: className }, index.h("div", { class: "shell-layout__banner" }, index.h("slot", { name: "banner" })), index.h("div", { class: sidebarWrapperClassName, onClick: this.onSidebarClick, onMouseEnter: this.onSidebarMouseEnter, onMouseLeave: this.onSidebarMouseLeave }, !this.hideSidebar && (index.h("div", { class: "shell-layout__sidebar" }, index.h("header", { class: "shell-layout__header" }, index.h("div", { class: "shell-layout__logo-bar" }, index.h("div", { class: "shell-layout__expanded-logo" }, index.h("slot", { name: "logo-expanded" })), index.h("div", { class: "shell-layout__collapsed-logo" }, index.h("slot", { name: "logo-collapsed" })), index.h("div", { class: "shell-layout__toggle" }, index.h("swirl-button", { swirlAriaExpanded: String(!this.collapsedSidebar), hideLabel: true, icon: this.collapsedSidebar
         ? "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>"
-        : "<swirl-icon-double-arrow-left></swirl-icon-double-arrow-left>", label: this.sidebarToggleLabel, onClick: this.toggleSidebar }))), index.h("div", { class: "shell-layout__tools" }, index.h("slot", { name: "tools" }))), index.h("nav", { "aria-label": this.mainNavigationLabel, class: "shell-layout__main-navigation" }, index.h("slot", { name: "main-navigation" })))), index.h("main", { class: "shell-layout__main" }, index.h("slot", { name: "main" })), (!this.collapsedSidebar || this.collapsing) && (index.h("div", { class: backdropClassName, onClick: this.onBackdropClick })))));
+        : "<swirl-icon-double-arrow-left></swirl-icon-double-arrow-left>", label: this.sidebarToggleLabel, onClick: this.toggleSidebar }))), index.h("div", { class: "shell-layout__tools" }, index.h("slot", { name: "tools" }))), index.h("nav", { "aria-label": this.mainNavigationLabel, class: "shell-layout__main-navigation" }, index.h("slot", { name: "main-navigation" }))))), index.h("main", { class: "shell-layout__main" }, index.h("slot", { name: "main" })), (!this.collapsedSidebar || this.collapsing) && (index.h("div", { class: backdropClassName, onClick: this.onBackdropClick })))));
   }
 };
 SwirlShellLayout.style = swirlShellLayoutCss;

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

@@ -33,66 +33,83 @@
   overflow-x: auto;
   overflow-y: hidden;
   width: 100%;
-  padding: var(--s-space-24) 0 var(--s-space-24) var(--s-space-16);
+  padding: var(--s-space-24) var(--s-space-16) var(--s-space-24)
+    var(--s-space-16);
+  scroll-padding: var(--s-space-16);
   scrollbar-width: none;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
 }
 
-@media (min-width: 768px) {
-
-.carousel__slides {
-    padding-left: var(--s-space-24)
-}
-  }
-
 .carousel__slides::-webkit-scrollbar {
     display: none;
   }
 
 .carousel__slides ::slotted(*) {
+    margin-left: var(--s-space-16);
     flex-grow: 0;
     flex-shrink: 0;
-    scroll-snap-align: start;
-    padding-left: var(--s-space-16);
+    scroll-snap-align: center;
   }
 
 @media (min-width: 768px) {
 
 .carousel__slides ::slotted(*) {
-      padding-left: var(--s-space-24)
+      margin-left: var(--s-space-24)
   }
     }
 
-.carousel__slides ::slotted(*:last-child) {
-    margin-right: var(--s-space-16);
+.carousel__slides ::slotted(*:first-of-type) {
+    scroll-snap-align: start;
+  }
+
+.carousel__slides ::slotted(*:last-of-type) {
+    scroll-snap-align: end;
   }
 
 @media (min-width: 768px) {
 
-.carousel__slides ::slotted(*:last-child) {
-      margin-right: var(--s-space-24)
+.carousel__slides {
+    padding-right: var(--s-space-24);
+    padding-left: var(--s-space-24);
+    scroll-padding: var(--s-space-24)
+}
   }
-    }
 
 .carousel__previous-slide-button {
   position: absolute;
   z-index: 1;
   top: calc(50% - var(--s-space-12));
-  left: var(--s-space-16);
+  left: var(--s-space-4);
+  display: none;
   transition: opacity 0.2s;
   transform: translateY(-50%) scale(0.72);
   pointer-events: none;
   opacity: 0;
 }
 
+@media (min-width: 768px) {
+
+.carousel__previous-slide-button {
+    display: inline-block
+}
+  }
+
 .carousel__next-slide-button {
   position: absolute;
   z-index: 1;
   top: calc(50% - var(--s-space-12));
-  right: var(--s-space-16);
+  right: var(--s-space-4);
+  display: none;
   transition: opacity 0.2s;
   transform: translateY(-50%) scale(0.72);
   pointer-events: none;
   opacity: 0;
 }
+
+@media (min-width: 768px) {
+
+.carousel__next-slide-button {
+    display: inline-block
+}
+  }

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

@@ -10,10 +10,15 @@ export class SwirlCarousel {
     this.onNextSlideButtonClick = () => {
       this.nextSlide();
     };
+    this.onScroll = () => {
+      this.checkScrollPosition();
+    };
     this.label = undefined;
     this.nextSlideButtonLabel = "Next slide";
     this.previousSlideButtonLabel = "Previous slide";
     this.loopAround = false;
+    this.isAtEnd = undefined;
+    this.isAtStart = undefined;
     this.isScrollable = undefined;
   }
   onWindowResize() {
@@ -22,11 +27,19 @@ export class SwirlCarousel {
   componentDidLoad() {
     queueMicrotask(() => {
       this.checkScrollStatus();
+      this.checkScrollPosition();
     });
   }
-  checkScrollStatus() {
-    this.isScrollable =
-      this.slidesContainer.scrollWidth > this.slidesContainer.offsetWidth;
+  /**
+   * Scroll to slide with id.
+   */
+  async scrollToSlide(id) {
+    const slides = this.getSlides();
+    const slide = slides.find((slide) => slide.id === id);
+    if (!Boolean(slide)) {
+      return;
+    }
+    slide.scrollIntoView({ block: "nearest", inline: "start" });
   }
   previousSlide() {
     const slides = this.getSlides();
@@ -51,6 +64,22 @@ export class SwirlCarousel {
     const slides = this.getSlides();
     return slides.filter((slide) => this.checkInView(slide));
   }
+  checkScrollStatus() {
+    this.isScrollable =
+      this.slidesContainer.scrollWidth > this.slidesContainer.offsetWidth;
+  }
+  checkScrollPosition() {
+    const slides = this.getSlides();
+    const activeSlides = this.getActiveSlides();
+    const isAtStart = activeSlides[0] === slides[0];
+    const isAtEnd = activeSlides[activeSlides.length - 1] === slides[slides.length - 1];
+    if (isAtStart !== this.isAtStart) {
+      this.isAtStart = isAtStart;
+    }
+    if (isAtEnd !== this.isAtEnd) {
+      this.isAtEnd = isAtEnd;
+    }
+  }
   checkInView(element) {
     let containerLeft = this.slidesContainer.scrollLeft;
     let containerRight = containerLeft + this.slidesContainer.clientWidth;
@@ -60,7 +89,7 @@ export class SwirlCarousel {
     return inInView;
   }
   render() {
-    return (h(Host, { "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, h("div", { class: "carousel" }, this.isScrollable && (h("swirl-button", { class: "carousel__previous-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.previousSlideButtonLabel, onClick: this.onPreviousSlideButtonClick, pill: true, variant: "floating" })), this.isScrollable && (h("swirl-button", { class: "carousel__next-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-forward></swirl-icon-arrow-forward>", label: this.nextSlideButtonLabel, onClick: this.onNextSlideButtonClick, pill: true, variant: "floating" })), h("div", { "aria-live": "polite", class: "carousel__slides", ref: (el) => (this.slidesContainer = el) }, h("slot", null)))));
+    return (h(Host, { "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, h("div", { class: "carousel" }, this.isScrollable && !this.isAtStart && (h("swirl-button", { class: "carousel__previous-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.previousSlideButtonLabel, onClick: this.onPreviousSlideButtonClick, pill: true, variant: "floating" })), this.isScrollable && !this.isAtEnd && (h("swirl-button", { class: "carousel__next-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-forward></swirl-icon-arrow-forward>", label: this.nextSlideButtonLabel, onClick: this.onNextSlideButtonClick, pill: true, variant: "floating" })), h("div", { "aria-live": "polite", class: "carousel__slides", onScroll: this.onScroll, ref: (el) => (this.slidesContainer = el) }, h("slot", null)))));
   }
   static get is() { return "swirl-carousel"; }
   static get encapsulation() { return "shadow"; }
@@ -151,9 +180,34 @@ export class SwirlCarousel {
   }
   static get states() {
     return {
+      "isAtEnd": {},
+      "isAtStart": {},
       "isScrollable": {}
     };
   }
+  static get methods() {
+    return {
+      "scrollToSlide": {
+        "complexType": {
+          "signature": "(id: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Scroll to slide with id.",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "el"; }
   static get listeners() {
     return [{

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

@@ -83,6 +83,20 @@
 }
   }
 
+.shell-layout--hide-sidebar {
+  grid-template-columns: 1fr;
+  grid-template-areas:
+    "banner"
+    "main";
+}
+
+@media (min-width: 992px) {
+
+.shell-layout--hide-sidebar {
+    grid-template-columns: 1fr
+}
+  }
+
 .shell-layout__banner {
   grid-area: banner;
 }

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

@@ -14,13 +14,13 @@ export class SwirlShellLayout {
     this.desktopMediaQuery = getDesktopMediaQuery();
     this.desktopMediaQueryHandler = (event) => {
       if (event.matches) {
-        this.showSidebar();
+        this.expandLeftSidebar();
       }
       else {
-        this.hideSidebar();
+        this.collapseLeftSidebar();
       }
     };
-    this.hideSidebar = () => {
+    this.collapseLeftSidebar = () => {
       this.collapsedSidebar = true;
       this.collapsing = true;
       setTimeout(() => {
@@ -31,20 +31,23 @@ export class SwirlShellLayout {
         this.sidebarHovered = false;
       }, 200);
     };
-    this.showSidebar = () => {
+    this.expandLeftSidebar = () => {
+      if (this.hideSidebar) {
+        return;
+      }
       this.collapsedSidebar = false;
     };
     this.toggleSidebar = () => {
       if (this.collapsedSidebar) {
-        this.showSidebar();
+        this.expandLeftSidebar();
       }
       else {
-        this.hideSidebar();
+        this.collapseLeftSidebar();
       }
     };
     this.onBackdropClick = () => {
       if (!this.collapsedSidebar) {
-        this.hideSidebar();
+        this.collapseLeftSidebar();
       }
     };
     this.onSidebarClick = () => {
@@ -60,6 +63,7 @@ export class SwirlShellLayout {
     this.onSidebarMouseLeave = () => {
       this.sidebarHovered = false;
     };
+    this.hideSidebar = undefined;
     this.mainNavigationLabel = "Main";
     this.sidebarToggleLabel = "Toggle sidebar";
     this.collapsedSidebar = undefined;
@@ -69,7 +73,7 @@ export class SwirlShellLayout {
   componentWillLoad() {
     var _a, _b;
     if (!this.desktopMediaQuery.matches) {
-      this.hideSidebar();
+      this.collapseLeftSidebar();
     }
     (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
   }
@@ -77,18 +81,19 @@ export class SwirlShellLayout {
    * Collapse the left sidebar.
    */
   async collapseSidebar() {
-    this.hideSidebar();
+    this.collapseLeftSidebar();
   }
   /**
    * Extend the left sidebar.
    */
   async extendSidebar() {
-    this.showSidebar();
+    this.expandLeftSidebar();
   }
   render() {
     const className = classnames("shell-layout", {
       "shell-layout--collapsed-sidebar": this.collapsedSidebar,
       "shell-layout--collapsing": this.collapsing,
+      "shell-layout--hide-sidebar": this.hideSidebar,
     });
     const sidebarWrapperClassName = classnames("shell-layout__sidebar-wrapper", {
       "shell-layout__sidebar-wrapper--hovered": this.sidebarHovered,
@@ -96,9 +101,9 @@ export class SwirlShellLayout {
     const backdropClassName = classnames("shell-layout__backdrop", {
       "shell-layout__backdrop--fading": this.collapsing,
     });
-    return (h(Host, null, h("div", { class: className }, h("div", { class: "shell-layout__banner" }, h("slot", { name: "banner" })), h("div", { class: sidebarWrapperClassName, onClick: this.onSidebarClick, onMouseEnter: this.onSidebarMouseEnter, onMouseLeave: this.onSidebarMouseLeave }, h("div", { class: "shell-layout__sidebar" }, h("header", { class: "shell-layout__header" }, h("div", { class: "shell-layout__logo-bar" }, h("div", { class: "shell-layout__expanded-logo" }, h("slot", { name: "logo-expanded" })), h("div", { class: "shell-layout__collapsed-logo" }, h("slot", { name: "logo-collapsed" })), h("div", { class: "shell-layout__toggle" }, h("swirl-button", { swirlAriaExpanded: String(!this.collapsedSidebar), hideLabel: true, icon: this.collapsedSidebar
+    return (h(Host, null, h("div", { class: className }, h("div", { class: "shell-layout__banner" }, h("slot", { name: "banner" })), h("div", { class: sidebarWrapperClassName, onClick: this.onSidebarClick, onMouseEnter: this.onSidebarMouseEnter, onMouseLeave: this.onSidebarMouseLeave }, !this.hideSidebar && (h("div", { class: "shell-layout__sidebar" }, h("header", { class: "shell-layout__header" }, h("div", { class: "shell-layout__logo-bar" }, h("div", { class: "shell-layout__expanded-logo" }, h("slot", { name: "logo-expanded" })), h("div", { class: "shell-layout__collapsed-logo" }, h("slot", { name: "logo-collapsed" })), h("div", { class: "shell-layout__toggle" }, h("swirl-button", { swirlAriaExpanded: String(!this.collapsedSidebar), hideLabel: true, icon: this.collapsedSidebar
         ? "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>"
-        : "<swirl-icon-double-arrow-left></swirl-icon-double-arrow-left>", label: this.sidebarToggleLabel, onClick: this.toggleSidebar }))), h("div", { class: "shell-layout__tools" }, h("slot", { name: "tools" }))), h("nav", { "aria-label": this.mainNavigationLabel, class: "shell-layout__main-navigation" }, h("slot", { name: "main-navigation" })))), h("main", { class: "shell-layout__main" }, h("slot", { name: "main" })), (!this.collapsedSidebar || this.collapsing) && (h("div", { class: backdropClassName, onClick: this.onBackdropClick })))));
+        : "<swirl-icon-double-arrow-left></swirl-icon-double-arrow-left>", label: this.sidebarToggleLabel, onClick: this.toggleSidebar }))), h("div", { class: "shell-layout__tools" }, h("slot", { name: "tools" }))), h("nav", { "aria-label": this.mainNavigationLabel, class: "shell-layout__main-navigation" }, h("slot", { name: "main-navigation" }))))), h("main", { class: "shell-layout__main" }, h("slot", { name: "main" })), (!this.collapsedSidebar || this.collapsing) && (h("div", { class: backdropClassName, onClick: this.onBackdropClick })))));
   }
   static get is() { return "swirl-shell-layout"; }
   static get encapsulation() { return "shadow"; }
@@ -114,6 +119,23 @@ export class SwirlShellLayout {
   }
   static get properties() {
     return {
+      "hideSidebar": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-sidebar",
+        "reflect": false
+      },
       "mainNavigationLabel": {
         "type": "string",
         "mutable": false,

package/dist/components/swirl-carousel.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './swirl-button2.js';
 
-const swirlCarouselCss = ":host{position:relative;display:block;overflow:hidden;width:100%;margin-top:calc(-1 * var(--s-space-24));margin-bottom:calc(-1 * var(--s-space-24))}:host(:hover) .carousel__previous-slide-button{pointer-events:auto;opacity:1}:host(:hover) .carousel__next-slide-button{pointer-events:auto;opacity:1}:host *{box-sizing:border-box}.carousel{position:relative;overflow:hidden;width:100%}.carousel__slides{position:relative;display:flex;overflow-x:auto;overflow-y:hidden;width:100%;padding:var(--s-space-24) 0 var(--s-space-24) var(--s-space-16);scrollbar-width:none;scroll-snap-type:x mandatory;scroll-behavior:smooth}@media (min-width: 768px){.carousel__slides{padding-left:var(--s-space-24)}}.carousel__slides::-webkit-scrollbar{display:none}.carousel__slides ::slotted(*){flex-grow:0;flex-shrink:0;scroll-snap-align:start;padding-left:var(--s-space-16)}@media (min-width: 768px){.carousel__slides ::slotted(*){padding-left:var(--s-space-24)}}.carousel__slides ::slotted(*:last-child){margin-right:var(--s-space-16)}@media (min-width: 768px){.carousel__slides ::slotted(*:last-child){margin-right:var(--s-space-24)}}.carousel__previous-slide-button{position:absolute;z-index:1;top:calc(50% - var(--s-space-12));left:var(--s-space-16);transition:opacity 0.2s;transform:translateY(-50%) scale(0.72);pointer-events:none;opacity:0}.carousel__next-slide-button{position:absolute;z-index:1;top:calc(50% - var(--s-space-12));right:var(--s-space-16);transition:opacity 0.2s;transform:translateY(-50%) scale(0.72);pointer-events:none;opacity:0}";
+const swirlCarouselCss = ":host{position:relative;display:block;overflow:hidden;width:100%;margin-top:calc(-1 * var(--s-space-24));margin-bottom:calc(-1 * var(--s-space-24))}:host(:hover) .carousel__previous-slide-button{pointer-events:auto;opacity:1}:host(:hover) .carousel__next-slide-button{pointer-events:auto;opacity:1}:host *{box-sizing:border-box}.carousel{position:relative;overflow:hidden;width:100%}.carousel__slides{position:relative;display:flex;overflow-x:auto;overflow-y:hidden;width:100%;padding:var(--s-space-24) var(--s-space-16) var(--s-space-24)\n    var(--s-space-16);scroll-padding:var(--s-space-16);scrollbar-width:none;scroll-snap-type:x mandatory;scroll-behavior:smooth}.carousel__slides::-webkit-scrollbar{display:none}.carousel__slides ::slotted(*){margin-left:var(--s-space-16);flex-grow:0;flex-shrink:0;scroll-snap-align:center}@media (min-width: 768px){.carousel__slides ::slotted(*){margin-left:var(--s-space-24)}}.carousel__slides ::slotted(*:first-of-type){scroll-snap-align:start}.carousel__slides ::slotted(*:last-of-type){scroll-snap-align:end}@media (min-width: 768px){.carousel__slides{padding-right:var(--s-space-24);padding-left:var(--s-space-24);scroll-padding:var(--s-space-24)}}.carousel__previous-slide-button{position:absolute;z-index:1;top:calc(50% - var(--s-space-12));left:var(--s-space-4);display:none;transition:opacity 0.2s;transform:translateY(-50%) scale(0.72);pointer-events:none;opacity:0}@media (min-width: 768px){.carousel__previous-slide-button{display:inline-block}}.carousel__next-slide-button{position:absolute;z-index:1;top:calc(50% - var(--s-space-12));right:var(--s-space-4);display:none;transition:opacity 0.2s;transform:translateY(-50%) scale(0.72);pointer-events:none;opacity:0}@media (min-width: 768px){.carousel__next-slide-button{display:inline-block}}";
 
 const SwirlCarousel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -14,10 +14,15 @@ const SwirlCarousel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.onNextSlideButtonClick = () => {
       this.nextSlide();
     };
+    this.onScroll = () => {
+      this.checkScrollPosition();
+    };
     this.label = undefined;
     this.nextSlideButtonLabel = "Next slide";
     this.previousSlideButtonLabel = "Previous slide";
     this.loopAround = false;
+    this.isAtEnd = undefined;
+    this.isAtStart = undefined;
     this.isScrollable = undefined;
   }
   onWindowResize() {
@@ -26,11 +31,19 @@ const SwirlCarousel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   componentDidLoad() {
     queueMicrotask(() => {
       this.checkScrollStatus();
+      this.checkScrollPosition();
     });
   }
-  checkScrollStatus() {
-    this.isScrollable =
-      this.slidesContainer.scrollWidth > this.slidesContainer.offsetWidth;
+  /**
+   * Scroll to slide with id.
+   */
+  async scrollToSlide(id) {
+    const slides = this.getSlides();
+    const slide = slides.find((slide) => slide.id === id);
+    if (!Boolean(slide)) {
+      return;
+    }
+    slide.scrollIntoView({ block: "nearest", inline: "start" });
   }
   previousSlide() {
     const slides = this.getSlides();
@@ -55,6 +68,22 @@ const SwirlCarousel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     const slides = this.getSlides();
     return slides.filter((slide) => this.checkInView(slide));
   }
+  checkScrollStatus() {
+    this.isScrollable =
+      this.slidesContainer.scrollWidth > this.slidesContainer.offsetWidth;
+  }
+  checkScrollPosition() {
+    const slides = this.getSlides();
+    const activeSlides = this.getActiveSlides();
+    const isAtStart = activeSlides[0] === slides[0];
+    const isAtEnd = activeSlides[activeSlides.length - 1] === slides[slides.length - 1];
+    if (isAtStart !== this.isAtStart) {
+      this.isAtStart = isAtStart;
+    }
+    if (isAtEnd !== this.isAtEnd) {
+      this.isAtEnd = isAtEnd;
+    }
+  }
   checkInView(element) {
     let containerLeft = this.slidesContainer.scrollLeft;
     let containerRight = containerLeft + this.slidesContainer.clientWidth;
@@ -64,7 +93,7 @@ const SwirlCarousel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     return inInView;
   }
   render() {
-    return (h(Host, { "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, h("div", { class: "carousel" }, this.isScrollable && (h("swirl-button", { class: "carousel__previous-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.previousSlideButtonLabel, onClick: this.onPreviousSlideButtonClick, pill: true, variant: "floating" })), this.isScrollable && (h("swirl-button", { class: "carousel__next-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-forward></swirl-icon-arrow-forward>", label: this.nextSlideButtonLabel, onClick: this.onNextSlideButtonClick, pill: true, variant: "floating" })), h("div", { "aria-live": "polite", class: "carousel__slides", ref: (el) => (this.slidesContainer = el) }, h("slot", null)))));
+    return (h(Host, { "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, h("div", { class: "carousel" }, this.isScrollable && !this.isAtStart && (h("swirl-button", { class: "carousel__previous-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.previousSlideButtonLabel, onClick: this.onPreviousSlideButtonClick, pill: true, variant: "floating" })), this.isScrollable && !this.isAtEnd && (h("swirl-button", { class: "carousel__next-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-forward></swirl-icon-arrow-forward>", label: this.nextSlideButtonLabel, onClick: this.onNextSlideButtonClick, pill: true, variant: "floating" })), h("div", { "aria-live": "polite", class: "carousel__slides", onScroll: this.onScroll, ref: (el) => (this.slidesContainer = el) }, h("slot", null)))));
   }
   get el() { return this; }
   static get style() { return swirlCarouselCss; }
@@ -73,7 +102,10 @@ const SwirlCarousel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "nextSlideButtonLabel": [1, "next-slide-button-label"],
     "previousSlideButtonLabel": [1, "previous-slide-button-label"],
     "loopAround": [4, "loop-around"],
-    "isScrollable": [32]
+    "isAtEnd": [32],
+    "isAtStart": [32],
+    "isScrollable": [32],
+    "scrollToSlide": [64]
   }, [[9, "resize", "onWindowResize"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {