@sankhyatronics/sankhya-cms 0.1.18 → 0.3.0

package/dist/chunk-EKZFFY45.js

@@ -0,0 +1,426 @@
+import {
+  MODAL_OPEN_ATTRIBUTE
+} from "./chunk-WAMOAAMN.js";
+import {
+  buttonResetStyles,
+  controlBaseStyles,
+  rootFontFamilyStyles
+} from "./chunk-NXUS2CH7.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/cookie-consent/CookieConsent.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+var MODAL_HIDDEN_ATTRIBUTE = "data-st-modal-hidden";
+var DRAWER_OPEN_ATTRIBUTE = "data-st-drawer-open";
+var DRAWER_HIDDEN_ATTRIBUTE = "data-st-drawer-hidden";
+var BANNER_HEIGHT_PROPERTY = "--st-cookie-banner-height";
+var DEFAULT_STORAGE_KEY = "sankhya_ui_cookie_consent";
+var DEFAULT_MESSAGE = "We use cookies that are needed for this site to work. With your permission we would also use optional cookies; they stay off until you accept them.";
+var CookieConsent = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.message = "";
+    this.acceptButtonText = "Accept";
+    this.refuseButtonText = "Reject";
+    this.settingsButtonText = "Settings";
+    this.saveButtonText = "Save choices";
+    this.settingsHeading = "Cookie settings";
+    this.categories = [];
+    this.privacyPolicyLink = "";
+    this.privacyPolicyText = "Privacy Policy";
+    this.storageKey = DEFAULT_STORAGE_KEY;
+    this.consent = null;
+    this.settingsOpen = false;
+    this.picked = {};
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.consent = this.readStored();
+    this.pageObserver = new MutationObserver(() => this.syncPageState());
+    this.pageObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: [MODAL_OPEN_ATTRIBUTE, DRAWER_OPEN_ATTRIBUTE]
+    });
+    this.sizeObserver = new ResizeObserver(() => this.publishBannerHeight());
+    this.sizeObserver.observe(this);
+    this.syncPageState();
+  }
+  disconnectedCallback() {
+    this.pageObserver?.disconnect();
+    this.pageObserver = void 0;
+    this.sizeObserver?.disconnect();
+    this.sizeObserver = void 0;
+    document.documentElement.style.removeProperty(BANNER_HEIGHT_PROPERTY);
+    super.disconnectedCallback();
+  }
+  updated() {
+    this.publishBannerHeight();
+  }
+  /** Follows the page: a modal hides and disables the bar, an open nav drawer hides it (the stored choice is untouched). */
+  syncPageState() {
+    const root = document.documentElement;
+    const blocked = root.hasAttribute(MODAL_OPEN_ATTRIBUTE);
+    this.toggleAttribute(MODAL_HIDDEN_ATTRIBUTE, blocked);
+    this.toggleAttribute("inert", blocked);
+    this.toggleAttribute(DRAWER_HIDDEN_ATTRIBUTE, root.hasAttribute(DRAWER_OPEN_ATTRIBUTE));
+    this.publishBannerHeight();
+  }
+  /** Publishes the bar's height on <html> while it is shown; removes it once dismissed or hidden. */
+  publishBannerHeight() {
+    const root = document.documentElement;
+    const shown = this.isConnected && this.consent === null && !this.hasAttribute(DRAWER_HIDDEN_ATTRIBUTE);
+    if (!shown) {
+      root.style.removeProperty(BANNER_HEIGHT_PROPERTY);
+      return;
+    }
+    root.style.setProperty(BANNER_HEIGHT_PROPERTY, `${this.getBoundingClientRect().height}px`);
+  }
+  readStored() {
+    try {
+      const saved = localStorage.getItem(this.storageKey);
+      if (saved === "accepted" || saved === "refused") return { status: saved };
+      if (saved?.startsWith("{")) {
+        const parsed = JSON.parse(saved);
+        if (parsed.status === "custom" && parsed.categories && typeof parsed.categories === "object") return parsed;
+      }
+      return null;
+    } catch {
+      return null;
+    }
+  }
+  /** Every category id mapped to whether it is allowed under `status`. */
+  allowedFor(status, picked) {
+    return Object.fromEntries(
+      this.categories.map((category) => [
+        category.id,
+        Boolean(category.required) || status === "accepted" || status === "custom" && Boolean(picked[category.id])
+      ])
+    );
+  }
+  choose(status) {
+    const categories = this.allowedFor(status, this.picked);
+    const stored = status === "custom" ? { status, categories } : { status };
+    this.consent = stored;
+    try {
+      localStorage.setItem(this.storageKey, status === "custom" ? JSON.stringify(stored) : status);
+    } catch {
+    }
+    const name = { accepted: "cookie-consent-accept", refused: "cookie-consent-refuse", custom: "cookie-consent-save" }[status];
+    this.dispatchEvent(new CustomEvent(name, { detail: { status, categories }, bubbles: true, composed: true }));
+  }
+  toggleSettings() {
+    this.settingsOpen = !this.settingsOpen;
+    if (this.settingsOpen) {
+      void this.updateComplete.then(() => this.renderRoot.querySelector(".settings input:not([disabled])")?.focus());
+    }
+  }
+  renderLink() {
+    if (!this.privacyPolicyLink) return nothing;
+    const external = /^[a-z][a-z0-9+.-]*:/i.test(this.privacyPolicyLink);
+    return external ? html`<a class="link" part="link" href=${this.privacyPolicyLink} target="_blank" rel="noopener noreferrer">${this.privacyPolicyText}</a>` : html`<a class="link" part="link" href=${this.privacyPolicyLink}>${this.privacyPolicyText}</a>`;
+  }
+  renderSettings() {
+    return html`<fieldset class="settings" part="settings" id="cookie-settings">
+      <legend>${this.settingsHeading}</legend>
+      ${this.categories.map(
+      (category) => html`<label class="category">
+          <input
+            type="checkbox"
+            name=${category.id}
+            .checked=${Boolean(category.required) || Boolean(this.picked[category.id])}
+            ?disabled=${category.required}
+            @change=${(event) => this.picked = { ...this.picked, [category.id]: event.target.checked }}
+          />
+          <span>
+            <span class="category-label">${category.label}</span>
+            ${category.description ? html`<span class="category-description">${category.description}</span>` : nothing}
+          </span>
+        </label>`
+    )}
+      <div class="actions">
+        <button class="btn save" part="save" type="button" @click=${() => this.choose("custom")}>${this.saveButtonText}</button>
+      </div>
+    </fieldset>`;
+  }
+  render() {
+    if (this.consent !== null) return nothing;
+    const hasSettings = this.categories.length > 0 && Boolean(this.settingsButtonText);
+    return html`
+      <div class="bar">
+        <div class="content" part="content">
+          <p class="message" part="message">
+            <slot>${this.message || DEFAULT_MESSAGE} ${this.renderLink()}</slot>
+          </p>
+        </div>
+        <div class="actions" part="actions">
+          ${hasSettings ? html`<button
+                class="btn settings-toggle"
+                part="settings-toggle"
+                type="button"
+                aria-expanded=${this.settingsOpen ? "true" : "false"}
+                aria-controls="cookie-settings"
+                @click=${this.toggleSettings}
+              >
+                ${this.settingsButtonText}
+              </button>` : nothing}
+          <button class="btn refuse" part="refuse" type="button" @click=${() => this.choose("refused")}>${this.refuseButtonText}</button>
+          <button class="btn accept" part="accept" type="button" @click=${() => this.choose("accepted")}>${this.acceptButtonText}</button>
+        </div>
+      </div>
+      ${hasSettings && this.settingsOpen ? this.renderSettings() : nothing}
+    `;
+  }
+};
+CookieConsent.styles = css`
+    ${controlBaseStyles}
+
+    @keyframes st-cookie-slide-up {
+      from {
+        transform: translateY(100%);
+      }
+      to {
+        transform: translateY(0);
+      }
+    }
+
+    :host {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      max-height: 100vh;
+      overflow-y: auto;
+      box-sizing: border-box;
+      z-index: 9999;
+      display: flex;
+      flex-direction: column;
+      gap: var(--st-space-12);
+      /* Compact on a phone: the padding is the mobile value; the desktop rule below widens it.
+         !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's
+         padding; override with --st-cookie-consent-padding instead. */
+      padding: var(--st-cookie-consent-padding, var(--st-space-16)) !important;
+      background: var(--st-color-surface);
+      color: var(--st-color-text);
+      border-top: 1px solid var(--st-color-border);
+      box-shadow: 0 -4px 10px var(--st-shadow-color-sm);
+      animation: st-cookie-slide-up 0.3s ease-out;
+      ${rootFontFamilyStyles}
+    }
+
+    :host([data-st-modal-hidden]) {
+      visibility: hidden;
+    }
+
+    :host([data-st-drawer-hidden]) {
+      display: none;
+    }
+
+    .bar {
+      display: flex;
+      flex-direction: column;
+      gap: var(--st-space-12);
+    }
+
+    .content {
+      flex: 1;
+    }
+
+    .message {
+      margin: 0;
+      font-size: var(--st-text-sm);
+      line-height: 1.5;
+    }
+
+    /* Phone: the copy at 14px (the smallest body size the site uses). */
+    @media (max-width: 767px) {
+      .message {
+        font-size: 14px;
+      }
+    }
+
+    .link {
+      color: var(--st-color-accent-text);
+      text-decoration: underline;
+      margin-left: var(--st-space-4);
+    }
+
+    .link:hover {
+      text-decoration: none;
+    }
+
+    /* One row of buttons on every screen. On a phone they share the row equally. */
+    .actions {
+      display: flex;
+      flex-wrap: nowrap;
+      gap: var(--st-space-12);
+      flex-shrink: 0;
+    }
+
+    .btn {
+      ${buttonResetStyles}
+      flex: 1 1 0;
+      min-width: 0;
+      min-height: 44px;
+      padding: 0 var(--st-space-12);
+      border: 1px solid transparent;
+      border-radius: 9999px;
+      font-weight: var(--st-font-weight-semibold);
+      font-size: var(--st-text-md);
+      white-space: nowrap;
+      transition:
+        background-color 0.2s ease,
+        color 0.2s ease;
+    }
+
+    .btn:focus-visible {
+      outline: 2px solid var(--st-color-accent);
+      outline-offset: 2px;
+    }
+
+    /* Reject and Accept carry the same weight (refusing must be as easy as accepting): the same size,
+       type and outline. Settings uses the same outline. */
+    .refuse,
+    .accept,
+    .settings-toggle {
+      background: var(--st-color-surface);
+      border-color: var(--st-color-text-strong);
+      color: var(--st-color-text-strong);
+    }
+
+    .refuse:hover,
+    .accept:hover,
+    .settings-toggle:hover {
+      background: var(--st-color-hover);
+    }
+
+    /* The settings panel's save button is the one primary action in that panel. */
+    .save {
+      background: var(--st-button-primary-bg);
+      border-color: transparent;
+      color: var(--st-button-primary-color);
+    }
+
+    .save:hover {
+      opacity: 0.9;
+    }
+
+    .settings {
+      display: flex;
+      flex-direction: column;
+      gap: var(--st-space-12);
+      margin: 0;
+      padding: var(--st-space-16) 0 0;
+      border: 0;
+      border-top: 1px solid var(--st-color-border);
+    }
+
+    .settings legend {
+      padding: 0;
+      margin-bottom: var(--st-space-8);
+      font-weight: var(--st-font-weight-semibold);
+      color: var(--st-color-text-strong);
+    }
+
+    .category {
+      display: flex;
+      gap: var(--st-space-12);
+      align-items: flex-start;
+      font-size: var(--st-text-md);
+      line-height: 1.5;
+    }
+
+    .category input {
+      width: 18px;
+      height: 18px;
+      margin: 3px 0 0;
+      flex: none;
+    }
+
+    .category-label {
+      font-weight: var(--st-font-weight-semibold);
+      color: var(--st-color-text-strong);
+    }
+
+    .category-description {
+      display: block;
+      color: var(--st-color-text);
+    }
+
+    @media (min-width: 768px) {
+      :host {
+        gap: var(--st-space-16);
+        padding: var(--st-cookie-consent-padding, var(--st-space-16) var(--st-space-32)) !important;
+      }
+
+      .bar {
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--st-space-16);
+      }
+
+      .btn {
+        flex: none;
+        padding: 0 var(--st-space-20);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host {
+        animation: none;
+      }
+      .btn {
+        transition: none;
+      }
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], CookieConsent.prototype, "message", 2);
+__decorateClass([
+  property({ type: String, attribute: "accept-button-text" })
+], CookieConsent.prototype, "acceptButtonText", 2);
+__decorateClass([
+  property({ type: String, attribute: "refuse-button-text" })
+], CookieConsent.prototype, "refuseButtonText", 2);
+__decorateClass([
+  property({ type: String, attribute: "settings-button-text" })
+], CookieConsent.prototype, "settingsButtonText", 2);
+__decorateClass([
+  property({ type: String, attribute: "save-button-text" })
+], CookieConsent.prototype, "saveButtonText", 2);
+__decorateClass([
+  property({ type: String, attribute: "settings-heading" })
+], CookieConsent.prototype, "settingsHeading", 2);
+__decorateClass([
+  property({ attribute: false })
+], CookieConsent.prototype, "categories", 2);
+__decorateClass([
+  property({ type: String, attribute: "privacy-policy-link" })
+], CookieConsent.prototype, "privacyPolicyLink", 2);
+__decorateClass([
+  property({ type: String, attribute: "privacy-policy-text" })
+], CookieConsent.prototype, "privacyPolicyText", 2);
+__decorateClass([
+  property({ type: String, attribute: "storage-key" })
+], CookieConsent.prototype, "storageKey", 2);
+__decorateClass([
+  state()
+], CookieConsent.prototype, "consent", 2);
+__decorateClass([
+  state()
+], CookieConsent.prototype, "settingsOpen", 2);
+__decorateClass([
+  state()
+], CookieConsent.prototype, "picked", 2);
+CookieConsent = __decorateClass([
+  customElement("st-cookie-consent")
+], CookieConsent);
+
+export {
+  CookieConsent
+};
+//# sourceMappingURL=chunk-EKZFFY45.js.map

package/dist/chunk-EKZFFY45.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/cookie-consent/CookieConsent.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { MODAL_OPEN_ATTRIBUTE } from '../shared/modal-state';\nimport { buttonResetStyles, controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\nimport type { CookieCategory, CookieConsentEventDetail, CookieConsentStatus } from './CookieConsentEvents';\n\n/** Host attribute set while a modal is open: the bar is hidden and inert until it closes. */\nconst MODAL_HIDDEN_ATTRIBUTE = 'data-st-modal-hidden';\n/** `<html>` attribute set while the mobile nav drawer is open (by st-header). */\nconst DRAWER_OPEN_ATTRIBUTE = 'data-st-drawer-open';\n/** Host attribute set while the drawer is open: the bar is hidden until it closes. */\nconst DRAWER_HIDDEN_ATTRIBUTE = 'data-st-drawer-hidden';\n/** `<html>` custom property holding the bar's height while it is shown, so the footer can pad past it. */\nconst BANNER_HEIGHT_PROPERTY = '--st-cookie-banner-height';\n\nconst DEFAULT_STORAGE_KEY = 'sankhya_ui_cookie_consent';\n\nconst DEFAULT_MESSAGE =\n  'We use cookies that are needed for this site to work. With your permission we would also use optional cookies; they stay off until you accept them.';\n\ninterface StoredConsent {\n  status: CookieConsentStatus;\n  /** Only stored for `custom`: the optional categories the visitor allowed. */\n  categories?: Record<string, boolean>;\n}\n\n/**\n * Fixed bottom consent bar with explicit choices: accept all, reject all optional cookies, or (with\n * `categories` and a `settings-button-text`) open a settings panel to allow categories one by one.\n * Optional categories are off until the visitor turns them on. The choice is kept in localStorage\n * (`storage-key`, default `sankhya_ui_cookie_consent`; storage errors are ignored) and the bar renders\n * nothing once a choice exists. Fires `cookie-consent-accept`, `cookie-consent-refuse` or\n * `cookie-consent-save` (detail `{ status, categories }`). The default slot replaces the message\n * text. `privacy-policy-link` opens in the same tab for a site path, in a new tab for an external URL.\n *\n * While a modal is open (`<html data-st-modal-open>`, set by st-quote-dialog) the bar is hidden\n * (`visibility: hidden`) and inert, and it reappears unchanged when the modal closes. While the mobile\n * nav drawer is open (`<html data-st-drawer-open>`, set by st-header) the bar is not displayed.\n *\n * While the bar is shown its height is published as `--st-cookie-banner-height` on `<html>` (removed\n * when it is dismissed), so a page's footer can pad its last row above the bar.\n *\n * @fires cookie-consent-accept - Every category allowed.\n * @fires cookie-consent-refuse - Only required categories allowed.\n * @fires cookie-consent-save - The categories picked in the settings panel.\n * @cssprop --st-cookie-consent-padding - Overrides the bar's padding.\n * @csspart settings - The settings panel.\n */\n@customElement('st-cookie-consent')\nexport class CookieConsent extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    @keyframes st-cookie-slide-up {\n      from {\n        transform: translateY(100%);\n      }\n      to {\n        transform: translateY(0);\n      }\n    }\n\n    :host {\n      position: fixed;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      max-height: 100vh;\n      overflow-y: auto;\n      box-sizing: border-box;\n      z-index: 9999;\n      display: flex;\n      flex-direction: column;\n      gap: var(--st-space-12);\n      /* Compact on a phone: the padding is the mobile value; the desktop rule below widens it.\n         !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\n         padding; override with --st-cookie-consent-padding instead. */\n      padding: var(--st-cookie-consent-padding, var(--st-space-16)) !important;\n      background: var(--st-color-surface);\n      color: var(--st-color-text);\n      border-top: 1px solid var(--st-color-border);\n      box-shadow: 0 -4px 10px var(--st-shadow-color-sm);\n      animation: st-cookie-slide-up 0.3s ease-out;\n      ${rootFontFamilyStyles}\n    }\n\n    :host([data-st-modal-hidden]) {\n      visibility: hidden;\n    }\n\n    :host([data-st-drawer-hidden]) {\n      display: none;\n    }\n\n    .bar {\n      display: flex;\n      flex-direction: column;\n      gap: var(--st-space-12);\n    }\n\n    .content {\n      flex: 1;\n    }\n\n    .message {\n      margin: 0;\n      font-size: var(--st-text-sm);\n      line-height: 1.5;\n    }\n\n    /* Phone: the copy at 14px (the smallest body size the site uses). */\n    @media (max-width: 767px) {\n      .message {\n        font-size: 14px;\n      }\n    }\n\n    .link {\n      color: var(--st-color-accent-text);\n      text-decoration: underline;\n      margin-left: var(--st-space-4);\n    }\n\n    .link:hover {\n      text-decoration: none;\n    }\n\n    /* One row of buttons on every screen. On a phone they share the row equally. */\n    .actions {\n      display: flex;\n      flex-wrap: nowrap;\n      gap: var(--st-space-12);\n      flex-shrink: 0;\n    }\n\n    .btn {\n      ${buttonResetStyles}\n      flex: 1 1 0;\n      min-width: 0;\n      min-height: 44px;\n      padding: 0 var(--st-space-12);\n      border: 1px solid transparent;\n      border-radius: 9999px;\n      font-weight: var(--st-font-weight-semibold);\n      font-size: var(--st-text-md);\n      white-space: nowrap;\n      transition:\n        background-color 0.2s ease,\n        color 0.2s ease;\n    }\n\n    .btn:focus-visible {\n      outline: 2px solid var(--st-color-accent);\n      outline-offset: 2px;\n    }\n\n    /* Reject and Accept carry the same weight (refusing must be as easy as accepting): the same size,\n       type and outline. Settings uses the same outline. */\n    .refuse,\n    .accept,\n    .settings-toggle {\n      background: var(--st-color-surface);\n      border-color: var(--st-color-text-strong);\n      color: var(--st-color-text-strong);\n    }\n\n    .refuse:hover,\n    .accept:hover,\n    .settings-toggle:hover {\n      background: var(--st-color-hover);\n    }\n\n    /* The settings panel's save button is the one primary action in that panel. */\n    .save {\n      background: var(--st-button-primary-bg);\n      border-color: transparent;\n      color: var(--st-button-primary-color);\n    }\n\n    .save:hover {\n      opacity: 0.9;\n    }\n\n    .settings {\n      display: flex;\n      flex-direction: column;\n      gap: var(--st-space-12);\n      margin: 0;\n      padding: var(--st-space-16) 0 0;\n      border: 0;\n      border-top: 1px solid var(--st-color-border);\n    }\n\n    .settings legend {\n      padding: 0;\n      margin-bottom: var(--st-space-8);\n      font-weight: var(--st-font-weight-semibold);\n      color: var(--st-color-text-strong);\n    }\n\n    .category {\n      display: flex;\n      gap: var(--st-space-12);\n      align-items: flex-start;\n      font-size: var(--st-text-md);\n      line-height: 1.5;\n    }\n\n    .category input {\n      width: 18px;\n      height: 18px;\n      margin: 3px 0 0;\n      flex: none;\n    }\n\n    .category-label {\n      font-weight: var(--st-font-weight-semibold);\n      color: var(--st-color-text-strong);\n    }\n\n    .category-description {\n      display: block;\n      color: var(--st-color-text);\n    }\n\n    @media (min-width: 768px) {\n      :host {\n        gap: var(--st-space-16);\n        padding: var(--st-cookie-consent-padding, var(--st-space-16) var(--st-space-32)) !important;\n      }\n\n      .bar {\n        flex-direction: row;\n        align-items: center;\n        justify-content: space-between;\n        gap: var(--st-space-16);\n      }\n\n      .btn {\n        flex: none;\n        padding: 0 var(--st-space-20);\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host {\n        animation: none;\n      }\n      .btn {\n        transition: none;\n      }\n    }\n  `;\n\n  @property({ type: String })\n  message = '';\n\n  @property({ type: String, attribute: 'accept-button-text' })\n  acceptButtonText = 'Accept';\n\n  @property({ type: String, attribute: 'refuse-button-text' })\n  refuseButtonText = 'Reject';\n\n  /** Label of the button that opens the settings panel. Shown only with `categories`. */\n  @property({ type: String, attribute: 'settings-button-text' })\n  settingsButtonText = 'Settings';\n\n  @property({ type: String, attribute: 'save-button-text' })\n  saveButtonText = 'Save choices';\n\n  @property({ type: String, attribute: 'settings-heading' })\n  settingsHeading = 'Cookie settings';\n\n  /** Cookie groups for the settings panel. Without any, the bar only offers accept and reject. */\n  @property({ attribute: false })\n  categories: CookieCategory[] = [];\n\n  @property({ type: String, attribute: 'privacy-policy-link' })\n  privacyPolicyLink = '';\n\n  @property({ type: String, attribute: 'privacy-policy-text' })\n  privacyPolicyText = 'Privacy Policy';\n\n  @property({ type: String, attribute: 'storage-key' })\n  storageKey = DEFAULT_STORAGE_KEY;\n\n  /** The stored choice, or `null` while undecided (the bar is only shown then). */\n  @state() private consent: StoredConsent | null = null;\n  @state() private settingsOpen = false;\n  /** Optional categories ticked in the settings panel (all off until the visitor ticks them). */\n  @state() private picked: Record<string, boolean> = {};\n\n  private pageObserver?: MutationObserver;\n  private sizeObserver?: ResizeObserver;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.consent = this.readStored();\n    this.pageObserver = new MutationObserver(() => this.syncPageState());\n    this.pageObserver.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [MODAL_OPEN_ATTRIBUTE, DRAWER_OPEN_ATTRIBUTE]\n    });\n    this.sizeObserver = new ResizeObserver(() => this.publishBannerHeight());\n    this.sizeObserver.observe(this);\n    this.syncPageState();\n  }\n\n  disconnectedCallback(): void {\n    this.pageObserver?.disconnect();\n    this.pageObserver = undefined;\n    this.sizeObserver?.disconnect();\n    this.sizeObserver = undefined;\n    document.documentElement.style.removeProperty(BANNER_HEIGHT_PROPERTY);\n    super.disconnectedCallback();\n  }\n\n  protected updated(): void {\n    this.publishBannerHeight();\n  }\n\n  /** Follows the page: a modal hides and disables the bar, an open nav drawer hides it (the stored choice is untouched). */\n  private syncPageState(): void {\n    const root = document.documentElement;\n    const blocked = root.hasAttribute(MODAL_OPEN_ATTRIBUTE);\n    this.toggleAttribute(MODAL_HIDDEN_ATTRIBUTE, blocked);\n    this.toggleAttribute('inert', blocked);\n    this.toggleAttribute(DRAWER_HIDDEN_ATTRIBUTE, root.hasAttribute(DRAWER_OPEN_ATTRIBUTE));\n    this.publishBannerHeight();\n  }\n\n  /** Publishes the bar's height on <html> while it is shown; removes it once dismissed or hidden. */\n  private publishBannerHeight(): void {\n    const root = document.documentElement;\n    const shown = this.isConnected && this.consent === null && !this.hasAttribute(DRAWER_HIDDEN_ATTRIBUTE);\n    if (!shown) {\n      root.style.removeProperty(BANNER_HEIGHT_PROPERTY);\n      return;\n    }\n    // The height is the box's own: the slide-up animation moves it with a transform, which does not change it.\n    root.style.setProperty(BANNER_HEIGHT_PROPERTY, `${this.getBoundingClientRect().height}px`);\n  }\n\n  private readStored(): StoredConsent | null {\n    try {\n      const saved = localStorage.getItem(this.storageKey);\n      if (saved === 'accepted' || saved === 'refused') return { status: saved };\n      if (saved?.startsWith('{')) {\n        const parsed = JSON.parse(saved) as StoredConsent;\n        if (parsed.status === 'custom' && parsed.categories && typeof parsed.categories === 'object') return parsed;\n      }\n      return null;\n    } catch {\n      return null;\n    }\n  }\n\n  /** Every category id mapped to whether it is allowed under `status`. */\n  private allowedFor(status: CookieConsentStatus, picked: Record<string, boolean>): Record<string, boolean> {\n    return Object.fromEntries(\n      this.categories.map(category => [\n        category.id,\n        Boolean(category.required) || status === 'accepted' || (status === 'custom' && Boolean(picked[category.id]))\n      ])\n    );\n  }\n\n  private choose(status: CookieConsentStatus): void {\n    const categories = this.allowedFor(status, this.picked);\n    const stored: StoredConsent = status === 'custom' ? { status, categories } : { status };\n    this.consent = stored;\n    try {\n      localStorage.setItem(this.storageKey, status === 'custom' ? JSON.stringify(stored) : status);\n    } catch {\n      // Storage unavailable (private mode, blocked): the choice just doesn't persist.\n    }\n    const name = { accepted: 'cookie-consent-accept', refused: 'cookie-consent-refuse', custom: 'cookie-consent-save' }[status];\n    this.dispatchEvent(new CustomEvent<CookieConsentEventDetail>(name, { detail: { status, categories }, bubbles: true, composed: true }));\n  }\n\n  private toggleSettings(): void {\n    this.settingsOpen = !this.settingsOpen;\n    if (this.settingsOpen) {\n      void this.updateComplete.then(() => this.renderRoot.querySelector<HTMLInputElement>('.settings input:not([disabled])')?.focus());\n    }\n  }\n\n  private renderLink() {\n    if (!this.privacyPolicyLink) return nothing;\n    const external = /^[a-z][a-z0-9+.-]*:/i.test(this.privacyPolicyLink);\n    return external\n      ? html`<a class=\"link\" part=\"link\" href=${this.privacyPolicyLink} target=\"_blank\" rel=\"noopener noreferrer\">${this.privacyPolicyText}</a>`\n      : html`<a class=\"link\" part=\"link\" href=${this.privacyPolicyLink}>${this.privacyPolicyText}</a>`;\n  }\n\n  private renderSettings() {\n    return html`<fieldset class=\"settings\" part=\"settings\" id=\"cookie-settings\">\n      <legend>${this.settingsHeading}</legend>\n      ${this.categories.map(\n        category => html`<label class=\"category\">\n          <input\n            type=\"checkbox\"\n            name=${category.id}\n            .checked=${Boolean(category.required) || Boolean(this.picked[category.id])}\n            ?disabled=${category.required}\n            @change=${(event: Event) =>\n              (this.picked = { ...this.picked, [category.id]: (event.target as HTMLInputElement).checked })}\n          />\n          <span>\n            <span class=\"category-label\">${category.label}</span>\n            ${category.description ? html`<span class=\"category-description\">${category.description}</span>` : nothing}\n          </span>\n        </label>`\n      )}\n      <div class=\"actions\">\n        <button class=\"btn save\" part=\"save\" type=\"button\" @click=${() => this.choose('custom')}>${this.saveButtonText}</button>\n      </div>\n    </fieldset>`;\n  }\n\n  render() {\n    if (this.consent !== null) return nothing;\n    const hasSettings = this.categories.length > 0 && Boolean(this.settingsButtonText);\n    return html`\n      <div class=\"bar\">\n        <div class=\"content\" part=\"content\">\n          <p class=\"message\" part=\"message\">\n            <slot>${this.message || DEFAULT_MESSAGE} ${this.renderLink()}</slot>\n          </p>\n        </div>\n        <div class=\"actions\" part=\"actions\">\n          ${hasSettings\n            ? html`<button\n                class=\"btn settings-toggle\"\n                part=\"settings-toggle\"\n                type=\"button\"\n                aria-expanded=${this.settingsOpen ? 'true' : 'false'}\n                aria-controls=\"cookie-settings\"\n                @click=${this.toggleSettings}\n              >\n                ${this.settingsButtonText}\n              </button>`\n            : nothing}\n          <button class=\"btn refuse\" part=\"refuse\" type=\"button\" @click=${() => this.choose('refused')}>${this.refuseButtonText}</button>\n          <button class=\"btn accept\" part=\"accept\" type=\"button\" @click=${() => this.choose('accepted')}>${this.acceptButtonText}</button>\n        </div>\n      </div>\n      ${hasSettings && this.settingsOpen ? this.renderSettings() : nothing}\n    `;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-ER7MCPDV.js

@@ -0,0 +1,7 @@
+// src/mega-menu/MegaMenuEvents.ts
+var MEGA_MENU_LAYOUT_EVENT = "st-mega-menu-layout";
+
+export {
+  MEGA_MENU_LAYOUT_EVENT
+};
+//# sourceMappingURL=chunk-ER7MCPDV.js.map

package/dist/chunk-ER7MCPDV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/mega-menu/MegaMenuEvents.ts"],"sourcesContent":["export interface MegaMenuSelectEventDetail {\n  href: string;\n}\n\n/**\n * Fired on `st-mega-menu` (bubbles, composed) when the number of grid tracks it lays out changes: the intro\n * column, each link column and the featured column. The `mega` dropdown around it uses this to keep a panel\n * with few columns from stretching to the full width.\n */\nexport const MEGA_MENU_LAYOUT_EVENT = 'st-mega-menu-layout';\n\nexport interface MegaMenuLayoutEventDetail {\n  tracks: number;\n}\n"],"mappings":";AASO,IAAM,yBAAyB;","names":[]}