domain0 0.3.0 → 0.3.2

package/dist/{sdk-BUD9fOZT.mjs → sdk-IuBNH4cL.mjs}

@@ -447,13 +447,13 @@ const domain0Styles = `
   padding: 0;
   background: var(--domain0-bg);
   color: var(--domain0-text);
-  box-shadow: 0 1.5rem 4rem -2rem rgb(10 10 10 / 0.28);
+  box-shadow: 0 2rem 6rem -2.75rem rgb(28 24 92 / 0.32);
   overflow: auto;
 }
 
 .domain0-dialog::backdrop {
   background: var(--domain0-backdrop);
-  backdrop-filter: blur(0.375rem);
+  backdrop-filter: blur(0.75rem);
 }
 
 .domain0-dialog--inline {
@@ -466,19 +466,37 @@ const domain0Styles = `
 }
 
 .domain0-panel {
-  display: grid;
-  gap: 1.125rem;
-  min-height: 30rem;
-  align-content: center;
-  padding: clamp(1.75rem, 5vw, 2.5rem);
+  position: relative;
+  display: flex;
+  min-height: min(43.25rem, calc(100dvh - 2rem));
+  flex-direction: column;
+  align-items: center;
+  padding: clamp(1.5rem, 5vw, 2.5rem);
   min-width: 0;
 }
 
+.domain0-brand-mark {
+  display: inline-flex;
+  width: 3.25rem;
+  height: 3.25rem;
+  flex: 0 0 auto;
+  margin-top: 2.5rem;
+  color: var(--domain0-text);
+}
+
+.domain0-brand-mark svg { width: 100%; height: 100%; }
+.domain0-panel:has(.domain0-provider-chip) > .domain0-brand-mark { display: none; }
+
 .domain0-company-identity {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 0.625rem;
   min-width: 0;
+  min-height: 2.5rem;
+  margin-top: 1.25rem;
+  border: 0.0625rem solid var(--domain0-hairline);
+  border-radius: 999px;
+  padding: 0.35rem 0.85rem 0.35rem 0.4rem;
   justify-content: center;
 }
 
