@saasquatch/mint-components 1.5.0-2 → 1.5.0-23

package/dist/collection/components/sqm-task-card/progress-bar/progress-bar-view.js

@@ -1,13 +1,9 @@
 import { h } from "@stencil/core";
 import jss from "jss";
 import preset from "jss-preset-default";
-import * as SVGs from "./SVGs";
+import { Gift } from "./SVGs";
 export function ProgressBarView(props) {
   const { progress = 0, goal = 1, steps = false, progressBarUnit = "", repeatable = false, expired = false, finite = 0, } = props;
-  //   console.log("progress bar props", props);
-  const gift1 = SVGs.gift();
-  const gift2 = SVGs.gift();
-  const gift3 = SVGs.gift();
   var items = [];
   var columns = "";
   if (repeatable) {
@@ -128,11 +124,8 @@ export function ProgressBarView(props) {
         marginLeft: "-100px",
         marginRight: "-100px",
         position: "relative",
-        display: "list-item",
-        listStyleType: "none",
         top: "-18px",
         filter: goal <= progress ? "" : "grayscale(100%)",
-        zIndex: "1",
       },
     },
   };
@@ -158,7 +151,7 @@ export function ProgressBarView(props) {
       : progressBarUnit + clamp(progress, 0, goal)));
     items.push(h("div", { class: "remain" }));
     items.push(h("div", { class: "progress bg" }, progressBarUnit + goal));
-    items.push(h("div", { class: "gift" }, gift1));
+    items.push(h("div", { class: "gift" }, h(Gift, null)));
   }
   function addSteps() {
     let ratio = 1 / goal;
@@ -179,14 +172,14 @@ export function ProgressBarView(props) {
       columns += "0fr ";
       items.push(h("div", { class: "filled" }));
       items.push(h("div", { class: "progress bg" }, goal));
-      items.push(h("div", { class: "gift" }, gift1));
+      items.push(h("div", { class: "gift" }, h(Gift, null)));
     }
     // reward fail
     else {
       columns += "0fr ";
       items.push(h("div", { class: "remain" }));
       items.push(h("div", { class: "empty bg" }, goal));
-      items.push(h("div", { class: "gift" }, gift1));
+      items.push(h("div", { class: "gift" }, h(Gift, null)));
     }
   }
   function addLinearRepeatable() {
@@ -199,10 +192,10 @@ export function ProgressBarView(props) {
       items.push(h("div", { class: progress == goal ? "progress top bg" : "progress top" }, progressBarUnit + progress));
       items.push(h("div", { class: "remain" }));
       items.push(h("div", { class: "progress bg" }, progressBarUnit + goal));
-      items.push(h("div", { class: "gift" }, gift1));
+      items.push(h("div", { class: "gift" }, h(Gift, null)));
       items.push(h("div", { class: "remain" }));
       items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * 2));
-      items.push(h("div", { class: "gift bw" }, gift2));
+      items.push(h("div", { class: "gift bw" }, h(Gift, null)));
     }
     // single repetition
     else if (repetitions == 1) {
@@ -210,18 +203,18 @@ export function ProgressBarView(props) {
         "0.5fr 0fr 0fr " + ratio + "fr 0fr " + (0.5 - ratio) + "fr 0fr 0fr";
       items.push(h("div", { class: "filled" }));
       items.push(h("div", { class: "progress bg" }, progressBarUnit + goal));
-      items.push(h("div", { class: "gift" }, gift1));
+      items.push(h("div", { class: "gift" }, h(Gift, null)));
       items.push(h("div", { class: "filled" }));
       items.push(h("div", { class: progress == goal ? "progress top bg" : "progress top" }, progress == goal ? "" : progressBarUnit + progress));
       items.push(h("div", { class: "remain" }));
       items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * 2));
-      items.push(h("div", { class: "gift bw" }, gift2));
+      items.push(h("div", { class: "gift bw" }, h(Gift, null)));
     }
     // finite repetition hit
     else if (finite && repetitions >= finite) {
       if (repetitions > 2) {
         items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (finite - 2)));
