kanto-ds 1.7.0 → 1.9.0

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

@@ -0,0 +1,129 @@
+import { css as d, nothing as c, html as p } from "lit";
+import { property as i, state as m } from "lit/decorators.js";
+import { K as h, d as g } from "../../../chunks/kt-element-DvWtPQ1Y.js";
+import { b as y, a as u, c as f } from "../../../chunks/block-Cci-Kff_.js";
+import { h as v } from "../../../chunks/slots-BPbIdxAJ.js";
+import "../../overlays/kt-accordion/kt-accordion.js";
+import "../../overlays/kt-collapsible/kt-collapsible.js";
+var b = Object.defineProperty, e = (r, s, o, k) => {
+  for (var a = void 0, l = r.length - 1, n; l >= 0; l--)
+    (n = r[l]) && (a = n(s, o, a) || a);
+  return a && b(s, o, a), a;
+};
+class t extends h {
+  constructor() {
+    super(...arguments), this.heading = "", this.lead = "", this.align = "center", this.items = [], this.multiple = !1, this.openFirst = !1, this.layout = "stacked", this.headingLevel = 2, this.hasNote = !1, this.headingId = y("kt-faq");
+  }
+  static {
+    this.styles = [
+      h.styles,
+      u,
+      d`
+      .head {
+        display: grid;
+        gap: var(--gap-card);
+        align-content: start;
+      }
+      :host([align='center']) .head {
+        justify-items: center;
+        text-align: center;
+      }
+      .note {
+        color: var(--text-muted);
+        font: var(--font-normal-regular);
+      }
+      .note.empty {
+        display: none;
+      }
+      .questions {
+        width: 100%;
+        max-width: 760px;
+        margin-inline: auto;
+        text-align: start;
+      }
+
+      /* Split: the head at the start, held while the questions scroll. */
+      @container (min-width: 880px) {
+        :host([layout='split']) .block {
+          grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
+          align-items: start;
+          gap: calc(var(--gap-card) * 3);
+        }
+        :host([layout='split']) .head {
+          position: sticky;
+          top: var(--kt-faq-sticky-top, 24px);
+          justify-items: start;
+          text-align: start;
+        }
+        :host([layout='split']) .block-head {
+          justify-items: start;
+          margin-inline: 0;
+          text-align: start;
+        }
+        :host([layout='split']) .questions {
+          max-width: none;
+        }
+      }
+    `
+    ];
+  }
+  firstUpdated() {
+    this.readNote();
+  }
+  readNote() {
+    this.hasNote = v(this.shadowRoot?.querySelector('slot[name="note"]'));
+  }
+  render() {
+    return p`<section
+      part="base"
+      class="block"
+      aria-labelledby=${this.heading ? this.headingId : c}
+    >
+      <div class="head">
+        ${f({ title: this.heading, lead: this.lead, level: this.headingLevel, id: this.headingId })}
+        <div class=${this.hasNote ? "note" : "note empty"}>
+          <slot name="note" @slotchange=${this.readNote}></slot>
+        </div>
+      </div>
+      <kt-accordion class="questions" ?multiple=${this.multiple}>
+        ${this.items.map(
+      (s, o) => p`<kt-collapsible heading=${s.question} ?open=${this.openFirst && o === 0}
+              >${s.answer}</kt-collapsible
+            >`
+    )}
+      </kt-accordion>
+    </section>`;
+  }
+}
+e([
+  i({ type: String })
+], t.prototype, "heading");
+e([
+  i({ type: String })
+], t.prototype, "lead");
+e([
+  i({ type: String, reflect: !0 })
+], t.prototype, "align");
+e([
+  i({ attribute: !1 })
+], t.prototype, "items");
+e([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "multiple");
+e([
+  i({ type: Boolean, attribute: "open-first" })
+], t.prototype, "openFirst");
+e([
+  i({ type: String, reflect: !0 })
+], t.prototype, "layout");
+e([
+  i({ type: Number, attribute: "heading-level" })
+], t.prototype, "headingLevel");
+e([
+  m()
+], t.prototype, "hasNote");
+g("kt-faq", t);
+export {
+  t as KtFaq
+};
+//# sourceMappingURL=kt-faq.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kt-faq.js","sources":["../../../../src/components/blocks/kt-faq/kt-faq.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 { blockHead, blockId, blockStyles } from '#internal/block';\nimport { hasAssignedContent } from '#internal/slots';\nimport '../../overlays/kt-accordion/kt-accordion.js';\nimport '../../overlays/kt-collapsible/kt-collapsible.js';\n\nexport interface KtFaqItem {\n  readonly question: string;\n  readonly answer: string;\n}\n\nexport type KtFaqLayout = 'stacked' | 'split';\n\n/**\n * The questions people ask before they sign up, answered: an accordion under a\n * heading, one answer open at a time.\n *\n * The questions are data: `faq.items = [{ question, answer }]`. `multiple`\n * lets each open on its own; `open-first` opens the first. `stacked` puts the\n * head over the questions; `split` beside them, where the block is wide\n * enough.\n *\n * @element kt-faq\n *\n * @slot note - Under the head: where to ask what is not answered.\n *\n * @csspart base - The section.\n *\n * @example\n * ```html\n * <kt-faq heading=\"Questions\" layout=\"split\">\n *   <span slot=\"note\">Something else? <a href=\"/contact\">Ask us</a>.</span>\n * </kt-faq>\n * <script>\n *   faq.items = [{ question: 'Can I cancel any time?', answer: 'Yes, from Settings.' }];\n * </script>\n * ```\n */\nexport class KtFaq extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    blockStyles,\n    css`\n      .head {\n        display: grid;\n        gap: var(--gap-card);\n        align-content: start;\n      }\n      :host([align='center']) .head {\n        justify-items: center;\n        text-align: center;\n      }\n      .note {\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n      }\n      .note.empty {\n        display: none;\n      }\n      .questions {\n        width: 100%;\n        max-width: 760px;\n        margin-inline: auto;\n        text-align: start;\n      }\n\n      /* Split: the head at the start, held while the questions scroll. */\n      @container (min-width: 880px) {\n        :host([layout='split']) .block {\n          grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);\n          align-items: start;\n          gap: calc(var(--gap-card) * 3);\n        }\n        :host([layout='split']) .head {\n          position: sticky;\n          top: var(--kt-faq-sticky-top, 24px);\n          justify-items: start;\n          text-align: start;\n        }\n        :host([layout='split']) .block-head {\n          justify-items: start;\n          margin-inline: 0;\n          text-align: start;\n        }\n        :host([layout='split']) .questions {\n          max-width: none;\n        }\n      }\n    `,\n  ];\n\n  @property({ type: String })\n  heading = '';\n\n  @property({ type: String })\n  lead = '';\n\n  /** `center` or `start`: the head, when stacked. */\n  @property({ type: String, reflect: true })\n  align: 'center' | 'start' = 'center';\n\n  /** The questions and their answers, in order. */\n  @property({ attribute: false })\n  items: readonly KtFaqItem[] = [];\n\n  /** Each answer opens and closes on its own, rather than one at a time. */\n  @property({ type: Boolean, reflect: true })\n  multiple = false;\n\n  /** Opens the first answer. */\n  @property({ type: Boolean, attribute: 'open-first' })\n  openFirst = false;\n\n  /** `stacked`: the head over the questions. `split`: beside them, where there is room. */\n  @property({ type: String, reflect: true })\n  layout: KtFaqLayout = 'stacked';\n\n  /** The heading's level. */\n  @property({ type: Number, attribute: 'heading-level' })\n  headingLevel = 2;\n\n  @state() private hasNote = false;\n\n  private readonly headingId = blockId('kt-faq');\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  override render(): TemplateResult {\n    return html`<section\n      part=\"base\"\n      class=\"block\"\n      aria-labelledby=${this.heading ? this.headingId : nothing}\n    >\n      <div class=\"head\">\n        ${blockHead({ title: this.heading, lead: this.lead, level: this.headingLevel, id: this.headingId })}\n        <div class=${this.hasNote ? 'note' : 'note empty'}>\n          <slot name=\"note\" @slotchange=${this.readNote}></slot>\n        </div>\n      </div>\n      <kt-accordion class=\"questions\" ?multiple=${this.multiple}>\n        ${this.items.map(\n          (item, index) =>\n            html`<kt-collapsible heading=${item.question} ?open=${this.openFirst && index === 0}\n              >${item.answer}</kt-collapsible\n            >`,\n        )}\n      </kt-accordion>\n    </section>`;\n  }\n}\n\ndefineElement('kt-faq', KtFaq);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-faq': KtFaq;\n  }\n}\n"],"names":["KtFaq","KtElement","blockId","blockStyles","css","hasAssignedContent","html","nothing","blockHead","item","index","__decorateClass","property","state","defineElement"],"mappings":";;;;;;;;;;;;AAwCO,MAAMA,UAAcC,EAAU;AAAA,EAA9B,cAAA;AAAA,UAAA,GAAA,SAAA,GAsDL,KAAA,UAAU,IAGV,KAAA,OAAO,IAIP,KAAA,QAA4B,UAI5B,KAAA,QAA8B,CAAA,GAI9B,KAAA,WAAW,IAIX,KAAA,YAAY,IAIZ,KAAA,SAAsB,WAItB,KAAA,eAAe,GAEN,KAAQ,UAAU,IAE3B,KAAiB,YAAYC,EAAQ,QAAQ;AAAA,EAAA;AAAA,EApF7C,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,IAAA;AAAA,EA+CF;AAAA,EAoCS,eAAqB;AAC5B,SAAK,SAAA;AAAA,EACP;AAAA,EAEQ,WAAiB;AACvB,SAAK,UAAUC,EAAmB,KAAK,YAAY,cAAc,mBAAmB,CAAC;AAAA,EACvF;AAAA,EAES,SAAyB;AAChC,WAAOC;AAAA;AAAA;AAAA,wBAGa,KAAK,UAAU,KAAK,YAAYC,CAAO;AAAA;AAAA;AAAA,UAGrDC,EAAU,EAAE,OAAO,KAAK,SAAS,MAAM,KAAK,MAAM,OAAO,KAAK,cAAc,IAAI,KAAK,UAAA,CAAW,CAAC;AAAA,qBACtF,KAAK,UAAU,SAAS,YAAY;AAAA,0CACf,KAAK,QAAQ;AAAA;AAAA;AAAA,kDAGL,KAAK,QAAQ;AAAA,UACrD,KAAK,MAAM;AAAA,MACX,CAACC,GAAMC,MACLJ,4BAA+BG,EAAK,QAAQ,UAAU,KAAK,aAAaC,MAAU,CAAC;AAAA,iBAC9ED,EAAK,MAAM;AAAA;AAAA,IAAA,CAEnB;AAAA;AAAA;AAAA,EAGP;AACF;AA/DEE,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArDfZ,EAsDX,WAAA,SAAA;AAGAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAxDfZ,EAyDX,WAAA,MAAA;AAIAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA5D9BZ,EA6DX,WAAA,OAAA;AAIAW,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GAhEnBZ,EAiEX,WAAA,OAAA;AAIAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApE/BZ,EAqEX,WAAA,UAAA;AAIAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,WAAW,cAAc;AAAA,GAxEzCZ,EAyEX,WAAA,WAAA;AAIAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA5E9BZ,EA6EX,WAAA,QAAA;AAIAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB;AAAA,GAhF3CZ,EAiFX,WAAA,cAAA;AAEiBW,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAnFIb,EAmFM,WAAA,SAAA;AAoCnBc,EAAc,UAAUd,CAAK;"}

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

@@ -0,0 +1,59 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-icon/kt-icon.js';
+export interface KtFeature {
+    /** An icon's name, drawn in a tinted square over the title. */
+    readonly icon?: string;
+    readonly title: string;
+    readonly description: string;
+    /** Makes the title a link: where to read more. */
+    readonly href?: string;
+}
+export type KtFeatureGridVariant = 'plain' | 'card';
+/**
+ * What the product does, a feature at a time: an icon, a title and a line,
+ * in a grid.
+ *
+ * The features are data: `grid.features = [{ icon, title, description, href }]`,
+ * drawn as a list. `columns` sets how many per row where there is room — a
+ * narrow grid is one column; `card` puts each feature on a card.
+ *
+ * @element kt-feature-grid
+ *
+ * @csspart base - The section.
+ * @csspart list - The `<ul>`.
+ * @csspart feature - One feature.
+ *
+ * @example
+ * ```html
+ * <kt-feature-grid heading="Why teams switch" lead="Less chasing, more paid."></kt-feature-grid>
+ * <script>
+ *   grid.features = [
+ *     { icon: 'send', title: 'Sent in a second', description: 'From the quote, in one click.' },
+ *   ];
+ * </script>
+ * ```
+ */
+export declare class KtFeatureGrid extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    heading: string;
+    lead: string;
+    /** `center` or `start`: the head over the grid. */
+    align: 'center' | 'start';
+    /** The features, drawn in order. */
+    features: readonly KtFeature[];
+    /** Features per row, where there is room: 2, 3 or 4. */
+    columns: 2 | 3 | 4;
+    /** `plain`, or `card`: each feature on a card. */
+    variant: KtFeatureGridVariant;
+    /** The heading's level; the features' titles sit one under. */
+    headingLevel: number;
+    private readonly headingId;
+    private feature;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-feature-grid': KtFeatureGrid;
+    }
+}

