@supersoniks/concorde 5.0.0 → 5.0.2

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

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

@@ -30,7 +30,43 @@
   </template>
 </sonic-code>
 
+Default placement is `bottom`. Placement is written `side-align`, like `sonic-tooltip`: `side` is `top`, `right`, `bottom` or `left`, `align` is `start`, `center` or `end`. Without `align`, content is aligned on the start of the trigger. If there is not enough room, content flips to the opposite side and stays inside the viewport.
+
+The former space syntax (`placement="bottom center"`) still works but is deprecated.
+
+<sonic-code>
+  <template>
+    <sonic-pop class="inline-block" placement="bottom-center">
+      <sonic-button>Bottom center</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+    <sonic-pop class="inline-block" placement="top-center">
+      <sonic-button>Top center</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+    <sonic-pop class="inline-block" placement="left-center">
+      <sonic-button>Left center</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+    <sonic-pop class="inline-block" placement="right-center">
+      <sonic-button>Right center</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+  </template>
+</sonic-code>
+
 ## Shadow
+
+Default shadow is `lg`.
+
 <sonic-code>
   <template>
     <sonic-pop class="inline-block" shadow="none" placement='top' >
@@ -60,6 +96,26 @@
   </template>
 </sonic-code>
 
+## Inline
+
+By default, pop is vertically aligned to the middle. Use `inline` to align it on the text baseline, e.g. inside a sentence.
+
+<sonic-code>
+  <template>
+    <p>
+      The Concorde flew from Paris to
+      <sonic-pop inline>
+        <sonic-button variant="link">New York</sonic-button>
+        <sonic-menu slot="content">
+          <sonic-menu-item>See flights</sonic-menu-item>
+          <sonic-menu-item>Book a seat</sonic-menu-item>
+        </sonic-menu>
+      </sonic-pop>
+      in about 3.5 hours.
+    </p>
+  </template>
+</sonic-code>
+
 ## noToggle
 <sonic-code>
   <template>
@@ -93,4 +149,52 @@
       Click to open pop
     </sonic-button>
   </template>
-</sonic-code>
+</sonic-code>
+
+## Keep open on select
+
+By default, a click inside the content closes the pop, as well as a click outside. Add `data-on-select="keep"` on the content, or on any of its elements, to keep the pop open when interacting with it.
+
+<sonic-code>
+  <template>
+    <sonic-pop class="inline-block">
+      <sonic-button>Closes on select</sonic-button>
+      <div slot="content" class="grid gap-2 p-3">
+        <sonic-checkbox>Option A</sonic-checkbox>
+        <sonic-checkbox>Option B</sonic-checkbox>
+      </div>
+    </sonic-pop>
+    <sonic-pop class="inline-block">
+      <sonic-button>Stays open on select</sonic-button>
+      <div slot="content" class="grid gap-2 p-3" data-on-select="keep">
+        <sonic-checkbox>Option A</sonic-checkbox>
+        <sonic-checkbox>Option B</sonic-checkbox>
+      </div>
+    </sonic-pop>
+  </template>
+</sonic-code>
+
+## Keyboard
+
+- `ArrowDown` on the trigger opens the pop.
+- `Escape` closes the last opened pop and gives focus back to its trigger.
+
+## Methods and events
+
+`show()` and `hide()` open and close the pop programmatically (see `manual` above). The pop dispatches a `show` event when it opens and a `hide` event when it closes.
+
+```js
+const pop = document.querySelector("sonic-pop");
+pop.addEventListener("hide", () => console.log("pop closed"));
+pop.show();
+```
+
+## Styling
+
+The content can be styled from outside with `::part(content)`.
+
+```css
+sonic-pop::part(content) {
+  border-radius: 0;
+}
+```