@cruglobal/cornerstone-components 0.6.2 → 0.7.1

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

@@ -0,0 +1,25 @@
+/*! Cornerstone Components 0.7.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsAnimatedImage
+} from "./chunk.7TPEHLMB.js";
+
+// src/react/animated-image/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cs-animated-image";
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CsAnimatedImage,
+  react: React,
+  events: {
+    onCsLoad: "cs-load",
+    onCsError: "cs-error"
+  },
+  displayName: "CsAnimatedImage"
+});
+var animated_image_default = reactWrapper;
+
+export {
+  animated_image_default
+};

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

@@ -0,0 +1,249 @@
+/*! Cornerstone Components 0.7.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  switch_styles_default
+} from "./chunk.REXRHUGM.js";
+import {
+  form_control_styles_default
+} from "./chunk.4UFVJTAM.js";
+import {
+  HasSlotController
+} from "./chunk.RM3ZGTE7.js";
+import {
+  MirrorValidator
+} from "./chunk.QBEGBX4G.js";
+import {
+  CornerstoneFormAssociatedElement
+} from "./chunk.5UZ6VI72.js";
+import {
+  size_styles_default
+} from "./chunk.2X2XTFP3.js";
+import {
+  watch
+} from "./chunk.JJPQKHLN.js";
+import {
+  customElement
+} from "./chunk.QW6Q57QJ.js";
+import {
+  LocalizeController
+} from "./chunk.SEALP4QC.js";
+import {
+  __decorateClass
+} from "./chunk.PCHA363X.js";
+
+// src/components/switch/switch.ts
+import { html } from "lit";
+import { property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
+var CsSwitch = class extends CornerstoneFormAssociatedElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "hint");
+    this.localize = new LocalizeController(this);
+    this.title = "";
+    this.name = null;
+    this._value = this.getAttribute("value") ?? null;
+    this.size = "m";
+    this.disabled = false;
+    this._checked = null;
+    this.defaultChecked = this.hasAttribute("checked");
+    this.required = false;
+    this.hint = "";
+    this.ssrHint = false;
+  }
+  static get validators() {
+    return [...super.validators, MirrorValidator()];
+  }
+  /** The value of the switch, submitted as a name/value pair with form data. */
+  get value() {
+    return this._value ?? "on";
+  }
+  set value(val) {
+    this._value = val;
+  }
+  get checked() {
+    if (this.valueHasChanged) {
+      return Boolean(this._checked);
+    }
+    return this._checked ?? this.defaultChecked;
+  }
+  set checked(val) {
+    this._checked = Boolean(val);
+    this.valueHasChanged = true;
+  }
+  handleClick() {
+    this.hasInteracted = true;
+    this.checked = !this.checked;
+    this.updateComplete.then(() => {
+      this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+    });
+  }
+  handleKeyDown(event) {
+    const isRtl = this.localize.dir() === "rtl";
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      this.checked = isRtl;
+      this.updateComplete.then(() => {
+        this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+        this.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
+      });
+    }
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      this.checked = !isRtl;
+      this.updateComplete.then(() => {
+        this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+        this.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
+      });
+    }
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("value") || changedProperties.has("checked") || changedProperties.has("defaultChecked") || changedProperties.has("disabled")) {
+      this.handleValueOrCheckedChange();
+    }
+  }
+  handleValueOrCheckedChange() {
+    if (this.didSSR && !this.hasUpdated) {
+      this.updateComplete.then(() => {
+        this.handleValueOrCheckedChange();
+      });
+      return;
+    }
+    this.setValue(this.checked ? this.value : null, this._value);
+    this.updateValidity();
+  }
+  handleStateChange() {
+    if (this.hasUpdated) {
+      this.input.checked = this.checked;
+    }
+    this.customStates.set("checked", this.checked);
+    this.updateValidity();
+  }
+  handleDisabledChange() {
+    this.updateValidity();
+  }
+  /** Simulates a click on the switch. */
+  click() {
+    this.input.click();
+  }
+  /** Sets focus on the switch. */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the switch. */
+  blur() {
+    this.input.blur();
+  }
+  setValue(value, stateValue) {
+    if (!this.checked) {
+      this.internals.setFormValue(null, null);
+      return;
+    }
+    this.internals.setFormValue(value ?? "on", stateValue);
+  }
+  formResetCallback() {
+    this._checked = null;
+    super.formResetCallback();
+    this.handleValueOrCheckedChange();
+  }
+  render() {
+    const hasHintSlot = this.hasSlotController.test("hint", "ssrHint");
+    const hasHint = this.hint ? true : !!hasHintSlot;
+    const checkedAttribute = this.didSSR && !this.hasUpdated ? this.checked : this.defaultChecked;
+    const checkedProperty = this.didSSR && !this.hasUpdated ? null : live(this.checked);
+    return html`
+      <label
+        part="switch"
+        class=${classMap({
+      checked: this.checked,
+      disabled: this.disabled
+    })}
+      >
+        <input
+          class="input"
+          type="checkbox"
+          title=${this.title}
+          name=${ifDefined(this.name)}
+          value=${ifDefined(this.value)}
+          .checked=${ifDefined(checkedProperty)}
+          ?checked=${checkedAttribute}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          role="switch"
+          aria-checked=${this.checked ? "true" : "false"}
+          aria-describedby="hint"
+          @click=${this.handleClick}
+          @keydown=${this.handleKeyDown}
+        />
+
+        <span part="control" class="switch">
+          <span part="thumb" class="thumb"></span>
+        </span>
+
+        <slot part="label" class="label"></slot>
+      </label>
+
+      <slot
+        id="hint"
+        name="hint"
+        part="hint"
+        class=${classMap({
+      "has-slotted": hasHint
+    })}
+        aria-hidden=${hasHint ? "false" : "true"}
+        >${this.hint}</slot
+      >
+    `;
+  }
+};
+CsSwitch.shadowRootOptions = { ...CornerstoneFormAssociatedElement.shadowRootOptions, delegatesFocus: true };
+CsSwitch.css = [form_control_styles_default, size_styles_default, switch_styles_default];
+__decorateClass([
+  query('input[type="checkbox"]')
+], CsSwitch.prototype, "input", 2);
+__decorateClass([
+  property()
+], CsSwitch.prototype, "title", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsSwitch.prototype, "name", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsSwitch.prototype, "value", 1);
+__decorateClass([
+  property({ reflect: true })
+], CsSwitch.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean })
+], CsSwitch.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: false })
+], CsSwitch.prototype, "checked", 1);
+__decorateClass([
+  property({ type: Boolean, attribute: "checked", reflect: true })
+], CsSwitch.prototype, "defaultChecked", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CsSwitch.prototype, "required", 2);
+__decorateClass([
+  property({ attribute: "hint" })
+], CsSwitch.prototype, "hint", 2);
+__decorateClass([
+  property({ attribute: "ssr-hint", type: Boolean })
+], CsSwitch.prototype, "ssrHint", 2);
+__decorateClass([
+  watch(["checked", "defaultChecked"])
+], CsSwitch.prototype, "handleStateChange", 1);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], CsSwitch.prototype, "handleDisabledChange", 1);
+CsSwitch = __decorateClass([
+  customElement("cs-switch")
+], CsSwitch);
+CsSwitch.disableWarning?.("change-in-update");
+
+export {
+  CsSwitch
+};

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

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

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

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

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

