@getflip/swirl-components 0.170.0 → 0.171.1

package/dist/collection/collection-manifest.json

@@ -40,6 +40,7 @@
     "./components/swirl-skeleton-text/swirl-skeleton-text.js",
     "./components/swirl-spinner/swirl-spinner.js",
     "./components/swirl-status-indicator/swirl-status-indicator.js",
+    "./components/swirl-switch/swirl-switch.js",
     "./components/swirl-tab/swirl-tab.js",
     "./components/swirl-tab-bar/swirl-tab-bar.js",
     "./components/swirl-table-column/swirl-table-column.js",
@@ -248,7 +249,6 @@
     "./components/swirl-select/swirl-select.js",
     "./components/swirl-shell-layout/swirl-shell-layout.js",
     "./components/swirl-shell-navigation-item/swirl-shell-navigation-item.js",
-    "./components/swirl-switch/swirl-switch.js",
     "./components/swirl-symbol/symbols/swirl-symbol-cloud.js",
     "./components/swirl-symbol/swirl-symbol.js",
     "./components/swirl-symbol/symbols/swirl-symbol-account-circle.js",

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

@@ -83,9 +83,7 @@ export class SwirlAvatar {
     this.intersectionObserver.observe(this.element);
   }
   onVisibilityChange(entries) {
-    if (entries[0].isIntersecting) {
-      this.inViewport = true;
-    }
+    this.inViewport = entries.some((entry) => entry.isIntersecting);
   }
   render() {
     const showImage = Boolean(this.src) &&

package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.js

@@ -46,9 +46,7 @@ export class SwirlImageGridItem {
     this.intersectionObserver.observe(this.el);
   }
   onVisibilityChange(entries) {
-    if (entries[0].isIntersecting) {
-      this.inViewport = true;
-    }
+    this.inViewport = entries.some((entry) => entry.isIntersecting);
   }
   render() {
     const Tag = this.interactive ? "button" : "div";

package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.stories.js

@@ -13,6 +13,7 @@ export default {
 const Template = (args) => {
   const container = document.createElement("swirl-image-grid");
   const element = generateStoryElement("swirl-image-grid-item", args);
+  container.style.paddingTop = "200vh";
   container.append(element);
   return container;
 };
@@ -20,5 +21,6 @@ export const SwirlImageGridItem = Template.bind({});
 SwirlImageGridItem.args = {
   alt: "Dog in a blanket",
   icon: "<swirl-icon-play-arrow></swirl-icon-play-arrow>",
+  loading: "intersecting",
   src: "/sample.jpg",
 };

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

@@ -217,20 +217,21 @@
   display: flex;
   flex-basis: 8rem;
   flex-shrink: 0;
+  align-items: center;
   gap: var(--s-space-8);
 }
 
 .shell-layout__header-right {
+  --swirl-ghost-button-background-default: var(--s-surface-sunken-default);
+  --swirl-ghost-button-background-hovered: var(--s-surface-sunken-hovered);
+  --swirl-ghost-button-background-pressed: var(--s-surface-sunken-pressed);
+
   display: flex;
   flex-basis: 8rem;
   flex-shrink: 0;
   justify-content: flex-end;
   align-items: center;
   gap: var(--s-space-8);
-
-  --swirl-ghost-button-background-default: var(--s-surface-sunken-default);
-  --swirl-ghost-button-background-hovered: var(--s-surface-sunken-hovered);
-  --swirl-ghost-button-background-pressed: var(--s-surface-sunken-pressed);
 }
 
 .shell-layout__logo {
@@ -254,6 +255,7 @@
   width: 2.25rem;
   height: 2.25rem;
   padding: var(--s-space-8);
+  flex-shrink: 0;
   border: none;
   border-radius: var(--s-border-radius-sm);
   color: var(--swirl-shell-text-color);

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

@@ -5,9 +5,10 @@ const NAVIGATION_COLLAPSE_STORAGE_KEY = "SWIRL_SHELL_NAVIGATION_COLLAPSE_STATE";
 const SIDEBAR_STORAGE_KEY = "SWIRL_SHELL_SIDEBAR_STATE";
 /**
  * @slot logo - Logo shown inside header.
- * @slot avatar - User avatar positioned on the header's right-hand side.
- * @slot header-tools - Tools positioned on the header's right-hand side.
+ * @slot left-header-tools - Tools positioned on the header's left-hand side.
+ * @slot right-header-tools - Tools positioned on the header's right-hand side.
  * @slot mobile-header-tools - Tools positioned in the mobile drawer header.
+ * @slot avatar - User avatar positioned on the header's right-hand side.
  * @slot nav - Items shown in the lower sidebar part.
  * @slot mobile-logo - Logo shown inside the mobile navigation drawer.
  * @slot default - Contents of the main area.
@@ -110,7 +111,7 @@ export class SwirlShellLayout {
       "shell-layout--navigation-collapsed": this.navigationCollapsed,
       "shell-layout--sidebar-active": this.sidebarActive,
     });
-    return (h(Host, null, h("div", { class: className }, h("header", { class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { class: "shell-layout__header-left" }, h("button", { class: "shell-layout__header-tool shell-layout__navigation-toggle", onClick: this.onNavigationToggleClick, type: "button" }, h("swirl-icon-hamburger-menu", { size: 20 }), h("swirl-icon-double-arrow-left", { size: 20 }), h("swirl-icon-double-arrow-right", { size: 20 }), h("swirl-visually-hidden", null, this.navigationToggleLabel)), h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserBackClick, type: "button" }, h("swirl-icon-arrow-back", { size: 20 }), h("swirl-visually-hidden", null, this.browserBackButtonLabel)), h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserForwardClick, type: "button" }, h("swirl-icon-arrow-forward", { size: 20 }), h("swirl-visually-hidden", null, this.browserForwardButtonLabel))), h("div", { class: "shell-layout__logo" }, h("slot", { name: "logo" })), h("div", { class: "shell-layout__header-right" }, h("slot", { name: "header-tools" }), h("button", { class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", null, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
+    return (h(Host, null, h("div", { class: className }, h("header", { class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { class: "shell-layout__header-left" }, h("button", { class: "shell-layout__header-tool shell-layout__navigation-toggle", onClick: this.onNavigationToggleClick, type: "button" }, h("swirl-icon-hamburger-menu", { size: 20 }), h("swirl-icon-double-arrow-left", { size: 20 }), h("swirl-icon-double-arrow-right", { size: 20 }), h("swirl-visually-hidden", null, this.navigationToggleLabel)), h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserBackClick, type: "button" }, h("swirl-icon-arrow-back", { size: 20 }), h("swirl-visually-hidden", null, this.browserBackButtonLabel)), h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserForwardClick, type: "button" }, h("swirl-icon-arrow-forward", { size: 20 }), h("swirl-visually-hidden", null, this.browserForwardButtonLabel)), h("slot", { name: "left-header-tools" })), h("div", { class: "shell-layout__logo" }, h("slot", { name: "logo" })), h("div", { class: "shell-layout__header-right" }, h("slot", { name: "right-header-tools" }), h("button", { class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", null, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
         ? this.sidebarToggleBadgeAriaLabel
         : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { name: "avatar" }))), h("div", { class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { class: "shell-layout__mobile-header" }, h("slot", { name: "mobile-logo" }), h("div", { class: "shell-layout__mobile-header-tools" }, h("slot", { name: "mobile-header-tools" }), h("button", { class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { size: 20 }), h("swirl-visually-hidden", null, this.hideMobileNavigationButtonLabel)))), h("div", { class: "shell-layout__nav-body" }, h("swirl-visually-hidden", null, h("span", { id: "main-navigation-label" }, this.navigationLabel)), h("slot", { name: "nav" }))), h("main", { class: "shell-layout__main", id: "main-content" }, h("slot", null)), h("aside", { class: "shell-layout__sidebar", ...{ inert: this.sidebarActive ? undefined : true } }, h("div", { class: "shell-layout__sidebar-body" }, h("div", { class: "shell-layout__sidebar-app-bar" }, h("slot", { name: "sidebar-app-bar" })), h("div", { class: "shell-layout__sidebar-content" }, h("slot", { name: "sidebar" })))))));
   }

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

@@ -14,6 +14,6 @@ describe("swirl-shell-layout", () => {
         <div slot="sidebar">Sidebar</div>
       </swirl-shell-layout>`,
     });
-    expect(page.root.innerHTML).toMatchInlineSnapshot(`"<!---->            <div slot=\\"sidebar-header\\" hidden=\\"\\">Sidebar header</div>   <div class=\\"shell-layout\\"><header class=\\"shell-layout__header\\" data-tauri-drag-region=\\"true\\"><button class=\\"shell-layout__skip-link\\" type=\\"button\\">Skip to main content</button><div class=\\"shell-layout__header-left\\"><button class=\\"shell-layout__header-tool shell-layout__navigation-toggle\\" type=\\"button\\"><swirl-icon-hamburger-menu size=\\"20\\"></swirl-icon-hamburger-menu><swirl-icon-double-arrow-left size=\\"20\\"></swirl-icon-double-arrow-left><swirl-icon-double-arrow-right size=\\"20\\"></swirl-icon-double-arrow-right><swirl-visually-hidden>Toggle navigation</swirl-visually-hidden></button><button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-arrow-back size=\\"20\\"></swirl-icon-arrow-back><swirl-visually-hidden>Navigate back</swirl-visually-hidden></button><button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-arrow-forward size=\\"20\\"></swirl-icon-arrow-forward><swirl-visually-hidden>Navigate forward</swirl-visually-hidden></button></div><div class=\\"shell-layout__logo\\"> <div slot=\\"logo\\">Logo</div></div><div class=\\"shell-layout__header-right\\"> <div slot=\\"header-tools\\">Tools</div><button class=\\"shell-layout__header-tool shell-layout__sidebar-toggle\\" type=\\"button\\"><swirl-icon glyph=\\"notifications\\" size=\\"20\\"></swirl-icon><swirl-visually-hidden>Toggle sidebar</swirl-visually-hidden></button> </div></header><div class=\\"shell-layout__mobile-nav-backdrop\\"></div><nav aria-labelledby=\\"main-navigation-label\\" class=\\"shell-layout__nav\\"><div class=\\"shell-layout__mobile-header\\"> <div slot=\\"mobile-logo\\">Mobile logo</div><div class=\\"shell-layout__mobile-header-tools\\"> <button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-double-arrow-left size=\\"20\\"></swirl-icon-double-arrow-left><swirl-visually-hidden>Close navigation</swirl-visually-hidden></button></div></div><div class=\\"shell-layout__nav-body\\"><swirl-visually-hidden><span id=\\"main-navigation-label\\">Main</span></swirl-visually-hidden> <div slot=\\"nav\\">nav</div></div></nav><main class=\\"shell-layout__main\\" id=\\"main-content\\">      <div>Main</div>   </main><aside class=\\"shell-layout__sidebar\\" inert=\\"\\"><div class=\\"shell-layout__sidebar-body\\"><div class=\\"shell-layout__sidebar-app-bar\\"></div><div class=\\"shell-layout__sidebar-content\\"> <div slot=\\"sidebar\\">Sidebar</div></div></div></aside></div>"`);
+    expect(page.root.innerHTML).toMatchInlineSnapshot(`"<!---->      <div slot=\\"header-tools\\" hidden=\\"\\">Tools</div>      <div slot=\\"sidebar-header\\" hidden=\\"\\">Sidebar header</div>   <div class=\\"shell-layout\\"><header class=\\"shell-layout__header\\" data-tauri-drag-region=\\"true\\"><button class=\\"shell-layout__skip-link\\" type=\\"button\\">Skip to main content</button><div class=\\"shell-layout__header-left\\"><button class=\\"shell-layout__header-tool shell-layout__navigation-toggle\\" type=\\"button\\"><swirl-icon-hamburger-menu size=\\"20\\"></swirl-icon-hamburger-menu><swirl-icon-double-arrow-left size=\\"20\\"></swirl-icon-double-arrow-left><swirl-icon-double-arrow-right size=\\"20\\"></swirl-icon-double-arrow-right><swirl-visually-hidden>Toggle navigation</swirl-visually-hidden></button><button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-arrow-back size=\\"20\\"></swirl-icon-arrow-back><swirl-visually-hidden>Navigate back</swirl-visually-hidden></button><button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-arrow-forward size=\\"20\\"></swirl-icon-arrow-forward><swirl-visually-hidden>Navigate forward</swirl-visually-hidden></button> </div><div class=\\"shell-layout__logo\\"> <div slot=\\"logo\\">Logo</div></div><div class=\\"shell-layout__header-right\\"> <button class=\\"shell-layout__header-tool shell-layout__sidebar-toggle\\" type=\\"button\\"><swirl-icon glyph=\\"notifications\\" size=\\"20\\"></swirl-icon><swirl-visually-hidden>Toggle sidebar</swirl-visually-hidden></button> </div></header><div class=\\"shell-layout__mobile-nav-backdrop\\"></div><nav aria-labelledby=\\"main-navigation-label\\" class=\\"shell-layout__nav\\"><div class=\\"shell-layout__mobile-header\\"> <div slot=\\"mobile-logo\\">Mobile logo</div><div class=\\"shell-layout__mobile-header-tools\\"> <button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-double-arrow-left size=\\"20\\"></swirl-icon-double-arrow-left><swirl-visually-hidden>Close navigation</swirl-visually-hidden></button></div></div><div class=\\"shell-layout__nav-body\\"><swirl-visually-hidden><span id=\\"main-navigation-label\\">Main</span></swirl-visually-hidden> <div slot=\\"nav\\">nav</div></div></nav><main class=\\"shell-layout__main\\" id=\\"main-content\\">      <div>Main</div>   </main><aside class=\\"shell-layout__sidebar\\" inert=\\"\\"><div class=\\"shell-layout__sidebar-body\\"><div class=\\"shell-layout__sidebar-app-bar\\"></div><div class=\\"shell-layout__sidebar-content\\"> <div slot=\\"sidebar\\">Sidebar</div></div></div></aside></div>"`);
   });
 });

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

@@ -30,7 +30,11 @@ const Template = (args) => {
     <swirl-avatar label="John Doe" slot="avatar" src="https://picsum.photos/id/433/144/144"></swirl-avatar>
     <swirl-avatar label="John Doe" slot="mobile-header-tools" src="https://picsum.photos/id/433/144/144"></swirl-avatar>
 
-    <swirl-button label="Header tool" slot="header-tools" variant="outline"></swirl-button>
+    <swirl-box padding-inline-start="16" slot="left-header-tools">
+      <swirl-switch label="Header tool" label-position="start"></swirl-switch>
+    </swirl-box>
+
+    <swirl-button label="Header tool" slot="right-header-tools" variant="outline"></swirl-button>
 
     <div slot="nav">
       <ul>

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

@@ -17,6 +17,15 @@
       0 0 0 0.1875rem var(--s-focus-default);
   }
 
+.switch--label-position-start {
+  flex-direction: row-reverse;
+}
+
+.switch--label-position-start .switch__label {
+    margin-right: var(--s-space-12);
+    margin-left: 0;
+  }
+
 .switch--on .switch__thumb {
     left: calc(100% - 1.25rem - var(--s-space-2));
   }
@@ -106,4 +115,5 @@
   font-size: var(--s-font-size-sm);
   font-weight: var(--s-font-weight-medium);
   line-height: var(--s-line-height-base);
+  white-space: nowrap;
 }

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

@@ -12,13 +12,14 @@ export class SwirlSwitch {
     this.inputId = undefined;
     this.inputName = undefined;
     this.label = undefined;
+    this.labelPosition = "end";
     this.value = undefined;
   }
   render() {
     const off = !this.checked;
     const on = this.checked;
     const ariaCheckedLabel = on ? "true" : "false";
-    const className = classnames("switch", {
+    const className = classnames("switch", `switch--label-position-${this.labelPosition}`, {
       "switch--off": off,
       "switch--on": on,
       "switch--disabled": this.disabled,
@@ -143,6 +144,29 @@ export class SwirlSwitch {
         "attribute": "label",
         "reflect": false
       },
+      "labelPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlSwitchLabelPosition",
+          "resolved": "\"end\" | \"start\"",
+          "references": {
+            "SwirlSwitchLabelPosition": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-switch/swirl-switch.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label-position",
+        "reflect": false,
+        "defaultValue": "\"end\""
+      },
       "value": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/swirl-switch/swirl-switch.spec.js

@@ -8,7 +8,7 @@ describe("swirl-switch", () => {
     });
     expect(page.root).toMatchInlineSnapshot(`
       <swirl-switch checked="true" disabled="true" input-id="switch" input-name="switch" label="Label" value="Value">
-        <label class="switch switch--disabled switch--on" htmlfor="switch">
+        <label class="switch switch--disabled switch--label-position-end switch--on" htmlfor="switch">
           <span class="switch__control">
             <swirl-visually-hidden>
               <input aria-checked="true" checked="" class="switch__input" disabled="" id="switch" name="switch" role="switch" type="checkbox" value="Value">