@cruglobal/cornerstone-components 0.1.0

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

@@ -0,0 +1,297 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  i
+} from "./chunk.MZHGFMA5.js";
+
+// src/components/select/select.styles.ts
+var select_styles_default = i`
+  :host {
+    --tag-max-size: 10ch;
+    --show-duration: var(--cs-transition-fast);
+    --hide-duration: var(--cs-transition-fast);
+  }
+
+  /* Add ellipses to multi select options */
+  :host cs-tag::part(content) {
+    display: initial;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: var(--tag-max-size);
+  }
+
+  :host .disabled [part~='combobox'] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    outline: none;
+  }
+
+  :host .enabled:is(.open, :focus-within) [part~='combobox'] {
+    outline-color: var(--cs-color-focus);
+  }
+
+  /** The popup */
+  .select {
+    flex: 1 1 auto;
+    display: inline-flex;
+    width: 100%;
+    position: relative;
+    vertical-align: middle;
+
+    /* Pass through from select to the popup */
+    --show-duration: inherit;
+    --hide-duration: inherit;
+
+    &::part(popup) {
+      z-index: 900;
+    }
+
+    &[data-current-placement^='top']::part(popup) {
+      transform-origin: bottom;
+    }
+
+    &[data-current-placement^='bottom']::part(popup) {
+      transform-origin: top;
+    }
+  }
+
+  /* Combobox */
+  .combobox {
+    flex: 1;
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    align-items: center;
+    justify-content: start;
+
+    min-height: var(--cs-form-control-height);
+
+    background-color: var(--cs-form-control-background-color);
+    border-color: var(--cs-form-control-border-color);
+    border-radius: var(--cs-form-control-border-radius);
+    border-style: var(--cs-form-control-border-style);
+    border-width: var(--cs-form-control-border-width);
+    color: var(--cs-form-control-value-color);
+    cursor: pointer;
+    font-family: inherit;
+    font-weight: var(--cs-form-control-value-font-weight);
+    line-height: var(--cs-form-control-value-line-height);
+    overflow: hidden;
+    padding: 0 var(--cs-form-control-padding-inline);
+    position: relative;
+    vertical-align: middle;
+    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);
+    outline: var(--cs-focus-ring-style) var(--cs-focus-ring-width) transparent;
+    outline-offset: var(--cs-focus-ring-offset);
+
+    /* Pills */
+    :host([pill]) & {
+      border-radius: var(--cs-border-radius-pill);
+    }
+  }
+
+  /* Appearance modifiers */
+  :host([appearance='outlined']) .combobox {
+    background-color: var(--cs-form-control-background-color);
+    border-color: var(--cs-form-control-border-color);
+  }
+
+  :host([appearance='filled']) .combobox {
+    background-color: var(--cs-color-neutral-fill-quiet);
+    border-color: var(--cs-color-neutral-fill-quiet);
+  }
+
+  :host([appearance='filled-outlined']) .combobox {
+    background-color: var(--cs-color-neutral-fill-quiet);
+    border-color: var(--cs-form-control-border-color);
+  }
+
+  .display-input {
+    position: relative;
+    width: 100%;
+    font: inherit;
+    border: none;
+    background: none;
+    line-height: var(--cs-form-control-value-line-height);
+    color: var(--cs-form-control-value-color);
+    cursor: inherit;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    -webkit-appearance: none;
+
+    &:focus {
+      outline: none;
+    }
+
+    &::placeholder {
+      color: var(--cs-form-control-placeholder-color);
+    }
+  }
+
+  /* Manage spacing when tags are present */
+  :host([multiple]) {
+    --_padding-with-tags: calc(var(--cs-form-control-height) * 0.1 - var(--cs-form-control-border-width));
+
+    & .combobox:has(.tags cs-tag) {
+      padding-block: var(--_padding-with-tags);
+      padding-inline-start: var(--_padding-with-tags);
+    }
+  }
+
+  /* Visually hide the display input when multiple is enabled */
+  :host([multiple]) .combobox:has(.tags cs-tag) .display-input {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+  }
+
+  .value-input {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+  }
+
+  .tags {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.25em;
+
+    /* These are !important because a document-level universal margin reset would otherwise beat them:
+     a slotted element belongs to the outer tree. See callout.styles.ts for the full note. */
+    &::slotted(cs-tag) {
+      cursor: pointer !important;
+    }
+
+    .disabled &,
+    .disabled &::slotted(cs-tag) {
+      cursor: not-allowed !important;
+    }
+  }
+
+  /* Start and End */
+
+  .start,
+  .end {
+    flex: 0;
+    display: inline-flex;
+    align-items: center;
+    color: var(--cs-color-neutral-on-quiet);
+  }
+
+  .end::slotted(*) {
+    margin-inline-start: var(--cs-form-control-padding-inline) !important;
+  }
+
+  .start::slotted(*) {
+    margin-inline-end: var(--cs-form-control-padding-inline) !important;
+  }
+
+  :host([multiple]) .combobox:has(.tags cs-tag) .start::slotted(*) {
+    margin-inline-start: calc(var(--cs-form-control-padding-inline) - var(--_padding-with-tags)) !important;
+  }
+
+  /* Clear button */
+  [part~='clear-button'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: inherit;
+    color: var(--cs-color-neutral-on-quiet);
+    border: none;
+    background: none;
+    padding: 0;
+    transition: color var(--cs-transition-normal);
+    cursor: pointer;
+    margin-inline-start: var(--cs-form-control-padding-inline);
+
+    &:focus {
+      outline: none;
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        color: color-mix(in oklab, currentColor, var(--cs-color-mix-hover));
+      }
+    }
+
+    &:active {
+      color: color-mix(in oklab, currentColor, var(--cs-color-mix-active));
+    }
+  }
+
+  /* Expand icon */
+  .expand-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    color: var(--cs-color-neutral-on-quiet);
+    transition: rotate var(--cs-transition-slow) var(--cs-transition-easing);
+    rotate: 0deg;
+    margin-inline-start: var(--cs-form-control-padding-inline);
+
+    .open & {
+      rotate: -180deg;
+    }
+  }
+
+  /* Listbox */
+  .listbox {
+    display: block;
+    position: relative;
+    font: inherit;
+    box-shadow: var(--cs-shadow-m);
+    background: var(--cs-color-surface-raised);
+    border-color: var(--cs-color-surface-border);
+    border-radius: var(--cs-border-radius-m);
+    border-style: var(--cs-border-style);
+    border-width: var(--cs-border-width-s);
+    padding: 0.25em;
+    overflow: auto;
+    overscroll-behavior: none;
+
+    /* Make sure it adheres to the popup's auto size */
+    max-width: var(--auto-size-available-width);
+    max-height: var(--auto-size-available-height);
+
+    &::slotted(cs-divider) {
+      --spacing: 0.5em;
+    }
+  }
+
+  /* Space options with half the listbox's padding */
+  .listbox slot:not([name]) {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125em;
+  }
+
+  slot:not([name])::slotted(small) {
+    display: block;
+    font-size: var(--cs-font-size-smaller);
+    font-weight: var(--cs-font-weight-semibold);
+    color: var(--cs-color-text-quiet);
+    padding-block: 0.5em;
+    padding-inline: 2.25em;
+  }
+`;
+
+export {
+  select_styles_default
+};

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

