@supersoniks/concorde 5.0.4 → 5.0.5

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%;

package/src/core/components/ui/form/form-actions/form-actions.md

@@ -1,77 +1,100 @@
-# Form-actions
+# Form actions
 
-## Left by default
+**`sonic-form-actions`** lays out submit / cancel and other **form footer controls** in a **wrapping flex row** with a small fixed gap. Place it inside **`sonic-form-layout`** (full-width row) or any block that should end with actions. Defaults: **`direction`** `row` · **`justify`** `flex-start` · **`alignItems`** `center`.
+
+## Basic example
+
+With no attributes, actions align to the **start** of the row (typical for left-to-right forms).
 
 <sonic-code>
   <template>
-  <form>
-    <sonic-form-layout>
-      <sonic-input label="First name"></sonic-input>
-      <sonic-input label="Last name"></sonic-input>
-      <sonic-form-actions>
-        <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button> 
-        <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon>  Cancel</sonic-button> 
-      </sonic-form-actions>
-    </sonic-form-layout>
-  </form >
+    <form>
+      <sonic-form-layout>
+        <sonic-input label="First name"></sonic-input>
+        <sonic-input label="Last name"></sonic-input>
+        <sonic-form-actions>
+          <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button>
+          <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon> Cancel</sonic-button>
+        </sonic-form-actions>
+      </sonic-form-layout>
+    </form>
   </template>
 </sonic-code>
 
-## Justify
+## Justify content
+
+**`justify`** maps to CSS **`justify-content`**. Use **`flex-end`** for dialog-style footers or **`center`** for balanced toolbars.
 
 <sonic-code>
   <template>
-  <form>
-    <sonic-form-layout>
-      <sonic-input label="First name"></sonic-input>
-      <sonic-input label="Last name"></sonic-input>
-      <sonic-form-actions justify="flex-end">
-        <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button> 
-        <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon>  Cancel</sonic-button> 
-      </sonic-form-actions>
-    </sonic-form-layout>
-  </form >
+    <form>
+      <sonic-form-layout>
+        <sonic-input label="First name"></sonic-input>
+        <sonic-input label="Last name"></sonic-input>
+        <sonic-form-actions justify="flex-end">
+          <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button>
+          <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon> Cancel</sonic-button>
+        </sonic-form-actions>
+      </sonic-form-layout>
+    </form>
   </template>
 </sonic-code>
 
-## Direction
+## Flex direction
+
+**`direction`** maps to **`flex-direction`**. **`row-reverse`** swaps visual order while keeping DOM order (focus order unchanged).
 
 <sonic-code>
   <template>
-  <form>
-    <sonic-form-layout>
-      <sonic-input label="First name"></sonic-input>
-      <sonic-input label="Last name"></sonic-input>
-      <sonic-form-actions direction="row-reverse">
-        <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button> 
-        <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon>  Cancel</sonic-button> 
-      </sonic-form-actions>
-    </sonic-form-layout>
-  </form >
+    <form>
+      <sonic-form-layout>
+        <sonic-input label="First name"></sonic-input>
+        <sonic-input label="Last name"></sonic-input>
+        <sonic-form-actions direction="row-reverse">
+          <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button>
+          <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon> Cancel</sonic-button>
+        </sonic-form-actions>
+      </sonic-form-layout>
+    </form>
   </template>
 </sonic-code>
 
-## Center
+## Mixed controls
+
+Combine **`sonic-button`** with **`sonic-divider vertical`** or other slotted content. Default **`alignItems`** `center` keeps unlike heights aligned on the cross axis.
 
 <sonic-code>
   <template>
-  <form>
-    <sonic-form-layout>
-      <sonic-input label="First name"></sonic-input>
-      <sonic-input label="Last name"></sonic-input>
-      <sonic-form-actions justify="center" >
-        <sonic-button type="info" minWidth="12rem">
-          <sonic-icon name="nav-arrow-left" library="iconoir" slot="prefix"></sonic-icon>
-          Left seats
-        </sonic-button> 
-        <sonic-divider vertical></sonic-divider>
-        <sonic-button type="info" minWidth="12rem">
-          <sonic-icon name="nav-arrow-right" library="iconoir" slot="suffix"></sonic-icon>
-          Right seats
-        </sonic-button> 
-      </sonic-form-actions>
-    </sonic-form-layout>
-  </form >
+    <form>
+      <sonic-form-layout>
+        <sonic-input label="First name"></sonic-input>
+        <sonic-input label="Last name"></sonic-input>
+        <sonic-form-actions justify="center">
+          <sonic-button type="info" minWidth="12rem">
+            <sonic-icon name="nav-arrow-left" library="iconoir" slot="prefix"></sonic-icon>
+            Left seats
+          </sonic-button>
+          <sonic-divider vertical></sonic-divider>
+          <sonic-button type="info" minWidth="12rem">
+            <sonic-icon name="nav-arrow-right" library="iconoir" slot="suffix"></sonic-icon>
+            Right seats
+          </sonic-button>
+        </sonic-form-actions>
+      </sonic-form-layout>
+    </form>
   </template>
 </sonic-code>
 
