@supersoniks/concorde 5.0.4 → 5.1.0

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

@@ -3,13 +3,15 @@ import { customElement, property } from "lit/decorators.js";
 import "@supersoniks/concorde/core/components/ui/card/card-header";
 import "@supersoniks/concorde/core/components/ui/card/card-main";
 import "@supersoniks/concorde/core/components/ui/card/card-footer";
-import { typesBg } from "../_css/type";
+import { CardType, typesBg } from "../_css/type";
+import { Shadow, shadowable } from "../_css/shadow";
 
 const tagName = "sonic-card";
 @customElement(tagName)
 export class Card extends LitElement {
   static styles = [
     typesBg,
+    shadowable,
     css`
       * {
         box-sizing: border-box;
@@ -19,46 +21,46 @@ export class Card extends LitElement {
         --sc-_color: var(--sc-base-content, #000);
         --sc-_bg: var(--sc-base, #fff);
         --sc-_rounded: var(--sc-rounded-lg);
-        --sc-_shadow: var(--sc-shadow-lg);
+        --sc-_border-color: transparent;
+        --sc-_border-width: var(--sc-form-border-width);
+        display: block;
+        background: transparent;
         -webkit-print-color-adjust: exact;
       }
 
+      .shadowable {
+        padding: var(--sc-_padding);
+        background-color: var(--sc-_bg);
+        border-radius: var(--sc-_rounded);
+        color: var(--sc-_color);
+        border: var(--sc-_border-width) solid var(--sc-_border-color);
+      }
+
       @media print {
         :host {
           page-break-inside: avoid;
           break-inside: avoid;
+        }
+        .shadowable {
           box-shadow: none !important;
           border: 1px solid var(--sc-base-200, rgba(0, 0, 0, 0.12));
         }
       }
-
-      :host {
-        display: block;
-        padding: var(--sc-_padding);
-        background-color: var(--sc-_bg);
-        border-radius: var(--sc-_rounded);
-        box-shadow: var(--sc-_shadow);
-        color: var(--sc-_color);
-      }
     `,
   ];
 
+  /**
+   * Ombre
+   */
+  @property({ type: String, reflect: true }) shadow: Shadow = "lg";
+
   /**
    * Le type change surtout la couleur composant
    */
   @property({ type: String, reflect: true })
-  type:
-    | "light"
-    | "primary"
-    | "warning"
-    | "danger"
-    | "success"
-    | "info"
-    | "neutral"
-    | "invert"
-    | "base" = "base";
+  type: CardType = "base";
 
   render() {
-    return html`<slot></slot> `;
+    return html`<div class="shadowable"><slot></slot></div>`;
   }
 }

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

@@ -1,35 +1,129 @@
 # Divider
 
-## Default
+**`sonic-divider`** draws a horizontal or vertical rule with optional **centered label** copy. Use it to separate sections in forms, cards, and **`sonic-menu`**. Set **`label`** for simple HTML captions or use the **default slot** for richer markup; default **`align`** is **`center`** and default **`lineStyle`** is **`solid`**.
+
+## Basic example
+
+A bare divider is a full-width line with vertical margin. Omit **`size`** to use the host default spacing (`0.5rem` block margin).
+
 <sonic-code>
   <template>
-  <sonic-divider></sonic-divider>
+    <sonic-divider></sonic-divider>
   </template>
 </sonic-code>
 
-## Align
+## Label and align
+
+**`label`** renders inside the line (HTML via the same pipeline as other form labels). **`align`** controls which side(s) of the line remain visible: **`left`** drops the leading segment, **`right`** drops the trailing segment, **`center`** keeps both.
+
 <sonic-code>
   <template>
-  <sonic-divider label="Default centered label"></sonic-divider>
-  <sonic-divider label="Right" align="right"></sonic-divider>
-  <sonic-divider label="Center" align="center"></sonic-divider>
-  <sonic-divider label="Left" align="left"></sonic-divider>
+    <div class="grid gap-4">
+      <sonic-divider label="Default centered label"></sonic-divider>
+      <sonic-divider label="Left" align="left"></sonic-divider>
+      <sonic-divider label="Center" align="center"></sonic-divider>
+      <sonic-divider label="Right" align="right"></sonic-divider>
+    </div>
   </template>
 </sonic-code>
 
 ## Size
