kanto-ds 1.7.0 → 1.9.0

package/dist/components/blocks/kt-blog-post/kt-blog-post.js

@@ -0,0 +1,285 @@
+import { css as u, nothing as n, html as r } from "lit";
+import { property as a, state as m } from "lit/decorators.js";
+import { K as h, d as f } from "../../../chunks/kt-element-DvWtPQ1Y.js";
+import { b as v, f as b } from "../../../chunks/block-Cci-Kff_.js";
+import { h as y } from "../../../chunks/heading-DsnZsfg-.js";
+import { h as x } from "../../../chunks/slots-BPbIdxAJ.js";
+import "../../core/kt-avatar/kt-avatar.js";
+import "../../core/kt-icon/kt-icon.js";
+var k = Object.defineProperty, e = (d, o, s, g) => {
+  for (var i = void 0, l = d.length - 1, p; l >= 0; l--)
+    (p = d[l]) && (i = p(o, s, i) || i);
+  return i && k(o, s, i), i;
+};
+const c = {
+  back: "All posts",
+  minRead: (d) => `${d} min read`
+}, $ = 230;
+class t extends h {
+  constructor() {
+    super(...arguments), this.heading = "", this.lead = "", this.date = "", this.author = "", this.authorRole = "", this.avatar = "", this.readingTime = 0, this.tags = [], this.backHref = "", this.locale = "", this.headingLevel = 1, this.texts = {}, this.counted = 0, this.filled = /* @__PURE__ */ new Set(), this.headingId = v("kt-blog-post"), this.readSlots = () => {
+      const o = /* @__PURE__ */ new Set();
+      for (const l of this.shadowRoot?.querySelectorAll("slot") ?? [])
+        x(l) && o.add(l.name);
+      this.filled = o;
+      const i = (this.shadowRoot?.querySelector("slot:not([name])")?.assignedNodes({ flatten: !0 }) ?? []).map((l) => l.textContent ?? "").join(" ").split(/\s+/).filter(Boolean).length;
+      this.counted = i ? Math.max(1, Math.round(i / $)) : 0;
+    };
+  }
+  static {
+    this.styles = [
+      h.styles,
+      u`
+      :host {
+        --kt-post-measure: 700px;
+        display: block;
+        container-type: inline-size;
+      }
+
+      article {
+        display: grid;
+        gap: calc(var(--gap-card) * 2);
+        padding-block: var(--kt-block-padding, calc(var(--padding-card) * 2));
+      }
+      .column {
+        width: 100%;
+        max-width: var(--kt-post-measure);
+        margin-inline: auto;
+      }
+
+      header {
+        display: grid;
+        gap: var(--gap-card);
+      }
+      .back {
+        display: inline-flex;
+        gap: 4px;
+        align-items: center;
+        justify-self: start;
+        color: var(--text-muted);
+        font: var(--font-normal-regular);
+        text-decoration: none;
+        border-radius: var(--border-radius);
+      }
+      .back:hover {
+        color: var(--color-primary-text);
+      }
+      .back:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: 2px;
+      }
+      .tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px 12px;
+      }
+      .tag {
+        color: var(--color-primary-text);
+        font: var(--font-normal-small);
+      }
+      .title {
+        margin: 0;
+        color: var(--text-body);
+        font: 600 clamp(32px, 5cqi, 48px) / 1.1 var(--font-family-display);
+        letter-spacing: -0.03em;
+        text-wrap: balance;
+      }
+      .lead {
+        margin: 0;
+        color: var(--text-muted);
+        font: var(--font-normal-regular);
+        font-size: calc(19px * var(--text-scale, 1));
+        line-height: 1.55;
+        text-wrap: pretty;
+      }
+      .meta {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px 16px;
+        align-items: center;
+        margin-top: 4px;
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+      }
+      .author {
+        display: flex;
+        gap: 10px;
+        align-items: center;
+      }
+      .author-text {
+        display: grid;
+      }
+      .author-name {
+        color: var(--text-body);
+        font: var(--font-normal-medium);
+      }
+      .when {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px 12px;
+      }
+
+      .cover {
+        width: 100%;
+        max-width: calc(var(--kt-post-measure) + 240px);
+        margin-inline: auto;
+      }
+      .cover ::slotted(img) {
+        display: block;
+        width: 100%;
+        height: auto;
+        border-radius: var(--border-radius-card);
+      }
+
+      /* The body: the page's own elements, set as prose. */
+      .prose {
+        color: var(--text-body);
+        font: var(--font-normal-regular);
+        font-size: calc(17px * var(--text-scale, 1));
+        line-height: 1.75;
+      }
+      .prose ::slotted(*) {
+        margin: 0 0 1.25em;
+      }
+      .prose ::slotted(:last-child) {
+        margin-bottom: 0;
+      }
+      .prose ::slotted(h2) {
+        margin: 2em 0 0.6em;
+        font: var(--font-title-h4);
+        letter-spacing: -0.01em;
+      }
+      .prose ::slotted(h3) {
+        margin: 1.6em 0 0.5em;
+        font: var(--font-title-h6);
+      }
+      .prose ::slotted(ul),
+      .prose ::slotted(ol) {
+        padding-inline-start: 1.4em;
+      }
+      .prose ::slotted(blockquote) {
+        padding-inline-start: 1em;
+        color: var(--text-muted);
+        font-style: italic;
+        border-inline-start: 3px solid var(--color-primary-base);
+      }
+      .prose ::slotted(pre) {
+        overflow-x: auto;
+        padding: var(--padding-card);
+        font-size: 14px;
+        line-height: 1.6;
+        background-color: var(--color-dark-14);
+        border-radius: var(--border-radius-card);
+      }
+      .prose ::slotted(img),
+      .prose ::slotted(figure),
+      .prose ::slotted(kt-code) {
+        display: block;
+        max-width: 100%;
+        margin-block: 2em;
+      }
+      .prose ::slotted(hr) {
+        margin-block: 2.5em;
+        border: 0;
+        border-top: var(--border-width) solid var(--border-subtle);
+      }
+
+      .end {
+        padding-top: calc(var(--gap-card) * 1.5);
+        border-top: var(--border-width) solid var(--border-subtle);
+      }
+      .empty {
+        display: none;
+      }
+    `
+    ];
+  }
+  firstUpdated() {
+    this.readSlots();
+  }
+  meta() {
+    const o = { ...c, ...this.texts }, s = this.readingTime || this.counted;
+    return !this.author && !this.date && !s ? n : r`<div class="meta">
+      ${this.author ? r`<span class="author">
+              <kt-avatar name=${this.author} src=${this.avatar} aria-hidden="true"></kt-avatar>
+              <span class="author-text">
+                <span class="author-name">${this.author}</span>
+                ${this.authorRole ? r`<span class="author-role">${this.authorRole}</span>` : n}
+              </span>
+            </span>` : n}
+      <span class="when">
+        ${this.date ? r`<time datetime=${this.date}>${b(this.date, this.locale)}</time>` : n}
+        ${s ? r`<span class="reading">${o.minRead(s)}</span>` : n}
+      </span>
+    </div>`;
+  }
+  render() {
+    const o = { ...c, ...this.texts };
+    return r`<article part="base" aria-labelledby=${this.headingId}>
+      <header part="header" class="column">
+        ${this.backHref ? r`<a class="back" href=${this.backHref}
+                ><kt-icon name="chevron-left" size="16" aria-hidden="true"></kt-icon>${o.back}</a
+              >` : n}
+        ${this.tags.length ? r`<div class="tags">
+                ${this.tags.map((s) => r`<span class="tag">${s}</span>`)}
+              </div>` : n}
+        <div id=${this.headingId}>${y(this.headingLevel, this.heading, "title", 1)}</div>
+        ${this.lead ? r`<p class="lead">${this.lead}</p>` : n} ${this.meta()}
+      </header>
+      <div class=${this.filled.has("cover") ? "cover" : "cover empty"}>
+        <slot name="cover" @slotchange=${this.readSlots}></slot>
+      </div>
+      <div part="body" class="prose column"><slot @slotchange=${this.readSlots}></slot></div>
+      <footer class=${this.filled.has("end") ? "end column" : "end column empty"}>
+        <slot name="end" @slotchange=${this.readSlots}></slot>
+      </footer>
+    </article>`;
+  }
+}
+e([
+  a({ type: String })
+], t.prototype, "heading");
+e([
+  a({ type: String })
+], t.prototype, "lead");
+e([
+  a({ type: String })
+], t.prototype, "date");
+e([
+  a({ type: String })
+], t.prototype, "author");
+e([
+  a({ type: String, attribute: "author-role" })
+], t.prototype, "authorRole");
+e([
+  a({ type: String })
+], t.prototype, "avatar");
+e([
+  a({ type: Number, attribute: "reading-time" })
+], t.prototype, "readingTime");
+e([
+  a({ attribute: !1 })
+], t.prototype, "tags");
+e([
+  a({ type: String, attribute: "back-href" })
+], t.prototype, "backHref");
+e([
+  a({ type: String })
+], t.prototype, "locale");
+e([
+  a({ type: Number, attribute: "heading-level" })
+], t.prototype, "headingLevel");
+e([
+  a({ attribute: !1 })
+], t.prototype, "texts");
+e([
+  m()
+], t.prototype, "counted");
+e([
+  m()
+], t.prototype, "filled");
+f("kt-blog-post", t);
+export {
+  t as KtBlogPost
+};
+//# sourceMappingURL=kt-blog-post.js.map

