@supersoniks/concorde 3.1.0 → 3.1.1

package/build-infos.json

@@ -1 +1 @@
-{"date":1715077059}
+{"date":1715539406}

package/package.json

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

package/src/core/components/functional/list/list.md

@@ -121,9 +121,14 @@ Enables the list to get data from an external API in order to fill its **props**
 See the [Fetch] web component(#core/components/functional/fetch/fetch.md/fetch)
 <sonic-code>
   <template>
-    <sonic-list props='["a", "b", "c"]' debug fetch serviceURL="https://reqres.in" dataProvider="api/users" key="data" class="grid grid-cols-1">
+    <sonic-list 
+    props='["a", "b", "c"]' fetch
+    serviceURL="https://reqres.in"
+    dataProvider="api/users" 
+    key="data"
+    class="grid grid-cols-1" debug>
         <template>
-          <docs-preview-user-item></docs-preview-user-item>
+          <docs-user></docs-user>
         </template>
     </sonic-list>
   </template>
@@ -188,7 +193,7 @@ Note that we use:
     </form>
   </div>
   <sonic-card  dataProvider="profileInfos">
-    <docs-preview-user-item ></docs-preview-user-item>
+    <docs-user ></docs-user>
   </sonic-card>
   </template>
 </sonic-code> -->

package/src/core/components/ui/_css/scroll.ts

@@ -1,4 +1,4 @@
-import {css} from "lit";
+import { css } from "lit";
 
 export const customScroll = css`
   .custom-scroll {
@@ -16,7 +16,8 @@ export const customScroll = css`
     }
 
     .custom-scroll::-webkit-scrollbar-thumb {
-      box-shadow: inset 0 0 2rem 2rem var(--sc-scrollbar-bg);
+      box-shadow: inset 0 0 2rem 2rem
+        var(--sc-scrollbar-bg, var(--sc-base-400, #222));
       border-radius: var(--sc-rounded);
       border: solid 0.15rem transparent;
     }

package/src/core/components/ui/_css/size.ts

@@ -1,4 +1,4 @@
-import {css} from "lit";
+import { css } from "lit";
 
 export type Size = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 
@@ -10,6 +10,7 @@ export const fontSize = css`
     font-size: var(--sc-fs);
     line-height: var(--sc-lh);
   }
+
   :host([size="2xs"]) {
     --sc-fs: 0.625rem;
   }
@@ -19,6 +20,9 @@ export const fontSize = css`
   :host([size="sm"]) {
     --sc-fs: 0.875rem;
   }
+  :host([size="md"]) {
+    --sc-fs: 1rem;
+  }
   :host([size="lg"]) {
     --sc-fs: 1.125rem;
   }

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

@@ -1,13 +1,13 @@
-import {html, LitElement, css, CSSResultGroup, PropertyValues} from "lit";
-import {customElement, property, queryAssignedNodes} from "lit/decorators.js";
-import {ifDefined} from "lit/directives/if-defined.js";
+import { html, LitElement, css, CSSResultGroup, PropertyValues } from "lit";
+import { customElement, property, queryAssignedNodes } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 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 FormCheckable from "@supersoniks/concorde/core/mixins/FormCheckable";
 import "@supersoniks/concorde/core/components/ui/icon/icon";
-import {unsafeHTML} from "lit/directives/unsafe-html.js";
-import {fontSize} from "@supersoniks/concorde/core/components/ui/_css/size";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
 
 const tagName = "sonic-checkbox";
 /**
@@ -32,7 +32,9 @@ const tagName = "sonic-checkbox";
  */
 
 @customElement(tagName)
-export class Checkbox extends FormCheckable(FormInput(FormElement(Subscriber(LitElement)))) {
+export class Checkbox extends FormCheckable(
+  FormInput(FormElement(Subscriber(LitElement)))
+) {
   static styles = [
     fontSize,
     css`
@@ -75,7 +77,8 @@ export class Checkbox extends FormCheckable(FormInput(FormElement(Subscriber(Lit
         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,
@@ -163,17 +166,17 @@ export class Checkbox extends FormCheckable(FormInput(FormElement(Subscriber(Lit
     ` as CSSResultGroup,
   ];
 
-  @property({type: Boolean, reflect: true}) touched = false;
-  @property({type: String}) iconName = "check";
-  @property({type: String}) indeterminateIconName = "minus-small";
-  @property({type: Boolean}) showAsIndeterminate = false;
+  @property({ type: Boolean, reflect: true }) touched = false;
+  @property({ type: String }) iconName = "check";
+  @property({ type: String }) indeterminateIconName = "minus-small";
+  @property({ type: Boolean }) showAsIndeterminate = false;
 
-  @property({type: Boolean}) hasDescription = false;
-  @property({type: Boolean}) hasLabel = false;
-  @queryAssignedNodes({flatten: true})
+  @property({ type: Boolean }) hasDescription = false;
+  @property({ type: Boolean }) hasLabel = false;
+  @queryAssignedNodes({ flatten: true })
   slotLabelNodes!: Array<Node>;
 
-  @queryAssignedNodes({slot: "description", flatten: true})
+  @queryAssignedNodes({ slot: "description", flatten: true })
   slotDescriptionNodes!: Array<Node>;
 
   connectedCallback() {
@@ -189,7 +192,8 @@ export class Checkbox extends FormCheckable(FormInput(FormElement(Subscriber(Lit
 
   hasSlotOrProps() {
     this.hasLabel = this.label || this.slotLabelNodes?.length ? true : false;
-    this.hasDescription = this.description || this.slotDescriptionNodes?.length ? true : false;
+    this.hasDescription =
+      this.description || this.slotDescriptionNodes?.length ? true : false;
   }
 
   render() {
@@ -213,16 +217,22 @@ export class Checkbox extends FormCheckable(FormInput(FormElement(Subscriber(Lit
             aria-labelledby=${ifDefined(this.ariaLabelledby)}
           />
           <sonic-icon name="${
-            this.checked == "indeterminate" || this.showAsIndeterminate ? this.indeterminateIconName : this.iconName
+            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"}">
+        <div class="checkbox-text ${
+          !this.hasDescription && !this.hasLabel ? "hidden" : "checkbox-text"
+        }">
             ${this.label ? unsafeHTML(this.label /*+ labelStarSuffix*/) : ""}
             <slot @slotchange=${this.hasSlotOrProps}></slot>
-            <slot @slotchange=${this.hasSlotOrProps} name="description" class="${this.hasDescription ? "description" : "hidden"} ">${
-              this.description ? html`${unsafeHTML(this.description)}` : ""
-            }</slot>
+            <slot @slotchange=${
+              this.hasSlotOrProps
+            } name="description" class="${
+      this.hasDescription ? "description" : "hidden"
+    } ">${this.description ? html`${unsafeHTML(this.description)}` : ""}</slot>
           </div>
         </label>
       </label>

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

@@ -1,14 +1,24 @@
-import {html, LitElement, PropertyValues, css, nothing} 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, passwordToggle} from "@supersoniks/concorde/core/components/ui/form/css/form-control";
+import { html, LitElement, PropertyValues, css, nothing } 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,
+  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";
-import {classMap} from "lit/directives/class-map.js";
-import {fontSize} from "@supersoniks/concorde/core/components/ui/_css/size";
-import {unsafeHTML} from "lit/directives/unsafe-html.js";
+import { classMap } from "lit/directives/class-map.js";
+import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
 /**
  * ### Le composent sonic-input étend les mixins FormInput, FormElement et Subscriber
@@ -44,32 +54,39 @@ export class Input extends FormInput(FormElement(Subscriber(LitElement))) {
   /**
    * Taille du composant, implique notamment des modifications de typo et de marge interne
    */
-  @property({type: String, reflect: true}) size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
-  @property({type: String}) list?: string;
-  @property({type: String}) placeholder?: string;
-  @property({type: String}) pattern?: string;
-  @property({type: String}) min?: string;
-  @property({type: String}) max?: string;
-  @property({type: Boolean}) readonly = false;
-  @property({type: Number}) step?: number;
-  @property({type: Number}) minlength?: number;
-  @property({type: Number}) maxlength?: number;
-  @property({type: String}) src?: string;
-
-  @property({type: Boolean, reflect: true}) inlineContent = false;
-  @property({type: Boolean}) disableInlineContentFocus = false;
-  @property({type: Boolean}) showPasswordToggle = false;
-
-  @queryAssignedNodes({slot: "label", flatten: true})
+  @property({ type: String, reflect: true }) size?:
+    | "2xs"
+    | "xs"
+    | "sm"
+    | "md"
+    | "lg"
+    | "xl"
+    | "2xl";
+  @property({ type: String }) list?: string;
+  @property({ type: String }) placeholder?: string;
+  @property({ type: String }) pattern?: string;
+  @property({ type: String }) min?: string;
+  @property({ type: String }) max?: string;
+  @property({ type: Boolean }) readonly = false;
+  @property({ type: Number }) step?: number;
+  @property({ type: Number }) minlength?: number;
+  @property({ type: Number }) maxlength?: number;
+  @property({ type: String }) src?: string;
+
+  @property({ type: Boolean, reflect: true }) inlineContent = false;
+  @property({ type: Boolean }) disableInlineContentFocus = false;
+  @property({ type: Boolean }) showPasswordToggle = false;
+
+  @queryAssignedNodes({ slot: "label", flatten: true })
   slotLabelNodes!: Array<Node>;
 
-  @queryAssignedNodes({slot: "description", flatten: true})
+  @queryAssignedNodes({ slot: "description", flatten: true })
   slotDescriptionNodes!: Array<Node>;
 
-  @queryAssignedNodes({slot: "suffix", flatten: true})
+  @queryAssignedNodes({ slot: "suffix", flatten: true })
   slotSuffixNodes!: Array<Node>;
 
-  @queryAssignedNodes({slot: "prefix", flatten: true})
+  @queryAssignedNodes({ slot: "prefix", flatten: true })
   slotPrefixNodes!: Array<Node>;
 
   @query("input") input!: HTMLInputElement;
@@ -88,7 +105,8 @@ export class Input extends FormInput(FormElement(Subscriber(LitElement))) {
     this.hasSlotOrProps();
     if (this.hasAttribute("sameValueAs")) {
       this.sameValueAsName = this.getAttribute("sameValueAs");
-      this.sameValueAsHandle = (v: string) => (this.pattern = this.escapeRegExp(v));
+      this.sameValueAsHandle = (v: string) =>
+        (this.pattern = this.escapeRegExp(v));
       const formPublisher = this.getFormPublisher();
       if (!formPublisher) return;
       formPublisher[this.sameValueAsName].onAssign(this.sameValueAsHandle);
@@ -123,7 +141,8 @@ export class Input extends FormInput(FormElement(Subscriber(LitElement))) {
 
   hasSlotOrProps() {
     this.hasLabel = this.label || this.slotLabelNodes?.length ? true : false;
-    this.hasDescription = this.description || this.slotDescriptionNodes?.length ? true : false;
+    this.hasDescription =
+      this.description || this.slotDescriptionNodes?.length ? true : false;
     this.hasSuffix = this.slotSuffixNodes?.length ? true : false;
     this.hasPrefix = this.slotPrefixNodes?.length ? true : false;
   }
@@ -140,7 +159,10 @@ export class Input extends FormInput(FormElement(Subscriber(LitElement))) {
       return;
     }
     if (this.changeTimeoutId) clearTimeout(this.changeTimeoutId);
-    this.changeTimeoutId = setTimeout(() => super.handleChange(e), parseInt(this.getAttribute("inputDelayMs")));
+    this.changeTimeoutId = setTimeout(
+      () => super.handleChange(e),
+      parseInt(this.getAttribute("inputDelayMs"))
+    );
   }
 
   // toggle password visibility
@@ -159,17 +181,24 @@ export class Input extends FormInput(FormElement(Subscriber(LitElement))) {
     };
     //let labelStarSuffix = this.label && this.required && this.label.indexOf("*") == -1 ? " *" : "";
     return html`
-      <label for="${this.id || "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 @click=${this.inlineContentFocus} class="form-control ${classMap(slotClasses)}">
-        <div part="content" class="${this.inlineContent ? "form-element form-element-wrapper" : "contents"}">
+      <div @click=${this.inlineContentFocus} class="form-control ${classMap(
+      slotClasses
+    )}">
+        <div part="content" class="${
+          this.inlineContent ? "form-element form-element-wrapper" : "contents"
+        }">
             <slot name="prefix" @slotchange=${this.hasSlotOrProps}></slot>
             <input
+              data-form-element
               part="input"
               id=${ifDefined(this.id || "form-element")}
               part="input"
@@ -206,7 +235,10 @@ export class Input extends FormInput(FormElement(Subscriber(LitElement))) {
                       aria-label="Toggle password visibility"
                       variant="unstyled"
                     >
-                      <sonic-icon library="heroicons" name=${this.isPassword ? "eye" : "eye-slash"}></sonic-icon>
+                      <sonic-icon
+                        library="heroicons"
+                        name=${this.isPassword ? "eye" : "eye-slash"}
+                      ></sonic-icon>
                     </sonic-button>`
                   : ""
               }
@@ -219,7 +251,9 @@ export class Input extends FormInput(FormElement(Subscriber(LitElement))) {
           name="description"
           @slotchange=${this.hasSlotOrProps}
           class="${this.hasDescription ? "form-description" : "hidden"}"
-        >${this.description ? html`${unsafeHTML(this.description)}` : nothing}</slot>
+        >${
+          this.description ? html`${unsafeHTML(this.description)}` : nothing
+        }</slot>
         <slot name="list"></slot>
       </div>
     `;

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

@@ -261,6 +261,7 @@ export class Select extends FormElement(Subscriber(LitElement)) {
         <slot name="prefix" @slotchange=${this.hasSlotOrProps}></slot>
         <div class="form-select-wrapper">
           <select
+            data-form-element
             id="form-element"
             @change=${this.handleChange}
             @blur=${this.handleBlur}

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

@@ -52,12 +52,11 @@
 ## Size
 <sonic-code>
   <template>
-  <div class="grid gap-3">
+  <div class="grid gap-4">
     <sonic-textarea size="2xs" value="2xs"></sonic-textarea>
     <sonic-textarea size="xs" value="xs"></sonic-textarea>
     <sonic-textarea size="sm" value="sm"></sonic-textarea>
-    <sonic-textarea size="md" value="md"></sonic-textarea>
-    <sonic-textarea value="default"></sonic-textarea>
+    <sonic-textarea value="md / default"></sonic-textarea>
     <sonic-textarea size="lg" value="lg"></sonic-textarea>
     <sonic-textarea size="xl" value="xl"></sonic-textarea>
     <sonic-textarea size="2xl" value="2xl"></sonic-textarea>

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

@@ -1,14 +1,23 @@
-import {css, html, LitElement, PropertyValues} from "lit";
-import {customElement, property, queryAssignedNodes, state} from "lit/decorators.js";
-import {ifDefined} from "lit/directives/if-defined.js";
-import {description, formControl, label} from "@supersoniks/concorde/core/components/ui/form/css/form-control";
+import { css, html, LitElement, PropertyValues } from "lit";
+import {
+  customElement,
+  property,
+  queryAssignedNodes,
+  state,
+} from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+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";
+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";
 
@@ -31,20 +40,26 @@ export class Textarea extends FormInput(FormElement(Subscriber(LitElement))) {
   // @property({ type: String })
   // type: "" | "primary" | "warning" | "danger" | "success" | "info" = "";
   // @property({ type: String }) variant: "" | "ghost" | "outline" = "";
-  @property({type: String}) size: "" | "xs" | "sm" | "lg" = "";
-  @property({type: Number}) rows?: number;
-  @property({type: Number}) cols?: number;
-  @property({type: Number}) maxlength?: number;
-  @property({type: Number}) minlength?: number;
-  @property({type: String}) wrap?: "hard" | "soft";
-  @property({type: Boolean}) readonly = false;
-  @property({type: String}) placeholder?: string;
-  @property({type: String}) resize?: "none" | "both" | "horizontal" | "vertical" | "block" | "inline";
+  @property({ type: String }) size: "" | "xs" | "sm" | "lg" = "";
+  @property({ type: Number }) rows?: number;
+  @property({ type: Number }) cols?: number;
+  @property({ type: Number }) maxlength?: number;
+  @property({ type: Number }) minlength?: number;
+  @property({ type: String }) wrap?: "hard" | "soft";
+  @property({ type: Boolean }) readonly = false;
+  @property({ type: String }) placeholder?: string;
+  @property({ type: String }) resize?:
+    | "none"
+    | "both"
+    | "horizontal"
+    | "vertical"
+    | "block"
+    | "inline";
 
-  @queryAssignedNodes({slot: "label", flatten: true})
+  @queryAssignedNodes({ slot: "label", flatten: true })
   slotLabelNodes!: Array<Node>;
 
-  @queryAssignedNodes({slot: "description", flatten: true})
+  @queryAssignedNodes({ slot: "description", flatten: true })
   slotDescriptionNodes!: Array<Node>;
 
   @state() hasDescription = false;
@@ -61,11 +76,14 @@ export class Textarea extends FormInput(FormElement(Subscriber(LitElement))) {
 
   hasSlotOrProps() {
     this.hasLabel = this.label || this.slotLabelNodes?.length ? true : false;
-    this.hasDescription = this.description || this.slotDescriptionNodes?.length ? true : false;
+    this.hasDescription =
+      this.description || this.slotDescriptionNodes?.length ? true : false;
   }
 
   validateFormElement() {
-    const textarea: HTMLTextAreaElement = this.shadowRoot?.querySelector("textarea") as HTMLTextAreaElement;
+    const textarea: HTMLTextAreaElement = this.shadowRoot?.querySelector(
+      "textarea"
+    ) as HTMLTextAreaElement;
     if (!textarea || textarea.checkValidity()) return;
     const formPublisher = this.getFormPublisher();
     if (formPublisher) {
@@ -80,12 +98,18 @@ export class Textarea extends FormInput(FormElement(Subscriber(LitElement))) {
     };
     // let labelStarSuffix = this.label && this.required && this.label.indexOf("*") == -1 ? " *" : "";
     return html`
-      <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
+        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
+          data-form-element
           id="${this.id || "form-element"}"
           @input=${this.handleChange}
           @blur=${this.handleBlur}
@@ -111,7 +135,10 @@ ${this.value}</textarea
         >
       </div>
 
-      <slot name="description" @slotchange=${this.hasSlotOrProps} class="${this.hasDescription ? "form-description" : "hidden"}"
+      <slot
+        name="description"
+        @slotchange=${this.hasSlotOrProps}
+        class="${this.hasDescription ? "form-description" : "hidden"}"
         >${this.description ? html`${unsafeHTML(this.description)}` : ""}</slot
       >
     `;

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

@@ -1,5 +1,7 @@
 # Progress bar
 
+Displays an indicator showing the completion progress of a task.
+
 ## Indeterminate
 
 <sonic-code>
@@ -54,12 +56,8 @@
 
 <sonic-code>
   <template>
-<div class="bg-neutral-800 p-4 rounded">
-  <sonic-progress invert value="50">50%</sonic-progress>
-  <sonic-progress invert type="info" value="50">50%</sonic-progress>
-  <sonic-progress invert type="warning" value="50">50%</sonic-progress>
-  <sonic-progress invert type="success" value="50">50%</sonic-progress>
-  <sonic-progress invert type="danger" value="50">50%</sonic-progress>
+<div class="bg-neutral-900 p-4 rounded-md">
+  <sonic-progress  type="invert" value="50">50%</sonic-progress>
 </div>
   </template>
 </sonic-code>

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

@@ -1,7 +1,10 @@
-import {html, LitElement, css} from "lit";
-import {customElement, property} from "lit/decorators.js";
-import {ifDefined} from "lit/directives/if-defined.js";
-import {fontSize} from "@supersoniks/concorde/core/components/ui/_css/size";
+import { html, LitElement, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import {
+  fontSize,
+  Size,
+} from "@supersoniks/concorde/core/components/ui/_css/size";
 
 const tagName = "sonic-progress";
 
@@ -85,8 +88,13 @@ export class Progress extends LitElement {
         --sc-progress-color: var(--sc-success);
       }
 
+      :host([type="invert"]) {
+        --sc-progress-bg: rgba(190, 190, 190, 0.125);
+        --sc-progress-color: var(--sc-base);
+      }
+
       :host([invert]) {
-        --sc-progress-bg: rgba(200, 200, 200, 0.1);
+        --sc-progress-bg: rgba(190, 190, 190, 0.125);
       }
 
       :host([type="default"][invert]) {
@@ -115,14 +123,21 @@ export class Progress extends LitElement {
     `,
   ];
 
-  @property({type: Number}) value?: number;
-  @property({type: Number}) max = 100;
-  @property({type: Boolean}) invert = false;
-
-  @property({type: String, reflect: true})
-  type: "default" | "primary" | "warning" | "danger" | "success" | "info" = "default";
-
-  @property({type: String, reflect: true}) size: "xs" | "sm" | "md" | "lg" | "xl" = "md";
+  @property({ type: Number }) value?: number;
+  @property({ type: Number }) max = 100;
+  @property({ type: Boolean }) invert = false;
+
+  @property({ type: String, reflect: true })
+  type:
+    | "default"
+    | "primary"
+    | "warning"
+    | "danger"
+    | "success"
+    | "info"
+    | "invert" = "default";
+
+  @property({ type: String, reflect: true }) size?: Size;
 
   render() {
     return html`