@supersoniks/concorde 3.1.86 → 3.1.88

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "3.1.86",
+  "version": "3.1.88",
   "license": "MIT",
   "type": "module",
   "main": "",
@@ -106,9 +106,9 @@
     "./ui/badge": "./src/core/components/ui/badge/badge.ts",
     "./button": "./src/core/components/ui/button/button.ts",
     "./ui/button": "./src/core/components/ui/button/button.ts",
-    "./actchaStyles": "./src/core/components/ui/captcha/actchaStyles.ts",
-    "./ui/actchaStyles": "./src/core/components/ui/captcha/actchaStyles.ts",
-    "./ui/captcha/actchaStyles": "./src/core/components/ui/captcha/actchaStyles.ts",
+    "./altchaStyles": "./src/core/components/ui/captcha/altchaStyles.ts",
+    "./ui/altchaStyles": "./src/core/components/ui/captcha/altchaStyles.ts",
+    "./ui/captcha/altchaStyles": "./src/core/components/ui/captcha/altchaStyles.ts",
     "./captcha": "./src/core/components/ui/captcha/captcha.ts",
     "./ui/captcha": "./src/core/components/ui/captcha/captcha.ts",
     "./card-footer": "./src/core/components/ui/card/card-footer.ts",

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

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

@@ -8,7 +8,7 @@ import {
   generateKey,
   encryptToBase64,
 } from "@supersoniks/concorde/core/utils/aesCrypto";
-import { altchaStyles } from "./actchaStyles";
+import { altchaStyles } from "./altchaStyles";
 
 const PASS_PHRASE = "supersoniks_altcha";
 const IV = "Si2\\]X8M4!n9DCLd";

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/icon/icon.ts

@@ -19,9 +19,10 @@ export class Icon extends LitElement {
       vertical-align: -0.125em;
       flex-shrink: 0;
     }
+
     svg {
-      height: var(--sc-icon-size, 1em);
-      width: 1.4em;
+      height: var(--_sc-icon-size, 1em);
+      width: calc(var(--_sc-icon-size, 1em) * 1.4);
       overflow: visible;
     }
 
