@cruglobal/cornerstone-components 0.6.1 → 0.6.2

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

@@ -0,0 +1,225 @@
+/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  toast_item_styles_default
+} from "./chunk.IPW7QIUW.js";
+import {
+  CsShowEvent
+} from "./chunk.3ZOOG3MW.js";
+import {
+  CsHideEvent
+} from "./chunk.4UXBEDUP.js";
+import {
+  CsAfterHideEvent
+} from "./chunk.NTVMNT4T.js";
+import {
+  CsAfterShowEvent
+} from "./chunk.UKTDLFCP.js";
+import {
+  HasSlotController
+} from "./chunk.25L55TBI.js";
+import {
+  size_styles_default
+} from "./chunk.CXKOXFXU.js";
+import {
+  variants_styles_default
+} from "./chunk.IANKKS7L.js";
+import {
+  animateWithClass
+} from "./chunk.HC2QZ77X.js";
+import {
+  CornerstoneElement,
+  customElement
+} from "./chunk.4H5TQFVZ.js";
+import {
+  LocalizeController
+} from "./chunk.TFKBFNPO.js";
+import {
+  __decorateClass
+} from "./chunk.HBAVB7LX.js";
+
+// src/components/toast-item/toast-item.ts
+import { html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var CsToastItem = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "icon");
+    this.localize = new LocalizeController(this);
+    this.animationFrame = null;
+    this.startTime = null;
+    this.isHovering = false;
+    this.isFocused = false;
+    this.timeLeft = 100;
+    this.variant = "neutral";
+    this.size = "m";
+    this.duration = 5e3;
+    this.ssrIcon = false;
+    this.tick = () => {
+      if (!this.startTime) {
+        return;
+      }
+      const elapsed = performance.now() - this.startTime;
+      const progress = Math.min(elapsed / this.duration, 1);
+      this.timeLeft = 100 * (1 - progress);
+      if (progress < 1) {
+        this.animationFrame = requestAnimationFrame(this.tick);
+      } else {
+        this.hide();
+      }
+    };
+    this.handlePointerEnter = (event) => {
+      if (event.pointerType === "mouse" || event.pointerType === "pen") {
+        this.isHovering = true;
+        this.pauseTimer();
+      }
+    };
+    this.handlePointerLeave = () => {
+      if (this.isHovering) {
+        this.isHovering = false;
+        this.resumeTimer();
+      }
+    };
+    this.handleFocusIn = () => {
+      this.isFocused = true;
+      this.pauseTimer();
+    };
+    this.handleFocusOut = () => {
+      this.isFocused = false;
+      this.resumeTimer();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("pointerenter", this.handlePointerEnter);
+    this.addEventListener("pointerleave", this.handlePointerLeave);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopTimer();
+    this.removeEventListener("pointerenter", this.handlePointerEnter);
+    this.removeEventListener("pointerleave", this.handlePointerLeave);
+  }
+  /** @internal Starts the toast item's timer and shows it. Called by the parent toast component. */
+  async startTimer() {
+    const showEvent = new CsShowEvent();
+    this.dispatchEvent(showEvent);
+    if (showEvent.defaultPrevented) {
+      return;
+    }
+    await this.updateComplete;
+    await animateWithClass(this.toastItemElement, "show");
+    this.dispatchEvent(new CsAfterShowEvent());
+    if (this.duration > 0 && Number.isFinite(this.duration)) {
+      this.startTime = performance.now();
+      this.timeLeft = 100;
+      this.tick();
+    }
+  }
+  /** @internal Stops the toast item's timer. */
+  stopTimer() {
+    if (this.animationFrame !== null) {
+      cancelAnimationFrame(this.animationFrame);
+      this.animationFrame = null;
+    }
+  }
+  /** Hides the toast item with animation and removes it from the DOM. */
+  async hide() {
+    this.stopTimer();
+    const hideEvent = new CsHideEvent();
+    this.dispatchEvent(hideEvent);
+    if (hideEvent.defaultPrevented) {
+      return;
+    }
+    await animateWithClass(this.toastItemElement, "hide");
+    this.dispatchEvent(new CsAfterHideEvent());
+    this.remove();
+  }
+  handleCloseClick() {
+    this.hide();
+  }
+  pauseTimer() {
+    this.stopTimer();
+    this.timeLeft = 100;
+  }
+  resumeTimer() {
+    if (!this.isHovering && !this.isFocused && this.duration > 0) {
+      this.startTime = performance.now();
+      this.tick();
+    }
+  }
+  render() {
+    const hasIcon = this.hasSlotController.test("icon", "ssrIcon");
+    const hasDuration = this.duration > 0;
+    return html`
+      <div
+        part="toast-item"
+        class=${classMap({
+      "toast-item": true,
+      "toast-item--has-icon": hasIcon,
+      "toast-item--has-duration": hasDuration
+    })}
+      >
+        <div part="accent" class="accent"></div>
+
+        <div part="icon" class="icon">
+          <slot name="icon"></slot>
+        </div>
+
+        <div part="content" class="content">
+          <slot></slot>
+        </div>
+
+        <button
+          part="close-button"
+          class="close-button"
+          type="button"
+          aria-label=${this.localize.term("close")}
+          @click=${this.handleCloseClick}
+          @focusin=${this.handleFocusIn}
+          @focusout=${this.handleFocusOut}
+        >
+          <cs-progress-ring
+            part="progress-ring"
+            exportparts="
+              progress-ring:progress-ring__progress-ring,
+              label:progress-ring__label,
+              track:progress-ring__track,
+              indicator:progress-ring__indicator
+            "
+            value=${this.timeLeft}
+            aria-hidden="true"
+          >
+            <cs-icon part="close-icon" exportparts="svg:close-icon__svg" name="close" library="system"></cs-icon>
+          </cs-progress-ring>
+        </button>
+      </div>
+    `;
+  }
+};
+CsToastItem.css = [toast_item_styles_default, variants_styles_default, size_styles_default];
+__decorateClass([
+  query(".toast-item")
+], CsToastItem.prototype, "toastItemElement", 2);
+__decorateClass([
+  state()
+], CsToastItem.prototype, "timeLeft", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsToastItem.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsToastItem.prototype, "size", 2);
+__decorateClass([
+  property({ type: Number })
+], CsToastItem.prototype, "duration", 2);
+__decorateClass([
+  property({ attribute: "ssr-icon", type: Boolean })
+], CsToastItem.prototype, "ssrIcon", 2);
+CsToastItem = __decorateClass([
+  customElement("cs-toast-item")
+], CsToastItem);
+
+export {
+  CsToastItem
+};

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

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

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

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

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

