@aceshooting/lyra-ui 5.2.0 → 6.0.0

package/llms.txt

@@ -11,7 +11,7 @@ fallbacks, so it works standalone with no theme or runtime dependency.
 
 ## Which file to read
 
-Prefer the narrow file. `llms-full.txt` is the whole catalog concatenated (~250 components) and
+Prefer the narrow file. `llms-full.txt` is the whole catalog concatenated (~251 components) and
 costs several hundred thousand tokens; you almost never want all of it.
 
 - [llms/index.md](./llms/index.md): every tag, its exact import path, and a one-line purpose —
@@ -56,11 +56,11 @@ privacy rules.
 
 ## Component catalog
 
-- **Form controls & inputs** (`components/forms/`, 25) — `lr-combobox`, `lr-option`, `lr-select`, `lr-date-picker`, `lr-date-input`, `lr-textarea`, `lr-button`, `lr-icon-button`, `lr-input`, `lr-number-input`, `lr-time-input`, `lr-phone-input`, `lr-time-range`, `lr-swatch-picker`, `lr-checkbox`, `lr-switch`, `lr-slider`, `lr-radio`, `lr-radio-group`, `lr-checkbox-group`, `lr-token-input`, `lr-code-editor`, `lr-color-picker`, `lr-emoji-picker`, `lr-rubric-form`
+- **Form controls & inputs** (`components/forms/`, 26) — `lr-combobox`, `lr-option`, `lr-select`, `lr-date-picker`, `lr-date-input`, `lr-textarea`, `lr-button`, `lr-icon-button`, `lr-input`, `lr-number-input`, `lr-time-input`, `lr-phone-input`, `lr-time-range`, `lr-swatch-picker`, `lr-checkbox`, `lr-switch`, `lr-slider`, `lr-radio`, `lr-radio-group`, `lr-checkbox-group`, `lr-token-input`, `lr-code-editor`, `lr-color-picker`, `lr-emoji-picker`, `lr-rubric-form`, `lr-locale-picker`
 
-- **Data display, dashboards & flow canvas** (`components/data/`, 25) — `lr-sparkline`, `lr-stat`, `lr-table`, `lr-pagination`, `lr-gauge`, `lr-word-cloud`, `lr-heatmap`, `lr-sequence-strip`, `lr-tree`, `lr-tree-node`, `lr-flow-canvas`, `lr-flow-node`, `lr-flow-minimap`, `lr-flow-controls`, `lr-flow-run-overlay`, `lr-context-meter`, `lr-data-grid`, `lr-calendar`, `lr-timeline`, `lr-timeline-item`, `lr-file-tree`, `lr-env-list`, `lr-document-library`, `lr-graph-query-builder`, `lr-query-builder`
+- **Data display, dashboards & flow canvas** (`components/data/`, 24) — `lr-sparkline`, `lr-stat`, `lr-table`, `lr-pagination`, `lr-gauge`, `lr-word-cloud`, `lr-heatmap`, `lr-sequence-strip`, `lr-tree`, `lr-tree-node`, `lr-flow-canvas`, `lr-flow-node`, `lr-flow-minimap`, `lr-flow-controls`, `lr-flow-run-overlay`, `lr-context-meter`, `lr-calendar`, `lr-timeline`, `lr-timeline-item`, `lr-file-tree`, `lr-env-list`, `lr-document-library`, `lr-graph-query-builder`, `lr-query-builder`
 
