@cruglobal/cornerstone-components 0.1.2 → 0.1.3

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

@@ -1,300 +0,0 @@
-/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  RenderedWatcher
-} from "./chunk.EWKCI5GM.js";
-import {
-  lockBodyScrolling,
-  unlockBodyScrolling
-} from "./chunk.ANWBZNKT.js";
-import {
-  parseSpaceDelimitedTokens
-} from "./chunk.NIHFTMFY.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 {
-  dialog_styles_default
-} from "./chunk.SH64SIBC.js";
-import {
-  isTopDismissible,
-  registerDismissible,
-  unregisterDismissible
-} from "./chunk.YTVB3RDP.js";
-import {
-  HasSlotController
-} from "./chunk.YU2E4JNS.js";
-import {
-  o as o2
-} from "./chunk.6PVYO5CE.js";
-import {
-  animateWithClass
-} from "./chunk.YGNKXK2X.js";
-import {
-  e as e2
-} from "./chunk.NZZROG3B.js";
-import {
-  watch
-} from "./chunk.CZUH2SE2.js";
-import {
-  CornerstoneElement,
-  customElement,
-  e,
-  n
-} from "./chunk.LQ7XXMRT.js";
-import {
-  LocalizeController
-} from "./chunk.Y4VPKQYM.js";
-import {
-  o
-} from "./chunk.WH4RAXRT.js";
-import {
-  b
-} from "./chunk.QZ4WRTL6.js";
-import {
-  __decorateClass
-} from "./chunk.RMUSUQ7M.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.ZSNC5CG6.js

@@ -1,97 +0,0 @@
-/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  i
-} from "./chunk.WH4RAXRT.js";
-
-// src/components/option/option.styles.ts
-var option_styles_default = i`
-  :host {
-    --current-text-color: var(--cs-color-brand-on-loud);
-
-    display: block;
-    color: var(--cs-color-text-normal);
-    -webkit-user-select: none;
-    user-select: none;
-
-    position: relative;
-    display: flex;
-    align-items: center;
-    font: inherit;
-    padding: 0.5em 1em 0.5em 0.25em;
-    border-radius: var(--cs-border-radius-s);
-    line-height: var(--cs-line-height-condensed);
-    transition: var(--cs-transition-fast) background-color var(--cs-transition-easing);
-    cursor: pointer;
-  }
-
-  :host(:focus) {
-    outline: none;
-  }
-
-  @media (hover: hover) {
-    :host(:not(:state(disabled), :state(current)):is(:state(hover), :hover)) {
-      background-color: var(--cs-color-neutral-fill-normal);
-      color: var(--cs-color-neutral-on-normal);
-    }
-  }
-
-  :host(:state(current)),
-  :host(:state(disabled):state(current)) {
-    background-color: var(--cs-form-control-activated-color);
-    color: var(--current-text-color);
-    opacity: 1;
-  }
-
-  :host(:state(disabled)) {
-    outline: none;
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .label {
-    flex: 1 1 auto;
-    display: inline-block;
-  }
-
-  .check {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: var(--cs-font-size-smaller);
-    visibility: hidden;
-    width: 2em;
-  }
-
-  :host(:state(selected)) .check {
-    visibility: visible;
-  }
-
-  .start,
-  .end {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-  }
-
-  /* These are !important because a document-level universal margin reset would otherwise beat them:
-     a slotted element belongs to the outer tree. See callout.styles.ts for the full note. */
-  .start::slotted(*) {
-    margin-inline-end: 0.5em !important;
-  }
-
-  .end::slotted(*) {
-    margin-inline-start: 0.5em !important;
-  }
-
-  @media (forced-colors: active) {
-    :host(:hover:not([aria-disabled='true'])) {
-      outline: dashed 1px SelectedItem;
-      outline-offset: -1px;
-    }
-  }
-`;
-
-export {
-  option_styles_default
-};

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

