@cruglobal/cornerstone-components 0.6.1 → 0.7.0

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

@@ -0,0 +1,447 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  textarea_styles_default
+} from "./chunk.E64PSDXM.js";
+import {
+  visually_hidden_styles_default
+} from "./chunk.VBNHA2WB.js";
+import {
+  form_control_styles_default
+} from "./chunk.LWG5H7OI.js";
+import {
+  l
+} from "./chunk.HEKJPFBD.js";
+import {
+  HasSlotController
+} from "./chunk.IHXNGREP.js";
+import {
+  MirrorValidator
+} from "./chunk.Y7DLMHJ7.js";
+import {
+  CornerstoneFormAssociatedElement
+} from "./chunk.HNXB5BK2.js";
+import {
+  size_styles_default
+} from "./chunk.WMLOKPMQ.js";
+import {
+  o
+} from "./chunk.PKFLKOSS.js";
+import {
+  e as e2
+} from "./chunk.VKLPFGMH.js";
+import {
+  watch
+} from "./chunk.N6DONW5L.js";
+import {
+  customElement,
+  e,
+  n,
+  r
+} from "./chunk.6GJWBDJU.js";
+import {
+  LocalizeController
+} from "./chunk.HGW5EEZU.js";
+import {
+  b
+} from "./chunk.IPM67WBE.js";
+import {
+  __decorateClass
+} from "./chunk.4QJR2RKX.js";
+
+// src/components/textarea/textarea.ts
+var CsTextarea = class extends CornerstoneFormAssociatedElement {
+  constructor() {
+    super(...arguments);
+    this.assumeInteractionOn = ["blur", "input"];
+    this.hasSlotController = new HasSlotController(this, "hint", "label");
+    this.localize = new LocalizeController(this);
+    this.announcedCountText = "";
+    this.title = "";
+    this.name = null;
+    this._value = null;
+    this.defaultValue = this.getAttribute("value") ?? "";
+    this.size = "m";
+    this.appearance = "outlined";
+    this.label = "";
+    this.hint = "";
+    this.placeholder = "";
+    this.rows = 4;
+    this.resize = "vertical";
+    this.disabled = false;
+    this.readonly = false;
+    this.required = false;
+    this.spellcheck = true;
+    this.ssrLabel = false;
+    this.ssrHint = false;
+    this.withCount = false;
+    this.lastObservedWidth = 0;
+  }
+  static get validators() {
+    return [...super.validators, MirrorValidator()];
+  }
+  /** The current value of the input, submitted as a name/value pair with form data. */
+  get value() {
+    if (this.valueHasChanged) {
+      return this._value;
+    }
+    return this._value ?? this.defaultValue;
+  }
+  set value(val) {
+    if (this._value === val) {
+      return;
+    }
+    this.valueHasChanged = true;
+    this._value = val;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateComplete.then(() => {
+      this.setTextareaDimensions();
+      this.updateResizeObserver();
+      if (this.didSSR && this.input && this.value !== this.input.value) {
+        const value = this.input.value;
+        this.value = value;
+      }
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    clearTimeout(this.countAnnounceTimeout);
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = void 0;
+  }
+  /**
+   * @internal
+   */
+  updateFormValue(value) {
+    if (value == null) {
+      this.setValue("", null);
+      return;
+    }
+    super.updateFormValue(value);
+  }
+  /** Creates or destroys the resize observer based on the current resize mode. */
+  updateResizeObserver() {
+    const needsObserver = this.resize !== "none";
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = void 0;
+    }
+    if (needsObserver && this.input) {
+      if (this.resize === "auto") {
+        this.resizeObserver = new ResizeObserver((entries) => {
+          const width = entries[0]?.contentRect.width ?? 0;
+          if (width !== this.lastObservedWidth) {
+            this.lastObservedWidth = width;
+            requestAnimationFrame(() => this.setTextareaDimensions());
+          }
+        });
+        this.resizeObserver.observe(this);
+      } else {
+        this.resizeObserver = new ResizeObserver(() => this.setTextareaDimensions());
+        this.resizeObserver.observe(this.input);
+      }
+    }
+  }
+  handleBlur() {
+    this.checkValidity();
+  }
+  handleChange(event) {
+    this.valueHasChanged = true;
+    this.value = this.input.value;
+    this.setTextareaDimensions();
+    this.checkValidity();
+    this.relayNativeEvent(event, { bubbles: true, composed: true });
+  }
+  handleInput(event) {
+    this.valueHasChanged = true;
+    this.value = this.input.value;
+    this.relayNativeEvent(event, { bubbles: true, composed: true });
+    this.scheduleCountAnnouncement();
+  }
+  scheduleCountAnnouncement() {
+    clearTimeout(this.countAnnounceTimeout);
+    this.countAnnounceTimeout = setTimeout(() => {
+      const currentLength = (this.value ?? "").length;
+      this.announcedCountText = this.maxlength != null ? this.localize.term("numCharactersRemaining", this.maxlength - currentLength) : this.localize.term("numCharacters", currentLength);
+    }, 1e3);
+  }
+  setTextareaDimensions() {
+    if (this.resize === "none") {
+      this.base.style.width = ``;
+      this.base.style.height = ``;
+      return;
+    }
+    if (this.resize === "auto") {
+      this.sizeAdjuster.style.height = `${this.input.clientHeight}px`;
+      this.input.style.height = "auto";
+      const newHeight = this.input.scrollHeight;
+      this.input.style.height = `${newHeight}px`;
+      this.sizeAdjuster.style.height = `${newHeight}px`;
+      this.base.style.width = ``;
+      this.base.style.height = ``;
+      return;
+    }
+    if (this.input.style.width) {
+      const width = Number(this.input.style.width.split(/px/)[0]) + 2;
+      this.base.style.width = `${width}px`;
+    }
+    if (this.input.style.height) {
+      const height = Number(this.input.style.height.split(/px/)[0]) + 2;
+      this.base.style.height = `${height}px`;
+    }
+  }
+  handleRowsChange() {
+    this.setTextareaDimensions();
+  }
+  async handleValueChange() {
+    await this.updateComplete;
+    this.checkValidity();
+    this.setTextareaDimensions();
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("resize")) {
+      this.setTextareaDimensions();
+      this.updateResizeObserver();
+    }
+    super.updated(changedProperties);
+    if (changedProperties.has("value")) {
+      this.customStates.set("blank", !this.value);
+    }
+  }
+  /** Sets focus on the textarea. */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the textarea. */
+  blur() {
+    this.input.blur();
+  }
+  /** Selects all the text in the textarea. */
+  select() {
+    this.input.select();
+  }
+  /** Gets or sets the textarea's scroll position. */
+  scrollPosition(position) {
+    if (position) {
+      if (typeof position.top === "number") {
+        this.input.scrollTop = position.top;
+      }
+      if (typeof position.left === "number") {
+        this.input.scrollLeft = position.left;
+      }
+      return void 0;
+    }
+    return {
+      top: this.input.scrollTop,
+      left: this.input.scrollLeft
+    };
+  }
+  /** Sets the start and end positions of the text selection (0-based). */
+  setSelectionRange(selectionStart, selectionEnd, selectionDirection = "none") {
+    this.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
+  }
+  /** Replaces a range of text with a new string. */
+  setRangeText(replacement, start, end, selectMode = "preserve") {
+    const selectionStart = start ?? this.input.selectionStart;
+    const selectionEnd = end ?? this.input.selectionEnd;
+    this.input.setRangeText(replacement, selectionStart, selectionEnd, selectMode);
+    if (this.value !== this.input.value) {
+      this.value = this.input.value;
+      this.setTextareaDimensions();
+    }
+  }
+  formResetCallback() {
+    this._value = null;
+    if (this.input) {
+      this.input.value = this.value || "";
+    }
+    super.formResetCallback();
+  }
+  render() {
+    const hasLabelSlot = this.hasSlotController.test("label", "ssrLabel");
+    const hasHintSlot = this.hasSlotController.test("hint", "ssrHint");
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasHint = this.hint ? true : !!hasHintSlot;
+    const currentLength = (this.value ?? "").length;
+    const countText = this.maxlength != null ? this.localize.term("numCharactersRemaining", this.maxlength - currentLength) : this.localize.term("numCharacters", currentLength);
+    return b`
+      <label
+        part="form-control-label"
+        class=${e2({
+      label: true,
+      "has-label": hasLabel
+    })}
+        for="input"
+        aria-hidden=${hasLabel ? "false" : "true"}
+      >
+        <slot name="label">${this.label}</slot>
+      </label>
+
+      <div part="textarea-wrapper" class="textarea">
+        <textarea
+          part="textarea"
+          id="input"
+          class="control"
+          title=${this.title}
+          name=${o(this.name)}
+          .value=${l(this.value)}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          ?required=${this.required}
+          placeholder=${o(this.placeholder)}
+          rows=${o(this.rows)}
+          minlength=${o(this.minlength)}
+          maxlength=${o(this.maxlength)}
+          autocapitalize=${o(this.autocapitalize)}
+          autocorrect=${o(this.autocorrect)}
+          ?autofocus=${this.autofocus}
+          spellcheck=${o(this.spellcheck)}
+          enterkeyhint=${o(this.enterkeyhint)}
+          inputmode=${o(this.inputmode)}
+          aria-describedby="hint"
+          @change=${this.handleChange}
+          @input=${this.handleInput}
+          @blur=${this.handleBlur}
+        ></textarea>
+
+        <!-- This "adjuster" exists to prevent layout shifting. https://github.com/shoelace-style/shoelace/issues/2180 -->
+        <div part="textarea-adjuster" class="size-adjuster" ?hidden=${this.resize !== "auto"}></div>
+      </div>
+
+      <div
+        part="hint"
+        class=${e2({
+      footer: true,
+      "has-count": this.withCount,
+      "has-slotted": hasHint
+    })}
+      >
+        <slot id="hint" name="hint" class="hint" aria-hidden=${hasHint ? "false" : "true"}>${this.hint}</slot>
+
+        ${this.withCount ? b`
+                <div part="count" class="count" aria-hidden="true">${countText}</div>
+                <div class="cs-visually-hidden-force" aria-live="polite">${this.announcedCountText}</div>
+              ` : ""}
+      </div>
+    `;
+  }
+};
+CsTextarea.css = [textarea_styles_default, form_control_styles_default, size_styles_default, visually_hidden_styles_default];
+__decorateClass([
+  r()
+], CsTextarea.prototype, "announcedCountText", 2);
+__decorateClass([
+  e(".control")
+], CsTextarea.prototype, "input", 2);
+__decorateClass([
+  e('[part~="textarea-wrapper"]')
+], CsTextarea.prototype, "base", 2);
+__decorateClass([
+  e(".size-adjuster")
+], CsTextarea.prototype, "sizeAdjuster", 2);
+__decorateClass([
+  n()
+], CsTextarea.prototype, "title", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsTextarea.prototype, "name", 2);
+__decorateClass([
+  r()
+], CsTextarea.prototype, "value", 1);
+__decorateClass([
+  n({ attribute: "value", reflect: true })
+], CsTextarea.prototype, "defaultValue", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsTextarea.prototype, "size", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsTextarea.prototype, "appearance", 2);
+__decorateClass([
+  n()
+], CsTextarea.prototype, "label", 2);
+__decorateClass([
+  n({ attribute: "hint" })
+], CsTextarea.prototype, "hint", 2);
+__decorateClass([
+  n()
+], CsTextarea.prototype, "placeholder", 2);
+__decorateClass([
+  n({ type: Number })
+], CsTextarea.prototype, "rows", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsTextarea.prototype, "resize", 2);
+__decorateClass([
+  n({ type: Boolean })
+], CsTextarea.prototype, "disabled", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CsTextarea.prototype, "readonly", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CsTextarea.prototype, "required", 2);
+__decorateClass([
+  n({ type: Number })
+], CsTextarea.prototype, "minlength", 2);
+__decorateClass([
+  n({ type: Number })
+], CsTextarea.prototype, "maxlength", 2);
+__decorateClass([
+  n()
+], CsTextarea.prototype, "autocapitalize", 2);
+__decorateClass([
+  n({
+    type: Boolean,
+    converter: {
+      fromAttribute: (value) => !value || value === "off" ? false : true,
+      toAttribute: (value) => value ? "on" : "off"
+    }
+  })
+], CsTextarea.prototype, "autocorrect", 2);
+__decorateClass([
+  n()
+], CsTextarea.prototype, "autocomplete", 2);
+__decorateClass([
+  n({ type: Boolean })
+], CsTextarea.prototype, "autofocus", 2);
+__decorateClass([
+  n()
+], CsTextarea.prototype, "enterkeyhint", 2);
+__decorateClass([
+  n({
+    type: Boolean,
+    converter: {
+      // Allow "true|false" attribute values but keep the property boolean
+      fromAttribute: (value) => !value || value === "false" ? false : true,
+      toAttribute: (value) => value ? "true" : "false"
+    }
+  })
+], CsTextarea.prototype, "spellcheck", 2);
+__decorateClass([
+  n()
+], CsTextarea.prototype, "inputmode", 2);
+__decorateClass([
+  n({ attribute: "ssr-label", type: Boolean })
+], CsTextarea.prototype, "ssrLabel", 2);
+__decorateClass([
+  n({ attribute: "ssr-hint", type: Boolean })
+], CsTextarea.prototype, "ssrHint", 2);
+__decorateClass([
+  n({ attribute: "with-count", type: Boolean, reflect: true })
+], CsTextarea.prototype, "withCount", 2);
+__decorateClass([
+  watch("rows", { waitUntilFirstUpdate: true })
+], CsTextarea.prototype, "handleRowsChange", 1);
+__decorateClass([
+  watch("value", { waitUntilFirstUpdate: true })
+], CsTextarea.prototype, "handleValueChange", 1);
+CsTextarea = __decorateClass([
+  customElement("cs-textarea")
+], CsTextarea);
+CsTextarea.disableWarning?.("change-in-update");
+
+export {
+  CsTextarea
+};

