@elmeragroup/fuse 0.1.0-canary.13 → 0.1.0-canary.15

package/README.md

@@ -48,6 +48,15 @@ A host that migrates one component at a time can keep its own design tokens and
 
 Import `fuse/css` before your own `@theme` so your values win where both define one. Each component page in the docs lists the tokens that component reads under "Tokens consumed"; map those, and add the next component's list when you adopt it. Role tokens are whole colours (`oklch()`, `hsl()`, hex), not channel triplets.
 
+Button's `outline` variant reads `--button-outline` and `--button-outline-width`. Without them it draws a 1px hairline in your `--border`, as internal themes do. For the external themes' outline, a 2px ring in the text colour with no shadow, set both:
+
+```css
+:root {
+  --button-outline: var(--foreground);
+  --button-outline-width: 2px;
+}
+```
+
 ## Non-Tailwind
 
 ```css

package/components/button/button-variants.d.ts

@@ -2,7 +2,7 @@
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
   variant: {
     default: "bg-primary text-primary-foreground enabled-hover:bg-primary/80";
-    outline: "shadow-xs border-border bg-background aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground";
+    outline: "border-[length:var(--button-outline-width,1px)] border-button-outline bg-background shadow-[0_1px_max(0px,4px-2*var(--button-outline-width,1px))_min(0px,2px-2*var(--button-outline-width,1px))_rgb(0_0_0/0.05)] aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground";
     secondary: "bg-secondary text-secondary-foreground aria-expanded:bg-secondary aria-expanded:text-secondary-foreground enabled-hover:bg-secondary-hover";
     ghost: "aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground";
     destructive: "border-error/20 bg-error/10 text-error enabled-hover:border-error enabled-hover:bg-error/20";
@@ -23,7 +23,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
 }, undefined, string, {
   variant: {
     default: "bg-primary text-primary-foreground enabled-hover:bg-primary/80";
-    outline: "shadow-xs border-border bg-background aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground";
+    outline: "border-[length:var(--button-outline-width,1px)] border-button-outline bg-background shadow-[0_1px_max(0px,4px-2*var(--button-outline-width,1px))_min(0px,2px-2*var(--button-outline-width,1px))_rgb(0_0_0/0.05)] aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground";
     secondary: "bg-secondary text-secondary-foreground aria-expanded:bg-secondary aria-expanded:text-secondary-foreground enabled-hover:bg-secondary-hover";
     ghost: "aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground";
     destructive: "border-error/20 bg-error/10 text-error enabled-hover:border-error enabled-hover:bg-error/20";
@@ -44,7 +44,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
   variant: {
     default: "bg-primary text-primary-foreground enabled-hover:bg-primary/80";
-    outline: "shadow-xs border-border bg-background aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground";
+    outline: "border-[length:var(--button-outline-width,1px)] border-button-outline bg-background shadow-[0_1px_max(0px,4px-2*var(--button-outline-width,1px))_min(0px,2px-2*var(--button-outline-width,1px))_rgb(0_0_0/0.05)] aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground";
     secondary: "bg-secondary text-secondary-foreground aria-expanded:bg-secondary aria-expanded:text-secondary-foreground enabled-hover:bg-secondary-hover";
     ghost: "aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground";
     destructive: "border-error/20 bg-error/10 text-error enabled-hover:border-error enabled-hover:bg-error/20";

package/components/button/button-variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-variants.d.ts","names":[],"sources":["../../../src/components/button/button-variants.ts"],"mappings":";qBA6Ba,4CAAc"}
+{"version":3,"file":"button-variants.d.ts","names":[],"sources":["../../../src/components/button/button-variants.ts"],"mappings":";qBAkDa,4CAAc"}

package/components/button/button-variants.js

@@ -5,11 +5,11 @@ import { controlSize } from "../../styles/control-size.js";
 import { tv } from "tailwind-variants";
 //#region src/components/button/button-variants.ts
 const buttonVariants = tv({
-	base: cn("group/button font-medium box-border inline-flex shrink-0 cursor-pointer items-center justify-center rounded-(--radius-button) border border-transparent bg-clip-padding p-0 whitespace-nowrap transition-[color,background-color,border-color,box-shadow,translate,opacity] select-none in-data-[slot=button-group]:rounded-md enabled-active:not-aria-[haspopup]:translate-y-px [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", selfFocusRingClass, nativeStateFaceClass, dataStateFaceClass),
+	base: cn("group/button font-medium box-border inline-flex shrink-0 cursor-pointer items-center justify-center rounded-(--radius-button) border border-transparent bg-clip-padding p-0 whitespace-nowrap transition-[color,background-color,border-color,box-shadow,translate,opacity] select-none in-data-[slot=button-group]:rounded-md enabled-active:not-aria-[haspopup]:translate-y-px [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[pending-indicator]:[&>svg:not([data-icon=inline-end])]:hidden", selfFocusRingClass, nativeStateFaceClass, dataStateFaceClass),
 	variants: {
 		variant: {
 			default: "bg-primary text-primary-foreground enabled-hover:bg-primary/80",
-			outline: "shadow-xs border-border bg-background aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground",
+			outline: "border-[length:var(--button-outline-width,1px)] border-button-outline bg-background shadow-[0_1px_max(0px,4px-2*var(--button-outline-width,1px))_min(0px,2px-2*var(--button-outline-width,1px))_rgb(0_0_0/0.05)] aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground",
 			secondary: "bg-secondary text-secondary-foreground aria-expanded:bg-secondary aria-expanded:text-secondary-foreground enabled-hover:bg-secondary-hover",
 			ghost: "aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground",
 			destructive: "border-error/20 bg-error/10 text-error enabled-hover:border-error enabled-hover:bg-error/20",
@@ -19,20 +19,23 @@ const buttonVariants = tv({
 		size: {
 			default: controlSize({
 				size: "md",
-				fit: "label"
+				fit: "label",
+				class: "px-(--control-px-button-md) has-data-[icon=inline-end]:pr-(--control-px-button-icon-md) has-data-[icon=inline-start]:pl-(--control-px-button-icon-md)"
 			}),
 			xs: controlSize({
 				size: "xs",
 				fit: "label",
-				class: "[&_svg:not([class*='size-'])]:size-3"
+				class: "px-(--control-px-button-xs) has-data-[icon=inline-end]:pr-(--control-px-button-icon-xs) has-data-[icon=inline-start]:pl-(--control-px-button-icon-xs) [&_svg:not([class*='size-'])]:size-3"
 			}),
 			sm: controlSize({
 				size: "sm",
-				fit: "label"
+				fit: "label",
+				class: "px-(--control-px-button-sm) has-data-[icon=inline-end]:pr-(--control-px-button-icon-sm) has-data-[icon=inline-start]:pl-(--control-px-button-icon-sm)"
 			}),
 			lg: controlSize({
 				size: "lg",
-				fit: "label"
+				fit: "label",
+				class: "px-(--control-px-button-lg) has-data-[icon=inline-end]:pr-(--control-px-button-icon-lg) has-data-[icon=inline-start]:pl-(--control-px-button-icon-lg)"
 			}),
 			icon: controlSize({
 				size: "md",

package/components/button/button-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-variants.js","names":[],"sources":["../../../src/components/button/button-variants.ts"],"sourcesContent":["import { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../../styles/cn\";\nimport { controlSize } from \"../../styles/control-size\";\nimport { dataStateFaceClass, nativeStateFaceClass } from \"../../styles/state-face\";\nimport { selfFocusRingClass } from \"../../styles/utils\";\n\n// Runtime-free recipe so other components can borrow it without Button's client graph.\n// The state face composes two targets. `native` covers a native <button> that borrows\n// the recipe, and `data` covers Base UI roots that never match `:disabled`, such as\n// `render={<a />}` or `focusableWhenDisabled`. Both carry the `aria-disabled` arm, which\n// covers `isVisuallyDisabled` and a consumer's own `aria-disabled`. No target drops pointer events, so a Tooltip on a\n// disabled button still opens, and Base UI already cancels clicks on a disabled root.\n// Hover and press styles use the `enabled-hover:` and `enabled-active:` variants from\n// fuse.css, so a disabled root never changes fill, border, text or position under the\n// pointer. `aria-expanded:` follows an open popup, not the pointer, so it has no gate.\n// The text and icon sizes take their box from the control-size recipe: `default` is the md\n// label, `icon*` the squares. The xs glyph size and `icon-inline`, a square as tall as the\n// surrounding line that follows no density, stay local.\n// Every size rounds with the theme's `--radius-button`. The arbitrary value keeps\n// tailwind-merge able to replace it with a consumer `rounded-*` class, which the custom\n// `rounded-button` utility would not be.\n// Inside a ButtonGroup a button keeps the group radius, `rounded-md`, not the button role.\n// The group joins its buttons edge to edge, often with inputs and text, into one bar that\n// rounds like a field, and a pill button would bulge out of that outline.\n// The pointer cursor is the library's policy for an interactive control, as on the\n// Accordion trigger and the selection labels. The state face's `disabled:`,\n// `data-disabled:` and `aria-disabled:` cursors are variants, so they sort after this\n// plain utility and a disabled button keeps `not-allowed`.\nexport const buttonVariants = tv({\n  base: cn(\n    \"group/button font-medium box-border inline-flex shrink-0 cursor-pointer items-center justify-center rounded-(--radius-button) border border-transparent bg-clip-padding p-0 whitespace-nowrap transition-[color,background-color,border-color,box-shadow,translate,opacity] select-none in-data-[slot=button-group]:rounded-md enabled-active:not-aria-[haspopup]:translate-y-px [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n    selfFocusRingClass,\n    nativeStateFaceClass,\n    dataStateFaceClass\n  ),\n  variants: {\n    variant: {\n      default: \"bg-primary text-primary-foreground enabled-hover:bg-primary/80\",\n      outline:\n        \"shadow-xs border-border bg-background aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground\",\n      secondary:\n        \"bg-secondary text-secondary-foreground aria-expanded:bg-secondary aria-expanded:text-secondary-foreground enabled-hover:bg-secondary-hover\",\n      ghost:\n        \"aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground\",\n      destructive:\n        \"border-error/20 bg-error/10 text-error enabled-hover:border-error enabled-hover:bg-error/20\",\n      success:\n        \"border-success/20 bg-success/10 text-success enabled-hover:border-success enabled-hover:bg-success/20\",\n      link: \"text-primary underline-offset-4 enabled-hover:underline\",\n    },\n    size: {\n      default: controlSize({ size: \"md\", fit: \"label\" }),\n      xs: controlSize({ size: \"xs\", fit: \"label\", class: \"[&_svg:not([class*='size-'])]:size-3\" }),\n      sm: controlSize({ size: \"sm\", fit: \"label\" }),\n      lg: controlSize({ size: \"lg\", fit: \"label\" }),\n      icon: controlSize({ size: \"md\", fit: \"square\" }),\n      \"icon-xs\": controlSize({ size: \"xs\", fit: \"square\", class: \"[&_svg:not([class*='size-'])]:size-3\" }),\n      \"icon-sm\": controlSize({ size: \"sm\", fit: \"square\" }),\n      \"icon-inline\": \"hit-area-1 aspect-square h-lh w-auto\",\n      \"icon-lg\": controlSize({ size: \"lg\", fit: \"square\" }),\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"default\",\n  },\n});\n"],"mappings":";;;;;;AA6BA,MAAa,iBAAiB,GAAG;CAC/B,MAAM,GACJ,scACA,oBACA,sBACA,kBACF;CACA,UAAU;EACR,SAAS;GACP,SAAS;GACT,SACE;GACF,WACE;GACF,OACE;GACF,aACE;GACF,SACE;GACF,MAAM;EACR;EACA,MAAM;GACJ,SAAS,YAAY;IAAE,MAAM;IAAM,KAAK;GAAQ,CAAC;GACjD,IAAI,YAAY;IAAE,MAAM;IAAM,KAAK;IAAS,OAAO;GAAuC,CAAC;GAC3F,IAAI,YAAY;IAAE,MAAM;IAAM,KAAK;GAAQ,CAAC;GAC5C,IAAI,YAAY;IAAE,MAAM;IAAM,KAAK;GAAQ,CAAC;GAC5C,MAAM,YAAY;IAAE,MAAM;IAAM,KAAK;GAAS,CAAC;GAC/C,WAAW,YAAY;IAAE,MAAM;IAAM,KAAK;IAAU,OAAO;GAAuC,CAAC;GACnG,WAAW,YAAY;IAAE,MAAM;IAAM,KAAK;GAAS,CAAC;GACpD,eAAe;GACf,WAAW,YAAY;IAAE,MAAM;IAAM,KAAK;GAAS,CAAC;EACtD;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CAAC"}
+{"version":3,"file":"button-variants.js","names":[],"sources":["../../../src/components/button/button-variants.ts"],"sourcesContent":["import { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../../styles/cn\";\nimport { controlSize } from \"../../styles/control-size\";\nimport { dataStateFaceClass, nativeStateFaceClass } from \"../../styles/state-face\";\nimport { selfFocusRingClass } from \"../../styles/utils\";\n\n// Runtime-free recipe so other components can borrow it without Button's client graph.\n// The state face composes two targets. `native` covers a native <button> that borrows\n// the recipe, and `data` covers Base UI roots that never match `:disabled`, such as\n// `render={<a />}` or `focusableWhenDisabled`. Both carry the `aria-disabled` arm, which\n// covers `isVisuallyDisabled` and a consumer's own `aria-disabled`. No target drops pointer events, so a Tooltip on a\n// disabled button still opens, and Base UI already cancels clicks on a disabled root.\n// Hover and press styles use the `enabled-hover:` and `enabled-active:` variants from\n// fuse.css, so a disabled root never changes fill, border, text or position under the\n// pointer. `aria-expanded:` follows an open popup, not the pointer, so it has no gate.\n// The text and icon sizes take their box from the control-size recipe: `default` is the md\n// label, `icon*` the squares. The labels replace the control inset with Button's own,\n// `--control-px-button-*`, which comfortable density widens to the customer-facing\n// reference's side padding while fields, Select and Toggle keep the control inset. The icon\n// edge follows it: `--control-px-button-icon-*` replaces the control icon edge, so a leading\n// or trailing icon does not sit tight against one end of a wide button. The xs\n// glyph size and `icon-inline`, a square as tall as the surrounding line that follows no\n// density, stay local.\n// Every size rounds with the theme's `--radius-button`. The arbitrary value keeps\n// tailwind-merge able to replace it with a consumer `rounded-*` class, which the custom\n// `rounded-button` utility would not be.\n// Inside a ButtonGroup a button keeps the group radius, `rounded-md`, not the button role.\n// The group joins its buttons edge to edge, often with inputs and text, into one bar that\n// rounds like a field, and a pill button would bulge out of that outline.\n// The pointer cursor is the library's policy for an interactive control, as on the\n// Accordion trigger and the selection labels. The state face's `disabled:`,\n// `data-disabled:` and `aria-disabled:` cursors are variants, so they sort after this\n// plain utility and a disabled button keeps `not-allowed`.\n// While Button renders a pending indicator it stamps `data-pending-indicator`, and the\n// recipe then hides the button's own leading and bare direct SVG children, so the indicator\n// takes a leading icon's place, an icon-only square shows the indicator alone, and a spinner\n// a consumer still places by hand is not doubled. A trailing `data-icon=\"inline-end\"` icon\n// stays, as its marker keeps the end inset tight either way, and text stays. With\n// `pendingIndicator={null}` the attribute is absent and nothing hides.\n// The outline border reads the theme's `--button-outline` at `--button-outline-width`: a 1px\n// `--border` hairline in internal themes and the reference's 2px ring in the text color in\n// external ones. A host without themes.css declares neither, so both fall back to the 1px\n// `--border` hairline. Only the hairline casts `shadow-xs`, so the shadow spells out\n// Tailwind's `shadow-xs` value as a function of the width, which a host `--shadow-xs`\n// override does not reach. It equals `shadow-xs` at 1px. From 2px its blur is 0 and its\n// spread plus blur plus y offset is negative, so it stays inside the border box, where an\n// outer shadow never paints. It\n// starts with two plain lengths, so tailwind-merge still files it as a shadow, and a\n// consumer's own `shadow-*` utility replaces it.\nexport const buttonVariants = tv({\n  base: cn(\n    \"group/button font-medium box-border inline-flex shrink-0 cursor-pointer items-center justify-center rounded-(--radius-button) border border-transparent bg-clip-padding p-0 whitespace-nowrap transition-[color,background-color,border-color,box-shadow,translate,opacity] select-none in-data-[slot=button-group]:rounded-md enabled-active:not-aria-[haspopup]:translate-y-px [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[pending-indicator]:[&>svg:not([data-icon=inline-end])]:hidden\",\n    selfFocusRingClass,\n    nativeStateFaceClass,\n    dataStateFaceClass\n  ),\n  variants: {\n    variant: {\n      default: \"bg-primary text-primary-foreground enabled-hover:bg-primary/80\",\n      outline:\n        \"border-[length:var(--button-outline-width,1px)] border-button-outline bg-background shadow-[0_1px_max(0px,4px-2*var(--button-outline-width,1px))_min(0px,2px-2*var(--button-outline-width,1px))_rgb(0_0_0/0.05)] aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground\",\n      secondary:\n        \"bg-secondary text-secondary-foreground aria-expanded:bg-secondary aria-expanded:text-secondary-foreground enabled-hover:bg-secondary-hover\",\n      ghost:\n        \"aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground\",\n      destructive:\n        \"border-error/20 bg-error/10 text-error enabled-hover:border-error enabled-hover:bg-error/20\",\n      success:\n        \"border-success/20 bg-success/10 text-success enabled-hover:border-success enabled-hover:bg-success/20\",\n      link: \"text-primary underline-offset-4 enabled-hover:underline\",\n    },\n    size: {\n      default: controlSize({\n        size: \"md\",\n        fit: \"label\",\n        class:\n          \"px-(--control-px-button-md) has-data-[icon=inline-end]:pr-(--control-px-button-icon-md) has-data-[icon=inline-start]:pl-(--control-px-button-icon-md)\",\n      }),\n      xs: controlSize({\n        size: \"xs\",\n        fit: \"label\",\n        class:\n          \"px-(--control-px-button-xs) has-data-[icon=inline-end]:pr-(--control-px-button-icon-xs) has-data-[icon=inline-start]:pl-(--control-px-button-icon-xs) [&_svg:not([class*='size-'])]:size-3\",\n      }),\n      sm: controlSize({\n        size: \"sm\",\n        fit: \"label\",\n        class:\n          \"px-(--control-px-button-sm) has-data-[icon=inline-end]:pr-(--control-px-button-icon-sm) has-data-[icon=inline-start]:pl-(--control-px-button-icon-sm)\",\n      }),\n      lg: controlSize({\n        size: \"lg\",\n        fit: \"label\",\n        class:\n          \"px-(--control-px-button-lg) has-data-[icon=inline-end]:pr-(--control-px-button-icon-lg) has-data-[icon=inline-start]:pl-(--control-px-button-icon-lg)\",\n      }),\n      icon: controlSize({ size: \"md\", fit: \"square\" }),\n      \"icon-xs\": controlSize({ size: \"xs\", fit: \"square\", class: \"[&_svg:not([class*='size-'])]:size-3\" }),\n      \"icon-sm\": controlSize({ size: \"sm\", fit: \"square\" }),\n      \"icon-inline\": \"hit-area-1 aspect-square h-lh w-auto\",\n      \"icon-lg\": controlSize({ size: \"lg\", fit: \"square\" }),\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"default\",\n  },\n});\n"],"mappings":";;;;;;AAkDA,MAAa,iBAAiB,GAAG;CAC/B,MAAM,GACJ,0gBACA,oBACA,sBACA,kBACF;CACA,UAAU;EACR,SAAS;GACP,SAAS;GACT,SACE;GACF,WACE;GACF,OACE;GACF,aACE;GACF,SACE;GACF,MAAM;EACR;EACA,MAAM;GACJ,SAAS,YAAY;IACnB,MAAM;IACN,KAAK;IACL,OACE;GACJ,CAAC;GACD,IAAI,YAAY;IACd,MAAM;IACN,KAAK;IACL,OACE;GACJ,CAAC;GACD,IAAI,YAAY;IACd,MAAM;IACN,KAAK;IACL,OACE;GACJ,CAAC;GACD,IAAI,YAAY;IACd,MAAM;IACN,KAAK;IACL,OACE;GACJ,CAAC;GACD,MAAM,YAAY;IAAE,MAAM;IAAM,KAAK;GAAS,CAAC;GAC/C,WAAW,YAAY;IAAE,MAAM;IAAM,KAAK;IAAU,OAAO;GAAuC,CAAC;GACnG,WAAW,YAAY;IAAE,MAAM;IAAM,KAAK;GAAS,CAAC;GACpD,eAAe;GACf,WAAW,YAAY;IAAE,MAAM;IAAM,KAAK;GAAS,CAAC;EACtD;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CAAC"}

