@cruglobal/cornerstone-components 0.6.1 → 0.7.0

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

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

@@ -0,0 +1,32 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/components/known-date/internal/field-order.ts
+var orderCache = /* @__PURE__ */ new Map();
+function localeFieldOrder(locale) {
+  const key = locale || "en";
+  const cached = orderCache.get(key);
+  if (cached) {
+    return cached;
+  }
+  const formatter = new Intl.DateTimeFormat(key, {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    calendar: "gregory",
+    numberingSystem: "latn"
+  });
+  const parts = formatter.formatToParts(new Date(2026, 0, 23));
+  const order = [];
+  for (const part of parts) {
+    if (part.type === "year" || part.type === "month" || part.type === "day") {
+      order.push(part.type);
+    }
+  }
+  const resolved = order.length === 3 ? order : ["month", "day", "year"];
+  orderCache.set(key, resolved);
+  return resolved;
+}
+
+export {
+  localeFieldOrder
+};

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

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

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

@@ -0,0 +1,58 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  library_brands_default
+} from "./chunk.A6PE2BDS.js";
+import {
+  library_default_default
+} from "./chunk.RW2GBP4G.js";
+import {
+  library_system_default
+} from "./chunk.F3TEYKB3.js";
+
+// src/components/icon/library.ts
+var defaultIconFamily = "sharp";
+var registry = [library_default_default, library_system_default, library_brands_default];
+var watchedIcons = /* @__PURE__ */ new Set();
+function watchIcon(icon) {
+  watchedIcons.add(icon);
+}
+function unwatchIcon(icon) {
+  watchedIcons.delete(icon);
+}
+function getIconLibrary(name) {
+  return registry.find((lib) => lib.name === name);
+}
+function registerIconLibrary(name, options) {
+  unregisterIconLibrary(name);
+  registry.push({
+    name,
+    resolver: options.resolver,
+    mutator: options.mutator,
+    spriteSheet: options.spriteSheet
+  });
+  watchedIcons.forEach((icon) => {
+    if (icon.library === name) {
+      icon.setIcon();
+    }
+  });
+}
+function unregisterIconLibrary(name) {
+  registry = registry.filter((lib) => lib.name !== name);
+}
+function setDefaultIconFamily(family) {
+  defaultIconFamily = family;
+  watchedIcons.forEach((icon) => icon.setIcon());
+}
+function getDefaultIconFamily() {
+  return defaultIconFamily;
+}
+
+export {
+  watchIcon,
+  unwatchIcon,
+  getIconLibrary,
+  registerIconLibrary,
+  unregisterIconLibrary,
+  setDefaultIconFamily,
+  getDefaultIconFamily
+};

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

@@ -0,0 +1,33 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  o,
+  require_react
+} from "./chunk.VQJXWKQY.js";
+import {
+  CsColorPicker
+} from "./chunk.AHGRUSDK.js";
+import {
+  __toESM
+} from "./chunk.4QJR2RKX.js";
+
+// src/react/color-picker/index.ts
+var React = __toESM(require_react(), 1);
+var tagName = "cs-color-picker";
+var reactWrapper = o({
+  tagName,
+  elementClass: CsColorPicker,
+  react: React,
+  events: {
+    onCsShow: "cs-show",
+    onCsAfterShow: "cs-after-show",
+    onCsHide: "cs-hide",
+    onCsAfterHide: "cs-after-hide",
+    onCsInvalid: "cs-invalid"
+  },
+  displayName: "CsColorPicker"
+});
+var color_picker_default = reactWrapper;
+
+export {
+  color_picker_default
+};

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

