@sankhyatronics/sankhya-cms 0.1.0 → 0.1.2

package/dist/{chunk-U7YKCCJG.js → chunk-K4ZICRZL.js}

@@ -25,29 +25,41 @@ var Hero = class extends LitElement {
     this.padding = "none";
     this.inverted = false;
     this.focalPoint = "center";
-    this.onClick = (event) => {
-      const action = new CustomEvent("action", {
-        detail: { href: this.href },
-        bubbles: true,
-        composed: true,
-        cancelable: true
-      });
-      this.dispatchEvent(action);
-      if (action.defaultPrevented) event.preventDefault();
-    };
+    this.eyebrow = "";
+    this.secondaryActionLabel = "";
+    this.secondaryHref = "";
+    this.size = "auto";
+    this.contentPosition = "center";
+    this.overlay = "even";
+    this.onClick = (event) => this.emitAction(event, this.href, "primary");
+    this.onSecondaryClick = (event) => this.emitAction(event, this.secondaryHref, "secondary");
   }
   willUpdate() {
     this.style.backgroundImage = this.imageSrc ? `url(${JSON.stringify(this.imageSrc)})` : "";
     this.style.setProperty("--st-hero-position", Hero.positions[this.focalPoint] ?? Hero.positions.center);
   }
+  emitAction(event, href, kind) {
+    const action = new CustomEvent("action", {
+      detail: { href, kind },
+      bubbles: true,
+      composed: true,
+      cancelable: true
+    });
+    this.dispatchEvent(action);
+    if (action.defaultPrevented) event.preventDefault();
+  }
   render() {
     return html`
       <div class="overlay" part="overlay"></div>
       <div class="content" part="content">
+        ${this.eyebrow ? html`<p class="eyebrow" part="eyebrow">${this.eyebrow}</p>` : nothing}
         <h1 class="title" part="title">${this.title}</h1>
         ${this.subtitle ? html`<p class="subtitle" part="subtitle">${this.subtitle}</p>` : nothing}
-        ${this.actionLabel ? html`<div class="actions" part="actions">
-              <a class="cta" part="action" href=${this.href || nothing} @click=${this.onClick}>${this.actionLabel}</a>
+        ${this.actionLabel || this.secondaryActionLabel ? html`<div class="actions" part="actions">
+              ${this.actionLabel ? html`<a class="cta" part="action" href=${this.href || nothing} @click=${this.onClick}>${this.actionLabel}</a>` : nothing}
+              ${this.secondaryActionLabel ? html`<a class="cta secondary" part="secondary-action" href=${this.secondaryHref || nothing} @click=${this.onSecondaryClick}
+                    >${this.secondaryActionLabel}</a
+                  >` : nothing}
             </div>` : nothing}
         <slot></slot>
       </div>
@@ -172,15 +184,105 @@ Hero.styles = css`
       transform: scale(0.98);
     }
 
+    .eyebrow {
+      margin: 0;
+      font-size: var(--st-text-sm);
+      font-weight: var(--st-font-weight-bold);
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: inherit;
+      opacity: 0.85;
+      animation: st-hero-fade 0.8s 0.2s ease-out backwards;
+    }
+
+    .actions {
+      flex-wrap: wrap;
+      gap: var(--st-space-12);
+    }
+
+    .cta.secondary {
+      background: transparent;
+      color: inherit;
+      box-shadow: inset 0 0 0 1.5px currentColor;
+    }
+
+    .cta.secondary:hover {
+      background: color-mix(in oklch, currentColor 12%, transparent);
+    }
+
+    /* size="large" / "full": a tall editorial hero. */
+    :host([size='large']) {
+      min-height: var(--st-hero-min-height, 640px);
+    }
+
+    :host([size='full']) {
+      min-height: 100svh;
+    }
+
+    :host([size='large']) .title,
+    :host([size='full']) .title {
+      font-size: clamp(2.5rem, 6vw, 5rem);
+      letter-spacing: -0.02em;
+      line-height: 1.05;
+    }
+
+    /* content-position="bottom": copy sits in the lower part of the hero, on the container grid. */
+    :host([content-position='bottom']) {
+      align-items: flex-end;
+    }
+
+    :host([content-position='bottom']) .content {
+      width: 100%;
+      max-width: var(--st-cms-container-max);
+      box-sizing: border-box;
+      padding: var(--st-space-48) var(--st-space-24);
+    }
+
+    :host([content-position='bottom']) .title,
+    :host([content-position='bottom']) .subtitle {
+      max-width: 18ch;
+    }
+
+    :host([content-position='bottom']) .subtitle {
+      max-width: 48ch;
+    }
+
+    :host([content-position='bottom']:not([text-alignment='center']):not([text-alignment='right'])) .actions {
+      justify-content: flex-start;
+    }
+
+    :host([content-position='bottom'][text-alignment='center']) .title,
+    :host([content-position='bottom'][text-alignment='center']) .subtitle {
+      margin-inline: auto;
+    }
+
+    /* overlay="gradient": darkest behind the copy, clearing towards the far side of the image. */
+    :host([overlay='gradient']) .overlay {
+      background:
+        linear-gradient(to top, color-mix(in oklch, var(--st-color-text-strong) 85%, transparent), transparent 70%),
+        linear-gradient(to right, color-mix(in oklch, var(--st-color-text-strong) 70%, transparent), transparent 75%);
+    }
+
+    :host([overlay='gradient'][text-alignment='right']) .overlay {
+      background:
+        linear-gradient(to top, color-mix(in oklch, var(--st-color-text-strong) 85%, transparent), transparent 70%),
+        linear-gradient(to left, color-mix(in oklch, var(--st-color-text-strong) 70%, transparent), transparent 75%);
+    }
+
+    :host([overlay='none']) .overlay {
+      display: none;
+    }
+
     @media (min-width: 768px) {
       .content { padding: var(--st-space-32); }
     }
     @media (min-width: 1024px) {
       .content { padding: var(--st-space-48); }
+      :host([content-position='bottom']) .content { padding: var(--st-space-48) var(--st-space-32) 6rem; }
     }
 
     @media (prefers-reduced-motion: reduce) {
-      :host, .title, .subtitle, .cta { animation: none; }
+      :host, .eyebrow, .title, .subtitle, .cta { animation: none; }
       .cta { transition: none; }
     }
   `;
@@ -218,6 +320,24 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "focal-point" })
 ], Hero.prototype, "focalPoint", 2);
