@nexxtmove/ui 1.3.3 → 1.4.0

package/dist/nuxt.js

@@ -27,6 +27,7 @@ var s = {
 	NexxtInputField: "components/InputField/InputField.vue",
 	NexxtInputSelect: "components/InputSelect/InputSelect.vue",
 	NexxtModal: "components/Modal/Modal.vue",
+	NexxtModalFooter: "components/ModalFooter/ModalFooter.vue",
 	NexxtPagination: "components/Pagination/Pagination.vue",
 	NexxtPresenceIndicator: "components/PresenceIndicator/PresenceIndicator.vue",
 	NexxtProgressBar: "components/ProgressBar/ProgressBar.vue",

package/package.json

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

package/src/components/Announcement/Announcement.vue

@@ -1,28 +1,69 @@
 <script lang="ts" setup>
+import { computed } from 'vue'
 import NexxtIcon from '../Icon/Icon.vue'
 
+type AnnouncementVariant = 'info' | 'success' | 'warning' | 'danger' | 'neutral'
+
 interface NexxtAnnouncementProps {
+  /**
+   * Raw CSS background colour, applied inline. Intended for colours supplied by
+   * the API; wins over `variant`. Defaults to `blue` when no `variant` is set.
+   */
   color?: string
+  /**
+   * Raw CSS text colour, applied inline. Snake_case mirrors the API field name.
+   * Wins over `variant`. Defaults to `white` when no `variant` is set.
+   */
   text_color?: string
+  /** Icon shown at the start of the banner. */
   icon?: InstanceType<typeof NexxtIcon>['name']
+  /** Show the close button that emits `hide`. */
   showHideButton?: boolean
+  /** Semantic colour scheme for app-authored banners, applied as design tokens. */
+  variant?: AnnouncementVariant
 }
 
 const {
-  color = 'blue',
-  text_color = 'white',
+  color,
+  text_color,
   icon = 'megaphone',
   showHideButton = true,
+  variant,
 } = defineProps<NexxtAnnouncementProps>()
 
 const emit = defineEmits<{ hide: [] }>()
+
+// Token-based schemes for app-authored banners.
+const variantClasses: Record<AnnouncementVariant, string> = {
+  info: 'bg-cornflower-blue-50 text-cornflower-blue-900',
+  success: 'bg-green-50 text-green-900',
+  warning: 'bg-orange-50 text-orange-900',
+  danger: 'bg-brick-50 text-brick-900',
+  neutral: 'bg-gray-50 text-gray-900',
+}
+
+// Precedence, deliberate and load-bearing:
+//   1. An explicitly supplied `color` / `text_color` always wins. They carry raw
+//      CSS values coming from the API and are applied inline, so they override
+//      any variant class regardless of specificity.
+//   2. Otherwise, a `variant` applies token classes.
+//   3. With neither, the historical inline defaults (blue / white) are used, so
+//      existing consumers that pass nothing render exactly as before.
+const style = computed(() => ({
+  background: color ?? (variant ? undefined : 'blue'),
+  color: text_color ?? (variant ? undefined : 'white'),
+}))
 </script>
 
 <template>
   <div
     class="grid items-center gap-x-3 overflow-hidden rounded-md px-4 py-3"
-    :class="showHideButton ? 'grid-cols-[auto_1fr_auto]' : 'grid-cols-[auto_1fr]'"
-    :style="{ background: color, color: text_color }"
+    :class="[
+      showHideButton ? 'grid-cols-[auto_1fr_auto]' : 'grid-cols-[auto_1fr]',
+      variant ? variantClasses[variant] : '',
+    ]"
+    :style="style"
+    :data-variant="variant"
   >
     <NexxtIcon class="text-lg" :name="icon" />
     <slot />

package/src/components/Chip/Chip.vue

