@cruglobal/cornerstone-components 0.1.3 → 0.6.2

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

@@ -0,0 +1,229 @@
+/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsContentChangeEvent
+} from "./chunk.37VVCOZ2.js";
+import {
+  random_content_styles_default
+} from "./chunk.4MRPDNGL.js";
+import {
+  visually_hidden_styles_default
+} from "./chunk.UVNKJQB6.js";
+import {
+  AutoplayController
+} from "./chunk.ZHHK42LK.js";
+import {
+  prefersReducedMotion
+} from "./chunk.HC2QZ77X.js";
+import {
+  watch
+} from "./chunk.3QN4KTE6.js";
+import {
+  CornerstoneElement,
+  customElement
+} from "./chunk.4H5TQFVZ.js";
+import {
+  __decorateClass
+} from "./chunk.HBAVB7LX.js";
+
+// src/components/random-content/random-content.ts
+import { html } from "lit";
+import { property, state } from "lit/decorators.js";
+if (typeof document !== "undefined") {
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(`
+    @keyframes cs-rc-fade {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+    @keyframes cs-rc-fade-up {
+      from { opacity: 0; transform: translateY(var(--animation-translate, 0.5em)); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes cs-rc-fade-down {
+      from { opacity: 0; transform: translateY(calc(-1 * var(--animation-translate, 0.5em))); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes cs-rc-fade-left {
+      from { opacity: 0; transform: translateX(var(--animation-translate, 0.5em)); }
+      to { opacity: 1; transform: translateX(0); }
+    }
+    @keyframes cs-rc-fade-right {
+      from { opacity: 0; transform: translateX(calc(-1 * var(--animation-translate, 0.5em))); }
+      to { opacity: 1; transform: translateX(0); }
+    }
+  `);
+  document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+}
+var CsRandomContent = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.sequenceCursor = 0;
+    this.uniqueQueue = [];
+    this.currentSelection = /* @__PURE__ */ new Set();
+    this.isInitialSelection = true;
+    this.autoplayController = new AutoplayController(this, () => this.randomize());
+    // Tracks the pending "clear animation attribute" listener per child so rapid re-animation
+    // (e.g. fast autoplay) doesn't stack listeners — `cancel()` fires `animationcancel`, not the
+    // `animationend` the listener waits for, so it wouldn't otherwise be removed.
+    this.animationCleanups = /* @__PURE__ */ new WeakMap();
+    this.liveAnnouncement = "";
+    this.items = 1;
+    this.mode = "unique";
+    this.autoplay = false;
+    this.autoplayInterval = 3e3;
+    this.animation = "none";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.hasUpdated) {
+      this.syncAutoplay();
+    }
+  }
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    this.syncAutoplay();
+  }
+  handleAutoplayChange() {
+    this.syncAutoplay();
+  }
+  handleModeChange() {
+    this.sequenceCursor = 0;
+    this.uniqueQueue = [];
+    this.currentSelection.clear();
+    this.randomize();
+  }
+  handleItemsChange() {
+    this.uniqueQueue = [];
+    this.randomize();
+  }
+  /** Selects a new set of children using the current mode. Returns the elements now shown. */
+  randomize() {
+    const children = this.assignedChildren();
+    if (!children.length) {
+      return [];
+    }
+    const count = Math.min(Math.max(1, this.items), children.length);
+    let selected;
+    if (this.mode === "sequence") {
+      selected = [];
+      Array.from({ length: count }).forEach((_, i) => {
+        selected.push(children[(this.sequenceCursor + i) % children.length]);
+      });
+      this.sequenceCursor = (this.sequenceCursor + count) % children.length;
+    } else if (this.mode === "unique") {
+      if (this.uniqueQueue.length < count) {
+        const queued = new Set(this.uniqueQueue);
+        const rest = children.filter((c) => !this.currentSelection.has(c) && !queued.has(c));
+        const current = children.filter((c) => this.currentSelection.has(c) && !queued.has(c));
+        this.uniqueQueue.push(...this.sample(rest, rest.length), ...this.sample(current, current.length));
+        if (this.uniqueQueue.length < count) {
+          this.uniqueQueue = this.sample([...children], children.length);
+        }
+      }
+      selected = this.uniqueQueue.splice(0, count);
+      this.currentSelection = new Set(selected);
+    } else {
+      const pool = children.filter((c) => !this.currentSelection.has(c));
+      selected = this.sample(pool.length >= count ? pool : children, count);
+      this.currentSelection = new Set(selected);
+    }
+    const firstShown = selected[0];
+    const lastShown = selected[selected.length - 1];
+    children.forEach((el) => {
+      const htmlEl = el;
+      const isSelected = selected.includes(el);
+      delete htmlEl.dataset["csAnimation"];
+      htmlEl.style.display = "";
+      htmlEl.hidden = !isSelected;
+      htmlEl.style.marginBlockStart = isSelected && el === firstShown ? "0" : "";
+      htmlEl.style.marginBlockEnd = isSelected && el === lastShown ? "0" : "";
+    });
+    if (this.animation !== "none" && !prefersReducedMotion()) {
+      selected.forEach((el) => {
+        const htmlEl = el;
+        if (this.animation !== "fade" && getComputedStyle(el).display === "inline") {
+          htmlEl.style.display = "inline-block";
+        }
+        el.getAnimations().forEach((a) => a.cancel());
+        htmlEl.dataset["csAnimation"] = this.animation;
+        this.animationCleanups.get(el)?.abort();
+        const cleanup = new AbortController();
+        this.animationCleanups.set(el, cleanup);
+        htmlEl.addEventListener("animationend", () => delete htmlEl.dataset["csAnimation"], {
+          once: true,
+          signal: cleanup.signal
+        });
+      });
+    }
+    if (this.isInitialSelection) {
+      this.isInitialSelection = false;
+    } else {
+      this.liveAnnouncement = selected.map((el) => el.textContent?.trim()).filter(Boolean).join(", ");
+    }
+    this.dispatchEvent(new CsContentChangeEvent({ items: selected }));
+    return selected;
+  }
+  syncAutoplay() {
+    this.autoplayController.stop();
+    if (this.autoplay && this.autoplayInterval > 0) {
+      this.autoplayController.start(this.autoplayInterval);
+    }
+  }
+  assignedChildren() {
+    const slot = this.shadowRoot?.querySelector("slot");
+    return slot?.assignedElements() ?? [];
+  }
+  // Fisher-Yates partial shuffle — picks `count` unique items from `pool`.
+  sample(pool, count) {
+    const arr = [...pool];
+    Array.from({ length: count }).forEach((_, i) => {
+      const j = i + Math.floor(Math.random() * (arr.length - i));
+      [arr[i], arr[j]] = [arr[j], arr[i]];
+    });
+    return arr.slice(0, count);
+  }
+  handleSlotChange() {
+    this.randomize();
+  }
+  render() {
+    return html`
+      <slot @slotchange=${this.handleSlotChange}></slot>
+      <div class="cs-visually-hidden" role="status" aria-live="polite" aria-atomic="true">${this.liveAnnouncement}</div>
+    `;
+  }
+};
+CsRandomContent.css = [random_content_styles_default, visually_hidden_styles_default];
+__decorateClass([
+  state()
+], CsRandomContent.prototype, "liveAnnouncement", 2);
+__decorateClass([
+  property({ type: Number })
+], CsRandomContent.prototype, "items", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsRandomContent.prototype, "mode", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CsRandomContent.prototype, "autoplay", 2);
+__decorateClass([
+  property({ type: Number, attribute: "autoplay-interval" })
+], CsRandomContent.prototype, "autoplayInterval", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsRandomContent.prototype, "animation", 2);
+__decorateClass([
+  watch(["autoplay", "autoplayInterval"], { waitUntilFirstUpdate: true })
+], CsRandomContent.prototype, "handleAutoplayChange", 1);
+__decorateClass([
+  watch("mode", { waitUntilFirstUpdate: true })
+], CsRandomContent.prototype, "handleModeChange", 1);
+__decorateClass([
+  watch("items", { waitUntilFirstUpdate: true })
+], CsRandomContent.prototype, "handleItemsChange", 1);
+CsRandomContent = __decorateClass([
+  customElement("cs-random-content")
+], CsRandomContent);
+
+export {
+  CsRandomContent
+};

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

