@supersoniks/concorde 3.1.40 → 3.1.42

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

@@ -15,8 +15,8 @@ export const passwordToggle = css`
 
 export const label = css`
   :host {
-    --sc-label-fs: var(--sc-fs, 1rem);
-    --sc-label-fw: var(--sc-label-font-weight);
+    --sc-label-fs: var(--sc-_fs, 1rem);
+    --sc-label-fw: var(--sc-label-font-weight, 500);
   }
   label {
     font-size: var(--sc-label-fs);
@@ -31,7 +31,7 @@ export const label = css`
 
 export const description = css`
   .form-description {
-    color: var(--sc-base-400);
+    color: var(--sc-base-400, var(--sc-base-content, #000));
     font-size: 0.85em;
     margin-top: 0.2em;
     display: block;
@@ -44,23 +44,26 @@ export const formControl = css`
   }
 
   :host {
-    --sc-input-height: var(--sc-form-height);
-    --sc-input-c: var(--sc-input-color, var(--sc-base-content));
+    --sc-input-height: var(--sc-form-height, 2.5em);
+    --sc-input-c: var(--sc-input-color, var(--sc-base-content, #000));
     --sc-input-b-width: var(--sc-form-border-width);
-    --sc-input-b-color: var(--sc-input-border-color);
+    --sc-input-b-color: var(
+      --sc-input-border-color,
+      var(--sc-base-content, #000)
+    );
 
     --sc-item-rounded-tr: var(--sc-input-rounded);
     --sc-item-rounded-tl: var(--sc-input-rounded);
     --sc-item-rounded-bl: var(--sc-input-rounded);
     --sc-item-rounded-br: var(--sc-input-rounded);
 
-    --sc-input-fs: var(--sc-fs, 1rem);
+    --sc-input-fs: var(--sc-_fs, 1rem);
     --sc-input-ff: inherit;
     --sc-input-py: 0.55em;
     --sc-input-px: clamp(0.3em, 8%, 1.1em);
 
     --sc-input-background: var(--sc-input-bg);
-    --sc-input-addon-c: var(--sc-input-addon-color, var(--sc-base));
+    --sc-input-addon-c: var(--sc-input-addon-color, var(--sc-base, #fff));
     --sc-input-addon-bg: var(--sc-input-c);
   }
 
@@ -158,7 +161,7 @@ export const formControl = css`
     display: flex;
     align-items: center;
     gap: 0.35em;
-    min-height: var(--sc-form-height);
+    min-height: var(--sc-form-height, 2.5em);
   }
 
   :host([inlineContent]) .form-element .form-element {
@@ -225,7 +228,7 @@ export const formControl = css`
   /*PLACEHOLDER*/
   ::placeholder {
     color: inherit;
-    opacity: 0.45;
+    opacity: 0.6;
   }
 
   :host([placehoderAsLabel]) ::placeholder {
@@ -249,13 +252,6 @@ export const formControl = css`
     display: block;
   }
 
-  .form-description {
-    color: var(--sc-base-400);
-    font-size: 0.85em;
-    margin-top: 0.2em;
-    display: block;
-  }
-
   /*Utilitaires*/
   .hidden {
     display: none;
@@ -266,7 +262,7 @@ export const formControl = css`
 
   /*ERROR*/
   :host([error]) {
-    --sc-input-b-color: var(--sc-danger);
+    --sc-input-b-color: var(--sc-danger, var(--sc-base-content, #000));
   }
 
   :host input:visited {
@@ -274,22 +270,22 @@ export const formControl = css`
   }
 
   :host([touched][required]) :not(:focus):invalid {
-    --sc-input-b-color: var(--sc-danger);
-    --sc-input-c: var(--sc-danger);
+    --sc-input-b-color: var(--sc-danger, var(--sc-base-content, #000));
+    --sc-input-c: var(--sc-danger, var(--sc-base-content, #000));
   }
 
   :host([touched][required]) :not(:focus):invalid + .select-chevron {
-    --sc-input-c: var(--sc-danger);
+    --sc-input-c: var(--sc-danger, var(--sc-base-content, #000));
   }
 
   /*VALID*/
   :host([touched][required]) :not([value=""]):not(:focus):valid {
-    --sc-input-b-color: var(--sc-success);
-    --sc-input-c: var(--sc-success);
+    --sc-input-b-color: var(--sc-success, var(--sc-base-content, #000));
+    --sc-input-c: var(--sc-success, var(--sc-base-content, #000));
   }
 
   :host([touched][required]) :not(:focus):valid + .select-chevron {
-    --sc-input-c: var(--sc-success);
+    --sc-input-c: var(--sc-success, var(--sc-base-content, #000));
   }
 
   /*Input COLOR*/
@@ -358,33 +354,33 @@ export const formControl = css`
 
   /*type color "default" | "success" | "error" | "warning"  | "info" */
   :host([status="success"]) {
-    --sc-input-b-color: var(--sc-success);
-    --sc-input-c: var(--sc-success);
-    --sc-input-addon-bg: var(--sc-success);
-    --sc-input-addon-color: var(--sc-success-content);
+    --sc-input-b-color: var(--sc-success, var(--sc-base-content, #000));
+    --sc-input-c: var(--sc-success, var(--sc-base-content, #000));
+    --sc-input-addon-bg: var(--sc-success, var(--sc-base-content, #000));
+    --sc-input-addon-color: var(--sc-success-content, var(--sc-base, #fff));
   }
   :host([status="error"]) {
-    --sc-input-b-color: var(--sc-danger);
-    --sc-input-c: var(--sc-danger);
-    --sc-input-addon-bg: var(--sc-danger);
-    --sc-input-addon-color: var(--sc-danger-content);
+    --sc-input-b-color: var(--sc-danger, var(--sc-base-content, #000));
+    --sc-input-c: var(--sc-danger, var(--sc-base-content, #000));
+    --sc-input-addon-bg: var(--sc-danger, var(--sc-base-content, #000));
+    --sc-input-addon-color: var(--sc-danger-content, var(--sc-base, #fff));
   }
   :host([status="warning"]) {
     --sc-input-b-color: var(--sc-warning);
-    --sc-input-c: var(--sc-warning);
-    --sc-input-addon-bg: var(--sc-warning);
-    --sc-input-addon-color: var(--sc-warning-content);
+    --sc-input-c: var(--sc-warning, var(--sc-base-content, #000));
+    --sc-input-addon-bg: var(--sc-warning, var(--sc-base-content, #000));
+    --sc-input-addon-color: var(--sc-warning-content, var(--sc-base, #fff));
   }
   :host([status="info"]) {
-    --sc-input-b-color: var(--sc-info);
-    --sc-input-c: var(--sc-info);
-    --sc-input-addon-bg: var(--sc-info);
-    --sc-input-addon-color: var(--sc-info-content);
+    --sc-input-b-color: var(--sc-info, var(--sc-base-content, #000));
+    --sc-input-c: var(--sc-info, var(--sc-base-content, #000));
+    --sc-input-addon-bg: var(--sc-info, var(--sc-base-content, #000));
+    --sc-input-addon-color: var(--sc-info-content, var(--sc-base, #fff));
   }
   :host([status="primary"]) {
-    --sc-input-b-color: var(--sc-primary);
-    --sc-input-c: var(--sc-primary);
-    --sc-input-addon-bg: var(--sc-primary);
-    --sc-input-addon-color: var(--sc-primary-content);
+    --sc-input-b-color: var(--sc-primary, var(--sc-base-content, #000));
+    --sc-input-c: var(--sc-primary, var(--sc-base-content, #000));
+    --sc-input-addon-bg: var(--sc-primary, var(--sc-base-content, #000));
+    --sc-input-addon-color: var(--sc-primary-content, var(--sc-base, #fff));
   }
 `;

package/src/core/components/ui/form/fieldset/legend-description.ts

@@ -1,5 +1,5 @@
-import {html, LitElement, css} from "lit";
-import {customElement} from "lit/decorators.js";
+import { html, LitElement, css } from "lit";
+import { customElement } from "lit/decorators.js";
 
 @customElement("sonic-legend-description")
 export class LegendDescription extends LitElement {
@@ -9,9 +9,9 @@ export class LegendDescription extends LitElement {
         font-size: 1.15rem;
         line-height: 1.2;
         display: block;
-        color: var(--sc-base-500);
-        font-weight: var(--sc-font-weight-base);
-        font-style: var(--sc-font-style-base);
+        color: var(--sc-base-500, var(--sc-base-content, #000));
+        font-weight: var(--sc-font-weight-base, 400);
+        font-style: var(--sc-font-style-base, normal);
         margin-top: 0.2em;
       }
     `,

package/src/core/components/ui/form/fieldset/legend.ts

@@ -1,8 +1,8 @@
-import {html, LitElement, css} from "lit";
-import {customElement, property} from "lit/decorators.js";
+import { html, LitElement, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
 import "@supersoniks/concorde/core/components/ui/form/fieldset/legend-description";
-import {unsafeHTML} from "lit/directives/unsafe-html.js";
-import {ifDefined} from "lit/directives/if-defined.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 
 const tagName = "sonic-legend";
 
@@ -12,11 +12,14 @@ export class Legend extends LitElement {
     css`
       :host {
         --sc-legend-font-size: 1.5rem;
-        --sc-legend-font-weight: var(--sc-font-weight-base);
-        --sc-legend-font-style: var(--sc-headings-font-style);
-        --sc-legend-family: var(--sc-headings-font-family);
-        --sc-legend-line-height: var(--sc-headings-line-height);
-        --sc-legend-color: var(--sc-base-content);
+        --sc-legend-font-weight: var(--sc-font-weight-base, 400);
+        --sc-legend-font-style: var(--sc-headings-font-style, normal);
+        --sc-legend-family: var(
+          --sc-headings-font-family,
+          var(--sc-font-family-base, sans-serif)
+        );
+        --sc-legend-line-height: var(--sc-headings-line-height, 1.1);
+        --sc-legend-color: var(--sc-base-content, #000);
         display: flex;
         width: 100%;
       }
@@ -47,13 +50,14 @@ export class Legend extends LitElement {
     `,
   ];
 
-  @property({type: Boolean}) forceAutoFill = false;
+  @property({ type: Boolean }) forceAutoFill = false;
   _description?: string;
   @property() get description(): string | undefined {
     return this._description;
   }
   set description(value) {
-    if (this.hasAttribute("description") && !this.forceAutoFill) value = this.getAttribute("description") as string;
+    if (this.hasAttribute("description") && !this.forceAutoFill)
+      value = this.getAttribute("description") as string;
     this._description = value;
     this.requestUpdate();
   }
@@ -62,26 +66,35 @@ export class Legend extends LitElement {
     return this._label;
   }
   set label(value) {
-    if (this.hasAttribute("label") && !this.forceAutoFill) value = this.getAttribute("label") as string;
+    if (this.hasAttribute("label") && !this.forceAutoFill)
+      value = this.getAttribute("label") as string;
     this._label = value;
     this.requestUpdate();
   }
 
-  @property({type: String}) iconName?: string;
-  @property({type: String}) iconLibrary?: string;
-  @property({type: String}) iconPrefix?: string;
+  @property({ type: String }) iconName?: string;
+  @property({ type: String }) iconLibrary?: string;
+  @property({ type: String }) iconPrefix?: string;
 
   render() {
     return html`<legend part="legend">
       ${this.iconName
         ? html`<div class="icon">
-            <sonic-icon name=${this.iconName} prefix=${ifDefined(this.iconPrefix)} library=${ifDefined(this.iconLibrary)}></sonic-icon>
+            <sonic-icon
+              name=${this.iconName}
+              prefix=${ifDefined(this.iconPrefix)}
+              library=${ifDefined(this.iconLibrary)}
+            ></sonic-icon>
           </div>`
         : ""}
 
       <div class="legend-content">
         ${unsafeHTML(this.label ? this.label : "")}
-        ${this.description ? html`<sonic-legend-description>${unsafeHTML(this.description)}</sonic-legend-description>` : ""}
+        ${this.description
+          ? html`<sonic-legend-description
+              >${unsafeHTML(this.description)}</sonic-legend-description
+            >`
+          : ""}
         <slot></slot>
       </div>
       <slot name="suffix"></slot>

package/src/core/components/ui/form/input/input.md

@@ -108,7 +108,7 @@
 
 <sonic-code>
   <template>
-  <div class="grid grid-cols-4 gap-3">
+  <div class="grid grid-cols-2 gap-3">
     <sonic-input inlineContent type="search" label="Search icon in input" placeholder="Search plane">
       <sonic-icon library="iconoir" name="search" slot="prefix"></sonic-icon>
     </sonic-input>
@@ -127,31 +127,30 @@
 ## Example of use
 <sonic-code>
   <template>
-  <sonic-theme color background theme=${theme} class="p-8">
-    <sonic-input
-      formDataProvider="input-filter"
-      name="contains"
-      value="chien"
-    ></sonic-input>
-    <sonic-subscriber dataProvider="input-filter" class="text-xl my-4 block font-bold">
-      Blagues trouvées pour "<span data-bind ::inner-html="$contains"></span>" :
-    </sonic-subscriber>
-    <sonic-queue
-      lazyload
-      dataProviderExpression="joke/Any?amount=10&lang=fr"
-      dataFilterProvider="input-filter"
-      serviceURL="https://v2.jokeapi.dev"
-      key="jokes"
-    >
-      <template>
-        <div class="border-0 border-b-[1px] border-b-neutral-300 border-dotted py-3">
-          <div data-bind ::inner-html="$joke"></div>
-          <div data-bind ::inner-html="$setup"></div>
-          <div data-bind ::inner-html="$delivery"></div>
-        </div>
-      </template>
-    </sonic-queue>
-  </sonic-theme>
+  <sonic-input
+    formDataProvider="input-filter"
+    name="contains"
+    value="chien"
+    class="mb-4"
+  ></sonic-input>
+  <sonic-subscriber dataProvider="input-filter" class="text-xl my-4 block font-bold">
+    Blagues trouvées pour "<span data-bind ::inner-html="$contains"></span>" :
+  </sonic-subscriber>
+  <sonic-queue
+    lazyload
+    dataProviderExpression="joke/Any?amount=10&lang=fr"
+    dataFilterProvider="input-filter"
+    serviceURL="https://v2.jokeapi.dev"
+    key="jokes"
+  >
+    <template>
+      <div class="border-0 border-b-[1px] border-b-neutral-300 border-dotted py-3">
+        <div data-bind ::inner-html="$joke"></div>
+        <div data-bind ::inner-html="$setup"></div>
+        <div data-bind ::inner-html="$delivery"></div>
+      </div>
+    </template>
+  </sonic-queue>
   </template>
 </sonic-code>
 

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

@@ -166,7 +166,9 @@ export class Input extends FormInput(FormElement(Subscriber(LitElement))) {
   }
 
   // toggle password visibility
-  togglePasswordVisibility() {
+  togglePasswordVisibility(e: Event) {
+    e.preventDefault();
+    e.stopPropagation();
     this.isPassword = !this.isPassword;
     this._type = this.isPassword ? "password" : "text";
     // this.type = this.isPassword ? "password" : "text";
@@ -232,7 +234,7 @@ export class Input extends FormInput(FormElement(Subscriber(LitElement))) {
                       shape="circle"
                       class="password-toggle"
                       @click=${this.togglePasswordVisibility}
-                      aria-label="Toggle password visibility"
+                      data-aria-label="Toggle password visibility"
                       variant="unstyled"
                     >
                       <sonic-icon

package/src/core/components/ui/form/input-autocomplete/input-autocomplete.ts

@@ -113,7 +113,10 @@ export class InputAutocomplete extends TemplatesContainer(
     );
     // Si la liste de this.queueDataProvider est bien initialisée, mais qu'aucun item ne correspond à la recherche
     // On affiche quand même la valeur dans le champ de recherche, car il provient directement du formDataProvider
-    if (found === false) {
+    if (
+      found === false &&
+      (!this.searchParameter || this.searchParameter === this.name)
+    ) {
       this.lastValidSearch = value;
       this.searchPublisher?.set(this.lastValidSearch);
     }
@@ -181,7 +184,6 @@ export class InputAutocomplete extends TemplatesContainer(
   connectedCallback() {
     super.connectedCallback();
 
-
     /**
      * Nom de la valeur de recherche
      * Si non défini, on utilise name
@@ -266,10 +268,14 @@ export class InputAutocomplete extends TemplatesContainer(
   ) {
     const queuePublisher = PublisherManager.get(queueDataProvider);
     let listItem: ListItem | undefined;
-    const listsDescriptors = queuePublisher.get();
-    if (!Array.isArray(listsDescriptors)) return;
+    let listsDescriptors = queuePublisher.get();
+
+    if (!listsDescriptors || !Array.isArray(listsDescriptors)) {
+      return false;
+    }
+    if (!listsDescriptors.length) return false;
     for (const listDescriptor of listsDescriptors) {
-      const list = PublisherManager.get(listDescriptor.dataProvider).get();
+      let list = PublisherManager.get(listDescriptor.dataProvider).get();
       if (!Array.isArray(list)) continue;
       listItem = list.find(itemFinder);
       if (listItem) {
@@ -302,6 +308,7 @@ export class InputAutocomplete extends TemplatesContainer(
       <sonic-pop noToggle style="display:block;" @hide=${this.handleHide}>
         <sonic-input
           dataProvider="${this.initSearchDataProvider + Math.random()}"
+          noAutofill
           formDataProvider="${this.searchDataProvider}"
           type="search"
           data-keyboard-nav="${this.getAttribute("data-keyboard-nav") || ""}"
@@ -310,7 +317,7 @@ export class InputAutocomplete extends TemplatesContainer(
           name="${ifDefined(this.searchParameter || this.name)}"
           placeholder="${ifDefined(this.placeholder)}"
           ?readonly="${this.readonly}"
-          autocomplete="${Math.random()}"
+          autocomplete="off"
           clearable
           inlineContent
           size=${this.size}

package/src/core/components/ui/form/radio/radio.md

@@ -53,7 +53,6 @@
 ## Example of use
 <sonic-code>
   <template>
-    <sonic-theme color background theme=${theme} class="p-8">
       <sonic-subscriber dataProvider="jokeFilterRadio" class="text-xl my-4 block font-bold">
         Remove following jokes :
         <sonic-value key="blacklistFlags" class="block text-sm"></sonic-value>
@@ -81,6 +80,5 @@
           </div>
         </template>
       </sonic-queue>
-    </sonic-theme>
   </template>
 </sonic-code>

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

@@ -1,6 +1,6 @@
-import {css} from "lit";
-import {customElement} from "lit/decorators.js";
-import {Checkbox} from "@supersoniks/concorde/core/components/ui/form/checkbox/checkbox";
+import { css } from "lit";
+import { customElement } from "lit/decorators.js";
+import { Checkbox } from "@supersoniks/concorde/core/components/ui/form/checkbox/checkbox";
 
 const tagName = "sonic-radio";
 /**
@@ -21,12 +21,14 @@ export class Radio extends Checkbox {
       :host sonic-icon {
         border-radius: 50%;
         overflow: hidden;
-        background-color: var(--sc-primary-content);
+        background-color: var(--sc-primary-content, var(--sc-base, #fff));
         line-height: 0;
         display: block;
         font-size: 1em;
         height: 0.6em;
+        height: round(0.6em, 1px);
         width: 0.6em;
+        width: round(0.6em, 1px);
       }
     `,
   ];

package/src/core/components/ui/form/select/select.md

@@ -67,33 +67,31 @@
 ## Example of use
 <sonic-code>
   <template>
-    <sonic-theme color background theme=${theme} class="p-8">
-      <sonic-select
-        formDataProvider="select-filter"
-        name="lang"
-        value="fr"
-      >
-      <option value="fr">fr<option>
-      <optionn value="en">en<option>
-      </sonic-select>
-      <sonic-subscriber dataProvider="select-filter" class="text-xl my-4 block font-bold">
-        Blagues trouvées pour le code de langue"<span data-bind ::inner-html="$lang"></span>" :
-      </sonic-subscriber>
-      <sonic-queue
-        lazyload
-        dataProviderExpression="joke/Any?amount=10"
-        dataFilterProvider="select-filter"
-        serviceURL="https://v2.jokeapi.dev"
-        key="jokes"
-      >
-        <template>
-          <div class="border-0 border-b-[1px] border-b-neutral-300 border-dotted py-3">
-            <div data-bind ::inner-html="$joke"></div>
-            <div data-bind ::inner-html="$setup"></div>
-            <div data-bind ::inner-html="$delivery"></div>
-          </div>
-        </template>
-      </sonic-queue>
-    </sonic-theme>
+    <sonic-select
+      formDataProvider="select-filter"
+      name="lang"
+      value="fr"
+    >
+    <option value="fr">fr<option>
+    <optionn value="en">en<option>
+    </sonic-select>
+    <sonic-subscriber dataProvider="select-filter" class="text-xl my-4 block font-bold">
+      Blagues trouvées pour le code de langue"<span data-bind ::inner-html="$lang"></span>" :
+    </sonic-subscriber>
+    <sonic-queue
+      lazyload
+      dataProviderExpression="joke/Any?amount=10"
+      dataFilterProvider="select-filter"
+      serviceURL="https://v2.jokeapi.dev"
+      key="jokes"
+    >
+      <template>
+        <div class="border-0 border-b-[1px] border-b-neutral-300 border-dotted py-3">
+          <div data-bind ::inner-html="$joke"></div>
+          <div data-bind ::inner-html="$setup"></div>
+          <div data-bind ::inner-html="$delivery"></div>
+        </div>
+      </template>
+    </sonic-queue>
   </template>
 </sonic-code>

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

@@ -85,8 +85,8 @@ export class Select extends FormElement(Subscriber(LitElement)) {
 
       option {
         padding: 0.1rem var(--sc-input-px);
-        color: var(--sc-base-content);
-        background: var(--sc-base);
+        color: var(--sc-base-content, #000);
+        background: var(--sc-base, #fff);
       }
 
       select[multiple] option {

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

@@ -51,13 +51,13 @@ export class Textarea extends FormInput(FormElement(Subscriber(LitElement))) {
   @property({ type: String }) wrap?: "hard" | "soft";
   @property({ type: Boolean }) readonly = false;
   @property({ type: String }) placeholder?: string;
-  @property({ type: String }) resize?:
+  @property({ type: String }) resize:
     | "none"
     | "both"
     | "horizontal"
     | "vertical"
     | "block"
-    | "inline";
+    | "inline" = "vertical";
 
   @queryAssignedNodes({ slot: "label", flatten: true })
   slotLabelNodes!: Array<Node>;

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

@@ -1,6 +1,6 @@
-import {html, LitElement, css} from "lit";
-import {customElement, property} from "lit/decorators.js";
-import {styleMap} from "lit/directives/style-map.js";
+import { html, LitElement, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
 const tagName = "sonic-image";
 @customElement(tagName)
 export class Image extends LitElement {
@@ -8,7 +8,7 @@ export class Image extends LitElement {
     css`
       :host {
         --sc-img-radius: 0;
-        --sc-img-bg: var(--sc-placeholder-bg);
+        --sc-img-bg: var(--sc-placeholder-bg, rgba(12, 12, 12, 0.05));
         border-radius: var(--sc-img-radius);
         display: block;
         width: 100%;
@@ -72,7 +72,8 @@ export class Image extends LitElement {
 
       :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);
+        transition: opacity 0.3s linear,
+          scale 0.3s cubic-bezier(0.16, 1, 0.3, 1);
       }
       :host([transition]) img.loaded {
         opacity: 1;
@@ -81,17 +82,27 @@ export class Image extends LitElement {
     `,
   ];
 
-  @property({type: String}) rounded: "" | "none" | "full" | "sm" | "md" | "lg" = "none";
-  @property({type: String}) src = "";
-  @property({type: String}) alt = "";
-  @property({type: String}) loading: "eager" | "lazy" = "lazy";
-  @property({type: String, reflect: true}) transition?: "fade" | "fade-scale-out";
-  @property({type: String}) ratio = "auto";
-  @property({type: String}) objectPosition = "center center";
-  @property({type: String}) imageRendering = "auto";
-  @property({type: Boolean, reflect: true}) cover = false;
+  @property({ type: String }) rounded:
+    | ""
+    | "none"
+    | "full"
+    | "sm"
+    | "md"
+    | "lg" = "none";
+  @property({ type: String }) src = "";
+  @property({ type: String }) alt = "";
+  @property({ type: String }) loading: "eager" | "lazy" = "lazy";
+  @property({ type: String, reflect: true }) transition?:
+    | "fade"
+    | "fade-scale-out";
+  @property({ type: String }) ratio = "auto";
+  @property({ type: String }) objectPosition = "center center";
+  @property({ type: String }) imageRendering = "auto";
+  @property({ type: Boolean, reflect: true }) cover = false;
 
-  firstUpdated(changedProperties: Map<string | number | symbol, unknown>): void {
+  firstUpdated(
+    changedProperties: Map<string | number | symbol, unknown>
+  ): void {
     if (this.transition) {
       const img = this.shadowRoot?.querySelector("img");
       if (!img) return;
@@ -110,7 +121,12 @@ export class Image extends LitElement {
     };
     return html`<div part="image">
       <picture part="picture"
-        ><img part="img" src="${this.src}" loading="${this.loading}" alt="${this.alt}" style=${styleMap(imgStyles)}
+        ><img
+          part="img"
+          src="${this.src}"
+          loading="${this.loading}"
+          alt="${this.alt}"
+          style=${styleMap(imgStyles)}
       /></picture>
     </div>`;
   }