kanto-ds 1.7.0 → 1.9.0

package/dist/components/forms/kt-otp-input/kt-otp-input.js

@@ -0,0 +1,232 @@
+import { css as v, nothing as h, html as c } from "lit";
+import { property as n, state as f, queryAll as b } from "lit/decorators.js";
+import { live as g } from "lit/directives/live.js";
+import { K as p, d as y } from "../../../chunks/kt-element-DvWtPQ1Y.js";
+import { u as x, e as d } from "../../../chunks/events-r51msXNf.js";
+import { a as k, s as $, b as w } from "../../../chunks/form-control-B74_EHtG.js";
+import { s as m } from "../../../chunks/index-1ZFgagWW.js";
+var C = Object.defineProperty, l = (u, t, e, a) => {
+  for (var r = void 0, i = u.length - 1, o; i >= 0; i--)
+    (o = u[i]) && (r = o(t, e, r) || r);
+  return r && C(t, e, r), r;
+};
+class s extends p {
+  constructor() {
+    super(...arguments), this.value = "", this.length = 6, this.type = "numeric", this.label = "", this.name = "", this.required = !1, this.disabled = !1, this.error = "", this.formDisabled = !1, this.internals = null, this.defaultValue = "", this.errorId = x("kt-otp-error");
+  }
+  static {
+    this.formAssociated = !0;
+  }
+  static {
+    this.styles = [
+      p.styles,
+      v`
+      :host {
+        display: inline-block;
+        --kt-otp-box-size: calc(var(--button-height) + 8px);
+      }
+
+      .group {
+        display: flex;
+        gap: var(--gap-button);
+      }
+
+      input {
+        box-sizing: border-box;
+        width: var(--kt-otp-box-size);
+        height: var(--kt-otp-box-size);
+        padding: 0;
+        color: var(--text-body);
+        font: 600 calc(20px * var(--text-scale, 1)) / 1 var(--font-family-body);
+        font-variant-numeric: tabular-nums;
+        text-align: center;
+        text-transform: uppercase;
+        background-color: var(--surface-field);
+        border: var(--border-width) solid var(--border-field);
+        border-radius: var(--radius-input);
+        outline: var(--outline-width) solid transparent;
+        caret-color: var(--color-primary-base);
+        transition: outline-color var(--duration-instant);
+      }
+      input:hover {
+        outline-color: var(--color-text-700);
+      }
+      input:focus {
+        outline-color: var(--color-primary-base);
+      }
+      input[aria-invalid='true'] {
+        outline-color: var(--color-danger-base);
+      }
+      input:disabled {
+        color: var(--text-disabled);
+        background-color: var(--color-dark-14);
+        cursor: not-allowed;
+        outline-color: transparent;
+      }
+
+      .error {
+        margin: var(--gap-element) 0 0;
+        color: var(--color-danger-text);
+        font: var(--font-normal-small);
+      }
+    `
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.internals ??= k(this), this.value = this.clean(this.value), this.defaultValue = this.value;
+  }
+  willUpdate(t) {
+    if (t.has("value") || t.has("length") || t.has("type")) {
+      const e = this.clean(this.value);
+      e !== this.value && (this.value = e);
+    }
+  }
+  // After the render: the first box anchors the browser's message.
+  updated(t) {
+    if (t.has("value") || t.has("required") || t.has("error") || t.has("length") || this.stringsChanged(t)) {
+      $(this.internals, this.value || null);
+      const e = this.required && this.value.length < this.length;
+      w(
+        this.internals,
+        { valueMissing: e, customError: !!this.error },
+        this.error || (e ? m().otpRequired : ""),
+        this.boxes?.[0]
+      );
+    }
+  }
+  formResetCallback() {
+    this.value = this.defaultValue;
+  }
+  formDisabledCallback(t) {
+    this.formDisabled = t;
+  }
+  formStateRestoreCallback(t) {
+    this.value = t ?? "";
+  }
+  focus(t) {
+    this.box(Math.min(this.value.length, this.length - 1))?.focus(t);
+  }
+  get inactive() {
+    return this.disabled || this.formDisabled;
+  }
+  /** What the code may hold: digits, or letters and digits in capitals, and no more than `length`. */
+  clean(t) {
+    const e = this.type === "numeric" ? /[0-9]/ : /[A-Za-z0-9]/;
+    return [...t].filter((a) => e.test(a)).join("").toUpperCase().slice(0, Math.max(1, this.length));
+  }
+  box(t) {
+    return this.boxes?.[t];
+  }
+  /** Sets the code, says so, and says when it is whole. */
+  commit(t) {
+    const e = this.clean(t);
+    if (e === this.value) {
+      this.requestUpdate();
+      return;
+    }
+    this.value = e, d(this, "kt-change", { value: e }), e.length === this.length && d(this, "kt-complete", { value: e });
+  }
+  onInput(t, e) {
+    const a = this.clean(t.target.value), r = Math.min(e, this.value.length);
+    if (!a) {
+      this.commit(this.value);
+      return;
+    }
+    const i = (this.value.slice(0, r) + a).slice(0, this.length);
+    this.commit(i + this.value.slice(r + a.length)), this.updateComplete.then(() => this.box(Math.min(i.length, this.length - 1))?.focus());
+  }
+  onKeyDown(t, e) {
+    const a = (r) => {
+      t.preventDefault(), this.box(Math.max(0, Math.min(this.length - 1, r)))?.focus();
+    };
+    switch (t.key) {
+      case "Backspace": {
+        t.preventDefault();
+        const r = e < this.value.length ? e : this.value.length - 1;
+        if (r < 0) return;
+        this.commit(this.value.slice(0, r) + this.value.slice(r + 1)), this.updateComplete.then(() => this.box(r)?.focus());
+        break;
+      }
+      case "ArrowLeft":
+        a(e - 1);
+        break;
+      case "ArrowRight":
+        a(Math.min(e + 1, this.value.length));
+        break;
+      case "Home":
+        a(0);
+        break;
+      case "End":
+        a(this.value.length);
+        break;
+    }
+  }
+  onPaste(t, e) {
+    const a = this.clean(t.clipboardData?.getData("text") ?? "");
+    if (!a) return;
+    t.preventDefault();
+    const r = Math.min(e, this.value.length), i = (this.value.slice(0, r) + a).slice(0, this.length);
+    this.commit(i), this.updateComplete.then(() => this.box(Math.min(i.length, this.length - 1))?.focus());
+  }
+  render() {
+    const t = m(), e = Math.max(1, Math.round(this.length));
+    return c`<div part="group" class="group" role="group" aria-label=${this.label || h}>
+        ${Array.from({ length: e }, (a, r) => {
+      const i = this.value[r] ?? "";
+      return c`<input
+            part="box"
+            .value=${g(i)}
+            maxlength=${r === 0 ? e : 1}
+            inputmode=${this.type === "numeric" ? "numeric" : "text"}
+            autocomplete=${r === 0 ? "one-time-code" : "off"}
+            autocapitalize="characters"
+            spellcheck="false"
+            aria-label=${t.otpCharacter(r + 1, e)}
+            aria-invalid=${this.error ? "true" : h}
+            aria-describedby=${this.error ? this.errorId : h}
+            ?disabled=${this.inactive}
+            @input=${(o) => this.onInput(o, r)}
+            @keydown=${(o) => this.onKeyDown(o, r)}
+            @paste=${(o) => this.onPaste(o, r)}
+            @focus=${(o) => o.target.select()}
+          />`;
+    })}
+      </div>
+      ${this.error ? c`<p part="error" class="error" id=${this.errorId}>${this.error}</p>` : h}`;
+  }
+}
+l([
+  n({ type: String })
+], s.prototype, "value");
+l([
+  n({ type: Number })
+], s.prototype, "length");
+l([
+  n({ type: String })
+], s.prototype, "type");
+l([
+  n({ type: String })
+], s.prototype, "label");
+l([
+  n({ type: String })
+], s.prototype, "name");
+l([
+  n({ type: Boolean, reflect: !0 })
+], s.prototype, "required");
+l([
+  n({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled");
+l([
+  n({ type: String, reflect: !0 })
+], s.prototype, "error");
+l([
+  f()
+], s.prototype, "formDisabled");
+l([
+  b("input")
+], s.prototype, "boxes");
+y("kt-otp-input", s);
+export {
+  s as KtOtpInput
+};
+//# sourceMappingURL=kt-otp-input.js.map

package/dist/components/forms/kt-otp-input/kt-otp-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-otp-input.js","sources":["../../../../src/components/forms/kt-otp-input/kt-otp-input.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, queryAll, state } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit, uniqueId } from '#internal/events';\nimport {\n  attachFormInternals,\n  setFormValue,\n  setValidity,\n  type UsableInternals,\n} from '#internal/form-control';\nimport { strings } from '#internal/strings';\n\nexport type KtOtpInputType = 'numeric' | 'alphanumeric';\n\n/**\n * A one-time code — the six digits of a sign-in, a verification, a\n * second factor — one box per character.\n *\n * Typing moves to the next box, Backspace from an empty box steps back and\n * clears the one before, the arrows move between boxes, and a pasted code is\n * spread over them. The first box asks the browser for `one-time-code`, so a\n * code that arrived by text message fills itself in. `kt-complete` fires when\n * the code is whole.\n *\n * A form control: submitted under `name`, `required` until whole, reset with\n * the form.\n *\n * @element kt-otp-input\n *\n * @csspart group - The boxes.\n * @csspart box - One box.\n * @csspart error - The error message.\n *\n * @fires kt-change - The code changed. `detail: { value }`.\n * @fires kt-complete - The code is whole. `detail: { value }`.\n *\n * @example\n * ```html\n * <kt-otp-input label=\"Verification code\" name=\"code\" required></kt-otp-input>\n * ```\n */\nexport class KtOtpInput extends KtElement {\n  static readonly formAssociated = true;\n\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: inline-block;\n        --kt-otp-box-size: calc(var(--button-height) + 8px);\n      }\n\n      .group {\n        display: flex;\n        gap: var(--gap-button);\n      }\n\n      input {\n        box-sizing: border-box;\n        width: var(--kt-otp-box-size);\n        height: var(--kt-otp-box-size);\n        padding: 0;\n        color: var(--text-body);\n        font: 600 calc(20px * var(--text-scale, 1)) / 1 var(--font-family-body);\n        font-variant-numeric: tabular-nums;\n        text-align: center;\n        text-transform: uppercase;\n        background-color: var(--surface-field);\n        border: var(--border-width) solid var(--border-field);\n        border-radius: var(--radius-input);\n        outline: var(--outline-width) solid transparent;\n        caret-color: var(--color-primary-base);\n        transition: outline-color var(--duration-instant);\n      }\n      input:hover {\n        outline-color: var(--color-text-700);\n      }\n      input:focus {\n        outline-color: var(--color-primary-base);\n      }\n      input[aria-invalid='true'] {\n        outline-color: var(--color-danger-base);\n      }\n      input:disabled {\n        color: var(--text-disabled);\n        background-color: var(--color-dark-14);\n        cursor: not-allowed;\n        outline-color: transparent;\n      }\n\n      .error {\n        margin: var(--gap-element) 0 0;\n        color: var(--color-danger-text);\n        font: var(--font-normal-small);\n      }\n    `,\n  ];\n\n  /** The code so far. */\n  @property({ type: String })\n  value = '';\n\n  /** How many characters the code has. */\n  @property({ type: Number })\n  length = 6;\n\n  /** `numeric` takes digits; `alphanumeric` letters and digits, in capitals. */\n  @property({ type: String })\n  type: KtOtpInputType = 'numeric';\n\n  /** Accessible name for the group: \"Verification code\". */\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** An error to show and announce under the boxes. */\n  @property({ type: String, reflect: true })\n  error = '';\n\n  @state() private formDisabled = false;\n\n  @queryAll('input') private boxes!: NodeListOf<HTMLInputElement>;\n\n  private internals: UsableInternals | null = null;\n  private defaultValue = '';\n  private readonly errorId = uniqueId('kt-otp-error');\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.internals ??= attachFormInternals(this);\n    this.value = this.clean(this.value);\n    this.defaultValue = this.value;\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('value') || changed.has('length') || changed.has('type')) {\n      const cleaned = this.clean(this.value);\n      if (cleaned !== this.value) this.value = cleaned;\n    }\n  }\n\n  // After the render: the first box anchors the browser's message.\n  override updated(changed: PropertyValues<this>): void {\n    if (\n      changed.has('value') ||\n      changed.has('required') ||\n      changed.has('error') ||\n      changed.has('length') ||\n      this.stringsChanged(changed)\n    ) {\n      setFormValue(this.internals, this.value || null);\n      const missing = this.required && this.value.length < this.length;\n      setValidity(\n        this.internals,\n        { valueMissing: missing, customError: Boolean(this.error) },\n        this.error || (missing ? strings().otpRequired : ''),\n        this.boxes?.[0],\n      );\n    }\n  }\n\n  formResetCallback(): void {\n    this.value = this.defaultValue;\n  }\n\n  formDisabledCallback(disabled: boolean): void {\n    this.formDisabled = disabled;\n  }\n\n  formStateRestoreCallback(state: string | null): void {\n    this.value = state ?? '';\n  }\n\n  override focus(options?: FocusOptions): void {\n    this.box(Math.min(this.value.length, this.length - 1))?.focus(options);\n  }\n\n  private get inactive(): boolean {\n    return this.disabled || this.formDisabled;\n  }\n\n  /** What the code may hold: digits, or letters and digits in capitals, and no more than `length`. */\n  private clean(text: string): string {\n    const allowed = this.type === 'numeric' ? /[0-9]/ : /[A-Za-z0-9]/;\n    return [...text]\n      .filter((character) => allowed.test(character))\n      .join('')\n      .toUpperCase()\n      .slice(0, Math.max(1, this.length));\n  }\n\n  private box(index: number): HTMLInputElement | undefined {\n    return this.boxes?.[index];\n  }\n\n  /** Sets the code, says so, and says when it is whole. */\n  private commit(next: string): void {\n    const value = this.clean(next);\n    if (value === this.value) {\n      this.requestUpdate();\n      return;\n    }\n    this.value = value;\n    emit(this, 'kt-change', { value });\n    if (value.length === this.length) emit(this, 'kt-complete', { value });\n  }\n\n  private onInput(event: InputEvent, index: number): void {\n    const typed = this.clean((event.target as HTMLInputElement).value);\n    // Characters go in order: a box past the first empty one fills that one.\n    const at = Math.min(index, this.value.length);\n    if (!typed) {\n      this.commit(this.value);\n      return;\n    }\n    // More than one character — autofill, a fast typist — spreads on.\n    const next = (this.value.slice(0, at) + typed).slice(0, this.length);\n    this.commit(next + this.value.slice(at + typed.length));\n    void this.updateComplete.then(() => this.box(Math.min(next.length, this.length - 1))?.focus());\n  }\n\n  private onKeyDown(event: KeyboardEvent, index: number): void {\n    const move = (to: number) => {\n      event.preventDefault();\n      this.box(Math.max(0, Math.min(this.length - 1, to)))?.focus();\n    };\n    switch (event.key) {\n      case 'Backspace': {\n        event.preventDefault();\n        const at = index < this.value.length ? index : this.value.length - 1;\n        if (at < 0) return;\n        this.commit(this.value.slice(0, at) + this.value.slice(at + 1));\n        void this.updateComplete.then(() => this.box(at)?.focus());\n        break;\n      }\n      case 'ArrowLeft':\n        move(index - 1);\n        break;\n      case 'ArrowRight':\n        move(Math.min(index + 1, this.value.length));\n        break;\n      case 'Home':\n        move(0);\n        break;\n      case 'End':\n        move(this.value.length);\n        break;\n    }\n  }\n\n  private onPaste(event: ClipboardEvent, index: number): void {\n    const pasted = this.clean(event.clipboardData?.getData('text') ?? '');\n    if (!pasted) return;\n    event.preventDefault();\n    const at = Math.min(index, this.value.length);\n    const next = (this.value.slice(0, at) + pasted).slice(0, this.length);\n    this.commit(next);\n    void this.updateComplete.then(() => this.box(Math.min(next.length, this.length - 1))?.focus());\n  }\n\n  override render(): TemplateResult {\n    const s = strings();\n    const count = Math.max(1, Math.round(this.length));\n    return html`<div part=\"group\" class=\"group\" role=\"group\" aria-label=${this.label || nothing}>\n        ${Array.from({ length: count }, (_, index) => {\n          const character = this.value[index] ?? '';\n          return html`<input\n            part=\"box\"\n            .value=${live(character)}\n            maxlength=${index === 0 ? count : 1}\n            inputmode=${this.type === 'numeric' ? 'numeric' : 'text'}\n            autocomplete=${index === 0 ? 'one-time-code' : 'off'}\n            autocapitalize=\"characters\"\n            spellcheck=\"false\"\n            aria-label=${s.otpCharacter(index + 1, count)}\n            aria-invalid=${this.error ? 'true' : nothing}\n            aria-describedby=${this.error ? this.errorId : nothing}\n            ?disabled=${this.inactive}\n            @input=${(event: InputEvent) => this.onInput(event, index)}\n            @keydown=${(event: KeyboardEvent) => this.onKeyDown(event, index)}\n            @paste=${(event: ClipboardEvent) => this.onPaste(event, index)}\n            @focus=${(event: FocusEvent) => (event.target as HTMLInputElement).select()}\n          />`;\n        })}\n      </div>\n      ${\n        this.error\n          ? html`<p part=\"error\" class=\"error\" id=${this.errorId}>${this.error}</p>`\n          : nothing\n      }`;\n  }\n}\n\ndefineElement('kt-otp-input', KtOtpInput);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-otp-input': KtOtpInput;\n  }\n}\n"],"names":["KtOtpInput","KtElement","uniqueId","css","attachFormInternals","changed","cleaned","setFormValue","missing","setValidity","strings","disabled","state","options","text","allowed","character","index","next","value","emit","event","typed","at","move","to","pasted","s","count","html","nothing","_","live","__decorateClass","property","queryAll","defineElement"],"mappings":"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"}

package/dist/components/forms/kt-prompt-input/kt-prompt-input.d.ts

@@ -0,0 +1,74 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-button/kt-button.js';
+export type KtPromptInputSubmitOn = 'enter' | 'mod-enter';
+/** What `kt-submit` carries: the text, and a way to have the input wait for its sending. */
+export interface KtPromptSubmitDetail {
+    readonly value: string;
+    /** Hand it the sending: the field holds the text until it resolves, and keeps it if it fails. */
+    readonly wait: (sending: Promise<unknown>) => void;
+}
+/**
+ * The field a person writes to an assistant in: it grows with what is
+ * written, sends on Enter, and shows the sending on its own send button.
+ *
+ * Enter sends and Shift+Enter starts a line; with `submit-on="mod-enter"`,
+ * Enter starts a line and Cmd or Ctrl+Enter sends. `kt-submit` carries the
+ * text and `wait(promise)`: hand it the request, and the send button runs it
+ * — its plane turning into the spinner and flying off — while the field holds
+ * the text, emptied on success, kept on failure. Without `wait` the field
+ * empties at once.
+ *
+ * @element kt-prompt-input
+ *
+ * @slot attachments - Above the text: files or context added to the message.
+ * @slot actions - Beside the send button: attach, a model picker, a mode.
+ *
+ * @csspart base - The field.
+ * @csspart textarea - The native `<textarea>`.
+ * @csspart send - The send button.
+ *
+ * @fires kt-input - On every keystroke. `detail: { value }`.
+ * @fires kt-submit - The text was sent. `detail: { value, wait(promise) }`.
+ *
+ * @example
+ * ```html
+ * <kt-prompt-input placeholder="Ask anything"></kt-prompt-input>
+ * <script>
+ *   prompt.addEventListener('kt-submit', (e) => e.detail.wait(api.ask(e.detail.value)));
+ * </script>
+ * ```
+ */
+export declare class KtPromptInput extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The text in the field. */
+    value: string;
+    placeholder: string;
+    /** Accessible name for the field. Defaults to the translated "Message". */
+    label: string;
+    disabled: boolean;
+    /** How many lines it grows to before it scrolls. */
+    maxRows: number;
+    /** `enter` sends on Enter; `mod-enter` on Cmd or Ctrl+Enter, leaving Enter for new lines. */
+    submitOn: KtPromptInputSubmitOn;
+    private sending;
+    private hasAttachments;
+    private field;
+    private button;
+    focus(options?: FocusOptions): void;
+    /** Sends what is written, as Enter would. Nothing when it is blank, disabled or sending. */
+    submit(): void;
+    firstUpdated(): void;
+    updated(changed: PropertyValues<this>): void;
+    /** As tall as the text, up to `max-rows`; past that it scrolls. */
+    private fit;
+    private readAttachments;
+    private onInput;
+    private onKeyDown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-prompt-input': KtPromptInput;
+    }
+}

