kanto-ds 1.7.0 → 1.9.0

package/dist/components/blocks/kt-pricing-table/kt-pricing-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-pricing-table.js","sources":["../../../../src/components/blocks/kt-pricing-table/kt-pricing-table.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 { emit } from '#internal/events';\nimport { heading } from '#internal/heading';\nimport { hasAssignedContent } from '#internal/slots';\nimport '../../core/kt-badge/kt-badge.js';\nimport '../../core/kt-button/kt-button.js';\nimport '../../core/kt-icon/kt-icon.js';\nimport '../../navigation/kt-segmented-control/kt-segmented-control.js';\n\nexport type KtBilling = 'monthly' | 'yearly';\n\n/** A number is formatted in `currency`; a string, \"Custom\", is shown as written. */\nexport type KtPlanPrice = number | string;\n\nexport interface KtPlan {\n  readonly id: string;\n  readonly name: string;\n  readonly description?: string;\n  /** One price, or one per billing period — which shows the switch. */\n  readonly price: KtPlanPrice | { readonly monthly: KtPlanPrice; readonly yearly: KtPlanPrice };\n  /** What the plan includes, a line each. */\n  readonly features: readonly string[];\n  /** The button's words. Get started until given others. */\n  readonly action?: string;\n  /** Makes the button a link. Without it, the button fires `kt-plan`. */\n  readonly href?: string;\n  /** The plan to pick: raised, and badged. */\n  readonly featured?: boolean;\n}\n\n/** Every word the table says, in English until given others. */\nexport interface KtPricingTableTexts {\n  readonly monthly: string;\n  readonly yearly: string;\n  readonly billing: string;\n  readonly perMonth: string;\n  readonly perYear: string;\n  readonly featured: string;\n  readonly action: string;\n}\n\nconst TEXTS: KtPricingTableTexts = {\n  monthly: 'Monthly',\n  yearly: 'Yearly',\n  billing: 'Billing period',\n  perMonth: '/month',\n  perYear: '/year',\n  featured: 'Most popular',\n  action: 'Get started',\n};\n\n/**\n * The plans, side by side: what each costs, what it includes, and the way in —\n * with a switch between monthly and yearly prices when the plans have both.\n *\n * The plans are data: `table.plans = [{ id, name, price, features }]`. A price\n * that is a number is formatted in `currency`; a string is shown as written. A\n * plan's button fires `kt-plan`, or is a link with an `href`.\n *\n * @element kt-pricing-table\n *\n * @slot note - Under the plans: taxes, a link to compare every feature.\n *\n * @csspart base - The section.\n * @csspart plan - One plan.\n *\n * @fires kt-billing - The billing period changed. `detail: { billing }`.\n * @fires kt-plan - A plan's button was pressed. `detail: { id, billing }`.\n *\n * @example\n * ```html\n * <kt-pricing-table heading=\"Pricing\" currency=\"EUR\" yearly-note=\"2 months free\"></kt-pricing-table>\n * <script>\n *   table.plans = [\n *     { id: 'team', name: 'Team', price: { monthly: 29, yearly: 290 }, features: ['Unlimited invoices'] },\n *   ];\n * </script>\n * ```\n */\nexport class KtPricingTable extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    blockStyles,\n    css`\n      .switch {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 12px;\n        align-items: center;\n      }\n      :host([align='center']) .switch {\n        justify-content: center;\n      }\n      .saving {\n        color: var(--color-primary-text);\n        font: var(--font-normal-small);\n      }\n\n      .plans {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));\n        gap: var(--gap-card);\n        align-items: stretch;\n        margin: 0;\n        padding: 0;\n        list-style: none;\n      }\n\n      .plan {\n        display: flex;\n        flex-direction: column;\n        gap: var(--gap-card);\n        min-width: 0;\n        text-align: start;\n        padding: calc(var(--padding-card) * 1.25);\n        border: var(--border-width) solid var(--border-subtle);\n        border-radius: var(--border-radius-card);\n      }\n      .plan.featured {\n        border-color: var(--color-primary-base);\n        box-shadow: 0 0 0 1px var(--color-primary-base);\n      }\n\n      .plan-head {\n        display: grid;\n        gap: 6px;\n      }\n      .name-row {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 8px;\n        align-items: center;\n        justify-content: space-between;\n        min-height: 28px;\n      }\n      .plan-name {\n        margin: 0;\n        color: var(--text-body);\n        font: var(--font-title-h6);\n      }\n      .plan-description {\n        margin: 0;\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n      }\n\n      .price {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 4px;\n        align-items: baseline;\n        margin: 0;\n      }\n      .amount {\n        color: var(--text-body);\n        font: 600 40px / 1.1 var(--font-family-display);\n        font-variant-numeric: tabular-nums;\n        letter-spacing: -0.03em;\n      }\n      .period {\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n      }\n\n      .action {\n        width: 100%;\n      }\n      a.action {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        height: var(--button-height);\n        padding: 0 var(--button-padding-x);\n        color: var(--color-primary-text);\n        font: var(--font-normal-regular);\n        text-decoration: none;\n        background-color: var(--color-primary-soft);\n        border-radius: var(--border-radius);\n        transition: background-color var(--duration-instant);\n      }\n      a.action:hover {\n        background-color: var(--color-secondary-hover);\n      }\n      .featured a.action {\n        color: var(--color-white);\n        background-color: var(--color-primary-base);\n      }\n      .featured a.action:hover {\n        background-color: var(--color-primary-hover);\n      }\n      a.action:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 2px;\n      }\n\n      .features {\n        display: grid;\n        gap: 10px;\n        margin: 0;\n        padding: var(--gap-card) 0 0;\n        color: var(--text-body);\n        font: var(--font-normal-regular);\n        list-style: none;\n        border-top: var(--border-width) solid var(--border-subtle);\n      }\n      .features li {\n        display: grid;\n        grid-template-columns: auto minmax(0, 1fr);\n        gap: 10px;\n        align-items: start;\n      }\n      .features kt-icon {\n        margin-top: 2px;\n        color: var(--color-primary-text);\n      }\n\n      .note {\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n      }\n      :host([align='center']) .note {\n        text-align: center;\n      }\n      .note.empty {\n        display: none;\n      }\n    `,\n  ];\n\n  @property({ type: String })\n  heading = '';\n\n  @property({ type: String })\n  lead = '';\n\n  /** `center` or `start`: the head and the switch. */\n  @property({ type: String, reflect: true })\n  align: 'center' | 'start' = 'center';\n\n  /** The plans, in order. */\n  @property({ attribute: false })\n  plans: readonly KtPlan[] = [];\n\n  /** The prices shown: `monthly` or `yearly`. */\n  @property({ type: String, reflect: true })\n  billing: KtBilling = 'monthly';\n\n  /** The currency numeric prices are in: an ISO code, USD until given another. */\n  @property({ type: String })\n  currency = 'USD';\n\n  /** The locale prices are formatted in; the page's language when empty. */\n  @property({ type: String })\n  locale = '';\n\n  /** Beside the switch: what paying yearly saves — \"2 months free\". */\n  @property({ type: String, attribute: 'yearly-note' })\n  yearlyNote = '';\n\n  /** The heading's level; the plans' names sit one under. */\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<KtPricingTableTexts> = {};\n\n  @state() private hasNote = false;\n\n  private readonly headingId = blockId('kt-pricing-table');\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  private get words(): KtPricingTableTexts {\n    return { ...TEXTS, ...this.texts };\n  }\n\n  private format(price: KtPlanPrice): string {\n    if (typeof price === 'string') return price;\n    const whole = Number.isInteger(price);\n    return new Intl.NumberFormat(this.locale || document.documentElement.lang || undefined, {\n      style: 'currency',\n      currency: this.currency,\n      minimumFractionDigits: whole ? 0 : 2,\n      maximumFractionDigits: whole ? 0 : 2,\n    }).format(price);\n  }\n\n  private choose(plan: KtPlan): void {\n    emit(this, 'kt-plan', { id: plan.id, billing: this.billing });\n  }\n\n  private onBilling(event: CustomEvent<{ value: string }>): void {\n    event.stopPropagation();\n    const billing: KtBilling = event.detail.value === 'yearly' ? 'yearly' : 'monthly';\n    if (billing === this.billing) return;\n    this.billing = billing;\n    emit(this, 'kt-billing', { billing });\n  }\n\n  private price(plan: KtPlan): TemplateResult {\n    const t = this.words;\n    const both = typeof plan.price === 'object';\n    const price = typeof plan.price === 'object' ? plan.price[this.billing] : plan.price;\n    const period =\n      typeof price === 'number' ? (both && this.billing === 'yearly' ? t.perYear : t.perMonth) : '';\n    return html`<p class=\"price\">\n      <span class=\"amount\">${this.format(price)}</span>\n      ${period ? html`<span class=\"period\">${period}</span>` : nothing}\n    </p>`;\n  }\n\n  private plan(plan: KtPlan): TemplateResult {\n    const t = this.words;\n    const label = plan.action || t.action;\n    return html`<li part=\"plan\" class=${plan.featured ? 'plan featured' : 'plan'}>\n      <div class=\"plan-head\">\n        <div class=\"name-row\">\n          ${heading(this.headingLevel + 1, plan.name, 'plan-name', 3)}\n          ${\n            plan.featured\n              ? html`<kt-badge class=\"badge\" tone=\"primary\" size=\"small\">${t.featured}</kt-badge>`\n              : nothing\n          }\n        </div>\n        ${plan.description ? html`<p class=\"plan-description\">${plan.description}</p>` : nothing}\n      </div>\n      ${this.price(plan)}\n      ${\n        plan.href\n          ? html`<a class=\"action\" href=${plan.href}>${label}</a>`\n          : html`<kt-button\n              class=\"action\"\n              variant=${plan.featured ? 'primary' : 'secondary'}\n              @click=${() => this.choose(plan)}\n              >${label}</kt-button\n            >`\n      }\n      ${\n        plan.features.length\n          ? html`<ul class=\"features\" role=\"list\">\n              ${plan.features.map(\n                (feature) =>\n                  html`<li>\n                    <kt-icon name=\"check\" size=\"16\" aria-hidden=\"true\"></kt-icon\n                    ><span>${feature}</span>\n                  </li>`,\n              )}\n            </ul>`\n          : nothing\n      }\n    </li>`;\n  }\n\n  override render(): TemplateResult {\n    const t = this.words;\n    const both = this.plans.some((plan) => typeof plan.price === 'object');\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      ${\n        both\n          ? html`<div class=\"switch\">\n              <kt-segmented-control\n                label=${t.billing}\n                .options=${[\n                  { value: 'monthly', label: t.monthly },\n                  { value: 'yearly', label: t.yearly },\n                ]}\n                .value=${this.billing}\n                @kt-change=${this.onBilling}\n              ></kt-segmented-control>\n              ${this.yearlyNote ? html`<span class=\"saving\">${this.yearlyNote}</span>` : nothing}\n            </div>`\n          : nothing\n      }\n      <ul class=\"plans\" role=\"list\">\n        ${this.plans.map((plan) => this.plan(plan))}\n      </ul>\n      <div class=${this.hasNote ? 'note' : 'note empty'}>\n        <slot name=\"note\" @slotchange=${this.readNote}></slot>\n      </div>\n    </section>`;\n  }\n}\n\ndefineElement('kt-pricing-table', KtPricingTable);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-pricing-table': KtPricingTable;\n  }\n}\n"],"names":["TEXTS","KtPricingTable","KtElement","blockId","blockStyles","css","hasAssignedContent","price","whole","plan","emit","event","billing","t","both","period","html","nothing","label","heading","feature","blockHead","__decorateClass","property","state","defineElement"],"mappings":"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"}

