From 6a9c48a207d59523911bbb9c9b2aef18d11c4263 Mon Sep 17 00:00:00 2001 From: Ajay Ghanwat Date: Fri, 7 Aug 2026 21:46:42 +0530 Subject: [PATCH] perf(ui): remove dead runtime controllers and unused stylesheet families Two orphaned controllers in the reactive runtime targeted markup nothing emits any more: hydrateSidebarControllers looked for .wire-sidebar-shell and friends, which the Sidebar rewrite replaced with BEM classes earlier today, and hydrateDropdownControllers looked for [data-wrn-dropdown], which no component or compiler output has ever produced. ui.css loses the matching legacy sidebar rules, the wire-mega-menu family left behind when the MegaMenu scaffold was replaced, and a set of self-contained application-pattern families that nothing references. Utility layers are deliberately kept even where an individual member is not name-checked anywhere. wire-bg-primary is documented and tested while wire-bg-secondary is not, but they are one public family and splitting them would be incoherent. Co-Authored-By: Claude Opus 5 --- docs/ui-visual-contract-0.8.json | 2 +- .../component-showcase/showcase-manifest.json | 813 +++++++++++++--- packages/csr/src/reactive-runtime.ts | 81 -- packages/ui/component-catalog.json | 4 +- packages/ui/component-reference.json | 813 +++++++++++++--- packages/ui/ui.css | 920 ------------------ 6 files changed, 1342 insertions(+), 1291 deletions(-) diff --git a/docs/ui-visual-contract-0.8.json b/docs/ui-visual-contract-0.8.json index 07838c66..eb83c9d7 100644 --- a/docs/ui-visual-contract-0.8.json +++ b/docs/ui-visual-contract-0.8.json @@ -110,6 +110,6 @@ "packages/ui/components/progress.wrn": "ba6f4dfcc00f04f34e9533be675bb4a6200c3cdcd7d03fc597377e48520fdec7", "packages/ui/components/skeleton.wrn": "ceec8af147b8be08155500e378393ac7c72d819da61b62191c076c80e943d5a9", "packages/ui/components/spinner.wrn": "abc4ee3ede2e019289257e9009eee012c880a85839cc220fac6dbe1b780caf52", - "packages/ui/ui.css": "f71641efb0c98b673af70c10dbcea8e693de258ce8620b4f84c64553ea70204e" + "packages/ui/ui.css": "3138b86f269b6f7e67922ef2c56918444d562b11f4ae6f1fab98b63805cd78dc" } } diff --git a/examples/component-showcase/showcase-manifest.json b/examples/component-showcase/showcase-manifest.json index 0f126d2b..c629b994 100644 --- a/examples/component-showcase/showcase-manifest.json +++ b/examples/component-showcase/showcase-manifest.json @@ -13,7 +13,11 @@ "demoCount": 3, "propCount": 17, "slots": [], - "events": ["change", "open", "close"], + "events": [ + "change", + "open", + "close" + ], "profiled": false }, { @@ -24,8 +28,16 @@ "purpose": "Theme-aware, responsive advanced date picker component.", "demoCount": 3, "propCount": 7, - "slots": ["default"], - "events": ["input", "change", "open", "close", "clear"], + "slots": [ + "default" + ], + "events": [ + "input", + "change", + "open", + "close", + "clear" + ], "profiled": false }, { @@ -36,8 +48,15 @@ "purpose": "Theme-aware, responsive advanced range slider component.", "demoCount": 3, "propCount": 7, - "slots": ["default"], - "events": ["input", "change", "start", "end"], + "slots": [ + "default" + ], + "events": [ + "input", + "change", + "start", + "end" + ], "profiled": false }, { @@ -49,7 +68,16 @@ "demoCount": 41, "propCount": 51, "slots": [], - "events": ["search", "select", "change", "clear", "open", "close", "load", "error"], + "events": [ + "search", + "select", + "change", + "clear", + "open", + "close", + "load", + "error" + ], "profiled": false }, { @@ -61,7 +89,10 @@ "demoCount": 3, "propCount": 21, "slots": [], - "events": ["dismiss", "action"], + "events": [ + "dismiss", + "action" + ], "profiled": false }, { @@ -73,7 +104,9 @@ "demoCount": 3, "propCount": 19, "slots": [], - "events": ["dismiss"], + "events": [ + "dismiss" + ], "profiled": true }, { @@ -84,8 +117,16 @@ "purpose": "Reusable auth form component.", "demoCount": 3, "propCount": 13, - "slots": ["default"], - "events": ["submit", "change", "input", "focus", "blur"], + "slots": [ + "default" + ], + "events": [ + "submit", + "change", + "input", + "focus", + "blur" + ], "profiled": false }, { @@ -96,7 +137,10 @@ "purpose": "Reusable auth split layout component.", "demoCount": 3, "propCount": 8, - "slots": ["aside-extra", "form"], + "slots": [ + "aside-extra", + "form" + ], "events": [], "profiled": false }, @@ -109,7 +153,11 @@ "demoCount": 3, "propCount": 18, "slots": [], - "events": ["load", "error", "click"], + "events": [ + "load", + "error", + "click" + ], "profiled": false }, { @@ -121,7 +169,9 @@ "demoCount": 3, "propCount": 12, "slots": [], - "events": ["overflow"], + "events": [ + "overflow" + ], "profiled": false }, { @@ -145,7 +195,9 @@ "demoCount": 3, "propCount": 22, "slots": [], - "events": ["dismiss"], + "events": [ + "dismiss" + ], "profiled": false }, { @@ -156,7 +208,9 @@ "purpose": "Theme-aware, responsive blockquote component.", "demoCount": 3, "propCount": 13, - "slots": ["default"], + "slots": [ + "default" + ], "events": [], "profiled": false }, @@ -169,7 +223,9 @@ "demoCount": 3, "propCount": 12, "slots": [], - "events": ["select"], + "events": [ + "select" + ], "profiled": true }, { @@ -180,8 +236,14 @@ "purpose": "Theme-aware, responsive button component.", "demoCount": 8, "propCount": 25, - "slots": ["default"], - "events": ["click", "focus", "blur"], + "slots": [ + "default" + ], + "events": [ + "click", + "focus", + "blur" + ], "profiled": false }, { @@ -192,8 +254,14 @@ "purpose": "Theme-aware, responsive button group component.", "demoCount": 3, "propCount": 13, - "slots": ["default"], - "events": ["click", "select", "change"], + "slots": [ + "default" + ], + "events": [ + "click", + "select", + "change" + ], "profiled": false }, { @@ -204,7 +272,12 @@ "purpose": "Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.", "demoCount": 3, "propCount": 25, - "slots": ["default", "actions", "visual", "footer"], + "slots": [ + "default", + "actions", + "visual", + "footer" + ], "events": [], "profiled": true }, @@ -216,8 +289,17 @@ "purpose": "Group related content in a responsive themed surface with title, description, content, and supporting slots.", "demoCount": 3, "propCount": 31, - "slots": ["default"], - "events": ["click", "action", "navigate", "dismiss", "load", "error"], + "slots": [ + "default" + ], + "events": [ + "click", + "action", + "navigate", + "dismiss", + "load", + "error" + ], "profiled": true }, { @@ -228,7 +310,9 @@ "purpose": "Theme-aware, responsive carousel component.", "demoCount": 3, "propCount": 22, - "slots": ["default"], + "slots": [ + "default" + ], "events": [ "initialize", "change", @@ -251,8 +335,14 @@ "purpose": "Theme-aware, responsive chart component.", "demoCount": 3, "propCount": 7, - "slots": ["default"], - "events": ["select", "dataPointClick", "legendToggle"], + "slots": [ + "default" + ], + "events": [ + "select", + "dataPointClick", + "legendToggle" + ], "profiled": false }, { @@ -263,8 +353,15 @@ "purpose": "Theme-aware, responsive chat bubble component.", "demoCount": 3, "propCount": 11, - "slots": ["default"], - "events": ["action", "messageClick", "avatarClick", "linkClick"], + "slots": [ + "default" + ], + "events": [ + "action", + "messageClick", + "avatarClick", + "linkClick" + ], "profiled": false }, { @@ -275,8 +372,16 @@ "purpose": "Theme-aware, responsive checkbox component.", "demoCount": 3, "propCount": 27, - "slots": ["default"], - "events": ["input", "change", "focus", "blur", "invalid"], + "slots": [ + "default" + ], + "events": [ + "input", + "change", + "focus", + "blur", + "invalid" + ], "profiled": false }, { @@ -287,8 +392,14 @@ "purpose": "Theme-aware, responsive clipboard component.", "demoCount": 3, "propCount": 7, - "slots": ["default"], - "events": ["copy", "success", "error"], + "slots": [ + "default" + ], + "events": [ + "copy", + "success", + "error" + ], "profiled": false }, { @@ -299,8 +410,14 @@ "purpose": "Theme-aware, responsive collapse component.", "demoCount": 3, "propCount": 8, - "slots": ["default"], - "events": ["toggle", "open", "close"], + "slots": [ + "default" + ], + "events": [ + "toggle", + "open", + "close" + ], "profiled": false }, { @@ -312,7 +429,12 @@ "demoCount": 3, "propCount": 19, "slots": [], - "events": ["input", "change", "focus", "blur"], + "events": [ + "input", + "change", + "focus", + "blur" + ], "profiled": false }, { @@ -323,7 +445,9 @@ "purpose": "Create responsive balanced content columns with configurable count, gap, density, and maximum width.", "demoCount": 3, "propCount": 6, - "slots": ["default"], + "slots": [ + "default" + ], "events": [], "profiled": true }, @@ -336,7 +460,16 @@ "demoCount": 21, "propCount": 41, "slots": [], - "events": ["search", "select", "change", "clear", "open", "close", "load", "error"], + "events": [ + "search", + "select", + "change", + "clear", + "open", + "close", + "load", + "error" + ], "profiled": false }, { @@ -347,8 +480,13 @@ "purpose": "Theme-aware, responsive confetti component.", "demoCount": 3, "propCount": 7, - "slots": ["default"], - "events": ["start", "complete"], + "slots": [ + "default" + ], + "events": [ + "start", + "complete" + ], "profiled": false }, { @@ -359,7 +497,9 @@ "purpose": "Constrain and align page content with responsive gutters and compact, wide, or full width options.", "demoCount": 3, "propCount": 6, - "slots": ["default"], + "slots": [ + "default" + ], "events": [], "profiled": true }, @@ -371,8 +511,18 @@ "purpose": "Open an accessible keyboard-aware action menu from pointer or keyboard context interactions.", "demoCount": 3, "propCount": 18, - "slots": ["trigger", "header", "default", "footer"], - "events": ["open", "close", "select", "action"], + "slots": [ + "trigger", + "header", + "default", + "footer" + ], + "events": [ + "open", + "close", + "select", + "action" + ], "profiled": true }, { @@ -384,7 +534,11 @@ "demoCount": 3, "propCount": 13, "slots": [], - "events": ["copy", "success", "error"], + "events": [ + "copy", + "success", + "error" + ], "profiled": false }, { @@ -395,8 +549,12 @@ "purpose": "Theme-aware, responsive custom scrollbar component.", "demoCount": 3, "propCount": 6, - "slots": ["default"], - "events": ["scroll"], + "slots": [ + "default" + ], + "events": [ + "scroll" + ], "profiled": false }, { @@ -407,8 +565,13 @@ "purpose": "Theme-aware, responsive data map component.", "demoCount": 3, "propCount": 7, - "slots": ["default"], - "events": ["select", "change"], + "slots": [ + "default" + ], + "events": [ + "select", + "change" + ], "profiled": false }, { @@ -419,7 +582,9 @@ "purpose": "Sortable, filterable, paginated data table with row selection.", "demoCount": 9, "propCount": 29, - "slots": ["default"], + "slots": [ + "default" + ], "events": [ "sort", "search", @@ -441,7 +606,15 @@ "demoCount": 3, "propCount": 25, "slots": [], - "events": ["input", "change", "open", "close", "focus", "blur", "invalid"], + "events": [ + "input", + "change", + "open", + "close", + "focus", + "blur", + "invalid" + ], "profiled": false }, { @@ -452,8 +625,13 @@ "purpose": "Theme-aware, responsive device frame component.", "demoCount": 3, "propCount": 14, - "slots": ["default"], - "events": ["change", "rotate"], + "slots": [ + "default" + ], + "events": [ + "change", + "rotate" + ], "profiled": false }, { @@ -476,8 +654,17 @@ "purpose": "Theme-aware, responsive drag and drop component.", "demoCount": 3, "propCount": 7, - "slots": ["default"], - "events": ["dragStart", "dragEnd", "dragEnter", "dragLeave", "drop", "change"], + "slots": [ + "default" + ], + "events": [ + "dragStart", + "dragEnd", + "dragEnter", + "dragLeave", + "drop", + "change" + ], "profiled": false }, { @@ -488,8 +675,17 @@ "purpose": "Present responsive modal side or bottom content with focus management, backdrop behavior, slots, and close events.", "demoCount": 3, "propCount": 20, - "slots": ["trigger", "header", "default", "footer"], - "events": ["open", "close", "cancel"], + "slots": [ + "trigger", + "header", + "default", + "footer" + ], + "events": [ + "open", + "close", + "cancel" + ], "profiled": true }, { @@ -500,8 +696,19 @@ "purpose": "Open an accessible anchored menu with keyboard navigation, item selection, actions, and responsive placement.", "demoCount": 3, "propCount": 17, - "slots": ["trigger", "header", "default", "footer"], - "events": ["toggle", "open", "close", "select", "action"], + "slots": [ + "trigger", + "header", + "default", + "footer" + ], + "events": [ + "toggle", + "open", + "close", + "select", + "action" + ], "profiled": true }, { @@ -512,7 +719,12 @@ "purpose": "Present one linked feature or service with media, icon, badge, description, and action.", "demoCount": 3, "propCount": 28, - "slots": ["media", "icon", "default", "footer"], + "slots": [ + "media", + "icon", + "default", + "footer" + ], "events": [], "profiled": true }, @@ -524,7 +736,9 @@ "purpose": "Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.", "demoCount": 3, "propCount": 14, - "slots": ["default"], + "slots": [ + "default" + ], "events": [], "profiled": true }, @@ -536,7 +750,10 @@ "purpose": "Present a compact feature or benefit with a styled icon, title, description, badge, and optional link.", "demoCount": 3, "propCount": 14, - "slots": ["default", "footer"], + "slots": [ + "default", + "footer" + ], "events": [], "profiled": true }, @@ -549,7 +766,15 @@ "demoCount": 3, "propCount": 21, "slots": [], - "events": ["input", "change", "focus", "blur", "select", "clear", "invalid"], + "events": [ + "input", + "change", + "focus", + "blur", + "select", + "clear", + "invalid" + ], "profiled": false }, { @@ -560,8 +785,18 @@ "purpose": "Theme-aware, responsive file upload component.", "demoCount": 3, "propCount": 7, - "slots": ["default"], - "events": ["select", "upload", "progress", "success", "error", "cancel", "remove"], + "slots": [ + "default" + ], + "events": [ + "select", + "upload", + "progress", + "success", + "error", + "cancel", + "remove" + ], "profiled": false }, { @@ -573,7 +808,11 @@ "demoCount": 3, "propCount": 13, "slots": [], - "events": ["cancel", "retry", "complete"], + "events": [ + "cancel", + "retry", + "complete" + ], "profiled": false }, { @@ -584,8 +823,16 @@ "purpose": "Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.", "demoCount": 3, "propCount": 8, - "slots": ["pre-footer", "post-footer", "copyright-left", "copyright-right"], - "events": ["select", "action"], + "slots": [ + "pre-footer", + "post-footer", + "copyright-left", + "copyright-right" + ], + "events": [ + "select", + "action" + ], "profiled": true }, { @@ -596,7 +843,9 @@ "purpose": "Arrange arbitrary content in a responsive configurable CSS grid with stable columns, gaps, alignment, and width.", "demoCount": 3, "propCount": 6, - "slots": ["default"], + "slots": [ + "default" + ], "events": [], "profiled": true }, @@ -608,7 +857,14 @@ "purpose": "Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel.", "demoCount": 3, "propCount": 38, - "slots": ["eyebrow", "actions", "trust", "default", "visual", "footer"], + "slots": [ + "eyebrow", + "actions", + "trust", + "default", + "visual", + "footer" + ], "events": [], "profiled": true }, @@ -620,7 +876,9 @@ "purpose": "Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking.", "demoCount": 3, "propCount": 8, - "slots": ["default"], + "slots": [ + "default" + ], "events": [], "profiled": true }, @@ -632,7 +890,9 @@ "purpose": "Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment.", "demoCount": 3, "propCount": 9, - "slots": ["default"], + "slots": [ + "default" + ], "events": [], "profiled": true }, @@ -645,7 +905,15 @@ "demoCount": 3, "propCount": 28, "slots": [], - "events": ["input", "change", "focus", "blur", "invalid", "keydown", "keyup"], + "events": [ + "input", + "change", + "focus", + "blur", + "invalid", + "keydown", + "keyup" + ], "profiled": false }, { @@ -657,7 +925,14 @@ "demoCount": 3, "propCount": 23, "slots": [], - "events": ["input", "change", "focus", "blur", "submit", "action"], + "events": [ + "input", + "change", + "focus", + "blur", + "submit", + "action" + ], "profiled": false }, { @@ -669,7 +944,12 @@ "demoCount": 12, "propCount": 40, "slots": [], - "events": ["input", "change", "increment", "decrement"], + "events": [ + "input", + "change", + "increment", + "decrement" + ], "profiled": false }, { @@ -680,7 +960,9 @@ "purpose": "Theme-aware, responsive kbd component.", "demoCount": 3, "propCount": 4, - "slots": ["default"], + "slots": [ + "default" + ], "events": [], "profiled": false }, @@ -692,8 +974,14 @@ "purpose": "Theme-aware, responsive layout splitter component.", "demoCount": 3, "propCount": 6, - "slots": ["default"], - "events": ["resizeStart", "resize", "resizeEnd"], + "slots": [ + "default" + ], + "events": [ + "resizeStart", + "resize", + "resizeEnd" + ], "profiled": false }, { @@ -704,8 +992,13 @@ "purpose": "Theme-aware, responsive legend indicator component.", "demoCount": 3, "propCount": 7, - "slots": ["default"], - "events": ["toggle", "select"], + "slots": [ + "default" + ], + "events": [ + "toggle", + "select" + ], "profiled": false }, { @@ -716,7 +1009,9 @@ "purpose": "Render an accessible internal or external link with target, relation, size, color, and public focus or click events.", "demoCount": 3, "propCount": 8, - "slots": ["default"], + "slots": [ + "default" + ], "events": [], "profiled": true }, @@ -728,7 +1023,9 @@ "purpose": "Present structured responsive linked or status items with icons, descriptions, actions, and selection events.", "demoCount": 3, "propCount": 7, - "slots": ["default"], + "slots": [ + "default" + ], "events": [], "profiled": true }, @@ -740,8 +1037,13 @@ "purpose": "Theme-aware, responsive list group component.", "demoCount": 3, "propCount": 7, - "slots": ["default"], - "events": ["select", "change"], + "slots": [ + "default" + ], + "events": [ + "select", + "change" + ], "profiled": false }, { @@ -752,7 +1054,9 @@ "purpose": "Present responsive location information and markers with map-ready metadata and movement or marker events.", "demoCount": 3, "propCount": 7, - "slots": ["default"], + "slots": [ + "default" + ], "events": [], "profiled": true }, @@ -764,7 +1068,11 @@ "purpose": "Introduce marketing content with an eyebrow, title, description, and optional linked action.", "demoCount": 3, "propCount": 12, - "slots": ["icon", "actions", "default"], + "slots": [ + "icon", + "actions", + "default" + ], "events": [], "profiled": true }, @@ -776,7 +1084,9 @@ "purpose": "Continuously present responsive labels, partners, notices, or capabilities with pause and resume behavior.", "demoCount": 3, "propCount": 7, - "slots": ["default"], + "slots": [ + "default" + ], "events": [], "profiled": true }, @@ -788,8 +1098,14 @@ "purpose": "Theme-aware, responsive mega menu component.", "demoCount": 2, "propCount": 8, - "slots": ["default"], - "events": ["open", "close", "select"], + "slots": [ + "default" + ], + "events": [ + "open", + "close", + "select" + ], "profiled": true }, { @@ -800,8 +1116,14 @@ "purpose": "Display one operational metric with value, suffix, description, icon, trend, progress, and optional action.", "demoCount": 3, "propCount": 28, - "slots": ["default", "footer"], - "events": ["select", "action"], + "slots": [ + "default", + "footer" + ], + "events": [ + "select", + "action" + ], "profiled": true }, { @@ -812,8 +1134,13 @@ "purpose": "Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.", "demoCount": 3, "propCount": 13, - "slots": ["default"], - "events": ["select", "action"], + "slots": [ + "default" + ], + "events": [ + "select", + "action" + ], "profiled": true }, { @@ -824,8 +1151,18 @@ "purpose": "Present an accessible modal dialog with focus management, confirmation, cancellation, slots, and responsive sizing.", "demoCount": 3, "propCount": 29, - "slots": ["trigger", "header", "default", "footer"], - "events": ["open", "close", "cancel", "confirm"], + "slots": [ + "trigger", + "header", + "default", + "footer" + ], + "events": [ + "open", + "close", + "cancel", + "confirm" + ], "profiled": true }, { @@ -836,8 +1173,12 @@ "purpose": "Theme-aware, responsive nav component.", "demoCount": 3, "propCount": 9, - "slots": ["default"], - "events": ["select"], + "slots": [ + "default" + ], + "events": [ + "select" + ], "profiled": true }, { @@ -848,8 +1189,17 @@ "purpose": "Theme-aware, responsive navbar component.", "demoCount": 3, "propCount": 13, - "slots": ["topbar", "actions"], - "events": ["toggle", "open", "close", "select", "action"], + "slots": [ + "topbar", + "actions" + ], + "events": [ + "toggle", + "open", + "close", + "select", + "action" + ], "profiled": false }, { @@ -860,7 +1210,11 @@ "purpose": "Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions.", "demoCount": 3, "propCount": 25, - "slots": ["meta", "actions", "default"], + "slots": [ + "meta", + "actions", + "default" + ], "events": [], "profiled": true }, @@ -872,8 +1226,14 @@ "purpose": "Theme-aware, responsive pagination component.", "demoCount": 3, "propCount": 12, - "slots": ["default"], - "events": ["change", "previous", "next"], + "slots": [ + "default" + ], + "events": [ + "change", + "previous", + "next" + ], "profiled": true }, { @@ -885,7 +1245,14 @@ "demoCount": 16, "propCount": 26, "slots": [], - "events": ["input", "change", "complete", "paste", "clear", "error"], + "events": [ + "input", + "change", + "complete", + "paste", + "clear", + "error" + ], "profiled": false }, { @@ -896,8 +1263,18 @@ "purpose": "Display anchored supporting content with configurable trigger, placement, responsive sizing, and open or close events.", "demoCount": 3, "propCount": 23, - "slots": ["trigger", "header", "default", "footer"], - "events": ["toggle", "open", "close", "action"], + "slots": [ + "trigger", + "header", + "default", + "footer" + ], + "events": [ + "toggle", + "open", + "close", + "action" + ], "profiled": true }, { @@ -908,8 +1285,13 @@ "purpose": "Reusable portal dashboard component.", "demoCount": 3, "propCount": 14, - "slots": ["hero-action"], - "events": ["action", "navigate"], + "slots": [ + "hero-action" + ], + "events": [ + "action", + "navigate" + ], "profiled": false }, { @@ -921,7 +1303,11 @@ "demoCount": 3, "propCount": 9, "slots": [], - "events": ["theme", "color", "language"], + "events": [ + "theme", + "color", + "language" + ], "profiled": false }, { @@ -944,7 +1330,11 @@ "purpose": "Provide the outer responsive structure, width, background, slots, overflow, and minimum-height behavior for public pages.", "demoCount": 3, "propCount": 10, - "slots": ["before", "default", "after"], + "slots": [ + "before", + "default", + "after" + ], "events": [], "profiled": true }, @@ -957,7 +1347,13 @@ "demoCount": 3, "propCount": 25, "slots": [], - "events": ["input", "change", "focus", "blur", "invalid"], + "events": [ + "input", + "change", + "focus", + "blur", + "invalid" + ], "profiled": false }, { @@ -969,7 +1365,12 @@ "demoCount": 3, "propCount": 26, "slots": [], - "events": ["input", "change", "focus", "blur"], + "events": [ + "input", + "change", + "focus", + "blur" + ], "profiled": false }, { @@ -980,8 +1381,13 @@ "purpose": "Theme-aware, responsive rating component.", "demoCount": 3, "propCount": 7, - "slots": ["default"], - "events": ["input", "change"], + "slots": [ + "default" + ], + "events": [ + "input", + "change" + ], "profiled": false }, { @@ -992,8 +1398,12 @@ "purpose": "Theme-aware, responsive scrollspy component.", "demoCount": 2, "propCount": 7, - "slots": ["default"], - "events": ["change"], + "slots": [ + "default" + ], + "events": [ + "change" + ], "profiled": true }, { @@ -1016,7 +1426,9 @@ "purpose": "Create a responsive themed page section with controlled spacing, width, borders, and surface treatment.", "demoCount": 3, "propCount": 10, - "slots": ["default"], + "slots": [ + "default" + ], "events": [], "profiled": true }, @@ -1028,7 +1440,11 @@ "purpose": "Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.", "demoCount": 3, "propCount": 10, - "slots": ["icon", "default", "actions"], + "slots": [ + "icon", + "default", + "actions" + ], "events": [], "profiled": true }, @@ -1041,7 +1457,15 @@ "demoCount": 3, "propCount": 22, "slots": [], - "events": ["input", "change", "focus", "blur", "open", "close", "invalid"], + "events": [ + "input", + "change", + "focus", + "blur", + "open", + "close", + "invalid" + ], "profiled": false }, { @@ -1052,8 +1476,16 @@ "purpose": "Theme-aware, responsive sidebar component.", "demoCount": 2, "propCount": 8, - "slots": ["default", "drawer"], - "events": ["toggle", "open", "close", "select"], + "slots": [ + "default", + "drawer" + ], + "events": [ + "toggle", + "open", + "close", + "select" + ], "profiled": true }, { @@ -1088,7 +1520,12 @@ "purpose": "Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel.", "demoCount": 3, "propCount": 31, - "slots": ["default", "actions", "trust", "visual"], + "slots": [ + "default", + "actions", + "trust", + "visual" + ], "events": [], "profiled": true }, @@ -1112,8 +1549,13 @@ "purpose": "Theme-aware, responsive stepper component.", "demoCount": 3, "propCount": 8, - "slots": ["step-{index}", "default"], - "events": ["change"], + "slots": [ + "step-{index}", + "default" + ], + "events": [ + "change" + ], "profiled": true }, { @@ -1125,7 +1567,11 @@ "demoCount": 6, "propCount": 27, "slots": [], - "events": ["input", "change", "strength"], + "events": [ + "input", + "change", + "strength" + ], "profiled": false }, { @@ -1136,7 +1582,9 @@ "purpose": "Theme-aware, responsive styled icon component.", "demoCount": 3, "propCount": 7, - "slots": ["default"], + "slots": [ + "default" + ], "events": [], "profiled": false }, @@ -1149,7 +1597,12 @@ "demoCount": 3, "propCount": 20, "slots": [], - "events": ["input", "change", "focus", "blur"], + "events": [ + "input", + "change", + "focus", + "blur" + ], "profiled": false }, { @@ -1160,8 +1613,14 @@ "purpose": "Switch between related responsive content panels with horizontal or vertical orientation and selection events.", "demoCount": 4, "propCount": 9, - "slots": ["panel-{valueOf(item, index)}", "default"], - "events": ["change", "select"], + "slots": [ + "panel-{valueOf(item, index)}", + "default" + ], + "events": [ + "change", + "select" + ], "profiled": true }, { @@ -1173,7 +1632,11 @@ "demoCount": 3, "propCount": 14, "slots": [], - "events": ["click", "focus", "blur"], + "events": [ + "click", + "focus", + "blur" + ], "profiled": true }, { @@ -1185,7 +1648,13 @@ "demoCount": 3, "propCount": 23, "slots": [], - "events": ["input", "change", "focus", "blur", "invalid"], + "events": [ + "input", + "change", + "focus", + "blur", + "invalid" + ], "profiled": false }, { @@ -1197,7 +1666,15 @@ "demoCount": 3, "propCount": 26, "slots": [], - "events": ["input", "change", "focus", "blur", "open", "close", "invalid"], + "events": [ + "input", + "change", + "focus", + "blur", + "open", + "close", + "invalid" + ], "profiled": false }, { @@ -1208,7 +1685,9 @@ "purpose": "Present responsive chronological activity, milestones, or workflow status with rich item metadata.", "demoCount": 3, "propCount": 7, - "slots": ["default"], + "slots": [ + "default" + ], "events": [], "profiled": true }, @@ -1220,8 +1699,13 @@ "purpose": "Theme-aware, responsive toast component.", "demoCount": 3, "propCount": 7, - "slots": ["default"], - "events": ["dismiss", "action"], + "slots": [ + "default" + ], + "events": [ + "dismiss", + "action" + ], "profiled": false }, { @@ -1232,8 +1716,15 @@ "purpose": "Theme-aware, responsive toast notifications component.", "demoCount": 3, "propCount": 7, - "slots": ["default"], - "events": ["add", "dismiss", "clear", "action"], + "slots": [ + "default" + ], + "events": [ + "add", + "dismiss", + "clear", + "action" + ], "profiled": false }, { @@ -1245,7 +1736,11 @@ "demoCount": 1, "propCount": 15, "slots": [], - "events": ["show", "dismiss", "action"], + "events": [ + "show", + "dismiss", + "action" + ], "profiled": true }, { @@ -1257,7 +1752,10 @@ "demoCount": 3, "propCount": 23, "slots": [], - "events": ["change", "toggle"], + "events": [ + "change", + "toggle" + ], "profiled": false }, { @@ -1269,7 +1767,11 @@ "demoCount": 10, "propCount": 24, "slots": [], - "events": ["input", "change", "toggle"], + "events": [ + "input", + "change", + "toggle" + ], "profiled": false }, { @@ -1280,8 +1782,15 @@ "purpose": "Show concise accessible contextual help on hover, focus, click, or controlled open state.", "demoCount": 3, "propCount": 17, - "slots": ["trigger", "default"], - "events": ["toggle", "open", "close"], + "slots": [ + "trigger", + "default" + ], + "events": [ + "toggle", + "open", + "close" + ], "profiled": true }, { @@ -1292,8 +1801,15 @@ "purpose": "Theme-aware, responsive tree view component.", "demoCount": 3, "propCount": 7, - "slots": ["default"], - "events": ["select", "toggle", "expand", "collapse"], + "slots": [ + "default" + ], + "events": [ + "select", + "toggle", + "expand", + "collapse" + ], "profiled": false }, { @@ -1304,7 +1820,9 @@ "purpose": "Apply consistent readable responsive typography, widths, columns, spacing, and editorial hierarchy.", "demoCount": 3, "propCount": 6, - "slots": ["default"], + "slots": [ + "default" + ], "events": [], "profiled": true }, @@ -1316,8 +1834,15 @@ "purpose": "Theme-aware, responsive wysiwyg editor component.", "demoCount": 3, "propCount": 7, - "slots": ["default"], - "events": ["input", "change", "focus", "blur"], + "slots": [ + "default" + ], + "events": [ + "input", + "change", + "focus", + "blur" + ], "profiled": false } ] diff --git a/packages/csr/src/reactive-runtime.ts b/packages/csr/src/reactive-runtime.ts index 132b7850..8e76eca3 100644 --- a/packages/csr/src/reactive-runtime.ts +++ b/packages/csr/src/reactive-runtime.ts @@ -3277,93 +3277,12 @@ export const REACTIVE_RUNTIME = String.raw` ensureBehaviorObserver(); hydrateNavbarControllers(host); hydratePreferenceControllers(host); - hydrateSidebarControllers(host); - hydrateDropdownControllers(host); hydrateSelectControllers(host); hydratePinInputControllers(host); } var navbarOutsideClickBound = false; var preferenceOutsideClickBound = false; - var dropdownOutsideClickBound = false; - - function hydrateSidebarControllers(root) { - var host = root || document; - var sidebars = []; - if (host.nodeType === 1 && host.matches && host.matches(".wire-sidebar-shell")) { - sidebars.push(host); - } - if (host.querySelectorAll) { - Array.prototype.push.apply(sidebars, host.querySelectorAll(".wire-sidebar-shell")); - } - sidebars.forEach(function (sidebar) { - var current = window.location.pathname.replace(/\/+$/, "") || "/"; - var best = null; - var bestLength = -1; - sidebar.querySelectorAll(".wire-sidebar-items a[href]").forEach(function (link) { - var url; - try { url = new URL(link.getAttribute("href"), window.location.origin); } catch (_) { return; } - var path = url.pathname.replace(/\/+$/, "") || "/"; - var matches = path === current || (path !== "/" && current.indexOf(path + "/") === 0); - link.classList.remove("is-active"); - if (!matches || path.length <= bestLength) return; - best = link; - bestLength = path.length; - }); - sidebar.querySelectorAll(".wire-sidebar-items a[aria-current='page']").forEach(function (link) { - if (link !== best) link.removeAttribute("aria-current"); - }); - sidebar.querySelectorAll(".wire-sidebar-group.has-active").forEach(function (group) { - group.classList.remove("has-active"); - }); - if (best) { - best.classList.add("is-active"); - best.setAttribute("aria-current", "page"); - var group = best.closest(".wire-sidebar-group"); - if (group) { - group.setAttribute("open", ""); - group.classList.add("has-active"); - } - } - }); - } - - function hydrateDropdownControllers(root) { - var host = root || document; - var dropdowns = []; - if (host.nodeType === 1 && host.matches && host.matches("[data-wrn-dropdown]")) { - dropdowns.push(host); - } - if (host.querySelectorAll) { - Array.prototype.push.apply(dropdowns, host.querySelectorAll("[data-wrn-dropdown]")); - } - dropdowns.forEach(function (dropdown) { - if (dropdown.dataset.wrnDropdownBound === "true") return; - dropdown.dataset.wrnDropdownBound = "true"; - dropdown.addEventListener("toggle", function () { - if (!dropdown.open) return; - document.querySelectorAll("[data-wrn-dropdown][open]").forEach(function (candidate) { - if (candidate !== dropdown) candidate.removeAttribute("open"); - }); - }); - }); - if (!dropdownOutsideClickBound) { - dropdownOutsideClickBound = true; - document.addEventListener("pointerdown", function (event) { - document.querySelectorAll("[data-wrn-dropdown][open]").forEach(function (dropdown) { - if (!dropdown.contains(event.target)) dropdown.removeAttribute("open"); - }); - }); - document.addEventListener("keydown", function (event) { - if (event.key !== "Escape") return; - document.querySelectorAll("[data-wrn-dropdown][open]").forEach(function (dropdown) { - dropdown.removeAttribute("open"); - var summary = dropdown.querySelector(":scope > summary"); - if (summary) summary.focus(); - }); - }); - } - } function hydratePreferenceControllers(root) { var host = root || document; diff --git a/packages/ui/component-catalog.json b/packages/ui/component-catalog.json index c4478a65..487f181a 100644 --- a/packages/ui/component-catalog.json +++ b/packages/ui/component-catalog.json @@ -1,5 +1,7 @@ { - "sourceDocuments": ["Screenshot-directed WRNexus UI catalog reset"], + "sourceDocuments": [ + "Screenshot-directed WRNexus UI catalog reset" + ], "components": [ { "name": "Accordion", diff --git a/packages/ui/component-reference.json b/packages/ui/component-reference.json index efa543da..76ed3ce7 100644 --- a/packages/ui/component-reference.json +++ b/packages/ui/component-reference.json @@ -143,7 +143,11 @@ "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" } ], - "events": ["change", "open", "close"], + "events": [ + "change", + "open", + "close" + ], "source": "components/Accordion.wrn" }, { @@ -202,7 +206,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "input", @@ -225,7 +231,13 @@ "payloadType": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" } ], - "events": ["input", "change", "open", "close", "clear"], + "events": [ + "input", + "change", + "open", + "close", + "clear" + ], "source": "components/AdvancedDatePicker.wrn" }, { @@ -284,7 +296,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "input", @@ -303,7 +317,12 @@ "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" } ], - "events": ["input", "change", "start", "end"], + "events": [ + "input", + "change", + "start", + "end" + ], "source": "components/AdvancedRangeSlider.wrn" }, { @@ -705,7 +724,16 @@ "payloadType": "{ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string" } ], - "events": ["search", "select", "change", "clear", "open", "close", "load", "error"], + "events": [ + "search", + "select", + "change", + "clear", + "open", + "close", + "load", + "error" + ], "source": "components/AdvancedSelect.wrn" }, { @@ -873,7 +901,10 @@ "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" } ], - "events": ["dismiss", "action"], + "events": [ + "dismiss", + "action" + ], "source": "components/alert.wrn" }, { @@ -1023,7 +1054,9 @@ "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" } ], - "events": ["dismiss"], + "events": [ + "dismiss" + ], "source": "components/AnnouncementBar.wrn" }, { @@ -1124,7 +1157,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "submit", @@ -1147,7 +1182,13 @@ "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" } ], - "events": ["submit", "change", "input", "focus", "blur"], + "events": [ + "submit", + "change", + "input", + "focus", + "blur" + ], "source": "components/AuthForm.wrn" }, { @@ -1213,7 +1254,10 @@ "options": [] } ], - "slots": ["aside-extra", "form"], + "slots": [ + "aside-extra", + "form" + ], "outputs": [], "events": [], "source": "components/AuthSplitLayout.wrn" @@ -1366,7 +1410,11 @@ "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" } ], - "events": ["load", "error", "click"], + "events": [ + "load", + "error", + "click" + ], "source": "components/avatar.wrn" }, { @@ -1467,7 +1515,9 @@ "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" } ], - "events": ["overflow"], + "events": [ + "overflow" + ], "source": "components/AvatarGroup.wrn" }, { @@ -1755,7 +1805,9 @@ "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" } ], - "events": ["dismiss"], + "events": [ + "dismiss" + ], "source": "components/Badge.wrn" }, { @@ -1856,7 +1908,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [], "events": [], "source": "components/Blockquote.wrn" @@ -1959,7 +2013,9 @@ "payloadType": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" } ], - "events": ["select"], + "events": [ + "select" + ], "source": "components/Breadcrumb.wrn" }, { @@ -2144,7 +2200,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "click", @@ -2159,7 +2217,11 @@ "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" } ], - "events": ["click", "focus", "blur"], + "events": [ + "click", + "focus", + "blur" + ], "source": "components/button.wrn" }, { @@ -2260,7 +2322,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "click", @@ -2275,7 +2339,11 @@ "payloadType": "{ value: string | number | boolean | null | object; previousValue: string | number | boolean | null | object; item: string | number | boolean | null | object; index: number }" } ], - "events": ["click", "select", "change"], + "events": [ + "click", + "select", + "change" + ], "source": "components/ButtonGroup.wrn" }, { @@ -2460,7 +2528,12 @@ "options": [] } ], - "slots": ["default", "actions", "visual", "footer"], + "slots": [ + "default", + "actions", + "visual", + "footer" + ], "outputs": [], "events": [], "source": "components/CTASection.wrn" @@ -2689,7 +2762,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "click", @@ -2716,7 +2791,14 @@ "payloadType": "{ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string" } ], - "events": ["click", "action", "navigate", "dismiss", "load", "error"], + "events": [ + "click", + "action", + "navigate", + "dismiss", + "load", + "error" + ], "source": "components/Card.wrn" }, { @@ -2880,7 +2962,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "initialize", @@ -2993,7 +3077,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "select", @@ -3008,7 +3094,11 @@ "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" } ], - "events": ["select", "dataPointClick", "legendToggle"], + "events": [ + "select", + "dataPointClick", + "legendToggle" + ], "source": "components/Chart.wrn" }, { @@ -3095,7 +3185,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "action", @@ -3114,7 +3206,12 @@ "payloadType": "{ link: string | number | boolean | null | object; item: string | number | boolean | null | object; index: number }" } ], - "events": ["action", "messageClick", "avatarClick", "linkClick"], + "events": [ + "action", + "messageClick", + "avatarClick", + "linkClick" + ], "source": "components/ChatBubble.wrn" }, { @@ -3313,7 +3410,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "input", @@ -3336,7 +3435,13 @@ "payloadType": "{ message?: string; value: string | number | boolean | null | object; sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" } ], - "events": ["input", "change", "focus", "blur", "invalid"], + "events": [ + "input", + "change", + "focus", + "blur", + "invalid" + ], "source": "components/Checkbox.wrn" }, { @@ -3395,7 +3500,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "copy", @@ -3410,7 +3517,11 @@ "payloadType": "{ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string" } ], - "events": ["copy", "success", "error"], + "events": [ + "copy", + "success", + "error" + ], "source": "components/Clipboard.wrn" }, { @@ -3476,7 +3587,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "toggle", @@ -3491,7 +3604,11 @@ "payloadType": "{ index: number; item: string | number | boolean | null | object }" } ], - "events": ["toggle", "open", "close"], + "events": [ + "toggle", + "open", + "close" + ], "source": "components/Collapse.wrn" }, { @@ -3653,7 +3770,12 @@ "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" } ], - "events": ["input", "change", "focus", "blur"], + "events": [ + "input", + "change", + "focus", + "blur" + ], "source": "components/ColorPicker.wrn" }, { @@ -3705,7 +3827,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [], "events": [], "source": "components/Columns.wrn" @@ -4039,7 +4163,16 @@ "payloadType": "{ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string" } ], - "events": ["search", "select", "change", "clear", "open", "close", "load", "error"], + "events": [ + "search", + "select", + "change", + "clear", + "open", + "close", + "load", + "error" + ], "source": "components/Combobox.wrn" }, { @@ -4098,7 +4231,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "start", @@ -4109,7 +4244,10 @@ "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" } ], - "events": ["start", "complete"], + "events": [ + "start", + "complete" + ], "source": "components/Confetti.wrn" }, { @@ -4161,7 +4299,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [], "events": [], "source": "components/Container.wrn" @@ -4299,7 +4439,12 @@ "options": [] } ], - "slots": ["trigger", "header", "default", "footer"], + "slots": [ + "trigger", + "header", + "default", + "footer" + ], "outputs": [ { "name": "open", @@ -4318,7 +4463,12 @@ "payloadType": "{ item: string | number | boolean | null | object; itemIndex: number; value: string | number | boolean; sourceEvent: Event }" } ], - "events": ["open", "close", "select", "action"], + "events": [ + "open", + "close", + "select", + "action" + ], "source": "components/ContextMenu.wrn" }, { @@ -4434,7 +4584,11 @@ "payloadType": "{ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string" } ], - "events": ["copy", "success", "error"], + "events": [ + "copy", + "success", + "error" + ], "source": "components/CopyMarkup.wrn" }, { @@ -4486,14 +4640,18 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "scroll", "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" } ], - "events": ["scroll"], + "events": [ + "scroll" + ], "source": "components/CustomScrollbar.wrn" }, { @@ -4552,7 +4710,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "select", @@ -4563,7 +4723,10 @@ "payloadType": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" } ], - "events": ["select", "change"], + "events": [ + "select", + "change" + ], "source": "components/DataMap.wrn" }, { @@ -4776,7 +4939,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "sort", @@ -5036,7 +5201,15 @@ "payloadType": "{ name: string; message: string; sourceEvent: Event }" } ], - "events": ["input", "change", "open", "close", "focus", "blur", "invalid"], + "events": [ + "input", + "change", + "open", + "close", + "focus", + "blur", + "invalid" + ], "source": "components/DatePicker.wrn" }, { @@ -5144,7 +5317,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "change", @@ -5155,7 +5330,10 @@ "payloadType": "{ device: string; orientation: string; sourceEvent: Event }" } ], - "events": ["change", "rotate"], + "events": [ + "change", + "rotate" + ], "source": "components/DeviceFrame.wrn" }, { @@ -5261,7 +5439,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "dragStart", @@ -5288,7 +5468,14 @@ "payloadType": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" } ], - "events": ["dragStart", "dragEnd", "dragEnter", "dragLeave", "drop", "change"], + "events": [ + "dragStart", + "dragEnd", + "dragEnter", + "dragLeave", + "drop", + "change" + ], "source": "components/DragAndDrop.wrn" }, { @@ -5438,7 +5625,12 @@ "options": [] } ], - "slots": ["trigger", "header", "default", "footer"], + "slots": [ + "trigger", + "header", + "default", + "footer" + ], "outputs": [ { "name": "open", @@ -5453,7 +5645,11 @@ "payloadType": "{ placement: string; sourceEvent: Event }" } ], - "events": ["open", "close", "cancel"], + "events": [ + "open", + "close", + "cancel" + ], "source": "components/Drawer.wrn" }, { @@ -5582,7 +5778,12 @@ "options": [] } ], - "slots": ["trigger", "header", "default", "footer"], + "slots": [ + "trigger", + "header", + "default", + "footer" + ], "outputs": [ { "name": "toggle", @@ -5605,7 +5806,13 @@ "payloadType": "{ item: string | number | boolean | null | object; itemIndex: number; value: string | number | boolean; sourceEvent: Event }" } ], - "events": ["toggle", "open", "close", "select", "action"], + "events": [ + "toggle", + "open", + "close", + "select", + "action" + ], "source": "components/Dropdown.wrn" }, { @@ -5811,7 +6018,12 @@ "options": [] } ], - "slots": ["media", "icon", "default", "footer"], + "slots": [ + "media", + "icon", + "default", + "footer" + ], "outputs": [], "events": [], "source": "components/FeatureCard.wrn" @@ -5921,7 +6133,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [], "events": [], "source": "components/FeatureGrid.wrn" @@ -6031,7 +6245,10 @@ "options": [] } ], - "slots": ["default", "footer"], + "slots": [ + "default", + "footer" + ], "outputs": [], "events": [], "source": "components/FeatureIconCard.wrn" @@ -6221,7 +6438,15 @@ "payloadType": "{ message?: string; value: string | number | boolean | null | object; sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" } ], - "events": ["input", "change", "focus", "blur", "select", "clear", "invalid"], + "events": [ + "input", + "change", + "focus", + "blur", + "select", + "clear", + "invalid" + ], "source": "components/FileInput.wrn" }, { @@ -6280,7 +6505,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "select", @@ -6311,7 +6538,15 @@ "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" } ], - "events": ["select", "upload", "progress", "success", "error", "cancel", "remove"], + "events": [ + "select", + "upload", + "progress", + "success", + "error", + "cancel", + "remove" + ], "source": "components/FileUpload.wrn" }, { @@ -6427,7 +6662,11 @@ "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" } ], - "events": ["cancel", "retry", "complete"], + "events": [ + "cancel", + "retry", + "complete" + ], "source": "components/FileUploadProgress.wrn" }, { @@ -6493,7 +6732,12 @@ "options": [] } ], - "slots": ["pre-footer", "post-footer", "copyright-left", "copyright-right"], + "slots": [ + "pre-footer", + "post-footer", + "copyright-left", + "copyright-right" + ], "outputs": [ { "name": "select", @@ -6504,7 +6748,10 @@ "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" } ], - "events": ["select", "action"], + "events": [ + "select", + "action" + ], "source": "components/Footer.wrn" }, { @@ -6556,7 +6803,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [], "events": [], "source": "components/Grid.wrn" @@ -6834,7 +7083,14 @@ "options": [] } ], - "slots": ["eyebrow", "actions", "trust", "default", "visual", "footer"], + "slots": [ + "eyebrow", + "actions", + "trust", + "default", + "visual", + "footer" + ], "outputs": [], "events": [], "source": "components/Hero.wrn" @@ -6902,7 +7158,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [], "events": [], "source": "components/HeroActions.wrn" @@ -6977,7 +7235,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [], "events": [], "source": "components/Image.wrn" @@ -7216,7 +7476,15 @@ "payloadType": "{ key: string; value: string | number | boolean | null | object; name: string; sourceEvent: Event }" } ], - "events": ["input", "change", "focus", "blur", "invalid", "keydown", "keyup"], + "events": [ + "input", + "change", + "focus", + "blur", + "invalid", + "keydown", + "keyup" + ], "source": "components/Input.wrn" }, { @@ -7414,7 +7682,14 @@ "payloadType": "{ name: string; sourceEvent: Event }" } ], - "events": ["input", "change", "focus", "blur", "submit", "action"], + "events": [ + "input", + "change", + "focus", + "blur", + "submit", + "action" + ], "source": "components/InputGroup.wrn" }, { @@ -7723,7 +7998,12 @@ "payloadType": "{ value: number; previousValue?: number; sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" } ], - "events": ["input", "change", "increment", "decrement"], + "events": [ + "input", + "change", + "increment", + "decrement" + ], "source": "components/InputNumber.wrn" }, { @@ -7761,7 +8041,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [], "events": [], "source": "components/Kbd.wrn" @@ -7815,7 +8097,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "resizeStart", @@ -7830,7 +8114,11 @@ "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" } ], - "events": ["resizeStart", "resize", "resizeEnd"], + "events": [ + "resizeStart", + "resize", + "resizeEnd" + ], "source": "components/LayoutSplitter.wrn" }, { @@ -7889,7 +8177,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "toggle", @@ -7900,7 +8190,10 @@ "payloadType": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" } ], - "events": ["toggle", "select"], + "events": [ + "toggle", + "select" + ], "source": "components/LegendIndicator.wrn" }, { @@ -7966,7 +8259,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [], "events": [], "source": "components/Link.wrn" @@ -8027,7 +8322,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [], "events": [], "source": "components/List.wrn" @@ -8088,7 +8385,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "select", @@ -8099,7 +8398,10 @@ "payloadType": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" } ], - "events": ["select", "change"], + "events": [ + "select", + "change" + ], "source": "components/ListGroup.wrn" }, { @@ -8158,7 +8460,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [], "events": [], "source": "components/Map.wrn" @@ -8254,7 +8558,11 @@ "options": [] } ], - "slots": ["icon", "actions", "default"], + "slots": [ + "icon", + "actions", + "default" + ], "outputs": [], "events": [], "source": "components/MarketingSectionHeader.wrn" @@ -8315,7 +8623,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [], "events": [], "source": "components/Marquee.wrn" @@ -8383,7 +8693,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "open", @@ -8398,7 +8710,11 @@ "payloadType": "{ item: object; value: string }" } ], - "events": ["open", "close", "select"], + "events": [ + "open", + "close", + "select" + ], "source": "components/MegaMenu.wrn" }, { @@ -8604,7 +8920,10 @@ "options": [] } ], - "slots": ["default", "footer"], + "slots": [ + "default", + "footer" + ], "outputs": [ { "name": "select", @@ -8615,7 +8934,10 @@ "payloadType": "{ label: string; value: string; href: string; sourceEvent: Event }" } ], - "events": ["select", "action"], + "events": [ + "select", + "action" + ], "source": "components/MetricCard.wrn" }, { @@ -8716,7 +9038,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "select", @@ -8727,7 +9051,10 @@ "payloadType": "{ item: string | number | boolean | null | object; itemIndex: number; sourceEvent: Event }" } ], - "events": ["select", "action"], + "events": [ + "select", + "action" + ], "source": "components/MetricGrid.wrn" }, { @@ -8940,7 +9267,12 @@ "options": [] } ], - "slots": ["trigger", "header", "default", "footer"], + "slots": [ + "trigger", + "header", + "default", + "footer" + ], "outputs": [ { "name": "open", @@ -8959,7 +9291,12 @@ "payloadType": "{ sourceEvent: Event }" } ], - "events": ["open", "close", "cancel", "confirm"], + "events": [ + "open", + "close", + "cancel", + "confirm" + ], "source": "components/Modal.wrn" }, { @@ -9032,14 +9369,18 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "select", "payloadType": "{ item: object; value: string }" } ], - "events": ["select"], + "events": [ + "select" + ], "source": "components/Nav.wrn" }, { @@ -9140,7 +9481,10 @@ "options": [] } ], - "slots": ["topbar", "actions"], + "slots": [ + "topbar", + "actions" + ], "outputs": [ { "name": "toggle", @@ -9163,7 +9507,13 @@ "payloadType": "{ item: string | number | boolean | null | object; value: string | number | boolean }" } ], - "events": ["toggle", "open", "close", "select", "action"], + "events": [ + "toggle", + "open", + "close", + "select", + "action" + ], "source": "components/Navbar.wrn" }, { @@ -9348,7 +9698,11 @@ "options": [] } ], - "slots": ["meta", "actions", "default"], + "slots": [ + "meta", + "actions", + "default" + ], "outputs": [], "events": [], "source": "components/PageHeader.wrn" @@ -9444,7 +9798,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "change", @@ -9459,7 +9815,11 @@ "payloadType": "{ page: number }" } ], - "events": ["change", "previous", "next"], + "events": [ + "change", + "previous", + "next" + ], "source": "components/Pagination.wrn" }, { @@ -9678,7 +10038,14 @@ "payloadType": "{ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string" } ], - "events": ["input", "change", "complete", "paste", "clear", "error"], + "events": [ + "input", + "change", + "complete", + "paste", + "clear", + "error" + ], "source": "components/PinInput.wrn" }, { @@ -9849,7 +10216,12 @@ "options": [] } ], - "slots": ["trigger", "header", "default", "footer"], + "slots": [ + "trigger", + "header", + "default", + "footer" + ], "outputs": [ { "name": "toggle", @@ -9868,7 +10240,12 @@ "payloadType": "{ href: string; sourceEvent: Event }" } ], - "events": ["toggle", "open", "close", "action"], + "events": [ + "toggle", + "open", + "close", + "action" + ], "source": "components/Popover.wrn" }, { @@ -9976,7 +10353,9 @@ "options": [] } ], - "slots": ["hero-action"], + "slots": [ + "hero-action" + ], "outputs": [ { "name": "action", @@ -9987,7 +10366,10 @@ "payloadType": "{ item: string | number | boolean | null | object; value: string | number | boolean; index: number }" } ], - "events": ["action", "navigate"], + "events": [ + "action", + "navigate" + ], "source": "components/PortalDashboard.wrn" }, { @@ -10075,7 +10457,11 @@ "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" } ], - "events": ["theme", "color", "language"], + "events": [ + "theme", + "color", + "language" + ], "source": "components/PreferenceSwitcher.wrn" }, { @@ -10216,7 +10602,11 @@ "options": [] } ], - "slots": ["before", "default", "after"], + "slots": [ + "before", + "default", + "after" + ], "outputs": [], "events": [], "source": "components/PublicPageShell.wrn" @@ -10426,7 +10816,13 @@ "payloadType": "{ message?: string; value: string | number | boolean | null | object; sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" } ], - "events": ["input", "change", "focus", "blur", "invalid"], + "events": [ + "input", + "change", + "focus", + "blur", + "invalid" + ], "source": "components/Radio.wrn" }, { @@ -10637,7 +11033,12 @@ "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" } ], - "events": ["input", "change", "focus", "blur"], + "events": [ + "input", + "change", + "focus", + "blur" + ], "source": "components/RangeSlider.wrn" }, { @@ -10696,7 +11097,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "input", @@ -10707,7 +11110,10 @@ "payloadType": "{ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null" } ], - "events": ["input", "change"], + "events": [ + "input", + "change" + ], "source": "components/Rating.wrn" }, { @@ -10766,14 +11172,18 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "change", "payloadType": "{ href: string; label: string }" } ], - "events": ["change"], + "events": [ + "change" + ], "source": "components/Scrollspy.wrn" }, { @@ -10956,7 +11366,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [], "events": [], "source": "components/Section.wrn" @@ -11038,7 +11450,11 @@ "options": [] } ], - "slots": ["icon", "default", "actions"], + "slots": [ + "icon", + "default", + "actions" + ], "outputs": [], "events": [], "source": "components/SectionHeader.wrn" @@ -11235,7 +11651,15 @@ "payloadType": "{ name: string; message: string; sourceEvent: Event }" } ], - "events": ["input", "change", "focus", "blur", "open", "close", "invalid"], + "events": [ + "input", + "change", + "focus", + "blur", + "open", + "close", + "invalid" + ], "source": "components/Select.wrn" }, { @@ -11301,7 +11725,10 @@ "options": [] } ], - "slots": ["default", "drawer"], + "slots": [ + "default", + "drawer" + ], "outputs": [ { "name": "toggle", @@ -11320,7 +11747,12 @@ "payloadType": "{ item: object; value: string; level: number }" } ], - "events": ["toggle", "open", "close", "select"], + "events": [ + "toggle", + "open", + "close", + "select" + ], "source": "components/Sidebar.wrn" }, { @@ -11641,7 +12073,12 @@ "options": [] } ], - "slots": ["default", "actions", "trust", "visual"], + "slots": [ + "default", + "actions", + "trust", + "visual" + ], "outputs": [], "events": [], "source": "components/SplitHero.wrn" @@ -11791,14 +12228,19 @@ "options": [] } ], - "slots": ["step-{index}", "default"], + "slots": [ + "step-{index}", + "default" + ], "outputs": [ { "name": "change", "payloadType": "{ index: number; step: object }" } ], - "events": ["change"], + "events": [ + "change" + ], "source": "components/Stepper.wrn" }, { @@ -12012,7 +12454,11 @@ "payloadType": "{ value: string; score: number; maximumScore: number; percent: number; level: string }" } ], - "events": ["input", "change", "strength"], + "events": [ + "input", + "change", + "strength" + ], "source": "components/StrongPassword.wrn" }, { @@ -12071,7 +12517,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [], "events": [], "source": "components/StyledIcon.wrn" @@ -12242,7 +12690,12 @@ "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" } ], - "events": ["input", "change", "focus", "blur"], + "events": [ + "input", + "change", + "focus", + "blur" + ], "source": "components/Switch.wrn" }, { @@ -12315,7 +12768,10 @@ "options": [] } ], - "slots": ["panel-{valueOf(item, index)}", "default"], + "slots": [ + "panel-{valueOf(item, index)}", + "default" + ], "outputs": [ { "name": "change", @@ -12326,7 +12782,10 @@ "payloadType": "{ value: string; item: object; index: number }" } ], - "events": ["change", "select"], + "events": [ + "change", + "select" + ], "source": "components/Tabs.wrn" }, { @@ -12449,7 +12908,11 @@ "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" } ], - "events": ["click", "focus", "blur"], + "events": [ + "click", + "focus", + "blur" + ], "source": "components/TextLink.wrn" }, { @@ -12643,7 +13106,13 @@ "payloadType": "{ value: string | number | boolean | null | object; name: string; message: string; sourceEvent: Event }" } ], - "events": ["input", "change", "focus", "blur", "invalid"], + "events": [ + "input", + "change", + "focus", + "blur", + "invalid" + ], "source": "components/Textarea.wrn" }, { @@ -12866,7 +13335,15 @@ "payloadType": "{ name: string; message: string; sourceEvent: Event }" } ], - "events": ["input", "change", "focus", "blur", "open", "close", "invalid"], + "events": [ + "input", + "change", + "focus", + "blur", + "open", + "close", + "invalid" + ], "source": "components/TimePicker.wrn" }, { @@ -12925,7 +13402,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [], "events": [], "source": "components/Timeline.wrn" @@ -12986,7 +13465,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "dismiss", @@ -12997,7 +13478,10 @@ "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" } ], - "events": ["dismiss", "action"], + "events": [ + "dismiss", + "action" + ], "source": "components/Toast.wrn" }, { @@ -13056,7 +13540,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "add", @@ -13075,7 +13561,12 @@ "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" } ], - "events": ["add", "dismiss", "clear", "action"], + "events": [ + "add", + "dismiss", + "clear", + "action" + ], "source": "components/ToastNotifications.wrn" }, { @@ -13205,7 +13696,11 @@ "payloadType": "{ id: number; sourceEvent: Event }" } ], - "events": ["show", "dismiss", "action"], + "events": [ + "show", + "dismiss", + "action" + ], "source": "components/Toaster.wrn" }, { @@ -13387,7 +13882,10 @@ "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" } ], - "events": ["change", "toggle"], + "events": [ + "change", + "toggle" + ], "source": "components/ToggleCount.wrn" }, { @@ -13580,7 +14078,11 @@ "payloadType": "{ visible: boolean }" } ], - "events": ["input", "change", "toggle"], + "events": [ + "input", + "change", + "toggle" + ], "source": "components/TogglePassword.wrn" }, { @@ -13709,7 +14211,10 @@ "options": [] } ], - "slots": ["trigger", "default"], + "slots": [ + "trigger", + "default" + ], "outputs": [ { "name": "toggle", @@ -13724,7 +14229,11 @@ "payloadType": "{ reason: string; sourceEvent: Event }" } ], - "events": ["toggle", "open", "close"], + "events": [ + "toggle", + "open", + "close" + ], "source": "components/Tooltip.wrn" }, { @@ -13783,7 +14292,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "select", @@ -13802,7 +14313,12 @@ "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" } ], - "events": ["select", "toggle", "expand", "collapse"], + "events": [ + "select", + "toggle", + "expand", + "collapse" + ], "source": "components/TreeView.wrn" }, { @@ -13854,7 +14370,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [], "events": [], "source": "components/Typography.wrn" @@ -13915,7 +14433,9 @@ "options": [] } ], - "slots": ["default"], + "slots": [ + "default" + ], "outputs": [ { "name": "input", @@ -13934,7 +14454,12 @@ "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" } ], - "events": ["input", "change", "focus", "blur"], + "events": [ + "input", + "change", + "focus", + "blur" + ], "source": "components/WysiwygEditor.wrn" } ] diff --git a/packages/ui/ui.css b/packages/ui/ui.css index a52ac5cf..edbd28cf 100644 --- a/packages/ui/ui.css +++ b/packages/ui/ui.css @@ -1411,68 +1411,11 @@ .wire-comparison-table { min-width: 42rem; } -.wire-desktop-nav > ul, -.wire-mobile-nav ul, -.wire-mega-menu ul { - list-style: none; - padding: 0; - margin: 0; -} .wire-desktop-nav > ul { display: flex; align-items: center; gap: 0.25rem; } -.wire-desktop-nav a, -.wire-mega-menu__trigger { - display: inline-flex; - min-height: 44px; - align-items: center; - gap: 0.35rem; - padding: 0.6rem 0.8rem; - color: var(--wire-color-text); - background: transparent; - border: 0; - border-radius: var(--wire-radius-sm); - text-decoration: none; - font: inherit; - cursor: pointer; -} -.wire-desktop-nav a:hover, -.wire-mega-menu__trigger:hover { - background: var(--wire-color-surface-2); -} -.wire-mega-menu { - position: relative; -} -.wire-mega-menu__panel { - position: absolute; - z-index: 100; - top: calc(100% + 0.5rem); - left: 0; - display: grid; - grid-template-columns: repeat(3, minmax(10rem, 1fr)); - gap: 1.25rem; - width: min(46rem, calc(100vw - 2rem)); - padding: 1.25rem; - color: var(--wire-color-text); - background: var(--wire-color-surface); - border: 1px solid var(--wire-color-border); - border-radius: var(--wire-radius); - box-shadow: var(--wire-shadow-1); -} -.wire-mega-menu__panel h3 { - margin: 0 0 0.5rem; - font-size: 0.875rem; -} -.wire-mega-menu__panel a, -.wire-mobile-nav__panel a { - display: flex; - min-height: 44px; - align-items: center; - color: var(--wire-color-text); - text-decoration: none; -} .wire-mobile-nav { display: none; } @@ -1488,30 +1431,6 @@ border-radius: var(--wire-radius); box-shadow: var(--wire-shadow-1); } -.wire-page-shell { - width: 100%; - min-width: 0; - color: var(--wire-color-text); -} -.wire-page-shell--marketing, -.wire-page-shell--product { - overflow: clip; -} -.wire-page-shell--legal { - display: grid; - grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); - gap: clamp(2rem, 5vw, 5rem); - max-width: 80rem; -} -.wire-page-shell__aside { - position: sticky; - top: 1rem; - align-self: start; -} -.wire-page-shell__main { - min-width: 0; - max-width: 52rem; -} .wire-product-card, .wire-metric { padding: clamp(1rem, 3vw, 1.5rem); @@ -1521,28 +1440,6 @@ border-radius: var(--wire-radius); box-shadow: var(--wire-shadow-1); } -.wire-product-card { - display: grid; - gap: 0.8rem; -} -.wire-product-card__meta { - display: flex; - justify-content: space-between; - gap: 0.75rem; -} -.wire-product-card h3, -.wire-product-card p { - margin: 0; -} -.wire-product-card p { - color: var(--wire-color-muted); - line-height: 1.6; -} -.wire-product-card__link { - color: var(--wire-color-primary); - font-weight: 650; - text-decoration: none; -} .wire-eyebrow { color: var(--wire-color-primary); font-size: 0.75rem; @@ -1571,99 +1468,6 @@ font-size: 0.875rem; line-height: 1.5; } -.wire-sdk-tabs__panel { - overflow-x: auto; - border: 1px solid var(--wire-color-border); - border-radius: 0 0 var(--wire-radius) var(--wire-radius); - background: var(--wire-color-surface-2); -} -.wire-sdk-tabs__panel pre { - margin: 0; - min-width: max-content; - padding: 1rem; -} -.wire-legal-toc { - padding: 1rem; - border-left: 2px solid var(--wire-color-border); -} -.wire-legal-toc h2 { - margin: 0 0 0.75rem; - font-size: 0.875rem; -} -.wire-legal-toc ol { - display: grid; - gap: 0.5rem; - margin: 0; - padding-left: 1.25rem; -} -.wire-legal-toc a { - color: var(--wire-color-muted); - text-decoration: none; -} -.wire-cookie-list { - display: grid; - gap: 0.75rem; - margin: 0; -} -.wire-cookie-option { - display: flex; - align-items: center; - justify-content: space-between; - gap: 1rem; - min-height: 44px; - padding: 0.75rem; - border: 1px solid var(--wire-color-border); - border-radius: var(--wire-radius-sm); -} -.wire-cookie-option span { - display: grid; - gap: 0.25rem; -} -.wire-cookie-option small { - color: var(--wire-color-muted); - line-height: 1.4; -} -@media (max-width: 768px) { - .wire-desktop-nav { - display: none; - } - .wire-mobile-nav { - display: block; - } - .wire-mega-menu__panel { - position: static; - grid-template-columns: 1fr; - width: 100%; - box-shadow: none; - } - .wire-page-shell--legal { - grid-template-columns: 1fr; - } - .wire-page-shell__aside { - position: static; - } -} -/* --- Complete catalog composition patterns ----------------------------- */ -.wire-catalog-action { - display: inline-flex; - max-width: 100%; -} -.wire-catalog-action > :only-child { - min-width: 0; -} -/* Authentication compositions intentionally mirror the polished identity - * experience: compact hierarchy, generous controls, and token-driven color. */ -.wire-auth-card { - display: grid; - gap: 0; - width: 100%; - min-width: 0; - padding: clamp(1.25rem, 4vw, 2rem); - border-color: color-mix(in srgb, var(--wire-color-border) 82%, transparent); - background: color-mix(in srgb, var(--wire-color-surface) 94%, transparent); - box-shadow: 0 1.5rem 5rem color-mix(in srgb, var(--wire-color-text) 8%, transparent); - backdrop-filter: blur(18px); -} .wire-auth-card > .wire-eyebrow { justify-self: start; margin-bottom: 0.9rem; @@ -1677,226 +1481,6 @@ letter-spacing: 0.08em; text-transform: uppercase; } -.wire-auth-card > h3 { - margin: 0; - color: var(--wire-color-text); - font-size: clamp(1.9rem, 5vw, 2.5rem); - line-height: 1.08; - letter-spacing: -0.045em; -} -.wire-auth-card > h3 + p { - margin: 0.85rem 0 0; - color: var(--wire-color-muted); - font-size: 0.925rem; - line-height: 1.7; -} -.wire-auth-card > .wire-catalog-card__image { - margin-bottom: 1.25rem; -} -.wire-auth-action { - display: flex; - width: 100%; -} -.wire-auth-action > :where(a, button) { - display: grid; - width: 100%; - min-height: 5.5rem; - grid-template-columns: auto minmax(0, 1fr) auto; - align-items: center; - gap: 1rem; - padding: 1rem 1.25rem; - text-align: left; - border-radius: 1rem; -} -.wire-auth-action__icon { - display: grid; - width: 3rem; - height: 3rem; - place-items: center; - border-radius: 0.75rem; - color: currentColor; - background: color-mix(in srgb, currentColor 12%, transparent); -} -.wire-auth-action__icon svg { - width: 1.5rem; - height: 1.5rem; - fill: none; - stroke: currentColor; - stroke-width: 1.8; - stroke-linecap: round; - stroke-linejoin: round; -} -.wire-auth-action__icon--passkey { - color: #fff; - background: rgb(255 255 255 / 20%); -} -.wire-auth-action__icon--password { - color: color-mix(in srgb, var(--wire-color-primary) 70%, white); - background: color-mix(in srgb, var(--wire-color-primary) 30%, transparent); -} -.wire-auth-action__icon--account { - color: #5ee9b5; - background: color-mix(in srgb, #00a96e 30%, transparent); -} -.wire-auth-action__copy { - min-width: 0; -} -.wire-auth-action__label { - display: block; - font-size: 1rem; - font-weight: 700; - line-height: 1.3; -} -.wire-auth-action__description { - display: block; - margin-top: 0.25rem; - color: color-mix(in srgb, currentColor 66%, transparent); - font-size: 0.875rem; - font-weight: 500; - line-height: 1.45; -} -.wire-auth-action__arrow { - width: 1.1rem; - height: 1.1rem; - opacity: 0.65; - fill: none; - stroke: currentColor; - stroke-width: 1.8; - stroke-linecap: round; - stroke-linejoin: round; - transition: transform var(--wire-motion-base) var(--wire-ease-emphasized); -} -.wire-auth-action > :where(a, button):hover .wire-auth-action__arrow { - transform: translateX(0.25rem); -} -.wire-auth-field { - display: grid; - gap: 0.5rem; - min-width: 0; -} -.wire-auth-field__control { - position: relative; - display: flex; - align-items: center; -} -.wire-public-header-action { - display: inline-flex; - min-height: 2.5rem; - align-items: center; - justify-content: center; - gap: 0.5rem; - border: 1px solid transparent; - border-radius: 0.75rem; - padding: 0.625rem 1rem; - color: var(--wire-color-text); - font-size: 0.875rem; - font-weight: 700; - text-decoration: none; - transition: - background var(--wire-motion-base), - border-color var(--wire-motion-base), - color var(--wire-motion-base), - transform var(--wire-motion-base) var(--wire-ease-emphasized); -} -.wire-public-header-action--primary { - color: var(--wire-color-primary-contrast); - background: var(--wire-color-primary); - box-shadow: 0 0.75rem 1.5rem color-mix(in srgb, var(--wire-color-primary) 20%, transparent); -} -.wire-public-header-action--primary:hover { - background: var(--wire-color-primary-hover); - transform: translateY(-1px); -} -.wire-public-header-action--secondary { - border-color: var(--wire-color-border); - background: var(--wire-color-surface); -} -.wire-public-header-action--secondary:hover, -.wire-public-header-action--ghost:hover { - color: var(--wire-color-primary); - background: var(--wire-color-surface-2); -} -.wire-auth-field__input { - width: 100%; - min-height: 3.5rem; - padding-inline: 3rem; - border-radius: var(--wire-radius-sm); - box-shadow: var(--wire-shadow-1); - transition: - border-color var(--wire-motion-base), - box-shadow var(--wire-motion-base), - background var(--wire-motion-base); -} -.wire-auth-field__input:focus { - border-color: var(--wire-color-primary); - box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--wire-color-primary) 12%, transparent); -} -.wire-auth-field__icon { - position: absolute; - left: 1rem; - z-index: 1; - width: 1.15rem; - height: 1.15rem; - color: var(--wire-color-muted); - pointer-events: none; - transition: color var(--wire-motion-base); -} -.wire-auth-field__control:focus-within .wire-auth-field__icon { - color: var(--wire-color-primary); -} -.wire-auth-field__toggle { - position: absolute; - right: 0.25rem; - display: grid; - width: 2.75rem; - height: 2.75rem; - place-items: center; - border: 0; - border-radius: calc(var(--wire-radius-sm) * 0.75); - color: var(--wire-color-muted); - background: transparent; - cursor: pointer; -} -.wire-auth-field__toggle:hover { - color: var(--wire-color-primary); - background: var(--wire-color-surface-2); -} -.wire-auth-field__toggle:focus-visible { - outline: 2px solid var(--wire-color-primary); - outline-offset: -2px; -} -.wire-catalog-form, -.wire-catalog-collection, -.wire-catalog-section { - display: grid; - gap: clamp(1rem, 2vw, 1.5rem); - min-width: 0; -} -.wire-catalog-form > header, -.wire-catalog-collection > header, -.wire-catalog-section > header { - display: grid; - gap: 0.5rem; -} -.wire-catalog-form :where(h2, p), -.wire-catalog-collection :where(h2, p), -.wire-catalog-section :where(h2, p) { - margin: 0; -} -.wire-catalog-field { - min-width: 0; -} -.wire-catalog-overlay { - position: fixed; - inset: 0; - z-index: 80; - display: grid; - place-items: center; - overflow: auto; - padding: clamp(1rem, 4vw, 2rem); - background: rgb(2 6 23 / 0.68); - backdrop-filter: blur(8px); -} .wire-catalog-overlay .wire-dialog { width: min(100%, 42rem); max-height: calc(100dvh - 2rem); @@ -1908,45 +1492,6 @@ border-radius: var(--wire-radius); box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 0.3); } -.wire-catalog-collection__items { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); - gap: 1rem; - min-width: 0; -} -.wire-catalog-feedback { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - gap: 0.5rem 1rem; - align-items: start; -} -.wire-catalog-feedback p { - grid-column: 1 / -1; - margin: 0; -} -.wire-catalog-visualization { - display: grid; - gap: 1rem; - min-width: 0; -} -.wire-catalog-visualization figcaption { - display: grid; - gap: 0.35rem; -} -.wire-catalog-visualization__content { - min-height: 10rem; - overflow-x: auto; -} -.wire-catalog-visualization__skeleton { - width: 100%; - min-height: 10rem; -} -.wire-catalog-card__image { - width: 100%; - aspect-ratio: 16 / 9; - object-fit: cover; - border-radius: calc(var(--wire-radius) * 0.75); -} @media (max-width: 480px) { .wire-catalog-action, .wire-catalog-action > :where(a, button) { @@ -2081,10 +1626,6 @@ [data-component] :where(.wire-dialog, [role="dialog"] > :first-child) { animation: wire-dialog-enter var(--wire-motion-slow) var(--wire-ease-emphasized) both; } -[data-component] :where([role="menu"], [role="listbox"], [role="tooltip"], .wire-mega-menu__panel) { - transform-origin: top center; - animation: wire-popover-enter var(--wire-motion-base) var(--wire-ease-emphasized) both; -} [data-component] :where([role="progressbar"], progress) { transition: inline-size var(--wire-motion-slow) var(--wire-ease-emphasized); } @@ -4695,115 +4236,6 @@ box-shadow: var(--wire-shadow-lg, 0 18px 48px rgb(0 0 0 / 0.18)); animation: wire-component-enter 160ms ease both; } -/* Responsive grouped application sidebar */ -.wire-sidebar-shell { - width: 15rem; - flex: none; - color: var(--wire-color-text); - background: var(--wire-color-surface); - border-right: 1px solid var(--wire-color-border); - align-self: stretch; - height: 100%; - min-height: 0; -} -.wire-sidebar-toggle, -.wire-sidebar-backdrop, -.wire-sidebar-panel__head { - display: none; -} -.wire-sidebar-panel { - position: sticky; - top: 0; - display: block; - width: 100%; - max-height: 100%; - padding: 0.75rem; - overflow-y: auto; - overscroll-behavior: contain; -} -.wire-sidebar-items { - display: grid; - gap: 0.15rem; -} -.wire-sidebar-items > a, -.wire-sidebar-group > summary, -.wire-sidebar-group__children a { - display: flex; - width: 100%; - min-height: 2.25rem; - padding: 0.5rem 0.65rem; - align-items: center; - gap: 0.55rem; - border-radius: 0.5rem; - color: var(--wire-color-muted); - font-size: 0.75rem; - font-weight: 450; - line-height: 1.35; - text-decoration: none; -} -.wire-sidebar-items > a:hover, -.wire-sidebar-group > summary:hover, -.wire-sidebar-group__children a:hover { - color: var(--wire-color-text); - background: var(--wire-color-surface-2); -} -.wire-sidebar-items a[aria-current="page"] { - color: var(--wire-color-primary); - background: color-mix(in srgb, var(--wire-color-primary) 12%, transparent); - box-shadow: inset 3px 0 0 var(--wire-color-primary); - font-weight: 600; -} -.wire-sidebar-group.has-active > summary { - position: relative; - color: var(--wire-color-text); - background: var(--wire-color-surface-2); -} -.wire-sidebar-group.has-active > summary::before { - position: absolute; - left: 0; - width: 3px; - height: 1.25rem; - border-radius: 999px; - content: ""; - background: var(--wire-color-primary); -} -.wire-sidebar-items :where(a, summary) > span:first-child:not(:last-child) { - width: 0.95rem; - height: 0.95rem; - flex: none; -} -.wire-sidebar-group > summary { - cursor: pointer; - list-style: none; -} -.wire-sidebar-group > summary::-webkit-details-marker { - display: none; -} -.wire-sidebar-group > summary > span:nth-last-child(2) { - min-width: 0; - flex: 1; -} -.wire-sidebar-group > summary > span:last-child { - width: 0.8rem; - height: 0.8rem; - transition: transform 180ms ease; -} -.wire-sidebar-group[open] > summary > span:last-child { - transform: rotate(180deg); -} -.wire-sidebar-group__children { - display: grid; - margin: 0.15rem 0 0.35rem 1rem; - padding-left: 0.5rem; - gap: 0.1rem; - border-left: 1px solid var(--wire-color-border); - animation: wire-sidebar-children 180ms ease both; -} -.wire-sidebar-group__children a { - min-height: 2rem; - padding-block: 0.4rem; - font-size: 0.7rem; -} @keyframes wire-sidebar-children { from { opacity: 0; @@ -4814,95 +4246,6 @@ transform: translateY(0); } } -@media (max-width: 1023px) { - .wire-sidebar-shell { - width: 100%; - min-height: 0; - border-right: 0; - border-bottom: 1px solid var(--wire-color-border); - } - .wire-sidebar-toggle { - display: inline-flex; - min-height: 2.5rem; - margin: 0.65rem; - padding: 0.55rem 0.75rem; - align-items: center; - gap: 0.55rem; - border: 1px solid var(--wire-color-border); - border-radius: 0.6rem; - color: var(--wire-color-text); - background: var(--wire-color-surface); - font-size: 0.75rem; - font-weight: 550; - } - .wire-sidebar-toggle > span:first-child { - width: 1rem; - height: 1rem; - } - .wire-sidebar-backdrop { - position: fixed; - z-index: 69; - inset: 0; - width: 100%; - height: 100%; - border: 0; - background: rgb(0 0 0 / 0.58); - opacity: 0; - pointer-events: none; - transition: opacity 220ms ease; - } - .wire-sidebar-panel { - position: fixed; - z-index: 70; - top: 0; - bottom: 0; - left: 0; - width: min(86vw, 19rem); - max-height: none; - padding: 0.75rem; - background: var(--wire-color-surface); - box-shadow: 20px 0 50px rgb(0 0 0 / 0.28); - transform: translateX(-105%); - visibility: hidden; - transition: - transform 240ms cubic-bezier(0.22, 1, 0.36, 1), - visibility 240ms; - } - .wire-sidebar-shell.is-open .wire-sidebar-backdrop { - display: block; - opacity: 1; - pointer-events: auto; - } - .wire-sidebar-shell.is-open .wire-sidebar-panel { - transform: translateX(0); - visibility: visible; - } - .wire-sidebar-panel__head { - display: flex; - min-height: 3rem; - margin-bottom: 0.5rem; - padding: 0.35rem 0.45rem 0.7rem; - align-items: center; - justify-content: space-between; - border-bottom: 1px solid var(--wire-color-border); - } - .wire-sidebar-panel__head strong { - font-size: 0.8rem; - font-weight: 600; - } - .wire-sidebar-panel__head button { - display: grid; - width: 2.25rem; - height: 2.25rem; - place-items: center; - border-radius: 0.5rem; - color: var(--wire-color-muted); - } - .wire-sidebar-panel__head button span { - width: 1rem; - height: 1rem; - } -} .wire-preferences__panel > strong { padding-inline: 0.25rem; font-size: 0.7rem; @@ -7115,11 +6458,6 @@ align-items: center; gap: clamp(1.5rem, 5vw, 5rem); } -.wire-sidebar-layout { - display: grid; - grid-template-columns: minmax(13rem, 18rem) minmax(0, 1fr); - gap: clamp(1rem, 4vw, 3rem); -} .wire-sticky-layout { position: sticky; top: 1rem; @@ -7174,133 +6512,6 @@ white-space: nowrap !important; border: 0 !important; } -.wire-catalog-card { - position: relative; - display: grid; - align-content: start; - gap: 0.85rem; - min-width: 0; - min-height: 13rem; - overflow: hidden; - padding: clamp(1.25rem, 3vw, 1.75rem); - isolation: isolate; - transition: - border-color var(--wire-motion-base) var(--wire-ease-standard), - box-shadow var(--wire-motion-base) var(--wire-ease-standard), - transform var(--wire-motion-base) var(--wire-ease-emphasized); -} -.wire-catalog-card::before { - display: none; - width: 2.75rem; - height: 2.75rem; - place-items: center; - margin-bottom: 0.35rem; - color: var(--wire-color-primary); - font-size: 1.15rem; - font-weight: 800; - border: 1px solid color-mix(in srgb, var(--wire-color-primary) 28%, transparent); - border-radius: calc(var(--wire-radius) * 0.8); - background: color-mix(in srgb, var(--wire-color-primary) 12%, transparent); -} -.wire-catalog-card__icon { - display: grid; - width: 2.75rem; - height: 2.75rem; - place-items: center; - margin-bottom: 0.35rem; - color: var(--wire-color-primary); - border: 1px solid color-mix(in srgb, var(--wire-color-primary) 28%, transparent); - border-radius: calc(var(--wire-radius) * 0.8); - background: color-mix(in srgb, var(--wire-color-primary) 10%, transparent); -} -.wire-catalog-card--channel::before { - content: "◉"; -} -.wire-catalog-card--integration::before { - content: "⌘"; -} -.wire-catalog-card--campaign::before { - content: "↗"; -} -.wire-catalog-card h3, -.wire-catalog-card p { - margin: 0; -} -.wire-catalog-card h3 { - color: var(--wire-color-text); - font-size: clamp(1.05rem, 2vw, 1.25rem); - line-height: 1.25; -} -.wire-catalog-card p { - color: var(--wire-color-muted); - line-height: 1.6; -} -.wire-catalog-card:has(.wire-catalog-card__link)::after { - content: "→"; - position: absolute; - right: 1.25rem; - bottom: 1.1rem; - z-index: 1; - color: var(--wire-color-primary); - font-size: 1.2rem; - font-weight: 800; - transition: transform var(--wire-motion-base) var(--wire-ease-emphasized); -} -.wire-catalog-card__link { - position: absolute; - inset: 0; - z-index: 2; - border-radius: inherit; -} -.wire-catalog-card__link:focus-visible { - outline: 2px solid var(--wire-color-primary); - outline-offset: 3px; -} -@media (hover: hover) and (pointer: fine) { - .wire-catalog-card:has(.wire-catalog-card__link):hover { - border-color: color-mix(in srgb, var(--wire-color-primary) 48%, var(--wire-color-border)); - box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--wire-color-primary) 12%, transparent); - transform: translateY(-3px); - } - .wire-catalog-card:has(.wire-catalog-card__link):hover::after { - transform: translateX(0.25rem); - } -} -.wire-catalog-card--glass { - background: color-mix(in srgb, var(--wire-color-surface) 80%, transparent); - backdrop-filter: blur(12px); -} -.wire-catalog-card--outlined { - box-shadow: none; -} -.wire-catalog-card--elevated { - box-shadow: 0 1rem 3rem rgb(0 0 0 / 0.14); -} -.wire-catalog-card--error { - border-color: var(--wire-color-danger); -} -.wire-catalog-card--success { - border-color: var(--wire-color-success); -} -.wire-catalog-card--warning { - border-color: var(--wire-color-warning); -} -.wire-catalog-badge { - min-height: 1.5rem; -} -.wire-catalog-badge--notificationdot, -.wire-catalog-badge--onlineindicator, -.wire-catalog-badge--healthindicator { - min-width: 0.65rem; - width: 0.65rem; - height: 0.65rem; - min-height: 0; - padding: 0; - overflow: hidden; - color: transparent; - border-radius: 999px; - background: var(--wire-color-success); -} @media (max-width: 768px) { .wire-split-layout, .wire-sidebar-layout { @@ -7445,128 +6656,6 @@ transform: translateY(0); } } -/* --- Analytics dashboard preview ---------------------------------------- */ -.wire-analytics-preview { - width: 100%; - min-width: 0; -} -.wire-analytics-preview__surface { - display: grid; - grid-template-columns: minmax(0, 1.08fr) minmax(18rem, 0.92fr); - gap: clamp(1.5rem, 4vw, 3.5rem); - align-items: center; - width: 100%; - min-width: 0; - padding: clamp(1.25rem, 3vw, 2rem); - overflow: hidden; - color: var(--wire-color-text); - background: - radial-gradient( - circle at 100% 0%, - color-mix(in srgb, var(--wire-color-primary) 10%, transparent), - transparent 38% - ), - var(--wire-color-surface); - border: 1px solid var(--wire-color-border); - border-radius: calc(var(--wire-radius) * 1.35); - box-shadow: 0 1.25rem 3.5rem color-mix(in srgb, var(--wire-color-text) 9%, transparent); -} -.wire-analytics-preview__visual, -.wire-analytics-preview__content { - min-width: 0; -} -.wire-analytics-preview__chart, -.wire-analytics-preview__image { - width: 100%; - border: 1px solid color-mix(in srgb, var(--wire-color-border) 88%, transparent); - border-radius: calc(var(--wire-radius) * 0.95); - background: color-mix(in srgb, var(--wire-color-surface-2) 92%, transparent); - box-shadow: inset 0 1px 0 color-mix(in srgb, var(--wire-color-text) 4%, transparent); -} -.wire-analytics-preview__image { - aspect-ratio: 16 / 10; - object-fit: cover; -} -.wire-analytics-preview__chart { - padding: clamp(1rem, 2vw, 1.35rem); -} -.wire-analytics-preview__chart-header { - display: flex; - align-items: center; - justify-content: space-between; - gap: 1rem; - color: var(--wire-color-text); - font-size: 0.875rem; -} -.wire-analytics-preview__chart-header span { - color: var(--wire-color-success); - font-weight: 800; -} -.wire-analytics-preview__chart-svg { - width: 100%; - height: auto; - margin-top: 1rem; - color: var(--wire-color-primary); -} -.wire-analytics-preview__days { - display: flex; - justify-content: space-between; - gap: 0.5rem; - margin-top: 0.5rem; - color: var(--wire-color-muted); - font-size: 0.7rem; -} -.wire-analytics-preview__content { - display: grid; - align-content: center; -} -.wire-analytics-preview__eyebrow { - margin: 0; - color: var(--wire-color-primary); - font-size: 0.75rem; - font-weight: 800; - letter-spacing: 0.16em; - text-transform: uppercase; -} -.wire-analytics-preview__title { - max-width: 13ch; - margin: 0; - color: var(--wire-color-text); - font-size: clamp(1.85rem, 4vw, 3rem); - line-height: 1.03; - font-weight: 750; - letter-spacing: -0.045em; -} -.wire-analytics-preview__eyebrow + .wire-analytics-preview__title { - margin-top: 0.8rem; -} -.wire-analytics-preview__description { - max-width: 34rem; - margin: 1rem 0 0; - color: var(--wire-color-muted); - font-size: 1rem; - line-height: 1.7; -} -.wire-analytics-preview__metrics { - min-width: 0; - margin-top: 1.5rem; -} -.wire-analytics-preview__action { - display: inline-flex; - width: fit-content; - align-items: center; - gap: 0.5rem; - margin-top: 1.5rem; - color: var(--wire-color-primary); - font-weight: 750; - text-decoration: none; -} -.wire-analytics-preview__action span { - transition: transform var(--wire-motion-base) var(--wire-ease-emphasized); -} -.wire-analytics-preview__action:hover span { - transform: translateX(0.25rem); -} /* --- Metric grid refinements -------------------------------------------- */ .wire-metric-grid-shell { width: 100%; @@ -7649,15 +6738,6 @@ border: 1px dashed var(--wire-color-border); border-radius: var(--wire-radius); } -@media (max-width: 900px) { - .wire-analytics-preview__surface { - grid-template-columns: 1fr; - } - - .wire-analytics-preview__title { - max-width: 18ch; - } -} @media (max-width: 640px) { .wire-segmented-group { width: 100%;