@cruglobal/cornerstone-components 0.1.2 → 0.6.1

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

@@ -0,0 +1,283 @@
+/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  dropdown_item_styles_default
+} from "./chunk.X6Y65CPK.js";
+import {
+  HasSlotController
+} from "./chunk.XHYSA6KF.js";
+import {
+  animateWithClass
+} from "./chunk.I6DUCETP.js";
+import {
+  CornerstoneElement,
+  customElement
+} from "./chunk.UQMDB327.js";
+import {
+  __decorateClass
+} from "./chunk.LOD6ZXF2.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
+};

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

@@ -0,0 +1,24 @@
+/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsMutationObserver
+} from "./chunk.7WXD5FDQ.js";
+
+// src/react/mutation-observer/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cs-mutation-observer";
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CsMutationObserver,
+  react: React,
+  events: {
+    onCsMutation: "cs-mutation"
+  },
+  displayName: "CsMutationObserver"
+});
+var mutation_observer_default = reactWrapper;
+
+export {
+  mutation_observer_default
+};

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

@@ -0,0 +1,21 @@
+/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsButtonGroup
+} from "./chunk.EJFINAZV.js";
+
+// src/react/button-group/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "cs-button-group";
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CsButtonGroup,
+  react: React,
+  events: {},
+  displayName: "CsButtonGroup"
+});
+var button_group_default = reactWrapper;
+
+export {
+  button_group_default
+};

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

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

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

@@ -0,0 +1,21 @@
+/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsMarkdown
+} from "./chunk.J7R5X6WC.js";
+
+// src/react/markdown/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "cs-markdown";
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CsMarkdown,
+  react: React,
+  events: {},
+  displayName: "CsMarkdown"
+});
+var markdown_default = reactWrapper;
+
+export {
+  markdown_default
+};

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

@@ -0,0 +1,25 @@
+/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsIcon
+} from "./chunk.5YGOQ5YB.js";
+
+// src/react/icon/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cs-icon";
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CsIcon,
+  react: React,
+  events: {
+    onCsLoad: "cs-load",
+    onCsError: "cs-error"
+  },
+  displayName: "CsIcon"
+});
+var icon_default = reactWrapper;
+
+export {
+  icon_default
+};

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

@@ -0,0 +1,27 @@
+/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsToastItem
+} from "./chunk.BTF63KJS.js";
+
+// src/react/toast-item/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cs-toast-item";
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CsToastItem,
+  react: React,
+  events: {
+    onCsShow: "cs-show",
+    onCsAfterShow: "cs-after-show",
+    onCsHide: "cs-hide",
+    onCsAfterHide: "cs-after-hide"
+  },
+  displayName: "CsToastItem"
+});
+var toast_item_default = reactWrapper;
+
+export {
+  toast_item_default
+};

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

@@ -0,0 +1,101 @@
+/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/styles/component/variants.styles.ts
+import { css } from "lit";
+var variants_styles_default = css`
+  :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/unbundled/chunks/chunk.SKWC4OZK.js

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

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

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

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

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

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

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

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

@@ -0,0 +1,21 @@
+/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsFormatBytes
+} from "./chunk.DVDLMMGM.js";
+
+// src/react/format-bytes/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "cs-format-bytes";
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CsFormatBytes,
+  react: React,
+  events: {},
+  displayName: "CsFormatBytes"
+});
+var format_bytes_default = reactWrapper;
+
+export {
+  format_bytes_default
+};