package/components/button/button.d.ts

@@ -1,5 +1,5 @@
 import { buttonVariants } from "./button-variants.js";
-import { ComponentProps, ReactElement } from "react";
+import { ComponentProps, ReactElement, ReactNode } from "react";
 import { VariantProps } from "tailwind-variants";
 import { Button as Button$1 } from "@base-ui/react/button";
 //#region src/components/button/button.d.ts
@@ -24,10 +24,25 @@ type ButtonSharedProps = ButtonPrimitiveProps & Omit<VariantProps<typeof buttonV
    */
   isVisuallyDisabled?: boolean;
   /**
-   * Disables the element and stamps `data-pending`, blocking activation entirely.
-   * Effective disabled is `disabled || isPending`.
+   * The in-flight state of an async action. Stamps `data-pending` and `aria-busy`, blocks
+   * activation (effective disabled is `disabled || isPending`) and renders the disabled
+   * treatment, but keeps the button in the focus order like `focusableWhenDisabled`, so a
+   * keyboard user who activated it is still on it when the result arrives. Shows the
+   * `pendingIndicator` in the leading icon position meanwhile. An explicit
+   * `focusableWhenDisabled={false}` restores the native `disabled` attribute while pending.
+   * `aria-busy` announces nothing by itself: say what is happening through the label
+   * ("Saving") or a `role="status"` region outside the button.
    */
   isPending?: boolean;
