@nexxtmove/ui 1.44.0 → 1.46.0

package/dist/nuxt.js

@@ -77,10 +77,12 @@ var s = {
 	NexxtVideoPlayer: "components/organisms/VideoPlayer/VideoPlayer.vue",
 	NexxtEditorDimensionField: "components/editor/atoms/EditorDimensionField/EditorDimensionField.vue",
 	NexxtEditorSettingsBlock: "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue",
+	NexxtEditorSettingsGroup: "components/editor/atoms/EditorSettingsGroup/EditorSettingsGroup.vue",
 	NexxtEditorAlignItems: "components/editor/molecules/EditorAlignItems/EditorAlignItems.vue",
 	NexxtEditorBackgroundSize: "components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue",
 	NexxtEditorBorder: "components/editor/molecules/EditorBorder/EditorBorder.vue",
 	NexxtEditorColor: "components/editor/molecules/EditorColor/EditorColor.vue",
+	NexxtEditorDashPattern: "components/editor/molecules/EditorDashPattern/EditorDashPattern.vue",
 	NexxtEditorFlexDirection: "components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue",
 	NexxtEditorFontSize: "components/editor/molecules/EditorFontSize/EditorFontSize.vue",
 	NexxtEditorGap: "components/editor/molecules/EditorGap/EditorGap.vue",
@@ -88,6 +90,7 @@ var s = {
 	NexxtEditorJustifyContent: "components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue",
 	NexxtEditorLetterSpacing: "components/editor/molecules/EditorLetterSpacing/EditorLetterSpacing.vue",
 	NexxtEditorLineHeight: "components/editor/molecules/EditorLineHeight/EditorLineHeight.vue",
+	NexxtEditorLineStyle: "components/editor/molecules/EditorLineStyle/EditorLineStyle.vue",
 	NexxtEditorMaxWidth: "components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue",
 	NexxtEditorPadding: "components/editor/molecules/EditorPadding/EditorPadding.vue",
 	NexxtEditorRadius: "components/editor/molecules/EditorRadius/EditorRadius.vue",

package/package.json

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

package/src/components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
 import Switch from '../../../atoms/Switch/Switch.vue'
+import { EDITOR_SETTINGS_GROUP_KEY } from '../EditorSettingsGroup/editorSettingsGroupContext'
 
 interface NexxtEditorSettingsBlockProps {
   /** Header text of the block. Wraps over multiple lines when it is too long. */
@@ -14,7 +15,8 @@ interface NexxtEditorSettingsBlockProps {
 
 /**
  * One labelled setting in the editor sidebar, optionally collapsible via a
- * switch. The block draws no separator of its own: the consumer groups and
+ * switch. The block draws no separator of its own: inside a
+ * NexxtEditorSettingsGroup the group draws it, and outside one the consumer
  * divides blocks on the wrapper, e.g. `divide-y divide-gray-200`.
  */
 defineOptions({ name: 'NexxtEditorSettingsBlock' })
@@ -34,10 +36,37 @@ const open = computed(() => !switchable || model.value)
 // `inert="false"`, which a browser still treats as inert. `undefined` is the
 // only value that removes the attribute again.
 const inert = computed(() => (open.value ? undefined : true))
+
+/** Set when the block sits in a NexxtEditorSettingsGroup; `null` outside one. */
+const group = inject(EDITOR_SETTINGS_GROUP_KEY, null)
+
+/**
+ * In a group all space sits above the block, inside its own box: a collapsed
+ * reveal around it then takes that space along, and the group owns the bottom.
+ * Outside a group the block keeps the `py-4` other consumers rely on. Every
+ * block ends 4px below its control (the content wrapper's `pb-1`), so the
+ * group's `pb-5` puts the next line 24px under the last visible control.
+ */
+const rootClass = computed(() => (group ? 'pt-4' : 'py-4'))
+
+/**
+ * The only setting of a group without a label of its own carries the group's
+ * weight, so it reads as heavy as a labelled group next to it.
+ */
+const promoted = computed(() => group?.value.promoted ?? false)
+
+const labelTypography = computed(() => (promoted.value ? 'small-semibold' : 'small-normal'))
+
+/**
+ * A promoted label is a heading, so heading navigation finds it next to the
+ * labelled groups. A switchable label stays the switch's <label>: a heading
+ * cannot be one.
+ */
+const labelTag = computed(() => (promoted.value && group ? `h${group.value.headingLevel}` : 'p'))
 </script>
 
 <template>
-  <div class="py-4">
+  <div :class="rootClass">
     <!--
       Switch.vue sets `inheritAttrs: false` and binds `$attrs` on its sr-only
       input, so a class on <Switch> never reaches its root <label>. The child
@@ -49,9 +78,11 @@ const inert = computed(() => (open.value ? undefined : true))
     -->
     <div class="flex items-center [&>label]:flex [&>label]:w-full [&>label]:gap-3">
       <Switch v-if="switchable" v-model="model" size="sm" color="blue" label-position="before">
-        <span class="grow text-left small-normal text-gray-900">{{ label }}</span>
+        <span :class="['grow text-left', labelTypography, 'text-gray-900']">{{ label }}</span>
       </Switch>
-      <p v-else class="small-normal text-gray-900">{{ label }}</p>
+      <component :is="labelTag" v-else :class="[labelTypography, 'text-gray-900']">
+        {{ label }}
+      </component>
     </div>
 
     <div

package/src/components/editor/atoms/EditorSettingsGroup/EditorSettingsGroup.vue

@@ -0,0 +1,228 @@
+<script lang="ts">
+import type { EditorSettingsHeadingLevel } from './editorSettingsGroupContext'
+
+export interface NexxtEditorSettingsGroupProps {
+  /**
+   * Heading of the group. Omit it for a section that holds exactly one
+   * setting: that setting's own label is then promoted to the group's
+   * typography and heading level, so it does not say the same thing twice.
+   */
+  label?: string
+  /** Heading level of the label. Defaults to 3: the settings panel's own heading is an h2. */
+  headingLevel?: EditorSettingsHeadingLevel
+  /**
+   * Let the user fold the group away with a button in its heading. Only takes
+   * effect together with `label`: a group without a heading has nothing to
+   * click, so it stays an ordinary, always-open group and warns in
+   * development. The open state is `v-model:open`. Defaults to `false`.
+   */
+  collapsible?: boolean
+}
+
+/**
+ * Per target state, so a reversal mid-way eases from where it is.
+ *
+ * Opening uses `ease-out-strong`: the content arrives fast and settles. Closing
+ * uses `ease-in-out-strong` over the same 200ms. A strong ease-out would take
+ * most of a tall group (~320px) away in the first frames and read as a cut;
+ * ease-in-out starts gently, so the closing is seen. Height, the root's bottom
+ * padding and the chevron share duration and curve in each direction, so they
+ * stay in step frame for frame.
+ *
+ * The fade on closing is 150ms on the softer `ease-in-out`, so the content
+ * stays readable while it folds and is gone before the clip cuts it. Under
+ * reduced motion height, padding and chevron jump; the fade stays.
+ */
+const MOTION = {
+  root: {
+    base: 'transition-[padding-bottom] motion-reduce:transition-none',
+    open: 'pb-5 duration-200 ease-out-strong',
+    closed: 'pb-6 duration-200 ease-in-out-strong',
+  },
+  rows: {
+    base: 'grid transition-[grid-template-rows] motion-reduce:transition-none',
+    open: 'grid-rows-[1fr] duration-200 ease-out-strong',
+    closed: 'grid-rows-[0fr] duration-200 ease-in-out-strong',
+  },
+  clip: {
+    base: '-mx-1 -mb-1 min-h-0 overflow-hidden transition-opacity',
+    open: 'opacity-100 duration-200 ease-out-strong',
+    closed: 'opacity-0 duration-150 ease-in-out',
+  },
+  chevron: {
+    base: 'flex size-5 shrink-0 items-center justify-center transition-transform motion-reduce:transition-none',
+    open: 'rotate-0 duration-200 ease-out-strong',
+    closed: 'rotate-180 duration-200 ease-in-out-strong',
+  },
+} as const
+</script>
+
+<script lang="ts" setup>
+import { computed, inject, provide, useId, useTemplateRef, watch } from 'vue'
+import NexxtIcon from '../../../atoms/Icon/Icon.vue'
+import { EDITOR_SETTINGS_GROUP_KEY } from './editorSettingsGroupContext'
+
+/**
+ * A section of an editor settings panel: the settings that are about the same
+ * thing. It draws the divider above itself and owns the vertical space, so the
+ * settings inside need neither. Optionally collapsible from its heading.
+ */
+defineOptions({ name: 'NexxtEditorSettingsGroup' })
+
+const {
+  label,
+  headingLevel = 3,
+  collapsible = false,
+} = defineProps<NexxtEditorSettingsGroupProps>()
+
+/**
+ * Whether a collapsible group is open. Ignored unless the group is both
+ * `collapsible` and labelled; the parent owns the state.
+ */
+const open = defineModel<boolean>('open', { default: true })
+
+defineSlots<{
+  /** The settings: EditorSettingsBlocks, possibly wrapped in a reveal or a mobile marker. */
+  default?: () => unknown
+}>()
+
+// One heading level per panel is the whole point: a group in a group would be a
+// second level in 312 px of sidebar. It still renders, so a mistake shows up in
+// the console during development rather than as a blank panel. `process.env`
+// rather than `import.meta.env`: the library build bakes the latter in as
+// production, while the consumer's bundler replaces the former for its own mode.
+if (inject(EDITOR_SETTINGS_GROUP_KEY, null) && process.env.NODE_ENV !== 'production') {
+  console.warn('NexxtEditorSettingsGroup cannot be nested')
+}
+
+provide(
+  EDITOR_SETTINGS_GROUP_KEY,
+  computed(() => ({ grouped: true, promoted: !label, headingLevel })),
+)
+
+if (collapsible && !label && process.env.NODE_ENV !== 'production') {
+  console.warn('NexxtEditorSettingsGroup: collapsible needs a label; the group stays open')
+}
+
+const headingId = useId()
+
+const heading = computed(() => `h${headingLevel}`)
+
+/**
+ * Collapsing needs a heading to put the button in. The heading stays a
+ * heading, with one button across the whole row: `-my-0.5 py-0.5` makes it
+ * 24px tall without changing the 20px layout height and `-mx-1 px-1` gives the
+ * focus ring room, so open it is pixel-equal to a group that does not collapse.
+ * No `focus:outline-none`: in Tailwind v4 it sets `--tw-outline-style: none`,
+ * which `focus-visible:outline-2` then picks up, so the ring would never show.
+ * A button shows no outline on a mouse click anyway. The group is named
+ * (`group/toggle`) so a `.group` around the panel cannot light the chevron.
+ * The heading is `flex` so those negative margins stay on the button instead
+ * of collapsing through the heading and shifting it by 2px.
+ *
+ * The content stays mounted while closed, so the settings keep their local
+ * state and `aria-controls` always points at an element. The first block's
+ * `pt-4` sits inside the clip box and folds away with it, so the content
+ * wrapper is exactly 0px closed. Open, the last block's 4px of focus-ring room
+ * plus the root's `pb-5` make 24px under the last control; closed, that room
+ * has folded away too, so the root goes to `pb-6` and the title also ends 24px
+ * above the next line. The root padding transitions with the rows, so the
+ * height moves in one motion instead of jumping 4px. The clip box reaches 4px past each side (`-mx-1` / `px-1`) and 4px
+ * below (`-mb-1` / `pb-1`) without taking layout space, so the focus ring of a
+ * full-width or last control is not cut off.
+ *
+ * None of this is written as template comments: a group that does not
+ * collapse has to render exactly the markup it did before.
+ */
+const active = computed(() => collapsible && !!label)
+
+/**
+ * Derived from the heading id rather than a second `useId`, so a group that
+ * does not collapse renders and consumes exactly the ids it did before.
+ */
+const contentId = computed(() => `${headingId}-content`)
+
+const expanded = computed(() => !active.value || open.value)
+
+// `undefined`, never `false`: `:inert="false"` renders `inert="false"`, which a
+// browser still treats as inert. Same as EditorSettingsBlock.
+const inert = computed(() => (expanded.value ? undefined : true))
+
+const state = computed(() => (expanded.value ? 'open' : 'closed'))
+
+// A group that does not collapse keeps exactly the classes it had before.
+const rootClass = computed(() =>
+  active.value
+    ? ['border-t border-editor-divider pt-6', MOTION.root.base, MOTION.root[state.value]]
+    : ['border-t border-editor-divider pb-5', label ? 'pt-6' : 'pt-2'],
+)
+
+const toggleEl = useTemplateRef<HTMLButtonElement>('toggle')
+const contentEl = useTemplateRef<HTMLElement>('content')
+
+// Closed from outside while focus is inside: `inert` would drop it on <body>.
+// Runs before the DOM update, while the content can still hold focus.
+watch(open, (isOpen) => {
+  if (isOpen || !active.value) return
+  if (contentEl.value?.contains(document.activeElement)) toggleEl.value?.focus()
+})
+</script>
+
+<template>
+  <div
+    :class="rootClass"
+    :role="label ? 'group' : undefined"
+    :aria-labelledby="label ? headingId : undefined"
+  >
+    <!--
+      The line sits on top, always, the first group included: it separates the
+      group from whatever comes before it, so the last group has none below.
+      24px between groups: line to heading, and last control to the next line
+      (the last block's 4px of focus-ring room plus `pb-5`); 16px inside one.
+      Without a label the top is `pt-2`: the one setting inside brings its own
+      `pt-4`, so its promoted label also lands 24px under the line.
+    -->
+    <component
+      :is="heading"
+      v-if="active"
+      :id="headingId"
+      class="flex small-semibold text-gray-900"
+    >
+      <button
+        ref="toggle"
+        type="button"
+        :aria-expanded="open"
+        :aria-controls="contentId"
+        class="group/toggle -mx-1 -my-0.5 flex w-[calc(100%+0.5rem)] cursor-pointer items-center justify-between gap-2 rounded-md px-1 py-0.5 text-left focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-cornflower-blue-600"
+        @click="open = !open"
+      >
+        {{ label }}
+        <span aria-hidden="true" :class="[MOTION.chevron.base, MOTION.chevron[state]]">
+          <NexxtIcon
+            name="chevron-down"
+            class="extra-small-normal text-gray-700 transition-colors duration-150 group-hover/toggle:text-gray-900"
+          />
+        </span>
+      </button>
+    </component>
+    <component :is="heading" v-else-if="label" :id="headingId" class="small-semibold text-gray-900">
+      {{ label }}
+    </component>
+
+    <div
+      v-if="active"
+      :id="contentId"
+      ref="content"
+      data-testid="editor-settings-group-content"
+      :inert="inert"
+      :class="[MOTION.rows.base, MOTION.rows[state]]"
+    >
+      <div :class="[MOTION.clip.base, MOTION.clip[state]]">
+        <div class="px-1 pb-1">
+          <slot />
+        </div>
+      </div>
+    </div>
+    <slot v-else />
+  </div>
+</template>

package/src/components/editor/atoms/EditorSettingsGroup/editorSettingsGroupContext.ts

@@ -0,0 +1,27 @@
+import type { ComputedRef, InjectionKey } from 'vue'
+
+/** The heading levels a group label can take. The settings panel's own heading is an h2. */
+export type EditorSettingsHeadingLevel = 2 | 3 | 4 | 5 | 6
+
+/**
+ * What a NexxtEditorSettingsGroup tells the settings blocks inside it. Library
+ * internal: the group and the block are the only two that read or write it.
+ */
+export interface EditorSettingsGroupContext {
+  /** Always `true`: the block is inside a group, so the group owns the line and the bottom space. */
+  grouped: true
+  /**
+   * The group has no label of its own, so the label of the one setting in it
+   * is promoted to the group's typography and heading level.
+   */
+  promoted: boolean
+  /** Heading level of the group label, and of a promoted setting label. */
+  headingLevel: EditorSettingsHeadingLevel
+}
+
+/**
+ * Provided as a computed, so a label or heading level that changes after mount
+ * reaches the blocks without them having to remount.
+ */
+export const EDITOR_SETTINGS_GROUP_KEY: InjectionKey<ComputedRef<EditorSettingsGroupContext>> =
+  Symbol('NexxtEditorSettingsGroup')

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

@@ -44,6 +44,12 @@ export interface NexxtEditorAlignItemsProps {
    * Copy is never translated inside the component.
    */
   messages?: EditorAlignItemsMessages
+  /**
+   * The options to offer, as a subset of the four. They are always shown in
+   * the order of `EDITOR_ALIGN_ITEMS_OPTIONS`, whatever order this list is in;
+   * values not on that list are ignored. Defaults to all four.
+   */
+  options?: EditorAlignItemsValue[]
 }
 
 const DEFAULT_MESSAGES = {
@@ -62,7 +68,11 @@ import type { NexxtToggleGroupOption } from '../../../molecules/ToggleGroup/Togg
 
 defineOptions({ name: 'NexxtEditorAlignItems' })
 
-const { label = 'Uitlijning items', messages } = defineProps<NexxtEditorAlignItemsProps>()
+const {
+  label = 'Uitlijning items',
+  messages,
+  options: offered,
+} = defineProps<NexxtEditorAlignItemsProps>()
 
 /** The selected alignment, as the Tailwind class to apply. */
 const model = defineModel<EditorAlignItemsValue>({ required: true })
@@ -91,8 +101,12 @@ const ICONS: Record<
   stretch: 'arrows-up-down',
 }
 
+// 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_ALIGN_ITEMS_OPTIONS.map(({ token }) => ({
+  EDITOR_ALIGN_ITEMS_OPTIONS.filter(
+    ({ token }) => !offered || offered.includes(`items-${token}`),
+  ).map(({ token }) => ({
     value: `items-${token}`,
     icon: ICONS[token],
     ariaLabel: copy.value[token],

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

@@ -0,0 +1,139 @@
+<script lang="ts">
+import type {
+  EditorDimensionUnit,
+  EditorDimensionValue,
+} from '../../atoms/EditorDimensionField/EditorDimensionField.vue'
+
+/**
+ * A dash pattern in whole px: the length of one dash and the space between two.
+ * Numbers rather than classes, the same as `EditorDimensionValue`: the consumer
+ * writes them into CSS variables.
+ */
+export interface EditorDashPatternValue {
+  dash: number
+  gap: number
+}
+
+/**
+ * The range each value is clamped to, in px. Exported so the consumer's class
+ * matcher knows the same bounds.
+ */
+export const EDITOR_DASH_PATTERN_LIMITS = {
+  dash: { min: 1, max: 64 },
+  gap: { min: 1, max: 64 },
+} as const
+
+/** Overridable copy of the two fields. Every key is optional. */
+export interface EditorDashPatternMessages {
+  /** Caption and accessible name of the dash length field. Defaults to `'Lengte'`. */
+  dash?: string
+  /** Caption and accessible name of the gap field. Defaults to `'Tussenruimte'`. */
+  gap?: string
+  /** How the px unit is written in both fields. Defaults to `'px'`. */
+  unit?: string
+}
+
+export interface NexxtEditorDashPatternProps {
+  /**
+   * Header text of the settings block. Defaults to the Dutch `'Streep'`; the
+   * library has no i18n layer, so a consumer in another language passes its
+   * own copy in.
+   */
+  label?: string
+  /**
+   * Captions of the fields and the unit. 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?: EditorDashPatternMessages
+}
+
+const DEFAULT_MESSAGES = {
+  dash: 'Lengte',
+  gap: 'Tussenruimte',
+  unit: 'px',
+} satisfies Required<EditorDashPatternMessages>
+
+type DashPatternPart = keyof EditorDashPatternValue
+
+/** Both values are whole px; there is no other unit to pick. */
+const UNITS: EditorDimensionUnit[] = ['px']
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import NexxtEditorSettingsBlock from '../../atoms/EditorSettingsBlock/EditorSettingsBlock.vue'
+import NexxtEditorDimensionField from '../../atoms/EditorDimensionField/EditorDimensionField.vue'
+
+defineOptions({ name: 'NexxtEditorDashPattern' })
+
+const { label = 'Streep', messages } = defineProps<NexxtEditorDashPatternProps>()
+
+/** The dash pattern, in whole px. */
+const model = defineModel<EditorDashPatternValue>({ required: true })
+
+const emit = defineEmits<{
+  /**
+   * One edit in either field is finished -- passed on from the field: a typed
+   * value confirmed on blur or Enter, or an arrow key let go. The model has
+   * already been written by then, so a consumer that folds writes into one
+   * undo step closes it here.
+   */
+  commit: []
+}>()
+
+const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
+
+/**
+ * One field's view of the model. The field is never `optional`, so it never
+ * writes `null` -- an emptied field puts the previous value back -- and the
+ * guard is only there for the type.
+ */
+const part = (key: DashPatternPart) =>
+  computed({
+    get: (): EditorDimensionValue | null => ({ value: model.value[key], unit: 'px' }),
+    set: (next: EditorDimensionValue | null) => {
+      if (next) model.value = { ...model.value, [key]: next.value }
+    },
+  })
+
+const dash = part('dash')
+const gap = part('gap')
+
+const fieldOf = (key: DashPatternPart, model: typeof dash) => ({
+  key,
+  model,
+  label: copy.value[key],
+  min: { px: EDITOR_DASH_PATTERN_LIMITS[key].min },
+  max: { px: EDITOR_DASH_PATTERN_LIMITS[key].max },
+})
+
+const fields = computed(() => [fieldOf('dash', dash), fieldOf('gap', gap)])
+
+const fieldMessages = computed(() => ({ px: copy.value.unit }))
+</script>
+
+<template>
+  <NexxtEditorSettingsBlock :label="label">
+    <div class="grid grid-cols-2 gap-2">
+      <!--
+        Each field gets a visible caption: the inputs have no label of their
+        own, and two px fields side by side cannot be told apart otherwise. The
+        caption is repeated as the field's accessible name, with the unit
+        appended by the field itself.
+      -->
+      <div v-for="field in fields" :key="field.key" class="flex min-w-0 flex-col gap-1">
+        <span class="small-normal text-gray-700" aria-hidden="true">{{ field.label }}</span>
+        <NexxtEditorDimensionField
+          v-model="field.model.value"
+          :label="field.label"
+          :units="UNITS"
+          :min="field.min"
+          :max="field.max"
+          :messages="fieldMessages"
+          @commit="emit('commit')"
+        />
+      </div>
+    </div>
+  </NexxtEditorSettingsBlock>
+</template>

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

@@ -45,6 +45,12 @@ export interface NexxtEditorJustifyContentProps {
    * Copy is never translated inside the component.
    */
   messages?: EditorJustifyContentMessages
+  /**
+   * The options to offer, as a subset of the four. They are always shown in
+   * the order of `EDITOR_JUSTIFY_CONTENT_OPTIONS`, whatever order this list is
+   * in. Defaults to all four.
+   */
+  options?: EditorJustifyContentValue[]
 }
 
 const DEFAULT_MESSAGES = {
@@ -63,7 +69,11 @@ import type { NexxtToggleGroupOption } from '../../../molecules/ToggleGroup/Togg
 
 defineOptions({ name: 'NexxtEditorJustifyContent' })
 
-const { label = 'Uitlijning', messages } = defineProps<NexxtEditorJustifyContentProps>()
+const {
+  label = 'Uitlijning',
+  messages,
+  options: offered,
+} = defineProps<NexxtEditorJustifyContentProps>()
 
 /** The selected justification, as the Tailwind class to apply. */
 const model = defineModel<EditorJustifyContentValue>({ required: true })
@@ -88,8 +98,12 @@ const ICONS: Record<
   between: 'distribute-spacing-horizontal',
 }
 
+// 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_JUSTIFY_CONTENT_OPTIONS.map(({ token }) => ({
+  EDITOR_JUSTIFY_CONTENT_OPTIONS.filter(
+    ({ token }) => !offered || offered.includes(`justify-${token}`),
+  ).map(({ token }) => ({
     value: `justify-${token}`,
     icon: ICONS[token],
     ariaLabel: copy.value[token],