package/dist/components/blocks/kt-blog-post/kt-blog-post.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-blog-post.js","sources":["../../../../src/components/blocks/kt-blog-post/kt-blog-post.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { blockId, formatDate } from '#internal/block';\nimport { heading } from '#internal/heading';\nimport { hasAssignedContent } from '#internal/slots';\nimport '../../core/kt-avatar/kt-avatar.js';\nimport '../../core/kt-icon/kt-icon.js';\n\n/** Every word the post says, in English until given others. */\nexport interface KtBlogPostTexts {\n  readonly back: string;\n  readonly minRead: (minutes: number) => string;\n}\n\nconst TEXTS: KtBlogPostTexts = {\n  back: 'All posts',\n  minRead: (minutes) => `${minutes} min read`,\n};\n\n/** Words a minute, read on a screen. */\nconst PACE = 230;\n\n/**\n * A post, set to be read: its title, who wrote it and when, a cover, and the\n * body in a measure an eye can follow.\n *\n * The body is the default slot — paragraphs, headings, lists, quotes, code,\n * figures — set as prose. The reading time is counted from it, unless given.\n *\n * @element kt-blog-post\n *\n * @slot - The body.\n * @slot cover - Under the header: an image, a figure with its caption.\n * @slot end - After the body: tags, sharing, the next post.\n *\n * @csspart base - The article.\n * @csspart header - The title, the lead and who wrote it.\n * @csspart body - The body's column.\n *\n * @cssproperty --kt-post-measure - The column's width. 700px.\n *\n * @example\n * ```html\n * <kt-blog-post heading=\"Closing the month in a day\" author=\"Ada Park\" date=\"2026-09-14\" back-href=\"/blog\">\n *   <img slot=\"cover\" src=\"/covers/close.jpg\" alt=\"\" />\n *   <p>For years, the first week of the month was the close…</p>\n * </kt-blog-post>\n * ```\n */\nexport class KtBlogPost extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        --kt-post-measure: 700px;\n        display: block;\n        container-type: inline-size;\n      }\n\n      article {\n        display: grid;\n        gap: calc(var(--gap-card) * 2);\n        padding-block: var(--kt-block-padding, calc(var(--padding-card) * 2));\n      }\n      .column {\n        width: 100%;\n        max-width: var(--kt-post-measure);\n        margin-inline: auto;\n      }\n\n      header {\n        display: grid;\n        gap: var(--gap-card);\n      }\n      .back {\n        display: inline-flex;\n        gap: 4px;\n        align-items: center;\n        justify-self: start;\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n        text-decoration: none;\n        border-radius: var(--border-radius);\n      }\n      .back:hover {\n        color: var(--color-primary-text);\n      }\n      .back:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 2px;\n      }\n      .tags {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 6px 12px;\n      }\n      .tag {\n        color: var(--color-primary-text);\n        font: var(--font-normal-small);\n      }\n      .title {\n        margin: 0;\n        color: var(--text-body);\n        font: 600 clamp(32px, 5cqi, 48px) / 1.1 var(--font-family-display);\n        letter-spacing: -0.03em;\n        text-wrap: balance;\n      }\n      .lead {\n        margin: 0;\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n        font-size: calc(19px * var(--text-scale, 1));\n        line-height: 1.55;\n        text-wrap: pretty;\n      }\n      .meta {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 8px 16px;\n        align-items: center;\n        margin-top: 4px;\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n      }\n      .author {\n        display: flex;\n        gap: 10px;\n        align-items: center;\n      }\n      .author-text {\n        display: grid;\n      }\n      .author-name {\n        color: var(--text-body);\n        font: var(--font-normal-medium);\n      }\n      .when {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 4px 12px;\n      }\n\n      .cover {\n        width: 100%;\n        max-width: calc(var(--kt-post-measure) + 240px);\n        margin-inline: auto;\n      }\n      .cover ::slotted(img) {\n        display: block;\n        width: 100%;\n        height: auto;\n        border-radius: var(--border-radius-card);\n      }\n\n      /* The body: the page's own elements, set as prose. */\n      .prose {\n        color: var(--text-body);\n        font: var(--font-normal-regular);\n        font-size: calc(17px * var(--text-scale, 1));\n        line-height: 1.75;\n      }\n      .prose ::slotted(*) {\n        margin: 0 0 1.25em;\n      }\n      .prose ::slotted(:last-child) {\n        margin-bottom: 0;\n      }\n      .prose ::slotted(h2) {\n        margin: 2em 0 0.6em;\n        font: var(--font-title-h4);\n        letter-spacing: -0.01em;\n      }\n      .prose ::slotted(h3) {\n        margin: 1.6em 0 0.5em;\n        font: var(--font-title-h6);\n      }\n      .prose ::slotted(ul),\n      .prose ::slotted(ol) {\n        padding-inline-start: 1.4em;\n      }\n      .prose ::slotted(blockquote) {\n        padding-inline-start: 1em;\n        color: var(--text-muted);\n        font-style: italic;\n        border-inline-start: 3px solid var(--color-primary-base);\n      }\n      .prose ::slotted(pre) {\n        overflow-x: auto;\n        padding: var(--padding-card);\n        font-size: 14px;\n        line-height: 1.6;\n        background-color: var(--color-dark-14);\n        border-radius: var(--border-radius-card);\n      }\n      .prose ::slotted(img),\n      .prose ::slotted(figure),\n      .prose ::slotted(kt-code) {\n        display: block;\n        max-width: 100%;\n        margin-block: 2em;\n      }\n      .prose ::slotted(hr) {\n        margin-block: 2.5em;\n        border: 0;\n        border-top: var(--border-width) solid var(--border-subtle);\n      }\n\n      .end {\n        padding-top: calc(var(--gap-card) * 1.5);\n        border-top: var(--border-width) solid var(--border-subtle);\n      }\n      .empty {\n        display: none;\n      }\n    `,\n  ];\n\n  /** The post's title. */\n  @property({ type: String })\n  heading = '';\n\n  /** A line under the title: what the post is about. */\n  @property({ type: String })\n  lead = '';\n\n  /** When it was published: `2026-09-14`. */\n  @property({ type: String })\n  date = '';\n\n  /** Who wrote it. */\n  @property({ type: String })\n  author = '';\n\n  /** Their role: \"CFO, Northwind\". */\n  @property({ type: String, attribute: 'author-role' })\n  authorRole = '';\n\n  /** Their photo's URL; without one, their initials. */\n  @property({ type: String })\n  avatar = '';\n\n  /** Minutes to read it. Counted from the body when 0. */\n  @property({ type: Number, attribute: 'reading-time' })\n  readingTime = 0;\n\n  /** A few words over the title. */\n  @property({ attribute: false })\n  tags: readonly string[] = [];\n\n  /** Where All posts leads; no link without it. */\n  @property({ type: String, attribute: 'back-href' })\n  backHref = '';\n\n  /** The locale the date is written in; the page's language when empty. */\n  @property({ type: String })\n  locale = '';\n\n  /** The title's level: 1, since the post is the page. */\n  @property({ type: Number, attribute: 'heading-level' })\n  headingLevel = 1;\n\n  /** The words, English until given others. */\n  @property({ attribute: false })\n  texts: Partial<KtBlogPostTexts> = {};\n\n  @state() private counted = 0;\n  @state() private filled = new Set<string>();\n\n  private readonly headingId = blockId('kt-blog-post');\n\n  override firstUpdated(): void {\n    this.readSlots();\n  }\n\n  private readSlots = (): void => {\n    const filled = new Set<string>();\n    for (const slot of this.shadowRoot?.querySelectorAll('slot') ?? []) {\n      if (hasAssignedContent(slot)) filled.add(slot.name);\n    }\n    this.filled = filled;\n    const body = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n    const text = (body?.assignedNodes({ flatten: true }) ?? [])\n      .map((node) => node.textContent ?? '')\n      .join(' ');\n    const count = text.split(/\\s+/).filter(Boolean).length;\n    this.counted = count ? Math.max(1, Math.round(count / PACE)) : 0;\n  };\n\n  private meta(): TemplateResult | typeof nothing {\n    const t = { ...TEXTS, ...this.texts };\n    const minutes = this.readingTime || this.counted;\n    if (!this.author && !this.date && !minutes) return nothing;\n    return html`<div class=\"meta\">\n      ${\n        this.author\n          ? html`<span class=\"author\">\n              <kt-avatar name=${this.author} src=${this.avatar} aria-hidden=\"true\"></kt-avatar>\n              <span class=\"author-text\">\n                <span class=\"author-name\">${this.author}</span>\n                ${this.authorRole ? html`<span class=\"author-role\">${this.authorRole}</span>` : nothing}\n              </span>\n            </span>`\n          : nothing\n      }\n      <span class=\"when\">\n        ${\n          this.date\n            ? html`<time datetime=${this.date}>${formatDate(this.date, this.locale)}</time>`\n            : nothing\n        }\n        ${minutes ? html`<span class=\"reading\">${t.minRead(minutes)}</span>` : nothing}\n      </span>\n    </div>`;\n  }\n\n  override render(): TemplateResult {\n    const t = { ...TEXTS, ...this.texts };\n    return html`<article part=\"base\" aria-labelledby=${this.headingId}>\n      <header part=\"header\" class=\"column\">\n        ${\n          this.backHref\n            ? html`<a class=\"back\" href=${this.backHref}\n                ><kt-icon name=\"chevron-left\" size=\"16\" aria-hidden=\"true\"></kt-icon>${t.back}</a\n              >`\n            : nothing\n        }\n        ${\n          this.tags.length\n            ? html`<div class=\"tags\">\n                ${this.tags.map((tag) => html`<span class=\"tag\">${tag}</span>`)}\n              </div>`\n            : nothing\n        }\n        <div id=${this.headingId}>${heading(this.headingLevel, this.heading, 'title', 1)}</div>\n        ${this.lead ? html`<p class=\"lead\">${this.lead}</p>` : nothing} ${this.meta()}\n      </header>\n      <div class=${this.filled.has('cover') ? 'cover' : 'cover empty'}>\n        <slot name=\"cover\" @slotchange=${this.readSlots}></slot>\n      </div>\n      <div part=\"body\" class=\"prose column\"><slot @slotchange=${this.readSlots}></slot></div>\n      <footer class=${this.filled.has('end') ? 'end column' : 'end column empty'}>\n        <slot name=\"end\" @slotchange=${this.readSlots}></slot>\n      </footer>\n    </article>`;\n  }\n}\n\ndefineElement('kt-blog-post', KtBlogPost);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-blog-post': KtBlogPost;\n  }\n}\n"],"names":["TEXTS","minutes","PACE","KtBlogPost","KtElement","blockId","filled","slot","hasAssignedContent","count","node","css","t","nothing","html","formatDate","tag","heading","__decorateClass","property","state","defineElement"],"mappings":"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"}

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

