@getflip/swirl-components 0.166.1 → 0.167.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/components.json +1 -1
  2. package/dist/cjs/swirl-badge.cjs.entry.js +1 -1
  3. package/dist/cjs/swirl-shell-layout.cjs.entry.js +1 -1
  4. package/dist/cjs/swirl-shell-navigation-item.cjs.entry.js +4 -2
  5. package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
  6. package/dist/collection/components/swirl-badge/swirl-badge.css +9 -4
  7. package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.css +3 -2
  8. package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.stories.js +1 -1
  9. package/dist/collection/components/swirl-shell-navigation-item/swirl-shell-navigation-item.css +10 -5
  10. package/dist/collection/components/swirl-shell-navigation-item/swirl-shell-navigation-item.js +3 -1
  11. package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
  12. package/dist/components/swirl-badge2.js +1 -1
  13. package/dist/components/swirl-shell-layout.js +1 -1
  14. package/dist/components/swirl-shell-navigation-item.js +4 -2
  15. package/dist/esm/swirl-badge.entry.js +1 -1
  16. package/dist/esm/swirl-shell-layout.entry.js +1 -1
  17. package/dist/esm/swirl-shell-navigation-item.entry.js +4 -2
  18. package/dist/swirl-components/{p-75201a35.entry.js → p-6a8b8c25.entry.js} +1 -1
  19. package/dist/swirl-components/{p-82c90e51.entry.js → p-7f2d0141.entry.js} +1 -1
  20. package/dist/swirl-components/p-953fb8a0.entry.js +1 -0
  21. package/dist/swirl-components/swirl-components.esm.js +1 -1
  22. package/package.json +1 -1
  23. package/dist/swirl-components/p-99b7cf72.entry.js +0 -1
package/dist/collection/components/swirl-badge/swirl-badge.css CHANGED
@@ -123,13 +123,18 @@
123
123
  }
124
124
 
125
125
  .badge--variant-dot.badge--size-xs {
126
- width: 1rem;
127
- height: 1rem;
126
+ width: 0.5rem;
127
+ height: 0.5rem;
128
128
  }
129
129
 
130
130
  .badge--variant-dot.badge--size-s {
131
- width: 1.25rem;
132
- height: 1.25rem;
131
+ width: 0.75rem;
132
+ height: 0.75rem;
133
+ }
134
+
135
+ .badge--variant-dot.badge--size-m {
136
+ width: 1rem;
137
+ height: 1rem;
133
138
  }
134
139
 
135
140
  .badge--variant-dot .badge__label {
package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.css CHANGED
@@ -278,8 +278,9 @@
278
278
  --swirl-badge-border-color: var(--s-surface-sunken-default);
279
279
 
280
280
  position: absolute;
281
- right: 0;
282
- bottom: 0;
281
+ top: var(--s-space-4);
282
+ right: var(--s-space-4);
283
+ padding-right: var(--s-space-2);
283
284
  transform: translate3d(0.1875rem, 0, 0);
284
285
  }
285
286
 
package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.stories.js CHANGED
@@ -115,5 +115,5 @@ const Template = (args) => {
115
115
  export const SwirlShellLayout = Template.bind({});
116
116
  SwirlShellLayout.args = {
117
117
  sidebarToggleBadgeAriaLabel: "3 new notifications",
118
- sidebarToggleBadge: "3",
118
+ sidebarToggleBadge: true,
119
119
  };
package/dist/collection/components/swirl-shell-navigation-item/swirl-shell-navigation-item.css CHANGED
@@ -30,7 +30,7 @@
30
30
  line-height: var(--s-line-height-sm);
31
31
  text-decoration: none;
32
32
  cursor: pointer;
33
- container-type: inline-size;
33
+ container-type: size;
34
34
  gap: var(--s-space-16);
35
35
  }
36
36
 
@@ -118,14 +118,19 @@
118
118
 
119
119
  .shell-navigation-item__badge {
120
120
  position: absolute;
121
+ top: var(--s-space-4);
121
122
  right: var(--s-space-4);
122
- bottom: var(--s-space-4);
123
+ padding: var(--s-space-2);
124
+ }
125
+
126
+ .shell-navigation-item__badge--dot {
127
+ top: var(--s-space-8);
128
+ right: var(--s-space-8);
123
129
  }
124
130
  }
125
131
 
126
- @container (min-width: 14rem) {
127
- .shell-navigation-item__badge {
128
- margin-left: auto;
132
+ @container (min-width: 10rem) {
133
+ .shell-navigation-item__badge--dot {
129
134
  padding-right: var(--s-space-4);
130
135
  }
131
136
  }
package/dist/collection/components/swirl-shell-navigation-item/swirl-shell-navigation-item.js CHANGED
@@ -17,7 +17,9 @@ export class SwirlShellNavigationItem {
17
17
  });
18
18
  const isLink = Boolean(this.href);
19
19
  const Tag = isLink ? "a" : "button";
20
- 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" })))));
20
+ 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", {
21
+ "shell-navigation-item__badge--dot": this.badgeLabel === "",
22
+ }), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" })))));
21
23
  }
22
24
  static get is() { return "swirl-shell-navigation-item"; }
23
25
  static get encapsulation() { return "shadow"; }