@supersoniks/concorde 2.0.2 → 2.0.3

package/core/components/ui/form/select/select.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, LitElement, css } from "lit";
-import { customElement, property, queryAssignedElements, state } from "lit/decorators.js";
+import { customElement, property, queryAssignedNodes, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { repeat } from "lit/directives/repeat.js";
@@ -29,9 +29,22 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
         this.valueKey = "value";
         this.wordingKey = "wording";
         this.multiple = false;
+        this.status = "default";
         this._options = [];
         this.hasDoneFirstUpdate = false;
         this._value = "";
+        this.updateOptions = () => {
+            const options = this.querySelectorAll("option");
+            if (options.length > 0) {
+                this.options = Array.from(options).map((option) => {
+                    return {
+                        value: option.value,
+                        wording: option.text,
+                        selected: option.hasAttribute("selected"),
+                    };
+                });
+            }
+        };
         /*
          * TODO
          * Mutualiser avec le composant textarea / input
@@ -85,16 +98,7 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
     connectedCallback() {
         super.connectedCallback();
         this.hasSlotOrProps();
-        const options = this.querySelectorAll("option");
-        if (options.length > 0) {
-            this.options = Array.from(options).map((option) => {
-                return {
-                    value: option.value,
-                    wording: option.text,
-                    selected: option.hasAttribute("selected"),
-                };
-            });
-        }
+        this.updateOptions();
     }
     get description() {
         return this._description;
@@ -173,9 +177,9 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
         <slot name="suffix" @slotchange=${this.hasSlotOrProps}></slot>
       </div>
 
-      <slot name="description" @slotchange=${this.hasSlotOrProps} class="${this.hasDescription ? "form-description" : "hidden"}">
-        ${this.description ? html `${unsafeHTML(this.description)}` : ""}
-      </slot>
+      <slot name="description" @slotchange=${this.hasSlotOrProps} class="${this.hasDescription ? "form-description" : "hidden"}"
+        >${this.description ? html `${unsafeHTML(this.description)}` : ""}</slot
+      >
     `;
     }
 };
@@ -246,6 +250,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], Select.prototype, "selectSize", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Select.prototype, "status", void 0);
 __decorate([
     property({ type: Array })
 ], Select.prototype, "options", null);
@@ -262,16 +269,16 @@ __decorate([
     property()
 ], Select.prototype, "label", null);
 __decorate([
-    queryAssignedElements({ slot: "label", flatten: true })
+    queryAssignedNodes({ slot: "label", flatten: true })
 ], Select.prototype, "slotLabelNodes", void 0);
 __decorate([
-    queryAssignedElements({ slot: "description", flatten: true })
+    queryAssignedNodes({ slot: "description", flatten: true })
 ], Select.prototype, "slotDescriptionNodes", void 0);
 __decorate([
-    queryAssignedElements({ slot: "suffix", flatten: true })
+    queryAssignedNodes({ slot: "suffix", flatten: true })
 ], Select.prototype, "slotSuffixNodes", void 0);
 __decorate([
-    queryAssignedElements({ slot: "prefix", flatten: true })
+    queryAssignedNodes({ slot: "prefix", flatten: true })
 ], Select.prototype, "slotPrefixNodes", void 0);
 __decorate([
     state()

package/core/components/ui/form/textarea/textarea.d.ts

@@ -9,13 +9,15 @@ declare const Textarea_base: {
         description: string | undefined;
         _label?: string | undefined;
         label: string | undefined;
+        status: "error" | "default" | "success" | "warning" | "info";
         tabindex?: number | undefined;
-        autocomplete?: "url" | "name" | "on" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday-day" | "bday-month" | "bday-year" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "organization" | "postal-code" | "street-address" | "transaction-amount" | "transaction-currency" | "username" | "email" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "language" | "nickname" | "organization-title" | "cc-additional-name" | "bday" | "sex" | "impp" | "photo" | undefined;
+        autocomplete?: "url" | "name" | "off" | "on" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday-day" | "bday-month" | "bday-year" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "organization" | "postal-code" | "street-address" | "transaction-amount" | "transaction-currency" | "username" | "email" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "language" | "nickname" | "organization-title" | "cc-additional-name" | "bday" | "sex" | "impp" | "photo" | undefined;
         getFormPublisher(): any;
         updateDataValue(): void;
         handleChange(e?: Event | undefined): void;
         handleBlur(e?: Event | undefined): void;
         getValueForFormPublisher(): string | object | string[] | null | undefined;
+        setValueFromPublisher(value: string | object | string[] | null | undefined): void;
         focus?: (() => void) | undefined;
         shadowRoot?: ShadowRoot | undefined;
         error: boolean;
@@ -56,10 +58,6 @@ declare const Textarea_base: {
         hasAttribute(attributeName: string): boolean;
         disconnectedCallback(): void;
         getBoundingClientRect(): DOMRect;
-        onConnected(callback: (component: any) => void): void;
-        offConnected(callback: (component: any) => void): void;
-        onDisconnected(callback: (component: any) => void): void;
-        offDisconnected(callback: (component: any) => void): void;
     };
 } & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/FormElement").FormElementInterface) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<import("../../../../_types/types").CoreJSType>) & typeof LitElement;
 export declare class Textarea extends Textarea_base {
@@ -72,6 +70,7 @@ export declare class Textarea extends Textarea_base {
     wrap?: "hard" | "soft";
     readonly: boolean;
     placeholder?: string;
+    resize?: "none" | "both" | "horizontal" | "vertical" | "block" | "inline";
     slotLabelNodes: Array<Node>;
     slotDescriptionNodes: Array<Node>;
     hasDescription: boolean;

package/core/components/ui/form/textarea/textarea.js

@@ -4,16 +4,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, LitElement, css } from "lit";
-import { customElement, property, state, queryAssignedElements } from "lit/decorators.js";
+import { css, html, LitElement } from "lit";
+import { customElement, property, queryAssignedNodes, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { formControl, label, description } from "@supersoniks/concorde/core/components/ui/form/css/form-control";
+import { description, formControl, label } from "@supersoniks/concorde/core/components/ui/form/css/form-control";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
 import FormInput from "@supersoniks/concorde/core/mixins/FormInput";
 import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
+import { styleMap } from "lit/directives/style-map.js";
 const tagName = "sonic-textarea";
 let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElement))) {
     constructor() {
@@ -49,15 +50,18 @@ let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElemen
         textarea.reportValidity();
     }
     render() {
+        const textAreaStyle = {
+            resize: this.resize,
+        };
         // let labelStarSuffix = this.label && this.required && this.label.indexOf("*") == -1 ? " *" : "";
         return html `
-      <label for="form-element" class="${this.hasLabel ? "form-label" : "hidden"}"
+      <label for="${this.id || "form-element"}" class="${this.hasLabel ? "form-label" : "hidden"}"
         >${this.label ? unsafeHTML(this.label /*+ labelStarSuffix*/) : ""}<slot name="label" @slotchange=${this.hasSlotOrProps}></slot
       ></label>
 
       <div class="form-control">
         <textarea