@@ -0,0 +1,51 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+export type KtCtaVariant = 'panel' | 'plain';
+export type KtCtaLayout = 'stacked' | 'inline';
+/**
+ * The ask at the end of a page: a heading, a line and the button that acts on
+ * them.
+ *
+ * `panel`, the default, sets it on a tinted panel so it reads as the page's
+ * last word; `plain` leaves it on the page. `stacked` puts the actions under
+ * the words; `inline` beside them once the block is wide enough.
+ *
+ * @element kt-cta
+ *
+ * @slot actions - The buttons.
+ * @slot note - Under the actions: what it costs, what it needs.
+ *
+ * @csspart base - The section.
+ * @csspart panel - The panel.
+ *
+ * @example
+ * ```html
+ * <kt-cta heading="Start sending invoices" lead="Free for three months. No card needed.">
+ *   <kt-button slot="actions" size="large">Start free</kt-button>
+ * </kt-cta>
+ * ```
+ */
+export declare class KtCta 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: KtCtaVariant;
+    /** `stacked`: the actions under the words. `inline`: beside them, where there is room. */
+    layout: KtCtaLayout;
+    /** The heading's level. */
+    headingLevel: number;
+    private filled;
+    private readonly headingId;
+    firstUpdated(): void;
+    private readSlots;
+    private region;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-cta': KtCta;
+    }
+}

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