package/dist/components/forms/kt-prompt-input/kt-prompt-input.js

@@ -0,0 +1,213 @@
+import { css as f, nothing as b, html as v } from "lit";
+import { property as o, state as m, query as c } from "lit/decorators.js";
+import { classMap as p } from "lit/directives/class-map.js";
+import { live as y } from "lit/directives/live.js";
+import { K as h, d as g } from "../../../chunks/kt-element-DvWtPQ1Y.js";
+import { e as u } from "../../../chunks/events-r51msXNf.js";
+import { h as x } from "../../../chunks/slots-BPbIdxAJ.js";
+import { s as w } from "../../../chunks/index-1ZFgagWW.js";
+import "../../core/kt-button/kt-button.js";
+var k = Object.defineProperty, i = (d, t, e, l) => {
+  for (var s = void 0, r = d.length - 1, n; r >= 0; r--)
+    (n = d[r]) && (s = n(t, e, s) || s);
+  return s && k(t, e, s), s;
+};
+class a extends h {
+  constructor() {
+    super(...arguments), this.value = "", this.placeholder = "", this.label = "", this.disabled = !1, this.maxRows = 8, this.submitOn = "enter", this.sending = !1, this.hasAttachments = !1;
+  }
+  static {
+    this.styles = [
+      h.styles,
+      f`
+      :host {
+        display: block;
+      }
+
+      .field {
+        display: grid;
+        gap: var(--gap-element);
+        padding: var(--gap-element);
+        background-color: var(--surface-field);
+        border: var(--border-width) solid var(--border-field);
+        border-radius: var(--border-radius-card);
+        outline: var(--outline-width) solid transparent;
+        transition: outline-color var(--duration-instant);
+      }
+      .field:hover {
+        outline: var(--outline-width) solid var(--color-text-700);
+      }
+      .field:focus-within {
+        outline: var(--outline-width) solid var(--color-primary-base);
+      }
+      .disabled {
+        background-color: var(--color-dark-14);
+        pointer-events: none;
+      }
+
+      .attachments {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--gap-button);
+      }
+      .attachments.empty {
+        display: none;
+      }
+
+      textarea {
+        box-sizing: border-box;
+        width: 100%;
+        padding: var(--text-area-padding);
+        overflow-y: hidden;
+        color: var(--text-body);
+        font: var(--font-input);
+        background: transparent;
+        border: none;
+        outline: none;
+        resize: none;
+      }
+      textarea::placeholder {
+        color: var(--text-muted);
+      }
+      .disabled textarea {
+        color: var(--text-disabled);
+      }
+
+      .bar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--gap-button);
+      }
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--gap-button);
+        min-width: 0;
+      }
+    `
+    ];
+  }
+  focus(t) {
+    this.field?.focus(t);
+  }
+  /** Sends what is written, as Enter would. Nothing when it is blank, disabled or sending. */
+  submit() {
+    const t = this.value;
+    if (this.disabled || this.sending || !t.trim()) return;
+    let e = null;
+    if (u(this, "kt-submit", {
+      value: t,
+      wait: (s) => {
+        e = s;
+      }
+    }), !e) {
+      this.value = "";
+      return;
+    }
+    const l = e;
+    this.sending = !0, this.button.run(() => l).then(
+      () => {
+        this.value === t && (this.value = "");
+      },
+      () => {
+      }
+    ).finally(() => {
+      this.sending = !1;
+    });
+  }
+  firstUpdated() {
+    this.readAttachments(), this.fit();
+  }
+  updated(t) {
+    (t.has("value") || t.has("maxRows")) && this.fit();
+  }
+  /** As tall as the text, up to `max-rows`; past that it scrolls. */
+  fit() {
+    const t = this.field;
+    if (!t) return;
+    const e = getComputedStyle(t), l = parseFloat(e.lineHeight) || 20, s = parseFloat(e.paddingTop) + parseFloat(e.paddingBottom) || 0, r = l * Math.max(1, this.maxRows) + s;
+    t.style.height = "auto";
+    const n = t.scrollHeight;
+    t.style.height = `${Math.min(n, r)}px`, t.style.overflowY = n > r ? "auto" : "hidden";
+  }
+  readAttachments() {
+    this.hasAttachments = x(
+      this.shadowRoot?.querySelector('slot[name="attachments"]')
+    );
+  }
+  onInput() {
+    this.value = this.field.value, u(this, "kt-input", { value: this.value });
+  }
+  onKeyDown(t) {
+    if (t.key !== "Enter" || t.isComposing || t.shiftKey) return;
+    const e = t.metaKey || t.ctrlKey;
+    this.submitOn === "mod-enter" && !e || (t.preventDefault(), this.submit());
+  }
+  render() {
+    const t = w(), e = !this.value.trim();
+    return v`<div part="base" class=${p({ field: !0, disabled: this.disabled })}>
+      <div class=${p({ attachments: !0, empty: !this.hasAttachments })}>
+        <slot name="attachments" @slotchange=${this.readAttachments}></slot>
+      </div>
+      <textarea
+        part="textarea"
+        rows="1"
+        .value=${y(this.value)}
+        placeholder=${this.placeholder || b}
+        aria-label=${this.label || t.message}
+        ?disabled=${this.disabled}
+        ?readonly=${this.sending}
+        @input=${this.onInput}
+        @keydown=${this.onKeyDown}
+      ></textarea>
+      <div class="bar">
+        <div class="actions"><slot name="actions"></slot></div>
+        <kt-button
+          part="send"
+          icon="send"
+          size="small"
+          label=${t.send}
+          ?disabled=${e && !this.sending || this.disabled}
+          @click=${() => this.submit()}
+        ></kt-button>
+      </div>
+    </div>`;
+  }
+}
+i([
+  o({ type: String })
+], a.prototype, "value");
+i([
+  o({ type: String })
+], a.prototype, "placeholder");
+i([
+  o({ type: String })
+], a.prototype, "label");
+i([
+  o({ type: Boolean, reflect: !0 })
+], a.prototype, "disabled");
+i([
+  o({ type: Number, attribute: "max-rows" })
+], a.prototype, "maxRows");
+i([
+  o({ type: String, attribute: "submit-on" })
+], a.prototype, "submitOn");
+i([
+  m()
+], a.prototype, "sending");
+i([
+  m()
+], a.prototype, "hasAttachments");
+i([
+  c("textarea")
+], a.prototype, "field");
+i([
+  c("kt-button")
+], a.prototype, "button");
+g("kt-prompt-input", a);
+export {
+  a as KtPromptInput
+};
+//# sourceMappingURL=kt-prompt-input.js.map

