kanto-ds 1.6.1 → 1.7.0

package/dist/docs/kt-toggle-button.md

@@ -0,0 +1,52 @@
+# `<kt-toggle-button>`
+
+A button that stays pressed.
+
+```html
+<kt-toggle-button icon="bold" label="Bold"></kt-toggle-button>
+<kt-toggle-button variant="outline" value="draft">Draft</kt-toggle-button>
+```
+
+`aria-pressed`, not `aria-checked`: this is a control holding a state, not one
+option among several. When they _are_ options among several and only one may be
+active, reach for [`<kt-segmented-control>`](./kt-segmented-control.md)
+or [`<kt-tabs>`](./kt-tabs.md) — they carry the right semantics and the
+right keyboard model.
+
+To draw several as one bar, wrap them in
+[`<kt-toggle-button-group>`](./kt-toggle-button-group.md).
+Inside a group the button becomes controlled: it stops flipping itself and stops
+emitting, and the group drives it.
+
+## Variants
+
+| Variant     | Resting                                    |
+| ----------- | ------------------------------------------ |
+| `primary`   | Raised surface; solid indigo when pressed  |
+| `secondary` | Flat; soft indigo tint when pressed        |
+| `outline`   | Bordered, transparent; tinted when pressed |
+
+## API
+
+| Property       | Attribute       | Type                                    | Default     |
+| -------------- | --------------- | --------------------------------------- | ----------- |
+| `selected`     | `selected`      | `boolean`                               | `false`     |
+| `disabled`     | `disabled`      | `boolean`                               | `false`     |
+| `variant`      | `variant`       | `'primary' \| 'secondary' \| 'outline'` | `'primary'` |
+| `size`         | `size`          | `'small' \| 'medium' \| 'large'`        | `'medium'`  |
+| `value`        | `value`         | `string`                                | `''`        |
+| `icon`         | `icon`          | `string`                                | `''`        |
+| `iconPosition` | `icon-position` | `'left' \| 'right'`                     | `'left'`    |
+| `label`        | `label`         | `string`                                | `''`        |
+
+| Event       | Detail                                           |
+| ----------- | ------------------------------------------------ |
+| `kt-change` | `{ selected, value }` — not fired inside a group |
+
+| Slot      | Description      |
+| --------- | ---------------- |
+| _default_ | The button label |
+
+| Part     | Description           |
+| -------- | --------------------- |
+| `button` | The native `<button>` |

package/dist/docs/kt-toggle.md

@@ -0,0 +1,47 @@
+# `<kt-toggle>`
+
+An on/off switch.
+
+```html
+<kt-toggle checked>Notifications</kt-toggle>
+<kt-toggle size="small" label="Dark mode"></kt-toggle>
+<kt-toggle disabled></kt-toggle>
+```
+
+## Sizing
+
+The switch is derived from the field height rather than given fixed pixels:
+the track is 1.8× `--switch-height`, and the thumb is inset by 12% of it. So a
+toggle lines up with the inputs and buttons next to it, at every size and every
+breakpoint, and overriding `--button-height` moves all of them together.
+
+## Switch, not checkbox
+
+`role="switch"` with `aria-checked`, which screen readers announce as "on"/"off"
+rather than "checked". Use it for a setting that takes effect immediately. For
+something that only applies when a form is submitted, a checkbox is the honest
+control.
+
+In a form, an unchecked toggle contributes **nothing** to the submission and a
+checked one contributes its `value` — the same rule as a native checkbox.
+
+## API
+
+| Property   | Attribute  | Type                             | Default    |
+| ---------- | ---------- | -------------------------------- | ---------- |
+| `checked`  | `checked`  | `boolean`                        | `false`    |
+| `disabled` | `disabled` | `boolean`                        | `false`    |
+| `size`     | `size`     | `'small' \| 'medium' \| 'large'` | `'medium'` |
+| `name`     | `name`     | `string`                         | `''`       |
+| `value`    | `value`    | `string`                         | `'on'`     |
+| `label`    | `label`    | `string`                         | `''`       |
+
+| Event       | Detail                 |
+| ----------- | ---------------------- |
+| `kt-change` | `{ checked: boolean }` |
+
+| Part    | Description                |
+| ------- | -------------------------- |
+| `base`  | The `role="switch"` button |
+| `track` | The track                  |
+| `thumb` | The sliding thumb          |

package/dist/docs/kt-tooltip.md

