@getflip/swirl-components 0.531.1 → 0.531.3

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 (22) hide show
  1. package/components.json +1 -1
  2. package/dist/cjs/swirl-avatar.cjs.entry.js +1 -1
  3. package/dist/cjs/swirl-button.cjs.entry.js +4 -4
  4. package/dist/cjs/swirl-toast.cjs.entry.js +35 -7
  5. package/dist/collection/components/swirl-avatar/swirl-avatar.js +1 -1
  6. package/dist/collection/components/swirl-button/swirl-button.js +4 -4
  7. package/dist/collection/components/swirl-toast/swirl-toast.js +35 -7
  8. package/dist/components/swirl-avatar.js +1 -1
  9. package/dist/components/swirl-button2.js +1 -1
  10. package/dist/components/swirl-toast2.js +1 -1
  11. package/dist/esm/swirl-avatar.entry.js +1 -1
  12. package/dist/esm/swirl-button.entry.js +4 -4
  13. package/dist/esm/swirl-toast.entry.js +35 -7
  14. package/dist/swirl-components/p-da6fa0fa.entry.js +1 -0
  15. package/dist/swirl-components/p-ecfa7c79.entry.js +1 -0
  16. package/dist/swirl-components/p-fad7aae8.entry.js +1 -0
  17. package/dist/swirl-components/swirl-components.esm.js +1 -1
  18. package/dist/types/components/swirl-toast/swirl-toast.d.ts +6 -0
  19. package/package.json +1 -1
  20. package/dist/swirl-components/p-7e2b64f8.entry.js +0 -1
  21. package/dist/swirl-components/p-bf3af2c8.entry.js +0 -1
  22. package/dist/swirl-components/p-d9e99fd7.entry.js +0 -1
package/components.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2026-10-01T09:46:37",
2
+ "timestamp": "2026-10-07T08:58:59",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.43.1",
package/dist/cjs/swirl-avatar.cjs.entry.js CHANGED
@@ -118,7 +118,7 @@ const SwirlAvatar = class {
118
118
  });
