@cruglobal/cornerstone-components 0.1.0 → 0.1.2

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

@@ -0,0 +1,332 @@
+/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsInvalidEvent
+} from "./chunk.57SRC3EY.js";
+import {
+  CornerstoneElement
+} from "./chunk.MJGPJYHJ.js";
+import {
+  __decorateClass
+} from "./chunk.BGNVR6GC.js";
+
+// src/internal/cornerstone-form-associated-element.ts
+import { isServer } from "lit";
+import { property } from "lit/decorators.js";
+
+// src/internal/validators/custom-error-validator.ts
+var CustomErrorValidator = () => {
+  return {
+    observedAttributes: ["custom-error"],
+    checkValidity(element) {
+      const validity = {
+        message: "",
+        isValid: true,
+        invalidKeys: []
+      };
+      if (element.customError) {
+        validity.message = element.customError;
+        validity.isValid = false;
+        validity.invalidKeys = ["customError"];
+      }
+      return validity;
+    }
+  };
+};
+
+// src/internal/cornerstone-form-associated-element.ts
+var CornerstoneFormAssociatedElement = class extends CornerstoneElement {
+  constructor() {
+    super();
+    this.name = null;
+    this.disabled = false;
+    this.required = false;
+    this.assumeInteractionOn = ["input"];
+    this.validators = [];
+    this.valueHasChanged = false;
+    this.hasInteracted = false;
+    this.customError = null;
+    this.emittedEvents = [];
+    this.emitInvalid = (e) => {
+      if (e.target !== this) {
+        return;
+      }
+      this.hasInteracted = true;
+      this.dispatchEvent(new CsInvalidEvent());
+    };
+    this.handleInteraction = (event) => {
+      const emittedEvents = this.emittedEvents;
+      if (!emittedEvents.includes(event.type)) {
+        emittedEvents.push(event.type);
+      }
+      if (emittedEvents.length === this.assumeInteractionOn?.length) {
+        this.hasInteracted = true;
+      }
+    };
+    if ("addEventListener" in this) {
+      this.addEventListener("invalid", this.emitInvalid);
+    }
+  }
+  /**
+   * Validators are static because they have `observedAttributes`, essentially attributes to "watch"
+   * for changes. Whenever these attributes change, we want to be notified and update the validator.
+   */
+  static get validators() {
+    return isServer ? [] : [CustomErrorValidator()];
+  }
+  // Append all Validator "observedAttributes" into the "observedAttributes" so they can run.
+  static get observedAttributes() {
+    const parentAttrs = new Set(super.observedAttributes || []);
+    for (const validator of this.validators) {
+      if (!validator.observedAttributes) {
+        continue;
+      }
+      for (const attr of validator.observedAttributes) {
+        parentAttrs.add(attr);
+      }
+    }
+    return [...parentAttrs];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.didSSR && !this.hasUpdated) {
+      this.updateComplete.then(() => {
+        this.updateValidity();
+      });
+    } else {
+      this.updateValidity();
+    }
+    this.assumeInteractionOn.forEach((event) => {
+      this.addEventListener?.(event, this.handleInteraction);
+    });
+  }
+  firstUpdated(...args) {
+    super.firstUpdated(...args);
+    this.updateValidity();
+  }
+  willUpdate(changedProperties) {
+    if (!isServer && changedProperties.has("customError")) {
+      if (!this.customError) {
+        this.customError = null;
+      }
+      this.setCustomValidity(this.customError || "");
+    }
+    if (changedProperties.has("value") || changedProperties.has("disabled") || changedProperties.has("defaultValue")) {
+      const value = this.value;
+      this.updateFormValue(value);
+    }
+    if (changedProperties.has("disabled")) {
+      this.customStates.set("disabled", this.disabled);
+      if (this.hasAttribute("disabled") || !isServer && !this.matches(":disabled")) {
+        this.toggleAttribute("disabled", this.disabled);
+      }
+    }
+    super.willUpdate(changedProperties);
+    if (this.didSSR && !this.hasUpdated) {
+      this.updateComplete.then(() => this.updateValidity());
+    } else {
+      this.updateValidity();
+    }
+  }
+  /**
+   * @internal
+   */
+  updateFormValue(value) {
+    if (Array.isArray(value)) {
+      if (this.name) {
+        const formData = new FormData();
+        for (const val of value) {
+          formData.append(this.name, val);
+        }
+        this.setValue(formData, formData);
+      }
+    } else {
+      this.setValue(value, value);
+    }
+  }
+  get labels() {
+    return this.internals.labels;
+  }
+  getForm() {
+    return this.internals.form;
+  }
+  /**
+   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+   * the same document or shadow root for this to work.
+   */
+  set form(val) {
+    if (val) {
+      this.setAttribute("form", val);
+    } else {
+      this.removeAttribute("form");
+    }
+  }
+  get form() {
+    return this.internals.form;
+  }
+  get validity() {
+    return this.internals.validity;
+  }
+  // Not sure if this supports `novalidate`. Will need to test.
+  get willValidate() {
+    return this.internals.willValidate;
+  }
+  get validationMessage() {
+    return this.internals.validationMessage;
+  }
+  checkValidity() {
+    this.updateValidity();
+    return this.internals.checkValidity();
+  }
+  reportValidity() {
+    this.updateValidity();
+    this.hasInteracted = true;
+    return this.internals.reportValidity();
+  }
+  /**
+   * Override this to change where constraint validation popups are anchored.
+   */
+  get validationTarget() {
+    return this.input || void 0;
+  }
+  setValidity(...args) {
+    const flags = args[0];
+    const message = args[1];
+    let anchor = args[2];
+    if (!anchor) {
+      anchor = this.validationTarget;
+    }
+    this.internals.setValidity(flags, message, anchor || void 0);
+    this.requestUpdate("validity");
+    this.setCustomStates();
+  }
+  setCustomStates() {
+    const required = Boolean(this.required);
+    const isValid = this.internals.validity.valid;
+    const hasInteracted = this.hasInteracted;
+    this.customStates.set("required", required);
+    this.customStates.set("optional", !required);
+    this.customStates.set("invalid", !isValid);
+    this.customStates.set("valid", isValid);
+    this.customStates.set("user-invalid", !isValid && hasInteracted);
+    this.customStates.set("user-valid", isValid && hasInteracted);
+  }
+  /**
+   * Do not use this when creating a "Validator". This is intended for end users of components.
+   * We track manually defined custom errors so we don't clear them on accident in our validators.
+   *
+   */
+  setCustomValidity(message) {
+    if (!message) {
+      this.customError = null;
+      this.setValidity({});
+      return;
+    }
+    this.customError = message;
+    this.setValidity({ customError: true }, message, this.validationTarget);
+  }
+  formResetCallback() {
+    this.resetValidity();
+    this.hasInteracted = false;
+    this.valueHasChanged = false;
+    this.emittedEvents = [];
+    this.updateValidity();
+  }
+  formDisabledCallback(isDisabled) {
+    this.disabled = isDisabled;
+    this.updateValidity();
+  }
+  /**
+   * Called when the browser is trying to restore element’s state to state in which case reason is "restore", or when
+   * the browser is trying to fulfill autofill on behalf of user in which case reason is "autocomplete". In the case of
+   * "restore", state is a string, File, or FormData object previously set as the second argument to setFormValue.
+   */
+  formStateRestoreCallback(state, reason) {
+    if (this.didSSR && !this.hasUpdated) {
+      this.updateComplete.then(() => {
+        this.value = state;
+        if (reason === "restore") {
+          this.resetValidity();
+        }
+        this.updateValidity();
+      });
+    } else {
+      this.value = state;
+      if (reason === "restore") {
+        this.resetValidity();
+      }
+      this.updateValidity();
+    }
+  }
+  setValue(...args) {
+    const [value, state] = args;
+    this.internals.setFormValue(value, state);
+  }
+  get allValidators() {
+    const staticValidators = this.constructor.validators || [];
+    const validators = this.validators || [];
+    return [...staticValidators, ...validators];
+  }
+  /**
+   * Reset validity is a way of removing manual custom errors and native validation.
+   */
+  resetValidity() {
+    this.setCustomValidity("");
+    this.setValidity({});
+  }
+  updateValidity() {
+    if (this.disabled || this.hasAttribute("disabled") || !this.willValidate) {
+      this.resetValidity();
+      return;
+    }
+    const validators = this.allValidators;
+    if (!validators?.length) {
+      return;
+    }
+    const flags = {
+      // Don't trust custom errors from the Browser. Safari breaks the spec.
+      customError: Boolean(this.customError)
+    };
+    const formControl = this.validationTarget || this.input || void 0;
+    let finalMessage = "";
+    for (const validator of validators) {
+      const { isValid, message, invalidKeys } = validator.checkValidity(this);
+      if (isValid) {
+        continue;
+      }
+      if (!finalMessage) {
+        finalMessage = message;
+      }
+      if (invalidKeys?.length >= 0) {
+        invalidKeys.forEach((str) => flags[str] = true);
+      }
+    }
+    if (!finalMessage) {
+      finalMessage = this.validationMessage;
+    }
+    this.setValidity(flags, finalMessage, formControl);
+  }
+};
+CornerstoneFormAssociatedElement.formAssociated = true;
+__decorateClass([
+  property({ reflect: true })
+], CornerstoneFormAssociatedElement.prototype, "name", 2);
+__decorateClass([
+  property({ type: Boolean })
+], CornerstoneFormAssociatedElement.prototype, "disabled", 2);
+__decorateClass([
+  property({ state: true, attribute: false })
+], CornerstoneFormAssociatedElement.prototype, "valueHasChanged", 2);
+__decorateClass([
+  property({ state: true, attribute: false })
+], CornerstoneFormAssociatedElement.prototype, "hasInteracted", 2);
+__decorateClass([
+  property({ attribute: "custom-error", reflect: true })
+], CornerstoneFormAssociatedElement.prototype, "customError", 2);
+__decorateClass([
+  property({ attribute: false, state: true, type: Object })
+], CornerstoneFormAssociatedElement.prototype, "validity", 1);
+
+export {
+  CornerstoneFormAssociatedElement
+};

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

