@cruglobal/cornerstone-components 0.1.0 → 0.1.2

package/dist/unbundled/chunks/chunk.VCACIVIM.js

@@ -0,0 +1,291 @@
+/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  popover_styles_default
+} from "./chunk.S6B3BDIH.js";
+import {
+  CsShowEvent
+} from "./chunk.PFWLJLQH.js";
+import {
+  CsHideEvent
+} from "./chunk.S2L52YIY.js";
+import {
+  CsAfterHideEvent
+} from "./chunk.FWJNRWJQ.js";
+import {
+  CsAfterShowEvent
+} from "./chunk.FYZ4XPZB.js";
+import {
+  CsPopup
+} from "./chunk.SSUCPFEK.js";
+import {
+  isTopDismissible,
+  registerDismissible,
+  unregisterDismissible
+} from "./chunk.YTVB3RDP.js";
+import {
+  uniqueId
+} from "./chunk.PH66Z53C.js";
+import {
+  waitForEvent
+} from "./chunk.4AJKEX76.js";
+import {
+  animateWithClass
+} from "./chunk.YGNKXK2X.js";
+import {
+  watch
+} from "./chunk.CZUH2SE2.js";
+import {
+  CornerstoneElement,
+  customElement
+} from "./chunk.MJGPJYHJ.js";
+import {
+  __decorateClass
+} from "./chunk.BGNVR6GC.js";
+
+// src/components/popover/popover.ts
+import { html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var openPopovers = /* @__PURE__ */ new Set();
+var CsPopover = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.anchor = null;
+    this.placement = "top";
+    this.open = false;
+    this.distance = 8;
+    this.skidding = 0;
+    this.for = null;
+    this.withoutArrow = false;
+    this.eventController = new AbortController();
+    this.handleAnchorClick = () => {
+      this.open = !this.open;
+    };
+    this.handleBodyClick = (event) => {
+      const target = event.target;
+      const button = target.closest('[data-popover="close"]');
+      if (button) {
+        event.stopPropagation();
+        this.open = false;
+      }
+    };
+    this.handleDocumentKeyDown = (event) => {
+      if (event.key === "Escape" && this.open && isTopDismissible(this)) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.open = false;
+        const anchor = this.anchor;
+        if (anchor && typeof anchor.focus === "function") {
+          anchor.focus({ preventScroll: true });
+        }
+      }
+    };
+    this.handleDocumentClick = (event) => {
+      if (this.anchor && event.composedPath().includes(this.anchor)) {
+        return;
+      }
+      if (!event.composedPath().includes(this)) {
+        this.open = false;
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.id) {
+      this.id = uniqueId("cs-popover-");
+    }
+    if (this.eventController.signal.aborted) {
+      this.eventController = new AbortController();
+    }
+    if (this.for && this.anchor) {
+      this.anchor = null;
+      this.handleForChange();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("keydown", this.handleDocumentKeyDown);
+    unregisterDismissible(this);
+    this.eventController.abort();
+  }
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    if (this.open) {
+      this.dialog.show();
+      this.popup.active = true;
+      this.popup.reposition();
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("open")) {
+      this.customStates.set("open", this.open);
+    }
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      const csShowEvent = new CsShowEvent();
+      this.dispatchEvent(csShowEvent);
+      if (csShowEvent.defaultPrevented) {
+        this.open = false;
+        return;
+      }
+      openPopovers.forEach((popover) => popover.open = false);
+      document.addEventListener("keydown", this.handleDocumentKeyDown, { signal: this.eventController.signal });
+      document.addEventListener("click", this.handleDocumentClick, { signal: this.eventController.signal });
+      this.dialog.setAttribute("open", "");
+      this.popup.active = true;
+      openPopovers.add(this);
+      registerDismissible(this);
+      requestAnimationFrame(() => {
+        const elementToFocus = this.querySelector("[autofocus]");
+        if (elementToFocus && typeof elementToFocus.focus === "function") {
+          elementToFocus.focus({ preventScroll: true });
+        } else {
+          this.dialog.focus({ preventScroll: true });
+        }
+      });
+      await animateWithClass(this.popup.popup, "show-with-scale");
+      this.popup.reposition();
+      this.dispatchEvent(new CsAfterShowEvent());
+    } else {
+      const csHideEvent = new CsHideEvent();
+      this.dispatchEvent(csHideEvent);
+      if (csHideEvent.defaultPrevented) {
+        this.open = true;
+        return;
+      }
+      document.removeEventListener("keydown", this.handleDocumentKeyDown);
+      document.removeEventListener("click", this.handleDocumentClick);
+      openPopovers.delete(this);
+      unregisterDismissible(this);
+      await animateWithClass(this.popup.popup, "hide-with-scale");
+      this.popup.active = false;
+      this.dialog.close();
+      this.dispatchEvent(new CsAfterHideEvent());
+    }
+  }
+  handleForChange() {
+    const rootNode = this.getRootNode();
+    if (!rootNode) {
+      return;
+    }
+    const newAnchor = this.for ? rootNode.getElementById(this.for) : null;
+    const oldAnchor = this.anchor;
+    if (newAnchor === oldAnchor) {
+      return;
+    }
+    const { signal } = this.eventController;
+    if (newAnchor) {
+      newAnchor.addEventListener("click", this.handleAnchorClick, { signal });
+    }
+    if (oldAnchor) {
+      oldAnchor.removeEventListener("click", this.handleAnchorClick);
+    }
+    this.anchor = newAnchor;
+    if (this.for && !newAnchor) {
+      console.warn(
+        `A popover was assigned to an element with an ID of "${this.for}" but the element could not be found.`,
+        this
+      );
+    }
+  }
+  async handleOptionsChange() {
+    if (this.hasUpdated) {
+      await this.updateComplete;
+      this.popup.reposition();
+    }
+  }
+  /** Shows the popover. */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    this.open = true;
+    return waitForEvent(this, "cs-after-show");
+  }
+  /** Hides the popover. */
+  async hide() {
+    if (!this.open) {
+      return void 0;
+    }
+    this.open = false;
+    return waitForEvent(this, "cs-after-hide");
+  }
+  render() {
+    return html`
+      <dialog part="dialog" class="dialog">
+        <cs-popup
+          part="popup"
+          exportparts="
+            popup:popup__popup,
+            arrow:popup__arrow
+          "
+          class=${classMap({
+      popover: true,
+      "popover-open": this.open
+    })}
+          placement=${this.placement}
+          distance=${this.distance}
+          skidding=${this.skidding}
+          flip
+          shift
+          shift-padding="8"
+          ?arrow=${!this.withoutArrow}
+          .anchor=${this.anchor}
+        >
+          <div part="body" class="body" @click=${this.handleBodyClick}>
+            <slot></slot>
+          </div>
+        </cs-popup>
+      </dialog>
+    `;
+  }
+};
+CsPopover.css = popover_styles_default;
+CsPopover.dependencies = { "cs-popup": CsPopup };
+__decorateClass([
+  query("dialog")
+], CsPopover.prototype, "dialog", 2);
+__decorateClass([
+  query(".body")
+], CsPopover.prototype, "body", 2);
+__decorateClass([
+  query("cs-popup")
+], CsPopover.prototype, "popup", 2);
+__decorateClass([
+  state()
+], CsPopover.prototype, "anchor", 2);
+__decorateClass([
+  property()
+], CsPopover.prototype, "placement", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CsPopover.prototype, "open", 2);
+__decorateClass([
+  property({ type: Number })
+], CsPopover.prototype, "distance", 2);
+__decorateClass([
+  property({ type: Number })
+], CsPopover.prototype, "skidding", 2);
+__decorateClass([
+  property()
+], CsPopover.prototype, "for", 2);
+__decorateClass([
+  property({ attribute: "without-arrow", type: Boolean, reflect: true })
+], CsPopover.prototype, "withoutArrow", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], CsPopover.prototype, "handleOpenChange", 1);
+__decorateClass([
+  watch("for")
+], CsPopover.prototype, "handleForChange", 1);
+__decorateClass([
+  watch(["distance", "placement", "skidding"])
+], CsPopover.prototype, "handleOptionsChange", 1);
+CsPopover = __decorateClass([
+  customElement("cs-popover")
+], CsPopover);
+
+export {
+  CsPopover
+};