-- **Layout, navigation & structure** (`components/layout/`, 28) — `lr-split`, `lr-widget`, `lr-carousel`, `lr-carousel-item`, `lr-button-group`, `lr-scroller`, `lr-tabs`, `lr-stepper`, `lr-control-group`, `lr-segmented`, `lr-virtual-list`, `lr-app-rail`, `lr-app-rail-item`, `lr-responsive-panel`, `lr-menu`, `lr-menu-item`, `lr-dropdown-item`, `lr-dock-panel`, `lr-card`, `lr-command-palette`, `lr-details`, `lr-accordion`, `lr-accordion-item`, `lr-breadcrumb`, `lr-breadcrumb-item`, `lr-dashboard-grid`, `lr-drilldown-panel`, `lr-filter-bar`
+- **Layout, navigation & structure** (`components/layout/`, 30) — `lr-split`, `lr-widget`, `lr-carousel`, `lr-carousel-item`, `lr-button-group`, `lr-scroller`, `lr-tabs`, `lr-stepper`, `lr-control-group`, `lr-reorder-list`, `lr-reorder-item`, `lr-segmented`, `lr-virtual-list`, `lr-app-rail`, `lr-app-rail-item`, `lr-responsive-panel`, `lr-menu`, `lr-menu-item`, `lr-dropdown-item`, `lr-dock-panel`, `lr-card`, `lr-command-palette`, `lr-details`, `lr-accordion`, `lr-accordion-item`, `lr-breadcrumb`, `lr-breadcrumb-item`, `lr-dashboard-grid`, `lr-drilldown-panel`, `lr-filter-bar`
 
 - **Overlays, status & feedback** (`components/overlays/`, 19) — `lr-toast`, `lr-toast-item`, `lr-empty`, `lr-skeleton`, `lr-drawer`, `lr-dialog`, `lr-chip`, `lr-chip-group`, `lr-kbd`, `lr-popover`, `lr-tooltip`, `lr-dropdown`, `lr-spinner`, `lr-progress-bar`, `lr-progress-ring`, `lr-badge`, `lr-tag`, `lr-callout`, `lr-rating`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aceshooting/lyra-ui",
-  "version": "5.2.0",
+  "version": "6.0.0",
   "description": "Free, independent Lit web components: an open-source alternative to Shoelace and Web Awesome with accessible forms, dashboards, charts, and agent UI.",
   "keywords": [
     "web-components",
@@ -47,6 +47,7 @@
   },
   "files": [
     "dist",
+    "CHANGELOG.md",
     "custom-elements.json",
     "llms.txt",
     "llms-full.txt",
@@ -142,7 +143,6 @@
     "./dist/components/conversation/widget-renderer/widget-renderer.js",
     "./dist/components/data/calendar/calendar.js",
     "./dist/components/data/context-meter/context-meter.js",
-    "./dist/components/data/data-grid/data-grid.js",
     "./dist/components/data/document-library/document-library.js",
     "./dist/components/data/env-list/env-list.js",
     "./dist/components/data/file-tree/file-tree.js",
@@ -179,6 +179,7 @@
     "./dist/components/forms/input/input.js",
     "./dist/components/forms/input/number-input.js",
     "./dist/components/forms/input/time-input.js",
+    "./dist/components/forms/locale-picker/locale-picker.js",
     "./dist/components/forms/phone-input/phone-input.js",
     "./dist/components/forms/radio/radio-group.js",
     "./dist/components/forms/radio/radio.js",
@@ -210,6 +211,8 @@
     "./dist/components/layout/menu/dropdown-item.js",
     "./dist/components/layout/menu/menu-item.js",
     "./dist/components/layout/menu/menu.js",
+    "./dist/components/layout/reorder-list/reorder-item.js",
+    "./dist/components/layout/reorder-list/reorder-list.js",
     "./dist/components/layout/responsive-panel/responsive-panel.js",
     "./dist/components/layout/scroller/scroller.js",
     "./dist/components/layout/segmented/segmented.js",
@@ -394,7 +397,6 @@
     "./src/components/conversation/widget-renderer/widget-renderer.ts",
     "./src/components/data/calendar/calendar.ts",
     "./src/components/data/context-meter/context-meter.ts",
-    "./src/components/data/data-grid/data-grid.ts",
     "./src/components/data/document-library/document-library.ts",
     "./src/components/data/env-list/env-list.ts",
     "./src/components/data/file-tree/file-tree.ts",
@@ -431,6 +433,7 @@
     "./src/components/forms/input/input.ts",
     "./src/components/forms/input/number-input.ts",
     "./src/components/forms/input/time-input.ts",
+    "./src/components/forms/locale-picker/locale-picker.ts",
     "./src/components/forms/phone-input/phone-input.ts",
     "./src/components/forms/radio/radio-group.ts",
     "./src/components/forms/radio/radio.ts",
@@ -462,6 +465,8 @@
     "./src/components/layout/menu/dropdown-item.ts",
     "./src/components/layout/menu/menu-item.ts",
     "./src/components/layout/menu/menu.ts",
+    "./src/components/layout/reorder-list/reorder-item.ts",
+    "./src/components/layout/reorder-list/reorder-list.ts",
     "./src/components/layout/responsive-panel/responsive-panel.ts",
     "./src/components/layout/scroller/scroller.ts",
     "./src/components/layout/segmented/segmented.ts",

package/vscode-css-data.json

@@ -456,6 +456,13 @@
         "value": "**`<lr-button>`** (default: `var(--lr-font-size-m)`) — Font size of the internal button, re-assigned per `size` tier (the default is the `m` tier's value). `appearance=\"link\"` ignores it and inherits the ambient font instead."
       }
     },
