@womp/kookie-ui 0.26.0 → 0.26.1

package/components.css

@@ -2967,8 +2967,8 @@
 }
 .kui-BaseButton:where(.kui-variant-soft,.kui-variant-ghost,.kui-variant-outline,.kui-variant-surface):where(:active:not([data-state='open'],[data-disabled],[aria-disabled='true'])) {
   background-color: var(--v-bg-active);
-  -webkit-box-shadow: var(--shadow-1);
-          box-shadow: var(--shadow-1);
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .kui-BaseButton:where(.kui-variant-soft,.kui-variant-ghost,.kui-variant-outline,.kui-variant-surface):where([data-state='on']) {
   background-color: var(--v-bg-pressed);
@@ -14947,6 +14947,14 @@
   -webkit-margin-end: calc(var(--toolbar-title-gap) - var(--toolbar-gap));
           margin-inline-end: calc(var(--toolbar-title-gap) - var(--toolbar-gap));
 }
+@media (forced-colors: active) {
+  .kui-ToolbarGroup {
+    border: 1px solid CanvasText;
+  }
+  .kui-ToolbarGroup > :where(.kui-BaseButton) {
+    border-style: none;
+  }
+}
 .kui-TooltipContent {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@womp/kookie-ui",
-  "version": "0.26.0",
+  "version": "0.26.1",
   "description": "Kookie UI v1: a React component library with design tokens, flexible theming, a full layout shell, and comprehensive documentation.",
   "keywords": [
     "react",

package/src/components/_internal/base-button.css

@@ -311,7 +311,9 @@
   /* Active state */
   &:where(:active:not([data-state='open'], [data-disabled], [aria-disabled='true'])) {
     background-color: var(--v-bg-active);
-    box-shadow: var(--shadow-1);
+    /* A pressed soft or ghost button darkens its fill and casts nothing. Outline and surface
+       keep their edge through their own rules. */
+    box-shadow: none;
   }
 
   /* Pressed state (toggle on) */

package/src/components/toolbar.css

@@ -168,3 +168,16 @@
 :where(.kui-Toolbar) .kui-ToolbarTitle:where(:not(:last-child)) {
   margin-inline-end: calc(var(--toolbar-title-gap) - var(--toolbar-gap));
 }
+
+/* High contrast drops the group's fill, so the group takes the outline and its buttons give theirs
+   up, the way a segmented control's segments sit inside one border. A border colour is forced in
+   this mode, so the buttons drop the style, not the colour. */
+@media (forced-colors: active) {
+  .kui-ToolbarGroup {
+    border: 1px solid CanvasText;
+  }
+
+  .kui-ToolbarGroup > :where(.kui-BaseButton) {
+    border-style: none;
+  }
+}

package/styles.css

@@ -8098,8 +8098,8 @@
 }
 .kui-BaseButton:where(.kui-variant-soft,.kui-variant-ghost,.kui-variant-outline,.kui-variant-surface):where(:active:not([data-state='open'],[data-disabled],[aria-disabled='true'])) {
   background-color: var(--v-bg-active);
-  -webkit-box-shadow: var(--shadow-1);
-          box-shadow: var(--shadow-1);
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .kui-BaseButton:where(.kui-variant-soft,.kui-variant-ghost,.kui-variant-outline,.kui-variant-surface):where([data-state='on']) {
   background-color: var(--v-bg-pressed);
@@ -20064,6 +20064,14 @@
   -webkit-margin-end: calc(var(--toolbar-title-gap) - var(--toolbar-gap));
           margin-inline-end: calc(var(--toolbar-title-gap) - var(--toolbar-gap));
 }
+@media (forced-colors: active) {
+  .kui-ToolbarGroup {
+    border: 1px solid CanvasText;
+  }
+  .kui-ToolbarGroup > :where(.kui-BaseButton) {
+    border-style: none;
+  }
+}
 .kui-TooltipContent {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;