@@ -0,0 +1,68 @@
+# `<kt-tooltip>`
+
+A short label that appears on hover or focus. Wrap what it describes:
+
+```html
+<kt-tooltip text="Refresh the data">
+  <kt-button icon="refresh-cw" label="Refresh"></kt-button>
+</kt-tooltip>
+```
+
+## A tooltip is a description, not a name
+
+Note the `label` on the button above. A tooltip supplements a control; it must
+never be the only thing naming it. A tooltip that has to be hovered to be read
+leaves touch users and screen-reader users with an unlabelled button.
+
+The rule: if the trigger has no visible text, it needs its own accessible name,
+and the tooltip adds detail on top.
+
+## How the description reaches the trigger
+
+`aria-describedby` cannot cross a shadow boundary — an id inside this element's
+shadow root is invisible to a trigger sitting in the light DOM.
+
+So `<kt-tooltip>` also puts the text in a light-DOM node, addressed to a slot
+that does not exist. That keeps it out of the rendered output while leaving it
+referenceable: an explicit `aria-describedby` target is read even when it is not
+displayed.
+
+## Where the bubble goes
+
+The bubble is a popover in the top layer, placed from the trigger in viewport
+coordinates. No ancestor's `overflow: hidden` can clip it, and it takes no room
+in the page.
+
+`placement` is a preference. When that side has no room — `top` on an icon at
+the top of the page — the bubble takes the opposite side, and it slides along
+its side to stay inside the screen. Scrolling or resizing hides it, since a
+bubble fixed to the viewport would drift away from its trigger.
+
+## Holding it open
+
+`open` shows the bubble whatever the pointer does. It is for a trigger that
+cannot take focus itself: `<kt-input>` holds its error icon's tooltip open while
+the field has focus, so a keyboard user sees the message a mouse user gets on
+hover.
+
+## Dismissal
+
+Escape hides the tooltip while the trigger keeps focus, as WCAG 1.4.13 requires
+of any content shown on hover or focus.
+
+## API
+
+| Property    | Attribute   | Type                                     | Default |
+| ----------- | ----------- | ---------------------------------------- | ------- |
+| `text`      | `text`      | `string`                                 | `''`    |
+| `placement` | `placement` | `'top' \| 'bottom' \| 'left' \| 'right'` | `'top'` |
+| `disabled`  | `disabled`  | `boolean`                                | `false` |
+| `open`      | `open`      | `boolean`                                | `false` |
+
+| Slot      | Description |
+| --------- | ----------- |
+| _default_ | The trigger |
+
+| Part     | Description        |
+| -------- | ------------------ |
+| `bubble` | The tooltip bubble |

package/dist/internal/floating.d.ts

