@cruglobal/cornerstone-components 0.1.1 → 0.1.3

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

@@ -1,232 +0,0 @@
-/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  CsAccordionItemCollapsedEvent
-} from "./chunk.37J3BYPZ.js";
-import {
-  CsAccordionItemExpandedEvent
-} from "./chunk.XJXTWHCQ.js";
-import {
-  CsAccordionItemTriggerEvent
-} from "./chunk.CADZQIS3.js";
-import {
-  waitForEvent
-} from "./chunk.DIXTQBKP.js";
-import {
-  animate,
-  parseDuration
-} from "./chunk.AGC46MZE.js";
-import {
-  watch
-} from "./chunk.P4DNU2MI.js";
-import {
-  CornerstoneElement,
-  customElement
-} from "./chunk.LIUE7EB7.js";
-import {
-  LocalizeController
-} from "./chunk.P4N57CDG.js";
-import {
-  accordion_item_styles_default
-} from "./chunk.WAU2VK45.js";
-import {
-  __decorateClass
-} from "./chunk.2VAPLWBF.js";
-
-// src/components/accordion-item/accordion-item.ts
-import { html } from "lit";
-import { property, query, state } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-var CsAccordionItem = class extends CornerstoneElement {
-  constructor() {
-    super(...arguments);
-    this.animationGeneration = 0;
-    this.localize = new LocalizeController(this);
-    this.isAnimating = false;
-    this.label = "";
-    this.expanded = false;
-    this.disabled = false;
-    this.headingLevel = "3";
-    this.isTabbable = true;
-    this.iconPlacement = "end";
-    this.appearance = "outlined";
-  }
-  firstUpdated(changedProperties) {
-    super.firstUpdated(changedProperties);
-    this.body.style.height = this.expanded ? "auto" : "0";
-  }
-  updated() {
-    this.customStates.set("animating", this.isAnimating);
-  }
-  handleTriggerClick() {
-    if (this.disabled) {
-      return;
-    }
-    this.dispatchEvent(new CsAccordionItemTriggerEvent({ item: this }));
-  }
-  handleTriggerKeyDown(event) {
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      this.handleTriggerClick();
-    }
-  }
-  async handleExpandedChange() {
-    this.animationGeneration++;
-    const generation = this.animationGeneration;
-    if (this.expanded) {
-      this.isAnimating = true;
-      const duration = parseDuration(getComputedStyle(this.body).getPropertyValue("--show-duration") || "200ms");
-      const easing = getComputedStyle(this.body).getPropertyValue("--easing") || "ease";
-      await animate(
-        this.body,
-        [
-          { height: "0", opacity: "0" },
-          { height: `${this.body.scrollHeight}px`, opacity: "1" }
-        ],
-        { duration, easing }
-      );
-      if (this.animationGeneration !== generation) {
-        return;
-      }
-      this.body.style.height = "auto";
-      this.isAnimating = false;
-      this.dispatchEvent(new CsAccordionItemExpandedEvent());
-    } else {
-      this.isAnimating = true;
-      const duration = parseDuration(getComputedStyle(this.body).getPropertyValue("--hide-duration") || "200ms");
-      const easing = getComputedStyle(this.body).getPropertyValue("--easing") || "ease";
-      await animate(
-        this.body,
-        [
-          { height: `${this.body.scrollHeight}px`, opacity: "1" },
-          { height: "0", opacity: "0" }
-        ],
-        { duration, easing }
-      );
-      if (this.animationGeneration !== generation) {
-        return;
-      }
-      this.body.style.height = "0";
-      this.isAnimating = false;
-      this.dispatchEvent(new CsAccordionItemCollapsedEvent());
-    }
-  }
-  /** Expands the accordion item with animation. */
-  async expand() {
-    if (this.expanded || this.disabled) {
-      return;
-    }
-    this.expanded = true;
-    return waitForEvent(this, "cs-accordion-item-expanded");
-  }
-  /** Collapses the accordion item with animation. */
-  async collapse() {
-    if (!this.expanded || this.disabled) {
-      return;
-    }
-    this.expanded = false;
-    return waitForEvent(this, "cs-accordion-item-collapsed");
-  }
-  /** Toggles the accordion item's expanded state. */
-  async toggle() {
-    return this.expanded ? this.collapse() : this.expand();
-  }
-  /** Focuses the accordion item's trigger button. */
-  focus(options) {
-    this.triggerButton?.focus(options);
-  }
-  renderHeadingWrapper(content) {
-    const level = parseInt(this.headingLevel, 10);
-    switch (level >= 1 && level <= 6 ? level : 3) {
-      case 1:
-        return html`<h1 part="heading">${content}</h1>`;
-      case 2:
-        return html`<h2 part="heading">${content}</h2>`;
-      case 4:
-        return html`<h4 part="heading">${content}</h4>`;
-      case 5:
-        return html`<h5 part="heading">${content}</h5>`;
-      case 6:
-        return html`<h6 part="heading">${content}</h6>`;
-      default:
-        return html`<h3 part="heading">${content}</h3>`;
-    }
-  }
-  render() {
-    const isRtl = !this.hasUpdated ? this.dir === "rtl" : this.localize.dir() === "rtl";
-    const button = html`
-      <button
-        part="button"
-        type="button"
-        id="trigger"
-        aria-expanded=${this.expanded ? "true" : "false"}
-        aria-controls="panel"
-        aria-disabled=${this.disabled ? "true" : "false"}
-        tabindex=${this.disabled || !this.isTabbable ? "-1" : "0"}
-        @click=${this.handleTriggerClick}
-        @keydown=${this.handleTriggerKeyDown}
-      >
-        <slot name="label" part="label">${this.label}</slot>
-        <span part="icon">
-          <slot name="icon">
-            <cs-icon library="system" name=${isRtl ? "keyboard_arrow_left" : "keyboard_arrow_right"}></cs-icon>
-          </slot>
-        </span>
-      </button>
-    `;
-    return html`
-      <div part="accordion-item">
-        ${this.headingLevel === "none" ? button : this.renderHeadingWrapper(button)}
-        <div
-          part="panel"
-          id="panel"
-          class=${classMap({ body: true, animating: this.isAnimating })}
-          role="region"
-          aria-labelledby="trigger"
-        >
-          <slot part="content" class="content"></slot>
-        </div>
-      </div>
-    `;
-  }
-};
-CsAccordionItem.css = accordion_item_styles_default;
-__decorateClass([
-  query(".body")
-], CsAccordionItem.prototype, "body", 2);
-__decorateClass([
-  query('[part~="button"]')
-], CsAccordionItem.prototype, "triggerButton", 2);
-__decorateClass([
-  state()
-], CsAccordionItem.prototype, "isAnimating", 2);
-__decorateClass([
-  property()
-], CsAccordionItem.prototype, "label", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], CsAccordionItem.prototype, "expanded", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], CsAccordionItem.prototype, "disabled", 2);
-__decorateClass([
-  property({ attribute: "heading-level", reflect: true })
-], CsAccordionItem.prototype, "headingLevel", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: false })
-], CsAccordionItem.prototype, "isTabbable", 2);
-__decorateClass([
-  property({ attribute: "icon-placement", reflect: true })
-], CsAccordionItem.prototype, "iconPlacement", 2);
-__decorateClass([
-  property({ reflect: true })
-], CsAccordionItem.prototype, "appearance", 2);
-__decorateClass([
-  watch("expanded", { waitUntilFirstUpdate: true })
-], CsAccordionItem.prototype, "handleExpandedChange", 1);
-CsAccordionItem = __decorateClass([
-  customElement("cs-accordion-item")
-], CsAccordionItem);
-
-export {
-  CsAccordionItem
-};

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

