diff --git a/docs/ui-visual-contract-0.8.json b/docs/ui-visual-contract-0.8.json index 7fdf5602..07838c66 100644 --- a/docs/ui-visual-contract-0.8.json +++ b/docs/ui-visual-contract-0.8.json @@ -66,7 +66,7 @@ "packages/ui/components/MetricGrid.wrn": "6018a98c10628ed240ed236ed916c0ff60994d192c3aadafd10bc876be0f9364", "packages/ui/components/Modal.wrn": "59d4ae9d6dd2700692d9edecfe53ee868e9f864363a4885961d1813cb2bee51f", "packages/ui/components/Nav.wrn": "7dc456b879e9248bde267b986cdcb138b8f3127d98b51e27bc9708129953f5e2", - "packages/ui/components/Navbar.wrn": "cf28cf4cdd23c85821d3302e6881115c2c14977e7cb7142d306cf559fea2a518", + "packages/ui/components/Navbar.wrn": "7989d25819312014c0a0855370b80b925d53ff735d682fdb61e9677a9dacb7f3", "packages/ui/components/PageHeader.wrn": "0761235a4924eec09877be40b292d27b70db22d210be7d8e989493165c20df86", "packages/ui/components/Pagination.wrn": "9ceb74745b159150b015bbbb1974c68e14a7d4b92bd03491cb23b8855aa07983", "packages/ui/components/PinInput.wrn": "5196f584de8d548a5dfa03688c3c95da3c948cead2662b05e927386ccea74299", @@ -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": "eee7da4d1088703a61db8e78c43eb6ff7f1b6a02fd8082d8d722beb65bf78382" + "packages/ui/ui.css": "f71641efb0c98b673af70c10dbcea8e693de258ce8620b4f84c64553ea70204e" } } diff --git a/examples/component-showcase/app/pages/components/accordion.wrn b/examples/component-showcase/app/pages/components/accordion.wrn index d62c39eb..a754d286 100644 --- a/examples/component-showcase/app/pages/components/accordion.wrn +++ b/examples/component-showcase/app/pages/components/accordion.wrn @@ -268,7 +268,7 @@ page AccordionDetail {
Component props17 controls
diff --git a/examples/component-showcase/app/pages/components/advanced-date-picker.wrn b/examples/component-showcase/app/pages/components/advanced-date-picker.wrn index 9c1063d7..b5a40355 100644 --- a/examples/component-showcase/app/pages/components/advanced-date-picker.wrn +++ b/examples/component-showcase/app/pages/components/advanced-date-picker.wrn @@ -152,7 +152,7 @@ page AdvancedDatePickerDetail {
Component props7 controls
diff --git a/examples/component-showcase/app/pages/components/advanced-range-slider.wrn b/examples/component-showcase/app/pages/components/advanced-range-slider.wrn index 3f46bbf9..39b0b2b8 100644 --- a/examples/component-showcase/app/pages/components/advanced-range-slider.wrn +++ b/examples/component-showcase/app/pages/components/advanced-range-slider.wrn @@ -152,7 +152,7 @@ page AdvancedRangeSliderDetail {
Component props7 controls
diff --git a/examples/component-showcase/app/pages/components/advanced-select.wrn b/examples/component-showcase/app/pages/components/advanced-select.wrn index 557f4e64..2142adbd 100644 --- a/examples/component-showcase/app/pages/components/advanced-select.wrn +++ b/examples/component-showcase/app/pages/components/advanced-select.wrn @@ -125,36 +125,36 @@ page AdvancedSelectDetail {
Component props51 controls
diff --git a/examples/component-showcase/app/pages/components/alert.wrn b/examples/component-showcase/app/pages/components/alert.wrn index 50b4f9e6..fd2e7193 100644 --- a/examples/component-showcase/app/pages/components/alert.wrn +++ b/examples/component-showcase/app/pages/components/alert.wrn @@ -281,7 +281,7 @@ page AlertDetail {
Component props21 controls
diff --git a/examples/component-showcase/app/pages/components/auth-split-layout.wrn b/examples/component-showcase/app/pages/components/auth-split-layout.wrn index a6ebf956..7d383935 100644 --- a/examples/component-showcase/app/pages/components/auth-split-layout.wrn +++ b/examples/component-showcase/app/pages/components/auth-split-layout.wrn @@ -77,30 +77,30 @@ page AuthSplitLayoutDetail {
Component props8 controls
diff --git a/examples/component-showcase/app/pages/components/avatar-group.wrn b/examples/component-showcase/app/pages/components/avatar-group.wrn index f05b0a1b..7bbd8159 100644 --- a/examples/component-showcase/app/pages/components/avatar-group.wrn +++ b/examples/component-showcase/app/pages/components/avatar-group.wrn @@ -156,7 +156,7 @@ page AvatarGroupDetail {
Component props12 controls
diff --git a/examples/component-showcase/app/pages/components/breadcrumb.wrn b/examples/component-showcase/app/pages/components/breadcrumb.wrn index 98a81812..cd0ff289 100644 --- a/examples/component-showcase/app/pages/components/breadcrumb.wrn +++ b/examples/component-showcase/app/pages/components/breadcrumb.wrn @@ -158,7 +158,7 @@ page BreadcrumbDetail {
Component props12 controls
diff --git a/examples/component-showcase/app/pages/components/button-group.wrn b/examples/component-showcase/app/pages/components/button-group.wrn index 625df374..18a29650 100644 --- a/examples/component-showcase/app/pages/components/button-group.wrn +++ b/examples/component-showcase/app/pages/components/button-group.wrn @@ -158,7 +158,7 @@ page ButtonGroupDetail {
Component props13 controls
diff --git a/examples/component-showcase/app/pages/components/card.wrn b/examples/component-showcase/app/pages/components/card.wrn index 3085024f..7cb34a73 100644 --- a/examples/component-showcase/app/pages/components/card.wrn +++ b/examples/component-showcase/app/pages/components/card.wrn @@ -401,7 +401,7 @@ page CardDetail {
Component props31 controls
diff --git a/examples/component-showcase/app/pages/components/carousel.wrn b/examples/component-showcase/app/pages/components/carousel.wrn index c4c87faa..f04fe840 100644 --- a/examples/component-showcase/app/pages/components/carousel.wrn +++ b/examples/component-showcase/app/pages/components/carousel.wrn @@ -170,7 +170,7 @@ page CarouselDetail {
Component props22 controls
diff --git a/examples/component-showcase/app/pages/components/chart.wrn b/examples/component-showcase/app/pages/components/chart.wrn index db1e5d79..311675e6 100644 --- a/examples/component-showcase/app/pages/components/chart.wrn +++ b/examples/component-showcase/app/pages/components/chart.wrn @@ -152,7 +152,7 @@ page ChartDetail {
Component props7 controls
diff --git a/examples/component-showcase/app/pages/components/chat-bubble.wrn b/examples/component-showcase/app/pages/components/chat-bubble.wrn index 5df8b1c3..655dd56d 100644 --- a/examples/component-showcase/app/pages/components/chat-bubble.wrn +++ b/examples/component-showcase/app/pages/components/chat-bubble.wrn @@ -159,7 +159,7 @@ page ChatBubbleDetail {
Component props11 controls
diff --git a/examples/component-showcase/app/pages/components/checkbox.wrn b/examples/component-showcase/app/pages/components/checkbox.wrn index a4cfe5e9..2bcd3249 100644 --- a/examples/component-showcase/app/pages/components/checkbox.wrn +++ b/examples/component-showcase/app/pages/components/checkbox.wrn @@ -280,7 +280,7 @@ page CheckboxDetail {
Component props27 controls
diff --git a/examples/component-showcase/app/pages/components/clipboard.wrn b/examples/component-showcase/app/pages/components/clipboard.wrn index 26f8f513..90d4991b 100644 --- a/examples/component-showcase/app/pages/components/clipboard.wrn +++ b/examples/component-showcase/app/pages/components/clipboard.wrn @@ -152,7 +152,7 @@ page ClipboardDetail {
Component props7 controls
diff --git a/examples/component-showcase/app/pages/components/collapse.wrn b/examples/component-showcase/app/pages/components/collapse.wrn index 0de2fbd9..606c69b3 100644 --- a/examples/component-showcase/app/pages/components/collapse.wrn +++ b/examples/component-showcase/app/pages/components/collapse.wrn @@ -260,7 +260,7 @@ page CollapseDetail {
Component props8 controls
diff --git a/examples/component-showcase/app/pages/components/combo-box.wrn b/examples/component-showcase/app/pages/components/combo-box.wrn index 883c5d66..5974e613 100644 --- a/examples/component-showcase/app/pages/components/combo-box.wrn +++ b/examples/component-showcase/app/pages/components/combo-box.wrn @@ -113,37 +113,37 @@ page ComboBoxDetail {
Component props41 controls
diff --git a/examples/component-showcase/app/pages/components/confetti.wrn b/examples/component-showcase/app/pages/components/confetti.wrn index b5c391e4..78105e6c 100644 --- a/examples/component-showcase/app/pages/components/confetti.wrn +++ b/examples/component-showcase/app/pages/components/confetti.wrn @@ -152,7 +152,7 @@ page ConfettiDetail {
Component props7 controls
diff --git a/examples/component-showcase/app/pages/components/context-menu.wrn b/examples/component-showcase/app/pages/components/context-menu.wrn index d79568c1..9ab4f0be 100644 --- a/examples/component-showcase/app/pages/components/context-menu.wrn +++ b/examples/component-showcase/app/pages/components/context-menu.wrn @@ -173,27 +173,27 @@ page ContextMenuDetail {
Component props18 controls
diff --git a/examples/component-showcase/app/pages/components/ctasection.wrn b/examples/component-showcase/app/pages/components/ctasection.wrn index 1e6c37bc..731c5689 100644 --- a/examples/component-showcase/app/pages/components/ctasection.wrn +++ b/examples/component-showcase/app/pages/components/ctasection.wrn @@ -191,7 +191,7 @@ page CTASectionDetail {
Component props25 controls
diff --git a/examples/component-showcase/app/pages/components/data-map.wrn b/examples/component-showcase/app/pages/components/data-map.wrn index c9eeee8f..d0156f80 100644 --- a/examples/component-showcase/app/pages/components/data-map.wrn +++ b/examples/component-showcase/app/pages/components/data-map.wrn @@ -152,7 +152,7 @@ page DataMapDetail {
Component props7 controls
diff --git a/examples/component-showcase/app/pages/components/data-table.wrn b/examples/component-showcase/app/pages/components/data-table.wrn index c4f68ed9..5cbc9366 100644 --- a/examples/component-showcase/app/pages/components/data-table.wrn +++ b/examples/component-showcase/app/pages/components/data-table.wrn @@ -504,11 +504,11 @@ page DataTableDetail {
Component props29 controls
-
+]
diff --git a/examples/component-showcase/app/pages/components/device-frame.wrn b/examples/component-showcase/app/pages/components/device-frame.wrn index 6499c3a2..5d98758e 100644 --- a/examples/component-showcase/app/pages/components/device-frame.wrn +++ b/examples/component-showcase/app/pages/components/device-frame.wrn @@ -160,7 +160,7 @@ page DeviceFrameDetail {
Component props14 controls
diff --git a/examples/component-showcase/app/pages/components/drag-and-drop.wrn b/examples/component-showcase/app/pages/components/drag-and-drop.wrn index 3bc18c77..6645fd70 100644 --- a/examples/component-showcase/app/pages/components/drag-and-drop.wrn +++ b/examples/component-showcase/app/pages/components/drag-and-drop.wrn @@ -152,7 +152,7 @@ page DragAndDropDetail {
Component props7 controls
diff --git a/examples/component-showcase/app/pages/components/dropdown.wrn b/examples/component-showcase/app/pages/components/dropdown.wrn index 138ee180..d5621f13 100644 --- a/examples/component-showcase/app/pages/components/dropdown.wrn +++ b/examples/component-showcase/app/pages/components/dropdown.wrn @@ -172,27 +172,27 @@ page DropdownDetail {
Component props17 controls
diff --git a/examples/component-showcase/app/pages/components/feature-grid.wrn b/examples/component-showcase/app/pages/components/feature-grid.wrn index 32710a12..b77fdccb 100644 --- a/examples/component-showcase/app/pages/components/feature-grid.wrn +++ b/examples/component-showcase/app/pages/components/feature-grid.wrn @@ -159,7 +159,7 @@ page FeatureGridDetail {
Component props14 controls
diff --git a/examples/component-showcase/app/pages/components/file-upload.wrn b/examples/component-showcase/app/pages/components/file-upload.wrn index 8c8f4732..0fdf7a23 100644 --- a/examples/component-showcase/app/pages/components/file-upload.wrn +++ b/examples/component-showcase/app/pages/components/file-upload.wrn @@ -152,7 +152,7 @@ page FileUploadDetail {
Component props7 controls
diff --git a/examples/component-showcase/app/pages/components/footer.wrn b/examples/component-showcase/app/pages/components/footer.wrn index c1e20418..95687ac9 100644 --- a/examples/component-showcase/app/pages/components/footer.wrn +++ b/examples/component-showcase/app/pages/components/footer.wrn @@ -164,77 +164,77 @@ page FooterDetail {
Component props8 controls
diff --git a/examples/component-showcase/app/pages/components/hero-actions.wrn b/examples/component-showcase/app/pages/components/hero-actions.wrn index 18043687..67dedcc9 100644 --- a/examples/component-showcase/app/pages/components/hero-actions.wrn +++ b/examples/component-showcase/app/pages/components/hero-actions.wrn @@ -152,18 +152,18 @@ page HeroActionsDetail {
Component props8 controls
diff --git a/examples/component-showcase/app/pages/components/hero.wrn b/examples/component-showcase/app/pages/components/hero.wrn index 63e234e7..7785bae7 100644 --- a/examples/component-showcase/app/pages/components/hero.wrn +++ b/examples/component-showcase/app/pages/components/hero.wrn @@ -428,7 +428,7 @@ page HeroDetail {
Component props38 controls
diff --git a/examples/component-showcase/app/pages/components/legend-indicator.wrn b/examples/component-showcase/app/pages/components/legend-indicator.wrn index 743622e0..b51e9255 100644 --- a/examples/component-showcase/app/pages/components/legend-indicator.wrn +++ b/examples/component-showcase/app/pages/components/legend-indicator.wrn @@ -152,7 +152,7 @@ page LegendIndicatorDetail {
Component props7 controls
diff --git a/examples/component-showcase/app/pages/components/list-group.wrn b/examples/component-showcase/app/pages/components/list-group.wrn index ceec778b..37315eea 100644 --- a/examples/component-showcase/app/pages/components/list-group.wrn +++ b/examples/component-showcase/app/pages/components/list-group.wrn @@ -152,7 +152,7 @@ page ListGroupDetail {
Component props7 controls
diff --git a/examples/component-showcase/app/pages/components/list.wrn b/examples/component-showcase/app/pages/components/list.wrn index f9269c74..e129b0f4 100644 --- a/examples/component-showcase/app/pages/components/list.wrn +++ b/examples/component-showcase/app/pages/components/list.wrn @@ -152,7 +152,7 @@ page ListDetail {
Component props7 controls
diff --git a/examples/component-showcase/app/pages/components/map.wrn b/examples/component-showcase/app/pages/components/map.wrn index 8e025977..1a35d3a8 100644 --- a/examples/component-showcase/app/pages/components/map.wrn +++ b/examples/component-showcase/app/pages/components/map.wrn @@ -152,7 +152,7 @@ page MapDetail {
Component props7 controls
diff --git a/examples/component-showcase/app/pages/components/marquee.wrn b/examples/component-showcase/app/pages/components/marquee.wrn index 675021b1..7fa6d2eb 100644 --- a/examples/component-showcase/app/pages/components/marquee.wrn +++ b/examples/component-showcase/app/pages/components/marquee.wrn @@ -152,7 +152,7 @@ page MarqueeDetail {
Component props7 controls
diff --git a/examples/component-showcase/app/pages/components/mega-menu.wrn b/examples/component-showcase/app/pages/components/mega-menu.wrn index d1db2148..ea5f6c66 100644 --- a/examples/component-showcase/app/pages/components/mega-menu.wrn +++ b/examples/component-showcase/app/pages/components/mega-menu.wrn @@ -152,7 +152,7 @@ page MegaMenuDetail {
Component props8 controls
diff --git a/examples/component-showcase/app/pages/components/metric-grid.wrn b/examples/component-showcase/app/pages/components/metric-grid.wrn index 512eaa2f..93a007cf 100644 --- a/examples/component-showcase/app/pages/components/metric-grid.wrn +++ b/examples/component-showcase/app/pages/components/metric-grid.wrn @@ -156,7 +156,7 @@ page MetricGridDetail {
Component props13 controls
diff --git a/examples/component-showcase/app/pages/components/nav.wrn b/examples/component-showcase/app/pages/components/nav.wrn index 4514923f..cf96ed70 100644 --- a/examples/component-showcase/app/pages/components/nav.wrn +++ b/examples/component-showcase/app/pages/components/nav.wrn @@ -154,7 +154,7 @@ page NavDetail {
Component props9 controls
diff --git a/examples/component-showcase/app/pages/components/navbar.wrn b/examples/component-showcase/app/pages/components/navbar.wrn index 6f5d79ba..85da9102 100644 --- a/examples/component-showcase/app/pages/components/navbar.wrn +++ b/examples/component-showcase/app/pages/components/navbar.wrn @@ -325,7 +325,7 @@ page NavbarDetail {
Component props13 controls
-
@@ -607,7 +607,7 @@ page NavbarDetail {
Live preview
-
+
Component usage.wrn
@@ -903,7 +903,7 @@ page NavbarDetail {
Live preview
-
+
Component usage.wrn
@@ -1200,7 +1200,7 @@ page NavbarDetail {
Live preview
-
+
Component usage.wrn
diff --git a/examples/component-showcase/app/pages/components/page-header.wrn b/examples/component-showcase/app/pages/components/page-header.wrn index 7ddf220c..7e348f5c 100644 --- a/examples/component-showcase/app/pages/components/page-header.wrn +++ b/examples/component-showcase/app/pages/components/page-header.wrn @@ -183,19 +183,19 @@ page PageHeaderDetail {
Component props25 controls
diff --git a/examples/component-showcase/app/pages/components/portal-dashboard.wrn b/examples/component-showcase/app/pages/components/portal-dashboard.wrn index 308ce511..908479d7 100644 --- a/examples/component-showcase/app/pages/components/portal-dashboard.wrn +++ b/examples/component-showcase/app/pages/components/portal-dashboard.wrn @@ -487,7 +487,7 @@ page PortalDashboardDetail {
Component props14 controls
diff --git a/examples/component-showcase/app/pages/components/radio.wrn b/examples/component-showcase/app/pages/components/radio.wrn index 5e877014..6285c092 100644 --- a/examples/component-showcase/app/pages/components/radio.wrn +++ b/examples/component-showcase/app/pages/components/radio.wrn @@ -170,7 +170,7 @@ page RadioDetail {
Component props25 controls
diff --git a/examples/component-showcase/app/pages/components/range-slider.wrn b/examples/component-showcase/app/pages/components/range-slider.wrn index 7199aa07..1bfc4d34 100644 --- a/examples/component-showcase/app/pages/components/range-slider.wrn +++ b/examples/component-showcase/app/pages/components/range-slider.wrn @@ -173,7 +173,7 @@ page RangeSliderDetail {
Component props26 controls
diff --git a/examples/component-showcase/app/pages/components/rating.wrn b/examples/component-showcase/app/pages/components/rating.wrn index 3041a5ed..abb9030a 100644 --- a/examples/component-showcase/app/pages/components/rating.wrn +++ b/examples/component-showcase/app/pages/components/rating.wrn @@ -152,7 +152,7 @@ page RatingDetail {
Component props7 controls
diff --git a/examples/component-showcase/app/pages/components/scrollspy.wrn b/examples/component-showcase/app/pages/components/scrollspy.wrn index 66c40564..221de88a 100644 --- a/examples/component-showcase/app/pages/components/scrollspy.wrn +++ b/examples/component-showcase/app/pages/components/scrollspy.wrn @@ -151,7 +151,7 @@ page ScrollspyDetail {
Component props7 controls
diff --git a/examples/component-showcase/app/pages/components/select.wrn b/examples/component-showcase/app/pages/components/select.wrn index 4fab97d8..f33d7714 100644 --- a/examples/component-showcase/app/pages/components/select.wrn +++ b/examples/component-showcase/app/pages/components/select.wrn @@ -275,7 +275,7 @@ page SelectDetail {
Component props22 controls
diff --git a/examples/component-showcase/app/pages/components/sidebar.wrn b/examples/component-showcase/app/pages/components/sidebar.wrn index 3bdc3afe..40880878 100644 --- a/examples/component-showcase/app/pages/components/sidebar.wrn +++ b/examples/component-showcase/app/pages/components/sidebar.wrn @@ -156,7 +156,7 @@ page SidebarDetail {
Component props8 controls
diff --git a/examples/component-showcase/app/pages/components/split-hero.wrn b/examples/component-showcase/app/pages/components/split-hero.wrn index 9bdc2f00..b3873da4 100644 --- a/examples/component-showcase/app/pages/components/split-hero.wrn +++ b/examples/component-showcase/app/pages/components/split-hero.wrn @@ -305,7 +305,7 @@ page SplitHeroDetail {
Component props31 controls
diff --git a/examples/component-showcase/app/pages/components/stats-bar.wrn b/examples/component-showcase/app/pages/components/stats-bar.wrn index 0172e161..059dc19d 100644 --- a/examples/component-showcase/app/pages/components/stats-bar.wrn +++ b/examples/component-showcase/app/pages/components/stats-bar.wrn @@ -154,34 +154,34 @@ page StatsBarDetail {
Component props10 controls
diff --git a/examples/component-showcase/app/pages/components/stepper.wrn b/examples/component-showcase/app/pages/components/stepper.wrn index da2ccae9..0aa41b2a 100644 --- a/examples/component-showcase/app/pages/components/stepper.wrn +++ b/examples/component-showcase/app/pages/components/stepper.wrn @@ -155,7 +155,7 @@ page StepperDetail {
Component props8 controls
diff --git a/examples/component-showcase/app/pages/components/styled-icon.wrn b/examples/component-showcase/app/pages/components/styled-icon.wrn index b710ecb3..04362bd0 100644 --- a/examples/component-showcase/app/pages/components/styled-icon.wrn +++ b/examples/component-showcase/app/pages/components/styled-icon.wrn @@ -152,7 +152,7 @@ page StyledIconDetail {
Component props7 controls
diff --git a/examples/component-showcase/app/pages/components/tabs.wrn b/examples/component-showcase/app/pages/components/tabs.wrn index bc90c6e9..a834d587 100644 --- a/examples/component-showcase/app/pages/components/tabs.wrn +++ b/examples/component-showcase/app/pages/components/tabs.wrn @@ -155,7 +155,7 @@ page TabsDetail {
Component props9 controls
diff --git a/examples/component-showcase/app/pages/components/timeline.wrn b/examples/component-showcase/app/pages/components/timeline.wrn index e6336e94..b23fc912 100644 --- a/examples/component-showcase/app/pages/components/timeline.wrn +++ b/examples/component-showcase/app/pages/components/timeline.wrn @@ -152,7 +152,7 @@ page TimelineDetail {
Component props7 controls
diff --git a/examples/component-showcase/app/pages/components/toast-notifications.wrn b/examples/component-showcase/app/pages/components/toast-notifications.wrn index 101e4378..0117fe8f 100644 --- a/examples/component-showcase/app/pages/components/toast-notifications.wrn +++ b/examples/component-showcase/app/pages/components/toast-notifications.wrn @@ -152,7 +152,7 @@ page ToastNotificationsDetail {
Component props7 controls
diff --git a/examples/component-showcase/app/pages/components/toast.wrn b/examples/component-showcase/app/pages/components/toast.wrn index 0565b55c..e27e0602 100644 --- a/examples/component-showcase/app/pages/components/toast.wrn +++ b/examples/component-showcase/app/pages/components/toast.wrn @@ -152,7 +152,7 @@ page ToastDetail {
Component props7 controls
diff --git a/examples/component-showcase/app/pages/components/toggle-count.wrn b/examples/component-showcase/app/pages/components/toggle-count.wrn index 4046f97b..0e7d9850 100644 --- a/examples/component-showcase/app/pages/components/toggle-count.wrn +++ b/examples/component-showcase/app/pages/components/toggle-count.wrn @@ -172,7 +172,7 @@ page ToggleCountDetail {
Component props23 controls
diff --git a/examples/component-showcase/app/pages/components/tree-view.wrn b/examples/component-showcase/app/pages/components/tree-view.wrn index 6ca427dd..7ba9b54e 100644 --- a/examples/component-showcase/app/pages/components/tree-view.wrn +++ b/examples/component-showcase/app/pages/components/tree-view.wrn @@ -152,7 +152,7 @@ page TreeViewDetail {
Component props7 controls
diff --git a/examples/component-showcase/app/pages/components/wysiwyg-editor.wrn b/examples/component-showcase/app/pages/components/wysiwyg-editor.wrn index 4c4d6380..adfba02e 100644 --- a/examples/component-showcase/app/pages/components/wysiwyg-editor.wrn +++ b/examples/component-showcase/app/pages/components/wysiwyg-editor.wrn @@ -152,7 +152,7 @@ page WysiwygEditorDetail {
Component props7 controls
diff --git a/examples/component-showcase/app/pages/navigation.wrn b/examples/component-showcase/app/pages/navigation.wrn index 7f4d84fd..91c1a97a 100644 --- a/examples/component-showcase/app/pages/navigation.wrn +++ b/examples/component-showcase/app/pages/navigation.wrn @@ -56,7 +56,7 @@ page NavigationShowcase {
-
+
Navigation

Navbar

Theme-aware, responsive navbar component.

diff --git a/examples/component-showcase/scripts/generate-showcase.mjs b/examples/component-showcase/scripts/generate-showcase.mjs index adadf44a..9f93b8e5 100644 --- a/examples/component-showcase/scripts/generate-showcase.mjs +++ b/examples/component-showcase/scripts/generate-showcase.mjs @@ -83,6 +83,15 @@ const escapeText = (value) => */ const escapeCode = (value) => escapeText(value).replaceAll("{", "{").replaceAll("}", "}"); +/* + * JSON for a textarea. Entities keep the braces away from the WRN compiler, + * which would otherwise read them as interpolation and fail the page build, + * while the browser decodes them so the reader still sees valid JSON. The + * span trick used for code samples cannot be used here: a textarea shows its + * markup literally. + */ +const escapeTextareaJson = (value) => + escapeText(value).replaceAll("{", "{").replaceAll("}", "}"); const escapeAttribute = (value) => escapeText(value).replaceAll('"', """).replaceAll("'", "'"); @@ -418,7 +427,13 @@ function sampleValue(prop, component, variation) { function wrnAttribute(name, value) { if (typeof value === "object" && value !== null) { const expression = JSON.stringify(value).replaceAll("'", "\\u0027"); - return `${name}='${expression}'`; + /* + * An object literal has to be parenthesised. A bare {...} at the start of + * an attribute is read as an interpolation, so the compiler tried to parse + * the JSON as JavaScript and stopped at the first colon. Arrays start with + * [ and were never affected, which is why only object props broke. + */ + return `${name}='${Array.isArray(value) ? expression : `(${expression})`}'`; } return `${name}="${escapeAttribute(String(value))}"`; } @@ -653,7 +668,7 @@ function playgroundControl(prop, component) { prop.type === "object" || prop.type.includes("[]"); if (structured) { - return ``; + return ``; } const options = playgroundOptions(prop, component, value); diff --git a/packages/csr/src/reactive-runtime.ts b/packages/csr/src/reactive-runtime.ts index 0dcdd0e6..132b7850 100644 --- a/packages/csr/src/reactive-runtime.ts +++ b/packages/csr/src/reactive-runtime.ts @@ -2360,6 +2360,11 @@ export const REACTIVE_RUNTIME = String.raw` while ((textNode = walker.nextNode())) { var template = textNode.nodeValue; if (template.indexOf("{") === -1) continue; + // Text in these is data, not a template: a JSON sample sitting in a + // textarea would otherwise be read as mustaches and eaten. + var owner = textNode.parentNode; + var ownerName = owner ? owner.nodeName : ""; + if (ownerName === "TEXTAREA" || ownerName === "SCRIPT" || ownerName === "STYLE") continue; if (!owns(textNode)) continue; (function (node, tpl) { reactive(function () { @@ -2886,6 +2891,32 @@ export const REACTIVE_RUNTIME = String.raw` }); } + /* + * One document observer, several subscribers. The filter stays explicit: + * observing every attribute would see the tabindex the roving code writes + * and loop on its own output. + */ + var documentWatchers = []; + + function watchDocument(handler) { + documentWatchers.push(handler); + } + + function startDocumentWatch() { + if (window.__wrnexusDocWatchBound || typeof MutationObserver !== "function") return; + window.__wrnexusDocWatchBound = true; + new MutationObserver(function () { + for (var index = 0; index < documentWatchers.length; index += 1) documentWatchers[index](); + }).observe(document.documentElement, { + subtree: true, + childList: true, + attributes: true, + // prettier-ignore + attributeFilter: ["data-open","data-show","class","style","hidden", + "data-placement","aria-selected","aria-current","disabled","aria-disabled"], + }); + } + function setupAnchoredOverlays() { if (window.__wrnexusAnchoredBound) return; window.__wrnexusAnchoredBound = true; @@ -2894,14 +2925,7 @@ export const REACTIVE_RUNTIME = String.raw` // root, data-show on the panel, a class), so watch for any attribute or // structural change and re-measure on the next frame instead of trying to // enumerate every signal. - if (typeof MutationObserver === "function") { - new MutationObserver(scheduleAnchoredReposition).observe(document.documentElement, { - subtree: true, - childList: true, - attributes: true, - attributeFilter: ["data-open", "data-show", "class", "data-placement"], - }); - } + watchDocument(scheduleAnchoredReposition); window.addEventListener("resize", scheduleAnchoredReposition); window.addEventListener("scroll", scheduleAnchoredReposition, true); @@ -3027,19 +3051,11 @@ export const REACTIVE_RUNTIME = String.raw` if (window.__wrnexusDialogsBound) return; window.__wrnexusDialogsBound = true; - if (typeof MutationObserver === "function") { - new MutationObserver(function () { - // Same deferral as the anchored clamp: the mutation that opens a - // dialog is the one that makes it visible, so it still measures as - // hidden until the panel has been laid out. - window.setTimeout(syncDialogs, 0); - }).observe(document.documentElement, { - subtree: true, - childList: true, - attributes: true, - attributeFilter: ["data-open", "data-show", "class", "style", "hidden"], - }); - } + // Deferred: the mutation that opens a dialog is the one that makes it + // visible, so it is not laid out yet when the record arrives. + watchDocument(function () { + window.setTimeout(syncDialogs, 0); + }); document.addEventListener("keydown", trapDialogTab, true); syncDialogs(); @@ -3157,16 +3173,9 @@ export const REACTIVE_RUNTIME = String.raw` document.addEventListener("keydown", handleRovingKeydown, true); - if (typeof MutationObserver === "function") { - new MutationObserver(function () { - window.setTimeout(syncRovingGroups, 0); - }).observe(document.documentElement, { - subtree: true, - childList: true, - attributes: true, - attributeFilter: ["aria-selected", "aria-current", "disabled", "aria-disabled", "hidden"], - }); - } + watchDocument(function () { + window.setTimeout(syncRovingGroups, 0); + }); syncRovingGroups(); } @@ -3240,11 +3249,9 @@ export const REACTIVE_RUNTIME = String.raw` for (var index = 0; index < navs.length; index += 1) wireScrollspy(navs[index]); }; wireAll(); - if (typeof MutationObserver === "function") { - new MutationObserver(function () { - window.setTimeout(wireAll, 0); - }).observe(document.documentElement, { subtree: true, childList: true }); - } + watchDocument(function () { + window.setTimeout(wireAll, 0); + }); } function hydrateScopes(root) { @@ -5466,6 +5473,7 @@ export const REACTIVE_RUNTIME = String.raw` setupModalDialogs(); setupRovingFocus(); setupScrollspy(); + startDocumentWatch(); window.__wrnexusRepositionAnchored = repositionAnchored; window.__wrnexusHydrateScopes = hydrateScopes; window.__wrnexusInvalidateClientModule = function (url) { clientModuleCache.delete(url); }; diff --git a/packages/csr/test/reactive.test.ts b/packages/csr/test/reactive.test.ts index 25ea5c2b..4cfacea2 100644 --- a/packages/csr/test/reactive.test.ts +++ b/packages/csr/test/reactive.test.ts @@ -1052,3 +1052,18 @@ test("an empty or false roving attribute opts the group out entirely", () => { a.dispatchEvent(keydown(win, "ArrowRight")); expect(doc.activeElement!.id).toBe("a"); }); + +test("json inside a textarea is left alone, not read as mustaches", () => { + const win = mount( + `
+ + {count} +
`, + ); + const doc = win.document; + // The surrounding scope still interpolates normally... + expect(doc.querySelector("#out")!.textContent).toBe("7"); + // ...but the textarea holds data, and an expression engine would have + // evaluated {"id":"a-1","count":3} away and left it empty. + expect(doc.querySelector("#editor")!.textContent).toBe('{"id":"a-1","count":3}'); +}); diff --git a/packages/ui/components/Navbar.wrn b/packages/ui/components/Navbar.wrn index 20dbe442..662b6cca 100644 --- a/packages/ui/components/Navbar.wrn +++ b/packages/ui/components/Navbar.wrn @@ -140,4 +140,440 @@ size: string = "default"
} + + style { + /* Full application navigation */ + .wire-navbar { + position: relative; + z-index: 40; + width: 100%; + color: var(--wire-color-text); + background: color-mix(in srgb, var(--wire-color-surface) 96%, transparent); + border-bottom: 1px solid var(--wire-color-border); + } + + .wire-navbar--sticky { + position: sticky; + top: 0; + backdrop-filter: blur(16px); + } + + .wire-navbar__topbar:empty, + .wire-navbar__topbar:not(:has(*)) { + display: none; + } + + .wire-navbar__topbar:not(:empty) { + display: flex; + min-height: 2.25rem; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding: 0.35rem clamp(1rem, 4vw, 3rem); + color: var(--wire-color-muted); + background: var(--wire-color-surface-2); + border-bottom: 1px solid var(--wire-color-border); + font-size: 0.75rem; + font-weight: 400; + } + + .wire-navbar__main { + display: flex; + min-height: 4.25rem; + width: min(100%, 90rem); + margin-inline: auto; + padding: 0.75rem clamp(1rem, 4vw, 3rem); + align-items: center; + gap: 1.5rem; + } + + .wire-navbar--width-full .wire-navbar__main { + width: 100%; + max-width: none; + } + + .wire-navbar--width-compact .wire-navbar__main { + width: min(86%, 80rem); + } + + .wire-navbar__brand, + .wire-navbar__menu-link, + .wire-navbar__dropdown summary, + .wire-navbar__action, + .wire-navbar__panel a { + color: inherit; + text-decoration: none; + } + + .wire-navbar__brand { + display: inline-flex; + min-width: 0; + align-items: center; + gap: 0.75rem; + flex: 0 0 auto; + } + + .wire-navbar__brand-logo { + display: block; + width: auto; + max-width: 11rem; + height: 2.5rem; + object-fit: contain; + } + + .wire-navbar__brand-icon { + width: 2.5rem; + height: 2.5rem; + color: var(--wire-component-color, var(--wire-color-primary)); + } + + .wire-navbar__brand-copy { + display: grid; + min-width: 0; + line-height: 1.2; + } + + .wire-navbar__brand-copy strong { + font-size: 0.9rem; + font-weight: 600; + } + + .wire-navbar__brand-copy small { + margin-top: 0.2rem; + color: var(--wire-color-muted); + font-size: 0.6875rem; + font-weight: 400; + } + + .wire-navbar__collapse, + .wire-navbar__menus, + .wire-navbar__actions { + display: flex; + align-items: center; + } + + .wire-navbar__collapse { + min-width: 0; + flex: 1; + gap: 1rem; + } + + .wire-navbar__menus { + justify-content: center; + flex: 1; + gap: 0.25rem; + } + + .wire-navbar__actions { + justify-content: flex-end; + gap: 0.5rem; + } + + .wire-navbar__menu-link, + .wire-navbar__dropdown > summary, + .wire-navbar__action { + display: inline-flex; + min-height: 2.75rem; + padding: 0.65rem 0.8rem; + align-items: center; + gap: 0.45rem; + border-radius: 0.65rem; + cursor: pointer; + font-size: 0.8125rem; + font-weight: 500; + white-space: nowrap; + } + + .wire-navbar__menu-link:hover, + .wire-navbar__dropdown > summary:hover { + color: var(--wire-color-text); + background: var(--wire-color-surface-2); + } + + .wire-navbar__menu-link[aria-current="page"], + .wire-navbar__dropdown > summary[aria-current="page"] { + color: var(--wire-component-color, var(--wire-color-primary)); + font-weight: 600; + background: color-mix( + in srgb, + var(--wire-component-color, var(--wire-color-primary)) 12%, + transparent + ); + box-shadow: inset 0 -2px 0 var(--wire-component-color, var(--wire-color-primary)); + } + + .wire-navbar__menu-link[aria-current="page"]:hover, + .wire-navbar__dropdown > summary[aria-current="page"]:hover { + color: var(--wire-component-color, var(--wire-color-primary)); + background: color-mix( + in srgb, + var(--wire-component-color, var(--wire-color-primary)) 16%, + transparent + ); + } + + .wire-navbar__dropdown { + position: relative; + } + + .wire-navbar__dropdown > summary { + list-style: none; + } + + .wire-navbar__dropdown > summary::-webkit-details-marker { + display: none; + } + + .wire-navbar__chevron { + width: 0.45rem; + height: 0.45rem; + border-right: 1.5px solid currentColor; + border-bottom: 1.5px solid currentColor; + transform: rotate(45deg) translateY(-0.15rem); + transition: transform var(--wire-motion-fast, 150ms) ease; + } + + .wire-navbar__dropdown[open] .wire-navbar__chevron { + transform: rotate(225deg) translate(-0.1rem, -0.1rem); + } + + .wire-navbar__panel { + position: absolute; + top: calc(100% + 0.55rem); + left: 50%; + display: grid; + width: max-content; + min-width: 15rem; + max-width: min(90vw, 64rem); + padding: 0.65rem; + gap: 0.45rem; + border: 1px solid var(--wire-color-border); + border-radius: 0.9rem; + color: var(--wire-color-text); + background: var(--wire-color-surface); + box-shadow: 0 18px 48px rgb(15 23 42 / 0.16); + opacity: 1; + transform: translateX(-50%) translateY(0) scale(1); + transform-origin: top center; + transition: + opacity 180ms ease, + transform 180ms cubic-bezier(0.22, 1, 0.36, 1), + display 180ms allow-discrete; + } + + .wire-navbar__panel::before { + position: absolute; + right: 0; + bottom: 100%; + left: 0; + height: 0.65rem; + content: ""; + } + + .wire-navbar__dropdown:not([open]) > .wire-navbar__panel { + display: none; + opacity: 0; + transform: translateX(-50%) translateY(-0.5rem) scale(0.98); + } + + @starting-style { + .wire-navbar__dropdown[open] > .wire-navbar__panel { + opacity: 0; + transform: translateX(-50%) translateY(-0.5rem) scale(0.98); + } + } + + .wire-navbar__dropdown--mega { + position: static; + } + + .wire-navbar__dropdown--mega .wire-navbar__panel { + right: auto; + left: 50%; + width: min(calc(100vw - 2rem), 64rem); + } + + .wire-navbar__panel--columns-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .wire-navbar__panel--columns-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .wire-navbar__panel--columns-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .wire-navbar__panel-intro { + grid-column: 1 / -1; + margin: 0; + padding: 0.5rem 0.65rem; + color: var(--wire-color-muted); + font-size: 0.8125rem; + font-weight: 400; + } + + .wire-navbar__group { + display: grid; + align-content: start; + gap: 0.25rem; + } + + .wire-navbar__group-title { + padding: 0.55rem 0.65rem 0.25rem; + font-size: 0.7rem; + font-weight: 600; + letter-spacing: 0.04em; + text-transform: uppercase; + } + + .wire-navbar__group > small { + padding: 0 0.65rem 0.4rem; + color: var(--wire-color-muted); + font-size: 0.7rem; + font-weight: 400; + } + + .wire-navbar__panel a { + display: flex; + min-height: 2.75rem; + padding: 0.65rem; + align-items: flex-start; + gap: 0.65rem; + border-radius: 0.6rem; + font-size: 0.8rem; + font-weight: 450; + } + + .wire-navbar__panel a:hover { + background: var(--wire-color-surface-2); + } + + .wire-navbar__panel a span:last-child { + display: grid; + gap: 0.15rem; + } + + .wire-navbar__panel a strong { + font-weight: 500; + } + + .wire-navbar__panel a small { + color: var(--wire-color-muted); + font-size: 0.7rem; + font-weight: 400; + } + + .wire-navbar__action { + border: 1px solid transparent; + } + + .wire-navbar__action--primary { + color: var(--wire-color-on-primary, #fff); + background: var(--wire-component-color, var(--wire-color-primary)); + font-weight: 600; + } + + .wire-navbar__action--outline { + border-color: var(--wire-color-border); + } + + .wire-navbar__toggle { + display: none; + width: 2.75rem; + height: 2.75rem; + margin-left: auto; + padding: 0.65rem; + border: 1px solid var(--wire-color-border); + border-radius: 0.65rem; + color: inherit; + background: var(--wire-color-surface); + } + + .wire-navbar__toggle span { + display: block; + height: 2px; + margin: 0.25rem 0; + background: currentColor; + } + + @media (max-width: 900px) { + .wire-navbar--width-compact .wire-navbar__main { + width: 100%; + } + .wire-navbar__toggle { + display: block; + } + .wire-navbar__collapse { + position: absolute; + top: 100%; + right: 0; + left: 0; + display: none; + padding: 0.75rem 1rem 1rem; + align-items: stretch; + flex-direction: column; + background: var(--wire-color-surface); + border-bottom: 1px solid var(--wire-color-border); + box-shadow: 0 16px 32px rgb(15 23 42 / 0.12); + max-height: calc(100dvh - 4rem); + overflow-x: hidden; + overflow-y: auto; + overscroll-behavior: contain; + } + .wire-navbar__collapse.is-open { + display: flex; + } + .wire-navbar__menus, + .wire-navbar__actions { + width: 100%; + align-items: stretch; + flex-direction: column; + } + .wire-navbar__menu-link, + .wire-navbar__dropdown > summary, + .wire-navbar__action { + width: 100%; + } + .wire-navbar__panel, + .wire-navbar__dropdown--mega .wire-navbar__panel { + position: static; + width: 100%; + max-width: none; + margin-top: 0.25rem; + box-shadow: none; + transform: none; + overflow: hidden; + animation: wire-navbar-mobile-panel 180ms ease both; + } + .wire-navbar__dropdown:not([open]) > .wire-navbar__panel, + .wire-navbar__dropdown[open] > .wire-navbar__panel { + transform: none; + } + .wire-navbar__panel[class*="wire-navbar__panel--columns-"] { + grid-template-columns: 1fr; + } + .wire-navbar__panel::before { + display: none; + } + } + + @media (max-width: 600px) { + .wire-navbar__brand-copy small { + display: none; + } + } + + @keyframes wire-navbar-mobile-panel { + from { + opacity: 0; + transform: translateY(-0.35rem); + } + to { + opacity: 1; + transform: translateY(0); + } + } + } } diff --git a/packages/ui/test/ui.test.ts b/packages/ui/test/ui.test.ts index 4b2331e3..830e865c 100644 --- a/packages/ui/test/ui.test.ts +++ b/packages/ui/test/ui.test.ts @@ -436,10 +436,17 @@ test("component-system CSS includes responsive, theme-token, focus, and reduced- expect(css).toContain(".wire-next--field"); expect(css).toContain('[data-show="false"]'); expect(css).toContain("display: none !important"); - expect(css).toMatch( + /* + * Navbar styles now ship with the component rather than from ui.css, so the + * whole navigation group follows one convention. The rules themselves are + * unchanged; only where they live moved. + */ + const navbarSource = readFileSync(uiComponentPath("Navbar"), "utf8"); + expect(css).not.toContain(".wire-navbar"); + expect(navbarSource).toMatch( /\.wire-navbar__brand-copy strong\s*\{[^}]*font-size: 0\.9rem;[^}]*font-weight: 600;/s, ); - expect(css).toMatch( + expect(navbarSource).toMatch( /\.wire-navbar__menu-link,[\s\S]*?font-size: 0\.8125rem;[\s\S]*?font-weight: 500;/, ); expect(css).toMatch( diff --git a/packages/ui/ui.css b/packages/ui/ui.css index 9d2c304f..a52ac5cf 100644 --- a/packages/ui/ui.css +++ b/packages/ui/ui.css @@ -14,7 +14,6 @@ [data-show="undefined"] { display: none !important; } - /* * Universal component configuration. Every canonical component exposes * `color` and `size`, while theme, mode, and font flow through inherited @@ -65,7 +64,6 @@ .wire-next :is(a, button, input, select, textarea):focus-visible { outline-color: var(--wire-component-color); } - /* --- Layout --------------------------------------------------------------- */ .wire-container { width: 100%; @@ -93,7 +91,6 @@ border-top: 1px solid var(--wire-color-border); margin: 0; } - /* gap scale (shared by stack / hstack / grid) */ .wire-gap-0 { gap: 0; @@ -119,7 +116,6 @@ .wire-gap-8 { gap: 3rem; } - .wire-items-start { align-items: flex-start; } @@ -132,7 +128,6 @@ .wire-items-stretch { align-items: stretch; } - .wire-cols-1 { grid-template-columns: repeat(1, 1fr); } @@ -156,7 +151,6 @@ grid-template-columns: 1fr; } } - /* --- Button --------------------------------------------------------------- */ .wire-action { position: relative; @@ -195,7 +189,6 @@ outline: 2px solid var(--wire-color-primary); outline-offset: 2px; } - .wire-btn--color-primary { --wire-btn-color: var(--wire-color-primary); --wire-btn-contrast: var(--wire-color-primary-contrast); @@ -313,7 +306,6 @@ transform: none; box-shadow: none; } - .wire-btn--size-xs, .wire-btn--xs { min-height: 1.5rem; @@ -429,7 +421,6 @@ opacity: 1; transform: translate(-50%, 0); } - /* --- Inputs --------------------------------------------------------------- */ .wire-input { width: 100%; @@ -452,7 +443,6 @@ resize: vertical; min-height: 4.5rem; } - /* Validation states (set by /__wrnexus/validate.js). */ .wire-invalid { border-color: var(--wire-color-danger) !important; @@ -464,7 +454,6 @@ color: var(--wire-color-danger); font-size: 0.8rem; } - .wire-check { display: inline-flex; align-items: center; @@ -483,7 +472,6 @@ .wire-check__label { color: var(--wire-color-text); } - /* --- Badge ---------------------------------------------------------------- */ .wire-badge { display: inline-flex; @@ -514,7 +502,6 @@ background: var(--wire-color-warning); color: var(--wire-color-primary-contrast); } - /* --- Alert ---------------------------------------------------------------- */ .wire-alert { border: 1px solid var(--wire-color-border); @@ -592,7 +579,6 @@ .wire-alert__dismiss:hover { background: color-mix(in srgb, currentColor 8%, transparent); } - /* --- Card ----------------------------------------------------------------- */ .wire-card { background: var(--wire-color-surface); @@ -630,7 +616,6 @@ border-color: color-mix(in srgb, var(--wire-color-primary) 45%, var(--wire-color-border)); box-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--wire-color-text) 11%, transparent); } - /* --- Avatar --------------------------------------------------------------- */ .wire-avatar { width: 2.5rem; @@ -639,7 +624,6 @@ object-fit: cover; border: 1px solid var(--wire-color-border); } - /* --- Avatar -------------------------------------------------------------- */ .wire-next--avatar { display: inline-flex; @@ -647,11 +631,9 @@ max-width: 100%; align-items: center; } - .wire-next--avatar-media { gap: 0.8rem; } - .wire-next__avatar-wrap { --wire-avatar-size: 3rem; --wire-avatar-color: var(--wire-color-primary); @@ -664,7 +646,6 @@ border-radius: 999px; outline: none; } - .wire-next__avatar-wrap[data-size="xs"] { --wire-avatar-size: 1.75rem; } @@ -681,7 +662,6 @@ .wire-next__avatar-wrap[data-size="xl"] { --wire-avatar-size: 5rem; } - .wire-next__avatar-wrap[data-color="secondary"] { --wire-avatar-color: #737373; } @@ -703,7 +683,6 @@ .wire-next__avatar-wrap[data-color="dark"] { --wire-avatar-color: #27272a; } - .wire-next__avatar { display: grid; width: 100%; @@ -718,56 +697,47 @@ 0 0 0 2px var(--wire-color-bg), 0 5px 14px rgb(0 0 0 / 0.16); } - .wire-next__avatar-wrap[data-shape="rounded"] { border-radius: calc(var(--wire-radius-sm, 0.5rem) * 0.72); } - .wire-next__avatar-wrap[data-shape="square"] { border-radius: 0; } - .wire-next__avatar img { width: 100%; height: 100%; object-fit: cover; } - .wire-next__avatar-initials { font-size: calc(var(--wire-avatar-size) * 0.32); font-weight: 750; line-height: 1; letter-spacing: -0.02em; } - .wire-next__avatar-placeholder { width: 54%; height: 54%; color: currentColor; opacity: 0.72; } - .wire-next__avatar-wrap[data-variant="soft"] .wire-next__avatar { color: var(--wire-avatar-color); border-color: transparent; background: color-mix(in srgb, var(--wire-avatar-color) 15%, var(--wire-color-surface)); box-shadow: none; } - .wire-next__avatar-wrap[data-variant="outline"] .wire-next__avatar { color: var(--wire-avatar-color); border-color: var(--wire-avatar-color); background: transparent; box-shadow: none; } - .wire-next__avatar-wrap[data-variant="white"] .wire-next__avatar { color: var(--wire-color-text); border-color: var(--wire-color-border); background: var(--wire-color-surface); box-shadow: 0 4px 12px rgb(0 0 0 / 0.12); } - .wire-next__avatar-status { position: absolute; right: -0.04rem; @@ -779,12 +749,10 @@ border-radius: 999px; background: var(--wire-color-muted); } - .wire-next__avatar-wrap[data-status-position="top"] .wire-next__avatar-status { top: -0.04rem; bottom: auto; } - .wire-next__avatar-status[data-status="online"], .wire-next__avatar-status[data-status="success"] { background: #14cba8; @@ -797,7 +765,6 @@ .wire-next__avatar-status[data-status="warning"] { background: #ffc400; } - .wire-next__avatar-badge { position: absolute; right: -0.25rem; @@ -813,17 +780,14 @@ background: #27272a; box-shadow: 0 4px 10px rgb(0 0 0 / 0.22); } - .wire-next__avatar-badge > span { width: 62%; height: 62%; } - .wire-next__avatar-badge--text { font-size: calc(var(--wire-avatar-size) * 0.18); font-weight: 800; } - .wire-next__avatar-tooltip { position: absolute; left: 50%; @@ -846,7 +810,6 @@ opacity var(--wire-motion-fast) var(--wire-ease-standard), transform var(--wire-motion-fast) var(--wire-ease-standard); } - .wire-next__avatar-tooltip::after { content: ""; position: absolute; @@ -856,29 +819,24 @@ border-top-color: var(--wire-color-text); transform: translateX(-50%); } - .wire-next__avatar-wrap:hover .wire-next__avatar-tooltip, .wire-next__avatar-wrap:focus-visible .wire-next__avatar-tooltip { opacity: 1; transform: translate(-50%, 0); } - .wire-next__avatar-wrap:focus-visible { outline: 2px solid var(--wire-avatar-color); outline-offset: 4px; } - .wire-next__avatar-copy { display: grid; min-width: 0; gap: 0.15rem; } - .wire-next__avatar-copy strong { color: var(--wire-color-text); font-size: 0.9rem; } - .wire-next__avatar-copy > span { overflow: hidden; color: var(--wire-color-muted); @@ -886,7 +844,6 @@ text-overflow: ellipsis; white-space: nowrap; } - /* --- Avatar group -------------------------------------------------------- */ .wire-next--avatar-group { --wire-avatar-group-size: 3rem; @@ -895,7 +852,6 @@ width: fit-content; max-width: 100%; } - .wire-next--avatar-group[data-size="xs"] { --wire-avatar-group-size: 1.75rem; } @@ -912,27 +868,22 @@ .wire-next--avatar-group[data-size="xl"] { --wire-avatar-group-size: 5rem; } - .wire-next__avatar-group-members { display: flex; align-items: center; } - .wire-next--avatar-group[data-layout="stack"] .wire-next__avatar-group-member, .wire-next--avatar-group[data-layout="stack"] .wire-next__avatar-group-overflow { margin-left: calc(var(--wire-avatar-group-size) * -0.22); } - .wire-next--avatar-group[data-layout="stack"] :first-child { margin-left: 0; } - .wire-next--avatar-group[data-layout="grid"] .wire-next__avatar-group-members { display: grid; grid-template-columns: repeat(var(--wire-avatar-group-columns), var(--wire-avatar-group-size)); gap: 0.65rem; } - .wire-next__avatar-group-member, .wire-next__avatar-group-overflow { --wire-avatar-group-color: var(--wire-color-primary); @@ -948,7 +899,6 @@ z-index var(--wire-motion-fast), transform var(--wire-motion-base) var(--wire-ease-emphasized); } - .wire-next__avatar-group-member[data-color="secondary"] { --wire-avatar-group-color: #737373; } @@ -964,11 +914,9 @@ .wire-next__avatar-group-member[data-color="danger"] { --wire-avatar-group-color: var(--wire-color-danger); } - .wire-next__avatar-group-member[data-shape="rounded"] { border-radius: calc(var(--wire-radius-sm, 0.5rem) * 0.72); } - .wire-next__avatar-group-avatar, .wire-next__avatar-group-overflow-button { display: grid; @@ -985,33 +933,28 @@ font-size: calc(var(--wire-avatar-group-size) * 0.3); font-weight: 800; } - .wire-next__avatar-group-avatar img, .wire-next__avatar-group-menu-avatar img { width: 100%; height: 100%; object-fit: cover; } - .wire-next__avatar-group-overflow-button { cursor: pointer; color: var(--wire-color-text); background: var(--wire-color-surface-2); } - .wire-next__avatar-group-member:hover, .wire-next__avatar-group-member:focus-visible, .wire-next__avatar-group-overflow:focus-within { z-index: 5; transform: translateY(-3px); } - .wire-next__avatar-group-member:focus-visible, .wire-next__avatar-group-overflow-button:focus-visible { outline: 2px solid var(--wire-color-primary); outline-offset: 3px; } - .wire-next__avatar-group-tooltip { position: absolute; left: 50%; @@ -1033,13 +976,11 @@ opacity var(--wire-motion-fast), transform var(--wire-motion-fast); } - .wire-next__avatar-group-member:hover .wire-next__avatar-group-tooltip, .wire-next__avatar-group-member:focus-visible .wire-next__avatar-group-tooltip { opacity: 1; transform: translate(-50%, 0); } - .wire-next__avatar-group-menu { position: absolute; top: calc(100% + 0.65rem); @@ -1056,7 +997,6 @@ background: var(--wire-color-surface); box-shadow: 0 16px 38px rgb(0 0 0 / 0.22); } - .wire-next__avatar-group-menu-item { display: flex; align-items: center; @@ -1065,11 +1005,9 @@ border-radius: 0.4rem; font-size: 0.82rem; } - .wire-next__avatar-group-menu-item:hover { background: var(--wire-color-surface-2); } - .wire-next__avatar-group-menu-avatar { display: grid; width: 1.75rem; @@ -1082,7 +1020,6 @@ font-size: 0.65rem; font-weight: 800; } - /* --- Spinner -------------------------------------------------------------- */ .wire-spinner { display: inline-block; @@ -1098,7 +1035,6 @@ transform: rotate(360deg); } } - /* --- Disclosure ----------------------------------------------------------- */ .wire-disclosure { border: 1px solid var(--wire-color-border); @@ -1118,7 +1054,6 @@ padding: 0 0.9rem 0.75rem; color: var(--wire-color-muted); } - /* --- Select --------------------------------------------------------------- */ .wire-select { appearance: none; @@ -1134,7 +1069,6 @@ background-repeat: no-repeat; padding-right: 2rem; } - /* --- Switch --------------------------------------------------------------- */ .wire-switch { display: inline-flex; @@ -1180,7 +1114,6 @@ .wire-switch__label { color: var(--wire-color-text); } - /* --- Progress ------------------------------------------------------------- */ .wire-progress { appearance: none; @@ -1201,7 +1134,6 @@ .wire-progress::-moz-progress-bar { background: var(--wire-color-primary); } - /* --- Tag ------------------------------------------------------------------ */ .wire-tag { display: inline-flex; @@ -1236,7 +1168,6 @@ color: #201400; border-color: transparent; } - /* --- Skeleton ------------------------------------------------------------- */ .wire-skeleton { display: inline-block; @@ -1258,7 +1189,6 @@ background-position: 0 50%; } } - /* --- Tooltip -------------------------------------------------------------- */ .wire-tooltip { position: relative; @@ -1286,7 +1216,6 @@ .wire-tooltip:focus-visible::after { opacity: 1; } - /* --- Table ---------------------------------------------------------------- */ .wire-table-wrap { overflow-x: auto; @@ -1326,7 +1255,6 @@ outline: 2px solid var(--wire-color-primary); outline-offset: 2px; } - /* --- Component-system foundations --------------------------------------- */ .wire-type { margin: 0; @@ -1363,7 +1291,6 @@ .wire-text--end { text-align: end; } - .wire-form { display: grid; gap: 1.25rem; @@ -1421,7 +1348,6 @@ width: 1rem; height: 1rem; } - .wire-overlay { position: fixed; inset: 0; @@ -1462,7 +1388,6 @@ .wire-dialog__actions--wrap { flex-wrap: wrap; } - .wire-filter-bar { display: flex; align-items: end; @@ -1486,7 +1411,6 @@ .wire-comparison-table { min-width: 42rem; } - .wire-desktop-nav > ul, .wire-mobile-nav ul, .wire-mega-menu ul { @@ -1564,7 +1488,6 @@ border-radius: var(--wire-radius); box-shadow: var(--wire-shadow-1); } - .wire-page-shell { width: 100%; min-width: 0; @@ -1589,7 +1512,6 @@ min-width: 0; max-width: 52rem; } - .wire-product-card, .wire-metric { padding: clamp(1rem, 3vw, 1.5rem); @@ -1649,7 +1571,6 @@ font-size: 0.875rem; line-height: 1.5; } - .wire-sdk-tabs__panel { overflow-x: auto; border: 1px solid var(--wire-color-border); @@ -1702,7 +1623,6 @@ color: var(--wire-color-muted); line-height: 1.4; } - @media (max-width: 768px) { .wire-desktop-nav { display: none; @@ -1723,7 +1643,6 @@ position: static; } } - /* --- Complete catalog composition patterns ----------------------------- */ .wire-catalog-action { display: inline-flex; @@ -1732,7 +1651,6 @@ .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 { @@ -1775,7 +1693,6 @@ .wire-auth-card > .wire-catalog-card__image { margin-bottom: 1.25rem; } - .wire-auth-action { display: flex; width: 100%; @@ -1852,7 +1769,6 @@ .wire-auth-action > :where(a, button):hover .wire-auth-action__arrow { transform: translateX(0.25rem); } - .wire-auth-field { display: grid; gap: 0.5rem; @@ -1863,7 +1779,6 @@ display: flex; align-items: center; } - .wire-public-header-action { display: inline-flex; min-height: 2.5rem; @@ -2032,7 +1947,6 @@ object-fit: cover; border-radius: calc(var(--wire-radius) * 0.75); } - @media (max-width: 480px) { .wire-catalog-action, .wire-catalog-action > :where(a, button) { @@ -2047,7 +1961,6 @@ border-radius: var(--wire-radius) var(--wire-radius) 0 0; } } - /* --- Motion system ------------------------------------------------------- * Applies to both Tailwind-authored and token-authored components. Motion is * intentionally limited to composited properties so interaction stays fluid. @@ -2059,7 +1972,6 @@ --wire-ease-standard: cubic-bezier(0.2, 0, 0, 1); --wire-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1); } - /* Tailwind v4 color bridge. Define the aliases at the document root so both * packaged components and application-authored pages/components inherit the * palette selected in wrnexus.config.ts. */ @@ -2106,7 +2018,6 @@ --color-rose-600: var(--wire-color-danger); --color-rose-700: color-mix(in srgb, var(--wire-color-danger) 80%, black); } - /* Stable semantic helpers for application-authored markup. These deliberately * avoid spacing so applications remain in control of their own layout. */ .wire-bg-page { @@ -2147,45 +2058,36 @@ .wire-border { border-color: var(--wire-color-border); } - [data-component] { animation: wire-component-enter var(--wire-motion-slow) var(--wire-ease-emphasized) both; } - [data-component] :where(button, a, input, select, textarea, summary, [role="button"], [role="tab"]) { transition-property: color, background-color, border-color, opacity, box-shadow, transform; transition-duration: var(--wire-motion-base); transition-timing-function: var(--wire-ease-standard); } - [data-component] :where(input, select, textarea, .wire-input, .wire-select) { transition-duration: var(--wire-motion-fast); } - [data-component] :where(.wire-card, .wire-panel, .wire-surface, .wire-catalog-card, article) { transition-property: border-color, background-color, box-shadow, transform; transition-duration: var(--wire-motion-base); transition-timing-function: var(--wire-ease-emphasized); } - [data-component] :where(.wire-overlay, [role="dialog"]) { animation: wire-overlay-enter var(--wire-motion-base) var(--wire-ease-standard) both; } - [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); } - @media (hover: hover) and (pointer: fine) { [data-component] :where(button, .wire-btn, [role="button"]):not(:disabled):hover { transform: translateY(-1px); @@ -2196,30 +2098,25 @@ box-shadow: 0 0.75rem 2rem rgb(15 23 42 / 0.12); } } - /* --- Screenshot-directed canonical component set ------------------------- */ .wire-next { margin: 0; color: var(--wire-color-text); font-family: var(--wrn-font-sans, inherit); } - .wire-next--rounded, .wire-next--image img { border-radius: var(--wire-radius-md); } - .wire-next--container { width: min(100%, 72rem); margin-inline: auto; } - .wire-next--columns, .wire-next--grid { display: grid; grid-template-columns: repeat(var(--wire-next-columns, 2), minmax(0, 1fr)); } - .wire-next--columns-1 { --wire-next-columns: 1; } @@ -2241,19 +2138,16 @@ .wire-next--gap-lg { gap: 1.5rem; } - .wire-next--layout-splitter { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } - .wire-next--custom-scrollbar { max-height: 24rem; overflow: auto; scrollbar-color: var(--wire-color-primary) transparent; scrollbar-width: thin; } - .wire-next--link { display: inline-flex; align-items: center; @@ -2261,7 +2155,6 @@ color: var(--wire-color-primary); text-underline-offset: 0.2em; } - .wire-next--divider { display: flex; align-items: center; @@ -2280,7 +2173,6 @@ min-height: 4rem; background: var(--wire-color-border); } - .wire-next--kbd { display: inline-flex; min-width: 1.8rem; @@ -2292,7 +2184,6 @@ background: var(--wire-color-surface-2); font-size: 0.75rem; } - .wire-next--button-group { display: inline-flex; align-items: stretch; @@ -2300,33 +2191,26 @@ max-width: 100%; isolation: isolate; } - .wire-next--button-group[data-orientation="vertical"] { flex-direction: column; } - .wire-next--button-group[data-attached="false"] { gap: 0.5rem; } - .wire-next--button-group[data-attached="true"] > :is(.wire-btn, .wire-action) { position: relative; margin: 0; } - .wire-next--button-group[data-attached="true"] > .wire-action { display: flex; } - .wire-next--button-group[data-attached="true"] > :is(.wire-btn, .wire-action) :is(.wire-btn) { height: 100%; } - .wire-next--button-group[data-attached="true"][data-orientation="horizontal"] > :is(.wire-btn, .wire-action):not(:first-child) { margin-inline-start: -1px; } - .wire-next--button-group[data-attached="true"][data-orientation="horizontal"] > .wire-btn:not(:first-child):not(:last-child), .wire-next--button-group[data-attached="true"][data-orientation="horizontal"] @@ -2334,7 +2218,6 @@ > .wire-btn { border-radius: 0; } - .wire-next--button-group[data-attached="true"][data-orientation="horizontal"] > .wire-btn:first-child:not(:last-child), .wire-next--button-group[data-attached="true"][data-orientation="horizontal"] @@ -2343,7 +2226,6 @@ border-start-end-radius: 0; border-end-end-radius: 0; } - .wire-next--button-group[data-attached="true"][data-orientation="horizontal"] > .wire-btn:last-child:not(:first-child), .wire-next--button-group[data-attached="true"][data-orientation="horizontal"] @@ -2352,12 +2234,10 @@ border-start-start-radius: 0; border-end-start-radius: 0; } - .wire-next--button-group[data-attached="true"][data-orientation="vertical"] > :is(.wire-btn, .wire-action):not(:first-child) { margin-top: -1px; } - .wire-next--button-group[data-attached="true"][data-orientation="vertical"] > .wire-btn:not(:first-child):not(:last-child), .wire-next--button-group[data-attached="true"][data-orientation="vertical"] @@ -2365,7 +2245,6 @@ > .wire-btn { border-radius: 0; } - .wire-next--button-group[data-attached="true"][data-orientation="vertical"] > .wire-btn:first-child:not(:last-child), .wire-next--button-group[data-attached="true"][data-orientation="vertical"] @@ -2374,7 +2253,6 @@ border-end-start-radius: 0; border-end-end-radius: 0; } - .wire-next--button-group[data-attached="true"][data-orientation="vertical"] > .wire-btn:last-child:not(:first-child), .wire-next--button-group[data-attached="true"][data-orientation="vertical"] @@ -2383,24 +2261,20 @@ border-start-start-radius: 0; border-start-end-radius: 0; } - .wire-next--button-group > :is(.wire-btn, .wire-action):focus-within, .wire-next--button-group > .wire-btn:focus-visible { z-index: 2; } - .wire-next--button-group[data-selectable="true"] > .wire-btn[data-selected="true"] { z-index: 1; border-color: var(--wire-component-color); background: color-mix(in srgb, var(--wire-component-color) 16%, var(--wire-color-surface)); color: var(--wire-component-color); } - .wire-next--button-group[data-disabled="true"] { cursor: not-allowed; opacity: 0.6; } - @media (max-width: 480px) { .wire-next--button-group[data-responsive="true"] { display: flex; @@ -2450,7 +2324,6 @@ border-end-end-radius: var(--wire-radius-sm); } } - .wire-next--toast, .wire-next--device-frame, .wire-next--tree-view, @@ -2478,7 +2351,6 @@ background: var(--wire-color-surface); box-shadow: var(--wire-shadow-1); } - .wire-next--collapse { --wire-collapse-color: var(--wire-component-color, var(--wire-color-primary)); display: grid; @@ -2487,20 +2359,17 @@ gap: 0.75rem; color: var(--wire-color-text); } - .wire-next--device-frame > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } - .wire-next__device-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; } - .wire-next__device-actions button { min-height: 2.25rem; padding-inline: 0.7rem; @@ -2509,7 +2378,6 @@ background: var(--wire-color-surface-2); color: inherit; } - .wire-next__device-shell { overflow: hidden; width: min(100%, 24rem); @@ -2520,42 +2388,35 @@ background: var(--wire-color-background); transition: width var(--wire-motion-normal) var(--wire-ease-standard); } - .wire-next--device-frame[data-device="tablet"] .wire-next__device-shell { width: min(100%, 42rem); } - .wire-next--device-frame[data-device="desktop"] .wire-next__device-shell { width: 100%; border-width: 0.4rem; border-radius: var(--wire-radius-md); } - .wire-next--device-frame[data-orientation="landscape"] .wire-next__device-shell { width: min(100%, 48rem); min-height: 20rem; } - .wire-next__device-shell :is(iframe, .wire-next__device-content) { width: 100%; min-height: inherit; border: 0; } - @media (max-width: 640px) { .wire-next--device-frame > header { align-items: stretch; flex-direction: column; } } - .wire-next__collapse-item { display: grid; min-width: 0; justify-items: start; gap: 0; } - .wire-next__collapse-trigger { display: inline-flex; min-height: 2.75rem; @@ -2571,25 +2432,20 @@ font-weight: 700; cursor: pointer; } - .wire-next__collapse-trigger:focus-visible { outline: 2px solid var(--wire-collapse-color); outline-offset: 3px; } - .wire-next__collapse-trigger:disabled { cursor: not-allowed; opacity: 0.5; } - .wire-next__collapse-chevron { transition: transform var(--wire-motion-fast) var(--wire-ease-standard); } - .wire-next__collapse-item[data-open="true"] .wire-next__collapse-chevron { transform: rotate(180deg); } - .wire-next__collapse-panel { width: min(100%, 42rem); max-height: 0; @@ -2601,13 +2457,11 @@ margin-top 300ms var(--wire-ease-emphasized), opacity 200ms var(--wire-ease-standard); } - .wire-next__collapse-panel[data-open="true"] { max-height: 40rem; margin-top: 0.75rem; opacity: 1; } - .wire-next__collapse-content { display: grid; overflow: hidden; @@ -2618,43 +2472,35 @@ border-radius: var(--wire-radius-md); background: var(--wire-color-surface-raised, var(--wire-color-surface)); } - .wire-next__collapse-content h4, .wire-next__collapse-content p, .wire-next__collapse-preview { margin: 0; } - .wire-next__collapse-content nav { display: flex; flex-wrap: wrap; gap: 0.75rem; } - .wire-next__collapse-content a { color: var(--wire-collapse-color); font-weight: 650; text-decoration: none; } - .wire-next--collapse[data-mode="inline"] .wire-next__collapse-item { gap: 0; } - .wire-next--collapse[data-mode="inline"] .wire-next__collapse-preview { order: 1; margin-bottom: 0.5rem; } - .wire-next--collapse[data-mode="inline"] .wire-next__collapse-panel { order: 2; width: 100%; } - .wire-next--collapse[data-mode="inline"] .wire-next__collapse-panel[data-open="true"] { margin-top: 0; } - .wire-next--collapse[data-mode="inline"] .wire-next__collapse-trigger { order: 3; margin-top: 0.5rem; @@ -2665,28 +2511,23 @@ background: transparent; color: var(--wire-collapse-color); } - .wire-next--collapse[data-mode="inline"] .wire-next__collapse-content { padding: 0; border: 0; background: transparent; } - .wire-next--collapse.wire-next--size-sm { font-size: 0.875rem; } - .wire-next--collapse.wire-next--size-lg { font-size: 1.0625rem; } - @media (prefers-reduced-motion: reduce) { .wire-next__collapse-chevron, .wire-next__collapse-panel { transition: none; } } - .wire-next--chat-bubble { --wire-chat-color: var(--wire-component-color, var(--wire-color-primary)); --wire-chat-padding: 1rem; @@ -2696,35 +2537,29 @@ gap: 1rem; color: var(--wire-color-text); } - .wire-next--chat-bubble.wire-next--size-sm { --wire-chat-padding: 0.75rem; font-size: 0.875rem; } - .wire-next--chat-bubble.wire-next--size-lg { --wire-chat-padding: 1.25rem; font-size: 1.0625rem; } - .wire-next__chat-header h3, .wire-next__chat-header p, .wire-next__chat-content h4, .wire-next__chat-content p { margin: 0; } - .wire-next__chat-header p { margin-top: 0.35rem; color: var(--wire-color-text-muted); } - .wire-next__chat-thread { display: grid; min-width: 0; gap: 1.25rem; } - .wire-next__chat-message { display: grid; width: min(78%, 34rem); @@ -2732,32 +2567,26 @@ justify-self: start; gap: 0.4rem; } - .wire-next__chat-message[data-direction="outgoing"] { justify-self: end; } - .wire-next--chat-bubble[data-one-sided="true"] .wire-next__chat-message { justify-self: start; } - .wire-next__chat-row { display: flex; min-width: 0; align-items: flex-start; gap: 0.75rem; } - .wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-row { flex-direction: row-reverse; } - .wire-next--chat-bubble[data-one-sided="true"] .wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-row { flex-direction: row; } - .wire-next__chat-content { min-width: 0; padding: var(--wire-chat-padding); @@ -2767,56 +2596,46 @@ color: var(--wire-color-text); cursor: pointer; } - .wire-next__chat-content:focus-visible { outline: 2px solid var(--wire-chat-color); outline-offset: 2px; } - .wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-content { border-color: var(--wire-chat-color); background: var(--wire-chat-color); color: var(--wire-color-primary-contrast, #fff); } - .wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-content :is(h4, p, li, span) { color: inherit; } - .wire-next__chat-content h4 { margin-bottom: 0.65rem; font-size: 1em; } - .wire-next__chat-content p + p, .wire-next__chat-content p + nav { margin-top: 0.75rem; } - .wire-next__chat-content ul { display: grid; margin: 0.55rem 0 0; padding-inline-start: 1.25rem; gap: 0.35rem; } - .wire-next__chat-content nav { display: grid; margin-top: 0.75rem; gap: 0.3rem; } - .wire-next__chat-content a { color: var(--wire-chat-color); font-weight: 650; text-decoration: none; } - .wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-content a { color: inherit; text-decoration: underline; } - .wire-next__chat-avatar { display: grid; flex: 0 0 2.5rem; @@ -2831,18 +2650,15 @@ cursor: pointer; place-items: center; } - .wire-next__chat-avatar img { width: 100%; height: 100%; object-fit: cover; } - .wire-next__chat-avatar:focus-visible { outline: 2px solid var(--wire-chat-color); outline-offset: 2px; } - .wire-next__chat-meta { display: flex; align-items: center; @@ -2851,15 +2667,12 @@ color: var(--wire-color-text-muted); font-size: 0.78em; } - .wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-meta { justify-content: flex-end; } - .wire-next__chat-meta[data-tone="danger"] { color: var(--wire-color-danger); } - .wire-next__chat-meta button { padding: 0; border: 0; @@ -2870,7 +2683,6 @@ cursor: pointer; text-decoration: underline; } - @media (max-width: 640px) { .wire-next__chat-message { width: min(92%, 34rem); @@ -2886,7 +2698,6 @@ padding-inline: 0; } } - .wire-next--card { --wire-card-color: var(--wire-component-color, var(--wire-color-primary)); --wire-card-padding: 1.25rem; @@ -2894,7 +2705,6 @@ width: 100%; color: var(--wire-color-text); } - .wire-next--carousel { --wire-carousel-color: var(--wire-component-color, var(--wire-color-primary)); display: grid; @@ -2903,35 +2713,29 @@ gap: 1rem; color: var(--wire-color-text); } - .wire-next__carousel-header h3, .wire-next__carousel-header p { margin: 0; } - .wire-next__carousel-header p { margin-top: 0.35rem; color: var(--wire-color-text-muted); } - .wire-next__carousel-layout { display: flex; min-width: 0; gap: 0.75rem; } - .wire-next__carousel-main { display: grid; flex: 1; min-width: 0; gap: 0.75rem; } - .wire-next__carousel-stage { position: relative; min-width: 0; } - .wire-next__carousel-viewport { position: relative; overflow: hidden; @@ -2941,11 +2745,9 @@ background: var(--wire-color-surface-subtle, var(--wire-color-surface)); outline: none; } - .wire-next__carousel-viewport:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-carousel-color) 30%, transparent); } - .wire-next__carousel-track { display: flex; align-items: stretch; @@ -2963,11 +2765,9 @@ translate: var(--wire-carousel-drag-offset, 0) 0; will-change: transform; } - .wire-next--carousel[data-dragging="true"] .wire-next__carousel-track { transition: none; } - .wire-next--carousel[data-rtl="true"] .wire-next__carousel-track { transform: translateX( calc( @@ -2979,7 +2779,6 @@ ) ); } - .wire-next__carousel-slide { position: relative; display: grid; @@ -2994,36 +2793,29 @@ place-items: center; background: var(--wire-color-surface-raised, var(--wire-color-surface)); } - .wire-next--carousel[data-auto-height="true"] .wire-next__carousel-slide { min-height: 0; } - .wire-next--carousel[data-centered="true"] .wire-next__carousel-slide { flex-basis: min(78%, 32rem); } - .wire-next--carousel[data-centered="true"] .wire-next__carousel-track { box-sizing: border-box; transform: translateX( calc(var(--wire-carousel-index) * -1 * (min(78%, 32rem) + var(--wire-carousel-gap))) ); } - .wire-next--carousel[data-centered="true"] .wire-next__carousel-slide:first-child { margin-inline-start: calc((100% - min(78%, 32rem)) / 2); } - .wire-next--carousel[data-centered="true"] .wire-next__carousel-slide:last-child { margin-inline-end: calc((100% - min(78%, 32rem)) / 2); } - .wire-next--carousel[data-centered="true"][data-rtl="true"] .wire-next__carousel-track { transform: translateX( calc(var(--wire-carousel-index) * (min(78%, 32rem) + var(--wire-carousel-gap))) ); } - .wire-next__carousel-slide > img { position: absolute; width: 100%; @@ -3031,7 +2823,6 @@ object-fit: cover; inset: 0; } - .wire-next__carousel-slide-content { position: relative; z-index: 1; @@ -3039,21 +2830,17 @@ padding: clamp(2rem, 8vw, 5rem); text-align: center; } - .wire-next__carousel-slide-content h4, .wire-next__carousel-slide-content p { margin: 0; } - .wire-next__carousel-slide-content h4 { font-size: clamp(1.5rem, 4vw, 2.4rem); } - .wire-next__carousel-slide-content p { margin-top: 0.65rem; color: var(--wire-color-text-muted); } - .wire-next__carousel-control { position: absolute; z-index: 3; @@ -3070,37 +2857,30 @@ place-items: center; transform: translateY(-50%); } - .wire-next__carousel-control:focus-visible, .wire-next__carousel-pagination button:focus-visible, .wire-next__carousel-thumbnails button:focus-visible { outline: 2px solid var(--wire-carousel-color); outline-offset: 2px; } - .wire-next__carousel-control:disabled { cursor: not-allowed; opacity: 0.35; } - .wire-next__carousel-control--previous { left: 1rem; } - .wire-next__carousel-control--next { right: 1rem; } - .wire-next--carousel[data-rtl="true"] .wire-next__carousel-control--previous { right: 1rem; left: auto; } - .wire-next--carousel[data-rtl="true"] .wire-next__carousel-control--next { right: auto; left: 1rem; } - .wire-next__carousel-pagination { display: flex; min-height: 1.5rem; @@ -3108,7 +2888,6 @@ justify-content: center; gap: 0.5rem; } - .wire-next__carousel-pagination button { width: 0.65rem; min-height: 0.65rem; @@ -3118,12 +2897,10 @@ background: transparent; cursor: pointer; } - .wire-next__carousel-pagination button[data-active="true"] { border-color: var(--wire-carousel-color); background: var(--wire-carousel-color); } - .wire-next__carousel-counter { position: absolute; z-index: 3; @@ -3136,14 +2913,12 @@ font-weight: 700; transform: translateX(-50%); } - .wire-next__carousel-thumbnails { display: flex; overflow: auto; gap: 0.55rem; scrollbar-width: thin; } - .wire-next__carousel-thumbnails button { display: grid; flex: 0 0 8.5rem; @@ -3157,56 +2932,46 @@ cursor: pointer; place-items: center; } - .wire-next__carousel-thumbnails button[data-active="true"] { border-color: var(--wire-carousel-color); box-shadow: inset 0 0 0 1px var(--wire-carousel-color); } - .wire-next__carousel-thumbnails img { width: 100%; height: 4rem; object-fit: cover; } - .wire-next__carousel-thumbnails span { padding: 0.5rem; } - .wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-thumbnails { flex: 0 0 9rem; flex-direction: column; max-height: 28rem; } - .wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-thumbnails button { flex-basis: 7.5rem; width: 100%; } - .wire-next--carousel[data-draggable="true"] .wire-next__carousel-viewport { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; } - .wire-next--carousel[data-draggable="true"] .wire-next__carousel-viewport:active { cursor: grabbing; } - .wire-next--carousel[data-draggable="true"] img, .wire-next--carousel[data-draggable="true"] a { -webkit-user-drag: none; } - .wire-next--carousel[data-snap="true"] .wire-next__carousel-viewport { overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: thin; } - .wire-next--carousel[data-snap="true"] .wire-next__carousel-track { --wire-carousel-snap-slide: calc( (100% - (var(--wire-carousel-per-view) - 1) * var(--wire-carousel-gap)) / @@ -3221,13 +2986,11 @@ padding-inline: calc((100% - var(--wire-carousel-snap-slide)) / 2); transform: none; } - .wire-next--carousel[data-snap="true"] .wire-next__carousel-slide { width: auto; min-width: 0; scroll-snap-align: center; } - @media (max-width: 640px) { .wire-next__carousel-slide { flex-basis: 100%; @@ -3249,21 +3012,17 @@ width: auto; } } - @media (prefers-reduced-motion: reduce) { .wire-next__carousel-track { transition-duration: 0.01ms; } } - .wire-next--card[data-size="sm"] { --wire-card-padding: 0.85rem; } - .wire-next--card[data-size="lg"] { --wire-card-padding: 1.75rem; } - .wire-next__card-panel { position: relative; display: flex; @@ -3280,18 +3039,15 @@ border-color var(--wire-motion-base) ease, box-shadow var(--wire-motion-base) var(--wire-ease-emphasized); } - .wire-next--card[data-variant="top-border"] > .wire-next__card-panel, .wire-next--card[data-variant="accent"] > .wire-next__card-panel { border-top: 4px solid var(--wire-card-color); } - .wire-next--card[data-hover="raise"] > .wire-next__card-panel:hover { border-color: color-mix(in srgb, var(--wire-card-color) 38%, var(--wire-color-border)); box-shadow: var(--wire-shadow-3); transform: translateY(-4px); } - .wire-next__card-header, .wire-next__card-footer { display: flex; @@ -3303,22 +3059,18 @@ color: var(--wire-color-muted); font-size: 0.875rem; } - .wire-next__card-header { border-bottom: 1px solid var(--wire-color-border); } - .wire-next__card-footer { margin-top: auto; border-top: 1px solid var(--wire-color-border); } - .wire-next__card-header-actions { display: inline-flex; gap: 0.2rem; align-items: center; } - .wire-next__card-header-actions button { display: inline-grid; width: 2rem; @@ -3330,24 +3082,20 @@ cursor: pointer; place-items: center; } - .wire-next__card-header-actions button:hover { background: color-mix(in srgb, var(--wire-card-color) 12%, transparent); color: var(--wire-card-color); } - .wire-next__card-header-actions button:focus-visible { outline: 2px solid var(--wire-card-color); outline-offset: 1px; } - .wire-next__card-media { position: relative; overflow: hidden; min-height: 10rem; background: var(--wire-color-surface-2); } - .wire-next__card-media > img { display: block; width: 100%; @@ -3356,23 +3104,19 @@ object-fit: cover; transition: transform 420ms var(--wire-ease-emphasized); } - .wire-next--card[data-hover="image"] .wire-next__card-panel:hover .wire-next__card-media > img { transform: scale(1.06); } - .wire-next__card-media--overlay { aspect-ratio: 16 / 9; min-height: 18rem; } - .wire-next__card-media--overlay > img { position: absolute; inset: 0; width: 100%; height: 100%; } - .wire-next__card-overlay { position: absolute; inset: 0; @@ -3390,12 +3134,10 @@ color: white; text-shadow: 0 1px 2px rgb(0 0 0 / 0.42); } - .wire-next__card-overlay h3 { color: white; font-size: clamp(1.1rem, 2.2vw, 1.35rem); } - .wire-next__card-overlay p { max-width: 48rem; color: #fff; @@ -3405,25 +3147,21 @@ 0 1px 2px rgb(0 0 0 / 0.9), 0 2px 8px rgb(0 0 0 / 0.62); } - .wire-next__card-overlay .wire-next__card-subtitle { color: rgb(255 255 255 / 0.78); } - .wire-next__card-overlay small { margin-top: auto; color: rgb(255 255 255 / 0.88); font-weight: 600; text-shadow: 0 1px 2px rgb(0 0 0 / 0.55); } - .wire-next__card-body { display: grid; gap: 0.65rem; min-width: 0; padding: var(--wire-card-padding); } - .wire-next__card-body[data-scrollable="true"] { max-height: var(--wire-card-max-height); overflow: auto; @@ -3431,19 +3169,16 @@ scrollbar-color: var(--wire-card-color) transparent; scrollbar-width: thin; } - .wire-next__card-body h3, .wire-next__card-body p, .wire-next__card-overlay h3, .wire-next__card-overlay p { margin: 0; } - .wire-next__card-body p { color: var(--wire-color-muted); line-height: 1.65; } - .wire-next__card-subtitle { color: var(--wire-color-muted); font-size: 0.72rem; @@ -3451,7 +3186,6 @@ letter-spacing: 0.06em; text-transform: uppercase; } - .wire-next__card-action { display: inline-flex; gap: 0.25rem; @@ -3462,21 +3196,17 @@ font-weight: 700; text-decoration: none; } - .wire-next__card-action:hover { text-decoration: underline; text-underline-offset: 0.2em; } - .wire-next__card-navigation { background: var(--wire-color-surface-2); } - .wire-next__card-tabs { display: flex; overflow-x: auto; } - .wire-next__card-tabs button { min-height: 3rem; flex: 1 0 auto; @@ -3488,12 +3218,10 @@ cursor: pointer; font-weight: 700; } - .wire-next__card-tabs button[data-active="true"] { border-color: var(--wire-card-color); color: var(--wire-color-text); } - .wire-next__card-navigation-select { display: none; width: calc(100% - 2rem); @@ -3504,7 +3232,6 @@ background: var(--wire-color-surface); color: var(--wire-color-text); } - .wire-next__card-alert { display: flex; gap: 0.35rem; @@ -3513,7 +3240,6 @@ color: var(--wire-color-text); font-size: 0.875rem; } - .wire-next__card-empty { display: grid; min-height: 12rem; @@ -3521,51 +3247,41 @@ place-content: center; place-items: center; } - .wire-next__card-empty > span { margin-bottom: 0.75rem; font-size: 2.25rem; } - .wire-next--card[data-align="center"] .wire-next__card-body { text-align: center; place-items: center; } - .wire-next--card[data-layout="horizontal"] > .wire-next__card-panel { display: grid; grid-template-columns: minmax(12rem, 42%) minmax(0, 1fr); } - .wire-next--card[data-layout="horizontal"] .wire-next__card-media { grid-row: 1 / span 4; min-height: 100%; } - .wire-next__card-group { display: grid; grid-template-columns: repeat(var(--wire-card-columns, 3), minmax(0, 1fr)); } - .wire-next__card-group > .wire-next__card-panel { border-radius: 0; box-shadow: none; } - .wire-next__card-group > .wire-next__card-panel:not(:first-child) { margin-inline-start: -1px; } - .wire-next__card-group > .wire-next__card-panel:first-child { border-start-start-radius: var(--wire-radius-md); border-end-start-radius: var(--wire-radius-md); } - .wire-next__card-group > .wire-next__card-panel:last-child { border-start-end-radius: var(--wire-radius-md); border-end-end-radius: var(--wire-radius-md); } - @media (max-width: 768px) { .wire-next--card[data-layout="horizontal"] > .wire-next__card-panel { display: flex; @@ -3598,7 +3314,6 @@ border-end-end-radius: var(--wire-radius-md); } } - @media (max-width: 480px) { .wire-next__card-media--overlay { aspect-ratio: 4 / 3; @@ -3613,7 +3328,6 @@ display: block; } } - .wire-next--blockquote { --wire-blockquote-color: var(--wire-component-color, var(--wire-color-primary)); --wire-blockquote-font-size: 1.125rem; @@ -3624,32 +3338,26 @@ color: var(--wire-color-text); text-align: left; } - .wire-next--blockquote[data-size="xs"] { --wire-blockquote-font-size: 0.875rem; --wire-blockquote-mark-size: 3rem; } - .wire-next--blockquote[data-size="sm"] { --wire-blockquote-font-size: 1rem; --wire-blockquote-mark-size: 3.5rem; } - .wire-next--blockquote[data-size="md"], .wire-next--blockquote[data-size="default"] { --wire-blockquote-font-size: 1.125rem; } - .wire-next--blockquote[data-size="lg"] { --wire-blockquote-font-size: clamp(1.35rem, 2.4vw, 1.75rem); --wire-blockquote-mark-size: 5rem; } - .wire-next--blockquote[data-size="xl"] { --wire-blockquote-font-size: clamp(1.65rem, 3vw, 2.25rem); --wire-blockquote-mark-size: 5.75rem; } - .wire-next--blockquote > blockquote { position: relative; display: block; @@ -3657,7 +3365,6 @@ margin: 0; padding-top: calc(var(--wire-blockquote-mark-size) * 0.78); } - .wire-next__blockquote-mark { position: absolute; top: 0; @@ -3673,7 +3380,6 @@ text-align: start; user-select: none; } - .wire-next__blockquote-copy { min-width: 0; font-family: Georgia, "Times New Roman", serif; @@ -3681,19 +3387,15 @@ line-height: 1.55; text-wrap: pretty; } - .wire-next--blockquote[data-italic="true"] .wire-next__blockquote-copy { font-style: italic; } - .wire-next__blockquote-copy > :first-child { margin-top: 0; } - .wire-next__blockquote-copy > :last-child { margin-bottom: 0; } - .wire-next__blockquote-citation { display: inline-flex; gap: 0.75rem; @@ -3704,7 +3406,6 @@ font-size: 0.875rem; line-height: 1.35; } - .wire-next__blockquote-avatar { width: 2.5rem; height: 2.5rem; @@ -3713,93 +3414,76 @@ border-radius: 999px; object-fit: cover; } - .wire-next__blockquote-attribution { display: grid; gap: 0.15rem; } - .wire-next__blockquote-attribution cite { color: var(--wire-color-text); font-style: normal; font-weight: 700; } - .wire-next__blockquote-attribution a { color: inherit; text-decoration-color: color-mix(in srgb, var(--wire-blockquote-color) 55%, transparent); text-underline-offset: 0.2em; } - .wire-next__blockquote-attribution a:hover { color: var(--wire-blockquote-color); } - .wire-next--blockquote[data-align="center"] { text-align: center; } - .wire-next--blockquote[data-align="right"], .wire-next--blockquote[data-align="end"] { text-align: right; } - .wire-next--blockquote[data-align="center"] > blockquote, .wire-next--blockquote[data-align="right"] > blockquote, .wire-next--blockquote[data-align="end"] > blockquote { text-align: inherit; } - .wire-next--blockquote[data-align="center"] .wire-next__blockquote-mark { text-align: center; } - .wire-next--blockquote[data-align="right"] .wire-next__blockquote-mark, .wire-next--blockquote[data-align="end"] .wire-next__blockquote-mark { text-align: end; } - .wire-next--blockquote[data-align="center"] .wire-next__blockquote-citation { margin-inline: auto; } - .wire-next--blockquote[data-align="right"] .wire-next__blockquote-citation, .wire-next--blockquote[data-align="end"] .wire-next__blockquote-citation { margin-inline-start: auto; } - .wire-next--blockquote[data-variant="bordered"], .wire-next--blockquote[data-variant="border"], .wire-next--blockquote[data-variant="left-border"] { padding-inline-start: 1.5rem; border-inline-start: 4px solid var(--wire-blockquote-color); } - .wire-next--blockquote[data-variant="bordered"] .wire-next__blockquote-mark, .wire-next--blockquote[data-variant="border"] .wire-next__blockquote-mark, .wire-next--blockquote[data-variant="left-border"] .wire-next__blockquote-mark { display: none; } - .wire-next--blockquote[data-variant="bordered"] > blockquote, .wire-next--blockquote[data-variant="border"] > blockquote, .wire-next--blockquote[data-variant="left-border"] > blockquote { display: block; padding-top: 0; } - .wire-next--blockquote[data-variant="bordered"] .wire-next__blockquote-copy, .wire-next--blockquote[data-variant="border"] .wire-next__blockquote-copy, .wire-next--blockquote[data-variant="left-border"] .wire-next__blockquote-copy { padding-top: 0; } - .wire-next--blockquote[data-variant="bordered"] .wire-next__blockquote-citation, .wire-next--blockquote[data-variant="border"] .wire-next__blockquote-citation, .wire-next--blockquote[data-variant="left-border"] .wire-next__blockquote-citation { margin-inline-start: 0; } - @media (max-width: 480px) { .wire-next--blockquote { --wire-blockquote-mark-size: 3.25rem; @@ -3816,7 +3500,6 @@ margin-inline-start: 0; } } - .wire-next--alert { --wire-alert-color: var(--wire-component-color); --wire-alert-soft: color-mix(in srgb, var(--wire-alert-color) 16%, var(--wire-color-surface)); @@ -3829,88 +3512,69 @@ border-radius: var(--wire-radius, 0.75rem); color: var(--wire-color-text); } - .wire-next--alert[data-radius="none"] { border-radius: 0; } - .wire-next--alert[data-radius="sm"] { border-radius: var(--wire-radius-sm, 0.375rem); } - .wire-next--alert[data-radius="lg"] { border-radius: calc(var(--wire-radius, 0.75rem) * 1.35); } - .wire-next--alert[data-radius="xl"] { border-radius: calc(var(--wire-radius, 0.75rem) * 1.75); } - .wire-next--alert[data-shadow="none"] { box-shadow: none; } - .wire-next--alert[data-shadow="sm"] { box-shadow: 0 6px 16px color-mix(in srgb, #000 14%, transparent); } - .wire-next--alert[data-shadow="md"] { box-shadow: 0 2px 6px color-mix(in srgb, #000 10%, transparent), 0 12px 28px color-mix(in srgb, #000 18%, transparent); } - .wire-next--alert[data-shadow="lg"] { box-shadow: 0 4px 10px color-mix(in srgb, #000 12%, transparent), 0 20px 48px color-mix(in srgb, #000 24%, transparent); } - .wire-next--alert[data-color="secondary"] { --wire-alert-color: #737373; } - .wire-next--alert[data-color="success"] { --wire-alert-color: #0f9f8f; } - .wire-next--alert[data-color="danger"] { --wire-alert-color: #dc3545; } - .wire-next--alert[data-color="warning"] { --wire-alert-color: #eab308; } - .wire-next--alert[data-color="info"] { --wire-alert-color: #2563eb; } - .wire-next--alert[data-color="dark"] { --wire-alert-color: #27272a; } - .wire-next--alert[data-color="light"] { --wire-alert-color: #f4f4f5; } - .wire-next--alert-soft { border-color: color-mix(in srgb, var(--wire-alert-color) 45%, var(--wire-color-border)); background: var(--wire-alert-soft); } - .wire-next--alert-soft .wire-next__alert-title, .wire-next--alert-soft .wire-next__alert-icon, .wire-next--alert-soft .wire-next__alert-actions a { color: var(--wire-alert-color); } - .wire-next--alert-solid { border-color: var(--wire-alert-color); background: var(--wire-alert-color); color: white; } - .wire-next--alert.wire-next--alert-solid :is( .wire-next__alert-title, @@ -3921,58 +3585,46 @@ ) { color: currentColor; } - .wire-next--alert-solid[data-color="light"] { color: #18181b; } - .wire-next--alert-solid[data-color="warning"] { color: #18181b; } - .wire-next--alert-bordered { border-color: var(--wire-alert-color); background: var(--wire-color-surface); } - .wire-next--alert-bordered .wire-next__alert-title, .wire-next--alert-bordered .wire-next__alert-icon, .wire-next--alert-bordered .wire-next__alert-actions a { color: var(--wire-alert-color); } - .wire-next--alert-accent { border-color: color-mix(in srgb, var(--wire-alert-color) 35%, var(--wire-color-border)); border-left: 4px solid var(--wire-alert-color); background: var(--wire-alert-soft); } - .wire-next--alert-accent .wire-next__alert-title, .wire-next--alert-accent .wire-next__alert-icon, .wire-next--alert-accent .wire-next__alert-actions a { color: var(--wire-alert-color); } - .wire-next--alert-compact { padding: 0.75rem 0.9rem; } - .wire-next--alert-compact:not(:has(.wire-next__alert-icon)):not(:has(.wire-next__alert-dismiss)) { grid-template-columns: minmax(0, 1fr); } - .wire-next--alert-compact .wire-next__alert-body { display: block; } - .wire-next--alert-compact .wire-next__alert-title { margin-right: 0.25rem; } - .wire-next--alert-compact .wire-next__alert-body > p { display: inline; } - .wire-next__alert-icon { display: inline-grid; width: 1.25rem; @@ -3981,55 +3633,46 @@ margin-top: 0.05rem; color: var(--wire-alert-color); } - .wire-next__alert-icon > span { width: 1rem; height: 1rem; } - .wire-next__alert-body { display: grid; min-width: 0; gap: 0.35rem; } - .wire-next__alert-title { font-size: 0.88rem; line-height: 1.45; } - .wire-next__alert-body > p, .wire-next__alert-body li { color: inherit; font-size: 0.8rem; line-height: 1.55; } - .wire-next__alert-body > ul { display: grid; gap: 0.25rem; margin: 0.15rem 0 0; padding-left: 1.25rem; } - .wire-next__alert-actions { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.35rem; } - .wire-next__alert-actions a { color: var(--wire-alert-color); font-size: 0.78rem; font-weight: 700; text-decoration: none; } - .wire-next__alert-actions a:hover { text-decoration: underline; } - .wire-next__alert-actions a[data-variant="action"] { padding: 0.35rem 0.6rem; border-radius: var(--wire-radius-sm); @@ -4037,7 +3680,6 @@ color: white; text-decoration: none; } - .wire-next__alert-dismiss { display: inline-grid; width: 1.75rem; @@ -4050,16 +3692,13 @@ color: currentColor; cursor: pointer; } - .wire-next__alert-dismiss:hover { background: color-mix(in srgb, currentColor 10%, transparent); } - .wire-next__alert-dismiss:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } - @media (max-width: 36rem) { .wire-next--alert { grid-template-columns: auto minmax(0, 1fr); @@ -4071,23 +3710,19 @@ justify-self: end; } } - .wire-next--accordion { --wire-accordion-accent: var(--wire-component-color); display: grid; width: 100%; color: var(--wire-color-text); } - .wire-next__accordion-item { min-width: 0; } - .wire-next__accordion-heading { margin: 0; font: inherit; } - .wire-next__accordion-heading > button { display: flex; width: 100%; @@ -4103,23 +3738,19 @@ text-align: left; cursor: pointer; } - .wire-next__accordion-heading > button > span:not(.wire-next__accordion-indicator) { min-width: 0; flex: 1; } - .wire-next__accordion-heading > button:focus-visible { border-radius: var(--wire-radius-sm); outline: 2px solid var(--wire-accordion-accent); outline-offset: 2px; } - .wire-next__accordion-heading > button:disabled { cursor: not-allowed; opacity: 0.5; } - .wire-next__accordion-indicator { display: inline-flex; width: 1rem; @@ -4135,36 +3766,30 @@ color var(--wire-motion-fast) var(--wire-ease-standard), transform var(--wire-motion-fast) var(--wire-ease-standard); } - .wire-next__accordion-indicator > span { display: inline-flex; align-items: center; justify-content: center; } - .wire-next__accordion-indicator > [class*="icon-["] { width: 0.95rem; height: 0.95rem; } - .wire-next__accordion-item[data-open="true"] > .wire-next__accordion-heading .wire-next__accordion-indicator { color: var(--wire-accordion-accent); transform: rotate(45deg); } - .wire-next--accordion[data-indicator="chevron"] .wire-next__accordion-item[data-open="true"] > .wire-next__accordion-heading .wire-next__accordion-indicator { transform: rotate(180deg); } - .wire-next__accordion-item[data-open="true"] > .wire-next__accordion-heading > button { color: var(--wire-accordion-accent); } - .wire-next__accordion-panel { display: grid; grid-template-rows: 0fr; @@ -4173,80 +3798,65 @@ grid-template-rows var(--wire-motion-base) var(--wire-ease-standard), opacity var(--wire-motion-fast) var(--wire-ease-standard); } - .wire-next__accordion-item[data-open="true"] > .wire-next__accordion-panel { grid-template-rows: 1fr; opacity: 1; } - .wire-next__accordion-panel > div { overflow: hidden; } - .wire-next__accordion-content { padding: 0 0 1rem 1.75rem; color: var(--wire-color-muted); font-size: 0.86rem; line-height: 1.65; } - .wire-next__accordion-content > p { color: inherit; } - .wire-next__accordion-content-italic > p::first-line { font-style: italic; } - .wire-next__accordion-nested { display: grid; margin-top: 0.5rem; } - .wire-next__accordion-nested .wire-next__accordion-content { padding-left: 1.5rem; } - .wire-next--accordion-bordered { overflow: hidden; border: 1px solid var(--wire-color-border); border-radius: var(--wire-radius-md); background: var(--wire-color-surface); } - .wire-next--accordion-bordered > .wire-next__accordion-item + .wire-next__accordion-item { border-top: 1px solid var(--wire-color-border); } - .wire-next--accordion-bordered > .wire-next__accordion-item > .wire-next__accordion-heading > button { padding-inline: 1rem; } - .wire-next--accordion-bordered > .wire-next__accordion-item > .wire-next__accordion-panel .wire-next__accordion-content { padding-inline: 1rem; } - .wire-next--accordion-separated { gap: 0.5rem; } - .wire-next--accordion-separated > .wire-next__accordion-item { overflow: hidden; border: 1px solid transparent; border-radius: var(--wire-radius-md); background: var(--wire-color-surface-2); } - .wire-next--accordion-separated > .wire-next__accordion-item[data-open="true"] { border-color: var(--wire-color-border); } - .wire-next--accordion-separated > .wire-next__accordion-item > .wire-next__accordion-heading @@ -4257,20 +3867,17 @@ .wire-next__accordion-content { padding-inline: 1rem; } - .wire-next--accordion-flush { border-radius: 0; background: transparent; box-shadow: none; } - @media (prefers-reduced-motion: reduce) { .wire-next__accordion-panel, .wire-next__accordion-indicator { transition: none; } } - .wire-next--toggle-count { --wire-toggle-count-accent: var(--wire-component-color); display: grid; @@ -4278,27 +3885,21 @@ gap: 0.75rem; color: var(--wire-color-text); } - .wire-next--toggle-count-full { width: 100%; } - .wire-next__toggle-count-control { display: flex; } - .wire-next__toggle-count-control--start { justify-content: flex-start; } - .wire-next__toggle-count-control--center { justify-content: center; } - .wire-next__toggle-count-control--end { justify-content: flex-end; } - .wire-next__toggle-count-segmented { display: inline-flex; gap: 0.2rem; @@ -4307,7 +3908,6 @@ background: var(--wire-color-surface-2); box-shadow: inset 0 0 0 1px var(--wire-color-border); } - .wire-next__toggle-count-segmented button { min-height: 2.35rem; padding: 0.45rem 0.8rem; @@ -4320,7 +3920,6 @@ font-weight: 700; cursor: pointer; } - .wire-next__toggle-count-segmented button[aria-pressed="true"] { background: var(--wire-color-surface); color: var(--wire-color-text); @@ -4328,33 +3927,27 @@ var(--wire-shadow-1), inset 0 -2px var(--wire-toggle-count-accent); } - .wire-next__toggle-count-segmented button:focus-visible, .wire-next__toggle-count-switch:focus-visible { outline: 2px solid var(--wire-toggle-count-accent); outline-offset: 2px; } - .wire-next__toggle-count-segmented button:disabled, .wire-next__toggle-count-switch:disabled { cursor: not-allowed; } - .wire-next__toggle-count-control:has(.wire-next__toggle-count-switch) { align-items: center; gap: 0.7rem; font-size: 0.78rem; font-weight: 700; } - .wire-next__toggle-count-control > span { color: var(--wire-color-muted); } - .wire-next__toggle-count-control > span[data-selected="true"] { color: var(--wire-color-text); } - .wire-next__toggle-count-switch { position: relative; width: 2.65rem; @@ -4366,7 +3959,6 @@ cursor: pointer; transition: background-color var(--wire-motion-fast) var(--wire-ease-standard); } - .wire-next__toggle-count-switch > span { display: block; width: 1rem; @@ -4376,17 +3968,14 @@ box-shadow: var(--wire-shadow-1); transition: transform var(--wire-motion-fast) var(--wire-ease-standard); } - .wire-next__toggle-count-switch[aria-checked="true"] { border-color: var(--wire-toggle-count-accent); background: var(--wire-toggle-count-accent); } - .wire-next__toggle-count-switch[aria-checked="true"] > span { background: white; transform: translateX(1.15rem); } - .wire-next__toggle-count-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); @@ -4395,7 +3984,6 @@ border-radius: var(--wire-radius-md); background: var(--wire-color-surface); } - .wire-next__toggle-count-items article { display: grid; align-content: start; @@ -4403,17 +3991,14 @@ min-width: 0; padding: 1rem; } - .wire-next__toggle-count-items article + article { border-left: 1px solid var(--wire-color-border); } - .wire-next__toggle-count-items article > span { color: var(--wire-color-muted); font-size: 0.75rem; font-weight: 600; } - .wire-next__toggle-count-items strong { display: flex; align-items: baseline; @@ -4421,7 +4006,6 @@ font-size: 1.5rem; line-height: 1; } - .wire-next__toggle-count-items [data-toggle-count-value] { min-width: 2ch; font-variant-numeric: tabular-nums; @@ -4429,17 +4013,14 @@ color var(--wire-motion-fast) var(--wire-ease-standard), transform var(--wire-motion-fast) var(--wire-ease-standard); } - .wire-next__toggle-count-items strong small { color: inherit; font-size: 0.65em; } - .wire-next__toggle-count-items article > small { color: var(--wire-color-muted); font-size: 0.68rem; } - @media (max-width: 36rem) { .wire-next__toggle-count-control { justify-content: center; @@ -4454,19 +4035,16 @@ border-left: 0; } } - @media (prefers-reduced-motion: reduce) { .wire-next__toggle-count-items [data-toggle-count-value] { transition: none; } } - .wire-next p { margin: 0; color: var(--wire-color-muted); line-height: 1.6; } - .wire-next__items { display: flex; flex-wrap: wrap; @@ -4478,7 +4056,6 @@ background: var(--wire-color-surface-2); font-size: 0.75rem; } - /* --- Badge --------------------------------------------------------------- */ .wire-next--badge-root { position: relative; @@ -4487,7 +4064,6 @@ max-width: 100%; vertical-align: middle; } - .wire-next__badge { --wire-badge-color: var(--wire-color-primary); position: relative; @@ -4510,25 +4086,21 @@ line-height: 1; white-space: nowrap; } - .wire-next__badge[data-size="xs"] { min-height: 1.25rem; padding: 0.15rem 0.4rem; font-size: 0.625rem; } - .wire-next__badge[data-size="sm"] { min-height: 1.45rem; padding: 0.2rem 0.5rem; font-size: 0.6875rem; } - .wire-next__badge[data-size="lg"] { min-height: 2rem; padding: 0.35rem 0.75rem; font-size: 0.825rem; } - .wire-next__badge[data-color="secondary"] { --wire-badge-color: #737373; } @@ -4550,49 +4122,40 @@ .wire-next__badge[data-color="light"] { --wire-badge-color: #f4f4f5; } - .wire-next__badge[data-color="warning"][data-variant="solid"], .wire-next__badge[data-color="light"][data-variant="solid"] { color: #18181b; } - .wire-next__badge[data-variant="soft"] { color: var(--wire-badge-color); border-color: transparent; background: color-mix(in srgb, var(--wire-badge-color) 15%, var(--wire-color-surface)); box-shadow: none; } - .wire-next__badge[data-variant="outline"] { color: var(--wire-badge-color); background: transparent; box-shadow: none; } - .wire-next__badge[data-variant="white"] { color: var(--wire-color-text); border-color: var(--wire-color-border); background: var(--wire-color-surface); box-shadow: 0 4px 12px rgb(0 0 0 / 0.12); } - .wire-next__badge[data-shape="rounded"] { border-radius: 0.4rem; } - .wire-next__badge[data-shape="square"] { border-radius: 0; } - .wire-next__badge-label { min-width: 0; } - .wire-next__badge-label--truncate { overflow: hidden; text-overflow: ellipsis; } - .wire-next__badge-dot { width: 0.42rem; height: 0.42rem; @@ -4600,7 +4163,6 @@ border-radius: 999px; background: currentColor; } - .wire-next__badge:has(.wire-next__badge-dot):not(:has(.wire-next__badge-label)) { width: 0.7rem; min-width: 0.7rem; @@ -4609,19 +4171,16 @@ padding: 0; border: 2px solid var(--wire-color-bg); } - .wire-next__badge:has(.wire-next__badge-dot):not(:has(.wire-next__badge-label)) .wire-next__badge-dot { width: 100%; height: 100%; } - .wire-next__badge-icon { width: 0.9rem; height: 0.9rem; flex: none; } - .wire-next__badge-avatar { width: 1.25rem; height: 1.25rem; @@ -4630,7 +4189,6 @@ border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 999px; } - .wire-next__badge-dismiss { display: grid; width: 1.15rem; @@ -4644,21 +4202,17 @@ background: color-mix(in srgb, currentColor 12%, transparent); cursor: pointer; } - .wire-next__badge-dismiss:hover { background: color-mix(in srgb, currentColor 22%, transparent); } - .wire-next__badge-dismiss:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } - .wire-next__badge-dismiss span { width: 0.75rem; height: 0.75rem; } - .wire-next__badge-anchor { display: inline-flex; min-height: 2.75rem; @@ -4674,27 +4228,22 @@ font-size: 0.875rem; font-weight: 700; } - .wire-next__badge-anchor > [class*="icon-"] { width: 1rem; height: 1rem; } - .wire-next--badge-anchored[data-placement="inline"] { align-items: center; } - .wire-next--badge-anchored[data-placement="inline"] .wire-next__badge { margin-left: -0.55rem; } - .wire-next--badge-anchored[data-placement="top-right"] .wire-next__badge { position: absolute; top: -0.55rem; right: -0.75rem; z-index: 2; } - .wire-next__badge-ping { position: absolute; z-index: -1; @@ -4704,7 +4253,6 @@ opacity: 0.5; animation: wire-badge-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite; } - @keyframes wire-badge-ping { 75%, 100% { @@ -4712,13 +4260,11 @@ transform: scale(1.45); } } - @media (prefers-reduced-motion: reduce) { .wire-next__badge-ping { animation: none; } } - .wire-next details { overflow: hidden; border: 1px solid var(--wire-color-border); @@ -4733,7 +4279,6 @@ padding: 0 0.75rem 0.75rem; color: var(--wire-color-muted); } - .wire-next__row { display: flex; align-items: center; @@ -4744,7 +4289,6 @@ width: 100%; accent-color: var(--wire-color-primary); } - .wire-next--pin-input { display: grid; width: 100%; @@ -4754,20 +4298,17 @@ border: 0; color: var(--wire-color-text); } - .wire-next__pin-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } - .wire-next__pin-heading legend { padding: 0; font-size: 0.82em; font-weight: 700; } - .wire-next__pin-clear { display: inline-flex; align-items: center; @@ -4781,12 +4322,10 @@ font-weight: 750; cursor: pointer; } - .wire-next__pin-clear > span:first-child { width: 0.9rem; height: 0.9rem; } - .wire-next__pin-cells { display: flex; max-width: 100%; @@ -4796,7 +4335,6 @@ padding: 0.2rem; scrollbar-width: thin; } - .wire-next--pin-input .wire-next__pin-cells input { flex: 0 0 clamp(2.4rem, 8vw, 3.25rem); width: clamp(2.4rem, 8vw, 3.25rem); @@ -4817,41 +4355,34 @@ box-shadow var(--wire-motion-base) var(--wire-ease-standard), transform var(--wire-motion-fast) var(--wire-ease-standard); } - .wire-next--pin-input .wire-next__pin-cells input::placeholder { color: var(--wire-color-muted); opacity: 0.45; } - .wire-next--pin-input .wire-next__pin-cells input:focus-visible { border-color: var(--wire-component-color); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-component-color) 18%, transparent); transform: translateY(-1px); } - .wire-next--pin-input .wire-next__pin-cells input:disabled, .wire-next--pin-input .wire-next__pin-cells input:read-only { cursor: not-allowed; opacity: 0.55; } - .wire-next__pin-separator { color: var(--wire-color-muted); font-size: 1.1rem; font-weight: 800; } - .wire-next--pin-input[data-complete="true"] .wire-next__pin-cells input { border-color: color-mix(in srgb, var(--wire-component-color) 72%, var(--wire-color-border)); background: color-mix(in srgb, var(--wire-component-color) 7%, var(--wire-color-bg)); } - .wire-next--pin-input.wire-next--invalid .wire-next__pin-cells input, .wire-next--pin-input:has(input.wire-invalid) .wire-next__pin-cells input { border-color: var(--wire-color-danger); } - @media (max-width: 480px) { .wire-next__pin-cells { gap: 0.3rem; @@ -4864,7 +4395,6 @@ height: min(3rem, 14vw); } } - .wire-next--spinner i { display: block; width: 1.5rem; @@ -4891,7 +4421,6 @@ background-size: 200% 100%; animation: wire-shimmer 1.4s infinite; } - .wire-next--navbar, .wire-next--mega-menu, .wire-next--nav, @@ -4927,314 +4456,6 @@ color: var(--wire-color-text); background: var(--wire-color-surface-2); } - -/* Full application navigation */ -.wire-navbar { - position: relative; - z-index: 40; - width: 100%; - color: var(--wire-color-text); - background: color-mix(in srgb, var(--wire-color-surface) 96%, transparent); - border-bottom: 1px solid var(--wire-color-border); -} -.wire-navbar--sticky { - position: sticky; - top: 0; - backdrop-filter: blur(16px); -} -.wire-navbar__topbar:empty, -.wire-navbar__topbar:not(:has(*)) { - display: none; -} -.wire-navbar__topbar:not(:empty) { - display: flex; - min-height: 2.25rem; - align-items: center; - justify-content: space-between; - gap: 1rem; - padding: 0.35rem clamp(1rem, 4vw, 3rem); - color: var(--wire-color-muted); - background: var(--wire-color-surface-2); - border-bottom: 1px solid var(--wire-color-border); - font-size: 0.75rem; - font-weight: 400; -} -.wire-navbar__main { - display: flex; - min-height: 4.25rem; - width: min(100%, 90rem); - margin-inline: auto; - padding: 0.75rem clamp(1rem, 4vw, 3rem); - align-items: center; - gap: 1.5rem; -} -.wire-navbar--width-full .wire-navbar__main { - width: 100%; - max-width: none; -} -.wire-navbar--width-compact .wire-navbar__main { - width: min(86%, 80rem); -} -.wire-navbar__brand, -.wire-navbar__menu-link, -.wire-navbar__dropdown summary, -.wire-navbar__action, -.wire-navbar__panel a { - color: inherit; - text-decoration: none; -} -.wire-navbar__brand { - display: inline-flex; - min-width: 0; - align-items: center; - gap: 0.75rem; - flex: 0 0 auto; -} -.wire-navbar__brand-logo { - display: block; - width: auto; - max-width: 11rem; - height: 2.5rem; - object-fit: contain; -} -.wire-navbar__brand-icon { - width: 2.5rem; - height: 2.5rem; - color: var(--wire-component-color, var(--wire-color-primary)); -} -.wire-navbar__brand-copy { - display: grid; - min-width: 0; - line-height: 1.2; -} -.wire-navbar__brand-copy strong { - font-size: 0.9rem; - font-weight: 600; -} -.wire-navbar__brand-copy small { - margin-top: 0.2rem; - color: var(--wire-color-muted); - font-size: 0.6875rem; - font-weight: 400; -} -.wire-navbar__collapse, -.wire-navbar__menus, -.wire-navbar__actions { - display: flex; - align-items: center; -} -.wire-navbar__collapse { - min-width: 0; - flex: 1; - gap: 1rem; -} -.wire-navbar__menus { - justify-content: center; - flex: 1; - gap: 0.25rem; -} -.wire-navbar__actions { - justify-content: flex-end; - gap: 0.5rem; -} -.wire-navbar__menu-link, -.wire-navbar__dropdown > summary, -.wire-navbar__action { - display: inline-flex; - min-height: 2.75rem; - padding: 0.65rem 0.8rem; - align-items: center; - gap: 0.45rem; - border-radius: 0.65rem; - cursor: pointer; - font-size: 0.8125rem; - font-weight: 500; - white-space: nowrap; -} -.wire-navbar__menu-link:hover, -.wire-navbar__dropdown > summary:hover { - color: var(--wire-color-text); - background: var(--wire-color-surface-2); -} -.wire-navbar__menu-link[aria-current="page"], -.wire-navbar__dropdown > summary[aria-current="page"] { - color: var(--wire-component-color, var(--wire-color-primary)); - font-weight: 600; - background: color-mix( - in srgb, - var(--wire-component-color, var(--wire-color-primary)) 12%, - transparent - ); - box-shadow: inset 0 -2px 0 var(--wire-component-color, var(--wire-color-primary)); -} -.wire-navbar__menu-link[aria-current="page"]:hover, -.wire-navbar__dropdown > summary[aria-current="page"]:hover { - color: var(--wire-component-color, var(--wire-color-primary)); - background: color-mix( - in srgb, - var(--wire-component-color, var(--wire-color-primary)) 16%, - transparent - ); -} -.wire-navbar__dropdown { - position: relative; -} -.wire-navbar__dropdown > summary { - list-style: none; -} -.wire-navbar__dropdown > summary::-webkit-details-marker { - display: none; -} -.wire-navbar__chevron { - width: 0.45rem; - height: 0.45rem; - border-right: 1.5px solid currentColor; - border-bottom: 1.5px solid currentColor; - transform: rotate(45deg) translateY(-0.15rem); - transition: transform var(--wire-motion-fast, 150ms) ease; -} -.wire-navbar__dropdown[open] .wire-navbar__chevron { - transform: rotate(225deg) translate(-0.1rem, -0.1rem); -} -.wire-navbar__panel { - position: absolute; - top: calc(100% + 0.55rem); - left: 50%; - display: grid; - width: max-content; - min-width: 15rem; - max-width: min(90vw, 64rem); - padding: 0.65rem; - gap: 0.45rem; - border: 1px solid var(--wire-color-border); - border-radius: 0.9rem; - color: var(--wire-color-text); - background: var(--wire-color-surface); - box-shadow: 0 18px 48px rgb(15 23 42 / 0.16); - opacity: 1; - transform: translateX(-50%) translateY(0) scale(1); - transform-origin: top center; - transition: - opacity 180ms ease, - transform 180ms cubic-bezier(0.22, 1, 0.36, 1), - display 180ms allow-discrete; -} -.wire-navbar__panel::before { - position: absolute; - right: 0; - bottom: 100%; - left: 0; - height: 0.65rem; - content: ""; -} -.wire-navbar__dropdown:not([open]) > .wire-navbar__panel { - display: none; - opacity: 0; - transform: translateX(-50%) translateY(-0.5rem) scale(0.98); -} -@starting-style { - .wire-navbar__dropdown[open] > .wire-navbar__panel { - opacity: 0; - transform: translateX(-50%) translateY(-0.5rem) scale(0.98); - } -} -.wire-navbar__dropdown--mega { - position: static; -} -.wire-navbar__dropdown--mega .wire-navbar__panel { - right: auto; - left: 50%; - width: min(calc(100vw - 2rem), 64rem); -} -.wire-navbar__panel--columns-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); -} -.wire-navbar__panel--columns-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); -} -.wire-navbar__panel--columns-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); -} -.wire-navbar__panel-intro { - grid-column: 1 / -1; - margin: 0; - padding: 0.5rem 0.65rem; - color: var(--wire-color-muted); - font-size: 0.8125rem; - font-weight: 400; -} -.wire-navbar__group { - display: grid; - align-content: start; - gap: 0.25rem; -} -.wire-navbar__group-title { - padding: 0.55rem 0.65rem 0.25rem; - font-size: 0.7rem; - font-weight: 600; - letter-spacing: 0.04em; - text-transform: uppercase; -} -.wire-navbar__group > small { - padding: 0 0.65rem 0.4rem; - color: var(--wire-color-muted); - font-size: 0.7rem; - font-weight: 400; -} -.wire-navbar__panel a { - display: flex; - min-height: 2.75rem; - padding: 0.65rem; - align-items: flex-start; - gap: 0.65rem; - border-radius: 0.6rem; - font-size: 0.8rem; - font-weight: 450; -} -.wire-navbar__panel a:hover { - background: var(--wire-color-surface-2); -} -.wire-navbar__panel a span:last-child { - display: grid; - gap: 0.15rem; -} -.wire-navbar__panel a strong { - font-weight: 500; -} -.wire-navbar__panel a small { - color: var(--wire-color-muted); - font-size: 0.7rem; - font-weight: 400; -} -.wire-navbar__action { - border: 1px solid transparent; -} -.wire-navbar__action--primary { - color: var(--wire-color-on-primary, #fff); - background: var(--wire-component-color, var(--wire-color-primary)); - font-weight: 600; -} -.wire-navbar__action--outline { - border-color: var(--wire-color-border); -} -.wire-navbar__toggle { - display: none; - width: 2.75rem; - height: 2.75rem; - margin-left: auto; - padding: 0.65rem; - border: 1px solid var(--wire-color-border); - border-radius: 0.65rem; - color: inherit; - background: var(--wire-color-surface); -} -.wire-navbar__toggle span { - display: block; - height: 2px; - margin: 0.25rem 0; - background: currentColor; -} - /* Structured responsive footer */ .wire-footer { width: 100%; @@ -5373,66 +4594,7 @@ .wire-footer__copyright-right:not(:has(*)) { min-height: 0; } - @media (max-width: 900px) { - .wire-navbar--width-compact .wire-navbar__main { - width: 100%; - } - .wire-navbar__toggle { - display: block; - } - .wire-navbar__collapse { - position: absolute; - top: 100%; - right: 0; - left: 0; - display: none; - padding: 0.75rem 1rem 1rem; - align-items: stretch; - flex-direction: column; - background: var(--wire-color-surface); - border-bottom: 1px solid var(--wire-color-border); - box-shadow: 0 16px 32px rgb(15 23 42 / 0.12); - max-height: calc(100dvh - 4rem); - overflow-x: hidden; - overflow-y: auto; - overscroll-behavior: contain; - } - .wire-navbar__collapse.is-open { - display: flex; - } - .wire-navbar__menus, - .wire-navbar__actions { - width: 100%; - align-items: stretch; - flex-direction: column; - } - .wire-navbar__menu-link, - .wire-navbar__dropdown > summary, - .wire-navbar__action { - width: 100%; - } - .wire-navbar__panel, - .wire-navbar__dropdown--mega .wire-navbar__panel { - position: static; - width: 100%; - max-width: none; - margin-top: 0.25rem; - box-shadow: none; - transform: none; - overflow: hidden; - animation: wire-navbar-mobile-panel 180ms ease both; - } - .wire-navbar__dropdown:not([open]) > .wire-navbar__panel, - .wire-navbar__dropdown[open] > .wire-navbar__panel { - transform: none; - } - .wire-navbar__panel[class*="wire-navbar__panel--columns-"] { - grid-template-columns: 1fr; - } - .wire-navbar__panel::before { - display: none; - } .wire-footer__grid { grid-template-columns: 1fr; } @@ -5447,9 +4609,6 @@ } } @media (max-width: 600px) { - .wire-navbar__brand-copy small { - display: none; - } .wire-footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -5473,7 +4632,6 @@ grid-template-columns: 1fr; } } - /* Portal display, accent, and language preferences */ .wire-preferences { display: inline-flex; @@ -5537,18 +4695,6 @@ box-shadow: var(--wire-shadow-lg, 0 18px 48px rgb(0 0 0 / 0.18)); animation: wire-component-enter 160ms ease both; } - -@keyframes wire-navbar-mobile-panel { - from { - opacity: 0; - transform: translateY(-0.35rem); - } - to { - opacity: 1; - transform: translateY(0); - } -} - /* Responsive grouped application sidebar */ .wire-sidebar-shell { width: 15rem; @@ -5668,7 +4814,6 @@ transform: translateY(0); } } - @media (max-width: 1023px) { .wire-sidebar-shell { width: 100%; @@ -5831,7 +4976,6 @@ mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center / contain no-repeat; } - /* Reusable responsive portal dashboard */ .wire-portal-dashboard { width: min(100%, 96rem); @@ -6055,7 +5199,6 @@ .wire-portal-dashboard__timeline p { margin-block: 0.15rem; } - @media (max-width: 1100px) { .wire-portal-dashboard__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); @@ -6085,7 +5228,6 @@ grid-template-columns: 1fr; } } - .wire-next--field { display: grid; width: min(100%, 28rem); @@ -6105,7 +5247,6 @@ font: inherit; font-weight: 500; } - /* Reusable dropdown and account menu */ .wire-dropdown { position: relative; @@ -6224,7 +5365,6 @@ overflow-y: auto; } } - /* Shared authentication shell and forms */ .wire-auth-split { display: grid; @@ -6444,7 +5584,6 @@ .wire-next--field textarea { resize: vertical; } - .wire-next--field, .wire-next--choice-field { --wire-field-color: var(--wire-component-color, var(--wire-color-primary)); @@ -6454,17 +5593,14 @@ font-size: 0.8125rem; font-weight: 500; } - .wire-next--field.wire-next--size-sm, .wire-next--choice-field.wire-next--size-sm { font-size: 0.8125rem; } - .wire-next--field.wire-next--size-lg, .wire-next--choice-field.wire-next--size-lg { font-size: 1rem; } - .wire-next__field-heading { display: flex; min-width: 0; @@ -6472,24 +5608,20 @@ justify-content: space-between; gap: 1rem; } - .wire-next__field-heading label { color: var(--wire-color-text); font-weight: 600; } - .wire-next__field-hint, .wire-next__field-help { color: var(--wire-color-muted); font-size: 0.82em; font-weight: 500; } - .wire-next__field-control { position: relative; min-width: 0; } - .wire-next__field-control > :is(input, textarea, select) { padding-inline: 0.85rem; border-color: var(--wire-color-border); @@ -6497,15 +5629,12 @@ background: var(--wire-color-surface); font-size: 0.8125rem; } - .wire-next__field-control[data-icon-position="start"] > :is(input, textarea, select) { padding-inline-start: 2.5rem; } - .wire-next__field-control[data-icon-position="end"] > :is(input, textarea, select) { padding-inline-end: 2.5rem; } - .wire-next__field-icon { position: absolute; z-index: 1; @@ -6515,18 +5644,15 @@ pointer-events: none; transform: translateY(-50%); } - .wire-next__field-control[data-icon-position="end"] > .wire-next__field-icon { right: 0.85rem; left: auto; } - .wire-next--field[data-variant="outlined"] .wire-next__field-control > :is(input, textarea, select) { border-width: 2px; } - .wire-next--field[data-variant="underline"] .wire-next__field-control > :is(input, textarea, select) { @@ -6536,17 +5662,14 @@ background: transparent; box-shadow: none; } - .wire-next--field[data-variant="pill"] .wire-next__field-control > :is(input, select) { border-radius: 999px; padding-inline: 1.15rem; } - .wire-next--field[data-variant="ghost"] .wire-next__field-control > :is(input, textarea, select) { border-color: transparent; background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface)); } - .wire-next__field-floating-label { position: absolute; top: 50%; @@ -6556,16 +5679,13 @@ transform: translateY(-50%); transition: 150ms ease; } - .wire-next--textarea .wire-next__field-floating-label { top: 1.35rem; } - .wire-next--field[data-floating="true"] .wire-next__field-control > :is(input, textarea, select) { padding-top: 1.2rem; padding-bottom: 0.3rem; } - .wire-next--field[data-floating="true"] .wire-next__field-heading > label { position: absolute !important; width: 1px !important; @@ -6575,12 +5695,10 @@ clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; } - .wire-next--field[data-floating="true"] .wire-next__field-heading:not(:has(.wire-next__field-hint)) { display: none; } - .wire-next--field[data-floating="true"] .wire-next__field-control > :is(input, textarea):is(:focus, :not(:placeholder-shown)) @@ -6589,33 +5707,27 @@ font-size: 0.7em; transform: none; } - .wire-next__field-error { min-height: 1em; color: var(--wire-color-danger); font-size: 0.82em; font-weight: 600; } - .wire-next__field-error:empty { display: none; } - .wire-next--field[data-invalid="true"] :is(input, textarea, select), .wire-next--choice-field[data-invalid="true"] input { border-color: var(--wire-color-danger); } - .wire-next--field :is(input, textarea, select):disabled, .wire-next--choice-field input:disabled { cursor: not-allowed; opacity: 0.58; } - .wire-next--field :is(input, textarea, select):read-only { background: var(--wire-color-surface-2); } - .wire-next--field[data-inline="true"], .wire-next--choice-field[data-inline="true"] { display: grid; @@ -6626,37 +5738,30 @@ align-items: center; gap: 0.75rem; } - .wire-next--field[data-inline="true"] .wire-next__field-heading, .wire-next--choice-field[data-inline="true"] .wire-next__field-heading { min-height: 2.65rem; align-items: center; } - .wire-next--field[data-inline="true"] .wire-next__field-heading { justify-content: flex-end; } - .wire-next--field[data-inline="true"] .wire-next__field-help, .wire-next--choice-field[data-inline="true"] .wire-next__field-help { display: flex; min-height: 2.65rem; align-items: center; } - .wire-next--choice-field[data-inline="true"] { grid-template-columns: minmax(12rem, 20rem) minmax(10rem, 1fr); } - .wire-next--choice-field[data-inline="true"] .wire-next__field-heading:empty { display: none; } - .wire-next--field[data-inline="true"] .wire-next__field-error, .wire-next--choice-field[data-inline="true"] .wire-next__field-error { grid-column: 2 / -1; } - .wire-next__sr-only { position: absolute !important; width: 1px !important; @@ -6668,14 +5773,12 @@ clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; } - .wire-next__choice-field { display: grid; width: 100%; max-width: none; gap: 0.4rem; } - .wire-next__choice { display: flex; min-width: 0; @@ -6686,7 +5789,6 @@ font-size: 0.75rem; font-weight: 500; } - .wire-next__checkbox-content { display: grid; width: 100%; @@ -6694,13 +5796,11 @@ align-items: start; grid-template-columns: minmax(0, 1fr); } - .wire-next__checkbox-content > .wire-next__choice { width: 100%; min-width: 0; align-items: flex-start; } - .wire-next__checkbox-slot { display: block; min-width: 0; @@ -6709,51 +5809,42 @@ font-size: 0.75rem; line-height: 1.45; } - .wire-next__checkbox-slot:empty { display: none; } - .wire-next__checkbox-slot :is(a, button) { color: var(--wire-field-color); } - .wire-next__choice input { flex: 0 0 auto; margin: 0; accent-color: var(--wire-field-color); } - .wire-next__choice-copy { display: grid; min-width: 0; gap: 0.15rem; line-height: 1.35; } - .wire-next__choice-copy small { color: var(--wire-color-muted); font-weight: 500; } - .wire-next__radio-group, .wire-next__checkbox-group { display: grid; min-width: 0; gap: 0.65rem; } - .wire-next--radio-field[data-orientation="horizontal"] .wire-next__radio-group, .wire-next--checkbox-field[data-orientation="horizontal"] .wire-next__checkbox-group { grid-template-columns: repeat(auto-fit, minmax(8rem, max-content)); align-items: stretch; } - .wire-next--radio-field[data-card="true"] .wire-next__radio-group, .wire-next--checkbox-field[data-card="true"] .wire-next__checkbox-group { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); } - .wire-next--radio-field[data-card="true"] .wire-next--radio, .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox { min-height: 4.5rem; @@ -6762,58 +5853,48 @@ border-radius: var(--wire-radius-sm); background: var(--wire-color-surface); } - .wire-next--radio-field[data-card="true"] .wire-next--radio:has(input:checked), .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox:has(input:checked) { border-color: var(--wire-field-color); box-shadow: 0 0 0 1px var(--wire-field-color); } - .wire-next--radio-field[data-list="true"] .wire-next--radio, .wire-next--checkbox-field[data-list="true"] .wire-next--checkbox { padding-block: 0.75rem; border-bottom: 1px solid var(--wire-color-border); } - .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio, .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox { justify-content: space-between; } - .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio input, .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox input { order: 2; } - .wire-next--radio-field[data-right-aligned="true"] .wire-next__choice-copy, .wire-next--checkbox-field[data-right-aligned="true"] .wire-next__choice-copy { order: 1; } - .wire-next__choice[data-variant="outlined"], .wire-next__choice[data-variant="floating"] { padding: 0.65rem 0.8rem; border: 1px solid var(--wire-color-border); border-radius: var(--wire-radius-sm); } - .wire-next__choice[data-variant="pill"] { padding: 0.65rem 1rem; border-radius: 999px; background: color-mix(in srgb, var(--wire-field-color) 9%, var(--wire-color-surface)); } - .wire-next__choice[data-variant="ghost"] { padding: 0.65rem 0.8rem; border-radius: var(--wire-radius-sm); background: color-mix(in srgb, var(--wire-field-color) 7%, transparent); } - .wire-next__choice[data-variant="underline"] { padding-block: 0.5rem; border-bottom: 1px solid var(--wire-color-border); } - .wire-next--switch input { appearance: none; position: relative; @@ -6824,28 +5905,23 @@ background: var(--wire-color-surface-2); transition: background var(--wire-motion-fast) var(--wire-ease-standard); } - .wire-next--switch { min-height: 2.65rem; justify-content: flex-start; } - .wire-next--switch > span:last-child { line-height: 1.35; } - .wire-next--select .wire-next__field-control { display: flex; align-items: center; } - .wire-next--select select { width: 100%; min-height: 2.65rem; margin: 0; line-height: 1.35; } - .wire-next--switch input::after { position: absolute; top: 0.15rem; @@ -6857,17 +5933,14 @@ content: ""; transition: transform var(--wire-motion-fast) var(--wire-ease-standard); } - .wire-next--switch input:checked { border-color: var(--wire-field-color); background: var(--wire-field-color); } - .wire-next--switch input:checked::after { background: var(--wire-color-primary-contrast, #fff); transform: translateX(1.1rem); } - .wire-next__color-control, .wire-next__range-control, .wire-next__input-group-control, @@ -6877,19 +5950,16 @@ align-items: center; gap: 0.65rem; } - .wire-next__color-control input[type="color"] { width: 3rem; padding: 0.2rem; } - .wire-next__range-track { display: grid; flex: 1; min-width: 0; gap: 0.35rem; } - .wire-next__range-control input { width: 100%; min-width: 0; @@ -6897,7 +5967,6 @@ flex: 1; accent-color: var(--wire-field-color); } - .wire-next__custom-slider { position: relative; width: 100%; @@ -6905,7 +5974,6 @@ cursor: pointer; touch-action: none; } - .wire-next__custom-slider::before, .wire-next__slider-fill { position: absolute; @@ -6915,21 +5983,18 @@ transform: translateY(-50%); content: ""; } - .wire-next__custom-slider::before { right: 0; left: 0; background: var(--wire-color-surface-2); box-shadow: inset 0 0 0 1px var(--wire-color-border); } - .wire-next__slider-fill { z-index: 1; left: 0; width: var(--wire-range-progress); background: var(--wire-field-color); } - .wire-next__slider-thumb { position: absolute; z-index: 3; @@ -6943,12 +6008,10 @@ box-shadow: var(--wire-shadow-1); transform: translate(-50%, -50%); } - .wire-next__custom-slider:focus-visible { outline: 3px solid color-mix(in srgb, var(--wire-field-color) 28%, transparent); outline-offset: 3px; } - .wire-next__slider-marks button { position: absolute; z-index: 2; @@ -6961,7 +6024,6 @@ background: var(--wire-color-muted); transform: translate(-50%, -50%); } - .wire-next__range-control[data-show-steps="true"] input { background-image: repeating-linear-gradient( 90deg, @@ -6971,7 +6033,6 @@ var(--wire-color-border) 10% ); } - .wire-next__range-bounds { display: grid; grid-template-columns: 1fr auto 1fr; @@ -6979,20 +6040,16 @@ font-size: 0.78em; font-variant-numeric: tabular-nums; } - .wire-next__range-bounds span:nth-child(2) { text-align: center; } - .wire-next__range-bounds span:last-child { text-align: right; } - .wire-next__range-control output { min-width: 3ch; font-variant-numeric: tabular-nums; } - .wire-next__range-stepper { display: inline-grid; width: 2.35rem; @@ -7007,17 +6064,14 @@ font-size: 1.2rem; cursor: pointer; } - .wire-next__range-stepper:hover:not(:disabled) { border-color: var(--wire-field-color); color: var(--wire-field-color); } - .wire-next__range-stepper:disabled { cursor: not-allowed; opacity: 0.45; } - .wire-next__picker-control, .wire-next--time-picker .wire-next__field-control { position: relative; @@ -7025,7 +6079,6 @@ min-width: 0; align-items: center; } - .wire-next__picker-control > button:first-of-type, .wire-next__time-trigger { display: flex; @@ -7042,7 +6095,6 @@ font: inherit; text-align: left; } - .wire-next__picker-clear { position: absolute; right: 2.5rem; @@ -7050,7 +6102,6 @@ background: transparent; color: var(--wire-color-muted); } - .wire-next__calendar, .wire-next__time-panel { z-index: 20; @@ -7063,18 +6114,15 @@ background: var(--wire-color-surface); box-shadow: var(--wire-shadow-3); } - .wire-next--date-picker[data-expanded="false"] .wire-next__calendar, .wire-next--time-picker[data-expanded="false"] .wire-next__time-panel { display: none; } - .wire-next__date-selectors { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.65rem; } - .wire-next__date-selectors label { display: grid; gap: 0.3rem; @@ -7082,7 +6130,6 @@ font-size: 0.78rem; font-weight: 600; } - .wire-next__date-selectors select { width: 100%; min-height: 2.35rem; @@ -7093,20 +6140,17 @@ color: var(--wire-color-text); font: inherit; } - .wire-next__date-done { background: var(--wire-field-color) !important; color: var(--wire-color-primary-contrast, #fff) !important; font-weight: 650; } - .wire-next__calendar > header { display: grid; grid-template-columns: 2.25rem 1fr 2.25rem; align-items: center; text-align: center; } - .wire-next__calendar button, .wire-next__time-panel button { min-height: 2.25rem; @@ -7115,7 +6159,6 @@ background: transparent; color: inherit; } - .wire-next__calendar-weekdays, .wire-next__calendar-grid { display: grid; @@ -7123,36 +6166,29 @@ gap: 0.2rem; text-align: center; } - .wire-next__calendar-weekdays { color: var(--wire-color-muted); font-size: 0.75rem; } - .wire-next__calendar-grid button:hover, .wire-next__time-panel button:hover { background: var(--wire-color-surface-2); } - .wire-next__calendar-grid button[aria-pressed="true"], .wire-next__time-panel button[aria-pressed="true"] { background: var(--wire-field-color); color: var(--wire-color-primary-contrast, #fff); } - .wire-next__calendar-grid button[data-outside="true"] { color: var(--wire-color-muted); opacity: 0.55; } - .wire-next__calendar-grid button[data-today="true"] { box-shadow: inset 0 0 0 1px var(--wire-field-color); } - .wire-next__time-panel { grid-template-columns: 1fr 1fr; } - .wire-next__time-options { display: grid; max-height: 12rem; @@ -7160,18 +6196,15 @@ overflow-y: auto; gap: 0.2rem; } - .wire-next__time-period { display: flex; gap: 0.35rem; } - .wire-next__time-done { align-self: end; background: var(--wire-field-color) !important; color: var(--wire-color-primary-contrast, #fff) !important; } - .wire-next--file-upload-progress { display: grid; width: min(100%, 36rem); @@ -7182,7 +6215,6 @@ background: var(--wire-color-surface); box-shadow: var(--wire-shadow-1); } - .wire-next--file-upload-progress .wire-next__row, .wire-next__upload-actions { display: flex; @@ -7190,12 +6222,10 @@ justify-content: space-between; gap: 0.75rem; } - .wire-next--file-upload-progress .wire-next__row > span { display: grid; min-width: 0; } - .wire-next--file-upload-progress progress { width: 100%; height: 0.55rem; @@ -7204,11 +6234,9 @@ border-radius: 999px; accent-color: var(--wire-component-color); } - .wire-next__upload-actions { justify-content: flex-end; } - .wire-next__upload-actions button { min-height: 2.25rem; padding-inline: 0.8rem; @@ -7217,13 +6245,11 @@ background: var(--wire-color-surface-2); color: inherit; } - @media (max-width: 640px) { .wire-next__time-panel { grid-template-columns: 1fr; } } - .wire-next__file-control { position: relative; min-height: 2.75rem; @@ -7232,57 +6258,48 @@ border-radius: var(--wire-radius-sm); background: var(--wire-color-surface); } - .wire-next__file-control input { position: absolute; cursor: pointer; opacity: 0; inset: 0; } - .wire-next__input-group-control { overflow: hidden; border: 1px solid var(--wire-color-border); border-radius: var(--wire-radius-sm); background: var(--wire-color-surface); } - .wire-next--field[data-variant="underline"] :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) { border-width: 0 0 1px; border-radius: 0; background: transparent; } - .wire-next--field[data-variant="outlined"] :is(.wire-next__input-group-control, .wire-next__file-control) { border-width: 2px; } - .wire-next--field[data-variant="pill"] :is(.wire-next__input-group-control, .wire-next__file-control) { border-radius: 999px; } - .wire-next--field[data-variant="ghost"] :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) { border-color: transparent; background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface)); } - .wire-next__input-group-control input { flex: 1; min-width: 0; border: 0; box-shadow: none; } - .wire-next__input-addon, .wire-next__input-group-control button { padding: 0.7rem 0.85rem; white-space: nowrap; } - .wire-next__input-group-control button { align-self: stretch; border: 0; @@ -7292,7 +6309,6 @@ font-weight: 700; cursor: pointer; } - @media (max-width: 640px) { .wire-next--field[data-inline="true"], .wire-next--choice-field[data-inline="true"] { @@ -7304,7 +6320,6 @@ grid-column: auto; } } - .wire-next--toggle-password { display: grid; width: 100%; @@ -7315,29 +6330,24 @@ padding: 0; border: 0; } - .wire-next--toggle-password > label { color: var(--wire-color-text); font-size: 0.75rem; font-weight: 600; } - .wire-next__password-fields { display: grid; gap: 1rem; } - .wire-next__password-field { display: grid; gap: 0.45rem; } - .wire-next__password-field > label { color: var(--wire-color-text); font-size: 0.82em; font-weight: 750; } - .wire-next__password-control { position: relative; display: flex; @@ -7345,7 +6355,6 @@ align-items: center; width: 100%; } - .wire-next__password-control > input { width: 100%; min-width: 0; @@ -7362,12 +6371,10 @@ border-color var(--wire-motion-base) var(--wire-ease-standard), box-shadow var(--wire-motion-base) var(--wire-ease-standard); } - .wire-next__password-control > input:focus-visible { border-color: var(--wire-component-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-component-color) 18%, transparent); } - .wire-next__password-toggle { position: absolute; top: 50%; @@ -7384,14 +6391,12 @@ cursor: pointer; transform: translateY(-50%); } - .wire-next__password-toggle:hover, .wire-next__password-toggle:focus-visible { color: var(--wire-component-color); background: color-mix(in srgb, var(--wire-component-color) 10%, transparent); outline: 0; } - .wire-next__password-icon { display: block; width: 1.05em; @@ -7401,11 +6406,9 @@ mask-repeat: no-repeat; mask-size: contain; } - .wire-next__password-icon--show { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.06 12.35a1 1 0 0 1 0-.7C3.7 7.6 7.64 5 12 5c4.36 0 8.3 2.6 9.94 6.65a1 1 0 0 1 0 .7C20.3 16.4 16.36 19 12 19c-4.36 0-8.3-2.6-9.94-6.65Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); } - .wire-next__password-toggle[aria-pressed="true"]::after { position: absolute; width: 1.25em; @@ -7416,7 +6419,6 @@ transform: rotate(45deg); box-shadow: 0 0 0 1px var(--wire-color-bg); } - .wire-next__password-checkbox { display: inline-flex; width: fit-content; @@ -7426,25 +6428,21 @@ font-size: 0.78em; cursor: pointer; } - .wire-next__password-checkbox > input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--wire-component-color); } - .wire-next--toggle-password > small { color: var(--wire-color-muted); font-size: 0.72em; } - .wire-next--toggle-password:has(input.wire-invalid) .wire-next__password-control > input, .wire-next--toggle-password.wire-next--invalid .wire-next__password-control > input { border-color: var(--wire-color-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-danger) 14%, transparent); } - .wire-next--strong-password { position: relative; display: grid; @@ -7452,16 +6450,13 @@ gap: 0.6rem; color: var(--wire-color-text); } - .wire-next--strong-password > label { font-size: 0.82em; font-weight: 700; } - .wire-next__strong-password-anchor { position: relative; } - .wire-next--strong-password input { width: 100%; min-height: 2.75em; @@ -7476,22 +6471,18 @@ border-color 160ms ease, box-shadow 160ms ease; } - .wire-next--strong-password input:focus-visible { border-color: var(--wire-component-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-component-color) 16%, transparent); } - .wire-next--strong-password.wire-next--invalid input, .wire-next--strong-password input.wire-invalid { border-color: var(--wire-color-danger); } - .wire-next__strong-password-details { display: grid; gap: 0.65rem; } - .wire-next__strong-password-summary { display: flex; align-items: center; @@ -7500,11 +6491,9 @@ color: var(--wire-color-muted); font-size: 0.75em; } - .wire-next__strong-password-summary strong { color: var(--wire-color-text); } - .wire-next__strong-password-meter { width: 100%; height: 0.42rem; @@ -7512,7 +6501,6 @@ border-radius: 999px; background: color-mix(in srgb, var(--wire-color-border) 72%, transparent); } - .wire-next__strong-password-meter > span { display: block; width: 0; @@ -7523,19 +6511,15 @@ width 180ms ease, background-color 180ms ease; } - .wire-next--strong-password[data-strength="fair"] .wire-next__strong-password-meter > span { background: var(--wire-color-warning); } - .wire-next--strong-password[data-strength="good"] .wire-next__strong-password-meter > span { background: var(--wire-component-color); } - .wire-next--strong-password[data-strength="strong"] .wire-next__strong-password-meter > span { background: var(--wire-color-success); } - .wire-next__strong-password-requirements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); @@ -7544,7 +6528,6 @@ padding: 0; list-style: none; } - .wire-next__strong-password-requirements li { display: flex; min-width: 0; @@ -7554,7 +6537,6 @@ font-size: 0.72em; line-height: 1.45; } - .wire-next__strong-password-requirements li > span { position: relative; width: 0.9rem; @@ -7564,7 +6546,6 @@ border: 1px solid currentColor; border-radius: 50%; } - .wire-next__strong-password-requirements li > span::after { position: absolute; top: 0.12rem; @@ -7577,26 +6558,21 @@ opacity: 0; transform: rotate(45deg); } - .wire-next__strong-password-requirements li[data-met="true"] { color: var(--wire-color-success); } - .wire-next__strong-password-requirements li[data-met="true"] > span { border-color: var(--wire-color-success); background: var(--wire-color-success); } - .wire-next__strong-password-requirements li[data-met="true"] > span::after { opacity: 1; } - .wire-next__strong-password-details > small { color: var(--wire-color-muted); font-size: 0.7em; line-height: 1.5; } - .wire-next__strong-password-popover { position: absolute; top: calc(100% + 0.7rem); @@ -7616,13 +6592,11 @@ transform 140ms ease, visibility 140ms ease; } - .wire-next__strong-password-popover[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); } - .wire-next__strong-password-popover-arrow { position: absolute; top: -0.38rem; @@ -7634,13 +6608,11 @@ background: var(--wire-color-surface); transform: rotate(45deg); } - @media (max-width: 560px) { .wire-next__strong-password-requirements { grid-template-columns: 1fr; } } - .wire-next--advanced-select { position: relative; display: grid; @@ -7994,7 +6966,6 @@ min-width: 100%; } } - .wire-next--choice { display: inline-flex; align-items: center; @@ -8006,7 +6977,6 @@ height: 1.1rem; accent-color: var(--wire-color-primary); } - .wire-next--modal, .wire-next--drawer, .wire-next--dropdown, @@ -8036,13 +7006,11 @@ background: transparent; cursor: pointer; } - @keyframes wire-shimmer { to { background-position: -200% 0; } } - @media (max-width: 768px) { .wire-next--columns, .wire-next--grid, @@ -8050,12 +7018,10 @@ grid-template-columns: 1fr; } } - [data-component] :where(button, .wire-btn, [role="button"]):not(:disabled):active { transform: translateY(0) scale(0.98); transition-duration: var(--wire-motion-fast); } - @keyframes wire-component-enter { from { opacity: 0; @@ -8066,7 +7032,6 @@ transform: translateY(0); } } - @keyframes wire-overlay-enter { from { opacity: 0; @@ -8075,7 +7040,6 @@ opacity: 1; } } - @keyframes wire-dialog-enter { from { opacity: 0; @@ -8086,7 +7050,6 @@ transform: translateY(0) scale(1); } } - @keyframes wire-popover-enter { from { opacity: 0; @@ -8097,7 +7060,6 @@ transform: translateY(0) scale(1); } } - @media (prefers-reduced-motion: reduce) { [data-component], [data-component] *, @@ -8125,7 +7087,6 @@ flex: 1 1 100%; } } - /* --- Expanded foundation catalog ---------------------------------------- */ .wire-container--narrow { max-width: 44rem; @@ -8340,7 +7301,6 @@ border-radius: 999px; background: var(--wire-color-success); } - @media (max-width: 768px) { .wire-split-layout, .wire-sidebar-layout { @@ -8350,7 +7310,6 @@ position: static; } } - /* --- Segmented button group --------------------------------------------- */ .wire-segmented-group { display: inline-grid; @@ -8370,16 +7329,13 @@ var(--wire-shadow-1); scrollbar-width: none; } - .wire-segmented-group::-webkit-scrollbar { display: none; } - .wire-segmented-group--full { display: grid; width: 100%; } - .wire-segmented-group__button { position: relative; isolation: isolate; @@ -8408,7 +7364,6 @@ box-shadow var(--wire-motion-base) var(--wire-ease-standard), transform var(--wire-motion-base) var(--wire-ease-emphasized); } - .wire-segmented-group__button::before { content: ""; position: absolute; @@ -8423,37 +7378,30 @@ opacity var(--wire-motion-base) var(--wire-ease-standard), transform var(--wire-motion-slow) var(--wire-ease-emphasized); } - .wire-segmented-group__button:hover:not(:disabled) { color: var(--wire-color-text); background: color-mix(in srgb, var(--wire-color-surface) 65%, transparent); } - .wire-segmented-group__button--active { color: var(--wire-color-text); border-color: color-mix(in srgb, var(--wire-color-primary) 22%, var(--wire-color-border)); transform: translateY(-1px); } - .wire-segmented-group__button--active::before { opacity: 1; transform: scale(1); } - .wire-segmented-group__button--active .wire-segmented-group__label { animation: wire-segmented-label-in var(--wire-motion-slow) var(--wire-ease-emphasized) both; } - .wire-segmented-group__button:focus-visible { outline: 2px solid var(--wire-color-primary); outline-offset: 1px; } - .wire-segmented-group__button:disabled { cursor: not-allowed; opacity: 0.45; } - .wire-segmented-group__badge { display: inline-flex; min-height: 1.35rem; @@ -8466,32 +7414,27 @@ font-size: 0.7rem; font-weight: 800; } - .wire-segmented-group__icon { width: 1rem; height: 1rem; flex: none; color: currentColor; } - .wire-segmented-group--sm .wire-segmented-group__button { min-height: 2.15rem; padding: 0.4rem 0.7rem; font-size: 0.8rem; } - .wire-segmented-group--lg .wire-segmented-group__button { min-height: 3rem; padding: 0.7rem 1.15rem; font-size: 0.95rem; } - .wire-segmented-group__empty { padding: 0.65rem 0.9rem; color: var(--wire-color-muted); font-size: 0.875rem; } - @keyframes wire-segmented-label-in { from { opacity: 0.68; @@ -8502,13 +7445,11 @@ 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); @@ -8530,12 +7471,10 @@ 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%; @@ -8544,16 +7483,13 @@ 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; @@ -8562,19 +7498,16 @@ 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; @@ -8583,12 +7516,10 @@ 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); @@ -8597,7 +7528,6 @@ letter-spacing: 0.16em; text-transform: uppercase; } - .wire-analytics-preview__title { max-width: 13ch; margin: 0; @@ -8607,11 +7537,9 @@ 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; @@ -8619,12 +7547,10 @@ 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; @@ -8635,40 +7561,32 @@ 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%; min-width: 0; } - .wire-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1rem; min-width: 0; } - .wire-metric-grid[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } - .wire-metric-grid[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } - .wire-metric-grid[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } - .wire-metric-card { display: flex; min-width: 0; @@ -8682,7 +7600,6 @@ border-radius: calc(var(--wire-radius) * 0.9); box-shadow: var(--wire-shadow-1); } - .wire-metric-card__value { overflow-wrap: anywhere; color: var(--wire-color-text); @@ -8691,26 +7608,22 @@ font-weight: 750; letter-spacing: -0.045em; } - .wire-metric-card__label { margin-top: 0.7rem; color: var(--wire-color-text); font-size: 0.875rem; font-weight: 700; } - .wire-metric-card__description { margin: 0.45rem 0 0; color: var(--wire-color-muted); font-size: 0.8rem; line-height: 1.5; } - .wire-metric-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } - .wire-metric-card--compact { min-height: 7.25rem; padding: 1rem; @@ -8718,18 +7631,15 @@ background: color-mix(in srgb, var(--wire-color-surface-2) 72%, var(--wire-color-surface)); box-shadow: none; } - .wire-metric-card--compact .wire-metric-card__value { font-size: clamp(1rem, 2vw, 1.35rem); line-height: 1.15; } - .wire-metric-card--compact .wire-metric-card__label { margin-top: 0.45rem; color: var(--wire-color-muted); font-size: 0.75rem; } - .wire-metric-grid__empty { grid-column: 1 / -1; margin: 0; @@ -8739,7 +7649,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; @@ -8749,7 +7658,6 @@ max-width: 18ch; } } - @media (max-width: 640px) { .wire-segmented-group { width: 100%; diff --git a/scripts/lib/measure-runtime-size.ts b/scripts/lib/measure-runtime-size.ts new file mode 100644 index 00000000..c5879e97 --- /dev/null +++ b/scripts/lib/measure-runtime-size.ts @@ -0,0 +1,57 @@ +/** + * Report the minified size of each browser runtime, as JSON on stdout. + * + * Run under Bun because minifying is what the production build does, and this + * has to measure the same thing. The security audit runs under Node and shells + * out to this. + * + * Measuring the raw source instead would count comments, which the production + * minifier strips -- so they cost a visitor nothing while still consuming the + * budget. That made the old metric reward deleting explanatory comments over + * writing smaller code. + */ +import { + getReactiveRuntime, + getNavRuntime, + getRealtimeRuntime, +} from "../../packages/csr/src/index.ts"; + +const runtimes: Record = { + "reactive-runtime.ts": getReactiveRuntime(), + "nav-runtime.ts": getNavRuntime(), + "realtime-runtime.ts": getRealtimeRuntime(), +}; + +const sizes: Record = {}; + +for (const [name, source] of Object.entries(runtimes)) { + const built = await Bun.build({ + // A blob entrypoint keeps this off the filesystem, so a failed run cannot + // leave scratch files behind in the repository. + entrypoints: ["runtime.js"], + target: "browser", + format: "esm", + minify: true, + plugins: [ + { + name: "inline-runtime", + setup(build) { + build.onResolve({ filter: /^runtime\.js$/ }, () => ({ + path: "runtime.js", + namespace: "inline", + })); + build.onLoad({ filter: /.*/, namespace: "inline" }, () => ({ + contents: source, + loader: "js", + })); + }, + }, + ], + }); + if (!built.success || !built.outputs.length) { + throw new Error(`Failed to minify ${name}:\n${built.logs.map(String).join("\n")}`); + } + sizes[name] = (await built.outputs[0]!.text()).length; +} + +process.stdout.write(JSON.stringify(sizes)); diff --git a/scripts/security-performance-audit.mjs b/scripts/security-performance-audit.mjs index 375cc41e..ab6479b0 100644 --- a/scripts/security-performance-audit.mjs +++ b/scripts/security-performance-audit.mjs @@ -155,21 +155,38 @@ addCheck( dynamicCode.join(", ") || "No dynamic code execution in security foundation packages.", ); +/* + * Runtime budgets are measured on the code that actually ships. + * + * These used to measure the raw source, which counts comments -- and comments + * are stripped by the production minifier, so they cost a user nothing. The + * old metric therefore paid people to delete explanatory comments in exchange + * for no real saving, while a genuine feature and a wall of prose looked + * identical to it. + * + * The runtime is served from /__wrnexus/reactive.js as its own file, minified + * and sent with an immutable year-long cache, so what a visitor pays is the + * minified transfer once. That is the number worth defending. + */ const runtimeBudgets = { - // Raised for the 9.0 release: the reactive runtime took on anchored-overlay - // clamping, modal dialog focus/scroll behaviour, the toaster and the client - // half of DataTable. This is a deliberate ceiling, not a rubber stamp -- - // raise it again only alongside a decision about what the runtime should own. - "reactive-runtime.ts": 175_000, - "nav-runtime.ts": 25_000, - "realtime-runtime.ts": 15_000, + "reactive-runtime.ts": 80_000, + "nav-runtime.ts": 12_000, + "realtime-runtime.ts": 8_000, }; +const minifiedSizes = JSON.parse( + execFileSync( + process.platform === "win32" ? "bun.exe" : "bun", + [join(root, "scripts", "lib", "measure-runtime-size.ts")], + { cwd: root, encoding: "utf8" }, + ), +); for (const [file, budget] of Object.entries(runtimeBudgets)) { - const bytes = statSync(join(root, "packages", "csr", "src", file)).size; + const bytes = minifiedSizes[file]; + const raw = statSync(join(root, "packages", "csr", "src", file)).size; addCheck( `PERF-RUNTIME-SIZE-${file.replace(/-runtime\.ts$/, "").toUpperCase()}`, - bytes <= budget, - `${file} is ${bytes} bytes (budget ${budget}).`, + typeof bytes === "number" && bytes <= budget, + `${file} minifies to ${bytes} bytes (budget ${budget}, ${raw} raw).`, ); } addCheck(