@@ -0,0 +1,94 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  breadcrumb_styles_default
+} from "./chunk.WPYHP4KG.js";
+import {
+  CornerstoneElement,
+  customElement,
+  e,
+  n
+} from "./chunk.6GJWBDJU.js";
+import {
+  LocalizeController
+} from "./chunk.HGW5EEZU.js";
+import {
+  b
+} from "./chunk.IPM67WBE.js";
+import {
+  __decorateClass
+} from "./chunk.4QJR2RKX.js";
+
+// src/components/breadcrumb/breadcrumb.ts
+var CsBreadcrumb = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.separatorDir = this.localize.dir();
+    this.label = "";
+  }
+  // Generates a clone of the separator element to use for each breadcrumb item
+  getSeparator() {
+    const separator = this.separatorSlot.assignedElements({ flatten: true })[0];
+    const clone = separator.cloneNode(true);
+    [clone, ...clone.querySelectorAll("[id]")].forEach((el) => el.removeAttribute("id"));
+    clone.setAttribute("data-default", "");
+    clone.slot = "separator";
+    return clone;
+  }
+  handleSlotChange() {
+    const items = [...this.defaultSlot.assignedElements({ flatten: true })].filter(
+      (item) => item.tagName.toLowerCase() === "cs-breadcrumb-item"
+    );
+    items.forEach((item, index) => {
+      const separator = item.querySelector('[slot="separator"]');
+      if (separator === null) {
+        item.append(this.getSeparator());
+      } else if (separator.hasAttribute("data-default")) {
+        separator.replaceWith(this.getSeparator());
+      } else {
+      }
+      if (index === items.length - 1) {
+        item.setAttribute("aria-current", "page");
+      } else {
+        item.removeAttribute("aria-current");
+      }
+    });
+  }
+  render() {
+    if (this.separatorDir !== this.localize.dir()) {
+      this.separatorDir = this.localize.dir();
+      this.updateComplete.then(() => this.handleSlotChange());
+    }
+    return b`
+      <nav part="breadcrumb" class="breadcrumb" aria-label=${this.label}>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </nav>
+
+      <span hidden aria-hidden="true">
+        <slot name="separator">
+          <cs-icon
+            name=${this.localize.dir() === "rtl" ? "keyboard_arrow_left" : "keyboard_arrow_right"}
+            library="system"
+          ></cs-icon>
+        </slot>
+      </span>
+    `;
+  }
+};
+CsBreadcrumb.css = breadcrumb_styles_default;
+__decorateClass([
+  e("slot")
+], CsBreadcrumb.prototype, "defaultSlot", 2);
+__decorateClass([
+  e('slot[name="separator"]')
+], CsBreadcrumb.prototype, "separatorSlot", 2);
+__decorateClass([
+  n()
+], CsBreadcrumb.prototype, "label", 2);
+CsBreadcrumb = __decorateClass([
+  customElement("cs-breadcrumb")
+], CsBreadcrumb);
+
+export {
+  CsBreadcrumb
+};

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

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

@@ -0,0 +1,32 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  o,
+  require_react
+} from "./chunk.VQJXWKQY.js";
+import {
+  CsAccordion
+} from "./chunk.VJMH7LEK.js";
+import {
+  __toESM
+} from "./chunk.4QJR2RKX.js";
+
+// src/react/accordion/index.ts
+var React = __toESM(require_react(), 1);
+var tagName = "cs-accordion";
+var reactWrapper = o({
+  tagName,
+  elementClass: CsAccordion,
+  react: React,
+  events: {
+    onCsAccordionExpand: "cs-accordion-expand",
+    onCsAccordionAfterExpand: "cs-accordion-after-expand",
+    onCsAccordionCollapse: "cs-accordion-collapse",
+    onCsAccordionAfterCollapse: "cs-accordion-after-collapse"
+  },
+  displayName: "CsAccordion"
+});
+var accordion_default = reactWrapper;
+
+export {
+  accordion_default
+};

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

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

@@ -0,0 +1,30 @@
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  o,
+  require_react
+} from "./chunk.VQJXWKQY.js";
+import {
+  CsAnimatedImage
+} from "./chunk.YDGDHZ6C.js";
+import {
+  __toESM
+} from "./chunk.4QJR2RKX.js";
+
+// src/react/animated-image/index.ts
+var React = __toESM(require_react(), 1);
+var tagName = "cs-animated-image";
+var reactWrapper = o({
+  tagName,
+  elementClass: CsAnimatedImage,
+  react: React,
+  events: {
+    onCsLoad: "cs-load",
+    onCsError: "cs-error"
+  },
+  displayName: "CsAnimatedImage"
+});
+var animated_image_default = reactWrapper;
+
+export {
+  animated_image_default
+};