@marianmeres/stuic 3.85.0 → 3.86.0

package/dist/components/Input/FieldCountry.svelte

@@ -131,6 +131,7 @@
 	}: Props = $props();
 
 	let isOpen = $state(false);
+	let triggerEl: HTMLButtonElement | undefined = $state();
 	let hiddenInputEl: HTMLInputElement | undefined = $state();
 	let validation: ValidationResult | undefined = $state();
 	const setValidationResult = (res: ValidationResult) => (validation = res);
@@ -259,12 +260,13 @@
 	<DropdownMenu
 		{items}
 		bind:isOpen
+		bind:triggerEl
 		position="bottom-span-right"
 		search={searchConfig}
 		maxHeight="300px"
 		closeOnSelect
 		class="stuic-field-country"
-		classDropdown={twMerge("w-72 max-w-[calc(100vw-1rem)]", classDropdown)}
+		classDropdown={twMerge("stuic-field-country-dropdown", classDropdown)}
 	>
 		{#snippet trigger({ toggle, triggerProps })}
 			<!--
@@ -275,6 +277,7 @@
 				on the trigger and `role="menu"` on the popover keep the menu accessible.
 			-->
 			<button
+				bind:this={triggerEl}
 				type="button"
 				class={twMerge(
 					"stuic-field-country-trigger",

package/dist/components/Input/_internal/countries.js

@@ -84,6 +84,7 @@ export const COUNTRIES = [
     { iso: "GP", name: "Guadeloupe", dialCode: "590", flag: "🇬🇵" },
     { iso: "GU", name: "Guam", dialCode: "1671", flag: "🇬🇺" },
     { iso: "GT", name: "Guatemala", dialCode: "502", flag: "🇬🇹" },
+    { iso: "GG", name: "Guernsey", dialCode: "44", flag: "🇬🇬" },
     { iso: "GN", name: "Guinea", dialCode: "224", flag: "🇬🇳" },
     { iso: "GW", name: "Guinea-Bissau", dialCode: "245", flag: "🇬🇼" },
     { iso: "GY", name: "Guyana", dialCode: "592", flag: "🇬🇾" },
@@ -97,11 +98,13 @@ export const COUNTRIES = [
     { iso: "IR", name: "Iran", dialCode: "98", flag: "🇮🇷" },
     { iso: "IQ", name: "Iraq", dialCode: "964", flag: "🇮🇶" },
     { iso: "IE", name: "Ireland", dialCode: "353", flag: "🇮🇪" },
+    { iso: "IM", name: "Isle of Man", dialCode: "44", flag: "🇮🇲" },
     { iso: "IL", name: "Israel", dialCode: "972", flag: "🇮🇱" },
     { iso: "IT", name: "Italy", dialCode: "39", flag: "🇮🇹" },
     { iso: "CI", name: "Ivory Coast", dialCode: "225", flag: "🇨🇮" },
     { iso: "JM", name: "Jamaica", dialCode: "1876", flag: "🇯🇲" },
     { iso: "JP", name: "Japan", dialCode: "81", flag: "🇯🇵" },
+    { iso: "JE", name: "Jersey", dialCode: "44", flag: "🇯🇪" },
     { iso: "JO", name: "Jordan", dialCode: "962", flag: "🇯🇴" },
     { iso: "KZ", name: "Kazakhstan", dialCode: "7", flag: "🇰🇿" },
     { iso: "KE", name: "Kenya", dialCode: "254", flag: "🇰🇪" },

package/dist/components/Input/index.css

@@ -642,6 +642,27 @@
 		min-width: 0;
 	}
 
+	/*
+	 * Suppress the browser's default focus ring on the trigger — InputWrap
+	 * already shows the ring via `.input-wrap:focus-within`.
+	 */
+	.stuic-field-country-trigger:focus,
+	.stuic-field-country-trigger:focus-visible {
+		outline: none;
+		box-shadow: none;
+	}
+
+	/*
+	 * Size the popover to the trigger via CSS Anchor Positioning's
+	 * `anchor-size()`. In browsers without anchor positioning, DropdownMenu
+	 * already switches to a centered-modal fallback, so this rule simply
+	 * doesn't apply there. `min-width` keeps very narrow triggers usable.
+	 */
+	.stuic-field-country-dropdown {
+		width: anchor-size(width);
+		min-width: 12rem;
+	}
+
 	/*
 	 * Reset field-input padding leaking into the popover's search bar
 	 * (mirrors the phone-prefix-picker fix — the input itself is correctly

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.85.0",
+	"version": "3.86.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && pnpm run prepack",