@marianmeres/stuic 2.66.0 → 3.0.1

package/dist/components/Button/README.md

@@ -1,22 +1,21 @@
 # Button
 
-A flexible button component with style variants, sizes, and optional toggle/switch behavior. Can render as a button or anchor tag.
+A flexible button component with semantic intents, visual variants, sizes, and optional toggle/switch behavior. Can render as a button or anchor tag.
 
 ## Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `variant` | `"primary" \| "secondary" \| string` | - | Style variant |
-| `size` | `"sm" \| "md" \| "lg" \| string` | - | Button size |
-| `muted` | `boolean` | `false` | Reduce text contrast for less emphasis |
-| `noshadow` | `boolean` | `false` | Remove shadow effect |
-| `noborder` | `boolean` | `false` | Remove border |
+| `intent` | `"primary" \| "accent" \| "destructive" \| "warning" \| "success" \| "info"` | - | Semantic color intent |
+| `variant` | `"solid" \| "outline" \| "ghost" \| "soft" \| "link"` | `"solid"` | Visual variant (how colors are applied) |
+| `size` | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` | Button size |
+| `muted` | `boolean` | `false` | Reduce emphasis (lower opacity) |
+| `raised` | `boolean` | `false` | 3D push effect |
 | `unstyled` | `boolean` | `false` | Skip all default styling |
-| `inverse` | `boolean` | `false` | Transparent bg, styled on hover |
 | `href` | `string` | - | Render as anchor tag with this URL |
 | `roleSwitch` | `boolean` | `false` | Enable toggle/switch behavior |
 | `checked` | `boolean` | `false` | Toggle state when `roleSwitch` is true (bindable) |
-| `el` | `Element` | - | Element reference (bindable) |
+| `el` | `HTMLElement` | - | Element reference (bindable) |
 | `class` | `string` | - | Additional CSS classes |
 
 ## Snippet Props
@@ -25,32 +24,45 @@ The `children` snippet receives `{ checked }` when `roleSwitch` is enabled.
 
 ## Usage
 
-### Basic Variants
+### Intent x Variant
 
 ```svelte
 <script lang="ts">
-  import { Button } from 'stuic';
+  import { Button } from '@marianmeres/stuic';
 </script>
 
-<Button>Default</Button>
-<Button variant="primary">Primary</Button>
-<Button variant="secondary">Secondary</Button>
+<!-- Intent determines the color palette -->
+<Button intent="primary">Primary</Button>
+<Button intent="destructive">Destructive</Button>
+<Button intent="success">Success</Button>
+
+<!-- Variant determines how colors are applied -->
+<Button intent="primary" variant="solid">Solid</Button>
+<Button intent="primary" variant="outline">Outline</Button>
+<Button intent="primary" variant="ghost">Ghost</Button>
+<Button intent="primary" variant="soft">Soft</Button>
+<Button intent="primary" variant="link">Link</Button>
+```
+
+### Sizes
+
+```svelte
 <Button size="sm">Small</Button>
+<Button size="md">Medium</Button>
 <Button size="lg">Large</Button>
+<Button size="xl">Extra Large</Button>
 ```
 
-### Inverse Style (Ghost Button)
+### 3D Push Effect
 
 ```svelte
-<Button inverse>
-  Hover to see background
-</Button>
+<Button intent="primary" raised>Push Me</Button>
 ```
 
 ### As Link
 
 ```svelte
-<Button href="/dashboard">
+<Button href="/dashboard" intent="primary">
   Go to Dashboard
 </Button>
 ```
@@ -59,7 +71,7 @@ The `children` snippet receives `{ checked }` when `roleSwitch` is enabled.
 
 ```svelte
 <script lang="ts">
-  import { Button } from 'stuic';
+  import { Button } from '@marianmeres/stuic';
 
   let isActive = $state(false);
 </script>
@@ -74,10 +86,64 @@ The `children` snippet receives `{ checked }` when `roleSwitch` is enabled.
 ### Custom Styling
 
 ```svelte
+<!-- Using unstyled for full control -->
 <Button
   unstyled
-  class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
+  class="bg-gradient-to-red from-purple-500 to-pink-500 text-white px-4 py-2 rounded-lg"
 >
-  Fully Custom
+  Gradient Button
+</Button>
+
+<!-- Override component tokens inline -->
+<Button intent="primary" style="--stuic-button-radius: 9999px;">
+  Pill Shape
 </Button>
 ```
