@cruglobal/cornerstone-components 0.1.1 → 0.1.3

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

@@ -0,0 +1,56 @@
+/*! Cornerstone Components 0.1.3 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  callout_styles_default
+} from "./chunk.GEFTI4L5.js";
+import {
+  size_styles_default
+} from "./chunk.SWOOY6AB.js";
+import {
+  variants_styles_default
+} from "./chunk.LSP333EC.js";
+import {
+  CornerstoneElement,
+  customElement
+} from "./chunk.LGF4LDQG.js";
+import {
+  __decorateClass
+} from "./chunk.6UN6XRW4.js";
+
+// src/components/callout/callout.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var CsCallout = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "brand";
+    this.size = "m";
+  }
+  render() {
+    return html`
+      <div part="icon">
+        <slot name="icon"></slot>
+      </div>
+
+      <div part="message">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+CsCallout.css = [callout_styles_default, variants_styles_default, size_styles_default];
+__decorateClass([
+  property({ reflect: true })
+], CsCallout.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsCallout.prototype, "appearance", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsCallout.prototype, "size", 2);
+CsCallout = __decorateClass([
+  customElement("cs-callout")
+], CsCallout);
+
+export {
+  CsCallout
+};

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

@@ -0,0 +1,22 @@
+/*! Cornerstone Components 0.1.3 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  en_default
+} from "./chunk.FSCCAEXR.js";
+
+// src/utilities/localize.ts
+import { LocalizeController as DefaultLocalizationController, registerTranslation } from "@shoelace-style/localize";
+import { registerTranslation as registerTranslation2 } from "@shoelace-style/localize";
+var LocalizeController = class extends DefaultLocalizationController {
+  lang() {
+    if (this.host.didSSR && !this.host.hasUpdated) {
+      return this.host.lang || "en";
+    }
+    return super.lang();
+  }
+};
+registerTranslation(en_default);
+
+export {
+  LocalizeController,
+  registerTranslation2 as registerTranslation
+};

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

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

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

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

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

@@ -0,0 +1,24 @@
+/*! Cornerstone Components 0.1.3 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsResizeObserver
+} from "./chunk.7WZMMBRW.js";
+
+// src/react/resize-observer/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cs-resize-observer";
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CsResizeObserver,
+  react: React,
+  events: {
+    onCsResize: "cs-resize"
+  },
+  displayName: "CsResizeObserver"
+});
+var resize_observer_default = reactWrapper;
+
+export {
+  resize_observer_default
+};

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

@@ -0,0 +1,85 @@
+/*! Cornerstone Components 0.1.3 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/components/callout/callout.styles.ts
+import { css } from "lit";
+var callout_styles_default = css`
+  :host {
+    display: flex;
+    position: relative;
+    align-items: stretch;
+    border-radius: var(--cs-panel-border-radius);
+    background-color: var(--cs-color-fill-quiet, var(--cs-color-brand-fill-quiet));
+    border-color: var(--cs-color-border-quiet, var(--cs-color-brand-border-quiet));
+    border-style: var(--cs-panel-border-style);
+    border-width: var(--cs-panel-border-width);
+    color: var(--cs-color-text-normal);
+    padding: 1em;
+  }
+
+  /* Appearance modifiers */
+  :host([appearance~='plain']) {
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  :host([appearance~='outlined']) {
+    background-color: transparent;
+    border-color: var(--cs-color-border-loud, var(--cs-color-brand-border-loud));
+  }
+
+  :host([appearance~='filled']) {
+    background-color: var(--cs-color-fill-quiet, var(--cs-color-brand-fill-quiet));
+    border-color: transparent;
+  }
+
+  :host([appearance~='filled-outlined']) {
+    border-color: var(--cs-color-border-quiet, var(--cs-color-brand-border-quiet));
+  }
+
+  :host([appearance~='accent']) {
+    color: var(--cs-color-on-loud, var(--cs-color-brand-on-loud));
+    background-color: var(--cs-color-fill-loud, var(--cs-color-brand-fill-loud));
+    border-color: transparent;
+
+    [part~='icon'] {
+      color: currentColor;
+    }
+  }
+
+  [part~='icon'] {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    color: var(--cs-color-on-quiet);
+    font-size: 1.25em;
+  }
+
+  /*
+   * The gap between the icon and the message, and why it is !important.
+   *
+   * A slotted element belongs to the outer tree, so per the shadow cascade a *normal* declaration from the
+   * outer tree beats one from the inner tree whatever the specificity: any document-level universal margin
+   * reset -- Starlight's, Tailwind's Preflight, any of the classic ones -- silently collapsed this gap to zero.
+   * The same cascade rule inverts for important declarations, where the inner tree wins, which is the mechanism
+   * a component has to defend its own internals against a consumer's reset.
+   *
+   * Two alternatives were tried and do not work. Moving the margin to the icon container puts it out of reach
+   * of outer rules, but the container renders whether or not anything is slotted, so an icon-less callout gains
+   * the gap as dead space -- reacting to what is actually slotted is the thing ::slotted gets for free. Gating
+   * that with :host(:has(> [slot='icon'])) does not match at all: :host() takes a compound selector, and :has()
+   * with a relative selector inside it is not matched.
+   */
+  ::slotted([slot='icon']) {
+    margin-inline-end: var(--cs-form-control-padding-inline) !important;
+  }
+
+  [part~='message'] {
+    flex: 1 1 auto;
+    display: block;
+    overflow: hidden;
+  }
+`;
+
+export {
+  callout_styles_default
+};

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

@@ -0,0 +1,83 @@
+/*! Cornerstone Components 0.1.3 - 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.GIDGPXQW.js

@@ -0,0 +1,18 @@
+/*! Cornerstone Components 0.1.3 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/components/page/page.mobile.styles.ts
+var page_mobile_styles_default = (breakpoint = "768px") => `
+  @media screen and (width < ${breakpoint}) {
+    [part~='navigation'] {
+      display: none;
+    }
+
+    :host(:not([disable-navigation-toggle])) slot[name~='navigation-toggle'] {
+      display: contents;
+    }
+  }
+`;
+
+export {
+  page_mobile_styles_default
+};

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

@@ -0,0 +1,232 @@
+/*! Cornerstone Components 0.1.3 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsAccordionItemCollapsedEvent
+} from "./chunk.JT7FTM6O.js";
+import {
+  CsAccordionItemExpandedEvent
+} from "./chunk.YOGCAIH4.js";
+import {
+  CsAccordionItemTriggerEvent
+} from "./chunk.GSTRJSXP.js";
+import {
+  waitForEvent
+} from "./chunk.QE6GTLC3.js";
+import {
+  animate,
+  parseDuration
+} from "./chunk.BHWZGHBO.js";
+import {
+  watch
+} from "./chunk.MBVC472U.js";
+import {
+  CornerstoneElement,
+  customElement
+} from "./chunk.LGF4LDQG.js";
+import {
+  LocalizeController
+} from "./chunk.FZ4QCNJ4.js";
+import {
+  accordion_item_styles_default
+} from "./chunk.ADTWU4E4.js";
+import {
+  __decorateClass
+} from "./chunk.6UN6XRW4.js";
+
+// src/components/accordion-item/accordion-item.ts
+import { html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var CsAccordionItem = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.animationGeneration = 0;
+    this.localize = new LocalizeController(this);
+    this.isAnimating = false;
+    this.label = "";
+    this.expanded = false;
+    this.disabled = false;
+    this.headingLevel = "3";
+    this.isTabbable = true;
+    this.iconPlacement = "end";
+    this.appearance = "outlined";
+  }
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    this.body.style.height = this.expanded ? "auto" : "0";
+  }
+  updated() {
+    this.customStates.set("animating", this.isAnimating);
+  }
+  handleTriggerClick() {
+    if (this.disabled) {
+      return;
+    }
+    this.dispatchEvent(new CsAccordionItemTriggerEvent({ item: this }));
+  }
+  handleTriggerKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.handleTriggerClick();
+    }
+  }
+  async handleExpandedChange() {
+    this.animationGeneration++;
+    const generation = this.animationGeneration;
+    if (this.expanded) {
+      this.isAnimating = true;
+      const duration = parseDuration(getComputedStyle(this.body).getPropertyValue("--show-duration") || "200ms");
+      const easing = getComputedStyle(this.body).getPropertyValue("--easing") || "ease";
+      await animate(
+        this.body,
+        [
+          { height: "0", opacity: "0" },
+          { height: `${this.body.scrollHeight}px`, opacity: "1" }
+        ],
+        { duration, easing }
+      );
+      if (this.animationGeneration !== generation) {
+        return;
+      }
+      this.body.style.height = "auto";
+      this.isAnimating = false;
+      this.dispatchEvent(new CsAccordionItemExpandedEvent());
+    } else {
+      this.isAnimating = true;
+      const duration = parseDuration(getComputedStyle(this.body).getPropertyValue("--hide-duration") || "200ms");
+      const easing = getComputedStyle(this.body).getPropertyValue("--easing") || "ease";
+      await animate(
+        this.body,
+        [
+          { height: `${this.body.scrollHeight}px`, opacity: "1" },
+          { height: "0", opacity: "0" }
+        ],
+        { duration, easing }
+      );
+      if (this.animationGeneration !== generation) {
+        return;
+      }
+      this.body.style.height = "0";
+      this.isAnimating = false;
+      this.dispatchEvent(new CsAccordionItemCollapsedEvent());
+    }
+  }
+  /** Expands the accordion item with animation. */
+  async expand() {
+    if (this.expanded || this.disabled) {
+      return;
+    }
+    this.expanded = true;
+    return waitForEvent(this, "cs-accordion-item-expanded");
+  }
+  /** Collapses the accordion item with animation. */
+  async collapse() {
+    if (!this.expanded || this.disabled) {
+      return;
+    }
+    this.expanded = false;
+    return waitForEvent(this, "cs-accordion-item-collapsed");
+  }
+  /** Toggles the accordion item's expanded state. */
+  async toggle() {
+    return this.expanded ? this.collapse() : this.expand();
+  }
+  /** Focuses the accordion item's trigger button. */
+  focus(options) {
+    this.triggerButton?.focus(options);
+  }
+  renderHeadingWrapper(content) {
+    const level = parseInt(this.headingLevel, 10);
+    switch (level >= 1 && level <= 6 ? level : 3) {
+      case 1:
+        return html`<h1 part="heading">${content}</h1>`;
+      case 2:
+        return html`<h2 part="heading">${content}</h2>`;
+      case 4:
+        return html`<h4 part="heading">${content}</h4>`;
+      case 5:
+        return html`<h5 part="heading">${content}</h5>`;
+      case 6:
+        return html`<h6 part="heading">${content}</h6>`;
+      default:
+        return html`<h3 part="heading">${content}</h3>`;
+    }
+  }
+  render() {
+    const isRtl = !this.hasUpdated ? this.dir === "rtl" : this.localize.dir() === "rtl";
+    const button = html`
+      <button
+        part="button"
+        type="button"
+        id="trigger"
+        aria-expanded=${this.expanded ? "true" : "false"}
+        aria-controls="panel"
+        aria-disabled=${this.disabled ? "true" : "false"}
+        tabindex=${this.disabled || !this.isTabbable ? "-1" : "0"}
+        @click=${this.handleTriggerClick}
+        @keydown=${this.handleTriggerKeyDown}
+      >
+        <slot name="label" part="label">${this.label}</slot>
+        <span part="icon">
+          <slot name="icon">
+            <cs-icon library="system" name=${isRtl ? "keyboard_arrow_left" : "keyboard_arrow_right"}></cs-icon>
+          </slot>
+        </span>
+      </button>
+    `;
+    return html`
+      <div part="accordion-item">
+        ${this.headingLevel === "none" ? button : this.renderHeadingWrapper(button)}
+        <div
+          part="panel"
+          id="panel"
+          class=${classMap({ body: true, animating: this.isAnimating })}
+          role="region"
+          aria-labelledby="trigger"
+        >
+          <slot part="content" class="content"></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+CsAccordionItem.css = accordion_item_styles_default;
+__decorateClass([
+  query(".body")
+], CsAccordionItem.prototype, "body", 2);
+__decorateClass([
+  query('[part~="button"]')
+], CsAccordionItem.prototype, "triggerButton", 2);
+__decorateClass([
+  state()
+], CsAccordionItem.prototype, "isAnimating", 2);
+__decorateClass([
+  property()
+], CsAccordionItem.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CsAccordionItem.prototype, "expanded", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CsAccordionItem.prototype, "disabled", 2);
+__decorateClass([
+  property({ attribute: "heading-level", reflect: true })
+], CsAccordionItem.prototype, "headingLevel", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: false })
+], CsAccordionItem.prototype, "isTabbable", 2);
+__decorateClass([
+  property({ attribute: "icon-placement", reflect: true })
+], CsAccordionItem.prototype, "iconPlacement", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsAccordionItem.prototype, "appearance", 2);
+__decorateClass([
+  watch("expanded", { waitUntilFirstUpdate: true })
+], CsAccordionItem.prototype, "handleExpandedChange", 1);
+CsAccordionItem = __decorateClass([
+  customElement("cs-accordion-item")
+], CsAccordionItem);
+
+export {
+  CsAccordionItem
+};