kanto-ds 1.4.0 → 1.5.2

package/dist/components/data/kt-table/kt-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"kt-table.js","sources":["../../../../src/components/data/kt-table/kt-table.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { strings } from '#internal/strings';\nimport '../kt-pagination/kt-pagination.js';\n\nexport type KtSortDirection = 'asc' | 'desc' | null;\nexport type KtTableRow = Record<string, unknown>;\n\nexport interface KtTableColumn {\n  /** Key into the row object. */\n  readonly key: string;\n  /** Header text. Falls back to `key`. */\n  readonly label?: string;\n  readonly sortable?: boolean;\n  readonly align?: 'left' | 'center' | 'right';\n  /** Any CSS width. */\n  readonly width?: string;\n}\n\nexport interface KtSortState {\n  readonly key: string | null;\n  readonly direction: KtSortDirection;\n}\n\n/** Renders a cell. Return `undefined` to fall back to the raw value. */\nexport type KtCellRenderer = (row: KtTableRow, column: KtTableColumn) => unknown;\n\n/**\n * Sorts with a locale-aware collator, so \"Ångström\" files next to \"Angstrom\"\n * instead of after \"Zeta\". `numeric` also makes \"Entity 2\" precede\n * \"Entity 10\".\n */\nconst collator = new Intl.Collator('en', { numeric: true, sensitivity: 'base' });\n\n/**\n * A sortable string for any cell value.\n *\n * Objects get their JSON rather than \"[object Object]\", which at least sorts\n * consistently instead of collapsing every object in the column to one key.\n */\nfunction sortableText(value: unknown): string {\n  if (typeof value === 'string') return value;\n  if (typeof value === 'number' || typeof value === 'boolean' || typeof value === 'bigint') {\n    return String(value);\n  }\n  try {\n    return JSON.stringify(value) ?? '';\n  } catch {\n    return '';\n  }\n}\n\n/** A row's identity: `id`, else `uid`, else the row itself. */\nfunction rowKey(row: KtTableRow): unknown {\n  return row['id'] ?? row['uid'] ?? row;\n}\n\n/**\n * A data table: tri-state sorting, single or multiple selection, paging.\n *\n * @element kt-table\n *\n * @csspart table - The `<table>`.\n * @csspart header-cell - A `<th>`.\n * @csspart row - A `<tr>`.\n * @csspart cell - A `<td>`.\n *\n * @fires kt-sort-change - Sorting changed. `detail: { key, direction }`.\n * @fires kt-selection-change - Selection changed. `detail: { selected, rows }`.\n * @fires kt-row-click - A row was clicked. `detail: { row, index }`.\n * @fires kt-page-change - The page changed. `detail: { page }`.\n *\n * @example\n * ```js\n * table.columns = [\n *   { key: 'name', label: 'Name', sortable: true },\n *   { key: 'amount', label: 'Amount', sortable: true, align: 'right' },\n * ];\n * table.data = rows;\n * ```\n */\nexport class KtTable extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n        width: 100%;\n        color: var(--text-body);\n        font: var(--font-normal-regular);\n      }\n\n      .scroller {\n        overflow: auto;\n        border-radius: var(--border-radius);\n      }\n\n      table {\n        width: 100%;\n        min-width: 600px;\n        border-spacing: 0;\n        border-collapse: separate;\n      }\n\n      thead {\n        background: var(--surface-card);\n        color: var(--text-muted);\n      }\n\n      th {\n        padding: 16px 18px;\n        font-size: 13px;\n        font-weight: inherit;\n        text-align: left;\n        white-space: nowrap;\n        vertical-align: middle;\n        user-select: none;\n      }\n\n      /* Sortable headers are buttons, not clickable <th>s: a header you can\n         only sort with a mouse is a table half the users cannot sort. */\n      th button {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        width: 100%;\n        padding: 0;\n        color: inherit;\n        font: inherit;\n        text-align: inherit;\n        background: none;\n        border: none;\n        cursor: pointer;\n      }\n\n      th button:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 2px;\n      }\n\n      .indicator {\n        color: var(--color-primary-text);\n        font-size: 10px;\n      }\n\n      tbody tr {\n        transition: background-color 120ms linear;\n      }\n\n      tbody tr:hover {\n        background: var(--color-dark-14);\n      }\n\n      tbody tr.selected {\n        background: var(--color-primary-soft);\n      }\n\n      td {\n        padding: 14px 18px;\n        font-size: 14px;\n        border-bottom: var(--border-width) solid var(--surface-hover);\n      }\n\n      :host([compact]) td {\n        padding: 8px 12px;\n      }\n      :host([compact]) th {\n        padding: 10px 12px;\n      }\n\n      .select-cell {\n        width: 56px;\n        text-align: center;\n      }\n\n      .placeholder {\n        padding: 28px 0;\n        color: var(--text-muted);\n        text-align: center;\n      }\n\n      footer {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n        gap: 12px;\n        padding-top: 12px;\n      }\n\n      @media (max-width: 680px) {\n        table {\n          min-width: 100%;\n        }\n        td,\n        th {\n          padding: 10px 12px;\n        }\n      }\n    `,\n  ];\n\n  @state()\n  private page = 1;\n\n  @property({ attribute: false })\n  columns: readonly KtTableColumn[] = [];\n\n  @property({ attribute: false })\n  data: readonly KtTableRow[] = [];\n\n  @property({ type: Boolean, reflect: true })\n  selectable = false;\n\n  @property({ type: String, attribute: 'selection-mode' })\n  selectionMode: 'single' | 'multiple' = 'multiple';\n\n  /** The identities of the selected rows. */\n  @property({ attribute: false })\n  selected: readonly unknown[] = [];\n\n  /** Rows per page. Zero shows everything and hides the footer. */\n  @property({ type: Number, attribute: 'page-size' })\n  pageSize = 0;\n\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  @property({ type: Boolean, reflect: true })\n  compact = false;\n\n  @property({ type: String, attribute: 'sort-key' })\n  sortKey: string | null = null;\n\n  @property({ type: String, attribute: 'sort-direction' })\n  sortDirection: KtSortDirection = null;\n\n  /** Renders a cell. Return `undefined` to fall back to the raw value. */\n  @property({ attribute: false })\n  renderCell: KtCellRenderer | undefined;\n\n  @property({ type: String, attribute: 'empty-text' })\n  emptyText: string | undefined = undefined;\n\n  @property({ type: String, attribute: 'loading-text' })\n  loadingText: string | undefined = undefined;\n\n  /** Accessible name for the table. */\n  @property({ type: String })\n  label = '';\n\n  /** The rows after sorting, before paging. */\n  get sortedRows(): readonly KtTableRow[] {\n    if (!this.sortKey || !this.sortDirection) return this.data;\n\n    const key = this.sortKey;\n    const sign = this.sortDirection === 'asc' ? 1 : -1;\n\n    return [...this.data].sort((a, b) => {\n      const left = a[key];\n      const right = b[key];\n\n      // Empty values sort to the end whichever way the column points, so a\n      // descending sort does not open with a screen of blanks.\n      const leftEmpty = left === null || left === undefined;\n      const rightEmpty = right === null || right === undefined;\n      if (leftEmpty && rightEmpty) return 0;\n      if (leftEmpty) return 1;\n      if (rightEmpty) return -1;\n\n      if (typeof left === 'number' && typeof right === 'number') return (left - right) * sign;\n      return collator.compare(sortableText(left), sortableText(right)) * sign;\n    });\n  }\n\n  get totalPages(): number {\n    if (this.pageSize <= 0) return 1;\n    return Math.max(1, Math.ceil(this.data.length / this.pageSize));\n  }\n\n  /** The rows actually on screen. */\n  get visibleRows(): readonly KtTableRow[] {\n    const rows = this.sortedRows;\n    if (this.pageSize <= 0) return rows;\n\n    const page = Math.min(this.page, this.totalPages);\n    return rows.slice((page - 1) * this.pageSize, page * this.pageSize);\n  }\n\n  /**\n   * Cycles a column: unsorted → ascending → descending → unsorted. The third\n   * press restoring the original order is what makes sorting undoable.\n   */\n  private toggleSort(column: KtTableColumn): void {\n    if (!column.sortable) return;\n\n    if (this.sortKey !== column.key) {\n      this.sortKey = column.key;\n      this.sortDirection = 'asc';\n    } else if (this.sortDirection === 'asc') {\n      this.sortDirection = 'desc';\n    } else {\n      this.sortKey = null;\n      this.sortDirection = null;\n    }\n\n    emit(this, 'kt-sort-change', { key: this.sortKey, direction: this.sortDirection });\n  }\n\n  private isSelected(row: KtTableRow): boolean {\n    return this.selected.includes(rowKey(row));\n  }\n\n  private toggleSelection(row: KtTableRow): void {\n    const key = rowKey(row);\n\n    if (this.selectionMode === 'single') {\n      this.selected = this.isSelected(row) ? [] : [key];\n    } else {\n      this.selected = this.isSelected(row)\n        ? this.selected.filter((candidate) => candidate !== key)\n        : [...this.selected, key];\n    }\n\n    emit(this, 'kt-selection-change', { selected: this.selected, rows: this.selectedRows });\n  }\n\n  /** Selects or clears every row on the current page. */\n  private toggleAll(): void {\n    const rows = this.visibleRows;\n    const keys = rows.map(rowKey);\n    const allSelected = keys.every((key) => this.selected.includes(key));\n\n    this.selected = allSelected\n      ? this.selected.filter((key) => !keys.includes(key))\n      : [...new Set([...this.selected, ...keys])];\n\n    emit(this, 'kt-selection-change', { selected: this.selected, rows: this.selectedRows });\n  }\n\n  /** The selected rows themselves, not just their identities. */\n  get selectedRows(): readonly KtTableRow[] {\n    return this.data.filter((row) => this.selected.includes(rowKey(row)));\n  }\n\n  private onPageChange(event: Event): void {\n    event.stopPropagation();\n    this.page = (event as CustomEvent<{ page: number }>).detail.page;\n    emit(this, 'kt-page-change', { page: this.page });\n  }\n\n  /**\n   * The aria-sort value for a column.\n   *\n   * Not named ariaSort: HTMLElement reflects that ARIA attribute as a string\n   * property, and shadowing it with a method breaks the element's own typing.\n   */\n  private sortStateFor(column: KtTableColumn): 'ascending' | 'descending' | 'none' {\n    if (this.sortKey !== column.key || !this.sortDirection) return 'none';\n    return this.sortDirection === 'asc' ? 'ascending' : 'descending';\n  }\n\n  private renderHeaderCell(column: KtTableColumn): TemplateResult {\n    const title = column.label ?? column.key;\n    const active = this.sortKey === column.key && this.sortDirection !== null;\n\n    return html`<th\n      part=\"header-cell\"\n      scope=\"col\"\n      style=${styleMap(column.width ? { width: column.width } : {})}\n      aria-sort=${this.sortStateFor(column)}\n    >\n      ${\n        column.sortable\n          ? html`<button type=\"button\" @click=${() => this.toggleSort(column)}>\n              <span>${title}</span>\n              <span class=\"indicator\" aria-hidden=\"true\"\n                >${active ? (this.sortDirection === 'asc' ? '▲' : '▼') : ''}</span\n              >\n            </button>`\n          : html`<span>${title}</span>`\n      }\n    </th>`;\n  }\n\n  private renderBody(): TemplateResult {\n    const rows = this.visibleRows;\n    const columnCount = this.columns.length + (this.selectable ? 1 : 0);\n\n    if (rows.length === 0) {\n      return html`<tr>\n        <td colspan=${columnCount}>\n          <div class=\"placeholder\">${this.emptyText ?? strings().noData}</div>\n        </td>\n      </tr>`;\n    }\n\n    return html`${rows.map((row, index) => {\n      const selected = this.isSelected(row);\n\n      return html`<tr\n        part=\"row\"\n        class=${classMap({ selected })}\n        aria-selected=${this.selectable ? String(selected) : nothing}\n        @click=${() => emit(this, 'kt-row-click', { row, index })}\n      >\n        ${\n          this.selectable\n            ? html`<td class=\"select-cell\">\n                <input\n                  type=${this.selectionMode === 'single' ? 'radio' : 'checkbox'}\n                  name=${this.selectionMode === 'single' ? 'kt-table-selection' : nothing}\n                  .checked=${selected}\n                  aria-label=${strings().selectRow}\n                  @click=${(event: Event) => event.stopPropagation()}\n                  @change=${() => this.toggleSelection(row)}\n                />\n              </td>`\n            : nothing\n        }\n        ${this.columns.map((column) => {\n          const rendered = this.renderCell?.(row, column);\n          return html`<td part=\"cell\" style=${styleMap({ textAlign: column.align ?? 'left' })}>\n            ${rendered === undefined ? row[column.key] : rendered}\n          </td>`;\n        })}\n      </tr>`;\n    })}`;\n  }\n\n  override render(): TemplateResult {\n    if (this.loading) {\n      return html`<div class=\"placeholder\" role=\"status\" aria-live=\"polite\">\n        ${this.loadingText ?? strings().loading}\n      </div>`;\n    }\n\n    const rows = this.visibleRows;\n    const allSelected = rows.length > 0 && rows.every((row) => this.isSelected(row));\n    const someSelected = rows.some((row) => this.isSelected(row));\n\n    return html`<div class=\"scroller\">\n        <table part=\"table\" aria-label=${this.label || nothing}>\n          <thead>\n            <tr>\n              ${\n                this.selectable\n                  ? html`<th class=\"select-cell\" scope=\"col\">\n                      ${\n                        this.selectionMode === 'multiple'\n                          ? html`<input\n                              type=\"checkbox\"\n                              .checked=${allSelected}\n                              .indeterminate=${someSelected && !allSelected}\n                              aria-label=${strings().selectAll}\n                              @change=${this.toggleAll}\n                            />`\n                          : nothing\n                      }\n                    </th>`\n                  : nothing\n              }\n              ${this.columns.map((column) => this.renderHeaderCell(column))}\n            </tr>\n          </thead>\n          <tbody>\n            ${this.renderBody()}\n          </tbody>\n        </table>\n      </div>\n\n      ${\n        this.pageSize > 0\n          ? html`<footer>\n              <kt-pagination\n                .page=${Math.min(this.page, this.totalPages)}\n                .totalPages=${this.totalPages}\n                @kt-page-change=${this.onPageChange}\n              ></kt-pagination>\n            </footer>`\n          : nothing\n      }`;\n  }\n}\n\ndefineElement('kt-table', KtTable);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-table': KtTable;\n  }\n}\n"],"names":["collator","sortableText","value","rowKey","row","KtTable","KtElement","css","key","sign","a","b","left","right","leftEmpty","rightEmpty","rows","page","column","emit","candidate","keys","allSelected","event","title","active","html","styleMap","columnCount","strings","index","selected","classMap","nothing","rendered","someSelected","__decorateClass","state","property","defineElement"],"mappings":"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"}
+{"version":3,"file":"kt-table.js","sources":["../../../../src/components/data/kt-table/window.ts","../../../../src/components/data/kt-table/kt-table.ts"],"sourcesContent":["/**\n * Which rows a virtual table renders: those under the viewport, and a few\n * either side so a fast scroll does not show blank space before the next\n * render lands.\n */\n\n/** Rendered before the first row has been measured, to measure it. */\nconst FIRST_BATCH = 50;\n\nexport interface RowWindowInput {\n  readonly rowCount: number;\n  /** Every row's height, in px; 0 until one has been measured. */\n  readonly rowHeight: number;\n  readonly viewportHeight: number;\n  readonly scrollTop: number;\n  /** Extra rows rendered above and below the viewport. */\n  readonly overscan: number;\n}\n\n/** Rows `start` (inclusive) to `end` (exclusive). */\nexport function rowWindow({\n  rowCount,\n  rowHeight,\n  viewportHeight,\n  scrollTop,\n  overscan,\n}: RowWindowInput): { start: number; end: number } {\n  if (rowCount === 0) return { start: 0, end: 0 };\n  if (rowHeight <= 0) return { start: 0, end: Math.min(rowCount, FIRST_BATCH) };\n\n  // Past the end — a scroll position left over from longer data — the window\n  // settles on the last screenful rather than on nothing.\n  const fits = Math.ceil(viewportHeight / rowHeight);\n  const first = Math.min(Math.floor(scrollTop / rowHeight), Math.max(0, rowCount - fits));\n  const last = Math.ceil((scrollTop + viewportHeight) / rowHeight);\n\n  return {\n    start: Math.max(0, first - overscan),\n    end: Math.min(rowCount, last + overscan),\n  };\n}\n","import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { resolveLocale } from '#internal/locale';\nimport { strings } from '#internal/strings';\nimport '../../core/kt-icon/kt-icon.js';\nimport '../kt-pagination/kt-pagination.js';\nimport { rowWindow } from './window.js';\n\nexport type KtSortDirection = 'asc' | 'desc' | null;\nexport type KtTableRow = Record<string, unknown>;\n\nexport interface KtTableColumn {\n  /** Key into the row object. */\n  readonly key: string;\n  /** Header text. Falls back to `key`. */\n  readonly label?: string;\n  readonly sortable?: boolean;\n  readonly align?: 'left' | 'center' | 'right';\n  /** Any CSS width. */\n  readonly width?: string;\n}\n\nexport interface KtSortState {\n  readonly key: string | null;\n  readonly direction: KtSortDirection;\n}\n\n/** Renders a cell. Return `undefined` to fall back to the raw value. */\nexport type KtCellRenderer = (row: KtTableRow, column: KtTableColumn) => unknown;\n\n/** Rows rendered above and below the viewport of a virtual table. */\nconst OVERSCAN = 8;\n\nconst collators = new Map<string, Intl.Collator>();\n\n/**\n * A collator for `locale`, made once. Locale-aware, so each language files\n * accented letters its own way — \"Ångström\" next to \"Angstrom\" in English,\n * after \"Zeta\" in Swedish. `numeric` also makes \"Entity 2\" precede\n * \"Entity 10\".\n */\nfunction collatorFor(locale: string): Intl.Collator {\n  let collator = collators.get(locale);\n  if (!collator) {\n    collator = new Intl.Collator(locale, { numeric: true, sensitivity: 'base' });\n    collators.set(locale, collator);\n  }\n  return collator;\n}\n\n/**\n * A sortable string for any cell value.\n *\n * Objects get their JSON rather than \"[object Object]\", which at least sorts\n * consistently instead of collapsing every object in the column to one key.\n */\nfunction sortableText(value: unknown): string {\n  if (typeof value === 'string') return value;\n  if (typeof value === 'number' || typeof value === 'boolean' || typeof value === 'bigint') {\n    return String(value);\n  }\n  try {\n    return JSON.stringify(value) ?? '';\n  } catch {\n    return '';\n  }\n}\n\n/** A row's identity: `id`, else `uid`, else the row itself. */\nfunction rowKey(row: KtTableRow): unknown {\n  return row['id'] ?? row['uid'] ?? row;\n}\n\n/**\n * A data table: tri-state sorting, single or multiple selection, paging.\n *\n * @element kt-table\n *\n * @csspart table - The `<table>`.\n * @csspart header-cell - A `<th>`.\n * @csspart row - A `<tr>`.\n * @csspart cell - A `<td>`.\n *\n * @fires kt-sort-change - Sorting changed. `detail: { key, direction }`.\n * @fires kt-selection-change - Selection changed. `detail: { selected, rows }`.\n * @fires kt-row-click - A row was clicked. `detail: { row, index }`.\n * @fires kt-page-change - The page changed. `detail: { page }`.\n *\n * @example\n * ```js\n * table.columns = [\n *   { key: 'name', label: 'Name', sortable: true },\n *   { key: 'amount', label: 'Amount', sortable: true, align: 'right' },\n * ];\n * table.data = rows;\n * ```\n */\nexport class KtTable extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n        width: 100%;\n        color: var(--text-body);\n        font: var(--font-normal-regular);\n      }\n\n      .scroller {\n        overflow: auto;\n        border-radius: var(--border-radius);\n      }\n\n      table {\n        width: 100%;\n        min-width: 600px;\n        border-spacing: 0;\n        border-collapse: separate;\n      }\n\n      thead {\n        background: var(--surface-card);\n        color: var(--text-muted);\n      }\n\n      th {\n        padding: 16px 18px;\n        font-size: 13px;\n        font-weight: inherit;\n        text-align: left;\n        white-space: nowrap;\n        vertical-align: middle;\n        user-select: none;\n      }\n\n      /* Sortable headers are buttons, not clickable <th>s: a header you can\n         only sort with a mouse is a table half the users cannot sort. */\n      th button {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        width: 100%;\n        padding: 0;\n        color: inherit;\n        font: inherit;\n        text-align: inherit;\n        background: none;\n        border: none;\n        cursor: pointer;\n      }\n\n      th button:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 2px;\n      }\n\n      .indicator {\n        display: inline-flex;\n        color: var(--color-primary-text);\n      }\n\n      tbody tr {\n        transition: background-color var(--duration-instant) linear;\n      }\n\n      table[aria-busy='true'] tbody {\n        opacity: 0.5;\n        transition: opacity var(--duration-fast) var(--easing-standard);\n      }\n\n      tbody tr:hover {\n        background: var(--color-dark-14);\n      }\n\n      tbody tr.selected {\n        background: var(--color-primary-soft);\n      }\n\n      td {\n        padding: 14px 18px;\n        font-size: 14px;\n        border-bottom: var(--border-width) solid var(--surface-hover);\n      }\n\n      :host([compact]) td {\n        padding: 8px 12px;\n      }\n\n      /* === VIRTUAL ===\n         The table scrolls inside its own box, whose height the page sets,\n         and the header stays on top of the rows passing under it. */\n      :host([virtual]) {\n        display: flex;\n        flex-direction: column;\n      }\n      :host([virtual]) .scroller {\n        flex: 1;\n        min-height: 0;\n      }\n      :host([virtual]) thead th {\n        position: sticky;\n        top: 0;\n        z-index: 1;\n        background: var(--surface-card);\n      }\n\n      /* Stand-ins for the rows above and below the window: height only. */\n      tbody tr.spacer,\n      tbody tr.spacer:hover {\n        background: none;\n      }\n      tr.spacer td {\n        padding: 0;\n        border: none;\n      }\n      :host([compact]) th {\n        padding: 10px 12px;\n      }\n\n      .select-cell {\n        width: 56px;\n        text-align: center;\n      }\n\n      .placeholder {\n        padding: 28px 0;\n        color: var(--text-muted);\n        text-align: center;\n      }\n\n      footer {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n        gap: 12px;\n        padding-top: 12px;\n      }\n\n      @media (max-width: 680px) {\n        table {\n          min-width: 100%;\n        }\n        td,\n        th {\n          padding: 10px 12px;\n        }\n      }\n    `,\n  ];\n\n  /** The page on screen, from 1. Set it to open on another page. */\n  @property({ type: Number })\n  page = 1;\n\n  /**\n   * For data sorted and paged on a server: `data` is the current page, shown\n   * as given. Headers and the pager still update the state and fire their\n   * events, and the application loads what they ask for.\n   */\n  @property({ type: Boolean, reflect: true })\n  manual = false;\n\n  /**\n   * Renders only the rows in view, for thousands of rows without paging. The\n   * table scrolls inside its own box: give it a height (`kt-table { height:\n   * 480px }`). Every row must be the same height — the first one rendered is\n   * measured. A page size takes precedence.\n   */\n  @property({ type: Boolean, reflect: true })\n  virtual = false;\n\n  /** How far the scroller is scrolled. Not `scrollTop`, which the host already has. */\n  @state()\n  private scrollOffset = 0;\n\n  /** The scroller's height, and the header's inside it, in px. */\n  @state()\n  private viewportHeight = 0;\n\n  @state()\n  private headerHeight = 0;\n\n  /** A body row's height, in px; 0 until one has been measured. */\n  @state()\n  private rowHeight = 0;\n\n  private resizeObserver: ResizeObserver | undefined;\n  private observed: Element | undefined;\n\n  /** In manual mode, how many rows the server holds — what the pager counts. */\n  @property({ type: Number, attribute: 'total-rows' })\n  totalRows = 0;\n\n  @property({ attribute: false })\n  columns: readonly KtTableColumn[] = [];\n\n  @property({ attribute: false })\n  data: readonly KtTableRow[] = [];\n\n  @property({ type: Boolean, reflect: true })\n  selectable = false;\n\n  @property({ type: String, attribute: 'selection-mode' })\n  selectionMode: 'single' | 'multiple' = 'multiple';\n\n  /** The identities of the selected rows. */\n  @property({ attribute: false })\n  selected: readonly unknown[] = [];\n\n  /** Rows per page. Zero shows everything and hides the footer. */\n  @property({ type: Number, attribute: 'page-size' })\n  pageSize = 0;\n\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  @property({ type: Boolean, reflect: true })\n  compact = false;\n\n  @property({ type: String, attribute: 'sort-key' })\n  sortKey: string | null = null;\n\n  @property({ type: String, attribute: 'sort-direction' })\n  sortDirection: KtSortDirection = null;\n\n  /** Renders a cell. Return `undefined` to fall back to the raw value. */\n  @property({ attribute: false })\n  renderCell: KtCellRenderer | undefined;\n\n  @property({ type: String, attribute: 'empty-text' })\n  emptyText: string | undefined = undefined;\n\n  @property({ type: String, attribute: 'loading-text' })\n  loadingText: string | undefined = undefined;\n\n  /** Accessible name for the table. */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * BCP 47 locale text is sorted in. Empty means the page's `<html lang>`,\n   * then the browser's language.\n   */\n  @property({ type: String })\n  locale = '';\n\n  /** The last sort, and what it was computed from. */\n  private sortCache:\n    | {\n        data: readonly KtTableRow[];\n        key: string | null;\n        direction: KtSortDirection;\n        locale: string;\n        rows: readonly KtTableRow[];\n      }\n    | undefined;\n\n  /**\n   * The rows after sorting, before paging.\n   *\n   * Sorted once per change of `data`, `sortKey`, `sortDirection` or locale, not on\n   * every render: hovering a row or ticking a box re-renders the table, and\n   * re-sorting a few thousand rows each time is what made that lag. Assign a\n   * new array to `data` rather than changing it in place.\n   */\n  get sortedRows(): readonly KtTableRow[] {\n    if (this.manual) return this.data;\n\n    const cache = this.sortCache;\n    const locale = resolveLocale(this.locale);\n    if (\n      cache?.data === this.data &&\n      cache.key === this.sortKey &&\n      cache.direction === this.sortDirection &&\n      cache.locale === locale\n    ) {\n      return cache.rows;\n    }\n\n    const rows = this.sort(collatorFor(locale));\n    this.sortCache = {\n      data: this.data,\n      key: this.sortKey,\n      direction: this.sortDirection,\n      locale,\n      rows,\n    };\n    return rows;\n  }\n\n  private sort(collator: Intl.Collator): readonly KtTableRow[] {\n    if (!this.sortKey || !this.sortDirection) return this.data;\n\n    const key = this.sortKey;\n    const sign = this.sortDirection === 'asc' ? 1 : -1;\n\n    return [...this.data].sort((a, b) => {\n      const left = a[key];\n      const right = b[key];\n\n      // Empty values sort to the end whichever way the column points, so a\n      // descending sort does not open with a screen of blanks.\n      const leftEmpty = left === null || left === undefined;\n      const rightEmpty = right === null || right === undefined;\n      if (leftEmpty && rightEmpty) return 0;\n      if (leftEmpty) return 1;\n      if (rightEmpty) return -1;\n\n      if (typeof left === 'number' && typeof right === 'number') return (left - right) * sign;\n      return collator.compare(sortableText(left), sortableText(right)) * sign;\n    });\n  }\n\n  get totalPages(): number {\n    if (this.pageSize <= 0) return 1;\n    const rows = this.manual ? this.totalRows || this.data.length : this.data.length;\n    return Math.max(1, Math.ceil(rows / this.pageSize));\n  }\n\n  /** The rows actually on screen. */\n  get visibleRows(): readonly KtTableRow[] {\n    const rows = this.sortedRows;\n    if (this.pageSize <= 0 || this.manual) return rows;\n\n    const page = Math.min(this.page, this.totalPages);\n    return rows.slice((page - 1) * this.pageSize, page * this.pageSize);\n  }\n\n  /**\n   * Cycles a column: unsorted → ascending → descending → unsorted. The third\n   * press restoring the original order is what makes sorting undoable.\n   */\n  private toggleSort(column: KtTableColumn): void {\n    if (!column.sortable) return;\n\n    if (this.sortKey !== column.key) {\n      this.sortKey = column.key;\n      this.sortDirection = 'asc';\n    } else if (this.sortDirection === 'asc') {\n      this.sortDirection = 'desc';\n    } else {\n      this.sortKey = null;\n      this.sortDirection = null;\n    }\n    // A new order starts from its first page. No kt-page-change: the sort\n    // event is the one reload the application needs.\n    if (this.manual) this.page = 1;\n\n    emit(this, 'kt-sort-change', { key: this.sortKey, direction: this.sortDirection });\n  }\n\n  private isSelected(row: KtTableRow): boolean {\n    return this.selected.includes(rowKey(row));\n  }\n\n  private toggleSelection(row: KtTableRow): void {\n    const key = rowKey(row);\n\n    if (this.selectionMode === 'single') {\n      this.selected = this.isSelected(row) ? [] : [key];\n    } else {\n      this.selected = this.isSelected(row)\n        ? this.selected.filter((candidate) => candidate !== key)\n        : [...this.selected, key];\n    }\n\n    emit(this, 'kt-selection-change', { selected: this.selected, rows: this.selectedRows });\n  }\n\n  /** Selects or clears every row on the current page. */\n  private toggleAll(): void {\n    const rows = this.visibleRows;\n    const keys = rows.map(rowKey);\n    const allSelected = keys.every((key) => this.selected.includes(key));\n\n    this.selected = allSelected\n      ? this.selected.filter((key) => !keys.includes(key))\n      : [...new Set([...this.selected, ...keys])];\n\n    emit(this, 'kt-selection-change', { selected: this.selected, rows: this.selectedRows });\n  }\n\n  /** The selected rows themselves, not just their identities. */\n  get selectedRows(): readonly KtTableRow[] {\n    return this.data.filter((row) => this.selected.includes(rowKey(row)));\n  }\n\n  /** Virtual rendering, unless a page size pages the rows instead. */\n  private get isVirtual(): boolean {\n    return this.virtual && this.pageSize <= 0;\n  }\n\n  private onScroll = (event: Event): void => {\n    this.scrollOffset = (event.currentTarget as HTMLElement).scrollTop;\n  };\n\n  // Untyped: the measurements are private, so not among PropertyValues<this>.\n  override updated(changed: PropertyValues): void {\n    if (changed.has('compact')) this.rowHeight = 0;\n    if (!this.isVirtual) {\n      this.observe(undefined);\n      return;\n    }\n\n    const scroller = this.shadowRoot?.querySelector<HTMLElement>('.scroller') ?? undefined;\n    this.observe(scroller);\n\n    // Measured from what was just rendered; each assignment is a no-op once\n    // the numbers settle, so this converges in one extra render.\n    const row = this.shadowRoot?.querySelector<HTMLElement>('tbody tr[part=\"row\"]');\n    if (row && this.rowHeight === 0) this.rowHeight = row.getBoundingClientRect().height;\n    const header = this.shadowRoot?.querySelector('thead');\n    if (header) this.headerHeight = header.getBoundingClientRect().height;\n    if (scroller) this.viewportHeight = scroller.clientHeight;\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.observe(undefined);\n  }\n\n  /** Follows the scroller's height, which the page can change at any time. */\n  private observe(scroller: HTMLElement | undefined): void {\n    if (scroller === this.observed) return;\n    this.resizeObserver?.disconnect();\n    this.observed = scroller;\n    if (!scroller || typeof ResizeObserver === 'undefined') return;\n\n    this.resizeObserver ??= new ResizeObserver(([entry]) => {\n      if (entry) this.viewportHeight = (entry.target as HTMLElement).clientHeight;\n    });\n    this.resizeObserver.observe(scroller);\n  }\n\n  private onPageChange(event: Event): void {\n    event.stopPropagation();\n    this.page = (event as CustomEvent<{ page: number }>).detail.page;\n    emit(this, 'kt-page-change', { page: this.page });\n  }\n\n  /**\n   * The aria-sort value for a column.\n   *\n   * Not named ariaSort: HTMLElement reflects that ARIA attribute as a string\n   * property, and shadowing it with a method breaks the element's own typing.\n   */\n  private sortStateFor(column: KtTableColumn): 'ascending' | 'descending' | 'none' {\n    if (this.sortKey !== column.key || !this.sortDirection) return 'none';\n    return this.sortDirection === 'asc' ? 'ascending' : 'descending';\n  }\n\n  private renderHeaderCell(column: KtTableColumn): TemplateResult {\n    const title = column.label ?? column.key;\n    const active = this.sortKey === column.key && this.sortDirection !== null;\n\n    return html`<th\n      part=\"header-cell\"\n      scope=\"col\"\n      style=${styleMap(column.width ? { width: column.width } : {})}\n      aria-sort=${this.sortStateFor(column)}\n    >\n      ${\n        column.sortable\n          ? html`<button type=\"button\" @click=${() => this.toggleSort(column)}>\n              <span>${title}</span>\n              <span class=\"indicator\" aria-hidden=\"true\">\n                ${\n                  active\n                    ? html`<kt-icon\n                        name=${this.sortDirection === 'asc' ? 'arrow-up' : 'arrow-down'}\n                        size=\"14\"\n                      ></kt-icon>`\n                    : nothing\n                }\n              </span>\n            </button>`\n          : html`<span>${title}</span>`\n      }\n    </th>`;\n  }\n\n  private renderBody(): TemplateResult {\n    const rows = this.visibleRows;\n    const columnCount = this.columns.length + (this.selectable ? 1 : 0);\n\n    if (rows.length === 0) {\n      return html`<tr>\n        <td colspan=${columnCount}>\n          <div class=\"placeholder\">${this.emptyText ?? strings().noData}</div>\n        </td>\n      </tr>`;\n    }\n\n    if (!this.isVirtual) {\n      return html`${rows.map((row, index) => this.renderRow(row, index))}`;\n    }\n\n    const { start, end } = rowWindow({\n      rowCount: rows.length,\n      rowHeight: this.rowHeight,\n      viewportHeight: Math.max(0, this.viewportHeight - this.headerHeight),\n      scrollTop: Math.max(0, this.scrollOffset - this.headerHeight),\n      overscan: OVERSCAN,\n    });\n    const spacer = (count: number) =>\n      count > 0 && this.rowHeight > 0\n        ? html`<tr class=\"spacer\" aria-hidden=\"true\">\n            <td colspan=${columnCount} style=${`height: ${count * this.rowHeight}px`}></td>\n          </tr>`\n        : nothing;\n\n    return html`${spacer(start)}${rows\n      .slice(start, end)\n      .map((row, offset) => this.renderRow(row, start + offset))}${spacer(rows.length - end)}`;\n  }\n\n  /** `index` counts from the first row of the data, not of the rows rendered. */\n  private renderRow(row: KtTableRow, index: number): TemplateResult {\n    const selected = this.isSelected(row);\n\n    return html`<tr\n      part=\"row\"\n      class=${classMap({ selected })}\n      aria-selected=${this.selectable ? String(selected) : nothing}\n      aria-rowindex=${this.isVirtual ? index + 2 : nothing}\n      @click=${() => emit(this, 'kt-row-click', { row, index })}\n    >\n      ${\n        this.selectable\n          ? html`<td class=\"select-cell\">\n              <input\n                type=${this.selectionMode === 'single' ? 'radio' : 'checkbox'}\n                name=${this.selectionMode === 'single' ? 'kt-table-selection' : nothing}\n                .checked=${selected}\n                aria-label=${strings().selectRow}\n                @click=${(event: Event) => event.stopPropagation()}\n                @change=${() => this.toggleSelection(row)}\n              />\n            </td>`\n          : nothing\n      }\n      ${this.columns.map((column) => {\n        const rendered = this.renderCell?.(row, column);\n        return html`<td part=\"cell\" style=${styleMap({ textAlign: column.align ?? 'left' })}>\n          ${rendered === undefined ? row[column.key] : rendered}\n        </td>`;\n      })}\n    </tr>`;\n  }\n\n  override render(): TemplateResult {\n    // A manual table reloading a page keeps the one on screen, dimmed, so the\n    // pager that asked for it — and the focus on it — stay where they are.\n    const reloading = this.loading && this.manual && this.data.length > 0;\n    if (this.loading && !reloading) {\n      return html`<div class=\"placeholder\" role=\"status\" aria-live=\"polite\">\n        ${this.loadingText ?? strings().loading}\n      </div>`;\n    }\n\n    const rows = this.visibleRows;\n    const allSelected = rows.length > 0 && rows.every((row) => this.isSelected(row));\n    const someSelected = rows.some((row) => this.isSelected(row));\n\n    const virtual = this.isVirtual;\n\n    return html`<div class=\"scroller\" @scroll=${virtual ? this.onScroll : nothing}>\n        <table\n          part=\"table\"\n          aria-label=${this.label || nothing}\n          aria-busy=${reloading ? 'true' : nothing}\n          aria-rowcount=${virtual ? rows.length + 1 : nothing}\n        >\n          <thead>\n            <tr aria-rowindex=${virtual ? 1 : nothing}>\n              ${\n                this.selectable\n                  ? html`<th class=\"select-cell\" scope=\"col\">\n                      ${\n                        this.selectionMode === 'multiple'\n                          ? html`<input\n                              type=\"checkbox\"\n                              .checked=${allSelected}\n                              .indeterminate=${someSelected && !allSelected}\n                              aria-label=${strings().selectAll}\n                              @change=${this.toggleAll}\n                            />`\n                          : nothing\n                      }\n                    </th>`\n                  : nothing\n              }\n              ${this.columns.map((column) => this.renderHeaderCell(column))}\n            </tr>\n          </thead>\n          <tbody>\n            ${this.renderBody()}\n          </tbody>\n        </table>\n      </div>\n\n      ${\n        this.pageSize > 0\n          ? html`<footer>\n              <kt-pagination\n                .page=${Math.min(this.page, this.totalPages)}\n                .totalPages=${this.totalPages}\n                @kt-page-change=${this.onPageChange}\n              ></kt-pagination>\n            </footer>`\n          : nothing\n      }`;\n  }\n}\n\ndefineElement('kt-table', KtTable);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-table': KtTable;\n  }\n}\n"],"names":["FIRST_BATCH","rowWindow","rowCount","rowHeight","viewportHeight","scrollTop","overscan","fits","first","last","OVERSCAN","collators","collatorFor","locale","collator","sortableText","value","rowKey","row","KtTable","KtElement","event","css","cache","resolveLocale","rows","key","sign","a","b","left","right","leftEmpty","rightEmpty","page","column","emit","candidate","keys","allSelected","changed","scroller","header","entry","title","active","html","styleMap","nothing","columnCount","strings","index","start","end","spacer","count","offset","selected","classMap","rendered","reloading","someSelected","virtual","__decorateClass","property","state","defineElement"],"mappings":"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"}

