@cruglobal/cornerstone-components 0.1.1 → 0.1.2

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

@@ -1,495 +0,0 @@
-/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  localeFieldOrder
-} from "./chunk.B4X7IPX4.js";
-import {
-  PartialDateValidator
-} from "./chunk.6BGUWLYG.js";
-import {
-  EMPTY_PARTS,
-  isoToParts,
-  partsToIso
-} from "./chunk.SLJ5IMKZ.js";
-import {
-  known_date_styles_default
-} from "./chunk.JFSCZSIW.js";
-import {
-  RequiredValidator
-} from "./chunk.W4KQ7B4E.js";
-import {
-  form_control_styles_default
-} from "./chunk.BU4IJNGS.js";
-import {
-  HasSlotController
-} from "./chunk.YOR3JGWL.js";
-import {
-  uniqueId
-} from "./chunk.WO5YOGFL.js";
-import {
-  MirrorValidator
-} from "./chunk.6RXPEKZ4.js";
-import {
-  CornerstoneFormAssociatedElement
-} from "./chunk.SEZADOQH.js";
-import {
-  size_styles_default
-} from "./chunk.XZ27OU5O.js";
-import {
-  customElement
-} from "./chunk.LIUE7EB7.js";
-import {
-  LocalizeController
-} from "./chunk.P4N57CDG.js";
-import {
-  __decorateClass
-} from "./chunk.2VAPLWBF.js";
-
-// src/components/known-date/known-date.ts
-import { html, isServer } from "lit";
-import { property, query, state } 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 generateId = () => uniqueId("cs-known-date-");
-var CsKnownDate = class extends CornerstoneFormAssociatedElement {
-  constructor() {
-    super(...arguments);
-    // Moving focus between the three internal fields shouldn't count as "leaving the group," so we key
-    // interaction off `input` alone - matching `<cs-date-input>` and `<cs-time-input>`.
-    this.assumeInteractionOn = ["input"];
-    this.localize = new LocalizeController(this);
-    this.hasSlotController = new HasSlotController(this, "hint", "label");
-    this.groupId = generateId();
-    this.hintId = `${this.groupId}-hint`;
-    /** Debounces duplicate `change` events when the value hasn't transitioned. */
-    this.lastEmittedValue = "";
-    this.pendingValue = null;
-    this.parts = { ...EMPTY_PARTS };
-    this.name = "";
-    this._value = "";
-    this.defaultValue = this.getAttribute("value") ?? "";
-    this.disabled = false;
-    this.required = false;
-    this.readonly = false;
-    this.size = "m";
-    this.appearance = "outlined";
-    this.pill = false;
-    this.label = "";
-    this.hint = "";
-    this.autocomplete = "";
-    this.min = "";
-    this.max = "";
-    this.locale = "";
-    this.ssrLabel = false;
-    this.ssrHint = false;
-    //
-    // Field handlers
-    //
-    this.handleFieldInput = (event) => {
-      if (this.readonly) {
-        return;
-      }
-      const target = event.currentTarget;
-      const field = target.dataset.field;
-      const max = field === "year" ? 4 : 2;
-      const sanitized = target.value.replace(/\D/g, "").slice(0, max);
-      if (sanitized !== target.value) {
-        target.value = sanitized;
-      }
-      this.parts = { ...this.parts, [field]: sanitized };
-      this.recomputeValue();
-      this.requestUpdate();
-    };
-  }
-  static get validators() {
-    return [
-      ...super.validators,
-      // Order matters: the first failing validator's message wins. `PartialDateValidator` comes first so a partial
-      // or out-of-range entry (day 32, Feb 30) reports "Enter a valid date" as `badInput`, rather than
-      // `RequiredValidator`'s "Please fill out this field" (the mirror is empty whenever the entry doesn't
-      // compose).
-      PartialDateValidator(),
-      RequiredValidator({
-        validationElement: () => Object.assign(document.createElement("input"), { required: true })
-      }),
-      // Mirrors the hidden native `<input type="date">` so its min/max constraints surface as
-      // rangeUnderflow/rangeOverflow validity.
-      MirrorValidator()
-    ];
-  }
-  /**
-   * The committed value as an ISO `YYYY-MM-DD` string. The setter also accepts a `Date` or `null`. Reading
-   * returns an empty string when the value is blank or any field is only partially filled.
-   */
-  get value() {
-    if (this.valueHasChanged) {
-      return this._value;
-    }
-    return this._value || this.defaultValue || "";
-  }
-  set value(val) {
-    const normalized = this.normalizeIncomingValue(val);
-    if (normalized === this._value) {
-      return;
-    }
-    const oldValue = this._value;
-    this._value = normalized;
-    this.valueHasChanged = true;
-    if (this.hasUpdated) {
-      this.syncPartsFromCanonical();
-    } else {
-      this.pendingValue = this._value;
-    }
-    this.requestUpdate("value", oldValue);
-  }
-  //
-  // Lifecycle
-  //
-  firstUpdated(changedProperties) {
-    super.firstUpdated(changedProperties);
-    if (this.pendingValue != null) {
-      this._value = this.pendingValue;
-      this.pendingValue = null;
-    } else if (!this._value && this.defaultValue) {
-      this._value = this.defaultValue;
-    }
-    this.syncPartsFromCanonical();
-    this.input = this.valueInput;
-    this.updateValidity();
-    this.lastEmittedValue = this._value;
-  }
-  updated(changed) {
-    super.updated(changed);
-    if (changed.has("value")) {
-      this.customStates.set("blank", !this._value);
-    }
-  }
-  //
-  // Public API
-  //
-  /** Focuses the first empty field, or the first field when all are filled. */
-  focus(options) {
-    const target = this.firstFocusableInput();
-    target?.focus(options);
-  }
-  /** Removes focus from the known date. */
-  blur() {
-    const active = this.shadowRoot?.activeElement;
-    active?.blur();
-  }
-  /** The committed value as a `Date`, or `null` when the value is empty/invalid. */
-  get valueAsDate() {
-    if (!this._value) {
-      return null;
-    }
-    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(this._value);
-    if (!match) {
-      return null;
-    }
-    return new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
-  }
-  /**
-   * Anchor native validation popups on a real visible input. The hidden mirror handles form data, but
-   * anchoring a popup on `display: none` content would render it at offset (0, 0).
-   */
-  get validationTarget() {
-    if (!this.shadowRoot) {
-      return void 0;
-    }
-    const inputs = Array.from(this.shadowRoot.querySelectorAll('input[part~="field-input"]'));
-    if (inputs.length === 0) {
-      return void 0;
-    }
-    const offending = this.firstInvalidField();
-    if (offending) {
-      const el = inputs.find((i) => i.dataset.field === offending);
-      if (el) {
-        return el;
-      }
-    }
-    return inputs[0];
-  }
-  //
-  // Form association
-  //
-  formResetCallback() {
-    this._value = this.defaultValue;
-    this.valueHasChanged = false;
-    this.syncPartsFromCanonical();
-    super.formResetCallback();
-    this.lastEmittedValue = this._value;
-    this.requestUpdate();
-  }
-  formStateRestoreCallback(state2) {
-    if (typeof state2 === "string") {
-      this.value = state2;
-    }
-    this.updateValidity();
-  }
-  //
-  // Internal helpers
-  //
-  get resolvedLocale() {
-    return this.locale || this.localize.lang() || "en";
-  }
-  fieldOrder() {
-    return localeFieldOrder(this.resolvedLocale);
-  }
-  normalizeIncomingValue(val) {
-    if (val == null) {
-      return "";
-    }
-    if (val instanceof Date) {
-      const y = String(val.getFullYear()).padStart(4, "0");
-      const m = String(val.getMonth() + 1).padStart(2, "0");
-      const d = String(val.getDate()).padStart(2, "0");
-      return `${y}-${m}-${d}`;
-    }
-    if (typeof val === "string") {
-      const parts = isoToParts(val);
-      return partsToIso(parts);
-    }
-    return "";
-  }
-  syncPartsFromCanonical() {
-    this.parts = isoToParts(this._value);
-    this.updateHiddenInput();
-  }
-  updateHiddenInput() {
-    if (this.valueInput) {
-      this.valueInput.value = this._value;
-    }
-    this.setValue(this._value || null);
-  }
-  recomputeValue() {
-    const oldValue = this._value;
-    const newValue = partsToIso(this.parts);
-    if (newValue !== oldValue) {
-      this._value = newValue;
-      this.valueHasChanged = true;
-      this.updateHiddenInput();
-      this.updateValidity();
-    }
-    this.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
-    if (newValue !== this.lastEmittedValue) {
-      this.lastEmittedValue = newValue;
-      this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
-    }
-  }
-  firstFocusableInput() {
-    if (!this.shadowRoot) {
-      return void 0;
-    }
-    const inputs = Array.from(this.shadowRoot.querySelectorAll('input[part~="field-input"]'));
-    for (const field of this.fieldOrder()) {
-      if (this.parts[field] === "") {
-        const el = inputs.find((i) => i.dataset.field === field);
-        if (el) {
-          return el;
-        }
-      }
-    }
-    return inputs[0];
-  }
-  /**
-   * Returns the field to fix when the value doesn't compose, in locale order: the first empty field, else the first
-   * out-of-range field (year < 1, month not 1–12, day not 1–31), else the day (e.g. Feb 30). Null when the value
-   * composes cleanly.
-   */
-  firstInvalidField() {
-    if (this._value) {
-      return null;
-    }
-    const order = this.fieldOrder();
-    const empty = order.find((field) => this.parts[field] === "");
-    if (empty) {
-      return empty;
-    }
-    const inRange = {
-      year: (n) => Number.isInteger(n) && n >= 1 && n <= 9999,
-      month: (n) => Number.isInteger(n) && n >= 1 && n <= 12,
-      day: (n) => Number.isInteger(n) && n >= 1 && n <= 31
-    };
-    const outOfRange = order.find((field) => !inRange[field](Number(this.parts[field])));
-    if (outOfRange) {
-      return outOfRange;
-    }
-    return "day";
-  }
-  autocompleteFor(field) {
-    const family = this.autocomplete.trim();
-    if (!family) {
-      return void 0;
-    }
-    if (family === "bday") {
-      if (field === "day") {
-        return "bday-day";
-      }
-      if (field === "month") {
-        return "bday-month";
-      }
-      return "bday-year";
-    }
-    if (family === "off" || family === "on") {
-      return family;
-    }
-    return field === "year" ? family : void 0;
-  }
-  //
-  // Render
-  //
-  render() {
-    const hasLabelSlot = this.hasSlotController.test("label", "ssrLabel");
-    const hasHintSlot = this.hasSlotController.test("hint", "ssrHint");
-    const hasLabel = !!this.label || !!hasLabelSlot;
-    const hasHint = !!this.hint || !!hasHintSlot;
-    const groupAriaLabel = this.label || this.localize.term("date") || "Date";
-    const userInvalid = !isServer && this.customStates.has("user-invalid");
-    const describedBy = hasHint ? this.hintId : "";
-    const fields = this.fieldOrder().map((field) => this.renderField(field, describedBy, userInvalid));
-    const groupContent = html`
-      <div part="known-date form-control-input fields" class="fields">${fields}</div>
-
-      <slot
-        name="hint"
-        part="hint"
-        id=${this.hintId}
-        class=${classMap({ hint: true, "has-slotted": hasHint })}
-        aria-hidden=${hasHint ? "false" : "true"}
-      >
-        ${this.hint}
-      </slot>
-    `;
-    return html`
-      <div
-        part="form-control"
-        class=${classMap({
-      "form-control": true,
-      "form-control-has-label": hasLabel
-    })}
-      >
-        ${hasLabel ? html`<fieldset part="fieldset" class="fieldset">
-                <legend part="legend">
-                  <span part="form-control-label" class="label">
-                    <slot name="label">${this.label}</slot>
-                  </span>
-                </legend>
-                ${groupContent}
-              </fieldset>` : html`<div part="fieldset" class="fieldset" role="group" aria-label=${groupAriaLabel}>
-                ${groupContent}
-              </div>`}
-
-        <input
-          class="value-input"
-          type="date"
-          tabindex="-1"
-          aria-hidden="true"
-          .value=${this._value}
-          min=${ifDefined(this.min || void 0)}
-          max=${ifDefined(this.max || void 0)}
-          ?disabled=${this.disabled}
-          ?required=${this.required}
-        />
-      </div>
-    `;
-  }
-  renderField(field, describedBy, userInvalid) {
-    const fieldId = `${this.groupId}-${field}`;
-    const value = this.parts[field];
-    const autocompleteAttr = this.autocompleteFor(field);
-    const ariaInvalid = userInvalid ? "true" : void 0;
-    const fieldLabel = this.localize.term(field) || (field === "day" ? "Day" : field === "month" ? "Month" : "Year");
-    return html`
-      <div part="field field-${field}" class=${classMap({ field: true, [`field-${field}`]: true })}>
-        <input
-          id=${fieldId}
-          part="field-input"
-          class="field-input"
-          type="text"
-          inputmode="numeric"
-          pattern="[0-9]*"
-          maxlength=${field === "year" ? 4 : 2}
-          data-field=${field}
-          autocomplete=${ifDefined(autocompleteAttr)}
-          aria-describedby=${ifDefined(describedBy || void 0)}
-          aria-invalid=${ifDefined(ariaInvalid)}
-          aria-required=${this.required ? "true" : "false"}
-          .value=${live(value)}
-          ?disabled=${this.disabled}
-          ?readonly=${this.readonly}
-          @input=${this.handleFieldInput}
-        />
-        <label part="field-label" class="field-label" for=${fieldId}>${fieldLabel}</label>
-      </div>
-    `;
-  }
-};
-CsKnownDate.css = [size_styles_default, form_control_styles_default, known_date_styles_default];
-CsKnownDate.shadowRootOptions = {
-  ...CornerstoneFormAssociatedElement.shadowRootOptions,
-  delegatesFocus: true
-};
-__decorateClass([
-  query(".value-input")
-], CsKnownDate.prototype, "valueInput", 2);
-__decorateClass([
-  state()
-], CsKnownDate.prototype, "parts", 2);
-__decorateClass([
-  property({ reflect: true })
-], CsKnownDate.prototype, "name", 2);
-__decorateClass([
-  state()
-], CsKnownDate.prototype, "value", 1);
-__decorateClass([
-  property({ attribute: "value", reflect: true })
-], CsKnownDate.prototype, "defaultValue", 2);
-__decorateClass([
-  property({ type: Boolean })
-], CsKnownDate.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], CsKnownDate.prototype, "required", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], CsKnownDate.prototype, "readonly", 2);
-__decorateClass([
-  property({ reflect: true })
-], CsKnownDate.prototype, "size", 2);
-__decorateClass([
-  property({ reflect: true })
-], CsKnownDate.prototype, "appearance", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], CsKnownDate.prototype, "pill", 2);
-__decorateClass([
-  property()
-], CsKnownDate.prototype, "label", 2);
-__decorateClass([
-  property({ attribute: "hint" })
-], CsKnownDate.prototype, "hint", 2);
-__decorateClass([
-  property()
-], CsKnownDate.prototype, "autocomplete", 2);
-__decorateClass([
-  property({ reflect: true })
-], CsKnownDate.prototype, "min", 2);
-__decorateClass([
-  property({ reflect: true })
-], CsKnownDate.prototype, "max", 2);
-__decorateClass([
-  property({ reflect: true })
-], CsKnownDate.prototype, "locale", 2);
-__decorateClass([
-  property({ attribute: "ssr-label", type: Boolean })
-], CsKnownDate.prototype, "ssrLabel", 2);
-__decorateClass([
-  property({ attribute: "ssr-hint", type: Boolean })
-], CsKnownDate.prototype, "ssrHint", 2);
-CsKnownDate = __decorateClass([
-  customElement("cs-known-date")
-], CsKnownDate);
-
-export {
-  CsKnownDate
-};

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

