@slotted/angular 0.1.0-beta.0 → 0.1.0-beta.10

package/fesm2022/slotted-angular-datetime-field.mjs

@@ -796,7 +796,7 @@ class SlDateTimeField {
         this.onValidatorChangeFn();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateTimeField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlDateTimeField, isStandalone: true, selector: "[slDateTimeField]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, isDateUnavailable: { classPropertyName: "isDateUnavailable", publicName: "isDateUnavailable", isSignal: true, isRequired: false, transformFunction: null }, isTimeUnavailable: { classPropertyName: "isTimeUnavailable", publicName: "isTimeUnavailable", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, hourCycle: { classPropertyName: "hourCycle", publicName: "hourCycle", isSignal: true, isRequired: false, transformFunction: null }, granularity: { classPropertyName: "granularity", publicName: "granularity", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, yearPivot: { classPropertyName: "yearPivot", publicName: "yearPivot", isSignal: true, isRequired: false, transformFunction: null }, referenceDateTime: { classPropertyName: "referenceDateTime", publicName: "referenceDateTime", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, relative: { classPropertyName: "relative", publicName: "relative", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { attributes: { "data-ui": "datetime-field", "data-part": "root" }, listeners: { "mousedown": "onRootMouseDown($event)", "keydown": "onKeyDown($event)" }, properties: { "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-calendar": "resolvedCalendar()", "attr.data-cycle": "dataCycle()", "attr.data-granularity": "resolvedGranularity()", "attr.data-incomplete": "incomplete()", "attr.data-relative": "expression() === null ? null : ''", "attr.data-disabled": "resolvedDisabled() === true ? '' : null", "attr.data-invalid": "resolvedInvalid() === true ? '' : null", "attr.data-readonly": "resolvedReadOnly() === true ? '' : null", "attr.data-required": "resolvedRequired() === true ? '' : null" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlDateTimeField, isStandalone: true, selector: "[slDateTimeField]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, isDateUnavailable: { classPropertyName: "isDateUnavailable", publicName: "isDateUnavailable", isSignal: true, isRequired: false, transformFunction: null }, isTimeUnavailable: { classPropertyName: "isTimeUnavailable", publicName: "isTimeUnavailable", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, hourCycle: { classPropertyName: "hourCycle", publicName: "hourCycle", isSignal: true, isRequired: false, transformFunction: null }, granularity: { classPropertyName: "granularity", publicName: "granularity", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, yearPivot: { classPropertyName: "yearPivot", publicName: "yearPivot", isSignal: true, isRequired: false, transformFunction: null }, referenceDateTime: { classPropertyName: "referenceDateTime", publicName: "referenceDateTime", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, relative: { classPropertyName: "relative", publicName: "relative", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { attributes: { "data-ui": "datetime-field", "data-ui-datetime-field": "", "data-part": "root", "data-part-root": "" }, listeners: { "mousedown": "onRootMouseDown($event)", "keydown": "onKeyDown($event)" }, properties: { "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-calendar": "resolvedCalendar()", "attr.data-cycle": "dataCycle()", "attr.data-granularity": "resolvedGranularity()", "attr.data-incomplete": "incomplete()", "attr.data-relative": "expression() === null ? null : ''", "attr.data-disabled": "resolvedDisabled() === true ? '' : null", "attr.data-invalid": "resolvedInvalid() === true ? '' : null", "attr.data-readonly": "resolvedReadOnly() === true ? '' : null", "attr.data-required": "resolvedRequired() === true ? '' : null" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlDateTimeField), multi: true },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => SlDateTimeField), multi: true },
         ], exportAs: ["slDateTimeField"], ngImport: i0, template: `<ng-content select="[slDateTimeFieldStart]" />
@@ -804,6 +804,7 @@ class SlDateTimeField {
       <input
         #duration
         data-part="duration"
+        data-part-duration=""
         type="text"
         placeholder="+40m, 1h30, +2d"
         [attr.aria-label]="t('duration')"
@@ -815,6 +816,7 @@ class SlDateTimeField {
       />
       <span
         data-part="preview"
+        data-part-preview=""
         role="status"
         aria-live="polite"
         [attr.data-resolved]="resolved() === null ? null : ''"
@@ -822,7 +824,7 @@ class SlDateTimeField {
       >
         <span slIcon directional><svg slGlyph name="chevron-right"></svg></span>
         @if (rollsDay()) {
-          <span data-part="preview-date">{{ previewDate() }}</span
+          <span data-part="preview-date" data-part-preview-date="">{{ previewDate() }}</span
           >, {{ previewTime() }}
         } @else {
           {{ previewTime() }}
@@ -831,6 +833,7 @@ class SlDateTimeField {
     } @else {
       <div
         data-part="segments"
+        data-part-segments=""
         role="group"
         [attr.id]="controlId()"
         [attr.aria-label]="label() ?? writtenLabel"
@@ -843,12 +846,13 @@ class SlDateTimeField {
         (paste)="onPaste($event)"
       >
         @for (group of halves(); track group.half) {
-          <span data-part="half" [attr.data-half]="group.half">
+          <span data-part="half" data-part-half="" [attr.data-half]="group.half">
             @for (part of group.parts; track $index) {
               @if (part.type === 'literal') {
                 @if (part.boundary !== true || part.drawn !== false) {
                   <span
                     data-part="literal"
+                    data-part-literal=""
                     aria-hidden="true"
                     [attr.data-boundary]="part.boundary === true ? '' : null"
                     >{{ part.value }}</span
@@ -857,11 +861,12 @@ class SlDateTimeField {
               } @else {
                 <div
                   data-part="segment"
+                  data-part-segment=""
                   role="spinbutton"
                   [attr.data-field]="part.type"
                   [attr.data-half]="halfOf(part.type)"
                   [attr.data-placeholder]="valueOf(part.type) === null ? '' : null"
-                  [attr.aria-label]="part.value"
+                  [attr.aria-label]="t(part.type)"
                   [attr.aria-valuenow]="valueOf(part.type)"
                   [attr.aria-valuemin]="rangeOf(part.type).min"
                   [attr.aria-valuemax]="rangeOf(part.type).max"
@@ -881,10 +886,13 @@ class SlDateTimeField {
         }
       </div>
     }
-    <span data-part="value-text" hidden [attr.id]="valueTextId">{{ spokenValue() }}</span>
+    <span data-part="value-text" data-part-value-text="" hidden [attr.id]="valueTextId">{{
+      spokenValue()
+    }}</span>
     @if (showClear()) {
       <button
         data-part="clear"
+        data-part-clear=""
         type="button"
         [attr.aria-label]="t('clear')"
         (click)="clear($event)"
@@ -893,7 +901,14 @@ class SlDateTimeField {
       </button>
     }
     <ng-content select="[slDateTimeFieldEnd]" />
-    <input data-part="hidden-input" type="hidden" readonly [attr.name]="name()" [value]="iso()" />`, isInline: true, styles: ["@layer slotted.components{[data-ui=datetime-field][data-part=root]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-floor: var(--slotted-datetime-field-icon-size-min, 14px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_half-gap: var(--slotted-datetime-field-half-gap, var(--slotted-space-3, .375rem));--_action-size: var( --slotted-datetime-field-action-size, min( calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), calc( var(--_height) - var(--slotted-control-border-width, 1px) * 2 - var(--slotted-space-2, .25rem) ) ) );align-items:center;background-color:var( --slotted-datetime-field-background, var(--slotted-control-surface, Field) );border:var(--slotted-control-border-width, 1px) solid var(--slotted-datetime-field-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--slotted-datetime-field-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-datetime-field-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-datetime-field-color, var(--slotted-text, CanvasText));display:flex;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--_gap);inline-size:100%;min-block-size:var(--_height);min-inline-size:0;padding-inline:var(--_padding-inline);padding-block:var(--slotted-datetime-field-padding-block, var(--slotted-space-1, .125rem));transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=datetime-field][data-part=root]:has(>[data-part=clear]:last-child){padding-inline-end:max(0px,calc(var(--_padding-inline) - (var(--_action-size) - var(--_icon-size)) / 2))}[data-ui=datetime-field] [data-part=segments]{align-items:center;column-gap:var(--_half-gap);cursor:text;display:flex;flex:1 1 auto;min-inline-size:0;overflow:hidden}[data-ui=datetime-field] [data-part=half]{align-items:center;direction:ltr;display:flex;flex:0 0 auto;font-variant-numeric:tabular-nums;unicode-bidi:isolate}[data-ui=datetime-field] [data-part=segments]:dir(rtl){justify-content:flex-end}[data-ui=datetime-field] [data-part=segment]{--_digits: 2;background-color:transparent;border-radius:var(--slotted-datetime-field-segment-radius, var(--slotted-radius-xs, 2px));box-sizing:content-box;caret-color:transparent;color:inherit;cursor:text;font:inherit;flex:0 0 auto;min-inline-size:var( --slotted-datetime-field-segment-min-inline-size, calc(var(--_digits) * 1ch) );padding-inline:var( --slotted-datetime-field-segment-padding-inline, var(--slotted-space-1, .125rem) );text-align:center;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}[data-ui=datetime-field] [data-part=segment][data-field=year]{--_digits: 4}[data-ui=datetime-field] [data-part=segment][data-field=dayPeriod]{font-variant-numeric:normal;min-inline-size:var(--slotted-datetime-field-period-min-inline-size, 2ch);text-transform:none;white-space:nowrap}[data-ui=datetime-field] [data-part=segment][data-placeholder]{color:var(--slotted-datetime-field-placeholder-color, var(--slotted-text-muted, GrayText))}[data-ui=datetime-field] [data-part=literal]{color:var(--slotted-datetime-field-literal-color, var(--slotted-text-muted, GrayText));flex:0 0 auto;unicode-bidi:plaintext;-webkit-user-select:none;user-select:none}[data-ui=datetime-field] [data-part=literal][data-boundary]{margin-inline-end:0}[data-ui=datetime-field] [data-part=duration]{appearance:none;background-color:transparent;border:0;color:inherit;flex:1 1 auto;font:inherit;font-variant-numeric:tabular-nums;min-inline-size:0;outline:none;padding:0;direction:ltr;unicode-bidi:isolate}[data-ui=datetime-field] [data-part=duration]:dir(rtl){text-align:right}[data-ui=datetime-field] [data-part=duration]::placeholder{color:var(--slotted-datetime-field-placeholder-color, var(--slotted-text-muted, GrayText))}[data-ui=datetime-field] [data-part=preview]{--_mark: 1cap;color:var(--slotted-datetime-field-preview-color, var(--slotted-tone-accent-text));display:block;flex:0 0 auto;font-variant-numeric:tabular-nums;white-space:nowrap;unicode-bidi:plaintext}[data-ui=datetime-field] [data-part=preview]>[data-ui=icon]{--slotted-icon-size: var(--_mark);margin-inline:var(--slotted-space-1, .125rem);vertical-align:calc((((1cap + 1ex) / 2) - var(--_mark)) / 2)}[data-ui=datetime-field] [data-part=preview][data-rolls-day]>[data-part=preview-date]{color:var(--slotted-datetime-field-preview-day-color, var(--slotted-tone-accent-text));font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=datetime-field][data-part=root][data-relative]{border-color:var( --slotted-datetime-field-relative-border-color, var(--slotted-tone-accent-border) )}[data-ui=datetime-field][data-part=root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_gap: var(--slotted-control-gap-sm, 6px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-sm, 14px))}[data-ui=datetime-field][data-part=root][data-size=md]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px))}[data-ui=datetime-field][data-part=root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_gap: var(--slotted-control-gap-lg, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-lg, 18px))}[data-ui=datetime-field][data-part=root][data-variant=subtle]{background-color:var( --slotted-datetime-field-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-datetime-field-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui=datetime-field][data-part=root][data-variant=plain]{background-color:transparent;border-color:transparent;border-radius:var(--slotted-radius-none, 0px);box-shadow:none}[data-ui=datetime-field]>[data-part=start],[data-ui=datetime-field]>[data-part=end]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-datetime-field-adornment-color, var(--slotted-text-muted, GrayText));display:inline-flex;flex:0 0 auto;gap:var(--slotted-space-2, .25rem);line-height:1;unicode-bidi:plaintext}[data-ui=datetime-field]>[data-part=start]>svg,[data-ui=datetime-field]>[data-part=end]>svg{block-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui=datetime-field]>[data-part=clear]{align-items:center;appearance:none;background-color:transparent;block-size:var(--_action-size);border:0;border-radius:var(--slotted-datetime-field-radius, var(--slotted-control-radius, 4px));color:var(--slotted-datetime-field-action-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;inline-size:var(--_action-size);justify-content:center;padding:0;position:relative;touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui=datetime-field]>[data-part=clear]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=datetime-field]>[data-part=clear]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui=datetime-field]>[data-part=end]+[data-part=clear]:after{inset-inline-start:0}}[data-ui=datetime-field]>[data-part=clear]{--slotted-icon-size: var(--_icon-size)}[data-ui=datetime-field]>[data-part=clear]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-datetime-field-action-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=datetime-field]>[data-part=clear]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-datetime-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=datetime-field]>[data-part=clear]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=datetime-field][data-part=root]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]):not([data-incomplete]){border-color:var( --slotted-datetime-field-hover-border-color, var(--slotted-tone-accent-border) )}[data-ui=datetime-field][data-part=root][data-variant=subtle]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-datetime-field-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=datetime-field][data-part=root][data-variant=plain]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-datetime-field-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui=datetime-field][data-part=root][data-incomplete]:not([data-disabled]):not([data-readonly]):not([data-invalid]):not(:focus-within){border-color:var( --slotted-datetime-field-incomplete-border-color, var(--slotted-tone-warning-border) )}[data-ui=datetime-field][data-part=root]:has([data-part=segment]:focus),[data-ui=datetime-field][data-part=root]:has([data-part=duration]:focus){box-shadow:var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=datetime-field][data-part=root][data-variant=plain]:has([data-part=segment]:focus),[data-ui=datetime-field][data-part=root][data-variant=plain]:has([data-part=duration]:focus){box-shadow:none;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=datetime-field] [data-part=segment]:focus{background-color:var( --slotted-datetime-field-segment-focus-background, var(--slotted-tone-accent-solid) );color:var(--slotted-datetime-field-segment-focus-color, var(--slotted-tone-accent-on-solid));outline:none}[data-ui=datetime-field][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-datetime-field-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) );--_invalid-edge-width: var( --slotted-datetime-field-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-datetime-field-invalid-border-color, var(--slotted-tone-danger-border) );--_invalid-edge: inset 0 0 0 var(--_invalid-edge-width) var(--_invalid-edge-color);border-color:var( --slotted-datetime-field-invalid-border-color, var(--slotted-tone-danger-border) );box-shadow:var(--_invalid-edge)}[data-ui=datetime-field][data-part=root][data-invalid]:has([data-part=segment]:focus),[data-ui=datetime-field][data-part=root][data-invalid]:has([data-part=duration]:focus){box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}[data-ui=datetime-field][data-part=root][data-variant=plain][data-invalid]:has([data-part=segment]:focus),[data-ui=datetime-field][data-part=root][data-variant=plain][data-invalid]:has([data-part=duration]:focus){box-shadow:inset 0 0 0 calc(var(--slotted-focus-ring-offset, 2px) - var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)) var(--_invalid-edge-color)}@media(forced-colors:active){[data-ui=datetime-field][data-part=root][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}[data-ui=datetime-field][data-part=root][data-invalid]:has([data-part=segment]:focus),[data-ui=datetime-field][data-part=root][data-invalid]:has([data-part=duration]:focus){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=datetime-field][data-part=root][data-variant=plain][data-invalid]:has([data-part=segment]:focus),[data-ui=datetime-field][data-part=root][data-variant=plain][data-invalid]:has([data-part=duration]:focus){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * (var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)))}}[data-ui=datetime-field][data-part=root][data-readonly],[data-ui=datetime-field][data-part=root][data-readonly] [data-part=segments],[data-ui=datetime-field][data-part=root][data-readonly] [data-part=segment]{cursor:default}[data-ui=datetime-field][data-part=root][data-readonly]{background-color:var( --slotted-datetime-field-readonly-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=datetime-field][data-part=root][data-disabled]{background-color:var( --slotted-datetime-field-disabled-background, var(--slotted-disabled-background) );border-color:var( --slotted-datetime-field-disabled-border-color, var(--slotted-disabled-border) );box-shadow:none;color:var(--slotted-datetime-field-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=datetime-field][data-part=root][data-disabled] [data-part=segments],[data-ui=datetime-field][data-part=root][data-disabled] [data-part=segment]{cursor:not-allowed}[data-ui=datetime-field][data-part=root][data-disabled]>[data-part=start],[data-ui=datetime-field][data-part=root][data-disabled]>[data-part=end],[data-ui=datetime-field][data-part=root][data-disabled] [data-part=literal],[data-ui=datetime-field][data-part=root][data-disabled] [data-part=segment][data-placeholder]{color:var(--slotted-disabled-foreground)}@media(forced-colors:active){[data-ui=datetime-field][data-part=root][data-variant=plain]{border-color:ButtonBorder}[data-ui=datetime-field][data-part=root][data-relative]{border-color:Highlight}}}\n"], dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    <input
+      data-part="hidden-input"
+      data-part-hidden-input=""
+      type="hidden"
+      readonly
+      [attr.name]="name()"
+      [value]="iso()"
+    />`, isInline: true, styles: ["@layer slotted.components{[data-ui-datetime-field][data-part-root]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-floor: var(--slotted-datetime-field-icon-size-min, 14px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_half-gap: var(--slotted-datetime-field-half-gap, var(--slotted-space-3, .375rem));--_action-size: var( --slotted-datetime-field-action-size, min( calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), calc( var(--_height) - var(--slotted-control-border-width, 1px) * 2 - var(--slotted-space-2, .25rem) ) ) );align-items:center;background-color:var( --slotted-datetime-field-background, var(--slotted-control-surface, Field) );border:var(--slotted-control-border-width, 1px) solid var(--slotted-datetime-field-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--slotted-datetime-field-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-datetime-field-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-datetime-field-color, var(--slotted-text, CanvasText));display:flex;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--_gap);inline-size:100%;min-block-size:var(--_height);min-inline-size:0;padding-inline:var(--_padding-inline);padding-block:var(--slotted-datetime-field-padding-block, var(--slotted-space-1, .125rem));transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui-datetime-field][data-part-root]:has(>[data-part-clear]:last-child){padding-inline-end:max(0px,calc(var(--_padding-inline) - (var(--_action-size) - var(--_icon-size)) / 2))}[data-ui-datetime-field] [data-part-segments]{align-items:center;column-gap:var(--_half-gap);cursor:text;display:flex;flex:1 1 auto;min-inline-size:0;overflow:hidden}[data-ui-datetime-field] [data-part-half]{align-items:center;direction:ltr;display:flex;flex:0 0 auto;font-variant-numeric:tabular-nums;unicode-bidi:isolate}[data-ui-datetime-field] [data-part-segments]:dir(rtl){justify-content:flex-end}[data-ui-datetime-field] [data-part-segment]{--_digits: 2;background-color:transparent;border-radius:var(--slotted-datetime-field-segment-radius, var(--slotted-radius-xs, 2px));box-sizing:content-box;caret-color:transparent;color:inherit;cursor:text;font:inherit;flex:0 0 auto;min-inline-size:var( --slotted-datetime-field-segment-min-inline-size, calc(var(--_digits) * 1ch) );padding-inline:var( --slotted-datetime-field-segment-padding-inline, var(--slotted-space-1, .125rem) );text-align:center;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}[data-ui-datetime-field] [data-part-segment][data-field=year]{--_digits: 4}[data-ui-datetime-field] [data-part-segment][data-field=dayPeriod]{font-variant-numeric:normal;min-inline-size:var(--slotted-datetime-field-period-min-inline-size, 2ch);text-transform:none;white-space:nowrap}[data-ui-datetime-field] [data-part-segment][data-placeholder]{color:var(--slotted-datetime-field-placeholder-color, var(--slotted-text-muted, GrayText))}[data-ui-datetime-field] [data-part-literal]{color:var(--slotted-datetime-field-literal-color, var(--slotted-text-muted, GrayText));flex:0 0 auto;unicode-bidi:plaintext;-webkit-user-select:none;user-select:none}[data-ui-datetime-field] [data-part-literal][data-boundary]{margin-inline-end:0}[data-ui-datetime-field] [data-part-duration]{appearance:none;background-color:transparent;border:0;color:inherit;flex:1 1 auto;font:inherit;font-variant-numeric:tabular-nums;min-inline-size:0;outline:none;padding:0;direction:ltr;unicode-bidi:isolate}[data-ui-datetime-field] [data-part-duration]:dir(rtl){text-align:right}[data-ui-datetime-field] [data-part-duration]::placeholder{color:var(--slotted-datetime-field-placeholder-color, var(--slotted-text-muted, GrayText))}[data-ui-datetime-field] [data-part-preview]{--_mark: 1cap;color:var(--slotted-datetime-field-preview-color, var(--slotted-tone-accent-text));display:block;flex:0 0 auto;font-variant-numeric:tabular-nums;white-space:nowrap;unicode-bidi:plaintext}[data-ui-datetime-field] [data-part-preview]>[data-ui-icon]{--slotted-icon-size: var(--_mark);margin-inline:var(--slotted-space-1, .125rem);vertical-align:calc((((1cap + 1ex) / 2) - var(--_mark)) / 2)}[data-ui-datetime-field] [data-part-preview][data-rolls-day]>[data-part-preview-date]{color:var(--slotted-datetime-field-preview-day-color, var(--slotted-tone-accent-text));font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui-datetime-field][data-part-root][data-relative]{border-color:var( --slotted-datetime-field-relative-border-color, var(--slotted-tone-accent-border) )}[data-ui-datetime-field][data-part-root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_gap: var(--slotted-control-gap-sm, 6px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-sm, 14px))}[data-ui-datetime-field][data-part-root][data-size=md]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px))}[data-ui-datetime-field][data-part-root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_gap: var(--slotted-control-gap-lg, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-lg, 18px))}[data-ui-datetime-field][data-part-root][data-variant=subtle]{background-color:var( --slotted-datetime-field-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-datetime-field-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui-datetime-field][data-part-root][data-variant=plain]{background-color:transparent;border-color:transparent;border-radius:var(--slotted-radius-none, 0px);box-shadow:none}[data-ui-datetime-field]>[data-part-start],[data-ui-datetime-field]>[data-part-end]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-datetime-field-adornment-color, var(--slotted-text-muted, GrayText));display:inline-flex;flex:0 0 auto;gap:var(--slotted-space-2, .25rem);line-height:1;unicode-bidi:plaintext}[data-ui-datetime-field]>[data-part-start]>svg,[data-ui-datetime-field]>[data-part-end]>svg{block-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui-datetime-field]>[data-part-clear]{align-items:center;appearance:none;background-color:transparent;block-size:var(--_action-size);border:0;border-radius:var(--slotted-datetime-field-radius, var(--slotted-control-radius, 4px));color:var(--slotted-datetime-field-action-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;inline-size:var(--_action-size);justify-content:center;padding:0;position:relative;touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui-datetime-field]>[data-part-clear]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui-datetime-field]>[data-part-clear]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui-datetime-field]>[data-part-end]+[data-part-clear]:after{inset-inline-start:0}}[data-ui-datetime-field]>[data-part-clear]{--slotted-icon-size: var(--_icon-size)}[data-ui-datetime-field]>[data-part-clear]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-datetime-field-action-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui-datetime-field]>[data-part-clear]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-datetime-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui-datetime-field]>[data-part-clear]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui-datetime-field][data-part-root]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]):not([data-incomplete]){border-color:var( --slotted-datetime-field-hover-border-color, var(--slotted-tone-accent-border) )}[data-ui-datetime-field][data-part-root][data-variant=subtle]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-datetime-field-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui-datetime-field][data-part-root][data-variant=plain]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-datetime-field-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui-datetime-field][data-part-root][data-incomplete]:not([data-disabled]):not([data-readonly]):not([data-invalid]):not(:focus-within){border-color:var( --slotted-datetime-field-incomplete-border-color, var(--slotted-tone-warning-border) )}[data-ui-datetime-field][data-part-root]:has([data-part-segment]:focus),[data-ui-datetime-field][data-part-root]:has([data-part-duration]:focus){box-shadow:var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-control-focus-ring-offset, var(--slotted-focus-ring-offset, 2px))}[data-ui-datetime-field][data-part-root][data-variant=plain]:has([data-part-segment]:focus),[data-ui-datetime-field][data-part-root][data-variant=plain]:has([data-part-duration]:focus){box-shadow:none;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui-datetime-field] [data-part-segment]:focus{background-color:var( --slotted-datetime-field-segment-focus-background, var(--slotted-tone-accent-solid) );color:var(--slotted-datetime-field-segment-focus-color, var(--slotted-tone-accent-on-solid));outline:none}[data-ui-datetime-field][data-part-root][data-invalid]{--slotted-focus-ring-color: var( --slotted-datetime-field-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) );--_invalid-edge-width: var( --slotted-datetime-field-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-datetime-field-invalid-border-color, var(--slotted-tone-danger-border) );--_invalid-edge: inset 0 0 0 var(--_invalid-edge-width) var(--_invalid-edge-color);border-color:var( --slotted-datetime-field-invalid-border-color, var(--slotted-tone-danger-border) );box-shadow:var(--_invalid-edge)}[data-ui-datetime-field][data-part-root][data-invalid]:has([data-part-segment]:focus),[data-ui-datetime-field][data-part-root][data-invalid]:has([data-part-duration]:focus){box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}[data-ui-datetime-field][data-part-root][data-variant=plain][data-invalid]:has([data-part-segment]:focus),[data-ui-datetime-field][data-part-root][data-variant=plain][data-invalid]:has([data-part-duration]:focus){box-shadow:inset 0 0 0 calc(var(--slotted-focus-ring-offset, 2px) - var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)) var(--_invalid-edge-color)}@media(forced-colors:active){[data-ui-datetime-field][data-part-root][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}[data-ui-datetime-field][data-part-root][data-invalid]:has([data-part-segment]:focus),[data-ui-datetime-field][data-part-root][data-invalid]:has([data-part-duration]:focus){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var( --slotted-control-focus-ring-offset, var(--slotted-focus-ring-offset, 2px) )}[data-ui-datetime-field][data-part-root][data-variant=plain][data-invalid]:has([data-part-segment]:focus),[data-ui-datetime-field][data-part-root][data-variant=plain][data-invalid]:has([data-part-duration]:focus){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * (var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)))}}[data-ui-datetime-field][data-part-root][data-readonly],[data-ui-datetime-field][data-part-root][data-readonly] [data-part-segments],[data-ui-datetime-field][data-part-root][data-readonly] [data-part-segment]{cursor:default}[data-ui-datetime-field][data-part-root][data-readonly]{background-color:var( --slotted-datetime-field-readonly-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui-datetime-field][data-part-root][data-disabled]{background-color:var( --slotted-datetime-field-disabled-background, var(--slotted-disabled-background) );border-color:var( --slotted-datetime-field-disabled-border-color, var(--slotted-disabled-border) );box-shadow:none;color:var(--slotted-datetime-field-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui-datetime-field][data-part-root][data-disabled] [data-part-segments],[data-ui-datetime-field][data-part-root][data-disabled] [data-part-segment]{cursor:not-allowed}[data-ui-datetime-field][data-part-root][data-disabled]>[data-part-start],[data-ui-datetime-field][data-part-root][data-disabled]>[data-part-end],[data-ui-datetime-field][data-part-root][data-disabled] [data-part-literal],[data-ui-datetime-field][data-part-root][data-disabled] [data-part-segment][data-placeholder]{color:var(--slotted-disabled-foreground)}@media(forced-colors:active){[data-ui-datetime-field][data-part-root][data-variant=plain]{border-color:ButtonBorder}[data-ui-datetime-field][data-part-root][data-relative]{border-color:Highlight}}}\n"], dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateTimeField, decorators: [{
             type: Component,
@@ -902,6 +917,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       <input
         #duration
         data-part="duration"
+        data-part-duration=""
         type="text"
         placeholder="+40m, 1h30, +2d"
         [attr.aria-label]="t('duration')"
@@ -913,6 +929,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       />
       <span
         data-part="preview"
+        data-part-preview=""
         role="status"
         aria-live="polite"
         [attr.data-resolved]="resolved() === null ? null : ''"
@@ -920,7 +937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       >
         <span slIcon directional><svg slGlyph name="chevron-right"></svg></span>
         @if (rollsDay()) {
-          <span data-part="preview-date">{{ previewDate() }}</span
+          <span data-part="preview-date" data-part-preview-date="">{{ previewDate() }}</span
           >, {{ previewTime() }}
         } @else {
           {{ previewTime() }}
@@ -929,6 +946,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
     } @else {
       <div
         data-part="segments"
+        data-part-segments=""
         role="group"
         [attr.id]="controlId()"
         [attr.aria-label]="label() ?? writtenLabel"
@@ -941,12 +959,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         (paste)="onPaste($event)"
       >
         @for (group of halves(); track group.half) {
-          <span data-part="half" [attr.data-half]="group.half">
+          <span data-part="half" data-part-half="" [attr.data-half]="group.half">
             @for (part of group.parts; track $index) {
               @if (part.type === 'literal') {
                 @if (part.boundary !== true || part.drawn !== false) {
                   <span
                     data-part="literal"
+                    data-part-literal=""
                     aria-hidden="true"
                     [attr.data-boundary]="part.boundary === true ? '' : null"
                     >{{ part.value }}</span
@@ -955,11 +974,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
               } @else {
                 <div
                   data-part="segment"
+                  data-part-segment=""
                   role="spinbutton"
                   [attr.data-field]="part.type"
                   [attr.data-half]="halfOf(part.type)"
                   [attr.data-placeholder]="valueOf(part.type) === null ? '' : null"
-                  [attr.aria-label]="part.value"
+                  [attr.aria-label]="t(part.type)"
                   [attr.aria-valuenow]="valueOf(part.type)"
                   [attr.aria-valuemin]="rangeOf(part.type).min"
                   [attr.aria-valuemax]="rangeOf(part.type).max"
@@ -979,10 +999,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         }
       </div>
     }
-    <span data-part="value-text" hidden [attr.id]="valueTextId">{{ spokenValue() }}</span>
+    <span data-part="value-text" data-part-value-text="" hidden [attr.id]="valueTextId">{{
+      spokenValue()
+    }}</span>
     @if (showClear()) {
       <button
         data-part="clear"
+        data-part-clear=""
         type="button"
         [attr.aria-label]="t('clear')"
         (click)="clear($event)"
@@ -991,12 +1014,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       </button>
     }
     <ng-content select="[slDateTimeFieldEnd]" />
-    <input data-part="hidden-input" type="hidden" readonly [attr.name]="name()" [value]="iso()" />`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+    <input
+      data-part="hidden-input"
+      data-part-hidden-input=""
+      type="hidden"
+      readonly
+      [attr.name]="name()"
+      [value]="iso()"
+    />`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlDateTimeField), multi: true },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => SlDateTimeField), multi: true },
                     ], host: {
                         'data-ui': 'datetime-field',
+                        'data-ui-datetime-field': '',
                         'data-part': 'root',
+                        'data-part-root': '',
                         '(mousedown)': 'onRootMouseDown($event)',
                         '(keydown)': 'onKeyDown($event)',
                         '[attr.data-size]': 'resolvedSize()',
@@ -1010,7 +1042,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '[attr.data-invalid]': "resolvedInvalid() === true ? '' : null",
                         '[attr.data-readonly]': "resolvedReadOnly() === true ? '' : null",
                         '[attr.data-required]': "resolvedRequired() === true ? '' : null",
-                    }, styles: ["@layer slotted.components{[data-ui=datetime-field][data-part=root]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-floor: var(--slotted-datetime-field-icon-size-min, 14px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_half-gap: var(--slotted-datetime-field-half-gap, var(--slotted-space-3, .375rem));--_action-size: var( --slotted-datetime-field-action-size, min( calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), calc( var(--_height) - var(--slotted-control-border-width, 1px) * 2 - var(--slotted-space-2, .25rem) ) ) );align-items:center;background-color:var( --slotted-datetime-field-background, var(--slotted-control-surface, Field) );border:var(--slotted-control-border-width, 1px) solid var(--slotted-datetime-field-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--slotted-datetime-field-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-datetime-field-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-datetime-field-color, var(--slotted-text, CanvasText));display:flex;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--_gap);inline-size:100%;min-block-size:var(--_height);min-inline-size:0;padding-inline:var(--_padding-inline);padding-block:var(--slotted-datetime-field-padding-block, var(--slotted-space-1, .125rem));transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=datetime-field][data-part=root]:has(>[data-part=clear]:last-child){padding-inline-end:max(0px,calc(var(--_padding-inline) - (var(--_action-size) - var(--_icon-size)) / 2))}[data-ui=datetime-field] [data-part=segments]{align-items:center;column-gap:var(--_half-gap);cursor:text;display:flex;flex:1 1 auto;min-inline-size:0;overflow:hidden}[data-ui=datetime-field] [data-part=half]{align-items:center;direction:ltr;display:flex;flex:0 0 auto;font-variant-numeric:tabular-nums;unicode-bidi:isolate}[data-ui=datetime-field] [data-part=segments]:dir(rtl){justify-content:flex-end}[data-ui=datetime-field] [data-part=segment]{--_digits: 2;background-color:transparent;border-radius:var(--slotted-datetime-field-segment-radius, var(--slotted-radius-xs, 2px));box-sizing:content-box;caret-color:transparent;color:inherit;cursor:text;font:inherit;flex:0 0 auto;min-inline-size:var( --slotted-datetime-field-segment-min-inline-size, calc(var(--_digits) * 1ch) );padding-inline:var( --slotted-datetime-field-segment-padding-inline, var(--slotted-space-1, .125rem) );text-align:center;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}[data-ui=datetime-field] [data-part=segment][data-field=year]{--_digits: 4}[data-ui=datetime-field] [data-part=segment][data-field=dayPeriod]{font-variant-numeric:normal;min-inline-size:var(--slotted-datetime-field-period-min-inline-size, 2ch);text-transform:none;white-space:nowrap}[data-ui=datetime-field] [data-part=segment][data-placeholder]{color:var(--slotted-datetime-field-placeholder-color, var(--slotted-text-muted, GrayText))}[data-ui=datetime-field] [data-part=literal]{color:var(--slotted-datetime-field-literal-color, var(--slotted-text-muted, GrayText));flex:0 0 auto;unicode-bidi:plaintext;-webkit-user-select:none;user-select:none}[data-ui=datetime-field] [data-part=literal][data-boundary]{margin-inline-end:0}[data-ui=datetime-field] [data-part=duration]{appearance:none;background-color:transparent;border:0;color:inherit;flex:1 1 auto;font:inherit;font-variant-numeric:tabular-nums;min-inline-size:0;outline:none;padding:0;direction:ltr;unicode-bidi:isolate}[data-ui=datetime-field] [data-part=duration]:dir(rtl){text-align:right}[data-ui=datetime-field] [data-part=duration]::placeholder{color:var(--slotted-datetime-field-placeholder-color, var(--slotted-text-muted, GrayText))}[data-ui=datetime-field] [data-part=preview]{--_mark: 1cap;color:var(--slotted-datetime-field-preview-color, var(--slotted-tone-accent-text));display:block;flex:0 0 auto;font-variant-numeric:tabular-nums;white-space:nowrap;unicode-bidi:plaintext}[data-ui=datetime-field] [data-part=preview]>[data-ui=icon]{--slotted-icon-size: var(--_mark);margin-inline:var(--slotted-space-1, .125rem);vertical-align:calc((((1cap + 1ex) / 2) - var(--_mark)) / 2)}[data-ui=datetime-field] [data-part=preview][data-rolls-day]>[data-part=preview-date]{color:var(--slotted-datetime-field-preview-day-color, var(--slotted-tone-accent-text));font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=datetime-field][data-part=root][data-relative]{border-color:var( --slotted-datetime-field-relative-border-color, var(--slotted-tone-accent-border) )}[data-ui=datetime-field][data-part=root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_gap: var(--slotted-control-gap-sm, 6px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-sm, 14px))}[data-ui=datetime-field][data-part=root][data-size=md]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px))}[data-ui=datetime-field][data-part=root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_gap: var(--slotted-control-gap-lg, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-lg, 18px))}[data-ui=datetime-field][data-part=root][data-variant=subtle]{background-color:var( --slotted-datetime-field-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-datetime-field-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui=datetime-field][data-part=root][data-variant=plain]{background-color:transparent;border-color:transparent;border-radius:var(--slotted-radius-none, 0px);box-shadow:none}[data-ui=datetime-field]>[data-part=start],[data-ui=datetime-field]>[data-part=end]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-datetime-field-adornment-color, var(--slotted-text-muted, GrayText));display:inline-flex;flex:0 0 auto;gap:var(--slotted-space-2, .25rem);line-height:1;unicode-bidi:plaintext}[data-ui=datetime-field]>[data-part=start]>svg,[data-ui=datetime-field]>[data-part=end]>svg{block-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui=datetime-field]>[data-part=clear]{align-items:center;appearance:none;background-color:transparent;block-size:var(--_action-size);border:0;border-radius:var(--slotted-datetime-field-radius, var(--slotted-control-radius, 4px));color:var(--slotted-datetime-field-action-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;inline-size:var(--_action-size);justify-content:center;padding:0;position:relative;touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui=datetime-field]>[data-part=clear]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=datetime-field]>[data-part=clear]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui=datetime-field]>[data-part=end]+[data-part=clear]:after{inset-inline-start:0}}[data-ui=datetime-field]>[data-part=clear]{--slotted-icon-size: var(--_icon-size)}[data-ui=datetime-field]>[data-part=clear]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-datetime-field-action-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=datetime-field]>[data-part=clear]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-datetime-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=datetime-field]>[data-part=clear]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=datetime-field][data-part=root]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]):not([data-incomplete]){border-color:var( --slotted-datetime-field-hover-border-color, var(--slotted-tone-accent-border) )}[data-ui=datetime-field][data-part=root][data-variant=subtle]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-datetime-field-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=datetime-field][data-part=root][data-variant=plain]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-datetime-field-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui=datetime-field][data-part=root][data-incomplete]:not([data-disabled]):not([data-readonly]):not([data-invalid]):not(:focus-within){border-color:var( --slotted-datetime-field-incomplete-border-color, var(--slotted-tone-warning-border) )}[data-ui=datetime-field][data-part=root]:has([data-part=segment]:focus),[data-ui=datetime-field][data-part=root]:has([data-part=duration]:focus){box-shadow:var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=datetime-field][data-part=root][data-variant=plain]:has([data-part=segment]:focus),[data-ui=datetime-field][data-part=root][data-variant=plain]:has([data-part=duration]:focus){box-shadow:none;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=datetime-field] [data-part=segment]:focus{background-color:var( --slotted-datetime-field-segment-focus-background, var(--slotted-tone-accent-solid) );color:var(--slotted-datetime-field-segment-focus-color, var(--slotted-tone-accent-on-solid));outline:none}[data-ui=datetime-field][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-datetime-field-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) );--_invalid-edge-width: var( --slotted-datetime-field-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-datetime-field-invalid-border-color, var(--slotted-tone-danger-border) );--_invalid-edge: inset 0 0 0 var(--_invalid-edge-width) var(--_invalid-edge-color);border-color:var( --slotted-datetime-field-invalid-border-color, var(--slotted-tone-danger-border) );box-shadow:var(--_invalid-edge)}[data-ui=datetime-field][data-part=root][data-invalid]:has([data-part=segment]:focus),[data-ui=datetime-field][data-part=root][data-invalid]:has([data-part=duration]:focus){box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}[data-ui=datetime-field][data-part=root][data-variant=plain][data-invalid]:has([data-part=segment]:focus),[data-ui=datetime-field][data-part=root][data-variant=plain][data-invalid]:has([data-part=duration]:focus){box-shadow:inset 0 0 0 calc(var(--slotted-focus-ring-offset, 2px) - var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)) var(--_invalid-edge-color)}@media(forced-colors:active){[data-ui=datetime-field][data-part=root][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}[data-ui=datetime-field][data-part=root][data-invalid]:has([data-part=segment]:focus),[data-ui=datetime-field][data-part=root][data-invalid]:has([data-part=duration]:focus){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=datetime-field][data-part=root][data-variant=plain][data-invalid]:has([data-part=segment]:focus),[data-ui=datetime-field][data-part=root][data-variant=plain][data-invalid]:has([data-part=duration]:focus){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * (var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)))}}[data-ui=datetime-field][data-part=root][data-readonly],[data-ui=datetime-field][data-part=root][data-readonly] [data-part=segments],[data-ui=datetime-field][data-part=root][data-readonly] [data-part=segment]{cursor:default}[data-ui=datetime-field][data-part=root][data-readonly]{background-color:var( --slotted-datetime-field-readonly-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=datetime-field][data-part=root][data-disabled]{background-color:var( --slotted-datetime-field-disabled-background, var(--slotted-disabled-background) );border-color:var( --slotted-datetime-field-disabled-border-color, var(--slotted-disabled-border) );box-shadow:none;color:var(--slotted-datetime-field-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=datetime-field][data-part=root][data-disabled] [data-part=segments],[data-ui=datetime-field][data-part=root][data-disabled] [data-part=segment]{cursor:not-allowed}[data-ui=datetime-field][data-part=root][data-disabled]>[data-part=start],[data-ui=datetime-field][data-part=root][data-disabled]>[data-part=end],[data-ui=datetime-field][data-part=root][data-disabled] [data-part=literal],[data-ui=datetime-field][data-part=root][data-disabled] [data-part=segment][data-placeholder]{color:var(--slotted-disabled-foreground)}@media(forced-colors:active){[data-ui=datetime-field][data-part=root][data-variant=plain]{border-color:ButtonBorder}[data-ui=datetime-field][data-part=root][data-relative]{border-color:Highlight}}}\n"] }]
+                    }, styles: ["@layer slotted.components{[data-ui-datetime-field][data-part-root]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-floor: var(--slotted-datetime-field-icon-size-min, 14px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_half-gap: var(--slotted-datetime-field-half-gap, var(--slotted-space-3, .375rem));--_action-size: var( --slotted-datetime-field-action-size, min( calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), calc( var(--_height) - var(--slotted-control-border-width, 1px) * 2 - var(--slotted-space-2, .25rem) ) ) );align-items:center;background-color:var( --slotted-datetime-field-background, var(--slotted-control-surface, Field) );border:var(--slotted-control-border-width, 1px) solid var(--slotted-datetime-field-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--slotted-datetime-field-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-datetime-field-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-datetime-field-color, var(--slotted-text, CanvasText));display:flex;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--_gap);inline-size:100%;min-block-size:var(--_height);min-inline-size:0;padding-inline:var(--_padding-inline);padding-block:var(--slotted-datetime-field-padding-block, var(--slotted-space-1, .125rem));transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui-datetime-field][data-part-root]:has(>[data-part-clear]:last-child){padding-inline-end:max(0px,calc(var(--_padding-inline) - (var(--_action-size) - var(--_icon-size)) / 2))}[data-ui-datetime-field] [data-part-segments]{align-items:center;column-gap:var(--_half-gap);cursor:text;display:flex;flex:1 1 auto;min-inline-size:0;overflow:hidden}[data-ui-datetime-field] [data-part-half]{align-items:center;direction:ltr;display:flex;flex:0 0 auto;font-variant-numeric:tabular-nums;unicode-bidi:isolate}[data-ui-datetime-field] [data-part-segments]:dir(rtl){justify-content:flex-end}[data-ui-datetime-field] [data-part-segment]{--_digits: 2;background-color:transparent;border-radius:var(--slotted-datetime-field-segment-radius, var(--slotted-radius-xs, 2px));box-sizing:content-box;caret-color:transparent;color:inherit;cursor:text;font:inherit;flex:0 0 auto;min-inline-size:var( --slotted-datetime-field-segment-min-inline-size, calc(var(--_digits) * 1ch) );padding-inline:var( --slotted-datetime-field-segment-padding-inline, var(--slotted-space-1, .125rem) );text-align:center;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}[data-ui-datetime-field] [data-part-segment][data-field=year]{--_digits: 4}[data-ui-datetime-field] [data-part-segment][data-field=dayPeriod]{font-variant-numeric:normal;min-inline-size:var(--slotted-datetime-field-period-min-inline-size, 2ch);text-transform:none;white-space:nowrap}[data-ui-datetime-field] [data-part-segment][data-placeholder]{color:var(--slotted-datetime-field-placeholder-color, var(--slotted-text-muted, GrayText))}[data-ui-datetime-field] [data-part-literal]{color:var(--slotted-datetime-field-literal-color, var(--slotted-text-muted, GrayText));flex:0 0 auto;unicode-bidi:plaintext;-webkit-user-select:none;user-select:none}[data-ui-datetime-field] [data-part-literal][data-boundary]{margin-inline-end:0}[data-ui-datetime-field] [data-part-duration]{appearance:none;background-color:transparent;border:0;color:inherit;flex:1 1 auto;font:inherit;font-variant-numeric:tabular-nums;min-inline-size:0;outline:none;padding:0;direction:ltr;unicode-bidi:isolate}[data-ui-datetime-field] [data-part-duration]:dir(rtl){text-align:right}[data-ui-datetime-field] [data-part-duration]::placeholder{color:var(--slotted-datetime-field-placeholder-color, var(--slotted-text-muted, GrayText))}[data-ui-datetime-field] [data-part-preview]{--_mark: 1cap;color:var(--slotted-datetime-field-preview-color, var(--slotted-tone-accent-text));display:block;flex:0 0 auto;font-variant-numeric:tabular-nums;white-space:nowrap;unicode-bidi:plaintext}[data-ui-datetime-field] [data-part-preview]>[data-ui-icon]{--slotted-icon-size: var(--_mark);margin-inline:var(--slotted-space-1, .125rem);vertical-align:calc((((1cap + 1ex) / 2) - var(--_mark)) / 2)}[data-ui-datetime-field] [data-part-preview][data-rolls-day]>[data-part-preview-date]{color:var(--slotted-datetime-field-preview-day-color, var(--slotted-tone-accent-text));font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui-datetime-field][data-part-root][data-relative]{border-color:var( --slotted-datetime-field-relative-border-color, var(--slotted-tone-accent-border) )}[data-ui-datetime-field][data-part-root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_gap: var(--slotted-control-gap-sm, 6px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-sm, 14px))}[data-ui-datetime-field][data-part-root][data-size=md]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px))}[data-ui-datetime-field][data-part-root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_gap: var(--slotted-control-gap-lg, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-lg, 18px))}[data-ui-datetime-field][data-part-root][data-variant=subtle]{background-color:var( --slotted-datetime-field-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-datetime-field-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui-datetime-field][data-part-root][data-variant=plain]{background-color:transparent;border-color:transparent;border-radius:var(--slotted-radius-none, 0px);box-shadow:none}[data-ui-datetime-field]>[data-part-start],[data-ui-datetime-field]>[data-part-end]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-datetime-field-adornment-color, var(--slotted-text-muted, GrayText));display:inline-flex;flex:0 0 auto;gap:var(--slotted-space-2, .25rem);line-height:1;unicode-bidi:plaintext}[data-ui-datetime-field]>[data-part-start]>svg,[data-ui-datetime-field]>[data-part-end]>svg{block-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui-datetime-field]>[data-part-clear]{align-items:center;appearance:none;background-color:transparent;block-size:var(--_action-size);border:0;border-radius:var(--slotted-datetime-field-radius, var(--slotted-control-radius, 4px));color:var(--slotted-datetime-field-action-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;inline-size:var(--_action-size);justify-content:center;padding:0;position:relative;touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui-datetime-field]>[data-part-clear]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui-datetime-field]>[data-part-clear]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui-datetime-field]>[data-part-end]+[data-part-clear]:after{inset-inline-start:0}}[data-ui-datetime-field]>[data-part-clear]{--slotted-icon-size: var(--_icon-size)}[data-ui-datetime-field]>[data-part-clear]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-datetime-field-action-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui-datetime-field]>[data-part-clear]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-datetime-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui-datetime-field]>[data-part-clear]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui-datetime-field][data-part-root]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]):not([data-incomplete]){border-color:var( --slotted-datetime-field-hover-border-color, var(--slotted-tone-accent-border) )}[data-ui-datetime-field][data-part-root][data-variant=subtle]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-datetime-field-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui-datetime-field][data-part-root][data-variant=plain]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-datetime-field-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui-datetime-field][data-part-root][data-incomplete]:not([data-disabled]):not([data-readonly]):not([data-invalid]):not(:focus-within){border-color:var( --slotted-datetime-field-incomplete-border-color, var(--slotted-tone-warning-border) )}[data-ui-datetime-field][data-part-root]:has([data-part-segment]:focus),[data-ui-datetime-field][data-part-root]:has([data-part-duration]:focus){box-shadow:var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-control-focus-ring-offset, var(--slotted-focus-ring-offset, 2px))}[data-ui-datetime-field][data-part-root][data-variant=plain]:has([data-part-segment]:focus),[data-ui-datetime-field][data-part-root][data-variant=plain]:has([data-part-duration]:focus){box-shadow:none;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui-datetime-field] [data-part-segment]:focus{background-color:var( --slotted-datetime-field-segment-focus-background, var(--slotted-tone-accent-solid) );color:var(--slotted-datetime-field-segment-focus-color, var(--slotted-tone-accent-on-solid));outline:none}[data-ui-datetime-field][data-part-root][data-invalid]{--slotted-focus-ring-color: var( --slotted-datetime-field-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) );--_invalid-edge-width: var( --slotted-datetime-field-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-datetime-field-invalid-border-color, var(--slotted-tone-danger-border) );--_invalid-edge: inset 0 0 0 var(--_invalid-edge-width) var(--_invalid-edge-color);border-color:var( --slotted-datetime-field-invalid-border-color, var(--slotted-tone-danger-border) );box-shadow:var(--_invalid-edge)}[data-ui-datetime-field][data-part-root][data-invalid]:has([data-part-segment]:focus),[data-ui-datetime-field][data-part-root][data-invalid]:has([data-part-duration]:focus){box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}[data-ui-datetime-field][data-part-root][data-variant=plain][data-invalid]:has([data-part-segment]:focus),[data-ui-datetime-field][data-part-root][data-variant=plain][data-invalid]:has([data-part-duration]:focus){box-shadow:inset 0 0 0 calc(var(--slotted-focus-ring-offset, 2px) - var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)) var(--_invalid-edge-color)}@media(forced-colors:active){[data-ui-datetime-field][data-part-root][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}[data-ui-datetime-field][data-part-root][data-invalid]:has([data-part-segment]:focus),[data-ui-datetime-field][data-part-root][data-invalid]:has([data-part-duration]:focus){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var( --slotted-control-focus-ring-offset, var(--slotted-focus-ring-offset, 2px) )}[data-ui-datetime-field][data-part-root][data-variant=plain][data-invalid]:has([data-part-segment]:focus),[data-ui-datetime-field][data-part-root][data-variant=plain][data-invalid]:has([data-part-duration]:focus){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * (var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)))}}[data-ui-datetime-field][data-part-root][data-readonly],[data-ui-datetime-field][data-part-root][data-readonly] [data-part-segments],[data-ui-datetime-field][data-part-root][data-readonly] [data-part-segment]{cursor:default}[data-ui-datetime-field][data-part-root][data-readonly]{background-color:var( --slotted-datetime-field-readonly-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui-datetime-field][data-part-root][data-disabled]{background-color:var( --slotted-datetime-field-disabled-background, var(--slotted-disabled-background) );border-color:var( --slotted-datetime-field-disabled-border-color, var(--slotted-disabled-border) );box-shadow:none;color:var(--slotted-datetime-field-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui-datetime-field][data-part-root][data-disabled] [data-part-segments],[data-ui-datetime-field][data-part-root][data-disabled] [data-part-segment]{cursor:not-allowed}[data-ui-datetime-field][data-part-root][data-disabled]>[data-part-start],[data-ui-datetime-field][data-part-root][data-disabled]>[data-part-end],[data-ui-datetime-field][data-part-root][data-disabled] [data-part-literal],[data-ui-datetime-field][data-part-root][data-disabled] [data-part-segment][data-placeholder]{color:var(--slotted-disabled-foreground)}@media(forced-colors:active){[data-ui-datetime-field][data-part-root][data-variant=plain]{border-color:ButtonBorder}[data-ui-datetime-field][data-part-root][data-relative]{border-color:Highlight}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTime", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTime", required: false }] }], isDateUnavailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDateUnavailable", required: false }] }], isTimeUnavailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTimeUnavailable", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], hourCycle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourCycle", required: false }] }], granularity: [{ type: i0.Input, args: [{ isSignal: true, alias: "granularity", required: false }] }], calendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendar", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], yearPivot: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearPivot", required: false }] }], referenceDateTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "referenceDateTime", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], relative: [{ type: i0.Input, args: [{ isSignal: true, alias: "relative", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 /**
@@ -1024,7 +1056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  */
 class SlDateTimeFieldStart {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateTimeFieldStart, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDateTimeFieldStart, isStandalone: true, selector: "[slDateTimeFieldStart]", host: { attributes: { "data-part": "start" } }, exportAs: ["slDateTimeFieldStart"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDateTimeFieldStart, isStandalone: true, selector: "[slDateTimeFieldStart]", host: { attributes: { "data-part": "start", "data-part-start": "" } }, exportAs: ["slDateTimeFieldStart"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateTimeFieldStart, decorators: [{
             type: Directive,
@@ -1032,13 +1064,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: '[slDateTimeFieldStart]',
                     standalone: true,
                     exportAs: 'slDateTimeFieldStart',
-                    host: { 'data-part': 'start' },
+                    host: { 'data-part': 'start', 'data-part-start': '' },
                 }]
         }] });
 /** An adornment after the value in the reading direction. */
 class SlDateTimeFieldEnd {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateTimeFieldEnd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDateTimeFieldEnd, isStandalone: true, selector: "[slDateTimeFieldEnd]", host: { attributes: { "data-part": "end" } }, exportAs: ["slDateTimeFieldEnd"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDateTimeFieldEnd, isStandalone: true, selector: "[slDateTimeFieldEnd]", host: { attributes: { "data-part": "end", "data-part-end": "" } }, exportAs: ["slDateTimeFieldEnd"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateTimeFieldEnd, decorators: [{
             type: Directive,
@@ -1046,7 +1078,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: '[slDateTimeFieldEnd]',
                     standalone: true,
                     exportAs: 'slDateTimeFieldEnd',
-                    host: { 'data-part': 'end' },
+                    host: { 'data-part': 'end', 'data-part-end': '' },
                 }]
         }] });