@cruglobal/cornerstone-components 0.1.0

package/dist/unbundled/chunks/chunk.22DUMFR7.js

@@ -0,0 +1,27 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsTooltip
+} from "./chunk.PM7JDFTB.js";
+
+// src/react/tooltip/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cs-tooltip";
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CsTooltip,
+  react: React,
+  events: {
+    onCsShow: "cs-show",
+    onCsAfterShow: "cs-after-show",
+    onCsHide: "cs-hide",
+    onCsAfterHide: "cs-after-hide"
+  },
+  displayName: "CsTooltip"
+});
+var tooltip_default = reactWrapper;
+
+export {
+  tooltip_default
+};

package/dist/unbundled/chunks/chunk.25EWODJU.js

@@ -0,0 +1,44 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  divider_styles_default
+} from "./chunk.VRTUNEMN.js";
+import {
+  watch
+} from "./chunk.3QOMHIHS.js";
+import {
+  CornerstoneElement,
+  customElement
+} from "./chunk.MHH4NIPT.js";
+import {
+  __decorateClass
+} from "./chunk.M2YES2WV.js";
+
+// src/components/divider/divider.ts
+import { property } from "lit/decorators.js";
+var CsDivider = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.orientation = "horizontal";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "separator");
+  }
+  handleVerticalChange() {
+    this.setAttribute("aria-orientation", this.orientation);
+  }
+};
+CsDivider.css = divider_styles_default;
+__decorateClass([
+  property({ reflect: true })
+], CsDivider.prototype, "orientation", 2);
+__decorateClass([
+  watch("orientation")
+], CsDivider.prototype, "handleVerticalChange", 1);
+CsDivider = __decorateClass([
+  customElement("cs-divider")
+], CsDivider);
+
+export {
+  CsDivider
+};

package/dist/unbundled/chunks/chunk.25M5Z6XD.js

@@ -0,0 +1,13 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/components/mutation-observer/mutation-observer.styles.ts
+import { css } from "lit";
+var mutation_observer_styles_default = css`
+  :host {
+    display: contents;
+  }
+`;
+
+export {
+  mutation_observer_styles_default
+};

package/dist/unbundled/chunks/chunk.27C34IAM.js

@@ -0,0 +1,13 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/events/tab-hide.ts
+var CsTabHideEvent = class extends Event {
+  constructor(detail) {
+    super("cs-tab-hide", { bubbles: true, cancelable: false, composed: true });
+    this.detail = detail;
+  }
+};
+
+export {
+  CsTabHideEvent
+};

package/dist/unbundled/chunks/chunk.2DAXWPZV.js

@@ -0,0 +1,18 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/components/page/page.mobile.styles.ts
+var page_mobile_styles_default = (breakpoint = "768px") => `
+  @media screen and (width < ${breakpoint}) {
+    [part~='navigation'] {
+      display: none;
+    }
+
+    :host(:not([disable-navigation-toggle])) slot[name~='navigation-toggle'] {
+      display: contents;
+    }
+  }
+`;
+
+export {
+  page_mobile_styles_default
+};

package/dist/unbundled/chunks/chunk.2JNTRGJV.js

@@ -0,0 +1,13 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/events/selection-change.ts
+var CsSelectionChangeEvent = class extends Event {
+  constructor(detail) {
+    super("cs-selection-change", { bubbles: true, cancelable: false, composed: true });
+    this.detail = detail;
+  }
+};
+
+export {
+  CsSelectionChangeEvent
+};

package/dist/unbundled/chunks/chunk.2OLAKXLK.js

@@ -0,0 +1,12 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/events/complete.ts
+var CsCompleteEvent = class extends Event {
+  constructor() {
+    super("cs-complete", { bubbles: true, cancelable: true, composed: true });
+  }
+};
+
+export {
+  CsCompleteEvent
+};

package/dist/unbundled/chunks/chunk.34RCCHX4.js

