@nexxtmove/ui 2.7.0 → 2.8.0

package/dist/components/editor/molecules/EditorColor/EditorColor.vue.d.ts

@@ -74,11 +74,13 @@ export interface NexxtEditorColorProps {
     /**
      * 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.
+     * 6-digit form. While a theme role is selected the slider stands at 100%, as a
+     * role class carries no opacity; moving it writes the role's hex with that
+     * opacity, so the role is no longer selected. The same goes for a role stop of
+     * a gradient, which without `showAlpha` stays opaque. 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;
     /**

package/dist/components/editor/molecules/EditorColor/_ColorField.vue.d.ts

@@ -26,7 +26,10 @@ export interface ColorFieldProps<P extends string> {
     suggestions?: string[];
     /** Theme roles offered above the suggestions; an entry with an unreadable hex is left out. */
     themeRoles?: EditorColorThemeRole[];
-    /** Offer an opacity slider, hidden while a theme role is selected. */
+    /**
+     * Offer an opacity slider, also while a theme role is selected: it then stands
+     * at 100%, and moving it turns the role into its hex with that opacity.
+     */
     showAlpha?: boolean;
     /**
      * The fills offered: `['solid']` (the default), `['solid', 'gradient']` or

package/dist/components/organisms/ColorPicker/ColorPicker.vue.d.ts

@@ -16,7 +16,9 @@ export interface NexxtColorPickerProps {
     /**
      * 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.
+     * at once. The gradient mode always has the slider; without `showAlpha` it is
+     * locked at 100% for a stop bound to a preset, with it a change unbinds the
+     * stop from its preset.
      */
     showAlpha?: boolean;
     formats?: ColorFormat[];

package/dist/index.js

@@ -2872,7 +2872,7 @@ var vn = { funda: { render: _n } }, $ = /* @__PURE__ */ p({
 			set: (e) => {
 				O.value = e === "gradient" ? "gradient" : "solid";
 			}
-		}), oe = i(() => T.showAlpha || R.value), se = i(() => R.value && !!V.selected.value?.preset), ce = i(() => `flex flex-col ${R.value ? "gap-3" : "gap-4"} rounded-xl bg-white p-4 ring ring-gray-200`), le = (e, t) => {
+		}), oe = i(() => T.showAlpha || R.value), se = i(() => R.value && !T.showAlpha && !!V.selected.value?.preset), ce = i(() => `flex flex-col ${R.value ? "gap-3" : "gap-4"} rounded-xl bg-white p-4 ring ring-gray-200`), le = (e, t) => {
 			V.setStopColor(t.slice(0, 7), e);
 		}, ue = () => {
 			W.value = null, V.resetSession(), u("close");
@@ -7940,19 +7940,19 @@ var Ol = /* @__PURE__ */ p({
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = B(e, "modelValue"), n = i(() => Mt(t.value, e.accepts ?? [e.property])), r = i(() => n.value && "hex" in n.value ? n.value.hex : ""), o = i(() => n.value && "role" in n.value ? n.value.role : void 0), s = i(() => e.themeRoles.filter((e) => At.test(e.hex))), c = i(() => s.value.find(({ role: e }) => e === o.value)), u = (e) => `${e.slice(0, 7)}ff`, d = i(() => e.showAlpha && !c.value), p = i({
+		let t = B(e, "modelValue"), n = i(() => Mt(t.value, e.accepts ?? [e.property])), r = i(() => n.value && "hex" in n.value ? n.value.hex : ""), o = i(() => n.value && "role" in n.value ? n.value.role : void 0), s = i(() => e.themeRoles.filter((e) => At.test(e.hex))), c = i(() => s.value.find(({ role: e }) => e === o.value)), u = (e) => `${e.slice(0, 7)}ff`, d = i({
 			get: () => c.value ? u(c.value.hex) : r.value,
 			set: (n) => {
 				let r = n.replace(Jl, "$1");
 				jt(r) && (t.value = `${e.property}-[${r}]`);
 			}
-		}), m = (n) => {
+		}), p = (n) => {
 			t.value = `${e.property}-theme-${n}`;
-		}, h = i(() => e.modes.includes("gradient") && e.property === "bg" ? e.modes.includes("solid") ? ["solid", "gradient"] : ["gradient"] : ["solid"]), g = i(() => h.value.includes("gradient")), _ = i(() => !h.value.includes("solid")), v = i(() => g.value ? un(t.value) : null), y = (t) => pn(t) ? "gradient" : Mt(t, e.accepts ?? [e.property]) ? "solid" : null, b = A(g.value ? y(t.value) ?? "solid" : "solid");
-		K(() => [t.value, g.value], ([e, t]) => {
-			t ? b.value = y(e) ?? b.value : b.value = "solid";
+		}, m = i(() => e.modes.includes("gradient") && e.property === "bg" ? e.modes.includes("solid") ? ["solid", "gradient"] : ["gradient"] : ["solid"]), h = i(() => m.value.includes("gradient")), g = i(() => !m.value.includes("solid")), _ = i(() => h.value ? un(t.value) : null), v = (t) => pn(t) ? "gradient" : Mt(t, e.accepts ?? [e.property]) ? "solid" : null, y = A(h.value ? v(t.value) ?? "solid" : "solid");
+		K(() => [t.value, h.value], ([e, t]) => {
+			t ? y.value = v(e) ?? y.value : y.value = "solid";
 		});
-		let x = i(() => g.value ? _.value ? "gradient" : b.value : "solid"), S = A(0), C = A(null), w = (e) => s.value.find((t) => t.role === e), T = (e) => {
+		let b = i(() => h.value ? g.value ? "gradient" : y.value : "solid"), x = A(0), S = A(null), C = (e) => s.value.find((t) => t.role === e), w = (e) => {
 			if (!e) return;
 			let t = [];
 			for (let { color: n, position: r } of e.stops) {
@@ -7963,7 +7963,7 @@ var Ol = /* @__PURE__ */ p({
 					});
 					continue;
 				}
-				let e = w(n.role);
+				let e = C(n.role);
 				if (!e) return;
 				t.push({
 					color: e.hex.slice(0, 7).toLowerCase(),
@@ -7981,13 +7981,13 @@ var Ol = /* @__PURE__ */ p({
 				centerY: e.type === "radial" ? ni(e.y) : 50,
 				stops: t
 			};
-		}, E = i(() => T(v.value)), O = i(() => _.value && g.value && !E.value ? T(un(M())) : void 0), k = (e, t) => {
+		}, T = i(() => w(_.value)), E = i(() => g.value && h.value && !T.value ? w(un(j())) : void 0), O = (e, t) => {
 			let n = kt.find((e) => e === t);
 			return n ? { role: n } : { hex: ln(jt(e) ? e : `#${e}`) };
-		}, j = (e) => {
+		}, k = (e) => {
 			if (!e) return;
 			let n = e.stops.map(({ color: e, position: t, preset: n }) => ({
-				color: k(e, n?.key),
+				color: O(e, n?.key),
 				position: t
 			}));
 			t.value = fn(e.type === "linear" ? {
@@ -8000,7 +8000,7 @@ var Ol = /* @__PURE__ */ p({
 				y: e.centerY,
 				stops: n
 			});
-		}, M = () => {
+		}, j = () => {
 			let e = c.value, t = r.value;
 			if (e) {
 				let t = e.hex.slice(0, 7).toLowerCase();
@@ -8011,75 +8011,75 @@ var Ol = /* @__PURE__ */ p({
 				return `bg-linear-180 from-[${e}] to-[${e.slice(0, 7)}00]`;
 			}
 			return ql;
-		}, N = (t) => {
+		}, M = (t) => {
 			let n = ln(t), r = n.slice(0, 7);
 			return e.showAlpha || !jt(r) ? n : r;
-		}, ee = (e) => e.stops.every(({ color: e }) => "hex" in e || !!w(e.role)), P = (e, t) => {
-			let n = e.stops[S.value] ?? e.stops[0];
-			return n ? "role" in n.color ? `${t}-theme-${n.color.role}` : `${t}-[${N(n.color.hex)}]` : null;
-		}, F = (n) => {
-			if (n === x.value || _.value) return;
+		}, N = (e) => e.stops.every(({ color: e }) => "hex" in e || !!C(e.role)), ee = (e, t) => {
+			let n = e.stops[x.value] ?? e.stops[0];
+			return n ? "role" in n.color ? `${t}-theme-${n.color.role}` : `${t}-[${M(n.color.hex)}]` : null;
+		}, P = (n) => {
+			if (n === b.value || g.value) return;
 			if (n === "gradient") {
-				b.value = "gradient";
-				let e = C.value;
-				S.value = e?.stop ?? 0, t.value = e?.value ?? M();
+				y.value = "gradient";
+				let e = S.value;
+				x.value = e?.stop ?? 0, t.value = e?.value ?? j();
 				return;
 			}
-			b.value = "solid";
-			let r = E.value ? v.value : null;
+			y.value = "solid";
+			let r = T.value ? _.value : null;
 			if (!r) return;
-			C.value = {
+			S.value = {
 				value: fn(r),
-				stop: S.value
+				stop: x.value
 			};
-			let i = P(r, e.property);
+			let i = ee(r, e.property);
 			i && (t.value = i);
-		}, I = (e, t) => {
-			x.value === "gradient" ? t({
+		}, F = (e, t) => {
+			b.value === "gradient" ? t({
 				key: e.role,
 				label: e.label
-			}, e.hex) : m(e.role);
-		}, L = (e, t) => x.value === "gradient" ? e === t : e === c.value?.role, R = () => {
-			C.value = null;
+			}, e.hex) : p(e.role);
+		}, I = (e, t) => b.value === "gradient" ? e === t : e === c.value?.role, L = () => {
+			S.value = null;
 		};
 		return K(() => e.property, (e) => {
 			if (o.value) t.value = `${e}-theme-${o.value}`;
 			else if (r.value) t.value = `${e}-[${r.value}]`;
 			else if (e !== "bg") {
-				let n = un(t.value), r = n && ee(n) ? P(n, e) : null;
+				let n = un(t.value), r = n && N(n) ? ee(n, e) : null;
 				r && (t.value = r);
 			}
 		}), (t, n) => (D(), a(la, {
-			modelValue: p.value,
-			"onUpdate:modelValue": n[0] ||= (e) => p.value = e,
-			"selected-stop": S.value,
-			"onUpdate:selectedStop": n[1] ||= (e) => S.value = e,
-			modes: h.value,
+			modelValue: d.value,
+			"onUpdate:modelValue": n[0] ||= (e) => d.value = e,
+			"selected-stop": x.value,
+			"onUpdate:selectedStop": n[1] ||= (e) => x.value = e,
+			modes: m.value,
 			"gradient-messages": e.gradientMessages,
-			mode: x.value,
-			"gradient-value": E.value,
-			"gradient-start": O.value,
+			mode: b.value,
+			"gradient-value": T.value,
+			"gradient-start": E.value,
 			"full-width": "",
 			"match-width": "",
 			label: e.label,
 			describedby: e.describedby,
 			formats: ["hex"],
-			"show-alpha": d.value,
+			"show-alpha": e.showAlpha,
 			placeholder: e.placeholder,
 			suggestions: { hex: e.suggestions },
 			"suggestions-label": e.suggestionsLabel,
 			"alpha-label": e.alphaLabel,
 			"value-label": c.value?.label,
-			"onUpdate:mode": F,
-			"onUpdate:gradientValue": j,
-			onClose: R
+			"onUpdate:mode": P,
+			"onUpdate:gradientValue": k,
+			onClose: L
 		}, l({ _: 2 }, [s.value.length ? {
 			name: "presets",
 			fn: q(({ preset: t, selectPreset: n }) => [f(ha, {
 				roles: s.value,
 				label: e.themeLabel,
-				"is-pressed": (e) => L(e.role, t),
-				onPick: (e) => I(e, n)
+				"is-pressed": (e) => I(e.role, t),
+				onPick: (e) => F(e, n)
 			}, null, 8, [
 				"roles",
 				"label",

package/package.json

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

package/src/components/editor/molecules/EditorColor/EditorColor.stories.ts

@@ -215,16 +215,23 @@ export const ThemeRolesWithSuggestions: Story = {
 }
 
 /**
- * With `showAlpha` the picker offers an opacity slider. Below full opacity the
- * class carries an 8-digit hex; a theme role has no opacity, so picking one
- * hides the slider.
+ * With `showAlpha` the picker offers an opacity slider, also for a theme role.
+ * A role has no opacity, so its slider stands at 100%; moving it writes the
+ * role's hex with an 8-digit alpha, and the role is no longer selected. Picking
+ * the role again makes it opaque. The suggestions are those of
+ * `ThemeRolesWithSuggestions`; two of them share the hex of a role, and picking
+ * one writes that hex as a literal, so the role is no longer selected.
  */
 export const WithAlpha: Story = {
-  args: { showAlpha: true, themeRoles: THEME_ROLES },
+  args: {
+    showAlpha: true,
+    themeRoles: THEME_ROLES,
+    suggestions: ['#0F766E', '#F0F4F8', '#1F2937'],
+  },
   render: (args) => ({
     components: { EditorColor },
     setup() {
-      const color = ref<EditorColorValue>('bg-[#1777EA80]')
+      const color = ref<EditorColorValue>('bg-theme-main')
       return { args, color }
     },
     template: `
@@ -241,19 +248,37 @@ export const WithAlpha: Story = {
 
     // The slider is named by its visible label and reads the opacity out as a percentage.
     const alpha = await canvas.findByRole('slider', { name: 'Dekking' })
-    expect(alpha).toHaveAttribute('aria-valuetext', '50%')
+    expect(alpha).toHaveAttribute('aria-valuetext', '100%')
+    expect(canvas.getByRole('button', { name: 'Hoofdkleur' })).toHaveAttribute(
+      'aria-pressed',
+      'true',
+    )
 
+    // Opening wrote nothing, and a key that leaves the slider at 100% neither.
     alpha.focus()
     await userEvent.keyboard('{ArrowRight}')
+    await userEvent.keyboard('{End}')
+    expect(canvas.getByText('bg-theme-main')).toBeInTheDocument()
 
-    // 51% of 255 rounds to 0x82; the picker writes hex in lower case.
-    await waitFor(() => expect(canvas.getByText('bg-[#1777ea82]')).toBeInTheDocument())
+    for (let step = 0; step < 10; step++) await userEvent.keyboard('{ArrowLeft}')
+
+    // 90% of 255 rounds to 0xe6; the picker writes hex in lower case.
+    await waitFor(() => {
+      expect(canvas.getByText('bg-[#1777eae6]')).toBeInTheDocument()
+      expect(canvas.getByRole('button', { name: 'Hoofdkleur' })).toHaveAttribute(
+        'aria-pressed',
+        'false',
+      )
+    })
 
     await userEvent.click(canvas.getByRole('button', { name: 'Hoofdkleur' }))
 
     await waitFor(() => {
       expect(canvas.getByText('bg-theme-main')).toBeInTheDocument()
-      expect(canvas.queryByRole('slider', { name: 'Dekking' })).not.toBeInTheDocument()
+      expect(canvas.getByRole('slider', { name: 'Dekking' })).toHaveAttribute(
+        'aria-valuetext',
+        '100%',
+      )
     })
   },
 }
@@ -293,9 +318,13 @@ export const WithAlphaRolePicked: Story = {
 
     await userEvent.click(canvas.getByRole('button', { name: 'Hoofdkleur' }))
 
+    // The role wins: it is stored as a role, and the slider is back at 100%.
     await waitFor(() => {
       expect(canvas.getByText('bg-theme-main')).toBeInTheDocument()
-      expect(canvas.queryByRole('slider', { name: 'Dekking' })).not.toBeInTheDocument()
+      expect(canvas.getByRole('slider', { name: 'Dekking' })).toHaveAttribute(
+        'aria-valuetext',
+        '100%',
+      )
     })
   },
 }
@@ -501,6 +530,47 @@ export const GradientRadial: Story = {
   },
 }
 
+/**
+ * With `showAlpha` a role stop is not locked: its opacity slider stands at 100%
+ * without the hint, and a change turns the stop into the role's hex with alpha.
+ * Without `showAlpha` the lock stays, as `GradientRadial` shows.
+ */
+export const GradientRoleAlpha: Story = {
+  // Axe runs on the open panel, after the play function.
+  parameters: { a11y: { test: 'error' } },
+  args: { modes: ['solid', 'gradient'], showAlpha: true, themeRoles: THEME_ROLES },
+  render: gradientRender('bg-linear-90 from-theme-main to-[#ffffff]'),
+  play: async ({ canvasElement }) => {
+    const panel = await openAndMeasure(canvasElement)
+    const [swatch] = within(panel).getAllByRole('button', { name: 'Kleur kiezen' })
+    await userEvent.click(swatch!)
+    const dialog = await within(panel).findByRole('dialog', { name: 'Kleur van kleurstop 1' })
+    const opacity = within(dialog).getByRole('slider', { name: 'Dekking' })
+    expect(opacity).not.toHaveAttribute('aria-disabled')
+    expect(opacity).toHaveAttribute('aria-valuetext', '100%')
+    expect(opacity).not.toHaveAccessibleDescription()
+    expect(dialog).not.toHaveTextContent('Huisstijlkleuren zijn altijd dekkend.')
+    expect(within(dialog).getByRole('button', { name: 'Hoofdkleur' })).toHaveAttribute(
+      'aria-pressed',
+      'true',
+    )
+    // Opening the panel and the popover wrote nothing.
+    expect(canvasElement).toHaveTextContent('bg-linear-90 from-theme-main to-[#ffffff]')
+
+    opacity.focus()
+    await userEvent.keyboard('{ArrowLeft}')
+
+    // 99% of 255 rounds to 0xfc.
+    await waitFor(() => {
+      expect(canvasElement).toHaveTextContent('bg-linear-90 from-[#1777eafc] to-[#ffffff]')
+      expect(within(dialog).getByRole('button', { name: 'Hoofdkleur' })).toHaveAttribute(
+        'aria-pressed',
+        'false',
+      )
+    })
+  },
+}
+
 /**
  * Three stops, the most the gradient takes: adding is unavailable, with the
  * reason, and removing is possible. The middle stop is a theme role and the

package/src/components/editor/molecules/EditorColor/EditorColor.test.ts

@@ -397,20 +397,25 @@ describe('EditorColor', () => {
     })
 
     // The way to detach a colour from the theme without changing how it looks.
-    it('writes a literal when the suggestion with the hex of the selected role is picked', async () => {
-      const wrapper = mount(EditorColor, {
-        props: {
-          modelValue: 'bg-theme-main',
-          themeRoles: [{ role: 'main', label: 'Hoofdkleur', hex: '#1777ea' }],
-          suggestions: ['#1777ea'],
-        },
-      })
+    // The opacity slider is shown for a role as well, so this holds with it too.
+    it.each([false, true])(
+      'writes a literal when the suggestion with the hex of the selected role is picked (showAlpha %s)',
+      async (showAlpha) => {
+        const wrapper = mount(EditorColor, {
+          props: {
+            modelValue: 'bg-theme-main',
+            themeRoles: [{ role: 'main', label: 'Hoofdkleur', hex: '#1777ea' }],
+            suggestions: ['#1777ea'],
+            showAlpha,
+          },
+        })
 
-      await open(wrapper)
-      await wrapper.find('button[aria-label="Kies kleur #1777ea"]').trigger('click')
+        await open(wrapper)
+        await wrapper.find('button[aria-label="Kies kleur #1777ea"]').trigger('click')
 
-      expect(wrapper.emitted('update:modelValue')).toEqual([['bg-[#1777ea]']])
-    })
+        expect(wrapper.emitted('update:modelValue')).toEqual([['bg-[#1777ea]']])
+      },
+    )
 
     it('follows the model from a role to a literal and back', async () => {
       const wrapper = mount(EditorColor, {
@@ -634,20 +639,101 @@ describe('EditorColor', () => {
       expect(pickerValue(wrapper)).toBe('#1777EAff')
     })
 
-    it('hides the slider while a theme role is selected', async () => {
+    it('keeps the slider at 100% while a theme role is selected, and opening writes nothing', async () => {
       const wrapper = mount(EditorColor, {
         props: { modelValue: 'bg-theme-main', themeRoles: THEME_ROLES, showAlpha: true },
       })
 
-      expect(wrapper.findComponent(NexxtColorPicker).props('showAlpha')).toBe(false)
+      expect(wrapper.findComponent(NexxtColorPicker).props('showAlpha')).toBe(true)
+
+      await open(wrapper)
+
+      expect(alphaThumb(wrapper).attributes('aria-valuetext')).toBe('100%')
+      expect(pressedLabels(wrapper)).toEqual(['Hoofdkleur'])
+      expect(trigger(wrapper).text()).toBe('Hoofdkleur')
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+
+    // The slider stays mounted while the model turns into a role from outside,
+    // so the picker's colour changes under it: that must not come back as a write.
+    it('writes nothing when a role becomes active under an open slider', async () => {
+      const wrapper = mount(EditorColor, {
+        props: { modelValue: 'bg-[#00FF0080]', themeRoles: THEME_ROLES, showAlpha: true },
+      })
+
+      await open(wrapper)
+      expect(alphaThumb(wrapper).attributes('aria-valuetext')).toBe('50%')
+
+      await wrapper.setProps({ modelValue: 'bg-theme-main' })
+      await flushPromises()
+
+      expect(alphaThumb(wrapper).attributes('aria-valuetext')).toBe('100%')
+      expect(hexField(wrapper).element.value).toBe('#1777ea')
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+
+    it.each(['ArrowRight', 'End', 'PageUp'])(
+      'keeps the role on %s, a key that leaves the slider at full opacity',
+      async (key) => {
+        const wrapper = mount(EditorColor, {
+          props: { modelValue: 'bg-theme-main', themeRoles: THEME_ROLES, showAlpha: true },
+        })
+
+        await open(wrapper)
+        await alphaThumb(wrapper).trigger('keydown', { key })
+
+        expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+      },
+    )
+
+    it('detaches the role into its hex with alpha when the slider moves, and keeps a literal at 100%', async () => {
+      const role: EditorColorValue = 'bg-theme-main'
+      const wrapper = mount(EditorColor, {
+        props: {
+          modelValue: role,
+          themeRoles: THEME_ROLES,
+          showAlpha: true,
+          'onUpdate:modelValue': (value: EditorColorValue) =>
+            wrapper.setProps({ modelValue: value }),
+        },
+      })
+
+      await open(wrapper)
+      await alphaThumb(wrapper).trigger('keydown', { key: 'ArrowLeft' })
+      await flushPromises()
+
+      // 99% of 255 rounds to 0xfc; the role's hex comes in lower case.
+      expect(wrapper.emitted('update:modelValue')).toEqual([['bg-[#1777eafc]']])
+      expect(pressedLabels(wrapper)).toEqual([])
+      expect(trigger(wrapper).text()).toBe('#1777eafc')
+      expect(alphaThumb(wrapper).attributes('aria-valuetext')).toBe('99%')
+
+      // Back at full opacity it is the role's colour, but no longer the role.
+      await alphaThumb(wrapper).trigger('keydown', { key: 'ArrowRight' })
+      await flushPromises()
+
+      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['bg-[#1777ea]'])
+      expect(pressedLabels(wrapper)).toEqual([])
+      expect(trigger(wrapper).text()).toBe('#1777ea')
+    })
+
+    // A role stop has no opacity without the slider; that lock is covered in
+    // EditorColorGradient.test.ts. Here the solid mode keeps working unchanged.
+    it('leaves the slider out for a role without showAlpha', async () => {
+      const wrapper = mount(EditorColor, {
+        props: { modelValue: 'bg-theme-main', themeRoles: THEME_ROLES },
+      })
 
       await open(wrapper)
 
       expect(alphaThumb(wrapper).exists()).toBe(false)
+      expect(pickerValue(wrapper)).toBe('#1777EAff')
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
     })
 
-    // Picking the role flips the picker's value and its alpha channel at once;
-    // the picker must not write the old colour back, stripped, over the role.
+    // A role has no opacity, so it wins over the slider: picked below 100% it is
+    // stored as the role, and the slider jumps back to 100% without writing the
+    // old colour back over it.
     it('writes only the role when one is picked over a translucent literal', async () => {
       // Typed up front: the handler refers to `wrapper`, which stops inference
       // from narrowing an inline literal to the model's type.
@@ -669,12 +755,13 @@ describe('EditorColor', () => {
       await flushPromises()
 
       expect(wrapper.emitted('update:modelValue')).toEqual([['bg-theme-main']])
-      expect(alphaThumb(wrapper).exists()).toBe(false)
+      expect(alphaThumb(wrapper).attributes('aria-valuetext')).toBe('100%')
+      expect(pressedLabels(wrapper)).toEqual(['Hoofdkleur'])
       expect(trigger(wrapper).text()).toBe('Hoofdkleur')
       expect(hexField(wrapper).element.value).toBe('#1777ea')
     })
 
-    it('offers the slider again once a literal replaces the role', async () => {
+    it('shows a literal that replaces the role with its opacity', async () => {
       const wrapper = mount(EditorColor, {
         props: { modelValue: 'bg-theme-main', themeRoles: THEME_ROLES, showAlpha: true },
       })

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

@@ -92,11 +92,13 @@ export interface NexxtEditorColorProps {
   /**
    * 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.
+   * 6-digit form. While a theme role is selected the slider stands at 100%, as a
+   * role class carries no opacity; moving it writes the role's hex with that
+   * opacity, so the role is no longer selected. The same goes for a role stop of
+   * a gradient, which without `showAlpha` stays opaque. 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
   /**

package/src/components/editor/molecules/EditorColor/EditorColorGradient.test.ts

@@ -584,6 +584,45 @@ describe('NexxtEditorColor gradient', () => {
       expect(w.find('[role="dialog"] [aria-disabled="true"][role="slider"]').exists()).toBe(false)
     })
 
+    it('unlocks the opacity of a role stop with showAlpha, and a change makes it a hex stop', async () => {
+      const { w, values } = await setup('bg-linear-90 from-theme-main to-[#ffffff]', {
+        showAlpha: true,
+      })
+      await openPopover(w, 0)
+      const dialog = w.find('[role="dialog"]')
+      const thumb = dialog.find('[role="slider"][aria-labelledby]')
+      expect(thumb.attributes('aria-disabled')).toBeUndefined()
+      expect(thumb.attributes('aria-describedby')).toBeUndefined()
+      expect(thumb.attributes('aria-valuenow')).toBe('100')
+      expect(dialog.text()).not.toContain('Huisstijlkleuren')
+      expect(dialog.find('button[aria-label="Hoofdkleur"]').attributes('aria-pressed')).toBe('true')
+      // Opening the panel and the popover wrote nothing.
+      expect(values).toEqual([])
+
+      await thumb.trigger('keydown', { key: 'ArrowRight' })
+      await settle()
+      expect(values).toEqual([])
+
+      await thumb.trigger('keydown', { key: 'ArrowLeft' })
+      await settle()
+      // 99% of 255 rounds to 0xfc.
+      expect(values).toEqual(['bg-linear-90 from-[#1777eafc] to-[#ffffff]'])
+      expect(
+        w.find('[role="dialog"] button[aria-label="Hoofdkleur"]').attributes('aria-pressed'),
+      ).toBe('false')
+    })
+
+    it('keeps the opacity of a role stop locked without showAlpha', async () => {
+      const { w, values } = await setup('bg-linear-90 from-theme-main to-[#ffffff]')
+      await openPopover(w, 0)
+      const thumb = w.find('[role="dialog"] [role="slider"][aria-disabled="true"]')
+      expect(thumb.exists()).toBe(true)
+
+      await thumb.trigger('keydown', { key: 'ArrowLeft' })
+      await settle()
+      expect(values).toEqual([])
+    })
+
     it('offers the neighbouring stop first among the suggestions', async () => {
       const { w } = await setup('bg-linear-90 from-[#111111] to-[#222222]', {
         suggestions: ['#ff0000'],

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

@@ -31,7 +31,10 @@ export interface ColorFieldProps<P extends string> {
   suggestions?: string[]
   /** Theme roles offered above the suggestions; an entry with an unreadable hex is left out. */
   themeRoles?: EditorColorThemeRole[]
-  /** Offer an opacity slider, hidden while a theme role is selected. */
+  /**
+   * Offer an opacity slider, also while a theme role is selected: it then stands
+   * at 100%, and moving it turns the role into its hex with that opacity.
+   */
   showAlpha?: boolean
   /**
    * The fills offered: `['solid']` (the default), `['solid', 'gradient']` or
@@ -122,25 +125,27 @@ const offeredRoles = computed(() => themeRoles.filter((entry) => ROLE_HEX_PATTER
 const activeRole = computed(() => offeredRoles.value.find(({ role }) => role === storedRole.value))
 
 /**
+ * A role's hex as the picker gets it: opaque, in the 8-digit form.
+ *
  * Picking the role's own colour -- from the suggestions, or typed -- is how a
  * colour is detached from the theme without changing how it looks. The picker
- * 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.
+ * reports nothing when it is told to pick the string it already has, so the hex
+ * is handed over with an `ff` pair: the picker writes an opaque colour as six
+ * digits and an alpha pair only below full opacity, so it never writes this
+ * string back, and every pick is a change. That holds with the opacity slider
+ * shown as well.
+ *
+ * A role has no opacity, so an alpha pair in the role's own hex is replaced by
+ * `ff`: the slider of an active role stands at 100%. Moving it below that writes
+ * the role's hex with the alpha pair, which detaches the role the same way;
+ * back at 100% it stays a literal (`OPAQUE_ALPHA_PATTERN`).
  *
- * 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.
+ * Opening the panel, or a role becoming active, writes nothing: the picker's
+ * primitives only report a change the user makes, and a key that leaves the
+ * slider where it is (ArrowRight at 100%) is no change.
  */
 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 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
 // visible, rather than being reported as a problem: the first pick writes a
@@ -401,7 +406,7 @@ watch(
     :label="label"
     :describedby="describedby"
     :formats="['hex']"
-    :show-alpha="alphaEnabled"
+    :show-alpha="showAlpha"
     :placeholder="placeholder"
     :suggestions="{ hex: suggestions }"
     :suggestions-label="suggestionsLabel"

package/src/components/organisms/ColorPicker/ColorPicker.test.ts

@@ -616,6 +616,64 @@ describe('NexxtColorPicker', () => {
       wrapper.unmount()
     })
 
+    /** A two-stop gradient whose first stop is bound to a preset, with that stop's popover open. */
+    const openPresetStop = async (showAlpha: boolean) => {
+      const wrapper = mount(NexxtColorPicker, {
+        props: {
+          modes: ['gradient'],
+          showAlpha,
+          gradientValue: {
+            type: 'linear',
+            angle: 90,
+            centerX: 50,
+            centerY: 50,
+            stops: [
+              { color: '#111111', position: 0, preset: { key: 'main', label: 'Hoofdkleur' } },
+              { color: '#ffffff', position: 100 },
+            ],
+          },
+        },
+        attachTo: document.body,
+      })
+      await open(wrapper)
+      await wrapper.find('button[aria-label="Kleur kiezen"]').trigger('click')
+      await flushPromises()
+      await nextTick()
+      const thumb = wrapper.find('[role="dialog"] [role="slider"][aria-labelledby]')
+      return { wrapper, thumb }
+    }
+
+    it('locks the opacity of a preset stop without showAlpha', async () => {
+      const { wrapper, thumb } = await openPresetStop(false)
+      expect(thumb.attributes('aria-disabled')).toBe('true')
+      expect(wrapper.text()).toContain('Huisstijlkleuren zijn altijd dekkend.')
+
+      await thumb.trigger('keydown', { key: 'ArrowLeft' })
+      await flushPromises()
+      expect(wrapper.emitted('update:gradientValue')).toBeUndefined()
+      wrapper.unmount()
+    })
+
+    it('unbinds a preset stop when its opacity changes with showAlpha', async () => {
+      const { wrapper, thumb } = await openPresetStop(true)
+      expect(thumb.attributes('aria-disabled')).toBeUndefined()
+      expect(thumb.attributes('aria-valuenow')).toBe('100')
+      expect(wrapper.text()).not.toContain('Huisstijlkleuren zijn altijd dekkend.')
+      expect(wrapper.emitted('update:gradientValue')).toBeUndefined()
+
+      await thumb.trigger('keydown', { key: 'ArrowLeft' })
+      await flushPromises()
+      // 99% of 255 rounds to 0xfc; the preset is gone from the stop.
+      expect(wrapper.emitted('update:gradientValue')?.at(-1)?.[0]).toMatchObject({
+        stops: [{ color: '#111111fc', position: 0 }, { color: '#ffffff' }],
+      })
+      expect(wrapper.emitted('update:gradientValue')?.at(-1)?.[0]).not.toHaveProperty(
+        'stops.0.preset',
+      )
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+      wrapper.unmount()
+    })
+
     it('emits close when the panel closes', async () => {
       const wrapper = mount(NexxtColorPicker, {
         props: { modes: ['solid', 'gradient'] },

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

@@ -61,7 +61,9 @@ export interface NexxtColorPickerProps {
   /**
    * 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.
+   * at once. The gradient mode always has the slider; without `showAlpha` it is
+   * locked at 100% for a stop bound to a preset, with it a change unbinds the
+   * stop from its preset.
    */
   showAlpha?: boolean
   formats?: ColorFormat[]
@@ -283,8 +285,15 @@ const modeModel = computed({
 /** The opacity slider is always there in the gradient mode. */
 const alphaOn = computed(() => props.showAlpha || gradientMode.value)
 
-/** A stop bound to a preset is always opaque: its slider stays, at 100 and disabled. */
-const alphaLocked = computed(() => gradientMode.value && !!editor.selected.value?.preset)
+/**
+ * Without `showAlpha` a stop bound to a preset is always opaque: its slider
+ * stays, at 100 and disabled. With `showAlpha` the slider stays usable, as it is
+ * for the solid colour, and a change unbinds the stop from its preset
+ * (`commitColor`), so the stop becomes a hex with that opacity.
+ */
+const alphaLocked = computed(
+  () => gradientMode.value && !props.showAlpha && !!editor.selected.value?.preset,
+)
 
 const panelClass = computed(
   () =>