119
119
  const badgeClassName = index$1.classnames("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
120
120
  const toolClassName = index$1.classnames("avatar__tool", `avatar__tool--position-${this.toolPosition}`);
121
- return (index.h(index.Host, { key: '507321c143bd3a7bd96727522250a32a0bddfda9', "aria-label": this.interactive ? this.label : undefined, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, index.h("span", { key: '41c06e0e9a91b7012a898a19c7d2ff66b93a3584', class: className, part: "avatar" }, showImage && (index.h("span", { key: '4026f68212a7026dfdb236bffacc210a7dfd7b30', class: "avatar__image" }, index.h("img", { key: '4636819fb2a365ed239fe765a4efcb347186ca06', alt: "", height: swirlAvatarSizeMappings[this.size], loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (index.h("span", { key: '87a4741931e8a7057764618f4164df8c3286fa15', class: "avatar__initials" }, index.h("span", { key: 'ac5d4393d9bfaa22391e3414e0a02d3831c8c137' }, this.initials))), showIcon && index.h("span", { key: '29690e49b2882761d26dd548bbdd59d3eb458d5d', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (index.h("span", { key: '28cba2cb26c839a0f368bf7312039cfc36cd60ab', class: "avatar__icon" }, index.h("swirl-icon-person", { key: 'e76a5efbecc6a46608d7162a9aeebd7e7acfe8f9' }))), showBadge && (index.h("span", { key: 'd88cc696f910bd1105811d0d07636f7ed686d11b', class: badgeClassName, innerHTML: this.badge })), index.h("span", { key: 'eeb86573ed228297fba743a2327aea481cf05e03', class: toolClassName }, index.h("slot", { key: '121f539afb9e2ef8adac562c05c1f62fba280e87', name: "tool" }))), this.showLabel && (index.h("span", { key: 'b73d9b0e724038fa345e081ec3761fcd964ea95f', "aria-hidden": true, class: "avatar__label" }, this.label))));
121
+ return (index.h(index.Host, { key: '507321c143bd3a7bd96727522250a32a0bddfda9', "aria-label": this.interactive ? this.label : undefined, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, index.h("span", { key: '41c06e0e9a91b7012a898a19c7d2ff66b93a3584', class: className, part: "avatar" }, showImage && (index.h("span", { key: '4026f68212a7026dfdb236bffacc210a7dfd7b30', class: "avatar__image" }, index.h("img", { key: '0699557694dc623f53036b508311c1f4eba09203', alt: this.label, height: swirlAvatarSizeMappings[this.size], loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (index.h("span", { key: 'b3472929371b253c5e595dd3e06249a2c93c54c2', "aria-label": this.label, class: "avatar__initials", role: "img" }, index.h("span", { key: 'a5a799062a74c2f221016ade901faaf2cd486732' }, this.initials))), showIcon && (index.h("span", { key: 'c07bdccd23723a9b8edf8f37d0c91d58cecf3509', "aria-label": this.label, class: "avatar__icon", innerHTML: this.icon, role: "img" })), showFallbackIcon && (index.h("span", { key: 'a0c4320679482b1cedeed96e43624ed5b5f742c4', "aria-label": this.label, class: "avatar__icon", role: "img" }, index.h("swirl-icon-person", { key: 'dcd0196bb0e0a22f998d327f7d96e74f0fc42222' }))), showBadge && (index.h("span", { key: 'bf05b4f9203f2fc5c7b12be8ff6ab739ed62d6ed', class: badgeClassName, innerHTML: this.badge })), index.h("span", { key: '6e410915db1a4e551498b756cd27c2055a9f154b', class: toolClassName }, index.h("slot", { key: '3246af86e577fec79fa0775547947743510a127b', name: "tool" }))), this.showLabel && (index.h("span", { key: '06de3d3ee675f209fe1c25a679d58fd19425fd87', "aria-hidden": true, class: "avatar__label" }, this.label))));
122
122
  }
123
123
  get element() { return index.getElement(this); }
124
124
  static get watchers() { return {
package/dist/cjs/swirl-button.cjs.entry.js CHANGED
@@ -65,11 +65,11 @@ const SwirlButton = class {
65
65
  }
66
66
  }
67
67
  render() {
68
- const hideLabel = (this.hideLabel && Boolean(this.icon)) ||
68
+ const hasIcon = Boolean(this.icon) || Boolean(this.el.querySelector("[slot='icon']"));
69
+ const hideLabel = (this.hideLabel && hasIcon) ||
69
70
  (this.variant === "floating" && this.intent === "default");
70
71
  const isLink = Boolean(this.href);
71
72
  const ariaLabel = this.getAriaLabel(hideLabel);
72
- const hasIcon = this.icon || Boolean(this.el.querySelector("[slot='icon']"));
73
73
  const hasTag = Boolean(this.el.querySelector("[slot='tag']"));
74
74
  const hasTrailingSlot = Boolean(this.el.querySelector("[slot='trailing']"));
75
75
  const className = index$1.classnames("button", `button--icon-position-${this.iconPosition}`, `button--intent-${this.intent}`, `button--size-${this.size}`, `button--text-align-${this.textAlign}`, `button--variant-${this.variant}`, {
@@ -81,13 +81,13 @@ const SwirlButton = class {
81
81
  "button--pressed": this.pressed,
82
82
  });
83
83
  const Tag = isLink ? "a" : "button";
84
- return (index.h(index.Host, { key: 'e7602a78117c447e1c37a6951d79ceaade40e2c7', style: { pointerEvents: this.disabled ? "none" : "" } }, index.h(Tag, { key: 'ab00f989857f767b2b75625e9df1064f9125a1a9', "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, "aria-pressed": this.pressed ? "true" : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value, style: {
84
+ return (index.h(index.Host, { key: '39431a264dbc13b90dd7861927bf56ee030faaa8', style: { pointerEvents: this.disabled ? "none" : "" } }, index.h(Tag, { key: 'b7ddae041810657c2f8eae75c22e1241a97e25f3', "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, "aria-pressed": this.pressed ? "true" : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value, style: {
85
85
  cursor: !this.disabled && this.cursor !== "pointer"
86
86
  ? this.cursor
87
87
  : undefined,
88
88
  fontSize: this.inheritFontSize ? "inherit" : undefined,
89
89
  lineHeight: this.inheritFontSize ? "inherit" : undefined,
90
- } }, Boolean(this.icon) && (index.h("span", { key: 'fd2334063e4ea5c7c21a17cbfc2ef347d0ad1049', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (index.h("span", { key: '105ec9131873da4ded162d97f12e0ef150fd31f4', class: "button__icon", ref: (el) => (this.iconEl = el) }, index.h("slot", { key: '8797f3878578430e2b10ba707e99db179c80b7e6', name: "icon" }))), !hideLabel && index.h("span", { key: 'b47564712cf30122100e1cac186019c0d90cf0fb', class: "button__label" }, this.label), hasTag && (index.h("span", { key: '91a903f836ba8f32072798b5fe4f184960037a73', class: "button__tag" }, index.h("slot", { key: 'cad22304d1490c362da9d15c8bc55351de5c12d6', name: "tag" }))), hasTrailingSlot && (index.h("div", { key: '352c11dd6d9332e950486b1e8ee6119e158cb893', class: "button__trailing-slot" }, index.h("slot", { key: '7e6f28a9ea17106c2fc5b18bdfaf67dec3f41468', name: "trailing" }))))));
90
+ } }, Boolean(this.icon) && (index.h("span", { key: '58ad9ec67fd692d1bbd4d877f6820faeec548a59', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (index.h("span", { key: '89b0f33c96234cca0dbca8caf9c2e13edf330067', class: "button__icon", ref: (el) => (this.iconEl = el) }, index.h("slot", { key: '8fe33f30f6424c19d7f3322e77794ab409432d27', name: "icon" }))), !hideLabel && index.h("span", { key: '11f2397daaced6b03f241db1cda3a5b2786b5ae5', class: "button__label" }, this.label), hasTag && (index.h("span", { key: '67703c9b0d1d51f5bdefb185959354ed1741577e', class: "button__tag" }, index.h("slot", { key: 'c947a911fcd57072f283fcfa03d5002b6d8f5992', name: "tag" }))), hasTrailingSlot && (index.h("div", { key: 'c419181f3f91737ff6f10cec5f0774d87a6c1e9e', class: "button__trailing-slot" }, index.h("slot", { key: '24a5177b877256fd1eef407855fe6d5558ec10d1', name: "trailing" }))))));
91
91
  }
92
92
  get el() { return index.getElement(this); }
93
93
  };
package/dist/cjs/swirl-toast.cjs.entry.js CHANGED
@@ -15,6 +15,7 @@ const SwirlToast = class {
15
15
  this.accessibleDismissLabel = "Dismiss";
16
16
  this.actionPosition = "inline";
17
17
  this.intent = "default";
18
+ this.loaded = false;
18
19
  this.mediaQueryUnsubscribe = () => { };
19
20
  this.onAction = () => {
20
21
  this.action.emit(this.toastId);
@@ -27,16 +28,30 @@ const SwirlToast = class {
27
28
  watchDuration() {
28
29
  this.startTimer();
29
30
  }
31
+ connectedCallback() {
32
+ // moving toasts in the DOM disconnects and reconnects them,
33
+ // this restores what disconnectedCallback cleaned up. (e.g. provider moving into a dialog)
34
+ if (!this.loaded) {
35
+ return;
36
+ }
37
+ this.scheduleDismiss();
38
+ this.subscribeToMediaQuery();
39
+ }
30
40
  componentDidLoad() {
41
+ this.loaded = true;
31
42
  this.startTimer();
32
- this.mediaQueryUnsubscribe = mediaQuery_service.DesktopMediaQuery.subscribe((isDesktop) => {
33
- this.forceIconProps(isDesktop);
34
- });
43
+ this.subscribeToMediaQuery();
35
44
  }
36
45
  disconnectedCallback() {
37
- this.clearTimer();
46
+ this.cancelScheduledDismiss();
38
47
  this.mediaQueryUnsubscribe();
39
48
  }
49
+ subscribeToMediaQuery() {
50
+ this.mediaQueryUnsubscribe();
51
+ this.mediaQueryUnsubscribe = mediaQuery_service.DesktopMediaQuery.subscribe((isDesktop) => {
52
+ this.forceIconProps(isDesktop);
53
+ });
54
+ }
40
55
  forceIconProps(smallIcon) {
41
56
  const icon = this.iconEl?.children[0];
42
57
  const dismissIcon = this.dismissIconEl;
@@ -48,20 +63,33 @@ const SwirlToast = class {
48
63
  if (this.duration === undefined || this.duration === Infinity) {
49
64
  return;
50
65
  }
66
+ this.dismissAt = Date.now() + this.duration;
67
+ this.scheduleDismiss();
68
+ }
69
+ scheduleDismiss() {
70
+ if (this.dismissAt === undefined) {
71
+ return;
72
+ }
73
+ this.cancelScheduledDismiss();
51
74
  this.timeout = setTimeout(() => {
75
+ this.clearTimer();
52
76
  this.dismiss.emit(this.toastId);
53
- }, this.duration);
77
+ }, Math.max(0, this.dismissAt - Date.now()));
54
78
  }
55
- clearTimer() {
79
+ cancelScheduledDismiss() {
56
80
  if (!Boolean(this.timeout)) {
57
81
  return;
58
82
  }
59
83
  clearTimeout(this.timeout);
60
84
  this.timeout = undefined;
61
85
  }
86
+ clearTimer() {
87
+ this.cancelScheduledDismiss();
88
+ this.dismissAt = undefined;
89
+ }
62
90
  render() {
63
91
  const className = index$1.classnames("toast", `toast--intent-${this.intent}`, `toast--action-position-${this.actionPosition}`);
64
- return (index.h(index.Host, { key: 'f263cbe9a8e349d88043fb0d0324e074e4419f0d' }, index.h("div", { key: '5f43b16eb1a1e75e8b7e4fe6b4376965d636924d', class: className }, this.icon && (index.h("span", { key: 'adf6249bfd7605b15740e6db5ecf4141df68d614', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), index.h("span", { key: 'aad0cd3c9b764eb3e05cc5bb9341857aad7a70d2', class: "toast__content-container" }, index.h("span", { key: '82f1b9eab0e381248cbaca4d2b5afbbcb4f30184', class: "toast__content", innerHTML: this.content, part: "toast__content" }, index.h("slot", { key: '0cd204c4d4eab757ad6bc067ba5e356bcaeb9fd2' })), this.actionLabel && (index.h("swirl-button", { key: 'bafaa29ab97d29c6cf41b5d01028c96c1821887b', class: "toast__action-button", label: this.actionLabel, onClick: this.onAction, variant: "plain" }))), index.h("button", { key: 'b52db302c2841959fbe68eb938cf10fe59c08103', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (index.h("swirl-icon-close", { key: '48379c17bd2ea4b0f183b003b3d0c5e86a8300f4', ref: (el) => (this.dismissIconEl = el) }))))));
92
+ return (index.h(index.Host, { key: '236d1921fc495438af83821a3e84d460ac5838d7' }, index.h("div", { key: '5baabef2daf9411797548efc84b48ce124e3be71', class: className }, this.icon && (index.h("span", { key: '91293a10a4ca9c1b4cd44d20ff59a15864569d00', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), index.h("span", { key: 'b1f55e219c324f31ac5adfef6fd01c0752a883a9', class: "toast__content-container" }, index.h("span", { key: '007ad76a5e78dc93ae72ae5ef20673bb3e00a1af', class: "toast__content", innerHTML: this.content, part: "toast__content" }, index.h("slot", { key: '25bc9837c8d25fccf874b1d1664a56921588024d' })), this.actionLabel && (index.h("swirl-button", { key: '7ea51c33fdeba411204364f4d00f9f18e9de3fed', class: "toast__action-button", label: this.actionLabel, onClick: this.onAction, variant: "plain" }))), index.h("button", { key: '7c05d917a8778519b92acbbf44d1a64e2f251d85', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (index.h("swirl-icon-close", { key: '6e70406ba4e7decb6739d0ccf77023cc23710e2e', ref: (el) => (this.dismissIconEl = el) }))))));
65
93
  }
66
94
  static get watchers() { return {
67
95
  "duration": [{
package/dist/collection/components/swirl-avatar/swirl-avatar.js CHANGED
@@ -113,7 +113,7 @@ export class SwirlAvatar {
113
113
  });
114
114
  const badgeClassName = classnames("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
115
115
  const toolClassName = classnames("avatar__tool", `avatar__tool--position-${this.toolPosition}`);
116
- return (h(Host, { key: '507321c143bd3a7bd96727522250a32a0bddfda9', "aria-label": this.interactive ? this.label : undefined, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { key: '41c06e0e9a91b7012a898a19c7d2ff66b93a3584', class: className, part: "avatar" }, showImage && (h("span", { key: '4026f68212a7026dfdb236bffacc210a7dfd7b30', class: "avatar__image" }, h("img", { key: '4636819fb2a365ed239fe765a4efcb347186ca06', alt: "", height: swirlAvatarSizeMappings[this.size], loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (h("span", { key: '87a4741931e8a7057764618f4164df8c3286fa15', class: "avatar__initials" }, h("span", { key: 'ac5d4393d9bfaa22391e3414e0a02d3831c8c137' }, this.initials))), showIcon && h("span", { key: '29690e49b2882761d26dd548bbdd59d3eb458d5d', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { key: '28cba2cb26c839a0f368bf7312039cfc36cd60ab', class: "avatar__icon" }, h("swirl-icon-person", { key: 'e76a5efbecc6a46608d7162a9aeebd7e7acfe8f9' }))), showBadge && (h("span", { key: 'd88cc696f910bd1105811d0d07636f7ed686d11b', class: badgeClassName, innerHTML: this.badge })), h("span", { key: 'eeb86573ed228297fba743a2327aea481cf05e03', class: toolClassName }, h("slot", { key: '121f539afb9e2ef8adac562c05c1f62fba280e87', name: "tool" }))), this.showLabel && (h("span", { key: 'b73d9b0e724038fa345e081ec3761fcd964ea95f', "aria-hidden": true, class: "avatar__label" }, this.label))));
116
+ return (h(Host, { key: '507321c143bd3a7bd96727522250a32a0bddfda9', "aria-label": this.interactive ? this.label : undefined, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { key: '41c06e0e9a91b7012a898a19c7d2ff66b93a3584', class: className, part: "avatar" }, showImage && (h("span", { key: '4026f68212a7026dfdb236bffacc210a7dfd7b30', class: "avatar__image" }, h("img", { key: '0699557694dc623f53036b508311c1f4eba09203', alt: this.label, height: swirlAvatarSizeMappings[this.size], loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (h("span", { key: 'b3472929371b253c5e595dd3e06249a2c93c54c2', "aria-label": this.label, class: "avatar__initials", role: "img" }, h("span", { key: 'a5a799062a74c2f221016ade901faaf2cd486732' }, this.initials))), showIcon && (h("span", { key: 'c07bdccd23723a9b8edf8f37d0c91d58cecf3509', "aria-label": this.label, class: "avatar__icon", innerHTML: this.icon, role: "img" })), showFallbackIcon && (h("span", { key: 'a0c4320679482b1cedeed96e43624ed5b5f742c4', "aria-label": this.label, class: "avatar__icon", role: "img" }, h("swirl-icon-person", { key: 'dcd0196bb0e0a22f998d327f7d96e74f0fc42222' }))), showBadge && (h("span", { key: 'bf05b4f9203f2fc5c7b12be8ff6ab739ed62d6ed', class: badgeClassName, innerHTML: this.badge })), h("span", { key: '6e410915db1a4e551498b756cd27c2055a9f154b', class: toolClassName }, h("slot", { key: '3246af86e577fec79fa0775547947743510a127b', name: "tool" }))), this.showLabel && (h("span", { key: '06de3d3ee675f209fe1c25a679d58fd19425fd87', "aria-hidden": true, class: "avatar__label" }, this.label))));
117
117
  }
118
118
  static get is() { return "swirl-avatar"; }
119
119
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/swirl-button/swirl-button.js CHANGED
@@ -63,11 +63,11 @@ export class SwirlButton {
63
63
  }
64
64
  }
65
65
  render() {
66
- const hideLabel = (this.hideLabel && Boolean(this.icon)) ||
66
+ const hasIcon = Boolean(this.icon) || Boolean(this.el.querySelector("[slot='icon']"));
67
+ const hideLabel = (this.hideLabel && hasIcon) ||
67
68
  (this.variant === "floating" && this.intent === "default");
68
69
  const isLink = Boolean(this.href);
69
70
  const ariaLabel = this.getAriaLabel(hideLabel);
70
- const hasIcon = this.icon || Boolean(this.el.querySelector("[slot='icon']"));
71
71
  const hasTag = Boolean(this.el.querySelector("[slot='tag']"));
72
72
  const hasTrailingSlot = Boolean(this.el.querySelector("[slot='trailing']"));
73
73
  const className = classnames("button", `button--icon-position-${this.iconPosition}`, `button--intent-${this.intent}`, `button--size-${this.size}`, `button--text-align-${this.textAlign}`, `button--variant-${this.variant}`, {
@@ -79,13 +79,13 @@ export class SwirlButton {
79
79
  "button--pressed": this.pressed,
80
80
  });
81
81
  const Tag = isLink ? "a" : "button";
82
- return (h(Host, { key: 'e7602a78117c447e1c37a6951d79ceaade40e2c7', style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { key: 'ab00f989857f767b2b75625e9df1064f9125a1a9', "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, "aria-pressed": this.pressed ? "true" : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value, style: {
82
+ return (h(Host, { key: '39431a264dbc13b90dd7861927bf56ee030faaa8', style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { key: 'b7ddae041810657c2f8eae75c22e1241a97e25f3', "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, "aria-pressed": this.pressed ? "true" : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value, style: {
83
83
  cursor: !this.disabled && this.cursor !== "pointer"
84
84
  ? this.cursor
85
85
  : undefined,
86
86
  fontSize: this.inheritFontSize ? "inherit" : undefined,
87
87
  lineHeight: this.inheritFontSize ? "inherit" : undefined,
88
- } }, Boolean(this.icon) && (h("span", { key: 'fd2334063e4ea5c7c21a17cbfc2ef347d0ad1049', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (h("span", { key: '105ec9131873da4ded162d97f12e0ef150fd31f4', class: "button__icon", ref: (el) => (this.iconEl = el) }, h("slot", { key: '8797f3878578430e2b10ba707e99db179c80b7e6', name: "icon" }))), !hideLabel && h("span", { key: 'b47564712cf30122100e1cac186019c0d90cf0fb', class: "button__label" }, this.label), hasTag && (h("span", { key: '91a903f836ba8f32072798b5fe4f184960037a73', class: "button__tag" }, h("slot", { key: 'cad22304d1490c362da9d15c8bc55351de5c12d6', name: "tag" }))), hasTrailingSlot && (h("div", { key: '352c11dd6d9332e950486b1e8ee6119e158cb893', class: "button__trailing-slot" }, h("slot", { key: '7e6f28a9ea17106c2fc5b18bdfaf67dec3f41468', name: "trailing" }))))));
88
+ } }, Boolean(this.icon) && (h("span", { key: '58ad9ec67fd692d1bbd4d877f6820faeec548a59', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (h("span", { key: '89b0f33c96234cca0dbca8caf9c2e13edf330067', class: "button__icon", ref: (el) => (this.iconEl = el) }, h("slot", { key: '8fe33f30f6424c19d7f3322e77794ab409432d27', name: "icon" }))), !hideLabel && h("span", { key: '11f2397daaced6b03f241db1cda3a5b2786b5ae5', class: "button__label" }, this.label), hasTag && (h("span", { key: '67703c9b0d1d51f5bdefb185959354ed1741577e', class: "button__tag" }, h("slot", { key: 'c947a911fcd57072f283fcfa03d5002b6d8f5992', name: "tag" }))), hasTrailingSlot && (h("div", { key: 'c419181f3f91737ff6f10cec5f0774d87a6c1e9e', class: "button__trailing-slot" }, h("slot", { key: '24a5177b877256fd1eef407855fe6d5558ec10d1', name: "trailing" }))))));
89
89
  }
90
90
  static get is() { return "swirl-button"; }
91
91
  static get encapsulation() { return "scoped"; }
package/dist/collection/components/swirl-toast/swirl-toast.js CHANGED
@@ -9,6 +9,7 @@ export class SwirlToast {
9
9
  this.accessibleDismissLabel = "Dismiss";
10
10
  this.actionPosition = "inline";
11
11
  this.intent = "default";
12
+ this.loaded = false;
12
13
  this.mediaQueryUnsubscribe = () => { };
13
14
  this.onAction = () => {
14
15
  this.action.emit(this.toastId);
@@ -21,16 +22,30 @@ export class SwirlToast {
21
22
  watchDuration() {
22
23
  this.startTimer();
23
24
  }
25
+ connectedCallback() {
26
+ // moving toasts in the DOM disconnects and reconnects them,
27
+ // this restores what disconnectedCallback cleaned up. (e.g. provider moving into a dialog)
28
+ if (!this.loaded) {
29
+ return;
30
+ }
31
+ this.scheduleDismiss();
32
+ this.subscribeToMediaQuery();
33
+ }
24
34
  componentDidLoad() {
35
+ this.loaded = true;
25
36
  this.startTimer();
26
- this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
27
- this.forceIconProps(isDesktop);
28
- });
37
+ this.subscribeToMediaQuery();
29
38
  }
30
39
  disconnectedCallback() {
31
- this.clearTimer();
40
+ this.cancelScheduledDismiss();
32
41
  this.mediaQueryUnsubscribe();
33
42
  }
43
+ subscribeToMediaQuery() {
44
+ this.mediaQueryUnsubscribe();
45
+ this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
46
+ this.forceIconProps(isDesktop);
47
+ });
48
+ }
34
49
  forceIconProps(smallIcon) {
35
50
  const icon = this.iconEl?.children[0];
36
51
  const dismissIcon = this.dismissIconEl;
@@ -42,20 +57,33 @@ export class SwirlToast {
42
57
  if (this.duration === undefined || this.duration === Infinity) {
43
58
  return;
44
59
  }
60
+ this.dismissAt = Date.now() + this.duration;
61
+ this.scheduleDismiss();
62
+ }
63
+ scheduleDismiss() {
64
+ if (this.dismissAt === undefined) {
65
+ return;
66
+ }
67
+ this.cancelScheduledDismiss();
45
68
  this.timeout = setTimeout(() => {
69
+ this.clearTimer();
46
70
  this.dismiss.emit(this.toastId);
47
- }, this.duration);
71
+ }, Math.max(0, this.dismissAt - Date.now()));
48
72
  }
49
- clearTimer() {
73
+ cancelScheduledDismiss() {
50
74
  if (!Boolean(this.timeout)) {
51
75
  return;
52
76
  }
53
77
  clearTimeout(this.timeout);
54
78
  this.timeout = undefined;
55
79
  }
80
+ clearTimer() {
81
+ this.cancelScheduledDismiss();
82
+ this.dismissAt = undefined;
83
+ }
56
84
  render() {
57
85
  const className = classnames("toast", `toast--intent-${this.intent}`, `toast--action-position-${this.actionPosition}`);
58
- return (h(Host, { key: 'f263cbe9a8e349d88043fb0d0324e074e4419f0d' }, h("div", { key: '5f43b16eb1a1e75e8b7e4fe6b4376965d636924d', class: className }, this.icon && (h("span", { key: 'adf6249bfd7605b15740e6db5ecf4141df68d614', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: 'aad0cd3c9b764eb3e05cc5bb9341857aad7a70d2', class: "toast__content-container" }, h("span", { key: '82f1b9eab0e381248cbaca4d2b5afbbcb4f30184', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: '0cd204c4d4eab757ad6bc067ba5e356bcaeb9fd2' })), this.actionLabel && (h("swirl-button", { key: 'bafaa29ab97d29c6cf41b5d01028c96c1821887b', class: "toast__action-button", label: this.actionLabel, onClick: this.onAction, variant: "plain" }))), h("button", { key: 'b52db302c2841959fbe68eb938cf10fe59c08103', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (h("swirl-icon-close", { key: '48379c17bd2ea4b0f183b003b3d0c5e86a8300f4', ref: (el) => (this.dismissIconEl = el) }))))));
86
+ return (h(Host, { key: '236d1921fc495438af83821a3e84d460ac5838d7' }, h("div", { key: '5baabef2daf9411797548efc84b48ce124e3be71', class: className }, this.icon && (h("span", { key: '91293a10a4ca9c1b4cd44d20ff59a15864569d00', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: 'b1f55e219c324f31ac5adfef6fd01c0752a883a9', class: "toast__content-container" }, h("span", { key: '007ad76a5e78dc93ae72ae5ef20673bb3e00a1af', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: '25bc9837c8d25fccf874b1d1664a56921588024d' })), this.actionLabel && (h("swirl-button", { key: '7ea51c33fdeba411204364f4d00f9f18e9de3fed', class: "toast__action-button", label: this.actionLabel, onClick: this.onAction, variant: "plain" }))), h("button", { key: '7c05d917a8778519b92acbbf44d1a64e2f251d85', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (h("swirl-icon-close", { key: '6e70406ba4e7decb6739d0ccf77023cc23710e2e', ref: (el) => (this.dismissIconEl = el) }))))));
59
87
  }
60
88
  static get is() { return "swirl-toast"; }
61
89
  static get encapsulation() { return "shadow"; }
package/dist/components/swirl-avatar.js CHANGED
@@ -1 +1 @@
1
- import{proxyCustomElement as a,HTMLElement as i,createEvent as t,h as s,Host as r,transformTag as e}from"@stencil/core/internal/client";import{c as o}from"./index2.js";import{d as n}from"./swirl-icon-person2.js";const l={"3xs":20,"2xs":24,xs:28,s:32,m:40,l:48,xl:64,"2xl":144},d=a(class extends i{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.imageError=t(this,"imageError",7),this.imageLoad=t(this,"imageLoad",7),this.badgePosition="bottom",this.color="kiwi",this.interactive=!1,this.showLabel=!1,this.size="m",this.toolPosition="bottom",this.variant="round",this.loadingError=!1,this.loaded=!1,this.inViewport=!1,this.componentLoaded=!1,this.onImageElementUpdate=a=>{this.imgEl?.removeEventListener("load",this.setImageAvailable),this.imgEl?.removeEventListener("error",this.setImageUnavailable),this.imgEl=a,this.imgEl&&(this.imgEl.addEventListener("load",this.setImageAvailable),this.imgEl.addEventListener("error",this.setImageUnavailable))},this.setImageAvailable=()=>{this.imageAvailable=!0,this.loadingError=!1,this.loaded=!0,this.imageLoad.emit()},this.setImageUnavailable=()=>{this.imageAvailable=!1,this.loaded=!0,this.loadingError=!0,this.imageError.emit()},this.onKeydown=a=>{"Space"===a.code?a.preventDefault():"Enter"===a.code&&(a.preventDefault(),this.element.click())},this.onKeyup=a=>{"Space"===a.code&&(a.preventDefault(),this.element.click())}}componentDidLoad(){this.setupIntersectionObserver(),this.componentLoaded=!0}connectedCallback(){this.componentLoaded&&this.setupIntersectionObserver()}disconnectedCallback(){this.intersectionObserver?.disconnect(),this.imgEl?.removeEventListener("load",this.setImageAvailable),this.imgEl?.removeEventListener("error",this.setImageUnavailable)}watchSrcProp(){this.imageAvailable=void 0}setupIntersectionObserver(){"intersecting"===this.loading&&(this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange.bind(this),{threshold:0}),this.intersectionObserver.observe(this.element))}onVisibilityChange(a){this.inViewport=a.some((a=>a.isIntersecting))}render(){const a=!!this.src&&(this.imageAvailable||void 0===this.imageAvailable)&&("intersecting"!==this.loading||this.inViewport),i=!(a&&(this.loaded||this.loadingError)||!this.initials),t=!a&&!i&&!!this.icon,e=!a&&!i&&!t,n=!!this.badge&&"m"===this.size,d=this.interactive?"button":void 0,c=o("avatar","avatar--color-"+this.color,"avatar--size-"+this.size,"avatar--variant-"+this.variant,{"avatar--has-icon":t||e,"avatar--has-initials":i,"avatar--interactive":this.interactive}),v=o("avatar__badge","avatar__badge--position-"+this.badgePosition),h=o("avatar__tool","avatar__tool--position-"+this.toolPosition);return s(r,{key:"507321c143bd3a7bd96727522250a32a0bddfda9","aria-label":this.interactive?this.label:void 0,onKeydown:this.interactive?this.onKeydown:void 0,onKeyup:this.interactive?this.onKeyup:void 0,role:d,tabIndex:this.interactive?0:void 0},s("span",{key:"41c06e0e9a91b7012a898a19c7d2ff66b93a3584",class:c,part:"avatar"},a&&s("span",{key:"4026f68212a7026dfdb236bffacc210a7dfd7b30",class:"avatar__image"},s("img",{key:"4636819fb2a365ed239fe765a4efcb347186ca06",alt:"",height:l[this.size],loading:"intersecting"!==this.loading?this.loading:void 0,ref:this.onImageElementUpdate,src:this.src,width:l[this.size]})),i&&s("span",{key:"87a4741931e8a7057764618f4164df8c3286fa15",class:"avatar__initials"},s("span",{key:"ac5d4393d9bfaa22391e3414e0a02d3831c8c137"},this.initials)),t&&s("span",{key:"29690e49b2882761d26dd548bbdd59d3eb458d5d",class:"avatar__icon",innerHTML:this.icon}),e&&s("span",{key:"28cba2cb26c839a0f368bf7312039cfc36cd60ab",class:"avatar__icon"},s("swirl-icon-person",{key:"e76a5efbecc6a46608d7162a9aeebd7e7acfe8f9"})),n&&s("span",{key:"d88cc696f910bd1105811d0d07636f7ed686d11b",class:v,innerHTML:this.badge}),s("span",{key:"eeb86573ed228297fba743a2327aea481cf05e03",class:h},s("slot",{key:"121f539afb9e2ef8adac562c05c1f62fba280e87",name:"tool"}))),this.showLabel&&s("span",{key:"b73d9b0e724038fa345e081ec3761fcd964ea95f","aria-hidden":!0,class:"avatar__label"},this.label))}get element(){return this}static get watchers(){return{src:[{watchSrcProp:0}]}}static get style(){return':host{display:inline-flex;flex-shrink:0;align-items:center;flex-direction:column;--swirl-avatar-radius:50%;--swirl-avatar-size:2.5rem}:host *{box-sizing:border-box}:host([size="3xs"]){--swirl-avatar-size:1.25rem}:host([size="2xs"]){--swirl-avatar-size:1.5rem}:host([size="xs"]){--swirl-avatar-size:1.75rem}:host([size="s"]){--swirl-avatar-size:2rem}:host([size="l"]){--swirl-avatar-size:3rem}:host([size="xl"]){--swirl-avatar-size:4rem}:host([size="2xl"]){--swirl-avatar-size:9rem}:host([variant="square"][size="3xs"]),:host([variant="square"][size="2xs"]){--swirl-avatar-radius:0.25rem}:host([variant="square"][size="xs"]),:host([variant="square"][size="s"]){--swirl-avatar-radius:0.5rem}:host([variant="square"][size="m"]){--swirl-avatar-radius:0.625rem}:host([variant="square"][size="l"]){--swirl-avatar-radius:0.75rem}:host([variant="square"][size="xl"]){--swirl-avatar-radius:1rem}:host([variant="square"][size="2xl"]){--swirl-avatar-radius:1.25rem}.avatar{position:relative;display:inline-flex;width:var(--swirl-avatar-size);height:var(--swirl-avatar-size);justify-content:center;align-items:center;border-radius:var(--swirl-avatar-radius);border:var(--swirl-avatar-border-width, 0) solid var(--swirl-avatar-border-color, transparent)}.avatar--has-icon{color:var(--s-icon-default);background-color:var(--swirl-avatar-background-color)}.avatar--has-initials{padding-right:0;padding-left:0;color:#fff}.avatar--interactive{cursor:pointer}.avatar--interactive:focus:not(:focus-visible){outline:none}.avatar--interactive:focus-visible{outline-color:var(--s-focus-default)}.avatar--size-3xs .avatar__initials{font-size:0.625rem}.avatar--size-3xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-2xs .avatar__initials{font-size:0.625rem}.avatar--size-2xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-xs .avatar__initials{font-size:0.75rem}.avatar--size-xs.avatar--has-icon{padding-right:0.4375rem;padding-left:0.4375rem}.avatar--size-s .avatar__initials{font-size:0.75rem}.avatar--size-s.avatar--has-icon{padding-right:var(--s-space-8);padding-left:var(--s-space-8)}.avatar--size-m .avatar__initials{font-size:var(--s-font-size-base)}.avatar--size-m.avatar--has-icon{padding-right:0.625rem;padding-left:0.625rem}.avatar--size-l .avatar__initials{font-size:var(--s-font-size-lg)}.avatar--size-l.avatar--has-icon{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.avatar--size-xl .avatar__initials{font-size:var(--s-font-size-xl)}.avatar--size-xl.avatar--has-icon{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}.avatar--size-2xl .avatar__initials{font-size:3.375rem}.avatar--size-2xl.avatar--has-icon{padding-right:var(--s-space-32);padding-left:var(--s-space-32)}.avatar--size-2xl .avatar__tool{transform:translate3d(-25%, -25%, 0px)}.avatar--size-2xl .avatar__tool--position-top{transform:translate3d(-25%, 25%, 0px)}.avatar--color-banana .avatar__initials{color:var(--s-decorative-banana-text);background-color:var(--s-decorative-banana-surface-subdued)}.avatar--color-blueberry .avatar__initials{color:var(--s-decorative-blueberry-text);background-color:var(--s-decorative-blueberry-surface-subdued)}.avatar--color-chilli .avatar__initials{color:var(--s-decorative-chilli-text);background-color:var(--s-decorative-chilli-surface-subdued)}.avatar--color-grape .avatar__initials{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.avatar--color-kiwi .avatar__initials{color:var(--s-decorative-kiwi-text);background-color:var(--s-decorative-kiwi-surface-subdued)}.avatar--color-pumpkin .avatar__initials{color:var(--s-decorative-pumpkin-text);background-color:var(--s-decorative-pumpkin-surface-subdued)}.avatar--color-radish .avatar__initials{color:var(--s-decorative-radish-text);background-color:var(--s-decorative-radish-surface-subdued)}.avatar--color-neutral .avatar__initials{color:var(--s-text-subdued);background-color:var(--s-surface-neutral-subdued)}.avatar__image{overflow:hidden;width:100%;height:100%;border-radius:var(--swirl-avatar-radius)}.avatar__image>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.avatar__icon{display:inline-flex}.avatar__icon>*{width:100%;height:100%}.avatar__icon>*::part(icon){width:100%;height:100%}.avatar__initials{position:absolute;display:inline-flex;min-width:0;padding-right:0.0625rem;padding-left:0.0625rem;justify-content:center;align-items:center;border-radius:var(--swirl-avatar-radius);font-weight:var(--s-font-weight-medium);inset:0}.avatar__initials>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.avatar__badge{position:absolute;bottom:0;left:55%;display:inline-flex;min-width:1.5rem;height:1.5rem;transform:translate3d(0, 25%, 0)}.avatar__badge--position-top{top:0;bottom:auto;transform:translate3d(0, -25%, 0)}.avatar__label{margin-top:var(--s-space-4);color:var(--s-icon-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);text-align:center}.avatar__tool{position:absolute;right:0;bottom:0;display:inline-flex;transform:translate3d(25%, 25%, 0)}.avatar__tool--position-top{top:0;bottom:auto;transform:translate3d(25%, -25%, 0)}'}},[257,"swirl-avatar",{badge:[1],badgePosition:[1,"badge-position"],color:[1],icon:[1],initials:[1],interactive:[4],label:[1],loading:[1],showLabel:[4,"show-label"],size:[513],src:[1],toolPosition:[1,"tool-position"],variant:[513],loadingError:[32],loaded:[32],imageAvailable:[32],inViewport:[32]},void 0,{src:[{watchSrcProp:0}]}]),c=d,v=function(){"undefined"!=typeof customElements&&["swirl-avatar","swirl-icon-person"].forEach((a=>{switch(a){case"swirl-avatar":customElements.get(e(a))||customElements.define(e(a),d);break;case"swirl-icon-person":customElements.get(e(a))||n()}}))};export{c as SwirlAvatar,v as defineCustomElement}
1
+ import{proxyCustomElement as a,HTMLElement as i,createEvent as t,h as r,Host as s,transformTag as e}from"@stencil/core/internal/client";import{c as o}from"./index2.js";import{d as n}from"./swirl-icon-person2.js";const l={"3xs":20,"2xs":24,xs:28,s:32,m:40,l:48,xl:64,"2xl":144},d=a(class extends i{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.imageError=t(this,"imageError",7),this.imageLoad=t(this,"imageLoad",7),this.badgePosition="bottom",this.color="kiwi",this.interactive=!1,this.showLabel=!1,this.size="m",this.toolPosition="bottom",this.variant="round",this.loadingError=!1,this.loaded=!1,this.inViewport=!1,this.componentLoaded=!1,this.onImageElementUpdate=a=>{this.imgEl?.removeEventListener("load",this.setImageAvailable),this.imgEl?.removeEventListener("error",this.setImageUnavailable),this.imgEl=a,this.imgEl&&(this.imgEl.addEventListener("load",this.setImageAvailable),this.imgEl.addEventListener("error",this.setImageUnavailable))},this.setImageAvailable=()=>{this.imageAvailable=!0,this.loadingError=!1,this.loaded=!0,this.imageLoad.emit()},this.setImageUnavailable=()=>{this.imageAvailable=!1,this.loaded=!0,this.loadingError=!0,this.imageError.emit()},this.onKeydown=a=>{"Space"===a.code?a.preventDefault():"Enter"===a.code&&(a.preventDefault(),this.element.click())},this.onKeyup=a=>{"Space"===a.code&&(a.preventDefault(),this.element.click())}}componentDidLoad(){this.setupIntersectionObserver(),this.componentLoaded=!0}connectedCallback(){this.componentLoaded&&this.setupIntersectionObserver()}disconnectedCallback(){this.intersectionObserver?.disconnect(),this.imgEl?.removeEventListener("load",this.setImageAvailable),this.imgEl?.removeEventListener("error",this.setImageUnavailable)}watchSrcProp(){this.imageAvailable=void 0}setupIntersectionObserver(){"intersecting"===this.loading&&(this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange.bind(this),{threshold:0}),this.intersectionObserver.observe(this.element))}onVisibilityChange(a){this.inViewport=a.some((a=>a.isIntersecting))}render(){const a=!!this.src&&(this.imageAvailable||void 0===this.imageAvailable)&&("intersecting"!==this.loading||this.inViewport),i=!(a&&(this.loaded||this.loadingError)||!this.initials),t=!a&&!i&&!!this.icon,e=!a&&!i&&!t,n=!!this.badge&&"m"===this.size,d=this.interactive?"button":void 0,c=o("avatar","avatar--color-"+this.color,"avatar--size-"+this.size,"avatar--variant-"+this.variant,{"avatar--has-icon":t||e,"avatar--has-initials":i,"avatar--interactive":this.interactive}),v=o("avatar__badge","avatar__badge--position-"+this.badgePosition),h=o("avatar__tool","avatar__tool--position-"+this.toolPosition);return r(s,{key:"507321c143bd3a7bd96727522250a32a0bddfda9","aria-label":this.interactive?this.label:void 0,onKeydown:this.interactive?this.onKeydown:void 0,onKeyup:this.interactive?this.onKeyup:void 0,role:d,tabIndex:this.interactive?0:void 0},r("span",{key:"41c06e0e9a91b7012a898a19c7d2ff66b93a3584",class:c,part:"avatar"},a&&r("span",{key:"4026f68212a7026dfdb236bffacc210a7dfd7b30",class:"avatar__image"},r("img",{key:"0699557694dc623f53036b508311c1f4eba09203",alt:this.label,height:l[this.size],loading:"intersecting"!==this.loading?this.loading:void 0,ref:this.onImageElementUpdate,src:this.src,width:l[this.size]})),i&&r("span",{key:"b3472929371b253c5e595dd3e06249a2c93c54c2","aria-label":this.label,class:"avatar__initials",role:"img"},r("span",{key:"a5a799062a74c2f221016ade901faaf2cd486732"},this.initials)),t&&r("span",{key:"c07bdccd23723a9b8edf8f37d0c91d58cecf3509","aria-label":this.label,class:"avatar__icon",innerHTML:this.icon,role:"img"}),e&&r("span",{key:"a0c4320679482b1cedeed96e43624ed5b5f742c4","aria-label":this.label,class:"avatar__icon",role:"img"},r("swirl-icon-person",{key:"dcd0196bb0e0a22f998d327f7d96e74f0fc42222"})),n&&r("span",{key:"bf05b4f9203f2fc5c7b12be8ff6ab739ed62d6ed",class:v,innerHTML:this.badge}),r("span",{key:"6e410915db1a4e551498b756cd27c2055a9f154b",class:h},r("slot",{key:"3246af86e577fec79fa0775547947743510a127b",name:"tool"}))),this.showLabel&&r("span",{key:"06de3d3ee675f209fe1c25a679d58fd19425fd87","aria-hidden":!0,class:"avatar__label"},this.label))}get element(){return this}static get watchers(){return{src:[{watchSrcProp:0}]}}static get style(){return':host{display:inline-flex;flex-shrink:0;align-items:center;flex-direction:column;--swirl-avatar-radius:50%;--swirl-avatar-size:2.5rem}:host *{box-sizing:border-box}:host([size="3xs"]){--swirl-avatar-size:1.25rem}:host([size="2xs"]){--swirl-avatar-size:1.5rem}:host([size="xs"]){--swirl-avatar-size:1.75rem}:host([size="s"]){--swirl-avatar-size:2rem}:host([size="l"]){--swirl-avatar-size:3rem}:host([size="xl"]){--swirl-avatar-size:4rem}:host([size="2xl"]){--swirl-avatar-size:9rem}:host([variant="square"][size="3xs"]),:host([variant="square"][size="2xs"]){--swirl-avatar-radius:0.25rem}:host([variant="square"][size="xs"]),:host([variant="square"][size="s"]){--swirl-avatar-radius:0.5rem}:host([variant="square"][size="m"]){--swirl-avatar-radius:0.625rem}:host([variant="square"][size="l"]){--swirl-avatar-radius:0.75rem}:host([variant="square"][size="xl"]){--swirl-avatar-radius:1rem}:host([variant="square"][size="2xl"]){--swirl-avatar-radius:1.25rem}.avatar{position:relative;display:inline-flex;width:var(--swirl-avatar-size);height:var(--swirl-avatar-size);justify-content:center;align-items:center;border-radius:var(--swirl-avatar-radius);border:var(--swirl-avatar-border-width, 0) solid var(--swirl-avatar-border-color, transparent)}.avatar--has-icon{color:var(--s-icon-default);background-color:var(--swirl-avatar-background-color)}.avatar--has-initials{padding-right:0;padding-left:0;color:#fff}.avatar--interactive{cursor:pointer}.avatar--interactive:focus:not(:focus-visible){outline:none}.avatar--interactive:focus-visible{outline-color:var(--s-focus-default)}.avatar--size-3xs .avatar__initials{font-size:0.625rem}.avatar--size-3xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-2xs .avatar__initials{font-size:0.625rem}.avatar--size-2xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-xs .avatar__initials{font-size:0.75rem}.avatar--size-xs.avatar--has-icon{padding-right:0.4375rem;padding-left:0.4375rem}.avatar--size-s .avatar__initials{font-size:0.75rem}.avatar--size-s.avatar--has-icon{padding-right:var(--s-space-8);padding-left:var(--s-space-8)}.avatar--size-m .avatar__initials{font-size:var(--s-font-size-base)}.avatar--size-m.avatar--has-icon{padding-right:0.625rem;padding-left:0.625rem}.avatar--size-l .avatar__initials{font-size:var(--s-font-size-lg)}.avatar--size-l.avatar--has-icon{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.avatar--size-xl .avatar__initials{font-size:var(--s-font-size-xl)}.avatar--size-xl.avatar--has-icon{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}.avatar--size-2xl .avatar__initials{font-size:3.375rem}.avatar--size-2xl.avatar--has-icon{padding-right:var(--s-space-32);padding-left:var(--s-space-32)}.avatar--size-2xl .avatar__tool{transform:translate3d(-25%, -25%, 0px)}.avatar--size-2xl .avatar__tool--position-top{transform:translate3d(-25%, 25%, 0px)}.avatar--color-banana .avatar__initials{color:var(--s-decorative-banana-text);background-color:var(--s-decorative-banana-surface-subdued)}.avatar--color-blueberry .avatar__initials{color:var(--s-decorative-blueberry-text);background-color:var(--s-decorative-blueberry-surface-subdued)}.avatar--color-chilli .avatar__initials{color:var(--s-decorative-chilli-text);background-color:var(--s-decorative-chilli-surface-subdued)}.avatar--color-grape .avatar__initials{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.avatar--color-kiwi .avatar__initials{color:var(--s-decorative-kiwi-text);background-color:var(--s-decorative-kiwi-surface-subdued)}.avatar--color-pumpkin .avatar__initials{color:var(--s-decorative-pumpkin-text);background-color:var(--s-decorative-pumpkin-surface-subdued)}.avatar--color-radish .avatar__initials{color:var(--s-decorative-radish-text);background-color:var(--s-decorative-radish-surface-subdued)}.avatar--color-neutral .avatar__initials{color:var(--s-text-subdued);background-color:var(--s-surface-neutral-subdued)}.avatar__image{overflow:hidden;width:100%;height:100%;border-radius:var(--swirl-avatar-radius)}.avatar__image>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.avatar__icon{display:inline-flex}.avatar__icon>*{width:100%;height:100%}.avatar__icon>*::part(icon){width:100%;height:100%}.avatar__initials{position:absolute;display:inline-flex;min-width:0;padding-right:0.0625rem;padding-left:0.0625rem;justify-content:center;align-items:center;border-radius:var(--swirl-avatar-radius);font-weight:var(--s-font-weight-medium);inset:0}.avatar__initials>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.avatar__badge{position:absolute;bottom:0;left:55%;display:inline-flex;min-width:1.5rem;height:1.5rem;transform:translate3d(0, 25%, 0)}.avatar__badge--position-top{top:0;bottom:auto;transform:translate3d(0, -25%, 0)}.avatar__label{margin-top:var(--s-space-4);color:var(--s-icon-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);text-align:center}.avatar__tool{position:absolute;right:0;bottom:0;display:inline-flex;transform:translate3d(25%, 25%, 0)}.avatar__tool--position-top{top:0;bottom:auto;transform:translate3d(25%, -25%, 0)}'}},[257,"swirl-avatar",{badge:[1],badgePosition:[1,"badge-position"],color:[1],icon:[1],initials:[1],interactive:[4],label:[1],loading:[1],showLabel:[4,"show-label"],size:[513],src:[1],toolPosition:[1,"tool-position"],variant:[513],loadingError:[32],loaded:[32],imageAvailable:[32],inViewport:[32]},void 0,{src:[{watchSrcProp:0}]}]),c=d,v=function(){"undefined"!=typeof customElements&&["swirl-avatar","swirl-icon-person"].forEach((a=>{switch(a){case"swirl-avatar":customElements.get(e(a))||customElements.define(e(a),d);break;case"swirl-icon-person":customElements.get(e(a))||n()}}))};export{c as SwirlAvatar,v as defineCustomElement}
package/dist/components/swirl-button2.js CHANGED
@@ -1 +1 @@
1
- import{proxyCustomElement as t,HTMLElement as n,h as o,Host as i,transformTag as r}from"@stencil/core/internal/client";import{c as a}from"./index2.js";import{D as s}from"./media-query.service.js";const e=t(class extends n{constructor(t){super(),!1!==t&&this.__registerHost(),this.cursor="pointer",this.iconPosition="start",this.intent="default",this.size="m",this.textAlign="center",this.type="button",this.variant="ghost",this.mediaQueryUnsubscribe=()=>{}}componentDidLoad(){this.updateFormAttribute(),this.mediaQueryUnsubscribe=s.subscribe((t=>{this.isDesktop=t,this.forceIconProps()}))}componentDidRender(){this.updateFormAttribute(),this.forceIconProps()}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(){if(!Boolean(this.iconEl))return;const t=this.iconEl.children[0];(t?.tagName.startsWith("SWIRL-ICON")||t?.tagName.startsWith("SWIRL-EMOJI")||t?.tagName.startsWith("SWIRL-SYMBOL"))&&t?.setAttribute("size",this.isDesktop||"s"===this.size?"20":"24")}getAriaLabel(t){return Boolean(this.swirlAriaLabel)?this.swirlAriaLabel:t?this.label:void 0}updateFormAttribute(){Boolean(this.href)||!Boolean(this.form)?this.buttonEl?.removeAttribute("form"):this.buttonEl?.setAttribute("form",this.form)}render(){const t=this.hideLabel&&Boolean(this.icon)||"floating"===this.variant&&"default"===this.intent,n=Boolean(this.href),r=this.getAriaLabel(t),s=this.icon||Boolean(this.el.querySelector("[slot='icon']")),e=Boolean(this.el.querySelector("[slot='tag']")),b=Boolean(this.el.querySelector("[slot='trailing']")),l=a("button",`button--icon-position-${this.iconPosition}`,`button--intent-${this.intent}`,`button--size-${this.size}`,`button--text-align-${this.textAlign}`,`button--variant-${this.variant}`,{"button--elevated":this.elevated,"button--disabled":this.disabled,"button--has-icon":s,"button--icon-only":t,"button--pill":this.pill,"button--pressed":this.pressed});return o(i,{key:"e7602a78117c447e1c37a6951d79ceaade40e2c7",style:{pointerEvents:this.disabled?"none":""}},o(n?"a":"button",{key:"ab00f989857f767b2b75625e9df1064f9125a1a9","aria-controls":this.swirlAriaControls,"aria-current":this.swirlAriaCurrent,"aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled&&!n?"true":void 0,"aria-expanded":this.swirlAriaExpanded,"aria-haspopup":this.swirlAriaHaspopup,"aria-label":r,"aria-pressed":this.pressed?"true":void 0,class:l,disabled:n?void 0:this.disabled,download:n?void 0:this.download,form:n?void 0:this.form,href:this.href,name:n?void 0:this.name,ref:t=>this.buttonEl=t,target:n?this.target:void 0,type:n?void 0:this.type,value:n?void 0:this.value,style:{cursor:this.disabled||"pointer"===this.cursor?void 0:this.cursor,fontSize:this.inheritFontSize?"inherit":void 0,lineHeight:this.inheritFontSize?"inherit":void 0}},Boolean(this.icon)&&o("span",{key:"fd2334063e4ea5c7c21a17cbfc2ef347d0ad1049",class:"button__icon",innerHTML:this.icon,ref:t=>this.iconEl=t}),!Boolean(this.icon)&&o("span",{key:"105ec9131873da4ded162d97f12e0ef150fd31f4",class:"button__icon",ref:t=>this.iconEl=t},o("slot",{key:"8797f3878578430e2b10ba707e99db179c80b7e6",name:"icon"})),!t&&o("span",{key:"b47564712cf30122100e1cac186019c0d90cf0fb",class:"button__label"},this.label),e&&o("span",{key:"91a903f836ba8f32072798b5fe4f184960037a73",class:"button__tag"},o("slot",{key:"cad22304d1490c362da9d15c8bc55351de5c12d6",name:"tag"})),b&&o("div",{key:"352c11dd6d9332e950486b1e8ee6119e158cb893",class:"button__trailing-slot"},o("slot",{key:"7e6f28a9ea17106c2fc5b18bdfaf67dec3f41468",name:"trailing"}))))}get el(){return this}static get style(){return".sc-swirl-button-h{display:inline-block;max-width:100%;flex-shrink:0}.sc-swirl-button-h *.sc-swirl-button{box-sizing:border-box}.button.sc-swirl-button{display:inline-flex;width:100%;padding:var(--s-space-8) var(--s-space-16);justify-content:center;align-items:center;border:none;border-top-left-radius:var(--swirl-button-border-top-left-radius);border-top-right-radius:var(--swirl-button-border-top-right-radius);border-bottom-right-radius:var(--swirl-button-border-bottom-right-radius);border-bottom-left-radius:var(--swirl-button-border-bottom-left-radius);color:var(--s-text-subdued);background-color:var(--swirl-ghost-button-background-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);min-width:var(--s-line-height-lg);text-decoration:none;cursor:pointer;gap:var(--s-space-8);transition:box-shadow 0.3s}.button.sc-swirl-button:hover{background-color:var(--swirl-ghost-button-background-hovered);--swirl-tag-background-default:var(--s-state-pressed)}.button.sc-swirl-button:active{background-color:var(--swirl-ghost-button-background-pressed)}.button--elevated.sc-swirl-button{box-shadow:var(--s-shadow-level-2)}.button.sc-swirl-button:disabled,.button.button--disabled.sc-swirl-button{color:var(--s-text-disabled);cursor:default}.button.sc-swirl-button:disabled:where(:not(.button--variant-ghost)),.button.button--disabled.sc-swirl-button:where(:not(.button--variant-ghost)){background-color:var(--swirl-ghost-button-background-disabled)}.button.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-disabled)}.button.sc-swirl-button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button.sc-swirl-button{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);min-width:var(--s-line-height-sm);gap:var(--s-space-4)}}.button--text-align-start.sc-swirl-button{justify-content:flex-start}.button--text-align-center.sc-swirl-button{justify-content:center}.button--text-align-end.sc-swirl-button{justify-content:flex-end}.button--variant-ghost.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-ghost.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-ghost.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-highlight)}.button--variant-ghost.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-critical)}.button--variant-ghost.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-ghost.button--pressed.sc-swirl-button{color:var(--s-text-highlight)}.button--variant-ghost.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-ghost.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-flat.sc-swirl-button{color:var(--s-text-default);background-color:var(--swirl-flat-button-background-default);--swirl-tag-background-default:var(--s-state-pressed)}.button--variant-flat.sc-swirl-button:hover{background-color:var(--swirl-flat-button-background-hovered)}.button--variant-flat.sc-swirl-button:active{background-color:var(--swirl-flat-button-background-pressed)}.button--variant-flat.sc-swirl-button:disabled,.button--variant-flat.button--disabled.sc-swirl-button{background-color:var(--swirl-flat-button-background-disabled)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):hover{background-color:var(--s-action-primary-hovered)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):active{background-color:var(--s-action-primary-pressed)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-status);background-color:var(--s-action-critical-default)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):hover{background-color:var(--s-action-critical-hovered)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):active{background-color:var(--s-action-critical-pressed)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-on-status)}.button--variant-flat.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-flat.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-flat.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button{color:var(--s-text-subdued);outline:var(--s-border-width-default) solid var(--s-border-strong);outline-offset:calc(var(--s-border-width-default) * -1)}.button--variant-outline.sc-swirl-button:disabled,.button--variant-outline.button--disabled.sc-swirl-button{outline-color:var(--s-border-default)}.button--variant-outline.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-outline.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-outline.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-critical);outline-color:var(--s-border-critical)}.button--variant-outline.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-outline.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)),.button--variant-outline.button--pressed.sc-swirl-button{color:var(--s-text-highlight);outline-color:var(--s-border-highlight)}.button--variant-outline.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button,.button--variant-outline.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-outline.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-outline.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-default)}.button--variant-plain.sc-swirl-button{padding:0;border-radius:0;color:var(--swirl-plain-button-text-color-default);background-color:transparent}.button--variant-plain.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--swirl-plain-button-text-color-hovered);background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.button--variant-plain.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-hovered)}.button--variant-plain.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--swirl-plain-button-text-color-pressed);background-color:transparent}.button--variant-plain.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-pressed)}.button--variant-plain.sc-swirl-button:disabled,.button--variant-plain.button--disabled.sc-swirl-button{color:var(--swirl-plain-button-text-color-disabled);background-color:transparent}.button--variant-plain.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-plain.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-disabled)}.button--variant-plain.button--icon-only.sc-swirl-button{padding:0}.button--variant-plain.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-plain.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-plain.button--intent-primary.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--s-interactive-primary-pressed)}.button--variant-plain.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-interactive-primary-pressed)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled,.button--variant-plain.button--intent-primary.button--disabled.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-plain.button--intent-primary.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.sc-swirl-button .button__icon.sc-swirl-button{margin-left:0;color:var(--swirl-plain-button-text-color-default)}.button--variant-plain.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-plain.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-on-image.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.6)}.button--variant-on-image.sc-swirl-button:hover{background:rgba(0, 0, 0, 0.5)}.button--variant-on-image.sc-swirl-button:active{background:rgba(0, 0, 0, 0.4)}.button--variant-on-image.sc-swirl-button:disabled,.button--variant-on-image.button--disabled.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.3)}.button--variant-on-image.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-on-image.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-on-image.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-on-image.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-on-image.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.sc-swirl-button{color:var(--s-text-default);background-color:var(--s-surface-overlay-default)}.button--variant-floating.sc-swirl-button:not(.button--elevated){box-shadow:var(--s-shadow-level-1)}.button--variant-floating.sc-swirl-button:hover{color:var(--s-text-on-action-primary);background-color:var(--s-state-hovered)}.button--variant-floating.sc-swirl-button:active{color:var(--s-text-on-action-primary);background-color:var(--s-state-pressed)}.button--variant-floating.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20);border-radius:1.5rem;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-floating.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-hovered)}.button--variant-floating.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-pressed)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled,.button--variant-floating.button--intent-primary.button--disabled.sc-swirl-button{color:var(--s-text-on-action-primary)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-floating.button--intent-primary.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.button--intent-primary.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-translucent.sc-swirl-button{color:var(--s-text-default);outline:var(--s-border-width-default) solid var(--s-border-translucent-outline);outline-offset:calc(var(--s-border-width-default) * -1);background:var(--s-translucent-medium-default);box-shadow:var(--s-shadow-level-2);-webkit-backdrop-filter:blur(var(--s-blur-s));backdrop-filter:blur(var(--s-blur-s))}.button--variant-translucent.sc-swirl-button:hover{background:var(--s-translucent-medium-hovered)}.button--variant-translucent.sc-swirl-button:active{background:var(--s-translucent-medium-pressed)}.button--variant-translucent.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-translucent.sc-swirl-button:disabled,.button--variant-translucent.button--disabled.sc-swirl-button{color:var(--s-text-subdued);background:var(--s-translucent-medium-default)}.button--variant-translucent.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-translucent.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-default)}.button--variant-translucent.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-translucent.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--icon-position-end.sc-swirl-button .button__icon.sc-swirl-button{margin-right:calc(-1 * var(--s-space-4));margin-left:0;order:2}.button--pill.sc-swirl-button{border-radius:1.25rem}.button--pill.button--size-l.sc-swirl-button{border-radius:1.5rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.button--size-l.sc-swirl-button{border-radius:1.375rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.sc-swirl-button{border-radius:1.125rem}}.button--size-s.sc-swirl-button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);min-width:var(--s-line-height-sm);gap:var(--s-space-4);border-radius:var(--s-border-radius-sm)}.button--size-s.sc-swirl-button:not(.button--variant-plain),.button--size-s.button--variant-floating.button--intent-primary.sc-swirl-button{min-height:1.75rem;padding:var(--s-space-4) var(--s-space-8)}.button--size-s.button--pill.sc-swirl-button,.button--size-s.button--variant-floating.button--intent-primary.sc-swirl-button{border-radius:0.875rem}.button--size-s.sc-swirl-button .button__icon.sc-swirl-button{width:1.25rem;height:1.25rem}.button--size-s.button--icon-only.sc-swirl-button:not(.button--variant-plain),.button--size-s.button--variant-floating.button--intent-primary.button--icon-only.sc-swirl-button{min-width:1.75rem;padding:var(--s-space-4)}.button--icon-only.sc-swirl-button{padding:var(--s-space-8)}.button--icon-only.button--pill.sc-swirl-button{border-top-left-radius:var(--swirl-icon-button-border-top-left-radius);border-top-right-radius:var(--swirl-icon-button-border-top-right-radius);border-bottom-right-radius:var( --swirl-icon-button-border-bottom-right-radius );border-bottom-left-radius:var( --swirl-icon-button-border-bottom-left-radius )}.button--icon-only.sc-swirl-button .button__icon.sc-swirl-button{margin-right:0;margin-left:0}.button--has-icon.sc-swirl-button .button__icon.sc-swirl-button{display:inline-flex}.button__tag.sc-swirl-button{padding-left:var(--s-space-8);order:3}.button__trailing-slot.sc-swirl-button{order:4}.button__icon.sc-swirl-button{display:none;width:1.5rem;height:1.5rem;margin-left:calc(-1 * var(--s-space-4));color:var(--s-icon-default);order:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon.sc-swirl-button{width:1.25rem;height:1.25rem}}.button__label.sc-swirl-button{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis;order:1}"}},[262,"swirl-button",{cursor:[1],disabled:[4],download:[1],elevated:[4],form:[1],hideLabel:[4,"hide-label"],href:[1],icon:[1],iconPosition:[1,"icon-position"],intent:[1],inheritFontSize:[4,"inherit-font-size"],label:[1],name:[1],pill:[4],pressed:[4],size:[1],swirlAriaControls:[1,"swirl-aria-controls"],swirlAriaCurrent:[1,"swirl-aria-current"],swirlAriaDescribedby:[1,"swirl-aria-describedby"],swirlAriaExpanded:[1,"swirl-aria-expanded"],swirlAriaHaspopup:[1,"swirl-aria-haspopup"],swirlAriaLabel:[1,"swirl-aria-label"],target:[1],textAlign:[1,"text-align"],type:[1],value:[1],variant:[1]}]);function b(){"undefined"!=typeof customElements&&["swirl-button"].forEach((t=>{"swirl-button"===t&&(customElements.get(r(t))||customElements.define(r(t),e))}))}export{e as S,b as d}
1
+ import{proxyCustomElement as t,HTMLElement as n,h as o,Host as i,transformTag as r}from"@stencil/core/internal/client";import{c as a}from"./index2.js";import{D as s}from"./media-query.service.js";const e=t(class extends n{constructor(t){super(),!1!==t&&this.__registerHost(),this.cursor="pointer",this.iconPosition="start",this.intent="default",this.size="m",this.textAlign="center",this.type="button",this.variant="ghost",this.mediaQueryUnsubscribe=()=>{}}componentDidLoad(){this.updateFormAttribute(),this.mediaQueryUnsubscribe=s.subscribe((t=>{this.isDesktop=t,this.forceIconProps()}))}componentDidRender(){this.updateFormAttribute(),this.forceIconProps()}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(){if(!Boolean(this.iconEl))return;const t=this.iconEl.children[0];(t?.tagName.startsWith("SWIRL-ICON")||t?.tagName.startsWith("SWIRL-EMOJI")||t?.tagName.startsWith("SWIRL-SYMBOL"))&&t?.setAttribute("size",this.isDesktop||"s"===this.size?"20":"24")}getAriaLabel(t){return Boolean(this.swirlAriaLabel)?this.swirlAriaLabel:t?this.label:void 0}updateFormAttribute(){Boolean(this.href)||!Boolean(this.form)?this.buttonEl?.removeAttribute("form"):this.buttonEl?.setAttribute("form",this.form)}render(){const t=Boolean(this.icon)||Boolean(this.el.querySelector("[slot='icon']")),n=this.hideLabel&&t||"floating"===this.variant&&"default"===this.intent,r=Boolean(this.href),s=this.getAriaLabel(n),e=Boolean(this.el.querySelector("[slot='tag']")),b=Boolean(this.el.querySelector("[slot='trailing']")),l=a("button",`button--icon-position-${this.iconPosition}`,`button--intent-${this.intent}`,`button--size-${this.size}`,`button--text-align-${this.textAlign}`,`button--variant-${this.variant}`,{"button--elevated":this.elevated,"button--disabled":this.disabled,"button--has-icon":t,"button--icon-only":n,"button--pill":this.pill,"button--pressed":this.pressed});return o(i,{key:"39431a264dbc13b90dd7861927bf56ee030faaa8",style:{pointerEvents:this.disabled?"none":""}},o(r?"a":"button",{key:"b7ddae041810657c2f8eae75c22e1241a97e25f3","aria-controls":this.swirlAriaControls,"aria-current":this.swirlAriaCurrent,"aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled&&!r?"true":void 0,"aria-expanded":this.swirlAriaExpanded,"aria-haspopup":this.swirlAriaHaspopup,"aria-label":s,"aria-pressed":this.pressed?"true":void 0,class:l,disabled:r?void 0:this.disabled,download:r?void 0:this.download,form:r?void 0:this.form,href:this.href,name:r?void 0:this.name,ref:t=>this.buttonEl=t,target:r?this.target:void 0,type:r?void 0:this.type,value:r?void 0:this.value,style:{cursor:this.disabled||"pointer"===this.cursor?void 0:this.cursor,fontSize:this.inheritFontSize?"inherit":void 0,lineHeight:this.inheritFontSize?"inherit":void 0}},Boolean(this.icon)&&o("span",{key:"58ad9ec67fd692d1bbd4d877f6820faeec548a59",class:"button__icon",innerHTML:this.icon,ref:t=>this.iconEl=t}),!Boolean(this.icon)&&o("span",{key:"89b0f33c96234cca0dbca8caf9c2e13edf330067",class:"button__icon",ref:t=>this.iconEl=t},o("slot",{key:"8fe33f30f6424c19d7f3322e77794ab409432d27",name:"icon"})),!n&&o("span",{key:"11f2397daaced6b03f241db1cda3a5b2786b5ae5",class:"button__label"},this.label),e&&o("span",{key:"67703c9b0d1d51f5bdefb185959354ed1741577e",class:"button__tag"},o("slot",{key:"c947a911fcd57072f283fcfa03d5002b6d8f5992",name:"tag"})),b&&o("div",{key:"c419181f3f91737ff6f10cec5f0774d87a6c1e9e",class:"button__trailing-slot"},o("slot",{key:"24a5177b877256fd1eef407855fe6d5558ec10d1",name:"trailing"}))))}get el(){return this}static get style(){return".sc-swirl-button-h{display:inline-block;max-width:100%;flex-shrink:0}.sc-swirl-button-h *.sc-swirl-button{box-sizing:border-box}.button.sc-swirl-button{display:inline-flex;width:100%;padding:var(--s-space-8) var(--s-space-16);justify-content:center;align-items:center;border:none;border-top-left-radius:var(--swirl-button-border-top-left-radius);border-top-right-radius:var(--swirl-button-border-top-right-radius);border-bottom-right-radius:var(--swirl-button-border-bottom-right-radius);border-bottom-left-radius:var(--swirl-button-border-bottom-left-radius);color:var(--s-text-subdued);background-color:var(--swirl-ghost-button-background-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);min-width:var(--s-line-height-lg);text-decoration:none;cursor:pointer;gap:var(--s-space-8);transition:box-shadow 0.3s}.button.sc-swirl-button:hover{background-color:var(--swirl-ghost-button-background-hovered);--swirl-tag-background-default:var(--s-state-pressed)}.button.sc-swirl-button:active{background-color:var(--swirl-ghost-button-background-pressed)}.button--elevated.sc-swirl-button{box-shadow:var(--s-shadow-level-2)}.button.sc-swirl-button:disabled,.button.button--disabled.sc-swirl-button{color:var(--s-text-disabled);cursor:default}.button.sc-swirl-button:disabled:where(:not(.button--variant-ghost)),.button.button--disabled.sc-swirl-button:where(:not(.button--variant-ghost)){background-color:var(--swirl-ghost-button-background-disabled)}.button.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-disabled)}.button.sc-swirl-button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button.sc-swirl-button{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);min-width:var(--s-line-height-sm);gap:var(--s-space-4)}}.button--text-align-start.sc-swirl-button{justify-content:flex-start}.button--text-align-center.sc-swirl-button{justify-content:center}.button--text-align-end.sc-swirl-button{justify-content:flex-end}.button--variant-ghost.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-ghost.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-ghost.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-highlight)}.button--variant-ghost.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-critical)}.button--variant-ghost.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-ghost.button--pressed.sc-swirl-button{color:var(--s-text-highlight)}.button--variant-ghost.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-ghost.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-flat.sc-swirl-button{color:var(--s-text-default);background-color:var(--swirl-flat-button-background-default);--swirl-tag-background-default:var(--s-state-pressed)}.button--variant-flat.sc-swirl-button:hover{background-color:var(--swirl-flat-button-background-hovered)}.button--variant-flat.sc-swirl-button:active{background-color:var(--swirl-flat-button-background-pressed)}.button--variant-flat.sc-swirl-button:disabled,.button--variant-flat.button--disabled.sc-swirl-button{background-color:var(--swirl-flat-button-background-disabled)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):hover{background-color:var(--s-action-primary-hovered)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):active{background-color:var(--s-action-primary-pressed)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-status);background-color:var(--s-action-critical-default)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):hover{background-color:var(--s-action-critical-hovered)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):active{background-color:var(--s-action-critical-pressed)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-on-status)}.button--variant-flat.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-flat.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-flat.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button{color:var(--s-text-subdued);outline:var(--s-border-width-default) solid var(--s-border-strong);outline-offset:calc(var(--s-border-width-default) * -1)}.button--variant-outline.sc-swirl-button:disabled,.button--variant-outline.button--disabled.sc-swirl-button{outline-color:var(--s-border-default)}.button--variant-outline.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-outline.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-outline.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-critical);outline-color:var(--s-border-critical)}.button--variant-outline.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-outline.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)),.button--variant-outline.button--pressed.sc-swirl-button{color:var(--s-text-highlight);outline-color:var(--s-border-highlight)}.button--variant-outline.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button,.button--variant-outline.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-outline.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-outline.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-default)}.button--variant-plain.sc-swirl-button{padding:0;border-radius:0;color:var(--swirl-plain-button-text-color-default);background-color:transparent}.button--variant-plain.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--swirl-plain-button-text-color-hovered);background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.button--variant-plain.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-hovered)}.button--variant-plain.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--swirl-plain-button-text-color-pressed);background-color:transparent}.button--variant-plain.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-pressed)}.button--variant-plain.sc-swirl-button:disabled,.button--variant-plain.button--disabled.sc-swirl-button{color:var(--swirl-plain-button-text-color-disabled);background-color:transparent}.button--variant-plain.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-plain.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-disabled)}.button--variant-plain.button--icon-only.sc-swirl-button{padding:0}.button--variant-plain.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-plain.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-plain.button--intent-primary.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--s-interactive-primary-pressed)}.button--variant-plain.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-interactive-primary-pressed)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled,.button--variant-plain.button--intent-primary.button--disabled.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-plain.button--intent-primary.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.sc-swirl-button .button__icon.sc-swirl-button{margin-left:0;color:var(--swirl-plain-button-text-color-default)}.button--variant-plain.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-plain.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-on-image.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.6)}.button--variant-on-image.sc-swirl-button:hover{background:rgba(0, 0, 0, 0.5)}.button--variant-on-image.sc-swirl-button:active{background:rgba(0, 0, 0, 0.4)}.button--variant-on-image.sc-swirl-button:disabled,.button--variant-on-image.button--disabled.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.3)}.button--variant-on-image.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-on-image.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-on-image.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-on-image.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-on-image.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.sc-swirl-button{color:var(--s-text-default);background-color:var(--s-surface-overlay-default)}.button--variant-floating.sc-swirl-button:not(.button--elevated){box-shadow:var(--s-shadow-level-1)}.button--variant-floating.sc-swirl-button:hover{color:var(--s-text-on-action-primary);background-color:var(--s-state-hovered)}.button--variant-floating.sc-swirl-button:active{color:var(--s-text-on-action-primary);background-color:var(--s-state-pressed)}.button--variant-floating.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20);border-radius:1.5rem;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-floating.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-hovered)}.button--variant-floating.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-pressed)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled,.button--variant-floating.button--intent-primary.button--disabled.sc-swirl-button{color:var(--s-text-on-action-primary)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-floating.button--intent-primary.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.button--intent-primary.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-translucent.sc-swirl-button{color:var(--s-text-default);outline:var(--s-border-width-default) solid var(--s-border-translucent-outline);outline-offset:calc(var(--s-border-width-default) * -1);background:var(--s-translucent-medium-default);box-shadow:var(--s-shadow-level-2);-webkit-backdrop-filter:blur(var(--s-blur-s));backdrop-filter:blur(var(--s-blur-s))}.button--variant-translucent.sc-swirl-button:hover{background:var(--s-translucent-medium-hovered)}.button--variant-translucent.sc-swirl-button:active{background:var(--s-translucent-medium-pressed)}.button--variant-translucent.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-translucent.sc-swirl-button:disabled,.button--variant-translucent.button--disabled.sc-swirl-button{color:var(--s-text-subdued);background:var(--s-translucent-medium-default)}.button--variant-translucent.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-translucent.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-default)}.button--variant-translucent.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-translucent.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--icon-position-end.sc-swirl-button .button__icon.sc-swirl-button{margin-right:calc(-1 * var(--s-space-4));margin-left:0;order:2}.button--pill.sc-swirl-button{border-radius:1.25rem}.button--pill.button--size-l.sc-swirl-button{border-radius:1.5rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.button--size-l.sc-swirl-button{border-radius:1.375rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.sc-swirl-button{border-radius:1.125rem}}.button--size-s.sc-swirl-button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);min-width:var(--s-line-height-sm);gap:var(--s-space-4);border-radius:var(--s-border-radius-sm)}.button--size-s.sc-swirl-button:not(.button--variant-plain),.button--size-s.button--variant-floating.button--intent-primary.sc-swirl-button{min-height:1.75rem;padding:var(--s-space-4) var(--s-space-8)}.button--size-s.button--pill.sc-swirl-button,.button--size-s.button--variant-floating.button--intent-primary.sc-swirl-button{border-radius:0.875rem}.button--size-s.sc-swirl-button .button__icon.sc-swirl-button{width:1.25rem;height:1.25rem}.button--size-s.button--icon-only.sc-swirl-button:not(.button--variant-plain),.button--size-s.button--variant-floating.button--intent-primary.button--icon-only.sc-swirl-button{min-width:1.75rem;padding:var(--s-space-4)}.button--icon-only.sc-swirl-button{padding:var(--s-space-8)}.button--icon-only.button--pill.sc-swirl-button{border-top-left-radius:var(--swirl-icon-button-border-top-left-radius);border-top-right-radius:var(--swirl-icon-button-border-top-right-radius);border-bottom-right-radius:var( --swirl-icon-button-border-bottom-right-radius );border-bottom-left-radius:var( --swirl-icon-button-border-bottom-left-radius )}.button--icon-only.sc-swirl-button .button__icon.sc-swirl-button{margin-right:0;margin-left:0}.button--has-icon.sc-swirl-button .button__icon.sc-swirl-button{display:inline-flex}.button__tag.sc-swirl-button{padding-left:var(--s-space-8);order:3}.button__trailing-slot.sc-swirl-button{order:4}.button__icon.sc-swirl-button{display:none;width:1.5rem;height:1.5rem;margin-left:calc(-1 * var(--s-space-4));color:var(--s-icon-default);order:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon.sc-swirl-button{width:1.25rem;height:1.25rem}}.button__label.sc-swirl-button{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis;order:1}"}},[262,"swirl-button",{cursor:[1],disabled:[4],download:[1],elevated:[4],form:[1],hideLabel:[4,"hide-label"],href:[1],icon:[1],iconPosition:[1,"icon-position"],intent:[1],inheritFontSize:[4,"inherit-font-size"],label:[1],name:[1],pill:[4],pressed:[4],size:[1],swirlAriaControls:[1,"swirl-aria-controls"],swirlAriaCurrent:[1,"swirl-aria-current"],swirlAriaDescribedby:[1,"swirl-aria-describedby"],swirlAriaExpanded:[1,"swirl-aria-expanded"],swirlAriaHaspopup:[1,"swirl-aria-haspopup"],swirlAriaLabel:[1,"swirl-aria-label"],target:[1],textAlign:[1,"text-align"],type:[1],value:[1],variant:[1]}]);function b(){"undefined"!=typeof customElements&&["swirl-button"].forEach((t=>{"swirl-button"===t&&(customElements.get(r(t))||customElements.define(r(t),e))}))}export{e as S,b as d}
package/dist/components/swirl-toast2.js CHANGED
@@ -1 +1 @@
1
- import{proxyCustomElement as t,HTMLElement as s,createEvent as i,h as a,Host as e,transformTag as o}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{D as r}from"./media-query.service.js";import{d as c}from"./swirl-button2.js";import{d as l}from"./swirl-icon-close2.js";const d=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.action=i(this,"action",7),this.dismiss=i(this,"dismiss",7),this.accessibleDismissLabel="Dismiss",this.actionPosition="inline",this.intent="default",this.mediaQueryUnsubscribe=()=>{},this.onAction=()=>{this.action.emit(this.toastId)},this.onDismiss=()=>{this.clearTimer(),this.dismiss.emit(this.toastId)}}watchDuration(){this.startTimer()}componentDidLoad(){this.startTimer(),this.mediaQueryUnsubscribe=r.subscribe((t=>{this.forceIconProps(t)}))}disconnectedCallback(){this.clearTimer(),this.mediaQueryUnsubscribe()}forceIconProps(t){const s=this.iconEl?.children[0],i=this.dismissIconEl;s?.setAttribute("size",t?"20":"24"),i?.setAttribute("size",t?"20":"24")}startTimer(){this.clearTimer(),void 0!==this.duration&&this.duration!==1/0&&(this.timeout=setTimeout((()=>{this.dismiss.emit(this.toastId)}),this.duration))}clearTimer(){Boolean(this.timeout)&&(clearTimeout(this.timeout),this.timeout=void 0)}render(){const t=n("toast",`toast--intent-${this.intent}`,`toast--action-position-${this.actionPosition}`);return a(e,{key:"f263cbe9a8e349d88043fb0d0324e074e4419f0d"},a("div",{key:"5f43b16eb1a1e75e8b7e4fe6b4376965d636924d",class:t},this.icon&&a("span",{key:"adf6249bfd7605b15740e6db5ecf4141df68d614",class:"toast__icon",innerHTML:this.icon,part:"toast__icon",ref:t=>this.iconEl=t}),a("span",{key:"aad0cd3c9b764eb3e05cc5bb9341857aad7a70d2",class:"toast__content-container"},a("span",{key:"82f1b9eab0e381248cbaca4d2b5afbbcb4f30184",class:"toast__content",innerHTML:this.content,part:"toast__content"},a("slot",{key:"0cd204c4d4eab757ad6bc067ba5e356bcaeb9fd2"})),this.actionLabel&&a("swirl-button",{key:"bafaa29ab97d29c6cf41b5d01028c96c1821887b",class:"toast__action-button",label:this.actionLabel,onClick:this.onAction,variant:"plain"})),a("button",{key:"b52db302c2841959fbe68eb938cf10fe59c08103","aria-label":this.dismissLabel||this.accessibleDismissLabel,class:"toast__dismiss-button",onClick:this.onDismiss,type:"button"},this.dismissLabel,!Boolean(this.dismissLabel)&&a("swirl-icon-close",{key:"48379c17bd2ea4b0f183b003b3d0c5e86a8300f4",ref:t=>this.dismissIconEl=t}))))}static get watchers(){return{duration:[{watchDuration:0}]}}static get style(){return":host{display:flex}:host *{box-sizing:border-box}.toast{display:flex;width:100%;max-width:28rem;padding:var(--s-space-16);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);box-shadow:var(--s-shadow-level-2)}.toast--intent-critical{background-color:var(--s-surface-critical-default)}.toast--intent-success{background-color:var(--s-surface-success-default)}.toast--action-position-bottom .toast__content-container{flex-direction:column}.toast--action-position-bottom .toast__action-button{margin-top:var(--s-space-8);margin-left:0;align-self:flex-start}.toast__icon{display:inline-flex;width:1.5rem;height:1.5rem;margin-right:0.625rem;flex-shrink:0}.toast__icon ::part(icon){color:var(--s-icon-on-status)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__icon{width:1.25rem;height:1.25rem}}.toast__content-container{display:flex;flex-grow:1;min-width:0}.toast__content{flex-basis:min-content;flex-grow:1;line-height:var(--s-line-height-base);text-align:left;align-self:flex-start}.toast__content ::part(link){color:var(--text-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.toast__action-button{--swirl-plain-button-text-color-default:var(--s-text-on-status);--swirl-plain-button-text-color-hovered:var(--s-text-on-status);--swirl-plain-button-text-color-pressed:var(--s-text-on-status);margin-left:var(--s-space-16);min-width:0;flex-shrink:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__action-button{margin-top:-1px}}.toast__dismiss-button{display:inline-flex;min-width:1.5rem;height:1.5rem;margin-left:var(--s-space-16);padding:0;flex-shrink:0;justify-content:center;align-items:center;border:none;color:var(--s-text-on-status);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);cursor:pointer}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__dismiss-button{margin-top:calc(-1 * var(--s-space-2))}}.toast__dismiss-button ::part(icon){color:var(--s-icon-on-status)}"}},[257,"swirl-toast",{accessibleDismissLabel:[1,"accessible-dismiss-label"],actionLabel:[1,"action-label"],actionPosition:[1,"action-position"],content:[1],dismissLabel:[1,"dismiss-label"],duration:[2],icon:[1],intent:[1],toastId:[1,"toast-id"]},void 0,{duration:[{watchDuration:0}]}]);function h(){"undefined"!=typeof customElements&&["swirl-toast","swirl-button","swirl-icon-close"].forEach((t=>{switch(t){case"swirl-toast":customElements.get(o(t))||customElements.define(o(t),d);break;case"swirl-button":customElements.get(o(t))||c();break;case"swirl-icon-close":customElements.get(o(t))||l()}}))}export{d as S,h as d}
1
+ import{proxyCustomElement as t,HTMLElement as s,createEvent as i,h as e,Host as a,transformTag as o}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{D as r}from"./media-query.service.js";import{d as c}from"./swirl-button2.js";import{d as l}from"./swirl-icon-close2.js";const h=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.action=i(this,"action",7),this.dismiss=i(this,"dismiss",7),this.accessibleDismissLabel="Dismiss",this.actionPosition="inline",this.intent="default",this.loaded=!1,this.mediaQueryUnsubscribe=()=>{},this.onAction=()=>{this.action.emit(this.toastId)},this.onDismiss=()=>{this.clearTimer(),this.dismiss.emit(this.toastId)}}watchDuration(){this.startTimer()}connectedCallback(){this.loaded&&(this.scheduleDismiss(),this.subscribeToMediaQuery())}componentDidLoad(){this.loaded=!0,this.startTimer(),this.subscribeToMediaQuery()}disconnectedCallback(){this.cancelScheduledDismiss(),this.mediaQueryUnsubscribe()}subscribeToMediaQuery(){this.mediaQueryUnsubscribe(),this.mediaQueryUnsubscribe=r.subscribe((t=>{this.forceIconProps(t)}))}forceIconProps(t){const s=this.iconEl?.children[0],i=this.dismissIconEl;s?.setAttribute("size",t?"20":"24"),i?.setAttribute("size",t?"20":"24")}startTimer(){this.clearTimer(),void 0!==this.duration&&this.duration!==1/0&&(this.dismissAt=Date.now()+this.duration,this.scheduleDismiss())}scheduleDismiss(){void 0!==this.dismissAt&&(this.cancelScheduledDismiss(),this.timeout=setTimeout((()=>{this.clearTimer(),this.dismiss.emit(this.toastId)}),Math.max(0,this.dismissAt-Date.now())))}cancelScheduledDismiss(){Boolean(this.timeout)&&(clearTimeout(this.timeout),this.timeout=void 0)}clearTimer(){this.cancelScheduledDismiss(),this.dismissAt=void 0}render(){const t=n("toast",`toast--intent-${this.intent}`,`toast--action-position-${this.actionPosition}`);return e(a,{key:"236d1921fc495438af83821a3e84d460ac5838d7"},e("div",{key:"5baabef2daf9411797548efc84b48ce124e3be71",class:t},this.icon&&e("span",{key:"91293a10a4ca9c1b4cd44d20ff59a15864569d00",class:"toast__icon",innerHTML:this.icon,part:"toast__icon",ref:t=>this.iconEl=t}),e("span",{key:"b1f55e219c324f31ac5adfef6fd01c0752a883a9",class:"toast__content-container"},e("span",{key:"007ad76a5e78dc93ae72ae5ef20673bb3e00a1af",class:"toast__content",innerHTML:this.content,part:"toast__content"},e("slot",{key:"25bc9837c8d25fccf874b1d1664a56921588024d"})),this.actionLabel&&e("swirl-button",{key:"7ea51c33fdeba411204364f4d00f9f18e9de3fed",class:"toast__action-button",label:this.actionLabel,onClick:this.onAction,variant:"plain"})),e("button",{key:"7c05d917a8778519b92acbbf44d1a64e2f251d85","aria-label":this.dismissLabel||this.accessibleDismissLabel,class:"toast__dismiss-button",onClick:this.onDismiss,type:"button"},this.dismissLabel,!Boolean(this.dismissLabel)&&e("swirl-icon-close",{key:"6e70406ba4e7decb6739d0ccf77023cc23710e2e",ref:t=>this.dismissIconEl=t}))))}static get watchers(){return{duration:[{watchDuration:0}]}}static get style(){return":host{display:flex}:host *{box-sizing:border-box}.toast{display:flex;width:100%;max-width:28rem;padding:var(--s-space-16);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);box-shadow:var(--s-shadow-level-2)}.toast--intent-critical{background-color:var(--s-surface-critical-default)}.toast--intent-success{background-color:var(--s-surface-success-default)}.toast--action-position-bottom .toast__content-container{flex-direction:column}.toast--action-position-bottom .toast__action-button{margin-top:var(--s-space-8);margin-left:0;align-self:flex-start}.toast__icon{display:inline-flex;width:1.5rem;height:1.5rem;margin-right:0.625rem;flex-shrink:0}.toast__icon ::part(icon){color:var(--s-icon-on-status)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__icon{width:1.25rem;height:1.25rem}}.toast__content-container{display:flex;flex-grow:1;min-width:0}.toast__content{flex-basis:min-content;flex-grow:1;line-height:var(--s-line-height-base);text-align:left;align-self:flex-start}.toast__content ::part(link){color:var(--text-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.toast__action-button{--swirl-plain-button-text-color-default:var(--s-text-on-status);--swirl-plain-button-text-color-hovered:var(--s-text-on-status);--swirl-plain-button-text-color-pressed:var(--s-text-on-status);margin-left:var(--s-space-16);min-width:0;flex-shrink:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__action-button{margin-top:-1px}}.toast__dismiss-button{display:inline-flex;min-width:1.5rem;height:1.5rem;margin-left:var(--s-space-16);padding:0;flex-shrink:0;justify-content:center;align-items:center;border:none;color:var(--s-text-on-status);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);cursor:pointer}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__dismiss-button{margin-top:calc(-1 * var(--s-space-2))}}.toast__dismiss-button ::part(icon){color:var(--s-icon-on-status)}"}},[257,"swirl-toast",{accessibleDismissLabel:[1,"accessible-dismiss-label"],actionLabel:[1,"action-label"],actionPosition:[1,"action-position"],content:[1],dismissLabel:[1,"dismiss-label"],duration:[2],icon:[1],intent:[1],toastId:[1,"toast-id"]},void 0,{duration:[{watchDuration:0}]}]);function d(){"undefined"!=typeof customElements&&["swirl-toast","swirl-button","swirl-icon-close"].forEach((t=>{switch(t){case"swirl-toast":customElements.get(o(t))||customElements.define(o(t),h);break;case"swirl-button":customElements.get(o(t))||c();break;case"swirl-icon-close":customElements.get(o(t))||l()}}))}export{h as S,d}
package/dist/esm/swirl-avatar.entry.js CHANGED
@@ -116,7 +116,7 @@ const SwirlAvatar = class {
116
116
  });