@@ -498,10 +516,18 @@ const domain0Styles = `
   min-width: 0;
   margin: 0;
   overflow-wrap: anywhere;
+  font-size: 0.875rem;
   font-weight: var(--domain0-bold-font-weight);
 }
 
-.domain0-content { display: grid; min-width: 0; gap: 1rem; }
+.domain0-content {
+  display: grid;
+  width: 100%;
+  max-width: 33.75rem;
+  min-width: 0;
+  gap: 0.875rem;
+  margin-top: 1.75rem;
+}
 
 .domain0-heading, .domain0-subheading, .domain0-copy, .domain0-status, .domain0-error, .domain0-list {
   margin: 0;
@@ -509,7 +535,9 @@ const domain0Styles = `
 }
 
 .domain0-heading {
-  font-size: clamp(1.5rem, 5vw, 2.125rem);
+  max-width: 34rem;
+  margin-top: 0.75rem;
+  font-size: clamp(1.75rem, 5vw, 2.125rem);
   line-height: 1.18;
   letter-spacing: -0.03em;
   font-weight: var(--domain0-bold-font-weight);
@@ -517,6 +545,7 @@ const domain0Styles = `
 }
 .domain0-subheading { font-size: 1rem; line-height: 1.35; }
 .domain0-copy {
+  max-width: 29.375rem;
   color: var(--domain0-muted);
   font-size: 1.0625rem;
   line-height: 1.65;
@@ -526,6 +555,8 @@ const domain0Styles = `
    full sentence, so it keeps normal casing and tracking. Uppercase at 0.16em is
    for short eyebrow labels, not something you have to read. */
 .domain0-status {
+  max-width: 29.375rem;
+  margin-top: 0.75rem;
   color: var(--domain0-muted);
   font-family: var(--domain0-mono-font-family);
   font-size: 0.8125rem;
@@ -534,7 +565,22 @@ const domain0Styles = `
 .domain0-panel > .domain0-copy,
 .domain0-panel > .domain0-status,
 .domain0-panel > .domain0-error { text-align: center; }
-.domain0-error { color: var(--domain0-danger); font-weight: var(--domain0-bold-font-weight); }
+.domain0-panel > .domain0-copy { margin-top: 0.75rem; }
+.domain0-error {
+  width: 100%;
+  max-width: 33.75rem;
+  margin-top: 1rem;
+  border: 0.0625rem solid color-mix(in srgb, var(--domain0-danger) 28%, transparent);
+  border-radius: var(--domain0-input-radius);
+  padding: 0.875rem 1rem;
+  background: color-mix(in srgb, var(--domain0-danger) 8%, var(--domain0-bg));
+  color: var(--domain0-danger);
+  font-size: 0.875rem;
+  font-weight: var(--domain0-bold-font-weight);
+  line-height: 1.5;
+}
+.domain0-error:empty { display: none; }
+.domain0-error-retry { margin-inline: auto; }
 
 .domain0-form { display: grid; gap: 0.875rem; }
 .domain0-label { font-weight: var(--domain0-bold-font-weight); }
@@ -622,8 +668,10 @@ const domain0Styles = `
   gap: 0.5rem;
   border: 0.0625rem solid color-mix(in srgb, var(--domain0-primary) 15%, transparent);
   border-radius: 999px;
-  padding: 0.35rem 0.75rem 0.35rem 0.375rem;
-  background: color-mix(in srgb, var(--domain0-primary) 7%, var(--domain0-bg));
+  min-height: 3.125rem;
+  margin-top: 3.375rem;
+  padding: 0.55rem 1.125rem 0.55rem 0.55rem;
+  background: var(--domain0-bg);
   font-size: 0.875rem;
   font-weight: var(--domain0-bold-font-weight);
   box-shadow: 0 0.25rem 1rem -0.75rem rgb(0 0 0 / 0.35);
@@ -642,15 +690,56 @@ const domain0Styles = `
 
 .domain0-actions {
   display: flex;
+  width: 100%;
+  max-width: 33.75rem;
   flex-wrap: wrap;
   justify-content: flex-end;
   gap: 0.75rem;
+  margin-top: 1.25rem;
+}
+
+.domain0-panel > .domain0-actions > .domain0-button--secondary:last-child:not(.domain0-button--completion) {
+  position: absolute;
+  top: 1.75rem;
+  right: 1.75rem;
+  width: 2.25rem;
+  min-height: 2.25rem;
+  border: 0;
+  padding: 0;
+  background: color-mix(in srgb, var(--domain0-text) 6%, var(--domain0-bg));
+  color: transparent;
+  font-size: 0;
+}
+
+.domain0-panel > .domain0-actions > .domain0-button--secondary:last-child:not(.domain0-button--completion)::before,
+.domain0-panel > .domain0-actions > .domain0-button--secondary:last-child:not(.domain0-button--completion)::after {
+  position: absolute;
+  width: 0.875rem;
+  height: 0.1rem;
+  border-radius: 999px;
+  background: var(--domain0-text);
+  content: '';
+}
+
+.domain0-panel > .domain0-actions > .domain0-button--secondary:last-child:not(.domain0-button--completion)::before {
+  transform: rotate(45deg);
+}
+
+.domain0-panel > .domain0-actions > .domain0-button--secondary:last-child:not(.domain0-button--completion)::after {
+  transform: rotate(-45deg);
+}
+
+.domain0-button--completion {
+  width: 100%;
+  border-color: var(--domain0-primary);
+  background: var(--domain0-primary);
+  color: var(--domain0-primary-text);
 }
 
 /* The machine state as a short label above the heading: the same eyebrow role
    the mono labels play across the brand. connectionState() keeps it short. */
 .domain0-eyebrow {
-  margin: 0;
+  margin: 1.75rem 0 0;
   color: var(--domain0-muted);
   font-family: var(--domain0-mono-font-family);
   font-size: 0.6875rem;
@@ -674,21 +763,42 @@ const domain0Styles = `
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0;
-  padding-top: 0.5rem;
+  gap: 0.4375rem;
+  margin-top: auto;
+  padding-top: 2rem;
   color: var(--domain0-muted);
 }
 
+.domain0-footer__label {
+  font-family: var(--domain0-mono-font-family);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
 .domain0-footer__name {
   font-size: 0.9375rem;
   font-weight: var(--domain0-bold-font-weight);
   letter-spacing: -0.045em;
 }
 
-.domain0-footer__mark { display: inline-flex; position: relative; top: 1px; }
+.domain0-footer__mark {
+  display: inline-flex;
+  position: relative;
+  top: 1px;
+  width: 0.75rem;
+  height: 0.75rem;
+}
+.domain0-footer__mark svg { width: 100%; height: 100%; }
 
 @media (max-width: 24rem) {
   .domain0-dialog { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
+  .domain0-panel {
+    min-height: calc(100dvh - 1rem);
+    padding: 1.25rem;
+  }
+  .domain0-brand-mark { margin-top: 3.5rem; }
   .domain0-actions { align-items: stretch; flex-direction: column-reverse; }
   .domain0-button { width: 100%; }
 }
@@ -2340,6 +2450,7 @@ function mountDomain0Connect(options) {
 	dialog.setAttribute("aria-labelledby", headingId);
 	if (presentation === "inline") dialog.hidden = true;
 	const panel = element(document, "div", "domain0-panel");
+	const brandMark = renderDomain0Mark(document);
 	const companyIdentity = renderCompanyIdentity(document, applicationName, whiteLabel);
 	const heading = element(document, "h2", "domain0-heading");
 	heading.id = headingId;
@@ -2361,15 +2472,19 @@ function mountDomain0Connect(options) {
 	const closeButton = element(document, "button", "domain0-button domain0-button--secondary");
 	closeButton.type = "button";
 	closeButton.textContent = messages.close;
+	closeButton.setAttribute("aria-label", messages.close);
 	closeButton.hidden = presentation === "inline";
 	actions.append(cancelButton, closeButton);
+	panel.append(brandMark);
 	if (companyIdentity !== void 0) panel.append(companyIdentity);
 	const footer = element(document, "div", "domain0-footer");
 	footer.setAttribute("aria-hidden", "true");
-	footer.innerHTML = "<span class=\"domain0-footer__mark\" aria-hidden=\"true\"><svg viewBox=\"0 0 100 100\" fill=\"none\" width=\"12\" height=\"12\"><path d=\"M66.34 17.92A36 36 0 0 0 17.92 66.34\" stroke=\"currentColor\" stroke-width=\"15\"/><path d=\"M33.66 82.08A36 36 0 0 0 82.08 33.66\" stroke=\"currentColor\" stroke-width=\"15\"/><path d=\"M16.77 83.23 83.23 16.77\" stroke=\"currentColor\" stroke-width=\"12\"/></svg></span>";
+	const footerLabel = element(document, "span", "domain0-footer__label");
+	footerLabel.textContent = "Secured by";
 	const footerName = element(document, "span", "domain0-footer__name");
 	footerName.textContent = "domain";
-	footer.prepend(footerName);
+	const footerMark = renderDomain0Mark(document, "domain0-footer__mark");
+	footer.append(footerLabel, footerName, footerMark);
 	panel.append(eyebrow, heading, explanation, status, error, content, actions, footer);
 	dialog.append(panel);
 	root.append(style, trigger, dialog);
@@ -2610,7 +2725,9 @@ function mountDomain0Connect(options) {
 		eyebrow.textContent = connection === void 0 ? "" : localizer.connectionState(connection.state);
 		content.replaceChildren();
 		heading.textContent = messages.headingConnectDomain;
+		closeButton.classList.remove("domain0-button--completion");
 		closeButton.textContent = messages.close;
+		closeButton.setAttribute("aria-label", messages.close);
 		if (connection === void 0) {
 			cancelButton.hidden = true;
 			return;
@@ -2636,6 +2753,8 @@ function mountDomain0Connect(options) {
 			heading.textContent = interpolateWhiteLabelCopy(localizedCopy(whiteLabel.copy.successTitle, localizer.locale) ?? messages.headingConnectDomain, { "{DOMAIN}": connection.intent.domain });
 			message.textContent = interpolateWhiteLabelCopy(localizedCopy(whiteLabel.copy.successDescription, localizer.locale) ?? messages.successDescription("{DOMAIN}"), { "{DOMAIN}": connection.intent.domain });
 			closeButton.textContent = localizedCopy(whiteLabel.copy.successButton, localizer.locale) ?? messages.close;
+			closeButton.setAttribute("aria-label", closeButton.textContent);
+			closeButton.classList.add("domain0-button--completion");
 			content.append(message);
 			renderDkimGuidance(connection);
 			emitRenderedConnection(connection, "active");
@@ -3532,6 +3651,11 @@ function mountDomain0Connect(options) {
 		const message = cause instanceof Domain0Error ? localizer.apiError(cause.response.error.code) : cause instanceof Domain0TransportError ? messages.transportError : cause instanceof Domain0ProtocolError ? messages.protocolError : cause instanceof Error ? cause.message : messages.unknownError;
 		error.textContent = messages.errorPrefix(message);
 		status.textContent = "";
+		if (connection === void 0) {
+			const retry = actionButton(messages.refreshConnection, async () => open());
+			retry.classList.add("domain0-error-retry");
+			content.replaceChildren(retry);
+		}
 	}
 	function clearError() {
 		error.textContent = "";
@@ -3552,6 +3676,12 @@ function mountDomain0Connect(options) {
 		}
 	};
 }
+function renderDomain0Mark(document, className = "domain0-brand-mark") {
+	const mark = element(document, "span", className);
+	mark.setAttribute("aria-hidden", "true");
+	mark.innerHTML = "<svg viewBox=\"0 0 100 100\" fill=\"none\"><path d=\"M66.34 17.92A36 36 0 0 0 17.92 66.34\" stroke=\"currentColor\" stroke-width=\"15\"/><path d=\"M33.66 82.08A36 36 0 0 0 82.08 33.66\" stroke=\"currentColor\" stroke-width=\"15\"/><path d=\"M16.77 83.23 83.23 16.77\" stroke=\"currentColor\" stroke-width=\"12\"/></svg>";
+	return mark;
+}
 function renderCompanyIdentity(document, applicationName, whiteLabel) {
 	const logoUrl = whiteLabel.logo;
 	const showLogo = logoUrl !== void 0 && !whiteLabel.hideCompanyLogo;
@@ -4054,4 +4184,4 @@ const domain0 = createDomain0();
 //#endregion
 export { mountDomain0Connect as a, localizedCopy as c, createDomain0Client as d, createSharedFlowUrl as f, mountDomain0ConnectionFlow as i, applyWhiteLabel as l, domain0 as n, createDomain0Localizer as o, loadSharedFlow as p, mountDomain0SharedFlow as r, domain0TranslatedLocales as s, createDomain0 as t, interpolateWhiteLabelCopy as u };
 
-//# sourceMappingURL=sdk-BUD9fOZT.mjs.map
+//# sourceMappingURL=sdk-IuBNH4cL.mjs.map