@@ -0,0 +1,71 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/components/tooltip/tooltip.styles.ts
+import { css } from "lit";
+var tooltip_styles_default = css`
+  :host {
+    --max-width: 30ch;
+
+    /** These styles are added so we don't interfere in the DOM. */
+    display: inline-block;
+    position: absolute;
+
+    /** Defaults for inherited CSS properties */
+    color: var(--cs-tooltip-content-color);
+    font-size: var(--cs-tooltip-font-size);
+    line-height: var(--cs-tooltip-line-height);
+    text-align: start;
+    white-space: normal;
+  }
+
+  .tooltip {
+    --arrow-size: var(--cs-tooltip-arrow-size);
+    --arrow-color: var(--cs-tooltip-background-color);
+  }
+
+  .tooltip::part(popup) {
+    z-index: 1000;
+  }
+
+  .tooltip[placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
+
+  .tooltip[placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
+
+  .tooltip[placement^='left']::part(popup) {
+    transform-origin: right;
+  }
+
+  .tooltip[placement^='right']::part(popup) {
+    transform-origin: left;
+  }
+
+  .body {
+    display: block;
+    width: max-content;
+    max-width: var(--max-width);
+    border-radius: var(--cs-tooltip-border-radius);
+    background-color: var(--cs-tooltip-background-color);
+    border: var(--cs-tooltip-border-width) var(--cs-tooltip-border-style) var(--cs-tooltip-border-color);
+    padding: 0.25em 0.5em;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .tooltip {
+    --popup-border-width: var(--cs-tooltip-border-width);
+
+    /* Inset box-shadow, not a border: Safari seams a clip-path edge that runs along a border. */
+    &::part(arrow) {
+      box-shadow: inset calc(-1 * var(--cs-tooltip-border-width)) calc(-1 * var(--cs-tooltip-border-width)) 0 0
+        var(--cs-tooltip-border-color);
+    }
+  }
+`;
+
+export {
+  tooltip_styles_default
+};

package/dist/unbundled/chunks/chunk.36VL6LJI.js

@@ -0,0 +1,12 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/events/lazy-change.ts
+var CsLazyChangeEvent = class extends Event {
+  constructor() {
+    super("cs-lazy-change", { bubbles: true, cancelable: false, composed: true });
+  }
+};
+
+export {
+  CsLazyChangeEvent
+};

package/dist/unbundled/chunks/chunk.37FJIXOD.js

