@supersoniks/concorde 5.1.0 → 5.1.2

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

@@ -1,65 +1,82 @@
 # Textarea
 
-<sonic-button type="info" size="sm" target="_blank" href="https://www.w3schools.com/tags/tag_textarea.asp#midcontentadcontainer">
-  <sonic-icon library="iconoir" name="open-new-window" slot="prefix" ></sonic-icon>
-  Native attibutes list
-</sonic-button>
+**`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
 
-## Label
 <sonic-code>
   <template>
-  <sonic-textarea label="Label"></sonic-textarea>
+    <sonic-textarea label="Comments to the crew" placeholder="Write your message" description="Plain text only."></sonic-textarea>
   </template>
 </sonic-code>
 
-## Placeholder
-<sonic-code>
-  <template>
-  <sonic-textarea placeholder="placeholder"></sonic-textarea>
-  </template>
-</sonic-code>
+## Rows and resize
 
-## Value
-<sonic-code>
-  <template>
-  <sonic-textarea value="value"></sonic-textarea>
-  </template>
-</sonic-code>
+`rows` sets the visible height. With no `resize`, the user can resize vertically only.
 
-## Required
 <sonic-code>
   <template>
-  <sonic-textarea required label="Feedback on blur" placeholder="required" ></sonic-textarea>
+    <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>
 
-## Rows
-<sonic-code>
-  <template>
-  <sonic-textarea rows="8"></sonic-textarea>
-  </template>
-</sonic-code>
+## Size and status
+
+With no `size`, the textarea uses `md`. `status` colors the field; it defaults to `default`.
 
-## Description
 <sonic-code>
   <template>
-  <sonic-textarea  description="Description goes here" ></sonic-textarea>
+    <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).
 
-## Size
 <sonic-code>
   <template>
-  <div class="grid gap-4">
-    <sonic-textarea size="2xs" value="2xs"></sonic-textarea>
-    <sonic-textarea size="xs" value="xs"></sonic-textarea>
-    <sonic-textarea size="sm" value="sm"></sonic-textarea>
-    <sonic-textarea value="md / default"></sonic-textarea>
-    <sonic-textarea size="lg" value="lg"></sonic-textarea>
-    <sonic-textarea size="xl" value="xl"></sonic-textarea>
-    <sonic-textarea size="2xl" value="2xl"></sonic-textarea>
-  </div>
+    <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

@@ -1,75 +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="subscriptionData">
-      <sonic-button radio name="subscription" value="standard" type="default">😎 Standard</sonic-button>
-      <sonic-button radio checked name="subscription" value="premium" type="default">⭐ Premium</sonic-button>
-      <sonic-button radio name="subscription" value="diamond" type="default">💎 Diamond</sonic-button>
+    <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="info" target="_blank" href="https://wwws.airfrance.fr/">🗼Air France</sonic-button>
-      <sonic-button type="success" target="_blank" href="https://www.airtahitinui.com/">🌴 Air Tahiti</sonic-button>
-      <sonic-button type="danger" target="_blank" href="https://www.aircorsica.com/">💣 Air Corsica</sonic-button>
+      <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>
 
-## Input actions prefix
-<sonic-code>
-  <template>
-    <div class="grid grid-cols-3 gap-3">
-      <sonic-group>
-        <sonic-button type="info" shape="square">
-          <sonic-icon library="iconoir" library="iconoir" name="info-empty"></sonic-icon>
-        </sonic-button>
-        <sonic-input placeholder="placeholder" ></sonic-input>
-      </sonic-group>
-      <sonic-group label="Label">
-        <sonic-button type="info" shape="square">
-          <sonic-icon library="iconoir" library="iconoir" name="info-empty"></sonic-icon>
-        </sonic-button>
-        <sonic-input  ></sonic-input>
-      </sonic-group>
-      <sonic-group description="Description">
-        <sonic-button type="info" shape="square">
-          <sonic-icon library="iconoir" library="iconoir" name="info-empty"></sonic-icon>
-        </sonic-button>
-        <sonic-input ></sonic-input>
-      </sonic-group>
-    </div>
-  </template>
-</sonic-code>
+## Field with action
+
+Put the action before or after the field. `label` and `description` annotate the whole row.
 
-## Input actions suffix
 <sonic-code>
   <template>
-    <div class="grid grid-cols-3 gap-3">
-      <sonic-group>
-        <sonic-input placeholder="placeholder" ></sonic-input>
+    <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" library="iconoir" name="check"></sonic-icon>
+          <sonic-icon library="iconoir" name="search"></sonic-icon>
         </sonic-button>
       </sonic-group>
-      <sonic-group label="Label">
-        <sonic-input  ></sonic-input>
-        <sonic-button type="primary" shape="square">
-          <sonic-icon library="iconoir" library="iconoir" name="check"></sonic-icon>
+      <sonic-group label="Extra baggage">
+        <sonic-button type="default" shape="square">
+          <sonic-icon library="iconoir" name="minus"></sonic-icon>
         </sonic-button>
-      </sonic-group>
-      <sonic-group description="Description">
-        <sonic-input ></sonic-input>
-        <sonic-button type="primary" shape="square">
-          <sonic-icon library="iconoir" library="iconoir" name="check"></sonic-icon>
+        <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>
+</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 |

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

@@ -1,125 +1,214 @@
 # Icon
 
+**`sonic-icon`** renders inline SVG icons from the **bundled core set** or from **CDN libraries**. Set **`name`** (and **`library`** / **`prefix`** when needed); scale with **`size`**. Icons inherit **`currentColor`** and are **`aria-hidden`** by default—keep visible text nearby or label the control that contains them.
 
-## Custom
+## Core library
 
-<p >Icons located in the following folder : <span class="text-info">/svg/$prefix/$name.svg<span></p>
+Omit **`library`** to use the bundled set in `icons.json`. Available **`name`** values: `cancel` · `check` · `check-circled-outline` · `emoji-puzzled` · `info-empty` · `loader` · `minus-small` · `more-horiz` · `more-vert` · `nav-arrow-down` · `warning-circled-outline`.
 
-<sonic-code customIconLibraryPath="/svg/$prefix/$name.svg"
-      customIconDefaultPrefix="regular">
+<sonic-code>
   <template>
-    <sonic-scope  customIconLibraryPath="/svg/$prefix/$name.svg"
-      customIconDefaultPrefix="regular">
-      <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4  gap-8">
-        <div class="text-center">
-          <sonic-icon library="custom" prefix="regular" name="plane"></sonic-icon>
-          <br>
-          <div class="text-xs mt-1">regular</div>
-        </div>
-        <div class="text-center">
-          <sonic-icon library="custom" prefix="solid" name="plane"></sonic-icon>
-          <br>
-          <div class="text-xs mt-1">solid</div>
-        </div>
-        <div class="text-center">
-          <sonic-icon library="custom"  name="plane"></sonic-icon>
-          <br>
-          <div class="text-xs mt-1">default prefix</div>
-        </div>
+    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
+      <div class="text-center">
+        <sonic-icon name="cancel" size="lg"></sonic-icon>
+        <div class="text-xs mt-1">cancel</div>
       </div>
-    </sonic-scope>
+      <div class="text-center">
+        <sonic-icon name="check" size="lg"></sonic-icon>
+        <div class="text-xs mt-1">check</div>
+      </div>
+      <div class="text-center">
+        <sonic-icon name="check-circled-outline" size="lg"></sonic-icon>
+        <div class="text-xs mt-1">check-circled-outline</div>
+      </div>
+      <div class="text-center">
+        <sonic-icon name="emoji-puzzled" size="lg"></sonic-icon>
+        <div class="text-xs mt-1">emoji-puzzled</div>
+      </div>
+      <div class="text-center">
+        <sonic-icon name="info-empty" size="lg"></sonic-icon>
+        <div class="text-xs mt-1">info-empty</div>
+      </div>
+      <div class="text-center">
+        <sonic-icon name="loader" size="lg"></sonic-icon>
+        <div class="text-xs mt-1">loader</div>
+      </div>
+      <div class="text-center">
+        <sonic-icon name="minus-small" size="lg"></sonic-icon>
+        <div class="text-xs mt-1">minus-small</div>
+      </div>
+      <div class="text-center">
+        <sonic-icon name="more-horiz" size="lg"></sonic-icon>
+        <div class="text-xs mt-1">more-horiz</div>
+      </div>
+      <div class="text-center">
+        <sonic-icon name="more-vert" size="lg"></sonic-icon>
+        <div class="text-xs mt-1">more-vert</div>
+      </div>
+      <div class="text-center">
+        <sonic-icon name="nav-arrow-down" size="lg"></sonic-icon>
+        <div class="text-xs mt-1">nav-arrow-down</div>
+      </div>
+      <div class="text-center">
+        <sonic-icon name="warning-circled-outline" size="lg"></sonic-icon>
+        <div class="text-xs mt-1">warning-circled-outline</div>
+      </div>
+    </div>
   </template>
 </sonic-code>
 
+## External libraries
+
+Set **`library`** to load SVGs from a built-in CDN template. **`prefix`** falls back to each library’s default when omitted (`outline` for **`heroicons`**, **`regular`** for **`fontAwesome`** and **`material`**, and so on).
 
-## External
 <sonic-code>
   <template>
     <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
       <sonic-link href="https://heroicons.com/" target="_blank" class="text-center underline">
         <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="lg"></sonic-icon>
-        <br>
+        <br />
         <div class="text-xs mt-1">heroicons</div>
       </sonic-link>
       <sonic-link href="https://iconoir.com/" target="_blank" class="text-center underline">
-        <sonic-icon library="iconoir" name="2x2-cell"  size="lg"></sonic-icon>
-        <br>
+        <sonic-icon library="iconoir" name="2x2-cell" size="lg"></sonic-icon>
+        <br />
         <div class="text-xs mt-1">iconoir</div>
       </sonic-link>
       <sonic-link href="https://materialdesignicons.com/" target="_blank" class="text-center underline">
         <sonic-icon library="material" prefix="outline" name="email" size="lg"></sonic-icon>
-        <br>
+        <br />
         <div class="text-xs mt-1">material design</div>
       </sonic-link>
       <sonic-link href="https://fontawesome.com/search?o=r&m=free&s=regular" target="_blank" class="text-center underline">
         <sonic-icon library="fontAwesome" prefix="regular" name="user" size="lg"></sonic-icon>
-        <br>
+        <br />
         <div class="text-xs mt-1">fontAwesome regular</div>
       </sonic-link>
       <sonic-link href="https://fontawesome.com/search?o=r&m=free&s=solid" target="_blank" class="text-center underline">
         <sonic-icon library="fontAwesome" prefix="solid" name="book" size="lg"></sonic-icon>
-        <br>
+        <br />
         <div class="text-xs mt-1">fontAwesome solid</div>
       </sonic-link>
       <sonic-link href="https://feathericons.com/" target="_blank" class="text-center underline">
-        <sonic-icon library="feathers" name="activity"  size="lg"></sonic-icon>
-        <br>
+        <sonic-icon library="feathers" name="activity" size="lg"></sonic-icon>
+        <br />
         <div class="text-xs mt-1">feathers</div>
       </sonic-link>
       <sonic-link href="https://lucide.dev/" target="_blank" class="text-center underline">
-        <sonic-icon library="lucide" name="album"  size="lg"></sonic-icon>
-        <br>
+        <sonic-icon library="lucide" name="album" size="lg"></sonic-icon>
+        <br />
         <div class="text-xs mt-1">lucide</div>
       </sonic-link>
     </div>
   </template>
 </sonic-code>
 
+## Custom library
+
+Use **`library="custom"`** with SVG files on your origin. On an ancestor (for example **`sonic-scope`** or **`sonic-code`**), set **`customIconLibraryPath`** to a URL template with **`$prefix`** and **`$name`** placeholders, and optionally **`customIconDefaultPrefix`** when **`prefix`** is omitted.
+
+<sonic-code
+  customIconLibraryPath="/svg/$prefix/$name.svg"
+  customIconDefaultPrefix="regular"
+>
+  <template>
+    <sonic-scope
+      customIconLibraryPath="/svg/$prefix/$name.svg"
+      customIconDefaultPrefix="regular"
+    >
+      <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
+        <div class="text-center">
+          <sonic-icon library="custom" prefix="regular" name="plane"></sonic-icon>
+          <br />
+          <div class="text-xs mt-1">regular</div>
+        </div>
+        <div class="text-center">
+          <sonic-icon library="custom" prefix="solid" name="plane"></sonic-icon>
+          <br />
+          <div class="text-xs mt-1">solid</div>
+        </div>
+        <div class="text-center">
+          <sonic-icon library="custom" name="plane"></sonic-icon>
+          <br />
+          <div class="text-xs mt-1">default prefix</div>
+        </div>
+      </div>
+    </sonic-scope>
+  </template>
+</sonic-code>
+
 ## Size
+
+Omit **`size`** for the default scale (`1em` height, inherited from the font size). Steps go from `2xs` to `3xl`.
+
 <sonic-code>
   <template>
-    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4  gap-8">
+    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
       <div class="text-center">
         <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="2xs"></sonic-icon>
-        <br>
+        <br />
         <div class="text-xs mt-1">2xs</div>
       </div>
       <div class="text-center">
         <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="xs"></sonic-icon>
-        <br>
+        <br />
         <div class="text-xs mt-1">xs</div>
       </div>
       <div class="text-center">
         <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="sm"></sonic-icon>
-        <br>
+        <br />
         <div class="text-xs mt-1">sm</div>
       </div>
       <div class="text-center">
         <sonic-icon library="heroicons" prefix="outline" name="academic-cap"></sonic-icon>
-        <br>
+        <br />
         <div class="text-xs mt-1">default</div>
       </div>
       <div class="text-center">
         <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="lg"></sonic-icon>
-        <br>
+        <br />
         <div class="text-xs mt-1">lg</div>
       </div>
       <div class="text-center">
         <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="xl"></sonic-icon>
-        <br>
+        <br />
         <div class="text-xs mt-1">xl</div>
       </div>
       <div class="text-center">
         <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="2xl"></sonic-icon>
-        <br>
+        <br />
         <div class="text-xs mt-1">2xl</div>
       </div>
       <div class="text-center">
         <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="3xl"></sonic-icon>
-        <br>
+        <br />
         <div class="text-xs mt-1">3xl</div>
       </div>
     </div>
   </template>
 </sonic-code>
 
+## Accessibility
+
+On connect, the host sets **`aria-hidden="true"`**. Treat icons as decorative unless the surrounding control already has an accessible name. Do not rely on **`sonic-icon`** alone for meaning—use visible text or **`aria-label`** on the parent button / link.
+
+<sonic-code>
+  <template>
+    <sonic-button type="neutral" variant="outline" shape="circle" aria-label="Flight details">
+      <sonic-icon library="iconoir" name="airplane"></sonic-icon>
+    </sonic-button>
+  </template>
+</sonic-code>
+
+## API reference
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `name` | string | Icon id in the core bundle or in the remote library |
+| `library` | `heroicons` · `iconoir` · `feathers` · `lucide` · `material` · `fontAwesome` · `custom` | CDN or custom template; omit for bundled core icons |
+| `prefix` | string | Library-specific variant; defaults per library when empty |
+| `size` | `2xs` · `xs` · `sm` · `lg` · `xl` · `2xl` · `3xl` (default `1em`, no attribute) | `em`-based SVG scale on the host |
+
+Ancestor attributes (for **`library="custom"`** only): **`customIconLibraryPath`** (URL template with **`$prefix`** and **`$name`**) and **`customIconDefaultPrefix`**. May be set on **`sonic-scope`**, theme roots, or globally in the document.
+
+No slots — the component inlines fetched or bundled SVG markup.