@groupteknology/vuno 1.0.1 → 3.0.0

package/dist/runtime/app/components/FieldArray/FieldArray.vue

@@ -0,0 +1,180 @@
+<script setup>
+import { computed, reactive } from "vue";
+import { provideVunoFormContext } from "#vuno/composables/internal/useVunoFormContext";
+import { useField } from "#vuno/composables/useField";
+import { useForm } from "#vuno/composables/useForm";
+import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import { cloneValue, getPath, isEqual, setPath } from "#vuno/utils/path";
+import Button from "#vuno/components/Button/Button.vue";
+import FormFieldRenderer from "#vuno/components/Form/internal/FormFieldRenderer/FormFieldRenderer.vue";
+import { getColumnSpanClass } from "#vuno/components/Form/internal/grid";
+import FieldShell from "#vuno/components/FormField/internal/FieldShell/FieldShell.vue";
+import Text from "#vuno/components/Text/Text.vue";
+defineOptions({ name: "VunoFieldArray" });
+const model = defineModel({ type: null, ...{ default: void 0 } });
+const props = defineProps({
+  name: { type: String, required: false },
+  class: { type: String, required: false },
+  description: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  error: { type: String, required: false },
+  help: { type: String, required: false },
+  hint: { type: String, required: false },
+  label: { type: String, required: false },
+  orientation: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false },
+  addLabel: { type: String, required: false },
+  fields: { type: Array, required: true },
+  max: { type: Number, required: false },
+  min: { type: Number, required: false },
+  sortable: { type: Boolean, required: false }
+});
+const parentForm = useForm({ optional: true });
+const { value } = useField(() => props.name, model);
+const icons = useIcons();
+const messages = useMessages();
+const ui = useTheme("fieldArray", () => props.ui);
+const items = computed(() => value.value ?? []);
+const initialItems = cloneValue(items.value);
+const touched = reactive({});
+const standaloneForm = {
+  dirty: computed(() => !isEqual(items.value, initialItems)),
+  initialState: { items: initialItems },
+  size: computed(() => props.size),
+  touched,
+  errorFor: () => void 0,
+  getValue: (name) => getPath({ items: items.value }, name),
+  isDirty: () => false,
+  isTouched: (name) => touched[name] ?? false,
+  reset: () => value.value = cloneValue(initialItems),
+  resetField: () => {
+  },
+  setTouched: (name, next = true) => {
+    if (next) touched[name] = true;
+    else delete touched[name];
+  },
+  setValue: (name, next) => {
+    const state = { items: cloneValue(items.value) };
+    setPath(state, name, next);
+    value.value = state.items;
+  }
+};
+provideVunoFormContext(parentForm ?? standaloneForm);
+const canAdd = computed(() => props.max === void 0 || items.value.length < props.max);
+const canRemove = computed(() => items.value.length > (props.min ?? 0));
+function emptyItem() {
+  const item = {};
+  for (const field of props.fields) {
+    if (field.type === "checkbox") item[field.name] = false;
+    else if (field.type === "currency" || field.type === "number") item[field.name] = void 0;
+    else if (field.type === "array" || field.type === "file" || field.type === "tags") item[field.name] = [];
+    else item[field.name] = "";
+  }
+  return item;
+}
+function fieldAt(field, index) {
+  const prefix = parentForm ? props.name : "items";
+  return { ...field, name: `${prefix}.${index}.${field.name}` };
+}
+function add() {
+  if (!canAdd.value) return;
+  value.value = [...items.value, emptyItem()];
+}
+function remove(index) {
+  if (!canRemove.value) return;
+  value.value = items.value.filter((_, position) => position !== index);
+}
+function move(index, offset) {
+  const next = [...items.value];
+  const target = index + offset;
+  if (target < 0 || target >= next.length) return;
+  const [moved] = next.splice(index, 1);
+  if (!moved) return;
+  next.splice(target, 0, moved);
+  value.value = next;
+}
+</script>
+
+<template>
+    <FieldShell v-bind="props">
+        <div :class="ui.root">
+            <div
+                v-for="(item, index) in items"
+                :key="index"
+                :class="ui.item"
+            >
+                <div :class="ui.itemHeader">
+                    <Text
+                        :class="ui.itemLabel"
+                        tag="span"
+                        tone="inherit"
+                        variant="inherit"
+                        >{{ index + 1 }}</Text
+                    >
+
+                    <div :class="ui.itemActions">
+                        <Button
+                            v-if="props.sortable && index > 0"
+                            :aria-label="`${messages.fileMoveUp} ${index + 1}`"
+                            color="neutral"
+                            :icon="icons.fileMoveUp"
+                            size="xs"
+                            :ui="{ base: ui.itemAction }"
+                            variant="ghost"
+                            @click="move(index, -1)"
+                        />
+                        <Button
+                            v-if="props.sortable && index < items.length - 1"
+                            :aria-label="`${messages.fileMoveDown} ${index + 1}`"
+                            color="neutral"
+                            :icon="icons.fileMoveDown"
+                            size="xs"
+                            :ui="{ base: ui.itemAction }"
+                            variant="ghost"
+                            @click="move(index, 1)"
+                        />
+                        <Button
+                            :aria-label="`${messages.removeItem} ${index + 1}`"
+                            color="error"
+                            :disabled="!canRemove"
+                            :icon="icons.removeItem"
+                            size="xs"
+                            :ui="{ base: ui.itemAction }"
+                            variant="ghost"
+                            @click="remove(index)"
+                        />
+                    </div>
+                </div>
+
+                <div :class="ui.itemFields">
+                    <div
+                        v-for="field in props.fields"
+                        :key="`${index}-${field.name}`"
+                        :class="getColumnSpanClass(field.columns)"
+                    >
+                        <FormFieldRenderer :field="fieldAt(field, index)" />
+                    </div>
+                </div>
+            </div>
+
+            <div
+                v-if="items.length === 0"
+                :class="ui.empty"
+            >
+                {{ messages.emptyArray }}
+            </div>
+
+            <Button
+                class="self-start"
+                color="neutral"
+                :disabled="!canAdd"
+                :icon="icons.addItem"
+                :label="props.addLabel ?? messages.addItem"
+                variant="outline"
+                @click="add"
+            />
+        </div>
+    </FieldShell>
+</template>

