@cruglobal/cornerstone-components 0.6.2 → 0.7.0

package/dist/bundled/chunks/chunk.54B43UXZ.js

@@ -0,0 +1,406 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  n as n2
+} from "./chunk.PL22YZBB.js";
+import {
+  o as o2
+} from "./chunk.ILKSZZRX.js";
+import {
+  page_mobile_styles_default
+} from "./chunk.IPJKIK7K.js";
+import {
+  page_styles_default
+} from "./chunk.KNCYOUCL.js";
+import {
+  visually_hidden_styles_default
+} from "./chunk.VBNHA2WB.js";
+import {
+  l
+} from "./chunk.HEKJPFBD.js";
+import {
+  CornerstoneElement,
+  customElement,
+  e,
+  n
+} from "./chunk.6GJWBDJU.js";
+import {
+  o
+} from "./chunk.4XDNAFUH.js";
+import {
+  b
+} from "./chunk.IPM67WBE.js";
+import {
+  __decorateClass
+} from "./chunk.4QJR2RKX.js";
+
+// src/components/page/page.ts
+function toPx(value, element = document.documentElement) {
+  if (!Number.isNaN(Number(value))) {
+    return Number(value);
+  }
+  if (!window.CSS || !CSS.registerProperty) {
+    if (typeof value === "string" && value.endsWith("px")) {
+      return parseFloat(value);
+    }
+    return Number(value) || 0;
+  }
+  const resolver = "--cs-length-resolver";
+  if (!CSS.registerProperty.toString().includes(resolver)) {
+    try {
+      CSS.registerProperty({
+        name: resolver,
+        syntax: "<length>",
+        inherits: false,
+        initialValue: "0px"
+      });
+    } catch {
+    }
+  }
+  const previousValue = element.style.getPropertyValue(resolver);
+  element.style.setProperty(resolver, value);
+  const computedValue = getComputedStyle(element)?.getPropertyValue(resolver);
+  element.style.setProperty(resolver, previousValue);
+  if (computedValue?.endsWith("px")) {
+    return parseFloat(computedValue);
+  }
+  return Number(computedValue) || 0;
+}
+function toLength(px) {
+  return Number.isNaN(Number(px)) ? px : `${px}px`;
+}
+var CsPage = class extends CornerstoneElement {
+  constructor() {
+    super();
+    this.measuredHeights = /* @__PURE__ */ new Map();
+    // SSR guard: ResizeObserver is not available during server-side rendering
+    this.headerResizeObserver = !o ? this.slotResizeObserver("header") : null;
+    this.subheaderResizeObserver = !o ? this.slotResizeObserver("subheader") : null;
+    this.bannerResizeObserver = !o ? this.slotResizeObserver("banner") : null;
+    this.footerResizeObserver = !o ? this.slotResizeObserver("footer") : null;
+    // A DOM morph resets the style attribute; put the measured heights back.
+    // SSR guard: MutationObserver is not available during server-side rendering
+    this.styleObserver = !o ? new MutationObserver(() => this.restoreMeasuredHeights()) : null;
+    this.handleNavigationToggle = (e2) => {
+      if (this.view === "desktop") {
+        this.hideNavigation();
+        return;
+      }
+      const path = e2.composedPath();
+      const navigationToggleSlot = this.navigationToggleSlot;
+      if (path.find((el) => {
+        return el.hasAttribute?.("data-toggle-nav") || el.assignedSlot === navigationToggleSlot || el === navigationToggleSlot;
+      })) {
+        e2.preventDefault();
+        this.toggleNavigation();
+      }
+    };
+    this.view = "desktop";
+    this.navOpen = false;
+    this.mobileBreakpoint = "768px";
+    this.navigationPlacement = "start";
+    this.disableNavigationToggle = false;
+    this.pageResizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver((entries) => {
+      requestAnimationFrame(() => {
+        for (const entry of entries) {
+          if (entry.contentBoxSize) {
+            const contentBoxSize = entry.borderBoxSize[0];
+            const pageWidth = contentBoxSize.inlineSize;
+            const oldView = this.view;
+            if (pageWidth >= toPx(this.mobileBreakpoint)) {
+              this.view = "desktop";
+            } else {
+              this.view = "mobile";
+            }
+            this.requestUpdate("view", oldView);
+          }
+        }
+      });
+    }) : null;
+    this.updateNavigationToggleState = (e2) => {
+      if (e2) {
+        const slotName = e2.target.name;
+        if (!["navigation", "navigation-header", "navigation-footer"].includes(slotName)) {
+          return;
+        }
+      }
+      const hasCustomToggle = Boolean(this.querySelector(":not([slot='navigation-toggle']) [data-toggle-nav]"));
+      const hasNavigationContent = Boolean(this.querySelector('[slot="navigation"]')) || Boolean(this.querySelector('[slot="navigation-header"]')) || Boolean(this.querySelector('[slot="navigation-footer"]'));
+      this.disableNavigationToggle = hasCustomToggle || !hasNavigationContent;
+    };
+    if (!o) {
+      this.addEventListener("click", this.handleNavigationToggle);
+    }
+  }
+  slotResizeObserver(slot) {
+    return new ResizeObserver((entries) => {
+      requestAnimationFrame(() => {
+        for (const entry of entries) {
+          if (entry.contentBoxSize) {
+            const contentBoxSize = entry.borderBoxSize[0];
+            const property = `--${slot}-height`;
+            const height = `${Math.round(contentBoxSize.blockSize)}px`;
+            this.measuredHeights.set(property, height);
+            this.style.setProperty(property, height);
+          }
+        }
+      });
+    });
+  }
+  // Compare first: its own writes come back as style mutations.
+  restoreMeasuredHeights() {
+    for (const [property, height] of this.measuredHeights) {
+      if (this.style.getPropertyValue(property) !== height) {
+        this.style.setProperty(property, height);
+      }
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("view")) {
+      this.hideNavigation();
+    }
+    super.updated(changedProperties);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!o) {
+      this.styleObserver?.observe(this, { attributes: true, attributeFilter: ["style"] });
+      setTimeout(() => {
+        requestAnimationFrame(() => {
+          this.pageResizeObserver?.observe(this);
+          this.headerResizeObserver?.observe(this.header);
+          this.subheaderResizeObserver?.observe(this.subheader);
+          this.bannerResizeObserver?.observe(this.banner);
+          this.footerResizeObserver?.observe(this.footer);
+        });
+      });
+    }
+  }
+  /**
+   * https://stackoverflow.com/a/26831113
+   * This prevents awkward gaps when scrolling the page and the aside / menu don't "fill" the gaps.
+   */
+  visiblePixelsInViewport(element) {
+    if (!element) {
+      return null;
+    }
+    const elementHeight = element.clientHeight;
+    const windowHeight = window.innerHeight;
+    const rect = element.getBoundingClientRect?.();
+    if (!rect) {
+      return null;
+    }
+    const { top, bottom } = rect;
+    return Math.max(0, top > 0 ? Math.min(elementHeight, windowHeight - top) : Math.min(bottom, windowHeight));
+  }
+  firstUpdated(changedProperties) {
+    if (!document.getElementById("main-content")) {
+      const div = document.createElement("div");
+      div.id = "main-content";
+      div.slot = "skip-to-content-target";
+      this.prepend(div);
+    }
+    this.shadowRoot.addEventListener("slotchange", this.updateNavigationToggleState);
+    this.updateNavigationToggleState();
+    super.firstUpdated(changedProperties);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.pageResizeObserver?.unobserve(this);
+    this.headerResizeObserver?.unobserve(this.header);
+    this.subheaderResizeObserver?.unobserve(this.subheader);
+    this.footerResizeObserver?.unobserve(this.footer);
+    this.bannerResizeObserver?.unobserve(this.banner);
+    this.styleObserver?.disconnect();
+  }
+  /**
+   * Shows the mobile navigation drawer
+   */
+  showNavigation() {
+    this.navOpen = true;
+  }
+  /**
+   * Hides the mobile navigation drawer
+   */
+  hideNavigation() {
+    this.navOpen = false;
+  }
+  /**
+   * Toggles the mobile navigation drawer
+   */
+  toggleNavigation() {
+    this.navOpen = !this.navOpen;
+  }
+  render() {
+    return b`
+      <a href="#main-content" part="skip-to-content" class="cs-visually-hidden">
+        <slot name="skip-to-content">Skip to content</slot>
+      </a>
+
+      <!-- unsafeHTML needed for SSR until this is solved: https://github.com/lit/lit/issues/4696 -->
+      ${o2(`
+        <style id="mobile-styles">
+          ${page_mobile_styles_default(toLength(this.mobileBreakpoint))}
+        </style>
+      `)}
+
+      <div class="base" part="page">
+        <div class="banner" part="banner">
+          <slot name="banner"></slot>
+        </div>
+        <div class="header" part="header">
+          <slot name="navigation-toggle">
+            <cs-button part="navigation-toggle" size="s" appearance="plain" variant="neutral">
+              <slot name="navigation-toggle-icon">
+                <cs-icon name="menu" part="navigation-toggle-icon" label="Toggle navigation drawer"></cs-icon>
+              </slot>
+            </cs-button>
+          </slot>
+          <slot name="header"></slot>
+        </div>
+        <div class="subheader" part="subheader">
+          <slot name="subheader"></slot>
+        </div>
+        <div class="body" part="body">
+          <div class="menu" part="menu">
+            <slot name="menu">
+              <nav name="navigation" class="navigation" part="navigation navigation-desktop">
+                <!-- Add fallback divs so that CSS grid works properly. -->
+                <slot name="desktop-navigation-header">
+                  ${n2(
+      this.view === "desktop",
+      () => b`<slot name="navigation-header"><div></div></slot>`,
+      () => b`<div></div>`
+    )}
+                </slot>
+                <slot name="desktop-navigation">
+                  ${n2(
+      this.view === "desktop",
+      () => b`<slot name="navigation"><div></div></slot>`,
+      () => b`<div></div>`
+    )}
+                </slot>
+                <slot name="desktop-navigation-footer">
+                  ${n2(
+      this.view === "desktop",
+      () => b`<slot name="navigation-footer"><div></div></slot>`,
+      () => b`<div></div>`
+    )}
+                </slot>
+              </nav>
+            </slot>
+          </div>
+          <div class="main" part="main">
+            <div class="main-header" part="main-header">
+              <slot name="main-header"></slot>
+            </div>
+            <div class="main-content" part="main-content">
+              <slot name="skip-to-content-target"></slot>
+              <slot></slot>
+            </div>
+            <div class="main-footer" part="main-footer">
+              <slot name="main-footer"></slot>
+            </div>
+          </div>
+          <div class="aside" part="aside">
+            <slot name="aside"></slot>
+          </div>
+        </div>
+        <div class="footer" part="footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+      <cs-drawer
+        part="drawer"
+        placement=${this.navigationPlacement}
+        light-dismiss
+        ?open=${l(this.navOpen)}
+        @cs-after-show=${() => this.navOpen = this.navigationDrawer.open}
+        @cs-after-hide=${() => this.navOpen = this.navigationDrawer.open}
+        exportparts="
+          dialog:drawer__dialog,
+          header:drawer__header,
+          header-actions:drawer__header-actions,
+          title:drawer__title,
+          close-button:drawer__close-button,
+          close-button__button:drawer__close-button__button,
+          body:drawer__body,
+          footer:drawer__footer
+        "
+        class="navigation-drawer"
+      >
+        <slot slot="label" part="navigation-header" name="mobile-navigation-header">
+          ${n2(
+      this.view === "mobile",
+      () => b`<slot name="navigation-header"><div></div></slot>`,
+      () => b`<div></div>`
+    )}
+        </slot>
+        <slot name="mobile-navigation">
+          ${n2(
+      this.view === "mobile",
+      () => b`<slot name="navigation"><div></div></slot>`,
+      () => b`<div></div>`
+    )}
+        </slot>
+
+        <slot slot="footer" name="mobile-navigation-footer">
+          ${n2(
+      this.view === "mobile",
+      () => b`<slot part="navigation-footer" name="navigation-footer"><div></div></slot>`,
+      () => b`<div></div>`
+    )}
+        </slot>
+      </cs-drawer>
+    `;
+  }
+};
+CsPage.css = [visually_hidden_styles_default, page_styles_default];
+__decorateClass([
+  e("[part~='header']")
+], CsPage.prototype, "header", 2);
+__decorateClass([
+  e("[part~='menu']")
+], CsPage.prototype, "menu", 2);
+__decorateClass([
+  e("[part~='main']")
+], CsPage.prototype, "main", 2);
+__decorateClass([
+  e("[part~='aside']")
+], CsPage.prototype, "aside", 2);
+__decorateClass([
+  e("[part~='subheader']")
+], CsPage.prototype, "subheader", 2);
+__decorateClass([
+  e("[part~='footer']")
+], CsPage.prototype, "footer", 2);
+__decorateClass([
+  e("[part~='banner']")
+], CsPage.prototype, "banner", 2);
+__decorateClass([
+  e("[part~='drawer']")
+], CsPage.prototype, "navigationDrawer", 2);
+__decorateClass([
+  e("slot[name~='navigation-toggle']")
+], CsPage.prototype, "navigationToggleSlot", 2);
+__decorateClass([
+  n({ attribute: "view", reflect: true })
+], CsPage.prototype, "view", 2);
+__decorateClass([
+  n({ attribute: "nav-open", reflect: true, type: Boolean })
+], CsPage.prototype, "navOpen", 2);
+__decorateClass([
+  n({ attribute: "mobile-breakpoint", type: String })
+], CsPage.prototype, "mobileBreakpoint", 2);
+__decorateClass([
+  n({ attribute: "navigation-placement", reflect: true })
+], CsPage.prototype, "navigationPlacement", 2);
+__decorateClass([
+  n({ attribute: "disable-navigation-toggle", reflect: true, type: Boolean })
+], CsPage.prototype, "disableNavigationToggle", 2);
+CsPage = __decorateClass([
+  customElement("cs-page")
+], CsPage);
+
+export {
+  CsPage
+};

package/dist/bundled/chunks/chunk.54ITC4F6.js

@@ -0,0 +1,27 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  o,
+  require_react
+} from "./chunk.VQJXWKQY.js";
+import {
+  CsOption
+} from "./chunk.4SXNNBBA.js";
+import {
+  __toESM
+} from "./chunk.4QJR2RKX.js";
+
+// src/react/option/index.ts
+var React = __toESM(require_react(), 1);
+var tagName = "cs-option";
+var reactWrapper = o({
+  tagName,
+  elementClass: CsOption,
+  react: React,
+  events: {},
+  displayName: "CsOption"
+});
+var option_default = reactWrapper;
+
+export {
+  option_default
+};

package/dist/bundled/chunks/chunk.562I7KYN.js

@@ -0,0 +1,200 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  i
+} from "./chunk.4XDNAFUH.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
+};