When using s-date-field inside an s-section or s-stack, it doesn’t stretch to fill the available width like s-select and s-text-field do. The input renders at a fixed width instead.
Reproduction:
<s-section heading="Settings">
<s-stack gap="base">
<s-select label="Status">
<s-option value="draft">Draft</s-option>
</s-select>
<s-date-field label="End date" />
<s-select label="List">
<s-option value="">None</s-option>
</s-select>
</s-stack>
</s-section>
The two s-select fields fill the full width, but s-date-field does not.
Root cause: Inside the shadow DOM, .date-field-container is set to display: inline-block with a fixed inline-size: calc(7 * var(--p-width-800-25111)). This hardcodes the width to ~14rem instead of stretching to fill the parent.
Why there’s no workaround: The --p-width-* custom properties are shared between the input container and the date picker calendar grid. Overriding them (e.g. --p-width-800-25111: 14.2857%) makes the input full-width but breaks the calendar layout — day cells lose their spacing and stack on top of each other.
Expected: s-date-field should match the behaviour of other form components (s-select, s-text-field) and fill its container width by default. The .date-field-container sizing should use a separate token or just `width: 100% instead of reusing the calendar cell width token.