@cruglobal/cornerstone-components 0.1.1 → 0.1.3

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

@@ -0,0 +1,244 @@
+/*! Cornerstone Components 0.1.3 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  checkbox_styles_default
+} from "./chunk.UYDATDO2.js";
+import {
+  RequiredValidator
+} from "./chunk.4WMSVRXY.js";
+import {
+  form_control_styles_default
+} from "./chunk.BZRZRDCS.js";
+import {
+  HasSlotController
+} from "./chunk.7VYLODAW.js";
+import {
+  CornerstoneFormAssociatedElement
+} from "./chunk.7XPYDR4R.js";
+import {
+  size_styles_default
+} from "./chunk.SWOOY6AB.js";
+import {
+  watch
+} from "./chunk.MBVC472U.js";
+import {
+  customElement
+} from "./chunk.LGF4LDQG.js";
+import {
+  __decorateClass
+} from "./chunk.6UN6XRW4.js";
+
+// src/components/checkbox/checkbox.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 CsCheckbox = class extends CornerstoneFormAssociatedElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "hint");
+    this.title = "";
+    // make reactive to pass through
+    this._value = this.getAttribute("value") ?? null;
+    this.size = "m";
+    this.disabled = false;
+    this.indeterminate = false;
+    this._checked = null;
+    this.defaultChecked = this.hasAttribute("checked");
+    this.required = false;
+    this.hint = "";
+    this.ssrHint = false;
+  }
+  static get validators() {
+    return [
+      ...super.validators,
+      RequiredValidator({
+        validationProperty: "checked",
+        // Use a checkbox so we get "free" translation strings.
+        validationElement: () => Object.assign(document.createElement("input"), {
+          type: "checkbox",
+          required: true
+        })
+      })
+    ];
+  }
+  /** The value of the checkbox, 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.indeterminate = false;
+    this.updateComplete.then(() => {
+      this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.didSSR && !this.hasUpdated) {
+      this.updateComplete.then(() => {
+        this.handleDefaultCheckedChange();
+      });
+      return;
+    }
+    this.handleDefaultCheckedChange();
+  }
+  handleDefaultCheckedChange() {
+    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.input.indeterminate = this.indeterminate;
+    }
+    this.customStates.set("checked", this.checked);
+    this.customStates.set("indeterminate", this.indeterminate);
+    this.updateValidity();
+  }
+  handleDisabledChange() {
+    this.customStates.set("disabled", this.disabled);
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("value") || changedProperties.has("checked") || changedProperties.has("defaultChecked") || changedProperties.has("disabled")) {
+      this.handleValueOrCheckedChange();
+    }
+  }
+  formResetCallback() {
+    this._checked = null;
+    super.formResetCallback();
+    this.handleValueOrCheckedChange();
+  }
+  /** Simulates a click on the checkbox. */
+  click() {
+    this.input.click();
+  }
+  /** Sets focus on the checkbox. */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the checkbox. */
+  blur() {
+    this.input.blur();
+  }
+  render() {
+    const hasHintSlot = this.hasSlotController.test("hint", "ssrHint");
+    const hasHint = this.hint ? true : !!hasHintSlot;
+    const isIndeterminate = !this.checked && this.indeterminate;
+    const iconName = isIndeterminate ? "horizontal_rule" : "check";
+    const stateIconPart = isIndeterminate ? "indeterminate-icon" : "checked-icon";
+    const checkedAttribute = this.didSSR && !this.hasUpdated ? this.checked : this.defaultChecked;
+    const checkedProperty = this.didSSR && !this.hasUpdated ? null : live(this.checked);
+    return html`
+      <label part="checkbox">
+        <span part="control">
+          <input
+            class="input"
+            type="checkbox"
+            title=${this.title}
+            name=${ifDefined(this.name)}
+            value=${ifDefined(this.value)}
+            .indeterminate=${live(this.indeterminate)}
+            .checked=${ifDefined(checkedProperty)}
+            ?checked=${checkedAttribute}
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            aria-checked=${this.indeterminate ? "mixed" : this.checked ? "true" : "false"}
+            aria-describedby="hint"
+            @click=${this.handleClick}
+          />
+
+          <cs-icon part="${stateIconPart} icon" library="system" name=${iconName}></cs-icon>
+        </span>
+
+        <slot part="label"></slot>
+      </label>
+
+      <slot
+        id="hint"
+        part="hint"
+        name="hint"
+        aria-hidden=${hasHint ? "false" : "true"}
+        class="${classMap({ "has-slotted": hasHint })}"
+      >
+        ${this.hint}
+      </slot>
+    `;
+  }
+};
+CsCheckbox.css = [form_control_styles_default, size_styles_default, checkbox_styles_default];
+CsCheckbox.shadowRootOptions = { ...CornerstoneFormAssociatedElement.shadowRootOptions, delegatesFocus: true };
+__decorateClass([
+  query('input[type="checkbox"]')
+], CsCheckbox.prototype, "input", 2);
+__decorateClass([
+  property()
+], CsCheckbox.prototype, "title", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsCheckbox.prototype, "value", 1);
+__decorateClass([
+  property({ reflect: true })
+], CsCheckbox.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean })
+], CsCheckbox.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CsCheckbox.prototype, "indeterminate", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: false })
+], CsCheckbox.prototype, "checked", 1);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "checked" })
+], CsCheckbox.prototype, "defaultChecked", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CsCheckbox.prototype, "required", 2);
+__decorateClass([
+  property()
+], CsCheckbox.prototype, "hint", 2);
+__decorateClass([
+  property({ attribute: "ssr-hint", type: Boolean })
+], CsCheckbox.prototype, "ssrHint", 2);
+__decorateClass([
+  watch(["checked", "defaultChecked"])
+], CsCheckbox.prototype, "handleDefaultCheckedChange", 1);
+__decorateClass([
+  watch(["checked", "indeterminate"])
+], CsCheckbox.prototype, "handleStateChange", 1);
+__decorateClass([
+  watch("disabled")
+], CsCheckbox.prototype, "handleDisabledChange", 1);
+CsCheckbox = __decorateClass([
+  customElement("cs-checkbox")
+], CsCheckbox);
+CsCheckbox.disableWarning?.("change-in-update");
+
+export {
+  CsCheckbox
+};

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,54 @@
+/*! Cornerstone Components 0.1.3 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  getIconPath
+} from "./chunk.T5IQA4IL.js";
+
+// src/components/icon/library.default.ts
+var MS_VERSION = "0.46.0";
+var STYLES = ["sharp", "outlined", "rounded"];
+var WEIGHTS = [100, 200, 300, 400, 500, 600, 700];
+var DEFAULT_WEIGHT = 400;
+function getIconStyle(family) {
+  return STYLES.includes(family) ? family : "sharp";
+}
+function getIconWeight(weight) {
+  const value = Number(weight);
+  if (!Number.isFinite(value)) {
+    return DEFAULT_WEIGHT;
+  }
+  return WEIGHTS.reduce(
+    (closest, candidate) => Math.abs(candidate - value) < Math.abs(closest - value) ? candidate : closest
+  );
+}
+function getIconFileName(name, variant) {
+  return variant === "fill" ? `${name}-fill` : name;
+}
+function getIconUrl(name, family, variant, weight) {
+  const style = getIconStyle(family);
+  const resolvedWeight = getIconWeight(weight);
+  const fileName = getIconFileName(name, variant);
+  const iconBase = getIconPath();
+  if (iconBase) {
+    return `${iconBase}/${resolvedWeight}/${style}/${fileName}.svg`;
+  }
+  return `https://cdn.jsdelivr.net/npm/@material-symbols/svg-${resolvedWeight}@${MS_VERSION}/${style}/${fileName}.svg`;
+}
+var library = {
+  name: "default",
+  resolver: (name, family = "sharp", variant = "regular", _autoWidth = false, weight = DEFAULT_WEIGHT) => {
+    return getIconUrl(name, family, variant, weight);
+  },
+  mutator: (svg) => {
+    if (!svg.hasAttribute("fill")) {
+      svg.setAttribute("fill", "currentColor");
+    }
+  }
+};
+var library_default_default = library;
+
+export {
+  getIconStyle,
+  getIconWeight,
+  getIconFileName,
+  library_default_default
+};

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

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

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

@@ -0,0 +1,24 @@
+/*! Cornerstone Components 0.1.3 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsRandomContent
+} from "./chunk.2KBJYS7S.js";
+
+// src/react/random-content/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cs-random-content";
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CsRandomContent,
+  react: React,
+  events: {
+    onCsContentChange: "cs-content-change"
+  },
+  displayName: "CsRandomContent"
+});
+var random_content_default = reactWrapper;
+
+export {
+  random_content_default
+};

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

@@ -0,0 +1,110 @@
+/*! Cornerstone Components 0.1.3 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/components/random-content/random-content.styles.ts
+import { css } from "lit";
+var random_content_styles_default = css`
+  :host {
+    display: contents;
+  }
+
+  /*
+   * Force-hide unselected children. A bare [hidden] (display: none from the UA sheet) loses to any
+   * author display set on the child — a utility class like .cs-flank, or a component's own
+   * :host display — so children with their own layout wouldn't actually hide without this.
+   */
+  ::slotted([hidden]) {
+    display: none !important;
+  }
+
+  /*
+   * @keyframes are defined in both document scope (random-content.ts) and here:
+   * Chromium resolves animation-name from the document for slotted elements;
+   * WebKit resolves it from the shadow root. Both copies are needed.
+   */
+
+  @keyframes cs-rc-fade {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes cs-rc-fade-up {
+    from {
+      opacity: 0;
+      transform: translateY(var(--animation-translate, 0.5em));
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes cs-rc-fade-down {
+    from {
+      opacity: 0;
+      transform: translateY(calc(-1 * var(--animation-translate, 0.5em)));
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes cs-rc-fade-left {
+    from {
+      opacity: 0;
+      transform: translateX(var(--animation-translate, 0.5em));
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes cs-rc-fade-right {
+    from {
+      opacity: 0;
+      transform: translateX(calc(-1 * var(--animation-translate, 0.5em)));
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  /* The JS already skips animations under reduced motion; this guards CSS-only consumers too. */
+  @media (prefers-reduced-motion: no-preference) {
+    ::slotted([data-cs-animation]) {
+      animation-duration: var(--animation-duration, 300ms);
+      animation-timing-function: var(--animation-easing, ease);
+      animation-fill-mode: both;
+    }
+
+    ::slotted([data-cs-animation='fade']) {
+      animation-name: cs-rc-fade;
+    }
+
+    ::slotted([data-cs-animation='fade-up']) {
+      animation-name: cs-rc-fade-up;
+    }
+
+    ::slotted([data-cs-animation='fade-down']) {
+      animation-name: cs-rc-fade-down;
+    }
+
+    ::slotted([data-cs-animation='fade-left']) {
+      animation-name: cs-rc-fade-left;
+    }
+
+    ::slotted([data-cs-animation='fade-right']) {
+      animation-name: cs-rc-fade-right;
+    }
+  }
+`;
+
+export {
+  random_content_styles_default
+};

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

@@ -0,0 +1,130 @@
+/*! Cornerstone Components 0.1.3 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  checkbox_group_styles_default
+} from "./chunk.6Y6TICW4.js";
+import {
+  form_control_styles_default
+} from "./chunk.BZRZRDCS.js";
+import {
+  HasSlotController
+} from "./chunk.7VYLODAW.js";
+import {
+  size_styles_default
+} from "./chunk.SWOOY6AB.js";
+import {
+  CornerstoneElement,
+  customElement
+} from "./chunk.LGF4LDQG.js";
+import {
+  __decorateClass
+} from "./chunk.6UN6XRW4.js";
+
+// src/components/checkbox-group/checkbox-group.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var CsCheckboxGroup = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "hint", "label");
+    this.label = "";
+    this.hint = "";
+    this.orientation = "vertical";
+    this.required = false;
+    this.ssrLabel = false;
+    this.ssrHint = false;
+    /**
+     * Applies the group's size to each grouped checkbox/switch
+     */
+    this.syncCheckboxElements = () => {
+      if (!this.size) {
+        return;
+      }
+      for (const checkbox of this.getAllCheckboxes()) {
+        checkbox.setAttribute("size", this.size);
+      }
+    };
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("size")) {
+      this.syncCheckboxElements();
+    }
+  }
+  /** Returns all grouped checkbox and switch elements. */
+  getAllCheckboxes() {
+    return [...this.querySelectorAll(":is(cs-checkbox, cs-switch)")];
+  }
+  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;
+    return html`
+      <fieldset
+        part="form-control"
+        class=${classMap({
+      "form-control": true,
+      "checkbox-group-required": this.required,
+      "form-control-has-label": hasLabel
+    })}
+      >
+        <label
+          part="form-control-label"
+          id="label"
+          class=${classMap({
+      label: true,
+      "has-label": hasLabel
+    })}
+          aria-hidden=${hasLabel ? "false" : "true"}
+        >
+          <slot name="label">${this.label}</slot>
+        </label>
+
+        <div part="form-control-input" role="group" aria-labelledby="label" aria-describedby="hint">
+          <slot @slotchange=${this.syncCheckboxElements}></slot>
+        </div>
+
+        <slot
+          id="hint"
+          name="hint"
+          part="hint"
+          class=${classMap({
+      "has-slotted": hasHint
+    })}
+          aria-hidden=${hasHint ? "false" : "true"}
+          >${this.hint}</slot
+        >
+      </fieldset>
+    `;
+  }
+};
+CsCheckboxGroup.css = [size_styles_default, form_control_styles_default, checkbox_group_styles_default];
+__decorateClass([
+  property()
+], CsCheckboxGroup.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "hint" })
+], CsCheckboxGroup.prototype, "hint", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsCheckboxGroup.prototype, "orientation", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsCheckboxGroup.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CsCheckboxGroup.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "ssr-label" })
+], CsCheckboxGroup.prototype, "ssrLabel", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "ssr-hint" })
+], CsCheckboxGroup.prototype, "ssrHint", 2);
+CsCheckboxGroup = __decorateClass([
+  customElement("cs-checkbox-group")
+], CsCheckboxGroup);
+CsCheckboxGroup.disableWarning?.("change-in-update");
+
+export {
+  CsCheckboxGroup
+};