@womp/kookie-ui 0.14.4 → 0.15.0

package/schemas/shell-root.json

@@ -24,6 +24,16 @@
             }
           ]
         },
+        "size": {
+          "default": "2",
+          "description": "Index of the pane chrome and the Sidebar rows in it",
+          "type": "string",
+          "enum": [
+            "1",
+            "2",
+            "3"
+          ]
+        },
         "className": {
           "description": "Additional CSS class name",
           "type": "string"

package/schemas/shell-sidebar.json

@@ -190,7 +190,6 @@
               "type": "string",
               "enum": [
                 "collapsed",
-                "thin",
                 "expanded"
               ],
               "description": "Sidebar state"
@@ -201,7 +200,6 @@
                   "type": "string",
                   "enum": [
                     "collapsed",
-                    "thin",
                     "expanded"
                   ],
                   "description": "Sidebar state"
@@ -213,7 +211,6 @@
                       "type": "string",
                       "enum": [
                         "collapsed",
-                        "thin",
                         "expanded"
                       ],
                       "description": "Sidebar state"
@@ -222,7 +219,6 @@
                       "type": "string",
                       "enum": [
                         "collapsed",
-                        "thin",
                         "expanded"
                       ],
                       "description": "Sidebar state"
@@ -231,7 +227,6 @@
                       "type": "string",
                       "enum": [
                         "collapsed",
-                        "thin",
                         "expanded"
                       ],
                       "description": "Sidebar state"
@@ -240,7 +235,6 @@
                       "type": "string",
                       "enum": [
                         "collapsed",
-                        "thin",
                         "expanded"
                       ],
                       "description": "Sidebar state"
@@ -249,7 +243,6 @@
                       "type": "string",
                       "enum": [
                         "collapsed",
-                        "thin",
                         "expanded"
                       ],
                       "description": "Sidebar state"
@@ -258,7 +251,6 @@
                       "type": "string",
                       "enum": [
                         "collapsed",
-                        "thin",
                         "expanded"
                       ],
                       "description": "Sidebar state"
@@ -278,7 +270,6 @@
               "type": "string",
               "enum": [
                 "collapsed",
-                "thin",
                 "expanded"
               ],
               "description": "Sidebar state"
@@ -290,7 +281,6 @@
                   "type": "string",
                   "enum": [
                     "collapsed",
-                    "thin",
                     "expanded"
                   ],
                   "description": "Sidebar state"
@@ -299,7 +289,6 @@
                   "type": "string",
                   "enum": [
                     "collapsed",
-                    "thin",
                     "expanded"
                   ],
                   "description": "Sidebar state"
@@ -308,7 +297,6 @@
                   "type": "string",
                   "enum": [
                     "collapsed",
-                    "thin",
                     "expanded"
                   ],
                   "description": "Sidebar state"
@@ -317,7 +305,6 @@
                   "type": "string",
                   "enum": [
                     "collapsed",
-                    "thin",
                     "expanded"
                   ],
                   "description": "Sidebar state"
@@ -326,7 +313,6 @@
                   "type": "string",
                   "enum": [
                     "collapsed",
-                    "thin",
                     "expanded"
                   ],
                   "description": "Sidebar state"
@@ -335,7 +321,6 @@
                   "type": "string",
                   "enum": [
                     "collapsed",
-                    "thin",
                     "expanded"
                   ],
                   "description": "Sidebar state"
@@ -344,20 +329,6 @@
               "additionalProperties": false
             }
           ]
-        },
-        "thinSize": {
-          "default": 64,
-          "description": "Width in the thin state",
-          "type": "number"
-        },
-        "toggleModes": {
-          "default": "both",
-          "description": "`both` goes collapsed, thin, expanded; `single` goes between collapsed and one open state",
-          "type": "string",
-          "enum": [
-            "both",
-            "single"
-          ]
         }
       },
       "additionalProperties": false

package/schemas/toggle-button.json

@@ -79,7 +79,7 @@
           ]
         },
         "variant": {
-          "default": "raised",
+          "default": "solid",
           "description": "Visual variant that determines the button's appearance and context",
           "type": "string",
           "enum": [
@@ -88,9 +88,7 @@
             "soft",
             "surface",
             "outline",
-            "ghost",
-            "override",
-            "classic"
+            "ghost"
           ]
         },
         "color": {
@@ -141,11 +139,6 @@
           "description": "Loading state that shows a spinner and disables interaction",
           "type": "boolean"
         },
-        "fullWidth": {
-          "default": false,
-          "description": "Full width mode that expands the button to fill its container",
-          "type": "boolean"
-        },
         "material": {
           "description": "Material type for visual rendering and depth effects",
           "type": "string",
@@ -154,14 +147,6 @@
             "translucent"
           ]
         },
