@supersoniks/concorde 5.1.1 → 5.1.2

package/docs/src/core/components/ui/form/input/input.md

@@ -0,0 +1,142 @@
+# Input
+
+**`sonic-input`** wraps a native `<input>` with a label, a description, prefix and suffix slots and Concorde sizes. Native attributes (`type`, `placeholder`, `pattern`, `min`, `max`, …) are passed through. Bind the value to a store with **`formDataProvider`** and **`name`**, set on the field or on an ancestor.
+
+## Basic example
+
+<sonic-code>
+  <template>
+    <sonic-input label="Name" placeholder="Ada Lindqvist" description="As it appears on your passport."></sonic-input>
+  </template>
+</sonic-code>
+
+## Type
+
+With no `type`, the input is `text`. Text-like types (`email`, `password`, `date`, `number`, `color`, `search`, …) are supported; `radio`, `checkbox` and `range` have dedicated components. `password` adds a visibility toggle.
+
+<sonic-code>
+  <template>
+    <div class="grid gap-3">
+      <sonic-input type="text" label="Text"></sonic-input>
+      <sonic-input type="email" label="Email" placeholder="ada@example.com"></sonic-input>
+      <sonic-input type="password" label="Password"></sonic-input>
+      <sonic-input type="date" label="Date"></sonic-input>
+      <sonic-input type="number" label="Number"></sonic-input>
+      <sonic-input type="color" label="Color" value="#ffcc00"></sonic-input>
+    </div>
+  </template>
+</sonic-code>
+
+## Size and status
+
+With no `size`, the input uses the base scale. `status` colors the field; it defaults to `default`.
+
+<sonic-code>
+  <template>
+    <div class="grid gap-3">
+      <sonic-input size="2xs" value="2xs"></sonic-input>
+      <sonic-input size="xs" value="xs"></sonic-input>
+      <sonic-input size="sm" value="sm"></sonic-input>
+      <sonic-input value="default"></sonic-input>
+      <sonic-input size="lg" value="lg"></sonic-input>
+      <sonic-input size="xl" value="xl"></sonic-input>
+      <sonic-input size="2xl" value="2xl"></sonic-input>
+      <sonic-input status="success" value="success"></sonic-input>
+      <sonic-input status="error" value="error"></sonic-input>
+      <sonic-input status="warning" value="warning"></sonic-input>
+      <sonic-input status="info" value="info"></sonic-input>
+    </div>
+  </template>
+</sonic-code>
+
+## Validation
+
+`required`, `pattern`, `minlength` and the native type rules are checked by the browser. Feedback styles apply once the field is `touched` (after blur).
+
+<sonic-code>
+  <template>
+    <sonic-input required type="email" label="Email" placeholder="ada@example.com"></sonic-input>
+  </template>
+</sonic-code>
+
+## Prefix and suffix
+
+Slotted content sits outside the field by default. Set `inlineContent` to draw it inside; clicking it then focuses the input unless `disableInlineContentFocus` is set.
+
+<sonic-code>
+  <template>
+    <div class="grid grid-cols-2 gap-3">
+      <sonic-input type="search" label="Search" placeholder="Search flights">
+        <sonic-icon library="iconoir" name="search" slot="prefix"></sonic-icon>
+      </sonic-input>
+      <sonic-input inlineContent type="number" label="Checked bags" placeholder="0">
+        <sonic-badge slot="suffix" type="danger" size="sm">4 max</sonic-badge>
+      </sonic-input>
+    </div>
+  </template>
+</sonic-code>
+
+## Form data
+
+Fields sharing the same `formDataProvider` and `name` stay in sync. The attribute is looked up on ancestors, so set it once on a wrapper.
+
+<sonic-code>
+  <template>
+    <div formDataProvider="inputDemoForm" class="grid grid-cols-2 gap-3">
+      <sonic-input name="city" label="City" value="Lisbon"></sonic-input>
+      <sonic-input name="city" label="Same field"></sonic-input>
+    </div>
+  </template>
+</sonic-code>
+
+`sameValueAs` sets `pattern` to the value of another field in the same store, for confirmation fields.
+
+<sonic-code>
+  <template>
+    <div formDataProvider="inputDemoPassword" class="grid grid-cols-2 gap-3">
+      <sonic-input type="password" name="password" label="Password"></sonic-input>
+      <sonic-input type="password" name="confirm" sameValueAs="password" label="Confirm password"></sonic-input>
+    </div>
+  </template>
+</sonic-code>
+
+## Filtering a list
+
+The input writes `q` to the store used as `dataFilterProvider` by a `sonic-queue`; `inputDelayMs` debounces the requests while typing. Search a city, an airport or a flight number.
+
+<docs-lit-demo for="docs-flight-search-demo"></docs-lit-demo>
+
+## API reference
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `type` | `text` · `email` · `password` · `number` · `date` · `search` · `color` · … (default `text`) | Native input type |
+| `size` | `2xs` … `2xl` (default: base scale) | Typography and padding |
+| `status` | `default` · `success` · `error` · `warning` · `info` | Field color |
+| `label` | string (HTML) | Label; or use the `label` slot |
+| `description` | string (HTML) | Help text under the field; or use the `description` slot |
+| `name` | string | Key in the form store (dot notation allowed) |
+| `value` | string | Initial value |
+| `formDataProvider` | string | Store id; inherited from the closest ancestor |
+| `placeholder` | string | Native placeholder |
+| `required` · `disabled` · `readonly` · `autofocus` | boolean | Native flags |
+| `pattern` · `min` · `max` · `step` · `minlength` · `maxlength` | native | Native constraints |
+| `inputmode` · `autocomplete` · `list` · `src` · `tabindex` | native | Passed to the inner `<input>` |
+| `data-aria-label` · `data-aria-labelledby` | string | Forwarded as `aria-label` and `aria-labelledby` |
+| `inlineContent` | boolean | Renders prefix and suffix inside the field (forced for `password`) |
+| `disableInlineContentFocus` | boolean | Clicking inline content does not focus the input |
+| `showPasswordToggle` | boolean | Visibility toggle (forced for `password`) |
+| `sameValueAs` | string | Name of a field whose value becomes this field's `pattern` |
+| `inputDelayMs` | number | Debounces value updates while typing |
+| `autoActive` | boolean | Sets `active` whenever the value is not empty |
+| `active` | boolean | Reflected state for styling |
+| `unsetOnDisconnect` | boolean | Clears the store value when the element is removed |
+| `forceAutoFill` | boolean | Lets properties override `type` / `label` / `description` / `name` attributes |
+
+| Slot | Description |
+|------|-------------|
+| `label` | Rich label content |
+| `description` | Rich help text |
+| `prefix` | Content before the input |
+| `suffix` | Content after the input |
+| `list` | Extra content after the description |

