@nexxtmove/ui 2.4.0 → 2.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/editor/molecules/EditorHeadingType/EditorHeadingType.vue

@@ -110,9 +110,9 @@ const selected = computed({
 <template>
   <NexxtEditorSettingsBlock :label="label">
     <!--
-      Select is `inline-flex` and its field carries a `min-w-60`, so without
-      `w-full` it would sit at that minimum instead of filling the block. The
-      class lands on Select's root, whose trigger is already `w-full`.
+      Select is `inline-flex` and 240px wide by default (capped at its
+      container), so without `w-full` it would sit at 240px instead of filling
+      the block. The class lands on Select's root; the trigger grows with it.
     -->
     <!--
       The block label is a <p>, not a <label>, so the combobox would have no

package/src/components/molecules/Select/Select.vue

@@ -151,7 +151,7 @@ watch(model, () => {
 </script>
 
 <template>
-  <div class="inline-flex flex-col gap-1">
+  <div class="inline-flex flex-col gap-1 [:where(&)]:max-w-full">
     <label v-if="label" class="justify-start small-normal text-gray-700" :for="selectId">
       {{ label }}
       <span v-if="required" class="text-brick-500">*</span>
@@ -165,6 +165,10 @@ watch(model, () => {
       @open="activeIndex = selectedIndex >= 0 ? selectedIndex : activeIndex"
     >
       <template #trigger="{ isOpen, toggle }">
+        <!-- The 240px default width lives here, as the trigger's flex basis: it
+             holds in a shrink-to-fit wrapper, and the trigger shrinks below it
+             (min-w-0) or grows past it with any width the root gets. The root's
+             max-w-full, at zero specificity, keeps it inside a narrow column. -->
         <div
           :id="selectId"
           role="combobox"
@@ -174,7 +178,7 @@ watch(model, () => {
           :aria-controls="isOpen ? listboxId : undefined"
           :aria-activedescendant="isOpen && activeIndex >= 0 ? optionId(activeIndex) : undefined"
           tabindex="0"
-          class="group flex w-full cursor-pointer items-center gap-2 rounded-lg ring transition-colors ease-out focus:ring-cornflower-blue-500 focus:outline-none"
+          class="group flex w-60 min-w-0 grow cursor-pointer items-center gap-2 rounded-lg ring transition-colors ease-out focus:ring-cornflower-blue-500 focus:outline-none"
           :class="[
             error ? 'ring-brick-400' : 'ring-gray-200',
             { 'pl-3': triggerIcon, 'pr-3': true },
@@ -185,11 +189,13 @@ watch(model, () => {
           <span v-if="triggerIcon" class="flex items-center">
             <NexxtIcon :name="triggerIcon" />
           </span>
+          <!-- The ellipsis needs a block box: text directly in a flex container is
+               an anonymous flex item that `truncate` does not reach. -->
           <span
-            class="flex h-10 w-full min-w-60 items-center text-sm"
+            class="flex h-10 min-w-0 flex-1 items-center text-sm"
             :class="[selectedLabel ? 'text-gray-900' : 'text-gray-400', { 'pl-3': !triggerIcon }]"
           >
-            {{ selectedLabel ?? placeholder }}
+            <span class="truncate">{{ selectedLabel ?? placeholder }}</span>
           </span>
           <NexxtIcon
             name="chevron-down"

package/src/components/organisms/CountrySelect/CountrySelect.vue

@@ -71,7 +71,7 @@ const onOpen = async () => {
 </script>
 
 <template>
-  <div class="inline-flex flex-col gap-1">
+  <div class="inline-flex flex-col gap-1 [:where(&)]:max-w-full">
     <label v-if="label" class="justify-start small-normal text-gray-700" :for="selectId">
       {{ label }}
       <span v-if="required" class="text-brick-500">*</span>
@@ -79,20 +79,24 @@ const onOpen = async () => {
 
     <NexxtFloatingPanel placement="bottom" match-width @open="onOpen">
       <template #trigger="{ isOpen, toggle }">
+        <!-- The 240px default width lives here, as the trigger's flex basis: it
+             holds in a shrink-to-fit wrapper, and the trigger shrinks below it
+             (min-w-0) or grows past it with any width the root gets. The root's
+             max-w-full, at zero specificity, keeps it inside a narrow column. -->
         <div
           :id="selectId"
           role="combobox"
           :aria-expanded="isOpen"
           aria-haspopup="listbox"
           tabindex="0"
-          class="group flex w-full cursor-pointer items-center gap-2 rounded-lg pr-3 ring transition-colors ease-out focus:ring-cornflower-blue-500 focus:outline-none"
+          class="group flex w-60 min-w-0 grow cursor-pointer items-center gap-2 rounded-lg pr-3 ring transition-colors ease-out focus:ring-cornflower-blue-500 focus:outline-none"
           :class="error ? 'ring-brick-400' : 'ring-gray-200'"
           @click="toggle"
           @keydown.enter.prevent="toggle"
           @keydown.space.prevent="toggle"
         >
           <span
-            class="flex h-10 w-full min-w-60 items-center gap-2 pl-3 text-sm"
+            class="flex h-10 min-w-0 flex-1 items-center gap-2 pl-3 text-sm"
             :class="selectedCountry ? 'text-gray-900' : 'text-gray-400'"
           >
             <span
@@ -100,7 +104,8 @@ const onOpen = async () => {
               :class="`fi fi-${selectedCountry.code}`"
               class="shrink-0"
             />
-            {{ selectedCountry?.name ?? placeholder }}
+            <!-- A block box of its own, or `truncate` would not reach the text. -->
+            <span class="truncate">{{ selectedCountry?.name ?? placeholder }}</span>
           </span>
           <NexxtIcon
             name="chevron-down"