@getflip/swirl-components 0.2.0 → 0.3.0

package/dist/cjs/flip-modal.cjs.entry.js

@@ -0,0 +1,100 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-72831c5f.js');
+const a11yDialog_esm = require('./a11y-dialog.esm-4a3287ed.js');
+const bodyScrollLock_esm = require('./bodyScrollLock.esm-f29f1a77.js');
+const index$1 = require('./index-b8470262.js');
+require('./_commonjsHelpers-a5111d61.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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.primaryAction = index.createEvent(this, "primaryAction", 7);
+    this.secondaryAction = index.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_esm.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() {
+    bodyScrollLock_esm.disableBodyScroll(this.scrollContainer);
+  }
+  unlockBodyScroll() {
+    bodyScrollLock_esm.enableBodyScroll(this.scrollContainer);
+  }
+  render() {
+    const className = index$1.classnames("modal", {
+      "modal--closing": this.closing,
+      "modal--scrolled": this.scrolled,
+    });
+    return (index.h(index.Host, null, index.h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "modal", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, index.h("div", { class: "modal__backdrop", onClick: this.onBackdropClick }), index.h("div", { class: "modal__body", role: "document" }, index.h("flip-button", { class: "modal__close-button", hideLabel: true, icon: "<flip-icon-close></flip-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), index.h("header", { class: "modal__header" }, index.h("flip-heading", { as: "h2", class: "modal__heading", level: 3, text: this.label })), index.h("div", { class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, index.h("slot", null)), index.h("footer", { class: "modal__controls" }, index.h("flip-button-group", { wrap: true }, this.secondaryActionLabel && (index.h("flip-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("flip-button", { intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))));
+  }
+};
+FlipModal.style = flipModalCss;
+
+exports.flip_modal = FlipModal;
+
+//# sourceMappingURL=flip-modal.cjs.entry.js.map

package/dist/cjs/flip-modal.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-modal.entry.cjs.js","mappings":"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","names":["A11yDialog","disableBodyScroll","enableBodyScroll","classnames","h","Host"],"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/cjs/flip-option-list-item.cjs.entry.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-72831c5f.js');
+const index$1 = require('./index-b8470262.js');
+require('./_commonjsHelpers-a5111d61.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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    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 = index$1.classnames("option-list-item", `option-list-item--context-${this.context}`, {
+      "option-list-item--disabled": this.disabled,
+      "option-list-item--selected": this.selected,
+    });
+    return (index.h(index.Host, null, index.h("div", { "aria-disabled": ariaDisabled, "aria-selected": ariaSelected, class: className, role: "option" }, showIcon && (index.h("span", { class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), showCheckbox && (index.h("span", { class: "option-list-item__checkbox" }, index.h("span", { class: "option-list-item__checkbox-box" }, this.selected && (index.h("flip-icon-check-strong", { class: "option-list-item__checkbox-icon", size: 16 }))))), index.h("span", { class: "option-list-item__label" }, this.label), showSelectionIcon && (index.h("span", { class: "option-list-item__selection-icon" }, index.h("flip-icon-check-small", null))))));
+  }
+};
+FlipOptionListItem.style = flipOptionListItemCss;
+
+exports.flip_option_list_item = FlipOptionListItem;
+
+//# sourceMappingURL=flip-option-list-item.cjs.entry.js.map

package/dist/cjs/flip-option-list-item.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-option-list-item.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,qBAAqB,GAAG,i0EAAi0E;;MCUl1E,kBAAkB;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,GAAGA,kBAAU,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,QACEC,QAACC,UAAI,QACHD,kCACiB,YAAY,mBACZ,YAAY,EAC3B,KAAK,EAAE,SAAS,EAChB,IAAI,EAAC,QAAQ,IAEZ,QAAQ,KACPA,kBACE,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,KACXA,kBAAM,KAAK,EAAC,4BAA4B,IACtCA,kBAAM,KAAK,EAAC,gCAAgC,IACzC,IAAI,CAAC,QAAQ,KACZA,oCACE,KAAK,EAAC,iCAAiC,EACvC,IAAI,EAAE,EAAE,GACgB,CAC3B,CACI,CACF,CACR,EACDA,kBAAM,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACxD,iBAAiB,KAChBA,kBAAM,KAAK,EAAC,kCAAkC,IAC5CA,sCAA+C,CAC1C,CACR,CACG,CACD,EACP;GACH;;;;;;","names":["classnames","h","Host"],"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/cjs/flip-option-list-section.cjs.entry.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-72831c5f.js');
+
+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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { "aria-labelledby": "label", class: "option-list-section", role: "group" }, index.h("span", { class: "option-list-section__label", id: "label" }, this.label), index.h("div", { class: "option-list-section__items" }, index.h("slot", null)))));
+  }
+};
+FlipOptionListSection.style = flipOptionListSectionCss;
+
+exports.flip_option_list_section = FlipOptionListSection;
+
+//# sourceMappingURL=flip-option-list-section.cjs.entry.js.map

