@nexxtmove/ui 1.50.0 → 1.52.0

package/dist/nuxt.js

@@ -80,6 +80,7 @@ var s = {
 	NexxtEditorSettingsBlock: "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue",
 	NexxtEditorSettingsGroup: "components/editor/atoms/EditorSettingsGroup/EditorSettingsGroup.vue",
 	NexxtEditorAlignItems: "components/editor/molecules/EditorAlignItems/EditorAlignItems.vue",
+	NexxtEditorAnchor: "components/editor/molecules/EditorAnchor/EditorAnchor.vue",
 	NexxtEditorBackgroundSize: "components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue",
 	NexxtEditorBorder: "components/editor/molecules/EditorBorder/EditorBorder.vue",
 	NexxtEditorColor: "components/editor/molecules/EditorColor/EditorColor.vue",
@@ -93,6 +94,7 @@ var s = {
 	NexxtEditorLineHeight: "components/editor/molecules/EditorLineHeight/EditorLineHeight.vue",
 	NexxtEditorLineStyle: "components/editor/molecules/EditorLineStyle/EditorLineStyle.vue",
 	NexxtEditorMaxWidth: "components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue",
+	NexxtEditorOverrideStatus: "components/editor/molecules/EditorOverrideStatus/EditorOverrideStatus.vue",
 	NexxtEditorPadding: "components/editor/molecules/EditorPadding/EditorPadding.vue",
 	NexxtEditorRadius: "components/editor/molecules/EditorRadius/EditorRadius.vue",
 	NexxtEditorShadow: "components/editor/molecules/EditorShadow/EditorShadow.vue",

package/package.json

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

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

@@ -0,0 +1,242 @@
+<script lang="ts">
+/** The horizontal part of an anchor point. */
+export type EditorAnchorX = 'left' | 'center' | 'right'
+
+/** The vertical part of an anchor point. */
+export type EditorAnchorY = 'top' | 'center' | 'bottom'
+
+/** The point something is anchored to: a corner, an edge or the middle. */
+export interface EditorAnchorValue {
+  x: EditorAnchorX
+  y: EditorAnchorY
+}
+
+/**
+ * The nine cells, in reading order: row by row from the top, left to right.
+ * The labels are not in here; they arrive through `messages`.
+ */
+export const EDITOR_ANCHOR_OPTIONS = [
+  { x: 'left', y: 'top' },
+  { x: 'center', y: 'top' },
+  { x: 'right', y: 'top' },
+  { x: 'left', y: 'center' },
+  { x: 'center', y: 'center' },
+  { x: 'right', y: 'center' },
+  { x: 'left', y: 'bottom' },
+  { x: 'center', y: 'bottom' },
+  { x: 'right', y: 'bottom' },
+] as const satisfies readonly EditorAnchorValue[]
+
+/** Overridable copy for the nine cells. Every key is optional. */
+export interface EditorAnchorMessages {
+  /** Name of the top left cell. Defaults to `'Linksboven'`. */
+  topLeft?: string
+  /** Name of the top cell. Defaults to `'Boven'`. */
+  top?: string
+  /** Name of the top right cell. Defaults to `'Rechtsboven'`. */
+  topRight?: string
+  /** Name of the left cell. Defaults to `'Links'`. */
+  left?: string
+  /** Name of the middle cell. Defaults to `'Midden'`. */
+  center?: string
+  /** Name of the right cell. Defaults to `'Rechts'`. */
+  right?: string
+  /** Name of the bottom left cell. Defaults to `'Linksonder'`. */
+  bottomLeft?: string
+  /** Name of the bottom cell. Defaults to `'Onder'`. */
+  bottom?: string
+  /** Name of the bottom right cell. Defaults to `'Rechtsonder'`. */
+  bottomRight?: string
+}
+
+export interface NexxtEditorAnchorProps {
+  /**
+   * Accessible name of the radiogroup. Defaults to the Dutch
+   * `'Plek van de afbeelding'`; the library has no i18n layer, so a consumer
+   * in another language passes its own copy in. Only shown when `showLabel`
+   * is set.
+   */
+  label?: string
+  /**
+   * Show `label` as a header above the grid. Off by default: the editor puts
+   * the name of the setting next to the grid itself.
+   */
+  showLabel?: boolean
+  /**
+   * Names of the nine cells. 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?: EditorAnchorMessages
+  /** Block every interaction: no cell can be focused or chosen. */
+  disabled?: boolean
+}
+
+const DEFAULT_MESSAGES = {
+  topLeft: 'Linksboven',
+  top: 'Boven',
+  topRight: 'Rechtsboven',
+  left: 'Links',
+  center: 'Midden',
+  right: 'Rechts',
+  bottomLeft: 'Linksonder',
+  bottom: 'Onder',
+  bottomRight: 'Rechtsonder',
+} satisfies Required<EditorAnchorMessages>
+
+/** The messages key of each cell, by row and then by column. */
+const MESSAGE_KEYS: Record<EditorAnchorY, Record<EditorAnchorX, keyof EditorAnchorMessages>> = {
+  top: { left: 'topLeft', center: 'top', right: 'topRight' },
+  center: { left: 'left', center: 'center', right: 'right' },
+  bottom: { left: 'bottomLeft', center: 'bottom', right: 'bottomRight' },
+}
+
+const COLUMNS = 3
+const ROWS = EDITOR_ANCHOR_OPTIONS.length / COLUMNS
+
+/** The cell that takes the tab stop while none is chosen. */
+const MIDDLE = 4
+</script>
+
+<script lang="ts" setup>
+import { computed, useId, useTemplateRef } from 'vue'
+
+defineOptions({ name: 'NexxtEditorAnchor', inheritAttrs: false })
+
+const {
+  label = 'Plek van de afbeelding',
+  showLabel = false,
+  messages,
+  disabled = false,
+} = defineProps<NexxtEditorAnchorProps>()
+
+/**
+ * The chosen cell. `null` while none is, e.g. for a stored position that no
+ * cell stands for.
+ */
+const model = defineModel<EditorAnchorValue | null>({ required: true })
+
+const labelId = useId()
+
+const cellEls = useTemplateRef<HTMLButtonElement[]>('cellButtons')
+
+const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
+
+const selectedIndex = computed(() => {
+  const index = EDITOR_ANCHOR_OPTIONS.findIndex(
+    ({ x, y }) => x === model.value?.x && y === model.value?.y,
+  )
+  return index === -1 ? null : index
+})
+
+/** Roving tabindex: one tab stop, on the chosen cell or else on the middle. */
+const tabStop = computed(() => selectedIndex.value ?? MIDDLE)
+
+const cells = computed(() =>
+  EDITOR_ANCHOR_OPTIONS.map(({ x, y }, index) => {
+    const checked = index === selectedIndex.value
+    return {
+      index,
+      label: copy.value[MESSAGE_KEYS[y][x]],
+      checked,
+      tabindex: index === tabStop.value ? 0 : -1,
+      // -600, not -500: the white dot on -500 reaches only 2.78:1. The focus
+      // outline below is -600 for the same reason, against the white around it.
+      cellClass: [
+        checked ? 'bg-cornflower-blue-600' : !disabled && 'hover:bg-gray-100',
+        disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+      ],
+      dotClass: checked ? 'size-2.5 bg-white' : 'size-1.5 bg-gray-400',
+    }
+  }),
+)
+
+/** The visible header names the group when shown; otherwise the label does. */
+const groupName = computed(() =>
+  showLabel ? { 'aria-labelledby': labelId } : { 'aria-label': label },
+)
+
+const choose = (index: number) => {
+  const cell = EDITOR_ANCHOR_OPTIONS[index]
+
+  if (disabled || !cell || index === selectedIndex.value) return
+
+  model.value = { x: cell.x, y: cell.y }
+}
+
+/**
+ * The radio pattern in two dimensions: an arrow moves and chooses at once and
+ * stops at the edge; Home and End jump to the first and the last cell. A key
+ * with a modifier belongs to the browser or the OS (Alt+Left is back, Cmd+Left
+ * is line start), so it is left alone: no choice, no preventDefault.
+ */
+const onKeydown = (event: KeyboardEvent, index: number) => {
+  if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
+
+  const row = Math.floor(index / COLUMNS)
+  const column = index % COLUMNS
+  const next = {
+    ArrowLeft: column > 0 ? index - 1 : index,
+    ArrowRight: column < COLUMNS - 1 ? index + 1 : index,
+    ArrowUp: row > 0 ? index - COLUMNS : index,
+    ArrowDown: row < ROWS - 1 ? index + COLUMNS : index,
+    Home: 0,
+    End: EDITOR_ANCHOR_OPTIONS.length - 1,
+  }[event.key]
+
+  if (next === undefined) return
+
+  event.preventDefault()
+  choose(next)
+  cellEls.value?.[next]?.focus()
+}
+</script>
+
+<template>
+  <p v-if="showLabel" :id="labelId" class="mb-1.5 small-normal text-gray-900">{{ label }}</p>
+  <!--
+    `w-fit`: the grid columns are fractions, so in block flow the ring would
+    stretch to the full width of the parent.
+  -->
+  <div
+    role="radiogroup"
+    v-bind="{ ...groupName, ...$attrs }"
+    :aria-disabled="disabled || undefined"
+    :class="[
+      'grid w-fit grid-cols-3 gap-1 rounded-lg p-1 ring ring-gray-200',
+      disabled && 'opacity-50',
+    ]"
+  >
+    <!--
+      No `focus:outline-none` next to the focus-visible outline: in Tailwind v4
+      it sets the outline style to none, which the focus-visible variant does
+      not set back, so the ring would never show. The outline is -600, not
+      -500: -500 reaches 2.78:1 on white, short of the 3:1 for non-text.
+    -->
+    <button
+      v-for="cell in cells"
+      :key="cell.index"
+      ref="cellButtons"
+      type="button"
+      role="radio"
+      :aria-checked="cell.checked"
+      :aria-label="cell.label"
+      :tabindex="cell.tabindex"
+      :disabled="disabled"
+      :class="[
+        'flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none',
+        cell.cellClass,
+      ]"
+      @click="choose(cell.index)"
+      @keydown="onKeydown($event, cell.index)"
+    >
+      <span
+        aria-hidden="true"
+        :class="[
+          'rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none',
+          cell.dotClass,
+        ]"
+      />
+    </button>
+  </div>
+</template>

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

