@marianmeres/stuic 3.80.1 → 3.82.0

package/dist/components/Accordion/README.md

@@ -104,6 +104,8 @@ Only one item can be open at a time:
 | `--stuic-accordion-trigger-font-weight` | `--font-weight-medium` | Trigger text weight           |
 | `--stuic-accordion-trigger-bg`          | `transparent`          | Trigger background            |
 | `--stuic-accordion-trigger-bg-hover`    | muted mix              | Trigger hover background      |
+| `--stuic-accordion-chevron-size`        | `16px`                 | Chevron icon size             |
+| `--stuic-accordion-chevron-color`       | `currentColor`         | Chevron icon color            |
 | `--stuic-accordion-content-padding-x`   | `1rem`                 | Content horizontal padding    |
 | `--stuic-accordion-content-padding-y`   | `0.75rem`              | Content vertical padding      |
 | `--stuic-accordion-ring-width`          | `2px`                  | Focus ring width              |

package/dist/components/Accordion/index.css

@@ -21,6 +21,10 @@
 		transparent
 	);
 
+	/* Chevron */
+	--stuic-accordion-chevron-size: 16px;
+	--stuic-accordion-chevron-color: currentColor;
+
 	/* Content */
 	--stuic-accordion-content-padding-x: 1rem;
 	--stuic-accordion-content-padding-y: 0.75rem;
@@ -89,6 +93,9 @@
 
 	.stuic-accordion-chevron {
 		flex-shrink: 0;
+		width: var(--stuic-accordion-chevron-size);
+		height: var(--stuic-accordion-chevron-size);
+		color: var(--stuic-accordion-chevron-color);
 		transition: transform var(--stuic-accordion-transition, var(--stuic-transition));
 	}
 

package/dist/components/Book/BookResponsive.svelte

@@ -38,7 +38,7 @@
 	import type { AssetPreviewNormalized } from "../AssetsPreview/_internal/assets-preview-types.js";
 	import AssetsPreviewInline from "../AssetsPreview/AssetsPreviewInline.svelte";
 	import Button from "../Button/Button.svelte";
-	import IconSwap from "../IconSwap/IconSwap.svelte";
+	import ButtonGroupRadio from "../ButtonGroupRadio/ButtonGroupRadio.svelte";
 	import { bookPagesToAssets } from "./_internal/book-pages-to-assets.js";
 	import Book, {
 		buildSpreads,
@@ -105,15 +105,6 @@
 	);
 
 	const MODE_SWITCH_ICON_SIZE = 19;
-	const modeSwitchStates = [
-		iconBookOpen({ size: MODE_SWITCH_ICON_SIZE, strokeWidth: 2 }),
-		iconFileImage({ size: MODE_SWITCH_ICON_SIZE, strokeWidth: 2 }),
-	];
-	let modeSwitchActive = $derived(useInline ? 1 : 0);
-
-	function toggleMode() {
-		manualMode = useInline ? "book" : "inline";
-	}
 
 	let inlineAssets = $derived(useInline ? bookPagesToAssets(pages, baseUrl) : []);
 
@@ -393,17 +384,27 @@
 		{/if}
 	{/if}
 	{#if !noModeSwitch && !forceInline && !belowThreshold && pages.length > 0}
-		<Button
-			type="button"
-			iconButton
-			class="absolute bottom-4 right-4 border-0"
-			onclick={toggleMode}
-			tooltip={() => ({
-				content: useInline ? "Switch to book view" : "Switch to inline view",
+		<ButtonGroupRadio
+			size="sm"
+			class="absolute bottom-4 right-4 w-auto"
+			value={useInline ? "inline" : "book"}
+			options={[
+				{
+					label: iconBookOpen({ size: MODE_SWITCH_ICON_SIZE, strokeWidth: 2 }),
+					value: "book",
+				},
+				{
+					label: iconFileImage({ size: MODE_SWITCH_ICON_SIZE, strokeWidth: 2 }),
+					value: "inline",
+				},
+			]}
+			buttonProps={(i) => ({
+				tooltip: () => ({ content: i === 0 ? "Book view" : "Inline view" }),
 			})}
-		>
-			<IconSwap states={modeSwitchStates} active={modeSwitchActive} duration={200} />
-		</Button>
+			onButtonClick={(i) => {
+				manualMode = i === 0 ? "book" : "inline";
+			}}
+		/>
 	{/if}
 </div>
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.80.1",
+	"version": "3.82.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && pnpm run prepack",
@@ -79,7 +79,7 @@
 		"vitest": "^3.2.4"
 	},
 	"dependencies": {
-		"@marianmeres/clog": "^3.18.1",
+		"@marianmeres/clog": "^3.19.0",
 		"@marianmeres/cron": "^2.0.0",
 		"@marianmeres/design-tokens": "^1.4.1",
 		"@marianmeres/icons-fns": "^5.0.0",
@@ -88,7 +88,7 @@
 		"@marianmeres/parse-boolean": "^2.1.0",
 		"@marianmeres/ticker": "^1.17.1",
 		"@marianmeres/tree": "^2.3.0",
-		"libphonenumber-js": "^1.13.0",
+		"libphonenumber-js": "^1.13.1",
 		"runed": "^0.23.4",
 		"tailwind-merge": "^3.6.0"
 	}