@cruglobal/cornerstone-components 0.1.2 → 0.6.1

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

@@ -0,0 +1,98 @@
+/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  i
+} from "./chunk.G7UCSRIQ.js";
+
+// src/components/rating/rating.styles.ts
+var rating_styles_default = i`
+  :host {
+    --symbol-color: var(--cs-color-neutral-on-quiet);
+    --symbol-color-active: var(--cs-color-yellow-70);
+    --symbol-spacing: 0.125em;
+
+    display: inline-flex;
+    border-radius: var(--cs-border-radius-m);
+    vertical-align: middle;
+    touch-action: none;
+  }
+
+  :host(:focus) {
+    outline: none;
+  }
+
+  :host(:focus-visible) {
+    outline: var(--cs-focus-ring);
+    outline-offset: var(--cs-focus-ring-offset);
+  }
+
+  .rating {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .symbols {
+    display: inline-flex;
+    gap: 0.125em;
+    position: relative;
+    line-height: 0;
+    color: var(--symbol-color);
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  .symbols > * {
+    padding: var(--symbol-spacing);
+  }
+
+  .symbol-active,
+  .partial-filled {
+    color: var(--symbol-color-active);
+  }
+
+  .partial-symbol-container {
+    position: relative;
+  }
+
+  .partial-filled {
+    position: absolute;
+    top: var(--symbol-spacing);
+    left: var(--symbol-spacing);
+  }
+
+  .symbol {
+    transition: scale var(--cs-transition-normal) var(--cs-transition-easing);
+    pointer-events: none;
+  }
+
+  .symbol-hover {
+    scale: 1.2;
+  }
+
+  .rating-readonly .symbols {
+    cursor: default;
+  }
+
+  :host([disabled]) .symbol-hover,
+  .rating-readonly .symbol-hover {
+    scale: none;
+  }
+
+  :host([disabled]) {
+    opacity: 0.5;
+  }
+
+  :host([disabled]) .symbols {
+    cursor: not-allowed;
+  }
+
+  /* Forced colors mode */
+  @media (forced-colors: active) {
+    .symbol-active {
+      color: SelectedItem;
+    }
+  }
+`;
+
+export {
+  rating_styles_default
+};

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

