@supersoniks/concorde 5.0.1 → 5.0.3

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

@@ -1,107 +1,201 @@
 # Image
 
+Responsive **`<img>`** wrapper: aspect ratio, `object-fit: cover`, rounded corners, and optional fade-in on load. The host uses a light placeholder background (`--sc-placeholder-bg`) until the file is ready. Default **`loading`** is `lazy`; set **`loading="eager"`** for above-the-fold heroes.
+
 ## Rounded
 
+Omit `rounded` for square corners. Boolean **`rounded`** uses the theme token `--sc-rounded`. Sizes: **`sm`**, **`md`**, **`lg`**, **`xl`**, **`full`** (circle — pair with `ratio="1/1"`), **`none`** (explicit reset).
+
 <sonic-code>
   <template>
-    <div class="grid gap-8 grid-cols-3 items-center">
-      <sonic-image
-        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
-        ratio="1/1"
-      >
-      </sonic-image>
-      <sonic-image
-        rounded="sm"
-        ratio="1/1"
-        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
-      >
-      </sonic-image>
-      <sonic-image
-        rounded
-        ratio="1/1"
-        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
-      >
-      </sonic-image>
-      <sonic-image
-        rounded="md"
-        ratio="1/1"
-        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
-      >
-      </sonic-image>
-      <sonic-image
-        rounded="lg"
-        ratio="1/1"
-        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
-      >
-      </sonic-image>
-      <sonic-image
-        rounded="full"
-        ratio="1/1"
-        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
-      >
-      </sonic-image>
+    <div class="grid gap-6 grid-cols-3  lg:grid-cols-4 items-end text-center text-xs ">
+      <div>
+        <sonic-image
+          ratio="1/1"
+          src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        ></sonic-image>
+        <p class="mt-2">default</p>
+      </div>
+      <div>
+        <sonic-image
+          rounded="sm"
+          ratio="1/1"
+          src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        ></sonic-image>
+        <p class="mt-2">sm</p>
+      </div>
+      <div>
+        <sonic-image
+          rounded
+          ratio="1/1"
+          src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        ></sonic-image>
+        <p class="mt-2">rounded</p>
+      </div>
+      <div>
+        <sonic-image
+          rounded="md"
+          ratio="1/1"
+          src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        ></sonic-image>
+        <p class="mt-2">md</p>
+      </div>
+      <div>
+        <sonic-image
+          rounded="lg"
+          ratio="1/1"
+          src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        ></sonic-image>
+        <p class="mt-2">lg</p>
+      </div>
+      <div>
+        <sonic-image
+          rounded="xl"
+          ratio="1/1"
+          src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        ></sonic-image>
+        <p class="mt-2">xl</p>
+      </div>
+      <div >
+        <div >
+          <sonic-image
+            rounded="full"
+            ratio="1/1"
+            src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+          ></sonic-image>
+          <p class="mt-2">full</p>
+        </div>
+      </div>
     </div>
   </template>
 </sonic-code>
 
-## Ratio
+## Aspect ratio
+
+**`ratio`** sets CSS `aspect-ratio` on the image (default **`auto`**). The image still fills the host width (`width: 100%`).
 
 <sonic-code>
   <template>
     <div class="grid gap-8 grid-cols-2 items-center">
       <sonic-image
         src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
-      >
-      </sonic-image>
+      ></sonic-image>
       <sonic-image
         ratio="16/9"
         src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
-      >
-      </sonic-image>
+      ></sonic-image>
       <sonic-image
         ratio="1/1"
         src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
-      >
-      </sonic-image>
+      ></sonic-image>
       <sonic-image
         ratio="2/3"
         src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
-      >
-      </sonic-image>
+      ></sonic-image>
     </div>
   </template>
 </sonic-code>
 
 ## Object position
 
+**`objectPosition`** maps to CSS `object-position` (default **`center center`**). Useful on wide crops when the subject sits off-center.
+
 <sonic-code>
   <template>
     <div class="grid gap-8 grid-cols-2 items-center">
       <sonic-image
-        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
         ratio="11/4"
-      >
-      </sonic-image>
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+      ></sonic-image>
       <sonic-image
         objectPosition="center top"
-        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
         ratio="11/4"