+__decorateClass([
+  property({ type: String })
+], Hero.prototype, "eyebrow", 2);
+__decorateClass([
+  property({ type: String, attribute: "secondary-action-label" })
+], Hero.prototype, "secondaryActionLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "secondary-href" })
+], Hero.prototype, "secondaryHref", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], Hero.prototype, "size", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "content-position" })
+], Hero.prototype, "contentPosition", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], Hero.prototype, "overlay", 2);
 Hero = __decorateClass([
   customElement("st-hero")
 ], Hero);
@@ -225,4 +345,4 @@ Hero = __decorateClass([
 export {
   Hero
 };
-//# sourceMappingURL=chunk-U7YKCCJG.js.map
+//# sourceMappingURL=chunk-K4ZICRZL.js.map

package/dist/chunk-K4ZICRZL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hero/Hero.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\nimport { controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\r\nimport { ctaLinkStyles, paddingScaleStyles } from '../shared/section-styles';\r\nimport type { HeroActionEventDetail } from './HeroEvents';\r\n\r\n/**\r\n * Full-width hero banner: background image with a darkening overlay, optional eyebrow, title,\r\n * optional subtitle and up to two call-to-action links. Port of `SankhyaUI`'s React `Hero`; the\r\n * framer-motion entrance is redone as CSS keyframes (skipped under `prefers-reduced-motion`).\r\n *\r\n * `size`, `content-position` and `overlay=\"gradient\"` give the large editorial layout (copy on the\r\n * lower left over a gradient that darkens towards it) used by enterprise marketing heroes; the\r\n * defaults keep the original centered banner. Put several heroes in an `st-carousel` with\r\n * `indicator-style=\"tabs\"` for a tabbed hero carousel.\r\n *\r\n * @fires action - Cancelable, before navigating. Detail `{ href, kind }`, `kind` being `primary` or `secondary`.\r\n * @cssprop --st-hero-text-color - Text colour over the image.\r\n * @cssprop --st-hero-min-height - Minimum height when `size` is `large` (default `640px`).\r\n * @csspart eyebrow - The small label above the title.\r\n * @csspart secondary-action - The outlined second button.\r\n */\r\n@customElement('st-hero')\r\nexport class Hero extends LitElement {\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n    ${paddingScaleStyles}\r\n\r\n    @keyframes st-hero-zoom {\r\n      from { opacity: 0; transform: scale(1.1); }\r\n      to { opacity: 1; transform: scale(1); }\r\n    }\r\n    @keyframes st-hero-rise {\r\n      from { opacity: 0; transform: translateY(30px); }\r\n      to { opacity: 1; transform: none; }\r\n    }\r\n    @keyframes st-hero-fade {\r\n      from { opacity: 0; }\r\n      to { opacity: 1; }\r\n    }\r\n\r\n    :host {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      overflow: hidden;\r\n      width: 100%;\r\n      box-sizing: border-box;\r\n      background-color: var(--st-color-text-strong);\r\n      background-repeat: no-repeat;\r\n      background-size: cover;\r\n      background-position: var(--st-hero-position, center center);\r\n      color: var(--st-color-on-solid);\r\n      ${rootFontFamilyStyles}\r\n      animation: st-hero-zoom 1.5s ease-out;\r\n    }\r\n\r\n    :host([inverted]) {\r\n      background-color: var(--st-color-surface);\r\n      color: var(--st-color-text-strong);\r\n    }\r\n\r\n    .overlay {\r\n      position: absolute;\r\n      inset: 0;\r\n      z-index: 1;\r\n      background: linear-gradient(\r\n        to bottom,\r\n        color-mix(in oklch, var(--st-color-text-strong) 40%, transparent),\r\n        color-mix(in oklch, var(--st-color-text-strong) 20%, transparent),\r\n        color-mix(in oklch, var(--st-color-text-strong) 40%, transparent)\r\n      );\r\n    }\r\n\r\n    :host([inverted]) .overlay {\r\n      display: none;\r\n    }\r\n\r\n    .content {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: var(--st-space-20);\r\n      position: relative;\r\n      z-index: 2;\r\n      width: 80%;\r\n      margin: 0 auto;\r\n      text-align: center;\r\n      align-items: center;\r\n      /* Set here, not only on :host: text sits on the image/overlay, so a colour class the page puts\r\n         on the host (e.g. a theme text colour) must not turn it dark. */\r\n      color: var(--st-hero-text-color, var(--st-color-on-solid));\r\n    }\r\n\r\n    :host([inverted]) .content {\r\n      color: var(--st-hero-text-color, var(--st-color-text-strong));\r\n    }\r\n\r\n    :host([text-alignment='left']) .content { text-align: left; align-items: flex-start; }\r\n    :host([text-alignment='right']) .content { text-align: right; align-items: flex-end; }\r\n    :host([text-alignment='justify']) .content { text-align: justify; align-items: stretch; }\r\n\r\n    .title {\r\n      font-size: var(--st-cms-text-display);\r\n      font-weight: var(--st-font-weight-bold);\r\n      line-height: 1.1;\r\n      color: inherit;\r\n      margin: 0;\r\n      animation: st-hero-rise 0.8s 0.3s ease-out backwards;\r\n    }\r\n\r\n    .subtitle {\r\n      font-size: var(--st-cms-text-xl);\r\n      line-height: 1.5;\r\n      color: inherit;\r\n      margin: 0;\r\n      animation: st-hero-fade 0.8s 0.5s ease-out backwards;\r\n    }\r\n\r\n    .actions {\r\n      display: flex;\r\n      justify-content: center;\r\n      width: 100%;\r\n    }\r\n\r\n    .cta {\r\n      ${ctaLinkStyles}\r\n      background: var(--st-button-primary-bg);\r\n      color: var(--st-button-primary-color);\r\n      font-weight: var(--st-button-font-weight);\r\n      font-size: var(--st-text-md);\r\n      animation: st-hero-rise 0.6s 0.7s ease-out backwards;\r\n    }\r\n\r\n    .cta:hover {\r\n      transform: scale(1.05);\r\n    }\r\n\r\n    .cta:active {\r\n      transform: scale(0.98);\r\n    }\r\n\r\n    .eyebrow {\r\n      margin: 0;\r\n      font-size: var(--st-text-sm);\r\n      font-weight: var(--st-font-weight-bold);\r\n      letter-spacing: 0.12em;\r\n      text-transform: uppercase;\r\n      color: inherit;\r\n      opacity: 0.85;\r\n      animation: st-hero-fade 0.8s 0.2s ease-out backwards;\r\n    }\r\n\r\n    .actions {\r\n      flex-wrap: wrap;\r\n      gap: var(--st-space-12);\r\n    }\r\n\r\n    .cta.secondary {\r\n      background: transparent;\r\n      color: inherit;\r\n      box-shadow: inset 0 0 0 1.5px currentColor;\r\n    }\r\n\r\n    .cta.secondary:hover {\r\n      background: color-mix(in oklch, currentColor 12%, transparent);\r\n    }\r\n\r\n    /* size=\"large\" / \"full\": a tall editorial hero. */\r\n    :host([size='large']) {\r\n      min-height: var(--st-hero-min-height, 640px);\r\n    }\r\n\r\n    :host([size='full']) {\r\n      min-height: 100svh;\r\n    }\r\n\r\n    :host([size='large']) .title,\r\n    :host([size='full']) .title {\r\n      font-size: clamp(2.5rem, 6vw, 5rem);\r\n      letter-spacing: -0.02em;\r\n      line-height: 1.05;\r\n    }\r\n\r\n    /* content-position=\"bottom\": copy sits in the lower part of the hero, on the container grid. */\r\n    :host([content-position='bottom']) {\r\n      align-items: flex-end;\r\n    }\r\n\r\n    :host([content-position='bottom']) .content {\r\n      width: 100%;\r\n      max-width: var(--st-cms-container-max);\r\n      box-sizing: border-box;\r\n      padding: var(--st-space-48) var(--st-space-24);\r\n    }\r\n\r\n    :host([content-position='bottom']) .title,\r\n    :host([content-position='bottom']) .subtitle {\r\n      max-width: 18ch;\r\n    }\r\n\r\n    :host([content-position='bottom']) .subtitle {\r\n      max-width: 48ch;\r\n    }\r\n\r\n    :host([content-position='bottom']:not([text-alignment='center']):not([text-alignment='right'])) .actions {\r\n      justify-content: flex-start;\r\n    }\r\n\r\n    :host([content-position='bottom'][text-alignment='center']) .title,\r\n    :host([content-position='bottom'][text-alignment='center']) .subtitle {\r\n      margin-inline: auto;\r\n    }\r\n\r\n    /* overlay=\"gradient\": darkest behind the copy, clearing towards the far side of the image. */\r\n    :host([overlay='gradient']) .overlay {\r\n      background:\r\n        linear-gradient(to top, color-mix(in oklch, var(--st-color-text-strong) 85%, transparent), transparent 70%),\r\n        linear-gradient(to right, color-mix(in oklch, var(--st-color-text-strong) 70%, transparent), transparent 75%);\r\n    }\r\n\r\n    :host([overlay='gradient'][text-alignment='right']) .overlay {\r\n      background:\r\n        linear-gradient(to top, color-mix(in oklch, var(--st-color-text-strong) 85%, transparent), transparent 70%),\r\n        linear-gradient(to left, color-mix(in oklch, var(--st-color-text-strong) 70%, transparent), transparent 75%);\r\n    }\r\n\r\n    :host([overlay='none']) .overlay {\r\n      display: none;\r\n    }\r\n\r\n    @media (min-width: 768px) {\r\n      .content { padding: var(--st-space-32); }\r\n    }\r\n    @media (min-width: 1024px) {\r\n      .content { padding: var(--st-space-48); }\r\n      :host([content-position='bottom']) .content { padding: var(--st-space-48) var(--st-space-32) 6rem; }\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      :host, .eyebrow, .title, .subtitle, .cta { animation: none; }\r\n      .cta { transition: none; }\r\n    }\r\n  `;\r\n\r\n  @property({ type: String })\r\n  title = '';\r\n\r\n  @property({ type: String })\r\n  subtitle = '';\r\n\r\n  @property({ type: String, attribute: 'image-src' })\r\n  imageSrc = '';\r\n\r\n  @property({ type: String, attribute: 'action-label' })\r\n  actionLabel = '';\r\n\r\n  @property({ type: String })\r\n  href = '';\r\n\r\n  @property({ type: String, reflect: true, attribute: 'text-alignment' })\r\n  textAlignment: 'left' | 'center' | 'right' | 'justify' = 'left';\r\n\r\n  @property({ type: String, reflect: true })\r\n  padding: 'none' | 'small' | 'medium' | 'large' = 'none';\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  inverted = false;\r\n\r\n  @property({ type: String, attribute: 'focal-point' })\r\n  focalPoint: 'top' | 'left' | 'right' | 'bottom' | 'center' = 'center';\r\n\r\n  /** Small uppercase label above the title (e.g. an event or product name). */\r\n  @property({ type: String })\r\n  eyebrow = '';\r\n\r\n  /** Label of an outlined second button next to the primary one. */\r\n  @property({ type: String, attribute: 'secondary-action-label' })\r\n  secondaryActionLabel = '';\r\n\r\n  @property({ type: String, attribute: 'secondary-href' })\r\n  secondaryHref = '';\r\n\r\n  /** `auto` sizes to the content; `large` is a tall editorial hero (`--st-hero-min-height`); `full` fills the viewport. */\r\n  @property({ type: String, reflect: true })\r\n  size: 'auto' | 'large' | 'full' = 'auto';\r\n\r\n  /** `center` keeps the copy in the middle; `bottom` puts it in the lower part of the hero, on the page container. */\r\n  @property({ type: String, reflect: true, attribute: 'content-position' })\r\n  contentPosition: 'center' | 'bottom' = 'center';\r\n\r\n  /** `even` darkens the whole image; `gradient` darkens behind the copy only; `none` shows the image as is. */\r\n  @property({ type: String, reflect: true })\r\n  overlay: 'even' | 'gradient' | 'none' = 'even';\r\n\r\n  private static positions = {\r\n    top: 'center top',\r\n    left: 'left center',\r\n    right: 'right center',\r\n    bottom: 'center bottom',\r\n    center: 'center center'\r\n  } as const;\r\n\r\n  protected willUpdate(): void {\r\n    this.style.backgroundImage = this.imageSrc ? `url(${JSON.stringify(this.imageSrc)})` : '';\r\n    this.style.setProperty('--st-hero-position', Hero.positions[this.focalPoint] ?? Hero.positions.center);\r\n  }\r\n\r\n  private emitAction(event: MouseEvent, href: string, kind: 'primary' | 'secondary'): void {\r\n    const action = new CustomEvent<HeroActionEventDetail>('action', {\r\n      detail: { href, kind },\r\n      bubbles: true,\r\n      composed: true,\r\n      cancelable: true\r\n    });\r\n    this.dispatchEvent(action);\r\n    if (action.defaultPrevented) event.preventDefault();\r\n  }\r\n\r\n  private onClick = (event: MouseEvent): void => this.emitAction(event, this.href, 'primary');\r\n\r\n  private onSecondaryClick = (event: MouseEvent): void => this.emitAction(event, this.secondaryHref, 'secondary');\r\n\r\n  render() {\r\n    return html`\r\n      <div class=\"overlay\" part=\"overlay\"></div>\r\n      <div class=\"content\" part=\"content\">\r\n        ${this.eyebrow ? html`<p class=\"eyebrow\" part=\"eyebrow\">${this.eyebrow}</p>` : nothing}\r\n        <h1 class=\"title\" part=\"title\">${this.title}</h1>\r\n        ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\r\n        ${this.actionLabel || this.secondaryActionLabel\r\n          ? html`<div class=\"actions\" part=\"actions\">\r\n              ${this.actionLabel\r\n                ? html`<a class=\"cta\" part=\"action\" href=${this.href || nothing} @click=${this.onClick}>${this.actionLabel}</a>`\r\n                : nothing}\r\n              ${this.secondaryActionLabel\r\n                ? html`<a class=\"cta secondary\" part=\"secondary-action\" href=${this.secondaryHref || nothing} @click=${this.onSecondaryClick}\r\n                    >${this.secondaryActionLabel}</a\r\n                  >`\r\n                : nothing}\r\n            </div>`\r\n          : nothing}\r\n        <slot></slot>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/chunk-N63TVWK3.js

@@ -0,0 +1,203 @@
+import {
+  sectionSubtitleStyles,
+  sectionTitleStyles
+} from "./chunk-3VE6VFJ4.js";
+import {
+  controlBaseStyles,
+  rootFontFamilyStyles
+} from "./chunk-RHAOQ6K4.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/section/Section.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var Section = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.eyebrow = "";
+    this.title = "";
+    this.subtitle = "";
+    this.background = "default";
+    this.spacingAbove = "m";
+    this.spacingBelow = "m";
+    this.width = "contained";
+    this.textAlignment = "left";
+  }
+  render() {
+    const heading = this.eyebrow || this.title || this.subtitle;
+    return html`
+      <div class="inner" part="inner">
+        ${heading ? html`<div class="header" part="header">
+              ${this.eyebrow ? html`<p class="eyebrow" part="eyebrow">${this.eyebrow}</p>` : nothing}
+              ${this.title ? html`<h2 class="title" part="title">${this.title}</h2>` : nothing}
+              ${this.subtitle ? html`<p class="subtitle" part="subtitle">${this.subtitle}</p>` : nothing}
+            </div>` : nothing}
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+Section.styles = css`
+    ${controlBaseStyles}
+
+    :host {
+      --st-section-space-none: 0;
+      --st-section-space-s: var(--st-space-24);
+      --st-section-space-m: var(--st-space-48);
+      --st-section-space-l: 4.5rem;
+      --st-section-space-xl: 6rem;
+      --st-section-space-xxl: 8rem;
+
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      padding: var(--st-section-space-m) var(--st-space-24);
+      background: var(--st-section-bg, var(--st-color-surface));
+      color: var(--st-color-text-strong);
+      ${rootFontFamilyStyles}
+    }
+
+    :host([background='subtle']) {
+      background: var(--st-section-bg, var(--st-color-subtle));
+    }
+
+    :host([background='dark']) {
+      background: var(--st-section-bg, var(--st-color-text-strong));
+      color: var(--st-color-on-solid);
+    }
+
+    :host([background='accent']) {
+      background: var(--st-section-bg, var(--st-color-accent));
+      color: var(--st-color-on-solid);
+    }
+
+    :host([background='transparent']) {
+      background: var(--st-section-bg, transparent);
+    }
+
+    :host([spacing-above='none']) { padding-top: var(--st-section-space-none); }
+    :host([spacing-above='s']) { padding-top: var(--st-section-space-s); }
+    :host([spacing-above='l']) { padding-top: var(--st-section-space-l); }
+    :host([spacing-above='xl']) { padding-top: var(--st-section-space-xl); }
+    :host([spacing-above='xxl']) { padding-top: var(--st-section-space-xxl); }
+
+    :host([spacing-below='none']) { padding-bottom: var(--st-section-space-none); }
+    :host([spacing-below='s']) { padding-bottom: var(--st-section-space-s); }
+    :host([spacing-below='l']) { padding-bottom: var(--st-section-space-l); }
+    :host([spacing-below='xl']) { padding-bottom: var(--st-section-space-xl); }
+    :host([spacing-below='xxl']) { padding-bottom: var(--st-section-space-xxl); }
+
+    :host([width='full']) {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .inner {
+      max-width: var(--st-cms-container-max);
+      margin: 0 auto;
+    }
+
+    :host([width='narrow']) .inner {
+      max-width: 800px;
+    }
+
+    :host([width='full']) .inner {
+      max-width: none;
+    }
+
+    .header {
+      margin-bottom: var(--st-space-48);
+    }
+
+    :host([text-alignment='center']) .header {
+      text-align: center;
+    }
+
+    :host([text-alignment='center']) .subtitle {
+      margin-inline: auto;
+    }
+
+    :host([width='full']) .header {
+      max-width: var(--st-cms-container-max);
+      margin-inline: auto;
+      padding-inline: var(--st-space-24);
+      box-sizing: border-box;
+    }
+
+    .eyebrow {
+      margin: 0 0 var(--st-space-12);
+      font-size: var(--st-text-sm);
+      font-weight: var(--st-font-weight-bold);
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--st-color-text-muted);
+    }
+
+    .title {
+      ${sectionTitleStyles}
+      color: inherit;
+      letter-spacing: -0.02em;
+      max-width: 24ch;
+    }
+
+    :host([text-alignment='center']) .title {
+      margin-inline: auto;
+    }
+
+    .subtitle {
+      ${sectionSubtitleStyles}
+      max-width: 60ch;
+      margin-bottom: 0;
+    }
+
+    :host([background='dark']) .eyebrow,
+    :host([background='dark']) .subtitle,
+    :host([background='accent']) .eyebrow,
+    :host([background='accent']) .subtitle {
+      color: color-mix(in oklch, var(--st-color-on-solid) 80%, transparent);
+    }
+
+    @media (max-width: 768px) {
+      :host {
+        --st-section-space-l: 3.5rem;
+        --st-section-space-xl: 4.5rem;
+        --st-section-space-xxl: 5.5rem;
+        padding-left: var(--st-space-20);
+        padding-right: var(--st-space-20);
+      }
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], Section.prototype, "eyebrow", 2);
+__decorateClass([
+  property({ type: String })
+], Section.prototype, "title", 2);
+__decorateClass([
+  property({ type: String })
+], Section.prototype, "subtitle", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], Section.prototype, "background", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "spacing-above" })
+], Section.prototype, "spacingAbove", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "spacing-below" })
+], Section.prototype, "spacingBelow", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], Section.prototype, "width", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "text-alignment" })
+], Section.prototype, "textAlignment", 2);
+Section = __decorateClass([
+  customElement("st-section")
+], Section);
+
+export {
+  Section
+};
+//# sourceMappingURL=chunk-N63TVWK3.js.map