-          id="form-element"
+          id="${this.id || "form-element"}"
           @input=${this.handleChange}
           @blur=${this.handleBlur}
           disabled=${ifDefined(this.disabled)}
@@ -76,14 +80,15 @@ let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElemen
           class="form-element textarea custom-scroll"
           aria-label=${ifDefined(this.ariaLabel)}
           aria-labelledby=${ifDefined(this.ariaLabelledby)}
+          style=${styleMap(textAreaStyle)}
         >
 ${this.value}</textarea
         >
       </div>
 
-      <slot name="description" @slotchange=${this.hasSlotOrProps} class="${this.hasDescription ? "form-description" : "hidden"}">
-        ${this.description ? html `${unsafeHTML(this.description)}` : ""}
-      </slot>
+      <slot name="description" @slotchange=${this.hasSlotOrProps} class="${this.hasDescription ? "form-description" : "hidden"}"
+        >${this.description ? html `${unsafeHTML(this.description)}` : ""}</slot
+      >
     `;
     }
 };
@@ -95,6 +100,7 @@ Textarea.styles = [
     customScroll,
     css `
       textarea {
+        overflow-y: auto !important;
         font-size: inherit;
       }
     `,
@@ -124,10 +130,13 @@ __decorate([
     property({ type: String })
 ], Textarea.prototype, "placeholder", void 0);
 __decorate([
-    queryAssignedElements({ slot: "label", flatten: true })
+    property({ type: String })
+], Textarea.prototype, "resize", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "label", flatten: true })
 ], Textarea.prototype, "slotLabelNodes", void 0);
 __decorate([
-    queryAssignedElements({ slot: "description", flatten: true })
+    queryAssignedNodes({ slot: "description", flatten: true })
 ], Textarea.prototype, "slotDescriptionNodes", void 0);
 __decorate([
     state()

package/core/components/ui/group/group.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
-import { customElement, property, state, queryAssignedElements } from "lit/decorators.js";
+import { customElement, property, state, queryAssignedNodes } from "lit/decorators.js";
 import { label, description } from "@supersoniks/concorde/core/components/ui/form/css/form-control";
 import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
@@ -101,10 +101,10 @@ __decorate([
     property({ type: String })
 ], Group.prototype, "description", void 0);
 __decorate([
-    queryAssignedElements({ slot: "label", flatten: true })
+    queryAssignedNodes({ slot: "label", flatten: true })
 ], Group.prototype, "slotLabelNodes", void 0);
 __decorate([
-    queryAssignedElements({ slot: "description", flatten: true })
+    queryAssignedNodes({ slot: "description", flatten: true })
 ], Group.prototype, "slotDescriptionNodes", void 0);
 __decorate([
     state()

package/core/components/ui/icon/icon.js

@@ -51,10 +51,11 @@ Icon.styles = css `
       width: fit-content;
       height: fit-content;
       vertical-align: -0.125em;
