@cruglobal/cornerstone-components 0.6.1 → 0.6.2

package/dist/bundled/chunks/chunk.EWCQL3X4.js

@@ -1,300 +0,0 @@
-/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  RenderedWatcher
-} from "./chunk.GQLUBOBN.js";
-import {
-  lockBodyScrolling,
-  unlockBodyScrolling
-} from "./chunk.HB5W2DAA.js";
-import {
-  parseSpaceDelimitedTokens
-} from "./chunk.4ER2E763.js";
-import {
-  CsShowEvent
-} from "./chunk.4TFLBLIK.js";
-import {
-  CsHideEvent
-} from "./chunk.ZNGY3YWP.js";
-import {
-  CsAfterHideEvent
-} from "./chunk.DTSB32OH.js";
-import {
-  CsAfterShowEvent
-} from "./chunk.5RX54WNG.js";
-import {
-  dialog_styles_default
-} from "./chunk.BA2RRR5B.js";
-import {
-  isTopDismissible,
-  registerDismissible,
-  unregisterDismissible
-} from "./chunk.D7SIEB3H.js";
-import {
-  HasSlotController
-} from "./chunk.XHYSA6KF.js";
-import {
-  o as o2
-} from "./chunk.X6Q3EMPK.js";
-import {
-  animateWithClass
-} from "./chunk.I6DUCETP.js";
-import {
-  e as e2
-} from "./chunk.YL2SORTA.js";
-import {
-  watch
-} from "./chunk.PGRLJT6U.js";
-import {
-  CornerstoneElement,
-  customElement,
-  e,
-  n
-} from "./chunk.AWCR23QG.js";
-import {
-  LocalizeController
-} from "./chunk.DFT6CMNV.js";
-import {
-  o
-} from "./chunk.G7UCSRIQ.js";
-import {
-  b
-} from "./chunk.FQUMEV4X.js";
-import {
-  __decorateClass
-} from "./chunk.WA5AGEMP.js";
-
-// src/components/dialog/dialog.ts
-var CsDialog = class extends CornerstoneElement {
-  constructor() {
-    super(...arguments);
-    this.localize = new LocalizeController(this);
-    this.hasSlotController = new HasSlotController(this, "footer");
-    this.renderedWatcher = new RenderedWatcher(this, (isRendered) => this.handleRenderedChange(isRendered));
-    this.open = false;
-    this.label = "";
-    this.withoutHeader = false;
-    this.lightDismiss = false;
-    this.ssrFooter = false;
-    this.handleDocumentKeyDown = (event) => {
-      if (event.key === "Escape" && this.open && isTopDismissible(this)) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.requestClose(this.dialog);
-      }
-    };
-  }
-  firstUpdated(changedProperties) {
-    super.firstUpdated(changedProperties);
-    if (this.open) {
-      this.addOpenListeners();
-      this.dialog.showModal();
-      lockBodyScrolling(this);
-      this.renderedWatcher.start(this.dialog);
-    }
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.renderedWatcher.stop();
-    unlockBodyScrolling(this);
-    this.removeOpenListeners();
-  }
-  async requestClose(source) {
-    const csHideEvent = new CsHideEvent({ source });
-    this.dispatchEvent(csHideEvent);
-    if (csHideEvent.defaultPrevented) {
-      this.open = true;
-      animateWithClass(this.dialog, "pulse");
-      return;
-    }
-    this.removeOpenListeners();
-    await animateWithClass(this.dialog, "hide");
-    this.open = false;
-    this.dialog.close();
-    unlockBodyScrolling(this);
-    this.renderedWatcher.stop();
-    const trigger = this.originalTrigger;
-    if (typeof trigger?.focus === "function") {
-      setTimeout(() => trigger.focus());
-    }
-    this.dispatchEvent(new CsAfterHideEvent());
-  }
-  addOpenListeners() {
-    document.addEventListener("keydown", this.handleDocumentKeyDown);
-    registerDismissible(this);
-  }
-  removeOpenListeners() {
-    document.removeEventListener("keydown", this.handleDocumentKeyDown);
-    unregisterDismissible(this);
-  }
-  handleDialogCancel(event) {
-    event.preventDefault();
-    if (!this.dialog.classList.contains("hide") && event.target === this.dialog && isTopDismissible(this)) {
-      this.requestClose(this.dialog);
-    }
-  }
-  handleDialogClick(event) {
-    const target = event.target;
-    const button = target.closest('[data-dialog="close"]');
-    if (button) {
-      event.stopPropagation();
-      this.requestClose(button);
-    }
-  }
-  async handleDialogPointerDown(event) {
-    if (event.target === this.dialog) {
-      if (this.lightDismiss) {
-        this.requestClose(this.dialog);
-      } else {
-        await animateWithClass(this.dialog, "pulse");
-      }
-    }
-  }
-  /**
-   * Suspends the modal when third-party CSS (e.g. cookie banner blockers) hides an open dialog, so the page isn't
-   * left scroll locked and inert. "open" stays true so the modal resumes if the dialog is rendered again.
-   */
-  handleRenderedChange(isRendered) {
-    if (!this.open) {
-      this.renderedWatcher.stop();
-      return;
-    }
-    if (!isRendered && this.dialog.open) {
-      this.removeOpenListeners();
-      this.dialog.close();
-      unlockBodyScrolling(this);
-    } else if (isRendered && !this.dialog.open) {
-      this.addOpenListeners();
-      this.dialog.showModal();
-      lockBodyScrolling(this);
-    }
-  }
-  handleOpenChange() {
-    if (this.open && !this.dialog.open) {
-      this.show();
-    } else if (!this.open && this.dialog.open) {
-      this.open = true;
-      this.requestClose(this.dialog);
-    } else if (!this.open) {
-      this.renderedWatcher.stop();
-    }
-  }
-  /** Shows the dialog. */
-  async show() {
-    const csShowEvent = new CsShowEvent();
-    this.dispatchEvent(csShowEvent);
-    if (csShowEvent.defaultPrevented) {
-      this.open = false;
-      return;
-    }
-    this.addOpenListeners();
-    this.originalTrigger = document.activeElement;
-    this.open = true;
-    this.dialog.showModal();
-    lockBodyScrolling(this);
-    this.renderedWatcher.start(this.dialog);
-    requestAnimationFrame(() => {
-      const elementToFocus = this.querySelector("[autofocus]");
-      if (elementToFocus && typeof elementToFocus.focus === "function") {
-        elementToFocus.focus();
-      } else {
-        this.dialog.focus();
-      }
-    });
-    await animateWithClass(this.dialog, "show");
-    this.dispatchEvent(new CsAfterShowEvent());
-  }
-  render() {
-    const hasHeader = !this.withoutHeader;
-    const labelledBy = hasHeader ? "title" : void 0;
-    const hasFooter = this.hasSlotController.test("footer", "ssrFooter");
-    return b`
-      <dialog
-        part="dialog"
-        aria-labelledby=${o2(labelledBy)}
-        class=${e2({
-      dialog: true,
-      open: this.open
-    })}
-        @cancel=${this.handleDialogCancel}
-        @click=${this.handleDialogClick}
-        @pointerdown=${this.handleDialogPointerDown}
-      >
-        ${hasHeader ? b`
-                <header part="header" class="header">
-                  <h2 part="title" class="title" id="title">
-                    <!-- If there's no label, use an invisible character to prevent the header from collapsing -->
-                    <slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(8203)} </slot>
-                  </h2>
-                  <div part="header-actions" class="header-actions">
-                    <slot name="header-actions"></slot>
-                    <cs-button
-                      part="close-button"
-                      exportparts="button:close-button__button"
-                      class="close"
-                      appearance="plain"
-                      @click="${(event) => this.requestClose(event.target)}"
-                    >
-                      <cs-icon name="close" label=${this.localize.term("close")} library="system"></cs-icon>
-                    </cs-button>
-                  </div>
-                </header>
-              ` : ""}
-
-        <div part="body" class="body"><slot></slot></div>
-
-        <!-- Use a hidden element so we still get "slotchange" events. -->
-        <footer part="footer" class="footer" ?hidden=${!hasFooter}>
-          <slot name="footer"></slot>
-        </footer>
-      </dialog>
-    `;
-  }
-};
-CsDialog.css = dialog_styles_default;
-__decorateClass([
-  e(".dialog")
-], CsDialog.prototype, "dialog", 2);
-__decorateClass([
-  n({ type: Boolean, reflect: true })
-], CsDialog.prototype, "open", 2);
-__decorateClass([
-  n({ reflect: true })
-], CsDialog.prototype, "label", 2);
-__decorateClass([
-  n({ attribute: "without-header", type: Boolean, reflect: true })
-], CsDialog.prototype, "withoutHeader", 2);
-__decorateClass([
-  n({ attribute: "light-dismiss", type: Boolean })
-], CsDialog.prototype, "lightDismiss", 2);
-__decorateClass([
-  n({ attribute: "ssr-footer", type: Boolean })
-], CsDialog.prototype, "ssrFooter", 2);
-__decorateClass([
-  watch("open", { waitUntilFirstUpdate: true })
-], CsDialog.prototype, "handleOpenChange", 1);
-CsDialog = __decorateClass([
-  customElement("cs-dialog")
-], CsDialog);
-if (!o) {
-  document.addEventListener("click", (event) => {
-    const dialogAttrEl = event.target.closest("[data-dialog]");
-    if (dialogAttrEl instanceof Element) {
-      const [command, id] = parseSpaceDelimitedTokens(dialogAttrEl.getAttribute("data-dialog") || "");
-      if (command === "open" && id?.length) {
-        const doc = dialogAttrEl.getRootNode();
-        const dialog = doc.getElementById(id);
-        if (dialog?.localName === "cs-dialog") {
-          dialog.open = true;
-        } else {
-          console.warn(`A dialog with an ID of "${id}" could not be found in this document.`);
-        }
-      }
-    }
-  });
-  document.addEventListener("pointerdown", () => {
-  });
-}
-
-export {
-  CsDialog
-};