@@ -0,0 +1,200 @@
+/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  i
+} from "./chunk.G7UCSRIQ.js";
+
+// src/components/otp-input/otp-input.styles.ts
+var otp_input_styles_default = i`
+  :host(:focus) {
+    outline: none;
+  }
+
+  /* Segments container */
+  .segments {
+    position: relative;
+    /* Codes read left-to-right regardless of locale — keep segment order and caret movement LTR
+       even when the surrounding page is RTL. */
+    direction: ltr;
+    display: inline-flex;
+    align-items: center;
+    align-self: start;
+    gap: var(--segment-gap, var(--cs-space-xs));
+    cursor: text;
+    /* Never grow past the host's available width — long values or large segment sizes scroll
+       horizontally instead of overflowing the page. */
+    max-width: 100%;
+    overflow-x: auto;
+    scrollbar-width: none;
+    /* Setting overflow-x forces overflow-y to also compute to non-visible, which would otherwise
+       clip the focus ring's bleed around the active segment — above/below for any segment, and
+       left/right for the first/last segment specifically. Reserve room for it with padding, then
+       cancel the layout impact with an equal negative margin on both axes. */
+    padding: calc(var(--cs-focus-ring-offset) + var(--cs-focus-ring-width));
+    margin: calc(-1 * (var(--cs-focus-ring-offset) + var(--cs-focus-ring-width)));
+  }
+
+  .segments::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  :host(:state(disabled)) .segments {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  :host(:state(readonly)) .segments {
+    cursor: default;
+  }
+
+  /* Focus ring on the active segment, and on every segment in a multi-character selection */
+  .segments:focus-within .segment--active,
+  .segments:focus-within .segment--selected {
+    outline-color: var(--cs-color-focus);
+  }
+
+  /* Readonly has no per-segment active/selected state (see render()), so every segment rings
+     at once to show the control as a whole has focus. */
+  :host(:state(readonly)) .segments:focus-within .segment {
+    outline-color: var(--cs-color-focus);
+  }
+
+  /* Hidden real input — off-screen but focusable.
+     Chromium mishandles typing over a full selection (drops the inserted character) when a
+     text input has zero layout size, so this stays a non-zero 1x1px box instead of 0x0. */
+  .hidden-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    overflow: hidden;
+    pointer-events: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  /* Individual visual segment */
+  .segment {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--segment-size, 2.5em);
+    height: var(--segment-size, 2.5em);
+    border-radius: var(--segment-border-radius, var(--cs-form-control-border-radius));
+    font-size: 1em;
+    font-family: inherit;
+    font-variant-numeric: tabular-nums;
+    position: relative;
+    user-select: none;
+    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);
+  }
+
+  /* Blinking caret in the active segment */
+  .caret {
+    position: absolute;
+    width: 1.5px;
+    height: 60%;
+    background-color: currentColor;
+    animation: cs-otp-caret-blink 1s step-end infinite;
+  }
+
+  @keyframes cs-otp-caret-blink {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
+    }
+  }
+
+  /* Literal separator character between segment groups */
+  .segment-literal {
+    display: inline-block;
+    flex-shrink: 0;
+    color: var(--cs-color-text-quiet);
+    white-space: pre;
+    user-select: none;
+  }
+
+  /* Appearance: outlined (default) */
+  :host(:not([appearance='filled'], [appearance='filled-outlined'], [appearance='contained'])) .segment {
+    background-color: var(--cs-form-control-background-color);
+    border: var(--cs-form-control-border-width) var(--cs-form-control-border-style) var(--cs-form-control-border-color);
+  }
+
+  /* Appearance: filled */
+  :host([appearance='filled']) .segment {
+    background-color: var(--cs-color-neutral-fill-quiet);
+    border: var(--cs-form-control-border-width) var(--cs-form-control-border-style) transparent;
+  }
+
+  /* Appearance: filled-outlined */
+  :host([appearance='filled-outlined']) .segment {
+    background-color: var(--cs-color-neutral-fill-quiet);
+    border: var(--cs-form-control-border-width) var(--cs-form-control-border-style) var(--cs-form-control-border-color);
+  }
+
+  /* Appearance: contained */
+  :host([appearance='contained']) .segments {
+    gap: 0;
+    border: var(--cs-form-control-border-width) var(--cs-form-control-border-style) var(--cs-form-control-border-color);
+    border-radius: var(--segment-border-radius, var(--cs-form-control-border-radius));
+    background-color: var(--cs-form-control-background-color);
+    overflow: hidden;
+    /* The focus ring is drawn inward here (see outline-offset below), so there's no outward bleed
+       to reserve room for. .segments is also the visible bordered box in this appearance, so the
+       padding/negative-margin bleed trick from the base rule would visibly shift and inflate it. */
+    padding: 0;
+    margin: 0;
+  }
+
+  :host([appearance='contained']) .segment {
+    border: none;
+    border-radius: 0;
+    /* Contained segments sit flush with zero gap and have no border of their own, so a ring drawn
+       outside the segment edge (the default, positive offset) bleeds into the neighboring segment.
+       Draw it inward instead so it stays within this segment's own box. */
+    outline-offset: calc(-1 * var(--cs-focus-ring-width));
+  }
+
+  /* Dividers between contained segments */
+  :host([appearance='contained']) .segment + .segment,
+  :host([appearance='contained']) .segment-literal + .segment {
+    border-left: var(--cs-form-control-border-width) var(--cs-form-control-border-style)
+      var(--cs-form-control-border-color);
+  }
+
+  /* ── Active segment (where next char will go), and every segment in a multi-character
+     selection (e.g. from Cmd/Ctrl+A) — same border + focus-ring treatment for both.
+     :host(...) wrapper matches the specificity of the appearance rules above so this
+     border-color isn't silently lost to the cascade. ── */
+  :host(:not(:state(readonly))) .segment--active,
+  :host(:not(:state(readonly))) .segment--selected {
+    border-color: var(--cs-color-focus);
+  }
+
+  /* Masked filled character, and the empty-segment hint shown when with-mask is set, both draw
+     --mask-char via a pseudo-element instead of real text, so a masked value never touches the
+     DOM as plain text (nothing to find via view-source or copy). */
+  .segment--masked::before,
+  .segment--mask-hint::before {
+    content: var(--mask-char, '•');
+  }
+
+  .segment--mask-hint::before {
+    opacity: 0.35;
+  }
+`;
+
+export {
+  otp_input_styles_default
+};

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

