@getflip/swirl-components 0.426.1 → 0.426.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 (20) hide show
  1. package/components.json +40 -5
  2. package/dist/cjs/swirl-popover_2.cjs.entry.js +39 -18
  3. package/dist/cjs/swirl-tag.cjs.entry.js +1 -1
  4. package/dist/collection/components/swirl-popover/swirl-popover.js +39 -13
  5. package/dist/collection/components/swirl-popover-trigger/swirl-popover-trigger.js +20 -7
  6. package/dist/collection/components/swirl-tag/swirl-tag.css +8 -0
  7. package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
  8. package/dist/components/swirl-popover-trigger2.js +20 -7
  9. package/dist/components/swirl-popover2.js +19 -11
  10. package/dist/components/swirl-tag2.js +1 -1
  11. package/dist/esm/swirl-popover_2.entry.js +39 -18
  12. package/dist/esm/swirl-tag.entry.js +1 -1
  13. package/dist/swirl-components/p-0f84622e.entry.js +1 -0
  14. package/dist/swirl-components/p-7cab0e86.entry.js +1 -0
  15. package/dist/swirl-components/swirl-components.esm.js +1 -1
  16. package/dist/types/components/swirl-popover/swirl-popover.d.ts +4 -2
  17. package/dist/types/components.d.ts +4 -4
  18. package/package.json +1 -1
  19. package/dist/swirl-components/p-8949aeeb.entry.js +0 -1
  20. package/dist/swirl-components/p-ba1f540c.entry.js +0 -1
package/dist/components/swirl-popover-trigger2.js CHANGED
@@ -34,7 +34,7 @@ const SwirlPopoverTrigger = /*@__PURE__*/ proxyCustomElement(class SwirlPopoverT
34
34
  this.mouseenterHandler = () => {
35
35
  const popoverEl = this.getPopoverEl();
36
36
  const triggerEl = this.getTriggerEl();
37
- popoverEl.open(triggerEl, true);
37
+ popoverEl.open(triggerEl, true, "hover");
38
38
  popoverEl.addEventListener("popoverOpen", () => {
39
39
  this.updateTriggerElAriaAttributes(true);
40
40
  }, { once: true });
@@ -56,7 +56,7 @@ const SwirlPopoverTrigger = /*@__PURE__*/ proxyCustomElement(class SwirlPopoverT
56
56
  return;
57
57
  const popoverEl = this.getPopoverEl();
58
58
  const triggerEl = this.getTriggerEl();
59
- popoverEl.toggle(triggerEl);
59
+ popoverEl.toggle(triggerEl, "click");
60
60
  popoverEl.addEventListener("popoverOpen", () => {
61
61
  this.updateTriggerElAriaAttributes(true);
62
62
  }, { once: true });
@@ -74,13 +74,25 @@ const SwirlPopoverTrigger = /*@__PURE__*/ proxyCustomElement(class SwirlPopoverT
74
74
  }
75
75
  const popoverId = this.getPopoverEl()?.id;
76
76
  if (triggerEl.tagName.startsWith("SWIRL-")) {
77
- triggerEl.setAttribute("swirl-aria-controls", popoverId);
78
- triggerEl.setAttribute("swirl-aria-expanded", String(open || "false"));
77
+ if (!this.triggerOnHover) {
78
+ triggerEl.setAttribute("swirl-aria-controls", popoverId);
79
+ triggerEl.setAttribute("swirl-aria-expanded", String(open || "false"));
80
+ }
81
+ else {
82
+ triggerEl.removeAttribute("swirl-aria-controls");
83
+ triggerEl.removeAttribute("swirl-aria-expanded");
84
+ }
79
85
  triggerEl.setAttribute("swirl-aria-haspopup", "dialog");
80
86
  }
81
87
  else {
82
- triggerEl.setAttribute("aria-controls", popoverId);
83
- triggerEl.setAttribute("aria-expanded", String(open || "false"));
88
+ if (!this.triggerOnHover) {
89
+ triggerEl.setAttribute("aria-controls", popoverId);
90
+ triggerEl.setAttribute("aria-expanded", String(open || "false"));
91
+ }
92
+ else {
93
+ triggerEl.removeAttribute("aria-controls");
94
+ triggerEl.removeAttribute("aria-expanded");
95
+ }
84
96
  triggerEl.setAttribute("aria-haspopup", "dialog");
85
97
  }
86
98
  };
@@ -112,6 +124,7 @@ const SwirlPopoverTrigger = /*@__PURE__*/ proxyCustomElement(class SwirlPopoverT
112
124
  this.updateTriggerElAriaAttributes();
113
125
  }
114
126
  watchHover() {
127
+ this.updateTriggerElAriaAttributes();
115
128
  clearTimeout(this.hoverDelayReference);
116
129
  clearTimeout(this.hoverLingerReference);
117
130
  }
@@ -158,7 +171,7 @@ const SwirlPopoverTrigger = /*@__PURE__*/ proxyCustomElement(class SwirlPopoverT
158
171
  return isActive;
159
172
  }
160
173
  render() {
161
- return (h(Host, { key: 'b3b848a07767f29be55ebfc23b5ca7248b69743b', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: '8c1aa0828cddda7c7355799a4fea2edc279700a0' })));
174
+ return (h(Host, { key: 'f47fa501d4706eb541c6d11cc93962339b1d3c59', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: 'e170ef35998bf793fd053dc0c5788c906a4e464b' })));
162
175
  }
163
176
  get el() { return this; }