package/dist/components/blocks/kt-settings-section/kt-settings-section.d.ts

@@ -0,0 +1,52 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+export type KtSettingsSectionLayout = 'split' | 'stacked';
+/**
+ * One part of a settings page: what it is about, the fields that change it,
+ * and the button that saves them.
+ *
+ * `split`, the default, sets the heading and its description beside the
+ * fields once the section is wide enough — the settings page most products
+ * have; `stacked` puts them over the fields. `danger` marks the section that
+ * deletes things.
+ *
+ * @element kt-settings-section
+ *
+ * @slot - The fields.
+ * @slot actions - In the footer, at the end: Save, Cancel.
+ * @slot note - In the footer, at the start: when it was last saved, what saving does.
+ *
+ * @csspart base - The section.
+ * @csspart card - The fields and the footer.
+ * @csspart footer - The footer.
+ *
+ * @example
+ * ```html
+ * <kt-settings-section heading="Profile" description="How others see you in the workspace.">
+ *   <kt-label-input label="Name"><kt-input value="Ada Park"></kt-input></kt-label-input>
+ *   <kt-button slot="actions">Save</kt-button>
+ * </kt-settings-section>
+ * ```
+ */
+export declare class KtSettingsSection extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    heading: string;
+    /** What the section changes, under its heading. */
+    description: string;
+    /** `split`: the heading beside the fields, where there is room. `stacked`: over them. */
+    layout: KtSettingsSectionLayout;
+    /** The section that deletes things: its heading and card turn red. */
+    danger: boolean;
+    /** The heading's level. */
+    headingLevel: number;
+    private filled;
+    private readonly headingId;
+    firstUpdated(): void;
+    private readSlots;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-settings-section': KtSettingsSection;
+    }
+}

