@cruglobal/cornerstone-components 0.1.0

package/dist/unbundled/chunks/chunk.5H6GLAW6.js

@@ -0,0 +1,229 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsContentChangeEvent
+} from "./chunk.WN6F72N3.js";
+import {
+  random_content_styles_default
+} from "./chunk.N2Z7ZHJY.js";
+import {
+  visually_hidden_styles_default
+} from "./chunk.PSAE6QZG.js";
+import {
+  AutoplayController
+} from "./chunk.YR4AIV36.js";
+import {
+  prefersReducedMotion
+} from "./chunk.IQJMSIWD.js";
+import {
+  watch
+} from "./chunk.3QOMHIHS.js";
+import {
+  CornerstoneElement,
+  customElement
+} from "./chunk.MHH4NIPT.js";
+import {
+  __decorateClass
+} from "./chunk.M2YES2WV.js";
+
+// src/components/random-content/random-content.ts
+import { html } from "lit";
+import { property, state } from "lit/decorators.js";
+if (typeof document !== "undefined") {
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(`
+    @keyframes cs-rc-fade {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+    @keyframes cs-rc-fade-up {
+      from { opacity: 0; transform: translateY(var(--animation-translate, 0.5em)); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes cs-rc-fade-down {
+      from { opacity: 0; transform: translateY(calc(-1 * var(--animation-translate, 0.5em))); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes cs-rc-fade-left {
+      from { opacity: 0; transform: translateX(var(--animation-translate, 0.5em)); }
+      to { opacity: 1; transform: translateX(0); }
+    }
+    @keyframes cs-rc-fade-right {
+      from { opacity: 0; transform: translateX(calc(-1 * var(--animation-translate, 0.5em))); }
+      to { opacity: 1; transform: translateX(0); }
+    }
+  `);
+  document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+}
+var CsRandomContent = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.sequenceCursor = 0;
+    this.uniqueQueue = [];
+    this.currentSelection = /* @__PURE__ */ new Set();
+    this.isInitialSelection = true;
+    this.autoplayController = new AutoplayController(this, () => this.randomize());
+    // Tracks the pending "clear animation attribute" listener per child so rapid re-animation
+    // (e.g. fast autoplay) doesn't stack listeners — `cancel()` fires `animationcancel`, not the
+    // `animationend` the listener waits for, so it wouldn't otherwise be removed.
+    this.animationCleanups = /* @__PURE__ */ new WeakMap();
+    this.liveAnnouncement = "";
+    this.items = 1;
+    this.mode = "unique";
+    this.autoplay = false;
+    this.autoplayInterval = 3e3;
+    this.animation = "none";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.hasUpdated) {
+      this.syncAutoplay();
+    }
+  }
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    this.syncAutoplay();
+  }
+  handleAutoplayChange() {
+    this.syncAutoplay();
+  }
+  handleModeChange() {
+    this.sequenceCursor = 0;
+    this.uniqueQueue = [];
+    this.currentSelection.clear();
+    this.randomize();
+  }
+  handleItemsChange() {
+    this.uniqueQueue = [];
+    this.randomize();
+  }
+  /** Selects a new set of children using the current mode. Returns the elements now shown. */
+  randomize() {
+    const children = this.assignedChildren();
+    if (!children.length) {
+      return [];
+    }
+    const count = Math.min(Math.max(1, this.items), children.length);
+    let selected;
+    if (this.mode === "sequence") {
+      selected = [];
+      Array.from({ length: count }).forEach((_, i) => {
+        selected.push(children[(this.sequenceCursor + i) % children.length]);
+      });
+      this.sequenceCursor = (this.sequenceCursor + count) % children.length;
+    } else if (this.mode === "unique") {
+      if (this.uniqueQueue.length < count) {
+        const queued = new Set(this.uniqueQueue);
+        const rest = children.filter((c) => !this.currentSelection.has(c) && !queued.has(c));
+        const current = children.filter((c) => this.currentSelection.has(c) && !queued.has(c));
+        this.uniqueQueue.push(...this.sample(rest, rest.length), ...this.sample(current, current.length));
+        if (this.uniqueQueue.length < count) {
+          this.uniqueQueue = this.sample([...children], children.length);
+        }
+      }
+      selected = this.uniqueQueue.splice(0, count);
+      this.currentSelection = new Set(selected);
+    } else {
+      const pool = children.filter((c) => !this.currentSelection.has(c));
+      selected = this.sample(pool.length >= count ? pool : children, count);
+      this.currentSelection = new Set(selected);
+    }
+    const firstShown = selected[0];
+    const lastShown = selected[selected.length - 1];
+    children.forEach((el) => {
+      const htmlEl = el;
+      const isSelected = selected.includes(el);
+      delete htmlEl.dataset["csAnimation"];
+      htmlEl.style.display = "";
+      htmlEl.hidden = !isSelected;
+      htmlEl.style.marginBlockStart = isSelected && el === firstShown ? "0" : "";
+      htmlEl.style.marginBlockEnd = isSelected && el === lastShown ? "0" : "";
+    });
+    if (this.animation !== "none" && !prefersReducedMotion()) {
+      selected.forEach((el) => {
+        const htmlEl = el;
+        if (this.animation !== "fade" && getComputedStyle(el).display === "inline") {
+          htmlEl.style.display = "inline-block";
+        }
+        el.getAnimations().forEach((a) => a.cancel());
+        htmlEl.dataset["csAnimation"] = this.animation;
+        this.animationCleanups.get(el)?.abort();
+        const cleanup = new AbortController();
+        this.animationCleanups.set(el, cleanup);
+        htmlEl.addEventListener("animationend", () => delete htmlEl.dataset["csAnimation"], {
+          once: true,
+          signal: cleanup.signal
+        });
+      });
+    }
+    if (this.isInitialSelection) {
+      this.isInitialSelection = false;
+    } else {
+      this.liveAnnouncement = selected.map((el) => el.textContent?.trim()).filter(Boolean).join(", ");
+    }
+    this.dispatchEvent(new CsContentChangeEvent({ items: selected }));
+    return selected;
+  }
+  syncAutoplay() {
+    this.autoplayController.stop();
+    if (this.autoplay && this.autoplayInterval > 0) {
+      this.autoplayController.start(this.autoplayInterval);
+    }
+  }
+  assignedChildren() {
+    const slot = this.shadowRoot?.querySelector("slot");
+    return slot?.assignedElements() ?? [];
+  }
+  // Fisher-Yates partial shuffle — picks `count` unique items from `pool`.
+  sample(pool, count) {
+    const arr = [...pool];
+    Array.from({ length: count }).forEach((_, i) => {
+      const j = i + Math.floor(Math.random() * (arr.length - i));
+      [arr[i], arr[j]] = [arr[j], arr[i]];
+    });
+    return arr.slice(0, count);
+  }
+  handleSlotChange() {
+    this.randomize();
+  }
+  render() {
+    return html`
+      <slot @slotchange=${this.handleSlotChange}></slot>
+      <div class="cs-visually-hidden" role="status" aria-live="polite" aria-atomic="true">${this.liveAnnouncement}</div>
+    `;
+  }
+};
+CsRandomContent.css = [random_content_styles_default, visually_hidden_styles_default];
+__decorateClass([
+  state()
+], CsRandomContent.prototype, "liveAnnouncement", 2);
+__decorateClass([
+  property({ type: Number })
+], CsRandomContent.prototype, "items", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsRandomContent.prototype, "mode", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CsRandomContent.prototype, "autoplay", 2);
+__decorateClass([
+  property({ type: Number, attribute: "autoplay-interval" })
+], CsRandomContent.prototype, "autoplayInterval", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsRandomContent.prototype, "animation", 2);
+__decorateClass([
+  watch(["autoplay", "autoplayInterval"], { waitUntilFirstUpdate: true })
+], CsRandomContent.prototype, "handleAutoplayChange", 1);
+__decorateClass([
+  watch("mode", { waitUntilFirstUpdate: true })
+], CsRandomContent.prototype, "handleModeChange", 1);
+__decorateClass([
+  watch("items", { waitUntilFirstUpdate: true })
+], CsRandomContent.prototype, "handleItemsChange", 1);
+CsRandomContent = __decorateClass([
+  customElement("cs-random-content")
+], CsRandomContent);
+
+export {
+  CsRandomContent
+};

