kanto-ds 1.7.0 → 1.9.0

package/dist/components/blocks/kt-empty-page/kt-empty-page.js

@@ -0,0 +1,245 @@
+import { css as v, nothing as c, html as o } from "lit";
+import { property as p, state as u } from "lit/decorators.js";
+import { K as h, d as b } from "../../../chunks/kt-element-DvWtPQ1Y.js";
+import { b as f, a as y, c as x } from "../../../chunks/block-Cci-Kff_.js";
+import { e as $ } from "../../../chunks/events-r51msXNf.js";
+import { h as k } from "../../../chunks/heading-DsnZsfg-.js";
+import { h as w } from "../../../chunks/slots-BPbIdxAJ.js";
+import "../../core/kt-button/kt-button.js";
+import "../../core/kt-icon/kt-icon.js";
+import "../../feedback/kt-progress-bar/kt-progress-bar.js";
+var S = Object.defineProperty, n = (l, t, a, d) => {
+  for (var e = void 0, r = l.length - 1, i; r >= 0; r--)
+    (i = l[r]) && (e = i(t, a, e) || e);
+  return e && S(t, a, e), e;
+};
+const j = {
+  progress: (l, t) => `${l} of ${t} done`,
+  done: "Done:",
+  start: "Start"
+};
+class s extends h {
+  constructor() {
+    super(...arguments), this.heading = "", this.lead = "", this.steps = [], this.headingLevel = 1, this.texts = {}, this.filled = /* @__PURE__ */ new Set(), this.headingId = f("kt-empty-page"), this.readSlots = () => {
+      const t = /* @__PURE__ */ new Set();
+      for (const a of this.shadowRoot?.querySelectorAll("slot") ?? [])
+        w(a) && t.add(a.name);
+      this.filled = t;
+    };
+  }
+  static {
+    this.styles = [
+      h.styles,
+      y,
+      v`
+      .block {
+        justify-items: center;
+        max-width: 720px;
+        margin-inline: auto;
+      }
+      .block-head {
+        justify-items: center;
+        text-align: center;
+      }
+      .block-heading {
+        font: 600 clamp(28px, 5cqi, 40px) / 1.1 var(--font-family-display);
+        letter-spacing: -0.03em;
+      }
+      .media,
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--gap-button);
+        justify-content: center;
+      }
+      .empty {
+        display: none;
+      }
+
+      .progress {
+        display: grid;
+        gap: 8px;
+        width: 100%;
+      }
+      .progress-label {
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+      }
+
+      .steps {
+        display: grid;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        border: var(--border-width) solid var(--border-subtle);
+        border-radius: var(--border-radius-card);
+      }
+      .step {
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr) auto;
+        gap: var(--gap-card);
+        align-items: center;
+        padding: var(--padding-card);
+        text-align: start;
+      }
+      .step + .step {
+        border-top: var(--border-width) solid var(--border-subtle);
+      }
+      @container (max-width: 520px) {
+        .step {
+          grid-template-columns: auto minmax(0, 1fr);
+        }
+        .step .act {
+          grid-column: 2;
+          justify-self: start;
+        }
+      }
+
+      .marker {
+        display: grid;
+        place-items: center;
+        width: 32px;
+        height: 32px;
+        color: var(--text-muted);
+        font: var(--font-normal-medium);
+        font-variant-numeric: tabular-nums;
+        border: var(--border-width) solid var(--border-subtle);
+        border-radius: 50%;
+      }
+      .done .marker {
+        color: var(--color-white);
+        background-color: var(--color-primary-base);
+        border-color: var(--color-primary-base);
+      }
+
+      .step-text {
+        display: grid;
+        gap: 2px;
+        min-width: 0;
+      }
+      .step-title {
+        margin: 0;
+        color: var(--text-body);
+        font: var(--font-normal-medium);
+      }
+      .done .step-title {
+        color: var(--text-muted);
+        text-decoration: line-through;
+        text-decoration-color: var(--border-subtle);
+      }
+      .step-description {
+        margin: 0;
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+        line-height: 1.5;
+      }
+
+      a.action {
+        display: inline-flex;
+        align-items: center;
+        height: var(--button-height);
+        padding: 0 var(--button-padding-x);
+        color: var(--color-primary-text);
+        font: var(--font-normal-regular);
+        white-space: nowrap;
+        text-decoration: none;
+        background-color: var(--color-primary-soft);
+        border-radius: var(--border-radius);
+        transition: background-color var(--duration-instant);
+      }
+      a.action:hover {
+        background-color: var(--color-secondary-hover);
+      }
+      a.action:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: 2px;
+      }
+      /* The next step is the one to take: its action is the primary one. */
+      .next a.action {
+        color: var(--color-white);
+        background-color: var(--color-primary-base);
+      }
+      .next a.action:hover {
+        background-color: var(--color-primary-hover);
+      }
+
+      .visually-hidden {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+      }
+    `
+    ];
+  }
+  firstUpdated() {
+    this.readSlots();
+  }
+  step(t, a, d, e) {
+    const r = t.action || e.start, i = t.done ? c : t.href ? o`<a class="action" href=${t.href}>${r}</a>` : o`<kt-button
+            variant=${d ? "primary" : "secondary"}
+            @click=${() => $(this, "kt-step", { id: t.id })}
+            >${r}</kt-button
+          >`, m = t.done ? o`<span class="visually-hidden">${e.done}</span> ${t.title}` : o`${t.title}`, g = ["step", t.done ? "done" : "", d ? "next" : ""].filter(Boolean).join(" ");
+    return o`<li part="step" class=${g}>
+      <span class="marker" aria-hidden="true"
+        >${t.done ? o`<kt-icon name="check" size="16"></kt-icon>` : a + 1}</span
+      >
+      <div class="step-text">
+        ${k(this.headingLevel + 1, m, "step-title", 2)}
+        ${t.description ? o`<p class="step-description">${t.description}</p>` : c}
+      </div>
+      ${t.done ? c : o`<div class="act">${i}</div>`}
+    </li>`;
+  }
+  render() {
+    const t = { ...j, ...this.texts }, a = this.steps.filter((r) => r.done).length, d = this.steps.findIndex((r) => !r.done), e = t.progress(a, this.steps.length);
+    return o`<section part="base" class="block" aria-labelledby=${this.headingId}>
+      <div class=${this.filled.has("media") ? "media" : "media empty"}>
+        <slot name="media" @slotchange=${this.readSlots}></slot>
+      </div>
+      ${x({ title: this.heading, lead: this.lead, level: this.headingLevel, id: this.headingId })}
+      ${this.steps.length ? o`<div class="progress">
+                <span class="progress-label" aria-hidden="true">${e}</span>
+                <kt-progress-bar
+                  value=${a}
+                  max=${this.steps.length}
+                  size="small"
+                  label=${e}
+                ></kt-progress-bar>
+              </div>
+              <ol class="steps" role="list">
+                ${this.steps.map((r, i) => this.step(r, i, i === d, t))}
+              </ol>` : c}
+      <div class=${this.filled.has("actions") ? "actions" : "actions empty"}>
+        <slot name="actions" @slotchange=${this.readSlots}></slot>
+      </div>
+    </section>`;
+  }
+}
+n([
+  p({ type: String })
+], s.prototype, "heading");
+n([
+  p({ type: String })
+], s.prototype, "lead");
+n([
+  p({ attribute: !1 })
+], s.prototype, "steps");
+n([
+  p({ type: Number, attribute: "heading-level" })
+], s.prototype, "headingLevel");
+n([
+  p({ attribute: !1 })
+], s.prototype, "texts");
+n([
+  u()
+], s.prototype, "filled");
+b("kt-empty-page", s);
+export {
+  s as KtEmptyPage
+};
+//# sourceMappingURL=kt-empty-page.js.map

