@nexxtmove/ui 2.0.0 → 2.2.0

package/dist/nuxt.js

@@ -84,6 +84,7 @@ var s = {
 	NexxtEditorAlignmentGrid: "components/editor/molecules/EditorAlignmentGrid/EditorAlignmentGrid.vue",
 	NexxtEditorAnchor: "components/editor/molecules/EditorAnchor/EditorAnchor.vue",
 	NexxtEditorBackgroundSize: "components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue",
+	NexxtEditorBlur: "components/editor/molecules/EditorBlur/EditorBlur.vue",
 	NexxtEditorBorder: "components/editor/molecules/EditorBorder/EditorBorder.vue",
 	NexxtEditorColor: "components/editor/molecules/EditorColor/EditorColor.vue",
 	NexxtEditorDashPattern: "components/editor/molecules/EditorDashPattern/EditorDashPattern.vue",

package/package.json

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

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

@@ -11,6 +11,12 @@ interface NexxtEditorSettingsBlockProps {
    * When `false` the content is always visible and the model is ignored.
    */
   switchable?: boolean
+  /**
+   * Id(s) of an element that describes the setting, set as `aria-describedby`
+   * on the switch. Only has an effect when `switchable` is `true`; without it
+   * no attribute is rendered.
+   */
+  describedby?: string
 }
 
 /**
@@ -21,7 +27,7 @@ interface NexxtEditorSettingsBlockProps {
  */
 defineOptions({ name: 'NexxtEditorSettingsBlock' })
 
-const { label, switchable = false } = defineProps<NexxtEditorSettingsBlockProps>()
+const { label, switchable = false, describedby } = defineProps<NexxtEditorSettingsBlockProps>()
 
 /**
  * Open state of the block, driven by the switch. Only has an effect when
@@ -80,7 +86,14 @@ const labelTag = computed(() => (promoted.value && group ? `h${group.value.headi
       back to the `gap-2` that Switch.vue sets for itself.
     -->
     <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">
+      <Switch
+        v-if="switchable"
+        v-model="model"
+        size="sm"
+        color="blue"
+        label-position="before"
+        :aria-describedby="describedby"
+      >
         <span :class="['grow text-left', labelTypography, labelColor]">{{ label }}</span>
       </Switch>
       <component :is="labelTag" v-else :class="[labelTypography, labelColor]">

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

@@ -0,0 +1,160 @@
+<script lang="ts">
+/**
+ * The blur steps the editor offers, in the order they are shown. `token` is the
+ * class without its fixed `backdrop-blur-` prefix, so the class is
+ * `backdrop-blur-` plus the token -- the same shape as `EDITOR_SHADOW_OPTIONS`.
+ * "No blur" is not a step: it is the switch being off. The labels are not in
+ * here; they arrive through `messages`, keyed by token.
+ */
+export const EDITOR_BLUR_OPTIONS = [
+  { token: 'xs' },
+  { token: 'sm' },
+  { token: 'md' },
+  { token: 'lg' },
+  { token: 'xl' },
+] as const
+
+/**
+ * The blur as the editor needs it: the Tailwind class itself, so the consumer
+ * can put the model value straight on the group it styles.
+ */
+export type EditorBlurValue = `backdrop-blur-${(typeof EDITOR_BLUR_OPTIONS)[number]['token']}`
+
+/** Overridable copy of the step control. Every key is optional. */
+export interface EditorBlurMessages {
+  /**
+   * Accessible name of the group of steps. Visually hidden: the block label
+   * already says what the steps are. Defaults to the Dutch `'Sterkte'`.
+   */
+  strength?: string
+  /** Name of the `backdrop-blur-xs` option. Defaults to `'XS'`. */
+  xs?: string
+  /** Name of the `backdrop-blur-sm` option. Defaults to `'S'`. */
+  sm?: string
+  /** Name of the `backdrop-blur-md` option. Defaults to `'M'`. */
+  md?: string
+  /** Name of the `backdrop-blur-lg` option. Defaults to `'L'`. */
+  lg?: string
+  /** Name of the `backdrop-blur-xl` option. Defaults to `'XL'`. */
+  xl?: string
+}
+
+export interface NexxtEditorBlurProps {
+  /**
+   * Header text of the settings block. Defaults to the Dutch `'Vervagen'`; 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 steps.
+   * Defaults to `true`: there is no "none" step, so the switch is the only way
+   * to turn the blur off. The switch state is the `enabled` model; switching
+   * off leaves the step alone.
+   */
+  switchable?: boolean
+  /**
+   * Copy of the step control. Merged per key, so overriding one key keeps the
+   * defaults of the others. Copy is never translated inside the component.
+   */
+  messages?: EditorBlurMessages
+  /**
+   * Id(s) of an element that describes the setting, such as a hint the
+   * consumer renders itself. Set as `aria-describedby` on the switch (when
+   * `switchable`) and on the group of steps. Without it no attribute is set.
+   */
+  describedby?: string
+}
+
+const DEFAULT_MESSAGES = {
+  strength: 'Sterkte',
+  xs: 'XS',
+  sm: 'S',
+  md: 'M',
+  lg: 'L',
+  xl: 'XL',
+} satisfies Required<EditorBlurMessages>
+
+/** The class a control starts on when it is switched on without a valid one. */
+const DEFAULT_VALUE: EditorBlurValue = 'backdrop-blur-md'
+
+const toValue = (token: (typeof EDITOR_BLUR_OPTIONS)[number]['token']): EditorBlurValue =>
+  `backdrop-blur-${token}`
+
+const isValue = (value: unknown): value is EditorBlurValue =>
+  EDITOR_BLUR_OPTIONS.some(({ token }) => toValue(token) === value)
+</script>
+
+<script lang="ts" setup>
+import { computed, watch } 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: 'NexxtEditorBlur' })
+
+const {
+  label = 'Vervagen',
+  switchable = true,
+  messages,
+  describedby,
+} = defineProps<NexxtEditorBlurProps>()
+
+/**
+ * The selected blur, as the Tailwind class to apply (`backdrop-blur-md`).
+ * Optional: a consumer may have no class stored yet. Without a valid class the
+ * control shows `md` but writes nothing, so the consumer has to assume
+ * `backdrop-blur-md` itself. Only a switch from off to on (when `switchable`)
+ * writes `backdrop-blur-md` back; mounting never emits.
+ */
+const model = defineModel<EditorBlurValue>()
+
+/**
+ * Open state of the block. Only has an effect when `switchable` is `true`; then
+ * off is the way to express "no blur". With `switchable` set to `false` the
+ * steps are always active, whatever this model says.
+ */
+const enabled = defineModel<boolean>('enabled', { default: true })
+
+const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
+
+const options = computed<NexxtToggleGroupOption[]>(() =>
+  EDITOR_BLUR_OPTIONS.map(({ token }) => ({ value: toValue(token), label: copy.value[token] })),
+)
+
+// ToggleGroup types its model as an open `string`; the setter narrows it, which
+// is safe because it can only emit the option values built above. A missing or
+// unknown class shows `md` rather than leaving every option unselected.
+const selected = computed({
+  get: () => (isValue(model.value) ? model.value : DEFAULT_VALUE),
+  set: (value: string) => {
+    model.value = value as EditorBlurValue
+  },
+})
+
+// Switching on without a valid class writes `backdrop-blur-md` back, so the
+// consumer never ends up with an enabled blur and no class to apply. Without a
+// switch there is no switching on, so `enabled` is ignored there like everywhere
+// else. The current model is read here rather than captured, so a parent that
+// sets both in one tick wins.
+watch(enabled, (on, wasOn) => {
+  if (switchable && on && !wasOn && !isValue(model.value)) model.value = DEFAULT_VALUE
+})
+</script>
+
+<template>
+  <NexxtEditorSettingsBlock
+    v-model="enabled"
+    :label="label"
+    :switchable="switchable"
+    :describedby="describedby"
+  >
+    <NexxtToggleGroup
+      v-model="selected"
+      :label="copy.strength"
+      label-hidden
+      :options="options"
+      :aria-describedby="describedby"
+    />
+  </NexxtEditorSettingsBlock>
+</template>

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