+  /**
+   * What the button shows while pending. Omitted: a spinning `SpinnerGap` in the leading icon
+   * position, and the button's own leading and bare SVG children hide so the spinner takes
+   * their place (a trailing `data-icon="inline-end"` icon stays). A node: rendered in that same
+   * place instead of the spinner, as a decorative `aria-hidden` slot; animate it yourself. `null`
+   * or `false`: no indicator and nothing hidden, so the call site owns the pending markup, for
+   * example a brand button that keeps its logo and centres its own spinner over it.
+   */
+  pendingIndicator?: ReactNode;
   /** Pixels the hit rect is inflated on every side when predicting pointer intent. */
   predictionZoneSize?: number;
   /**
@@ -60,7 +75,12 @@ export type IconButtonProps = ButtonSharedProps & {
  * {@link IconButtonProps} instead, or distribute the omit over the union.
  */
 export type ButtonProps = LabelButtonProps | IconButtonProps;
-export declare function Button({ className, variant, size, isVisuallyDisabled, disabled, isPending, predictionZoneSize, onIntent, onMouseDown, ref, ...props }: ButtonProps): ReactElement;
+/**
+ * Triggers an action. Mark a leading or trailing icon child with `data-icon="inline-start"` or
+ * `data-icon="inline-end"`, on your own icon components too, so that side takes the icon
+ * padding instead of the wider label padding. The attribute must reach the rendered element.
+ */
+export declare function Button({ className, variant, size, isVisuallyDisabled, disabled, isPending, pendingIndicator, predictionZoneSize, onIntent, onMouseDown, children, ref, ...props }: ButtonProps): ReactElement;
 export declare namespace Button {
   var displayName: string;
 }

package/components/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","names":[],"sources":["../../../src/components/button/button.tsx"],"mappings":";;;;;;YAcY,aAAa,YAAY,oBAAoB;;YAG7C,iBAAiB,QAAQ;;YAGzB,kBAAkB,QAAQ,YAAY;KAE7C,uBAAuB,KAAK,sBAAsB;KAElD,oBAAoB,uBACvB,KAAK,oBAAoB;;EAEvB;;;;;;;;;;EAUA;;;;;EAKA;;EAEA;;;;;EAKA;;;;;;;YAQQ,mBAAmB;;EAE7B,OAAO;;;;;;YAOG,kBAAkB;;EAE5B,MAAM;EACN;;;;;;;YAQU,cAAc,mBAAmB;wBAE7B,SACd,WACA,SACA,MACA,oBACA,UACA,WACA,oBACA,UACA,aACA,QACG,SACF,cAAc;yBAZD;MAAA"}
+{"version":3,"file":"button.d.ts","names":[],"sources":["../../../src/components/button/button.tsx"],"mappings":";;;;;;YAeY,aAAa,YAAY,oBAAoB;;YAG7C,iBAAiB,QAAQ;;YAGzB,kBAAkB,QAAQ,YAAY;KAE7C,uBAAuB,KAAK,sBAAsB;KAElD,oBAAoB,uBACvB,KAAK,oBAAoB;;EAEvB;;;;;;;;;;EAUA;;;;;;;;;;;EAWA;;;;;;;;;EASA,mBAAmB;;EAEnB;;;;;EAKA;;;;;;;YAQQ,mBAAmB;;EAE7B,OAAO;;;;;;YAOG,kBAAkB;;EAE5B,MAAM;EACN;;;;;;;YAQU,cAAc,mBAAmB;;;;;;wBAO7B,SACd,WACA,SACA,MACA,oBACA,UACA,WACA,kBACA,oBACA,UACA,aACA,UACA,QACG,SACF,cAAc;yBAdD;MAAA"}

package/components/button/button.js

@@ -2,22 +2,34 @@
 import { cn } from "../../styles/cn.js";
 import { useMergedRefs } from "../../hooks/use-merged-refs.js";
 import { usePredictedEvents } from "../../hooks/use-predicted-events.js";
+import { SpinnerGap } from "../../icons/generated/spinner-gap.js";
 import { definedProps } from "../../internal/defined-props.js";
 import { buttonVariants } from "./button-variants.js";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Button as Button$1 } from "@base-ui/react/button";
 //#region src/components/button/button.tsx