package/dist/components/blocks/kt-empty-page/kt-empty-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-empty-page.js","sources":["../../../../src/components/blocks/kt-empty-page/kt-empty-page.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-button/kt-button.js';\nimport '../../core/kt-icon/kt-icon.js';\nimport '../../feedback/kt-progress-bar/kt-progress-bar.js';\n\nexport interface KtFirstStep {\n  readonly id: string;\n  readonly title: string;\n  readonly description?: string;\n  /** The button's words: what doing the step starts. */\n  readonly action?: string;\n  /** Makes the action a link. Without it, the action fires `kt-step`. */\n  readonly href?: string;\n  readonly done?: boolean;\n}\n\n/** Every word the page says, in English until given others. */\nexport interface KtEmptyPageTexts {\n  readonly progress: (done: number, total: number) => string;\n  /** Read before a done step's title, for assistive tech. */\n  readonly done: string;\n  readonly start: string;\n}\n\nconst TEXTS: KtEmptyPageTexts = {\n  progress: (done, total) => `${done} of ${total} done`,\n  done: 'Done:',\n  start: 'Start',\n};\n\n/**\n * The page a new account lands on, before there is anything in it: a welcome,\n * and the first steps that fill it — what is done, what is next, and the way\n * to each.\n *\n * The steps are data: `page.steps = [{ id, title, description, action, href,\n * done }]`, numbered in order, with how far along it is over them. A step's\n * action fires `kt-step`, or is a link with an `href`. For a list or a panel\n * that is empty, `kt-empty-state`.\n *\n * @element kt-empty-page\n *\n * @slot media - Over the heading: an illustration, a logo.\n * @slot actions - Under the steps: Skip for now, a link to the docs.\n *\n * @csspart base - The section.\n * @csspart step - One step.\n *\n * @fires kt-step - A step's action was pressed. `detail: { id }`.\n *\n * @example\n * ```html\n * <kt-empty-page heading=\"Welcome, Ada\" lead=\"Three steps and you are sending invoices.\"></kt-empty-page>\n * <script>\n *   page.steps = [\n *     { id: 'company', title: 'Add your company', done: true },\n *     { id: 'invoice', title: 'Send your first invoice', action: 'New invoice', href: '/invoices/new' },\n *   ];\n * </script>\n * ```\n */\nexport class KtEmptyPage extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    blockStyles,\n    css`\n      .block {\n        justify-items: center;\n        max-width: 720px;\n        margin-inline: auto;\n      }\n      .block-head {\n        justify-items: center;\n        text-align: center;\n      }\n      .block-heading {\n        font: 600 clamp(28px, 5cqi, 40px) / 1.1 var(--font-family-display);\n        letter-spacing: -0.03em;\n      }\n      .media,\n      .actions {\n        display: flex;\n        flex-wrap: wrap;\n        gap: var(--gap-button);\n        justify-content: center;\n      }\n      .empty {\n        display: none;\n      }\n\n      .progress {\n        display: grid;\n        gap: 8px;\n        width: 100%;\n      }\n      .progress-label {\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n      }\n\n      .steps {\n        display: grid;\n        width: 100%;\n        margin: 0;\n        padding: 0;\n        list-style: none;\n        border: var(--border-width) solid var(--border-subtle);\n        border-radius: var(--border-radius-card);\n      }\n      .step {\n        display: grid;\n        grid-template-columns: auto minmax(0, 1fr) auto;\n        gap: var(--gap-card);\n        align-items: center;\n        padding: var(--padding-card);\n        text-align: start;\n      }\n      .step + .step {\n        border-top: var(--border-width) solid var(--border-subtle);\n      }\n      @container (max-width: 520px) {\n        .step {\n          grid-template-columns: auto minmax(0, 1fr);\n        }\n        .step .act {\n          grid-column: 2;\n          justify-self: start;\n        }\n      }\n\n      .marker {\n        display: grid;\n        place-items: center;\n        width: 32px;\n        height: 32px;\n        color: var(--text-muted);\n        font: var(--font-normal-medium);\n        font-variant-numeric: tabular-nums;\n        border: var(--border-width) solid var(--border-subtle);\n        border-radius: 50%;\n      }\n      .done .marker {\n        color: var(--color-white);\n        background-color: var(--color-primary-base);\n        border-color: var(--color-primary-base);\n      }\n\n      .step-text {\n        display: grid;\n        gap: 2px;\n        min-width: 0;\n      }\n      .step-title {\n        margin: 0;\n        color: var(--text-body);\n        font: var(--font-normal-medium);\n      }\n      .done .step-title {\n        color: var(--text-muted);\n        text-decoration: line-through;\n        text-decoration-color: var(--border-subtle);\n      }\n      .step-description {\n        margin: 0;\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n        line-height: 1.5;\n      }\n\n      a.action {\n        display: inline-flex;\n        align-items: 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        white-space: nowrap;\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      a.action:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 2px;\n      }\n      /* The next step is the one to take: its action is the primary one. */\n      .next a.action {\n        color: var(--color-white);\n        background-color: var(--color-primary-base);\n      }\n      .next a.action:hover {\n        background-color: var(--color-primary-hover);\n      }\n\n      .visually-hidden {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        overflow: hidden;\n        clip-path: inset(50%);\n        white-space: nowrap;\n      }\n    `,\n  ];\n\n  @property({ type: String })\n  heading = '';\n\n  @property({ type: String })\n  lead = '';\n\n  /** The first steps, in the order to take them. */\n  @property({ attribute: false })\n  steps: readonly KtFirstStep[] = [];\n\n  /** The heading's level: 1, since it is the page; the steps' titles sit one under. */\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<KtEmptyPageTexts> = {};\n\n  @state() private filled = new Set<string>();\n\n  private readonly headingId = blockId('kt-empty-page');\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 step(\n    step: KtFirstStep,\n    index: number,\n    next: boolean,\n    t: KtEmptyPageTexts,\n  ): TemplateResult {\n    const label = step.action || t.start;\n    const action = step.done\n      ? nothing\n      : step.href\n        ? html`<a class=\"action\" href=${step.href}>${label}</a>`\n        : html`<kt-button\n            variant=${next ? 'primary' : 'secondary'}\n            @click=${() => emit(this, 'kt-step', { id: step.id })}\n            >${label}</kt-button\n          >`;\n    const title = step.done\n      ? html`<span class=\"visually-hidden\">${t.done}</span> ${step.title}`\n      : html`${step.title}`;\n    const classes = ['step', step.done ? 'done' : '', next ? 'next' : ''].filter(Boolean).join(' ');\n    return html`<li part=\"step\" class=${classes}>\n      <span class=\"marker\" aria-hidden=\"true\"\n        >${step.done ? html`<kt-icon name=\"check\" size=\"16\"></kt-icon>` : index + 1}</span\n      >\n      <div class=\"step-text\">\n        ${heading(this.headingLevel + 1, title, 'step-title', 2)}\n        ${step.description ? html`<p class=\"step-description\">${step.description}</p>` : nothing}\n      </div>\n      ${step.done ? nothing : html`<div class=\"act\">${action}</div>`}\n    </li>`;\n  }\n\n  override render(): TemplateResult {\n    const t = { ...TEXTS, ...this.texts };\n    const done = this.steps.filter((step) => step.done).length;\n    const next = this.steps.findIndex((step) => !step.done);\n    const progress = t.progress(done, this.steps.length);\n    return html`<section part=\"base\" class=\"block\" aria-labelledby=${this.headingId}>\n      <div class=${this.filled.has('media') ? 'media' : 'media empty'}>\n        <slot name=\"media\" @slotchange=${this.readSlots}></slot>\n      </div>\n      ${blockHead({ title: this.heading, lead: this.lead, level: this.headingLevel, id: this.headingId })}\n      ${\n        this.steps.length\n          ? html`<div class=\"progress\">\n                <span class=\"progress-label\" aria-hidden=\"true\">${progress}</span>\n                <kt-progress-bar\n                  value=${done}\n                  max=${this.steps.length}\n                  size=\"small\"\n                  label=${progress}\n                ></kt-progress-bar>\n              </div>\n              <ol class=\"steps\" role=\"list\">\n                ${this.steps.map((step, index) => this.step(step, index, index === next, t))}\n              </ol>`\n          : nothing\n      }\n      <div class=${this.filled.has('actions') ? 'actions' : 'actions empty'}>\n        <slot name=\"actions\" @slotchange=${this.readSlots}></slot>\n      </div>\n    </section>`;\n  }\n}\n\ndefineElement('kt-empty-page', KtEmptyPage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-empty-page': KtEmptyPage;\n  }\n}\n"],"names":["TEXTS","done","total","KtEmptyPage","KtElement","blockId","filled","slot","hasAssignedContent","blockStyles","css","step","index","next","t","label","action","nothing","html","emit","title","classes","heading","progress","blockHead","__decorateClass","property","state","defineElement"],"mappings":"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"}

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