package/docs/src/core/components/ui/form/radio/radio.md

@@ -0,0 +1,78 @@
+# Radio
+
+**`sonic-radio`** is a round [Checkbox](/core/components/ui/form/checkbox) in radio mode: radios sharing a `name` under one **`formDataProvider`** store a single value, and a checked radio cannot be unchecked by a click. Label goes in the default slot or `label`, helper text in the `description` slot.
+
+## Basic example
+
+<sonic-code>
+  <template>
+    <div formDataProvider="radio-basic-demo" class="grid gap-2">
+      <sonic-radio name="seat" value="window" checked>Window</sonic-radio>
+      <sonic-radio name="seat" value="aisle">Aisle</sonic-radio>
+      <div>Seat: <sonic-value dataProvider="radio-basic-demo" key="seat"></sonic-value></div>
+    </div>
+  </template>
+</sonic-code>
+
+## Size
+
+With no `size`, the radio follows `md` (1rem).
+
+<sonic-code>
+  <template>
+    <div class="grid gap-2" formDataProvider="radio-size-demo">
+      <sonic-radio name="size" value="2xs" size="2xs">2xs</sonic-radio>
+      <sonic-radio name="size" value="xs" size="xs">xs</sonic-radio>
+      <sonic-radio name="size" value="sm" size="sm">sm</sonic-radio>
+      <sonic-radio name="size" value="md">Default</sonic-radio>
+      <sonic-radio name="size" value="lg" size="lg">lg</sonic-radio>
+      <sonic-radio name="size" value="xl" size="xl">xl</sonic-radio>
+      <sonic-radio name="size" value="2xl" size="2xl">2xl</sonic-radio>
+    </div>
+  </template>
+</sonic-code>
+
+## Checked and disabled
+
+`checked` sets the initial state. `disabled` blocks interaction and dims the control.
+
+<sonic-code>
+  <template>
+    <div class="grid gap-2">
+      <sonic-radio name="state-checked" value="a" checked>Checked</sonic-radio>
+      <sonic-radio name="state-disabled" value="b" disabled>Disabled</sonic-radio>
+      <sonic-radio name="state-both" value="c" disabled checked>Disabled and checked</sonic-radio>
+      <sonic-radio name="state-link" value="d">I accept the <sonic-link href="#" class="underline">terms</sonic-link></sonic-radio>
+    </div>
+  </template>
+</sonic-code>
+
+## Filtering a list
+
+The radio group writes one `status` value to the store used as `dataFilterProvider` by a `sonic-queue`. See [Checkbox](/core/components/ui/form/checkbox) for the multi-value version.
+
+<docs-lit-demo for="docs-flight-status-radio-demo"></docs-lit-demo>
+
+## API reference
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `name` | string | Key in the form data (dot notation supported) |
+| `value` | string | Value stored when checked |
+| `formDataProvider` | string | Form data id; inherited from the closest ancestor when omitted |
+| `checked` | boolean | Initial checked state |
+| `unsetOnDisconnect` | boolean | Removes the value from the data when the element is removed |
+| `label` | string (HTML) | Label, rendered before the default slot |
+| `description` | string (HTML) | Helper text, rendered in the `description` slot |
+| `size` | `2xs` … `2xl` · `inherit` (default `md`) | Font size and control size |
+| `disabled` | boolean | Blocks interaction |
+| `required` | boolean | Native validation on form submit |
+| `autofocus` | boolean | Focuses the input on load |
+| `data-aria-label` · `data-aria-labelledby` | string | Forwarded to the inner input as `aria-label` / `aria-labelledby` |
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Label content (text, links) |
+| `description` | Helper text under the label |
+
+Fires a `change` event on each click.

