@supersoniks/concorde 5.0.3 → 5.0.5

package/src/core/components/ui/divider/divider.ts

@@ -1,16 +1,24 @@
-import { html, LitElement, css } from "lit";
+import { html, LitElement, css, PropertyValues, nothing } from "lit";
 import {
   customElement,
   property,
   queryAssignedNodes,
-  query,
+  state,
 } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { Size } from "@supersoniks/concorde/core/components/ui/_css/size";
+import { Align } from "@supersoniks/concorde/core/components/ui/_css/align";
+import {
+  fontSize,
+  Size,
+} from "@supersoniks/concorde/core/components/ui/_css/size";
+
+export type DividerLineStyle = "solid" | "dashed" | "dotted";
+
 const tagName = "sonic-divider";
 @customElement(tagName)
 export class Divider extends LitElement {
   static styles = [
+    fontSize,
     css`
       :host {
         --sc-divider-my: 0.5rem;
@@ -20,15 +28,13 @@ export class Divider extends LitElement {
           var(--sc-border-width, max(1px, 0.12rem))
         );
         --sc-divider-border-color: var(--sc-border-color);
-        --sc-divider-border-style: solid;
+        --sc-_border-style: solid;
         --sc-divider-color: currentColor;
         --sc-divider-ff: var(--sc-font-family-base, sans-serif);
-        --sc-divider-fs: 1rem;
         --sc-divider-fw: var(--sc-font-weight-base, 400);
         --sc-divider-fst: var(--sc-font-style-base, normal);
 
         margin: var(--sc-divider-my) var(--sc-divider-mx);
-        font-size: var(--sc-divider-fs);
         font-style: var(--sc-divider-fst);
         font-family: var(--sc-divider-ff);
         font-weight: var(--sc-divider-fw);
@@ -39,17 +45,14 @@ export class Divider extends LitElement {
       /*SIZE*/
       :host([size="2xs"]) {
         --sc-divider-my: 0.35rem;
-        --sc-divider-fs: 0.68rem;
       }
 
       :host([size="xs"]) {
         --sc-divider-my: 0.5rem;
-        --sc-divider-fs: 0.75rem;
       }
 
       :host([size="sm"]) {
         --sc-divider-my: 0.75rem;
-        --sc-divider-fs: 0.875rem;
       }
 
       :host([size="md"]) {
@@ -78,8 +81,8 @@ export class Divider extends LitElement {
       div::after {
         content: "";
         flex-grow: 1;
-        border-top: var(--sc-divider-border-width)
-          var(--sc-divider-border-style) var(--sc-divider-border-color);
+        border-top: var(--sc-divider-border-width) var(--sc-_border-style)
+          var(--sc-divider-border-color);
         width: 100%;
         opacity: var(--sc-divider-opacity, 1);
       }
@@ -110,8 +113,8 @@ export class Divider extends LitElement {
       :host([vertical]) div::before,
       :host([vertical]) div::after {
         border-top: none;
-        border-left: var(--sc-divider-border-width)
-          var(--sc-divider-border-style) var(--sc-divider-border-color);
+        border-left: var(--sc-divider-border-width) var(--sc-_border-style)
+          var(--sc-divider-border-color);
         width: auto;
         height: 100%;
         opacity: var(--sc-divider-opacity, 1);
@@ -131,48 +134,52 @@ export class Divider extends LitElement {
       .no-text .text {
         display: none;
       }
+      .no-text::after {
+        display: none;
+      }
 
       .has-text {
         gap: 0.5rem;
       }
 
-      :host([dotted]) {
-        --sc-divider-border-style: dotted;
+      :host([linestyle="dashed"]) {
+        --sc-_border-style: dashed;
       }
-      :host([dashed]) {
-        --sc-divider-border-style: dashed;
+
+      :host([linestyle="dotted"]) {
+        --sc-_border-style: dotted;
       }
     `,
   ];
   @queryAssignedNodes({ flatten: true })
   slotNodes!: Array<Node>;
 
-  @query("div")
-  divider!: HTMLDivElement;
+  @state() hasText = false;
 
   @property({ type: String }) label = "";
   @property({ type: String, reflect: true }) size?: Size;
 
-  @property({ type: String, reflect: true }) align:
-    | "left"
-    | "right"
-    | "center" = "center";
+  @property({ type: String, reflect: true }) align: Align = "center";
   @property({ type: Boolean, reflect: true }) vertical = false;
   @property({ type: Boolean, reflect: true }) noMargin = false;
-  @property({ type: Boolean, reflect: true }) dashed = false;
-  @property({ type: Boolean, reflect: true }) dotted = false;
-
-  firstUpdated(changedProperties: Map<string | number | symbol, unknown>) {
-    super.firstUpdated(changedProperties);
-    if (this.label || this.slotNodes?.length) {
-      this.divider?.classList.add("has-text");
-    }
+  @property({ type: String, reflect: true })
+  lineStyle: DividerLineStyle = "solid";
+
+  willUpdate(changedProperties: PropertyValues) {
+    super.willUpdate(changedProperties);
+    this.syncHasText();
+  }
+
+  syncHasText() {
+    this.hasText = !!(this.label || this.slotNodes?.length);
   }
 
   render() {
-    return html`<div part="divider">
+    return html`<div class="${this.hasText ? "has-text" : "no-text"}">
       <span class="text"
-        >${unsafeHTML(this.label ? this.label : "")}<slot></slot
+        >${unsafeHTML(this.label ? this.label : nothing)}<slot
+          @slotchange=${this.syncHasText}
+        ></slot
       ></span>
     </div>`;
   }

package/src/core/components/ui/form/fieldset/fieldset.md

@@ -1,129 +1,205 @@
 # Fieldset
 
-## Variant
+**`sonic-fieldset`** groups related form controls with a bordered container and an accessible **`<fieldset>`** semantics layer. Put fields in the **default slot**; add a title with **`sonic-legend`** or the shorthand **`label`** / **`description`** / **`iconName`** attributes. Default **`variant`** is `default`. Pair the body with **`sonic-form-layout`** for responsive columns.
+
+## Basic example
+
 <sonic-code>
   <template>
-    <sonic-fieldset variant="default" >
-      Default
+    <sonic-fieldset>
+      <sonic-legend label="Contact details"></sonic-legend>
+      <sonic-form-layout>
+        <sonic-input autocomplete="email" label="Email" name="email" type="email"></sonic-input>
+        <sonic-input autocomplete="tel" label="Phone" name="phone" type="tel"></sonic-input>
+      </sonic-form-layout>
     </sonic-fieldset>
-    <sonic-fieldset variant="ghost" >
-      Ghost
-    </sonic-fieldset>
-    <sonic-fieldset variant="shadow" >
-      Shadow
+  </template>
+</sonic-code>
+
+## Variant
+
+**`ghost`** and **`shadow`** use a transparent border; **`shadow`** also applies **`--sc-shadow-lg`**.
+
+<sonic-code>
+  <template>
+    <div class="grid gap-4">
+      <sonic-fieldset variant="default">
+        <sonic-legend label="Default"></sonic-legend>
+        <sonic-input label="Field" name="a"></sonic-input>
+      </sonic-fieldset>
+      <sonic-fieldset variant="ghost">
+        <sonic-legend label="Ghost"></sonic-legend>
+        <sonic-input label="Field" name="b"></sonic-input>
+      </sonic-fieldset>
+      <sonic-fieldset variant="shadow">
+        <sonic-legend label="Shadow"></sonic-legend>
+        <sonic-input label="Field" name="c"></sonic-input>
+      </sonic-fieldset>
+    </div>
+  </template>
+</sonic-code>
+
+## Tight layout
+
+Set **`tight`** to remove horizontal padding and side borders (flat strip inside a parent).
+
+<sonic-code>
+  <template>
+    <sonic-fieldset tight variant="ghost">
+      <sonic-legend label="Tight fieldset"></sonic-legend>
+      <sonic-input label="Field" name="tight"></sonic-input>
     </sonic-fieldset>
   </template>
 </sonic-code>
 
 ## Legend
+
+Use **`sonic-legend`** for the group title. Set **`label`** and **`description`** for simple copy, or use the **default slot** for custom markup. Add secondary text with **`sonic-legend-description`**. Place actions in **`slot="suffix"`** on the legend.
+
+Attribute values on **`sonic-legend`** are rendered as HTML—use only trusted content.
+
+<sonic-code>
+  <template>
+    <div class="grid gap-4">
+      <sonic-fieldset>
+        <sonic-legend label="Attributes" description="Short description via attributes"></sonic-legend>
+        <sonic-input label="Field" name="attr"></sonic-input>
+      </sonic-fieldset>
+      <sonic-fieldset>
+        <sonic-legend iconLibrary="iconoir" iconName="pin-alt">
+          Custom title in the default slot
+          <sonic-legend-description>Description via sonic-legend-description</sonic-legend-description>
+        </sonic-legend>
+        <sonic-input label="Field" name="slot"></sonic-input>
+      </sonic-fieldset>
+    </div>
+  </template>
+</sonic-code>
+
+## Shorthand legend on the fieldset
+
+When **`label`** is set on **`sonic-fieldset`**, the component renders **`sonic-legend`** for you. Pass **`description`** **`iconName`** **`iconLibrary`** and **`iconPrefix`** the same way. Do not combine shorthand **`label`** with a separate slotted **`sonic-legend`**—you will get two legends.
+
 <sonic-code>
   <template>
-  <sonic-fieldset>
-    <sonic-legend label="Legend via attribut : label" description="Description via attribut : description">
-    </sonic-legend>
-  </sonic-fieldset>
-  <sonic-fieldset>
-    <sonic-legend iconLibrary="iconoir"  iconName="pin-alt">
-      Custom legend via <b>slot</b>
-      <sonic-legend-description>
-        Description via composant : sonic-legend-description
-      </sonic-legend-description>
-    </sonic-legend>
-  </sonic-fieldset>
+    <sonic-fieldset
+      label="Account"
+      description="Basic profile fields"
+      iconLibrary="iconoir"
+      iconName="user"
+    >
+      <sonic-input label="Display name" name="display_name"></sonic-input>
+    </sonic-fieldset>
   </template>
 </sonic-code>
 
+## Legend actions
+
+Use **`slot="suffix"`** on **`sonic-legend`** for menus or icon buttons aligned to the end of the legend row.
 
-## Short hand
 <sonic-code>
   <template>
-  <sonic-fieldset
-    label="All props on fieldset tag"
-    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-    iconLibrary="iconoir"
-    iconName="user">
-  </sonic-fieldset>
+    <sonic-fieldset>
+      <sonic-legend label="Personal information">
+        <sonic-pop class="inline-block" slot="suffix">
+          <sonic-button shape="circle" variant="ghost">
+            <sonic-icon library="iconoir" size="lg" name="more-vert"></sonic-icon>
+          </sonic-button>
+          <sonic-menu slot="content" minWidth="12rem">
+            <sonic-menu-item>Legal notice</sonic-menu-item>
+            <sonic-menu-item>Terms of use</sonic-menu-item>
+          </sonic-menu>
+        </sonic-pop>
+      </sonic-legend>
+      <sonic-form-layout>
+        <sonic-input autocomplete="family-name" label="Last name" name="last_name"></sonic-input>
+        <sonic-input autocomplete="given-name" label="First name" name="first_name"></sonic-input>
+      </sonic-form-layout>
+    </sonic-fieldset>
   </template>
 </sonic-code>
 
-## Example of use
+## Form association and disabled state
+
+### Associating a distant `form`
+
+Set **`form`** on **`sonic-fieldset`** to the **`id`** of a **`<form>`** elsewhere in the page (same as the native **`form`** attribute on **`<fieldset>`**). Named fields in the fieldset then belong to that form for submit and constraint validation—for example a toolbar **`form`** and a field group rendered lower on the layout.
+
 <sonic-code>
   <template>
-  <sonic-div formDataProvider="user_create">
-    <form action="/inscription?lang=fr" method="POST" class="mb-20" accept-charset="UTF-8" id="youpla">
-      <sonic-fieldset form="formid" collapsible="true" collapsed="false">
-        <sonic-legend iconLibrary="iconoir"  iconName="user">
-          Informations personnelles
-          <span slot="description">Description du fieldset lorem ipsum dolor</span>
-          <sonic-pop class="inline-block" slot="suffix">
-            <sonic-button shape="circle" variant="ghost">
-              <sonic-icon library="iconoir" size="lg" name="more-vert"></sonic-icon
-            ></sonic-button>
-            <sonic-menu slot="content" minWidth="12rem">
-              <sonic-menu-item>Mentions légales</sonic-menu-item>
-              <sonic-menu-item>Conditions générales d'utilisation</sonic-menu-item>
-            </sonic-menu>
-          </sonic-pop>
-        </sonic-legend>
+    <div class="grid gap-4">
+      <form id="billing-form" class="flex flex-wrap items-center gap-2">
+        <sonic-button submit type="primary">Save billing</sonic-button>
+      </form>
+      <sonic-fieldset form="billing-form" label="Billing address">
         <sonic-form-layout>
-          <sonic-input autocomplete="family-name" label="Nom" name="nom"></sonic-input>
-          <sonic-input autocomplete="given-name" label="Prénom" name="prenom"></sonic-input>
-          <sonic-select autocomplete="sex" label="Sexe" name="sexe">
-            <option value="" selected="selected">- Sélectionner -</option>
-            <option value="-">Je préfère ne pas le dire</option>
-            <option value="Homme">Homme</option>
-            <option value="Femme">Femme</option>
-          </sonic-select>
-          <sonic-input autocomplete="bday" label="Date de naissance" name="date_naissance" type="date"></sonic-input>
-          <sonic-divider></sonic-divider>
-          <sonic-input autocomplete="email" label="e-mail" name="email" type="email"></sonic-input>
-          <sonic-input
-            autocomplete="email"
-            label="Confirmer votre e-mail"
-            name="email_confirmation"
-            type="email"
-          ></sonic-input>
-          <sonic-input autocomplete="new-password" label="Mot de passe" name="password" type="password"></sonic-input>
-          <sonic-input
-            autocomplete="new-password"
-            label="Confirmer votre mot de passe"
-            name="password_confirmation"
-            type="password"
-          ></sonic-input>
+          <sonic-input label="Street" name="street" autocomplete="street-address"></sonic-input>
+          <sonic-input label="Postal code" required name="postal_code" autocomplete="postal-code"></sonic-input>
+          <sonic-input label="City" name="city" autocomplete="address-level2"></sonic-input>
         </sonic-form-layout>
       </sonic-fieldset>
-      <sonic-fieldset form="formid" collapsible="true" collapsed="false">
-        <sonic-legend iconLibrary="iconoir"  iconName="pin-alt"> Coordonnées </sonic-legend>
-        <sonic-form-layout>
-          <sonic-input autocomplete="postal-code" label="Code postal" name="cp"></sonic-input>
-          <sonic-input autocomplete="address-level2" label="Ville" name="ville"></sonic-input>
-        </sonic-form-layout>
+    </div>
+  </template>
+</sonic-code>
+
+### Disabling a group
+
+Set **`disabled`** on **`sonic-fieldset`** to disable the inner **`<fieldset>`** and every control in the group (same as a native fieldset). Use it for read-only steps or sections gated by permissions.
+
+<sonic-code>
+  <template>
+    <div class="grid gap-4">
+      <sonic-fieldset label="Editable">
+        <sonic-input label="Display name" name="display_name"></sonic-input>
+      </sonic-fieldset>
+      <sonic-fieldset label="Locked" disabled>
+        <sonic-input label="Account ID" name="account_id" value="acct_42"></sonic-input>
       </sonic-fieldset>
-      <div class="">
-        <sonic-button submit type="primary">
-          <sonic-icon  library="iconoir" name="check"></sonic-icon>
-          S'inscrire
-        </sonic-button>
-        <sonic-tooltip class="inline-flex" label="Vous êtes sûr(e) ? 🙄">
-          <sonic-button size="sm" variant="ghost"> Continuer sans m'inscrire </sonic-button>
-        </sonic-tooltip>
-      </div>
-    </form>
-    <div dataProvider="user_create" class="my-6 text-neutral-600 p-5 rounded-xl shadow-lg">
-       <div class="font-bold text-lg text-neutral-400">Submitted informations...</div>
-      <div class="text-lg my-2">
-        <sonic-value key="nom" class="font-bold"></sonic-value>
-        <sonic-value key="prenom"></sonic-value>
-      </div>
-      <div class="text-sm">
-        <sonic-value key="sexe"></sonic-value>
-        <sonic-value key="date_naissance"></sonic-value>
-      </div>
-      <div class="text-sm">
-        <sonic-value key="email"></sonic-value>
-        <sonic-value key="cp"></sonic-value>
-        <sonic-value key="ville"></sonic-value></div>
     </div>
-  </sonic-div>
   </template>
 </sonic-code>
+
+## Accessibility
+
+The inner **`<fieldset>`** carries grouping semantics. **`disabled`** is applied on that element so nested controls are disabled in the usual way. **`sonic-legend`** renders a native **`<legend>`** for the group label.
+
+## API reference
+
+### `sonic-fieldset`
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `variant` | `default` · `ghost` · `shadow` (default `default`) | Border and shadow treatment |
+| `tight` | boolean | Removes horizontal padding and side borders |
+| `label` | string | Shorthand legend title; renders **`sonic-legend`** when set |
+| `description` | string | Shorthand legend description (HTML) |
+| `iconName` | string | Shorthand legend icon **`name`** |
+| `iconLibrary` | string | Shorthand legend icon **`library`** |
+| `iconPrefix` | string | Shorthand legend icon **`prefix`** |
+| `disabled` | boolean | Disables the native **`<fieldset>`** and its controls |
+| `form` | string | **`id`** of an associated **`form`** |
+| `dataProvider` | string | Subscriber key; can autofill properties that match publisher fields (e.g. **`label`**) |
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Legend (optional) and field group content in visual order |
+
+### `sonic-legend`
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `label` | string | Title HTML when not using the default slot |
+| `description` | string | Description HTML (wrapped in **`sonic-legend-description`**) |
+| `iconName` | string | Leading **`sonic-icon`** **`name`** |
+| `iconLibrary` | string | Icon **`library`** |
+| `iconPrefix` | string | Icon **`prefix`** |
+| `forceAutoFill` | boolean | Allows Subscriber autofill to override attribute-backed **`label`** / **`description`** |
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Legend title and description components |
+| `suffix` | Trailing actions (menus, icon buttons) |
+
+### `sonic-legend-description`
+
+Muted description line below the legend title. No attributes—project content through the **default slot**.

package/src/core/components/ui/form/fieldset/fieldset.ts

@@ -11,19 +11,18 @@ export class Fieldset extends Subscriber(LitElement) {
   static styles = [
     css`
       :host {
-        --sc-fieldset-mt: 0;
-        --sc-fieldset-mb: 1rem;
-        --sc-fieldset-border-color: var(--sc-border-color);
-        --sc-fieldset-border-width: var(--sc-form-border-width);
-        --sc-fieldset-px: 1.25rem;
-        --sc-fieldset-py: 1.8rem;
+        --sc-_mt: 0;
+        --sc-_mb: 1rem;
+        --sc-_border-color: var(--sc-border-color);
+        --sc-_border-width: var(--sc-form-border-width);
+        --sc-_px: 1.25rem;
+        --sc-_py: 1.8rem;
 
-        margin-top: var(--sc-fieldset-mt);
-        margin-bottom: var(--sc-fieldset-mb);
+        margin-top: var(--sc-_mt);
+        margin-bottom: var(--sc-_mb);
         display: block;
-        border: var(--sc-fieldset-border-width) solid
-          var(--sc-fieldset-border-color) !important;
-        padding: var(--sc-fieldset-py) var(--sc-fieldset-px);
+        border: var(--sc-_border-width) solid var(--sc-_border-color) !important;
+        padding: var(--sc-_py) var(--sc-_px);
         border-radius: var(--sc-rounded-lg);
       }
 
@@ -34,15 +33,14 @@ export class Fieldset extends Subscriber(LitElement) {
 
       :host([variant="shadow"]),
       :host([variant="ghost"]) {
-        --sc-fieldset-border-color: transparent;
+        --sc-_border-color: transparent;
       }
       :host([variant="shadow"]) {
-        --sc-fieldset-border-color: transparent;
         box-shadow: var(--sc-shadow-lg);
       }
 
       :host([tight]) {
-        --sc-fieldset-px: 0;
+        --sc-_px: 0;
         border-left: none !important;
         border-right: none !important;
         border-radius: 0;
@@ -61,15 +59,7 @@ export class Fieldset extends Subscriber(LitElement) {
     `,
   ];
 
-  // @property({ type: String }) label: String = "";
-
-  /**
-   * Désactiver le fieldset
-   */
-  @property({ type: Boolean, reflect: true }) disabled: true | false = false;
-  /**
-   * Lier à un formulaire qui ne serait pas parent du fieldset
-   */
+  @property({ type: Boolean, reflect: true }) disabled = false;
   @property({ type: String }) form?: string;
 
   @property({ type: String }) label?: string;
@@ -86,12 +76,9 @@ export class Fieldset extends Subscriber(LitElement) {
     | "shadow" = "default";
 
   render() {
-    return html`<fieldset
-      form="${ifDefined(this.form)}"
-      ?disabled="${this.disabled}"
-    >
+    return html`<fieldset form="${ifDefined(this.form)}" ?disabled="${this.disabled}">
       ${this.label
-        ? html` <sonic-legend
+        ? html`<sonic-legend
             label=${ifDefined(this.label)}
             description=${ifDefined(this.description)}
             iconName=${ifDefined(this.iconName)}

package/src/core/components/ui/form/fieldset/legend.ts

@@ -11,15 +11,15 @@ export class Legend extends LitElement {
   static styles = [
     css`
       :host {
-        --sc-legend-font-size: 1.25rem;
-        --sc-legend-font-weight: var(--sc-font-weight-base, 400);
-        --sc-legend-font-style: var(--sc-headings-font-style, normal);
-        --sc-legend-family: var(
+        --sc-_font-size: 1.25rem;
+        --sc-_font-weight: var(--sc-font-weight-base, 400);
+        --sc-_font-style: var(--sc-headings-font-style, normal);
+        --sc-_font-family: var(
           --sc-headings-font-family,
           var(--sc-font-family-base, sans-serif)
         );
-        --sc-legend-line-height: var(--sc-headings-line-height, 1.1);
-        --sc-legend-color: var(--sc-base-content, #000);
+        --sc-_line-height: var(--sc-headings-line-height, 1.1);
+        --sc-_color: var(--sc-base-content, #000);
         display: flex;
         width: 100%;
         container-type: inline-size;
@@ -27,16 +27,16 @@ export class Legend extends LitElement {
 
       @container (max-inline-size: 28rem) {
         legend {
-          --sc-legend-font-size: 1.3rem;
+          --sc-_font-size: 1.3rem;
         }
       }
       legend {
-        font-size: var(--sc-legend-font-size);
-        font-weight: var(--sc-legend-font-weight);
-        font-style: var(--sc-legend-font-style);
-        font-family: var(--sc-legend-font-family);
-        line-height: var(--sc-legend-line-height);
-        color: var(--sc-legend-color);
+        font-size: var(--sc-_font-size);
+        font-weight: var(--sc-_font-weight);
+        font-style: var(--sc-_font-style);
+        font-family: var(--sc-_font-family);
+        line-height: var(--sc-_line-height);
+        color: var(--sc-_color);
         padding: 0;
         display: flex;
         width: 100%;