@@ -1,17 +1,25 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import NexxtIcon, { type NexxtIconName } from '../Icon/Icon.vue'
 
 interface NexxtChipProps {
-  variant?: 'default' | 'warning' | 'success' | 'danger' | 'neutral' | 'accent'
+  /** Colour scheme of the chip. */
+  variant?: 'default' | 'warning' | 'success' | 'danger' | 'neutral' | 'accent' | 'yellow'
+  /** Render as a light, outlined chip instead of a solid one. */
   ghost?: boolean
+  /** Optional icon rendered before the default slot. */
+  icon?: NexxtIconName
 }
 
 defineOptions({
   name: 'NexxtChip',
 })
 
-const { variant = 'default', ghost = false } = defineProps<NexxtChipProps>()
+const { variant = 'default', ghost = false, icon } = defineProps<NexxtChipProps>()
 
+// Every variant states its own text colour explicitly rather than relying on a
+// shared default, so a variant that needs to differ can do so without changing
+// the shape of the data.
 const styles = computed(() => {
   if (ghost) {
     switch (variant) {
@@ -25,6 +33,9 @@ const styles = computed(() => {
         return { bg: 'bg-gray-100', border: 'border border-gray-600', text: 'text-gray-700' }
       case 'accent':
         return { bg: 'bg-purple-50', border: 'border border-purple-500', text: 'text-purple-500' }
+      case 'yellow':
+        // yellow-500 on yellow-50 is unreadable, so the ghost text steps down to yellow-700
+        return { bg: 'bg-yellow-50', border: 'border border-yellow-500', text: 'text-yellow-700' }
       default:
         return {
           bg: 'bg-cornflower-blue-50',
@@ -44,6 +55,11 @@ const styles = computed(() => {
       return { bg: 'bg-gray-700', border: '', text: 'text-white' }
     case 'accent':
       return { bg: 'bg-purple-600', border: '', text: 'text-white' }
+    case 'yellow':
+      // White on yellow-500 measures 1.57:1, below the 4.5:1 WCAG AA threshold
+      // that applies to this chip's 12px semibold label. Kept deliberately;
+      // tracked with the other contrast findings in the a11y backlog.
+      return { bg: 'bg-yellow-500', border: '', text: 'text-white' }
     default:
       return { bg: 'bg-cornflower-blue-600', border: '', text: 'text-white' }
   }
@@ -53,9 +69,17 @@ const styles = computed(() => {
 <template>
   <span
     class="inline-flex h-5 flex-col items-center justify-center gap-2.5 rounded-[200px]"
-    :class="[styles.bg, styles.border, $slots.close ? 'pr-2 pl-4' : 'px-4']"
+    :class="[
+      styles.bg,
+      styles.border,
+      icon ? ($slots.close ? 'pr-2 pl-3' : 'px-3') : $slots.close ? 'pr-2 pl-4' : 'px-4',
+    ]"
   >
-    <span class="justify-start text-center extra-small-semibold" :class="styles.text">
+    <span
+      class="justify-start text-center extra-small-semibold"
+      :class="[styles.text, icon ? 'inline-flex items-center gap-1.5' : '']"
+    >
+      <NexxtIcon v-if="icon" :name="icon" class="shrink-0" />
       <slot>Chip</slot>
       <slot v-if="$slots.close" name="close"></slot>
     </span>

package/src/components/ContactInfoCard/ContactInfoCard.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup></script>
 
 <template>
-  <div class="rounded-xl border border-gray-200">
+  <div class="rounded-xl border border-gray-200 bg-white">
     <div class="border-b border-gray-200 py-2.5 pr-3 pl-8">
       <slot name="title">Title</slot>
     </div>

package/src/components/FloatingPanel/FloatingPanel.vue

@@ -4,9 +4,14 @@ import { useFloating, autoUpdate, flip, shift, offset, size } from '@floating-ui
 import type { Placement } from '@floating-ui/vue'
 
 export interface NexxtFloatingPanelProps {
+  /** Preferred side and alignment of the panel relative to the trigger. */
   placement?: Placement
+  /** Distance in pixels between the trigger and the panel. */
   offsetDistance?: number
+  /** Stretch the panel to at least the trigger's width. */
   matchWidth?: boolean
+  /** Wrap the content slot in the shared panel surface (rounded, bordered, white, shadowed). */
+  surface?: boolean
 }
 
 defineOptions({ name: 'NexxtFloatingPanel' })
@@ -15,6 +20,7 @@ const props = withDefaults(defineProps<NexxtFloatingPanelProps>(), {
   placement: 'bottom-start',
   offsetDistance: 8,
   matchWidth: false,
+  surface: false,
 })
 
 const emit = defineEmits<{
@@ -167,7 +173,30 @@ onUnmounted(() => {
     -->
     <Transition v-bind="transitionClasses" @after-leave="isLeaving = false">
       <div v-if="isOpen && isReady">
-        <slot name="content" :is-open="isOpen" :close="close" :toggle="toggle" />
+        <!--
+          FloatingPanel is a positioning primitive: by default it adds no surface
+          of its own and the content slot renders bare, exactly as before. The
+          surface wrapper is an extra element that only exists when opted into,
+          so the default render is unchanged for existing consumers. The radius
+          is fixed by design and deliberately not configurable.
+
+          overflow-hidden belongs with the radius: without it, content drawn to
+          the panel's edge -- a scrolling list especially -- paints over the
+          rounded corners. Consumers cannot supply it themselves once they adopt
+          the surface, because the element carrying the radius is this one, and
+          clipping on an inner element has nothing left to clip against.
+
+          It does not trap nested floating content: FloatingPanel positions with
+          strategy 'fixed', and overflow on an ancestor does not clip a fixed
+          descendant unless that ancestor also establishes a containing block.
+        -->
+        <div
+          v-if="surface"
+          class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm"
+        >
+          <slot name="content" :is-open="isOpen" :close="close" :toggle="toggle" />
+        </div>
+        <slot v-else name="content" :is-open="isOpen" :close="close" :toggle="toggle" />
       </div>
     </Transition>
   </div>

package/src/components/ModalFooter/ModalFooter.vue

@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import NexxtButton from '../Button/Button.vue'
+
+// Kept in step with NexxtButton's own `variant` prop, widened with `string` so a
+// call site may bind a computed value (`options.variant ?? 'primary'`) without a
+// literal union rejecting it. The known values still autocomplete.
+type ButtonVariant = InstanceType<typeof NexxtButton>['$props']['variant']
+
+// Derived from NexxtButton rather than restated, so the two cannot drift when
+// the icon set changes.
+type ButtonIcon = InstanceType<typeof NexxtButton>['$props']['icon']
+
+interface NexxtModalFooterProps {
+  /**
+   * Label of the cancel button. Required: this library has no i18n layer, so
+   * copy always arrives from the consumer rather than being defaulted here.
+   */
+  cancelLabel: string
+  /**
+   * Disable the cancel button. Use while a confirmed action is in flight, so a
+   * destructive operation cannot be dismissed halfway through.
+   */
+  cancelDisabled?: boolean
+  /** Label of the action button. */
+  confirmLabel: string
+  /**
+   * Variant of the action button. Left undefined it falls through to
+   * NexxtButton's own default, so it renders like a plain `<NexxtButton>`.
+   */
+  confirmVariant?: ButtonVariant | (string & {})
+  /** Icon rendered on the action button, before its label. */
+  confirmIcon?: ButtonIcon
+  /** Put the action button in its loading state. */
+  confirmLoading?: boolean
+  /** Disable the action button. */
+  confirmDisabled?: boolean
+}
+
+defineOptions({
+  name: 'NexxtModalFooter',
+})
+
+const {
+  cancelDisabled = false,
+  confirmLoading = false,
+  confirmDisabled = false,
+} = defineProps<NexxtModalFooterProps>()
+
+const emit = defineEmits<{ cancel: []; confirm: [] }>()
+</script>
+
+<template>
+  <div class="flex justify-end gap-2">
+    <!--
+      This comment lives INSIDE the root div on purpose. A comment before the
+      root makes the component multi-root, which leaves a consumer's fallthrough
+      class/id with nowhere unambiguous to land and changes what the root is
+      between dev and production, since the compiler strips comments in prod.
+
+      Modal's #footer wrapper already supplies the padding, so this component
+      adds none. It keeps its own row alignment so it also reads correctly
+      outside a Modal, without doubling up on anything Modal provides.
+    -->
+    <NexxtButton variant="secondary" :disabled="cancelDisabled" @click="emit('cancel')">
+      {{ cancelLabel }}
+    </NexxtButton>
+    <NexxtButton
+      :variant="confirmVariant as ButtonVariant"
+      :icon="confirmIcon"
+      :loading="confirmLoading"
+      :disabled="confirmDisabled"
+      @click="emit('confirm')"
+    >
+      {{ confirmLabel }}
+    </NexxtButton>
+  </div>
+</template>

package/src/components/Select/Select.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, ref, useTemplateRef, watch } from 'vue'
 import NexxtIcon from '../Icon/Icon.vue'
 import NexxtFloatingPanel from '../FloatingPanel/FloatingPanel.vue'
 import type Icon from '../Icon/Icon.vue'
@@ -11,16 +11,25 @@ const getValue = (opt: SelectOption): string | number => (typeof opt === 'string
 
 const generateId = () => 'select-' + Math.random().toString(36).slice(2, 10)
 const selectId = generateId()
+const listboxId = `${selectId}-listbox`
+const optionId = (index: number) => `${selectId}-option-${index}`
 
 defineOptions({ name: 'NexxtSelect' })
 
 interface NexxtSelectProps {
+  /** Options to choose from; plain strings or `{ label, value }` objects. */
   options: SelectOption[]
+  /** Text shown when nothing is selected. */
   placeholder?: string
+  /** Label rendered above the field. */
   label?: string
+  /** Render the field in its error state. */
   error?: boolean
+  /** Message shown below the field while `error` is true. */
   errorMessage?: string
+  /** Icon rendered inside the field, before the value. */
   leftIcon?: InstanceType<typeof Icon>['name']
+  /** Mark the field as required (renders an asterisk next to the label). */
   required?: boolean
 }
 
@@ -30,16 +39,86 @@ const props = withDefaults(defineProps<NexxtSelectProps>(), {
 
 const model = defineModel<string | number | null>({ default: null })
 
+const panel = useTemplateRef('panel')
+
+// Index of the keyboard-focused option. -1 means nothing is focused, which is
+// also the state while the listbox is closed.
+const activeIndex = ref(-1)
+
 const selectedLabel = computed(() => {
   if (model.value === null || model.value === undefined) return null
   const found = props.options.find((opt) => getValue(opt) === model.value)
   return found ? getLabel(found) : null
 })
 
+const selectedIndex = computed(() =>
+  props.options.findIndex((opt) => getValue(opt) === model.value),
+)
+
 const select = (opt: SelectOption, close: () => void) => {
   model.value = getValue(opt)
   close()
 }
+
+// Opening via the keyboard focuses the selected option, or the first one.
+const openWithFocus = () => {
+  activeIndex.value = selectedIndex.value >= 0 ? selectedIndex.value : 0
+  panel.value?.open()
+}
+
+const move = (key: string) => {
+  const count = props.options.length
+  if (!count) return
+  const current = activeIndex.value
+  if (key === 'Home') activeIndex.value = 0
+  else if (key === 'End') activeIndex.value = count - 1
+  else if (key === 'ArrowDown') activeIndex.value = current < 0 ? 0 : (current + 1) % count
+  else if (key === 'ArrowUp')
+    activeIndex.value = current < 0 ? count - 1 : (current - 1 + count) % count
+}
+
+const onKeydown = (event: KeyboardEvent) => {
+  const isOpen = panel.value?.isOpen ?? false
+
+  if (event.key === 'Escape') {
+    if (!isOpen) return
+    event.preventDefault()
+    panel.value?.close()
+    return
+  }
+
+  if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+    event.preventDefault()
+    if (!isOpen) {
+      openWithFocus()
+      return
+    }
+    // Space only toggles; Enter commits the focused option.
+    if (event.key !== 'Enter') {
+      panel.value?.close()
+      return
+    }
+    const opt = props.options[activeIndex.value]
+    if (opt !== undefined) select(opt, () => panel.value?.close())
+    else panel.value?.close()
+    return
+  }
+
+  if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+    event.preventDefault()
+    if (!isOpen) {
+      openWithFocus()
+      return
+    }
+    move(event.key)
+  }
+}
+
+// Keep the focused option in sync with the selection while closed, and drop it
+// entirely once the listbox closes so aria-activedescendant is not left dangling.
+watch(model, () => {
+  if (!panel.value?.isOpen) activeIndex.value = -1
+})
 </script>
 
 <template>
@@ -53,19 +132,26 @@ const select = (opt: SelectOption, close: () => void) => {
       <span v-if="required" class="text-brick-500">*</span>
     </label>
 
-    <NexxtFloatingPanel placement="bottom" match-width>
+    <NexxtFloatingPanel
+      ref="panel"
+      placement="bottom"
+      match-width
+      @close="activeIndex = -1"
+      @open="activeIndex = selectedIndex >= 0 ? selectedIndex : activeIndex"
+    >
       <template #trigger="{ isOpen, toggle }">
         <div
           :id="selectId"
           role="combobox"
           :aria-expanded="isOpen"
           aria-haspopup="listbox"
+          :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="[error ? 'ring-brick-400' : 'ring-gray-200', { 'pl-3': leftIcon, 'pr-3': true }]"
           @click="toggle"
-          @keydown.enter.prevent="toggle"
-          @keydown.space.prevent="toggle"
+          @keydown="onKeydown"
         >
           <span v-if="leftIcon" class="flex items-center">
             <NexxtIcon :name="leftIcon" />
@@ -85,15 +171,24 @@ const select = (opt: SelectOption, close: () => void) => {
       </template>
 
       <template #content="{ close }">
-        <ul role="listbox" class="overflow-hidden rounded-lg bg-white shadow-xs ring ring-gray-100">
+        <ul
+          :id="listboxId"
+          role="listbox"
+          class="overflow-hidden rounded-lg bg-white shadow-xs ring ring-gray-100"
+        >
           <li
-            v-for="opt in options"
+            v-for="(opt, index) in options"
+            :id="optionId(index)"
             :key="getValue(opt)"
             role="option"
             :aria-selected="model === getValue(opt)"
             class="flex cursor-pointer items-center justify-between px-4 py-3 text-sm text-gray-900 transition-colors duration-150 hover:bg-gray-50 hover:text-purple-600"
-            :class="{ 'font-medium text-cornflower-blue-600': model === getValue(opt) }"
+            :class="[
+              { 'font-medium text-cornflower-blue-600': model === getValue(opt) },
+              index === activeIndex ? 'bg-gray-50' : '',
+            ]"
             @click="select(opt, close)"
+            @mousemove="activeIndex = index"
           >
             {{ getLabel(opt) }}
             <NexxtIcon v-if="model === getValue(opt)" name="check" class="text-xs" />

package/src/components.json

@@ -24,6 +24,7 @@
   "NexxtInputField": "components/InputField/InputField.vue",
   "NexxtInputSelect": "components/InputSelect/InputSelect.vue",
   "NexxtModal": "components/Modal/Modal.vue",
+  "NexxtModalFooter": "components/ModalFooter/ModalFooter.vue",
   "NexxtPagination": "components/Pagination/Pagination.vue",
   "NexxtPresenceIndicator": "components/PresenceIndicator/PresenceIndicator.vue",
   "NexxtProgressBar": "components/ProgressBar/ProgressBar.vue",

package/src/index.ts

@@ -38,6 +38,7 @@ export { default as NexxtInfoBlock } from './components/InfoBlock/InfoBlock.vue'
 export { default as NexxtInputField } from './components/InputField/InputField.vue'
 export { default as NexxtInputSelect } from './components/InputSelect/InputSelect.vue'
 export { default as NexxtModal } from './components/Modal/Modal.vue'
+export { default as NexxtModalFooter } from './components/ModalFooter/ModalFooter.vue'
 export { default as NexxtPagination } from './components/Pagination/Pagination.vue'
 export { default as NexxtPresenceIndicator } from './components/PresenceIndicator/PresenceIndicator.vue'
 export { default as NexxtProgressBar } from './components/ProgressBar/ProgressBar.vue'