kanto-ds 1.0.1 → 1.2.0

package/dist/index.js

@@ -42,7 +42,7 @@ import { KtStat as vt } from "./components/data/kt-stat/kt-stat.js";
 import { KtTable as Ht } from "./components/data/kt-table/kt-table.js";
 import { KtTimeline as kt, KtTimelineItem as wt } from "./components/data/kt-timeline/kt-timeline.js";
 import { g as Ft, r as Gt, a as Lt, b as Nt } from "./chunks/defaults-DKzFsNbv.js";
-import { K as qt, d as zt } from "./chunks/kt-element-CcMLO5e8.js";
+import { K as qt, d as zt } from "./chunks/kt-element-B_jjQDhg.js";
 export {
   Y as KtAlert,
   r as KtAvatar,

package/dist/internal/form-control.d.ts

@@ -16,8 +16,13 @@
 /** An `ElementInternals` implementation complete enough to be worth calling. */
 export type UsableInternals = ElementInternals;
 export declare function attachFormInternals(host: HTMLElement): UsableInternals | null;
-/** Pushes the control's current value into the enclosing form, if there is one. */
-export declare function setFormValue(internals: UsableInternals | null, value: string | null): void;
+/**
+ * Pushes the control's current value into the enclosing form, if there is one.
+ *
+ * A `FormData` submits each of its entries as they are named in it — which is
+ * how one control contributes several files under one name.
+ */
+export declare function setFormValue(internals: UsableInternals | null, value: string | FormData | null): void;
 /**
  * Mirrors a control's validity onto the host element.
  *

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/react/index.ts"],"sourcesContent":["/**\n * React wrappers for the Kanto elements.\n *\n * React 19 can set custom-element properties and listen for custom events on\n * its own, so these wrappers are not strictly required. They are here for what\n * plain JSX still cannot give you: typed props with autocompletion, typed\n * event handlers as `onKtChange` rather than `useEffect` plus\n * `addEventListener`, and refs typed as the element rather than `HTMLElement`.\n *\n *     import { KtButton, KtInput } from 'kanto-ds/react';\n *     import 'kanto-ds/styles.css';\n *\n *     <KtInput placeholder=\"Search\" onKtChange={(e) => setQuery(e.detail.value)} />\n *\n * React is a peer dependency: the package works without it.\n */\nimport * as React from 'react';\nimport { createComponent, type EventName } from '@lit/react';\n\nimport { KtAvatar as KtAvatarElement } from '../components/core/kt-avatar/kt-avatar.js';\nimport { KtBadge as KtBadgeElement } from '../components/core/kt-badge/kt-badge.js';\nimport { KtButton as KtButtonElement } from '../components/core/kt-button/kt-button.js';\nimport { KtSplitButton as KtSplitButtonElement } from '../components/core/kt-split-button/kt-split-button.js';\nimport { KtCard as KtCardElement } from '../components/core/kt-card/kt-card.js';\nimport { KtCode as KtCodeElement } from '../components/core/kt-code/kt-code.js';\nimport { KtIcon as KtIconElement } from '../components/core/kt-icon/kt-icon.js';\nimport { KtKbd as KtKbdElement } from '../components/core/kt-kbd/kt-kbd.js';\nimport { KtDragDrop as KtDragDropElement } from '../components/forms/kt-drag-drop/kt-drag-drop.js';\nimport { KtForm as KtFormElement } from '../components/forms/kt-form/kt-form.js';\nimport { KtInput as KtInputElement } from '../components/forms/kt-input/kt-input.js';\nimport { KtInputMenu as KtInputMenuElement } from '../components/forms/kt-input-menu/kt-input-menu.js';\nimport { KtLabelInput as KtLabelInputElement } from '../components/forms/kt-label-input/kt-label-input.js';\nimport { KtSelect as KtSelectElement } from '../components/forms/kt-select/kt-select.js';\nimport { KtTextarea as KtTextareaElement } from '../components/forms/kt-textarea/kt-textarea.js';\nimport { KtToggle as KtToggleElement } from '../components/forms/kt-toggle/kt-toggle.js';\nimport { KtBreadcrumb as KtBreadcrumbElement } from '../components/navigation/kt-breadcrumb/kt-breadcrumb.js';\nimport { KtPageHeader as KtPageHeaderElement } from '../components/navigation/kt-page-header/kt-page-header.js';\nimport { KtSegmentedControl as KtSegmentedControlElement } from '../components/navigation/kt-segmented-control/kt-segmented-control.js';\nimport { KtSubMenuNavigation as KtSubMenuNavigationElement } from '../components/navigation/kt-sub-menu-navigation/kt-sub-menu-navigation.js';\nimport { KtTabs as KtTabsElement } from '../components/navigation/kt-tabs/kt-tabs.js';\nimport { KtHeader as KtHeaderElement } from '../components/navigation/kt-header/kt-header.js';\nimport { KtToggleButton as KtToggleButtonElement } from '../components/navigation/kt-toggle-button/kt-toggle-button.js';\nimport { KtToggleButtonGroup as KtToggleButtonGroupElement } from '../components/navigation/kt-toggle-button-group/kt-toggle-button-group.js';\nimport { KtAlert as KtAlertElement } from '../components/feedback/kt-alert/kt-alert.js';\nimport { KtEmptyState as KtEmptyStateElement } from '../components/feedback/kt-empty-state/kt-empty-state.js';\nimport { KtProgressBar as KtProgressBarElement } from '../components/feedback/kt-progress-bar/kt-progress-bar.js';\nimport { KtSkeleton as KtSkeletonElement } from '../components/feedback/kt-skeleton/kt-skeleton.js';\nimport { KtToast as KtToastElement } from '../components/feedback/kt-toast/kt-toast.js';\nimport { KtToastContainer as KtToastContainerElement } from '../components/feedback/kt-toast-container/kt-toast-container.js';\nimport { KtTooltip as KtTooltipElement } from '../components/feedback/kt-tooltip/kt-tooltip.js';\nimport { KtCollapsible as KtCollapsibleElement } from '../components/overlays/kt-collapsible/kt-collapsible.js';\nimport { KtConfirmDialog as KtConfirmDialogElement } from '../components/overlays/kt-confirm-dialog/kt-confirm-dialog.js';\nimport { KtDropdown as KtDropdownElement } from '../components/overlays/kt-dropdown/kt-dropdown.js';\nimport { KtModal as KtModalElement } from '../components/overlays/kt-modal/kt-modal.js';\nimport { KtSidePanel as KtSidePanelElement } from '../components/overlays/kt-side-panel/kt-side-panel.js';\nimport { KtChart as KtChartElement } from '../components/data/kt-chart/kt-chart.js';\nimport { KtMeter as KtMeterElement } from '../components/data/kt-meter/kt-meter.js';\nimport { KtPagination as KtPaginationElement } from '../components/data/kt-pagination/kt-pagination.js';\nimport { KtStat as KtStatElement } from '../components/data/kt-stat/kt-stat.js';\nimport { KtTable as KtTableElement } from '../components/data/kt-table/kt-table.js';\nimport {\n  KtTimeline as KtTimelineElement,\n  KtTimelineItem as KtTimelineItemElement,\n} from '../components/data/kt-timeline/kt-timeline.js';\n\n/** Narrows an event name to the detail its element actually dispatches. */\ntype Kt<T> = EventName<CustomEvent<T>>;\n\n// === CORE ===\nexport const KtAvatar = createComponent({\n  tagName: 'kt-avatar',\n  elementClass: KtAvatarElement,\n  react: React,\n});\n\nexport const KtBadge = createComponent({\n  tagName: 'kt-badge',\n  elementClass: KtBadgeElement,\n  react: React,\n  events: {\n    onKtBadgeClick: 'kt-badge-click' as Kt<never>,\n    onKtRemove: 'kt-remove' as Kt<never>,\n  },\n});\n\nexport const KtButton = createComponent({\n  tagName: 'kt-button',\n  elementClass: KtButtonElement,\n  react: React,\n});\n\nexport const KtSplitButton = createComponent({\n  tagName: 'kt-split-button',\n  elementClass: KtSplitButtonElement,\n  react: React,\n  events: {\n    onKtSelect: 'kt-select' as Kt<{ value: string | number }>,\n    onKtOpen: 'kt-open' as Kt<never>,\n    onKtClose: 'kt-close' as Kt<never>,\n  },\n});\n\nexport const KtCard = createComponent({\n  tagName: 'kt-card',\n  elementClass: KtCardElement,\n  react: React,\n  events: { onKtCardClick: 'kt-card-click' as Kt<never> },\n});\n\nexport const KtCode = createComponent({\n  tagName: 'kt-code',\n  elementClass: KtCodeElement,\n  react: React,\n  events: { onKtCopy: 'kt-copy' as Kt<{ code: string }> },\n});\n\nexport const KtIcon = createComponent({\n  tagName: 'kt-icon',\n  elementClass: KtIconElement,\n  react: React,\n});\n\nexport const KtKbd = createComponent({\n  tagName: 'kt-kbd',\n  elementClass: KtKbdElement,\n  react: React,\n});\n\n// === FORMS ===\nexport const KtForm = createComponent({\n  tagName: 'kt-form',\n  elementClass: KtFormElement,\n  react: React,\n});\n\nexport const KtInput = createComponent({\n  tagName: 'kt-input',\n  elementClass: KtInputElement,\n  react: React,\n  events: {\n    onKtInput: 'kt-input' as Kt<{ value: string }>,\n    onKtChange: 'kt-change' as Kt<{ value: string }>,\n    onKtClear: 'kt-clear' as Kt<never>,\n    onKtCountryChange: 'kt-country-change' as Kt<{ country: string; dialCode: string }>,\n  },\n});\n\nexport const KtTextarea = createComponent({\n  tagName: 'kt-textarea',\n  elementClass: KtTextareaElement,\n  react: React,\n  events: {\n    onKtInput: 'kt-input' as Kt<{ value: string }>,\n    onKtChange: 'kt-change' as Kt<{ value: string }>,\n  },\n});\n\nexport const KtLabelInput = createComponent({\n  tagName: 'kt-label-input',\n  elementClass: KtLabelInputElement,\n  react: React,\n});\n\nexport const KtToggle = createComponent({\n  tagName: 'kt-toggle',\n  elementClass: KtToggleElement,\n  react: React,\n  events: { onKtChange: 'kt-change' as Kt<{ checked: boolean }> },\n});\n\nexport const KtSelect = createComponent({\n  tagName: 'kt-select',\n  elementClass: KtSelectElement,\n  react: React,\n  events: { onKtChange: 'kt-change' as Kt<{ value: string | number | null }> },\n});\n\nexport const KtInputMenu = createComponent({\n  tagName: 'kt-input-menu',\n  elementClass: KtInputMenuElement,\n  react: React,\n  events: {\n    onKtChange: 'kt-change' as Kt<{ value: string | number | null }>,\n    onKtFilter: 'kt-filter' as Kt<{ query: string }>,\n  },\n});\n\nexport const KtDragDrop = createComponent({\n  tagName: 'kt-drag-drop',\n  elementClass: KtDragDropElement,\n  react: React,\n  events: {\n    onKtFilesChange: 'kt-files-change' as Kt<{ files: File[] }>,\n    onKtFilesRejected: 'kt-files-rejected' as Kt<{ files: File[]; reason: 'type' | 'size' }>,\n  },\n});\n\n// === NAVIGATION ===\nexport const KtBreadcrumb = createComponent({\n  tagName: 'kt-breadcrumb',\n  elementClass: KtBreadcrumbElement,\n  react: React,\n  events: { onKtNavigate: 'kt-navigate' as Kt<{ index: number }> },\n});\n\nexport const KtSubMenuNavigation = createComponent({\n  tagName: 'kt-sub-menu-navigation',\n  elementClass: KtSubMenuNavigationElement,\n  react: React,\n  events: { onKtNavigate: 'kt-navigate' as Kt<unknown> },\n});\n\nexport const KtPageHeader = createComponent({\n  tagName: 'kt-page-header',\n  elementClass: KtPageHeaderElement,\n  react: React,\n});\n\nexport const KtSegmentedControl = createComponent({\n  tagName: 'kt-segmented-control',\n  elementClass: KtSegmentedControlElement,\n  react: React,\n  events: { onKtChange: 'kt-change' as Kt<{ value: string | number }> },\n});\n\nexport const KtTabs = createComponent({\n  tagName: 'kt-tabs',\n  elementClass: KtTabsElement,\n  react: React,\n  events: { onKtChange: 'kt-change' as Kt<{ value: string | number }> },\n});\n\nexport const KtHeader = createComponent({\n  tagName: 'kt-header',\n  elementClass: KtHeaderElement,\n  react: React,\n  events: { onKtMenuToggle: 'kt-menu-toggle' as Kt<{ open: boolean }> },\n});\n\nexport const KtToggleButton = createComponent({\n  tagName: 'kt-toggle-button',\n  elementClass: KtToggleButtonElement,\n  react: React,\n  events: { onKtChange: 'kt-change' as Kt<{ selected: boolean; value: string }> },\n});\n\nexport const KtToggleButtonGroup = createComponent({\n  tagName: 'kt-toggle-button-group',\n  elementClass: KtToggleButtonGroupElement,\n  react: React,\n  events: { onKtChange: 'kt-change' as Kt<{ value: string | string[] | null }> },\n});\n\n// === FEEDBACK ===\nexport const KtAlert = createComponent({\n  tagName: 'kt-alert',\n  elementClass: KtAlertElement,\n  react: React,\n  events: { onKtClose: 'kt-close' as Kt<never> },\n});\n\nexport const KtEmptyState = createComponent({\n  tagName: 'kt-empty-state',\n  elementClass: KtEmptyStateElement,\n  react: React,\n});\n\nexport const KtProgressBar = createComponent({\n  tagName: 'kt-progress-bar',\n  elementClass: KtProgressBarElement,\n  react: React,\n});\n\nexport const KtSkeleton = createComponent({\n  tagName: 'kt-skeleton',\n  elementClass: KtSkeletonElement,\n  react: React,\n});\n\nexport const KtTooltip = createComponent({\n  tagName: 'kt-tooltip',\n  elementClass: KtTooltipElement,\n  react: React,\n});\n\nexport const KtToast = createComponent({\n  tagName: 'kt-toast',\n  elementClass: KtToastElement,\n  react: React,\n  events: { onKtToastClose: 'kt-toast-close' as Kt<never> },\n});\n\nexport const KtToastContainer = createComponent({\n  tagName: 'kt-toast-container',\n  elementClass: KtToastContainerElement,\n  react: React,\n});\n\n// === OVERLAYS ===\nexport const KtCollapsible = createComponent({\n  tagName: 'kt-collapsible',\n  elementClass: KtCollapsibleElement,\n  react: React,\n  events: { onKtToggle: 'kt-toggle' as Kt<{ open: boolean }> },\n});\n\nexport const KtDropdown = createComponent({\n  tagName: 'kt-dropdown',\n  elementClass: KtDropdownElement,\n  react: React,\n  events: {\n    onKtSelect: 'kt-select' as Kt<{ value: string | number }>,\n    onKtOpen: 'kt-open' as Kt<never>,\n    onKtClose: 'kt-close' as Kt<never>,\n  },\n});\n\nexport const KtModal = createComponent({\n  tagName: 'kt-modal',\n  elementClass: KtModalElement,\n  react: React,\n  events: { onKtClose: 'kt-close' as Kt<never> },\n});\n\nexport const KtSidePanel = createComponent({\n  tagName: 'kt-side-panel',\n  elementClass: KtSidePanelElement,\n  react: React,\n  events: { onKtClose: 'kt-close' as Kt<never> },\n});\n\nexport const KtConfirmDialog = createComponent({\n  tagName: 'kt-confirm-dialog',\n  elementClass: KtConfirmDialogElement,\n  react: React,\n  events: {\n    onKtConfirm: 'kt-confirm' as Kt<never>,\n    onKtCancel: 'kt-cancel' as Kt<never>,\n  },\n});\n\n// === DATA ===\nexport const KtChart = createComponent({\n  tagName: 'kt-chart',\n  elementClass: KtChartElement,\n  react: React,\n  events: {\n    onKtPointHover: 'kt-point-hover' as Kt<{ index: number; series: number }>,\n    onKtSeriesToggle: 'kt-series-toggle' as Kt<{ series: number; hidden: boolean }>,\n  },\n});\n\nexport const KtTable = createComponent({\n  tagName: 'kt-table',\n  elementClass: KtTableElement,\n  react: React,\n  events: {\n    onKtSortChange: 'kt-sort-change' as Kt<{\n      key: string | null;\n      direction: 'asc' | 'desc' | null;\n    }>,\n    onKtSelectionChange: 'kt-selection-change' as Kt<{ selected: unknown[] }>,\n    onKtRowClick: 'kt-row-click' as Kt<{ index: number }>,\n    onKtPageChange: 'kt-page-change' as Kt<{ page: number }>,\n  },\n});\n\nexport const KtMeter = createComponent({\n  tagName: 'kt-meter',\n  elementClass: KtMeterElement,\n  react: React,\n});\n\nexport const KtPagination = createComponent({\n  tagName: 'kt-pagination',\n  elementClass: KtPaginationElement,\n  react: React,\n  events: { onKtPageChange: 'kt-page-change' as Kt<{ page: number }> },\n});\n\n// The imperative toaster needs no wrapper.\nexport { toaster } from '../components/feedback/kt-toast-container/toaster.js';\n\nexport const KtStat = createComponent({\n  tagName: 'kt-stat',\n  elementClass: KtStatElement,\n  react: React,\n});\n\nexport const KtTimeline = createComponent({\n  tagName: 'kt-timeline',\n  elementClass: KtTimelineElement,\n  react: React,\n});\n\nexport const KtTimelineItem = createComponent({\n  tagName: 'kt-timeline-item',\n  elementClass: KtTimelineItemElement,\n  react: React,\n});\n"],"names":["KtAvatar","createComponent","KtAvatarElement","React","KtBadge","KtBadgeElement","KtButton","KtButtonElement","KtSplitButton","KtSplitButtonElement","KtCard","KtCardElement","KtCode","KtCodeElement","KtIcon","KtIconElement","KtKbd","KtKbdElement","KtForm","KtFormElement","KtInput","KtInputElement","KtTextarea","KtTextareaElement","KtLabelInput","KtLabelInputElement","KtToggle","KtToggleElement","KtSelect","KtSelectElement","KtInputMenu","KtInputMenuElement","KtDragDrop","KtDragDropElement","KtBreadcrumb","KtBreadcrumbElement","KtSubMenuNavigation","KtSubMenuNavigationElement","KtPageHeader","KtPageHeaderElement","KtSegmentedControl","KtSegmentedControlElement","KtTabs","KtTabsElement","KtHeader","KtHeaderElement","KtToggleButton","KtToggleButtonElement","KtToggleButtonGroup","KtToggleButtonGroupElement","KtAlert","KtAlertElement","KtEmptyState","KtEmptyStateElement","KtProgressBar","KtProgressBarElement","KtSkeleton","KtSkeletonElement","KtTooltip","KtTooltipElement","KtToast","KtToastElement","KtToastContainer","KtToastContainerElement","KtCollapsible","KtCollapsibleElement","KtDropdown","KtDropdownElement","KtModal","KtModalElement","KtSidePanel","KtSidePanelElement","KtConfirmDialog","KtConfirmDialogElement","KtChart","KtChartElement","KtTable","KtTableElement","KtMeter","KtMeterElement","KtPagination","KtPaginationElement","KtStat","KtStatElement","KtTimeline","KtTimelineElement","KtTimelineItem","KtTimelineItemElement"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/react/index.ts"],"sourcesContent":["/**\n * React wrappers for the Kanto elements — for React 18.\n *\n * React 18 sets every prop as a string attribute and cannot listen for custom\n * events, so each element is wrapped with `@lit/react`: props become\n * properties, `onKtChange` listens for `kt-change`, refs are typed as the\n * element. `@lit/react` is an optional peer dependency — a React 18 project\n * installs it alongside kanto-ds:\n *\n *     npm install kanto-ds @lit/react\n *\n *     import { KtButton, KtInput } from 'kanto-ds/react';\n *     import 'kanto-ds/styles.css';\n *\n *     <KtInput placeholder=\"Search\" onKtChange={(e) => setQuery(e.detail.value)} />\n *\n * React 19 needs none of this: it renders the `kt-*` tags directly, and\n * `kanto-ds/react/jsx` types them.\n */\nimport * as React from 'react';\nimport { createComponent, type EventName } from '@lit/react';\n\nimport { KtAvatar as KtAvatarElement } from '../components/core/kt-avatar/kt-avatar.js';\nimport { KtBadge as KtBadgeElement } from '../components/core/kt-badge/kt-badge.js';\nimport { KtButton as KtButtonElement } from '../components/core/kt-button/kt-button.js';\nimport { KtSplitButton as KtSplitButtonElement } from '../components/core/kt-split-button/kt-split-button.js';\nimport { KtCard as KtCardElement } from '../components/core/kt-card/kt-card.js';\nimport { KtCode as KtCodeElement } from '../components/core/kt-code/kt-code.js';\nimport { KtIcon as KtIconElement } from '../components/core/kt-icon/kt-icon.js';\nimport { KtKbd as KtKbdElement } from '../components/core/kt-kbd/kt-kbd.js';\nimport { KtDragDrop as KtDragDropElement } from '../components/forms/kt-drag-drop/kt-drag-drop.js';\nimport { KtForm as KtFormElement } from '../components/forms/kt-form/kt-form.js';\nimport { KtInput as KtInputElement } from '../components/forms/kt-input/kt-input.js';\nimport { KtInputMenu as KtInputMenuElement } from '../components/forms/kt-input-menu/kt-input-menu.js';\nimport { KtLabelInput as KtLabelInputElement } from '../components/forms/kt-label-input/kt-label-input.js';\nimport { KtSelect as KtSelectElement } from '../components/forms/kt-select/kt-select.js';\nimport { KtTextarea as KtTextareaElement } from '../components/forms/kt-textarea/kt-textarea.js';\nimport { KtToggle as KtToggleElement } from '../components/forms/kt-toggle/kt-toggle.js';\nimport { KtBreadcrumb as KtBreadcrumbElement } from '../components/navigation/kt-breadcrumb/kt-breadcrumb.js';\nimport { KtPageHeader as KtPageHeaderElement } from '../components/navigation/kt-page-header/kt-page-header.js';\nimport { KtSegmentedControl as KtSegmentedControlElement } from '../components/navigation/kt-segmented-control/kt-segmented-control.js';\nimport { KtSubMenuNavigation as KtSubMenuNavigationElement } from '../components/navigation/kt-sub-menu-navigation/kt-sub-menu-navigation.js';\nimport { KtTabs as KtTabsElement } from '../components/navigation/kt-tabs/kt-tabs.js';\nimport { KtHeader as KtHeaderElement } from '../components/navigation/kt-header/kt-header.js';\nimport { KtToggleButton as KtToggleButtonElement } from '../components/navigation/kt-toggle-button/kt-toggle-button.js';\nimport { KtToggleButtonGroup as KtToggleButtonGroupElement } from '../components/navigation/kt-toggle-button-group/kt-toggle-button-group.js';\nimport { KtAlert as KtAlertElement } from '../components/feedback/kt-alert/kt-alert.js';\nimport { KtEmptyState as KtEmptyStateElement } from '../components/feedback/kt-empty-state/kt-empty-state.js';\nimport { KtProgressBar as KtProgressBarElement } from '../components/feedback/kt-progress-bar/kt-progress-bar.js';\nimport { KtSkeleton as KtSkeletonElement } from '../components/feedback/kt-skeleton/kt-skeleton.js';\nimport { KtToast as KtToastElement } from '../components/feedback/kt-toast/kt-toast.js';\nimport { KtToastContainer as KtToastContainerElement } from '../components/feedback/kt-toast-container/kt-toast-container.js';\nimport { KtTooltip as KtTooltipElement } from '../components/feedback/kt-tooltip/kt-tooltip.js';\nimport { KtCollapsible as KtCollapsibleElement } from '../components/overlays/kt-collapsible/kt-collapsible.js';\nimport { KtConfirmDialog as KtConfirmDialogElement } from '../components/overlays/kt-confirm-dialog/kt-confirm-dialog.js';\nimport { KtDropdown as KtDropdownElement } from '../components/overlays/kt-dropdown/kt-dropdown.js';\nimport { KtModal as KtModalElement } from '../components/overlays/kt-modal/kt-modal.js';\nimport { KtSidePanel as KtSidePanelElement } from '../components/overlays/kt-side-panel/kt-side-panel.js';\nimport { KtChart as KtChartElement } from '../components/data/kt-chart/kt-chart.js';\nimport { KtMeter as KtMeterElement } from '../components/data/kt-meter/kt-meter.js';\nimport { KtPagination as KtPaginationElement } from '../components/data/kt-pagination/kt-pagination.js';\nimport { KtStat as KtStatElement } from '../components/data/kt-stat/kt-stat.js';\nimport { KtTable as KtTableElement } from '../components/data/kt-table/kt-table.js';\nimport {\n  KtTimeline as KtTimelineElement,\n  KtTimelineItem as KtTimelineItemElement,\n} from '../components/data/kt-timeline/kt-timeline.js';\n\n/** Narrows an event name to the detail its element actually dispatches. */\ntype Kt<T> = EventName<CustomEvent<T>>;\n\n// === CORE ===\nexport const KtAvatar = createComponent({\n  tagName: 'kt-avatar',\n  elementClass: KtAvatarElement,\n  react: React,\n});\n\nexport const KtBadge = createComponent({\n  tagName: 'kt-badge',\n  elementClass: KtBadgeElement,\n  react: React,\n  events: {\n    onKtBadgeClick: 'kt-badge-click' as Kt<never>,\n    onKtRemove: 'kt-remove' as Kt<never>,\n  },\n});\n\nexport const KtButton = createComponent({\n  tagName: 'kt-button',\n  elementClass: KtButtonElement,\n  react: React,\n});\n\nexport const KtSplitButton = createComponent({\n  tagName: 'kt-split-button',\n  elementClass: KtSplitButtonElement,\n  react: React,\n  events: {\n    onKtSelect: 'kt-select' as Kt<{ value: string | number }>,\n    onKtOpen: 'kt-open' as Kt<never>,\n    onKtClose: 'kt-close' as Kt<never>,\n  },\n});\n\nexport const KtCard = createComponent({\n  tagName: 'kt-card',\n  elementClass: KtCardElement,\n  react: React,\n  events: { onKtCardClick: 'kt-card-click' as Kt<never> },\n});\n\nexport const KtCode = createComponent({\n  tagName: 'kt-code',\n  elementClass: KtCodeElement,\n  react: React,\n  events: { onKtCopy: 'kt-copy' as Kt<{ code: string }> },\n});\n\nexport const KtIcon = createComponent({\n  tagName: 'kt-icon',\n  elementClass: KtIconElement,\n  react: React,\n});\n\nexport const KtKbd = createComponent({\n  tagName: 'kt-kbd',\n  elementClass: KtKbdElement,\n  react: React,\n});\n\n// === FORMS ===\nexport const KtForm = createComponent({\n  tagName: 'kt-form',\n  elementClass: KtFormElement,\n  react: React,\n});\n\nexport const KtInput = createComponent({\n  tagName: 'kt-input',\n  elementClass: KtInputElement,\n  react: React,\n  events: {\n    onKtInput: 'kt-input' as Kt<{ value: string }>,\n    onKtChange: 'kt-change' as Kt<{ value: string }>,\n    onKtClear: 'kt-clear' as Kt<never>,\n    onKtCountryChange: 'kt-country-change' as Kt<{ country: string; dialCode: string }>,\n  },\n});\n\nexport const KtTextarea = createComponent({\n  tagName: 'kt-textarea',\n  elementClass: KtTextareaElement,\n  react: React,\n  events: {\n    onKtInput: 'kt-input' as Kt<{ value: string }>,\n    onKtChange: 'kt-change' as Kt<{ value: string }>,\n  },\n});\n\nexport const KtLabelInput = createComponent({\n  tagName: 'kt-label-input',\n  elementClass: KtLabelInputElement,\n  react: React,\n});\n\nexport const KtToggle = createComponent({\n  tagName: 'kt-toggle',\n  elementClass: KtToggleElement,\n  react: React,\n  events: { onKtChange: 'kt-change' as Kt<{ checked: boolean }> },\n});\n\nexport const KtSelect = createComponent({\n  tagName: 'kt-select',\n  elementClass: KtSelectElement,\n  react: React,\n  events: { onKtChange: 'kt-change' as Kt<{ value: string | number | null }> },\n});\n\nexport const KtInputMenu = createComponent({\n  tagName: 'kt-input-menu',\n  elementClass: KtInputMenuElement,\n  react: React,\n  events: {\n    onKtChange: 'kt-change' as Kt<{ value: string | number | null }>,\n    onKtFilter: 'kt-filter' as Kt<{ query: string }>,\n  },\n});\n\nexport const KtDragDrop = createComponent({\n  tagName: 'kt-drag-drop',\n  elementClass: KtDragDropElement,\n  react: React,\n  events: {\n    onKtFilesChange: 'kt-files-change' as Kt<{ files: File[] }>,\n    onKtFilesRejected: 'kt-files-rejected' as Kt<{ files: File[]; reason: 'type' | 'size' }>,\n  },\n});\n\n// === NAVIGATION ===\nexport const KtBreadcrumb = createComponent({\n  tagName: 'kt-breadcrumb',\n  elementClass: KtBreadcrumbElement,\n  react: React,\n  events: { onKtNavigate: 'kt-navigate' as Kt<{ index: number }> },\n});\n\nexport const KtSubMenuNavigation = createComponent({\n  tagName: 'kt-sub-menu-navigation',\n  elementClass: KtSubMenuNavigationElement,\n  react: React,\n  events: { onKtNavigate: 'kt-navigate' as Kt<unknown> },\n});\n\nexport const KtPageHeader = createComponent({\n  tagName: 'kt-page-header',\n  elementClass: KtPageHeaderElement,\n  react: React,\n});\n\nexport const KtSegmentedControl = createComponent({\n  tagName: 'kt-segmented-control',\n  elementClass: KtSegmentedControlElement,\n  react: React,\n  events: { onKtChange: 'kt-change' as Kt<{ value: string | number }> },\n});\n\nexport const KtTabs = createComponent({\n  tagName: 'kt-tabs',\n  elementClass: KtTabsElement,\n  react: React,\n  events: { onKtChange: 'kt-change' as Kt<{ value: string | number }> },\n});\n\nexport const KtHeader = createComponent({\n  tagName: 'kt-header',\n  elementClass: KtHeaderElement,\n  react: React,\n  events: { onKtMenuToggle: 'kt-menu-toggle' as Kt<{ open: boolean }> },\n});\n\nexport const KtToggleButton = createComponent({\n  tagName: 'kt-toggle-button',\n  elementClass: KtToggleButtonElement,\n  react: React,\n  events: { onKtChange: 'kt-change' as Kt<{ selected: boolean; value: string }> },\n});\n\nexport const KtToggleButtonGroup = createComponent({\n  tagName: 'kt-toggle-button-group',\n  elementClass: KtToggleButtonGroupElement,\n  react: React,\n  events: { onKtChange: 'kt-change' as Kt<{ value: string | string[] | null }> },\n});\n\n// === FEEDBACK ===\nexport const KtAlert = createComponent({\n  tagName: 'kt-alert',\n  elementClass: KtAlertElement,\n  react: React,\n  events: { onKtClose: 'kt-close' as Kt<never> },\n});\n\nexport const KtEmptyState = createComponent({\n  tagName: 'kt-empty-state',\n  elementClass: KtEmptyStateElement,\n  react: React,\n});\n\nexport const KtProgressBar = createComponent({\n  tagName: 'kt-progress-bar',\n  elementClass: KtProgressBarElement,\n  react: React,\n});\n\nexport const KtSkeleton = createComponent({\n  tagName: 'kt-skeleton',\n  elementClass: KtSkeletonElement,\n  react: React,\n});\n\nexport const KtTooltip = createComponent({\n  tagName: 'kt-tooltip',\n  elementClass: KtTooltipElement,\n  react: React,\n});\n\nexport const KtToast = createComponent({\n  tagName: 'kt-toast',\n  elementClass: KtToastElement,\n  react: React,\n  events: { onKtToastClose: 'kt-toast-close' as Kt<never> },\n});\n\nexport const KtToastContainer = createComponent({\n  tagName: 'kt-toast-container',\n  elementClass: KtToastContainerElement,\n  react: React,\n});\n\n// === OVERLAYS ===\nexport const KtCollapsible = createComponent({\n  tagName: 'kt-collapsible',\n  elementClass: KtCollapsibleElement,\n  react: React,\n  events: { onKtToggle: 'kt-toggle' as Kt<{ open: boolean }> },\n});\n\nexport const KtDropdown = createComponent({\n  tagName: 'kt-dropdown',\n  elementClass: KtDropdownElement,\n  react: React,\n  events: {\n    onKtSelect: 'kt-select' as Kt<{ value: string | number }>,\n    onKtOpen: 'kt-open' as Kt<never>,\n    onKtClose: 'kt-close' as Kt<never>,\n  },\n});\n\nexport const KtModal = createComponent({\n  tagName: 'kt-modal',\n  elementClass: KtModalElement,\n  react: React,\n  events: { onKtClose: 'kt-close' as Kt<never> },\n});\n\nexport const KtSidePanel = createComponent({\n  tagName: 'kt-side-panel',\n  elementClass: KtSidePanelElement,\n  react: React,\n  events: { onKtClose: 'kt-close' as Kt<never> },\n});\n\nexport const KtConfirmDialog = createComponent({\n  tagName: 'kt-confirm-dialog',\n  elementClass: KtConfirmDialogElement,\n  react: React,\n  events: {\n    onKtConfirm: 'kt-confirm' as Kt<never>,\n    onKtCancel: 'kt-cancel' as Kt<never>,\n  },\n});\n\n// === DATA ===\nexport const KtChart = createComponent({\n  tagName: 'kt-chart',\n  elementClass: KtChartElement,\n  react: React,\n  events: {\n    onKtPointHover: 'kt-point-hover' as Kt<{ index: number; series: number }>,\n    onKtSeriesToggle: 'kt-series-toggle' as Kt<{ series: number; hidden: boolean }>,\n  },\n});\n\nexport const KtTable = createComponent({\n  tagName: 'kt-table',\n  elementClass: KtTableElement,\n  react: React,\n  events: {\n    onKtSortChange: 'kt-sort-change' as Kt<{\n      key: string | null;\n      direction: 'asc' | 'desc' | null;\n    }>,\n    onKtSelectionChange: 'kt-selection-change' as Kt<{ selected: unknown[] }>,\n    onKtRowClick: 'kt-row-click' as Kt<{ index: number }>,\n    onKtPageChange: 'kt-page-change' as Kt<{ page: number }>,\n  },\n});\n\nexport const KtMeter = createComponent({\n  tagName: 'kt-meter',\n  elementClass: KtMeterElement,\n  react: React,\n});\n\nexport const KtPagination = createComponent({\n  tagName: 'kt-pagination',\n  elementClass: KtPaginationElement,\n  react: React,\n  events: { onKtPageChange: 'kt-page-change' as Kt<{ page: number }> },\n});\n\n// The imperative toaster needs no wrapper.\nexport { toaster } from '../components/feedback/kt-toast-container/toaster.js';\n\nexport const KtStat = createComponent({\n  tagName: 'kt-stat',\n  elementClass: KtStatElement,\n  react: React,\n});\n\nexport const KtTimeline = createComponent({\n  tagName: 'kt-timeline',\n  elementClass: KtTimelineElement,\n  react: React,\n});\n\nexport const KtTimelineItem = createComponent({\n  tagName: 'kt-timeline-item',\n  elementClass: KtTimelineItemElement,\n  react: React,\n});\n"],"names":["KtAvatar","createComponent","KtAvatarElement","React","KtBadge","KtBadgeElement","KtButton","KtButtonElement","KtSplitButton","KtSplitButtonElement","KtCard","KtCardElement","KtCode","KtCodeElement","KtIcon","KtIconElement","KtKbd","KtKbdElement","KtForm","KtFormElement","KtInput","KtInputElement","KtTextarea","KtTextareaElement","KtLabelInput","KtLabelInputElement","KtToggle","KtToggleElement","KtSelect","KtSelectElement","KtInputMenu","KtInputMenuElement","KtDragDrop","KtDragDropElement","KtBreadcrumb","KtBreadcrumbElement","KtSubMenuNavigation","KtSubMenuNavigationElement","KtPageHeader","KtPageHeaderElement","KtSegmentedControl","KtSegmentedControlElement","KtTabs","KtTabsElement","KtHeader","KtHeaderElement","KtToggleButton","KtToggleButtonElement","KtToggleButtonGroup","KtToggleButtonGroupElement","KtAlert","KtAlertElement","KtEmptyState","KtEmptyStateElement","KtProgressBar","KtProgressBarElement","KtSkeleton","KtSkeletonElement","KtTooltip","KtTooltipElement","KtToast","KtToastElement","KtToastContainer","KtToastContainerElement","KtCollapsible","KtCollapsibleElement","KtDropdown","KtDropdownElement","KtModal","KtModalElement","KtSidePanel","KtSidePanelElement","KtConfirmDialog","KtConfirmDialogElement","KtChart","KtChartElement","KtTable","KtTableElement","KtMeter","KtMeterElement","KtPagination","KtPaginationElement","KtStat","KtStatElement","KtTimeline","KtTimelineElement","KtTimelineItem","KtTimelineItemElement"],"mappings":"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"}

package/dist/react/jsx.d.ts

@@ -0,0 +1,213 @@
+/**
+ * JSX typings for the Kanto elements, for React 19.
+ *
+ * React 19 renders custom elements natively: it sets a prop as a property when
+ * the element has one — so `options={regions}` reaches `<kt-select>` as an
+ * array — and a prop named `on` + an event name listens for that event, so
+ * `onkt-change` hears `kt-change`. What it cannot know is which tags exist
+ * and what they take; without this module TypeScript rejects every `kt-*`
+ * tag. It is types only: importing it loads nothing, and it needs no package
+ * beyond React itself.
+ *
+ *     import 'kanto-ds';
+ *     import 'kanto-ds/styles.css';
+ *     import type {} from 'kanto-ds/react/jsx';
+ *
+ *     <kt-select options={regions} onkt-change={(e) => setRegion(e.detail.value)} />
+ *
+ * React 18 cannot do either, which is what the wrappers in `kanto-ds/react`
+ * are for.
+ */
+import type * as React from 'react';
+import type { KtAvatar, KtBadge, KtButton, KtSplitButton, KtCard, KtCode, KtIcon, KtKbd, KtForm, KtInput, KtTextarea, KtLabelInput, KtToggle, KtSelect, KtInputMenu, KtDragDrop, KtBreadcrumb, KtSubMenuNavigation, KtPageHeader, KtSegmentedControl, KtTabs, KtHeader, KtToggleButton, KtToggleButtonGroup, KtAlert, KtEmptyState, KtProgressBar, KtSkeleton, KtTooltip, KtToast, KtToastContainer, KtCollapsible, KtDropdown, KtModal, KtSidePanel, KtConfirmDialog, KtChart, KtTable, KtMeter, KtPagination, KtStat, KtTimeline, KtTimelineItem } from 'kanto-ds';
+/** The `on<event>` props React 19 turns into listeners, typed by their detail. */
+type Handlers<E> = {
+    [K in keyof E & string as `on${K}`]?: (event: CustomEvent<E[K]>) => void;
+};
+/**
+ * What a `kt-*` tag accepts in JSX: its own public properties, the usual
+ * HTML attributes and a typed ref, plus a handler for each event it fires.
+ */
+type KtProps<T extends HTMLElement, E = Record<never, never>> = Partial<Omit<T, keyof HTMLElement>> & React.HTMLAttributes<T> & React.RefAttributes<T> & Handlers<E>;
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'kt-avatar': KtProps<KtAvatar>;
+            'kt-badge': KtProps<KtBadge, {
+                'kt-badge-click': never;
+                'kt-remove': never;
+            }>;
+            'kt-button': KtProps<KtButton>;
+            'kt-split-button': KtProps<KtSplitButton, {
+                'kt-select': {
+                    value: string | number;
+                };
+                'kt-open': never;
+                'kt-close': never;
+            }>;
+            'kt-card': KtProps<KtCard, {
+                'kt-card-click': never;
+            }>;
+            'kt-code': KtProps<KtCode, {
+                'kt-copy': {
+                    code: string;
+                };
+            }>;
+            'kt-icon': KtProps<KtIcon>;
+            'kt-kbd': KtProps<KtKbd>;
+            'kt-form': KtProps<KtForm>;
+            'kt-input': KtProps<KtInput, {
+                'kt-input': {
+                    value: string;
+                };
+                'kt-change': {
+                    value: string;
+                };
+                'kt-clear': never;
+                'kt-country-change': {
+                    country: string;
+                    dialCode: string;
+                };
+            }>;
+            'kt-textarea': KtProps<KtTextarea, {
+                'kt-input': {
+                    value: string;
+                };
+                'kt-change': {
+                    value: string;
+                };
+            }>;
+            'kt-label-input': KtProps<KtLabelInput>;
+            'kt-toggle': KtProps<KtToggle, {
+                'kt-change': {
+                    checked: boolean;
+                };
+            }>;
+            'kt-select': KtProps<KtSelect, {
+                'kt-change': {
+                    value: string | number | null;
+                };
+            }>;
+            'kt-input-menu': KtProps<KtInputMenu, {
+                'kt-change': {
+                    value: string | number | null;
+                };
+                'kt-filter': {
+                    query: string;
+                };
+            }>;
+            'kt-drag-drop': KtProps<KtDragDrop, {
+                'kt-files-change': {
+                    files: File[];
+                };
+                'kt-files-rejected': {
+                    files: File[];
+                    reason: 'type' | 'size';
+                };
+            }>;
+            'kt-breadcrumb': KtProps<KtBreadcrumb, {
+                'kt-navigate': {
+                    index: number;
+                };
+            }>;
+            'kt-sub-menu-navigation': KtProps<KtSubMenuNavigation, {
+                'kt-navigate': unknown;
+            }>;
+            'kt-page-header': KtProps<KtPageHeader>;
+            'kt-segmented-control': KtProps<KtSegmentedControl, {
+                'kt-change': {
+                    value: string | number;
+                };
+            }>;
+            'kt-tabs': KtProps<KtTabs, {
+                'kt-change': {
+                    value: string | number;
+                };
+            }>;
+            'kt-header': KtProps<KtHeader, {
+                'kt-menu-toggle': {
+                    open: boolean;
+                };
+            }>;
+            'kt-toggle-button': KtProps<KtToggleButton, {
+                'kt-change': {
+                    selected: boolean;
+                    value: string;
+                };
+            }>;
+            'kt-toggle-button-group': KtProps<KtToggleButtonGroup, {
+                'kt-change': {
+                    value: string | string[] | null;
+                };
+            }>;
+            'kt-alert': KtProps<KtAlert, {
+                'kt-close': never;
+            }>;
+            'kt-empty-state': KtProps<KtEmptyState>;
+            'kt-progress-bar': KtProps<KtProgressBar>;
+            'kt-skeleton': KtProps<KtSkeleton>;
+            'kt-tooltip': KtProps<KtTooltip>;
+            'kt-toast': KtProps<KtToast, {
+                'kt-toast-close': never;
+            }>;
+            'kt-toast-container': KtProps<KtToastContainer>;
+            'kt-collapsible': KtProps<KtCollapsible, {
+                'kt-toggle': {
+                    open: boolean;
+                };
+            }>;
+            'kt-dropdown': KtProps<KtDropdown, {
+                'kt-select': {
+                    value: string | number;
+                };
+                'kt-open': never;
+                'kt-close': never;
+            }>;
+            'kt-modal': KtProps<KtModal, {
+                'kt-close': never;
+            }>;
+            'kt-side-panel': KtProps<KtSidePanel, {
+                'kt-close': never;
+            }>;
+            'kt-confirm-dialog': KtProps<KtConfirmDialog, {
+                'kt-confirm': never;
+                'kt-cancel': never;
+            }>;
+            'kt-chart': KtProps<KtChart, {
+                'kt-point-hover': {
+                    index: number;
+                    series: number;
+                };
+                'kt-series-toggle': {
+                    series: number;
+                    hidden: boolean;
+                };
+            }>;
+            'kt-table': KtProps<KtTable, {
+                'kt-sort-change': {
+                    key: string | null;
+                    direction: 'asc' | 'desc' | null;
+                };
+                'kt-selection-change': {
+                    selected: unknown[];
+                };
+                'kt-row-click': {
+                    index: number;
+                };
+                'kt-page-change': {
+                    page: number;
+                };
+            }>;
+            'kt-meter': KtProps<KtMeter>;
+            'kt-pagination': KtProps<KtPagination, {
+                'kt-page-change': {
+                    page: number;
+                };
+            }>;
+            'kt-stat': KtProps<KtStat>;
+            'kt-timeline': KtProps<KtTimeline>;
+            'kt-timeline-item': KtProps<KtTimelineItem>;
+        }
+    }
+}
+export {};

