@getflip/swirl-components-react 0.458.0 → 0.459.0

package/dist/swirl-resource-list.entry.b913519d.js

@@ -0,0 +1,158 @@
+import { r as l, c as g, h as r, H as d, g as c } from "./index.8d5b0a5d.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(t) {
+    l(this, t), this.itemDrop = g(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 = (e) => {
+      const s = e.detail;
+      Boolean(this.dragging) ? this.stopDrag(s) : this.startDrag(s);
+    }, this.startDrag = (e) => {
+      this.dragging = e, this.draggingStartIndex = this.getItemIndex(this.dragging), e.setAttribute("dragging", "true");
+      const s = this.getItemIndex(this.dragging);
+      this.focusItemAtIndex(s), this.assistiveText = this.assistiveTextItemGrabbed;
+    }, this.stopDrag = (e) => {
+      const s = this.getItemIndex(this.dragging);
+      this.dragging = void 0, e.removeAttribute("dragging"), this.assistiveText = `${this.assistiveTextItemMoved} ${s + 1}`, this.itemDrop.emit({ item: e, oldIndex: this.draggingStartIndex, newIndex: s }), this.draggingStartIndex = void 0;
+    }, this.onKeyDown = (e) => {
+      if (this.semantics === "grid" && !Boolean(this.dragging))
+        if (e.code === "ArrowDown")
+          e.preventDefault(), this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);
+        else if (e.code === "ArrowUp") {
+          e.preventDefault();
+          const s = this.focusedIndex === 0 ? this.items.length - 1 : this.focusedIndex - 1;
+          this.focusItemAtIndex(s);
+        } else if (e.code === "Enter" && Boolean(this.controllingElement)) {
+          const s = this.items[this.focusedIndex];
+          if (!Boolean(s) || !s.isConnected)
+            return;
+          e.stopPropagation(), e.preventDefault(), s.click();
+        } else
+          e.code === "Home" ? (e.preventDefault(), this.focusItemAtIndex(0)) : e.code === "End" && (e.preventDefault(), this.focusItemAtIndex(this.items.length - 1));
+      if (Boolean(this.dragging)) {
+        if (e.code === "ArrowDown")
+          e.preventDefault(), this.moveDraggedItemDown();
+        else if (e.code === "ArrowUp")
+          e.preventDefault(), this.moveDraggedItemUp();
+        else if (e.code === "Space" || e.code === "Enter") {
+          const s = e.composedPath()[0];
+          s != null && s.classList.contains("resource-list-item__drag-handle") || (e.preventDefault(), this.stopDrag(this.dragging));
+        }
+      }
+    };
+  }
+  componentDidLoad() {
+    this.observeSlotChanges(), this.collectItems(), this.setupControllingElement(), this.setItemAllowDragState(), this.setupDragDrop(), this.setSectionSpacingAndSeparator();
+  }
+  componentDidRender() {
+    this.setupDragDrop();
+  }
+  disconnectedCallback() {
+    var t, e, s;
+    (t = this.sortable) == null || t.destroy(), (e = this.observer) == null || e.disconnect(), (s = this.controllingElement) == null || s.removeEventListener("keydown", this.onKeyDown), this.removeToggleDragListeners();
+  }
+  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 t;
+    this.focusedIndex = 0, this.removeItemsFromTabOrder(), this.enableItemFocus(this.items[0]), Boolean(this.controllingElement) && ((t = this.items[0]) == null || t.setAttribute("aria-selected", "true"));
+  }
+  collectItems() {
+    var t;
+    this.removeToggleDragListeners(), this.items = Array.from(this.el.querySelectorAll("swirl-resource-list-item, swirl-resource-list-file-item, [data-resource-list-item]")).filter((e) => e.isConnected), this.sections = Array.from(this.el.querySelectorAll("swirl-resource-list-section")).filter((e) => e.isConnected), this.removeItemsFromTabOrder(), this.enableItemFocus(this.items[this.focusedIndex]), Boolean(this.controllingElement) && ((t = this.items[0]) == null || t.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(t) {
+    return this.items.map((e) => e).findIndex((e) => e === t);
+  }
+  removeItemsFromTabOrder() {
+    this.semantics === "grid" && this.items.forEach((t) => {
+      const e = t == null ? void 0 : t.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]"), s = t == null ? void 0 : t.querySelector(".resource-list-item__drag-handle");
+      Boolean(this.controllingElement) && t.setAttribute("aria-selected", "false"), e == null || e.setAttribute("tabIndex", "-1"), s == null || s.setAttribute("tabIndex", "-1");
+    });
+  }
+  removeToggleDragListeners() {
+    var t;
+    (t = this.items) == null || t.forEach((e) => {
+      e.removeEventListener("toggleDrag", this.toggleDrag);
+    });
+  }
+  setItemAllowDragState() {
+    this.allowDrag ? this.items.filter((t) => this.sections.every((e) => !e.contains(t))).forEach((t) => {
+      t.setAttribute("allow-drag", "true"), t.addEventListener("toggleDrag", this.toggleDrag);
+    }) : this.items.forEach((t) => {
+      t.removeAttribute("allow-drag"), t.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: (t) => {
+        this.itemDrop.emit({
+          item: t.item,
+          oldIndex: t.oldDraggableIndex,
+          newIndex: t.newDraggableIndex
+        });
+      }
+    }));
+  }
+  enableItemFocus(t, e) {
+    if (!Boolean(t) || Boolean(this.controllingElement))
+      return;
+    const s = t.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]"), i = t.querySelector(".resource-list-item__drag-handle");
+    Boolean(i) && i.setAttribute("tabIndex", "0"), Boolean(s) && (s.setAttribute("tabIndex", "0"), e && !Boolean(this.controllingElement) && s.focus());
+  }
+  focusItemAtIndex(t) {
+    this.removeItemsFromTabOrder();
+    const e = this.items[t];
+    !Boolean(e) || !e.isConnected || (this.enableItemFocus(e, !Boolean(this.controllingElement)), Boolean(this.controllingElement) && (e.setAttribute("aria-selected", "true"), e.scrollIntoView({ block: "nearest" })), this.focusedIndex = t);
+  }
+  moveDraggedItemDown() {
+    const t = this.dragging.nextElementSibling;
+    !Boolean(t) || (t.after(this.dragging), this.collectItems(), this.focusItemAtIndex(this.getItemIndex(this.dragging)), this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`);
+  }
+  moveDraggedItemUp() {
+    const t = this.dragging.previousElementSibling;
+    !Boolean(t) || (t.before(this.dragging), this.collectItems(), this.focusItemAtIndex(this.getItemIndex(this.dragging)), this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`);
+  }
+  setSectionSpacingAndSeparator() {
+    this.sections.forEach((t, e) => {
+      var s;
+      e === 0 && ((s = t.previousElementSibling) == null ? void 0 : s.tagName) !== "SWIRL-RESOURCE-LIST-ITEM" && (t.hasSeparator = !1), t.spacing = this.spacing;
+    });
+  }
+  render() {
+    var t, e, s, i, o, n;
+    return r(d, { key: "7e7a38cb48011dcabb1d4bccffdcac3d4c8be109", onKeyDown: this.onKeyDown }, r("swirl-visually-hidden", { key: "1fe37b20ae1fa8e819774dbe79a018cf6f99ab91", role: "alert" }, this.assistiveText), r("swirl-box", { key: "f22f7d9905888c0ca6941bc4cd073604901fb865", paddingBlockEnd: (t = this.paddingBlockEnd) != null ? t : this.padding, paddingBlockStart: (e = this.paddingBlockStart) != null ? e : 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: "f0f190c2d934851f78b54caa31d90d13db62f355", "aria-label": this.label, class: "resource-list", id: this.listId, ref: (a) => this.gridEl = a, role: this.semantics, spacing: this.spacing }, r("slot", { key: "be2a19b002fe1d89760f9812c3efa8c91c5bc722" }))));
+  }
+  get el() {
+    return c(this);
+  }
+  static get watchers() {
+    return {
+      allowDrag: [{
+        watchAllowDrag: 0
+      }]
+    };
+  }
+};
+I.style = u();
+export {
+  I as swirl_resource_list
+};

