@getflip/swirl-components 0.120.0 → 0.120.2

package/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-01-10T10:13:19",
+  "timestamp": "2024-01-11T13:30:16",
   "compiler": {
     "name": "@stencil/core",
     "version": "3.3.1",

package/dist/cjs/swirl-app-layout_6.cjs.entry.js

@@ -479,6 +479,12 @@ const SwirlResourceListItem = class {
       this.checked = !this.checked;
       this.valueChange.emit(this.checked);
     };
+    this.onBlur = () => {
+      this.makeControlUnfocusable();
+    };
+    this.onFocus = () => {
+      this.makeControlFocusable();
+    };
     this.onMenuTriggerClick = (event) => {
       if (this.disabled && !Boolean(this.href)) {
         event.stopPropagation();
@@ -518,6 +524,7 @@ const SwirlResourceListItem = class {
     this.forceIconProps(this.desktopMediaQuery.matches);
     this.updateIconSize(this.desktopMediaQuery.matches);
     this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+    this.makeControlUnfocusable();
     if (Boolean(this.menuTriggerId)) {
       console.warn('[Swirl] The "menu-trigger-id" prop of swirl-resource-list-item is deprecated and will be removed with the next major release. Please use the "control" slot to add a menu button instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlresourcelistitem--docs');
     }
@@ -539,6 +546,23 @@ const SwirlResourceListItem = class {
       this.hasMedia = hasMedia;
     }
   }
+  getControl() {
+    return this.el.querySelector('[slot="control"] button');
+  }
+  makeControlFocusable() {
+    const control = this.getControl();
+    if (!Boolean(control)) {
+      return;
+    }
+    control.tabIndex = 0;
+  }
+  makeControlUnfocusable() {
+    const control = this.getControl();
+    if (!Boolean(control)) {
+      return;
+    }
+    control.tabIndex = -1;
+  }
   render() {
     const Tag = !this.interactive && !this.selectable
       ? "div"
@@ -567,7 +591,7 @@ const SwirlResourceListItem = class {
       "resource-list-item--show-control-on-focus": showControlOnFocus,
       "resource-list-item--show-meta": showMeta,
     });
-    return (index.h(index.Host, { role: "row" }, index.h("div", { class: className, role: "gridcell" }, index.h(Tag, { "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": this.id, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (index.h("span", { class: "resource-list-item__media" }, index.h("slot", { name: "media" }))), index.h("span", { class: "resource-list-item__label-container" }, index.h("span", { class: "resource-list-item__label", id: this.id, innerHTML: this.label }), this.description && (index.h("span", { class: "resource-list-item__description" }, this.description))), showMeta && (index.h("span", { class: "resource-list-item__meta" }, index.h("span", { class: "resource-list-item__meta-text" }, this.meta), index.h("span", { class: "resource-list-item__badges" }, index.h("slot", { name: "badges" }))))), this.selectable && (index.h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, index.h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (index.h("swirl-icon-check-strong", null))))), index.h("span", { class: "resource-list-item__control" }, index.h("slot", { name: "control" })), showMenu && (index.h("swirl-popover-trigger", { popover: this.menuTriggerId }, index.h("swirl-button", { "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (index.h("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, index.h("swirl-icon-drag-handle", { size: this.iconSize })))));
+    return (index.h(index.Host, { role: "row" }, index.h("div", { class: className, role: "gridcell" }, index.h(Tag, { "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": this.id, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (index.h("span", { class: "resource-list-item__media" }, index.h("slot", { name: "media" }))), index.h("span", { class: "resource-list-item__label-container" }, index.h("span", { class: "resource-list-item__label", id: this.id, innerHTML: this.label }), this.description && (index.h("span", { class: "resource-list-item__description" }, this.description))), showMeta && (index.h("span", { class: "resource-list-item__meta" }, index.h("span", { class: "resource-list-item__meta-text" }, this.meta), index.h("span", { class: "resource-list-item__badges" }, index.h("slot", { name: "badges" }))))), this.selectable && (index.h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, index.h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (index.h("swirl-icon-check-strong", null))))), index.h("span", { class: "resource-list-item__control" }, index.h("slot", { name: "control" })), showMenu && (index.h("swirl-popover-trigger", { popover: this.menuTriggerId }, index.h("swirl-button", { "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (index.h("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, index.h("swirl-icon-drag-handle", { size: this.iconSize })))));
   }
   get el() { return index.getElement(this); }
 };

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

@@ -108,7 +108,7 @@ const SwirlShellLayout = class {
       "shell-layout--navigation-collapsed": this.navigationCollapsed,
       "shell-layout--sidebar-active": this.sidebarActive,
     });
-    return (index.h(index.Host, null, index.h("div", { class: className }, index.h("header", { class: "shell-layout__header", "data-tauri-drag-region": "true" }, index.h("button", { class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), index.h("div", { class: "shell-layout__header-left" }, index.h("button", { class: "shell-layout__header-tool shell-layout__navigation-toggle", onClick: this.onNavigationToggleClick, type: "button" }, index.h("swirl-icon-menu", { size: 20 }), index.h("swirl-icon-double-arrow-left", { size: 20 }), index.h("swirl-icon-double-arrow-right", { size: 20 }), index.h("swirl-visually-hidden", null, this.navigationToggleLabel)), index.h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserBackClick, type: "button" }, index.h("swirl-icon-arrow-back", { size: 20 }), index.h("swirl-visually-hidden", null, this.browserBackButtonLabel)), index.h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserForwardClick, type: "button" }, index.h("swirl-icon-arrow-forward", { size: 20 }), index.h("swirl-visually-hidden", null, this.browserForwardButtonLabel))), index.h("div", { class: "shell-layout__logo" }, index.h("slot", { name: "logo" })), index.h("div", { class: "shell-layout__header-right" }, index.h("button", { class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, index.h("swirl-icon", { glyph: this.sidebarToggleIcon, size: 20 }), index.h("swirl-visually-hidden", null, this.sidebarToggleLabel), this.sidebarToggleBadge && (index.h("swirl-badge", { "aria-label": this.sidebarToggleBadgeAriaLabel, label: this.sidebarToggleBadge, size: "xs" }))), index.h("slot", { name: "header-tools" }))), index.h("div", { class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), index.h("nav", { "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, index.h("div", { class: "shell-layout__mobile-header" }, index.h("slot", { name: "mobile-logo" }), index.h("div", { class: "shell-layout__mobile-header-tools" }, index.h("slot", { name: "mobile-header-tools" }), index.h("button", { class: "shell-layout__header-tool", type: "button" }, index.h("swirl-icon-double-arrow-left", { size: 20 }), index.h("swirl-visually-hidden", null, this.hideMobileNavigationButtonLabel)))), index.h("div", { class: "shell-layout__nav-body" }, index.h("swirl-visually-hidden", null, index.h("span", { id: "main-navigation-label" }, this.navigationLabel)), index.h("slot", { name: "nav" }))), index.h("main", { class: "shell-layout__main", id: "main-content" }, index.h("slot", null)), index.h("aside", { class: "shell-layout__sidebar" }, index.h("div", { class: "shell-layout__sidebar-body" }, index.h("div", { class: "shell-layout__sidebar-app-bar" }, index.h("slot", { name: "sidebar-app-bar" })), index.h("div", { class: "shell-layout__sidebar-content" }, index.h("slot", { name: "sidebar" })))))));
+    return (index.h(index.Host, null, index.h("div", { class: className }, index.h("header", { class: "shell-layout__header", "data-tauri-drag-region": "true" }, index.h("button", { class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), index.h("div", { class: "shell-layout__header-left" }, index.h("button", { class: "shell-layout__header-tool shell-layout__navigation-toggle", onClick: this.onNavigationToggleClick, type: "button" }, index.h("swirl-icon-menu", { size: 20 }), index.h("swirl-icon-double-arrow-left", { size: 20 }), index.h("swirl-icon-double-arrow-right", { size: 20 }), index.h("swirl-visually-hidden", null, this.navigationToggleLabel)), index.h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserBackClick, type: "button" }, index.h("swirl-icon-arrow-back", { size: 20 }), index.h("swirl-visually-hidden", null, this.browserBackButtonLabel)), index.h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserForwardClick, type: "button" }, index.h("swirl-icon-arrow-forward", { size: 20 }), index.h("swirl-visually-hidden", null, this.browserForwardButtonLabel))), index.h("div", { class: "shell-layout__logo" }, index.h("slot", { name: "logo" })), index.h("div", { class: "shell-layout__header-right" }, index.h("button", { class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, index.h("swirl-icon", { glyph: this.sidebarToggleIcon, size: 20 }), index.h("swirl-visually-hidden", null, this.sidebarToggleLabel), this.sidebarToggleBadge && (index.h("swirl-badge", { "aria-label": this.sidebarToggleBadgeAriaLabel, label: this.sidebarToggleBadge, size: "xs" }))), index.h("slot", { name: "header-tools" }))), index.h("div", { class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), index.h("nav", { "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, index.h("div", { class: "shell-layout__mobile-header" }, index.h("slot", { name: "mobile-logo" }), index.h("div", { class: "shell-layout__mobile-header-tools" }, index.h("slot", { name: "mobile-header-tools" }), index.h("button", { class: "shell-layout__header-tool", type: "button" }, index.h("swirl-icon-double-arrow-left", { size: 20 }), index.h("swirl-visually-hidden", null, this.hideMobileNavigationButtonLabel)))), index.h("div", { class: "shell-layout__nav-body" }, index.h("swirl-visually-hidden", null, index.h("span", { id: "main-navigation-label" }, this.navigationLabel)), index.h("slot", { name: "nav" }))), index.h("main", { class: "shell-layout__main", id: "main-content" }, index.h("slot", null)), index.h("aside", { class: "shell-layout__sidebar", ...{ inert: this.sidebarActive ? undefined : true } }, index.h("div", { class: "shell-layout__sidebar-body" }, index.h("div", { class: "shell-layout__sidebar-app-bar" }, index.h("slot", { name: "sidebar-app-bar" })), index.h("div", { class: "shell-layout__sidebar-content" }, index.h("slot", { name: "sidebar" })))))));
   }
   static get watchers() { return {
     "mobileNavigationActive": ["watchMobileNavigationState"],