@@ -1,90 +0,0 @@
-/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  CornerstoneElement,
-  customElement
-} from "./chunk.LIUE7EB7.js";
-import {
-  LocalizeController
-} from "./chunk.P4N57CDG.js";
-import {
-  __decorateClass
-} from "./chunk.2VAPLWBF.js";
-
-// src/components/format-date/format-date.ts
-import { html } from "lit";
-import { property } from "lit/decorators.js";
-var CsFormatDate = class extends CornerstoneElement {
-  constructor() {
-    super(...arguments);
-    this.localize = new LocalizeController(this);
-    this.date = /* @__PURE__ */ new Date();
-    this.hourFormat = "auto";
-  }
-  static get styles() {
-    return [];
-  }
-  render() {
-    const date = new Date(this.date);
-    const hour12 = this.hourFormat === "auto" ? void 0 : this.hourFormat === "12";
-    if (isNaN(date.getMilliseconds())) {
-      return void 0;
-    }
-    const displayDate = this.localize.date(date, {
-      weekday: this.weekday,
-      era: this.era,
-      year: this.year,
-      month: this.month,
-      day: this.day,
-      hour: this.hour,
-      minute: this.minute,
-      second: this.second,
-      timeZoneName: this.timeZoneName,
-      timeZone: this.timeZone,
-      hour12
-    });
-    return html`<time datetime=${date.toISOString()}>${displayDate}</time>`;
-  }
-};
-__decorateClass([
-  property()
-], CsFormatDate.prototype, "date", 2);
-__decorateClass([
-  property()
-], CsFormatDate.prototype, "weekday", 2);
-__decorateClass([
-  property()
-], CsFormatDate.prototype, "era", 2);
-__decorateClass([
-  property()
-], CsFormatDate.prototype, "year", 2);
-__decorateClass([
-  property()
-], CsFormatDate.prototype, "month", 2);
-__decorateClass([
-  property()
-], CsFormatDate.prototype, "day", 2);
-__decorateClass([
-  property()
-], CsFormatDate.prototype, "hour", 2);
-__decorateClass([
-  property()
-], CsFormatDate.prototype, "minute", 2);
-__decorateClass([
-  property()
-], CsFormatDate.prototype, "second", 2);
-__decorateClass([
-  property({ attribute: "time-zone-name" })
-], CsFormatDate.prototype, "timeZoneName", 2);
-__decorateClass([
-  property({ attribute: "time-zone" })
-], CsFormatDate.prototype, "timeZone", 2);
-__decorateClass([
-  property({ attribute: "hour-format" })
-], CsFormatDate.prototype, "hourFormat", 2);
-CsFormatDate = __decorateClass([
-  customElement("cs-format-date")
-], CsFormatDate);
-
-export {
-  CsFormatDate
-};

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

