kanto-ds 1.7.0 → 1.9.0

package/dist/components/blocks/kt-logo-cloud/kt-logo-cloud.js

@@ -0,0 +1,100 @@
+import { css as p, nothing as c, html as d } from "lit";
+import { property as a } from "lit/decorators.js";
+import { K as g, d as h } from "../../../chunks/kt-element-DvWtPQ1Y.js";
+import { b as f, a as u } from "../../../chunks/block-Cci-Kff_.js";
+import { h as v } from "../../../chunks/heading-DsnZsfg-.js";
+var y = Object.defineProperty, o = (r, l, n, m) => {
+  for (var t = void 0, i = r.length - 1, s; i >= 0; i--)
+    (s = r[i]) && (t = s(l, n, t) || t);
+  return t && y(l, n, t), t;
+};
+class e extends g {
+  constructor() {
+    super(...arguments), this.heading = "", this.align = "center", this.colour = !1, this.headingLevel = 2, this.headingId = f("kt-logo-cloud");
+  }
+  static {
+    this.styles = [
+      g.styles,
+      u,
+      p`
+      :host {
+        --kt-logo-height: 28px;
+      }
+      .block {
+        gap: calc(var(--gap-card) * 1.5);
+      }
+
+      .caption {
+        margin: 0;
+        color: var(--text-muted);
+        font: var(--font-normal-regular);
+        text-align: center;
+        text-wrap: balance;
+      }
+      :host([align='start']) .caption {
+        text-align: start;
+      }
+
+      .logos {
+        display: flex;
+        flex-wrap: wrap;
+        gap: calc(var(--gap-card) * 1.5) calc(var(--gap-card) * 3);
+        align-items: center;
+        justify-content: center;
+      }
+      :host([align='start']) .logos {
+        justify-content: flex-start;
+      }
+      ::slotted(*) {
+        display: block;
+        width: auto;
+        max-width: 160px;
+        height: var(--kt-logo-height);
+        color: var(--text-muted);
+        filter: grayscale(1);
+        opacity: 0.72;
+        transition:
+          filter var(--duration-instant),
+          opacity var(--duration-instant);
+      }
+      ::slotted(*:hover) {
+        filter: none;
+        opacity: 1;
+      }
+      :host([colour]) ::slotted(*) {
+        filter: none;
+        opacity: 1;
+      }
+    `
+    ];
+  }
+  render() {
+    return d`<section
+      part="base"
+      class="block"
+      aria-labelledby=${this.heading ? this.headingId : c}
+    >
+      ${this.heading ? d`<div id=${this.headingId}>
+              ${v(this.headingLevel, this.heading, "caption", 2)}
+            </div>` : c}
+      <div part="logos" class="logos"><slot></slot></div>
+    </section>`;
+  }
+}
+o([
+  a({ type: String })
+], e.prototype, "heading");
+o([
+  a({ type: String, reflect: !0 })
+], e.prototype, "align");
+o([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "colour");
+o([
+  a({ type: Number, attribute: "heading-level" })
+], e.prototype, "headingLevel");
+h("kt-logo-cloud", e);
+export {
+  e as KtLogoCloud
+};
+//# sourceMappingURL=kt-logo-cloud.js.map

package/dist/components/blocks/kt-logo-cloud/kt-logo-cloud.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-logo-cloud.js","sources":["../../../../src/components/blocks/kt-logo-cloud/kt-logo-cloud.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { blockId, blockStyles } from '#internal/block';\nimport { heading } from '#internal/heading';\n\n/**\n * Who uses it, in their logos: a line of marks under a caption — \"Trusted by\n * finance teams at\".\n *\n * The logos are the default slot: images or inline SVGs, each with its\n * company's name as `alt` or `aria-label`. They are drawn at one height, grey\n * until hovered, so no brand shouts over another; `colour` keeps their\n * colours.\n *\n * @element kt-logo-cloud\n *\n * @slot - The logos.\n *\n * @csspart base - The section.\n * @csspart logos - The row of logos.\n *\n * @cssproperty --kt-logo-height - The logos' height. 28px.\n *\n * @example\n * ```html\n * <kt-logo-cloud heading=\"Trusted by finance teams at\">\n *   <img src=\"/logos/northwind.svg\" alt=\"Northwind\" />\n *   <img src=\"/logos/kiln.svg\" alt=\"Kiln\" />\n * </kt-logo-cloud>\n * ```\n */\nexport class KtLogoCloud extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    blockStyles,\n    css`\n      :host {\n        --kt-logo-height: 28px;\n      }\n      .block {\n        gap: calc(var(--gap-card) * 1.5);\n      }\n\n      .caption {\n        margin: 0;\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n        text-align: center;\n        text-wrap: balance;\n      }\n      :host([align='start']) .caption {\n        text-align: start;\n      }\n\n      .logos {\n        display: flex;\n        flex-wrap: wrap;\n        gap: calc(var(--gap-card) * 1.5) calc(var(--gap-card) * 3);\n        align-items: center;\n        justify-content: center;\n      }\n      :host([align='start']) .logos {\n        justify-content: flex-start;\n      }\n      ::slotted(*) {\n        display: block;\n        width: auto;\n        max-width: 160px;\n        height: var(--kt-logo-height);\n        color: var(--text-muted);\n        filter: grayscale(1);\n        opacity: 0.72;\n        transition:\n          filter var(--duration-instant),\n          opacity var(--duration-instant);\n      }\n      ::slotted(*:hover) {\n        filter: none;\n        opacity: 1;\n      }\n      :host([colour]) ::slotted(*) {\n        filter: none;\n        opacity: 1;\n      }\n    `,\n  ];\n\n  /** The caption over the logos: \"Trusted by finance teams at\". */\n  @property({ type: String })\n  heading = '';\n\n  /** `center` or `start`. */\n  @property({ type: String, reflect: true })\n  align: 'center' | 'start' = 'center';\n\n  /** Keeps the logos' colours, rather than grey until hovered. */\n  @property({ type: Boolean, reflect: true })\n  colour = false;\n\n  /** The caption's level: a heading, set small. */\n  @property({ type: Number, attribute: 'heading-level' })\n  headingLevel = 2;\n\n  private readonly headingId = blockId('kt-logo-cloud');\n\n  override render(): TemplateResult {\n    return html`<section\n      part=\"base\"\n      class=\"block\"\n      aria-labelledby=${this.heading ? this.headingId : nothing}\n    >\n      ${\n        this.heading\n          ? html`<div id=${this.headingId}>\n              ${heading(this.headingLevel, this.heading, 'caption', 2)}\n            </div>`\n          : nothing\n      }\n      <div part=\"logos\" class=\"logos\"><slot></slot></div>\n    </section>`;\n  }\n}\n\ndefineElement('kt-logo-cloud', KtLogoCloud);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-logo-cloud': KtLogoCloud;\n  }\n}\n"],"names":["KtLogoCloud","KtElement","blockId","blockStyles","css","html","nothing","heading","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;AAgCO,MAAMA,UAAoBC,EAAU;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GA0DL,KAAA,UAAU,IAIV,KAAA,QAA4B,UAI5B,KAAA,SAAS,IAIT,KAAA,eAAe,GAEf,KAAiB,YAAYC,EAAQ,eAAe;AAAA,EAAA;AAAA,EAvEpD,OAAA;AAAA,SAAgB,SAAS;AAAA,MACvBD,EAAU;AAAA,MACVE;AAAA,MACAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAkDF;AAAA,EAoBS,SAAyB;AAChC,WAAOC;AAAA;AAAA;AAAA,wBAGa,KAAK,UAAU,KAAK,YAAYC,CAAO;AAAA;AAAA,QAGvD,KAAK,UACDD,YAAe,KAAK,SAAS;AAAA,gBACzBE,EAAQ,KAAK,cAAc,KAAK,SAAS,WAAW,CAAC,CAAC;AAAA,sBAE1DD,CACN;AAAA;AAAA;AAAA,EAGJ;AACF;AAhCEE,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAzDfT,EA0DX,WAAA,SAAA;AAIAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA7D9BT,EA8DX,WAAA,OAAA;AAIAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAjE/BT,EAkEX,WAAA,QAAA;AAIAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB;AAAA,GArE3CT,EAsEX,WAAA,cAAA;AAsBFU,EAAc,iBAAiBV,CAAW;"}

