@cruglobal/cornerstone-components 0.7.0 → 0.7.1

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

@@ -1,240 +0,0 @@
-/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
-
-// src/components/dropdown-item/dropdown-item.styles.ts
-import { css } from "lit";
-var dropdown_item_styles_default = css`
-  :host {
-    display: flex;
-    position: relative;
-    align-items: center;
-    padding: 0.5em 1em;
-    border-radius: var(--cs-border-radius-s);
-    isolation: isolate;
-    color: var(--cs-color-text-normal);
-    line-height: var(--cs-line-height-condensed);
-    cursor: pointer;
-    transition:
-      var(--cs-transition-fast) background-color var(--cs-transition-easing),
-      var(--cs-transition-fast) color var(--cs-transition-easing);
-  }
-
-  @media (hover: hover) {
-    :host(:hover:not(:state(disabled))) {
-      background-color: var(--cs-color-neutral-fill-normal);
-    }
-  }
-
-  :host(:state(submenu-open)) {
-    background-color: var(--cs-color-neutral-fill-normal);
-  }
-
-  :host(:focus-visible) {
-    z-index: 1;
-    outline: var(--cs-focus-ring);
-    background-color: var(--cs-color-neutral-fill-normal);
-  }
-
-  :host(:state(disabled)),
-  :host([disabled]) {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  /* Danger variant */
-  :host([variant='danger']),
-  :host([variant='danger']) #details {
-    color: var(--cs-color-danger-on-quiet);
-  }
-
-  @media (hover: hover) {
-    :host([variant='danger']:hover) {
-      background-color: var(--cs-color-danger-fill-normal);
-      color: var(--cs-color-danger-on-normal);
-    }
-  }
-
-  :host([variant='danger']:state(submenu-open)),
-  :host([variant='danger']:focus-visible) {
-    background-color: var(--cs-color-danger-fill-normal);
-    color: var(--cs-color-danger-on-normal);
-  }
-
-  :host([checkbox-adjacent]) {
-    padding-inline-start: 2em;
-  }
-
-  /* Only add padding when item actually has a submenu */
-  :host([submenu-adjacent]:not(:state(has-submenu))) #details {
-    padding-inline-end: 0;
-  }
-
-  :host(:state(has-submenu)[submenu-adjacent]) #details {
-    padding-inline-end: 1.75em;
-  }
-
-  #check {
-    visibility: hidden;
-    margin-inline-start: -1.5em;
-    margin-inline-end: 0.5em;
-    font-size: var(--cs-font-size-smaller);
-  }
-
-  :host(:state(checked)) #check {
-    visibility: visible;
-  }
-
-  #icon ::slotted(*) {
-    display: flex;
-    flex: 0 0 auto;
-    align-items: center;
-    margin-inline-end: 0.75em !important;
-    font-size: var(--cs-font-size-smaller);
-  }
-
-  #label {
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-
-  #details {
-    display: flex;
-    flex: 0 0 auto;
-    align-items: center;
-    justify-content: end;
-    color: var(--cs-color-text-quiet);
-    font-size: var(--cs-font-size-smaller) !important;
-  }
-
-  #details ::slotted(*) {
-    margin-inline-start: 2em !important;
-  }
-
-  /* Submenu indicator icon */
-  #submenu-indicator {
-    position: absolute;
-    inset-inline-end: 1em;
-    color: var(--cs-color-neutral-on-quiet);
-    font-size: var(--cs-font-size-smaller);
-  }
-
-  /* Flip chevron icon when RTL */
-  :host(:dir(rtl)) #submenu-indicator {
-    transform: scaleX(-1);
-  }
-
-  /* Submenu styles */
-  #submenu {
-    display: flex;
-    z-index: 10;
-    position: absolute;
-    top: 0;
-    left: 0;
-    flex-direction: column;
-    width: max-content;
-    margin: 0;
-    padding: 0.25em;
-    border: var(--cs-border-style) var(--cs-border-width-s) var(--cs-color-surface-border);
-    border-radius: var(--cs-border-radius-m);
-    background-color: var(--cs-color-surface-raised);
-    box-shadow: var(--cs-shadow-m);
-    color: var(--cs-color-text-normal);
-    text-align: start;
-    user-select: none;
-
-    /* Override default popover styles */
-    &[popover] {
-      margin: 0;
-      inset: auto;
-      padding: 0.25em;
-      overflow: visible;
-      border-radius: var(--cs-border-radius-m);
-    }
-
-    &.show {
-      animation: submenu-show var(--show-duration, var(--cs-transition-fast)) ease;
-    }
-
-    &.hide {
-      animation: submenu-show var(--show-duration, var(--cs-transition-fast)) ease reverse;
-    }
-
-    /* Submenu placement transform origins */
-    &[data-placement^='top'] {
-      transform-origin: bottom;
-    }
-
-    &[data-placement^='bottom'] {
-      transform-origin: top;
-    }
-
-    &[data-placement^='left'] {
-      transform-origin: right;
-    }
-
-    &[data-placement^='right'] {
-      transform-origin: left;
-    }
-
-    &[data-placement='left-start'] {
-      transform-origin: right top;
-    }
-
-    &[data-placement='left-end'] {
-      transform-origin: right bottom;
-    }
-
-    &[data-placement='right-start'] {
-      transform-origin: left top;
-    }
-
-    &[data-placement='right-end'] {
-      transform-origin: left bottom;
-    }
-
-    /* Safe triangle styling */
-    &::before {
-      display: none;
-      z-index: 9;
-      position: fixed;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background-color: transparent;
-      content: '';
-      clip-path: polygon(
-        var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),
-        var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0),
-        var(--safe-triangle-submenu-end-x, 0) var(--safe-triangle-submenu-end-y, 0)
-      );
-      pointer-events: auto; /* Enable mouse events on the triangle */
-    }
-
-    &[data-visible]::before {
-      display: block;
-    }
-  }
-
-  ::slotted(cs-dropdown-item) {
-    font-size: inherit;
-  }
-
-  ::slotted(cs-divider) {
-    --spacing: 0.25em;
-  }
-
-  @keyframes submenu-show {
-    from {
-      scale: 0.9;
-      opacity: 0;
-    }
-    to {
-      scale: 1;
-      opacity: 1;
-    }
-  }
-`;
-
-export {
-  dropdown_item_styles_default
-};

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

