@cruglobal/cornerstone-components 0.1.1 → 0.1.2

package/dist/bundled/chunks/chunk.76NFI77E.js

@@ -0,0 +1,114 @@
+/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  i
+} from "./chunk.WH4RAXRT.js";
+
+// src/components/toast/toast.styles.ts
+var toast_styles_default = i`
+  :host {
+    --gap: var(--cs-space-s);
+    --width: 28rem;
+    --reorder-duration: var(--cs-transition-normal);
+
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    width: var(--width);
+    /* --width is 28rem (448px), wider than a 390px phone viewport. Centered placements offset the host
+       by half its own width, so an unclamped host hangs off-screen. The 480px media query below also
+       covers this, but only once a viewport change has been laid out — this states the invariant
+       directly so it holds at every width. */
+    max-width: 100%;
+    height: 100dvh;
+    max-height: 100dvh;
+    margin: 0;
+    padding: var(--cs-space-m);
+    overflow-y: auto;
+    gap: var(--gap);
+    border: none;
+    background: transparent;
+    pointer-events: none;
+    scrollbar-width: thin;
+
+    /* Reset inset properties so placement changes work correctly */
+    inset-block-start: auto;
+    inset-block-end: auto;
+    inset-inline-start: auto;
+    inset-inline-end: auto;
+    translate: none;
+    align-content: normal;
+    justify-content: normal;
+  }
+
+  :host(:not(:popover-open)) {
+    display: none;
+  }
+
+  /* Placement positioning using logical properties for RTL support */
+  :host([placement='top-start']) {
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
+
+  :host([placement='top-center']) {
+    inset-block-start: 0;
+    inset-inline-start: 50%;
+    translate: -50% 0;
+  }
+
+  :host([placement='top-end']) {
+    inset-block-start: 0;
+    inset-inline-start: auto;
+    inset-inline-end: 0;
+  }
+
+  :host([placement='bottom-start']) {
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    align-content: end;
+  }
+
+  :host([placement='bottom-center']) {
+    inset-block-end: 0;
+    inset-inline-start: 50%;
+    translate: -50% 0;
+    align-content: end;
+  }
+
+  :host([placement='bottom-end']) {
+    inset-block-end: 0;
+    inset-inline-start: auto;
+    inset-inline-end: 0;
+    align-content: end;
+  }
+
+  /* Bottom placements: justify content to end */
+  :host([placement^='bottom']) {
+    justify-content: end;
+  }
+
+  .stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+    width: 100%;
+    pointer-events: auto;
+  }
+
+  /* Bottom placements: reverse stack order so newest appears at bottom */
+  :host([placement^='bottom']) .stack {
+    flex-direction: column-reverse;
+  }
+
+  /* Mobile: full width */
+  @media (max-width: 480px) {
+    :host {
+      width: 100%;
+      padding: var(--cs-space-s);
+    }
+  }
+`;
+
+export {
+  toast_styles_default
+};

package/dist/bundled/chunks/chunk.7BBHCML7.js

@@ -0,0 +1,29 @@
+/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  o,
+  require_react
+} from "./chunk.3OGRFC36.js";
+import {
+  CsSplitPanel
+} from "./chunk.DDNWZ2HO.js";
+import {
+  __toESM
+} from "./chunk.RMUSUQ7M.js";
+
+// src/react/split-panel/index.ts
+var React = __toESM(require_react(), 1);
+var tagName = "cs-split-panel";
+var reactWrapper = o({
+  tagName,
+  elementClass: CsSplitPanel,
+  react: React,
+  events: {
+    onCsReposition: "cs-reposition"
+  },
+  displayName: "CsSplitPanel"
+});
+var split_panel_default = reactWrapper;
+
+export {
+  split_panel_default
+};

package/dist/bundled/chunks/chunk.7BHYKZA5.js

