@dorsk/tsumikit 0.61.0 → 0.61.1

package/README.md

@@ -656,7 +656,8 @@ takes `label` (its accessible name), `items`, `placement` and the `Menu`
 panel props (`tag`, `panelClass`, `gap`, `open`, `onopen`, `onclose`).
 `variant` (default | primary | danger), `size` and `control` apply to both
 segments and match `Button` heights; `disabled` turns off the whole control,
-`menuDisabled` only the caret. ArrowDown on the primary opens the menu.
+`menuDisabled` only the caret. `caret="half"` narrows the caret to half the
+control height so it reads as secondary. ArrowDown on the primary opens the menu.
 
 ```svelte
 <SplitButton variant="primary" label="Send options" {items} onclick={send}>Send</SplitButton>

package/dist/components/molecules/SplitButton.svelte

@@ -18,6 +18,9 @@
 		size?: ControlSize;
 		/** Use the shared `--control-height` toolbar/composer contract. */
 		control?: boolean;
+		/** `half` narrows the caret to half the control height so it reads as
+		 *  secondary to the primary action. */
+		caret?: 'square' | 'half';
 		/** Disables both segments. */
 		disabled?: boolean;
 		/** Disables the caret only; the primary action keeps working. */
@@ -50,6 +53,7 @@
 		variant = 'default',
 		size = 'md',
 		control = false,
+		caret = 'square',
 		disabled = false,
 		menuDisabled = false,
 		label,
@@ -90,6 +94,7 @@
 	data-tsu="SplitButton"
 	class="split {klass}"
 	class:split-primary={variant === 'primary'}
+	class:split-half={caret === 'half'}
 	style={styleProp}
 	style:--split-height={height}
 >
@@ -152,6 +157,9 @@
 		--pop-trigger-radius: 0 var(--r-md) var(--r-md) 0;
 		--pop-trigger-pad: 0;
 	}
+	.split-half .split-caret {
+		width: calc(var(--split-height) / 2);
+	}
 	/* The hovered or focused segment paints above its neighbour, so its
 	   accent border and focus ring are not cut by the overlap. */
 	.split-main:hover,

package/dist/components/molecules/SplitButton.svelte.d.ts

@@ -8,6 +8,9 @@ type Own = {
     size?: ControlSize;
     /** Use the shared `--control-height` toolbar/composer contract. */
     control?: boolean;
+    /** `half` narrows the caret to half the control height so it reads as
+     *  secondary to the primary action. */
+    caret?: 'square' | 'half';
     /** Disables both segments. */
     disabled?: boolean;
     /** Disables the caret only; the primary action keeps working. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.61.0",
+  "version": "0.61.1",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",