164
177
  static get watchers() { return {
package/dist/components/swirl-popover2.js CHANGED
@@ -150,7 +150,8 @@ const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class SwirlPopover extends
150
150
  setTimeout(() => {
151
151
  this.active = false;
152
152
  this.closing = false;
153
- this.updateTriggerAttributes();
153
+ this.updateTriggerAttributes(this.openedVia);
154
+ this.openedVia = undefined;
154
155
  }, 150);
155
156
  this.unlockBodyScroll();
156
157
  if (this.returnFocusToTrigger && !disableFocus) {
@@ -161,14 +162,15 @@ const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class SwirlPopover extends
161
162
  * Open the popover.
162
163
  * @returns
163
164
  */
164
- async open(triggerEl, disableFocus) {
165
+ async open(triggerEl, disableFocus, via) {
165
166
  this.triggerEl = triggerEl || this.triggerEl;
166
167
  if (this.active || !Boolean(this.triggerEl)) {
167
168
  return;
168
169
  }
169
170
  this.adjustWidth();
170
171
  this.active = true;
171
- this.updateTriggerAttributes();
172
+ this.openedVia = via;
173
+ this.updateTriggerAttributes(via);
172
174
  const focusableChildren = this.getFocusableChildren();
173
175
  requestAnimationFrame(async () => {
174
176
  await this.reposition();
@@ -197,12 +199,12 @@ const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class SwirlPopover extends
197
199
  /**
198
200
  * Toggles the popover.
199
201
  */
200
- async toggle(triggerEl) {
202
+ async toggle(triggerEl, via) {
201
203
  if (this.active) {
202
204
  this.close();
203
205
  }
204
206
  else {
205
- this.open(triggerEl);
207
+ this.open(triggerEl, undefined, via);
206
208
  }
207
209
  }
208
210
  connectTrigger() {
@@ -228,13 +230,19 @@ const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class SwirlPopover extends
228
230
  this.triggerEl)
229
231
  : this.triggerEl;
230
232
  }
231
- updateTriggerAttributes() {
233
+ updateTriggerAttributes(controlledVia) {
232
234
  if (!Boolean(this.triggerEl)) {
233
235
  return;
234
236
  }
235
237
  const nativeTriggerEl = this.getNativeTriggerElement();
236
- nativeTriggerEl.setAttribute("aria-controls", this.el.id);
237
- nativeTriggerEl.setAttribute("aria-expanded", String(this.active));
238
+ if (controlledVia !== "hover") {
239
+ nativeTriggerEl.setAttribute("aria-controls", this.el.id);
240
+ nativeTriggerEl.setAttribute("aria-expanded", String(this.active));
241
+ }
242
+ else {
243
+ nativeTriggerEl.removeAttribute("aria-controls");
244
+ nativeTriggerEl.removeAttribute("aria-expanded");
245
+ }
238
246
  nativeTriggerEl.setAttribute("aria-haspopup", "dialog");
239
247
  }
240
248
  getFocusableChildren() {
@@ -286,14 +294,14 @@ const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class SwirlPopover extends
286
294
  "popover--transparent": this.transparent,
287
295
  "popover--padded": this.padded,
288
296
  });
289
- return (h(Host, { key: '20930a84eeb5cf30530117d809323e552b53f2b5', style: { display: this.active ? "inline-flex" : "none" } }, h("div", { key: '390101c87f025ef7eb61b880b70b0577c183e62f', class: className, onKeyDown: this.onKeydown }, h("div", { key: 'c3feb1eb33a7fc3ca59306b72fceadf6d0e89f25', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
297
+ return (h(Host, { key: 'cf85cdb6e5d6bd0948b4c80ebc611f5502f37d25', style: { display: this.active ? "inline-flex" : "none" } }, h("div", { key: '154ff782097a8e1d90f2a61faaca14bb4871ace5', class: className, onKeyDown: this.onKeydown }, h("div", { key: '235a9fca7951e844c8f0a32a02b7235d919574a5', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
290
298
  top: Boolean(this.position) ? `${this.position?.y}px` : "",
291
299
  left: Boolean(this.position) ? `${this.position?.x}px` : "",
292
- }, tabindex: "-1" }, h("span", { key: '47ef833faab1dcae48d5369a9caf4a9272d8733c', class: "popover__handle" }), h("div", { key: '02c79e428646f063b18c2fff68a826e004f0c4b1', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
300
+ }, tabindex: "-1" }, h("span", { key: 'd6a84c0e650dea3e490271d7de11eead532602eb', class: "popover__handle" }), h("div", { key: '1213a63d107de526f5a91b0a116935f61bba0994', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
293
301
  maxHeight: !mobile && Boolean(this.maxHeight)
294
302
  ? this.maxHeight
295
303
  : undefined,
296
- } }, h("slot", { key: 'c06749f1f530d2d9639849232b1ba84775c434c8' }))), this.active && (h("div", { key: '644eb0090c7244cfa3f16b26bfce5a2d04687c77', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
304
+ } }, h("slot", { key: 'c031de0a703d9dff7346cd8cbe40f825c8665f13' }))), this.active && (h("div", { key: 'd591f05e7183721ec08188507d8c0a5bb61947dc', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
297
305
  }
298
306
  get el() { return this; }
299
307
  static get style() { return swirlPopoverCss; }
package/dist/components/swirl-tag2.js CHANGED
@@ -3,7 +3,7 @@ import { c as classNames } from './index2.js';
3
3
  import { d as defineCustomElement$2 } from './swirl-icon-close2.js';
4
4
  import { d as defineCustomElement$1 } from './swirl-visually-hidden2.js';
5
5
 
6
- const swirlTagCss = ":host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.tag{display:inline-flex;max-width:100%;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--swirl-tag-background-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;border-style:solid;border-width:var(--s-border-width-default);border-color:transparent}.tag--size-s{padding:var(--s-space-0) var(--s-space-4)}.tag--size-m{padding:var(--s-space-2) var(--s-space-8)}.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);order:2}.tag--hide-label{padding-right:0;padding-left:0}.tag--hide-label.tag--size-s .tag__icon{margin-right:0;margin-left:0}.tag--hide-label .tag__icon{margin-right:var(--s-space-2);margin-left:var(--s-space-2)}.tag--variant-outline{border-color:var(--s-border-strong)}.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default)}.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--s-icon-info)}.tag--intent-info.tag--variant-outline{border-color:var(--s-border-info)}.tag--intent-info.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-info-default)}.tag--intent-info.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--s-icon-critical)}.tag--intent-critical.tag--variant-outline{border-color:var(--s-border-critical)}.tag--intent-critical.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.tag--intent-critical.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--s-icon-warning)}.tag--intent-warning.tag--variant-outline{border-color:var(--s-border-warning)}.tag--intent-warning.tag--variant-strong{color:var(--s-text-dark);background-color:var(--s-surface-warning-default)}.tag--intent-warning.tag--variant-strong .tag__removal-button{color:var(--s-icon-dark)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--s-icon-success)}.tag--intent-success.tag--variant-outline{border-color:var(--s-border-success)}.tag--intent-success.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-success-default)}.tag--intent-success.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-special{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.tag--intent-special .tag__removal-button{color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-outline{border-color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.tag--intent-special.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-translucent{color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default)}.tag--intent-translucent .tag__removal-button{color:var(--s-icon-on-image)}.tag--intent-translucent.tag--variant-outline{border-color:var(--s-text-on-image)}.tag__icon{display:inline-flex;margin-right:var(--s-space-4);margin-left:calc(-1 * var(--s-space-4));flex-shrink:0;order:0}.tag__label{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis;order:1}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer;flex-shrink:0;order:3}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}";
6
+ const swirlTagCss = ":host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.tag{display:inline-flex;max-width:100%;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--swirl-tag-background-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;border-style:solid;border-width:var(--s-border-width-default);border-color:transparent}.tag--size-s{padding:var(--s-space-0) var(--s-space-4)}.tag--size-s.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-2))}.tag--size-s .tag__icon{margin-left:calc(-1 * var(--s-space-2))}.tag--size-m{padding:var(--s-space-2) var(--s-space-8)}.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);order:2}.tag--hide-label{padding-right:0;padding-left:0}.tag--hide-label.tag--size-s .tag__icon{margin-right:0;margin-left:0}.tag--hide-label .tag__icon{margin-right:var(--s-space-2);margin-left:var(--s-space-2)}.tag--variant-outline{border-color:var(--s-border-strong)}.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default)}.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--s-icon-info)}.tag--intent-info.tag--variant-outline{border-color:var(--s-border-info)}.tag--intent-info.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-info-default)}.tag--intent-info.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--s-icon-critical)}.tag--intent-critical.tag--variant-outline{border-color:var(--s-border-critical)}.tag--intent-critical.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.tag--intent-critical.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--s-icon-warning)}.tag--intent-warning.tag--variant-outline{border-color:var(--s-border-warning)}.tag--intent-warning.tag--variant-strong{color:var(--s-text-dark);background-color:var(--s-surface-warning-default)}.tag--intent-warning.tag--variant-strong .tag__removal-button{color:var(--s-icon-dark)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--s-icon-success)}.tag--intent-success.tag--variant-outline{border-color:var(--s-border-success)}.tag--intent-success.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-success-default)}.tag--intent-success.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-special{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.tag--intent-special .tag__removal-button{color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-outline{border-color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.tag--intent-special.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-translucent{color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default)}.tag--intent-translucent .tag__removal-button{color:var(--s-icon-on-image)}.tag--intent-translucent.tag--variant-outline{border-color:var(--s-text-on-image)}.tag__icon{display:inline-flex;margin-right:var(--s-space-4);margin-left:calc(-1 * var(--s-space-4));flex-shrink:0;order:0}.tag__label{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis;order:1}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer;flex-shrink:0;order:3}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}";
7
7
 
8
8
  const SwirlTag = /*@__PURE__*/ proxyCustomElement(class SwirlTag extends HTMLElement {
9
9
  constructor() {
package/dist/esm/swirl-popover_2.entry.js CHANGED
@@ -148,7 +148,8 @@ const SwirlPopover = class {
148
148
  setTimeout(() => {
149
149
  this.active = false;
150
150
  this.closing = false;
151
- this.updateTriggerAttributes();
151
+ this.updateTriggerAttributes(this.openedVia);
152
+ this.openedVia = undefined;
152
153
  }, 150);
153
154
  this.unlockBodyScroll();
154
155
  if (this.returnFocusToTrigger && !disableFocus) {
@@ -159,14 +160,15 @@ const SwirlPopover = class {
159
160
  * Open the popover.
160
161
  * @returns
161
162
  */
162
- async open(triggerEl, disableFocus) {
163
+ async open(triggerEl, disableFocus, via) {
163
164
  this.triggerEl = triggerEl || this.triggerEl;
164
165
  if (this.active || !Boolean(this.triggerEl)) {
165
166
  return;
166
167
  }
167
168
  this.adjustWidth();
168
169
  this.active = true;
169
- this.updateTriggerAttributes();
170
+ this.openedVia = via;
171
+ this.updateTriggerAttributes(via);
170
172
  const focusableChildren = this.getFocusableChildren();
171
173
  requestAnimationFrame(async () => {
172
174
  await this.reposition();
@@ -195,12 +197,12 @@ const SwirlPopover = class {
195
197
  /**
196
198
  * Toggles the popover.
197
199
  */
198
- async toggle(triggerEl) {
200
+ async toggle(triggerEl, via) {
199
201
  if (this.active) {
200
202
  this.close();
201
203
  }
202
204
  else {
203
- this.open(triggerEl);
205
+ this.open(triggerEl, undefined, via);
204
206
  }
205
207
  }
206
208
  connectTrigger() {
@@ -226,13 +228,19 @@ const SwirlPopover = class {
226
228
  this.triggerEl)
227
229
  : this.triggerEl;
228
230
  }
229
- updateTriggerAttributes() {
231
+ updateTriggerAttributes(controlledVia) {
230
232
  if (!Boolean(this.triggerEl)) {
231
233
  return;
232
234
  }
233
235
  const nativeTriggerEl = this.getNativeTriggerElement();
234
- nativeTriggerEl.setAttribute("aria-controls", this.el.id);
235
- nativeTriggerEl.setAttribute("aria-expanded", String(this.active));
236
+ if (controlledVia !== "hover") {
237
+ nativeTriggerEl.setAttribute("aria-controls", this.el.id);
238
+ nativeTriggerEl.setAttribute("aria-expanded", String(this.active));
239
+ }
240
+ else {
241
+ nativeTriggerEl.removeAttribute("aria-controls");
242
+ nativeTriggerEl.removeAttribute("aria-expanded");
243
+ }
236
244
  nativeTriggerEl.setAttribute("aria-haspopup", "dialog");
237
245
  }
238
246
  getFocusableChildren() {
@@ -284,14 +292,14 @@ const SwirlPopover = class {
284
292
  "popover--transparent": this.transparent,
285
293
  "popover--padded": this.padded,
286
294
  });
287
- return (h(Host, { key: '20930a84eeb5cf30530117d809323e552b53f2b5', style: { display: this.active ? "inline-flex" : "none" } }, h("div", { key: '390101c87f025ef7eb61b880b70b0577c183e62f', class: className, onKeyDown: this.onKeydown }, h("div", { key: 'c3feb1eb33a7fc3ca59306b72fceadf6d0e89f25', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
295
+ return (h(Host, { key: 'cf85cdb6e5d6bd0948b4c80ebc611f5502f37d25', style: { display: this.active ? "inline-flex" : "none" } }, h("div", { key: '154ff782097a8e1d90f2a61faaca14bb4871ace5', class: className, onKeyDown: this.onKeydown }, h("div", { key: '235a9fca7951e844c8f0a32a02b7235d919574a5', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
288
296
  top: Boolean(this.position) ? `${this.position?.y}px` : "",
289
297
  left: Boolean(this.position) ? `${this.position?.x}px` : "",
290
- }, tabindex: "-1" }, h("span", { key: '47ef833faab1dcae48d5369a9caf4a9272d8733c', class: "popover__handle" }), h("div", { key: '02c79e428646f063b18c2fff68a826e004f0c4b1', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
298
+ }, tabindex: "-1" }, h("span", { key: 'd6a84c0e650dea3e490271d7de11eead532602eb', class: "popover__handle" }), h("div", { key: '1213a63d107de526f5a91b0a116935f61bba0994', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
291
299
  maxHeight: !mobile && Boolean(this.maxHeight)
292
300
  ? this.maxHeight
293
301
  : undefined,
294
- } }, h("slot", { key: 'c06749f1f530d2d9639849232b1ba84775c434c8' }))), this.active && (h("div", { key: '644eb0090c7244cfa3f16b26bfce5a2d04687c77', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
302
+ } }, h("slot", { key: 'c031de0a703d9dff7346cd8cbe40f825c8665f13' }))), this.active && (h("div", { key: 'd591f05e7183721ec08188507d8c0a5bb61947dc', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
295
303
  }
296
304
  get el() { return getElement(this); }
297
305
  };
@@ -330,7 +338,7 @@ const SwirlPopoverTrigger = class {
330
338
  this.mouseenterHandler = () => {
331
339
  const popoverEl = this.getPopoverEl();
332
340
  const triggerEl = this.getTriggerEl();
333
- popoverEl.open(triggerEl, true);
341
+ popoverEl.open(triggerEl, true, "hover");
334
342
  popoverEl.addEventListener("popoverOpen", () => {
335
343
  this.updateTriggerElAriaAttributes(true);
336
344
  }, { once: true });
@@ -352,7 +360,7 @@ const SwirlPopoverTrigger = class {
352
360
  return;
353
361
  const popoverEl = this.getPopoverEl();
354
362
  const triggerEl = this.getTriggerEl();
355
- popoverEl.toggle(triggerEl);
363
+ popoverEl.toggle(triggerEl, "click");
356
364
  popoverEl.addEventListener("popoverOpen", () => {
357
365
  this.updateTriggerElAriaAttributes(true);
358
366
  }, { once: true });
@@ -370,13 +378,25 @@ const SwirlPopoverTrigger = class {
370
378
  }
371
379
  const popoverId = this.getPopoverEl()?.id;
372
380
  if (triggerEl.tagName.startsWith("SWIRL-")) {
373
- triggerEl.setAttribute("swirl-aria-controls", popoverId);
374
- triggerEl.setAttribute("swirl-aria-expanded", String(open || "false"));
381
+ if (!this.triggerOnHover) {
382
+ triggerEl.setAttribute("swirl-aria-controls", popoverId);
383
+ triggerEl.setAttribute("swirl-aria-expanded", String(open || "false"));
384
+ }
385
+ else {
386
+ triggerEl.removeAttribute("swirl-aria-controls");
387
+ triggerEl.removeAttribute("swirl-aria-expanded");
388
+ }
375
389
  triggerEl.setAttribute("swirl-aria-haspopup", "dialog");
376
390
  }
377
391
  else {
378
- triggerEl.setAttribute("aria-controls", popoverId);
379
- triggerEl.setAttribute("aria-expanded", String(open || "false"));
392
+ if (!this.triggerOnHover) {
393
+ triggerEl.setAttribute("aria-controls", popoverId);
394
+ triggerEl.setAttribute("aria-expanded", String(open || "false"));
395
+ }
396
+ else {
397
+ triggerEl.removeAttribute("aria-controls");
398
+ triggerEl.removeAttribute("aria-expanded");
399
+ }
380
400
  triggerEl.setAttribute("aria-haspopup", "dialog");
381
401
  }
382
402
  };
@@ -408,6 +428,7 @@ const SwirlPopoverTrigger = class {
408
428
  this.updateTriggerElAriaAttributes();
409
429
  }
410
430
  watchHover() {
431
+ this.updateTriggerElAriaAttributes();
411
432
  clearTimeout(this.hoverDelayReference);
412
433
  clearTimeout(this.hoverLingerReference);
413
434
  }
@@ -454,7 +475,7 @@ const SwirlPopoverTrigger = class {
454
475
  return isActive;
455
476
  }
456
477
  render() {
457
- return (h(Host, { key: 'b3b848a07767f29be55ebfc23b5ca7248b69743b', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: '8c1aa0828cddda7c7355799a4fea2edc279700a0' })));
478
+ return (h(Host, { key: 'f47fa501d4706eb541c6d11cc93962339b1d3c59', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: 'e170ef35998bf793fd053dc0c5788c906a4e464b' })));
458
479
  }
459
480
  get el() { return getElement(this); }
460
481
  static get watchers() { return {
package/dist/esm/swirl-tag.entry.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-Dj_4Fda9.js';
2
2
  import { c as classnames } from './index-orsBiyT_.js';
3
3
 
4
- const swirlTagCss = ":host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.tag{display:inline-flex;max-width:100%;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--swirl-tag-background-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;border-style:solid;border-width:var(--s-border-width-default);border-color:transparent}.tag--size-s{padding:var(--s-space-0) var(--s-space-4)}.tag--size-m{padding:var(--s-space-2) var(--s-space-8)}.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);order:2}.tag--hide-label{padding-right:0;padding-left:0}.tag--hide-label.tag--size-s .tag__icon{margin-right:0;margin-left:0}.tag--hide-label .tag__icon{margin-right:var(--s-space-2);margin-left:var(--s-space-2)}.tag--variant-outline{border-color:var(--s-border-strong)}.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default)}.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--s-icon-info)}.tag--intent-info.tag--variant-outline{border-color:var(--s-border-info)}.tag--intent-info.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-info-default)}.tag--intent-info.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--s-icon-critical)}.tag--intent-critical.tag--variant-outline{border-color:var(--s-border-critical)}.tag--intent-critical.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.tag--intent-critical.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--s-icon-warning)}.tag--intent-warning.tag--variant-outline{border-color:var(--s-border-warning)}.tag--intent-warning.tag--variant-strong{color:var(--s-text-dark);background-color:var(--s-surface-warning-default)}.tag--intent-warning.tag--variant-strong .tag__removal-button{color:var(--s-icon-dark)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--s-icon-success)}.tag--intent-success.tag--variant-outline{border-color:var(--s-border-success)}.tag--intent-success.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-success-default)}.tag--intent-success.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-special{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.tag--intent-special .tag__removal-button{color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-outline{border-color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.tag--intent-special.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-translucent{color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default)}.tag--intent-translucent .tag__removal-button{color:var(--s-icon-on-image)}.tag--intent-translucent.tag--variant-outline{border-color:var(--s-text-on-image)}.tag__icon{display:inline-flex;margin-right:var(--s-space-4);margin-left:calc(-1 * var(--s-space-4));flex-shrink:0;order:0}.tag__label{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis;order:1}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer;flex-shrink:0;order:3}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}";
4
+ const swirlTagCss = ":host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.tag{display:inline-flex;max-width:100%;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--swirl-tag-background-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;border-style:solid;border-width:var(--s-border-width-default);border-color:transparent}.tag--size-s{padding:var(--s-space-0) var(--s-space-4)}.tag--size-s.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-2))}.tag--size-s .tag__icon{margin-left:calc(-1 * var(--s-space-2))}.tag--size-m{padding:var(--s-space-2) var(--s-space-8)}.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);order:2}.tag--hide-label{padding-right:0;padding-left:0}.tag--hide-label.tag--size-s .tag__icon{margin-right:0;margin-left:0}.tag--hide-label .tag__icon{margin-right:var(--s-space-2);margin-left:var(--s-space-2)}.tag--variant-outline{border-color:var(--s-border-strong)}.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default)}.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--s-icon-info)}.tag--intent-info.tag--variant-outline{border-color:var(--s-border-info)}.tag--intent-info.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-info-default)}.tag--intent-info.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--s-icon-critical)}.tag--intent-critical.tag--variant-outline{border-color:var(--s-border-critical)}.tag--intent-critical.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.tag--intent-critical.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--s-icon-warning)}.tag--intent-warning.tag--variant-outline{border-color:var(--s-border-warning)}.tag--intent-warning.tag--variant-strong{color:var(--s-text-dark);background-color:var(--s-surface-warning-default)}.tag--intent-warning.tag--variant-strong .tag__removal-button{color:var(--s-icon-dark)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--s-icon-success)}.tag--intent-success.tag--variant-outline{border-color:var(--s-border-success)}.tag--intent-success.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-success-default)}.tag--intent-success.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-special{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.tag--intent-special .tag__removal-button{color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-outline{border-color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.tag--intent-special.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-translucent{color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default)}.tag--intent-translucent .tag__removal-button{color:var(--s-icon-on-image)}.tag--intent-translucent.tag--variant-outline{border-color:var(--s-text-on-image)}.tag__icon{display:inline-flex;margin-right:var(--s-space-4);margin-left:calc(-1 * var(--s-space-4));flex-shrink:0;order:0}.tag__label{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis;order:1}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer;flex-shrink:0;order:3}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}";
5
5
 
6
6
  const SwirlTag = class {
7
7
  constructor(hostRef) {
package/dist/swirl-components/p-0f84622e.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as o,c as e,h as t,H as i,d as s}from"./p-Dj_4Fda9.js";import{P as r,N as n,k as a,D as p,b as h}from"./p-BtsCuEVE.js";import{d as c,e as d}from"./p-B0kNlhKL.js";import{c as l}from"./p-orsBiyT_.js";import{i as v,o as m,k as f,q as u}from"./p-wi_3Z3FQ.js";const g=class{constructor(t){o(this,t),this.popoverClose=e(this,"popoverClose",7),this.popoverOpen=e(this,"popoverOpen",7),this.animation="scale-in-xy",this.enableFlip=!0,this.maxHeight="22rem",this.offset=8,this.padded=!0,this.placement="bottom-start",this.returnFocusToTrigger=!0,this.active=!1,this.closing=!1,this.togglePopover=o=>{o.stopPropagation(),this.active?this.close():this.open()},this.onKeydown=o=>{"Escape"===o.code&&this.active&&(o.stopImmediatePropagation(),o.stopPropagation(),this.close())},this.reposition=async()=>{const o=v();if(!Boolean(this.triggerEl)||!Boolean(this.contentContainer))return;if(o)return void(this.position=void 0);const e="number"==typeof this.offset?{mainAxis:this.offset,crossAxis:0}:{mainAxis:this.offset[0],crossAxis:this.offset[1]},t=m("--s-space-16"),i=a({padding:{left:t,right:t}}),s=this.enableFlip?[p(e),i,h()]:[p(e),i];this.position=await r(this.triggerEl,this.contentContainer,{middleware:s,placement:this.placement,strategy:"fixed"})},this.onCloseButtonClick=()=>{this.close()}}componentDidLoad(){this.connectTrigger(),this.updateTriggerAttributes(),Boolean(this.trigger)&&console.warn('[Swirl] The "trigger" prop of swirl-popover is deprecated and will be removed with the next major release. Please use the swirl-popover-trigger component instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlpopovertrigger--docs')}disconnectedCallback(){this.unlockBodyScroll()}onWindowFocusIn(o){if(!this.active)return;const e=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),t="webkit"in window,i=e||t,s=o.target,r=o.relatedTarget,n=f(),a=!this.el.contains(s)&&!this.el.contains(n),p=s!==this.triggerEl&&!this.triggerEl?.contains(s),h=i&&!this.el.contains(r||s)&&r!==this.el;["SWIRL-TAB"].includes(s.tagName)||!a||!p||i&&!h||this.close()}onWindowBlur(){if(!this.active||this.closing)return;const o=document.activeElement;o&&["IFRAME"].includes(o.tagName)&&this.close()}onWindowClick(o){if(!this.active||this.closing)return;const e=o.target,t=this.el.contains(e),i=o.composedPath().some((o=>!!(Boolean(o)&&o instanceof Node)&&this.el.contains(o))),s=e===this.triggerEl||this.triggerEl.contains(e)||o.composedPath().includes(this.triggerEl);t||i||s||this.close()}async close(o){!this.closing&&this.active&&(this.popoverClose.emit(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.closing=!0,setTimeout((()=>{this.active=!1,this.closing=!1,this.updateTriggerAttributes(this.openedVia),this.openedVia=void 0}),150),this.unlockBodyScroll(),this.returnFocusToTrigger&&!o&&this.getNativeTriggerElement()?.focus())}async open(o,e,t){if(this.triggerEl=o||this.triggerEl,this.active||!Boolean(this.triggerEl))return;this.adjustWidth(),this.active=!0,this.openedVia=t,this.updateTriggerAttributes(t);const i=this.getFocusableChildren();requestAnimationFrame((async()=>{await this.reposition(),this.popoverOpen.emit({position:this.position}),i.length>0&&!e?i[0].focus():e||this.contentContainer.focus(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.disableAutoUpdate=n(this.triggerEl,this.contentContainer,(()=>this.reposition())),this.scrollContainer.scrollTop=0,this.lockBodyScroll()}))}async isOpen(){return this.active&&!this.closing}async toggle(o,e){this.active?this.close():this.open(o,void 0,e)}connectTrigger(){Boolean(this.trigger)?(this.triggerEl="string"==typeof this.trigger?u(this.triggerContainer||document.body,`#${this.trigger}`)[0]:this.trigger,Boolean(this.triggerEl)&&this.triggerEl.addEventListener("click",(o=>{this.togglePopover(o)}))):this.triggerEl=void 0}getNativeTriggerElement(){return this.triggerEl?.tagName.startsWith("SWIRL-")&&(this.triggerEl?.children[0]||this.triggerEl?.shadowRoot?.children[0])||this.triggerEl}updateTriggerAttributes(o){if(!Boolean(this.triggerEl))return;const e=this.getNativeTriggerElement();"hover"!==o?(e.setAttribute("aria-controls",this.el.id),e.setAttribute("aria-expanded",String(this.active))):(e.removeAttribute("aria-controls"),e.removeAttribute("aria-expanded")),e.setAttribute("aria-haspopup","dialog")}getFocusableChildren(){return u(this.el,'[role="menuitem"], [role="menuitemradio"], [role="option"]')}adjustWidth(){let o=this.useContainerWidth;[!0,"true"].includes(this.useContainerWidth)?o=!0:[!1,"false"].includes(this.useContainerWidth)&&(o=!1);const e=!window.matchMedia("(min-width: 768px)").matches;if(Boolean(o)&&!e){const e="string"==typeof o&&this.el.closest(o)||this.el.parentElement;this.contentContainer.style.maxWidth="none",this.contentContainer.style.width=e.getBoundingClientRect().width+"px"}else this.contentContainer.style.maxWidth="",this.contentContainer.style.width=""}lockBodyScroll(){v()&&!this.disableScrollLock&&Boolean(this.scrollContainer)&&c(this.scrollContainer)}unlockBodyScroll(){v()&&!this.disableScrollLock&&Boolean(this.scrollContainer)&&d(this.scrollContainer)}render(){const o=!window.matchMedia("(min-width: 768px)").matches,e=l("popover",`popover--animation-${this.animation}`,`popover--placement-${this.position?.placement}`,{"popover--active":this.active,"popover--closing":this.closing,"popover--fullscreen-bottom-sheet":this.fullscreenBottomSheet,"popover--inactive":!this.active,"popover--transparent":this.transparent,"popover--padded":this.padded});return t(i,{key:"cf85cdb6e5d6bd0948b4c80ebc611f5502f37d25",style:{display:this.active?"inline-flex":"none"}},t("div",{key:"154ff782097a8e1d90f2a61faaca14bb4871ace5",class:e,onKeyDown:this.onKeydown},t("div",{key:"235a9fca7951e844c8f0a32a02b7235d919574a5","aria-hidden":this.active?"false":"true","aria-label":this.label,class:"popover__content",id:this.popoverId,part:"popover__content",role:"dialog",ref:o=>this.contentContainer=o,style:{top:Boolean(this.position)?`${this.position?.y}px`:"",left:Boolean(this.position)?`${this.position?.x}px`:""},tabindex:"-1"},t("span",{key:"d6a84c0e650dea3e490271d7de11eead532602eb",class:"popover__handle"}),t("div",{key:"1213a63d107de526f5a91b0a116935f61bba0994",class:"popover__scroll-container",part:"popover__scroll-container",ref:o=>this.scrollContainer=o,style:{maxHeight:!o&&Boolean(this.maxHeight)?this.maxHeight:void 0}},t("slot",{key:"c031de0a703d9dff7346cd8cbe40f825c8665f13"}))),this.active&&t("div",{key:"d591f05e7183721ec08188507d8c0a5bb61947dc",class:"popover__backdrop",onClick:this.onCloseButtonClick})))}get el(){return s(this)}};g.style=":host{position:relative;z-index:var(--s-z-40)}:host *{box-sizing:border-box}:host{--swirl-resource-list-item-background-default:var(\n --s-surface-overlay-default\n );--swirl-resource-list-item-background-hovered:var(\n --s-surface-overlay-hovered\n );--swirl-resource-list-item-background-pressed:var(\n --s-surface-overlay-pressed\n )}.popover--active:not(.popover--closing) .popover__backdrop{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{animation:none}}.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{transform-origin:top left;animation:0.15s popover-fade-scale-in-xy}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--closing .popover__backdrop{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{animation:none}}.popover--closing .popover__content{animation:0.15s popover-slide-out forwards}@media (min-width: 768px){.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}}@media (prefers-reduced-motion){.popover--closing .popover__content{animation:none}}.popover--inactive .popover__content{display:none}@media (max-width: 767px){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:none}}.popover--fullscreen-bottom-sheet .popover__backdrop{display:none}.popover--fullscreen-bottom-sheet .popover__content{top:0;border-top-left-radius:0;border-top-right-radius:0}.popover--fullscreen-bottom-sheet .popover__scroll-container{height:100%;max-height:none;padding-top:0;padding-bottom:0}.popover--fullscreen-bottom-sheet .popover__handle{display:none}}@media (min-width: 768px){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-y}}@media (prefers-reduced-motion){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}}@media (prefers-reduced-motion){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--transparent .popover__content{background-color:transparent;box-shadow:none}}@media (min-width: 768px){.popover--transparent .popover__scroll-container{padding:0}}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;max-width:22.5rem;border-radius:var(--s-border-radius-base);animation:none;box-shadow:var(--s-shadow-level-2)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:0;padding-bottom:0}}@media (min-width: 768px){.popover--padded .popover__scroll-container{padding:var(--s-space-4)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}";const _=class{constructor(e){o(this,e),this.hidePopoverWhenInvisible=!0,this.setAriaAttributes=!0,this.triggerOnClick=!0,this.triggerOnHover=!1,this.triggerIsActive=!1,this.popoverMouseEnter=()=>{this.stopHoverLingerTimer()},this.popoverMouseLeave=()=>{this.triggerIsActive&&this.mouseleaveHandler()},this.onMouseenter=()=>{this.triggerOnHover&&(this.stopHoverLingerTimer(),this.triggerIsActive=!0,this.hoverDelayReference=setTimeout((()=>{this.hoverDelayReference=void 0,this.triggerOnHover&&this.mouseenterHandler()}),this.hoverDelay))},this.mouseenterHandler=()=>{const o=this.getPopoverEl(),e=this.getTriggerEl();o.open(e,!0,"hover"),o.addEventListener("popoverOpen",(()=>{this.updateTriggerElAriaAttributes(!0)}),{once:!0}),o.addEventListener("popoverClose",(()=>{this.updateTriggerElAriaAttributes(!1)}),{once:!0})},this.onMouseleave=()=>{clearTimeout(this.hoverDelayReference),this.mouseleaveHandler()},this.mouseleaveHandler=()=>{this.triggerOnHover&&this.startHoverLingerTimer()},this.onClick=()=>{if(!this.triggerOnClick)return;const o=this.getPopoverEl(),e=this.getTriggerEl();o.toggle(e,"click"),o.addEventListener("popoverOpen",(()=>{this.updateTriggerElAriaAttributes(!0)}),{once:!0}),o.addEventListener("popoverClose",(()=>{this.updateTriggerElAriaAttributes(!1)}),{once:!0})},this.updateTriggerElAriaAttributes=o=>{if(!this.setAriaAttributes)return;const e=this.getTriggerEl();if(!Boolean(e))return;const t=this.getPopoverEl()?.id;e.tagName.startsWith("SWIRL-")?(this.triggerOnHover?(e.removeAttribute("swirl-aria-controls"),e.removeAttribute("swirl-aria-expanded")):(e.setAttribute("swirl-aria-controls",t),e.setAttribute("swirl-aria-expanded",String(o||"false"))),e.setAttribute("swirl-aria-haspopup","dialog")):(this.triggerOnHover?(e.removeAttribute("aria-controls"),e.removeAttribute("aria-expanded")):(e.setAttribute("aria-controls",t),e.setAttribute("aria-expanded",String(o||"false"))),e.setAttribute("aria-haspopup","dialog"))}}componentDidLoad(){if(this.updateTriggerElAriaAttributes(),this.setupHoverListeners(),this.hidePopoverWhenInvisible){this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange.bind(this),{root:this.parentScrollContainer,threshold:1});const o=this.el.querySelector("*");if(!Boolean(o))return;this.intersectionObserver.observe(o)}}disconnectedCallback(){this.intersectionObserver?.disconnect();const o=this.getPopoverEl();Boolean(o)&&(o.removeEventListener("mouseenter",this.popoverMouseEnter),o.removeEventListener("mouseleave",this.popoverMouseLeave))}watchPopover(){this.updateTriggerElAriaAttributes()}watchHover(){this.updateTriggerElAriaAttributes(),clearTimeout(this.hoverDelayReference),clearTimeout(this.hoverLingerReference)}getPopoverEl(){return"string"==typeof this.swirlPopover?document.querySelector(`#${this.swirlPopover}`):this.swirlPopover?.el??this.swirlPopover}getTriggerEl(){return 1!==this.el.children.length&&console.warn('[Swirl] The "swirl-popover-trigger" component expects exactly one child element.'),this.el.children[0]}onVisibilityChange(o){!o[0].isIntersecting&&this.isPopoverOpen()&&this.getPopoverEl()?.close()}setupHoverListeners(){const o=this.getPopoverEl();Boolean(o)&&(o.addEventListener("mouseenter",this.popoverMouseEnter),o.addEventListener("mouseleave",this.popoverMouseLeave))}startHoverLingerTimer(){clearTimeout(this.hoverLingerReference),this.hoverLingerReference=setTimeout((()=>{this.triggerIsActive&&this.isPopoverOpen()&&this.getPopoverEl().close(!0),this.triggerIsActive=!1}),this.hoverLingerDuration)}stopHoverLingerTimer(){clearTimeout(this.hoverLingerReference)}isPopoverOpen(){const o=this.getPopoverEl(),e=o?.shadowRoot.firstChild?.classList.contains("popover--active");return e}render(){return t(i,{key:"f47fa501d4706eb541c6d11cc93962339b1d3c59",onClick:this.onClick,onMouseenter:this.onMouseenter,onMouseleave:this.onMouseleave},t("slot",{key:"e170ef35998bf793fd053dc0c5788c906a4e464b"}))}get el(){return s(this)}static get watchers(){return{swirlPopover:["watchPopover"],triggerOnHover:["watchHover"]}}};_.style=".sc-swirl-popover-trigger-h{display:contents}";export{g as swirl_popover,_ as swirl_popover_trigger}
package/dist/swirl-components/p-7cab0e86.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as t,c as a,h as r,H as o,d as e}from"./p-Dj_4Fda9.js";import{c as n}from"./p-orsBiyT_.js";const s=class{constructor(r){t(this,r),this.removeTag=a(this,"remove",7),this.iconPosition="start",this.intent="default",this.size="m",this.removalButtonLabel="Remove",this.variant="default",this.onRemove=t=>{this.removeTag?.emit(t)}}componentDidLoad(){this.forceIconProps()}componentWillLoad(){this.forceVariant()}componentDidRender(){this.forceIconProps()}forceIconProps(){const t=this.iconEl?.children[0];t?.setAttribute("size","16")}forceVariant(){Boolean(this.bordered)&&(console.warn('[Swirl] The "bordered" prop of swirl-tag is deprecated and will be removed with the next major release. Please use the "variant" prop as "outline" to achieve the same result.'),this.variant="outline")}render(){const t=n("tag",`tag--icon-position-${this.iconPosition}`,`tag--intent-${this.intent}`,`tag--size-${this.size}`,`tag--variant-${this.variant}`,{"tag--hide-label":this.hideLabel});return r(o,{key:"a3ade00e730b9c5a0bf70ce18555894162efcdb9"},r("span",{key:"9adecf537f7923514ec8eca45badc8560a1448b8",class:t,part:"tag"},this.icon&&r("span",{key:"0adc214659f1680182981e70724fcbc1782f01d0",class:"tag__icon",innerHTML:this.icon,ref:t=>this.iconEl=t}),this.hideLabel?r("swirl-visually-hidden",null,this.label):r("span",{class:"tag__label"},this.label),this.removable&&r("button",{key:"e1981afdf9819c222ca92f08fdf57cdd7e4f3f26","aria-label":this.removalButtonLabel,class:"tag__removal-button",onClick:this.onRemove,tabIndex:"true"===this.el.ariaHidden?-1:void 0,type:"button"},r("swirl-icon-close",{key:"6b06d0db7dcd182742f5399cd20d2d7532b9ff0c",size:16}))))}get el(){return e(this)}};s.style=":host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.tag{display:inline-flex;max-width:100%;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--swirl-tag-background-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;border-style:solid;border-width:var(--s-border-width-default);border-color:transparent}.tag--size-s{padding:var(--s-space-0) var(--s-space-4)}.tag--size-s.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-2))}.tag--size-s .tag__icon{margin-left:calc(-1 * var(--s-space-2))}.tag--size-m{padding:var(--s-space-2) var(--s-space-8)}.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);order:2}.tag--hide-label{padding-right:0;padding-left:0}.tag--hide-label.tag--size-s .tag__icon{margin-right:0;margin-left:0}.tag--hide-label .tag__icon{margin-right:var(--s-space-2);margin-left:var(--s-space-2)}.tag--variant-outline{border-color:var(--s-border-strong)}.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default)}.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--s-icon-info)}.tag--intent-info.tag--variant-outline{border-color:var(--s-border-info)}.tag--intent-info.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-info-default)}.tag--intent-info.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--s-icon-critical)}.tag--intent-critical.tag--variant-outline{border-color:var(--s-border-critical)}.tag--intent-critical.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.tag--intent-critical.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--s-icon-warning)}.tag--intent-warning.tag--variant-outline{border-color:var(--s-border-warning)}.tag--intent-warning.tag--variant-strong{color:var(--s-text-dark);background-color:var(--s-surface-warning-default)}.tag--intent-warning.tag--variant-strong .tag__removal-button{color:var(--s-icon-dark)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--s-icon-success)}.tag--intent-success.tag--variant-outline{border-color:var(--s-border-success)}.tag--intent-success.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-success-default)}.tag--intent-success.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-special{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.tag--intent-special .tag__removal-button{color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-outline{border-color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.tag--intent-special.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-translucent{color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default)}.tag--intent-translucent .tag__removal-button{color:var(--s-icon-on-image)}.tag--intent-translucent.tag--variant-outline{border-color:var(--s-text-on-image)}.tag__icon{display:inline-flex;margin-right:var(--s-space-4);margin-left:calc(-1 * var(--s-space-4));flex-shrink:0;order:0}.tag__label{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis;order:1}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer;flex-shrink:0;order:3}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}";export{s as swirl_tag}