@supersoniks/concorde 1.1.45 → 1.1.47

package/core/components/ui/alert/alert.js

@@ -27,22 +27,34 @@ let Alert = class Alert extends LitElement {
          * Titre du message d'erreur
          */
         this.label = "";
+        this.noIcon = false;
         /**
          * Peut être renseigné dans le slot pour créer des messages plus complexes
          */
         this.text = "";
+        this.dismissible = false;
         this.background = false;
         this.status = "default";
     }
     render() {
         return html `<div part="alert" class="alert">
-      <div>${this.status && html `<sonic-icon name=${icon[this.status]}></sonic-icon>`}</div>
+      ${!this.noIcon
+            ? html `<div>${this.status && html `<sonic-icon name=${icon[this.status]}></sonic-icon>`}</div>`
+            : nothing}
       <div>
         ${this.label ? html `<span class="label">${unsafeHTML(this.label)}</span>` : nothing}
         <slot>${this.text}</slot>
       </div>
+      ${this.dismissible
+            ? html `<sonic-button @click=${this.close} class="close-btn" variant="unstyled" shape="circle">
+            <sonic-icon name="cancel" size="lg"></sonic-icon>
+          </sonic-button>`
+            : nothing}
     </div>`;
     }
+    close() {
+        this.remove();
+    }
 };
 Alert.styles = [
     fontSize,
@@ -84,10 +96,12 @@ Alert.styles = [
       }
 
       /*background*/
+      :host([dismissible]) .alert,
       :host([background]) .alert {
         background: var(--sc-base);
         padding: 0.8em 1.15em;
       }
+      :host([dismissible]) .alert:before,
       :host([background]) .alert:before {
         background-color: currentColor;
         content: "";
@@ -101,6 +115,7 @@ Alert.styles = [
         border-radius: var(--sc-alert-rounded);
         pointer-events: none;
       }
+      :host([dismissible]) > div,
       :host([background]) > div {
         z-index: 2;
         position: relative;
@@ -117,17 +132,34 @@ Alert.styles = [
       :host([size="sm"]) .alert {
         --sc-alert-rounded: var(--sc-rounded-sm);
       }
+
+      /*Dismissible*/
+      :host([dismissible]) .alert {
+        padding-right: 3rem;
+      }
+      :host([dismissible]) .close-btn {
+        padding: 0.5em;
+        position: absolute;
+        top: 0.25rem;
+        right: 0.25rem;
+      }
     `,
 ];
 __decorate([
     property({ type: String })
 ], Alert.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Alert.prototype, "noIcon", void 0);
 __decorate([
     property({ type: String })
 ], Alert.prototype, "text", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], Alert.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Alert.prototype, "dismissible", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Alert.prototype, "background", void 0);

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

@@ -10,7 +10,7 @@ export declare class Badge extends LitElement {
     /**
      * Le type change surtout la couleur composant
      */
-    type: "default" | "primary" | "warning" | "danger" | "success" | "info";
+    type: "default" | "primary" | "warning" | "danger" | "success" | "info" | "neutral";
     /**
      * Le composant par defaut sans se paramètre à forte afordance
      * * gost : composant super léger visuellement

package/core/components/ui/badge/badge.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
+import { fontSize, } from "@supersoniks/concorde/core/components/ui/_css/size";
 const tagName = "sonic-badge";
 /**
  * Un badge simple avec deux slots, un nommé prefix et un nomé suffix de manière à pouvoir mettre (par exemple) une icone avant ou après le contenu.
@@ -50,9 +50,10 @@ Badge.styles = [
 
         --sc-badge-border-with: var(--sc-form-border-width, 0.1rem);
         --sc-badge-border-color: transparent;
-        --sc-badge-border: var(--sc-badge-border-with) solid var(--sc-badge-border-color);
+        --sc-badge-border: var(--sc-badge-border-with) solid
+          var(--sc-badge-border-color);
 
-        --sc-badge-rounded: 99px;
+        --sc-badge-rounded: 0.85em;
         --sc-badge-fw: var(--sc-font-weight-base);
 
         display: inline-flex;
@@ -129,6 +130,11 @@ Badge.styles = [
         --sc-badge-gap: 0.5em;
       }
 
+      :host([contrast]) {
+        --sc-badge-color: var(--sc-contrast-content);
+        --sc-badge-bg: var(--sc-contrast);
+      }
+
       /*OUTLINE*/
       :host([variant="outline"][type]) {
         border-width: var(--sc-badge-border-with) !important;

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

@@ -58,6 +58,7 @@ declare const Button_base: {
         requestUpdate(): void;
         getAttribute(name: string): string;
         hasAttribute(attributeName: string): boolean;
+        getBoundingClientRect(): DOMRect;
     };
 } & (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;
 /**
@@ -150,6 +151,7 @@ export declare class Button extends Button_base {
     private _location;
     get location(): string;
     set location(value: string);
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
     render(): import("lit-html").TemplateResult<1>;
     onSlotChange(): void;
 }

package/core/components/ui/button/button.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import LocationHandler from "@supersoniks/concorde/core/utils/LocationHandler";
 import { html, LitElement, css } from "lit";
-import { customElement, property, queryAssignedElements, state } from "lit/decorators.js";
+import { customElement, property, queryAssignedElements, state, } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
 import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
 import FormCheckable from "@supersoniks/concorde/core/mixins/FormCheckable";
@@ -88,7 +88,6 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
         this._href = value;
         if (this.href && this.href.indexOf("http") != 0) {
             LocationHandler.onChange(this);
-            this.location = document.location.href.replace(document.location.origin, "");
         }
         else
             LocationHandler.offChange(this);
@@ -113,7 +112,9 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
              * On on veut pouvoir rest un autre form que celui qui contient le bouton
              */
             const resetDataProvider = this.getAttribute("reset");
-            const formPublisher = resetDataProvider ? PublisherManager.get(resetDataProvider) : this.getFormPublisher();
+            const formPublisher = resetDataProvider
+                ? PublisherManager.get(resetDataProvider)
+                : this.getFormPublisher();
             if (formPublisher)
                 formPublisher.set({});
         }
@@ -141,7 +142,14 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
     }
     set location(value) {
         this._location = value;
-        LocationHandler.updateComponentActiveState(this);
+        this.requestUpdate();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has("location") ||
+            changedProperties.has("href") ||
+            changedProperties.has("autoActive")) {
+            LocationHandler.updateComponentActiveState(this);
+        }
     }
     render() {
         const btnStyles = {
@@ -160,10 +168,20 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
         aria-labelledby=${ifDefined(this.ariaLabelledby)}
         @click=${this.handleChange}
       >
-        <slot @slotchange=${this.onSlotChange} part="prefix" name="prefix"></slot>
+        <slot
+          @slotchange=${this.onSlotChange}
+          part="prefix"
+          name="prefix"
+        ></slot>
         <slot part="main" class="main-slot"></slot>
-        <slot @slotchange=${this.onSlotChange} part="suffix" name="suffix"></slot>
-        ${this.loading == true ? html `<sonic-icon name="loader" class="loader"></sonic-icon>` : ""}
+        <slot
+          @slotchange=${this.onSlotChange}
+          part="suffix"
+          name="suffix"
+        ></slot>
+        ${this.loading == true
+            ? html `<sonic-icon name="loader" class="loader"></sonic-icon>`
+            : ""}
       </button>
     `;
         return this.href
@@ -172,7 +190,9 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
           target=${ifDefined(this.target)}
           aria-label=${ifDefined(this.ariaLabel)}
           aria-labelledby=${ifDefined(this.ariaLabelledby)}
-          @click=${this.pushState || this.goBack !== null ? this.handleNavigation : null}
+          @click=${this.pushState || this.goBack !== null
+                ? this.handleNavigation
+                : null}
           >${btn}</a
         >`
             : html `${btn}`;
@@ -205,7 +225,10 @@ Button.styles = [
         --sc-btn-border-width: var(--sc-form-border-width);
         --sc-btn-border-color: transparent;
 
-        --btn-outline-bg-hover: var(--sc-btn-outline-bg-hover, var(--sc-base-100));
+        --btn-outline-bg-hover: var(
+          --sc-btn-outline-bg-hover,
+          var(--sc-base-100)
+        );
         --sc-btn-ghost-bg-hover: var(--sc-base-100);
 
         --sc-btn-active-color: var(--sc-base);
@@ -243,8 +266,8 @@ Button.styles = [
         cursor: pointer;
         text-align: center;
         line-height: 1.1;
-        border-radius: var(--sc-item-rounded-tl) var(--sc-item-rounded-tr) var(--sc-item-rounded-br)
-          var(--sc-item-rounded-bl);
+        border-radius: var(--sc-item-rounded-tl) var(--sc-item-rounded-tr)
+          var(--sc-item-rounded-br) var(--sc-item-rounded-bl);
 
         background: var(--btn-bg);
         color: var(--btn-color);
@@ -254,7 +277,8 @@ Button.styles = [
         padding-left: var(--sc-btn-px);
         padding-right: var(--sc-btn-px);
 
-        border: var(--sc-btn-border-width) var(--sc-btn-border-style) var(--sc-btn-border-color);
+        border: var(--sc-btn-border-width) var(--sc-btn-border-style)
+          var(--sc-btn-border-color);
         min-height: var(--sc-btn-height);
       }
 
@@ -471,6 +495,7 @@ Button.styles = [
       /*BOUTON Avec icone seulement*/
       :host([icon]) ::slotted(sonic-icon) {
         font-size: 1.2em;
+        vertical-align: middle;
       }
 
       /*Tooltip ne joue pas sur le layout*/

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

@@ -59,6 +59,7 @@ declare const Checkbox_base: {
         requestUpdate(): void;
         getAttribute(name: string): string;
         hasAttribute(attributeName: string): boolean;
+        getBoundingClientRect(): DOMRect;
     };
 } & {
     new (...args: any[]): {
@@ -136,6 +137,7 @@ declare const Checkbox_base: {
         getAttribute(name: string): string;
         hasAttribute(attributeName: string): boolean;
         disconnectedCallback(): void;
+        getBoundingClientRect(): DOMRect;
     };
 } & (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;
 /**
@@ -163,6 +165,7 @@ export declare class Checkbox extends Checkbox_base {
     touched: boolean;
     iconName: string;
     indeterminateIconName: string;
+    showAsIndeterminate: boolean;
     hasDescription: boolean;
     hasLabel: boolean;
     slotLabelNodes: Array<Node>;

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

@@ -41,6 +41,7 @@ let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscr
         this.touched = false;
         this.iconName = "check";
         this.indeterminateIconName = "minus-small";
+        this.showAsIndeterminate = false;
         this.hasDescription = false;
         this.hasLabel = false;
     }
@@ -56,7 +57,8 @@ let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscr
     hasSlotOrProps() {
         var _a, _b;
         this.hasLabel = this.label || ((_a = this.slotLabelNodes) === null || _a === void 0 ? void 0 : _a.length) ? true : false;
-        this.hasDescription = this.description || ((_b = this.slotDescriptionNodes) === null || _b === void 0 ? void 0 : _b.length) ? true : false;
+        this.hasDescription =
+            this.description || ((_b = this.slotDescriptionNodes) === null || _b === void 0 ? void 0 : _b.length) ? true : false;
     }
     render() {
         //let labelStarSuffix = this.label && this.required && this.label.indexOf("*") == -1 ? " *" : "";
@@ -69,6 +71,7 @@ let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscr
             @click=${this.handleChange}
             @blur=${this.handleBlur}
             ?required=${this.required}
+            ?data-indeterminate=${this.showAsIndeterminate}
             .disabled=${ifDefined(this.disabled)}
             .checked=${ifDefined(this.checked)}
             .name=${this.name}
@@ -77,7 +80,9 @@ let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscr
             aria-label=${ifDefined(this.ariaLabel)}
             aria-labelledby=${ifDefined(this.ariaLabelledby)}
           />
-          <sonic-icon name="${this.checked == "indeterminate" ? this.indeterminateIconName : this.iconName}" class="sc-input-icon"></sonic-icon>
+          <sonic-icon name="${this.checked == "indeterminate" || this.showAsIndeterminate
+            ? this.indeterminateIconName
+            : this.iconName}" class="sc-input-icon"></sonic-icon>
         </span>
 
         <div class="checkbox-text ${!this.hasDescription && !this.hasLabel ? "hidden" : "checkbox-text"}">
@@ -134,7 +139,8 @@ Checkbox.styles = [
         outline: none;
         margin: 0;
         background-color: var(--sc-checkbox-bg);
-        border: var(--sc-checkbox-border-width) solid var(--sc-checkbox-border-color);
+        border: var(--sc-checkbox-border-width) solid
+          var(--sc-checkbox-border-color);
       }
 
       input:focus,
@@ -169,11 +175,13 @@ Checkbox.styles = [
 
       /*Active */
       input:checked,
+      input[data-indeterminate],
       input[checked] {
         --sc-checkbox-border-color: var(--sc-primary);
         --sc-checkbox-bg: var(--sc-primary);
       }
       input:checked + sonic-icon,
+      input[data-indeterminate] + sonic-icon,
       input[checked] + sonic-icon {
         --sc-checkbox-color: var(--sc-primary-content);
         transform: translateX(-50%) translateY(-50%) scale(1);
@@ -228,6 +236,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Checkbox.prototype, "indeterminateIconName", void 0);
+__decorate([
+    property({ type: Boolean })
+], Checkbox.prototype, "showAsIndeterminate", void 0);
 __decorate([
     property({ type: Boolean })
 ], Checkbox.prototype, "hasDescription", void 0);

package/core/components/ui/form/css/form-control.d.ts

@@ -1,3 +1,4 @@
+export declare const passwordToggle: import("lit").CSSResult;
 export declare const label: import("lit").CSSResult;
 export declare const description: import("lit").CSSResult;
 export declare const formControl: import("lit").CSSResult;

package/core/components/ui/form/css/form-control.js

@@ -1,4 +1,16 @@
 import { css } from "lit";
+export const passwordToggle = css `
+  .password-toggle {
+    color: var(--sc-input-c);
+    font-size: var(--sc-input-fs);
+    cursor: pointer;
+    margin-right: calc(-0.5 * var(--sc-input-px));
+  }
+
+  :host([inlineContent]) .has-suffix .password-toggle {
+    margin-right: 0;
+  }
+`;
 export const label = css `
   :host {
     --sc-label-fs: var(--sc-fs, 1rem);
@@ -168,6 +180,11 @@ export const formControl = css `
     margin-left: auto;
   }
 
+  :host([inlineContent]) .no-suffix slot[name="suffix"],
+  :host([inlineContent]) .no-prefix slot[name="prefix"] {
+    display: none;
+  }
+
   /* :host([inlineContent]) .input {
 
   }*/

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

@@ -50,14 +50,12 @@ declare const Input_base: {
         removeAttribute(name: string): void;
         initPublisher(): void;
         getApiConfiguration(): import("../../../../utils/api").APIConfiguration;
-        /**
-         * Taille du composant, implique notamment des modifications de typo et de marge interne
-         */
         connectedCallback(): void;
         requestUpdate(): void;
         getAttribute(name: string): string;
         hasAttribute(attributeName: string): boolean;
         disconnectedCallback(): void;
+        getBoundingClientRect(): DOMRect;
     };
 } & (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 Input extends Input_base {
@@ -78,6 +76,7 @@ export declare class Input extends Input_base {
     src?: string;
     inlineContent: boolean;
     disableInlineContentFocus: boolean;
+    showPasswordToggle: boolean;
     slotLabelNodes: Array<Node>;
     slotDescriptionNodes: Array<Node>;
     slotSuffixNodes: Array<Node>;
@@ -87,6 +86,7 @@ export declare class Input extends Input_base {
     hasLabel: boolean;
     hasSuffix: boolean;
     hasPrefix: boolean;
+    isPassword: boolean;
     sameValueAsHandle?: (v: string) => void;
     sameValueAsName?: string;
     connectedCallback(): void;
@@ -96,6 +96,7 @@ export declare class Input extends Input_base {
     inlineContentFocus(): void;
     changeTimeoutId?: ReturnType<typeof setTimeout>;
     handleChange(e?: Event): void;
+    togglePasswordVisibility(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

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

@@ -8,7 +8,7 @@ import { html, LitElement, css } from "lit";
 import { customElement, property, queryAssignedNodes, state } from "lit/decorators.js";
 import { query } from "lit/decorators/query.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { formControl, label, description } from "@supersoniks/concorde/core/components/ui/form/css/form-control";
+import { formControl, label, description, passwordToggle, } 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";
@@ -32,10 +32,12 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
         this.readonly = false;
         this.inlineContent = false;
         this.disableInlineContentFocus = false;
+        this.showPasswordToggle = false;
         this.hasDescription = false;
         this.hasLabel = false;
         this.hasSuffix = false;
         this.hasPrefix = false;
+        this.isPassword = false;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -48,6 +50,11 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
                 return;
             formPublisher[this.sameValueAsName].onAssign(this.sameValueAsHandle);
         }
+        if (this.type == "password") {
+            this.isPassword = true;
+            this.showPasswordToggle = true;
+            this.inlineContent = true;
+        }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -84,10 +91,19 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
             clearTimeout(this.changeTimeoutId);
         this.changeTimeoutId = setTimeout(() => super.handleChange(e), parseInt(this.getAttribute("inputDelayMs")));
     }
+    // toggle password visibility
+    togglePasswordVisibility() {
+        this.isPassword = !this.isPassword;
+        this._type = this.isPassword ? "password" : "text";
+        console.log(this.isPassword);
+        // this.type = this.isPassword ? "password" : "text";
+    }
     render() {
         const slotClasses = {
             "has-prefix": this.hasPrefix,
             "has-suffix": this.hasSuffix,
+            "no-suffix": !this.hasSuffix,
+            "no-prefix": !this.hasPrefix,
         };
         //let labelStarSuffix = this.label && this.required && this.label.indexOf("*") == -1 ? " *" : "";
         return html `
@@ -128,6 +144,17 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
               .name=${this.name}
               .value=${this.value}
             />
+              ${this.showPasswordToggle
+            ? html `<sonic-button
+                      shape="circle"
+                      class="password-toggle"
+                      @click=${this.togglePasswordVisibility}
+                      aria-label="Toggle password visibility"
+                      variant="unstyled"
+                    >
+                      <sonic-icon library="heroicons" name=${this.isPassword ? "eye" : "eye-slash"}></sonic-icon>
+                    </sonic-button>`
+            : ""}
             <slot name="suffix" @slotchange=${this.hasSlotOrProps}></slot>
           </div>
         </div>
@@ -148,11 +175,15 @@ Input.styles = [
     formControl,
     label,
     description,
+    passwordToggle,
     css `
       :host([type="hidden"]) {
         appearance: none !important;
         display: none !important;
       }
+      :host > .form-control {
+        position: relative;
+      }
     `,
 ];
 __decorate([
@@ -194,6 +225,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], Input.prototype, "disableInlineContentFocus", void 0);
+__decorate([
+    property({ type: Boolean })
+], Input.prototype, "showPasswordToggle", void 0);
 __decorate([
     queryAssignedNodes({ slot: "label" })
 ], Input.prototype, "slotLabelNodes", void 0);
@@ -221,6 +255,9 @@ __decorate([
 __decorate([
     state()
 ], Input.prototype, "hasPrefix", void 0);
+__decorate([
+    state()
+], Input.prototype, "isPassword", void 0);
 Input = __decorate([
     customElement(tagName)
 ], Input);

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

@@ -55,6 +55,7 @@ declare const Textarea_base: {
         getAttribute(name: string): string;
         hasAttribute(attributeName: string): boolean;
         disconnectedCallback(): void;
+        getBoundingClientRect(): DOMRect;
     };
 } & (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 {

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

@@ -44,7 +44,7 @@ let Icon = class Icon extends LitElement {
             return;
         this.renderId++;
         const frameRenderId = this.renderId;
-        window.requestAnimationFrame(() => __awaiter(this, void 0, void 0, function* () {
+        (window.queueMicrotask || window.requestAnimationFrame)(() => __awaiter(this, void 0, void 0, function* () {
             if (frameRenderId != this.renderId) {
                 return;
             }

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

@@ -5,9 +5,11 @@ export declare class Image extends LitElement {
     src: string;
     alt: string;
     loading: "eager" | "lazy";
+    transition?: "fade" | "fade-scale-out";
     ratio: string;
     objectPosition: string;
     imageRendering: string;
     cover: boolean;
+    firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/core/components/ui/image/image.js

@@ -20,6 +20,17 @@ let Image = class Image extends LitElement {
         this.imageRendering = "auto";
         this.cover = false;
     }
+    firstUpdated() {
+        var _a;
+        if (this.transition) {
+            const img = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("img");
+            if (!img)
+                return;
+            img.onload = function () {
+                img.classList.add("loaded");
+            };
+        }
+    }
     render() {
         const imgStyles = {
             aspectRatio: this.cover ? "auto" : this.ratio,
@@ -93,6 +104,20 @@ Image.styles = [
         height: 100% !important;
         width: 100% !important;
       }
+
+      :host([transition]) img {
+        opacity: 0;
+        transition: 0.25s;
+      }
+
+      :host([transition="fade-scale-out"]) img {
+        scale: 1.08;
+        transition: opacity 0.3s linear, scale 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+      }
+      :host([transition]) img.loaded {
+        opacity: 1;
+        scale: 1;
+      }
     `,
 ];
 __decorate([
@@ -107,6 +132,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Image.prototype, "loading", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Image.prototype, "transition", void 0);
 __decorate([
     property({ type: String })
 ], Image.prototype, "ratio", void 0);

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

@@ -26,9 +26,8 @@ ModalClose.styles = [
         display: block;
         align-self: flex-end;
         height: 0;
-        top: 0;
-        padding-top: 0.5rem;
-        padding-right: 0.5rem;
+        top: 0.5rem;
+        right: 0.5rem;
         transform: translate3d(calc(var(--sc-modal-px)), calc(-1 * var(--sc-modal-py)), 0);
         z-index: 20;
       }

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

@@ -16,6 +16,7 @@ ModalContent.styles = [
     css `
       :host {
         display: block;
+        width: 100%;
       }
     `,
 ];

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

@@ -6,17 +6,25 @@ import "@supersoniks/concorde/core/components/ui/modal/modal-subtitle";
 import "@supersoniks/concorde/core/components/ui/modal/modal-title";
 declare type ModalCreateOptions = {
     content?: string;
+    zIndex?: string;
+    paddingX?: string;
+    paddingY?: string;
+    width?: string;
+    maxWidth?: string;
+    removeOnHide?: boolean;
 };
 declare const Modal_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<import("@supersoniks/concorde/core/_types/types").CoreJSType>) & typeof LitElement;
 export declare class Modal extends Modal_base {
     static styles: import("lit").CSSResult[];
     forceAction: boolean;
+    removeOnHide: boolean;
     align: "center" | "right" | "left";
     padding: string;
     maxWidth: string;
     maxHeight: string;
     width: string;
     height: string;
+    zIndex: string;
     fullScreen: boolean;
     visible: boolean;
     modalWrapper: HTMLDivElement;