package/dist/components/data/kt-table/window.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Which rows a virtual table renders: those under the viewport, and a few
+ * either side so a fast scroll does not show blank space before the next
+ * render lands.
+ */
+export interface RowWindowInput {
+    readonly rowCount: number;
+    /** Every row's height, in px; 0 until one has been measured. */
+    readonly rowHeight: number;
+    readonly viewportHeight: number;
+    readonly scrollTop: number;
+    /** Extra rows rendered above and below the viewport. */
+    readonly overscan: number;
+}
+/** Rows `start` (inclusive) to `end` (exclusive). */
+export declare function rowWindow({ rowCount, rowHeight, viewportHeight, scrollTop, overscan, }: RowWindowInput): {
+    start: number;
+    end: number;
+};

package/dist/components/data/kt-timeline/kt-timeline.js

@@ -1,7 +1,7 @@
 import { css as h, html as s, nothing as m } from "lit";
 import { property as a } from "lit/decorators.js";
 import { classMap as k } from "lit/directives/class-map.js";
-import { K as c, d as f } from "../../../chunks/kt-element-E-tfJpGQ.js";
+import { K as c, d as f } from "../../../chunks/kt-element-Djx2JcGl.js";
 import "../../core/kt-icon/kt-icon.js";
 var v = Object.defineProperty, i = (l, r, o, n) => {
   for (var e = void 0, p = l.length - 1, d; p >= 0; p--)

package/dist/components/feedback/kt-alert/kt-alert.js

@@ -1,8 +1,8 @@
 import { css as v, nothing as s, html as e } from "lit";
 import { property as t } from "lit/decorators.js";
-import { K as p, d as g } from "../../../chunks/kt-element-E-tfJpGQ.js";
-import { e as h } from "../../../chunks/events-Bjl5Zmmq.js";
-import { s as f } from "../../../chunks/index-DSSLJirw.js";
+import { K as p, d as g } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { e as h } from "../../../chunks/events-r51msXNf.js";
+import { s as f } from "../../../chunks/index-STEEvEP7.js";
 import "../../core/kt-icon/kt-icon.js";
 var u = Object.defineProperty, a = (n, i, c, b) => {
   for (var r = void 0, l = n.length - 1, d; l >= 0; l--)

package/dist/components/feedback/kt-empty-state/kt-empty-state.js

@@ -1,6 +1,6 @@
 import { css as h, nothing as r, html as i } from "lit";
 import { property as n } from "lit/decorators.js";
-import { K as d, d as m } from "../../../chunks/kt-element-E-tfJpGQ.js";
+import { K as d, d as m } from "../../../chunks/kt-element-Djx2JcGl.js";
 import "../../core/kt-icon/kt-icon.js";
 var g = Object.defineProperty, o = (s, p, c, f) => {
   for (var t = void 0, a = s.length - 1, l; a >= 0; a--)

package/dist/components/feedback/kt-progress-bar/kt-progress-bar.js

@@ -1,11 +1,11 @@
 import { css as v, nothing as p, html as o } from "lit";
 import { property as t } from "lit/decorators.js";
-import { classMap as h } from "lit/directives/class-map.js";
+import { classMap as d } from "lit/directives/class-map.js";
 import { styleMap as m } from "lit/directives/style-map.js";
-import { K as u, d as b } from "../../../chunks/kt-element-E-tfJpGQ.js";
+import { K as u, d as b } from "../../../chunks/kt-element-Djx2JcGl.js";
 var f = Object.defineProperty, r = (n, e, i, c) => {
-  for (var s = void 0, l = n.length - 1, d; l >= 0; l--)
-    (d = n[l]) && (s = d(e, i, s) || s);
+  for (var s = void 0, l = n.length - 1, h; l >= 0; l--)
+    (h = n[l]) && (s = h(e, i, s) || s);
   return s && f(e, i, s), s;
 };
 class a extends u {
@@ -77,7 +77,7 @@ class a extends u {
         width: 0;
         height: 100%;
         background: var(--color-primary-base);
-        transition: width 0.4s var(--easing-standard);
+        transition: width var(--duration-slow) var(--easing-standard);
       }
 
       :host([variant='info']) .fill {
@@ -106,11 +106,11 @@ class a extends u {
       .fill.striped {
         background-image: linear-gradient(
           45deg,
-          rgba(255, 255, 255, 0.07) 25%,
+          color-mix(in srgb, var(--color-white) 7%, transparent) 25%,
           transparent 25%,
           transparent 50%,
-          rgba(255, 255, 255, 0.07) 50%,
-          rgba(255, 255, 255, 0.07) 75%,
+          color-mix(in srgb, var(--color-white) 7%, transparent) 50%,
+          color-mix(in srgb, var(--color-white) 7%, transparent) 75%,
           transparent 75%,
           transparent
         );
@@ -148,7 +148,7 @@ class a extends u {
   }
   render() {
     const e = this.percent, i = this.value >= (this.max > 0 ? this.max : 100), c = this.showLabel && this.label || this.showValue;
-    return o`<div part="base" class=${h({ bar: !0, complete: i })}>
+    return o`<div part="base" class=${d({ bar: !0, complete: i })}>
       ${c ? o`<div part="caption" class="caption">
               ${this.showLabel && this.label ? o`<span class="caption-label">${this.label}</span>` : o`<span></span>`}
               ${this.showValue ? o`<span part="value" class="caption-value">${e}%</span>` : p}
@@ -166,7 +166,7 @@ class a extends u {
       >
         <div
           part="fill"
-          class=${h({
+          class=${d({
       fill: !0,
       complete: i,
       striped: this.striped,

package/dist/components/feedback/kt-progress-bar/kt-progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"kt-progress-bar.js","sources":["../../../../src/components/feedback/kt-progress-bar/kt-progress-bar.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\n\nexport type KtProgressVariant = 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'neutral';\nexport type KtProgressSize = 'small' | 'medium' | 'large';\n\n/**\n * A determinate progress bar.\n *\n * Reaching `max` switches the fill to the success colour, so \"done\" reads at a\n * glance without the caller having to swap the variant.\n *\n * @element kt-progress-bar\n *\n * @csspart track - The groove.\n * @csspart fill - The filled portion.\n * @csspart base - The container.\n * @csspart caption - The row above the bar.\n * @csspart value - The percentage, when `show-value` is set.\n *\n * @example\n * ```html\n * <kt-progress-bar value=\"64\" show-value></kt-progress-bar>\n * <kt-progress-bar value=\"90\" variant=\"warning\" striped animated></kt-progress-bar>\n * ```\n */\nexport class KtProgressBar extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n        width: 100%;\n      }\n\n      .bar {\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n      }\n\n      /* The caption sits above the track, not inside it. A label centred over\n         an 8px bar is half on the fill and half off it, so it is unreadable at\n         one end of the range whatever colour it is given — and at size=\"small\"\n         the track is 4px and clips it outright. Above the bar it reads in every\n         theme, at every size, at every value. */\n      .caption {\n        display: flex;\n        align-items: baseline;\n        justify-content: space-between;\n        gap: 12px;\n      }\n\n      .caption-label {\n        overflow: hidden;\n        color: var(--text-body);\n        font: var(--font-normal-regular);\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      .caption-value {\n        flex: none;\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n        font-variant-numeric: tabular-nums;\n      }\n\n      .complete .caption-value {\n        color: var(--color-success-text);\n      }\n\n      .track {\n        position: relative;\n        height: 8px;\n        overflow: hidden;\n        background: var(--surface-raised);\n        border-radius: var(--border-radius);\n      }\n\n      :host([size='small']) .track {\n        height: 4px;\n      }\n      :host([size='large']) .track {\n        height: 12px;\n      }\n\n      .fill {\n        width: 0;\n        height: 100%;\n        background: var(--color-primary-base);\n        transition: width 0.4s var(--easing-standard);\n      }\n\n      :host([variant='info']) .fill {\n        background: var(--color-info-base);\n      }\n      :host([variant='success']) .fill {\n        background: var(--color-success-base);\n      }\n      :host([variant='warning']) .fill {\n        background: var(--color-warning-base);\n      }\n      :host([variant='danger']) .fill {\n        background: var(--color-danger-base);\n      }\n      :host([variant='neutral']) .fill {\n        background: var(--color-text-500);\n      }\n\n      /* Completion reads as success whatever the variant was. */\n      .fill.complete {\n        background: var(--color-success-base);\n      }\n\n      /* The one decorative animation in Kanto, and it earns its place: a\n         striped bar is how an operation says it is still working. */\n      .fill.striped {\n        background-image: linear-gradient(\n          45deg,\n          rgba(255, 255, 255, 0.07) 25%,\n          transparent 25%,\n          transparent 50%,\n          rgba(255, 255, 255, 0.07) 50%,\n          rgba(255, 255, 255, 0.07) 75%,\n          transparent 75%,\n          transparent\n        );\n        background-size: 1rem 1rem;\n      }\n\n      .fill.striped.animated {\n        animation: kt-progress-stripes 1s linear infinite;\n      }\n\n      @keyframes kt-progress-stripes {\n        from {\n          background-position: 0 0;\n        }\n        to {\n          background-position: 1rem 0;\n        }\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        .fill {\n          transition: none;\n        }\n        .fill.striped.animated {\n          animation: none;\n        }\n      }\n    `,\n  ];\n\n  @property({ type: Number })\n  value = 0;\n\n  @property({ type: Number })\n  max = 100;\n\n  @property({ type: String, reflect: true })\n  size: KtProgressSize = 'medium';\n\n  @property({ type: String, reflect: true })\n  variant: KtProgressVariant = 'primary';\n\n  /** Draws the percentage in a caption above the bar. */\n  @property({ type: Boolean, attribute: 'show-value' })\n  showValue = false;\n\n  /**\n   * Shows `label` above the bar as visible text, beside the value.\n   *\n   * `label` alone is the accessible name and stays invisible, which is right\n   * when the surrounding copy already says what is progressing.\n   */\n  @property({ type: Boolean, attribute: 'show-label' })\n  showLabel = false;\n\n  @property({ type: Boolean, reflect: true })\n  striped = false;\n\n  /** Animates the stripes. Requires `striped`. */\n  @property({ type: Boolean, reflect: true })\n  animated = false;\n\n  /** Accessible name — what is progressing. */\n  @property({ type: String })\n  label = '';\n\n  /** The value as a whole percentage, clamped to 0–100. */\n  get percent(): number {\n    const max = this.max > 0 ? this.max : 100;\n    const clamped = Math.min(Math.max(this.value, 0), max);\n    return Math.round((clamped / max) * 100);\n  }\n\n  override render(): TemplateResult {\n    const percent = this.percent;\n    const complete = this.value >= (this.max > 0 ? this.max : 100);\n\n    const caption = (this.showLabel && this.label) || this.showValue;\n\n    return html`<div part=\"base\" class=${classMap({ bar: true, complete })}>\n      ${\n        caption\n          ? html`<div part=\"caption\" class=\"caption\">\n              ${\n                this.showLabel && this.label\n                  ? html`<span class=\"caption-label\">${this.label}</span>`\n                  : html`<span></span>`\n              }\n              ${\n                this.showValue\n                  ? html`<span part=\"value\" class=\"caption-value\">${percent}%</span>`\n                  : nothing\n              }\n            </div>`\n          : nothing\n      }\n\n      <div\n        part=\"track\"\n        class=\"track\"\n        role=\"progressbar\"\n        aria-valuemin=\"0\"\n        aria-valuemax=${this.max}\n        aria-valuenow=${this.value}\n        aria-valuetext=${`${percent}%`}\n        aria-label=${this.label || nothing}\n      >\n        <div\n          part=\"fill\"\n          class=${classMap({\n            fill: true,\n            complete,\n            striped: this.striped,\n            animated: this.animated,\n          })}\n          style=${styleMap({ width: `${percent}%` })}\n        ></div>\n      </div>\n    </div>`;\n  }\n}\n\ndefineElement('kt-progress-bar', KtProgressBar);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-progress-bar': KtProgressBar;\n  }\n}\n"],"names":["KtProgressBar","KtElement","css","max","clamped","percent","complete","caption","html","classMap","nothing","styleMap","__decorateClass","property","defineElement"],"mappings":"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"}
+{"version":3,"file":"kt-progress-bar.js","sources":["../../../../src/components/feedback/kt-progress-bar/kt-progress-bar.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\n\nexport type KtProgressVariant = 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'neutral';\nexport type KtProgressSize = 'small' | 'medium' | 'large';\n\n/**\n * A determinate progress bar.\n *\n * Reaching `max` switches the fill to the success colour, so \"done\" reads at a\n * glance without the caller having to swap the variant.\n *\n * @element kt-progress-bar\n *\n * @csspart track - The groove.\n * @csspart fill - The filled portion.\n * @csspart base - The container.\n * @csspart caption - The row above the bar.\n * @csspart value - The percentage, when `show-value` is set.\n *\n * @example\n * ```html\n * <kt-progress-bar value=\"64\" show-value></kt-progress-bar>\n * <kt-progress-bar value=\"90\" variant=\"warning\" striped animated></kt-progress-bar>\n * ```\n */\nexport class KtProgressBar extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n        width: 100%;\n      }\n\n      .bar {\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n      }\n\n      /* The caption sits above the track, not inside it. A label centred over\n         an 8px bar is half on the fill and half off it, so it is unreadable at\n         one end of the range whatever colour it is given — and at size=\"small\"\n         the track is 4px and clips it outright. Above the bar it reads in every\n         theme, at every size, at every value. */\n      .caption {\n        display: flex;\n        align-items: baseline;\n        justify-content: space-between;\n        gap: 12px;\n      }\n\n      .caption-label {\n        overflow: hidden;\n        color: var(--text-body);\n        font: var(--font-normal-regular);\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      .caption-value {\n        flex: none;\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n        font-variant-numeric: tabular-nums;\n      }\n\n      .complete .caption-value {\n        color: var(--color-success-text);\n      }\n\n      .track {\n        position: relative;\n        height: 8px;\n        overflow: hidden;\n        background: var(--surface-raised);\n        border-radius: var(--border-radius);\n      }\n\n      :host([size='small']) .track {\n        height: 4px;\n      }\n      :host([size='large']) .track {\n        height: 12px;\n      }\n\n      .fill {\n        width: 0;\n        height: 100%;\n        background: var(--color-primary-base);\n        transition: width var(--duration-slow) var(--easing-standard);\n      }\n\n      :host([variant='info']) .fill {\n        background: var(--color-info-base);\n      }\n      :host([variant='success']) .fill {\n        background: var(--color-success-base);\n      }\n      :host([variant='warning']) .fill {\n        background: var(--color-warning-base);\n      }\n      :host([variant='danger']) .fill {\n        background: var(--color-danger-base);\n      }\n      :host([variant='neutral']) .fill {\n        background: var(--color-text-500);\n      }\n\n      /* Completion reads as success whatever the variant was. */\n      .fill.complete {\n        background: var(--color-success-base);\n      }\n\n      /* The one decorative animation in Kanto, and it earns its place: a\n         striped bar is how an operation says it is still working. */\n      .fill.striped {\n        background-image: linear-gradient(\n          45deg,\n          color-mix(in srgb, var(--color-white) 7%, transparent) 25%,\n          transparent 25%,\n          transparent 50%,\n          color-mix(in srgb, var(--color-white) 7%, transparent) 50%,\n          color-mix(in srgb, var(--color-white) 7%, transparent) 75%,\n          transparent 75%,\n          transparent\n        );\n        background-size: 1rem 1rem;\n      }\n\n      .fill.striped.animated {\n        animation: kt-progress-stripes 1s linear infinite;\n      }\n\n      @keyframes kt-progress-stripes {\n        from {\n          background-position: 0 0;\n        }\n        to {\n          background-position: 1rem 0;\n        }\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        .fill {\n          transition: none;\n        }\n        .fill.striped.animated {\n          animation: none;\n        }\n      }\n    `,\n  ];\n\n  @property({ type: Number })\n  value = 0;\n\n  @property({ type: Number })\n  max = 100;\n\n  @property({ type: String, reflect: true })\n  size: KtProgressSize = 'medium';\n\n  @property({ type: String, reflect: true })\n  variant: KtProgressVariant = 'primary';\n\n  /** Draws the percentage in a caption above the bar. */\n  @property({ type: Boolean, attribute: 'show-value' })\n  showValue = false;\n\n  /**\n   * Shows `label` above the bar as visible text, beside the value.\n   *\n   * `label` alone is the accessible name and stays invisible, which is right\n   * when the surrounding copy already says what is progressing.\n   */\n  @property({ type: Boolean, attribute: 'show-label' })\n  showLabel = false;\n\n  @property({ type: Boolean, reflect: true })\n  striped = false;\n\n  /** Animates the stripes. Requires `striped`. */\n  @property({ type: Boolean, reflect: true })\n  animated = false;\n\n  /** Accessible name — what is progressing. */\n  @property({ type: String })\n  label = '';\n\n  /** The value as a whole percentage, clamped to 0–100. */\n  get percent(): number {\n    const max = this.max > 0 ? this.max : 100;\n    const clamped = Math.min(Math.max(this.value, 0), max);\n    return Math.round((clamped / max) * 100);\n  }\n\n  override render(): TemplateResult {\n    const percent = this.percent;\n    const complete = this.value >= (this.max > 0 ? this.max : 100);\n\n    const caption = (this.showLabel && this.label) || this.showValue;\n\n    return html`<div part=\"base\" class=${classMap({ bar: true, complete })}>\n      ${\n        caption\n          ? html`<div part=\"caption\" class=\"caption\">\n              ${\n                this.showLabel && this.label\n                  ? html`<span class=\"caption-label\">${this.label}</span>`\n                  : html`<span></span>`\n              }\n              ${\n                this.showValue\n                  ? html`<span part=\"value\" class=\"caption-value\">${percent}%</span>`\n                  : nothing\n              }\n            </div>`\n          : nothing\n      }\n\n      <div\n        part=\"track\"\n        class=\"track\"\n        role=\"progressbar\"\n        aria-valuemin=\"0\"\n        aria-valuemax=${this.max}\n        aria-valuenow=${this.value}\n        aria-valuetext=${`${percent}%`}\n        aria-label=${this.label || nothing}\n      >\n        <div\n          part=\"fill\"\n          class=${classMap({\n            fill: true,\n            complete,\n            striped: this.striped,\n            animated: this.animated,\n          })}\n          style=${styleMap({ width: `${percent}%` })}\n        ></div>\n      </div>\n    </div>`;\n  }\n}\n\ndefineElement('kt-progress-bar', KtProgressBar);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-progress-bar': KtProgressBar;\n  }\n}\n"],"names":["KtProgressBar","KtElement","css","max","clamped","percent","complete","caption","html","classMap","nothing","styleMap","__decorateClass","property","defineElement"],"mappings":"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"}

package/dist/components/feedback/kt-skeleton/kt-skeleton.js

@@ -2,7 +2,7 @@ import { css as c, html as d } from "lit";
 import { property as s } from "lit/decorators.js";
 import { classMap as h } from "lit/directives/class-map.js";
 import { styleMap as m } from "lit/directives/style-map.js";
-import { K as u, d as f } from "../../../chunks/kt-element-E-tfJpGQ.js";
+import { K as u, d as f } from "../../../chunks/kt-element-Djx2JcGl.js";
 var y = Object.defineProperty, a = (n, i, t, p) => {
   for (var e = void 0, o = n.length - 1, l; o >= 0; o--)
     (l = n[o]) && (e = l(i, t, e) || e);

package/dist/components/feedback/kt-toast/kt-toast.js

@@ -1,29 +1,29 @@
-import { css as u, nothing as n, html as a } from "lit";
-import { state as v, property as e } from "lit/decorators.js";
-import { K as p, d as m } from "../../../chunks/kt-element-E-tfJpGQ.js";
-import { e as f } from "../../../chunks/events-Bjl5Zmmq.js";
-import { s as h } from "../../../chunks/index-DSSLJirw.js";
+import { css as v, nothing as n, html as a } from "lit";
+import { state as u, property as s } from "lit/decorators.js";
+import { K as p, d as m } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { e as b } from "../../../chunks/events-r51msXNf.js";
+import { s as h } from "../../../chunks/index-STEEvEP7.js";
 import "../../core/kt-icon/kt-icon.js";
 import "../kt-progress-bar/kt-progress-bar.js";
-var b = Object.defineProperty, i = (c, o, s, x) => {
-  for (var r = void 0, d = c.length - 1, l; d >= 0; d--)
-    (l = c[d]) && (r = l(o, s, r) || r);
-  return r && b(o, s, r), r;
+var f = Object.defineProperty, o = (c, i, e, w) => {
+  for (var t = void 0, l = c.length - 1, d; l >= 0; l--)
+    (d = c[l]) && (t = d(i, e, t) || t);
+  return t && f(i, e, t), t;
 };
-const w = {
+const x = {
   success: { icon: "circle-check", progress: "success" },
   information: { icon: "info", progress: "info" },
   warning: { icon: "triangle-alert", progress: "warning" },
   error: { icon: "circle-alert", progress: "danger" }
 }, g = 50;
-class t extends p {
+class r extends p {
   constructor() {
     super(...arguments), this.remaining = 0, this.variant = "information", this.heading = "", this.description = "", this.dismissible = !1, this.duration = 0;
   }
   static {
     this.styles = [
       p.styles,
-      u`
+      v`
       :host {
         display: block;
       }
@@ -39,7 +39,7 @@ class t extends p {
         overflow: hidden;
         color: var(--text-body);
         background: var(--surface-card);
-        border: var(--border-width) solid rgba(255, 255, 255, 0.1);
+        border: var(--border-width) solid color-mix(in srgb, var(--color-white) 10%, transparent);
         border-radius: var(--border-radius);
         box-shadow: var(--shadow-toast);
         backdrop-filter: blur(10px);
@@ -50,22 +50,38 @@ class t extends p {
          contrast. */
       :host([variant='success']) .toast {
         background:
-          linear-gradient(135deg, rgba(53, 221, 131, 0.25), rgba(53, 221, 131, 0.15)),
+          linear-gradient(
+            135deg,
+            color-mix(in srgb, var(--color-success-base) 25%, transparent),
+            color-mix(in srgb, var(--color-success-base) 15%, transparent)
+          ),
           var(--surface-card);
       }
       :host([variant='information']) .toast {
         background:
-          linear-gradient(135deg, rgba(53, 175, 243, 0.25), rgba(53, 175, 243, 0.15)),
+          linear-gradient(
+            135deg,
+            color-mix(in srgb, var(--color-info-base) 25%, transparent),
+            color-mix(in srgb, var(--color-info-base) 15%, transparent)
+          ),
           var(--surface-card);
       }
       :host([variant='warning']) .toast {
         background:
-          linear-gradient(135deg, rgba(245, 171, 61, 0.25), rgba(245, 171, 61, 0.15)),
+          linear-gradient(
+            135deg,
+            color-mix(in srgb, var(--color-warning-base) 25%, transparent),
+            color-mix(in srgb, var(--color-warning-base) 15%, transparent)
+          ),
           var(--surface-card);
       }
       :host([variant='error']) .toast {
         background:
-          linear-gradient(135deg, rgba(245, 61, 92, 0.25), rgba(245, 61, 92, 0.15)),
+          linear-gradient(
+            135deg,
+            color-mix(in srgb, var(--color-danger-base) 25%, transparent),
+            color-mix(in srgb, var(--color-danger-base) 15%, transparent)
+          ),
           var(--surface-card);
       }
 
@@ -172,10 +188,10 @@ class t extends p {
   }
   /** Asks to be removed. The container is what actually removes it. */
   close() {
-    this.stopCountdown(), f(this, "kt-toast-close");
+    this.stopCountdown(), b(this, "kt-toast-close");
   }
   render() {
-    const o = w[this.variant], s = this.duration > 0;
+    const i = x[this.variant], e = this.duration > 0;
     return a`<div
       part="base"
       class="toast"
@@ -183,7 +199,7 @@ class t extends p {
       aria-live=${this.variant === "error" ? "assertive" : "polite"}
     >
       <div class="body">
-        <span class="icon"><kt-icon name=${o.icon} size="24"></kt-icon></span>
+        <span class="icon"><kt-icon name=${i.icon} size="24"></kt-icon></span>
         <div class="content">
           ${this.heading ? a`<div class="heading">${this.heading}</div>` : n}
           ${this.description ? a`<div class="description">${this.description}</div>` : n}
@@ -198,10 +214,10 @@ class t extends p {
             >
               <kt-icon name="x" size="18"></kt-icon>
             </button>` : n}
-      ${s ? a`<div class="countdown">
+      ${e ? a`<div class="countdown">
               <kt-progress-bar
                 size="small"
-                variant=${o.progress}
+                variant=${i.progress}
                 striped
                 animated
                 .value=${this.remaining}
@@ -212,26 +228,26 @@ class t extends p {
     </div>`;
   }
 }
-i([
-  v()
-], t.prototype, "remaining");
-i([
-  e({ type: String, reflect: !0 })
-], t.prototype, "variant");
-i([
-  e({ type: String })
-], t.prototype, "heading");
-i([
-  e({ type: String })
-], t.prototype, "description");
-i([
-  e({ type: Boolean })
-], t.prototype, "dismissible");
-i([
-  e({ type: Number })
-], t.prototype, "duration");
-m("kt-toast", t);
+o([
+  u()
+], r.prototype, "remaining");
+o([
+  s({ type: String, reflect: !0 })
+], r.prototype, "variant");
+o([
+  s({ type: String })
+], r.prototype, "heading");
+o([
+  s({ type: String })
+], r.prototype, "description");
+o([
+  s({ type: Boolean })
+], r.prototype, "dismissible");
+o([
+  s({ type: Number })
+], r.prototype, "duration");
+m("kt-toast", r);
 export {
-  t as KtToast
+  r as KtToast
 };
 //# sourceMappingURL=kt-toast.js.map

package/dist/components/feedback/kt-toast/kt-toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"kt-toast.js","sources":["../../../../src/components/feedback/kt-toast/kt-toast.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 { strings } from '#internal/strings';\nimport '../../core/kt-icon/kt-icon.js';\nimport '../kt-progress-bar/kt-progress-bar.js';\n\nexport type KtToastVariant = 'success' | 'information' | 'warning' | 'error';\n\ninterface VariantMeta {\n  readonly icon: string;\n  readonly progress: 'success' | 'info' | 'warning' | 'danger';\n}\n\nconst META: Record<KtToastVariant, VariantMeta> = {\n  success: { icon: 'circle-check', progress: 'success' },\n  information: { icon: 'info', progress: 'info' },\n  warning: { icon: 'triangle-alert', progress: 'warning' },\n  error: { icon: 'circle-alert', progress: 'danger' },\n};\n\n/** Countdown refresh interval. 50ms is smooth without being a busy loop. */\nconst TICK_MS = 50;\n\n/**\n * A transient notification.\n *\n * The only element in Kanto with a real shadow, and the only one that blurs\n * what is behind it: a toast floats above the page, so it has to say so.\n *\n * @element kt-toast\n *\n * @csspart base - The toast surface.\n * @csspart close - The dismiss button.\n *\n * @fires kt-toast-close - The toast asked to be removed, by timeout or by the\n *   dismiss button. `<kt-toast-container>` listens for this.\n */\nexport class KtToast extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .toast {\n        position: relative;\n        display: flex;\n        align-items: flex-start;\n        justify-content: space-between;\n        gap: var(--gap-form);\n        max-width: 480px;\n        padding: var(--padding-form);\n        overflow: hidden;\n        color: var(--text-body);\n        background: var(--surface-card);\n        border: var(--border-width) solid rgba(255, 255, 255, 0.1);\n        border-radius: var(--border-radius);\n        box-shadow: var(--shadow-toast);\n        backdrop-filter: blur(10px);\n      }\n\n      /* A wash of the variant's hue over the card surface, rather than a\n         solid fill: the text stays on a neutral background and keeps its\n         contrast. */\n      :host([variant='success']) .toast {\n        background:\n          linear-gradient(135deg, rgba(53, 221, 131, 0.25), rgba(53, 221, 131, 0.15)),\n          var(--surface-card);\n      }\n      :host([variant='information']) .toast {\n        background:\n          linear-gradient(135deg, rgba(53, 175, 243, 0.25), rgba(53, 175, 243, 0.15)),\n          var(--surface-card);\n      }\n      :host([variant='warning']) .toast {\n        background:\n          linear-gradient(135deg, rgba(245, 171, 61, 0.25), rgba(245, 171, 61, 0.15)),\n          var(--surface-card);\n      }\n      :host([variant='error']) .toast {\n        background:\n          linear-gradient(135deg, rgba(245, 61, 92, 0.25), rgba(245, 61, 92, 0.15)),\n          var(--surface-card);\n      }\n\n      :host([variant='success']) .heading {\n        color: var(--color-success-text);\n      }\n      :host([variant='information']) .heading {\n        color: var(--color-info-text);\n      }\n      :host([variant='warning']) .heading {\n        color: var(--color-warning-text);\n      }\n      :host([variant='error']) .heading {\n        color: var(--color-danger-text);\n      }\n\n      :host([variant='success']) .icon {\n        color: var(--color-success-text);\n      }\n      :host([variant='information']) .icon {\n        color: var(--color-info-text);\n      }\n      :host([variant='warning']) .icon {\n        color: var(--color-warning-text);\n      }\n      :host([variant='error']) .icon {\n        color: var(--color-danger-text);\n      }\n\n      .body {\n        display: flex;\n        align-items: center;\n        gap: var(--gap-form);\n      }\n\n      .icon {\n        display: flex;\n        align-items: center;\n      }\n\n      .content {\n        display: flex;\n        flex: 1 1 auto;\n        flex-direction: column;\n        gap: var(--gap-element);\n      }\n\n      .heading {\n        font: var(--font-normal-medium);\n      }\n\n      .description {\n        font: var(--font-normal-regular);\n      }\n\n      .close {\n        display: flex;\n        align-items: center;\n        padding: 4px;\n        color: currentcolor;\n        background: transparent;\n        border: none;\n        border-radius: 4px;\n        cursor: pointer;\n      }\n      .close:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n      }\n\n      .countdown {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n      }\n    `,\n  ];\n\n  private timer: ReturnType<typeof setInterval> | undefined;\n\n  @state()\n  private remaining = 0;\n\n  @property({ type: String, reflect: true })\n  variant: KtToastVariant = 'information';\n\n  /**\n   * The toast's title.\n   *\n   * Named `heading` because every element already has a `title`, and shadowing\n   * it would turn the toast into its own tooltip.\n   */\n  @property({ type: String })\n  heading = '';\n\n  @property({ type: String })\n  description = '';\n\n  @property({ type: Boolean })\n  dismissible = false;\n\n  /**\n   * Auto-dismiss after this many milliseconds, with a countdown bar. Zero\n   * keeps the toast until something removes it.\n   */\n  @property({ type: Number })\n  duration = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.startCountdown();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.stopCountdown();\n  }\n\n  private startCountdown(): void {\n    this.stopCountdown();\n    if (this.duration <= 0) return;\n\n    this.remaining = this.duration;\n    this.tick();\n  }\n\n  /** Runs the countdown from whatever `remaining` currently is. */\n  private tick(): void {\n    this.timer = setInterval(() => {\n      this.remaining -= TICK_MS;\n      if (this.remaining > 0) return;\n\n      this.stopCountdown();\n      this.close();\n    }, TICK_MS);\n  }\n\n  private stopCountdown(): void {\n    if (this.timer !== undefined) clearInterval(this.timer);\n    this.timer = undefined;\n  }\n\n  /** Pauses the countdown. The container calls this while the pointer is over the stack. */\n  pause(): void {\n    if (this.timer !== undefined) this.stopCountdown();\n  }\n\n  /** Resumes a paused countdown from where it stopped. */\n  resume(): void {\n    if (this.duration <= 0 || this.timer !== undefined || this.remaining <= 0) return;\n    this.tick();\n  }\n\n  /** Asks to be removed. The container is what actually removes it. */\n  close(): void {\n    this.stopCountdown();\n    emit(this, 'kt-toast-close');\n  }\n\n  override render(): TemplateResult {\n    const meta = META[this.variant];\n    const showCountdown = this.duration > 0;\n\n    return html`<div\n      part=\"base\"\n      class=\"toast\"\n      role=${this.variant === 'error' ? 'alert' : 'status'}\n      aria-live=${this.variant === 'error' ? 'assertive' : 'polite'}\n    >\n      <div class=\"body\">\n        <span class=\"icon\"><kt-icon name=${meta.icon} size=\"24\"></kt-icon></span>\n        <div class=\"content\">\n          ${this.heading ? html`<div class=\"heading\">${this.heading}</div>` : nothing}\n          ${this.description ? html`<div class=\"description\">${this.description}</div>` : nothing}\n        </div>\n      </div>\n\n      ${\n        this.dismissible\n          ? html`<button\n              part=\"close\"\n              class=\"close\"\n              aria-label=${strings().close}\n              @click=${this.close}\n            >\n              <kt-icon name=\"x\" size=\"18\"></kt-icon>\n            </button>`\n          : nothing\n      }\n      ${\n        showCountdown\n          ? html`<div class=\"countdown\">\n              <kt-progress-bar\n                size=\"small\"\n                variant=${meta.progress}\n                striped\n                animated\n                .value=${this.remaining}\n                .max=${this.duration}\n                label=${strings().timeRemaining}\n              ></kt-progress-bar>\n            </div>`\n          : nothing\n      }\n    </div>`;\n  }\n}\n\ndefineElement('kt-toast', KtToast);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-toast': KtToast;\n  }\n}\n"],"names":["META","TICK_MS","KtToast","KtElement","css","emit","meta","showCountdown","html","nothing","strings","__decorateClass","state","property","defineElement"],"mappings":"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"}
+{"version":3,"file":"kt-toast.js","sources":["../../../../src/components/feedback/kt-toast/kt-toast.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 { strings } from '#internal/strings';\nimport '../../core/kt-icon/kt-icon.js';\nimport '../kt-progress-bar/kt-progress-bar.js';\n\nexport type KtToastVariant = 'success' | 'information' | 'warning' | 'error';\n\ninterface VariantMeta {\n  readonly icon: string;\n  readonly progress: 'success' | 'info' | 'warning' | 'danger';\n}\n\nconst META: Record<KtToastVariant, VariantMeta> = {\n  success: { icon: 'circle-check', progress: 'success' },\n  information: { icon: 'info', progress: 'info' },\n  warning: { icon: 'triangle-alert', progress: 'warning' },\n  error: { icon: 'circle-alert', progress: 'danger' },\n};\n\n/** Countdown refresh interval. 50ms is smooth without being a busy loop. */\nconst TICK_MS = 50;\n\n/**\n * A transient notification.\n *\n * The only element in Kanto with a real shadow, and the only one that blurs\n * what is behind it: a toast floats above the page, so it has to say so.\n *\n * @element kt-toast\n *\n * @csspart base - The toast surface.\n * @csspart close - The dismiss button.\n *\n * @fires kt-toast-close - The toast asked to be removed, by timeout or by the\n *   dismiss button. `<kt-toast-container>` listens for this.\n */\nexport class KtToast extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .toast {\n        position: relative;\n        display: flex;\n        align-items: flex-start;\n        justify-content: space-between;\n        gap: var(--gap-form);\n        max-width: 480px;\n        padding: var(--padding-form);\n        overflow: hidden;\n        color: var(--text-body);\n        background: var(--surface-card);\n        border: var(--border-width) solid color-mix(in srgb, var(--color-white) 10%, transparent);\n        border-radius: var(--border-radius);\n        box-shadow: var(--shadow-toast);\n        backdrop-filter: blur(10px);\n      }\n\n      /* A wash of the variant's hue over the card surface, rather than a\n         solid fill: the text stays on a neutral background and keeps its\n         contrast. */\n      :host([variant='success']) .toast {\n        background:\n          linear-gradient(\n            135deg,\n            color-mix(in srgb, var(--color-success-base) 25%, transparent),\n            color-mix(in srgb, var(--color-success-base) 15%, transparent)\n          ),\n          var(--surface-card);\n      }\n      :host([variant='information']) .toast {\n        background:\n          linear-gradient(\n            135deg,\n            color-mix(in srgb, var(--color-info-base) 25%, transparent),\n            color-mix(in srgb, var(--color-info-base) 15%, transparent)\n          ),\n          var(--surface-card);\n      }\n      :host([variant='warning']) .toast {\n        background:\n          linear-gradient(\n            135deg,\n            color-mix(in srgb, var(--color-warning-base) 25%, transparent),\n            color-mix(in srgb, var(--color-warning-base) 15%, transparent)\n          ),\n          var(--surface-card);\n      }\n      :host([variant='error']) .toast {\n        background:\n          linear-gradient(\n            135deg,\n            color-mix(in srgb, var(--color-danger-base) 25%, transparent),\n            color-mix(in srgb, var(--color-danger-base) 15%, transparent)\n          ),\n          var(--surface-card);\n      }\n\n      :host([variant='success']) .heading {\n        color: var(--color-success-text);\n      }\n      :host([variant='information']) .heading {\n        color: var(--color-info-text);\n      }\n      :host([variant='warning']) .heading {\n        color: var(--color-warning-text);\n      }\n      :host([variant='error']) .heading {\n        color: var(--color-danger-text);\n      }\n\n      :host([variant='success']) .icon {\n        color: var(--color-success-text);\n      }\n      :host([variant='information']) .icon {\n        color: var(--color-info-text);\n      }\n      :host([variant='warning']) .icon {\n        color: var(--color-warning-text);\n      }\n      :host([variant='error']) .icon {\n        color: var(--color-danger-text);\n      }\n\n      .body {\n        display: flex;\n        align-items: center;\n        gap: var(--gap-form);\n      }\n\n      .icon {\n        display: flex;\n        align-items: center;\n      }\n\n      .content {\n        display: flex;\n        flex: 1 1 auto;\n        flex-direction: column;\n        gap: var(--gap-element);\n      }\n\n      .heading {\n        font: var(--font-normal-medium);\n      }\n\n      .description {\n        font: var(--font-normal-regular);\n      }\n\n      .close {\n        display: flex;\n        align-items: center;\n        padding: 4px;\n        color: currentcolor;\n        background: transparent;\n        border: none;\n        border-radius: 4px;\n        cursor: pointer;\n      }\n      .close:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n      }\n\n      .countdown {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n      }\n    `,\n  ];\n\n  private timer: ReturnType<typeof setInterval> | undefined;\n\n  @state()\n  private remaining = 0;\n\n  @property({ type: String, reflect: true })\n  variant: KtToastVariant = 'information';\n\n  /**\n   * The toast's title.\n   *\n   * Named `heading` because every element already has a `title`, and shadowing\n   * it would turn the toast into its own tooltip.\n   */\n  @property({ type: String })\n  heading = '';\n\n  @property({ type: String })\n  description = '';\n\n  @property({ type: Boolean })\n  dismissible = false;\n\n  /**\n   * Auto-dismiss after this many milliseconds, with a countdown bar. Zero\n   * keeps the toast until something removes it.\n   */\n  @property({ type: Number })\n  duration = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.startCountdown();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.stopCountdown();\n  }\n\n  private startCountdown(): void {\n    this.stopCountdown();\n    if (this.duration <= 0) return;\n\n    this.remaining = this.duration;\n    this.tick();\n  }\n\n  /** Runs the countdown from whatever `remaining` currently is. */\n  private tick(): void {\n    this.timer = setInterval(() => {\n      this.remaining -= TICK_MS;\n      if (this.remaining > 0) return;\n\n      this.stopCountdown();\n      this.close();\n    }, TICK_MS);\n  }\n\n  private stopCountdown(): void {\n    if (this.timer !== undefined) clearInterval(this.timer);\n    this.timer = undefined;\n  }\n\n  /** Pauses the countdown. The container calls this while the pointer is over the stack. */\n  pause(): void {\n    if (this.timer !== undefined) this.stopCountdown();\n  }\n\n  /** Resumes a paused countdown from where it stopped. */\n  resume(): void {\n    if (this.duration <= 0 || this.timer !== undefined || this.remaining <= 0) return;\n    this.tick();\n  }\n\n  /** Asks to be removed. The container is what actually removes it. */\n  close(): void {\n    this.stopCountdown();\n    emit(this, 'kt-toast-close');\n  }\n\n  override render(): TemplateResult {\n    const meta = META[this.variant];\n    const showCountdown = this.duration > 0;\n\n    return html`<div\n      part=\"base\"\n      class=\"toast\"\n      role=${this.variant === 'error' ? 'alert' : 'status'}\n      aria-live=${this.variant === 'error' ? 'assertive' : 'polite'}\n    >\n      <div class=\"body\">\n        <span class=\"icon\"><kt-icon name=${meta.icon} size=\"24\"></kt-icon></span>\n        <div class=\"content\">\n          ${this.heading ? html`<div class=\"heading\">${this.heading}</div>` : nothing}\n          ${this.description ? html`<div class=\"description\">${this.description}</div>` : nothing}\n        </div>\n      </div>\n\n      ${\n        this.dismissible\n          ? html`<button\n              part=\"close\"\n              class=\"close\"\n              aria-label=${strings().close}\n              @click=${this.close}\n            >\n              <kt-icon name=\"x\" size=\"18\"></kt-icon>\n            </button>`\n          : nothing\n      }\n      ${\n        showCountdown\n          ? html`<div class=\"countdown\">\n              <kt-progress-bar\n                size=\"small\"\n                variant=${meta.progress}\n                striped\n                animated\n                .value=${this.remaining}\n                .max=${this.duration}\n                label=${strings().timeRemaining}\n              ></kt-progress-bar>\n            </div>`\n          : nothing\n      }\n    </div>`;\n  }\n}\n\ndefineElement('kt-toast', KtToast);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-toast': KtToast;\n  }\n}\n"],"names":["META","TICK_MS","KtToast","KtElement","css","emit","meta","showCountdown","html","nothing","strings","__decorateClass","state","property","defineElement"],"mappings":";;;;;;;;;;;;AAeA,MAAMA,IAA4C;AAAA,EAChD,SAAS,EAAE,MAAM,gBAAgB,UAAU,UAAA;AAAA,EAC3C,aAAa,EAAE,MAAM,QAAQ,UAAU,OAAA;AAAA,EACvC,SAAS,EAAE,MAAM,kBAAkB,UAAU,UAAA;AAAA,EAC7C,OAAO,EAAE,MAAM,gBAAgB,UAAU,SAAA;AAC3C,GAGMC,IAAU;AAgBT,MAAMC,UAAgBC,EAAU;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA,GA+IL,KAAQ,YAAY,GAGpB,KAAA,UAA0B,eAS1B,KAAA,UAAU,IAGV,KAAA,cAAc,IAGd,KAAA,cAAc,IAOd,KAAA,WAAW;AAAA,EAAA;AAAA,EAvKX,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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,EAuIF;AAAA,EAgCS,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,eAAA;AAAA,EACP;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,cAAA;AAAA,EACP;AAAA,EAEQ,iBAAuB;AAE7B,IADA,KAAK,cAAA,GACD,OAAK,YAAY,OAErB,KAAK,YAAY,KAAK,UACtB,KAAK,KAAA;AAAA,EACP;AAAA;AAAA,EAGQ,OAAa;AACnB,SAAK,QAAQ,YAAY,MAAM;AAE7B,MADA,KAAK,aAAaH,GACd,OAAK,YAAY,OAErB,KAAK,cAAA,GACL,KAAK,MAAA;AAAA,IACP,GAAGA,CAAO;AAAA,EACZ;AAAA,EAEQ,gBAAsB;AAC5B,IAAI,KAAK,UAAU,UAAW,cAAc,KAAK,KAAK,GACtD,KAAK,QAAQ;AAAA,EACf;AAAA;AAAA,EAGA,QAAc;AACZ,IAAI,KAAK,UAAU,UAAW,KAAK,cAAA;AAAA,EACrC;AAAA;AAAA,EAGA,SAAe;AACb,IAAI,KAAK,YAAY,KAAK,KAAK,UAAU,UAAa,KAAK,aAAa,KACxE,KAAK,KAAA;AAAA,EACP;AAAA;AAAA,EAGA,QAAc;AACZ,SAAK,cAAA,GACLI,EAAK,MAAM,gBAAgB;AAAA,EAC7B;AAAA,EAES,SAAyB;AAChC,UAAMC,IAAON,EAAK,KAAK,OAAO,GACxBO,IAAgB,KAAK,WAAW;AAEtC,WAAOC;AAAA;AAAA;AAAA,aAGE,KAAK,YAAY,UAAU,UAAU,QAAQ;AAAA,kBACxC,KAAK,YAAY,UAAU,cAAc,QAAQ;AAAA;AAAA;AAAA,2CAGxBF,EAAK,IAAI;AAAA;AAAA,YAExC,KAAK,UAAUE,yBAA4B,KAAK,OAAO,WAAWC,CAAO;AAAA,YACzE,KAAK,cAAcD,6BAAgC,KAAK,WAAW,WAAWC,CAAO;AAAA;AAAA;AAAA;AAAA,QAKzF,KAAK,cACDD;AAAA;AAAA;AAAA,2BAGeE,EAAA,EAAU,KAAK;AAAA,uBACnB,KAAK,KAAK;AAAA;AAAA;AAAA,yBAIrBD,CACN;AAAA,QAEEF,IACIC;AAAA;AAAA;AAAA,0BAGcF,EAAK,QAAQ;AAAA;AAAA;AAAA,yBAGd,KAAK,SAAS;AAAA,uBAChB,KAAK,QAAQ;AAAA,wBACZI,EAAA,EAAU,aAAa;AAAA;AAAA,sBAGnCD,CACN;AAAA;AAAA,EAEJ;AACF;AA7HUE,EAAA;AAAA,EADPC,EAAA;AAAM,GA9IIV,EA+IH,WAAA,WAAA;AAGRS,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAjJ9BX,EAkJX,WAAA,SAAA;AASAS,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1JfX,EA2JX,WAAA,SAAA;AAGAS,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7JfX,EA8JX,WAAA,aAAA;AAGAS,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAhKhBX,EAiKX,WAAA,aAAA;AAOAS,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAvKfX,EAwKX,WAAA,UAAA;AAsGFY,EAAc,YAAYZ,CAAO;"}

package/dist/components/feedback/kt-toast-container/kt-toast-container.js

@@ -1,6 +1,6 @@
 import { css as c, html as m } from "lit";
 import { property as p } from "lit/decorators.js";
-import { K as l, d } from "../../../chunks/kt-element-E-tfJpGQ.js";
+import { K as l, d } from "../../../chunks/kt-element-Djx2JcGl.js";
 import "../kt-toast/kt-toast.js";
 var f = Object.defineProperty, h = (i, t, e, n) => {
   for (var s = void 0, o = i.length - 1, a; o >= 0; o--)

package/dist/components/feedback/kt-tooltip/kt-tooltip.d.ts

@@ -27,13 +27,33 @@ export declare class KtTooltip extends KtElement {
     private readonly descriptionId;
     private description;
     private visible;
+    private bubble;
     text: string;
+    /**
+     * The side the bubble prefers. It takes the opposite one when this one has
+     * no room — "top" on a trigger at the top of the page shows below it.
+     */
     placement: KtTooltipPlacement;
+    /**
+     * Shows the bubble whatever the pointer and focus do — for a trigger that
+     * cannot take focus itself, like an icon beside a field, whose owner shows
+     * it while the field is focused.
+     */
+    open: boolean;
     /** Suppresses the tooltip without removing it from the markup. */
     disabled: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
     willUpdate(changed: PropertyValues<this>): void;
+    /** Hovered, focused or held open — and something to say. */
+    private get shown();
+    updated(changed: PropertyValues): void;
+    /**
+     * Opens the bubble in the top layer, then places it: it has to be open to be
+     * measured. Where popovers are missing — a test DOM — it stays in place.
+     */
+    private openBubble;
+    private closeBubble;
     /**
      * `aria-describedby` cannot reach across a shadow boundary: an id inside this
      * element's shadow root is invisible to a trigger sitting in the light DOM.