package/dist/bundled/chunks/chunk.EXBOYJA5.js

@@ -1,51 +0,0 @@
-/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  i
-} from "./chunk.G7UCSRIQ.js";
-
-// src/styles/component/form-control.styles.ts
-var form_control_styles_default = i`
-  :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/bundled/chunks/chunk.EXR2UCMZ.js

@@ -1,76 +0,0 @@
-/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  i
-} from "./chunk.G7UCSRIQ.js";
-
-// src/components/progress-ring/progress-ring.styles.ts
-var progress_ring_styles_default = i`
-  :host {
-    --size: 8rem;
-    --track-width: 0.25em; /* avoid using rems here */
-    --track-color: var(--cs-color-neutral-fill-normal);
-    --indicator-width: var(--track-width);
-    --indicator-color: var(--cs-color-brand-fill-loud);
-    --indicator-transition-duration: 0.35s;
-
-    display: inline-flex;
-  }
-
-  .progress-ring {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-  }
-
-  .image {
-    width: var(--size);
-    height: var(--size);
-    rotate: -90deg;
-    transform-origin: 50% 50%;
-  }
-
-  .track,
-  .indicator {
-    --radius: calc(var(--size) / 2 - max(var(--track-width), var(--indicator-width)) * 0.5);
-    --circumference: calc(var(--radius) * 2 * 3.141592654);
-
-    fill: none;
-    r: var(--radius);
-    cx: calc(var(--size) / 2);
-    cy: calc(var(--size) / 2);
-  }
-
-  .track {
-    stroke: var(--track-color);
-    stroke-width: var(--track-width);
-  }
-
-  .indicator {
-    stroke: var(--indicator-color);
-    stroke-width: var(--indicator-width);
-    stroke-linecap: round;
-    transition-property: stroke-dashoffset;
-    transition-duration: var(--indicator-transition-duration);
-    stroke-dasharray: var(--circumference) var(--circumference);
-    stroke-dashoffset: calc(var(--circumference) - var(--percentage) * var(--circumference));
-  }
-
-  .label {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    text-align: center;
-    user-select: none;
-    -webkit-user-select: none;
-  }
-`;
-
-export {
-  progress_ring_styles_default
-};

package/dist/bundled/chunks/chunk.F3EKSAJC.js

@@ -1,103 +0,0 @@
-/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  i
-} from "./chunk.G7UCSRIQ.js";
-
-// src/styles/component/variants.styles.ts
-var variants_styles_default = i`
-  :where(:root),
-  .cs-neutral,
-  :host([variant='neutral']) {
-    --cs-color-fill-loud: var(--cs-color-neutral-fill-loud);
-    --cs-color-fill-normal: var(--cs-color-neutral-fill-normal);
-    --cs-color-fill-quiet: var(--cs-color-neutral-fill-quiet);
-    --cs-color-border-loud: var(--cs-color-neutral-border-loud);
-    --cs-color-border-normal: var(--cs-color-neutral-border-normal);
-    --cs-color-border-quiet: var(--cs-color-neutral-border-quiet);
-    --cs-color-on-loud: var(--cs-color-neutral-on-loud);
-    --cs-color-on-normal: var(--cs-color-neutral-on-normal);
-    --cs-color-on-quiet: var(--cs-color-neutral-on-quiet);
-  }
-
-  .cs-brand,
-  :host([variant='brand']) {
-    --cs-color-fill-loud: var(--cs-color-brand-fill-loud);
-    --cs-color-fill-normal: var(--cs-color-brand-fill-normal);
-    --cs-color-fill-quiet: var(--cs-color-brand-fill-quiet);
-    --cs-color-border-loud: var(--cs-color-brand-border-loud);
-    --cs-color-border-normal: var(--cs-color-brand-border-normal);
-    --cs-color-border-quiet: var(--cs-color-brand-border-quiet);
-    --cs-color-on-loud: var(--cs-color-brand-on-loud);
-    --cs-color-on-normal: var(--cs-color-brand-on-normal);
-    --cs-color-on-quiet: var(--cs-color-brand-on-quiet);
-  }
-
-  .cs-success,
-  :host([variant='success']) {
-    --cs-color-fill-loud: var(--cs-color-success-fill-loud);
-    --cs-color-fill-normal: var(--cs-color-success-fill-normal);
-    --cs-color-fill-quiet: var(--cs-color-success-fill-quiet);
-    --cs-color-border-loud: var(--cs-color-success-border-loud);
-    --cs-color-border-normal: var(--cs-color-success-border-normal);
-    --cs-color-border-quiet: var(--cs-color-success-border-quiet);
-    --cs-color-on-loud: var(--cs-color-success-on-loud);
-    --cs-color-on-normal: var(--cs-color-success-on-normal);
-    --cs-color-on-quiet: var(--cs-color-success-on-quiet);
-  }
-
-  .cs-warning,
-  :host([variant='warning']) {
-    --cs-color-fill-loud: var(--cs-color-warning-fill-loud);
-    --cs-color-fill-normal: var(--cs-color-warning-fill-normal);
-    --cs-color-fill-quiet: var(--cs-color-warning-fill-quiet);
-    --cs-color-border-loud: var(--cs-color-warning-border-loud);
-    --cs-color-border-normal: var(--cs-color-warning-border-normal);
-    --cs-color-border-quiet: var(--cs-color-warning-border-quiet);
-    --cs-color-on-loud: var(--cs-color-warning-on-loud);
-    --cs-color-on-normal: var(--cs-color-warning-on-normal);
-    --cs-color-on-quiet: var(--cs-color-warning-on-quiet);
-  }
-
-  .cs-highlight,
-  :host([variant='highlight']) {
-    --cs-color-fill-loud: var(--cs-color-highlight-fill-loud);
-    --cs-color-fill-normal: var(--cs-color-highlight-fill-normal);
-    --cs-color-fill-quiet: var(--cs-color-highlight-fill-quiet);
-    --cs-color-border-loud: var(--cs-color-highlight-border-loud);
-    --cs-color-border-normal: var(--cs-color-highlight-border-normal);
-    --cs-color-border-quiet: var(--cs-color-highlight-border-quiet);
-    --cs-color-on-loud: var(--cs-color-highlight-on-loud);
-    --cs-color-on-normal: var(--cs-color-highlight-on-normal);
-    --cs-color-on-quiet: var(--cs-color-highlight-on-quiet);
-  }
-
-  .cs-information,
-  :host([variant='information']) {
-    --cs-color-fill-loud: var(--cs-color-information-fill-loud);
-    --cs-color-fill-normal: var(--cs-color-information-fill-normal);
-    --cs-color-fill-quiet: var(--cs-color-information-fill-quiet);
-    --cs-color-border-loud: var(--cs-color-information-border-loud);
-    --cs-color-border-normal: var(--cs-color-information-border-normal);
-    --cs-color-border-quiet: var(--cs-color-information-border-quiet);
-    --cs-color-on-loud: var(--cs-color-information-on-loud);
-    --cs-color-on-normal: var(--cs-color-information-on-normal);
-    --cs-color-on-quiet: var(--cs-color-information-on-quiet);
-  }
-
-  .cs-danger,
-  :host([variant='danger']) {
-    --cs-color-fill-loud: var(--cs-color-danger-fill-loud);
-    --cs-color-fill-normal: var(--cs-color-danger-fill-normal);
-    --cs-color-fill-quiet: var(--cs-color-danger-fill-quiet);
-    --cs-color-border-loud: var(--cs-color-danger-border-loud);
-    --cs-color-border-normal: var(--cs-color-danger-border-normal);
-    --cs-color-border-quiet: var(--cs-color-danger-border-quiet);
-    --cs-color-on-loud: var(--cs-color-danger-on-loud);
-    --cs-color-on-normal: var(--cs-color-danger-on-normal);
-    --cs-color-on-quiet: var(--cs-color-danger-on-quiet);
-  }
-`;
-
-export {
-  variants_styles_default
-};

package/dist/bundled/chunks/chunk.FFK2EPSR.js

@@ -1,32 +0,0 @@
-/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  o,
-  require_react
-} from "./chunk.O6TFOOQT.js";
-import {
-  CsDetails
-} from "./chunk.ZVY3PIEC.js";
-import {
-  __toESM
-} from "./chunk.WA5AGEMP.js";
-
-// src/react/details/index.ts
-var React = __toESM(require_react(), 1);
-var tagName = "cs-details";
-var reactWrapper = o({
-  tagName,
-  elementClass: CsDetails,
-  react: React,
-  events: {
-    onCsShow: "cs-show",
-    onCsAfterShow: "cs-after-show",
-    onCsHide: "cs-hide",
-    onCsAfterHide: "cs-after-hide"
-  },
-  displayName: "CsDetails"
-});
-var details_default = reactWrapper;
-
-export {
-  details_default
-};

package/dist/bundled/chunks/chunk.FIDKT6QU.js

@@ -1,31 +0,0 @@
-/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  o,
-  require_react
-} from "./chunk.O6TFOOQT.js";
-import {
-  CsAnimation
-} from "./chunk.23UWATNG.js";
-import {
-  __toESM
-} from "./chunk.WA5AGEMP.js";
-
-// src/react/animation/index.ts
-var React = __toESM(require_react(), 1);
-var tagName = "cs-animation";
-var reactWrapper = o({
-  tagName,
-  elementClass: CsAnimation,
-  react: React,
-  events: {
-    onCsCancel: "cs-cancel",
-    onCsFinish: "cs-finish",
-    onCsStart: "cs-start"
-  },
-  displayName: "CsAnimation"
-});
-var animation_default = reactWrapper;
-
-export {
-  animation_default
-};