@@ -1,125 +0,0 @@
-/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
-
-// src/components/accordion-item/accordion-item.styles.ts
-import { css } from "lit";
-var accordion_item_styles_default = css`
-  @layer cs-component {
-    :host {
-      --spacing: var(--cs-space-m);
-      --show-duration: var(--cs-transition-normal);
-      --hide-duration: var(--cs-transition-normal);
-      --easing: var(--cs-transition-easing);
-
-      display: block;
-    }
-
-    :host(:not(:first-child)) {
-      border-top: var(--cs-panel-border-width) var(--cs-panel-border-style) var(--cs-color-surface-border);
-    }
-
-    :host([appearance='filled']) {
-      background-color: var(--cs-color-neutral-fill-quiet);
-    }
-
-    :host([appearance='filled']:not(:first-child)) {
-      margin-block-start: var(--cs-panel-border-width);
-      border-top: none;
-    }
-
-    [part~='heading'] {
-      margin: 0;
-      font: inherit;
-    }
-
-    [part~='button'] {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing);
-      padding: var(--spacing);
-      width: 100%;
-      background: none;
-      border: none;
-      cursor: pointer;
-      text-align: start;
-      color: var(--cs-color-text-normal);
-      font: inherit;
-      font-weight: var(--cs-font-weight-semibold);
-
-      &:focus {
-        outline: none;
-      }
-
-      &:focus-visible {
-        outline: var(--cs-focus-ring);
-        /* Inset by the full ring width + offset so the parent's overflow:hidden doesn't clip it */
-        outline-offset: calc(0px - var(--cs-focus-ring-width) - var(--cs-focus-ring-offset));
-      }
-    }
-
-    /* Icon at end (default) */
-    :host([icon-placement='end']) [part~='button'] {
-      justify-content: space-between;
-    }
-
-    /* Icon at start */
-    :host([icon-placement='start']) [part~='button'] {
-      flex-direction: row-reverse;
-      justify-content: flex-end;
-    }
-
-    :host([disabled]) {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    :host([disabled]) [part~='button'] {
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-
-    :host(:first-child) [part~='button'] {
-      border-top-left-radius: var(--cs-panel-border-radius);
-      border-top-right-radius: var(--cs-panel-border-radius);
-    }
-
-    :host(:last-child:not([expanded])) [part~='button'] {
-      border-bottom-left-radius: var(--cs-panel-border-radius);
-      border-bottom-right-radius: var(--cs-panel-border-radius);
-    }
-
-    [part~='icon'] {
-      flex: 0 0 auto;
-      display: flex;
-      align-items: center;
-      color: var(--cs-color-text-quiet);
-      transition: rotate var(--hide-duration) var(--easing);
-    }
-
-    :host([expanded]) [part~='icon'] {
-      rotate: 90deg;
-      transition-duration: var(--show-duration);
-    }
-
-    :host([expanded]:dir(rtl)) [part~='icon'] {
-      rotate: -90deg;
-    }
-
-    .body {
-      overflow: hidden;
-      color: var(--cs-color-text-quiet);
-    }
-
-    :host([expanded]) .body:not(.animating) {
-      overflow: visible;
-    }
-
-    .content {
-      display: block;
-      padding: 0 var(--spacing) var(--spacing);
-    }
-  }
-`;
-
-export {
-  accordion_item_styles_default
-};

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