@@ -0,0 +1,126 @@
+import { css as h, html as d } from "lit";
+import { property as r, state as c } from "lit/decorators.js";
+import { K as p, d as g } from "../../../chunks/kt-element-DvWtPQ1Y.js";
+import { b as y, a as f, c as m } from "../../../chunks/block-Cci-Kff_.js";
+import { h as u } from "../../../chunks/slots-BPbIdxAJ.js";
+var v = Object.defineProperty, a = (l, t, s, b) => {
+  for (var i = void 0, n = l.length - 1, o; n >= 0; n--)
+    (o = l[n]) && (i = o(t, s, i) || i);
+  return i && v(t, s, i), i;
+};
+class e extends p {
+  constructor() {
+    super(...arguments), this.heading = "", this.lead = "", this.align = "center", this.variant = "panel", this.layout = "stacked", this.headingLevel = 2, this.filled = /* @__PURE__ */ new Set(), this.headingId = y("kt-cta"), this.readSlots = () => {
+      const t = /* @__PURE__ */ new Set();
+      for (const s of this.shadowRoot?.querySelectorAll("slot") ?? [])
+        u(s) && t.add(s.name);
+      this.filled = t;
+    };
+  }
+  static {
+    this.styles = [
+      p.styles,
+      f,
+      h`
+      .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: 600 clamp(28px, 4cqi, 44px) / 1.1 var(--font-family-display);
+        letter-spacing: -0.03em;
+      }
+
+      .tail {
+        display: grid;
+        gap: 12px;
+        justify-items: inherit;
+      }
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--gap-button);
+        align-items: center;
+      }
+      .note {
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+      }
+      .empty {
+        display: none;
+      }
+
+      /* Inline: the words at the start, the actions at the end, where they fit. */
+      @container (min-width: 720px) {
+        :host([layout='inline']) .panel {
+          grid-template-columns: minmax(0, 1fr) auto;
+          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: end;
+        }
+      }
+    `
+    ];
+  }
+  firstUpdated() {
+    this.readSlots();
+  }
+  region(t) {
+    return d`<div class=${this.filled.has(t) ? t : `${t} empty`}>
+      <slot name=${t} @slotchange=${this.readSlots}></slot>
+    </div>`;
+  }
+  render() {
+    return d`<section part="base" class="block" aria-labelledby=${this.headingId}>
+      <div part="panel" class="panel">
+        ${m({ title: this.heading, lead: this.lead, level: this.headingLevel, id: this.headingId })}
+        <div class="tail">${this.region("actions")} ${this.region("note")}</div>
+      </div>
+    </section>`;
+  }
+}
+a([
+  r({ type: String })
+], e.prototype, "heading");
+a([
+  r({ type: String })
+], e.prototype, "lead");
+a([
+  r({ type: String, reflect: !0 })
+], e.prototype, "align");
+a([
+  r({ type: String, reflect: !0 })
+], e.prototype, "variant");
+a([
+  r({ type: String, reflect: !0 })
+], e.prototype, "layout");
+a([
+  r({ type: Number, attribute: "heading-level" })
+], e.prototype, "headingLevel");
+a([
+  c()
+], e.prototype, "filled");
+g("kt-cta", e);
+export {
+  e as KtCta
+};
+//# sourceMappingURL=kt-cta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kt-cta.js","sources":["../../../../src/components/blocks/kt-cta/kt-cta.ts"],"sourcesContent":["import { css, html, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { blockHead, blockId, blockStyles } from '#internal/block';\nimport { hasAssignedContent } from '#internal/slots';\n\nexport type KtCtaVariant = 'panel' | 'plain';\nexport type KtCtaLayout = 'stacked' | 'inline';\n\n/**\n * The ask at the end of a page: a heading, a line and the button that acts on\n * them.\n *\n * `panel`, the default, sets it on a tinted panel so it reads as the page's\n * last word; `plain` leaves it on the page. `stacked` puts the actions under\n * the words; `inline` beside them once the block is wide enough.\n *\n * @element kt-cta\n *\n * @slot actions - The buttons.\n * @slot note - Under the actions: what it costs, what it needs.\n *\n * @csspart base - The section.\n * @csspart panel - The panel.\n *\n * @example\n * ```html\n * <kt-cta heading=\"Start sending invoices\" lead=\"Free for three months. No card needed.\">\n *   <kt-button slot=\"actions\" size=\"large\">Start free</kt-button>\n * </kt-cta>\n * ```\n */\nexport class KtCta 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: 600 clamp(28px, 4cqi, 44px) / 1.1 var(--font-family-display);\n        letter-spacing: -0.03em;\n      }\n\n      .tail {\n        display: grid;\n        gap: 12px;\n        justify-items: inherit;\n      }\n      .actions {\n        display: flex;\n        flex-wrap: wrap;\n        gap: var(--gap-button);\n        align-items: center;\n      }\n      .note {\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n      }\n      .empty {\n        display: none;\n      }\n\n      /* Inline: the words at the start, the actions at the end, where they fit. */\n      @container (min-width: 720px) {\n        :host([layout='inline']) .panel {\n          grid-template-columns: minmax(0, 1fr) auto;\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: end;\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: KtCtaVariant = 'panel';\n\n  /** `stacked`: the actions under the words. `inline`: beside them, where there is room. */\n  @property({ type: String, reflect: true })\n  layout: KtCtaLayout = 'stacked';\n\n  /** The heading's level. */\n  @property({ type: Number, attribute: 'heading-level' })\n  headingLevel = 2;\n\n  @state() private filled = new Set<string>();\n\n  private readonly headingId = blockId('kt-cta');\n\n  override firstUpdated(): void {\n    this.readSlots();\n  }\n\n  private readSlots = (): void => {\n    const filled = new Set<string>();\n    for (const slot of this.shadowRoot?.querySelectorAll('slot') ?? []) {\n      if (hasAssignedContent(slot)) filled.add(slot.name);\n    }\n    this.filled = filled;\n  };\n\n  private region(name: string): TemplateResult {\n    return html`<div class=${this.filled.has(name) ? name : `${name} empty`}>\n      <slot name=${name} @slotchange=${this.readSlots}></slot>\n    </div>`;\n  }\n\n  override render(): TemplateResult {\n    return html`<section part=\"base\" class=\"block\" aria-labelledby=${this.headingId}>\n      <div part=\"panel\" class=\"panel\">\n        ${blockHead({ title: this.heading, lead: this.lead, level: this.headingLevel, id: this.headingId })}\n        <div class=\"tail\">${this.region('actions')} ${this.region('note')}</div>\n      </div>\n    </section>`;\n  }\n}\n\ndefineElement('kt-cta', KtCta);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-cta': KtCta;\n  }\n}\n"],"names":["KtCta","KtElement","blockId","filled","slot","hasAssignedContent","blockStyles","css","name","html","blockHead","__decorateClass","property","state","defineElement"],"mappings":";;;;;;;;;;AAgCO,MAAMA,UAAcC,EAAU;AAAA,EAA9B,cAAA;AAAA,UAAA,GAAA,SAAA,GAiEL,KAAA,UAAU,IAGV,KAAA,OAAO,IAIP,KAAA,QAA4B,UAI5B,KAAA,UAAwB,SAIxB,KAAA,SAAsB,WAItB,KAAA,eAAe,GAEN,KAAQ,6BAAa,IAAA,GAE9B,KAAiB,YAAYC,EAAQ,QAAQ,GAM7C,KAAQ,YAAY,MAAY;AAC9B,YAAMC,wBAAa,IAAA;AACnB,iBAAWC,KAAQ,KAAK,YAAY,iBAAiB,MAAM,KAAK;AAC9D,QAAIC,EAAmBD,CAAI,KAAGD,EAAO,IAAIC,EAAK,IAAI;AAEpD,WAAK,SAASD;AAAA,IAChB;AAAA,EAAA;AAAA,EAnGA,OAAA;AAAA,SAAgB,SAAS;AAAA,MACvBF,EAAU;AAAA,MACVK;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EA0DF;AAAA,EA4BS,eAAqB;AAC5B,SAAK,UAAA;AAAA,EACP;AAAA,EAUQ,OAAOC,GAA8B;AAC3C,WAAOC,eAAkB,KAAK,OAAO,IAAID,CAAI,IAAIA,IAAO,GAAGA,CAAI,QAAQ;AAAA,mBACxDA,CAAI,gBAAgB,KAAK,SAAS;AAAA;AAAA,EAEnD;AAAA,EAES,SAAyB;AAChC,WAAOC,uDAA0D,KAAK,SAAS;AAAA;AAAA,UAEzEC,EAAU,EAAE,OAAO,KAAK,SAAS,MAAM,KAAK,MAAM,OAAO,KAAK,cAAc,IAAI,KAAK,UAAA,CAAW,CAAC;AAAA,4BAC/E,KAAK,OAAO,SAAS,CAAC,IAAI,KAAK,OAAO,MAAM,CAAC;AAAA;AAAA;AAAA,EAGvE;AACF;AAnDEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhEfZ,EAiEX,WAAA,SAAA;AAGAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnEfZ,EAoEX,WAAA,MAAA;AAIAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAvE9BZ,EAwEX,WAAA,OAAA;AAIAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA3E9BZ,EA4EX,WAAA,SAAA;AAIAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA/E9BZ,EAgFX,WAAA,QAAA;AAIAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB;AAAA,GAnF3CZ,EAoFX,WAAA,cAAA;AAEiBW,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAtFIb,EAsFM,WAAA,QAAA;AAgCnBc,EAAc,UAAUd,CAAK;"}

