@m4l/components 9.57.1-beta-hotfix-semantic-width-dynamicform.0 → 9.57.1-beta-hotfix-semantic-width-dynamicform.2

package/components/DynamicForm/DynamicForm.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicForm.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/DynamicForm/DynamicForm.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAGV,iBAAiB,EAClB,MAAM,SAAS,CAAC;AAsBjB,eAAO,MAAM,eAAe,EAAE,iBAqS7B,CAAC"}
+{"version":3,"file":"DynamicForm.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/DynamicForm/DynamicForm.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAGV,iBAAiB,EAClB,MAAM,SAAS,CAAC;AAgNjB,eAAO,MAAM,eAAe,EAAE,iBA0T7B,CAAC"}

package/components/DynamicForm/DynamicForm.styles.js

@@ -1,15 +1,96 @@
-import { CHECKABLE_LIST_DEFAULT_MIN_HEIGHT as d } from "../CheckableList/constants.js";
-import { isFullRowSemanticWidth as p, resolveSemanticWidthPx as f } from "../PropertyValue/semanticWidth.js";
-const h = (t) => ({
-  flex: `1 1 ${t}px`,
-  minWidth: `min(100%, ${t}px)`,
-  maxWidth: "100%"
-}), m = {
+import { CHECKABLE_LIST_DEFAULT_MIN_HEIGHT as m } from "../CheckableList/constants.js";
+import { DYNAMIC_FORM_SEMANTIC_GRID_COLUMN_BREAKPOINTS as l, DYNAMIC_FORM_SEMANTIC_GRID_MAX_COLUMNS as c, resolveSemanticGridSpanForContainerWidth as f, resolveSemanticGridSpanForColumnCount as h, resolveSemanticGridContainerWidthForSpan as x } from "./helpers/resolveAdaptiveFieldLayout/resolveAdaptiveFieldLayout.js";
+const s = "m4l-dynamic-form-content", S = {
+  gridColumn: "1 / -1",
   maxWidth: "100%",
   width: "100%",
   minWidth: "0",
   flex: "1 1 100%"
-}, g = {
+}, g = l.reduce(
+  (t, i) => (t[`@container ${s} (max-width: ${i.maxContainerWidth}px)`] = {
+    gridTemplateColumns: `repeat(${i.columns}, minmax(0, 1fr))`
+  }, t),
+  {}
+), w = [
+  {
+    columns: c,
+    minContainerWidth: (l[0]?.maxContainerWidth ?? 0) + 1
+  },
+  ...l.map(
+    (t, i) => ({
+      columns: t.columns,
+      maxContainerWidth: t.maxContainerWidth,
+      minContainerWidth: (l[i + 1]?.maxContainerWidth ?? -1) + 1
+    })
+  )
+];
+function C(t) {
+  return typeof t == "number" && Number.isFinite(t) && t > 0;
+}
+function u(t) {
+  return {
+    gridColumn: `span ${t}`
+  };
+}
+function p(t, i) {
+  const e = [];
+  return t > 0 && e.push(`(min-width: ${t}px)`), typeof i == "number" && e.push(`(max-width: ${i}px)`), `@container ${s} ${e.join(
+    " and "
+  )}`;
+}
+function y(t) {
+  return t.minContainerWidth > 0 ? t.minContainerWidth : t.maxContainerWidth ?? 1;
+}
+function W(t, i, e, n) {
+  for (let r = n - 1; r >= 1; r -= 1) {
+    const o = x(
+      e,
+      r,
+      i.columns
+    );
+    o <= i.minContainerWidth || typeof i.maxContainerWidth == "number" && o > i.maxContainerWidth || (t[p(
+      o,
+      i.maxContainerWidth
+    )] = u(r));
+  }
+}
+function b(t, i) {
+  if (C(i)) {
+    const e = {
+      justifySelf: "start",
+      maxWidth: "100%",
+      width: `min(100%, ${Math.ceil(i)}px)`
+    };
+    return w.forEach((n, r) => {
+      const o = f(
+        i,
+        n.columns,
+        y(n)
+      ), a = u(o);
+      r === 0 ? Object.assign(e, a) : e[p(0, n.maxContainerWidth)] = a, W(
+        e,
+        n,
+        i,
+        o
+      );
+    }), e;
+  }
+  return l.reduce(
+    (e, n) => (e[`@container ${s} (max-width: ${n.maxContainerWidth}px)`] = {
+      gridColumn: `span ${h(
+        t,
+        n.columns
+      )}`
+    }, e),
+    {
+      gridColumn: `span ${h(
+        t,
+        c
+      )}`
+    }
+  );
+}
+const T = {
   /**
    * Styles for the RHFormProvider wrapper.
    */
@@ -24,8 +105,8 @@ const h = (t) => ({
    * Styles for the form content container (inner div).
    * Uses a vertical flex axis so growable fields can consume available height.
    */
-  contentRoot: ({ theme: t, ownerState: o }) => {
-    const e = o;
+  contentRoot: ({ theme: t, ownerState: i }) => {
+    const e = i;
     return {
       display: "flex",
       flexDirection: "column",
@@ -35,6 +116,8 @@ const h = (t) => ({
       height: "100%",
       minHeight: 0,
       boxSizing: "border-box",
+      containerName: s,
+      containerType: "inline-size",
       padding: t.vars.size.baseSpacings.sp2,
       ...e?.fieldFlow === "verticalStack" && {
         flex: "1 1 auto"
@@ -47,20 +130,29 @@ const h = (t) => ({
   /**
    * Styles for normal-field flow segments.
    */
-  fieldsFlow: ({ theme: t, ownerState: o }) => {
-    const i = o?.fieldFlow === "verticalStack";
-    return {
-      display: "flex",
-      flexDirection: i ? "column" : "row",
-      alignItems: i ? "stretch" : "flex-start",
-      alignContent: i ? "stretch" : "flex-start",
-      flexWrap: i ? "nowrap" : "wrap",
-      gap: t.vars.size.baseSpacings.sp4,
-      width: "100%",
-      minWidth: 0,
-      boxSizing: "border-box",
-      flex: "0 0 auto"
-    };
+  fieldsFlow: ({ theme: t, ownerState: i }) => i?.fieldFlow === "verticalStack" ? {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch",
+    alignContent: "stretch",
+    flexWrap: "nowrap",
+    gap: t.vars.size.baseSpacings.sp4,
+    width: "100%",
+    minWidth: 0,
+    boxSizing: "border-box",
+    flex: "0 0 auto"
+  } : {
+    display: "grid",
+    gridTemplateColumns: `repeat(${c}, minmax(0, 1fr))`,
+    gridAutoFlow: "row",
+    alignItems: "start",
+    alignContent: "start",
+    gap: t.vars.size.baseSpacings.sp4,
+    width: "100%",
+    minWidth: 0,
+    boxSizing: "border-box",
+    flex: "0 0 auto",
+    ...g
   },
   /**
    * Styles for the optional form header rendered before the dynamic fields.
@@ -93,38 +185,41 @@ const h = (t) => ({
   }),
   /**
    * Styles for each form field wrapper.
-   * `ownerState.semanticWidth` drives the control width, while adaptive wrapper width
-   * gives single-line labels enough flow space without widening the control.
+   * `ownerState.gridColumnSpan` places adaptive fields on the semantic grid while
+   * PropertyValue keeps the rendered control fixed to the backend semantic width.
    */
-  fieldWrapper: ({ theme: t, ownerState: o }) => {
-    const e = o, i = e?.semanticWidth, c = e?.fieldFlow === "verticalStack", s = f(i);
-    let a = m;
-    e?.isFullWidth !== !0 && !p(i) && (typeof e?.wrapperWidth == "number" ? a = h(e.wrapperWidth) : typeof s == "number" && (a = h(s)));
-    const r = {
+  fieldWrapper: ({ theme: t, ownerState: i }) => {
+    const e = i, n = e?.fieldFlow === "verticalStack";
+    let r = S;
+    e?.isFullWidth !== !0 && typeof e?.gridColumnSpan == "number" && (r = b(
+      e.gridColumnSpan,
+      e.wrapperWidth
+    ));
+    const o = {
       display: "flex",
       flexDirection: "column",
       gap: t.vars.size.baseSpacings.sp1,
       minWidth: 0
-    }, l = {
+    }, a = {
       "& > *": {
         width: "100%",
         maxWidth: "100%",
         minWidth: 0
       }
-    }, n = {
+    }, d = {
       ...e?.disabled && {
         pointerEvents: "none",
         opacity: 0.5
       }
     };
     return e?.layout === "verticalGrow" ? {
-      ...r,
+      ...o,
       width: "100%",
       maxWidth: "100%",
-      flex: `1 1 ${d}px`,
+      flex: `1 1 ${m}px`,
       alignSelf: "stretch",
-      minHeight: d,
-      ...l,
+      minHeight: m,
+      ...a,
       "& > .M4LPropertyValue-root": {
         width: "100%",
         maxWidth: "100%",
@@ -142,21 +237,26 @@ const h = (t) => ({
         minHeight: 0,
         whiteSpace: "normal"
       },
-      ...n
-    } : c ? {
-      ...r,
+      ...d
+    } : n ? {
+      ...o,
       width: "100%",
       maxWidth: "100%",
       flex: "0 0 auto",
       alignSelf: "stretch",
-      ...l,
-      ...n
+      ...a,
+      ...d
     } : {
+      ...o,
+      width: "100%",
+      maxWidth: "100%",
+      alignSelf: "start",
       ...r,
-      alignSelf: "flex-start",
       ...a,
-      ...l,
-      ...n
+      ...d,
+      "&&& .M4LPropertyValue-name": {
+        width: "fit-content"
+      }
     };
   },
   /**
@@ -247,5 +347,5 @@ const h = (t) => ({
   })
 };
 export {
-  g as componentStyles
+  T as componentStyles
 };

package/components/DynamicForm/helpers/resolveAdaptiveFieldLayout/resolveAdaptiveFieldLayout.d.ts

@@ -13,14 +13,38 @@ export interface ResolveAdaptiveFieldLayoutParams extends EstimateLabelWidthPxPa
 export interface AdaptiveFieldLayout {
     controlWidth?: number;
     estimatedLabelWidth: number;
+    gridColumnSpan: number;
     isFullWidth: boolean;
     labelWidth?: number;
     requestedSemanticWidth?: SemanticWidthOptions | null;
     wrapperWidth?: number;
 }
+export interface SemanticGridColumnBreakpoint {
+    columns: number;
+    maxContainerWidth: number;
+}
+export declare const DYNAMIC_FORM_SEMANTIC_GRID_BASE_COLUMN_WIDTH = 37;
+export declare const DYNAMIC_FORM_SEMANTIC_GRID_COLUMN_GAP = 16;
+export declare const DYNAMIC_FORM_SEMANTIC_GRID_MAX_COLUMNS = 24;
+export declare const DYNAMIC_FORM_SEMANTIC_GRID_SPAN_PRECISION_THRESHOLD = 0.06;
+export declare const DYNAMIC_FORM_SEMANTIC_GRID_COLUMN_BREAKPOINTS: readonly SemanticGridColumnBreakpoint[];
 /** Estimate the visual width needed by a single-line DynamicForm label. */
 export declare function estimateLabelWidthPx(params: EstimateLabelWidthPxParams): number;
 /** Resolve wrapper, label, and control widths without replacing the backend semantic width. */
 export declare function resolveAdaptiveFieldLayout(params: ResolveAdaptiveFieldLayoutParams): AdaptiveFieldLayout;
+/** Resolve the precise adaptive wrapper width allowed for a DynamicForm field. */
+export declare function resolveAdaptiveFieldLayoutVisualTrackWidth(requiredWidth: number): number | undefined;
+/** Resolve how many semantic grid columns a field needs to contain its visual width. */
+export declare function resolveSemanticGridFieldColumnSpan(wrapperWidth: number, minimumExactWidth?: number): number;
+/** Clamp a field span to the column count available in the current grid breakpoint. */
+export declare function resolveSemanticGridSpanForColumnCount(fieldColumnSpan: number, columnCount: number): number;
+/** Resolve the approximate rendered width of a semantic grid span. */
+export declare function resolveSemanticGridSpanWidth(columnSpan: number): number;
+/** Resolve the rendered width of a semantic grid span for an actual container width. */
+export declare function resolveSemanticGridSpanWidthForContainer(columnSpan: number, columnCount: number, containerWidth: number): number;
+/** Resolve the minimum container width required for a span to contain a field. */
+export declare function resolveSemanticGridContainerWidthForSpan(requiredWidth: number, columnSpan: number, columnCount: number): number;
+/** Resolve the smallest field span that can contain a width in the active container. */
+export declare function resolveSemanticGridSpanForContainerWidth(requiredWidth: number, columnCount: number, containerWidth: number): number;
 export {};
 //# sourceMappingURL=resolveAdaptiveFieldLayout.d.ts.map

package/components/DynamicForm/helpers/resolveAdaptiveFieldLayout/resolveAdaptiveFieldLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resolveAdaptiveFieldLayout.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/DynamicForm/helpers/resolveAdaptiveFieldLayout/resolveAdaptiveFieldLayout.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAEzE,KAAK,uBAAuB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAclD,MAAM,WAAW,0BAA0B;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,uBAAuB,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,gCACf,SAAQ,0BAA0B;IAClC,sBAAsB,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;CACtD;AAED,MAAM,WAAW,mBAAmB;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sBAAsB,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAmCD,2EAA2E;AAC3E,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,0BAA0B,GACjC,MAAM,CAmBR;AAED,+FAA+F;AAC/F,wBAAgB,0BAA0B,CACxC,MAAM,EAAE,gCAAgC,GACvC,mBAAmB,CAiCrB"}
+{"version":3,"file":"resolveAdaptiveFieldLayout.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/DynamicForm/helpers/resolveAdaptiveFieldLayout/resolveAdaptiveFieldLayout.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAEzE,KAAK,uBAAuB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAkClD,MAAM,WAAW,0BAA0B;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,uBAAuB,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,gCACf,SAAQ,0BAA0B;IAClC,sBAAsB,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;CACtD;AAED,MAAM,WAAW,mBAAmB;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sBAAsB,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,4BAA4B;IAC3C,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAwCD,eAAO,MAAM,4CAA4C,KAAK,CAAC;AAC/D,eAAO,MAAM,qCAAqC,KAAK,CAAC;AACxD,eAAO,MAAM,sCAAsC,KAAK,CAAC;AACzD,eAAO,MAAM,mDAAmD,OAAO,CAAC;AACxE,eAAO,MAAM,6CAA6C,EAAE,SAAS,4BAA4B,EAerF,CAAC;AAOb,2EAA2E;AAC3E,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,0BAA0B,GACjC,MAAM,CAsBR;AAED,+FAA+F;AAC/F,wBAAgB,0BAA0B,CACxC,MAAM,EAAE,gCAAgC,GACvC,mBAAmB,CAqDrB;AAED,kFAAkF;AAClF,wBAAgB,0CAA0C,CACxD,aAAa,EAAE,MAAM,GACpB,MAAM,GAAG,SAAS,CAUpB;AAED,wFAAwF;AACxF,wBAAgB,kCAAkC,CAChD,YAAY,EAAE,MAAM,EACpB,iBAAiB,SAAe,GAC/B,MAAM,CAgCR;AAED,uFAAuF;AACvF,wBAAgB,qCAAqC,CACnD,eAAe,EAAE,MAAM,EACvB,WAAW,EAAE,MAAM,GAClB,MAAM,CAKR;AAED,sEAAsE;AACtE,wBAAgB,4BAA4B,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAOvE;AAED,wFAAwF;AACxF,wBAAgB,wCAAwC,CACtD,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,cAAc,EAAE,MAAM,GACrB,MAAM,CAoBR;AAED,kFAAkF;AAClF,wBAAgB,wCAAwC,CACtD,aAAa,EAAE,MAAM,EACrB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,GAClB,MAAM,CAiBR;AAED,wFAAwF;AACxF,wBAAgB,wCAAwC,CACtD,aAAa,EAAE,MAAM,EACrB,WAAW,EAAE,MAAM,EACnB,cAAc,EAAE,MAAM,GACrB,MAAM,CAoBR"}

package/components/DynamicForm/helpers/resolveAdaptiveFieldLayout/resolveAdaptiveFieldLayout.js

@@ -1,64 +1,174 @@
-import { isFullRowSemanticWidth as c, resolveSemanticWidthPx as f } from "../../../PropertyValue/semanticWidth.js";
-const p = {
+import { isFullRowSemanticWidth as A, resolveSemanticWidthPx as p } from "../../../PropertyValue/semanticWidth.js";
+const m = {
+  narrow: 0.28,
+  normal: 0.6,
+  punctuation: 0.28,
+  space: 0.26,
+  thin: 0.38,
+  uppercase: 0.68,
+  wide: 0.86
+}, W = {
   small: {
-    buffer: 12,
-    helperIcon: 24,
-    mandatoryMarker: 8,
-    narrow: 4,
-    normal: 7,
-    punctuation: 3,
-    space: 4,
-    uppercase: 8,
-    wide: 10
+    fontSize: 10,
+    helperIcon: 18,
+    letterSpacing: 0.8,
+    mandatoryMarker: 9,
+    safetyBuffer: 2
   },
   medium: {
-    buffer: 16,
-    helperIcon: 28,
+    fontSize: 11,
+    helperIcon: 20,
+    letterSpacing: 0.8,
     mandatoryMarker: 10,
-    narrow: 5,
-    normal: 8,
-    punctuation: 4,
-    space: 5,
-    uppercase: 9,
-    wide: 11
+    safetyBuffer: 2
   }
-}, m = 796, W = "ijlI1|!", A = ".,;:", h = "mwMW@%#&";
-function R(t) {
-  const { hasHelperMessage: e = !1, label: r, mandatory: n = !1, size: i, symbol: u } = t, o = p[i], a = typeof u == "string" && u.trim() !== "" ? `${r} (${u.trim()})` : r, l = Array.from(a).reduce((s, d) => s + I(d, o), 0);
+}, d = 796, c = 37, s = 16, l = 24, I = 0.06, L = [
+  { columns: 22, maxContainerWidth: 1255 },
+  { columns: 20, maxContainerWidth: 1149 },
+  { columns: 18, maxContainerWidth: 1043 },
+  { columns: 16, maxContainerWidth: 937 },
+  { columns: 14, maxContainerWidth: 831 },
+  { columns: 12, maxContainerWidth: 725 },
+  { columns: 10, maxContainerWidth: 619 },
+  { columns: 8, maxContainerWidth: 513 },
+  { columns: 6, maxContainerWidth: 407 },
+  { columns: 4, maxContainerWidth: 359 },
+  { columns: 3, maxContainerWidth: 343 },
+  { columns: 2, maxContainerWidth: 335 },
+  { columns: 1, maxContainerWidth: 319 }
+], R = "ijlI|!", N = ".,;:'", x = "ftr()[]{}/\\", E = "mwMW@%#&";
+function F(n) {
+  const { hasHelperMessage: t = !1, label: i, mandatory: e = !1, size: o, symbol: r } = n, u = W[o], f = typeof r == "string" && r.trim() !== "" ? `${i} (${r.trim()})` : i, C = Array.from(f), h = C.reduce((M, _) => M + O(_), 0) * u.fontSize + C.length * u.letterSpacing;
   return Math.ceil(
-    l + o.buffer + (n ? o.mandatoryMarker : 0) + (e ? o.helperIcon : 0)
+    h + u.safetyBuffer + (e ? u.mandatoryMarker : 0) + (t ? u.helperIcon : 0)
   );
 }
-function _(t) {
-  const { requestedSemanticWidth: e } = t, r = R(t), n = f(e);
-  if (c(e))
+function P(n) {
+  const { requestedSemanticWidth: t } = n, i = F(n), e = p(t);
+  if (A(t))
     return {
-      controlWidth: n,
-      estimatedLabelWidth: r,
+      controlWidth: e,
+      estimatedLabelWidth: i,
+      gridColumnSpan: l,
       isFullWidth: !0,
-      requestedSemanticWidth: e
+      requestedSemanticWidth: t
     };
-  if (!n || r > m)
+  if (!e || i > d)
     return {
-      controlWidth: n,
-      estimatedLabelWidth: r,
+      controlWidth: e,
+      estimatedLabelWidth: i,
+      gridColumnSpan: l,
       isFullWidth: !0,
-      requestedSemanticWidth: e
+      requestedSemanticWidth: t
     };
-  const i = Math.max(n, r);
-  return {
-    controlWidth: n,
-    estimatedLabelWidth: r,
+  const o = Math.max(e, i), r = i <= e ? e : T(o);
+  return r ? {
+    controlWidth: e,
+    estimatedLabelWidth: i,
+    gridColumnSpan: D(
+      r,
+      e
+    ),
     isFullWidth: !1,
-    labelWidth: i,
-    requestedSemanticWidth: e,
-    wrapperWidth: i
+    labelWidth: r,
+    requestedSemanticWidth: t,
+    wrapperWidth: r
+  } : {
+    controlWidth: e,
+    estimatedLabelWidth: i,
+    gridColumnSpan: l,
+    isFullWidth: !0,
+    requestedSemanticWidth: t
   };
 }
-function I(t, e) {
-  return t.trim() === "" ? e.space : W.includes(t) ? e.narrow : A.includes(t) ? e.punctuation : h.includes(t) ? e.wide : t >= "A" && t <= "Z" ? e.uppercase : e.normal;
+function T(n) {
+  if (!(!Number.isFinite(n) || n <= 0) && !(n > d))
+    return Math.ceil(n);
+}
+function D(n, t = n) {
+  if (!Number.isFinite(n))
+    return l;
+  const i = a(
+    Math.ceil(
+      (n + s) / (c + s)
+    )
+  ), e = Number.isFinite(t) ? t : n, o = a(
+    Math.ceil(
+      (e + s) / (c + s)
+    )
+  ), r = Math.max(o, i - 1);
+  return r < i && v(n, r) ? r : i;
+}
+function y(n, t) {
+  return Math.min(
+    a(n),
+    a(t)
+  );
+}
+function S(n) {
+  const t = a(n);
+  return t * c + (t - 1) * s;
+}
+function G(n, t, i) {
+  const e = a(t), o = Math.min(
+    a(n),
+    e
+  );
+  if (!Number.isFinite(i) || i <= 0)
+    return S(o);
+  const r = (e - 1) * s, u = Math.max(0, i - r) / e;
+  return o * u + (o - 1) * s;
+}
+function z(n, t, i) {
+  if (!Number.isFinite(n) || n <= 0)
+    return 0;
+  const e = a(i), o = Math.min(
+    a(t),
+    e
+  );
+  return Math.ceil(
+    (e * n + (e - o) * s) / o
+  );
+}
+function g(n, t, i) {
+  if (!Number.isFinite(n))
+    return a(t);
+  const e = a(t);
+  for (let o = 1; o <= e; o += 1)
+    if (G(
+      o,
+      e,
+      i
+    ) >= n)
+      return o;
+  return e;
+}
+function a(n) {
+  return Number.isFinite(n) ? Math.min(
+    l,
+    Math.max(1, Math.ceil(n))
+  ) : l;
+}
+function v(n, t) {
+  const i = S(t);
+  return i >= n ? !0 : (n - i) / n <= I;
+}
+function O(n) {
+  return n.trim() === "" ? m.space : R.includes(n) ? m.narrow : N.includes(n) ? m.punctuation : x.includes(n) ? m.thin : E.includes(n) ? m.wide : n >= "A" && n <= "Z" ? m.uppercase : m.normal;
 }
 export {
-  R as estimateLabelWidthPx,
-  _ as resolveAdaptiveFieldLayout
+  c as DYNAMIC_FORM_SEMANTIC_GRID_BASE_COLUMN_WIDTH,
+  L as DYNAMIC_FORM_SEMANTIC_GRID_COLUMN_BREAKPOINTS,
+  s as DYNAMIC_FORM_SEMANTIC_GRID_COLUMN_GAP,
+  l as DYNAMIC_FORM_SEMANTIC_GRID_MAX_COLUMNS,
+  I as DYNAMIC_FORM_SEMANTIC_GRID_SPAN_PRECISION_THRESHOLD,
+  F as estimateLabelWidthPx,
+  P as resolveAdaptiveFieldLayout,
+  T as resolveAdaptiveFieldLayoutVisualTrackWidth,
+  z as resolveSemanticGridContainerWidthForSpan,
+  D as resolveSemanticGridFieldColumnSpan,
+  y as resolveSemanticGridSpanForColumnCount,
+  g as resolveSemanticGridSpanForContainerWidth,
+  S as resolveSemanticGridSpanWidth,
+  G as resolveSemanticGridSpanWidthForContainer
 };

package/components/DynamicForm/subcomponents/DynamicFormContent/DynamicFormContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicFormContent.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/DynamicForm/subcomponents/DynamicFormContent/DynamicFormContent.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EACV,uBAAuB,EAKxB,MAAM,aAAa,CAAC;AAmKrB,eAAO,MAAM,kBAAkB,oHAwK7B,CAAC"}
+{"version":3,"file":"DynamicFormContent.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/DynamicForm/subcomponents/DynamicFormContent/DynamicFormContent.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EACV,uBAAuB,EAKxB,MAAM,aAAa,CAAC;AAoKrB,eAAO,MAAM,kBAAkB,oHAwK7B,CAAC"}

package/components/DynamicForm/subcomponents/DynamicFormContent/DynamicFormContent.js

@@ -1,7 +1,7 @@
-import { jsx as r, jsxs as C } from "@emotion/react/jsx-runtime";
-import { forwardRef as E, useMemo as L, memo as A } from "react";
+import { jsx as r, jsxs as w } from "@emotion/react/jsx-runtime";
+import { forwardRef as E, useMemo as g, memo as L } from "react";
 import R from "clsx";
-import { useModuleDictionary as W, useEnvironment as g } from "@m4l/core";
+import { useModuleDictionary as W, useEnvironment as A } from "@m4l/core";
 import { NotificationCheckCircleFill as O, NotificationWarningFill as T } from "@m4l/icons";
 import { Icon as H } from "@m4l/base";
 import { TEST_PROP_ID as z } from "../../../../test/constants_no_mock.js";
@@ -22,14 +22,14 @@ import { Chip as te } from "../../../Chip/Chip.js";
 const ie = /* @__PURE__ */ new Set([
   "RHFCheckableList"
 ]);
-function le(c) {
-  const t = c.fieldType?.componentId;
+function le(d) {
+  const t = d.fieldType?.componentId;
   return t && ie.has(t) ? "verticalGrow" : "default";
 }
-function ae(c) {
+function ae(d) {
   const t = [];
   let e = [];
-  return c.forEach((o) => {
+  return d.forEach((o) => {
     const a = le(o);
     if (a === "verticalGrow") {
       e.length > 0 && (t.push({
@@ -47,7 +47,7 @@ function ae(c) {
     fields: e
   }), t;
 }
-const b = A(function(t) {
+const b = L(function(t) {
   const {
     field: e,
     currentSize: o,
@@ -55,36 +55,37 @@ const b = A(function(t) {
     fieldFlow: D,
     layout: f,
     readOnly: y = !1
-  } = t, { getLabel: F } = W(), { host_api_remote: h } = g(), s = f === "verticalGrow";
+  } = t, { getLabel: F } = W(), { host_api_remote: h } = A(), n = f === "verticalGrow";
   if (typeof e.name != "string" || e.name.trim() === "")
     return null;
   const S = V(
     e,
     F
-  ), i = j(e, F), n = ee(e), v = oe(e), d = B({
+  ), i = j(e, F), s = ee(e), v = oe(e), m = B({
     hasHelperMessage: !!S,
     label: i,
-    mandatory: n,
+    mandatory: s,
     requestedSemanticWidth: e.metadata?.semanticWidth,
     size: o,
     symbol: v
-  }), m = re(e, {
+  }), c = re(e, {
     size: o,
     getLabel: F,
     hostApiRemote: h,
     readOnly: y,
     suppressLabel: !0
   });
-  return m ? /* @__PURE__ */ r(
+  return c ? /* @__PURE__ */ r(
     X,
     {
       ownerState: {
         readOnly: y,
         fieldFlow: D,
+        gridColumnSpan: m.gridColumnSpan,
         layout: f,
-        isFullWidth: d.isFullWidth,
+        isFullWidth: m.isFullWidth,
         semanticWidth: e.metadata?.semanticWidth,
-        wrapperWidth: d.wrapperWidth
+        wrapperWidth: m.wrapperWidth
       },
       className: R(
         a,
@@ -93,23 +94,23 @@ const b = A(function(t) {
       children: /* @__PURE__ */ r(
         x,
         {
-          controlWidth: d.controlWidth,
+          controlWidth: m.controlWidth,
           labelOverflow: "visible",
-          labelWidth: d.labelWidth,
+          labelWidth: m.labelWidth,
           property: i,
-          value: m,
+          value: c,
           isForm: !0,
-          mandatory: n,
+          mandatory: s,
           helperMessage: S,
           symbol: v,
-          valueHeight: s ? "100%" : void 0
+          valueHeight: n ? "100%" : void 0
         }
       )
     }
   ) : null;
 });
 b.displayName = "DynamicFormFieldRow";
-const se = E((c, t) => {
+const ne = E((d, t) => {
   const {
     data: e,
     currentSize: o,
@@ -119,17 +120,17 @@ const se = E((c, t) => {
     coupled: y = !1,
     actionFormIntroProps: F,
     renderActions: h,
-    readOnly: s = !1,
+    readOnly: n = !1,
     suppressFormHeader: S = !0,
     submitFeedbackStatus: i,
-    fieldFlow: n = "responsiveWrap"
-  } = c, { getLabel: v } = W(), { visibleFields: d } = P(e), m = S ? null : Z(e.form), I = ae(d), w = L(
+    fieldFlow: s = "responsiveWrap"
+  } = d, { getLabel: v } = W(), { visibleFields: m } = P(e), c = S ? null : Z(e.form), I = ae(m), C = g(
     () => ({
       size: o,
-      readOnly: s,
-      fieldFlow: n
+      readOnly: n,
+      fieldFlow: s
     }),
-    [o, n, s]
+    [o, s, n]
   ), M = !y && i ? /* @__PURE__ */ r(U, { children: /* @__PURE__ */ r(
     te,
     {
@@ -148,16 +149,16 @@ const se = E((c, t) => {
       opacity: !0
     }
   ) }) : null;
-  return /* @__PURE__ */ C(
+  return /* @__PURE__ */ w(
     Y,
     {
       ref: t,
-      ownerState: w,
+      ownerState: C,
       className: R(u.contentRoot),
       ...typeof f == "string" ? { "data-meta": f } : {},
       ...process.env.NODE_ENV !== "production" ? { [z]: D } : {},
       children: [
-        m?.title && /* @__PURE__ */ C(
+        c?.title && /* @__PURE__ */ w(
           q,
           {
             className: u.formHeader,
@@ -169,10 +170,10 @@ const se = E((c, t) => {
                   component: "h2",
                   size: o,
                   variant: "paragraphDens",
-                  children: m.title
+                  children: c.title
                 }
               ),
-              m.description && /* @__PURE__ */ r(
+              c.description && /* @__PURE__ */ r(
                 $,
                 {
                   className: u.formDescription,
@@ -180,7 +181,7 @@ const se = E((c, t) => {
                   component: "p",
                   size: o,
                   variant: "bodyStandard",
-                  children: m.description
+                  children: c.description
                 }
               )
             ]
@@ -196,9 +197,9 @@ const se = E((c, t) => {
                 field: l,
                 currentSize: o,
                 fieldWrapperClassName: a,
-                fieldFlow: n,
+                fieldFlow: s,
                 layout: p.layout,
-                readOnly: s
+                readOnly: n
               },
               l.id
             ) : null;
@@ -207,7 +208,7 @@ const se = E((c, t) => {
           return /* @__PURE__ */ r(
             J,
             {
-              ownerState: w,
+              ownerState: C,
               className: u.fieldsFlow,
               children: p.fields.map((l) => /* @__PURE__ */ r(
                 b,
@@ -215,9 +216,9 @@ const se = E((c, t) => {
                   field: l,
                   currentSize: o,
                   fieldWrapperClassName: a,
-                  fieldFlow: n,
+                  fieldFlow: s,
                   layout: p.layout,
-                  readOnly: s
+                  readOnly: n
                 },
                 l.id
               ))
@@ -225,7 +226,7 @@ const se = E((c, t) => {
             `flow-${_}`
           );
         }),
-        !y && !s && /* @__PURE__ */ r(Q, { children: /* @__PURE__ */ r(G, { children: h ? h() : /* @__PURE__ */ r(
+        !y && !n && /* @__PURE__ */ r(Q, { children: /* @__PURE__ */ r(G, { children: h ? h() : /* @__PURE__ */ r(
           k,
           {
             size: o,
@@ -237,7 +238,7 @@ const se = E((c, t) => {
     }
   );
 });
-se.displayName = "DynamicFormContent";
+ne.displayName = "DynamicFormContent";
 export {
-  se as DynamicFormContent
+  ne as DynamicFormContent
 };

package/components/DynamicForm/types.d.ts

@@ -436,14 +436,14 @@ export type DynamicFormFieldFlow = 'responsiveWrap' | 'verticalStack';
 export type FieldDefaultValue = FieldCurrentValue;
 /**
  * Optional field-level metadata carried inside each field entry.
- * Drives layout hints resolved by DynamicFormContent (e.g. flex-wrap item sizing).
+ * Drives layout hints resolved by DynamicFormContent (e.g. semantic grid item sizing).
  */
 export interface FieldMetadata {
     /**
-     * Semantic layout width for the field wrapper in the form flex-wrap container.
+     * Semantic layout width for the field wrapper in the form semantic grid.
      * Maps to the same `SemanticWidthOptions` used by `PropertyValue`, so field wrappers
-     * share the same preferred widths as ContainerFlow-style semantic items while still
-     * allowing rows to redistribute leftover space more naturally.
+     * share the same preferred widths as ContainerFlow-style semantic items while letting
+     * DynamicForm resolve the smallest grid span that can contain the field.
      * When `null` or absent the field wrapper spans the full available width.
      */
     semanticWidth?: SemanticWidthOptions;
@@ -515,9 +515,9 @@ export interface Field {
     description: string | null;
     /**
      * Optional field-level metadata from the API (e.g. `{ semanticWidth: 'bigName' }`).
-     * `metadata.semanticWidth` drives the preferred flex width in `DynamicFormContent`,
-     * using the same semantic catalog as `PropertyValue` while allowing rows to redistribute
-     * remaining space more naturally.
+     * `metadata.semanticWidth` drives the preferred semantic grid span in
+     * `DynamicFormContent`, using the same semantic catalog as `PropertyValue` while
+     * keeping the rendered control width aligned with the backend contract.
      * When `null` or absent the field wrapper defaults to full available width.
      */
     metadata?: FieldMetadata | null;
@@ -665,9 +665,9 @@ interface DynamicFormPropsBase {
      */
     fieldWrapperClassName?: string;
     /**
-     * Field layout policy. `responsiveWrap` keeps semantic widths and row wrapping;
-     * `verticalStack` stacks fields full-width and lets growable fields consume the
-     * available height. Defaults to `responsiveWrap`.
+     * Field layout policy. `responsiveWrap` composes semantic widths on the responsive
+     * form grid; `verticalStack` stacks fields full-width and lets growable fields
+     * consume the available height. Defaults to `responsiveWrap`.
      */
     fieldFlow?: DynamicFormFieldFlow;
     /**

package/components/Label/Label.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/Label/Label.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAU3D,eAAO,MAAM,WAAW,EAAE,WA8IzB,CAAC"}
+{"version":3,"file":"Label.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/Label/Label.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAU3D,eAAO,MAAM,WAAW,EAAE,WAoJzB,CAAC"}

package/components/Label/Label.styles.js

@@ -11,7 +11,13 @@ const n = {
    * @returns {object} - Los estilos aplicados al root del Label.
    */
   root: ({ theme: e, ownerState: s }) => ({
-    width: "100%",
+    // `fit-content` instead of `100%`: the root must contribute a real intrinsic width so the
+    // layers above it can size a field from its content. Stretching to the parent made the label
+    // width unmeasurable, which forced consumers to guess it.
+    // `fit-content` en vez de `100%`: el root debe aportar un ancho intrínseco real para que las
+    // capas superiores puedan dimensionar un campo a partir de su contenido. Estirarse al padre
+    // hacía que el ancho del label no fuera medible y obligaba a los consumidores a estimarlo.
+    width: "fit-content",
     display: "flex",
     flexDirection: "row",
     alignItems: "center",

package/components/PropertyValue/PropertyValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PropertyValue.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/PropertyValue/PropertyValue.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAA2B,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAwB3E;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,oDA2JtD"}
+{"version":3,"file":"PropertyValue.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/PropertyValue/PropertyValue.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAA2B,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAyB3E;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,oDA2JtD"}

package/components/PropertyValue/PropertyValue.js

@@ -2,59 +2,59 @@ import { jsxs as y, jsx as t } from "@emotion/react/jsx-runtime";
 import f, { useId as D } from "react";
 import W from "clsx";
 import { TEST_PROP_ID as x } from "../../test/constants_no_mock.js";
-import { TEST_PROPS_DATA as F, COMPONENT_PREFIX as M, PROPERTY_VALUE_KEY_COMPONENT as s } from "./constants.js";
-import { getNameDataTestId as w, getPropDataTestId as $ } from "../../test/getNameDataTestId.js";
-import { Icon as j } from "@m4l/base";
-import { PropertyValueRootStyled as q, ContainerStartAdornmentStyled as L, ContainerPropertyAndValueStyled as Y, NameStyled as G, ValueStyled as H, TypographyValueStyled as J } from "./slots/PropertyValueSlots.js";
-import { getComponentSlotRoot as h } from "../../utils/getComponentSlotRoot.js";
+import { PROPERTY_VALUE_CLASSNAMES as M, TEST_PROPS_DATA as F, COMPONENT_PREFIX as L, PROPERTY_VALUE_KEY_COMPONENT as s } from "./constants.js";
+import { getNameDataTestId as w, getPropDataTestId as Y } from "../../test/getNameDataTestId.js";
+import { Icon as $ } from "@m4l/base";
+import { PropertyValueRootStyled as j, ContainerStartAdornmentStyled as q, ContainerPropertyAndValueStyled as U, NameStyled as G, ValueStyled as H, TypographyValueStyled as J } from "./slots/PropertyValueSlots.js";
+import { getComponentSlotRoot as S } from "../../utils/getComponentSlotRoot.js";
 import { getNullGuard as K } from "../../utils/getNullGuard.js";
-import { Label as U } from "../Label/Label.js";
-import { useComponentSize as X } from "@m4l/graphics";
-function se(S) {
+import { Label as X } from "../Label/Label.js";
+import { useComponentSize as k } from "@m4l/graphics";
+function me(h) {
   const {
     property: l,
     startAdornment: o,
     value: e,
-    className: v,
+    className: E,
     isForm: n,
     labelOverflow: m,
     labelWidth: P,
     dataTestId: p = "",
     disabled: u = !1,
-    controlWidth: E,
-    mandatory: N,
+    controlWidth: N,
+    mandatory: v,
     mandatoryMessage: T,
     helperMessage: g,
     symbol: I,
     semanticWidth: a = "fullWidth",
-    propertyWidth: b = 200,
-    size: O = "medium",
+    propertyWidth: O = 200,
+    size: V = "medium",
     direction: c,
-    valueHeight: V,
-    iconVariant: _ = "outlined",
+    valueHeight: _,
+    iconVariant: b = "outlined",
     iconColor: R = "primary",
-    borderStyle: z = "none"
-  } = S, d = `property-value-${D()}`, { currentSize: i } = X(O), r = {
-    propertyWidth: b,
-    controlWidth: E,
+    borderStyle: A = "none"
+  } = h, d = `property-value-${D()}`, { currentSize: i } = k(V), r = {
+    propertyWidth: O,
+    controlWidth: N,
     disabled: n && u ? u : !1,
     isForm: !!n,
     labelOverflow: m,
     labelWidth: P,
     semanticWidth: a,
-    valueHeight: V,
+    valueHeight: _,
     size: i,
     direction: n && c === void 0 ? "column" : c ?? "row",
-    iconVariant: _,
+    iconVariant: b,
     iconColor: R,
-    borderStyle: z
+    borderStyle: A
   }, C = () => o ? typeof o == "string" ? /* @__PURE__ */ t(
-    j,
+    $,
     {
       src: o,
       color: "text.secondary"
     }
-  ) : o : null, A = () => typeof e == "string" || typeof e == "number" || e === null || e === void 0 ? /* @__PURE__ */ t(
+  ) : o : null, z = () => typeof e == "string" || typeof e == "number" || e === null || e === void 0 ? /* @__PURE__ */ t(
     J,
     {
       id: d,
@@ -68,48 +68,48 @@ function se(S) {
     { size: i, id: d }
   ) : e;
   return /* @__PURE__ */ y(
-    q,
+    j,
     {
       role: n ? "property-value-form-role" : "property-value-role",
       className: W(
-        h(s),
-        a && `${h(s)}-semanticWidth-${a}`,
-        v
+        S(s),
+        a && `${S(s)}-semanticWidth-${a}`,
+        E
       ),
-      ...$(s, "root", p),
+      ...Y(s, "root", p),
       ownerState: r,
       ...process.env.NODE_ENV !== "production" ? {
         [F]: JSON.stringify([
           { property: !!l, value: !!e }
         ]),
         [x]: w(
-          M,
+          L,
           "root",
           p
         )
       } : {},
       children: [
-        o && /* @__PURE__ */ t(L, { ownerState: r, children: C() }),
-        /* @__PURE__ */ y(Y, { ownerState: r, children: [
-          /* @__PURE__ */ t(G, { ownerState: r, children: l && /* @__PURE__ */ t(
-            U,
+        o && /* @__PURE__ */ t(q, { ownerState: r, children: C() }),
+        /* @__PURE__ */ y(U, { ownerState: r, children: [
+          /* @__PURE__ */ t(G, { ownerState: r, className: M.name, children: l && /* @__PURE__ */ t(
+            X,
             {
               size: i,
               label: l,
               labelOverflow: m,
-              mandatory: N,
+              mandatory: v,
               mandatoryMessage: T,
               helperMessage: g,
               symbol: I,
               htmlFor: d
             }
           ) }),
-          /* @__PURE__ */ t(H, { role: "property-value-value-role", ownerState: r, children: A() })
+          /* @__PURE__ */ t(H, { role: "property-value-value-role", ownerState: r, children: z() })
         ] })
       ]
     }
   );
 }
 export {
-  se as PropertyValue
+  me as PropertyValue
 };

package/components/PropertyValue/PropertyValue.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PropertyValue.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/PropertyValue/PropertyValue.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAU9C,eAAO,MAAM,mBAAmB,EAAE,mBAsQjC,CAAC"}
+{"version":3,"file":"PropertyValue.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/PropertyValue/PropertyValue.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAU9C,eAAO,MAAM,mBAAmB,EAAE,mBA0QjC,CAAC"}

package/components/PropertyValue/PropertyValue.styles.js

@@ -6,16 +6,16 @@ const l = "container", h = {
   /**
    * Property Value Root Styles
    */
-  Root: ({ theme: r, ownerState: i }) => {
-    const o = (t) => ({
-      maxWidth: `${t}px`,
-      minWidth: `${t}px`,
-      [`@container ${l} (max-width: ${t - 1}px)`]: {
+  Root: ({ theme: o, ownerState: i }) => {
+    const r = (a) => ({
+      maxWidth: `${a}px`,
+      minWidth: `${a}px`,
+      [`@container ${l} (max-width: ${a - 1}px)`]: {
         minWidth: "100px",
         maxWidth: "100%",
         width: "100%"
       }
-    }), e = p(i?.semanticWidth), a = i?.semanticWidth && typeof e == "number" ? o(e) : {}, c = i?.semanticWidth && b(i.semanticWidth) ? {
+    }), e = p(i?.semanticWidth), t = i?.semanticWidth && typeof e == "number" ? r(e) : {}, c = i?.semanticWidth && b(i.semanticWidth) ? {
       maxWidth: "100%",
       width: "100%",
       minWidth: i.semanticWidth === "bigDescription" ? "100px" : "0"
@@ -27,18 +27,18 @@ const l = "container", h = {
       flexDirection: "row",
       justifyContent: "flex-start",
       alignItems: "center",
-      gap: r.vars.size.baseSpacings.sp2,
+      gap: o.vars.size.baseSpacings.sp2,
       width: i?.semanticWidth ? "auto" : "200px",
       height: i?.valueHeight ? i?.valueHeight : "auto",
-      color: r.vars.palette.text.primary,
+      color: o.vars.palette.text.primary,
       /* [`@container ${CONTAINER_QUERY_NAME} (min-width: 0px) and (max-width: 400px)`]: {
         flexDirection: 'column',
       }, */
-      ...r.generalSettings.isMobile && {
+      ...o.generalSettings.isMobile && {
         flexDirection: "column"
       },
       ...i?.borderStyle !== "none" && {
-        paddingBottom: r.vars.size.baseSpacings.sp2
+        paddingBottom: o.vars.size.baseSpacings.sp2
       },
       // Estilos para borderStyle
       ...i?.borderStyle === "dashed" && {
@@ -56,8 +56,8 @@ const l = "container", h = {
           width: "100%",
           backgroundImage: `repeating-linear-gradient(
             to right,
-            ${r.vars.palette.border.secondary} 10px,
-            ${r.vars.palette.border.secondary} 20px,
+            ${o.vars.palette.border.secondary} 10px,
+            ${o.vars.palette.border.secondary} 20px,
             transparent 20px,
             transparent 32px
           )`,
@@ -70,50 +70,54 @@ const l = "container", h = {
         borderTop: 0,
         borderLeft: 0,
         borderRight: 0,
-        borderBottom: r.vars.size.borderStroke.container,
-        borderColor: r.vars.palette.border.secondary,
+        borderBottom: o.vars.size.borderStroke.container,
+        borderColor: o.vars.palette.border.secondary,
         borderStyle: "solid"
       },
       ...i?.borderStyle === "none" && {
         border: "unset"
       },
-      minHeight: r.vars.size.baseSpacings.sp5,
-      ...a,
+      minHeight: o.vars.size.baseSpacings.sp5,
+      ...t,
       ...c
     };
   },
   /**
    * Property Styles
    */
-  name: ({ theme: r, ownerState: i }) => {
-    const o = typeof i?.labelWidth == "number" ? `${i.labelWidth}px` : i?.labelWidth;
+  name: ({ theme: o, ownerState: i }) => {
+    const r = typeof i?.labelWidth == "number" ? `${i.labelWidth}px` : i?.labelWidth;
     return {
       display: "flex",
       alignItems: "center",
-      fontSize: r.typography.body2.fontSize,
-      color: r.vars.palette.text.primary,
-      gap: r.vars.size.baseSpacings.sp1,
+      fontSize: o.typography.body2.fontSize,
+      color: o.vars.palette.text.primary,
+      gap: o.vars.size.baseSpacings.sp1,
       overflow: i?.labelOverflow === "visible" ? "visible" : "hidden",
-      width: o ?? "100%"
+      // The name slot hugs its content instead of stretching, so the rendered label width is the
+      // real one rather than whatever the consumer estimated. `labelWidth` survives as the
+      // ceiling: it still clamps the slot, it just no longer dictates its width.
+      maxWidth: r ?? "100%",
+      width: "fit-content"
     };
   },
   /**
    * Value Styles (Form and No Form Combined)
    */
-  value: ({ theme: r, ownerState: i }) => {
-    const o = typeof i?.controlWidth == "number" ? `${i.controlWidth}px` : void 0;
+  value: ({ theme: o, ownerState: i }) => {
+    const r = typeof i?.controlWidth == "number" ? `${i.controlWidth}px` : void 0;
     return {
-      width: o ?? (i?.direction === "column" ? "100%" : "fit-content"),
+      width: r ?? (i?.direction === "column" ? "100%" : "fit-content"),
       display: "flex",
       justifyContent: "flex-start",
       alignItems: "flex-start",
       height: i?.valueHeight ? i?.valueHeight : "auto",
       whiteSpace: "nowrap",
       ...i?.isForm && {
-        gap: r.vars.size.baseSpacings["sp0-5"],
+        gap: o.vars.size.baseSpacings["sp0-5"],
         flexDirection: "column"
       },
-      ...o && {
+      ...r && {
         maxWidth: "100%",
         "& > *": {
           width: "100%",
@@ -126,43 +130,43 @@ const l = "container", h = {
   /**
    * Container Start Adornment Styles
    */
-  containerStartAdornment: ({ theme: r, ownerState: i }) => {
-    const o = i?.iconColor === "text.primary" || i?.iconColor === "text.secondary" || i?.iconColor === "text.disabled", e = o ? n(r.vars.palette, String(i?.iconColor), r.vars.palette.text.primary) : n(r.vars.palette.chips, String(i?.iconColor), r.vars.palette.chips.primary)?.contained;
+  containerStartAdornment: ({ theme: o, ownerState: i }) => {
+    const r = i?.iconColor === "text.primary" || i?.iconColor === "text.secondary" || i?.iconColor === "text.disabled", e = r ? n(o.vars.palette, String(i?.iconColor), o.vars.palette.text.primary) : n(o.vars.palette.chips, String(i?.iconColor), o.vars.palette.chips.primary)?.contained;
     return {
       "&&&": {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
         overflow: "hidden",
-        borderRadius: r.vars.size.borderRadius["r1-5"],
+        borderRadius: o.vars.size.borderRadius["r1-5"],
         ...d(
-          r,
+          o,
           i?.size || "medium",
           "base",
-          (a) => ({
-            height: `calc(${a} + ${r.vars.size.baseSpacings.sp2})`,
-            width: `calc(${a} + ${r.vars.size.baseSpacings.sp2})`,
-            minHeight: `calc(${a} + ${r.vars.size.baseSpacings.sp2})`,
-            minWidth: `calc(${a} + ${r.vars.size.baseSpacings.sp2})`
+          (t) => ({
+            height: `calc(${t} + ${o.vars.size.baseSpacings.sp2})`,
+            width: `calc(${t} + ${o.vars.size.baseSpacings.sp2})`,
+            minHeight: `calc(${t} + ${o.vars.size.baseSpacings.sp2})`,
+            minWidth: `calc(${t} + ${o.vars.size.baseSpacings.sp2})`
           })
         ),
         // variente de icono en modalidad outlined o containedOpacity
         ...(i?.iconVariant === "containedOpacity" || i?.iconVariant === "outlined") && {
           ...i?.iconVariant === "outlined" && {
-            border: r.vars.size.borderStroke.container,
-            borderColor: o ? r.vars.palette.border.disabled : e?.backgroundColor,
+            border: o.vars.size.borderStroke.container,
+            borderColor: r ? o.vars.palette.border.disabled : e?.backgroundColor,
             backgroundColor: "transparent"
           },
           ...i?.iconVariant === "containedOpacity" && {
-            backgroundColor: o ? r.vars.palette.border.disabled : e?.backgroundColor
+            backgroundColor: r ? o.vars.palette.border.disabled : e?.backgroundColor
           },
           // icon mask strategy
           "& .M4LIcon-icon": {
-            backgroundColor: o ? e : e?.color
+            backgroundColor: r ? e : e?.color
           },
           // 🧪 Experimental m4l/icons strategy
           [s]: {
-            fill: o ? e : e?.color,
+            fill: r ? e : e?.color,
             stroke: "none"
           }
         },
@@ -170,11 +174,11 @@ const l = "container", h = {
           backgroundColor: "transparent",
           // icon mask strategy
           "& .M4LIcon-icon": {
-            backgroundColor: o ? e : e?.color
+            backgroundColor: r ? e : e?.color
           },
           // 🧪 Experimental m4l/icons strategy
           [s]: {
-            fill: o ? e : e?.color,
+            fill: r ? e : e?.color,
             stroke: "none"
           }
         }
@@ -184,31 +188,31 @@ const l = "container", h = {
   /**
    * Container Property And Value Styles
    */
-  containerPropertyAndValue: ({ theme: r, ownerState: i }) => ({
+  containerPropertyAndValue: ({ theme: o, ownerState: i }) => ({
     display: "flex",
     justifyContent: "space-between",
     overflow: i?.labelOverflow === "visible" ? "visible" : "hidden",
     flexDirection: i?.direction || "row",
-    borderColor: r.vars.palette.border.secondary,
+    borderColor: o.vars.palette.border.secondary,
     width: "100%",
     height: i?.valueHeight ? i?.valueHeight : "auto",
     "&&& .M4LLabel-root": {
       width: "auto"
     },
     ...i?.direction === "column" ? {
-      gap: r.vars.size.baseSpacings["sp0-5"],
+      gap: o.vars.size.baseSpacings["sp0-5"],
       alignItems: "flex-start"
     } : {
-      gap: r.vars.size.baseSpacings.sp4,
+      gap: o.vars.size.baseSpacings.sp4,
       alignItems: "center"
     }
   }),
   /**
    * Typography Value Styles
    */
-  typographyValue: ({ ownerState: r }) => ({
+  typographyValue: ({ ownerState: o }) => ({
     wordBreak: "break-word",
-    whiteSpace: r?.direction === "column" ? "normal" : "nowrap"
+    whiteSpace: o?.direction === "column" ? "normal" : "nowrap"
   })
 };
 export {

package/components/PropertyValue/constants.d.ts

@@ -2,4 +2,5 @@ export declare const COMPONENT_PREFIX = "m4l-property-value";
 export declare const PREFIX_TEST_ATTRIBUTE = "data-testid";
 export declare const TEST_PROPS_DATA = "m4l-property-value-data";
 export declare const PROPERTY_VALUE_KEY_COMPONENT = "M4LPropertyValue";
+export declare const PROPERTY_VALUE_CLASSNAMES: Record<"name" | "value" | "Root" | "containerStartAdornment" | "containerPropertyAndValue" | "typographyValue", string>;
 //# sourceMappingURL=constants.d.ts.map

package/components/PropertyValue/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/PropertyValue/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,uBAAuB,CAAC;AACrD,eAAO,MAAM,qBAAqB,gBAAgB,CAAC;AACnD,eAAO,MAAM,eAAe,4BAA6B,CAAC;AAC1D,eAAO,MAAM,4BAA4B,qBAAqB,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/PropertyValue/constants.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,uBAAuB,CAAC;AACrD,eAAO,MAAM,qBAAqB,gBAAgB,CAAC;AACnD,eAAO,MAAM,eAAe,4BAA6B,CAAC;AAC1D,eAAO,MAAM,4BAA4B,qBAAqB,CAAC;AAE/D,eAAO,MAAM,yBAAyB,yHAGrC,CAAC"}

package/components/PropertyValue/constants.js

@@ -1,6 +1,12 @@
-const P = "m4l-property-value", t = `${P}-data`, E = "M4LPropertyValue";
+import { getComponentClasses as o } from "../../utils/getComponentSlotRoot.js";
+import { PropertyValueSlots as t } from "./slots/PropertyValueEnum.js";
+const r = "m4l-property-value", p = `${r}-data`, P = "M4LPropertyValue", s = o(
+  P,
+  t
+);
 export {
-  P as COMPONENT_PREFIX,
-  E as PROPERTY_VALUE_KEY_COMPONENT,
-  t as TEST_PROPS_DATA
+  r as COMPONENT_PREFIX,
+  s as PROPERTY_VALUE_CLASSNAMES,
+  P as PROPERTY_VALUE_KEY_COMPONENT,
+  p as TEST_PROPS_DATA
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.57.1-beta-hotfix-semantic-width-dynamicform.0",
+  "version": "9.57.1-beta-hotfix-semantic-width-dynamicform.2",
   "publishConfig": {
     "access": "public"
   },
@@ -53,13 +53,13 @@
     "@hookform/resolvers": "2.9.11",
     "nprogress": "0.2.0",
     "react-transition-group": "4.4.5",
-    "react-spinners": "0.13.8",
-    "react-rnd": "10.5.2",
+    "react-dropzone": "14.4.1",
     "@mui/x-date-pickers": "6.20.2",
+    "@tanstack/react-virtual": "3.13.23",
     "react-draggable": "4.5.0",
     "react-color": "2.19.3",
-    "react-dropzone": "14.4.1",
-    "@tanstack/react-virtual": "3.13.23",
+    "react-spinners": "0.13.8",
+    "react-rnd": "10.5.2",
     "chart.js": "4.5.1",
     "chartjs-chart-error-bars": "4.4.5",
     "qrcode.react": "3.2.0",