@cahyo-dimas/freeday 1.13.0 → 1.14.0

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 Semua perubahan penting dicatat di sini. Format longgar mengikuti
 [Keep a Changelog](https://keepachangelog.com/); tiap versi = git tag.
 
+## [1.14.0] — 2026-08-01
+### Added
+- **Read-only state across the form controls (#39).** `input` / `textarea` gain a `[readonly]` rule —
+  full-contrast text on a muted surface with a softened border and no focus-ring escalation, distinct
+  from `:disabled` (which dims the value to placeholder-grey and drops it from tab order). A new
+  `readonly` prop lands on all six controlled select-type adapters — `FdyCombo`, `FdyCascade`,
+  `FdyDatepicker`, `FdyDateRange`, `FdyAutocomplete`, `FdyCfl` (Vue + React): the control stays focusable
+  and shows its value with `aria-readonly="true"` but can't be opened or changed (`FdyDatepicker`'s clear
+  button is suppressed too). Read-only ≠ disabled — it keeps tab order, full contrast, and stays
+  selectable / copyable / submittable, so a real value the user may not edit reads as data, not an empty
+  placeholder. Verified in-browser (readonly `opacity:1` vs disabled `0.5`; text at full `--color-text`).
+- **Interaction-state coverage completed.** Added the missing `disabled` state to `timepicker`, `rating`
+  (`.fdy-rating--disabled`), `tree` (`[aria-disabled]` rows), `tabs`, `file-upload`
+  (`[aria-disabled]` / `.is-disabled`), and `datepicker`; and the missing `invalid` state to `rating`
+  (`.fdy-rating--error`). The vanilla datetime composer now reflects `data-fdy-disabled` /
+  `data-fdy-invalid` from its wrapper onto **both** child pickers so a datetime reads as one control
+  (applied on a macrotask, so it lands after both child triggers are built — a microtask would run
+  before the later-registered timepicker enhancer). All additive; no breaking changes.
+
+## [1.13.1] — 2026-08-01
+### Fixed
+- **`FdyCombo` can be selected with the mouse again (#38).** Clicking an option did nothing — the
+  listbox closed and no `update:modelValue` fired (keyboard select still worked, which is why a
+  keyboard-only smoke test missed it). The option `<li>` isn't focusable, so a `mousedown` moved focus
+  off the combobox button; the root's `focusout` handler then closed the list — removing the `<li>` —
+  *before* `mouseup`, so the browser never generated a `click` and `choose()` was never reached. Added
+  `@mousedown.prevent` (Vue) / `onMouseDown` `preventDefault` (React) on the option so focus stays on the
+  button and the click lands — the same pattern the sibling `FdyDatepicker` / `FdyAutocomplete` (and the
+  vanilla `freeday-select.js`, fixed in v1.6.1) already use. Both adapters; no API change; keyboard and
+  hover paths untouched. Verified with trusted CDP mouse events (a synthetic `dispatchEvent` won't
+  reproduce it — untrusted events run no default action, so focus never moves).
+
 ## [1.13.0] — 2026-07-30
 ### Added
 - **`FdyDatepicker` clear affordance — an optional date can now be unset (#37A).** A new `clearable`

package/README.id.md

@@ -5,7 +5,7 @@
 > **Lebih banyak _free day_ buat dev — UI kit-nya sudah siap pakai.**
 
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v1.13.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.13.0)
+[![Release](https://img.shields.io/badge/release-v1.14.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.14.0)
 
 UI KIT yang token-driven & framework-agnostic — satu sumber kebenaran untuk warna, tipografi,
 spasi, dan komponen. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.

package/README.md

@@ -5,7 +5,7 @@
 > **More free days for devs — the UI kit is ready to use.**
 
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v1.13.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.13.0)
+[![Release](https://img.shields.io/badge/release-v1.14.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.14.0)
 
 A token-driven, framework-agnostic UI kit — one source of truth for color, typography,
 spacing, and components. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.

package/adapters/react/components/FdyAutocomplete.tsx

@@ -21,6 +21,8 @@ export interface FdyAutocompleteProps {
   ariaLabel?: string;
   ariaLabelledby?: string;
   disabled?: boolean;
+  /** Locked/view mode: the input is not editable and the list won't open, but it stays focusable and shows its value. Unlike `disabled`, it keeps tab order and isn't greyed. */
+  readonly?: boolean;
   invalid?: boolean;
   describedby?: string;
 }
@@ -44,6 +46,7 @@ export function FdyAutocomplete(props: FdyAutocompleteProps): JSX.Element {
   }, []);
 
   const isDisabled: boolean = props.disabled === true;
+  const isReadonly: boolean = props.readonly === true;
   const isInvalid: boolean = props.invalid === true;
 
   const filtered: string[] = useMemo((): string[] => {
@@ -54,7 +57,7 @@ export function FdyAutocomplete(props: FdyAutocompleteProps): JSX.Element {
   const activeDescendant: string | undefined =
     open && active >= 0 && active < filtered.length ? optionId(active) : undefined;
 
-  const openList = (): void => { if (!isDisabled) setOpen(true); };
+  const openList = (): void => { if (!isDisabled && !isReadonly) setOpen(true); };
   const closeList = (): void => { setOpen(false); setActive(-1); };
 
   const choose = (label: string): void => {
@@ -65,7 +68,7 @@ export function FdyAutocomplete(props: FdyAutocompleteProps): JSX.Element {
   };
 
   const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>): void => {
-    if (isDisabled) return;
+    if (isDisabled || isReadonly) return;
     switch (e.key) {
       case 'ArrowDown':
         e.preventDefault();
@@ -128,6 +131,7 @@ export function FdyAutocomplete(props: FdyAutocompleteProps): JSX.Element {
         autoComplete="off"
         placeholder={props.placeholder}
         disabled={isDisabled}
+        readOnly={isReadonly}
         value={props.value}
         onChange={(e: React.ChangeEvent<HTMLInputElement>): void => { props.onChange(e.target.value); setActive(-1); openList(); }}
         onFocus={openList}

package/adapters/react/components/FdyCascade.tsx

@@ -29,6 +29,8 @@ export interface FdyCascadeProps {
   id?: string;
   ariaLabelledby?: string;
   disabled?: boolean;
+  /** Locked/view mode: stays focusable and shows its value, but can't be opened or changed. Unlike `disabled`, it keeps tab order and isn't greyed. */
+  readonly?: boolean;
   invalid?: boolean;
   describedby?: string;
 }
@@ -70,6 +72,7 @@ export function FdyCascade(props: FdyCascadeProps): JSX.Element {
   }, []);
 
   const isDisabled: boolean = props.disabled === true;
+  const isReadonly: boolean = props.readonly === true;
   const isInvalid: boolean = props.invalid === true;
 
   const current: ReadonlyArray<CascadeNode> =
@@ -86,7 +89,7 @@ export function FdyCascade(props: FdyCascadeProps): JSX.Element {
   const crumb: string = stack.length > 0 ? stack.map((n: CascadeNode): string => n.label).join(sep) : name;
 
   const openPanel = (): void => {
-    if (isDisabled) return;
+    if (isDisabled || isReadonly) return;
     // Re-open at the selected leaf's level for quick re-selection (matches the enhancer).
     setStack(selectedTrail !== null && selectedTrail.length > 1 ? selectedTrail.slice(0, -1) : []);
     setActive(0);
@@ -174,6 +177,7 @@ export function FdyCascade(props: FdyCascadeProps): JSX.Element {
         aria-label={props.ariaLabelledby === undefined ? name : undefined}
         aria-labelledby={props.ariaLabelledby}
         aria-invalid={isInvalid ? 'true' : undefined}
+        aria-readonly={isReadonly ? 'true' : undefined}
         aria-describedby={props.describedby}
         disabled={isDisabled}
         onClick={(): void => { if (open) closePanel(true); else openPanel(); }}

package/adapters/react/components/FdyCfl.tsx

@@ -31,6 +31,8 @@ export interface FdyCflProps<Row extends Record<string, unknown>> {
   pageSize?: number;
   placeholder?: string;
   disabled?: boolean;
+  /** Locked/view mode: shows the picked value (focusable, copyable), but the search dialog can't be opened. Unlike `disabled`, it keeps tab order and isn't greyed. */
+  readonly?: boolean;
   invalid?: boolean;
   describedby?: string;
   id?: string;
@@ -68,6 +70,7 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
   const searchTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const isDisabled: boolean = props.disabled === true;
+  const isReadonly: boolean = props.readonly === true;
   const isInvalid: boolean = props.invalid === true;
   const displayValue: string = props.value !== null ? props.display(props.value) : '';
   // The results <table> (owner of `resultsId`) only renders in the rows branch, so gate the
@@ -187,7 +190,7 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
 
   // --- Open / close ------------------------------------------------------------------------
   function openDialog(): void {
-    if (isDisabled) return;
+    if (isDisabled || isReadonly) return;
     if (searchTimerRef.current !== null) {
       clearTimeout(searchTimerRef.current);
       searchTimerRef.current = null;
@@ -257,7 +260,7 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
         aria-haspopup="dialog"
         aria-labelledby={props.ariaLabelledby}
         aria-label={props.ariaLabelledby ? undefined : 'Buka pencarian'}
-        disabled={isDisabled}
+        disabled={isDisabled || isReadonly}
         onClick={openDialog}
       >
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">

package/adapters/react/components/FdyCombo.tsx

@@ -15,6 +15,8 @@ export interface FdyComboProps<T extends string> {
   ariaLabelledby?: string;
   placeholder?: string;
   disabled?: boolean;
+  /** Locked/view mode: stays focusable and shows its value, but can't be opened or changed. Unlike `disabled`, it keeps tab order and isn't greyed. */
+  readonly?: boolean;
   invalid?: boolean;
   describedby?: string;
 }
@@ -39,6 +41,7 @@ export function FdyCombo<T extends string>(props: FdyComboProps<T>): JSX.Element
   }, []);
 
   const isDisabled: boolean = props.disabled === true;
+  const isReadonly: boolean = props.readonly === true;
   const isInvalid: boolean = props.invalid === true;
   const selectedIndex: number = useMemo(
     (): number => props.options.findIndex((o: FdyComboOption<T>): boolean => o.value === props.value),
@@ -53,7 +56,7 @@ export function FdyCombo<T extends string>(props: FdyComboProps<T>): JSX.Element
     setHighlighted(len === 0 ? -1 : ((index % len) + len) % len);
   };
   const openList = (): void => {
-    if (isDisabled || open) return;
+    if (isDisabled || isReadonly || open) return;
     setOpen(true);
     const start: number = selectedIndex >= 0 ? selectedIndex : 0;
     const len: number = props.options.length;
@@ -85,7 +88,7 @@ export function FdyCombo<T extends string>(props: FdyComboProps<T>): JSX.Element
   };
 
   const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>): void => {
-    if (isDisabled) return;
+    if (isDisabled || isReadonly) return;
     switch (e.key) {
       case 'ArrowDown': e.preventDefault(); if (open) setHighlight(highlighted + 1); else openList(); break;
       case 'ArrowUp': e.preventDefault(); if (open) setHighlight(highlighted - 1); else openList(); break;
@@ -140,6 +143,7 @@ export function FdyCombo<T extends string>(props: FdyComboProps<T>): JSX.Element
         aria-activedescendant={activeDescendant}
         aria-labelledby={props.ariaLabelledby}
         aria-invalid={isInvalid ? 'true' : undefined}
+        aria-readonly={isReadonly ? 'true' : undefined}
         aria-describedby={props.describedby}
         disabled={isDisabled}
         onClick={toggle}
@@ -148,12 +152,16 @@ export function FdyCombo<T extends string>(props: FdyComboProps<T>): JSX.Element
       </button>
       <ul id={listboxId} ref={listboxRef} className="fdy-combo__listbox" role="listbox" hidden={!open}>
         {props.options.map((opt: FdyComboOption<T>, i: number): JSX.Element => (
+          // onMouseDown preventDefault keeps focus on the button: the option <li> isn't focusable, so a
+          // plain mousedown moves focus out of the combo, fires onBlur (focusout), and closes the list
+          // before the click lands. Same pattern as FdyDatepicker/FdyAutocomplete.
           <li
             id={optionId(i)}
             key={opt.value}
             className={i === highlighted ? 'fdy-combo__option is-highlighted' : 'fdy-combo__option'}
             role="option"
             aria-selected={opt.value === props.value}
+            onMouseDown={(e: React.MouseEvent): void => e.preventDefault()}
             onClick={(): void => choose(i)}
             onMouseMove={(): void => setHighlight(i)}
           >

package/adapters/react/components/FdyDateRange.tsx

@@ -19,6 +19,8 @@ export interface FdyDateRangeProps {
   max?: string;
   locale?: string;
   disabled?: boolean;
+  /** Locked/view mode for both pickers — focusable, values shown, but can't be opened or changed. */
+  readonly?: boolean;
   invalid?: boolean;
   describedby?: string;
   startPlaceholder?: string;
@@ -45,6 +47,7 @@ export function FdyDateRange(props: FdyDateRangeProps): JSX.Element {
         max={props.value.end ?? props.max}
         locale={props.locale}
         disabled={props.disabled}
+        readonly={props.readonly}
         invalid={props.invalid}
         describedby={props.describedby}
         placeholder={props.startPlaceholder ?? 'Dari'}
@@ -57,6 +60,7 @@ export function FdyDateRange(props: FdyDateRangeProps): JSX.Element {
         max={props.max}
         locale={props.locale}
         disabled={props.disabled}
+        readonly={props.readonly}
         invalid={props.invalid}
         describedby={props.describedby}
         placeholder={props.endPlaceholder ?? 'Sampai'}

package/adapters/react/components/FdyDatepicker.tsx

@@ -29,6 +29,8 @@ export interface FdyDatepickerProps {
   locale?: string;
   placeholder?: string;
   disabled?: boolean;
+  /** Locked/view mode: stays focusable and shows its date, but can't be opened, cleared, or changed. Unlike `disabled`, it keeps tab order and isn't greyed. */
+  readonly?: boolean;
   invalid?: boolean;
   describedby?: string;
   id?: string;
@@ -116,9 +118,10 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
   const minDate: Date | null = useMemo((): Date | null => parseISO(props.min), [props.min]);
   const maxDate: Date | null = useMemo((): Date | null => parseISO(props.max), [props.max]);
   const isDisabled: boolean = props.disabled === true;
+  const isReadonly: boolean = props.readonly === true;
   const isInvalid: boolean = props.invalid === true;
   const displayPlaceholder: string = props.placeholder ?? 'Select date';
-  const showClear: boolean = props.clearable === true && selectedDate !== null && !isDisabled;
+  const showClear: boolean = props.clearable === true && selectedDate !== null && !isDisabled && !isReadonly;
   const prevMonthLabelText: string = props.prevMonthLabel ?? 'Previous month';
   const nextMonthLabelText: string = props.nextMonthLabel ?? 'Next month';
   const clearLabelText: string = props.clearLabel ?? 'Clear date';
@@ -223,7 +226,7 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
   }
 
   function openPanel(): void {
-    if (isDisabled || open) return;
+    if (isDisabled || isReadonly || open) return;
     const next: Date = selectedDate ?? focusDate ?? new Date();
     setFocusDate(next);
     setViewMonth(new Date(next.getFullYear(), next.getMonth(), 1));
@@ -319,6 +322,7 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
         aria-expanded={open}
         aria-labelledby={props.ariaLabelledby}
         aria-invalid={isInvalid ? 'true' : undefined}
+        aria-readonly={isReadonly ? 'true' : undefined}
         aria-describedby={props.describedby}
         disabled={isDisabled}
         onClick={toggle}

package/adapters/vue/components/FdyAutocomplete.vue

@@ -18,6 +18,8 @@ const props = defineProps<{
   ariaLabel?: string;
   ariaLabelledby?: string;
   disabled?: boolean;
+  /** Locked/view mode: the input is not editable and the list won't open, but it stays focusable and shows its value. Unlike `disabled`, it keeps tab order and isn't greyed. */
+  readonly?: boolean;
   invalid?: boolean;
   describedby?: string;
 }>();
@@ -44,6 +46,7 @@ const active: Ref<number> = ref(-1);
 usePopover(listboxEl, inputEl, open);
 
 const isDisabled: ComputedRef<boolean> = computed((): boolean => props.disabled === true);
+const isReadonly: ComputedRef<boolean> = computed((): boolean => props.readonly === true);
 const isInvalid: ComputedRef<boolean> = computed((): boolean => props.invalid === true);
 
 const filtered: ComputedRef<string[]> = computed((): string[] => {
@@ -56,7 +59,7 @@ const activeDescendant: ComputedRef<string | undefined> = computed((): string |
 );
 
 function openList(): void {
-  if (!isDisabled.value) open.value = true;
+  if (!isDisabled.value && !isReadonly.value) open.value = true;
 }
 function closeList(): void {
   open.value = false;
@@ -76,7 +79,7 @@ function onInput(e: Event): void {
 }
 
 function onKeydown(e: KeyboardEvent): void {
-  if (isDisabled.value) return;
+  if (isDisabled.value || isReadonly.value) return;
   const len: number = filtered.value.length;
   switch (e.key) {
     case 'ArrowDown':
@@ -144,6 +147,7 @@ watch(active, async (i: number): Promise<void> => {
       autocomplete="off"
       :placeholder="placeholder"
       :disabled="isDisabled"
+      :readonly="isReadonly"
       :value="modelValue"
       @input="onInput"
       @focus="openList"

package/adapters/vue/components/FdyCascade.vue

@@ -42,6 +42,8 @@ const props = defineProps<{
   id?: string;
   ariaLabelledby?: string;
   disabled?: boolean;
+  /** Locked/view mode: stays focusable and shows its value, but can't be opened or changed. Unlike `disabled`, it keeps tab order and isn't greyed. */
+  readonly?: boolean;
   invalid?: boolean;
   describedby?: string;
 }>();
@@ -73,6 +75,7 @@ usePopover(panelEl, triggerEl, open);
 const sep: ComputedRef<string> = computed((): string => props.separator ?? ' / ');
 const name: ComputedRef<string> = computed((): string => props.label ?? 'Pilih');
 const isDisabled: ComputedRef<boolean> = computed((): boolean => props.disabled === true);
+const isReadonly: ComputedRef<boolean> = computed((): boolean => props.readonly === true);
 const isInvalid: ComputedRef<boolean> = computed((): boolean => props.invalid === true);
 
 const current: ComputedRef<ReadonlyArray<CascadeNode>> = computed((): ReadonlyArray<CascadeNode> =>
@@ -95,7 +98,7 @@ const activeDescendant: ComputedRef<string | undefined> = computed((): string |
 );
 
 function openPanel(): void {
-  if (isDisabled.value) return;
+  if (isDisabled.value || isReadonly.value) return;
   // Re-open at the selected leaf's level for quick re-selection (matches the enhancer).
   const trail: CascadeNode[] | null = selectedTrail.value;
   stack.value = trail !== null && trail.length > 1 ? trail.slice(0, -1) : [];
@@ -190,6 +193,7 @@ onBeforeUnmount((): void => {
       :aria-label="ariaLabelledby === undefined ? name : undefined"
       :aria-labelledby="ariaLabelledby"
       :aria-invalid="isInvalid ? 'true' : undefined"
+      :aria-readonly="isReadonly ? 'true' : undefined"
       :aria-describedby="describedby"
       :disabled="isDisabled"
       @click="open ? closePanel(true) : openPanel()"

package/adapters/vue/components/FdyCfl.vue

@@ -32,6 +32,8 @@ const props = defineProps<{
   pageSize?: number;
   placeholder?: string;
   disabled?: boolean;
+  /** Locked/view mode: shows the picked value (focusable, copyable), but the search dialog can't be opened. Unlike `disabled`, it keeps tab order and isn't greyed. */
+  readonly?: boolean;
   invalid?: boolean;
   describedby?: string;
   id?: string;
@@ -64,6 +66,7 @@ const error: Ref<Error | null> = ref(null);
 const activeIndex: Ref<number> = ref(-1);
 
 const isDisabled: ComputedRef<boolean> = computed((): boolean => props.disabled === true);
+const isReadonly: ComputedRef<boolean> = computed((): boolean => props.readonly === true);
 const isInvalid: ComputedRef<boolean> = computed((): boolean => props.invalid === true);
 const displayValue: ComputedRef<string> = computed((): string =>
   props.modelValue !== null ? props.display(props.modelValue) : '',
@@ -194,7 +197,7 @@ function onKeydown(e: KeyboardEvent): void {
 
 // --- Open / close ---------------------------------------------------------
 function openDialog(): void {
-  if (isDisabled.value) return;
+  if (isDisabled.value || isReadonly.value) return;
   if (searchTimer !== null) {
     clearTimeout(searchTimer);
     searchTimer = null;
@@ -260,7 +263,7 @@ onBeforeUnmount((): void => {
       aria-haspopup="dialog"
       :aria-labelledby="ariaLabelledby"
       :aria-label="ariaLabelledby ? undefined : 'Buka pencarian'"
-      :disabled="isDisabled"
+      :disabled="isDisabled || isReadonly"
       @click="openDialog"
     >
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">

package/adapters/vue/components/FdyCombo.vue

@@ -22,6 +22,8 @@ const props = defineProps<{
   ariaLabelledby?: string;
   placeholder?: string;
   disabled?: boolean;
+  /** Locked/view mode: stays focusable and shows its value, but can't be opened or changed. Unlike `disabled`, it keeps tab order and isn't greyed. */
+  readonly?: boolean;
   invalid?: boolean;
   describedby?: string;
 }>();
@@ -57,6 +59,7 @@ const selectedLabel: ComputedRef<string> = computed((): string => {
 });
 const isPlaceholder: ComputedRef<boolean> = computed((): boolean => selectedIndex.value < 0);
 const isDisabled: ComputedRef<boolean> = computed((): boolean => props.disabled === true);
+const isReadonly: ComputedRef<boolean> = computed((): boolean => props.readonly === true);
 const isInvalid: ComputedRef<boolean> = computed((): boolean => props.invalid === true);
 const activeDescendant: ComputedRef<string | undefined> = computed((): string | undefined =>
   open.value && highlighted.value >= 0 ? optionId(highlighted.value) : undefined,
@@ -68,7 +71,7 @@ function setHighlight(index: number): void {
 }
 
 function openList(): void {
-  if (isDisabled.value || open.value) return;
+  if (isDisabled.value || isReadonly.value || open.value) return;
   open.value = true;
   setHighlight(selectedIndex.value >= 0 ? selectedIndex.value : 0);
 }
@@ -114,7 +117,7 @@ function typeahead(char: string): void {
 }
 
 function onKeydown(e: KeyboardEvent): void {
-  if (isDisabled.value) return;
+  if (isDisabled.value || isReadonly.value) return;
   switch (e.key) {
     case 'ArrowDown':
       e.preventDefault();
@@ -207,6 +210,7 @@ onBeforeUnmount((): void => {
       :aria-activedescendant="activeDescendant"
       :aria-labelledby="ariaLabelledby"
       :aria-invalid="isInvalid ? 'true' : undefined"
+      :aria-readonly="isReadonly ? 'true' : undefined"
       :aria-describedby="describedby"
       :disabled="isDisabled"
       @click="toggle"
@@ -214,6 +218,9 @@ onBeforeUnmount((): void => {
       <span class="fdy-combo__value" :class="{ 'fdy-combo__value--placeholder': isPlaceholder }">{{ selectedLabel }}</span>
     </button>
     <ul :id="listboxId" ref="listboxEl" class="fdy-combo__listbox" role="listbox" popover="manual" :hidden="!open">
+      <!-- @mousedown.prevent keeps focus on the button: the option <li> isn't focusable, so a plain
+           mousedown moves focus out of the combo, fires @focusout, and closes the list before the click
+           lands — mouse-select would silently do nothing. Same pattern as FdyDatepicker/FdyAutocomplete. -->
       <li
         v-for="(opt, i) in options"
         :id="optionId(i)"
@@ -222,6 +229,7 @@ onBeforeUnmount((): void => {
         :class="{ 'is-highlighted': i === highlighted }"
         role="option"
         :aria-selected="opt.value === modelValue"
+        @mousedown.prevent
         @click="choose(i)"
         @mousemove="setHighlight(i)"
       >

package/adapters/vue/components/FdyDateRange.vue

@@ -21,6 +21,8 @@ const props = defineProps<{
   max?: string;
   locale?: string;
   disabled?: boolean;
+  /** Locked/view mode for both pickers — focusable, values shown, but can't be opened or changed. */
+  readonly?: boolean;
   invalid?: boolean;
   describedby?: string;
   startPlaceholder?: string;
@@ -57,6 +59,7 @@ function setEnd(end: string): void {
       :max="startMax"
       :locale="locale"
       :disabled="disabled"
+      :readonly="readonly"
       :invalid="invalid"
       :describedby="describedby"
       :placeholder="startPlaceholder ?? 'Dari'"
@@ -69,6 +72,7 @@ function setEnd(end: string): void {
       :max="max"
       :locale="locale"
       :disabled="disabled"
+      :readonly="readonly"
       :invalid="invalid"
       :describedby="describedby"
       :placeholder="endPlaceholder ?? 'Sampai'"

package/adapters/vue/components/FdyDatepicker.vue

@@ -31,6 +31,8 @@ const props = defineProps<{
   locale?: string;
   placeholder?: string;
   disabled?: boolean;
+  /** Locked/view mode: stays focusable and shows its date, but can't be opened, cleared, or changed. Unlike `disabled`, it keeps tab order and isn't greyed. */
+  readonly?: boolean;
   invalid?: boolean;
   describedby?: string;
   id?: string;
@@ -105,10 +107,11 @@ const selectedDate: ComputedRef<Date | null> = computed((): Date | null => parse
 const minDate: ComputedRef<Date | null> = computed((): Date | null => parseISO(props.min));
 const maxDate: ComputedRef<Date | null> = computed((): Date | null => parseISO(props.max));
 const isDisabled: ComputedRef<boolean> = computed((): boolean => props.disabled === true);
+const isReadonly: ComputedRef<boolean> = computed((): boolean => props.readonly === true);
 const isInvalid: ComputedRef<boolean> = computed((): boolean => props.invalid === true);
 const displayPlaceholder: ComputedRef<string> = computed((): string => props.placeholder ?? 'Select date');
 const showClear: ComputedRef<boolean> = computed(
-  (): boolean => props.clearable === true && selectedDate.value !== null && isDisabled.value === false,
+  (): boolean => props.clearable === true && selectedDate.value !== null && isDisabled.value === false && isReadonly.value === false,
 );
 const prevMonthLabelText: ComputedRef<string> = computed((): string => props.prevMonthLabel ?? 'Previous month');
 const nextMonthLabelText: ComputedRef<string> = computed((): string => props.nextMonthLabel ?? 'Next month');
@@ -211,7 +214,7 @@ function clearValue(): void {
 }
 
 function openPanel(): void {
-  if (isDisabled.value || open.value) return;
+  if (isDisabled.value || isReadonly.value || open.value) return;
   focusDate.value = selectedDate.value ?? focusDate.value ?? new Date();
   view.value = new Date(focusDate.value.getFullYear(), focusDate.value.getMonth(), 1);
   open.value = true;
@@ -314,6 +317,7 @@ onBeforeUnmount((): void => {
       :aria-expanded="open"
       :aria-labelledby="ariaLabelledby"
       :aria-invalid="isInvalid ? 'true' : undefined"
+      :aria-readonly="isReadonly ? 'true' : undefined"
       :aria-describedby="describedby"
       :disabled="isDisabled"
       @click="toggle"

package/dist/freeday-datetime.js

@@ -9,6 +9,8 @@
  * Markup: <div data-fdy-datetimepicker>
  *   <div data-fdy-datepicker data-value="2026-07-21"></div>
  *   <div data-fdy-timepicker data-value="14:30"></div></div>
+ * State: add data-fdy-disabled or data-fdy-invalid on the wrapper to reflect it onto both
+ * child triggers as one control (read-only is adapter-only — a vanilla datetime is interactive).
  */
 (function () {
   'use strict';
@@ -22,6 +24,28 @@
     var tp = wrap.querySelector('[data-fdy-timepicker]');
     if (!dp || !tp) return;
 
+    // Reflect one wrapper-level state onto BOTH child triggers so a datetime reads as a single
+    // disabled/invalid control. Deferred with setTimeout(0) — NOT a microtask: the timepicker
+    // enhancer registers its DOMContentLoaded init AFTER this composer, and microtasks drain
+    // *between* listeners (so a microtask would run before the timepicker trigger exists). A
+    // macrotask waits until the whole init pass is done and both triggers are built. (readonly is
+    // intentionally not supported here: a vanilla datetime is interactive; adapters cover read-only.)
+    if (wrap.hasAttribute('data-fdy-disabled') || wrap.hasAttribute('data-fdy-invalid')) {
+      var applyState = function () {
+        var dpTrig = dp.querySelector('.fdy-datepicker__trigger');
+        var tpTrig = tp.querySelector('.fdy-timepicker__trigger');
+        if (wrap.hasAttribute('data-fdy-disabled')) {
+          if (dpTrig) dpTrig.disabled = true;
+          if (tpTrig) tpTrig.disabled = true;
+        }
+        if (wrap.hasAttribute('data-fdy-invalid')) {
+          if (dpTrig) dpTrig.setAttribute('aria-invalid', 'true');
+          if (tpTrig) tpTrig.setAttribute('aria-invalid', 'true');
+        }
+      };
+      setTimeout(applyState, 0);
+    }
+
     var date = dp.getAttribute('data-value') || '';
     var time = tp.getAttribute('data-value') || '';
 

package/dist/freeday.bundle.css

@@ -678,6 +678,9 @@ a { color: var(--color-primary); }
 .fdy-cascade__trigger:focus-visible{outline:none;border-color:var(--color-primary);box-shadow:inset 0 1px 2px rgba(16,14,30,.04),0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-cascade__trigger.is-open{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-cascade__trigger:disabled,.fdy-cascade__trigger[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
+.fdy-cascade__trigger[aria-readonly="true"]{background:var(--color-surface-2);border-color:var(--color-border);cursor:default;}
+.fdy-cascade__trigger[aria-readonly="true"]:hover{border-color:var(--color-border);}
+.fdy-cascade__trigger[aria-readonly="true"]:focus-visible{border-color:var(--color-border-strong);box-shadow:none;}
 .fdy-cascade--error .fdy-cascade__trigger,.fdy-cascade__trigger[aria-invalid="true"]{border-color:var(--color-danger);}
 .fdy-cascade--error .fdy-cascade__trigger:focus-visible,.fdy-cascade--error .fdy-cascade__trigger.is-open,.fdy-cascade__trigger[aria-invalid="true"]:focus-visible{border-color:var(--color-danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-danger) 26%,transparent);}
 .fdy-cascade__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@@ -814,6 +817,11 @@ a { color: var(--color-primary); }
 .fdy-combo__button:focus-visible{outline:none;border-color:var(--color-primary);box-shadow:inset 0 1px 2px rgba(16,14,30,.04),0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-combo__button.is-open{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-combo__button:disabled,.fdy-combo__button[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
+/* Read-only: stays focusable & shows its value at full contrast but can't open — muted surface,
+   softened border, default cursor, no focus-ring escalation (matches input[readonly], #39). */
+.fdy-combo__button[aria-readonly="true"]{background:var(--color-surface-2);border-color:var(--color-border);cursor:default;}
+.fdy-combo__button[aria-readonly="true"]:hover{border-color:var(--color-border);}
+.fdy-combo__button[aria-readonly="true"]:focus-visible{border-color:var(--color-border-strong);box-shadow:none;}
 .fdy-combo--error .fdy-combo__button,.fdy-combo__button[aria-invalid="true"]{border-color:var(--color-danger);}
 .fdy-combo--error .fdy-combo__button:focus-visible,.fdy-combo--error .fdy-combo__button.is-open,.fdy-combo__button[aria-invalid="true"]:focus-visible{border-color:var(--color-danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-danger) 26%,transparent);}
 .fdy-combo__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@@ -844,6 +852,10 @@ a { color: var(--color-primary); }
 .fdy-datepicker__trigger.is-open{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-datepicker--error .fdy-datepicker__trigger,.fdy-datepicker__trigger[aria-invalid="true"]{border-color:var(--color-danger);}
 .fdy-datepicker--error .fdy-datepicker__trigger:focus-visible,.fdy-datepicker--error .fdy-datepicker__trigger.is-open,.fdy-datepicker__trigger[aria-invalid="true"]:focus-visible{border-color:var(--color-danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-danger) 26%,transparent);}
+.fdy-datepicker__trigger:disabled,.fdy-datepicker__trigger[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
+.fdy-datepicker__trigger[aria-readonly="true"]{background:var(--color-surface-2);border-color:var(--color-border);cursor:default;}
+.fdy-datepicker__trigger[aria-readonly="true"]:hover{border-color:var(--color-border);}
+.fdy-datepicker__trigger[aria-readonly="true"]:focus-visible{border-color:var(--color-border-strong);box-shadow:none;}
 .fdy-datepicker__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .fdy-datepicker__value--placeholder{color:var(--color-text-subtle);}
 .fdy-datepicker__icon{flex:none;display:inline-flex;color:var(--color-text-subtle);}
@@ -943,6 +955,7 @@ a { color: var(--color-primary); }
 .fdy-dropzone:hover{border-color:var(--color-text-muted);}
 .fdy-dropzone:focus-visible{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-dropzone.is-dragover{border-color:var(--color-primary);background:var(--color-primary-soft);color:var(--color-primary-strong);}
+.fdy-dropzone[aria-disabled="true"],.fdy-dropzone.is-disabled{opacity:.55;cursor:not-allowed;pointer-events:none;}
 .fdy-dropzone__icon{color:var(--color-text-subtle);}
 .fdy-dropzone.is-dragover .fdy-dropzone__icon{color:var(--color-primary);}
 .fdy-dropzone__icon svg{display:block;width:2rem;height:2rem;}
@@ -1058,6 +1071,12 @@ fieldset.fdy-field>legend{padding:0;float:none;}
 .fdy-input:hover,.fdy-textarea:hover{border-color:var(--color-text-muted);}
 .fdy-input:focus,.fdy-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:inset 0 1px 2px rgba(16,14,30,.04),0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-input:disabled,.fdy-textarea:disabled,.fdy-input[aria-disabled="true"],.fdy-textarea[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
+/* Read-only (#39): the value is real and may be read/copied, only not edited. Full contrast (unlike
+   :disabled which dims to placeholder-grey), muted surface + softened border so it still reads as
+   inert, default cursor, no focus-ring escalation. */
+.fdy-input[readonly],.fdy-textarea[readonly]{background:var(--color-surface-2);border-color:var(--color-border);color:var(--color-text);cursor:default;}
+.fdy-input[readonly]:hover,.fdy-textarea[readonly]:hover{border-color:var(--color-border);}
+.fdy-input[readonly]:focus-visible,.fdy-textarea[readonly]:focus-visible{border-color:var(--color-border-strong);box-shadow:none;}
 .fdy-input--error,.fdy-input[aria-invalid="true"],.fdy-textarea[aria-invalid="true"]{border-color:var(--color-danger);}
 .fdy-input--error:focus,.fdy-input[aria-invalid="true"]:focus,.fdy-textarea[aria-invalid="true"]:focus{border-color:var(--color-danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-danger) 26%,transparent);}
 .fdy-help{font-size:var(--text-xs);color:var(--color-text-muted);}
@@ -1144,6 +1163,12 @@ fieldset.fdy-field>legend{padding:0;float:none;}
 .fdy-rating__star.is-filled svg{fill:var(--color-warning);stroke:var(--color-warning);}
 .fdy-rating__star input:focus-visible + svg{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-xs);}
 .fdy-rating--readonly .fdy-rating__star{cursor:default;}
+/* Disabled: not editable and greyed (readonly stays full-strength; disabled dims). */
+.fdy-rating--disabled .fdy-rating__star{cursor:not-allowed;}
+.fdy-rating--disabled .fdy-rating__star svg{opacity:.5;}
+/* Invalid: tint the (outline) empty stars danger so a required-but-empty rating reads as an error,
+   paired with a help/error message — never colour alone. */
+.fdy-rating--error .fdy-rating__star svg{stroke:var(--color-danger);}
 .fdy-rating--sm .fdy-rating__star svg{width:1.1rem;height:1.1rem;}
 
 /* Freeday — Selection controls */
@@ -1305,6 +1330,8 @@ fieldset.fdy-field>legend{padding:0;float:none;}
 .fdy-tabs__list{display:flex;gap:var(--space-1);border-bottom:var(--bw) solid var(--color-border);overflow-x:auto;}
 .fdy-tabs__tab{appearance:none;border:0;background:transparent;cursor:pointer;white-space:nowrap;font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted);padding:var(--space-3) var(--space-4);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
 .fdy-tabs__tab:hover{color:var(--color-text);}
+.fdy-tabs__tab:disabled,.fdy-tabs__tab[aria-disabled="true"]{opacity:.5;cursor:not-allowed;color:var(--color-text-muted);}
+.fdy-tabs__tab:disabled:hover,.fdy-tabs__tab[aria-disabled="true"]:hover{color:var(--color-text-muted);}
 .fdy-tabs__tab[aria-selected="true"]{color:var(--color-primary-strong);border-bottom-color:var(--color-primary);}
 .fdy-tabs__tab:focus-visible{outline:none;border-radius:var(--radius-sm);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-tabs__panel{padding:var(--space-5) 0;}
@@ -1335,6 +1362,7 @@ fieldset.fdy-field>legend{padding:0;float:none;}
 .fdy-timepicker__trigger.is-open{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-timepicker--error .fdy-timepicker__trigger,.fdy-timepicker__trigger[aria-invalid="true"]{border-color:var(--color-danger);}
 .fdy-timepicker--error .fdy-timepicker__trigger:focus-visible,.fdy-timepicker--error .fdy-timepicker__trigger.is-open,.fdy-timepicker__trigger[aria-invalid="true"]:focus-visible{border-color:var(--color-danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-danger) 26%,transparent);}
+.fdy-timepicker__trigger:disabled,.fdy-timepicker__trigger[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
 .fdy-timepicker__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums;}
 .fdy-timepicker__value--placeholder{color:var(--color-text-subtle);}
 .fdy-timepicker__icon{flex:none;display:inline-flex;color:var(--color-text-subtle);}
@@ -1387,6 +1415,8 @@ fieldset.fdy-field>legend{padding:0;float:none;}
 .fdy-tree__icon{flex:none;width:1rem;height:1rem;color:var(--color-text-muted);}
 .fdy-tree__leaf{padding-left:calc(var(--space-2) * 2 + .9rem);}
 .fdy-tree__leaf .fdy-tree__icon{color:var(--color-text-subtle);}
+/* Disabled row (branch summary or leaf): dimmed, no hover, not interactive. */
+.fdy-tree__leaf[aria-disabled="true"],.fdy-tree__branch[aria-disabled="true"] > summary{opacity:.5;cursor:not-allowed;pointer-events:none;}
 
 /* Checkbox variant — a selectable tree (cascading parent/child via freeday-tree.js).
  * A native <input class="fdy-checkbox"> sits at the start of every row; a partially

package/dist/freeday.css

@@ -333,6 +333,9 @@ a { color: var(--color-primary); }
 .fdy-cascade__trigger:focus-visible{outline:none;border-color:var(--color-primary);box-shadow:inset 0 1px 2px rgba(16,14,30,.04),0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-cascade__trigger.is-open{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-cascade__trigger:disabled,.fdy-cascade__trigger[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
+.fdy-cascade__trigger[aria-readonly="true"]{background:var(--color-surface-2);border-color:var(--color-border);cursor:default;}
+.fdy-cascade__trigger[aria-readonly="true"]:hover{border-color:var(--color-border);}
+.fdy-cascade__trigger[aria-readonly="true"]:focus-visible{border-color:var(--color-border-strong);box-shadow:none;}
 .fdy-cascade--error .fdy-cascade__trigger,.fdy-cascade__trigger[aria-invalid="true"]{border-color:var(--color-danger);}
 .fdy-cascade--error .fdy-cascade__trigger:focus-visible,.fdy-cascade--error .fdy-cascade__trigger.is-open,.fdy-cascade__trigger[aria-invalid="true"]:focus-visible{border-color:var(--color-danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-danger) 26%,transparent);}
 .fdy-cascade__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@@ -469,6 +472,11 @@ a { color: var(--color-primary); }
 .fdy-combo__button:focus-visible{outline:none;border-color:var(--color-primary);box-shadow:inset 0 1px 2px rgba(16,14,30,.04),0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-combo__button.is-open{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-combo__button:disabled,.fdy-combo__button[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
+/* Read-only: stays focusable & shows its value at full contrast but can't open — muted surface,
+   softened border, default cursor, no focus-ring escalation (matches input[readonly], #39). */
+.fdy-combo__button[aria-readonly="true"]{background:var(--color-surface-2);border-color:var(--color-border);cursor:default;}
+.fdy-combo__button[aria-readonly="true"]:hover{border-color:var(--color-border);}
+.fdy-combo__button[aria-readonly="true"]:focus-visible{border-color:var(--color-border-strong);box-shadow:none;}
 .fdy-combo--error .fdy-combo__button,.fdy-combo__button[aria-invalid="true"]{border-color:var(--color-danger);}
 .fdy-combo--error .fdy-combo__button:focus-visible,.fdy-combo--error .fdy-combo__button.is-open,.fdy-combo__button[aria-invalid="true"]:focus-visible{border-color:var(--color-danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-danger) 26%,transparent);}
 .fdy-combo__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@@ -499,6 +507,10 @@ a { color: var(--color-primary); }
 .fdy-datepicker__trigger.is-open{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-datepicker--error .fdy-datepicker__trigger,.fdy-datepicker__trigger[aria-invalid="true"]{border-color:var(--color-danger);}
 .fdy-datepicker--error .fdy-datepicker__trigger:focus-visible,.fdy-datepicker--error .fdy-datepicker__trigger.is-open,.fdy-datepicker__trigger[aria-invalid="true"]:focus-visible{border-color:var(--color-danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-danger) 26%,transparent);}
+.fdy-datepicker__trigger:disabled,.fdy-datepicker__trigger[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
+.fdy-datepicker__trigger[aria-readonly="true"]{background:var(--color-surface-2);border-color:var(--color-border);cursor:default;}
+.fdy-datepicker__trigger[aria-readonly="true"]:hover{border-color:var(--color-border);}
+.fdy-datepicker__trigger[aria-readonly="true"]:focus-visible{border-color:var(--color-border-strong);box-shadow:none;}
 .fdy-datepicker__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .fdy-datepicker__value--placeholder{color:var(--color-text-subtle);}
 .fdy-datepicker__icon{flex:none;display:inline-flex;color:var(--color-text-subtle);}
@@ -598,6 +610,7 @@ a { color: var(--color-primary); }
 .fdy-dropzone:hover{border-color:var(--color-text-muted);}
 .fdy-dropzone:focus-visible{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-dropzone.is-dragover{border-color:var(--color-primary);background:var(--color-primary-soft);color:var(--color-primary-strong);}
+.fdy-dropzone[aria-disabled="true"],.fdy-dropzone.is-disabled{opacity:.55;cursor:not-allowed;pointer-events:none;}
 .fdy-dropzone__icon{color:var(--color-text-subtle);}
 .fdy-dropzone.is-dragover .fdy-dropzone__icon{color:var(--color-primary);}
 .fdy-dropzone__icon svg{display:block;width:2rem;height:2rem;}
@@ -713,6 +726,12 @@ fieldset.fdy-field>legend{padding:0;float:none;}
 .fdy-input:hover,.fdy-textarea:hover{border-color:var(--color-text-muted);}
 .fdy-input:focus,.fdy-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:inset 0 1px 2px rgba(16,14,30,.04),0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-input:disabled,.fdy-textarea:disabled,.fdy-input[aria-disabled="true"],.fdy-textarea[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
+/* Read-only (#39): the value is real and may be read/copied, only not edited. Full contrast (unlike
+   :disabled which dims to placeholder-grey), muted surface + softened border so it still reads as
+   inert, default cursor, no focus-ring escalation. */
+.fdy-input[readonly],.fdy-textarea[readonly]{background:var(--color-surface-2);border-color:var(--color-border);color:var(--color-text);cursor:default;}
+.fdy-input[readonly]:hover,.fdy-textarea[readonly]:hover{border-color:var(--color-border);}
+.fdy-input[readonly]:focus-visible,.fdy-textarea[readonly]:focus-visible{border-color:var(--color-border-strong);box-shadow:none;}
 .fdy-input--error,.fdy-input[aria-invalid="true"],.fdy-textarea[aria-invalid="true"]{border-color:var(--color-danger);}
 .fdy-input--error:focus,.fdy-input[aria-invalid="true"]:focus,.fdy-textarea[aria-invalid="true"]:focus{border-color:var(--color-danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-danger) 26%,transparent);}
 .fdy-help{font-size:var(--text-xs);color:var(--color-text-muted);}
@@ -799,6 +818,12 @@ fieldset.fdy-field>legend{padding:0;float:none;}
 .fdy-rating__star.is-filled svg{fill:var(--color-warning);stroke:var(--color-warning);}
 .fdy-rating__star input:focus-visible + svg{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-xs);}
 .fdy-rating--readonly .fdy-rating__star{cursor:default;}
+/* Disabled: not editable and greyed (readonly stays full-strength; disabled dims). */
+.fdy-rating--disabled .fdy-rating__star{cursor:not-allowed;}
+.fdy-rating--disabled .fdy-rating__star svg{opacity:.5;}
+/* Invalid: tint the (outline) empty stars danger so a required-but-empty rating reads as an error,
+   paired with a help/error message — never colour alone. */
+.fdy-rating--error .fdy-rating__star svg{stroke:var(--color-danger);}
 .fdy-rating--sm .fdy-rating__star svg{width:1.1rem;height:1.1rem;}
 
 /* Freeday — Selection controls */
@@ -960,6 +985,8 @@ fieldset.fdy-field>legend{padding:0;float:none;}
 .fdy-tabs__list{display:flex;gap:var(--space-1);border-bottom:var(--bw) solid var(--color-border);overflow-x:auto;}
 .fdy-tabs__tab{appearance:none;border:0;background:transparent;cursor:pointer;white-space:nowrap;font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted);padding:var(--space-3) var(--space-4);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
 .fdy-tabs__tab:hover{color:var(--color-text);}
+.fdy-tabs__tab:disabled,.fdy-tabs__tab[aria-disabled="true"]{opacity:.5;cursor:not-allowed;color:var(--color-text-muted);}
+.fdy-tabs__tab:disabled:hover,.fdy-tabs__tab[aria-disabled="true"]:hover{color:var(--color-text-muted);}
 .fdy-tabs__tab[aria-selected="true"]{color:var(--color-primary-strong);border-bottom-color:var(--color-primary);}
 .fdy-tabs__tab:focus-visible{outline:none;border-radius:var(--radius-sm);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-tabs__panel{padding:var(--space-5) 0;}
@@ -990,6 +1017,7 @@ fieldset.fdy-field>legend{padding:0;float:none;}
 .fdy-timepicker__trigger.is-open{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-timepicker--error .fdy-timepicker__trigger,.fdy-timepicker__trigger[aria-invalid="true"]{border-color:var(--color-danger);}
 .fdy-timepicker--error .fdy-timepicker__trigger:focus-visible,.fdy-timepicker--error .fdy-timepicker__trigger.is-open,.fdy-timepicker__trigger[aria-invalid="true"]:focus-visible{border-color:var(--color-danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-danger) 26%,transparent);}
+.fdy-timepicker__trigger:disabled,.fdy-timepicker__trigger[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
 .fdy-timepicker__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums;}
 .fdy-timepicker__value--placeholder{color:var(--color-text-subtle);}
 .fdy-timepicker__icon{flex:none;display:inline-flex;color:var(--color-text-subtle);}
@@ -1042,6 +1070,8 @@ fieldset.fdy-field>legend{padding:0;float:none;}
 .fdy-tree__icon{flex:none;width:1rem;height:1rem;color:var(--color-text-muted);}
 .fdy-tree__leaf{padding-left:calc(var(--space-2) * 2 + .9rem);}
 .fdy-tree__leaf .fdy-tree__icon{color:var(--color-text-subtle);}
+/* Disabled row (branch summary or leaf): dimmed, no hover, not interactive. */
+.fdy-tree__leaf[aria-disabled="true"],.fdy-tree__branch[aria-disabled="true"] > summary{opacity:.5;cursor:not-allowed;pointer-events:none;}
 
 /* Checkbox variant — a selectable tree (cascading parent/child via freeday-tree.js).
  * A native <input class="fdy-checkbox"> sits at the start of every row; a partially

package/dist/freeday.js

@@ -1618,6 +1618,8 @@
  * Markup: <div data-fdy-datetimepicker>
  *   <div data-fdy-datepicker data-value="2026-07-21"></div>
  *   <div data-fdy-timepicker data-value="14:30"></div></div>
+ * State: add data-fdy-disabled or data-fdy-invalid on the wrapper to reflect it onto both
+ * child triggers as one control (read-only is adapter-only — a vanilla datetime is interactive).
  */
 (function () {
   'use strict';
@@ -1631,6 +1633,28 @@
     var tp = wrap.querySelector('[data-fdy-timepicker]');
     if (!dp || !tp) return;
 
+    // Reflect one wrapper-level state onto BOTH child triggers so a datetime reads as a single
+    // disabled/invalid control. Deferred with setTimeout(0) — NOT a microtask: the timepicker
+    // enhancer registers its DOMContentLoaded init AFTER this composer, and microtasks drain
+    // *between* listeners (so a microtask would run before the timepicker trigger exists). A
+    // macrotask waits until the whole init pass is done and both triggers are built. (readonly is
+    // intentionally not supported here: a vanilla datetime is interactive; adapters cover read-only.)
+    if (wrap.hasAttribute('data-fdy-disabled') || wrap.hasAttribute('data-fdy-invalid')) {
+      var applyState = function () {
+        var dpTrig = dp.querySelector('.fdy-datepicker__trigger');
+        var tpTrig = tp.querySelector('.fdy-timepicker__trigger');
+        if (wrap.hasAttribute('data-fdy-disabled')) {
+          if (dpTrig) dpTrig.disabled = true;
+          if (tpTrig) tpTrig.disabled = true;
+        }
+        if (wrap.hasAttribute('data-fdy-invalid')) {
+          if (dpTrig) dpTrig.setAttribute('aria-invalid', 'true');
+          if (tpTrig) tpTrig.setAttribute('aria-invalid', 'true');
+        }
+      };
+      setTimeout(applyState, 0);
+    }
+
     var date = dp.getAttribute('data-value') || '';
     var time = tp.getAttribute('data-value') || '';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cahyo-dimas/freeday",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "description": "Freeday — token-driven, framework-agnostic UI KIT (design source-of-truth).",
   "type": "module",
   "license": "MIT",

package/src/components/cascade.css

@@ -10,6 +10,9 @@
 .fdy-cascade__trigger:focus-visible{outline:none;border-color:var(--color-primary);box-shadow:inset 0 1px 2px rgba(16,14,30,.04),0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-cascade__trigger.is-open{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-cascade__trigger:disabled,.fdy-cascade__trigger[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
+.fdy-cascade__trigger[aria-readonly="true"]{background:var(--color-surface-2);border-color:var(--color-border);cursor:default;}
+.fdy-cascade__trigger[aria-readonly="true"]:hover{border-color:var(--color-border);}
+.fdy-cascade__trigger[aria-readonly="true"]:focus-visible{border-color:var(--color-border-strong);box-shadow:none;}
 .fdy-cascade--error .fdy-cascade__trigger,.fdy-cascade__trigger[aria-invalid="true"]{border-color:var(--color-danger);}
 .fdy-cascade--error .fdy-cascade__trigger:focus-visible,.fdy-cascade--error .fdy-cascade__trigger.is-open,.fdy-cascade__trigger[aria-invalid="true"]:focus-visible{border-color:var(--color-danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-danger) 26%,transparent);}
 .fdy-cascade__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

package/src/components/combo.css

@@ -5,6 +5,11 @@
 .fdy-combo__button:focus-visible{outline:none;border-color:var(--color-primary);box-shadow:inset 0 1px 2px rgba(16,14,30,.04),0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-combo__button.is-open{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-combo__button:disabled,.fdy-combo__button[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
+/* Read-only: stays focusable & shows its value at full contrast but can't open — muted surface,
+   softened border, default cursor, no focus-ring escalation (matches input[readonly], #39). */
+.fdy-combo__button[aria-readonly="true"]{background:var(--color-surface-2);border-color:var(--color-border);cursor:default;}
+.fdy-combo__button[aria-readonly="true"]:hover{border-color:var(--color-border);}
+.fdy-combo__button[aria-readonly="true"]:focus-visible{border-color:var(--color-border-strong);box-shadow:none;}
 .fdy-combo--error .fdy-combo__button,.fdy-combo__button[aria-invalid="true"]{border-color:var(--color-danger);}
 .fdy-combo--error .fdy-combo__button:focus-visible,.fdy-combo--error .fdy-combo__button.is-open,.fdy-combo__button[aria-invalid="true"]:focus-visible{border-color:var(--color-danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-danger) 26%,transparent);}
 .fdy-combo__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

package/src/components/datepicker.css

@@ -7,6 +7,10 @@
 .fdy-datepicker__trigger.is-open{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-datepicker--error .fdy-datepicker__trigger,.fdy-datepicker__trigger[aria-invalid="true"]{border-color:var(--color-danger);}
 .fdy-datepicker--error .fdy-datepicker__trigger:focus-visible,.fdy-datepicker--error .fdy-datepicker__trigger.is-open,.fdy-datepicker__trigger[aria-invalid="true"]:focus-visible{border-color:var(--color-danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-danger) 26%,transparent);}
+.fdy-datepicker__trigger:disabled,.fdy-datepicker__trigger[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
+.fdy-datepicker__trigger[aria-readonly="true"]{background:var(--color-surface-2);border-color:var(--color-border);cursor:default;}
+.fdy-datepicker__trigger[aria-readonly="true"]:hover{border-color:var(--color-border);}
+.fdy-datepicker__trigger[aria-readonly="true"]:focus-visible{border-color:var(--color-border-strong);box-shadow:none;}
 .fdy-datepicker__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .fdy-datepicker__value--placeholder{color:var(--color-text-subtle);}
 .fdy-datepicker__icon{flex:none;display:inline-flex;color:var(--color-text-subtle);}

package/src/components/file-upload.css

@@ -4,6 +4,7 @@
 .fdy-dropzone:hover{border-color:var(--color-text-muted);}
 .fdy-dropzone:focus-visible{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-dropzone.is-dragover{border-color:var(--color-primary);background:var(--color-primary-soft);color:var(--color-primary-strong);}
+.fdy-dropzone[aria-disabled="true"],.fdy-dropzone.is-disabled{opacity:.55;cursor:not-allowed;pointer-events:none;}
 .fdy-dropzone__icon{color:var(--color-text-subtle);}
 .fdy-dropzone.is-dragover .fdy-dropzone__icon{color:var(--color-primary);}
 .fdy-dropzone__icon svg{display:block;width:2rem;height:2rem;}

package/src/components/input.css

@@ -12,6 +12,12 @@ fieldset.fdy-field>legend{padding:0;float:none;}
 .fdy-input:hover,.fdy-textarea:hover{border-color:var(--color-text-muted);}
 .fdy-input:focus,.fdy-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:inset 0 1px 2px rgba(16,14,30,.04),0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-input:disabled,.fdy-textarea:disabled,.fdy-input[aria-disabled="true"],.fdy-textarea[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
+/* Read-only (#39): the value is real and may be read/copied, only not edited. Full contrast (unlike
+   :disabled which dims to placeholder-grey), muted surface + softened border so it still reads as
+   inert, default cursor, no focus-ring escalation. */
+.fdy-input[readonly],.fdy-textarea[readonly]{background:var(--color-surface-2);border-color:var(--color-border);color:var(--color-text);cursor:default;}
+.fdy-input[readonly]:hover,.fdy-textarea[readonly]:hover{border-color:var(--color-border);}
+.fdy-input[readonly]:focus-visible,.fdy-textarea[readonly]:focus-visible{border-color:var(--color-border-strong);box-shadow:none;}
 .fdy-input--error,.fdy-input[aria-invalid="true"],.fdy-textarea[aria-invalid="true"]{border-color:var(--color-danger);}
 .fdy-input--error:focus,.fdy-input[aria-invalid="true"]:focus,.fdy-textarea[aria-invalid="true"]:focus{border-color:var(--color-danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-danger) 26%,transparent);}
 .fdy-help{font-size:var(--text-xs);color:var(--color-text-muted);}

package/src/components/rating.css

@@ -7,4 +7,10 @@
 .fdy-rating__star.is-filled svg{fill:var(--color-warning);stroke:var(--color-warning);}
 .fdy-rating__star input:focus-visible + svg{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-xs);}
 .fdy-rating--readonly .fdy-rating__star{cursor:default;}
+/* Disabled: not editable and greyed (readonly stays full-strength; disabled dims). */
+.fdy-rating--disabled .fdy-rating__star{cursor:not-allowed;}
+.fdy-rating--disabled .fdy-rating__star svg{opacity:.5;}
+/* Invalid: tint the (outline) empty stars danger so a required-but-empty rating reads as an error,
+   paired with a help/error message — never colour alone. */
+.fdy-rating--error .fdy-rating__star svg{stroke:var(--color-danger);}
 .fdy-rating--sm .fdy-rating__star svg{width:1.1rem;height:1.1rem;}

package/src/components/tabs.css

@@ -2,6 +2,8 @@
 .fdy-tabs__list{display:flex;gap:var(--space-1);border-bottom:var(--bw) solid var(--color-border);overflow-x:auto;}
 .fdy-tabs__tab{appearance:none;border:0;background:transparent;cursor:pointer;white-space:nowrap;font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted);padding:var(--space-3) var(--space-4);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
 .fdy-tabs__tab:hover{color:var(--color-text);}
+.fdy-tabs__tab:disabled,.fdy-tabs__tab[aria-disabled="true"]{opacity:.5;cursor:not-allowed;color:var(--color-text-muted);}
+.fdy-tabs__tab:disabled:hover,.fdy-tabs__tab[aria-disabled="true"]:hover{color:var(--color-text-muted);}
 .fdy-tabs__tab[aria-selected="true"]{color:var(--color-primary-strong);border-bottom-color:var(--color-primary);}
 .fdy-tabs__tab:focus-visible{outline:none;border-radius:var(--radius-sm);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-tabs__panel{padding:var(--space-5) 0;}

package/src/components/timepicker.css

@@ -8,6 +8,7 @@
 .fdy-timepicker__trigger.is-open{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-timepicker--error .fdy-timepicker__trigger,.fdy-timepicker__trigger[aria-invalid="true"]{border-color:var(--color-danger);}
 .fdy-timepicker--error .fdy-timepicker__trigger:focus-visible,.fdy-timepicker--error .fdy-timepicker__trigger.is-open,.fdy-timepicker__trigger[aria-invalid="true"]:focus-visible{border-color:var(--color-danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-danger) 26%,transparent);}
+.fdy-timepicker__trigger:disabled,.fdy-timepicker__trigger[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
 .fdy-timepicker__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums;}
 .fdy-timepicker__value--placeholder{color:var(--color-text-subtle);}
 .fdy-timepicker__icon{flex:none;display:inline-flex;color:var(--color-text-subtle);}

package/src/components/tree.css

@@ -12,6 +12,8 @@
 .fdy-tree__icon{flex:none;width:1rem;height:1rem;color:var(--color-text-muted);}
 .fdy-tree__leaf{padding-left:calc(var(--space-2) * 2 + .9rem);}
 .fdy-tree__leaf .fdy-tree__icon{color:var(--color-text-subtle);}
+/* Disabled row (branch summary or leaf): dimmed, no hover, not interactive. */
+.fdy-tree__leaf[aria-disabled="true"],.fdy-tree__branch[aria-disabled="true"] > summary{opacity:.5;cursor:not-allowed;pointer-events:none;}
 
 /* Checkbox variant — a selectable tree (cascading parent/child via freeday-tree.js).
  * A native <input class="fdy-checkbox"> sits at the start of every row; a partially

package/src/freeday-datetime.js

@@ -9,6 +9,8 @@
  * Markup: <div data-fdy-datetimepicker>
  *   <div data-fdy-datepicker data-value="2026-07-21"></div>
  *   <div data-fdy-timepicker data-value="14:30"></div></div>
+ * State: add data-fdy-disabled or data-fdy-invalid on the wrapper to reflect it onto both
+ * child triggers as one control (read-only is adapter-only — a vanilla datetime is interactive).
  */
 (function () {
   'use strict';
@@ -22,6 +24,28 @@
     var tp = wrap.querySelector('[data-fdy-timepicker]');
     if (!dp || !tp) return;
 
+    // Reflect one wrapper-level state onto BOTH child triggers so a datetime reads as a single
+    // disabled/invalid control. Deferred with setTimeout(0) — NOT a microtask: the timepicker
+    // enhancer registers its DOMContentLoaded init AFTER this composer, and microtasks drain
+    // *between* listeners (so a microtask would run before the timepicker trigger exists). A
+    // macrotask waits until the whole init pass is done and both triggers are built. (readonly is
+    // intentionally not supported here: a vanilla datetime is interactive; adapters cover read-only.)
+    if (wrap.hasAttribute('data-fdy-disabled') || wrap.hasAttribute('data-fdy-invalid')) {
+      var applyState = function () {
+        var dpTrig = dp.querySelector('.fdy-datepicker__trigger');
+        var tpTrig = tp.querySelector('.fdy-timepicker__trigger');
+        if (wrap.hasAttribute('data-fdy-disabled')) {
+          if (dpTrig) dpTrig.disabled = true;
+          if (tpTrig) tpTrig.disabled = true;
+        }
+        if (wrap.hasAttribute('data-fdy-invalid')) {
+          if (dpTrig) dpTrig.setAttribute('aria-invalid', 'true');
+          if (tpTrig) tpTrig.setAttribute('aria-invalid', 'true');
+        }
+      };
+      setTimeout(applyState, 0);
+    }
+
     var date = dp.getAttribute('data-value') || '';
     var time = tp.getAttribute('data-value') || '';