package/dist/chunk-N63TVWK3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/section/Section.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\nimport { sectionSubtitleStyles, sectionTitleStyles } from '../shared/section-styles';\n\n/**\n * A page band that holds other content: sets the background, the spacing above and below, and\n * the content width, with an optional eyebrow/title/subtitle heading over its slotted children.\n * Use it to give a run of components one dark or tinted backdrop and a consistent vertical rhythm,\n * the way enterprise marketing pages stack full-width sections.\n *\n * @slot - The section's content.\n * @cssprop --st-section-bg - Overrides the background colour picked by `background`.\n * @csspart inner - The width-limited content box.\n * @csspart header - The heading block.\n */\n@customElement('st-section')\nexport class Section extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      --st-section-space-none: 0;\n      --st-section-space-s: var(--st-space-24);\n      --st-section-space-m: var(--st-space-48);\n      --st-section-space-l: 4.5rem;\n      --st-section-space-xl: 6rem;\n      --st-section-space-xxl: 8rem;\n\n      display: block;\n      box-sizing: border-box;\n      width: 100%;\n      padding: var(--st-section-space-m) var(--st-space-24);\n      background: var(--st-section-bg, var(--st-color-surface));\n      color: var(--st-color-text-strong);\n      ${rootFontFamilyStyles}\n    }\n\n    :host([background='subtle']) {\n      background: var(--st-section-bg, var(--st-color-subtle));\n    }\n\n    :host([background='dark']) {\n      background: var(--st-section-bg, var(--st-color-text-strong));\n      color: var(--st-color-on-solid);\n    }\n\n    :host([background='accent']) {\n      background: var(--st-section-bg, var(--st-color-accent));\n      color: var(--st-color-on-solid);\n    }\n\n    :host([background='transparent']) {\n      background: var(--st-section-bg, transparent);\n    }\n\n    :host([spacing-above='none']) { padding-top: var(--st-section-space-none); }\n    :host([spacing-above='s']) { padding-top: var(--st-section-space-s); }\n    :host([spacing-above='l']) { padding-top: var(--st-section-space-l); }\n    :host([spacing-above='xl']) { padding-top: var(--st-section-space-xl); }\n    :host([spacing-above='xxl']) { padding-top: var(--st-section-space-xxl); }\n\n    :host([spacing-below='none']) { padding-bottom: var(--st-section-space-none); }\n    :host([spacing-below='s']) { padding-bottom: var(--st-section-space-s); }\n    :host([spacing-below='l']) { padding-bottom: var(--st-section-space-l); }\n    :host([spacing-below='xl']) { padding-bottom: var(--st-section-space-xl); }\n    :host([spacing-below='xxl']) { padding-bottom: var(--st-section-space-xxl); }\n\n    :host([width='full']) {\n      padding-left: 0;\n      padding-right: 0;\n    }\n\n    .inner {\n      max-width: var(--st-cms-container-max);\n      margin: 0 auto;\n    }\n\n    :host([width='narrow']) .inner {\n      max-width: 800px;\n    }\n\n    :host([width='full']) .inner {\n      max-width: none;\n    }\n\n    .header {\n      margin-bottom: var(--st-space-48);\n    }\n\n    :host([text-alignment='center']) .header {\n      text-align: center;\n    }\n\n    :host([text-alignment='center']) .subtitle {\n      margin-inline: auto;\n    }\n\n    :host([width='full']) .header {\n      max-width: var(--st-cms-container-max);\n      margin-inline: auto;\n      padding-inline: var(--st-space-24);\n      box-sizing: border-box;\n    }\n\n    .eyebrow {\n      margin: 0 0 var(--st-space-12);\n      font-size: var(--st-text-sm);\n      font-weight: var(--st-font-weight-bold);\n      letter-spacing: 0.12em;\n      text-transform: uppercase;\n      color: var(--st-color-text-muted);\n    }\n\n    .title {\n      ${sectionTitleStyles}\n      color: inherit;\n      letter-spacing: -0.02em;\n      max-width: 24ch;\n    }\n\n    :host([text-alignment='center']) .title {\n      margin-inline: auto;\n    }\n\n    .subtitle {\n      ${sectionSubtitleStyles}\n      max-width: 60ch;\n      margin-bottom: 0;\n    }\n\n    :host([background='dark']) .eyebrow,\n    :host([background='dark']) .subtitle,\n    :host([background='accent']) .eyebrow,\n    :host([background='accent']) .subtitle {\n      color: color-mix(in oklch, var(--st-color-on-solid) 80%, transparent);\n    }\n\n    @media (max-width: 768px) {\n      :host {\n        --st-section-space-l: 3.5rem;\n        --st-section-space-xl: 4.5rem;\n        --st-section-space-xxl: 5.5rem;\n        padding-left: var(--st-space-20);\n        padding-right: var(--st-space-20);\n      }\n    }\n  `;\n\n  @property({ type: String })\n  eyebrow = '';\n\n  @property({ type: String })\n  title = '';\n\n  @property({ type: String })\n  subtitle = '';\n\n  /** `default` (page surface), `subtle`, `dark`, `accent` or `transparent`. */\n  @property({ type: String, reflect: true })\n  background: 'default' | 'subtle' | 'dark' | 'accent' | 'transparent' = 'default';\n\n  /** Space above the content: `none`, `s`, `m` (default), `l`, `xl` or `xxl`. */\n  @property({ type: String, reflect: true, attribute: 'spacing-above' })\n  spacingAbove: 'none' | 's' | 'm' | 'l' | 'xl' | 'xxl' = 'm';\n\n  /** Space below the content: `none`, `s`, `m` (default), `l`, `xl` or `xxl`. */\n  @property({ type: String, reflect: true, attribute: 'spacing-below' })\n  spacingBelow: 'none' | 's' | 'm' | 'l' | 'xl' | 'xxl' = 'm';\n\n  /** `contained` (default, the page container width), `narrow` (reading width) or `full` (edge to edge). */\n  @property({ type: String, reflect: true })\n  width: 'contained' | 'narrow' | 'full' = 'contained';\n\n  /** Alignment of the heading. */\n  @property({ type: String, reflect: true, attribute: 'text-alignment' })\n  textAlignment: 'left' | 'center' = 'left';\n\n  render() {\n    const heading = this.eyebrow || this.title || this.subtitle;\n    return html`\n      <div class=\"inner\" part=\"inner\">\n        ${heading\n          ? html`<div class=\"header\" part=\"header\">\n              ${this.eyebrow ? html`<p class=\"eyebrow\" part=\"eyebrow\">${this.eyebrow}</p>` : nothing}\n              ${this.title ? html`<h2 class=\"title\" part=\"title\">${this.title}</h2>` : nothing}\n              ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\n            </div>`\n          : nothing}\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AAiBjC,IAAM,UAAN,cAAsB,WAAW;AAAA,EAAjC;AAAA;AAqIL,mBAAU;AAGV,iBAAQ;AAGR,oBAAW;AAIX,sBAAuE;AAIvE,wBAAwD;AAIxD,wBAAwD;AAIxD,iBAAyC;AAIzC,yBAAmC;AAAA;AAAA,EAEnC,SAAS;AACP,UAAM,UAAU,KAAK,WAAW,KAAK,SAAS,KAAK;AACnD,WAAO;AAAA;AAAA,UAED,UACE;AAAA,gBACI,KAAK,UAAU,yCAAyC,KAAK,OAAO,SAAS,OAAO;AAAA,gBACpF,KAAK,QAAQ,sCAAsC,KAAK,KAAK,UAAU,OAAO;AAAA,gBAC9E,KAAK,WAAW,2CAA2C,KAAK,QAAQ,SAAS,OAAO;AAAA,sBAE5F,OAAO;AAAA;AAAA;AAAA;AAAA,EAIjB;AACF;AAhLa,QACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAgBf,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAgFpB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAWlB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwB3B;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApIf,QAqIX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAvIf,QAwIX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA1If,QA2IX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA9I9B,QA+IX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,gBAAgB,CAAC;AAAA,GAlJ1D,QAmJX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,gBAAgB,CAAC;AAAA,GAtJ1D,QAuJX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA1J9B,QA2JX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,iBAAiB,CAAC;AAAA,GA9J3D,QA+JX;AA/JW,UAAN;AAAA,EADN,cAAc,YAAY;AAAA,GACd;","names":[]}