@@ -29,6 +29,10 @@ export interface FloatingOptions {
  * animatable state its element gives it, so it can fade out after it leaves
  * the top layer: `display` here only undoes the popover's `display: none`, and
  * a panel's own `display` still wins.
+ *
+ * Until it is first placed it sits top left. With auto insets a closed panel
+ * sat where the flow put it — beside a right-hand trigger, past the edge of
+ * the page, which then scrolled sideways.
  */
 export declare const floatingStyles: import("lit").CSSResult;
 export declare class FloatingController implements ReactiveController {

package/dist/tokens/colors.css

@@ -56,9 +56,12 @@
   --color-success-soft: rgba(53, 221, 131, 0.12);
 
   /* === TEXT STEPS OF THE BRAND AND SEMANTIC COLOURS === */
+  /* Info and danger are a shade lighter than the rest need: an alert's action
+     button lays its tint on the alert's, and on a card that double tint is the
+     lightest ground these text steps meet. */
   --color-primary-text: var(--accent-text-dark, #8e97ff);
-  --color-danger-text: #ff727f;
-  --color-info-text: #06b0fc;
+  --color-danger-text: #ff7984;
+  --color-info-text: #43bbff;
   --color-warning-text: #fca80d;
   --color-success-text: #01df7e;
 

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.6.1",
+  "version": "1.7.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/package.json

@@ -1,14 +1,29 @@
 {
   "name": "kanto-ds",
-  "version": "1.6.1",
-  "description": "Framework-agnostic design system for data-dense product interfaces.",
+  "version": "1.7.0",
+  "description": "Forty-nine accessible web components for dashboards, admin tools and forms — themeable in one line, in React, Vue, Angular, Svelte or plain HTML.",
   "keywords": [
     "design-system",
     "web-components",
     "custom-elements",
     "lit",
     "ui",
-    "dark-theme"
+    "ui-kit",
+    "components",
+    "dashboard",
+    "admin",
+    "forms",
+    "data-table",
+    "date-picker",
+    "react",
+    "vue",
+    "angular",
+    "svelte",
+    "accessible",
+    "a11y",
+    "theming",
+    "dark-theme",
+    "dark-mode"
   ],
   "homepage": "https://kanto.arnaudmichel.fr",
   "bugs": {
@@ -37,6 +52,8 @@
   },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
+  "unpkg": "./dist/cdn/kanto.min.js",
+  "jsdelivr": "./dist/cdn/kanto.min.js",
   "types": "./dist/index.d.ts",
   "customElements": "./dist/custom-elements.json",
   "web-types": "./dist/web-types.json",
@@ -286,10 +303,11 @@
   ],
   "scripts": {
     "dev": "vite --config demo/vite.config.ts",
-    "build": "npm run build:js && npm run build:types && npm run build:static && npm run build:manifest",
+    "build": "npm run build:js && npm run build:cdn && npm run build:types && npm run build:static && npm run build:manifest",
+    "build:cdn": "node scripts/build-cdn.js",
     "build:js": "vite build",
     "build:types": "tsc -p tsconfig.build.json",
-    "build:static": "node scripts/copy-static.js",
+    "build:static": "node scripts/copy-static.js && node scripts/llms.js --docs",
     "build:manifest": "cem analyze --config custom-elements-manifest.config.js",
     "build:demo": "vite build --config demo/vite.config.ts",
     "test": "vitest run",

package/dist/chunks/floating-B33g-M_1.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"floating-B33g-M_1.js","sources":["../../src/internal/floating.ts"],"sourcesContent":["import { css, type ReactiveController, type ReactiveControllerHost } from 'lit';\nimport { placeFloating, type Align, type Side } from './position.js';\n\n/**\n * A panel that opens from a trigger — a select's list, a date picker's\n * calendar, a menu — drawn in the top layer and placed from the trigger.\n *\n * A panel positioned inside its element was cut off by any ancestor with\n * `overflow: hidden`: a table cell, a side panel, an app's scrolling main\n * area. In the top layer, nothing clips it. It opens on the side asked for, or\n * the other one when that has no room, and follows the trigger as the page\n * scrolls.\n */\n\nexport interface FloatingOptions {\n  /** The panel, which carries `popover=\"manual\"` and the `floating` class. */\n  readonly panel: () => HTMLElement | null | undefined;\n  /** What the panel opens from. */\n  readonly anchor: () => Element | null | undefined;\n  /** The side it prefers. */\n  readonly side?: () => Side;\n  /** Which edge of the anchor it lines up with; its start by default. */\n  readonly align?: () => Align;\n  /** Sizes the panel to the anchor's width — a list under its field. */\n  readonly matchWidth?: boolean;\n  /** Told the side it opened on, for the direction of its entrance. */\n  readonly onPlace?: (side: Side) => void;\n}\n\n/**\n * The panel's own styles. Closed, it keeps the display and the hidden,\n * animatable state its element gives it, so it can fade out after it leaves\n * the top layer: `display` here only undoes the popover's `display: none`, and\n * a panel's own `display` still wins.\n */\nexport const floatingStyles = css`\n  .floating {\n    position: fixed;\n    inset: auto;\n    display: block;\n    /* As wide as what it holds, wherever it is placed: a box sized from its\n       position would change size when moved, and be moved again. */\n    width: max-content;\n    margin: 0;\n    color: inherit;\n    /* Set apart from the page by the theme: a lighter surface in the dark,\n       an edge and a soft shadow in the light. */\n    border: var(--border-width) solid var(--border-popover);\n    box-shadow: var(--shadow-popover);\n  }\n`;\n\nexport class FloatingController implements ReactiveController {\n  private open = false;\n  private frame = 0;\n  /** Places the panel again when its size changes — content drawn after it opened. */\n  private resizeObserver: ResizeObserver | undefined;\n\n  constructor(\n    host: ReactiveControllerHost,\n    private readonly options: FloatingOptions,\n  ) {\n    host.addController(this);\n  }\n\n  /**\n   * Call from the host's `updated()` with whether the panel is open. While it\n   * is, every update re-places it: its content — a filtered list — can change\n   * its size.\n   */\n  sync(open: boolean): void {\n    // First, and whatever the panel: one rendered only while open is already\n    // gone when it closes, and its listeners must go with it.\n    if (open !== this.open) {\n      this.open = open;\n      const method = open ? 'addEventListener' : 'removeEventListener';\n      window[method]('scroll', this.follow, { capture: true, passive: true });\n      window[method]('resize', this.follow);\n    }\n\n    const panel = this.options.panel();\n    // Where popovers are missing — a test DOM — the panel stays where it is.\n    if (!panel || typeof panel.showPopover !== 'function') return;\n\n    if (open) {\n      if (!panel.matches(':popover-open')) panel.showPopover();\n      this.place();\n      // A panel measured at opening may grow once what it holds has drawn —\n      // a calendar is an element of its own — and must be placed again.\n      if (!this.resizeObserver && typeof ResizeObserver !== 'undefined') {\n        this.resizeObserver = new ResizeObserver(this.follow);\n        this.resizeObserver.observe(panel);\n      }\n    } else {\n      this.unobserve();\n      if (panel.matches(':popover-open')) panel.hidePopover();\n    }\n  }\n\n  private unobserve(): void {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = undefined;\n  }\n\n  hostDisconnected(): void {\n    this.sync(false);\n    this.unobserve();\n    cancelAnimationFrame(this.frame);\n  }\n\n  private follow = (): void => {\n    cancelAnimationFrame(this.frame);\n    this.frame = requestAnimationFrame(() => this.place());\n  };\n\n  private place(): void {\n    const panel = this.options.panel();\n    const anchor = this.options.anchor()?.getBoundingClientRect();\n    if (!panel || !anchor) return;\n\n    if (this.options.matchWidth) panel.style.width = `${anchor.width}px`;\n    // Untransformed size: the entrance animation scales and slides the panel.\n    const { x, y, placement } = placeFloating(\n      anchor,\n      { width: panel.offsetWidth, height: panel.offsetHeight },\n      { width: window.innerWidth, height: window.innerHeight },\n      this.options.side?.() ?? 'bottom',\n      this.options.align?.() ?? 'start',\n    );\n    panel.style.left = `${x}px`;\n    panel.style.top = `${y}px`;\n    this.options.onPlace?.(placement);\n  }\n}\n"],"names":["floatingStyles","css","FloatingController","host","options","open","method","panel","anchor","x","y","placement","placeFloating"],"mappings":";;AAmCO,MAAMA,IAAiBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBvB,MAAMC,EAAiD;AAAA,EAM5D,YACEC,GACiBC,GACjB;AADiB,SAAA,UAAAA,GAPnB,KAAQ,OAAO,IACf,KAAQ,QAAQ,GAwDhB,KAAQ,SAAS,MAAY;AAC3B,2BAAqB,KAAK,KAAK,GAC/B,KAAK,QAAQ,sBAAsB,MAAM,KAAK,OAAO;AAAA,IACvD,GAnDED,EAAK,cAAc,IAAI;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,KAAKE,GAAqB;AAGxB,QAAIA,MAAS,KAAK,MAAM;AACtB,WAAK,OAAOA;AACZ,YAAMC,IAASD,IAAO,qBAAqB;AAC3C,aAAOC,CAAM,EAAE,UAAU,KAAK,QAAQ,EAAE,SAAS,IAAM,SAAS,IAAM,GACtE,OAAOA,CAAM,EAAE,UAAU,KAAK,MAAM;AAAA,IACtC;AAEA,UAAMC,IAAQ,KAAK,QAAQ,MAAA;AAE3B,IAAI,CAACA,KAAS,OAAOA,EAAM,eAAgB,eAEvCF,KACGE,EAAM,QAAQ,eAAe,OAAS,YAAA,GAC3C,KAAK,MAAA,GAGD,CAAC,KAAK,kBAAkB,OAAO,iBAAmB,QACpD,KAAK,iBAAiB,IAAI,eAAe,KAAK,MAAM,GACpD,KAAK,eAAe,QAAQA,CAAK,OAGnC,KAAK,UAAA,GACDA,EAAM,QAAQ,eAAe,OAAS,YAAA;AAAA,EAE9C;AAAA,EAEQ,YAAkB;AACxB,SAAK,gBAAgB,WAAA,GACrB,KAAK,iBAAiB;AAAA,EACxB;AAAA,EAEA,mBAAyB;AACvB,SAAK,KAAK,EAAK,GACf,KAAK,UAAA,GACL,qBAAqB,KAAK,KAAK;AAAA,EACjC;AAAA,EAOQ,QAAc;AACpB,UAAMA,IAAQ,KAAK,QAAQ,MAAA,GACrBC,IAAS,KAAK,QAAQ,OAAA,GAAU,sBAAA;AACtC,QAAI,CAACD,KAAS,CAACC,EAAQ;AAEvB,IAAI,KAAK,QAAQ,eAAYD,EAAM,MAAM,QAAQ,GAAGC,EAAO,KAAK;AAEhE,UAAM,EAAE,GAAAC,GAAG,GAAAC,GAAG,WAAAC,EAAA,IAAcC;AAAA,MAC1BJ;AAAA,MACA,EAAE,OAAOD,EAAM,aAAa,QAAQA,EAAM,aAAA;AAAA,MAC1C,EAAE,OAAO,OAAO,YAAY,QAAQ,OAAO,YAAA;AAAA,MAC3C,KAAK,QAAQ,OAAA,KAAY;AAAA,MACzB,KAAK,QAAQ,aAAa;AAAA,IAAA;AAE5B,IAAAA,EAAM,MAAM,OAAO,GAAGE,CAAC,MACvBF,EAAM,MAAM,MAAM,GAAGG,CAAC,MACtB,KAAK,QAAQ,UAAUC,CAAS;AAAA,EAClC;AACF;"}