@astryxdesign/core 0.4.4 → 0.4.5-canary.013e728

package/dist/DateRangeInput/DateRangeInput.js

@@ -15,9 +15,9 @@
  * - /apps/storybook/stories/DateRangeInput.stories.tsx (storybook stories)
  * - /packages/cli/assets/templates/blocks/components/DateRangeInput/ (showcase blocks)
  */
-import { useId, useCallback, useMemo, useOptimistic, useTransition } from 'react';
+import { use, useId, useCallback, useMemo, useOptimistic, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
-import { plainDateFromISO, plainDateToday, plainDateFormat, DATE_FORMAT_SHORT, DATE_FORMAT_SHORT_WITH_YEAR } from "../utils/plainDate.js";
+import { plainDateFromISO, plainDateToday, plainDateFormat, plainDateDiffDays, DATE_FORMAT_SHORT, DATE_FORMAT_SHORT_WITH_YEAR } from "../utils/plainDate.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, sizeVars, radiusVars, spacingVars, typographyVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
 import { Field, InputClearButton, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
@@ -29,10 +29,11 @@ import { useTooltip } from "../Tooltip/index.js";
 import { mergeProps } from "../utils/index.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
+import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
 import { themeProps } from "../utils/themeProps.js";
 import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
 import { stableClassName } from "../naming.js";
-import { useTranslator } from "../i18n/index.js";
+import { useTranslator, InternationalizationContext } from "../i18n/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   iconButton: {
@@ -60,7 +61,7 @@ const styles = {
     kMzoRj: "xc342km",
     ksu8eU: "xng3xce",
     kaIpWk: "xh6dtrn",
-    kWkggS: "xjbqb8w xe9uy6x",
+    kWkggS: "xjbqb8w xoevpu5",
     kMv6JI: "x9ynric",
     kGuDYH: "xcr08ib",
     kLWn49: "x1kq96og",
@@ -73,6 +74,12 @@ const styles = {
     kWkggS: "xgcxg3y",
     kMwMTN: "xqwr325",
     $$css: true
+  },
+  presetButtonDisabled: {
+    kMwMTN: "xnbbluu",
+    kkrTdU: "x1h6gzvc",
+    kWkggS: "xjbqb8w",
+    $$css: true
   }
 };
 const sizeStyles = {
@@ -92,7 +99,7 @@ const sizeStyles = {
     $$css: true
   }
 };
-function formatRangeDisplay(range) {
+function formatRangeDisplay(range, locale) {
   if (!range) {
     return '';
   }
@@ -101,7 +108,7 @@ function formatRangeDisplay(range) {
   const currentYear = plainDateToday().year;
   const sameYear = start.year === end.year && start.year === currentYear;
   const fmt = sameYear ? DATE_FORMAT_SHORT : DATE_FORMAT_SHORT_WITH_YEAR;
-  return `${plainDateFormat(start, fmt)} – ${plainDateFormat(end, fmt)}`;
+  return `${plainDateFormat(start, fmt, locale)} – ${plainDateFormat(end, fmt, locale)}`;
 }
 function isRangeEqual(a, b) {
   if (a === b) {
@@ -112,6 +119,24 @@ function isRangeEqual(a, b) {
   }
   return a.start === b.start && a.end === b.end;
 }
+
+// A preset that would land outside the span bounds is disabled rather than
+// allowed to override them: the cap is authoritative, so an out-of-window
+// preset stays visible (discoverable) but non-committable, mirroring how the
+// calendar disables out-of-window days. Spans count both endpoints.
+function isRangeWithinSpan(range, maxRangeSpan, minRangeSpan) {
+  if (maxRangeSpan == null && minRangeSpan == null) {
+    return true;
+  }
+  const span = Math.abs(plainDateDiffDays(plainDateFromISO(range.start), plainDateFromISO(range.end))) + 1;
+  if (maxRangeSpan != null && span > maxRangeSpan) {
+    return false;
+  }
+  if (minRangeSpan != null && span < minRangeSpan) {
+    return false;
+  }
+  return true;
+}
 /**
  * A date range picker with a button trigger that opens a popover
  * containing a dual-month calendar and optional preset ranges.
@@ -143,6 +168,8 @@ export function DateRangeInput({
   min,
   max,
   dateConstraints,
+  maxRangeSpan,
+  minRangeSpan,
   presets,
   hasClear = true,
   placeholder: placeholderFromProps,
@@ -160,6 +187,13 @@ export function DateRangeInput({
   ...rest
 }) {
   const t = useTranslator();
+  const isEffectivelyRequired = useResolvedRequired({
+    isRequired,
+    isOptional
+  });
+  const {
+    locale
+  } = use(InternationalizationContext);
   const placeholder = placeholderFromProps ?? t('@astryx.dateRangeInput.placeholder');
   const size = useSize(sizeProp, 'md');
   const id = useId();
@@ -195,7 +229,7 @@ export function DateRangeInput({
   // The tooltip variant renders no message box; describe the input by the
   // tooltip's content instead so the status is still announced.
   statusTooltipDescribedBy, showsDisabledMessage ? disabledMessageTooltip.describedBy : null].filter(Boolean).join(' ') || undefined;
-  const displayValue = useMemo(() => formatRangeDisplay(optimisticValue), [optimisticValue]);
+  const displayValue = useMemo(() => formatRangeDisplay(optimisticValue, locale), [optimisticValue, locale]);
   const popover = usePopover({
     dialogLabel: t('@astryx.dateRangeInput.dialogLabel'),
     closeButtonLabel: t('@astryx.dateInput.closeCalendar')
@@ -293,7 +327,7 @@ export function DateRangeInput({
         "aria-disabled": showsDisabledMessage ? 'true' : undefined,
         "aria-label": triggerAriaLabel,
         "aria-describedby": ariaDescribedBy,
-        "aria-required": isRequired === true ? 'true' : undefined,
+        "aria-required": isEffectivelyRequired ? 'true' : undefined,
         "aria-invalid": status?.type === 'error' ? 'true' : undefined,
         "aria-busy": isBusy || undefined,
         "aria-expanded": popover.isOpen,
@@ -336,6 +370,7 @@ export function DateRangeInput({
         children: presets.map(preset => {
           const presetRange = preset.getRange();
           const isActive = isRangeEqual(value, presetRange);
+          const isPresetDisabled = !isRangeWithinSpan(presetRange, maxRangeSpan, minRangeSpan);
           return /*#__PURE__*/_jsx("button", {
             type: "button"
             // These presets are independent action buttons navigated by
@@ -345,8 +380,9 @@ export function DateRangeInput({
             // concept that contradicted the Tab interaction) (forms-5).
             ,
             "aria-current": isActive ? 'true' : undefined,
+            disabled: isPresetDisabled,
             onClick: () => handlePresetClick(preset),
-            ...stylex.props(focusOutlineStyles.focusVisible, styles.presetButton, isActive && styles.presetButtonActive),
+            ...stylex.props(focusOutlineStyles.focusVisible, styles.presetButton, isActive && styles.presetButtonActive, isPresetDisabled && styles.presetButtonDisabled),
             children: preset.label
           }, preset.label);
         })
@@ -357,6 +393,8 @@ export function DateRangeInput({
         min: min,
         max: max,
         dateConstraints: dateConstraints,
+        maxRangeSpan: maxRangeSpan,
+        minRangeSpan: minRangeSpan,
         numberOfMonths: numberOfMonths,
         weekStartsOn: weekStartsOn
       })]

package/dist/DateTimeInput/DateTimeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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"}

package/dist/DateTimeInput/DateTimeInput.js

@@ -15,7 +15,7 @@
  * - /apps/storybook/stories/DateTimeInput.stories.tsx (storybook stories)
  * - /packages/cli/assets/templates/blocks/components/DateTimeInput/ (showcase blocks)
  */
-import { useId, useState, useCallback, useRef, useMemo, useOptimistic, useTransition } from 'react';
+import { use, useId, useState, useCallback, useRef, useMemo, useOptimistic, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, sizeVars, radiusVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
@@ -32,10 +32,11 @@ import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
 import { parseDateInput, parseTimeInput, formatDisplayTime12h, formatDisplayTime24h, formatISOTime, isTimeInRange, adjustTime, isImeKeyEvent, mergeProps, mergeRefs, isFocusDetached } from "../utils/index.js";
 import { plainDateFromISO, plainDateToISO, plainDateFormat, DATE_FORMAT_LONG } from "../utils/plainDate.js";
 import { useAnnounce } from "../hooks/useAnnounce.js";
+import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { themeProps } from "../utils/themeProps.js";
 import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
-import { useTranslator } from "../i18n/index.js";
+import { useTranslator, InternationalizationContext } from "../i18n/index.js";
 
 /** Supported minute increments for arrow-key stepping of the time field. */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -170,6 +171,13 @@ export function DateTimeInput({
   ...rest
 }) {
   const t = useTranslator();
+  const isEffectivelyRequired = useResolvedRequired({
+    isRequired,
+    isOptional
+  });
+  const {
+    locale
+  } = use(InternationalizationContext);
   // Speaks arrow-key stepping results through the persistent live regions:
   // stepping programmatically rewrites a plain textbox's value, which screen
   // readers do not announce on their own (WCAG 4.1.2).
@@ -262,8 +270,8 @@ export function DateTimeInput({
       }
     }
   }
-  const dateDisplayValue = datePendingInput !== null ? datePendingInput : valueParts.date && /^\d{4}-\d{2}-\d{2}$/.test(valueParts.date) ? plainDateFormat(plainDateFromISO(valueParts.date), DATE_FORMAT_LONG) : '';
-  const isDateInputValid = datePendingInput === null || !datePendingInput.trim() ? true : parseDateInput(datePendingInput) !== null;
+  const dateDisplayValue = datePendingInput !== null ? datePendingInput : valueParts.date && /^\d{4}-\d{2}-\d{2}$/.test(valueParts.date) ? plainDateFormat(plainDateFromISO(valueParts.date), DATE_FORMAT_LONG, locale) : '';
+  const isDateInputValid = datePendingInput === null || !datePendingInput.trim() ? true : parseDateInput(datePendingInput, locale) !== null;
 
   // --- Time input state ---
   const [timePendingInput, setTimePendingInput] = useState(null);
@@ -371,14 +379,14 @@ export function DateTimeInput({
     }
     const text = e.target.value;
     setDatePendingInput(text);
-    const parsed = parseDateInput(text);
+    const parsed = parseDateInput(text, locale);
     if (parsed && plainDateToISO(parsed) !== valueParts.date && !isDateDisabled(parsed)) {
       const parsedISO = plainDateToISO(parsed);
       lastFiredDateRef.current = parsedISO;
       handleDateChange(parsedISO, 'input');
       calendarRef.current?.navigateTo(parsedISO);
     }
-  }, [valueParts.date, isDateDisabled, handleDateChange, isEffectivelyDisabled]);
+  }, [valueParts.date, isDateDisabled, handleDateChange, isEffectivelyDisabled, locale]);
   const commitDatePendingInput = useCallback(() => {
     if (datePendingInput === null) {
       return;
@@ -390,7 +398,7 @@ export function DateTimeInput({
       setDatePendingInput(null);
       return;
     }
-    const parsed = parseDateInput(datePendingInput);
+    const parsed = parseDateInput(datePendingInput, locale);
     if (parsed && !isDateDisabled(parsed)) {
       const parsedISO = plainDateToISO(parsed);
       if (parsedISO !== valueParts.date) {
@@ -398,7 +406,7 @@ export function DateTimeInput({
       }
     }
     setDatePendingInput(null);
-  }, [datePendingInput, value, valueParts.date, fireChange, isDateDisabled, handleDateChange]);
+  }, [datePendingInput, value, valueParts.date, fireChange, isDateDisabled, handleDateChange, locale]);
   const handleDateBlur = useCallback(() => {
     commitDatePendingInput();
   }, [commitDatePendingInput]);
@@ -597,7 +605,7 @@ export function DateTimeInput({
           "aria-disabled": showsDisabledMessage ? 'true' : undefined,
           readOnly: showsDisabledMessage || undefined,
           "aria-describedby": ariaDescribedBy,
-          "aria-required": isRequired === true ? 'true' : undefined,
+          "aria-required": isEffectivelyRequired ? 'true' : undefined,
           "aria-invalid": status?.type === 'error' || !isDateInputValid ? 'true' : undefined,
           "aria-busy": isBusy || undefined,
           "aria-expanded": popover.isOpen,
@@ -676,7 +684,7 @@ export function DateTimeInput({
             label
           }),
           "aria-describedby": ariaDescribedBy,
-          "aria-required": isRequired === true ? 'true' : undefined,
+          "aria-required": isEffectivelyRequired ? 'true' : undefined,
           "aria-invalid": status?.type === 'error' || !isTimeInputValid ? 'true' : undefined,
           "aria-busy": isBusy || undefined,
           ...{

package/dist/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAqB5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAsB9C;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD,4EAA4E;AAC5E,UAAU,mBAAmB;IAC3B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB;IACzD,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAuHD;;;;;;;;;GASG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,cAAc;;;;;EAUpE;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAkB,EAClB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCA2Sb;yBA3Te,MAAM"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsB5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAsB9C;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD,4EAA4E;AAC5E,UAAU,mBAAmB;IAC3B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB;IACzD,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAuHD;;;;;;;;;GASG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,cAAc;;;;;EAUpE;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAkB,EAClB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCA6Sb;yBA7Te,MAAM"}

package/dist/Dialog/Dialog.js

@@ -23,7 +23,7 @@ import { isImeKeyEvent } from "../utils/ime.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, radiusVars, durationVars, easeVars, shadowVars } from "../theme/tokens.stylex.js";
 import { container } from "../Layout/container.stylex.js";
-import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles, spacingStepToToken } from "../Layout/padding.stylex.js";
+import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles, spacingStepToToken, overlayPaddingReset } from "../Layout/padding.stylex.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { devWarn } from "../utils/devWarning.js";
 import { DialogContext } from "./DialogContext.js";
@@ -435,7 +435,7 @@ export function Dialog({
       ...safeProps,
       ...mergeProps(themeProps('dialog', {
         variant
-      }), stylex.props(styles.inlineWrapper, !isFullscreen && dynamicStyles.sizing(width, maxHeight), isFullscreen && styles.fullscreen, xstyle), className, style),
+      }), stylex.props(styles.inlineWrapper, overlayPaddingReset.reset, !isFullscreen && dynamicStyles.sizing(width, maxHeight), isFullscreen && styles.fullscreen, xstyle), className, style),
       "data-testid": props['data-testid'],
       children: innerContent
     });
@@ -448,7 +448,7 @@ export function Dialog({
     ...safeProps,
     ...mergeProps(themeProps('dialog', {
       variant
-    }), focusOutlineProps.focusVisible(styles.dialog, isOpen && styles.open, styles.backdrop, !isFullscreen && dynamicStyles.sizing(width, maxHeight), hasPosition && (() => {
+    }), focusOutlineProps.focusVisible(styles.dialog, overlayPaddingReset.reset, isOpen && styles.open, styles.backdrop, !isFullscreen && dynamicStyles.sizing(width, maxHeight), hasPosition && (() => {
       const o = resolveDialogPositionOffsets(position);
       return dynamicStyles.position(o.top, o.insetInlineStart, o.insetInlineEnd, o.bottom);
     })(), isFullscreen && styles.fullscreen, xstyle), className, style),

package/dist/Field/FieldLabel.d.ts

@@ -1,12 +1,13 @@
 /**
  * @file FieldLabel.tsx
- * @input Uses React, Icon, IconType, useTranslator
+ * @input Uses React, Icon, IconType, useTranslator, FormLayoutContext
  * @output Exports FieldLabel component, FieldLabelProps
  * @position Core label implementation; used by Field, CheckboxInput, Switch
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Field/Field.doc.mjs (props table, features, implementation notes)
  * - /packages/core/src/Field/index.ts (exports if types change)
+ * - /packages/core/src/FormLayout/FormLayoutContext.ts (defaultOptionality drives the indicator)
  * - /packages/cli/assets/templates/blocks/components/Field/ (showcase blocks)
  * - /packages/core/locales/en.json (@astryx.field.required / @astryx.field.optional)
  */

package/dist/Field/FieldLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAyD5D,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,aAAa,EACb,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,+BAwGjB;yBA1He,UAAU"}
+{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAuB,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AAE3E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AA0D5D,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,aAAa,EACb,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,+BAsHjB;yBAxIe,UAAU"}

package/dist/Field/FieldLabel.js

@@ -4,17 +4,18 @@
 
 /**
  * @file FieldLabel.tsx
- * @input Uses React, Icon, IconType, useTranslator
+ * @input Uses React, Icon, IconType, useTranslator, FormLayoutContext
  * @output Exports FieldLabel component, FieldLabelProps
  * @position Core label implementation; used by Field, CheckboxInput, Switch
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Field/Field.doc.mjs (props table, features, implementation notes)
  * - /packages/core/src/Field/index.ts (exports if types change)
+ * - /packages/core/src/FormLayout/FormLayoutContext.ts (defaultOptionality drives the indicator)
  * - /packages/cli/assets/templates/blocks/components/Field/ (showcase blocks)
  * - /packages/core/locales/en.json (@astryx.field.required / @astryx.field.optional)
  */
-import { useMemo, useRef } from 'react';
+import { use, useMemo, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { mergeProps } from "../utils/index.js";
 import "../theme/tokens.stylex.js";
@@ -24,6 +25,7 @@ import { Tooltip } from "../Tooltip/index.js";
 import { useTranslator } from "../i18n/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useInputContainer } from "../hooks/index.js";
+import { FormLayoutContext } from "../FormLayout/FormLayoutContext.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const styles = {
   label: {
@@ -93,7 +95,23 @@ export function FieldLabel({
   ...rest
 }) {
   const t = useTranslator();
-  const statusText = isOptional ? t('@astryx.field.optional') : isRequired ? t('@astryx.field.required') : null;
+  const {
+    defaultOptionality
+  } = use(FormLayoutContext);
+
+  // A form-level `defaultOptionality` means "only the exception is marked": a
+  // field that merely restates the form's default shows no indicator, and only
+  // a deviation from it does. This is the *visible indicator* only; the
+  // matching `aria-required` is resolved on each control (see
+  // useResolvedRequired) so the unmarked majority is still announced.
+  //
+  //   defaultOptionality  isRequired            isOptional
+  //   'optional'          → required indicator  → (matches default, hidden)
+  //   'required'          → (matches, hidden)   → optional indicator
+  //   unset               → required indicator  → optional indicator
+  const showRequired = isRequired && defaultOptionality !== 'required';
+  const showOptional = isOptional && defaultOptionality !== 'optional';
+  const statusText = showOptional ? t('@astryx.field.optional') : showRequired ? t('@astryx.field.required') : null;
 
   // A group label (e.g. for a radiogroup) must not be a literal `<label>`
   // element: a `<label>` semantically names a single form control and can't be

package/dist/Field/InputClearButton.d.ts

@@ -7,7 +7,8 @@
  *   TextInput, NumberInput, TimeInput, DateInput, DateTimeInput,
  *   DateRangeInput, Selector, MultiSelector, Typeahead, Tokenizer, FileInput —
  *   routes it through here, so the glyph is themed in one place via the
- *   `astryx-input-clear-icon` target.
+ *   `astryx-input-clear-icon` target and the button wrapper is themed via the
+ *   `astryx-input-clear-button` target.
  */
 import type { ReactNode } from 'react';
 import * as stylex from '@stylexjs/stylex';

package/dist/Field/InputClearButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputClearButton.d.ts","sourceRoot":"","sources":["../../src/Field/InputClearButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAY3C,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC;IAC7B;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,OAAO,EACP,MAAM,EACN,aAAa,GACd,EAAE,qBAAqB,GAAG,SAAS,CAwBnC;yBA7Be,gBAAgB"}
+{"version":3,"file":"InputClearButton.d.ts","sourceRoot":"","sources":["../../src/Field/InputClearButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAkD3C,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC;IAC7B;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,OAAO,EACP,MAAM,EACN,aAAa,GACd,EAAE,qBAAqB,GAAG,SAAS,CA0BnC;yBA/Be,gBAAgB"}

package/dist/Field/InputClearButton.js

@@ -11,7 +11,8 @@
  *   TextInput, NumberInput, TimeInput, DateInput, DateTimeInput,
  *   DateRangeInput, Selector, MultiSelector, Typeahead, Tokenizer, FileInput —
  *   routes it through here, so the glyph is themed in one place via the
- *   `astryx-input-clear-icon` target.
+ *   `astryx-input-clear-icon` target and the button wrapper is themed via the
+ *   `astryx-input-clear-button` target.
  */
 import * as stylex from '@stylexjs/stylex';
 import { Button } from "../Button/index.js";
@@ -22,6 +23,12 @@ const styles = {
   button: {
     kZKoxP: "x1qx5ct2",
     kmuXW: "x2lah0s",
+    kVAEAm: "x1n2onr6",
+    "--_input-clear-hit-inset": "xtoycft x181bpwf",
+    "--_input-clear-hit-content": "xqxtgf4 xp8r40j",
+    k5JduY: "xh3pasq",
+    kwXMNM: "x1j6awrg",
+    kv0HGH: "xht581f",
     $$css: true
   }
 };
@@ -34,10 +41,14 @@ export function InputClearButton({
   const {
     className: iconTargetClassName
   } = themeProps('input-clear-icon');
+  const {
+    className: buttonTargetClassName
+  } = themeProps('input-clear-button');
   return /*#__PURE__*/_jsx(Button, {
     variant: "ghost",
     size: "sm",
     label: label,
+    className: buttonTargetClassName,
     icon: /*#__PURE__*/_jsx(Icon, {
       icon: "close",
       size: "sm",

package/dist/Field/inputStyles.stylex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inputStyles.stylex.d.ts","sourceRoot":"","sources":["../../src/Field/inputStyles.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAW3C;;;;GAIG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyC7B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;;;EAUlC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;EAyBvC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;EAmBvC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;EAmBjC,CAAC"}
+{"version":3,"file":"inputStyles.stylex.d.ts","sourceRoot":"","sources":["../../src/Field/inputStyles.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAW3C;;;;GAIG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0C7B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;;;EAUlC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;EA4BvC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;EAmBvC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;EAmBjC,CAAC"}

package/dist/Field/inputStyles.stylex.js

@@ -41,7 +41,7 @@ export const inputWrapperStyles = {
     k1ekBW: "x12zzom9",
     kIyJzY: "xuedmi6 x12w9bfk",
     kAMwcw: "xlr8y92",
-    kGVxlE: "x1gnnqk1 x12y27fx xuihb5h",
+    kGVxlE: "x1gnnqk1 x1xqjsvb xuihb5h",
     kI3sdo: "x1a2a7pz",
     $$css: true
   },
@@ -79,15 +79,15 @@ export const inputStatusBorderStyles = {
  */
 export const inputStatusHoverShadowStyles = {
   warning: {
-    kGVxlE: "x1gnnqk1 xnoa3fc",
+    kGVxlE: "x1gnnqk1 x9156jc",
     $$css: true
   },
   error: {
-    kGVxlE: "x1gnnqk1 xl68szm",
+    kGVxlE: "x1gnnqk1 x1bgmis8",
     $$css: true
   },
   success: {
-    kGVxlE: "x1gnnqk1 xig9bu2",
+    kGVxlE: "x1gnnqk1 x8wp45d",
     $$css: true
   }
 };

package/dist/FileInput/FileInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AASlB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAwN9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,UAAU,GAAG,cAAc,GAAG,OAAO,CACtC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,aAA0B,EAC1B,WAAW,EACX,WAAW,EACX,IAAc,EACd,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BA+ZhB;yBA1be,SAAS"}
+{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AASlB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAyN9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,UAAU,GAAG,cAAc,GAAG,OAAO,CACtC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,aAA0B,EAC1B,WAAW,EACX,WAAW,EACX,IAAc,EACd,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BA+ZhB;yBA1be,SAAS"}

package/dist/FileInput/FileInput.js

@@ -111,7 +111,7 @@ const styles = {
     $$css: true
   },
   dropzoneHover: {
-    kGVxlE: "xw6ruzt",
+    kGVxlE: "x1v5wwkd",
     $$css: true
   },
   dropzoneActive: {
@@ -142,7 +142,7 @@ const styles = {
     k1ekBW: "x12zzom9",
     kIyJzY: "xuedmi6 x12w9bfk",
     kAMwcw: "xlr8y92",
-    kGVxlE: "x1gnnqk1 x70dsy8",
+    kGVxlE: "x1gnnqk1 x1telqz2",
     kkrTdU: "x1ypdohk",
     kZKoxP: "x1ueg155",
     kI3sdo: "x1a2a7pz",

package/dist/FormLayout/FormLayout.d.ts

@@ -6,13 +6,16 @@
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/FormLayout/FormLayout.test.tsx (tests for new/changed behavior)
+ * - /packages/core/src/FormLayout/FormLayoutContext.ts (context value shape)
+ * - /packages/core/src/FormLayout/FormLayout.doc.mjs (props table)
  * - /packages/core/src/FormLayout/index.ts (exports if types change)
+ * - /packages/core/src/Field/FieldLabel.tsx (defaultOptionality indicator resolution)
  * - /apps/storybook/stories/FormLayout.stories.tsx (storybook stories)
  * - /packages/cli/assets/templates/blocks/components/FormLayout/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
-import { type FormLayoutDirection } from './FormLayoutContext';
+import { type FormLayoutDirection, type FormOptionality } from './FormLayoutContext';
 export interface FormLayoutProps extends BaseProps<HTMLDivElement> {
     /** Ref forwarded to the root element */
     ref?: React.Ref<HTMLDivElement>;
@@ -33,6 +36,25 @@ export interface FormLayoutProps extends BaseProps<HTMLDivElement> {
      * @default 'vertical'
      */
     direction?: FormLayoutDirection;
+    /**
+     * Which state the form treats as its default, so only the *exception*
+     * carries a visible optional/required indicator. It also resolves each
+     * field's `aria-required` so the unmarked majority is still announced
+     * correctly — but only `aria-required`, never the native `required`
+     * attribute, so a layout default can't switch on browser validation.
+     *
+     * - `'optional'` — fields read as optional; only a field with `isRequired`
+     *   shows an indicator (the "required" one).
+     * - `'required'` — fields read as required; only a field with `isOptional`
+     *   shows an indicator (the "optional" one). Fields without `isOptional`
+     *   expose `aria-required` even though they show no indicator.
+     * - unset — today's behavior: `isRequired` and `isOptional` each show their
+     *   own indicator independently.
+     *
+     * A field that merely restates the default (e.g. `isOptional` under
+     * `'optional'`) shows nothing. An inner `FormLayout` shadows an outer one.
+     */
+    defaultOptionality?: FormOptionality;
 }
 /**
  * Spatial layout container for form fields.
@@ -52,7 +74,7 @@ export interface FormLayoutProps extends BaseProps<HTMLDivElement> {
  * </FormLayout>
  * ```
  */
-export declare function FormLayout({ children, direction, xstyle, className, style, ref, ...props }: FormLayoutProps): import("react").JSX.Element;
+export declare function FormLayout({ children, direction, defaultOptionality, xstyle, className, style, ref, ...props }: FormLayoutProps): import("react").JSX.Element;
 export declare namespace FormLayout {
     var displayName: string;
 }

package/dist/FormLayout/FormLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormLayout.d.ts","sourceRoot":"","sources":["../../src/FormLayout/FormLayout.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,EAAoB,KAAK,mBAAmB,EAAC,MAAM,qBAAqB,CAAC;AA0ChF,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAC;CACjC;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAsB,EACtB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BAuBjB;yBA/Be,UAAU"}
+{"version":3,"file":"FormLayout.d.ts","sourceRoot":"","sources":["../../src/FormLayout/FormLayout.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAC;AA0C7B,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAEhC;;;;;;;;;;;;;;;;;OAiBG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC;CACtC;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAsB,EACtB,kBAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BA0BjB;yBAnCe,UAAU"}

package/dist/FormLayout/FormLayout.js

@@ -10,7 +10,10 @@
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/FormLayout/FormLayout.test.tsx (tests for new/changed behavior)
+ * - /packages/core/src/FormLayout/FormLayoutContext.ts (context value shape)
+ * - /packages/core/src/FormLayout/FormLayout.doc.mjs (props table)
  * - /packages/core/src/FormLayout/index.ts (exports if types change)
+ * - /packages/core/src/Field/FieldLabel.tsx (defaultOptionality indicator resolution)
  * - /apps/storybook/stories/FormLayout.stories.tsx (storybook stories)
  * - /packages/cli/assets/templates/blocks/components/FormLayout/ (showcase blocks)
  */
@@ -86,6 +89,7 @@ const styles = {
 export function FormLayout({
   children,
   direction = 'vertical',
+  defaultOptionality,
   xstyle,
   className,
   style,
@@ -93,8 +97,9 @@ export function FormLayout({
   ...props
 }) {
   const contextValue = useMemo(() => ({
-    direction
-  }), [direction]);
+    direction,
+    defaultOptionality
+  }), [direction, defaultOptionality]);
   return /*#__PURE__*/_jsx(FormLayoutContext, {
     value: contextValue,
     children: /*#__PURE__*/_jsx("div", {

package/dist/FormLayout/FormLayoutContext.d.ts

@@ -8,10 +8,23 @@
  */
 export type FormLayoutDirection = 'vertical' | 'horizontal' | 'horizontal-labels';
 /**
- * Context for detecting which form layout direction a component is rendered in.
- * Children can use this to adapt their rendering based on the parent layout.
+ * Which state a form treats as its default, so only the *exception* carries a
+ * visible optional/required indicator.
+ *
+ * - `'optional'` — fields are optional unless a field opts into `isRequired`;
+ *   only required fields show an indicator.
+ * - `'required'` — fields are required unless a field opts into `isOptional`;
+ *   only optional fields show an indicator.
+ */
+export type FormOptionality = 'optional' | 'required';
+/**
+ * Context for detecting which form layout a component is rendered in. Children
+ * can use this to adapt their rendering based on the parent layout — direction
+ * for spatial arrangement, and `defaultOptionality` so a field can suppress the
+ * indicator that merely restates the form-wide default.
  */
 export declare const FormLayoutContext: import("react").Context<{
     direction: FormLayoutDirection;
+    defaultOptionality?: FormOptionality;
 }>;
 //# sourceMappingURL=FormLayoutContext.d.ts.map

package/dist/FormLayout/FormLayoutContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormLayoutContext.d.ts","sourceRoot":"","sources":["../../src/FormLayout/FormLayoutContext.ts"],"names":[],"mappings":"AAeA;;;;;;;GAOG;AACH,MAAM,MAAM,mBAAmB,GAC3B,UAAU,GACV,YAAY,GACZ,mBAAmB,CAAC;AAExB;;;GAGG;AACH,eAAO,MAAM,iBAAiB;eACjB,mBAAmB;EACL,CAAC"}
+{"version":3,"file":"FormLayoutContext.d.ts","sourceRoot":"","sources":["../../src/FormLayout/FormLayoutContext.ts"],"names":[],"mappings":"AAkBA;;;;;;;GAOG;AACH,MAAM,MAAM,mBAAmB,GAC7B,UAAU,GAAG,YAAY,GAAG,mBAAmB,CAAC;AAElD;;;;;;;;GAQG;AACH,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,UAAU,CAAC;AAEtD;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB;eACjB,mBAAmB;yBACT,eAAe;EACX,CAAC"}