@@ -0,0 +1,42 @@
+/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/components/radio-group/radio-group.styles.ts
+import { css } from "lit";
+var radio_group_styles_default = css`
+  .form-control {
+    position: relative;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .label {
+    padding: 0;
+  }
+
+  .radio-group-required .label::after {
+    content: var(--cs-form-control-required-content);
+    margin-inline-start: var(--cs-form-control-required-content-offset);
+  }
+
+  [part~='form-control-input'] {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: 0; /* Radios handle their own spacing */
+  }
+
+  /* Horizontal */
+  :host([orientation='horizontal']) [part~='form-control-input'] {
+    flex-direction: row;
+  }
+
+  /* Help text */
+  [part~='hint'] {
+    margin-block-start: 0.5em;
+  }
+`;
+
+export {
+  radio_group_styles_default
+};

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

@@ -0,0 +1,168 @@
+/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/components/pagination/pagination.styles.ts
+import { css } from "lit";
+var pagination_styles_default = css`
+  @layer cs-component {
+    :host {
+      display: contents;
+    }
+  }
+
+  .container {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    /* Sizing is relative to the current font size, so we use em rather than spacing tokens */
+    gap: 1em;
+  }
+
+  .summary {
+    font-size: 0.875em;
+    color: var(--cs-color-text-quiet);
+    white-space: nowrap;
+  }
+
+  /* Compact layout */
+  .label {
+    display: inline-flex;
+    align-items: center;
+    min-height: max(2.16em, 24px);
+    padding-inline: 0.75em;
+    color: var(--cs-color-text-normal);
+    white-space: nowrap;
+  }
+
+  .pagination {
+    display: flex;
+  }
+
+  .pages {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.25em;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .pages li {
+    display: flex;
+  }
+
+  .button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+
+    /* Guarantee a minimum 24×24px target (WCAG 2.5.8) while still scaling with font-size. */
+    min-width: max(2.16em, 24px);
+    min-height: max(2.16em, 24px);
+    padding-inline: 0.25em;
+
+    font: inherit;
+    font-size: inherit;
+    line-height: 1;
+    color: var(--cs-color-text-normal);
+    text-decoration: none;
+
+    background-color: transparent;
+    /* Default (outlined) appearance */
+    border: solid var(--cs-border-width-s) var(--cs-color-neutral-border-quiet);
+    border-radius: var(--cs-border-radius-m);
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    transition:
+      background-color var(--cs-transition-fast),
+      border-color var(--cs-transition-fast),
+      color var(--cs-transition-fast);
+  }
+
+  /* Ellipsis */
+  .button.ellipsis {
+    color: var(--cs-color-text-quiet);
+    position: relative;
+  }
+
+  .button.ellipsis:hover,
+  .button.ellipsis:focus-visible {
+    color: var(--cs-color-text-normal);
+  }
+
+  .button:hover {
+    background-color: var(--cs-color-neutral-fill-quiet);
+  }
+
+  .button:focus {
+    outline: none;
+  }
+
+  .button:focus-visible {
+    outline: var(--cs-focus-ring);
+    outline-offset: var(--cs-focus-ring-offset);
+  }
+
+  /* Current page */
+  .button.current {
+    font-weight: var(--cs-font-weight-bold);
+    color: var(--cs-color-brand-on-loud);
+    background-color: var(--cs-form-control-activated-color);
+    /* Read as a solid chip: drop the outlined border so it doesn't double up against the fill. */
+    border-color: transparent;
+  }
+
+  .button.current:hover {
+    background-color: var(--cs-form-control-activated-color);
+  }
+
+  /* Disabled (pagination buttons use aria-disabled so they stay focusable) */
+  .button[aria-disabled='true'] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .button[aria-disabled='true']:hover {
+    background-color: transparent;
+  }
+
+  cs-icon {
+    font-size: 0.875em;
+  }
+
+  /* Filled */
+  :host([appearance='filled']) .button {
+    background-color: var(--cs-color-neutral-fill-quiet);
+    border-color: transparent;
+  }
+
+  :host([appearance='filled']) .button:hover {
+    background-color: var(--cs-color-neutral-fill-normal);
+  }
+
+  :host([appearance='filled']) .button.current,
+  :host([appearance='filled']) .button.current:hover {
+    background-color: var(--cs-form-control-activated-color);
+  }
+
+  /* Plain */
+  :host([appearance='plain']) .button {
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  :host([appearance='plain']) .button:hover {
+    background-color: transparent;
+  }
+
+  :host([appearance='plain']) .button.current {
+    color: var(--cs-color-brand-on-loud);
+    background-color: var(--cs-form-control-activated-color);
+  }
+`;
+
+export {
+  pagination_styles_default
+};

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