@@ -1,166 +0,0 @@
-/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  i
-} from "./chunk.WH4RAXRT.js";
-
-// src/components/toast-item/toast-item.styles.ts
-var toast_item_styles_default = i`
-  :host {
-    --accent-width: 4px;
-    --show-duration: var(--cs-transition-normal);
-    --hide-duration: var(--cs-transition-normal);
-    --accent-color: var(--cs-color-fill-loud);
-
-    display: block;
-    pointer-events: auto;
-  }
-
-  /* Sizes */
-  :host([size='xs']) {
-    --padding: var(--cs-space-xs);
-  }
-  :host([size='s']) {
-    --padding: var(--cs-space-s);
-  }
-  :host([size='m']) {
-    --padding: var(--cs-space-m);
-  }
-  :host([size='l']) {
-    --padding: var(--cs-space-l);
-  }
-  :host([size='xl']) {
-    --padding: var(--cs-space-xl);
-  }
-
-  .toast-item {
-    display: flex;
-    align-items: stretch;
-    background: var(--cs-color-surface-raised);
-    border: var(--cs-border-width-s) solid var(--cs-color-surface-border);
-    border-radius: var(--cs-border-radius-m);
-    box-shadow: var(--cs-shadow-l);
-    overflow: hidden;
-  }
-
-  /* Animations */
-  .toast-item.show {
-    animation: toast-show var(--show-duration) var(--cs-transition-easing) forwards;
-  }
-
-  .toast-item.hide {
-    animation: toast-hide var(--hide-duration) var(--cs-transition-easing) forwards;
-  }
-
-  @keyframes toast-show {
-    from {
-      opacity: 0;
-      translate: 0 -0.5rem;
-    }
-    to {
-      opacity: 1;
-      translate: 0;
-    }
-  }
-
-  @keyframes toast-hide {
-    from {
-      opacity: 1;
-      translate: 0;
-    }
-    to {
-      opacity: 0;
-      translate: 0 -0.5rem;
-    }
-  }
-
-  /* Accent line */
-  .accent {
-    flex: 0 0 auto;
-    width: var(--accent-width);
-    background: var(--accent-color);
-  }
-
-  /* Icon - only show if slot has content */
-  .icon {
-    display: flex;
-    align-items: center;
-    padding: var(--padding, var(--cs-space-m));
-    padding-inline-end: 0;
-    color: var(--accent-color);
-    font-size: 1.25em;
-  }
-
-  .toast-item:not(.toast-item--has-icon) .icon {
-    display: none;
-  }
-
-  /* Content */
-  .content {
-    flex: 1 1 auto;
-    align-self: center;
-    min-width: 0;
-    padding: var(--padding, var(--cs-space-m));
-    color: var(--cs-color-text-normal);
-  }
-
-  /* Close button */
-  .close-button {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    align-self: stretch;
-    padding-inline: var(--padding, var(--cs-space-m));
-    background: transparent;
-    border: none;
-    border-start-end-radius: var(--border-radius);
-    border-end-end-radius: var(--border-radius);
-    color: var(--cs-color-neutral-on-quiet);
-    font-size: inherit;
-    cursor: pointer;
-    transition: background-color var(--cs-transition-fast);
-
-    @media (hover: hover) {
-      &:hover {
-        color: color-mix(in oklab, currentColor, var(--cs-color-mix-hover));
-      }
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    &:focus-visible {
-      outline: var(--cs-focus-ring);
-      outline-offset: calc(var(--cs-focus-ring-width) * -1);
-    }
-  }
-
-  /* Progress ring styling */
-  cs-progress-ring {
-    --size: var(--cs-form-control-height);
-    --track-width: 0.125rem;
-    --indicator-width: 0.125rem;
-    --track-color: var(--cs-color-neutral-fill-quiet);
-    --indicator-color: var(--accent-color);
-    --indicator-transition-duration: 50ms;
-  }
-
-  /* Hide progress ring indicator when no duration */
-  .toast-item:not(.toast-item--has-duration) cs-progress-ring {
-    --track-color: transparent;
-    --indicator-color: transparent;
-  }
-
-  /* Reduced motion */
-  @media (prefers-reduced-motion: reduce) {
-    .toast-item.show,
-    .toast-item.hide {
-      animation: none;
-    }
-  }
-`;
-
-export {
-  toast_item_styles_default
-};