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

package/dist/components/swirl-resource-list2.js

@@ -0,0 +1,250 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { S as Sortable } from './sortable.esm.js';
+import { d as defineCustomElement$2 } from './swirl-stack2.js';
+import { d as defineCustomElement$1 } from './swirl-visually-hidden2.js';
+
+const swirlResourceListCss = ".sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource-list-h *.sc-swirl-resource-list{box-sizing:border-box}";
+
+const SwirlResourceList = /*@__PURE__*/ proxyCustomElement(class SwirlResourceList extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.itemDrop = createEvent(this, "itemDrop", 7);
+    this.focusedIndex = 0;
+    this.toggleDrag = (event) => {
+      const item = event.detail;
+      if (Boolean(this.dragging)) {
+        this.stopDrag(item);
+      }
+      else {
+        this.startDrag(item);
+      }
+    };
+    this.startDrag = (item) => {
+      this.dragging = item;
+      this.draggingStartIndex = this.getItemIndex(this.dragging);
+      item.setAttribute("dragging", "true");
+      const index = this.getItemIndex(this.dragging);
+      this.focusItemAtIndex(index);
+      this.assistiveText = this.assistiveTextItemGrabbed;
+    };
+    this.stopDrag = (item) => {
+      const newIndex = this.getItemIndex(this.dragging);
+      this.dragging = undefined;
+      item.removeAttribute("dragging");
+      this.assistiveText = `${this.assistiveTextItemMoved} ${newIndex + 1}`;
+      this.itemDrop.emit({ item, oldIndex: this.draggingStartIndex, newIndex });
+      this.draggingStartIndex = undefined;
+    };
+    this.onKeyDown = (event) => {
+      if (event.code === "ArrowDown") {
+        event.preventDefault();
+        if (!Boolean(this.dragging)) {
+          this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);
+        }
+        else {
+          this.moveDraggedItemDown();
+        }
+      }
+      else if (event.code === "ArrowUp") {
+        event.preventDefault();
+        if (!Boolean(this.dragging)) {
+          const prevIndex = this.focusedIndex === 0
+            ? this.items.length - 1
+            : this.focusedIndex - 1;
+          this.focusItemAtIndex(prevIndex);
+        }
+        else {
+          this.moveDraggedItemUp();
+        }
+      }
+      else if (event.code === "Space" || event.code === "Enter") {
+        const target = event.composedPath()[0];
+        if (Boolean(this.dragging) &&
+          !target?.classList.contains("resource-list-item__drag-handle")) {
+          event.preventDefault();
+          this.stopDrag(this.dragging);
+        }
+      }
+      else if (event.code === "Home") {
+        event.preventDefault();
+        this.focusItemAtIndex(0);
+      }
+      else if (event.code === "End") {
+        event.preventDefault();
+        this.focusItemAtIndex(this.items.length - 1);
+      }
+    };
+    this.allowDrag = undefined;
+    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.label = undefined;
+    this.assistiveText = undefined;
+  }
+  componentDidLoad() {
+    this.observeSlotChanges();
+    this.collectItems();
+    this.setItemAllowDragState();
+    this.setupDragDrop();
+  }
+  componentDidRender() {
+    this.setupDragDrop();
+  }
+  disconnectedCallback() {
+    this.sortable?.destroy();
+    this.observer?.disconnect();
+  }
+  observeSlotChanges() {
+    this.observer = new MutationObserver(() => {
+      this.collectItems();
+      this.setItemAllowDragState();
+    });
+    this.observer.observe(this.el, {
+      childList: true,
+      characterData: true,
+      subtree: true,
+    });
+  }
+  watchAllowDrag() {
+    this.setItemAllowDragState();
+    this.setupDragDrop();
+  }
+  collectItems() {
+    this.items = Array.from(this.el.querySelectorAll("swirl-resource-list-item, swirl-resource-list-file-item")).filter((el) => el.isConnected);
+    this.removeItemsFromTabOrder();
+    this.enableItemFocus(this.items[this.focusedIndex]);
+  }
+  getItemIndex(item) {
+    return this.items.map((i) => i).findIndex((i) => i === item);
+  }
+  removeItemsFromTabOrder() {
+    this.items.forEach((item) => {
+      const focusableEl = item?.querySelector(".resource-list-item__content, .resource-list-file-item");
+      const dragHandle = item?.querySelector(".resource-list-item__drag-handle");
+      focusableEl?.setAttribute("tabIndex", "-1");
+      dragHandle?.setAttribute("tabIndex", "-1");
+    });
+  }
+  setItemAllowDragState() {
+    if (this.allowDrag) {
+      this.items.forEach((item) => {
+        item.setAttribute("allow-drag", "true");
+        item.addEventListener("toggleDrag", this.toggleDrag);
+      });
+    }
+    else {
+      this.items.forEach((item) => {
+        item.removeAttribute("allow-drag");
+        item.removeEventListener("toggleDrag", this.toggleDrag);
+      });
+    }
+  }
+  setupDragDrop() {
+    if (Boolean(this.sortable)) {
+      this.sortable.destroy();
+    }
+    if (!this.allowDrag) {
+      return;
+    }
+    this.sortable = Sortable.create(this.gridEl, {
+      animation: 150,
+      draggable: "swirl-resource-list-item",
+      handle: ".resource-list-item__drag-handle",
+      onEnd: (event) => {
+        this.itemDrop.emit({
+          item: event.item,
+          oldIndex: event.oldDraggableIndex,
+          newIndex: event.newDraggableIndex,
+        });
+      },
+    });
+  }
+  enableItemFocus(item, focus) {
+    if (!Boolean(item)) {
+      return;
+    }
+    const interactiveElement = item.querySelector(".resource-list-item__content, .resource-list-file-item");
+    const dragHandle = item.querySelector(".resource-list-item__drag-handle");
+    if (Boolean(dragHandle)) {
+      dragHandle.setAttribute("tabIndex", "0");
+    }
+    if (!Boolean(interactiveElement)) {
+      return;
+    }
+    interactiveElement.setAttribute("tabIndex", "0");
+    if (focus) {
+      interactiveElement.focus();
+    }
+  }
+  focusItemAtIndex(index) {
+    this.removeItemsFromTabOrder();
+    const item = this.items[index];
+    if (!Boolean(item) || !item.isConnected) {
+      return;
+    }
+    this.enableItemFocus(item, true);
+    this.focusedIndex = index;
+  }
+  moveDraggedItemDown() {
+    const nextSibling = this.dragging.nextElementSibling;
+    if (!Boolean(nextSibling)) {
+      return;
+    }
+    nextSibling.after(this.dragging);
+    this.collectItems();
+    this.focusItemAtIndex(this.getItemIndex(this.dragging));
+    this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`;
+  }
+  moveDraggedItemUp() {
+    const prevSibling = this.dragging.previousElementSibling;
+    if (!Boolean(prevSibling)) {
+      return;
+    }
+    prevSibling.before(this.dragging);
+    this.collectItems();
+    this.focusItemAtIndex(this.getItemIndex(this.dragging));
+    this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`;
+  }
+  render() {
+    return (h(Host, { onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { role: "alert" }, this.assistiveText), h("swirl-stack", { "aria-label": this.label, class: "resource-list", ref: (el) => (this.gridEl = el), role: "grid" }, h("slot", null))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "allowDrag": ["watchAllowDrag"]
+  }; }
+  static get style() { return swirlResourceListCss; }
+}, [6, "swirl-resource-list", {
+    "allowDrag": [4, "allow-drag"],
+    "assistiveTextItemGrabbed": [1, "assistive-text-item-grabbed"],
+    "assistiveTextItemMoving": [1, "assistive-text-item-moving"],
+    "assistiveTextItemMoved": [1, "assistive-text-item-moved"],
+    "label": [1],
+    "assistiveText": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-resource-list", "swirl-stack", "swirl-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-resource-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlResourceList);
+      }
+      break;
+    case "swirl-stack":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "swirl-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { SwirlResourceList as S, defineCustomElement as d };

