feat(ui): build LayoutSplitter and CustomScrollbar for real
Both advertised behaviour they did not have. LayoutSplitter declared resizeStart, resize and resizeEnd with no pointer handling whatsoever, so a caller wired up @resize and received nothing, for ever, with no error, and its props were columns, gap and maxWidth copied from a grid scaffold. CustomScrollbar was the same shape with a scroll output. The splitter now resizes. Dragging lives in the reactive runtime behind data-wrn-splitter, because a pointermove fires far too often to route through a client function and a state write made in that callback is dropped; the resolved size is held on the container as a --wrn-split custom property and the component grids from it. The handle is a real separator: arrow keys step it, Home and End go to the bounds rather than to nothing, and it carries aria-valuenow, aria-valuemin and aria-valuemax. minSize fixes both bounds so neither pane can be dragged away and left unrecoverable. CustomScrollbar is CSS rather than script -- scrollbar-width and scrollbar-color with webkit rules for the engines that still need them -- and its fake scroll output is removed rather than left unimplemented, since a caller can listen for a plain scroll event. The test harness needed a fix too: mount did not bind the window CustomEvent, so the runtime built events from the host global and happy-dom listeners never matched them, which made anything dispatched look silently lost. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
"generatedFrom": "packages/ui/component-reference.json",
|
||||
"componentCount": 108,
|
||||
"categoryCount": 11,
|
||||
"totalDemoCount": 421,
|
||||
"totalDemoCount": 419,
|
||||
"components": [
|
||||
{
|
||||
"name": "Accordion",
|
||||
@@ -393,11 +393,11 @@
|
||||
"slug": "custom-scrollbar",
|
||||
"category": "layout",
|
||||
"purpose": "Theme-aware, responsive custom scrollbar component.",
|
||||
"demoCount": 3,
|
||||
"propCount": 6,
|
||||
"demoCount": 2,
|
||||
"propCount": 7,
|
||||
"slots": ["default"],
|
||||
"events": ["scroll"],
|
||||
"profiled": false
|
||||
"events": [],
|
||||
"profiled": true
|
||||
},
|
||||
{
|
||||
"name": "DataMap",
|
||||
@@ -690,11 +690,11 @@
|
||||
"slug": "layout-splitter",
|
||||
"category": "layout",
|
||||
"purpose": "Theme-aware, responsive layout splitter component.",
|
||||
"demoCount": 3,
|
||||
"propCount": 6,
|
||||
"slots": ["default"],
|
||||
"events": ["resizeStart", "resize", "resizeEnd"],
|
||||
"profiled": false
|
||||
"demoCount": 2,
|
||||
"propCount": 7,
|
||||
"slots": ["start", "end", "default"],
|
||||
"events": ["resize"],
|
||||
"profiled": true
|
||||
},
|
||||
{
|
||||
"name": "LegendIndicator",
|
||||
|
||||
Reference in New Issue
Block a user