@@ -0,0 +1,65 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-button/kt-button.js';
+export type KtErrorPageKind = 'not-found' | 'error' | 'maintenance';
+/** Every word the page says, in English until given others. */
+export interface KtErrorPageTexts {
+    readonly notFoundHeading: string;
+    readonly notFoundLead: string;
+    readonly errorHeading: string;
+    readonly errorLead: string;
+    readonly maintenanceHeading: string;
+    readonly maintenanceLead: string;
+    readonly goHome: string;
+    readonly tryAgain: string;
+}
+/**
+ * The page a person lands on when the one they wanted is not there: not found,
+ * broken, or down for maintenance — said plainly, with the way on.
+ *
+ * `not-found` leads home (`home-href`); `error` offers to try again, firing
+ * `kt-retry` — cancel it to retry your own way, otherwise the page reloads;
+ * `maintenance` offers nothing it cannot do. The `actions` slot replaces the
+ * buttons. Every word is in `texts`, English until given others.
+ *
+ * @element kt-error-page
+ *
+ * @slot actions - Replaces the buttons: a search, a link to the status page.
+ * @slot - Under the actions: a contact line, a request id.
+ *
+ * @csspart base - The block.
+ * @csspart code - The code, large.
+ *
+ * @fires kt-retry - Try again was pressed. Cancelable; uncancelled, the page reloads.
+ *
+ * @example
+ * ```html
+ * <kt-error-page fill home-href="/app"></kt-error-page>
+ * <kt-error-page kind="error"></kt-error-page>
+ * ```
+ */
+export declare class KtErrorPage extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** `not-found`, `error` or `maintenance`. */
+    kind: KtErrorPageKind;
+    /** The code shown large. Defaults to the kind's: 404, 500, 503. */
+    code: string;
+    /** Where Go home leads. */
+    homeHref: string;
+    /** The heading's level, 1 to 6: 1 when it is the page. */
+    headingLevel: number;
+    /** Fills its container's height and centres itself in it. */
+    fill: boolean;
+    /** The words, English until given others. */
+    texts: Partial<KtErrorPageTexts>;
+    private ownActions;
+    firstUpdated(): void;
+    private readActions;
+    private retry;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-error-page': KtErrorPage;
+    }
+}

