@nexxtmove/ui 1.45.0 → 1.47.0

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

@@ -0,0 +1,230 @@
+<script lang="ts">
+/**
+ * The line styles the editor offers, in the order they are shown. The model is
+ * the token itself, not a class: what a style puts on the element is more than
+ * one class and depends on the thickness and the breakpoint, so that
+ * translation belongs to the consumer. The labels arrive through `messages`,
+ * keyed by token.
+ */
+export const EDITOR_LINE_STYLE_OPTIONS = [
+  { token: 'none' },
+  { token: 'solid' },
+  { token: 'dashed' },
+  { token: 'dotted' },
+] as const
+
+/** A line style, as one of the tokens of `EDITOR_LINE_STYLE_OPTIONS`. */
+export type EditorLineStyleValue = (typeof EDITOR_LINE_STYLE_OPTIONS)[number]['token']
+
+/**
+ * The thicknesses the slider can land on, in px. There is no Tailwind token
+ * behind them: the consumer writes the value into a CSS variable.
+ */
+export const EDITOR_LINE_THICKNESS_STEPS = [1, 2, 3, 4, 6, 8] as const
+
+/** A line thickness in px, as one of `EDITOR_LINE_THICKNESS_STEPS`. */
+export type EditorLineThickness = (typeof EDITOR_LINE_THICKNESS_STEPS)[number]
+
+/**
+ * The smallest thickness per style. A style that is not in here starts at the
+ * first step. Dotted starts at 2: at 1 px a round dot is a blurred pixel.
+ */
+export const EDITOR_LINE_MIN_THICKNESS: Partial<Record<EditorLineStyleValue, EditorLineThickness>> =
+  { dotted: 2 }
+
+/** Overridable copy of the options and the thickness row. Every key is optional. */
+export interface EditorLineStyleMessages {
+  /** Name of the `none` option. Defaults to `'Geen'`. */
+  none?: string
+  /** Name of the `solid` option. Defaults to `'Doorgetrokken'`. */
+  solid?: string
+  /** Name of the `dashed` option. Defaults to `'Gestreept'`. */
+  dashed?: string
+  /** Name of the `dotted` option. Defaults to `'Gestippeld'`. */
+  dotted?: string
+  /** Heading above the slider, and the accessible name of its thumb. Defaults to `'Dikte'`. */
+  thickness?: string
+  /** Unit shown behind the thickness. Defaults to `'px'`. */
+  unit?: string
+}
+
+export interface NexxtEditorLineStyleProps {
+  /**
+   * Header text of the settings block, and with it the name of the option
+   * group. Defaults to the Dutch `'Lijn'`; the library has no i18n layer, so a
+   * consumer in another language passes its own copy in.
+   */
+  label?: string
+  /**
+   * Copy of the options and the thickness row. Defaults are Dutch and are
+   * merged per key, so overriding one keeps the defaults of the others. Copy is
+   * never translated inside the component.
+   */
+  messages?: EditorLineStyleMessages
+}
+
+const DEFAULT_MESSAGES = {
+  none: 'Geen',
+  solid: 'Doorgetrokken',
+  dashed: 'Gestreept',
+  dotted: 'Gestippeld',
+  thickness: 'Dikte',
+  unit: 'px',
+} satisfies Required<EditorLineStyleMessages>
+
+/** The border style each drawn swatch uses; `none` shows an icon instead. */
+const SWATCH: Record<Exclude<EditorLineStyleValue, 'none'>, string> = {
+  solid: 'border-solid',
+  dashed: 'border-dashed',
+  dotted: 'border-dotted',
+}
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import NexxtEditorSettingsBlock from '../../atoms/EditorSettingsBlock/EditorSettingsBlock.vue'
+import NexxtIcon from '../../../atoms/Icon/Icon.vue'
+import NexxtSlider from '../../../atoms/Slider/Slider.vue'
+import NexxtToggleGroup from '../../../molecules/ToggleGroup/ToggleGroup.vue'
+import type { NexxtToggleGroupOption } from '../../../molecules/ToggleGroup/ToggleGroup.vue'
+
+defineOptions({ name: 'NexxtEditorLineStyle' })
+
+const { label = 'Lijn', messages } = defineProps<NexxtEditorLineStyleProps>()
+
+/** The selected line style, as a token. */
+const model = defineModel<EditorLineStyleValue>({ required: true })
+
+/** The line thickness in px. */
+const thickness = defineModel<EditorLineThickness>('thickness', { required: true })
+
+const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
+
+// Drawings only and deliberately without tooltips, like the other editor
+// toggle groups (TextAlign, JustifyContent, AlignItems, BackgroundSize). The
+// copy travels as `ariaLabel`, so every option still has an accessible name.
+const options = computed<NexxtToggleGroupOption[]>(() =>
+  EDITOR_LINE_STYLE_OPTIONS.map(({ token }) => ({
+    value: token,
+    ariaLabel: copy.value[token],
+  })),
+)
+
+const swatchOf = (value: string) => SWATCH[value as Exclude<EditorLineStyleValue, 'none'>]
+
+// ToggleGroup types its model as the open `string` of its options. The only
+// values it can emit are the tokens built above, so the narrowing is safe.
+const selected = computed({
+  get: () => model.value,
+  set: (value: string) => {
+    model.value = value as EditorLineStyleValue
+  },
+})
+
+/** The steps the current style allows: dotted skips the ones below its minimum. */
+const steps = computed(() => {
+  const min = EDITOR_LINE_MIN_THICKNESS[model.value] ?? EDITOR_LINE_THICKNESS_STEPS[0]
+  return EDITOR_LINE_THICKNESS_STEPS.filter((step) => step >= min)
+})
+
+/**
+ * Position of the thickness on the allowed steps. A value that is not on them
+ * -- a 5 from outside, or a 1 while the style is dotted -- shows as the first
+ * allowed step, and is deliberately not written back: the consumer bumps the
+ * thickness in the same patch as the style change, so it stays one undo step.
+ */
+const stepIndex = computed(() => Math.max(0, steps.value.indexOf(thickness.value)))
+
+// The slider moves over the index, not over the px value.
+const sliderValue = computed({
+  get: () => [stepIndex.value],
+  set: ([index]) => {
+    thickness.value = steps.value[index]
+  },
+})
+
+const displayValue = computed(() => `${steps.value[stepIndex.value]} ${copy.value.unit}`)
+
+const open = computed(() => model.value !== 'none')
+
+// `:inert="false"` renders `inert="false"`, which still makes the row inert;
+// only `undefined` removes the attribute.
+const inert = computed(() => (open.value ? undefined : true))
+</script>
+
+<template>
+  <NexxtEditorSettingsBlock :label="label">
+    <!--
+      The block label is not a <label> (a <p>, or a heading when promoted), so
+      the toolbar is named explicitly; `aria-label` falls through to
+      ToggleGroup's root, which is the toolbar.
+    -->
+    <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:
+        gray-700 at rest, gray-900 on hover, the active colour when selected.
+      -->
+      <template #option="{ option }">
+        <NexxtIcon v-if="option.value === 'none'" name="ban" />
+        <span
+          v-else
+          aria-hidden="true"
+          class="block h-0 w-6 border-t-2 border-current"
+          :class="swatchOf(option.value)"
+        />
+      </template>
+    </NexxtToggleGroup>
+
+    <!--
+      Collapses when there is no line: there is no thickness to set. The row
+      stays mounted so its height can animate, and `inert` keeps the slider out
+      of the tab order meanwhile.
+    -->
+    <div
+      data-testid="editor-line-style-thickness"
+      :inert="inert"
+      :class="[
+        'grid transition-[grid-template-rows] duration-200 ease-out-strong motion-reduce:transition-none',
+        open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+      ]"
+    >
+      <!--
+        `-mx-1` / `px-1` give the thumb's focus ring room inside the clipping
+        box, the same trick as EditorPadding's second row.
+      -->
+      <div
+        :class="[
+          '-mx-1 min-h-0 overflow-hidden transition-opacity duration-200 ease-out-strong motion-reduce:transition-none',
+          open ? 'opacity-100' : 'opacity-0',
+        ]"
+      >
+        <!--
+          Dikte is a setting of the line in its own right, not a field of the
+          style: setting typography and spacing (gray-900, a 16px step up), all
+          of it inside the clipping box so a collapsed row leaves nothing behind.
+        -->
+        <div class="flex flex-col gap-1 px-1 pt-4 pb-1">
+          <p class="small-normal text-gray-900">{{ copy.thickness }}</p>
+          <div class="flex items-center gap-4">
+            <!--
+              The slider's model is the step index, so the readout is rendered
+              here and `aria-valuetext` says the px instead of the index.
+            -->
+            <NexxtSlider
+              v-model="sliderValue"
+              :min="0"
+              :max="steps.length - 1"
+              :step="1"
+              :aria-label="copy.thickness"
+              :aria-valuetext="displayValue"
+            />
+            <span class="min-w-12 shrink-0 text-right small-normal whitespace-nowrap text-gray-700">
+              {{ displayValue }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </NexxtEditorSettingsBlock>
+</template>

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

@@ -98,6 +98,40 @@ export interface NexxtEditorPaddingProps {
    * is never translated inside the component.
    */
   messages?: EditorPaddingMessages
+  /**
+   * Which sides the block edits. `'all'` offers all four. `'vertical'` offers
+   * top and bottom only, for an element where horizontal padding has no
+   * sensible effect: collapsed it is one field that writes `py-N`, expanded it
+   * is Boven and Onder in the same row, written as `pt-N pb-N`. Horizontal
+   * padding in the incoming value is ignored there and drops out on the first
+   * write. `'horizontal'` is the mirror image: one field writing `px-N`, or
+   * Links and Rechts in one row written as `pl-N pr-N`, with incoming vertical
+   * padding ignored. Defaults to `'all'`.
+   */
+  sides?: 'all' | 'vertical' | 'horizontal'
+}
+
+/** The one axis a two-sided block edits. */
+type PaddingAxis = 'vertical' | 'horizontal'
+
+/**
+ * Per axis: the two sides in reading order (the first is the one the collapsed
+ * field reads, and the one the other follows on closing), the collapsed
+ * field's message key, and the utility prefixes it writes.
+ */
+const AXES: Record<
+  PaddingAxis,
+  { sides: [PaddingIconSide, PaddingIconSide]; ignored: PaddingIconSide[]; both: string }
+> = {
+  vertical: { sides: ['top', 'bottom'], ignored: ['left', 'right'], both: 'py' },
+  horizontal: { sides: ['left', 'right'], ignored: ['top', 'bottom'], both: 'px' },
+}
+
+const SIDE_PREFIX: Record<PaddingIconSide, string> = {
+  top: 'pt',
+  right: 'pr',
+  bottom: 'pb',
+  left: 'pl',
 }
 
 const DEFAULT_MESSAGES = {
@@ -129,7 +163,7 @@ const TOKEN = /^p([xytrbl]?)-(\d+)$/
  * padding utility on the step list is ignored, and a later token wins over an
  * earlier one -- the same thing Tailwind's own cascade does for `p-4 pt-2`.
  */
-const parse = (value: string): PaddingSides => {
+const parse = (value: string, axis?: PaddingAxis): PaddingSides => {
   const sides: PaddingSides = { top: 0, right: 0, bottom: 0, left: 0 }
 
   for (const token of value.split(/\s+/)) {
@@ -142,6 +176,11 @@ const parse = (value: string): PaddingSides => {
     for (const side of PREFIX_SIDES[match[1]]) sides[side] = step
   }
 
+  // A two-sided block shows no field for the other axis, so whatever the value
+  // says there is not part of what it edits. Zeroed rather than kept, so nothing
+  // hidden can make an edit look like no edit, and nothing of it is written back.
+  if (axis) for (const side of AXES[axis].ignored) sides[side] = 0
+
   return sides
 }
 
@@ -152,6 +191,19 @@ const serialize = ({ top, right, bottom, left }: PaddingSides): string => {
   return `pt-${top} pr-${right} pb-${bottom} pl-${left}`
 }
 
+/**
+ * Write the two sides of a two-sided block back. Which form depends on what is
+ * on screen rather than on the values: the one collapsed field writes `py-N` /
+ * `px-N`, the expanded pair writes `pt-N pb-N` / `pl-N pr-N` even while the two
+ * agree.
+ */
+const serializeAxis = (sides: PaddingSides, axis: PaddingAxis, expanded: boolean): string => {
+  const [first, second] = AXES[axis].sides
+  return expanded
+    ? `${SIDE_PREFIX[first]}-${sides[first]} ${SIDE_PREFIX[second]}-${sides[second]}`
+    : `${AXES[axis].both}-${sides[first]}`
+}
+
 /**
  * Turn a px value into a step: clamp to 0-384 and take the nearest one. A tie
  * goes to the lower step, so 14 px becomes 12 and 60 px becomes 56; that way a
@@ -183,20 +235,27 @@ import PaddingIcon from './_PaddingIcon.vue'
 
 defineOptions({ name: 'NexxtEditorPadding' })
 
-const { label = 'Padding', messages } = defineProps<NexxtEditorPaddingProps>()
+const {
+  label = 'Padding',
+  messages,
+  sides: offered = 'all',
+} = defineProps<NexxtEditorPaddingProps>()
 
 /** The padding, as the Tailwind class string to apply. */
 const model = defineModel<string>({ required: true })
 
 const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
 
-const sides = ref<PaddingSides>(parse(model.value))
+/** The axis of a two-sided block, or `undefined` for one that edits all four sides. */
+const axis = computed<PaddingAxis | undefined>(() => (offered === 'all' ? undefined : offered))
+
+const values = ref<PaddingSides>(parse(model.value, axis.value))
 
 // The model is the source of truth, so a change from outside re-reads it. The
 // open state is deliberately left alone: collapsing is a view choice of the
 // user, and a re-parse mid-edit should not fold the four fields away.
-watch(model, (value) => {
-  sides.value = parse(value)
+watch([model, axis], ([value, current]) => {
+  values.value = parse(value, current)
 })
 
 /**
@@ -204,7 +263,7 @@ watch(model, (value) => {
  * cannot be expressed with two fields; from then on the button owns it.
  */
 const expanded = ref(
-  sides.value.top !== sides.value.bottom || sides.value.left !== sides.value.right,
+  values.value.top !== values.value.bottom || values.value.left !== values.value.right,
 )
 
 interface PaddingField {
@@ -227,8 +286,22 @@ const singleSideField = (side: PaddingIconSide): PaddingField => ({
  * The row that is always visible. Its two fields swap meaning the instant the
  * toggle flips -- only the second row animates, so the block never jumps.
  */
-const primaryFields = computed<PaddingField[]>(() =>
-  expanded.value
+const primaryFields = computed<PaddingField[]>(() => {
+  if (axis.value) {
+    const [first, second] = AXES[axis.value].sides
+    return expanded.value
+      ? [singleSideField(first), singleSideField(second)]
+      : [
+          {
+            key: axis.value,
+            targets: [first, second],
+            source: first,
+            label: copy.value[axis.value],
+          },
+        ]
+  }
+
+  return expanded.value
     ? [singleSideField('top'), singleSideField('right')]
     : [
         {
@@ -238,8 +311,8 @@ const primaryFields = computed<PaddingField[]>(() =>
           label: copy.value.horizontal,
         },
         { key: 'vertical', targets: ['top', 'bottom'], source: 'top', label: copy.value.vertical },
-      ],
-)
+      ]
+})
 
 /** The row that slides open. Stays mounted so its height can be animated. */
 const secondaryFields = computed<PaddingField[]>(() => [
@@ -257,20 +330,20 @@ const secondaryInert = computed(() => (expanded.value ? undefined : true))
 // The fields speak px, not steps: `p-6` reads as 24. A 0 is shown as an empty
 // field so the placeholder carries it, and an empty field commits back as a 0.
 const display = (side: PaddingIconSide) =>
-  sides.value[side] === 0 ? '' : String(pxOf(sides.value[side]))
+  values.value[side] === 0 ? '' : String(pxOf(values.value[side]))
 
 const apply = (next: PaddingSides) => {
   // A change that changes nothing -- committing 30 where the value is already
   // 28 px, arrowing up at the ceiling, closing a symmetrical block -- writes
   // nothing either, so the editor does not see an edit that was not one.
-  if (ALL_SIDES.every((side) => next[side] === sides.value[side])) return
+  if (ALL_SIDES.every((side) => next[side] === values.value[side])) return
 
-  sides.value = next
-  model.value = serialize(next)
+  values.value = next
+  model.value = axis.value ? serializeAxis(next, axis.value, expanded.value) : serialize(next)
 }
 
 const write = (field: PaddingField, step: number) => {
-  const next = { ...sides.value }
+  const next = { ...values.value }
   for (const side of field.targets) next[side] = step
 
   apply(next)
@@ -281,7 +354,7 @@ const onCommit = (field: PaddingField, px: number) => write(field, snap(px))
 
 /** One step along the list, so the arrow keys never stop on a missing token. */
 const onStep = (field: PaddingField, direction: 1 | -1) => {
-  const index = EDITOR_PADDING_STEPS.findIndex(({ token }) => token === sides.value[field.source])
+  const index = EDITOR_PADDING_STEPS.findIndex(({ token }) => token === values.value[field.source])
   // No wrapping: the ends of the list are the ends of the range.
   const next = Math.min(Math.max(index + direction, 0), EDITOR_PADDING_STEPS.length - 1)
 
@@ -300,7 +373,13 @@ const onToggle = () => {
   expanded.value = !expanded.value
   if (expanded.value) return
 
-  apply({ ...sides.value, bottom: sides.value.top, left: sides.value.right })
+  if (axis.value) {
+    // The collapsed field reads the first side, so the second follows it.
+    const [first, second] = AXES[axis.value].sides
+    return apply({ ...values.value, [second]: values.value[first] })
+  }
+
+  apply({ ...values.value, bottom: values.value.top, left: values.value.right })
 }
 </script>
 
@@ -313,9 +392,14 @@ const onToggle = () => {
       ones above them.
     -->
     <div class="grid grid-cols-[1fr_1fr_2.5rem] gap-2">
+      <!--
+        A two-sided block has one field when collapsed; it spans both field
+        columns so the toggle stays in the third.
+      -->
       <PaddingField
         v-for="field in primaryFields"
         :key="field.key"
+        :class="{ 'col-span-2': primaryFields.length === 1 }"
         :sides="field.targets"
         :label="field.label"
         :value="display(field.source)"
@@ -358,6 +442,7 @@ const onToggle = () => {
       `inert` keeps the two hidden fields out of the tab order meanwhile.
     -->
     <div
+      v-if="!axis"
       data-testid="editor-padding-secondary-row"
       :inert="secondaryInert"
       :class="[

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

@@ -44,6 +44,14 @@ export interface NexxtEditorTextAlignProps {
    * Copy is never translated inside the component.
    */
   messages?: EditorTextAlignMessages
+  /**
+   * The options to offer, as a subset of the four. They are always shown in
+   * the order of `EDITOR_TEXT_ALIGN_OPTIONS`, whatever order this list is in.
+   * Defaults to all four. A consumer that writes alignment as something other
+   * than `text-*` -- auto margins, say -- passes the three it can translate and
+   * maps the value itself.
+   */
+  options?: EditorTextAlignValue[]
 }
 
 const DEFAULT_MESSAGES = {
@@ -62,7 +70,11 @@ import type { NexxtToggleGroupOption } from '../../../molecules/ToggleGroup/Togg
 
 defineOptions({ name: 'NexxtEditorTextAlign' })
 
-const { label = 'Tekst uitlijning', messages } = defineProps<NexxtEditorTextAlignProps>()
+const {
+  label = 'Tekst uitlijning',
+  messages,
+  options: offered,
+} = defineProps<NexxtEditorTextAlignProps>()
 
 /** The selected text alignment, as the Tailwind class to apply. */
 const model = defineModel<EditorTextAlignValue>({ required: true })
@@ -87,8 +99,12 @@ const ICONS: Record<
   justify: 'align-justify',
 }
 
+// Filtered from the full list rather than mapped from `offered`, so the order is
+// always the canonical one and a duplicate in `offered` cannot double a button.
 const options = computed<NexxtToggleGroupOption[]>(() =>
-  EDITOR_TEXT_ALIGN_OPTIONS.map(({ token }) => ({
+  EDITOR_TEXT_ALIGN_OPTIONS.filter(
+    ({ token }) => !offered || offered.includes(`text-${token}`),
+  ).map(({ token }) => ({
     value: `text-${token}`,
     icon: ICONS[token],
     ariaLabel: copy.value[token],
@@ -109,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>