package/dist/bundled/chunks/chunk.P4B5T3BS.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 {
+  CsAccordionItem
+} from "./chunk.HPSBMJFE.js";
+import {
+  __toESM
+} from "./chunk.4QJR2RKX.js";
+
+// src/react/accordion-item/index.ts
+var React = __toESM(require_react(), 1);
+var tagName = "cs-accordion-item";
+var reactWrapper = o({
+  tagName,
+  elementClass: CsAccordionItem,
+  react: React,
+  events: {},
+  displayName: "CsAccordionItem"
+});
+var accordion_item_default = reactWrapper;
+
+export {
+  accordion_item_default
+};

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

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

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

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

@@ -0,0 +1,42 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  i
+} from "./chunk.4XDNAFUH.js";
+
+// src/components/accordion/accordion.styles.ts
+var accordion_styles_default = i`
+  @layer cs-component {
+    :host {
+      display: block;
+      background-color: var(--cs-color-surface-default);
+      border: var(--cs-panel-border-width) var(--cs-panel-border-style) var(--cs-color-surface-border);
+      border-radius: var(--cs-panel-border-radius);
+      overflow: hidden;
+    }
+
+    /* Appearance modifiers */
+    :host([appearance='outlined']) {
+      background-color: var(--cs-color-surface-default);
+      border-color: var(--cs-color-surface-border);
+    }
+
+    :host([appearance='filled']) {
+      border-color: transparent;
+    }
+
+    :host([appearance='filled-outlined']) {
+      background-color: var(--cs-color-neutral-fill-quiet);
+      border-color: var(--cs-color-neutral-border-quiet);
+    }
+
+    :host([appearance='plain']) {
+      background-color: transparent;
+      border-color: transparent;
+      border-radius: 0;
+    }
+  }
+`;
+
+export {
+  accordion_styles_default
+};

package/dist/bundled/chunks/chunk.PAJ7VBUO.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 {
+  CsRadio
+} from "./chunk.WHQZTSPD.js";
+import {
+  __toESM
+} from "./chunk.4QJR2RKX.js";
+
+// src/react/radio/index.ts
+var React = __toESM(require_react(), 1);
+var tagName = "cs-radio";
+var reactWrapper = o({
+  tagName,
+  elementClass: CsRadio,
+  react: React,
+  events: {},
+  displayName: "CsRadio"
+});
+var radio_default = reactWrapper;
+
+export {
+  radio_default
+};

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

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