package/docs/src/core/components/ui/form/select/select.md

@@ -0,0 +1,86 @@
+# Select
+
+**`sonic-select`** wraps a native `<select>` with a label, a description, prefix and suffix slots and Concorde sizes. Options come from child `<option>` tags or from the `options` attribute (JSON). Bind the value to a store with **`formDataProvider`** and **`name`**, set on the field or on an ancestor.
+
+## Basic example
+
+<sonic-code>
+  <template>
+    <sonic-select label="Cabin class" description="Pick one.">
+      <option value="">No selection</option>
+      <option value="economy">Economy</option>
+      <option value="premium" selected>Premium</option>
+      <option value="business">Business</option>
+      <option value="first">First</option>
+    </sonic-select>
+  </template>
+</sonic-code>
+
+## Options
+
+`options` takes an array of objects; `valueKey` (default `value`) and `wordingKey` (default `wording`) name the keys to read. An option with `selected` sets the initial value; with no `value` and nothing selected, the first option is used.
+
+<sonic-code>
+  <template>
+    <sonic-select label="Meal" wordingKey="label" options='[{"value":"standard","label":"Standard"},{"value":"vegetarian","label":"Vegetarian","selected":true},{"value":"none","label":"No meal"}]'></sonic-select>
+  </template>
+</sonic-code>
+
+## Size and status
+
+With no `size`, the select uses the base scale. `status` colors the field; it defaults to `default`.
+
+<sonic-code>
+  <template>
+    <div class="grid gap-3">
+      <sonic-select size="2xs"><option>2xs</option></sonic-select>
+      <sonic-select size="xs"><option>xs</option></sonic-select>
+      <sonic-select size="sm"><option>sm</option></sonic-select>
+      <sonic-select><option>default</option></sonic-select>
+      <sonic-select size="lg"><option>lg</option></sonic-select>
+      <sonic-select size="xl"><option>xl</option></sonic-select>
+      <sonic-select size="2xl"><option>2xl</option></sonic-select>
+      <sonic-select status="success"><option>success</option></sonic-select>
+      <sonic-select status="error"><option>error</option></sonic-select>
+      <sonic-select status="warning"><option>warning</option></sonic-select>
+      <sonic-select status="info"><option>info</option></sonic-select>
+      <sonic-select status="primary"><option>primary</option></sonic-select>
+      <sonic-select disabled><option>disabled</option></sonic-select>
+    </div>
+  </template>
+</sonic-code>
+
+## Filtering a list
+
+`name="direction"` writes to the store used as `dataFilterProvider` by a `sonic-queue`, which sends it as `?direction=` to the [mock API](/docs/misc/docs-mock-api): switch between departures and arrivals.
+
+<docs-lit-demo for="docs-flight-direction-demo"></docs-lit-demo>
+
+## API reference
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `name` | string | Key in the form store (dot notation allowed) |
+| `value` | string | Initial value |
+| `formDataProvider` | string | Store id; inherited from the closest ancestor |
+| `options` | JSON array | Options as objects; alternative to child `<option>` tags |
+| `valueKey` | string (default `value`) | Option key used as value |
+| `wordingKey` | string (default `wording`) | Option key used as text |
+| `size` | `2xs` … `2xl` (default: base scale) | Typography and padding |
+| `status` | `default` · `success` · `error` · `warning` · `info` · `primary` | Field color |
+| `label` | string (HTML) | Label; or use the `label` slot |
+| `description` | string (HTML) | Help text under the field; or use the `description` slot |
+| `required` · `disabled` · `autofocus` | boolean | Native flags |
+| `multiple` | boolean | Native multiple selection; only one value is stored |
+| `selectSize` | number | Native `size` (visible rows) |
+| `data-aria-label` · `data-aria-labelledby` | string | Forwarded as `aria-label` and `aria-labelledby` |
+| `unsetOnDisconnect` | boolean | Clears the store value when the element is removed |
+| `forceAutoFill` | boolean | Lets properties override `label` / `description` / `name` attributes |
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | `<option>` elements |
+| `label` | Rich label content |
+| `description` | Rich help text |
+| `prefix` | Content before the select |
+| `suffix` | Content after the select |