package/dist/components/blocks/kt-error-page/kt-error-page.js

@@ -0,0 +1,177 @@
+import { css as m, nothing as d, html as l } from "lit";
+import { property as a, state as g } from "lit/decorators.js";
+import { K as p, d as u } from "../../../chunks/kt-element-DvWtPQ1Y.js";
+import { e as f } from "../../../chunks/events-r51msXNf.js";
+import { h as y } from "../../../chunks/heading-DsnZsfg-.js";
+import { h as v } from "../../../chunks/slots-BPbIdxAJ.js";
+import "../../core/kt-button/kt-button.js";
+var b = Object.defineProperty, r = (s, t, n, c) => {
+  for (var e = void 0, i = s.length - 1, h; i >= 0; i--)
+    (h = s[i]) && (e = h(t, n, e) || e);
+  return e && b(t, n, e), e;
+};
+const k = {
+  notFoundHeading: "Page not found",
+  notFoundLead: "The page you were looking for has moved, or never was. Check the address, or start again from home.",
+  errorHeading: "Something went wrong",
+  errorLead: "It is on our side, not yours. Try again in a moment; if it keeps happening, we are already on it.",
+  maintenanceHeading: "Back in a moment",
+  maintenanceLead: "We are making things better. The page will be back shortly — nothing you have done is lost.",
+  goHome: "Go home",
+  tryAgain: "Try again"
+}, x = {
+  "not-found": "404",
+  error: "500",
+  maintenance: "503"
+};
+class o extends p {
+  constructor() {
+    super(...arguments), this.kind = "not-found", this.code = "", this.homeHref = "/", this.headingLevel = 1, this.fill = !1, this.texts = {}, this.ownActions = !1;
+  }
+  static {
+    this.styles = [
+      p.styles,
+      m`
+      :host {
+        display: block;
+      }
+      :host([fill]) {
+        display: grid;
+        min-height: 100%;
+        place-items: center;
+      }
+
+      .page {
+        display: grid;
+        gap: var(--gap-card);
+        justify-items: center;
+        max-width: 560px;
+        margin: 0 auto;
+        padding: calc(var(--padding-card) * 2) var(--padding-card);
+        text-align: center;
+      }
+
+      .code {
+        color: var(--color-primary-text);
+        font: 600 clamp(64px, 12vw, 120px) / 1 var(--font-family-display);
+        letter-spacing: -0.04em;
+      }
+      .heading {
+        margin: 0;
+        color: var(--text-body);
+        font: var(--font-title-h4);
+        text-wrap: balance;
+      }
+      .lead {
+        max-width: 46ch;
+        margin: 0;
+        color: var(--text-muted);
+        font: var(--font-normal-regular);
+        line-height: 1.6;
+        text-wrap: pretty;
+      }
+
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--gap-button);
+        justify-content: center;
+      }
+      .actions:empty,
+      .actions[hidden] {
+        display: none;
+      }
+
+      /* Home is a link, drawn as the primary button. */
+      .home {
+        display: inline-flex;
+        align-items: center;
+        height: var(--button-height);
+        padding: 0 var(--button-padding-x);
+        color: var(--color-white);
+        font: var(--font-normal-regular);
+        text-decoration: none;
+        background-color: var(--color-primary-base);
+        border-radius: var(--border-radius);
+        transition: background-color var(--duration-instant);
+      }
+      .home:hover {
+        background-color: var(--color-primary-hover);
+      }
+      /* Second to Try again: a link, not a second primary button. */
+      .home.quiet,
+      .home.quiet:hover {
+        color: var(--color-primary-text);
+        background-color: transparent;
+      }
+      .home:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: 2px;
+      }
+
+      .more {
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+      }
+      .more:empty {
+        display: none;
+      }
+    `
+    ];
+  }
+  firstUpdated() {
+    this.readActions();
+  }
+  readActions() {
+    this.ownActions = v(this.shadowRoot?.querySelector('slot[name="actions"]'));
+  }
+  retry() {
+    f(this, "kt-retry").defaultPrevented || location.reload();
+  }
+  render() {
+    const t = { ...k, ...this.texts }, n = {
+      "not-found": [t.notFoundHeading, t.notFoundLead],
+      error: [t.errorHeading, t.errorLead],
+      maintenance: [t.maintenanceHeading, t.maintenanceLead]
+    }, [c, e] = n[this.kind] ?? n["not-found"], i = this.kind === "maintenance" ? d : l`${this.kind === "error" ? l`<kt-button @click=${() => this.retry()}>${t.tryAgain}</kt-button>` : d}
+            <a class=${this.kind === "error" ? "home quiet" : "home"} href=${this.homeHref}
+              >${t.goHome}</a
+            >`;
+    return l`<section part="base" class="page">
+      <div part="code" class="code" aria-hidden="true">${this.code || x[this.kind]}</div>
+      ${y(this.headingLevel, c, "heading", 1)}
+      <p class="lead">${e}</p>
+      <div class="actions">
+        <slot name="actions" @slotchange=${this.readActions}></slot>
+        ${this.ownActions ? d : i}
+      </div>
+      <div class="more"><slot></slot></div>
+    </section>`;
+  }
+}
+r([
+  a({ type: String, reflect: !0 })
+], o.prototype, "kind");
+r([
+  a({ type: String })
+], o.prototype, "code");
+r([
+  a({ type: String, attribute: "home-href" })
+], o.prototype, "homeHref");
+r([
+  a({ type: Number, attribute: "heading-level" })
+], o.prototype, "headingLevel");
+r([
+  a({ type: Boolean, reflect: !0 })
+], o.prototype, "fill");
+r([
+  a({ attribute: !1 })
+], o.prototype, "texts");
+r([
+  g()
+], o.prototype, "ownActions");
+u("kt-error-page", o);
+export {
+  o as KtErrorPage
+};
+//# sourceMappingURL=kt-error-page.js.map

