@cruglobal/cornerstone-components 0.6.1 → 0.6.2

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

@@ -1,96 +0,0 @@
-/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
-
-// src/components/rating/rating.styles.ts
-import { css } from "lit";
-var rating_styles_default = css`
-  :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/unbundled/chunks/chunk.H7CARHM5.js

@@ -1,209 +0,0 @@
-/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
-
-// src/components/radio/radio.styles.ts
-import { css } from "lit";
-var radio_styles_default = css`
-  :host {
-    --checked-icon-color: var(--cs-form-control-activated-color);
-    --checked-icon-scale: 0.7;
-
-    color: var(--cs-form-control-value-color);
-    display: inline-flex;
-    flex-direction: row;
-    align-items: top;
-    font-family: inherit;
-    font-weight: var(--cs-form-control-value-font-weight);
-    line-height: var(--cs-form-control-value-line-height);
-    cursor: pointer;
-    user-select: none;
-    -webkit-user-select: none;
-  }
-
-  :host(:focus) {
-    outline: none;
-  }
-
-  /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */
-  :host(:not(:state(checked))) svg circle {
-    opacity: 0;
-  }
-
-  [part~='label'] {
-    display: inline;
-  }
-
-  [part~='hint'] {
-    margin-block-start: 0.5em;
-  }
-
-  /* Default spacing for default appearance radios */
-  :host(:not([appearance='button'])) {
-    margin-block: 0.375em; /* Half of the original 0.75em gap on each side */
-  }
-
-  :host(:not([appearance='button'])[data-cs-radio-horizontal]) {
-    margin-block: 0;
-    margin-inline: 0.5em; /* Half of the original 1em gap on each side */
-  }
-
-  /* Remove margin from first/last items to prevent extra space */
-  :host(:not([appearance='button'])[data-cs-radio-first]) {
-    margin-block-start: 0;
-    margin-inline-start: 0;
-  }
-
-  :host(:not([appearance='button'])[data-cs-radio-last]) {
-    margin-block-end: 0;
-    margin-inline-end: 0;
-  }
-
-  /* Button appearance have no spacing, they get handled by the overlap margins below */
-  :host([appearance='button']) {
-    margin: 0;
-    align-items: center;
-    min-height: var(--cs-form-control-height);
-    background-color: var(--cs-color-surface-default);
-    border: var(--cs-form-control-border-width) var(--cs-form-control-border-style) var(--cs-form-control-border-color);
-    border-radius: var(--cs-border-radius-m);
-    padding: 0 var(--cs-form-control-padding-inline);
-    transition:
-      background-color var(--cs-transition-fast),
-      border-color var(--cs-transition-fast);
-  }
-
-  /* Default appearance */
-  :host(:not([appearance='button'])) {
-    .control {
-      flex: 0 0 auto;
-      position: relative;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: var(--cs-form-control-toggle-size);
-      height: var(--cs-form-control-toggle-size);
-      border-color: var(--cs-form-control-border-color);
-      border-radius: 50%;
-      border-style: var(--cs-form-control-border-style);
-      border-width: var(--cs-form-control-border-width);
-      background-color: var(--cs-form-control-background-color);
-      color: transparent;
-      transition:
-        background var(--cs-transition-normal),
-        border-color var(--cs-transition-fast),
-        box-shadow var(--cs-transition-fast),
-        color var(--cs-transition-fast);
-      transition-timing-function: var(--cs-transition-easing);
-
-      margin-inline-end: 0.5em;
-    }
-
-    .checked-icon {
-      display: flex;
-      fill: currentColor;
-      width: var(--cs-form-control-toggle-size);
-      height: var(--cs-form-control-toggle-size);
-      scale: var(--checked-icon-scale);
-    }
-  }
-
-  /* Button appearance */
-  :host([appearance='button']) {
-    .control {
-      display: none;
-    }
-  }
-
-  /* Checked */
-  :host(:state(checked)) .control {
-    color: var(--checked-icon-color);
-    border-color: var(--cs-form-control-activated-color);
-    background-color: var(--cs-form-control-background-color);
-  }
-
-  /* Focus */
-  :host(:focus-visible) .control {
-    outline: var(--cs-focus-ring);
-    outline-offset: var(--cs-focus-ring-offset);
-  }
-
-  /* Disabled */
-  :host(:state(disabled)) {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  /* Horizontal grouping - remove inner border radius */
-  :host([appearance='button'][data-cs-radio-horizontal][data-cs-radio-inner]) {
-    border-radius: 0;
-  }
-
-  :host([appearance='button'][data-cs-radio-horizontal][data-cs-radio-first]) {
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  :host([appearance='button'][data-cs-radio-horizontal][data-cs-radio-last]) {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-  }
-
-  /* Vertical grouping - remove inner border radius */
-  :host([appearance='button'][data-cs-radio-vertical][data-cs-radio-inner]) {
-    border-radius: 0;
-  }
-
-  :host([appearance='button'][data-cs-radio-vertical][data-cs-radio-first]) {
-    border-end-start-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  :host([appearance='button'][data-cs-radio-vertical][data-cs-radio-last]) {
-    border-start-start-radius: 0;
-    border-start-end-radius: 0;
-  }
-
-  @media (hover: hover) {
-    :host([appearance='button']:hover:not(:state(disabled), :state(checked))) {
-      background-color: color-mix(in srgb, var(--cs-color-surface-default) 95%, var(--cs-color-mix-hover));
-    }
-  }
-
-  :host([appearance='button']:focus-visible) {
-    outline: var(--cs-focus-ring);
-    outline-offset: var(--cs-focus-ring-offset);
-  }
-
-  :host([appearance='button']:state(checked)) {
-    border-color: var(--cs-form-control-activated-color);
-    background-color: var(--cs-color-brand-fill-quiet);
-  }
-
-  :host([appearance='button']:state(checked):focus-visible) {
-    outline: var(--cs-focus-ring);
-    outline-offset: var(--cs-focus-ring-offset);
-  }
-
-  /* Button overlap margins */
-  :host([appearance='button'][data-cs-radio-horizontal]:not([data-cs-radio-first])) {
-    margin-inline-start: calc(-1 * var(--cs-form-control-border-width));
-  }
-
-  :host([appearance='button'][data-cs-radio-vertical]:not([data-cs-radio-first])) {
-    margin-block-start: calc(-1 * var(--cs-form-control-border-width));
-  }
-
-  /* Ensure interactive states are visible above adjacent buttons */
-  :host([appearance='button']:hover),
-  :host([appearance='button']:state(checked)) {
-    position: relative;
-    z-index: 1;
-  }
-
-  :host([appearance='button']:focus-visible) {
-    z-index: 2;
-  }
-`;
-
-export {
-  radio_styles_default
-};

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

@@ -1,75 +0,0 @@
-/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
-
-// src/internal/offset.ts
-function getOffset(element, parent) {
-  return {
-    top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),
-    left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left)
-  };
-}
-
-// src/internal/scroll.ts
-var locks = /* @__PURE__ */ new Set();
-function getScrollbarWidth() {
-  const documentWidth = document.documentElement.clientWidth;
-  return Math.abs(window.innerWidth - documentWidth);
-}
-function getExistingBodyPadding() {
-  const padding = Number(getComputedStyle(document.body).paddingRight.replace(/px/, ""));
-  if (isNaN(padding) || !padding) {
-    return 0;
-  }
-  return padding;
-}
-function lockBodyScrolling(lockingEl) {
-  locks.add(lockingEl);
-  if (!document.documentElement.classList.contains("cs-scroll-lock")) {
-    const scrollbarWidth = getScrollbarWidth() + getExistingBodyPadding();
-    let scrollbarGutterProperty = getComputedStyle(document.documentElement).scrollbarGutter;
-    if (!scrollbarGutterProperty || scrollbarGutterProperty === "auto") {
-      scrollbarGutterProperty = "stable";
-    }
-    if (scrollbarWidth < 2) {
-      scrollbarGutterProperty = "";
-    }
-    document.documentElement.style.setProperty("--cs-scroll-lock-gutter", scrollbarGutterProperty);
-    document.documentElement.classList.add("cs-scroll-lock");
-    document.documentElement.style.setProperty("--cs-scroll-lock-size", `${scrollbarWidth}px`);
-  }
-}
-function unlockBodyScrolling(lockingEl) {
-  locks.delete(lockingEl);
-  if (locks.size === 0) {
-    document.documentElement.classList.remove("cs-scroll-lock");
-    document.documentElement.style.removeProperty("--cs-scroll-lock-size");
-  }
-}
-function scrollIntoView(element, container, direction = "vertical", behavior = "smooth") {
-  const offset = getOffset(element, container);
-  const offsetTop = offset.top + container.scrollTop;
-  const offsetLeft = offset.left + container.scrollLeft;
-  const minX = container.scrollLeft;
-  const maxX = container.scrollLeft + container.offsetWidth;
-  const minY = container.scrollTop;
-  const maxY = container.scrollTop + container.offsetHeight;
-  if (direction === "horizontal" || direction === "both") {
-    if (offsetLeft < minX) {
-      container.scrollTo({ left: offsetLeft, behavior });
-    } else if (offsetLeft + element.clientWidth > maxX) {
-      container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });
-    }
-  }
-  if (direction === "vertical" || direction === "both") {
-    if (offsetTop < minY) {
-      container.scrollTo({ top: offsetTop, behavior });
-    } else if (offsetTop + element.clientHeight > maxY) {
-      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });
-    }
-  }
-}
-
-export {
-  lockBodyScrolling,
-  unlockBodyScrolling,
-  scrollIntoView
-};

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

@@ -1,90 +0,0 @@
-/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
-
-// src/components/tag/tag.styles.ts
-import { css } from "lit";
-var tag_styles_default = css`
-  @layer cs-component {
-    :host {
-      display: inline-flex;
-      gap: 0.5em;
-      border-radius: var(--cs-border-radius-m);
-      align-items: center;
-      background-color: var(--cs-color-fill-quiet, var(--cs-color-neutral-fill-quiet));
-      border-color: var(--cs-color-border-normal, var(--cs-color-neutral-border-normal));
-      border-style: var(--cs-border-style);
-      border-width: var(--cs-border-width-s);
-      color: var(--cs-color-on-quiet, var(--cs-color-neutral-on-quiet));
-      font-size: inherit;
-      line-height: 1;
-      white-space: nowrap;
-      user-select: none;
-      -webkit-user-select: none;
-      height: calc(var(--cs-form-control-height) * 0.8);
-      line-height: calc(var(--cs-form-control-height) - var(--cs-form-control-border-width) * 2);
-      padding: 0 0.75em;
-    }
-
-    /* Appearance modifiers */
-    :host([appearance='outlined']) {
-      color: var(--cs-color-on-quiet, var(--cs-color-neutral-on-quiet));
-      background-color: transparent;
-      border-color: var(--cs-color-border-loud, var(--cs-color-neutral-border-loud));
-    }
-
-    :host([appearance='filled']) {
-      color: var(--cs-color-on-quiet, var(--cs-color-neutral-on-quiet));
-      background-color: var(--cs-color-fill-quiet, var(--cs-color-neutral-fill-quiet));
-      border-color: transparent;
-    }
-
-    :host([appearance='filled-outlined']) {
-      color: var(--cs-color-on-quiet, var(--cs-color-neutral-on-quiet));
-      background-color: var(--cs-color-fill-quiet, var(--cs-color-neutral-fill-quiet));
-      border-color: var(--cs-color-border-normal, var(--cs-color-neutral-border-normal));
-    }
-
-    :host([appearance='accent']) {
-      color: var(--cs-color-on-loud, var(--cs-color-neutral-on-loud));
-      background-color: var(--cs-color-fill-loud, var(--cs-color-neutral-fill-loud));
-      border-color: transparent;
-    }
-  }
-
-  .content {
-    font-size: var(--cs-font-size-smaller);
-  }
-
-  [part='remove-button'] {
-    line-height: 1;
-  }
-
-  [part='remove-button']::part(button) {
-    padding: 0;
-    height: 1em;
-    width: 1em;
-    color: currentColor;
-  }
-
-  @media (hover: hover) {
-    :host(:hover) > [part='remove-button']::part(button) {
-      background-color: transparent;
-      color: color-mix(in oklab, currentColor, var(--cs-color-mix-hover));
-    }
-  }
-
-  :host(:active) > [part='remove-button']::part(button) {
-    background-color: transparent;
-    color: color-mix(in oklab, currentColor, var(--cs-color-mix-active));
-  }
-
-  /*
-   * Pill modifier
-   */
-  :host([pill]) {
-    border-radius: var(--cs-border-radius-pill);
-  }
-`;
-
-export {
-  tag_styles_default
-};

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

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

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

@@ -1,83 +0,0 @@
-/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
-
-// src/components/spinner/spinner.styles.ts
-import { css } from "lit";
-var spinner_styles_default = css`
-  :host {
-    --track-width: 2px;
-    --track-color: var(--cs-color-neutral-fill-normal);
-    --indicator-color: var(--cs-color-brand-fill-loud);
-    --speed: 2s;
-    --size: 1em;
-
-    /*
-      Resizing a spinner element using anything but font-size will break the animation because the animation uses em
-      units. Therefore, if a spinner is used in a flex container without \`flex: none\` applied, the spinner can
-      grow/shrink and break the animation. The use of \`flex: none\` on the host element prevents this by always having
-      the spinner sized according to its actual dimensions.
-    */
-    flex: none;
-    display: inline-flex;
-    width: var(--size);
-    height: var(--size);
-  }
-
-  svg {
-    width: 100%;
-    height: 100%;
-    aspect-ratio: 1;
-    animation: spin var(--speed) linear infinite;
-  }
-
-  .track,
-  .indicator {
-    --radius: calc(var(--size) / 2 - var(--track-width) / 2);
-    --circumference: calc(var(--radius) * 2 * 3.141592654);
-
-    cx: calc(var(--size) / 2);
-    cy: calc(var(--size) / 2);
-    r: var(--radius);
-    fill: none;
-    stroke-width: var(--track-width);
-  }
-
-  .track {
-    stroke: var(--track-color);
-  }
-
-  .indicator {
-    stroke: var(--indicator-color);
-    stroke-linecap: round;
-    stroke-dasharray: calc(0.597 * var(--circumference)), calc(0.796 * var(--circumference));
-    stroke-dashoffset: calc(-0.04 * var(--circumference));
-    animation: dash 1.5s ease-in-out infinite;
-  }
-
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  @keyframes dash {
-    0% {
-      stroke-dasharray: calc(0.008 * var(--circumference)), calc(1.194 * var(--circumference));
-      stroke-dashoffset: 0;
-    }
-    50% {
-      stroke-dasharray: calc(0.716 * var(--circumference)), calc(1.194 * var(--circumference));
-      stroke-dashoffset: calc(-0.278 * var(--circumference));
-    }
-    100% {
-      stroke-dasharray: calc(0.716 * var(--circumference)), calc(1.194 * var(--circumference));
-      stroke-dashoffset: calc(-0.987 * var(--circumference));
-    }
-  }
-`;
-
-export {
-  spinner_styles_default
-};

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

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