package/dist/components/swirl-search.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlSearch extends Components.SwirlSearch, HTMLElement {}
+export const SwirlSearch: {
+  prototype: SwirlSearch;
+  new (): SwirlSearch;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-search.js

@@ -0,0 +1,120 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { g as getDesktopMediaQuery } from './utils.js';
+import { d as defineCustomElement$3 } from './swirl-icon-cancel2.js';
+import { d as defineCustomElement$2 } from './swirl-icon-search2.js';
+
+const swirlSearchCss = ".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--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;color:var(--s-icon-default);transform:translateY(-50%)}.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%)}";
+
+const SwirlSearch$1 = /*@__PURE__*/ proxyCustomElement(class SwirlSearch extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.inputBlur = createEvent(this, "inputBlur", 7);
+    this.inputFocus = createEvent(this, "inputFocus", 7);
+    this.inputInput = createEvent(this, "inputInput", 7);
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.desktopMediaQuery = getDesktopMediaQuery();
+    this.desktopMediaQueryHandler = (event) => {
+      this.forceIconProps(event.matches);
+    };
+    this.clear = () => {
+      this.input.value = "";
+      this.input.focus();
+      this.valueChange.emit("");
+    };
+    this.onBlur = (event) => {
+      this.inputBlur.emit(event);
+    };
+    this.onChange = (event) => {
+      this.valueChange.emit(event.target.value);
+    };
+    this.onFocus = (event) => {
+      this.inputFocus.emit(event);
+    };
+    this.onInput = (event) => {
+      this.inputInput.emit(event.target.value);
+    };
+    this.autoFocus = undefined;
+    this.clearButtonLabel = "Clear search term";
+    this.disabled = undefined;
+    this.inputName = undefined;
+    this.inputId = undefined;
+    this.label = undefined;
+    this.placeholder = "Search …";
+    this.value = undefined;
+    this.variant = "filled";
+  }
+  componentDidLoad() {
+    this.forceIconProps(this.desktopMediaQuery.matches);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+    // see https://stackoverflow.com/a/27314017
+    if (this.autoFocus) {
+      setTimeout(() => {
+        this.input.focus();
+      });
+    }
+  }
+  disconnectedCallback() {
+    this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+  }
+  forceIconProps(smallIcon) {
+    if (!Boolean(this.iconEl)) {
+      return;
+    }
+    const icon = this.iconEl.children[0];
+    icon?.setAttribute("size", smallIcon ? "20" : "24");
+  }
+  onKeyDown(event) {
+    if ((event.code === "KeyK" || event.code === "Slash") &&
+      (event.ctrlKey || event.metaKey)) {
+      this.input.focus();
+    }
+  }
+  render() {
+    const className = classnames("search", `search--variant-${this.variant}`, {
+      "search--disabled": this.disabled,
+    });
+    return (h(Host, null, h("span", { class: className, ref: (el) => (this.iconEl = el) }, h("swirl-icon-search", { class: "search__icon" }), h("input", { "aria-disabled": this.disabled ? "true" : undefined, "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: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && (h("button", { "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.clear, type: "button" }, h("swirl-icon-cancel", null))))));
+  }
+  static get style() { return swirlSearchCss; }
+}, [2, "swirl-search", {
+    "autoFocus": [4, "auto-focus"],
+    "clearButtonLabel": [1, "clear-button-label"],
+    "disabled": [4],
+    "inputName": [1, "input-name"],
+    "inputId": [1, "input-id"],
+    "label": [1],
+    "placeholder": [1],
+    "value": [1025],
+    "variant": [1]
+  }, [[8, "keydown", "onKeyDown"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-search", "swirl-icon-cancel", "swirl-icon-search"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-search":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlSearch$1);
+      }
+      break;
+    case "swirl-icon-cancel":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "swirl-icon-search":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlSearch = SwirlSearch$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlSearch, defineCustomElement };

