npm - kanto-ds - Versions diffs - 1.0.1 → 1.2.0 - Mend

kanto-ds 1.0.1 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (90) hide show

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

	@@ -1 +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 '../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-base);\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 = 'No data to display';\n\n @property({ type: String, attribute: 'loading-text' })\n loadingText = 'Loading…';\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}</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=\"Select row\"\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}\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=\"Select all\"\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","index","selected","classMap","nothing","rendered","someSelected","__decorateClass","state","property","defineElement"],"mappings":"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"}
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 '../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 = 'No data to display';\n\n @property({ type: String, attribute: 'loading-text' })\n loadingText = 'Loading…';\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}</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=\"Select row\"\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}\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=\"Select all\"\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","index","selected","classMap","nothing","rendered","someSelected","__decorateClass","state","property","defineElement"],"mappings":"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"}

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

@@ -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-CcMLO5e8.js";
+import { K as c, d as f } from "../../../chunks/kt-element-B_jjQDhg.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 CHANGED Viewed

@@ -1,11 +1,11 @@
-import { css as v, nothing as s, html as e } from "lit";
-import { property as a } from "lit/decorators.js";
-import { K as p, d as h } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { css as v, nothing as n, html as e } from "lit";
+import { property as t } from "lit/decorators.js";
+import { K as p, d as h } from "../../../chunks/kt-element-B_jjQDhg.js";
 import { e as g } from "../../../chunks/events-Bjl5Zmmq.js";
 import "../../core/kt-icon/kt-icon.js";