+    {
+      "name": "--lr-button-gap",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-button>`** (default: `var(--lr-space-2xs)`) — Gap between the icon/label and any slotted content in the internal button. Unlike the size knobs above it does not vary by `size` tier. Override it to retune without a `::part(base)` rule."
+      }
+    },
     {
       "name": "--lr-button-group-gap",
       "description": {
@@ -533,6 +540,13 @@
         "value": "**`<lr-button>`** (default: `var(--lr-color-text-quiet)`) — Text color of `appearance=\"quiet\"`."
       }
     },
+    {
+      "name": "--lr-button-radius",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-button>`** (default: `var(--lr-radius)`) — Corner radius of the internal button. Does not vary by `size` tier. `appearance=\"link\"` ignores it (it renders with zero radius)."
+      }
+    },
     {
       "name": "--lr-button-size-2xs",
       "description": {
@@ -838,7 +852,7 @@
       "name": "--lr-chip-min-height",
       "description": {
         "kind": "markdown",
-        "value": "**`<lr-chip>`** (default: `var(--lr-size-1-5rem)`) — Minimum block size of an interactive (`removable`/`toggleable`) chip's tap target. `size` keeps `2xs`/`xs`/`s`/`m` at the `1.5rem` (24px) WCAG 2.2 SC 2.5.8 minimum and raises `l` to `var(--lr-size-1-75rem)` and `xl` to `var(--lr-size-2rem)`. Non-interactive display chips are unaffected by this floor."
+        "value": "**`<lr-chip>`** (default: `var(--lr-size-1-5rem)`) — Minimum block size of an interactive (`removable`/`toggleable`) chip's tap target. `size` keeps `3xs`/`2xs`/`xs`/`s`/`m` at the `1.5rem` (24px) WCAG 2.2 SC 2.5.8 minimum and raises `l` to `var(--lr-size-1-75rem)` and `xl` to `var(--lr-size-2rem)`. Non-interactive display chips are unaffected by this floor."
       }
     },
     {
@@ -953,6 +967,13 @@
         "value": "**`<lr-code-editor>`** (default: `2`) — The textarea's `tab-size`. The single channel for tab width — the class writes this token rather than setting `tab-size` directly."
       }
     },
+    {
+      "name": "--lr-color-picker-swatch-size",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-color-picker>`** — The swatch's inline and block size, scaled by `size`."
+      }
+    },
     {
       "name": "--lr-combobox-expand-size",
       "description": {
@@ -1163,6 +1184,13 @@
         "value": "**`<lr-csv-viewer>`** (default: `none`) — Maximum block size of `[part=\"body\"]` before it scrolls internally. The `maxHeight` property sets this token inline on `[part=\"base\"]`."
       }
     },
+    {
+      "name": "--lr-dashboard-grid-cell-hover-outline-color",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-dashboard-grid>`** (default: `var(--lr-color-border-strong)`) — Outline color of a cell's mouse-hover preview of its own `:focus-visible` ring (shown because every cell is a real focusable, draggable/resizable target). Set to `transparent` to opt out."
+      }
+    },
     {
       "name": "--lr-dashboard-grid-columns",
       "description": {
@@ -1184,13 +1212,6 @@
         "value": "**`<lr-dashboard-grid>`** (default: `var(--lr-size-5rem)`) — Row track height. Written inline on `[part=\"base\"]` from the `rowHeight` property (in px) on every render."
       }
     },
-    {
-      "name": "--lr-data-grid-row-selected-bg",
-      "description": {
-        "kind": "markdown",
-        "value": "**`<lr-data-grid>`** (default: `var(--lr-color-brand-quiet)`) — Background of the selected row's cells. Shadow Parts forbids an attribute selector after `::part()`, so `::part(row)[aria-selected]` is invalid CSS and the selected row could otherwise only be restyled by hijacking the library-wide `--lr-color-brand-quiet` token."
-      }
-    },
     {
       "name": "--lr-dataset-viewer-highlight-color",
       "description": {
@@ -1380,6 +1401,13 @@
         "value": "**`<lr-emoji-picker>`** (default: `var(--lr-space-2xs)`) — Gap between emoji within a windowed row."
       }
     },