package/dist/components/swirl-select.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlSelect extends Components.SwirlSelect, HTMLElement {}
+export const SwirlSelect: {
+  prototype: SwirlSelect;
+  new (): SwirlSelect;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-select.js

@@ -0,0 +1,240 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { q as querySelectorAllDeep } from './utils.js';
+import { d as defineCustomElement$c } from './swirl-icon-close2.js';
+import { d as defineCustomElement$b } from './swirl-icon-expand-less2.js';
+import { d as defineCustomElement$a } from './swirl-icon-expand-more2.js';
+import { d as defineCustomElement$9 } from './swirl-icon-search2.js';
+import { d as defineCustomElement$8 } from './swirl-option-list2.js';
+import { d as defineCustomElement$7 } from './swirl-popover2.js';
+import { d as defineCustomElement$6 } from './swirl-popover-trigger2.js';
+import { d as defineCustomElement$5 } from './swirl-spinner2.js';
+import { d as defineCustomElement$4 } from './swirl-tag2.js';
+import { d as defineCustomElement$3 } from './swirl-text2.js';
+import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
+
+const swirlSelectCss = ".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){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){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--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__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;gap:var(--s-space-8)}.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)}}";
+
+const SwirlSelect$1 = /*@__PURE__*/ proxyCustomElement(class SwirlSelect extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.searchChange = createEvent(this, "searchChange", 7);
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.select = (event) => {
+      this.value = event.detail;
+      this.valueChange.emit(this.value);
+      if (!this.multiSelect) {
+        this.popover.close();
+      }
+    };
+    this.unselectOption = (value) => {
+      if (!this.allowDeselect) {
+        return;
+      }
+      this.value = this.value.filter((v) => v !== value);
+      this.valueChange.emit(this.value);
+    };
+    this.onSlotChange = () => {
+      this.updateOptions();
+    };
+    this.onOpen = (event) => {
+      this.placement = event.detail.position?.placement;
+      this.open = true;
+      if (this.withSearch && Boolean(this.searchInput)) {
+        this.searchInput.focus();
+      }
+      else {
+        this.optionList.querySelector('[tabIndex="0"]')?.focus();
+      }
+    };
+    this.onClose = () => {
+      if (Boolean(this.searchInput)) {
+        this.searchInput.value = "";
+        this.searchChange.emit("");
+      }
+      this.open = false;
+      this.input.focus();
+    };
+    this.onKeyDown = (event) => {
+      if (event.code === "Space" || event.code === "Enter") {
+        if (event.target === this.searchInput) {
+          return;
+        }
+        event.preventDefault();
+        this.popover.open(this.el);
+      }
+      else if (event.code === "ArrowDown" &&
+        event.target === this.searchInput) {
+        this.optionList.querySelector('[tabIndex="0"]')?.focus();
+      }
+    };
+    this.onSearchInput = (event) => {
+      this.searchChange.emit(event.target.value);
+    };
+    this.allowDeselect = true;
+    this.disabled = undefined;
+    this.emptyListLabel = "No results found.";
+    this.inline = undefined;
+    this.invalid = undefined;
+    this.label = undefined;
+    this.multiSelect = undefined;
+    this.required = undefined;
+    this.searchInputLabel = "Search options";
+    this.searchLoading = undefined;
+    this.searchPlaceholder = undefined;
+    this.selectId = Math.round(Math.random() * 1000000).toString();
+    this.swirlAriaDescribedby = undefined;
+    this.value = undefined;
+    this.withSearch = undefined;
+    this.options = [];
+    this.open = undefined;
+    this.placement = undefined;
+  }
+  componentWillLoad() {
+    queueMicrotask(() => {
+      this.updateOptions();
+      this.observeSlotChanges();
+    });
+  }
+  disconnectedCallback() {
+    this.observer?.disconnect();
+  }
+  onWindowFocusIn(event) {
+    if (event.target === this.el.querySelector("input")) {
+      event.stopImmediatePropagation();
+    }
+  }
+  observeSlotChanges() {
+    this.observer = new MutationObserver(() => {
+      this.updateOptions();
+    });
+    this.observer.observe(this.el, {
+      childList: true,
+      subtree: true,
+    });
+  }
+  updateOptions() {
+    this.options = querySelectorAllDeep(this.el, "swirl-option-list-item");
+  }
+  render() {
+    const label = Boolean(this.value)
+      ? this.value
+        ?.map((value) => this.options.find((option) => option.value === value)?.label)
+        .join(", ")
+      : "";
+    const ariaInvalid = this.invalid === true || this.invalid === false
+      ? String(this.invalid)
+      : undefined;
+    const formControl = this.el.closest("swirl-form-control");
+    const offset = formControl?.inline || formControl?.labelPosition === "outside"
+      ? -12
+      : -16;
+    const className = classnames("select", `select--placement-${this.placement}`, {
+      "select--disabled": this.disabled,
+      "select--inline": this.inline,
+      "select--multi": this.multiSelect,
+      "select--search-loading": this.searchLoading,
+    });
+    return (h(Host, { onKeyDown: this.onKeyDown }, h("div", { class: className }, h("swirl-popover-trigger", { popover: this.popover, setAriaAttributes: false }, h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label })), h("span", { class: "select__multi-select-values" }, this.value
+      ?.map((value) => this.options.find((option) => option.value === value))
+      ?.map((option) => (h("swirl-tag", { "aria-hidden": "true", label: option?.label,
+      // eslint-disable-next-line react/jsx-no-bind
+      onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect })))), h("span", { class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", null)) : (h("swirl-icon-expand-more", null))), h("swirl-popover", { animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: [0, offset], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.popover = el), useContainerWidth: "swirl-form-control" }, this.withSearch && (h("div", { class: "select__search" }, h("swirl-icon-search", { class: "select__search-icon", size: 20 }), h("input", { "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (h("swirl-spinner", { class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { onSlotchange: this.onSlotChange }))))));
+  }
+  get el() { return this; }
+  static get style() { return swirlSelectCss; }
+}, [6, "swirl-select", {
+    "allowDeselect": [4, "allow-deselect"],
+    "disabled": [4],
+    "emptyListLabel": [1, "empty-list-label"],
+    "inline": [4],
+    "invalid": [4],
+    "label": [1],
+    "multiSelect": [4, "multi-select"],
+    "required": [4],
+    "searchInputLabel": [1, "search-input-label"],
+    "searchLoading": [4, "search-loading"],
+    "searchPlaceholder": [1, "search-placeholder"],
+    "selectId": [1, "select-id"],
+    "swirlAriaDescribedby": [1, "swirl-aria-describedby"],
+    "value": [1040],
+    "withSearch": [4, "with-search"],
+    "options": [32],
+    "open": [32],
+    "placement": [32]
+  }, [[8, "focusin", "onWindowFocusIn"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-select", "swirl-icon-close", "swirl-icon-expand-less", "swirl-icon-expand-more", "swirl-icon-search", "swirl-option-list", "swirl-popover", "swirl-popover-trigger", "swirl-spinner", "swirl-tag", "swirl-text", "swirl-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-select":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlSelect$1);
+      }
+      break;
+    case "swirl-icon-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "swirl-icon-expand-less":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "swirl-icon-expand-more":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "swirl-icon-search":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "swirl-option-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "swirl-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "swirl-popover-trigger":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "swirl-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "swirl-tag":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "swirl-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "swirl-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlSelect = SwirlSelect$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlSelect, defineCustomElement };

package/dist/components/swirl-separator.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlSeparator extends Components.SwirlSeparator, HTMLElement {}
+export const SwirlSeparator: {
+  prototype: SwirlSeparator;
+  new (): SwirlSeparator;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-separator.js

@@ -0,0 +1,6 @@
+import { S as SwirlSeparator$1, d as defineCustomElement$1 } from './swirl-separator2.js';
+
+const SwirlSeparator = SwirlSeparator$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlSeparator, defineCustomElement };