@@ -0,0 +1,241 @@
+/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  i
+} from "./chunk.WH4RAXRT.js";
+
+// src/components/tab-group/tab-group.styles.ts
+var tab_group_styles_default = i`
+  :host {
+    --indicator-color: var(--cs-color-brand-fill-loud);
+    --track-color: var(--cs-color-neutral-fill-normal);
+    --track-width: 0.125rem;
+
+    /* Private */
+    --safe-track-width: max(0.5px, round(var(--track-width), 0.5px));
+
+    display: block;
+  }
+
+  .tab-group {
+    display: flex;
+    border-radius: 0;
+  }
+
+  .tabs {
+    display: flex;
+    position: relative;
+  }
+
+  .indicator {
+    position: absolute;
+  }
+
+  .tab-group-has-scroll-controls .nav-container {
+    position: relative;
+    padding: 0 1.5em;
+  }
+
+  .body {
+    display: block;
+  }
+
+  .scroll-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 1.5em;
+  }
+
+  .scroll-button-start {
+    inset-inline-start: 0;
+  }
+
+  .scroll-button-end {
+    inset-inline-end: 0;
+  }
+
+  /*
+    * Top
+    */
+
+  .tab-group-top {
+    flex-direction: column;
+  }
+
+  .tab-group-top .nav-container {
+    order: 1;
+  }
+
+  .tab-group-top .nav {
+    display: flex;
+    overflow-x: auto;
+
+    /* Hide scrollbar in Firefox */
+    scrollbar-width: none;
+  }
+
+  /* Hide scrollbar in Chrome/Safari */
+  .tab-group-top .nav::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .tab-group-top .tabs {
+    flex: 1 1 auto;
+    position: relative;
+    flex-direction: row;
+    border-bottom: solid var(--safe-track-width) var(--track-color);
+  }
+
+  .tab-group-top .indicator {
+    bottom: calc(-1 * var(--safe-track-width));
+    border-bottom: solid var(--safe-track-width) var(--indicator-color);
+  }
+
+  .tab-group-top .body {
+    order: 2;
+  }
+
+  /* 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. */
+  .tab-group-top ::slotted(cs-tab[active]) {
+    border-block-end: solid var(--safe-track-width) var(--indicator-color);
+    margin-block-end: calc(-1 * var(--safe-track-width)) !important;
+  }
+
+  .tab-group-top .body slot::slotted(cs-tab-panel) {
+    --padding: var(--cs-space-xl) 0;
+  }
+
+  /*
+    * Bottom
+    */
+
+  .tab-group-bottom {
+    flex-direction: column;
+  }
+
+  .tab-group-bottom .nav-container {
+    order: 2;
+  }
+
+  .tab-group-bottom .nav {
+    display: flex;
+    overflow-x: auto;
+
+    /* Hide scrollbar in Firefox */
+    scrollbar-width: none;
+  }
+
+  /* Hide scrollbar in Chrome/Safari */
+  .tab-group-bottom .nav::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .tab-group-bottom .tabs {
+    flex: 1 1 auto;
+    position: relative;
+    flex-direction: row;
+    border-top: solid var(--safe-track-width) var(--track-color);
+  }
+
+  .tab-group-bottom .indicator {
+    top: calc(-1 * var(--safe-track-width));
+    border-top: solid var(--safe-track-width) var(--indicator-color);
+  }
+
+  .tab-group-bottom .body {
+    order: 1;
+  }
+
+  .tab-group-bottom ::slotted(cs-tab[active]) {
+    border-block-start: solid var(--safe-track-width) var(--indicator-color);
+    margin-block-start: calc(-1 * var(--safe-track-width)) !important;
+  }
+
+  .tab-group-bottom .body slot::slotted(cs-tab-panel) {
+    --padding: var(--cs-space-xl) 0;
+  }
+
+  /*
+    * Start
+    */
+
+  .tab-group-start {
+    flex-direction: row;
+  }
+
+  .tab-group-start .nav-container {
+    order: 1;
+  }
+
+  .tab-group-start .tabs {
+    flex: 0 0 auto;
+    flex-direction: column;
+    border-inline-end: solid var(--safe-track-width) var(--track-color);
+  }
+
+  .tab-group-start .indicator {
+    inset-inline-end: calc(-1 * var(--safe-track-width));
+    border-right: solid var(--safe-track-width) var(--indicator-color);
+  }
+
+  .tab-group-start .body {
+    flex: 1 1 auto;
+    order: 2;
+  }
+
+  .tab-group-start ::slotted(cs-tab[active]) {
+    border-inline-end: solid var(--safe-track-width) var(--indicator-color);
+    margin-inline-end: calc(-1 * var(--safe-track-width)) !important;
+  }
+
+  .tab-group-start .body slot::slotted(cs-tab-panel) {
+    --padding: 0 var(--cs-space-xl);
+  }
+
+  /*
+    * End
+    */
+
+  .tab-group-end {
+    flex-direction: row;
+  }
+
+  .tab-group-end .nav-container {
+    order: 2;
+  }
+
+  .tab-group-end .tabs {
+    flex: 0 0 auto;
+    flex-direction: column;
+    border-left: solid var(--safe-track-width) var(--track-color);
+  }
+
+  .tab-group-end .indicator {
+    inset-inline-start: calc(-1 * var(--safe-track-width));
+    border-inline-start: solid var(--safe-track-width) var(--indicator-color);
+  }
+
+  .tab-group-end .body {
+    flex: 1 1 auto;
+    order: 1;
+  }
+
+  .tab-group-end ::slotted(cs-tab[active]) {
+    border-inline-start: solid var(--safe-track-width) var(--indicator-color);
+    margin-inline-start: calc(-1 * var(--safe-track-width)) !important;
+  }
+
+  .tab-group-end .body slot::slotted(cs-tab-panel) {
+    --padding: 0 var(--cs-space-xl);
+  }
+`;
+
+export {
+  tab_group_styles_default
+};

