@nexxtmove/ui 1.44.0 → 1.46.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 group is named explicitly. Both attributes fall through to
+      ToggleGroup's root.
+    -->
+    <NexxtToggleGroup v-model="selected" :options="options" role="group" :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/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],

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

@@ -36,6 +36,22 @@ const props = withDefaults(defineProps<NexxtToggleGroupProps>(), {
 
 const model = defineModel<string>({ required: true })
 
+defineSlots<{
+  /**
+   * Content of one option, replacing the default icon and label. Rendered
+   * twice per option -- once on the button and once in the clipped overlay
+   * that shows the active colour -- so it should draw in `currentColor` and
+   * carry no state or ids of its own. The button keeps its `ariaLabel` /
+   * `tooltip` naming, so content without text still needs `ariaLabel`.
+   */
+  option?: (props: {
+    /** The option being rendered. */
+    option: NexxtToggleGroupOption
+    /** Whether this option is the selected value. */
+    selected: boolean
+  }) => unknown
+}>()
+
 const containerRef = useTemplateRef('containerRef')
 const buttonRefs = ref<HTMLButtonElement[]>([])
 const sliderStyle = ref({ width: '0px', transform: 'translateX(0px)' })
@@ -112,12 +128,14 @@ onMounted(async () => {
             :ref="(el) => (buttonRefs[index] = el as HTMLButtonElement)"
             type="button"
             :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-500 hover:text-gray-700"
+            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 }"
             @click="model = option.value"
           >
-            <NexxtIcon v-if="option.icon" :name="option.icon" />
-            <span v-if="option.label" class="extra-small-semibold">{{ option.label }}</span>
+            <slot name="option" :option="option" :selected="option.value === model">
+              <NexxtIcon v-if="option.icon" :name="option.icon" />
+              <span v-if="option.label" class="extra-small-semibold">{{ option.label }}</span>
+            </slot>
           </button>
           <template #tooltip>{{ option.tooltip }}</template>
         </NexxtTooltip>
@@ -126,12 +144,14 @@ onMounted(async () => {
           :ref="(el) => (buttonRefs[index] = el as HTMLButtonElement)"
           type="button"
           :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-500 hover:text-gray-700"
+          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 }"
           @click="model = option.value"
         >
-          <NexxtIcon v-if="option.icon" :name="option.icon" />
-          <span v-if="option.label" class="extra-small-semibold">{{ option.label }}</span>
+          <slot name="option" :option="option" :selected="option.value === model">
+            <NexxtIcon v-if="option.icon" :name="option.icon" />
+            <span v-if="option.label" class="extra-small-semibold">{{ option.label }}</span>
+          </slot>
         </button>
       </template>
 
@@ -150,8 +170,10 @@ onMounted(async () => {
           class="flex items-center justify-center gap-1.5 rounded-lg px-4 py-1.5 whitespace-nowrap"
           :class="[{ 'flex-1': equalWidth }, option.activeClass ?? 'text-cornflower-blue-600']"
         >
-          <NexxtIcon v-if="option.icon" :name="option.icon" />
-          <span v-if="option.label" class="extra-small-semibold">{{ option.label }}</span>
+          <slot name="option" :option="option" :selected="option.value === model">
+            <NexxtIcon v-if="option.icon" :name="option.icon" />
+            <span v-if="option.label" class="extra-small-semibold">{{ option.label }}</span>
+          </slot>
         </span>
       </div>
     </div>

package/src/components/molecules/Tree/Tree.vue

@@ -80,7 +80,7 @@ const selected = defineModel<string | null>('selected', { default: null })
 /** Ids of the nodes whose children are hidden. Tracking the collapsed ones makes "everything open" the default. */
 const collapsed = defineModel<string[]>('collapsed', { default: () => [] })
 
-const INDENT = 22
+const INDENT = 8
 
 const root = useTemplateRef<HTMLElement>('root')
 const focusedId = ref<string | null>(null)
@@ -890,7 +890,7 @@ defineExpose({ focusNode })
         <!-- The drop indicator: where the dragged node lands, at the depth it lands on. Out of
              the accessibility tree and without `data-tree-id`, so it is no row to the keyboard,
              the tab stop or the highlight. One element for the whole drag, that changes spots. -->
-        <div v-if="item.ghost" aria-hidden="true" class="mb-0.5" data-tree-ghost>
+        <div v-if="item.ghost" aria-hidden="true" class="mb-1.5" data-tree-ghost>
           <div
             class="flex rounded-md bg-cornflower-blue-50 py-1 pr-2 pl-1 small-normal text-gray-700 outline-1 -outline-offset-1 outline-cornflower-blue-600 transition-[margin-left] duration-200 ease-in-out-strong outline-dashed motion-reduce:transition-none"
             :style="{ marginLeft: `${item.depth * INDENT}px` }"
@@ -918,7 +918,7 @@ defineExpose({ focusNode })
           :data-tree-id="item.row.node.id"
           :data-tree-drop="collapsedTargetId === item.row.node.id ? 'inside' : undefined"
           :draggable="item.row.draggable"
-          class="group mb-0.5 flex items-center gap-1.5 rounded-md py-1 pr-2 small-normal transition-[color,background-color,outline-color,opacity] duration-150 select-none focus-visible:outline-2 focus-visible:outline-cornflower-blue-500 motion-reduce:transition-none"
+          class="group mb-1.5 flex items-center gap-1.5 overflow-x-clip rounded-md py-1 pr-2 small-normal transition-[color,background-color,outline-color,opacity] duration-150 select-none focus-visible:outline-2 focus-visible:outline-cornflower-blue-500 motion-reduce:transition-none"
           :class="rowClasses(item.row)"
           :style="{ paddingLeft: `${item.row.depth * INDENT + 4}px` }"
           @click="onRowClick(item.row.node.id)"
@@ -955,19 +955,39 @@ defineExpose({ focusNode })
             class="shrink-0 transition-colors duration-150 motion-reduce:transition-none"
             :class="selected === item.row.node.id ? 'text-cornflower-blue-600' : 'text-gray-600'"
           />
-          <span :id="labelId(item.row.node.id)" class="truncate">{{ item.row.node.label }}</span>
-
-          <!-- Revealed by opacity rather than removed, so the row keeps its layout while it
-               appears. Pulled into the row's padding so a 24px button leaves the row at 28px.
-               Stopping here keeps the row's click and the tree's keys away from the actions. -->
+          <span :id="labelId(item.row.node.id)" data-tree-label class="min-w-0 flex-1 truncate">{{
+            item.row.node.label
+          }}</span>
+
+          <!-- Only the selected row has actions: the track grows from 0 to their width and pushes
+               its label in, while their start, pinned to it, slides them in from the row's end.
+               The clip hides what has not slid in yet; the row's `overflow-x-clip` keeps them out
+               of the panel's scroll width meanwhile. Inert on every other row, so what cannot be
+               seen cannot be focused or read either; `undefined` rather than `false`, so no
+               `inert="false"` lands where the DOM has no such property. Pulled into the row's padding so a 24px
+               button leaves the row at 28px, and into the row's gap so a label without actions
+               runs to the row's end. Stopping here keeps the row's click and the tree's keys away
+               from the actions. -->
           <div
             v-if="slots['node-actions']"
             data-tree-actions
-            class="-my-0.5 ml-auto flex shrink-0 items-center opacity-0 transition-opacity duration-150 ease-out group-focus-within:opacity-100 group-hover:opacity-100 motion-reduce:transition-none pointer-coarse:opacity-100"
+            class="-my-0.5 -ml-1.5 grid shrink-0 transition-[grid-template-columns] duration-200 ease-in-out-strong [clip-path:inset(-0.5rem_-0.25rem)] motion-reduce:transition-none"
+            :class="
+              selected === item.row.node.id
+                ? 'grid-cols-[minmax(0,1fr)]'
+                : 'grid-cols-[minmax(0,0fr)]'
+            "
+            :inert="selected !== item.row.node.id || undefined"
             @click.stop
             @keydown.stop
           >
-            <NodeActions :node="item.row.node" :tabindex="tabindexOf(item.row.node.id)" />
+            <div
+              data-tree-actions-content
+              class="flex w-max items-center pl-1.5 transition-opacity duration-150 ease-out motion-reduce:transition-none"
+              :class="selected === item.row.node.id ? 'opacity-100' : 'opacity-0'"
+            >
+              <NodeActions :node="item.row.node" :tabindex="tabindexOf(item.row.node.id)" />
+            </div>
           </div>
         </div>
       </template>

package/src/components.json

@@ -74,10 +74,12 @@
   "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",
@@ -85,6 +87,7 @@
   "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",