@@ -1,24 +0,0 @@
-/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
-
-// src/utilities/form.ts
-function serialize(form) {
-  const formData = new FormData(form);
-  const object = {};
-  formData.forEach((value, key) => {
-    if (Reflect.has(object, key)) {
-      const entry = object[key];
-      if (Array.isArray(entry)) {
-        entry.push(value);
-      } else {
-        object[key] = [object[key], value];
-      }
-    } else {
-      object[key] = value;
-    }
-  });
-  return object;
-}
-
-export {
-  serialize
-};

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

@@ -1,172 +0,0 @@
-/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
-
-// src/components/carousel/carousel.styles.ts
-import { css } from "lit";
-var carousel_styles_default = css`
-  :host {
-    --aspect-ratio: 16 / 9;
-    --scroll-hint: 0px;
-    --slide-gap: var(--cs-space-m, 1rem); /* fallback value is necessary */
-
-    display: flex;
-  }
-
-  .carousel {
-    display: grid;
-    grid-template-columns: min-content 1fr min-content;
-    grid-template-rows: 1fr min-content;
-    grid-template-areas:
-      '. slides .'
-      '. pagination .';
-    gap: var(--cs-space-m);
-    align-items: center;
-    min-height: 100%;
-    min-width: 100%;
-    position: relative;
-  }
-
-  .pagination {
-    grid-area: pagination;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: var(--cs-space-s);
-    padding-block: var(--cs-space-3xs);
-  }
-
-  .slides {
-    grid-area: slides;
-
-    display: grid;
-    height: 100%;
-    width: 100%;
-    align-items: center;
-    justify-items: center;
-    overflow: auto;
-    overscroll-behavior-x: contain;
-    scrollbar-width: none;
-    aspect-ratio: calc(var(--aspect-ratio) * var(--slides-per-page));
-    border-radius: var(--cs-border-radius-m);
-
-    --slide-size: calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));
-  }
-
-  /*
-   * While a looping carousel that initialized inside a hidden container waits to scroll past its leading clones, hide
-   * the slides and pagination to avoid flashing the wrong slide and active dot, then fade them in once the carousel has
-   * positioned itself.
-   */
-  .slides,
-  .pagination {
-    transition: opacity var(--cs-transition-fast) ease;
-  }
-
-  .slides-awaiting-position,
-  .pagination-awaiting-position {
-    opacity: 0;
-    transition: none;
-  }
-
-  @media (prefers-reduced-motion) {
-    :where(.slides) {
-      scroll-behavior: auto;
-    }
-  }
-
-  .slides-horizontal {
-    grid-auto-flow: column;
-    grid-auto-columns: var(--slide-size);
-    grid-auto-rows: 100%;
-    column-gap: var(--slide-gap);
-    scroll-snap-type: x mandatory;
-    scroll-padding-inline: var(--scroll-hint);
-    padding-inline: var(--scroll-hint);
-    overflow-y: hidden;
-  }
-
-  .slides-vertical {
-    grid-auto-flow: row;
-    grid-auto-columns: 100%;
-    grid-auto-rows: var(--slide-size);
-    row-gap: var(--slide-gap);
-    scroll-snap-type: y mandatory;
-    scroll-padding-block: var(--scroll-hint);
-    padding-block: var(--scroll-hint);
-    overflow-x: hidden;
-  }
-
-  :host([vertical]) ::slotted(cs-carousel-item) {
-    height: 100%;
-  }
-
-  .slides::-webkit-scrollbar {
-    display: none;
-  }
-
-  .navigation {
-    grid-area: navigation;
-    display: contents;
-    font-size: var(--cs-font-size-l);
-  }
-
-  .navigation-button {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    background: none;
-    border: none;
-    border-radius: var(--cs-border-radius-m);
-    font-size: inherit;
-    color: var(--cs-color-text-quiet);
-    padding: var(--cs-space-xs);
-    cursor: pointer;
-    transition: var(--cs-transition-normal) color;
-    appearance: none;
-  }
-
-  .navigation-button-disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .navigation-button-previous {
-    grid-column: 1;
-    grid-row: 1;
-  }
-
-  .navigation-button-next {
-    grid-column: 3;
-    grid-row: 1;
-  }
-
-  .pagination-item {
-    display: block;
-    cursor: pointer;
-    background: none;
-    border: 0;
-    border-radius: var(--cs-border-radius-circle);
-    width: var(--cs-space-s);
-    height: var(--cs-space-s);
-    background-color: var(--cs-color-neutral-fill-normal);
-    padding: 0;
-    margin: 0;
-    transition: transform var(--cs-transition-slow);
-  }
-
-  .pagination-item-active {
-    background-color: var(--cs-form-control-activated-color);
-    transform: scale(1.25);
-  }
-
-  /* Focus styles */
-  .slides:focus-visible,
-  .navigation-button:focus-visible,
-  .pagination-item:focus-visible {
-    outline: var(--cs-focus-ring);
-    outline-offset: var(--cs-focus-ring-offset);
-  }
-`;
-
-export {
-  carousel_styles_default
-};

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

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

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