@@ -1,21 +0,0 @@
-/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  CsRelativeTime
-} from "./chunk.3UER6F2R.js";
-
-// src/react/relative-time/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-var tagName = "cs-relative-time";
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: CsRelativeTime,
-  react: React,
-  events: {},
-  displayName: "CsRelativeTime"
-});
-var relative_time_default = reactWrapper;
-
-export {
-  relative_time_default
-};

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

@@ -1,21 +0,0 @@
-/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  CsProgressRing
-} from "./chunk.5NOZVNIQ.js";
-
-// src/react/progress-ring/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-var tagName = "cs-progress-ring";
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: CsProgressRing,
-  react: React,
-  events: {},
-  displayName: "CsProgressRing"
-});
-var progress_ring_default = reactWrapper;
-
-export {
-  progress_ring_default
-};

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

@@ -1,24 +0,0 @@
-/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  CsNumberInput
-} from "./chunk.EN3HNBS4.js";
-
-// src/react/number-input/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "cs-number-input";
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: CsNumberInput,
-  react: React,
-  events: {
-    onCsInvalid: "cs-invalid"
-  },
-  displayName: "CsNumberInput"
-});
-var number_input_default = reactWrapper;
-
-export {
-  number_input_default
-};

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

@@ -1,22 +0,0 @@
-/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
-
-// src/internal/math.ts
-import { nanoid } from "nanoid";
-function clamp(value, min, max) {
-  const noNegativeZero = (n) => Object.is(n, -0) ? 0 : n;
-  if (value < min) {
-    return noNegativeZero(min);
-  }
-  if (value > max) {
-    return noNegativeZero(max);
-  }
-  return noNegativeZero(value);
-}
-function uniqueId(prefix = "") {
-  return `${prefix}${nanoid()}`;
-}
-
-export {
-  clamp,
-  uniqueId
-};