package/dist/components/blocks/kt-settings-section/kt-settings-section.js

@@ -0,0 +1,158 @@
+import { css as h, nothing as l, html as p } from "lit";
+import { property as s, state as g } from "lit/decorators.js";
+import { K as c, d as f } from "../../../chunks/kt-element-DvWtPQ1Y.js";
+import { b as m } from "../../../chunks/block-Cci-Kff_.js";
+import { h as v } from "../../../chunks/heading-DsnZsfg-.js";
+import { h as y } from "../../../chunks/slots-BPbIdxAJ.js";
+var b = Object.defineProperty, a = (o, t, r, u) => {
+  for (var i = void 0, d = o.length - 1, n; d >= 0; d--)
+    (n = o[d]) && (i = n(t, r, i) || i);
+  return i && b(t, r, i), i;
+};
+class e extends c {
+  constructor() {
+    super(...arguments), this.heading = "", this.description = "", this.layout = "split", this.danger = !1, this.headingLevel = 2, this.filled = /* @__PURE__ */ new Set(), this.headingId = m("kt-settings-section"), this.readSlots = () => {
+      const t = /* @__PURE__ */ new Set();
+      for (const r of this.shadowRoot?.querySelectorAll("slot") ?? [])
+        y(r) && t.add(r.name);
+      this.filled = t;
+    };
+  }
+  static {
+    this.styles = [
+      c.styles,
+      h`
+      :host {
+        display: block;
+        container-type: inline-size;
+      }
+
+      section {
+        display: grid;
+        gap: var(--gap-card);
+      }
+      @container (min-width: 760px) {
+        :host([layout='split']) section {
+          grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+          gap: calc(var(--gap-card) * 2);
+          align-items: start;
+        }
+      }
+
+      .about {
+        display: grid;
+        gap: 6px;
+        align-content: start;
+      }
+      .heading {
+        margin: 0;
+        color: var(--text-body);
+        font: var(--font-title-h6);
+      }
+      :host([danger]) .heading {
+        color: var(--color-danger-text);
+      }
+      .description {
+        margin: 0;
+        color: var(--text-muted);
+        font: var(--font-normal-regular);
+        line-height: 1.55;
+        text-wrap: pretty;
+      }
+
+      .card {
+        min-width: 0;
+        border: var(--border-width) solid var(--border-subtle);
+        border-radius: var(--border-radius-card);
+      }
+      :host([danger]) .card {
+        border-color: var(--color-danger-base);
+      }
+      .fields {
+        display: grid;
+        gap: var(--gap-form);
+        padding: calc(var(--padding-card) * 1.25);
+      }
+      .fields.empty {
+        display: none;
+      }
+
+      .footer {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px var(--gap-card);
+        align-items: center;
+        justify-content: space-between;
+        padding: 12px calc(var(--padding-card) * 1.25);
+        border-top: var(--border-width) solid var(--border-subtle);
+      }
+      .fields.empty + .footer {
+        border-top: 0;
+      }
+      .footer.empty {
+        display: none;
+      }
+      .note {
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+      }
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--gap-button);
+        margin-inline-start: auto;
+      }
+    `
+    ];
+  }
+  firstUpdated() {
+    this.readSlots();
+  }
+  render() {
+    const t = this.filled.has("actions") || this.filled.has("note");
+    return p`<section
+      part="base"
+      aria-labelledby=${this.headingId}
+      aria-describedby=${this.description ? `${this.headingId}-description` : l}
+    >
+      <div class="about">
+        <div id=${this.headingId}>${v(this.headingLevel, this.heading, "heading", 2)}</div>
+        ${this.description ? p`<p id=${`${this.headingId}-description`} class="description">
+                ${this.description}
+              </p>` : l}
+      </div>
+      <div part="card" class="card">
+        <div class=${this.filled.has("") ? "fields" : "fields empty"}>
+          <slot @slotchange=${this.readSlots}></slot>
+        </div>
+        <div part="footer" class=${t ? "footer" : "footer empty"}>
+          <span class="note"><slot name="note" @slotchange=${this.readSlots}></slot></span>
+          <span class="actions"><slot name="actions" @slotchange=${this.readSlots}></slot></span>
+        </div>
+      </div>
+    </section>`;
+  }
+}
+a([
+  s({ type: String })
+], e.prototype, "heading");
+a([
+  s({ type: String })
+], e.prototype, "description");
+a([
+  s({ type: String, reflect: !0 })
+], e.prototype, "layout");
+a([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "danger");
+a([
+  s({ type: Number, attribute: "heading-level" })
+], e.prototype, "headingLevel");
+a([
+  g()
+], e.prototype, "filled");
+f("kt-settings-section", e);
+export {
+  e as KtSettingsSection
+};
+//# sourceMappingURL=kt-settings-section.js.map

package/dist/components/blocks/kt-settings-section/kt-settings-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-settings-section.js","sources":["../../../../src/components/blocks/kt-settings-section/kt-settings-section.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 } from '#internal/block';\nimport { heading } from '#internal/heading';\nimport { hasAssignedContent } from '#internal/slots';\n\nexport type KtSettingsSectionLayout = 'split' | 'stacked';\n\n/**\n * One part of a settings page: what it is about, the fields that change it,\n * and the button that saves them.\n *\n * `split`, the default, sets the heading and its description beside the\n * fields once the section is wide enough — the settings page most products\n * have; `stacked` puts them over the fields. `danger` marks the section that\n * deletes things.\n *\n * @element kt-settings-section\n *\n * @slot - The fields.\n * @slot actions - In the footer, at the end: Save, Cancel.\n * @slot note - In the footer, at the start: when it was last saved, what saving does.\n *\n * @csspart base - The section.\n * @csspart card - The fields and the footer.\n * @csspart footer - The footer.\n *\n * @example\n * ```html\n * <kt-settings-section heading=\"Profile\" description=\"How others see you in the workspace.\">\n *   <kt-label-input label=\"Name\"><kt-input value=\"Ada Park\"></kt-input></kt-label-input>\n *   <kt-button slot=\"actions\">Save</kt-button>\n * </kt-settings-section>\n * ```\n */\nexport class KtSettingsSection extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n        container-type: inline-size;\n      }\n\n      section {\n        display: grid;\n        gap: var(--gap-card);\n      }\n      @container (min-width: 760px) {\n        :host([layout='split']) section {\n          grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);\n          gap: calc(var(--gap-card) * 2);\n          align-items: start;\n        }\n      }\n\n      .about {\n        display: grid;\n        gap: 6px;\n        align-content: start;\n      }\n      .heading {\n        margin: 0;\n        color: var(--text-body);\n        font: var(--font-title-h6);\n      }\n      :host([danger]) .heading {\n        color: var(--color-danger-text);\n      }\n      .description {\n        margin: 0;\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n        line-height: 1.55;\n        text-wrap: pretty;\n      }\n\n      .card {\n        min-width: 0;\n        border: var(--border-width) solid var(--border-subtle);\n        border-radius: var(--border-radius-card);\n      }\n      :host([danger]) .card {\n        border-color: var(--color-danger-base);\n      }\n      .fields {\n        display: grid;\n        gap: var(--gap-form);\n        padding: calc(var(--padding-card) * 1.25);\n      }\n      .fields.empty {\n        display: none;\n      }\n\n      .footer {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 12px var(--gap-card);\n        align-items: center;\n        justify-content: space-between;\n        padding: 12px calc(var(--padding-card) * 1.25);\n        border-top: var(--border-width) solid var(--border-subtle);\n      }\n      .fields.empty + .footer {\n        border-top: 0;\n      }\n      .footer.empty {\n        display: none;\n      }\n      .note {\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n      }\n      .actions {\n        display: flex;\n        flex-wrap: wrap;\n        gap: var(--gap-button);\n        margin-inline-start: auto;\n      }\n    `,\n  ];\n\n  @property({ type: String })\n  heading = '';\n\n  /** What the section changes, under its heading. */\n  @property({ type: String })\n  description = '';\n\n  /** `split`: the heading beside the fields, where there is room. `stacked`: over them. */\n  @property({ type: String, reflect: true })\n  layout: KtSettingsSectionLayout = 'split';\n\n  /** The section that deletes things: its heading and card turn red. */\n  @property({ type: Boolean, reflect: true })\n  danger = false;\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-settings-section');\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  override render(): TemplateResult {\n    const footer = this.filled.has('actions') || this.filled.has('note');\n    return html`<section\n      part=\"base\"\n      aria-labelledby=${this.headingId}\n      aria-describedby=${this.description ? `${this.headingId}-description` : nothing}\n    >\n      <div class=\"about\">\n        <div id=${this.headingId}>${heading(this.headingLevel, this.heading, 'heading', 2)}</div>\n        ${\n          this.description\n            ? html`<p id=${`${this.headingId}-description`} class=\"description\">\n                ${this.description}\n              </p>`\n            : nothing\n        }\n      </div>\n      <div part=\"card\" class=\"card\">\n        <div class=${this.filled.has('') ? 'fields' : 'fields empty'}>\n          <slot @slotchange=${this.readSlots}></slot>\n        </div>\n        <div part=\"footer\" class=${footer ? 'footer' : 'footer empty'}>\n          <span class=\"note\"><slot name=\"note\" @slotchange=${this.readSlots}></slot></span>\n          <span class=\"actions\"><slot name=\"actions\" @slotchange=${this.readSlots}></slot></span>\n        </div>\n      </div>\n    </section>`;\n  }\n}\n\ndefineElement('kt-settings-section', KtSettingsSection);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-settings-section': KtSettingsSection;\n  }\n}\n"],"names":["KtSettingsSection","KtElement","blockId","filled","slot","hasAssignedContent","css","footer","html","nothing","heading","__decorateClass","property","state","defineElement"],"mappings":";;;;;;;;;;;AAoCO,MAAMA,UAA0BC,EAAU;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA,GAwFL,KAAA,UAAU,IAIV,KAAA,cAAc,IAId,KAAA,SAAkC,SAIlC,KAAA,SAAS,IAIT,KAAA,eAAe,GAEN,KAAQ,6BAAa,IAAA,GAE9B,KAAiB,YAAYC,EAAQ,qBAAqB,GAM1D,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,EAvHA,OAAA;AAAA,SAAgB,SAAS;AAAA,MACvBF,EAAU;AAAA,MACVK;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,EAkFF;AAAA,EAyBS,eAAqB;AAC5B,SAAK,UAAA;AAAA,EACP;AAAA,EAUS,SAAyB;AAChC,UAAMC,IAAS,KAAK,OAAO,IAAI,SAAS,KAAK,KAAK,OAAO,IAAI,MAAM;AACnE,WAAOC;AAAA;AAAA,wBAEa,KAAK,SAAS;AAAA,yBACb,KAAK,cAAc,GAAG,KAAK,SAAS,iBAAiBC,CAAO;AAAA;AAAA;AAAA,kBAGnE,KAAK,SAAS,IAAIC,EAAQ,KAAK,cAAc,KAAK,SAAS,WAAW,CAAC,CAAC;AAAA,UAEhF,KAAK,cACDF,UAAa,GAAG,KAAK,SAAS,cAAc;AAAA,kBACxC,KAAK,WAAW;AAAA,sBAEpBC,CACN;AAAA;AAAA;AAAA,qBAGa,KAAK,OAAO,IAAI,EAAE,IAAI,WAAW,cAAc;AAAA,8BACtC,KAAK,SAAS;AAAA;AAAA,mCAETF,IAAS,WAAW,cAAc;AAAA,6DACR,KAAK,SAAS;AAAA,mEACR,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA,EAI/E;AACF;AA9DEI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAvFfZ,EAwFX,WAAA,SAAA;AAIAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA3FfZ,EA4FX,WAAA,aAAA;AAIAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA/F9BZ,EAgGX,WAAA,QAAA;AAIAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAnG/BZ,EAoGX,WAAA,QAAA;AAIAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB;AAAA,GAvG3CZ,EAwGX,WAAA,cAAA;AAEiBW,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA1GIb,EA0GM,WAAA,QAAA;AA8CnBc,EAAc,uBAAuBd,CAAiB;"}

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