package/dist/react/jsx.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=jsx.js.map

package/dist/react/jsx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/tokens/README.md

@@ -50,9 +50,13 @@ Dark is the canonical theme and is what `:root` carries.
 - **Surfaces are a ramp, not a shadow scale.** Elevation means a lighter
   surface: `--color-dark-12` (page) → `--color-dark-16` (card) →
   `--color-dark-20` (raised). The only shadow in the system is on toasts.
-- **Semantic colours come in three variants.** `-base` is opaque, for text and
-  solid fills; `-soft` is the same hue at 12% alpha, for tinted backgrounds;
-  `-hover` is 16%.
+- **Semantic colours come in four variants.** `-base` is opaque, for solid
+  fills; `-soft` is the same hue at 12% alpha, for tinted backgrounds; `-hover`
+  is 16%; `-text` is for text and icons. Never colour text with `-base`: it is
+  tuned to carry white text, which makes it too dark on a dark surface and too
+  light on a light one. Every `-text` holds WCAG AA (4.5:1) on the page, card
+  and raised surfaces and on its own tint. `--color-danger-solid` is the red for a
+  filled destructive button.
 - **Prefer the aliases.** `--surface-card` over `--color-dark-16`,
   `--text-muted` over `--color-text-400`. The aliases survive a change to which
   ramp step a role uses.

