@cruglobal/cornerstone-components 0.1.0

package/dist/bundled/skills/cornerstone/references/components/intersection-observer.md

@@ -0,0 +1,344 @@
+# Intersection Observer
+
+**Full documentation:** https://cruglobal.github.io/cornerstone-design-system/components/intersection-observer
+
+This component uses the [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) to track when its direct children enter or leave a designated root element. The `cs-intersect` event fires whenever elements cross the visibility threshold.
+
+```html
+<div id="intersection__overview">
+  <cs-intersection-observer threshold="1" intersect-class="visible">
+    <div class="box"><cs-icon name="lightbulb"></cs-icon></div>
+  </cs-intersection-observer>
+</div>
+
+<small>Scroll to see the element intersect at 100% visibility</small>
+
+<style>
+  /* Container styles */
+  #intersection__overview {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cs-space-xl);
+    height: 300px;
+    border: solid 2px var(--cs-color-surface-border);
+    padding: var(--cs-space-m);
+    overflow-y: auto;
+
+    /* Spacers to demonstrate scrolling */
+    &::before {
+      content: '';
+      height: 260px;
+      flex-shrink: 0;
+    }
+
+    &::after {
+      content: '';
+      height: 260px;
+      flex-shrink: 0;
+    }
+
+    /* Box styles */
+    .box {
+      flex-shrink: 0;
+      width: 120px;
+      height: 120px;
+      background-color: var(--cs-color-neutral-fill-normal);
+      color: var(--cs-color-neutral-10);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-inline: auto;
+      transition: all 50ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+      cs-icon {
+        font-size: 3rem;
+        stroke-width: 1px;
+      }
+
+      &.visible {
+        background-color: var(--cs-color-brand-fill-loud);
+        color: var(--cs-color-brand-on-loud);
+      }
+    }
+
+    + small {
+      display: block;
+      text-align: center;
+      margin-block-start: var(--cs-space-m);
+    }
+  }
+</style>
+```
+
+> **Info**
+>
+> <strong>Only direct children of the host are monitored.</strong><br />
+> Nested elements won't trigger intersection events.
+
+## Examples
+
+### Root Element
+
+You can observe intersections within a specific container by assigning the `root` attribute to the [root element's](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root) ID. Apply [`rootMargin`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) with the `root-margin` attribute to expand or contract the observation area.
+
+```html
+<div id="scroll-container">
+  <cs-intersection-observer root="scroll-container" root-margin="50px 0px"> ... </cs-intersection-observer>
+</div>
+```
+
+### Thresholds
+
+Track different visibility percentages by providing multiple [`threshold`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold) values as a space-separated list.
+
+```html
+<cs-intersection-observer threshold="0 0.25 0.5 0.75 1"> ... </cs-intersection-observer>
+```
+
+### Intersect Class
+
+The `intersect-class` attribute automatically toggles the specified class on direct children when they become visible. This enables pure CSS styling without JavaScript event handlers.
+
+```html
+<div id="intersection__classes">
+  <cs-intersection-observer threshold="0.5" intersect-class="visible" root="intersection__classes">
+    <div class="box fade">Fade In</div>
+    <div class="box slide">Slide In</div>
+    <div class="box scale">Scale & Rotate</div>
+    <div class="box bounce">Bounce</div>
+  </cs-intersection-observer>
+</div>
+
+<small>Scroll to see elements transition at 50% visibility</small>
+
+<style>
+  /* Container styles */
+  #intersection__classes {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cs-space-xl);
+    height: 300px;
+    border: solid 2px var(--cs-color-surface-border);
+    padding: var(--cs-space-m);
+    overflow-y: auto;
+
+    /* Spacers to demonstrate scrolling */
+    &::before {
+      content: '';
+      height: 260px;
+      flex-shrink: 0;
+    }
+
+    &::after {
+      content: '';
+      height: 260px;
+      flex-shrink: 0;
+    }
+
+    + small {
+      display: block;
+      text-align: center;
+      margin-block-start: var(--cs-space-m);
+    }
+
+    /* Shared box styles */
+    .box {
+      flex-shrink: 0;
+      width: 120px;
+      height: 120px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      color: var(--cs-color-brand-on-loud);
+      opacity: 0;
+      padding: var(--cs-space-xl);
+      margin-inline: auto;
+
+      /* Fade */
+      &.fade {
+        background: var(--cs-color-brand-fill-loud);
+        color: var(--cs-color-brand-on-loud);
+        transform: translateY(30px);
+        transition: all 0.6s ease;
+
+        &.visible {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      /* Slide */
+      &.slide {
+        background: var(--cs-color-brand-fill-loud);
+        color: var(--cs-color-brand-on-loud);
+        transform: translateX(-50px);
+        transition: all 0.5s ease;
+
+        &.visible {
+          opacity: 1;
+          transform: translateX(0);
+        }
+      }
+
+      /* Scale */
+      &.scale {
+        background: var(--cs-color-brand-fill-loud);
+        color: var(--cs-color-brand-on-loud);
+        transform: scale(0.6) rotate(-15deg);
+        transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+        &.visible {
+          opacity: 1;
+          transform: scale(1) rotate(0deg);
+        }
+      }
+
+      /* Bounce In and Out */
+      &.bounce {
+        background: var(--cs-color-brand-fill-loud);
+        color: var(--cs-color-brand-on-loud);
+        opacity: 0;
+        transform: scale(0.8);
+        transition: none;
+
+        &.visible {
+          opacity: 1;
+          transform: scale(1);
+          animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
+        }
+
+        &:not(.visible) {
+          animation: bounceOut 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
+        }
+      }
+    }
+  }
+
+  @keyframes bounceIn {
+    0% {
+      transform: scale(0.8);
+    }
+    40% {
+      transform: scale(1.08);
+    }
+    65% {
+      transform: scale(0.98);
+    }
+    80% {
+      transform: scale(1.02);
+    }
+    90% {
+      transform: scale(0.99);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes bounceOut {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    20% {
+      transform: scale(1.02);
+      opacity: 1;
+    }
+    40% {
+      transform: scale(0.98);
+      opacity: 0.8;
+    }
+    60% {
+      transform: scale(1.05);
+      opacity: 0.6;
+    }
+    80% {
+      transform: scale(0.95);
+      opacity: 0.3;
+    }
+    100% {
+      transform: scale(0.8);
+      opacity: 0;
+    }
+  }
+</style>
+```
+
+### Reacting to Intersections
+
+The intersection observer tracks only its direct children. The component uses [`display: contents`](https://developer.mozilla.org/en-US/docs/Web/CSS/display#contents) styling, so it integrates cleanly with flex and grid layouts from a parent container.
+
+```html
+<div class="cs-stack cs-gap-0">
+  <cs-intersection-observer>
+    <div class="box">Box 1</div>
+    <div class="box">Box 2</div>
+    <div class="box">Box 3</div>
+  </cs-intersection-observer>
+</div>
+```
+
+The component tracks elements as they enter and exit the root element (viewport by default) and emits the `cs-intersect` event on state changes. The event provides `event.detail.entry`, an [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) object with intersection details.
+
+You can identify the triggering element through `entry.target`. Check `entry.isIntersecting` to determine if an element is entering or exiting the viewport.
+
+```javascript
+observer.addEventListener('cs-intersect', event => {
+  const entry = event.detail.entry;
+
+  if (entry.isIntersecting) {
+    console.log('Element entered viewport:', entry.target);
+  } else {
+    console.log('Element left viewport:', entry.target);
+  }
+});
+```
+
+## 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/intersection-observer/intersection-observer.js';
+```
+
+**Self-Hosted**
+
+```js
+import './cornerstone/components/intersection-observer/intersection-observer.js';
+```
+
+**React**
+
+```js
+import CsIntersectionObserver from '@cruglobal/cornerstone-components/react/intersection-observer/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)` — Elements to track. Only immediate children of the host are monitored.
+
+### Attributes & Properties
+
+| Property | Attribute | Description | Type | Default | Reflects |
+| --- | --- | --- | --- | --- | --- |
+| `disabled` | `disabled` | Deactivates the intersection observer functionality. | `boolean` | `false` | Yes |
+| `intersectClass` | `intersect-class` | CSS class applied to elements during intersection. Automatically removed when elements leave the viewport, enabling pure CSS styling based on visibility state. | `string` | `''` | — |
+| `once` | `once` | If enabled, observation ceases after initial intersection. | `boolean` | `false` | Yes |
+| `root` | `root` | Element ID to define the viewport boundaries for tracked targets. | `string \| null` | `null` | — |
+| `rootMargin` | `root-margin` | Offset space around the root boundary. Accepts values like CSS margin syntax. | `string` | `'0px'` | — |
+| `threshold` | `threshold` | One or more space-separated values representing visibility percentages that trigger the observer callback. | `string` | `'0'` | — |
+
+### Events
+
+| Name | Description |
+| --- | --- |
+| `cs-intersect` | Fired when a tracked element begins or ceases intersecting. |

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

@@ -0,0 +1,279 @@
+# Known Date
+
+**Full documentation:** https://cruglobal.github.io/cornerstone-design-system/components/known-date
+
+Known Date collects a date the user already knows — a birthday, a passport issue date, an expiration — through three separate fields for day, month, and year. It follows the [UK Government Design System date input pattern](https://design-system.service.gov.uk/components/date-input/): a labeled `<fieldset>` wraps three plain `<input>` elements, the user types each part themselves, and the host submits a single canonical ISO date.
+
+```html
+<cs-known-date label="When was your passport issued?"></cs-known-date>
+```
+
+> **Info**
+>
+> <strong>Need a calendar, ranges, or browsing?</strong><br />
+> Known Date is intentionally simple: no popup calendar, no auto-advance between fields, and no clever parsing. For anything richer, pair a native `<input type="date">` with the field or reach for a dedicated date picker.
+
+## Form Submission
+
+The hidden form value is canonical ISO 8601 (`YYYY-MM-DD`), regardless of the locale used to render the fields:
+
+| Entry                           | Form value                         |
+| ------------------------------- | ---------------------------------- |
+| Complete, valid date            | `YYYY-MM-DD` (e.g. `2007-03-27`)   |
+| Partial (one or two fields)     | _(empty)_ — omitted from form data |
+| Invalid date (e.g. 30 February) | _(empty)_                          |
+
+```html
+<form id="kd-form-demo">
+  <cs-known-date name="dob" label="Date of birth" required value="2007-03-27"></cs-known-date>
+  <br />
+  <cs-button type="submit" appearance="filled" variant="neutral">Submit</cs-button>
+</form>
+
+<pre id="kd-form-demo-output"></pre>
+
+<style>
+  #kd-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;
+  }
+
+  #kd-form-demo-output:empty {
+    display: none;
+  }
+</style>
+
+<script>
+  const form = document.getElementById('kd-form-demo');
+  const output = document.getElementById('kd-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);
+    output.textContent = 'Submitted FormData:\n' + formatted;
+  });
+</script>
+```
+
+## Examples
+
+### Initial Value
+
+Set the `value` attribute to an ISO date to pre-fill the three fields.
+
+```html
+<cs-known-date label="Date of birth" value="1990-04-15"></cs-known-date>
+```
+
+### Hint
+
+Use the `hint` attribute (or slot) to show an example value. The hint is associated with each field via `aria-describedby`, so screen readers announce it when any field receives focus.
+
+```html
+<cs-known-date label="When was your passport issued?" hint="For example, 27 3 2007"></cs-known-date>
+```
+
+### Locale-Aware Field Order
+
+The three fields render in the natural order for the inherited `lang` (or the explicit `locale` attribute). The labels stay the same; only the position changes.
+
+```html
+<div class="cs-stack">
+  <cs-known-date label="UK order" lang="en-GB"></cs-known-date>
+  <cs-known-date label="US order" lang="en-US"></cs-known-date>
+  <cs-known-date label="Japanese order" lang="ja-JP"></cs-known-date>
+</div>
+```
+
+### Min & Max
+
+Constrain the accepted range with `min` and `max`. Values outside the range are reported as invalid.
+
+```html
+<cs-known-date label="Birthday" min="1900-01-01" max="2099-12-31"></cs-known-date>
+```
+
+### Required
+
+Set `required` to make the date input required for form submission. Like other form controls, validation surfaces through the browser's native constraint validation flow: submitting a form with an empty or partially filled date input prevents submission and shows the browser's validation message. No error appears while the user is simply filling in or tabbing between the fields.
+
+```html
+<form>
+  <cs-known-date label="Date of birth" required></cs-known-date>
+  <br />
+  <cs-button type="submit" appearance="filled" variant="neutral">Submit</cs-button>
+</form>
+```
+
+### Disabled
+
+Use the `disabled` attribute to disable a date field.
+
+```html
+<cs-known-date label="Birthday" value="2007-03-27" disabled></cs-known-date>
+```
+
+### Readonly
+
+Use the `readonly` attribute to keep a value visible but uneditable. Unlike `disabled`, a readonly date field stays focusable and its value is still submitted with the form.
+
+```html
+<cs-known-date label="Member since" value="2007-03-27" readonly></cs-known-date>
+```
+
+### Autocomplete
+
+Set `autocomplete="bday"` to enable browser autofill for birthdays. The host expands the family into per-field tokens (`bday-day`, `bday-month`, `bday-year`).
+
+```html
+<cs-known-date label="Date of birth" autocomplete="bday"></cs-known-date>
+```
+
+### Size
+
+```html
+<div class="cs-stack">
+  <cs-known-date label="Extra small" size="xs"></cs-known-date>
+  <cs-known-date label="Small" size="s"></cs-known-date>
+  <cs-known-date label="Medium (default)" size="m"></cs-known-date>
+  <cs-known-date label="Large" size="l"></cs-known-date>
+  <cs-known-date label="Extra large" size="xl"></cs-known-date>
+</div>
+```
+
+### Appearance
+
+```html
+<div class="cs-stack">
+  <cs-known-date label="Outlined (default)" appearance="outlined"></cs-known-date>
+  <cs-known-date label="Filled" appearance="filled"></cs-known-date>
+  <cs-known-date label="Filled outlined" appearance="filled-outlined"></cs-known-date>
+</div>
+```
+
+### Pill
+
+Use the `pill` attribute to give each field rounded edges.
+
+```html
+<cs-known-date label="Pill" pill></cs-known-date>
+```
+
+<!-- Demo styles -->
+<style>
+  cs-known-date {
+    max-width: 360px;
+  }
+</style>
+
+## 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/known-date/known-date.js';
+```
+
+**Self-Hosted**
+
+```js
+import './cornerstone/components/known-date/known-date.js';
+```
+
+**React**
+
+```js
+import CsKnownDate from '@cruglobal/cornerstone-components/react/known-date/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 known date. Alternatively, use the `hint` attribute.
+- `label` — The known date's group label. Alternatively, use the `label` attribute.
+
+### Attributes & Properties
+
+| Property | Attribute | Description | Type | Default | Reflects |
+| --- | --- | --- | --- | --- | --- |
+| `appearance` | `appearance` | The known date's visual appearance. | `CsKnownDateAppearance` | `'outlined'` | Yes |
+| `autocomplete` | `autocomplete` | Browser autofill family. When set to `bday`, the three fields receive `bday-day`, `bday-month`, and `bday-year` respectively. The field-agnostic directives `off` and `on` are applied to all three fields. Any other value is forwarded only to the year field. | `string` | `''` | — |
+| `defaultValue` | `value` | The default value used for form reset. | `string` | — | Yes |
+| `disabled` | `disabled` | Disables the known date. | `boolean` | `false` | — |
+| `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 known date's hint. If you need to display HTML, use the `hint` slot instead. | `string` | `''` | — |
+| `label` | `label` | The known date's label. If you need to display HTML, use the `label` slot instead. | `string` | `''` | — |
+| `locale` | `locale` | BCP-47 locale override. When empty, the inherited `lang` attribute is used. | `string` | `''` | Yes |
+| `max` | `max` | Latest selectable date as `YYYY-MM-DD`. | `string` | `''` | Yes |
+| `min` | `min` | Earliest selectable date as `YYYY-MM-DD`. | `string` | `''` | Yes |
+| `name` | `name` | The name submitted with form data. | `string \| null` | `''` | Yes |
+| `parts` | — | The three field strings. Stored verbatim so user-typed digits round-trip faithfully. | `DateParts` | `{ ...EMPTY_PARTS }` | — |
+| `pill` | `pill` | Draws pill-style fields with rounded edges. | `boolean` | `false` | Yes |
+| `readonly` | `readonly` | Makes the fields non-editable. | `boolean` | `false` | Yes |
+| `required` | `required` | Makes the known date required for form submission. | `boolean` | `false` | Yes |
+| `size` | `size` | The known date's size. | `CsKnownDateSize` | `'m'` | Yes |
+| `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` | — |
+| `validationTarget` | — | Anchor native validation popups on a real visible input. The hidden mirror handles form data, but anchoring a popup on `display: none` content would render it at offset (0, 0). | `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 committed value as an ISO `YYYY-MM-DD` string. The setter also accepts a `Date` or `null`. Reading returns an empty string when the value is blank or any field is only partially filled. | `string` | — | — |
+| `valueAsDate` | — | The committed value as a `Date`, or `null` when the value is empty/invalid. | `Date \| null` | — | — |
+| `valueInput` | — | Hidden mirror used for native constraint validation (min/max/required + valid-date roundtrip). | `HTMLInputElement` | — | — |
+
+### Methods
+
+| Name | Description | Arguments |
+| --- | --- | --- |
+| `blur()` | Removes focus from the known date. | — |
+| `focus()` | Focuses the first empty field, or the first field when all are filled. | `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` |
+| `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` |
+
+### Events
+
+| Name | Description |
+| --- | --- |
+| `blur` | Emitted when the control loses focus. |
+| `change` | Emitted when the committed value transitions to a new ISO date. |
+| `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 as the user types in any field. |
+
+### Custom States
+
+| Name | Description | CSS selector |
+| --- | --- | --- |
+| `blank` | The known date has no committed value. | `:state(blank)` |
+| `disabled` | The known date is disabled. | `:state(disabled)` |
+
+### CSS Parts
+
+| Name | Description | CSS selector |
+| --- | --- | --- |
+| `field` | Each field block (label + input). | `::part(field)` |
+| `field-day` | Added to the day field block. | `::part(field-day)` |
+| `field-input` | The native `<input>` inside a field. | `::part(field-input)` |
+| `field-label` | The text label above each field's input. | `::part(field-label)` |
+| `field-month` | Added to the month field block. | `::part(field-month)` |
+| `field-year` | Added to the year field block. | `::part(field-year)` |
+| `fields` | The flex row holding the three field blocks. | `::part(fields)` |
+| `fieldset` | The `<fieldset>` element grouping the three fields (or a `role="group"` div). | `::part(fieldset)` |
+| `form-control` | The form control's outer wrapper. | `::part(form-control)` |
+| `form-control-input` | Alias on the fields row matching other form controls. | `::part(form-control-input)` |
+| `form-control-label` | The wrapper inside the legend that styles the visible label text. | `::part(form-control-label)` |
+| `hint` | The hint's wrapper. | `::part(hint)` |
+| `known-date` | The component's outer wrapper. | `::part(known-date)` |
+| `legend` | The `<legend>` element (when a label is present). | `::part(legend)` |