@sankhyatronics/sankhya-cms 0.1.18 → 0.3.0

package/dist/chunk-V4R7PYP5.js

@@ -0,0 +1,905 @@
+import {
+  CONTACT_FIELD_NAMES,
+  CONTACT_LIMITS,
+  COUNTER_SHOW_RATIO,
+  DEFAULT_ERROR_MESSAGES,
+  ERROR_SUMMARY_MIN,
+  buildContactPayload,
+  codePointLength,
+  counterBand,
+  fillTemplate,
+  firstInvalidField,
+  groupTopics,
+  normalizeTopics,
+  parseTopicsAttribute,
+  readContactQuery,
+  resolvePreselectedTopic,
+  safeMailto,
+  splitMailto,
+  submitContact,
+  validateContact
+} from "./chunk-CZUGPKXV.js";
+import {
+  controlBaseStyles,
+  fontFamilyStyles
+} from "./chunk-NXUS2CH7.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/contact-form/ContactForm.ts
+import { LitElement, css, html, nothing, svg } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+
+// src/contact-form/ContactFormEvents.ts
+var CONTACT_FORM_SUBMIT_EVENT = "st-contact-form-submit";
+var CONTACT_FORM_SENT_EVENT = "st-contact-form-sent";
+var CONTACT_FORM_ERROR_EVENT = "st-contact-form-error";
+
+// src/contact-form/ContactForm.ts
+var SUCCESS_ICON = svg`<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 12l5 5L20 7" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path></svg>`;
+var FIELD_ORDER = CONTACT_FIELD_NAMES;
+var ContactForm = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.endpoint = "";
+    this.topics = [];
+    this.defaultTopic = "";
+    this.showPhone = true;
+    this.locale = "";
+    this.page = "";
+    this.nameLabel = "Full name";
+    this.emailLabel = "Work email";
+    this.companyLabel = "Company";
+    this.phoneLabel = "Phone (optional)";
+    this.topicLabel = "Topic";
+    this.topicPlaceholder = "Select a topic";
+    this.messageLabel = "Message";
+    this.namePlaceholder = "Your name";
+    this.emailPlaceholder = "you@company.com";
+    this.companyPlaceholder = "Your company";
+    this.messagePlaceholder = "Tell us what you need";
+    this.messageCounter = "{count} / {max}";
+    this.submitLabel = "Send message";
+    this.sendingLabel = "Sending\u2026";
+    this.requiredLabel = "required";
+    this.aboutLabel = "About:";
+    this.consentLabel = "I agree that Sankhyatronics may use these details to reply to my enquiry.";
+    this.privacyNote = "";
+    this.privacyLinkLabel = "Privacy Policy";
+    this.privacyHref = "/privacy-policy";
+    this.sentNote = "Thanks, your message has been sent. We will reply soon.";
+    this.referenceLabel = "Your reference:";
+    this.errorNote = "Sorry, your message could not be sent. Please try again later.";
+    this.rateLimitedNote = "You have sent several messages in a short time. Please wait {seconds} seconds and try again.";
+    this.rateLimitedGenericNote = "You have sent several messages in a short time. Please wait a little and try again.";
+    this.errorSummary = "Please fix {count} fields.";
+    this.errorSummaryOne = "Please fix {count} field.";
+    this.requiredNote = "* Required";
+    this.mailto = "";
+    this.errorMessages = {};
+    this.errors = {};
+    this.alertText = "";
+    this.alertOwn = false;
+    this.outcome = null;
+    this.sending = false;
+    this.messageLength = 0;
+    this.counterAnnouncement = "";
+    this.counterBandValue = 0;
+    /** `product` and `topic` from the page URL, read once on connect. */
+    this.queryParams = { product: null, topic: null };
+    this.inflight = null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.queryParams = readContactQuery(window.location.search);
+  }
+  disconnectedCallback() {
+    this.inflight?.abort();
+    this.inflight = null;
+    this.sending = false;
+    super.disconnectedCallback();
+  }
+  get topicList() {
+    return normalizeTopics(this.topics);
+  }
+  get preselect() {
+    return resolvePreselectedTopic(this.topicList, {
+      defaultTopic: this.defaultTopic,
+      product: this.queryParams.product,
+      topic: this.queryParams.topic
+    });
+  }
+  labels() {
+    return {
+      name: this.nameLabel,
+      email: this.emailLabel,
+      company: this.companyLabel,
+      phone: this.phoneLabel,
+      topic: this.topicLabel,
+      message: this.messageLabel
+    };
+  }
+  /** The defaults, with each key replaced by the override when it is a string. */
+  messages() {
+    const merged = { ...DEFAULT_ERROR_MESSAGES };
+    for (const key of Object.keys(merged)) {
+      const override = this.errorMessages[key];
+      if (typeof override === "string") merged[key] = override;
+    }
+    return merged;
+  }
+  readText(form, name) {
+    const field = form.elements.namedItem(name);
+    return field instanceof HTMLInputElement || field instanceof HTMLTextAreaElement || field instanceof HTMLSelectElement ? field.value : "";
+  }
+  readValues(form) {
+    const consent = form.elements.namedItem("consent");
+    return {
+      name: this.readText(form, "name"),
+      email: this.readText(form, "email"),
+      company: this.readText(form, "company"),
+      phone: this.readText(form, "phone"),
+      topic: this.readText(form, "topic"),
+      message: this.readText(form, "message"),
+      consent: consent instanceof HTMLInputElement && consent.checked,
+      website: this.readText(form, "website")
+    };
+  }
+  async onSubmit(event) {
+    event.preventDefault();
+    if (this.sending) return;
+    const form = event.currentTarget;
+    const values = this.readValues(form);
+    this.outcome = null;
+    const errors = validateContact(values, { labels: this.labels(), topics: this.topicList, messages: this.messages() });
+    this.errors = errors;
+    this.alertText = "";
+    this.alertOwn = false;
+    if (firstInvalidField(errors)) {
+      this.focusProblem(errors);
+      return;
+    }
+    this.dispatchEvent(
+      new CustomEvent(CONTACT_FORM_SUBMIT_EVENT, {
+        detail: { topic: values.topic.trim() },
+        bubbles: true,
+        composed: true
+      })
+    );
+    const payload = buildContactPayload(values, {
+      page: this.page || window.location.pathname,
+      locale: this.locale || document.documentElement.lang || "en",
+      now: /* @__PURE__ */ new Date()
+    });
+    const controller = new AbortController();
+    this.inflight = controller;
+    this.sending = true;
+    const hadFocus = this.shadowRoot?.activeElement === this.submitEl;
+    const result = await submitContact({ endpoint: this.endpoint.trim(), payload, signal: controller.signal });
+    if (this.inflight !== controller) return;
+    this.inflight = null;
+    this.sending = false;
+    this.applyResult(result, form);
+    if (hadFocus && result.kind !== "validation") {
+      void this.updateComplete.then(() => this.submitEl?.focus());
+    }
+  }
+  applyResult(result, form) {
+    switch (result.kind) {
+      case "sent":
+        form.reset();
+        this.errors = {};
+        this.alertText = "";
+        this.alertOwn = false;
+        this.messageLength = 0;
+        this.counterBandValue = 0;
+        this.counterAnnouncement = "";
+        this.outcome = result.reference === void 0 ? {} : { reference: result.reference };
+        this.dispatchEvent(
+          new CustomEvent(CONTACT_FORM_SENT_EVENT, {
+            detail: result.reference === void 0 ? {} : { reference: result.reference },
+            bubbles: true,
+            composed: true
+          })
+        );
+        return;
+      case "validation": {
+        const shown = {};
+        const hidden = [];
+        for (const name of FIELD_ORDER) {
+          const message = result.errors[name];
+          if (message === void 0) continue;
+          if (name === "phone" && !this.showPhone) hidden.push(message);
+          else shown[name] = message;
+        }
+        this.errors = shown;
+        this.alertText = [result.formMessage, ...hidden].filter(Boolean).join(" ");
+        this.alertOwn = false;
+        this.focusProblem(shown);
+        this.dispatchError("validation");
+        return;
+      }
+      case "rate_limited":
+        this.alertOwn = true;
+        this.alertText = result.retryAfterSeconds === void 0 ? this.rateLimitedGenericNote : fillTemplate(this.rateLimitedNote, { seconds: result.retryAfterSeconds });
+        this.dispatchError("rate_limited");
+        return;
+      case "unavailable":
+        this.alertOwn = true;
+        this.alertText = this.errorNote;
+        this.dispatchError("unavailable");
+        return;
+    }
+  }
+  focusField(name) {
+    if (!name) return;
+    void this.updateComplete.then(() => this.renderRoot.querySelector(`#cf-${name}`)?.focus());
+  }
+  /** Many failing fields: focus the summary, which links to each. One or two: the first field. */
+  focusProblem(errors) {
+    if (this.failingFields(errors).length >= ERROR_SUMMARY_MIN) {
+      void this.updateComplete.then(() => this.renderRoot.querySelector("#cf-summary")?.focus());
+      return;
+    }
+    this.focusField(firstInvalidField(errors));
+  }
+  failingFields(errors = this.errors) {
+    return FIELD_ORDER.filter((name) => errors[name] !== void 0 && errors[name] !== "");
+  }
+  onSummaryLink(event, name) {
+    event.preventDefault();
+    this.focusField(name);
+  }
+  dispatchError(kind) {
+    this.dispatchEvent(
+      new CustomEvent(CONTACT_FORM_ERROR_EVENT, {
+        detail: { kind },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  onMessageInput(event) {
+    const field = event.target;
+    this.messageLength = codePointLength(field.value.trim());
+    const band = counterBand(this.messageLength, CONTACT_LIMITS.messageMax);
+    if (band !== this.counterBandValue) {
+      this.counterBandValue = band;
+      this.counterAnnouncement = band === 0 ? "" : fillTemplate(this.messageCounter, { count: this.messageLength, max: CONTACT_LIMITS.messageMax });
+    }
+  }
+  errorSummaryText() {
+    const count = this.failingFields().length;
+    if (count === 0) return "";
+    return fillTemplate(count === 1 ? this.errorSummaryOne : this.errorSummary, { count });
+  }
+  /** The alert's text. Only the component's own notes get a link for `{mailto}`; server text stays plain. */
+  renderAlertText() {
+    if (!this.alertOwn) return this.alertText;
+    const address = safeMailto(this.mailto);
+    return splitMailto(this.alertText).map(
+      (piece) => piece !== null ? piece : address ? html`<a href="mailto:${address}">${address}</a>` : nothing
+    );
+  }
+  renderSummary() {
+    const failing = this.failingFields();
+    if (failing.length < ERROR_SUMMARY_MIN) return nothing;
+    return html`<div class="summary" part="summary" id="cf-summary" role="alert" tabindex="-1">
+      <p class="summary-title">${this.errorSummaryText()}</p>
+      <ul>
+        ${failing.map(
+      (name) => html`<li><a href="#cf-${name}" @click=${(event) => this.onSummaryLink(event, name)}>${this.errors[name]}</a></li>`
+    )}
+      </ul>
+    </div>`;
+  }
+  requiredMark() {
+    return html`<span aria-hidden="true"> *</span><span class="sr-only"> (${this.requiredLabel})</span>`;
+  }
+  renderInput(name, label, options) {
+    const error = this.errors[name];
+    return html`<div class="field" part="field">
+      <label class="label" part="label" for="cf-${name}">${label}${options.required ? this.requiredMark() : nothing}</label>
+      <input
+        class="input"
+        part="input"
+        id="cf-${name}"
+        name=${name}
+        type=${options.type}
+        autocomplete=${options.autocomplete}
+        inputmode=${options.inputmode ?? nothing}
+        placeholder=${options.placeholder || nothing}
+        ?required=${options.required}
+        aria-invalid=${error ? "true" : "false"}
+        aria-describedby=${error ? `cf-${name}-error` : nothing}
+      />
+      ${error ? html`<p class="error" part="error" id="cf-${name}-error">${error}</p>` : nothing}
+    </div>`;
+  }
+  /** Not `renderOptions`: LitElement already has that instance property. */
+  renderChoices(topics, selected) {
+    return topics.map(
+      (topic) => html`<option value=${topic.value} ?selected=${topic.value === selected}>${topic.label}</option>`
+    );
+  }
+  renderTopic(groups, selected) {
+    const error = this.errors.topic;
+    return html`<div class="field full" part="field">
+      <label class="label" part="label" for="cf-topic">${this.topicLabel}${this.requiredMark()}</label>
+      <select
+        class="input select"
+        part="input"
+        id="cf-topic"
+        name="topic"
+        required
+        aria-invalid=${error ? "true" : "false"}
+        aria-describedby=${error ? "cf-topic-error" : nothing}
+      >
+        <option value="" disabled ?selected=${selected === ""}>${this.topicPlaceholder}</option>
+        ${groups.map(
+      (group) => group.group === void 0 ? this.renderChoices(group.topics, selected) : html`<optgroup label=${group.group}>${this.renderChoices(group.topics, selected)}</optgroup>`
+    )}
+      </select>
+      ${error ? html`<p class="error" part="error" id="cf-topic-error">${error}</p>` : nothing}
+    </div>`;
+  }
+  renderMessage() {
+    const error = this.errors.message;
+    const max = CONTACT_LIMITS.messageMax;
+    const over = this.messageLength > max;
+    const showCounter = this.messageLength >= max * COUNTER_SHOW_RATIO;
+    const describedBy = [showCounter ? "cf-message-count" : "", error ? "cf-message-error" : ""].filter(Boolean).join(" ");
+    return html`<div class="field full" part="field">
+      <label class="label" part="label" for="cf-message">${this.messageLabel}${this.requiredMark()}</label>
+      <textarea
+        class="input"
+        part="input"
+        id="cf-message"
+        name="message"
+        rows="6"
+        placeholder=${this.messagePlaceholder || nothing}
+        required
+        aria-invalid=${error ? "true" : "false"}
+        aria-describedby=${describedBy || nothing}
+        @input=${this.onMessageInput}
+      ></textarea>
+      <p class="sr-only" id="cf-message-live" aria-live="polite">${this.counterAnnouncement}</p>
+      ${showCounter ? html`<p class="counter ${over ? "over" : ""}" id="cf-message-count" aria-hidden="true">
+            ${fillTemplate(this.messageCounter, { count: this.messageLength, max })}
+          </p>` : nothing}
+      ${error ? html`<p class="error" part="error" id="cf-message-error">${error}</p>` : nothing}
+    </div>`;
+  }
+  renderConsent() {
+    const error = this.errors.consent;
+    return html`<div class="field full" part="field">
+      <label class="consent" part="consent">
+        <input
+          type="checkbox"
+          id="cf-consent"
+          name="consent"
+          required
+          aria-invalid=${error ? "true" : "false"}
+          aria-describedby=${error ? "cf-consent-error" : nothing}
+        />
+        <span>${this.consentLabel}${this.requiredMark()}</span>
+      </label>
+      ${error ? html`<p class="error" part="error" id="cf-consent-error">${error}</p>` : nothing}
+    </div>`;
+  }
+  render() {
+    const preselect = this.preselect;
+    const topics = this.topicList;
+    const aboutTopic = preselect.fromQuery ? topics.find((item) => item.value === preselect.value) : void 0;
+    const sending = this.sending;
+    const outcome = this.outcome;
+    return html`
+      <div class="live" role="status">
+        ${outcome ? html`<div class="success" part="success">
+              <span class="success-icon" aria-hidden="true">${SUCCESS_ICON}</span>
+              <p class="success-text">
+                ${this.sentNote}${outcome.reference ? html` ${this.referenceLabel} <strong class="reference">${outcome.reference}</strong>` : nothing}
+              </p>
+            </div>` : nothing}
+      </div>
+      <div class="alert ${this.alertText ? "has-text" : ""}" part="alert" role="alert">${this.renderAlertText()}</div>
+      <form
+        part="form"
+        novalidate
+        aria-busy=${sending ? "true" : "false"}
+        aria-describedby=${this.requiredNote ? "cf-required-note" : nothing}
+        @submit=${this.onSubmit}
+      >
+        ${this.requiredNote ? html`<p class="required-note" part="required-note" id="cf-required-note">${this.requiredNote}</p>` : nothing}
+        ${this.renderSummary()}
+        <p class="sr-only" aria-live="polite">${this.failingFields().length < ERROR_SUMMARY_MIN ? this.errorSummaryText() : ""}</p>
+        ${aboutTopic ? html`<p class="about"><span class="pill" part="about">${this.aboutLabel} ${aboutTopic.label}</span></p>` : nothing}
+        <div class="grid">
+          ${this.renderInput("name", this.nameLabel, {
+      type: "text",
+      autocomplete: "name",
+      placeholder: this.namePlaceholder,
+      required: true
+    })}
+          ${this.renderInput("email", this.emailLabel, {
+      type: "email",
+      autocomplete: "email",
+      placeholder: this.emailPlaceholder,
+      required: true
+    })}
+          ${this.renderInput("company", this.companyLabel, {
+      type: "text",
+      autocomplete: "organization",
+      placeholder: this.companyPlaceholder,
+      required: true
+    })}
+          ${this.showPhone ? this.renderInput("phone", this.phoneLabel, { type: "tel", autocomplete: "tel", inputmode: "tel", required: false }) : nothing}
+          ${this.renderTopic(groupTopics(topics), preselect.value)}
+        </div>
+        ${this.renderMessage()}
+        ${this.renderConsent()}
+        ${this.privacyNote ? html`<p class="privacy">${this.privacyNote} <a href=${this.privacyHref}>${this.privacyLinkLabel}</a></p>` : nothing}
+        <div class="hp" aria-hidden="true" inert>
+          <input type="text" name="website" tabindex="-1" autocomplete="off" aria-hidden="true" />
+        </div>
+        <button class="submit" part="submit" type="submit" ?disabled=${sending}>
+          ${sending ? this.sendingLabel : this.submitLabel}
+        </button>
+      </form>
+    `;
+  }
+};
+ContactForm.styles = css`
+    ${controlBaseStyles}
+
+    :host {
+      display: block;
+      box-sizing: border-box;
+      ${fontFamilyStyles}
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    form {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      margin: 0;
+      min-width: 0;
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+      gap: 16px;
+    }
+
+    .full {
+      grid-column: 1 / -1;
+    }
+
+    @media (min-width: 560px) {
+      .grid {
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      }
+    }
+
+    .field {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      min-width: 0;
+    }
+
+    /* Text uses the theme's own colour tokens (they swap in dark themes). The --st-cms-text* tokens are fixed
+       light-surface colours and would be unreadable on a dark surface. */
+    .label {
+      font-size: 14px;
+      font-weight: var(--st-font-weight-semibold);
+      color: var(--st-color-text-strong);
+    }
+
+    .input {
+      width: 100%;
+      min-height: 44px;
+      padding: 10px 14px;
+      border: 1px solid var(--st-color-border, var(--st-cms-primary-200));
+      border-radius: 12px;
+      background: var(--st-color-surface);
+      color: var(--st-color-text-strong);
+      /* 16px stops iOS zooming into the field. */
+      font: inherit;
+      font-size: 16px;
+    }
+
+    /* Browsers dim the placeholder; the muted text token is already 4.5:1 on the surface in both themes. */
+    .input::placeholder {
+      color: var(--st-color-text-muted);
+      opacity: 1;
+    }
+
+    .select {
+      appearance: auto;
+    }
+
+    .required-note {
+      margin: 0;
+      font-size: 14px;
+      color: var(--st-color-text);
+    }
+
+    .summary {
+      margin: 0;
+      padding: 14px 16px;
+      border: 1px solid var(--st-color-danger);
+      border-radius: 12px;
+      background: var(--st-color-danger-subtle);
+      color: var(--st-color-danger-text);
+      font-size: 14px;
+      line-height: 1.5;
+    }
+
+    .summary:focus-visible {
+      outline: 2px solid var(--st-cms-brand-azure);
+      outline-offset: 2px;
+    }
+
+    .summary-title {
+      margin: 0 0 6px;
+      font-weight: var(--st-font-weight-semibold);
+    }
+
+    .summary ul {
+      margin: 0;
+      padding-left: 20px;
+    }
+
+    .summary a,
+    .alert a {
+      color: inherit;
+      font-weight: var(--st-font-weight-semibold);
+      text-decoration: underline;
+    }
+
+    textarea.input {
+      min-height: 144px;
+      resize: vertical;
+    }
+
+    .input:focus-visible {
+      outline: 2px solid var(--st-cms-brand-azure);
+      outline-offset: 2px;
+    }
+
+    .input[aria-invalid='true'] {
+      border-color: var(--st-color-danger);
+      box-shadow: inset 0 0 0 1px var(--st-color-danger);
+    }
+
+    .counter {
+      margin: 0;
+      align-self: flex-end;
+      font-size: 12px;
+      color: var(--st-color-text-muted);
+    }
+
+    .counter.over {
+      color: var(--st-color-danger-text);
+      font-weight: var(--st-font-weight-semibold);
+    }
+
+    .error {
+      margin: 0;
+      font-size: 13px;
+      line-height: 1.4;
+      color: var(--st-color-danger-text);
+    }
+
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      margin: -1px;
+      padding: 0;
+      overflow: hidden;
+      clip: rect(0 0 0 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    /* Off-screen, not display:none: the browser still fills it in, a person and a screen reader do not see it. */
+    .hp {
+      position: absolute;
+      left: -10000px;
+      top: auto;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+    }
+
+    .about {
+      margin: 0;
+    }
+
+    .pill {
+      display: inline-flex;
+      align-items: center;
+      min-height: 32px;
+      padding: 4px 12px;
+      border-radius: 9999px;
+      background: var(--st-color-subtle, var(--st-cms-surface-soft));
+      color: var(--st-color-text-strong);
+      font-size: 13px;
+      font-weight: var(--st-font-weight-semibold);
+    }
+
+    .consent {
+      display: flex;
+      align-items: flex-start;
+      gap: 10px;
+      min-height: 44px;
+      font-size: 14px;
+      line-height: 1.5;
+      color: var(--st-color-text);
+      cursor: pointer;
+    }
+
+    .consent input {
+      flex: none;
+      width: 20px;
+      height: 20px;
+      margin: 2px 0 0;
+      accent-color: var(--st-cms-brand-navy);
+    }
+
+    .privacy {
+      margin: 0;
+      font-size: 13px;
+      line-height: 1.5;
+      color: var(--st-color-text);
+    }
+
+    .privacy a {
+      color: var(--st-color-text-strong);
+      font-weight: var(--st-font-weight-semibold);
+      text-decoration: underline;
+    }
+
+    .submit {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      min-height: 48px;
+      padding: 0 24px;
+      border: 0;
+      border-radius: 9999px;
+      background: var(--st-cms-brand-navy);
+      color: var(--st-cms-on-dark);
+      font: inherit;
+      font-size: 16px;
+      font-weight: var(--st-font-weight-semibold);
+      cursor: pointer;
+      transition: opacity 150ms ease;
+    }
+
+    .submit:hover:not(:disabled) {
+      opacity: 0.92;
+    }
+
+    .submit:disabled {
+      opacity: 0.6;
+      cursor: progress;
+    }
+
+    .submit:focus-visible {
+      outline: 2px solid var(--st-cms-brand-azure);
+      outline-offset: 2px;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .submit {
+        transition: none;
+      }
+    }
+
+    .success {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      margin-bottom: 16px;
+      padding: 16px 18px;
+      border-radius: 16px;
+      background: var(--st-color-subtle, var(--st-cms-surface-soft));
+      color: var(--st-color-text-strong);
+    }
+
+    .success-icon {
+      flex: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      border-radius: 9999px;
+      background: var(--st-cms-highlight);
+      color: var(--st-cms-navy);
+    }
+
+    .success-icon svg {
+      width: 18px;
+      height: 18px;
+    }
+
+    .success-text {
+      margin: 0;
+      font-size: 15px;
+      line-height: 1.6;
+    }
+
+    .reference {
+      font-weight: var(--st-font-weight-bold);
+    }
+
+    .alert {
+      margin: 0;
+    }
+
+    .alert.has-text {
+      margin-bottom: 16px;
+      padding: 12px 14px;
+      border-radius: 12px;
+      background: var(--st-color-danger-subtle);
+      color: var(--st-color-danger-text);
+      font-size: 14px;
+      line-height: 1.5;
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], ContactForm.prototype, "endpoint", 2);
+__decorateClass([
+  property({ attribute: "topics", converter: { fromAttribute: parseTopicsAttribute } })
+], ContactForm.prototype, "topics", 2);
+__decorateClass([
+  property({ type: String, attribute: "default-topic" })
+], ContactForm.prototype, "defaultTopic", 2);
+__decorateClass([
+  property({ attribute: "show-phone", converter: { fromAttribute: (value) => value !== "false" } })
+], ContactForm.prototype, "showPhone", 2);
+__decorateClass([
+  property({ type: String })
+], ContactForm.prototype, "locale", 2);
+__decorateClass([
+  property({ type: String })
+], ContactForm.prototype, "page", 2);
+__decorateClass([
+  property({ type: String, attribute: "name-label" })
+], ContactForm.prototype, "nameLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "email-label" })
+], ContactForm.prototype, "emailLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "company-label" })
+], ContactForm.prototype, "companyLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "phone-label" })
+], ContactForm.prototype, "phoneLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "topic-label" })
+], ContactForm.prototype, "topicLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "topic-placeholder" })
+], ContactForm.prototype, "topicPlaceholder", 2);
+__decorateClass([
+  property({ type: String, attribute: "message-label" })
+], ContactForm.prototype, "messageLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "name-placeholder" })
+], ContactForm.prototype, "namePlaceholder", 2);
+__decorateClass([
+  property({ type: String, attribute: "email-placeholder" })
+], ContactForm.prototype, "emailPlaceholder", 2);
+__decorateClass([
+  property({ type: String, attribute: "company-placeholder" })
+], ContactForm.prototype, "companyPlaceholder", 2);
+__decorateClass([
+  property({ type: String, attribute: "message-placeholder" })
+], ContactForm.prototype, "messagePlaceholder", 2);
+__decorateClass([
+  property({ type: String, attribute: "message-counter" })
+], ContactForm.prototype, "messageCounter", 2);
+__decorateClass([
+  property({ type: String, attribute: "submit-label" })
+], ContactForm.prototype, "submitLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "sending-label" })
+], ContactForm.prototype, "sendingLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "required-label" })
+], ContactForm.prototype, "requiredLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "about-label" })
+], ContactForm.prototype, "aboutLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "consent-label" })
+], ContactForm.prototype, "consentLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "privacy-note" })
+], ContactForm.prototype, "privacyNote", 2);
+__decorateClass([
+  property({ type: String, attribute: "privacy-link-label" })
+], ContactForm.prototype, "privacyLinkLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "privacy-href" })
+], ContactForm.prototype, "privacyHref", 2);
+__decorateClass([
+  property({ type: String, attribute: "sent-note" })
+], ContactForm.prototype, "sentNote", 2);
+__decorateClass([
+  property({ type: String, attribute: "reference-label" })
+], ContactForm.prototype, "referenceLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "error-note" })
+], ContactForm.prototype, "errorNote", 2);
+__decorateClass([
+  property({ type: String, attribute: "rate-limited-note" })
+], ContactForm.prototype, "rateLimitedNote", 2);
+__decorateClass([
+  property({ type: String, attribute: "rate-limited-generic-note" })
+], ContactForm.prototype, "rateLimitedGenericNote", 2);
+__decorateClass([
+  property({ type: String, attribute: "error-summary" })
+], ContactForm.prototype, "errorSummary", 2);
+__decorateClass([
+  property({ type: String, attribute: "error-summary-one" })
+], ContactForm.prototype, "errorSummaryOne", 2);
+__decorateClass([
+  property({ type: String, attribute: "required-note" })
+], ContactForm.prototype, "requiredNote", 2);
+__decorateClass([
+  property({ type: String })
+], ContactForm.prototype, "mailto", 2);
+__decorateClass([
+  property({ attribute: false })
+], ContactForm.prototype, "errorMessages", 2);
+__decorateClass([
+  state()
+], ContactForm.prototype, "errors", 2);
+__decorateClass([
+  state()
+], ContactForm.prototype, "alertText", 2);
+__decorateClass([
+  state()
+], ContactForm.prototype, "alertOwn", 2);
+__decorateClass([
+  state()
+], ContactForm.prototype, "outcome", 2);
+__decorateClass([
+  state()
+], ContactForm.prototype, "sending", 2);
+__decorateClass([
+  state()
+], ContactForm.prototype, "messageLength", 2);
+__decorateClass([
+  state()
+], ContactForm.prototype, "counterAnnouncement", 2);
+__decorateClass([
+  query(".submit")
+], ContactForm.prototype, "submitEl", 2);
+ContactForm = __decorateClass([
+  customElement("st-contact-form")
+], ContactForm);
+
+export {
+  CONTACT_FORM_SUBMIT_EVENT,
+  CONTACT_FORM_SENT_EVENT,
+  CONTACT_FORM_ERROR_EVENT,
+  ContactForm
+};
+//# sourceMappingURL=chunk-V4R7PYP5.js.map