@cruglobal/cornerstone-components 0.6.1 → 0.7.0

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

@@ -1,316 +0,0 @@
-/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
-
-// src/components/drawer/drawer.styles.ts
-import { css } from "lit";
-var drawer_styles_default = css`
-  :host {
-    --size: 25rem;
-    --spacing: var(--cs-space-l);
-    --backdrop-filter: none;
-    --show-duration: var(--cs-transition-normal);
-    --hide-duration: var(--cs-transition-normal);
-
-    display: none;
-  }
-
-  /*
-   * Out of flow, so opening the dialog cannot move anything around it. The visible panel is a native dialog element
-   * opened with showModal(), which lives in the top layer and is positioned against the viewport, so the host's own
-   * box paints nothing — but while it was in flow it was still a flex/grid item wherever the host sat, and opening
-   * the dialog added a gap that nudged its siblings.
-   *
-   * The width stays full-viewport rather than zero. RenderedWatcher spots third-party CSS hiding the dialog through
-   * ResizeObserver size changes, and the panel's max-width resolves against this box, so collapsing it would flatten
-   * both of those signals and the modal would never resume. Height is zero because nothing here paints.
-   */
-  :host([open]) {
-    display: block;
-    position: fixed;
-    inset-inline: 0;
-    height: 0;
-  }
-
-  .drawer {
-    display: flex;
-    flex-direction: column;
-    top: 0;
-    inset-inline-start: 0;
-    width: 100%;
-    height: 100%;
-    max-width: 100%;
-    max-height: 100%;
-    overflow: hidden;
-    color: inherit;
-    background-color: var(--cs-color-surface-raised);
-    border: none;
-    box-shadow: var(--cs-shadow-l);
-    overflow: auto;
-    padding: 0;
-    margin: 0;
-    animation-duration: var(--show-duration);
-    animation-timing-function: ease;
-
-    &.show::backdrop {
-      animation: show-backdrop var(--show-duration, 200ms) ease;
-    }
-
-    &.hide::backdrop {
-      animation: show-backdrop var(--hide-duration, 200ms) ease reverse;
-    }
-
-    &.show.top {
-      animation: show-drawer-from-top var(--show-duration) ease;
-    }
-
-    &.hide.top {
-      animation: show-drawer-from-top var(--hide-duration) ease reverse;
-    }
-
-    &.show.end {
-      animation: show-drawer-from-end var(--show-duration) ease;
-
-      &:dir(rtl) {
-        animation-name: show-drawer-from-start;
-      }
-    }
-
-    &.hide.end {
-      animation: show-drawer-from-end var(--hide-duration) ease reverse;
-
-      &:dir(rtl) {
-        animation-name: show-drawer-from-start;
-      }
-    }
-
-    &.show.bottom {
-      animation: show-drawer-from-bottom var(--show-duration) ease;
-    }
-
-    &.hide.bottom {
-      animation: show-drawer-from-bottom var(--hide-duration) ease reverse;
-    }
-
-    &.show.start {
-      animation: show-drawer-from-start var(--show-duration) ease;
-
-      &:dir(rtl) {
-        animation-name: show-drawer-from-end;
-      }
-    }
-
-    &.hide.start {
-      animation: show-drawer-from-start var(--hide-duration) ease reverse;
-
-      &:dir(rtl) {
-        animation-name: show-drawer-from-end;
-      }
-    }
-
-    &.pulse {
-      animation: pulse 250ms ease;
-    }
-  }
-
-  .drawer:focus {
-    outline: none;
-  }
-
-  .top {
-    top: 0;
-    inset-inline-end: auto;
-    bottom: auto;
-    inset-inline-start: 0;
-    width: 100%;
-    height: var(--size);
-  }
-
-  .end {
-    top: 0;
-    inset-inline-end: 0;
-    bottom: auto;
-    inset-inline-start: auto;
-    width: var(--size);
-    height: 100%;
-  }
-
-  .bottom {
-    top: auto;
-    inset-inline-end: auto;
-    bottom: 0;
-    inset-inline-start: 0;
-    width: 100%;
-    height: var(--size);
-  }
-
-  .start {
-    top: 0;
-    inset-inline-end: auto;
-    bottom: auto;
-    inset-inline-start: 0;
-    width: var(--size);
-    height: 100%;
-  }
-
-  .header {
-    display: flex;
-    flex-wrap: nowrap;
-    padding-inline-start: var(--spacing);
-    padding-block-end: 0;
-
-    /* Subtract the close button's padding so that the X is visually aligned with the edges of the dialog content */
-    padding-inline-end: calc(var(--spacing) - var(--cs-form-control-padding-block));
-    padding-block-start: calc(var(--spacing) - var(--cs-form-control-padding-block));
-  }
-
-  .title {
-    align-self: center;
-    flex: 1 1 auto;
-    font: inherit;
-    font-size: var(--cs-font-size-l);
-    font-weight: var(--cs-font-weight-heading);
-    line-height: var(--cs-line-height-condensed);
-    margin: 0;
-  }
-
-  .header-actions {
-    align-self: start;
-    display: flex;
-    flex-shrink: 0;
-    flex-wrap: wrap;
-    justify-content: end;
-    gap: var(--cs-space-2xs);
-    padding-inline-start: var(--spacing);
-  }
-
-  .header-actions cs-button,
-  .header-actions ::slotted(cs-button) {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-  }
-
-  .body {
-    flex: 1 1 auto;
-    display: block;
-    padding: var(--spacing);
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-
-    &:focus {
-      outline: none;
-    }
-
-    &:focus-visible {
-      outline: var(--cs-focus-ring);
-      outline-offset: var(--cs-focus-ring-offset);
-    }
-  }
-
-  .footer {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--cs-space-xs);
-    justify-content: end;
-    padding: var(--spacing);
-    padding-block-start: 0;
-  }
-
-  .footer ::slotted(cs-button:not(:last-of-type)) {
-    margin-inline-end: var(--cs-space-xs);
-  }
-
-  .drawer::backdrop {
-    /*
-        NOTE: the ::backdrop element doesn't inherit properly in Safari yet, but it will in 17.4! At that time, we can
-        remove the fallback values here.
-      */
-    background-color: var(--cs-color-overlay-modal, rgb(0 0 0 / 0.25));
-    backdrop-filter: var(--backdrop-filter);
-  }
-
-  @keyframes pulse {
-    0% {
-      scale: 1;
-    }
-    50% {
-      scale: 1.01;
-    }
-    100% {
-      scale: 1;
-    }
-  }
-
-  @keyframes show-drawer {
-    from {
-      opacity: 0;
-      scale: 0.8;
-    }
-    to {
-      opacity: 1;
-      scale: 1;
-    }
-  }
-
-  @keyframes show-drawer-from-top {
-    from {
-      opacity: 0;
-      translate: 0 -100%;
-    }
-    to {
-      opacity: 1;
-      translate: 0 0;
-    }
-  }
-
-  @keyframes show-drawer-from-end {
-    from {
-      opacity: 0;
-      translate: 100%;
-    }
-    to {
-      opacity: 1;
-      translate: 0 0;
-    }
-  }
-
-  @keyframes show-drawer-from-bottom {
-    from {
-      opacity: 0;
-      translate: 0 100%;
-    }
-    to {
-      opacity: 1;
-      translate: 0 0;
-    }
-  }
-
-  @keyframes show-drawer-from-start {
-    from {
-      opacity: 0;
-      translate: -100% 0;
-    }
-    to {
-      opacity: 1;
-      translate: 0 0;
-    }
-  }
-
-  @keyframes show-backdrop {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  @media (forced-colors: active) {
-    .drawer {
-      border: solid 1px white;
-    }
-  }
-`;
-
-export {
-  drawer_styles_default
-};

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