package/dist/unbundled/chunks/chunk.VCZSVJIR.js

@@ -0,0 +1,83 @@
+/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/components/split-panel/split-panel.styles.ts
+import { css } from "lit";
+var split_panel_styles_default = css`
+  :host {
+    --divider-width: 0.25rem;
+    --divider-hit-area: 0.75rem;
+    --min: 0%;
+    --max: 100%;
+
+    display: grid;
+  }
+
+  .start,
+  .end {
+    overflow: hidden;
+  }
+
+  .divider {
+    flex: 0 0 var(--divider-width);
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--cs-color-neutral-border-normal);
+    color: var(--cs-color-neutral-on-normal);
+    z-index: 1;
+  }
+
+  .divider:focus {
+    outline: none;
+  }
+
+  :host(:not([disabled])) .divider:focus-visible {
+    outline: var(--cs-focus-ring);
+  }
+
+  :host([disabled]) .divider {
+    cursor: not-allowed;
+  }
+
+  /* Horizontal */
+  :host(:not([orientation='vertical'], [disabled])) .divider {
+    cursor: col-resize;
+  }
+
+  :host(:not([orientation='vertical'])) .divider::after {
+    display: flex;
+    content: '';
+    position: absolute;
+    height: 100%;
+    left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
+    width: var(--divider-hit-area);
+  }
+
+  /* Vertical */
+  :host([orientation='vertical']) {
+    flex-direction: column;
+  }
+
+  :host([orientation='vertical']:not([disabled])) .divider {
+    cursor: row-resize;
+  }
+
+  :host([orientation='vertical']) .divider::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
+    height: var(--divider-hit-area);
+  }
+
+  @media (forced-colors: active) {
+    .divider {
+      outline: solid 1px transparent;
+    }
+  }
+`;
+
+export {
+  split_panel_styles_default
+};

