@getflip/swirl-components 0.10.0 → 0.12.0

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

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

package/dist/components/swirl-list.js

@@ -0,0 +1,39 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const swirlListCss = ":host{display:block}:host *{box-sizing:border-box}.swirl-list{line-height:var(--s-line-height-base)}.swirl-list ul,.swirl-list ol{margin:0;padding:0;list-style-position:outside;list-style-type:none}.swirl-list ul li{padding-left:1.5rem}.swirl-list ul li:before{display:inline-block;width:1.5rem;margin-left:-1.5rem;text-align:center;content:\"•\"}.swirl-list ol{counter-reset:item}.swirl-list ol ol{counter-reset:letter}.swirl-list ol ol li:before{content:counter(letter, lower-alpha) \".\";counter-increment:letter}.swirl-list ol li{padding-left:1.5rem}.swirl-list ol li:before{display:inline-block;min-width:1.5rem;margin-left:-1.5rem;padding-right:var(--s-space-8);text-align:right;content:counter(item) \".\";counter-increment:item;font-variant-numeric:tabular-nums}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.swirl-list{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
+
+const SwirlList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  componentDidRender() {
+    const children = Array.from(this.containerEl.children);
+    if (children.some((child) => !["UL", "OL"].includes(child.tagName))) {
+      console.warn("[SwirlList] Only ul and ol elements are allowed as direct children of <swirl-list />.");
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "swirl-list", ref: (el) => (this.containerEl = el) }, h("slot", null))));
+  }
+  static get style() { return swirlListCss; }
+}, [4, "swirl-list"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-list"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlList$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlList = SwirlList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlList, defineCustomElement };

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

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

package/dist/components/swirl-modal.js

@@ -0,0 +1,161 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { A as A11yDialog } from './a11y-dialog.esm.js';
+import { d as disableBodyScroll, e as enableBodyScroll } from './bodyScrollLock.esm.js';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$5 } from './swirl-button2.js';
+import { d as defineCustomElement$4 } from './swirl-button-group2.js';
+import { d as defineCustomElement$3 } from './swirl-heading2.js';
+import { d as defineCustomElement$2 } from './swirl-stack2.js';
+
+const swirlModalCss = ":host{--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed);display:block}:host *{box-sizing:border-box}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;inset:0}.modal[aria-hidden=\"true\"]{display:none}.modal:not(.modal--closing) .modal__backdrop{-webkit-animation:0.15s modal-backdrop-fade-in;animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal:not(.modal--closing) .modal__backdrop{-webkit-animation:none;animation:none}}.modal:not(.modal--closing) .modal__body{-webkit-animation:0.15s modal-scale-in;animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal:not(.modal--closing) .modal__body{-webkit-animation:none;animation:none}}.modal--closing{-webkit-animation:0.15s modal-fade-out;animation:0.15s modal-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--closing{-webkit-animation:none;animation:none}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal--scrolled .modal__header{border-bottom-color:var(--s-border-default)}}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal__body{position:relative;z-index:var(--s-z-40);display:flex;width:100vw;height:100vh;background-color:var(--s-surface-overlay-default);flex-direction:column}@media (min-width: 768px){.modal__body{width:90vw;max-width:33.75rem;height:auto;max-height:90vh;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}.modal__close-button{position:absolute;top:var(--s-space-8);left:var(--s-space-8)}@media (min-width: 768px){.modal__close-button{top:var(--s-space-16);right:var(--s-space-16);left:auto}}.modal__header{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-8) + 2.5rem + var(--s-space-8));flex-shrink:0;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);gap:var(--s-space-16)}@media (min-width: 768px){.modal__header{height:4.125rem;padding-top:var(--s-space-24);padding-right:calc(var(--s-space-16) + 2.5rem + var(--s-space-8));padding-bottom:var(--s-space-16);padding-left:var(--s-space-24);border-bottom:var(--s-border-width-default) solid transparent}}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16);flex-grow:1;line-height:var(--s-line-height-base)}.modal__content ::slotted(*){margin:0}@media (min-width: 768px){.modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}.modal__controls{display:flex;padding-top:var(--s-space-16);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24);flex-shrink:0;justify-content:flex-end}@-webkit-keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}";
+
+const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.modalClose = createEvent(this, "modalClose", 7);
+    this.modalOpen = createEvent(this, "modalOpen", 7);
+    this.primaryAction = createEvent(this, "primaryAction", 7);
+    this.secondaryAction = createEvent(this, "secondaryAction", 7);
+    this.closeButtonLabel = "Close modal";
+    this.closing = false;
+    this.scrollable = false;
+    this.scrolled = false;
+    this.scrolledDown = false;
+    this.onKeyDown = (event) => {
+      if (event.code === "Escape") {
+        this.close();
+      }
+    };
+    this.onBackdropClick = () => {
+      this.close();
+    };
+    this.onCloseButtonClick = () => {
+      this.close();
+    };
+    this.onPrimaryAction = (event) => {
+      this.primaryAction.emit(event);
+    };
+    this.onSecondaryAction = (event) => {
+      this.secondaryAction.emit(event);
+    };
+    this.determineScrollStatus = () => {
+      var _a, _b, _c, _d, _e, _f;
+      const scrolled = ((_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.scrollTop) > 0;
+      const scrolledDown = Math.ceil(((_b = this.scrollContainer) === null || _b === void 0 ? void 0 : _b.scrollTop) + ((_c = this.scrollContainer) === null || _c === void 0 ? void 0 : _c.offsetHeight)) >= ((_d = this.scrollContainer) === null || _d === void 0 ? void 0 : _d.scrollHeight);
+      const scrollable = ((_e = this.scrollContainer) === null || _e === void 0 ? void 0 : _e.scrollHeight) > ((_f = this.scrollContainer) === null || _f === void 0 ? void 0 : _f.offsetHeight);
+      if (scrolled !== this.scrolled) {
+        this.scrolled = scrolled;
+      }
+      if (scrolledDown !== this.scrolledDown) {
+        this.scrolledDown = scrolledDown;
+      }
+      if (scrollable !== this.scrollable) {
+        this.scrollable = scrollable;
+      }
+    };
+  }
+  componentDidLoad() {
+    this.modal = new A11yDialog(this.modalEl);
+    this.determineScrollStatus();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.modal) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.unlockBodyScroll();
+  }
+  onWindowResize() {
+    this.determineScrollStatus();
+  }
+  /**
+   * Open the modal.
+   */
+  async open() {
+    this.modal.show();
+    this.modalOpen.emit();
+    this.lockBodyScroll();
+    this.determineScrollStatus();
+  }
+  /**
+   * Close the modal.
+   */
+  async close() {
+    if (this.closing) {
+      return;
+    }
+    this.closing = true;
+    this.unlockBodyScroll();
+    setTimeout(() => {
+      this.modal.hide();
+      this.modalClose.emit();
+      this.closing = false;
+    }, 150);
+  }
+  lockBodyScroll() {
+    disableBodyScroll(this.scrollContainer);
+  }
+  unlockBodyScroll() {
+    enableBodyScroll(this.scrollContainer);
+  }
+  render() {
+    const className = classnames("modal", {
+      "modal--closing": this.closing,
+      "modal--scrollable": this.scrollable,
+      "modal--scrolled": this.scrolled,
+      "modal--scrolled-down": this.scrolledDown,
+    });
+    return (h(Host, null, h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "modal", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { class: "modal__body", role: "document" }, h("swirl-button", { class: "modal__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), h("header", { class: "modal__header" }, h("swirl-heading", { as: "h2", class: "modal__heading", level: 3, text: this.label })), h("div", { class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", null)), h("footer", { class: "modal__controls" }, h("swirl-button-group", { wrap: true }, this.secondaryActionLabel && (h("swirl-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))));
+  }
+  static get style() { return swirlModalCss; }
+}, [1, "swirl-modal", {
+    "closeButtonLabel": [1, "close-button-label"],
+    "label": [1],
+    "primaryActionLabel": [1, "primary-action-label"],
+    "secondaryActionLabel": [1, "secondary-action-label"],
+    "closing": [32],
+    "scrollable": [32],
+    "scrolled": [32],
+    "scrolledDown": [32],
+    "open": [64],
+    "close": [64]
+  }, [[9, "resize", "onWindowResize"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-modal", "swirl-button", "swirl-button-group", "swirl-heading", "swirl-stack"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-modal":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlModal$1);
+      }
+      break;
+    case "swirl-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "swirl-button-group":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "swirl-heading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "swirl-stack":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlModal = SwirlModal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlModal, defineCustomElement };

package/dist/components/swirl-option-list-item.d.ts

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

package/dist/components/swirl-option-list-item.js

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

package/dist/components/swirl-option-list-item2.js

@@ -0,0 +1,88 @@
+import { proxyCustomElement, HTMLElement, 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$2 } from './swirl-icon-check-small2.js';
+import { d as defineCustomElement$1 } from './swirl-icon-check-strong2.js';
+
+const swirlOptionListItemCss = ":host{display:inline-flex;width:100%}:host *{box-sizing:border-box}.option-list-item{display:inline-flex;width:100%;min-height:3rem;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-surface-overlay-default);cursor:pointer;gap:var(--s-space-12)}.option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-hovered)}.option-list-item:active:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.option-list-item:focus{outline:none}.option-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item{min-height:0;padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-8)}}.option-list-item--selected .option-list-item__label{color:var(--s-text-highlight)}.option-list-item--selected .option-list-item__icon{color:var(--s-icon-highlight)}.option-list-item--selected .option-list-item__checkbox-box{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.option-list-item--disabled{cursor:default}.option-list-item--disabled.option-list-item--selected .option-list-item__checkbox-box{background-color:var(--s-icon-disabled)}.option-list-item--disabled.option-list-item--selected .option-list-item__checkbox-icon{color:var(--s-text-on-status)}.option-list-item--disabled .option-list-item__label{color:var(--s-text-disabled)}.option-list-item--disabled .option-list-item__icon,.option-list-item--disabled .option-list-item__selection-icon,.option-list-item--disabled .option-list-item__checkbox-icon{color:var(--s-icon-disabled)}.option-list-item--disabled .option-list-item__checkbox-box{border-color:var(--s-icon-disabled);background-color:var(--s-surface-overlay-default)}.option-list-item__label{flex-grow:1;color:var(--s-text-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__label{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__icon{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}.option-list-item__selection-icon{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}.option-list-item__checkbox{display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2)}.option-list-item__checkbox-box{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.option-list-item__checkbox-icon{display:inline-flex}";
+
+const SwirlOptionListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.context = "single-select";
+    this.selected = false;
+    this.iconSize = 24;
+    this.desktopMediaQuery = getDesktopMediaQuery();
+    this.desktopMediaQueryHandler = (event) => {
+      this.forceIconProps(event.matches);
+      this.updateIconSize(event.matches);
+    };
+  }
+  componentDidLoad() {
+    var _a, _b;
+    this.forceIconProps(this.desktopMediaQuery.matches);
+    this.updateIconSize(this.desktopMediaQuery.matches);
+    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    (_b = (_a = this.desktopMediaQuery).removeEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+  }
+  forceIconProps(smallIcon) {
+    var _a;
+    const icon = (_a = this.iconEl) === null || _a === void 0 ? void 0 : _a.children[0];
+    icon === null || icon === void 0 ? void 0 : icon.setAttribute("size", smallIcon ? "20" : "24");
+  }
+  updateIconSize(smallIcon) {
+    this.iconSize = smallIcon ? 20 : 24;
+  }
+  render() {
+    const ariaDisabled = this.disabled ? "true" : undefined;
+    const ariaSelected = String(this.selected);
+    const showCheckbox = this.context === "multi-select";
+    const showIcon = Boolean(this.icon) && this.context === "single-select";
+    const showSelectionIcon = this.selected && this.context === "single-select";
+    const className = classnames("option-list-item", `option-list-item--context-${this.context}`, {
+      "option-list-item--disabled": this.disabled,
+      "option-list-item--selected": this.selected,
+    });
+    return (h(Host, null, h("div", { "aria-disabled": ariaDisabled, "aria-selected": ariaSelected, class: className, part: "option-list-item", role: "option" }, showIcon && (h("span", { class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), showCheckbox && (h("span", { class: "option-list-item__checkbox" }, h("span", { class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { class: "option-list-item__label", part: "option-list-item__label" }, this.label), showSelectionIcon && (h("span", { class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { size: this.iconSize }))))));
+  }
+  static get style() { return swirlOptionListItemCss; }
+}, [1, "swirl-option-list-item", {
+    "context": [1025],
+    "disabled": [4],
+    "icon": [1],
+    "label": [1],
+    "selected": [1028],
+    "value": [1],
+    "iconSize": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-option-list-item", "swirl-icon-check-small", "swirl-icon-check-strong"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-option-list-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlOptionListItem);
+      }
+      break;
+    case "swirl-icon-check-small":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "swirl-icon-check-strong":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { SwirlOptionListItem as S, defineCustomElement as d };

package/dist/components/swirl-option-list-section.d.ts

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

package/dist/components/swirl-option-list-section.js

@@ -0,0 +1,36 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const swirlOptionListSectionCss = ":host{display:block}:host *{box-sizing:border-box}.option-list-section{background-color:var(--s-surface-overlay-default)}.option-list-section__label{display:block;width:100%;padding:var(--s-space-8) var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-section__label{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
+
+const SwirlOptionListSection$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, null, h("div", { "aria-labelledby": "label", class: "option-list-section", role: "group" }, h("span", { class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), h("div", { class: "option-list-section__items" }, h("slot", null)))));
+  }
+  static get style() { return swirlOptionListSectionCss; }
+}, [1, "swirl-option-list-section", {
+    "label": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-option-list-section"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-option-list-section":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlOptionListSection$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlOptionListSection = SwirlOptionListSection$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlOptionListSection, defineCustomElement };

package/dist/components/swirl-option-list.d.ts

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

package/dist/components/swirl-option-list.js

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

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

@@ -0,0 +1,212 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { q as querySelectorAllDeep } from './utils.js';
+
+const swirlOptionListCss = ".sc-swirl-option-list-h{display:block}.sc-swirl-option-list-h *.sc-swirl-option-list{box-sizing:border-box}";
+
+const SwirlOptionList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.value = [];
+    this.onFocus = () => {
+      if (Boolean(this.focusedItem)) {
+        this.focusItem(this.getActiveItemIndex());
+      }
+      else {
+        this.focusItem(0);
+      }
+    };
+    this.onClick = (event) => {
+      event.preventDefault();
+      const target = event.target;
+      const item = target === null || target === void 0 ? void 0 : target.closest("swirl-option-list-item");
+      if (!Boolean(item)) {
+        return;
+      }
+      this.selectItem(this.items.findIndex((i) => i.value === item.value));
+    };
+    this.onKeyDown = (event) => {
+      if (event.code === "ArrowDown") {
+        event.preventDefault();
+        this.focusNextItem();
+      }
+      else if (event.code === "ArrowUp") {
+        event.preventDefault();
+        this.focusPreviousItem();
+      }
+      else if (event.code === "Space" || event.code === "Enter") {
+        event.preventDefault();
+        this.selectFocusedItem();
+      }
+      else if (event.code === "Home") {
+        event.preventDefault();
+        this.focusItem(0);
+      }
+      else if (event.code === "End") {
+        event.preventDefault();
+        this.focusItem(this.items.length - 1);
+      }
+      else if (event.code === "KeyA" &&
+        (event.metaKey || event.ctrlKey) &&
+        this.multiSelect) {
+        event.preventDefault();
+        this.selectAllItems();
+      }
+    };
+  }
+  componentDidLoad() {
+    this.updateItems();
+    this.observeSlotChanges();
+    this.setItemDisabledState();
+    this.setItemContext();
+    this.syncItemsWithValue();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  watchDisabled() {
+    this.setItemDisabledState();
+  }
+  watchMultiSelect() {
+    this.setItemContext();
+  }
+  watchValue() {
+    this.syncItemsWithValue();
+  }
+  observeSlotChanges() {
+    this.observer = new MutationObserver(() => {
+      this.updateItems();
+    });
+    this.observer.observe(this.listboxEl, { childList: true });
+  }
+  updateItems() {
+    this.items = querySelectorAllDeep(this.el, "swirl-option-list-item");
+  }
+  setItemDisabledState() {
+    this.items.forEach((item) => (item.disabled = this.disabled));
+  }
+  setItemContext() {
+    if (this.multiSelect) {
+      this.items.forEach((item) => (item.context = "multi-select"));
+    }
+    else {
+      this.items.forEach((item) => (item.context = "single-select"));
+      if (this.value.length > 1) {
+        this.updateValue([this.value[0]]);
+      }
+    }
+  }
+  selectItem(index) {
+    if (this.disabled) {
+      return;
+    }
+    const item = this.items[index];
+    if (item.disabled) {
+      return;
+    }
+    const itemIsAlreadySelected = this.value.includes(item.value);
+    if (!this.multiSelect) {
+      this.value = [];
+    }
+    if (!itemIsAlreadySelected) {
+      this.updateValue([...this.value, item.value]);
+    }
+    else {
+      this.updateValue(this.value.filter((v) => v !== item.value));
+    }
+  }
+  updateValue(value) {
+    this.value = value;
+    this.valueChange.emit(this.value);
+  }
+  selectFocusedItem() {
+    if (this.disabled || this.getActiveItemIndex() === -1) {
+      return;
+    }
+    this.selectItem(this.getActiveItemIndex());
+  }
+  selectAllItems() {
+    if (this.disabled) {
+      return;
+    }
+    const alreadySelected = this.items.every((item) => this.value.includes(item.value));
+    if (alreadySelected) {
+      this.updateValue([]);
+    }
+    else {
+      this.updateValue(this.items.map((item) => item.value));
+    }
+  }
+  syncItemsWithValue() {
+    this.items.forEach((item) => (item.selected = this.value.includes(item.value)));
+  }
+  focusItem(index) {
+    if (this.disabled) {
+      return;
+    }
+    this.items.forEach((item) => item.shadowRoot
+      .querySelector('[role="option"]')
+      .removeAttribute("tabIndex"));
+    const item = this.items[index].shadowRoot.querySelector('[role="option"]');
+    if (!Boolean(item)) {
+      return;
+    }
+    item.setAttribute("tabIndex", "0");
+    item.focus();
+    this.focusedItem = item;
+  }
+  focusNextItem() {
+    if (this.disabled) {
+      return;
+    }
+    const activeItemIndex = this.getActiveItemIndex();
+    const newIndex = Math.min(activeItemIndex + 1, this.items.length - 1);
+    this.focusItem(newIndex);
+  }
+  focusPreviousItem() {
+    const activeItemIndex = this.getActiveItemIndex();
+    const newIndex = Math.max(activeItemIndex - 1, 0);
+    this.focusItem(newIndex);
+  }
+  getActiveItemIndex() {
+    return this.items
+      .map((item) => item.shadowRoot.querySelector('[role="option"]'))
+      .findIndex((item) => item === this.focusedItem);
+  }
+  render() {
+    const ariaMultiselectable = this.multiSelect ? "true" : undefined;
+    const tabIndex = this.disabled ? -1 : 0;
+    return (h(Host, null, h("div", { "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex }, h("slot", null))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "disabled": ["watchDisabled"],
+    "multiSelect": ["watchMultiSelect"],
+    "value": ["watchValue"]
+  }; }
+  static get style() { return swirlOptionListCss; }
+}, [6, "swirl-option-list", {
+    "disabled": [4],
+    "label": [1],
+    "optionListId": [1, "option-list-id"],
+    "multiSelect": [4, "multi-select"],
+    "value": [1040]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-option-list"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-option-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlOptionList);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { SwirlOptionList as S, defineCustomElement as d };

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

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