@alikhalilll/a-tel-input 1.1.0 → 1.1.1

package/dist/styles.css

@@ -1,5 +1,5 @@
 /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-outline-style:solid;--tw-ease:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}:root,:host{--spacing:.25rem;--ease-in:cubic-bezier(.4, 0, 1, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}.collapse{visibility:collapse}.fixed{position:fixed}.static{position:static}.contents{display:contents}.flex{display:flex}.inline{display:inline}.table{display:table}.flex-shrink{flex-shrink:1}.ps-1{padding-inline-start:calc(var(--spacing) * 1)}.accent-foreground{accent-color:hsl(var(--ak-ui-foreground))}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.visible{visibility:visible}.sticky{position:sticky}.block{display:block}.hidden{display:none}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.border{border-style:var(--tw-border-style);border-width:1px}.text-popover-foreground{color:hsl(var(--ak-ui-popover-foreground))}@property --tw-ease{syntax:"*";inherits:false}.a-popover__overlay{z-index:50;pointer-events:auto;background:#000000b3;position:fixed;inset:0}.a-popover__overlay[data-state=open]{animation:.15s ease-out a-popover-overlay-in}.a-popover__overlay[data-state=closed]{animation:.1s ease-in forwards a-popover-overlay-out}@keyframes a-popover-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes a-popover-overlay-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.a-popover__overlay[data-state=open],.a-popover__overlay[data-state=closed]{animation:none}}.a-popover__content{z-index:60;border-radius:calc(var(--ak-ui-radius) - 2px);border:1px solid hsl(var(--ak-ui-border) / .7);background:hsl(var(--ak-ui-popover));width:18rem;color:hsl(var(--ak-ui-popover-foreground));outline:none;padding:1rem;box-shadow:0 20px 25px -5px #00000026,0 8px 10px -6px #00000026}.a-popover__content[data-state=open]{animation:.15s ease-out a-popover-in}.a-popover__content[data-state=closed]{animation:.1s ease-in forwards a-popover-out}@keyframes a-popover-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes a-popover-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.a-popover__content[data-state=open],.a-popover__content[data-state=closed]{animation:none}}:root,.light{--ak-ui-background:0 0% 100%;--ak-ui-foreground:240 10% 3.9%;--ak-ui-card:0 0% 100%;--ak-ui-card-foreground:240 10% 3.9%;--ak-ui-popover:0 0% 100%;--ak-ui-popover-foreground:240 10% 3.9%;--ak-ui-primary:240 5.9% 10%;--ak-ui-primary-foreground:0 0% 98%;--ak-ui-secondary:240 4.8% 95.9%;--ak-ui-secondary-foreground:240 5.9% 10%;--ak-ui-muted:240 4.8% 95.9%;--ak-ui-muted-foreground:240 3.8% 46.1%;--ak-ui-accent:240 4.8% 95.9%;--ak-ui-accent-foreground:240 5.9% 10%;--ak-ui-destructive:0 84.2% 60.2%;--ak-ui-destructive-foreground:0 0% 98%;--ak-ui-border:240 5.9% 90%;--ak-ui-input:240 5.9% 90%;--ak-ui-ring:240 5.9% 10%;--ak-ui-radius:.5rem}.dark{--ak-ui-background:240 10% 3.9%;--ak-ui-foreground:0 0% 98%;--ak-ui-card:240 10% 3.9%;--ak-ui-card-foreground:0 0% 98%;--ak-ui-popover:240 10% 3.9%;--ak-ui-popover-foreground:0 0% 98%;--ak-ui-primary:0 0% 98%;--ak-ui-primary-foreground:240 5.9% 10%;--ak-ui-secondary:240 3.7% 15.9%;--ak-ui-secondary-foreground:0 0% 98%;--ak-ui-muted:240 3.7% 15.9%;--ak-ui-muted-foreground:240 5% 64.9%;--ak-ui-accent:240 3.7% 15.9%;--ak-ui-accent-foreground:0 0% 98%;--ak-ui-destructive:0 62.8% 30.6%;--ak-ui-destructive-foreground:0 0% 98%;--ak-ui-border:240 3.7% 15.9%;--ak-ui-input:240 3.7% 15.9%;--ak-ui-ring:240 4.9% 83.9%}:root,:host{--ease-in:cubic-bezier(.4, 0, 1, 1)}.text-foreground{color:hsl(var(--ak-ui-foreground))}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.a-drawer__overlay{z-index:40;background:#000000b3;position:fixed;inset:0}.a-drawer__overlay[data-state=open]{animation:.2s ease-out a-drawer-overlay-in}.a-drawer__overlay[data-state=closed]{animation:.15s ease-in forwards a-drawer-overlay-out}@keyframes a-drawer-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes a-drawer-overlay-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.a-drawer__overlay[data-state=open],.a-drawer__overlay[data-state=closed]{animation:none}}.a-drawer__content{z-index:50;background:hsl(var(--ak-ui-background));height:auto;color:hsl(var(--ak-ui-foreground));inset-inline:0;border-top-left-radius:10px;border-top-right-radius:10px;outline:none;flex-direction:column;margin-top:6rem;display:flex;position:fixed;bottom:0;box-shadow:0 25px 50px -12px #0000004d,0 12px 24px -8px #00000040}.a-drawer__handle{background:hsl(var(--ak-ui-muted));border-radius:999px;width:100px;height:.5rem;margin:1rem auto 0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-outline-style:solid;--tw-ease:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}:root,:host{--spacing:.25rem;--ease-in:cubic-bezier(.4, 0, 1, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}.collapse{visibility:collapse}.fixed{position:fixed}.static{position:static}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.contents{display:contents}.flex{display:flex}.inline{display:inline}.table{display:table}.flex-shrink{flex-shrink:1}.ps-1{padding-inline-start:calc(var(--spacing) * 1)}.accent-foreground{accent-color:hsl(var(--ak-ui-foreground))}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.visible{visibility:visible}.sticky{position:sticky}.block{display:block}.hidden{display:none}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.border{border-style:var(--tw-border-style);border-width:1px}.text-popover-foreground{color:hsl(var(--ak-ui-popover-foreground))}@property --tw-ease{syntax:"*";inherits:false}.a-popover__overlay{z-index:50;pointer-events:auto;background:#000000b3;position:fixed;inset:0}.a-popover__overlay[data-state=open]{animation:.15s ease-out a-popover-overlay-in}.a-popover__overlay[data-state=closed]{animation:.1s ease-in forwards a-popover-overlay-out}@keyframes a-popover-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes a-popover-overlay-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.a-popover__overlay[data-state=open],.a-popover__overlay[data-state=closed]{animation:none}}.a-popover__content{z-index:60;border-radius:calc(var(--ak-ui-radius) - 2px);border:1px solid hsl(var(--ak-ui-border) / .7);background:hsl(var(--ak-ui-popover));width:18rem;color:hsl(var(--ak-ui-popover-foreground));outline:none;padding:1rem;box-shadow:0 20px 25px -5px #00000026,0 8px 10px -6px #00000026}.a-popover__content[data-state=open]{animation:.15s ease-out a-popover-in}.a-popover__content[data-state=closed]{animation:.1s ease-in forwards a-popover-out}@keyframes a-popover-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes a-popover-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.a-popover__content[data-state=open],.a-popover__content[data-state=closed]{animation:none}}:root,.light{--ak-ui-background:0 0% 100%;--ak-ui-foreground:240 10% 3.9%;--ak-ui-card:0 0% 100%;--ak-ui-card-foreground:240 10% 3.9%;--ak-ui-popover:0 0% 100%;--ak-ui-popover-foreground:240 10% 3.9%;--ak-ui-primary:240 5.9% 10%;--ak-ui-primary-foreground:0 0% 98%;--ak-ui-secondary:240 4.8% 95.9%;--ak-ui-secondary-foreground:240 5.9% 10%;--ak-ui-muted:240 4.8% 95.9%;--ak-ui-muted-foreground:240 3.8% 46.1%;--ak-ui-accent:240 4.8% 95.9%;--ak-ui-accent-foreground:240 5.9% 10%;--ak-ui-destructive:0 84.2% 60.2%;--ak-ui-destructive-foreground:0 0% 98%;--ak-ui-border:240 5.9% 90%;--ak-ui-input:240 5.9% 90%;--ak-ui-ring:240 5.9% 10%;--ak-ui-radius:.5rem}.dark{--ak-ui-background:240 10% 3.9%;--ak-ui-foreground:0 0% 98%;--ak-ui-card:240 10% 3.9%;--ak-ui-card-foreground:0 0% 98%;--ak-ui-popover:240 10% 3.9%;--ak-ui-popover-foreground:0 0% 98%;--ak-ui-primary:0 0% 98%;--ak-ui-primary-foreground:240 5.9% 10%;--ak-ui-secondary:240 3.7% 15.9%;--ak-ui-secondary-foreground:0 0% 98%;--ak-ui-muted:240 3.7% 15.9%;--ak-ui-muted-foreground:240 5% 64.9%;--ak-ui-accent:240 3.7% 15.9%;--ak-ui-accent-foreground:0 0% 98%;--ak-ui-destructive:0 62.8% 30.6%;--ak-ui-destructive-foreground:0 0% 98%;--ak-ui-border:240 3.7% 15.9%;--ak-ui-input:240 3.7% 15.9%;--ak-ui-ring:240 4.9% 83.9%}:root,:host{--ease-in:cubic-bezier(.4, 0, 1, 1)}.text-foreground{color:hsl(var(--ak-ui-foreground))}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.a-drawer__overlay{z-index:40;background:#000000b3;position:fixed;inset:0}.a-drawer__overlay[data-state=open]{animation:.2s ease-out a-drawer-overlay-in}.a-drawer__overlay[data-state=closed]{animation:.15s ease-in forwards a-drawer-overlay-out}@keyframes a-drawer-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes a-drawer-overlay-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.a-drawer__overlay[data-state=open],.a-drawer__overlay[data-state=closed]{animation:none}}.a-drawer__content{z-index:50;background:hsl(var(--ak-ui-background));height:auto;color:hsl(var(--ak-ui-foreground));inset-inline:0;border-top-left-radius:10px;border-top-right-radius:10px;outline:none;flex-direction:column;margin-top:6rem;display:flex;position:fixed;bottom:0;box-shadow:0 25px 50px -12px #0000004d,0 12px 24px -8px #00000040}.a-drawer__handle{background:hsl(var(--ak-ui-muted));border-radius:999px;width:100px;height:.5rem;margin:1rem auto 0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}
 /* --- bundled SFC styles --- */
 
 .a-country-flag[data-v-705c2224] {
@@ -112,7 +112,9 @@ to {
 }
 .a-country-select__search {
   border-bottom: 1px solid hsl(var(--ak-ui-border) / 0.7);
-  padding: 0.375rem;
+  /* Drop bottom padding — the list owns the gap below the search border so the
+     sticky group header can overlap it and sit flush against the search bar. */
+  padding: 0.375rem 0.375rem 0;
 }
 .a-country-select__search-box {
   position: relative;
@@ -179,6 +181,10 @@ to {
 .a-country-select__list {
   flex: 1;
   overflow-y: auto;
+  /* Top padding lives inside the scroll container so the first sticky group header
+     can overlap it (via negative `top`) and sit flush against the search border
+     with zero visible gap. */
+  padding-top: 0.375rem;
   /* Themed scrollbar — Firefox + WebKit/Blink. Resolves the browser-default
      light-grey scrollbar that didn't match the popover surface in dark mode. */
   scrollbar-width: thin;
@@ -207,16 +213,24 @@ to {
 }
 .a-country-select__group-header {
   position: sticky;
-  top: 0;
+  /* Negative top equal to the list's `padding-top` makes the sticky header
+     overlap that padding band so when the user scrolls it sits flush against
+     the search bar's bottom border — no visible gap. */
+  top: -0.375rem;
   z-index: 10;
   background: hsl(var(--ak-ui-popover));
   color: hsl(var(--ak-ui-muted-foreground));
-  padding: 0.375rem 0.75rem;
+  /* Extra top padding compensates for the negative `top` offset so the visible
+     label keeps its usual breathing room. */
+  padding: 0.5rem 0.75rem 0.375rem;
   font-size: 10px;
   font-weight: 500;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   margin: 0;
+  /* Hairline under the header that only shows once it's stuck — helps it read
+     as a distinct band from the search border above. */
+  box-shadow: 0 1px 0 0 hsl(var(--ak-ui-border) / 0.5);
 }
 .a-country-select__group-list {
   list-style: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alikhalilll/a-tel-input",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Headless, shadcn-vue style Vue 3 international telephone input with country detection, validation, and a responsive country picker. Part of the @alikhalilll/a-* toolkit.",
   "license": "MIT",
   "author": "alikhalilll",
@@ -94,6 +94,7 @@
   "files": [
     "dist",
     "src",
+    ".media",
     "web-types.json",
     "README.md",
     "LICENSE"

package/src/components/ACountrySelect.vue

@@ -586,7 +586,9 @@ defineExpose({
 
 .a-country-select__search {
   border-bottom: 1px solid hsl(var(--ak-ui-border) / 0.7);
-  padding: 0.375rem;
+  /* Drop bottom padding — the list owns the gap below the search border so the
+     sticky group header can overlap it and sit flush against the search bar. */
+  padding: 0.375rem 0.375rem 0;
 }
 .a-country-select__search-box {
   position: relative;
@@ -654,6 +656,10 @@ defineExpose({
 .a-country-select__list {
   flex: 1;
   overflow-y: auto;
+  /* Top padding lives inside the scroll container so the first sticky group header
+     can overlap it (via negative `top`) and sit flush against the search border
+     with zero visible gap. */
+  padding-top: 0.375rem;
   /* Themed scrollbar — Firefox + WebKit/Blink. Resolves the browser-default
      light-grey scrollbar that didn't match the popover surface in dark mode. */
   scrollbar-width: thin;
@@ -683,16 +689,24 @@ defineExpose({
 
 .a-country-select__group-header {
   position: sticky;
-  top: 0;
+  /* Negative top equal to the list's `padding-top` makes the sticky header
+     overlap that padding band so when the user scrolls it sits flush against
+     the search bar's bottom border — no visible gap. */
+  top: -0.375rem;
   z-index: 10;
   background: hsl(var(--ak-ui-popover));
   color: hsl(var(--ak-ui-muted-foreground));
-  padding: 0.375rem 0.75rem;
+  /* Extra top padding compensates for the negative `top` offset so the visible
+     label keeps its usual breathing room. */
+  padding: 0.5rem 0.75rem 0.375rem;
   font-size: 10px;
   font-weight: 500;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   margin: 0;
+  /* Hairline under the header that only shows once it's stuck — helps it read
+     as a distinct band from the search border above. */
+  box-shadow: 0 1px 0 0 hsl(var(--ak-ui-border) / 0.5);
 }
 
 .a-country-select__group-list {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@alikhalilll/a-tel-input",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "js-types-syntax": "typescript",
   "description-markup": "markdown",
   "framework": "vue",