@nexxtmove/ui 1.20.0 → 1.22.0

package/dist/nuxt.js

@@ -68,8 +68,10 @@ var s = {
 	NexxtEditorAlignItems: "components/editor/molecules/EditorAlignItems/EditorAlignItems.vue",
 	NexxtEditorFlexDirection: "components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue",
 	NexxtEditorGap: "components/editor/molecules/EditorGap/EditorGap.vue",
+	NexxtEditorHeadingType: "components/editor/molecules/EditorHeadingType/EditorHeadingType.vue",
 	NexxtEditorJustifyContent: "components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue",
-	NexxtEditorPadding: "components/editor/molecules/EditorPadding/EditorPadding.vue"
+	NexxtEditorPadding: "components/editor/molecules/EditorPadding/EditorPadding.vue",
+	NexxtEditorRadius: "components/editor/molecules/EditorRadius/EditorRadius.vue"
 }, c = ["@nexxtmove/ui/ui.css", "@nexxtmove/ui/dist/ui.css"], l = (e, t) => e.some((e) => e === t || c.includes(e)), u = i({
 	meta: {
 		name: "@nexxtmove/ui",

package/package.json

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

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

@@ -0,0 +1,120 @@
+<script lang="ts">
+/**
+ * The heading levels the editor offers, in the order they are listed. The level
+ * is what the option shows -- its label and its `h1`..`h6` icon -- and the size
+ * is what the model carries. The sizes are Tailwind's default scale on purpose,
+ * not the theme's `heading-*` utilities: this value is data the editor stores
+ * and puts back on an element, so it has to be a class every consumer resolves.
+ */
+const HEADING_LEVELS = [
+  { level: 1, size: 'text-4xl' },
+  { level: 2, size: 'text-3xl' },
+  { level: 3, size: 'text-2xl' },
+  { level: 4, size: 'text-xl' },
+  { level: 5, size: 'text-lg' },
+  { level: 6, size: 'text-base' },
+] as const
+
+/**
+ * The heading as the editor needs it: the Tailwind font-size class itself, so
+ * the consumer can put the model value straight on the element it styles.
+ * Weight is deliberately not part of it -- that becomes a setting of its own.
+ */
+export type EditorHeadingTypeValue = (typeof HEADING_LEVELS)[number]['size']
+
+/** Overridable copy for the six options. Every key is optional. */
+export interface EditorHeadingTypeMessages {
+  /** Label of the `h1` option. Defaults to `'Heading 1'`. */
+  h1?: string
+  /** Label of the `h2` option. Defaults to `'Heading 2'`. */
+  h2?: string
+  /** Label of the `h3` option. Defaults to `'Heading 3'`. */
+  h3?: string
+  /** Label of the `h4` option. Defaults to `'Heading 4'`. */
+  h4?: string
+  /** Label of the `h5` option. Defaults to `'Heading 5'`. */
+  h5?: string
+  /** Label of the `h6` option. Defaults to `'Heading 6'`. */
+  h6?: string
+}
+
+export interface NexxtEditorHeadingTypeProps {
+  /**
+   * Header text of the settings block. Defaults to the Dutch `'Type'`; the
+   * library has no i18n layer, so a consumer in another language passes its
+   * own copy in.
+   */
+  label?: string
+  /**
+   * Labels of the six options. The defaults use the English term "Heading",
+   * as the Dutch design in Figma does, and are merged per key, so overriding
+   * one label keeps the defaults of the others. Copy is never translated
+   * inside the component.
+   */
+  messages?: EditorHeadingTypeMessages
+}
+
+const DEFAULT_MESSAGES = {
+  h1: 'Heading 1',
+  h2: 'Heading 2',
+  h3: 'Heading 3',
+  h4: 'Heading 4',
+  h5: 'Heading 5',
+  h6: 'Heading 6',
+} satisfies Required<EditorHeadingTypeMessages>
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import NexxtEditorSettingsBlock from '../../atoms/EditorSettingsBlock/EditorSettingsBlock.vue'
+import NexxtSelect from '../../../molecules/Select/Select.vue'
+import type { SelectOption } from '../../../molecules/Select/Select.vue'
+
+defineOptions({ name: 'NexxtEditorHeadingType' })
+
+const { label = 'Type', messages } = defineProps<NexxtEditorHeadingTypeProps>()
+
+/** The selected heading, as the Tailwind font-size class to apply. */
+const model = defineModel<EditorHeadingTypeValue>({ required: true })
+
+const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
+
+// The level doubles as the messages key and the Font Awesome icon name --
+// `h1` through `h6` all exist in the kit.
+const options = computed<SelectOption[]>(() =>
+  HEADING_LEVELS.map(({ level, size }) => {
+    const key = `h${level}` as const
+    return { value: size, label: copy.value[key], icon: key }
+  }),
+)
+
+const values = HEADING_LEVELS.map(({ size }) => size)
+
+// Select types its model as the open `string | number | null` of its options,
+// so writing straight back into the narrower model is a type error. The setter
+// is the one place that narrowing happens, and it is guarded: a value that is
+// not one of the six options is dropped rather than written through.
+const selected = computed({
+  get: () => model.value,
+  set: (value: string | number | null) => {
+    const found = values.find((option) => option === value)
+    if (found) model.value = found
+  },
+})
+</script>
+
+<template>
+  <NexxtEditorSettingsBlock :label="label">
+    <!--
+      Select is `inline-flex` and its field carries a `min-w-60`, so without
+      `w-full` it would sit at that minimum instead of filling the block. The
+      class lands on Select's root, whose trigger is already `w-full`.
+    -->
+    <!--
+      The block label is a <p>, not a <label>, so the combobox would have no
+      accessible name of its own; `aria-label` gives it the same copy without
+      repeating it on screen.
+    -->
+    <NexxtSelect v-model="selected" :options="options" :aria-label="label" class="w-full" />
+  </NexxtEditorSettingsBlock>
+</template>

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

@@ -0,0 +1,137 @@
+<script lang="ts">
+/**
+ * The steps the slider can land on: the radius scale the library actually has,
+ * which is the Figma theme tokens plus the Tailwind defaults that sit on top of
+ * them -- the theme adds no `--radius-*: initial`, so `rounded-2xl` through
+ * `rounded-4xl` and `rounded-full` resolve to Tailwind's own values. The px
+ * numbers mirror those values (rem × 16). Known limitation: the theme file is
+ * overwritten wholesale by the Figma token sync, and a sync that changes a
+ * radius does not reach this list -- it has to be updated by hand.
+ *
+ * `full` is last and carries no px: it is a pill, not a size on the scale, so
+ * the readout names it instead of measuring it.
+ */
+const RADIUS_STEPS = [
+  { token: 'none', px: 0 },
+  { token: 'xs', px: 2 },
+  { token: 'sm', px: 4 },
+  { token: 'md', px: 6 },
+  { token: 'lg', px: 8 },
+  { token: 'xl', px: 12 },
+  { token: '2xl', px: 16 },
+  { token: '3xl', px: 24 },
+  { token: '4xl', px: 32 },
+  { token: 'full', px: null },
+] as const
+
+/**
+ * The radius as the editor needs it: the Tailwind class itself, so the consumer
+ * can put the model value straight on the element it styles.
+ */
+export type EditorRadiusValue = `rounded-${(typeof RADIUS_STEPS)[number]['token']}`
+
+/** Overridable copy of the value readout. Every key is optional. */
+export interface EditorRadiusMessages {
+  /** Unit shown behind the value. Defaults to `'px'`. */
+  unit?: string
+  /**
+   * Readout of the last step, `rounded-full`, which has no px size. Defaults to
+   * the Dutch `'Rond'`.
+   */
+  full?: string
+}
+
+export interface NexxtEditorRadiusProps {
+  /**
+   * Header text of the settings block. Defaults to the Dutch
+   * `'Hoekafronding'`; the library has no i18n layer, so a consumer in another
+   * language passes its own copy in.
+   */
+  label?: string
+  /**
+   * Copy of the value readout. Merged per key, so overriding one key keeps the
+   * defaults of the others. Copy is never translated inside the component.
+   */
+  messages?: EditorRadiusMessages
+}
+
+const DEFAULT_MESSAGES = {
+  unit: 'px',
+  full: 'Rond',
+} satisfies Required<EditorRadiusMessages>
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import NexxtEditorSettingsBlock from '../../atoms/EditorSettingsBlock/EditorSettingsBlock.vue'
+import NexxtSlider from '../../../atoms/Slider/Slider.vue'
+
+defineOptions({ name: 'NexxtEditorRadius' })
+
+const { label = 'Hoekafronding', messages } = defineProps<NexxtEditorRadiusProps>()
+
+/** The selected radius, as the Tailwind class to apply. */
+const model = defineModel<EditorRadiusValue>({ required: true })
+
+const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
+
+const maxIndex = RADIUS_STEPS.length - 1
+
+/**
+ * Position of the current value on the step list. A value that is not on the
+ * list -- a stored `rounded-5xl` from before this component, say -- falls back
+ * to the first step instead of leaving the thumb off the track; the first
+ * change writes a valid class back.
+ */
+const stepIndex = computed(() =>
+  Math.max(
+    0,
+    RADIUS_STEPS.findIndex(({ token }) => `rounded-${token}` === model.value),
+  ),
+)
+
+// The slider moves over the index, not over the px value, so its model is
+// translated both ways here.
+const sliderValue = computed({
+  get: () => [stepIndex.value],
+  set: ([index]) => {
+    model.value = `rounded-${RADIUS_STEPS[index].token}`
+  },
+})
+
+const displayValue = computed(() => {
+  const { px } = RADIUS_STEPS[stepIndex.value]
+
+  return px === null ? copy.value.full : `${px} ${copy.value.unit}`
+})
+</script>
+
+<template>
+  <NexxtEditorSettingsBlock :label="label">
+    <div class="flex items-center gap-4">
+      <!--
+        Slider's own `showValue` prints its model, which here is the step index
+        rather than the radius, so the readout is rendered next to it instead.
+        The thumb has the same problem in `aria-valuenow`, which
+        `aria-valuetext` overrides with the string the readout shows. The block
+        label is a <p>, not a <label>, so the name goes on the thumb explicitly.
+      -->
+      <NexxtSlider
+        v-model="sliderValue"
+        :min="0"
+        :max="maxIndex"
+        :step="1"
+        :aria-label="label"
+        :aria-valuetext="displayValue"
+      />
+
+      <!--
+        gray-700, not the gray-500 Slider uses for its own readout: axe puts
+        gray-500 on white at 1.84:1, well under the 4.5:1 it needs at this size.
+      -->
+      <span class="min-w-12 shrink-0 text-right small-normal whitespace-nowrap text-gray-700">
+        {{ displayValue }}
+      </span>
+    </div>
+  </NexxtEditorSettingsBlock>
+</template>

package/src/components/molecules/Select/Select.vue

@@ -3,11 +3,25 @@ import { computed, ref, useTemplateRef, watch } from 'vue'
 import NexxtIcon from '../../atoms/Icon/Icon.vue'
 import NexxtFloatingPanel from '../../atoms/FloatingPanel/FloatingPanel.vue'
 import type Icon from '../../atoms/Icon/Icon.vue'
-
-export type SelectOption = { label: string; value: string | number } | string
+import type { NexxtIconName } from '../../atoms/Icon/Icon.vue'
+
+export type SelectOption =
+  | {
+      label: string
+      value: string | number
+      /**
+       * Icon rendered before the option's label in the list, and in the field
+       * while the option is selected. Optional; an explicit `leftIcon` on the
+       * field wins over it.
+       */
+      icon?: NexxtIconName
+    }
+  | string
 
 const getLabel = (opt: SelectOption) => (typeof opt === 'string' ? opt : opt.label)
 const getValue = (opt: SelectOption): string | number => (typeof opt === 'string' ? opt : opt.value)
+const getIcon = (opt: SelectOption): NexxtIconName | undefined =>
+  typeof opt === 'string' ? undefined : opt.icon
 
 const generateId = () => 'select-' + Math.random().toString(36).slice(2, 10)
 const selectId = generateId()
@@ -31,6 +45,13 @@ interface NexxtSelectProps {
   leftIcon?: InstanceType<typeof Icon>['name']
   /** Mark the field as required (renders an asterisk next to the label). */
   required?: boolean
+  /**
+   * Accessible name of the field, for when it is labelled by something outside
+   * the component and `label` would duplicate that copy on screen. Lands on the
+   * combobox itself, which a fallthrough attribute cannot reach: the component
+   * root is the wrapper around it.
+   */
+  ariaLabel?: string
 }
 
 const props = withDefaults(defineProps<NexxtSelectProps>(), {
@@ -55,6 +76,14 @@ const selectedIndex = computed(() =>
   props.options.findIndex((opt) => getValue(opt) === model.value),
 )
 
+// The field shows one icon at most. An explicit `leftIcon` is the field's own
+// decoration and outranks the selected option's icon, which is only a fallback.
+const triggerIcon = computed<NexxtIconName | undefined>(() => {
+  if (props.leftIcon) return props.leftIcon
+  const found = props.options.find((opt) => getValue(opt) === model.value)
+  return found ? getIcon(found) : undefined
+})
+
 const select = (opt: SelectOption, close: () => void) => {
   model.value = getValue(opt)
   close()
@@ -139,22 +168,26 @@ watch(model, () => {
         <div
           :id="selectId"
           role="combobox"
+          :aria-label="ariaLabel"
           :aria-expanded="isOpen"
           aria-haspopup="listbox"
           :aria-controls="isOpen ? listboxId : undefined"
           :aria-activedescendant="isOpen && activeIndex >= 0 ? optionId(activeIndex) : undefined"
           tabindex="0"
           class="group flex w-full cursor-pointer items-center gap-2 rounded-lg ring transition-colors ease-out focus:ring-cornflower-blue-500 focus:outline-none"
-          :class="[error ? 'ring-brick-400' : 'ring-gray-200', { 'pl-3': leftIcon, 'pr-3': true }]"
+          :class="[
+            error ? 'ring-brick-400' : 'ring-gray-200',
+            { 'pl-3': triggerIcon, 'pr-3': true },
+          ]"
           @click="toggle"
           @keydown="onKeydown"
         >
-          <span v-if="leftIcon" class="flex items-center">
-            <NexxtIcon :name="leftIcon" />
+          <span v-if="triggerIcon" class="flex items-center">
+            <NexxtIcon :name="triggerIcon" />
           </span>
           <span
             class="flex h-10 w-full min-w-60 items-center text-sm"
-            :class="[selectedLabel ? 'text-gray-900' : 'text-gray-400', { 'pl-3': !leftIcon }]"
+            :class="[selectedLabel ? 'text-gray-900' : 'text-gray-400', { 'pl-3': !triggerIcon }]"
           >
             {{ selectedLabel ?? placeholder }}
           </span>
@@ -186,7 +219,16 @@ watch(model, () => {
             @click="select(opt, close)"
             @mousemove="activeIndex = index"
           >
-            {{ getLabel(opt) }}
+            <span class="flex items-center gap-2">
+              <!-- The cast is the v-if guard restated: `name` is required, and
+                   template narrowing does not carry across a function call. -->
+              <NexxtIcon
+                v-if="getIcon(opt)"
+                :name="getIcon(opt) as NexxtIconName"
+                class="shrink-0"
+              />
+              {{ getLabel(opt) }}
+            </span>
             <NexxtIcon v-if="model === getValue(opt)" name="check" class="text-xs" />
           </li>
         </ul>

package/src/components.json

@@ -65,6 +65,8 @@
   "NexxtEditorAlignItems": "components/editor/molecules/EditorAlignItems/EditorAlignItems.vue",
   "NexxtEditorFlexDirection": "components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue",
   "NexxtEditorGap": "components/editor/molecules/EditorGap/EditorGap.vue",
+  "NexxtEditorHeadingType": "components/editor/molecules/EditorHeadingType/EditorHeadingType.vue",
   "NexxtEditorJustifyContent": "components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue",
-  "NexxtEditorPadding": "components/editor/molecules/EditorPadding/EditorPadding.vue"
+  "NexxtEditorPadding": "components/editor/molecules/EditorPadding/EditorPadding.vue",
+  "NexxtEditorRadius": "components/editor/molecules/EditorRadius/EditorRadius.vue"
 }

package/src/index.ts

@@ -25,6 +25,10 @@ export type {
   EditorGapMessages,
   EditorGapValue,
 } from './components/editor/molecules/EditorGap/EditorGap.vue'
+export type {
+  EditorRadiusMessages,
+  EditorRadiusValue,
+} from './components/editor/molecules/EditorRadius/EditorRadius.vue'
 export type {
   EditorJustifyContentMessages,
   EditorJustifyContentValue,
@@ -56,8 +60,10 @@ export { default as NexxtDropdownButton } from './components/organisms/DropdownB
 export { default as NexxtEditorAlignItems } from './components/editor/molecules/EditorAlignItems/EditorAlignItems.vue'
 export { default as NexxtEditorFlexDirection } from './components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue'
 export { default as NexxtEditorGap } from './components/editor/molecules/EditorGap/EditorGap.vue'
+export { default as NexxtEditorHeadingType } from './components/editor/molecules/EditorHeadingType/EditorHeadingType.vue'
 export { default as NexxtEditorJustifyContent } from './components/editor/molecules/EditorJustifyContent/EditorJustifyContent.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'
 export { default as NexxtEnergyLabel } from './components/atoms/EnergyLabel/EnergyLabel.vue'
 export { default as NexxtFloatingPanel } from './components/atoms/FloatingPanel/FloatingPanel.vue'