@@ -0,0 +1,26 @@
+/*! Cornerstone Components 0.7.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsOtpInput
+} from "./chunk.OL5LZJ3B.js";
+
+// src/react/otp-input/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cs-otp-input";
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CsOtpInput,
+  react: React,
+  events: {
+    onCsComplete: "cs-complete",
+    onCsClear: "cs-clear",
+    onCsInvalid: "cs-invalid"
+  },
+  displayName: "CsOtpInput"
+});
+var otp_input_default = reactWrapper;
+
+export {
+  otp_input_default
+};

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

@@ -0,0 +1,36 @@
+/*! Cornerstone Components 0.7.1 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/utilities/base-path.ts
+var basePath = "";
+var iconPath = "";
+function setBasePath(path) {
+  basePath = path;
+}
+function packageRoot() {
+  return new URL("../", import.meta.url).href.replace(/\/$/, "");
+}
+function getBasePath(subpath = "") {
+  if (!basePath) {
+    const el = document.querySelector("[data-cornerstone]");
+    const attribute = el?.getAttribute("data-cornerstone");
+    if (attribute) {
+      setBasePath(new URL(attribute, window.location.href).href.replace(/\/$/, ""));
+    } else {
+      setBasePath(packageRoot());
+    }
+  }
+  return basePath.replace(/\/$/, "") + (subpath ? `/${subpath.replace(/^\//, "")}` : ``);
+}
+function setIconPath(path) {
+  iconPath = path;
+}
+function getIconPath() {
+  return iconPath.replace(/\/$/, "");
+}
+
+export {
+  setBasePath,
+  getBasePath,
+  setIconPath,
+  getIconPath
+};

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

@@ -0,0 +1,20 @@
+/*! Cornerstone Components 0.7.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/unbundled/chunks/chunk.KHRASMMM.js

@@ -0,0 +1,164 @@
+/*! Cornerstone Components 0.7.1 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/components/known-date/known-date.styles.ts
+import { css } from "lit";
+var known_date_styles_default = css`
+  :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/unbundled/chunks/chunk.KLFTXSOZ.js

@@ -0,0 +1,89 @@
+/*! Cornerstone Components 0.7.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsResizeEvent
+} from "./chunk.BA5LVCQ5.js";
+import {
+  resize_observer_styles_default
+} from "./chunk.6F2T6TRN.js";
+import {
+  watch
+} from "./chunk.JJPQKHLN.js";
+import {
+  CornerstoneElement,
+  customElement
+} from "./chunk.QW6Q57QJ.js";
+import {
+  __decorateClass
+} from "./chunk.PCHA363X.js";
+
+// src/components/resize-observer/resize-observer.ts
+import { html, isServer } from "lit";
+import { property } from "lit/decorators.js";
+var CsResizeObserver = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.observedElements = [];
+    this.disabled = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!isServer) {
+      this.resizeObserver = new ResizeObserver((entries) => {
+        this.dispatchEvent(new CsResizeEvent({ entries }));
+      });
+      if (!this.disabled) {
+        this.updateComplete.then(() => {
+          this.startObserver();
+        });
+      }
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopObserver();
+  }
+  handleSlotChange() {
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+  startObserver() {
+    const slot = this.shadowRoot.querySelector("slot");
+    if (slot !== null) {
+      const elements = slot.assignedElements({ flatten: true });
+      this.observedElements.forEach((el) => this.resizeObserver.unobserve(el));
+      this.observedElements = [];
+      elements.forEach((el) => {
+        this.resizeObserver.observe(el);
+        this.observedElements.push(el);
+      });
+    }
+  }
+  stopObserver() {
+    this.resizeObserver.disconnect();
+  }
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.stopObserver();
+    } else {
+      this.startObserver();
+    }
+  }
+  render() {
+    return html` <slot @slotchange=${this.handleSlotChange}></slot> `;
+  }
+};
+CsResizeObserver.css = resize_observer_styles_default;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CsResizeObserver.prototype, "disabled", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], CsResizeObserver.prototype, "handleDisabledChange", 1);
+CsResizeObserver = __decorateClass([
+  customElement("cs-resize-observer")
+], CsResizeObserver);
+
+export {
+  CsResizeObserver
+};