-function Button({ className, variant, size, isVisuallyDisabled = false, disabled = false, isPending = false, predictionZoneSize = 30, onIntent, onMouseDown, ref, ...props }) {
+/**
+* Triggers an action. Mark a leading or trailing icon child with `data-icon="inline-start"` or
+* `data-icon="inline-end"`, on your own icon components too, so that side takes the icon
+* padding instead of the wider label padding. The attribute must reach the rendered element.
+*/
+function Button({ className, variant, size, isVisuallyDisabled = false, disabled = false, isPending = false, pendingIndicator, predictionZoneSize = 30, onIntent, onMouseDown, children, ref, ...props }) {
 	const { ref: predictedRef } = usePredictedEvents({
 		predictionZoneSize,
 		onIntent,
 		enabled: !disabled && !isPending && !isVisuallyDisabled && onIntent !== void 0
 	});
 	const mergedRef = useMergedRefs(ref, onIntent === void 0 ? null : predictedRef);
-	return /* @__PURE__ */ jsx(Button$1, {
+	const showsIndicator = isPending && pendingIndicator !== null && pendingIndicator !== false;
+	return /* @__PURE__ */ jsxs(Button$1, {
 		"data-slot": "button",
 		"data-pending": isPending || void 0,
+		"data-pending-indicator": showsIndicator || void 0,
 		disabled: disabled || isPending,
+		...definedProps({
+			focusableWhenDisabled: isPending || void 0,
+			"aria-busy": isPending || void 0
+		}),
 		...definedProps({ "aria-disabled": isVisuallyDisabled || void 0 }),
 		className: cn(buttonVariants({
 			variant,
@@ -28,7 +40,14 @@ function Button({ className, variant, size, isVisuallyDisabled = false, disabled
 			onMouseDown?.(event);
 		},
 		...definedProps(props),
-		ref: mergedRef
+		ref: mergedRef,
+		children: [showsIndicator ? /* @__PURE__ */ jsx("span", {
+			"data-slot": "button-pending-indicator",
+			"data-icon": "inline-start",
+			"aria-hidden": true,
+			className: "pointer-events-none inline-flex shrink-0 items-center justify-center",
+			children: pendingIndicator ?? /* @__PURE__ */ jsx(SpinnerGap, { className: "animate-spin" })
+		}) : null, children]
 	});
 }
 Button.displayName = "Button";

package/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":["ButtonPrimitive"],"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ReactElement } from \"react\";\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport type { VariantProps } from \"tailwind-variants\";\n\nimport { useMergedRefs } from \"../../hooks/use-merged-refs\";\nimport { usePredictedEvents } from \"../../hooks/use-predicted-events\";\nimport { definedProps } from \"../../internal/defined-props\";\nimport { cn } from \"../../styles/cn\";\nimport { buttonVariants } from \"./button-variants\";\n\n/** Every `size` the Button recipe knows: the label sizes plus the square `icon*` sizes. */\nexport type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>[\"size\"]>;\n\n/** The square icon-only sizes. A button at one of these requires an `aria-label`. */\nexport type IconButtonSize = Extract<ButtonSize, `icon${string}`>;\n\n/** The label sizes: `xs`, `sm`, `default` and `lg`. */\nexport type LabelButtonSize = Exclude<ButtonSize, IconButtonSize>;\n\ntype ButtonPrimitiveProps = Omit<ComponentProps<typeof ButtonPrimitive>, \"className\">;\n\ntype ButtonSharedProps = ButtonPrimitiveProps &\n  Omit<VariantProps<typeof buttonVariants>, \"size\"> & {\n    /** Extra classes, merged last through `cn`. */\n    className?: string;\n    /**\n     * Stamps `aria-disabled` (an explicit consumer value wins), which renders the disabled\n     * treatment (`opacity-50`, the `not-allowed` cursor, no hover or press paint), and\n     * suppresses focus-on-press while the button stays fully interactive — click, keyboard\n     * and focus-visible all still work, and a Tooltip on it still opens. For \"looks\n     * disabled but explains itself on activation\" flows. The treatment keys off\n     * `aria-disabled`, so an explicit `aria-disabled={false}` also turns it off: the button\n     * then looks and announces enabled and only the focus-on-press suppression remains.\n     */\n    isVisuallyDisabled?: boolean;\n    /**\n     * Disables the element and stamps `data-pending`, blocking activation entirely.\n     * Effective disabled is `disabled || isPending`.\n     */\n    isPending?: boolean;\n    /** Pixels the hit rect is inflated on every side when predicting pointer intent. */\n    predictionZoneSize?: number;\n    /**\n     * Predictive-prefetch callback. Fires once when the pointer's predicted trajectory\n     * lands inside the inflated hit rect; browsers without the prediction API fail soft.\n     */\n    onIntent?: () => void;\n  };\n\n/**\n * The props of a button with a visible label: every size except the square `icon*` ones, so\n * an accessible name is optional. A wrapper that supplies its own label types its props as\n * `Omit<LabelButtonProps, \"children\">` and keeps the size union in sync with the recipe.\n */\nexport type LabelButtonProps = ButtonSharedProps & {\n  /** Recipe size axis. The `icon*` sizes are square and additionally require an `aria-label`. */\n  size?: LabelButtonSize;\n};\n\n/**\n * The props of a square icon-only button: one of the `icon*` sizes plus the `aria-label` that\n * names it, since the icon is the whole content.\n */\nexport type IconButtonProps = ButtonSharedProps & {\n  /** Recipe size axis. The `icon*` sizes are square and additionally require an `aria-label`. */\n  size: IconButtonSize;\n  \"aria-label\": string;\n};\n\n/**\n * `LabelButtonProps | IconButtonProps`. `Omit` on this union collapses it and lets an icon\n * size through without its name; omit from {@link LabelButtonProps} or\n * {@link IconButtonProps} instead, or distribute the omit over the union.\n */\nexport type ButtonProps = LabelButtonProps | IconButtonProps;\n\nexport function Button({\n  className,\n  variant,\n  size,\n  isVisuallyDisabled = false,\n  disabled = false,\n  isPending = false,\n  predictionZoneSize = 30,\n  onIntent,\n  onMouseDown,\n  ref,\n  ...props\n}: ButtonProps): ReactElement {\n  const { ref: predictedRef } = usePredictedEvents({\n    predictionZoneSize,\n    onIntent,\n    enabled: !disabled && !isPending && !isVisuallyDisabled && onIntent !== undefined,\n  });\n  const mergedRef = useMergedRefs(ref, onIntent === undefined ? null : predictedRef);\n\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      data-pending={isPending || undefined}\n      disabled={disabled || isPending}\n      // Announced as unavailable without being disabled: the button still activates so\n      // the flow that explains itself can run. An explicit consumer value wins through the\n      // later {...definedProps(props)} spread. When not visually disabled the key is omitted,\n      // not undefined, so Base UI's own aria-disabled (focusableWhenDisabled, non-native\n      // disabled) survives.\n      {...definedProps({ \"aria-disabled\": isVisuallyDisabled || undefined })}\n      className={cn(buttonVariants({ variant, size }), className)}\n      onMouseDown={(event) => {\n        if (isVisuallyDisabled) {\n          event.preventDefault();\n        }\n        onMouseDown?.(event);\n      }}\n      // Filtered so a forwarded undefined cannot erase what Base UI's Button sets itself,\n      // such as aria-disabled, type and role.\n      {...definedProps(props)}\n      ref={mergedRef}\n    />\n  );\n}\n\nButton.displayName = \"Button\";\n"],"mappings":";;;;;;;;;AA+EA,SAAgB,OAAO,EACrB,WACA,SACA,MACA,qBAAqB,OACrB,WAAW,OACX,YAAY,OACZ,qBAAqB,IACrB,UACA,aACA,KACA,GAAG,SACyB;CAC5B,MAAM,EAAE,KAAK,iBAAiB,mBAAmB;EAC/C;EACA;EACA,SAAS,CAAC,YAAY,CAAC,aAAa,CAAC,sBAAsB,aAAa,KAAA;CAC1E,CAAC;CACD,MAAM,YAAY,cAAc,KAAK,aAAa,KAAA,IAAY,OAAO,YAAY;CAEjF,OACE,oBAACA,UAAD;EACE,aAAU;EACV,gBAAc,aAAa,KAAA;EAC3B,UAAU,YAAY;EAMtB,GAAI,aAAa,EAAE,iBAAiB,sBAAsB,KAAA,EAAU,CAAC;EACrE,WAAW,GAAG,eAAe;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;EAC1D,cAAc,UAAU;GACtB,IAAI,oBACF,MAAM,eAAe;GAEvB,cAAc,KAAK;EACrB;EAGA,GAAI,aAAa,KAAK;EACtB,KAAK;CACN,CAAA;AAEL;AAEA,OAAO,cAAc"}
+{"version":3,"file":"button.js","names":["ButtonPrimitive"],"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ReactElement, ReactNode } from \"react\";\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport type { VariantProps } from \"tailwind-variants\";\n\nimport { useMergedRefs } from \"../../hooks/use-merged-refs\";\nimport { usePredictedEvents } from \"../../hooks/use-predicted-events\";\nimport { SpinnerGap } from \"../../icons/generated/spinner-gap\";\nimport { definedProps } from \"../../internal/defined-props\";\nimport { cn } from \"../../styles/cn\";\nimport { buttonVariants } from \"./button-variants\";\n\n/** Every `size` the Button recipe knows: the label sizes plus the square `icon*` sizes. */\nexport type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>[\"size\"]>;\n\n/** The square icon-only sizes. A button at one of these requires an `aria-label`. */\nexport type IconButtonSize = Extract<ButtonSize, `icon${string}`>;\n\n/** The label sizes: `xs`, `sm`, `default` and `lg`. */\nexport type LabelButtonSize = Exclude<ButtonSize, IconButtonSize>;\n\ntype ButtonPrimitiveProps = Omit<ComponentProps<typeof ButtonPrimitive>, \"className\">;\n\ntype ButtonSharedProps = ButtonPrimitiveProps &\n  Omit<VariantProps<typeof buttonVariants>, \"size\"> & {\n    /** Extra classes, merged last through `cn`. */\n    className?: string;\n    /**\n     * Stamps `aria-disabled` (an explicit consumer value wins), which renders the disabled\n     * treatment (`opacity-50`, the `not-allowed` cursor, no hover or press paint), and\n     * suppresses focus-on-press while the button stays fully interactive — click, keyboard\n     * and focus-visible all still work, and a Tooltip on it still opens. For \"looks\n     * disabled but explains itself on activation\" flows. The treatment keys off\n     * `aria-disabled`, so an explicit `aria-disabled={false}` also turns it off: the button\n     * then looks and announces enabled and only the focus-on-press suppression remains.\n     */\n    isVisuallyDisabled?: boolean;\n    /**\n     * The in-flight state of an async action. Stamps `data-pending` and `aria-busy`, blocks\n     * activation (effective disabled is `disabled || isPending`) and renders the disabled\n     * treatment, but keeps the button in the focus order like `focusableWhenDisabled`, so a\n     * keyboard user who activated it is still on it when the result arrives. Shows the\n     * `pendingIndicator` in the leading icon position meanwhile. An explicit\n     * `focusableWhenDisabled={false}` restores the native `disabled` attribute while pending.\n     * `aria-busy` announces nothing by itself: say what is happening through the label\n     * (\"Saving\") or a `role=\"status\"` region outside the button.\n     */\n    isPending?: boolean;\n    /**\n     * What the button shows while pending. Omitted: a spinning `SpinnerGap` in the leading icon\n     * position, and the button's own leading and bare SVG children hide so the spinner takes\n     * their place (a trailing `data-icon=\"inline-end\"` icon stays). A node: rendered in that same\n     * place instead of the spinner, as a decorative `aria-hidden` slot; animate it yourself. `null`\n     * or `false`: no indicator and nothing hidden, so the call site owns the pending markup, for\n     * example a brand button that keeps its logo and centres its own spinner over it.\n     */\n    pendingIndicator?: ReactNode;\n    /** Pixels the hit rect is inflated on every side when predicting pointer intent. */\n    predictionZoneSize?: number;\n    /**\n     * Predictive-prefetch callback. Fires once when the pointer's predicted trajectory\n     * lands inside the inflated hit rect; browsers without the prediction API fail soft.\n     */\n    onIntent?: () => void;\n  };\n\n/**\n * The props of a button with a visible label: every size except the square `icon*` ones, so\n * an accessible name is optional. A wrapper that supplies its own label types its props as\n * `Omit<LabelButtonProps, \"children\">` and keeps the size union in sync with the recipe.\n */\nexport type LabelButtonProps = ButtonSharedProps & {\n  /** Recipe size axis. The `icon*` sizes are square and additionally require an `aria-label`. */\n  size?: LabelButtonSize;\n};\n\n/**\n * The props of a square icon-only button: one of the `icon*` sizes plus the `aria-label` that\n * names it, since the icon is the whole content.\n */\nexport type IconButtonProps = ButtonSharedProps & {\n  /** Recipe size axis. The `icon*` sizes are square and additionally require an `aria-label`. */\n  size: IconButtonSize;\n  \"aria-label\": string;\n};\n\n/**\n * `LabelButtonProps | IconButtonProps`. `Omit` on this union collapses it and lets an icon\n * size through without its name; omit from {@link LabelButtonProps} or\n * {@link IconButtonProps} instead, or distribute the omit over the union.\n */\nexport type ButtonProps = LabelButtonProps | IconButtonProps;\n\n/**\n * Triggers an action. Mark a leading or trailing icon child with `data-icon=\"inline-start\"` or\n * `data-icon=\"inline-end\"`, on your own icon components too, so that side takes the icon\n * padding instead of the wider label padding. The attribute must reach the rendered element.\n */\nexport function Button({\n  className,\n  variant,\n  size,\n  isVisuallyDisabled = false,\n  disabled = false,\n  isPending = false,\n  pendingIndicator,\n  predictionZoneSize = 30,\n  onIntent,\n  onMouseDown,\n  children,\n  ref,\n  ...props\n}: ButtonProps): ReactElement {\n  const { ref: predictedRef } = usePredictedEvents({\n    predictionZoneSize,\n    onIntent,\n    enabled: !disabled && !isPending && !isVisuallyDisabled && onIntent !== undefined,\n  });\n  const mergedRef = useMergedRefs(ref, onIntent === undefined ? null : predictedRef);\n  // `null` and `false` opt out of the indicator and of the icon swap; every other value, `0`\n  // included, is a node to show, and `undefined` is the default spinner.\n  const showsIndicator = isPending && pendingIndicator !== null && pendingIndicator !== false;\n\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      data-pending={isPending || undefined}\n      // Present only while an indicator renders: the recipe's icon swap keys off it, so a\n      // `null` indicator hides nothing.\n      data-pending-indicator={showsIndicator || undefined}\n      disabled={disabled || isPending}\n      // A pending button stays in the focus order and announces busy: Base UI then drops the\n      // native `disabled`, stamps `aria-disabled` and `data-disabled` and still cancels click\n      // and keyboard activation. Both keys are omitted, not undefined, when not pending, so a\n      // consumer's own `focusableWhenDisabled` for a plain `disabled` button flows through the\n      // later {...definedProps(props)} spread, where an explicit value also wins while pending.\n      {...definedProps({\n        focusableWhenDisabled: isPending || undefined,\n        \"aria-busy\": isPending || undefined,\n      })}\n      // Announced as unavailable without being disabled: the button still activates so\n      // the flow that explains itself can run. An explicit consumer value wins through the\n      // later {...definedProps(props)} spread. When not visually disabled the key is omitted,\n      // not undefined, so Base UI's own aria-disabled (focusableWhenDisabled, non-native\n      // disabled) survives.\n      {...definedProps({ \"aria-disabled\": isVisuallyDisabled || undefined })}\n      className={cn(buttonVariants({ variant, size }), className)}\n      onMouseDown={(event) => {\n        if (isVisuallyDisabled) {\n          event.preventDefault();\n        }\n        onMouseDown?.(event);\n      }}\n      // Filtered so a forwarded undefined cannot erase what Base UI's Button sets itself,\n      // such as aria-disabled, type and role.\n      {...definedProps(props)}\n      ref={mergedRef}>\n      {showsIndicator ? (\n        // Decorative: the state is announced through aria-busy and the label. The slot is a\n        // leading icon, so the icon edge tightens the start inset as for any inline-start child,\n        // and the recipe hides the button's own leading and bare SVG children while it shows. A\n        // consumer's node rides in the same slot, so it gets the same place and the same\n        // aria-hidden; only the default spinner animates. `null` never reaches this branch, so\n        // the coalescing only fills in `undefined`.\n        <span\n          data-slot=\"button-pending-indicator\"\n          data-icon=\"inline-start\"\n          aria-hidden\n          className=\"pointer-events-none inline-flex shrink-0 items-center justify-center\">\n          {pendingIndicator ?? <SpinnerGap className=\"animate-spin\" />}\n        </span>\n      ) : null}\n      {children}\n    </ButtonPrimitive>\n  );\n}\n\nButton.displayName = \"Button\";\n"],"mappings":";;;;;;;;;;;;;;;AAoGA,SAAgB,OAAO,EACrB,WACA,SACA,MACA,qBAAqB,OACrB,WAAW,OACX,YAAY,OACZ,kBACA,qBAAqB,IACrB,UACA,aACA,UACA,KACA,GAAG,SACyB;CAC5B,MAAM,EAAE,KAAK,iBAAiB,mBAAmB;EAC/C;EACA;EACA,SAAS,CAAC,YAAY,CAAC,aAAa,CAAC,sBAAsB,aAAa,KAAA;CAC1E,CAAC;CACD,MAAM,YAAY,cAAc,KAAK,aAAa,KAAA,IAAY,OAAO,YAAY;CAGjF,MAAM,iBAAiB,aAAa,qBAAqB,QAAQ,qBAAqB;CAEtF,OACE,qBAACA,UAAD;EACE,aAAU;EACV,gBAAc,aAAa,KAAA;EAG3B,0BAAwB,kBAAkB,KAAA;EAC1C,UAAU,YAAY;EAMtB,GAAI,aAAa;GACf,uBAAuB,aAAa,KAAA;GACpC,aAAa,aAAa,KAAA;EAC5B,CAAC;EAMD,GAAI,aAAa,EAAE,iBAAiB,sBAAsB,KAAA,EAAU,CAAC;EACrE,WAAW,GAAG,eAAe;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;EAC1D,cAAc,UAAU;GACtB,IAAI,oBACF,MAAM,eAAe;GAEvB,cAAc,KAAK;EACrB;EAGA,GAAI,aAAa,KAAK;EACtB,KAAK;EAhCP,UAAA,CAiCG,iBAOC,oBAAC,QAAD;GACE,aAAU;GACV,aAAU;GACV,eAAA;GACA,WAAU;GACT,UAAA,oBAAoB,oBAAC,YAAD,EAAY,WAAU,eAAgB,CAAA;EACvD,CAAA,IACJ,MACH,QACc;;AAErB;AAEA,OAAO,cAAc"}

package/components/field/field-frame.js

@@ -1,7 +1,7 @@
 import { cn } from "../../styles/cn.js";
 import { iconCrossfadeHidden, iconCrossfadeShown, iconCrossfadeTransition } from "../../styles/utils.js";
-import { Check } from "../../icons/generated/check.js";
 import { SpinnerGap } from "../../icons/generated/spinner-gap.js";
+import { Check } from "../../icons/generated/check.js";
 import { FieldDescription, FieldError, FieldLabel, FieldLegend, FieldRoot, FieldSet } from "./field.js";
 import { tv } from "tailwind-variants";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/components/input-group/input-group-variants.d.ts

@@ -33,30 +33,32 @@ export declare const inputGroupAddonVariants: import("tailwind-variants").TVRetu
  * four values are addon chrome inside the group, NOT the four-rung control box
  * (`xs`/`sm`/`md`/`lg`), so they are an explicit shell-local exemption from the
  * density ladder and must never grow a
- * fifth `--control-*` rung. `sm` stays empty so Button's own `sm` metrics pass
- * through. InputGroup.Button applies the values as extra classes over Button's default
- * size. An addon button sits inside the field box, so it rounds like the field chrome and
- * never takes Button's `--radius-button`. The `sm` sizes keep `rounded-md`, and the `xs`
- * sizes take the kbd's inset corner.
+ * fifth `--control-*` rung. InputGroup.Button applies the values as extra classes over
+ * Button's default size, the md label. Every size swaps Button's own icon edge back to the
+ * md control icon edge, and `sm`, which keeps that label's box, also swaps Button's inset
+ * back to the md control inset, the field's own padding, so Button's wider comfortable inset
+ * and icon edge never reach a field. An addon button sits inside the field box, so it pads and
+ * rounds like the field chrome and never takes Button's `--radius-button`. The `sm` sizes keep
+ * `rounded-md`, and the `xs` sizes take the kbd's inset corner.
  */
 export declare const inputGroupButtonVariants: import("tailwind-variants").TVReturnType<{
   size: {
     xs: "h-6 gap-1 px-1.5 [&>svg:not([class*='size-'])]:size-3.5";
-    sm: "";
+    sm: string;
     "icon-xs": "size-6 p-0 has-[>svg]:p-0";
     "icon-sm": "size-8 p-0 has-[>svg]:p-0";
   };
-}, undefined, "text-sm flex items-center gap-2 rounded-md shadow-none", {
+}, undefined, string, {
   size: {
     xs: "h-6 gap-1 px-1.5 [&>svg:not([class*='size-'])]:size-3.5";
-    sm: "";
+    sm: string;
     "icon-xs": "size-6 p-0 has-[>svg]:p-0";
     "icon-sm": "size-8 p-0 has-[>svg]:p-0";
   };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
   size: {
     xs: "h-6 gap-1 px-1.5 [&>svg:not([class*='size-'])]:size-3.5";
-    sm: "";
+    sm: string;
     "icon-xs": "size-6 p-0 has-[>svg]:p-0";
     "icon-sm": "size-8 p-0 has-[>svg]:p-0";
   };

package/components/input-group/input-group-variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-group-variants.d.ts","names":[],"sources":["../../../src/components/input-group/input-group-variants.ts"],"mappings":";;;;;;;;qBAYa,qDAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA+BvB,sDAAwB"}
+{"version":3,"file":"input-group-variants.d.ts","names":[],"sources":["../../../src/components/input-group/input-group-variants.ts"],"mappings":";;;;;;;;qBAaa,qDAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAiCvB,sDAAwB"}

package/components/input-group/input-group-variants.js

@@ -1,4 +1,5 @@
 import { cn } from "../../styles/cn.js";
+import { controlMd } from "../../styles/control-size-md.js";
 import { insetCornerClass, kbdInsetCornerClass } from "../../styles/corner-radius.js";
 import { tv } from "tailwind-variants";
 //#region src/components/input-group/input-group-variants.ts
@@ -24,17 +25,19 @@ const inputGroupAddonVariants = tv({
 * four values are addon chrome inside the group, NOT the four-rung control box
 * (`xs`/`sm`/`md`/`lg`), so they are an explicit shell-local exemption from the
 * density ladder and must never grow a
-* fifth `--control-*` rung. `sm` stays empty so Button's own `sm` metrics pass
-* through. InputGroup.Button applies the values as extra classes over Button's default
-* size. An addon button sits inside the field box, so it rounds like the field chrome and
-* never takes Button's `--radius-button`. The `sm` sizes keep `rounded-md`, and the `xs`
-* sizes take the kbd's inset corner.
+* fifth `--control-*` rung. InputGroup.Button applies the values as extra classes over
+* Button's default size, the md label. Every size swaps Button's own icon edge back to the
+* md control icon edge, and `sm`, which keeps that label's box, also swaps Button's inset
+* back to the md control inset, the field's own padding, so Button's wider comfortable inset
+* and icon edge never reach a field. An addon button sits inside the field box, so it pads and
+* rounds like the field chrome and never takes Button's `--radius-button`. The `sm` sizes keep
+* `rounded-md`, and the `xs` sizes take the kbd's inset corner.
 */
 const inputGroupButtonVariants = tv({
-	base: "text-sm flex items-center gap-2 rounded-md shadow-none",
+	base: cn("text-sm flex items-center gap-2 rounded-md shadow-none", controlMd.iconEdge()),
 	variants: { size: {
 		xs: "h-6 gap-1 px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
-		sm: "",
+		sm: controlMd.inset(),
 		"icon-xs": "size-6 p-0 has-[>svg]:p-0",
 		"icon-sm": "size-8 p-0 has-[>svg]:p-0"
 	} },

package/components/input-group/input-group-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group-variants.js","names":[],"sources":["../../../src/components/input-group/input-group-variants.ts"],"sourcesContent":["import { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../../styles/cn\";\nimport { insetCornerClass, kbdInsetCornerClass } from \"../../styles/corner-radius\";\n\n/**\n * Module-private recipe for the group's addon rail. `align` places\n * the rail inline (leading/trailing) or as a full-width block row; the Root\n * switches to a column and re-pads the input from the emitted `data-align`.\n * The kbd takes the inset corner, 5px inside `--radius` in external themes and the one\n * radius in the internal variant.\n */\nexport const inputGroupAddonVariants = tv({\n  base: cn(\n    \"text-sm font-medium flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-muted-foreground select-none [&>svg:not([class*='size-'])]:size-4\",\n    kbdInsetCornerClass\n  ),\n  variants: {\n    align: {\n      \"inline-start\": \"order-first pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]\",\n      \"inline-end\": \"order-last pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]\",\n      \"block-start\":\n        \"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n      \"block-end\":\n        \"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\n    },\n  },\n  defaultVariants: {\n    align: \"inline-start\",\n  },\n});\n\n/**\n * Module-private recipe for the compact addon-button axis. These\n * four values are addon chrome inside the group, NOT the four-rung control box\n * (`xs`/`sm`/`md`/`lg`), so they are an explicit shell-local exemption from the\n * density ladder and must never grow a\n * fifth `--control-*` rung. `sm` stays empty so Button's own `sm` metrics pass\n * through. InputGroup.Button applies the values as extra classes over Button's default\n * size. An addon button sits inside the field box, so it rounds like the field chrome and\n * never takes Button's `--radius-button`. The `sm` sizes keep `rounded-md`, and the `xs`\n * sizes take the kbd's inset corner.\n */\nexport const inputGroupButtonVariants = tv({\n  base: \"text-sm flex items-center gap-2 rounded-md shadow-none\",\n  variants: {\n    size: {\n      // oxlint-disable-next-line elmera/no-hardcoded-density-metrics -- compact addon chrome, not a control rung\n      xs: \"h-6 gap-1 px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n      sm: \"\",\n      // oxlint-disable-next-line elmera/no-hardcoded-density-metrics -- compact addon chrome, not a control rung\n      \"icon-xs\": \"size-6 p-0 has-[>svg]:p-0\",\n      // oxlint-disable-next-line elmera/no-hardcoded-density-metrics -- compact addon chrome, not a control rung\n      \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n    },\n  },\n  compoundVariants: [{ size: [\"xs\", \"icon-xs\"], class: insetCornerClass }],\n  defaultVariants: {\n    size: \"xs\",\n  },\n});\n"],"mappings":";;;;;;;;;;;AAYA,MAAa,0BAA0B,GAAG;CACxC,MAAM,GACJ,+JACA,mBACF;CACA,UAAU,EACR,OAAO;EACL,gBAAgB;EAChB,cAAc;EACd,eACE;EACF,aACE;CACJ,EACF;CACA,iBAAiB,EACf,OAAO,eACT;AACF,CAAC;;;;;;;;;;;;AAaD,MAAa,2BAA2B,GAAG;CACzC,MAAM;CACN,UAAU,EACR,MAAM;EAEJ,IAAI;EACJ,IAAI;EAEJ,WAAW;EAEX,WAAW;CACb,EACF;CACA,kBAAkB,CAAC;EAAE,MAAM,CAAC,MAAM,SAAS;EAAG,OAAO;CAAiB,CAAC;CACvE,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
+{"version":3,"file":"input-group-variants.js","names":[],"sources":["../../../src/components/input-group/input-group-variants.ts"],"sourcesContent":["import { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../../styles/cn\";\nimport { controlMd } from \"../../styles/control-size-md\";\nimport { insetCornerClass, kbdInsetCornerClass } from \"../../styles/corner-radius\";\n\n/**\n * Module-private recipe for the group's addon rail. `align` places\n * the rail inline (leading/trailing) or as a full-width block row; the Root\n * switches to a column and re-pads the input from the emitted `data-align`.\n * The kbd takes the inset corner, 5px inside `--radius` in external themes and the one\n * radius in the internal variant.\n */\nexport const inputGroupAddonVariants = tv({\n  base: cn(\n    \"text-sm font-medium flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-muted-foreground select-none [&>svg:not([class*='size-'])]:size-4\",\n    kbdInsetCornerClass\n  ),\n  variants: {\n    align: {\n      \"inline-start\": \"order-first pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]\",\n      \"inline-end\": \"order-last pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]\",\n      \"block-start\":\n        \"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n      \"block-end\":\n        \"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\n    },\n  },\n  defaultVariants: {\n    align: \"inline-start\",\n  },\n});\n\n/**\n * Module-private recipe for the compact addon-button axis. These\n * four values are addon chrome inside the group, NOT the four-rung control box\n * (`xs`/`sm`/`md`/`lg`), so they are an explicit shell-local exemption from the\n * density ladder and must never grow a\n * fifth `--control-*` rung. InputGroup.Button applies the values as extra classes over\n * Button's default size, the md label. Every size swaps Button's own icon edge back to the\n * md control icon edge, and `sm`, which keeps that label's box, also swaps Button's inset\n * back to the md control inset, the field's own padding, so Button's wider comfortable inset\n * and icon edge never reach a field. An addon button sits inside the field box, so it pads and\n * rounds like the field chrome and never takes Button's `--radius-button`. The `sm` sizes keep\n * `rounded-md`, and the `xs` sizes take the kbd's inset corner.\n */\nexport const inputGroupButtonVariants = tv({\n  base: cn(\"text-sm flex items-center gap-2 rounded-md shadow-none\", controlMd.iconEdge()),\n  variants: {\n    size: {\n      // oxlint-disable-next-line elmera/no-hardcoded-density-metrics -- compact addon chrome, not a control rung\n      xs: \"h-6 gap-1 px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n      sm: controlMd.inset(),\n      // oxlint-disable-next-line elmera/no-hardcoded-density-metrics -- compact addon chrome, not a control rung\n      \"icon-xs\": \"size-6 p-0 has-[>svg]:p-0\",\n      // oxlint-disable-next-line elmera/no-hardcoded-density-metrics -- compact addon chrome, not a control rung\n      \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n    },\n  },\n  compoundVariants: [{ size: [\"xs\", \"icon-xs\"], class: insetCornerClass }],\n  defaultVariants: {\n    size: \"xs\",\n  },\n});\n"],"mappings":";;;;;;;;;;;;AAaA,MAAa,0BAA0B,GAAG;CACxC,MAAM,GACJ,+JACA,mBACF;CACA,UAAU,EACR,OAAO;EACL,gBAAgB;EAChB,cAAc;EACd,eACE;EACF,aACE;CACJ,EACF;CACA,iBAAiB,EACf,OAAO,eACT;AACF,CAAC;;;;;;;;;;;;;;AAeD,MAAa,2BAA2B,GAAG;CACzC,MAAM,GAAG,0DAA0D,UAAU,SAAS,CAAC;CACvF,UAAU,EACR,MAAM;EAEJ,IAAI;EACJ,IAAI,UAAU,MAAM;EAEpB,WAAW;EAEX,WAAW;CACb,EACF;CACA,kBAAkB,CAAC;EAAE,MAAM,CAAC,MAAM,SAAS;EAAG,OAAO;CAAiB,CAAC;CACvE,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}

package/components/radio-group/radio-group.js

@@ -2,8 +2,8 @@
 import { cn } from "../../styles/cn.js";
 import { dataStateFaceClass } from "../../styles/state-face.js";
 import { selfFocusRingClass } from "../../styles/utils.js";
-import { definedProps } from "../../internal/defined-props.js";
 import { SpinnerGap } from "../../icons/generated/spinner-gap.js";
+import { definedProps } from "../../internal/defined-props.js";
 import { FieldItem } from "../field/field.js";
 import { FieldFrame } from "../field/field-frame.js";
 import { selectionGroupOrientationVariants } from "../selection-item/selection-item-variants.js";

package/components/toast/toast.js

@@ -3,6 +3,7 @@ import { selfFocusRingClass } from "../../styles/utils.js";
 import { useLocalizedStrings } from "../../hooks/use-localized-strings.js";
 import { Info } from "../../icons/generated/info.js";
 import { WarningOctagon } from "../../icons/generated/warning-octagon.js";
+import { SpinnerGap } from "../../icons/generated/spinner-gap.js";
 import { Button } from "../button/button.js";
 import { mergeClassName } from "../../styles/merge-class-name.js";
 import { overlayCloseStrings } from "../overlay/intl/index.js";
@@ -11,7 +12,6 @@ import { X } from "../../icons/generated/x.js";
 import { OverlayPortal } from "../overlay/overlay-portal.js";
 import { CheckCircle } from "../../icons/generated/check-circle.js";
 import { Warning } from "../../icons/generated/warning.js";
-import { SpinnerGap } from "../../icons/generated/spinner-gap.js";
 import { toastVariants } from "./toast-variants.js";
 import { useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/icons.js

@@ -1,6 +1,7 @@
 import { CaretDown } from "./icons/generated/caret-down.js";
 import { Info } from "./icons/generated/info.js";
 import { WarningOctagon } from "./icons/generated/warning-octagon.js";
+import { SpinnerGap } from "./icons/generated/spinner-gap.js";
 import { X } from "./icons/generated/x.js";
 import { CheckCircle } from "./icons/generated/check-circle.js";
 import { Warning } from "./icons/generated/warning.js";
@@ -9,7 +10,6 @@ import { DotsThree } from "./icons/generated/dots-three.js";
 import { Circle } from "./icons/generated/circle.js";
 import { Check } from "./icons/generated/check.js";
 import { Minus } from "./icons/generated/minus.js";
-import { SpinnerGap } from "./icons/generated/spinner-gap.js";
 import { SlidersHorizontal } from "./icons/generated/sliders-horizontal.js";
 import { CaretDoubleLeft } from "./icons/generated/caret-double-left.js";
 import { CaretDoubleRight } from "./icons/generated/caret-double-right.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elmeragroup/fuse",
-  "version": "0.1.0-canary.13",
+  "version": "0.1.0-canary.15",
   "description": "Fuse — whitelabel React components for Elmera Group's energy brands. One package, twenty theme permutations, ESM-only.",
   "keywords": [
     "react",
@@ -359,7 +359,7 @@
     "access": "public"
   },
   "elmeraRelease": {
-    "commit": "d808c58c14765f05b11025b722be821ac21010e9",
+    "commit": "1936fdd7dad8279399f8434898745cfb63838016",
     "channel": "canary"
   }
 }

package/styles/fuse.css

@@ -17,6 +17,14 @@
   --control-px-icon-sm: 0.375rem;
   --control-px-icon-md: 0.5rem;
   --control-px-icon-lg: 0.5rem;
+  --control-px-button-xs: 0.5rem;
+  --control-px-button-sm: 0.625rem;
+  --control-px-button-md: 0.625rem;
+  --control-px-button-lg: 0.625rem;
+  --control-px-button-icon-xs: 0.375rem;
+  --control-px-button-icon-sm: 0.375rem;
+  --control-px-button-icon-md: 0.5rem;
+  --control-px-button-icon-lg: 0.5rem;
   --control-gap-xs: 0.25rem;
   --control-gap-sm: 0.25rem;
   --control-gap-md: 0.375rem;
@@ -38,6 +46,14 @@
   --control-px-icon-sm: 0.625rem;
   --control-px-icon-md: 0.75rem;
   --control-px-icon-lg: 0.75rem;
+  --control-px-button-xs: 0.75rem;
+  --control-px-button-sm: 1rem;
+  --control-px-button-md: 2rem;
+  --control-px-button-lg: 2rem;
+  --control-px-button-icon-xs: 0.625rem;
+  --control-px-button-icon-sm: 0.75rem;
+  --control-px-button-icon-md: 1.5rem;
+  --control-px-button-icon-lg: 1.5rem;
   --control-gap-xs: 0.375rem;
   --control-gap-sm: 0.375rem;
   --control-gap-md: 0.5rem;
@@ -94,6 +110,7 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
+  --color-button-outline: var(--button-outline, var(--border));
   --color-sidebar: var(--sidebar);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-accent: var(--sidebar-accent);

package/styles.css

@@ -1108,6 +1108,10 @@
   border-style: var(--tw-border-style);
   border-width: 0px;
 }
+.border-\[length\:var\(--button-outline-width\,1px\)\] {
+  border-style: var(--tw-border-style);
+  border-width: var(--button-outline-width,1px);
+}
 .border-s {
   border-inline-start-style: var(--tw-border-style);
   border-inline-start-width: 1px;
@@ -1138,6 +1142,9 @@
 .border-border {
   border-color: var(--border);
 }
+.border-button-outline {
+  border-color: var(--button-outline, var(--border));
+}
 .border-error {
   border-color: var(--error);
 }
@@ -1351,6 +1358,18 @@
 .p-px {
   padding: 1px;
 }
+.px-\(--control-px-button-lg\) {
+  padding-inline: var(--control-px-button-lg);
+}
+.px-\(--control-px-button-md\) {
+  padding-inline: var(--control-px-button-md);
+}
+.px-\(--control-px-button-sm\) {
+  padding-inline: var(--control-px-button-sm);
+}
+.px-\(--control-px-button-xs\) {
+  padding-inline: var(--control-px-button-xs);
+}
 .px-\(--control-px-icon-lg\) {
   padding-inline: var(--control-px-icon-lg);
 }
@@ -1790,6 +1809,10 @@
   --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--sidebar-border));
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
+.shadow-\[0_1px_max\(0px\,4px-2\*var\(--button-outline-width\,1px\)\)_min\(0px\,2px-2\*var\(--button-outline-width\,1px\)\)_rgb\(0_0_0\/0\.05\)\] {
+  --tw-shadow: 0 1px max(0px, 4px - 2 * var(--button-outline-width,1px)) min(0px, 2px - 2 * var(--button-outline-width,1px)) var(--tw-shadow-color, rgb(0 0 0/0.05));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2965,6 +2988,18 @@
 .has-disabled\:cursor-not-allowed:has(:is(:where([data-rac])[data-disabled], :where(:not([data-rac])):disabled)) {
   cursor: not-allowed;
 }
+.has-data-\[icon\=inline-end\]\:pr-\(--control-px-button-icon-lg\):has([data-icon="inline-end"]) {
+  padding-right: var(--control-px-button-icon-lg);
+}
+.has-data-\[icon\=inline-end\]\:pr-\(--control-px-button-icon-md\):has([data-icon="inline-end"]) {
+  padding-right: var(--control-px-button-icon-md);
+}
+.has-data-\[icon\=inline-end\]\:pr-\(--control-px-button-icon-sm\):has([data-icon="inline-end"]) {
+  padding-right: var(--control-px-button-icon-sm);
+}
+.has-data-\[icon\=inline-end\]\:pr-\(--control-px-button-icon-xs\):has([data-icon="inline-end"]) {
+  padding-right: var(--control-px-button-icon-xs);
+}
 .has-data-\[icon\=inline-end\]\:pr-\(--control-px-icon-lg\):has([data-icon="inline-end"]) {
   padding-right: var(--control-px-icon-lg);
 }
@@ -2977,6 +3012,18 @@
 .has-data-\[icon\=inline-end\]\:pr-\(--control-px-icon-xs\):has([data-icon="inline-end"]) {
   padding-right: var(--control-px-icon-xs);
 }
+.has-data-\[icon\=inline-start\]\:pl-\(--control-px-button-icon-lg\):has([data-icon="inline-start"]) {
+  padding-left: var(--control-px-button-icon-lg);
+}
+.has-data-\[icon\=inline-start\]\:pl-\(--control-px-button-icon-md\):has([data-icon="inline-start"]) {
+  padding-left: var(--control-px-button-icon-md);
+}
+.has-data-\[icon\=inline-start\]\:pl-\(--control-px-button-icon-sm\):has([data-icon="inline-start"]) {
+  padding-left: var(--control-px-button-icon-sm);
+}
+.has-data-\[icon\=inline-start\]\:pl-\(--control-px-button-icon-xs\):has([data-icon="inline-start"]) {
+  padding-left: var(--control-px-button-icon-xs);
+}
 .has-data-\[icon\=inline-start\]\:pl-\(--control-px-icon-lg\):has([data-icon="inline-start"]) {
   padding-left: var(--control-px-icon-lg);
 }
@@ -4510,6 +4557,9 @@
   width: calc(0.25rem * 4);
   height: calc(0.25rem * 4);
 }
+.data-\[pending-indicator\]\:\[\&\>svg\:not\(\[data-icon\=inline-end\]\)\]\:hidden[data-pending-indicator] > svg:not([data-icon=inline-end]) {
+  display: none;
+}
 .\[\&\>tr\]\:last\:border-b-0 > tr:last-child {
   border-bottom-style: var(--tw-border-style);
   border-bottom-width: 0px;
@@ -4666,6 +4716,14 @@ td:last-child .\[td\:last-child_\&\]\:rounded-e-full {
   --control-px-icon-sm: 0.375rem;
   --control-px-icon-md: 0.5rem;
   --control-px-icon-lg: 0.5rem;
+  --control-px-button-xs: 0.5rem;
+  --control-px-button-sm: 0.625rem;
+  --control-px-button-md: 0.625rem;
+  --control-px-button-lg: 0.625rem;
+  --control-px-button-icon-xs: 0.375rem;
+  --control-px-button-icon-sm: 0.375rem;
+  --control-px-button-icon-md: 0.5rem;
+  --control-px-button-icon-lg: 0.5rem;
   --control-gap-xs: 0.25rem;
   --control-gap-sm: 0.25rem;
   --control-gap-md: 0.375rem;
@@ -4686,6 +4744,14 @@ td:last-child .\[td\:last-child_\&\]\:rounded-e-full {
   --control-px-icon-sm: 0.625rem;
   --control-px-icon-md: 0.75rem;
   --control-px-icon-lg: 0.75rem;
+  --control-px-button-xs: 0.75rem;
+  --control-px-button-sm: 1rem;
+  --control-px-button-md: 2rem;
+  --control-px-button-lg: 2rem;
+  --control-px-button-icon-xs: 0.625rem;
+  --control-px-button-icon-sm: 0.75rem;
+  --control-px-button-icon-md: 1.5rem;
+  --control-px-button-icon-lg: 1.5rem;
   --control-gap-xs: 0.375rem;
   --control-gap-sm: 0.375rem;
   --control-gap-md: 0.5rem;

package/themes.css

@@ -75,6 +75,7 @@
   --border: oklch(0.9219 0 0);
   --input: oklch(0.9219 0 0);
   --ring: oklch(0.4844 0.20509 296.29);
+  --button-outline: var(--border);
   --sidebar: oklch(0.9851 0 0);
   --sidebar-foreground: oklch(0.16 0 0);
   --sidebar-accent: oklch(0.9219 0 0);
@@ -105,6 +106,7 @@
   --radius: 0.375rem;
   --radius-button: var(--radius);
   --radius-step: 0px;
+  --button-outline-width: 1px;
   --font-sans: Roboto, ui-sans-serif, system-ui, sans-serif;
   --font-heading: var(--font-sans);
 }
@@ -174,9 +176,11 @@
   --feature-foreground: oklch(0.16 0 0);
   --border: oklch(0.9219 0 0);
   --input: oklch(0.9219 0 0);
+  --button-outline: var(--border);
   --radius: 0.375rem;
   --radius-button: var(--radius);
   --radius-step: 0px;
+  --button-outline-width: 1px;
   --font-heading: var(--font-sans);
   color-scheme: light;
 }
@@ -204,9 +208,11 @@
   --feature-foreground: oklch(0.80097 0.10434 49.42);
   --border: oklch(0.9232 0.0026 48.72);
   --input: oklch(0.9232 0.0026 48.72);
+  --button-outline: var(--foreground);
   --radius: 0.75rem;
   --radius-button: 1.8125rem;
   --radius-step: 2px;
+  --button-outline-width: 2px;
   --font-heading: "Neo Sans", var(--font-sans);
   color-scheme: light;
 }
@@ -254,9 +260,11 @@
   --feature-foreground: oklch(0.90178 0.09399 190.62);
   --border: oklch(0.929 0.0126 255.53);
   --input: oklch(0.929 0.0126 255.53);
+  --button-outline: var(--foreground);
   --radius: 0.95rem;
   --radius-button: 0.95rem;
   --radius-step: 2px;
+  --button-outline-width: 2px;
   --font-heading: var(--font-sans);
   color-scheme: light;
 }
@@ -284,9 +292,11 @@
   --feature-foreground: oklch(0.84919 0.07412 279.64);
   --border: oklch(0.929 0.0126 255.53);
   --input: oklch(0.929 0.0126 255.53);
+  --button-outline: var(--foreground);
   --radius: 0.5rem;
   --radius-button: 0.5rem;
   --radius-step: 2px;
+  --button-outline-width: 2px;
   --font-heading: var(--font-sans);
   color-scheme: light;
 }
@@ -314,9 +324,11 @@
   --feature-foreground: oklch(0.80097 0.10434 49.42);
   --border: oklch(0.9232 0.0026 48.72);
   --input: oklch(0.9232 0.0026 48.72);
+  --button-outline: var(--foreground);
   --radius: 0.75rem;
   --radius-button: 1.8125rem;
   --radius-step: 2px;
+  --button-outline-width: 2px;
   --font-heading: "Neo Sans", var(--font-sans);
   color-scheme: light;
 }
@@ -344,9 +356,11 @@
   --feature-foreground: oklch(0.90492 0.09477 206.46);
   --border: oklch(0.9232 0.0026 48.72);
   --input: oklch(0.9232 0.0026 48.72);
+  --button-outline: var(--foreground);
   --radius: 0.75rem;
   --radius-button: 1.8125rem;
   --radius-step: 2px;
+  --button-outline-width: 2px;
   --font-heading: var(--font-sans);
   color-scheme: light;
 }
@@ -374,9 +388,11 @@
   --feature-foreground: oklch(0.9094 0.046626 220.6);
   --border: oklch(0.9219 0 0);
   --input: oklch(0.9219 0 0);
+  --button-outline: var(--foreground);
   --radius: 0.375rem;
   --radius-button: 0.375rem;
   --radius-step: 2px;
+  --button-outline-width: 2px;
   --font-heading: var(--font-sans);
   color-scheme: light;
 }
@@ -428,6 +444,7 @@
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 40%);
   --ring: oklch(0.556 0 0);
+  --button-outline: var(--border);
   --sidebar: oklch(0.205 0 0);
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-accent: oklch(0.269 0 0);
@@ -456,6 +473,7 @@
   --radius: 0.375rem;
   --radius-button: var(--radius);
   --radius-step: 0px;
+  --button-outline-width: 1px;
   --font-heading: var(--font-sans);
   color-scheme: dark;
 }