@@ -1,98 +0,0 @@
-/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
-
-// src/components/popover/popover.styles.ts
-import { css } from "lit";
-var popover_styles_default = css`
-  :host {
-    --arrow-size: 0.375rem;
-    --max-width: 25rem;
-    --show-duration: var(--cs-transition-fast);
-    --hide-duration: var(--cs-transition-fast);
-
-    display: contents;
-
-    /** Defaults for inherited CSS properties */
-    font-size: var(--cs-font-size-m);
-    line-height: var(--cs-line-height-normal);
-    text-align: start;
-    white-space: normal;
-  }
-
-  /* The native dialog element */
-  .dialog {
-    display: none;
-    position: fixed;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    border: none;
-    background: transparent;
-    overflow: visible;
-    pointer-events: none;
-
-    &:focus {
-      outline: none;
-    }
-
-    &[open] {
-      display: block;
-    }
-  }
-
-  /* The <cs-popup> element */
-  .popover {
-    --arrow-size: inherit;
-    --popup-border-width: var(--cs-panel-border-width);
-    --show-duration: inherit;
-    --hide-duration: inherit;
-
-    pointer-events: auto;
-
-    /* Inset box-shadow, not a border: Safari seams a clip-path edge that runs along a border. */
-    &::part(arrow) {
-      background-color: var(--cs-color-surface-default);
-      border: none;
-      box-shadow: inset calc(-1 * var(--cs-panel-border-width)) calc(-1 * var(--cs-panel-border-width)) 0 0
-        var(--cs-color-surface-border);
-    }
-  }
-
-  .popover[placement^='top']::part(popup) {
-    transform-origin: bottom;
-  }
-
-  .popover[placement^='bottom']::part(popup) {
-    transform-origin: top;
-  }
-
-  .popover[placement^='left']::part(popup) {
-    transform-origin: right;
-  }
-
-  .popover[placement^='right']::part(popup) {
-    transform-origin: left;
-  }
-
-  /* Body */
-  .body {
-    display: flex;
-    flex-direction: column;
-    width: auto;
-    max-width: min(var(--max-width), 100vw);
-    padding: var(--cs-space-l);
-    background-color: var(--cs-color-surface-default);
-    border: var(--cs-panel-border-width) solid var(--cs-color-surface-border);
-    border-radius: var(--cs-panel-border-radius);
-    border-style: var(--cs-panel-border-style);
-    box-shadow: var(--cs-shadow-l);
-    color: var(--cs-color-text-normal);
-    user-select: none;
-    -webkit-user-select: none;
-  }
-`;
-
-export {
-  popover_styles_default
-};

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

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

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

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

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

