@sankhyatronics/sankhya-cms 0.1.18 → 0.3.0

package/dist/chunk-EW2RK5Y6.js

@@ -0,0 +1,383 @@
+import {
+  ctaAriaLabel,
+  ctaLabelStyles,
+  renderCtaLabel
+} from "./chunk-BEWX3E6P.js";
+import {
+  externalLinkAttrs,
+  externalLinkExtras,
+  isExternalHref
+} from "./chunk-T4BIN37Q.js";
+import {
+  ctaLinkStyles,
+  sectionSubtitleStyles,
+  sectionTitleStyles
+} from "./chunk-KZ7PMFWS.js";
+import {
+  buttonResetStyles,
+  controlBaseStyles,
+  ctaPillStyles,
+  rootFontFamilyStyles
+} from "./chunk-NXUS2CH7.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/promo-banner/PromoBanner.ts
+import { LitElement, css, html, nothing, svg } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "iconify-icon";
+var CTA_NOTE_ICON = svg`<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>`;
+var PromoBanner = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.title = "";
+    this.subtitle = "";
+    this.actionLabel = "";
+    this.actionLabelShort = "";
+    this.secondaryActionLabelShort = "";
+    this.href = "";
+    this.imageSrc = "";
+    this.secondaryActionLabel = "";
+    this.secondaryHref = "";
+    this.variant = "default";
+    this.inverted = false;
+    this.layout = "stack";
+    this.buttonStyle = "default";
+    this.ctaNote = "";
+    this.ctaNoteIcon = "";
+  }
+  willUpdate() {
+    this.style.backgroundImage = this.imageSrc ? `url(${JSON.stringify(this.imageSrc)})` : "";
+  }
+  /** Fires the cancelable `action` event; a cancelled click keeps the page where it is. */
+  emitAction(event, detail) {
+    const action = new CustomEvent("action", { detail, bubbles: true, composed: true, cancelable: true });
+    this.dispatchEvent(action);
+    if (action.defaultPrevented) event.preventDefault();
+  }
+  renderCta(label, href, secondary) {
+    const className = secondary ? "cta secondary" : "cta";
+    const part = secondary ? "secondary-action" : "action";
+    const detail = secondary ? { href, kind: "secondary" } : { href };
+    const onClick = (event) => this.emitAction(event, detail);
+    const { target, rel } = externalLinkAttrs(href);
+    const short = secondary ? this.secondaryActionLabelShort : this.actionLabelShort;
+    const text = renderCtaLabel(label, short);
+    const ariaLabel = ctaAriaLabel(label, short, isExternalHref(href) ? " (opens in new tab)" : "");
+    return href ? html`<a class=${className} part=${part} href=${href} target=${target} rel=${rel} aria-label=${ariaLabel} @click=${onClick}
+          >${text}${externalLinkExtras(href)}</a
+        >` : html`<button class=${className} part=${part} type="button" aria-label=${ariaLabel} @click=${onClick}>${text}</button>`;
+  }
+  renderCopy() {
+    return html`
+      <h2 class="title" part="title">${this.title}</h2>
+      ${this.subtitle ? html`<p class="subtitle" part="subtitle">${this.subtitle}</p>` : nothing}
+      <slot></slot>
+    `;
+  }
+  render() {
+    return html`
+      <div class="container" part="container">
+        ${this.layout === "inline" ? html`<div class="copy" part="copy">${this.renderCopy()}</div>` : this.renderCopy()}
+        ${this.actionLabel || this.secondaryActionLabel || this.ctaNote ? html`<div class="cta-group">
+              ${this.actionLabel || this.secondaryActionLabel ? html`<div class="actions" part="actions">
+                    ${this.actionLabel ? this.renderCta(this.actionLabel, this.href, false) : nothing}
+                    ${this.secondaryActionLabel ? this.renderCta(this.secondaryActionLabel, this.secondaryHref, true) : nothing}
+                  </div>` : nothing}
+              ${this.ctaNote ? html`<p class="cta-note" part="cta-note">${this.ctaNoteIcon ? html`<iconify-icon icon=${this.ctaNoteIcon} aria-hidden="true"></iconify-icon>` : CTA_NOTE_ICON}<span>${this.ctaNote}</span></p>` : nothing}
+            </div>` : nothing}
+      </div>
+    `;
+  }
+};
+PromoBanner.styles = css`
+    ${ctaLabelStyles}
+    ${controlBaseStyles}
+
+    :host {
+      display: block;
+      box-sizing: border-box;
+      width: calc(100% - 48px);
+      max-width: var(--st-cms-container-max);
+      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's
+         margin/padding; override with --st-promo-banner-margin/-padding instead. */
+      margin: var(--st-promo-banner-margin, var(--st-space-40) auto) !important;
+      padding: var(--st-promo-banner-padding, 100px var(--st-space-24)) !important;
+      border-radius: var(--st-space-24);
+      background-color: var(--st-color-text-strong);
+      background-size: cover;
+      background-position: center;
+      color: var(--st-color-on-solid);
+      text-align: center;
+      ${rootFontFamilyStyles}
+    }
+
+    :host([variant='accent']) {
+      background-color: var(--st-color-accent);
+      color: var(--st-cms-on-dark);
+    }
+
+    :host([variant='accent']) .cta:not(.secondary) {
+      background: var(--st-cms-on-dark);
+      border-color: transparent;
+      color: var(--st-cms-navy);
+    }
+
+    /* Outlined second button on the brand fill: white text and border, 5.8:1 on the default accent
+       (#3557E0), so both clear WCAG AA. */
+    :host([variant='accent']) .cta.secondary {
+      color: var(--st-cms-on-dark);
+      border-color: var(--st-cms-on-dark);
+    }
+
+    :host([variant='accent']) .cta.secondary:hover {
+      background: color-mix(in oklch, var(--st-cms-on-dark) 14%, transparent);
+    }
+
+    :host([inverted]) {
+      background-color: var(--st-color-subtle);
+      color: var(--st-color-text-strong);
+    }
+
+    .container {
+      max-width: 800px;
+      margin: 0 auto;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--st-space-32);
+    }
+
+    .title {
+      ${sectionTitleStyles}
+      color: inherit;
+      margin: 0;
+      letter-spacing: -0.02em;
+    }
+
+    .subtitle {
+      ${sectionSubtitleStyles}
+      color: inherit;
+      opacity: 0.8;
+      margin: 0;
+    }
+
+    .actions {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: var(--st-space-12);
+      margin-top: var(--st-space-16);
+    }
+
+    .cta {
+      ${buttonResetStyles}
+      ${ctaLinkStyles}
+      border: 1px solid currentColor;
+      color: inherit;
+    }
+
+    .cta:hover {
+      transform: scale(1.05);
+    }
+
+    .cta:focus-visible {
+      outline: var(--st-focus-ring);
+      outline-offset: 2px;
+    }
+
+    /* The buttons and the cta-note share one column: the note sits under the buttons, centred in the
+       stack layout and left-aligned with the first button in the inline layout. */
+    .cta-group {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .cta-note {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      margin: 8px 0 0;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 1.4;
+      color: var(--st-promo-banner-cta-note-color, color-mix(in oklch, currentColor 85%, transparent));
+    }
+
+    .cta-note svg,
+    .cta-note iconify-icon {
+      flex: none;
+      width: 14px;
+      height: 14px;
+      font-size: 14px;
+    }
+
+    /* layout="inline": copy left, buttons right, one row that wraps. */
+    :host([layout='inline']) {
+      padding: var(--st-promo-banner-padding, 56px 48px) !important;
+    }
+
+    /* The inline band is the content width (container max, 1200px), not 48px narrower; below that
+       width it keeps the 24px gutter on each side. */
+    @media (min-width: 1248px) {
+      :host([layout='inline']) {
+        width: 100%;
+      }
+    }
+
+    :host([layout='inline']) .container {
+      max-width: none;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      align-items: center;
+      gap: var(--st-space-24) var(--st-space-32);
+      text-align: left;
+    }
+
+    :host([layout='inline']) .copy {
+      display: flex;
+      flex: 1 1 420px;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--st-space-16);
+      min-width: 0;
+    }
+
+    :host([layout='inline']) .title,
+    :host([layout='inline']) .subtitle {
+      margin: 0;
+    }
+
+    :host([layout='inline']) .cta-group {
+      flex: 0 1 auto;
+      align-items: flex-start;
+    }
+
+    :host([layout='inline']) .actions {
+      flex: 0 1 auto;
+      justify-content: flex-end;
+      margin-top: 0;
+    }
+
+    /* The inline accent banner is the brand navy (the design's closing band). */
+    :host([layout='inline'][variant='accent']) {
+      background-color: var(--st-cms-brand-navy, var(--st-color-accent));
+    }
+
+    :host([layout='inline'][variant='accent']) .subtitle {
+      color: var(--st-cms-primary-100, var(--st-cms-on-dark));
+      opacity: 1;
+    }
+
+    /* Inline buttons (and buttonStyle="pill" on any layout) are 52px pills. */
+    :host([layout='inline']) .cta,
+    :host([button-style='pill']) .cta {
+      ${ctaPillStyles}
+    }
+
+    :host([layout='inline']) .cta {
+      font-size: 17px;
+    }
+
+    :host([layout='inline'][variant='accent']) .cta:not(.secondary) {
+      background: var(--st-cms-on-dark);
+      color: var(--st-cms-navy);
+    }
+
+    :host([layout='inline'][variant='accent']) .cta.secondary {
+      padding: 0 24px;
+      background: transparent;
+      color: var(--st-cms-on-dark);
+      border: 1px solid var(--st-cms-primary-400);
+    }
+
+    :host([button-style='pill'][variant='accent']) .cta:not(.secondary) {
+      background: var(--st-cms-on-dark);
+      color: var(--st-cms-navy);
+    }
+
+    :host([button-style='pill']) .cta.secondary {
+      padding: 0 24px;
+    }
+
+    @media (max-width: 768px) {
+      :host {
+        width: auto;
+        margin: var(--st-promo-banner-margin, var(--st-space-24)) !important;
+        padding: var(--st-promo-banner-padding, 60px var(--st-space-24)) !important;
+        border-radius: var(--st-radius-lg);
+      }
+
+      :host([layout='inline']) {
+        padding: var(--st-promo-banner-padding, var(--st-space-24)) !important;
+      }
+      .actions {
+        flex-direction: column;
+        align-items: stretch;
+      }
+      .cta {
+        width: 100%;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .cta {
+        transition: none;
+      }
+    }  `;
+__decorateClass([
+  property({ type: String })
+], PromoBanner.prototype, "title", 2);
+__decorateClass([
+  property({ type: String })
+], PromoBanner.prototype, "subtitle", 2);
+__decorateClass([
+  property({ type: String, attribute: "action-label" })
+], PromoBanner.prototype, "actionLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "action-label-short" })
+], PromoBanner.prototype, "actionLabelShort", 2);
+__decorateClass([
+  property({ type: String, attribute: "secondary-action-label-short" })
+], PromoBanner.prototype, "secondaryActionLabelShort", 2);
+__decorateClass([
+  property({ type: String })
+], PromoBanner.prototype, "href", 2);
+__decorateClass([
+  property({ type: String, attribute: "image-src" })
+], PromoBanner.prototype, "imageSrc", 2);
+__decorateClass([
+  property({ type: String, attribute: "secondary-action-label" })
+], PromoBanner.prototype, "secondaryActionLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "secondary-href" })
+], PromoBanner.prototype, "secondaryHref", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], PromoBanner.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PromoBanner.prototype, "inverted", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], PromoBanner.prototype, "layout", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "button-style" })
+], PromoBanner.prototype, "buttonStyle", 2);
+__decorateClass([
+  property({ type: String, attribute: "cta-note" })
+], PromoBanner.prototype, "ctaNote", 2);
+__decorateClass([
+  property({ type: String, attribute: "cta-note-icon" })
+], PromoBanner.prototype, "ctaNoteIcon", 2);
+PromoBanner = __decorateClass([
+  customElement("st-promo-banner")
+], PromoBanner);
+
+export {
+  PromoBanner
+};
+//# sourceMappingURL=chunk-EW2RK5Y6.js.map