@@ -48,6 +48,11 @@ export interface EditorColorMessages {
   suggestionsLabel?: string
   /** Label shown above the theme roles. Defaults to `'Huisstijl'`. */
   themeLabel?: string
+  /**
+   * Label above the opacity slider, and its accessible name. Defaults to
+   * `'Dekking'`. Only shown with `showAlpha`.
+   */
+  alphaLabel?: string
 }
 
 export interface NexxtEditorColorProps {
@@ -83,20 +88,31 @@ export interface NexxtEditorColorProps {
    * 8-digit hex is left out. Without roles the section is not rendered.
    */
   themeRoles?: EditorColorThemeRole[]
+  /**
+   * Offer an opacity slider in the picker. A colour picked below full opacity is
+   * written as an 8-digit hex (`bg-[#1777ea80]`); a fully opaque one keeps the
+   * 6-digit form. The slider is hidden while a theme role is selected: a role
+   * class carries no opacity. Off by default, in which case a stored 8-digit hex
+   * is shown opaque and only replaced once a new colour is picked. Turning it off
+   * while a translucent colour is set does write at once: the picker drops the
+   * alpha and the model gets the opaque 6-digit hex.
+   */
+  showAlpha?: boolean
 }
 
 const DEFAULT_MESSAGES = {
   placeholder: 'Kies kleur...',
   suggestionsLabel: 'Gebruikte kleuren',
   themeLabel: 'Huisstijl',
+  alphaLabel: 'Dekking',
 } satisfies Required<EditorColorMessages>
 
 /**
  * A literal model value: one of the two prefixes, then a 6- or 8-digit hex between
  * brackets. A `border-[…]` class is therefore read as unparseable, the same as
- * any other class this component does not own. The
- * alpha pair is accepted on read so a stored `#1777EA80` survives a round trip,
- * even though the picker itself is opened without an alpha channel here.
+ * any other class this component does not own. The alpha pair is accepted on
+ * read whether or not `showAlpha` is set, so a stored `#1777EA80` survives a
+ * round trip either way.
  */
 const VALUE_PATTERN = /^(bg|text)-\[(#[0-9A-Fa-f]{6}(?:[0-9A-Fa-f]{2})?)\]$/
 
@@ -109,6 +125,12 @@ const ROLE_PATTERN = new RegExp(`^(?:bg|text)-theme-(${ROLES.join('|')})$`)
 
 /** The picker throws on a colour it cannot read, so a role's hex is checked first. */
 const ROLE_HEX_PATTERN = /^#[0-9A-Fa-f]{6}(?:[0-9A-Fa-f]{2})?$/
+
+/**
+ * The picker writes `#rrggbbaa` only below full opacity, but an alpha a hair
+ * under 1 still rounds to `ff`. That pair says nothing, so it is dropped.
+ */
+const OPAQUE_ALPHA_PATTERN = /^(#[0-9A-Fa-f]{6})[fF]{2}$/
 </script>
 
 <script lang="ts" setup>
@@ -126,6 +148,7 @@ const {
   messages,
   suggestions = [],
   themeRoles = [],
+  showAlpha = false,
 } = defineProps<NexxtEditorColorProps>()
 
 /**
@@ -181,8 +204,19 @@ const activeRole = computed(() => offeredRoles.value.find(({ role }) => role ===
  * reports nothing when it is told to pick the string it already has, so a role's
  * hex is handed over in its 8-digit form: with `show-alpha` off the picker never
  * reports an alpha pair, which makes every pick a change.
+ *
+ * A role has no opacity here, so an alpha pair in the role's own hex is replaced
+ * by `ff`. Handed over translucent, the picker would drop that alpha the moment
+ * the role turns `show-alpha` off, and write the opaque hex over the role.
+ */
+const pickerHex = (roleHex: string) => `${roleHex.slice(0, 7)}ff`
+
+/**
+ * A role class has no opacity, so the slider is only offered for a literal.
+ * Hiding it is also what keeps the trick in `pickerHex` working: without the
+ * alpha channel the picker reads the role's hex as opaque.
  */
-const pickerHex = (roleHex: string) => (roleHex.length === 7 ? `${roleHex}ff` : roleHex)
+const alphaEnabled = computed(() => showAlpha && !activeRole.value)
 
 // An unparseable value -- empty, a token class such as `bg-red-500`, or copy
 // from before this component -- leaves the picker empty and its placeholder
@@ -195,7 +229,8 @@ const picked = computed({
   // would still wipe a perfectly good colour, so it is dropped rather than
   // written through. The picker keeps rendering the model's colour.
   set: (value: string) => {
-    if (isHex(value)) model.value = `${property}-[${value}]`
+    const color = value.replace(OPAQUE_ALPHA_PATTERN, '$1')
+    if (isHex(color)) model.value = `${property}-[${color}]`
   },
 })
 
@@ -234,10 +269,11 @@ watch(
       full-width
       match-width
       :formats="['hex']"
-      :show-alpha="false"
+      :show-alpha="alphaEnabled"
       :placeholder="copy.placeholder"
       :suggestions="{ hex: suggestions }"
       :suggestions-label="copy.suggestionsLabel"
+      :alpha-label="copy.alphaLabel"
       :value-label="activeRole?.label"
     >
       <template v-if="offeredRoles.length" #presets>

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

@@ -24,6 +24,12 @@ interface NexxtToggleGroupProps {
   options: NexxtToggleGroupOption[]
   label?: string
   equalWidth?: boolean
+  /**
+   * Hide `label` visually while it stays the group's accessible name, for a
+   * group whose purpose is already clear from a heading around it. Defaults to
+   * `false`. Has no effect without a `label`.
+   */
+  labelHidden?: boolean
 }
 
 defineOptions({
@@ -32,6 +38,7 @@ defineOptions({
 
 const props = withDefaults(defineProps<NexxtToggleGroupProps>(), {
   equalWidth: true,
+  labelHidden: false,
 })
 
 const model = defineModel<string>({ required: true })
@@ -158,7 +165,11 @@ onMounted(async () => {
 
 <template>
   <div class="flex flex-col gap-1" role="toolbar" :aria-labelledby="label ? labelId : undefined">
-    <label v-if="label" :id="labelId" class="justify-start small-normal text-gray-700">
+    <label
+      v-if="label"
+      :id="labelId"
+      :class="['justify-start small-normal text-gray-700', labelHidden && 'sr-only']"
+    >
       {{ label }}
     </label>
     <div

package/src/components/organisms/ColorPicker/ColorPicker.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, watch, computed } from 'vue'
+import { ref, watch, computed, useId } from 'vue'
 import type { Color, ColorChannel } from 'reka-ui'
 import {
   ColorAreaArea,
@@ -27,6 +27,11 @@ export interface NexxtColorPickerProps {
   error?: boolean
   errorMessage?: string
   required?: boolean
+  /**
+   * Offer an opacity slider and accept colours below full opacity. Turning it
+   * off while the colour is translucent writes the opaque colour to the model
+   * at once.
+   */
   showAlpha?: boolean
   formats?: ColorFormat[]
   fullWidth?: boolean
@@ -35,6 +40,8 @@ export interface NexxtColorPickerProps {
   suggestions?: ColorSuggestions
   /** Accessible and visible label for the suggestions. */
   suggestionsLabel?: string
+  /** Visible label of the opacity slider, and the slider's accessible name. */
+  alphaLabel?: string
   /**
    * Text shown in the trigger in place of the formatted colour, for a value that has a name of
    * its own, such as a theme role. Only shown while a colour is set.
@@ -49,7 +56,16 @@ defineSlots<{
   presets?(): unknown
 }>()
 
-const PICKER_ID = 'color-picker-' + Math.random().toString(36).slice(2, 10)
+// `useId` is the same on the server and in the browser; a random id would not hydrate.
+const PICKER_ID = useId()
+const ALPHA_LABEL_ID = useId()
+
+/**
+ * reka reports the alpha channel as `alpha * 100`, which is a fraction for most
+ * stored colours (`#…80` is 50.196) and float noise for some steps (7.000…01).
+ * Only what the slider announces is rounded; the colour itself is untouched.
+ */
+const roundedChannel = (value: number) => Math.round(value)
 
 const props = withDefaults(defineProps<NexxtColorPickerProps>(), {
   placeholder: 'Kies kleur...',
@@ -59,6 +75,7 @@ const props = withDefaults(defineProps<NexxtColorPickerProps>(), {
   matchWidth: false,
   suggestions: () => ({}),
   suggestionsLabel: 'Gebruikte kleuren',
+  alphaLabel: 'Dekking',
 })
 
 const model = defineModel<string>({ default: '' })
@@ -168,11 +185,24 @@ watch(
   },
 )
 
+// A parent can swap the value in the same update that turns alpha off, and this
+// watcher may run before the one above. So the colour is read from the model,
+// which already holds the new value, not from `colorObj`, which may not.
+const currentColor = () => {
+  if (!model.value) return colorObj.value
+  try {
+    return normalizeColor(model.value)
+  } catch {
+    return colorObj.value
+  }
+}
+
 watch(
   () => props.showAlpha,
   (showAlpha) => {
-    if (!showAlpha && colorObj.value.alpha < 1) {
-      const updated = withoutAlpha(colorObj.value)
+    const current = currentColor()
+    if (!showAlpha && current.alpha < 1) {
+      const updated = withoutAlpha(current)
       colorObj.value = updated
       model.value = fmt(updated, activeFormat.value)
     }
@@ -270,28 +300,43 @@ watch(
           </ColorSliderRoot>
 
           <!-- Alpha slider (opt-in via showAlpha prop) -->
-          <!-- The checkerboard wrapper is behind the track; the gradient goes from
-               rgba(…,0) → rgba(…,1) so its transparent left end reveals it. -->
-          <div v-if="showAlpha" class="relative flex h-5 items-center">
-            <div
-              class="absolute inset-x-0 inset-y-1 rounded-full"
-              style="
-                background-image: repeating-conic-gradient(#e5e7eb 0% 25%, #ffffff 0% 50%);
-                background-size: 10px 10px;
-              "
-            />
-            <ColorSliderRoot
-              :model-value="colorObj"
-              channel="alpha"
-              color-space="hsl"
-              class="relative z-10 flex size-full touch-none items-center select-none"
-              @update:color="handleColorUpdate"
-            >
-              <ColorSliderTrack class="relative h-3 flex-1 overflow-hidden rounded-full" />
-              <ColorSliderThumb
-                class="block size-5 cursor-grab rounded-full border-2 border-white bg-white shadow-sm focus:ring-2 focus:ring-cornflower-blue-500 focus:outline-none active:cursor-grabbing"
+          <div v-if="showAlpha" class="flex flex-col gap-1">
+            <span :id="ALPHA_LABEL_ID" class="extra-small-normal text-gray-500">{{
+              alphaLabel
+            }}</span>
+            <!-- The checkerboard wrapper is behind the track; the gradient goes from
+                 rgba(…,0) → rgba(…,1) so its transparent left end reveals it. -->
+            <div class="relative flex h-5 items-center">
+              <div
+                class="absolute inset-x-0 inset-y-1 rounded-full"
+                style="
+                  background-image: repeating-conic-gradient(#e5e7eb 0% 25%, #ffffff 0% 50%);
+                  background-size: 10px 10px;
+                "
               />
-            </ColorSliderRoot>
+              <ColorSliderRoot
+                :model-value="colorObj"
+                channel="alpha"
+                color-space="hsl"
+                class="relative z-10 flex size-full touch-none items-center select-none"
+                @update:color="handleColorUpdate"
+              >
+                <ColorSliderTrack class="relative h-3 flex-1 overflow-hidden rounded-full" />
+                <!--
+                With `as-child` reka merges its own attributes under the child's,
+                so the child's win: the name comes from the visible label instead
+                of reka's English "Alpha", and the value is announced whole.
+              -->
+                <ColorSliderThumb v-slot="{ channelValue }" as-child>
+                  <span
+                    :aria-label="undefined"
+                    :aria-labelledby="ALPHA_LABEL_ID"
+                    :aria-valuenow="roundedChannel(channelValue)"
+                    class="block size-5 cursor-grab rounded-full border-2 border-white bg-white shadow-sm focus:ring-2 focus:ring-cornflower-blue-500 focus:outline-none active:cursor-grabbing"
+                  />
+                </ColorSliderThumb>
+              </ColorSliderRoot>
+            </div>
           </div>
 
           <!-- Format input fields — only active format shown, cycle with chevrons -->

package/src/components.json

@@ -81,6 +81,7 @@
   "NexxtEditorAlignmentGrid": "components/editor/molecules/EditorAlignmentGrid/EditorAlignmentGrid.vue",
   "NexxtEditorAnchor": "components/editor/molecules/EditorAnchor/EditorAnchor.vue",
   "NexxtEditorBackgroundSize": "components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue",
+  "NexxtEditorBlur": "components/editor/molecules/EditorBlur/EditorBlur.vue",
   "NexxtEditorBorder": "components/editor/molecules/EditorBorder/EditorBorder.vue",
   "NexxtEditorColor": "components/editor/molecules/EditorColor/EditorColor.vue",
   "NexxtEditorDashPattern": "components/editor/molecules/EditorDashPattern/EditorDashPattern.vue",

package/src/index.ts

@@ -70,6 +70,12 @@ export type {
   EditorBackgroundSizeMessages,
   EditorBackgroundSizeValue,
 } from './components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue'
+export { EDITOR_BLUR_OPTIONS } from './components/editor/molecules/EditorBlur/EditorBlur.vue'
+export type {
+  EditorBlurMessages,
+  EditorBlurValue,
+  NexxtEditorBlurProps,
+} from './components/editor/molecules/EditorBlur/EditorBlur.vue'
 export { EDITOR_FLEX_DIRECTION_OPTIONS } from './components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue'
 export type {
   EditorFlexDirectionMessages,
@@ -233,6 +239,7 @@ export { default as NexxtEditorAlignItems } from './components/editor/molecules/
 export { default as NexxtEditorAlignmentGrid } from './components/editor/molecules/EditorAlignmentGrid/EditorAlignmentGrid.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 NexxtEditorBlur } from './components/editor/molecules/EditorBlur/EditorBlur.vue'
 export { default as NexxtEditorBorder } from './components/editor/molecules/EditorBorder/EditorBorder.vue'
 export { default as NexxtEditorColor } from './components/editor/molecules/EditorColor/EditorColor.vue'
 export { default as NexxtEditorDashPattern } from './components/editor/molecules/EditorDashPattern/EditorDashPattern.vue'