package/dist/components/forms/kt-prompt-input/kt-prompt-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-prompt-input.js","sources":["../../../../src/components/forms/kt-prompt-input/kt-prompt-input.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { hasAssignedContent } from '#internal/slots';\nimport { strings } from '#internal/strings';\nimport '../../core/kt-button/kt-button.js';\nimport type { KtButton } from '../../core/kt-button/kt-button.js';\n\nexport type KtPromptInputSubmitOn = 'enter' | 'mod-enter';\n\n/** What `kt-submit` carries: the text, and a way to have the input wait for its sending. */\nexport interface KtPromptSubmitDetail {\n  readonly value: string;\n  /** Hand it the sending: the field holds the text until it resolves, and keeps it if it fails. */\n  readonly wait: (sending: Promise<unknown>) => void;\n}\n\n/**\n * The field a person writes to an assistant in: it grows with what is\n * written, sends on Enter, and shows the sending on its own send button.\n *\n * Enter sends and Shift+Enter starts a line; with `submit-on=\"mod-enter\"`,\n * Enter starts a line and Cmd or Ctrl+Enter sends. `kt-submit` carries the\n * text and `wait(promise)`: hand it the request, and the send button runs it\n * — its plane turning into the spinner and flying off — while the field holds\n * the text, emptied on success, kept on failure. Without `wait` the field\n * empties at once.\n *\n * @element kt-prompt-input\n *\n * @slot attachments - Above the text: files or context added to the message.\n * @slot actions - Beside the send button: attach, a model picker, a mode.\n *\n * @csspart base - The field.\n * @csspart textarea - The native `<textarea>`.\n * @csspart send - The send button.\n *\n * @fires kt-input - On every keystroke. `detail: { value }`.\n * @fires kt-submit - The text was sent. `detail: { value, wait(promise) }`.\n *\n * @example\n * ```html\n * <kt-prompt-input placeholder=\"Ask anything\"></kt-prompt-input>\n * <script>\n *   prompt.addEventListener('kt-submit', (e) => e.detail.wait(api.ask(e.detail.value)));\n * </script>\n * ```\n */\nexport class KtPromptInput extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .field {\n        display: grid;\n        gap: var(--gap-element);\n        padding: var(--gap-element);\n        background-color: var(--surface-field);\n        border: var(--border-width) solid var(--border-field);\n        border-radius: var(--border-radius-card);\n        outline: var(--outline-width) solid transparent;\n        transition: outline-color var(--duration-instant);\n      }\n      .field:hover {\n        outline: var(--outline-width) solid var(--color-text-700);\n      }\n      .field:focus-within {\n        outline: var(--outline-width) solid var(--color-primary-base);\n      }\n      .disabled {\n        background-color: var(--color-dark-14);\n        pointer-events: none;\n      }\n\n      .attachments {\n        display: flex;\n        flex-wrap: wrap;\n        gap: var(--gap-button);\n      }\n      .attachments.empty {\n        display: none;\n      }\n\n      textarea {\n        box-sizing: border-box;\n        width: 100%;\n        padding: var(--text-area-padding);\n        overflow-y: hidden;\n        color: var(--text-body);\n        font: var(--font-input);\n        background: transparent;\n        border: none;\n        outline: none;\n        resize: none;\n      }\n      textarea::placeholder {\n        color: var(--text-muted);\n      }\n      .disabled textarea {\n        color: var(--text-disabled);\n      }\n\n      .bar {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: var(--gap-button);\n      }\n      .actions {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: var(--gap-button);\n        min-width: 0;\n      }\n    `,\n  ];\n\n  /** The text in the field. */\n  @property({ type: String })\n  value = '';\n\n  @property({ type: String })\n  placeholder = '';\n\n  /** Accessible name for the field. Defaults to the translated \"Message\". */\n  @property({ type: String })\n  label = '';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** How many lines it grows to before it scrolls. */\n  @property({ type: Number, attribute: 'max-rows' })\n  maxRows = 8;\n\n  /** `enter` sends on Enter; `mod-enter` on Cmd or Ctrl+Enter, leaving Enter for new lines. */\n  @property({ type: String, attribute: 'submit-on' })\n  submitOn: KtPromptInputSubmitOn = 'enter';\n\n  @state() private sending = false;\n  @state() private hasAttachments = false;\n\n  @query('textarea') private field!: HTMLTextAreaElement;\n  @query('kt-button') private button!: KtButton;\n\n  override focus(options?: FocusOptions): void {\n    this.field?.focus(options);\n  }\n\n  /** Sends what is written, as Enter would. Nothing when it is blank, disabled or sending. */\n  submit(): void {\n    const value = this.value;\n    if (this.disabled || this.sending || !value.trim()) return;\n    let sending: Promise<unknown> | null = null;\n    emit<KtPromptSubmitDetail>(this, 'kt-submit', {\n      value,\n      wait: (promise) => {\n        sending = promise;\n      },\n    });\n    if (!sending) {\n      this.value = '';\n      return;\n    }\n    const waited: Promise<unknown> = sending;\n    this.sending = true;\n    void this.button\n      .run(() => waited)\n      .then(\n        () => {\n          // A newer text typed meanwhile is the reader's, not the sent one.\n          if (this.value === value) this.value = '';\n        },\n        () => undefined,\n      )\n      .finally(() => {\n        this.sending = false;\n      });\n  }\n\n  override firstUpdated(): void {\n    this.readAttachments();\n    this.fit();\n  }\n\n  override updated(changed: PropertyValues<this>): void {\n    if (changed.has('value') || changed.has('maxRows')) this.fit();\n  }\n\n  /** As tall as the text, up to `max-rows`; past that it scrolls. */\n  private fit(): void {\n    const field = this.field;\n    if (!field) return;\n    const style = getComputedStyle(field);\n    const line = parseFloat(style.lineHeight) || 20;\n    const padding = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) || 0;\n    const most = line * Math.max(1, this.maxRows) + padding;\n    field.style.height = 'auto';\n    const wanted = field.scrollHeight;\n    field.style.height = `${Math.min(wanted, most)}px`;\n    field.style.overflowY = wanted > most ? 'auto' : 'hidden';\n  }\n\n  private readAttachments(): void {\n    this.hasAttachments = hasAssignedContent(\n      this.shadowRoot?.querySelector('slot[name=\"attachments\"]'),\n    );\n  }\n\n  private onInput(): void {\n    this.value = this.field.value;\n    emit(this, 'kt-input', { value: this.value });\n  }\n\n  private onKeyDown(event: KeyboardEvent): void {\n    if (event.key !== 'Enter' || event.isComposing || event.shiftKey) return;\n    const mod = event.metaKey || event.ctrlKey;\n    if (this.submitOn === 'mod-enter' && !mod) return;\n    event.preventDefault();\n    this.submit();\n  }\n\n  override render(): TemplateResult {\n    const s = strings();\n    const blank = !this.value.trim();\n    return html`<div part=\"base\" class=${classMap({ field: true, disabled: this.disabled })}>\n      <div class=${classMap({ attachments: true, empty: !this.hasAttachments })}>\n        <slot name=\"attachments\" @slotchange=${this.readAttachments}></slot>\n      </div>\n      <textarea\n        part=\"textarea\"\n        rows=\"1\"\n        .value=${live(this.value)}\n        placeholder=${this.placeholder || nothing}\n        aria-label=${this.label || s.message}\n        ?disabled=${this.disabled}\n        ?readonly=${this.sending}\n        @input=${this.onInput}\n        @keydown=${this.onKeyDown}\n      ></textarea>\n      <div class=\"bar\">\n        <div class=\"actions\"><slot name=\"actions\"></slot></div>\n        <kt-button\n          part=\"send\"\n          icon=\"send\"\n          size=\"small\"\n          label=${s.send}\n          ?disabled=${(blank && !this.sending) || this.disabled}\n          @click=${() => this.submit()}\n        ></kt-button>\n      </div>\n    </div>`;\n  }\n}\n\ndefineElement('kt-prompt-input', KtPromptInput);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-prompt-input': KtPromptInput;\n  }\n}\n"],"names":["KtPromptInput","KtElement","css","options","value","sending","emit","promise","waited","changed","field","style","line","padding","most","wanted","hasAssignedContent","event","mod","s","strings","blank","html","classMap","live","nothing","__decorateClass","property","state","query","defineElement"],"mappings":"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"}