package/dist/components/blocks/kt-error-page/kt-error-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-error-page.js","sources":["../../../../src/components/blocks/kt-error-page/kt-error-page.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 { emit } from '#internal/events';\nimport { heading } from '#internal/heading';\nimport { hasAssignedContent } from '#internal/slots';\nimport '../../core/kt-button/kt-button.js';\n\nexport type KtErrorPageKind = 'not-found' | 'error' | 'maintenance';\n\n/** Every word the page says, in English until given others. */\nexport interface KtErrorPageTexts {\n  readonly notFoundHeading: string;\n  readonly notFoundLead: string;\n  readonly errorHeading: string;\n  readonly errorLead: string;\n  readonly maintenanceHeading: string;\n  readonly maintenanceLead: string;\n  readonly goHome: string;\n  readonly tryAgain: string;\n}\n\nconst TEXTS: KtErrorPageTexts = {\n  notFoundHeading: 'Page not found',\n  notFoundLead:\n    'The page you were looking for has moved, or never was. Check the address, or start again from home.',\n  errorHeading: 'Something went wrong',\n  errorLead:\n    'It is on our side, not yours. Try again in a moment; if it keeps happening, we are already on it.',\n  maintenanceHeading: 'Back in a moment',\n  maintenanceLead:\n    'We are making things better. The page will be back shortly — nothing you have done is lost.',\n  goHome: 'Go home',\n  tryAgain: 'Try again',\n};\n\nconst CODES: Record<KtErrorPageKind, string> = {\n  'not-found': '404',\n  error: '500',\n  maintenance: '503',\n};\n\n/**\n * The page a person lands on when the one they wanted is not there: not found,\n * broken, or down for maintenance — said plainly, with the way on.\n *\n * `not-found` leads home (`home-href`); `error` offers to try again, firing\n * `kt-retry` — cancel it to retry your own way, otherwise the page reloads;\n * `maintenance` offers nothing it cannot do. The `actions` slot replaces the\n * buttons. Every word is in `texts`, English until given others.\n *\n * @element kt-error-page\n *\n * @slot actions - Replaces the buttons: a search, a link to the status page.\n * @slot - Under the actions: a contact line, a request id.\n *\n * @csspart base - The block.\n * @csspart code - The code, large.\n *\n * @fires kt-retry - Try again was pressed. Cancelable; uncancelled, the page reloads.\n *\n * @example\n * ```html\n * <kt-error-page fill home-href=\"/app\"></kt-error-page>\n * <kt-error-page kind=\"error\"></kt-error-page>\n * ```\n */\nexport class KtErrorPage extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n      :host([fill]) {\n        display: grid;\n        min-height: 100%;\n        place-items: center;\n      }\n\n      .page {\n        display: grid;\n        gap: var(--gap-card);\n        justify-items: center;\n        max-width: 560px;\n        margin: 0 auto;\n        padding: calc(var(--padding-card) * 2) var(--padding-card);\n        text-align: center;\n      }\n\n      .code {\n        color: var(--color-primary-text);\n        font: 600 clamp(64px, 12vw, 120px) / 1 var(--font-family-display);\n        letter-spacing: -0.04em;\n      }\n      .heading {\n        margin: 0;\n        color: var(--text-body);\n        font: var(--font-title-h4);\n        text-wrap: balance;\n      }\n      .lead {\n        max-width: 46ch;\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      .actions {\n        display: flex;\n        flex-wrap: wrap;\n        gap: var(--gap-button);\n        justify-content: center;\n      }\n      .actions:empty,\n      .actions[hidden] {\n        display: none;\n      }\n\n      /* Home is a link, drawn as the primary button. */\n      .home {\n        display: inline-flex;\n        align-items: center;\n        height: var(--button-height);\n        padding: 0 var(--button-padding-x);\n        color: var(--color-white);\n        font: var(--font-normal-regular);\n        text-decoration: none;\n        background-color: var(--color-primary-base);\n        border-radius: var(--border-radius);\n        transition: background-color var(--duration-instant);\n      }\n      .home:hover {\n        background-color: var(--color-primary-hover);\n      }\n      /* Second to Try again: a link, not a second primary button. */\n      .home.quiet,\n      .home.quiet:hover {\n        color: var(--color-primary-text);\n        background-color: transparent;\n      }\n      .home:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 2px;\n      }\n\n      .more {\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n      }\n      .more:empty {\n        display: none;\n      }\n    `,\n  ];\n\n  /** `not-found`, `error` or `maintenance`. */\n  @property({ type: String, reflect: true })\n  kind: KtErrorPageKind = 'not-found';\n\n  /** The code shown large. Defaults to the kind's: 404, 500, 503. */\n  @property({ type: String })\n  code = '';\n\n  /** Where Go home leads. */\n  @property({ type: String, attribute: 'home-href' })\n  homeHref = '/';\n\n  /** The heading's level, 1 to 6: 1 when it is the page. */\n  @property({ type: Number, attribute: 'heading-level' })\n  headingLevel = 1;\n\n  /** Fills its container's height and centres itself in it. */\n  @property({ type: Boolean, reflect: true })\n  fill = false;\n\n  /** The words, English until given others. */\n  @property({ attribute: false })\n  texts: Partial<KtErrorPageTexts> = {};\n\n  @state() private ownActions = false;\n\n  override firstUpdated(): void {\n    this.readActions();\n  }\n\n  private readActions(): void {\n    this.ownActions = hasAssignedContent(this.shadowRoot?.querySelector('slot[name=\"actions\"]'));\n  }\n\n  private retry(): void {\n    const event = emit(this, 'kt-retry');\n    if (!event.defaultPrevented) location.reload();\n  }\n\n  override render(): TemplateResult {\n    const t = { ...TEXTS, ...this.texts };\n    const words: Record<KtErrorPageKind, readonly [string, string]> = {\n      'not-found': [t.notFoundHeading, t.notFoundLead],\n      error: [t.errorHeading, t.errorLead],\n      maintenance: [t.maintenanceHeading, t.maintenanceLead],\n    };\n    const [title, lead] = words[this.kind] ?? words['not-found'];\n    const defaults =\n      this.kind === 'maintenance'\n        ? nothing\n        : html`${\n              this.kind === 'error'\n                ? html`<kt-button @click=${() => this.retry()}>${t.tryAgain}</kt-button>`\n                : nothing\n            }\n            <a class=${this.kind === 'error' ? 'home quiet' : 'home'} href=${this.homeHref}\n              >${t.goHome}</a\n            >`;\n    return html`<section part=\"base\" class=\"page\">\n      <div part=\"code\" class=\"code\" aria-hidden=\"true\">${this.code || CODES[this.kind]}</div>\n      ${heading(this.headingLevel, title, 'heading', 1)}\n      <p class=\"lead\">${lead}</p>\n      <div class=\"actions\">\n        <slot name=\"actions\" @slotchange=${this.readActions}></slot>\n        ${this.ownActions ? nothing : defaults}\n      </div>\n      <div class=\"more\"><slot></slot></div>\n    </section>`;\n  }\n}\n\ndefineElement('kt-error-page', KtErrorPage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-error-page': KtErrorPage;\n  }\n}\n"],"names":["TEXTS","CODES","KtErrorPage","KtElement","css","hasAssignedContent","emit","words","title","lead","defaults","nothing","html","heading","__decorateClass","property","state","defineElement"],"mappings":";;;;;;;;;;;;AAsBA,MAAMA,IAA0B;AAAA,EAC9B,iBAAiB;AAAA,EACjB,cACE;AAAA,EACF,cAAc;AAAA,EACd,WACE;AAAA,EACF,oBAAoB;AAAA,EACpB,iBACE;AAAA,EACF,QAAQ;AAAA,EACR,UAAU;AACZ,GAEMC,IAAyC;AAAA,EAC7C,aAAa;AAAA,EACb,OAAO;AAAA,EACP,aAAa;AACf;AA2BO,MAAMC,UAAoBC,EAAU;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GA6FL,KAAA,OAAwB,aAIxB,KAAA,OAAO,IAIP,KAAA,WAAW,KAIX,KAAA,eAAe,GAIf,KAAA,OAAO,IAIP,KAAA,QAAmC,CAAA,GAE1B,KAAQ,aAAa;AAAA,EAAA;AAAA,EAlH9B,OAAA;AAAA,SAAgB,SAAS;AAAA,MACvBA,EAAU;AAAA,MACVC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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,EA4BS,eAAqB;AAC5B,SAAK,YAAA;AAAA,EACP;AAAA,EAEQ,cAAoB;AAC1B,SAAK,aAAaC,EAAmB,KAAK,YAAY,cAAc,sBAAsB,CAAC;AAAA,EAC7F;AAAA,EAEQ,QAAc;AAEpB,IADcC,EAAK,MAAM,UAAU,EACxB,oBAAkB,SAAS,OAAA;AAAA,EACxC;AAAA,EAES,SAAyB;AAChC,UAAM,IAAI,EAAE,GAAGN,GAAO,GAAG,KAAK,MAAA,GACxBO,IAA4D;AAAA,MAChE,aAAa,CAAC,EAAE,iBAAiB,EAAE,YAAY;AAAA,MAC/C,OAAO,CAAC,EAAE,cAAc,EAAE,SAAS;AAAA,MACnC,aAAa,CAAC,EAAE,oBAAoB,EAAE,eAAe;AAAA,IAAA,GAEjD,CAACC,GAAOC,CAAI,IAAIF,EAAM,KAAK,IAAI,KAAKA,EAAM,WAAW,GACrDG,IACJ,KAAK,SAAS,gBACVC,IACAC,IACI,KAAK,SAAS,UACVA,sBAAyB,MAAM,KAAK,MAAA,CAAO,IAAI,EAAE,QAAQ,iBACzDD,CACN;AAAA,uBACW,KAAK,SAAS,UAAU,eAAe,MAAM,SAAS,KAAK,QAAQ;AAAA,iBACzE,EAAE,MAAM;AAAA;AAErB,WAAOC;AAAA,yDAC8C,KAAK,QAAQX,EAAM,KAAK,IAAI,CAAC;AAAA,QAC9EY,EAAQ,KAAK,cAAcL,GAAO,WAAW,CAAC,CAAC;AAAA,wBAC/BC,CAAI;AAAA;AAAA,2CAEe,KAAK,WAAW;AAAA,UACjD,KAAK,aAAaE,IAAUD,CAAQ;AAAA;AAAA;AAAA;AAAA,EAI5C;AACF;AAnEEI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA5F9Bb,EA6FX,WAAA,MAAA;AAIAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhGfb,EAiGX,WAAA,MAAA;AAIAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GApGvCb,EAqGX,WAAA,UAAA;AAIAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB;AAAA,GAxG3Cb,EAyGX,WAAA,cAAA;AAIAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA5G/Bb,EA6GX,WAAA,MAAA;AAIAY,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GAhHnBb,EAiHX,WAAA,OAAA;AAEiBY,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAnHId,EAmHM,WAAA,YAAA;AA+CnBe,EAAc,iBAAiBf,CAAW;"}

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