+    {
+      "name": "--lr-emoji-picker-glyph-size",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-emoji-picker>`** (default: `var(--lr-font-size-lg)`) — Font size of the emoji glyph, scaled by the `size` property to keep the glyph proportional to the item box."
+      }
+    },
     {
       "name": "--lr-emoji-picker-item-size",
       "description": {
@@ -1583,6 +1611,13 @@
         "value": "**`<lr-flow-canvas>`** (default: `var(--lr-color-brand)`) — Outline color of the current (`aria-current`) node. Shadow Parts forbids an attribute selector after `::part()`, so the current node could otherwise only be restyled by hijacking the library-wide `--lr-color-brand` token."
       }
     },
+    {
+      "name": "--lr-flow-canvas-node-hover-outline-color",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-flow-canvas>`** (default: `var(--lr-color-border-strong)`) — Outline color of a node's mouse-hover preview of its own `:focus-visible` ring. Unlike the four state-scoped colors above this one is `:hover`-gated rather than attribute-gated, so a `::part(node):hover` override would lose to this rule's own higher internal specificity rather than to the `::part()[attr]` restriction those four work around. Set to `transparent` to opt out."
+      }
+    },
     {
       "name": "--lr-flow-minimap-block-size",
       "description": {
@@ -1982,6 +2017,48 @@
         "value": "**`<lr-lite-chart>`** (default: `var(--lr-color-brand)`) — Stroke for a bar/point whose category index is in `selectedIndex`."
       }
     },
+    {
+      "name": "--lr-locale-picker-expand-size",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-locale-picker>`** — Decorative expand-icon box size, scaled by `size`."
+      }
+    },
+    {
+      "name": "--lr-locale-picker-font-size",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-locale-picker>`** — Trigger font size, scaled by `size`."
+      }
+    },
+    {
+      "name": "--lr-locale-picker-option-active-bg",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-locale-picker>`** (default: `var(--lr-color-brand-quiet)`) — Background of a hovered or keyboard-active option row."
+      }
+    },
+    {
+      "name": "--lr-locale-picker-trigger-height",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-locale-picker>`** — Exact trigger height. Unset by default (a floor only via `-trigger-min-height`); set a length to both floor and cap the trigger, e.g. to pixel-match a sibling field in the same toolbar row."
+      }
+    },
+    {
+      "name": "--lr-locale-picker-trigger-min-height",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-locale-picker>`** — Trigger block-size floor, scaled by `size`."
+      }
+    },
+    {
+      "name": "--lr-locale-picker-trigger-padding",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-locale-picker>`** — Trigger padding shorthand, scaled by `size`."
+      }
+    },
     {
       "name": "--lr-markdown-font-mono",
       "description": {
@@ -2185,6 +2262,34 @@
         "value": "**`<lr-pdf-viewer>`** (default: `var(--lr-size-24rem)`) — Block size of the virtualized page list. Also settable via the `max-height` property."
       }
     },
+    {
+      "name": "--lr-phone-input-control-height",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-phone-input>`** — Exact input-wrapper height. Unset by default, which leaves `--lr-phone-input-control-min-height` as a floor only; set it to a length to both floor and cap the row (e.g. to pixel-match a sibling field in the same toolbar row). Because it is never declared by the component itself, it can be set from an ancestor or an outer-tree rule as well as inline on the element."
+      }
+    },
+    {
+      "name": "--lr-phone-input-control-min-height",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-phone-input>`** — Input-wrapper block-size floor, scaled by `size`."
+      }
+    },
+    {
+      "name": "--lr-phone-input-font-size",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-phone-input>`** — Input/flag/country-code/calling-code font size, scaled by `size`."
+      }
+    },
+    {
+      "name": "--lr-phone-input-padding-block",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-phone-input>`** — Input block-padding, scaled by `size`."
+      }
+    },
     {
       "name": "--lr-playback-icon-size",
       "description": {
@@ -2304,6 +2409,20 @@
         "value": "**`<lr-rating>`** (default: `var(--lr-font-size-xl)`) — Star size."
       }
     },