@@ -1,29 +0,0 @@
-/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
-
-// src/components/divider/divider.styles.ts
-import { css } from "lit";
-var divider_styles_default = css`
-  :host {
-    --color: var(--cs-color-surface-border);
-    --width: var(--cs-border-width-s);
-    --spacing: var(--cs-space-m);
-  }
-
-  :host(:not([orientation='vertical'])) {
-    display: block;
-    border-top: solid var(--width) var(--color);
-    margin: var(--spacing) 0;
-  }
-
-  :host([orientation='vertical']) {
-    display: inline-block;
-    height: 100%;
-    border-inline-start: solid var(--width) var(--color);
-    margin: 0 var(--spacing);
-    min-block-size: 1lh;
-  }
-`;
-
-export {
-  divider_styles_default
-};

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

@@ -1,25 +0,0 @@
-/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  CsTabGroup
-} from "./chunk.VX3OTQBB.js";
-
-// src/react/tab-group/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "cs-tab-group";
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: CsTabGroup,
-  react: React,
-  events: {
-    onCsTabShow: "cs-tab-show",
-    onCsTabHide: "cs-tab-hide"
-  },
-  displayName: "CsTabGroup"
-});
-var tab_group_default = reactWrapper;
-
-export {
-  tab_group_default
-};

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