@@ -1,16 +0,0 @@
-/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
-
-// src/components/animation/animations.ts
-import * as animations from "@shoelace-style/animations";
-function getAnimationNames() {
-  return Object.entries(animations).filter(([name]) => name !== "easings").map(([name]) => name);
-}
-function getEasingNames() {
-  return Object.entries(animations.easings).map(([name]) => name);
-}
-
-export {
-  animations,
-  getAnimationNames,
-  getEasingNames
-};

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

@@ -1,209 +0,0 @@
-/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
-
-// src/components/dialog/dialog.styles.ts
-import { css } from "lit";
-var dialog_styles_default = css`
-  :host {
-    --width: 31rem;
-    --spacing: var(--cs-space-l);
-    --backdrop-filter: none;
-    --show-duration: var(--cs-transition-normal);
-    --hide-duration: var(--cs-transition-normal);
-
-    display: none;
-  }
-
-  /*
-   * Out of flow, so opening the dialog cannot move anything around it. The visible panel is a native dialog element
-   * opened with showModal(), which lives in the top layer and is positioned against the viewport, so the host's own
-   * box paints nothing — but while it was in flow it was still a flex/grid item wherever the host sat, and opening
-   * the dialog added a gap that nudged its siblings.
-   *
-   * The width stays full-viewport rather than zero. RenderedWatcher spots third-party CSS hiding the dialog through
-   * ResizeObserver size changes, and the panel's max-width resolves against this box, so collapsing it would flatten
-   * both of those signals and the modal would never resume. Height is zero because nothing here paints.
-   */
-  :host([open]) {
-    display: block;
-    position: fixed;
-    inset-inline: 0;
-    height: 0;
-  }
-
-  .dialog {
-    display: flex;
-    flex-direction: column;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    width: var(--width);
-    max-width: calc(100% - var(--cs-space-2xl));
-    max-height: calc(100% - var(--cs-space-2xl));
-    color: inherit;
-    background-color: var(--cs-color-surface-raised);
-    border-radius: var(--cs-panel-border-radius);
-    border: none;
-    box-shadow: var(--cs-shadow-l);
-    padding: 0;
-    margin: auto;
-
-    &.show {
-      animation: show-dialog var(--show-duration) ease;
-
-      &::backdrop {
-        animation: show-backdrop var(--show-duration, 200ms) ease;
-      }
-    }
-
-    &.hide {
-      animation: show-dialog var(--hide-duration) ease reverse;
-
-      &::backdrop {
-        animation: show-backdrop var(--hide-duration, 200ms) ease reverse;
-      }
-    }
-
-    &.pulse {
-      animation: pulse 250ms ease;
-    }
-  }
-
-  .dialog:focus {
-    outline: none;
-  }
-
-  /* Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone) */
-  @media screen and (max-width: 420px) {
-    .dialog {
-      max-height: 80vh;
-    }
-  }
-
-  .open {
-    display: flex;
-    opacity: 1;
-  }
-
-  .header {
-    flex: 0 0 auto;
-    display: flex;
-    flex-wrap: nowrap;
-
-    padding-inline-start: var(--spacing);
-    padding-block-end: 0;
-
-    /* Subtract the close button's padding so that the X is visually aligned with the edges of the dialog content */
-    padding-inline-end: calc(var(--spacing) - var(--cs-form-control-padding-block));
-    padding-block-start: calc(var(--spacing) - var(--cs-form-control-padding-block));
-  }
-
-  .title {
-    align-self: center;
-    flex: 1 1 auto;
-    font-family: inherit;
-    font-size: var(--cs-font-size-l);
-    font-weight: var(--cs-font-weight-heading);
-    line-height: var(--cs-line-height-condensed);
-    margin: 0;
-  }
-
-  .header-actions {
-    align-self: start;
-    display: flex;
-    flex-shrink: 0;
-    flex-wrap: wrap;
-    justify-content: end;
-    gap: var(--cs-space-2xs);
-    padding-inline-start: var(--spacing);
-  }
-
-  .header-actions cs-button,
-  .header-actions ::slotted(cs-button) {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-  }
-
-  .body {
-    flex: 1 1 auto;
-    display: block;
-    padding: var(--spacing);
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-
-    &:focus {
-      outline: none;
-    }
-
-    &:focus-visible {
-      outline: var(--cs-focus-ring);
-      outline-offset: var(--cs-focus-ring-offset);
-    }
-  }
-
-  .footer {
-    flex: 0 0 auto;
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--cs-space-xs);
-    justify-content: end;
-    padding: var(--spacing);
-    padding-block-start: 0;
-  }
-
-  .footer ::slotted(cs-button:not(:first-of-type)) {
-    margin-inline-start: var(--cs-space-xs);
-  }
-
-  .dialog::backdrop {
-    /*
-      NOTE: the ::backdrop element doesn't inherit properly in Safari yet, but it will in 17.4! At that time, we can
-      remove the fallback values here.
-    */
-    background-color: var(--cs-color-overlay-modal, rgb(0 0 0 / 0.25));
-    backdrop-filter: var(--backdrop-filter);
-  }
-
-  @keyframes pulse {
-    0% {
-      scale: 1;
-    }
-    50% {
-      scale: 1.02;
-    }
-    100% {
-      scale: 1;
-    }
-  }
-
-  @keyframes show-dialog {
-    from {
-      opacity: 0;
-      scale: 0.8;
-    }
-    to {
-      opacity: 1;
-      scale: 1;
-    }
-  }
-
-  @keyframes show-backdrop {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  @media (forced-colors: active) {
-    .dialog {
-      border: solid 1px white;
-    }
-  }
-`;
-
-export {
-  dialog_styles_default
-};

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

@@ -1,25 +0,0 @@
-/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  CsCopyButton
-} from "./chunk.Y6WO536B.js";
-
-// src/react/copy-button/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "cs-copy-button";
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: CsCopyButton,
-  react: React,
-  events: {
-    onCsCopy: "cs-copy",
-    onCsError: "cs-error"
-  },
-  displayName: "CsCopyButton"
-});
-var copy_button_default = reactWrapper;
-
-export {
-  copy_button_default
-};