@supersoniks/concorde 5.0.1 → 5.0.2

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

@@ -4,6 +4,7 @@ import {
   fontSize,
   Size,
 } from "@supersoniks/concorde/core/components/ui/_css/size";
+import { typesBg } from "@supersoniks/concorde/core/components/ui/_css/type";
 
 const tagName = "sonic-badge";
 /**
@@ -15,125 +16,73 @@ const tagName = "sonic-badge";
 export class Badge extends LitElement {
   static styles = [
     fontSize,
+    typesBg,
     css`
       :host {
-        --sc-badge-gap: 0.3em;
-        --sc-badge-py: 0.35em;
-        --sc-badge-px: 0.67em;
-
-        --sc-badge-color: var(--sc-base-content, #000);
-        --sc-badge-bg: var(--sc-base-100, rgba(0, 0, 0, 0.07));
-
-        /*--sc-badge-border-width: var(--sc-form-border-width, 0.1rem);*/
-        --sc-badge-border-width: 1px;
-        --sc-badge-border-color: transparent;
-        --sc-badge-border: var(--sc-badge-border-width) solid
-          var(--sc-badge-border-color);
-
-        --sc-badge-rounded: 0.85em;
-        --sc-badge-fw: var(--sc-font-weight-base, 400);
+        --sc-_gap: 0.3em;
+        --sc-_py: 0.35em;
+        --sc-_px: 0.67em;
+        --sc-_rounded: 0.85em;
+        --sc-_fw: var(--sc-font-weight-base, 400);
+        --sc-_border-width: 1px;
+        --sc-_border-color: transparent;
 
         display: inline-flex;
         align-items: center;
+        gap: var(--sc-_gap);
         box-sizing: border-box;
-        line-height: var(--sc-_lh);
-        border-radius: var(--sc-badge-rounded);
-
-        background: var(--sc-badge-bg);
-        color: var(--sc-badge-color);
-        font-family: var(--sc-badge-ff, var(--sc-font-family-base, sans-serif));
-        font-weight: var(--sc-badge-fw);
-        line-height: 1;
-
-        padding-top: var(--sc-badge-py);
-        padding-bottom: var(--sc-badge-py);
-        padding-left: var(--sc-badge-px);
-        padding-right: var(--sc-badge-px);
-        /**Round pour lissage px */
-        min-height: round(calc(var(--sc-badge-px) * 2), 1px);
-        min-width: round(calc(var(--sc-badge-px) * 2), 1px);
-        border: var(--sc-badge-border);
+        line-height: var(--sc-_lh, 1);
+        border-radius: var(--sc-_rounded);
+        font-family: var(--sc-font-family-base, sans-serif);
+        font-weight: var(--sc-_fw);
+        padding: var(--sc-_py) var(--sc-_px);
+        min-height: round(calc(var(--sc-_px) * 2), 1px);
+        min-width: round(calc(var(--sc-_px) * 2), 1px);
+        border: var(--sc-_border-width) solid var(--sc-_border-color);
         -webkit-print-color-adjust: exact;
       }
 