-        items.push(h("div", { class: "gift start" }, gift1));
+        items.push(h("div", { class: "gift start" }, h(Gift, null)));
         columns = "0fr 0fr 0.5fr 0fr 0fr 0.5fr 0fr 0fr";
       }
       else {
@@ -229,10 +222,10 @@ export function ProgressBarView(props) {
       }
       items.push(h("div", { class: "filled" }));
       items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (finite - 1)));
-      items.push(h("div", { class: "gift" }, gift2));
+      items.push(h("div", { class: "gift" }, h(Gift, null)));
       items.push(h("div", { class: "filled" }));
       items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * finite));
-      items.push(h("div", { class: "gift" }, gift3));
+      items.push(h("div", { class: "gift" }, h(Gift, null)));
     }
     // multiple repetitions
     else {
@@ -243,15 +236,15 @@ export function ProgressBarView(props) {
           (0.5 - ratio) +
           "fr 0fr 0fr";
       items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (repetitions - 1)));
-      items.push(h("div", { class: "gift start" }, gift1));
+      items.push(h("div", { class: "gift start" }, h(Gift, null)));
       items.push(h("div", { class: "filled" }));
       items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * repetitions));
-      items.push(h("div", { class: "gift" }, gift2));
+      items.push(h("div", { class: "gift" }, h(Gift, null)));
       items.push(h("div", { class: "filled" }));
       items.push(h("div", { class: progress == goal * repetitions ? "progress top bg" : "progress top" }, progress == goal * repetitions ? "" : progressBarUnit + progress));
       items.push(h("div", { class: "remain" }));
       items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (repetitions + 1)));