@@ -507,6 +525,7 @@
   --border: oklch(0.3956915 0.0031178 164.9356);
   --input: oklch(0.6543689 0.0037291 145.5328);
   --ring: oklch(0.8299788 0.0546884 280.5235);
+  --button-outline: var(--foreground);
   --sidebar: oklch(0.1749487 0.003804 164.5613);
   --sidebar-foreground: oklch(0.9604175 0.0214022 46.9889);
   --sidebar-accent: oklch(0.2661671 0.0034366 164.8011);
@@ -535,6 +554,7 @@
   --radius: 0.75rem;
   --radius-button: 1.8125rem;
   --radius-step: 2px;
+  --button-outline-width: 2px;
   --font-heading: "Neo Sans", var(--font-sans);
   color-scheme: dark;
 }
@@ -586,6 +606,7 @@
   --border: oklch(0.3956915 0.0031178 164.9356);
   --input: oklch(0.6543689 0.0037291 145.5328);
   --ring: oklch(0.8299788 0.0546884 280.5235);
+  --button-outline: var(--foreground);
   --sidebar: oklch(0.1749487 0.003804 164.5613);
   --sidebar-foreground: oklch(0.9822955 0.0142785 213.0969);
   --sidebar-accent: oklch(0.2661671 0.0034366 164.8011);