package/dist/{chunk-23IHTBAB.js → chunk-PKTRYUGP.js}

@@ -28,6 +28,28 @@ var Header = class extends LitElement {
     this.logoClassName = "";
     this.inverted = false;
     this.sticky = false;
+    this.transparent = false;
+    this.hideOnScroll = false;
+    this.scrollThreshold = 8;
+    this.scrolled = false;
+    this.scrollHidden = false;
+    this.lastScrollY = 0;
+    this.scrollFrame = 0;
+    this.onScroll = () => {
+      if (this.scrollFrame) return;
+      this.scrollFrame = requestAnimationFrame(() => {
+        this.scrollFrame = 0;
+        const y = Math.max(0, window.scrollY);
+        this.scrolled = y > this.scrollThreshold;
+        if (this.hideOnScroll) {
+          const delta = y - this.lastScrollY;
+          if (Math.abs(delta) > 4) this.scrollHidden = delta > 0 && y > this.offsetHeight && !this.mobileOpen;
+        } else {
+          this.scrollHidden = false;
+        }
+        this.lastScrollY = y;
+      });
+    };
     this.languages = [];
     this.currentLanguageCode = "";
     this.languageMenuLabel = "Language";
@@ -122,6 +144,8 @@ var Header = class extends LitElement {
     super.connectedCallback();
     window.addEventListener("keydown", this.closeOnEscape);
     window.addEventListener("click", this.closeLanguageMenuOnOutsideClick);
+    window.addEventListener("scroll", this.onScroll, { passive: true });
+    this.onScroll();
     this.narrowQuery = window.matchMedia(`(max-width: ${BREAKPOINT_TABLET}px)`);
     this.narrowQuery.addEventListener("change", this.syncInlineDropdowns);
     this.lightDomObserver = new MutationObserver(this.syncInlineDropdowns);
@@ -133,6 +157,9 @@ var Header = class extends LitElement {
     this.resizeObserver?.disconnect();
     window.removeEventListener("keydown", this.closeOnEscape);
     window.removeEventListener("click", this.closeLanguageMenuOnOutsideClick);
+    window.removeEventListener("scroll", this.onScroll);
+    if (this.scrollFrame) cancelAnimationFrame(this.scrollFrame);
+    this.scrollFrame = 0;
     super.disconnectedCallback();
   }
   renderLanguageMenu() {
@@ -248,6 +275,68 @@ Header.styles = css`
       border-bottom-color: transparent;
     }
 
+    :host([sticky]),
+    :host([transparent]),
+    :host([hide-on-scroll]) {
+      transition:
+        background-color 0.3s ease,
+        color 0.3s ease,
+        box-shadow 0.3s ease,
+        border-color 0.3s ease,
+        transform 0.3s ease;
+    }
+
+    /* Once the page has scrolled, a sticky/fixed header lifts off the content. */
+    :host([scrolled][sticky]),
+    :host([scrolled][transparent]),
+    :host([scrolled][hide-on-scroll]) {
+      box-shadow: 0 4px 16px var(--st-shadow-color-md);
+      border-bottom-color: transparent !important;
+    }
+
+    /* transparent: fixed over the top of the page (e.g. a dark hero), see-through until scrolled. */
+    :host([transparent]) {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 100;
+    }
+
+    :host([transparent]:not([scrolled]):not([mobile-open])) {
+      background: transparent;
+      border-bottom-color: transparent !important;
+      color: var(--st-header-transparent-color, var(--st-color-on-solid));
+      /* Read by st-menu-item / st-dropdown triggers in the bar (their panels reset them). */
+      --st-nav-color: var(--st-header-transparent-color, var(--st-color-on-solid));
+      --st-nav-hover-bg: color-mix(in oklch, currentColor 14%, transparent);
+    }
+
+    :host([transparent]:not([scrolled]):not([mobile-open])) .utility-row {
+      border-left-color: color-mix(in oklch, currentColor 35%, transparent);
+    }
+
+    :host([transparent]:not([scrolled]):not([mobile-open])) .lang-trigger {
+      color: inherit;
+    }
+
+    :host([transparent]:not([scrolled]):not([mobile-open])) .lang-trigger:hover,
+    :host([transparent]:not([scrolled]):not([mobile-open])) .toggle:hover {
+      background: color-mix(in oklch, currentColor 14%, transparent);
+    }
+
+    /* hide-on-scroll: slides away while scrolling down, back as soon as the user scrolls up. */
+    :host([hide-on-scroll]:not([sticky]):not([transparent])) {
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    :host([scroll-hidden]:not([mobile-open])) {
+      transform: translateY(-100%);
+      box-shadow: none;
+    }
+
     .brand {
       display: flex;
       align-items: center;
@@ -346,7 +435,7 @@ Header.styles = css`
       border: 0;
       border-radius: var(--st-radius-sm);
       background: transparent;
-      color: var(--st-color-text-strong);
+      color: inherit;
       cursor: pointer;
     }
 
@@ -497,8 +586,10 @@ Header.styles = css`
     }
 
     @media (prefers-reduced-motion: reduce) {
+      :host,
       .mobile-panel {
         animation: none !important;
+        transition: none !important;
       }
     }
   `;
@@ -526,6 +617,21 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], Header.prototype, "sticky", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Header.prototype, "transparent", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "hide-on-scroll" })
+], Header.prototype, "hideOnScroll", 2);
+__decorateClass([
+  property({ type: Number, attribute: "scroll-threshold" })
+], Header.prototype, "scrollThreshold", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Header.prototype, "scrolled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "scroll-hidden" })
+], Header.prototype, "scrollHidden", 2);
 __decorateClass([
   property({ attribute: false })
 ], Header.prototype, "languages", 2);
@@ -554,4 +660,4 @@ Header = __decorateClass([
 export {
   Header
 };
-//# sourceMappingURL=chunk-23IHTBAB.js.map
+//# sourceMappingURL=chunk-PKTRYUGP.js.map