@nexxtmove/ui 2.3.0 → 2.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "2.3.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"

package/src/components/organisms/VideoControls/VideoControls.vue

@@ -54,9 +54,16 @@ export interface NexxtVideoControlsProps {
   fullscreenTarget?: HTMLElement | null
   /**
    * `full`: the bar; `toggle`: a 32px play/pause button in the corner, with mute to its left on
-   * hover, focus or a tap. Both hide while playing by the same rules. Defaults to `full`.
+   * hover, focus or a tap (see `showMute`). Both hide while playing by the same rules. Defaults
+   * to `full`.
    */
   variant?: NexxtVideoControlsVariant
+  /**
+   * Toggle only: the mute button left of play/pause. Off leaves play/pause alone in the corner,
+   * e.g. for a background video that is always muted and may only be paused. The `full` bar
+   * ignores it. Defaults to `true`.
+   */
+  showMute?: boolean
   /** The video's name, for the name of the bar (or of the toggle's buttons). */
   name?: string
   /** Hide the bar (or the toggle) after inactivity while the video plays. Off keeps it on show. Defaults to `true`. */
@@ -81,6 +88,7 @@ const {
   target,
   fullscreenTarget = null,
   variant = 'full',
+  showMute = true,
   name = '',
   autoHide = true,
   hideDelay = 2500,
@@ -583,9 +591,11 @@ const onVideoClick = () => {
     return
   }
 
-  // A tap toggles what touch cannot hover for: the bar, or the toggle's mute button
+  // A tap toggles what touch cannot hover for: the bar, or the toggle's mute button. A toggle
+  // without one is a bar of one button: the tap toggles the toggle itself
   clearTimeout(touchTimer)
-  touchShown.value = !(variant === 'toggle' ? toggleMuteShown.value : visible.value)
+  const tapRevealsMute = variant === 'toggle' && showMute
+  touchShown.value = !(tapRevealsMute ? toggleMuteShown.value : visible.value)
   if (touchShown.value) {
     touchTimer = setTimeout(() => {
       touchShown.value = false
@@ -747,7 +757,7 @@ onBeforeUnmount(() => {
       The corner buttons: play/pause in the corner, and mute to its left on hover, focus or a tap
       (DOM and tab order follow what is seen: mute, then play). Mute is transparent when hidden,
       never removed, so play keeps its place and both stay in the tab order. Both fade with the
-      same rules as the bar.
+      same rules as the bar. Without `showMute` there is no mute at all; play stays in the corner.
     -->
     <div
       ref="capsule"
@@ -762,6 +772,7 @@ onBeforeUnmount(() => {
       @keydown="onKeyInside"
     >
       <button
+        v-if="showMute"
         type="button"
         :aria-label="toggleMuteLabel"
         class="group/mute flex cursor-pointer rounded-full bg-black/50 small-normal text-white ring-1 ring-white/30 backdrop-blur-xs transition-opacity focus-visible:ring-2 focus-visible:ring-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 motion-reduce:transition-none"