+## API reference
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `direction` | `row` (default) · `column` · `row-reverse` · `column-reverse` | Main-axis layout of slotted controls |
+| `justify` | CSS justify-content (default `flex-start`) | Distribution along the main axis |
+| `alignItems` | CSS align-items (default `center`) | Cross-axis alignment when items differ in height |
+
+The component exposes a single unnamed slot; there are no named slots. Slotted nodes use the host’s flex **`gap`** (`0.3rem`) and **`flex-wrap`**.
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Footer actions (**`sonic-button`** and related controls) |

package/src/core/components/ui/form/form-actions/form-actions.ts

@@ -1,6 +1,6 @@
-import {html, LitElement, css} from "lit";
-import {customElement, property} from "lit/decorators.js";
-import {styleMap} from "lit/directives/style-map.js";
+import { html, LitElement, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
 
 const tagName = "sonic-form-actions";
 
@@ -19,13 +19,15 @@ export class FormActions extends LitElement {
     `,
   ];
 
-  @property({type: String}) direction = "row";
-  @property({type: String}) justify = "flex-start";
+  @property({ type: String }) direction = "row";
+  @property({ type: String }) justify = "flex-start";
+  @property({ type: String }) alignItems = "center";
 
   render() {
     const styles = {
       flexDirection: this.direction,
       justifyContent: this.justify,
+      alignItems: this.alignItems,
     };
     return html`<slot style=${styleMap(styles)}></slot>`;
   }

package/src/core/components/ui/form/form-layout/form-layout.md

@@ -1,44 +1,119 @@
-# Form-layout
+# Form layout
+
+**`sonic-form-layout`** arranges slotted form controls in a **responsive CSS grid** with consistent vertical spacing. Pair **`sonic-input`** · **`sonic-select`** and **`sonic-input-autocomplete`** fields side by side when the host is wider than **440px**; **textareas**, **toggles**, **dividers**, and **`sonic-form-actions`** span the full width. Wrap a **`form`** or **`sonic-fieldset`** body—no attributes are required.
+
+## Basic example
+
+Typical registration-style form: short fields flow in two columns on wide layouts; long or grouped blocks stay full width.
+
+<sonic-code>
+  <template>
+    <form>
+      <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-select autocomplete="sex" label="Gender" name="gender">
+          <option value="" selected="selected">— Select —</option>
+          <option value="prefer-not">Prefer not to say</option>
+          <option value="male">Male</option>
+          <option value="female">Female</option>
+        </sonic-select>
+        <sonic-input autocomplete="bday" label="Date of birth" name="birth_date" type="date"></sonic-input>
+        <sonic-divider></sonic-divider>
+        <sonic-input autocomplete="email" label="Email" name="email" type="email"></sonic-input>
+        <sonic-input
+          autocomplete="email"
+          label="Confirm email"
+          name="email_confirmation"
+          type="email"
+        ></sonic-input>
+        <sonic-input autocomplete="new-password" label="Password" name="password" type="password"></sonic-input>
+        <sonic-input
+          autocomplete="new-password"
+          label="Confirm password"
+          name="password_confirmation"
+          type="password"
+        ></sonic-input>
+        <sonic-divider></sonic-divider>
+        <sonic-textarea label="Message" rows="5"></sonic-textarea>
+        <sonic-switch>Enable optional feature</sonic-switch>
+        <sonic-checkbox>Subscribe to newsletter</sonic-checkbox>
+        <sonic-checkbox>
+          I accept the
+          <sonic-link href="#" class="underline">terms and conditions</sonic-link>
+        </sonic-checkbox>
+        <sonic-form-actions>
+          <sonic-button type="success">Submit</sonic-button>
+        </sonic-form-actions>
+      </sonic-form-layout>
+    </form>
+  </template>
+</sonic-code>
+
+## Responsive columns
+
+When the host **`offsetWidth`** is **greater than 440px**, the grid uses **two equal columns** with slightly larger gap (**1.75rem**). Below that breakpoint, fields stack in a **single column** (**1.5rem** gap).
+
+If the slot contains **exactly one** direct **`sonic-input`**, **`sonic-select`**, or **`sonic-input-autocomplete`**, the layout stays **one column** even above the breakpoint so a lone field does not sit in half an empty row.
+
+<sonic-code>
+  <template>
+    <div class="grid gap-8 md:grid-cols-2 mb-6">
+      <div>
+        <sonic-form-layout style="max-width: 20rem">
+        <sonic-divider align="left">Narrow host (single column)</sonic-divider>
+          <sonic-input label="Email" name="email_narrow" type="email"></sonic-input>
+          <sonic-input label="Confirm email" name="email_confirm_narrow" type="email"></sonic-input>
+        </sonic-form-layout>
+      </div>
+    </div>
+    <div>
+      <sonic-form-layout>
+      <sonic-divider align="left">Wide host (two columns for inputs)</sonic-divider>
+        <sonic-input label="Email" name="email_wide" type="email"></sonic-input>
+        <sonic-input label="Confirm email" name="email_confirm_wide" type="email"></sonic-input>
+      </sonic-form-layout>
+    </div>
+  </template>
+</sonic-code>
+
+## Full-width slotted blocks
+
+Everything except **`sonic-input`**, **`sonic-select`**, **`sonic-input-autocomplete`**, and slotted elements with class **`form-item-container`** is assigned **`grid-column: 1 / -1`**. Use this for **`sonic-textarea`**, **`sonic-checkbox`**, **`sonic-switch`**, **`sonic-form-actions`**, **`sonic-divider`**, and similar blocks.
+
+Slotted **`sonic-divider`** sets **`--sc-divider-my: 0`** so divider spacing matches the grid rhythm. Slotted **`sonic-submit`** uses **`display: contents`** so submit controls participate in the grid without an extra wrapper box.
 
 <sonic-code>
   <template>
-  <form>
     <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-divider></sonic-divider>
-      <sonic-textarea label="Message" rows="5">
-      </sonic-textarea>
-      <sonic-switch>Activer une superbe option</sonic-switch>
-      <sonic-checkbox>Inscription à la newsletter</sonic-checkbox>
-      <sonic-checkbox>J'ai lu et accepte les <sonic-link href="#" class="underline">Conditions générales de ventes</sonic-link></sonic-checkbox>
+      <sonic-input label="Subject" name="subject"></sonic-input>
+      <sonic-textarea label="Details" rows="4"></sonic-textarea>
       <sonic-form-actions>
-        <sonic-button type="success">Valider</sonic-button> 
+        <sonic-button type="primary">Send</sonic-button>
       </sonic-form-actions>
     </sonic-form-layout>
-  </form >
   </template>
 </sonic-code>
 
+## Custom column wrapper
+
+Add class **`form-item-container`** on a slotted wrapper (for example a **`div`**) when a field is not a direct **`sonic-input`** / **`sonic-select`** / **`sonic-input-autocomplete`** but should still share the two-column flow with short inputs.
+
+<sonic-code>
+  <template>
+    <sonic-form-layout>
+      <sonic-input label="City" name="city"></sonic-input>
+      <div class="form-item-container">
+        <sonic-input label="Postal code" name="postal_code"></sonic-input>
+      </div>
+    </sonic-form-layout>
+  </template>
+</sonic-code>
+
+## API reference
+
+No public attributes — layout follows slotted children and host width.
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Form fields and blocks in visual order; column vs full-width rules apply per slotted tag or **`form-item-container`** class |

package/src/core/components/ui/form/form-layout/form-layout.ts

@@ -1,14 +1,12 @@
-import {html, LitElement, css} from "lit";
-import {customElement, property, queryAssignedElements} from "lit/decorators.js";
-import {ResizeController} from "@lit-labs/observers/resize-controller.js";
-import {classMap} from "lit/directives/class-map.js";
-
-import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+import { html, LitElement, css } from "lit";
+import { customElement, state, queryAssignedElements } from "lit/decorators.js";
+import { ResizeController } from "@lit-labs/observers/resize-controller.js";
+import { classMap } from "lit/directives/class-map.js";
 
 const tagName = "sonic-form-layout";
 
 @customElement(tagName)
-export class FormLayout extends Subscriber(LitElement) {
+export class FormLayout extends LitElement {
   static styles = [
     css`
       :host {
@@ -17,52 +15,57 @@ export class FormLayout extends Subscriber(LitElement) {
 
       div {
         display: grid;
-        grid-gap: 1.5rem;
+        grid-gap: 1.25rem;
         align-items: flex-start;
       }
 
       .cq--md {
-        grid-gap: 1.75rem;
+        grid-gap: 1.35rem;
         grid-template-columns: repeat(2, minmax(0, 1fr));
       }
       .one-form-element {
         grid-template-columns: 1fr;
       }
-      /*::slotted(sonic-radio),
-      ::slotted(sonic-checkbox),
-      ::slotted(sonic-form-actions),
-      ::slotted(sonic-divider),
-      ::slotted(sonic-textarea) {
-        grid-column: 1 / -1;
-      }*/
       ::slotted(sonic-submit) {
         display: contents;
       }
-      ::slotted(:not(sonic-input):not(sonic-select):not(sonic-input-autocomplete):not(.form-item-container)) {
+      ::slotted(
+        :not(sonic-input):not(sonic-select):not(sonic-input-autocomplete):not(
+            .form-item-container
+          )
+      ) {
         grid-column: 1 / -1;
       }
 
       ::slotted(sonic-divider) {
-        --sc-divider-my: 0;
+        margin-top: 0;
+        margin-bottom: 0;
       }
     `,
   ];
   _resizeController = new ResizeController(this, {});
 
-  @queryAssignedElements({flatten: true}) slottedElements!: HTMLElement[];
-  @property({type: Boolean}) oneFormElement = false;
+  @queryAssignedElements({ flatten: true }) slottedElements!: HTMLElement[];
+  @state() _oneFormElement = false;
 
   onSlotChange() {
     let elements = this.slottedElements;
-    const formElementColumns = ["sonic-input", "sonic-select", "sonic-input-autocomplete", ".form-item-container"];
+    const formElementColumns = [
+      "sonic-input",
+      "sonic-select",
+      "sonic-input-autocomplete",
+      ".form-item-container",
+    ];
     // keep only form elements
-    elements = elements.filter((elt) => formElementColumns.includes(elt.nodeName.toLowerCase()));
-    this.oneFormElement = elements.length == 1;
+    elements = elements.filter((elt) =>
+      formElementColumns.includes(elt.nodeName.toLowerCase()),
+    );
+    this._oneFormElement = elements.length == 1;
   }
   render() {
     const classes = {
       "cq--md": this.offsetWidth > 440,
-      "one-form-element": this.oneFormElement,
+      "one-form-element": this._oneFormElement,
     };
     return html`<div class=${classMap(classes)}>
       <slot @slotchange=${this.onSlotChange}></slot>

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

@@ -84,7 +84,7 @@ export class Textarea extends FormInput(FormElement(LitElement)) {
 
   validateFormElement() {
     const textarea: HTMLTextAreaElement = this.shadowRoot?.querySelector(
-      "textarea"
+      "textarea",
     ) as HTMLTextAreaElement;
     if (!textarea || textarea.checkValidity()) return;
     const formPublisher = this.getFormPublisher();
@@ -103,7 +103,7 @@ export class Textarea extends FormInput(FormElement(LitElement)) {
       <label
         for="${this.id || "form-element"}"
         class="${this.hasLabel ? "form-label" : "hidden"}"
-        >${this.label ? unsafeHTML(this.label /*+ labelStarSuffix*/) : ""}<slot
+        >${this.label ? unsafeHTML(this.label) : ""}<slot
           name="label"
           @slotchange=${this.hasSlotOrProps}
         ></slot
@@ -115,6 +115,8 @@ export class Textarea extends FormInput(FormElement(LitElement)) {
           id="${this.id || "form-element"}"
           @input=${this.handleChange}
           @blur=${this.handleBlur}
+          .name=${this.name}
+          .value=${this.value}
           ?disabled=${this.disabled}
           ?required=${this.required}
           ?autofocus=${this.autofocus}
@@ -123,7 +125,6 @@ export class Textarea extends FormInput(FormElement(LitElement)) {
           maxlength=${ifDefined(this.maxlength)}
           minlength=${ifDefined(this.minlength)}
           ?readonly=${this.readonly}
-          spellcheck=${ifDefined(this.spellcheck)}
           autocomplete=${ifDefined(this.autocomplete)}
           tabindex=${ifDefined(this.tabindex)}
           wrap=${ifDefined(this.wrap)}