@@ -0,0 +1,171 @@
+/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/components/textarea/textarea.styles.ts
+import { css } from "lit";
+var textarea_styles_default = css`
+  :host {
+    border-width: 0;
+  }
+
+  .textarea {
+    display: grid;
+    align-items: center;
+    margin: 0;
+    border: none;
+    outline: none;
+    cursor: inherit;
+    font: inherit;
+    background-color: var(--cs-form-control-background-color);
+    border-color: var(--cs-form-control-border-color);
+    border-radius: var(--cs-form-control-border-radius);
+    border-style: var(--cs-form-control-border-style);
+    border-width: var(--cs-form-control-border-width);
+    -webkit-appearance: none;
+    outline: var(--cs-focus-ring-style) var(--cs-focus-ring-width) transparent;
+    outline-offset: var(--cs-focus-ring-offset);
+
+    &:focus-within {
+      outline-color: var(--cs-color-focus);
+    }
+
+    /* Style disabled textareas */
+    &:has(:disabled) {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  /* Appearance modifiers */
+  :host([appearance='outlined']) .textarea {
+    background-color: var(--cs-form-control-background-color);
+    border-color: var(--cs-form-control-border-color);
+  }
+
+  :host([appearance='filled']) .textarea {
+    background-color: var(--cs-color-neutral-fill-quiet);
+    border-color: var(--cs-color-neutral-fill-quiet);
+  }
+
+  :host([appearance='filled-outlined']) .textarea {
+    background-color: var(--cs-color-neutral-fill-quiet);
+    border-color: var(--cs-form-control-border-color);
+  }
+
+  textarea {
+    display: block;
+    width: 100%;
+    border: none;
+    background: transparent;
+    font: inherit;
+    color: inherit;
+    cursor: inherit;
+    scroll-padding-block: var(--cs-form-control-padding-block);
+    padding: calc(var(--cs-form-control-padding-block) - ((1lh - 1em) / 2)) var(--cs-form-control-padding-inline); /* accounts for the larger line height of textarea content */
+    min-height: calc(var(--cs-form-control-height) - var(--border-width) * 2);
+    box-shadow: none;
+    margin: 0;
+
+    &::placeholder {
+      color: var(--cs-form-control-placeholder-color);
+      user-select: none;
+      -webkit-user-select: none;
+    }
+
+    &:autofill {
+      &,
+      &:hover,
+      &:focus,
+      &:active {
+        box-shadow: none;
+        caret-color: var(--cs-form-control-value-color);
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  /* Shared textarea and size-adjuster positioning */
+  .control,
+  .size-adjuster {
+    grid-area: 1 / 1 / 2 / 2;
+  }
+
+  .size-adjuster {
+    visibility: hidden;
+    pointer-events: none;
+    opacity: 0;
+    padding: 0;
+  }
+
+  textarea::-webkit-search-decoration,
+  textarea::-webkit-search-cancel-button,
+  textarea::-webkit-search-results-button,
+  textarea::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+  }
+
+  /*
+   * Resize types
+   */
+
+  :host([resize='none']) textarea {
+    resize: none;
+  }
+
+  textarea,
+  :host([resize='vertical']) textarea {
+    resize: vertical;
+  }
+
+  :host([resize='horizontal']) textarea {
+    resize: horizontal;
+  }
+
+  :host([resize='both']) textarea {
+    resize: both;
+  }
+
+  :host([resize='auto']) textarea {
+    height: auto;
+    resize: none;
+    overflow-y: hidden;
+  }
+
+  /*
+   * Footer (hint + character count)
+   */
+
+  /*
+   * This element carries the hint part, so the shared form control styles apply to it. Those styles set display:block
+   * and hide the element when it has no hint, both of which have to be undone when a character count is present.
+   */
+  .footer.has-slotted,
+  .footer.has-count {
+    display: flex;
+    align-items: baseline;
+    gap: 1em;
+  }
+
+  /* Slots default to display:contents, which would leave the hint unable to shrink below its content */
+  .footer.has-count .hint {
+    display: block;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .count {
+    flex: 0 0 auto;
+    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);
+    margin-inline-start: auto;
+  }
+`;
+
+export {
+  textarea_styles_default
+};

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