@@ -0,0 +1,20 @@
+/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/internal/active-elements.ts
+function* activeElements(activeElement = document.activeElement) {
+  if (activeElement === null || activeElement === void 0) {
+    return;
+  }
+  yield activeElement;
+  if ("shadowRoot" in activeElement && activeElement.shadowRoot && activeElement.shadowRoot.mode !== "closed") {
+    yield* activeElements(activeElement.shadowRoot.activeElement);
+  }
+}
+function getDeepestActiveElement() {
+  return [...activeElements()].pop();
+}
+
+export {
+  activeElements,
+  getDeepestActiveElement
+};

package/dist/bundled/chunks/chunk.V5YHNJMC.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 {
+  CsRadioGroup
+} from "./chunk.NMCMWIXB.js";
+import {
+  __toESM
+} from "./chunk.WA5AGEMP.js";
+
+// src/react/radio-group/index.ts
+var React = __toESM(require_react(), 1);
+var tagName = "cs-radio-group";
+var reactWrapper = o({
+  tagName,
+  elementClass: CsRadioGroup,
+  react: React,
+  events: {
+    onCsInvalid: "cs-invalid"
+  },
+  displayName: "CsRadioGroup"
+});
+var radio_group_default = reactWrapper;
+
+export {
+  radio_group_default
+};

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

@@ -0,0 +1,83 @@
+/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  getBasePath
+} from "./chunk.AF4NWEDF.js";
+
+// src/utilities/autoloader.ts
+var observer = new MutationObserver((mutations) => {
+  for (const { addedNodes } of mutations) {
+    for (const node of addedNodes) {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        discover(node);
+      }
+    }
+  }
+});
+function startLoader() {
+  discover(document);
+  observer.observe(document.documentElement, { subtree: true, childList: true });
+}
+function stopLoader() {
+  observer.disconnect();
+}
+async function discover(root) {
+  const rootTagName = root instanceof Element ? root.tagName.toLowerCase() : "";
+  const rootIsCornerstoneComponent = rootTagName.startsWith("cs-");
+  const tags = [...root.querySelectorAll(":not(:defined)")].map((el) => el.tagName.toLowerCase()).filter((tag) => tag.startsWith("cs-"));
+  if (rootIsCornerstoneComponent && !customElements.get(rootTagName)) {
+    tags.push(rootTagName);
+  }
+  const preloadSelectors = root.querySelectorAll("[data-cs-preload]");
+  const preloadRoots = root instanceof Element && root.hasAttribute("data-cs-preload") ? [root, ...preloadSelectors] : preloadSelectors;
+  for (const el of preloadRoots) {
+    tags.push(
+      ...el.getAttribute("data-cs-preload").split(/\s+/).filter((tag) => tag.startsWith("cs-"))
+    );
+  }
+  const tagsToRegister = [...new Set(tags)];
+  const imports = await Promise.allSettled(tagsToRegister.map((tagName) => register(tagName)));
+  for (const imp of imports) {
+    if (imp.status === "rejected") {
+      console.error(imp.reason);
+    }
+  }
+  await new Promise(requestAnimationFrame);
+  root.dispatchEvent(
+    new CustomEvent("cs-discovery-complete", {
+      bubbles: false,
+      cancelable: false,
+      composed: true
+    })
+  );
+}
+function register(tagName) {
+  if (customElements.get(tagName)) {
+    return Promise.resolve();
+  }
+  const tagWithoutPrefix = tagName.replace(/^cs-/i, "");
+  const path = getBasePath(`components/${tagWithoutPrefix}/${tagWithoutPrefix}.js`);
+  return new Promise((resolve, reject) => {
+    import(path).then(() => resolve()).catch(() => reject(new Error(`Unable to autoload <${tagName}> from ${path}`)));
+  });
+}
+var _timeout = 2e3;
+function preventTurboFouce(timeout = 2e3) {
+  _timeout = timeout;
+  document.addEventListener("turbo:before-render", handleRender);
+}
+async function handleRender(event) {
+  const newBody = event.detail.newBody;
+  event.preventDefault();
+  try {
+    await Promise.race([discover(newBody), new Promise((resolve) => setTimeout(resolve, _timeout))]);
+  } finally {
+    event.detail.resume();
+  }
+}
+
+export {
+  startLoader,
+  stopLoader,
+  discover,
+  preventTurboFouce
+};

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