package/dist/components/blocks/kt-newsletter/kt-newsletter.d.ts

@@ -0,0 +1,85 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-button/kt-button.js';
+import '../../core/kt-icon/kt-icon.js';
+import '../../forms/kt-input/kt-input.js';
+export type KtNewsletterVariant = 'panel' | 'plain';
+export type KtNewsletterLayout = 'stacked' | 'inline';
+/** What `kt-subscribe` carries: the address, and a way to wait for the sending. */
+export interface KtSubscribeDetail {
+    readonly email: string;
+    /** Hand it the request: the button runs it; if it rejects, its message shows on the field. */
+    readonly wait: (sending: Promise<unknown>) => void;
+}
+/** Every word the block says, in English until given others. */
+export interface KtNewsletterTexts {
+    readonly email: string;
+    readonly placeholder: string;
+    readonly subscribe: string;
+    readonly invalid: string;
+    readonly failed: string;
+    readonly done: string;
+}
+/**
+ * A way to hear from you again: a heading, a line, an email field and the
+ * button that subscribes it.
+ *
+ * It checks the address before sending, then fires `kt-subscribe` with it and
+ * `wait(promise)`: the button runs the request, and the block thanks the
+ * reader once it resolves — or shows why not on the field. Without a wait it
+ * thanks at once.
+ *
+ * @element kt-newsletter
+ *
+ * @slot note - Under the field: how often, and that unsubscribing is one click.
+ *
+ * @csspart base - The section.
+ * @csspart panel - The panel.
+ *
+ * @fires kt-subscribe - An address was sent. `detail: { email, wait(promise) }`.
+ *
+ * @example
+ * ```html
+ * <kt-newsletter heading="Notes, monthly" lead="What we shipped, and what we learned.">
+ *   <span slot="note">One email a month. Unsubscribe in one click.</span>
+ * </kt-newsletter>
+ * <script>
+ *   letter.addEventListener('kt-subscribe', (e) => e.detail.wait(api.subscribe(e.detail.email)));
+ * </script>
+ * ```
+ */
+export declare class KtNewsletter extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    heading: string;
+    lead: string;
+    /** `center` or `start`. */
+    align: 'center' | 'start';
+    /** `panel`: on a tinted panel. `plain`: on the page. */
+    variant: KtNewsletterVariant;
+    /** `stacked`: the field under the words. `inline`: beside them, where there is room. */
+    layout: KtNewsletterLayout;
+    /** The address went through: the field gives way to the thanks. */
+    subscribed: boolean;
+    /** The heading's level. */
+    headingLevel: number;
+    /** The words, English until given others. */
+    texts: Partial<KtNewsletterTexts>;
+    private hasNote;
+    private field;
+    private button;
+    private readonly headingId;
+    private get t();
+    firstUpdated(): void;
+    private readNote;
+    /** Sends the address, as the button does, once it is one. */
+    subscribe(): void;
+    private onSubmit;
+    /** Enter in the field sends, as in any form: the native field is inside the kt-input. */
+    private onKeyDown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-newsletter': KtNewsletter;
+    }
+}