package/dist/unbundled/chunks/chunk.VP47C6EW.js

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

package/dist/unbundled/chunks/chunk.VPZPQ3YQ.js

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

package/dist/unbundled/chunks/chunk.VQVX3PN2.js

@@ -0,0 +1,233 @@
+/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  option_styles_default
+} from "./chunk.K7CSG7YM.js";
+import {
+  CornerstoneElement,
+  customElement
+} from "./chunk.MJGPJYHJ.js";
+import {
+  LocalizeController
+} from "./chunk.Z3FB4NQE.js";
+import {
+  __decorateClass
+} from "./chunk.BGNVR6GC.js";
+
+// src/components/option/option.ts
+import { html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+
+// src/internal/get-text.ts
+function getText(root, depth = 0) {
+  if (!root || !globalThis.Node) {
+    return "";
+  }
+  if (typeof root[Symbol.iterator] === "function") {
+    const nodes = Array.isArray(root) ? root : [...root];
+    return nodes.map((node2) => getText(node2, --depth)).join("");
+  }
+  const node = root;
+  if (node.nodeType === Node.TEXT_NODE) {
+    return node.textContent ?? "";
+  }
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    const element = node;
+    if (element.hasAttribute("slot") || element.matches("style, script")) {
+      return "";
+    }
+    if (element instanceof HTMLSlotElement) {
+      const assignedNodes = element.assignedNodes({ flatten: true });
+      if (assignedNodes.length > 0) {
+        return getText(assignedNodes, --depth);
+      }
+    }
+    return depth > -1 ? getText(element, --depth) : element.textContent ?? "";
+  }
+  return node.hasChildNodes() ? getText(node.childNodes, --depth) : "";
+}
+
+// src/components/option/option.ts
+var CsOption = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    // @ts-expect-error - Controller is currently unused
+    this.localize = new LocalizeController(this);
+    this.cachedDefaultLabel = "";
+    this.isInitialized = false;
+    this.isDefaultLabelDirty = true;
+    this.current = false;
+    this.value = "";
+    this.disabled = false;
+    this.selected = false;
+    this.defaultSelected = false;
+    this._label = "";
+    this.handleHover = (event) => {
+      if (event.type === "mouseenter") {
+        this.customStates.set("hover", true);
+      } else if (event.type === "mouseleave") {
+        this.customStates.set("hover", false);
+      }
+    };
+  }
+  set label(value) {
+    const oldValue = this._label;
+    this._label = value || "";
+    if (this._label !== oldValue) {
+      this.requestUpdate("label", oldValue);
+    }
+  }
+  get label() {
+    if (this._label) {
+      return this._label;
+    }
+    return this.defaultLabel;
+  }
+  /** The default label, generated from the element contents. Will be equal to `label` in most cases. */
+  get defaultLabel() {
+    if (this.isDefaultLabelDirty || !this.cachedDefaultLabel) {
+      this.updateDefaultLabel();
+    }
+    return this.cachedDefaultLabel;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "option");
+    this.setAttribute("aria-selected", "false");
+    this.addEventListener("mouseenter", this.handleHover);
+    this.addEventListener("mouseleave", this.handleHover);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("mouseenter", this.handleHover);
+    this.removeEventListener("mouseleave", this.handleHover);
+  }
+  handleDefaultSlotChange() {
+    this.isDefaultLabelDirty = true;
+    if (this.isInitialized) {
+      customElements.whenDefined("cs-select").then(() => {
+        const controller = this.closest("cs-select");
+        if (controller) {
+          controller.handleDefaultSlotChange?.();
+        }
+      });
+      customElements.whenDefined("cs-combobox").then(() => {
+        const controller = this.closest("cs-combobox");
+        if (controller) {
+          controller.handleDefaultSlotChange?.();
+        }
+      });
+    } else {
+      this.isInitialized = true;
+    }
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("defaultSelected")) {
+      if (this.didSSR && this.hasUpdated || !this.didSSR) {
+        this.syncDefaultSelected();
+      }
+    }
+    super.willUpdate(changedProperties);
+  }
+  syncDefaultSelected() {
+    if ("closest" in this) {
+      if (!this.closest("cs-combobox, cs-select")?.hasInteracted) {
+        if (this.defaultSelected) {
+          const oldVal = this.selected;
+          this.selected = this.defaultSelected;
+          this.requestUpdate("selected", oldVal);
+        }
+      }
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("disabled")) {
+      this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+      this.customStates.set("disabled", this.disabled);
+    }
+    if (changedProperties.has("selected")) {
+      this.setAttribute("aria-selected", this.selected ? "true" : "false");
+      this.customStates.set("selected", this.selected);
+    }
+    if (changedProperties.has("value")) {
+      if (typeof this.value !== "string") {
+        this.value = String(this.value);
+      }
+      this.handleDefaultSlotChange();
+    }
+    if (changedProperties.has("current")) {
+      this.customStates.set("current", this.current);
+    }
+    super.updated(changedProperties);
+  }
+  async firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    if (this.didSSR && !this.hasUpdated) {
+      await this.updateComplete;
+      this.syncDefaultSelected();
+    } else {
+      this.syncDefaultSelected();
+    }
+    if (this.selected && !this.defaultSelected) {
+      const parent = this.closest("cs-select, cs-combobox");
+      if (parent && !parent.hasInteracted) {
+        await customElements.whenDefined(parent.localName);
+        await parent.updateComplete;
+        parent.selectionChanged?.();
+      }
+    }
+  }
+  updateDefaultLabel() {
+    const oldValue = this.cachedDefaultLabel;
+    this.cachedDefaultLabel = getText(this).trim();
+    this.isDefaultLabelDirty = false;
+    const changed = this.cachedDefaultLabel !== oldValue;
+    if (!this._label && changed) {
+      this.requestUpdate("label", oldValue);
+    }
+    return changed;
+  }
+  render() {
+    const selected = this.selected;
+    if (this.didSSR && !this.hasUpdated) {
+      this.updateComplete.then(() => {
+        this.requestUpdate();
+      });
+      return nothing;
+    }
+    return html`
+      ${selected ? html`<cs-icon part="checked-icon" class="check" name="check" library="system" aria-hidden="true"></cs-icon>` : html`<span part="checked-icon" class="check" aria-hidden="true"></span>`}
+      <slot part="start" name="start" class="start"></slot>
+      <slot part="label" class="label" @slotchange=${this.handleDefaultSlotChange}></slot>
+      <slot part="end" name="end" class="end"></slot>
+    `;
+  }
+};
+CsOption.css = option_styles_default;
+__decorateClass([
+  query(".label")
+], CsOption.prototype, "defaultSlot", 2);
+__decorateClass([
+  state()
+], CsOption.prototype, "current", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsOption.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean })
+], CsOption.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: false })
+], CsOption.prototype, "selected", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "selected" })
+], CsOption.prototype, "defaultSelected", 2);
+__decorateClass([
+  property()
+], CsOption.prototype, "label", 1);
+CsOption = __decorateClass([
+  customElement("cs-option")
+], CsOption);
+
+export {
+  CsOption
+};

