@getflip/swirl-components 0.150.0 → 0.151.1

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

@@ -197,7 +197,7 @@ export class SwirlAppLayout {
       "app-layout--sidebar-active": this.mobileView === "sidebar" || this.sidebarActive,
       "app-layout--sidebar-closing": this.sidebarClosing,
     });
-    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"
+    return (h(Host, null, h("section", { "aria-labelledby": "app-name", class: className }, 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("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" }))))));
   }

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

@@ -36,6 +36,7 @@ export default {
 const Template = (args) => {
   const element = generateStoryElement("swirl-avatar", args);
   element.innerHTML = `
+  <swirl-badge label="3" size="s" slot="tool"></swirl-badge>
 `;
   return element;
 };

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

@@ -15,22 +15,22 @@
   max-width: 100%;
   justify-content: center;
   align-items: center;
-  box-shadow: 0 0 0 0.125rem var(--swirl-badge-border-color);
   border-radius: 2rem;
   color: var(--s-text-on-status);
   font-size: var(--s-font-size-sm);
   font-weight: var(--s-font-weight-medium);
+  box-shadow: 0 0 0 0.125rem var(--swirl-badge-border-color);
 }
 
 .badge--size-xs {
-  min-width: 1.25rem;
-  height: 1.25rem;
+  min-width: 1rem;
+  height: 1rem;
   font-size: 0.6875rem;
 }
 
 .badge--size-xs .badge__label {
-    padding-right: 0.125rem;
-    padding-left: 0.125rem;
+    padding-right: 0.25rem;
+    padding-left: 0.25rem;
   }
 
 .badge--size-xs .badge__icon > swirl-icon,
@@ -40,14 +40,14 @@
     }
 
 .badge--size-s {
-  min-width: 1.5rem;
-  height: 1.5rem;
+  min-width: 1.25rem;
+  height: 1.25rem;
   font-size: 0.75rem;
 }
 
 .badge--size-s .badge__label {
-    padding-right: 0.1875rem;
-    padding-left: 0.1875rem;
+    padding-right: 0.375rem;
+    padding-left: 0.375rem;
   }
 
 .badge--size-s .badge__icon > swirl-icon,
@@ -57,13 +57,13 @@
     }
 
 .badge--size-m {
-  min-width: 2rem;
-  height: 2rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
 }
 
 .badge--size-m .badge__label {
-    padding-right: 0.375rem;
-    padding-left: 0.375rem;
+    padding-right: 0.4375rem;
+    padding-left: 0.4375rem;
   }
 
 .badge--has-icon {
@@ -117,18 +117,27 @@
 }
 
 .badge--variant-dot {
-  width: 1.25rem;
+  width: 1.5rem;
   min-width: 0;
-  height: 1.25rem;
+  height: 1.5rem;
 }
 
+.badge--variant-dot.badge--size-xs {
+    width: 1rem;
+    height: 1rem;
+  }
+
+.badge--variant-dot.badge--size-s {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
 .badge--variant-dot .badge__label {
     padding-right: 0;
     padding-left: 0;
   }
 
-.badge--variant-dot .badge__label,
-  .badge--variant-dot .badge__icon {
+.badge--variant-dot .badge__icon {
     display: none;
   }
 

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

@@ -1,5 +1,5 @@
 import classnames from "classnames";
-import { h, Host } from "@stencil/core";
+import { Fragment, h, Host } from "@stencil/core";
 export class SwirlBadge {
   constructor() {
     this.icon = undefined;
@@ -12,7 +12,7 @@ export class SwirlBadge {
     const className = classnames("badge", `badge--intent-${this.intent}`, `badge--size-${this.size}`, `badge--variant-${this.variant}`, {
       "badge--has-icon": this.icon,
     });
-    return (h(Host, { role: "status" }, h("span", { class: className, part: "badge" }, this.icon && h("span", { class: "badge__icon", innerHTML: this.icon }), this.icon === undefined && (h("span", { class: "badge__label" }, this.label)))));
+    return (h(Host, { role: "status" }, h("span", { class: className, part: "badge" }, this.icon && h("span", { class: "badge__icon", innerHTML: this.icon }), this.icon === undefined && this.variant !== "dot" ? (h("span", { class: "badge__label" }, this.label)) : (h(Fragment, null, this.icon === undefined && (h("span", { class: "badge__label" }, "\u00A0")), h("swirl-visually-hidden", null, this.label))))));
   }
   static get is() { return "swirl-badge"; }
   static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ describe("swirl-badge", () => {
       components: [SwirlBadge],
       html: `<swirl-badge label="Label" icon="<swirl-icon-close></swirl-icon-close>"></swirl-badge>`,
     });
-    expect(page.root.shadowRoot.innerHTML).toMatchInlineSnapshot(`"<span class=\\"badge badge--intent-critical badge--size-m badge--variant-default badge--has-icon\\" part=\\"badge\\"><span class=\\"badge__icon\\"><swirl-icon-close></swirl-icon-close></span></span>"`);
+    expect(page.root.shadowRoot.innerHTML).toMatchInlineSnapshot(`"<span class=\\"badge badge--intent-critical badge--size-m badge--variant-default badge--has-icon\\" part=\\"badge\\"><span class=\\"badge__icon\\"><swirl-icon-close></swirl-icon-close></span><swirl-visually-hidden>Label</swirl-visually-hidden></span>"`);
     expect(page.root.querySelector(".badge__icon")).toBeDefined();
     expect(page.root.querySelector(".badge__label")).toBeNull();
   });

package/dist/collection/components/swirl-badge/swirl-badge.stories.js

@@ -27,6 +27,5 @@ const Template = (args) => {
 };
 export const SwirlBadge = Template.bind({});
 SwirlBadge.args = {
-  "aria-label": "3 new messages",
-  label: "3",
+  label: "3 new messages",
 };

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

@@ -152,6 +152,23 @@
       color: var(--s-icon-on-action-primary);
     }
 
+.button--variant-flat.button--intent-critical:not(:disabled) {
+    color: var(--s-text-on-status);
+    background-color: var(--s-action-critical-default);
+  }
+
+.button--variant-flat.button--intent-critical:not(:disabled):hover {
+      background-color: var(--s-action-critical-hovered);
+    }
+
+.button--variant-flat.button--intent-critical:not(:disabled):active {
+      background-color: var(--s-action-critical-pressed);
+    }
+
+.button--variant-flat.button--intent-critical:not(:disabled) .button__icon {
+      color: var(--s-icon-on-status);
+    }
+
 .button--variant-flat .button__icon {
     color: var(--s-icon-strong);
   }

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

@@ -404,6 +404,7 @@
 .shell-layout__sidebar {
   position: relative;
   display: none;
+  min-height: 0;
   grid-area: sidebar;
 }