kanto-ds 1.7.0 → 1.8.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';\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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"}
+{"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';\nimport type { KtCommand } from '../internal/command-search.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 { KtSteps as KtStepsElement } from '../components/navigation/kt-steps/kt-steps.js';\nimport { KtNumberInput as KtNumberInputElement } from '../components/forms/kt-number-input/kt-number-input.js';\nimport { KtSlider as KtSliderElement } from '../components/forms/kt-slider/kt-slider.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 { KtCommandPalette as KtCommandPaletteElement } from '../components/overlays/kt-command-palette/kt-command-palette.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 KtSteps = createComponent({\n  tagName: 'kt-steps',\n  elementClass: KtStepsElement,\n  react: React,\n  events: { onKtChange: 'kt-change' as Kt<{ id: string }> },\n});\n\nexport const KtNumberInput = createComponent({\n  tagName: 'kt-number-input',\n  elementClass: KtNumberInputElement,\n  react: React,\n  events: { onKtChange: 'kt-change' as Kt<{ value: number | null }> },\n});\n\nexport const KtSlider = createComponent({\n  tagName: 'kt-slider',\n  elementClass: KtSliderElement,\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 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 KtCommandPalette = createComponent({\n  tagName: 'kt-command-palette',\n  elementClass: KtCommandPaletteElement,\n  react: React,\n  events: {\n    onKtSelect: 'kt-select' as Kt<{ id: string; command: KtCommand }>,\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","KtSteps","KtStepsElement","KtNumberInput","KtNumberInputElement","KtSlider","KtSliderElement","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","KtCommandPalette","KtCommandPaletteElement","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, 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';
+import type { KtAvatar, KtBadge, KtButton, KtSplitButton, KtCard, KtCode, KtIcon, KtKbd, KtForm, KtInput, KtTextarea, KtSlider, KtNumberInput, KtSteps, 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, KtCommandPalette, KtCommand, 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;
@@ -69,6 +69,24 @@ declare module 'react' {
                     dialCode: string;
                 };
             }>;
+            'kt-steps': KtProps<KtSteps, {
+                'kt-change': {
+                    id: string;
+                };
+            }>;
+            'kt-number-input': KtProps<KtNumberInput, {
+                'kt-change': {
+                    value: number | null;
+                };
+            }>;
+            'kt-slider': KtProps<KtSlider, {
+                'kt-input': {
+                    value: string;
+                };
+                'kt-change': {
+                    value: string;
+                };
+            }>;
             'kt-textarea': KtProps<KtTextarea, {
                 'kt-input': {
                     value: string;
@@ -206,6 +224,14 @@ declare module 'react' {
             'kt-modal': KtProps<KtModal, {
                 'kt-close': never;
             }>;
+            'kt-command-palette': KtProps<KtCommandPalette, {
+                'kt-select': {
+                    id: string;
+                    command: KtCommand;
+                };
+                'kt-open': never;
+                'kt-close': never;
+            }>;
             'kt-side-panel': KtProps<KtSidePanel, {
                 'kt-close': never;
             }>;

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-TWJzttLX.js";
+import { d as r, s as a, r as e, a as g } from "../chunks/index-BEWmAE0T.js";
 export {
   r as defaultStrings,
   a as getStrings,

package/dist/tokens/base.css

@@ -95,6 +95,7 @@ pre {
   kt-checkbox,
   kt-code,
   kt-collapsible,
+  kt-command-palette,
   kt-confirm-dialog,
   kt-date-input,
   kt-date-picker,
@@ -111,6 +112,7 @@ pre {
   kt-label-input,
   kt-meter,
   kt-modal,
+  kt-number-input,
   kt-page-header,
   kt-pagination,
   kt-progress-bar,
@@ -120,6 +122,8 @@ pre {
   kt-select,
   kt-side-panel,
   kt-skeleton,
+  kt-slider,
+  kt-steps,
   kt-split-button,
   kt-stat,
   kt-sub-menu-navigation,

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

@@ -141,6 +141,10 @@
     { "name": "::part(input)", "description": "The native `<input>`." },
     { "name": "::part(popup)", "description": "The option list." },
     { "name": "::part(option)", "description": "An option row." },
+    { "name": "::part(field)", "description": "The field." },
+    { "name": "::part(input)", "description": "The text field." },
+    { "name": "::part(decrease)", "description": "The − button." },
+    { "name": "::part(increase)", "description": "The + button." },
     { "name": "::part(base)", "description": "The `role=\"radio\"` row." },
     { "name": "::part(circle)", "description": "The drawn circle." },
     {
@@ -153,6 +157,12 @@
     },
     { "name": "::part(popup)", "description": "The option list." },
     { "name": "::part(option)", "description": "An option row." },
+    { "name": "::part(track)", "description": "The rail." },
+    { "name": "::part(fill)", "description": "The selected stretch of it." },
+    {
+      "name": "::part(value)",
+      "description": "The shown value, with `show-value`."
+    },
     { "name": "::part(base)", "description": "The field container." },
     { "name": "::part(control)", "description": "The native `<textarea>`." },
     { "name": "::part(counter)", "description": "The character counter." },
@@ -161,14 +171,14 @@
       "name": "::part(segment)",
       "description": "An hour, minute, second or AM/PM segment."
     },
+    { "name": "::part(nav)", "description": "The `<nav>`." },
+    { "name": "::part(item)", "description": "A trail entry." },
     {
       "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." },
     {
@@ -179,6 +189,16 @@
     { "name": "::part(heading)", "description": "The heading element." },
     { "name": "::part(base)", "description": "The track." },
     { "name": "::part(option)", "description": "A segment." },
+    { "name": "::part(list)", "description": "The `<ol>`." },
+    { "name": "::part(step)", "description": "A step." },
+    {
+      "name": "::part(marker)",
+      "description": "A step's number, tick or alert."
+    },
+    {
+      "name": "::part(connector)",
+      "description": "The line from a step to the next."
+    },
     { "name": "::part(nav)", "description": "The `<nav>`." },
     { "name": "::part(section)", "description": "A section." },
     { "name": "::part(title)", "description": "A section title." },
@@ -194,6 +214,10 @@
     { "name": "::part(summary)", "description": "The clickable row." },
     { "name": "::part(content)", "description": "The revealed panel." },
     { "name": "::part(dialog)", "description": "The `<dialog>`." },
+    { "name": "::part(input)", "description": "The search field." },
+    { "name": "::part(list)", "description": "The scrolling list." },
+    { "name": "::part(footer)", "description": "The keyboard hints." },
+    { "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." },

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

@@ -983,6 +983,41 @@
       ],
       "references": []
     },
+    {
+      "name": "kt-number-input",
+      "description": "A number field with − and + beside it: a quantity, a seat count, an amount.\n\nType a number the way your language writes one — \"1 234,5\" in French — or\nstep it with the buttons, the arrows (Page Up and Down by ten steps, Home\nand End to the bounds). It is kept within `min` and `max` and on `step`\nwhen the field is left. At rest it reads as the locale writes it, through\n`formatOptions` — a currency, a percentage, a unit.\n---\n\n\n### **Events:**\n - **kt-change** - The value changed. `detail: { value }`, a number or null.\n\n### **CSS Parts:**\n - **field** - The field.\n- **input** - The text field.\n- **decrease** - The − button.\n- **increase** - The + button.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The number, or null while empty. An attribute that is no number reads as empty.",
+          "values": []
+        },
+        { "name": "min", "values": [] },
+        { "name": "max", "values": [] },
+        { "name": "step", "values": [] },
+        { "name": "name", "values": [] },
+        {
+          "name": "label",
+          "description": "Accessible name, when no `<kt-label-input>` wraps it.",
+          "values": []
+        },
+        {
+          "name": "locale",
+          "description": "BCP 47 locale for reading and writing numbers. Empty: page, then browser.",
+          "values": []
+        },
+        { "name": "placeholder", "values": [] },
+        { "name": "size", "values": [{ "name": "KtNumberInputSize" }] },
+        { "name": "disabled", "values": [] },
+        { "name": "required", "values": [] },
+        {
+          "name": "error",
+          "description": "Error message. A non-empty value puts the field in its error state.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "kt-radio",
       "description": "One option of a `<kt-radio-group>`.\n\nIt draws itself and carries `role=\"radio\"`; the group owns the selection,\nthe tab stop and the keyboard. A `<kt-radio>` outside a group does nothing\nuseful.\n---\n\n\n### **Slots:**\n - _default_ - The label.\n\n### **CSS Parts:**\n - **base** - The `role=\"radio\"` row.\n- **circle** - The drawn circle.",
@@ -1073,6 +1108,38 @@
       ],
       "references": []
     },
+    {
+      "name": "kt-slider",
+      "description": "A value picked by sliding along a range: a volume, a threshold, or with\n`range`, a price between two ends.\n\nEach thumb is a native `<input type=\"range\">`, so the keyboard — arrows,\nPage Up and Down, Home and End — and what a screen reader announces come\nfrom the platform. The value is text, like a form field's: `\"40\"`, or\n`\"20/80\"` with `range`, low then high. It is kept within `min` and `max`\nand on `step`, and two thumbs never cross.\n---\n\n\n### **Events:**\n - **kt-input** - While sliding. `detail: { value }`.\n- **kt-change** - Once let go. `detail: { value }`.\n\n### **CSS Parts:**\n - **track** - The rail.\n- **fill** - The selected stretch of it.\n- **value** - The shown value, with `show-value`.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "`\"40\"`, or `\"20/80\"` with `range`. Kept within bounds and on the step.",
+          "values": []
+        },
+        { "name": "min", "values": [] },
+        { "name": "max", "values": [] },
+        { "name": "step", "values": [] },
+        {
+          "name": "range",
+          "description": "Two thumbs: a low and a high end.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "Accessible name; shown above the slider with `show-value`.",
+          "values": []
+        },
+        { "name": "name", "values": [] },
+        { "name": "disabled", "values": [] },
+        {
+          "name": "show-value",
+          "description": "Shows the label and the current value above the slider.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "kt-textarea",
       "description": "A multi-line text field, with the same borderless fill and outline states as\n`<kt-input>`.\n\nA character counter appears whenever `maxlength` is set — the field tells\nthe user where the limit is before the browser silently stops accepting\nkeystrokes.\n---\n\n\n### **Events:**\n - **kt-input** - On every keystroke. `detail: { value }`.\n- **kt-change** - When the value is committed. `detail: { value }`.\n\n### **Methods:**\n - **formDisabledCallback(disabled: _boolean_): _void_** - Called by the platform when the control's disabled state changes — its\nown `disabled`, or an ancestor `<fieldset disabled>` it cannot see.\n\n### **CSS Parts:**\n - **base** - The field container.\n- **control** - The native `<textarea>`.\n- **counter** - The character counter.",
@@ -1125,6 +1192,18 @@
       ],
       "references": []
     },
+    {
+      "name": "kt-breadcrumb",
+      "description": "A trail showing where the current page sits.\n\nThe last entry is the current page: rendered as text, not a link, and marked\n`aria-current=\"page\"`. A breadcrumb whose final item links to the page you\nare already on is a dead control.\n---\n\n\n### **Events:**\n - **kt-navigate** - An entry was activated. `detail: { item, index }`. Cancel it to keep the browser from following the href.\n\n### **CSS Parts:**\n - **nav** - The `<nav>`.\n- **item** - A trail entry.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "Accessible name for the navigation landmark.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "kt-toggle",
       "description": "An on/off switch.\n\nSized off the button heights so a toggle lines up with the controls beside\nit: the track is 1.8× the field height, the thumb is inset by 12% of it.\nChange `--button-height` and the switch follows.\n---\n\n\n### **Events:**\n - **kt-change** - The state changed. `detail: { checked }`.\n\n### **Methods:**\n - **formDisabledCallback(disabled: _boolean_): _void_** - Called by the platform when the control's disabled state changes — its\nown `disabled`, or an ancestor `<fieldset disabled>` it cannot see.\n\n### **Slots:**\n - _default_ - Optional label, rendered beside the switch and clickable.\n\n### **CSS Parts:**\n - **base** - The button carrying `role=\"switch\"`.\n- **track** - The track.\n- **thumb** - The sliding thumb.",
@@ -1146,18 +1225,6 @@
       ],
       "references": []
     },
-    {
-      "name": "kt-breadcrumb",
-      "description": "A trail showing where the current page sits.\n\nThe last entry is the current page: rendered as text, not a link, and marked\n`aria-current=\"page\"`. A breadcrumb whose final item links to the page you\nare already on is a dead control.\n---\n\n\n### **Events:**\n - **kt-navigate** - An entry was activated. `detail: { item, index }`. Cancel it to keep the browser from following the href.\n\n### **CSS Parts:**\n - **nav** - The `<nav>`.\n- **item** - A trail entry.",
-      "attributes": [
-        {
-          "name": "label",
-          "description": "Accessible name for the navigation landmark.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "kt-header",
       "description": "The application header: a banner landmark holding the brand, the primary\nnavigation and a row of actions.\n\nBelow `--kt-header-breakpoint` (900px by default) the navigation collapses\nbehind a menu button and reappears as a panel under the bar. That threshold\nis a token rather than a hard-coded media query, because how much navigation\nfits depends on how much navigation you put in.\n---\n\n\n### **Events:**\n - **kt-menu-toggle** - The mobile menu opened or closed. `detail: { open }`.\n\n### **Methods:**\n - **closeMenu(): _void_** - Closes the collapsed navigation — call it after routing.\n\n### **Slots:**\n - **brand** - Logo or wordmark, at the start.\n- _default_ - Primary navigation, in the middle.\n- **actions** - Buttons and links, at the end. Stays visible on mobile.\n- **menu** - What the menu button reveals below the breakpoint. Separate from the default slot because a node can only be assigned to one slot; put a compact copy of the navigation here.\n- **bottom** - A second row under the bar — sub-navigation, a breadcrumb.\n\n### **CSS Properties:**\n - **--kt-header-breakpoint** - Where the navigation collapses. 900px. _(default: undefined)_\n- **--kt-header-height** - Height of the main row. 64px. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The `<header>`.\n- **bar** - The main row.\n- **bottom** - 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.",
@@ -1221,6 +1288,29 @@
       ],
       "references": []
     },
+    {
+      "name": "kt-steps",
+      "description": "The steps of a flow — sign-up, checkout, onboarding — and where the reader\nis in it.\n\nSteps before `current` are complete, `current` is current, the rest are to\ncome — all of them, while `current` names no step; a step with `error` shows as needing attention wherever it is. With\n`navigable`, a completed step is a button that goes back to it; going\nforward is the flow's job, not the stepper's.\n\nAn ordered list: the number is the step's place, `aria-current=\"step\"`\nmarks the current one, and each state is said in words, not only shown.\n---\n\n\n### **Events:**\n - **kt-change** - A completed step was picked, with `navigable`. `detail: { id }`.\n\n### **CSS Parts:**\n - **list** - The `<ol>`.\n- **step** - A step.\n- **marker** - A step's number, tick or alert.\n- **connector** - The line from a step to the next.",
+      "attributes": [
+        {
+          "name": "current",
+          "description": "The id of the step the reader is on.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "Accessible name of the list: what the flow is.",
+          "values": []
+        },
+        { "name": "orientation", "values": [{ "name": "KtStepsOrientation" }] },
+        {
+          "name": "navigable",
+          "description": "Completed steps become buttons that go back to them.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "kt-sub-menu-navigation",
       "description": "The sidebar navigation: uppercase overline section titles over lists of\nlinks, to any depth.\n\nThe recursion is the point. Every product grows a third level eventually —\nSettings holds Members holds Roles — and the usual answer is to hand-roll\nthat one branch beside the component, which is how two navigation styles end\nup on one screen. Here a branch renders exactly like the level above it,\nindented by depth, and a branch containing the current page opens itself.\n---\n\n\n### **Events:**\n - **kt-navigate** - A link was activated. `detail: { item }`. Cancel it to keep the browser from following the href, for client-side routing.\n- **kt-toggle** - A branch opened or closed. `detail: { item, open }`.\n\n### **CSS Parts:**\n - **nav** - The `<nav>`.\n- **section** - A section.\n- **title** - A section title.\n- **item** - A navigation link or branch button, at any depth.",
@@ -1328,6 +1418,24 @@
       ],
       "references": []
     },
+    {
+      "name": "kt-command-palette",
+      "description": "The palette a product opens on Cmd+K: every action and page, a few\nkeystrokes away.\n\nGive it `commands`; it lists them under their groups, narrows them as you\ntype — every word, in any order, in the label, a keyword or the group,\nignoring case and accents — and runs the one you pick with `kt-select`.\nCmd+K or Ctrl+K opens and closes it from anywhere on the page; `hotkey`\nchanges the key or, empty, turns it off.\n\nBuilt on the native `<dialog>`: the top layer, focus containment and the\ninert page come from the platform. The field is a combobox over a listbox,\nso a screen reader follows the active command as the arrows move.\n---\n\n\n### **Events:**\n - **kt-select** - A command was run. `detail: { id, command }`.\n- **kt-open** - It opened.\n- **kt-close** - It closed.\n\n### **CSS Parts:**\n - **dialog** - The `<dialog>`.\n- **input** - The search field.\n- **list** - The scrolling list.\n- **footer** - The keyboard hints.",
+      "attributes": [
+        { "name": "open", "values": [] },
+        {
+          "name": "placeholder",
+          "description": "Placeholder of the search field. Defaults to the translated string.",
+          "values": []
+        },
+        {
+          "name": "hotkey",
+          "description": "The key that opens it with Cmd or Ctrl, from anywhere on the page. Empty\nturns the shortcut off — for a page with two palettes, or its own key.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "kt-confirm-dialog",
       "description": "A centred yes/no overlay, for an action worth stopping to think about.\n\nConfirmations are for destructive or irreversible work. Editing belongs in a\n`<kt-side-panel>`, which does not block the page behind it.\n\n`role=\"alertdialog\"` and the cancel button takes focus on open, so a stray\nEnter dismisses rather than confirms.\n---\n\n\n### **Events:**\n - **kt-confirm** - The confirm button was pressed.\n- **kt-cancel** - Dismissed, by button, Escape or backdrop.\n\n### **Slots:**\n - _default_ - Extra content between the message and the buttons.\n\n### **CSS Parts:**\n - **dialog** - The `<dialog>`.\n- **actions** - The button row.",

package/dist/vue/index.d.ts

@@ -53,6 +53,9 @@ import type { KtTimeInput } from 'kanto-ds';
 import type { KtRadioGroup } from 'kanto-ds';
 import type { KtRadio } from 'kanto-ds';
 import type { KtTextarea } from 'kanto-ds';
+import type { KtSlider } from 'kanto-ds';
+import type { KtNumberInput } from 'kanto-ds';
+import type { KtSteps } from 'kanto-ds';
 import type { KtToggle } from 'kanto-ds';
 import type { KtBreadcrumb } from 'kanto-ds';
 import type { KtPageHeader } from 'kanto-ds';
@@ -73,6 +76,7 @@ import type { KtCollapsible } from 'kanto-ds';
 import type { KtConfirmDialog } from 'kanto-ds';
 import type { KtDropdown } from 'kanto-ds';
 import type { KtModal } from 'kanto-ds';
+import type { KtCommandPalette } from 'kanto-ds';
 import type { KtSidePanel } from 'kanto-ds';
 import type { KtChart } from 'kanto-ds';
 import type { KtMeter } from 'kanto-ds';
@@ -122,6 +126,9 @@ declare module 'vue' {
         'kt-radio-group': KtProps<KtRadioGroup>;
         'kt-radio': KtProps<KtRadio>;
         'kt-textarea': KtProps<KtTextarea>;
+        'kt-slider': KtProps<KtSlider>;
+        'kt-number-input': KtProps<KtNumberInput>;
+        'kt-steps': KtProps<KtSteps>;
         'kt-toggle': KtProps<KtToggle>;
         'kt-breadcrumb': KtProps<KtBreadcrumb>;
         'kt-page-header': KtProps<KtPageHeader>;
@@ -142,6 +149,7 @@ declare module 'vue' {
         'kt-confirm-dialog': KtProps<KtConfirmDialog>;
         'kt-dropdown': KtProps<KtDropdown>;
         'kt-modal': KtProps<KtModal>;
+        'kt-command-palette': KtProps<KtCommandPalette>;
         'kt-side-panel': KtProps<KtSidePanel>;
         'kt-chart': KtProps<KtChart>;
         'kt-meter': KtProps<KtMeter>;

package/dist/vue/index.js

@@ -7,7 +7,7 @@ import "../components/core/kt-code/kt-code.js";
 import "../components/core/kt-icon/kt-icon.js";
 import "../components/core/kt-kbd/kt-kbd.js";
 import "../components/forms/kt-checkbox/kt-checkbox.js";
-import "../chunks/kt-calendar-CtwOby1R.js";
+import "../chunks/kt-calendar-D72xa8qr.js";
 import "../components/forms/kt-date-input/kt-date-input.js";
 import "../components/forms/kt-date-picker/kt-date-picker.js";
 import "../components/forms/kt-drag-drop/kt-drag-drop.js";
@@ -19,6 +19,8 @@ import "../components/forms/kt-label-input/kt-label-input.js";
 import "../components/forms/kt-radio-group/kt-radio-group.js";
 import "../components/forms/kt-select/kt-select.js";
 import "../components/forms/kt-textarea/kt-textarea.js";
+import "../components/forms/kt-slider/kt-slider.js";
+import "../components/forms/kt-number-input/kt-number-input.js";
 import "../components/forms/kt-time-input/kt-time-input.js";
 import "../components/forms/kt-toggle/kt-toggle.js";
 import "../components/navigation/kt-breadcrumb/kt-breadcrumb.js";
@@ -26,6 +28,7 @@ import "../components/navigation/kt-page-header/kt-page-header.js";
 import "../components/navigation/kt-segmented-control/kt-segmented-control.js";
 import "../components/navigation/kt-sub-menu-navigation/kt-sub-menu-navigation.js";
 import "../components/navigation/kt-tabs/kt-tabs.js";
+import "../components/navigation/kt-steps/kt-steps.js";
 import "../components/navigation/kt-header/kt-header.js";
 import "../components/navigation/kt-toggle-button/kt-toggle-button.js";
 import "../components/navigation/kt-toggle-button-group/kt-toggle-button-group.js";
@@ -35,12 +38,13 @@ import "../components/feedback/kt-progress-bar/kt-progress-bar.js";
 import "../components/feedback/kt-skeleton/kt-skeleton.js";
 import "../components/feedback/kt-toast/kt-toast.js";
 import "../components/feedback/kt-toast-container/kt-toast-container.js";
-import { t as ot } from "../chunks/toaster-PmdKSV5x.js";
+import { t as pt } from "../chunks/toaster-PmdKSV5x.js";
 import "../components/feedback/kt-tooltip/kt-tooltip.js";
 import "../components/overlays/kt-collapsible/kt-collapsible.js";
 import "../components/overlays/kt-confirm-dialog/kt-confirm-dialog.js";
 import "../components/overlays/kt-dropdown/kt-dropdown.js";
 import "../components/overlays/kt-modal/kt-modal.js";
+import "../components/overlays/kt-command-palette/kt-command-palette.js";
 import "../components/overlays/kt-side-panel/kt-side-panel.js";
 import "../components/data/kt-chart/kt-chart.js";
 import "../components/data/kt-meter/kt-meter.js";
@@ -48,17 +52,17 @@ import "../components/data/kt-pagination/kt-pagination.js";
 import "../components/data/kt-stat/kt-stat.js";
 import "../components/data/kt-table/kt-table.js";
 import "../components/data/kt-timeline/kt-timeline.js";
-function V(t) {
+function tt(t) {
   return t.startsWith("kt-");
 }
-const Y = "kt-", Z = {
+const ot = "kt-", rt = {
   install() {
   }
 };
 export {
-  Y as KANTO_TAG_PREFIX,
-  V as isKantoElement,
-  Z as kanto,
-  ot as toaster
+  ot as KANTO_TAG_PREFIX,
+  tt as isKantoElement,
+  rt as kanto,
+  pt as toaster
 };
 //# sourceMappingURL=index.js.map

package/dist/vue/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/vue/index.ts"],"sourcesContent":["/**\n * Vue integration for the Kanto elements.\n *\n * There are no per-component wrappers here, and that is the point. Vue 3\n * renders custom elements natively and sets non-primitive bindings as DOM\n * properties, so `<kt-select :options=\"regions\">` already works. A wrapper\n * layer would only be one more thing to keep in sync.\n *\n * What Vue cannot infer on its own is which tags are custom elements, and what\n * they accept. That is what this module supplies.\n *\n * ```ts\n * // vite.config.ts\n * import vue from '@vitejs/plugin-vue';\n * import { isKantoElement } from 'kanto-ds/vue';\n *\n * export default defineConfig({\n *   plugins: [vue({ template: { compilerOptions: { isCustomElement: isKantoElement } } })],\n * });\n * ```\n *\n * ```ts\n * // main.ts\n * import 'kanto-ds/vue'; // registers every element\n * import 'kanto-ds/styles.css';\n * ```\n *\n * Vue is a peer dependency: importing this module in a project without Vue\n * still works, since nothing here is imported from `vue` at runtime.\n */\n// Type-only, so nothing from Vue is pulled in at runtime — but the import is\n// what lets TypeScript resolve the module we augment below.\nimport type { Plugin } from 'vue';\n\nimport '../index.js';\n\nimport type { KtAvatar } from 'kanto-ds';\nimport type { KtBadge } from 'kanto-ds';\nimport type { KtButton } from 'kanto-ds';\nimport type { KtSplitButton } from 'kanto-ds';\nimport type { KtCard } from 'kanto-ds';\nimport type { KtCode } from 'kanto-ds';\nimport type { KtIcon } from 'kanto-ds';\nimport type { KtKbd } from 'kanto-ds';\nimport type { KtDragDrop } from 'kanto-ds';\nimport type { KtForm } from 'kanto-ds';\nimport type { KtInput } from 'kanto-ds';\nimport type { KtInputMenu } from 'kanto-ds';\nimport type { KtMultiSelect } from 'kanto-ds';\nimport type { KtLabelInput } from 'kanto-ds';\nimport type { KtSelect } from 'kanto-ds';\nimport type { KtCheckbox } from 'kanto-ds';\nimport type { KtCalendar } from 'kanto-ds';\nimport type { KtDateInput } from 'kanto-ds';\nimport type { KtDatePicker } from 'kanto-ds';\nimport type { KtTimeInput } from 'kanto-ds';\nimport type { KtRadioGroup } from 'kanto-ds';\nimport type { KtRadio } from 'kanto-ds';\nimport type { KtTextarea } from 'kanto-ds';\nimport type { KtToggle } from 'kanto-ds';\nimport type { KtBreadcrumb } from 'kanto-ds';\nimport type { KtPageHeader } from 'kanto-ds';\nimport type { KtSegmentedControl } from 'kanto-ds';\nimport type { KtSubMenuNavigation } from 'kanto-ds';\nimport type { KtTabs } from 'kanto-ds';\nimport type { KtHeader } from 'kanto-ds';\nimport type { KtToggleButton } from 'kanto-ds';\nimport type { KtToggleButtonGroup } from 'kanto-ds';\nimport type { KtAlert } from 'kanto-ds';\nimport type { KtEmptyState } from 'kanto-ds';\nimport type { KtProgressBar } from 'kanto-ds';\nimport type { KtSkeleton } from 'kanto-ds';\nimport type { KtToast } from 'kanto-ds';\nimport type { KtToastContainer } from 'kanto-ds';\nimport type { KtTooltip } from 'kanto-ds';\nimport type { KtCollapsible } from 'kanto-ds';\nimport type { KtConfirmDialog } from 'kanto-ds';\nimport type { KtDropdown } from 'kanto-ds';\nimport type { KtModal } from 'kanto-ds';\nimport type { KtSidePanel } from 'kanto-ds';\nimport type { KtChart } from 'kanto-ds';\nimport type { KtMeter } from 'kanto-ds';\nimport type { KtPagination } from 'kanto-ds';\nimport type { KtStat } from 'kanto-ds';\nimport type { KtTable } from 'kanto-ds';\nimport type { KtTimeline, KtTimelineItem } from 'kanto-ds';\n\n/**\n * True for any Kanto custom element.\n *\n * Pass it as `compilerOptions.isCustomElement` so the Vue compiler stops\n * trying to resolve `kt-*` tags as components.\n */\nexport function isKantoElement(tag: string): boolean {\n  return tag.startsWith('kt-');\n}\n\n/** Every element's tag name, for anyone building their own predicate. */\nexport const KANTO_TAG_PREFIX = 'kt-';\n\n/**\n * What a Kanto element accepts in a template: its own properties, plus the\n * attributes and listeners any element takes.\n */\ntype KtProps<T> = Partial<T> &\n  Record<`on${string}`, unknown> & { class?: unknown; style?: unknown };\n\ndeclare module 'vue' {\n  interface GlobalComponents {\n    'kt-avatar': KtProps<KtAvatar>;\n    'kt-badge': KtProps<KtBadge>;\n    'kt-button': KtProps<KtButton>;\n    'kt-split-button': KtProps<KtSplitButton>;\n    'kt-card': KtProps<KtCard>;\n    'kt-code': KtProps<KtCode>;\n    'kt-icon': KtProps<KtIcon>;\n    'kt-kbd': KtProps<KtKbd>;\n    'kt-drag-drop': KtProps<KtDragDrop>;\n    'kt-form': KtProps<KtForm>;\n    'kt-input': KtProps<KtInput>;\n    'kt-input-menu': KtProps<KtInputMenu>;\n    'kt-multi-select': KtProps<KtMultiSelect>;\n    'kt-label-input': KtProps<KtLabelInput>;\n    'kt-select': KtProps<KtSelect>;\n    'kt-checkbox': KtProps<KtCheckbox>;\n    'kt-calendar': KtProps<KtCalendar>;\n    'kt-date-input': KtProps<KtDateInput>;\n    'kt-date-picker': KtProps<KtDatePicker>;\n    'kt-time-input': KtProps<KtTimeInput>;\n    'kt-radio-group': KtProps<KtRadioGroup>;\n    'kt-radio': KtProps<KtRadio>;\n    'kt-textarea': KtProps<KtTextarea>;\n    'kt-toggle': KtProps<KtToggle>;\n    'kt-breadcrumb': KtProps<KtBreadcrumb>;\n    'kt-page-header': KtProps<KtPageHeader>;\n    'kt-segmented-control': KtProps<KtSegmentedControl>;\n    'kt-sub-menu-navigation': KtProps<KtSubMenuNavigation>;\n    'kt-tabs': KtProps<KtTabs>;\n    'kt-header': KtProps<KtHeader>;\n    'kt-toggle-button': KtProps<KtToggleButton>;\n    'kt-toggle-button-group': KtProps<KtToggleButtonGroup>;\n    'kt-alert': KtProps<KtAlert>;\n    'kt-empty-state': KtProps<KtEmptyState>;\n    'kt-progress-bar': KtProps<KtProgressBar>;\n    'kt-skeleton': KtProps<KtSkeleton>;\n    'kt-toast': KtProps<KtToast>;\n    'kt-toast-container': KtProps<KtToastContainer>;\n    'kt-tooltip': KtProps<KtTooltip>;\n    'kt-collapsible': KtProps<KtCollapsible>;\n    'kt-confirm-dialog': KtProps<KtConfirmDialog>;\n    'kt-dropdown': KtProps<KtDropdown>;\n    'kt-modal': KtProps<KtModal>;\n    'kt-side-panel': KtProps<KtSidePanel>;\n    'kt-chart': KtProps<KtChart>;\n    'kt-meter': KtProps<KtMeter>;\n    'kt-pagination': KtProps<KtPagination>;\n    'kt-stat': KtProps<KtStat>;\n    'kt-table': KtProps<KtTable>;\n    'kt-timeline': KtProps<KtTimeline>;\n    'kt-timeline-item': KtProps<KtTimelineItem>;\n  }\n}\n\n/**\n * A no-op plugin, for apps that would rather write `app.use(kanto)` than a\n * bare side-effect import. Importing this module already registers every\n * element; this only makes that visible in `main.ts`.\n */\nexport const kanto: Plugin = {\n  install() {\n    /* the elements register themselves on import */\n  },\n};\n\nexport { toaster } from '../components/feedback/kt-toast-container/toaster.js';\n"],"names":["isKantoElement","tag","KANTO_TAG_PREFIX","kanto"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6FO,SAASA,EAAeC,GAAsB;AACnD,SAAOA,EAAI,WAAW,KAAK;AAC7B;AAGO,MAAMC,IAAmB,OAsEnBC,IAAgB;AAAA,EAC3B,UAAU;AAAA,EAEV;AACF;"}
+{"version":3,"file":"index.js","sources":["../../src/vue/index.ts"],"sourcesContent":["/**\n * Vue integration for the Kanto elements.\n *\n * There are no per-component wrappers here, and that is the point. Vue 3\n * renders custom elements natively and sets non-primitive bindings as DOM\n * properties, so `<kt-select :options=\"regions\">` already works. A wrapper\n * layer would only be one more thing to keep in sync.\n *\n * What Vue cannot infer on its own is which tags are custom elements, and what\n * they accept. That is what this module supplies.\n *\n * ```ts\n * // vite.config.ts\n * import vue from '@vitejs/plugin-vue';\n * import { isKantoElement } from 'kanto-ds/vue';\n *\n * export default defineConfig({\n *   plugins: [vue({ template: { compilerOptions: { isCustomElement: isKantoElement } } })],\n * });\n * ```\n *\n * ```ts\n * // main.ts\n * import 'kanto-ds/vue'; // registers every element\n * import 'kanto-ds/styles.css';\n * ```\n *\n * Vue is a peer dependency: importing this module in a project without Vue\n * still works, since nothing here is imported from `vue` at runtime.\n */\n// Type-only, so nothing from Vue is pulled in at runtime — but the import is\n// what lets TypeScript resolve the module we augment below.\nimport type { Plugin } from 'vue';\n\nimport '../index.js';\n\nimport type { KtAvatar } from 'kanto-ds';\nimport type { KtBadge } from 'kanto-ds';\nimport type { KtButton } from 'kanto-ds';\nimport type { KtSplitButton } from 'kanto-ds';\nimport type { KtCard } from 'kanto-ds';\nimport type { KtCode } from 'kanto-ds';\nimport type { KtIcon } from 'kanto-ds';\nimport type { KtKbd } from 'kanto-ds';\nimport type { KtDragDrop } from 'kanto-ds';\nimport type { KtForm } from 'kanto-ds';\nimport type { KtInput } from 'kanto-ds';\nimport type { KtInputMenu } from 'kanto-ds';\nimport type { KtMultiSelect } from 'kanto-ds';\nimport type { KtLabelInput } from 'kanto-ds';\nimport type { KtSelect } from 'kanto-ds';\nimport type { KtCheckbox } from 'kanto-ds';\nimport type { KtCalendar } from 'kanto-ds';\nimport type { KtDateInput } from 'kanto-ds';\nimport type { KtDatePicker } from 'kanto-ds';\nimport type { KtTimeInput } from 'kanto-ds';\nimport type { KtRadioGroup } from 'kanto-ds';\nimport type { KtRadio } from 'kanto-ds';\nimport type { KtTextarea } from 'kanto-ds';\nimport type { KtSlider } from 'kanto-ds';\nimport type { KtNumberInput } from 'kanto-ds';\nimport type { KtSteps } from 'kanto-ds';\nimport type { KtToggle } from 'kanto-ds';\nimport type { KtBreadcrumb } from 'kanto-ds';\nimport type { KtPageHeader } from 'kanto-ds';\nimport type { KtSegmentedControl } from 'kanto-ds';\nimport type { KtSubMenuNavigation } from 'kanto-ds';\nimport type { KtTabs } from 'kanto-ds';\nimport type { KtHeader } from 'kanto-ds';\nimport type { KtToggleButton } from 'kanto-ds';\nimport type { KtToggleButtonGroup } from 'kanto-ds';\nimport type { KtAlert } from 'kanto-ds';\nimport type { KtEmptyState } from 'kanto-ds';\nimport type { KtProgressBar } from 'kanto-ds';\nimport type { KtSkeleton } from 'kanto-ds';\nimport type { KtToast } from 'kanto-ds';\nimport type { KtToastContainer } from 'kanto-ds';\nimport type { KtTooltip } from 'kanto-ds';\nimport type { KtCollapsible } from 'kanto-ds';\nimport type { KtConfirmDialog } from 'kanto-ds';\nimport type { KtDropdown } from 'kanto-ds';\nimport type { KtModal } from 'kanto-ds';\nimport type { KtCommandPalette } from 'kanto-ds';\nimport type { KtSidePanel } from 'kanto-ds';\nimport type { KtChart } from 'kanto-ds';\nimport type { KtMeter } from 'kanto-ds';\nimport type { KtPagination } from 'kanto-ds';\nimport type { KtStat } from 'kanto-ds';\nimport type { KtTable } from 'kanto-ds';\nimport type { KtTimeline, KtTimelineItem } from 'kanto-ds';\n\n/**\n * True for any Kanto custom element.\n *\n * Pass it as `compilerOptions.isCustomElement` so the Vue compiler stops\n * trying to resolve `kt-*` tags as components.\n */\nexport function isKantoElement(tag: string): boolean {\n  return tag.startsWith('kt-');\n}\n\n/** Every element's tag name, for anyone building their own predicate. */\nexport const KANTO_TAG_PREFIX = 'kt-';\n\n/**\n * What a Kanto element accepts in a template: its own properties, plus the\n * attributes and listeners any element takes.\n */\ntype KtProps<T> = Partial<T> &\n  Record<`on${string}`, unknown> & { class?: unknown; style?: unknown };\n\ndeclare module 'vue' {\n  interface GlobalComponents {\n    'kt-avatar': KtProps<KtAvatar>;\n    'kt-badge': KtProps<KtBadge>;\n    'kt-button': KtProps<KtButton>;\n    'kt-split-button': KtProps<KtSplitButton>;\n    'kt-card': KtProps<KtCard>;\n    'kt-code': KtProps<KtCode>;\n    'kt-icon': KtProps<KtIcon>;\n    'kt-kbd': KtProps<KtKbd>;\n    'kt-drag-drop': KtProps<KtDragDrop>;\n    'kt-form': KtProps<KtForm>;\n    'kt-input': KtProps<KtInput>;\n    'kt-input-menu': KtProps<KtInputMenu>;\n    'kt-multi-select': KtProps<KtMultiSelect>;\n    'kt-label-input': KtProps<KtLabelInput>;\n    'kt-select': KtProps<KtSelect>;\n    'kt-checkbox': KtProps<KtCheckbox>;\n    'kt-calendar': KtProps<KtCalendar>;\n    'kt-date-input': KtProps<KtDateInput>;\n    'kt-date-picker': KtProps<KtDatePicker>;\n    'kt-time-input': KtProps<KtTimeInput>;\n    'kt-radio-group': KtProps<KtRadioGroup>;\n    'kt-radio': KtProps<KtRadio>;\n    'kt-textarea': KtProps<KtTextarea>;\n    'kt-slider': KtProps<KtSlider>;\n    'kt-number-input': KtProps<KtNumberInput>;\n    'kt-steps': KtProps<KtSteps>;\n    'kt-toggle': KtProps<KtToggle>;\n    'kt-breadcrumb': KtProps<KtBreadcrumb>;\n    'kt-page-header': KtProps<KtPageHeader>;\n    'kt-segmented-control': KtProps<KtSegmentedControl>;\n    'kt-sub-menu-navigation': KtProps<KtSubMenuNavigation>;\n    'kt-tabs': KtProps<KtTabs>;\n    'kt-header': KtProps<KtHeader>;\n    'kt-toggle-button': KtProps<KtToggleButton>;\n    'kt-toggle-button-group': KtProps<KtToggleButtonGroup>;\n    'kt-alert': KtProps<KtAlert>;\n    'kt-empty-state': KtProps<KtEmptyState>;\n    'kt-progress-bar': KtProps<KtProgressBar>;\n    'kt-skeleton': KtProps<KtSkeleton>;\n    'kt-toast': KtProps<KtToast>;\n    'kt-toast-container': KtProps<KtToastContainer>;\n    'kt-tooltip': KtProps<KtTooltip>;\n    'kt-collapsible': KtProps<KtCollapsible>;\n    'kt-confirm-dialog': KtProps<KtConfirmDialog>;\n    'kt-dropdown': KtProps<KtDropdown>;\n    'kt-modal': KtProps<KtModal>;\n    'kt-command-palette': KtProps<KtCommandPalette>;\n    'kt-side-panel': KtProps<KtSidePanel>;\n    'kt-chart': KtProps<KtChart>;\n    'kt-meter': KtProps<KtMeter>;\n    'kt-pagination': KtProps<KtPagination>;\n    'kt-stat': KtProps<KtStat>;\n    'kt-table': KtProps<KtTable>;\n    'kt-timeline': KtProps<KtTimeline>;\n    'kt-timeline-item': KtProps<KtTimelineItem>;\n  }\n}\n\n/**\n * A no-op plugin, for apps that would rather write `app.use(kanto)` than a\n * bare side-effect import. Importing this module already registers every\n * element; this only makes that visible in `main.ts`.\n */\nexport const kanto: Plugin = {\n  install() {\n    /* the elements register themselves on import */\n  },\n};\n\nexport { toaster } from '../components/feedback/kt-toast-container/toaster.js';\n"],"names":["isKantoElement","tag","KANTO_TAG_PREFIX","kanto"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiGO,SAASA,GAAeC,GAAsB;AACnD,SAAOA,EAAI,WAAW,KAAK;AAC7B;AAGO,MAAMC,KAAmB,OA0EnBC,KAAgB;AAAA,EAC3B,UAAU;AAAA,EAEV;AACF;"}