+    {
+      "name": "--lr-reorder-item-gap",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-reorder-item>`** (default: `var(--lr-space-xs)`) — Gap between the move buttons and content."
+      }
+    },
+    {
+      "name": "--lr-reorder-list-gap",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-reorder-list>`** (default: `var(--lr-space-2xs)`) — Gap between rows."
+      }
+    },
     {
       "name": "--lr-responsive-panel-overlay-color",
       "description": {
@@ -2752,6 +2871,20 @@
         "value": "**`<lr-svg-viewer>`** (default: `none`) — Maximum block size of the scrollable body before it scrolls internally. Also settable via the `max-height` property."
       }
     },
+    {
+      "name": "--lr-swatch-picker-fill-size",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-swatch-picker>`** (default: `var(--lr-size-1-5rem)`) — Visible fill/icon diameter for the swatch, swapped per tier."
+      }
+    },
+    {
+      "name": "--lr-swatch-picker-hit-size",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-swatch-picker>`** (default: `var(--lr-size-2-5rem)`) — Hit-area size (both min-inline-size and min-block-size) for the swatch button, swapped per tier and floored at 24px."
+      }
+    },
     {
       "name": "--lr-swatch-picker-selected-blur",
       "description": {
@@ -2997,6 +3130,13 @@
         "value": "**`<lr-time-range>`** (default: `var(--lr-color-on-brand)`) — Text color of the active preset button."
       }
     },
+    {
+      "name": "--lr-time-range-size-scale",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-time-range>`** (default: `1`) — Unitless multiplier applied proportionally to the handle, track, and preset-button dimensions based on the current `size` tier; the drag hit-area is floored at 24px (WCAG 2.5.8)."
+      }
+    },
     {
       "name": "--lr-timeline-gap",
       "description": {
@@ -3123,6 +3263,20 @@
         "value": "**`<lr-toast>`** (default: `var(--lr-size-28rem)`) — Inline size of the stack, capped by the viewport minus the placement insets."
       }
     },
+    {
+      "name": "--lr-token-input-control-height",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-token-input>`** — Exact input-wrapper height. Unset by default, which leaves `--lr-token-input-control-min-height` as a floor only; set it to a length to both floor and cap the row (e.g. to pixel-match a sibling field in the same toolbar row). Because it is never declared by the component itself, it can be set from an ancestor or an outer-tree rule as well as inline on the element."
+      }
+    },
+    {
+      "name": "--lr-token-input-control-min-height",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-token-input>`** — Input-wrapper block-size floor, scaled by `size`."
+      }
+    },
     {
       "name": "--lr-token-input-editor-inline-size",
       "description": {
@@ -3130,6 +3284,13 @@
         "value": "**`<lr-token-input>`** (default: `var(--lr-size-6rem)`) — Inline size of the inline token editor opened by `editable`."
       }
     },
+    {
+      "name": "--lr-token-input-font-size",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-token-input>`** — Input-wrapper/token font size, scaled by `size`."
+      }
+    },
     {
       "name": "--lr-token-input-input-inline-size",
       "description": {
@@ -3144,6 +3305,13 @@
         "value": "**`<lr-token-input>`** (default: `var(--lr-size-4rem)`) — Inline-size floor of the native text input, so it stays usable once tokens wrap."
       }
     },
+    {
+      "name": "--lr-token-input-padding",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-token-input>`** — Input-wrapper padding, scaled by `size`."
+      }
+    },
     {
       "name": "--lr-tool-approval-dialog-mono-font",
       "description": {
@@ -3361,6 +3529,13 @@
         "value": "**`<lr-virtual-list>`** (default: `var(--lr-size-24rem)`) — The scroll viewport's height. A virtualized list needs a bounded scroll extent, so this ships a default rather than collapsing to zero when a caller does not size the host."
       }
     },
+    {
+      "name": "--lr-virtual-list-hover-outline-color",
+      "description": {
+        "kind": "markdown",
+        "value": "**`<lr-virtual-list>`** (default: `var(--lr-color-border-strong)`) — Outline color of the mouse-hover preview on `[part=\"base\"]` (a subtler, always-focusable-target preview of its own `:focus-visible` ring). Set to `transparent` to opt out of the hover treatment entirely."
+      }
+    },
     {
       "name": "--lr-widget-backdrop-inset",
       "description": {