package/dist/cjs/flip-option-list-section.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-option-list-section.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,wBAAwB,GAAG,+ZAA+Z;;MCUnb,qBAAqB;;;;EAGhC,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,oCAAqB,OAAO,EAAC,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,OAAO,IACnEA,kBAAM,KAAK,EAAC,4BAA4B,EAAC,EAAE,EAAC,OAAO,IAChD,IAAI,CAAC,KAAK,CACN,EACPA,iBAAK,KAAK,EAAC,4BAA4B,IACrCA,qBAAa,CACT,CACF,CACD,EACP;GACH;;;;;;","names":["h","Host"],"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/cjs/flip-option-list.cjs.entry.js

@@ -0,0 +1,176 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-72831c5f.js');
+const utils = require('./utils-9018ae5a.js');
+
+const flipOptionListCss = ":host{display:block}:host *{box-sizing:border-box}";
+
+const FlipOptionList = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.valueChange = index.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 = utils.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 (index.h(index.Host, null, index.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 }, index.h("slot", null))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "disabled": ["watchDisabled"],
+    "multiSelect": ["watchMultiSelect"],
+    "value": ["watchValue"]
+  }; }
+};
+FlipOptionList.style = flipOptionListCss;
+
+exports.flip_option_list = FlipOptionList;
+
+//# sourceMappingURL=flip-option-list.cjs.entry.js.map