117
117
  const badgeClassName = classnames("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
118
118
  const toolClassName = classnames("avatar__tool", `avatar__tool--position-${this.toolPosition}`);
119
- return (h(Host, { key: '507321c143bd3a7bd96727522250a32a0bddfda9', "aria-label": this.interactive ? this.label : undefined, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { key: '41c06e0e9a91b7012a898a19c7d2ff66b93a3584', class: className, part: "avatar" }, showImage && (h("span", { key: '4026f68212a7026dfdb236bffacc210a7dfd7b30', class: "avatar__image" }, h("img", { key: '4636819fb2a365ed239fe765a4efcb347186ca06', alt: "", height: swirlAvatarSizeMappings[this.size], loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (h("span", { key: '87a4741931e8a7057764618f4164df8c3286fa15', class: "avatar__initials" }, h("span", { key: 'ac5d4393d9bfaa22391e3414e0a02d3831c8c137' }, this.initials))), showIcon && h("span", { key: '29690e49b2882761d26dd548bbdd59d3eb458d5d', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { key: '28cba2cb26c839a0f368bf7312039cfc36cd60ab', class: "avatar__icon" }, h("swirl-icon-person", { key: 'e76a5efbecc6a46608d7162a9aeebd7e7acfe8f9' }))), showBadge && (h("span", { key: 'd88cc696f910bd1105811d0d07636f7ed686d11b', class: badgeClassName, innerHTML: this.badge })), h("span", { key: 'eeb86573ed228297fba743a2327aea481cf05e03', class: toolClassName }, h("slot", { key: '121f539afb9e2ef8adac562c05c1f62fba280e87', name: "tool" }))), this.showLabel && (h("span", { key: 'b73d9b0e724038fa345e081ec3761fcd964ea95f', "aria-hidden": true, class: "avatar__label" }, this.label))));
119
+ return (h(Host, { key: '507321c143bd3a7bd96727522250a32a0bddfda9', "aria-label": this.interactive ? this.label : undefined, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { key: '41c06e0e9a91b7012a898a19c7d2ff66b93a3584', class: className, part: "avatar" }, showImage && (h("span", { key: '4026f68212a7026dfdb236bffacc210a7dfd7b30', class: "avatar__image" }, h("img", { key: '0699557694dc623f53036b508311c1f4eba09203', alt: this.label, height: swirlAvatarSizeMappings[this.size], loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (h("span", { key: 'b3472929371b253c5e595dd3e06249a2c93c54c2', "aria-label": this.label, class: "avatar__initials", role: "img" }, h("span", { key: 'a5a799062a74c2f221016ade901faaf2cd486732' }, this.initials))), showIcon && (h("span", { key: 'c07bdccd23723a9b8edf8f37d0c91d58cecf3509', "aria-label": this.label, class: "avatar__icon", innerHTML: this.icon, role: "img" })), showFallbackIcon && (h("span", { key: 'a0c4320679482b1cedeed96e43624ed5b5f742c4', "aria-label": this.label, class: "avatar__icon", role: "img" }, h("swirl-icon-person", { key: 'dcd0196bb0e0a22f998d327f7d96e74f0fc42222' }))), showBadge && (h("span", { key: 'bf05b4f9203f2fc5c7b12be8ff6ab739ed62d6ed', class: badgeClassName, innerHTML: this.badge })), h("span", { key: '6e410915db1a4e551498b756cd27c2055a9f154b', class: toolClassName }, h("slot", { key: '3246af86e577fec79fa0775547947743510a127b', name: "tool" }))), this.showLabel && (h("span", { key: '06de3d3ee675f209fe1c25a679d58fd19425fd87', "aria-hidden": true, class: "avatar__label" }, this.label))));
120
120
  }
121
121
  get element() { return getElement(this); }
122
122
  static get watchers() { return {
package/dist/esm/swirl-button.entry.js CHANGED
@@ -63,11 +63,11 @@ const SwirlButton = class {
63
63
  }
64
64
  }
65
65
  render() {
66
- const hideLabel = (this.hideLabel && Boolean(this.icon)) ||
66
+ const hasIcon = Boolean(this.icon) || Boolean(this.el.querySelector("[slot='icon']"));
67
+ const hideLabel = (this.hideLabel && hasIcon) ||
67
68
  (this.variant === "floating" && this.intent === "default");
68
69
  const isLink = Boolean(this.href);
69
70
  const ariaLabel = this.getAriaLabel(hideLabel);
70
- const hasIcon = this.icon || Boolean(this.el.querySelector("[slot='icon']"));
71
71
  const hasTag = Boolean(this.el.querySelector("[slot='tag']"));
72
72
  const hasTrailingSlot = Boolean(this.el.querySelector("[slot='trailing']"));
73
73
  const className = classnames("button", `button--icon-position-${this.iconPosition}`, `button--intent-${this.intent}`, `button--size-${this.size}`, `button--text-align-${this.textAlign}`, `button--variant-${this.variant}`, {
@@ -79,13 +79,13 @@ const SwirlButton = class {
79
79
  "button--pressed": this.pressed,
80
80
  });
81
81
  const Tag = isLink ? "a" : "button";
82
- return (h(Host, { key: 'e7602a78117c447e1c37a6951d79ceaade40e2c7', style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { key: 'ab00f989857f767b2b75625e9df1064f9125a1a9', "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, "aria-pressed": this.pressed ? "true" : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value, style: {
82
+ return (h(Host, { key: '39431a264dbc13b90dd7861927bf56ee030faaa8', style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { key: 'b7ddae041810657c2f8eae75c22e1241a97e25f3', "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, "aria-pressed": this.pressed ? "true" : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value, style: {
83
83
  cursor: !this.disabled && this.cursor !== "pointer"
84
84
  ? this.cursor
85
85
  : undefined,
86
86
  fontSize: this.inheritFontSize ? "inherit" : undefined,
87
87
  lineHeight: this.inheritFontSize ? "inherit" : undefined,
88
- } }, Boolean(this.icon) && (h("span", { key: 'fd2334063e4ea5c7c21a17cbfc2ef347d0ad1049', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (h("span", { key: '105ec9131873da4ded162d97f12e0ef150fd31f4', class: "button__icon", ref: (el) => (this.iconEl = el) }, h("slot", { key: '8797f3878578430e2b10ba707e99db179c80b7e6', name: "icon" }))), !hideLabel && h("span", { key: 'b47564712cf30122100e1cac186019c0d90cf0fb', class: "button__label" }, this.label), hasTag && (h("span", { key: '91a903f836ba8f32072798b5fe4f184960037a73', class: "button__tag" }, h("slot", { key: 'cad22304d1490c362da9d15c8bc55351de5c12d6', name: "tag" }))), hasTrailingSlot && (h("div", { key: '352c11dd6d9332e950486b1e8ee6119e158cb893', class: "button__trailing-slot" }, h("slot", { key: '7e6f28a9ea17106c2fc5b18bdfaf67dec3f41468', name: "trailing" }))))));
88
+ } }, Boolean(this.icon) && (h("span", { key: '58ad9ec67fd692d1bbd4d877f6820faeec548a59', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (h("span", { key: '89b0f33c96234cca0dbca8caf9c2e13edf330067', class: "button__icon", ref: (el) => (this.iconEl = el) }, h("slot", { key: '8fe33f30f6424c19d7f3322e77794ab409432d27', name: "icon" }))), !hideLabel && h("span", { key: '11f2397daaced6b03f241db1cda3a5b2786b5ae5', class: "button__label" }, this.label), hasTag && (h("span", { key: '67703c9b0d1d51f5bdefb185959354ed1741577e', class: "button__tag" }, h("slot", { key: 'c947a911fcd57072f283fcfa03d5002b6d8f5992', name: "tag" }))), hasTrailingSlot && (h("div", { key: 'c419181f3f91737ff6f10cec5f0774d87a6c1e9e', class: "button__trailing-slot" }, h("slot", { key: '24a5177b877256fd1eef407855fe6d5558ec10d1', name: "trailing" }))))));
89
89
  }
90
90
  get el() { return getElement(this); }
91
91
  };