@getflip/swirl-components 0.0.0-new-shell-20231128124118

package/dist/esm/swirl-autocomplete.entry.js

@@ -0,0 +1,229 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-99d0060d.js';
+import { a as autoUpdate, c as computePosition, o as offset } from './floating-ui.dom.esm-ac7cc24e.js';
+import { c as classnames } from './index-d280dafb.js';
+import { d as debounce } from './utils-9f141e25.js';
+
+const swirlAutocompleteCss = ".sc-swirl-autocomplete-h{display:block}.sc-swirl-autocomplete-h *.sc-swirl-autocomplete{box-sizing:border-box}.autocomplete--inactive.sc-swirl-autocomplete .autocomplete__listbox-container.sc-swirl-autocomplete{display:none}.autocomplete__listbox-container.sc-swirl-autocomplete{position:fixed;z-index:var(--s-z-40);overflow-x:hidden;overflow-y:auto;max-height:18rem;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface-overlay-default);animation:autocomplete-enter 0.1s;box-shadow:var(--s-shadow-level-1)}.autocomplete__listbox-container.sc-swirl-autocomplete:empty{display:none}.autocomplete__spinner.sc-swirl-autocomplete{display:flex;padding:var(--s-space-16);justify-content:center;align-items:center}.autocomplete__multi-select-tags.sc-swirl-autocomplete{margin-top:var(--swirl-autocomplete-tags-margin-top);margin-bottom:var(--s-space-4)}@keyframes autocomplete-enter{from{opacity:0}to{opacity:1}}";
+
+const SwirlAutocomplete = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.onChange = (event) => {
+      event.stopPropagation();
+      this.updateTerm(event);
+    };
+    this.updateTerm = debounce(async (event) => {
+      this.updateSuggestions(event.detail);
+      this.open();
+      if (this.multiSelect) {
+        return;
+      }
+      if (!Boolean(event.detail) || event.detail === "") {
+        this.value = undefined;
+        this.valueChange.emit(this.value);
+      }
+    }, 250, false);
+    this.onSelect = async (event) => {
+      event.stopPropagation();
+      if (this.multiSelect) {
+        const selectedItemIds = event.detail;
+        const unselectedItemIds = this.suggestions
+          .filter((suggestion) => !selectedItemIds.includes(suggestion.id))
+          .map((suggestion) => suggestion.id);
+        this.value = [
+          ...this.value.filter((item) => !unselectedItemIds.includes(item.id)),
+          ...this.suggestions.filter((suggestion) => selectedItemIds.includes(suggestion.id) &&
+            !this.value.some((item) => item.id === suggestion.id)),
+        ];
+        this.valueChange.emit(this.value);
+        this.inputEl.value = "";
+        const input = this.inputEl.querySelector("input");
+        if (Boolean(input)) {
+          input.value = "";
+          queueMicrotask(() => {
+            input.focus();
+            this.close();
+          });
+          this.updateSuggestions(input.value);
+        }
+      }
+      else {
+        if (Boolean(event.detail[0])) {
+          const itemId = event.detail[0];
+          const suggestion = this.suggestions.find((suggestion) => suggestion.id === itemId);
+          if (!Boolean(suggestion)) {
+            return;
+          }
+          this.value = suggestion;
+          this.valueChange.emit(this.value);
+          queueMicrotask(() => {
+            this.inputEl.querySelector("input")?.focus();
+            this.close();
+          });
+        }
+      }
+    };
+    this.onRemoveValue = (value) => {
+      if (!Array.isArray(this.value)) {
+        return;
+      }
+      this.value = this.value.filter((item) => item.id !== value);
+      this.valueChange.emit(this.value);
+    };
+    this.onFocusOut = (event) => {
+      const relatedTarget = event.relatedTarget;
+      if (Boolean(relatedTarget) && !this.el.contains(relatedTarget)) {
+        this.close();
+      }
+    };
+    this.onFocus = () => {
+      this.updateSuggestions();
+      this.open();
+    };
+    this.onKeyDown = (event) => {
+      if (event.code === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        this.inputEl.querySelector("input").focus();
+        this.close();
+      }
+    };
+    this.onInputKeyDown = (event) => {
+      if (event.code === "ArrowDown") {
+        event.preventDefault();
+        this.listboxEl
+          .querySelector('[role="listbox"]')
+          ?.querySelector('[tabIndex="0"]')
+          ?.focus();
+      }
+    };
+    this.autoSelect = undefined;
+    this.clearable = true;
+    this.clearButtonLabel = "Clear input";
+    this.disabled = undefined;
+    this.generateSuggestions = async () => [];
+    this.inline = undefined;
+    this.invalid = undefined;
+    this.maxLength = undefined;
+    this.menuLabel = "Suggestions";
+    this.mode = undefined;
+    this.multiSelect = undefined;
+    this.placeholder = undefined;
+    this.required = undefined;
+    this.spellCheck = undefined;
+    this.swirlAriaDescribedby = undefined;
+    this.value = undefined;
+    this.active = false;
+    this.loading = false;
+    this.position = undefined;
+    this.suggestions = [];
+  }
+  componentWillLoad() {
+    const index = document.querySelectorAll("swirl-datepicker").length;
+    this.id = `autocomplete-${index}`;
+    this.handleInitialValue();
+  }
+  onWindowClick(event) {
+    const target = event.target;
+    if (!this.el.contains(target)) {
+      this.close();
+    }
+  }
+  watchMultiSelect() {
+    this.handleInitialValue();
+  }
+  async close() {
+    if (!this.active) {
+      return;
+    }
+    if (this.disableAutoUpdate) {
+      this.disableAutoUpdate();
+    }
+    const inputEl = this.inputEl.querySelector("input");
+    if (Boolean(inputEl)) {
+      if (this.multiSelect) {
+        inputEl.value = "";
+      }
+      else {
+        inputEl.value =
+          this.value?.label || "";
+      }
+    }
+    this.active = false;
+  }
+  async open() {
+    if (this.active) {
+      return;
+    }
+    this.active = true;
+    requestAnimationFrame(async () => {
+      await this.reposition();
+      if (this.disableAutoUpdate) {
+        this.disableAutoUpdate();
+      }
+      this.disableAutoUpdate = autoUpdate(this.inputEl, this.listboxContainerEl, this.reposition.bind(this), { animationFrame: true });
+      this.listboxContainerEl.scrollTop = 0;
+      this.updateSuggestions(this.inputEl.querySelector("input").value);
+    });
+  }
+  async reposition() {
+    if (!Boolean(this.listboxContainerEl)) {
+      return;
+    }
+    this.position = await computePosition(this.inputEl, this.listboxContainerEl, {
+      middleware: [offset({ crossAxis: -16, mainAxis: 16 })],
+      placement: "bottom-start",
+      strategy: "fixed",
+    });
+  }
+  async updateSuggestions(term) {
+    this.loading = true;
+    this.suggestions = [];
+    this.suggestions = await this.generateSuggestions(term);
+    this.loading = false;
+  }
+  handleInitialValue() {
+    if (this.multiSelect && !Array.isArray(this.value)) {
+      this.value = [];
+    }
+    if (!this.multiSelect && Array.isArray(this.value)) {
+      this.value = undefined;
+    }
+  }
+  render() {
+    const suggestionsMenuId = `${this.id}-suggestions`;
+    const clearable = this.clearable && !this.multiSelect;
+    const optionListValue = this.multiSelect
+      ? this.value.map((item) => item.id)
+      : Boolean(this.value)
+        ? [this.value.id]
+        : [];
+    const valueLabel = this.multiSelect
+      ? undefined
+      : this.value?.label || "";
+    const className = classnames("autocomplete", {
+      "autocomplete--inactive": !this.active,
+    });
+    return (h(Host, null, h("div", { class: className, onKeyDown: this.onKeyDown }, this.multiSelect &&
+      Array.isArray(this.value) &&
+      this.value.length > 0 && (h("div", { class: "autocomplete__multi-select-tags" }, h("swirl-stack", { orientation: "horizontal", spacing: "8", wrap: true }, this.value.map((item) => {
+      return (h("swirl-tag", { key: item.id, label: item.label,
+        // eslint-disable-next-line react/jsx-no-bind
+        onRemove: () => this.onRemoveValue(item.id), removable: !this.disabled }));
+    })))), h("swirl-text-input", { autoSelect: this.autoSelect, class: "autocomplete__input", clearable: clearable, clearButtonLabel: this.clearButtonLabel, disabled: this.disabled, disableDynamicWidth: true, id: this.id, inline: this.inline, invalid: this.invalid, onInputFocus: this.onFocus, onKeyDown: this.onInputKeyDown, onValueChange: this.onChange, maxLength: this.maxLength, mode: this.mode, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellCheck: this.spellCheck, swirlAriaAutocomplete: "list", swirlAriaControls: suggestionsMenuId, swirlAriaDescribedby: this.swirlAriaDescribedby, swirlAriaExpanded: String(this.active), swirlRole: "combobox", value: valueLabel }), h("div", { class: "autocomplete__listbox-container", onFocusout: this.onFocusOut, ref: (el) => (this.listboxContainerEl = el), style: {
+        top: Boolean(this.position) ? `${this.position?.y}px` : "",
+        left: Boolean(this.position) ? `${this.position?.x}px` : "",
+        width: `${this.inputEl?.getBoundingClientRect().width + 32}px`,
+      } }, this.loading && (h("div", { class: "autocomplete__spinner" }, h("swirl-spinner", null))), this.suggestions.length > 0 && (h("swirl-option-list", { allowDeselect: this.multiSelect === true, label: this.menuLabel, multiSelect: this.multiSelect, onValueChange: this.onSelect, optionListId: suggestionsMenuId, ref: (el) => (this.listboxEl = el), value: optionListValue }, this.suggestions.map((suggestion) => (h("swirl-option-list-item", { selected: Array.isArray(this.value)
+        ? this.value.some((item) => item.id === suggestion.id)
+        : this.value?.id === suggestion.id, key: suggestion.id, disabled: suggestion.disabled, label: suggestion.label, value: suggestion.id })))))))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "multiSelect": ["watchMultiSelect"]
+  }; }
+};
+SwirlAutocomplete.style = swirlAutocompleteCss;
+
+export { SwirlAutocomplete as swirl_autocomplete };