@@ -0,0 +1,61 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../overlays/kt-accordion/kt-accordion.js';
+import '../../overlays/kt-collapsible/kt-collapsible.js';
+export interface KtFaqItem {
+    readonly question: string;
+    readonly answer: string;
+}
+export type KtFaqLayout = 'stacked' | 'split';
+/**
+ * The questions people ask before they sign up, answered: an accordion under a
+ * heading, one answer open at a time.
+ *
+ * The questions are data: `faq.items = [{ question, answer }]`. `multiple`
+ * lets each open on its own; `open-first` opens the first. `stacked` puts the
+ * head over the questions; `split` beside them, where the block is wide
+ * enough.
+ *
+ * @element kt-faq
+ *
+ * @slot note - Under the head: where to ask what is not answered.
+ *
+ * @csspart base - The section.
+ *
+ * @example
+ * ```html
+ * <kt-faq heading="Questions" layout="split">
+ *   <span slot="note">Something else? <a href="/contact">Ask us</a>.</span>
+ * </kt-faq>
+ * <script>
+ *   faq.items = [{ question: 'Can I cancel any time?', answer: 'Yes, from Settings.' }];
+ * </script>
+ * ```
+ */
+export declare class KtFaq extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    heading: string;
+    lead: string;
+    /** `center` or `start`: the head, when stacked. */
+    align: 'center' | 'start';
+    /** The questions and their answers, in order. */
+    items: readonly KtFaqItem[];
+    /** Each answer opens and closes on its own, rather than one at a time. */
+    multiple: boolean;
+    /** Opens the first answer. */
+    openFirst: boolean;
+    /** `stacked`: the head over the questions. `split`: beside them, where there is room. */
+    layout: KtFaqLayout;
+    /** The heading's level. */
+    headingLevel: number;
+    private hasNote;
+    private readonly headingId;
+    firstUpdated(): void;
+    private readNote;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-faq': KtFaq;
+    }
+}