@cruglobal/cornerstone-components 0.1.0

package/dist/bundled/skills/cornerstone/references/components/textarea.md

@@ -0,0 +1,241 @@
+# Textarea
+
+**Full documentation:** https://cruglobal.github.io/cornerstone-design-system/components/textarea
+
+```html
+<cs-textarea label="Feedback"></cs-textarea>
+```
+
+> **Info**
+>
+> This component works with standard `<form>` elements. See [form controls](https://cruglobal.github.io/cornerstone-design-system/form-controls) for form submission and client-side validation.
+
+## Examples
+
+### Label
+
+Use the `label` attribute to give the textarea an accessible label. For labels that contain HTML, use the `label` slot instead.
+
+```html
+<cs-textarea label="Comments"></cs-textarea>
+```
+
+### Hint
+
+Add a descriptive hint to a textarea with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead.
+
+```html
+<cs-textarea label="Feedback" hint="Please tell us what you think."></cs-textarea>
+```
+
+### Placeholder
+
+Use the `placeholder` attribute to add a placeholder.
+
+```html
+<cs-textarea label="Comments" placeholder="Share your thoughts"></cs-textarea>
+```
+
+### Appearance
+
+Use the `appearance` attribute to change the textarea's visual appearance.
+
+```html
+<div class="cs-stack">
+  <cs-textarea appearance="outlined" placeholder="outlined"></cs-textarea>
+  <cs-textarea appearance="filled" placeholder="filled"></cs-textarea>
+  <cs-textarea appearance="filled-outlined" placeholder="filled-outlined"></cs-textarea>
+</div>
+```
+
+### Disabled
+
+Use the `disabled` attribute to disable a textarea.
+
+```html
+<cs-textarea placeholder="Disabled" disabled></cs-textarea>
+```
+
+### Readonly
+
+Use the `readonly` attribute to keep a value visible but uneditable. Unlike `disabled`, a readonly textarea stays focusable and its value is still submitted with the form.
+
+```html
+<cs-textarea label="Release notes" value="Fixed a handful of bugs and polished the edges." readonly></cs-textarea>
+```
+
+### Size
+
+Use the `size` attribute to change a textarea's size.
+
+```html
+<div class="cs-stack">
+  <cs-textarea size="xs" placeholder="Extra small"></cs-textarea>
+  <cs-textarea size="s" placeholder="Small"></cs-textarea>
+  <cs-textarea size="m" placeholder="Medium"></cs-textarea>
+  <cs-textarea size="l" placeholder="Large"></cs-textarea>
+  <cs-textarea size="xl" placeholder="Extra large"></cs-textarea>
+</div>
+```
+
+### Rows
+
+Use the `rows` attribute to change the number of text rows that show by default.
+
+```html
+<cs-textarea rows="2"></cs-textarea>
+```
+
+### Resize
+
+Use the `resize` attribute to control how the user can resize the textarea.
+
+| Mode                 | Behavior                                   | Best for                             |
+| -------------------- | ------------------------------------------ | ------------------------------------ |
+| `vertical` (default) | Drag the bottom edge to change the height  | Most multi-line fields               |
+| `none`               | Resizing is disabled                       | Fixed layouts where height must hold |
+| `horizontal`         | Drag the side edge to change the width     | Adjusting line length                |
+| `both`               | Drag the corner to change width and height | Free-form editing                    |
+| `auto`               | Grows to fit its content as the user types | Inputs whose length varies a lot     |
+
+The default, `vertical`, lets the user drag the bottom edge to resize the field.
+
+```html
+<cs-textarea label="Feedback" resize="vertical"></cs-textarea>
+```
+
+Set `resize` to `auto` and the textarea grows to fit its content as the user types.
+
+```html
+<cs-textarea label="Comments" resize="auto"></cs-textarea>
+```
+
+### Character Count
+
+Add the `with-count` attribute to show a character count below the textarea. When combined with `maxlength`, the count shows remaining characters instead.
+
+```html
+<div class="cs-stack">
+  <cs-textarea label="Comments" hint="Share your thoughts with us" with-count></cs-textarea>
+  <cs-textarea label="Bio" hint="Tell us a little about yourself" with-count maxlength="100"></cs-textarea>
+</div>
+```
+
+> **Info**
+>
+> <strong>The character count is announced to screen readers.</strong><br />
+> It's exposed through a live region so assistive technologies announce updates as the user types.
+
+### Initial Value
+
+Use the `value` attribute to set an initial value.
+
+```html
+<cs-textarea value="Write something awesome!"></cs-textarea>
+```
+
+## API
+
+### Importing
+
+If you're using the autoloader or a hosted project, components load on demand — no manual import
+needed. To cherry-pick this component, use one of the following snippets.
+
+**npm**
+
+```js
+import '@cruglobal/cornerstone-components/components/textarea/textarea.js';
+```
+
+**Self-Hosted**
+
+```js
+import './cornerstone/components/textarea/textarea.js';
+```
+
+**React**
+
+```js
+import CsTextarea from '@cruglobal/cornerstone-components/react/textarea/index.js';
+```
+
+### Slots
+
+Valid slot names for this component (use exactly these — any other `slot` value is silently ignored and the element falls back to the default slot):
+
+- `hint` — Text that describes how to use the input. Alternatively, you can use the `hint` attribute.
+- `label` — The textarea's label. Alternatively, you can use the `label` attribute.
+
+### Attributes & Properties
+
+| Property | Attribute | Description | Type | Default | Reflects |
+| --- | --- | --- | --- | --- | --- |
+| `appearance` | `appearance` | The textarea's visual appearance. | `'filled' \| 'outlined' \| 'filled-outlined'` | `'outlined'` | Yes |
+| `autocapitalize` | `autocapitalize` | Controls whether and how text input is automatically capitalized as it is entered by the user. | `'off' \| 'none' \| 'on' \| 'sentences' \| 'words' \| 'characters'` | — | — |
+| `autocomplete` | `autocomplete` | Specifies what permission the browser has to provide assistance in filling out form field values. Refer to [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values. | `string` | — | — |
+| `autocorrect` | `autocorrect` | Indicates whether the browser's autocorrect feature is on or off. When set as an attribute, use `"off"` or `"on"`. When set as a property, use `true` or `false`. | `boolean` | — | — |
+| `autofocus` | `autofocus` | Indicates that the input should receive focus on page load. | `boolean` | — | — |
+| `defaultValue` | `value` | The default value of the form control. Primarily used for resetting the form control. | `string` | — | Yes |
+| `disabled` | `disabled` | Disables the textarea. | `boolean` | `false` | — |
+| `enterkeyhint` | `enterkeyhint` | Used to customize the label or icon of the Enter key on virtual keyboards. | `'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send'` | — | — |
+| `form` | — | By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work. | `HTMLFormElement \| null` | — | — |
+| `hint` | `hint` | The textarea's hint. If you need to display HTML, use the `hint` slot instead. | `string` | `''` | — |
+| `inputmode` | `inputmode` | Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual keyboard on supportive devices. | `'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url'` | — | — |
+| `label` | `label` | The textarea's label. If you need to display HTML, use the `label` slot instead. | `string` | `''` | — |
+| `maxlength` | `maxlength` | The maximum length of input that will be considered valid. | `number` | — | — |
+| `minlength` | `minlength` | The minimum length of input that will be considered valid. | `number` | — | — |
+| `name` | `name` | The name of the textarea, submitted as a name/value pair with form data. | `string \| null` | `null` | Yes |
+| `placeholder` | `placeholder` | Placeholder text to show as a hint when the input is empty. | `string` | `''` | — |
+| `readonly` | `readonly` | Makes the textarea readonly. | `boolean` | `false` | Yes |
+| `required` | `required` | Makes the textarea a required field. | `boolean` | `false` | Yes |
+| `resize` | `resize` | Controls how the textarea can be resized. | `'none' \| 'vertical' \| 'horizontal' \| 'both' \| 'auto'` | `'vertical'` | Yes |
+| `rows` | `rows` | The number of rows to display by default. | `number` | `4` | — |
+| `size` | `size` | The textarea's size. | `'xs' \| 's' \| 'm' \| 'l' \| 'xl'` | `'m'` | Yes |
+| `spellcheck` | `spellcheck` | Enables spell checking on the textarea. | `boolean` | `true` | — |
+| `ssrHint` | `ssr-hint` | Only required for SSR. Set to `true` if you're slotting in a `hint` element so the server-rendered markup includes the hint before the component hydrates on the client. | `boolean` | `false` | — |
+| `ssrLabel` | `ssr-label` | Only required for SSR. Set to `true` if you're slotting in a `label` element so the server-rendered markup includes the label before the component hydrates on the client. | `boolean` | `false` | — |
+| `validationTarget` | — | Override this to change where constraint validation popups are anchored. | `undefined \| HTMLElement` | — | — |
+| `validators` | — | Validators are static because they have `observedAttributes`, essentially attributes to "watch" for changes. Whenever these attributes change, we want to be notified and update the validator. | `Validator[]` | `[]` | — |
+| `value` | — | The current value of the input, submitted as a name/value pair with form data. | — | — | — |
+| `withCount` | `with-count` | Shows a character count below the textarea. When `maxlength` is set, shows remaining characters instead. | `boolean` | `false` | Yes |
+
+### Methods
+
+| Name | Description | Arguments |
+| --- | --- | --- |
+| `blur()` | Removes focus from the textarea. | — |
+| `focus()` | Sets focus on the textarea. | `options: FocusOptions` |
+| `formStateRestoreCallback()` | Called when the browser is trying to restore element’s state to state in which case reason is "restore", or when the browser is trying to fulfill autofill on behalf of user in which case reason is "autocomplete". In the case of "restore", state is a string, File, or FormData object previously set as the second argument to setFormValue. | `state: string \| File \| FormData \| null, reason: 'autocomplete' \| 'restore'` |
+| `resetValidity()` | Reset validity is a way of removing manual custom errors and native validation. | — |
+| `scrollPosition()` | Gets or sets the textarea's scroll position. | `position: { top?: number; left?: number }` |
+| `select()` | Selects all the text in the textarea. | — |
+| `setCustomValidity()` | Do not use this when creating a "Validator". This is intended for end users of components. We track manually defined custom errors so we don't clear them on accident in our validators. | `message: string` |
+| `setRangeText()` | Replaces a range of text with a new string. | `replacement: string, start: number, end: number, selectMode: 'select' \| 'start' \| 'end' \| 'preserve'` |
+| `setSelectionRange()` | Sets the start and end positions of the text selection (0-based). | `selectionStart: number, selectionEnd: number, selectionDirection: 'forward' \| 'backward' \| 'none'` |
+
+### Events
+
+| Name | Description |
+| --- | --- |
+| `blur` | Emitted when the control loses focus. |
+| `change` | Emitted when an alteration to the control's value is committed by the user. |
+| `cs-invalid` | Emitted when the form control has been checked for validity and its constraints aren't satisfied. |
+| `focus` | Emitted when the control gains focus. |
+| `input` | Emitted when the control receives input. |
+
+### Custom States
+
+| Name | Description | CSS selector |
+| --- | --- | --- |
+| `blank` | The textarea is empty. | `:state(blank)` |
+
+### CSS Parts
+
+| Name | Description | CSS selector |
+| --- | --- | --- |
+| `count` | The character count element, rendered when the `with-count` attribute is present. | `::part(count)` |
+| `form-control-label` | The label. | `::part(form-control-label)` |
+| `hint` | The hint's wrapper. | `::part(hint)` |
+| `textarea` | The internal `<textarea>` control. | `::part(textarea)` |
+| `textarea-adjuster` | The invisible sizer that grows the control to fit its content when `resize` is `auto`. | `::part(textarea-adjuster)` |
+| `textarea-wrapper` | The component's outer wrapper. | `::part(textarea-wrapper)` |

package/dist/bundled/skills/cornerstone/references/components/time-input.md

@@ -0,0 +1,366 @@
+# Time Input
+
+**Full documentation:** https://cruglobal.github.io/cornerstone-design-system/components/time-input
+
+Time Input is the time-of-day counterpart to [Date Input](https://cruglobal.github.io/cornerstone-design-system/components/date-input). It renders a segmented input with hour, minute, optional seconds, and optional AM/PM spinbutton segments in the user's locale order, alongside a popup column picker modeled on Chrome's native time UI.
+
+Type digits to fill the focused segment (focus auto-advances when a segment can accept no further digit), use the arrow keys to step through values, and press `Alt+Down Arrow` to open the popup. The entire segmented input is one tab stop.
+
+```html
+<cs-time-input label="Pick a time"></cs-time-input>
+```
+
+```html
+<cs-time-input label="Meeting time" hint="Choose a time that works for you." value="14:30">
+  <cs-icon slot="start" name="schedule"></cs-icon>
+</cs-time-input>
+```
+
+## Form Submission
+
+The hidden form value is canonical 24-hour time, regardless of the user's locale or `hour-format`:
+
+| Input                        | Form value | Notes                                                           |
+| ---------------------------- | ---------- | --------------------------------------------------------------- |
+| Whole-minute steps (default) | `HH:mm`    | `step="60"` or any multiple; e.g. `14:30`                       |
+| Sub-minute steps             | `HH:mm:ss` | When `step` < 60 and the seconds segment shows; e.g. `14:30:15` |
+| 12-hour UI                   | 24-hour    | `2:30 PM` submits as `14:30`                                    |
+| Partial input                | _(empty)_  | Until every required segment is filled                          |
+
+The example below renders a working form. Submit it (or change the time) and watch the console. The time input submits its value just like a native `<input type="time">`, regardless of how the user typed or what locale they used.
+
+```html
+<form id="tp-form-demo">
+  <cs-time-input name="meeting_time" label="Meeting time" required value="14:30"></cs-time-input>
+  <br />
+  <cs-button type="submit" appearance="filled" variant="neutral">Submit</cs-button>
+</form>
+<pre id="tp-form-demo-output"></pre>
+<style>
+  #tp-form-demo-output {
+    margin-block-start: var(--cs-space-m);
+    margin-block-end: 0;
+    padding: var(--cs-space-s);
+    background: var(--cs-color-surface-lowered);
+    border-radius: var(--cs-border-radius-m);
+    font-size: 0.875em;
+  }
+
+  #tp-form-demo-output:empty {
+    display: none;
+  }
+</style>
+
+<script>
+  const form = document.getElementById('tp-form-demo');
+  const output = document.getElementById('tp-form-demo-output');
+
+  form.addEventListener('submit', event => {
+    event.preventDefault();
+    const data = new FormData(form);
+    const entries = Object.fromEntries(data.entries());
+    const formatted = JSON.stringify(entries, null, 2);
+    console.log('Submitted FormData:', entries);
+    output.textContent = 'Submitted FormData:\n' + formatted;
+  });
+</script>
+```
+
+## Examples
+
+### Initial Value
+
+Set the `value` attribute to a time string to pre-populate the input.
+
+```html
+<cs-time-input label="Meeting time" value="14:30"></cs-time-input>
+```
+
+### Label
+
+Use the `label` attribute to give the time input an accessible label. For labels that contain HTML, use the `label` slot instead.
+
+```html
+<cs-time-input label="What time works for you?"></cs-time-input>
+```
+
+### Hint
+
+Add descriptive hint to a time input with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead.
+
+```html
+<cs-time-input label="Wake up" hint="Set the time your alarm should go off."></cs-time-input>
+```
+
+### Start & End Decorations
+
+Use the `start` and `end` slots to add presentational elements like `<cs-icon>` inside the input.
+
+```html
+<div class="cs-stack">
+  <cs-time-input label="Start">
+    <cs-icon name="hourglass_top" slot="start"></cs-icon>
+  </cs-time-input>
+  <cs-time-input label="End">
+    <cs-icon name="hourglass_bottom" slot="end"></cs-icon>
+  </cs-time-input>
+</div>
+```
+
+### Clearable
+
+Add the `with-clear` attribute to let users wipe their selection in a single click. The clear button only appears once a value is set.
+
+```html
+<cs-time-input label="Alarm" with-clear value="07:00"></cs-time-input>
+```
+
+### Min & Max
+
+Constrain the selectable range. The picker delegates reversed-range (overnight) semantics to the native `<input type="time">`, so `min="22:00" max="06:00"` represents an overnight range.
+
+```html
+<cs-time-input label="Office hours" min="09:00" max="17:00"></cs-time-input>
+```
+
+### Step
+
+The `step` attribute is in **seconds**, matching the HTML spec. The default is `60` (one minute). Set `step` below `60` to expose a seconds segment; set it to a multiple of `60` to populate the minute column at that stride.
+
+```html
+<div class="cs-stack">
+  <cs-time-input label="Every 5 minutes" step="300"></cs-time-input>
+  <cs-time-input label="With seconds" step="1"></cs-time-input>
+</div>
+```
+
+### 12-Hour vs 24-Hour
+
+By default, `hour-format="auto"` follows the resolved locale. Pass `hour-format="12"` or `hour-format="24"` to override.
+
+```html
+<div class="cs-stack">
+  <cs-time-input label="12-hour" hour-format="12" value="09:00"></cs-time-input>
+  <cs-time-input label="24-hour" hour-format="24" value="09:00"></cs-time-input>
+</div>
+```
+
+### Localized
+
+The segment order, separators, and AM/PM strings all derive from the page's locale. Set the `lang` attribute on the host (or an ancestor) to change locales.
+
+```html
+<div class="cs-stack">
+  <cs-time-input lang="en-US" label="English (US)" value="14:30"></cs-time-input>
+  <cs-time-input lang="en-GB" label="English (UK)" value="14:30"></cs-time-input>
+  <cs-time-input lang="de-DE" label="German" value="14:30"></cs-time-input>
+</div>
+```
+
+### "Now" Button
+
+Add a quick-pick "Now" button in the popup footer with `with-now`.
+
+```html
+<cs-time-input label="When?" with-now></cs-time-input>
+```
+
+### Size
+
+Use the `size` attribute to match the time input to surrounding form controls.
+
+```html
+<div class="cs-stack">
+  <cs-time-input size="xs" label="Extra small"></cs-time-input>
+  <cs-time-input size="s" label="Small"></cs-time-input>
+  <cs-time-input size="m" label="Medium"></cs-time-input>
+  <cs-time-input size="l" label="Large"></cs-time-input>
+  <cs-time-input size="xl" label="Extra large"></cs-time-input>
+</div>
+```
+
+### Appearance
+
+Use the `appearance` attribute to switch between the default outlined input, a filled background, or a filled input with an outlined border.
+
+```html
+<div class="cs-stack">
+  <cs-time-input appearance="outlined" label="Outlined"></cs-time-input>
+  <cs-time-input appearance="filled" label="Filled"></cs-time-input>
+  <cs-time-input appearance="filled-outlined" label="Filled outlined"></cs-time-input>
+</div>
+```
+
+### Pill
+
+Use the `pill` attribute to give the input fully rounded edges.
+
+```html
+<cs-time-input pill label="Pill"></cs-time-input>
+```
+
+### Disabled
+
+Use the `disabled` attribute to disable the time input entirely. Disabled time inputs don't accept input, are skipped during tabbing, and don't submit a value with the form.
+
+```html
+<cs-time-input label="Disabled" value="09:00" disabled></cs-time-input>
+```
+
+### Readonly
+
+Use the `readonly` attribute to make the time input non-editable while still allowing it to be focused and to submit its value with the form. The popup still opens for browsing.
+
+```html
+<cs-time-input label="Read-only" value="09:00" readonly></cs-time-input>
+```
+
+## API
+
+### Importing
+
+If you're using the autoloader or a hosted project, components load on demand — no manual import
+needed. To cherry-pick this component, use one of the following snippets.
+
+**npm**
+
+```js
+import '@cruglobal/cornerstone-components/components/time-input/time-input.js';
+```
+
+**Self-Hosted**
+
+```js
+import './cornerstone/components/time-input/time-input.js';
+```
+
+**React**
+
+```js
+import CsTimeInput from '@cruglobal/cornerstone-components/react/time-input/index.js';
+```
+
+### Slots
+
+Valid slot names for this component (use exactly these — any other `slot` value is silently ignored and the element falls back to the default slot):
+
+- `clear-icon` — An icon to use in lieu of the default clear icon.
+- `end` — An element placed at the end of the input.
+- `expand-icon` — The icon to show on the popup toggle button. Defaults to a clock icon.
+- `footer` — Content shown below the column picker in the popup. Replaces the default Now button when present.
+- `hint` — Text that describes how to use the time picker. Alternatively, use the `hint` attribute.
+- `label` — The time picker's label. Alternatively, use the `label` attribute.
+- `start` — An element placed at the start of the input.
+
+### Attributes & Properties
+
+| Property | Attribute | Description | Type | Default | Reflects |
+| --- | --- | --- | --- | --- | --- |
+| `appearance` | `appearance` | The time picker's visual appearance. | `'filled' \| 'outlined' \| 'filled-outlined'` | `'outlined'` | Yes |
+| `assumeInteractionOn` | — | Every segment edit dispatches `input`, so a single observed `input` event marks the field as interacted with. | `string[]` | `['input']` | — |
+| `autocomplete` | `autocomplete` | Forwarded to the hidden form input to enable browser autofill (`on`/`off`/custom tokens). | `string` | `''` | — |
+| `defaultValue` | `value` | The default value of the form control. Used for form reset. | `string` | — | Yes |
+| `disabled` | `disabled` | Disables the time picker. | `boolean` | `false` | — |
+| `distance` | `distance` | Distance in pixels between the popup and the input. | `number` | `0` | Yes |
+| `form` | — | By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work. | `HTMLFormElement \| null` | — | — |
+| `hint` | `hint` | The time picker's hint. If you need to display HTML, use the `hint` slot instead. | `string` | `''` | — |
+| `hourFormat` | `hour-format` | Whether the UI uses a 12-hour or 24-hour clock. `auto` follows the resolved locale. | `CsTimeInputHourFormat` | `'auto'` | Yes |
+| `label` | `label` | The time picker's label. If you need to display HTML, use the `label` slot instead. | `string` | `''` | — |
+| `max` | `max` | The latest selectable time in wire format. | `string` | `''` | Yes |
+| `min` | `min` | The earliest selectable time in wire format. May be later than `max` to represent an overnight range. The picker delegates reversed-range semantics to the mirrored native `<input type="time">`. | `string` | `''` | Yes |
+| `name` | `name` | The time picker's name, submitted as a name/value pair with form data. | `string \| null` | `''` | Yes |
+| `open` | `open` | Whether the popup is open. | `boolean` | `false` | Yes |
+| `pill` | `pill` | Draws a pill-style time picker with rounded edges. | `boolean` | `false` | Yes |
+| `placement` | `placement` | Preferred popup placement. | `CsTimeInputPlacement` | `'bottom-start'` | Yes |
+| `readonly` | `readonly` | Makes the input non-editable. The popup still opens for browsing. | `boolean` | `false` | Yes |
+| `required` | `required` | Makes the time picker required for form submission. | `boolean` | `false` | Yes |
+| `size` | `size` | The time picker's size. | `CsTimeInputSize` | `'m'` | Yes |
+| `ssrFooter` | `ssr-footer` | Only required for SSR. Set to `true` if you're slotting in a `footer` element. | `boolean` | `false` | — |
+| `ssrHint` | `ssr-hint` | Only required for SSR. Set to `true` if you're slotting in a `hint` element. | `boolean` | `false` | — |
+| `ssrLabel` | `ssr-label` | Only required for SSR. Set to `true` if you're slotting in a `label` element. | `boolean` | `false` | — |
+| `step` | `step` | The granularity, in seconds, matching HTML `<input type="time">`. Default `60` hides the seconds segment. Values below 60 reveal the seconds segment. `'any'` disables `stepMismatch` enforcement. | `number \| 'any'` | `60` | — |
+| `validationTarget` | — | Override this to change where constraint validation popups are anchored. | `undefined \| HTMLElement` | — | — |
+| `validators` | — | Validators are static because they have `observedAttributes`, essentially attributes to "watch" for changes. Whenever these attributes change, we want to be notified and update the validator. | `Validator[]` | `[]` | — |
+| `value` | — | The time picker's value as a wire-format string matching HTML `<input type="time">`: `HH:mm`, `HH:mm:ss`, or `HH:mm:ss.sss` (always 24-hour). The setter also accepts a `Date` (extracts local h/m/s) or `null`. | `string` | — | — |
+| `valueAsDate` | — | The time as a `Date` (today + wire value), or `null` when empty. | `Date \| null` | — | — |
+| `valueAsNumber` | — | Milliseconds since midnight, or `NaN` when empty. | `number` | — | — |
+| `withClear` | `with-clear` | Shows a clear button when the time picker has a value. | `boolean` | `false` | — |
+| `withNow` | `with-now` | Renders a "Now" button in the popup footer. | `boolean` | `false` | — |
+
+### Methods
+
+| Name | Description | Arguments |
+| --- | --- | --- |
+| `blur()` | Removes focus from the time picker. | — |
+| `focus()` | Sets focus on the first empty (else first) segment. | `options: FocusOptions` |
+| `formStateRestoreCallback()` | Called when the browser is trying to restore element’s state to state in which case reason is "restore", or when the browser is trying to fulfill autofill on behalf of user in which case reason is "autocomplete". In the case of "restore", state is a string, File, or FormData object previously set as the second argument to setFormValue. | `state: string \| File \| FormData \| null` |
+| `hide()` | Closes the popup. | — |
+| `resetValidity()` | Reset validity is a way of removing manual custom errors and native validation. | — |
+| `setCustomValidity()` | Do not use this when creating a "Validator". This is intended for end users of components. We track manually defined custom errors so we don't clear them on accident in our validators. | `message: string` |
+| `show()` | Opens the popup. | — |
+
+### Events
+
+| Name | Description |
+| --- | --- |
+| `blur` | Emitted when the control loses focus. |
+| `change` | Emitted when the committed value changes. |
+| `cs-after-hide` | Emitted after the popup closes and animations complete. |
+| `cs-after-show` | Emitted after the popup opens and animations complete. |
+| `cs-clear` | Emitted when the clear button is activated. |
+| `cs-hide` | Emitted when the popup is about to close. Cancelable. |
+| `cs-invalid` | Emitted when the form control has been checked for validity and its constraints aren't satisfied. |
+| `cs-show` | Emitted when the popup is about to open. Cancelable. |
+| `focus` | Emitted when the control receives focus. |
+| `input` | Emitted as the user types into a segment or interacts with the popup columns. |
+
+### CSS Custom Properties
+
+| Name | Description | Default |
+| --- | --- | --- |
+| `--column-item-height` | Height of each option inside a popup column. | `2.25em` |
+| `--column-width` | Width of each popup column. | `3em` |
+| `--hide-duration` | The duration of the hide animation. | `var(--cs-transition-fast)` |
+| `--show-duration` | The duration of the show animation. | `var(--cs-transition-fast)` |
+
+### Custom States
+
+| Name | Description | CSS selector |
+| --- | --- | --- |
+| `blank` | The time picker has no committed value. | `:state(blank)` |
+| `disabled` | The time picker is disabled. | `:state(disabled)` |
+| `open` | The popup is open. | `:state(open)` |
+
+### CSS Parts
+
+| Name | Description | CSS selector |
+| --- | --- | --- |
+| `clear-button` | The clear button. | `::part(clear-button)` |
+| `column` | Each column listbox. | `::part(column)` |
+| `column-day-period` | The AM/PM column listbox. | `::part(column-day-period)` |
+| `column-hour` | The hour column listbox. | `::part(column-hour)` |
+| `column-item` | Each option inside a column. | `::part(column-item)` |
+| `column-item-selected` | The currently selected option inside a column. | `::part(column-item-selected)` |
+| `column-minute` | The minute column listbox. | `::part(column-minute)` |
+| `column-second` | The second column listbox. | `::part(column-second)` |
+| `columns` | The row of column listboxes inside the popup. | `::part(columns)` |
+| `end` | The container that wraps the `end` slot. | `::part(end)` |
+| `expand-button` | The popup toggle button. | `::part(expand-button)` |
+| `expand-icon` | The expand icon wrapper. | `::part(expand-icon)` |
+| `form-control` | The form control that wraps the label, input, and hint. | `::part(form-control)` |
+| `form-control-input` | The input's wrapper. | `::part(form-control-input)` |
+| `form-control-label` | The label. | `::part(form-control-label)` |
+| `hint` | The hint's wrapper. | `::part(hint)` |
+| `input` | The segmented input group. | `::part(input)` |
+| `input-wrapper` | The container around the start slot, segmented input, clear button, and expand button. | `::part(input-wrapper)` |
+| `now-button` | The default "Now" button rendered in the popup footer when `with-now` is set. | `::part(now-button)` |
+| `popup` | The popup container. | `::part(popup)` |
+| `segment` | Each editable segment (hour/minute/second/AM-PM spinbutton). Use `[part~="segment"]` to style all. | `::part(segment)` |
+| `segment-literal` | Inert literal text between segments (separators). | `::part(segment-literal)` |
+| `start` | The container that wraps the `start` slot. | `::part(start)` |
+| `time-input` | The component's outer wrapper. | `::part(time-input)` |
+
+### Dependencies
+
+- `<cs-icon>`
+- `<cs-popup>`