@nexxtmove/ui 1.46.0 → 1.47.0

package/dist/nuxt.js

@@ -94,6 +94,7 @@ var s = {
 	NexxtEditorMaxWidth: "components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue",
 	NexxtEditorPadding: "components/editor/molecules/EditorPadding/EditorPadding.vue",
 	NexxtEditorRadius: "components/editor/molecules/EditorRadius/EditorRadius.vue",
+	NexxtEditorShadow: "components/editor/molecules/EditorShadow/EditorShadow.vue",
 	NexxtEditorSize: "components/editor/molecules/EditorSize/EditorSize.vue",
 	NexxtEditorSizeLimit: "components/editor/molecules/EditorSizeLimit/EditorSizeLimit.vue",
 	NexxtEditorTextAlign: "components/editor/molecules/EditorTextAlign/EditorTextAlign.vue"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.46.0",
+  "version": "1.47.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -50,7 +50,7 @@
     "@vitejs/plugin-vue": "^6.0.8",
     "@vitest/browser": "^4.1.11",
     "@vitest/browser-playwright": "^4.1.11",
-    "@vitest/coverage-v8": "^4.1.10",
+    "@vitest/coverage-v8": "^4.1.11",
     "@vue/eslint-config-typescript": "^14.9.0",
     "@vue/test-utils": "^2.4.11",
     "@vue/tsconfig": "^0.9.1",
@@ -74,7 +74,7 @@
     "typescript-eslint": "^8.67.0",
     "vite": "^8.2.1",
     "vite-plugin-dts": "^5.0.3",
-    "vitest": "^4.1.10"
+    "vitest": "^4.1.11"
   },
   "engines": {
     "node": ">=22.18.0"

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

@@ -127,6 +127,6 @@ const selected = computed({
 
 <template>
   <NexxtEditorSettingsBlock :label="label">
-    <NexxtToggleGroup v-model="selected" :options="options" />
+    <NexxtToggleGroup v-model="selected" :options="options" :aria-label="label" />
   </NexxtEditorSettingsBlock>
 </template>

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

@@ -105,6 +105,6 @@ const selected = computed({
 
 <template>
   <NexxtEditorSettingsBlock :label="label">
-    <NexxtToggleGroup v-model="selected" :options="options" />
+    <NexxtToggleGroup v-model="selected" :options="options" :aria-label="label" />
   </NexxtEditorSettingsBlock>
 </template>

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

@@ -103,6 +103,6 @@ const selected = computed({
 
 <template>
   <NexxtEditorSettingsBlock :label="label">
-    <NexxtToggleGroup v-model="selected" :options="options" />
+    <NexxtToggleGroup v-model="selected" :options="options" :aria-label="label" />
   </NexxtEditorSettingsBlock>
 </template>

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

@@ -124,6 +124,6 @@ const selected = computed({
 
 <template>
   <NexxtEditorSettingsBlock :label="label">
-    <NexxtToggleGroup v-model="selected" :options="options" />
+    <NexxtToggleGroup v-model="selected" :options="options" :aria-label="label" />
   </NexxtEditorSettingsBlock>
 </template>

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

@@ -156,10 +156,10 @@ const inert = computed(() => (open.value ? undefined : true))
   <NexxtEditorSettingsBlock :label="label">
     <!--
       The block label is not a <label> (a <p>, or a heading when promoted), so
-      the group is named explicitly. Both attributes fall through to
-      ToggleGroup's root.
+      the toolbar is named explicitly; `aria-label` falls through to
+      ToggleGroup's root, which is the toolbar.
     -->
-    <NexxtToggleGroup v-model="selected" :options="options" role="group" :aria-label="label">
+    <NexxtToggleGroup v-model="selected" :options="options" :aria-label="label">
       <!--
         Rendered on the button and again in the overlay that shows the active
         colour, so it draws in currentColor and takes ToggleGroup's colours:

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

@@ -0,0 +1,106 @@
+<script lang="ts">
+/**
+ * The strengths the editor offers, in the order they are shown. `token` is the
+ * class without its fixed `shadow-` prefix, so the class is `shadow-` plus the
+ * token. They are three steps of the theme's `--shadow-*` scale -- the ones the
+ * sidebar has room for as labelled options. "No shadow" is not a strength: it is
+ * the switch being off. The labels are not in here; they arrive through
+ * `messages`, keyed by token.
+ */
+export const EDITOR_SHADOW_OPTIONS = [{ token: 'sm' }, { token: 'md' }, { token: 'lg' }] as const
+
+/**
+ * The shadow strength as the editor needs it: the Tailwind class itself, so the
+ * consumer can put the model value straight on the element it styles.
+ */
+export type EditorShadowValue = `shadow-${(typeof EDITOR_SHADOW_OPTIONS)[number]['token']}`
+
+/** Overridable copy of the strength control. Every key is optional. */
+export interface EditorShadowMessages {
+  /** Label above the three strengths. Defaults to the Dutch `'Sterkte'`. */
+  strength?: string
+  /** Name of the `shadow-sm` option. Defaults to the Dutch `'Licht'`. */
+  sm?: string
+  /** Name of the `shadow-md` option. Defaults to the Dutch `'Gemiddeld'`. */
+  md?: string
+  /** Name of the `shadow-lg` option. Defaults to the Dutch `'Sterk'`. */
+  lg?: string
+}
+
+export interface NexxtEditorShadowProps {
+  /**
+   * Header text of the settings block. Defaults to the Dutch `'Schaduw'`; the
+   * library has no i18n layer, so a consumer in another language passes its own
+   * copy in.
+   */
+  label?: string
+  /**
+   * Render a switch next to the label that collapses and expands the strengths.
+   * Defaults to `true`: a shadow is the kind of setting that is off as often as
+   * it is on, so turning it off is part of the control rather than an extra.
+   * The switch state is the `enabled` model; the component only reports it and
+   * leaves the strength alone, so how a consumer stores an element without a
+   * shadow is up to the consumer.
+   */
+  switchable?: boolean
+  /**
+   * Copy of the strength control. Merged per key, so overriding one key keeps
+   * the defaults of the others. Copy is never translated inside the component.
+   */
+  messages?: EditorShadowMessages
+}
+
+const DEFAULT_MESSAGES = {
+  strength: 'Sterkte',
+  sm: 'Licht',
+  md: 'Gemiddeld',
+  lg: 'Sterk',
+} satisfies Required<EditorShadowMessages>
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import NexxtEditorSettingsBlock from '../../atoms/EditorSettingsBlock/EditorSettingsBlock.vue'
+import NexxtToggleGroup from '../../../molecules/ToggleGroup/ToggleGroup.vue'
+import type { NexxtToggleGroupOption } from '../../../molecules/ToggleGroup/ToggleGroup.vue'
+
+defineOptions({ name: 'NexxtEditorShadow' })
+
+const { label = 'Schaduw', switchable = true, messages } = defineProps<NexxtEditorShadowProps>()
+
+/** The selected strength, as the Tailwind class to apply. */
+const model = defineModel<EditorShadowValue>({ required: true })
+
+/** Open state of the block. Only has an effect when `switchable` is `true`. */
+const enabled = defineModel<boolean>('enabled', { default: true })
+
+const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
+
+const options = computed<NexxtToggleGroupOption[]>(() =>
+  EDITOR_SHADOW_OPTIONS.map(({ token }) => ({
+    value: `shadow-${token}`,
+    label: copy.value[token],
+  })),
+)
+
+// ToggleGroup types its model as the open `string` of its options, so writing
+// straight back into the narrower model is a type error. The setter is the one
+// place that narrowing happens, and it is safe: the only values ToggleGroup can
+// emit are the option values built above. A value that is not on the list -- a
+// stored `shadow-xl` from before this component, say -- shows the first option
+// instead of leaving every one of them unselected; the first change writes a
+// valid class back.
+const selected = computed({
+  get: () =>
+    options.value.some(({ value }) => value === model.value) ? model.value : options.value[0].value,
+  set: (value: string) => {
+    model.value = value as EditorShadowValue
+  },
+})
+</script>
+
+<template>
+  <NexxtEditorSettingsBlock v-model="enabled" :label="label" :switchable="switchable">
+    <NexxtToggleGroup v-model="selected" :label="copy.strength" :options="options" />
+  </NexxtEditorSettingsBlock>
+</template>

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

@@ -218,7 +218,7 @@ watch(
 
 <template>
   <NexxtEditorSettingsBlock :label="label">
-    <NexxtToggleGroup v-model="mode" :options="options" />
+    <NexxtToggleGroup v-model="mode" :options="options" :aria-label="label" />
 
     <!--
       The field slides open under the choice it belongs to, the same 0fr/1fr

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

@@ -125,6 +125,6 @@ const selected = computed({
 
 <template>
   <NexxtEditorSettingsBlock :label="label">
-    <NexxtToggleGroup v-model="selected" :options="options" />
+    <NexxtToggleGroup v-model="selected" :options="options" :aria-label="label" />
   </NexxtEditorSettingsBlock>
 </template>

package/src/components/molecules/ToggleGroup/ToggleGroup.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, useTemplateRef, watch, onMounted, nextTick } from 'vue'
+import { computed, ref, useId, useTemplateRef, watch, onMounted, nextTick } from 'vue'
 import { useResizeObserver } from '@vueuse/core'
 import type { IconName } from '@awesome.me/kit-37b149f3ef/icons'
 import NexxtIcon from '../../atoms/Icon/Icon.vue'
@@ -81,6 +81,71 @@ const updateSlider = async () => {
 
 watch(model, async () => await updateSlider())
 
+/**
+ * Keyboard: the toolbar pattern (WAI-ARIA APG) with a roving tabindex. The
+ * group is one tab stop -- the selected option, or the first when none is --
+ * and the arrow keys move focus between the options, wrapping at the ends;
+ * Home and End jump to the first and last. Moving focus selects nothing:
+ * Enter and Space do, through the button's own click. There are no disabled
+ * options to skip, since an option cannot be disabled.
+ *
+ * While focus moves inside the group the tab stop moves with it, so Shift+Tab
+ * from a later option leaves the group instead of landing on the selected one.
+ * Once focus leaves, the tab stop goes back to the selected option.
+ */
+/**
+ * The root is a `toolbar` (WAI-ARIA APG): a set of buttons with one tab stop
+ * and arrow-key navigation. Not a `radiogroup`, because there the arrows select
+ * and here they only move focus. Each option reports whether it is the chosen
+ * one with `aria-pressed`, so a screen reader hears "Week, toggle button,
+ * pressed". The toolbar is named by the visible `label` when there is one;
+ * otherwise a consumer passes `aria-label`, which falls through to the root.
+ */
+const labelId = useId()
+
+const selectedIndex = computed(() =>
+  Math.max(
+    0,
+    props.options.findIndex((o) => o.value === model.value),
+  ),
+)
+
+/** The option that is focused inside the group; `null` while focus is outside. */
+const focusedIndex = ref<number | null>(null)
+
+const tabStop = computed(() => focusedIndex.value ?? selectedIndex.value)
+
+const NEXT_KEYS: Record<string, (index: number, count: number) => number> = {
+  ArrowRight: (index, count) => (index + 1) % count,
+  ArrowDown: (index, count) => (index + 1) % count,
+  ArrowLeft: (index, count) => (index - 1 + count) % count,
+  ArrowUp: (index, count) => (index - 1 + count) % count,
+  Home: () => 0,
+  End: (_, count) => count - 1,
+}
+
+const onKeydown = (event: KeyboardEvent) => {
+  const move = NEXT_KEYS[event.key]
+  if (!move) return
+
+  const index = buttonRefs.value.indexOf(event.target as HTMLButtonElement)
+  if (index === -1) return
+
+  // Or the arrows would scroll the panel the group sits in.
+  event.preventDefault()
+  buttonRefs.value[move(index, props.options.length)]?.focus()
+}
+
+const onFocusin = (event: FocusEvent) => {
+  const index = buttonRefs.value.indexOf(event.target as HTMLButtonElement)
+  if (index !== -1) focusedIndex.value = index
+}
+
+const onFocusout = (event: FocusEvent) => {
+  const next = event.relatedTarget as Node | null
+  if (!next || !containerRef.value?.contains(next)) focusedIndex.value = null
+}
+
 useResizeObserver(containerRef, () => updateSlider())
 
 onMounted(async () => {
@@ -92,14 +157,17 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-1">
-    <label v-if="label" class="justify-start small-normal text-gray-700">
+  <div class="flex flex-col gap-1" role="toolbar" :aria-labelledby="label ? labelId : undefined">
+    <label v-if="label" :id="labelId" class="justify-start small-normal text-gray-700">
       {{ label }}
     </label>
     <div
       ref="containerRef"
       class="relative isolate flex h-10 gap-1 rounded-xl bg-gray-100 p-1"
       :class="{ 'flex-wrap': !equalWidth }"
+      @keydown="onKeydown"
+      @focusin="onFocusin"
+      @focusout="onFocusout"
     >
       <!-- slider pill -->
       <div
@@ -127,6 +195,8 @@ onMounted(async () => {
           <button
             :ref="(el) => (buttonRefs[index] = el as HTMLButtonElement)"
             type="button"
+            :tabindex="index === tabStop ? 0 : -1"
+            :aria-pressed="option.value === model"
             :aria-label="option.ariaLabel ?? (option.label ? undefined : option.tooltip)"
             class="relative z-10 flex cursor-pointer items-center justify-center gap-1.5 rounded-lg px-4 py-1.5 whitespace-nowrap text-gray-700 hover:text-gray-900"
             :class="{ 'flex-1': equalWidth }"
@@ -143,6 +213,8 @@ onMounted(async () => {
           v-else
           :ref="(el) => (buttonRefs[index] = el as HTMLButtonElement)"
           type="button"
+          :tabindex="index === tabStop ? 0 : -1"
+          :aria-pressed="option.value === model"
           :aria-label="option.ariaLabel ?? (option.label ? undefined : option.tooltip)"
           class="relative z-10 flex cursor-pointer items-center justify-center gap-1.5 rounded-lg px-4 py-1.5 whitespace-nowrap text-gray-700 hover:text-gray-900"
           :class="{ 'flex-1': equalWidth }"

package/src/components.json

@@ -91,6 +91,7 @@
   "NexxtEditorMaxWidth": "components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue",
   "NexxtEditorPadding": "components/editor/molecules/EditorPadding/EditorPadding.vue",
   "NexxtEditorRadius": "components/editor/molecules/EditorRadius/EditorRadius.vue",
+  "NexxtEditorShadow": "components/editor/molecules/EditorShadow/EditorShadow.vue",
   "NexxtEditorSize": "components/editor/molecules/EditorSize/EditorSize.vue",
   "NexxtEditorSizeLimit": "components/editor/molecules/EditorSizeLimit/EditorSizeLimit.vue",
   "NexxtEditorTextAlign": "components/editor/molecules/EditorTextAlign/EditorTextAlign.vue"

package/src/index.ts

@@ -78,6 +78,12 @@ export type {
   EditorRadiusMessages,
   EditorRadiusValue,
 } from './components/editor/molecules/EditorRadius/EditorRadius.vue'
+export { EDITOR_SHADOW_OPTIONS } from './components/editor/molecules/EditorShadow/EditorShadow.vue'
+export type {
+  EditorShadowMessages,
+  EditorShadowValue,
+  NexxtEditorShadowProps,
+} from './components/editor/molecules/EditorShadow/EditorShadow.vue'
 export { EDITOR_TEXT_ALIGN_OPTIONS } from './components/editor/molecules/EditorTextAlign/EditorTextAlign.vue'
 export type {
   EditorTextAlignMessages,
@@ -199,6 +205,7 @@ export { default as NexxtEditorPadding } from './components/editor/molecules/Edi
 export { default as NexxtEditorRadius } from './components/editor/molecules/EditorRadius/EditorRadius.vue'
 export { default as NexxtEditorSettingsBlock } from './components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue'
 export { default as NexxtEditorSettingsGroup } from './components/editor/atoms/EditorSettingsGroup/EditorSettingsGroup.vue'
+export { default as NexxtEditorShadow } from './components/editor/molecules/EditorShadow/EditorShadow.vue'
 export { default as NexxtEditorSize } from './components/editor/molecules/EditorSize/EditorSize.vue'
 export { default as NexxtEditorSizeLimit } from './components/editor/molecules/EditorSizeLimit/EditorSizeLimit.vue'
 export { default as NexxtEditorTextAlign } from './components/editor/molecules/EditorTextAlign/EditorTextAlign.vue'

package/tailwind/nexxtmove.tailwind.custom.css

@@ -50,10 +50,9 @@
   --spacing-8xl: 100rem;
   --spacing-full-width: 116rem; /* 1920px (full hd) minus the sidebar: max app width */
 
-  /* Motion easings. `ease-out-strong` decelerates hard: things that arrive or
-     settle into place. `ease-in-out-strong` for elements that move from one
-     spot to another. */
-  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
+  /* Motion easings. `ease-out-strong` (above) decelerates hard: things that
+     arrive or settle into place. `ease-in-out-strong` for elements that move
+     from one spot to another. */
   --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
 
   /* The one colour of every divider in the editor settings panel, as