@@ -1 +0,0 @@
-/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */

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

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

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

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

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

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

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

@@ -1,125 +0,0 @@
-/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
-
-// src/components/accordion-item/accordion-item.styles.ts
-import { css } from "lit";
-var accordion_item_styles_default = css`
-  @layer cs-component {
-    :host {
-      --spacing: var(--cs-space-m);
-      --show-duration: var(--cs-transition-normal);
-      --hide-duration: var(--cs-transition-normal);
-      --easing: var(--cs-transition-easing);
-
-      display: block;
-    }
-
-    :host(:not(:first-child)) {
-      border-top: var(--cs-panel-border-width) var(--cs-panel-border-style) var(--cs-color-surface-border);
-    }
-
-    :host([appearance='filled']) {
-      background-color: var(--cs-color-neutral-fill-quiet);
-    }
-
-    :host([appearance='filled']:not(:first-child)) {
-      margin-block-start: var(--cs-panel-border-width);
-      border-top: none;
-    }
-
-    [part~='heading'] {
-      margin: 0;
-      font: inherit;
-    }
-
-    [part~='button'] {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing);
-      padding: var(--spacing);
-      width: 100%;
-      background: none;
-      border: none;
-      cursor: pointer;
-      text-align: start;
-      color: var(--cs-color-text-normal);
-      font: inherit;
-      font-weight: var(--cs-font-weight-semibold);
-
-      &:focus {
-        outline: none;
-      }
-
-      &:focus-visible {
-        outline: var(--cs-focus-ring);
-        /* Inset by the full ring width + offset so the parent's overflow:hidden doesn't clip it */
-        outline-offset: calc(0px - var(--cs-focus-ring-width) - var(--cs-focus-ring-offset));
-      }
-    }
-
-    /* Icon at end (default) */
-    :host([icon-placement='end']) [part~='button'] {
-      justify-content: space-between;
-    }
-
-    /* Icon at start */
-    :host([icon-placement='start']) [part~='button'] {
-      flex-direction: row-reverse;
-      justify-content: flex-end;
-    }
-
-    :host([disabled]) {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    :host([disabled]) [part~='button'] {
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-
-    :host(:first-child) [part~='button'] {
-      border-top-left-radius: var(--cs-panel-border-radius);
-      border-top-right-radius: var(--cs-panel-border-radius);
-    }
-
-    :host(:last-child:not([expanded])) [part~='button'] {
-      border-bottom-left-radius: var(--cs-panel-border-radius);
-      border-bottom-right-radius: var(--cs-panel-border-radius);
-    }
-
-    [part~='icon'] {
-      flex: 0 0 auto;
-      display: flex;
-      align-items: center;
-      color: var(--cs-color-text-quiet);
-      transition: rotate var(--hide-duration) var(--easing);
-    }
-
-    :host([expanded]) [part~='icon'] {
-      rotate: 90deg;
-      transition-duration: var(--show-duration);
-    }
-
-    :host([expanded]:dir(rtl)) [part~='icon'] {
-      rotate: -90deg;
-    }
-
-    .body {
-      overflow: hidden;
-      color: var(--cs-color-text-quiet);
-    }
-
-    :host([expanded]) .body:not(.animating) {
-      overflow: visible;
-    }
-
-    .content {
-      display: block;
-      padding: 0 var(--spacing) var(--spacing);
-    }
-  }
-`;
-
-export {
-  accordion_item_styles_default
-};