package/dist/chunk-EW2RK5Y6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/promo-banner/PromoBanner.ts"],"sourcesContent":["import { LitElement, css, html, nothing, svg } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport 'iconify-icon';\n\nimport { buttonResetStyles, controlBaseStyles, ctaPillStyles, rootFontFamilyStyles } from '../shared/styles';\nimport { ctaLinkStyles, sectionSubtitleStyles, sectionTitleStyles } from '../shared/section-styles';\nimport { ctaAriaLabel, ctaLabelStyles, renderCtaLabel } from '../shared/cta-label';\nimport { externalLinkAttrs, externalLinkExtras, isExternalHref } from '../shared/external-link';\nimport type { HeroActionEventDetail } from '../hero/HeroEvents';\n\n/* Same small padlock as st-hero's cta-note, so the note never reads as a list tick. */\nconst CTA_NOTE_ICON = svg`<svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><rect x=\"5\" y=\"11\" width=\"14\" height=\"10\" rx=\"2\"/><path d=\"M8 11V8a4 4 0 0 1 8 0v3\"/></svg>`;\n\n/**\n * Rounded call-to-action banner (title, subtitle, one or two outlined buttons) on a dark panel or a\n * background image. A button with an `href` is a real link (`<a href>`): the browser follows it\n * unless the `action` event is cancelled, so external URLs, `#anchors` and `/path?x=y` work without\n * JavaScript. A button without an `href` is a `<button>`. `variant=\"accent\"` fills the banner with\n * the brand colour.\n *\n * `cta-note` is a short line with a small padlock under the buttons (e.g. \"No credit card needed\"). In the\n * inline layout it sits under the buttons in the right-hand group, left-aligned with the first button.\n *\n * `layout=\"inline\"` sets the copy on the left and the buttons on the right of one row (wrapping on\n * small screens), with 56px/48px padding (24px on phones). Its buttons are 52px pills; with\n * `variant=\"accent\"` the first is a white pill with navy text and the second a transparent pill with\n * a light blue outline. `button-style=\"pill\"` gives the buttons the same pill shape in the default\n * `stack` layout, which is otherwise unchanged.\n *\n * @fires action - Cancelable, before following the link. Detail `{ href, kind? }`. `kind` is `secondary` for the second button only.\n * @cssprop --st-promo-banner-margin - Overrides the banner's margin.\n * @cssprop --st-promo-banner-padding - Overrides the banner's padding.\n * @cssprop --st-promo-banner-cta-note-color - Colour of the `cta-note` line (default `currentColor` at 85%).\n * @csspart action - The primary button (`<a>` with an `href`, `<button>` without).\n * @csspart secondary-action - The second button.\n * @csspart cta-note - The small line with a padlock under the buttons (`cta-note`).\n */\n@customElement('st-promo-banner')\nexport class PromoBanner extends LitElement {\n  static styles = css`\n    ${ctaLabelStyles}\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n      box-sizing: border-box;\n      width: calc(100% - 48px);\n      max-width: var(--st-cms-container-max);\n      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\n         margin/padding; override with --st-promo-banner-margin/-padding instead. */\n      margin: var(--st-promo-banner-margin, var(--st-space-40) auto) !important;\n      padding: var(--st-promo-banner-padding, 100px var(--st-space-24)) !important;\n      border-radius: var(--st-space-24);\n      background-color: var(--st-color-text-strong);\n      background-size: cover;\n      background-position: center;\n      color: var(--st-color-on-solid);\n      text-align: center;\n      ${rootFontFamilyStyles}\n    }\n\n    :host([variant='accent']) {\n      background-color: var(--st-color-accent);\n      color: var(--st-cms-on-dark);\n    }\n\n    :host([variant='accent']) .cta:not(.secondary) {\n      background: var(--st-cms-on-dark);\n      border-color: transparent;\n      color: var(--st-cms-navy);\n    }\n\n    /* Outlined second button on the brand fill: white text and border, 5.8:1 on the default accent\n       (#3557E0), so both clear WCAG AA. */\n    :host([variant='accent']) .cta.secondary {\n      color: var(--st-cms-on-dark);\n      border-color: var(--st-cms-on-dark);\n    }\n\n    :host([variant='accent']) .cta.secondary:hover {\n      background: color-mix(in oklch, var(--st-cms-on-dark) 14%, transparent);\n    }\n\n    :host([inverted]) {\n      background-color: var(--st-color-subtle);\n      color: var(--st-color-text-strong);\n    }\n\n    .container {\n      max-width: 800px;\n      margin: 0 auto;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: var(--st-space-32);\n    }\n\n    .title {\n      ${sectionTitleStyles}\n      color: inherit;\n      margin: 0;\n      letter-spacing: -0.02em;\n    }\n\n    .subtitle {\n      ${sectionSubtitleStyles}\n      color: inherit;\n      opacity: 0.8;\n      margin: 0;\n    }\n\n    .actions {\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: center;\n      gap: var(--st-space-12);\n      margin-top: var(--st-space-16);\n    }\n\n    .cta {\n      ${buttonResetStyles}\n      ${ctaLinkStyles}\n      border: 1px solid currentColor;\n      color: inherit;\n    }\n\n    .cta:hover {\n      transform: scale(1.05);\n    }\n\n    .cta:focus-visible {\n      outline: var(--st-focus-ring);\n      outline-offset: 2px;\n    }\n\n    /* The buttons and the cta-note share one column: the note sits under the buttons, centred in the\n       stack layout and left-aligned with the first button in the inline layout. */\n    .cta-group {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .cta-note {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      margin: 8px 0 0;\n      font-size: 14px;\n      font-weight: 500;\n      line-height: 1.4;\n      color: var(--st-promo-banner-cta-note-color, color-mix(in oklch, currentColor 85%, transparent));\n    }\n\n    .cta-note svg,\n    .cta-note iconify-icon {\n      flex: none;\n      width: 14px;\n      height: 14px;\n      font-size: 14px;\n    }\n\n    /* layout=\"inline\": copy left, buttons right, one row that wraps. */\n    :host([layout='inline']) {\n      padding: var(--st-promo-banner-padding, 56px 48px) !important;\n    }\n\n    /* The inline band is the content width (container max, 1200px), not 48px narrower; below that\n       width it keeps the 24px gutter on each side. */\n    @media (min-width: 1248px) {\n      :host([layout='inline']) {\n        width: 100%;\n      }\n    }\n\n    :host([layout='inline']) .container {\n      max-width: none;\n      flex-direction: row;\n      flex-wrap: wrap;\n      justify-content: space-between;\n      align-items: center;\n      gap: var(--st-space-24) var(--st-space-32);\n      text-align: left;\n    }\n\n    :host([layout='inline']) .copy {\n      display: flex;\n      flex: 1 1 420px;\n      flex-direction: column;\n      align-items: flex-start;\n      gap: var(--st-space-16);\n      min-width: 0;\n    }\n\n    :host([layout='inline']) .title,\n    :host([layout='inline']) .subtitle {\n      margin: 0;\n    }\n\n    :host([layout='inline']) .cta-group {\n      flex: 0 1 auto;\n      align-items: flex-start;\n    }\n\n    :host([layout='inline']) .actions {\n      flex: 0 1 auto;\n      justify-content: flex-end;\n      margin-top: 0;\n    }\n\n    /* The inline accent banner is the brand navy (the design's closing band). */\n    :host([layout='inline'][variant='accent']) {\n      background-color: var(--st-cms-brand-navy, var(--st-color-accent));\n    }\n\n    :host([layout='inline'][variant='accent']) .subtitle {\n      color: var(--st-cms-primary-100, var(--st-cms-on-dark));\n      opacity: 1;\n    }\n\n    /* Inline buttons (and buttonStyle=\"pill\" on any layout) are 52px pills. */\n    :host([layout='inline']) .cta,\n    :host([button-style='pill']) .cta {\n      ${ctaPillStyles}\n    }\n\n    :host([layout='inline']) .cta {\n      font-size: 17px;\n    }\n\n    :host([layout='inline'][variant='accent']) .cta:not(.secondary) {\n      background: var(--st-cms-on-dark);\n      color: var(--st-cms-navy);\n    }\n\n    :host([layout='inline'][variant='accent']) .cta.secondary {\n      padding: 0 24px;\n      background: transparent;\n      color: var(--st-cms-on-dark);\n      border: 1px solid var(--st-cms-primary-400);\n    }\n\n    :host([button-style='pill'][variant='accent']) .cta:not(.secondary) {\n      background: var(--st-cms-on-dark);\n      color: var(--st-cms-navy);\n    }\n\n    :host([button-style='pill']) .cta.secondary {\n      padding: 0 24px;\n    }\n\n    @media (max-width: 768px) {\n      :host {\n        width: auto;\n        margin: var(--st-promo-banner-margin, var(--st-space-24)) !important;\n        padding: var(--st-promo-banner-padding, 60px var(--st-space-24)) !important;\n        border-radius: var(--st-radius-lg);\n      }\n\n      :host([layout='inline']) {\n        padding: var(--st-promo-banner-padding, var(--st-space-24)) !important;\n      }\n      .actions {\n        flex-direction: column;\n        align-items: stretch;\n      }\n      .cta {\n        width: 100%;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .cta {\n        transition: none;\n      }\n    }  `;\n\n  @property({ type: String })\n  title = '';\n\n  @property({ type: String })\n  subtitle = '';\n\n  @property({ type: String, attribute: 'action-label' })\n  actionLabel = '';\n\n  /** Shorter `action-label` for phones (< 480px); the full label stays the accessible name. */\n  @property({ type: String, attribute: 'action-label-short' })\n  actionLabelShort = '';\n\n  /** Shorter `secondary-action-label` for phones (< 480px). */\n  @property({ type: String, attribute: 'secondary-action-label-short' })\n  secondaryActionLabelShort = '';\n\n  /** Target of the first button. With a value the button is a link; the `action` event can cancel the navigation. */\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String, attribute: 'image-src' })\n  imageSrc = '';\n\n  /** Label of a second, outlined button next to the first. */\n  @property({ type: String, attribute: 'secondary-action-label' })\n  secondaryActionLabel = '';\n\n  /** Target of the second button, sent in the `action` event detail. */\n  @property({ type: String, attribute: 'secondary-href' })\n  secondaryHref = '';\n\n  /** `default` is the dark panel; `accent` fills the banner with the brand colour and makes the first button white. */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'accent' = 'default';\n\n  @property({ type: Boolean, reflect: true })\n  inverted = false;\n\n  /** `stack` (default) centres the copy above the buttons; `inline` puts the buttons beside the copy. */\n  @property({ type: String, reflect: true })\n  layout: 'stack' | 'inline' = 'stack';\n\n  /** `default` keeps the plain buttons; `pill` gives them the 52px pill shape (`inline` always uses pills). */\n  @property({ type: String, reflect: true, attribute: 'button-style' })\n  buttonStyle: 'default' | 'pill' = 'default';\n\n  /** Short line with a small check under the buttons (e.g. \"No credit card needed\"). Empty hides it. */\n  @property({ type: String, attribute: 'cta-note' })\n  ctaNote = '';\n\n  /** Iconify icon for the `cta-note` line (e.g. `mdi:open-source-initiative`). Empty keeps the padlock. */\n  @property({ type: String, attribute: 'cta-note-icon' })\n  ctaNoteIcon = '';\n\n  protected willUpdate(): void {\n    this.style.backgroundImage = this.imageSrc ? `url(${JSON.stringify(this.imageSrc)})` : '';\n  }\n\n  /** Fires the cancelable `action` event; a cancelled click keeps the page where it is. */\n  private emitAction(event: MouseEvent, detail: HeroActionEventDetail): void {\n    const action = new CustomEvent<HeroActionEventDetail>('action', { detail, bubbles: true, composed: true, cancelable: true });\n    this.dispatchEvent(action);\n    if (action.defaultPrevented) event.preventDefault();\n  }\n\n  private renderCta(label: string, href: string, secondary: boolean) {\n    const className = secondary ? 'cta secondary' : 'cta';\n    const part = secondary ? 'secondary-action' : 'action';\n    const detail: HeroActionEventDetail = secondary ? { href, kind: 'secondary' } : { href };\n    const onClick = (event: MouseEvent) => this.emitAction(event, detail);\n    const { target, rel } = externalLinkAttrs(href);\n    const short = secondary ? this.secondaryActionLabelShort : this.actionLabelShort;\n    const text = renderCtaLabel(label, short);\n    const ariaLabel = ctaAriaLabel(label, short, isExternalHref(href) ? ' (opens in new tab)' : '');\n    return href\n      ? html`<a class=${className} part=${part} href=${href} target=${target} rel=${rel} aria-label=${ariaLabel} @click=${onClick}\n          >${text}${externalLinkExtras(href)}</a\n        >`\n      : html`<button class=${className} part=${part} type=\"button\" aria-label=${ariaLabel} @click=${onClick}>${text}</button>`;\n  }\n\n  private renderCopy() {\n    return html`\n      <h2 class=\"title\" part=\"title\">${this.title}</h2>\n      ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\n      <slot></slot>\n    `;\n  }\n\n  render() {\n    return html`\n      <div class=\"container\" part=\"container\">\n        ${this.layout === 'inline'\n          ? html`<div class=\"copy\" part=\"copy\">${this.renderCopy()}</div>`\n          : this.renderCopy()}\n        ${this.actionLabel || this.secondaryActionLabel || this.ctaNote\n          ? html`<div class=\"cta-group\">\n              ${this.actionLabel || this.secondaryActionLabel\n                ? html`<div class=\"actions\" part=\"actions\">\n                    ${this.actionLabel ? this.renderCta(this.actionLabel, this.href, false) : nothing}\n                    ${this.secondaryActionLabel ? this.renderCta(this.secondaryActionLabel, this.secondaryHref, true) : nothing}\n                  </div>`\n                : nothing}\n              ${this.ctaNote\n                ? html`<p class=\"cta-note\" part=\"cta-note\">${this.ctaNoteIcon\n                    ? html`<iconify-icon icon=${this.ctaNoteIcon} aria-hidden=\"true\"></iconify-icon>`\n                    : CTA_NOTE_ICON}<span>${this.ctaNote}</span></p>`\n                : nothing}\n            </div>`\n          : nothing}\n      </div>\n    `;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-BLQV2YMO.js → chunk-EZOKT7NJ.js}

@@ -6,7 +6,7 @@ import {
   controlBaseStyles,
   eyebrowLabelStyles,
   fontFamilyStyles
-} from "./chunk-KMU6ABQF.js";
+} from "./chunk-NXUS2CH7.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -265,4 +265,4 @@ Select = __decorateClass([
 export {
   Select
 };
-//# sourceMappingURL=chunk-BLQV2YMO.js.map
+//# sourceMappingURL=chunk-EZOKT7NJ.js.map