kanto-ds 1.6.0 → 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/icons/defaults.d.ts

@@ -11,17 +11,26 @@ export declare const defaultIcons: {
     CircleAlert: import("lucide").IconNode;
     CircleCheck: import("lucide").IconNode;
     Copy: import("lucide").IconNode;
+    Download: import("lucide").IconNode;
+    Ellipsis: import("lucide").IconNode;
+    ExternalLink: import("lucide").IconNode;
     Eye: import("lucide").IconNode;
     EyeOff: import("lucide").IconNode;
     File: import("lucide").IconNode;
     FileUp: import("lucide").IconNode;
+    Filter: import("lucide").IconNode;
     Info: import("lucide").IconNode;
     LoaderCircle: import("lucide").IconNode;
     Menu: import("lucide").IconNode;
     Minus: import("lucide").IconNode;
+    Pencil: import("lucide").IconNode;
+    Plus: import("lucide").IconNode;
+    RefreshCw: import("lucide").IconNode;
     Search: import("lucide").IconNode;
+    Settings: import("lucide").IconNode;
     Trash2: import("lucide").IconNode;
     TriangleAlert: import("lucide").IconNode;
+    Upload: import("lucide").IconNode;
     User: import("lucide").IconNode;
     X: import("lucide").IconNode;
 };

package/dist/icons/index.js

