@sankhyatronics/sankhya-cms 0.1.18 → 0.3.0

package/dist/chunk-J6EO4R73.js

@@ -1,633 +0,0 @@
-import {
-  arrowUpRightIcon
-} from "./chunk-WTD2YIAA.js";
-import {
-  controlBaseStyles,
-  fontFamilyStyles
-} from "./chunk-KMU6ABQF.js";
-import {
-  __decorateClass
-} from "./chunk-EUXUH3YW.js";
-
-// src/mega-menu/MegaMenu.ts
-import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-var MegaMenu = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.heading = "";
-    this.description = "";
-    this.featuredHeading = "";
-    this.columns = 0;
-    this.columnCount = 1;
-    this.hasIntroLinks = false;
-    this.hasFeatured = false;
-    this.onColumnsSlotChange = (event) => {
-      this.columnCount = Math.max(1, event.target.assignedElements({ flatten: true }).length);
-    };
-    this.onIntroSlotChange = (event) => {
-      this.hasIntroLinks = event.target.assignedElements({ flatten: true }).length > 0;
-    };
-    this.onFeaturedSlotChange = (event) => {
-      this.hasFeatured = event.target.assignedElements({ flatten: true }).length > 0;
-    };
-  }
-  render() {
-    const columns = Math.min(6, Math.max(1, Math.round(this.columns) || this.columnCount));
-    const hasIntroText = !!(this.heading || this.description);
-    const hasIntro = hasIntroText || this.hasIntroLinks;
-    const hasFeatured = this.hasFeatured || !!this.featuredHeading;
-    const tracks = [hasIntro ? "minmax(0, 1fr)" : "", `minmax(0, ${columns}fr)`, hasFeatured ? "minmax(0, 1fr)" : ""].filter(Boolean).join(" ");
-    return html`
-      <div
-        part="inner"
-        class="inner"
-        style="grid-template-columns:${tracks};--st-mega-menu-columns:${columns};--st-mega-menu-columns-md:${Math.min(2, columns)}"
-      >
-        <div part="intro" class="intro" ?hidden=${!hasIntro}>
-          ${this.heading ? html`<p part="heading" class="intro-heading">${this.heading}</p>` : nothing}
-          ${this.description ? html`<p part="description" class="intro-description">${this.description}</p>` : nothing}
-          <div part="intro-links" class="intro-links ${hasIntroText ? "" : "no-text"}" ?hidden=${!this.hasIntroLinks}>
-            <slot name="intro" @slotchange=${this.onIntroSlotChange}></slot>
-          </div>
-        </div>
-        <div part="columns" class="columns"><slot @slotchange=${this.onColumnsSlotChange}></slot></div>
-        <div part="featured" class="featured" ?hidden=${!hasFeatured}>
-          ${this.featuredHeading ? html`<p part="featured-heading" class="featured-heading">${this.featuredHeading}</p>` : nothing}
-          <div class="featured-items"><slot name="featured" @slotchange=${this.onFeaturedSlotChange}></slot></div>
-        </div>
-      </div>
-    `;
-  }
-};
-MegaMenu.styles = css`
-    ${controlBaseStyles}
-
-    :host {
-      display: block;
-      container-type: inline-size;
-      ${fontFamilyStyles}
-    }
-
-    .inner {
-      display: grid;
-      gap: 3rem;
-      padding: 3rem 3.5rem;
-      box-sizing: border-box;
-    }
-
-    .columns {
-      display: grid;
-      grid-template-columns: repeat(var(--st-mega-menu-columns, 3), minmax(0, 1fr));
-      gap: 3rem;
-      align-items: stretch;
-    }
-
-    .intro,
-    .featured {
-      display: flex;
-      flex-direction: column;
-      min-width: 0;
-    }
-
-    .intro-heading {
-      margin: 0 0 1rem;
-      font-size: 2rem;
-      font-weight: 400;
-      line-height: 1.15;
-      color: var(--st-color-text-strong);
-    }
-
-    .intro-description {
-      margin: 0;
-      font-size: 1rem;
-      line-height: 1.55;
-      color: var(--st-color-text);
-    }
-
-    .intro-links {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      margin-top: 2.5rem;
-      padding-top: 2rem;
-      border-top: 1px solid var(--st-color-border);
-    }
-
-    .intro-links.no-text {
-      margin-top: 0;
-      padding-top: 0;
-      border-top: 0;
-    }
-
-    .featured-heading {
-      margin: 0 0 1rem;
-      font-size: 1.125rem;
-      font-weight: 500;
-      line-height: 1.35;
-      color: var(--st-color-text-strong);
-    }
-
-    .featured-items {
-      display: flex;
-      flex-direction: column;
-      gap: 0.75rem;
-    }
-
-    [hidden] {
-      display: none !important;
-    }
-
-    /* Medium panel: intro on top, two link columns, featured cards side by side underneath. */
-    @container (max-width: 960px) {
-      .inner {
-        grid-template-columns: minmax(0, 1fr) !important;
-        gap: 2rem;
-        padding: 2rem;
-      }
-
-      .columns {
-        grid-template-columns: repeat(var(--st-mega-menu-columns-md, 2), minmax(0, 1fr));
-        gap: 2rem;
-      }
-
-      .intro-links {
-        margin-top: 1.5rem;
-        padding-top: 1.5rem;
-      }
-
-      .featured-items {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-      }
-    }
-
-    /* Narrow panel (the phone drill-down): everything stacked. */
-    @container (max-width: 560px) {
-      .inner {
-        gap: 1.75rem;
-        padding: 0.5rem 0 1.5rem;
-      }
-
-      .columns {
-        grid-template-columns: minmax(0, 1fr);
-        gap: 1.75rem;
-      }
-
-      .intro-heading {
-        display: none;
-      }
-    }
-  `;
-__decorateClass([
-  property({ type: String })
-], MegaMenu.prototype, "heading", 2);
-__decorateClass([
-  property({ type: String })
-], MegaMenu.prototype, "description", 2);
-__decorateClass([
-  property({ type: String, attribute: "featured-heading" })
-], MegaMenu.prototype, "featuredHeading", 2);
-__decorateClass([
-  property({ type: Number })
-], MegaMenu.prototype, "columns", 2);
-__decorateClass([
-  state()
-], MegaMenu.prototype, "columnCount", 2);
-__decorateClass([
-  state()
-], MegaMenu.prototype, "hasIntroLinks", 2);
-__decorateClass([
-  state()
-], MegaMenu.prototype, "hasFeatured", 2);
-MegaMenu = __decorateClass([
-  customElement("st-mega-menu")
-], MegaMenu);
-
-// src/mega-menu/MegaMenuColumn.ts
-import { LitElement as LitElement2, css as css2, html as html2, nothing as nothing2 } from "lit";
-import { customElement as customElement2, property as property2 } from "lit/decorators.js";
-var MegaMenuColumn = class extends LitElement2 {
-  constructor() {
-    super(...arguments);
-    this.heading = "";
-    this.href = "";
-    this.description = "";
-    this.variant = "plain";
-    this.ctaLabel = "";
-    this.ctaHref = "";
-  }
-  select(event, href) {
-    if (href.startsWith("http")) return;
-    const selectEvent = new CustomEvent("mega-menu-select", {
-      detail: { href },
-      bubbles: true,
-      composed: true,
-      cancelable: true
-    });
-    this.dispatchEvent(selectEvent);
-    if (selectEvent.defaultPrevented) event.preventDefault();
-  }
-  renderHeading() {
-    if (!this.heading) return nothing2;
-    return this.href ? html2`<a part="heading" class="heading" href=${this.href} @click=${(event) => this.select(event, this.href)}
-          >${this.heading}</a
-        >` : html2`<p part="heading" class="heading">${this.heading}</p>`;
-  }
-  renderCta() {
-    if (!this.ctaLabel || !this.ctaHref) return nothing2;
-    const external = this.ctaHref.startsWith("http");
-    return html2`
-      <span class="cta-spacer"></span>
-      <a
-        part="cta"
-        class="cta"
-        href=${this.ctaHref}
-        target=${external ? "_blank" : "_self"}
-        rel=${external ? "noopener noreferrer" : nothing2}
-        @click=${(event) => this.select(event, this.ctaHref)}
-        >${this.ctaLabel} ${external ? arrowUpRightIcon(14) : nothing2}</a
-      >
-    `;
-  }
-  render() {
-    return html2`
-      ${this.renderHeading()}
-      ${this.description ? html2`<p part="description" class="description">${this.description}</p>` : nothing2}
-      <div part="items" class="items" role="group" aria-label=${this.heading || nothing2}><slot></slot></div>
-      ${this.renderCta()}
-    `;
-  }
-};
-MegaMenuColumn.styles = css2`
-    ${controlBaseStyles}
-
-    :host {
-      display: flex;
-      flex-direction: column;
-      min-width: 0;
-      box-sizing: border-box;
-      ${fontFamilyStyles}
-    }
-
-    :host([variant='card']),
-    :host([variant='accent']) {
-      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's
-         padding; override with --st-mega-menu-column-padding instead. */
-      padding: var(--st-mega-menu-column-padding, 2rem 1.75rem 1.75rem) !important;
-      border-radius: 20px;
-      background: color-mix(in oklch, var(--st-color-text-strong) 5%, var(--st-color-surface));
-    }
-
-    :host([variant='accent']) {
-      background: var(--st-color-accent);
-      color: var(--st-color-on-solid);
-      /* Read by the st-menu-item links inside. */
-      --st-nav-color: var(--st-color-on-solid);
-      --st-nav-hover-bg: transparent;
-    }
-
-    .heading {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      margin: 0 0 0.75rem;
-      font-size: 1.125rem;
-      font-weight: 500;
-      line-height: 1.35;
-      color: var(--st-color-text-strong);
-      text-decoration: none;
-    }
-
-    :host([variant='card']) .heading,
-    :host([variant='accent']) .heading {
-      font-size: 1.375rem;
-    }
-
-    :host([variant='accent']) .heading {
-      color: inherit;
-    }
-
-    a.heading:hover,
-    a.heading:focus-visible {
-      text-decoration: underline;
-      text-underline-offset: 4px;
-    }
-
-    .description {
-      margin: -0.25rem 0 0.75rem;
-      font-size: 0.875rem;
-      line-height: 1.5;
-      color: var(--st-color-text-muted);
-    }
-
-    :host([variant='accent']) .description {
-      color: inherit;
-      opacity: 0.85;
-    }
-
-    .items {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-    }
-
-    /* Nested groups stack with room between them (!important for the same page-reset reason). */
-    ::slotted(st-mega-menu-column:not(:first-child)) {
-      margin-top: 2rem !important;
-    }
-
-    .cta {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: 6px;
-      padding: 0.875rem 1.5rem;
-      border-radius: 9999px;
-      background: var(--st-color-surface);
-      color: var(--st-color-text-strong);
-      font-size: 1rem;
-      font-weight: 500;
-      text-align: center;
-      text-decoration: none;
-      transition: box-shadow 0.2s ease;
-    }
-
-    .cta-spacer {
-      flex: 1;
-      min-height: 1.75rem;
-    }
-
-    .cta:hover,
-    .cta:focus-visible {
-      box-shadow: 0 0 0 2px currentColor;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .cta {
-        transition: none;
-      }
-    }
-  `;
-__decorateClass([
-  property2({ type: String })
-], MegaMenuColumn.prototype, "heading", 2);
-__decorateClass([
-  property2({ type: String })
-], MegaMenuColumn.prototype, "href", 2);
-__decorateClass([
-  property2({ type: String })
-], MegaMenuColumn.prototype, "description", 2);
-__decorateClass([
-  property2({ type: String, reflect: true })
-], MegaMenuColumn.prototype, "variant", 2);
-__decorateClass([
-  property2({ type: String, attribute: "cta-label" })
-], MegaMenuColumn.prototype, "ctaLabel", 2);
-__decorateClass([
-  property2({ type: String, attribute: "cta-href" })
-], MegaMenuColumn.prototype, "ctaHref", 2);
-MegaMenuColumn = __decorateClass([
-  customElement2("st-mega-menu-column")
-], MegaMenuColumn);
-
-// src/mega-menu/MegaMenuFeature.ts
-import { LitElement as LitElement3, css as css3, html as html3, nothing as nothing3 } from "lit";
-import { customElement as customElement3, property as property3 } from "lit/decorators.js";
-var MegaMenuFeature = class extends LitElement3 {
-  constructor() {
-    super(...arguments);
-    this.variant = "story";
-    this.title = "";
-    this.description = "";
-    this.eyebrow = "";
-    this.href = "";
-    this.target = "";
-    this.imageUrl = "";
-    this.imageAlt = "";
-    this.logoUrl = "";
-    this.logoAlt = "";
-    this.ctaLabel = "";
-    this.onClick = (event) => {
-      if (this.isExternal) return;
-      const selectEvent = new CustomEvent("mega-menu-select", {
-        detail: { href: this.href },
-        bubbles: true,
-        composed: true,
-        cancelable: true
-      });
-      this.dispatchEvent(selectEvent);
-      if (selectEvent.defaultPrevented) event.preventDefault();
-    };
-  }
-  get isExternal() {
-    return this.href.startsWith("http");
-  }
-  render() {
-    const target = this.target || (this.isExternal ? "_blank" : "_self");
-    const overlay = this.variant === "overlay";
-    const style = overlay && this.imageUrl ? `--st-mega-menu-feature-image:url(${JSON.stringify(this.imageUrl)})` : "";
-    return html3`
-      <a
-        part="card"
-        class="card"
-        style=${style}
-        href=${this.href || nothing3}
-        target=${target}
-        rel=${target === "_blank" ? "noopener noreferrer" : nothing3}
-        @click=${this.onClick}
-      >
-        ${overlay && this.logoUrl ? html3`<img part="logo" class="logo" src=${this.logoUrl} alt=${this.logoAlt} />` : nothing3}
-        ${!overlay && this.imageUrl ? html3`<img part="image" class="image" src=${this.imageUrl} alt=${this.imageAlt} loading="lazy" />` : nothing3}
-        ${this.eyebrow ? html3`<span part="eyebrow" class="eyebrow">${this.eyebrow}</span>` : nothing3}
-        ${this.title ? html3`<p part="title" class="title">${this.title}</p>` : nothing3}
-        ${this.description ? html3`<p part="description" class="description">${this.description}</p>` : nothing3}
-        ${this.ctaLabel ? html3`<span part="cta" class="cta">${this.ctaLabel}</span>` : nothing3}
-      </a>
-    `;
-  }
-};
-/** `focus()` on the element focuses its link, so `st-dropdown` can arrow-key to it. */
-MegaMenuFeature.shadowRootOptions = { ...LitElement3.shadowRootOptions, delegatesFocus: true };
-MegaMenuFeature.styles = css3`
-    ${controlBaseStyles}
-
-    :host {
-      display: block;
-      ${fontFamilyStyles}
-    }
-
-    .card {
-      display: flex;
-      flex-direction: column;
-      gap: 0.75rem;
-      box-sizing: border-box;
-      color: var(--st-color-text-strong);
-      text-decoration: none;
-    }
-
-    .image {
-      display: block;
-      width: 100%;
-      aspect-ratio: 9 / 8;
-      object-fit: cover;
-      border-radius: 20px;
-      transition: transform 0.3s ease;
-    }
-
-    .card:hover .image {
-      transform: scale(1.015);
-    }
-
-    .eyebrow {
-      font-size: 0.75rem;
-      font-weight: 600;
-      letter-spacing: 0.06em;
-      text-transform: uppercase;
-      color: var(--st-color-accent-text);
-    }
-
-    .title {
-      margin: 0;
-      font-size: 1.125rem;
-      font-weight: 500;
-      line-height: 1.3;
-    }
-
-    .description {
-      margin: 0;
-      font-size: 0.9375rem;
-      line-height: 1.5;
-    }
-
-    .cta {
-      align-self: flex-start;
-      margin-top: 0.75rem;
-      font-size: 0.9375rem;
-      font-weight: 500;
-      text-decoration: underline;
-      text-underline-offset: 5px;
-      text-decoration-thickness: 1px;
-    }
-
-    .card:hover .cta,
-    .card:focus-visible .cta {
-      text-decoration-thickness: 2px;
-    }
-
-    /* overlay */
-    :host([variant='overlay']) .card {
-      justify-content: flex-end;
-      gap: 0.5rem;
-      min-height: 15rem;
-      padding: 1.75rem;
-      border-radius: 20px;
-      color: #fff;
-      background-color: var(--st-color-accent);
-      background-image:
-        linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.05)),
-        var(--st-mega-menu-feature-image, linear-gradient(160deg, var(--st-mega-menu-feature-from, var(--st-color-accent)), var(--st-mega-menu-feature-to, oklch(0.25 0.12 280))));
-      background-size: cover;
-      background-position: center;
-      transition: transform 0.2s ease;
-    }
-
-    :host([variant='overlay']) .card:hover {
-      transform: translateY(-2px);
-    }
-
-    :host([variant='overlay']) .logo {
-      height: 2.25rem;
-      width: auto;
-      max-width: 70%;
-      margin-bottom: auto;
-      align-self: flex-start;
-      object-fit: contain;
-    }
-
-    :host([variant='overlay']) .title {
-      font-size: 1.75rem;
-      font-weight: 400;
-    }
-
-    :host([variant='overlay']) .eyebrow,
-    :host([variant='overlay']) .cta {
-      color: inherit;
-    }
-
-    /* tip: a light-blue card with dark text, like a tip panel on a page. */
-    :host([variant='tip']) .card {
-      gap: 0.5rem;
-      padding: 1.25rem;
-      border-radius: var(--st-radius-md);
-      border: 1px solid var(--st-color-accent-border);
-      background: var(--st-color-accent-subtle);
-      color: var(--st-color-text);
-      transition: border-color 0.2s ease;
-    }
-
-    :host([variant='tip']) .card:hover {
-      border-color: var(--st-color-accent-muted);
-    }
-
-    :host([variant='tip']) .title {
-      font-size: var(--st-text-lg);
-      font-weight: var(--st-font-weight-semibold);
-      color: var(--st-color-text-strong);
-    }
-
-    :host([variant='tip']) .eyebrow,
-    :host([variant='tip']) .cta {
-      color: var(--st-color-accent-text);
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .image,
-      :host([variant='overlay']) .card {
-        transition: none;
-      }
-    }
-  `;
-__decorateClass([
-  property3({ type: String, reflect: true })
-], MegaMenuFeature.prototype, "variant", 2);
-__decorateClass([
-  property3({ type: String })
-], MegaMenuFeature.prototype, "title", 2);
-__decorateClass([
-  property3({ type: String })
-], MegaMenuFeature.prototype, "description", 2);
-__decorateClass([
-  property3({ type: String })
-], MegaMenuFeature.prototype, "eyebrow", 2);
-__decorateClass([
-  property3({ type: String })
-], MegaMenuFeature.prototype, "href", 2);
-__decorateClass([
-  property3({ type: String })
-], MegaMenuFeature.prototype, "target", 2);
-__decorateClass([
-  property3({ type: String, attribute: "image-url" })
-], MegaMenuFeature.prototype, "imageUrl", 2);
-__decorateClass([
-  property3({ type: String, attribute: "image-alt" })
-], MegaMenuFeature.prototype, "imageAlt", 2);
-__decorateClass([
-  property3({ type: String, attribute: "logo-url" })
-], MegaMenuFeature.prototype, "logoUrl", 2);
-__decorateClass([
-  property3({ type: String, attribute: "logo-alt" })
-], MegaMenuFeature.prototype, "logoAlt", 2);
-__decorateClass([
-  property3({ type: String, attribute: "cta-label" })
-], MegaMenuFeature.prototype, "ctaLabel", 2);
-MegaMenuFeature = __decorateClass([
-  customElement3("st-mega-menu-feature")
-], MegaMenuFeature);
-
-export {
-  MegaMenu,
-  MegaMenuColumn,
-  MegaMenuFeature
-};
-//# sourceMappingURL=chunk-J6EO4R73.js.map