From 7ff0f0c715963c7c962fba17080df85c7e778401 Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Thu, 30 Jul 2026 10:32:50 +0300
Subject: [PATCH 01/11] feat(form-field,date-field,time-field): single
 clearable prop on the field #572
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

BREAKING CHANGE: tedi-time-field no longer accepts clearable — set it on the
wrapping tedi-form-field instead.
BREAKING CHANGE: date and time fields no longer show a clear button by default.
tedi-time-field's clearable previously defaulted to true, so add clearable to
the wrapping tedi-form-field to keep it.
BREAKING CHANGE: tedi-date-field no longer accepts size. It had no effect —
bind size on the wrapping tedi-form-field, which is where it always applied.
---
 .../date-field/date-field.component.spec.ts   |  44 +++++-
 .../form/date-field/date-field.component.ts   |  22 ++-
 .../form/date-field/date-field.stories.ts     | 136 ++++++++++--------
 .../form/form-field/form-field-context.ts     |  15 ++
 .../form/form-field/form-field-control.ts     |   7 +
 .../form/form-field/form-field.component.html |   2 +-
 .../form-field/form-field.component.spec.ts   |  42 ++++++
 .../form/form-field/form-field.component.ts   |  39 ++++-
 tedi/components/form/index.ts                 |   1 +
 .../time-field/time-field.component.spec.ts   |  20 +++
 .../form/time-field/time-field.component.ts   |  14 +-
 .../form/time-field/time-field.stories.ts     |  66 ++++++---
 12 files changed, 304 insertions(+), 104 deletions(-)
 create mode 100644 tedi/components/form/form-field/form-field-context.ts

diff --git a/tedi/components/form/date-field/date-field.component.spec.ts b/tedi/components/form/date-field/date-field.component.spec.ts
index a4b894a02..fb2ad1208 100644
--- a/tedi/components/form/date-field/date-field.component.spec.ts
+++ b/tedi/components/form/date-field/date-field.component.spec.ts
@@ -1104,16 +1104,15 @@ describe("DateFieldComponent", () => {
     });
   });
 