-      items.push(h("div", { class: "gift bw" }, gift3));
+      items.push(h("div", { class: "gift bw" }, h(Gift, null)));
     }
   }
   function addStepsRepeatable() {
@@ -266,13 +259,13 @@ export function ProgressBarView(props) {
             columns += "0fr ";
             items.push(h("div", { class: "remain" }));
             items.push(h("div", { class: "empty bg" }, goal));
-            items.push(h("div", { class: "gift bw" }, gift1));
+            items.push(h("div", { class: "gift bw" }, h(Gift, null)));
           }
           else if (i == goal * 2) {
             columns += "0fr 0fr";
             items.push(h("div", { class: "remain" }));
             items.push(h("div", { class: "empty bg" }, goal * 2));
-            items.push(h("div", { class: "gift bw" }, gift2));
+            items.push(h("div", { class: "gift bw" }, h(Gift, null)));
           }
           else {
             items.push(h("div", { class: "remain" }));
@@ -283,7 +276,7 @@ export function ProgressBarView(props) {
           columns += "0fr ";
           items.push(h("div", { class: "filled" }));
           items.push(h("div", { class: "progress bg" }, i));
-          items.push(h("div", { class: "gift" }, gift3));
+          items.push(h("div", { class: "gift" }, h(Gift, null)));
         }
         else {
           items.push(h("div", { class: "filled" }));
@@ -297,7 +290,7 @@ export function ProgressBarView(props) {
       if (repetitions > 2) {
         columns += "0fr 0fr ";
         items.push(h("div", { class: "progress bg" }, goal * (finite - 2)));
-        items.push(h("div", { class: "gift start" }, gift1));
+        items.push(h("div", { class: "gift start" }, h(Gift, null)));
       }
       for (let i = 1; i < goal * 2 + 1; i++) {
         columns += ratio + "fr 0fr ";
@@ -306,20 +299,20 @@ export function ProgressBarView(props) {
             columns += "0fr ";
             items.push(h("div", { class: "remain" }));
             items.push(h("div", { class: "progress bg" }, goal * (finite - 1)));
-            items.push(h("div", { class: "gift bw" }, gift1));
+            items.push(h("div", { class: "gift bw" }, h(Gift, null)));
           }
         }
         else if (i == goal) {
           columns += "0fr ";
           items.push(h("div", { class: "filled" }));
           items.push(h("div", { class: "progress bg" }, goal * (finite - 1)));
-          items.push(h("div", { class: "gift" }, gift2));
+          items.push(h("div", { class: "gift" }, h(Gift, null)));
         }
         else if (i == goal * 2) {
           columns += "0fr 0fr";
           items.push(h("div", { class: "filled" }));
           items.push(h("div", { class: "progress bg" }, goal * finite));
-          items.push(h("div", { class: "gift" }, gift3));
+          items.push(h("div", { class: "gift" }, h(Gift, null)));
         }
         else {
           items.push(h("div", { class: "filled" }));
@@ -333,7 +326,7 @@ export function ProgressBarView(props) {
       let ratio = 1 / goal;
       columns += "0fr 0fr ";
       items.push(h("div", { class: "progress bg" }, goal * (repetitions - 1)));
-      items.push(h("div", { class: "gift start" }, gift1));
+      items.push(h("div", { class: "gift start" }, h(Gift, null)));
       for (let i = 1; i < goal * 2 + 1; i++) {
         columns += ratio + "fr 0fr ";
         if (i <= goal) {
@@ -341,7 +334,7 @@ export function ProgressBarView(props) {
             columns += "0fr ";
             items.push(h("div", { class: "filled" }));
             items.push(h("div", { class: "progress bg" }, i + goal * (repetitions - 1)));
-            items.push(h("div", { class: "gift" }, gift2));
+            items.push(h("div", { class: "gift" }, h(Gift, null)));
           }
           else {
             items.push(h("div", { class: "filled" }));
@@ -353,7 +346,7 @@ export function ProgressBarView(props) {
             columns += "0fr 0fr";
             items.push(h("div", { class: "remain" }));
             items.push(h("div", { class: "empty bg" }, i + goal * (repetitions - 1)));
-            items.push(h("div", { class: "gift bw" }, gift3));
+            items.push(h("div", { class: "gift bw" }, h(Gift, null)));
           }
           else {
             items.push(h("div", { class: "remain" }));

package/dist/collection/components/sqm-task-card/sqm-task-card-view.js

@@ -1,25 +1,26 @@
 import { h } from "@stencil/core";
 import jss from "jss";
 import preset from "jss-preset-default";
-import { HostBlock } from "../../global/mixins";
 import * as SVGs from "./SVGs";
 import { ProgressBarView, } from "./progress-bar/progress-bar-view";
 import { DateTime } from "luxon";
+import { intl } from "../../global/global";
 export function TaskCardView(props) {
-  //   console.log({ props });
   const checkmark_circle = SVGs.checkmark_circle();
   const checkmark_filled = SVGs.checkmark_filled();
   const arrow_left_right = SVGs.arrow_left_right();
   const style = {
-    HostBlock: HostBlock,
     TaskCard: {
+      display: "inline-block",
+      width: "100%",
       "& .main": {
         position: "relative",
         boxSizing: "border-box",
-        minWidth: "347px",
+        // minWidth: "347px",
         background: "var(--sl-color-neutral-0)",
         border: "1px solid var(--sl-color-neutral-200)",
         borderRadius: "var(--sl-border-radius-medium)",
+        boxShadow: "1px 2px 4px rgba(211, 211, 211, 0.2)",
         fontSize: "var(--sl-font-size-small)",
         lineHeight: "var(--sl-line-height-dense)",
         color: "var(--sl-color-neutral-600)",
@@ -29,7 +30,7 @@ export function TaskCardView(props) {
         borderColor: "var(--sl-color-primary-500)",
       },
       "& .main.expired": {
-        color: "var(--sl-color-neutral-400)",
+        color: "var(--sl-color-neutral-600)",
         background: "var(--sl-color-neutral-50)",
       },
       "& .title": {
@@ -41,17 +42,43 @@ export function TaskCardView(props) {
         margin: "var(--sl-spacing-medium)",
       },
       "& .container.subdued": {
-        opacity: "0.66",
+        opacity: "0.45",
       },
       "& .container > div": {
         margin: "var(--sl-spacing-medium) 0",
       },
     },
-    Expired: {
-      margin: "var(--sl-spacing-medium)",
-      marginBottom: "calc(var(--sl-spacing-x-small)*-1)",
+    NotStarted: {
+      padding: "var(--sl-spacing-medium)",
+      color: "var(--sl-color-primary-600)",
+      border: "1px solid var(--sl-color-neutral-200)",
+      borderRadius: "var(--sl-border-radius-medium) var(--sl-border-radius-medium) 0 0",
+      borderBottom: "none",
+      background: "var(--sl-color-primary-50)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+      lineHeight: "var(--sl-line-height-dense)",
+      "& .icon": {
+        position: "relative",
+        top: "0.1em",
+        marginRight: "var(--sl-spacing-small)",
+        color: "var(--sl-color-primary-500)",
+      },
+    },
+    Ended: {
+      padding: "var(--sl-spacing-medium)",
       color: "var(--sl-color-warning-600)",
+      border: "1px solid var(--sl-color-neutral-200)",
+      borderRadius: "var(--sl-border-radius-medium) var(--sl-border-radius-medium) 0 0",
+      borderBottom: "none",
+      background: "var(--sl-color-warning-50)",
       fontWeight: "var(--sl-font-weight-semibold)",
+      lineHeight: "var(--sl-line-height-dense)",
+      "& .icon": {
+        position: "relative",
+        top: "0.1em",
+        marginRight: "var(--sl-spacing-small)",
+        color: "var(--sl-color-warning-500)",
+      },
     },
     Header: {
       display: "flex",
@@ -122,7 +149,7 @@ export function TaskCardView(props) {
         },
       },
       "& .neutral": {
-        color: "var(--sl-color-neutral-400)",
+        color: "var(--sl-color-neutral-600)",
       },
     },
   };
@@ -141,16 +168,42 @@ export function TaskCardView(props) {
   const taskEnded = props.showExpiry && dateEnd <= dateToday;
   const taskNotStarted = props.showExpiry && dateToday <= dateStart;
   const taskUnavailable = taskEnded || taskNotStarted;
+  const vanillaStyle = `
+	:host{
+		display: block;
+		margin-bottom: var(--sl-spacing-large);
+	}
+  `;
   return (h("div", { class: sheet.classes.TaskCard },
-    h("div", { class: taskUnavailable
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    !props.loading && taskNotStarted && (h("div", { class: sheet.classes.NotStarted },
+      h("span", { class: "icon" },
+        h("sl-icon", { name: "info-circle-fill" })),
+      intl.formatMessage({
+        id: "startsOnMessage",
+        defaultMessage: props.startsOnMessage,
+      }, {
+        startDate: dateStart.toLocaleString(DateTime.DATE_MED),
+      }))),
+    !props.loading && taskEnded && (h("div", { class: sheet.classes.Ended },
+      h("span", { class: "icon" },
+        h("sl-icon", { name: "exclamation-triangle-fill" })),
+      intl.formatMessage({
+        id: "endedMessage",
+        defaultMessage: props.endedMessage,
+      }, {
+        endDate: dateEnd.toLocaleString(DateTime.DATE_MED),
+      }))),
+    h("div", { style: {
+        borderRadius: taskUnavailable &&
+          "0 0 var(--sl-border-radius-medium) var(--sl-border-radius-medium)",
+      }, class: taskUnavailable
         ? "main expired"
         : taskComplete
           ? "main complete"
           : "main" },
-      h("style", { type: "text/css" }, styleString),
-      taskUnavailable && (h("div", { class: sheet.classes.Expired }, taskEnded
-        ? "Ended " + dateEnd.toLocaleString(DateTime.DATE_MED)
-        : "Starts " + dateStart.toLocaleString(DateTime.DATE_MED))),
       h("div", { class: taskComplete || taskUnavailable ? "container subdued" : "container" },
         h("div", { class: sheet.classes.Header }, props.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
           showComplete && (h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, taskComplete ? checkmark_filled : checkmark_circle)),
@@ -171,13 +224,21 @@ export function TaskCardView(props) {
                   ? taskUnavailable
                     ? "neutral"
                     : "success"
-                  : "" }, "Completed " +
-                (props.finite
+                  : "" }, intl.formatMessage({
+                id: "completedMessage",
+                defaultMessage: props.completedText,
+              }, {
+                finite: props.finite,
+                count: props.finite
                   ? Math.min(repetitions, props.finite)
-                  : repetitions) +
-                (props.finite ? "/" + props.finite : "") +
-                " times"))),
-            props.showExpiry && !taskUnavailable && (h("span", null, "Ends " + dateEnd.toLocaleString(DateTime.DATE_FULL)))),
+                  : repetitions,
+              })))),
+            props.showExpiry && !taskUnavailable && (h("span", null, intl.formatMessage({
+              id: "expiryMessage",
+              defaultMessage: props.expiryMessage,
+            }, {
+              endDate: dateEnd.toLocaleString(DateTime.DATE_FULL),
+            })))),
           h("sl-button", { class: taskUnavailable
               ? "action neutral"
               : taskComplete
@@ -206,6 +267,7 @@ function Details(props) {
         },
         transformOrigin: "50% 37%",
         transition: "transform var(--sl-transition-medium) ease",
+        cursor: "pointer",
       },
       "& input:checked ~ .summary": {
         transition: "all var(--sl-transition-medium) ease",

package/dist/collection/components/sqm-task-card/sqm-task-card.js

@@ -52,12 +52,34 @@ export class TaskCard {
      * @uiName Show Goal Expiry
      */
     this.showExpiry = false;
+    /**
+     * @uiName Expiry Date Message
+     */
+    this.expiryMessage = "Ends {endDate}";
     /**
      * @uiName Reward Duration
      * @uiWidget DateRange
      * @uiOptions {"allowPastDates":true, "months": 1}
      */
     this.rewardDuration = "/";
+    /**
+     * Shown to users before the start of the task duration.
+     *
+     * @uiName Start Date Message
+     */
+    this.startsOnMessage = "Starts {startDate}";
+    /**
+     * Shown to users after the end of the task duration.
+     *
+     * @uiName Ended Date Message
+     */
+    this.endedMessage = "Ended {endDate}";
+    /**
+     * Displays the amount of times that a user has completed a repeatable task.
+     *
+     * @uiName Completed Count Text
+     */
+    this.completedText = "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}";
     /**
      * @uiName CTA Button Text
      */
@@ -83,8 +105,8 @@ export class TaskCard {
   disconnectedCallback() { }
   render() {
     const { props } = isDemo() ? useDemoBigStat(this) : useBigStat(this);
-    const { value, statvalue } = props;
-    return (h(TaskCardView, Object.assign({ progress: value, loading: !isDemo() && value === undefined }, getProps(this))));
+    const { value, loading } = props;
+    return (h(TaskCardView, Object.assign({ progress: value, loading: loading }, getProps(this))));
   }
   static get is() { return "sqm-task-card"; }
   static get encapsulation() { return "shadow"; }
@@ -319,6 +341,27 @@ export class TaskCard {
       "reflect": false,
       "defaultValue": "false"
     },
+    "expiryMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Expiry Date Message",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "expiry-message",
+      "reflect": false,
+      "defaultValue": "\"Ends {endDate}\""
+    },
     "rewardDuration": {
       "type": "string",
       "mutable": false,
@@ -346,6 +389,69 @@ export class TaskCard {
       "reflect": false,
       "defaultValue": "\"/\""
     },
+    "startsOnMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Start Date Message",
+            "name": "uiName"
+          }],
+        "text": "Shown to users before the start of the task duration."
+      },
+      "attribute": "starts-on-message",
+      "reflect": false,
+      "defaultValue": "\"Starts {startDate}\""
+    },
+    "endedMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Ended Date Message",
+            "name": "uiName"
+          }],
+        "text": "Shown to users after the end of the task duration."
+      },
+      "attribute": "ended-message",
+      "reflect": false,
+      "defaultValue": "\"Ended {endDate}\""
+    },
+    "completedText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Completed Count Text",
+            "name": "uiName"
+          }],
+        "text": "Displays the amount of times that a user has completed a repeatable task."
+      },
+      "attribute": "completed-text",
+      "reflect": false,
+      "defaultValue": "\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\""
+    },
     "buttonText": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/sqm-user-name/sqm-user-name.js

@@ -5,7 +5,7 @@ import deepmerge from "deepmerge";
 import { UserNameView } from "./sqm-user-name-view";
 import { useUserName } from "./useUserName";
 /**
- * @uiName Navigation Link
+ * @uiName User Name
  */
 export class UserName {
   constructor() {

package/dist/collection/fonts/GoogleFonts.js

@@ -0,0 +1,12 @@
+/**
+ * Build a font CSS URL using the Google Fonts CSS API
+ *
+ * Docs: https://developers.google.com/fonts/docs/css2
+ *
+ * @param fonts - the font family or families to load
+ * @returns url to a .css file
+ */
+export function buildFontsCssUrl(...fonts) {
+  const queryString = fonts.map(f => `family=${encodeURIComponent(f)}`).join("&");
+  return `https://fonts.googleapis.com/css2?${queryString}`;
+}

package/dist/collection/global/global.js

@@ -19,7 +19,7 @@ try {
   // SlAlert.register();
   registerIconLibrary("default", {
     // same link that shoelace uses internally
-    resolver: (name) => `https://fast.ssqt.io/npm/bootstrap-icons@1.2.0/icons/${name}.svg`,
+    resolver: (name) => `https://fast.ssqt.io/npm/bootstrap-icons@1.7.2/icons/${name}.svg`,
   });
   // SlAlert.register();
   customElements.define("sl-alert", SlAlert);

package/dist/collection/global/styles.js

@@ -503,11 +503,11 @@ html {
   --sl-line-height-dense: 1.4;
   --sl-line-height-normal: 1.8;
   --sl-line-height-loose: 2.2;
-  --sl-focus-ring-color-primary: #0ea5e954;
-  --sl-focus-ring-color-success: #22c55e54;
-  --sl-focus-ring-color-info: #6b728054;
-  --sl-focus-ring-color-warning: #f59e0b54;
-  --sl-focus-ring-color-danger: #ef444454;
+  --sl-focus-ring-color-primary: var(--sl-color-primary-100);
+  --sl-focus-ring-color-success: var(--sl-color-success-100);
+  --sl-focus-ring-color-info: var(--sl-color-info-100);
+  --sl-focus-ring-color-warning: var(--sl-color-warning-100);
+  --sl-focus-ring-color-danger: #var(--sl-color-danger-100);;
   --sl-focus-ring-width: 3px;
   --sl-button-font-size-small: var(--sl-font-size-x-small);
   --sl-button-font-size-medium: var(--sl-font-size-small);

package/dist/collection/global/styles.ts

@@ -504,11 +504,11 @@ html {
   --sl-line-height-dense: 1.4;
   --sl-line-height-normal: 1.8;
   --sl-line-height-loose: 2.2;
-  --sl-focus-ring-color-primary: #0ea5e954;
-  --sl-focus-ring-color-success: #22c55e54;
-  --sl-focus-ring-color-info: #6b728054;
-  --sl-focus-ring-color-warning: #f59e0b54;
-  --sl-focus-ring-color-danger: #ef444454;
+  --sl-focus-ring-color-primary: var(--sl-color-primary-100);
+  --sl-focus-ring-color-success: var(--sl-color-success-100);
+  --sl-focus-ring-color-info: var(--sl-color-info-100);
+  --sl-focus-ring-color-warning: var(--sl-color-warning-100);
+  --sl-focus-ring-color-danger: #var(--sl-color-danger-100);;
   --sl-focus-ring-width: 3px;
   --sl-button-font-size-small: var(--sl-font-size-x-small);
   --sl-button-font-size-medium: var(--sl-font-size-small);

package/dist/collection/stories/NewPortal.stories.js

@@ -130,10 +130,10 @@ export const Dashboard = () => {
             h("h1", null, "John Smith"))),
         })),
         h(StatContainerView, Object.assign({}, { space: "64px" }),
-          h(BigStatView, Object.assign({}, { statvalue: "2,345", value: 234500 }), "Clicks"),
-          h(BigStatView, Object.assign({}, { statvalue: "58", value: 58 }), "Referrals"),
-          h(BigStatView, Object.assign({}, { statvalue: "$10,540", value: 1054000 }), "Earned"),
-          h(BigStatView, Object.assign({}, { statvalue: "$2,305", value: 230500 }), "Awaiting Payout"))),
+          h(BigStatView, Object.assign({}, { statvalue: "2,345", value: 234500, loading: false }), "Clicks"),
+          h(BigStatView, Object.assign({}, { statvalue: "58", value: 58, loading: false }), "Referrals"),
+          h(BigStatView, Object.assign({}, { statvalue: "$10,540", value: 1054000, loading: false }), "Earned"),
+          h(BigStatView, Object.assign({}, { statvalue: "$2,305", value: 230500, loading: false }), "Awaiting Payout"))),
       h(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
         h(PortalSectionView, Object.assign({}, {
           labelMargin: "x-large",
@@ -257,10 +257,10 @@ export const Commissions = () => {
               "program"))),
         })),
         h(StatContainerView, Object.assign({}, { space: "64px" }),
-          h(BigStatView, Object.assign({}, { statvalue: "$ 1,000", value: 100000 }), "Total Earned"),
-          h(BigStatView, Object.assign({}, { statvalue: "$ 800", value: 80000 }), "Available"),
-          h(BigStatView, Object.assign({}, { statvalue: "$ 180", value: 18000 }), "Pending"),
-          h(BigStatView, Object.assign({}, { statvalue: "$ 20", value: 2000 }), "Redeemed"))))));
+          h(BigStatView, Object.assign({}, { statvalue: "$ 1,000", value: 100000, loading: false }), "Total Earned"),
+          h(BigStatView, Object.assign({}, { statvalue: "$ 800", value: 80000, loading: false }), "Available"),
+          h(BigStatView, Object.assign({}, { statvalue: "$ 180", value: 18000, loading: false }), "Pending"),
+          h(BigStatView, Object.assign({}, { statvalue: "$ 20", value: 2000, loading: false }), "Redeemed"))))));
 };
 export const Activity = () => {
   return (h("sqm-divided-layout", { direction: "row" },
@@ -287,10 +287,10 @@ export const Activity = () => {
           label: (h("sqm-text", null,
             h("h3", null, "Referral Activity"))),
           content: (h(StatContainerView, Object.assign({}, { space: "64px" }),
-            h(BigStatView, Object.assign({}, { statvalue: "1,000", value: 100000 }), "Total Referrals"),
-            h(BigStatView, Object.assign({}, { statvalue: "800", value: 800 }), "Converted"),
-            h(BigStatView, Object.assign({}, { statvalue: "180", value: 180 }), "Pending"),
-            h(BigStatView, Object.assign({}, { statvalue: "20", value: 20 }), "Disqualified"))),
+            h(BigStatView, Object.assign({}, { statvalue: "1,000", value: 100000, loading: false }), "Total Referrals"),
+            h(BigStatView, Object.assign({}, { statvalue: "800", value: 800, loading: false }), "Converted"),
+            h(BigStatView, Object.assign({}, { statvalue: "180", value: 180, loading: false }), "Pending"),
+            h(BigStatView, Object.assign({}, { statvalue: "20", value: 20, loading: false }), "Disqualified"))),
         }))),
       h(PortalSectionView, Object.assign({}, {
         labelMargin: "x-large",
@@ -298,8 +298,8 @@ export const Activity = () => {
         label: (h("sqm-text", null,
           h("h3", null, "Traffic Generated"))),
         content: (h(StatContainerView, Object.assign({}, { space: "64px" }),
-          h(BigStatView, Object.assign({}, { statvalue: "1,000", value: 1000 }), "Clicks"),
-          h(BigStatView, Object.assign({}, { statvalue: "800", value: 800 }), "From share link"),
-          h(BigStatView, Object.assign({}, { statvalue: "180", value: 180 }), "From share mediums"))),
+          h(BigStatView, Object.assign({}, { statvalue: "1,000", value: 1000, loading: false }), "Clicks"),
+          h(BigStatView, Object.assign({}, { statvalue: "800", value: 800, loading: false }), "From share link"),
+          h(BigStatView, Object.assign({}, { statvalue: "180", value: 180, loading: false }), "From share mediums"))),
       })))));
 };