kanto-ds 1.3.0 → 1.4.0

package/dist/tokens/base.css

@@ -91,6 +91,7 @@ pre {
   kt-button,
   kt-card,
   kt-chart,
+  kt-checkbox,
   kt-code,
   kt-collapsible,
   kt-confirm-dialog,
@@ -109,6 +110,8 @@ pre {
   kt-page-header,
   kt-pagination,
   kt-progress-bar,
+  kt-radio,
+  kt-radio-group,
   kt-segmented-control,
   kt-select,
   kt-side-panel,

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

@@ -83,6 +83,12 @@
     { "name": "::part(base)", "description": "The toast surface." },
     { "name": "::part(close)", "description": "The dismiss button." },
     { "name": "::part(bubble)", "description": "The tooltip bubble." },
+    {
+      "name": "::part(base)",
+      "description": "The `<label>` around box and text."
+    },
+    { "name": "::part(input)", "description": "The native checkbox." },
+    { "name": "::part(box)", "description": "The drawn box." },
     { "name": "::part(base)", "description": "The dashed drop zone." },
     { "name": "::part(list)", "description": "The list of chosen files." },
     { "name": "::part(base)", "description": "The `<fieldset>`." },
@@ -97,6 +103,12 @@
     { "name": "::part(popup)", "description": "The option list." },
     { "name": "::part(option)", "description": "An option row." },
     { "name": "::part(label)", "description": "The `<label>`." },
+    { "name": "::part(base)", "description": "The `role=\"radio\"` row." },
+    { "name": "::part(circle)", "description": "The drawn circle." },
+    {
+      "name": "::part(base)",
+      "description": "The `role=\"radiogroup\"` container."
+    },
     {
       "name": "::part(trigger)",
       "description": "The button that opens the list."

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

@@ -631,6 +631,38 @@
       ],
       "references": []
     },
+    {
+      "name": "kt-checkbox",
+      "description": "A checkbox: a choice that applies when the form is submitted.\n\nBuilt on a real `<input type=\"checkbox\">`, laid invisibly over the drawn\nbox, so the keyboard, the label click, the indeterminate state and what a\nscreen reader announces all come from the platform rather than a\nreimplementation of it.\n\nFor a setting that takes effect the moment it is flipped, use\n`<kt-toggle>`; for one choice among several, `<kt-radio-group>`.\n---\n\n\n### **Events:**\n - **kt-change** - The box was checked or unchecked. `detail: { checked }`.\n\n### **Slots:**\n - _default_ - The label, clickable.\n\n### **CSS Parts:**\n - **base** - The `<label>` around box and text.\n- **input** - The native checkbox.\n- **box** - The drawn box.",
+      "attributes": [
+        { "name": "checked", "values": [] },
+        {
+          "name": "indeterminate",
+          "description": "Neither checked nor unchecked — for a \"select all\" over a partial\nselection. Cleared as soon as the user clicks, as on a native checkbox.",
+          "values": []
+        },
+        { "name": "disabled", "values": [] },
+        { "name": "required", "values": [] },
+        { "name": "size", "values": [{ "name": "KtCheckboxSize" }] },
+        { "name": "name", "values": [] },
+        {
+          "name": "value",
+          "description": "Submitted when checked, as for a native checkbox.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "Accessible name, when nothing is slotted.",
+          "values": []
+        },
+        {
+          "name": "error",
+          "description": "Error message. A non-empty value puts the box in its error state.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "kt-drag-drop",
       "description": "A file drop zone.\n\nAccepts a drop or a click, lists what was picked with sizes and types, and\nlets each entry be removed. It holds the files in memory and reports them —\nuploading is the application's business.\n---\n\n\n### **Events:**\n - **kt-files-change** - The selection changed. `detail: { files }`.\n- **kt-files-rejected** - Files were refused. `detail: { files, reason }`.\n\n### **Methods:**\n - **clear(): _void_** - Empties the selection without firing a rejection.\n\n### **CSS Parts:**\n - **base** - The dashed drop zone.\n- **list** - The list of chosen files.",
@@ -781,6 +813,59 @@
       ],
       "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.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "Submitted by the group when this option is chosen.",
+          "values": []
+        },
+        { "name": "disabled", "values": [] },
+        { "name": "checked", "description": "Set by the group.", "values": [] },
+        {
+          "name": "invalid",
+          "description": "Set by the group while it reports an error.",
+          "values": []
+        },
+        {
+          "name": "group-disabled",
+          "description": "Set by the group while the whole group is disabled.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "kt-radio-group",
+      "description": "One choice among a few, all visible at once.\n\nReach for it over `<kt-select>` when there are few enough options to show\nthem all — seeing every option is the point — and over\n`<kt-segmented-control>` when the options need a sentence each, or the\nchoice belongs in a form rather than a toolbar.\n\nNative radios cannot form a group across shadow roots, so this is the ARIA\nradio group pattern: one tab stop for the whole group, arrow keys move and\nselect, disabled options are skipped.\n---\n\n\n### **Events:**\n - **kt-change** - An option was chosen. `detail: { value }`.\n\n### **Slots:**\n - _default_ - The `<kt-radio>` options.\n\n### **CSS Parts:**\n - **base** - The `role=\"radiogroup\"` container.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The chosen option's value, or `null`.",
+          "values": []
+        },
+        { "name": "name", "values": [] },
+        {
+          "name": "label",
+          "description": "Accessible name of the group.",
+          "values": []
+        },
+        { "name": "disabled", "values": [] },
+        { "name": "required", "values": [] },
+        {
+          "name": "orientation",
+          "values": [{ "name": "KtRadioGroupOrientation" }]
+        },
+        {
+          "name": "error",
+          "description": "Error message. A non-empty value puts the group in its error state.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "kt-select",
       "description": "A single-choice dropdown.\n\nUnlike the trigger-plus-div it replaces, this is a real listbox: arrow keys\nmove an active descendant, Home and End jump to the ends, Enter commits,\nEscape closes without changing anything, and disabled options are skipped\nrather than merely unclickable.\n---\n\n\n### **Events:**\n - **kt-change** - An option was chosen or cleared. `detail: { value, option }`.\n\n### **CSS Parts:**\n - **trigger** - The button that opens the list.\n- **popup** - The option list.\n- **option** - An option row.",

package/dist/vue/index.d.ts

@@ -44,6 +44,9 @@ import type { KtInput } from 'kanto-ds';
 import type { KtInputMenu } from 'kanto-ds';
 import type { KtLabelInput } from 'kanto-ds';
 import type { KtSelect } from 'kanto-ds';
+import type { KtCheckbox } from 'kanto-ds';
+import type { KtRadioGroup } from 'kanto-ds';
+import type { KtRadio } from 'kanto-ds';
 import type { KtTextarea } from 'kanto-ds';
 import type { KtToggle } from 'kanto-ds';
 import type { KtBreadcrumb } from 'kanto-ds';
@@ -105,6 +108,9 @@ declare module 'vue' {
         'kt-input-menu': KtProps<KtInputMenu>;
         'kt-label-input': KtProps<KtLabelInput>;
         'kt-select': KtProps<KtSelect>;
+        'kt-checkbox': KtProps<KtCheckbox>;
+        'kt-radio-group': KtProps<KtRadioGroup>;
+        'kt-radio': KtProps<KtRadio>;
         'kt-textarea': KtProps<KtTextarea>;
         'kt-toggle': KtProps<KtToggle>;
         'kt-breadcrumb': KtProps<KtBreadcrumb>;

package/dist/vue/index.js

@@ -6,11 +6,13 @@ import "../components/core/kt-card/kt-card.js";
 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 "../components/forms/kt-drag-drop/kt-drag-drop.js";
 import "../components/forms/kt-form/kt-form.js";
 import "../components/forms/kt-input/kt-input.js";
 import "../components/forms/kt-input-menu/kt-input-menu.js";
 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-toggle/kt-toggle.js";
@@ -28,7 +30,7 @@ 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 S } from "../chunks/toaster-PmdKSV5x.js";
+import { t as V } 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";
@@ -41,17 +43,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 H(t) {
+function L(t) {
   return t.startsWith("kt-");
 }
-const J = "kt-", L = {
+const M = "kt-", Q = {
   install() {
   }
 };
 export {
-  J as KANTO_TAG_PREFIX,
-  H as isKantoElement,
-  L as kanto,
-  S as toaster
+  M as KANTO_TAG_PREFIX,
+  L as isKantoElement,
+  Q as kanto,
+  V 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 { KtLabelInput } from 'kanto-ds';\nimport type { KtSelect } 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-label-input': KtProps<KtLabelInput>;\n    'kt-select': KtProps<KtSelect>;\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqFO,SAASA,EAAeC,GAAsB;AACnD,SAAOA,EAAI,WAAW,KAAK;AAC7B;AAGO,MAAMC,IAAmB,OA8DnBC,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 { KtLabelInput } from 'kanto-ds';\nimport type { KtSelect } from 'kanto-ds';\nimport type { KtCheckbox } 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-label-input': KtProps<KtLabelInput>;\n    'kt-select': KtProps<KtSelect>;\n    'kt-checkbox': KtProps<KtCheckbox>;\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwFO,SAASA,EAAeC,GAAsB;AACnD,SAAOA,EAAI,WAAW,KAAK;AAC7B;AAGO,MAAMC,IAAmB,OAiEnBC,IAAgB;AAAA,EAC3B,UAAU;AAAA,EAEV;AACF;"}

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "kanto-ds",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1648,6 +1648,92 @@
             "events": []
           }
         },
+        {
+          "name": "kt-checkbox",
+          "description": "A checkbox: a choice that applies when the form is submitted.\n\nBuilt on a real `<input type=\"checkbox\">`, laid invisibly over the drawn\nbox, so the keyboard, the label click, the indeterminate state and what a\nscreen reader announces all come from the platform rather than a\nreimplementation of it.\n\nFor a setting that takes effect the moment it is flipped, use\n`<kt-toggle>`; for one choice among several, `<kt-radio-group>`.\n\n---\n\n\n### **Events:**\n - **kt-change** - The box was checked or unchecked. `detail: { checked }`.\n\n### **Slots:**\n - _default_ - The label, clickable.\n\n### **CSS Parts:**\n - **base** - The `<label>` around box and text.\n- **input** - The native checkbox.\n- **box** - The drawn box.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "checked",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "indeterminate",
+              "description": "Neither checked nor unchecked — for a \"select all\" over a partial\nselection. Cleared as soon as the user clicks, as on a native checkbox.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "size",
+              "value": { "type": "KtCheckboxSize", "default": "'medium'" }
+            },
+            { "name": "name", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "value",
+              "description": "Submitted when checked, as for a native checkbox.",
+              "value": { "type": "string", "default": "'on'" }
+            },
+            {
+              "name": "label",
+              "description": "Accessible name, when nothing is slotted.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "error",
+              "description": "Error message. A non-empty value puts the box in its error state.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The label, clickable." }],
+          "events": [
+            {
+              "name": "kt-change",
+              "description": "The box was checked or unchecked. `detail: { checked }`."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "checked", "type": "boolean" },
+              {
+                "name": "indeterminate",
+                "description": "Neither checked nor unchecked — for a \"select all\" over a partial\nselection. Cleared as soon as the user clicks, as on a native checkbox.",
+                "type": "boolean"
+              },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "required", "type": "boolean" },
+              { "name": "size", "type": "KtCheckboxSize" },
+              { "name": "name", "type": "string" },
+              {
+                "name": "value",
+                "description": "Submitted when checked, as for a native checkbox.",
+                "type": "string"
+              },
+              {
+                "name": "label",
+                "description": "Accessible name, when nothing is slotted.",
+                "type": "string"
+              },
+              {
+                "name": "error",
+                "description": "Error message. A non-empty value puts the box in its error state.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "kt-change",
+                "description": "The box was checked or unchecked. `detail: { checked }`."
+              }
+            ]
+          }
+        },
         {
           "name": "kt-drag-drop",
           "description": "A file drop zone.\n\nAccepts a drop or a click, lists what was picked with sizes and types, and\nlets each entry be removed. It holds the files in memory and reports them —\nuploading is the application's business.\n\n---\n\n\n### **Events:**\n - **kt-files-change** - The selection changed. `detail: { files }`.\n- **kt-files-rejected** - Files were refused. `detail: { files, reason }`.\n\n### **Methods:**\n - **clear(): _void_** - Empties the selection without firing a rejection.\n\n### **CSS Parts:**\n - **base** - The dashed drop zone.\n- **list** - The list of chosen files.",
@@ -2081,6 +2167,144 @@
             "events": []
           }
         },