@@ -41,6 +41,18 @@ export interface NexxtEditorBackgroundSizeProps {
    * others. Copy is never translated inside the component.
    */
   messages?: EditorBackgroundSizeMessages
+  /**
+   * The options to offer, as a subset of the three. They are always shown in
+   * the order of `EDITOR_BACKGROUND_SIZE_OPTIONS`, whatever order this list is
+   * in; a duplicate or unknown value is ignored. Defaults to all three.
+   */
+  options?: EditorBackgroundSizeValue[]
+  /**
+   * Render only the options, without the settings block and its header, for a
+   * consumer that puts the control in a block of its own. `label` then names
+   * the options toolbar only and is not shown.
+   */
+  bare?: boolean
 }
 
 const DEFAULT_MESSAGES = {
@@ -58,7 +70,12 @@ import type { NexxtToggleGroupOption } from '../../../molecules/ToggleGroup/Togg
 
 defineOptions({ name: 'NexxtEditorBackgroundSize' })
 
-const { label = 'Vulling', messages } = defineProps<NexxtEditorBackgroundSizeProps>()
+const {
+  label = 'Vulling',
+  messages,
+  options: offered,
+  bare = false,
+} = defineProps<NexxtEditorBackgroundSizeProps>()
 
 /** The selected background size, as the Tailwind class to apply. */
 const model = defineModel<EditorBackgroundSizeValue>({ required: true })
@@ -83,8 +100,12 @@ const ICONS: Record<
   auto: 'image',
 }
 
