bitwrench 2.0.17 → 2.0.18

package/src/bitwrench-styles.js

@@ -46,10 +46,12 @@ export var SPACING_SCALE = {
   7: '3rem'       // 48px
 };
 
+let _S=SPACING_SCALE;
+
 export var SPACING_PRESETS = {
-  compact:  { btn: SPACING_SCALE[1] + ' ' + SPACING_SCALE[3],  card: SPACING_SCALE[3] + ' ' + SPACING_SCALE[4], alert: SPACING_SCALE[2] + ' ' + SPACING_SCALE[4], cell: SPACING_SCALE[2] + ' ' + SPACING_SCALE[3], input: SPACING_SCALE[1] + ' ' + SPACING_SCALE[3] },
-  normal:   { btn: SPACING_SCALE[2] + ' ' + SPACING_SCALE[4],  card: SPACING_SCALE[5] + ' ' + SPACING_SCALE[5], alert: SPACING_SCALE[3] + ' ' + SPACING_SCALE[5], cell: SPACING_SCALE[3] + ' ' + SPACING_SCALE[4], input: SPACING_SCALE[2] + ' ' + SPACING_SCALE[3] },
-  spacious: { btn: SPACING_SCALE[3] + ' ' + SPACING_SCALE[5],  card: SPACING_SCALE[6] + ' ' + SPACING_SCALE[6], alert: SPACING_SCALE[4] + ' ' + SPACING_SCALE[5], cell: SPACING_SCALE[4] + ' ' + SPACING_SCALE[5], input: SPACING_SCALE[3] + ' ' + SPACING_SCALE[4] }
+  compact:  { btn: _S[1] + ' ' + _S[3],  card: _S[3] + ' ' + _S[4], alert: _S[2] + ' ' + _S[4], cell: _S[2] + ' ' + _S[3], input: _S[1] + ' ' + _S[3] },
+  normal:   { btn: _S[2] + ' ' + _S[4],  card: _S[5] + ' ' + _S[5], alert: _S[3] + ' ' + _S[5], cell: _S[3] + ' ' + _S[4], input: _S[2] + ' ' + _S[3] },
+  spacious: { btn: _S[3] + ' ' + _S[5],  card: _S[6] + ' ' + _S[6], alert: _S[4] + ' ' + _S[5], cell: _S[4] + ' ' + _S[5], input: _S[3] + ' ' + _S[4] }
 };
 
 export var RADIUS_PRESETS = {
@@ -161,20 +163,14 @@ export var DEFAULT_PALETTE_CONFIG = {
  * Built-in theme presets — named color combinations
  * Each preset provides primary, secondary, and tertiary seed colors.
  */
-export var THEME_PRESETS = {
-  teal:     { primary: '#006666', secondary: '#6c757d', tertiary: '#006666' },
-  ocean:    { primary: '#0077b6', secondary: '#90e0ef', tertiary: '#00b4d8' },
-  sunset:   { primary: '#e76f51', secondary: '#264653', tertiary: '#e9c46a' },
-  forest:   { primary: '#2d6a4f', secondary: '#95d5b2', tertiary: '#52b788' },
-  slate:    { primary: '#343a40', secondary: '#adb5bd', tertiary: '#6c757d' },
-  rose:     { primary: '#e11d48', secondary: '#fda4af', tertiary: '#fb7185' },
-  indigo:   { primary: '#4f46e5', secondary: '#a5b4fc', tertiary: '#818cf8' },
-  amber:    { primary: '#d97706', secondary: '#fbbf24', tertiary: '#f59e0b' },
-  emerald:  { primary: '#059669', secondary: '#6ee7b7', tertiary: '#34d399' },
-  nord:     { primary: '#5e81ac', secondary: '#88c0d0', tertiary: '#81a1c1' },
-  coral:    { primary: '#ef6461', secondary: '#4a7c7e', tertiary: '#e8a87c' },
-  midnight: { primary: '#1e3a5f', secondary: '#7c8db5', tertiary: '#3d5a80' }
-};
+export var THEME_PRESETS = Object.fromEntries([
+  ['teal','#006666','#6c757d','#006666'],['ocean','#0077b6','#90e0ef','#00b4d8'],
+  ['sunset','#e76f51','#264653','#e9c46a'],['forest','#2d6a4f','#95d5b2','#52b788'],
+  ['slate','#343a40','#adb5bd','#6c757d'],['rose','#e11d48','#fda4af','#fb7185'],
+  ['indigo','#4f46e5','#a5b4fc','#818cf8'],['amber','#d97706','#fbbf24','#f59e0b'],
+  ['emerald','#059669','#6ee7b7','#34d399'],['nord','#5e81ac','#88c0d0','#81a1c1'],
+  ['coral','#ef6461','#4a7c7e','#e8a87c'],['midnight','#1e3a5f','#7c8db5','#3d5a80']
+].map(function(e) { return [e[0], {primary:e[1],secondary:e[2],tertiary:e[3]}]; }));
 
 /**
  * Resolve layout config to spacing, radius, typeScale, elevation, and motion objects.
@@ -221,6 +217,7 @@ function scopeSelector(name, sel) {
   if (sel.includes(',')) return sel.split(',').map(function(s) { return '.' + name + ' ' + s.trim(); }).join(', ');
   return '.' + name + ' ' + sel;
 }
+var _sx=scopeSelector;
 
 // =========================================================================
 // Themed CSS generators
@@ -229,12 +226,12 @@ function scopeSelector(name, sel) {
 function generateTypographyThemed(scope, palette, layout) {
   var mot = layout.motion;
   var rules = {};
-  rules[scopeSelector(scope, 'a')] = {
+  rules[_sx(scope, 'a')] = {
     'color': palette.primary.base,
     'text-decoration': 'none',
     'transition': 'color ' + mot.fast + ' ' + mot.easing
   };
-  rules[scopeSelector(scope, 'a:hover')] = {
+  rules[_sx(scope, 'a:hover')] = {
     'color': palette.primary.hover,
     'text-decoration': 'underline'
   };
@@ -247,11 +244,11 @@ function generateButtons(scope, palette, layout) {
   var rd = layout.radius;
 
   // Base button (only when scoped — unscoped uses defaultStyles)
-  rules[scopeSelector(scope, '.bw_btn')] = {
+  rules[_sx(scope, '.bw_btn')] = {
     'padding': sp.btn,
     'border-radius': rd.btn
   };
-  rules[scopeSelector(scope, '.bw_btn:focus-visible')] = {
+  rules[_sx(scope, '.bw_btn:focus-visible')] = {
     'outline': '2px solid currentColor',
     'outline-offset': '2px',
     'box-shadow': '0 0 0 3px ' + palette.primary.focus
@@ -260,12 +257,12 @@ function generateButtons(scope, palette, layout) {
   // Variant colors handled by palette class on component root
 
   // Size variants (structural, reuse layout radius)
-  rules[scopeSelector(scope, '.bw_btn_lg')] = {
+  rules[_sx(scope, '.bw_btn_lg')] = {
     'padding': '0.625rem 1.5rem',
     'font-size': '1rem',
     'border-radius': rd.btn === '50rem' ? '50rem' : (parseInt(rd.btn) + 2) + 'px'
   };
-  rules[scopeSelector(scope, '.bw_btn_sm')] = {
+  rules[_sx(scope, '.bw_btn_sm')] = {
     'padding': '0.25rem 0.75rem',
     'font-size': '0.8125rem',
     'border-radius': rd.btn === '50rem' ? '50rem' : (Math.max(parseInt(rd.btn) - 1, 0)) + 'px'
@@ -279,7 +276,7 @@ function generateAlerts(scope, palette, layout) {
   var sp = layout.spacing;
   var rd = layout.radius;
 
-  rules[scopeSelector(scope, '.bw_alert')] = {
+  rules[_sx(scope, '.bw_alert')] = {
     'padding': sp.alert,
     'border-radius': rd.alert
   };
@@ -298,36 +295,36 @@ function generateCards(scope, palette, layout) {
 
   var elev = layout.elevation;
   var motion = layout.motion;
-  rules[scopeSelector(scope, '.bw_card')] = {
+  rules[_sx(scope, '.bw_card')] = {
     'background-color': palette.surface || '#fff',
     'border': '1px solid ' + palette.light.border,
     'border-radius': rd.card,
     'box-shadow': elev.sm,
     'transition': 'box-shadow ' + motion.normal + ' ' + motion.easing + ', transform ' + motion.normal + ' ' + motion.easing
   };
-  rules[scopeSelector(scope, '.bw_card:hover')] = {
+  rules[_sx(scope, '.bw_card:hover')] = {
     'box-shadow': elev.md
   };
-  rules[scopeSelector(scope, '.bw_card_hoverable:hover')] = {
+  rules[_sx(scope, '.bw_card_hoverable:hover')] = {
     'box-shadow': elev.lg
   };
-  rules[scopeSelector(scope, '.bw_card_body')] = {
+  rules[_sx(scope, '.bw_card_body')] = {
     'padding': sp.card
   };
-  rules[scopeSelector(scope, '.bw_card_header')] = {
+  rules[_sx(scope, '.bw_card_header')] = {
     'padding': sp.card.split(' ').map(function(v) { return (parseFloat(v) * 0.7).toFixed(3).replace(/\.?0+$/, '') + 'rem'; }).join(' '),
-    'background-color': palette.light.light,
+    'background-color': palette.surfaceAlt,
     'border-bottom': '1px solid ' + palette.light.border
   };
-  rules[scopeSelector(scope, '.bw_card_footer')] = {
-    'background-color': palette.light.light,
+  rules[_sx(scope, '.bw_card_footer')] = {
+    'background-color': palette.surfaceAlt,
     'border-top': '1px solid ' + palette.light.border,
     'color': palette.secondary.base
   };
-  rules[scopeSelector(scope, '.bw_card_title')] = {
+  rules[_sx(scope, '.bw_card_title')] = {
     'color': palette.dark.base
   };
-  rules[scopeSelector(scope, '.bw_card_subtitle')] = {
+  rules[_sx(scope, '.bw_card_subtitle')] = {
     'color': palette.secondary.base
   };
 
@@ -341,55 +338,55 @@ function generateForms(scope, palette, layout) {
   var sp = layout.spacing;
   var rd = layout.radius;
 
-  rules[scopeSelector(scope, '.bw_form_control')] = {
+  rules[_sx(scope, '.bw_form_control')] = {
     'padding': sp.input,
     'border-radius': rd.input,
     'color': palette.dark.base,
     'background-color': palette.surface || '#fff',
     'border-color': palette.light.border
   };
-  rules[scopeSelector(scope, '.bw_form_control:focus')] = {
+  rules[_sx(scope, '.bw_form_control:focus')] = {
     'border-color': palette.primary.border,
     'outline': '2px solid ' + palette.primary.base,
     'outline-offset': '-1px',
     'box-shadow': '0 0 0 0.25rem ' + palette.primary.focus
   };
-  rules[scopeSelector(scope, '.bw_form_control::placeholder')] = {
+  rules[_sx(scope, '.bw_form_control::placeholder')] = {
     'color': palette.secondary.base
   };
-  rules[scopeSelector(scope, '.bw_form_label')] = {
+  rules[_sx(scope, '.bw_form_label')] = {
     'color': palette.dark.base
   };
-  rules[scopeSelector(scope, '.bw_form_text')] = {
+  rules[_sx(scope, '.bw_form_text')] = {
     'color': palette.secondary.base
   };
-  rules[scopeSelector(scope, '.bw_form_check_input:checked')] = {
+  rules[_sx(scope, '.bw_form_check_input:checked')] = {
     'background-color': palette.primary.base,
     'border-color': palette.primary.base
   };
-  rules[scopeSelector(scope, '.bw_form_check_input:focus')] = {
+  rules[_sx(scope, '.bw_form_check_input:focus')] = {
     'box-shadow': '0 0 0 0.25rem ' + palette.primary.focus
   };
   // Validation states
-  rules[scopeSelector(scope, '.bw_form_control.bw_is_valid')] = { 'border-color': palette.success.base };
-  rules[scopeSelector(scope, '.bw_form_control.bw_is_valid:focus')] = {
+  rules[_sx(scope, '.bw_form_control.bw_is_valid')] = { 'border-color': palette.success.base };
+  rules[_sx(scope, '.bw_form_control.bw_is_valid:focus')] = {
     'border-color': palette.success.base,
     'box-shadow': '0 0 0 0.2rem ' + palette.success.focus
   };
-  rules[scopeSelector(scope, '.bw_form_control.bw_is_invalid')] = { 'border-color': palette.danger.base };
-  rules[scopeSelector(scope, '.bw_form_control.bw_is_invalid:focus')] = {
+  rules[_sx(scope, '.bw_form_control.bw_is_invalid')] = { 'border-color': palette.danger.base };
+  rules[_sx(scope, '.bw_form_control.bw_is_invalid:focus')] = {
     'border-color': palette.danger.base,
     'box-shadow': '0 0 0 0.2rem ' + palette.danger.focus
   };
   // Form select
-  rules[scopeSelector(scope, '.bw_form_select')] = {
+  rules[_sx(scope, '.bw_form_select')] = {
     'padding': sp.input,
     'border-radius': rd.input,
     'color': palette.dark.base,
     'background-color': palette.surface || '#fff',
     'border-color': palette.light.border
   };
-  rules[scopeSelector(scope, '.bw_form_select:focus')] = {
+  rules[_sx(scope, '.bw_form_select:focus')] = {
     'border-color': palette.primary.border,
     'box-shadow': '0 0 0 0.25rem ' + palette.primary.focus
   };
@@ -397,43 +394,46 @@ function generateForms(scope, palette, layout) {
   return rules;
 }
 
-function generateNavigation(scope, palette) {
+function generateNavigation(scope, palette, layout) {
   var rules = {};
-  rules[scopeSelector(scope, '.bw_navbar')] = {
-    'background-color': palette.light.light,
+  rules[_sx(scope, '.bw_navbar')] = {
+    'background-color': palette.surfaceAlt,
     'border-bottom-color': palette.light.border
   };
-  rules[scopeSelector(scope, '.bw_navbar_brand')] = {
+  rules[_sx(scope, '.bw_navbar_brand')] = {
     'color': palette.dark.base
   };
-  rules[scopeSelector(scope, '.bw_navbar_nav .bw_nav_link')] = {
-    'color': palette.secondary.base
+  rules[_sx(scope, '.bw_navbar_nav .bw_nav_link')] = {
+    'color': palette.secondary.base,
+    'border-radius': layout.radius.btn
   };
-  rules[scopeSelector(scope, '.bw_navbar_nav .bw_nav_link:hover')] = {
-    'color': palette.dark.base
+  rules[_sx(scope, '.bw_navbar_nav .bw_nav_link:hover')] = {
+    'color': palette.dark.base,
+    'background-color': palette.surfaceAlt
   };
-  rules[scopeSelector(scope, '.bw_navbar_nav .bw_nav_link.active')] = {
+  rules[_sx(scope, '.bw_navbar_nav .bw_nav_link.active')] = {
     'color': palette.primary.base,
-    'background-color': palette.primary.focus
+    'background-color': palette.primary.focus,
+    'font-weight': '600'
   };
-  rules[scopeSelector(scope, '.bw_navbar_dark')] = {
+  rules[_sx(scope, '.bw_navbar_dark')] = {
     'background-color': palette.dark.base,
     'border-bottom-color': palette.dark.hover
   };
-  rules[scopeSelector(scope, '.bw_navbar_dark .bw_navbar_brand')] = {
+  rules[_sx(scope, '.bw_navbar_dark .bw_navbar_brand')] = {
     'color': palette.light.base
   };
-  rules[scopeSelector(scope, '.bw_navbar_dark .bw_nav_link')] = {
-    'color': 'rgba(255,255,255,.65)'
+  rules[_sx(scope, '.bw_navbar_dark .bw_nav_link')] = {
+    'color': palette.light.border
   };
-  rules[scopeSelector(scope, '.bw_navbar_dark .bw_nav_link:hover')] = {
-    'color': '#fff'
+  rules[_sx(scope, '.bw_navbar_dark .bw_nav_link:hover')] = {
+    'color': palette.light.base
   };
-  rules[scopeSelector(scope, '.bw_navbar_dark .bw_nav_link.active')] = {
-    'color': '#fff',
+  rules[_sx(scope, '.bw_navbar_dark .bw_nav_link.active')] = {
+    'color': palette.light.base,
     'font-weight': '600'
   };
-  rules[scopeSelector(scope, '.bw_nav_pills .bw_nav_link.active')] = {
+  rules[_sx(scope, '.bw_nav_pills .bw_nav_link.active')] = {
     'color': palette.primary.textOn,
     'background-color': palette.primary.base
   };
@@ -444,49 +444,58 @@ function generateTables(scope, palette, layout) {
   var rules = {};
   var sp = layout.spacing;
 
-  rules[scopeSelector(scope, '.bw_table')] = {
+  rules[_sx(scope, '.bw_table')] = {
     'color': palette.dark.base,
     'border-color': palette.light.border
   };
-  rules[scopeSelector(scope, '.bw_table > :not(caption) > * > *')] = {
+  rules[_sx(scope, '.bw_table > :not(caption) > * > *')] = {
     'padding': sp.cell,
     'border-bottom-color': palette.light.border
   };
-  rules[scopeSelector(scope, '.bw_table > thead > tr > *')] = {
+  rules[_sx(scope, '.bw_table > thead > tr > *')] = {
     'color': palette.secondary.base,
     'border-bottom-color': palette.light.border,
-    'background-color': palette.light.light
+    'background-color': palette.surfaceAlt
   };
-  rules[scopeSelector(scope, '.bw_table_striped > tbody > tr:nth-of-type(odd) > *')] = {
-    'background-color': 'rgba(0, 0, 0, 0.05)'
+  rules[_sx(scope, '.bw_table_striped > tbody > tr:nth-of-type(odd) > *')] = {
+    'background-color': palette.surfaceAlt
   };
-  rules[scopeSelector(scope, '.bw_table_hover > tbody > tr:hover > *')] = {
+  rules[_sx(scope, '.bw_table_hover > tbody > tr:hover > *')] = {
     'background-color': palette.primary.focus
   };
-  rules[scopeSelector(scope, '.bw_table_bordered')] = {
+  rules[_sx(scope, '.bw_table_selectable > tbody > tr')] = {
+    'cursor': 'pointer'
+  };
+  rules[_sx(scope, '.bw_table > tbody > tr.bw_table_row_selected > *')] = {
+    'background-color': palette.primary.light
+  };
+  rules[_sx(scope, '.bw_table_bordered')] = {
     'border-color': palette.light.border
   };
-  rules[scopeSelector(scope, '.bw_table caption')] = {
+  rules[_sx(scope, '.bw_table caption')] = {
     'color': palette.secondary.base
   };
 
   return rules;
 }
 
-function generateTabs(scope, palette) {
-  var rules = {};
-  rules[scopeSelector(scope, '.bw_nav_tabs')] = {
+function generateTabs(scope, palette, layout) {
+  var rules = {}, mo = layout.motion;
+  rules[_sx(scope, '.bw_nav_tabs')] = {
     'border-bottom-color': palette.light.border
   };
-  rules[scopeSelector(scope, '.bw_nav_link')] = {
-    'color': palette.secondary.base
+  rules[_sx(scope, '.bw_nav_link')] = {
+    'color': palette.secondary.base,
+    'transition': 'color ' + mo.fast + ' ' + mo.easing + ', border-color ' + mo.fast + ' ' + mo.easing + ', background-color ' + mo.fast + ' ' + mo.easing
   };
-  rules[scopeSelector(scope, '.bw_nav_tabs .bw_nav_link:hover')] = {
+  rules[_sx(scope, '.bw_nav_tabs .bw_nav_link:hover')] = {
     'color': palette.dark.base,
+    'background-color': palette.surfaceAlt,
     'border-bottom-color': palette.light.border
   };
-  rules[scopeSelector(scope, '.bw_nav_tabs .bw_nav_link.active')] = {
+  rules[_sx(scope, '.bw_nav_tabs .bw_nav_link.active')] = {
     'color': palette.primary.base,
+    'background-color': palette.primary.focus,
     'border-bottom': '2px solid ' + palette.primary.base
   };
   return rules;
@@ -495,23 +504,25 @@ function generateTabs(scope, palette) {
 function generateListGroups(scope, palette, layout) {
   var rules = {};
   var sp = layout.spacing;
+  var mo = layout.motion;
 
-  rules[scopeSelector(scope, '.bw_list_group_item')] = {
+  rules[_sx(scope, '.bw_list_group_item')] = {
     'padding': sp.cell,
     'color': palette.dark.base,
     'background-color': palette.surface || '#fff',
-    'border-color': palette.light.border
+    'border-color': palette.light.border,
+    'transition': 'color ' + mo.fast + ' ' + mo.easing + ', background-color ' + mo.fast + ' ' + mo.easing
   };
-  rules[scopeSelector(scope, 'a.bw_list_group_item:hover')] = {
-    'background-color': palette.light.light,
+  rules[_sx(scope, 'a.bw_list_group_item:hover')] = {
+    'background-color': palette.surfaceAlt,
     'color': palette.dark.hover
   };
-  rules[scopeSelector(scope, '.bw_list_group_item.active')] = {
+  rules[_sx(scope, '.bw_list_group_item.active')] = {
     'color': palette.primary.textOn,
     'background-color': palette.primary.base,
     'border-color': palette.primary.base
   };
-  rules[scopeSelector(scope, '.bw_list_group_item.disabled')] = {
+  rules[_sx(scope, '.bw_list_group_item.disabled')] = {
     'color': palette.secondary.base,
     'background-color': palette.surface || '#fff'
   };
@@ -519,28 +530,37 @@ function generateListGroups(scope, palette, layout) {
   return rules;
 }
 
-function generatePagination(scope, palette) {
-  var rules = {};
-  rules[scopeSelector(scope, '.bw_page_link')] = {
+function generatePagination(scope, palette, layout) {
+  var rules = {}, mo = layout.motion, rd = layout.radius;
+  rules[_sx(scope, '.bw_page_item:first-child .bw_page_link')] = {
+    'border-top-left-radius': rd.btn,
+    'border-bottom-left-radius': rd.btn
+  };
+  rules[_sx(scope, '.bw_page_item:last-child .bw_page_link')] = {
+    'border-top-right-radius': rd.btn,
+    'border-bottom-right-radius': rd.btn
+  };
+  rules[_sx(scope, '.bw_page_link')] = {
     'color': palette.primary.base,
     'background-color': palette.surface || '#fff',
-    'border-color': palette.light.border
+    'border-color': palette.light.border,
+    'transition': 'color ' + mo.fast + ' ' + mo.easing + ', background-color ' + mo.fast + ' ' + mo.easing
   };
-  rules[scopeSelector(scope, '.bw_page_link:hover')] = {
+  rules[_sx(scope, '.bw_page_link:hover')] = {
     'color': palette.primary.hover,
-    'background-color': palette.light.light,
+    'background-color': palette.surfaceAlt,
     'border-color': palette.light.border
   };
-  rules[scopeSelector(scope, '.bw_page_link:focus')] = {
+  rules[_sx(scope, '.bw_page_link:focus')] = {
     'outline': '2px solid ' + palette.primary.base,
     'outline-offset': '-2px'
   };
-  rules[scopeSelector(scope, '.bw_page_item.bw_active .bw_page_link')] = {
+  rules[_sx(scope, '.bw_page_item.bw_active .bw_page_link')] = {
     'color': palette.primary.textOn,
     'background-color': palette.primary.base,
     'border-color': palette.primary.base
   };
-  rules[scopeSelector(scope, '.bw_page_item.bw_disabled .bw_page_link')] = {
+  rules[_sx(scope, '.bw_page_item.bw_disabled .bw_page_link')] = {
     'color': palette.secondary.base,
     'background-color': palette.surface || '#fff',
     'border-color': palette.light.border
@@ -550,12 +570,12 @@ function generatePagination(scope, palette) {
 
 function generateProgress(scope, palette) {
   var rules = {};
-  rules[scopeSelector(scope, '.bw_progress')] = {
-    'background-color': palette.light.light,
+  rules[_sx(scope, '.bw_progress')] = {
+    'background-color': palette.surfaceAlt,
     'box-shadow': 'inset 0 1px 2px rgba(0,0,0,.1)'
   };
-  rules[scopeSelector(scope, '.bw_progress_bar')] = {
-    'color': '#fff',
+  rules[_sx(scope, '.bw_progress_bar')] = {
+    'color': palette.primary.textOn,
     'background-color': palette.primary.base,
     'box-shadow': 'inset 0 -1px 0 rgba(0,0,0,.15)'
   };
@@ -574,7 +594,7 @@ function generateResetThemed(scope, palette) {
     'color': palette.dark.base,
     'background-color': bg
   };
-  rules[scopeSelector(scope, 'body')] = baseReset;
+  rules[_sx(scope, 'body')] = baseReset;
   // Also apply to the scope element itself so themes work on any container, not just body
   if (scope) {
     rules['.' + scope] = baseReset;
@@ -582,18 +602,27 @@ function generateResetThemed(scope, palette) {
   return rules;
 }
 
-function generateBreadcrumbThemed(scope, palette) {
-  var rules = {};
-  rules[scopeSelector(scope, '.bw_breadcrumb_item + .bw_breadcrumb_item::before')] = {
-    'color': palette.secondary.base
+function generateBreadcrumbThemed(scope, palette, layout) {
+  var rules = {}, mo = layout.motion;
+  rules[_sx(scope, '.bw_breadcrumb')] = {
+    'background-color': palette.surfaceAlt,
+    'padding': '0.625rem 1rem',
+    'border-radius': layout.radius.btn
   };
-  rules[scopeSelector(scope, '.bw_breadcrumb_item.active')] = {
+  rules[_sx(scope, '.bw_breadcrumb_item + .bw_breadcrumb_item::before')] = {
     'color': palette.secondary.base
   };
-  rules[scopeSelector(scope, '.bw_breadcrumb_item a:hover')] = {
+  rules[_sx(scope, '.bw_breadcrumb_item a')] = {
+    'color': palette.primary.base,
+    'transition': 'color ' + mo.fast + ' ' + mo.easing
+  };
+  rules[_sx(scope, '.bw_breadcrumb_item a:hover')] = {
     'color': palette.primary.hover,
     'text-decoration': 'underline'
   };
+  rules[_sx(scope, '.bw_breadcrumb_item.active')] = {
+    'color': palette.dark.base
+  };
   return rules;
 }
 
@@ -601,11 +630,11 @@ function generateBreadcrumbThemed(scope, palette) {
 
 function generateCloseButtonThemed(scope, palette) {
   var rules = {};
-  rules[scopeSelector(scope, '.bw_close')] = {
+  rules[_sx(scope, '.bw_close')] = {
     'color': palette.dark.base,
     'opacity': '0.5'
   };
-  rules[scopeSelector(scope, '.bw_close:focus')] = {
+  rules[_sx(scope, '.bw_close:focus')] = {
     'box-shadow': '0 0 0 0.25rem ' + palette.primary.focus
   };
   return rules;
@@ -613,82 +642,94 @@ function generateCloseButtonThemed(scope, palette) {
 
 function generateSectionsThemed(scope, palette) {
   var rules = {};
-  rules[scopeSelector(scope, '.bw_section_subtitle')] = {
+  rules[_sx(scope, '.bw_section_subtitle')] = {
     'color': palette.secondary.base
   };
-  rules[scopeSelector(scope, '.bw_feature_description')] = {
+  rules[_sx(scope, '.bw_feature_description')] = {
     'color': palette.secondary.base
   };
-  rules[scopeSelector(scope, '.bw_cta_description')] = {
+  rules[_sx(scope, '.bw_cta_description')] = {
     'color': palette.secondary.base
   };
   return rules;
 }
 
-function generateAccordionThemed(scope, palette) {
+function generateAccordionThemed(scope, palette, layout) {
   var rules = {};
-  rules[scopeSelector(scope, '.bw_accordion_item')] = {
+  var rd = layout ? layout.radius : { card: '8px' };
+  rules[_sx(scope, '.bw_accordion_item')] = {
     'background-color': palette.surface || '#fff',
     'border-color': palette.light.border
   };
-  rules[scopeSelector(scope, '.bw_accordion_button')] = {
+  rules[_sx(scope, '.bw_accordion_item:first-child')] = {
+    'border-top-left-radius': rd.card,
+    'border-top-right-radius': rd.card
+  };
+  rules[_sx(scope, '.bw_accordion_item:last-child')] = {
+    'border-bottom-left-radius': rd.card,
+    'border-bottom-right-radius': rd.card
+  };
+  rules[_sx(scope, '.bw_accordion_button')] = {
     'color': palette.dark.base
   };
-  rules[scopeSelector(scope, '.bw_accordion_button:not(.bw_collapsed)')] = {
+  rules[_sx(scope, '.bw_accordion_button:not(.bw_collapsed)')] = {
     'color': palette.primary.darkText,
-    'background-color': palette.primary.light
+    'background-color': palette.primary.light,
+    'border-left': '3px solid ' + palette.primary.base
   };
-  rules[scopeSelector(scope, '.bw_accordion_button:hover')] = {
-    'background-color': palette.light.light
+  rules[_sx(scope, '.bw_accordion_button:hover')] = {
+    'background-color': palette.surfaceAlt
   };
-  rules[scopeSelector(scope, '.bw_accordion_button:not(.bw_collapsed):hover')] = {
-    'background-color': palette.primary.hover
+  rules[_sx(scope, '.bw_accordion_button:not(.bw_collapsed):hover')] = {
+    'background-color': palette.primary.base,
+    'color': palette.primary.textOn
   };
-  rules[scopeSelector(scope, '.bw_accordion_button:focus-visible')] = {
+  rules[_sx(scope, '.bw_accordion_button:focus-visible')] = {
     'box-shadow': '0 0 0 0.2rem ' + palette.primary.focus
   };
-  rules[scopeSelector(scope, '.bw_accordion_body')] = {
-    'border-top': '1px solid ' + palette.light.border
+  rules[_sx(scope, '.bw_accordion_body')] = {
+    'border-top': '1px solid ' + palette.light.border,
+    'background-color': palette.surfaceAlt
   };
   return rules;
 }
 
 function generateCarouselThemed(scope, palette) {
   var rules = {};
-  rules[scopeSelector(scope, '.bw_carousel')] = {
-    'background-color': palette.light.light
+  rules[_sx(scope, '.bw_carousel')] = {
+    'background-color': palette.surfaceAlt
   };
-  rules[scopeSelector(scope, '.bw_carousel_indicator.active')] = {
+  rules[_sx(scope, '.bw_carousel_indicator.active')] = {
     'background-color': palette.primary.base
   };
-  rules[scopeSelector(scope, '.bw_carousel_control')] = {
-    'background-color': 'rgba(0,0,0,0.4)',
-    'color': '#fff'
+  rules[_sx(scope, '.bw_carousel_control')] = {
+    'background-color': palette.dark.base,
+    'color': palette.dark.textOn
   };
-  rules[scopeSelector(scope, '.bw_carousel_control:hover')] = {
-    'background-color': 'rgba(0,0,0,0.6)'
+  rules[_sx(scope, '.bw_carousel_control:hover')] = {
+    'background-color': palette.dark.hover
   };
-  rules[scopeSelector(scope, '.bw_carousel_caption')] = {
-    'background': 'linear-gradient(transparent, rgba(0,0,0,0.6))',
-    'color': '#fff'
+  rules[_sx(scope, '.bw_carousel_caption')] = {
+    'background': 'linear-gradient(transparent, ' + palette.dark.base + ')',
+    'color': palette.dark.textOn
   };
   return rules;
 }
 
 function generateModalThemed(scope, palette, layout) {
   var rules = {};
-  rules[scopeSelector(scope, '.bw_modal_content')] = {
+  rules[_sx(scope, '.bw_modal_content')] = {
     'background-color': palette.surface || '#fff',
     'border-color': palette.light.border,
     'box-shadow': layout.elevation.lg
   };
-  rules[scopeSelector(scope, '.bw_modal_header')] = {
+  rules[_sx(scope, '.bw_modal_header')] = {
     'border-bottom-color': palette.light.border
   };
-  rules[scopeSelector(scope, '.bw_modal_footer')] = {
+  rules[_sx(scope, '.bw_modal_footer')] = {
     'border-top-color': palette.light.border
   };
-  rules[scopeSelector(scope, '.bw_modal_title')] = {
+  rules[_sx(scope, '.bw_modal_title')] = {
     'color': palette.dark.base
   };
   return rules;
@@ -696,13 +737,13 @@ function generateModalThemed(scope, palette, layout) {
 
 function generateToastThemed(scope, palette, layout) {
   var rules = {};
-  rules[scopeSelector(scope, '.bw_toast')] = {
+  rules[_sx(scope, '.bw_toast')] = {
     'background-color': palette.surface || '#fff',
-    'border-color': 'rgba(0,0,0,0.1)',
+    'border-color': palette.light.border,
     'box-shadow': layout.elevation.lg
   };
-  rules[scopeSelector(scope, '.bw_toast_header')] = {
-    'border-bottom-color': 'rgba(0,0,0,0.05)'
+  rules[_sx(scope, '.bw_toast_header')] = {
+    'border-bottom-color': palette.light.border
   };
   // Variant toast borders handled by palette class
   return rules;
@@ -710,22 +751,23 @@ function generateToastThemed(scope, palette, layout) {
 
 function generateDropdownThemed(scope, palette, layout) {
   var rules = {};
-  rules[scopeSelector(scope, '.bw_dropdown_menu')] = {
+  rules[_sx(scope, '.bw_dropdown_menu')] = {
     'background-color': palette.surface || '#fff',
     'border-color': palette.light.border,
     'box-shadow': layout.elevation.md
   };
-  rules[scopeSelector(scope, '.bw_dropdown_item')] = {
-    'color': palette.dark.base
+  rules[_sx(scope, '.bw_dropdown_item')] = {
+    'color': palette.dark.base,
+    'transition': 'background-color ' + layout.motion.fast + ' ' + layout.motion.easing
   };
-  rules[scopeSelector(scope, '.bw_dropdown_item:hover')] = {
+  rules[_sx(scope, '.bw_dropdown_item:hover')] = {
     'color': palette.dark.hover,
-    'background-color': palette.light.light
+    'background-color': palette.surfaceAlt
   };
-  rules[scopeSelector(scope, '.bw_dropdown_item.disabled')] = {
+  rules[_sx(scope, '.bw_dropdown_item.disabled')] = {
     'color': palette.secondary.base
   };
-  rules[scopeSelector(scope, '.bw_dropdown_divider')] = {
+  rules[_sx(scope, '.bw_dropdown_divider')] = {
     'border-top-color': palette.light.border
   };
   return rules;
@@ -733,15 +775,15 @@ function generateDropdownThemed(scope, palette, layout) {
 
 function generateSwitchThemed(scope, palette) {
   var rules = {};
-  rules[scopeSelector(scope, '.bw_form_switch .bw_switch_input')] = {
+  rules[_sx(scope, '.bw_form_switch .bw_switch_input')] = {
     'background-color': palette.secondary.base,
     'border-color': palette.secondary.base
   };
-  rules[scopeSelector(scope, '.bw_form_switch .bw_switch_input:checked')] = {
+  rules[_sx(scope, '.bw_form_switch .bw_switch_input:checked')] = {
     'background-color': palette.primary.base,
     'border-color': palette.primary.base
   };
-  rules[scopeSelector(scope, '.bw_form_switch .bw_switch_input:focus')] = {
+  rules[_sx(scope, '.bw_form_switch .bw_switch_input:focus')] = {
     'box-shadow': '0 0 0 0.25rem ' + palette.primary.focus
   };
   return rules;
@@ -749,88 +791,102 @@ function generateSwitchThemed(scope, palette) {
 
 function generateSkeletonThemed(scope, palette) {
   var rules = {};
-  rules[scopeSelector(scope, '.bw_skeleton')] = {
-    'background': 'linear-gradient(90deg, ' + palette.light.border + ' 25%, ' + palette.light.light + ' 37%, ' + palette.light.border + ' 63%)'
+  rules[_sx(scope, '.bw_skeleton')] = {
+    'background': 'linear-gradient(90deg, ' + palette.light.border + ' 25%, ' + palette.surfaceAlt + ' 37%, ' + palette.light.border + ' 63%)'
   };
   return rules;
 }
 
 // generateAvatarThemed: removed — palette class on root handles variants
 
-function generateStatCardThemed(scope, palette) {
-  var rules = {};
+function generateStatCardThemed(scope, palette, layout) {
+  var rules = {}, mo = layout.motion, el = layout.elevation, rd = layout.radius;
+  rules[_sx(scope, '.bw_stat_card')] = {
+    'background-color': palette.surface || '#fff',
+    'color': palette.dark.base,
+    'border': '1px solid ' + palette.light.border,
+    'border-radius': rd.card,
+    'box-shadow': el.sm,
+    'transition': 'box-shadow ' + mo.fast + ' ' + mo.easing + ', transform ' + mo.fast + ' ' + mo.easing
+  };
+  rules[_sx(scope, '.bw_stat_card:hover')] = { 'box-shadow': el.md };
   // Variant border colors handled by palette class
-  rules[scopeSelector(scope, '.bw_stat_change_up')] = { 'color': palette.success.base };
-  rules[scopeSelector(scope, '.bw_stat_change_down')] = { 'color': palette.danger.base };
+  rules[_sx(scope, '.bw_stat_change_up')] = { 'color': palette.success.base };
+  rules[_sx(scope, '.bw_stat_change_down')] = { 'color': palette.danger.base };
   return rules;
 }
 
 function generateTimelineThemed(scope, palette) {
   var rules = {};
-  rules[scopeSelector(scope, '.bw_timeline::before')] = { 'background-color': palette.light.border };
+  rules[_sx(scope, '.bw_timeline::before')] = { 'background-color': palette.light.border };
   // Variant marker colors handled by palette class
-  rules[scopeSelector(scope, '.bw_timeline_date')] = { 'color': palette.secondary.base };
+  rules[_sx(scope, '.bw_timeline_date')] = { 'color': palette.secondary.base };
   return rules;
 }
 
 function generateStepperThemed(scope, palette) {
   var rules = {};
-  rules[scopeSelector(scope, '.bw_step_indicator')] = {
-    'background-color': palette.light.light,
+  rules[_sx(scope, '.bw_step_indicator')] = {
+    'background-color': palette.surfaceAlt,
     'border': '2px solid ' + palette.light.border,
     'color': palette.secondary.base
   };
-  rules[scopeSelector(scope, '.bw_step + .bw_step::before')] = { 'background-color': palette.light.border };
-  rules[scopeSelector(scope, '.bw_step_active .bw_step_indicator')] = {
+  rules[_sx(scope, '.bw_step + .bw_step::before')] = { 'background-color': palette.light.border };
+  rules[_sx(scope, '.bw_step_active .bw_step_indicator')] = {
     'background-color': palette.primary.base,
     'color': palette.primary.textOn
   };
-  rules[scopeSelector(scope, '.bw_step_active .bw_step_label')] = {
+  rules[_sx(scope, '.bw_step_active .bw_step_label')] = {
     'color': palette.dark.base,
     'font-weight': '600'
   };
-  rules[scopeSelector(scope, '.bw_step_completed .bw_step_indicator')] = {
+  rules[_sx(scope, '.bw_step_completed .bw_step_indicator')] = {
     'background-color': palette.primary.base,
     'color': palette.primary.textOn
   };
-  rules[scopeSelector(scope, '.bw_step_completed .bw_step_label')] = { 'color': palette.primary.base };
-  rules[scopeSelector(scope, '.bw_step_completed + .bw_step::before')] = { 'background-color': palette.primary.base };
+  rules[_sx(scope, '.bw_step_completed .bw_step_label')] = { 'color': palette.primary.base };
+  rules[_sx(scope, '.bw_step_completed + .bw_step::before')] = { 'background-color': palette.primary.base };
   return rules;
 }
 
 function generateChipInputThemed(scope, palette) {
   var rules = {};
-  rules[scopeSelector(scope, '.bw_chip_input')] = { 'border-color': palette.light.border };
-  rules[scopeSelector(scope, '.bw_chip_input:focus-within')] = {
+  rules[_sx(scope, '.bw_chip_input')] = {
+    'border-color': palette.light.border,
+    'background-color': palette.surface || '#fff',
+    'color': palette.dark.base
+  };
+  rules[_sx(scope, '.bw_chip_input:focus-within')] = {
     'border-color': palette.primary.base,
     'box-shadow': '0 0 0 0.2rem ' + palette.primary.focus
   };
-  rules[scopeSelector(scope, '.bw_chip')] = {
-    'background-color': palette.light.light,
+  rules[_sx(scope, '.bw_chip')] = {
+    'background-color': palette.surfaceAlt,
     'color': palette.dark.base
   };
-  rules[scopeSelector(scope, '.bw_chip_remove:hover')] = {
+  rules[_sx(scope, '.bw_chip_remove:hover')] = {
     'color': palette.danger.base,
     'background-color': palette.danger.light
   };
   return rules;
 }
 
-function generateFileUploadThemed(scope, palette) {
-  var rules = {};
-  rules[scopeSelector(scope, '.bw_file_upload')] = {
+function generateFileUploadThemed(scope, palette, layout) {
+  var rules = {}, mo = layout.motion;
+  rules[_sx(scope, '.bw_file_upload')] = {
     'border-color': palette.light.border,
-    'background-color': palette.light.light
+    'background-color': palette.surfaceAlt,
+    'transition': 'border-color ' + mo.fast + ' ' + mo.easing + ', background-color ' + mo.fast + ' ' + mo.easing
   };
-  rules[scopeSelector(scope, '.bw_file_upload:hover')] = {
+  rules[_sx(scope, '.bw_file_upload:hover')] = {
     'border-color': palette.primary.base,
     'background-color': palette.primary.light
   };
-  rules[scopeSelector(scope, '.bw_file_upload:focus')] = {
+  rules[_sx(scope, '.bw_file_upload:focus')] = {
     'outline': '2px solid ' + palette.primary.base,
     'outline-offset': '2px'
   };
-  rules[scopeSelector(scope, '.bw_file_upload.bw_file_upload_active')] = {
+  rules[_sx(scope, '.bw_file_upload.bw_file_upload_active')] = {
     'border-color': palette.primary.base,
     'background-color': palette.primary.light,
     'border-style': 'solid'
@@ -840,35 +896,73 @@ function generateFileUploadThemed(scope, palette) {
 
 function generateRangeThemed(scope, palette) {
   var rules = {};
-  rules[scopeSelector(scope, '.bw_range')] = { 'background-color': palette.light.border };
-  rules[scopeSelector(scope, '.bw_range::-webkit-slider-thumb')] = {
+  rules[_sx(scope, '.bw_range')] = { 'background-color': palette.light.border };
+  rules[_sx(scope, '.bw_range::-webkit-slider-thumb')] = {
     'background-color': palette.primary.base,
-    'border-color': '#fff',
+    'border-color': palette.surface || '#fff',
     'box-shadow': '0 1px 3px rgba(0,0,0,0.2)',
     'transition': 'background-color 0.15s ease-out, transform 0.15s ease-out'
   };
-  rules[scopeSelector(scope, '.bw_range::-moz-range-thumb')] = {
+  rules[_sx(scope, '.bw_range::-moz-range-thumb')] = {
     'background-color': palette.primary.base,
-    'border-color': '#fff',
+    'border-color': palette.surface || '#fff',
     'box-shadow': '0 1px 3px rgba(0,0,0,0.2)'
   };
   return rules;
 }
 
-function generateSearchThemed(scope, palette) {
-  var rules = {};
-  rules[scopeSelector(scope, '.bw_search_clear:hover')] = { 'color': palette.dark.base };
+function generateTooltipThemed(scope, palette, layout) {
+  var rules = {}, sp = layout.spacing, rd = layout.radius, el = layout.elevation, mo = layout.motion;
+  rules[_sx(scope, '.bw_tooltip')] = {
+    'background-color': palette.dark.base, 'color': palette.dark.textOn,
+    'padding': sp.input, 'border-radius': rd.badge, 'box-shadow': el.md,
+    'transition': 'opacity ' + mo.fast + ' ' + mo.easing + ', transform ' + mo.fast + ' ' + mo.easing
+  };
+  return rules;
+}
+
+function generatePopoverThemed(scope, palette, layout) {
+  var rules = {}, sp = layout.spacing, rd = layout.radius, el = layout.elevation, mo = layout.motion;
+  rules[_sx(scope, '.bw_popover')] = {
+    'background-color': palette.surface || '#fff', 'color': palette.dark.base,
+    'border': '1px solid ' + palette.light.border, 'border-radius': rd.card, 'box-shadow': el.lg,
+    'transition': 'opacity ' + mo.fast + ' ' + mo.easing + ', transform ' + mo.fast + ' ' + mo.easing
+  };
+  rules[_sx(scope, '.bw_popover_header')] = {
+    'background-color': palette.surfaceAlt, 'border-bottom': '1px solid ' + palette.light.border,
+    'padding': sp.input
+  };
+  rules[_sx(scope, '.bw_popover_body')] = { 'padding': sp.card };
   return rules;
 }
 
-function generateCodeDemoThemed(scope, palette) {
+function generateSearchThemed(scope, palette, layout) {
+  var rules = {}, mo = layout.motion;
+  rules[_sx(scope, '.bw_search_input')] = {
+    'background-color': palette.surface || '#fff',
+    'color': palette.dark.base
+  };
+  rules[_sx(scope, '.bw_search_clear')] = {
+    'transition': 'color ' + mo.fast + ' ' + mo.easing + ', background-color ' + mo.fast + ' ' + mo.easing
+  };
+  rules[_sx(scope, '.bw_search_clear:hover')] = { 'color': palette.dark.base };
+  return rules;
+}
+
+function generateCodeDemoThemed(scope, palette, layout) {
   var rules = {};
-  rules[scopeSelector(scope, '.bw_code_copy_btn_copied')] = {
+  var rd = layout ? layout.radius : { card: '0.375rem' };
+  rules[_sx(scope, '.bw_code_demo')] = {
+    'background-color': palette.surface || '#fff',
+    'color': palette.dark.base,
+    'border-radius': rd.card
+  };
+  rules[_sx(scope, '.bw_code_copy_btn_copied')] = {
     'background': palette.success.base,
     'color': palette.success.textOn,
     'border-color': palette.success.base
   };
-  rules[scopeSelector(scope, '.bw_copy_btn:hover')] = {
+  rules[_sx(scope, '.bw_copy_btn:hover')] = {
     'background': 'rgba(255,255,255,0.2)',
     'color': '#fff'
   };
@@ -878,7 +972,7 @@ function generateCodeDemoThemed(scope, palette) {
 function generateNavPillsThemed(scope, palette, layout) {
   var rules = {};
   var rd = layout.radius;
-  rules[scopeSelector(scope, '.bw_nav_pills .bw_nav_link')] = { 'border-radius': rd.btn };
+  rules[_sx(scope, '.bw_nav_pills .bw_nav_link')] = { 'border-radius': rd.btn };
   return rules;
 }
 
@@ -904,21 +998,21 @@ function generatePaletteClasses(scope, palette) {
     var s = palette[k];
 
     // --- Root palette class: sets default bg/color/border ---
-    rules[scopeSelector(scope, '.bw_' + k)] = {
+    rules[_sx(scope, '.bw_' + k)] = {
       'background-color': s.base,
       'color': s.textOn,
       'border-color': s.base
     };
 
     // --- Pseudo-states (shared across all components) ---
-    rules[scopeSelector(scope, '.bw_' + k + ':hover')] = {
+    rules[_sx(scope, '.bw_' + k + ':hover')] = {
       'background-color': s.hover,
       'border-color': s.active
     };
-    rules[scopeSelector(scope, '.bw_' + k + ':active')] = {
+    rules[_sx(scope, '.bw_' + k + ':active')] = {
       'background-color': s.active
     };
-    rules[scopeSelector(scope, '.bw_' + k + ':focus-visible')] = {
+    rules[_sx(scope, '.bw_' + k + ':focus-visible')] = {
       'box-shadow': '0 0 0 3px ' + s.focus,
       'outline': 'none'
     };
@@ -926,70 +1020,99 @@ function generatePaletteClasses(scope, palette) {
     // --- Component-specific overrides ---
 
     // Alerts: light bg, dark text, subtle border
-    rules[scopeSelector(scope, '.bw_alert.bw_' + k)] = {
+    rules[_sx(scope, '.bw_alert.bw_' + k)] = {
       'background-color': s.light,
       'color': s.darkText,
       'border-color': s.border
     };
 
     // Toast: inherit bg, left border accent
-    rules[scopeSelector(scope, '.bw_toast.bw_' + k)] = {
+    rules[_sx(scope, '.bw_toast.bw_' + k)] = {
       'background-color': 'inherit',
       'color': 'inherit',
       'border-left': '4px solid ' + s.base
     };
 
     // Stat card: inherit bg, left border accent
-    rules[scopeSelector(scope, '.bw_stat_card.bw_' + k)] = {
+    rules[_sx(scope, '.bw_stat_card.bw_' + k)] = {
       'background-color': 'inherit',
       'color': 'inherit',
       'border-left-color': s.base
     };
 
     // Card accent: left border accent, inherit bg
-    rules[scopeSelector(scope, '.bw_card.bw_' + k)] = {
+    rules[_sx(scope, '.bw_card.bw_' + k)] = {
       'background-color': 'inherit',
       'color': 'inherit',
       'border-left': '4px solid ' + s.base
     };
 
     // Timeline marker: colored dot
-    rules[scopeSelector(scope, '.bw_timeline_marker.bw_' + k)] = {
+    rules[_sx(scope, '.bw_timeline_marker.bw_' + k)] = {
       'box-shadow': '0 0 0 2px ' + s.base
     };
 
-    // Spinner: text color only, transparent bg
-    rules[scopeSelector(scope, '.bw_spinner_border.bw_' + k + ',\n' + scopeSelector(scope, '.bw_spinner_grow.bw_' + k))] = {
+    // Spinner: set color, re-apply border pattern so the root palette class
+    // border-color doesn't fill in the transparent gap that makes it spin.
+    // Also neutralize hover/active which would override border-right-color.
+    rules[_sx(scope, '.bw_spinner_border.bw_' + k)] = {
       'background-color': 'transparent',
       'color': s.base,
-      'border-color': 'currentColor'
+      'border-color': s.base,
+      'border-right-color': 'transparent'
+    };
+    rules[_sx(scope, '.bw_spinner_border.bw_' + k + ':hover')] = {
+      'background-color': 'transparent',
+      'border-color': s.base,
+      'border-right-color': 'transparent'
+    };
+    rules[_sx(scope, '.bw_spinner_grow.bw_' + k)] = {
+      'background-color': s.base,
+      'color': s.base
     };
 
     // Outline button: transparent bg, colored border+text, solid on hover
-    rules[scopeSelector(scope, '.bw_btn_outline.bw_' + k)] = {
+    rules[_sx(scope, '.bw_btn_outline.bw_' + k)] = {
       'background-color': 'transparent',
       'color': s.base,
       'border-color': s.base
     };
-    rules[scopeSelector(scope, '.bw_btn_outline.bw_' + k + ':hover')] = {
+    rules[_sx(scope, '.bw_btn_outline.bw_' + k + ':hover')] = {
       'background-color': s.base,
       'color': s.textOn
     };
 
     // Hero: gradient background
-    rules[scopeSelector(scope, '.bw_hero.bw_' + k)] = {
+    rules[_sx(scope, '.bw_hero.bw_' + k)] = {
       'background': 'linear-gradient(135deg, ' + s.base + ' 0%, ' + s.hover + ' 100%)',
       'color': s.textOn
     };
 
-    // Progress bar: white text on colored bg (default is fine, just ensure text)
-    rules[scopeSelector(scope, '.bw_progress_bar.bw_' + k)] = {
-      'color': '#fff'
+    // Progress bar: contrasting text on colored bg
+    rules[_sx(scope, '.bw_progress_bar.bw_' + k)] = {
+      'color': s.textOn
+    };
+
+    // Background utility: .bw_bg_primary, .bw_bg_secondary, etc.
+    rules[_sx(scope, '.bw_bg_' + k)] = {
+      'background-color': s.base,
+      'color': s.textOn
+    };
+
+    // Text color utility: .bw_text_primary, .bw_text_secondary, etc.
+    rules[_sx(scope, '.bw_text_' + k)] = {
+      'color': s.base
     };
   });
 
-  // Text muted
-  rules[scopeSelector(scope, '.bw_text_muted')] = { 'color': palette.secondary.base };
+  // Text muted — always a neutral gray, never a brand color
+  rules[_sx(scope, '.bw_text_muted')] = { 'color': '#6c757d' };
+
+  // Common bg/text utilities that aren't per-variant
+  rules[_sx(scope, '.bw_bg_dark')] = { 'background-color': '#212529', 'color': '#f8f9fa' };
+  rules[_sx(scope, '.bw_bg_light')] = { 'background-color': '#f8f9fa', 'color': '#212529' };
+  rules[_sx(scope, '.bw_text_light')] = { 'color': '#f8f9fa' };
+  rules[_sx(scope, '.bw_text_dark')] = { 'color': '#212529' };
 
   return rules;
 }
@@ -1011,30 +1134,32 @@ export function generateThemedCSS(scopeName, palette, layout) {
     generateAlerts(scopeName, palette, layout),
     generateCards(scopeName, palette, layout),
     generateForms(scopeName, palette, layout),
-    generateNavigation(scopeName, palette),
+    generateNavigation(scopeName, palette, layout),
     generateTables(scopeName, palette, layout),
-    generateTabs(scopeName, palette),
+    generateTabs(scopeName, palette, layout),
     generateListGroups(scopeName, palette, layout),
-    generatePagination(scopeName, palette),
+    generatePagination(scopeName, palette, layout),
     generateProgress(scopeName, palette),
-    generateBreadcrumbThemed(scopeName, palette),
+    generateBreadcrumbThemed(scopeName, palette, layout),
     generateCloseButtonThemed(scopeName, palette),
     generateSectionsThemed(scopeName, palette),
-    generateAccordionThemed(scopeName, palette),
+    generateAccordionThemed(scopeName, palette, layout),
     generateCarouselThemed(scopeName, palette),
     generateModalThemed(scopeName, palette, layout),
     generateToastThemed(scopeName, palette, layout),
     generateDropdownThemed(scopeName, palette, layout),
     generateSwitchThemed(scopeName, palette),
     generateSkeletonThemed(scopeName, palette),
-    generateStatCardThemed(scopeName, palette),
+    generateStatCardThemed(scopeName, palette, layout),
     generateTimelineThemed(scopeName, palette),
     generateStepperThemed(scopeName, palette),
     generateChipInputThemed(scopeName, palette),
-    generateFileUploadThemed(scopeName, palette),
+    generateFileUploadThemed(scopeName, palette, layout),
     generateRangeThemed(scopeName, palette),
-    generateSearchThemed(scopeName, palette),
-    generateCodeDemoThemed(scopeName, palette),
+    generateSearchThemed(scopeName, palette, layout),
+    generateTooltipThemed(scopeName, palette, layout),
+    generatePopoverThemed(scopeName, palette, layout),
+    generateCodeDemoThemed(scopeName, palette, layout),
     generateNavPillsThemed(scopeName, palette, layout),
     generatePaletteClasses(scopeName, palette)
   );
@@ -1259,6 +1384,8 @@ var structuralRules = {
     },
     '.bw_table caption': { 'font-size': '0.875rem', 'caption-side': 'bottom' },
     '.bw_table_bordered > :not(caption) > * > *': { 'border-width': '1px', 'border-style': 'solid' },
+    '.bw_table_selectable > tbody > tr': { 'cursor': 'pointer' },
+    '.bw_table > tbody > tr.bw_table_row_selected > *': { 'background-color': 'rgba(0, 102, 102, 0.1)' },
     '.bw_table_responsive': { 'overflow-x': 'auto', '-webkit-overflow-scrolling': 'touch' }
   },
 
@@ -1312,6 +1439,7 @@ var structuralRules = {
     '.bw_nav_tabs .bw_nav_item': { 'margin-bottom': '-2px' },
     '.bw_nav_link': {
       'display': 'block', 'font-size': '0.875rem', 'font-weight': '500',
+      'padding': '0.625rem 1rem',
       'text-decoration': 'none', 'cursor': 'pointer',
       'border': 'none', 'background': 'transparent', 'font-family': 'inherit'
     },
@@ -1346,10 +1474,11 @@ var structuralRules = {
     '.bw_page_item': { 'display': 'list-item', 'list-style': 'none' },
     '.bw_page_link': {
       'position': 'relative', 'display': 'block', 'padding': '0.375rem 0.75rem',
-      'margin-left': '-1px', 'line-height': '1.25', 'text-decoration': 'none'
+      'margin-left': '-1px', 'line-height': '1.25', 'text-decoration': 'none',
+      'border': '1px solid transparent', 'cursor': 'pointer',
+      'font-family': 'inherit', 'font-size': 'inherit', 'background': 'none'
     },
-    '.bw_page_item:first-child .bw_page_link': { 'margin-left': '0', 'border-top-left-radius': '0.375rem', 'border-bottom-left-radius': '0.375rem' },
-    '.bw_page_item:last-child .bw_page_link': { 'border-top-right-radius': '0.375rem', 'border-bottom-right-radius': '0.375rem' },
+    '.bw_page_item:first-child .bw_page_link': { 'margin-left': '0' },
     '.bw_page_link:focus-visible': { 'z-index': '3', 'outline': '2px solid currentColor', 'outline-offset': '-2px' }
   },
 
@@ -1506,6 +1635,7 @@ var structuralRules = {
     '.bw_accordion_header': { 'margin': '0' },
     '.bw_accordion_button': {
       'position': 'relative', 'display': 'flex', 'align-items': 'center', 'width': '100%',
+      'padding': '0.875rem 1.25rem',
       'font-size': '1rem', 'font-weight': '500', 'text-align': 'left',
       'background-color': 'transparent', 'border': '0', 'overflow-anchor': 'none', 'cursor': 'pointer',
       'font-family': 'inherit'
@@ -1517,10 +1647,9 @@ var structuralRules = {
       'background-repeat': 'no-repeat', 'background-size': '1.25rem'
     },
     '.bw_accordion_button:not(.bw_collapsed)::after': { 'transform': 'rotate(-180deg)' },
-    '.bw_accordion_collapse': { 'max-height': '0', 'overflow': 'hidden' },
-    '.bw_accordion_collapse.bw_collapse_show': { 'max-height': 'none' },
-    '.bw_accordion_item:first-child': { 'border-top-left-radius': '8px', 'border-top-right-radius': '8px' },
-    '.bw_accordion_item:last-child': { 'border-bottom-left-radius': '8px', 'border-bottom-right-radius': '8px' }
+    '.bw_accordion_body': { 'padding': '1rem 1.25rem' },
+    '.bw_accordion_collapse': { 'max-height': '0', 'overflow': 'hidden', 'transition': 'max-height 0.3s ease' },
+    '.bw_accordion_collapse.bw_collapse_show': { 'max-height': 'none' }
   },
 
   // ---- Carousel ----
@@ -1666,7 +1795,13 @@ var structuralRules = {
 
   // ---- Stat card ----
   statCard: {
-    '.bw_stat_card': { 'border-left': '4px solid transparent' },
+    '.bw_stat_card': {
+      'padding': '1.25rem',
+      'border-left': '4px solid transparent',
+      'border-radius': '0.375rem',
+      'background-color': 'inherit',
+      'transition': 'transform 0.15s ease'
+    },
     '.bw_stat_card:hover': { 'transform': 'translateY(-1px)' },
     '.bw_stat_icon': { 'font-size': '1.5rem', 'margin-bottom': '0.5rem' },
     '.bw_stat_value': { 'font-size': '2rem', 'font-weight': '700', 'line-height': '1.2' },
@@ -2029,6 +2164,20 @@ function generateUtilityRules() {
   rules['.list-inline-item'] = { 'display': 'inline-block' };
   rules['.list-inline-item:not(:last-child)'] = { 'margin-right': '.5rem' };
 
+  // Typography — bw_ prefixed utilities via loops
+  var _imp = function(p, v) { var o = {}; o[p] = v + ' !important'; return o; };
+  [['fs',{'xs':'0.75rem','sm':'0.875rem','base':'1rem','lg':'1.125rem','xl':'1.25rem','2xl':'1.5rem'},'font-size'],
+   ['fw',{light:'300',normal:'400',medium:'500',semibold:'600',bold:'700'},'font-weight'],
+   ['lh',{tight:'1.25',normal:'1.5',relaxed:'1.75'},'line-height']
+  ].forEach(function(d) { for (var dk in d[1]) rules['.bw_'+d[0]+'_'+dk] = _imp(d[2], d[1][dk]); });
+
+  // Flex utilities
+  rules['.bw_flex'] = { 'display': 'flex' };
+  rules['.bw_flex_column'] = { 'flex-direction': 'column' };
+  rules['.bw_flex_wrap'] = { 'flex-wrap': 'wrap' };
+  rules['.bw_flex_center'] = { 'display': 'flex', 'align-items': 'center', 'justify-content': 'center' };
+  for (var gk in spacingValues) rules['.bw_gap_' + gk] = { 'gap': spacingValues[gk] + ' !important' };
+
   // Visibility
   rules['.bw_visible, .visible'] = { 'visibility': 'visible !important' };
   rules['.bw_invisible, .invisible'] = { 'visibility': 'hidden !important' };
@@ -2089,6 +2238,26 @@ export function getStructuralStyles() {
   return getStructuralCSS();
 }
 
+/**
+ * Get CSS reset rules only (box-sizing, html/body font, reduced-motion).
+ * Separate from themed/structural rules for independent injection.
+ * @returns {Object} CSS rules object for the reset layer
+ */
+export function getResetStyles() {
+  var rules = {};
+  Object.assign(rules, structuralRules.base);
+  // Include reduced-motion preference
+  rules['@media (prefers-reduced-motion: reduce)'] = {
+    '*, *::before, *::after': {
+      'animation-duration': '0.01ms !important',
+      'animation-iteration-count': '1 !important',
+      'transition-duration': '0.01ms !important',
+      'scroll-behavior': 'auto !important'
+    }
+  };
+  return rules;
+}
+
 // =========================================================================
 // defaultStyles — backward-compatible categorized view
 // =========================================================================
@@ -2126,7 +2295,7 @@ export function getAllStyles() {
 }
 
 // =========================================================================
-// Theme configuration object (deprecated — use generateTheme())
+// Theme configuration object (deprecated — use makeStyles())
 // =========================================================================
 
 export let theme = {
@@ -2231,6 +2400,44 @@ export function generateAlternateCSS(name, altPalette, layout) {
   return altRules;
 }
 
+/**
+ * Prefix every selector in a rules object with a scope selector.
+ * Handles @media/@keyframes blocks and comma-separated selectors.
+ * @param {Object} rules - CSS rules object
+ * @param {string} prefix - Scope prefix (e.g. '#my-dashboard', '.bw_theme_alt')
+ * @param {boolean} [compound=false] - If true, use compound selector (no space)
+ *   for the first segment: `#scope.bw_theme_alt .sel` vs `#scope .sel`
+ * @returns {Object} New rules object with scoped selectors
+ */
+export function scopeRulesUnder(rules, prefix, compound) {
+  var scoped = {};
+  for (var sel in rules) {
+    if (!rules.hasOwnProperty(sel)) continue;
+    if (sel.charAt(0) === '@') {
+      // @media / @keyframes — recurse into the block
+      var innerBlock = rules[sel];
+      var scopedInner = {};
+      for (var innerSel in innerBlock) {
+        if (!innerBlock.hasOwnProperty(innerSel)) continue;
+        scopedInner[_prefixSelector(innerSel, prefix)] = innerBlock[innerSel];
+      }
+      scoped[sel] = scopedInner;
+    } else {
+      scoped[_prefixSelector(sel, prefix)] = rules[sel];
+    }
+  }
+  return scoped;
+}
+
+function _prefixSelector(sel, prefix) {
+  var parts = sel.split(',');
+  var result = [];
+  for (var i = 0; i < parts.length; i++) {
+    result.push(prefix + ' ' + parts[i].trim());
+  }
+  return result.join(', ');
+}
+
 export function deepMerge(target, source) {
   for (const key of Object.keys(source)) {
     if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])