@@ -0,0 +1,56 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-avatar/kt-avatar.js';
+export interface KtTestimonial {
+    readonly quote: string;
+    readonly name: string;
+    /** Their role and company: "CFO, Northwind". */
+    readonly role?: string;
+    /** A photo's URL; without one, the avatar shows their initials. */
+    readonly avatar?: string;
+}
+export type KtTestimonialsLayout = 'grid' | 'single';
+/**
+ * What the people who use it say: a quote, and who said it.
+ *
+ * The quotes are data: `wall.testimonials = [{ quote, name, role, avatar }]`.
+ * `grid`, the default, sets them in columns that pack quotes of any length;
+ * `single` gives each the width of the page, in larger type — for one quote
+ * that carries the section.
+ *
+ * @element kt-testimonials
+ *
+ * @csspart base - The section.
+ * @csspart testimonial - One quote and who said it.
+ *
+ * @example
+ * ```html
+ * <kt-testimonials heading="What teams say"></kt-testimonials>
+ * <script>
+ *   wall.testimonials = [
+ *     { quote: 'We closed the month in a day.', name: 'Ada Park', role: 'CFO, Northwind' },
+ *   ];
+ * </script>
+ * ```
+ */
+export declare class KtTestimonials extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    heading: string;
+    lead: string;
+    /** `center` or `start`. */
+    align: 'center' | 'start';
+    /** The quotes, in order. */
+    testimonials: readonly KtTestimonial[];
+    /** `grid`: in packed columns. `single`: each the page's width, large. */
+    layout: KtTestimonialsLayout;
+    /** The heading's level. */
+    headingLevel: number;
+    private readonly headingId;
+    private testimonial;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-testimonials': KtTestimonials;
+    }
+}

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