package/dist/bundled/chunks/chunk.7CCB4S4A.js

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

package/dist/bundled/chunks/chunk.7H26QH4S.js

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

package/dist/bundled/chunks/chunk.7HHFBP65.js

@@ -0,0 +1,27 @@
+/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  o,
+  require_react
+} from "./chunk.3OGRFC36.js";
+import {
+  CsTab
+} from "./chunk.AEL4LXZD.js";
+import {
+  __toESM
+} from "./chunk.RMUSUQ7M.js";
+
+// src/react/tab/index.ts
+var React = __toESM(require_react(), 1);
+var tagName = "cs-tab";
+var reactWrapper = o({
+  tagName,
+  elementClass: CsTab,
+  react: React,
+  events: {},
+  displayName: "CsTab"
+});
+var tab_default = reactWrapper;
+
+export {
+  tab_default
+};

package/dist/bundled/chunks/chunk.7NH7IBOP.js

@@ -0,0 +1,236 @@
+/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  option_styles_default
+} from "./chunk.ZSNC5CG6.js";
+import {
+  CornerstoneElement,
+  customElement,
+  e,
+  n,
+  r
+} from "./chunk.LQ7XXMRT.js";
+import {
+  LocalizeController
+} from "./chunk.Y4VPKQYM.js";
+import {
+  A,
+  b
+} from "./chunk.QZ4WRTL6.js";
+import {
+  __decorateClass
+} from "./chunk.RMUSUQ7M.js";
+
+// src/internal/get-text.ts
+function getText(root, depth = 0) {
+  if (!root || !globalThis.Node) {
+    return "";
+  }
+  if (typeof root[Symbol.iterator] === "function") {
+    const nodes = Array.isArray(root) ? root : [...root];
+    return nodes.map((node2) => getText(node2, --depth)).join("");
+  }
+  const node = root;
+  if (node.nodeType === Node.TEXT_NODE) {
+    return node.textContent ?? "";
+  }
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    const element = node;
+    if (element.hasAttribute("slot") || element.matches("style, script")) {
+      return "";
+    }
+    if (element instanceof HTMLSlotElement) {
+      const assignedNodes = element.assignedNodes({ flatten: true });
+      if (assignedNodes.length > 0) {
+        return getText(assignedNodes, --depth);
+      }
+    }
+    return depth > -1 ? getText(element, --depth) : element.textContent ?? "";
+  }
+  return node.hasChildNodes() ? getText(node.childNodes, --depth) : "";
+}
+
+// src/components/option/option.ts
+var CsOption = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    // @ts-expect-error - Controller is currently unused
+    this.localize = new LocalizeController(this);
+    this.cachedDefaultLabel = "";
+    this.isInitialized = false;
+    this.isDefaultLabelDirty = true;
+    this.current = false;
+    this.value = "";
+    this.disabled = false;
+    this.selected = false;
+    this.defaultSelected = false;
+    this._label = "";
+    this.handleHover = (event) => {
+      if (event.type === "mouseenter") {
+        this.customStates.set("hover", true);
+      } else if (event.type === "mouseleave") {
+        this.customStates.set("hover", false);
+      }
+    };
+  }
+  set label(value) {
+    const oldValue = this._label;
+    this._label = value || "";
+    if (this._label !== oldValue) {
+      this.requestUpdate("label", oldValue);
+    }
+  }
+  get label() {
+    if (this._label) {
+      return this._label;
+    }
+    return this.defaultLabel;
+  }
+  /** The default label, generated from the element contents. Will be equal to `label` in most cases. */
+  get defaultLabel() {
+    if (this.isDefaultLabelDirty || !this.cachedDefaultLabel) {
+      this.updateDefaultLabel();
+    }
+    return this.cachedDefaultLabel;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "option");
+    this.setAttribute("aria-selected", "false");
+    this.addEventListener("mouseenter", this.handleHover);
+    this.addEventListener("mouseleave", this.handleHover);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("mouseenter", this.handleHover);
+    this.removeEventListener("mouseleave", this.handleHover);
+  }
+  handleDefaultSlotChange() {
+    this.isDefaultLabelDirty = true;
+    if (this.isInitialized) {
+      customElements.whenDefined("cs-select").then(() => {
+        const controller = this.closest("cs-select");
+        if (controller) {
+          controller.handleDefaultSlotChange?.();
+        }
+      });
+      customElements.whenDefined("cs-combobox").then(() => {
+        const controller = this.closest("cs-combobox");
+        if (controller) {
+          controller.handleDefaultSlotChange?.();
+        }
+      });
+    } else {
+      this.isInitialized = true;
+    }
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("defaultSelected")) {
+      if (this.didSSR && this.hasUpdated || !this.didSSR) {
+        this.syncDefaultSelected();
+      }
+    }
+    super.willUpdate(changedProperties);
+  }
+  syncDefaultSelected() {
+    if ("closest" in this) {
+      if (!this.closest("cs-combobox, cs-select")?.hasInteracted) {
+        if (this.defaultSelected) {
+          const oldVal = this.selected;
+          this.selected = this.defaultSelected;
+          this.requestUpdate("selected", oldVal);
+        }
+      }
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("disabled")) {
+      this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+      this.customStates.set("disabled", this.disabled);
+    }
+    if (changedProperties.has("selected")) {
+      this.setAttribute("aria-selected", this.selected ? "true" : "false");
+      this.customStates.set("selected", this.selected);
+    }
+    if (changedProperties.has("value")) {
+      if (typeof this.value !== "string") {
+        this.value = String(this.value);
+      }
+      this.handleDefaultSlotChange();
+    }
+    if (changedProperties.has("current")) {
+      this.customStates.set("current", this.current);
+    }
+    super.updated(changedProperties);
+  }
+  async firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    if (this.didSSR && !this.hasUpdated) {
+      await this.updateComplete;
+      this.syncDefaultSelected();
+    } else {
+      this.syncDefaultSelected();
+    }
+    if (this.selected && !this.defaultSelected) {
+      const parent = this.closest("cs-select, cs-combobox");
+      if (parent && !parent.hasInteracted) {
+        await customElements.whenDefined(parent.localName);
+        await parent.updateComplete;
+        parent.selectionChanged?.();
+      }
+    }
+  }
+  updateDefaultLabel() {
+    const oldValue = this.cachedDefaultLabel;
+    this.cachedDefaultLabel = getText(this).trim();
+    this.isDefaultLabelDirty = false;
+    const changed = this.cachedDefaultLabel !== oldValue;
+    if (!this._label && changed) {
+      this.requestUpdate("label", oldValue);
+    }
+    return changed;
+  }
+  render() {
+    const selected = this.selected;
+    if (this.didSSR && !this.hasUpdated) {
+      this.updateComplete.then(() => {
+        this.requestUpdate();
+      });
+      return A;
+    }
+    return b`
+      ${selected ? b`<cs-icon part="checked-icon" class="check" name="check" library="system" aria-hidden="true"></cs-icon>` : b`<span part="checked-icon" class="check" aria-hidden="true"></span>`}
+      <slot part="start" name="start" class="start"></slot>
+      <slot part="label" class="label" @slotchange=${this.handleDefaultSlotChange}></slot>
+      <slot part="end" name="end" class="end"></slot>
+    `;
+  }
+};
+CsOption.css = option_styles_default;
+__decorateClass([
+  e(".label")
+], CsOption.prototype, "defaultSlot", 2);
+__decorateClass([
+  r()
+], CsOption.prototype, "current", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsOption.prototype, "value", 2);
+__decorateClass([
+  n({ type: Boolean })
+], CsOption.prototype, "disabled", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: false })
+], CsOption.prototype, "selected", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "selected" })
+], CsOption.prototype, "defaultSelected", 2);
+__decorateClass([
+  n()
+], CsOption.prototype, "label", 1);
+CsOption = __decorateClass([
+  customElement("cs-option")
+], CsOption);
+
+export {
+  CsOption
+};

package/dist/bundled/chunks/chunk.7UCO6RUK.js

@@ -0,0 +1,25 @@
+/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  i
+} from "./chunk.WH4RAXRT.js";
+
+// src/components/tree/tree.styles.ts
+var tree_styles_default = i`
+  :host {
+    /*
+     * These are actually used by tree item, but we define them here so they can more easily be set and all tree items
+     * stay consistent.
+     */
+    --indent-guide-color: var(--cs-color-surface-border);
+    --indent-guide-offset: 0;
+    --indent-guide-style: solid;
+    --indent-guide-width: 0;
+    --indent-size: 2em;
+
+    display: block;
+  }
+`;
+
+export {
+  tree_styles_default
+};