package/dist/components/blocks/kt-feature-grid/kt-feature-grid.js

@@ -0,0 +1,166 @@
+import { css as h, html as o, nothing as c } from "lit";
+import { property as r } from "lit/decorators.js";
+import { K as p, d as u } from "../../../chunks/kt-element-DvWtPQ1Y.js";
+import { b as m, a as f, c as g } from "../../../chunks/block-Cci-Kff_.js";
+import { h as v } from "../../../chunks/heading-DsnZsfg-.js";
+import "../../core/kt-icon/kt-icon.js";
+var b = Object.defineProperty, a = (n, t, s, y) => {
+  for (var i = void 0, l = n.length - 1, d; l >= 0; l--)
+    (d = n[l]) && (i = d(t, s, i) || i);
+  return i && b(t, s, i), i;
+};
+class e extends p {
+  constructor() {
+    super(...arguments), this.heading = "", this.lead = "", this.align = "center", this.features = [], this.columns = 3, this.variant = "plain", this.headingLevel = 2, this.headingId = m("kt-feature-grid");
+  }
+  static {
+    this.styles = [
+      p.styles,
+      f,
+      h`
+      :host {
+        --kt-feature-columns: 3;
+      }
+      :host([columns='2']) {
+        --kt-feature-columns: 2;
+      }
+      :host([columns='4']) {
+        --kt-feature-columns: 4;
+      }
+
+      .list {
+        display: grid;
+        grid-template-columns: repeat(var(--kt-feature-columns), minmax(0, 1fr));
+        gap: calc(var(--gap-card) * 2) calc(var(--gap-card) * 1.5);
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+      /* Two columns before one: four or three would be cramped. */
+      @container (max-width: 760px) {
+        .list {
+          grid-template-columns: repeat(min(2, var(--kt-feature-columns)), minmax(0, 1fr));
+        }
+      }
+      @container (max-width: 480px) {
+        .list {
+          grid-template-columns: minmax(0, 1fr);
+        }
+      }
+
+      .feature {
+        position: relative;
+        display: grid;
+        align-content: start;
+        gap: 8px;
+        min-width: 0;
+        text-align: start;
+      }
+      :host([variant='card']) .feature {
+        padding: var(--padding-card);
+        border: var(--border-width) solid var(--border-subtle);
+        border-radius: var(--border-radius-card);
+        transition: border-color var(--duration-instant);
+      }
+      :host([variant='card']) .feature:has(a):hover {
+        border-color: var(--color-primary-base);
+      }
+
+      .icon {
+        display: grid;
+        place-items: center;
+        width: 40px;
+        height: 40px;
+        margin-bottom: 4px;
+        color: var(--color-primary-text);
+        background-color: var(--color-primary-soft);
+        border-radius: var(--border-radius);
+      }
+
+      .title {
+        margin: 0;
+        color: var(--text-body);
+        font: var(--font-title-h6);
+      }
+      .title a {
+        color: inherit;
+        text-decoration: none;
+      }
+      /* The whole feature answers the link. */
+      .title a::after {
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        content: '';
+      }
+      .title a:hover {
+        color: var(--color-primary-text);
+      }
+      .feature:has(a:focus-visible) {
+        border-radius: var(--border-radius-card);
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: 4px;
+      }
+      .title a:focus-visible {
+        outline: none;
+      }
+
+      .description {
+        margin: 0;
+        color: var(--text-muted);
+        font: var(--font-normal-regular);
+        line-height: 1.6;
+        text-wrap: pretty;
+      }
+    `
+    ];
+  }
+  feature(t) {
+    const s = t.href ? o`<a href=${t.href}>${t.title}</a>` : o`${t.title}`;
+    return o`<li part="feature" class="feature">
+      ${t.icon ? o`<span class="icon" aria-hidden="true"
+              ><kt-icon name=${t.icon} size="20"></kt-icon
+            ></span>` : c}
+      ${v(this.headingLevel + 1, s, "title", 3)}
+      <p class="description">${t.description}</p>
+    </li>`;
+  }
+  render() {
+    return o`<section
+      part="base"
+      class="block"
+      aria-labelledby=${this.heading ? this.headingId : c}
+    >
+      ${g({ title: this.heading, lead: this.lead, level: this.headingLevel, id: this.headingId })}
+      <ul part="list" class="list" role="list">
+        ${this.features.map((t) => this.feature(t))}
+      </ul>
+    </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({ attribute: !1 })
+], e.prototype, "features");
+a([
+  r({ type: Number, reflect: !0 })
+], e.prototype, "columns");
+a([
+  r({ type: String, reflect: !0 })
+], e.prototype, "variant");
+a([
+  r({ type: Number, attribute: "heading-level" })
+], e.prototype, "headingLevel");
+u("kt-feature-grid", e);
+export {
+  e as KtFeatureGrid
+};
+//# sourceMappingURL=kt-feature-grid.js.map

package/dist/components/blocks/kt-feature-grid/kt-feature-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-feature-grid.js","sources":["../../../../src/components/blocks/kt-feature-grid/kt-feature-grid.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { blockHead, blockId, blockStyles } from '#internal/block';\nimport { heading } from '#internal/heading';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport interface KtFeature {\n  /** An icon's name, drawn in a tinted square over the title. */\n  readonly icon?: string;\n  readonly title: string;\n  readonly description: string;\n  /** Makes the title a link: where to read more. */\n  readonly href?: string;\n}\n\nexport type KtFeatureGridVariant = 'plain' | 'card';\n\n/**\n * What the product does, a feature at a time: an icon, a title and a line,\n * in a grid.\n *\n * The features are data: `grid.features = [{ icon, title, description, href }]`,\n * drawn as a list. `columns` sets how many per row where there is room — a\n * narrow grid is one column; `card` puts each feature on a card.\n *\n * @element kt-feature-grid\n *\n * @csspart base - The section.\n * @csspart list - The `<ul>`.\n * @csspart feature - One feature.\n *\n * @example\n * ```html\n * <kt-feature-grid heading=\"Why teams switch\" lead=\"Less chasing, more paid.\"></kt-feature-grid>\n * <script>\n *   grid.features = [\n *     { icon: 'send', title: 'Sent in a second', description: 'From the quote, in one click.' },\n *   ];\n * </script>\n * ```\n */\nexport class KtFeatureGrid extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    blockStyles,\n    css`\n      :host {\n        --kt-feature-columns: 3;\n      }\n      :host([columns='2']) {\n        --kt-feature-columns: 2;\n      }\n      :host([columns='4']) {\n        --kt-feature-columns: 4;\n      }\n\n      .list {\n        display: grid;\n        grid-template-columns: repeat(var(--kt-feature-columns), minmax(0, 1fr));\n        gap: calc(var(--gap-card) * 2) calc(var(--gap-card) * 1.5);\n        margin: 0;\n        padding: 0;\n        list-style: none;\n      }\n      /* Two columns before one: four or three would be cramped. */\n      @container (max-width: 760px) {\n        .list {\n          grid-template-columns: repeat(min(2, var(--kt-feature-columns)), minmax(0, 1fr));\n        }\n      }\n      @container (max-width: 480px) {\n        .list {\n          grid-template-columns: minmax(0, 1fr);\n        }\n      }\n\n      .feature {\n        position: relative;\n        display: grid;\n        align-content: start;\n        gap: 8px;\n        min-width: 0;\n        text-align: start;\n      }\n      :host([variant='card']) .feature {\n        padding: var(--padding-card);\n        border: var(--border-width) solid var(--border-subtle);\n        border-radius: var(--border-radius-card);\n        transition: border-color var(--duration-instant);\n      }\n      :host([variant='card']) .feature:has(a):hover {\n        border-color: var(--color-primary-base);\n      }\n\n      .icon {\n        display: grid;\n        place-items: center;\n        width: 40px;\n        height: 40px;\n        margin-bottom: 4px;\n        color: var(--color-primary-text);\n        background-color: var(--color-primary-soft);\n        border-radius: var(--border-radius);\n      }\n\n      .title {\n        margin: 0;\n        color: var(--text-body);\n        font: var(--font-title-h6);\n      }\n      .title a {\n        color: inherit;\n        text-decoration: none;\n      }\n      /* The whole feature answers the link. */\n      .title a::after {\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n        content: '';\n      }\n      .title a:hover {\n        color: var(--color-primary-text);\n      }\n      .feature:has(a:focus-visible) {\n        border-radius: var(--border-radius-card);\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 4px;\n      }\n      .title a:focus-visible {\n        outline: none;\n      }\n\n      .description {\n        margin: 0;\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n        line-height: 1.6;\n        text-wrap: pretty;\n      }\n    `,\n  ];\n\n  @property({ type: String })\n  heading = '';\n\n  @property({ type: String })\n  lead = '';\n\n  /** `center` or `start`: the head over the grid. */\n  @property({ type: String, reflect: true })\n  align: 'center' | 'start' = 'center';\n\n  /** The features, drawn in order. */\n  @property({ attribute: false })\n  features: readonly KtFeature[] = [];\n\n  /** Features per row, where there is room: 2, 3 or 4. */\n  @property({ type: Number, reflect: true })\n  columns: 2 | 3 | 4 = 3;\n\n  /** `plain`, or `card`: each feature on a card. */\n  @property({ type: String, reflect: true })\n  variant: KtFeatureGridVariant = 'plain';\n\n  /** The heading's level; the features' titles sit one under. */\n  @property({ type: Number, attribute: 'heading-level' })\n  headingLevel = 2;\n\n  private readonly headingId = blockId('kt-feature-grid');\n\n  private feature(feature: KtFeature): TemplateResult {\n    const title = feature.href\n      ? html`<a href=${feature.href}>${feature.title}</a>`\n      : html`${feature.title}`;\n    return html`<li part=\"feature\" class=\"feature\">\n      ${\n        feature.icon\n          ? html`<span class=\"icon\" aria-hidden=\"true\"\n              ><kt-icon name=${feature.icon} size=\"20\"></kt-icon\n            ></span>`\n          : nothing\n      }\n      ${heading(this.headingLevel + 1, title, 'title', 3)}\n      <p class=\"description\">${feature.description}</p>\n    </li>`;\n  }\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      ${blockHead({ title: this.heading, lead: this.lead, level: this.headingLevel, id: this.headingId })}\n      <ul part=\"list\" class=\"list\" role=\"list\">\n        ${this.features.map((feature) => this.feature(feature))}\n      </ul>\n    </section>`;\n  }\n}\n\ndefineElement('kt-feature-grid', KtFeatureGrid);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-feature-grid': KtFeatureGrid;\n  }\n}\n"],"names":["KtFeatureGrid","KtElement","blockId","blockStyles","css","feature","title","html","nothing","heading","blockHead","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;;AA0CO,MAAMA,UAAsBC,EAAU;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAuGL,KAAA,UAAU,IAGV,KAAA,OAAO,IAIP,KAAA,QAA4B,UAI5B,KAAA,WAAiC,CAAA,GAIjC,KAAA,UAAqB,GAIrB,KAAA,UAAgC,SAIhC,KAAA,eAAe,GAEf,KAAiB,YAAYC,EAAQ,iBAAiB;AAAA,EAAA;AAAA,EA/HtD,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;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,EAgGF;AAAA,EA8BQ,QAAQC,GAAoC;AAClD,UAAMC,IAAQD,EAAQ,OAClBE,YAAeF,EAAQ,IAAI,IAAIA,EAAQ,KAAK,SAC5CE,IAAOF,EAAQ,KAAK;AACxB,WAAOE;AAAA,QAEHF,EAAQ,OACJE;AAAA,+BACmBF,EAAQ,IAAI;AAAA,wBAE/BG,CACN;AAAA,QACEC,EAAQ,KAAK,eAAe,GAAGH,GAAO,SAAS,CAAC,CAAC;AAAA,+BAC1BD,EAAQ,WAAW;AAAA;AAAA,EAEhD;AAAA,EAES,SAAyB;AAChC,WAAOE;AAAA;AAAA;AAAA,wBAGa,KAAK,UAAU,KAAK,YAAYC,CAAO;AAAA;AAAA,QAEvDE,EAAU,EAAE,OAAO,KAAK,SAAS,MAAM,KAAK,MAAM,OAAO,KAAK,cAAc,IAAI,KAAK,UAAA,CAAW,CAAC;AAAA;AAAA,UAE/F,KAAK,SAAS,IAAI,CAACL,MAAY,KAAK,QAAQA,CAAO,CAAC,CAAC;AAAA;AAAA;AAAA,EAG7D;AACF;AAxDEM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtGfZ,EAuGX,WAAA,SAAA;AAGAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAzGfZ,EA0GX,WAAA,MAAA;AAIAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA7G9BZ,EA8GX,WAAA,OAAA;AAIAW,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GAjHnBZ,EAkHX,WAAA,UAAA;AAIAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GArH9BZ,EAsHX,WAAA,SAAA;AAIAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAzH9BZ,EA0HX,WAAA,SAAA;AAIAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB;AAAA,GA7H3CZ,EA8HX,WAAA,cAAA;AAmCFa,EAAc,mBAAmBb,CAAa;"}

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

@@ -0,0 +1,51 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+export type KtHeroLayout = 'stacked' | 'split';
+/**
+ * The top of a page: what the product is, in a heading and a line, and the
+ * way in.
+ *
+ * `stacked`, the default, puts the media under the words — a screenshot, a
+ * live demo; `split` sets it beside them once the hero is wide enough.
+ * `align` centres the words or keeps them at the start.
+ *
+ * @element kt-hero
+ *
+ * @slot announcement - Above the heading: what is new, as a link.
+ * @slot actions - Under the lead: the buttons.
+ * @slot note - Under the actions: what it costs, what it needs.
+ * @slot media - A screenshot, an illustration, a live demo.
+ *
+ * @csspart base - The section.
+ * @csspart media - The media's box.
+ *
+ * @example
+ * ```html
+ * <kt-hero heading="Invoices that pay themselves" lead="Send, chase and reconcile, in one place.">
+ *   <kt-button slot="actions" size="large">Start free</kt-button>
+ *   <img slot="media" src="/screenshot.png" alt="The invoices screen" />
+ * </kt-hero>
+ * ```
+ */
+export declare class KtHero extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    heading: string;
+    lead: string;
+    /** `center` or `start`. */
+    align: 'center' | 'start';
+    /** `stacked`: the media under the words. `split`: beside them, where there is room. */
+    layout: KtHeroLayout;
+    /** The heading's level: 1, since a hero opens its page. */
+    headingLevel: number;
+    private filled;
+    private readonly headingId;
+    firstUpdated(): void;
+    private readSlots;
+    private region;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-hero': KtHero;
+    }
+}

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

