@nexxtmove/ui 1.52.0 → 1.54.0

package/dist/nuxt.js

@@ -80,6 +80,7 @@ var s = {
 	NexxtEditorSettingsBlock: "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue",
 	NexxtEditorSettingsGroup: "components/editor/atoms/EditorSettingsGroup/EditorSettingsGroup.vue",
 	NexxtEditorAlignItems: "components/editor/molecules/EditorAlignItems/EditorAlignItems.vue",
+	NexxtEditorAlignmentGrid: "components/editor/molecules/EditorAlignmentGrid/EditorAlignmentGrid.vue",
 	NexxtEditorAnchor: "components/editor/molecules/EditorAnchor/EditorAnchor.vue",
 	NexxtEditorBackgroundSize: "components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue",
 	NexxtEditorBorder: "components/editor/molecules/EditorBorder/EditorBorder.vue",

package/dist/ui.css

@@ -1,2 +1,3 @@
-input[data-snap][data-v-5d3904ac]{animation:snap-in-5d3904ac .18s var(--ease-out-strong)}input[data-snap=up][data-v-5d3904ac]{--snap-from:2px}input[data-snap=down][data-v-5d3904ac]{--snap-from:-2px}@keyframes snap-in-5d3904ac{0%{opacity:0;transform:translateY(var(--snap-from))}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){input[data-snap][data-v-5d3904ac]{animation:1ms snap-hold-5d3904ac}@keyframes snap-hold-5d3904ac{0%,to{opacity:1}}}input[data-snap][data-v-15feed8b]{animation:snap-in-15feed8b .18s var(--ease-out-strong)}input[data-snap=up][data-v-15feed8b]{--snap-from:2px}input[data-snap=down][data-v-15feed8b]{--snap-from:-2px}@keyframes snap-in-15feed8b{0%{opacity:0;transform:translateY(var(--snap-from))}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){input[data-snap][data-v-15feed8b]{animation:1ms snap-hold-15feed8b}@keyframes snap-hold-15feed8b{0%,to{opacity:1}}}rect[data-v-0a5d9b21]{animation-duration:4s;animation-timing-function:cubic-bezier(.77,0,.175,1);animation-iteration-count:infinite}rect[data-v-0a5d9b21]:first-child{animation-name:load-1-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(2){animation-name:load-2-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(3){animation-name:load-3-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(4){animation-name:load-4-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(5){animation-name:load-5-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(6){animation-name:load-6-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(7){animation-name:load-7-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(8){animation-name:load-8-0a5d9b21}@media (prefers-reduced-motion:reduce){rect[data-v-0a5d9b21]{animation:none}svg[data-v-0a5d9b21]{animation:2.5s ease-in-out infinite pulse-0a5d9b21}}@keyframes pulse-0a5d9b21{0%,to{opacity:1}50%{opacity:.65}}@keyframes load-1-0a5d9b21{0%,80%{transform:translate(0)}5%,20%,60%,75%{transform:translate(-25px,25px)}30%,50%{transform:translate(-75px,75px)}}@keyframes load-2-0a5d9b21{5%,75%{transform:translate(0%)}10%,20%,60%,70%{transform:translate(50px)}30%,50%{transform:translateY(50px)}}@keyframes load-3-0a5d9b21{10%,70%{transform:translate(0%)}15%,65%{transform:translateY(-50px)}20%,60%{fill:var(--color-sapphire-500);transform:translateY(-50px)}30%,50%{fill:var(--color-purple-500);transform:translate(-50px)}}@keyframes load-4-0a5d9b21{20%,60%{transform:translate(0%)}30%,50%{transform:translate(50px,-50px)}}@keyframes load-5-0a5d9b21{0%,80%{transform:translate(0%)}5%,20%,60%,75%{transform:translateY(50px)}30%,50%{transform:translate(50px)}}@keyframes load-6-0a5d9b21{5%,75%{transform:translate(0%)}10%,20%,60%,70%{transform:translate(-50px)}30%,50%{transform:translateY(-50px)}}@keyframes load-7-0a5d9b21{10%,70%{transform:translate(0%)}15%,20%,60%,65%{transform:translate(50px)}30%,50%{transform:translate(100px,-50px)}}@keyframes load-8-0a5d9b21{15%,65%{transform:translate(0%)}20%,60%{transform:translateY(-50px)}30%,50%{transform:translate(50px,-100px)}}.timer-circle[data-v-7e3c5bda]{stroke-dashoffset:0;animation:linear forwards toast-timer-7e3c5bda}@keyframes toast-timer-7e3c5bda{to{stroke-dashoffset:var(--fa0d20de)}}
+/*! tailwindcss v4.3.3 | 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)))){[data-v-add2fbaf],[data-v-add2fbaf]:before,[data-v-add2fbaf]:after,[data-v-add2fbaf]::backdrop{--tw-font-weight:initial}}}@layer components{[role=img][data-v-add2fbaf]{height:fit-content;font-family:var(--font-sans,"Poppins", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);border-top-left-radius:.333333em;border-bottom-left-radius:.333333em;margin-right:calc(.5lh + .333333em);padding-block:.333333em;padding-inline:.666667em}}@property --tw-font-weight{syntax:"*";inherits:false}input[data-snap][data-v-5d3904ac]{animation:snap-in-5d3904ac .18s var(--ease-out-strong)}input[data-snap=up][data-v-5d3904ac]{--snap-from:2px}input[data-snap=down][data-v-5d3904ac]{--snap-from:-2px}@keyframes snap-in-5d3904ac{0%{opacity:0;transform:translateY(var(--snap-from))}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){input[data-snap][data-v-5d3904ac]{animation:1ms snap-hold-5d3904ac}@keyframes snap-hold-5d3904ac{0%,to{opacity:1}}}input[data-snap][data-v-15feed8b]{animation:snap-in-15feed8b .18s var(--ease-out-strong)}input[data-snap=up][data-v-15feed8b]{--snap-from:2px}input[data-snap=down][data-v-15feed8b]{--snap-from:-2px}@keyframes snap-in-15feed8b{0%{opacity:0;transform:translateY(var(--snap-from))}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){input[data-snap][data-v-15feed8b]{animation:1ms snap-hold-15feed8b}@keyframes snap-hold-15feed8b{0%,to{opacity:1}}}rect[data-v-0a5d9b21]{animation-duration:4s;animation-timing-function:cubic-bezier(.77,0,.175,1);animation-iteration-count:infinite}rect[data-v-0a5d9b21]:first-child{animation-name:load-1-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(2){animation-name:load-2-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(3){animation-name:load-3-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(4){animation-name:load-4-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(5){animation-name:load-5-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(6){animation-name:load-6-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(7){animation-name:load-7-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(8){animation-name:load-8-0a5d9b21}@media (prefers-reduced-motion:reduce){rect[data-v-0a5d9b21]{animation:none}svg[data-v-0a5d9b21]{animation:2.5s ease-in-out infinite pulse-0a5d9b21}}@keyframes pulse-0a5d9b21{0%,to{opacity:1}50%{opacity:.65}}@keyframes load-1-0a5d9b21{0%,80%{transform:translate(0)}5%,20%,60%,75%{transform:translate(-25px,25px)}30%,50%{transform:translate(-75px,75px)}}@keyframes load-2-0a5d9b21{5%,75%{transform:translate(0%)}10%,20%,60%,70%{transform:translate(50px)}30%,50%{transform:translateY(50px)}}@keyframes load-3-0a5d9b21{10%,70%{transform:translate(0%)}15%,65%{transform:translateY(-50px)}20%,60%{fill:var(--color-sapphire-500);transform:translateY(-50px)}30%,50%{fill:var(--color-purple-500);transform:translate(-50px)}}@keyframes load-4-0a5d9b21{20%,60%{transform:translate(0%)}30%,50%{transform:translate(50px,-50px)}}@keyframes load-5-0a5d9b21{0%,80%{transform:translate(0%)}5%,20%,60%,75%{transform:translateY(50px)}30%,50%{transform:translate(50px)}}@keyframes load-6-0a5d9b21{5%,75%{transform:translate(0%)}10%,20%,60%,70%{transform:translate(-50px)}30%,50%{transform:translateY(-50px)}}@keyframes load-7-0a5d9b21{10%,70%{transform:translate(0%)}15%,20%,60%,65%{transform:translate(50px)}30%,50%{transform:translate(100px,-50px)}}@keyframes load-8-0a5d9b21{15%,65%{transform:translate(0%)}20%,60%{transform:translateY(-50px)}30%,50%{transform:translate(50px,-100px)}}.timer-circle[data-v-7e3c5bda]{stroke-dashoffset:0;animation:linear forwards toast-timer-7e3c5bda}@keyframes toast-timer-7e3c5bda{to{stroke-dashoffset:var(--fa0d20de)}}
 /*$vite$:1*/

package/package.json

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

package/src/components/atoms/EnergyLabel/EnergyLabel.vue

@@ -1,14 +1,14 @@
-<script lang="ts" setup>
-import { computed } from 'vue'
-
+<script lang="ts">
+/** An energy-label grade, from `A++++` down to `G`. */
 export type EnergyLabelLetter =
   'A++++' | 'A+++' | 'A++' | 'A+' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G'
 
-interface NexxtEnergyLabelProps {
-  label: EnergyLabelLetter | Lowercase<EnergyLabelLetter>
-}
-
-const COLORS: Record<EnergyLabelLetter, string> = {
+/**
+ * The swatch colour per grade, as an uppercase hex string. Every `A` grade
+ * shares one green. Key order runs from best to worst, so
+ * `Object.keys(ENERGY_LABEL_COLORS)` lists the grades in display order.
+ */
+export const ENERGY_LABEL_COLORS: Readonly<Record<EnergyLabelLetter, string>> = Object.freeze({
   'A++++': '#00953F',
   'A+++': '#00953F',
   'A++': '#00953F',
@@ -20,7 +20,22 @@ const COLORS: Record<EnergyLabelLetter, string> = {
   E: '#F9A93C',
   F: '#EF7D34',
   G: '#E63329',
+})
+
+/**
+ * Size, padding, margin and typography follow from classes on the component:
+ * a font-size class scales the whole label, arrow included. The arrow always
+ * takes the label's full height. When you raise the vertical padding, raise
+ * the right margin by the same amount so the arrow keeps its room.
+ */
+export interface NexxtEnergyLabelProps {
+  /** The grade to show. Lowercase input is accepted and shown in uppercase. */
+  label: EnergyLabelLetter | Lowercase<EnergyLabelLetter>
 }
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
 
 defineOptions({
   name: 'NexxtEnergyLabel',
@@ -30,16 +45,41 @@ const { label } = defineProps<NexxtEnergyLabelProps>()
 
 const normalized = computed(() => label.toUpperCase() as EnergyLabelLetter)
 
-const color = computed(() => COLORS[normalized.value])
+const color = computed(() => ENERGY_LABEL_COLORS[normalized.value])
 </script>
 
 <template>
   <span
     role="img"
     :aria-label="`Energielabel ${normalized}`"
-    class="relative isolate mr-3 inline-flex h-6 items-center justify-center rounded-l px-2 extra-small-semibold text-white after:absolute after:top-1/2 after:left-full after:size-4.25 after:-translate-1/2 after:rotate-45 after:rounded-tr after:bg-(--energy-label-color) after:content-['']"
+    class="relative isolate inline-flex items-center justify-center text-white after:absolute after:top-1/2 after:left-full after:aspect-square after:h-[calc(100%*17/24)] after:-translate-1/2 after:rotate-45 after:rounded-tr-[calc(100%*4/17)] after:bg-(--energy-label-color) after:content-['']"
     :style="{ backgroundColor: color, '--energy-label-color': color }"
   >
     <span aria-hidden="true" class="relative z-10">{{ normalized }}</span>
   </span>
 </template>
+
+<style scoped>
+@reference '../../../index.css';
+
+/*
+ * The sizing defaults sit in the components layer, below Tailwind's utilities,
+ * so padding, margin, radius and typography classes on the component win
+ * without `!`. They are in `em` and `lh`, so a font-size class scales the whole
+ * label; at the default 12px/16px they come out at the old h-6, px-2, mr-3 and
+ * rounded-l. The margin is half the label's height: the room the arrow takes.
+ * h-fit stands in for the old fixed h-6: a stretching flex or grid parent
+ * must not pull the label (and its arrow) taller. The root is matched by its
+ * role, as a class name trips the Tailwind lint.
+ *
+ * The arrow is a square of 17/24 of the label's height, turned 45 degrees, so
+ * its diagonal just covers the height (no seam) and its tip sits half a height
+ * past the edge. 17/24 and the 4/17 corner are the old 17px square with its
+ * 4px corner on a 24px label, kept as ratios.
+ */
+@layer components {
+  [role='img'] {
+    @apply mr-[calc(0.5lh+1em/3)] h-fit rounded-l-[calc(1em/3)] px-[calc(2em/3)] py-[calc(1em/3)] extra-small-semibold;
+  }
+}
+</style>

package/src/components/editor/composables/useRadioGrid.ts

@@ -0,0 +1,155 @@
+import { computed, toValue, type ComponentPublicInstance, type MaybeRefOrGetter } from 'vue'
+
+/**
+ * Keyboard behaviour of a two-dimensional radiogroup (WAI-ARIA APG radio group,
+ * in 2D): one tab stop, arrows that move *and* choose, no wrap at the edges.
+ *
+ * Positions are cell indices in reading order, `row * columns + column`. A
+ * radio that spans several cells (a band) is registered on one of its cells;
+ * `positions` lists those, so the arrows only move along the radios that
+ * exist. Cell rendering stays with the component.
+ */
+export interface UseRadioGridOptions {
+  /** Number of rows of the grid. */
+  rows: MaybeRefOrGetter<number>
+  /** Number of columns of the grid. */
+  columns: MaybeRefOrGetter<number>
+  /**
+   * The positions that hold a radio, in any order. Defaults to every cell. An
+   * arrow towards a cell that is not in here does not move.
+   */
+  positions?: MaybeRefOrGetter<readonly number[]>
+  /** The chosen position, or `null` while no radio is chosen. */
+  selected: MaybeRefOrGetter<number | null>
+  /**
+   * The position that takes the tab stop while none is chosen. Without one, or
+   * when it returns a position that holds no radio, the first position does.
+   */
+  preferred?: () => number | null
+  /**
+   * What Home and End jump to: the first and last radio of the current row, or
+   * of the whole grid. Defaults to `'grid'`.
+   */
+  homeEnd?: 'row' | 'grid'
+  /** Called with the position an arrow, Home or End lands on. */
+  onChoose: (position: number) => void
+  /**
+   * Called when the focus leaves the grid after one or more keyboard choices:
+   * the end of a keyboard run, where a consumer closes its undo step.
+   */
+  onLeave?: () => void
+}
+
+export const useRadioGrid = (options: UseRadioGridOptions) => {
+  const { homeEnd = 'grid', onChoose, onLeave } = options
+
+  const elements = new Map<number, HTMLElement>()
+
+  /** Whether a keyboard choice happened since the focus last left the grid. */
+  let pending = false
+
+  const valid = computed(() => {
+    const all = toValue(options.positions)
+    const count = toValue(options.rows) * toValue(options.columns)
+    return [...(all ?? Array.from({ length: count }, (_, index) => index))].sort((a, b) => a - b)
+  })
+
+  /** Roving tabindex: the chosen radio, else the preferred one, else the first. */
+  const tabStop = computed(() => {
+    const selected = toValue(options.selected)
+    if (selected !== null && valid.value.includes(selected)) return selected
+    const preferred = options.preferred?.() ?? null
+    if (preferred !== null && valid.value.includes(preferred)) return preferred
+    return valid.value[0] ?? null
+  })
+
+  /**
+   * Function ref for the radio on `position`, so the arrows can focus it. On
+   * unmount only a detached element is dropped: in a crossfade the leaving
+   * layer unmounts after the entering one registered the same position.
+   */
+  const cellRef = (position: number) => (el: Element | ComponentPublicInstance | null) => {
+    if (el instanceof HTMLElement) {
+      elements.set(position, el)
+      return
+    }
+    for (const [key, stored] of elements) if (!stored.isConnected) elements.delete(key)
+  }
+
+  const step = (position: number, rowStep: number, columnStep: number) => {
+    const columns = toValue(options.columns)
+    const row = Math.floor(position / columns) + rowStep
+    const column = (position % columns) + columnStep
+    if (row < 0 || row >= toValue(options.rows) || column < 0 || column >= columns) return position
+    const next = row * columns + column
+    return valid.value.includes(next) ? next : position
+  }
+
+  const ends = (position: number): [number, number] => {
+    const columns = toValue(options.columns)
+    const row = Math.floor(position / columns)
+    const pool =
+      homeEnd === 'row'
+        ? valid.value.filter((candidate) => Math.floor(candidate / columns) === row)
+        : valid.value
+    return [pool[0] ?? position, pool[pool.length - 1] ?? position]
+  }
+
+  /**
+   * An arrow moves one cell and chooses it; at an edge, or towards a cell that
+   * holds no radio, it stays. A key with a modifier belongs to the browser or
+   * the OS (Alt+Left is back, Cmd+Left is line start), so it is left alone: no
+   * choice, no preventDefault.
+   */
+  const onKeydown = (event: KeyboardEvent, position: number) => {
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
+
+    const [first, last] = ends(position)
+    const moves: Record<string, () => number> = {
+      ArrowLeft: () => step(position, 0, -1),
+      ArrowRight: () => step(position, 0, 1),
+      ArrowUp: () => step(position, -1, 0),
+      ArrowDown: () => step(position, 1, 0),
+      Home: () => first,
+      End: () => last,
+    }
+    const next = moves[event.key]?.()
+
+    if (next === undefined) return
+
+    // Also when the arrow does not move: otherwise it scrolls the panel.
+    event.preventDefault()
+    if (next === position && next === toValue(options.selected)) return
+
+    onChoose(next)
+    pending = true
+    elements.get(next)?.focus()
+  }
+
+  /** Bind on the element that holds every radio. */
+  const onFocusout = (event: FocusEvent) => {
+    const container = event.currentTarget as HTMLElement | null
+    const to = event.relatedTarget as Node | null
+    if (to && container?.contains(to)) return
+    if (!pending) return
+    pending = false
+    onLeave?.()
+  }
+
+  /**
+   * Ends the keyboard run without signalling it: call it when the consumer
+   * committed by other means (a click), so leaving the grid does not commit a
+   * second time.
+   */
+  const reset = () => {
+    pending = false
+  }
+
+  /** Puts the focus on the tab stop, e.g. after the radios were re-rendered. */
+  const focusTabStop = () => {
+    const position = tabStop.value
+    if (position !== null) elements.get(position)?.focus()
+  }
+
+  return { tabStop, cellRef, onKeydown, onFocusout, reset, focusTabStop }
+}