@@ -0,0 +1,161 @@
+import { css as c, nothing as p, html as n } from "lit";
+import { property as i } from "lit/decorators.js";
+import { K as g, d as m } from "../../../chunks/kt-element-DvWtPQ1Y.js";
+import { b as h, a as u, c as f } from "../../../chunks/block-Cci-Kff_.js";
+import "../../core/kt-avatar/kt-avatar.js";
+var y = Object.defineProperty, r = (l, t, s, b) => {
+  for (var a = void 0, o = l.length - 1, d; o >= 0; o--)
+    (d = l[o]) && (a = d(t, s, a) || a);
+  return a && y(t, s, a), a;
+};
+class e extends g {
+  constructor() {
+    super(...arguments), this.heading = "", this.lead = "", this.align = "center", this.testimonials = [], this.layout = "grid", this.headingLevel = 2, this.headingId = h("kt-testimonials");
+  }
+  static {
+    this.styles = [
+      g.styles,
+      u,
+      c`
+      .list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        columns: 3 260px;
+        column-gap: var(--gap-card);
+      }
+      .list > li {
+        break-inside: avoid;
+        margin-bottom: var(--gap-card);
+      }
+
+      figure {
+        display: grid;
+        gap: var(--gap-card);
+        margin: 0;
+        padding: calc(var(--padding-card) * 1.25);
+        text-align: start;
+        border: var(--border-width) solid var(--border-subtle);
+        border-radius: var(--border-radius-card);
+      }
+      blockquote {
+        margin: 0;
+        color: var(--text-body);
+        font: var(--font-normal-regular);
+        font-size: calc(16px * var(--text-scale, 1));
+        line-height: 1.6;
+        text-wrap: pretty;
+      }
+      blockquote p {
+        margin: 0;
+      }
+      blockquote p::before {
+        content: '“';
+      }
+      blockquote p::after {
+        content: '”';
+      }
+
+      figcaption {
+        display: flex;
+        gap: 12px;
+        align-items: center;
+        min-width: 0;
+      }
+      .who {
+        display: grid;
+        min-width: 0;
+      }
+      .name {
+        color: var(--text-body);
+        font: var(--font-normal-medium);
+      }
+      .role {
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+      }
+
+      /* Single: each quote the width of the page, set large, on no card. */
+      :host([layout='single']) .list {
+        columns: auto;
+        max-width: 820px;
+        margin-inline: auto;
+      }
+      :host([layout='single']) .list > li {
+        margin-bottom: calc(var(--gap-card) * 3);
+      }
+      :host([layout='single']) .list > li:last-child {
+        margin-bottom: 0;
+      }
+      :host([layout='single']) figure {
+        gap: calc(var(--gap-card) * 1.5);
+        padding: 0;
+        border: 0;
+      }
+      :host([layout='single'][align='center']) figure {
+        justify-items: center;
+        text-align: center;
+      }
+      :host([layout='single']) blockquote {
+        font: 500 clamp(20px, 3cqi, 28px) / 1.4 var(--font-family-display);
+        letter-spacing: -0.01em;
+        text-wrap: balance;
+      }
+    `
+    ];
+  }
+  testimonial(t) {
+    return n`<li>
+      <figure part="testimonial">
+        <blockquote><p>${t.quote}</p></blockquote>
+        <figcaption>
+          <kt-avatar
+            name=${t.name}
+            src=${t.avatar ?? ""}
+            size=${this.layout === "single" ? "large" : "medium"}
+            aria-hidden="true"
+          ></kt-avatar>
+          <span class="who">
+            <span class="name">${t.name}</span>
+            ${t.role ? n`<span class="role">${t.role}</span>` : p}
+          </span>
+        </figcaption>
+      </figure>
+    </li>`;
+  }
+  render() {
+    return n`<section
+      part="base"
+      class="block"
+      aria-labelledby=${this.heading ? this.headingId : p}
+    >
+      ${f({ title: this.heading, lead: this.lead, level: this.headingLevel, id: this.headingId })}
+      <ul class="list" role="list">
+        ${this.testimonials.map((t) => this.testimonial(t))}
+      </ul>
+    </section>`;
+  }
+}
+r([
+  i({ type: String })
+], e.prototype, "heading");
+r([
+  i({ type: String })
+], e.prototype, "lead");
+r([
+  i({ type: String, reflect: !0 })
+], e.prototype, "align");
+r([
+  i({ attribute: !1 })
+], e.prototype, "testimonials");
+r([
+  i({ type: String, reflect: !0 })
+], e.prototype, "layout");
+r([
+  i({ type: Number, attribute: "heading-level" })
+], e.prototype, "headingLevel");
+m("kt-testimonials", e);
+export {
+  e as KtTestimonials
+};
+//# sourceMappingURL=kt-testimonials.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kt-testimonials.js","sources":["../../../../src/components/blocks/kt-testimonials/kt-testimonials.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 '../../core/kt-avatar/kt-avatar.js';\n\nexport interface KtTestimonial {\n  readonly quote: string;\n  readonly name: string;\n  /** Their role and company: \"CFO, Northwind\". */\n  readonly role?: string;\n  /** A photo's URL; without one, the avatar shows their initials. */\n  readonly avatar?: string;\n}\n\nexport type KtTestimonialsLayout = 'grid' | 'single';\n\n/**\n * What the people who use it say: a quote, and who said it.\n *\n * The quotes are data: `wall.testimonials = [{ quote, name, role, avatar }]`.\n * `grid`, the default, sets them in columns that pack quotes of any length;\n * `single` gives each the width of the page, in larger type — for one quote\n * that carries the section.\n *\n * @element kt-testimonials\n *\n * @csspart base - The section.\n * @csspart testimonial - One quote and who said it.\n *\n * @example\n * ```html\n * <kt-testimonials heading=\"What teams say\"></kt-testimonials>\n * <script>\n *   wall.testimonials = [\n *     { quote: 'We closed the month in a day.', name: 'Ada Park', role: 'CFO, Northwind' },\n *   ];\n * </script>\n * ```\n */\nexport class KtTestimonials extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    blockStyles,\n    css`\n      .list {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n        columns: 3 260px;\n        column-gap: var(--gap-card);\n      }\n      .list > li {\n        break-inside: avoid;\n        margin-bottom: var(--gap-card);\n      }\n\n      figure {\n        display: grid;\n        gap: var(--gap-card);\n        margin: 0;\n        padding: calc(var(--padding-card) * 1.25);\n        text-align: start;\n        border: var(--border-width) solid var(--border-subtle);\n        border-radius: var(--border-radius-card);\n      }\n      blockquote {\n        margin: 0;\n        color: var(--text-body);\n        font: var(--font-normal-regular);\n        font-size: calc(16px * var(--text-scale, 1));\n        line-height: 1.6;\n        text-wrap: pretty;\n      }\n      blockquote p {\n        margin: 0;\n      }\n      blockquote p::before {\n        content: '“';\n      }\n      blockquote p::after {\n        content: '”';\n      }\n\n      figcaption {\n        display: flex;\n        gap: 12px;\n        align-items: center;\n        min-width: 0;\n      }\n      .who {\n        display: grid;\n        min-width: 0;\n      }\n      .name {\n        color: var(--text-body);\n        font: var(--font-normal-medium);\n      }\n      .role {\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n      }\n\n      /* Single: each quote the width of the page, set large, on no card. */\n      :host([layout='single']) .list {\n        columns: auto;\n        max-width: 820px;\n        margin-inline: auto;\n      }\n      :host([layout='single']) .list > li {\n        margin-bottom: calc(var(--gap-card) * 3);\n      }\n      :host([layout='single']) .list > li:last-child {\n        margin-bottom: 0;\n      }\n      :host([layout='single']) figure {\n        gap: calc(var(--gap-card) * 1.5);\n        padding: 0;\n        border: 0;\n      }\n      :host([layout='single'][align='center']) figure {\n        justify-items: center;\n        text-align: center;\n      }\n      :host([layout='single']) blockquote {\n        font: 500 clamp(20px, 3cqi, 28px) / 1.4 var(--font-family-display);\n        letter-spacing: -0.01em;\n        text-wrap: balance;\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  /** The quotes, in order. */\n  @property({ attribute: false })\n  testimonials: readonly KtTestimonial[] = [];\n\n  /** `grid`: in packed columns. `single`: each the page's width, large. */\n  @property({ type: String, reflect: true })\n  layout: KtTestimonialsLayout = 'grid';\n\n  /** The heading's level. */\n  @property({ type: Number, attribute: 'heading-level' })\n  headingLevel = 2;\n\n  private readonly headingId = blockId('kt-testimonials');\n\n  private testimonial(item: KtTestimonial): TemplateResult {\n    return html`<li>\n      <figure part=\"testimonial\">\n        <blockquote><p>${item.quote}</p></blockquote>\n        <figcaption>\n          <kt-avatar\n            name=${item.name}\n            src=${item.avatar ?? ''}\n            size=${this.layout === 'single' ? 'large' : 'medium'}\n            aria-hidden=\"true\"\n          ></kt-avatar>\n          <span class=\"who\">\n            <span class=\"name\">${item.name}</span>\n            ${item.role ? html`<span class=\"role\">${item.role}</span>` : nothing}\n          </span>\n        </figcaption>\n      </figure>\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 class=\"list\" role=\"list\">\n        ${this.testimonials.map((item) => this.testimonial(item))}\n      </ul>\n    </section>`;\n  }\n}\n\ndefineElement('kt-testimonials', KtTestimonials);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-testimonials': KtTestimonials;\n  }\n}\n"],"names":["KtTestimonials","KtElement","blockId","blockStyles","css","item","html","nothing","blockHead","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;AAwCO,MAAMA,UAAuBC,EAAU;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GA6FL,KAAA,UAAU,IAGV,KAAA,OAAO,IAIP,KAAA,QAA4B,UAI5B,KAAA,eAAyC,CAAA,GAIzC,KAAA,SAA+B,QAI/B,KAAA,eAAe,GAEf,KAAiB,YAAYC,EAAQ,iBAAiB;AAAA,EAAA;AAAA,EAjHtD,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,IAAA;AAAA,EAsFF;AAAA,EA0BQ,YAAYC,GAAqC;AACvD,WAAOC;AAAA;AAAA,yBAEcD,EAAK,KAAK;AAAA;AAAA;AAAA,mBAGhBA,EAAK,IAAI;AAAA,kBACVA,EAAK,UAAU,EAAE;AAAA,mBAChB,KAAK,WAAW,WAAW,UAAU,QAAQ;AAAA;AAAA;AAAA;AAAA,iCAI/BA,EAAK,IAAI;AAAA,cAC5BA,EAAK,OAAOC,uBAA0BD,EAAK,IAAI,YAAYE,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAK9E;AAAA,EAES,SAAyB;AAChC,WAAOD;AAAA;AAAA;AAAA,wBAGa,KAAK,UAAU,KAAK,YAAYC,CAAO;AAAA;AAAA,QAEvDC,EAAU,EAAE,OAAO,KAAK,SAAS,MAAM,KAAK,MAAM,OAAO,KAAK,cAAc,IAAI,KAAK,UAAA,CAAW,CAAC;AAAA;AAAA,UAE/F,KAAK,aAAa,IAAI,CAACH,MAAS,KAAK,YAAYA,CAAI,CAAC,CAAC;AAAA;AAAA;AAAA,EAG/D;AACF;AAvDEI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA5FfV,EA6FX,WAAA,SAAA;AAGAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/FfV,EAgGX,WAAA,MAAA;AAIAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAnG9BV,EAoGX,WAAA,OAAA;AAIAS,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GAvGnBV,EAwGX,WAAA,cAAA;AAIAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA3G9BV,EA4GX,WAAA,QAAA;AAIAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB;AAAA,GA/G3CV,EAgHX,WAAA,cAAA;AAsCFW,EAAc,mBAAmBX,CAAc;"}