-      /*TYPES*/
-      :host([type="primary"]) {
-        --sc-badge-color: var(--sc-primary-content, var(--sc-base, #fff));
-        --sc-badge-bg: var(--sc-primary, var(--sc-base-content, #000));
-      } 
-      :host([type="warning"]) {
-        --sc-badge-color: var(--sc-warning-content, var(--sc-base, #fff));
-        --sc-badge-bg: var(--sc-warning, var(--sc-base-content, #000));
-      }
-      :host([type="danger"]) {
-        --sc-badge-color: var(--sc-danger-content, var(--sc-base, #fff));
-        --sc-badge-bg: var(--sc-danger, var(--sc-base-content, #000));
-      }
-      :host([type="info"]) {
-        --sc-badge-color: var(--sc-info-content, var(--sc-base, #fff));
-        --sc-badge-bg: var(--sc-info, var(--sc-base-content, #000));
-      }
-      :host([type="success"]) {
-        --sc-badge-color: var(--sc-success-content, var(--sc-base, #fff));
-        --sc-badge-bg: var(--sc-success, var(--sc-base-content, #000));
-      }
-      :host([type="neutral"]) {
-        --sc-badge-color: var(--sc-base, #fff);
-        --sc-badge-bg: var(--sc-base-content, #000);
-      }
-
-      :host([contrast]),
-      :host([type="contrast"]) {
-        --sc-badge-color: var(--sc-contrast-content, #fff);
-        --sc-badge-bg: var(--sc-contrast, #000);
-      }
-
-      /*SIZE*/
-      :host {
-        gap: var(--sc-badge-gap);
-      }
-
       :host([size="2xs"]),
       :host([size="xs"]),
       :host([size="sm"]) {
-        --sc-badge-gap: 0.35em;
+        --sc-_gap: 0.35em;
       }
 
       :host([size="lg"]),
       :host([size="xl"]) {
         --sc-_lh: 1.2;
-        --sc-badge-gap: 0.5em;
+        --sc-_gap: 0.5em;
       }
 
       /*OUTLINE*/
       :host([variant="outline"][type]) {
-        border-width: var(--sc-badge-border-width) !important;
-        border-color: var(--sc-badge-bg);
-        color: var(--sc-badge-bg);
+        border-width: var(--sc-_border-width) !important;
+        border-color: var(--sc-_bg);
+        color: var(--sc-_bg);
         background: transparent;
       }
 
       :host([variant="outline"][type="default"]) {
-        border-color: var(--sc-base-content, #000);
-        color: var(--sc-base-content, #000);
+        border-color: var(--sc-_color);
+        color: var(--sc-_color);
         background: transparent;
       }
 
       /*GHOST*/
       :host([variant="ghost"][type]) {
-        color: var(--sc-badge-bg);
+        color: var(--sc-_bg);
         background: transparent;
         padding: 0;
       }
 
       @media (forced-colors: active) {
         :host([variant="ghost"][type]) {
-          padding: var(--sc-badge-py) var(--sc-badge-px);
+          padding: var(--sc-_py) var(--sc-_px);
         }
       }
-
+      /* surcharge du default pour le ghost */
       :host([variant="ghost"][type="default"]) {
-        color: var(--sc-badge-color);
+        color: var(--sc-_color);
         background: transparent;
       }
 
@@ -169,7 +118,6 @@ export class Badge extends LitElement {
     | "danger"
     | "success"
     | "info"
-    | "contrast"
     | "neutral" = "default";
   /**
    * Le composant par defaut sans se paramètre à forte afordance

package/src/core/components/ui/button/button.md

@@ -71,6 +71,7 @@ The length of the button depends on the size of its content
   <template>
     <sonic-button loading></sonic-button>
     <sonic-button loading>Loading button</sonic-button>
+    <sonic-button loading><span slot="prefix">🚀</span>Loading with prefix<span slot="suffix">😂</span></sonic-button>
   </template>
 </sonic-code>
 

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

@@ -1,4 +1,6 @@
-import LocationHandler from "@supersoniks/concorde/core/utils/LocationHandler";
+import LocationHandler, {
+  type AutoActiveMode,
+} from "@supersoniks/concorde/core/utils/LocationHandler";
 import { html, LitElement, css, CSSResultGroup } from "lit";
 import {
   customElement,
@@ -381,8 +383,9 @@ export class Button extends FormCheckable(FormElement(LitElement)) {
         position: relative;
       }
 
-      :host([loading]) slot {
-        opacity: 0 !important;
+      :host([loading]) slot,
+      :host([loading]) slot::slotted(*) {
+        visibility: hidden !important;
         pointer-events: none;
       }
       /*Loading*/
@@ -395,8 +398,8 @@ export class Button extends FormCheckable(FormElement(LitElement)) {
         align-items: center;
         justify-content: center;
         line-height: 0;
-        height: var(--sc-btn-ff);
-        width: var(--sc-btn-ff);
+        height: var(--sc-btn-fs);
+        width: var(--sc-btn-fs);
         animation: rotation 2s infinite linear;
       }
 
@@ -479,8 +482,7 @@ export class Button extends FormCheckable(FormElement(LitElement)) {
    * - strict-path-only : l'url courante match exactement avec le path du bouton sans les query params
    * - disabled : aucune activation / désactivation
    */
-  @property({ type: String }) autoActive: "strict" | "partial" | "disabled" =
-    "partial";
+  @property({ type: String }) autoActive: AutoActiveMode = "partial";
 
   /**
    * Laisse apparaitre un loader en remplacement du contenu du bouton.
@@ -627,7 +629,7 @@ export class Button extends FormCheckable(FormElement(LitElement)) {
       flexDirection: this.direction,
       alignItems: this.alignItems,
       justifyContent: this.justify,
-      align: this.align,
+      textAlign: this.align,
       minWidth: this.minWidth,
     };
 
@@ -640,6 +642,7 @@ export class Button extends FormCheckable(FormElement(LitElement)) {
         aria-expanded=${ifDefined(this.sonicAriaExpanded)}
         aria-label=${ifDefined(this.ariaLabel)}
         aria-labelledby=${ifDefined(this.ariaLabelledby)}
+        aria-busy=${ifDefined(this.loading ? "true" : undefined)}
         ?disabled=${this.disabled}
         @click=${this.handleChange}
         @pointerdown=${this.handleRepeatStart}

package/src/core/components/ui/card/card-header.ts

@@ -10,7 +10,7 @@ export class CardHeader extends LitElement {
     css`
       :host {
         --sc-card-header-mb: 1.35rem;
-        --sc-card-header-font-size: 1.875rem;
+        --sc-card-header-font-size: 1.5rem;
         --sc-card-header-font-weight: var(--sc-headings-font-weight, 700);
         --sc-card-header-font-style: var(--sc-headings-font-style, normal);
         --sc-card-header-family: var(
@@ -42,8 +42,13 @@ export class CardHeader extends LitElement {
         flex-shrink: 0;
       }
 
+      ::slotted([slot="suffix"]) {
+        flex-shrink: 0;
+      }
+
+      sonic-card-header-description,
       ::slotted(sonic-card-header-description) {
-        margin-top: 0.1em;
+        margin-top: 0.12em;
       }
     `,
   ];

package/src/core/components/ui/card/card.md

@@ -1,97 +1,152 @@
 # Card
 
+A **surface** for grouped content: padding, radius, shadow, and semantic **`type`** colors via shared theme tokens. Compose **`sonic-card-header`**, **`sonic-card-main`**, and **`sonic-card-footer`** inside the card, or put any markup in the default slot.
+
+Default **`type`** is `base` (page background). Use `light` for a subtle gray panel, `invert` / `neutral` for high-contrast blocks, and `primary`, `info`, `success`, `warning`, or `danger` for tinted surfaces (divider tokens apply on colored types).
+
 ## Type
+
 <sonic-code>
   <template>
-  <div class="grid grid-cols-3 gap-3">
-    <sonic-card type="base">Base</sonic-card>
-    <sonic-card type="light">Light</sonic-card>
-    <sonic-card type="primary">Primary</sonic-card>
-    <sonic-card type="warning">Warning</sonic-card>
-    <sonic-card type="danger">Danger</sonic-card>
-    <sonic-card type="success">Success</sonic-card>
-    <sonic-card type="info">Info</sonic-card>
-    <sonic-card type="neutral">Neutral</sonic-card>
-    <sonic-card type="invert">Invert</sonic-card>
-  </div>
+    <div class="flex flex-wrap gap-3">
+      <sonic-card type="base" class="min-w-[8rem]">Base</sonic-card>
+      <sonic-card type="light" class="min-w-[8rem]">Light</sonic-card>
+      <sonic-card type="primary" class="min-w-[8rem]">Primary</sonic-card>
+      <sonic-card type="info" class="min-w-[8rem]">Info</sonic-card>
+      <sonic-card type="success" class="min-w-[8rem]">Success</sonic-card>
+      <sonic-card type="warning" class="min-w-[8rem]">Warning</sonic-card>
+      <sonic-card type="danger" class="min-w-[8rem]">Danger</sonic-card>
+      <sonic-card type="neutral" class="min-w-[8rem]">Neutral</sonic-card>
+      <sonic-card type="invert" class="min-w-[8rem]">Invert</sonic-card>
+    </div>
   </template>
 </sonic-code>
 
 ## Header
+
+Quick titles with **`label`** and **`description`** attributes, or full control through the default slot. **`slot="suffix"`** aligns badges or actions on the right; suffix content does not shrink when the title wraps.
+
 <sonic-code>
   <template>
-  <div class="grid grid-cols-1 gap-3">
-    <sonic-card >
-      <sonic-card-header label="Header simple, titre géré via l'attribut : label" description="Description via l'attribut : description">
-      </sonic-card-header>
-    </sonic-card>
-    <sonic-card type="neutral">
-      <sonic-card-header label="Header composé">
-        <sonic-card-header-description>Description rendu via le composant : "sonic-card-header-description"</sonic-card-header-description>
-        <div  slot="suffix" class="flex">
-          Suffix
-        </div>
-      </sonic-card-header>
-    </sonic-card>
-    <sonic-card type="invert">
-      <sonic-card-header>
-        <div>Header custom</div>
-        <div class="text-lg text-danger">Tout le contenu excepté l'icône ✈ passe par le slot du header</div>
-        <span slot="suffix" >✈</span>
-      </sonic-card-header>
-    </sonic-card>
-  </div>
+    <div class="grid gap-4 max-w-xl">
+      <sonic-card>
+        <sonic-card-header
+          label="Account settings"
+          description="Manage your profile and preferences."
+        ></sonic-card-header>
+        <p class="m-0 text-sm opacity-80">Body content goes in the card slot or in <code>sonic-card-main</code>.</p>
+      </sonic-card>
+
+      <sonic-card type="neutral">
+        <sonic-card-header label="Notifications">
+          <sonic-card-header-description>
+            Choose what we email you about.
+          </sonic-card-header-description>
+          <sonic-badge slot="suffix"  type="warning" size="xs">3 new</sonic-badge>
+        </sonic-card-header>
+      </sonic-card>
+
+      <sonic-card>
+        <sonic-card-header label="Team workspace" description="Shared with 12 members">
+          <sonic-button
+            slot="suffix"
+            shape="circle"
+            variant="outline"
+            size="sm"
+            type="default"
+            icon
+            data-aria-label="Workspace settings"
+          >
+            <sonic-icon library="iconoir" name="settings"></sonic-icon>
+          </sonic-button>
+        </sonic-card-header>
+      </sonic-card>
+
+      <sonic-card type="primary">
+        <sonic-card-header>
+          <div>Custom header</div>
+          <sonic-card-header-description>
+            Use the header slot when attributes are not enough.
+          </sonic-card-header-description>
+          <sonic-button slot="suffix" shape="circle" variant="ghost" size="sm" type="primary" icon>
+            <sonic-icon library="iconoir" name="nav-arrow-right"></sonic-icon>
+          </sonic-button>
+        </sonic-card-header>
+      </sonic-card>
+    </div>
   </template>
 </sonic-code>
 
+`label` and `description` accept HTML (rendered as markup). Prefer plain text when possible; use the slot for structured content.
+
 ## Main
+
+Optional wrapper for the primary content area (typography, media, forms).
+
 <sonic-code>
   <template>
-  <sonic-card >
-    <sonic-card-main >
-      <h3>Main area</h3>
-      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure id dolor debitis deleniti eligendi natus dolorem a commodi sunt dicta? Ipsa asperiores magni consequuntur dolor voluptatibus. Maxime, nemo? Facere, odio.</p>
-      <iframe width="560" height="315" src="https://www.youtube.com/embed/aqz-KE-bpKQ" title="Big Buck Bunny (Blender Foundation)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-    </sonic-card-main>
-  </sonic-card>
+    <sonic-card class="max-w-xl">
+      <sonic-card-header label="Release notes" description="Version 2.4"></sonic-card-header>
+      <sonic-card-main>
+        <p class="mt-0">
+          Improved performance on large lists and fixed an issue with keyboard navigation in menus.
+        </p>
+        <sonic-divider></sonic-divider>
+        <p class="mb-0 text-sm opacity-80">See the changelog for details.</p>
+      </sonic-card-main>
+    </sonic-card>
   </template>
 </sonic-code>
 
 ## Footer
+
+Optional footer for actions, metadata, or secondary text.
+
 <sonic-code>
   <template>
-  <sonic-card >
-    <sonic-card-footer >
-      <div >
-        <h4 class="mb-0">Footer area</h4>
-        <small>Debitis deleniti eligendi natus dolorem aufdh.</small>
-        <div>
-          🛫 ✈ ✈ ✈ ✈ ✈ 🛬
+    <sonic-card class="max-w-xl">
+      <sonic-card-header label="Confirm deletion"></sonic-card-header>
+      <sonic-card-main>
+        <p class="m-0">This project and all of its data will be removed permanently.</p>
+      </sonic-card-main>
+      <sonic-card-footer>
+      <sonic-divider></sonic-divider>
+        <div class="flex flex-wrap gap-2 justify-end">
+          <sonic-button variant="ghost" size="sm">Cancel</sonic-button>
+          <sonic-button type="danger" size="sm">Delete</sonic-button>
         </div>
-      </div>
-    </sonic-card-footer>
-  </sonic-card>
+      </sonic-card-footer>
+    </sonic-card>
   </template>
 </sonic-code>
 
+## Full example
+
+Header, media, body, and footer together.
 
-## Example of use
 <sonic-code>
   <template>
-  <sonic-card >
-    <sonic-card-header label="Header" description="Header description">
-      <sonic-icon library="iconoir" name="nav-arrow-right" slot="suffix" ></sonic-icon>
-    </sonic-card-header>
-    <sonic-card-main >
-      <sonic-image rounded ratio="11/4" src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg">
-      </sonic-image>
-      <p><b>Main</b> - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure id dolor debitis deleniti eligendi natus dolorem a commodi sunt dicta? Ipsa asperiores magni consequuntur dolor voluptatibus. Maxime, nemo? Facere, odio.</p>
-    </sonic-card-main>
-    <sonic-card-footer>
-      <div>
-        <i>Footer</i> - Amet consectetur adipisicing
-      </div>
-    </sonic-card-footer>
-  </sonic-card>
+    <sonic-card class="max-w-md">
+      <sonic-card-header label="Featured route" description="San Francisco → New York">
+        <sonic-icon slot="suffix" library="iconoir" name="airplane"></sonic-icon>
+      </sonic-card-header>
+      <sonic-card-main>
+        <sonic-image
+          rounded
+          ratio="16/9"
+          src="https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=800&q=80"
+          alt=""
+        ></sonic-image>
+        <p class="mb-0">
+          Nonstop flight with flexible dates. Prices shown include taxes and fees.
+        </p>
+      </sonic-card-main>
+      <sonic-card-footer>
+        <div class="flex items-center justify-between gap-3 flex-wrap">
+          <span class="text-sm font-semibold">From $249</span>
+          <sonic-button type="primary" size="sm">Book</sonic-button>
+        </div>
+      </sonic-card-footer>
+    </sonic-card>
   </template>
 </sonic-code>

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

@@ -6,12 +6,13 @@ import {
   query,
 } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { Size } from "@supersoniks/concorde/core/components/ui/_css/size";
 const tagName = "sonic-divider";
 @customElement(tagName)
 export class Divider extends LitElement {
   static styles = [
     css`
-      :host { 
+      :host {
         --sc-divider-my: 0.5rem;
         --sc-divider-mx: 0;
         --sc-divider-border-width: max(
@@ -150,14 +151,8 @@ export class Divider extends LitElement {
   divider!: HTMLDivElement;
 
   @property({ type: String }) label = "";
-  @property({ type: String, reflect: true }) size?:
-    | "2xs"
-    | "xs"
-    | "sm"
-    | "md"
-    | "lg"
-    | "xl"
-    | "2xl";
+  @property({ type: String, reflect: true }) size?: Size;
+
   @property({ type: String, reflect: true }) align:
     | "left"
     | "right"

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

@@ -6,7 +6,7 @@ export class LegendDescription extends LitElement {
   static styles = [
     css`
       :host {
-        font-size: 1.15rem;
+        font-size: 1.125rem;
         line-height: 1.2;
         display: block;
         color: var(--sc-base-500, var(--sc-base-content, #000));

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

@@ -11,7 +11,7 @@ export class Legend extends LitElement {
   static styles = [
     css`
       :host {
-        --sc-legend-font-size: 1.5rem;
+        --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(

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

@@ -2,7 +2,7 @@
 
 <sonic-button type="info" size="sm" target="_blank" href="https://www.w3schools.com/tags/tag_input.asp#midcontentadcontainer">
   <sonic-icon library="iconoir" name="open-new-window" slot="prefix" ></sonic-icon>
-  Native attibutes list
+  Native attributes list
 </sonic-button>
 
 ## Label

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

@@ -16,7 +16,14 @@ import {
 import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
 import FormInput from "@supersoniks/concorde/core/mixins/FormInput";
 import { classMap } from "lit/directives/class-map.js";
-import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
+import {
+  fontSize,
+  Size,
+} from "@supersoniks/concorde/core/components/ui/_css/size";
+import {
+  resolveUiLabel,
+  uiAriaLabels,
+} from "@supersoniks/concorde/core/components/ui/_i18n/ui-aria-labels";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
 /**
@@ -48,14 +55,7 @@ export class Input extends FormInput(FormElement(LitElement)) {
   /**
    * Taille du composant, implique notamment des modifications de typo et de marge interne
    */
-  @property({ type: String, reflect: true }) size?:
-    | "2xs"
-    | "xs"
-    | "sm"
-    | "md"
-    | "lg"
-    | "xl"
-    | "2xl";
+  @property({ type: String, reflect: true }) size?: Size;
   @property({ type: String }) inputmode?: string;
   @property({ type: String }) list?: string;
   @property({ type: String }) placeholder?: string;
@@ -163,7 +163,7 @@ export class Input extends FormInput(FormElement(LitElement)) {
     if (this.changeTimeoutId) clearTimeout(this.changeTimeoutId);
     this.changeTimeoutId = setTimeout(
       () => super.handleChange(e),
-      parseInt(this.getAttribute("inputDelayMs") || "0")
+      parseInt(this.getAttribute("inputDelayMs") || "0"),
     );
   }
 
@@ -212,8 +212,8 @@ export class Input extends FormInput(FormElement(LitElement)) {
     //let labelStarSuffix = this.label && this.required && this.label.indexOf("*") == -1 ? " *" : "";
     return html`
       <label for="${this.id || "form-element"}" class="${
-      this.hasLabel ? "form-label" : "hidden"
-    }"
+        this.hasLabel ? "form-label" : "hidden"
+      }"
         >${this.label ? unsafeHTML(this.label /*+ labelStarSuffix*/) : ""}<slot
           name="label"
           @slotchange=${this.hasSlotOrProps}
@@ -221,8 +221,8 @@ export class Input extends FormInput(FormElement(LitElement)) {
       ></label>
 
       <div @click=${this.inlineContentFocus} class="form-control ${classMap(
-      slotClasses
-    )}">
+        slotClasses,
+      )}">
         <div part="content" class="${
           this.inlineContent ? "form-element form-element-wrapper" : "contents"
         }">
@@ -263,7 +263,11 @@ export class Input extends FormInput(FormElement(LitElement)) {
                       shape="circle"
                       class="password-toggle"
                       @click=${this.togglePasswordVisibility}
-                      data-aria-label="Toggle password visibility"
+                      .ariaLabel=${resolveUiLabel(
+                        this.isPassword
+                          ? uiAriaLabels.showPassword
+                          : uiAriaLabels.hidePassword,
+                      )}
                       variant="unstyled"
                     >
                       <sonic-icon

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

@@ -2,7 +2,7 @@
 
 <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
+  Native attributes list
 </sonic-button>