@cruglobal/cornerstone-components 0.1.2 → 0.6.1

package/dist/bundled/chunks/chunk.LVBKIOB4.js

@@ -0,0 +1,118 @@
+/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsMutationEvent
+} from "./chunk.MF3JSD7R.js";
+import {
+  mutation_observer_styles_default
+} from "./chunk.VHJ3WJSS.js";
+import {
+  watch
+} from "./chunk.PGRLJT6U.js";
+import {
+  CornerstoneElement,
+  customElement,
+  n
+} from "./chunk.AWCR23QG.js";
+import {
+  b
+} from "./chunk.FQUMEV4X.js";
+import {
+  __decorateClass
+} from "./chunk.WA5AGEMP.js";
+
+// src/components/mutation-observer/mutation-observer.ts
+var CsMutationObserver = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.attrOldValue = false;
+    this.charData = false;
+    this.charDataOldValue = false;
+    this.childList = false;
+    this.disabled = false;
+    this.handleMutation = (mutationList) => {
+      this.dispatchEvent(new CsMutationEvent({ mutationList }));
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (typeof MutationObserver !== "undefined") {
+      this.mutationObserver = new MutationObserver(this.handleMutation);
+      if (!this.disabled) {
+        this.startObserver();
+      }
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopObserver();
+  }
+  startObserver() {
+    const observeAttributes = typeof this.attr === "string" && this.attr.length > 0;
+    const attributeFilter = observeAttributes && this.attr !== "*" ? this.attr.split(" ") : void 0;
+    try {
+      this.mutationObserver.observe(this, {
+        subtree: true,
+        childList: this.childList,
+        attributes: observeAttributes,
+        attributeFilter,
+        attributeOldValue: this.attrOldValue,
+        characterData: this.charData,
+        characterDataOldValue: this.charDataOldValue
+      });
+    } catch {
+    }
+  }
+  stopObserver() {
+    this.mutationObserver.disconnect();
+  }
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.stopObserver();
+    } else {
+      this.startObserver();
+    }
+  }
+  handleChange() {
+    this.stopObserver();
+    this.startObserver();
+  }
+  render() {
+    return b` <slot></slot> `;
+  }
+};
+CsMutationObserver.css = mutation_observer_styles_default;
+__decorateClass([
+  n({ reflect: true })
+], CsMutationObserver.prototype, "attr", 2);
+__decorateClass([
+  n({ attribute: "attr-old-value", type: Boolean, reflect: true })
+], CsMutationObserver.prototype, "attrOldValue", 2);
+__decorateClass([
+  n({ attribute: "char-data", type: Boolean, reflect: true })
+], CsMutationObserver.prototype, "charData", 2);
+__decorateClass([
+  n({ attribute: "char-data-old-value", type: Boolean, reflect: true })
+], CsMutationObserver.prototype, "charDataOldValue", 2);
+__decorateClass([
+  n({ attribute: "child-list", type: Boolean, reflect: true })
+], CsMutationObserver.prototype, "childList", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CsMutationObserver.prototype, "disabled", 2);
+__decorateClass([
+  watch("disabled")
+], CsMutationObserver.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("attr", { waitUntilFirstUpdate: true }),
+  watch("attr-old-value", { waitUntilFirstUpdate: true }),
+  watch("char-data", { waitUntilFirstUpdate: true }),
+  watch("char-data-old-value", { waitUntilFirstUpdate: true }),
+  watch("childList", { waitUntilFirstUpdate: true })
+], CsMutationObserver.prototype, "handleChange", 1);
+CsMutationObserver = __decorateClass([
+  customElement("cs-mutation-observer")
+], CsMutationObserver);
+
+export {
+  CsMutationObserver
+};

package/dist/bundled/chunks/chunk.LZZT7K4R.js

@@ -0,0 +1,32 @@
+/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/components/known-date/internal/field-order.ts
+var orderCache = /* @__PURE__ */ new Map();
+function localeFieldOrder(locale) {
+  const key = locale || "en";
+  const cached = orderCache.get(key);
+  if (cached) {
+    return cached;
+  }
+  const formatter = new Intl.DateTimeFormat(key, {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    calendar: "gregory",
+    numberingSystem: "latn"
+  });
+  const parts = formatter.formatToParts(new Date(2026, 0, 23));
+  const order = [];
+  for (const part of parts) {
+    if (part.type === "year" || part.type === "month" || part.type === "day") {
+      order.push(part.type);
+    }
+  }
+  const resolved = order.length === 3 ? order : ["month", "day", "year"];
+  orderCache.set(key, resolved);
+  return resolved;
+}
+
+export {
+  localeFieldOrder
+};