package/dist/unbundled/chunks/chunk.5KWPKFGB.js

@@ -0,0 +1,25 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsRating
+} from "./chunk.7IIKHHNK.js";
+
+// src/react/rating/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cs-rating";
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CsRating,
+  react: React,
+  events: {
+    onCsHover: "cs-hover",
+    onCsInvalid: "cs-invalid"
+  },
+  displayName: "CsRating"
+});
+var rating_default = reactWrapper;
+
+export {
+  rating_default
+};

package/dist/unbundled/chunks/chunk.5MGJKMWB.js

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

package/dist/unbundled/chunks/chunk.5SDKM5TW.js

@@ -0,0 +1,239 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/components/tab-group/tab-group.styles.ts
+import { css } from "lit";
+var tab_group_styles_default = css`
+  :host {
+    --indicator-color: var(--cs-color-brand-fill-loud);
+    --track-color: var(--cs-color-neutral-fill-normal);
+    --track-width: 0.125rem;
+
+    /* Private */
+    --safe-track-width: max(0.5px, round(var(--track-width), 0.5px));
+
+    display: block;
+  }
+
+  .tab-group {
+    display: flex;
+    border-radius: 0;
+  }
+
+  .tabs {
+    display: flex;
+    position: relative;
+  }
+
+  .indicator {
+    position: absolute;
+  }
+
+  .tab-group-has-scroll-controls .nav-container {
+    position: relative;
+    padding: 0 1.5em;
+  }
+
+  .body {
+    display: block;
+  }
+
+  .scroll-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 1.5em;
+  }
+
+  .scroll-button-start {
+    inset-inline-start: 0;
+  }
+
+  .scroll-button-end {
+    inset-inline-end: 0;
+  }
+
+  /*
+    * Top
+    */
+
+  .tab-group-top {
+    flex-direction: column;
+  }
+
+  .tab-group-top .nav-container {
+    order: 1;
+  }
+
+  .tab-group-top .nav {
+    display: flex;
+    overflow-x: auto;
+
+    /* Hide scrollbar in Firefox */
+    scrollbar-width: none;
+  }
+
+  /* Hide scrollbar in Chrome/Safari */
+  .tab-group-top .nav::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .tab-group-top .tabs {
+    flex: 1 1 auto;
+    position: relative;
+    flex-direction: row;
+    border-bottom: solid var(--safe-track-width) var(--track-color);
+  }
+
+  .tab-group-top .indicator {
+    bottom: calc(-1 * var(--safe-track-width));
+    border-bottom: solid var(--safe-track-width) var(--indicator-color);
+  }
+
+  .tab-group-top .body {
+    order: 2;
+  }
+
+  /* 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. */
+  .tab-group-top ::slotted(cs-tab[active]) {
+    border-block-end: solid var(--safe-track-width) var(--indicator-color);
+    margin-block-end: calc(-1 * var(--safe-track-width)) !important;
+  }
+
+  .tab-group-top .body slot::slotted(cs-tab-panel) {
+    --padding: var(--cs-space-xl) 0;
+  }
+
+  /*
+    * Bottom
+    */
+
+  .tab-group-bottom {
+    flex-direction: column;
+  }
+
+  .tab-group-bottom .nav-container {
+    order: 2;
+  }
+
+  .tab-group-bottom .nav {
+    display: flex;
+    overflow-x: auto;
+
+    /* Hide scrollbar in Firefox */
+    scrollbar-width: none;
+  }
+
+  /* Hide scrollbar in Chrome/Safari */
+  .tab-group-bottom .nav::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .tab-group-bottom .tabs {
+    flex: 1 1 auto;
+    position: relative;
+    flex-direction: row;
+    border-top: solid var(--safe-track-width) var(--track-color);
+  }
+
+  .tab-group-bottom .indicator {
+    top: calc(-1 * var(--safe-track-width));
+    border-top: solid var(--safe-track-width) var(--indicator-color);
+  }
+
+  .tab-group-bottom .body {
+    order: 1;
+  }
+
+  .tab-group-bottom ::slotted(cs-tab[active]) {
+    border-block-start: solid var(--safe-track-width) var(--indicator-color);
+    margin-block-start: calc(-1 * var(--safe-track-width)) !important;
+  }
+
+  .tab-group-bottom .body slot::slotted(cs-tab-panel) {
+    --padding: var(--cs-space-xl) 0;
+  }
+
+  /*
+    * Start
+    */
+
+  .tab-group-start {
+    flex-direction: row;
+  }
+
+  .tab-group-start .nav-container {
+    order: 1;
+  }
+
+  .tab-group-start .tabs {
+    flex: 0 0 auto;
+    flex-direction: column;
+    border-inline-end: solid var(--safe-track-width) var(--track-color);
+  }
+
+  .tab-group-start .indicator {
+    inset-inline-end: calc(-1 * var(--safe-track-width));
+    border-right: solid var(--safe-track-width) var(--indicator-color);
+  }
+
+  .tab-group-start .body {
+    flex: 1 1 auto;
+    order: 2;
+  }
+
+  .tab-group-start ::slotted(cs-tab[active]) {
+    border-inline-end: solid var(--safe-track-width) var(--indicator-color);
+    margin-inline-end: calc(-1 * var(--safe-track-width)) !important;
+  }
+
+  .tab-group-start .body slot::slotted(cs-tab-panel) {
+    --padding: 0 var(--cs-space-xl);
+  }
+
+  /*
+    * End
+    */
+
+  .tab-group-end {
+    flex-direction: row;
+  }
+
+  .tab-group-end .nav-container {
+    order: 2;
+  }
+
+  .tab-group-end .tabs {
+    flex: 0 0 auto;
+    flex-direction: column;
+    border-left: solid var(--safe-track-width) var(--track-color);
+  }
+
+  .tab-group-end .indicator {
+    inset-inline-start: calc(-1 * var(--safe-track-width));
+    border-inline-start: solid var(--safe-track-width) var(--indicator-color);
+  }
+
+  .tab-group-end .body {
+    flex: 1 1 auto;
+    order: 1;
+  }
+
+  .tab-group-end ::slotted(cs-tab[active]) {
+    border-inline-start: solid var(--safe-track-width) var(--indicator-color);
+    margin-inline-start: calc(-1 * var(--safe-track-width)) !important;
+  }
+
+  .tab-group-end .body slot::slotted(cs-tab-panel) {
+    --padding: 0 var(--cs-space-xl);
+  }
+`;
+
+export {
+  tab_group_styles_default
+};