package/dist/runtime/app/components/FieldArray/FieldArray.vue.d.ts

@@ -0,0 +1,13 @@
+import type { VunoFieldArrayProps } from './FieldArray.types.js';
+type __VLS_Props = VunoFieldArrayProps;
+type __VLS_ModelProps = {
+    modelValue?: Record<string, unknown>[] | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Record<string, unknown>[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Record<string, unknown>[] | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/{forms/Switch.d.vue.ts → FieldCheckbox/FieldCheckbox.d.vue.ts}

@@ -1,21 +1,13 @@
-import type { VunoColor, VunoSize, VunoSlots } from '#vuno/types/base';
-type __VLS_Props = {
-    color?: VunoColor;
-    size?: VunoSize;
-    ui?: VunoSlots;
-};
+import type { VunoFieldCheckboxProps } from './FieldCheckbox.types.js';
+type __VLS_Props = VunoFieldCheckboxProps;
 type __VLS_ModelProps = {
-    modelValue?: boolean | undefined;
+    modelValue?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
-}>, {
-    color: VunoColor;
-    size: VunoSize;
-    ui: VunoSlots;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/FieldCheckbox/FieldCheckbox.theme.d.ts

@@ -0,0 +1,5 @@
+export declare const fieldCheckboxTheme: Record<"fieldCheckbox", {
+    readonly slots: {
+        readonly root: "w-full";
+    };
+}>;

package/dist/runtime/app/components/FieldCheckbox/FieldCheckbox.theme.js

@@ -0,0 +1,2 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const fieldCheckboxTheme = defineTheme("fieldCheckbox", { slots: { root: "w-full" } });

package/dist/runtime/app/components/FieldCheckbox/FieldCheckbox.types.d.ts

@@ -0,0 +1,2 @@
+import type { VunoFieldCheckbox } from '#vuno/types/field';
+export type VunoFieldCheckboxProps = Omit<VunoFieldCheckbox, 'columns'>;

package/dist/runtime/app/components/FieldCheckbox/FieldCheckbox.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { useField } from "#vuno/composables/useField";
+import { useTheme } from "#vuno/composables/useTheme";
+import Checkbox from "#vuno/components/FieldCheckbox/internal/Checkbox/Checkbox.vue";
+import FieldShell from "#vuno/components/FormField/internal/FieldShell/FieldShell.vue";
+defineOptions({ name: "VunoFieldCheckbox" });
+const model = defineModel({ type: Boolean });
+const props = defineProps({
+  name: { type: String, required: false },
+  class: { type: String, required: false },
+  description: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  error: { type: String, required: false },
+  help: { type: String, required: false },
+  hint: { type: String, required: false },
+  label: { type: String, required: false },
+  orientation: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false },
+  indeterminate: { type: Boolean, required: false }
+});
+const { value } = useField(() => props.name, model);
+const ui = useTheme("fieldCheckbox", () => props.ui);
+</script>
+
+<template>
+    <FieldShell v-bind="props">
+        <template #default="control">
+            <Checkbox
+                v-bind="control"
+                v-model="value"
+                :disabled="props.disabled"
+                :indeterminate="props.indeterminate"
+                :ui="ui"
+            />
+        </template>
+    </FieldShell>
+</template>

package/dist/runtime/app/components/{forms/Switch.vue.d.ts → FieldCheckbox/FieldCheckbox.vue.d.ts}

@@ -1,21 +1,13 @@
-import type { VunoColor, VunoSize, VunoSlots } from '#vuno/types/base';
-type __VLS_Props = {
-    color?: VunoColor;
-    size?: VunoSize;
-    ui?: VunoSlots;
-};
+import type { VunoFieldCheckboxProps } from './FieldCheckbox.types.js';
+type __VLS_Props = VunoFieldCheckboxProps;
 type __VLS_ModelProps = {
-    modelValue?: boolean | undefined;
+    modelValue?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
-}>, {
-    color: VunoColor;
-    size: VunoSize;
-    ui: VunoSlots;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/{forms → FieldCheckbox/internal/Checkbox}/Checkbox.d.vue.ts

@@ -1,4 +1,6 @@
-import type { VunoColor, VunoSize, VunoSlots } from '#vuno/types/base';
+import type { VunoColor, VunoRadius } from '#vuno/types/base';
+import type { VunoFieldSize } from '#vuno/types/field';
+import type { VunoUi } from '#vuno/types/slots';
 /**
  * La casilla, nativa.
  *
@@ -7,16 +9,19 @@ import type { VunoColor, VunoSize, VunoSlots } from '#vuno/types/base';
  * `aria-*` del envoltorio de campo, el `name`, el `disabled`— cae en el
  * elemento correcto sin reenviarlo a mano.
  */
-type __VLS_Props = {
+type Props = {
     color?: VunoColor;
     /**
      * Ni marcada ni sin marcar: la selección de una tabla donde solo
      * hay algunas filas elegidas.
      */
     indeterminate?: boolean;
-    size?: VunoSize;
-    ui?: VunoSlots;
+    /** La curvatura. Sin valor, la que traiga el tema. */
+    radius?: VunoRadius;
+    size?: VunoFieldSize;
+    ui?: VunoUi<'checkbox' | 'fieldCheckbox'>;
 };
+type __VLS_Props = Props;
 type __VLS_ModelProps = {
     modelValue?: boolean | undefined;
 };
@@ -27,8 +32,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
 }>, {
     color: VunoColor;
-    size: VunoSize;
-    ui: VunoSlots;
+    radius: VunoRadius;
+    size: VunoFieldSize;
+    ui: VunoUi<"checkbox" | "fieldCheckbox">;
     indeterminate: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/app/components/FieldCheckbox/internal/Checkbox/Checkbox.theme.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Casilla nativa. El marcado se pinta con `accent-color`, así que toma el
+ * color del tema sin dibujar ningún SVG encima.
+ */
+export declare const checkboxTheme: Record<"checkbox", {
+    readonly slots: {
+        readonly base: "shrink-0 cursor-pointer rounded-sm border border-vuno-border-strong bg-vuno-surface accent-(--vuno-accent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent) disabled:cursor-not-allowed disabled:opacity-50";
+    };
+    readonly variants: {
+        readonly color: Record<import("../../../../types/base.js").VunoColor, Record<"base", string>>;
+        readonly radius: Record<import("../../../../types/base.js").VunoRadius, Record<"base", string>>;
+        readonly size: {
+            readonly xs: {
+                readonly base: "size-3.5";
+            };
+            readonly sm: {
+                readonly base: "size-4";
+            };
+            readonly md: {
+                readonly base: "size-4";
+            };
+            readonly lg: {
+                readonly base: "size-5";
+            };
+            readonly xl: {
+                readonly base: "size-5";
+            };
+        };
+    };
+}>;

package/dist/runtime/app/components/FieldCheckbox/internal/Checkbox/Checkbox.theme.js

@@ -0,0 +1,10 @@
+import { accentByColor, radiusByStep } from "#vuno/theme/shared";
+import { defineTheme } from "#vuno/utils/theme";
+export const checkboxTheme = defineTheme("checkbox", {
+  slots: { base: "shrink-0 cursor-pointer rounded-sm border border-vuno-border-strong bg-vuno-surface accent-(--vuno-accent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent) disabled:cursor-not-allowed disabled:opacity-50" },
+  variants: {
+    color: accentByColor("base"),
+    radius: radiusByStep("base"),
+    size: { xs: { base: "size-3.5" }, sm: { base: "size-4" }, md: { base: "size-4" }, lg: { base: "size-5" }, xl: { base: "size-5" } }
+  }
+});

package/dist/runtime/app/components/{forms → FieldCheckbox/internal/Checkbox}/Checkbox.vue

@@ -1,29 +1,32 @@
 <script setup>
 import { useTemplateRef, watchEffect } from "vue";
 import { useTheme } from "#vuno/composables/useTheme";
+defineOptions({ name: "VunoCheckbox" });
+const model = defineModel({ type: Boolean, skipCheck: true, ...{ default: void 0 } });
 const props = defineProps({
   color: { type: String, required: false, default: "primary" },
   indeterminate: { type: Boolean, required: false, default: false },
+  radius: { type: String, required: false, default: void 0 },
   size: { type: String, required: false, default: "md" },
   ui: { type: Object, required: false, default: void 0 }
 });
-const model = defineModel({ type: Boolean, skipCheck: true, ...{ default: void 0 } });
 const ui = useTheme(
   "checkbox",
   () => props.ui,
   () => ({
     color: props.color,
+    radius: props.radius,
     size: props.size
   })
 );
 const control = useTemplateRef("control");
+function onChange(event) {
+  model.value = event.target.checked;
+}
 watchEffect(() => {
   const el = control.value;
   if (el) el.indeterminate = props.indeterminate;
 });
-function onChange(event) {
-  model.value = event.target.checked;
-}
 </script>
 
 <template>

package/dist/runtime/app/components/{forms → FieldCheckbox/internal/Checkbox}/Checkbox.vue.d.ts

@@ -1,4 +1,6 @@
-import type { VunoColor, VunoSize, VunoSlots } from '#vuno/types/base';
+import type { VunoColor, VunoRadius } from '#vuno/types/base';
+import type { VunoFieldSize } from '#vuno/types/field';
+import type { VunoUi } from '#vuno/types/slots';
 /**
  * La casilla, nativa.
  *
@@ -7,16 +9,19 @@ import type { VunoColor, VunoSize, VunoSlots } from '#vuno/types/base';
  * `aria-*` del envoltorio de campo, el `name`, el `disabled`— cae en el
  * elemento correcto sin reenviarlo a mano.
  */
-type __VLS_Props = {
+type Props = {
     color?: VunoColor;
     /**
      * Ni marcada ni sin marcar: la selección de una tabla donde solo
      * hay algunas filas elegidas.
      */
     indeterminate?: boolean;
-    size?: VunoSize;
-    ui?: VunoSlots;
+    /** La curvatura. Sin valor, la que traiga el tema. */
+    radius?: VunoRadius;
+    size?: VunoFieldSize;
+    ui?: VunoUi<'checkbox' | 'fieldCheckbox'>;
 };
+type __VLS_Props = Props;
 type __VLS_ModelProps = {
     modelValue?: boolean | undefined;
 };
@@ -27,8 +32,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
 }>, {
     color: VunoColor;
-    size: VunoSize;
-    ui: VunoSlots;
+    radius: VunoRadius;
+    size: VunoFieldSize;
+    ui: VunoUi<"checkbox" | "fieldCheckbox">;
     indeterminate: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/app/components/FieldColor/FieldColor.d.vue.ts

@@ -0,0 +1,13 @@
+import type { VunoFieldColorProps } from './FieldColor.types.js';
+type __VLS_Props = VunoFieldColorProps;
+type __VLS_ModelProps = {
+    modelValue?: string | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FieldColor/FieldColor.theme.d.ts

@@ -0,0 +1,27 @@
+export declare const fieldColorTheme: Record<"fieldColor", {
+    readonly slots: {
+        readonly root: "flex w-full items-center gap-2";
+        readonly swatch: "relative flex shrink-0 cursor-pointer items-center justify-center rounded-sm border border-vuno-border-strong bg-vuno-surface p-1 transition-colors [--vuno-accent:var(--color-vuno-primary)] focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-(--vuno-accent) has-disabled:cursor-not-allowed has-disabled:opacity-50";
+        readonly swatchColor: "size-full rounded-sm";
+        readonly swatchInput: "absolute inset-0 cursor-pointer opacity-0";
+    };
+    readonly variants: {
+        readonly size: {
+            readonly xs: {
+                readonly swatch: "size-6";
+            };
+            readonly sm: {
+                readonly swatch: "size-7";
+            };
+            readonly md: {
+                readonly swatch: "size-8";
+            };
+            readonly lg: {
+                readonly swatch: "size-9";
+            };
+            readonly xl: {
+                readonly swatch: "size-10";
+            };
+        };
+    };
+}>;

package/dist/runtime/app/components/FieldColor/FieldColor.theme.js

@@ -0,0 +1,18 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const fieldColorTheme = defineTheme("fieldColor", {
+  slots: {
+    root: "flex w-full items-center gap-2",
+    swatch: "relative flex shrink-0 cursor-pointer items-center justify-center rounded-sm border border-vuno-border-strong bg-vuno-surface p-1 transition-colors [--vuno-accent:var(--color-vuno-primary)] focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-(--vuno-accent) has-disabled:cursor-not-allowed has-disabled:opacity-50",
+    swatchColor: "size-full rounded-sm",
+    swatchInput: "absolute inset-0 cursor-pointer opacity-0"
+  },
+  variants: {
+    size: {
+      xs: { swatch: "size-6" },
+      sm: { swatch: "size-7" },
+      md: { swatch: "size-8" },
+      lg: { swatch: "size-9" },
+      xl: { swatch: "size-10" }
+    }
+  }
+});

package/dist/runtime/app/components/FieldColor/FieldColor.types.d.ts

@@ -0,0 +1,2 @@
+import type { VunoFieldColor } from '#vuno/types/field';
+export type VunoFieldColorProps = Omit<VunoFieldColor, 'columns'>;

package/dist/runtime/app/components/{forms/fields → FieldColor}/FieldColor.vue

@@ -1,23 +1,28 @@
 <script setup>
 import { computed } from "vue";
-import Input from "#vuno/components/forms/Input.vue";
 import { useField } from "#vuno/composables/useField";
 import { useMessages, useTheme } from "#vuno/composables/useTheme";
 import { toHexColor } from "#vuno/utils/format";
-defineOptions({ inheritAttrs: false });
+import FieldShell from "#vuno/components/FormField/internal/FieldShell/FieldShell.vue";
+import PrimitiveInput from "#vuno/primitives/PrimitiveInput/PrimitiveInput.vue";
+defineOptions({ name: "VunoFieldColor", inheritAttrs: false });
+const model = defineModel({ type: null, ...{ default: void 0 } });
 const props = defineProps({
-  name: { type: String, required: true },
+  name: { type: String, required: false },
+  class: { type: String, required: false },
   description: { type: String, required: false },
   disabled: { type: Boolean, required: false },
+  error: { type: String, required: false },
   help: { type: String, required: false },
   hint: { type: String, required: false },
   label: { type: String, required: false },
+  orientation: { type: String, required: false },
   required: { type: Boolean, required: false },
   size: { type: String, required: false },
   ui: { type: Object, required: false },
   placeholder: { type: String, required: false }
 });
-const { value } = useField(() => props.name);
+const { value } = useField(() => props.name, model);
 const messages = useMessages();
 const ui = useTheme(
   "fieldColor",
@@ -31,8 +36,10 @@ function onPick(event) {
 </script>
 
 <template>
-    <div :class="ui.root">
-        <!--
+    <FieldShell v-bind="props">
+        <template #default="control">
+            <div :class="ui.root">
+                <!--
             El selector es el del sistema: trae su lupa para tomar un color de
             la pantalla, su historial y su teclado, y en el móvil el de siempre.
             Nada de eso lo íbamos a escribir mejor.
@@ -44,38 +51,38 @@ function onPick(event) {
             foco se pinta sobre la caja con `focus-within`, no sobre algo que no
             se ve.
         -->
-        <label :class="ui.swatch">
-            <span
-                :class="ui.swatchColor"
-                :style="{ backgroundColor: value || 'transparent' }"
-            />
+                <label :class="ui.swatch">
+                    <span
+                        :class="ui.swatchColor"
+                        :style="{ backgroundColor: value || 'transparent' }"
+                    />
 
-            <!--
+                    <!--
                 El nombre lleva de qué control se trata porque el campo son
                 **dos** paradas con el mismo rótulo: la muestra abre el selector
                 del sistema y el hexadecimal de al lado escribe el valor. Sin
                 distinguirlos, quien no ve la pantalla oye dos veces «Color de
                 marca» y no sabe en cuál está.
             -->
-            <input
-                :aria-label="props.label ? `${props.label}: ${messages.colorPicker}` : messages.colorPicker"
-                :class="ui.swatchInput"
-                :disabled="props.disabled"
-                type="color"
-                :value="picked"
-                @input="onPick"
-            />
-        </label>
+                    <input
+                        :aria-label="props.label ? `${props.label}: ${messages.colorPicker}` : messages.colorPicker"
+                        :class="ui.swatchInput"
+                        :disabled="props.disabled"
+                        type="color"
+                        :value="picked"
+                        @input="onPick"
+                    />
+                </label>
 
-        <Input
-            v-bind="$attrs"
-            v-model="value"
-            class="font-mono"
-            :disabled="props.disabled"
-            :name="props.name"
-            :placeholder="props.placeholder ?? '#000000'"
-            :size="props.size"
-            :ui="{ root: 'w-full' }"
-        />
-    </div>
+                <PrimitiveInput
+                    v-bind="control"
+                    v-model="value"
+                    class="font-mono"
+                    :disabled="props.disabled"
+                    :placeholder="props.placeholder ?? '#000000'"
+                    :ui="{ root: 'w-full' }"
+                />
+            </div>
+        </template>
+    </FieldShell>
 </template>