@getflip/swirl-components 0.2.0 → 0.3.0

package/dist/components/flip-modal.js

@@ -0,0 +1,147 @@
+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 './flip-button2.js';
+import { d as defineCustomElement$4 } from './flip-button-group2.js';
+import { d as defineCustomElement$3 } from './flip-heading2.js';
+import { d as defineCustomElement$2 } from './flip-stack2.js';
+
+const flipModalCss = ":host{--flip-ghost-button-background-default:var(--s-surface-overlay-default);--flip-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--flip-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--scrolled .modal__header{border-bottom:var(--s-border-width-default) solid 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-xl);box-shadow:0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.14)}}.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{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:none}}.modal__heading{overflow:hidden}.modal__heading::part(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-32);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;border-top:var(--s-border-width-default) solid var(--s-border-default)}@-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 FlipModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.primaryAction = createEvent(this, "primaryAction", 7);
+    this.secondaryAction = createEvent(this, "secondaryAction", 7);
+    this.closeButtonLabel = "Close modal";
+    this.closing = false;
+    this.scrolled = 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.close();
+    };
+    this.onSecondaryAction = (event) => {
+      this.secondaryAction.emit(event);
+      this.close();
+    };
+    this.determineScrollStatus = () => {
+      var _a;
+      const scrolled = ((_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.scrollTop) > 0;
+      if (scrolled !== this.scrolled) {
+        this.scrolled = scrolled;
+      }
+    };
+  }
+  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.lockBodyScroll();
+    this.determineScrollStatus();
+  }
+  /**
+   * Close the modal.
+   */
+  async close() {
+    if (this.closing) {
+      return;
+    }
+    this.closing = true;
+    this.unlockBodyScroll();
+    setTimeout(() => {
+      this.modal.hide();
+      this.closing = false;
+    }, 150);
+  }
+  lockBodyScroll() {
+    disableBodyScroll(this.scrollContainer);
+  }
+  unlockBodyScroll() {
+    enableBodyScroll(this.scrollContainer);
+  }
+  render() {
+    const className = classnames("modal", {
+      "modal--closing": this.closing,
+      "modal--scrolled": this.scrolled,
+    });
+    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("flip-button", { class: "modal__close-button", hideLabel: true, icon: "<flip-icon-close></flip-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), h("header", { class: "modal__header" }, h("flip-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("flip-button-group", { wrap: true }, this.secondaryActionLabel && (h("flip-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("flip-button", { intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))));
+  }
+  static get style() { return flipModalCss; }
+}, [1, "flip-modal", {
+    "closeButtonLabel": [1, "close-button-label"],
+    "label": [1],
+    "primaryActionLabel": [1, "primary-action-label"],
+    "secondaryActionLabel": [1, "secondary-action-label"],
+    "closing": [32],
+    "scrolled": [32],
+    "open": [64],
+    "close": [64]
+  }, [[9, "resize", "onWindowResize"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-modal", "flip-button", "flip-button-group", "flip-heading", "flip-stack"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-modal":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipModal$1);
+      }
+      break;
+    case "flip-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "flip-button-group":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "flip-heading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "flip-stack":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipModal = FlipModal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipModal, defineCustomElement };
+
+//# sourceMappingURL=flip-modal.js.map

package/dist/components/flip-modal.js.map

@@ -0,0 +1 @@
+{"file":"flip-modal.js","mappings":"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","names":["FlipModal"],"sources":["./src/components/flip-modal/flip-modal.css?tag=flip-modal&encapsulation=shadow","./src/components/flip-modal/flip-modal.tsx"],"sourcesContent":["@import \"../../styles/media-queries.css\";\n\n:host {\n  --flip-ghost-button-background-default: var(--s-surface-overlay-default);\n  --flip-ghost-button-background-hovered: var(--s-surface-overlay-hovered);\n  --flip-ghost-button-background-pressed: var(--s-surface-overlay-pressed);\n\n  display: block;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.modal {\n  position: fixed;\n  z-index: var(--s-z-40);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  inset: 0;\n\n  &[aria-hidden=\"true\"] {\n    display: none;\n  }\n}\n\n.modal:not(.modal--closing) {\n  & .modal__backdrop {\n    animation: 0.15s modal-backdrop-fade-in;\n\n    @media (prefers-reduced-motion) {\n      animation: none;\n    }\n  }\n\n  & .modal__body {\n    animation: 0.15s modal-scale-in;\n\n    @media (prefers-reduced-motion) {\n      animation: none;\n    }\n  }\n}\n\n.modal--closing {\n  animation: 0.15s modal-fade-out;\n  animation-fill-mode: forwards;\n\n  @media (prefers-reduced-motion) {\n    animation: none;\n  }\n}\n\n.modal--scrolled {\n  @media (--from-tablet) {\n    & .modal__header {\n      border-bottom: var(--s-border-width-default) solid var(--s-border-default);\n    }\n  }\n}\n\n.modal__backdrop {\n  position: fixed;\n  background-color: rgba(0, 0, 0, 0.2);\n  inset: 0;\n}\n\n.modal__body {\n  position: relative;\n  z-index: var(--s-z-40);\n  display: flex;\n  width: 100vw;\n  height: 100vh;\n  background-color: var(--s-surface-overlay-default);\n  flex-direction: column;\n\n  @media (--from-tablet) {\n    width: 90vw;\n    max-width: 33.75rem;\n    height: auto;\n    max-height: 90vh;\n    border-radius: var(--s-border-radius-xl);\n    box-shadow: 0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.14);\n  }\n}\n\n.modal__close-button {\n  position: absolute;\n  top: var(--s-space-8);\n  left: var(--s-space-8);\n\n  @media (--from-tablet) {\n    top: var(--s-space-16);\n    right: var(--s-space-16);\n    left: auto;\n  }\n}\n\n.modal__header {\n  display: flex;\n  height: 3.5rem;\n  padding-top: var(--s-space-8);\n  padding-right: var(--s-space-16);\n  padding-bottom: var(--s-space-8);\n  padding-left: calc(var(--s-space-8) + 2.5rem + var(--s-space-8));\n  flex-shrink: 0;\n  align-items: center;\n  border-bottom: var(--s-border-width-default) solid var(--s-border-default);\n  gap: var(--s-space-16);\n\n  @media (--from-tablet) {\n    padding-top: var(--s-space-24);\n    padding-right: calc(var(--s-space-16) + 2.5rem + var(--s-space-8));\n    padding-bottom: var(--s-space-16);\n    padding-left: var(--s-space-24);\n    border-bottom: none;\n  }\n}\n\n.modal__heading {\n  overflow: hidden;\n\n  &::part(heading) {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n}\n\n.modal__content {\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-top: var(--s-space-24);\n  padding-right: var(--s-space-16);\n  padding-bottom: var(--s-space-24);\n  padding-left: var(--s-space-16);\n  flex-grow: 1;\n  line-height: var(--s-line-height-base);\n\n  & ::slotted(*) {\n    margin: 0;\n  }\n\n  @media (--from-tablet) {\n    padding-top: 0;\n    padding-right: var(--s-space-24);\n    padding-bottom: var(--s-space-32);\n    padding-left: var(--s-space-24);\n  }\n}\n\n.modal__controls {\n  display: flex;\n  padding-top: var(--s-space-16);\n  padding-right: var(--s-space-24);\n  padding-bottom: var(--s-space-16);\n  padding-left: var(--s-space-24);\n  flex-shrink: 0;\n  justify-content: flex-end;\n  border-top: var(--s-border-width-default) solid var(--s-border-default);\n}\n\n@keyframes modal-scale-in {\n  from {\n    transform: scale(0);\n  }\n  to {\n    transform: scale(1);\n  }\n}\n\n@keyframes modal-backdrop-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes modal-fade-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport A11yDialog from \"a11y-dialog\";\nimport { disableBodyScroll, enableBodyScroll } from \"body-scroll-lock\";\nimport classnames from \"classnames\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-modal.css\",\n  tag: \"flip-modal\",\n})\nexport class FlipModal {\n  @Prop() closeButtonLabel?: string = \"Close modal\";\n  @Prop() label!: string;\n  @Prop() primaryActionLabel?: string;\n  @Prop() secondaryActionLabel?: string;\n\n  @Event() primaryAction: EventEmitter<MouseEvent>;\n  @Event() secondaryAction: EventEmitter<MouseEvent>;\n\n  @State() closing = false;\n  @State() scrolled = false;\n\n  private modal: A11yDialog;\n  private modalEl: HTMLElement;\n  private scrollContainer: HTMLElement;\n\n  componentDidLoad() {\n    this.modal = new A11yDialog(this.modalEl);\n    this.determineScrollStatus();\n  }\n\n  disconnectedCallback() {\n    this.modal?.destroy();\n    this.unlockBodyScroll();\n  }\n\n  @Listen(\"resize\", { target: \"window\" })\n  onWindowResize() {\n    this.determineScrollStatus();\n  }\n\n  /**\n   * Open the modal.\n   */\n  @Method()\n  async open() {\n    this.modal.show();\n    this.lockBodyScroll();\n    this.determineScrollStatus();\n  }\n\n  /**\n   * Close the modal.\n   */\n  @Method()\n  async close() {\n    if (this.closing) {\n      return;\n    }\n\n    this.closing = true;\n    this.unlockBodyScroll();\n\n    setTimeout(() => {\n      this.modal.hide();\n      this.closing = false;\n    }, 150);\n  }\n\n  onKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"Escape\") {\n      this.close();\n    }\n  };\n\n  private onBackdropClick = () => {\n    this.close();\n  };\n\n  private onCloseButtonClick = () => {\n    this.close();\n  };\n\n  private onPrimaryAction = (event: MouseEvent) => {\n    this.primaryAction.emit(event);\n    this.close();\n  };\n\n  private onSecondaryAction = (event: MouseEvent) => {\n    this.secondaryAction.emit(event);\n    this.close();\n  };\n\n  private determineScrollStatus = () => {\n    const scrolled = this.scrollContainer?.scrollTop > 0;\n\n    if (scrolled !== this.scrolled) {\n      this.scrolled = scrolled;\n    }\n  };\n\n  private lockBodyScroll() {\n    disableBodyScroll(this.scrollContainer);\n  }\n\n  private unlockBodyScroll() {\n    enableBodyScroll(this.scrollContainer);\n  }\n\n  render() {\n    const className = classnames(\"modal\", {\n      \"modal--closing\": this.closing,\n      \"modal--scrolled\": this.scrolled,\n    });\n\n    return (\n      <Host>\n        <section\n          aria-hidden=\"true\"\n          aria-label={this.label}\n          class={className}\n          id=\"modal\"\n          onKeyDown={this.onKeyDown}\n          ref={(el) => (this.modalEl = el)}\n        >\n          <div class=\"modal__backdrop\" onClick={this.onBackdropClick}></div>\n          <div class=\"modal__body\" role=\"document\">\n            <flip-button\n              class=\"modal__close-button\"\n              hideLabel\n              icon=\"<flip-icon-close></flip-icon-close>\"\n              label={this.closeButtonLabel}\n              onClick={this.onCloseButtonClick}\n            ></flip-button>\n            <header class=\"modal__header\">\n              <flip-heading\n                as=\"h2\"\n                class=\"modal__heading\"\n                level={3}\n                text={this.label}\n              ></flip-heading>\n            </header>\n            <div\n              class=\"modal__content\"\n              onScroll={this.determineScrollStatus}\n              ref={(el) => (this.scrollContainer = el)}\n            >\n              <slot></slot>\n            </div>\n            <footer class=\"modal__controls\">\n              <flip-button-group wrap>\n                {this.secondaryActionLabel && (\n                  <flip-button\n                    label={this.secondaryActionLabel}\n                    onClick={this.onSecondaryAction}\n                  ></flip-button>\n                )}\n                {this.primaryActionLabel && (\n                  <flip-button\n                    intent=\"primary\"\n                    label={this.primaryActionLabel}\n                    onClick={this.onPrimaryAction}\n                    variant=\"flat\"\n                  ></flip-button>\n                )}\n              </flip-button-group>\n            </footer>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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

@@ -0,0 +1,77 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$3 } from './flip-icon-check-small2.js';
+import { d as defineCustomElement$2 } from './flip-icon-check-strong2.js';
+
+const flipOptionListItemCss = ":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{background-color:var(--s-surface-overlay-hovered);outline:none}.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}.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 FlipOptionListItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.context = "single-select";
+    this.selected = false;
+  }
+  componentDidLoad() {
+    this.forceIconProps();
+  }
+  forceIconProps() {
+    if (!Boolean(this.iconEl)) {
+      return;
+    }
+    const icon = this.iconEl.children[0];
+    icon === null || icon === void 0 ? void 0 : icon.setAttribute("size", "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, 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("flip-icon-check-strong", { class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { class: "option-list-item__label" }, this.label), showSelectionIcon && (h("span", { class: "option-list-item__selection-icon" }, h("flip-icon-check-small", null))))));
+  }
+  static get style() { return flipOptionListItemCss; }
+}, [1, "flip-option-list-item", {
+    "context": [1025],
+    "disabled": [4],
+    "icon": [1],
+    "label": [1],
+    "selected": [1028],
+    "value": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-option-list-item", "flip-icon-check-small", "flip-icon-check-strong"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-option-list-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipOptionListItem$1);
+      }
+      break;
+    case "flip-icon-check-small":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "flip-icon-check-strong":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipOptionListItem = FlipOptionListItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipOptionListItem, defineCustomElement };
+
+//# sourceMappingURL=flip-option-list-item.js.map

package/dist/components/flip-option-list-item.js.map

@@ -0,0 +1 @@
+{"file":"flip-option-list-item.js","mappings":";;;;;AAAA,MAAM,qBAAqB,GAAG,i0EAAi0E;;MCUl1EA,oBAAkB;EAL/B;;;;IAM2B,YAAO,GAC9B,eAAe,CAAC;IAIO,aAAQ,GAAa,KAAK,CAAC;GAyErD;EApEC,gBAAgB;IACd,IAAI,CAAC,cAAc,EAAE,CAAC;GACvB;EAEO,cAAc;IACpB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;MACzB,OAAO;KACR;IAED,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAErC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;GAClC;EAED,MAAM;IACJ,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;IACxD,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAE3C,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,KAAK,cAAc,CAAC;IACrD,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO,KAAK,eAAe,CAAC;IACxE,MAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,KAAK,eAAe,CAAC;IAE5E,MAAM,SAAS,GAAG,UAAU,CAC1B,kBAAkB,EAClB,6BAA6B,IAAI,CAAC,OAAO,EAAE,EAC3C;MACE,4BAA4B,EAAE,IAAI,CAAC,QAAQ;MAC3C,4BAA4B,EAAE,IAAI,CAAC,QAAQ;KAC5C,CACF,CAAC;IAEF,QACE,EAAC,IAAI,QACH,4BACiB,YAAY,mBACZ,YAAY,EAC3B,KAAK,EAAE,SAAS,EAChB,IAAI,EAAC,QAAQ,IAEZ,QAAQ,KACP,YACE,KAAK,EAAC,wBAAwB,EAC9B,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,GACzB,CACT,EACA,YAAY,KACX,YAAM,KAAK,EAAC,4BAA4B,IACtC,YAAM,KAAK,EAAC,gCAAgC,IACzC,IAAI,CAAC,QAAQ,KACZ,8BACE,KAAK,EAAC,iCAAiC,EACvC,IAAI,EAAE,EAAE,GACgB,CAC3B,CACI,CACF,CACR,EACD,YAAM,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACxD,iBAAiB,KAChB,YAAM,KAAK,EAAC,kCAAkC,IAC5C,gCAA+C,CAC1C,CACR,CACG,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["FlipOptionListItem"],"sources":["./src/components/flip-option-list-item/flip-option-list-item.css?tag=flip-option-list-item&encapsulation=shadow","./src/components/flip-option-list-item/flip-option-list-item.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  width: 100%;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.option-list-item {\n  display: inline-flex;\n  width: 100%;\n  min-height: 3rem;\n  padding: var(--s-space-12) var(--s-space-16);\n  align-items: center;\n  background-color: var(--s-surface-overlay-default);\n  cursor: pointer;\n  gap: var(--s-space-12);\n\n  &:hover:not(.option-list-item--disabled) {\n    background-color: var(--s-surface-overlay-hovered);\n  }\n\n  &:active:not(.option-list-item--disabled) {\n    background-color: var(--s-surface-overlay-pressed);\n  }\n\n  &:focus {\n    background-color: var(--s-surface-overlay-hovered);\n    outline: none;\n  }\n}\n\n.option-list-item--selected {\n  & .option-list-item__label {\n    color: var(--s-text-highlight);\n  }\n\n  & .option-list-item__icon {\n    color: var(--s-icon-highlight);\n  }\n\n  & .option-list-item__checkbox-box {\n    border-color: var(--s-icon-highlight);\n    color: var(--s-text-on-status);\n    background-color: var(--s-icon-highlight);\n  }\n}\n\n.option-list-item--disabled {\n  cursor: default;\n\n  &.option-list-item--selected {\n    & .option-list-item__checkbox-box {\n      background-color: var(--s-icon-disabled);\n    }\n\n    & .option-list-item__checkbox-icon {\n      color: var(--s-text-on-status);\n    }\n  }\n\n  & .option-list-item__label {\n    color: var(--s-text-disabled);\n  }\n\n  & .option-list-item__icon,\n  & .option-list-item__selection-icon,\n  & .option-list-item__checkbox-icon {\n    color: var(--s-icon-disabled);\n  }\n\n  & .option-list-item__checkbox-box {\n    border-color: var(--s-icon-disabled);\n    background-color: var(--s-surface-overlay-default);\n  }\n}\n\n.option-list-item__label {\n  flex-grow: 1;\n  color: var(--s-text-default);\n  font-size: var(--s-font-size-base);\n  font-weight: var(--s-font-weight-medium);\n  line-height: var(--s-line-height-base);\n  text-align: left;\n}\n\n.option-list-item__icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  color: var(--s-icon-default);\n}\n\n.option-list-item__selection-icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  color: var(--s-icon-highlight);\n}\n\n.option-list-item__checkbox {\n  display: inline-flex;\n  width: 1.5rem;\n  height: 1.5rem;\n  padding: var(--s-space-2);\n}\n\n.option-list-item__checkbox-box {\n  display: inline-flex;\n  width: 100%;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n  border: 0.125rem solid var(--s-icon-default);\n  border-radius: var(--s-border-radius-s);\n}\n\n.option-list-item__checkbox-icon {\n  display: inline-flex;\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipOptionListItemContext = \"single-select\" | \"multi-select\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-option-list-item.css\",\n  tag: \"flip-option-list-item\",\n})\nexport class FlipOptionListItem {\n  @Prop({ mutable: true }) context?: FlipOptionListItemContext =\n    \"single-select\";\n  @Prop() disabled?: boolean;\n  @Prop() icon?: string;\n  @Prop() label!: string;\n  @Prop({ mutable: true }) selected?: boolean = false;\n  @Prop() value!: string;\n\n  private iconEl: HTMLElement;\n\n  componentDidLoad() {\n    this.forceIconProps();\n  }\n\n  private forceIconProps() {\n    if (!Boolean(this.iconEl)) {\n      return;\n    }\n\n    const icon = this.iconEl.children[0];\n\n    icon?.setAttribute(\"size\", \"24\");\n  }\n\n  render() {\n    const ariaDisabled = this.disabled ? \"true\" : undefined;\n    const ariaSelected = String(this.selected);\n\n    const showCheckbox = this.context === \"multi-select\";\n    const showIcon = Boolean(this.icon) && this.context === \"single-select\";\n    const showSelectionIcon = this.selected && this.context === \"single-select\";\n\n    const className = classnames(\n      \"option-list-item\",\n      `option-list-item--context-${this.context}`,\n      {\n        \"option-list-item--disabled\": this.disabled,\n        \"option-list-item--selected\": this.selected,\n      }\n    );\n\n    return (\n      <Host>\n        <div\n          aria-disabled={ariaDisabled}\n          aria-selected={ariaSelected}\n          class={className}\n          role=\"option\"\n        >\n          {showIcon && (\n            <span\n              class=\"option-list-item__icon\"\n              innerHTML={this.icon}\n              ref={(el) => (this.iconEl = el)}\n            ></span>\n          )}\n          {showCheckbox && (\n            <span class=\"option-list-item__checkbox\">\n              <span class=\"option-list-item__checkbox-box\">\n                {this.selected && (\n                  <flip-icon-check-strong\n                    class=\"option-list-item__checkbox-icon\"\n                    size={16}\n                  ></flip-icon-check-strong>\n                )}\n              </span>\n            </span>\n          )}\n          <span class=\"option-list-item__label\">{this.label}</span>\n          {showSelectionIcon && (\n            <span class=\"option-list-item__selection-icon\">\n              <flip-icon-check-small></flip-icon-check-small>\n            </span>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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

@@ -0,0 +1,38 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const flipOptionListSectionCss = ":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}";
+
+const FlipOptionListSection$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" }, this.label), h("div", { class: "option-list-section__items" }, h("slot", null)))));
+  }
+  static get style() { return flipOptionListSectionCss; }
+}, [1, "flip-option-list-section", {
+    "label": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-option-list-section"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-option-list-section":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipOptionListSection$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipOptionListSection = FlipOptionListSection$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipOptionListSection, defineCustomElement };
+
+//# sourceMappingURL=flip-option-list-section.js.map

package/dist/components/flip-option-list-section.js.map

@@ -0,0 +1 @@
+{"file":"flip-option-list-section.js","mappings":";;AAAA,MAAM,wBAAwB,GAAG,+ZAA+Z;;MCUnbA,uBAAqB;;;;;;EAGhC,MAAM;IACJ,QACE,EAAC,IAAI,QACH,8BAAqB,OAAO,EAAC,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,OAAO,IACnE,YAAM,KAAK,EAAC,4BAA4B,EAAC,EAAE,EAAC,OAAO,IAChD,IAAI,CAAC,KAAK,CACN,EACP,WAAK,KAAK,EAAC,4BAA4B,IACrC,eAAa,CACT,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["FlipOptionListSection"],"sources":["./src/components/flip-option-list-section/flip-option-list-section.css?tag=flip-option-list-section&encapsulation=shadow","./src/components/flip-option-list-section/flip-option-list-section.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.option-list-section {\n  background-color: var(--s-surface-overlay-default);\n}\n\n.option-list-section__label {\n  display: block;\n  width: 100%;\n  padding: var(--s-space-8) var(--s-space-16);\n  border-bottom: var(--s-border-width-default) solid var(--s-border-default);\n  color: var(--s-text-subdued);\n  font-weight: var(--s-font-weight-medium);\n  line-height: var(--s-line-height-base);\n  text-align: left;\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\n\n/**\n * @slot slot - The option list item components\n */\n@Component({\n  shadow: true,\n  styleUrl: \"flip-option-list-section.css\",\n  tag: \"flip-option-list-section\",\n})\nexport class FlipOptionListSection {\n  @Prop() label!: string;\n\n  render() {\n    return (\n      <Host>\n        <div aria-labelledby=\"label\" class=\"option-list-section\" role=\"group\">\n          <span class=\"option-list-section__label\" id=\"label\">\n            {this.label}\n          </span>\n          <div class=\"option-list-section__items\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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

@@ -0,0 +1,196 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { q as querySelectorAllDeep } from './utils.js';
+
+const flipOptionListCss = ":host{display:block}:host *{box-sizing:border-box}";
+
+const FlipOptionList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.value = [];
+    this.onFocus = () => {
+      this.focusItem(0);
+    };
+    this.onClick = (event) => {
+      const target = event.target;
+      const item = target === null || target === void 0 ? void 0 : target.closest("flip-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.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.items = querySelectorAllDeep(this.el, "flip-option-list-item");
+    this.setItemDisabledState();
+    this.setItemContext();
+    this.syncItemsWithValue();
+  }
+  watchDisabled() {
+    this.setItemDisabledState();
+  }
+  watchMultiSelect() {
+    this.setItemContext();
+  }
+  watchValue() {
+    this.syncItemsWithValue();
+  }
+  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];
+    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.children[0].removeAttribute("tabIndex"));
+    const item = this.items[index].shadowRoot.children[0];
+    if (!Boolean(item)) {
+      return;
+    }
+    item.setAttribute("tabIndex", "0");
+    item.focus();
+  }
+  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.children[0])
+      .findIndex((item) => {
+      var _a, _b;
+      return item === document.activeElement ||
+        item ===
+          ((_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[role="option"]'));
+    });
+  }
+  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", onClick: this.onClick, onFocus: this.onFocus, onKeyDown: this.onKeyDown, 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 flipOptionListCss; }
+}, [1, "flip-option-list", {
+    "disabled": [4],
+    "label": [1],
+    "multiSelect": [4, "multi-select"],
+    "value": [1040]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-option-list"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-option-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipOptionList$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipOptionList = FlipOptionList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipOptionList, defineCustomElement };
+
+//# sourceMappingURL=flip-option-list.js.map

package/dist/components/flip-option-list.js.map

@@ -0,0 +1 @@
+{"file":"flip-option-list.js","mappings":"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","names":["FlipOptionList"],"sources":["./src/components/flip-option-list/flip-option-list.css?tag=flip-option-list&encapsulation=shadow","./src/components/flip-option-list/flip-option-list.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from \"@stencil/core\";\nimport { FlipFormInput, querySelectorAllDeep } from \"../../utils\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-option-list.css\",\n  tag: \"flip-option-list\",\n})\nexport class FlipOptionList implements FlipFormInput<string[]> {\n  @Element() el: HTMLElement;\n\n  @Prop() disabled?: boolean;\n  @Prop() label?: string;\n  @Prop() multiSelect?: boolean;\n  @Prop({ mutable: true }) value?: string[] = [];\n\n  @Event() valueChange: EventEmitter<string[]>;\n\n  private items: HTMLFlipOptionListItemElement[];\n\n  componentDidLoad() {\n    this.items = querySelectorAllDeep<HTMLFlipOptionListItemElement>(\n      this.el,\n      \"flip-option-list-item\"\n    );\n\n    this.setItemDisabledState();\n    this.setItemContext();\n    this.syncItemsWithValue();\n  }\n\n  @Watch(\"disabled\")\n  watchDisabled() {\n    this.setItemDisabledState();\n  }\n\n  @Watch(\"multiSelect\")\n  watchMultiSelect() {\n    this.setItemContext();\n  }\n\n  @Watch(\"value\")\n  watchValue() {\n    this.syncItemsWithValue();\n  }\n\n  private onFocus = () => {\n    this.focusItem(0);\n  };\n\n  private onClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item = target?.closest(\"flip-option-list-item\");\n\n    if (!Boolean(item)) {\n      return;\n    }\n\n    this.selectItem(this.items.findIndex((i) => i.value === item.value));\n  };\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"ArrowDown\") {\n      event.preventDefault();\n      this.focusNextItem();\n    } else if (event.code === \"ArrowUp\") {\n      event.preventDefault();\n      this.focusPreviousItem();\n    } else if (event.code === \"Space\") {\n      event.preventDefault();\n      this.selectFocusedItem();\n    } else if (event.code === \"Home\") {\n      event.preventDefault();\n      this.focusItem(0);\n    } else if (event.code === \"End\") {\n      event.preventDefault();\n      this.focusItem(this.items.length - 1);\n    } else if (\n      event.code === \"KeyA\" &&\n      (event.metaKey || event.ctrlKey) &&\n      this.multiSelect\n    ) {\n      event.preventDefault();\n      this.selectAllItems();\n    }\n  };\n\n  private setItemDisabledState() {\n    this.items.forEach((item) => (item.disabled = this.disabled));\n  }\n\n  private setItemContext() {\n    if (this.multiSelect) {\n      this.items.forEach((item) => (item.context = \"multi-select\"));\n    } else {\n      this.items.forEach((item) => (item.context = \"single-select\"));\n\n      if (this.value.length > 1) {\n        this.updateValue([this.value[0]]);\n      }\n    }\n  }\n\n  private selectItem(index: number) {\n    if (this.disabled) {\n      return;\n    }\n\n    const item = this.items[index];\n    const itemIsAlreadySelected = this.value.includes(item.value);\n\n    if (!this.multiSelect) {\n      this.value = [];\n    }\n\n    if (!itemIsAlreadySelected) {\n      this.updateValue([...this.value, item.value]);\n    } else {\n      this.updateValue(this.value.filter((v) => v !== item.value));\n    }\n  }\n\n  private updateValue(value: string[]) {\n    this.value = value;\n    this.valueChange.emit(this.value);\n  }\n\n  private selectFocusedItem() {\n    if (this.disabled || this.getActiveItemIndex() === -1) {\n      return;\n    }\n\n    this.selectItem(this.getActiveItemIndex());\n  }\n\n  private selectAllItems() {\n    if (this.disabled) {\n      return;\n    }\n\n    const alreadySelected = this.items.every((item) =>\n      this.value.includes(item.value)\n    );\n\n    if (alreadySelected) {\n      this.updateValue([]);\n    } else {\n      this.updateValue(this.items.map((item) => item.value));\n    }\n  }\n\n  private syncItemsWithValue() {\n    this.items.forEach(\n      (item) => (item.selected = this.value.includes(item.value))\n    );\n  }\n\n  private focusItem(index: number) {\n    if (this.disabled) {\n      return;\n    }\n\n    this.items.forEach((item) =>\n      item.shadowRoot.children[0].removeAttribute(\"tabIndex\")\n    );\n\n    const item = this.items[index].shadowRoot.children[0] as HTMLElement;\n\n    if (!Boolean(item)) {\n      return;\n    }\n\n    item.setAttribute(\"tabIndex\", \"0\");\n    item.focus();\n  }\n\n  private focusNextItem() {\n    if (this.disabled) {\n      return;\n    }\n\n    const activeItemIndex = this.getActiveItemIndex();\n    const newIndex = Math.min(activeItemIndex + 1, this.items.length - 1);\n\n    this.focusItem(newIndex);\n  }\n\n  private focusPreviousItem() {\n    const activeItemIndex = this.getActiveItemIndex();\n    const newIndex = Math.max(activeItemIndex - 1, 0);\n\n    this.focusItem(newIndex);\n  }\n\n  private getActiveItemIndex(): number {\n    return this.items\n      .map((item) => item.shadowRoot.children[0])\n      .findIndex(\n        (item) =>\n          item === document.activeElement ||\n          item ===\n            document.activeElement?.shadowRoot?.querySelector('[role=\"option\"]')\n      );\n  }\n\n  render() {\n    const ariaMultiselectable = this.multiSelect ? \"true\" : undefined;\n    const tabIndex = this.disabled ? -1 : 0;\n\n    return (\n      <Host>\n        <div\n          aria-label={this.label}\n          aria-multiselectable={ariaMultiselectable}\n          class=\"option-list\"\n          onClick={this.onClick}\n          onFocus={this.onFocus}\n          onKeyDown={this.onKeyDown}\n          role=\"listbox\"\n          tabIndex={tabIndex}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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