package/dist/components/forms/kt-radio-group/kt-radio-group.js

@@ -1,9 +1,9 @@
 import { css as f, nothing as d, html as p } from "lit";
 import { property as i, queryAssignedElements as y, state as g } from "lit/decorators.js";
-import { K as u, d as v } from "../../../chunks/kt-element-T0VbIBNp.js";
+import { K as u, d as v } from "../../../chunks/kt-element-DvWtPQ1Y.js";
 import { e as m } from "../../../chunks/events-r51msXNf.js";
 import { a as k, s as w, b as x } from "../../../chunks/form-control-B74_EHtG.js";
-import { s as b } from "../../../chunks/index-TWJzttLX.js";
+import { s as b } from "../../../chunks/index-1ZFgagWW.js";
 var D = Object.defineProperty, a = (c, e, t, l) => {
   for (var r = void 0, o = c.length - 1, h; o >= 0; o--)
     (h = c[o]) && (r = h(e, t, r) || r);

package/dist/components/forms/kt-select/kt-select.js

@@ -1,12 +1,12 @@
 import { css as x, nothing as n, html as h } from "lit";
 import { state as p, property as s } from "lit/decorators.js";
 import { classMap as d } from "lit/directives/class-map.js";
-import { K as v, d as w } from "../../../chunks/kt-element-T0VbIBNp.js";
+import { K as v, d as w } from "../../../chunks/kt-element-DvWtPQ1Y.js";
 import { u as k, t as g, e as m } from "../../../chunks/events-r51msXNf.js";
 import { a as $, s as I, b as D } from "../../../chunks/form-control-B74_EHtG.js";
 import { a as S, f as b, l as L, n as C, o as y } from "../../../chunks/listbox-LsUEyGhQ.js";
 import { F as E, f as P } from "../../../chunks/floating-C9RLa6cZ.js";
-import { s as l } from "../../../chunks/index-TWJzttLX.js";
+import { s as l } from "../../../chunks/index-1ZFgagWW.js";
 import "../../core/kt-icon/kt-icon.js";
 var q = Object.defineProperty, i = (c, e, o, a) => {
   for (var r = void 0, u = c.length - 1, f; u >= 0; u--)