@@ -614,6 +635,7 @@
   --radius: 0.75rem;
   --radius-button: 1.8125rem;
   --radius-step: 2px;
+  --button-outline-width: 2px;
   --font-heading: "Neo Sans", var(--font-sans);
   color-scheme: dark;
 }
@@ -665,6 +687,7 @@
   --border: oklch(0.3956915 0.0031178 164.9356);
   --input: oklch(0.6543689 0.0037291 145.5328);
   --ring: oklch(0.8299788 0.0546884 280.5235);
+  --button-outline: var(--foreground);
   --sidebar: oklch(0.1749487 0.003804 164.5613);
   --sidebar-foreground: oklch(0.9790218 0.0292767 188.8731);
   --sidebar-accent: oklch(0.2661671 0.0034366 164.8011);
@@ -693,6 +716,7 @@
   --radius: 0.95rem;
   --radius-button: 0.95rem;
   --radius-step: 2px;
+  --button-outline-width: 2px;
   --font-heading: var(--font-sans);
   color-scheme: dark;
 }
@@ -744,6 +768,7 @@
   --border: oklch(0.3956915 0.0031178 164.9356);
   --input: oklch(0.6543689 0.0037291 145.5328);
   --ring: oklch(0.8299788 0.0546884 280.5235);
+  --button-outline: var(--foreground);
   --sidebar: oklch(0.2029294 0.0334602 267.7195);
   --sidebar-foreground: oklch(0.9592915 0.0326656 74.8018);
   --sidebar-accent: oklch(0.2717674 0.038702 268.9648);