@@ -0,0 +1,138 @@
+import { css as p, html as n } from "lit";
+import { property as r, state as c } from "lit/decorators.js";
+import { K as h, d as m } from "../../../chunks/kt-element-DvWtPQ1Y.js";
+import { b as g, a as f, c as y } from "../../../chunks/block-Cci-Kff_.js";
+import { h as u } from "../../../chunks/slots-BPbIdxAJ.js";
+var v = Object.defineProperty, s = (o, t, e, b) => {
+  for (var a = void 0, l = o.length - 1, d; l >= 0; l--)
+    (d = o[l]) && (a = d(t, e, a) || a);
+  return a && v(t, e, a), a;
+};
+class i extends h {
+  constructor() {
+    super(...arguments), this.heading = "", this.lead = "", this.align = "center", this.layout = "stacked", this.headingLevel = 1, this.filled = /* @__PURE__ */ new Set(), this.headingId = g("kt-hero"), this.readSlots = () => {
+      const t = /* @__PURE__ */ new Set();
+      for (const e of this.shadowRoot?.querySelectorAll("slot") ?? [])
+        u(e) && t.add(e.name);
+      this.filled = t;
+    };
+  }
+  static {
+    this.styles = [
+      h.styles,
+      f,
+      p`
+      .hero {
+        display: grid;
+        gap: calc(var(--gap-card) * 2.5);
+        padding-block: var(--kt-block-padding, calc(var(--padding-card) * 4));
+      }
+
+      .words {
+        display: grid;
+        gap: var(--gap-card);
+      }
+      :host([align='center']) .words {
+        justify-items: center;
+        text-align: center;
+      }
+      .block-head {
+        max-width: 820px;
+      }
+      .block-heading {
+        font: 600 clamp(36px, 6cqi, 72px) / 1.04 var(--font-family-display);
+        letter-spacing: -0.035em;
+      }
+      .block-lead {
+        font-size: calc(19px * var(--text-scale, 1));
+      }
+
+      .actions,
+      .announcement {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--gap-button);
+        align-items: center;
+      }
+      :host([align='center']) .actions {
+        justify-content: center;
+      }
+      .note {
+        color: var(--text-muted);
+        font: var(--font-normal-regular);
+      }
+      .empty {
+        display: none;
+      }
+
+      .media {
+        min-width: 0;
+      }
+      .media ::slotted(img) {
+        display: block;
+        max-width: 100%;
+        height: auto;
+        border-radius: var(--border-radius-card);
+      }
+
+      /* Split: the words and the media side by side, where they fit. */
+      @container (min-width: 880px) {
+        :host([layout='split']) .hero {
+          grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
+          align-items: center;
+        }
+        :host([layout='split']) .words {
+          justify-items: start;
+          text-align: start;
+        }
+        :host([layout='split']) .actions {
+          justify-content: flex-start;
+        }
+      }
+    `
+    ];
+  }
+  firstUpdated() {
+    this.readSlots();
+  }
+  region(t, e = t) {
+    return n`<div class=${this.filled.has(t) ? e : `${e} empty`}>
+      <slot name=${t} @slotchange=${this.readSlots}></slot>
+    </div>`;
+  }
+  render() {
+    return n`<section part="base" class="hero" aria-labelledby=${this.headingId}>
+      <div class="words">
+        ${this.region("announcement")}
+        ${y({ title: this.heading, lead: this.lead, level: this.headingLevel, id: this.headingId })}
+        ${this.region("actions")} ${this.region("note")}
+      </div>
+      <div part="media" class=${this.filled.has("media") ? "media" : "media empty"}>
+        <slot name="media" @slotchange=${this.readSlots}></slot>
+      </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, "layout");
+s([
+  r({ type: Number, attribute: "heading-level" })
+], i.prototype, "headingLevel");
+s([
+  c()
+], i.prototype, "filled");
+m("kt-hero", i);
+export {
+  i as KtHero
+};
+//# sourceMappingURL=kt-hero.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kt-hero.js","sources":["../../../../src/components/blocks/kt-hero/kt-hero.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 KtHeroLayout = 'stacked' | 'split';\n\n/**\n * The top of a page: what the product is, in a heading and a line, and the\n * way in.\n *\n * `stacked`, the default, puts the media under the words — a screenshot, a\n * live demo; `split` sets it beside them once the hero is wide enough.\n * `align` centres the words or keeps them at the start.\n *\n * @element kt-hero\n *\n * @slot announcement - Above the heading: what is new, as a link.\n * @slot actions - Under the lead: the buttons.\n * @slot note - Under the actions: what it costs, what it needs.\n * @slot media - A screenshot, an illustration, a live demo.\n *\n * @csspart base - The section.\n * @csspart media - The media's box.\n *\n * @example\n * ```html\n * <kt-hero heading=\"Invoices that pay themselves\" lead=\"Send, chase and reconcile, in one place.\">\n *   <kt-button slot=\"actions\" size=\"large\">Start free</kt-button>\n *   <img slot=\"media\" src=\"/screenshot.png\" alt=\"The invoices screen\" />\n * </kt-hero>\n * ```\n */\nexport class KtHero extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    blockStyles,\n    css`\n      .hero {\n        display: grid;\n        gap: calc(var(--gap-card) * 2.5);\n        padding-block: var(--kt-block-padding, calc(var(--padding-card) * 4));\n      }\n\n      .words {\n        display: grid;\n        gap: var(--gap-card);\n      }\n      :host([align='center']) .words {\n        justify-items: center;\n        text-align: center;\n      }\n      .block-head {\n        max-width: 820px;\n      }\n      .block-heading {\n        font: 600 clamp(36px, 6cqi, 72px) / 1.04 var(--font-family-display);\n        letter-spacing: -0.035em;\n      }\n      .block-lead {\n        font-size: calc(19px * var(--text-scale, 1));\n      }\n\n      .actions,\n      .announcement {\n        display: flex;\n        flex-wrap: wrap;\n        gap: var(--gap-button);\n        align-items: center;\n      }\n      :host([align='center']) .actions {\n        justify-content: center;\n      }\n      .note {\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n      }\n      .empty {\n        display: none;\n      }\n\n      .media {\n        min-width: 0;\n      }\n      .media ::slotted(img) {\n        display: block;\n        max-width: 100%;\n        height: auto;\n        border-radius: var(--border-radius-card);\n      }\n\n      /* Split: the words and the media side by side, where they fit. */\n      @container (min-width: 880px) {\n        :host([layout='split']) .hero {\n          grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);\n          align-items: center;\n        }\n        :host([layout='split']) .words {\n          justify-items: start;\n          text-align: start;\n        }\n        :host([layout='split']) .actions {\n          justify-content: flex-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  /** `stacked`: the media under the words. `split`: beside them, where there is room. */\n  @property({ type: String, reflect: true })\n  layout: KtHeroLayout = 'stacked';\n\n  /** The heading's level: 1, since a hero opens its page. */\n  @property({ type: Number, attribute: 'heading-level' })\n  headingLevel = 1;\n\n  @state() private filled = new Set<string>();\n\n  private readonly headingId = blockId('kt-hero');\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, className = name): TemplateResult {\n    return html`<div class=${this.filled.has(name) ? className : `${className} empty`}>\n      <slot name=${name} @slotchange=${this.readSlots}></slot>\n    </div>`;\n  }\n\n  override render(): TemplateResult {\n    return html`<section part=\"base\" class=\"hero\" aria-labelledby=${this.headingId}>\n      <div class=\"words\">\n        ${this.region('announcement')}\n        ${blockHead({ title: this.heading, lead: this.lead, level: this.headingLevel, id: this.headingId })}\n        ${this.region('actions')} ${this.region('note')}\n      </div>\n      <div part=\"media\" class=${this.filled.has('media') ? 'media' : 'media empty'}>\n        <slot name=\"media\" @slotchange=${this.readSlots}></slot>\n      </div>\n    </section>`;\n  }\n}\n\ndefineElement('kt-hero', KtHero);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-hero': KtHero;\n  }\n}\n"],"names":["KtHero","KtElement","blockId","filled","slot","hasAssignedContent","blockStyles","css","name","className","html","blockHead","__decorateClass","property","state","defineElement"],"mappings":";;;;;;;;;;AAkCO,MAAMA,UAAeC,EAAU;AAAA,EAA/B,cAAA;AAAA,UAAA,GAAA,SAAA,GA4EL,KAAA,UAAU,IAGV,KAAA,OAAO,IAIP,KAAA,QAA4B,UAI5B,KAAA,SAAuB,WAIvB,KAAA,eAAe,GAEN,KAAQ,6BAAa,IAAA,GAE9B,KAAiB,YAAYC,EAAQ,SAAS,GAM9C,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,EA1GA,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAqEF;AAAA,EAwBS,eAAqB;AAC5B,SAAK,UAAA;AAAA,EACP;AAAA,EAUQ,OAAOC,GAAcC,IAAYD,GAAsB;AAC7D,WAAOE,eAAkB,KAAK,OAAO,IAAIF,CAAI,IAAIC,IAAY,GAAGA,CAAS,QAAQ;AAAA,mBAClED,CAAI,gBAAgB,KAAK,SAAS;AAAA;AAAA,EAEnD;AAAA,EAES,SAAyB;AAChC,WAAOE,sDAAyD,KAAK,SAAS;AAAA;AAAA,UAExE,KAAK,OAAO,cAAc,CAAC;AAAA,UAC3BC,EAAU,EAAE,OAAO,KAAK,SAAS,MAAM,KAAK,MAAM,OAAO,KAAK,cAAc,IAAI,KAAK,UAAA,CAAW,CAAC;AAAA,UACjG,KAAK,OAAO,SAAS,CAAC,IAAI,KAAK,OAAO,MAAM,CAAC;AAAA;AAAA,gCAEvB,KAAK,OAAO,IAAI,OAAO,IAAI,UAAU,aAAa;AAAA,yCACzC,KAAK,SAAS;AAAA;AAAA;AAAA,EAGrD;AACF;AAnDEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA3Efb,EA4EX,WAAA,SAAA;AAGAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA9Efb,EA+EX,WAAA,MAAA;AAIAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAlF9Bb,EAmFX,WAAA,OAAA;AAIAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAtF9Bb,EAuFX,WAAA,QAAA;AAIAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB;AAAA,GA1F3Cb,EA2FX,WAAA,cAAA;AAEiBY,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA7FId,EA6FM,WAAA,QAAA;AAoCnBe,EAAc,WAAWf,CAAM;"}

