@getflip/swirl-components 0.4.0 → 0.5.0

package/dist/components/flip-icon-time-filled.js

@@ -35,5 +35,3 @@ const FlipIconTimeFilled = FlipIconTimeFilled$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipIconTimeFilled, defineCustomElement };
-
-//# sourceMappingURL=flip-icon-time-filled.js.map

package/dist/components/flip-icon-time-outlined.js

@@ -35,5 +35,3 @@ const FlipIconTimeOutlined = FlipIconTimeOutlined$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipIconTimeOutlined, defineCustomElement };
-
-//# sourceMappingURL=flip-icon-time-outlined.js.map

package/dist/components/flip-icon-today.js

@@ -4,5 +4,3 @@ const FlipIconToday = FlipIconToday$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipIconToday, defineCustomElement };
-
-//# sourceMappingURL=flip-icon-today.js.map

package/dist/components/flip-icon-today2.js

@@ -32,5 +32,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { FlipIconToday as F, defineCustomElement as d };
-
-//# sourceMappingURL=flip-icon-today2.js.map

package/dist/components/flip-icon-user-assign.js

@@ -35,5 +35,3 @@ const FlipIconUserAssign = FlipIconUserAssign$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipIconUserAssign, defineCustomElement };
-
-//# sourceMappingURL=flip-icon-user-assign.js.map

package/dist/components/flip-icon-video-camera.js

@@ -35,5 +35,3 @@ const FlipIconVideoCamera = FlipIconVideoCamera$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipIconVideoCamera, defineCustomElement };
-
-//# sourceMappingURL=flip-icon-video-camera.js.map

package/dist/components/flip-icon-visibility-off.js

@@ -4,5 +4,3 @@ const FlipIconVisibilityOff = FlipIconVisibilityOff$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipIconVisibilityOff, defineCustomElement };
-
-//# sourceMappingURL=flip-icon-visibility-off.js.map

package/dist/components/flip-icon-visibility-off2.js

@@ -32,5 +32,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { FlipIconVisibilityOff as F, defineCustomElement as d };
-
-//# sourceMappingURL=flip-icon-visibility-off2.js.map

package/dist/components/flip-icon-visibility.js

@@ -4,5 +4,3 @@ const FlipIconVisibility = FlipIconVisibility$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipIconVisibility, defineCustomElement };
-
-//# sourceMappingURL=flip-icon-visibility.js.map

package/dist/components/flip-icon-visibility2.js

@@ -32,5 +32,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { FlipIconVisibility as F, defineCustomElement as d };
-
-//# sourceMappingURL=flip-icon-visibility2.js.map

package/dist/components/flip-icon-warning.js

@@ -35,5 +35,3 @@ const FlipIconWarning = FlipIconWarning$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipIconWarning, defineCustomElement };
-
-//# sourceMappingURL=flip-icon-warning.js.map

package/dist/components/flip-inline-error.js

@@ -4,5 +4,3 @@ const FlipInlineError = FlipInlineError$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipInlineError, defineCustomElement };
-
-//# sourceMappingURL=flip-inline-error.js.map

package/dist/components/flip-inline-error2.js

@@ -42,5 +42,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { FlipInlineError as F, defineCustomElement as d };
-
-//# sourceMappingURL=flip-inline-error2.js.map

package/dist/components/flip-lightbox.js

@@ -251,5 +251,3 @@ const FlipLightbox = FlipLightbox$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipLightbox, defineCustomElement };
-
-//# sourceMappingURL=flip-lightbox.js.map

package/dist/components/flip-link.js

@@ -36,5 +36,3 @@ const FlipLink = FlipLink$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipLink, defineCustomElement };
-
-//# sourceMappingURL=flip-link.js.map

package/dist/components/flip-list.js

@@ -37,5 +37,3 @@ const FlipList = FlipList$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipList, defineCustomElement };
-
-//# sourceMappingURL=flip-list.js.map

package/dist/components/flip-modal.js

@@ -7,13 +7,15 @@ 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--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: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-base);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{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: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-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 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--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: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-base);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{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:none}}.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 FlipModal$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";
@@ -34,11 +36,9 @@ const FlipModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     this.onPrimaryAction = (event) => {
       this.primaryAction.emit(event);
-      this.close();
     };
     this.onSecondaryAction = (event) => {
       this.secondaryAction.emit(event);
-      this.close();
     };
     this.determineScrollStatus = () => {
       var _a, _b, _c, _d, _e, _f;
@@ -73,6 +73,7 @@ const FlipModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    */
   async open() {
     this.modal.show();
+    this.modalOpen.emit();
     this.lockBodyScroll();
     this.determineScrollStatus();
   }
@@ -87,6 +88,7 @@ const FlipModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.unlockBodyScroll();
     setTimeout(() => {
       this.modal.hide();
+      this.modalClose.emit();
       this.closing = false;
     }, 150);
   }
@@ -157,5 +159,3 @@ const FlipModal = FlipModal$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipModal, defineCustomElement };
-
-//# sourceMappingURL=flip-modal.js.map

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

@@ -1,77 +1,6 @@
-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();
+import { F as FlipOptionListItem$1, d as defineCustomElement$1 } from './flip-option-list-item2.js';
 
 const FlipOptionListItem = FlipOptionListItem$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipOptionListItem, defineCustomElement };
-
-//# sourceMappingURL=flip-option-list-item.js.map

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

@@ -0,0 +1,72 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$2 } from './flip-icon-check-small2.js';
+import { d as defineCustomElement$1 } 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 = /*@__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() {
+  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);
+      }
+      break;
+    case "flip-icon-check-small":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "flip-icon-check-strong":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { FlipOptionListItem as F, defineCustomElement as d };

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

@@ -34,5 +34,3 @@ const FlipOptionListSection = FlipOptionListSection$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipOptionListSection, defineCustomElement };
-
-//# sourceMappingURL=flip-option-list-section.js.map

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

@@ -1,196 +1,6 @@
-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();
+import { F as FlipOptionList$1, d as defineCustomElement$1 } from './flip-option-list2.js';
 
 const FlipOptionList = FlipOptionList$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipOptionList, defineCustomElement };
-
-//# sourceMappingURL=flip-option-list.js.map