-        "panelBackground": {
-          "description": "Panel background type (deprecated - use material instead)",
-          "type": "string",
-          "enum": [
-            "solid",
-            "translucent"
-          ]
-        },
         "flush": {
           "default": false,
           "description": "Flush mode that removes visual padding for seamless text integration",
@@ -288,6 +273,25 @@
             "left"
           ]
         },
+        "emphasis": {
+          "description": "The button's rank: loud (solid), medium (raised) or quiet (ghost). Not with variant.",
+          "type": "string",
+          "enum": [
+            "loud",
+            "medium",
+            "quiet"
+          ]
+        },
+        "iconOnly": {
+          "default": false,
+          "description": "Square button holding only an icon; needs aria-label",
+          "type": "boolean"
+        },
+        "fullWidth": {
+          "default": false,
+          "description": "Expands the button to fill its container",
+          "type": "boolean"
+        },
         "tooltipAlign": {
           "default": "center",
           "description": "Alignment of the tooltip relative to the button",
@@ -307,223 +311,6 @@
           "description": "Whether to disable hoverable content behavior",
           "type": "boolean"
         },
-        "overrideStyles": {
-          "description": "Override styles for different interaction states",
-          "type": "object",
-          "properties": {
-            "normal": {
-              "type": "object",
-              "properties": {
-                "color": {
-                  "type": "string"
-                },
-                "background": {
-                  "type": "string"
-                },
-                "backgroundColor": {
-                  "type": "string"
-                },
-                "boxShadow": {
-                  "type": "string"
-                },
-                "filter": {
-                  "type": "string"
-                },
-                "outline": {
-                  "type": "string"
-                },
-                "outlineOffset": {
-                  "type": "string"
-                },
-                "opacity": {
-                  "type": [
-                    "string",
-                    "number"
-                  ]
-                }
-              },
-              "additionalProperties": false
-            },
-            "hover": {
-              "type": "object",
-              "properties": {
-                "color": {
-                  "type": "string"
-                },
-                "background": {
-                  "type": "string"
-                },
-                "backgroundColor": {
-                  "type": "string"
-                },
-                "boxShadow": {
-                  "type": "string"
-                },
-                "filter": {
-                  "type": "string"
-                },
-                "outline": {
-                  "type": "string"
-                },
-                "outlineOffset": {
-                  "type": "string"
-                },
-                "opacity": {
-                  "type": [
-                    "string",
-                    "number"
-                  ]
-                }
-              },
-              "additionalProperties": false
-            },
-            "active": {
-              "type": "object",
-              "properties": {
-                "color": {
-                  "type": "string"
-                },
-                "background": {
-                  "type": "string"
-                },
-                "backgroundColor": {
-                  "type": "string"
-                },
-                "boxShadow": {
-                  "type": "string"
-                },
-                "filter": {
-                  "type": "string"
-                },
-                "outline": {
-                  "type": "string"
-                },
-                "outlineOffset": {
-                  "type": "string"
-                },
-                "opacity": {
-                  "type": [
-                    "string",
-                    "number"
-                  ]
-                }
-              },
-              "additionalProperties": false
-            },
-            "pressed": {
-              "type": "object",
-              "properties": {
-                "color": {
-                  "type": "string"
-                },
-                "background": {
-                  "type": "string"
-                },
-                "backgroundColor": {
-                  "type": "string"
-                },
-                "boxShadow": {
-                  "type": "string"
-                },
-                "filter": {
-                  "type": "string"
-                },
-                "outline": {
-                  "type": "string"
-                },
-                "outlineOffset": {
-                  "type": "string"
-                },
-                "opacity": {
-                  "type": [
-                    "string",
-                    "number"
-                  ]
-                }
-              },
-              "additionalProperties": false
-            },
-            "open": {
-              "type": "object",
-              "properties": {
-                "color": {
-                  "type": "string"
-                },
-                "background": {
-                  "type": "string"
-                },
-                "backgroundColor": {
-                  "type": "string"
-                },
-                "boxShadow": {
-                  "type": "string"
-                },
-                "filter": {
-                  "type": "string"
-                },
-                "outline": {
-                  "type": "string"
-                },
-                "outlineOffset": {
-                  "type": "string"
-                },
-                "opacity": {
-                  "type": [
-                    "string",
-                    "number"
-                  ]
-                }
-              },
-              "additionalProperties": false
-            },
-            "disabled": {
-              "type": "object",
-              "properties": {
-                "color": {
-                  "type": "string"
-                },
-                "background": {
-                  "type": "string"
-                },
-                "backgroundColor": {
-                  "type": "string"
-                },
-                "boxShadow": {
-                  "type": "string"
-                },
-                "filter": {
-                  "type": "string"
-                },
-                "outline": {
-                  "type": "string"
-                },
-                "outlineOffset": {
-                  "type": "string"
-                },
-                "opacity": {
-                  "type": [
-                    "string",
-                    "number"
-                  ]
-                }
-              },
-              "additionalProperties": false
-            },
-            "focus": {
-              "type": "object",
-              "properties": {
-                "outline": {
-                  "type": "string"
-                },
-                "outlineOffset": {
-                  "type": "string"
-                }
-              },
-              "additionalProperties": false
-            }
-          },
-          "additionalProperties": false
-        },
         "pressed": {
           "description": "Controlled pressed state",
           "type": "boolean"

package/schemas/toggle-icon-button.json

@@ -79,7 +79,7 @@
           ]
         },
         "variant": {
-          "default": "raised",
+          "default": "solid",
           "description": "Visual variant that determines the button's appearance and context",
           "type": "string",
           "enum": [
@@ -88,9 +88,7 @@
             "soft",
             "surface",
             "outline",
-            "ghost",
-            "override",
-            "classic"
+            "ghost"
           ]
         },
         "color": {
@@ -141,11 +139,6 @@
           "description": "Loading state that shows a spinner and disables interaction",
           "type": "boolean"
         },