@@ -0,0 +1,12 @@
+/*! Cornerstone Components 0.1.0 - 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/bundled/chunks/chunk.TPLWITTC.js

@@ -0,0 +1,58 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  callout_styles_default
+} from "./chunk.3NBLWWHJ.js";
+import {
+  size_styles_default
+} from "./chunk.CBPTZHUR.js";
+import {
+  variants_styles_default
+} from "./chunk.KN5NL54R.js";
+import {
+  CornerstoneElement,
+  customElement,
+  n
+} from "./chunk.RSRMXC3L.js";
+import {
+  b
+} from "./chunk.XOXMMJPV.js";
+import {
+  __decorateClass
+} from "./chunk.UEAH232U.js";
+
+// src/components/callout/callout.ts
+var CsCallout = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "brand";
+    this.size = "m";
+  }
+  render() {
+    return b`
+      <div part="icon">
+        <slot name="icon"></slot>
+      </div>
+
+      <div part="message">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+CsCallout.css = [callout_styles_default, variants_styles_default, size_styles_default];
+__decorateClass([
+  n({ reflect: true })
+], CsCallout.prototype, "variant", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsCallout.prototype, "appearance", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsCallout.prototype, "size", 2);
+CsCallout = __decorateClass([
+  customElement("cs-callout")
+], CsCallout);
+
+export {
+  CsCallout
+};

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

@@ -0,0 +1,15 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  i
+} from "./chunk.MZHGFMA5.js";
+
+// src/components/resize-observer/resize-observer.styles.ts
+var resize_observer_styles_default = i`
+  :host {
+    display: contents;
+  }
+`;
+
+export {
+  resize_observer_styles_default
+};

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

@@ -0,0 +1,89 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  progress_ring_styles_default
+} from "./chunk.IUTLQHI3.js";
+import {
+  o
+} from "./chunk.OPY26TZJ.js";
+import {
+  CornerstoneElement,
+  customElement,
+  e,
+  n,
+  r
+} from "./chunk.RSRMXC3L.js";
+import {
+  LocalizeController
+} from "./chunk.MGBGUTRM.js";
+import {
+  b
+} from "./chunk.XOXMMJPV.js";
+import {
+  __decorateClass
+} from "./chunk.UEAH232U.js";
+
+// src/components/progress-ring/progress-ring.ts
+var CsProgressRing = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.value = 0;
+    this.label = "";
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("value")) {
+      const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue("r"));
+      const circumference = 2 * Math.PI * radius;
+      const offset = circumference - this.value / 100 * circumference;
+      this.indicatorOffset = `${offset}px`;
+    }
+  }
+  render() {
+    return b`
+      <div
+        part="progress-ring"
+        class="progress-ring"
+        role="progressbar"
+        aria-label=${this.label.length > 0 ? this.label : this.localize.term("progress")}
+        aria-describedby="label"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow="${this.value}"
+        style=${o({ "--percentage": this.value / 100 })}
+      >
+        <svg class="image">
+          <circle part="track" class="track"></circle>
+          <circle
+            part="indicator"
+            class="indicator"
+            style=${o({ "stroke-dashoffset": this.indicatorOffset })}
+          ></circle>
+        </svg>
+
+        <slot id="label" part="label" class="label"></slot>
+      </div>
+    `;
+  }
+};
+CsProgressRing.css = progress_ring_styles_default;
+__decorateClass([
+  e(".indicator")
+], CsProgressRing.prototype, "indicator", 2);
+__decorateClass([
+  r()
+], CsProgressRing.prototype, "indicatorOffset", 2);
+__decorateClass([
+  n({ type: Number, reflect: true })
+], CsProgressRing.prototype, "value", 2);
+__decorateClass([
+  n()
+], CsProgressRing.prototype, "label", 2);
+CsProgressRing = __decorateClass([
+  customElement("cs-progress-ring")
+], CsProgressRing);
+CsProgressRing.disableWarning?.("change-in-update");
+
+export {
+  CsProgressRing
+};

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

@@ -0,0 +1,32 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  o,
+  require_react
+} from "./chunk.7IWYAIV2.js";
+import {
+  CsTooltip
+} from "./chunk.T7K3NQ6Z.js";
+import {
+  __toESM
+} from "./chunk.UEAH232U.js";
+
+// src/react/tooltip/index.ts
+var React = __toESM(require_react(), 1);
+var tagName = "cs-tooltip";
+var reactWrapper = o({
+  tagName,
+  elementClass: CsTooltip,
+  react: React,
+  events: {
+    onCsShow: "cs-show",
+    onCsAfterShow: "cs-after-show",
+    onCsHide: "cs-hide",
+    onCsAfterHide: "cs-after-hide"
+  },
+  displayName: "CsTooltip"
+});
+var tooltip_default = reactWrapper;
+
+export {
+  tooltip_default
+};

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

@@ -0,0 +1,29 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  o,
+  require_react
+} from "./chunk.7IWYAIV2.js";
+import {
+  CsMutationObserver
+} from "./chunk.ALHQDF3Q.js";
+import {
+  __toESM
+} from "./chunk.UEAH232U.js";
+
+// src/react/mutation-observer/index.ts
+var React = __toESM(require_react(), 1);
+var tagName = "cs-mutation-observer";
+var reactWrapper = o({
+  tagName,
+  elementClass: CsMutationObserver,
+  react: React,
+  events: {
+    onCsMutation: "cs-mutation"
+  },
+  displayName: "CsMutationObserver"
+});
+var mutation_observer_default = reactWrapper;
+
+export {
+  mutation_observer_default
+};

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

@@ -0,0 +1,30 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  o,
+  require_react
+} from "./chunk.7IWYAIV2.js";
+import {
+  CsIcon
+} from "./chunk.RK2WQVRH.js";
+import {
+  __toESM
+} from "./chunk.UEAH232U.js";
+
+// src/react/icon/index.ts
+var React = __toESM(require_react(), 1);
+var tagName = "cs-icon";
+var reactWrapper = o({
+  tagName,
+  elementClass: CsIcon,
+  react: React,
+  events: {
+    onCsLoad: "cs-load",
+    onCsError: "cs-error"
+  },
+  displayName: "CsIcon"
+});
+var icon_default = reactWrapper;
+
+export {
+  icon_default
+};

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

@@ -0,0 +1,27 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  o,
+  require_react
+} from "./chunk.7IWYAIV2.js";
+import {
+  CsOption
+} from "./chunk.KAIO5XHI.js";
+import {
+  __toESM
+} from "./chunk.UEAH232U.js";
+
+// src/react/option/index.ts
+var React = __toESM(require_react(), 1);
+var tagName = "cs-option";
+var reactWrapper = o({
+  tagName,
+  elementClass: CsOption,
+  react: React,
+  events: {},
+  displayName: "CsOption"
+});
+var option_default = reactWrapper;
+
+export {
+  option_default
+};

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

@@ -0,0 +1,64 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __commonJS = (cb, mod) => function __require() {
+  try {
+    return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+  } catch (e) {
+    throw mod = 0, e;
+  }
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+
+export {
+  __commonJS,
+  __export,
+  __toESM,
+  __decorateClass,
+  __publicField,
+  __privateGet,
+  __privateAdd,
+  __privateSet,
+  __privateMethod
+};

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

@@ -0,0 +1,44 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  divider_styles_default
+} from "./chunk.PKTJKPXW.js";
+import {
+  watch
+} from "./chunk.3QOMHIHS.js";
+import {
+  CornerstoneElement,
+  customElement,
+  n
+} from "./chunk.RSRMXC3L.js";
+import {
+  __decorateClass
+} from "./chunk.UEAH232U.js";
+
+// src/components/divider/divider.ts
+var CsDivider = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.orientation = "horizontal";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "separator");
+  }
+  handleVerticalChange() {
+    this.setAttribute("aria-orientation", this.orientation);
+  }
+};
+CsDivider.css = divider_styles_default;
+__decorateClass([
+  n({ reflect: true })
+], CsDivider.prototype, "orientation", 2);
+__decorateClass([
+  watch("orientation")
+], CsDivider.prototype, "handleVerticalChange", 1);
+CsDivider = __decorateClass([
+  customElement("cs-divider")
+], CsDivider);
+
+export {
+  CsDivider
+};