-var f = Object.defineProperty, t = (n, i, c, b) => {
-  for (var r = void 0, l = n.length - 1, d; l >= 0; l--)
-    (d = n[l]) && (r = d(i, c, r) || r);
+var f = Object.defineProperty, a = (s, i, c, b) => {
+  for (var r = void 0, l = s.length - 1, d; l >= 0; l--)
+    (d = s[l]) && (r = d(i, c, r) || r);
   return r && f(i, c, r), r;
 };
 const u = {
@@ -64,16 +64,16 @@ class o extends p {
       }
       :host([variant='info']) .icon {
-        color: var(--color-info-base);
+        color: var(--color-info-text);
       }
       :host([variant='success']) .icon {
-        color: var(--color-success-base);
+        color: var(--color-success-text);
       }
       :host([variant='warning']) .icon {
-        color: var(--color-warning-base);
+        color: var(--color-warning-text);
       }
       :host([variant='danger']) .icon {
-        color: var(--color-danger-base);
+        color: var(--color-danger-text);
       }
       :host([variant='neutral']) .icon {
         color: var(--text-muted);
@@ -133,13 +133,13 @@ class o extends p {
   render() {
     const i = this.variant === "danger" ? "assertive" : "polite";
     return e`<div part="base" class="alert" role="alert" aria-live=${i}>
-      ${this.noIcon ? s : e`<span class="icon">
+      ${this.noIcon ? n : e`<span class="icon">
               <kt-icon name=${this.icon || u[this.variant]} size="20"></kt-icon>
             </span>`}
       <div class="content">
-        ${this.heading ? e`<span class="heading">${this.heading}</span>` : s}
-        ${this.description ? e`<span class="description">${this.description}</span>` : s}
+        ${this.heading ? e`<span class="heading">${this.heading}</span>` : n}
+        ${this.description ? e`<span class="description">${this.description}</span>` : n}
         <slot></slot>
         <div class="actions"><slot name="actions"></slot></div>
       </div>
@@ -151,27 +151,27 @@ class o extends p {
               @click=${() => g(this, "kt-close")}
             >
               <kt-icon name="x" size="16"></kt-icon>
-            </button>` : s}
+            </button>` : n}
     </div>`;
   }
 }
-t([
-  a({ type: String, reflect: !0 })
+a([
+  t({ type: String, reflect: !0 })
 ], o.prototype, "variant");
-t([
-  a({ type: String })
+a([
+  t({ type: String })
 ], o.prototype, "heading");
-t([
-  a({ type: String })
+a([
+  t({ type: String })
 ], o.prototype, "description");
-t([
-  a({ type: Boolean })
+a([
+  t({ type: Boolean })
 ], o.prototype, "dismissible");
-t([
-  a({ type: Boolean, attribute: "no-icon" })
+a([
+  t({ type: Boolean, attribute: "no-icon" })
 ], o.prototype, "noIcon");
-t([
-  a({ type: String })
+a([
+  t({ type: String })
 ], o.prototype, "icon");
 h("kt-alert", o);
 export {

package/dist/components/feedback/kt-alert/kt-alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kt-alert.js","sources":["../../../../src/components/feedback/kt-alert/kt-alert.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport type KtAlertVariant = 'info' \| 'success' \| 'warning' \| 'danger' \| 'neutral';\n\nconst ICONS: Record<KtAlertVariant, string> = {\n info: 'info',\n success: 'circle-check',\n warning: 'triangle-alert',\n danger: 'circle-alert',\n neutral: 'info',\n};\n\n/*\n A message that stays on the page.\n \n Against a toast: a toast is transient and interrupts; an alert sits in the\n * layout and waits. Use an alert when the message belongs to the page — a form\n * that failed to save, a trial about to expire, a consent notice — and a toast\n * when it belongs to the moment.\n \n @element kt-alert\n \n @slot - Body text, when `description` is not used.\n * @slot actions - Buttons, at the end.\n \n @csspart base - The alert.\n * @csspart close - The dismiss button.\n \n @fires kt-close - The dismiss button was pressed.\n \n @example\n * ```html\n * <kt-alert variant=\"warning\" heading=\"Storage almost full\"\n * description=\"You are using 88% of your quota.\"></kt-alert>\n * ```\n /\nexport class KtAlert extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: block;\n }\n\n .alert {\n display: flex;\n align-items: flex-start;\n gap: var(--gap-form);\n padding: var(--padding-form);\n color: var(--text-body);\n background: var(--surface-card);\n border: var(--border-width) solid var(--border-subtle);\n border-radius: var(--border-radius);\n }\n\n / A tinted fill plus a matching border, rather than a coloured bar: the\n whole block should read as the message's temperature. /\n :host([variant='info']) .alert {\n background: var(--color-info-soft);\n border-color: var(--color-info-base);\n }\n :host([variant='success']) .alert {\n background: var(--color-success-soft);\n border-color: var(--color-success-base);\n }\n :host([variant='warning']) .alert {\n background: var(--color-warning-soft);\n border-color: var(--color-warning-base);\n }\n :host([variant='danger']) .alert {\n background: var(--color-danger-soft);\n border-color: var(--color-danger-base);\n }\n\n .icon {\n display: flex;\n flex: none;\n padding-top: 1px;\n }\n\n :host([variant='info']) .icon {\n color: var(--color-info-~~base~~);\n }\n :host([variant='success']) .icon {\n color: var(--color-success-~~base~~);\n }\n :host([variant='warning']) .icon {\n color: var(--color-warning-~~base~~);\n }\n :host([variant='danger']) .icon {\n color: var(--color-danger-~~base~~);\n }\n :host([variant='neutral']) .icon {\n color: var(--text-muted);\n }\n\n .content {\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: var(--gap-element);\n min-width: 0;\n }\n\n .heading {\n font: var(--font-normal-medium);\n }\n\n .description {\n color: var(--text-muted);\n font: var(--font-normal-regular);\n }\n\n .actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--gap-button);\n margin-top: 4px;\n }\n\n .actions:not(:has()) {\n display: none;\n }\n\n .close {\n display: flex;\n flex: none;\n align-items: center;\n padding: 2px;\n color: currentcolor;\n background: none;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n opacity: 0.7;\n }\n\n .close:hover {\n opacity: 1;\n }\n\n .close:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n }\n `,\n ];\n\n @property({ type: String, reflect: true })\n variant: KtAlertVariant = 'info';\n\n @property({ type: String })\n heading = '';\n\n @property({ type: String })\n description = '';\n\n /** Adds a dismiss button. Removing the alert is the caller's job. /\n @property({ type: Boolean })\n dismissible = false;\n\n /* Hides the leading icon. /\n @property({ type: Boolean, attribute: 'no-icon' })\n noIcon = false;\n\n /* Overrides the icon the variant would pick. */\n @property({ type: String })\n icon = '';\n\n override render(): TemplateResult {\n // Danger interrupts; the rest wait their turn.\n const live = this.variant === 'danger' ? 'assertive' : 'polite';\n\n return html`<div part=\"base\" class=\"alert\" role=\"alert\" aria-live=${live}>\n ${\n this.noIcon\n ? nothing\n : html`<span class=\"icon\">\n <kt-icon name=${this.icon \|\| ICONS[this.variant]} size=\"20\"></kt-icon>\n </span>`\n }\n\n <div class=\"content\">\n ${this.heading ? html`<span class=\"heading\">${this.heading}</span>` : nothing}\n ${this.description ? html`<span class=\"description\">${this.description}</span>` : nothing}\n <slot></slot>\n <div class=\"actions\"><slot name=\"actions\"></slot></div>\n </div>\n\n ${\n this.dismissible\n ? html`<button\n part=\"close\"\n class=\"close\"\n aria-label=\"Dismiss\"\n @click=${() => emit(this, 'kt-close')}\n >\n <kt-icon name=\"x\" size=\"16\"></kt-icon>\n </button>`\n : nothing\n }\n </div>`;\n }\n}\n\ndefineElement('kt-alert', KtAlert);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-alert': KtAlert;\n }\n}\n"],"names":["ICONS","KtAlert","KtElement","css","live","html","nothing","emit","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;AAQA,MAAMA,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AACX;AA0BO,MAAMC,UAAgBC,EAAU;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA,GAgHL,KAAA,UAA0B,QAG1B,KAAA,UAAU,IAGV,KAAA,cAAc,IAId,KAAA,cAAc,IAId,KAAA,SAAS,IAIT,KAAA,OAAO;AAAA,EAAA;AAAA,EAjIP,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,IAAA;AAAA,EA0GF;AAAA,EAuBS,SAAyB;AAEhC,UAAMC,IAAO,KAAK,YAAY,WAAW,cAAc;AAEvD,WAAOC,0DAA6DD,CAAI;AAAA,QAEpE,KAAK,SACDE,IACAD;AAAA,8BACkB,KAAK,QAAQL,EAAM,KAAK,OAAO,CAAC;AAAA,oBAExD;AAAA;AAAA;AAAA,UAGI,KAAK,UAAUK,0BAA6B,KAAK,OAAO,YAAYC,CAAO;AAAA,UAC3E,KAAK,cAAcD,8BAAiC,KAAK,WAAW,YAAYC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,QAMzF,KAAK,cACDD;AAAA;AAAA;AAAA;AAAA,uBAIW,MAAME,EAAK,MAAM,UAAU,CAAC;AAAA;AAAA;AAAA,yBAIvCD,CACN;AAAA;AAAA,EAEJ;AACF;AAtDEE,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA/G9BR,EAgHX,WAAA,SAAA;AAGAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlHfR,EAmHX,WAAA,SAAA;AAGAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArHfR,EAsHX,WAAA,aAAA;AAIAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAzHhBR,EA0HX,WAAA,aAAA;AAIAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,WAAW,WAAW;AAAA,GA7HtCR,EA8HX,WAAA,QAAA;AAIAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjIfR,EAkIX,WAAA,MAAA;AAsCFS,EAAc,YAAYT,CAAO;"}
1	+ {"version":3,"file":"kt-alert.js","sources":["../../../../src/components/feedback/kt-alert/kt-alert.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport type KtAlertVariant = 'info' \| 'success' \| 'warning' \| 'danger' \| 'neutral';\n\nconst ICONS: Record<KtAlertVariant, string> = {\n info: 'info',\n success: 'circle-check',\n warning: 'triangle-alert',\n danger: 'circle-alert',\n neutral: 'info',\n};\n\n/*\n A message that stays on the page.\n \n Against a toast: a toast is transient and interrupts; an alert sits in the\n * layout and waits. Use an alert when the message belongs to the page — a form\n * that failed to save, a trial about to expire, a consent notice — and a toast\n * when it belongs to the moment.\n \n @element kt-alert\n \n @slot - Body text, when `description` is not used.\n * @slot actions - Buttons, at the end.\n \n @csspart base - The alert.\n * @csspart close - The dismiss button.\n \n @fires kt-close - The dismiss button was pressed.\n \n @example\n * ```html\n * <kt-alert variant=\"warning\" heading=\"Storage almost full\"\n * description=\"You are using 88% of your quota.\"></kt-alert>\n * ```\n /\nexport class KtAlert extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: block;\n }\n\n .alert {\n display: flex;\n align-items: flex-start;\n gap: var(--gap-form);\n padding: var(--padding-form);\n color: var(--text-body);\n background: var(--surface-card);\n border: var(--border-width) solid var(--border-subtle);\n border-radius: var(--border-radius);\n }\n\n / A tinted fill plus a matching border, rather than a coloured bar: the\n whole block should read as the message's temperature. /\n :host([variant='info']) .alert {\n background: var(--color-info-soft);\n border-color: var(--color-info-base);\n }\n :host([variant='success']) .alert {\n background: var(--color-success-soft);\n border-color: var(--color-success-base);\n }\n :host([variant='warning']) .alert {\n background: var(--color-warning-soft);\n border-color: var(--color-warning-base);\n }\n :host([variant='danger']) .alert {\n background: var(--color-danger-soft);\n border-color: var(--color-danger-base);\n }\n\n .icon {\n display: flex;\n flex: none;\n padding-top: 1px;\n }\n\n :host([variant='info']) .icon {\n color: var(--color-info-text);\n }\n :host([variant='success']) .icon {\n color: var(--color-success-text);\n }\n :host([variant='warning']) .icon {\n color: var(--color-warning-text);\n }\n :host([variant='danger']) .icon {\n color: var(--color-danger-text);\n }\n :host([variant='neutral']) .icon {\n color: var(--text-muted);\n }\n\n .content {\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: var(--gap-element);\n min-width: 0;\n }\n\n .heading {\n font: var(--font-normal-medium);\n }\n\n .description {\n color: var(--text-muted);\n font: var(--font-normal-regular);\n }\n\n .actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--gap-button);\n margin-top: 4px;\n }\n\n .actions:not(:has()) {\n display: none;\n }\n\n .close {\n display: flex;\n flex: none;\n align-items: center;\n padding: 2px;\n color: currentcolor;\n background: none;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n opacity: 0.7;\n }\n\n .close:hover {\n opacity: 1;\n }\n\n .close:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n }\n `,\n ];\n\n @property({ type: String, reflect: true })\n variant: KtAlertVariant = 'info';\n\n @property({ type: String })\n heading = '';\n\n @property({ type: String })\n description = '';\n\n /** Adds a dismiss button. Removing the alert is the caller's job. /\n @property({ type: Boolean })\n dismissible = false;\n\n /* Hides the leading icon. /\n @property({ type: Boolean, attribute: 'no-icon' })\n noIcon = false;\n\n /* Overrides the icon the variant would pick. */\n @property({ type: String })\n icon = '';\n\n override render(): TemplateResult {\n // Danger interrupts; the rest wait their turn.\n const live = this.variant === 'danger' ? 'assertive' : 'polite';\n\n return html`<div part=\"base\" class=\"alert\" role=\"alert\" aria-live=${live}>\n ${\n this.noIcon\n ? nothing\n : html`<span class=\"icon\">\n <kt-icon name=${this.icon \|\| ICONS[this.variant]} size=\"20\"></kt-icon>\n </span>`\n }\n\n <div class=\"content\">\n ${this.heading ? html`<span class=\"heading\">${this.heading}</span>` : nothing}\n ${this.description ? html`<span class=\"description\">${this.description}</span>` : nothing}\n <slot></slot>\n <div class=\"actions\"><slot name=\"actions\"></slot></div>\n </div>\n\n ${\n this.dismissible\n ? html`<button\n part=\"close\"\n class=\"close\"\n aria-label=\"Dismiss\"\n @click=${() => emit(this, 'kt-close')}\n >\n <kt-icon name=\"x\" size=\"16\"></kt-icon>\n </button>`\n : nothing\n }\n </div>`;\n }\n}\n\ndefineElement('kt-alert', KtAlert);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-alert': KtAlert;\n }\n}\n"],"names":["ICONS","KtAlert","KtElement","css","live","html","nothing","emit","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;AAQA,MAAMA,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AACX;AA0BO,MAAMC,UAAgBC,EAAU;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA,GAgHL,KAAA,UAA0B,QAG1B,KAAA,UAAU,IAGV,KAAA,cAAc,IAId,KAAA,cAAc,IAId,KAAA,SAAS,IAIT,KAAA,OAAO;AAAA,EAAA;AAAA,EAjIP,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,IAAA;AAAA,EA0GF;AAAA,EAuBS,SAAyB;AAEhC,UAAMC,IAAO,KAAK,YAAY,WAAW,cAAc;AAEvD,WAAOC,0DAA6DD,CAAI;AAAA,QAEpE,KAAK,SACDE,IACAD;AAAA,8BACkB,KAAK,QAAQL,EAAM,KAAK,OAAO,CAAC;AAAA,oBAExD;AAAA;AAAA;AAAA,UAGI,KAAK,UAAUK,0BAA6B,KAAK,OAAO,YAAYC,CAAO;AAAA,UAC3E,KAAK,cAAcD,8BAAiC,KAAK,WAAW,YAAYC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,QAMzF,KAAK,cACDD;AAAA;AAAA;AAAA;AAAA,uBAIW,MAAME,EAAK,MAAM,UAAU,CAAC;AAAA;AAAA;AAAA,yBAIvCD,CACN;AAAA;AAAA,EAEJ;AACF;AAtDEE,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA/G9BR,EAgHX,WAAA,SAAA;AAGAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlHfR,EAmHX,WAAA,SAAA;AAGAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArHfR,EAsHX,WAAA,aAAA;AAIAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAzHhBR,EA0HX,WAAA,aAAA;AAIAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,WAAW,WAAW;AAAA,GA7HtCR,EA8HX,WAAA,QAAA;AAIAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjIfR,EAkIX,WAAA,MAAA;AAsCFS,EAAc,YAAYT,CAAO;"}

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

@@ -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-CcMLO5e8.js";
+import { K as d, d as m } from "../../../chunks/kt-element-B_jjQDhg.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 CHANGED Viewed

@@ -2,7 +2,7 @@ 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 { styleMap as m } from "lit/directives/style-map.js";
-import { K as u, d as b } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { K as u, d as b } from "../../../chunks/kt-element-B_jjQDhg.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);
@@ -55,7 +55,7 @@ class a extends u {
       }
       .complete .caption-value {
-        color: var(--color-success-base);
+        color: var(--color-success-text);
       }
       .track {

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

	@@ -1 +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-base);\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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"}
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":";;;;;;;;;;AA6BO,MAAMA,UAAsBC,EAAU;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAkIL,KAAA,QAAQ,GAGR,KAAA,MAAM,KAGN,KAAA,OAAuB,UAGvB,KAAA,UAA6B,WAI7B,KAAA,YAAY,IASZ,KAAA,YAAY,IAGZ,KAAA,UAAU,IAIV,KAAA,WAAW,IAIX,KAAA,QAAQ;AAAA,EAAA;AAAA,EAlKR,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,IAAA;AAAA,EA4HF;AAAA;AAAA,EAuCA,IAAI,UAAkB;AACpB,UAAMC,IAAM,KAAK,MAAM,IAAI,KAAK,MAAM,KAChCC,IAAU,KAAK,IAAI,KAAK,IAAI,KAAK,OAAO,CAAC,GAAGD,CAAG;AACrD,WAAO,KAAK,MAAOC,IAAUD,IAAO,GAAG;AAAA,EACzC;AAAA,EAES,SAAyB;AAChC,UAAME,IAAU,KAAK,SACfC,IAAW,KAAK,UAAU,KAAK,MAAM,IAAI,KAAK,MAAM,MAEpDC,IAAW,KAAK,aAAa,KAAK,SAAU,KAAK;AAEvD,WAAOC,2BAA8BC,EAAS,EAAE,KAAK,IAAM,UAAAH,EAAA,CAAU,CAAC;AAAA,QAElEC,IACIC;AAAA,gBAEI,KAAK,aAAa,KAAK,QACnBA,gCAAmC,KAAK,KAAK,YAC7CA,gBACN;AAAA,gBAEE,KAAK,YACDA,6CAAgDH,CAAO,aACvDK,CACN;AAAA,sBAEFA,CACN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOkB,KAAK,GAAG;AAAA,wBACR,KAAK,KAAK;AAAA,yBACT,GAAGL,CAAO,GAAG;AAAA,qBACjB,KAAK,SAASK,CAAO;AAAA;AAAA;AAAA;AAAA,kBAIxBD,EAAS;AAAA,MACf,MAAM;AAAA,MACN,UAAAH;AAAA,MACA,SAAS,KAAK;AAAA,MACd,UAAU,KAAK;AAAA,IAAA,CAChB,CAAC;AAAA,kBACMK,EAAS,EAAE,OAAO,GAAGN,CAAO,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA,EAIlD;AACF;AAzFEO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjIfb,EAkIX,WAAA,OAAA;AAGAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GApIfb,EAqIX,WAAA,KAAA;AAGAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAvI9Bb,EAwIX,WAAA,MAAA;AAGAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA1I9Bb,EA2IX,WAAA,SAAA;AAIAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,WAAW,cAAc;AAAA,GA9IzCb,EA+IX,WAAA,WAAA;AASAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,WAAW,cAAc;AAAA,GAvJzCb,EAwJX,WAAA,WAAA;AAGAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA1J/Bb,EA2JX,WAAA,SAAA;AAIAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA9J/Bb,EA+JX,WAAA,UAAA;AAIAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlKfb,EAmKX,WAAA,OAAA;AA0DFc,EAAc,mBAAmBd,CAAa;"}

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

@@ -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-CcMLO5e8.js";
+import { K as u, d as f } from "../../../chunks/kt-element-B_jjQDhg.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 CHANGED Viewed

@@ -1,15 +1,15 @@
-import { css as g, nothing as n, html as o } from "lit";
+import { css as g, nothing as n, html as a } from "lit";
 import { state as u, property as e } from "lit/decorators.js";
-import { K as h, d as v } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { K as h, d as v } from "../../../chunks/kt-element-B_jjQDhg.js";
 import { e as m } from "../../../chunks/events-Bjl5Zmmq.js";
 import "../../core/kt-icon/kt-icon.js";
 import "../kt-progress-bar/kt-progress-bar.js";
-var b = Object.defineProperty, i = (c, a, s, w) => {
+var f = Object.defineProperty, i = (c, o, s, w) => {
   for (var r = void 0, d = c.length - 1, l; d >= 0; d--)
-    (l = c[d]) && (r = l(a, s, r) || r);
-  return r && b(a, s, r), r;
+    (l = c[d]) && (r = l(o, s, r) || r);
+  return r && f(o, s, r), r;
 };
-const f = {
+const b = {
   success: { icon: "circle-check", progress: "success" },
   information: { icon: "info", progress: "info" },
   warning: { icon: "triangle-alert", progress: "warning" },
@@ -69,29 +69,29 @@ class t extends h {
       }
       :host([variant='success']) .heading {
-        color: var(--color-success-base);
+        color: var(--color-success-text);
       }
       :host([variant='information']) .heading {
-        color: var(--color-info-base);
+        color: var(--color-info-text);
       }
       :host([variant='warning']) .heading {
-        color: var(--color-warning-base);
+        color: var(--color-warning-text);
       }
       :host([variant='error']) .heading {
-        color: var(--color-danger-base);
+        color: var(--color-danger-text);
       }
       :host([variant='success']) .icon {
-        color: var(--color-success-base);
+        color: var(--color-success-text);
       }
       :host([variant='information']) .icon {
-        color: var(--color-info-base);
+        color: var(--color-info-text);
       }
       :host([variant='warning']) .icon {
-        color: var(--color-warning-base);
+        color: var(--color-warning-text);
       }
       :host([variant='error']) .icon {
-        color: var(--color-danger-base);
+        color: var(--color-danger-text);
       }
       .body {
@@ -174,28 +174,28 @@ class t extends h {
     this.stopCountdown(), m(this, "kt-toast-close");
   }
   render() {
-    const a = f[this.variant], s = this.duration > 0;
-    return o`<div
+    const o = b[this.variant], s = this.duration > 0;
+    return a`<div
       part="base"
       class="toast"
       role=${this.variant === "error" ? "alert" : "status"}
       aria-live=${this.variant === "error" ? "assertive" : "polite"}
     >
       <div class="body">
-        <span class="icon"><kt-icon name=${a.icon} size="24"></kt-icon></span>
+        <span class="icon"><kt-icon name=${o.icon} size="24"></kt-icon></span>
         <div class="content">
-          ${this.heading ? o`<div class="heading">${this.heading}</div>` : n}
-          ${this.description ? o`<div class="description">${this.description}</div>` : n}
+          ${this.heading ? a`<div class="heading">${this.heading}</div>` : n}
+          ${this.description ? a`<div class="description">${this.description}</div>` : n}
         </div>
       </div>
-      ${this.dismissible ? o`<button part="close" class="close" aria-label="Close" @click=${this.close}>
+      ${this.dismissible ? a`<button part="close" class="close" aria-label="Close" @click=${this.close}>
               <kt-icon name="x" size="18"></kt-icon>
             </button>` : n}
-      ${s ? o`<div class="countdown">
+      ${s ? a`<div class="countdown">
               <kt-progress-bar
                 size="small"
-                variant=${a.progress}
+                variant=${o.progress}
                 striped
                 animated
                 .value=${this.remaining}

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

	@@ -1 +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 '../../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-base);\n }\n :host([variant='information']) .heading {\n color: var(--color-info-base);\n }\n :host([variant='warning']) .heading {\n color: var(--color-warning-base);\n }\n :host([variant='error']) .heading {\n color: var(--color-danger-base);\n }\n\n :host([variant='success']) .icon {\n color: var(--color-success-base);\n }\n :host([variant='information']) .icon {\n color: var(--color-info-base);\n }\n :host([variant='warning']) .icon {\n color: var(--color-warning-base);\n }\n :host([variant='error']) .icon {\n color: var(--color-danger-base);\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 part=\"close\" class=\"close\" aria-label=\"Close\" @click=${this.close}>\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=\"Time remaining\"\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","__decorateClass","state","property","defineElement"],"mappings":"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"}
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 '../../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 part=\"close\" class=\"close\" aria-label=\"Close\" @click=${this.close}>\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=\"Time remaining\"\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","__decorateClass","state","property","defineElement"],"mappings":"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"}

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

@@ -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-CcMLO5e8.js";
+import { K as l, d } from "../../../chunks/kt-element-B_jjQDhg.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.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { css as h, html as l } from "lit";
 import { state as c, property as n } from "lit/decorators.js";
 import { classMap as v } from "lit/directives/class-map.js";
-import { K as d, d as b } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { K as d, d as b } from "../../../chunks/kt-element-B_jjQDhg.js";
 import { u as f } from "../../../chunks/events-Bjl5Zmmq.js";
 var u = Object.defineProperty, s = (r, t, a, y) => {
   for (var e = void 0, o = r.length - 1, p; o >= 0; o--)

package/dist/components/forms/kt-drag-drop/kt-drag-drop.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 import { KtElement } from '#internal/kt-element';
 import '../../core/kt-icon/kt-icon.js';
 import '../../core/kt-button/kt-button.js';
@@ -23,8 +23,10 @@ import '../../core/kt-button/kt-button.js';
  * ```
  */
 export declare class KtDragDrop extends KtElement {
+    static readonly formAssociated = true;
     static styles: import("lit").CSSResultGroup[];
     private fileInput;
+    private internals;
     private dragging;
     private files;
     /**
@@ -44,6 +46,14 @@ export declare class KtDragDrop extends KtElement {
     /** Largest accepted file, in bytes. Zero means no limit. */
     maxSize: number;
     disabled: boolean;
+    /** The files are submitted under this name, as by `<input type="file">`. */
+    name: string;
+    required: boolean;
+    connectedCallback(): void;
+    willUpdate(changed: PropertyValues): void;
+    private syncFormValue;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
     /** The files currently held, newest last. */
     get selectedFiles(): readonly File[];
     /** Empties the selection without firing a rejection. */