package/dist/cjs/flip-option-list.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-option-list.entry.cjs.js","mappings":"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","names":["querySelectorAllDeep","h","Host"],"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/cjs/flip-pagination.cjs.entry.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-72831c5f.js');
+const index$1 = require('./index-b8470262.js');
+require('./_commonjsHelpers-a5111d61.js');
+
+const flipPaginationCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.pagination{display:block;width:100%}.pagination--variant-simple .pagination__list{gap:var(--s-space-4)}.pagination__list{display:flex;margin:0;padding:0;justify-content:flex-start;align-items:center;line-height:var(--s-line-height-base);list-style:none;gap:var(--s-space-8)}@media (--from-tablet){.pagination__list{gap:var(--s-space-16)}}.pagination__advanced-label{display:flex;align-items:center;gap:var(--s-space-8);white-space:nowrap}.pagination__page-select-container{position:relative}.pagination__page-select{display:inline-flex;padding-right:var(--s-space-16);border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:center;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pagination__page-select:focus{outline-color:var(--s-focus-default)}.pagination__page-select-icon{position:absolute;top:50%;right:0;transform:translateY(-50%);pointer-events:none}";
+
+const FlipPagination = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.setPage = index.createEvent(this, "setPage", 7);
+    this.accessibleNextButtonLabel = "Next page";
+    this.accessiblePrevButtonLabel = "Previous page";
+    this.nextButtonLabel = "Next";
+    this.pageLabel = "out of";
+    this.prevButtonLabel = "Prev";
+    this.pageSelectLabel = "Select a page";
+    this.variant = "default";
+    this.onPrevButtonClick = () => {
+      const prevPage = Math.max(this.page - 1, 1);
+      if (this.page === prevPage) {
+        return;
+      }
+      this.setPage.emit(prevPage);
+    };
+    this.onNextButtonClick = () => {
+      const nextPage = Math.min(this.page + 1, this.pages);
+      if (this.page === nextPage) {
+        return;
+      }
+      this.setPage.emit(nextPage);
+    };
+    this.onSelect = (event) => {
+      const page = +event.target.value;
+      if (this.page === page) {
+        return;
+      }
+      this.setPage.emit(page);
+    };
+  }
+  render() {
+    const hideButtonLabels = this.variant !== "advanced";
+    const showPageLabel = this.variant !== "simple";
+    const showDropDown = this.variant === "advanced";
+    const ariaPageLabel = `${this.page} ${this.pageLabel} ${this.pages}`;
+    const className = index$1.classnames("pagination", `pagination--variant-${this.variant}`);
+    return (index.h(index.Host, null, index.h("nav", { "aria-label": this.label, class: className }, index.h("ul", { class: "pagination__list" }, index.h("li", { class: "pagination__list-item" }, index.h("flip-button", { class: "pagination__prev-button", disabled: this.page <= 1, flipAriaLabel: this.accessiblePrevButtonLabel, hideLabel: hideButtonLabels, icon: "<flip-icon-chevron-left></flip-icon-chevron-left>", intent: "primary", label: this.prevButtonLabel, onClick: this.onPrevButtonClick })), showPageLabel ? (index.h("li", { class: "pagination__list-item" }, index.h("span", null, showDropDown ? (index.h("span", { "aria-current": "page", class: "pagination__advanced-label" }, index.h("span", { class: "pagination__page-select-container" }, index.h("select", { "aria-label": this.pageSelectLabel, class: "pagination__page-select", onChange: this.onSelect }, new Array(this.pages)
+      .fill(undefined)
+      .map((_, index) => index + 1)
+      .map((page) => (index.h("option", { selected: this.page === page, value: String(page) }, page)))), index.h("flip-icon-expand-more", { "aria-hidden": "true", class: "pagination__page-select-icon", size: 16 })), index.h("span", { "aria-hidden": "true" }, this.pageLabel, " ", this.pages))) : (index.h("span", { "aria-current": "page" }, ariaPageLabel))))) : (index.h("li", { class: "pagination__list-item" }, index.h("flip-visually-hidden", null, index.h("span", { "aria-current": "page" }, ariaPageLabel)))), index.h("li", { class: "pagination__list-item" }, index.h("flip-button", { class: "pagination__next-button", disabled: this.page >= this.pages, flipAriaLabel: this.accessibleNextButtonLabel, hideLabel: hideButtonLabels, icon: "<flip-icon-chevron-right></flip-icon-chevron-right>", iconPosition: "end", intent: "primary", label: this.nextButtonLabel, onClick: this.onNextButtonClick }))))));
+  }
+};
+FlipPagination.style = flipPaginationCss;
+
+exports.flip_pagination = FlipPagination;
+
+//# sourceMappingURL=flip-pagination.cjs.entry.js.map