package/dist/components/blocks/kt-empty-page/kt-empty-page.d.ts

@@ -0,0 +1,75 @@
+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 '../../feedback/kt-progress-bar/kt-progress-bar.js';
+export interface KtFirstStep {
+    readonly id: string;
+    readonly title: string;
+    readonly description?: string;
+    /** The button's words: what doing the step starts. */
+    readonly action?: string;
+    /** Makes the action a link. Without it, the action fires `kt-step`. */
+    readonly href?: string;
+    readonly done?: boolean;
+}
+/** Every word the page says, in English until given others. */
+export interface KtEmptyPageTexts {
+    readonly progress: (done: number, total: number) => string;
+    /** Read before a done step's title, for assistive tech. */
+    readonly done: string;
+    readonly start: string;
+}
+/**
+ * The page a new account lands on, before there is anything in it: a welcome,
+ * and the first steps that fill it — what is done, what is next, and the way
+ * to each.
+ *
+ * The steps are data: `page.steps = [{ id, title, description, action, href,
+ * done }]`, numbered in order, with how far along it is over them. A step's
+ * action fires `kt-step`, or is a link with an `href`. For a list or a panel
+ * that is empty, `kt-empty-state`.
+ *
+ * @element kt-empty-page
+ *
+ * @slot media - Over the heading: an illustration, a logo.
+ * @slot actions - Under the steps: Skip for now, a link to the docs.
+ *
+ * @csspart base - The section.
+ * @csspart step - One step.
+ *
+ * @fires kt-step - A step's action was pressed. `detail: { id }`.
+ *
+ * @example
+ * ```html
+ * <kt-empty-page heading="Welcome, Ada" lead="Three steps and you are sending invoices."></kt-empty-page>
+ * <script>
+ *   page.steps = [
+ *     { id: 'company', title: 'Add your company', done: true },
+ *     { id: 'invoice', title: 'Send your first invoice', action: 'New invoice', href: '/invoices/new' },
+ *   ];
+ * </script>
+ * ```
+ */
+export declare class KtEmptyPage extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    heading: string;
+    lead: string;
+    /** The first steps, in the order to take them. */
+    steps: readonly KtFirstStep[];
+    /** The heading's level: 1, since it is the page; the steps' titles sit one under. */
+    headingLevel: number;
+    /** The words, English until given others. */
+    texts: Partial<KtEmptyPageTexts>;
+    private filled;
+    private readonly headingId;
+    firstUpdated(): void;
+    private readSlots;
+    private step;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-empty-page': KtEmptyPage;
+    }
+}