@getflip/swirl-components 0.1.0 → 0.3.0

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

@@ -0,0 +1 @@
+{"file":"flip-popover.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/flip-popover2.js

@@ -0,0 +1,190 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as computePosition, a as autoUpdate, s as shift, f as flip } from './floating-ui.dom.esm.js';
+import { e as enableBodyScroll, d as disableBodyScroll } from './bodyScrollLock.esm.js';
+import { c as classnames } from './index2.js';
+import { i as isMobileViewport, q as querySelectorAllDeep } from './utils.js';
+
+const flipPopoverCss = ":host{position:relative;z-index:var(--s-z-40);display:inline-flex}:host *{box-sizing:border-box}.popover--active:not(.popover--closing) .popover__backdrop{-webkit-animation:0.15s popover-fade-in;animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{-webkit-animation:none;animation:none}}.popover--active:not(.popover--closing) .popover__content{-webkit-animation:0.15s popover-slide-in;animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{transform-origin:top left;-webkit-animation:0.15s popover-fade-scale-in;animation:0.15s popover-fade-scale-in}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{-webkit-animation:none;animation:none}}.popover--closing .popover__backdrop{-webkit-animation:0.15s popover-fade-out;animation:0.15s popover-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{-webkit-animation:none;animation:none}}.popover--closing .popover__content{-webkit-animation:0.15s popover-slide-out;animation:0.15s popover-slide-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (min-width: 768px){.popover--closing .popover__content{-webkit-animation:0.15s popover-fade-out;animation:0.15s popover-fade-out}}@media (prefers-reduced-motion){.popover--closing .popover__content{-webkit-animation:none;animation:none}}.popover--inactive .popover__content{display:none}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);-webkit-animation:0.15s popover-backdrop-fade-in;animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{-webkit-animation:none;animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;max-width:22.5rem;border-radius:var(--s-border-radius-xl);-webkit-animation:none;animation:none;box-shadow:0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@-webkit-keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@-webkit-keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes popover-fade-scale-in{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}";
+
+const FlipPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.placement = "bottom-start";
+    this.active = false;
+    this.closing = false;
+    this.onFocusOut = (event) => {
+      if (!this.active) {
+        return;
+      }
+      const target = event.relatedTarget || event.target;
+      const popoverLostFocus = !this.el.contains(target);
+      if (popoverLostFocus) {
+        this.close();
+      }
+    };
+    this.toggle = (event) => {
+      event.stopPropagation();
+      if (this.active) {
+        this.close();
+      }
+      else {
+        this.open();
+      }
+    };
+    this.onKeydown = (event) => {
+      if (event.code === "Escape" && this.active) {
+        this.close();
+      }
+    };
+    this.reposition = async () => {
+      const mobile = isMobileViewport();
+      if (!Boolean(this.triggerEl) || !Boolean(this.contentContainer)) {
+        return;
+      }
+      if (mobile) {
+        this.position = undefined;
+        return;
+      }
+      this.position = await computePosition(this.triggerEl, this.contentContainer, {
+        middleware: [shift(), flip()],
+        placement: this.placement,
+        strategy: "fixed",
+      });
+    };
+  }
+  componentDidLoad() {
+    this.connectTrigger();
+    this.updateChildMenuItems();
+    this.updateTriggerAttributes();
+  }
+  disconnectedCallback() {
+    enableBodyScroll(this.scrollContainer);
+  }
+  onWindowClick(event) {
+    const target = event.target;
+    if (!this.el.contains(target)) {
+      this.close();
+    }
+  }
+  /**
+   * Close the popover.
+   * @returns
+   */
+  async close() {
+    var _a;
+    if (this.closing) {
+      return;
+    }
+    if (this.disableAutoUpdate) {
+      this.disableAutoUpdate();
+    }
+    this.closing = true;
+    setTimeout(() => {
+      this.active = false;
+      this.closing = false;
+      this.updateTriggerAttributes();
+    }, 150);
+    this.unlockBodyScroll();
+    (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  /**
+   * Open the popover.
+   * @returns
+   */
+  async open() {
+    this.active = true;
+    this.updateChildMenuItems();
+    this.updateTriggerAttributes();
+    requestAnimationFrame(async () => {
+      await this.reposition();
+      if (this.childMenuItems.length > 0) {
+        this.childMenuItems[0].focus();
+      }
+      else {
+        this.contentContainer.focus();
+      }
+      if (this.disableAutoUpdate) {
+        this.disableAutoUpdate();
+      }
+      this.disableAutoUpdate = autoUpdate(this.triggerEl, this.contentContainer, this.reposition);
+      this.scrollContainer.scrollTop = 0;
+      this.lockBodyScroll();
+    });
+  }
+  connectTrigger() {
+    var _a;
+    const triggerComponent = querySelectorAllDeep(document.body, `#${this.trigger}`)[0];
+    this.triggerEl = ((triggerComponent === null || triggerComponent === void 0 ? void 0 : triggerComponent.children[0]) ||
+      ((_a = triggerComponent === null || triggerComponent === void 0 ? void 0 : triggerComponent.shadowRoot) === null || _a === void 0 ? void 0 : _a.children[0]) ||
+      triggerComponent);
+    if (!Boolean(this.triggerEl)) {
+      return;
+    }
+    this.triggerEl.addEventListener("click", this.toggle);
+  }
+  updateTriggerAttributes() {
+    if (!Boolean(this.triggerEl)) {
+      return;
+    }
+    this.triggerEl.setAttribute("aria-controls", this.popoverId);
+    this.triggerEl.setAttribute("aria-expanded", String(this.active));
+    this.triggerEl.setAttribute("aria-haspopup", "dialog");
+  }
+  updateChildMenuItems() {
+    this.childMenuItems = querySelectorAllDeep(this.el, '[role="menuitem"]');
+  }
+  lockBodyScroll() {
+    const mobile = isMobileViewport();
+    if (!mobile) {
+      return;
+    }
+    disableBodyScroll(this.scrollContainer);
+  }
+  unlockBodyScroll() {
+    enableBodyScroll(this.scrollContainer);
+  }
+  render() {
+    var _a, _b;
+    const className = classnames("popover", {
+      "popover--closing": this.closing,
+      "popover--active": this.active,
+      "popover--inactive": !this.active,
+    });
+    return (h(Host, { id: this.popoverId, onFocusout: this.onFocusOut }, h("div", { class: className, onKeyDown: this.onKeydown }, h("div", { "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", role: "dialog", tabindex: "-1", ref: (el) => (this.contentContainer = el), style: {
+        top: Boolean(this.position) ? `${(_a = this.position) === null || _a === void 0 ? void 0 : _a.y}px` : "",
+        left: Boolean(this.position) ? `${(_b = this.position) === null || _b === void 0 ? void 0 : _b.x}px` : "",
+      } }, h("span", { class: "popover__handle" }), h("div", { class: "popover__scroll-container", ref: (el) => (this.scrollContainer = el) }, h("slot", null))), this.active && (h("div", { class: "popover__backdrop", onClick: this.close })))));
+  }
+  get el() { return this; }
+  static get style() { return flipPopoverCss; }
+}, [1, "flip-popover", {
+    "label": [1],
+    "placement": [1],
+    "popoverId": [1, "popover-id"],
+    "trigger": [1],
+    "active": [32],
+    "closing": [32],
+    "position": [32],
+    "close": [64],
+    "open": [64]
+  }, [[8, "click", "onWindowClick"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-popover"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-popover":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipPopover);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { FlipPopover as F, defineCustomElement as d };
+
+//# sourceMappingURL=flip-popover2.js.map

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

@@ -0,0 +1 @@
+{"file":"flip-popover2.js","mappings":"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","names":[],"sources":["./src/components/flip-popover/flip-popover.css?tag=flip-popover&encapsulation=shadow","./src/components/flip-popover/flip-popover.tsx"],"sourcesContent":["@import \"../../styles/media-queries.css\";\n\n:host {\n  position: relative;\n  z-index: var(--s-z-40);\n  display: inline-flex;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.popover--active:not(.popover--closing) {\n  & .popover__backdrop {\n    animation: 0.15s popover-fade-in;\n\n    @media (prefers-reduced-motion) {\n      animation: none;\n    }\n  }\n\n  & .popover__content {\n    animation: 0.15s popover-slide-in;\n\n    @media (--from-tablet) {\n      transform-origin: top left;\n      animation: 0.15s popover-fade-scale-in;\n    }\n\n    @media (prefers-reduced-motion) {\n      animation: none;\n    }\n  }\n}\n\n.popover--closing {\n  & .popover__backdrop {\n    animation: 0.15s popover-fade-out;\n    animation-fill-mode: forwards;\n\n    @media (prefers-reduced-motion) {\n      animation: none;\n    }\n  }\n\n  & .popover__content {\n    animation: 0.15s popover-slide-out;\n    animation-fill-mode: forwards;\n\n    @media (--from-tablet) {\n      animation: 0.15s popover-fade-out;\n    }\n\n    @media (prefers-reduced-motion) {\n      animation: none;\n    }\n  }\n}\n\n.popover--inactive {\n  & .popover__content {\n    display: none;\n  }\n}\n\n.popover__backdrop {\n  position: fixed;\n  z-index: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n  animation: 0.15s popover-backdrop-fade-in;\n  inset: 0;\n\n  @media (prefers-reduced-motion) {\n    animation: none;\n  }\n\n  @media (--from-tablet) {\n    display: none;\n  }\n}\n\n.popover__content {\n  position: fixed;\n  z-index: 2;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  border-top-left-radius: var(--s-border-radius-xl);\n  border-top-right-radius: var(--s-border-radius-xl);\n  background-color: var(--s-surface-overlay-default);\n\n  @media (--from-tablet) {\n    right: unset;\n    bottom: unset;\n    left: unset;\n    max-width: 22.5rem;\n    border-radius: var(--s-border-radius-xl);\n    animation: none;\n    box-shadow: 0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14);\n  }\n}\n\n.popover__scroll-container {\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: 100%;\n  max-height: 90vh;\n  padding-top: var(--s-space-24);\n  padding-bottom: var(--s-space-24);\n  overscroll-behavior: contain;\n\n  @media (--from-tablet) {\n    max-height: 22rem;\n    padding-top: var(--s-space-8);\n    padding-bottom: var(--s-space-8);\n  }\n}\n\n.popover__handle {\n  position: absolute;\n  top: var(--s-space-8);\n  left: 50%;\n  width: 2.5rem;\n  height: 0.375rem;\n  border-radius: 0.1875rem;\n  background-color: var(--s-border-default);\n  transform: translatex(-50%);\n\n  @media (--from-tablet) {\n    display: none;\n  }\n}\n\n@keyframes popover-slide-in {\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes popover-slide-out {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(100%);\n  }\n}\n\n@keyframes popover-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes popover-fade-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes popover-fade-scale-in {\n  from {\n    transform: scale(0);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n","import {\n  autoUpdate,\n  computePosition,\n  ComputePositionReturn,\n  flip,\n  Placement,\n  shift,\n} from \"@floating-ui/dom\";\nimport {\n  Component,\n  Element,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport { disableBodyScroll, enableBodyScroll } from \"body-scroll-lock\";\nimport classnames from \"classnames\";\nimport { isMobileViewport, querySelectorAllDeep } from \"../../utils\";\n\n/**\n * @slot slot - The popover content.\n */\n@Component({\n  shadow: true,\n  styleUrl: \"flip-popover.css\",\n  tag: \"flip-popover\",\n})\nexport class FlipPopover {\n  @Element() el: HTMLElement;\n\n  @Prop() label!: string;\n  @Prop() placement?: Placement = \"bottom-start\";\n  @Prop() popoverId!: string;\n  @Prop() trigger!: string;\n\n  @State() active = false;\n  @State() closing = false;\n  @State() position: ComputePositionReturn;\n\n  private childMenuItems: HTMLElement[];\n  private disableAutoUpdate: any;\n  private contentContainer: HTMLDivElement;\n  private scrollContainer: HTMLDivElement;\n  private triggerEl: HTMLElement;\n\n  componentDidLoad() {\n    this.connectTrigger();\n    this.updateChildMenuItems();\n    this.updateTriggerAttributes();\n  }\n\n  disconnectedCallback() {\n    enableBodyScroll(this.scrollContainer);\n  }\n\n  @Listen(\"click\", { target: \"window\" })\n  onWindowClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (!this.el.contains(target)) {\n      this.close();\n    }\n  }\n\n  onFocusOut = (event: FocusEvent) => {\n    if (!this.active) {\n      return;\n    }\n\n    const target =\n      (event.relatedTarget as HTMLElement) || (event.target as HTMLElement);\n\n    const popoverLostFocus = !this.el.contains(target);\n\n    if (popoverLostFocus) {\n      this.close();\n    }\n  };\n\n  /**\n   * Close the popover.\n   * @returns\n   */\n  @Method()\n  public async close() {\n    if (this.closing) {\n      return;\n    }\n\n    if (this.disableAutoUpdate) {\n      this.disableAutoUpdate();\n    }\n\n    this.closing = true;\n\n    setTimeout(() => {\n      this.active = false;\n      this.closing = false;\n      this.updateTriggerAttributes();\n    }, 150);\n\n    this.unlockBodyScroll();\n\n    this.triggerEl?.focus();\n  }\n\n  /**\n   * Open the popover.\n   * @returns\n   */\n  @Method()\n  public async open() {\n    this.active = true;\n\n    this.updateChildMenuItems();\n    this.updateTriggerAttributes();\n\n    requestAnimationFrame(async () => {\n      await this.reposition();\n\n      if (this.childMenuItems.length > 0) {\n        (this.childMenuItems[0] as HTMLElement).focus();\n      } else {\n        this.contentContainer.focus();\n      }\n\n      if (this.disableAutoUpdate) {\n        this.disableAutoUpdate();\n      }\n\n      this.disableAutoUpdate = autoUpdate(\n        this.triggerEl,\n        this.contentContainer,\n        this.reposition\n      );\n\n      this.scrollContainer.scrollTop = 0;\n\n      this.lockBodyScroll();\n    });\n  }\n\n  toggle = (event: Event) => {\n    event.stopPropagation();\n\n    if (this.active) {\n      this.close();\n    } else {\n      this.open();\n    }\n  };\n\n  private connectTrigger() {\n    const triggerComponent = querySelectorAllDeep(\n      document.body,\n      `#${this.trigger}`\n    )[0];\n\n    this.triggerEl = (triggerComponent?.children[0] ||\n      triggerComponent?.shadowRoot?.children[0] ||\n      triggerComponent) as HTMLElement;\n\n    if (!Boolean(this.triggerEl)) {\n      return;\n    }\n\n    this.triggerEl.addEventListener(\"click\", this.toggle);\n  }\n\n  private onKeydown = (event: KeyboardEvent) => {\n    if (event.code === \"Escape\" && this.active) {\n      this.close();\n    }\n  };\n\n  private updateTriggerAttributes() {\n    if (!Boolean(this.triggerEl)) {\n      return;\n    }\n\n    this.triggerEl.setAttribute(\"aria-controls\", this.popoverId);\n    this.triggerEl.setAttribute(\"aria-expanded\", String(this.active));\n    this.triggerEl.setAttribute(\"aria-haspopup\", \"dialog\");\n  }\n\n  private updateChildMenuItems() {\n    this.childMenuItems = querySelectorAllDeep(this.el, '[role=\"menuitem\"]');\n  }\n\n  private reposition = async () => {\n    const mobile = isMobileViewport();\n\n    if (!Boolean(this.triggerEl) || !Boolean(this.contentContainer)) {\n      return;\n    }\n\n    if (mobile) {\n      this.position = undefined;\n      return;\n    }\n\n    this.position = await computePosition(\n      this.triggerEl,\n      this.contentContainer,\n      {\n        middleware: [shift(), flip()],\n        placement: this.placement,\n        strategy: \"fixed\",\n      }\n    );\n  };\n\n  private lockBodyScroll() {\n    const mobile = isMobileViewport();\n\n    if (!mobile) {\n      return;\n    }\n\n    disableBodyScroll(this.scrollContainer);\n  }\n\n  private unlockBodyScroll() {\n    enableBodyScroll(this.scrollContainer);\n  }\n\n  render() {\n    const className = classnames(\"popover\", {\n      \"popover--closing\": this.closing,\n      \"popover--active\": this.active,\n      \"popover--inactive\": !this.active,\n    });\n\n    return (\n      <Host id={this.popoverId} onFocusout={this.onFocusOut}>\n        <div class={className} onKeyDown={this.onKeydown}>\n          <div\n            aria-hidden={!this.active ? \"true\" : \"false\"}\n            aria-label={this.label}\n            class=\"popover__content\"\n            role=\"dialog\"\n            tabindex=\"-1\"\n            ref={(el) => (this.contentContainer = el)}\n            style={{\n              top: Boolean(this.position) ? `${this.position?.y}px` : \"\",\n              left: Boolean(this.position) ? `${this.position?.x}px` : \"\",\n            }}\n          >\n            <span class=\"popover__handle\"></span>\n            <div\n              class=\"popover__scroll-container\"\n              ref={(el) => (this.scrollContainer = el)}\n            >\n              <slot></slot>\n            </div>\n          </div>\n          {this.active && (\n            <div class=\"popover__backdrop\" onClick={this.close}></div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/flip-progress-indicator.d.ts

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

package/dist/components/flip-progress-indicator.js

@@ -0,0 +1,50 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.size = "m";
+    this.value = 0;
+    this.variant = "bar";
+  }
+  render() {
+    const className = 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 (h(Host, { class: this.variant }, this.variant === "bar" && (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" && (h("span", { role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className }, h("svg", { class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(radius + strokeWidth) * 2} ${(radius + strokeWidth) * 2}` }, h("circle", { class: "progress-indicator__circle-background", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth }), 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 }))))));
+  }
+  static get style() { return flipProgressIndicatorCss; }
+}, [1, "flip-progress-indicator", {
+    "label": [1],
+    "size": [1],
+    "value": [2],
+    "variant": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-progress-indicator"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-progress-indicator":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipProgressIndicator$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipProgressIndicator = FlipProgressIndicator$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipProgressIndicator, defineCustomElement };
+
+//# sourceMappingURL=flip-progress-indicator.js.map

package/dist/components/flip-progress-indicator.js.map

@@ -0,0 +1 @@
+{"file":"flip-progress-indicator.js","mappings":";;;AAAA,MAAM,wBAAwB,GAAG,i3DAAi3D;;MCYr4DA,uBAAqB;EALlC;;;;IAOU,SAAI,GAA+B,GAAG,CAAC;IACvC,UAAK,GAAY,CAAC,CAAC;IACnB,YAAO,GAAkC,KAAK,CAAC;GAmExD;EAjEC,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,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,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,OAAO,IACtB,IAAI,CAAC,OAAO,KAAK,KAAK,KACrB,8BACc,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,KACxB,YACE,IAAI,EAAC,aAAa,gBACN,IAAI,CAAC,KAAK,mBACP,GAAG,mBACH,CAAC,mBACD,IAAI,CAAC,KAAK,EACzB,KAAK,EAAE,SAAS,IAEhB,WACE,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,IAEF,cACE,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,EACF,cACE,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":["FlipProgressIndicator"],"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/components/flip-radio-group.js

@@ -28,6 +28,7 @@ const FlipRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
       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;
@@ -39,12 +40,13 @@ const FlipRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     }
   }
   render() {
-    return (h(Host, { role: "radiogroup" }, h("div", { class: "radio-group" }, h("slot", null))));
+    return (h(Host, { "aria-describedby": this.flipAriaDescribedby, role: "radiogroup" }, h("div", { class: "radio-group" }, h("slot", null))));
   }
   get el() { return this; }
   static get style() { return flipRadioGroupCss; }
 }, [6, "flip-radio-group", {
-    "value": [1025]
+    "flipAriaDescribedby": [1, "flip-aria-describedby"],
+    "value": [1537]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
@@ -65,3 +67,5 @@ const FlipRadioGroup = FlipRadioGroup$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipRadioGroup, defineCustomElement };
+
+//# sourceMappingURL=flip-radio-group.js.map

package/dist/components/flip-radio-group.js.map

@@ -0,0 +1 @@
+{"file":"flip-radio-group.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,mMAAmM;;MCsBhNA,gBAAc;;;;;;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,QACE,EAAC,IAAI,wBAAmB,IAAI,CAAC,mBAAmB,EAAE,IAAI,EAAC,YAAY,IACjE,WAAK,KAAK,EAAC,aAAa,IACtB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["FlipRadioGroup"],"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}

package/dist/components/flip-radio.js

@@ -64,3 +64,5 @@ const FlipRadio = FlipRadio$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipRadio, defineCustomElement };
+
+//# sourceMappingURL=flip-radio.js.map

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

@@ -0,0 +1 @@
+{"file":"flip-radio.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,0vFAA0vF;;MCiBlwFA,WAAS;EAZtB;;;;IAa2B,YAAO,GAAoB,KAAK,CAAC;IAElD,aAAQ,GAAa,KAAK,CAAC;IAS3B,aAAQ,GAAG;MACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;MACpB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACnC,CAAC;GA8CH;EA5CC,MAAM;IACJ,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC;IACrE,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,KAAK,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC;IAEjE,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;IAC1E,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC;IAEjC,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,EAAE;MACpC,gBAAgB,EAAE,OAAO;MACzB,iBAAiB,EAAE,IAAI,CAAC,QAAQ;MAChC,gBAAgB,EAAE,IAAI,CAAC,OAAO;MAC9B,kBAAkB,EAAE,SAAS;KAC9B,CAAC,CAAC;IAEH,QACE,EAAC,IAAI,QACH,aAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IAC5C,YAAM,KAAK,EAAC,gBAAgB,IAC1B,gCACE,6BACgB,gBAAgB,kBAChB,WAAW,EACzB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,cAAc,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACmB,EACvB,2BAAkB,MAAM,EAAC,KAAK,EAAC,YAAY,GAAQ,CAC9C,EACP,YAAM,KAAK,EAAC,wBAAwB,IACjC,IAAI,CAAC,KAAK,IAAI,YAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC5D,IAAI,CAAC,WAAW,KACf,YAAM,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC3D,CACI,CACD,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["FlipRadio"],"sources":["./src/components/flip-radio/flip-radio.css?tag=flip-radio&encapsulation=scoped","./src/components/flip-radio/flip-radio.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.radio {\n  display: inline-flex;\n  cursor: pointer;\n  line-height: var(--s-line-height-base);\n\n  &:focus-within .radio__box {\n    box-shadow: 0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default);\n  }\n}\n\n.radio--checked {\n  & .radio__control {\n    &:hover {\n      & .radio__box {\n        border-color: var(--s-interactive-primary-hovered);\n        background-color: var(--s-interactive-primary-hovered);\n      }\n    }\n  }\n\n  & .radio__box {\n    position: relative;\n    border-color: var(--s-icon-highlight);\n    background-color: var(--s-icon-highlight);\n\n    &:after {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: 0.5rem;\n      height: 0.5rem;\n      border-radius: 50%;\n      background-color: var(--s-background-default);\n      content: \"\";\n      transform: translate3d(-50%, -50%, 0);\n    }\n  }\n}\n\n.radio--invalid {\n  &.radio--checked,\n  &.radio--indeterminate {\n    & .radio__box {\n      background-color: var(--s-icon-critical);\n    }\n  }\n\n  & .radio__box {\n    border-color: var(--s-icon-critical);\n  }\n}\n\n.radio--disabled {\n  cursor: default;\n\n  &.radio--checked {\n    & .radio__control {\n      &:hover {\n        & .radio__box {\n          border-color: var(--s-icon-disabled);\n          background-color: transparent;\n        }\n      }\n    }\n\n    & .radio__box {\n      border-color: var(--s-icon-disabled);\n      background-color: var(--s-background-default);\n\n      &:after {\n        background-color: var(--s-icon-disabled);\n      }\n    }\n  }\n\n  & .radio__control {\n    &:hover {\n      & .radio__box {\n        background-color: transparent;\n      }\n    }\n  }\n\n  & .radio__box {\n    border-color: var(--s-icon-disabled);\n    backround-color: var(--s-icon-disabled);\n  }\n\n  & .radio__description,\n  & .radio__label {\n    color: var(--s-text-disabled);\n  }\n}\n\n.radio__control {\n  position: relative;\n  display: inline-flex;\n  width: 1.5rem;\n  height: 1.5rem;\n  padding: var(--s-space-2);\n  flex-shrink: 0;\n\n  &:hover {\n    & .radio__box {\n      background-color: var(--s-action-neutral-hovered);\n    }\n  }\n}\n\n.radio__box {\n  position: relative;\n  display: 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: 50%;\n}\n\n.radio__label-container {\n  display: inline-flex;\n  margin-left: var(--s-space-12);\n  padding-top: var(--s-space-2);\n  flex-direction: column;\n}\n\n.radio__label {\n  font-weight: var(--s-font-weight-medium);\n}\n\n.radio__description {\n  color: var(--s-text-subdued);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipRadioState = boolean | \"true\" | \"false\";\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.css\",\n  tag: \"flip-radio\",\n})\nexport class FlipRadio {\n  @Prop({ mutable: true }) checked?: FlipRadioState = false;\n  @Prop() description?: string;\n  @Prop() disabled?: boolean = false;\n  @Prop() inputId!: string;\n  @Prop() inputName!: string;\n  @Prop() invalid?: boolean;\n  @Prop() label?: string;\n  @Prop() value!: string;\n\n  @Event() valueChange: EventEmitter<string>;\n\n  private onChange = () => {\n    this.checked = true;\n    this.valueChange.emit(this.value);\n  };\n\n  render() {\n    const unchecked = this.checked === false || this.checked === \"false\";\n    const checked = this.checked === true || this.checked === \"true\";\n\n    const ariaCheckedLabel = checked ? \"true\" : unchecked ? \"false\" : \"mixed\";\n    const ariaInvalid = this.invalid;\n\n    const className = classnames(\"radio\", {\n      \"radio--checked\": checked,\n      \"radio--disabled\": this.disabled,\n      \"radio--invalid\": this.invalid,\n      \"radio--unchecked\": unchecked,\n    });\n\n    return (\n      <Host>\n        <label class={className} htmlFor={this.inputId}>\n          <span class=\"radio__control\">\n            <flip-visually-hidden>\n              <input\n                aria-checked={ariaCheckedLabel}\n                aria-invalid={ariaInvalid}\n                checked={checked}\n                class=\"radio__input\"\n                disabled={this.disabled}\n                id={this.inputId}\n                name={this.inputName}\n                onChange={this.onChange}\n                type=\"radio\"\n                value={this.value}\n              />\n            </flip-visually-hidden>\n            <span aria-hidden=\"true\" class=\"radio__box\"></span>\n          </span>\n          <span class=\"radio__label-container\">\n            {this.label && <span class=\"radio__label\">{this.label}</span>}\n            {this.description && (\n              <span class=\"radio__description\">{this.description}</span>\n            )}\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/flip-resource-list-file-item.d.ts

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

package/dist/components/flip-resource-list-file-item.js

@@ -0,0 +1,85 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$6 } from './flip-button2.js';
+import { d as defineCustomElement$5 } from './flip-icon-error2.js';
+import { d as defineCustomElement$4 } from './flip-inline-error2.js';
+import { d as defineCustomElement$3 } from './flip-spinner2.js';
+import { d as defineCustomElement$2 } from './flip-visually-hidden2.js';
+
+const flipResourceListFileItemCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-file-item{position:relative;display:flex;width:100%;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);line-height:var(--s-line-height-base);gap:var(--s-space-12)}.resource-list-file-item:focus{background-color:var(--s-background-hovered);outline:none}.resource-list-file-item--has-control .resource-list-file-item__label-container{padding-right:calc(var(--s-space-12) + 2.5rem)}.resource-list-file-item__icon{color:var(--s-icon-highlight)}.resource-list-file-item__label-container{position:relative;display:flex;min-width:0;min-height:2.875rem;flex-grow:1;justify-content:center;flex-direction:column}.resource-list-file-item__label-container:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:\"\"}.resource-list-file-item__label{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__description{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__error-message{margin-top:var(--s-space-2)}.resource-list-file-item__remove-button{position:absolute;top:50%;right:var(--s-space-16);display:inline-flex;transform:translateY(-50%)}.resource-list-file-item__spinner{position:absolute;top:50%;right:var(--s-space-24);display:inline-flex;transform:translateY(-50%)}";
+
+const FlipResourceListFileItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.remove = createEvent(this, "remove", 7);
+    this.icon = "<flip-icon-file></flip-icon-file>";
+    this.removeButtonLabel = "Remove file";
+  }
+  render() {
+    const showError = Boolean(this.errorMessage);
+    const showDescription = !showError && Boolean(this.description);
+    const showSpinner = !showError && this.loading;
+    const showRemoveButton = this.removable && !showSpinner;
+    const className = classnames("resource-list-file-item", {
+      "resource-list-file-item--has-control": showSpinner || showRemoveButton,
+    });
+    return (h(Host, { role: "row" }, h("div", { class: className, role: "gridcell" }, h("span", { class: "resource-list-file-item__icon", innerHTML: this.icon }), h("span", { class: "resource-list-file-item__label-container" }, h("span", { class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("flip-inline-error", { message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { class: "resource-list-file-item__spinner" }, h("flip-spinner", { size: "s" }))), showRemoveButton && (h("span", { class: "resource-list-file-item__remove-button" }, h("flip-button", { hideLabel: true, icon: "<flip-icon-close></flip-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
+  }
+  static get style() { return flipResourceListFileItemCss; }
+}, [1, "flip-resource-list-file-item", {
+    "description": [1],
+    "errorMessage": [1, "error-message"],
+    "icon": [1],
+    "label": [1],
+    "loading": [4],
+    "removable": [4],
+    "removeButtonLabel": [1, "remove-button-label"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-resource-list-file-item", "flip-button", "flip-icon-error", "flip-inline-error", "flip-spinner", "flip-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-resource-list-file-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipResourceListFileItem$1);
+      }
+      break;
+    case "flip-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "flip-icon-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "flip-inline-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "flip-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "flip-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipResourceListFileItem = FlipResourceListFileItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipResourceListFileItem, defineCustomElement };
+
+//# sourceMappingURL=flip-resource-list-file-item.js.map

package/dist/components/flip-resource-list-file-item.js.map

@@ -0,0 +1 @@
+{"file":"flip-resource-list-file-item.js","mappings":";;;;;;;;AAAA,MAAM,2BAA2B,GAAG,2kDAA2kD;;MCQlmDA,0BAAwB;EALrC;;;;;IAQU,SAAI,GAAY,mCAAmC,CAAC;IAIpD,sBAAiB,GAAY,aAAa,CAAC;GA6DpD;EAzDC,MAAM;IACJ,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC7C,MAAM,eAAe,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAChE,MAAM,WAAW,GAAG,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC;IAC/C,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC,WAAW,CAAC;IAExD,MAAM,SAAS,GAAG,UAAU,CAAC,yBAAyB,EAAE;MACtD,sCAAsC,EAAE,WAAW,IAAI,gBAAgB;KACxE,CAAC,CAAC;IAEH,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,KAAK,IACd,WAAK,KAAK,EAAE,SAAS,EAAE,IAAI,EAAC,UAAU,IACpC,YACE,KAAK,EAAC,+BAA+B,EACrC,SAAS,EAAE,IAAI,CAAC,IAAI,GACd,EACR,YAAM,KAAK,EAAC,0CAA0C,IACpD,YAAM,KAAK,EAAC,gCAAgC,EAAC,EAAE,EAAC,OAAO,IACpD,IAAI,CAAC,KAAK,CACN,EACN,eAAe,KACd,YAAM,KAAK,EAAC,sCAAsC,IAC/C,IAAI,CAAC,WAAW,CACZ,CACR,EACA,SAAS,KACR,yBACY,QAAQ,EAClB,KAAK,EAAC,wCAAwC,IAE9C,yBACE,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,IAAI,EAAC,GAAG,GACW,CAChB,CACR,CACI,EACN,WAAW,KACV,YAAM,KAAK,EAAC,kCAAkC,IAC5C,oBAAc,IAAI,EAAC,GAAG,GAAgB,CACjC,CACR,EACA,gBAAgB,KACf,YAAM,KAAK,EAAC,wCAAwC,IAClD,mBACE,SAAS,QACT,IAAI,EAAC,qCAAqC,EAC1C,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAC7B,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,GACZ,CACV,CACR,CACG,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["FlipResourceListFileItem"],"sources":["./src/components/flip-resource-list-file-item/flip-resource-list-file-item.css?tag=flip-resource-list-file-item&encapsulation=shadow","./src/components/flip-resource-list-file-item/flip-resource-list-file-item.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.resource-list-file-item {\n  position: relative;\n  display: flex;\n  width: 100%;\n  padding: var(--s-space-12) var(--s-space-16);\n  align-items: center;\n  background-color: var(--s-background-default);\n  line-height: var(--s-line-height-base);\n  gap: var(--s-space-12);\n\n  &:focus {\n    background-color: var(--s-background-hovered);\n    outline: none;\n  }\n}\n\n.resource-list-file-item--has-control {\n  & .resource-list-file-item__label-container {\n    padding-right: calc(var(--s-space-12) + 2.5rem);\n  }\n}\n\n.resource-list-file-item__icon {\n  color: var(--s-icon-highlight);\n}\n\n.resource-list-file-item__label-container {\n  position: relative;\n  display: flex;\n  min-width: 0;\n  min-height: 2.875rem;\n  flex-grow: 1;\n  justify-content: center;\n  flex-direction: column;\n\n  &:after {\n    position: absolute;\n    right: 0;\n    bottom: calc(-1 * var(--s-space-12));\n    left: 0;\n    height: 0.0625rem;\n    background-color: var(--s-border-default);\n    content: \"\";\n  }\n}\n\n.resource-list-file-item__label {\n  overflow: hidden;\n  font-weight: var(--s-font-weight-medium);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.resource-list-file-item__description {\n  overflow: hidden;\n  margin-top: var(--s-space-2);\n  color: var(--s-text-subdued);\n  font-size: var(--s-font-size-sm);\n  line-height: var(--s-line-height-sm);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.resource-list-file-item__error-message {\n  margin-top: var(--s-space-2);\n}\n\n.resource-list-file-item__remove-button {\n  position: absolute;\n  top: 50%;\n  right: var(--s-space-16);\n  display: inline-flex;\n  transform: translateY(-50%);\n}\n\n.resource-list-file-item__spinner {\n  position: absolute;\n  top: 50%;\n  right: var(--s-space-24);\n  display: inline-flex;\n  transform: translateY(-50%);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-resource-list-file-item.css\",\n  tag: \"flip-resource-list-file-item\",\n})\nexport class FlipResourceListFileItem {\n  @Prop() description?: string;\n  @Prop() errorMessage?: string;\n  @Prop() icon?: string = \"<flip-icon-file></flip-icon-file>\";\n  @Prop() label!: string;\n  @Prop() loading: boolean;\n  @Prop() removable?: boolean;\n  @Prop() removeButtonLabel?: string = \"Remove file\";\n\n  @Event() remove: EventEmitter<MouseEvent>;\n\n  render() {\n    const showError = Boolean(this.errorMessage);\n    const showDescription = !showError && Boolean(this.description);\n    const showSpinner = !showError && this.loading;\n    const showRemoveButton = this.removable && !showSpinner;\n\n    const className = classnames(\"resource-list-file-item\", {\n      \"resource-list-file-item--has-control\": showSpinner || showRemoveButton,\n    });\n\n    return (\n      <Host role=\"row\">\n        <div class={className} role=\"gridcell\">\n          <span\n            class=\"resource-list-file-item__icon\"\n            innerHTML={this.icon}\n          ></span>\n          <span class=\"resource-list-file-item__label-container\">\n            <span class=\"resource-list-file-item__label\" id=\"label\">\n              {this.label}\n            </span>\n            {showDescription && (\n              <span class=\"resource-list-file-item__description\">\n                {this.description}\n              </span>\n            )}\n            {showError && (\n              <span\n                aria-live=\"polite\"\n                class=\"resource-list-file-item__error-message\"\n              >\n                <flip-inline-error\n                  message={this.errorMessage}\n                  size=\"s\"\n                ></flip-inline-error>\n              </span>\n            )}\n          </span>\n          {showSpinner && (\n            <span class=\"resource-list-file-item__spinner\">\n              <flip-spinner size=\"s\"></flip-spinner>\n            </span>\n          )}\n          {showRemoveButton && (\n            <span class=\"resource-list-file-item__remove-button\">\n              <flip-button\n                hideLabel\n                icon=\"<flip-icon-close></flip-icon-close>\"\n                label={this.removeButtonLabel}\n                onClick={this.remove.emit}\n              ></flip-button>\n            </span>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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

@@ -0,0 +1,115 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$3 } from './flip-button2.js';
+import { d as defineCustomElement$2 } from './flip-icon-check-strong2.js';
+
+const flipResourceListItemCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-item{position:relative;width:100%}.resource-list-item--checked .resource-list-item__checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--has-menu .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 2.5rem + var(--s-space-12))}@media (--from-tablet){.resource-list-item--selectable .resource-list-item__content{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (--from-tablet){.resource-list-item--selectable .resource-list-item__label-container{padding-right:var(--s-space-16)}}.resource-list-item--hide-divider .resource-list-item__label-container:after{display:none}.resource-list-item__content{--flip-avatar-group-border-color:var(--s-background-default);--flip-badge-border-color:var(--s-background-default);display:flex;width:100%;padding-top:var(--s-space-12);padding-right:0;padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-background-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;text-decoration:none;cursor:pointer;gap:var(--s-space-12)}.resource-list-item__content:hover:not(:disabled){background-color:var(--s-background-hovered)}.resource-list-item__content:hover:not(:disabled) .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-hovered);--flip-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:active:not(:disabled){background-color:var(--s-background-pressed)}.resource-list-item__content:active:not(:disabled) .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-pressed);--flip-badge-border-color:var(--s-background-pressed)}.resource-list-item__content:focus{background-color:var(--s-background-hovered);outline:none}.resource-list-item__content:focus .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-hovered);--flip-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:disabled{color:var(--s-text-disabled);background-color:var(--s-background-default);cursor:default}.resource-list-item__content:disabled .resource-list-item__description{color:var(--s-text-disabled)}.resource-list-item__media{display:inline-flex}.resource-list-item__label-container{position:relative;display:flex;min-width:0;min-height:2.875rem;padding-right:var(--s-space-16);flex-grow:1;justify-content:center;flex-direction:column}.resource-list-item__label-container:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:\"\"}.resource-list-item__label{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__description{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__menu-trigger{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__checkbox{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.25rem;height:1.25rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%)}@media (--from-tablet){.resource-list-item__checkbox{right:auto;left:var(--s-space-16)}}.resource-list-item__checkbox-icon{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon>*::part(icon){width:1.0625rem;height:1.0625rem}.resource-list-item__meta{position:absolute;top:calc(var(--s-space-12) + var(--s-space-4));right:var(--s-space-16);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}";
+
+const FlipResourceListItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.checked = false;
+    this.menuTriggerLabel = "Options";
+    this.onClick = () => {
+      if (!this.selectable) {
+        return;
+      }
+      this.checked = !this.checked;
+      this.valueChange.emit(this.checked);
+    };
+    this.onMenuTriggerClick = (event) => {
+      if (this.disabled && !Boolean(this.href)) {
+        event.stopPropagation();
+      }
+    };
+  }
+  componentDidLoad() {
+    this.forceAvatarProps();
+    this.forceThumbnailProps();
+  }
+  forceAvatarProps() {
+    const avatarEl = this.el.querySelector("flip-avatar");
+    if (!Boolean(avatarEl)) {
+      return;
+    }
+    avatarEl.removeAttribute("interactive");
+    avatarEl.removeAttribute("show-label");
+    avatarEl.removeAttribute("variant");
+    avatarEl.setAttribute("size", "l");
+  }
+  forceThumbnailProps() {
+    const thumbnailEl = this.el.querySelector("flip-thumbnail");
+    if (!Boolean(thumbnailEl)) {
+      return;
+    }
+    thumbnailEl.setAttribute("format", "landscape");
+    if (!["s", "m"].includes(thumbnailEl.getAttribute("size"))) {
+      thumbnailEl.setAttribute("size", "m");
+    }
+  }
+  render() {
+    const Tag = Boolean(this.href) && !this.selectable ? "a" : "button";
+    const disabled = this.disabled && !Boolean(this.href);
+    const hasMenu = Boolean(this.menuTriggerId);
+    const showMenu = hasMenu && !Boolean(this.meta) && !this.selectable;
+    const showMeta = Boolean(this.meta) && !this.selectable;
+    const ariaChecked = this.selectable ? String(this.checked) : undefined;
+    const role = this.selectable ? "checkbox" : undefined;
+    const className = classnames("resource-list-item", {
+      "resource-list-item--checked": this.checked,
+      "resource-list-item--has-menu": hasMenu,
+      "resource-list-item--hide-divider": this.hideDivider,
+      "resource-list-item--selectable": this.selectable,
+    });
+    return (h(Host, { role: "row" }, h("div", { class: className, role: "gridcell" }, h(Tag, { "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": "label", class: "resource-list-item__content", href: this.href, disabled: disabled, onClick: this.onClick, role: role, tabIndex: 0 }, Boolean(this.media) && (h("span", { class: "resource-list-item__media", innerHTML: this.media })), h("span", { class: "resource-list-item__label-container" }, h("span", { class: "resource-list-item__label", id: "label" }, this.label), this.description && (h("span", { class: "resource-list-item__description" }, this.description)))), this.selectable && (h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (h("flip-icon-check-strong", null))))), showMeta && (h("span", { class: "resource-list-item__meta" }, this.meta)), showMenu && (h("flip-button", { "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<flip-icon-more-horizontal></flip-icon-more-horizontal>", id: this.menuTriggerId, intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))));
+  }
+  get el() { return this; }
+  static get style() { return flipResourceListItemCss; }
+}, [1, "flip-resource-list-item", {
+    "checked": [1028],
+    "description": [1],
+    "disabled": [4],
+    "hideDivider": [4, "hide-divider"],
+    "href": [1],
+    "label": [1],
+    "media": [1],
+    "menuTriggerId": [1, "menu-trigger-id"],
+    "menuTriggerLabel": [1, "menu-trigger-label"],
+    "meta": [1],
+    "selectable": [4],
+    "value": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-resource-list-item", "flip-button", "flip-icon-check-strong"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-resource-list-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipResourceListItem$1);
+      }
+      break;
+    case "flip-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "flip-icon-check-strong":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipResourceListItem = FlipResourceListItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipResourceListItem, defineCustomElement };
+
+//# sourceMappingURL=flip-resource-list-item.js.map