@@ -1,151 +0,0 @@
-/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
-
-// src/components/card/card.styles.ts
-import { css } from "lit";
-var card_styles_default = css`
-  :host {
-    --spacing: var(--cs-space-l);
-
-    /* Internal calculated properties */
-    --inner-border-radius: calc(var(--cs-panel-border-radius) - var(--cs-panel-border-width));
-
-    display: flex;
-    flex-direction: column;
-    background-color: var(--cs-color-surface-default);
-    border-color: var(--cs-color-surface-border);
-    border-radius: var(--cs-panel-border-radius);
-    border-style: var(--cs-panel-border-style);
-    box-shadow: var(--cs-shadow-s);
-    border-width: var(--cs-panel-border-width);
-    color: var(--cs-color-text-normal);
-  }
-
-  /* Appearance modifiers */
-  :host([appearance='plain']) {
-    background-color: transparent;
-    border-color: transparent;
-    box-shadow: none;
-  }
-
-  :host([appearance='outlined']) {
-    background-color: var(--cs-color-surface-default);
-    border-color: var(--cs-color-surface-border);
-  }
-
-  :host([appearance='filled']) {
-    background-color: var(--cs-color-neutral-fill-quiet);
-    border-color: transparent;
-  }
-
-  :host([appearance='filled-outlined']) {
-    background-color: var(--cs-color-neutral-fill-quiet);
-    border-color: var(--cs-color-surface-border);
-  }
-
-  :host([appearance='accent']) {
-    color: var(--cs-color-neutral-on-loud);
-    background-color: var(--cs-color-neutral-fill-loud);
-    border-color: transparent;
-  }
-
-  /* Take care of top and bottom radii */
-  .media,
-  :host(:not([has-media])) .header,
-  :host(:not([has-media], [has-header])) .body {
-    border-start-start-radius: var(--inner-border-radius);
-    border-start-end-radius: var(--inner-border-radius);
-  }
-
-  :host(:not([has-footer])) .body,
-  .footer {
-    border-end-start-radius: var(--inner-border-radius);
-    border-end-end-radius: var(--inner-border-radius);
-  }
-
-  .media {
-    display: flex;
-    overflow: hidden;
-
-    &::slotted(*) {
-      display: block;
-      width: 100%;
-      border-radius: 0 !important;
-    }
-  }
-
-  /* Round all corners for plain appearance */
-  :host([appearance='plain']) .media {
-    border-radius: var(--inner-border-radius);
-
-    &::slotted(*) {
-      border-radius: inherit !important;
-    }
-  }
-
-  .header {
-    display: block;
-    border-block-end-style: inherit;
-    border-block-end-color: var(--cs-color-surface-border);
-    border-block-end-width: var(--cs-panel-border-width);
-    padding: calc(var(--spacing) / 2) var(--spacing);
-  }
-
-  .body {
-    display: block;
-    padding: var(--spacing);
-  }
-
-  .footer {
-    display: block;
-    border-block-start-style: inherit;
-    border-block-start-color: var(--cs-color-surface-border);
-    border-block-start-width: var(--cs-panel-border-width);
-    padding: var(--spacing);
-  }
-
-  /* Push slots to sides when the action slots renders */
-  .has-actions {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  :host(:not([has-header])) .header,
-  :host(:not([has-footer])) .footer,
-  :host(:not([has-media])) .media {
-    display: none;
-  }
-
-  /* Orientation Styles */
-  :host([orientation='horizontal']) {
-    flex-direction: row;
-
-    .media {
-      border-start-start-radius: var(--inner-border-radius);
-      border-end-start-radius: var(--inner-border-radius);
-      border-start-end-radius: 0;
-
-      &::slotted(*) {
-        block-size: 100%;
-        inline-size: 100%;
-        object-fit: cover;
-      }
-    }
-  }
-
-  :host([orientation='horizontal']) .body slot::slotted(*) {
-    display: block;
-    height: 100%;
-    margin: 0;
-  }
-
-  :host([orientation='horizontal']) slot[name='actions']::slotted(*) {
-    display: flex;
-    align-items: center;
-    padding: var(--spacing);
-  }
-`;
-
-export {
-  card_styles_default
-};

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

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

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