+
+## CSS Variables
+
+### Component Tokens
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-button-radius` | `--radius-md` | Border radius |
+| `--stuic-button-font-family` | `--font-sans` | Font family |
+| `--stuic-button-font-weight` | `--font-weight-medium` | Font weight |
+| `--stuic-button-transition` | `100ms` | Transition duration |
+| `--stuic-button-ring-width` | `3px` | Focus ring width |
+| `--stuic-button-ring-color` | `--stuic-color-ring` | Focus ring color |
+| `--stuic-button-raised-offset` | `2px` | 3D effect offset |
+| `--stuic-button-raised-color` | `rgb(0 0 0 / 0.8)` | 3D shadow color |
+
+### Size Tokens
+
+Each size (sm, md, lg, xl) has corresponding tokens:
+- `--stuic-button-padding-x-{size}`
+- `--stuic-button-padding-y-{size}`
+- `--stuic-button-font-size-{size}`
+- `--stuic-button-min-height-{size}`
+
+### Intent Color Tokens
+
+Override these to customize intent colors globally:
+
+```css
+:root {
+  --stuic-color-primary: var(--color-blue-600);
+  --stuic-color-primary-hover: var(--color-blue-700);
+  --stuic-color-primary-active: var(--color-blue-800);
+  --stuic-color-primary-foreground: var(--color-white);
+}
+```
+
+Available intents: `primary`, `accent`, `destructive`, `warning`, `success`, `info`
+
+## Data Attributes
+
+The component uses data attributes for styling:
+- `data-intent` - The intent value
+- `data-variant` - The variant value
+- `data-size` - The size value
+- `data-muted` - Present when muted
+- `data-raised` - Present when raised
+- `data-checked` - Present when roleSwitch is enabled and checked

package/dist/components/Button/index.css

@@ -1,14 +1,480 @@
+/* ============================================================================
+   BUTTON COMPONENT TOKENS
+   Override globally: :root { --stuic-button-radius: 0; }
+   Override locally:  <Button style="--stuic-button-radius: 9999px;">
+   ============================================================================ */
+
 /* prettier-ignore */
-@theme inline {
-	--color-button-bg: var(--color-button-bg, var(--color-neutral-200));
-	--color-button-bg-dark: var(--color-button-bg-dark, var(--color-neutral-500));
+:root {
+	/* Component-level customization tokens */
+	--stuic-button-radius: var(--radius-md);
+	--stuic-button-font-family: var(--font-sans);
+	--stuic-button-font-weight: var(--font-weight-medium);
+	--stuic-button-transition: 150ms;
+
+	/* Focus ring */
+	--stuic-button-ring-width: 3px;
+	--stuic-button-ring-offset: 0px;
+	--stuic-button-ring-color: var(--stuic-color-ring);
+
+	/* Size: sm (min 44px touch target) */
+	--stuic-button-padding-x-sm: 0.75rem;
+	--stuic-button-padding-y-sm: 0.5rem;
+	--stuic-button-font-size-sm: 0.875rem;
+	--stuic-button-min-height-sm: 2.75rem;  /* 44px - Apple HIG minimum */
+
+	/* Size: md (min 44px touch target) */
+	--stuic-button-padding-x-md: 1rem;
+	--stuic-button-padding-y-md: 0.625rem;
+	--stuic-button-font-size-md: 1rem;
+	--stuic-button-min-height-md: 2.75rem;  /* 44px */
+
+	/* Size: lg */
+	--stuic-button-padding-x-lg: 1.25rem;
+	--stuic-button-padding-y-lg: 0.625rem;
+	--stuic-button-font-size-lg: 1.125rem;
+	--stuic-button-min-height-lg: 3rem;
+
+	/* Size: xl */
+	--stuic-button-padding-x-xl: 1.5rem;
+	--stuic-button-padding-y-xl: 0.75rem;
+	--stuic-button-font-size-xl: 1.25rem;
+	--stuic-button-min-height-xl: 3.5rem;
+
+	/* Raised (3D push) effect */
+	--stuic-button-raised-offset: 2px;
+	--stuic-button-raised-color: rgb(0 0 0 / 0.8);
+}
+
+@layer components {
+	/* ============================================================================
+	   BASE STYLES
+	   ============================================================================ */
+
+	.stuic-button {
+		/* Layout */
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+
+		/* Typography */
+		font-family: var(--stuic-button-font-family);
+		font-weight: var(--stuic-button-font-weight);
+		line-height: 1;
+		text-align: center;
+		text-decoration: none;
+		white-space: nowrap;
+
+		/* Box model */
+		border-width: 1px;
+		border-style: solid;
+		border-radius: var(--stuic-button-radius);
+
+		/* Interaction */
+		cursor: pointer;
+		user-select: none;
+		-webkit-tap-highlight-color: transparent; /* Remove iOS tap highlight */
+		touch-action: manipulation; /* Disable double-tap zoom for faster response */
+		transition:
+			background var(--stuic-button-transition),
+			color var(--stuic-button-transition),
+			border-color var(--stuic-button-transition),
+			opacity var(--stuic-button-transition);
+
+		/* Colors - use internal vars set by intent/variant */
+		background: var(--_bg);
+		color: var(--_text);
+		border-color: var(--_border);
+	}
+
+	/* Focus styles */
+	.stuic-button:focus-visible {
+		outline: var(--stuic-button-ring-width) solid
+			var(--_ring, var(--stuic-button-ring-color));
+		outline-offset: var(--stuic-button-ring-offset);
+	}
+
+	/* Hover state */
+	.stuic-button:hover:not(:disabled) {
+		background: var(--_bg-hover);
+		color: var(--_text-hover);
+		border-color: var(--_border-hover);
+	}
+
+	/* Active state */
+	.stuic-button:active:not(:disabled) {
+		background: var(--_bg-active);
+		color: var(--_text-active);
+		border-color: var(--_border-active);
+	}
+
+	/* Disabled state */
+	.stuic-button:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	/* ============================================================================
+	   SIZE VARIANTS
+	   ============================================================================ */
+
+	.stuic-button[data-size="sm"] {
+		padding: var(--stuic-button-padding-y-sm) var(--stuic-button-padding-x-sm);
+		font-size: var(--stuic-button-font-size-sm);
+		min-height: var(--stuic-button-min-height-sm);
+	}
+
+	.stuic-button[data-size="md"] {
+		padding: var(--stuic-button-padding-y-md) var(--stuic-button-padding-x-md);
+		font-size: var(--stuic-button-font-size-md);
+		min-height: var(--stuic-button-min-height-md);
+	}
+
+	.stuic-button[data-size="lg"] {
+		padding: var(--stuic-button-padding-y-lg) var(--stuic-button-padding-x-lg);
+		font-size: var(--stuic-button-font-size-lg);
+		min-height: var(--stuic-button-min-height-lg);
+	}
+
+	.stuic-button[data-size="xl"] {
+		padding: var(--stuic-button-padding-y-xl) var(--stuic-button-padding-x-xl);
+		font-size: var(--stuic-button-font-size-xl);
+		min-height: var(--stuic-button-min-height-xl);
+	}
+
+	/* ============================================================================
+	   INTENT COLOR MAPPING
+	   Each intent sets the color palette via internal CSS vars.
+	   ============================================================================ */
+
+	/* Default (no intent): neutral gray (no blue undertone) */
+	.stuic-button:not([data-intent]) {
+		--_color: var(--color-neutral-200);
+		--_color-hover: var(--color-neutral-300);
+		--_color-active: var(--color-neutral-400);
+		--_fg: var(--color-neutral-800);
+		--_fg-hover: var(--color-neutral-800);
+		--_fg-active: var(--color-neutral-800);
+	}
+
+	.stuic-button[data-intent="primary"] {
+		--_color: var(--stuic-color-primary);
+		--_color-hover: var(--stuic-color-primary-hover);
+		--_color-active: var(--stuic-color-primary-active);
+		--_fg: var(--stuic-color-primary-foreground);
+		--_fg-hover: var(--stuic-color-primary-foreground-hover);
+		--_fg-active: var(--stuic-color-primary-foreground-active);
+	}
+
+	.stuic-button[data-intent="accent"] {
+		--_color: var(--stuic-color-accent);
+		--_color-hover: var(--stuic-color-accent-hover);
+		--_color-active: var(--stuic-color-accent-active);
+		--_fg: var(--stuic-color-accent-foreground);
+		--_fg-hover: var(--stuic-color-accent-foreground-hover);
+		--_fg-active: var(--stuic-color-accent-foreground-active);
+	}
+
+	.stuic-button[data-intent="destructive"] {
+		--_color: var(--stuic-color-destructive);
+		--_color-hover: var(--stuic-color-destructive-hover);
+		--_color-active: var(--stuic-color-destructive-active);
+		--_fg: var(--stuic-color-destructive-foreground);
+		--_fg-hover: var(--stuic-color-destructive-foreground-hover);
+		--_fg-active: var(--stuic-color-destructive-foreground-active);
+	}
+
+	.stuic-button[data-intent="warning"] {
+		--_color: var(--stuic-color-warning);
+		--_color-hover: var(--stuic-color-warning-hover);
+		--_color-active: var(--stuic-color-warning-active);
+		--_fg: var(--stuic-color-warning-foreground);
+		--_fg-hover: var(--stuic-color-warning-foreground-hover);
+		--_fg-active: var(--stuic-color-warning-foreground-active);
+	}
+
+	.stuic-button[data-intent="success"] {
+		--_color: var(--stuic-color-success);
+		--_color-hover: var(--stuic-color-success-hover);
+		--_color-active: var(--stuic-color-success-active);
+		--_fg: var(--stuic-color-success-foreground);
+		--_fg-hover: var(--stuic-color-success-foreground-hover);
+		--_fg-active: var(--stuic-color-success-foreground-active);
+	}
+
+	.stuic-button[data-intent="info"] {
+		--_color: var(--stuic-color-info);
+		--_color-hover: var(--stuic-color-info-hover);
+		--_color-active: var(--stuic-color-info-active);
+		--_fg: var(--stuic-color-info-foreground);
+		--_fg-hover: var(--stuic-color-info-foreground-hover);
+		--_fg-active: var(--stuic-color-info-foreground-active);
+	}
+
+	/* ============================================================================
+	   VARIANT STYLES
+	   Each variant determines HOW the color palette is applied.
+	   ============================================================================ */
+
+	/* Solid (default): filled background with contrasting text */
+	.stuic-button[data-variant="solid"],
+	.stuic-button:not([data-variant]) {
+		--_bg: var(--_color);
+		--_bg-hover: var(--_color-hover);
+		--_bg-active: var(--_color-active);
+		--_text: var(--_fg);
+		--_text-hover: var(--_fg-hover);
+		--_text-active: var(--_fg-active);
+		--_border: var(--_color);
+		--_border-hover: var(--_color-hover);
+		--_border-active: var(--_color-active);
+	}
+
+	/* Outline: transparent background with colored border and text */
+	.stuic-button[data-variant="outline"] {
+		--_bg: transparent;
+		--_bg-hover: color-mix(in srgb, var(--_color) 10%, transparent);
+		--_bg-active: color-mix(in srgb, var(--_color) 20%, transparent);
+		--_text: var(--_color);
+		--_text-hover: var(--_color-hover);
+		--_text-active: var(--_color-active);
+		--_border: var(--_color);
+		--_border-hover: var(--_color-hover);
+		--_border-active: var(--_color-active);
+	}
+
+	/* Ghost: transparent background, colored text, subtle hover state */
+	.stuic-button[data-variant="ghost"] {
+		--_bg: transparent;
+		--_bg-hover: color-mix(in srgb, var(--_color) 10%, transparent);
+		--_bg-active: color-mix(in srgb, var(--_color) 20%, transparent);
+		--_text: var(--_color);
+		--_text-hover: var(--_color-hover);
+		--_text-active: var(--_color-active);
+		--_border: transparent;
+		--_border-hover: transparent;
+		--_border-active: transparent;
+	}
+
+	/* Soft: muted/translucent background tint with colored text */
+	.stuic-button[data-variant="soft"] {
+		--_bg: color-mix(in srgb, var(--_color) 15%, transparent);
+		--_bg-hover: color-mix(in srgb, var(--_color) 25%, transparent);
+		--_bg-active: color-mix(in srgb, var(--_color) 35%, transparent);
+		--_text: var(--_color);
+		--_text-hover: var(--_color-hover);
+		--_text-active: var(--_color-active);
+		--_border: transparent;
+		--_border-hover: transparent;
+		--_border-active: transparent;
+	}
+
+	/* Link: appears as inline text link, minimal styling */
+	.stuic-button[data-variant="link"] {
+		--_bg: transparent;
+		--_bg-hover: transparent;
+		--_bg-active: transparent;
+		--_text: var(--_color);
+		--_text-hover: var(--_color-hover);
+		--_text-active: var(--_color-active);
+		--_border: transparent;
+		--_border-hover: transparent;
+		--_border-active: transparent;
+		text-decoration: underline;
+		text-underline-offset: 2px;
+		min-height: auto;
+		padding: 0;
+		position: relative;
+	}
+
+	.stuic-button[data-variant="link"]::before {
+		content: "";
+		position: absolute;
+		inset: -12px -8px; /* expands tap area */
+	}
+
+	/* ============================================================================
+	   DEFAULT INTENT OVERRIDES
+	   The default intent uses light surface colors - we need visible borders
+	   for solid and visible text/borders for other variants.
+	   ============================================================================ */
+
+	/* Default solid: add visible border */
+	.stuic-button:not([data-intent])[data-variant="solid"],
+	.stuic-button:not([data-intent]):not([data-variant]) {
+		--_border: var(--color-neutral-400);
+		--_border-hover: var(--color-neutral-500);
+		--_border-active: var(--color-neutral-500);
+	}
+
+	.stuic-button:not([data-intent])[data-variant="outline"] {
+		--_text: var(--color-neutral-800);
+		--_text-hover: var(--color-neutral-900);
+		--_text-active: var(--color-neutral-900);
+		--_border: var(--color-neutral-400);
+		--_border-hover: var(--color-neutral-400);
+		--_border-active: var(--color-neutral-500);
+		--_bg-hover: var(--color-neutral-100);
+		--_bg-active: var(--color-neutral-200);
+	}
+
+	.stuic-button:not([data-intent])[data-variant="ghost"] {
+		--_text: var(--color-neutral-800);
+		--_text-hover: var(--color-neutral-900);
+		--_text-active: var(--color-neutral-900);
+		--_bg-hover: var(--color-neutral-100);
+		--_bg-active: var(--color-neutral-200);
+	}
+
+	.stuic-button:not([data-intent])[data-variant="soft"] {
+		--_text: var(--color-neutral-800);
+		--_text-hover: var(--color-neutral-900);
+		--_text-active: var(--color-neutral-900);
+		--_bg: var(--color-neutral-100);
+		--_bg-hover: var(--color-neutral-200);
+		--_bg-active: var(--color-neutral-300);
+	}
+
+	.stuic-button:not([data-intent])[data-variant="link"] {
+		--_text: var(--color-neutral-700);
+		--_text-hover: var(--color-neutral-900);
+		--_text-active: var(--color-neutral-900);
+	}
+
+	/* ============================================================================
+	   DEFAULT INTENT DARK MODE OVERRIDES
+	   ============================================================================ */
+
+	/* Default (no intent) in dark mode: lighter neutral colors */
+	.dark .stuic-button:not([data-intent]) {
+		--_color: var(--color-neutral-700);
+		--_color-hover: var(--color-neutral-600);
+		--_color-active: var(--color-neutral-500);
+		--_fg: var(--color-neutral-100);
+		--_fg-hover: var(--color-neutral-100);
+		--_fg-active: var(--color-neutral-100);
+	}
+
+	/* Default solid in dark mode */
+	.dark .stuic-button:not([data-intent])[data-variant="solid"],
+	.dark .stuic-button:not([data-intent]):not([data-variant]) {
+		--_border: var(--color-neutral-500);
+		--_border-hover: var(--color-neutral-400);
+		--_border-active: var(--color-neutral-400);
+	}
+
+	/* Default outline in dark mode */
+	.dark .stuic-button:not([data-intent])[data-variant="outline"] {
+		--_text: var(--color-neutral-200);
+		--_text-hover: var(--color-neutral-100);
+		--_text-active: var(--color-neutral-100);
+		--_border: var(--color-neutral-500);
+		--_border-hover: var(--color-neutral-400);
+		--_border-active: var(--color-neutral-400);
+		--_bg-hover: var(--color-neutral-800);
+		--_bg-active: var(--color-neutral-700);
+	}
+
+	/* Default ghost in dark mode */
+	.dark .stuic-button:not([data-intent])[data-variant="ghost"] {
+		--_text: var(--color-neutral-200);
+		--_text-hover: var(--color-neutral-100);
+		--_text-active: var(--color-neutral-100);
+		--_bg-hover: var(--color-neutral-800);
+		--_bg-active: var(--color-neutral-700);
+	}
+
+	/* Default soft in dark mode */
+	.dark .stuic-button:not([data-intent])[data-variant="soft"] {
+		--_text: var(--color-neutral-200);
+		--_text-hover: var(--color-neutral-100);
+		--_text-active: var(--color-neutral-100);
+		--_bg: var(--color-neutral-800);
+		--_bg-hover: var(--color-neutral-700);
+		--_bg-active: var(--color-neutral-600);
+	}
+
+	/* Default link in dark mode */
+	.dark .stuic-button:not([data-intent])[data-variant="link"] {
+		--_text: var(--color-neutral-300);
+		--_text-hover: var(--color-neutral-100);
+		--_text-active: var(--color-neutral-100);
+	}
+
+	/* ============================================================================
+	   MUTED MODIFIER
+	   ============================================================================ */
+
+	.stuic-button[data-muted="true"] {
+		opacity: 0.7;
+	}
+
+	.stuic-button[data-muted="true"]:hover:not(:disabled) {
+		opacity: 0.85;
+	}
+
+	/* ============================================================================
+	   RAISED (3D PUSH) EFFECT
+	   Override globally: :root { --stuic-button-raised-offset: 4px; }
+	   Override locally:  <Button raised style="--stuic-button-raised-offset: 5px;">
+	   ============================================================================ */
+
+	.stuic-button[data-raised] {
+		box-shadow: var(--stuic-button-raised-offset) var(--stuic-button-raised-offset) 0 0
+			var(--stuic-button-raised-color);
+		transition:
+			background var(--stuic-button-transition),
+			color var(--stuic-button-transition),
+			border-color var(--stuic-button-transition),
+			opacity var(--stuic-button-transition),
+			box-shadow var(--stuic-button-transition),
+			transform var(--stuic-button-transition);
+	}
+
+	.stuic-button[data-raised]:active:not(:disabled) {
+		box-shadow: none;
+		transform: translate(
+			var(--stuic-button-raised-offset),
+			var(--stuic-button-raised-offset)
+		);
+	}
+
+	/* ============================================================================
+	   ROUNDED FULL
+	   ============================================================================ */
+	.stuic-button[data-rounded-full] {
+		--stuic-button-radius: 9999px;
+	}
+
+	/* ============================================================================
+	   SQUARED (1:1 aspect ratio)
+	   ============================================================================ */
+	.stuic-button[data-aspect1] {
+		aspect-ratio: 1;
+	}
+
+	.stuic-button[data-aspect1][data-size="sm"] {
+		min-width: var(--stuic-button-min-height-sm);
+		min-height: var(--stuic-button-min-height-sm);
+		padding: var(--stuic-button-padding-y-sm);
+	}
 
-	--color-button-text: var(--color-button-text, var(--color-black));
-	--color-button-text-dark: var(--color-button-text-dark, var(--color-white));
+	.stuic-button[data-aspect1][data-size="md"] {
+		min-width: var(--stuic-button-min-height-md);
+		min-height: var(--stuic-button-min-height-md);
+		padding: var(--stuic-button-padding-y-md);
+	}
 
-	--color-button-border: var(--color-button-border, var(--color-neutral-400));
-	--color-button-border-dark: var(--color-button-border-dark, var(--color-neutral-600));
+	.stuic-button[data-aspect1][data-size="lg"] {
+		min-width: var(--stuic-button-min-height-lg);
+		min-height: var(--stuic-button-min-height-lg);
+		padding: var(--stuic-button-padding-y-lg);
+	}
 
-	--color-button-border-focus: var(--color-button-border-focus, var(--color-neutral-500));
-	--color-button-border-focus-dark: var(--color-button-border-focus-dark, var(--color-neutral-500));
+	.stuic-button[data-aspect1][data-size="xl"] {
+		min-width: var(--stuic-button-min-height-xl);
+		min-height: var(--stuic-button-min-height-xl);
+		padding: var(--stuic-button-padding-y-xl);
+	}
 }

package/dist/components/Button/index.d.ts

@@ -1 +1 @@
-export { default as Button, type Props as ButtonProps } from "./Button.svelte";
+export { default as Button, type Props as ButtonProps, type ButtonVariant, type ButtonSize, } from "./Button.svelte";

package/dist/components/Button/index.js

@@ -1 +1 @@
-export { default as Button } from "./Button.svelte";
+export { default as Button, } from "./Button.svelte";