package/dist/swirl-search.entry.29de5e30.js

@@ -0,0 +1,51 @@
+import { r as i, c as r, h as a, H as t } from "./index.8d5b0a5d.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: "381e7cebfedbb7457577359d2e313f4f1aa3a5e3" }, a("span", { key: "1e82a83ed7e7198036e94cd967bd9aa85f8afc90", class: e, ref: (s) => this.iconEl = s }, a("swirl-icon-search", { key: "b34f04e136625da4e0dedaf355ab7cc10e0f097a", "aria-hidden": "true", class: "search__icon" }), a("input", { key: "fe90612f9c9d81f94cb937439b1b5cfa4c97d33c", "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: "bd60c7985bc69b589e7427230016a634dc93e6cd", "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.handleClear, type: "button" }, a("swirl-icon-cancel", { key: "b69342dc3a4ef43940a9abb038d2f7e1d4e8b508" }))));
+  }
+};
+l.style = o();
+export {
+  l as swirl_search
+};

package/dist/swirl-select.entry.9b904632.js

@@ -0,0 +1,137 @@
+import { r as d, c as o, h as a, H as p, g as u } from "./index.8d5b0a5d.js";
+import { c as f } from "./index-orsBiyT_.fc4357c3.js";
+import { q as w } from "./utils-CCck-DTo.e4e43b6a.js";
+import "react";
+import "react-dom";
+const m = () => '.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)}}', b = class {
+  constructor(s) {
+    d(this, s), this.searchChange = o(this, "searchChange", 7), this.valueChange = o(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.typeaheadBuffer = "", this.select = (e) => {
+      e.stopPropagation(), this.value = e.detail, this.multiSelect || this.swirlPopover.close();
+    }, this.unselectOption = (e) => {
+      !this.allowDeselect || (this.value = this.value.filter((t) => t !== e));
+    }, this.onSlotChange = () => {
+      this.updateOptions();
+    }, this.onOpen = (e) => {
+      var t, l;
+      this.placement = (t = e.detail.position) == null ? void 0 : t.placement, this.open = !0, this.typeaheadBuffer = "", clearTimeout(this.typeaheadTimeout), this.withSearch && Boolean(this.searchInput) ? this.searchInput.focus() : (l = this.optionList.querySelector('[tabIndex="0"]')) == null || l.focus();
+    }, this.onClose = () => {
+      Boolean(this.searchInput) && (this.searchInput.value = "", this.searchChange.emit("")), this.typeaheadBuffer = "", clearTimeout(this.typeaheadTimeout), this.open = !1, this.input.focus();
+    }, this.onKeyDown = (e) => {
+      var t;
+      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 ? (t = this.optionList.querySelector('[tabIndex="0"]')) == null || t.focus() : this.isTypeaheadKey(e) && (e.preventDefault(), e.stopPropagation(), this.handleTypeahead(e.key));
+    }, this.onSearchInput = (e) => {
+      this.searchChange.emit(e.target.value);
+    };
+  }
+  componentWillLoad() {
+    queueMicrotask(() => {
+      this.updateOptions(), this.observeSlotChanges();
+    });
+  }
+  disconnectedCallback() {
+    var s;
+    (s = this.observer) == null || s.disconnect(), clearTimeout(this.typeaheadTimeout);
+  }
+  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((l) => e == null ? void 0 : e.includes(l))) || this.valueChange.emit(this.value);
+  }
+  observeSlotChanges() {
+    this.observer = new MutationObserver(() => {
+      this.updateOptions();
+    }), this.observer.observe(this.el, {
+      childList: !0,
+      subtree: !0
+    });
+  }
+  updateOptions() {
+    this.options = w(this.el, "swirl-option-list-item");
+  }
+  isTypeaheadKey(s) {
+    return s.target === this.searchInput || s.metaKey || s.ctrlKey || s.altKey ? !1 : s.key.length === 1 && s.key !== " ";
+  }
+  handleTypeahead(s) {
+    const e = s.toLowerCase();
+    if (clearTimeout(this.typeaheadTimeout), this.typeaheadBuffer.length > 0 && [...this.typeaheadBuffer].every((l) => l === e))
+      this.typeaheadBuffer += e, this.cycleTypeahead(e);
+    else {
+      const l = this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
+      this.typeaheadBuffer = l ? e : this.typeaheadBuffer + e, this.prefixMatchTypeahead(this.typeaheadBuffer) || (this.typeaheadBuffer = e, this.prefixMatchTypeahead(this.typeaheadBuffer));
+    }
+    this.typeaheadTimeout = setTimeout(() => {
+      this.typeaheadBuffer = "";
+    }, 500);
+  }
+  cycleTypeahead(s) {
+    const t = this.options.filter((c) => !c.disabled).filter((c) => {
+      var i;
+      return (i = c.label) == null ? void 0 : i.toLowerCase().startsWith(s);
+    });
+    if (t.length === 0)
+      return;
+    const l = this.getTypeaheadAnchorValue(), n = (t.findIndex((c) => c.value === l) + 1) % t.length;
+    this.applyTypeaheadMatch(t[n]);
+  }
+  prefixMatchTypeahead(s) {
+    const t = this.options.filter((l) => !l.disabled).find((l) => {
+      var r;
+      return (r = l.label) == null ? void 0 : r.toLowerCase().startsWith(s);
+    });
+    return t ? (this.applyTypeaheadMatch(t), !0) : !1;
+  }
+  getTypeaheadAnchorValue() {
+    var s;
+    if (this.open) {
+      const e = this.options.find((t) => t.querySelector('[role="option"][tabindex="0"]'));
+      return e == null ? void 0 : e.value;
+    }
+    return (s = this.value) == null ? void 0 : s[this.value.length - 1];
+  }
+  applyTypeaheadMatch(s) {
+    this.open && this.optionList.focusItemWithValue(s.value);
+  }
+  getValueLabel() {
+    var s;
+    return Boolean(this.value) ? (s = this.value) == null ? void 0 : s.map((e) => {
+      var t;
+      return (t = this.options.find((l) => l.value === e)) == null ? void 0 : t.label;
+    }).join(", ") : "";
+  }
+  render() {
+    var n, c;
+    const s = this.getValueLabel(), e = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, t = this.el.closest("swirl-form-control"), l = this.standalone ? [-8, 0] : (t == null ? void 0 : t.inline) || (t == null ? void 0 : t.labelPosition) === "outside" ? [0, -12] : [0, -16], r = f("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 a(p, { key: "f2a95d11b890125d3956a1b1891d2251857054cf", onKeyDown: this.onKeyDown }, a("div", { key: "191c81be8e90912c99a91dd23f34e7d947a4c508", class: r }, a("swirl-popover-trigger", { key: "a6d63f6a274f2abb03817a77f7ec2ada46a8b6f8", swirlPopover: this.swirlPopover, setAriaAttributes: !1 }, a("swirl-stack", { key: "fa402cf1ee3d55fa7b66ba7c38600b376f561c52", class: "select__value-container" }, this.standalone && a("span", { key: "5be4fdc8fd5fd9bf784e4743b6110c8b72614e6c", "aria-hidden": "true", class: "select__resize-helper" }, s), a("input", { key: "7b905fdc00839dabe49fd98a6ad8a9ee96ddd9a9", "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 }))), a("span", { key: "bf68410880277ec8f003d4c91d2b85f1120e7a5f", class: "select__multi-select-values" }, (c = (n = this.value) == null ? void 0 : n.map((i) => this.options.find((h) => h.value === i))) == null ? void 0 : c.map((i) => a("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)
+    }))), a("span", { key: "b8056b490aa31d23534102fce3a87aeaaa2f0f06", class: "select__indicator" }, this.open ? a("swirl-icon-expand-less", { size: this.standalone ? 20 : 24 }) : a("swirl-icon-expand-more", { size: this.standalone ? 20 : 24 })), a("swirl-popover", { key: "9b81ffdfda79da511877ca3442b5c2b6a845d3e5", animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: l, onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (i) => this.swirlPopover = i, useContainerWidth: this.standalone ? !1 : "swirl-form-control" }, this.withSearch && a("div", { key: "7d6343e334447b20029c5d2f79d06c74dbf85fde", class: "select__search" }, a("swirl-icon-search", { key: "d2c14bae4b51bf6e8e3e17ec79f02f5a76edd6e0", class: "select__search-icon", size: 20 }), a("input", { key: "82492d47f5308694fd9ceaead9f546e3f1429e1d", "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (i) => this.searchInput = i, type: "search" }), this.searchLoading && a("swirl-spinner", { key: "09b9cd07e53694c6df50059ee4b1610ba8f59bc1", class: "select__search-spinner", size: "s" })), a("swirl-option-list", { key: "e71eaad9a8524468579325287225a4e9b264783f", allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (i) => this.optionList = i, value: this.value }, !this.searchLoading && a("div", { key: "7d37ebaf2b218c95541e3ea58cd21fd2079597f4", "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, a("swirl-text", { key: "1c3d20f5bdd5e80d85eb2b3fffff508f6213e3cc", color: "subdued", weight: "medium" }, this.emptyListLabel)), a("slot", { key: "da9dc78a9d2763d32be77552deb946e5ffa26339", onSlotchange: this.onSlotChange })))));
+  }
+  get el() {
+    return u(this);
+  }
+  static get watchers() {
+    return {
+      value: [{
+        onValueChange: 0
+      }]
+    };
+  }
+};
+b.style = m();
+export {
+  b as swirl_select
+};

package/dist/swirl-separator.entry.3fdb6a74.js

@@ -0,0 +1,29 @@
+import { r as e, h as r, F as s, H as i } from "./index.8d5b0a5d.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
+};