@@ -0,0 +1,33 @@
+/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  carousel_item_styles_default
+} from "./chunk.EVM2NXRL.js";
+import {
+  CornerstoneElement,
+  customElement
+} from "./chunk.AWCR23QG.js";
+import {
+  b
+} from "./chunk.FQUMEV4X.js";
+import {
+  __decorateClass
+} from "./chunk.WA5AGEMP.js";
+
+// src/components/carousel-item/carousel-item.ts
+var CsCarouselItem = class extends CornerstoneElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "group");
+  }
+  render() {
+    return b` <slot></slot> `;
+  }
+};
+CsCarouselItem.css = carousel_item_styles_default;
+CsCarouselItem = __decorateClass([
+  customElement("cs-carousel-item")
+], CsCarouselItem);
+
+export {
+  CsCarouselItem
+};

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

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

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

@@ -0,0 +1,15 @@
+/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  i
+} from "./chunk.G7UCSRIQ.js";
+
+// src/components/mutation-observer/mutation-observer.styles.ts
+var mutation_observer_styles_default = i`
+  :host {
+    display: contents;
+  }
+`;
+
+export {
+  mutation_observer_styles_default
+};

package/dist/bundled/chunks/chunk.VHK5UXJJ.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 {
+  CsKnownDate
+} from "./chunk.FIUKN4BH.js";
+import {
+  __toESM
+} from "./chunk.WA5AGEMP.js";
+
+// src/react/known-date/index.ts
+var React = __toESM(require_react(), 1);
+var tagName = "cs-known-date";
+var reactWrapper = o({
+  tagName,
+  elementClass: CsKnownDate,
+  react: React,
+  events: {
+    onCsInvalid: "cs-invalid"
+  },
+  displayName: "CsKnownDate"
+});
+var known_date_default = reactWrapper;
+
+export {
+  known_date_default
+};

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

@@ -0,0 +1,27 @@
+/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  o,
+  require_react
+} from "./chunk.O6TFOOQT.js";
+import {
+  CsFormatNumber
+} from "./chunk.D334HMIY.js";
+import {
+  __toESM
+} from "./chunk.WA5AGEMP.js";
+
+// src/react/format-number/index.ts
+var React = __toESM(require_react(), 1);
+var tagName = "cs-format-number";
+var reactWrapper = o({
+  tagName,
+  elementClass: CsFormatNumber,
+  react: React,
+  events: {},
+  displayName: "CsFormatNumber"
+});
+var format_number_default = reactWrapper;
+
+export {
+  format_number_default
+};

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

@@ -0,0 +1,114 @@
+/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  i
+} from "./chunk.G7UCSRIQ.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.VMZVKFXT.js

@@ -0,0 +1,32 @@
+/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  o,
+  require_react
+} from "./chunk.O6TFOOQT.js";
+import {
+  CsDialog
+} from "./chunk.EWCQL3X4.js";
+import {
+  __toESM
+} from "./chunk.WA5AGEMP.js";
+
+// src/react/dialog/index.ts
+var React = __toESM(require_react(), 1);
+var tagName = "cs-dialog";
+var reactWrapper = o({
+  tagName,
+  elementClass: CsDialog,
+  react: React,
+  events: {
+    onCsShow: "cs-show",
+    onCsAfterShow: "cs-after-show",
+    onCsHide: "cs-hide",
+    onCsAfterHide: "cs-after-hide"
+  },
+  displayName: "CsDialog"
+});
+var dialog_default = reactWrapper;
+
+export {
+  dialog_default
+};