Refresh UI components and showcase; release updated framework packages

packages/ui/components/ButtonGroup.wrn

@@ -28,7 +28,7 @@ items: unknown[] = []
       return item.value || item.label || String(index)
     }
 
-    client function selectItem(item, index) {
+    client function selectItem(item, index, previousValue, nextValue) {
       previousValue = selectedValue
       nextValue = itemValue(item, index)
 
@@ -99,6 +99,26 @@ items: unknown[] = []
       isolation: isolate;
     }
 
+    .wrn-next--button-group > .wrn-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.45rem;
+      min-height: var(--wrn-control-height, 2.5rem);
+      padding: 0 0.85rem;
+      border: 1px solid var(--wrn-color-border);
+      border-radius: var(--wrn-radius-sm);
+      background: var(--wrn-color-surface);
+      color: var(--wrn-color-text);
+      font: inherit;
+      font-size: 0.875rem;
+      font-weight: 600;
+      cursor: pointer;
+    }
+    .wrn-next--button-group > .wrn-btn:hover { background: var(--wrn-color-surface-2); }
+    .wrn-next--button-group > .wrn-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+    .wrn-next--button-group > .wrn-btn .wrn-btn__icon { width: 1rem; height: 1rem; }
+    .wrn-next--button-group[data-size="sm"] > .wrn-btn { min-height: 2rem; font-size: 0.8rem; }
     .wrn-next--button-group[data-orientation="vertical"] {
       flex-direction: column;
     }
@@ -182,9 +202,9 @@ items: unknown[] = []
     }
     .wrn-next--button-group[data-selectable="true"] > .wrn-btn[data-selected="true"] {
       z-index: 1;
-      border-color: var(--wrn-component-color);
+      border-color: var(--wrn-color-primary-text);
       background: color-mix(in srgb, var(--wrn-component-color) 16%, var(--wrn-color-surface));
-      color: var(--wrn-component-color);
+      color: var(--wrn-color-primary-text);
     }
     @media (max-width: 480px) {
       .wrn-next--button-group[data-responsive="true"] > :is(.wrn-btn, .wrn-action) {
@@ -292,7 +312,7 @@ items: unknown[] = []
         }
 
         .wrn-component :is(a, button, input, select, textarea):focus-visible {
-          outline-color: var(--wrn-component-color);
+          outline-color: var(--wrn-color-primary-text);
         }
 
         .wrn-component p {