@@ -0,0 +1,283 @@
+/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  dropdown_item_styles_default
+} from "./chunk.MJEPIX6K.js";
+import {
+  HasSlotController
+} from "./chunk.25L55TBI.js";
+import {
+  animateWithClass
+} from "./chunk.HC2QZ77X.js";
+import {
+  CornerstoneElement,
+  customElement
+} from "./chunk.4H5TQFVZ.js";
+import {
+  __decorateClass
+} from "./chunk.HBAVB7LX.js";
+
+// src/components/dropdown-item/dropdown-item.ts
+import { html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+var CsDropdownItem = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "[default]", "start", "end");
+    this.active = false;
+    this.variant = "neutral";
+    this.size = "m";
+    this.checkboxAdjacent = false;
+    this.submenuAdjacent = false;
+    this.type = "normal";
+    this.checked = false;
+    this.disabled = false;
+    this.submenuOpen = false;
+    this.hasSubmenu = false;
+    this.handleSlotChange = () => {
+      this.hasSubmenu = this.hasSlotController.test("submenu");
+      this.updateHasSubmenuState();
+      if (this.hasSubmenu) {
+        this.setAttribute("aria-haspopup", "menu");
+        this.setAttribute("aria-expanded", this.submenuOpen ? "true" : "false");
+      } else {
+        this.removeAttribute("aria-haspopup");
+        this.removeAttribute("aria-expanded");
+      }
+    };
+    /** Prevents click events from firing on the host when the item is disabled (e.g. programmatic .click() calls). */
+    this.handleHostClick = (event) => {
+      if (this.disabled) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+    };
+    /** Prevents click events from firing when the item is disabled. */
+    this.handleClick = (event) => {
+      if (this.disabled) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener?.("click", this.handleHostClick);
+    this.addEventListener?.("mouseenter", this.handleMouseEnter.bind(this));
+    this.shadowRoot?.addEventListener?.("click", this.handleClick, { capture: true });
+    this.shadowRoot?.addEventListener?.("slotchange", this.handleSlotChange);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.closeSubmenu();
+    this.removeEventListener?.("click", this.handleHostClick);
+    this.removeEventListener?.("mouseenter", this.handleMouseEnter);
+    this.shadowRoot?.removeEventListener?.("click", this.handleClick, { capture: true });
+    this.shadowRoot?.removeEventListener?.("slotchange", this.handleSlotChange);
+  }
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    this.setAttribute("tabindex", "-1");
+    this.hasSubmenu = this.hasSlotController.test("submenu");
+    this.updateHasSubmenuState();
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("active")) {
+      this.setAttribute("tabindex", this.active ? "0" : "-1");
+      this.customStates.set("active", this.active);
+    }
+    if (changedProperties.has("checked")) {
+      if (this.type === "checkbox") {
+        this.setAttribute("aria-checked", this.checked ? "true" : "false");
+      } else {
+        this.removeAttribute("aria-checked");
+      }
+      this.customStates.set("checked", this.checked);
+    }
+    if (changedProperties.has("disabled")) {
+      this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+      this.customStates.set("disabled", this.disabled);
+    }
+    if (changedProperties.has("type")) {
+      if (this.type === "checkbox") {
+        this.setAttribute("role", "menuitemcheckbox");
+        this.setAttribute("aria-checked", this.checked ? "true" : "false");
+      } else {
+        this.setAttribute("role", "menuitem");
+        this.removeAttribute("aria-checked");
+      }
+    }
+    if (changedProperties.has("submenuOpen")) {
+      this.customStates.set("submenu-open", this.submenuOpen);
+      if (this.submenuOpen) {
+        this.openSubmenu();
+      } else {
+        this.closeSubmenu();
+      }
+    }
+  }
+  /** Update the has-submenu custom state */
+  updateHasSubmenuState() {
+    this.customStates.set("has-submenu", this.hasSubmenu);
+  }
+  /** Opens the submenu. */
+  async openSubmenu() {
+    const submenu = this.submenuElement;
+    if (!this.hasSubmenu || !submenu || !this.isConnected) {
+      return;
+    }
+    this.notifyParentOfOpening();
+    submenu.showPopover?.();
+    submenu.hidden = false;
+    submenu.setAttribute("data-visible", "");
+    this.submenuOpen = true;
+    this.setAttribute("aria-expanded", "true");
+    await animateWithClass(submenu, "show");
+    setTimeout(() => {
+      const items = this.getSubmenuItems();
+      if (items.length > 0) {
+        items.forEach((item, index) => item.active = index === 0);
+        items[0].focus({ preventScroll: true });
+      }
+    }, 0);
+  }
+  /** Notifies the parent dropdown that this item is opening its submenu */
+  notifyParentOfOpening() {
+    const event = new CustomEvent("submenu-opening", {
+      bubbles: true,
+      composed: true,
+      detail: { item: this }
+    });
+    this.dispatchEvent(event);
+    const parent = this.parentElement;
+    if (parent) {
+      const siblings = [...parent.children].filter(
+        (el) => el !== this && el.localName === "cs-dropdown-item" && el.getAttribute("slot") === this.getAttribute("slot") && el.submenuOpen
+      );
+      siblings.forEach((sibling) => {
+        sibling.submenuOpen = false;
+      });
+    }
+  }
+  /** Closes the submenu. */
+  async closeSubmenu() {
+    const submenu = this.submenuElement;
+    if (!this.hasSubmenu || !submenu) {
+      return;
+    }
+    this.submenuOpen = false;
+    this.setAttribute("aria-expanded", "false");
+    if (!submenu.hidden) {
+      await animateWithClass(submenu, "hide");
+      if (submenu.isConnected) {
+        submenu.hidden = true;
+        submenu.removeAttribute("data-visible");
+        submenu.hidePopover?.();
+      }
+    }
+  }
+  /** Gets all dropdown items in the submenu. */
+  getSubmenuItems() {
+    return [...this.children].filter(
+      (el) => el.localName === "cs-dropdown-item" && el.getAttribute("slot") === "submenu" && !el.hasAttribute("disabled")
+    );
+  }
+  /** Handles mouse enter to open the submenu */
+  handleMouseEnter() {
+    if (this.hasSubmenu && !this.disabled) {
+      this.notifyParentOfOpening();
+      this.submenuOpen = true;
+    }
+  }
+  render() {
+    return html`
+      ${this.type === "checkbox" ? html`
+              <cs-icon
+                id="check"
+                part="checkmark"
+                exportparts="svg:checkmark__svg"
+                library="system"
+                name="check"
+              ></cs-icon>
+            ` : ""}
+
+      <span id="icon" part="icon">
+        <slot name="icon"></slot>
+      </span>
+
+      <span id="label" part="label">
+        <slot></slot>
+      </span>
+
+      <span id="details" part="details">
+        <slot name="details"></slot>
+      </span>
+
+      ${this.hasSubmenu ? html`
+              <cs-icon
+                id="submenu-indicator"
+                part="submenu-icon"
+                exportparts="svg:submenu-icon__svg"
+                library="system"
+                name="keyboard_arrow_right"
+              ></cs-icon>
+            ` : ""}
+      ${this.hasSubmenu ? html`
+              <div
+                id="submenu"
+                part="submenu"
+                popover="manual"
+                role="menu"
+                tabindex="-1"
+                aria-orientation="vertical"
+                hidden
+              >
+                <slot name="submenu"></slot>
+              </div>
+            ` : ""}
+    `;
+  }
+};
+CsDropdownItem.css = dropdown_item_styles_default;
+__decorateClass([
+  query("#submenu")
+], CsDropdownItem.prototype, "submenuElement", 2);
+__decorateClass([
+  property({ type: Boolean })
+], CsDropdownItem.prototype, "active", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsDropdownItem.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsDropdownItem.prototype, "size", 2);
+__decorateClass([
+  property({ attribute: "checkbox-adjacent", type: Boolean, reflect: true })
+], CsDropdownItem.prototype, "checkboxAdjacent", 2);
+__decorateClass([
+  property({ attribute: "submenu-adjacent", type: Boolean, reflect: true })
+], CsDropdownItem.prototype, "submenuAdjacent", 2);
+__decorateClass([
+  property()
+], CsDropdownItem.prototype, "value", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsDropdownItem.prototype, "type", 2);
+__decorateClass([
+  property({ type: Boolean })
+], CsDropdownItem.prototype, "checked", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CsDropdownItem.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CsDropdownItem.prototype, "submenuOpen", 2);
+__decorateClass([
+  state()
+], CsDropdownItem.prototype, "hasSubmenu", 2);
+CsDropdownItem = __decorateClass([
+  customElement("cs-dropdown-item")
+], CsDropdownItem);
+
+export {
+  CsDropdownItem
+};