@getflip/swirl-components 0.166.1 → 0.167.1

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

@@ -123,13 +123,18 @@
 }
 
 .badge--variant-dot.badge--size-xs {
-    width: 1rem;
-    height: 1rem;
+    width: 0.5rem;
+    height: 0.5rem;
   }
 
 .badge--variant-dot.badge--size-s {
-    width: 1.25rem;
-    height: 1.25rem;
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+.badge--variant-dot.badge--size-m {
+    width: 1rem;
+    height: 1rem;
   }
 
 .badge--variant-dot .badge__label {

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

@@ -62,7 +62,7 @@ export class SwirlDialog {
   }
   render() {
     const className = classnames("dialog", { "dialog--closing": this.closing });
-    return (h(Host, null, h("div", { "aria-describedby": "content", "aria-hidden": "true", "aria-labelledby": this.hideLabel ? undefined : "label", "aria-label": this.hideLabel ? this.label : undefined, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, ref: (el) => (this.dialogEl = el), role: "alertdialog" }, h("div", { class: "dialog__backdrop", onClick: this.onBackdropClick }), h("div", { class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (h("h2", { class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), h("div", { class: "dialog__content", part: "dialog__content", id: "content" }, h("slot", null)), h("div", { class: "dialog__controls", ref: (el) => (this.controlsContainerEl = el) }, this.secondaryActionLabel && (h("swirl-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: this.intent === "critical" ? "ghost" : "flat" })))))));
+    return (h(Host, null, h("div", { "aria-describedby": "content", "aria-hidden": "true", "aria-labelledby": this.hideLabel ? undefined : "label", "aria-label": this.hideLabel ? this.label : undefined, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, ref: (el) => (this.dialogEl = el), role: "alertdialog" }, h("div", { class: "dialog__backdrop", onClick: this.onBackdropClick }), h("div", { class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (h("h2", { class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), h("div", { class: "dialog__content", part: "dialog__content", id: "content" }, h("slot", null)), h("div", { class: "dialog__controls", ref: (el) => (this.controlsContainerEl = el) }, this.secondaryActionLabel && (h("swirl-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))));
   }
   static get is() { return "swirl-dialog"; }
   static get encapsulation() { return "shadow"; }

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

@@ -278,8 +278,9 @@
     --swirl-badge-border-color: var(--s-surface-sunken-default);
 
     position: absolute;
-    right: 0;
-    bottom: 0;
+    top: var(--s-space-4);
+    right: var(--s-space-4);
+    padding-right: var(--s-space-2);
     transform: translate3d(0.1875rem, 0, 0);
   }
 

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

@@ -115,5 +115,5 @@ const Template = (args) => {
 export const SwirlShellLayout = Template.bind({});
 SwirlShellLayout.args = {
   sidebarToggleBadgeAriaLabel: "3 new notifications",
-  sidebarToggleBadge: "3",
+  sidebarToggleBadge: true,
 };

package/dist/collection/components/swirl-shell-navigation-item/swirl-shell-navigation-item.css

@@ -30,7 +30,7 @@
   line-height: var(--s-line-height-sm);
   text-decoration: none;
   cursor: pointer;
-  container-type: inline-size;
+  container-type: size;
   gap: var(--s-space-16);
 }
 
@@ -118,14 +118,19 @@
 
   .shell-navigation-item__badge {
     position: absolute;
+    top: var(--s-space-4);
     right: var(--s-space-4);
-    bottom: var(--s-space-4);
+    padding: var(--s-space-2);
+  }
+
+  .shell-navigation-item__badge--dot {
+    top: var(--s-space-8);
+    right: var(--s-space-8);
   }
 }
 
-@container (min-width: 14rem) {
-  .shell-navigation-item__badge {
-    margin-left: auto;
+@container (min-width: 10rem) {
+  .shell-navigation-item__badge--dot {
     padding-right: var(--s-space-4);
   }
 }

package/dist/collection/components/swirl-shell-navigation-item/swirl-shell-navigation-item.js

@@ -17,7 +17,9 @@ export class SwirlShellNavigationItem {
     });
     const isLink = Boolean(this.href);
     const Tag = isLink ? "a" : "button";
-    return (h(Host, null, h(Tag, { class: className, href: this.href, target: this.target, type: isLink ? undefined : "button" }, h("span", { class: "shell-navigation-item__icon" }, h("slot", { name: "icon" })), h("span", { class: "shell-navigation-item__label" }, this.label), this.badgeLabel !== undefined && this.badgeLabel !== null && (h("swirl-badge", { "aria-label": this.badgeLabel, class: "shell-navigation-item__badge", label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" })))));
+    return (h(Host, null, h(Tag, { class: className, href: this.href, target: this.target, type: isLink ? undefined : "button" }, h("span", { class: "shell-navigation-item__icon" }, h("slot", { name: "icon" })), h("span", { class: "shell-navigation-item__label" }, this.label), this.badgeLabel !== undefined && this.badgeLabel !== null && (h("swirl-badge", { "aria-label": this.badgeLabel, class: classnames("shell-navigation-item__badge", {
+        "shell-navigation-item__badge--dot": this.badgeLabel === "",
+      }), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" })))));
   }
   static get is() { return "swirl-shell-navigation-item"; }
   static get encapsulation() { return "shadow"; }