kanto-ds 1.5.2 → 1.6.0

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 — 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 { KtCheckbox as KtCheckboxElement } from '../components/forms/kt-checkbox/kt-checkbox.js';\nimport { KtCalendar as KtCalendarElement } from '../components/forms/kt-calendar/kt-calendar.js';\nimport { KtDatePicker as KtDatePickerElement } from '../components/forms/kt-date-picker/kt-date-picker.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 {\n  KtRadio as KtRadioElement,\n  KtRadioGroup as KtRadioGroupElement,\n} from '../components/forms/kt-radio-group/kt-radio-group.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 KtCalendar = createComponent({\n  tagName: 'kt-calendar',\n  elementClass: KtCalendarElement,\n  react: React,\n  events: { onKtChange: 'kt-change' as Kt<{ value: string }> },\n});\n\nexport const KtDatePicker = createComponent({\n  tagName: 'kt-date-picker',\n  elementClass: KtDatePickerElement,\n  react: React,\n  events: { onKtChange: 'kt-change' as Kt<{ value: string | null }> },\n});\n\nexport const KtCheckbox = createComponent({\n  tagName: 'kt-checkbox',\n  elementClass: KtCheckboxElement,\n  react: React,\n  events: { onKtChange: 'kt-change' as Kt<{ checked: boolean }> },\n});\n\nexport const KtRadioGroup = createComponent({\n  tagName: 'kt-radio-group',\n  elementClass: KtRadioGroupElement,\n  react: React,\n  events: { onKtChange: 'kt-change' as Kt<{ value: string | null }> },\n});\n\nexport const KtRadio = createComponent({\n  tagName: 'kt-radio',\n  elementClass: KtRadioElement,\n  react: React,\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","KtCalendar","KtCalendarElement","KtDatePicker","KtDatePickerElement","KtCheckbox","KtCheckboxElement","KtRadioGroup","KtRadioGroupElement","KtRadio","KtRadioElement","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';\nimport type { KtOption } from '../internal/listbox.js';\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 { KtCheckbox as KtCheckboxElement } from '../components/forms/kt-checkbox/kt-checkbox.js';\nimport { KtCalendar as KtCalendarElement } from '../components/forms/kt-calendar/kt-calendar.js';\nimport { KtDateInput as KtDateInputElement } from '../components/forms/kt-date-input/kt-date-input.js';\nimport { KtDatePicker as KtDatePickerElement } from '../components/forms/kt-date-picker/kt-date-picker.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 { KtMultiSelect as KtMultiSelectElement } from '../components/forms/kt-multi-select/kt-multi-select.js';\nimport { KtLabelInput as KtLabelInputElement } from '../components/forms/kt-label-input/kt-label-input.js';\nimport {\n  KtRadio as KtRadioElement,\n  KtRadioGroup as KtRadioGroupElement,\n} from '../components/forms/kt-radio-group/kt-radio-group.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 { KtTimeInput as KtTimeInputElement } from '../components/forms/kt-time-input/kt-time-input.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 KtCalendar = createComponent({\n  tagName: 'kt-calendar',\n  elementClass: KtCalendarElement,\n  react: React,\n  events: { onKtChange: 'kt-change' as Kt<{ value: string }> },\n});\n\nexport const KtDateInput = createComponent({\n  tagName: 'kt-date-input',\n  elementClass: KtDateInputElement,\n  react: React,\n  events: { onKtChange: 'kt-change' as Kt<{ value: string | null }> },\n});\n\nexport const KtTimeInput = createComponent({\n  tagName: 'kt-time-input',\n  elementClass: KtTimeInputElement,\n  react: React,\n  events: { onKtChange: 'kt-change' as Kt<{ value: string | null }> },\n});\n\nexport const KtDatePicker = createComponent({\n  tagName: 'kt-date-picker',\n  elementClass: KtDatePickerElement,\n  react: React,\n  events: { onKtChange: 'kt-change' as Kt<{ value: string | null }> },\n});\n\nexport const KtCheckbox = createComponent({\n  tagName: 'kt-checkbox',\n  elementClass: KtCheckboxElement,\n  react: React,\n  events: { onKtChange: 'kt-change' as Kt<{ checked: boolean }> },\n});\n\nexport const KtRadioGroup = createComponent({\n  tagName: 'kt-radio-group',\n  elementClass: KtRadioGroupElement,\n  react: React,\n  events: { onKtChange: 'kt-change' as Kt<{ value: string | null }> },\n});\n\nexport const KtRadio = createComponent({\n  tagName: 'kt-radio',\n  elementClass: KtRadioElement,\n  react: React,\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 KtMultiSelect = createComponent({\n  tagName: 'kt-multi-select',\n  elementClass: KtMultiSelectElement,\n  react: React,\n  events: {\n    onKtChange: 'kt-change' as Kt<{ value: (string | number)[]; options: KtOption[] }>,\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","KtCalendar","KtCalendarElement","KtDateInput","KtDateInputElement","KtTimeInput","KtTimeInputElement","KtDatePicker","KtDatePickerElement","KtCheckbox","KtCheckboxElement","KtRadioGroup","KtRadioGroupElement","KtRadio","KtRadioElement","KtSelect","KtSelectElement","KtInputMenu","KtInputMenuElement","KtMultiSelect","KtMultiSelectElement","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

@@ -19,7 +19,7 @@
  * are for.
  */
 import type * as React from 'react';
-import type { KtAvatar, KtBadge, KtButton, KtSplitButton, KtCard, KtCode, KtIcon, KtKbd, KtForm, KtInput, KtTextarea, KtLabelInput, KtToggle, KtSelect, KtCheckbox, KtCalendar, KtDatePicker, KtRadioGroup, KtRadio, 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';
+import type { KtAvatar, KtBadge, KtButton, KtSplitButton, KtCard, KtCode, KtIcon, KtKbd, KtForm, KtInput, KtTextarea, KtLabelInput, KtToggle, KtSelect, KtCheckbox, KtCalendar, KtDateInput, KtDatePicker, KtTimeInput, KtRadioGroup, KtRadio, KtInputMenu, KtMultiSelect, KtOption, 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;
@@ -88,6 +88,16 @@ declare module 'react' {
                     value: string;
                 };
             }>;
+            'kt-date-input': KtProps<KtDateInput, {
+                'kt-change': {
+                    value: string | null;
+                };
+            }>;
+            'kt-time-input': KtProps<KtTimeInput, {
+                'kt-change': {
+                    value: string | null;
+                };
+            }>;
             'kt-date-picker': KtProps<KtDatePicker, {
                 'kt-change': {
                     value: string | null;
@@ -117,6 +127,15 @@ declare module 'react' {
                     query: string;
                 };
             }>;
+            'kt-multi-select': KtProps<KtMultiSelect, {
+                'kt-change': {
+                    value: (string | number)[];
+                    options: KtOption[];
+                };
+                'kt-filter': {
+                    query: string;
+                };
+            }>;
             'kt-drag-drop': KtProps<KtDragDrop, {
                 'kt-files-change': {
                     files: File[];

package/dist/strings/index.js

@@ -1,4 +1,4 @@
-import { d as r, s as a, r as e, a as g } from "../chunks/index-STEEvEP7.js";
+import { d as r, s as a, r as e, a as g } from "../chunks/index-TWJzttLX.js";
 export {
   r as defaultStrings,
   a as getStrings,

package/dist/theme/accent.d.ts

@@ -0,0 +1,51 @@
+/**
+ * The accent colour: one colour in, every input the token layer reads out,
+ * each at the contrast Kanto promises.
+ *
+ * Self-contained on purpose — no imports — so `scripts/generate-accents.js`
+ * runs it straight from source under Node.
+ */
+/** An sRGB colour, each channel 0–255. */
+export type KtRgb = readonly [number, number, number];
+/** The WCAG contrast ratio of two colours. */
+export declare function contrastRatio(a: KtRgb, b: KtRgb): number;
+/** Reads `#rgb`, `#rrggbb`, `rgb()`/`rgba()` and `oklch()`; throws on anything else. */
+export declare function parseColor(input: string): KtRgb;
+/** What the token layer reads for an accent. */
+export interface KtAccentPalette {
+    /** Solid fill; carries white text at 4.5:1 or more. */
+    readonly base: string;
+    /** Fill on hover, a step darker. */
+    readonly hover: string;
+    /** The accent as text or an icon in the dark theme. */
+    readonly textDark: string;
+    /** The accent as text or an icon in the light theme. */
+    readonly textLight: string;
+    /** The translucent wash behind secondary buttons on hover: the fill at 16%. */
+    readonly wash: string;
+    /** The hue, in degrees, the neutral ramp is tinted with. */
+    readonly neutralHue: number;
+    /** How much of the ramp's tint to keep: 0 for a grey accent, 1 for a vivid one. */
+    readonly neutralChroma: number;
+}
+/** The violet Kanto ships, as literal values: what the tokens fall back to. */
+export declare const KT_DEFAULT_ACCENT: KtAccentPalette;
+/** The presets `accents.css` carries, each from a reference colour. */
+export declare const KT_ACCENTS: readonly {
+    id: string;
+    label: string;
+    color: string;
+}[];
+/** Every token input for `color`, solved in OKLCH for the contrast Kanto promises. */
+export declare function accentPalette(color: string): KtAccentPalette;
+/** The custom properties a palette sets — what `accents.css` and `setAccent` write. */
+export declare function accentProperties(palette: KtAccentPalette): Record<string, string>;
+/**
+ * Themes `root` — the page by default — with any colour; `null` takes it off,
+ * back to the `data-accent` preset or the default.
+ *
+ * The inputs go on as inline custom properties. The element also needs a
+ * `data-accent` attribute for the token layer to re-read them there: a preset
+ * already on it is kept, otherwise it gets `data-accent="custom"`.
+ */
+export declare function setAccent(color: string | null, root?: HTMLElement): void;

package/dist/theme/appearance.d.ts

@@ -0,0 +1,37 @@
+export type KtTheme = 'dark' | 'light' | 'auto';
+export type KtFont = 'kanto' | 'system' | 'inter' | 'plex' | 'geist';
+export type KtRadius = 'sharp' | 'default' | 'round';
+export type KtDensity = 'compact' | 'default' | 'comfortable';
+export type KtTextSize = 'small' | 'default' | 'large';
+/** Every setting is optional: setAppearance changes only those given. */
+export interface KtAppearance {
+    theme?: KtTheme;
+    /** A preset id from `KT_ACCENTS`, or any colour `setAccent` reads. */
+    accent?: string;
+    font?: KtFont;
+    radius?: KtRadius;
+    density?: KtDensity;
+    textSize?: KtTextSize;
+}
+interface KtChoice<T extends string> {
+    readonly id: T;
+    readonly label: string;
+}
+export declare const KT_THEMES: readonly KtChoice<KtTheme>[];
+/** The fonts, each with the stack it sets — for showing a name in its face. */
+export declare const KT_FONTS: readonly (KtChoice<KtFont> & {
+    readonly family: string;
+})[];
+export declare const KT_RADII: readonly KtChoice<KtRadius>[];
+export declare const KT_DENSITIES: readonly KtChoice<KtDensity>[];
+export declare const KT_TEXT_SIZES: readonly KtChoice<KtTextSize>[];
+export declare const KT_DEFAULT_APPEARANCE: Required<KtAppearance>;
+/**
+ * Applies `appearance` to `root` — the page by default. A setting at its
+ * default removes its attribute. Everything is checked first, so an unknown
+ * value throws a TypeError with nothing changed.
+ */
+export declare function setAppearance(appearance: KtAppearance, root?: HTMLElement): void;
+/** The appearance `root` shows: its attributes, with defaults for the rest. */
+export declare function readAppearance(root?: HTMLElement): Required<KtAppearance>;
+export {};

package/dist/tokens/README.md

@@ -45,11 +45,110 @@ Dark is the canonical theme and is what `:root` carries.
 </html>
 ```
 
+## Accent colour
+
+Kanto ships violet. Seven presets are a data attribute away, on the page or on
+any container:
+
+```html
+<html data-accent="blue"></html>
+```
+
+`violet` · `blue` · `teal` · `green` · `orange` · `pink` · `slate`
+
+Any other colour goes through `setAccent`, which solves the variants for it:
+
+```js
+import { setAccent } from 'kanto-ds';
+
+setAccent('#e11d48'); // the page
+setAccent('#e11d48', panel); // one container
+setAccent(null); // back to the preset or the default
+```
+
+Whatever the colour, white text reads on a primary fill at 4.5:1 or more, and
+the accent as text reads at 4.5:1 or more on the surfaces, on its own tint and on the hover wash of a secondary button,
+in both themes. A bright colour — a yellow, a light orange — is darkened for
+it, as Kanto's own violet is. The neutral surfaces take a trace of the accent's
+hue; a grey accent gives plain greys.
+
+`accentPalette(color)` returns the values without applying them — to write
+them into a stylesheet at build time, for instance. The inputs it sets are
+`--accent-base`, `--accent-hover`, `--accent-text-dark`, `--accent-text-light`,
+`--accent-wash`, `--neutral-hue` and `--neutral-chroma`; components never read
+them, only the tokens do.
+
+A red or a green accent sits close to the danger and success colours; Kanto
+does not stop you, but a primary button and a destructive one will look
+alike.
+
+## Appearance
+
+Besides the accent, four settings change how Kanto looks. Each is a data
+attribute, on the page or on any container:
+
+```html
+<html data-font="inter" data-radius="round" data-density="compact" data-text-size="large"></html>
+```
+
+| Attribute        | Values                                          |
+| ---------------- | ----------------------------------------------- |
+| `data-font`      | `kanto` · `system` · `inter` · `plex` · `geist` |
+| `data-radius`    | `sharp` · `default` · `round`                   |
+| `data-density`   | `compact` · `default` · `comfortable`           |
+| `data-text-size` | `small` · `default` · `large`                   |
+| `data-theme`     | `dark` · `light` · `auto`                       |
+
+Or all at once, with the accent:
+
+```js
+import { setAppearance, readAppearance } from 'kanto-ds';
+
+setAppearance({ theme: 'auto', accent: 'teal', font: 'inter', density: 'compact' });
+readAppearance(); // { theme: 'auto', accent: 'teal', font: 'inter', radius: 'default', … }
+```
+
+`setAppearance` changes only the settings it is given, and checks them all
+first: an unknown value throws and changes nothing.
+
+Density scales the heights of controls and fields — a button is 34px in
+`compact`, 46px in `comfortable`, on even pixels — the padding and gap
+tokens, and table cells. Text size scales every type token and table text.
+Both compose with the mobile and ultra-wide scales. A few inner sizes —
+calendar cells, the small segmented control — keep their own.
+
+The rounding of heights uses CSS `round()` where the browser has it (Chrome
+125, Firefox 118, Safari 15.4); before that, heights keep their exact
+fraction and nothing else changes.
+
+Kanto ships its own faces only. With `inter`, `plex` or `geist`, load the font
+yourself (Google Fonts has all three); without it, the system face shows.
+
+The inputs behind the attributes are `--radius-scale`, `--density-scale`,
+`--text-scale`, `--font-body` and `--font-display`. Set in CSS, they need one
+of the attributes on the same element for the tokens to re-read them there;
+`--font-body` and `--font-display` take a full font stack, the scales a plain
+number.
+
+An element carrying one of these attributes re-declares Kanto's spacing and
+type tokens from these inputs, so an app that overrides a token itself —
+`:root { --button-height: 36px }` — repeats the override for that element, or
+overrides the input instead. The same goes for colour tokens under
+`data-accent`.
+
 ## Conventions
 
 - **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.
+  `--color-dark-20` (raised). Shadows are kept for what floats over the page:
+  toasts, and popovers in the light theme.
+- **Popovers have their own surface.** Lists, menus and calendars that open
+  over the page use `--surface-popover`, `--border-popover`,
+  `--shadow-popover` and, for lines inside them, `--divider-popover`. In the
+  dark the ramp sets them apart alone — a lighter surface, no edge, no shadow.
+  In the light a darker step reads as a grey smudge and fades what sits on it,
+  and white alone is lost on a near-white page: white, then, with an edge and a
+  soft shadow.
 - **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

package/dist/tokens/accents.css

@@ -0,0 +1,80 @@
+/**
+ * Accent presets — generated by scripts/generate-accents.js; do not edit.
+ *
+ * Set one on the page or on any container:
+ *
+ *     <html data-accent="blue">
+ *
+ * Each block sets the inputs colors.css reads. Violet is Kanto's default,
+ * spelled out so it can reset a container inside another accent.
+ */
+
+[data-accent='violet'] {
+  --accent-base: #5f5dea;
+  --accent-hover: #5856e0;
+  --accent-text-dark: #8e97ff;
+  --accent-text-light: #4f30ef;
+  --accent-wash: rgba(111, 116, 246, 0.16);
+  --neutral-hue: 278;
+  --neutral-chroma: 1;
+}
+
+[data-accent='blue'] {
+  --accent-base: #1668e3;
+  --accent-hover: #0960db;
+  --accent-text-dark: #6aa3ff;
+  --accent-text-light: #004eba;
+  --accent-wash: rgba(22, 104, 227, 0.16);
+  --neutral-hue: 259.7;
+  --neutral-chroma: 1;
+}
+
+[data-accent='teal'] {
+  --accent-base: #007c72;
+  --accent-hover: #00746a;
+  --accent-text-dark: #42b5a8;
+  --accent-text-light: #005f57;
+  --accent-wash: rgba(0, 124, 114, 0.16);
+  --neutral-hue: 184.7;
+  --neutral-chroma: 1;
+}
+
+[data-accent='green'] {
+  --accent-base: #007f36;
+  --accent-hover: #007732;
+  --accent-text-dark: #3bba60;
+  --accent-text-light: #006328;
+  --accent-wash: rgba(0, 127, 54, 0.16);
+  --neutral-hue: 149.2;
+  --neutral-chroma: 1;
+}
+
+[data-accent='orange'] {
+  --accent-base: #c14500;
+  --accent-hover: #b54000;
+  --accent-text-dark: #ff7c48;
+  --accent-text-light: #953300;
+  --accent-wash: rgba(193, 69, 0, 0.16);
+  --neutral-hue: 41.1;
+  --neutral-chroma: 1;
+}
+
+[data-accent='pink'] {
+  --accent-base: #d21970;
+  --accent-hover: #c90369;
+  --accent-text-dark: #ff6da1;
+  --accent-text-light: #a30053;
+  --accent-wash: rgba(210, 25, 112, 0.16);
+  --neutral-hue: 0.6;
+  --neutral-chroma: 1;
+}
+
+[data-accent='slate'] {
+  --accent-base: #607086;
+  --accent-hover: #59687f;
+  --accent-text-dark: #95a6bf;
+  --accent-text-light: #48576d;
+  --accent-wash: rgba(96, 112, 134, 0.16);
+  --neutral-hue: 257.4;
+  --neutral-chroma: 0.51;
+}

package/dist/tokens/appearance.css

@@ -0,0 +1,65 @@
+/**
+ * Appearance presets: the font, corners, density and text size, each a data
+ * attribute on the page or any container.
+ *
+ *     <html data-font="inter" data-radius="round" data-density="compact">
+ *
+ * Each sets an input the token layer reads; the tokens re-declare themselves
+ * on any element carrying one of these attributes, so a container can differ
+ * from the page. Kanto ships its own fonts only: an app choosing Inter, IBM
+ * Plex Sans or Geist loads the face itself, or the system stack shows.
+ */
+
+[data-radius='sharp'] {
+  --radius-scale: 0.25;
+}
+[data-radius='round'] {
+  --radius-scale: 1.75;
+}
+
+[data-density='compact'] {
+  --density-scale: 0.85;
+}
+[data-density='comfortable'] {
+  --density-scale: 1.15;
+}
+
+[data-text-size='small'] {
+  --text-scale: 0.93;
+}
+[data-text-size='large'] {
+  --text-scale: 1.125;
+}
+
+[data-font='system'] {
+  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --font-display: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+}
+[data-font='inter'] {
+  --font-body: 'Inter', system-ui, sans-serif;
+  --font-display: 'Inter', system-ui, sans-serif;
+}
+[data-font='plex'] {
+  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
+  --font-display: 'IBM Plex Sans', system-ui, sans-serif;
+}
+[data-font='geist'] {
+  --font-body: 'Geist', system-ui, sans-serif;
+  --font-display: 'Geist', system-ui, sans-serif;
+}
+
+/* The defaults, spelled out so a container can go back to them inside one
+   that changed them — each resetting its own scale only. */
+[data-radius='default'] {
+  --radius-scale: 1;
+}
+[data-density='default'] {
+  --density-scale: 1;
+}
+[data-text-size='default'] {
+  --text-scale: 1;
+}
+[data-font='kanto'] {
+  --font-body: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --font-display: 'Manrope', 'Segoe UI', system-ui, sans-serif;
+}

package/dist/tokens/base.css

@@ -96,6 +96,7 @@ pre {
   kt-code,
   kt-collapsible,
   kt-confirm-dialog,
+  kt-date-input,
   kt-date-picker,
   kt-drag-drop,
   kt-dropdown,
@@ -105,6 +106,7 @@ pre {
   kt-icon,
   kt-input,
   kt-input-menu,
+  kt-multi-select,
   kt-kbd,
   kt-label-input,
   kt-meter,
@@ -124,6 +126,7 @@ pre {
   kt-table,
   kt-tabs,
   kt-textarea,
+  kt-time-input,
   kt-timeline,
   kt-timeline-item,
   kt-toast,