package/docs/src/core/components/ui/form/switch/switch.md

@@ -0,0 +1,80 @@
+# Switch
+
+**`sonic-switch`** is a toggle-styled [Checkbox](/core/components/ui/form/checkbox) in `unique` mode: when on, it stores its `value` under `name` in the **`formDataProvider`** data; when off, it stores `null`. Switches sharing a `name` behave as one choice, so give independent switches distinct names. Label goes in the default slot or `label`, helper text in the `description` slot.
+
+## Basic example
+
+<sonic-code>
+  <template>
+    <div formDataProvider="switch-basic-demo" class="grid gap-2">
+      <sonic-switch name="notifications" value="on" checked>
+        Notifications
+        <span slot="description">Get an alert when your gate changes.</span>
+      </sonic-switch>
+      <div>Value: <sonic-value dataProvider="switch-basic-demo" key="notifications"></sonic-value></div>
+    </div>
+  </template>
+</sonic-code>
+
+## Size
+
+With no `size`, the switch follows `md` (1rem).
+
+<sonic-code>
+  <template>
+    <div class="grid gap-2">
+      <sonic-switch size="2xs">2xs</sonic-switch>
+      <sonic-switch size="xs">xs</sonic-switch>
+      <sonic-switch size="sm">sm</sonic-switch>
+      <sonic-switch>Default</sonic-switch>
+      <sonic-switch size="lg">lg</sonic-switch>
+      <sonic-switch size="xl">xl</sonic-switch>
+      <sonic-switch size="2xl">2xl</sonic-switch>
+    </div>
+  </template>
+</sonic-code>
+
+## Checked and disabled
+
+`checked` sets the initial state. `disabled` blocks interaction and dims the control.
+
+<sonic-code>
+  <template>
+    <div class="grid gap-2">
+      <sonic-switch checked>Checked</sonic-switch>
+      <sonic-switch disabled>Disabled</sonic-switch>
+      <sonic-switch disabled checked>Disabled and checked</sonic-switch>
+      <sonic-switch>I accept the <sonic-link href="#" class="underline">terms</sonic-link></sonic-switch>
+    </div>
+  </template>
+</sonic-code>
+
+## Filtering a list
+
+On, the switch writes `status=delayed` to the store used as `dataFilterProvider` by a `sonic-queue`; off, it writes `null` and the filter is dropped.
+
+<docs-lit-demo for="docs-flight-delayed-switch-demo"></docs-lit-demo>
+
+## API reference
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `name` | string | Key in the form data (dot notation supported) |
+| `value` | string | Value stored when on |
+| `formDataProvider` | string | Form data id; inherited from the closest ancestor when omitted |
+| `checked` | boolean | Initial state |
+| `unsetOnDisconnect` | boolean | Removes the value from the data when the element is removed |
+| `label` | string (HTML) | Label, rendered before the default slot |
+| `description` | string (HTML) | Helper text, rendered in the `description` slot |
+| `size` | `2xs` … `2xl` · `inherit` (default `md`) | Font size and track size |
+| `disabled` | boolean | Blocks interaction |
+| `required` | boolean | Native validation on form submit |
+| `autofocus` | boolean | Focuses the input on load |
+| `data-aria-label` · `data-aria-labelledby` | string | Forwarded to the inner input as `aria-label` / `aria-labelledby` |
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Label content (text, links) |
+| `description` | Helper text under the label |
+
+Fires a `change` event on each click.