-  describe("clear button", () => {
-    it("renders once the field has a value", () => {
+  describe("clearable", () => {
+    it("renders no clear button until the form field opts in", () => {
       const { component, el, fixture } = createField();
-      expect(el.querySelector(".tedi-date-input__clear")).toBeNull();
-
       fixture.componentRef.setInput("value", new Date(2026, 4, 14));
       fixture.detectChanges();
 
-      expect(component.canClear()).toBe(true);
-      expect(el.querySelector(".tedi-date-input__clear")).not.toBeNull();
+      expect(component.clearableResolved()).toBe(false);
+      expect(component.canClear()).toBe(false);
+      expect(el.querySelector(".tedi-date-input__clear")).toBeNull();
     });
   });
 
@@ -1308,7 +1307,7 @@ describe("DateFieldComponent with ReactiveFormsModule", () => {
     ReactiveFormsModule,
   ],
   template: `
-    <tedi-form-field>
+    <tedi-form-field [clearable]="clearable">
       <label tedi-label for="composite-date">Date</label>
       <tedi-date-field inputId="composite-date" [formControl]="control" />
       <tedi-feedback-text text="Error" type="error" />
@@ -1317,6 +1316,7 @@ describe("DateFieldComponent with ReactiveFormsModule", () => {
 })
 class CompositeHostComponent {
   control = new FormControl<Date | Date[] | DateRange | null>(null);
+  clearable = false;
 }
 
 describe("DateFieldComponent inside FormFieldComponent", () => {
@@ -1350,6 +1350,36 @@ describe("DateFieldComponent inside FormFieldComponent", () => {
   it("renders feedback text", () => {
     expect(el.querySelector("tedi-feedback-text")).toBeTruthy();
   });
+
+  describe("clearable driven by the form field", () => {
+    const seed = (clearable: boolean) => {
+      fixture.componentInstance.clearable = clearable;
+      fixture.componentInstance.control.setValue(new Date(2026, 4, 14));
+      fixture.detectChanges();
+    };
+
+    it("renders none when the form field opts out", () => {
+      seed(false);
+      expect(el.querySelectorAll(".tedi-date-input__clear")).toHaveLength(0);
+      expect(el.querySelectorAll(".tedi-form-field__clear")).toHaveLength(0);
+    });
+
+    it("renders exactly one when the form field opts in", () => {
+      seed(true);
+      expect(el.querySelectorAll(".tedi-date-input__clear")).toHaveLength(1);
+      expect(el.querySelectorAll(".tedi-form-field__clear")).toHaveLength(0);
+    });
+
+    it("still clears programmatically when opted out", () => {
+      seed(false);
+      const component = fixture.debugElement.query(
+        By.directive(DateFieldComponent),
+      ).componentInstance as DateFieldComponent;
+
+      component.clearField();
+      expect(component.value()).toBeNull();
+    });
+  });
 });
 
 // TODO: footer-projection cannot be asserted in jsdom; see date-field.stories.ts WithFooter
diff --git a/tedi/components/form/date-field/date-field.component.ts b/tedi/components/form/date-field/date-field.component.ts
index 15a94e608..e31082366 100644
--- a/tedi/components/form/date-field/date-field.component.ts
+++ b/tedi/components/form/date-field/date-field.component.ts
@@ -32,6 +32,7 @@ import {
   FormFieldControl,
   TEDI_FORM_FIELD_CONTROL,
 } from "../form-field/form-field-control";
+import { TEDI_FORM_FIELD } from "../form-field/form-field-context";
 import {
   breakpointInput,
   BreakpointInput,
@@ -53,7 +54,6 @@ import {
   DateFieldModalComponent,
   DateFieldModalData,
 } from "./date-field-modal/date-field-modal.component";
-import { ButtonComponent } from "../../buttons";
 import { TediTranslationPipe } from "../../../services/translation/translation.pipe";
 
 type DateFieldValue = Date | Date[] | DateRange | null;
@@ -65,7 +65,6 @@ type YearPredicate = (year: Date) => boolean;
 type DateFieldCalendarTrigger = "input" | "button";
 type DateFieldModalInput = boolean | "sm" | "md" | "lg" | "xl";
 export type DateFieldUseNativePicker = boolean | "sm" | "md" | "lg" | "xl";
-export type DateFieldSize = "default" | "small";
 
 @Component({
   selector: "tedi-date-field",
@@ -77,7 +76,6 @@ export type DateFieldSize = "default" | "small";
   imports: [
     CalendarComponent,
     DateInputComponent,
-    ButtonComponent,
     OverlayModule,
     A11yModule,
     TediTranslationPipe,
@@ -157,8 +155,6 @@ export class DateFieldComponent
    * bind it there too, since DateField owns no label.
    */
   readonly required = input<boolean>(false);
-  /** Field size — matches the surrounding `tedi-form-field`. */
-  readonly size = input<DateFieldSize>("default");
   /** Disables all dates before this date (inclusive boundary stays enabled). */
   readonly minDate = input<Date | undefined>(undefined);
   /** Disables all dates after this date (inclusive boundary stays enabled). */
@@ -319,6 +315,16 @@ export class DateFieldComponent
 
   readonly invalid = computed(() => this.formInvalid());
 
+  private readonly formField = inject(TEDI_FORM_FIELD, { optional: true });
+
+  /** The clear button sits in the date input's action row, beside the calendar. */
+  readonly ownsClearButton = true;
+
+  /** Driven by the wrapping `tedi-form-field`'s `clearable`. */
+  readonly clearableResolved = computed(
+    () => this.formField?.clearable() ?? false,
+  );
+
   readonly resolvedDisabledMatchers = computed<Matcher[]>(() => {
     const result: Matcher[] = [];
     const explicit = this.disabledMatchers();
@@ -427,7 +433,11 @@ export class DateFieldComponent
   });
 
   readonly canClear = computed(
-    () => !!this.value() && !this.fieldDisabled() && !this.readOnly(),
+    () =>
+      this.clearableResolved() &&
+      !!this.value() &&
+      !this.fieldDisabled() &&
+      !this.readOnly(),
   );
 
   readonly inputIsTrigger = computed(
diff --git a/tedi/components/form/date-field/date-field.stories.ts b/tedi/components/form/date-field/date-field.stories.ts
index 83b980e5d..f55a743a4 100644
--- a/tedi/components/form/date-field/date-field.stories.ts
+++ b/tedi/components/form/date-field/date-field.stories.ts
@@ -10,7 +10,10 @@ import {
   Validators,
 } from "@angular/forms";
 import { DateFieldComponent } from "./date-field.component";
-import { FormFieldComponent } from "../form-field/form-field.component";
+import {
+  FormFieldComponent,
+  type InputSize,
+} from "../form-field/form-field.component";
 import { LabelComponent } from "../label/label.component";
 import { FeedbackTextComponent } from "../feedback-text/feedback-text.component";
 import { ButtonComponent } from "../../buttons/button/button.component";
@@ -68,7 +71,6 @@ const parseUS = (value: string): Date | undefined => {
  */
 const COMMON_INPUTS = [
   "mode",
-  "size",
   "selectionLevel",
   "monthYearSelectType",
   "localeCode",
@@ -101,6 +103,10 @@ const argBindings = (exclude: string[] = []): string =>
     .join("\n          ");
 
 type DateFieldStoryArgs = DateFieldComponent & {
+  /** Story-only: size applied to the wrapping `tedi-form-field`. */
+  size?: InputSize;
+  /** Story-only: clearable applied to the wrapping `tedi-form-field`. */
+  clearable?: boolean;
   /** Story-only: text rendered in the sibling `<label tedi-label>`. */
   label?: string;
   /** Story-only: text rendered in a `tedi-feedback-text` below the field. */
@@ -125,13 +131,12 @@ const renderSingle: NonNullable<StoryObj<DateFieldStoryArgs>["render"]> = (
   return {
     props: { ...args, control },
     template: `
-      <tedi-form-field [size]="size">
+      <tedi-form-field [size]="size" [clearable]="clearable">
         <label tedi-label [for]="inputId" [required]="required">{{ label }}</label>
         <tedi-date-field
           [inputId]="inputId"
           [formControl]="control"
           [mode]="mode"
-          [size]="size"
           [selectionLevel]="selectionLevel"
           [monthYearSelectType]="monthYearSelectType"
           [localeCode]="localeCode"
@@ -213,6 +218,7 @@ export default {
     monthYearSelectType: "dropdown",
     localeCode: "et-EE",
     placeholder: "",
+    clearable: false,
     inputDisabled: false,
     readOnly: false,
     required: false,
@@ -236,7 +242,7 @@ export default {
         "Unique ID for label association and accessibility. Bind the sibling `<label tedi-label [for]>` to the same value.",
       control: { type: "text" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "string" },
       },
     },
@@ -255,7 +261,7 @@ export default {
       control: { type: "radio" },
       options: ["single", "multiple", "range"],
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: {
           summary: "DateFieldMode",
           detail: "single \nmultiple \nrange",
@@ -268,7 +274,7 @@ export default {
         "`multiple` mode tag layout. `true` wraps tags across rows and grows the field height; `false` keeps a single row and collapses overflow into a `+N` counter.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "true" },
       },
@@ -279,7 +285,7 @@ export default {
       control: { type: "radio" },
       options: [false, "start", "end"],
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "TagEllipsis", detail: "false \nstart \nend" },
         defaultValue: { summary: "false" },
       },
@@ -289,19 +295,19 @@ export default {
         "In `multiple` mode, whether tags show a remove button. `false` renders them as read-only chips.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "true" },
       },
     },
     size: {
       description:
-        "Field size — should match the surrounding `tedi-form-field`'s `size`.",
+        "Size of the surrounding `tedi-form-field` — the date field inherits it.",
       control: { type: "radio" },
       options: ["default", "small"],
       table: {
-        category: "inputs",
-        type: { summary: "DateFieldSize", detail: "default \nsmall" },
+        category: "Form Field inputs",
+        type: { summary: "InputSize", detail: "default \nsmall" },
         defaultValue: { summary: "default" },
       },
     },
@@ -311,7 +317,7 @@ export default {
       control: { type: "radio" },
       options: ["days", "months", "years"],
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: {
           summary: "CalendarView",
           detail: "days \nmonths \nyears",
@@ -325,7 +331,7 @@ export default {
       control: { type: "radio" },
       options: ["dropdown", "grid"],
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: '"dropdown" | "grid"' },
         defaultValue: { summary: "dropdown" },
       },
@@ -335,7 +341,7 @@ export default {
         "BCP-47 locale for weekday/month names, the first day of the week, and the default `formatDate`/`parseDate` behaviour.",
       control: { type: "text" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "string" },
         defaultValue: { summary: "et-EE" },
       },
@@ -344,17 +350,27 @@ export default {
       description: "Placeholder rendered in the input when there is no value.",
       control: { type: "text" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "string" },
         defaultValue: { summary: '""' },
       },
     },
+    clearable: {
+      description:
+        "Set on the wrapping `tedi-form-field`. Opt in to show a clear button once the field has a value.",
+      control: { type: "boolean" },
+      table: {
+        category: "Form Field inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
     inputDisabled: {
       description:
         "Disables the field entirely — input, icon button, and calendar.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "false" },
       },
@@ -364,7 +380,7 @@ export default {
         "Blocks typing into the input but leaves the calendar interactive — useful for guided picking.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "false" },
       },
@@ -374,7 +390,7 @@ export default {
         "Marks the input as required (sets the native `required` attribute for validation). In `multiple` mode it also prevents clearing the last selected date. The asterisk indicator lives on the sibling `<label tedi-label [required]>` — bind it there too, since DateField owns no label.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "false" },
       },
@@ -385,7 +401,7 @@ export default {
         "Disables specific days via matchers (does not disable the whole field).",
       control: { type: "object" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: {
           summary: "Matcher | Matcher[]",
           detail: `Date \n| Date[] \n| { before: Date } \n| { after: Date } \n| { from: Date; to?: Date } \n| { dayOfWeek: number[] } \n| ((date: Date) => boolean)
@@ -398,7 +414,7 @@ export default {
       description: "Disable all dates before today.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "false" },
       },
@@ -407,7 +423,7 @@ export default {
       description: "Disable all dates after today.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "false" },
       },
@@ -417,7 +433,7 @@ export default {
         "Render the trailing/leading days from the adjacent month inside the current month's grid.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "true" },
       },
@@ -427,7 +443,7 @@ export default {
         "Render an ISO week-number column on the left of the day grid.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "false" },
       },
@@ -437,7 +453,7 @@ export default {
         "Enables the calendar picker UI. When `false`, hides the icon button and disables the popover/modal — the user can only type a date.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "true" },
       },
@@ -447,7 +463,7 @@ export default {
         "Number of month grids shown side by side. Accepts a `BreakpointInput<number>` — a plain number (e.g. `2`) is honoured at every breakpoint (including mobile/modal); pass a per-breakpoint object (e.g. `{ xs: 1, lg: 2 }`) to narrow it on small screens yourself.",
       control: { type: "number", min: 1, max: 4 },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: {
           summary: "BreakpointInput<number>",
           detail: "number \n{ xs: number; sm?: number; md?: number; lg?: number; xl?: number; xxl?: number }",
@@ -461,7 +477,7 @@ export default {
       control: { type: "select" },
       options: [true, false, "sm", "md", "lg", "xl"],
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: {
           summary: "DateFieldUseNativePicker",
           detail: "boolean \n\"sm\" | \"md\" | \"lg\" | \"xl\"",
@@ -475,7 +491,7 @@ export default {
       control: { type: "select" },
       options: [true, false, "sm", "md", "lg", "xl"],
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: {
           summary: "DateFieldModalInput",
           detail: "boolean \n\"sm\" | \"md\" | \"lg\" | \"xl\"",
@@ -489,7 +505,7 @@ export default {
       control: { type: "select" },
       options: [true, false, "sm", "md", "lg", "xl"],
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: {
           summary: "ModalFullscreen",
           detail: "boolean \n\"sm\" | \"md\" | \"lg\" | \"xl\"",
@@ -502,7 +518,7 @@ export default {
         "What opens the calendar. `button` opens it from the icon button; `input` also opens it when the text input is focused. Accepts a `BreakpointInput` for per-breakpoint behaviour.",
       control: { type: "object" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: {
           summary: "BreakpointInput<DateFieldCalendarTrigger>",
           detail: '"input" | "button" \n{ xs: ...; sm?: ...; md?: ... }',
@@ -515,7 +531,7 @@ export default {
         "Custom formatter for rendering the selected value as the input's display string. Overrides the locale-aware default. Receives the `DateFieldValue` and returns a string.",
       control: false,
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "(value: DateFieldValue) => string" },
         defaultValue: { summary: "undefined" },
       },
@@ -525,7 +541,7 @@ export default {
         "Custom parser for turning typed input into a value. Overrides the locale-aware default. Receives the raw string and returns a `DateFieldValue`, or `undefined` when the input can't be parsed.",
       control: false,
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "(value: string) => DateFieldValue | undefined" },
         defaultValue: { summary: "undefined" },
       },
@@ -550,13 +566,13 @@ export const Size: Story = {
         <tedi-col>
           <tedi-form-field size="default">
             <label tedi-label for="date-size-default">Vaikimisi</label>
-            <tedi-date-field inputId="date-size-default" size="default" ${argBindings(["size"])} />
+            <tedi-date-field inputId="date-size-default" ${argBindings()} />
           </tedi-form-field>
         </tedi-col>
         <tedi-col>
           <tedi-form-field size="small">
             <label tedi-label for="date-size-small">Väike</label>
-            <tedi-date-field inputId="date-size-small" size="small" ${argBindings(["size"])} />
+            <tedi-date-field inputId="date-size-small" ${argBindings()} />
           </tedi-form-field>
         </tedi-col>
       </tedi-row>
@@ -566,7 +582,7 @@ export const Size: Story = {
     docs: {
       description: {
         story:
-          "Set `size` on both the `tedi-form-field` wrapper and the `tedi-date-field` so the input height and the field chrome stay in sync.",
+          "Field size comes from the surrounding `<tedi-form-field size=\"small\">` — the `tedi-date-field` itself has no `size` input.",
       },
     },
   },
@@ -581,26 +597,26 @@ export const States: Story = {
       template: `
         <tedi-row [cols]="1" [gap]="3">
           <tedi-col>
-            <tedi-form-field [size]="size">
+            <tedi-form-field [size]="size" [clearable]="clearable">
               <label tedi-label for="date-state-default">Vaikimisi</label>
               <tedi-date-field inputId="date-state-default" ${argBindings()} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size">
+            <tedi-form-field [size]="size" [clearable]="clearable">
               <label tedi-label for="date-state-disabled">Mitteaktiivne</label>
               <tedi-date-field inputId="date-state-disabled" [formControl]="disabledControl" ${argBindings()} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size">
+            <tedi-form-field [size]="size" [clearable]="clearable">
               <label tedi-label for="date-state-valid">Õnnestumine</label>
               <tedi-date-field inputId="date-state-valid" ${argBindings()} />
               <tedi-feedback-text text="Tagasiside tekst" type="valid" />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size">
+            <tedi-form-field [size]="size" [clearable]="clearable">
               <label tedi-label for="date-state-error">Viga</label>
               <tedi-date-field inputId="date-state-error" ${argBindings()} />
               <tedi-feedback-text text="Tagasiside tekst" type="error" />
@@ -633,20 +649,20 @@ export const FieldOptions: Story = {
       template: `
         <tedi-row [cols]="1" [gap]="3">
           <tedi-col>
-            <tedi-form-field [size]="size">
+            <tedi-form-field [size]="size" [clearable]="clearable">
               <label tedi-label for="date-opt-default">Vaikimisi kuupäevaväli</label>
               <tedi-date-field inputId="date-opt-default" ${argBindings(["placeholder"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size">
+            <tedi-form-field [size]="size" [clearable]="clearable">
               <label tedi-label for="date-opt-hint">Kuupäevaväli vihjega</label>
               <tedi-date-field inputId="date-opt-hint" placeholder="pp.kk.aaaa" ${argBindings(["placeholder"])} />
               <tedi-feedback-text text="pp.kk.aaaa" />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size">
+            <tedi-form-field [size]="size" [clearable]="clearable">
               <label tedi-label for="date-opt-shortcuts">Kuupäevaväli otseteedega</label>
               <tedi-date-field inputId="date-opt-shortcuts" [formControl]="shortcutControl" ${argBindings(["placeholder"])} />
               <div class="flex gap-2">
@@ -683,25 +699,25 @@ export const ValueType: Story = {
       template: `
         <tedi-row [cols]="1" [gap]="3">
           <tedi-col>
-            <tedi-form-field [size]="size">
+            <tedi-form-field [size]="size" [clearable]="clearable">
               <label tedi-label for="date-vt-single">Üksik kuupäev</label>
               <tedi-date-field inputId="date-vt-single" [formControl]="single" placeholder="pp.kk.aaaa" ${argBindings(["mode", "placeholder"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size">
+            <tedi-form-field [size]="size" [clearable]="clearable">
               <label tedi-label for="date-vt-single-value">Üksik kuupäev vaikeväärtusega</label>
               <tedi-date-field inputId="date-vt-single-value" [formControl]="singleWithValue" ${argBindings(["mode", "placeholder"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size">
+            <tedi-form-field [size]="size" [clearable]="clearable">
               <label tedi-label for="date-vt-multiple">Mitu kuupäeva</label>
               <tedi-date-field inputId="date-vt-multiple" mode="multiple" [formControl]="multiple" ${argBindings(["mode", "placeholder"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size">
+            <tedi-form-field [size]="size" [clearable]="clearable">
               <label tedi-label for="date-vt-range">Vahemik</label>
               <tedi-date-field inputId="date-vt-range" mode="range" [formControl]="range" ${argBindings(["mode", "placeholder"])} />
             </tedi-form-field>
@@ -733,14 +749,14 @@ export const MultipleTagLayout: Story = {
       template: `
         <tedi-row [cols]="1" [gap]="3">
           <tedi-col>
-            <tedi-form-field [size]="size">
+            <tedi-form-field [size]="size" [clearable]="clearable">
               <label tedi-label for="date-tags-wrap">Mitmerealine (vaikimisi)</label>
               <tedi-date-field inputId="date-tags-wrap" mode="multiple" [multiRow]="true" [formControl]="wrapControl" ${argBindings(["mode", "multiRow", "tagEllipsis"])} />
               <tedi-feedback-text text="Sildid murduvad uutele ridadele; välja kõrgus kasvab." />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size">
+            <tedi-form-field [size]="size" [clearable]="clearable">
               <label tedi-label for="date-tags-single">Üherealine + loendur</label>
               <tedi-date-field inputId="date-tags-single" mode="multiple" [multiRow]="false" tagEllipsis="start" [formControl]="singleRowControl" ${argBindings(["mode", "multiRow", "tagEllipsis"])} />
               <tedi-feedback-text text="Sildid püsivad ühel real; ülejääk koondub +N loendurisse. Kitsad sildid lühenevad algusest (…06.2026)." />
@@ -769,13 +785,13 @@ export const OnClickType: Story = {
       template: `
         <tedi-row [gap]="3" [xs]="{ cols: 1 }" [lg]="{ cols: 2 }">
           <tedi-col>
-            <tedi-form-field [size]="size">
+            <tedi-form-field [size]="size" [clearable]="clearable">
               <label tedi-label for="date-trigger-button">Kalendriikoon on klõpsatav</label>
               <tedi-date-field inputId="date-trigger-button" [formControl]="buttonControl" calendarTrigger="button" ${argBindings(["calendarTrigger"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size">
+            <tedi-form-field [size]="size" [clearable]="clearable">
               <label tedi-label for="date-trigger-input">Sisestusväli on klõpsatav</label>
               <tedi-date-field inputId="date-trigger-input" [formControl]="inputControl" calendarTrigger="input" ${argBindings(["calendarTrigger"])} />
             </tedi-form-field>
@@ -820,31 +836,31 @@ export const Range: Story = {
       template: `
         <tedi-row [gap]="3" [xs]="{ cols: 1 }" [lg]="{ cols: 2 }">
           <tedi-col>
-            <tedi-form-field [size]="size">
+            <tedi-form-field [size]="size" [clearable]="clearable">
               <label tedi-label for="range-default">Vaikimisi vahemik</label>
               <tedi-date-field inputId="range-default" [formControl]="defaultRange" ${argBindings(["numberOfMonths", "disablePast"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size">
+            <tedi-form-field [size]="size" [clearable]="clearable">
               <label tedi-label for="range-limits">Vahemik min/max piiranguga</label>
               <tedi-date-field inputId="range-limits" [formControl]="limitsRange" [minDate]="twoMonthsAgo" [maxDate]="rangeMaxDate" ${argBindings(["numberOfMonths", "disablePast"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size">
+            <tedi-form-field [size]="size" [clearable]="clearable">
               <label tedi-label for="range-start-only">Ainult alguskuupäev</label>
               <tedi-date-field inputId="range-start-only" [formControl]="startOnly" ${argBindings(["numberOfMonths", "disablePast"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size">
+            <tedi-form-field [size]="size" [clearable]="clearable">
               <label tedi-label for="range-disabled-past">Vahemik keelatud minevikuga</label>
               <tedi-date-field inputId="range-disabled-past" [formControl]="disabledPastRange" [disablePast]="true" ${argBindings(["numberOfMonths", "disablePast"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size">
+            <tedi-form-field [size]="size" [clearable]="clearable">
               <label tedi-label for="range-multiple-months">Vahemik mitme kuuga</label>
               <tedi-date-field inputId="range-multiple-months" [formControl]="multipleMonthsRange" [numberOfMonths]="2" ${argBindings(["numberOfMonths", "disablePast"])} />
             </tedi-form-field>
@@ -940,7 +956,7 @@ export const WithFooter: Story = {
       template: `
         <tedi-row [gap]="3" [xs]="{ cols: 1 }" [lg]="{ cols: 2 }">
           <tedi-col>
-            <tedi-form-field [size]="size">
+            <tedi-form-field [size]="size" [clearable]="clearable">
               <label tedi-label for="date-footer-time">Kellaaeg</label>
               <tedi-date-field inputId="date-footer-time" [formControl]="timeControl" ${argBindings()}>
                 <tedi-row tediCalendarFooter justifyItems="center">
@@ -955,7 +971,7 @@ export const WithFooter: Story = {
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size">
+            <tedi-form-field [size]="size" [clearable]="clearable">
               <label tedi-label for="date-footer-save">Kuupäev</label>
               <tedi-date-field inputId="date-footer-save" [formControl]="saveControl" ${argBindings()}>
                 <tedi-row tediCalendarFooter [cols]="2" [gapX]="2">
@@ -1142,21 +1158,21 @@ export const WithReactiveForms: Story = {
         <form [formGroup]="form">
           <tedi-row [cols]="1" [gap]="3">
             <tedi-col>
-              <tedi-form-field [size]="size">
+              <tedi-form-field [size]="size" [clearable]="clearable">
                 <label tedi-label for="date-form-start" [required]="true">Alguskuupäev</label>
                 <tedi-date-field inputId="date-form-start" formControlName="start" [required]="true" ${argBindings(["mode", "required"])} />
                 <tedi-feedback-text text="Vali alguskuupäev." />
               </tedi-form-field>
             </tedi-col>
             <tedi-col>
-              <tedi-form-field [size]="size">
+              <tedi-form-field [size]="size" [clearable]="clearable">
                 <label tedi-label for="date-form-end">Lõppkuupäev</label>
                 <tedi-date-field inputId="date-form-end" formControlName="end" ${argBindings(["mode", "required"])} />
                 <tedi-feedback-text text="Vali lõppkuupäev." />
               </tedi-form-field>
             </tedi-col>
             <tedi-col>
-              <tedi-form-field [size]="size">
+              <tedi-form-field [size]="size" [clearable]="clearable">
                 <label tedi-label for="date-form-range" [required]="true">Kuupäevavahemik</label>
                 <tedi-date-field inputId="date-form-range" formControlName="range" mode="range" [required]="true" ${argBindings(["mode", "required"])} />
                 <tedi-feedback-text text="Vali algus- ja lõppkuupäev." />
diff --git a/tedi/components/form/form-field/form-field-context.ts b/tedi/components/form/form-field/form-field-context.ts
new file mode 100644
index 000000000..8c12b7235
--- /dev/null
+++ b/tedi/components/form/form-field/form-field-context.ts
@@ -0,0 +1,15 @@
+import { InjectionToken, Signal } from "@angular/core";
+
+/**
+ * Context exposed by `tedi-form-field` to the control projected into it — the
+ * mirror of `TEDI_FORM_FIELD_CONTROL`. The field declares these settings once;
+ * controls read them here rather than duplicating them as their own inputs.
+ */
+export interface FormFieldContext {
+  /** Whether the field shows a clear button. Opt-in for every control. */
+  clearable: Signal<boolean>;
+}
+
+export const TEDI_FORM_FIELD = new InjectionToken<FormFieldContext>(
+  "TEDI_FORM_FIELD",
+);
diff --git a/tedi/components/form/form-field/form-field-control.ts b/tedi/components/form/form-field/form-field-control.ts
index 452aa5193..d1d141194 100644
--- a/tedi/components/form/form-field/form-field-control.ts
+++ b/tedi/components/form/form-field/form-field-control.ts
@@ -29,6 +29,13 @@ export interface FormFieldControl<T = unknown> {
    * moves focus into the control, the way clicking the value does.
    */
   focus?(): void;
+  /**
+   * Set by controls that render their own clear button — date and time put one in
+   * their action row beside the picker button, which cannot leave the control
+   * because the overlay anchors to it. The field then skips its generic clear
+   * button so a single `clearable` never yields two.
+   */
+  readonly ownsClearButton?: boolean;
 }
 
 /**
diff --git a/tedi/components/form/form-field/form-field.component.html b/tedi/components/form/form-field/form-field.component.html
index cc396de73..8ef0b95ea 100644
--- a/tedi/components/form/form-field/form-field.component.html
+++ b/tedi/components/form/form-field/form-field.component.html
@@ -3,7 +3,7 @@
 <div [ngClass]="inputClasses()" (mousedown)="handleBoxMouseDown($event)">
   <ng-content select="input[tedi-text-field], tedi-time-field, tedi-date-field"></ng-content>
 
-  @if (clearable()) {
+  @if (renderClearButton()) {
     <div
       class="tedi-form-field__buttons"
       [class.tedi-form-field__buttons--hidden]="!showClearButton()"
diff --git a/tedi/components/form/form-field/form-field.component.spec.ts b/tedi/components/form/form-field/form-field.component.spec.ts
index 775058b78..6e5a8c6dc 100644
--- a/tedi/components/form/form-field/form-field.component.spec.ts
+++ b/tedi/components/form/form-field/form-field.component.spec.ts
@@ -32,6 +32,7 @@ class MockControlComponent implements FormFieldControl<string> {
   setInvalidState = jest.fn();
   clearField = jest.fn();
   focus = jest.fn();
+  ownsClearButton = false;
 }
 
 @Component({
@@ -74,6 +75,20 @@ class TestHostComponent {
   feedbackType: "valid" | "error" | "default" = "default";
 }
 
+@Component({
+  standalone: true,
+  imports: [FormFieldComponent, MockControlComponent],
+  template: `
+    <tedi-form-field clearable>
+      <mock-control #mockControl></mock-control>
+    </tedi-form-field>
+  `,
+})
+class BareClearableHostComponent {
+  @ViewChild("mockControl", { static: true })
+  mockControl!: MockControlComponent;
+}
+
 describe("FormFieldComponent", () => {
   let fixture: ComponentFixture<TestHostComponent>;
   let host: TestHostComponent;
@@ -174,6 +189,33 @@ describe("FormFieldComponent", () => {
     expect(buttons).toBeNull();
   });
 
+  it("should not render its own clear button when the control renders one", () => {
+    host.clearable = true;
+    host.mockControl.value.set("text");
+    host.mockControl.ownsClearButton = true;
+    formField.ngAfterContentInit();
+    fixture.detectChanges();
+
+    expect(formField.renderClearButton()).toBe(false);
+    expect(
+      fixture.nativeElement.querySelector(".tedi-form-field__clear"),
+    ).toBeNull();
+  });
+
+  it("should not be clearable by default", () => {
+    expect(formField.clearable()).toBe(false);
+    expect(formField.renderClearButton()).toBe(false);
+  });
+
+  it("should treat a bare clearable attribute as true", () => {
+    const bare = TestBed.createComponent(BareClearableHostComponent);
+    bare.detectChanges();
+
+    expect(
+      bare.nativeElement.querySelector(".tedi-form-field__clear"),
+    ).toBeTruthy();
+  });
+
   it("should call control.clearField when clear is triggered", () => {
     formField.clear();
 
diff --git a/tedi/components/form/form-field/form-field.component.ts b/tedi/components/form/form-field/form-field.component.ts
index 181030eaa..c9c7289bc 100644
--- a/tedi/components/form/form-field/form-field.component.ts
+++ b/tedi/components/form/form-field/form-field.component.ts
@@ -9,8 +9,12 @@ import {
   inject,
   DestroyRef,
   effect,
+  forwardRef,
+  signal,
+  booleanAttribute,
 } from "@angular/core";
 import { TEDI_INPUT_GROUP } from "../input-group/input-group.token";
+import { TEDI_FORM_FIELD } from "./form-field-context";
 import { NgClass } from "@angular/common";
 import {
   FormFieldControl,
@@ -56,6 +60,12 @@ export interface FormFieldIcon {
     SeparatorComponent,
     TediTranslationPipe,
   ],
+  providers: [
+    {
+      provide: TEDI_FORM_FIELD,
+      useExisting: forwardRef(() => FormFieldComponent),
+    },
+  ],
   host: {
     "[class]": "hostClasses()",
   },
@@ -71,10 +81,12 @@ export class FormFieldComponent implements AfterContentInit {
    */
   icon = input<string | FormFieldIcon | undefined>();
   /**
-   * Whether the form field includes a clear button.
+   * Whether the field shows a clear button. The single source of truth for every
+   * control inside it — date and time fields read it too instead of declaring
+   * their own input.
    * @default false
    */
-  clearable = input<boolean>(false);
+  clearable = input(false, { transform: booleanAttribute });
   /**
    * Custom CSS classes for the input.
    */
@@ -100,6 +112,8 @@ export class FormFieldComponent implements AfterContentInit {
   }
 
   ngAfterContentInit() {
+    this.controlRef.set(this.control);
+
     this.ngControl?.control?.events
       ?.pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => this.updateValidationState());
@@ -137,9 +151,24 @@ export class FormFieldComponent implements AfterContentInit {
     return "neutral";
   });
 
+  /**
+   * The resolved `ContentChild`, mirrored into a signal. A plain property read
+   * is not a reactive dependency, so the computeds below would cache whatever
+   * they saw before `ngAfterContentInit` and never re-evaluate.
+   */
+  private readonly controlRef = signal<FormFieldControl | undefined>(undefined);
+
+  /**
+   * Whether the field renders its own clear button. Controls that render one
+   * themselves opt out, so `clearable` drives them without producing two.
+   */
+  readonly renderClearButton = computed(
+    () => this.clearable() && !this.controlRef()?.ownsClearButton,
+  );
+
   showClearButton = computed(() => {
-    const value = this.control?.value();
-    return this.clearable() && !!value;
+    const value = this.controlRef()?.value();
+    return this.renderClearButton() && !!value;
   });
 
   readonly isDisabled = computed(
@@ -154,7 +183,7 @@ export class FormFieldComponent implements AfterContentInit {
       "tedi-form-field--disabled": this.isDisabled(),
       "tedi-form-field--small": this.size() === "small",
       "tedi-form-field--large": this.size() === "large",
-      "tedi-form-field--with-icon": this.clearable() || !!this.icon(),
+      "tedi-form-field--with-icon": this.renderClearButton() || !!this.icon(),
     };
   });
 
diff --git a/tedi/components/form/index.ts b/tedi/components/form/index.ts
index e9e83e6c8..b0a8a84ae 100644
--- a/tedi/components/form/index.ts
+++ b/tedi/components/form/index.ts
@@ -17,6 +17,7 @@ export * from "./slider/slider.component";
 export * from "./toggle/toggle.component";
 export * from "./form-field/form-field.component";
 export * from "./form-field/form-field-control";
+export * from "./form-field/form-field-context";
 export * from "./input-group";
 export * from "./text-field/text-field.component";
 export * from "./time-field";
diff --git a/tedi/components/form/time-field/time-field.component.spec.ts b/tedi/components/form/time-field/time-field.component.spec.ts
index 0ca515656..e1d36b4f6 100644
--- a/tedi/components/form/time-field/time-field.component.spec.ts
+++ b/tedi/components/form/time-field/time-field.component.spec.ts
@@ -8,17 +8,22 @@ import { FeedbackTextComponent } from "../feedback-text/feedback-text.component"
 import { TEDI_TRANSLATION_DEFAULT_TOKEN } from "../../../tokens/translation.token";
 import { BreakpointService } from "../../../services/breakpoint/breakpoint.service";
 import { ModalService } from "../../overlay/modal/modal.service";
+import { TEDI_FORM_FIELD } from "../form-field/form-field-context";
 
 describe("TimeFieldComponent", () => {
   let fixture: ComponentFixture<TimeFieldComponent>;
   let component: TimeFieldComponent;
   let el: HTMLElement;
+  /** Stands in for the wrapping `tedi-form-field`, which owns `clearable`. */
+  let fieldClearable: ReturnType<typeof signal<boolean>>;
 
   beforeEach(() => {
+    fieldClearable = signal(false);
     TestBed.configureTestingModule({
       imports: [TimeFieldComponent],
       providers: [
         { provide: TEDI_TRANSLATION_DEFAULT_TOKEN, useValue: "et" },
+        { provide: TEDI_FORM_FIELD, useValue: { clearable: fieldClearable } },
       ],
     });
 
@@ -180,6 +185,19 @@ describe("TimeFieldComponent", () => {
   });
 
   describe("clear button", () => {
+    beforeEach(() => {
+      fieldClearable.set(true);
+      fixture.detectChanges();
+    });
+
+    it("should not show clear button when the form field has not opted in", () => {
+      fieldClearable.set(false);
+      component.writeValue("14:30");
+      fixture.detectChanges();
+
+      expect(el.querySelector(".tedi-time-field__clear")).toBeNull();
+    });
+
     it("should not show clear button when value is null", () => {
       expect(el.querySelector(".tedi-time-field__clear")).toBeNull();
     });
@@ -373,6 +391,8 @@ describe("TimeFieldComponent", () => {
     });
 
     it("should show the clear button immediately after a value is picked (no blur required)", () => {
+      fieldClearable.set(true);
+      fixture.detectChanges();
       expect(el.querySelector(".tedi-time-field__clear")).toBeNull();
 
       const input = el.querySelector(".tedi-time-field__input") as HTMLInputElement;
diff --git a/tedi/components/form/time-field/time-field.component.ts b/tedi/components/form/time-field/time-field.component.ts
index f292d1802..3fcadde32 100644
--- a/tedi/components/form/time-field/time-field.component.ts
+++ b/tedi/components/form/time-field/time-field.component.ts
@@ -35,6 +35,7 @@ import {
   FormFieldControl,
   TEDI_FORM_FIELD_CONTROL,
 } from "../form-field/form-field-control";
+import { TEDI_FORM_FIELD } from "../form-field/form-field-context";
 import {
   TimePickerModalComponent,
   TimePickerModalData,
@@ -99,8 +100,6 @@ export class TimeFieldComponent
   protected readonly invalidInput = input<boolean>(false, { alias: "invalid" });
   /** Disables interaction. Combines with the form-control disabled state. */
   readonly disabled = input<boolean>(false);
-  /** Show a clear button when the field has a value. */
-  readonly clearable = input<boolean>(true);
   /** Picker variant. `none` renders just the input with no picker UI — typed input is still normalized on blur. */
   readonly pickerVariant = input<TimeFieldPickerVariant>("scroll");
   /**
@@ -125,6 +124,7 @@ export class TimeFieldComponent
   /** Make the mobile modal fullscreen: `true` always, `false` never, breakpoint name → fullscreen below that breakpoint. Only applies when the picker actually opens as a modal. */
   readonly fullscreen = input<TimeFieldFullscreen>(false);
 
+  private readonly formField = inject(TEDI_FORM_FIELD, { optional: true });
   private readonly breakpointService = inject(BreakpointService);
   private readonly modalService = inject(ModalService);
   private readonly injector = inject(Injector);
@@ -151,7 +151,15 @@ export class TimeFieldComponent
   readonly hasValue = computed(
     () => this.value() !== null && this.value() !== "",
   );
-  readonly showClear = computed(() => this.hasValue() && this.clearable());
+  readonly showClear = computed(
+    () => this.hasValue() && this.clearableResolved(),
+  );
+  /** The clear button sits in the time field's action row, beside the picker. */
+  readonly ownsClearButton = true;
+  /** Driven by the wrapping `tedi-form-field`'s `clearable`. */
+  readonly clearableResolved = computed(
+    () => this.formField?.clearable() ?? false,
+  );
   readonly useNativePickerResolved = computed(() => {
     const v = this.useNativePicker();
     return typeof v === "boolean"
diff --git a/tedi/components/form/time-field/time-field.stories.ts b/tedi/components/form/time-field/time-field.stories.ts
index 4447dd237..4f504e4f6 100644
--- a/tedi/components/form/time-field/time-field.stories.ts
+++ b/tedi/components/form/time-field/time-field.stories.ts
@@ -5,7 +5,10 @@ import {
 } from "@storybook/angular";
 import { FormControl, ReactiveFormsModule } from "@angular/forms";
 import { TimeFieldComponent } from "./time-field.component";
-import { FormFieldComponent } from "../form-field/form-field.component";
+import {
+  FormFieldComponent,
+  type InputSize,
+} from "../form-field/form-field.component";
 import { LabelComponent } from "../label/label.component";
 import { FeedbackTextComponent } from "../feedback-text/feedback-text.component";
 import { RowComponent } from "../../helpers/grid/row/row.component";
@@ -20,6 +23,13 @@ const PSEUDO_STATE = ["Default", "Hover", "Active", "Disabled", "Focus"];
  * <a href="https://www.tedi.ee/1ee8444b7/p/73629d-time-field" target="_blank">Zeroheight ↗</a>
  */
 
+type TimeFieldStoryArgs = TimeFieldComponent & {
+  /** Story-only: size applied to the wrapping `tedi-form-field`. */
+  size?: InputSize;
+  /** Story-only: clearable applied to the wrapping `tedi-form-field`. */
+  clearable?: boolean;
+};
+
 export default {
   title: "TEDI-Ready/Components/Form/TimeField",
   component: TimeFieldComponent,
@@ -47,7 +57,7 @@ export default {
       description: "Unique ID for label association and accessibility.",
       control: { type: "text" },
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
         type: { summary: "string" },
       },
     },
@@ -55,7 +65,7 @@ export default {
       description: "Selected time in HH:mm format. Two-way bindable.",
       control: { type: "text" },
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
         type: { summary: "string | null" },
         defaultValue: { summary: "null" },
       },
@@ -64,7 +74,7 @@ export default {
       description: "Placeholder shown when the input is empty.",
       control: { type: "text" },
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
         type: { summary: "string" },
       },
     },
@@ -73,7 +83,7 @@ export default {
         "Manually mark the field as invalid. Sets `aria-invalid` on the input and triggers the form-field's invalid styling. Combines with the form-control validity state from reactive forms.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "false" },
       },
@@ -82,18 +92,30 @@ export default {
       description: "Disables interaction. Combines with the form-control disabled state.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "false" },
       },
     },
+    size: {
+      description:
+        "Size of the surrounding `tedi-form-field` — the time field inherits it.",
+      control: { type: "radio" },
+      options: ["default", "small"],
+      table: {
+        category: "Form Field inputs",
+        type: { summary: "InputSize", detail: "default \nsmall" },
+        defaultValue: { summary: "default" },
+      },
+    },
     clearable: {
-      description: "Show a clear button when the field has a value.",
+      description:
+        "Set on the wrapping `tedi-form-field`. Opt in to show a clear button once the field has a value.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Form Field inputs",
         type: { summary: "boolean" },
-        defaultValue: { summary: "true" },
+        defaultValue: { summary: "false" },
       },
     },
     pickerVariant: {
@@ -102,7 +124,7 @@ export default {
       control: { type: "radio" },
       options: ["scroll", "slots", "dropdown", "none"],
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
         type: {
           summary: "TimeFieldPickerVariant",
           detail: "scroll \nslots \ndropdown \nnone",
@@ -116,7 +138,7 @@ export default {
       control: { type: "select" },
       options: [true, false, "sm", "md", "lg", "xl"],
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
         type: {
           summary: "TimeFieldUseNativePicker",
           detail: "boolean \nsm \nmd \nlg \nxl",
@@ -130,7 +152,7 @@ export default {
       control: { type: "radio" },
       options: ["button", "input"],
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
         type: { summary: "TimeFieldPickerTrigger", detail: "button \ninput" },
         defaultValue: { summary: "button" },
       },
@@ -139,7 +161,7 @@ export default {
       description: "Close the popover/modal as soon as the user picks a value.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "false" },
       },
@@ -148,7 +170,7 @@ export default {
       description: "Predefined HH:mm strings for the slots and dropdown variants.",
       control: { type: "object" },
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
         type: { summary: "string[]" },
         defaultValue: { summary: "[]" },
       },
@@ -157,7 +179,7 @@ export default {
       description: "Grid columns for the slots variant.",
       control: { type: "number" },
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
         type: { summary: "number" },
         defaultValue: { summary: "3" },
       },
@@ -166,7 +188,7 @@ export default {
       description: "Minute step for the scroll variant — e.g. 5 renders 00, 05, 10…",
       control: { type: "number" },
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
         type: { summary: "number" },
         defaultValue: { summary: "1" },
       },
@@ -177,7 +199,7 @@ export default {
       control: { type: "select" },
       options: [true, false, "sm", "md", "lg", "xl"],
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
         type: {
           summary: "TimeFieldModal",
           detail: "boolean \nsm \nmd \nlg \nxl",
@@ -191,7 +213,7 @@ export default {
       control: { type: "select" },
       options: [true, false, "sm", "md", "lg", "xl"],
       table: {
-        category: "inputs",
+        category: "Time Field inputs",
         type: {
           summary: "TimeFieldFullscreen",
           detail: "boolean \nsm \nmd \nlg \nxl",
@@ -200,16 +222,17 @@ export default {
       },
     },
   },
-} as Meta<TimeFieldComponent>;
+} as Meta<TimeFieldStoryArgs>;
 
 export const Default: StoryObj = {
   args: {
     inputId: "example-id",
+    size: "default",
     value: null,
     placeholder: "tt:mm",
     invalid: false,
     disabled: false,
-    clearable: true,
+    clearable: false,
     pickerVariant: "scroll",
     useNativePicker: false,
     pickerTrigger: "button",
@@ -225,7 +248,7 @@ export const Default: StoryObj = {
     template: `
       <tedi-row cols="1" [md]="{ cols: 3 }">
         <tedi-col>
-          <tedi-form-field>
+          <tedi-form-field [size]="size" [clearable]="clearable">
             <label tedi-label for="example-id">Aeg</label>
             <tedi-time-field
               [inputId]="inputId"
@@ -233,7 +256,6 @@ export const Default: StoryObj = {
               [placeholder]="placeholder"
               [invalid]="invalid"
               [disabled]="disabled"
-              [clearable]="clearable"
               [pickerVariant]="pickerVariant"
               [useNativePicker]="useNativePicker"
               [pickerTrigger]="pickerTrigger"

From f8776926f97d446a5513bd5ca7d7a2fc8b510522 Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Thu, 30 Jul 2026 10:57:22 +0300
Subject: [PATCH 02/11] feat(form-field,date-field,time-field): add CR fixes
 #572

---
 tedi/components/form/date-field/date-field.stories.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tedi/components/form/date-field/date-field.stories.ts b/tedi/components/form/date-field/date-field.stories.ts
index f55a743a4..a0d13b2b2 100644
--- a/tedi/components/form/date-field/date-field.stories.ts
+++ b/tedi/components/form/date-field/date-field.stories.ts
@@ -564,13 +564,13 @@ export const Size: Story = {
     template: `
       <tedi-row [cols]="1" [gap]="3">
         <tedi-col>
-          <tedi-form-field size="default">
+          <tedi-form-field size="default" [clearable]="clearable">
             <label tedi-label for="date-size-default">Vaikimisi</label>
             <tedi-date-field inputId="date-size-default" ${argBindings()} />
           </tedi-form-field>
         </tedi-col>
         <tedi-col>
-          <tedi-form-field size="small">
+          <tedi-form-field size="small" [clearable]="clearable">
             <label tedi-label for="date-size-small">Väike</label>
             <tedi-date-field inputId="date-size-small" ${argBindings()} />
           </tedi-form-field>

From 7f181bd2a61c4fae60388ffeed43f1780f083e5d Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Wed, 5 Aug 2026 13:17:10 +0300
Subject: [PATCH 03/11] feat(form-field,date-field,time-field): clearable
 defaults to true #572

BREAKING CHANGE: tedi-form-field's clearable now defaults to true, so fields
that previously showed no clear button now show one once they have a value.
Pass [clearable]="false" to opt out.
---
 .../form/date-field/date-field.component.spec.ts       | 10 ++++++----
 .../components/form/date-field/date-field.component.ts |  2 +-
 tedi/components/form/date-field/date-field.stories.ts  |  6 +++---
 .../form/form-field/form-field.component.spec.ts       |  8 +++++---
 .../components/form/form-field/form-field.component.ts |  4 ++--
 tedi/components/form/text-field/text-field.stories.ts  |  7 ++++---
 .../components/form/time-field/time-field.component.ts |  2 +-
 tedi/components/form/time-field/time-field.stories.ts  |  6 +++---
 8 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/tedi/components/form/date-field/date-field.component.spec.ts b/tedi/components/form/date-field/date-field.component.spec.ts
index fb2ad1208..3a0f7118f 100644
--- a/tedi/components/form/date-field/date-field.component.spec.ts
+++ b/tedi/components/form/date-field/date-field.component.spec.ts
@@ -1105,14 +1105,16 @@ describe("DateFieldComponent", () => {
   });
 
   describe("clearable", () => {
-    it("renders no clear button until the form field opts in", () => {
+    it("renders a clear button once it has a value when used without a form field", () => {
       const { component, el, fixture } = createField();
+      expect(el.querySelector(".tedi-date-input__clear")).toBeNull();
+
       fixture.componentRef.setInput("value", new Date(2026, 4, 14));
       fixture.detectChanges();
 
-      expect(component.clearableResolved()).toBe(false);
-      expect(component.canClear()).toBe(false);
-      expect(el.querySelector(".tedi-date-input__clear")).toBeNull();
+      expect(component.clearableResolved()).toBe(true);
+      expect(component.canClear()).toBe(true);
+      expect(el.querySelector(".tedi-date-input__clear")).not.toBeNull();
     });
   });
 
diff --git a/tedi/components/form/date-field/date-field.component.ts b/tedi/components/form/date-field/date-field.component.ts
index e31082366..f8d1a46c2 100644
--- a/tedi/components/form/date-field/date-field.component.ts
+++ b/tedi/components/form/date-field/date-field.component.ts
@@ -322,7 +322,7 @@ export class DateFieldComponent
 
   /** Driven by the wrapping `tedi-form-field`'s `clearable`. */
   readonly clearableResolved = computed(
-    () => this.formField?.clearable() ?? false,
+    () => this.formField?.clearable() ?? true,
   );
 
   readonly resolvedDisabledMatchers = computed<Matcher[]>(() => {
diff --git a/tedi/components/form/date-field/date-field.stories.ts b/tedi/components/form/date-field/date-field.stories.ts
index a0d13b2b2..5ec9e4c85 100644
--- a/tedi/components/form/date-field/date-field.stories.ts
+++ b/tedi/components/form/date-field/date-field.stories.ts
@@ -218,7 +218,7 @@ export default {
     monthYearSelectType: "dropdown",
     localeCode: "et-EE",
     placeholder: "",
-    clearable: false,
+    clearable: true,
     inputDisabled: false,
     readOnly: false,
     required: false,
@@ -357,12 +357,12 @@ export default {
     },
     clearable: {
       description:
-        "Set on the wrapping `tedi-form-field`. Opt in to show a clear button once the field has a value.",
+        "Set on the wrapping `tedi-form-field`. Shows a clear button once the field has a value; set `false` to opt out.",
       control: { type: "boolean" },
       table: {
         category: "Form Field inputs",
         type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
+        defaultValue: { summary: "true" },
       },
     },
     inputDisabled: {
diff --git a/tedi/components/form/form-field/form-field.component.spec.ts b/tedi/components/form/form-field/form-field.component.spec.ts
index 6e5a8c6dc..ceb6d9d21 100644
--- a/tedi/components/form/form-field/form-field.component.spec.ts
+++ b/tedi/components/form/form-field/form-field.component.spec.ts
@@ -202,9 +202,11 @@ describe("FormFieldComponent", () => {
     ).toBeNull();
   });
 
-  it("should not be clearable by default", () => {
-    expect(formField.clearable()).toBe(false);
-    expect(formField.renderClearButton()).toBe(false);
+  it("should be clearable by default", () => {
+    const bare = TestBed.createComponent(FormFieldComponent);
+    bare.detectChanges();
+
+    expect(bare.componentInstance.clearable()).toBe(true);
   });
 
   it("should treat a bare clearable attribute as true", () => {
diff --git a/tedi/components/form/form-field/form-field.component.ts b/tedi/components/form/form-field/form-field.component.ts
index c9c7289bc..47de5e439 100644
--- a/tedi/components/form/form-field/form-field.component.ts
+++ b/tedi/components/form/form-field/form-field.component.ts
@@ -84,9 +84,9 @@ export class FormFieldComponent implements AfterContentInit {
    * Whether the field shows a clear button. The single source of truth for every
    * control inside it — date and time fields read it too instead of declaring
    * their own input.
-   * @default false
+   * @default true
    */
-  clearable = input(false, { transform: booleanAttribute });
+  clearable = input(true, { transform: booleanAttribute });
   /**
    * Custom CSS classes for the input.
    */
diff --git a/tedi/components/form/text-field/text-field.stories.ts b/tedi/components/form/text-field/text-field.stories.ts
index 841f5837d..70f66ec0d 100644
--- a/tedi/components/form/text-field/text-field.stories.ts
+++ b/tedi/components/form/text-field/text-field.stories.ts
@@ -67,14 +67,15 @@ export default {
       },
     },
     clearable: {
-      description: "Whether the input includes a clear button.",
+      description:
+        "Whether the field shows a clear button once it has a value. Set `false` to opt out.",
       control: {
         type: "boolean",
       },
       table: {
         category: "Form Field inputs",
         type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
+        defaultValue: { summary: "true" },
       },
     },
     inputClass: {
@@ -111,7 +112,7 @@ export default {
 export const Default: StoryObj = {
   args: {
     size: "default",
-    clearable: false,
+    clearable: true,
     arrowsHidden: true,
   },
   render: ({ arrowsHidden, ...formFieldArgs }) => ({
diff --git a/tedi/components/form/time-field/time-field.component.ts b/tedi/components/form/time-field/time-field.component.ts
index 3fcadde32..3a886d55c 100644
--- a/tedi/components/form/time-field/time-field.component.ts
+++ b/tedi/components/form/time-field/time-field.component.ts
@@ -158,7 +158,7 @@ export class TimeFieldComponent
   readonly ownsClearButton = true;
   /** Driven by the wrapping `tedi-form-field`'s `clearable`. */
   readonly clearableResolved = computed(
-    () => this.formField?.clearable() ?? false,
+    () => this.formField?.clearable() ?? true,
   );
   readonly useNativePickerResolved = computed(() => {
     const v = this.useNativePicker();
diff --git a/tedi/components/form/time-field/time-field.stories.ts b/tedi/components/form/time-field/time-field.stories.ts
index 4f504e4f6..3fa452bdf 100644
--- a/tedi/components/form/time-field/time-field.stories.ts
+++ b/tedi/components/form/time-field/time-field.stories.ts
@@ -110,12 +110,12 @@ export default {
     },
     clearable: {
       description:
-        "Set on the wrapping `tedi-form-field`. Opt in to show a clear button once the field has a value.",
+        "Set on the wrapping `tedi-form-field`. Shows a clear button once the field has a value; set `false` to opt out.",
       control: { type: "boolean" },
       table: {
         category: "Form Field inputs",
         type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
+        defaultValue: { summary: "true" },
       },
     },
     pickerVariant: {
@@ -232,7 +232,7 @@ export const Default: StoryObj = {
     placeholder: "tt:mm",
     invalid: false,
     disabled: false,
-    clearable: false,
+    clearable: true,
     pickerVariant: "scroll",
     useNativePicker: false,
     pickerTrigger: "button",

From 58fb57b7d50b604a6ad8331c7fefcf46fa365586 Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Wed, 5 Aug 2026 14:19:39 +0300
Subject: [PATCH 04/11] feat(form-field,date-field,time-field): add CR fixes
 #572

---
 .../form-field/form-field.component.spec.ts   | 81 +++++++++++++++++++
 .../form/form-field/form-field.component.ts   | 13 ++-
 2 files changed, 87 insertions(+), 7 deletions(-)

diff --git a/tedi/components/form/form-field/form-field.component.spec.ts b/tedi/components/form/form-field/form-field.component.spec.ts
index ceb6d9d21..47a5c460f 100644
--- a/tedi/components/form/form-field/form-field.component.spec.ts
+++ b/tedi/components/form/form-field/form-field.component.spec.ts
@@ -35,6 +35,51 @@ class MockControlComponent implements FormFieldControl<string> {
   ownsClearButton = false;
 }
 
+@Component({
+  selector: "mock-owning-control",
+  standalone: true,
+  template: "",
+  providers: [
+    {
+      provide: TEDI_FORM_FIELD_CONTROL,
+      useExisting: MockOwningControlComponent,
+    },
+  ],
+})
+class MockOwningControlComponent implements FormFieldControl<string> {
+  value = signal("");
+  disabled = signal(false);
+  invalid = signal(false);
+  setInvalidState = jest.fn();
+  clearField = jest.fn();
+  focus = jest.fn();
+  /** Like date and time fields, which put a clear button in their own action row. */
+  readonly ownsClearButton = true;
+}
+
+/** Conditional projection: the control can be swapped or arrive after init. */
+@Component({
+  standalone: true,
+  imports: [FormFieldComponent, MockControlComponent, MockOwningControlComponent],
+  template: `
+    <tedi-form-field #formField clearable>
+      @if (showControl) {
+        @if (owning) {
+          <mock-owning-control />
+        } @else {
+          <mock-control #mockControl />
+        }
+      }
+    </tedi-form-field>
+  `,
+})
+class ConditionalProjectionHostComponent {
+  @ViewChild("formField", { static: true }) formField!: FormFieldComponent;
+  @ViewChild("mockControl") mockControl?: MockControlComponent;
+  showControl = true;
+  owning = false;
+}
+
 @Component({
   selector: "mock-feedback",
   standalone: true,
@@ -202,6 +247,42 @@ describe("FormFieldComponent", () => {
     ).toBeNull();
   });
 
+  describe("conditional projection", () => {
+    let conditional: ComponentFixture<ConditionalProjectionHostComponent>;
+    let conditionalHost: ConditionalProjectionHostComponent;
+
+    beforeEach(() => {
+      conditional = TestBed.createComponent(ConditionalProjectionHostComponent);
+      conditionalHost = conditional.componentInstance;
+      conditional.detectChanges();
+    });
+
+    it("should stop rendering its own clear button when the projected control is replaced by one that owns it", () => {
+      expect(conditionalHost.formField.renderClearButton()).toBe(true);
+
+      conditionalHost.owning = true;
+      conditional.detectChanges();
+
+      expect(conditionalHost.formField.renderClearButton()).toBe(false);
+      expect(
+        conditional.nativeElement.querySelector(".tedi-form-field__clear"),
+      ).toBeNull();
+    });
+
+    it("should pick up a control that is projected after init", () => {
+      conditionalHost.showControl = false;
+      conditional.detectChanges();
+      expect(conditionalHost.formField.showClearButton()).toBe(false);
+
+      conditionalHost.showControl = true;
+      conditional.detectChanges();
+      conditionalHost.mockControl!.value.set("text");
+      conditional.detectChanges();
+
+      expect(conditionalHost.formField.showClearButton()).toBe(true);
+    });
+  });
+
   it("should be clearable by default", () => {
     const bare = TestBed.createComponent(FormFieldComponent);
     bare.detectChanges();
diff --git a/tedi/components/form/form-field/form-field.component.ts b/tedi/components/form/form-field/form-field.component.ts
index 47de5e439..fc7d3331c 100644
--- a/tedi/components/form/form-field/form-field.component.ts
+++ b/tedi/components/form/form-field/form-field.component.ts
@@ -3,6 +3,7 @@ import {
   Component,
   computed,
   ContentChild,
+  contentChild,
   input,
   ViewEncapsulation,
   AfterContentInit,
@@ -10,7 +11,6 @@ import {
   DestroyRef,
   effect,
   forwardRef,
-  signal,
   booleanAttribute,
 } from "@angular/core";
 import { TEDI_INPUT_GROUP } from "../input-group/input-group.token";
@@ -112,8 +112,6 @@ export class FormFieldComponent implements AfterContentInit {
   }
 
   ngAfterContentInit() {
-    this.controlRef.set(this.control);
-
     this.ngControl?.control?.events
       ?.pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => this.updateValidationState());
@@ -152,11 +150,12 @@ export class FormFieldComponent implements AfterContentInit {
   });
 
   /**
-   * The resolved `ContentChild`, mirrored into a signal. A plain property read
-   * is not a reactive dependency, so the computeds below would cache whatever
-   * they saw before `ngAfterContentInit` and never re-evaluate.
+   * The projected control as a signal query. A plain `ContentChild` property read
+   * is not a reactive dependency, and mirroring it once in `ngAfterContentInit`
+   * froze it — a control swapped by conditional projection, or projected after
+   * init, left the computeds below describing a control that was no longer there.
    */
-  private readonly controlRef = signal<FormFieldControl | undefined>(undefined);
+  private readonly controlRef = contentChild<FormFieldControl>(TEDI_FORM_FIELD_CONTROL);
 
   /**
    * Whether the field renders its own clear button. Controls that render one

From f50e29e57b5eeb968f78a6c53020285919ee8f95 Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Wed, 23 Sep 2026 17:32:56 +0300
Subject: [PATCH 05/11] feat(date-field,time-field): clearable input overrides
 the form field #572

---
 .../date-field/date-field.component.spec.ts   | 27 ++++++++++++-
 .../form/date-field/date-field.component.ts   | 10 ++++-
 .../time-field/time-field.component.spec.ts   | 39 +++++++++++++++++++
 .../form/time-field/time-field.component.ts   | 10 ++++-
 4 files changed, 81 insertions(+), 5 deletions(-)

diff --git a/src/tedi/components/form/date-field/date-field.component.spec.ts b/src/tedi/components/form/date-field/date-field.component.spec.ts
index 383573500..6ee6ab355 100644
--- a/src/tedi/components/form/date-field/date-field.component.spec.ts
+++ b/src/tedi/components/form/date-field/date-field.component.spec.ts
@@ -1351,6 +1351,16 @@ describe("DateFieldComponent", () => {
       expect(component.canClear()).toBe(true);
       expect(el.querySelector(".tedi-date-input__clear")).not.toBeNull();
     });
+
+    it("hides the clear button when a standalone field opts out", () => {
+      const { component, el, fixture } = createField();
+      fixture.componentRef.setInput("clearable", false);
+      fixture.componentRef.setInput("value", new Date(2026, 4, 14));
+      fixture.detectChanges();
+
+      expect(component.canClear()).toBe(false);
+      expect(el.querySelector(".tedi-date-input__clear")).toBeNull();
+    });
   });
 
   describe("native picker parse rejection", () => {
@@ -1578,7 +1588,11 @@ describe("DateFieldComponent with ReactiveFormsModule", () => {
   template: `
     <tedi-form-field [clearable]="clearable">
       <label tedi-label for="composite-date">Date</label>
-      <tedi-date-field inputId="composite-date" [formControl]="control" />
+      <tedi-date-field
+        inputId="composite-date"
+        [formControl]="control"
+        [clearable]="fieldClearable"
+      />
       <tedi-feedback-text text="Error" type="error" />
     </tedi-form-field>
   `,
@@ -1586,6 +1600,7 @@ describe("DateFieldComponent with ReactiveFormsModule", () => {
 class CompositeHostComponent {
   control = new FormControl<Date | Date[] | DateRange | null>(null);
   clearable = false;
+  fieldClearable?: boolean;
 }
 
 describe("DateFieldComponent inside FormFieldComponent", () => {
@@ -1639,6 +1654,16 @@ describe("DateFieldComponent inside FormFieldComponent", () => {
       expect(el.querySelectorAll(".tedi-form-field__clear")).toHaveLength(0);
     });
 
+    it("lets the date field's own clearable override the form field", () => {
+      fixture.componentInstance.fieldClearable = true;
+      seed(false);
+      expect(el.querySelectorAll(".tedi-date-input__clear")).toHaveLength(1);
+
+      fixture.componentInstance.fieldClearable = false;
+      seed(true);
+      expect(el.querySelectorAll(".tedi-date-input__clear")).toHaveLength(0);
+    });
+
     it("still clears programmatically when opted out", () => {
       seed(false);
       const component = fixture.debugElement.query(
diff --git a/src/tedi/components/form/date-field/date-field.component.ts b/src/tedi/components/form/date-field/date-field.component.ts
index ebe5c3c44..10633cfc2 100644
--- a/src/tedi/components/form/date-field/date-field.component.ts
+++ b/src/tedi/components/form/date-field/date-field.component.ts
@@ -198,6 +198,12 @@ export class DateFieldComponent
    * set here.
    */
   readonly size = input<DateFieldSize | undefined>();
+  /**
+   * Whether the clear button shows once the field has a value. Falls back to the
+   * wrapping `tedi-form-field`'s `clearable` when not set here — set it on the
+   * wrapper, and use this only for a standalone field.
+   */
+  readonly clearable = input<boolean | undefined>();
   /**
    * Forces the error state on, or off, regardless of the reactive-forms state.
    * Leave unset to let the control derive it.
@@ -436,9 +442,9 @@ export class DateFieldComponent
   /** The clear button sits in the date input's action row, beside the calendar. */
   readonly ownsClearButton = true;
 
-  /** Driven by the wrapping `tedi-form-field`'s `clearable`. */
+  /** Own `clearable` wins, then the wrapping `tedi-form-field`'s. */
   readonly clearableResolved = computed(
-    () => this.fieldContext?.clearable() ?? true,
+    () => this.clearable() ?? this.fieldContext?.clearable() ?? true,
   );
 
   readonly resolvedDisabledMatchers = computed<Matcher[]>(() => {
diff --git a/src/tedi/components/form/time-field/time-field.component.spec.ts b/src/tedi/components/form/time-field/time-field.component.spec.ts
index fee417bea..588038094 100644
--- a/src/tedi/components/form/time-field/time-field.component.spec.ts
+++ b/src/tedi/components/form/time-field/time-field.component.spec.ts
@@ -208,6 +208,18 @@ describe("TimeFieldComponent", () => {
       expect(el.querySelector(".tedi-time-field__clear")).toBeNull();
     });
 
+    it("should let its own clearable override the form field", () => {
+      component.writeValue("14:30");
+      fixture.componentRef.setInput("clearable", false);
+      fixture.detectChanges();
+      expect(el.querySelector(".tedi-time-field__clear")).toBeNull();
+
+      fieldClearable.set(false);
+      fixture.componentRef.setInput("clearable", true);
+      fixture.detectChanges();
+      expect(el.querySelector(".tedi-time-field__clear")).not.toBeNull();
+    });
+
     it("should not show clear button when value is null", () => {
       expect(el.querySelector(".tedi-time-field__clear")).toBeNull();
     });
@@ -1188,3 +1200,30 @@ describe("TimeFieldComponent inside FormFieldComponent", () => {
     expect(input?.value).toBe("09:00");
   });
 });
+
+describe("TimeFieldComponent standalone", () => {
+  let fixture: ComponentFixture<TimeFieldComponent>;
+  let el: HTMLElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TimeFieldComponent],
+      providers: [{ provide: TEDI_TRANSLATION_DEFAULT_TOKEN, useValue: "et" }],
+    });
+    fixture = TestBed.createComponent(TimeFieldComponent);
+    fixture.componentRef.setInput("inputId", "standalone-id");
+    el = fixture.nativeElement;
+    fixture.componentInstance.writeValue("14:30");
+    fixture.detectChanges();
+  });
+
+  it("shows a clear button by default", () => {
+    expect(el.querySelector(".tedi-time-field__clear")).not.toBeNull();
+  });
+
+  it("hides the clear button when it opts out", () => {
+    fixture.componentRef.setInput("clearable", false);
+    fixture.detectChanges();
+    expect(el.querySelector(".tedi-time-field__clear")).toBeNull();
+  });
+});
diff --git a/src/tedi/components/form/time-field/time-field.component.ts b/src/tedi/components/form/time-field/time-field.component.ts
index 418afe5a9..c5b21dcbd 100644
--- a/src/tedi/components/form/time-field/time-field.component.ts
+++ b/src/tedi/components/form/time-field/time-field.component.ts
@@ -117,6 +117,12 @@ export class TimeFieldComponent
    * set here.
    */
   readonly size = input<Exclude<InputSize, "large"> | undefined>();
+  /**
+   * Whether the clear button shows once the field has a value. Falls back to the
+   * wrapping `tedi-form-field`'s `clearable` when not set here — set it on the
+   * wrapper, and use this only for a standalone field.
+   */
+  readonly clearable = input<boolean | undefined>();
   /** Picker variant. `none` renders just the input with no picker UI — typed input is still normalized on blur. */
   readonly pickerVariant = input<TimeFieldPickerVariant>("scroll");
   /**
@@ -193,9 +199,9 @@ export class TimeFieldComponent
   );
   /** The clear button sits in the time field's action row, beside the picker. */
   readonly ownsClearButton = true;
-  /** Driven by the wrapping `tedi-form-field`'s `clearable`. */
+  /** Own `clearable` wins, then the wrapping `tedi-form-field`'s. */
   readonly clearableResolved = computed(
-    () => this.fieldContext?.clearable() ?? true,
+    () => this.clearable() ?? this.fieldContext?.clearable() ?? true,
   );
   readonly useNativePickerResolved = computed(() => {
     const v = this.useNativePicker();

From fe0971ce2c3fb55532282c58b92a5756faf3a50e Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Wed, 23 Sep 2026 18:43:16 +0300
Subject: [PATCH 06/11] docs(date-field,time-field): document own clearable and
 size inputs #572

---
 .../form/date-field/date-field.stories.ts     | 124 +++++++++++-------
 .../form/time-field/time-field.stories.ts     |  41 ++++--
 2 files changed, 110 insertions(+), 55 deletions(-)

diff --git a/src/tedi/components/form/date-field/date-field.stories.ts b/src/tedi/components/form/date-field/date-field.stories.ts
index 5831a801c..1312d917c 100644
--- a/src/tedi/components/form/date-field/date-field.stories.ts
+++ b/src/tedi/components/form/date-field/date-field.stories.ts
@@ -104,6 +104,8 @@ const COMMON_INPUTS = [
   "fullscreen",
   "calendarTrigger",
   "numberOfMonths",
+  "clearable",
+  "size",
 ];
 
 /**
@@ -117,9 +119,9 @@ const argBindings = (exclude: string[] = []): string =>
 
 type DateFieldStoryArgs = DateFieldComponent & {
   /** Story-only: size applied to the wrapping `tedi-form-field`. */
-  size?: InputSize;
+  formFieldSize?: InputSize;
   /** Story-only: clearable applied to the wrapping `tedi-form-field`. */
-  clearable?: boolean;
+  formFieldClearable?: boolean;
   /** Story-only: text rendered in the sibling `<label tedi-label>`. */
   label?: string;
   /** Story-only: text rendered in a `tedi-feedback-text` below the field. */
@@ -144,7 +146,7 @@ const renderSingle: NonNullable<StoryObj<DateFieldStoryArgs>["render"]> = (
   return {
     props: { ...args, control },
     template: `
-      <tedi-form-field [size]="size" [clearable]="clearable">
+      <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
         <label tedi-label [for]="inputId" [required]="required">{{ label }}</label>
         <tedi-date-field
           [inputId]="inputId"
@@ -172,6 +174,8 @@ const renderSingle: NonNullable<StoryObj<DateFieldStoryArgs>["render"]> = (
           [fullscreen]="fullscreen"
           [calendarTrigger]="calendarTrigger"
           [numberOfMonths]="numberOfMonths"
+          [clearable]="clearable"
+          [size]="size"
           [minDate]="minDate"
           [maxDate]="maxDate"
           [minYear]="minYear"
@@ -234,12 +238,12 @@ export default {
     name: "",
     label: "Kuupäev",
     mode: "single",
-    size: "default",
+    formFieldSize: "default",
     selectionLevel: "days",
     monthYearSelectType: "dropdown",
     localeCode: "et-EE",
     placeholder: "",
-    clearable: true,
+    formFieldClearable: true,
     inputDisabled: false,
     readOnly: false,
     required: false,
@@ -275,7 +279,7 @@ export default {
         "`name` attribute of the underlying text input, used by native form submission. Omitted from the DOM when not set.",
       control: { type: "text" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "string" },
       },
     },
@@ -335,7 +339,22 @@ export default {
     },
     size: {
       description:
-        "Size of the surrounding `tedi-form-field` — the date field inherits it.",
+        "Overrides the wrapping `tedi-form-field`'s `size` for this field. Leave unset to inherit it — set `size` on the form field instead, so the label scales too. Use it for a standalone date field, where it defaults to `default`.",
+      control: { type: "radio" },
+      options: [undefined, "default", "small"],
+      table: {
+        category: "Date Field inputs",
+        type: {
+          summary: "DateFieldSize | undefined",
+          detail: "default \nsmall",
+        },
+        defaultValue: { summary: "undefined" },
+      },
+    },
+    formFieldSize: {
+      name: "size",
+      description:
+        "Set on the wrapping `tedi-form-field` — the label and the date field scale together. The date field reads it unless its own `size` is set.",
       control: { type: "radio" },
       options: ["default", "small"],
       table: {
@@ -374,7 +393,7 @@ export default {
         "Earliest year offered in the calendar's year grid/dropdown. Leave `null` to default to 100 years before the current year.",
       control: { type: "number" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "number | null" },
         defaultValue: { summary: "null" },
       },
@@ -384,7 +403,7 @@ export default {
         "Latest year offered in the calendar's year grid/dropdown. Leave `null` to default to 20 years after the current year.",
       control: { type: "number" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "number | null" },
         defaultValue: { summary: "null" },
       },
@@ -410,7 +429,18 @@ export default {
     },
     clearable: {
       description:
-        "Set on the wrapping `tedi-form-field`. Shows a clear button once the field has a value; set `false` to opt out.",
+        "Overrides the wrapping `tedi-form-field`'s `clearable` for this field. Leave unset to inherit it — set `clearable` on the form field instead. Use it for a standalone date field, where it defaults to `true`.",
+      control: { type: "boolean" },
+      table: {
+        category: "Date Field inputs",
+        type: { summary: "boolean | undefined" },
+        defaultValue: { summary: "undefined" },
+      },
+    },
+    formFieldClearable: {
+      name: "clearable",
+      description:
+        "Set on the wrapping `tedi-form-field`. Shows a clear button once the field has a value; set `false` to opt out. The date field reads it unless its own `clearable` is set.",
       control: { type: "boolean" },
       table: {
         category: "Form Field inputs",
@@ -468,7 +498,7 @@ export default {
         "Disables all dates before this date (the boundary date itself stays enabled).",
       control: false,
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "Date" },
         defaultValue: { summary: "undefined" },
       },
@@ -478,7 +508,7 @@ export default {
         "Disables all dates after this date (the boundary date itself stays enabled).",
       control: false,
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "Date" },
         defaultValue: { summary: "undefined" },
       },
@@ -488,7 +518,7 @@ export default {
         "Predicate `(month) => boolean` returning `true` to disable a whole month in the calendar's month navigation/grid. Leave `undefined` to disable nothing.",
       control: false,
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "(month: Date) => boolean" },
         defaultValue: { summary: "undefined" },
       },
@@ -498,7 +528,7 @@ export default {
         "Predicate `(year) => boolean` returning `true` to disable a whole year in the calendar's year navigation/grid. Leave `undefined` to disable nothing.",
       control: false,
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "(year: Date) => boolean" },
         defaultValue: { summary: "undefined" },
       },
@@ -508,7 +538,7 @@ export default {
         "Whitelist of selectable days — an explicit `Date[]` or a predicate `(date) => boolean`. Every other day is disabled.",
       control: false,
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "Date[] | ((date: Date) => boolean)" },
         defaultValue: { summary: "undefined" },
       },
@@ -518,7 +548,7 @@ export default {
         "Blacklist of unavailable days — a `Date[]` or a predicate `(date) => boolean`. Takes precedence over `availableDays`.",
       control: false,
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "Date[] | ((date: Date) => boolean)" },
         defaultValue: { summary: "undefined" },
       },
@@ -604,7 +634,7 @@ export default {
         "Closes the calendar popover when the page (or a scrollable ancestor) scrolls. Scrolling inside the calendar or its nested year/month dropdown keeps it open. Only affects the popover, not the modal.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "boolean" },
         defaultValue: { summary: "false" },
       },
@@ -655,7 +685,7 @@ export default {
         "Month the calendar opens on when there is no value. Ignored once a value is set (the calendar anchors to the selected date).",
       control: false,
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "Date" },
         defaultValue: { summary: "undefined" },
       },
@@ -665,7 +695,7 @@ export default {
         "Whether to close the picker after a selection. Defaults to `true` in `single` mode and `false` in `multiple`/`range` when left `undefined`.",
       control: { type: "boolean" },
       table: {
-        category: "inputs",
+        category: "Date Field inputs",
         type: { summary: "boolean | undefined" },
         defaultValue: { summary: "undefined" },
       },
@@ -708,13 +738,13 @@ export const Size: Story = {
     template: `
       <tedi-row [cols]="1" [gap]="3">
         <tedi-col>
-          <tedi-form-field size="default" [clearable]="clearable">
+          <tedi-form-field size="default" [clearable]="formFieldClearable">
             <label tedi-label for="date-size-default">Vaikimisi</label>
             <tedi-date-field inputId="date-size-default" ${argBindings()} />
           </tedi-form-field>
         </tedi-col>
         <tedi-col>
-          <tedi-form-field size="small" [clearable]="clearable">
+          <tedi-form-field size="small" [clearable]="formFieldClearable">
             <label tedi-label for="date-size-small">Väike</label>
             <tedi-date-field inputId="date-size-small" ${argBindings()} />
           </tedi-form-field>
@@ -726,7 +756,7 @@ export const Size: Story = {
     docs: {
       description: {
         story:
-          'Field size comes from the surrounding `<tedi-form-field size="small">` — the `tedi-date-field` itself has no `size` input.',
+          'Set the size on the surrounding `<tedi-form-field size="small">` so the label and the field scale together. The `tedi-date-field`\'s own `size` input overrides it — use that for a standalone field.',
       },
     },
   },
@@ -741,26 +771,26 @@ export const States: Story = {
       template: `
         <tedi-row [cols]="1" [gap]="3">
           <tedi-col>
-            <tedi-form-field [size]="size" [clearable]="clearable">
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
               <label tedi-label for="date-state-default">Vaikimisi</label>
               <tedi-date-field inputId="date-state-default" ${argBindings()} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size" [clearable]="clearable">
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
               <label tedi-label for="date-state-disabled">Mitteaktiivne</label>
               <tedi-date-field inputId="date-state-disabled" [formControl]="disabledControl" ${argBindings()} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size" [clearable]="clearable">
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
               <label tedi-label for="date-state-valid">Õnnestumine</label>
               <tedi-date-field inputId="date-state-valid" ${argBindings()} />
               <tedi-feedback-text text="Tagasiside tekst" type="valid" />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size" [clearable]="clearable">
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
               <label tedi-label for="date-state-error">Viga</label>
               <tedi-date-field inputId="date-state-error" ${argBindings()} />
               <tedi-feedback-text text="Tagasiside tekst" type="error" />
@@ -793,20 +823,20 @@ export const FieldOptions: Story = {
       template: `
         <tedi-row [cols]="1" [gap]="3">
           <tedi-col>
-            <tedi-form-field [size]="size" [clearable]="clearable">
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
               <label tedi-label for="date-opt-default">Vaikimisi kuupäevaväli</label>
               <tedi-date-field inputId="date-opt-default" ${argBindings(["placeholder"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size" [clearable]="clearable">
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
               <label tedi-label for="date-opt-hint">Kuupäevaväli vihjega</label>
               <tedi-date-field inputId="date-opt-hint" placeholder="pp.kk.aaaa" ${argBindings(["placeholder"])} />
               <tedi-feedback-text text="pp.kk.aaaa" />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size" [clearable]="clearable">
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
               <label tedi-label for="date-opt-shortcuts">Kuupäevaväli otseteedega</label>
               <tedi-date-field inputId="date-opt-shortcuts" [formControl]="shortcutControl" ${argBindings(["placeholder"])} />
               <div class="flex gap-2">
@@ -843,25 +873,25 @@ export const ValueType: Story = {
       template: `
         <tedi-row [cols]="1" [gap]="3">
           <tedi-col>
-            <tedi-form-field [size]="size" [clearable]="clearable">
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
               <label tedi-label for="date-vt-single">Üksik kuupäev</label>
               <tedi-date-field inputId="date-vt-single" [formControl]="single" placeholder="pp.kk.aaaa" ${argBindings(["mode", "placeholder"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size" [clearable]="clearable">
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
               <label tedi-label for="date-vt-single-value">Üksik kuupäev vaikeväärtusega</label>
               <tedi-date-field inputId="date-vt-single-value" [formControl]="singleWithValue" ${argBindings(["mode", "placeholder"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size" [clearable]="clearable">
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
               <label tedi-label for="date-vt-multiple">Mitu kuupäeva</label>
               <tedi-date-field inputId="date-vt-multiple" mode="multiple" [formControl]="multiple" ${argBindings(["mode", "placeholder"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size" [clearable]="clearable">
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
               <label tedi-label for="date-vt-range">Vahemik</label>
               <tedi-date-field inputId="date-vt-range" mode="range" [formControl]="range" ${argBindings(["mode", "placeholder"])} />
             </tedi-form-field>
@@ -894,14 +924,14 @@ export const MultipleTagLayout: Story = {
       template: `
         <tedi-row [cols]="1" [gap]="3">
           <tedi-col>
-            <tedi-form-field [size]="size" [clearable]="clearable">
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
               <label tedi-label for="date-tags-wrap">Mitmerealine (vaikimisi)</label>
               <tedi-date-field inputId="date-tags-wrap" mode="multiple" [multiRow]="true" [formControl]="wrapControl" ${argBindings(["mode", "multiRow", "tagEllipsis"])} />
               <tedi-feedback-text text="Sildid murduvad uutele ridadele; välja kõrgus kasvab." />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size" [clearable]="clearable">
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
               <label tedi-label for="date-tags-single">Üherealine + loendur</label>
               <tedi-date-field inputId="date-tags-single" mode="multiple" [multiRow]="false" tagEllipsis="start" [formControl]="singleRowControl" ${argBindings(["mode", "multiRow", "tagEllipsis"])} />
               <tedi-feedback-text text="Sildid püsivad ühel real; ülejääk koondub +N loendurisse. Kitsad sildid lühenevad algusest (…06.2026)." />
@@ -930,13 +960,13 @@ export const OnClickType: Story = {
       template: `
         <tedi-row [gap]="3" [xs]="{ cols: 1 }" [lg]="{ cols: 2 }">
           <tedi-col>
-            <tedi-form-field [size]="size" [clearable]="clearable">
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
               <label tedi-label for="date-trigger-button">Kalendriikoon on klõpsatav</label>
               <tedi-date-field inputId="date-trigger-button" [formControl]="buttonControl" calendarTrigger="button" ${argBindings(["calendarTrigger"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size" [clearable]="clearable">
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
               <label tedi-label for="date-trigger-input">Sisestusväli on klõpsatav</label>
               <tedi-date-field inputId="date-trigger-input" [formControl]="inputControl" calendarTrigger="input" ${argBindings(["calendarTrigger"])} />
             </tedi-form-field>
@@ -982,31 +1012,31 @@ export const Range: Story = {
       template: `
         <tedi-row [gap]="3" [xs]="{ cols: 1 }" [lg]="{ cols: 2 }">
           <tedi-col>
-            <tedi-form-field [size]="size" [clearable]="clearable">
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
               <label tedi-label for="range-default">Vaikimisi vahemik</label>
               <tedi-date-field inputId="range-default" [formControl]="defaultRange" ${argBindings(["numberOfMonths", "disablePast"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size" [clearable]="clearable">
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
               <label tedi-label for="range-limits">Vahemik min/max piiranguga</label>
               <tedi-date-field inputId="range-limits" [formControl]="limitsRange" [minDate]="twoMonthsAgo" [maxDate]="rangeMaxDate" ${argBindings(["numberOfMonths", "disablePast"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size" [clearable]="clearable">
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
               <label tedi-label for="range-start-only">Ainult alguskuupäev</label>
               <tedi-date-field inputId="range-start-only" [formControl]="startOnly" ${argBindings(["numberOfMonths", "disablePast"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size" [clearable]="clearable">
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
               <label tedi-label for="range-disabled-past">Vahemik keelatud minevikuga</label>
               <tedi-date-field inputId="range-disabled-past" [formControl]="disabledPastRange" [disablePast]="true" ${argBindings(["numberOfMonths", "disablePast"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size" [clearable]="clearable">
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
               <label tedi-label for="range-multiple-months">Vahemik mitme kuuga</label>
               <tedi-date-field inputId="range-multiple-months" [formControl]="multipleMonthsRange" [numberOfMonths]="2" ${argBindings(["numberOfMonths", "disablePast"])} />
             </tedi-form-field>
@@ -1107,7 +1137,7 @@ export const WithFooter: Story = {
       template: `
         <tedi-row [gap]="3" [xs]="{ cols: 1 }" [lg]="{ cols: 2 }">
           <tedi-col>
-            <tedi-form-field [size]="size" [clearable]="clearable">
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
               <label tedi-label for="date-footer-time">Kellaaeg</label>
               <tedi-date-field inputId="date-footer-time" [formControl]="timeControl" ${argBindings()}>
                 <tedi-row tediCalendarFooter justifyItems="center">
@@ -1122,7 +1152,7 @@ export const WithFooter: Story = {
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <tedi-form-field [size]="size" [clearable]="clearable">
+            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
               <label tedi-label for="date-footer-save">Kuupäev</label>
               <tedi-date-field inputId="date-footer-save" [formControl]="saveControl" ${argBindings()}>
                 <tedi-row tediCalendarFooter [cols]="2" [gapX]="2">
@@ -1313,21 +1343,21 @@ export const WithReactiveForms: Story = {
         <form [formGroup]="form">
           <tedi-row [cols]="1" [gap]="3">
             <tedi-col>
-              <tedi-form-field [size]="size" [clearable]="clearable">
+              <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
                 <label tedi-label for="date-form-start" [required]="true">Alguskuupäev</label>
                 <tedi-date-field inputId="date-form-start" formControlName="start" [required]="true" ${argBindings(["mode", "required"])} />
                 <tedi-feedback-text text="Vali alguskuupäev." />
               </tedi-form-field>
             </tedi-col>
             <tedi-col>
-              <tedi-form-field [size]="size" [clearable]="clearable">
+              <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
                 <label tedi-label for="date-form-end">Lõppkuupäev</label>
                 <tedi-date-field inputId="date-form-end" formControlName="end" ${argBindings(["mode", "required"])} />
                 <tedi-feedback-text text="Vali lõppkuupäev." />
               </tedi-form-field>
             </tedi-col>
             <tedi-col>
-              <tedi-form-field [size]="size" [clearable]="clearable">
+              <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
                 <label tedi-label for="date-form-range" [required]="true">Kuupäevavahemik</label>
                 <tedi-date-field inputId="date-form-range" formControlName="range" mode="range" [required]="true" ${argBindings(["mode", "required"])} />
                 <tedi-feedback-text text="Vali algus- ja lõppkuupäev." />
diff --git a/src/tedi/components/form/time-field/time-field.stories.ts b/src/tedi/components/form/time-field/time-field.stories.ts
index 6c0b366d6..1b863fc02 100644
--- a/src/tedi/components/form/time-field/time-field.stories.ts
+++ b/src/tedi/components/form/time-field/time-field.stories.ts
@@ -22,9 +22,9 @@ const PSEUDO_STATE = ["Default", "Hover", "Active", "Disabled", "Focus"];
 
 type TimeFieldStoryArgs = TimeFieldComponent & {
   /** Story-only: size applied to the wrapping `tedi-form-field`. */
-  size?: InputSize;
+  formFieldSize?: InputSize;
   /** Story-only: clearable applied to the wrapping `tedi-form-field`. */
-  clearable?: boolean;
+  formFieldClearable?: boolean;
 };
 
 export default {
@@ -97,7 +97,19 @@ export default {
     },
     size: {
       description:
-        "Size of the surrounding `tedi-form-field` — the time field inherits it.",
+        "Overrides the wrapping `tedi-form-field`'s `size` for this field. Leave unset to inherit it — set `size` on the form field instead, so the label scales too. Use it for a standalone time field, where it defaults to `default`.",
+      control: { type: "radio" },
+      options: [undefined, "default", "small"],
+      table: {
+        category: "Time Field inputs",
+        type: { summary: "InputSize | undefined", detail: "default \nsmall" },
+        defaultValue: { summary: "undefined" },
+      },
+    },
+    formFieldSize: {
+      name: "size",
+      description:
+        "Set on the wrapping `tedi-form-field` — the label and the time field scale together. The time field reads it unless its own `size` is set.",
       control: { type: "radio" },
       options: ["default", "small"],
       table: {
@@ -108,7 +120,18 @@ export default {
     },
     clearable: {
       description:
-        "Set on the wrapping `tedi-form-field`. Shows a clear button once the field has a value; set `false` to opt out.",
+        "Overrides the wrapping `tedi-form-field`'s `clearable` for this field. Leave unset to inherit it — set `clearable` on the form field instead. Use it for a standalone time field, where it defaults to `true`.",
+      control: { type: "boolean" },
+      table: {
+        category: "Time Field inputs",
+        type: { summary: "boolean | undefined" },
+        defaultValue: { summary: "undefined" },
+      },
+    },
+    formFieldClearable: {
+      name: "clearable",
+      description:
+        "Set on the wrapping `tedi-form-field`. Shows a clear button once the field has a value; set `false` to opt out. The time field reads it unless its own `clearable` is set.",
       control: { type: "boolean" },
       table: {
         category: "Form Field inputs",
@@ -227,12 +250,12 @@ export default {
 export const Default: StoryObj = {
   args: {
     inputId: "example-id",
-    size: "default",
+    formFieldSize: "default",
     value: null,
     placeholder: "tt:mm",
     invalid: false,
     disabled: false,
-    clearable: true,
+    formFieldClearable: true,
     pickerVariant: "scroll",
     useNativePicker: false,
     pickerTrigger: "button",
@@ -248,7 +271,7 @@ export const Default: StoryObj = {
     template: `
       <tedi-row cols="1" [md]="{ cols: 3 }">
         <tedi-col>
-          <tedi-form-field [size]="size" [clearable]="clearable">
+          <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
             <label tedi-label for="example-id">Aeg</label>
             <tedi-time-field
               [inputId]="inputId"
@@ -265,6 +288,8 @@ export const Default: StoryObj = {
               [minuteStep]="minuteStep"
               [modal]="modal"
               [fullscreen]="fullscreen"
+              [clearable]="clearable"
+              [size]="size"
             />
           </tedi-form-field>
         </tedi-col>
@@ -298,7 +323,7 @@ export const Sizes: StoryObj = {
     docs: {
       description: {
         story:
-          'Field size is controlled by the surrounding `<tedi-form-field size="small">` — the `tedi-time-field` itself has no `size` input.',
+          'Set the size on the surrounding `<tedi-form-field size="small">` so the label and the field scale together. The `tedi-time-field`\'s own `size` input overrides it — use that for a standalone field.',
       },
     },
   },

From b93fedf5d29fecbe202f067522e1d23383b42ecb Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Wed, 23 Sep 2026 19:56:26 +0300
Subject: [PATCH 07/11] docs(date-field,time-field): align story captions and
 labels with React #572

---
 .../form/date-field/date-field.stories.ts     | 159 +++++++++++-------
 .../form/time-field/time-field.stories.ts     |  59 +++----
 2 files changed, 128 insertions(+), 90 deletions(-)

diff --git a/src/tedi/components/form/date-field/date-field.stories.ts b/src/tedi/components/form/date-field/date-field.stories.ts
index 1312d917c..e9f715fef 100644
--- a/src/tedi/components/form/date-field/date-field.stories.ts
+++ b/src/tedi/components/form/date-field/date-field.stories.ts
@@ -22,6 +22,8 @@ import type { DateRange } from "../../content/calendar/types";
 import type { Matcher } from "../../../utils/matchers.util";
 import { expect, userEvent, waitFor } from "storybook/test";
 
+const PSEUDO_STATE = ["Default", "Hover", "Focus", "Active"];
+
 const today = new Date();
 const tomorrow = new Date(
   today.getFullYear(),
@@ -736,19 +738,21 @@ export const Size: Story = {
   render: (args) => ({
     props: { ...args },
     template: `
-      <tedi-row [cols]="1" [gap]="3">
-        <tedi-col>
+      <tedi-row class="example-list" cols="1" gapY="3">
+        <tedi-row cols="1" [md]="{ cols: 2 }" alignItems="center" class="padding-14-16 border-bottom">
+          <b>Default</b>
           <tedi-form-field size="default" [clearable]="formFieldClearable">
-            <label tedi-label for="date-size-default">Vaikimisi</label>
+            <label tedi-label for="date-size-default">Kuupäev</label>
             <tedi-date-field inputId="date-size-default" ${argBindings()} />
           </tedi-form-field>
-        </tedi-col>
-        <tedi-col>
+        </tedi-row>
+        <tedi-row cols="1" [md]="{ cols: 2 }" alignItems="center" class="padding-14-16">
+          <b>Small</b>
           <tedi-form-field size="small" [clearable]="formFieldClearable">
-            <label tedi-label for="date-size-small">Väike</label>
+            <label tedi-label for="date-size-small">Kuupäev</label>
             <tedi-date-field inputId="date-size-small" ${argBindings()} />
           </tedi-form-field>
-        </tedi-col>
+        </tedi-row>
       </tedi-row>
     `,
   }),
@@ -767,45 +771,66 @@ export const States: Story = {
     const disabledControl = new FormControl<Date | null>(inThreeDays);
     disabledControl.disable();
     return {
-      props: { ...args, disabledControl },
+      props: { ...args, disabledControl, PSEUDO_STATE },
       template: `
-        <tedi-row [cols]="1" [gap]="3">
-          <tedi-col>
-            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
-              <label tedi-label for="date-state-default">Vaikimisi</label>
-              <tedi-date-field inputId="date-state-default" ${argBindings()} />
-            </tedi-form-field>
-          </tedi-col>
-          <tedi-col>
-            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
-              <label tedi-label for="date-state-disabled">Mitteaktiivne</label>
-              <tedi-date-field inputId="date-state-disabled" [formControl]="disabledControl" ${argBindings()} />
-            </tedi-form-field>
-          </tedi-col>
-          <tedi-col>
-            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
-              <label tedi-label for="date-state-valid">Õnnestumine</label>
-              <tedi-date-field inputId="date-state-valid" ${argBindings()} />
-              <tedi-feedback-text text="Tagasiside tekst" type="valid" />
-            </tedi-form-field>
-          </tedi-col>
-          <tedi-col>
-            <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
-              <label tedi-label for="date-state-error">Viga</label>
-              <tedi-date-field inputId="date-state-error" ${argBindings()} />
-              <tedi-feedback-text text="Tagasiside tekst" type="error" />
-            </tedi-form-field>
-          </tedi-col>
+        <tedi-row [cols]="1" [gapY]="3">
+          @for (state of PSEUDO_STATE; track state) {
+            <tedi-row cols="1" [sm]="{ cols: 6 }" alignItems="center">
+              <tedi-col width="1">
+                <p tedi-text modifiers="bold">{{ state }}</p>
+              </tedi-col>
+              <tedi-col width="5">
+                <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
+                  <label tedi-label [for]="state">Kuupäev</label>
+                  <tedi-date-field [inputId]="state" ${argBindings()} />
+                </tedi-form-field>
+              </tedi-col>
+            </tedi-row>
+          }
+          <tedi-row cols="1" [sm]="{ cols: 6 }" alignItems="center">
+            <tedi-col width="1">
+              <p tedi-text modifiers="bold">Disabled</p>
+            </tedi-col>
+            <tedi-col width="5">
+              <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
+                <label tedi-label for="date-state-disabled">Kuupäev</label>
+                <tedi-date-field inputId="date-state-disabled" [formControl]="disabledControl" ${argBindings()} />
+              </tedi-form-field>
+            </tedi-col>
+          </tedi-row>
+          <tedi-row cols="1" [sm]="{ cols: 6 }" alignItems="center">
+            <tedi-col width="1">
+              <p tedi-text modifiers="bold">Success</p>
+            </tedi-col>
+            <tedi-col width="5">
+              <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
+                <label tedi-label for="date-state-valid">Kuupäev</label>
+                <tedi-date-field inputId="date-state-valid" ${argBindings()} />
+                <tedi-feedback-text text="Tagasiside tekst" type="valid" />
+              </tedi-form-field>
+            </tedi-col>
+          </tedi-row>
+          <tedi-row cols="1" [sm]="{ cols: 6 }" alignItems="center">
+            <tedi-col width="1">
+              <p tedi-text modifiers="bold">Error</p>
+            </tedi-col>
+            <tedi-col width="5">
+              <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
+                <label tedi-label for="date-state-error">Kuupäev</label>
+                <tedi-date-field inputId="date-state-error" ${argBindings()} />
+                <tedi-feedback-text text="Tagasiside tekst" type="error" />
+              </tedi-form-field>
+            </tedi-col>
+          </tedi-row>
         </tedi-row>
       `,
     };
   },
   parameters: {
-    docs: {
-      description: {
-        story:
-          'Persistent field states. Disabled is driven by the form control; the success/error states come from a `tedi-feedback-text` with `type="valid"`/`"error"`, which the surrounding `tedi-form-field` reflects on the input border.',
-      },
+    pseudo: {
+      hover: "#Hover",
+      active: "#Active",
+      focusVisible: "#Focus",
     },
   },
 };
@@ -823,21 +848,24 @@ export const FieldOptions: Story = {
       template: `
         <tedi-row [cols]="1" [gap]="3">
           <tedi-col>
+            <p tedi-text>Default date field</p>
             <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
-              <label tedi-label for="date-opt-default">Vaikimisi kuupäevaväli</label>
+              <label tedi-label for="date-opt-default">Kuupäev</label>
               <tedi-date-field inputId="date-opt-default" ${argBindings(["placeholder"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
+            <p tedi-text>Date field with helper text</p>
             <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
-              <label tedi-label for="date-opt-hint">Kuupäevaväli vihjega</label>
+              <label tedi-label for="date-opt-hint">Kuupäev</label>
               <tedi-date-field inputId="date-opt-hint" placeholder="pp.kk.aaaa" ${argBindings(["placeholder"])} />
               <tedi-feedback-text text="pp.kk.aaaa" />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
+            <p tedi-text>Date field with quick-select shortcuts</p>
             <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
-              <label tedi-label for="date-opt-shortcuts">Kuupäevaväli otseteedega</label>
+              <label tedi-label for="date-opt-shortcuts">Kuupäev</label>
               <tedi-date-field inputId="date-opt-shortcuts" [formControl]="shortcutControl" ${argBindings(["placeholder"])} />
               <div class="flex gap-2">
                 <button tedi-button variant="neutral" size="small" type="button" (click)="setToday()">Täna</button>
@@ -873,24 +901,28 @@ export const ValueType: Story = {
       template: `
         <tedi-row [cols]="1" [gap]="3">
           <tedi-col>
+            <p tedi-text>Single date</p>
             <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
-              <label tedi-label for="date-vt-single">Üksik kuupäev</label>
+              <label tedi-label for="date-vt-single">Kuupäev</label>
               <tedi-date-field inputId="date-vt-single" [formControl]="single" placeholder="pp.kk.aaaa" ${argBindings(["mode", "placeholder"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
+            <p tedi-text>Single date with a default value</p>
             <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
-              <label tedi-label for="date-vt-single-value">Üksik kuupäev vaikeväärtusega</label>
+              <label tedi-label for="date-vt-single-value">Kuupäev</label>
               <tedi-date-field inputId="date-vt-single-value" [formControl]="singleWithValue" ${argBindings(["mode", "placeholder"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
+            <p tedi-text>Multiple dates</p>
             <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
-              <label tedi-label for="date-vt-multiple">Mitu kuupäeva</label>
+              <label tedi-label for="date-vt-multiple">Kuupäevad</label>
               <tedi-date-field inputId="date-vt-multiple" mode="multiple" [formControl]="multiple" ${argBindings(["mode", "placeholder"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
+            <p tedi-text>Date range</p>
             <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
               <label tedi-label for="date-vt-range">Vahemik</label>
               <tedi-date-field inputId="date-vt-range" mode="range" [formControl]="range" ${argBindings(["mode", "placeholder"])} />
@@ -924,17 +956,19 @@ export const MultipleTagLayout: Story = {
       template: `
         <tedi-row [cols]="1" [gap]="3">
           <tedi-col>
+            <p tedi-text>Multiple rows (default)</p>
             <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
-              <label tedi-label for="date-tags-wrap">Mitmerealine (vaikimisi)</label>
+              <label tedi-label for="date-tags-wrap">Kuupäevad</label>
               <tedi-date-field inputId="date-tags-wrap" mode="multiple" [multiRow]="true" [formControl]="wrapControl" ${argBindings(["mode", "multiRow", "tagEllipsis"])} />
-              <tedi-feedback-text text="Sildid murduvad uutele ridadele; välja kõrgus kasvab." />
+              <tedi-feedback-text text="Tags wrap onto new lines and the field grows in height." />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
+            <p tedi-text>Single row</p>
             <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
-              <label tedi-label for="date-tags-single">Üherealine + loendur</label>
+              <label tedi-label for="date-tags-single">Kuupäevad</label>
               <tedi-date-field inputId="date-tags-single" mode="multiple" [multiRow]="false" tagEllipsis="start" [formControl]="singleRowControl" ${argBindings(["mode", "multiRow", "tagEllipsis"])} />
-              <tedi-feedback-text text="Sildid püsivad ühel real; ülejääk koondub +N loendurisse. Kitsad sildid lühenevad algusest (…06.2026)." />
+              <tedi-feedback-text text="Overflow collapses into a +N counter; narrow tags are truncated from the start." />
             </tedi-form-field>
           </tedi-col>
         </tedi-row>
@@ -960,14 +994,16 @@ export const OnClickType: Story = {
       template: `
         <tedi-row [gap]="3" [xs]="{ cols: 1 }" [lg]="{ cols: 2 }">
           <tedi-col>
+            <p tedi-text>Calendar button is clickable</p>
             <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
-              <label tedi-label for="date-trigger-button">Kalendriikoon on klõpsatav</label>
+              <label tedi-label for="date-trigger-button">Kuupäev</label>
               <tedi-date-field inputId="date-trigger-button" [formControl]="buttonControl" calendarTrigger="button" ${argBindings(["calendarTrigger"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
+            <p tedi-text>Input is clickable</p>
             <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
-              <label tedi-label for="date-trigger-input">Sisestusväli on klõpsatav</label>
+              <label tedi-label for="date-trigger-input">Kuupäev</label>
               <tedi-date-field inputId="date-trigger-input" [formControl]="inputControl" calendarTrigger="input" ${argBindings(["calendarTrigger"])} />
             </tedi-form-field>
           </tedi-col>
@@ -1012,32 +1048,37 @@ export const Range: Story = {
       template: `
         <tedi-row [gap]="3" [xs]="{ cols: 1 }" [lg]="{ cols: 2 }">
           <tedi-col>
+            <p tedi-text>Default range</p>
             <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
-              <label tedi-label for="range-default">Vaikimisi vahemik</label>
+              <label tedi-label for="range-default">Vahemik</label>
               <tedi-date-field inputId="range-default" [formControl]="defaultRange" ${argBindings(["numberOfMonths", "disablePast"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
+            <p tedi-text>Range with min/max limits</p>
             <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
-              <label tedi-label for="range-limits">Vahemik min/max piiranguga</label>
+              <label tedi-label for="range-limits">Vahemik</label>
               <tedi-date-field inputId="range-limits" [formControl]="limitsRange" [minDate]="twoMonthsAgo" [maxDate]="rangeMaxDate" ${argBindings(["numberOfMonths", "disablePast"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
+            <p tedi-text>Start date only (no end selected)</p>
             <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
-              <label tedi-label for="range-start-only">Ainult alguskuupäev</label>
+              <label tedi-label for="range-start-only">Vahemik</label>
               <tedi-date-field inputId="range-start-only" [formControl]="startOnly" ${argBindings(["numberOfMonths", "disablePast"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
+            <p tedi-text>Past dates disabled</p>
             <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
-              <label tedi-label for="range-disabled-past">Vahemik keelatud minevikuga</label>
+              <label tedi-label for="range-disabled-past">Vahemik</label>
               <tedi-date-field inputId="range-disabled-past" [formControl]="disabledPastRange" [disablePast]="true" ${argBindings(["numberOfMonths", "disablePast"])} />
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
+            <p tedi-text>Range with multiple months</p>
             <tedi-form-field [size]="formFieldSize" [clearable]="formFieldClearable">
-              <label tedi-label for="range-multiple-months">Vahemik mitme kuuga</label>
+              <label tedi-label for="range-multiple-months">Vahemik</label>
               <tedi-date-field inputId="range-multiple-months" [formControl]="multipleMonthsRange" [numberOfMonths]="2" ${argBindings(["numberOfMonths", "disablePast"])} />
             </tedi-form-field>
           </tedi-col>
@@ -1229,7 +1270,7 @@ export const MobileModal: Story = {
       template: `
         <tedi-row cols="1" [md]="{ cols: 2 }" [gap]="3">
           <tedi-col>
-            <p tedi-text modifiers="small bold">Centered modal (modal=true)</p>
+            <p tedi-text>Centered modal (modal=true)</p>
             <tedi-form-field>
               <label tedi-label for="date-modal-centered">Kuupäev</label>
               <tedi-date-field
@@ -1241,7 +1282,7 @@ export const MobileModal: Story = {
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <p tedi-text modifiers="small bold">Fullscreen modal (modal=true, fullscreen=true)</p>
+            <p tedi-text>Fullscreen modal (modal=true, fullscreen=true)</p>
             <tedi-form-field>
               <label tedi-label for="date-modal-fullscreen">Kuupäev</label>
               <tedi-date-field
diff --git a/src/tedi/components/form/time-field/time-field.stories.ts b/src/tedi/components/form/time-field/time-field.stories.ts
index 1b863fc02..4affb1dc8 100644
--- a/src/tedi/components/form/time-field/time-field.stories.ts
+++ b/src/tedi/components/form/time-field/time-field.stories.ts
@@ -13,7 +13,7 @@ import { AlertComponent } from "../../notifications/alert/alert.component";
 import { TextComponent } from "../../base/text/text.component";
 import { expect, userEvent, waitFor } from "storybook/test";
 
-const PSEUDO_STATE = ["Default", "Hover", "Active", "Disabled", "Focus"];
+const PSEUDO_STATE = ["Default", "Hover", "Focus", "Active", "Disabled"];
 
 /**
  * <a href="https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.41.64?node-id=4662-91741&m=dev" target="_blank">Figma ↗</a><br />
@@ -360,25 +360,25 @@ export const States: StoryObj = {
         }
         <tedi-row cols="1" [sm]="{ cols: 6 }" alignItems="center">
           <tedi-col width="1">
-            <p tedi-text modifiers="bold">Error</p>
+            <p tedi-text modifiers="bold">Success</p>
           </tedi-col>
           <tedi-col width="5">
             <tedi-form-field>
-              <label tedi-label for="state-error">Aeg</label>
-              <tedi-time-field inputId="state-error" [invalid]="true" value="12:00" />
-              <tedi-feedback-text text="Tagasiside tekst" type="error" />
+              <label tedi-label for="state-success">Aeg</label>
+              <tedi-time-field inputId="state-success" value="12:00" />
+              <tedi-feedback-text text="Tagasiside tekst" type="valid" />
             </tedi-form-field>
           </tedi-col>
         </tedi-row>
         <tedi-row cols="1" [sm]="{ cols: 6 }" alignItems="center">
           <tedi-col width="1">
-            <p tedi-text modifiers="bold">Success</p>
+            <p tedi-text modifiers="bold">Error</p>
           </tedi-col>
           <tedi-col width="5">
             <tedi-form-field>
-              <label tedi-label for="state-success">Aeg</label>
-              <tedi-time-field inputId="state-success" value="12:00" />
-              <tedi-feedback-text text="Tagasiside tekst" type="valid" />
+              <label tedi-label for="state-error">Aeg</label>
+              <tedi-time-field inputId="state-error" [invalid]="true" value="12:00" />
+              <tedi-feedback-text text="Tagasiside tekst" type="error" />
             </tedi-form-field>
           </tedi-col>
         </tedi-row>
@@ -393,12 +393,14 @@ export const FieldOptions: StoryObj = {
       <tedi-row cols="1" [md]="{ cols: 3 }">
         <tedi-col>
           <tedi-row cols="1" gapY="3">
+            <p tedi-text>Default time field</p>
             <tedi-form-field>
-              <label tedi-label for="opts-default">Default time field</label>
+              <label tedi-label for="opts-default">Aeg</label>
               <tedi-time-field inputId="opts-default" />
             </tedi-form-field>
+            <p tedi-text>Time field with hint</p>
             <tedi-form-field>
-              <label tedi-label for="opts-hint">Time field with hint</label>
+              <label tedi-label for="opts-hint">Aeg</label>
               <tedi-time-field inputId="opts-hint" />
               <tedi-feedback-text text="Vihjetekst" type="hint" />
             </tedi-form-field>
@@ -415,14 +417,17 @@ export const ValueType: StoryObj = {
       <tedi-row cols="1" [md]="{ cols: 3 }">
         <tedi-col>
           <tedi-row cols="1" gapY="3">
+            <p tedi-text>Empty</p>
             <tedi-form-field>
               <label tedi-label for="value-default">Aeg</label>
               <tedi-time-field inputId="value-default" />
             </tedi-form-field>
+            <p tedi-text>With placeholder</p>
             <tedi-form-field>
               <label tedi-label for="value-placeholder">Aeg</label>
               <tedi-time-field inputId="value-placeholder" placeholder="tt:mm" />
             </tedi-form-field>
+            <p tedi-text>With a value</p>
             <tedi-form-field>
               <label tedi-label for="value-set">Aeg</label>
               <tedi-time-field inputId="value-set" value="13:00" />
@@ -432,14 +437,6 @@ export const ValueType: StoryObj = {
       </tedi-row>
     `,
   }),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Default empty field, with placeholder, and with a pre-filled value.",
-      },
-    },
-  },
 };
 
 export const OnClickType: StoryObj = {
@@ -490,21 +487,21 @@ export const PredefinedTimeSlots: StoryObj = {
     template: `
       <tedi-row cols="1" [md]="{ cols: 3 }" [gap]="3">
         <tedi-col>
-          <p tedi-text modifiers="small bold">Input trigger (recommended)</p>
+          <p tedi-text>Input trigger (recommended)</p>
           <tedi-form-field>
             <label tedi-label for="slots-picker-input">Aeg</label>
             <tedi-time-field inputId="slots-picker-input" value="11:30" pickerVariant="slots" [timeSlots]="slots" [columns]="3" pickerTrigger="input" />
           </tedi-form-field>
         </tedi-col>
         <tedi-col>
-          <p tedi-text modifiers="small bold">Radio buttons (showSlotIndicator)</p>
+          <p tedi-text>Radio buttons (showSlotIndicator)</p>
           <tedi-form-field>
             <label tedi-label for="slots-picker-radio">Aeg</label>
             <tedi-time-field inputId="slots-picker-radio" value="11:30" pickerVariant="slots" [timeSlots]="slots" [columns]="3" [showSlotIndicator]="true" pickerTrigger="input" />
           </tedi-form-field>
         </tedi-col>
         <tedi-col>
-          <p tedi-text modifiers="small bold">Button trigger</p>
+          <p tedi-text>Button trigger</p>
           <tedi-form-field>
             <label tedi-label for="slots-picker-button">Aeg</label>
             <tedi-time-field inputId="slots-picker-button" value="11:30" pickerVariant="slots" [timeSlots]="slots" [columns]="3" pickerTrigger="button" />
@@ -533,14 +530,14 @@ export const Dropdown: StoryObj = {
     template: `
       <tedi-row cols="1" [md]="{ cols: 2 }" [gap]="3">
         <tedi-col>
-          <p tedi-text modifiers="small bold">Button trigger</p>
+          <p tedi-text>Button trigger</p>
           <tedi-form-field>
             <label tedi-label for="dropdown-picker-button">Aeg</label>
             <tedi-time-field inputId="dropdown-picker-button" value="13:30" pickerVariant="dropdown" [timeSlots]="slots" [closeOnSelect]="true" pickerTrigger="button" />
           </tedi-form-field>
         </tedi-col>
         <tedi-col>
-          <p tedi-text modifiers="small bold">Input trigger (recommended for dropdown)</p>
+          <p tedi-text>Input trigger (recommended for dropdown)</p>
           <tedi-form-field>
             <label tedi-label for="dropdown-picker-input">Aeg</label>
             <tedi-time-field inputId="dropdown-picker-input" value="13:30" pickerVariant="dropdown" [timeSlots]="slots" [closeOnSelect]="true" pickerTrigger="input" />
@@ -557,7 +554,7 @@ export const CustomStep: StoryObj = {
       <tedi-row cols="1" [md]="{ cols: 3 }">
         <tedi-col>
           <tedi-form-field>
-            <label tedi-label for="scroll-picker-step">Time with 15-min steps</label>
+            <label tedi-label for="scroll-picker-step">Aeg</label>
             <tedi-time-field inputId="scroll-picker-step" value="14:30" pickerVariant="scroll" [minuteStep]="15" />
           </tedi-form-field>
         </tedi-col>
@@ -580,14 +577,14 @@ export const NativePicker: StoryObj = {
     template: `
       <tedi-row cols="1" [md]="{ cols: 2 }" [gap]="3">
         <tedi-col>
-          <p tedi-text modifiers="small bold">Always native (useNativePicker=true)</p>
+          <p tedi-text>Always native (useNativePicker=true)</p>
           <tedi-form-field>
             <label tedi-label for="native-picker">Aeg</label>
             <tedi-time-field inputId="native-picker" value="09:30" [useNativePicker]="true" />
           </tedi-form-field>
         </tedi-col>
         <tedi-col>
-          <p tedi-text modifiers="small bold">Responsive (useNativePicker=md)</p>
+          <p tedi-text>Responsive (useNativePicker=md)</p>
           <tedi-form-field>
             <label tedi-label for="responsive-native">Aeg</label>
             <tedi-time-field
@@ -639,14 +636,14 @@ export const MobileModal: StoryObj = {
     template: `
       <tedi-row cols="1" [md]="{ cols: 2 }" [gap]="3">
         <tedi-col>
-          <p tedi-text modifiers="small bold">Centered modal</p>
+          <p tedi-text>Centered modal</p>
           <tedi-form-field>
             <label tedi-label for="mobile-modal">Aeg</label>
             <tedi-time-field inputId="mobile-modal" pickerTrigger="input" />
           </tedi-form-field>
         </tedi-col>
         <tedi-col>
-          <p tedi-text modifiers="small bold">Fullscreen modal (fullscreen=md)</p>
+          <p tedi-text>Fullscreen modal (fullscreen=md)</p>
           <tedi-form-field>
             <label tedi-label for="fullscreen-modal">Aeg</label>
             <tedi-time-field
@@ -677,9 +674,9 @@ export const ManualTyping: StoryObj = {
       <tedi-row cols="1" [md]="{ cols: 3 }">
         <tedi-col>
           <tedi-form-field>
-            <label tedi-label for="input-formatting">Type a time and tab out</label>
+            <label tedi-label for="input-formatting">Aeg</label>
             <tedi-time-field inputId="input-formatting" placeholder="tt:mm" pickerVariant="none" />
-            <tedi-feedback-text text="Try 1155, 930, 11.55, or 9:5" type="hint" position="left" />
+            <tedi-feedback-text text="Type a time and tab out — try 1155, 930, 11.55, or 9:5" type="hint" position="left" />
           </tedi-form-field>
         </tedi-col>
       </tedi-row>

From be8d145c1d8a3b17efa12b6c92b88696dbf41bac Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Wed, 23 Sep 2026 20:35:33 +0300
Subject: [PATCH 08/11] fix(time-field,date-picker): remove the inputs' own
 focus outline #572

Core 6.11 added a global :focus-visible outline, which drew a second
ring on the time field's and date picker's inputs inside the field
surface. The surface already shows focus, so the inputs reset it.
---
 .../date-picker/date-picker.component.scss    |  3 +
 .../form/time-field/time-field.component.scss |  3 +
 .../form/time-field/time-field.stories.ts     | 62 +++++++++++--------
 3 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/src/tedi/components/form/date-picker/date-picker.component.scss b/src/tedi/components/form/date-picker/date-picker.component.scss
index b191b5203..b6e12f7bb 100644
--- a/src/tedi/components/form/date-picker/date-picker.component.scss
+++ b/src/tedi/components/form/date-picker/date-picker.component.scss
@@ -50,6 +50,9 @@ tedi-date-picker {
     padding-left: var(--form-field-padding-x-md-default);
     font-size: var(--body-regular-size);
     color: var(--form-input-text-filled);
+
+    // The wrapper draws the focus ring; core's global one would double it.
+    outline: none;
     background: transparent;
     border: 0;
     border-radius: var(--form-field-radius);
diff --git a/src/tedi/components/form/time-field/time-field.component.scss b/src/tedi/components/form/time-field/time-field.component.scss
index 77d80aaeb..ed75f45cf 100644
--- a/src/tedi/components/form/time-field/time-field.component.scss
+++ b/src/tedi/components/form/time-field/time-field.component.scss
@@ -71,6 +71,9 @@
     font-family: inherit;
     font-size: var(--body-regular-size);
     color: var(--form-input-text-filled);
+
+    // The field surface draws the focus ring; core's global one would double it.
+    outline: none;
     background: transparent;
     border: 0;
     border-radius: var(--form-field-radius);
diff --git a/src/tedi/components/form/time-field/time-field.stories.ts b/src/tedi/components/form/time-field/time-field.stories.ts
index 4affb1dc8..ac92769ba 100644
--- a/src/tedi/components/form/time-field/time-field.stories.ts
+++ b/src/tedi/components/form/time-field/time-field.stories.ts
@@ -393,17 +393,21 @@ export const FieldOptions: StoryObj = {
       <tedi-row cols="1" [md]="{ cols: 3 }">
         <tedi-col>
           <tedi-row cols="1" gapY="3">
-            <p tedi-text>Default time field</p>
-            <tedi-form-field>
-              <label tedi-label for="opts-default">Aeg</label>
-              <tedi-time-field inputId="opts-default" />
-            </tedi-form-field>
-            <p tedi-text>Time field with hint</p>
-            <tedi-form-field>
-              <label tedi-label for="opts-hint">Aeg</label>
-              <tedi-time-field inputId="opts-hint" />
-              <tedi-feedback-text text="Vihjetekst" type="hint" />
-            </tedi-form-field>
+            <tedi-col>
+              <p tedi-text>Default time field</p>
+              <tedi-form-field>
+                <label tedi-label for="opts-default">Aeg</label>
+                <tedi-time-field inputId="opts-default" />
+              </tedi-form-field>
+            </tedi-col>
+            <tedi-col>
+              <p tedi-text>Time field with hint</p>
+              <tedi-form-field>
+                <label tedi-label for="opts-hint">Aeg</label>
+                <tedi-time-field inputId="opts-hint" />
+                <tedi-feedback-text text="Vihjetekst" type="hint" />
+              </tedi-form-field>
+            </tedi-col>
           </tedi-row>
         </tedi-col>
       </tedi-row>
@@ -417,21 +421,27 @@ export const ValueType: StoryObj = {
       <tedi-row cols="1" [md]="{ cols: 3 }">
         <tedi-col>
           <tedi-row cols="1" gapY="3">
-            <p tedi-text>Empty</p>
-            <tedi-form-field>
-              <label tedi-label for="value-default">Aeg</label>
-              <tedi-time-field inputId="value-default" />
-            </tedi-form-field>
-            <p tedi-text>With placeholder</p>
-            <tedi-form-field>
-              <label tedi-label for="value-placeholder">Aeg</label>
-              <tedi-time-field inputId="value-placeholder" placeholder="tt:mm" />
-            </tedi-form-field>
-            <p tedi-text>With a value</p>
-            <tedi-form-field>
-              <label tedi-label for="value-set">Aeg</label>
-              <tedi-time-field inputId="value-set" value="13:00" />
-            </tedi-form-field>
+            <tedi-col>
+              <p tedi-text>Empty</p>
+              <tedi-form-field>
+                <label tedi-label for="value-default">Aeg</label>
+                <tedi-time-field inputId="value-default" />
+              </tedi-form-field>
+            </tedi-col>
+            <tedi-col>
+              <p tedi-text>With placeholder</p>
+              <tedi-form-field>
+                <label tedi-label for="value-placeholder">Aeg</label>
+                <tedi-time-field inputId="value-placeholder" placeholder="tt:mm" />
+              </tedi-form-field>
+            </tedi-col>
+            <tedi-col>
+              <p tedi-text>With a value</p>
+              <tedi-form-field>
+                <label tedi-label for="value-set">Aeg</label>
+                <tedi-time-field inputId="value-set" value="13:00" />
+              </tedi-form-field>
+            </tedi-col>
           </tedi-row>
         </tedi-col>
       </tedi-row>

From e726a06b98e7927115671c3e41912df0387c767d Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Wed, 23 Sep 2026 20:58:22 +0300
Subject: [PATCH 09/11] fix(form-field,date-field,time-field): add CR fixes
 #572

---
 .../date-field/date-field.component.spec.ts   | 15 +++++++
 .../form/date-field/date-field.component.ts   |  6 ++-
 .../form-field/form-field.component.spec.ts   | 42 +++++++++++++++++++
 .../form/form-field/form-field.component.ts   | 10 +++--
 .../time-field/time-field.component.spec.ts   | 16 +++++++
 .../form/time-field/time-field.component.ts   |  6 ++-
 6 files changed, 89 insertions(+), 6 deletions(-)

diff --git a/src/tedi/components/form/date-field/date-field.component.spec.ts b/src/tedi/components/form/date-field/date-field.component.spec.ts
index 6ee6ab355..79e71fc2e 100644
--- a/src/tedi/components/form/date-field/date-field.component.spec.ts
+++ b/src/tedi/components/form/date-field/date-field.component.spec.ts
@@ -1352,6 +1352,21 @@ describe("DateFieldComponent", () => {
       expect(el.querySelector(".tedi-date-input__clear")).not.toBeNull();
     });
 
+    it("converts static attribute values to booleans", () => {
+      const { component, fixture } = createField();
+      fixture.componentRef.setInput("value", new Date(2026, 4, 14));
+
+      fixture.componentRef.setInput("clearable", "false");
+      fixture.detectChanges();
+      expect(component.clearable()).toBe(false);
+      expect(component.canClear()).toBe(false);
+
+      fixture.componentRef.setInput("clearable", "");
+      fixture.detectChanges();
+      expect(component.clearable()).toBe(true);
+      expect(component.canClear()).toBe(true);
+    });
+
     it("hides the clear button when a standalone field opts out", () => {
       const { component, el, fixture } = createField();
       fixture.componentRef.setInput("clearable", false);
diff --git a/src/tedi/components/form/date-field/date-field.component.ts b/src/tedi/components/form/date-field/date-field.component.ts
index 10633cfc2..9d503e055 100644
--- a/src/tedi/components/form/date-field/date-field.component.ts
+++ b/src/tedi/components/form/date-field/date-field.component.ts
@@ -1,4 +1,5 @@
 import {
+  booleanAttribute,
   ChangeDetectionStrategy,
   Component,
   computed,
@@ -203,7 +204,10 @@ export class DateFieldComponent
    * wrapping `tedi-form-field`'s `clearable` when not set here — set it on the
    * wrapper, and use this only for a standalone field.
    */
-  readonly clearable = input<boolean | undefined>();
+  readonly clearable = input<boolean | undefined, unknown>(undefined, {
+    // Unset stays `undefined` so the wrapper's `clearable` still applies.
+    transform: (v: unknown) => (v == null ? undefined : booleanAttribute(v)),
+  });
   /**
    * Forces the error state on, or off, regardless of the reactive-forms state.
    * Leave unset to let the control derive it.
diff --git a/src/tedi/components/form/form-field/form-field.component.spec.ts b/src/tedi/components/form/form-field/form-field.component.spec.ts
index 904fa516a..271afdc6a 100644
--- a/src/tedi/components/form/form-field/form-field.component.spec.ts
+++ b/src/tedi/components/form/form-field/form-field.component.spec.ts
@@ -58,6 +58,36 @@ class MockOwningControlComponent implements FormFieldControl<string> {
   readonly ownsClearButton = true;
 }
 
+@Component({
+  selector: "mock-unresettable-control",
+  standalone: true,
+  template: "",
+  providers: [
+    {
+      provide: TEDI_FORM_FIELD_CONTROL,
+      useExisting: MockUnresettableControlComponent,
+    },
+  ],
+})
+class MockUnresettableControlComponent implements FormFieldControl<string> {
+  value = signal("text");
+  disabled = signal(false);
+  invalid = signal(false);
+}
+
+@Component({
+  standalone: true,
+  imports: [FormFieldComponent, MockUnresettableControlComponent],
+  template: `
+    <tedi-form-field #formField clearable>
+      <mock-unresettable-control />
+    </tedi-form-field>
+  `,
+})
+class UnresettableHostComponent {
+  @ViewChild("formField", { static: true }) formField!: FormFieldComponent;
+}
+
 /** Conditional projection: the control can be swapped or arrive after init. */
 @Component({
   standalone: true,
@@ -296,6 +326,18 @@ describe("FormFieldComponent", () => {
     });
   });
 
+  it("should not render a clear button for a control that cannot be reset", () => {
+    const unresettable = TestBed.createComponent(UnresettableHostComponent);
+    unresettable.detectChanges();
+
+    expect(unresettable.componentInstance.formField.renderClearButton()).toBe(
+      false,
+    );
+    expect(
+      unresettable.nativeElement.querySelector(".tedi-form-field__clear"),
+    ).toBeNull();
+  });
+
   it("should be clearable by default", () => {
     const bare = TestBed.createComponent(FormFieldComponent);
     bare.detectChanges();
diff --git a/src/tedi/components/form/form-field/form-field.component.ts b/src/tedi/components/form/form-field/form-field.component.ts
index d237ee1d5..511222444 100644
--- a/src/tedi/components/form/form-field/form-field.component.ts
+++ b/src/tedi/components/form/form-field/form-field.component.ts
@@ -127,11 +127,13 @@ export class FormFieldComponent implements FieldContext {
 
   /**
    * Whether the field renders its own clear button. Controls that render one
-   * themselves opt out, so `clearable` drives them without producing two.
+   * themselves opt out, so `clearable` drives them without producing two, and
+   * a control that cannot be reset gets none.
    */
-  readonly renderClearButton = computed(
-    () => this.clearable() && !this.control()?.ownsClearButton,
-  );
+  readonly renderClearButton = computed(() => {
+    const control = this.control();
+    return this.clearable() && !control?.ownsClearButton && !!control?.reset;
+  });
 
   readonly ownsSurface = computed(() => this.hasBox());
 
diff --git a/src/tedi/components/form/time-field/time-field.component.spec.ts b/src/tedi/components/form/time-field/time-field.component.spec.ts
index 588038094..c00f41946 100644
--- a/src/tedi/components/form/time-field/time-field.component.spec.ts
+++ b/src/tedi/components/form/time-field/time-field.component.spec.ts
@@ -1221,6 +1221,22 @@ describe("TimeFieldComponent standalone", () => {
     expect(el.querySelector(".tedi-time-field__clear")).not.toBeNull();
   });
 
+  it("converts static attribute values to booleans", () => {
+    fixture.componentRef.setInput("clearable", "false");
+    fixture.detectChanges();
+    expect(el.querySelector(".tedi-time-field__clear")).toBeNull();
+
+    fixture.componentRef.setInput("clearable", "");
+    fixture.detectChanges();
+    expect(el.querySelector(".tedi-time-field__clear")).not.toBeNull();
+  });
+
+  it("keeps inheriting when clearable is unset", () => {
+    fixture.componentRef.setInput("clearable", undefined);
+    fixture.detectChanges();
+    expect(fixture.componentInstance.clearable()).toBeUndefined();
+  });
+
   it("hides the clear button when it opts out", () => {
     fixture.componentRef.setInput("clearable", false);
     fixture.detectChanges();
diff --git a/src/tedi/components/form/time-field/time-field.component.ts b/src/tedi/components/form/time-field/time-field.component.ts
index c5b21dcbd..17a0b8a6c 100644
--- a/src/tedi/components/form/time-field/time-field.component.ts
+++ b/src/tedi/components/form/time-field/time-field.component.ts
@@ -1,5 +1,6 @@
 import {
   afterNextRender,
+  booleanAttribute,
   ChangeDetectionStrategy,
   Component,
   computed,
@@ -122,7 +123,10 @@ export class TimeFieldComponent
    * wrapping `tedi-form-field`'s `clearable` when not set here — set it on the
    * wrapper, and use this only for a standalone field.
    */
-  readonly clearable = input<boolean | undefined>();
+  readonly clearable = input<boolean | undefined, unknown>(undefined, {
+    // Unset stays `undefined` so the wrapper's `clearable` still applies.
+    transform: (v: unknown) => (v == null ? undefined : booleanAttribute(v)),
+  });
   /** Picker variant. `none` renders just the input with no picker UI — typed input is still normalized on blur. */
   readonly pickerVariant = input<TimeFieldPickerVariant>("scroll");
   /**

From 05743fc95dffd2a1fc76716166716511f0bec9a3 Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Mon, 28 Sep 2026 18:31:48 +0300
Subject: [PATCH 10/11] fix(form-field,text-field,textarea,table): add CR fixes
 #572

---
 .../content/table/table.component.html        |  1 +
 .../content/table/table.component.spec.ts     | 28 ++++++
 .../form/form-field/form-field-control.ts     | 10 +++
 .../form-field/form-field.component.spec.ts   | 86 +++++++++++++++++--
 .../form/form-field/form-field.component.ts   | 16 +++-
 .../text-field/text-field.component.spec.ts   | 45 ++++++++++
 .../form/text-field/text-field.component.ts   | 18 ++++
 .../form/text-field/text-field.stories.ts     | 20 ++++-
 .../form/textarea/textarea.component.spec.ts  | 24 ++++++
 .../form/textarea/textarea.component.ts       | 22 +++++
 .../form/textarea/textarea.stories.ts         | 16 ++++
 11 files changed, 272 insertions(+), 14 deletions(-)

diff --git a/src/tedi/components/content/table/table.component.html b/src/tedi/components/content/table/table.component.html
index eed85625d..641c6315e 100644
--- a/src/tedi/components/content/table/table.component.html
+++ b/src/tedi/components/content/table/table.component.html
@@ -326,6 +326,7 @@
                     (input)="
                       handleColumnFilter(column, $any($event.target).value)
                     "
+                    (clear)="handleColumnFilter(column, '')"
                   />
                 </tedi-form-field>
               }
diff --git a/src/tedi/components/content/table/table.component.spec.ts b/src/tedi/components/content/table/table.component.spec.ts
index c80f5d710..46e78d62d 100644
--- a/src/tedi/components/content/table/table.component.spec.ts
+++ b/src/tedi/components/content/table/table.component.spec.ts
@@ -689,6 +689,34 @@ describe("TediTableComponent", () => {
       expect(rows[0].textContent).toContain("Anna");
     });
 
+    it("resets the column filter from the clear button", () => {
+      const fixture = setupHost();
+      fixture.componentInstance.enableColumnFilters.set(true);
+      fixture.detectChanges();
+      const rows = () =>
+        fixture.nativeElement.querySelectorAll(
+          ".tedi-table__body .tedi-table__row",
+        ).length;
+      const total = rows();
+      const input = fixture.nativeElement.querySelector(
+        'tr.tedi-table__row--filter input[aria-label="Filter Name"]',
+      ) as HTMLInputElement;
+      input.value = "Anna";
+      input.dispatchEvent(new Event("input"));
+      fixture.detectChanges();
+      expect(rows()).toBe(1);
+
+      (
+        input
+          .closest("tedi-form-field")!
+          .querySelector(".tedi-form-field__clear") as HTMLButtonElement
+      ).click();
+      fixture.detectChanges();
+
+      expect(input.value).toBe("");
+      expect(rows()).toBe(total);
+    });
+
     it("clearFilters() resets every column filter at once", () => {
       const fixture = setupHost();
       fixture.componentInstance.enableColumnFilters.set(true);
diff --git a/src/tedi/components/form/form-field/form-field-control.ts b/src/tedi/components/form/form-field/form-field-control.ts
index fa5c28133..bf4ac4062 100644
--- a/src/tedi/components/form/form-field/form-field-control.ts
+++ b/src/tedi/components/form/form-field/form-field-control.ts
@@ -53,6 +53,16 @@ export interface FormFieldControl<T = unknown> {
    * button so a single `clearable` never yields two.
    */
   readonly ownsClearButton?: boolean;
+  /**
+   * Whether the control is read-only. The field hides its clear button while it
+   * is, since the user cannot edit the value; a programmatic `reset()` still works.
+   */
+  readOnly?: Signal<boolean>;
+  /**
+   * Set to `false` by controls that never take a clear button — a textarea, per
+   * the design. The field then skips its button whatever `clearable` says.
+   */
+  readonly clearButton?: false;
 }
 
 /**
diff --git a/src/tedi/components/form/form-field/form-field.component.spec.ts b/src/tedi/components/form/form-field/form-field.component.spec.ts
index 271afdc6a..b7efb1a99 100644
--- a/src/tedi/components/form/form-field/form-field.component.spec.ts
+++ b/src/tedi/components/form/form-field/form-field.component.spec.ts
@@ -1,5 +1,6 @@
 import { Component, signal, ViewChild } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
 import {
   FormFieldComponent,
   FormFieldIcon,
@@ -11,6 +12,7 @@ import {
 } from "./form-field-control";
 import { FeedbackTextComponent } from "../feedback-text/feedback-text.component";
 import { TextareaComponent } from "../textarea/textarea.component";
+import { TextFieldComponent } from "../text-field/text-field.component";
 import { LabelComponent } from "../label/label.component";
 import { LabelRowComponent } from "../label-row/label-row.component";
 import { FormFieldExtraDirective } from "./form-field-extra.directive";
@@ -508,7 +510,7 @@ describe("FormFieldComponent", () => {
   standalone: true,
   imports: [FormFieldComponent, TextareaComponent],
   template: `
-    <tedi-form-field #formField [clearable]="false">
+    <tedi-form-field #formField>
       <textarea tedi-textarea [value]="'hello'"></textarea>
     </tedi-form-field>
   `,
@@ -614,20 +616,33 @@ describe("FormFieldComponent wrapping a textarea", () => {
     );
   });
 
-  it("clears the textarea from the box's clear button", () => {
+  it("gives the textarea no clear button, even when clearable", () => {
     const clearFixture = TestBed.createComponent(
       ClearableTextareaHostComponent,
     );
     clearFixture.detectChanges();
 
-    const ta: HTMLTextAreaElement =
-      clearFixture.nativeElement.querySelector("textarea");
-    expect(ta.value).toBe("hello");
+    expect(
+      clearFixture.nativeElement.querySelector(".tedi-form-field__clear"),
+    ).toBeNull();
+    expect(
+      clearFixture.nativeElement.querySelector(".tedi-form-field__box"),
+    ).toBeNull();
+  });
+
+  it("still clears the textarea on a programmatic reset", () => {
+    const clearFixture = TestBed.createComponent(
+      ClearableTextareaHostComponent,
+    );
+    clearFixture.detectChanges();
 
-    clearFixture.nativeElement.querySelector(".tedi-form-field__clear").click();
+    const textarea = clearFixture.debugElement
+      .query(By.directive(TextareaComponent))
+      .injector.get(TextareaComponent);
+    textarea.reset();
     clearFixture.detectChanges();
 
-    expect(ta.value).toBe("");
+    expect(clearFixture.nativeElement.querySelector("textarea").value).toBe("");
   });
 });
 
@@ -965,3 +980,60 @@ describe("FormFieldComponent projection slots", () => {
     expect(box.contains(extra())).toBe(false);
   });
 });
+
+@Component({
+  standalone: true,
+  imports: [FormFieldComponent, TextFieldComponent],
+  template: `
+    <tedi-form-field #formField>
+      <input tedi-text-field [value]="'hello'" [readOnly]="readOnly" />
+    </tedi-form-field>
+  `,
+})
+class ReadOnlyTextFieldHostComponent {
+  @ViewChild("formField", { static: true }) formField!: FormFieldComponent;
+  @ViewChild(TextFieldComponent, { static: true })
+  textField!: TextFieldComponent;
+  readOnly = true;
+}
+
+describe("FormFieldComponent with a read-only text field", () => {
+  let fixture: ComponentFixture<ReadOnlyTextFieldHostComponent>;
+  let host: ReadOnlyTextFieldHostComponent;
+
+  const clearButton = () =>
+    fixture.nativeElement.querySelector(
+      ".tedi-form-field__clear",
+    ) as HTMLButtonElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ReadOnlyTextFieldHostComponent],
+      providers: [{ provide: TEDI_TRANSLATION_DEFAULT_TOKEN, useValue: "et" }],
+    });
+    fixture = TestBed.createComponent(ReadOnlyTextFieldHostComponent);
+    host = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("hides and disables the clear button while read-only", () => {
+    expect(host.formField.showClearButton()).toBe(false);
+    expect(clearButton().disabled).toBe(true);
+    expect(
+      fixture.nativeElement.querySelector(".tedi-form-field__buttons--hidden"),
+    ).toBeTruthy();
+  });
+
+  it("shows the clear button again once editable", () => {
+    host.readOnly = false;
+    fixture.detectChanges();
+
+    expect(host.formField.showClearButton()).toBe(true);
+    expect(clearButton().disabled).toBe(false);
+  });
+
+  it("still clears on a programmatic reset", () => {
+    host.textField.reset();
+    expect(host.textField.value()).toBe("");
+  });
+});
diff --git a/src/tedi/components/form/form-field/form-field.component.ts b/src/tedi/components/form/form-field/form-field.component.ts
index 511222444..91c5d69f9 100644
--- a/src/tedi/components/form/form-field/form-field.component.ts
+++ b/src/tedi/components/form/form-field/form-field.component.ts
@@ -86,7 +86,7 @@ export class FormFieldComponent implements FieldContext {
   /**
    * Whether the field shows a clear button once the control holds a value. The
    * single source of truth for every control inside it — date and time fields
-   * read it too instead of declaring their own input.
+   * read it too instead of declaring their own input. A textarea never gets one.
    * @default true
    */
   clearable = input(true, { transform: booleanAttribute });
@@ -128,11 +128,16 @@ export class FormFieldComponent implements FieldContext {
   /**
    * Whether the field renders its own clear button. Controls that render one
    * themselves opt out, so `clearable` drives them without producing two, and
-   * a control that cannot be reset gets none.
+   * a control that cannot be reset, or never takes one, gets none.
    */
   readonly renderClearButton = computed(() => {
     const control = this.control();
-    return this.clearable() && !control?.ownsClearButton && !!control?.reset;
+    return (
+      this.clearable() &&
+      !control?.ownsClearButton &&
+      control?.clearButton !== false &&
+      !!control?.reset
+    );
   });
 
   readonly ownsSurface = computed(() => this.hasBox());
@@ -217,7 +222,10 @@ export class FormFieldComponent implements FieldContext {
   });
 
   readonly showClearButton = computed(
-    () => this.renderClearButton() && !!this.control()?.value(),
+    () =>
+      this.renderClearButton() &&
+      !!this.control()?.value() &&
+      !this.control()?.readOnly?.(),
   );
 
   clear() {
diff --git a/src/tedi/components/form/text-field/text-field.component.spec.ts b/src/tedi/components/form/text-field/text-field.component.spec.ts
index dc3b2ddae..1399c39f6 100644
--- a/src/tedi/components/form/text-field/text-field.component.spec.ts
+++ b/src/tedi/components/form/text-field/text-field.component.spec.ts
@@ -233,3 +233,48 @@ describe("TextFieldComponent", () => {
     });
   });
 });
+
+@Component({
+  standalone: true,
+  imports: [TextFieldComponent],
+  template: `
+    <input tedi-text-field id="attr" readonly />
+    <input tedi-text-field id="prop" [readOnly]="readOnly" />
+  `,
+})
+class ReadOnlyHostComponent {
+  readOnly = true;
+}
+
+describe("TextFieldComponent readOnly", () => {
+  let fixture: ComponentFixture<ReadOnlyHostComponent>;
+
+  const field = (id: string) => fixture.debugElement.query(By.css(`#${id}`));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ReadOnlyHostComponent],
+      providers: [{ provide: TEDI_TRANSLATION_DEFAULT_TOKEN, useValue: "et" }],
+    });
+    fixture = TestBed.createComponent(ReadOnlyHostComponent);
+    fixture.detectChanges();
+  });
+
+  it("reads the readonly attribute and keeps it on the input", () => {
+    const attr = field("attr");
+    expect(attr.injector.get(TextFieldComponent).readOnly()).toBe(true);
+    expect((attr.nativeElement as HTMLInputElement).readOnly).toBe(true);
+  });
+
+  it("reads and reflects a [readOnly] property binding", () => {
+    const prop = field("prop");
+    const component = prop.injector.get(TextFieldComponent);
+    expect(component.readOnly()).toBe(true);
+    expect((prop.nativeElement as HTMLInputElement).readOnly).toBe(true);
+
+    fixture.componentInstance.readOnly = false;
+    fixture.detectChanges();
+    expect(component.readOnly()).toBe(false);
+    expect((prop.nativeElement as HTMLInputElement).readOnly).toBe(false);
+  });
+});
diff --git a/src/tedi/components/form/text-field/text-field.component.ts b/src/tedi/components/form/text-field/text-field.component.ts
index ff4748b39..87289a09d 100644
--- a/src/tedi/components/form/text-field/text-field.component.ts
+++ b/src/tedi/components/form/text-field/text-field.component.ts
@@ -54,6 +54,7 @@ import { controlDescribedBy } from "../form-field/control-described-by";
     "[attr.aria-invalid]": "invalid() || null",
     "[attr.aria-describedby]": "describedBy.attribute()",
     "[disabled]": "disabled()",
+    "[readOnly]": "readOnly()",
     "(input)": "handleInputChange($event)",
     "(blur)": "handleBlur()",
   },
@@ -101,6 +102,23 @@ export class TextFieldComponent
     transform: booleanAttribute,
   });
 
+  // Native `readonly`, under both the attribute (`readonly`) and the property
+  // (`[readOnly]`) spelling, so a wrapping `tedi-form-field` can hide its clear
+  // button while the value cannot be edited.
+  readonly readOnlyAttribute = input(false, {
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    alias: "readonly",
+    transform: booleanAttribute,
+  });
+  readonly readOnlyProperty = input(false, {
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    alias: "readOnly",
+    transform: booleanAttribute,
+  });
+  readonly readOnly = computed(
+    () => this.readOnlyAttribute() || this.readOnlyProperty(),
+  );
+
   readonly disabled = computed(
     () =>
       this.disabledInput() ||
diff --git a/src/tedi/components/form/text-field/text-field.stories.ts b/src/tedi/components/form/text-field/text-field.stories.ts
index 7016b2c96..6266c2911 100644
--- a/src/tedi/components/form/text-field/text-field.stories.ts
+++ b/src/tedi/components/form/text-field/text-field.stories.ts
@@ -87,7 +87,7 @@ export default {
     },
     clearable: {
       description:
-        "Whether the field shows a clear button once it has a value. Set `false` to opt out.",
+        "Whether the field shows a clear button once it has a value. Set `false` to opt out. Hidden while the text field is read-only.",
       control: {
         type: "boolean",
       },
@@ -97,6 +97,18 @@ export default {
         defaultValue: { summary: "true" },
       },
     },
+    readOnly: {
+      description:
+        "Makes the field read-only, like the native `readonly` attribute, which is also accepted. The value can still be selected and submitted, but not edited, and a wrapping form field hides its clear button.",
+      control: {
+        type: "boolean",
+      },
+      table: {
+        category: "Text Field inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
     arrowsHidden: {
       description: "Whether to hide arrows for number inputs.",
       control: {
@@ -126,16 +138,18 @@ export const Default: StoryObj = {
     size: "default",
     clearable: true,
     arrowsHidden: true,
+    readOnly: false,
   },
-  render: ({ arrowsHidden, ...formFieldArgs }) => ({
+  render: ({ arrowsHidden, readOnly, ...formFieldArgs }) => ({
     props: {
       arrowsHidden,
+      readOnly,
       ...formFieldArgs,
     },
     template: `
       <tedi-form-field ${argsToTemplate(formFieldArgs)}>
         <label tedi-label [for]="'default'">Label</label>
-        <input tedi-text-field [arrowsHidden]="arrowsHidden" (clear)="clear($event)" id="default" />
+        <input tedi-text-field [arrowsHidden]="arrowsHidden" [readOnly]="readOnly" (clear)="clear($event)" id="default" />
       </tedi-form-field>
     `,
   }),
diff --git a/src/tedi/components/form/textarea/textarea.component.spec.ts b/src/tedi/components/form/textarea/textarea.component.spec.ts
index caeedd2b2..9562544eb 100644
--- a/src/tedi/components/form/textarea/textarea.component.spec.ts
+++ b/src/tedi/components/form/textarea/textarea.component.spec.ts
@@ -249,3 +249,27 @@ describe("TextareaComponent", () => {
     });
   });
 });
+
+@Component({
+  standalone: true,
+  imports: [TextareaComponent],
+  template: `<textarea tedi-textarea readonly></textarea>`,
+})
+class ReadOnlyTextareaHostComponent {}
+
+describe("TextareaComponent readOnly", () => {
+  it("reads the readonly attribute and keeps it on the textarea", () => {
+    TestBed.configureTestingModule({
+      imports: [ReadOnlyTextareaHostComponent],
+      providers: [{ provide: TEDI_TRANSLATION_DEFAULT_TOKEN, useValue: "et" }],
+    });
+    const fixture = TestBed.createComponent(ReadOnlyTextareaHostComponent);
+    fixture.detectChanges();
+
+    const textarea = fixture.debugElement.query(
+      By.directive(TextareaComponent),
+    );
+    expect(textarea.injector.get(TextareaComponent).readOnly()).toBe(true);
+    expect((textarea.nativeElement as HTMLTextAreaElement).readOnly).toBe(true);
+  });
+});
diff --git a/src/tedi/components/form/textarea/textarea.component.ts b/src/tedi/components/form/textarea/textarea.component.ts
index a70b38a2f..a8a2a6ed4 100644
--- a/src/tedi/components/form/textarea/textarea.component.ts
+++ b/src/tedi/components/form/textarea/textarea.component.ts
@@ -1,4 +1,5 @@
 import {
+  booleanAttribute,
   ChangeDetectionStrategy,
   Component,
   computed,
@@ -57,6 +58,7 @@ export type TextareaSize = Exclude<InputSize, "large">;
     "[style.max-height]": "maxHeightStyle()",
     "[attr.aria-invalid]": "invalid() || null",
     "[attr.aria-describedby]": "describedBy.attribute()",
+    "[readOnly]": "readOnly()",
     "(input)": "handleInputChange($event)",
     "(blur)": "handleBlur()",
   },
@@ -175,6 +177,26 @@ export class TextareaComponent
     return limits.length === 1 ? limits[0] : `min(${limits.join(", ")})`;
   });
 
+  // Native `readonly`, under both the attribute (`readonly`) and the property
+  // (`[readOnly]`) spelling, so a wrapping `tedi-form-field` can hide its clear
+  // button while the value cannot be edited.
+  readonly readOnlyAttribute = input(false, {
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    alias: "readonly",
+    transform: booleanAttribute,
+  });
+  readonly readOnlyProperty = input(false, {
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    alias: "readOnly",
+    transform: booleanAttribute,
+  });
+  readonly readOnly = computed(
+    () => this.readOnlyAttribute() || this.readOnlyProperty(),
+  );
+
+  /** Textareas take no clear button, even inside a `clearable` form field. */
+  readonly clearButton = false;
+
   readonly disabled = computed(
     () => this.formDisabled() || (this.fieldContext?.disabled() ?? false),
   );
diff --git a/src/tedi/components/form/textarea/textarea.stories.ts b/src/tedi/components/form/textarea/textarea.stories.ts
index 0af1eec53..497ac9de1 100644
--- a/src/tedi/components/form/textarea/textarea.stories.ts
+++ b/src/tedi/components/form/textarea/textarea.stories.ts
@@ -83,6 +83,18 @@ export default {
         type: { summary: "number | undefined" },
       },
     },
+    readOnly: {
+      description:
+        "Makes the field read-only, like the native `readonly` attribute, which is also accepted. The value can still be selected and submitted, but not edited.",
+      control: {
+        type: "boolean",
+      },
+      table: {
+        category: "Textarea inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
     placeholder: {
       control: "text",
       description: "Placeholder text shown when the textarea is empty.",
@@ -164,8 +176,10 @@ export const Default: StoryObj = {
     autoGrow: false,
     minRows: 3,
     maxRows: 12,
+    readOnly: false,
   },
   render: ({
+    readOnly,
     resizable,
     placeholder,
     autoGrow,
@@ -176,6 +190,7 @@ export const Default: StoryObj = {
     ...formFieldArgs
   }) => ({
     props: {
+      readOnly,
       resizable,
       placeholder,
       autoGrow,
@@ -197,6 +212,7 @@ export const Default: StoryObj = {
           [maxRows]="maxRows"
           [height]="height"
           [maxHeight]="maxHeight"
+          [readOnly]="readOnly"
           [attr.placeholder]="placeholder"
         ></textarea>
       </tedi-form-field>

From 26d60ab98795d2d5acf701dc24a68be8987ebbaf Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Tue, 29 Sep 2026 19:44:58 +0300
Subject: [PATCH 11/11] fix(text-editor): never give the text editor a clear
 button #572

---
 .../text-editor/text-editor.component.spec.ts | 32 +++++++++++++++++++
 .../text-editor/text-editor.component.ts      |  3 ++
 .../text-editor/text-editor.stories.ts        |  2 ++
 3 files changed, 37 insertions(+)

diff --git a/src/community/text-editor/text-editor.component.spec.ts b/src/community/text-editor/text-editor.component.spec.ts
index 41ecd83c4..5fdb134c6 100644
--- a/src/community/text-editor/text-editor.component.spec.ts
+++ b/src/community/text-editor/text-editor.component.spec.ts
@@ -5,6 +5,7 @@ import { By } from "@angular/platform-browser";
 import { QuillModules } from "ngx-quill";
 import type Quill from "quill";
 import {
+  FormFieldComponent,
   TEDI_TRANSLATION_DEFAULT_TOKEN,
   TediTranslationService,
 } from "@tedi-design-system/angular/tedi";
@@ -373,3 +374,34 @@ describe("TextEditorComponent", () => {
     });
   });
 });
+
+@Component({
+  standalone: true,
+  imports: [FormFieldComponent, TextEditorComponent, ReactiveFormsModule],
+  template: `
+    <tedi-form-field [clearable]="true">
+      <tedi-text-editor [formControl]="control" inputId="in-field" />
+    </tedi-form-field>
+  `,
+})
+class FormFieldHostComponent {
+  control = new FormControl<string>("<p>Text</p>", { nonNullable: true });
+}
+
+describe("TextEditorComponent inside tedi-form-field", () => {
+  it("gets no clear button or field box, even when clearable", () => {
+    TestBed.configureTestingModule({
+      imports: [FormFieldHostComponent],
+      providers: [
+        { provide: TediTranslationService, useClass: TranslationMock },
+        { provide: TEDI_TRANSLATION_DEFAULT_TOKEN, useValue: "et" },
+      ],
+    });
+    const fixture = TestBed.createComponent(FormFieldHostComponent);
+    fixture.detectChanges();
+
+    const el: HTMLElement = fixture.nativeElement;
+    expect(el.querySelector(".tedi-form-field__clear")).toBeNull();
+    expect(el.querySelector(".tedi-form-field__box")).toBeNull();
+  });
+});
diff --git a/src/community/text-editor/text-editor.component.ts b/src/community/text-editor/text-editor.component.ts
index 844379dbb..b42edaca4 100644
--- a/src/community/text-editor/text-editor.component.ts
+++ b/src/community/text-editor/text-editor.component.ts
@@ -260,6 +260,9 @@ export class TextEditorComponent
   readonly touched = this.derived.touched;
   readonly dirty = this.derived.dirty;
 
+  /** Rich text takes no clear button, even inside a `clearable` form field. */
+  readonly clearButton = false;
+
   readonly disabled = computed(
     () => this.formDisabled() || (this.fieldContext?.disabled() ?? false),
   );
diff --git a/src/community/text-editor/text-editor.stories.ts b/src/community/text-editor/text-editor.stories.ts
index a6d0fc27f..4dc2e9f28 100644
--- a/src/community/text-editor/text-editor.stories.ts
+++ b/src/community/text-editor/text-editor.stories.ts
@@ -11,6 +11,8 @@ import {
 import { TextEditorComponent } from "./text-editor.component";
 
 /**
+ * <a href="https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.77.99?node-id=9938-87562&m=dev" target="_blank">Figma ↗</a>
+ *
  * Rich text editor built on <a href="https://github.com/KillerCodeMonkey/ngx-quill" target="_blank">ngx-quill ↗</a>.
  *
  * Install `ngx-quill` and `quill` yourself — they are optional peer dependencies