@@ -0,0 +1,233 @@
+/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  option_styles_default
+} from "./chunk.CMBDV5NH.js";
+import {
+  CornerstoneElement,
+  customElement
+} from "./chunk.4H5TQFVZ.js";
+import {
+  LocalizeController
+} from "./chunk.TFKBFNPO.js";
+import {
+  __decorateClass
+} from "./chunk.HBAVB7LX.js";
+
+// src/components/option/option.ts
+import { html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.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 nothing;
+    }
+    return html`
+      ${selected ? html`<cs-icon part="checked-icon" class="check" name="check" library="system" aria-hidden="true"></cs-icon>` : html`<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([
+  query(".label")
+], CsOption.prototype, "defaultSlot", 2);
+__decorateClass([
+  state()
+], CsOption.prototype, "current", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsOption.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean })
+], CsOption.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: false })
+], CsOption.prototype, "selected", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "selected" })
+], CsOption.prototype, "defaultSelected", 2);
+__decorateClass([
+  property()
+], CsOption.prototype, "label", 1);
+CsOption = __decorateClass([
+  customElement("cs-option")
+], CsOption);
+
+export {
+  CsOption
+};

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

@@ -0,0 +1,114 @@
+/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  radio_styles_default
+} from "./chunk.6QN4ZK7V.js";
+import {
+  form_control_styles_default
+} from "./chunk.FGFWM4HV.js";
+import {
+  CornerstoneFormAssociatedElement
+} from "./chunk.ITWO4C4O.js";
+import {
+  size_styles_default
+} from "./chunk.CXKOXFXU.js";
+import {
+  customElement
+} from "./chunk.4H5TQFVZ.js";
+import {
+  __decorateClass
+} from "./chunk.HBAVB7LX.js";
+
+// src/components/radio/radio.ts
+import { html, isServer } from "lit";
+import { property, state } from "lit/decorators.js";
+var CsRadio = class extends CornerstoneFormAssociatedElement {
+  constructor() {
+    super();
+    this.checked = false;
+    this.forceDisabled = false;
+    this.appearance = "default";
+    this.disabled = false;
+    this.handleClick = () => {
+      if (!this.disabled && !this.forceDisabled) {
+        this.checked = true;
+      }
+    };
+    if (!isServer) {
+      this.addEventListener("click", this.handleClick);
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setInitialAttributes();
+  }
+  setInitialAttributes() {
+    this.setAttribute("role", "radio");
+    this.tabIndex = 0;
+    this.setAttribute("aria-disabled", this.disabled || this.forceDisabled ? "true" : "false");
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("checked")) {
+      this.customStates.set("checked", this.checked);
+      this.setAttribute("aria-checked", this.checked ? "true" : "false");
+      if (!this.disabled && !this.forceDisabled) {
+        this.tabIndex = this.checked ? 0 : -1;
+      }
+    }
+    if (changedProperties.has("disabled") || changedProperties.has("forceDisabled")) {
+      const effectivelyDisabled = this.disabled || this.forceDisabled;
+      this.customStates.set("disabled", effectivelyDisabled);
+      this.setAttribute("aria-disabled", effectivelyDisabled ? "true" : "false");
+      if (effectivelyDisabled) {
+        this.tabIndex = -1;
+      } else {
+        this.tabIndex = this.checked ? 0 : -1;
+      }
+    }
+  }
+  /**
+   * @override
+   */
+  setValue() {
+  }
+  render() {
+    return html`
+      <span part="control" class="control">
+        ${this.checked ? html`
+                <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" part="checked-icon" class="checked-icon">
+                  <circle cx="8" cy="8" r="8" />
+                </svg>
+              ` : ""}
+      </span>
+
+      <slot part="label" class="label"></slot>
+    `;
+  }
+};
+CsRadio.css = [form_control_styles_default, size_styles_default, radio_styles_default];
+__decorateClass([
+  state()
+], CsRadio.prototype, "checked", 2);
+__decorateClass([
+  state()
+], CsRadio.prototype, "forceDisabled", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsRadio.prototype, "value", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsRadio.prototype, "appearance", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsRadio.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean })
+], CsRadio.prototype, "disabled", 2);
+CsRadio = __decorateClass([
+  customElement("cs-radio")
+], CsRadio);
+CsRadio.disableWarning?.("change-in-update");
+
+export {
+  CsRadio
+};

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