+
+**`size`** adjusts block margin and label font size. Values follow the shared Concorde scale (`2xs` … `2xl`).
+
+<sonic-code>
+  <template>
+    <div class="grid gap-4">
+      <sonic-divider size="2xs" label="2xs"></sonic-divider>
+      <sonic-divider size="xs" label="xs"></sonic-divider>
+      <sonic-divider size="sm" label="sm"></sonic-divider>
+      <sonic-divider size="md" label="md"></sonic-divider>
+      <sonic-divider size="lg" label="lg"></sonic-divider>
+      <sonic-divider size="xl" label="xl"></sonic-divider>
+      <sonic-divider size="2xl" label="2xl"></sonic-divider>
+    </div>
+  </template>
+</sonic-code>
+
+## Line style
+
+**`lineStyle`** sets the stroke of the rule (`solid` · `dashed` · `dotted`). In HTML use the reflected attribute **`linestyle`** (case-insensitive).
+
 <sonic-code>
   <template>
-  <sonic-divider size="xs" label="xs"></sonic-divider>
-  <sonic-divider size="sm" label="sm"></sonic-divider>
-  <sonic-divider size="md" label="md"></sonic-divider>
-  <sonic-divider size="lg" label="lg"></sonic-divider>
+    <div class="grid gap-4">
+      <sonic-divider label="Solid"></sonic-divider>
+      <sonic-divider label="Dashed" lineStyle="dashed"></sonic-divider>
+      <sonic-divider label="Dotted" lineStyle="dotted"></sonic-divider>
+    </div>
   </template>
 </sonic-code>
 
-## Custom
+## Vertical and margin
+
+Set **`vertical`** for a column rule (for example between toolbar actions). **`noMargin`** removes host margin when a parent layout already provides spacing.
+
 <sonic-code>
   <template>
-  <sonic-divider><span class="mr-2">Lorem ipsum dolor sit amet</span><sonic-badge type="danger">+25</sonic-badge></sonic-divider>
+    <div class="flex items-stretch gap-2" style="min-height: 3rem;">
+      <span class="flex items-center px-2">Before</span>
+      <sonic-divider vertical noMargin></sonic-divider>
+      <span class="flex items-center px-2">After</span>
+    </div>
   </template>
 </sonic-code>
+
+## Default slot
+
+Slotted content replaces or augments **`label`**. Useful for badges, icons, or mixed markup in menus.
+
+<sonic-code>
+  <template>
+    <sonic-divider>
+      <span class="mr-2">Section title</span>
+      <sonic-badge type="danger">+25</sonic-badge>
+    </sonic-divider>
+  </template>
+</sonic-code>
+
+
+## Inside typed cards
+
+On **`sonic-card`** with semantic **`type`** (`primary` · `warning` · `danger` · `info` · `success`), the rule uses the card’s text color at reduced opacity so it stays visible on tinted surfaces. **`label`** and slotted captions use the same foreground color as surrounding copy.
+
+<sonic-code>
+  <template>
+    <div class="grid gap-4 max-w-xl">
+      <sonic-card type="danger">
+        <div>This action cannot be undone.</div>
+        <sonic-divider label="Affected resources"></sonic-divider>
+        <ul class="m-0 pl-5 text-sm">
+          <li>Project files</li>
+          <li>Shared links</li>
+        </ul>
+      </sonic-card>
+      <sonic-card type="info">
+        <div>Maintenance is scheduled for tonight.</div>
+        <sonic-divider></sonic-divider>
+        <div class="opacity-60">Expected downtime: about 15 minutes.</div>
+      </sonic-card>
+    </div>
+  </template>
+</sonic-code>
+
+## API reference
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `label` | string (HTML) | Caption centered on the rule; combined with default-slot content when both are set |
+| `align` | `left` · `center` · `right` (default `center`) | Hides the leading or trailing line segment for left/right alignment |
+| `size` | `2xs` · `xs` · `sm` · `md` · `lg` · `xl` · `2xl` · `inherit` | Vertical margin and label `font-size`; omit for host defaults |
+| `lineStyle` | `solid` · `dashed` · `dotted` (default `solid`) | Stroke style of the rule (HTML attribute `linestyle`) |
+| `vertical` | boolean | Renders a vertical rule; swap block/inline margins |
+| `noMargin` | boolean | Sets host margin to `0` |
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Label markup when **`label`** is insufficient or empty |
+
+The inner flex container exposes **`part="divider"`** for theme overrides.

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>`;
   }