+        {
+          "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\n### **Slots:**\n - _default_ - The label.\n\n### **CSS Parts:**\n - **base** - The `role=\"radio\"` row.\n- **circle** - The drawn circle.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "Submitted by the group when this option is chosen.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "checked",
+              "description": "Set by the group.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "invalid",
+              "description": "Set by the group while it reports an error.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "group-disabled",
+              "description": "Set by the group while the whole group is disabled.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The label." }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "Submitted by the group when this option is chosen.",
+                "type": "string"
+              },
+              { "name": "disabled", "type": "boolean" },
+              {
+                "name": "checked",
+                "description": "Set by the group.",
+                "type": "boolean"
+              },
+              {
+                "name": "tabbable",
+                "description": "Set by the group: whether this option holds the group's one tab stop.",
+                "type": "boolean"
+              },
+              {
+                "name": "invalid",
+                "description": "Set by the group while it reports an error.",
+                "type": "boolean"
+              },
+              {
+                "name": "groupDisabled",
+                "description": "Set by the group while the whole group is disabled.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "kt-radio-group",
+          "description": "One choice among a few, all visible at once.\n\nReach for it over `<kt-select>` when there are few enough options to show\nthem all — seeing every option is the point — and over\n`<kt-segmented-control>` when the options need a sentence each, or the\nchoice belongs in a form rather than a toolbar.\n\nNative radios cannot form a group across shadow roots, so this is the ARIA\nradio group pattern: one tab stop for the whole group, arrow keys move and\nselect, disabled options are skipped.\n\n---\n\n\n### **Events:**\n - **kt-change** - An option was chosen. `detail: { value }`.\n\n### **Slots:**\n - _default_ - The `<kt-radio>` options.\n\n### **CSS Parts:**\n - **base** - The `role=\"radiogroup\"` container.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "The chosen option's value, or `null`.",
+              "value": { "type": "string | null", "default": "null" }
+            },
+            { "name": "name", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "label",
+              "description": "Accessible name of the group.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "orientation",
+              "value": {
+                "type": "KtRadioGroupOrientation",
+                "default": "'vertical'"
+              }
+            },
+            {
+              "name": "error",
+              "description": "Error message. A non-empty value puts the group in its error state.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The `<kt-radio>` options." }],
+          "events": [
+            {
+              "name": "kt-change",
+              "description": "An option was chosen. `detail: { value }`."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "The chosen option's value, or `null`.",
+                "type": "string | null"
+              },
+              { "name": "name", "type": "string" },
+              {
+                "name": "label",
+                "description": "Accessible name of the group.",
+                "type": "string"
+              },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "required", "type": "boolean" },
+              { "name": "orientation", "type": "KtRadioGroupOrientation" },
+              {
+                "name": "error",
+                "description": "Error message. A non-empty value puts the group in its error state.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "kt-change",
+                "description": "An option was chosen. `detail: { value }`."
+              }
+            ]
+          }
+        },
         {
           "name": "kt-select",
           "description": "A single-choice dropdown.\n\nUnlike the trigger-plus-div it replaces, this is a real listbox: arrow keys\nmove an active descendant, Home and End jump to the ends, Enter commits,\nEscape closes without changing anything, and disabled options are skipped\nrather than merely unclickable.\n\n---\n\n\n### **Events:**\n - **kt-change** - An option was chosen or cleared. `detail: { value, option }`.\n\n### **CSS Parts:**\n - **trigger** - The button that opens the list.\n- **popup** - The option list.\n- **option** - An option row.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kanto-ds",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Framework-agnostic design system for data-dense product interfaces.",
   "keywords": [
     "design-system",
@@ -153,6 +153,10 @@
       "types": "./dist/components/feedback/kt-tooltip/kt-tooltip.d.ts",
       "default": "./dist/components/feedback/kt-tooltip/kt-tooltip.js"
     },
+    "./components/forms/kt-checkbox": {
+      "types": "./dist/components/forms/kt-checkbox/kt-checkbox.d.ts",
+      "default": "./dist/components/forms/kt-checkbox/kt-checkbox.js"
+    },
     "./components/forms/kt-drag-drop": {
       "types": "./dist/components/forms/kt-drag-drop/kt-drag-drop.d.ts",
       "default": "./dist/components/forms/kt-drag-drop/kt-drag-drop.js"
@@ -173,6 +177,10 @@
       "types": "./dist/components/forms/kt-label-input/kt-label-input.d.ts",
       "default": "./dist/components/forms/kt-label-input/kt-label-input.js"
     },
+    "./components/forms/kt-radio-group": {
+      "types": "./dist/components/forms/kt-radio-group/kt-radio-group.d.ts",
+      "default": "./dist/components/forms/kt-radio-group/kt-radio-group.js"
+    },
     "./components/forms/kt-select": {
       "types": "./dist/components/forms/kt-select/kt-select.d.ts",
       "default": "./dist/components/forms/kt-select/kt-select.js"

package/dist/chunks/index-fzPIgxe2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-fzPIgxe2.js","sources":["../../src/internal/strings.ts"],"sourcesContent":["/**\n * Every piece of copy the elements write themselves — empty states, button\n * labels, validation messages, and the accessible names a screen reader\n * announces but nobody sees.\n *\n * English by default. An application in another language replaces them once,\n * at start-up, and every element follows:\n *\n *     import { setStrings } from 'kanto-ds/strings';\n *\n *     setStrings({\n *       clear: 'Effacer',\n *       pageOf: (page, total) => `Page ${page} sur ${total}`,\n *     });\n *\n * Anything left out keeps its English default. A string an element also takes\n * as a property — `emptyText`, `placeholder`, `confirmLabel` — still wins when\n * it is set, so one screen can say something different from the rest.\n *\n * Copy that carries a value is a function, not a template with placeholders:\n * the translation owns the word order, and \"Remove {name}\" does not survive\n * languages that put the object first.\n */\n\nexport interface KtStrings {\n  // --- Shared actions ---\n  /** Clear button in fields. */\n  clear: string;\n  /** Close button on toasts, alerts' dismiss button. */\n  close: string;\n  dismiss: string;\n  /** Copy button on `kt-code`, and its state once copied. */\n  copy: string;\n  copied: string;\n  copyCode: string;\n  /** The countdown bar on a toast that closes itself. */\n  timeRemaining: string;\n  /** Remove button on a badge or a dropped file. */\n  remove: (name: string) => string;\n\n  // --- Empty and loading states ---\n  noOptions: string;\n  noResults: string;\n  noActions: string;\n  noData: string;\n  loading: string;\n\n  // --- Fields ---\n  /** `kt-select` with nothing chosen. */\n  select: string;\n  openList: string;\n  closeList: string;\n  showPassword: string;\n  hidePassword: string;\n  searchCountry: string;\n  noCountry: string;\n  countryCode: (country: string | undefined) => string;\n  dragAndDrop: string;\n  browseFiles: string;\n  recommendedSize: (size: string) => string;\n  selectedFiles: string;\n\n  // --- Validation messages, shown by the browser on submit ---\n  required: string;\n  selectOption: string;\n  selectFile: string;\n\n  // --- Navigation ---\n  openMenu: string;\n  closeMenu: string;\n  breadcrumb: string;\n  secondaryNavigation: string;\n  pagination: string;\n  previous: string;\n  next: string;\n  pageOf: (page: number, total: number) => string;\n  moreActions: string;\n\n  // --- Data ---\n  selectRow: string;\n  selectAll: string;\n  total: string;\n  /** Column headers of the data table every chart renders for assistive tech. */\n  chartSeries: string;\n  chartPoint: string;\n  chartSlice: string;\n  chartShare: string;\n\n  // --- Overlays ---\n  confirmHeading: string;\n  confirm: string;\n  cancel: string;\n  details: string;\n\n  // --- Identity ---\n  avatar: string;\n}\n\nexport const defaultStrings: Readonly<KtStrings> = Object.freeze({\n  clear: 'Clear',\n  close: 'Close',\n  dismiss: 'Dismiss',\n  copy: 'Copy',\n  copied: 'Copied',\n  copyCode: 'Copy code',\n  timeRemaining: 'Time remaining',\n  remove: (name: string) => (name ? `Remove ${name}` : 'Remove'),\n\n  noOptions: 'No options available',\n  noResults: 'No results',\n  noActions: 'No actions',\n  noData: 'No data to display',\n  loading: 'Loading…',\n\n  select: 'Select',\n  openList: 'Open list',\n  closeList: 'Close list',\n  showPassword: 'Show password',\n  hidePassword: 'Hide password',\n  searchCountry: 'Search country or dial code',\n  noCountry: 'No country found',\n  countryCode: (country: string | undefined) => `Country code: ${country ?? 'none'}`,\n  dragAndDrop: 'Drag and drop or',\n  browseFiles: 'browse your files',\n  recommendedSize: (size: string) => `Recommended image size: ${size}`,\n  selectedFiles: 'Selected files',\n\n  required: 'This field is required.',\n  selectOption: 'Select an option.',\n  selectFile: 'Select a file.',\n\n  openMenu: 'Open menu',\n  closeMenu: 'Close menu',\n  breadcrumb: 'Breadcrumb',\n  secondaryNavigation: 'Secondary navigation',\n  pagination: 'Pagination',\n  previous: 'Previous',\n  next: 'Next',\n  pageOf: (page: number, total: number) => `Page ${page} / ${total}`,\n  moreActions: 'More actions',\n\n  selectRow: 'Select row',\n  selectAll: 'Select all',\n  total: 'Total',\n  chartSeries: 'Series',\n  chartPoint: 'Point',\n  chartSlice: 'Slice',\n  chartShare: 'Share',\n\n  confirmHeading: 'Are you sure?',\n  confirm: 'Confirm',\n  cancel: 'Cancel',\n  details: 'Details',\n\n  avatar: 'Avatar',\n});\n\nlet current: KtStrings = { ...defaultStrings };\nconst listeners = new Set<() => void>();\n\n/** The strings in effect. Elements read them at render time. */\nexport function strings(): Readonly<KtStrings> {\n  return current;\n}\n\n/**\n * Replaces some or all of the strings, and re-renders every connected element\n * so the change shows at once — switching language at runtime works.\n */\nexport function setStrings(overrides: Partial<KtStrings>): void {\n  current = { ...current, ...overrides };\n  for (const listener of listeners) listener();\n}\n\n/** Back to the English defaults. */\nexport function resetStrings(): void {\n  setStrings(defaultStrings);\n}\n\n/** Calls `listener` after every `setStrings`. Returns the unsubscribe function. */\nexport function onStringsChange(listener: () => void): () => void {\n  listeners.add(listener);\n  return () => listeners.delete(listener);\n}\n"],"names":["defaultStrings","name","country","size","page","total","current","listeners","strings","setStrings","overrides","listener","resetStrings","onStringsChange"],"mappings":"AAkGO,MAAMA,IAAsC,OAAO,OAAO;AAAA,EAC/D,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,eAAe;AAAA,EACf,QAAQ,CAACC,MAAkBA,IAAO,UAAUA,CAAI,KAAK;AAAA,EAErD,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,SAAS;AAAA,EAET,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,WAAW;AAAA,EACX,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EACf,WAAW;AAAA,EACX,aAAa,CAACC,MAAgC,iBAAiBA,KAAW,MAAM;AAAA,EAChF,aAAa;AAAA,EACb,aAAa;AAAA,EACb,iBAAiB,CAACC,MAAiB,2BAA2BA,CAAI;AAAA,EAClE,eAAe;AAAA,EAEf,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AAAA,EAEZ,UAAU;AAAA,EACV,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,qBAAqB;AAAA,EACrB,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,MAAM;AAAA,EACN,QAAQ,CAACC,GAAcC,MAAkB,QAAQD,CAAI,MAAMC,CAAK;AAAA,EAChE,aAAa;AAAA,EAEb,WAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EAEZ,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EAET,QAAQ;AACV,CAAC;AAED,IAAIC,IAAqB,EAAE,GAAGN,EAAA;AAC9B,MAAMO,wBAAgB,IAAA;AAGf,SAASC,IAA+B;AAC7C,SAAOF;AACT;AAMO,SAASG,EAAWC,GAAqC;AAC9D,EAAAJ,IAAU,EAAE,GAAGA,GAAS,GAAGI,EAAA;AAC3B,aAAWC,KAAYJ,EAAW,CAAAI,EAAA;AACpC;AAGO,SAASC,IAAqB;AACnC,EAAAH,EAAWT,CAAc;AAC3B;AAGO,SAASa,EAAgBF,GAAkC;AAChE,SAAAJ,EAAU,IAAII,CAAQ,GACf,MAAMJ,EAAU,OAAOI,CAAQ;AACxC;"}