@ulu/frontend-vue 0.5.16 → 0.6.0

package/dist/components/elements/UluButton.vue.d.ts

@@ -13,6 +13,7 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
     outline: boolean;
     transparent: boolean;
     noMargin: boolean;
+    type?: string | undefined;
     size?: string | undefined;
     icon?: string | unknown[] | undefined;
     modifiers?: string | unknown[] | undefined;
@@ -22,6 +23,7 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
     download?: string | boolean | undefined;
     text?: string | undefined;
     alt?: string | undefined;
+    ariaLabel?: string | undefined;
     $props: {
         readonly iconOnly?: boolean | undefined;
         readonly iconBefore?: boolean | undefined;
@@ -32,6 +34,7 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
         readonly outline?: boolean | undefined;
         readonly transparent?: boolean | undefined;
         readonly noMargin?: boolean | undefined;
+        readonly type?: string | undefined;
         readonly size?: string | undefined;
         readonly icon?: string | unknown[] | undefined;
         readonly modifiers?: string | unknown[] | undefined;
@@ -41,6 +44,7 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
         readonly download?: string | boolean | undefined;
         readonly text?: string | undefined;
         readonly alt?: string | undefined;
+        readonly ariaLabel?: string | undefined;
     };
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 type __VLS_TemplateResult = {

package/dist/components/elements/UluButton.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluButton.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/elements/UluButton.vue"],"names":[],"mappings":"AAkCA;wBA0WqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2OAQG"}
+{"version":3,"file":"UluButton.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/elements/UluButton.vue"],"names":[],"mappings":"AAmCA;wBAyYqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2OAQG"}

package/dist/components/elements/UluButton.vue.js

@@ -1,8 +1,9 @@
-import { computed as i, createBlock as a, openBlock as t, normalizeClass as d, unref as m, withCtx as f, renderSlot as l, createCommentVNode as r, createElementBlock as g, createTextVNode as y, toDisplayString as B } from "vue";
+import { computed as i, createBlock as a, openBlock as o, normalizeClass as d, unref as m, withCtx as f, renderSlot as l, createCommentVNode as r, createElementBlock as g, createTextVNode as y, toDisplayString as B } from "vue";
 import b from "../utils/UluAction.vue.js";
 import c from "./UluIcon.vue.js";
 import { useModifiers as S } from "../../composables/useModifiers.js";
