@cruglobal/cornerstone-components 0.1.0

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

@@ -0,0 +1,452 @@
+# Dropdown
+
+**Full documentation:** https://cruglobal.github.io/cornerstone-design-system/components/dropdown
+
+```html
+<cs-dropdown>
+  <cs-button appearance="filled" slot="trigger" with-caret>Options</cs-button>
+
+  <cs-dropdown-item value="edit">Edit</cs-dropdown-item>
+  <cs-dropdown-item value="duplicate">Duplicate</cs-dropdown-item>
+  <cs-dropdown-item value="delete">Delete</cs-dropdown-item>
+</cs-dropdown>
+```
+
+A dropdown pairs a trigger with a panel: activating the trigger opens the panel, and interacting outside it closes the panel. Most dropdowns hold [dropdown items](https://cruglobal.github.io/cornerstone-design-system/components/dropdown-item), but the API also gives you direct control over showing, hiding, and positioning the panel for lower-level uses.
+
+## Examples
+
+### Showing Icons
+
+Use the `icon` slot to add an icon before a [dropdown item's](https://cruglobal.github.io/cornerstone-design-system/components/dropdown-item) label. This works best with [icon](https://cruglobal.github.io/cornerstone-design-system/components/icon) elements.
+
+```html
+<cs-dropdown>
+  <cs-button appearance="filled" slot="trigger" with-caret>Edit</cs-button>
+
+  <cs-dropdown-item value="cut">
+    <cs-icon slot="icon" name="content_cut"></cs-icon>
+    Cut
+  </cs-dropdown-item>
+
+  <cs-dropdown-item value="copy">
+    <cs-icon slot="icon" name="content_copy"></cs-icon>
+    Copy
+  </cs-dropdown-item>
+
+  <cs-dropdown-item value="paste">
+    <cs-icon slot="icon" name="content_paste"></cs-icon>
+    Paste
+  </cs-dropdown-item>
+
+  <cs-dropdown-item value="delete" variant="danger">
+    <cs-icon slot="icon" name="delete"></cs-icon>
+    Delete
+  </cs-dropdown-item>
+</cs-dropdown>
+```
+
+### Showing Labels & Dividers
+
+Use any heading (`<h1>`–`<h6>`) to label a group of items, and the [`<cs-divider>`](https://cruglobal.github.io/cornerstone-design-system/components/divider) element to separate them.
+
+```html
+<cs-dropdown>
+  <cs-button appearance="filled" slot="trigger" with-caret>Device</cs-button>
+
+  <h3>Type</h3>
+  <cs-dropdown-item value="phone">Phone</cs-dropdown-item>
+  <cs-dropdown-item value="tablet">Tablet</cs-dropdown-item>
+  <cs-dropdown-item value="desktop">Desktop</cs-dropdown-item>
+
+  <cs-divider></cs-divider>
+
+  <cs-dropdown-item value="more">More options…</cs-dropdown-item>
+</cs-dropdown>
+```
+
+### Showing Details
+
+Use the `details` slot to show secondary content after the label, such as a keyboard shortcut.
+
+```html
+<cs-dropdown>
+  <cs-button appearance="filled" slot="trigger" with-caret>Message</cs-button>
+
+  <cs-dropdown-item value="reply">
+    Reply
+    <span slot="details">⌘R</span>
+  </cs-dropdown-item>
+
+  <cs-dropdown-item value="forward">
+    Forward
+    <span slot="details">⌘F</span>
+  </cs-dropdown-item>
+
+  <cs-dropdown-item value="move">
+    Move
+    <span slot="details">⌘M</span>
+  </cs-dropdown-item>
+
+  <cs-divider></cs-divider>
+
+  <cs-dropdown-item value="archive">
+    Archive
+    <span slot="details">⌘A</span>
+  </cs-dropdown-item>
+
+  <cs-dropdown-item value="delete" variant="danger">
+    Delete
+    <span slot="details">Del</span>
+  </cs-dropdown-item>
+</cs-dropdown>
+```
+
+### Checkable Items
+
+Set `type="checkbox"` to turn a [dropdown item](https://cruglobal.github.io/cornerstone-design-system/components/dropdown-item) into a toggle, and add `checked` to start it on. Selecting a checkable item flips its `checked` state and closes the dropdown; cancel the `cs-select` event to keep it open instead.
+
+```html
+<div class="dropdown-checkboxes">
+  <cs-dropdown>
+    <cs-button appearance="filled" slot="trigger" with-caret>View</cs-button>
+
+    <cs-dropdown-item type="checkbox" value="canvas" checked>Show canvas</cs-dropdown-item>
+    <cs-dropdown-item type="checkbox" value="grid" checked>Show grid</cs-dropdown-item>
+    <cs-dropdown-item type="checkbox" value="source">Show source</cs-dropdown-item>
+
+    <cs-divider></cs-divider>
+
+    <cs-dropdown-item value="preferences">Preferences…</cs-dropdown-item>
+  </cs-dropdown>
+</div>
+
+<script type="module">
+  const container = document.querySelector('.dropdown-checkboxes');
+  const dropdown = container.querySelector('cs-dropdown');
+
+  dropdown.addEventListener('cs-select', event => {
+    if (event.detail.item.type === 'checkbox') {
+      console.log(event.detail.item.value, event.detail.item.checked ? 'checked' : 'unchecked');
+    } else {
+      console.log(event.detail.item.value);
+    }
+  });
+</script>
+```
+
+> **Info**
+>
+> When any item is checkable, every item in the dropdown gains matching padding so labels stay aligned.
+
+### Destructive Items
+
+Set `variant="danger"` on a [dropdown item](https://cruglobal.github.io/cornerstone-design-system/components/dropdown-item) to flag a destructive action like deleting.
+
+```html
+<cs-dropdown>
+  <cs-button appearance="filled" slot="trigger" with-caret>Project</cs-button>
+
+  <cs-dropdown-item value="share">
+    <cs-icon slot="icon" name="share"></cs-icon>
+    Share
+  </cs-dropdown-item>
+
+  <cs-dropdown-item value="preferences">
+    <cs-icon slot="icon" name="settings"></cs-icon>
+    Preferences
+  </cs-dropdown-item>
+
+  <cs-divider></cs-divider>
+
+  <h3>Danger zone</h3>
+
+  <cs-dropdown-item value="archive">
+    <cs-icon slot="icon" name="archive"></cs-icon>
+    Archive
+  </cs-dropdown-item>
+
+  <cs-dropdown-item value="delete" variant="danger">
+    <cs-icon slot="icon" name="delete"></cs-icon>
+    Delete
+  </cs-dropdown-item>
+</cs-dropdown>
+```
+
+### Submenus
+
+To nest a menu, place [dropdown items](https://cruglobal.github.io/cornerstone-design-system/components/dropdown-item) inside another item with `slot="submenu"`. Add [dividers](https://cruglobal.github.io/cornerstone-design-system/components/divider) between groups as needed.
+
+```html
+<div class="dropdown-submenus">
+  <cs-dropdown>
+    <cs-button appearance="filled" slot="trigger" with-caret>File</cs-button>
+
+    <cs-dropdown-item value="new">New</cs-dropdown-item>
+    <cs-dropdown-item value="open">Open</cs-dropdown-item>
+
+    <cs-divider></cs-divider>
+
+    <cs-dropdown-item>
+      Export
+      <cs-dropdown-item slot="submenu" value="pdf">PDF</cs-dropdown-item>
+      <cs-dropdown-item slot="submenu" value="docx">Word document</cs-dropdown-item>
+      <cs-dropdown-item slot="submenu" value="xlsx">Excel spreadsheet</cs-dropdown-item>
+      <cs-dropdown-item slot="submenu" value="csv">CSV</cs-dropdown-item>
+    </cs-dropdown-item>
+
+    <cs-dropdown-item>
+      Options
+      <cs-dropdown-item slot="submenu" type="checkbox" value="compress">Compress files</cs-dropdown-item>
+      <cs-dropdown-item slot="submenu" type="checkbox" checked value="metadata">Include metadata</cs-dropdown-item>
+      <cs-dropdown-item slot="submenu" type="checkbox" value="password">Password protect</cs-dropdown-item>
+    </cs-dropdown-item>
+  </cs-dropdown>
+</div>
+
+<script type="module">
+  const container = document.querySelector('.dropdown-submenus');
+  const dropdown = container.querySelector('cs-dropdown');
+
+  dropdown.addEventListener('cs-select', event => {
+    console.log(event.detail.item.value);
+  });
+</script>
+```
+
+> **Info**
+>
+> An item that opens a submenu won't emit `cs-select` itself. Items inside the submenu do, unless they open a submenu of their own.
+
+> **Warning**
+>
+> <strong>Avoid nesting more than one level of submenu.</strong><br />
+> Deeply nested menus are hard to navigate, especially with a pointer. Flatten the structure or move secondary choices into a separate view when you can.
+
+### Disabled
+
+Add `disabled` to any [dropdown item](https://cruglobal.github.io/cornerstone-design-system/components/dropdown-item) to make it unselectable.
+
+```html
+<cs-dropdown>
+  <cs-button appearance="filled" slot="trigger" with-caret>Payment method</cs-button>
+
+  <cs-dropdown-item value="cash">Cash</cs-dropdown-item>
+  <cs-dropdown-item value="check" disabled>Personal check</cs-dropdown-item>
+  <cs-dropdown-item value="credit">Credit card</cs-dropdown-item>
+  <cs-dropdown-item value="gift-card">Gift card</cs-dropdown-item>
+</cs-dropdown>
+```
+
+### Placement
+
+Set the `placement` attribute to control where the panel opens relative to the trigger. The panel shifts to a more optimal spot when the preferred placement doesn't have room.
+
+| Placement                                                                                | Opens                                                  |
+| ---------------------------------------------------------------------------------------- | ------------------------------------------------------ |
+| `bottom-start` <cs-badge appearance="outlined" variant="neutral" pill>default</cs-badge> | Below the trigger, aligned to its start edge           |
+| `bottom`, `bottom-end`                                                                   | Below the trigger, centered or aligned to the end edge |
+| `top`, `top-start`, `top-end`                                                            | Above the trigger                                      |
+| `right`, `right-start`, `right-end`                                                      | To the right of the trigger                            |
+| `left`, `left-start`, `left-end`                                                         | To the left of the trigger                             |
+
+```html
+<cs-dropdown placement="right-start">
+  <cs-button appearance="filled" slot="trigger">
+    File formats
+    <cs-icon slot="end" name="keyboard_arrow_right"></cs-icon>
+  </cs-button>
+
+  <cs-dropdown-item value="pdf">PDF document</cs-dropdown-item>
+  <cs-dropdown-item value="docx">Word document</cs-dropdown-item>
+  <cs-dropdown-item value="xlsx">Excel spreadsheet</cs-dropdown-item>
+  <cs-dropdown-item value="pptx">PowerPoint presentation</cs-dropdown-item>
+  <cs-dropdown-item value="txt">Plain text</cs-dropdown-item>
+  <cs-dropdown-item value="json">JSON file</cs-dropdown-item>
+</cs-dropdown>
+```
+
+### Distance
+
+Set the `distance` attribute to change the gap between the panel and the trigger, in pixels.
+
+```html
+<cs-dropdown distance="30">
+  <cs-button appearance="filled" slot="trigger" with-caret>Edit</cs-button>
+
+  <cs-dropdown-item>Cut</cs-dropdown-item>
+  <cs-dropdown-item>Copy</cs-dropdown-item>
+  <cs-dropdown-item>Paste</cs-dropdown-item>
+
+  <cs-divider></cs-divider>
+
+  <cs-dropdown-item>Find</cs-dropdown-item>
+  <cs-dropdown-item>Replace</cs-dropdown-item>
+</cs-dropdown>
+```
+
+### Offset
+
+Set the `skidding` attribute to slide the panel along the trigger, in pixels.
+
+```html
+<cs-dropdown skidding="30">
+  <cs-button appearance="filled" slot="trigger" with-caret>Edit</cs-button>
+
+  <cs-dropdown-item>Cut</cs-dropdown-item>
+  <cs-dropdown-item>Copy</cs-dropdown-item>
+  <cs-dropdown-item>Paste</cs-dropdown-item>
+
+  <cs-divider></cs-divider>
+
+  <cs-dropdown-item>Find</cs-dropdown-item>
+  <cs-dropdown-item>Replace</cs-dropdown-item>
+</cs-dropdown>
+```
+
+### Reacting to Selections
+
+When an item is selected, the dropdown emits the `cs-select` event. Inspect `event.detail.item` for the selected [dropdown item](https://cruglobal.github.io/cornerstone-design-system/components/dropdown-item); if you set a `value` on each item, read it from `event.detail.item.value`.
+
+```html
+<div class="dropdown-zoom-demo">
+  <div class="dropdown-zoom-stage">
+    <div class="dropdown-zoom-content">
+      <cs-icon name="image"></cs-icon>
+      <span class="dropdown-zoom-level">100%</span>
+    </div>
+  </div>
+
+  <cs-dropdown>
+    <cs-button appearance="filled" slot="trigger" with-caret>View</cs-button>
+    <cs-dropdown-item value="zoom-in">Zoom in</cs-dropdown-item>
+    <cs-dropdown-item value="zoom-out">Zoom out</cs-dropdown-item>
+    <cs-divider></cs-divider>
+    <cs-dropdown-item value="actual">Actual size</cs-dropdown-item>
+  </cs-dropdown>
+</div>
+
+<script type="module">
+  const demo = document.querySelector('.dropdown-zoom-demo');
+  const content = demo.querySelector('.dropdown-zoom-content');
+  const level = demo.querySelector('.dropdown-zoom-level');
+  const dropdown = demo.querySelector('cs-dropdown');
+  let zoom = 1;
+
+  dropdown.addEventListener('cs-select', event => {
+    const action = event.detail.item.value;
+
+    if (action === 'zoom-in') zoom = Math.min(zoom + 0.25, 2);
+    if (action === 'zoom-out') zoom = Math.max(zoom - 0.25, 0.5);
+    if (action === 'actual') zoom = 1;
+
+    content.style.transform = `scale(${zoom})`;
+    level.textContent = `${Math.round(zoom * 100)}%`;
+  });
+</script>
+
+<style>
+  .dropdown-zoom-demo .dropdown-zoom-stage {
+    display: grid;
+    place-items: center;
+    height: 12rem;
+    margin-block-end: var(--cs-space-m);
+    overflow: hidden;
+    border-radius: var(--cs-border-radius-l);
+    background-color: color-mix(in srgb, var(--cs-color-brand-fill-loud) 8%, transparent);
+  }
+
+  .dropdown-zoom-demo .dropdown-zoom-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--cs-space-2xs);
+    transition: transform 150ms ease;
+  }
+
+  .dropdown-zoom-demo .dropdown-zoom-content cs-icon {
+    font-size: 3rem;
+    color: var(--cs-color-brand-fill-loud);
+  }
+
+  .dropdown-zoom-demo .dropdown-zoom-level {
+    font-size: var(--cs-font-size-s);
+    font-variant-numeric: tabular-nums;
+  }
+</style>
+```
+
+> **Info**
+>
+> To keep the dropdown open after a selection, call `event.preventDefault()` in the `cs-select` handler.
+
+## 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/dropdown/dropdown.js';
+```
+
+**Self-Hosted**
+
+```js
+import './cornerstone/components/dropdown/dropdown.js';
+```
+
+**React**
+
+```js
+import CsDropdown from '@cruglobal/cornerstone-components/react/dropdown/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):
+
+- `(default)` — The dropdown's items, typically `<cs-dropdown-item>` elements.
+- `trigger` — The element that triggers the dropdown, such as a `<cs-button>` or `<button>`.
+
+### Attributes & Properties
+
+| Property | Attribute | Description | Type | Default | Reflects |
+| --- | --- | --- | --- | --- | --- |
+| `distance` | `distance` | The distance of the dropdown menu from its trigger. | `number` | `0` | — |
+| `open` | `open` | Opens or closes the dropdown. | `boolean` | `false` | Yes |
+| `placement` | `placement` | The placement of the dropdown menu in reference to the trigger. The menu will shift to a more optimal location if the preferred placement doesn't have enough room. | `'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'right' \| 'right-start' \| 'right-end' \| 'left' \| 'left-start' \| 'left-end'` | `'bottom-start'` | Yes |
+| `size` | `size` | The dropdown's size. | `'xs' \| 's' \| 'm' \| 'l' \| 'xl'` | `'m'` | Yes |
+| `skidding` | `skidding` | The offset of the dropdown menu along its trigger. | `number` | `0` | — |
+
+### Events
+
+| Name | Description |
+| --- | --- |
+| `cs-after-hide` | Emitted after the dropdown has been hidden. |
+| `cs-after-show` | Emitted after the dropdown has been shown. |
+| `cs-hide` | Emitted when the dropdown is about to hide. |
+| `cs-select` | Emitted when an item in the dropdown is selected. |
+| `cs-show` | Emitted when the dropdown is about to show. |
+
+### CSS Custom Properties
+
+| Name | Description | Default |
+| --- | --- | --- |
+| `--hide-duration` | The duration of the hide animation. | — |
+| `--show-duration` | The duration of the show animation. | — |
+
+### CSS Parts
+
+| Name | Description | CSS selector |
+| --- | --- | --- |
+| `menu` | The dropdown menu container. | `::part(menu)` |
+
+### Dependencies
+
+- `<cs-dropdown-item>`
+- `<cs-icon>`
+- `<cs-popup>`

package/dist/bundled/skills/cornerstone/references/components/format-bytes.md

@@ -0,0 +1,89 @@
+# Format Bytes
+
+**Full documentation:** https://cruglobal.github.io/cornerstone-design-system/components/format-bytes
+
+```html
+<div class="format-bytes-overview">
+  The file is <cs-format-bytes value="1000"></cs-format-bytes> in size.
+
+  <cs-divider></cs-divider>
+
+  <cs-input type="number" value="1000" label="Number to Format" style="max-width: 180px;"></cs-input>
+</div>
+
+<script>
+  const container = document.querySelector('.format-bytes-overview');
+  const formatter = container.querySelector('cs-format-bytes');
+  const input = container.querySelector('cs-input');
+
+  input.addEventListener('input', () => (formatter.value = input.value || 0));
+</script>
+```
+
+## Examples
+
+### Bytes
+
+Set the `value` attribute to a number to get the value in bytes.
+
+```html
+<cs-format-bytes value="12"></cs-format-bytes><br />
+<cs-format-bytes value="1200"></cs-format-bytes><br />
+<cs-format-bytes value="1200000"></cs-format-bytes><br />
+<cs-format-bytes value="1200000000"></cs-format-bytes>
+```
+
+### Bits
+
+To get the value in bits, set the `unit` attribute to `bit`.
+
+```html
+<cs-format-bytes value="12" unit="bit"></cs-format-bytes><br />
+<cs-format-bytes value="1200" unit="bit"></cs-format-bytes><br />
+<cs-format-bytes value="1200000" unit="bit"></cs-format-bytes><br />
+<cs-format-bytes value="1200000000" unit="bit"></cs-format-bytes>
+```
+
+### Localization
+
+Use the `lang` attribute to set the number formatting locale.
+
+```html
+<cs-format-bytes value="12" lang="de"></cs-format-bytes><br />
+<cs-format-bytes value="1200" lang="de"></cs-format-bytes><br />
+<cs-format-bytes value="1200000" lang="de"></cs-format-bytes><br />
+<cs-format-bytes value="1200000000" lang="de"></cs-format-bytes>
+```
+
+## 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/format-bytes/format-bytes.js';
+```
+
+**Self-Hosted**
+
+```js
+import './cornerstone/components/format-bytes/format-bytes.js';
+```
+
+**React**
+
+```js
+import CsFormatBytes from '@cruglobal/cornerstone-components/react/format-bytes/index.js';
+```
+
+### Attributes & Properties
+
+| Property | Attribute | Description | Type | Default | Reflects |
+| --- | --- | --- | --- | --- | --- |
+| `display` | `display` | Determines how to display the result, e.g. "100 bytes", "100 b", or "100b". | `'long' \| 'short' \| 'narrow'` | `'short'` | — |
+| `unit` | `unit` | The type of unit to display. | `'byte' \| 'bit'` | `'byte'` | — |
+| `value` | `value` | The number to format in bytes. | `number` | `0` | — |

package/dist/bundled/skills/cornerstone/references/components/format-date.md

@@ -0,0 +1,104 @@
+# Format Date
+
+**Full documentation:** https://cruglobal.github.io/cornerstone-design-system/components/format-date
+
+```html
+<!-- Cornerstone 3 release date 🎉 -->
+<cs-format-date date="2025-12-02T00:00:00-05:00"></cs-format-date>
+```
+
+Localization is handled by the browser's [`Intl.DateTimeFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). No language packs are required.
+
+The `date` attribute determines the date/time to use when formatting. It must be a string that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) can interpret or a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object set via JavaScript. If omitted, the current date/time will be assumed.
+
+> **Info**
+>
+> <strong>Always use ISO 8601 date strings.</strong><br />
+> Ambiguous formats like `03/04/2020` can be read as March 4 or April 3 depending on the user's browser and locale. A valid [ISO 8601 date time string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#Date_Time_String_Format) parses the same for every client.
+
+## Examples
+
+### Date & Time Format
+
+Formatting options are based on those found in the [`Intl.DateTimeFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). When formatting options are provided, the date/time will be formatted according to those values. When no formatting options are provided, a localized, numeric date will be displayed instead.
+
+```html
+<!-- Human-readable date -->
+<cs-format-date month="long" day="numeric" year="numeric"></cs-format-date><br />
+
+<!-- Time -->
+<cs-format-date hour="numeric" minute="numeric"></cs-format-date><br />
+
+<!-- Weekday -->
+<cs-format-date weekday="long"></cs-format-date><br />
+
+<!-- Month -->
+<cs-format-date month="long"></cs-format-date><br />
+
+<!-- Year -->
+<cs-format-date year="numeric"></cs-format-date><br />
+
+<!-- No formatting options -->
+<cs-format-date></cs-format-date>
+```
+
+### Hour Format
+
+By default, the browser will determine whether to use 12-hour or 24-hour time. To force one or the other, set the `hour-format` attribute to `12` or `24`.
+
+```html
+<cs-format-date hour="numeric" minute="numeric" hour-format="12"></cs-format-date><br />
+<cs-format-date hour="numeric" minute="numeric" hour-format="24"></cs-format-date>
+```
+
+### Localization
+
+Use the `lang` attribute to set the date/time formatting locale.
+
+```html
+English: <cs-format-date lang="en"></cs-format-date><br />
+French: <cs-format-date lang="fr"></cs-format-date><br />
+Russian: <cs-format-date lang="ru"></cs-format-date>
+```
+
+## 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/format-date/format-date.js';
+```
+
+**Self-Hosted**
+
+```js
+import './cornerstone/components/format-date/format-date.js';
+```
+
+**React**
+
+```js
+import CsFormatDate from '@cruglobal/cornerstone-components/react/format-date/index.js';
+```
+
+### Attributes & Properties
+
+| Property | Attribute | Description | Type | Default | Reflects |
+| --- | --- | --- | --- | --- | --- |
+| `date` | `date` | The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString). | `Date \| string` | `new Date()` | — |
+| `day` | `day` | The format for displaying the day. | `'numeric' \| '2-digit'` | — | — |
+| `era` | `era` | The format for displaying the era. | `'narrow' \| 'short' \| 'long'` | — | — |
+| `hour` | `hour` | The format for displaying the hour. | `'numeric' \| '2-digit'` | — | — |
+| `hourFormat` | `hour-format` | The format for displaying the hour. | `'auto' \| '12' \| '24'` | `'auto'` | — |
+| `minute` | `minute` | The format for displaying the minute. | `'numeric' \| '2-digit'` | — | — |
+| `month` | `month` | The format for displaying the month. | `'numeric' \| '2-digit' \| 'narrow' \| 'short' \| 'long'` | — | — |
+| `second` | `second` | The format for displaying the second. | `'numeric' \| '2-digit'` | — | — |
+| `timeZone` | `time-zone` | The time zone to express the time in. | `string` | — | — |
+| `timeZoneName` | `time-zone-name` | The format for displaying the time. | `'short' \| 'long'` | — | — |
+| `weekday` | `weekday` | The format for displaying the weekday. | `'narrow' \| 'short' \| 'long'` | — | — |
+| `year` | `year` | The format for displaying the year. | `'numeric' \| '2-digit'` | — | — |