package/dist/esm/swirl-avatar-group.entry.js

@@ -0,0 +1,31 @@
+import { r as registerInstance, h, H as Host } from './index-99d0060d.js';
+import { c as classnames } from './index-d280dafb.js';
+
+const swirlAvatarGroupCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative;display:inline-grid;grid-template-rows:repeat(8, 1fr);grid-template-columns:repeat(8, 1fr)}.avatar-group ::slotted(*:first-of-type){z-index:1;display:inline-flex;border:0.25rem solid var(--swirl-avatar-group-border-color);border-radius:50%;grid-column-start:1;grid-column-end:7;grid-row-start:3;grid-row-end:9}.avatar-group ::slotted(*:nth-of-type(2)){z-index:0;display:inline-flex;border:0.25rem solid var(--swirl-avatar-group-border-color);border-radius:50%;grid-column-start:3;grid-column-end:9;grid-row-start:1;grid-row-end:7}.avatar-group__badge{position:absolute;z-index:2;right:0;bottom:0;display:inline-flex;width:1.5rem;height:1.5rem}";
+
+const SwirlAvatarGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.badge = undefined;
+  }
+  componentDidLoad() {
+    this.forceBadgeProps();
+  }
+  forceBadgeProps() {
+    if (!Boolean(this.badge)) {
+      return;
+    }
+    const badge = this.badgeEl.querySelector("swirl-badge");
+    badge?.setAttribute("size", "m");
+  }
+  render() {
+    const className = classnames("avatar-group", {
+      "avatar-group--has-badge": Boolean(this.badge),
+    });
+    const badgeClassName = classnames("avatar-group__badge");
+    return (h(Host, null, h("div", { class: className, role: "group" }, h("slot", null), this.badge && (h("span", { class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
+  }
+};
+SwirlAvatarGroup.style = swirlAvatarGroupCss;
+
+export { SwirlAvatarGroup as swirl_avatar_group };

package/dist/esm/swirl-avatar.entry.js

@@ -0,0 +1,84 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-99d0060d.js';
+import { c as classnames } from './index-d280dafb.js';
+
+const swirlAvatarCss = ":host{display:inline-flex;flex-shrink:0;align-items:center;flex-direction:column}:host *{box-sizing:border-box}.avatar{position:relative;display:inline-flex;justify-content:center;align-items:center;border-radius:50%}.avatar--has-icon{color:var(--s-icon-default);background-color:var(--swirl-avatar-background-color)}.avatar--has-initials{padding-right:0;padding-left:0;color:#fff}.avatar--interactive{cursor:pointer}.avatar--interactive:focus:not(:focus-visible){outline:none}.avatar--interactive:focus-visible{outline-color:var(--s-focus-default)}.avatar--size-2xs{width:1.25rem;height:1.25rem;font-size:0.625rem}.avatar--size-2xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-2xs.avatar--variant-square,.avatar--size-2xs.avatar--variant-square .avatar__image,.avatar--size-2xs.avatar--variant-square .avatar__initials{border-radius:0.25rem}.avatar--size-xs{width:1.75rem;height:1.75rem;font-size:0.75rem}.avatar--size-xs.avatar--has-icon{padding-right:0.4375rem;padding-left:0.4375rem}.avatar--size-xs.avatar--variant-square,.avatar--size-xs.avatar--variant-square .avatar__image,.avatar--size-xs.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-s{width:2rem;height:2rem;font-size:0.75rem}.avatar--size-s.avatar--has-icon{padding-right:var(--s-space-8);padding-left:var(--s-space-8)}.avatar--size-s.avatar--variant-square,.avatar--size-s.avatar--variant-square .avatar__image,.avatar--size-s.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-m{width:2.5rem;height:2.5rem;font-size:var(--s-font-size-base)}.avatar--size-m.avatar--has-icon{padding-right:0.625rem;padding-left:0.625rem}.avatar--size-m.avatar--variant-square,.avatar--size-m.avatar--variant-square .avatar__image,.avatar--size-m.avatar--variant-square .avatar__initials{border-radius:0.625rem}.avatar--size-l{width:3rem;height:3rem;font-size:var(--s-font-size-lg)}.avatar--size-l.avatar--has-icon{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.avatar--size-l.avatar--variant-square,.avatar--size-l.avatar--variant-square .avatar__image,.avatar--size-l.avatar--variant-square .avatar__initials{border-radius:0.75rem}.avatar--size-xl{width:4rem;height:4rem;font-size:var(--s-font-size-xl)}.avatar--size-xl.avatar--has-icon{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}.avatar--size-xl.avatar--variant-square,.avatar--size-xl.avatar--variant-square .avatar__image,.avatar--size-xl.avatar--variant-square .avatar__initials{border-radius:1rem}.avatar--size-2xl{width:9rem;height:9rem;font-size:3.375rem}.avatar--size-2xl.avatar--has-icon{padding-right:var(--s-space-32);padding-left:var(--s-space-32)}.avatar--size-2xl.avatar--variant-square,.avatar--size-2xl.avatar--variant-square .avatar__image,.avatar--size-2xl.avatar--variant-square .avatar__initials{border-radius:2.25rem}.avatar--size-2xl .avatar__tool{transform:none}.avatar--size-2xl .avatar__tool--position-top{transform:none}.avatar--color-banana .avatar__initials{color:var(--s-decorative-banana-text);background-color:var(--s-decorative-banana-surface-subdued)}.avatar--color-blueberry .avatar__initials{color:var(--s-decorative-blueberry-text);background-color:var(--s-decorative-blueberry-surface-subdued)}.avatar--color-chilli .avatar__initials{color:var(--s-decorative-chilli-text);background-color:var(--s-decorative-chilli-surface-subdued)}.avatar--color-grape .avatar__initials{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.avatar--color-kiwi .avatar__initials{color:var(--s-decorative-kiwi-text);background-color:var(--s-decorative-kiwi-surface-subdued)}.avatar--color-pumpkin .avatar__initials{color:var(--s-decorative-pumpkin-text);background-color:var(--s-decorative-pumpkin-surface-subdued)}.avatar--color-radish .avatar__initials{color:var(--s-decorative-radish-text);background-color:var(--s-decorative-radish-surface-subdued)}.avatar__image{overflow:hidden;width:100%;height:100%;border-radius:50%}.avatar__image>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.avatar__icon{display:inline-flex}.avatar__icon>*{width:100%;height:100%}.avatar__icon>*::part(icon){width:100%;height:100%}.avatar__initials{display:inline-flex;width:100%;min-width:0;height:100%;padding-right:0.0625rem;padding-left:0.0625rem;justify-content:center;align-items:center;border-radius:50%;font-weight:var(--s-font-weight-medium)}.avatar__initials>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.avatar__badge{position:absolute;bottom:0;left:55%;display:inline-flex;min-width:1.5rem;height:1.5rem;transform:translate3d(0, 25%, 0)}.avatar__badge--position-top{top:0;bottom:auto;transform:translate3d(0, -25%, 0)}.avatar__label{margin-top:var(--s-space-4);color:var(--s-icon-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);text-align:center}.avatar__tool{position:absolute;bottom:0;right:0;display:inline-flex;transform:translate3d(25%, 25%, 0)}.avatar__tool--position-top{top:0;bottom:auto;transform:translate3d(25%, -25%, 0)}";
+
+const swirlAvatarSizeMappings = {
+  "2xs": 20,
+  xs: 28,
+  s: 32,
+  m: 40,
+  l: 48,
+  xl: 64,
+  "2xl": 144,
+};
+const SwirlAvatar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.setImageAvailable = () => {
+      this.imageAvailable = true;
+    };
+    this.setImageUnavailable = () => {
+      this.imageAvailable = false;
+    };
+    this.onKeydown = (event) => {
+      // The interactive avatar is activated by the space key on the keyup event,
+      // but the default action for space is already triggered on keydown. It
+      // needs to be prevented to stop scrolling the page before activating the
+      // avatar.
+      if (event.code === "Space") {
+        event.preventDefault();
+      }
+      else if (event.code === "Enter") {
+        event.preventDefault();
+        this.element.click();
+      }
+    };
+    this.onKeyup = (event) => {
+      if (event.code === "Space") {
+        event.preventDefault();
+        this.element.click();
+      }
+    };
+    this.badge = undefined;
+    this.badgePosition = "bottom";
+    this.color = "kiwi";
+    this.icon = undefined;
+    this.initials = undefined;
+    this.interactive = false;
+    this.label = undefined;
+    this.showLabel = false;
+    this.size = "m";
+    this.src = undefined;
+    this.toolPosition = "bottom";
+    this.variant = "round";
+    this.imageAvailable = undefined;
+  }
+  watchSrcProp() {
+    this.imageAvailable = undefined;
+  }
+  render() {
+    const showImage = Boolean(this.src) &&
+      (this.imageAvailable || this.imageAvailable === undefined);
+    const showInitials = !showImage && Boolean(this.initials);
+    const showIcon = !showImage && !showInitials && Boolean(this.icon);
+    const showFallbackIcon = !showImage && !showInitials && !showIcon;
+    const showBadge = Boolean(this.badge) && this.size === "m";
+    const role = this.interactive ? "button" : "img";
+    const className = classnames("avatar", `avatar--color-${this.color}`, `avatar--size-${this.size}`, `avatar--variant-${this.variant}`, {
+      "avatar--has-icon": showIcon || showFallbackIcon,
+      "avatar--has-initials": showInitials,
+      "avatar--interactive": this.interactive,
+    });
+    const badgeClassName = classnames("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
+    const toolClassName = classnames("avatar__tool", `avatar__tool--position-${this.toolPosition}`);
+    return (h(Host, { "aria-label": this.label, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { class: className, part: "avatar" }, showImage && (h("span", { class: "avatar__image" }, h("img", { alt: "", height: swirlAvatarSizeMappings[this.size], onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (h("span", { class: "avatar__initials" }, h("span", null, this.initials))), showIcon && h("span", { class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { class: "avatar__icon" }, h("swirl-icon-person", null))), showBadge && (h("span", { class: badgeClassName, innerHTML: this.badge })), h("span", { class: toolClassName }, h("slot", { name: "tool" }))), this.showLabel && (h("span", { "aria-hidden": true, class: "avatar__label" }, this.label))));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "src": ["watchSrcProp"]
+  }; }
+};
+SwirlAvatar.style = swirlAvatarCss;
+
+export { SwirlAvatar as swirl_avatar };

package/dist/esm/swirl-badge.entry.js

@@ -0,0 +1,24 @@
+import { r as registerInstance, h, H as Host } from './index-99d0060d.js';
+import { c as classnames } from './index-d280dafb.js';
+
+const swirlBadgeCss = ":host{display:inline-flex;min-width:0;max-width:100%;justify-content:center;align-items:center}:host *{box-sizing:border-box}.badge{display:inline-flex;max-width:100%;justify-content:center;align-items:center;border:0.25rem solid var(--swirl-badge-border-color);border-radius:2rem;color:var(--s-text-on-status);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium)}.badge--size-s{min-width:1.5rem;height:1.5rem;font-size:0.75rem}.badge--size-s .badge__label{padding-right:0.1875rem;padding-left:0.1875rem}.badge--size-s .badge__icon>swirl-icon,.badge--size-s .badge__icon>*::part(icon){width:0.75rem;height:0.75rem}.badge--size-m{min-width:2rem;height:2rem}.badge--size-m .badge__label{padding-right:0.375rem;padding-left:0.375rem}.badge--has-icon{padding-right:0;padding-left:0}.badge--intent-critical{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.badge--intent-banana{color:var(--s-text-dark);background-color:var(--s-decorative-banana-surface)}.badge--intent-blueberry{color:var(--s-text-on-status);background-color:var(--s-decorative-blueberry-surface)}.badge--intent-chilli{color:var(--s-text-on-status);background-color:var(--s-decorative-chilli-surface)}.badge--intent-grape{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.badge--intent-kiwi{color:var(--s-text-on-status);background-color:var(--s-decorative-kiwi-surface)}.badge--intent-neutral{color:var(--s-text-default);background-color:var(--s-surface-neutral-subdued)}.badge--intent-pumpkin{color:var(--s-text-dark);background-color:var(--s-decorative-pumpkin-surface)}.badge--intent-radish{color:var(--s-text-on-status);background-color:var(--s-decorative-radish-surface)}.badge--variant-dot{width:1.25rem;min-width:0;height:1.25rem}.badge--variant-dot .badge__label{padding-right:0;padding-left:0}.badge--variant-dot .badge__label,.badge--variant-dot .badge__icon{display:none}.badge__icon{display:inline-flex}.badge__icon>swirl-icon,.badge__icon>*::part(icon){width:1rem;height:1rem}.badge__label{display:inline-flex;overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}";
+
+const SwirlBadge = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.icon = undefined;
+    this.intent = "critical";
+    this.label = undefined;
+    this.size = "m";
+    this.variant = "default";
+  }
+  render() {
+    const className = classnames("badge", `badge--intent-${this.intent}`, `badge--size-${this.size}`, `badge--variant-${this.variant}`, {
+      "badge--has-icon": this.icon,
+    });
+    return (h(Host, { role: "status" }, h("span", { class: className }, this.icon && h("span", { class: "badge__icon", innerHTML: this.icon }), this.icon === undefined && (h("span", { class: "badge__label" }, this.label)))));
+  }
+};
+SwirlBadge.style = swirlBadgeCss;
+
+export { SwirlBadge as swirl_badge };

package/dist/esm/swirl-banner.entry.js

@@ -0,0 +1,64 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-99d0060d.js';
+import { c as classnames } from './index-d280dafb.js';
+import { g as getDesktopMediaQuery } from './utils-9f141e25.js';
+
+const swirlBannerCss = ":host{display:block}:host *{box-sizing:border-box}.banner{display:flex;max-width:100%;padding:var(--s-space-12);align-items:baseline}.banner:focus:not(:focus-visible){outline:none}.banner:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}@media (min-width: 768px){.banner{padding:var(--s-space-16)}}.banner--size-s{padding:var(--s-space-8);justify-content:center}.banner--size-s .banner__content{flex-grow:0;text-align:center;margin-right:var(--s-space-8)}.banner--size-s .banner__controls{margin-left:0;margin-right:var(--s-space-4)}.banner--intent-default .banner__icon,.banner--intent-default .banner__content,.banner--intent-default .banner__action-button,.banner--intent-default .banner__dismiss-button,.banner--intent-critical .banner__icon,.banner--intent-critical .banner__content,.banner--intent-critical .banner__action-button,.banner--intent-critical .banner__dismiss-button,.banner--intent-success .banner__icon,.banner--intent-success .banner__content,.banner--intent-success .banner__action-button,.banner--intent-success .banner__dismiss-button,.banner--intent-info .banner__icon,.banner--intent-info .banner__content,.banner--intent-info .banner__action-button,.banner--intent-info .banner__dismiss-button{color:var(--s-text-on-status)}.banner--intent-default{background-color:var(--s-surface-neutral-default)}.banner--intent-critical{background-color:var(--s-surface-critical-default)}.banner--intent-success{background-color:var(--s-surface-success-default)}.banner--intent-info{background-color:var(--s-surface-info-default)}.banner--intent-warning{background-color:var(--s-surface-warning-default)}.banner--intent-warning .banner__icon{color:var(--s-icon-strong)}.banner--intent-warning .banner__content,.banner--intent-warning .banner__action-button,.banner--intent-warning .banner__dismiss-button{color:var(--s-text-default)}@media (min-width: 375px){.banner--has-icon .banner__content{padding-top:var(--s-space-2)}}.banner__icon{position:relative;top:var(--s-space-2);display:none;margin-right:var(--s-space-8);color:var(--s-icon-on-status)}@media (min-width: 375px){.banner__icon{display:inline-flex}}.banner__content{min-height:1.5rem;margin-right:var(--s-space-12);flex-grow:1;line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.banner__controls{display:inline-flex;margin-left:var(--s-space-16);align-items:center;line-height:var(--s-line-height-base);gap:var(--s-space-16)}@media (min-width: 768px){.banner__controls{gap:var(--s-space-24)}}.banner__action-button,.banner__dismiss-button{display:inline-flex;overflow:hidden;max-width:7rem;height:1.5rem;padding:0;flex-shrink:0;align-items:center;border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.banner__action-button:focus,.banner__dismiss-button:focus{outline-color:var(--s-focus-default)}@media (min-width: 768px){.banner__action-button,.banner__dismiss-button{max-width:12rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__action-button,.banner__dismiss-button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
+
+const swirlBannerIconMapping = {
+  default: undefined,
+  critical: "<swirl-icon-error></swirl-icon-error>",
+  success: "<swirl-icon-check-circle></swirl-icon-check-circle>",
+  warning: "<swirl-icon-warning></swirl-icon-warning>",
+  info: "<swirl-icon-info></swirl-icon-info>",
+};
+const SwirlBanner = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.action = createEvent(this, "action", 7);
+    this.dismiss = createEvent(this, "dismiss", 7);
+    this.desktopMediaQuery = getDesktopMediaQuery();
+    this.desktopMediaQueryHandler = (event) => {
+      this.forceIconProps(event.matches);
+    };
+    this.onAction = (event) => {
+      this.action.emit(event);
+    };
+    this.onDismiss = (event) => {
+      this.dismiss.emit(event);
+    };
+    this.actionLabel = undefined;
+    this.content = undefined;
+    this.dismissable = false;
+    this.dismissLabel = "Dismiss";
+    this.importance = "status";
+    this.intent = "default";
+    this.showIcon = false;
+    this.size = "m";
+  }
+  componentDidLoad() {
+    this.forceIconProps(this.desktopMediaQuery.matches);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+  }
+  disconnectedCallback() {
+    this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+  }
+  forceIconProps(smallIcon) {
+    const icon = this.iconEl?.children[0];
+    const dismissButtonIcon = this.dismissButtonEl?.children[0];
+    icon?.setAttribute("size", smallIcon ? "20" : "24");
+    dismissButtonIcon?.setAttribute("size", smallIcon ? "20" : "24");
+  }
+  render() {
+    const icon = swirlBannerIconMapping[this.intent];
+    const showControls = Boolean(this.actionLabel) || this.dismissable;
+    const showIcon = this.showIcon && Boolean(icon);
+    const className = classnames("banner", `banner--intent-${this.intent}`, `banner--size-${this.size}`, {
+      "banner--has-icon": showIcon,
+    });
+    return (h(Host, null, h("div", { "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, showIcon && (h("span", { "aria-hidden": "true", class: "banner__icon", innerHTML: icon, ref: (el) => (this.iconEl = el) })), h("span", { class: "banner__content", id: "content", part: "banner__content" }, this.content), showControls && (h("span", { class: "banner__controls" }, this.actionLabel && (h("button", { class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel)), this.dismissable && (h("button", { "aria-label": this.dismissLabel, class: "banner__dismiss-button", onClick: this.onDismiss, part: "banner__dismiss-button", ref: (el) => (this.dismissButtonEl = el), type: "button" }, h("swirl-icon-close", null))))))));
+  }
+  get element() { return getElement(this); }
+};
+SwirlBanner.style = swirlBannerCss;
+
+export { SwirlBanner as swirl_banner };

package/dist/esm/swirl-box.entry.js

@@ -0,0 +1,62 @@
+import { r as registerInstance, h, H as Host } from './index-99d0060d.js';
+import { c as classnames } from './index-d280dafb.js';
+
+const swirlBoxCss = ":host{display:block;width:100%}:host(.box--bordered){border:var(--s-border-width-default) solid var(--s-border-default)}:host(.box--bordered-block-end){border-block-end:var(--s-border-width-default) solid\n      var(--s-border-default)}:host(.box--bordered-block-start){border-block-start:var(--s-border-width-default) solid\n      var(--s-border-default)}:host(.box--bordered-inline-end){border-inline-end:var(--s-border-width-default) solid\n      var(--s-border-default)}:host(.box--bordered-inline-start){border-inline-start:var(--s-border-width-default) solid\n      var(--s-border-default)}:host(.box--cover){width:100%;height:100%}:host *{box-sizing:border-box}";
+
+const SwirlBox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.bordered = undefined;
+    this.borderedBlockEnd = undefined;
+    this.borderedBlockStart = undefined;
+    this.borderedInlineEnd = undefined;
+    this.borderedInlineStart = undefined;
+    this.centerBlock = undefined;
+    this.centerInline = undefined;
+    this.cover = undefined;
+    this.maxWidth = undefined;
+    this.overflow = "visible";
+    this.padding = "0";
+    this.paddingBlockEnd = undefined;
+    this.paddingBlockStart = undefined;
+    this.paddingInlineEnd = undefined;
+    this.paddingInlineStart = undefined;
+  }
+  render() {
+    const styles = {
+      alignItems: this.centerBlock ? "center" : undefined,
+      display: this.centerBlock || this.centerInline ? "flex" : undefined,
+      height: this.cover ? "100%" : undefined,
+      justifyContent: this.centerInline ? "center" : undefined,
+      overflow: this.overflow,
+      padding: `var(--s-space-${this.padding})`,
+      paddingBlockEnd: Boolean(this.paddingBlockEnd)
+        ? `var(--s-space-${this.paddingBlockEnd})`
+        : undefined,
+      paddingBlockStart: Boolean(this.paddingBlockStart)
+        ? `var(--s-space-${this.paddingBlockStart})`
+        : undefined,
+      paddingInlineEnd: Boolean(this.paddingInlineEnd)
+        ? `var(--s-space-${this.paddingInlineEnd})`
+        : undefined,
+      paddingInlineStart: Boolean(this.paddingInlineStart)
+        ? `var(--s-space-${this.paddingInlineStart})`
+        : undefined,
+      position: Boolean(this.overflow) ? "relative" : "",
+      maxWidth: this.maxWidth,
+      width: this.cover ? "100%" : undefined,
+    };
+    const className = classnames("box", {
+      "box--bordered": this.bordered,
+      "box--bordered-block-end": this.borderedBlockEnd,
+      "box--bordered-block-start": this.borderedBlockStart,
+      "box--bordered-inline-end": this.borderedInlineEnd,
+      "box--bordered-inline-start": this.borderedInlineStart,
+      "box--cover": this.cover,
+    });
+    return (h(Host, { class: className, style: styles }, h("slot", null)));
+  }
+};
+SwirlBox.style = swirlBoxCss;
+
+export { SwirlBox as swirl_box };

package/dist/esm/swirl-button-group.entry.js

@@ -0,0 +1,28 @@
+import { r as registerInstance, h, H as Host } from './index-99d0060d.js';
+import { c as classnames } from './index-d280dafb.js';
+
+const swirlButtonGroupCss = ":host{display:block}:host *{box-sizing:border-box}.button-group--segmented ::slotted(*:not(:last-child)){position:relative}.button-group--segmented ::slotted(*:not(:last-child)):after{position:absolute;z-index:1;top:50%;left:100%;width:var(--s-border-width-default);height:calc(100% - var(--s-space-16));background-color:var(--s-border-strong);content:\"\";transform:translate3d(-50%, -50%, 0);pointer-events:none}.button-group--segmented ::slotted(*:not(:last-child):not([disabled])[intent=\"primary\"]):after{background-color:var(--s-text-on-action-primary)}.button-group--segmented ::slotted(*:not(:last-child)[disabled=\"false\"][intent=\"primary\"]):after{background-color:var(--s-text-on-action-primary)}.button-group--segmented ::slotted(*:not(:first-child):not(:last-child)){--swirl-button-border-top-right-radius:0;--swirl-button-border-top-left-radius:0;--swirl-button-border-bottom-right-radius:0;--swirl-button-border-bottom-left-radius:0;--swirl-icon-button-border-top-right-radius:0;--swirl-icon-button-border-top-left-radius:0;--swirl-icon-button-border-bottom-right-radius:0;--swirl-icon-button-border-bottom-left-radius:0}.button-group--segmented ::slotted(*:first-child){--swirl-button-border-top-right-radius:0;--swirl-button-border-bottom-right-radius:0;--swirl-icon-button-border-top-right-radius:0;--swirl-icon-button-border-bottom-right-radius:0;--swirl-icon-button-border-top-left-radius:var(--s-border-radius-base);--swirl-icon-button-border-bottom-left-radius:var(--s-border-radius-base)}.button-group--segmented ::slotted(*:last-child){--swirl-button-border-top-left-radius:0;--swirl-button-border-bottom-left-radius:0;--swirl-icon-button-border-top-right-radius:var(--s-border-radius-base);--swirl-icon-button-border-bottom-right-radius:var(--s-border-radius-base);--swirl-icon-button-border-top-left-radius:0;--swirl-icon-button-border-bottom-left-radius:0}";
+
+const SwirlButtonGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.orientation = "horizontal";
+    this.segmented = undefined;
+    this.stretch = undefined;
+    this.wrap = undefined;
+  }
+  render() {
+    const spacing = this.segmented ? "0" : "8";
+    const className = classnames("button-group", {
+      "button-group--segmented": this.segmented,
+    });
+    return (h(Host, null, h("swirl-stack", { align: this.orientation === "vertical" && this.stretch
+        ? "stretch"
+        : "start", class: className, justify: this.orientation === "horizontal" && this.stretch
+        ? "stretch"
+        : "start", orientation: this.orientation, role: "group", spacing: spacing, wrap: this.wrap }, h("slot", null))));
+  }
+};
+SwirlButtonGroup.style = swirlButtonGroupCss;
+
+export { SwirlButtonGroup as swirl_button_group };