@getflip/swirl-components 0.457.0 → 0.458.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components.json +66 -4
- package/dist/cjs/index-CnaJlT6Y.js +8 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/{swirl-option-list_2.cjs.entry.js → swirl-option-list.cjs.entry.js} +0 -44
- package/dist/cjs/swirl-popover_2.cjs.entry.js +6 -3
- package/dist/cjs/swirl-tag.cjs.entry.js +48 -0
- package/dist/cjs/swirl-tree-navigation-item.cjs.entry.js +5 -4
- package/dist/cjs/swirl-video-thumbnail.cjs.entry.js +1 -1
- package/dist/cjs/swirl-visually-hidden.cjs.entry.js +1 -1
- package/dist/collection/components/swirl-popover/swirl-popover.js +6 -3
- package/dist/collection/components/swirl-tree-navigation-item/swirl-tree-navigation-item.css +4 -0
- package/dist/collection/components/swirl-tree-navigation-item/swirl-tree-navigation-item.js +43 -3
- package/dist/collection/components/swirl-video-thumbnail/swirl-video-thumbnail.js +1 -1
- package/dist/collection/components/swirl-visually-hidden/swirl-visually-hidden.js +1 -1
- package/dist/components/swirl-popover2.js +1 -1
- package/dist/components/swirl-tree-navigation-item.js +1 -1
- package/dist/components/swirl-video-thumbnail.js +1 -1
- package/dist/components/swirl-visually-hidden2.js +1 -1
- package/dist/esm/index-bQirifsr.js +8 -4
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/{swirl-option-list_2.entry.js → swirl-option-list.entry.js} +1 -44
- package/dist/esm/swirl-popover_2.entry.js +6 -3
- package/dist/esm/swirl-tag.entry.js +46 -0
- package/dist/esm/swirl-tree-navigation-item.entry.js +5 -4
- package/dist/esm/swirl-video-thumbnail.entry.js +1 -1
- package/dist/esm/swirl-visually-hidden.entry.js +1 -1
- package/dist/swirl-components/{p-77eaf21e.entry.js → p-1252f991.entry.js} +1 -1
- package/dist/swirl-components/p-7a09b97b.entry.js +1 -0
- package/dist/swirl-components/p-a6736a9c.entry.js +1 -0
- package/dist/swirl-components/p-a721dc7d.entry.js +1 -0
- package/dist/swirl-components/p-aba55abe.entry.js +1 -0
- package/dist/swirl-components/p-cefdb75b.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-tree-navigation-item/swirl-tree-navigation-item.d.ts +2 -0
- package/dist/types/components.d.ts +12 -0
- package/package.json +1 -1
- package/vscode-data.json +8 -0
- package/dist/swirl-components/p-3010c78d.entry.js +0 -1
- package/dist/swirl-components/p-4b83464c.entry.js +0 -1
- package/dist/swirl-components/p-6217c656.entry.js +0 -1
- package/dist/swirl-components/p-e185b0d9.entry.js +0 -1
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-bQirifsr.js';
|
|
2
|
+
import { c as classnames } from './index-orsBiyT_.js';
|
|
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-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
|
+
|
|
6
|
+
const SwirlTag = class {
|
|
7
|
+
constructor(hostRef) {
|
|
8
|
+
registerInstance(this, hostRef);
|
|
9
|
+
this.removeTag = createEvent(this, "remove", 7);
|
|
10
|
+
this.iconPosition = "start";
|
|
11
|
+
this.intent = "default";
|
|
12
|
+
this.size = "m";
|
|
13
|
+
this.removalButtonLabel = "Remove";
|
|
14
|
+
this.variant = "default";
|
|
15
|
+
this.onRemove = (event) => {
|
|
16
|
+
this.removeTag?.emit(event);
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
componentDidLoad() {
|
|
20
|
+
this.forceIconProps();
|
|
21
|
+
}
|
|
22
|
+
componentWillLoad() {
|
|
23
|
+
this.forceVariant();
|
|
24
|
+
}
|
|
25
|
+
componentDidRender() {
|
|
26
|
+
this.forceIconProps();
|
|
27
|
+
}
|
|
28
|
+
forceIconProps() {
|
|
29
|
+
const icon = this.iconEl?.children[0];
|
|
30
|
+
icon?.setAttribute("size", "16");
|
|
31
|
+
}
|
|
32
|
+
forceVariant() {
|
|
33
|
+
if (Boolean(this.bordered)) {
|
|
34
|
+
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.');
|
|
35
|
+
this.variant = "outline";
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
render() {
|
|
39
|
+
const className = classnames("tag", `tag--icon-position-${this.iconPosition}`, `tag--intent-${this.intent}`, `tag--size-${this.size}`, `tag--variant-${this.variant}`, { "tag--hide-label": this.hideLabel });
|
|
40
|
+
return (h(Host, { key: '1761004fec8f52ef477c14dfb032db0cb4a2cae2' }, h("span", { key: '1531d418beb787bf5a85b32bf10017d24fe458b7', class: className, part: "tag" }, this.icon && (h("span", { key: '95db9c8289b2e770af02cc6eeb370a002b2bd7b1', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !this.hideLabel ? (h("span", { class: "tag__label" }, this.label)) : (h("swirl-visually-hidden", null, this.label)), this.removable && (h("button", { key: '1b99be433002b0a62f07b93ff6dd6e95fafef4c9', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { key: '2afaee043cd6b5ce579a3aa675beb5dba764539a', size: 16 }))))));
|
|
41
|
+
}
|
|
42
|
+
get el() { return getElement(this); }
|
|
43
|
+
};
|
|
44
|
+
SwirlTag.style = swirlTagCss();
|
|
45
|
+
|
|
46
|
+
export { SwirlTag as swirl_tag };
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-bQirifsr.js';
|
|
2
2
|
import { c as classnames } from './index-orsBiyT_.js';
|
|
3
3
|
|
|
4
|
-
const swirlTreeNavigationItemCss = () => `:host{display:inline-flex;width:100%}:host *{box-sizing:border-box}.tree-navigation-item{width:100%;list-style:none;border-radius:var(--s-border-radius-base)}.tree-navigation-item__link{display:inline-flex;align-items:center;width:100%;height:3rem;padding:0 var(--s-space-12) 0 var(--tree-nav-item-padding, var(--s-space-12));margin-bottom:var(--s-space-2);gap:calc(var(--s-space-4) - var(--s-space-2));min-width:0;border:none;background-color:transparent;color:var(--s-text-default);cursor:pointer;text-decoration:none;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--tree-nav-item-label-weight, var(--s-font-weight-medium));line-height:var(--s-line-height-sm);border-radius:var(--s-border-radius-base)}.tree-navigation-item__link:hover{background-color:var(--s-background-hovered)}.tree-navigation-item__link:active{background-color:var(--s-background-pressed)}.tree-navigation-item__link:focus{outline:none}.tree-navigation-item__link:focus-visible .tree-navigation-item__label{border-radius:var(--s-border-radius-xs);box-shadow:0 0 0 0.125rem var(--s-focus-default)}.tree-navigation-item__link--active{background-color:var(--s-background-hovered);color:var(--s-text-highlight);--tree-nav-item-label-weight:var(--s-font-weight-medium)}.tree-navigation-item__link--active:hover{background-color:var(--s-background-pressed)}.tree-navigation-item__link--active:active{background-color:var(--s-background-pressed)}.tree-navigation-item--expanded{height:100%}.tree-navigation-item__content{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__icon{display:inline-flex;flex-shrink:0;padding-right:var(--s-space-8)}.tree-navigation-item__toggle-icon{flex-shrink:0;max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__external-icon{max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__label{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-navigation-item__toggle-icon,.tree-navigation-item__external-icon{flex:0 0 auto;margin-left:var(--s-space-4)}.tree-navigation-item__children{display:flex;flex-direction:column;margin:0;padding:0;overflow:hidden;height:0;transition:height 0.3s ease-out}.tree-navigation-item__children>::slotted(swirl-tree-navigation-item){--tree-nav-item-padding:2.25rem;--tree-nav-item-label-weight:var(--s-font-weight-normal)}.tree-navigation-item__children>::slotted(*){opacity:1}.tree-navigation-item__toggle-icon{transition:transform 0.3s ease}.tree-navigation-item--expanded .tree-navigation-item__toggle-icon{transform:rotate(90deg)}`;
|
|
4
|
+
const swirlTreeNavigationItemCss = () => `:host{display:inline-flex;width:100%}:host *{box-sizing:border-box}.tree-navigation-item{width:100%;list-style:none;border-radius:var(--s-border-radius-base)}.tree-navigation-item__link{display:inline-flex;align-items:center;width:100%;height:3rem;padding:0 var(--s-space-12) 0 var(--tree-nav-item-padding, var(--s-space-12));margin-bottom:var(--s-space-2);gap:calc(var(--s-space-4) - var(--s-space-2));min-width:0;border:none;background-color:transparent;color:var(--s-text-default);cursor:pointer;text-decoration:none;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--tree-nav-item-label-weight, var(--s-font-weight-medium));line-height:var(--s-line-height-sm);border-radius:var(--s-border-radius-base)}.tree-navigation-item__link:hover{background-color:var(--s-background-hovered)}.tree-navigation-item__link:active{background-color:var(--s-background-pressed)}.tree-navigation-item__link:focus{outline:none}.tree-navigation-item__link:focus-visible .tree-navigation-item__label{border-radius:var(--s-border-radius-xs);box-shadow:0 0 0 0.125rem var(--s-focus-default)}.tree-navigation-item__link--active{background-color:var(--s-background-hovered);color:var(--s-text-highlight);--tree-nav-item-label-weight:var(--s-font-weight-medium)}.tree-navigation-item__link--active:hover{background-color:var(--s-background-pressed)}.tree-navigation-item__link--active:active{background-color:var(--s-background-pressed)}.tree-navigation-item--expanded{height:100%}.tree-navigation-item__content{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__icon{display:inline-flex;flex-shrink:0;padding-right:var(--s-space-8)}.tree-navigation-item__toggle-icon{flex-shrink:0;max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__external-icon{max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__label{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-navigation-item__toggle-icon,.tree-navigation-item__external-icon{flex:0 0 auto;margin-left:var(--s-space-4)}.tree-navigation-item__children{display:flex;flex-direction:column;margin:0;padding:0;overflow:hidden;height:0;transition:height 0.3s ease-out}.tree-navigation-item__children>::slotted(swirl-tree-navigation-item){--tree-nav-item-padding:2.25rem;--tree-nav-item-label-weight:var(--s-font-weight-normal)}.tree-navigation-item__children>::slotted(*){opacity:1}.tree-navigation-item__toggle-icon{transition:transform 0.3s ease}.tree-navigation-item--expanded .tree-navigation-item__toggle-icon{transform:rotate(90deg)}.tree-navigation-item__is-new-tag{flex-shrink:0}`;
|
|
5
5
|
|
|
6
6
|
const SwirlTreeNavigationItem = class {
|
|
7
7
|
constructor(hostRef) {
|
|
8
8
|
registerInstance(this, hostRef);
|
|
9
9
|
this.expansionChange = createEvent(this, "expansionChange", 7);
|
|
10
|
+
this.markAsNewLabel = "New";
|
|
10
11
|
this.level = 1;
|
|
11
12
|
this.expandable = true;
|
|
12
13
|
this.external = false;
|
|
@@ -88,12 +89,12 @@ const SwirlTreeNavigationItem = class {
|
|
|
88
89
|
"tree-navigation-item__link--active": this.active,
|
|
89
90
|
"tree-navigation-item__link--has-icon": Boolean(this.icon),
|
|
90
91
|
});
|
|
91
|
-
return (h(Host, { key: '
|
|
92
|
+
return (h(Host, { key: 'd4de1d1f3580a4eed510a774a3f650190d9313fe', role: "none" }, h("li", { key: 'f9672b6904f549f62abc87cd241889154bc39f2f', class: {
|
|
92
93
|
"tree-navigation-item": true,
|
|
93
94
|
"tree-navigation-item--expanded": this.expanded,
|
|
94
|
-
}, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : undefined, "aria-level": this.level }, h(Tag, { key: '
|
|
95
|
+
}, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : undefined, "aria-level": this.level }, h(Tag, { key: '6a5eb19fdf461ecc09087805c54b5c0f9b82311f', onClick: this.toggleExpanded, onKeyDown: this.onKeyDown, class: linkClassName, href: this.href, target: this.target, type: isLink ? undefined : "button", id: this.buttonId, "aria-current": this.active ? "page" : undefined, "aria-controls": this.hasChildren ? this.childrenId : undefined, "aria-expanded": this.hasChildren ? this.expanded : undefined }, h("span", { key: '5903777ca52fbcea134cb099c77a979ec38d780a', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: '34a20d553d674cf7f9c927953e2cf5ed58705029', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: '5da636bb27d2216dc6aff988f1d26fc8f30fcf60', class: "tree-navigation-item__label" }, h("span", { key: '6754265636339a86b486d5a321d90ec79a18444f', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: 'ea1f51fd0014242f7272b32f211caa1426d4ea94', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: '4aa852fa75f7b6c5af5b5492fed3f80ef3361ebb', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: '5c68b8d23ac3e78e90eb31b3ae5e2f52d94c2bf8', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: 'b12ddc926cab64408e481c15cc2566561595227a', size: 16, role: "img", "aria-label": "External link" })))), this.markAsNew && (h("swirl-tag", { key: '8b851f933a2a474f2c300097ad735689fde016b6', class: "tree-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel, size: "m", variant: "default" })))), this.hasChildren && (h("ul", { key: '0622463b9caf97cc16ea872038224c683aaccf5f', class: "tree-navigation-item__children", id: this.childrenId, role: "group", "aria-label": `${this.label} submenu`, ref: (el) => (this.childrenRef = el), style: {
|
|
95
96
|
height: this.childrenHeight,
|
|
96
|
-
} }, h("slot", { key: '
|
|
97
|
+
} }, h("slot", { key: 'b9088b5f02c54cc416b403581d1772ceb1693fb2' }))))));
|
|
97
98
|
}
|
|
98
99
|
get el() { return getElement(this); }
|
|
99
100
|
static get watchers() { return {
|
|
@@ -8,7 +8,7 @@ const SwirlVideoThumbnail = class {
|
|
|
8
8
|
this.durationLabel = "Duration";
|
|
9
9
|
}
|
|
10
10
|
render() {
|
|
11
|
-
return (h(Host, { key: '
|
|
11
|
+
return (h(Host, { key: 'f4b5e892518fccf1e1959544fe7bd15afbb0d44c' }, h("button", { key: '5b580350e9154448b3d21c3c860e89d02fcaa8d9', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '3cba6d9df87c09717a866fb5a93bf814a82c50f0', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '53a3a4e6381d041c658cb0139aa71b5b8b01eb98', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '88b4da4deb1606b86641273dca6984e8270b3053' }, this.durationLabel), this.duration)), h("svg", { key: 'ee06d6f9ef41acfc1dfd33f0b16be1e7d6f99a03', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0cfe8ddf2ff49220089e53d3e68448c782a0e328', d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" })))));
|
|
12
12
|
}
|
|
13
13
|
};
|
|
14
14
|
SwirlVideoThumbnail.style = swirlVideoThumbnailCss();
|
|
@@ -7,7 +7,7 @@ const SwirlVisuallyHidden = class {
|
|
|
7
7
|
registerInstance(this, hostRef);
|
|
8
8
|
}
|
|
9
9
|
render() {
|
|
10
|
-
return (h(Host, { key: '
|
|
10
|
+
return (h(Host, { key: '90076cf37baa0aa32be3f1f6b4900fd2d672b95b' }, h("slot", { key: 'bc644b9f81e4945abde8107bcddc0bb0ac2f12b6' })));
|
|
11
11
|
}
|
|
12
12
|
};
|
|
13
13
|
SwirlVisuallyHidden.style = swirlVisuallyHiddenCss();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as i,h as e,a}from"./p-bQirifsr.js";const t=class{constructor(e){i(this,e),this.durationLabel="Duration"}render(){return e(a,{key:"
|
|
1
|
+
import{r as i,h as e,a}from"./p-bQirifsr.js";const t=class{constructor(e){i(this,e),this.durationLabel="Duration"}render(){return e(a,{key:"f4b5e892518fccf1e1959544fe7bd15afbb0d44c"},e("button",{key:"5b580350e9154448b3d21c3c860e89d02fcaa8d9","aria-describedby":void 0!==this.duration?"duration":void 0,"aria-label":this.label,class:"video-thumbnail",type:"button"},e("img",{key:"3cba6d9df87c09717a866fb5a93bf814a82c50f0",alt:"",class:"video-thumbnail__image",loading:"lazy",src:this.src}),this.duration&&e("span",{key:"53a3a4e6381d041c658cb0139aa71b5b8b01eb98",class:"video-thumbnail__duration",id:"duration"},e("swirl-visually-hidden",{key:"88b4da4deb1606b86641273dca6984e8270b3053"},this.durationLabel),this.duration),e("svg",{key:"ee06d6f9ef41acfc1dfd33f0b16be1e7d6f99a03",class:"video-thumbnail__play-icon",fill:"none",viewBox:"0 0 40 40",xmlns:"http://www.w3.org/2000/svg"},e("path",{key:"0cfe8ddf2ff49220089e53d3e68448c782a0e328",d:"M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z",fill:"white","fill-opacity":"0.95"}))))}};t.style=':host{display:flex;width:100%}:host *{box-sizing:border-box}.video-thumbnail{position:relative;display:inline-flex;width:100%;margin:0;padding:0;border:none;background-color:transparent;cursor:pointer;container-type:inline-size;container-name:video-thumbnail}.video-thumbnail:after{position:absolute;background-color:rgba(0, 0, 0, 0.05);content:"";inset:0}.video-thumbnail:focus:not(:focus-visible){outline:none}.video-thumbnail:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}.video-thumbnail__image{width:100%}.video-thumbnail__duration{position:absolute;bottom:var(--s-space-8);left:var(--s-space-8);padding:var(--s-space-2) var(--s-space-8);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-image);background:linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), rgba(255, 255, 255, 0.1);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);letter-spacing:var(--s-letter-spacing-tighter)}.video-thumbnail__play-icon{position:absolute;z-index:1;top:50%;left:50%;width:2.5rem;height:2.5rem;transform:translate3d(-50%, -50%, 0)}@container video-thumbnail (min-width: 448px){.video-thumbnail__play-icon{width:3.5rem;height:4.5rem}}';export{t as swirl_video_thumbnail}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,c as i,h as s,a as e,d as h}from"./p-bQirifsr.js";import{S as o}from"./p-CMrz6687.js";import{l,q as n}from"./p-CCck-DTo.js";import{v as r}from"./p-DD3477fe.js";const a=class{constructor(s){t(this,s),this.itemDrop=i(this,"itemDrop",7),this.valueChange=i(this,"valueChange",7),this.allowDeselect=!0,this.assistiveTextItemGrabbed="Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.",this.assistiveTextItemMoving="Current position:",this.assistiveTextItemMoved="Item moved. New position:",this.selectAllLabel="Select all",this.value=[],this.selectAllState=!1,this.selectAllValue=r(),this.onClick=t=>{t.preventDefault();const i=t.target,s=i?.closest("swirl-option-list-item"),e=t.composedPath()[0],h=Boolean(l(e,'[role="option"]'));if(Boolean(s)&&h)if(s.value===this.selectAllValue)this.selectAllChanged();else{const t=this.items.findIndex((t=>t.value===s.value));this.focusItem(t),this.selectItem(t)}else t.preventDefault()},this.onKeyDown=t=>{if("ArrowDown"===t.code)t.preventDefault(),Boolean(this.dragging)?this.moveDraggedItemDown():this.focusNextItem();else if("ArrowUp"===t.code)t.preventDefault(),Boolean(this.dragging)?this.moveDraggedItemUp():this.focusPreviousItem();else if("Space"===t.code||"Enter"===t.code){if(!t.target.classList.contains("option-list-item__drag-handle")&&Boolean(this.dragging))return t.preventDefault(),void this.stopDrag(this.dragging);const i=t.composedPath()[0],s=Boolean(l(i,'[role="option"]')),e=i?.closest("swirl-option-list-item")?.value===this.selectAllValue;if(!s&&!e)return;t.preventDefault(),Boolean(this.dragging)?this.stopDrag(this.dragging):e?this.selectAllChanged():this.selectFocusedItem()}else"Home"===t.code?(t.preventDefault(),this.showSelectAll?this.focusSelectAll():this.focusItem(0)):"End"===t.code?(t.preventDefault(),this.focusItem(this.items.length-1)):"KeyA"===t.code&&(t.metaKey||t.ctrlKey)&&this.multiSelect?(t.preventDefault(),this.selectAllItems()):"Tab"===t.code&&Boolean(this.dragging)&&t.preventDefault()},this.resetTabIndex=()=>{this.removeItemsTabIndex(),this.focusedItem=void 0;const t=this.items[0]?.querySelector('[role="option"]'),i=this.selectAllEl?.querySelector('[role="option"]');(i||t)?.setAttribute("tabIndex","0")},this.selectAllChanged=()=>{if(this.disabled)return;const t=this.items?.length||0;this.updateValue((this.value?.length||0)===t?[]:this.items.map((t=>t.value)))},this.toggleDrag=t=>{const i=t.detail;Boolean(this.dragging)?this.stopDrag(i):this.startDrag(i)},this.startDrag=t=>{this.dragging=t,this.draggingStartIndex=this.getItemIndex(this.dragging),t.setAttribute("dragging","true");const i=this.getItemIndex(this.dragging);this.focusItem(i),this.assistiveText=this.assistiveTextItemGrabbed},this.stopDrag=t=>{this.dragging=void 0,t.removeAttribute("dragging");const i=this.getActiveItemIndex();this.assistiveText=`${this.assistiveTextItemMoved} ${i+1}`,this.itemDrop.emit({item:t,oldIndex:this.draggingStartIndex,newIndex:i}),this.draggingStartIndex=void 0,this.focusItem(i)}}componentDidLoad(){this.updateItems(),this.observeSlotChanges(),this.setItemAllowDragState(),this.setItemDisabledState(),this.setItemContext(),this.syncItemsWithValue(),this.setupDragDrop(),this.setSectionSeparator(),this.setSelectAllState(),this.subscribeToSwirlPopover()}componentDidRender(){this.setupDragDrop()}disconnectedCallback(){this.unsubscribeFromSwirlPopover(),this.observer?.disconnect(),this.sortable?.destroy(),this.removeToggleDragListeners()}removeToggleDragListeners(){this.items?.forEach((t=>{t.removeEventListener("toggleDrag",this.toggleDrag)}))}watchAllowDrag(){this.setItemAllowDragState(),this.setupDragDrop()}watchDisabled(){this.setItemDisabledState()}watchMultiSelect(){this.setItemContext()}watchValue(){this.syncItemsWithValue(),this.setSelectAllState()}async focusItemWithValue(t){const i=this.items.findIndex((i=>i.value===t));i>=0&&this.focusItem(i)}observeSlotChanges(){this.observer=new MutationObserver((()=>{this.updateItems(),this.setItemAllowDragState(),this.setItemDisabledState(),this.setItemContext(),this.syncItemsWithValue(),this.setSelectAllState()})),this.observer.observe(this.listboxEl,{childList:!0,subtree:!0})}setSelectAllState(){const t=this.items?.length||0,i=this.value?.length||0;this.selectAllState=0!==t&&0!==i&&(i===t||"indeterminate")}updateItems(){this.removeToggleDragListeners(),this.items=n(this.el,"swirl-option-list-item").filter((t=>t.value!==this.selectAllValue)),this.selectAllEl?.querySelector('[tabindex="0"]')||this.items.some((t=>t.querySelector('[tabindex="0"]')))||this.resetTabIndex()}removeItemsTabIndex(){this.selectAllEl?.querySelector('[role="option"]')?.removeAttribute("tabIndex"),this.items.forEach((t=>t.querySelector('[role="option"]')?.removeAttribute("tabIndex")))}setItemDisabledState(){this.disabled&&this.items.forEach((t=>t.disabled=!0))}setItemContext(){this.multiSelect?this.items.forEach((t=>t.context="multi-select")):(this.items.forEach((t=>t.context="single-select")),this.value.length>1&&this.updateValue([this.value[0]]))}setupDragDrop(){Boolean(this.sortable)&&this.sortable.destroy(),this.allowDrag&&(this.sortable=o.create(this.listboxEl,{animation:150,draggable:'swirl-option-list-item[allow-drag="true"]',dragClass:"option-list-item--drag",handle:".option-list-item__drag-handle",onEnd:t=>{this.itemDrop.emit({item:t.item,oldIndex:t.oldIndex,newIndex:t.newIndex})}}))}setItemAllowDragState(){if(this.allowDrag&&!this.multiSelect)return void console.error("[SwirlOptionList] Drag can only be allowed for multi select lists.");const t=n(this.el,"swirl-option-list-section");this.allowDrag&&t.length>0?console.error("[SwirlOptionList] Drag can only be allowed for lists without sections."):this.items.forEach(this.allowDrag?t=>{t.setAttribute("allow-drag","true"),t.addEventListener("toggleDrag",this.toggleDrag)}:t=>{t.removeAttribute("allow-drag"),t.removeEventListener("toggleDrag",this.toggleDrag)})}selectItem(t){if(this.disabled)return;const i=this.items[t];if(i.disabled)return;const s=this.value.includes(i.value);s&&!this.allowDeselect||(this.multiSelect||(this.value=[]),this.updateValue(s?this.value.filter((t=>t!==i.value)):[...this.value,i.value]))}updateValue(t){this.value=t,this.valueChange.emit(this.value)}selectFocusedItem(){this.disabled||-1===this.getActiveItemIndex()||this.selectItem(this.getActiveItemIndex())}selectAllItems(){if(this.disabled)return;const t=this.items.every((t=>this.value.includes(t.value)));this.updateValue(t?[]:this.items.map((t=>t.value)))}syncItemsWithValue(){this.items?.forEach((t=>t.selected=this.value.includes(t.value)))}focusItem(t){if(this.disabled)return;this.removeItemsTabIndex();const i=this.items[t]?.querySelector('[role="option"]');Boolean(i)&&(i.setAttribute("tabIndex","0"),i.focus(),this.focusedItem=i)}focusNextItem(){if(this.disabled)return;const t=this.getActiveItemIndex(),i=Math.min(t+1,this.items.length-1);this.focusItem(i)}focusPreviousItem(){const t=this.getActiveItemIndex();if(t<=0&&this.showSelectAll)this.focusSelectAll();else{const i=Math.max(t-1,0);this.focusItem(i)}}focusSelectAll(){const t=this.selectAllEl?.querySelector('[role="option"]');t&&(this.removeItemsTabIndex(),t.setAttribute("tabIndex","0"),t.focus(),this.focusedItem=void 0)}getActiveItemIndex(){return Boolean(this.focusedItem)?this.items.map((t=>t.querySelector('[role="option"]'))).findIndex((t=>t===this.focusedItem)):Boolean(this.selectAllEl)?-1:0}getItemIndex(t){return this.items.map((t=>t)).findIndex((i=>i===t))}moveDraggedItemDown(){const t=this.dragging.nextElementSibling;Boolean(t)&&(t.after(this.dragging),this.updateItems(),this.listboxEl.focus(),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getActiveItemIndex()+1}`)}moveDraggedItemUp(){const t=this.dragging.previousElementSibling;Boolean(t)&&t!==this.selectAllEl&&(t.before(this.dragging),this.updateItems(),this.listboxEl.focus(),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging)+1}`)}setSectionSeparator(){this.el&&Array.from(this.el.querySelectorAll("swirl-option-list-section")).filter((t=>t.isConnected)).forEach(((t,i)=>{0===i&&"SWIRL-OPTION-LIST-ITEM"!==t.previousElementSibling?.tagName&&(t.hasSeparator=!1)}))}subscribeToSwirlPopover(){this.swirlPopover=l(this.el,"swirl-popover"),this.swirlPopover?.addEventListener("popoverClose",this.resetTabIndex)}unsubscribeFromSwirlPopover(){this.swirlPopover?.removeEventListener("popoverClose",this.resetTabIndex)}render(){const t=this.multiSelect?"true":void 0,i=Boolean(this.dragging)?0:void 0,h=this.multiSelect&&this.showSelectAll;return s(e,{key:"23dac33782dc5196ebf9ed3069911c4745499e51"},s("swirl-visually-hidden",{key:"31f2e96b74cf92d5bb181f878e0dcbe260f96b83",role:"alert"},this.assistiveText),s("div",{key:"468b98cde9d0dcacc7c00bacc798287a6f094281","aria-label":this.label,"aria-multiselectable":t,class:"option-list",id:this.optionListId,onClick:this.onClick,onKeyDown:this.onKeyDown,ref:t=>this.listboxEl=t,role:"listbox",tabIndex:i},h&&s("swirl-option-list-item",{key:"5f8c970263e40980e6f5162e07ddbe03220bda54",ref:t=>this.selectAllEl=t,label:this.selectAllLabel,disabled:this.disabled,context:"multi-select",selected:!0===this.selectAllState,indeterminate:"indeterminate"===this.selectAllState,value:this.selectAllValue}),s("slot",{key:"50e6464cad68af3ba9a7ecf4a628693445e62503",onSlotchange:this.setSectionSeparator})))}get el(){return h(this)}static get watchers(){return{allowDrag:[{watchAllowDrag:0}],disabled:[{watchDisabled:0}],multiSelect:[{watchMultiSelect:0}],value:[{watchValue:0}]}}};a.style=".sc-swirl-option-list-h{display:block}.sc-swirl-option-list-h *.sc-swirl-option-list{box-sizing:border-box}";export{a as swirl_option_list}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as e,c as i,h as t,a,d as n}from"./p-bQirifsr.js";import{c as s}from"./p-orsBiyT_.js";const r=class{constructor(t){e(this,t),this.expansionChange=i(this,"expansionChange",7),this.markAsNewLabel="New",this.level=1,this.expandable=!0,this.external=!1,this.expanded=!1,this.hasChildren=!1,this.childrenHeight="0",this.buttonId=`${this.navigationItemId}-button`,this.childrenId=`${this.navigationItemId}-children`,this.onKeyDown=e=>{switch(e.key){case" ":e.preventDefault(),this.toggleExpanded(e);break;case"ArrowRight":e.preventDefault(),!this.expanded&&this.hasChildren&&this.expand();break;case"ArrowLeft":e.preventDefault(),this.expanded&&this.collapse()}},this.toggleExpanded=e=>{this.expandable&&this.hasChildren&&!this.href&&(e.preventDefault(),e.stopPropagation(),this.expanded?this.collapse():this.expand())}}componentWillLoad(){this.checkForChildren()}componentDidLoad(){this.hasChildren&&this.expanded&&this.updateChildrenHeight()}updateChildrenHeight(){this.childrenRef&&(this.childrenHeight=this.expanded?`${this.childrenRef.scrollHeight}px`:"0")}handleExpandedChange(){this.expansionChange.emit(this.expanded),this.updateChildrenHeight()}checkForChildren(){this.hasChildren=Boolean(this.el.querySelector("swirl-tree-navigation-item"))}async expand(){!this.expanded&&this.expandable&&this.hasChildren&&(this.expanded=!0)}async collapse(){this.expanded&&this.expandable&&this.hasChildren&&(this.expanded=!1)}render(){const e=Boolean(this.href),i=e?"a":"button",n=s("tree-navigation-item__link",{"tree-navigation-item__link--active":this.active,"tree-navigation-item__link--has-icon":Boolean(this.icon)});return t(a,{key:"d4de1d1f3580a4eed510a774a3f650190d9313fe",role:"none"},t("li",{key:"f9672b6904f549f62abc87cd241889154bc39f2f",class:{"tree-navigation-item":!0,"tree-navigation-item--expanded":this.expanded},role:"treeitem","aria-expanded":this.hasChildren?this.expanded:void 0,"aria-level":this.level},t(i,{key:"6a5eb19fdf461ecc09087805c54b5c0f9b82311f",onClick:this.toggleExpanded,onKeyDown:this.onKeyDown,class:n,href:this.href,target:this.target,type:e?void 0:"button",id:this.buttonId,"aria-current":this.active?"page":void 0,"aria-controls":this.hasChildren?this.childrenId:void 0,"aria-expanded":this.hasChildren?this.expanded:void 0},t("span",{key:"5903777ca52fbcea134cb099c77a979ec38d780a",class:"tree-navigation-item__content"},this.icon&&t("swirl-icon",{key:"34a20d553d674cf7f9c927953e2cf5ed58705029",class:"tree-navigation-item__icon",glyph:this.icon,size:20,"aria-hidden":"true",role:"img","aria-label":`${this.label} icon`}),t("span",{key:"5da636bb27d2216dc6aff988f1d26fc8f30fcf60",class:"tree-navigation-item__label"},t("span",{key:"6754265636339a86b486d5a321d90ec79a18444f",class:"tree-navigation-item__label-text"},this.label),this.expandable&&this.hasChildren&&!this.external&&t("span",{key:"ea1f51fd0014242f7272b32f211caa1426d4ea94",class:"tree-navigation-item__toggle-icon","aria-hidden":"true"},t("swirl-icon-chevron-right",{key:"4aa852fa75f7b6c5af5b5492fed3f80ef3361ebb",size:16,role:"img","aria-label":"Expand"})),this.external&&t("span",{key:"5c68b8d23ac3e78e90eb31b3ae5e2f52d94c2bf8",class:"tree-navigation-item__external-icon","aria-hidden":"true"},t("swirl-icon-open-in-new",{key:"b12ddc926cab64408e481c15cc2566561595227a",size:16,role:"img","aria-label":"External link"}))),this.markAsNew&&t("swirl-tag",{key:"8b851f933a2a474f2c300097ad735689fde016b6",class:"tree-navigation-item__is-new-tag",intent:"info",label:this.markAsNewLabel,size:"m",variant:"default"}))),this.hasChildren&&t("ul",{key:"0622463b9caf97cc16ea872038224c683aaccf5f",class:"tree-navigation-item__children",id:this.childrenId,role:"group","aria-label":`${this.label} submenu`,ref:e=>this.childrenRef=e,style:{height:this.childrenHeight}},t("slot",{key:"b9088b5f02c54cc416b403581d1772ceb1693fb2"}))))}get el(){return n(this)}static get watchers(){return{expanded:[{handleExpandedChange:0}]}}};r.style=":host{display:inline-flex;width:100%}:host *{box-sizing:border-box}.tree-navigation-item{width:100%;list-style:none;border-radius:var(--s-border-radius-base)}.tree-navigation-item__link{display:inline-flex;align-items:center;width:100%;height:3rem;padding:0 var(--s-space-12) 0 var(--tree-nav-item-padding, var(--s-space-12));margin-bottom:var(--s-space-2);gap:calc(var(--s-space-4) - var(--s-space-2));min-width:0;border:none;background-color:transparent;color:var(--s-text-default);cursor:pointer;text-decoration:none;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--tree-nav-item-label-weight, var(--s-font-weight-medium));line-height:var(--s-line-height-sm);border-radius:var(--s-border-radius-base)}.tree-navigation-item__link:hover{background-color:var(--s-background-hovered)}.tree-navigation-item__link:active{background-color:var(--s-background-pressed)}.tree-navigation-item__link:focus{outline:none}.tree-navigation-item__link:focus-visible .tree-navigation-item__label{border-radius:var(--s-border-radius-xs);box-shadow:0 0 0 0.125rem var(--s-focus-default)}.tree-navigation-item__link--active{background-color:var(--s-background-hovered);color:var(--s-text-highlight);--tree-nav-item-label-weight:var(--s-font-weight-medium)}.tree-navigation-item__link--active:hover{background-color:var(--s-background-pressed)}.tree-navigation-item__link--active:active{background-color:var(--s-background-pressed)}.tree-navigation-item--expanded{height:100%}.tree-navigation-item__content{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__icon{display:inline-flex;flex-shrink:0;padding-right:var(--s-space-8)}.tree-navigation-item__toggle-icon{flex-shrink:0;max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__external-icon{max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__label{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-navigation-item__toggle-icon,.tree-navigation-item__external-icon{flex:0 0 auto;margin-left:var(--s-space-4)}.tree-navigation-item__children{display:flex;flex-direction:column;margin:0;padding:0;overflow:hidden;height:0;transition:height 0.3s ease-out}.tree-navigation-item__children>::slotted(swirl-tree-navigation-item){--tree-nav-item-padding:2.25rem;--tree-nav-item-label-weight:var(--s-font-weight-normal)}.tree-navigation-item__children>::slotted(*){opacity:1}.tree-navigation-item__toggle-icon{transition:transform 0.3s ease}.tree-navigation-item--expanded .tree-navigation-item__toggle-icon{transform:rotate(90deg)}.tree-navigation-item__is-new-tag{flex-shrink:0}";export{r as swirl_tree_navigation_item}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r,h as i,a}from"./p-bQirifsr.js";const e=class{constructor(i){r(this,i)}render(){return i(a,{key:"90076cf37baa0aa32be3f1f6b4900fd2d672b95b"},i("slot",{key:"bc644b9f81e4945abde8107bcddc0bb0ac2f12b6"}))}};e.style=".sc-swirl-visually-hidden-h{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}";export{e as swirl_visually_hidden}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as o,c as e,h as t,a as i,d as s}from"./p-bQirifsr.js";import{c as r,a as n,s as p,o as a,f as h}from"./p-CLsTbQHn.js";import{d as c,e as d}from"./p-B0kNlhKL.js";import{c as l}from"./p-orsBiyT_.js";import{t as v}from"./p-DBTxpXCn.js";import{i as m,o as f,k as u,q as _}from"./p-CCck-DTo.js";const g=["xs","sm","base","l","xl"],b=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.borderRadius="base",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=m();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=f("--s-space-16"),i=p({padding:{left:t,right:t}}),s=this.enableFlip?[a(e),i,h()]:[a(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(),this.disableAutoUpdate?.(),this.disableAutoUpdate=void 0,this.triggerEl?.removeEventListener("click",this.togglePopover)}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=u(),p=!this.el.contains(s)&&!this.el.contains(n),a=s!==this.triggerEl&&!this.triggerEl?.contains(s),h=i&&!this.el.contains(r||s)&&r!==this.el;["SWIRL-TAB"].includes(s.tagName)||!p||!a||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.popoverEl?.hidePopover(),this.active=!1,this.closing=!1,this.position=void 0,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.position=void 0,this.active=!0,this.openedVia=t,this.updateTriggerAttributes(t);const i=this.getFocusableChildren();requestAnimationFrame((async()=>{this.popoverEl?.showPopover(),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?_(this.triggerContainer||document.body,`#${this.trigger}`)[0]:this.trigger,Boolean(this.triggerEl)&&this.triggerEl.addEventListener("click",this.togglePopover)):this.triggerEl=void 0}getNativeTriggerElement(){return v(this.triggerEl,{includeContainer:!0,getShadowRoot:!0}).at(0)}updateTriggerAttributes(o){if(!Boolean(this.triggerEl))return;const e=this.getNativeTriggerElement();Boolean(e)&&("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 _(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(){m()&&!this.disableScrollLock&&Boolean(this.scrollContainer)&&c(this.scrollContainer)}unlockBodyScroll(){m()&&!this.disableScrollLock&&Boolean(this.scrollContainer)&&d(this.scrollContainer)}render(){const o=!window.matchMedia("(min-width: 768px)").matches,e=g.includes(this.borderRadius)?`var(--s-border-radius-${this.borderRadius})`:this.borderRadius,s=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--translucent":this.translucent,"popover--transparent":this.transparent,"popover--padded":this.padded});return t(i,{key:"f415f0f3489fa984ec57af318bd1adc9c33cb0b3"},t("div",{key:"7061cd077de88e09645f0f011f76b4550eca92d4",popover:"manual",class:s,onKeyDown:this.onKeydown,ref:o=>this.popoverEl=o},t("div",{key:"d87e049c3e5c68ce5e1c9fdf4813e04147c23fe1","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`:"",visibility:!this.active||this.position||o?void 0:"hidden","--swirl-popover-border-radius":e},tabindex:"-1"},t("span",{key:"367b321f34695844f41a60242f11c7ed7f18f0cf",class:"popover__handle"}),t("div",{key:"538f60733248b127e79a65feccea4d337f11819a",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:"8f914e6bfa86c74a1c2de77fd8aed9995b2b594b"}))),this.active&&t("div",{key:"6d0e157e13c1c9660275d1791b1ab5b8a39dc3a5",class:"popover__backdrop",onClick:this.onCloseButtonClick})))}get el(){return s(this)}};b.style=":host{position:relative;z-index:var(--s-z-40);display:contents}:host *{box-sizing:border-box}.popover{border:none;padding:0;margin:0}.popover::backdrop{display:none}.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{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--placement-bottom .popover__content,.popover--placement-bottom-start .popover__content,.popover--placement-right .popover__content,.popover--placement-right-start .popover__content{transform-origin:top left}}@media (min-width: 768px){.popover--placement-bottom-end .popover__content,.popover--placement-left .popover__content,.popover--placement-left-start .popover__content{transform-origin:top right}}@media (min-width: 768px){.popover--placement-top .popover__content,.popover--placement-top-start .popover__content,.popover--placement-right-end .popover__content{transform-origin:bottom left}}@media (min-width: 768px){.popover--placement-top-end .popover__content,.popover--placement-left-end .popover__content{transform-origin:bottom right}}@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--translucent .popover__content{background:var(--s-translucent-low-default);-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l));outline:var(--s-border-width-default) solid var(--s-border-translucent-outline)}.popover--translucent .popover__handle{background-color:var(--s-border-on-translucent)}.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;border-radius:var( --swirl-popover-border-radius, var(--s-border-radius-base) );max-width:22.5rem;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 w=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(),this.removeHoverListeners(),clearTimeout(this.hoverDelayReference),clearTimeout(this.hoverLingerReference)}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(){this.popoverElRef=this.getPopoverEl(),Boolean(this.popoverElRef)&&(this.popoverElRef.addEventListener("mouseenter",this.popoverMouseEnter),this.popoverElRef.addEventListener("mouseleave",this.popoverMouseLeave))}removeHoverListeners(){Boolean(this.popoverElRef)&&(this.popoverElRef.removeEventListener("mouseenter",this.popoverMouseEnter),this.popoverElRef.removeEventListener("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:"79545fa80e8aa7a9ce98a170f60744d758da4840",onClick:this.onClick,onMouseenter:this.onMouseenter,onMouseleave:this.onMouseleave},t("slot",{key:"6f27e10f0becd8737732a20c6168673f699fdb91"}))}get el(){return s(this)}static get watchers(){return{swirlPopover:[{watchPopover:0}],triggerOnHover:[{watchHover:0}]}}};w.style=".sc-swirl-popover-trigger-h{display:contents}";export{b as swirl_popover,w as swirl_popover_trigger}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,c as a,h as r,a as o,d as e}from"./p-bQirifsr.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:"1761004fec8f52ef477c14dfb032db0cb4a2cae2"},r("span",{key:"1531d418beb787bf5a85b32bf10017d24fe458b7",class:t,part:"tag"},this.icon&&r("span",{key:"95db9c8289b2e770af02cc6eeb370a002b2bd7b1",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:"1b99be433002b0a62f07b93ff6dd6e95fafef4c9","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:"2afaee043cd6b5ce579a3aa675beb5dba764539a",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}
|