package/dist/components/core/kt-avatar/kt-avatar.js

@@ -1,8 +1,8 @@
 import { css as p, nothing as f, html as n } from "lit";
 import { state as v, property as o } from "lit/decorators.js";
 import { classMap as c } from "lit/directives/class-map.js";
-import { K as d, d as g } from "../../../chunks/kt-element-T0VbIBNp.js";
-import { s as m } from "../../../chunks/index-TWJzttLX.js";
+import { K as d, d as g } from "../../../chunks/kt-element-DvWtPQ1Y.js";
+import { s as m } from "../../../chunks/index-1ZFgagWW.js";
 import "../kt-icon/kt-icon.js";
 var y = Object.defineProperty, s = (a, e, t, k) => {
   for (var i = void 0, l = a.length - 1, h; l >= 0; l--)

package/dist/components/core/kt-avatar-group/kt-avatar-group.d.ts

@@ -0,0 +1,42 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../kt-avatar/kt-avatar.js';
+import type { KtAvatarSize } from '../kt-avatar/kt-avatar.js';
+export interface KtAvatarGroupPerson {
+    readonly name: string;
+    /** A picture; without one the avatar draws the name's initials. */
+    readonly src?: string;
+}
+/**
+ * The people on something — a project's members, a document's editors — as
+ * avatars overlapping in a row, the rest summed up as "+N".
+ *
+ * @element kt-avatar-group
+ *
+ * @csspart list - The `<ul>`.
+ * @csspart more - The "+N" at the end.
+ *
+ * @example
+ * ```html
+ * <kt-avatar-group label="Project members" max="3"></kt-avatar-group>
+ * <script>
+ *   group.people = [{ name: 'Dana Whitfield' }, { name: 'Hank Scorpio', src: '/hank.png' }];
+ * </script>
+ * ```
+ */
+export declare class KtAvatarGroup extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The people. Set as a property: `group.people = [...]`. */
+    people: readonly KtAvatarGroupPerson[];
+    /** How many avatars to show before summing the rest up. */
+    max: number;
+    size: KtAvatarSize;
+    /** Accessible name for the group: "Project members". */
+    label: string;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-avatar-group': KtAvatarGroup;
+    }
+}