-      >
-      </sonic-image>
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+      ></sonic-image>
     </div>
   </template>
 </sonic-code>
 
 ## Cover
 
+**`cover`** stretches the image to fill a **positioned** parent (`position: relative` + fixed height or inset). Aspect ratio on the host is ignored while `cover` is set.
+
 <sonic-code>
   <template>
-    <div class="h-96 relative">
+    <div class="h-96 relative rounded-lg overflow-hidden">
       <sonic-image
         cover
         src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+      ></sonic-image>
+    </div>
+  </template>
+</sonic-code>
+
+## Load transition
+
+Set **`transition`** to **`fade`** (default when the attribute is present) or **`fade-scale-out`**. The image stays at `opacity: 0` until the browser fires **`load`**, then the **`loaded`** class runs the animation. Changing `src` on an existing element does not replay the effect — mount a new `sonic-image` when you need another entrance (galleries, infinite scroll).
+
+Click **Add image** to append small thumbnails and replay the transition. **Clear** resets the row.
+
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap gap-2 mb-4">
+      <sonic-button
+        size="sm"
+        onclick="(function () {
+          var host = document.getElementById('sonic-image-transition-host');
+          var img = document.createElement('sonic-image');
+          img.transition = 'fade';
+          img.ratio = '1/1';
+          img.rounded = 'md';
+          img.loading = 'eager';
+          img.style.width = '5rem';
+          img.src = 'https://picsum.photos/seed/' + Date.now() + '/120/120';
+          host.appendChild(img);
+        })()"
+      >
+        Add image (fade)
+      </sonic-button>
+      <sonic-button
+        size="sm"
+        variant="outline"
+        onclick="(function () {
+          var host = document.getElementById('sonic-image-transition-host');
+          var img = document.createElement('sonic-image');
+          img.transition = 'fade-scale-out';
+          img.ratio = '1/1';
+          img.rounded = 'md';
+          img.loading = 'eager';
+          img.style.width = '5rem';
+          img.src = 'https://picsum.photos/seed/' + Date.now() + '/120/120';
+          host.appendChild(img);
+        })()"
+      >
+        Add image (fade-scale-out)
+      </sonic-button>
+      <sonic-button
+        size="sm"
+        variant="ghost"
+        onclick="document.getElementById('sonic-image-transition-host').replaceChildren()"
       >
-      </sonic-image>
+        Clear
+      </sonic-button>
     </div>
+    <div id="sonic-image-transition-host" class="flex flex-wrap gap-2 min-h-[5rem]"></div>
+  </template>
+</sonic-code>
+
+## Accessibility and parts
+
+Always set meaningful **`alt`** text (empty string only for decorative images). 
+
+<sonic-code>
+  <template>
+    <sonic-image
+      rounded="md"
+      ratio="16/9"
+      alt="Concorde aircraft in flight"
+      src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+    ></sonic-image>
   </template>
 </sonic-code>

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

@@ -1,18 +1,18 @@
 import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