package/docs/src/core/components/ui/form/textarea/textarea.md

@@ -0,0 +1,82 @@
+# Textarea
+
+**`sonic-textarea`** wraps a native `<textarea>` with a label, a description and Concorde sizes. Native attributes (`rows`, `cols`, `maxlength`, `wrap`, …) are passed through. Bind the value to a store with **`formDataProvider`** and **`name`**, set on the field or on an ancestor.
+
+## Basic example
+
+<sonic-code>
+  <template>
+    <sonic-textarea label="Comments to the crew" placeholder="Write your message" description="Plain text only."></sonic-textarea>
+  </template>
+</sonic-code>
+
+## Rows and resize
+
+`rows` sets the visible height. With no `resize`, the user can resize vertically only.
+
+<sonic-code>
+  <template>
+    <div class="grid gap-3">
+      <sonic-textarea rows="6" label="Six rows"></sonic-textarea>
+      <sonic-textarea resize="none" label="Not resizable"></sonic-textarea>
+    </div>
+  </template>
+</sonic-code>
+
+## Size and status
+
+With no `size`, the textarea uses `md`. `status` colors the field; it defaults to `default`.
+
+<sonic-code>
+  <template>
+    <div class="grid gap-3">
+      <sonic-textarea rows="1" size="2xs" value="2xs"></sonic-textarea>
+      <sonic-textarea rows="1" size="xs" value="xs"></sonic-textarea>
+      <sonic-textarea rows="1" size="sm" value="sm"></sonic-textarea>
+      <sonic-textarea rows="1" value="default"></sonic-textarea>
+      <sonic-textarea rows="1" size="lg" value="lg"></sonic-textarea>
+      <sonic-textarea rows="1" size="xl" value="xl"></sonic-textarea>
+      <sonic-textarea rows="1" size="2xl" value="2xl"></sonic-textarea>
+      <sonic-textarea rows="1" status="success" value="success"></sonic-textarea>
+      <sonic-textarea rows="1" status="error" value="error"></sonic-textarea>
+      <sonic-textarea rows="1" status="warning" value="warning"></sonic-textarea>
+      <sonic-textarea rows="1" status="info" value="info"></sonic-textarea>
+    </div>
+  </template>
+</sonic-code>
+
+## Validation
+
+`required`, `minlength` and `maxlength` are checked by the browser. Feedback styles apply once the field is `touched` (after blur).
+
+<sonic-code>
+  <template>
+    <sonic-textarea required minlength="10" label="Special assistance request" placeholder="At least 10 characters"></sonic-textarea>
+  </template>
+</sonic-code>
+
+## API reference
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `name` | string | Key in the form store (dot notation allowed) |
+| `value` | string | Initial value |
+| `formDataProvider` | string | Store id; inherited from the closest ancestor |
+| `label` | string (HTML) | Label; or use the `label` slot |
+| `description` | string (HTML) | Help text under the field; or use the `description` slot |
+| `placeholder` | string | Native placeholder |
+| `size` | `2xs` … `2xl` (default `md`) | Typography and padding |
+| `status` | `default` · `success` · `error` · `warning` · `info` | Field color |
+| `rows` · `cols` | number | Native dimensions |
+| `minlength` · `maxlength` | number | Native length constraints |
+| `wrap` | `soft` · `hard` | Native wrapping |
+| `resize` | `vertical` · `horizontal` · `both` · `none` · `block` · `inline` (default `vertical`) | CSS resize handle |
+| `required` · `disabled` · `readonly` · `autofocus` | boolean | Native flags |
+| `autocomplete` · `tabindex` | native | Passed to the inner `<textarea>` |
+| `data-aria-label` · `data-aria-labelledby` | string | Forwarded as `aria-label` and `aria-labelledby` |
+| `unsetOnDisconnect` | boolean | Clears the store value when the element is removed |
+
+| Slot | Description |
+|------|-------------|
+| `label` | Rich label content |
+| `description` | Rich help text |