@@ -1,32 +0,0 @@
-/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
-
-// src/internal/watch.ts
-function watch(propertyName, options) {
-  const resolvedOptions = {
-    waitUntilFirstUpdate: false,
-    ...options
-  };
-  return (proto, decoratedFnName) => {
-    const { update } = proto;
-    const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
-    proto.update = function(changedProps) {
-      watchedProperties.forEach((property) => {
-        const key = property;
-        if (changedProps.has(key)) {
-          const oldValue = changedProps.get(key);
-          const newValue = this[key];
-          if (oldValue !== newValue) {
-            if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
-              this[decoratedFnName](oldValue, newValue);
-            }
-          }
-        }
-      });
-      update.call(this, changedProps);
-    };
-  };
-}
-
-export {
-  watch
-};

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

@@ -1,198 +0,0 @@
-/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
-
-// src/components/otp-input/otp-input.styles.ts
-import { css } from "lit";
-var otp_input_styles_default = css`
-  :host(:focus) {
-    outline: none;
-  }
-
-  /* Segments container */
-  .segments {
-    position: relative;
-    /* Codes read left-to-right regardless of locale — keep segment order and caret movement LTR
-       even when the surrounding page is RTL. */
-    direction: ltr;
-    display: inline-flex;
-    align-items: center;
-    align-self: start;
-    gap: var(--segment-gap, var(--cs-space-xs));
-    cursor: text;
-    /* Never grow past the host's available width — long values or large segment sizes scroll
-       horizontally instead of overflowing the page. */
-    max-width: 100%;
-    overflow-x: auto;
-    scrollbar-width: none;
-    /* Setting overflow-x forces overflow-y to also compute to non-visible, which would otherwise
-       clip the focus ring's bleed around the active segment — above/below for any segment, and
-       left/right for the first/last segment specifically. Reserve room for it with padding, then
-       cancel the layout impact with an equal negative margin on both axes. */
-    padding: calc(var(--cs-focus-ring-offset) + var(--cs-focus-ring-width));
-    margin: calc(-1 * (var(--cs-focus-ring-offset) + var(--cs-focus-ring-width)));
-  }
-
-  .segments::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
-
-  :host(:state(disabled)) .segments {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  :host(:state(readonly)) .segments {
-    cursor: default;
-  }
-
-  /* Focus ring on the active segment, and on every segment in a multi-character selection */
-  .segments:focus-within .segment--active,
-  .segments:focus-within .segment--selected {
-    outline-color: var(--cs-color-focus);
-  }
-
-  /* Readonly has no per-segment active/selected state (see render()), so every segment rings
-     at once to show the control as a whole has focus. */
-  :host(:state(readonly)) .segments:focus-within .segment {
-    outline-color: var(--cs-color-focus);
-  }
-
-  /* Hidden real input — off-screen but focusable.
-     Chromium mishandles typing over a full selection (drops the inserted character) when a
-     text input has zero layout size, so this stays a non-zero 1x1px box instead of 0x0. */
-  .hidden-input {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    opacity: 0;
-    overflow: hidden;
-    pointer-events: none;
-    border: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  /* Individual visual segment */
-  .segment {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    width: var(--segment-size, 2.5em);
-    height: var(--segment-size, 2.5em);
-    border-radius: var(--segment-border-radius, var(--cs-form-control-border-radius));
-    font-size: 1em;
-    font-family: inherit;
-    font-variant-numeric: tabular-nums;
-    position: relative;
-    user-select: none;
-    outline: var(--cs-focus-ring-style) var(--cs-focus-ring-width) transparent;
-    outline-offset: var(--cs-focus-ring-offset);
-    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);
-  }
-
-  /* Blinking caret in the active segment */
-  .caret {
-    position: absolute;
-    width: 1.5px;
-    height: 60%;
-    background-color: currentColor;
-    animation: cs-otp-caret-blink 1s step-end infinite;
-  }
-
-  @keyframes cs-otp-caret-blink {
-    0%,
-    100% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0;
-    }
-  }
-
-  /* Literal separator character between segment groups */
-  .segment-literal {
-    display: inline-block;
-    flex-shrink: 0;
-    color: var(--cs-color-text-quiet);
-    white-space: pre;
-    user-select: none;
-  }
-
-  /* Appearance: outlined (default) */
-  :host(:not([appearance='filled'], [appearance='filled-outlined'], [appearance='contained'])) .segment {
-    background-color: var(--cs-form-control-background-color);
-    border: var(--cs-form-control-border-width) var(--cs-form-control-border-style) var(--cs-form-control-border-color);
-  }
-
-  /* Appearance: filled */
-  :host([appearance='filled']) .segment {
-    background-color: var(--cs-color-neutral-fill-quiet);
-    border: var(--cs-form-control-border-width) var(--cs-form-control-border-style) transparent;
-  }
-
-  /* Appearance: filled-outlined */
-  :host([appearance='filled-outlined']) .segment {
-    background-color: var(--cs-color-neutral-fill-quiet);
-    border: var(--cs-form-control-border-width) var(--cs-form-control-border-style) var(--cs-form-control-border-color);
-  }
-
-  /* Appearance: contained */
-  :host([appearance='contained']) .segments {
-    gap: 0;
-    border: var(--cs-form-control-border-width) var(--cs-form-control-border-style) var(--cs-form-control-border-color);
-    border-radius: var(--segment-border-radius, var(--cs-form-control-border-radius));
-    background-color: var(--cs-form-control-background-color);
-    overflow: hidden;
-    /* The focus ring is drawn inward here (see outline-offset below), so there's no outward bleed
-       to reserve room for. .segments is also the visible bordered box in this appearance, so the
-       padding/negative-margin bleed trick from the base rule would visibly shift and inflate it. */
-    padding: 0;
-    margin: 0;
-  }
-
-  :host([appearance='contained']) .segment {
-    border: none;
-    border-radius: 0;
-    /* Contained segments sit flush with zero gap and have no border of their own, so a ring drawn
-       outside the segment edge (the default, positive offset) bleeds into the neighboring segment.
-       Draw it inward instead so it stays within this segment's own box. */
-    outline-offset: calc(-1 * var(--cs-focus-ring-width));
-  }
-
-  /* Dividers between contained segments */
-  :host([appearance='contained']) .segment + .segment,
-  :host([appearance='contained']) .segment-literal + .segment {
-    border-left: var(--cs-form-control-border-width) var(--cs-form-control-border-style)
-      var(--cs-form-control-border-color);
-  }
-
-  /* ── Active segment (where next char will go), and every segment in a multi-character
-     selection (e.g. from Cmd/Ctrl+A) — same border + focus-ring treatment for both.
-     :host(...) wrapper matches the specificity of the appearance rules above so this
-     border-color isn't silently lost to the cascade. ── */
-  :host(:not(:state(readonly))) .segment--active,
-  :host(:not(:state(readonly))) .segment--selected {
-    border-color: var(--cs-color-focus);
-  }
-
-  /* Masked filled character, and the empty-segment hint shown when with-mask is set, both draw
-     --mask-char via a pseudo-element instead of real text, so a masked value never touches the
-     DOM as plain text (nothing to find via view-source or copy). */
-  .segment--masked::before,
-  .segment--mask-hint::before {
-    content: var(--mask-char, '•');
-  }
-
-  .segment--mask-hint::before {
-    opacity: 0.35;
-  }
-`;
-
-export {
-  otp_input_styles_default
-};