package/dist/unbundled/chunks/chunk.VTGJPYYJ.js

@@ -0,0 +1,49 @@
+/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/styles/component/form-control.styles.ts
+import { css } from "lit";
+var form_control_styles_default = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Treat wrapped labels, inputs, and hints as direct children of the host element */
+  [part~='form-control'] {
+    display: contents;
+  }
+
+  /* Label */
+  :is([part~='form-control-label'], [part~='label']):has(*:not(:empty)),
+  :is([part~='form-control-label'], [part~='label']).has-label {
+    display: inline-flex;
+    color: var(--cs-form-control-label-color);
+    font-weight: var(--cs-form-control-label-font-weight);
+    line-height: var(--cs-form-control-label-line-height);
+    margin-block-end: 0.5em;
+  }
+
+  :host([required]) :is([part~='form-control-label'], [part~='label'])::after {
+    content: var(--cs-form-control-required-content);
+    margin-inline-start: var(--cs-form-control-required-content-offset);
+    color: var(--cs-form-control-required-content-color);
+  }
+
+  /* Help text */
+  [part~='hint'] {
+    display: block;
+    color: var(--cs-form-control-hint-color);
+    font-weight: var(--cs-form-control-hint-font-weight);
+    line-height: var(--cs-form-control-hint-line-height);
+    margin-block-start: 0.5em;
+    font-size: var(--cs-font-size-smaller);
+
+    &:not(.has-slotted, .has-hint, .has-count) {
+      display: none;
+    }
+  }
+`;
+
+export {
+  form_control_styles_default
+};

package/dist/unbundled/chunks/chunk.WA5SDD7F.js

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