@marianmeres/stuic 2.57.0 → 2.59.0

package/dist/components/AppShell/AppShell.svelte

@@ -38,7 +38,7 @@
 		elFooter?: HTMLElement;
 	}
 
-	export const MAIN_WIDTH = Symbol("MAIN_WIDTH");
+	export const APP_SHELL_MAIN_WIDTH = Symbol("APP_SHELL_MAIN_WIDTH");
 
 	/**
 	 * Helper utility function which sets document.body height to 100vh, and overflow: hidden.
@@ -103,7 +103,7 @@
 
 	// pragmatic use case...
 	let mainWidth: number = $state(0);
-	setContext(MAIN_WIDTH, {
+	setContext(APP_SHELL_MAIN_WIDTH, {
 		get current() {
 			return mainWidth;
 		},

package/dist/components/AppShell/AppShell.svelte.d.ts

@@ -33,7 +33,7 @@ export interface Props {
     elSidebarRight?: HTMLElement;
     elFooter?: HTMLElement;
 }
-export declare const MAIN_WIDTH: unique symbol;
+export declare const APP_SHELL_MAIN_WIDTH: unique symbol;
 /**
  * Helper utility function which sets document.body height to 100vh, and overflow: hidden.
  * It also returns a function which unsets the full height. So we can write:

package/dist/components/AppShell/AppShellSimple.svelte

@@ -9,6 +9,8 @@
 		railClass?: string;
 		asideClass?: string;
 		mainClass?: string;
+		// header support style as well (for iOS theming, seem to be better supported)
+		headerStyle?: string;
 		//
 		rail?: Snippet;
 		header?: Snippet;
@@ -21,7 +23,7 @@
 		elMain?: HTMLElement;
 	}
 
-	export const MAIN_WIDTH = Symbol("MAIN_WIDTH");
+	export const APP_SHELL_SIMPLE_MAIN_WIDTH = Symbol("APP_SHELL_SIMPLE_MAIN_WIDTH");
 </script>
 
 <script lang="ts">
@@ -33,6 +35,8 @@
 		asideClass,
 		mainClass,
 		//
+		headerStyle = "",
+		//
 		rail,
 		header,
 		aside,
@@ -48,7 +52,7 @@
 
 	// pragmatic use case...
 	let mainWidth: number = $state(0);
-	setContext(MAIN_WIDTH, {
+	setContext(APP_SHELL_SIMPLE_MAIN_WIDTH, {
 		get current() {
 			return mainWidth;
 		},
@@ -61,6 +65,7 @@
 		bind:clientHeight={headerHeight}
 		data-shell="header"
 		class={twMerge("sticky top-0 z-10", headerClass)}
+		style={headerStyle}
 	>
 		{@render header()}
 	</header>
@@ -106,7 +111,7 @@
 	<main
 		bind:this={elMain}
 		data-shell="main"
-		class={twMerge("flex-1", mainClass)}
+		class={twMerge("flex-1 max-w-full", mainClass)}
 		bind:offsetWidth={mainWidth}
 	>
 		{@render children?.()}

package/dist/components/AppShell/AppShellSimple.svelte.d.ts

@@ -5,6 +5,7 @@ export interface Props {
     railClass?: string;
     asideClass?: string;
     mainClass?: string;
+    headerStyle?: string;
     rail?: Snippet;
     header?: Snippet;
     aside?: Snippet;
@@ -14,7 +15,7 @@ export interface Props {
     elAside?: HTMLElement;
     elMain?: HTMLElement;
 }
-export declare const MAIN_WIDTH: unique symbol;
+export declare const APP_SHELL_SIMPLE_MAIN_WIDTH: unique symbol;
 declare const AppShellSimple: import("svelte").Component<Props, {}, "elRail" | "elHeader" | "elAside" | "elMain">;
 type AppShellSimple = ReturnType<typeof AppShellSimple>;
 export default AppShellSimple;

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

@@ -1,2 +1,2 @@
-export { default as AppShell, type Props as AppShellProps, appShellSetHtmlBodyHeight, MAIN_WIDTH, } from "./AppShell.svelte";
-export { default as AppShellSimple, type Props as AppShellSimpleProps, MAIN_WIDTH as APP_SHELL_SIMPLE_MAIN_WIDTH, } from "./AppShellSimple.svelte";
+export { default as AppShell, type Props as AppShellProps, appShellSetHtmlBodyHeight, APP_SHELL_MAIN_WIDTH, } from "./AppShell.svelte";
+export { default as AppShellSimple, type Props as AppShellSimpleProps, APP_SHELL_SIMPLE_MAIN_WIDTH, } from "./AppShellSimple.svelte";

package/dist/components/AppShell/index.js

@@ -1,2 +1,2 @@
-export { default as AppShell, appShellSetHtmlBodyHeight, MAIN_WIDTH, } from "./AppShell.svelte";
-export { default as AppShellSimple, MAIN_WIDTH as APP_SHELL_SIMPLE_MAIN_WIDTH, } from "./AppShellSimple.svelte";
+export { default as AppShell, appShellSetHtmlBodyHeight, APP_SHELL_MAIN_WIDTH, } from "./AppShell.svelte";
+export { default as AppShellSimple, APP_SHELL_SIMPLE_MAIN_WIDTH, } from "./AppShellSimple.svelte";

package/dist/components/ButtonGroupRadio/ButtonGroupRadio.svelte

@@ -101,7 +101,7 @@
         border-button-group-border dark:border-button-group-border-dark
 		flex justify-between
         
-        focus-within:border-button-group-accent focus-within:dark:border-button-group-accent-dark
+        focus-within:border-button-group-accent  focus-within:dark:border-button-group-accent-dark
         focus-within:ring-button-group-accent/20 focus-within:dark:ring-button-group-accent-dark/20
         focus-within:ring-4
     `;

package/dist/components/DropdownMenu/DropdownMenu.svelte

@@ -210,9 +210,9 @@
 		text-neutral-900 dark:text-neutral-100
 		border-neutral-200 dark:border-neutral-700
 		hover:brightness-95 dark:hover:brightness-110
-		focus-visible:outline-2 focus-visible:outline-offset-2
 		cursor-pointer
-	`;
+		`;
+	// focus-visible:outline-2 focus-visible:outline-offset-2
 
 	export const DROPDOWN_MENU_DROPDOWN_CLASSES = `
 		stuic-dropdown-menu-dropdown
@@ -703,12 +703,12 @@
 						role="menuitem"
 						class={twMerge(
 							DROPDOWN_MENU_ITEM_CLASSES,
+							classItem,
+							item.class,
 							isActive && "bg-neutral-200 dark:bg-neutral-600",
 							isActive && classItemActive,
 							item.disabled && "opacity-50 cursor-not-allowed pointer-events-none",
-							item.disabled && classItemDisabled,
-							classItem,
-							item.class
+							item.disabled && classItemDisabled
 						)}
 						onclick={() => selectItem(item)}
 						onmouseenter={() => navItems.setActive(item)}
@@ -761,12 +761,12 @@
 							class={twMerge(
 								DROPDOWN_MENU_ITEM_CLASSES,
 								"font-medium",
+								classExpandable,
+								item.class,
 								isExpandableActive && "bg-neutral-200 dark:bg-neutral-600",
 								isExpandableActive && classItemActive,
 								item.disabled && "opacity-50 cursor-not-allowed pointer-events-none",
-								item.disabled && classItemDisabled,
-								classExpandable,
-								item.class
+								item.disabled && classItemDisabled
 							)}
 							onclick={() => toggleExpanded(item.id)}
 							onmouseenter={() =>
@@ -815,13 +815,13 @@
 											role="menuitem"
 											class={twMerge(
 												DROPDOWN_MENU_ITEM_CLASSES,
+												classItem,
+												childItem.class,
 												isChildActive && "bg-neutral-200 dark:bg-neutral-600",
 												isChildActive && classItemActive,
 												childItem.disabled &&
 													"opacity-50 cursor-not-allowed pointer-events-none",
-												childItem.disabled && classItemDisabled,
-												classItem,
-												childItem.class
+												childItem.disabled && classItemDisabled
 											)}
 											onclick={() => selectItem(childItem)}
 											onmouseenter={() => navItems.setActive(childItem)}

package/dist/components/DropdownMenu/DropdownMenu.svelte.d.ts

@@ -143,7 +143,7 @@ export interface Props extends Omit<HTMLButtonAttributes, "children"> {
     noScrollLock?: boolean;
 }
 export declare const DROPDOWN_MENU_BASE_CLASSES = "stuic-dropdown-menu relative inline-block";
-export declare const DROPDOWN_MENU_TRIGGER_CLASSES = "\n\t\tinline-flex items-center justify-center gap-2\n\t\tpx-3 py-2\n\t\trounded-md border\n\t\tbg-white dark:bg-neutral-800\n\t\ttext-neutral-900 dark:text-neutral-100\n\t\tborder-neutral-200 dark:border-neutral-700\n\t\thover:brightness-95 dark:hover:brightness-110\n\t\tfocus-visible:outline-2 focus-visible:outline-offset-2\n\t\tcursor-pointer\n\t";
+export declare const DROPDOWN_MENU_TRIGGER_CLASSES = "\n\t\tinline-flex items-center justify-center gap-2\n\t\tpx-3 py-2\n\t\trounded-md border\n\t\tbg-white dark:bg-neutral-800\n\t\ttext-neutral-900 dark:text-neutral-100\n\t\tborder-neutral-200 dark:border-neutral-700\n\t\thover:brightness-95 dark:hover:brightness-110\n\t\tcursor-pointer\n\t\t";
 export declare const DROPDOWN_MENU_DROPDOWN_CLASSES = "\n\t\tstuic-dropdown-menu-dropdown\n\t\tbg-white dark:bg-neutral-800\n\t\ttext-neutral-900 dark:text-neutral-100\n\t\tborder border-neutral-200 dark:border-neutral-700\n\t\trounded-md shadow-sm\n\t\tp-1\n\t\toverflow-y-auto\n\t\tz-50\n\t\tmin-w-48\n\t";
 export declare const DROPDOWN_MENU_ITEM_CLASSES = "\n\t\tw-full\n\t\tflex items-center gap-2\n\t\tpx-3 py-1.5\n\t\tmin-h-[44px]\n\t\ttext-left \n\t\trounded-md\n\t\tcursor-pointer\n\t\ttouch-action-manipulation\n\t\thover:bg-neutral-100 dark:hover:bg-neutral-700\n\t\tfocus:outline-none\n\t\tfocus-visible:bg-neutral-200 dark:focus-visible:bg-neutral-600\n\t";
 export declare const DROPDOWN_MENU_DIVIDER_CLASSES = "\n\t\th-px my-1\n\t\tbg-neutral-200 dark:bg-neutral-700\n\t";

package/dist/components/KbdShortcut/KbdShortcut.svelte

@@ -75,7 +75,7 @@
 
 <kbd
 	class={twMerge(
-		"text-xs leading-0 space-x-0.5 rounded px-1 py-0 outline outline-neutral-400",
+		"text-sm leading-0 space-x-0.5 rounded px-1 py-0 outline outline-neutral-400",
 		classProp
 	)}
 >

package/dist/icons/index.d.ts

@@ -35,3 +35,4 @@ export { iconLucideCircle as iconCircle } from "@marianmeres/icons-fns/lucide/ic
 export { iconLucideSquare as iconSquare } from "@marianmeres/icons-fns/lucide/iconLucideSquare.js";
 export { iconLucideMenu as iconMenu } from "@marianmeres/icons-fns/lucide/iconLucideMenu.js";
 export { iconLucideUser as iconUser } from "@marianmeres/icons-fns/lucide/iconLucideUser.js";
+export { iconLucideEllipsisVertical as iconEllipsisVertical } from "@marianmeres/icons-fns/lucide/iconLucideEllipsisVertical.js";

package/dist/icons/index.js

@@ -39,3 +39,4 @@ export { iconLucideCircle as iconCircle } from "@marianmeres/icons-fns/lucide/ic
 export { iconLucideSquare as iconSquare } from "@marianmeres/icons-fns/lucide/iconLucideSquare.js";
 export { iconLucideMenu as iconMenu } from "@marianmeres/icons-fns/lucide/iconLucideMenu.js";
 export { iconLucideUser as iconUser } from "@marianmeres/icons-fns/lucide/iconLucideUser.js";
+export { iconLucideEllipsisVertical as iconEllipsisVertical } from "@marianmeres/icons-fns/lucide/iconLucideEllipsisVertical.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "2.57.0",
+  "version": "2.59.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",