@@ -1,4 +1,4 @@
-import { d as a, g as r, r as o, a as t, b as c, t as g } from "../chunks/defaults-CFrjqae2.js";
+import { d as a, g as r, r as o, a as t, b as c, t as g } from "../chunks/defaults-Cpeg13O5.js";
 export {
   a as defaultIcons,
   r as getIcon,

package/dist/index.js

@@ -48,7 +48,7 @@ import { KtPagination as He } from "./components/data/kt-pagination/kt-paginatio
 import { KtStat as je } from "./components/data/kt-stat/kt-stat.js";
 import { KtTable as ze } from "./components/data/kt-table/kt-table.js";
 import { KtTimeline as Xe, KtTimelineItem as We } from "./components/data/kt-timeline/kt-timeline.js";
-import { g as Ze, r as qe, a as Je, b as Qe } from "./chunks/defaults-CFrjqae2.js";
+import { g as Ze, r as qe, a as Je, b as Qe } from "./chunks/defaults-Cpeg13O5.js";
 import { d as eo, s as oo, r as ro, a as no } from "./chunks/index-TWJzttLX.js";
 import { K as so, d as co } from "./chunks/kt-element-T0VbIBNp.js";
 const C = (t) => {

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

package/package.json

@@ -1,14 +1,29 @@
 {
   "name": "kanto-ds",
-  "version": "1.6.0",
-  "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": {
@@ -23,6 +38,10 @@
   "type": "module",
   "sideEffects": [
     "*.css",
+    "./dist/index.js",
+    "./dist/vue/index.js",
+    "./src/index.ts",
+    "./src/vue/index.ts",
     "./dist/components/**",
     "./dist/icons/defaults.js",
     "./src/components/**",
@@ -33,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",
@@ -282,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",
@@ -298,8 +320,9 @@
     "format:check": "prettier --check .",
     "clean": "node -e \"fs.rmSync(dist,{recursive:true,force:true})\"",
     "check:exports": "node scripts/check-exports.js",
+    "check:consumer": "node scripts/check-consumer.js",
     "check:size": "node scripts/check-size.js",
-    "verify": "npm run format:check && npm run lint && npm run typecheck && npm run test && npm run build && npm run check:exports && npm run check:size && npm run build:demo",
+    "verify": "npm run format:check && npm run lint && npm run typecheck && npm run test && npm run build && npm run check:exports && npm run check:consumer && npm run check:size && npm run build:demo",
     "release": "node scripts/release.js",
     "release:dry": "node scripts/release.js --dry-run",
     "prepublishOnly": "npm run verify"

package/dist/chunks/defaults-CFrjqae2.js

@@ -1,59 +0,0 @@
-import { X as s, User as a, TriangleAlert as c, Trash2 as i, Search as f, Minus as g, Menu as p, LoaderCircle as u, Info as C, FileUp as l, File as y, EyeOff as A, Eye as I, Copy as h, CircleCheck as w, CircleAlert as $, ChevronUp as b, ChevronRight as d, ChevronLeft as v, ChevronDown as U, Check as Z, Calendar as k, ArrowUp as m, ArrowDown as z } from "lucide";
-const n = /* @__PURE__ */ new Map();
-function t(e) {
-  return e.replace(/([A-Z]+)([A-Z][a-z])/g, "$1-$2").replace(/([a-zA-Z])(\d)/g, "$1-$2").replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
-}
-function L(e, r) {
-  n.set(t(e), r);
-}
-function M(e) {
-  for (const [r, o] of Object.entries(e))
-    j(o) && L(r, o);
-}
-function F(e) {
-  return n.get(t(e));
-}
-function O() {
-  return [...n.keys()].sort();
-}
-function j(e) {
-  return Array.isArray(e) && e.every(
-    (r) => Array.isArray(r) && typeof r[0] == "string" && typeof r[1] == "object" && r[1] !== null
-  );
-}
-const D = {
-  ArrowDown: z,
-  ArrowUp: m,
-  Calendar: k,
-  Check: Z,
-  ChevronDown: U,
-  ChevronLeft: v,
-  ChevronRight: d,
-  ChevronUp: b,
-  CircleAlert: $,
-  CircleCheck: w,
-  Copy: h,
-  Eye: I,
-  EyeOff: A,
-  File: y,
-  FileUp: l,
-  Info: C,
-  LoaderCircle: u,
-  Menu: p,
-  Minus: g,
-  Search: f,
-  Trash2: i,
-  TriangleAlert: c,
-  User: a,
-  X: s
-};
-M(D);
-export {
-  M as a,
-  O as b,
-  D as d,
-  F as g,
-  L as r,
-  t
-};
-//# sourceMappingURL=defaults-CFrjqae2.js.map

package/dist/chunks/defaults-CFrjqae2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"defaults-CFrjqae2.js","sources":["../../src/icons/registry.ts","../../src/icons/defaults.ts"],"sourcesContent":["/**\n * The icon registry.\n *\n * `<kt-icon>` looks icons up by name at render time, which means the set of\n * icons cannot be statically analysed and a bundler cannot tree-shake it. So\n * Kanto does not bundle all two thousand Lucide icons: the elements register\n * the handful they need themselves, and an application registers whatever else\n * it uses.\n *\n *     import { Rocket, Wallet } from 'lucide';\n *     import { registerIcons } from 'kanto-ds/icons';\n *\n *     registerIcons({ Rocket, Wallet });\n *\n * Names are normalised to kebab-case, so `Rocket`, `rocket` and\n * `ChevronDown` / `chevron-down` all resolve.\n */\n\n/** A Lucide icon: a flat list of SVG children, each `[tag, attributes]`. */\nexport type IconNode = [tag: string, attrs: Record<string, string | number | undefined>][];\n\nconst registry = new Map<string, IconNode>();\n\n/**\n * `ChevronDown` → `chevron-down`, `Trash2` → `trash-2`, `AArrowDown` →\n * `a-arrow-down`.\n *\n * The digit boundary matters: Lucide names that icon `trash-2`, so a rule that\n * only splits on case produces `trash2` and the lookup quietly misses.\n */\nexport function toKebabCase(name: string): string {\n  return name\n    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2') // acronym run before a word\n    .replace(/([a-zA-Z])(\\d)/g, '$1-$2') // letter before a digit\n    .replace(/([a-z])([A-Z])/g, '$1-$2') // ordinary camel boundary\n    .replace(/[\\s_]+/g, '-')\n    .toLowerCase();\n}\n\n/** Registers a single icon under `name`. */\nexport function registerIcon(name: string, node: IconNode): void {\n  registry.set(toKebabCase(name), node);\n}\n\n/**\n * Registers a map of icons. Accepts a Lucide namespace import directly:\n * every non-icon export (`createElement`, `createIcons`, …) is skipped.\n */\nexport function registerIcons(icons: Record<string, unknown>): void {\n  for (const [name, node] of Object.entries(icons)) {\n    if (isIconNode(node)) registerIcon(name, node);\n  }\n}\n\n/** Returns the icon registered under `name`, or `undefined`. */\nexport function getIcon(name: string): IconNode | undefined {\n  return registry.get(toKebabCase(name));\n}\n\n/** Every registered name, kebab-cased and sorted. Useful for docs and tests. */\nexport function registeredIcons(): string[] {\n  return [...registry.keys()].sort();\n}\n\nfunction isIconNode(value: unknown): value is IconNode {\n  return (\n    Array.isArray(value) &&\n    value.every(\n      (child) =>\n        Array.isArray(child) &&\n        typeof child[0] === 'string' &&\n        typeof child[1] === 'object' &&\n        child[1] !== null,\n    )\n  );\n}\n","/**\n * The icons the design system uses in its own elements.\n *\n * Importing any Kanto element pulls this set in — roughly 2 kB of path data,\n * the price of `<kt-select>` being able to draw its own chevron. Application\n * icons are registered separately through `registerIcons`.\n */\nimport {\n  ArrowDown,\n  ArrowUp,\n  Calendar,\n  Check,\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n  ChevronUp,\n  CircleAlert,\n  CircleCheck,\n  Copy,\n  Eye,\n  EyeOff,\n  File,\n  FileUp,\n  Info,\n  LoaderCircle,\n  Menu,\n  Minus,\n  Search,\n  Trash2,\n  TriangleAlert,\n  User,\n  X,\n} from 'lucide';\n// The sibling registry, not the `kanto-ds` barrel: the barrel pulls in every\n// element, and one of them pulls in this file — a cycle that leaves\n// `registerIcons` undefined by the time the call below runs.\nimport { registerIcons } from './registry.js';\n\n/** Icons referenced by Kanto elements, keyed by their Lucide name. */\nexport const defaultIcons = {\n  ArrowDown,\n  ArrowUp,\n  Calendar,\n  Check,\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n  ChevronUp,\n  CircleAlert,\n  CircleCheck,\n  Copy,\n  Eye,\n  EyeOff,\n  File,\n  FileUp,\n  Info,\n  LoaderCircle,\n  Menu,\n  Minus,\n  Search,\n  Trash2,\n  TriangleAlert,\n  User,\n  X,\n};\n\nregisterIcons(defaultIcons);\n"],"names":["registry","toKebabCase","name","registerIcon","node","registerIcons","icons","isIconNode","getIcon","registeredIcons","value","child","defaultIcons","ArrowDown","ArrowUp","Calendar","Check","ChevronDown","ChevronLeft","ChevronRight","ChevronUp","CircleAlert","CircleCheck","Copy","Eye","EyeOff","File","FileUp","Info","LoaderCircle","Menu","Minus","Search","Trash2","TriangleAlert","User","X"],"mappings":";AAqBA,MAAMA,wBAAe,IAAA;AASd,SAASC,EAAYC,GAAsB;AAChD,SAAOA,EACJ,QAAQ,yBAAyB,OAAO,EACxC,QAAQ,mBAAmB,OAAO,EAClC,QAAQ,mBAAmB,OAAO,EAClC,QAAQ,WAAW,GAAG,EACtB,YAAA;AACL;AAGO,SAASC,EAAaD,GAAcE,GAAsB;AAC/D,EAAAJ,EAAS,IAAIC,EAAYC,CAAI,GAAGE,CAAI;AACtC;AAMO,SAASC,EAAcC,GAAsC;AAClE,aAAW,CAACJ,GAAME,CAAI,KAAK,OAAO,QAAQE,CAAK;AAC7C,IAAIC,EAAWH,CAAI,KAAGD,EAAaD,GAAME,CAAI;AAEjD;AAGO,SAASI,EAAQN,GAAoC;AAC1D,SAAOF,EAAS,IAAIC,EAAYC,CAAI,CAAC;AACvC;AAGO,SAASO,IAA4B;AAC1C,SAAO,CAAC,GAAGT,EAAS,KAAA,CAAM,EAAE,KAAA;AAC9B;AAEA,SAASO,EAAWG,GAAmC;AACrD,SACE,MAAM,QAAQA,CAAK,KACnBA,EAAM;AAAA,IACJ,CAACC,MACC,MAAM,QAAQA,CAAK,KACnB,OAAOA,EAAM,CAAC,KAAM,YACpB,OAAOA,EAAM,CAAC,KAAM,YACpBA,EAAM,CAAC,MAAM;AAAA,EAAA;AAGrB;ACpCO,MAAMC,IAAe;AAAA,EAC1B,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC;AAAA,EACA,MAAAC;AAAA,EACA,GAAAC;AACF;AAEA/B,EAAcO,CAAY;"}

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;"}