# `lr-native-time-input` - **Import** `import '@aceshooting/lyra-ui/components/lr-native-time-input.js';` (stable tag alias; registers the tag) - **Class** `LyraNativeTimeInput`, also available unregistered from `@aceshooting/lyra-ui/components/forms/input/native-time-input.class.js` - **Family** `components/forms/` — see `llms/index.md` for its siblings - **Status** `stable` since `8.0.0` — see the maturity and deprecation policy in `llms/shared.md` - **Release history** [CHANGELOG.md](../../CHANGELOG.md); family-wide breaking-change summaries: [llms-full.txt](../../llms-full.txt) - **Deprecations** none - **Optional peers** none - **Themeable via** 18 parts, 22 custom properties — see this component's own `@csspart`/`@cssprop` list below - **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md` --- ## `lr-native-time-input` The Lyra 7 browser-native time field preserved under an explicit tag. It extends `lr-input`, forces its internal native input to `type="time"` on construction and reconnect, and retypes `min`/`max` so time-shaped attributes such as `09:00:30` are forwarded verbatim instead of parsed as numbers. Use it when the browser/OS picker is preferred; new `wa-time-input` migrations should use the segmented `lr-time-input` above. `stepUp()` and `stepDown()` use the current `value`, `step`, `min`, and `max` properties in the same synchronous call, including changes made immediately beforehand. They preserve native step alignment and bounds, update form submission silently, and remain no-ops before the native input has rendered or while disabled/readonly. Native `step="any"` remains a non-steppable no-op. Changing own `disabled` from true to false in the same task that disables an ancestor fieldset keeps the native editing control effectively disabled. The enabled first-legend exception and explicit own-disabled state retain their native meaning; validity and form submission follow the effective disabled state. **Inherits:** all public surface from `lr-input`. All `lr-input` properties, form methods, events, label/hint/error/start/end slots, parts, and theme properties apply. `step` is native seconds; `showPicker()`, `stepUp()`, and `stepDown()` keep their native-wrapper behavior. The control row carries `base input-wrapper time-input` part tokens on one node. Its native picker UI and AM/PM presentation are browser-owned and intentionally unstyled. The inherited `--lr-input-*` theme inputs therefore remain configurable from an ancestor theme wrapper without being shadowed by the subclass. Among those inherited properties and methods: `defaultValue: string = ''` (attribute `value`, reflected) is the reset value, and `customError: string | null = null` (attribute `custom-error`, reflected) is a consumer-supplied validation message. `getForm()` returns the browser-resolved form owner, including an external owner selected by `form`; `setCustomValidity(message)` sets or clears `customError` without discarding intrinsic validity; `resetValidity()` clears only that consumer layer and recomputes the current intrinsic constraints, leaving `value`/`defaultValue` and prior interaction state unchanged. **Events:** native-style `input` and `change`; bubbling, composed `focus` and `blur` bridges; the `lr-input` / `lr-change` aliases with `{ value }`; `lr-clear` after the inherited clear action; and `lr-invalid` when a validity check fails. It also inherits `lr-input-settled` (`detail: { value }`, non-cancelable), which fires once `debounce` ms after the last keystroke when `debounce` is set; see `lr-input`'s own `debounce` entry for the flush and cancellation rules. **CSS parts:** all inherited `lr-input` parts, plus `time-input` on the same control-row node as `base` and `input-wrapper`. ```html ``` ---