@supersoniks/concorde 3.1.87 → 3.1.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "3.1.87",
+  "version": "3.1.90",
   "license": "MIT",
   "type": "module",
   "main": "",

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

@@ -142,7 +142,7 @@ export class Button extends FormCheckable(FormElement(Subscriber(LitElement))) {
         gap: var(--sc-btn-gap);
       }
 
-      :host button:focus,
+      :host button:focus-visible,
       :host button:hover {
         filter: var(--sc-btn-hover-filter);
       }
@@ -201,7 +201,7 @@ export class Button extends FormCheckable(FormElement(Subscriber(LitElement))) {
       }
 
       /*GESTION DU FOCUS*/
-      :host(:not([disabled])) button:focus {
+      :host(:not([disabled])) button:focus-visible {
         box-shadow: 0 0 0 0.18rem var(--sc-base-300, rgba(0, 0, 0, 0.18));
         border-color: var(--sc-base-300, rgba(0, 0, 0, 0.18)) !important;
         outline: none;
@@ -218,7 +218,7 @@ export class Button extends FormCheckable(FormElement(Subscriber(LitElement))) {
         background: transparent;
       }
 
-      /*:host([variant="ghost"]) button:focus,*/
+      /*:host([variant="ghost"]) button:focus-visible,*/
       :host([variant="ghost"]) button:hover {
         background: var(--sc-btn-ghost-bg-hover);
         filter: none;
@@ -246,7 +246,7 @@ export class Button extends FormCheckable(FormElement(Subscriber(LitElement))) {
         background: transparent;
       }
 
-      /*:host([variant="outline"]) button:focus,*/
+      /*:host([variant="outline"]) button:focus-visible,*/
       :host([variant="outline"]) button:hover {
         background: var(--btn-outline-bg-hover);
       }
@@ -279,7 +279,7 @@ export class Button extends FormCheckable(FormElement(Subscriber(LitElement))) {
         color: inherit;
       }
 
-      :host([variant="link"]) button:focus,
+      :host([variant="link"]) button:focus-visible,
       :host([variant="link"]) button:hover {
         text-decoration: none;
       }
@@ -641,6 +641,7 @@ export class Button extends FormCheckable(FormElement(Subscriber(LitElement))) {
         aria-expanded=${ifDefined(this.sonicAriaExpanded)}
         aria-label=${ifDefined(this.ariaLabel)}
         aria-labelledby=${ifDefined(this.ariaLabelledby)}
+        ?disabled=${this.disabled}
         @click=${this.handleChange}
         @pointerdown=${this.handleRepeatStart}
       >

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

@@ -84,7 +84,7 @@ export class Checkbox extends FormCheckable(
           var(--sc-checkbox-border-color);
       }
 
-      input:focus,
+      input:focus-visible,
       :host(:not([disabled])) input:active {
         box-shadow: 0 0 0 2px var(--sc-primary, var(--sc-base-content, #000));
       }

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

@@ -1,30 +1,32 @@
-import {html, LitElement, css} from "lit";
-import {customElement, property} from "lit/decorators.js";
-import {Modal} from "@supersoniks/concorde/core/components/ui/modal/modal";
-import {ifDefined} from "lit/directives/if-defined.js";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+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";
 const tagName = "sonic-modal-close";
 
 @customElement(tagName)
 export class ModalClose extends LitElement {
-  static styles = [
-    css`
-      :host {
-        position: sticky;
-        display: block;
-        align-self: flex-end;
-        height: 0;
-        top: 0.5rem;
-        right: 0.5rem;
-        transform: translate3d(calc(var(--sc-modal-px)), calc(-1 * var(--sc-modal-py)), 0);
-        z-index: 20;
-      }
-    `,
-  ];
+  @property() translation: Record<string, string> = {
+    fr: "Fermer la fenêtre",
+    en: "Close window",
+    de: "Fenster schließen",
+    nl: "Venster sluiten",
+    es: "Cerrar",
+  };
+
   @property() reset?: string;
 
+  connectedCallback() {
+    super.connectedCallback();
+    this.lang = document.documentElement.lang?.split("-")[0] ?? "fr";
+  }
   render() {
-    return html`<sonic-button reset=${ifDefined(this.reset)} shape="circle" @click=${this.handleClick}
+    return html`<sonic-button
+      aria-label=${this.translation[this.lang]}
+      reset=${ifDefined(this.reset)}
+      shape="circle"
+      @click=${this.handleClick}
       ><sonic-icon name="cancel" size="lg"></sonic-icon
     ></sonic-button>`;
   }

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

@@ -6,7 +6,6 @@
       Simple modal
     </sonic-button>
     <sonic-modal id="modalExample">
-      <sonic-modal-close></sonic-modal-close>
       <sonic-modal-title
         >Lorem ipsum dolor sit amet <sonic-badge type="danger" size="sm">+33</sonic-badge></sonic-modal-title
       >
@@ -31,7 +30,6 @@
   <template>
     <sonic-button onclick="document.getElementById('modalText').show()"> Long text </sonic-button>
     <sonic-modal align="left" id="modalText">
-      <sonic-modal-close></sonic-modal-close>
       <sonic-modal-title>Infos et tarifs </sonic-modal-title>
       <sonic-modal-content>
         <div class="prose">
@@ -97,7 +95,6 @@
   <template>
     <sonic-button onclick="document.getElementById('CustomWidth').show()"> Custom width </sonic-button>
     <sonic-modal maxHeight="50vh" maxWidth="90vw" width="100%" height="100%" id="CustomWidth">
-      <sonic-modal-close></sonic-modal-close>
       <sonic-image
         cover
         objectPosition="center 20%"
@@ -113,7 +110,6 @@
   <template>
     <sonic-button onclick="document.getElementById('Fullscreen').show()"> Fullscreen </sonic-button>
     <sonic-modal fullscreen id="Fullscreen">
-      <sonic-modal-close></sonic-modal-close>
       <sonic-image
         cover
         src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"