package/dist/tokens/colors.css

@@ -8,7 +8,13 @@
  * rather than a shadow scale — in Kanto, elevation means "slightly lighter
  * surface". Semantic colours each ship three variants: `-base` (opaque, for
  * text and solid fills), `-soft` (12% alpha, for tinted backgrounds) and
- * `-hover` (16% alpha).
+ * `-hover` (16% alpha). Each also has a `-text` step for when it colours
+ * text or an icon rather than a fill: base colours are tuned to carry white
+ * text, which makes them too dark for text on a dark surface and too light on
+ * a light one. Every `-text` holds 4.5:1 on the surfaces text sits on — page,
+ * card and raised, up to --color-dark-20 — and on its own soft tint. They are
+ * fitted in OKLCH at the most chroma sRGB allows, so passing does not cost
+ * them their colour.
  */
 
 :root {
@@ -16,15 +22,20 @@
 
   /* === BRAND === */
   --color-white: rgba(244, 244, 245, 1);
-  --color-primary-base: rgba(101, 98, 248, 1);
-  --color-primary-hover: rgba(111, 109, 248, 1);
-  --color-primary-soft: rgba(101, 98, 248, 0.12);
+  /* Dark enough to carry white text at 4.5:1 in both themes — hover steps
+     darker, not lighter, for the same reason. */
+  --color-primary-base: rgba(95, 93, 234, 1);
+  --color-primary-hover: rgba(88, 86, 224, 1);
+  --color-primary-soft: rgba(95, 93, 234, 0.12);
   --color-secondary-hover: rgba(111, 116, 246, 0.16);
 
   /* === SEMANTIC === */
   --color-danger-base: rgba(245, 61, 92, 1);
   --color-danger-hover: rgba(243, 73, 107, 0.16);
   --color-danger-soft: rgba(245, 61, 92, 0.12);
+  /* A solid red that carries white text at 4.5:1, for destructive buttons. */
+  --color-danger-solid: #d62934;
+  --color-danger-solid-hover: #c4242f;
 
   --color-info-base: rgba(53, 175, 243, 1);
   --color-info-hover: rgba(53, 175, 243, 0.16);
@@ -38,9 +49,17 @@
   --color-success-hover: rgba(53, 221, 131, 0.16);
   --color-success-soft: rgba(53, 221, 131, 0.12);
 
+  /* === TEXT STEPS OF THE BRAND AND SEMANTIC COLOURS === */
+  --color-primary-text: #8e97ff;
+  --color-danger-text: #ff727f;
+  --color-info-text: #06b0fc;
+  --color-warning-text: #fca80d;
+  --color-success-text: #01df7e;
+
   /* === TEXT (100 = highest contrast) === */
   --color-text-100: rgba(244, 244, 245, 1);
-  --color-text-400: rgba(145, 145, 161, 1);
+  /* 4.5:1 on every surface up to --color-dark-24, and on the tinted alerts. */
+  --color-text-400: rgba(169, 169, 181, 1);
   --color-text-500: rgba(101, 101, 114, 1);
   --color-text-600: rgba(75, 75, 88, 1);
   --color-text-700: rgba(66, 66, 77, 1);

package/dist/tokens/theme-light.css

@@ -19,6 +19,15 @@
 
   --color-white: rgba(255, 255, 255, 1);
 
+  /* Darker than the base colours, which stay tuned for fills. Success,
+     info and warning turn a few degrees of hue for chroma: a dark enough
+     amber is brown, a dark enough orange is still orange. */
+  --color-primary-text: #4f30ef;
+  --color-danger-text: #b30436;
+  --color-info-text: #0260a2;
+  --color-warning-text: #9e4502;
+  --color-success-text: #026f2a;
+
   --color-text-100: rgba(28, 28, 30, 1);
   --color-text-400: rgba(80, 80, 90, 1);
   --color-text-500: rgba(110, 110, 120, 1);
@@ -88,6 +97,15 @@
 
     --color-white: rgba(255, 255, 255, 1);
 
+    /* Darker than the base colours, which stay tuned for fills. Success,
+       info and warning turn a few degrees of hue for chroma: a dark enough
+       amber is brown, a dark enough orange is still orange. */
+    --color-primary-text: #4f30ef;
+    --color-danger-text: #b30436;
+    --color-info-text: #0260a2;
+    --color-warning-text: #9e4502;
+    --color-success-text: #026f2a;
+
     --color-text-100: rgba(28, 28, 30, 1);
     --color-text-400: rgba(80, 80, 90, 1);
     --color-text-500: rgba(110, 110, 120, 1);

package/dist/vscode.css-custom-data.json

@@ -0,0 +1,154 @@
+{
+  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-css-languageservice/main/docs/customData.schema.json",
+  "version": 1.1,
+  "properties": [
+    {
+      "name": "--kt-badge-color",
+      "description": "Category hue. The fill is this colour at 20%.",
+      "values": []
+    },
+    {
+      "name": "--kt-header-breakpoint",
+      "description": "Where the navigation collapses. 900px.",
+      "values": []
+    },
+    {
+      "name": "--kt-header-height",
+      "description": "Height of the main row. 64px.",
+      "values": []
+    }
+  ],
+  "pseudoElements": [
+    { "name": "::part(base)", "description": "The avatar circle." },
+    {
+      "name": "::part(image)",
+      "description": "The `<img>`, when `src` is set and loads."
+    },
+    { "name": "::part(base)", "description": "The container." },
+    {
+      "name": "::part(remove)",
+      "description": "The remove button, when `removable`."
+    },
+    { "name": "::part(button)", "description": "The native `<button>`." },
+    { "name": "::part(icon)", "description": "The icon, when `icon` is set." },
+    { "name": "::part(base)", "description": "The card container." },
+    { "name": "::part(media)", "description": "The image or media well." },
+    {
+      "name": "::part(body)",
+      "description": "The header/content/footer column."
+    },
+    { "name": "::part(base)", "description": "The container." },
+    { "name": "::part(header)", "description": "The language row." },
+    { "name": "::part(pre)", "description": "The scrolling `<pre>`." },
+    { "name": "::part(svg)", "description": "The `<svg>` root." },
+    { "name": "::part(base)", "description": "The wrapper." },
+    { "name": "::part(key)", "description": "One key." },
+    { "name": "::part(action)", "description": "The primary `<kt-button>`." },
+    {
+      "name": "::part(caret)",
+      "description": "The `<kt-button>` that opens the menu."
+    },
+    { "name": "::part(menu)", "description": "The list of rows." },
+    { "name": "::part(item)", "description": "A menu row." },
+    { "name": "::part(svg)", "description": "The plot." },
+    { "name": "::part(legend)", "description": "The legend." },
+    { "name": "::part(table)", "description": "The data table." },
+    { "name": "::part(base)", "description": "The container." },
+    { "name": "::part(track)", "description": "The bar." },
+    { "name": "::part(legend)", "description": "The legend list." },
+    { "name": "::part(previous)", "description": "The previous button." },
+    { "name": "::part(next)", "description": "The next button." },
+    { "name": "::part(info)", "description": "The \"Page 2 / 7\" text." },
+    { "name": "::part(base)", "description": "The tile." },
+    { "name": "::part(value)", "description": "The figure." },
+    { "name": "::part(table)", "description": "The `<table>`." },
+    { "name": "::part(header-cell)", "description": "A `<th>`." },
+    { "name": "::part(row)", "description": "A `<tr>`." },
+    { "name": "::part(cell)", "description": "A `<td>`." },
+    { "name": "::part(base)", "description": "The list." },
+    { "name": "::part(base)", "description": "The row." },
+    { "name": "::part(marker)", "description": "The dot or icon." },
+    { "name": "::part(base)", "description": "The alert." },
+    { "name": "::part(close)", "description": "The dismiss button." },
+    { "name": "::part(base)", "description": "The container." },
+    { "name": "::part(track)", "description": "The groove." },
+    { "name": "::part(fill)", "description": "The filled portion." },
+    { "name": "::part(base)", "description": "The container." },
+    { "name": "::part(caption)", "description": "The row above the bar." },
+    {
+      "name": "::part(value)",
+      "description": "The percentage, when `show-value` is set."
+    },
+    { "name": "::part(line)", "description": "One placeholder line." },
+    { "name": "::part(base)", "description": "The toast surface." },
+    { "name": "::part(close)", "description": "The dismiss button." },
+    { "name": "::part(bubble)", "description": "The tooltip bubble." },
+    { "name": "::part(base)", "description": "The dashed drop zone." },
+    { "name": "::part(list)", "description": "The list of chosen files." },
+    { "name": "::part(base)", "description": "The `<fieldset>`." },
+    { "name": "::part(header)", "description": "The heading and description." },
+    { "name": "::part(fields)", "description": "The field column." },
+    { "name": "::part(footer)", "description": "The action row." },
+    { "name": "::part(base)", "description": "The field container." },
+    { "name": "::part(control)", "description": "The native `<input>`." },
+    { "name": "::part(actions)", "description": "The trailing icon row." },
+    { "name": "::part(control)", "description": "The field." },
+    { "name": "::part(input)", "description": "The native `<input>`." },
+    { "name": "::part(popup)", "description": "The option list." },
+    { "name": "::part(option)", "description": "An option row." },
+    { "name": "::part(label)", "description": "The `<label>`." },
+    {
+      "name": "::part(trigger)",
+      "description": "The button that opens the list."
+    },
+    { "name": "::part(popup)", "description": "The option list." },
+    { "name": "::part(option)", "description": "An option row." },
+    { "name": "::part(base)", "description": "The field container." },
+    { "name": "::part(control)", "description": "The native `<textarea>`." },
+    { "name": "::part(counter)", "description": "The character counter." },
+    {
+      "name": "::part(base)",
+      "description": "The button carrying `role=\"switch\"`."
+    },
+    { "name": "::part(track)", "description": "The track." },
+    { "name": "::part(thumb)", "description": "The sliding thumb." },
+    { "name": "::part(nav)", "description": "The `<nav>`." },
+    { "name": "::part(item)", "description": "A trail entry." },
+    { "name": "::part(base)", "description": "The `<header>`." },
+    { "name": "::part(bar)", "description": "The main row." },
+    {
+      "name": "::part(bottom)",
+      "description": "The second row. The bar is a three-column grid whose outer columns are equal, so the navigation is centred in the bar rather than in whatever the brand and the actions left over. Set `nav-align=\"start\"` to butt it against the brand instead."
+    },
+    { "name": "::part(base)", "description": "The container." },
+    { "name": "::part(heading)", "description": "The heading element." },
+    { "name": "::part(base)", "description": "The track." },
+    { "name": "::part(option)", "description": "A segment." },
+    { "name": "::part(nav)", "description": "The `<nav>`." },
+    { "name": "::part(section)", "description": "A section." },
+    { "name": "::part(title)", "description": "A section title." },
+    {
+      "name": "::part(item)",
+      "description": "A navigation link or branch button, at any depth."
+    },
+    { "name": "::part(base)", "description": "The tablist." },
+    { "name": "::part(tab)", "description": "One tab." },
+    { "name": "::part(button)", "description": "The native `<button>`." },
+    { "name": "::part(base)", "description": "The group container." },
+    { "name": "::part(base)", "description": "The `<details>`." },
+    { "name": "::part(summary)", "description": "The clickable row." },
+    { "name": "::part(content)", "description": "The revealed panel." },
+    { "name": "::part(dialog)", "description": "The `<dialog>`." },
+    { "name": "::part(actions)", "description": "The button row." },
+    { "name": "::part(trigger)", "description": "The trigger wrapper." },
+    { "name": "::part(panel)", "description": "The floating panel." },
+    { "name": "::part(option)", "description": "A menu row." },
+    { "name": "::part(dialog)", "description": "The `<dialog>`." },
+    { "name": "::part(header)", "description": "The header row." },
+    { "name": "::part(body)", "description": "The scrolling body." },
+    { "name": "::part(footer)", "description": "The action row." },
+    { "name": "::part(dialog)", "description": "The `<dialog>`." },
+    { "name": "::part(header)", "description": "The header row." },
+    { "name": "::part(body)", "description": "The scrolling body." }
+  ]
+}