kanto-ds 1.7.0 → 1.9.0

package/dist/components/blocks/kt-auth-form/kt-auth-form.js

@@ -0,0 +1,368 @@
+import { css as g, html as o, nothing as u } from "lit";
+import { property as l, state as f, query as b } from "lit/decorators.js";
+import { K as h, d as v } from "../../../chunks/kt-element-DvWtPQ1Y.js";
+import { e as m } from "../../../chunks/events-r51msXNf.js";
+import { h as k } from "../../../chunks/heading-DsnZsfg-.js";
+import "../../core/kt-button/kt-button.js";
+import "../../feedback/kt-alert/kt-alert.js";
+import "../../forms/kt-checkbox/kt-checkbox.js";
+import "../../forms/kt-input/kt-input.js";
+import "../../forms/kt-label-input/kt-label-input.js";
+import "../../forms/kt-otp-input/kt-otp-input.js";
+var w = Object.defineProperty, a = (p, t, i, s) => {
+  for (var e = void 0, d = p.length - 1, n; d >= 0; d--)
+    (n = p[d]) && (e = n(t, i, e) || e);
+  return e && w(t, i, e), e;
+};
+const y = {
+  signInHeading: "Sign in",
+  signInLead: "Welcome back. Sign in to carry on.",
+  signUpHeading: "Create an account",
+  signUpLead: "It takes a minute, and no card.",
+  forgotHeading: "Reset your password",
+  forgotLead: "We will email you a link to choose a new one.",
+  codeHeading: "Check your phone",
+  codeLead: "Enter the code we sent you.",
+  name: "Name",
+  email: "Email",
+  password: "Password",
+  code: "Verification code",
+  remember: "Keep me signed in",
+  forgotLink: "Forgot password?",
+  signIn: "Sign in",
+  signUp: "Create account",
+  sendLink: "Send the link",
+  verify: "Verify",
+  toSignUp: "No account yet?",
+  toSignUpLink: "Create an account",
+  toSignIn: "Already have an account?",
+  toSignInLink: "Sign in",
+  or: "or",
+  sentHeading: "Check your email",
+  sentLead: "If an account uses that address, a link to reset its password is on its way.",
+  nameMissing: "Enter your name.",
+  emailInvalid: "Enter an email address, like name@example.com.",
+  passwordMissing: "Enter your password.",
+  passwordShort: (p) => `Use at least ${p} characters.`,
+  codeMissing: "Enter the whole code.",
+  failed: "That did not work. Try again in a moment."
+}, $ = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+class r extends h {
+  constructor() {
+    super(...arguments), this.mode = "sign-in", this.providers = [], this.remember = !1, this.passwordMin = 8, this.headingLevel = 1, this.plain = !1, this.error = "", this.texts = {}, this.sent = !1;
+  }
+  static {
+    this.styles = [
+      h.styles,
+      g`
+      :host {
+        display: block;
+        max-width: 420px;
+      }
+
+      .auth {
+        display: grid;
+        gap: var(--gap-card);
+        padding: calc(var(--padding-card) * 1.5);
+        background: var(--surface-card);
+        border: var(--border-width) solid var(--border-subtle);
+        border-radius: var(--border-radius-card);
+      }
+      :host([plain]) .auth {
+        padding: 0;
+        background: none;
+        border: none;
+      }
+
+      .logo:empty {
+        display: none;
+      }
+      .head {
+        display: grid;
+        gap: 6px;
+      }
+      .heading {
+        margin: 0;
+        color: var(--text-body);
+        font: var(--font-title-h4);
+      }
+      .lead {
+        margin: 0;
+        color: var(--text-muted);
+        font: var(--font-normal-regular);
+      }
+
+      .providers {
+        display: grid;
+        gap: var(--gap-button);
+      }
+      .or {
+        display: flex;
+        gap: var(--gap-form);
+        align-items: center;
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+      }
+      .or::before,
+      .or::after {
+        flex: 1;
+        height: var(--border-width);
+        background: var(--border-subtle);
+        content: '';
+      }
+
+      form {
+        display: grid;
+        gap: var(--gap-form);
+        margin: 0;
+      }
+      .row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--gap-button);
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .link {
+        padding: 0;
+        color: var(--color-primary-text);
+        font: var(--font-normal-medium);
+        background: none;
+        border: none;
+        border-radius: var(--radius-sub-menu);
+        cursor: pointer;
+      }
+      .link:hover {
+        text-decoration: underline;
+      }
+      .link:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: 2px;
+      }
+
+      .switch {
+        margin: 0;
+        color: var(--text-muted);
+        font: var(--font-normal-regular);
+        text-align: center;
+      }
+      .footer {
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+        text-align: center;
+      }
+      .footer:empty {
+        display: none;
+      }
+    `
+    ];
+  }
+  get t() {
+    return { ...y, ...this.texts };
+  }
+  /** Moves the form to another mode, as its links do. */
+  goTo(t) {
+    t !== this.mode && (this.mode = t, this.error = "", this.sent = !1, m(this, "kt-mode", { mode: t }));
+  }
+  field(t) {
+    return this.shadowRoot?.querySelector(`kt-input[name="${t}"]`) ?? null;
+  }
+  /** Checks what can be checked before sending; marks each field it finds wanting. */
+  check() {
+    const t = this.t, i = [];
+    this.mode === "sign-up" && i.push(["name", (e) => e.trim() ? "" : t.nameMissing]), this.mode !== "code" && i.push(["email", (e) => $.test(e.trim()) ? "" : t.emailInvalid]), this.mode === "sign-in" && i.push(["password", (e) => e ? "" : t.passwordMissing]), this.mode === "sign-up" && i.push([
+      "password",
+      (e) => e ? e.length < this.passwordMin ? t.passwordShort(this.passwordMin) : "" : t.passwordMissing
+    ]);
+    let s = null;
+    for (const [e, d] of i) {
+      const n = this.field(e);
+      n && (n.error = d(n.value ?? ""), n.error && !s && (s = n));
+    }
+    if (this.mode === "code") {
+      const e = this.shadowRoot?.querySelector("kt-otp-input");
+      e && (e.error = e.value.length < e.length ? t.codeMissing : "", e.error && (s = e));
+    }
+    return s?.focus(), !s;
+  }
+  values() {
+    const t = (i) => this.field(i)?.value;
+    switch (this.mode) {
+      case "sign-up":
+        return {
+          name: t("name") ?? "",
+          email: t("email") ?? "",
+          password: t("password") ?? ""
+        };
+      case "forgot":
+        return { email: t("email") ?? "" };
+      case "code":
+        return { code: this.shadowRoot?.querySelector("kt-otp-input")?.value ?? "" };
+      default: {
+        const i = this.shadowRoot?.querySelector(
+          "kt-checkbox"
+        );
+        return {
+          email: t("email") ?? "",
+          password: t("password") ?? "",
+          ...i ? { remember: i.checked } : {}
+        };
+      }
+    }
+  }
+  /** Sends the form, as its button does, once what it holds checks out. */
+  submit() {
+    if (!this.check()) return;
+    this.error = "";
+    let t = null;
+    if (m(this, "kt-submit", {
+      mode: this.mode,
+      values: this.values(),
+      wait: (e) => {
+        t = e;
+      }
+    }), !t) return;
+    const i = t, s = this.mode;
+    this.button.run(() => i).then(
+      () => {
+        s === "forgot" && this.mode === "forgot" && (this.sent = !0);
+      },
+      (e) => {
+        this.error = e instanceof Error && e.message ? e.message : this.t.failed;
+      }
+    );
+  }
+  onSubmit(t) {
+    t.preventDefault(), this.submit();
+  }
+  /** Enter in a field sends, as in any form: the native field is inside the kt-input. */
+  onKeyDown(t) {
+    t.key !== "Enter" || t.isComposing || t.composedPath()[0].localName !== "input" || (t.preventDefault(), this.submit());
+  }
+  input(t, i, s, e) {
+    return o`<kt-label-input label=${i}>
+      <kt-input
+        name=${t}
+        type=${s}
+        autocomplete=${e}
+        @kt-input=${(d) => d.currentTarget.error = ""}
+      ></kt-input>
+    </kt-label-input>`;
+  }
+  fields() {
+    const t = this.t;
+    switch (this.mode) {
+      case "sign-up":
+        return o`${this.input("name", t.name, "text", "name")}
+        ${this.input("email", t.email, "email", "email")}
+        ${this.input("password", t.password, "password", "new-password")}`;
+      case "forgot":
+        return this.input("email", t.email, "email", "email");
+      case "code":
+        return o`<kt-otp-input
+          label=${t.code}
+          @kt-complete=${() => this.submit()}
+        ></kt-otp-input>`;
+      default:
+        return o`${this.input("email", t.email, "email", "email")}
+          ${this.input("password", t.password, "password", "current-password")}
+          <div class="row">
+            ${this.remember ? o`<kt-checkbox>${t.remember}</kt-checkbox>` : o`<span></span>`}
+            <button type="button" class="link" @click=${() => this.goTo("forgot")}>
+              ${t.forgotLink}
+            </button>
+          </div>`;
+    }
+  }
+  head(t, i) {
+    return o`<div class="head">
+      ${k(this.headingLevel, t, "heading", 1)}
+      <p class="lead">${i}</p>
+    </div>`;
+  }
+  render() {
+    const t = this.t, i = {
+      "sign-in": [t.signInHeading, t.signInLead, t.signIn],
+      "sign-up": [t.signUpHeading, t.signUpLead, t.signUp],
+      forgot: [t.forgotHeading, t.forgotLead, t.sendLink],
+      code: [t.codeHeading, t.codeLead, t.verify]
+    }, [s, e, d] = i[this.mode], n = this.providers.length > 0 && (this.mode === "sign-in" || this.mode === "sign-up");
+    return this.sent ? o`<section part="base" class="auth">
+        <div class="logo"><slot name="logo"></slot></div>
+        ${this.head(t.sentHeading, t.sentLead)}
+        <p class="switch">
+          <button type="button" class="link" @click=${() => this.goTo("sign-in")}>
+            ${t.toSignInLink}
+          </button>
+        </p>
+      </section>` : o`<section part="base" class="auth">
+      <div class="logo"><slot name="logo"></slot></div>
+      ${this.head(s, e)}
+      ${this.error ? o`<kt-alert variant="danger" description=${this.error}></kt-alert>` : u}
+      ${n ? o`<div class="providers">
+                ${this.providers.map(
+      (c) => o`<kt-button
+                      variant="secondary"
+                      full-width
+                      icon=${c.icon || u}
+                      @click=${() => m(this, "kt-provider", { id: c.id })}
+                      >${c.label}</kt-button
+                    >`
+    )}
+              </div>
+              <div class="or">${t.or}</div>` : u}
+      <form part="form" novalidate @submit=${this.onSubmit} @keydown=${this.onKeyDown}>
+        ${this.fields()}
+        <kt-button class="submit" full-width @click=${() => this.submit()}>${d}</kt-button>
+      </form>
+      ${this.mode === "sign-in" ? o`<p class="switch">
+              ${t.toSignUp}
+              <button type="button" class="link" @click=${() => this.goTo("sign-up")}>
+                ${t.toSignUpLink}
+              </button>
+            </p>` : o`<p class="switch">
+              ${this.mode === "sign-up" ? t.toSignIn : u}
+              <button type="button" class="link" @click=${() => this.goTo("sign-in")}>
+                ${t.toSignInLink}
+              </button>
+            </p>`}
+      <div class="footer"><slot name="footer"></slot></div>
+    </section>`;
+  }
+}
+a([
+  l({ type: String, reflect: !0 })
+], r.prototype, "mode");
+a([
+  l({ attribute: !1 })
+], r.prototype, "providers");
+a([
+  l({ type: Boolean })
+], r.prototype, "remember");
+a([
+  l({ type: Number, attribute: "password-min" })
+], r.prototype, "passwordMin");
+a([
+  l({ type: Number, attribute: "heading-level" })
+], r.prototype, "headingLevel");
+a([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "plain");
+a([
+  l({ type: String })
+], r.prototype, "error");
+a([
+  l({ attribute: !1 })
+], r.prototype, "texts");
+a([
+  f()
+], r.prototype, "sent");
+a([
+  b("kt-button.submit")
+], r.prototype, "button");
+v("kt-auth-form", r);
+export {
+  r as KtAuthForm
+};
+//# sourceMappingURL=kt-auth-form.js.map

package/dist/components/blocks/kt-auth-form/kt-auth-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-auth-form.js","sources":["../../../../src/components/blocks/kt-auth-form/kt-auth-form.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { heading } from '#internal/heading';\nimport '../../core/kt-button/kt-button.js';\nimport '../../feedback/kt-alert/kt-alert.js';\nimport '../../forms/kt-checkbox/kt-checkbox.js';\nimport '../../forms/kt-input/kt-input.js';\nimport '../../forms/kt-label-input/kt-label-input.js';\nimport '../../forms/kt-otp-input/kt-otp-input.js';\nimport type { KtButton } from '../../core/kt-button/kt-button.js';\n\nexport type KtAuthMode = 'sign-in' | 'sign-up' | 'forgot' | 'code';\n\nexport interface KtAuthProvider {\n  readonly id: string;\n  /** What the button says: \"Continue with GitHub\". */\n  readonly label: string;\n  /** A Lucide icon name, registered by the page. */\n  readonly icon?: string;\n}\n\n/** Every word the form says, in English until given others. */\nexport interface KtAuthTexts {\n  readonly signInHeading: string;\n  readonly signInLead: string;\n  readonly signUpHeading: string;\n  readonly signUpLead: string;\n  readonly forgotHeading: string;\n  readonly forgotLead: string;\n  readonly codeHeading: string;\n  readonly codeLead: string;\n  readonly name: string;\n  readonly email: string;\n  readonly password: string;\n  readonly code: string;\n  readonly remember: string;\n  readonly forgotLink: string;\n  readonly signIn: string;\n  readonly signUp: string;\n  readonly sendLink: string;\n  readonly verify: string;\n  readonly toSignUp: string;\n  readonly toSignUpLink: string;\n  readonly toSignIn: string;\n  readonly toSignInLink: string;\n  readonly or: string;\n  readonly sentHeading: string;\n  readonly sentLead: string;\n  readonly nameMissing: string;\n  readonly emailInvalid: string;\n  readonly passwordMissing: string;\n  readonly passwordShort: (least: number) => string;\n  readonly codeMissing: string;\n  readonly failed: string;\n}\n\nconst TEXTS: KtAuthTexts = {\n  signInHeading: 'Sign in',\n  signInLead: 'Welcome back. Sign in to carry on.',\n  signUpHeading: 'Create an account',\n  signUpLead: 'It takes a minute, and no card.',\n  forgotHeading: 'Reset your password',\n  forgotLead: 'We will email you a link to choose a new one.',\n  codeHeading: 'Check your phone',\n  codeLead: 'Enter the code we sent you.',\n  name: 'Name',\n  email: 'Email',\n  password: 'Password',\n  code: 'Verification code',\n  remember: 'Keep me signed in',\n  forgotLink: 'Forgot password?',\n  signIn: 'Sign in',\n  signUp: 'Create account',\n  sendLink: 'Send the link',\n  verify: 'Verify',\n  toSignUp: 'No account yet?',\n  toSignUpLink: 'Create an account',\n  toSignIn: 'Already have an account?',\n  toSignInLink: 'Sign in',\n  or: 'or',\n  sentHeading: 'Check your email',\n  sentLead: 'If an account uses that address, a link to reset its password is on its way.',\n  nameMissing: 'Enter your name.',\n  emailInvalid: 'Enter an email address, like name@example.com.',\n  passwordMissing: 'Enter your password.',\n  passwordShort: (least) => `Use at least ${least} characters.`,\n  codeMissing: 'Enter the whole code.',\n  failed: 'That did not work. Try again in a moment.',\n};\n\n/** What `kt-submit` carries: the mode, what was written, and a way to wait for the sending. */\nexport interface KtAuthSubmitDetail {\n  readonly mode: KtAuthMode;\n  readonly values: {\n    readonly name?: string;\n    readonly email?: string;\n    readonly password?: string;\n    readonly code?: string;\n    readonly remember?: boolean;\n  };\n  /**\n   * Hand it the request: the button runs it, and if it rejects, its message\n   * is shown above the fields.\n   */\n  readonly wait: (sending: Promise<unknown>) => void;\n}\n\ntype Field = HTMLElement & { value: string; error: string };\n\nconst EMAIL = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n\n/**\n * The way into a product: signing in, creating an account, resetting a\n * password, entering a code — one block, four modes.\n *\n * It checks what it can before sending — an email that is one, a password, a\n * name, a whole code — and says so on the field. Then `kt-submit` carries the\n * mode and the values, and `wait(promise)`: the button runs the request, and\n * if it rejects, its message is shown above the fields. A reset that succeeds\n * says the link is on its way.\n *\n * Sign-in providers go in `providers`; the links between modes move the form\n * itself and fire `kt-mode`. Every word is in `texts`, English until given\n * others.\n *\n * @element kt-auth-form\n *\n * @slot logo - Above the heading: the product's mark.\n * @slot footer - Under the form: the terms, a privacy note.\n *\n * @csspart base - The block.\n * @csspart form - The `<form>`.\n *\n * @fires kt-submit - The form was sent. `detail: { mode, values, wait(promise) }`.\n * @fires kt-mode - The form moved to another mode. `detail: { mode }`.\n * @fires kt-provider - A provider was chosen. `detail: { id }`.\n *\n * @example\n * ```html\n * <kt-auth-form remember></kt-auth-form>\n * <script>\n *   form.addEventListener('kt-submit', (e) => e.detail.wait(auth.signIn(e.detail.values)));\n * </script>\n * ```\n */\nexport class KtAuthForm extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n        max-width: 420px;\n      }\n\n      .auth {\n        display: grid;\n        gap: var(--gap-card);\n        padding: calc(var(--padding-card) * 1.5);\n        background: var(--surface-card);\n        border: var(--border-width) solid var(--border-subtle);\n        border-radius: var(--border-radius-card);\n      }\n      :host([plain]) .auth {\n        padding: 0;\n        background: none;\n        border: none;\n      }\n\n      .logo:empty {\n        display: none;\n      }\n      .head {\n        display: grid;\n        gap: 6px;\n      }\n      .heading {\n        margin: 0;\n        color: var(--text-body);\n        font: var(--font-title-h4);\n      }\n      .lead {\n        margin: 0;\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n      }\n\n      .providers {\n        display: grid;\n        gap: var(--gap-button);\n      }\n      .or {\n        display: flex;\n        gap: var(--gap-form);\n        align-items: center;\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n      }\n      .or::before,\n      .or::after {\n        flex: 1;\n        height: var(--border-width);\n        background: var(--border-subtle);\n        content: '';\n      }\n\n      form {\n        display: grid;\n        gap: var(--gap-form);\n        margin: 0;\n      }\n      .row {\n        display: flex;\n        flex-wrap: wrap;\n        gap: var(--gap-button);\n        align-items: center;\n        justify-content: space-between;\n      }\n\n      .link {\n        padding: 0;\n        color: var(--color-primary-text);\n        font: var(--font-normal-medium);\n        background: none;\n        border: none;\n        border-radius: var(--radius-sub-menu);\n        cursor: pointer;\n      }\n      .link:hover {\n        text-decoration: underline;\n      }\n      .link:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 2px;\n      }\n\n      .switch {\n        margin: 0;\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n        text-align: center;\n      }\n      .footer {\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n        text-align: center;\n      }\n      .footer:empty {\n        display: none;\n      }\n    `,\n  ];\n\n  /** `sign-in`, `sign-up`, `forgot` or `code`. */\n  @property({ type: String, reflect: true })\n  mode: KtAuthMode = 'sign-in';\n\n  /** Sign-in providers, above the fields. Set as a property. */\n  @property({ attribute: false })\n  providers: readonly KtAuthProvider[] = [];\n\n  /** Shows \"Keep me signed in\" when signing in. */\n  @property({ type: Boolean })\n  remember = false;\n\n  /** The shortest password a new account may choose. */\n  @property({ type: Number, attribute: 'password-min' })\n  passwordMin = 8;\n\n  /** The heading's level, 1 to 6: 1 when the form is the page. */\n  @property({ type: Number, attribute: 'heading-level' })\n  headingLevel = 1;\n\n  /** Drops the card around it, for a page that frames it already. */\n  @property({ type: Boolean, reflect: true })\n  plain = false;\n\n  /** An error to show above the fields; a failed sending sets it. */\n  @property({ type: String })\n  error = '';\n\n  /** The words, English until given others: `form.texts = { signInHeading: 'Connexion' }`. */\n  @property({ attribute: false })\n  texts: Partial<KtAuthTexts> = {};\n\n  /** A reset link was sent: the form says so instead of asking again. */\n  @state() private sent = false;\n\n  @query('kt-button.submit') private button!: KtButton;\n\n  private get t(): KtAuthTexts {\n    return { ...TEXTS, ...this.texts };\n  }\n\n  /** Moves the form to another mode, as its links do. */\n  goTo(mode: KtAuthMode): void {\n    if (mode === this.mode) return;\n    this.mode = mode;\n    this.error = '';\n    this.sent = false;\n    emit(this, 'kt-mode', { mode });\n  }\n\n  private field(name: string): Field | null {\n    return this.shadowRoot?.querySelector<Field>(`kt-input[name=\"${name}\"]`) ?? null;\n  }\n\n  /** Checks what can be checked before sending; marks each field it finds wanting. */\n  private check(): boolean {\n    const t = this.t;\n    const rules: [string, (value: string) => string][] = [];\n    if (this.mode === 'sign-up') rules.push(['name', (v) => (v.trim() ? '' : t.nameMissing)]);\n    if (this.mode !== 'code') {\n      rules.push(['email', (v) => (EMAIL.test(v.trim()) ? '' : t.emailInvalid)]);\n    }\n    if (this.mode === 'sign-in') rules.push(['password', (v) => (v ? '' : t.passwordMissing)]);\n    if (this.mode === 'sign-up') {\n      rules.push([\n        'password',\n        (v) =>\n          !v\n            ? t.passwordMissing\n            : v.length < this.passwordMin\n              ? t.passwordShort(this.passwordMin)\n              : '',\n      ]);\n    }\n    let first: Field | null = null;\n    for (const [name, rule] of rules) {\n      const field = this.field(name);\n      if (!field) continue;\n      field.error = rule(field.value ?? '');\n      if (field.error && !first) first = field;\n    }\n    if (this.mode === 'code') {\n      const otp = this.shadowRoot?.querySelector<Field & { length: number }>('kt-otp-input');\n      if (otp) {\n        otp.error = otp.value.length < otp.length ? t.codeMissing : '';\n        if (otp.error) first = otp;\n      }\n    }\n    first?.focus();\n    return !first;\n  }\n\n  private values(): KtAuthSubmitDetail['values'] {\n    const read = (name: string) => this.field(name)?.value;\n    switch (this.mode) {\n      case 'sign-up':\n        return {\n          name: read('name') ?? '',\n          email: read('email') ?? '',\n          password: read('password') ?? '',\n        };\n      case 'forgot':\n        return { email: read('email') ?? '' };\n      case 'code':\n        return { code: this.shadowRoot?.querySelector<Field>('kt-otp-input')?.value ?? '' };\n      default: {\n        const remember = this.shadowRoot?.querySelector<HTMLElement & { checked: boolean }>(\n          'kt-checkbox',\n        );\n        return {\n          email: read('email') ?? '',\n          password: read('password') ?? '',\n          ...(remember ? { remember: remember.checked } : {}),\n        };\n      }\n    }\n  }\n\n  /** Sends the form, as its button does, once what it holds checks out. */\n  submit(): void {\n    if (!this.check()) return;\n    this.error = '';\n    let sending: Promise<unknown> | null = null;\n    emit<KtAuthSubmitDetail>(this, 'kt-submit', {\n      mode: this.mode,\n      values: this.values(),\n      wait: (promise) => {\n        sending = promise;\n      },\n    });\n    if (!sending) return;\n    const waited: Promise<unknown> = sending;\n    const mode = this.mode;\n    void this.button\n      .run(() => waited)\n      .then(\n        () => {\n          if (mode === 'forgot' && this.mode === 'forgot') this.sent = true;\n        },\n        (reason: unknown) => {\n          this.error = reason instanceof Error && reason.message ? reason.message : this.t.failed;\n        },\n      );\n  }\n\n  private onSubmit(event: Event): void {\n    event.preventDefault();\n    this.submit();\n  }\n\n  /** Enter in a field sends, as in any form: the native field is inside the kt-input. */\n  private onKeyDown(event: KeyboardEvent): void {\n    if (event.key !== 'Enter' || event.isComposing) return;\n    const from = event.composedPath()[0] as Element;\n    if (from.localName !== 'input') return;\n    event.preventDefault();\n    this.submit();\n  }\n\n  private input(name: string, label: string, type: string, autocomplete: string): TemplateResult {\n    return html`<kt-label-input label=${label}>\n      <kt-input\n        name=${name}\n        type=${type}\n        autocomplete=${autocomplete}\n        @kt-input=${(event: Event) => ((event.currentTarget as Field).error = '')}\n      ></kt-input>\n    </kt-label-input>`;\n  }\n\n  private fields(): TemplateResult {\n    const t = this.t;\n    switch (this.mode) {\n      case 'sign-up':\n        return html`${this.input('name', t.name, 'text', 'name')}\n        ${this.input('email', t.email, 'email', 'email')}\n        ${this.input('password', t.password, 'password', 'new-password')}`;\n      case 'forgot':\n        return this.input('email', t.email, 'email', 'email');\n      case 'code':\n        return html`<kt-otp-input\n          label=${t.code}\n          @kt-complete=${() => this.submit()}\n        ></kt-otp-input>`;\n      default:\n        return html`${this.input('email', t.email, 'email', 'email')}\n          ${this.input('password', t.password, 'password', 'current-password')}\n          <div class=\"row\">\n            ${this.remember ? html`<kt-checkbox>${t.remember}</kt-checkbox>` : html`<span></span>`}\n            <button type=\"button\" class=\"link\" @click=${() => this.goTo('forgot')}>\n              ${t.forgotLink}\n            </button>\n          </div>`;\n    }\n  }\n\n  private head(title: string, lead: string): TemplateResult {\n    return html`<div class=\"head\">\n      ${heading(this.headingLevel, title, 'heading', 1)}\n      <p class=\"lead\">${lead}</p>\n    </div>`;\n  }\n\n  override render(): TemplateResult {\n    const t = this.t;\n    const words: Record<KtAuthMode, readonly [string, string, string]> = {\n      'sign-in': [t.signInHeading, t.signInLead, t.signIn],\n      'sign-up': [t.signUpHeading, t.signUpLead, t.signUp],\n      forgot: [t.forgotHeading, t.forgotLead, t.sendLink],\n      code: [t.codeHeading, t.codeLead, t.verify],\n    };\n    const [title, lead, send] = words[this.mode];\n    const providers =\n      this.providers.length > 0 && (this.mode === 'sign-in' || this.mode === 'sign-up');\n\n    if (this.sent) {\n      return html`<section part=\"base\" class=\"auth\">\n        <div class=\"logo\"><slot name=\"logo\"></slot></div>\n        ${this.head(t.sentHeading, t.sentLead)}\n        <p class=\"switch\">\n          <button type=\"button\" class=\"link\" @click=${() => this.goTo('sign-in')}>\n            ${t.toSignInLink}\n          </button>\n        </p>\n      </section>`;\n    }\n\n    return html`<section part=\"base\" class=\"auth\">\n      <div class=\"logo\"><slot name=\"logo\"></slot></div>\n      ${this.head(title, lead)}\n      ${\n        this.error\n          ? html`<kt-alert variant=\"danger\" description=${this.error}></kt-alert>`\n          : nothing\n      }\n      ${\n        providers\n          ? html`<div class=\"providers\">\n                ${this.providers.map(\n                  (provider) =>\n                    html`<kt-button\n                      variant=\"secondary\"\n                      full-width\n                      icon=${provider.icon || nothing}\n                      @click=${() => emit(this, 'kt-provider', { id: provider.id })}\n                      >${provider.label}</kt-button\n                    >`,\n                )}\n              </div>\n              <div class=\"or\">${t.or}</div>`\n          : nothing\n      }\n      <form part=\"form\" novalidate @submit=${this.onSubmit} @keydown=${this.onKeyDown}>\n        ${this.fields()}\n        <kt-button class=\"submit\" full-width @click=${() => this.submit()}>${send}</kt-button>\n      </form>\n      ${\n        this.mode === 'sign-in'\n          ? html`<p class=\"switch\">\n              ${t.toSignUp}\n              <button type=\"button\" class=\"link\" @click=${() => this.goTo('sign-up')}>\n                ${t.toSignUpLink}\n              </button>\n            </p>`\n          : html`<p class=\"switch\">\n              ${this.mode === 'sign-up' ? t.toSignIn : nothing}\n              <button type=\"button\" class=\"link\" @click=${() => this.goTo('sign-in')}>\n                ${t.toSignInLink}\n              </button>\n            </p>`\n      }\n      <div class=\"footer\"><slot name=\"footer\"></slot></div>\n    </section>`;\n  }\n}\n\ndefineElement('kt-auth-form', KtAuthForm);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-auth-form': KtAuthForm;\n  }\n}\n"],"names":["TEXTS","least","EMAIL","KtAuthForm","KtElement","css","mode","emit","name","rules","v","first","rule","field","otp","read","remember","sending","promise","waited","reason","event","label","type","autocomplete","html","title","lead","heading","words","send","providers","nothing","provider","__decorateClass","property","state","query","defineElement"],"mappings":"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"}