package/dist/cjs/flip-pagination.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-pagination.entry.cjs.js","mappings":"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","names":["classnames","h","Host"],"sources":["./src/components/flip-pagination/flip-pagination.css?tag=flip-pagination&encapsulation=shadow","./src/components/flip-pagination/flip-pagination.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.pagination {\n  display: block;\n  width: 100%;\n}\n\n.pagination--variant-simple {\n  & .pagination__list {\n    gap: var(--s-space-4);\n  }\n}\n\n.pagination__list {\n  display: flex;\n  margin: 0;\n  padding: 0;\n  justify-content: flex-start;\n  align-items: center;\n  line-height: var(--s-line-height-base);\n  list-style: none;\n  gap: var(--s-space-8);\n\n  @media (--from-tablet) {\n    gap: var(--s-space-16);\n  }\n}\n\n.pagination__advanced-label {\n  display: flex;\n  align-items: center;\n  gap: var(--s-space-8);\n  white-space: nowrap;\n}\n\n.pagination__page-select-container {\n  position: relative;\n}\n\n.pagination__page-select {\n  display: inline-flex;\n  padding-right: var(--s-space-16);\n  border: none;\n  background-color: transparent;\n  font: inherit;\n  line-height: var(--s-line-height-base);\n  text-align: center;\n  cursor: pointer;\n  appearance: none;\n\n  &:focus {\n    outline-color: var(--s-focus-default);\n  }\n}\n\n.pagination__page-select-icon {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n  pointer-events: none;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipPaginationVariant = \"default\" | \"simple\" | \"advanced\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-pagination.css\",\n  tag: \"flip-pagination\",\n})\nexport class FlipPagination {\n  @Prop() accessibleNextButtonLabel?: string = \"Next page\";\n  @Prop() accessiblePrevButtonLabel?: string = \"Previous page\";\n  @Prop() nextButtonLabel?: string = \"Next\";\n  @Prop() pageLabel?: string = \"out of\";\n  @Prop() prevButtonLabel?: string = \"Prev\";\n  @Prop() label!: string;\n  @Prop() page!: number;\n  @Prop() pages!: number;\n  @Prop() pageSelectLabel?: string = \"Select a page\";\n  @Prop() variant?: FlipPaginationVariant = \"default\";\n\n  @Event() setPage: EventEmitter<number>;\n\n  private onPrevButtonClick = () => {\n    const prevPage = Math.max(this.page - 1, 1);\n\n    if (this.page === prevPage) {\n      return;\n    }\n\n    this.setPage.emit(prevPage);\n  };\n\n  private onNextButtonClick = () => {\n    const nextPage = Math.min(this.page + 1, this.pages);\n\n    if (this.page === nextPage) {\n      return;\n    }\n\n    this.setPage.emit(nextPage);\n  };\n\n  private onSelect = (event: Event) => {\n    const page = +(event.target as HTMLSelectElement).value;\n\n    if (this.page === page) {\n      return;\n    }\n\n    this.setPage.emit(page);\n  };\n\n  render() {\n    const hideButtonLabels = this.variant !== \"advanced\";\n    const showPageLabel = this.variant !== \"simple\";\n    const showDropDown = this.variant === \"advanced\";\n\n    const ariaPageLabel = `${this.page} ${this.pageLabel} ${this.pages}`;\n\n    const className = classnames(\n      \"pagination\",\n      `pagination--variant-${this.variant}`\n    );\n\n    return (\n      <Host>\n        <nav aria-label={this.label} class={className}>\n          <ul class=\"pagination__list\">\n            <li class=\"pagination__list-item\">\n              <flip-button\n                class=\"pagination__prev-button\"\n                disabled={this.page <= 1}\n                flipAriaLabel={this.accessiblePrevButtonLabel}\n                hideLabel={hideButtonLabels}\n                icon=\"<flip-icon-chevron-left></flip-icon-chevron-left>\"\n                intent=\"primary\"\n                label={this.prevButtonLabel}\n                onClick={this.onPrevButtonClick}\n              ></flip-button>\n            </li>\n            {showPageLabel ? (\n              <li class=\"pagination__list-item\">\n                <span>\n                  {showDropDown ? (\n                    <span\n                      aria-current=\"page\"\n                      class=\"pagination__advanced-label\"\n                    >\n                      <span class=\"pagination__page-select-container\">\n                        <select\n                          aria-label={this.pageSelectLabel}\n                          class=\"pagination__page-select\"\n                          onChange={this.onSelect}\n                        >\n                          {new Array(this.pages)\n                            .fill(undefined)\n                            .map((_, index) => index + 1)\n                            .map((page) => (\n                              <option\n                                selected={this.page === page}\n                                value={String(page)}\n                              >\n                                {page}\n                              </option>\n                            ))}\n                        </select>\n                        <flip-icon-expand-more\n                          aria-hidden=\"true\"\n                          class=\"pagination__page-select-icon\"\n                          size={16}\n                        ></flip-icon-expand-more>\n                      </span>\n                      <span aria-hidden=\"true\">\n                        {this.pageLabel} {this.pages}\n                      </span>\n                    </span>\n                  ) : (\n                    <span aria-current=\"page\">{ariaPageLabel}</span>\n                  )}\n                </span>\n              </li>\n            ) : (\n              <li class=\"pagination__list-item\">\n                <flip-visually-hidden>\n                  <span aria-current=\"page\">{ariaPageLabel}</span>\n                </flip-visually-hidden>\n              </li>\n            )}\n            <li class=\"pagination__list-item\">\n              <flip-button\n                class=\"pagination__next-button\"\n                disabled={this.page >= this.pages}\n                flipAriaLabel={this.accessibleNextButtonLabel}\n                hideLabel={hideButtonLabels}\n                icon=\"<flip-icon-chevron-right></flip-icon-chevron-right>\"\n                iconPosition=\"end\"\n                intent=\"primary\"\n                label={this.nextButtonLabel}\n                onClick={this.onNextButtonClick}\n              ></flip-button>\n            </li>\n          </ul>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/flip-progress-indicator.cjs.entry.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-72831c5f.js');
+const index$1 = require('./index-b8470262.js');
+require('./_commonjsHelpers-a5111d61.js');
+
+const flipProgressIndicatorCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}:host(.circle){display:inline-flex;width:auto}.progress-indicator--variant-bar{display:block;width:100%;height:0.25rem;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress-indicator--variant-bar::-webkit-progress-bar{border-radius:0.125rem;background-color:var(--s-surface-raised-default)}.progress-indicator--variant-bar::-webkit-progress-value{border-radius:0.125rem;background-color:var(--s-surface-highlight-default);-webkit-transition:width 0.25s;transition:width 0.25s}.progress-indicator--variant-bar::-moz-progress-bar{height:0.25rem;border-radius:0.125rem;background-color:var(--s-surface-highlight-default);-moz-transition:width 0.25s;transition:width 0.25s}@media (prefers-reduced-motion){.progress-indicator--variant-bar::-moz-progress-bar{-moz-transition:none;transition:none}}.progress-indicator--variant-bar.progress-indicator--size-s{height:0.125rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar{height:0.125rem;border-radius:0.0625rem}.progress-indicator--variant-circle{position:relative;display:inline-flex;overflow:hidden;width:3rem;height:3rem}.progress-indicator--variant-circle.progress-indicator--size-s{width:1.5rem;height:1.5rem}.progress-indicator__circle{position:absolute;width:100%;height:100%;transform:rotate(-90deg);inset:0}.progress-indicator__circle-background{stroke:var(--s-border-default);stroke-linecap:round}.progress-indicator__circle-value{transition:stroke-dashoffset 0.25s;stroke:var(--s-interactive-primary-default);stroke-linecap:round}@media (prefers-reduced-motion){.progress-indicator__circle-value{transition:none}}";
+
+const FlipProgressIndicator = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.size = "m";
+    this.value = 0;
+    this.variant = "bar";
+  }
+  render() {
+    const className = index$1.classnames("progress-indicator", `progress-indicator--size-${this.size}`, `progress-indicator--variant-${this.variant}`);
+    const strokeWidth = this.size === "m" ? 4 : 2;
+    const radius = this.size === "m" ? 20 : 10;
+    const circumference = Math.round(radius * 2 * Math.PI);
+    const dashOffset = Math.round(circumference * ((100 - this.value) / 100));
+    return (index.h(index.Host, { class: this.variant }, this.variant === "bar" && (index.h("progress", { "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className, max: 100, value: this.value })), this.variant === "circle" && (index.h("span", { role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className }, index.h("svg", { class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(radius + strokeWidth) * 2} ${(radius + strokeWidth) * 2}` }, index.h("circle", { class: "progress-indicator__circle-background", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth }), index.h("circle", { class: "progress-indicator__circle-value", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth, "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))))));
+  }
+};
+FlipProgressIndicator.style = flipProgressIndicatorCss;
+
+exports.flip_progress_indicator = FlipProgressIndicator;
+
+//# sourceMappingURL=flip-progress-indicator.cjs.entry.js.map