+// 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_BACKGROUND_SIZE_OPTIONS.map(({ token }) => ({
+  EDITOR_BACKGROUND_SIZE_OPTIONS.filter(
+    ({ token }) => !offered || offered.includes(`bg-${token}`),
+  ).map(({ token }) => ({
     value: `bg-${token}`,
     icon: ICONS[token],
     ariaLabel: copy.value[token],
@@ -104,7 +125,8 @@ const selected = computed({
 </script>
 
 <template>
-  <NexxtEditorSettingsBlock :label="label">
+  <NexxtToggleGroup v-if="bare" v-model="selected" :options="options" :aria-label="label" />
+  <NexxtEditorSettingsBlock v-else :label="label">
     <NexxtToggleGroup v-model="selected" :options="options" :aria-label="label" />
   </NexxtEditorSettingsBlock>
 </template>

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

@@ -0,0 +1,213 @@
+<script lang="ts">
+export interface NexxtEditorOverrideStatusProps {
+  /** Whether the setting differs from where its value comes from without an override. */
+  overridden: boolean
+  /**
+   * The status while the setting is not overridden, such as `'Volgt huisstijl'`
+   * or `'Grootte 100% (origineel)'`. With `hideWhenDefault` it is not shown,
+   * but it is still announced when a reset brings the setting back.
+   */
+  label: string
+  /**
+   * The status while the setting is overridden, shown next to a dot. Defaults
+   * to the Dutch `'Aangepast'`; a value such as `'Grootte 150%'` works too.
+   */
+  overriddenLabel?: string
+  /**
+   * Text of the reset button, shown only while overridden, such as
+   * `'Terug naar huisstijl'`.
+   */
+  resetLabel: string
+  /** Render no status line at all while the setting is not overridden. */
+  hideWhenDefault?: boolean
+  /**
+   * A selector, matched inside the default slot, for the element that takes the
+   * focus after a reset. Defaults to the first focusable element in the slot.
+   * When it matches nothing focusable, the first focusable element is used, and
+   * without one the component itself takes the focus.
+   */
+  focusTarget?: string
+}
+
+/** Everything that can take the focus; `tabIndex` and state are checked per element. */
+const FOCUSABLE =
+  'a[href], button, input, select, textarea, [tabindex], [contenteditable="true"], [contenteditable=""]'
+
+/** How long an announcement stays in the live region before it is cleared again. */
+const ANNOUNCEMENT_MS = 1000
+</script>
+
+<script lang="ts" setup>
+import { computed, nextTick, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'
+
+defineOptions({ name: 'NexxtEditorOverrideStatus' })
+
+const {
+  overridden,
+  label,
+  overriddenLabel = 'Aangepast',
+  resetLabel,
+  hideWhenDefault = false,
+  focusTarget,
+} = defineProps<NexxtEditorOverrideStatusProps>()
+
+const emit = defineEmits<{
+  /** The reset button was pressed. The parent clears the override. */
+  reset: []
+}>()
+
+defineSlots<{
+  /** The control the status belongs to, rendered above the status line. */
+  default?: () => unknown
+}>()
+
+const root = useTemplateRef<HTMLElement>('root')
+const row = useTemplateRef<HTMLElement>('row')
+
+const status = computed(() => (overridden ? overriddenLabel : label))
+
+const showRow = computed(() => overridden || !hideWhenDefault)
+
+/**
+ * Whether an element can take the focus right now. `tabIndex` is -1 for the
+ * cells a roving tabindex skips, so only the tab stop of such a group counts.
+ */
+const canFocus = (el: Element): el is HTMLElement =>
+  el instanceof HTMLElement &&
+  el.tabIndex >= 0 &&
+  !el.matches(':disabled') &&
+  !el.closest('[inert]') &&
+  // Not in jsdom; a real browser also skips elements that are not rendered.
+  (typeof el.checkVisibility !== 'function' || el.checkVisibility())
+
+/**
+ * Candidates in the slot only: the status line itself is about to go. An
+ * invalid selector matches nothing rather than throwing, so a typo in
+ * `focusTarget` cannot stop the reset.
+ */
+const inSlot = (selector: string) => {
+  let matches: Element[]
+  try {
+    matches = [...(root.value?.querySelectorAll(selector) ?? [])]
+  } catch {
+    // `process.env.NODE_ENV` stays in the library build, so the consumer's
+    // bundler decides whether this runs (as in NexxtTabs).
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(
+        `[NexxtEditorOverrideStatus] \`focusTarget\` is not a valid selector: "${selector}". The focus goes to the first focusable element instead.`,
+      )
+    }
+    return []
+  }
+  return matches.filter((el): el is HTMLElement => !row.value?.contains(el) && canFocus(el))
+}
+
+/** The last resort: the component itself, focusable for this one move only. */
+const focusRoot = () => {
+  const el = root.value
+  if (!el) return
+  const release = () => el.removeAttribute('tabindex')
+  el.setAttribute('tabindex', '-1')
+  el.addEventListener('blur', release, { once: true })
+  el.focus()
+  // Without the focus there is no blur to wait for: take the tabindex off now.
+  if (document.activeElement !== el) {
+    el.removeEventListener('blur', release)
+    release()
+  }
+}
+
+const focusControl = () => {
+  const target = (focusTarget ? inSlot(focusTarget)[0] : undefined) ?? inSlot(FOCUSABLE)[0]
+  target?.focus()
+  if (!target || document.activeElement !== target) focusRoot()
+}
+
+const focusIsLost = () => {
+  const active = document.activeElement
+  return !active || active === document.body || !root.value?.contains(active)
+}
+
+/**
+ * The reset button goes with the override, which would drop the focus on
+ * `body`. The focus moves to the control first, while the button still
+ * exists; after the update it is checked again, in case the reset replaced the
+ * control it landed on. The reset is emitted whatever the focus move does.
+ */
+const onReset = async () => {
+  try {
+    focusControl()
+  } finally {
+    emit('reset')
+  }
+  await nextTick()
+  if (focusIsLost()) focusControl()
+}
+
+/**
+ * Only the switch between overridden and not is announced, with the status
+ * that belongs to the new state. A new `overriddenLabel` within the override,
+ * such as "Grootte 110%" on every arrow key, stays silent: the control already
+ * announces its own value. And only while the focus is inside: then the switch
+ * follows from what the user just did (a reset, a change in the control).
+ * Switching to another element in the editor changes every status at once,
+ * and that stays silent. Cleared afterwards, so the copy is not read twice
+ * when browsing.
+ */
+const announcement = ref('')
+let clearTimer: ReturnType<typeof setTimeout> | undefined
+
+watch(
+  () => overridden,
+  () => {
+    if (!root.value?.contains(document.activeElement)) return
+    announcement.value = status.value
+    clearTimeout(clearTimer)
+    clearTimer = setTimeout(() => (announcement.value = ''), ANNOUNCEMENT_MS)
+  },
+)
+
+onBeforeUnmount(() => clearTimeout(clearTimer))
+</script>
+
+<template>
+  <div
+    ref="root"
+    class="rounded-sm outline-cornflower-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2"
+  >
+    <!--
+      `rounded-sm` and the outline only show when the root itself holds the
+      focus: the fallback after a reset when the slot has nothing focusable.
+    -->
+    <slot />
+
+    <div
+      v-if="showRow"
+      ref="row"
+      :class="['flex items-center justify-between gap-3', $slots.default && 'pt-2']"
+    >
+      <span
+        v-if="overridden"
+        class="flex items-center gap-1.5 extra-small-normal text-cornflower-blue-700"
+      >
+        <span aria-hidden="true" class="size-1.5 shrink-0 rounded-full bg-cornflower-blue-500" />
+        {{ status }}
+      </span>
+      <span v-else class="extra-small-normal text-gray-700">{{ status }}</span>
+
+      <!-- No `focus:outline-none`: in Tailwind v4 it hides the focus-visible ring. -->
+      <button
+        v-if="overridden"
+        type="button"
+        class="shrink-0 cursor-pointer rounded-sm extra-small-link text-gray-800 hover:text-gray-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cornflower-blue-600"
+        @click="onReset"
+      >
+        {{ resetLabel }}
+      </button>
+    </div>
+
+    <div role="status" aria-live="polite" aria-atomic="true" class="sr-only">
+      {{ announcement }}
+    </div>
+  </div>
+</template>

package/src/components.json

@@ -77,6 +77,7 @@
   "NexxtEditorSettingsBlock": "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue",
   "NexxtEditorSettingsGroup": "components/editor/atoms/EditorSettingsGroup/EditorSettingsGroup.vue",
   "NexxtEditorAlignItems": "components/editor/molecules/EditorAlignItems/EditorAlignItems.vue",
+  "NexxtEditorAnchor": "components/editor/molecules/EditorAnchor/EditorAnchor.vue",
   "NexxtEditorBackgroundSize": "components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue",
   "NexxtEditorBorder": "components/editor/molecules/EditorBorder/EditorBorder.vue",
   "NexxtEditorColor": "components/editor/molecules/EditorColor/EditorColor.vue",
@@ -90,6 +91,7 @@
   "NexxtEditorLineHeight": "components/editor/molecules/EditorLineHeight/EditorLineHeight.vue",
   "NexxtEditorLineStyle": "components/editor/molecules/EditorLineStyle/EditorLineStyle.vue",
   "NexxtEditorMaxWidth": "components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue",
+  "NexxtEditorOverrideStatus": "components/editor/molecules/EditorOverrideStatus/EditorOverrideStatus.vue",
   "NexxtEditorPadding": "components/editor/molecules/EditorPadding/EditorPadding.vue",
   "NexxtEditorRadius": "components/editor/molecules/EditorRadius/EditorRadius.vue",
   "NexxtEditorShadow": "components/editor/molecules/EditorShadow/EditorShadow.vue",

package/src/index.ts

@@ -39,6 +39,13 @@ export type {
   EditorAlignItemsMessages,
   EditorAlignItemsValue,
 } from './components/editor/molecules/EditorAlignItems/EditorAlignItems.vue'
+export { EDITOR_ANCHOR_OPTIONS } from './components/editor/molecules/EditorAnchor/EditorAnchor.vue'
+export type {
+  EditorAnchorMessages,
+  EditorAnchorValue,
+  EditorAnchorX,
+  EditorAnchorY,
+} from './components/editor/molecules/EditorAnchor/EditorAnchor.vue'
 export { EDITOR_BACKGROUND_SIZE_OPTIONS } from './components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue'
 export type {
   EditorBackgroundSizeMessages,
@@ -204,6 +211,7 @@ export { default as NexxtDatePicker } from './components/organisms/DatePicker/Da
 export { default as NexxtDoughnutChart } from './components/molecules/DoughnutChart/DoughnutChart.vue'
 export { default as NexxtDropdownButton } from './components/organisms/DropdownButton/DropdownButton.vue'
 export { default as NexxtEditorAlignItems } from './components/editor/molecules/EditorAlignItems/EditorAlignItems.vue'
+export { default as NexxtEditorAnchor } from './components/editor/molecules/EditorAnchor/EditorAnchor.vue'
 export { default as NexxtEditorBackgroundSize } from './components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue'
 export { default as NexxtEditorBorder } from './components/editor/molecules/EditorBorder/EditorBorder.vue'
 export { default as NexxtEditorColor } from './components/editor/molecules/EditorColor/EditorColor.vue'
@@ -218,6 +226,7 @@ export { default as NexxtEditorLetterSpacing } from './components/editor/molecul
 export { default as NexxtEditorLineHeight } from './components/editor/molecules/EditorLineHeight/EditorLineHeight.vue'
 export { default as NexxtEditorLineStyle } from './components/editor/molecules/EditorLineStyle/EditorLineStyle.vue'
 export { default as NexxtEditorMaxWidth } from './components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue'
+export { default as NexxtEditorOverrideStatus } from './components/editor/molecules/EditorOverrideStatus/EditorOverrideStatus.vue'
 export { default as NexxtEditorPadding } from './components/editor/molecules/EditorPadding/EditorPadding.vue'
 export { default as NexxtEditorRadius } from './components/editor/molecules/EditorRadius/EditorRadius.vue'
 export { default as NexxtEditorSettingsBlock } from './components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue'