@getflip/swirl-components-react 0.452.0 → 0.453.0

package/dist/swirl-resource-list.entry.4bd0082d.js

@@ -0,0 +1,152 @@
+import { r as l, c as d, h as r, H as c, g } from "./index.0118a769.js";
+import { S as h } from "./sortable.esm-CMrz6687.dac971cd.js";
+import { v as m } from "./v4-DD3477fe.2624487e.js";
+import "react";
+import "react-dom";
+const u = () => ".sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource-list-h *.sc-swirl-resource-list{box-sizing:border-box}", I = class {
+  constructor(e) {
+    l(this, e), this.itemDrop = d(this, "itemDrop", 7), 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.semantics = "grid", this.spacing = "0", this.listId = m(), this.focusedIndex = 0, this.toggleDrag = (t) => {
+      const s = t.detail;
+      Boolean(this.dragging) ? this.stopDrag(s) : this.startDrag(s);
+    }, this.startDrag = (t) => {
+      this.dragging = t, this.draggingStartIndex = this.getItemIndex(this.dragging), t.setAttribute("dragging", "true");
+      const s = this.getItemIndex(this.dragging);
+      this.focusItemAtIndex(s), this.assistiveText = this.assistiveTextItemGrabbed;
+    }, this.stopDrag = (t) => {
+      const s = this.getItemIndex(this.dragging);
+      this.dragging = void 0, t.removeAttribute("dragging"), this.assistiveText = `${this.assistiveTextItemMoved} ${s + 1}`, this.itemDrop.emit({ item: t, oldIndex: this.draggingStartIndex, newIndex: s }), this.draggingStartIndex = void 0;
+    }, this.onKeyDown = (t) => {
+      if (this.semantics === "grid" && !Boolean(this.dragging))
+        if (t.code === "ArrowDown")
+          t.preventDefault(), this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);
+        else if (t.code === "ArrowUp") {
+          t.preventDefault();
+          const s = this.focusedIndex === 0 ? this.items.length - 1 : this.focusedIndex - 1;
+          this.focusItemAtIndex(s);
+        } else if (t.code === "Enter" && Boolean(this.controllingElement)) {
+          const s = this.items[this.focusedIndex];
+          if (!Boolean(s) || !s.isConnected)
+            return;
+          t.stopPropagation(), t.preventDefault(), s.click();
+        } else
+          t.code === "Home" ? (t.preventDefault(), this.focusItemAtIndex(0)) : t.code === "End" && (t.preventDefault(), this.focusItemAtIndex(this.items.length - 1));
+      if (Boolean(this.dragging)) {
+        if (t.code === "ArrowDown")
+          t.preventDefault(), this.moveDraggedItemDown();
+        else if (t.code === "ArrowUp")
+          t.preventDefault(), this.moveDraggedItemUp();
+        else if (t.code === "Space" || t.code === "Enter") {
+          const s = t.composedPath()[0];
+          s != null && s.classList.contains("resource-list-item__drag-handle") || (t.preventDefault(), this.stopDrag(this.dragging));
+        }
+      }
+    };
+  }
+  componentDidLoad() {
+    this.observeSlotChanges(), this.collectItems(), this.setupControllingElement(), this.setItemAllowDragState(), this.setupDragDrop(), this.setSectionSpacingAndSeparator();
+  }
+  componentDidRender() {
+    this.setupDragDrop();
+  }
+  disconnectedCallback() {
+    var e, t, s;
+    (e = this.sortable) == null || e.destroy(), (t = this.observer) == null || t.disconnect(), (s = this.controllingElement) == null || s.removeEventListener("keydown", this.onKeyDown);
+  }
+  observeSlotChanges() {
+    this.observer = new MutationObserver(() => {
+      this.collectItems(), this.setItemAllowDragState(), this.setSectionSpacingAndSeparator();
+    }), this.observer.observe(this.el, {
+      childList: !0,
+      characterData: !0,
+      subtree: !0
+    });
+  }
+  watchAllowDrag() {
+    this.setItemAllowDragState(), this.setupDragDrop();
+  }
+  async resetFocus() {
+    var e;
+    this.focusedIndex = 0, this.removeItemsFromTabOrder(), this.enableItemFocus(this.items[0]), Boolean(this.controllingElement) && ((e = this.items[0]) == null || e.setAttribute("aria-selected", "true"));
+  }
+  collectItems() {
+    var e;
+    this.items = Array.from(this.el.querySelectorAll("swirl-resource-list-item, swirl-resource-list-file-item, [data-resource-list-item]")).filter((t) => t.isConnected), this.sections = Array.from(this.el.querySelectorAll("swirl-resource-list-section")).filter((t) => t.isConnected), this.removeItemsFromTabOrder(), this.enableItemFocus(this.items[this.focusedIndex]), Boolean(this.controllingElement) && ((e = this.items[0]) == null || e.setAttribute("aria-selected", "true"));
+  }
+  setupControllingElement() {
+    !Boolean(this.controllingElement) || (this.controllingElement.setAttribute("aria-controls", this.listId), this.controllingElement.setAttribute("role", "combobox"), this.controllingElement.setAttribute("aria-autocomplete", "list"), this.controllingElement.addEventListener("keydown", this.onKeyDown));
+  }
+  getItemIndex(e) {
+    return this.items.map((t) => t).findIndex((t) => t === e);
+  }
+  removeItemsFromTabOrder() {
+    this.semantics === "grid" && this.items.forEach((e) => {
+      const t = e == null ? void 0 : e.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]"), s = e == null ? void 0 : e.querySelector(".resource-list-item__drag-handle");
+      Boolean(this.controllingElement) && e.setAttribute("aria-selected", "false"), t == null || t.setAttribute("tabIndex", "-1"), s == null || s.setAttribute("tabIndex", "-1");
+    });
+  }
+  setItemAllowDragState() {
+    this.allowDrag ? this.items.filter((e) => this.sections.every((t) => !t.contains(e))).forEach((e) => {
+      e.setAttribute("allow-drag", "true"), e.addEventListener("toggleDrag", this.toggleDrag);
+    }) : this.items.forEach((e) => {
+      e.removeAttribute("allow-drag"), e.removeEventListener("toggleDrag", this.toggleDrag);
+    });
+  }
+  setupDragDrop() {
+    Boolean(this.sortable) && this.sortable.destroy(), this.allowDrag && (this.sortable = h.create(this.gridEl, {
+      animation: 150,
+      draggable: "swirl-resource-list-item",
+      dragClass: "swirl-resource-list-item--drag",
+      handle: ".resource-list-item__drag-handle",
+      onEnd: (e) => {
+        this.itemDrop.emit({
+          item: e.item,
+          oldIndex: e.oldDraggableIndex,
+          newIndex: e.newDraggableIndex
+        });
+      }
+    }));
+  }
+  enableItemFocus(e, t) {
+    if (!Boolean(e) || Boolean(this.controllingElement))
+      return;
+    const s = e.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]"), i = e.querySelector(".resource-list-item__drag-handle");
+    Boolean(i) && i.setAttribute("tabIndex", "0"), Boolean(s) && (s.setAttribute("tabIndex", "0"), t && !Boolean(this.controllingElement) && s.focus());
+  }
+  focusItemAtIndex(e) {
+    this.removeItemsFromTabOrder();
+    const t = this.items[e];
+    !Boolean(t) || !t.isConnected || (this.enableItemFocus(t, !Boolean(this.controllingElement)), Boolean(this.controllingElement) && (t.setAttribute("aria-selected", "true"), t.scrollIntoView({ block: "nearest" })), this.focusedIndex = e);
+  }
+  moveDraggedItemDown() {
+    const e = this.dragging.nextElementSibling;
+    !Boolean(e) || (e.after(this.dragging), this.collectItems(), this.focusItemAtIndex(this.getItemIndex(this.dragging)), this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`);
+  }
+  moveDraggedItemUp() {
+    const e = this.dragging.previousElementSibling;
+    !Boolean(e) || (e.before(this.dragging), this.collectItems(), this.focusItemAtIndex(this.getItemIndex(this.dragging)), this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`);
+  }
+  setSectionSpacingAndSeparator() {
+    this.sections.forEach((e, t) => {
+      var s;
+      t === 0 && ((s = e.previousElementSibling) == null ? void 0 : s.tagName) !== "SWIRL-RESOURCE-LIST-ITEM" && (e.hasSeparator = !1), e.spacing = this.spacing;
+    });
+  }
+  render() {
+    var e, t, s, i, o, n;
+    return r(c, { key: "b6b5c57cd6b804e8a291f45dcc9f918ca307c45b", onKeyDown: this.onKeyDown }, r("swirl-visually-hidden", { key: "3509117ca4e73cc4feaf30e204531a931d75ebab", role: "alert" }, this.assistiveText), r("swirl-box", { key: "7daef9d639a894f852c3e05b5f5395e0f7e24457", paddingBlockEnd: (e = this.paddingBlockEnd) != null ? e : this.padding, paddingBlockStart: (t = this.paddingBlockStart) != null ? t : this.padding, paddingInlineEnd: (i = (s = this.paddingInlineEnd) != null ? s : this.padding) != null ? i : "8", paddingInlineStart: (n = (o = this.paddingInlineStart) != null ? o : this.padding) != null ? n : "8" }, r("swirl-stack", { key: "58f9742215c325be3039b10a07acccff90d6ed11", "aria-label": this.label, class: "resource-list", id: this.listId, ref: (a) => this.gridEl = a, role: this.semantics, spacing: this.spacing }, r("slot", { key: "37c212d102a2f9b35f38cb62341345e5da12036b" }))));
+  }
+  get el() {
+    return g(this);
+  }
+  static get watchers() {
+    return {
+      allowDrag: [{
+        watchAllowDrag: 0
+      }]
+    };
+  }
+};
+I.style = u();
+export {
+  I as swirl_resource_list
+};

package/dist/swirl-search.entry.1469f54d.js

@@ -0,0 +1,51 @@
+import { r as i, c as r, h as a, H as t } from "./index.0118a769.js";
+import { c } from "./index-orsBiyT_.fc4357c3.js";
+import { D as h } from "./media-query.service-CCYT6DU8.f0931fdc.js";
+import "react";
+import "react-dom";
+import "./utils-CCck-DTo.e4e43b6a.js";
+const o = () => ".sc-swirl-search-h{display:flex;width:100%}.sc-swirl-search-h *.sc-swirl-search{box-sizing:border-box}.search.sc-swirl-search{position:relative;display:flex;width:100%}.search--variant-outline.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent;box-shadow:inset 0 0 0 var(--s-border-width-default) var(--s-border-strong)}.search--variant-ghost.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent}.search--disabled.sc-swirl-search .search__icon.sc-swirl-search{color:var(--s-icon-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::placeholder{color:var(--s-text-disabled)}.search__icon.sc-swirl-search{position:absolute;top:50%;left:var(--s-space-12);display:inline-flex;width:1.5rem;height:1.5rem;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__icon.sc-swirl-search{width:1.25rem;height:1.25rem}}.search__input.sc-swirl-search{width:100%;height:2.5rem;padding-top:var(--s-space-8);padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));border:none;border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--s-surface-raised-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.search__input.sc-swirl-search:focus:not(:focus-visible){outline:none}.search__input.sc-swirl-search:focus-visible{outline-color:var(--s-focus-default)}.search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::-webkit-search-decoration,.search__input.sc-swirl-search::-webkit-search-cancel-button,.search__input.sc-swirl-search::-webkit-search-results-button,.search__input.sc-swirl-search::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.search__input.sc-swirl-search:not(:-moz-placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}.search__input.sc-swirl-search:not(:placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__input.sc-swirl-search{height:2.25rem;padding-left:calc(var(--s-space-8) + 1.5rem + var(--s-space-8));font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.search__clear-button.sc-swirl-search{position:absolute;top:50%;right:var(--s-space-12);display:none;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer;transform:translateY(-50%)}", l = class {
+  constructor(e) {
+    i(this, e), this.clear = r(this, "clear", 7), this.inputBlur = r(this, "inputBlur", 7), this.inputFocus = r(this, "inputFocus", 7), this.inputInput = r(this, "inputInput", 7), this.valueChange = r(this, "valueChange", 7), this.clearButtonLabel = "Clear search term", this.placeholder = "Search \u2026", this.variant = "filled", this.clearable = !0, this.mediaQueryUnsubscribe = () => {
+    }, this.handleClear = () => {
+      this.input.value = "", this.input.focus(), this.valueChange.emit(""), this.clear.emit();
+    }, this.onBlur = (s) => {
+      this.inputBlur.emit(s);
+    }, this.onChange = (s) => {
+      this.valueChange.emit(s.target.value);
+    }, this.onFocus = (s) => {
+      this.inputFocus.emit(s);
+    }, this.onInput = (s) => {
+      this.inputInput.emit(s.target.value);
+    };
+  }
+  componentDidLoad() {
+    this.mediaQueryUnsubscribe = h.subscribe((e) => {
+      this.forceIconProps(e);
+    }), this.autoFocus && setTimeout(() => {
+      this.input.focus();
+    });
+  }
+  disconnectedCallback() {
+    this.mediaQueryUnsubscribe();
+  }
+  forceIconProps(e) {
+    if (!Boolean(this.iconEl))
+      return;
+    const s = this.iconEl.children[0];
+    s == null || s.setAttribute("size", e ? "20" : "24");
+  }
+  onKeyDown(e) {
+    (e.code === "KeyK" || e.code === "Slash") && (e.ctrlKey || e.metaKey) && this.input.focus();
+  }
+  render() {
+    const e = c("search", `search--variant-${this.variant}`, {
+      "search--disabled": this.disabled
+    });
+    return a(t, { key: "0f630711e4962a8fd678a4fefe295fa3c515c056" }, a("span", { key: "8d5be9748521ce0010da5064ffe92a191e7e4f42", class: e, ref: (s) => this.iconEl = s }, a("swirl-icon-search", { key: "2967fea8aa9642d43361a488a8dd66b724348949", "aria-hidden": "true", class: "search__icon" }), a("input", { key: "3b4c4dfe8545468ee325071dfc6791af187700af", "aria-disabled": this.disabled ? "true" : void 0, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (s) => this.input = s, type: "search", value: this.value }), !this.disabled && this.clearable && a("button", { key: "3860feb2b8bbdcf3460ffee9dcfd7dc7d5519137", "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.handleClear, type: "button" }, a("swirl-icon-cancel", { key: "cea745efe5b8abb5cfa16d69463a9ce9a01bede9" }))));
+  }
+};
+l.style = o();
+export {
+  l as swirl_search
+};

package/dist/swirl-select.entry.ae3a8da3.js

@@ -0,0 +1,94 @@
+import { r as d, c as n, h as t, H as p, g as u } from "./index.0118a769.js";
+import { c as w } from "./index-orsBiyT_.fc4357c3.js";
+import { q as f } from "./utils-CCck-DTo.e4e43b6a.js";
+import "react";
+import "react-dom";
+const b = () => '.sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content),.select.sc-swirl-select .sc-swirl-select [part~="popover__content"]{margin-top:var(--s-space-16)}@media (min-width: 768px){.select.sc-swirl-select .sc-swirl-select::part(popover__scroll-container){padding-top:0}}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content),.select--placement-top-start.sc-swirl-select .sc-swirl-select [part~="popover__content"]{margin-top:-2.25rem}.select--multi.sc-swirl-select .select__input.sc-swirl-select{position:absolute;width:100%;height:100%;pointer-events:none;opacity:0}.select--multi.sc-swirl-select .select__multi-select-values.sc-swirl-select{display:flex}.select--disabled.sc-swirl-select .select__input.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{transform:translateY(-50%)}.select--standalone.sc-swirl-select{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.select--standalone.sc-swirl-select .select__indicator.sc-swirl-select{position:relative;top:auto;right:auto;cursor:pointer;transform:none}.select--standalone.sc-swirl-select .select__input.sc-swirl-select{padding-right:var(--s-space-8);font-weight:var(--s-font-weight-medium);cursor:pointer}.select--standalone.sc-swirl-select .select__value-container.sc-swirl-select{width:-webkit-min-content;width:-moz-min-content;width:min-content}.select--search-loading.sc-swirl-select .select__search-input.sc-swirl-select{padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8))}.select__resize-helper.sc-swirl-select{display:block;width:auto;height:0;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));padding-right:var(--s-space-8);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left;white-space:pre;white-space:pre;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;opacity:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__resize-helper.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__input.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.25rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__input.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__multi-select-values.sc-swirl-select{display:none;overflow:hidden;width:100%;min-height:1.25rem;padding-right:calc(1.5rem + var(--s-space-8));flex-wrap:wrap;flex-shrink:0;gap:var(--s-space-8)}.select__multi-select-values.sc-swirl-select .sc-swirl-select::part(tag),.select__multi-select-values.sc-swirl-select .sc-swirl-select [part~="tag"]{height:1.25rem;padding:0 var(--s-space-4)}.select__indicator.sc-swirl-select{position:absolute;top:50%;right:0;display:inline-flex;color:var(--s-icon-default);transform:translateY(calc(-50% - var(--s-space-8)))}.select__search.sc-swirl-select{position:relative;display:flex;width:100%;padding:0.0625rem var(--s-space-8);border-bottom:0.0625rem solid var(--s-border-default);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.select__search.sc-swirl-select{position:sticky;z-index:1;top:0;padding-top:var(--s-space-8);padding-right:0.0625rem;padding-left:0.0625rem}}.select__search-icon.sc-swirl-select{position:absolute;top:50%;left:calc(var(--s-space-8) * 2);display:inline-flex;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 768px){.select__search-icon.sc-swirl-select{left:var(--s-space-12);margin-top:var(--s-space-4);padding:0.0625rem}}.select__search-input.sc-swirl-select{width:100%;height:2.5rem;padding-right:var(--s-space-12);padding-left:calc(var(--s-space-12) + 1.25rem + var(--s-space-8));align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.select__search-input.sc-swirl-select:focus:not(:focus-visible){outline:none}.select__search-input.sc-swirl-select:focus-visible{outline-color:var(--s-focus-default)}.select__search-input.sc-swirl-select::-moz-placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::-webkit-search-decoration,.select__search-input.sc-swirl-select::-webkit-search-cancel-button,.select__search-input.sc-swirl-select::-webkit-search-results-button,.select__search-input.sc-swirl-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__search-input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__search-spinner.sc-swirl-select{position:absolute;top:50%;right:var(--s-space-12);display:inline-flex;transform:translateY(-50%)}@media (min-width: 768px){.select__search-spinner.sc-swirl-select{margin-top:var(--s-space-4)}}.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) 0}.select__empty-list-label.sc-swirl-select:not(:only-child){display:none}@media (min-width: 768px){.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) var(--s-space-8)}}', v = class {
+  constructor(s) {
+    d(this, s), this.searchChange = n(this, "searchChange", 7), this.valueChange = n(this, "valueChange", 7), this.allowDeselect = !0, this.emptyListLabel = "No results found.", this.searchInputLabel = "Search options", this.selectId = Math.round(Math.random() * 1e6).toString(), this.options = [], this.select = (e) => {
+      e.stopPropagation(), this.value = e.detail, this.multiSelect || this.swirlPopover.close();
+    }, this.unselectOption = (e) => {
+      !this.allowDeselect || (this.value = this.value.filter((l) => l !== e));
+    }, this.onSlotChange = () => {
+      this.updateOptions();
+    }, this.onOpen = (e) => {
+      var l, a;
+      this.placement = (l = e.detail.position) == null ? void 0 : l.placement, this.open = !0, this.withSearch && Boolean(this.searchInput) ? this.searchInput.focus() : (a = this.optionList.querySelector('[tabIndex="0"]')) == null || a.focus();
+    }, this.onClose = () => {
+      Boolean(this.searchInput) && (this.searchInput.value = "", this.searchChange.emit("")), this.open = !1, this.input.focus();
+    }, this.onKeyDown = (e) => {
+      var l;
+      if (e.code === "Space" || e.code === "Enter") {
+        if (e.target === this.searchInput)
+          return;
+        e.preventDefault(), this.swirlPopover.open(this.el);
+      } else
+        e.code === "ArrowDown" && e.target === this.searchInput && ((l = this.optionList.querySelector('[tabIndex="0"]')) == null || l.focus());
+    }, this.onSearchInput = (e) => {
+      this.searchChange.emit(e.target.value);
+    };
+  }
+  componentWillLoad() {
+    queueMicrotask(() => {
+      this.updateOptions(), this.observeSlotChanges();
+    });
+  }
+  disconnectedCallback() {
+    var s;
+    (s = this.observer) == null || s.disconnect();
+  }
+  onWindowFocusIn(s) {
+    s.target === this.el.querySelector("input") && s.stopImmediatePropagation();
+  }
+  onValueChange(s, e) {
+    (s == null ? void 0 : s.length) === (e == null ? void 0 : e.length) && (s == null ? void 0 : s.every((a) => e == null ? void 0 : e.includes(a))) || this.valueChange.emit(this.value);
+  }
+  observeSlotChanges() {
+    this.observer = new MutationObserver(() => {
+      this.updateOptions();
+    }), this.observer.observe(this.el, {
+      childList: !0,
+      subtree: !0
+    });
+  }
+  updateOptions() {
+    this.options = f(this.el, "swirl-option-list-item");
+  }
+  getValueLabel() {
+    var s;
+    return Boolean(this.value) ? (s = this.value) == null ? void 0 : s.map((e) => {
+      var l;
+      return (l = this.options.find((a) => a.value === e)) == null ? void 0 : l.label;
+    }).join(", ") : "";
+  }
+  render() {
+    var c, r;
+    const s = this.getValueLabel(), e = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, l = this.el.closest("swirl-form-control"), a = this.standalone ? [-8, 0] : (l == null ? void 0 : l.inline) || (l == null ? void 0 : l.labelPosition) === "outside" ? [0, -12] : [0, -16], o = w("select", `select--placement-${this.placement}`, {
+      "select--disabled": this.disabled,
+      "select--inline": this.inline,
+      "select--multi": this.multiSelect,
+      "select--search-loading": this.searchLoading,
+      "select--standalone": this.standalone
+    });
+    return t(p, { key: "88ac09bff06fdd7dccafddd34e6d7ba69bd93c9d", onKeyDown: this.onKeyDown }, t("div", { key: "2a8070b88ce64c08cf1219f88b82fd469faf724d", class: o }, t("swirl-popover-trigger", { key: "e789402316c6f30a05208e2f7275c8d1bd90c17a", swirlPopover: this.swirlPopover, setAriaAttributes: !1 }, t("swirl-stack", { key: "22af16eb09ce25f70924bf625b82810f31aa52bb", class: "select__value-container" }, this.standalone && t("span", { key: "ce70e26b8243f1cd6e43ccb49fee515990ab2a24", "aria-hidden": "true", class: "select__resize-helper" }, s), t("input", { key: "e4b7b281fbf902663dfad9feaca077176f7836ea", "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": e, class: "select__input", disabled: this.disabled, readOnly: !0, ref: (i) => this.input = i, type: "text", value: s }))), t("span", { key: "bec844bb1459cfa415b50df2d40d814d6610a90d", class: "select__multi-select-values" }, (r = (c = this.value) == null ? void 0 : c.map((i) => this.options.find((h) => h.value === i))) == null ? void 0 : r.map((i) => t("swirl-tag", {
+      "aria-hidden": "true",
+      label: i == null ? void 0 : i.label,
+      onRemove: () => this.unselectOption(i == null ? void 0 : i.value),
+      removable: !this.disabled && this.allowDeselect && !(i != null && i.disabled)
+    }))), t("span", { key: "976fd76951b2192a4c7124e26afb20f689932e87", class: "select__indicator" }, this.open ? t("swirl-icon-expand-less", { size: this.standalone ? 20 : 24 }) : t("swirl-icon-expand-more", { size: this.standalone ? 20 : 24 })), t("swirl-popover", { key: "90796c1ca7e443048f2b2c54aed91ad28d462ab0", animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: a, onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (i) => this.swirlPopover = i, useContainerWidth: this.standalone ? !1 : "swirl-form-control" }, this.withSearch && t("div", { key: "c8c9f40e9641eb780c64a4e49d40ce6f5ee9b466", class: "select__search" }, t("swirl-icon-search", { key: "2051830347b627817cca0dde16821ce79227270e", class: "select__search-icon", size: 20 }), t("input", { key: "88111e05006f06afe8b71ee43119078a958ba40f", "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (i) => this.searchInput = i, type: "search" }), this.searchLoading && t("swirl-spinner", { key: "96962823d98b2cc4fdc6bdd329222d602891bed3", class: "select__search-spinner", size: "s" })), t("swirl-option-list", { key: "f644de5808ea7be0b909f5e4e82dd57211737670", allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (i) => this.optionList = i, value: this.value }, !this.searchLoading && t("div", { key: "00f486c5baf4f2467f87ba98044511e0ba91260c", "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, t("swirl-text", { key: "290262f91fed06b1dde6764a10f71cc6458c1fa0", color: "subdued", weight: "medium" }, this.emptyListLabel)), t("slot", { key: "d78c0d7402459d223a7217533ca2a9a2ee1a37aa", onSlotchange: this.onSlotChange })))));
+  }
+  get el() {
+    return u(this);
+  }
+  static get watchers() {
+    return {
+      value: [{
+        onValueChange: 0
+      }]
+    };
+  }
+};
+v.style = b();
+export {
+  v as swirl_select
+};

package/dist/swirl-separator.entry.c770c2ae.js

@@ -0,0 +1,29 @@
+import { r as e, h as r, F as s, H as i } from "./index.0118a769.js";
+import { c as l } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const n = () => ":host{display:flex;width:100%;align-items:center;gap:var(--s-space-8)}:host *{box-sizing:border-box}:host(.separator--orientation-vertical){display:inline-flex;width:auto;flex-direction:column}:host(.separator--orientation-vertical) .separator__line{width:var(--s-border-width-default);height:100%;min-height:1.125rem}:host(.separator--color-critical) .separator__line{background-color:var(--s-border-critical)}:host(.separator--color-critical) .separator__label{color:var(--s-text-subdued)}:host(.separator--color-strong) .separator__line{background-color:var(--s-border-strong)}:host(.separator--color-strong) .separator__label{color:var(--s-text-subdued)}:host(.separator--color-highlight) .separator__line{background-color:var(--s-border-highlight)}:host(.separator--color-highlight) .separator__label{color:var(--s-text-highlight)}.separator__line{display:block;width:100%;height:var(--s-border-width-default);background-color:var(--s-border-on-translucent)}.separator__label{flex-shrink:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;font-size:var(--s-font-size-sm);color:var(--s-text-disabled)}", c = class {
+  constructor(a) {
+    e(this, a), this.borderColor = "default", this.color = "default", this.orientation = "horizontal", this.semantics = "separator", this.spacing = "8";
+  }
+  componentWillLoad() {
+    this.forceColor();
+  }
+  forceColor() {
+    this.borderColor !== "default" && (console.warn('[Swirl] The "borderColor" prop of swirl-separator is deprecated and will be removed with the next major release. Please use the "color" prop to achieve the same result.'), this.color = this.borderColor);
+  }
+  render() {
+    const a = this.orientation === "horizontal" ? {
+      paddingTop: `var(--s-space-${this.spacing})`,
+      paddingBottom: `var(--s-space-${this.spacing})`
+    } : {
+      paddingRight: `var(--s-space-${this.spacing})`,
+      paddingLeft: `var(--s-space-${this.spacing})`
+    }, t = l("separator", `separator--color-${this.color}`, `separator--orientation-${this.orientation}`), o = this.semantics === "separator" ? { "aria-orientation": this.orientation } : {};
+    return r(i, { key: "23acb3a29638b92737838e75a54d7616e6c9150e", ...o, class: t, role: this.semantics, style: a }, r("span", { key: "3ebf80f47fb36438403551f560db91ecf7d7e559", class: "separator__line" }), this.label && r(s, { key: "84ac7960ba714ab27559751c11bd7c4b56ac3176" }, r("span", { key: "6f8dc3ad3bde938789e28ad05c67da657262a4d1", class: "separator__label" }, this.label), r("span", { key: "63ddb77ea887a890bb1731d12a939783b592e21a", class: "separator__line" })));
+  }
+};
+c.style = n();
+export {
+  c as swirl_separator
+};