package/dist/components/core/kt-avatar-group/kt-avatar-group.js

@@ -0,0 +1,97 @@
+import { css as v, nothing as n, html as m } from "lit";
+import { property as s } from "lit/decorators.js";
+import { K as h, d as u } from "../../../chunks/kt-element-DvWtPQ1Y.js";
+import { s as c } from "../../../chunks/index-1ZFgagWW.js";
+import "../kt-avatar/kt-avatar.js";
+var f = Object.defineProperty, i = (l, e, a, o) => {
+  for (var t = void 0, p = l.length - 1, d; p >= 0; p--)
+    (d = l[p]) && (t = d(e, a, t) || t);
+  return t && f(e, a, t), t;
+};
+class r extends h {
+  constructor() {
+    super(...arguments), this.people = [], this.max = 4, this.size = "medium", this.label = "";
+  }
+  static {
+    this.styles = [
+      h.styles,
+      v`
+      :host {
+        display: inline-block;
+        --kt-avatar-size: 32px;
+      }
+      :host([size='small']) {
+        --kt-avatar-size: 24px;
+      }
+      :host([size='large']) {
+        --kt-avatar-size: 48px;
+      }
+
+      ul {
+        display: flex;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+      /* Each one over the last by a third, ringed in the page's colour so the
+         overlap reads as a stack, not a smudge. */
+      li {
+        display: flex;
+        border-radius: var(--radius-full);
+        box-shadow: 0 0 0 2px var(--surface-page);
+      }
+      li + li {
+        margin-inline-start: calc(var(--kt-avatar-size) * -0.3);
+      }
+
+      .more {
+        display: grid;
+        place-items: center;
+        min-width: var(--kt-avatar-size);
+        height: var(--kt-avatar-size);
+        padding: 0 4px;
+        color: var(--text-body);
+        font: 600 calc(var(--kt-avatar-size) * 0.36) / 1 var(--font-family-body);
+        background: var(--surface-raised);
+        border-radius: var(--radius-full);
+      }
+    `
+    ];
+  }
+  render() {
+    const e = this.people.slice(0, Math.max(0, this.max)), a = this.people.length - e.length;
+    return m`<ul part="list" aria-label=${this.label || n}>
+      ${e.map(
+      (o) => m`<li>
+            <kt-avatar
+              name=${o.name}
+              src=${o.src || n}
+              size=${this.size}
+            ></kt-avatar>
+          </li>`
+    )}
+      ${a > 0 ? m`<li>
+              <span part="more" class="more" role="img" aria-label=${c().moreCount(a)}
+                >+${a}</span
+              >
+            </li>` : n}
+    </ul>`;
+  }
+}
+i([
+  s({ attribute: !1 })
+], r.prototype, "people");
+i([
+  s({ type: Number })
+], r.prototype, "max");
+i([
+  s({ type: String, reflect: !0 })
+], r.prototype, "size");
+i([
+  s({ type: String })
+], r.prototype, "label");
+u("kt-avatar-group", r);
+export {
+  r as KtAvatarGroup
+};
+//# sourceMappingURL=kt-avatar-group.js.map