@@ -34,31 +35,31 @@ export class Icon extends LitElement {
     }
 
     :host([size="2xs"]) svg {
-      --sc-icon-size: 0.625em;
+      --_sc-icon-size: 0.625em;
     }
 
     :host([size="xs"]) svg {
-      --sc-icon-size: 0.75em;
+      --_sc-icon-size: 0.75em;
     }
 
     :host([size="sm"]) svg {
-      --sc-icon-size: 0.875em;
+      --_sc-icon-size: 0.875em;
     }
 
     :host([size="lg"]) svg {
-      --sc-icon-size: 1.25em;
+      --_sc-icon-size: 1.25em;
     }
 
     :host([size="xl"]) svg {
-      --sc-icon-size: 1.5em;
+      --_sc-icon-size: 1.5em;
     }
 
     :host([size="2xl"]) svg {
-      --sc-icon-size: 2em;
+      --_sc-icon-size: 2em;
     }
 
     :host([size="3xl"]) svg {
-      --sc-icon-size: 2.8em;
+      --_sc-icon-size: 2.8em;
     }
   `;
   async updateIcon() {

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

@@ -7,6 +7,7 @@ import {
   property,
   query,
   queryAssignedElements,
+  state,
 } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
 
@@ -20,6 +21,7 @@ import { ConcordeWindow } from "@supersoniks/concorde/core/_types/types";
 import { Theme } from "@supersoniks/concorde/core/components/ui/theme/theme";
 import { PrimitiveType } from "@supersoniks/concorde/core/_types/types";
 import { DirectiveResult } from "lit/directive.js";
+import LocationHandler from "@supersoniks/concorde/core/utils/LocationHandler";
 
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
@@ -41,6 +43,7 @@ declare type ModalCreateOptions = {
   removeHashOnHide?: boolean;
   fullScreen?: boolean;
   effect?: effectType;
+  closeOnLocationChange?: boolean;
 };
 
 type effectType = "fade" | "slide" | "none";
@@ -213,6 +216,9 @@ export class Modal extends Subscriber(LitElement) {
   @query(".modal-wrapper") modalWrapper!: HTMLDivElement;
   @query(".modal") modalElement!: HTMLDivElement;
 
+  @property({ type: Boolean }) closeOnLocationChange = false;
+  @state() location = "";
+
   @queryAssignedElements({ selector: "sonic-modal-close" })
   closeBtn!: Array<HTMLElement>;
   static create(options: ModalCreateOptions): Modal {
@@ -224,6 +230,8 @@ export class Modal extends Subscriber(LitElement) {
       modal.setAttribute("removeHashOnHide", "true");
     if (options.removeOnHide === true)
       modal.setAttribute("removeOnHide", "true");
+    if (options.closeOnLocationChange === true)
+      modal.setAttribute("closeOnLocationChange", "true");
 
     if (options.maxWidth) modal.maxWidth = options?.maxWidth;
     if (options.width) modal.width = options?.width;
@@ -248,10 +256,12 @@ export class Modal extends Subscriber(LitElement) {
 
   connectedCallback(): void {
     Modal.modals.push(this);
+    LocationHandler.onChange(this);
     super.connectedCallback();
     this.handleFullsceen();
   }
   disconnectedCallback(): void {
+    LocationHandler.offChange(this);
     Modal.modals.splice(Modal.modals.indexOf(this), 1);
     super.disconnectedCallback();
   }
@@ -273,6 +283,19 @@ export class Modal extends Subscriber(LitElement) {
   }
 
   willUpdate(_changedProperties: PropertyValues): void {
+    if (this.closeOnLocationChange && _changedProperties.has("location")) {
+      const previousLocation = _changedProperties.get("location");
+      if (
+        previousLocation &&
+        this.location &&
+        this.location !== previousLocation
+      ) {
+        setTimeout(() => {
+          this.hide();
+        }, 50);
+      }
+    }
+
     if (_changedProperties.has("fullScreen")) {
       this.handleFullsceen();
     }

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

@@ -105,7 +105,7 @@ export class Pop extends LitElement {
 
   show() {
     this.setMaxZindex();
-    this.popContent.style.removeProperty("display");
+    this.popContent?.style?.removeProperty("display");
     this.open = true;
     this.popContent.setAttribute("tabindex", "0");
     if (this.popBtn && this.popContent && !this.positioningRuns) {

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

@@ -1,4 +1,4 @@
-import { html, LitElement, css } from "lit";
+import { html, LitElement, css, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators.js";
 const tagName = "sonic-tooltip";
 @customElement(tagName)
@@ -35,12 +35,20 @@ export class Tooltip extends LitElement {
         scale: 0.9;
         will-change: opacity, transform;
       }
-      :host(:focus-within) .tooltip:not(.disabled):before,
-      .tooltip:not(.disabled):hover:before {
+
+      /* désactive au focus-within cause persistance du tooltip au clic */
+      /* :host(:focus-within) .tooltip:before, */
+      :host(:focus-visible) .tooltip:before,
+      .tooltip:hover:before {
         opacity: 1;
         scale: 1;
       }
 
+      .disabled:before {
+        opacity: 0 !important;
+        scale: 0.9 !important;
+      }
+
       :host(:not([placement])) .tooltip:before,
       :host([placement="top"]) .tooltip:before {
         bottom: var(--sc-tooltip-position);
@@ -120,15 +128,22 @@ export class Tooltip extends LitElement {
     | "left"
     | "left-start"
     | "left-end";
+
   @property({ type: Boolean }) disabled = false;
   @property({ type: Boolean }) focusable = false;
 
-  connectedCallback(): void {
-    if (this.focusable) {
-      this.setAttribute("tabindex", "0");
+  protected willUpdate(_changedProperties: PropertyValues): void {
+    if (_changedProperties.has("disabled")) {
+      const wasDisabledBefore = _changedProperties.get("disabled") === true;
+      if (this.disabled) {
+        this.setAttribute("tabindex", "-1");
+      } else if (!this.disabled && wasDisabledBefore) {
+        this.removeAttribute("tabindex");
+      }
     }
-    super.connectedCallback();
+    super.willUpdate(_changedProperties);
   }
+
   render() {
     const disabledClass = this.disabled || this.label == "" ? "disabled" : "";
     return html`<div

package/src/core/mixins/FormElement.ts

@@ -308,7 +308,11 @@ const Form = <T extends Constructor<SubscriberInterface>>(superClass: T) => {
     focus() {
       const inputElement = this.shadowRoot?.querySelector(
         "[data-form-element], button"
-      ) as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+      ) as
+        | HTMLInputElement
+        | HTMLSelectElement
+        | HTMLTextAreaElement
+        | HTMLButtonElement;
       inputElement?.focus();
     }
 

package/src/tsconfig.json

@@ -273,14 +273,14 @@
       "./ui/button": [
         "/sites/concorde/src/core/components/ui/button/button.ts"
       ],
-      "./actchaStyles": [
-        "/sites/concorde/src/core/components/ui/captcha/actchaStyles.ts"
+      "./altchaStyles": [
+        "/sites/concorde/src/core/components/ui/captcha/altchaStyles.ts"
       ],
-      "./ui/actchaStyles": [
-        "/sites/concorde/src/core/components/ui/captcha/actchaStyles.ts"
+      "./ui/altchaStyles": [
+        "/sites/concorde/src/core/components/ui/captcha/altchaStyles.ts"
       ],
-      "./ui/captcha/actchaStyles": [
-        "/sites/concorde/src/core/components/ui/captcha/actchaStyles.ts"
+      "./ui/captcha/altchaStyles": [
+        "/sites/concorde/src/core/components/ui/captcha/altchaStyles.ts"
       ],
       "./captcha": [
         "/sites/concorde/src/core/components/ui/captcha/captcha.ts"