-const h = { key: 1 }, z = {
+import { checkDeprecatedProps as h } from "../../utils/props.js";
+const k = { key: 1 }, C = {
   __name: "UluButton",
   props: {
     /**
@@ -35,9 +36,14 @@ const h = { key: 1 }, z = {
      */
     download: [Boolean, String],
     /**
-     * For icon only buttons or buttons that need an explicit label
+     * **Deprecated!** Use `ariaLabel` instead. 
+     * @deprecated Use `ariaLabel` instead.
      */
     alt: String,
+    /**
+     * For icon only buttons or buttons that need an explicit aria-label
+     */
+    ariaLabel: String,
     /**
      * If not using slot this sets the buttons text via prop
      */
@@ -77,10 +83,18 @@ const h = { key: 1 }, z = {
     /**
      * Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])
      */
-    modifiers: [String, Array]
+    modifiers: [String, Array],
+    /**
+     * Button type (e.g. 'submit', 'reset', 'button').
+     */
+    type: String
   },
   setup(e) {
-    const n = e, { resolvedModifiers: s } = S({
+    const n = e;
+    h(n, ["alt"], (t) => {
+      console.warn(`[@ulu/frontend-vue] UluButton: The "${t}" prop is deprecated. Please use "ariaLabel" instead.`);
+    });
+    const { resolvedModifiers: s } = S({
       props: n,
       baseClass: "button",
       internal: i(() => ({
@@ -94,14 +108,15 @@ const h = { key: 1 }, z = {
         [n.size]: n.size
       }))
     }), u = i(() => {
-      const o = n.alt || n.iconOnly && n.text;
-      return o || null;
+      const t = n.ariaLabel || n.alt || n.iconOnly && n.text;
+      return t || null;
     });
-    return (o, O) => (t(), a(b, {
+    return (t, O) => (o(), a(b, {
       to: e.to,
       href: e.href,
       target: e.target,
       download: e.download,
+      type: e.type,
       class: d(["button", [
         {
           "no-margin": e.noMargin
@@ -111,28 +126,28 @@ const h = { key: 1 }, z = {
       "aria-label": u.value
     }, {
       default: f(() => [
-        l(o.$slots, "before"),
-        e.icon && (e.iconBefore || e.iconOnly) ? (t(), a(c, {
+        l(t.$slots, "before"),
+        e.icon && (e.iconBefore || e.iconOnly) ? (o(), a(c, {
           key: 0,
           icon: e.icon,
           class: "button__icon"
         }, null, 8, ["icon"])) : r("", !0),
-        (o.$slots.default || e.text) && !e.iconOnly ? (t(), g("span", h, [
-          l(o.$slots, "default", {}, () => [
+        (t.$slots.default || e.text) && !e.iconOnly ? (o(), g("span", k, [
+          l(t.$slots, "default", {}, () => [
             y(B(e.text), 1)
           ])
         ])) : r("", !0),
-        e.icon && !e.iconBefore && !e.iconOnly ? (t(), a(c, {
+        e.icon && !e.iconBefore && !e.iconOnly ? (o(), a(c, {
           key: 2,
           icon: e.icon,
           class: "button__icon"
         }, null, 8, ["icon"])) : r("", !0),
-        l(o.$slots, "after")
+        l(t.$slots, "after")
       ]),
       _: 3
-    }, 8, ["to", "href", "target", "download", "class", "aria-label"]));
+    }, 8, ["to", "href", "target", "download", "type", "class", "aria-label"]));
   }
 };
 export {
-  z as default
+  C as default
 };

package/dist/components/elements/UluIcon.vue.js

@@ -1,11 +1,10 @@
-import { inject as S, ref as _, computed as e, watchEffect as h, defineAsyncComponent as A, markRaw as v, createBlock as p, createElementBlock as B, createCommentVNode as F, openBlock as i, resolveDynamicComponent as f, mergeProps as g, normalizeClass as D } from "vue";
-import { useIcon as R } from "../../composables/useIcon.js";
-const x = {
+import { inject as P, defineAsyncComponent as S, computed as e, createBlock as p, createElementBlock as _, createCommentVNode as h, openBlock as a, resolveDynamicComponent as m, mergeProps as v, normalizeClass as w } from "vue";
+import { useIcon as B } from "../../composables/useIcon.js";
+const b = {
   __name: "UluIcon",
   props: {
     /**
      * Icon definition can be string (fa classes), or array or object (any prop format FaIcon accepts)
-     * - This will override the 'type' prop if both are provided
      */
     icon: [String, Array, Object, Boolean],
     /**
@@ -13,43 +12,29 @@ const x = {
      */
     spaced: Boolean
   },
-  setup(y) {
-    const s = S("uluCore"), l = _(null), { getIconProps: C, getClassesFromDefinition: d } = R();
-    let a;
-    const m = y, c = e(() => s.getSetting("fontAwesomeStatic")), r = e(() => s.getSetting("iconComponent")), I = e(() => s.getSetting("iconPropResolver")), n = e(() => {
-      const { icon: o } = m;
-      if (typeof o == "string" && o.startsWith("type:"))
+  setup(f) {
+    const t = P("uluCore"), { getIconProps: g, getClassesFromDefinition: C } = B(), y = S(
+      () => import("@fortawesome/vue-fontawesome").then((n) => n.FontAwesomeIcon)
+    ), u = f, r = e(() => t.getSetting("fontAwesomeStatic")), c = e(() => t.getSetting("iconComponent")), I = e(() => t.getSetting("iconPropResolver")), o = e(() => {
+      const { icon: n } = u;
+      if (typeof n == "string" && n.startsWith("type:"))
         try {
-          const t = o.substring(5);
-          return s.getIcon(t);
-        } catch (t) {
-          return console.warn(t), null;
+          const s = n.substring(5);
+          return t.getIcon(s);
+        } catch (s) {
+          return console.warn(s), null;
         }
-      return o;
-    }), w = e(() => !r.value || !n.value ? null : I.value(n.value)), k = e(() => C(n.value)), P = e(() => d(n.value)), u = e(() => ({
-      "flow-inline": m.spaced
-    }));
-    return h(async () => {
-      if (!c.value && n.value) {
-        if (l.value === null)
-          if (a)
-            l.value = v(a.FontAwesomeIcon);
-          else {
-            const o = A(async () => {
-              const t = await import("@fortawesome/vue-fontawesome");
-              return a = t, t.FontAwesomeIcon;
-            });
-            l.value = v(o);
-          }
-      } else
-        l.value = null;
-    }), (o, t) => r.value ? (i(), p(f(r.value), g({ key: 0 }, w.value, { class: u.value }), null, 16, ["class"])) : !c.value && l.value && n.value ? (i(), p(f(l.value), g({ key: 1 }, k.value, { class: u.value }), null, 16, ["class"])) : c.value && n.value ? (i(), B("span", {
+      return n;
+    }), d = e(() => !c.value || !o.value ? null : I.value(o.value)), k = e(() => g(o.value)), A = e(() => C(o.value)), l = e(() => ({
+      "flow-inline": u.spaced
+    })), i = e(() => !r.value && o.value ? y : null);
+    return (n, s) => c.value ? (a(), p(m(c.value), v({ key: 0 }, d.value, { class: l.value }), null, 16, ["class"])) : !r.value && i.value ? (a(), p(m(i.value), v({ key: 1 }, k.value, { class: l.value }), null, 16, ["class"])) : r.value && o.value ? (a(), _("span", {
       key: 2,
-      class: D([P.value, u.value]),
+      class: w([A.value, l.value]),
       "aria-hidden": "true"
-    }, null, 2)) : F("", !0);
+    }, null, 2)) : h("", !0);
   }
 };
 export {
-  x as default
+  b as default
 };

package/dist/components/forms/UluFormCheckbox.vue.d.ts

@@ -1,25 +1,9 @@
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & (new () => {
-    $slots: S;
-});
-declare const __VLS_component: import('vue').DefineComponent<{}, {
+declare const _default: import('vue').DefineComponent<{}, {
     $emit: (event: "update:modelValue", ...args: any[]) => void;
     modelValue: boolean;
-    required: boolean;
-    label?: string | undefined;
     $props: {
         readonly modelValue?: boolean | undefined;
-        readonly required?: boolean | undefined;
-        readonly label?: string | undefined;
-    };
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-type __VLS_TemplateResult = {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
     };
-    refs: {};
-    rootEl: any;
-};
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLInputElement>;
+export default _default;
 //# sourceMappingURL=UluFormCheckbox.vue.d.ts.map

package/dist/components/forms/UluFormCheckbox.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluFormCheckbox.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/forms/UluFormCheckbox.vue"],"names":[],"mappings":"AAcA;wBAoIqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;;;;2OAQG"}
+{"version":3,"file":"UluFormCheckbox.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/forms/UluFormCheckbox.vue"],"names":[],"mappings":"AAQA;"}

package/dist/components/forms/UluFormCheckbox.vue.js

@@ -1,42 +1,21 @@
-import { createElementBlock as u, openBlock as l, Fragment as i, createElementVNode as d, unref as n, renderSlot as m, createTextVNode as c, createBlock as s, createCommentVNode as f, toDisplayString as k } from "vue";
-import { newId as h } from "../../utils/dom.js";
-import p from "./UluFormRequiredChar.vue.js";
-const V = ["id", "checked", "required"], b = ["for"], x = {
+import { inject as n, computed as r, createElementBlock as a, openBlock as d, mergeProps as m } from "vue";
+const s = ["checked"], i = {
   __name: "UluFormCheckbox",
   props: {
-    /**
-     * The label for the checkbox.
-     */
-    label: String,
     /**
      * The value of the checkbox (for v-model).
      */
-    modelValue: Boolean,
-    /**
-     * If true, the field will be required.
-     */
-    required: Boolean
+    modelValue: Boolean
   },
   emits: ["update:modelValue"],
-  setup(e) {
-    const t = h();
-    return (o, r) => (l(), u(i, null, [
-      d("input", {
-        type: "checkbox",
-        id: n(t),
-        checked: e.modelValue,
-        onChange: r[0] || (r[0] = (a) => o.$emit("update:modelValue", a.target.checked)),
-        required: e.required
-      }, null, 40, V),
-      d("label", { for: n(t) }, [
-        m(o.$slots, "default", {}, () => [
-          c(k(e.label), 1),
-          e.required ? (l(), s(p, { key: 0 })) : f("", !0)
-        ])
-      ], 8, b)
-    ], 64));
+  setup(o) {
+    const e = n("uluFormFieldAttrs", null), l = r(() => e ? e.value : {});
+    return (u, t) => (d(), a("input", m({ type: "checkbox" }, l.value, {
+      checked: o.modelValue,
+      onChange: t[0] || (t[0] = (c) => u.$emit("update:modelValue", c.target.checked))
+    }), null, 16, s));
   }
 };
 export {
-  x as default
+  i as default
 };

package/dist/components/forms/UluFormFile.vue.d.ts

@@ -1,31 +1,9 @@
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & (new () => {
-    $slots: S;
-});
-declare const __VLS_component: import('vue').DefineComponent<{}, {
+declare const _default: import('vue').DefineComponent<{}, {
     $emit: (event: "file-change", ...args: any[]) => void;
-    required: boolean;
-    label: string;
-    labelHidden: boolean;
-    noClasses: boolean;
     multiple: boolean;
-    inputAttrs?: Record<string, any> | undefined;
     $props: {
-        readonly required?: boolean | undefined;
-        readonly label?: string | undefined;
-        readonly labelHidden?: boolean | undefined;
-        readonly noClasses?: boolean | undefined;
         readonly multiple?: boolean | undefined;
-        readonly inputAttrs?: Record<string, any> | undefined;
-    };
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-type __VLS_TemplateResult = {
-    attrs: Partial<{}>;
-    slots: {
-        label?(_: {}): any;
     };
-    refs: {};
-    rootEl: any;
-};
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLInputElement>;
+export default _default;
 //# sourceMappingURL=UluFormFile.vue.d.ts.map

package/dist/components/forms/UluFormFile.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluFormFile.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/forms/UluFormFile.vue"],"names":[],"mappings":"AAkBA;wBAgLqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;;;;;;;;;;2OAQG"}
+{"version":3,"file":"UluFormFile.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/forms/UluFormFile.vue"],"names":[],"mappings":"AAQA;"}

package/dist/components/forms/UluFormFile.vue.js

@@ -1,61 +1,23 @@
-import { createElementBlock as s, openBlock as n, Fragment as c, createElementVNode as i, unref as o, normalizeClass as d, renderSlot as u, createTextVNode as f, createBlock as g, createCommentVNode as p, toDisplayString as h, mergeProps as b } from "vue";
-import { newId as B } from "../../utils/dom.js";
-import q from "./UluFormRequiredChar.vue.js";
-const y = ["for"], C = ["multiple", "id", "required"], V = {
+import { inject as s, computed as c, createElementBlock as u, openBlock as a, mergeProps as m } from "vue";
+const p = ["multiple"], d = {
   __name: "UluFormFile",
   props: {
-    /**
-     * The label for the file input.
-     */
-    label: {
-      type: String,
-      default: "Select File"
-    },
-    /**
-     * If true, the label will be visually hidden.
-     */
-    labelHidden: Boolean,
-    /**
-     * If true, default classes will not be applied.
-     */
-    noClasses: Boolean,
     /**
      * If true, allows multiple file selection.
      */
-    multiple: Boolean,
-    /**
-     * Additional attributes to bind to the input element.
-     */
-    inputAttrs: Object,
-    /**
-     * If true, the field will be required.
-     */
-    required: Boolean
+    multiple: Boolean
   },
   emits: ["file-change"],
-  setup(e, { emit: r }) {
-    const a = r, t = B(), m = (l) => {
-      a("file-change", l.target.files);
+  setup(l, { emit: n }) {
+    const o = n, t = s("uluFormFieldAttrs", null), i = c(() => t ? { ...t.value } : {}), r = (e) => {
+      o("file-change", e.target.files);
     };
-    return (l, F) => (n(), s(c, null, [
-      i("label", {
-        class: d({ "hidden-visually": e.labelHidden }),
-        for: o(t)
-      }, [
-        u(l.$slots, "label", {}, () => [
-          f(h(e.label), 1),
-          e.required ? (n(), g(q, { key: 0 })) : p("", !0)
-        ])
-      ], 10, y),
-      i("input", b({
-        type: "file",
-        onChange: m,
-        multiple: e.multiple,
-        id: o(t)
-      }, e.inputAttrs, { required: e.required }), null, 16, C)
-    ], 64));
+    return (e, f) => (a(), u("input", m({ type: "file" }, i.value, {
+      multiple: l.multiple,
+      onChange: r
+    }), null, 16, p));
   }
 };
 export {
-  V as default
+  d as default
 };

package/dist/components/forms/UluFormItem.vue.d.ts

@@ -4,27 +4,42 @@ type __VLS_WithTemplateSlots<T, S> = T & (new () => {
     $slots: S;
 });
 declare const __VLS_component: import('vue').DefineComponent<{}, {
-    text: boolean;
-    select: boolean;
-    textarea: boolean;
-    file: boolean;
+    required: boolean;
     warning: boolean;
     error: boolean;
+    labelHidden: boolean;
     alignTop: boolean;
+    modifiers?: string | unknown[] | undefined;
+    description?: string | undefined;
+    label?: string | undefined;
+    layout?: string | undefined;
+    fieldId?: string | undefined;
+    errorMessage?: string | undefined;
+    warningMessage?: string | undefined;
     $props: {
-        readonly text?: boolean | undefined;
-        readonly select?: boolean | undefined;
-        readonly textarea?: boolean | undefined;
-        readonly file?: boolean | undefined;
+        readonly required?: boolean | undefined;
         readonly warning?: boolean | undefined;
         readonly error?: boolean | undefined;
+        readonly labelHidden?: boolean | undefined;
         readonly alignTop?: boolean | undefined;
+        readonly modifiers?: string | unknown[] | undefined;
+        readonly description?: string | undefined;
+        readonly label?: string | undefined;
+        readonly layout?: string | undefined;
+        readonly fieldId?: string | undefined;
+        readonly errorMessage?: string | undefined;
+        readonly warningMessage?: string | undefined;
     };
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 type __VLS_TemplateResult = {
     attrs: Partial<{}>;
     slots: {
+        label?(_: {}): any;
+        label?(_: {}): any;
         default?(_: {}): any;
+        description?(_: {}): any;
+        errorMessage?(_: {}): any;
+        warningMessage?(_: {}): any;
     };
     refs: {};
     rootEl: HTMLDivElement;

package/dist/components/forms/UluFormItem.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluFormItem.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/forms/UluFormItem.vue"],"names":[],"mappings":"AAgBA;wBA4IqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;;;;;;;;;;;sPAQG"}
+{"version":3,"file":"UluFormItem.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/forms/UluFormItem.vue"],"names":[],"mappings":"AAuDA;wBAkbqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;;;;;;;;;;;;;;;;;;;;;sPAQG"}

package/dist/components/forms/UluFormItem.vue.js

@@ -1,52 +1,149 @@
-import { createElementBlock as o, openBlock as a, normalizeClass as l, renderSlot as m } from "vue";
-const i = {
+import { useSlots as I, computed as i, provide as q, createElementBlock as H, openBlock as o, normalizeClass as p, unref as A, createBlock as d, createCommentVNode as u, renderSlot as t, withCtx as g, createTextVNode as c, toDisplayString as f } from "vue";
+import { newId as C } from "../../utils/dom.js";
+import { useModifiers as F } from "../../composables/useModifiers.js";
+import m from "./UluFormMessage.vue.js";
+import h from "./UluFormLabel.vue.js";
+const j = {
   __name: "UluFormItem",
   props: {
     /**
-     * If true, applies the error state styles.
+     * The layout variant for this form item (e.g., 'text', 'select', 'textarea', 'checkbox', 'radio', 'file').
+     * This determines the layout and BEM styling of the item container.
      */
-    error: Boolean,
+    layout: String,
     /**
-     * If true, applies the warning state styles.
+     * The ID to use for the form field. If not provided, a unique ID is generated.
      */
-    warning: Boolean,
+    fieldId: String,
     /**
-     * If true, aligns the item to the top.
+     * The label for the form field.
      */
-    alignTop: Boolean,
+    label: String,
+    /**
+     * If true, the label will be visually hidden.
+     */
+    labelHidden: Boolean,
+    /**
+     * The description text for the form field.
+     */
+    description: String,
+    /**
+     * The error message text.
+     */
+    errorMessage: String,
+    /**
+     * The warning message text.
+     */
+    warningMessage: String,
     /**
-     * If true, applies the text item styles.
+     * If true, the field will be marked as required.
      */
-    text: Boolean,
+    required: Boolean,
     /**
-     * If true, applies the file item styles.
+     * If true, applies the error state styles.
      */
-    file: Boolean,
+    error: Boolean,
     /**
-     * If true, applies the select item styles.
+     * If true, applies the warning state styles.
      */
-    select: Boolean,
+    warning: Boolean,
+    /**
+     * If true, aligns the item to the top.
+     */
+    alignTop: Boolean,
     /**
-     * If true, applies the textarea item styles.
+     * Additional BEM modifiers for the form item.
      */
-    textarea: Boolean
+    modifiers: [String, Array]
   },
-  setup(e) {
-    return (t, n) => (a(), o("div", {
-      class: l(["form-theme__item", [{
-        "is-danger": e.error,
-        "is-warning": e.warning,
-        "form-theme__item--align-top": e.alignTop,
-        "form-theme__item--text": e.text,
-        "form-theme__item--file": e.file,
-        "form-theme__item--select": e.select,
-        "form-theme__item--textarea": e.textarea
-      }]])
+  setup(r) {
+    const e = r, s = I(), { resolvedModifiers: S } = F({
+      props: e,
+      baseClass: "form-theme__item",
+      internal: i(() => ({
+        [e.layout]: e.layout,
+        "align-top": e.alignTop
+      }))
+    }), l = i(() => e.fieldId || C()), v = i(() => `${l.value}-desc`), b = i(() => `${l.value}-error`), M = i(() => `${l.value}-warn`), w = i(() => !!e.label || !!s.label), $ = i(() => e.error || !!e.errorMessage || !!s.errorMessage), k = i(() => e.warning || !!e.warningMessage || !!s.warningMessage), y = i(() => ["checkbox", "radio"].includes(e.layout)), B = i(() => {
+      const a = {
+        id: l.value
+      }, n = [];
+      return (e.description || s.description) && n.push(v.value), (e.errorMessage || s.errorMessage) && n.push(b.value), (e.warningMessage || s.warningMessage) && n.push(M.value), n.length > 0 && (a["aria-describedby"] = n.join(" ")), $.value && (a["aria-invalid"] = "true"), a;
+    });
+    return q("uluFormFieldAttrs", B), (a, n) => (o(), H("div", {
+      class: p(["form-theme__item", [
+        A(S),
+        {
+          "is-danger": $.value,
+          "is-warning": k.value
+        }
+      ]])
     }, [
-      m(t.$slots, "default")
+      !y.value && w.value ? (o(), d(h, {
+        key: 0,
+        id: l.value,
+        labelHidden: r.labelHidden,
+        required: r.required
+      }, {
+        default: g(() => [
+          t(a.$slots, "label", {}, () => [
+            c(f(r.label), 1)
+          ])
+        ]),
+        _: 3
+      }, 8, ["id", "labelHidden", "required"])) : u("", !0),
+      t(a.$slots, "default"),
+      y.value && w.value ? (o(), d(h, {
+        key: 1,
+        id: l.value,
+        labelHidden: r.labelHidden,
+        required: r.required
+      }, {
+        default: g(() => [
+          t(a.$slots, "label", {}, () => [
+            c(f(r.label), 1)
+          ])
+        ]),
+        _: 3
+      }, 8, ["id", "labelHidden", "required"])) : u("", !0),
+      r.description || a.$slots.description ? (o(), d(m, {
+        key: 2,
+        id: v.value
+      }, {
+        default: g(() => [
+          t(a.$slots, "description", {}, () => [
+            c(f(r.description), 1)
+          ])
+        ]),
+        _: 3
+      }, 8, ["id"])) : u("", !0),
+      r.errorMessage || a.$slots.errorMessage ? (o(), d(m, {
+        key: 3,
+        id: b.value,
+        error: ""
+      }, {
+        default: g(() => [
+          t(a.$slots, "errorMessage", {}, () => [
+            c(f(r.errorMessage), 1)
+          ])
+        ]),
+        _: 3
+      }, 8, ["id"])) : u("", !0),
+      r.warningMessage || a.$slots.warningMessage ? (o(), d(m, {
+        key: 4,
+        id: M.value,
+        warning: ""
+      }, {
+        default: g(() => [
+          t(a.$slots, "warningMessage", {}, () => [
+            c(f(r.warningMessage), 1)
+          ])
+        ]),
+        _: 3
+      }, 8, ["id"])) : u("", !0)
     ], 2));
   }
 };
 export {
-  i as default
+  j as default
 };