package/dist/components/blocks/kt-newsletter/kt-newsletter.js

@@ -0,0 +1,247 @@
+import { css as u, nothing as h, html as p } from "lit";
+import { property as r, state as f, query as m } from "lit/decorators.js";
+import { K as c, d as b } from "../../../chunks/kt-element-DvWtPQ1Y.js";
+import { b as y, a as g, c as v } from "../../../chunks/block-Cci-Kff_.js";
+import { e as x } from "../../../chunks/events-r51msXNf.js";
+import { h as k } from "../../../chunks/slots-BPbIdxAJ.js";
+import "../../core/kt-button/kt-button.js";
+import "../../core/kt-icon/kt-icon.js";
+import "../../forms/kt-input/kt-input.js";
+var w = Object.defineProperty, s = (o, t, a, l) => {
+  for (var e = void 0, n = o.length - 1, d; n >= 0; n--)
+    (d = o[n]) && (e = d(t, a, e) || e);
+  return e && w(t, a, e), e;
+};
+const $ = {
+  email: "Email address",
+  placeholder: "you@example.com",
+  subscribe: "Subscribe",
+  invalid: "Enter an email address, like name@example.com.",
+  failed: "That did not go through. Try again in a moment.",
+  done: "You are in. Check your inbox to confirm."
+}, S = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+class i extends c {
+  constructor() {
+    super(...arguments), this.heading = "", this.lead = "", this.align = "center", this.variant = "panel", this.layout = "stacked", this.subscribed = !1, this.headingLevel = 2, this.texts = {}, this.hasNote = !1, this.headingId = y("kt-newsletter");
+  }
+  static {
+    this.styles = [
+      c.styles,
+      g,
+      u`
+      .panel {
+        display: grid;
+        gap: calc(var(--gap-card) * 1.5);
+        justify-items: start;
+      }
+      :host([align='center']) .panel {
+        justify-items: center;
+        text-align: center;
+      }
+      :host([variant='panel']) .panel {
+        padding: calc(var(--padding-card) * 2);
+        background-color: var(--color-primary-soft);
+        border: var(--border-width) solid var(--border-subtle);
+        border-radius: var(--border-radius-card);
+      }
+      .block-heading {
+        font: var(--font-title-h4);
+        letter-spacing: -0.01em;
+      }
+      .block-lead {
+        font-size: calc(16px * var(--text-scale, 1));
+      }
+
+      .tail {
+        display: grid;
+        gap: 10px;
+        width: 100%;
+        max-width: 460px;
+        justify-items: inherit;
+      }
+      form {
+        display: flex;
+        gap: var(--gap-button);
+        align-items: flex-start;
+        width: 100%;
+        text-align: start;
+      }
+      form kt-input {
+        flex: 1;
+        min-width: 0;
+      }
+      @container (max-width: 400px) {
+        form {
+          flex-direction: column;
+          align-items: stretch;
+        }
+      }
+
+      .done {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        color: var(--text-body);
+        font: var(--font-normal-medium);
+      }
+      /* Out of the flow while empty, but kept: a live region must be there before it speaks. */
+      .done.empty {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+      }
+      .done kt-icon {
+        color: var(--color-success-text);
+      }
+
+      .note {
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+      }
+      .note.empty,
+      [hidden] {
+        display: none;
+      }
+
+      /* Inline: the words at the start, the field at the end, where they fit. */
+      @container (min-width: 760px) {
+        :host([layout='inline']) .panel {
+          grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
+          align-items: center;
+          justify-items: stretch;
+          text-align: start;
+        }
+        :host([layout='inline']) .block-head {
+          justify-items: start;
+          margin-inline: 0;
+          text-align: start;
+        }
+        :host([layout='inline']) .tail {
+          justify-items: start;
+        }
+      }
+    `
+    ];
+  }
+  get t() {
+    return { ...$, ...this.texts };
+  }
+  firstUpdated() {
+    this.readNote();
+  }
+  readNote() {
+    this.hasNote = k(this.shadowRoot?.querySelector('slot[name="note"]'));
+  }
+  /** Sends the address, as the button does, once it is one. */
+  subscribe() {
+    const t = (this.field.value ?? "").trim();
+    if (!S.test(t)) {
+      this.field.error = this.t.invalid, this.field.focus();
+      return;
+    }
+    this.field.error = "";
+    let a = null;
+    if (x(this, "kt-subscribe", {
+      email: t,
+      wait: (e) => {
+        a = e;
+      }
+    }), !a) {
+      this.subscribed = !0;
+      return;
+    }
+    const l = a;
+    this.button.run(() => l).then(
+      () => {
+        this.subscribed = !0;
+      },
+      (e) => {
+        this.field.error = e instanceof Error && e.message ? e.message : this.t.failed;
+      }
+    );
+  }
+  onSubmit(t) {
+    t.preventDefault(), this.subscribe();
+  }
+  /** Enter in the 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.subscribe());
+  }
+  render() {
+    const t = this.t;
+    return p`<section
+      part="base"
+      class="block"
+      aria-labelledby=${this.heading ? this.headingId : h}
+    >
+      <div part="panel" class="panel">
+        ${v({ title: this.heading, lead: this.lead, level: this.headingLevel, id: this.headingId })}
+        <div class="tail">
+          <form
+            novalidate
+            ?hidden=${this.subscribed}
+            @submit=${this.onSubmit}
+            @keydown=${this.onKeyDown}
+          >
+            <kt-input
+              name="email"
+              type="email"
+              autocomplete="email"
+              label=${t.email}
+              placeholder=${t.placeholder}
+              @kt-input=${() => this.field.error = ""}
+            ></kt-input>
+            <kt-button @click=${() => this.subscribe()}>${t.subscribe}</kt-button>
+          </form>
+          <p class=${this.subscribed ? "done" : "done empty"} role="status">
+            ${this.subscribed ? p`<kt-icon name="circle-check" size="18" aria-hidden="true"></kt-icon
+                    >${t.done}` : h}
+          </p>
+          <div class=${this.hasNote ? "note" : "note empty"}>
+            <slot name="note" @slotchange=${this.readNote}></slot>
+          </div>
+        </div>
+      </div>
+    </section>`;
+  }
+}
+s([
+  r({ type: String })
+], i.prototype, "heading");
+s([
+  r({ type: String })
+], i.prototype, "lead");
+s([
+  r({ type: String, reflect: !0 })
+], i.prototype, "align");
+s([
+  r({ type: String, reflect: !0 })
+], i.prototype, "variant");
+s([
+  r({ type: String, reflect: !0 })
+], i.prototype, "layout");
+s([
+  r({ type: Boolean, reflect: !0 })
+], i.prototype, "subscribed");
+s([
+  r({ type: Number, attribute: "heading-level" })
+], i.prototype, "headingLevel");
+s([
+  r({ attribute: !1 })
+], i.prototype, "texts");
+s([
+  f()
+], i.prototype, "hasNote");
+s([
+  m("kt-input")
+], i.prototype, "field");
+s([
+  m("kt-button")
+], i.prototype, "button");
+b("kt-newsletter", i);
+export {
+  i as KtNewsletter
+};
+//# sourceMappingURL=kt-newsletter.js.map

package/dist/components/blocks/kt-newsletter/kt-newsletter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-newsletter.js","sources":["../../../../src/components/blocks/kt-newsletter/kt-newsletter.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 { blockHead, blockId, blockStyles } from '#internal/block';\nimport { emit } from '#internal/events';\nimport { hasAssignedContent } from '#internal/slots';\nimport '../../core/kt-button/kt-button.js';\nimport '../../core/kt-icon/kt-icon.js';\nimport '../../forms/kt-input/kt-input.js';\nimport type { KtButton } from '../../core/kt-button/kt-button.js';\n\nexport type KtNewsletterVariant = 'panel' | 'plain';\nexport type KtNewsletterLayout = 'stacked' | 'inline';\n\n/** What `kt-subscribe` carries: the address, and a way to wait for the sending. */\nexport interface KtSubscribeDetail {\n  readonly email: string;\n  /** Hand it the request: the button runs it; if it rejects, its message shows on the field. */\n  readonly wait: (sending: Promise<unknown>) => void;\n}\n\n/** Every word the block says, in English until given others. */\nexport interface KtNewsletterTexts {\n  readonly email: string;\n  readonly placeholder: string;\n  readonly subscribe: string;\n  readonly invalid: string;\n  readonly failed: string;\n  readonly done: string;\n}\n\nconst TEXTS: KtNewsletterTexts = {\n  email: 'Email address',\n  placeholder: 'you@example.com',\n  subscribe: 'Subscribe',\n  invalid: 'Enter an email address, like name@example.com.',\n  failed: 'That did not go through. Try again in a moment.',\n  done: 'You are in. Check your inbox to confirm.',\n};\n\nconst EMAIL = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n\ntype Field = HTMLElement & { value: string; error: string };\n\n/**\n * A way to hear from you again: a heading, a line, an email field and the\n * button that subscribes it.\n *\n * It checks the address before sending, then fires `kt-subscribe` with it and\n * `wait(promise)`: the button runs the request, and the block thanks the\n * reader once it resolves — or shows why not on the field. Without a wait it\n * thanks at once.\n *\n * @element kt-newsletter\n *\n * @slot note - Under the field: how often, and that unsubscribing is one click.\n *\n * @csspart base - The section.\n * @csspart panel - The panel.\n *\n * @fires kt-subscribe - An address was sent. `detail: { email, wait(promise) }`.\n *\n * @example\n * ```html\n * <kt-newsletter heading=\"Notes, monthly\" lead=\"What we shipped, and what we learned.\">\n *   <span slot=\"note\">One email a month. Unsubscribe in one click.</span>\n * </kt-newsletter>\n * <script>\n *   letter.addEventListener('kt-subscribe', (e) => e.detail.wait(api.subscribe(e.detail.email)));\n * </script>\n * ```\n */\nexport class KtNewsletter extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    blockStyles,\n    css`\n      .panel {\n        display: grid;\n        gap: calc(var(--gap-card) * 1.5);\n        justify-items: start;\n      }\n      :host([align='center']) .panel {\n        justify-items: center;\n        text-align: center;\n      }\n      :host([variant='panel']) .panel {\n        padding: calc(var(--padding-card) * 2);\n        background-color: var(--color-primary-soft);\n        border: var(--border-width) solid var(--border-subtle);\n        border-radius: var(--border-radius-card);\n      }\n      .block-heading {\n        font: var(--font-title-h4);\n        letter-spacing: -0.01em;\n      }\n      .block-lead {\n        font-size: calc(16px * var(--text-scale, 1));\n      }\n\n      .tail {\n        display: grid;\n        gap: 10px;\n        width: 100%;\n        max-width: 460px;\n        justify-items: inherit;\n      }\n      form {\n        display: flex;\n        gap: var(--gap-button);\n        align-items: flex-start;\n        width: 100%;\n        text-align: start;\n      }\n      form kt-input {\n        flex: 1;\n        min-width: 0;\n      }\n      @container (max-width: 400px) {\n        form {\n          flex-direction: column;\n          align-items: stretch;\n        }\n      }\n\n      .done {\n        display: flex;\n        gap: 8px;\n        align-items: center;\n        color: var(--text-body);\n        font: var(--font-normal-medium);\n      }\n      /* Out of the flow while empty, but kept: a live region must be there before it speaks. */\n      .done.empty {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        overflow: hidden;\n        clip-path: inset(50%);\n      }\n      .done kt-icon {\n        color: var(--color-success-text);\n      }\n\n      .note {\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n      }\n      .note.empty,\n      [hidden] {\n        display: none;\n      }\n\n      /* Inline: the words at the start, the field at the end, where they fit. */\n      @container (min-width: 760px) {\n        :host([layout='inline']) .panel {\n          grid-template-columns: minmax(0, 1fr) minmax(0, 420px);\n          align-items: center;\n          justify-items: stretch;\n          text-align: start;\n        }\n        :host([layout='inline']) .block-head {\n          justify-items: start;\n          margin-inline: 0;\n          text-align: start;\n        }\n        :host([layout='inline']) .tail {\n          justify-items: start;\n        }\n      }\n    `,\n  ];\n\n  @property({ type: String })\n  heading = '';\n\n  @property({ type: String })\n  lead = '';\n\n  /** `center` or `start`. */\n  @property({ type: String, reflect: true })\n  align: 'center' | 'start' = 'center';\n\n  /** `panel`: on a tinted panel. `plain`: on the page. */\n  @property({ type: String, reflect: true })\n  variant: KtNewsletterVariant = 'panel';\n\n  /** `stacked`: the field under the words. `inline`: beside them, where there is room. */\n  @property({ type: String, reflect: true })\n  layout: KtNewsletterLayout = 'stacked';\n\n  /** The address went through: the field gives way to the thanks. */\n  @property({ type: Boolean, reflect: true })\n  subscribed = false;\n\n  /** The heading's level. */\n  @property({ type: Number, attribute: 'heading-level' })\n  headingLevel = 2;\n\n  /** The words, English until given others. */\n  @property({ attribute: false })\n  texts: Partial<KtNewsletterTexts> = {};\n\n  @state() private hasNote = false;\n\n  @query('kt-input') private field!: Field;\n  @query('kt-button') private button!: KtButton;\n\n  private readonly headingId = blockId('kt-newsletter');\n\n  private get t(): KtNewsletterTexts {\n    return { ...TEXTS, ...this.texts };\n  }\n\n  override firstUpdated(): void {\n    this.readNote();\n  }\n\n  private readNote(): void {\n    this.hasNote = hasAssignedContent(this.shadowRoot?.querySelector('slot[name=\"note\"]'));\n  }\n\n  /** Sends the address, as the button does, once it is one. */\n  subscribe(): void {\n    const email = (this.field.value ?? '').trim();\n    if (!EMAIL.test(email)) {\n      this.field.error = this.t.invalid;\n      this.field.focus();\n      return;\n    }\n    this.field.error = '';\n    let sending: Promise<unknown> | null = null;\n    emit<KtSubscribeDetail>(this, 'kt-subscribe', {\n      email,\n      wait: (promise) => {\n        sending = promise;\n      },\n    });\n    if (!sending) {\n      this.subscribed = true;\n      return;\n    }\n    const waited: Promise<unknown> = sending;\n    void this.button\n      .run(() => waited)\n      .then(\n        () => {\n          this.subscribed = true;\n        },\n        (reason: unknown) => {\n          this.field.error =\n            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.subscribe();\n  }\n\n  /** Enter in the 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    if ((event.composedPath()[0] as Element).localName !== 'input') return;\n    event.preventDefault();\n    this.subscribe();\n  }\n\n  override render(): TemplateResult {\n    const t = this.t;\n    return html`<section\n      part=\"base\"\n      class=\"block\"\n      aria-labelledby=${this.heading ? this.headingId : nothing}\n    >\n      <div part=\"panel\" class=\"panel\">\n        ${blockHead({ title: this.heading, lead: this.lead, level: this.headingLevel, id: this.headingId })}\n        <div class=\"tail\">\n          <form\n            novalidate\n            ?hidden=${this.subscribed}\n            @submit=${this.onSubmit}\n            @keydown=${this.onKeyDown}\n          >\n            <kt-input\n              name=\"email\"\n              type=\"email\"\n              autocomplete=\"email\"\n              label=${t.email}\n              placeholder=${t.placeholder}\n              @kt-input=${() => (this.field.error = '')}\n            ></kt-input>\n            <kt-button @click=${() => this.subscribe()}>${t.subscribe}</kt-button>\n          </form>\n          <p class=${this.subscribed ? 'done' : 'done empty'} role=\"status\">\n            ${\n              this.subscribed\n                ? html`<kt-icon name=\"circle-check\" size=\"18\" aria-hidden=\"true\"></kt-icon\n                    >${t.done}`\n                : nothing\n            }\n          </p>\n          <div class=${this.hasNote ? 'note' : 'note empty'}>\n            <slot name=\"note\" @slotchange=${this.readNote}></slot>\n          </div>\n        </div>\n      </div>\n    </section>`;\n  }\n}\n\ndefineElement('kt-newsletter', KtNewsletter);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-newsletter': KtNewsletter;\n  }\n}\n"],"names":["TEXTS","EMAIL","KtNewsletter","KtElement","blockId","blockStyles","css","hasAssignedContent","email","sending","emit","promise","waited","reason","event","html","nothing","blockHead","__decorateClass","property","state","query","defineElement"],"mappings":"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"}

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

@@ -0,0 +1,73 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-avatar/kt-avatar.js';
+export interface KtPost {
+    readonly title: string;
+    readonly href: string;
+    readonly excerpt?: string;
+    /** When it was published: `2026-09-14`. */
+    readonly date?: string;
+    /** A cover image's URL. */
+    readonly image?: string;
+    /** The cover's text alternative; empty when the title says it all. */
+    readonly imageAlt?: string;
+    readonly author?: {
+        readonly name: string;
+        readonly avatar?: string;
+    };
+    readonly tags?: readonly string[];
+}
+export type KtPostGridLayout = 'grid' | 'list';
+/**
+ * The latest posts, each a card that leads to it: a cover, a title, a line,
+ * and who wrote it when.
+ *
+ * The posts are data: `grid.posts = [{ title, href, excerpt, date, image,
+ * author, tags }]`. `grid`, the default, sets them in `columns` where there is
+ * room; `list` puts one under another, the cover beside the words.
+ *
+ * @element kt-post-grid
+ *
+ * @slot more - Under the posts: a link to every one.
+ *
+ * @csspart base - The section.
+ * @csspart post - One post.
+ *
+ * @example
+ * ```html
+ * <kt-post-grid heading="From the blog">
+ *   <a slot="more" href="/blog">Every post</a>
+ * </kt-post-grid>
+ * <script>
+ *   grid.posts = [{ title: 'Closing the month in a day', href: '/blog/close', date: '2026-09-14' }];
+ * </script>
+ * ```
+ */
+export declare class KtPostGrid extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    heading: string;
+    lead: string;
+    /** `center` or `start`: the head and the more link. */
+    align: 'center' | 'start';
+    /** The posts, newest first. */
+    posts: readonly KtPost[];
+    /** Posts per row, where there is room: 2 or 3. */
+    columns: 2 | 3;
+    /** `grid`: in columns. `list`: one under another, the cover beside the words. */
+    layout: KtPostGridLayout;
+    /** The locale dates are written in; the page's language when empty. */
+    locale: string;
+    /** The heading's level; the posts' titles sit one under. */
+    headingLevel: number;
+    private hasMore;
+    private readonly headingId;
+    firstUpdated(): void;
+    private readMore;
+    private post;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-post-grid': KtPostGrid;
+    }
+}