@@ -0,0 +1,446 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsRepositionEvent
+} from "./chunk.N46QJHPG.js";
+import {
+  popup_styles_default
+} from "./chunk.E3WBPNHV.js";
+import {
+  CornerstoneElement,
+  customElement
+} from "./chunk.MHH4NIPT.js";
+import {
+  LocalizeController
+} from "./chunk.QGC4W2JQ.js";
+import {
+  __decorateClass
+} from "./chunk.M2YES2WV.js";
+
+// src/components/popup/popup.ts
+import {
+  arrow,
+  autoUpdate,
+  computePosition,
+  flip,
+  getOverflowAncestors,
+  offset,
+  platform,
+  shift,
+  size
+} from "@floating-ui/dom";
+import { offsetParent } from "composed-offset-position";
+import { html } from "lit";
+import { property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+function isVirtualElement(e) {
+  return e !== null && typeof e === "object" && "getBoundingClientRect" in e && ("contextElement" in e ? e instanceof Element : true);
+}
+var SUPPORTS_POPOVER = Boolean(
+  globalThis?.HTMLElement?.prototype && Object.hasOwn(globalThis.HTMLElement.prototype, "popover")
+);
+var CsPopup = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.SUPPORTS_POPOVER = false;
+    this.active = false;
+    this.placement = "top";
+    this.boundary = "viewport";
+    this.distance = 0;
+    this.skidding = 0;
+    this.arrow = false;
+    this.arrowPlacement = "anchor";
+    this.arrowPadding = 10;
+    this.flip = false;
+    this.flipFallbackPlacements = "";
+    this.flipFallbackStrategy = "best-fit";
+    this.flipPadding = 0;
+    this.shift = false;
+    this.shiftPadding = 0;
+    this.autoSizePadding = 0;
+    this.hoverBridge = false;
+    this.updateHoverBridge = () => {
+      if (this.hoverBridge && this.anchorEl && this.popup) {
+        const anchorRect = this.anchorEl.getBoundingClientRect();
+        const popupRect = this.popup.getBoundingClientRect();
+        const isVertical = this.placement.includes("top") || this.placement.includes("bottom");
+        let topLeftX;
+        let topLeftY;
+        let topRightX;
+        let topRightY;
+        let bottomLeftX;
+        let bottomLeftY;
+        let bottomRightX;
+        let bottomRightY;
+        if (isVertical) {
+          if (anchorRect.top < popupRect.top) {
+            topLeftX = anchorRect.left;
+            topLeftY = anchorRect.bottom;
+            topRightX = anchorRect.right;
+            topRightY = anchorRect.bottom;
+            bottomLeftX = popupRect.left;
+            bottomLeftY = popupRect.top;
+            bottomRightX = popupRect.right;
+            bottomRightY = popupRect.top;
+          } else {
+            topLeftX = popupRect.left;
+            topLeftY = popupRect.bottom;
+            topRightX = popupRect.right;
+            topRightY = popupRect.bottom;
+            bottomLeftX = anchorRect.left;
+            bottomLeftY = anchorRect.top;
+            bottomRightX = anchorRect.right;
+            bottomRightY = anchorRect.top;
+          }
+        } else {
+          if (anchorRect.left < popupRect.left) {
+            topLeftX = anchorRect.right;
+            topLeftY = anchorRect.top;
+            topRightX = popupRect.left;
+            topRightY = popupRect.top;
+            bottomLeftX = anchorRect.right;
+            bottomLeftY = anchorRect.bottom;
+            bottomRightX = popupRect.left;
+            bottomRightY = popupRect.bottom;
+          } else {
+            topLeftX = popupRect.right;
+            topLeftY = popupRect.top;
+            topRightX = anchorRect.left;
+            topRightY = anchorRect.top;
+            bottomLeftX = popupRect.right;
+            bottomLeftY = popupRect.bottom;
+            bottomRightX = anchorRect.left;
+            bottomRightY = anchorRect.bottom;
+          }
+        }
+        this.style.setProperty("--hover-bridge-top-left-x", `${topLeftX}px`);
+        this.style.setProperty("--hover-bridge-top-left-y", `${topLeftY}px`);
+        this.style.setProperty("--hover-bridge-top-right-x", `${topRightX}px`);
+        this.style.setProperty("--hover-bridge-top-right-y", `${topRightY}px`);
+        this.style.setProperty("--hover-bridge-bottom-left-x", `${bottomLeftX}px`);
+        this.style.setProperty("--hover-bridge-bottom-left-y", `${bottomLeftY}px`);
+        this.style.setProperty("--hover-bridge-bottom-right-x", `${bottomRightX}px`);
+        this.style.setProperty("--hover-bridge-bottom-right-y", `${bottomRightY}px`);
+      }
+    };
+  }
+  async connectedCallback() {
+    super.connectedCallback();
+    await this.updateComplete;
+    this.SUPPORTS_POPOVER = SUPPORTS_POPOVER;
+    this.start();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stop();
+  }
+  async updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("active")) {
+      if (this.active) {
+        this.start();
+      } else {
+        this.stop();
+      }
+    }
+    if (changedProperties.has("anchor")) {
+      this.handleAnchorChange();
+    }
+    if (this.active) {
+      await this.updateComplete;
+      this.reposition();
+    }
+  }
+  async handleAnchorChange() {
+    await this.stop();
+    if (this.anchor && typeof this.anchor === "string") {
+      const root = this.getRootNode();
+      this.anchorEl = root.getElementById(this.anchor);
+    } else if (this.anchor instanceof Element || isVirtualElement(this.anchor)) {
+      this.anchorEl = this.anchor;
+    } else {
+      this.anchorEl = this.querySelector('[slot="anchor"]');
+    }
+    if (this.anchorEl instanceof HTMLSlotElement) {
+      this.anchorEl = this.anchorEl.assignedElements({ flatten: true })[0];
+    }
+    if (this.anchorEl) {
+      this.start();
+    }
+  }
+  start() {
+    if (!this.anchorEl || !this.active || !this.isConnected) {
+      return;
+    }
+    this.popup?.showPopover?.();
+    this.cleanup = autoUpdate(this.anchorEl, this.popup, () => {
+      this.reposition();
+    });
+  }
+  async stop() {
+    return new Promise((resolve) => {
+      this.popup?.hidePopover?.();
+      if (this.cleanup) {
+        this.cleanup();
+        this.cleanup = void 0;
+        this.removeAttribute("data-current-placement");
+        this.style.removeProperty("--auto-size-available-width");
+        this.style.removeProperty("--auto-size-available-height");
+        requestAnimationFrame(() => resolve());
+      } else {
+        resolve();
+      }
+    });
+  }
+  /** Forces the popup to recalculate and reposition itself. */
+  reposition() {
+    if (!this.active || !this.anchorEl || !this.popup) {
+      return;
+    }
+    const middleware = [
+      // The offset middleware goes first
+      offset({ mainAxis: this.distance, crossAxis: this.skidding })
+    ];
+    if (this.sync) {
+      middleware.push(
+        size({
+          apply: ({ rects }) => {
+            const syncWidth = this.sync === "width" || this.sync === "both";
+            const syncHeight = this.sync === "height" || this.sync === "both";
+            this.popup.style.width = syncWidth ? `${rects.reference.width}px` : "";
+            this.popup.style.height = syncHeight ? `${rects.reference.height}px` : "";
+          }
+        })
+      );
+    } else {
+      this.popup.style.width = "";
+      this.popup.style.height = "";
+    }
+    let defaultBoundary;
+    if (this.SUPPORTS_POPOVER && !isVirtualElement(this.anchor) && this.boundary === "scroll") {
+      defaultBoundary = getOverflowAncestors(this.anchorEl).filter((el) => el instanceof Element);
+    }
+    if (this.flip) {
+      middleware.push(
+        flip({
+          boundary: this.flipBoundary || defaultBoundary,
+          // @ts-expect-error - We're converting a string attribute to an array here
+          fallbackPlacements: this.flipFallbackPlacements,
+          fallbackStrategy: this.flipFallbackStrategy === "best-fit" ? "bestFit" : "initialPlacement",
+          padding: this.flipPadding
+        })
+      );
+    }
+    if (this.shift) {
+      middleware.push(
+        shift({
+          boundary: this.shiftBoundary || defaultBoundary,
+          padding: this.shiftPadding
+        })
+      );
+    }
+    if (this.autoSize) {
+      middleware.push(
+        size({
+          boundary: this.autoSizeBoundary || defaultBoundary,
+          padding: this.autoSizePadding,
+          apply: ({ availableWidth, availableHeight }) => {
+            if (this.autoSize === "vertical" || this.autoSize === "both") {
+              this.style.setProperty("--auto-size-available-height", `${availableHeight}px`);
+            } else {
+              this.style.removeProperty("--auto-size-available-height");
+            }
+            if (this.autoSize === "horizontal" || this.autoSize === "both") {
+              this.style.setProperty("--auto-size-available-width", `${availableWidth}px`);
+            } else {
+              this.style.removeProperty("--auto-size-available-width");
+            }
+          }
+        })
+      );
+    } else {
+      this.style.removeProperty("--auto-size-available-width");
+      this.style.removeProperty("--auto-size-available-height");
+    }
+    if (this.arrow) {
+      middleware.push(
+        arrow({
+          element: this.arrowEl,
+          padding: this.arrowPadding
+        })
+      );
+    }
+    const getOffsetParent = this.SUPPORTS_POPOVER ? (element) => platform.getOffsetParent(element, offsetParent) : platform.getOffsetParent;
+    computePosition(this.anchorEl, this.popup, {
+      placement: this.placement,
+      middleware,
+      strategy: this.SUPPORTS_POPOVER ? "absolute" : "fixed",
+      platform: {
+        ...platform,
+        getOffsetParent
+      }
+    }).then(({ x, y, middlewareData, placement }) => {
+      const isRtl = this.localize.dir() === "rtl";
+      const staticSide = { top: "bottom", right: "left", bottom: "top", left: "right" }[placement.split("-")[0]];
+      this.setAttribute("data-current-placement", placement);
+      Object.assign(this.popup.style, {
+        left: `${x}px`,
+        top: `${y}px`
+      });
+      if (this.arrow) {
+        const arrowX = middlewareData.arrow.x;
+        const arrowY = middlewareData.arrow.y;
+        let top = "";
+        let right = "";
+        let bottom = "";
+        let left;
+        if (this.arrowPlacement === "start") {
+          const value = typeof arrowX === "number" ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : "";
+          top = typeof arrowY === "number" ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : "";
+          right = isRtl ? value : "";
+          left = isRtl ? "" : value;
+        } else if (this.arrowPlacement === "end") {
+          const value = typeof arrowX === "number" ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : "";
+          right = isRtl ? "" : value;
+          left = isRtl ? value : "";
+          bottom = typeof arrowY === "number" ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : "";
+        } else if (this.arrowPlacement === "center") {
+          left = typeof arrowX === "number" ? `calc(50% - var(--arrow-size-diagonal))` : "";
+          top = typeof arrowY === "number" ? `calc(50% - var(--arrow-size-diagonal))` : "";
+        } else {
+          left = typeof arrowX === "number" ? `${arrowX}px` : "";
+          top = typeof arrowY === "number" ? `${arrowY}px` : "";
+        }
+        Object.assign(this.arrowEl.style, {
+          top,
+          right,
+          bottom,
+          left,
+          [staticSide]: "calc(var(--arrow-base-offset) - var(--arrow-size-diagonal))"
+        });
+      }
+    });
+    requestAnimationFrame(() => this.updateHoverBridge());
+    this.dispatchEvent(new CsRepositionEvent());
+  }
+  render() {
+    return html`
+      <slot name="anchor" @slotchange=${this.handleAnchorChange}></slot>
+
+      <span
+        part="hover-bridge"
+        class=${classMap({
+      "popup-hover-bridge": true,
+      "popup-hover-bridge-visible": this.hoverBridge && this.active
+    })}
+      ></span>
+
+      <div
+        popover="manual"
+        part="popup"
+        class=${classMap({
+      popup: true,
+      "popup-active": this.active,
+      "popup-fixed": !this.SUPPORTS_POPOVER,
+      "popup-has-arrow": this.arrow
+    })}
+      >
+        <slot></slot>
+        ${this.arrow ? html`<div part="arrow" class="arrow" role="presentation"></div>` : ""}
+      </div>
+    `;
+  }
+};
+CsPopup.css = popup_styles_default;
+__decorateClass([
+  query(".popup")
+], CsPopup.prototype, "popup", 2);
+__decorateClass([
+  query(".arrow")
+], CsPopup.prototype, "arrowEl", 2);
+__decorateClass([
+  property({ attribute: false, type: Boolean })
+], CsPopup.prototype, "SUPPORTS_POPOVER", 2);
+__decorateClass([
+  property()
+], CsPopup.prototype, "anchor", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CsPopup.prototype, "active", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsPopup.prototype, "placement", 2);
+__decorateClass([
+  property()
+], CsPopup.prototype, "boundary", 2);
+__decorateClass([
+  property({ type: Number })
+], CsPopup.prototype, "distance", 2);
+__decorateClass([
+  property({ type: Number })
+], CsPopup.prototype, "skidding", 2);
+__decorateClass([
+  property({ type: Boolean })
+], CsPopup.prototype, "arrow", 2);
+__decorateClass([
+  property({ attribute: "arrow-placement" })
+], CsPopup.prototype, "arrowPlacement", 2);
+__decorateClass([
+  property({ attribute: "arrow-padding", type: Number })
+], CsPopup.prototype, "arrowPadding", 2);
+__decorateClass([
+  property({ type: Boolean })
+], CsPopup.prototype, "flip", 2);
+__decorateClass([
+  property({
+    attribute: "flip-fallback-placements",
+    converter: {
+      fromAttribute: (value) => {
+        return value.split(" ").map((p) => p.trim()).filter((p) => p !== "");
+      },
+      toAttribute: (value) => {
+        return value.join(" ");
+      }
+    }
+  })
+], CsPopup.prototype, "flipFallbackPlacements", 2);
+__decorateClass([
+  property({ attribute: "flip-fallback-strategy" })
+], CsPopup.prototype, "flipFallbackStrategy", 2);
+__decorateClass([
+  property({ type: Object })
+], CsPopup.prototype, "flipBoundary", 2);
+__decorateClass([
+  property({ attribute: "flip-padding", type: Number })
+], CsPopup.prototype, "flipPadding", 2);
+__decorateClass([
+  property({ type: Boolean })
+], CsPopup.prototype, "shift", 2);
+__decorateClass([
+  property({ type: Object })
+], CsPopup.prototype, "shiftBoundary", 2);
+__decorateClass([
+  property({ attribute: "shift-padding", type: Number })
+], CsPopup.prototype, "shiftPadding", 2);
+__decorateClass([
+  property({ attribute: "auto-size" })
+], CsPopup.prototype, "autoSize", 2);
+__decorateClass([
+  property()
+], CsPopup.prototype, "sync", 2);
+__decorateClass([
+  property({ type: Object })
+], CsPopup.prototype, "autoSizeBoundary", 2);
+__decorateClass([
+  property({ attribute: "auto-size-padding", type: Number })
+], CsPopup.prototype, "autoSizePadding", 2);
+__decorateClass([
+  property({ attribute: "hover-bridge", type: Boolean })
+], CsPopup.prototype, "hoverBridge", 2);
+CsPopup = __decorateClass([
+  customElement("cs-popup")
+], CsPopup);
+
+export {
+  CsPopup
+};