package/dist/cjs/flip-progress-indicator.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-progress-indicator.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,wBAAwB,GAAG,i3DAAi3D;;MCYr4D,qBAAqB;EALlC;;IAOU,SAAI,GAA+B,GAAG,CAAC;IACvC,UAAK,GAAY,CAAC,CAAC;IACnB,YAAO,GAAkC,KAAK,CAAC;GAmExD;EAjEC,MAAM;IACJ,MAAM,SAAS,GAAGA,kBAAU,CAC1B,oBAAoB,EACpB,4BAA4B,IAAI,CAAC,IAAI,EAAE,EACvC,+BAA+B,IAAI,CAAC,OAAO,EAAE,CAC9C,CAAC;IAEF,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9C,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,EAAE,GAAG,EAAE,CAAC;IAC3C,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;IACvD,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,CAAC,CAAC;IAE1E,QACEC,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,OAAO,IACtB,IAAI,CAAC,OAAO,KAAK,KAAK,KACrBD,oCACc,IAAI,CAAC,KAAK,mBACP,GAAG,mBACH,CAAC,mBACD,IAAI,CAAC,KAAK,EACzB,KAAK,EAAE,SAAS,EAChB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,IAAI,CAAC,KAAK,GACP,CACb,EACA,IAAI,CAAC,OAAO,KAAK,QAAQ,KACxBA,kBACE,IAAI,EAAC,aAAa,gBACN,IAAI,CAAC,KAAK,mBACP,GAAG,mBACH,CAAC,mBACD,IAAI,CAAC,KAAK,EACzB,KAAK,EAAE,SAAS,IAEhBA,iBACE,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,OAAO,CAAC,MAAM,GAAG,WAAW,IAAI,CAAC,IACxC,CAAC,MAAM,GAAG,WAAW,IAAI,CAC3B,EAAE,IAEFA,oBACE,KAAK,EAAC,uCAAuC,EAC7C,EAAE,EAAE,MAAM,GAAG,WAAW,EACxB,EAAE,EAAE,MAAM,GAAG,WAAW,EACxB,CAAC,EAAE,MAAM,EACT,IAAI,EAAC,MAAM,kBACG,WAAW,GACzB,EACFA,oBACE,KAAK,EAAC,kCAAkC,EACxC,EAAE,EAAE,MAAM,GAAG,WAAW,EACxB,EAAE,EAAE,MAAM,GAAG,WAAW,EACxB,CAAC,EAAE,MAAM,EACT,IAAI,EAAC,MAAM,kBACG,WAAW,sBACP,aAAa,uBACZ,UAAU,GAC7B,CACE,CACD,CACR,CACI,EACP;GACH;;;;;;","names":["classnames","h","Host"],"sources":["./src/components/flip-progress-indicator/flip-progress-indicator.css?tag=flip-progress-indicator&encapsulation=shadow","./src/components/flip-progress-indicator/flip-progress-indicator.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n:host(.circle) {\n  display: inline-flex;\n  width: auto;\n}\n\n.progress-indicator {\n}\n\n.progress-indicator--variant-bar {\n  display: block;\n  width: 100%;\n  height: 0.25rem;\n  border: none;\n  appearance: none;\n\n  &::-webkit-progress-bar {\n    border-radius: 0.125rem;\n    background-color: var(--s-surface-raised-default);\n  }\n\n  &::-webkit-progress-value {\n    border-radius: 0.125rem;\n    background-color: var(--s-surface-highlight-default);\n    transition: width 0.25s;\n  }\n\n  &::-moz-progress-bar {\n    height: 0.25rem;\n    border-radius: 0.125rem;\n    background-color: var(--s-surface-highlight-default);\n    transition: width 0.25s;\n\n    @media (prefers-reduced-motion) {\n      transition: none;\n    }\n  }\n\n  &.progress-indicator--size-s {\n    height: 0.125rem;\n\n    &::-webkit-progress-bar {\n      border-radius: 0.0625rem;\n    }\n\n    &::-webkit-progress-value {\n      border-radius: 0.0625rem;\n    }\n\n    &::-moz-progress-bar {\n      height: 0.125rem;\n      border-radius: 0.0625rem;\n    }\n  }\n}\n\n.progress-indicator--variant-circle {\n  position: relative;\n  display: inline-flex;\n  overflow: hidden;\n  width: 3rem;\n  height: 3rem;\n\n  &.progress-indicator--size-s {\n    width: 1.5rem;\n    height: 1.5rem;\n  }\n}\n\n.progress-indicator__circle {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  transform: rotate(-90deg);\n  inset: 0;\n}\n\n.progress-indicator__circle-background {\n  stroke: var(--s-border-default);\n  stroke-linecap: round;\n}\n\n.progress-indicator__circle-value {\n  transition: stroke-dashoffset 0.25s;\n  stroke: var(--s-interactive-primary-default);\n  stroke-linecap: round;\n\n  @media (prefers-reduced-motion) {\n    transition: none;\n  }\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipProgressIndicatorSize = \"s\" | \"m\";\n\nexport type FlipProgressIndicatorVariant = \"bar\" | \"circle\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-progress-indicator.css\",\n  tag: \"flip-progress-indicator\",\n})\nexport class FlipProgressIndicator {\n  @Prop() label!: string;\n  @Prop() size?: FlipProgressIndicatorSize = \"m\";\n  @Prop() value?: number = 0;\n  @Prop() variant?: FlipProgressIndicatorVariant = \"bar\";\n\n  render() {\n    const className = classnames(\n      \"progress-indicator\",\n      `progress-indicator--size-${this.size}`,\n      `progress-indicator--variant-${this.variant}`\n    );\n\n    const strokeWidth = this.size === \"m\" ? 4 : 2;\n    const radius = this.size === \"m\" ? 20 : 10;\n    const circumference = Math.round(radius * 2 * Math.PI);\n    const dashOffset = Math.round(circumference * ((100 - this.value) / 100));\n\n    return (\n      <Host class={this.variant}>\n        {this.variant === \"bar\" && (\n          <progress\n            aria-label={this.label}\n            aria-valuemax={100}\n            aria-valuemin={0}\n            aria-valuenow={this.value}\n            class={className}\n            max={100}\n            value={this.value}\n          ></progress>\n        )}\n        {this.variant === \"circle\" && (\n          <span\n            role=\"progressbar\"\n            aria-label={this.label}\n            aria-valuemax={100}\n            aria-valuemin={0}\n            aria-valuenow={this.value}\n            class={className}\n          >\n            <svg\n              class=\"progress-indicator__circle\"\n              focusable=\"false\"\n              viewBox={`0 0 ${(radius + strokeWidth) * 2} ${\n                (radius + strokeWidth) * 2\n              }`}\n            >\n              <circle\n                class=\"progress-indicator__circle-background\"\n                cx={radius + strokeWidth}\n                cy={radius + strokeWidth}\n                r={radius}\n                fill=\"none\"\n                stroke-width={strokeWidth}\n              />\n              <circle\n                class=\"progress-indicator__circle-value\"\n                cx={radius + strokeWidth}\n                cy={radius + strokeWidth}\n                r={radius}\n                fill=\"none\"\n                stroke-width={strokeWidth}\n                stroke-dasharray={circumference}\n                stroke-dashoffset={dashOffset}\n              />\n            </svg>\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/flip-radio-group.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bd89db61.js');
+const index = require('./index-72831c5f.js');
 
 const flipRadioGroupCss = ".sc-flip-radio-group-h{display:block}.sc-flip-radio-group-h *.sc-flip-radio-group{box-sizing:border-box}.radio-group.sc-flip-radio-group{display:flex;flex-direction:column;gap:var(--s-space-4)}";
 
@@ -31,6 +31,7 @@ const FlipRadioGroup = class {
       radio.addEventListener("valueChange", () => {
         if (radio.checked === true || radio.checked === "true") {
           this.valueChange.emit(radio.value);
+          this.value = radio.value;
           this.radioButtons.forEach((r, k) => {
             if (String(k) === key) {
               return;
@@ -42,10 +43,12 @@ const FlipRadioGroup = class {
     }
   }
   render() {
-    return (index.h(index.Host, { role: "radiogroup" }, index.h("div", { class: "radio-group" }, index.h("slot", null))));
+    return (index.h(index.Host, { "aria-describedby": this.flipAriaDescribedby, role: "radiogroup" }, index.h("div", { class: "radio-group" }, index.h("slot", null))));
   }
   get el() { return index.getElement(this); }
 };
 FlipRadioGroup.style = flipRadioGroupCss;
 
 exports.flip_radio_group = FlipRadioGroup;
+
+//# sourceMappingURL=flip-radio-group.cjs.entry.js.map

package/dist/cjs/flip-radio-group.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-radio-group.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,mMAAmM;;MCsBhN,cAAc;;;;;EAUzB,gBAAgB;IACd,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC;IACvE,IAAI,CAAC,SAAS,EAAE,CAAC;IACjB,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAEO,SAAS;IACf,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;MAC5B,OAAO;KACR;IAED,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAC3C,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CACtC,CAAC;IAEF,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE;MAC5B,OAAO;KACR;IAED,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;GAC/B;EAEO,kBAAkB;IACxB,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;MAC5D,KAAK,CAAC,gBAAgB,CAAC,aAAa,EAAE;QACpC,IAAI,KAAK,CAAC,OAAO,KAAK,IAAI,IAAI,KAAK,CAAC,OAAO,KAAK,MAAM,EAAE;UACtD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;UACnC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;UAEzB,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YAC7B,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;cACrB,OAAO;aACR;YAED,CAAC,CAAC,OAAO,GAAG,KAAK,CAAC;WACnB,CAAC,CAAC;SACJ;OACF,CAAC,CAAC;KACJ;GACF;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,wBAAmB,IAAI,CAAC,mBAAmB,EAAE,IAAI,EAAC,YAAY,IACjED,iBAAK,KAAK,EAAC,aAAa,IACtBA,qBAAa,CACT,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/flip-radio-group/flip-radio-group.css?tag=flip-radio-group&encapsulation=scoped","./src/components/flip-radio-group/flip-radio-group.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.radio-group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-space-4);\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from \"@stencil/core\";\n\n@Component({\n  /**\n   * Form controls in shadow dom can still not be associated with labels in the\n   * light dom, cross browser. So for now we disable shadow dom for form\n   * controls (inputs, buttons, selects, etc.). Instead we use Stencil's scoping.\n   * https://caniuse.com/?search=attachInternals\n   */\n  scoped: true,\n  shadow: false,\n  styleUrl: \"flip-radio-group.css\",\n  tag: \"flip-radio-group\",\n})\nexport class FlipRadioGroup {\n  @Element() el: HTMLElement;\n\n  @Prop() flipAriaDescribedby?: string;\n  @Prop({ mutable: true, reflect: true }) value?: string;\n\n  @Event() valueChange: EventEmitter<string>;\n\n  private radioButtons: HTMLFlipRadioElement[];\n\n  componentDidLoad() {\n    this.radioButtons = Array.from(this.el.querySelectorAll(\"flip-radio\"));\n    this.initValue();\n    this.handleValueChanges();\n  }\n\n  private initValue() {\n    if (this.value === undefined) {\n      return;\n    }\n\n    const radioWithValue = this.radioButtons.find(\n      (radio) => radio.value === this.value\n    );\n\n    if (!Boolean(radioWithValue)) {\n      return;\n    }\n\n    radioWithValue.checked = true;\n  }\n\n  private handleValueChanges() {\n    for (const [key, radio] of Object.entries(this.radioButtons)) {\n      radio.addEventListener(\"valueChange\", () => {\n        if (radio.checked === true || radio.checked === \"true\") {\n          this.valueChange.emit(radio.value);\n          this.value = radio.value;\n\n          this.radioButtons.forEach((r, k) => {\n            if (String(k) === key) {\n              return;\n            }\n\n            r.checked = false;\n          });\n        }\n      });\n    }\n  }\n\n  render() {\n    return (\n      <Host aria-describedby={this.flipAriaDescribedby} role=\"radiogroup\">\n        <div class=\"radio-group\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}