@@ -772,6 +797,7 @@
   --radius: 0.5rem;
   --radius-button: 0.5rem;
   --radius-step: 2px;
+  --button-outline-width: 2px;
   --font-heading: var(--font-sans);
   color-scheme: dark;
 }
@@ -823,6 +849,7 @@
   --border: oklch(0.3956915 0.0031178 164.9356);
   --input: oklch(0.6543689 0.0037291 145.5328);
   --ring: oklch(0.8299788 0.0546884 280.5235);
+  --button-outline: var(--foreground);
   --sidebar: oklch(0.1749487 0.003804 164.5613);
   --sidebar-foreground: oklch(0.9604175 0.0214022 46.9889);
   --sidebar-accent: oklch(0.2661671 0.0034366 164.8011);
@@ -851,6 +878,7 @@
   --radius: 0.75rem;
   --radius-button: 1.8125rem;
   --radius-step: 2px;
+  --button-outline-width: 2px;
   --font-heading: "Neo Sans", var(--font-sans);
   color-scheme: dark;
 }
@@ -902,6 +930,7 @@
   --border: oklch(0.3956915 0.0031178 164.9356);
   --input: oklch(0.6543689 0.0037291 145.5328);
   --ring: oklch(0.8299788 0.0546884 280.5235);
+  --button-outline: var(--foreground);
   --sidebar: oklch(0.1842633 0.0454734 244.0362);
   --sidebar-foreground: oklch(0.9801435 0.0172884 210.1893);
   --sidebar-accent: oklch(0.2250318 0.0601105 247.6754);
@@ -930,6 +959,7 @@
   --radius: 0.75rem;
   --radius-button: 1.8125rem;
   --radius-step: 2px;
+  --button-outline-width: 2px;
   --font-heading: var(--font-sans);
   color-scheme: dark;
 }
@@ -981,6 +1011,7 @@
   --border: oklch(0.3956915 0.0031178 164.9356);
   --input: oklch(0.6543689 0.0037291 145.5328);
   --ring: oklch(0.8299788 0.0546884 280.5235);
+  --button-outline: var(--foreground);
   --sidebar: oklch(0.176932 0.0026206 247.9754);
   --sidebar-foreground: oklch(0.9817745 0.0118616 223.5201);
   --sidebar-accent: oklch(0.2675764 0.0014668 197.0689);
@@ -1009,6 +1040,7 @@
   --radius: 0.375rem;
   --radius-button: 0.375rem;
   --radius-step: 2px;
+  --button-outline-width: 2px;
   --font-heading: var(--font-sans);
   color-scheme: dark;
 }