@@ -0,0 +1,93 @@
+/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/components/breadcrumb-item/breadcrumb-item.styles.ts
+import { css } from "lit";
+var breadcrumb_item_styles_default = css`
+  :host {
+    color: var(--cs-color-text-link);
+    display: inline-flex;
+    align-items: center;
+    font: inherit;
+    font-weight: var(--cs-font-weight-action);
+    line-height: var(--cs-line-height-normal);
+    white-space: nowrap;
+  }
+
+  :host(:last-of-type) {
+    color: var(--cs-color-text-quiet);
+  }
+
+  .label {
+    display: inline-block;
+    font: inherit;
+    text-decoration: none;
+    color: currentColor;
+    background: none;
+    border: none;
+    border-radius: var(--cs-border-radius-m);
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    transition: color var(--cs-transition-normal) var(--cs-transition-easing);
+  }
+
+  @media (hover: hover) {
+    :host(:not(:last-of-type)) .label:hover {
+      color: color-mix(in oklab, currentColor, var(--cs-color-mix-hover));
+    }
+  }
+
+  :host(:not(:last-of-type)) .label:active {
+    color: color-mix(in oklab, currentColor, var(--cs-color-mix-active));
+  }
+
+  .label:focus {
+    outline: none;
+  }
+
+  .label:focus-visible {
+    outline: var(--cs-focus-ring);
+    outline-offset: var(--cs-focus-ring-offset);
+  }
+
+  .start,
+  .end {
+    display: none;
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .start,
+  .end {
+    display: inline-flex;
+    color: var(--cs-color-text-quiet);
+  }
+
+  /* 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. */
+  ::slotted([slot='start']) {
+    margin-inline-end: var(--cs-space-s) !important;
+  }
+
+  ::slotted([slot='end']) {
+    margin-inline-start: var(--cs-space-s) !important;
+  }
+
+  :host(:last-of-type) .separator {
+    display: none;
+  }
+
+  .separator {
+    color: var(--cs-color-text-quiet);
+    display: inline-flex;
+    align-items: center;
+    margin: 0 var(--cs-space-s);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+`;
+
+export {
+  breadcrumb_item_styles_default
+};