package/docs/src/core/components/ui/group/group.md

@@ -0,0 +1,77 @@
+# Group
+
+**`sonic-group`** lays out `sonic-button` · `sonic-input` and `sonic-select` controls in one row with a **shared corner radius**: only the outer corners of the first and last items stay rounded. Use it for button groups, radio rows or a field with an attached action. Optional `label` and `description` follow form field styling.
+
+## Radio group
+
+Give each `sonic-button` the `radio` attribute and a shared `name`. The selected `value` is written to the `formDataProvider` set on the group (inherited by the buttons).
+
+<sonic-code>
+  <template>
+    <sonic-group formDataProvider="groupPlanDemo">
+      <sonic-button radio name="plan" value="free" type="default">Free</sonic-button>
+      <sonic-button radio checked name="plan" value="pro" type="default">Pro</sonic-button>
+      <sonic-button radio name="plan" value="team" type="default">Team</sonic-button>
+    </sonic-group>
+  </template>
+</sonic-code>
+
+## Button group
+
+Adjacent action buttons that stay independent controls.
+
+<sonic-code>
+  <template>
+    <sonic-group>
+      <sonic-button type="default">
+        <sonic-icon library="iconoir" name="align-left"></sonic-icon>
+      </sonic-button>
+      <sonic-button type="default">
+        <sonic-icon library="iconoir" name="align-center"></sonic-icon>
+      </sonic-button>
+      <sonic-button type="default">
+        <sonic-icon library="iconoir" name="align-right"></sonic-icon>
+      </sonic-button>
+    </sonic-group>
+  </template>
+</sonic-code>
+
+## Field with action
+
+Put the action before or after the field. `label` and `description` annotate the whole row.
+
+<sonic-code>
+  <template>
+    <div class="grid gap-4 max-w-md">
+      <sonic-group label="Search" description="Type a flight number, then confirm.">
+        <sonic-input placeholder="CN 001"></sonic-input>
+        <sonic-button type="primary" shape="square">
+          <sonic-icon library="iconoir" name="search"></sonic-icon>
+        </sonic-button>
+      </sonic-group>
+      <sonic-group label="Extra baggage">
+        <sonic-button type="default" shape="square">
+          <sonic-icon library="iconoir" name="minus"></sonic-icon>
+        </sonic-button>
+        <sonic-input type="number" value="1"></sonic-input>
+        <sonic-button type="default" shape="square">
+          <sonic-icon library="iconoir" name="plus"></sonic-icon>
+        </sonic-button>
+      </sonic-group>
+    </div>
+  </template>
+</sonic-code>
+
+## API reference
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `label` | string (HTML) | Label above the row; content of `slot="label"` is appended |
+| `description` | string (HTML) | Help text below the row; content of `slot="description"` replaces it |
+| `alignItems` | CSS `align-items` value (default `center`) | Cross-axis alignment of the row |
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | `sonic-button` · `sonic-input` · `sonic-select` in visual order |
+| `label` | Custom label markup |
+| `description` | Custom description markup |