@supersoniks/concorde 4.9.98-visual-stack.1 → 4.9.98-visual-stack.2

package/src/core/components/ui/alert-messages/alert-messages.ts

@@ -4,7 +4,6 @@ import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import { Message } from "@supersoniks/concorde/core/_types/types";
 import { map } from "lit/directives/map.js";
 import { Size } from "@supersoniks/concorde/core/components/ui/_css/size";
-
 import { ifDefined } from "lit/directives/if-defined.js";
 import { APIResult } from "@supersoniks/concorde/core/components/ui/toast/message-subscriber";
 
@@ -37,6 +36,7 @@ export class AlertMessages extends Subscriber(LitElement, {} as APIResult) {
       ${map(this.messages, (message) => {
         if (message.type == "public") {
           return html`<sonic-alert
+            announce
             status=${message.status || "default"}
             text=${ifDefined(message.content)}
             size=${this.size}

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

@@ -1,127 +1,175 @@
 # Badge
 
+A **non-interactive** pill for labels, counts, or highlights (counter, status, category). The API mirrors `sonic-button` (`type`, `variant`, `size`) without focus or click states.
+
+Colors come from theme tokens (`--sc-primary`, `--sc-danger`, …) or the semantic `type` values below. 
+
 ## Type
+
+`default` — subtle background (`base-100`). `neutral` — dark fill (`base-content`) with light text, useful on light backgrounds.
+
 <sonic-code>
   <template>
-  <sonic-badge>Default</sonic-badge>
-  <sonic-badge type="primary">Primary</sonic-badge>
-  <sonic-badge type="neutral">Neutral</sonic-badge>
-  <sonic-badge type="warning">Warning</sonic-badge>
-  <sonic-badge type="info">Info</sonic-badge>
-  <sonic-badge type="success">Success</sonic-badge>
-  <sonic-badge type="danger">Danger</sonic-badge>
-  <sonic-badge type="contrast">Contrast</sonic-badge>
+    <div class="flex flex-wrap gap-2">
+      <sonic-badge>Default</sonic-badge>
+      <sonic-badge type="primary">Primary</sonic-badge>
+      <sonic-badge type="neutral">Neutral</sonic-badge>
+      <sonic-badge type="warning">Warning</sonic-badge>
+      <sonic-badge type="info">Info</sonic-badge>
+      <sonic-badge type="success">Success</sonic-badge>
+      <sonic-badge type="danger">Danger</sonic-badge>
+    </div>
   </template>
 </sonic-code>
 
+## Variant
+
+`outline` — border and text in the `type` color. `ghost` — text only, no padding (except in forced-colors mode).
 
 ## Outline
+
 <sonic-code>
   <template>
-  <div class="flex items-center flex-wrap gap-3">
-    <sonic-badge variant="outline">Default</sonic-badge>
-    <sonic-badge variant="outline" type="primary">Primary</sonic-badge>
-    <sonic-badge variant="outline" type="neutral">Neutral</sonic-badge>
-    <sonic-badge variant="outline" type="warning">Warning</sonic-badge>
-    <sonic-badge variant="outline" type="info">Info</sonic-badge>
-    <sonic-badge variant="outline" type="success">Success</sonic-badge>
-    <sonic-badge variant="outline" type="danger">Danger</sonic-badge>
-    <sonic-badge variant="outline" type="contrast">Contrast</sonic-badge>
-  </div>
+    <div class="flex items-center flex-wrap gap-3">
+      <sonic-badge variant="outline">Default</sonic-badge>
+      <sonic-badge variant="outline" type="primary">Primary</sonic-badge>
+      <sonic-badge variant="outline" type="neutral">Neutral</sonic-badge>
+      <sonic-badge variant="outline" type="warning">Warning</sonic-badge>
+      <sonic-badge variant="outline" type="info">Info</sonic-badge>
+      <sonic-badge variant="outline" type="success">Success</sonic-badge>
+      <sonic-badge variant="outline" type="danger">Danger</sonic-badge>
+    </div>
   </template>
 </sonic-code>
 
 ## Ghost
+
 <sonic-code>
   <template>
     <div class="flex items-center flex-wrap gap-3">
-    <sonic-badge variant="ghost">Default</sonic-badge>
-    <sonic-badge variant="ghost" type="primary">Primary</sonic-badge>
-    <sonic-badge variant="ghost" type="neutral">Neutral</sonic-badge>
-    <sonic-badge variant="ghost" type="warning">Warning</sonic-badge>
-    <sonic-badge variant="ghost" type="info">Info</sonic-badge>
-    <sonic-badge variant="ghost" type="success">Success</sonic-badge>
-    <sonic-badge variant="ghost" type="danger">Danger</sonic-badge>
-    <sonic-badge variant="ghost" type="contrast">Contrast</sonic-badge>
-  </div>
+      <sonic-badge variant="ghost">Default</sonic-badge>
+      <sonic-badge variant="ghost" type="primary">Primary</sonic-badge>
+      <sonic-badge variant="ghost" type="neutral">Neutral</sonic-badge>
+      <sonic-badge variant="ghost" type="warning">Warning</sonic-badge>
+      <sonic-badge variant="ghost" type="info">Info</sonic-badge>
+      <sonic-badge variant="ghost" type="success">Success</sonic-badge>
+      <sonic-badge variant="ghost" type="danger">Danger</sonic-badge>
+    </div>
   </template>
 </sonic-code>
 
 ## Size
+
+Default size is `md` (omit the `size` attribute). Typography and padding follow `sonic-button`.
+
 <sonic-code>
   <template>
-  <sonic-badge size="2xs">2Xs badge</sonic-badge>
-  <sonic-badge size="xs">Xs badge</sonic-badge>
-  <sonic-badge size="sm">Sm badge</sonic-badge>
-  <sonic-badge>Md badge</sonic-badge>
-  <sonic-badge size="lg">Lg badge</sonic-badge>
-  <sonic-badge size="xl">Xl badge</sonic-badge>
-  <sonic-badge size="2xl">2Xl badge</sonic-badge>
+    <div class="flex flex-wrap items-center gap-2">
+      <sonic-badge size="2xs">2Xs</sonic-badge>
+      <sonic-badge size="xs">Xs</sonic-badge>
+      <sonic-badge size="sm">Sm</sonic-badge>
+      <sonic-badge>Md</sonic-badge>
+      <sonic-badge size="lg">Lg</sonic-badge>
+      <sonic-badge size="xl">Xl</sonic-badge>
+      <sonic-badge size="2xl">2Xl</sonic-badge>
+    </div>
   </template>
 </sonic-code>
 
+## Prefix and suffix slots
+
+Icons or short text before / after the main label.
 
-## Empty badges
 <sonic-code>
   <template>
-  <div class="flex items-center flex-wrap gap-3">
-    <sonic-badge type="danger" size="2xs"></sonic-badge>
-    <sonic-badge type="danger" size="xs"></sonic-badge>
-    <sonic-badge type="danger" size="sm"></sonic-badge>
-    <sonic-badge type="danger"></sonic-badge>
-    <sonic-badge type="danger" size="lg"></sonic-badge>
-    <sonic-badge type="danger" size="xl"></sonic-badge>
-    <sonic-badge type="danger" size="2xl"></sonic-badge>
-  </div>
+    <sonic-badge type="info" size="sm">
+      <sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon>
+      Info
+    </sonic-badge>
+    <sonic-badge type="success">
+      Verified
+      <sonic-icon slot="suffix" name="check" library="iconoir"></sonic-icon>
+    </sonic-badge>
   </template>
 </sonic-code>
 
+## Empty badges
+
+Badge with no text (visual dot). `min-width` / `min-height` keep a readable shape.
+
+<sonic-code>
+  <template>
+    <div class="flex items-center flex-wrap gap-3">
+      <sonic-badge type="danger" size="2xs"></sonic-badge>
+      <sonic-badge type="danger" size="xs"></sonic-badge>
+      <sonic-badge type="danger" size="sm"></sonic-badge>
+      <sonic-badge type="danger"></sonic-badge>
+      <sonic-badge type="danger" size="lg"></sonic-badge>
+      <sonic-badge type="danger" size="xl"></sonic-badge>
+      <sonic-badge type="danger" size="2xl"></sonic-badge>
+    </div>
+  </template>
+</sonic-code>
 
 ## Ellipsis
+
+With `ellipsis`, long labels truncate. The parent must constrain width (`max-width`, grid, etc.).
+
 <sonic-code>
   <template>
-    <div class="grid grid-cols-3 gap-4" >
-        <sonic-badge ellipsis size="sm" variant="outline"  >
-        <sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon> Lorem ipsum dolor sit consectetur adipiscing elit. Lorem ipsum dolor sit consectetur adipiscing elit.</sonic-badge>
-        <sonic-badge ellipsis size="sm" > <sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon> Lorem ipsum dolor sit consectetur adipiscing elit. Lorem ipsum dolor sit consectetur adipiscing elit.</sonic-badge>
+    <div class="grid grid-cols-2 gap-4 max-w-xl">
+      <sonic-badge ellipsis size="sm" variant="outline">
+        <sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon>
+        Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.
+      </sonic-badge>
+      <sonic-badge ellipsis size="sm">
+        <sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon>
+        Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.
+      </sonic-badge>
     </div>
   </template>
 </sonic-code>
 
 ## Badge in button
+
+Count inside a button (`slot="suffix"`) or a badge absolutely positioned on a button / icon.
+
 <sonic-code>
   <template>
-  <div class="flex flex-wrap gap-4 items-center">
-    <sonic-button type="default">
-      Messages <sonic-badge slot="suffix" type="danger" size="xs">5</sonic-badge>
-    </sonic-button>
-    <div class="relative inline-block">
-      <sonic-button type="success" class="relative"> Mon compte </sonic-button>
-      <sonic-badge type="danger" size="xs" class="absolute right-1 top-0 pe-none transform -translate-y-1/2"
-        >12</sonic-badge
-      >
-    </div>
-    <div class="relative inline-block">
-      <sonic-button type="neutral" shape="circle" variant="outline"
-        ><sonic-icon library="iconoir" name="user"></sonic-icon>
-      </sonic-button>
-      <sonic-badge
-        type="danger"
-        size="xs"
-        class="absolute right-1 bottom-1 pe-none transform translate-y-1/2 translate-x-1/2"
-        >33</sonic-badge
-      >
-    </div>
-    <div class="relative inline-block">
-      <sonic-button type="neutral" shape="circle" variant="outline"
-        ><sonic-icon library="iconoir" name="user"></sonic-icon>
+    <div class="flex flex-wrap gap-4 items-center">
+      <sonic-button type="default">
+        Messages <sonic-badge slot="suffix" type="danger" size="xs">5</sonic-badge>
       </sonic-button>
-      <sonic-badge
-        type="danger"
-        size="xs"
-        class="absolute right-2 bottom-2 pe-none transform translate-y-1/2 translate-x-1/2"
-      ></sonic-badge>
+      <div class="relative inline-block">
+        <sonic-button type="success" class="relative">My account</sonic-button>
+        <sonic-badge
+          type="danger"
+          size="xs"
+          class="absolute right-1 top-0 pe-none transform -translate-y-1/2"
+          >12</sonic-badge
+        >
+      </div>
+      <div class="relative inline-block">
+        <sonic-button type="neutral" shape="circle" variant="outline">
+          <sonic-icon library="iconoir" name="user"></sonic-icon>
+        </sonic-button>
+        <sonic-badge
+          type="danger"
+          size="xs"
+          class="absolute right-1 bottom-1 pe-none transform translate-y-1/2 translate-x-1/2"
+          >33</sonic-badge
+        >
+      </div>
+      <div class="relative inline-block">
+        <sonic-button type="neutral" shape="circle" variant="outline">
+          <sonic-icon library="iconoir" name="user"></sonic-icon>
+        </sonic-button>
+        <sonic-badge
+          type="danger"
+          size="xs"
+          class="absolute right-2 bottom-2 pe-none transform translate-y-1/2 translate-x-1/2"
+        ></sonic-badge>
+      </div>
     </div>
-  </div>
   </template>
 </sonic-code>

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,
@@ -9,7 +11,6 @@ import {
 import { styleMap } from "lit/directives/style-map.js";
 import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
 import FormCheckable from "@supersoniks/concorde/core/mixins/FormCheckable";
-import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import { ifDefined } from "lit/directives/if-defined.js";
 import {
   fontSize,
@@ -42,7 +43,7 @@ const tagName = "sonic-button";
  * * Le bouton possède cependant et notamment une propriété href contrairement à un badge
  */
 @customElement(tagName)
-export class Button extends FormCheckable(FormElement(Subscriber(LitElement))) {
+export class Button extends FormCheckable(FormElement(LitElement)) {
   static styles = [
     fontSize,
     css`
@@ -382,8 +383,9 @@ export class Button extends FormCheckable(FormElement(Subscriber(LitElement))) {
         position: relative;
       }
 
-      :host([loading]) slot {
-        opacity: 0 !important;
+      :host([loading]) slot,
+      :host([loading]) slot::slotted(*) {
+        visibility: hidden !important;
         pointer-events: none;
       }
       /*Loading*/
@@ -396,8 +398,8 @@ export class Button extends FormCheckable(FormElement(Subscriber(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;
       }
 
@@ -480,8 +482,7 @@ export class Button extends FormCheckable(FormElement(Subscriber(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.
@@ -628,7 +629,7 @@ export class Button extends FormCheckable(FormElement(Subscriber(LitElement))) {
       flexDirection: this.direction,
       alignItems: this.alignItems,
       justifyContent: this.justify,
-      align: this.align,
+      textAlign: this.align,
       minWidth: this.minWidth,
     };
 
@@ -641,6 +642,7 @@ export class Button extends FormCheckable(FormElement(Subscriber(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;
       }
     `,
   ];