@cruglobal/cornerstone-components 0.6.2 → 0.7.0

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

@@ -1,229 +0,0 @@
-/*! 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

@@ -1,233 +0,0 @@
-/*! 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

@@ -1,114 +0,0 @@
-/*! 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

@@ -1,93 +0,0 @@
-/*! 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
-};