@@ -0,0 +1,128 @@
+/*! Cornerstone Components 0.1.2 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  scroller_styles_default
+} from "./chunk.ZVLJHZ45.js";
+import {
+  CornerstoneElement,
+  customElement
+} from "./chunk.MJGPJYHJ.js";
+import {
+  LocalizeController
+} from "./chunk.Z3FB4NQE.js";
+import {
+  __decorateClass
+} from "./chunk.BGNVR6GC.js";
+
+// src/components/scroller/scroller.ts
+import { html, isServer } from "lit";
+import { eventOptions, property, query, state } from "lit/decorators.js";
+var CsScroller = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.resizeObserver = null;
+    this.canScroll = false;
+    this.orientation = "horizontal";
+    this.withoutScrollbar = false;
+    this.withoutShadow = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!isServer) {
+      this.resizeObserver = new ResizeObserver(() => this.updateScroll());
+      this.resizeObserver.observe(this);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver?.disconnect();
+  }
+  handleKeyDown(event) {
+    if (event.key === "Home") {
+      event.preventDefault();
+      this.content.scrollTo({
+        left: this.orientation === "horizontal" ? 0 : void 0,
+        top: this.orientation === "vertical" ? 0 : void 0
+      });
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      this.content.scrollTo({
+        left: this.orientation === "horizontal" ? this.content.scrollWidth : void 0,
+        top: this.orientation === "vertical" ? this.content.scrollHeight : void 0
+      });
+    }
+  }
+  handleSlotChange() {
+    this.updateScroll();
+  }
+  updateScroll() {
+    if (this.orientation === "horizontal") {
+      const clientWidth = Math.ceil(this.content.clientWidth);
+      const scrollLeft = Math.abs(Math.ceil(this.content.scrollLeft));
+      const scrollWidth = Math.ceil(this.content.scrollWidth);
+      const maxScroll = scrollWidth - clientWidth;
+      this.canScroll = maxScroll > 0;
+      const startShadowOpacity = Math.min(1, scrollLeft / (maxScroll * 0.05));
+      const endShadowOpacity = Math.min(1, (maxScroll - scrollLeft) / (maxScroll * 0.05));
+      this.style.setProperty("--start-shadow-opacity", String(startShadowOpacity || 0));
+      this.style.setProperty("--end-shadow-opacity", String(endShadowOpacity || 0));
+    } else {
+      const clientHeight = Math.ceil(this.content.clientHeight);
+      const scrollTop = Math.abs(Math.ceil(this.content.scrollTop));
+      const scrollHeight = Math.ceil(this.content.scrollHeight);
+      const maxScroll = scrollHeight - clientHeight;
+      this.canScroll = maxScroll > 0;
+      const startShadowOpacity = Math.min(1, scrollTop / (maxScroll * 0.05));
+      const endShadowOpacity = Math.min(1, (maxScroll - scrollTop) / (maxScroll * 0.05));
+      this.style.setProperty("--start-shadow-opacity", String(startShadowOpacity || 0));
+      this.style.setProperty("--end-shadow-opacity", String(endShadowOpacity || 0));
+    }
+  }
+  render() {
+    return html`
+      ${this.withoutShadow ? "" : html`
+              <div id="start-shadow" part="start-shadow" aria-hidden="true"></div>
+              <div id="end-shadow" part="end-shadow" aria-hidden="true"></div>
+            `}
+
+      <div
+        id="content"
+        part="content"
+        role="region"
+        aria-label=${this.localize.term("scrollableRegion")}
+        tabindex=${this.canScroll ? "0" : "-1"}
+        @keydown=${this.handleKeyDown}
+        @scroll=${this.updateScroll}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+CsScroller.css = [scroller_styles_default];
+__decorateClass([
+  query("#content")
+], CsScroller.prototype, "content", 2);
+__decorateClass([
+  state()
+], CsScroller.prototype, "canScroll", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsScroller.prototype, "orientation", 2);
+__decorateClass([
+  property({ attribute: "without-scrollbar", type: Boolean, reflect: true })
+], CsScroller.prototype, "withoutScrollbar", 2);
+__decorateClass([
+  property({ attribute: "without-shadow", type: Boolean, reflect: true })
+], CsScroller.prototype, "withoutShadow", 2);
+__decorateClass([
+  eventOptions({ passive: true })
+], CsScroller.prototype, "updateScroll", 1);
+CsScroller = __decorateClass([
+  customElement("cs-scroller")
+], CsScroller);
+
+export {
+  CsScroller
+};