+      flex-shrink: 0;
     }
     svg {
       height: var(--sc-icon-size, 1em);
-      width: var(--sc-icon-size, 1em);
+      width: 1.4em;
       overflow: visible;
     }
 

package/core/components/ui/icon/icons.d.ts

@@ -4,10 +4,6 @@ export declare type IconConf = {
     library?: string;
 };
 export default class Icons {
-    static fontAwesomeNext: {
-        get: (params: IconConf) => Promise<import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/unsafe-html").UnsafeHTMLDirective>>;
-    };
-    static registerIcons(newIcons: Record<string, Record<string, string>>): void;
     static default: {
         get: (params: IconConf) => Promise<import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/unsafe-html").UnsafeHTMLDirective>>;
     };

package/core/components/ui/icon/icons.js

@@ -49,20 +49,9 @@ const iconCachStr = sessionStorage.getItem("sonicIconsCache");
 const iconCache = iconCachStr ? JSON.parse(iconCachStr) : { icons: {}, names: [] };
 const iconCacheMaxSize = 100;
 class Icons {
-    static registerIcons(newIcons) {
-        const record = icons;
-        for (const prefix in newIcons) {
-            const newObj = newIcons[prefix];
-            const currentRecord = record[prefix] || {};
-            for (const name in newObj) {
-                currentRecord[name] = newObj[name];
-            }
-            record[prefix] = currentRecord;
-        }
-    }
 }
 _a = Icons;
-Icons.fontAwesomeNext = {
+Icons.default = {
     get: async (params) => {
         const library = params.library;
         if (!params.name)
@@ -75,19 +64,18 @@ Icons.fontAwesomeNext = {
         if (library == "custom") {
             enableCustomLibrary();
         }
-        if (library && libraries[library]) {
+        if (library && library in libraries) {
             const libraryItem = libraries[library];
             const prefix = params.prefix || libraryItem.defaultPrefix || "";
             const libIcons = iconsAsRecord[library] || {};
             iconsAsRecord[library] = libIcons;
             const libIconsKey = prefix + "-" + name;
-            // if(!libIcons )libIcons = iconsAsRecord[library] = {};
             /**
              * Si l'icone a déjà été chargée on ne la recharge pas
              */
             if (libIcons[libIconsKey])
                 return unsafeHTML(libIcons[libIconsKey]);
-            const url = libraryItem.url.replace("$prefix", prefix).replace("$name", name);
+            const url = (libraryItem.url || "").replace("$prefix", prefix).replace("$name", name);
             /**
              * MiniCache de session
              */
@@ -135,5 +123,4 @@ Icons.fontAwesomeNext = {
         return unsafeHTML(iconsAsRecord["core"][params.name] || "");
     },
 };
-Icons.default = _a.fontAwesomeNext;
 export default Icons;

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

@@ -1,10 +1,11 @@
-import { LitElement } from "lit";
+import { LitElement, PropertyValues } from "lit";
 export declare class Link extends LitElement {
     static styles: import("lit").CSSResult[];
     href: string;
     private _location;
     get location(): string;
     set location(value: string);
+    ariaLabel: null;
     /**
      * mode d'activation du bouton :
      * - strict : l'url courante match exactement avec le href du bouton
@@ -13,6 +14,7 @@ export declare class Link extends LitElement {
      */
     autoActive: "strict" | "partial" | "disabled";
     connectedCallback(): void;
+    setFocusable(): void;
     disconnectedCallback(): void;
     private _target;
     set target(newTarget: string | null);
@@ -20,7 +22,8 @@ export declare class Link extends LitElement {
     /**
      * Si présent on passe en mode pushstate
      */
-    pushState: null;
+    pushState: boolean | null;
     handlePushState(e: Event): void;
+    updated(changedProperties: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/core/components/ui/link/link.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import LocationHandler from "@supersoniks/concorde/core/utils/LocationHandler";
-import { html, LitElement, css } from "lit";
+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";
@@ -15,6 +15,7 @@ let Link = class Link extends LitElement {
         super(...arguments);
         this.href = "";
         this._location = "";
+        this.ariaLabel = null;
         /**
          * mode d'activation du bouton :
          * - strict : l'url courante match exactement avec le href du bouton
@@ -40,8 +41,23 @@ let Link = class Link extends LitElement {
             LocationHandler.onChange(this);
             this.location = document.location.href.replace(document.location.origin, "");
         }
+        // on Enter keypress we trigger a click on the link tag
+        this.addEventListener("keypress", (e) => {
+            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() {
         LocationHandler.offChange(this);
         super.disconnectedCallback();
@@ -58,11 +74,21 @@ let Link = class Link extends LitElement {
         e.preventDefault();
         LocationHandler.changeFromComponent(this);
     }
+    updated(changedProperties) {
+        if (changedProperties.has("href")) {
+            this.setFocusable();
+        }
+    }
     render() {
         if (!this.href)
             return html `<slot></slot>`;
         return html `
-      <a href="${this.href}" target=${ifDefined(this.target)} @click=${this.pushState ? this.handlePushState : null}>
+      <a
+        href="${this.href}"
+        aria-label=${this.ariaLabel || nothing}
+        target=${ifDefined(this.target)}
+        @click=${this.pushState ? this.handlePushState : null}
+      >
         <slot></slot>
       </a>
     `;
@@ -80,6 +106,9 @@ Link.styles = [
 __decorate([
     property({ type: String })
 ], Link.prototype, "href", void 0);
+__decorate([
+    property({ type: String, attribute: "data-aria-label" })
+], Link.prototype, "ariaLabel", void 0);
 __decorate([
     property({ type: String })
 ], Link.prototype, "autoActive", void 0);

package/core/components/ui/loader/loader.d.ts

@@ -1,7 +1,9 @@
 import { LitElement } from "lit";
+export type LoaderMode = "inline" | "fixed" | "noDelay";
 type LoaderConf = {
     mode?: string;
     container?: HTMLElement;
+    noDelay?: boolean;
 };
 export declare class Loader extends LitElement {
     static styles: import("lit").CSSResult[];
@@ -14,7 +16,8 @@ export declare class Loader extends LitElement {
      * * inline : Loader dans le contenu
      * * fixed : Loader global par dessus la page
      */
-    mode: "inline" | "fixed";
+    mode: LoaderMode;
+    noDelay: boolean;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

package/core/components/ui/loader/loader.js

@@ -9,6 +9,7 @@ import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { inline } from "@supersoniks/concorde/core/components/ui/loader/styles/inline";
 import { fixed } from "@supersoniks/concorde/core/components/ui/loader/styles/fixed";
+import { Theme } from "@supersoniks/concorde/core/components/ui/theme/theme";
 const tagName = "sonic-loader";
 let Loader = Loader_1 = class Loader extends LitElement {
     constructor() {
@@ -19,6 +20,7 @@ let Loader = Loader_1 = class Loader extends LitElement {
          * * fixed : Loader global par dessus la page
          */
         this.mode = "fixed";
+        this.noDelay = false;
     }
     static show(conf) {
         if (!Loader_1.loader)
@@ -28,8 +30,10 @@ let Loader = Loader_1 = class Loader extends LitElement {
             conf = {};
         if (conf.mode)
             loader.setAttribute("mode", conf.mode);
+        if (conf.noDelay)
+            loader.setAttribute("noDelay", "");
         if (!conf.container) {
-            conf.container = document.querySelector("sonic-theme") || document.body;
+            conf.container = Theme.getPopContainer();
             conf.mode = "fixed";
         }
         conf.container.appendChild(loader);
@@ -43,7 +47,7 @@ let Loader = Loader_1 = class Loader extends LitElement {
             Loader_1.loader.remove();
     }
     render() {
-        return html `<div class="sonic-loader sonic-loader--${this.mode} ">
+        return html `<div class="sonic-loader sonic-loader--${this.mode} ${this.noDelay ? "sonic-loader--nodelay" : ""} ">
       <div></div>
       <div></div>
       <div></div>
@@ -64,7 +68,8 @@ Loader.styles = [
         opacity: 0;
         animation: showLoader 0.5s 0.5s forwards;
       }
-      .sonic-loader--inline {
+      .sonic-loader--inline,
+      .sonic-loader--nodelay {
         animation-delay: 0s;
       }
 
@@ -83,6 +88,9 @@ Loader.callCounter = 0;
 __decorate([
     property({ type: String })
 ], Loader.prototype, "mode", void 0);
+__decorate([
+    property({ type: Boolean })
+], Loader.prototype, "noDelay", void 0);
 Loader = Loader_1 = __decorate([
     customElement(tagName)
 ], Loader);

package/core/components/ui/loader/styles/inline.js

@@ -1,40 +1,39 @@
 import { css } from "lit";
 export const inline = css `
-
   :host([align="left"]) .sonic-loader--inline {
-    margin-left:0;
+    margin-left: 0;
   }
-  
+
   :host([align="right"]) .sonic-loader--inline {
-    margin-left:auto;
-    margin-right:0;
+    margin-left: auto;
+    margin-right: 0;
   }
   .sonic-loader--inline {
-    display:block;
+    display: block;
     position: relative;
     width: 80px;
-    height: 80px;
-    margin:auto;
-    z-index:20;
+    height: 24px;
+    margin: auto;
+    z-index: 20;
   }
-  .sonic-loader--inline  div {
+  .sonic-loader--inline div {
     position: absolute;
-    top: 33px;
+    top: 5px;
     width: 13px;
     height: 13px;
     border-radius: 50%;
-    background:var(--sc-loader-bg);
+    background: var(--sc-loader-bg);
     animation-timing-function: cubic-bezier(0, 1, 1, 0);
   }
-  .sonic-loader--inline  div:nth-child(1) {
+  .sonic-loader--inline div:nth-child(1) {
     left: 8px;
     animation: lds-ellipsis1 0.6s infinite;
   }
-  .sonic-loader--inline  div:nth-child(2) {
+  .sonic-loader--inline div:nth-child(2) {
     left: 8px;
     animation: lds-ellipsis2 0.6s infinite;
   }
-  .sonic-loader--inline  div:nth-child(3) {
+  .sonic-loader--inline div:nth-child(3) {
     left: 32px;
     animation: lds-ellipsis2 0.6s infinite;
   }
@@ -67,5 +66,4 @@ export const inline = css `
       transform: translate(24px, 0);
     }
   }
-
 `;

package/core/components/ui/menu/menu-item.js

@@ -21,7 +21,8 @@ let MenuItem = class MenuItem extends Button {
         if (!this.hasAttribute("shape")) {
             this.shape = "block";
         }
-        if (!this.hasAttribute("align")) {
+        const isSquareOrCircle = this.shape === "square" || this.shape === "circle";
+        if (!this.hasAttribute("align") && !isSquareOrCircle) {
             this.align = "left";
         }
         super.connectedCallback();

package/core/components/ui/menu/menu.js

@@ -144,7 +144,9 @@ let MenuItems = class MenuItems extends LitElement {
                 elt.setAttribute("size", this.size);
             }
             if (this.align) {
-                elt.setAttribute("align", this.align);
+                if (elt.getAttribute("shape") != "square" && elt.getAttribute("shape") != "circle") {
+                    elt.setAttribute("align", this.align);
+                }
             }
             if (this.direction == "row") {
                 if (elt.getAttribute("shape") == "block") {
@@ -253,13 +255,7 @@ MenuItems.styles = [
           rgba(0, 0, 0, 1) 90%,
           rgba(0, 0, 0, 0) 100%
         );
-        mask-image: linear-gradient(
-          to right,
-          rgba(0, 0, 0, 0) 0%,
-          rgba(0, 0, 0, 1) 10%,
-          rgba(0, 0, 0, 1) 90%,
-          rgba(0, 0, 0, 0) 100%
-        );
+        mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
       }
       :host([scrollable][direction="column"].shadow-top) {
         -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
@@ -270,20 +266,8 @@ MenuItems.styles = [
         mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
       }
       :host([scrollable][direction="column"].shadow-top.shadow-bottom) {
-        -webkit-mask-image: linear-gradient(
-          to top,
-          rgba(0, 0, 0, 0) 0%,
-          rgba(0, 0, 0, 1) 10%,
-          rgba(0, 0, 0, 1) 90%,
-          rgba(0, 0, 0, 0) 100%
-        );
-        mask-image: linear-gradient(
-          to bottom,
-          rgba(0, 0, 0, 0) 0%,
-          rgba(0, 0, 0, 1) 10%,
-          rgba(0, 0, 0, 1) 90%,
-          rgba(0, 0, 0, 0) 100%
-        );
+        -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
+        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
       }
     `,
 ];

package/core/components/ui/modal/modal-close.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import HTML from "@supersoniks/concorde/core/utils/HTML";
 const tagName = "sonic-modal-close";
 let ModalClose = class ModalClose extends LitElement {
     render() {
@@ -15,7 +16,7 @@ let ModalClose = class ModalClose extends LitElement {
     ></sonic-button>`;
     }
     handleClick() {
-        const parentModal = this.closest("sonic-modal");
+        const parentModal = HTML.getClosestElement(this, "sonic-modal");
         parentModal.hide();
     }
 };