package/dist/bundled/chunks/chunk.M2EPED3M.js

@@ -0,0 +1,29 @@
+/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  o,
+  require_react
+} from "./chunk.O6TFOOQT.js";
+import {
+  CsRandomContent
+} from "./chunk.7KKDKJKH.js";
+import {
+  __toESM
+} from "./chunk.WA5AGEMP.js";
+
+// src/react/random-content/index.ts
+var React = __toESM(require_react(), 1);
+var tagName = "cs-random-content";
+var reactWrapper = o({
+  tagName,
+  elementClass: CsRandomContent,
+  react: React,
+  events: {
+    onCsContentChange: "cs-content-change"
+  },
+  displayName: "CsRandomContent"
+});
+var random_content_default = reactWrapper;
+
+export {
+  random_content_default
+};

package/dist/bundled/chunks/chunk.M55JCXPK.js

@@ -0,0 +1,341 @@
+/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  MirrorValidator
+} from "./chunk.L5P6VZTH.js";
+import {
+  CornerstoneFormAssociatedElement
+} from "./chunk.3H3NDXU3.js";
+import {
+  CsInvalidEvent
+} from "./chunk.EK5O64PZ.js";
+import {
+  size_styles_default
+} from "./chunk.FOA6WLNB.js";
+import {
+  o
+} from "./chunk.X6Q3EMPK.js";
+import {
+  button_styles_default
+} from "./chunk.GBRXKDSF.js";
+import {
+  variants_styles_default
+} from "./chunk.F3EKSAJC.js";
+import {
+  e as e2
+} from "./chunk.YL2SORTA.js";
+import {
+  watch
+} from "./chunk.PGRLJT6U.js";
+import {
+  customElement,
+  e,
+  n,
+  r
+} from "./chunk.AWCR23QG.js";
+import {
+  LocalizeController
+} from "./chunk.DFT6CMNV.js";
+import {
+  T,
+  b,
+  w
+} from "./chunk.FQUMEV4X.js";
+import {
+  __decorateClass
+} from "./chunk.WA5AGEMP.js";
+
+// ../../node_modules/lit-html/static.js
+var a = /* @__PURE__ */ Symbol.for("");
+var o2 = (t) => {
+  if (t?.r === a) return t?._$litStatic$;
+};
+var i = (t, ...r2) => ({ _$litStatic$: r2.reduce((r3, e3, a2) => r3 + ((t2) => {
+  if (void 0 !== t2._$litStatic$) return t2._$litStatic$;
+  throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t2}. Use 'unsafeStatic' to pass non-literal values, but
+            take care to ensure page security.`);
+})(e3) + t[a2 + 1], t[0]), r: a });
+var l = /* @__PURE__ */ new Map();
+var n2 = (t) => (r2, ...e3) => {
+  const a2 = e3.length;
+  let s, i2;
+  const n3 = [], u2 = [];
+  let c2, $2 = 0, f = false;
+  for (; $2 < a2; ) {
+    for (c2 = r2[$2]; $2 < a2 && void 0 !== (i2 = e3[$2], s = o2(i2)); ) c2 += s + r2[++$2], f = true;
+    $2 !== a2 && u2.push(i2), n3.push(c2), $2++;
+  }
+  if ($2 === a2 && n3.push(r2[a2]), f) {
+    const t2 = n3.join("$$lit$$");
+    void 0 === (r2 = l.get(t2)) && (n3.raw = n3, l.set(t2, r2 = n3)), e3 = u2;
+  }
+  return t(r2, ...e3);
+};
+var u = n2(b);
+var c = n2(w);
+var $ = n2(T);
+
+// src/components/button/button.ts
+var CsButton = class extends CornerstoneFormAssociatedElement {
+  constructor() {
+    super(...arguments);
+    this.assumeInteractionOn = ["click"];
+    this.localize = new LocalizeController(this);
+    this.invalid = false;
+    this.isIconButton = false;
+    this.title = "";
+    this.variant = "neutral";
+    this.appearance = "accent";
+    this.size = "m";
+    this.withCaret = false;
+    this.disabled = false;
+    this.loading = false;
+    this.pill = false;
+    this.type = "button";
+  }
+  static get validators() {
+    return [...super.validators, MirrorValidator()];
+  }
+  constructLightDOMButton() {
+    const button = document.createElement("button");
+    for (const attribute of this.attributes) {
+      if (attribute.name === "style") {
+        continue;
+      }
+      button.setAttribute(attribute.name, attribute.value);
+    }
+    button.type = this.type;
+    button.style.position = "absolute !important";
+    button.style.width = "0 !important";
+    button.style.height = "0 !important";
+    button.style.clipPath = "inset(50%) !important";
+    button.style.overflow = "hidden !important";
+    button.style.whiteSpace = "nowrap !important";
+    if (this.name) {
+      button.name = this.name;
+    }
+    button.value = this.value || "";
+    return button;
+  }
+  handleClick(event) {
+    if (this.disabled || this.loading) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      return;
+    }
+    if (this.type !== "submit" && this.type !== "reset") {
+      return;
+    }
+    const form = this.getForm();
+    if (!form) {
+      return;
+    }
+    const lightDOMButton = this.constructLightDOMButton();
+    this.parentElement?.append(lightDOMButton);
+    lightDOMButton.click();
+    lightDOMButton.remove();
+  }
+  handleInvalid() {
+    this.dispatchEvent(new CsInvalidEvent());
+  }
+  handleLabelSlotChange() {
+    const nodes = this.labelSlot.assignedNodes({ flatten: true });
+    let hasIconLabel = false;
+    let hasIcon = false;
+    let hasText = false;
+    let hasOtherElements = false;
+    [...nodes].forEach((node) => {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const element = node;
+        if (element.localName === "cs-icon") {
+          hasIcon = true;
+          if (!hasIconLabel) {
+            const iconLabel = element.label;
+            hasIconLabel = typeof iconLabel === "string" && iconLabel.length > 0;
+          }
+        } else {
+          hasOtherElements = true;
+        }
+      } else if (node.nodeType === Node.TEXT_NODE) {
+        const text = node.textContent?.trim() || "";
+        if (text.length > 0) {
+          hasText = true;
+        }
+      }
+    });
+    this.isIconButton = hasIcon && !hasText && !hasOtherElements;
+    this.customStates.set("icon-button", this.isIconButton);
+    if (this.isIconButton && !hasIconLabel) {
+      console.warn(
+        'Icon buttons must have a label for screen readers. Add <cs-icon label="..."> to remove this warning.',
+        this
+      );
+    }
+  }
+  isButton() {
+    return this.href ? false : true;
+  }
+  isLink() {
+    return this.href ? true : false;
+  }
+  handleDisabledChange() {
+    this.customStates.set("disabled", this.disabled);
+    this.updateValidity();
+  }
+  handleHrefChange() {
+    this.customStates.set("link", this.isLink());
+  }
+  handleLoadingChange() {
+    this.customStates.set("loading", this.loading);
+  }
+  setValue(..._args) {
+  }
+  /** Simulates a click on the button. */
+  click() {
+    this.button.click();
+  }
+  /** Sets focus on the button. */
+  focus(options) {
+    this.button.focus(options);
+  }
+  /** Removes focus from the button. */
+  blur() {
+    this.button.blur();
+  }
+  render() {
+    const isLink = this.isLink();
+    const tag = isLink ? i`a` : i`button`;
+    return u`
+      <${tag}
+        part="button"
+        class=${e2({
+      button: true,
+      caret: this.withCaret,
+      disabled: this.disabled,
+      loading: this.loading,
+      rtl: this.localize.dir() === "rtl",
+      "is-icon-button": this.isIconButton
+    })}
+        ?disabled=${o(isLink ? void 0 : this.disabled)}
+        type=${o(isLink ? void 0 : this.type)}
+        title=${this.title}
+        name=${o(isLink ? void 0 : this.name)}
+        value=${o(isLink ? void 0 : this.value)}
+        href=${o(isLink ? this.href : void 0)}
+        target=${o(isLink ? this.target : void 0)}
+        download=${o(isLink ? this.download : void 0)}
+        rel=${o(isLink && this.rel ? this.rel : void 0)}
+        role=${o(isLink ? void 0 : "button")}
+        aria-disabled=${o(isLink && this.disabled ? "true" : void 0)}
+        tabindex=${this.disabled ? "-1" : "0"}
+        @invalid=${this.isButton() ? this.handleInvalid : null}
+        @click=${this.handleClick}
+      >
+        <slot name="start" part="start" class="start"></slot>
+        <slot part="label" class="label" @slotchange=${this.handleLabelSlotChange}></slot>
+        <slot name="end" part="end" class="end"></slot>
+        ${this.withCaret ? u` <cs-icon part="caret" class="caret" library="system" name="keyboard_arrow_down"></cs-icon> ` : ""}
+        ${this.loading ? u`<cs-spinner part="spinner"></cs-spinner>` : ""}
+      </${tag}>
+    `;
+  }
+};
+CsButton.shadowRootOptions = { ...CornerstoneFormAssociatedElement.shadowRootOptions, delegatesFocus: true };
+CsButton.css = [button_styles_default, variants_styles_default, size_styles_default];
+__decorateClass([
+  e(".button")
+], CsButton.prototype, "button", 2);
+__decorateClass([
+  e("slot:not([name])")
+], CsButton.prototype, "labelSlot", 2);
+__decorateClass([
+  r()
+], CsButton.prototype, "invalid", 2);
+__decorateClass([
+  r()
+], CsButton.prototype, "isIconButton", 2);
+__decorateClass([
+  n()
+], CsButton.prototype, "title", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsButton.prototype, "variant", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsButton.prototype, "appearance", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsButton.prototype, "size", 2);
+__decorateClass([
+  n({ attribute: "with-caret", type: Boolean, reflect: true })
+], CsButton.prototype, "withCaret", 2);
+__decorateClass([
+  n({ type: Boolean })
+], CsButton.prototype, "disabled", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CsButton.prototype, "loading", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CsButton.prototype, "pill", 2);
+__decorateClass([
+  n()
+], CsButton.prototype, "type", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsButton.prototype, "name", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsButton.prototype, "value", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsButton.prototype, "href", 2);
+__decorateClass([
+  n()
+], CsButton.prototype, "target", 2);
+__decorateClass([
+  n()
+], CsButton.prototype, "rel", 2);
+__decorateClass([
+  n()
+], CsButton.prototype, "download", 2);
+__decorateClass([
+  n({ attribute: "formaction" })
+], CsButton.prototype, "formAction", 2);
+__decorateClass([
+  n({ attribute: "formenctype" })
+], CsButton.prototype, "formEnctype", 2);
+__decorateClass([
+  n({ attribute: "formmethod" })
+], CsButton.prototype, "formMethod", 2);
+__decorateClass([
+  n({ attribute: "formnovalidate", type: Boolean })
+], CsButton.prototype, "formNoValidate", 2);
+__decorateClass([
+  n({ attribute: "formtarget" })
+], CsButton.prototype, "formTarget", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], CsButton.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("href")
+], CsButton.prototype, "handleHrefChange", 1);
+__decorateClass([
+  watch("loading", { waitUntilFirstUpdate: true })
+], CsButton.prototype, "handleLoadingChange", 1);
+CsButton = __decorateClass([
+  customElement("cs-button")
+], CsButton);
+CsButton.disableWarning?.("change-in-update");
+
+export {
+  CsButton
+};
+/*! Bundled license information:
+
+lit-html/static.js:
+  (**
+   * @license
+   * Copyright 2020 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+*/

package/dist/bundled/chunks/chunk.MAFBY4HU.js

@@ -0,0 +1,166 @@
+/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  i
+} from "./chunk.G7UCSRIQ.js";
+
+// src/components/known-date/known-date.styles.ts
+var known_date_styles_default = i`
+  :host {
+    display: block;
+    container-type: inline-size;
+    container-name: known-date;
+  }
+
+  [part~='fieldset'],
+  .fieldset {
+    border: 0;
+    padding: 0;
+    margin: 0;
+    min-inline-size: 0;
+  }
+
+  legend[part~='legend'] {
+    padding: 0;
+    display: block;
+  }
+
+  /* The legend's inner span carries the form-control-label part so the existing form-control styles
+     (including the required asterisk) apply consistently across browsers. */
+  .label {
+    display: inline-block;
+  }
+
+  [part~='fields'] {
+    display: flex;
+    gap: var(--cs-space-xs);
+    align-items: start;
+    inline-size: 100%;
+    min-inline-size: 0;
+  }
+
+  [part~='field'] {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0;
+    min-inline-size: 0;
+  }
+
+  /* Day and month each hold two digits; year holds four. Bias the flex distribution so the year
+     field gets roughly twice the share of the row but all three still grow and shrink together. */
+  [part~='field-month'],
+  [part~='field-day'] {
+    min-inline-size: 2.5em;
+  }
+
+  [part~='field-year'] {
+    flex-grow: 2;
+    min-inline-size: 6em;
+  }
+
+  /* Per-field labels match the hint's typography and spacing exactly (the same 0.5em offset other
+     form controls use between their input and hint) so the gap below each input reads as native. */
+  [part~='field-label'] {
+    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);
+    font-size: var(--cs-font-size-smaller);
+    margin-block-start: 0.5em;
+  }
+
+  /* Each input is styled to match cs-input's .text-field wrapper directly — same border, height,
+     padding, focus ring, and appearance variants. The host doesn't compose cs-input instances because
+     we want three discrete native inputs (no clear/password slots, simpler DOM), but the visual contract
+     is identical. */
+  [part~='field-input'] {
+    -webkit-appearance: none;
+    appearance: none;
+    box-sizing: border-box;
+    height: var(--cs-form-control-height);
+    inline-size: 100%;
+    min-inline-size: 0;
+    border-style: var(--cs-form-control-border-style);
+    border-width: var(--cs-form-control-border-width);
+    border-color: var(--cs-form-control-border-color);
+    border-radius: var(--cs-form-control-border-radius);
+    background-color: var(--cs-form-control-background-color);
+    color: var(--cs-form-control-value-color);
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: var(--cs-form-control-value-font-weight);
+    line-height: var(--cs-form-control-value-line-height);
+    padding: 0 var(--cs-form-control-padding-inline);
+    outline: var(--cs-focus-ring-style) var(--cs-focus-ring-width) transparent;
+    outline-offset: var(--cs-focus-ring-offset);
+    transition:
+      background-color var(--cs-transition-normal),
+      border-color var(--cs-transition-normal),
+      outline-color var(--cs-transition-fast);
+    transition-timing-function: var(--cs-transition-easing);
+  }
+
+  [part~='field-input']:focus {
+    outline-color: var(--cs-color-focus);
+  }
+
+  /* When the fields row gets too narrow to comfortably hold three side-by-side inputs, stack them
+     vertically. The threshold reflects the smallest width at which all three inputs still fit a
+     four-digit year plus padding without truncation. */
+  @container known-date (inline-size < 300px) {
+    [part~='fields'] {
+      flex-direction: column;
+      align-items: stretch;
+    }
+  }
+
+  /* Suppress the native number spin buttons so a paste that briefly looks like a number can't show them. */
+  [part~='field-input']::-webkit-outer-spin-button,
+  [part~='field-input']::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Hide the mirror used for native form-data + constraint validation. */
+  .value-input {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    opacity: 0;
+    pointer-events: none;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    clip: rect(0 0 0 0);
+    overflow: hidden;
+  }
+
+  /* Appearances — mirror cs-input's .text-field appearance variants exactly. */
+  :host([appearance='outlined']) [part~='field-input'] {
+    background-color: var(--cs-form-control-background-color);
+    border-color: var(--cs-form-control-border-color);
+  }
+
+  :host([appearance='filled']) [part~='field-input'] {
+    background-color: var(--cs-color-neutral-fill-quiet);
+    border-color: var(--cs-color-neutral-fill-quiet);
+  }
+
+  :host([appearance='filled-outlined']) [part~='field-input'] {
+    background-color: var(--cs-color-neutral-fill-quiet);
+    border-color: var(--cs-form-control-border-color);
+  }
+
+  :host([pill]) [part~='field-input'] {
+    border-radius: var(--cs-border-radius-pill) !important;
+  }
+
+  /* Disabled — mirror cs-input's :has(:disabled) opacity treatment. */
+  :host(:state(disabled)) [part~='field'],
+  [part~='field-input']:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
+
+export {
+  known_date_styles_default
+};

package/dist/bundled/chunks/chunk.MF3JSD7R.js

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