@sankhyatronics/sankhya-cms 0.2.0 → 0.3.0

package/dist/chunk-OEOE6IFY.js

@@ -0,0 +1,628 @@
+import {
+  externalLinkAttrs,
+  externalLinkExtras
+} from "./chunk-T4BIN37Q.js";
+import {
+  controlBaseStyles,
+  fontFamilyStyles
+} from "./chunk-NXUS2CH7.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/product-nav/ProductNav.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+var ProductNav = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.brandPrefix = "";
+    this.brandName = "";
+    this.brandTagline = "";
+    this.brandHref = "#top";
+    this.icon = "";
+    this.iconDark = "";
+    this.links = [];
+    this.actionLabel = "";
+    this.actionShortLabel = "";
+    this.href = "";
+    this.siteMenuLabel = "";
+    this.siteMenuOpen = false;
+    this.sticky = false;
+    this.label = "";
+    this.embedded = false;
+    this.scrollSpy = false;
+    this.activeId = "";
+    /** The sections the scroll spy measures (set while `scrollSpy` is on). */
+    this.spyTargets = [];
+    this.spyFrame = 0;
+    /** Scroll spy re-checks on every scroll frame: an IntersectionObserver alone misses a long section passing the line. */
+    this.onSpyScroll = () => {
+      if (this.spyFrame) return;
+      this.spyFrame = requestAnimationFrame(() => {
+        this.spyFrame = 0;
+        this.updateScrollSpy();
+      });
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.observe();
+  }
+  disconnectedCallback() {
+    this.observer?.disconnect();
+    this.observer = void 0;
+    this.stopSpyScroll();
+    super.disconnectedCallback();
+  }
+  updated(changed) {
+    if (changed.has("links") || changed.has("scrollSpy")) this.observe();
+    if (changed.has("activeId") && this.activeId) this.revealActiveLink();
+  }
+  /** When the links row scrolls sideways (phones), keeps the current section's link in view. Only the
+   * row scrolls, never the page. */
+  revealActiveLink() {
+    const row = this.renderRoot.querySelector(".links");
+    const link = row?.querySelector("a[aria-current]");
+    if (!row || !link || row.scrollWidth <= row.clientWidth) return;
+    const rowBox = row.getBoundingClientRect();
+    const linkBox = link.getBoundingClientRect();
+    const margin = 24;
+    let delta = 0;
+    if (linkBox.left < rowBox.left + margin) delta = linkBox.left - rowBox.left - margin;
+    else if (linkBox.right > rowBox.right - margin) delta = linkBox.right - rowBox.right + margin;
+    if (delta) {
+      const smooth = !window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+      row.scrollBy({ left: delta, behavior: smooth ? "smooth" : "auto" });
+    }
+  }
+  /**
+   * Scroll spy: the section in view is the LAST one, in document order, whose top is at or above
+   * `SPY_OFFSET + SPY_TOLERANCE`. None above that line (above the first section) leaves no active id.
+   * At the bottom of the page the last section is active, even if its top never reaches the line.
+   */
+  updateScrollSpy() {
+    const targets = this.spyTargets;
+    const atBottom = window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 2;
+    const line = ProductNav.SPY_OFFSET + ProductNav.SPY_TOLERANCE;
+    let id = "";
+    if (atBottom && targets.length) {
+      id = targets[targets.length - 1].id;
+    } else {
+      for (const target of targets) {
+        if (target.getBoundingClientRect().top <= line) id = target.id;
+      }
+    }
+    if (id !== this.activeId) this.activeId = id;
+  }
+  stopSpyScroll() {
+    window.removeEventListener("scroll", this.onSpyScroll);
+    if (this.spyFrame) cancelAnimationFrame(this.spyFrame);
+    this.spyFrame = 0;
+    this.spyTargets = [];
+  }
+  /** Watches the sections the `#anchor` links point at, so the link for the one in view is current. */
+  observe() {
+    this.observer?.disconnect();
+    this.observer = void 0;
+    this.stopSpyScroll();
+    if (typeof IntersectionObserver === "undefined" || typeof document === "undefined") return;
+    const targets = this.links.filter((link) => link.href.startsWith("#") && link.href.length > 1).map((link) => document.getElementById(link.href.slice(1))).filter((node) => node !== null);
+    if (!targets.length) return;
+    if (this.scrollSpy) {
+      this.spyTargets = [...targets].sort(
+        (a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+      );
+      this.observer = new IntersectionObserver(() => this.updateScrollSpy(), {
+        rootMargin: `-${ProductNav.SPY_OFFSET}px 0px 0px 0px`,
+        threshold: 0
+      });
+      targets.forEach((target) => this.observer?.observe(target));
+      window.addEventListener("scroll", this.onSpyScroll, { passive: true });
+      this.updateScrollSpy();
+      return;
+    }
+    this.observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) this.activeId = entry.target.id;
+          else if (this.activeId === entry.target.id) this.activeId = "";
+        }
+      },
+      { rootMargin: "-40% 0px -55% 0px" }
+    );
+    targets.forEach((target) => this.observer?.observe(target));
+  }
+  /** The product icon: the light image, plus the dark one (theme-switched) when `iconDark` is set. Alt is empty: the link text names the product. */
+  renderIcon() {
+    if (!this.icon) return nothing;
+    const light = html`<img part="icon" class="icon${this.iconDark ? " theme-light" : ""}" src=${this.icon} alt="" width="40" height="40" />`;
+    if (!this.iconDark) return light;
+    return html`${light}<img part="icon" class="icon theme-dark" src=${this.iconDark} alt="" width="40" height="40" />`;
+  }
+  /** The site-menu button, before the action pill. Only with `site-menu-label`. */
+  renderSiteMenu() {
+    if (!this.siteMenuLabel) return nothing;
+    return html`<button
+      part="site-menu"
+      type="button"
+      class="site-menu"
+      aria-label=${this.siteMenuLabel}
+      aria-haspopup="dialog"
+      aria-expanded=${this.siteMenuOpen}
+      @click=${(event) => this.onSiteMenuClick(event)}
+    >
+      <svg viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 5h14M3 10h14M3 15h14"></path></svg>
+    </button>`;
+  }
+  /** Dispatches `product-nav-site-menu`, with the button as the detail's `trigger`, for the host header to open its site menu. */
+  onSiteMenuClick(event) {
+    const trigger = event.currentTarget;
+    this.dispatchEvent(
+      new CustomEvent("product-nav-site-menu", { detail: { trigger }, bubbles: true, composed: true })
+    );
+  }
+  render() {
+    const label = this.label || `${this.brandPrefix}${this.brandName}`;
+    return html`
+      <nav part="nav" aria-label=${label}>
+        <div class="bar">
+          <div class="lockup" part="lockup">
+            <a class="brand" part="brand" href=${this.brandHref || "#top"}>
+              ${this.renderIcon()}
+              <span class="brand-text">
+                <span class="wordmark"><span class="prefix">${this.brandPrefix}</span><span class="name">${this.brandName}</span></span>
+                <span class="rule" aria-hidden="true"></span>
+                ${this.brandTagline ? html`<span class="tagline">${this.brandTagline}</span>` : nothing}
+              </span>
+            </a>
+          </div>
+          ${this.links.length ? html`<ul class="links" part="links">
+                ${this.links.map(
+      (link) => html`<li>
+                    <a
+                      part="link"
+                      href=${link.href}
+                      target=${externalLinkAttrs(link.href).target}
+                      rel=${externalLinkAttrs(link.href).rel}
+                      aria-current=${this.activeId && link.href === `#${this.activeId}` ? this.scrollSpy ? "location" : "true" : nothing}
+                    >${link.label}${externalLinkExtras(link.href)}</a>
+                  </li>`
+    )}
+              </ul>` : nothing}
+          ${this.renderSiteMenu()}
+          ${this.actionLabel && this.href ? html`<a class="action ${this.actionShortLabel ? "has-short" : ""}" part="action" href=${this.href} aria-label=${this.actionLabel}><span class="action-full">${this.actionLabel}</span>${this.actionShortLabel ? html`<span class="action-short">${this.actionShortLabel}</span>` : nothing}<svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7"></path><path d="M9 7h8v8"></path></svg></a>` : nothing}
+        </div>
+      </nav>
+    `;
+  }
+};
+ProductNav.styles = css`
+    ${controlBaseStyles}
+    /* fontFamilyStyles is a bare declaration: it must sit inside a rule, or it swallows the next one. */
+    :host {
+      ${fontFamilyStyles}
+    }
+
+    /* The bar is exactly 64px tall on desktop (the bottom rule is an inset shadow, so it adds no height). */
+    :host {
+      display: block;
+      box-sizing: border-box;
+      background: var(--st-color-surface);
+      box-shadow: inset 0 -1px 0 var(--st-product-nav-border, var(--st-cms-primary-100));
+    }
+
+    /* Below st-header (z-index 100) and its open mega panel, which both sit in the header's stacking context. */
+    :host([sticky]:not([embedded])) {
+      position: sticky;
+      top: var(--st-product-nav-top, 0px);
+      z-index: var(--st-product-nav-z, 90);
+    }
+
+    .bar {
+      display: flex;
+      align-items: center;
+      gap: var(--st-space-24);
+      box-sizing: border-box;
+      max-width: var(--st-cms-container-max);
+      height: 64px;
+      margin: 0 auto;
+      padding: 0 var(--st-space-24);
+    }
+
+    .brand {
+      display: inline-flex;
+      flex: none;
+      align-items: center;
+      gap: var(--pn-brand-gap, 12px);
+      min-height: 44px;
+      color: inherit;
+      text-decoration: none;
+    }
+
+    /* The product icon before the lockup. A fixed square that never shrinks; the default image-rendering keeps an SVG crisp. */
+    .icon {
+      flex: none;
+      width: var(--pn-icon-size, 40px);
+      height: var(--pn-icon-size, 40px);
+      object-fit: contain;
+    }
+
+    /* Light and dark icon per the site's theme: the dark one shows on :root.dark (see --st-theme-*-display). */
+    .theme-light {
+      display: var(--st-theme-light-display, inline-block);
+    }
+
+    .theme-dark {
+      display: var(--st-theme-dark-display, none);
+    }
+
+    /* The lockup wrapper around the brand link. The icon size and the gap after the icon are variables,
+       which the embedded phone layout overrides. */
+    .lockup {
+      display: inline-flex;
+      align-items: center;
+      --pn-icon-size: 40px;
+      --pn-brand-gap: 12px;
+    }
+
+    /* The text column: the wordmark, the rule and the tagline. */
+    .brand-text {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+    }
+
+    .wordmark {
+      display: inline-block;
+      font-size: 24px;
+      font-weight: var(--st-font-weight-bold);
+      line-height: 1;
+      letter-spacing: -0.01em;
+    }
+
+    .prefix {
+      color: var(--st-cms-accent-text, var(--st-cms-brand-navy));
+    }
+
+    .name {
+      color: var(--st-cms-brand-azure);
+    }
+
+    /* The 3px azure bar under the wordmark, as wide as the lockup's tagline. */
+    .rule {
+      display: block;
+      height: 3px;
+      margin: 4px 0;
+      border-radius: 2px;
+      background: var(--st-cms-brand-azure);
+    }
+
+    .tagline {
+      font-size: 10px;
+      font-weight: var(--st-font-weight-semibold);
+      letter-spacing: 0.04em;
+      line-height: 1;
+      color: var(--st-cms-accent-text, var(--st-cms-brand-navy));
+    }
+
+    .brand:focus-visible,
+    .links a:focus-visible,
+    .action:focus-visible,
+    .site-menu:focus-visible {
+      outline: var(--st-focus-ring);
+      outline-offset: 2px;
+    }
+
+    .links {
+      display: flex;
+      flex: 1 1 auto;
+      align-items: center;
+      gap: var(--st-space-4);
+      min-width: 0;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      overflow-x: auto;
+      scrollbar-width: thin;
+    }
+
+    .links a {
+      /* Positioned, so the visually hidden "(opens in new tab)" of an external link stays inside the link
+         instead of widening the page past the sideways-scrolling row. */
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      box-sizing: border-box;
+      min-height: 44px;
+      padding: 10px 12px;
+      border-radius: var(--st-radius-xs);
+      color: var(--st-cms-text-strong, var(--st-cms-navy));
+      font-size: 15px;
+      font-weight: 500;
+      line-height: 1.2;
+      text-decoration: none;
+      white-space: nowrap;
+      transition: background-color 0.2s ease;
+    }
+
+    .links a:hover {
+      background: var(--st-cms-primary-100);
+    }
+
+    /* The section in view: brand-navy text with an azure underline. */
+    .links a[aria-current='true'] {
+      color: var(--st-cms-accent-text, var(--st-cms-brand-navy));
+      font-weight: var(--st-font-weight-semibold);
+      box-shadow: inset 0 -3px 0 var(--st-cms-brand-azure);
+    }
+
+    /* The section the scroll spy marks: accent text with a 2px underline. */
+    .links a[aria-current='location'] {
+      color: var(--st-cms-accent-text, var(--st-cms-brand-navy));
+      font-weight: var(--st-font-weight-semibold);
+      box-shadow: inset 0 -2px 0 var(--st-cms-brand-azure);
+    }
+
+    /* embedded: the row of a host header, not a bar of its own. The host stretches to the free width
+       of the header's row; the inner row has no container width, margin or padding of its own, so it
+       lines up with the header's padding. */
+    /* A flex box, so the inner row is vertically centred in the header's row (a percentage height on
+       the row alone does not resolve here). */
+    :host([embedded]) {
+      display: flex;
+      align-items: center;
+      flex: 1 1 auto;
+      min-width: 0;
+      height: 100%;
+      background: transparent;
+      box-shadow: none;
+    }
+
+    /* The <nav> (and the row inside it) fill the flex host, so the links take the free space and the
+       pill sits at the end. */
+    :host([embedded]) nav {
+      display: flex;
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+
+    :host([embedded]) .bar {
+      box-sizing: border-box;
+      flex: 1 1 auto;
+      min-width: 0;
+      align-items: center;
+      gap: 24px;
+      width: 100%;
+      max-width: none;
+      height: auto;
+      margin: 0;
+      padding: 0;
+    }
+
+    /* Links take the space between the lockup and the pill; they scroll inside it if they do not fit. */
+    :host([embedded]) .links {
+      flex: 1 1 auto;
+      justify-content: center;
+      min-width: 0;
+    }
+
+    :host([embedded]) .links > li {
+      flex: none;
+    }
+
+    :host([embedded]) .links a {
+      min-height: 44px;
+    }
+
+    :host([embedded]) .action {
+      flex: none;
+      margin-left: 0;
+    }
+
+    /* The short label of the action pill, shown on phones when the action-short-label attribute is set. */
+    .action-short {
+      display: none;
+    }
+
+    .action {
+      display: inline-flex;
+      flex: none;
+      align-items: center;
+      gap: var(--st-space-8);
+      box-sizing: border-box;
+      min-height: 44px;
+      margin-left: auto;
+      padding: 0 var(--st-space-20);
+      border-radius: var(--st-radius-full);
+      background: var(--st-cms-brand-navy);
+      color: var(--st-cms-on-dark);
+      font-size: 15px;
+      font-weight: var(--st-font-weight-semibold);
+      text-decoration: none;
+      white-space: nowrap;
+    }
+
+    .action svg {
+      flex: none;
+      width: 16px;
+      height: 16px;
+    }
+
+    /* The site-menu button: a 44px round, outlined hamburger before the action pill. Shown at every width. */
+    .site-menu {
+      display: inline-flex;
+      flex: none;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      width: 44px;
+      height: 44px;
+      margin: 0;
+      padding: 0;
+      border: 1px solid var(--st-color-border);
+      border-radius: 9999px;
+      background: transparent;
+      color: var(--st-cms-text-strong, currentColor);
+      cursor: pointer;
+    }
+
+    .site-menu:hover {
+      background: var(--st-color-hover);
+    }
+
+    .site-menu svg {
+      flex: none;
+      width: 20px;
+      height: 20px;
+    }
+
+    @media (max-width: 768px) {
+      .bar {
+        flex-wrap: wrap;
+        height: auto;
+        gap: var(--st-space-12) var(--st-space-16);
+        padding-top: var(--st-space-8);
+        padding-bottom: var(--st-space-8);
+      }
+
+      .links {
+        order: 3;
+        flex: 1 0 100%;
+        width: 100%;
+        /* One row that scrolls sideways inside the bar; the page itself never scrolls sideways. */
+        flex-wrap: nowrap;
+      }
+
+      /* embedded on a phone: lockup | sideways links | compact pill, all in one 64px row. */
+      :host([embedded]) .bar {
+        flex-wrap: nowrap;
+        gap: var(--st-space-12) var(--st-space-12);
+        padding: 0;
+      }
+
+      :host([embedded]) .wordmark {
+        font-size: 18px;
+      }
+
+      :host([embedded]) .brand {
+        min-height: 36px;
+      }
+
+      :host([embedded]) .lockup {
+        --pn-icon-size: 32px;
+        --pn-brand-gap: 8px;
+      }
+
+      :host([embedded]) .links {
+        order: 0;
+        flex: 1 1 0;
+        width: auto;
+        min-width: 0;
+        justify-content: flex-start;
+        scrollbar-width: none;
+        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
+        mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
+      }
+
+      :host([embedded]) .links::-webkit-scrollbar {
+        display: none;
+      }
+
+      :host([embedded]) .action {
+        min-height: 36px;
+        margin-left: 0;
+        padding: 0 var(--st-space-12);
+        font-size: 13px;
+      }
+    }
+
+    @media (max-width: 480px) {
+      :host([embedded]) .lockup {
+        --pn-icon-size: 28px;
+      }
+
+      /* The tagline stays on phones: it is the way home. One size smaller. */
+      :host([embedded]) .tagline {
+        font-size: 9px;
+      }
+
+      /* Only swap labels when a short one is given; otherwise the full label stays. */
+      :host([embedded]) .action.has-short .action-full {
+        display: none;
+      }
+
+      :host([embedded]) .action.has-short .action-short {
+        display: inline;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .links a {
+        transition: none;
+      }
+    }
+  `;
+/** Distance from the top of the viewport that counts as "passed", matching the 64px header row. */
+ProductNav.SPY_OFFSET = 64;
+/** Extra pixels past the offset line, so a section an anchor jump lands just under it (sub-pixel) still counts. */
+ProductNav.SPY_TOLERANCE = 8;
+__decorateClass([
+  property({ type: String, attribute: "brand-prefix" })
+], ProductNav.prototype, "brandPrefix", 2);
+__decorateClass([
+  property({ type: String, attribute: "brand-name" })
+], ProductNav.prototype, "brandName", 2);
+__decorateClass([
+  property({ type: String, attribute: "brand-tagline" })
+], ProductNav.prototype, "brandTagline", 2);
+__decorateClass([
+  property({ type: String, attribute: "brand-href" })
+], ProductNav.prototype, "brandHref", 2);
+__decorateClass([
+  property({ type: String })
+], ProductNav.prototype, "icon", 2);
+__decorateClass([
+  property({ type: String, attribute: "icon-dark" })
+], ProductNav.prototype, "iconDark", 2);
+__decorateClass([
+  property({ attribute: false })
+], ProductNav.prototype, "links", 2);
+__decorateClass([
+  property({ type: String, attribute: "action-label" })
+], ProductNav.prototype, "actionLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "action-short-label" })
+], ProductNav.prototype, "actionShortLabel", 2);
+__decorateClass([
+  property({ type: String })
+], ProductNav.prototype, "href", 2);
+__decorateClass([
+  property({ type: String, attribute: "site-menu-label" })
+], ProductNav.prototype, "siteMenuLabel", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "site-menu-open" })
+], ProductNav.prototype, "siteMenuOpen", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ProductNav.prototype, "sticky", 2);
+__decorateClass([
+  property({ type: String })
+], ProductNav.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ProductNav.prototype, "embedded", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "scroll-spy" })
+], ProductNav.prototype, "scrollSpy", 2);
+__decorateClass([
+  state()
+], ProductNav.prototype, "activeId", 2);
+ProductNav = __decorateClass([
+  customElement("st-product-nav")
+], ProductNav);
+
+export {
+  ProductNav
+};
+//# sourceMappingURL=chunk-OEOE6IFY.js.map