+import { Rounded, hostRounded } from "../_css/rounded";
 const tagName = "sonic-image";
 @customElement(tagName)
 export class Image extends LitElement {
   static styles = [
+    hostRounded,
     css`
       :host {
-        --sc-img-radius: 0;
-        --sc-img-bg: var(--sc-placeholder-bg, rgba(12, 12, 12, 0.05));
-        border-radius: var(--sc-img-radius);
+        --sc-_bg: var(--sc-placeholder-bg, rgba(12, 12, 12, 0.05));
+        background: var(--sc-_bg);
         display: block;
         width: 100%;
-        background: var(--sc-img-bg);
       }
 
       img {
@@ -25,34 +25,6 @@ export class Image extends LitElement {
         visibility: hidden;
       }
 
-      /*Rounded*/
-      :host([rounded]) {
-        --sc-img-radius: var(--sc-rounded);
-        overflow: hidden;
-      }
-      :host([rounded="sm"]) {
-        --sc-img-radius: var(--sc-rounded-sm);
-      }
-
-      :host([rounded="md"]) {
-        --sc-img-radius: var(--sc-rounded-md);
-      }
-
-      :host([rounded="lg"]) {
-        --sc-img-radius: var(--sc-rounded-lg);
-      }
-      :host([rounded="xl"]) {
-        --sc-img-radius: var(--sc-rounded-xl);
-      }
-
-      /*Cercle*/
-      :host([rounded="full"]) {
-        --sc-img-radius: 50% !important;
-      }
-      :host([rounded="none"]) {
-        --sc-img-radius: 0 !important;
-      }
-
       :host([cover]),
       :host([cover]) > div,
       :host([cover]) img {
@@ -72,7 +44,8 @@ export class Image extends LitElement {
 
       :host([transition="fade-scale-out"]) img {
         scale: 1.08;
-        transition: opacity 0.3s linear,
+        transition:
+          opacity 0.3s linear,
           scale 0.3s cubic-bezier(0.16, 1, 0.3, 1);
       }
       :host([transition]) img.loaded {
@@ -82,13 +55,7 @@ export class Image extends LitElement {
     `,
   ];
 
-  @property({ type: String }) rounded:
-    | ""
-    | "none"
-    | "full"
-    | "sm"
-    | "md"
-    | "lg" = "none";
+  @property({ type: String, reflect: true }) rounded: Rounded = "none";
   @property({ type: String }) src = "";
   @property({ type: String }) alt = "";
   @property({ type: String }) loading: "eager" | "lazy" = "lazy";
@@ -101,7 +68,7 @@ export class Image extends LitElement {
   @property({ type: Boolean, reflect: true }) cover = false;
 
   firstUpdated(
-    changedProperties: Map<string | number | symbol, unknown>
+    changedProperties: Map<string | number | symbol, unknown>,
   ): void {
     if (this.transition) {
       const img = this.shadowRoot?.querySelector("img");
@@ -119,10 +86,9 @@ export class Image extends LitElement {
       imageRendering: this.imageRendering,
       objectPosition: this.objectPosition,
     };
-    return html`<div part="image">
-      <picture part="picture"
+    return html`<div>
+      <picture
         ><img
-          part="img"
           src="${this.src}"
           loading="${this.loading}"
           alt="${this.alt}"

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

@@ -3,14 +3,14 @@
 ## Href
 <sonic-code>
   <template>
-    <sonic-link href="/">Basic link with href attibute</sonic-link>
+    <sonic-link href="/">Basic link with href attribute</sonic-link>
   </template>
 </sonic-code>
 
 ## Target
 <sonic-code>
   <template>
-    <sonic-link href="/" target="_blank">Link with target attibute</sonic-link>
+    <sonic-link href="/" target="_blank">Link with target attribute</sonic-link>
   </template>
 </sonic-code>
 

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

@@ -1,7 +1,9 @@
-import LocationHandler from "@supersoniks/concorde/core/utils/LocationHandler";
-import {html, LitElement, css, PropertyValues, nothing} from "lit";
-import {customElement, property} from "lit/decorators.js";
-import {ifDefined} from "lit/directives/if-defined.js";
+import LocationHandler, {
+  type AutoActiveMode,
+} from "@supersoniks/concorde/core/utils/LocationHandler";
+import { html, LitElement, css, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import Electron from "@supersoniks/concorde/core/utils/Electron";
 const tagName = "sonic-link";
 
@@ -11,13 +13,27 @@ export class Link extends LitElement {
     css`
       a {
         color: inherit;
-        text-decoration: none;
-        display: contents;
+        text-decoration: inherit;
+        display: inline-flex;
+        align-items: inherit;
+        gap: inherit;
+        min-width: 0;
+        max-width: 100%;
+      }
+
+      a:focus {
+        outline: none;
+      }
+
+      a:focus-visible {
+        outline: 2px solid currentColor;
+        outline-offset: 2px;
+        border-radius: 2px;
       }
     `,
   ];
 
-  @property({type: String}) href = "";
+  @property({ type: String }) href = "";
   private _location = "";
   get location(): string {
     return this._location;
@@ -27,47 +43,37 @@ export class Link extends LitElement {
     LocationHandler.updateComponentActiveState(this);
   }
 
-  @property({type: String, attribute: "data-aria-label"}) ariaLabel = null;
+  @property({ type: String, attribute: "data-aria-label" }) ariaLabel:
+    | string
+    | null = null;
 
   /**
-   * mode d'activation du bouton :
-   * - strict : l'url courante match exactement avec le href du bouton
-   * - partial : l'url courante match à gauche avec le href du bouton
-   * - disabled : aucune activation / désactivation
+   * Active state for in-app navigation:
+   * - strict — pathname, search, and hash must match
+   * - strict-path-only — pathname and hash must match (ignore search)
+   * - partial — current URL starts with href (default)
+   * - disabled — never sets `active`
    */
-  @property({type: String}) autoActive: "strict" | "partial" | "disabled" = "partial";
+  @property({ type: String }) autoActive: AutoActiveMode = "partial";
+
   connectedCallback() {
     if (this.href && this.href.indexOf("http") != 0) {
       LocationHandler.onChange(this);
-      this.location = document.location.href.replace(document.location.origin, "");
+      this.location = document.location.href.replace(
+        document.location.origin,
+        "",
+      );
     }
 
-    // on Enter keypress we trigger a click on the link tag
-    this.addEventListener("keypress", (e: KeyboardEvent) => {
-      if (e.key === "Enter") {
-        this.shadowRoot?.querySelector("a")?.click();
-      }
-    });
-
-    this.setFocusable();
-
     super.connectedCallback();
   }
 
-  setFocusable() {
-    if (this.href) {
-      this.setAttribute("tabIndex", "0");
-    } else {
-      this.removeAttribute("tabIndex");
-    }
-  }
-
   disconnectedCallback(): void {
     LocationHandler.offChange(this);
     super.disconnectedCallback();
   }
   private _target: string | null = null;
-  @property({type: String}) set target(newTarget) {
+  @property({ type: String }) set target(newTarget) {
     this._target = newTarget;
     Electron.fixBlankLink(this);
     this.requestUpdate();
@@ -79,17 +85,15 @@ export class Link extends LitElement {
   /**
    * Si présent on passe en mode pushstate
    */
-  @property({type: Boolean}) pushState: boolean | null = null;
+  @property({ type: Boolean, reflect: true }) pushState: boolean | null = null;
 
   handlePushState(e: Event) {
     e.preventDefault();
     LocationHandler.changeFromComponent(this);
   }
 
-  updated(changedProperties: PropertyValues) {
-    if (changedProperties.has("href")) {
-      this.setFocusable();
-    }
+  private get blankRel(): string | undefined {
+    return this.target === "_blank" ? "noopener noreferrer" : undefined;
   }
 
   render() {
@@ -99,6 +103,7 @@ export class Link extends LitElement {
         href="${this.href}"
         aria-label=${this.ariaLabel || nothing}
         target=${ifDefined(this.target)}
+        rel=${ifDefined(this.blankRel)}
         @click=${this.pushState ? this.handlePushState : null}
       >
         <slot></slot>

package/src/core/components/ui/modal/modal-close.ts

@@ -4,31 +4,27 @@ import { Modal } from "@supersoniks/concorde/core/components/ui/modal/modal";
 import { ifDefined } from "lit/directives/if-defined.js";
 import HTML from "@supersoniks/concorde/core/utils/HTML";
 import { ButtonType } from "../button/button";
+import {
+  resolveUiLabel,
+  uiAriaLabels,
+  type UiLabelDict,
+} from "@supersoniks/concorde/core/components/ui/_i18n/ui-aria-labels";
+
 const tagName = "sonic-modal-close";
 
 @customElement(tagName)
 export class ModalClose extends LitElement {
-  @property() translation: Record<string, string> = {
-    fr: "Fermer la fenêtre",
-    en: "Close window",
-    de: "Fenster schließen",
-    nl: "Venster sluiten",
-    es: "Cerrar",
-  };
+  @property() translation: UiLabelDict = { ...uiAriaLabels.closeWindow };
 
   @property() reset?: string;
   @property() type?: ButtonType;
 
-  connectedCallback() {
-    super.connectedCallback();
-    this.lang = document.documentElement.lang?.split("-")[0] ?? "fr";
-  }
   render() {
     return html`<sonic-button
       noAutoFill
-      data-aria-label=${this.translation[this.lang]}
       reset=${ifDefined(this.reset)}
       shape="circle"
+      .ariaLabel=${resolveUiLabel(this.translation)}
       @click=${this.handleClick}
       type=${ifDefined(this.type)}
       ><sonic-icon name="cancel" size="lg"></sonic-icon

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

@@ -58,13 +58,13 @@ export class Modal extends Subscriber(LitElement) {
         --sc-modal-py: 2.5rem;
         --sc-modal-px: 1.5rem;
 
-        --sc_backdrop-bg: var(
-          --sc_overlay-bg,
+        --sc-_backdrop-bg: var(
+          --sc-_overlay-bg,
           var(--sc-base-200, rgba(0, 0, 0, 0.12))
         );
-        --sc_backdrop-opacity: 0;
-        --sc_rounded: var(--sc-rounded-lg);
-        --sc_z-index: 990;
+        --sc-_backdrop-opacity: 0;
+        --sc-_rounded: var(--sc-rounded-lg);
+        --sc-_z-index: 990;
       }
 
       * {
@@ -76,7 +76,7 @@ export class Modal extends Subscriber(LitElement) {
         color: var(--sc-base-content, #000);
         width: 100%;
         box-shadow: var(--sc-shadow-lg);
-        border-radius: var(--sc_rounded) var(--sc_rounded);
+        border-radius: var(--sc-_rounded) var(--sc-_rounded);
         transform: translateZ(0);
         border: none;
         outline: none;
@@ -87,16 +87,16 @@ export class Modal extends Subscriber(LitElement) {
         opacity: 0;
         position: fixed;
         inset: 0;
-        z-index: var(--sc_z-index);
+        z-index: var(--sc-_z-index);
       }
 
       #backdrop {
-        opacity: var(--sc_backdrop-opacity, 0);
-        background: var(--sc_backdrop-bg);
+        opacity: var(--sc-_backdrop-opacity, 0);
+        background: var(--sc-_backdrop-bg);
         transition: opacity 0.15s linear;
         inset: 0;
         position: fixed;
-        z-index: var(--sc_z-index);
+        z-index: var(--sc-_z-index);
       }
 
       #modal-content {
@@ -112,12 +112,12 @@ export class Modal extends Subscriber(LitElement) {
           max-width: none !important;
           margin: auto 0 0 !important;
           width: 100% !important;
-          border-radius: var(--sc_rounded) var(--sc_rounded) 0 0 !important;
+          border-radius: var(--sc-_rounded) var(--sc-_rounded) 0 0 !important;
         }
       }
 
       :host([fullScreen]) {
-        --sc_rounded: 0;
+        --sc-_rounded: 0;
       }
       :host([fullScreen]) #modal {
         width: 100% !important;
@@ -161,11 +161,11 @@ export class Modal extends Subscriber(LitElement) {
       /* Close button */
       ::slotted(sonic-modal-close),
       sonic-modal-close {
-        --sc_top: 0.25rem;
-        --sc_x: 0.25rem;
+        --sc-_top: 0.25rem;
+        --sc-_x: 0.25rem;
         position: sticky;
         display: block;
-        top: var(--sc_top);
+        top: var(--sc-_top);
         margin-left: auto;
         margin-bottom: -1rem;
         margin-top: calc(-1 * var(--sc-modal-py) - 0.25rem);
@@ -312,7 +312,7 @@ export class Modal extends Subscriber(LitElement) {
     }
 
     if (_changedProperties.has("zIndex")) {
-      this.style.setProperty("--sc_z-index", this.zIndex || "990");
+      this.style.setProperty("--sc-_z-index", this.zIndex || "990");
     }
 
     if (_changedProperties.has("paddingX")) {
@@ -530,10 +530,10 @@ export class Modal extends Subscriber(LitElement) {
       // Backdrop
       if (!this.fullScreen) {
         if (isEntering) {
-          this.style.setProperty("--sc_backdrop-opacity", "0.8");
+          this.style.setProperty("--sc-_backdrop-opacity", "0.8");
         } else {
           setTimeout(() => {
-            this.style.setProperty("--sc_backdrop-opacity", "0");
+            this.style.setProperty("--sc-_backdrop-opacity", "0");
           }, 150);
         }
       }