package/dist/components/blocks/kt-blog-post/kt-blog-post.d.ts

@@ -0,0 +1,75 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-avatar/kt-avatar.js';
+import '../../core/kt-icon/kt-icon.js';
+/** Every word the post says, in English until given others. */
+export interface KtBlogPostTexts {
+    readonly back: string;
+    readonly minRead: (minutes: number) => string;
+}
+/**
+ * A post, set to be read: its title, who wrote it and when, a cover, and the
+ * body in a measure an eye can follow.
+ *
+ * The body is the default slot — paragraphs, headings, lists, quotes, code,
+ * figures — set as prose. The reading time is counted from it, unless given.
+ *
+ * @element kt-blog-post
+ *
+ * @slot - The body.
+ * @slot cover - Under the header: an image, a figure with its caption.
+ * @slot end - After the body: tags, sharing, the next post.
+ *
+ * @csspart base - The article.
+ * @csspart header - The title, the lead and who wrote it.
+ * @csspart body - The body's column.
+ *
+ * @cssproperty --kt-post-measure - The column's width. 700px.
+ *
+ * @example
+ * ```html
+ * <kt-blog-post heading="Closing the month in a day" author="Ada Park" date="2026-09-14" back-href="/blog">
+ *   <img slot="cover" src="/covers/close.jpg" alt="" />
+ *   <p>For years, the first week of the month was the close…</p>
+ * </kt-blog-post>
+ * ```
+ */
+export declare class KtBlogPost extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The post's title. */
+    heading: string;
+    /** A line under the title: what the post is about. */
+    lead: string;
+    /** When it was published: `2026-09-14`. */
+    date: string;
+    /** Who wrote it. */
+    author: string;
+    /** Their role: "CFO, Northwind". */
+    authorRole: string;
+    /** Their photo's URL; without one, their initials. */
+    avatar: string;
+    /** Minutes to read it. Counted from the body when 0. */
+    readingTime: number;
+    /** A few words over the title. */
+    tags: readonly string[];
+    /** Where All posts leads; no link without it. */
+    backHref: string;
+    /** The locale the date is written in; the page's language when empty. */
+    locale: string;
+    /** The title's level: 1, since the post is the page. */
+    headingLevel: number;
+    /** The words, English until given others. */
+    texts: Partial<KtBlogPostTexts>;
+    private counted;
+    private filled;
+    private readonly headingId;
+    firstUpdated(): void;
+    private readSlots;
+    private meta;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-blog-post': KtBlogPost;
+    }
+}