package/dist/components/blocks/kt-logo-cloud/kt-logo-cloud.d.ts

@@ -0,0 +1,46 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+/**
+ * Who uses it, in their logos: a line of marks under a caption — "Trusted by
+ * finance teams at".
+ *
+ * The logos are the default slot: images or inline SVGs, each with its
+ * company's name as `alt` or `aria-label`. They are drawn at one height, grey
+ * until hovered, so no brand shouts over another; `colour` keeps their
+ * colours.
+ *
+ * @element kt-logo-cloud
+ *
+ * @slot - The logos.
+ *
+ * @csspart base - The section.
+ * @csspart logos - The row of logos.
+ *
+ * @cssproperty --kt-logo-height - The logos' height. 28px.
+ *
+ * @example
+ * ```html
+ * <kt-logo-cloud heading="Trusted by finance teams at">
+ *   <img src="/logos/northwind.svg" alt="Northwind" />
+ *   <img src="/logos/kiln.svg" alt="Kiln" />
+ * </kt-logo-cloud>
+ * ```
+ */
+export declare class KtLogoCloud extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The caption over the logos: "Trusted by finance teams at". */
+    heading: string;
+    /** `center` or `start`. */
+    align: 'center' | 'start';
+    /** Keeps the logos' colours, rather than grey until hovered. */
+    colour: boolean;
+    /** The caption's level: a heading, set small. */
+    headingLevel: number;
+    private readonly headingId;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-logo-cloud': KtLogoCloud;
+    }
+}