-        "fullWidth": {
-          "default": false,
-          "description": "Full width mode that expands the button to fill its container",
-          "type": "boolean"
-        },
         "material": {
           "description": "Material type for visual rendering and depth effects",
           "type": "string",
@@ -154,14 +147,6 @@
             "translucent"
           ]
         },
-        "panelBackground": {
-          "description": "Panel background type (deprecated - use material instead)",
-          "type": "string",
-          "enum": [
-            "solid",
-            "translucent"
-          ]
-        },
         "flush": {
           "default": false,
           "description": "Flush mode that removes visual padding for seamless text integration",

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

@@ -10,7 +10,7 @@
  * - Sizes: Responsive height and border-radius
  * - Variant palettes: Each variant defines its color scale as CSS variables
  * - Shared state logic: Single set of hover/active/open/disabled selectors
- * - Special variants: raised, override, solid (unique behavior, kept separate)
+ * - Special variants: raised, solid (unique behavior, kept separate)
  * - Toggle states: Pressed state overrides for all variants
  */
 
@@ -25,12 +25,12 @@
    * Component-level material override
    * When button has explicit material prop, override the inherited theme values.
    */
-  &:where([data-material='solid'], [data-panel-background='solid']) {
+  &:where([data-material='solid']) {
     --material-blend: 100%;
     --material-alpha: 0;
   }
 
-  &:where([data-material='translucent'], [data-panel-background='translucent']) {
+  &:where([data-material='translucent']) {
     --material-blend: 60%;
     --material-alpha: 1;
   }
@@ -51,7 +51,7 @@
   cursor: pointer;
   contain: paint;
   gap: var(--base-button-gap);
-  transition: var(--transition-button);
+  height: var(--base-button-height);
 
   /* Typography */
   font-family: var(--default-font-family);
@@ -64,7 +64,7 @@
   }
 
   /* Theme-level translucent override */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+  :where([data-material='translucent']) & {
     backdrop-filter: var(--backdrop-filter-components);
     --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
@@ -73,12 +73,12 @@
   isolation: isolate;
 
   /* Component-level material overrides */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
+  &:where([data-material='solid']) {
     backdrop-filter: none;
     --backdrop-filter-components: none;
   }
 
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+  &:where([data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
     --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
@@ -110,9 +110,7 @@
 
   /* Reduced motion support */
   @media (prefers-reduced-motion: reduce) {
-    transition: none;
     backdrop-filter: none;
-    animation: none;
   }
 
   /* Stabilize SVGs during scale transforms (prevent wobble, especially Firefox) */
@@ -124,43 +122,6 @@
     shape-rendering: geometricPrecision;
   }
 
-  /* Set height using CSS custom property for responsive sizing */
-  height: var(--base-button-height);
-
-  /* Scale interaction effects using CSS scale property (separate from transform).
-   * This avoids conflicts with user's transform styles (e.g. translateX).
-   * Uses spring-bounce easing from --transition-button for natural feel. */
-  @media (hover: hover) {
-    &:where(:hover:not([data-disabled], [data-state='open'])) {
-      scale: 1.02;
-    }
-  }
-
-  &:where(:active:not([data-disabled])) {
-    scale: 0.96;
-  }
-
-  &:where([data-state='open']) {
-    scale: 0.96;
-  }
-
-  /* Disable scale on Firefox (SVG rendering issues with transforms) */
-  @supports (-moz-appearance: none) {
-    &:where(:hover:not([data-disabled], [data-state='open'])),
-    &:where(:active:not([data-disabled])),
-    &:where([data-state='open']) {
-      scale: 1;
-    }
-  }
-
-  /* Disable scale on Windows (subpixel text re-rasterization causes flicker) */
-  :where([data-os='windows']) & {
-    &:where(:hover:not([data-disabled], [data-state='open'])),
-    &:where(:active:not([data-disabled])),
-    &:where([data-state='open']) {
-      scale: 1;
-    }
-  }
 }
 
 /* Full width mode */
@@ -493,70 +454,6 @@
   }
 }
 
-/* Override variant - fully customizable via CSS variables */
-.rt-BaseButton:where(.rt-variant-override) {
-  color: var(--button-override-color, inherit);
-  background: var(--button-override-background, transparent);
-  background-color: var(--button-override-background-color, initial);
-  box-shadow: var(--button-override-box-shadow, none);
-  filter: var(--button-override-filter, none);
-  outline: var(--button-override-outline, none);
-
-  @media (hover: hover) {
-    &:where(:hover) {
-      color: var(--button-override-hover-color, var(--button-override-color, inherit));
-      background: var(--button-override-hover-background, var(--button-override-background, transparent));
-      background-color: var(--button-override-hover-background-color, var(--button-override-background-color, initial));
-      box-shadow: var(--button-override-hover-box-shadow, var(--button-override-box-shadow, none));
-      filter: var(--button-override-hover-filter, var(--button-override-filter, none));
-      outline: var(--button-override-hover-outline, var(--button-override-outline, none));
-    }
-  }
-
-  &:where([data-state='open']) {
-    color: var(--button-override-open-color, var(--button-override-color, inherit));
-    background: var(--button-override-open-background, var(--button-override-background, transparent));
-    background-color: var(--button-override-open-background-color, var(--button-override-background-color, initial));
-    box-shadow: var(--button-override-open-box-shadow, var(--button-override-box-shadow, none));
-    filter: var(--button-override-open-filter, var(--button-override-filter, none));
-    outline: var(--button-override-open-outline, var(--button-override-outline, none));
-  }
-
-  &:where(:active:not([data-state='open'])) {
-    color: var(--button-override-active-color, var(--button-override-color, inherit));
-    background: var(--button-override-active-background, var(--button-override-background, transparent));
-    background-color: var(--button-override-active-background-color, var(--button-override-background-color, initial));
-    box-shadow: var(--button-override-active-box-shadow, var(--button-override-box-shadow, none));
-    filter: var(--button-override-active-filter, var(--button-override-filter, none));
-    outline: var(--button-override-active-outline, var(--button-override-outline, none));
-  }
-
-  &:where(:focus-visible) {
-    outline: var(--button-override-focus-outline, var(--focus-ring, 2px solid var(--focus-8)));
-    outline-offset: var(--button-override-focus-outline-offset, 2px);
-  }
-
-  &:where([data-state='on']) {
-    color: var(--button-override-pressed-color, var(--button-override-active-color, var(--button-override-color, inherit)));
-    background: var(--button-override-pressed-background, var(--button-override-active-background, var(--button-override-background, transparent)));
-    background-color: var(--button-override-pressed-background-color, var(--button-override-active-background-color, var(--button-override-background-color, initial)));
-    box-shadow: var(--button-override-pressed-box-shadow, var(--button-override-active-box-shadow, var(--button-override-box-shadow, none)));
-    filter: var(--button-override-pressed-filter, var(--button-override-active-filter, var(--button-override-filter, none)));
-    outline: var(--button-override-pressed-outline, var(--button-override-active-outline, var(--button-override-outline, none)));
-  }
-
-  &:where([data-disabled]) {
-    color: var(--button-override-disabled-color, var(--gray-a8));
-    background: var(--button-override-disabled-background, var(--gray-a3));
-    background-color: var(--button-override-disabled-background-color, var(--gray-a3));
-    box-shadow: var(--button-override-disabled-box-shadow, none);
-    filter: var(--button-override-disabled-filter, none);
-    outline: var(--button-override-disabled-outline, none);
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-}
-
 /* Solid variant - fills with the accent solid tokens (gray resolves to step 12 automatically) */
 .rt-BaseButton:where(.rt-variant-solid) {
   /* Solid uses 10% blend for translucent (more opaque than other variants) */