@saasquatch/mint-components 1.5.0-13 → 1.5.0-17

package/dist/collection/components/sqm-share-button/sqm-share-button.js

@@ -101,6 +101,66 @@ export class ShareButton {
       "attribute": "program-id",
       "reflect": false
     },
+    "borderradius": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Configure border radius with pixel amount",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "borderradius",
+      "reflect": false
+    },
+    "backgroundcolor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Button background color",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "backgroundcolor",
+      "reflect": false
+    },
+    "textcolor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Button text color",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "textcolor",
+      "reflect": false
+    },
     "pill": {
       "type": "boolean",
       "mutable": false,
@@ -334,7 +394,7 @@ export class ShareButton {
       "mutable": false,
       "complexType": {
         "original": "DemoData<ShareButtonViewProps>",
-        "resolved": "{ loading?: boolean; medium?: \"facebook\" | \"twitter\" | \"email\" | \"direct\" | \"linkedin\" | \"sms\" | \"fbmessenger\" | \"whatsapp\" | \"linemessenger\" | \"pinterest\" | \"reminder\" | \"unknown\"; disabled?: boolean; pill?: boolean; type?: \"text\" | \"primary\" | \"success\" | \"info\" | \"warning\" | \"danger\" | \"default\"; size?: \"small\" | \"medium\" | \"large\"; icon?: string; hideicon?: boolean; hidetext?: boolean; iconslot?: \"prefix\" | \"suffix\"; onClick?: () => void; hide?: boolean; }",
+        "resolved": "{ loading?: boolean; medium?: \"facebook\" | \"twitter\" | \"email\" | \"direct\" | \"linkedin\" | \"sms\" | \"fbmessenger\" | \"whatsapp\" | \"linemessenger\" | \"pinterest\" | \"reminder\" | \"unknown\"; disabled?: boolean; pill?: boolean; type?: \"text\" | \"primary\" | \"success\" | \"info\" | \"warning\" | \"danger\" | \"default\"; size?: \"small\" | \"medium\" | \"large\"; icon?: string; hideicon?: boolean; hidetext?: boolean; iconslot?: \"prefix\" | \"suffix\"; onClick?: () => void; hide?: boolean; borderradius?: number; backgroundcolor?: string; textcolor?: string; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -363,16 +423,8 @@ export class ShareButton {
 }
 function useDemoShareButton(props) {
   return deepmerge({
-    medium: props.medium,
+    ...props,
     loading: false,
-    disabled: props.disabled,
-    pill: props.pill,
-    type: props.type,
-    size: props.size,
-    hideicon: props.hideicon,
-    hidetext: props.hidetext,
-    iconslot: props.iconslot,
-    icon: props.icon,
     hide: false,
     onClick: () => {
       // TODO: Provide visual feedback

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

@@ -38,7 +38,11 @@ const oneAction = {
   openNewTab: false,
   showExpiry: false,
   rewardDuration: null,
+  completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
   loading: false,
+  expiryMessage: "Ends {endDate}",
+  startsOnMessage: "Starts {startDate}",
+  endedMessage: "Ended {endDate}",
   finite: 0,
 };
 const coupleActions = {
@@ -55,8 +59,12 @@ const coupleActions = {
   buttonLink: "https://example.com/",
   openNewTab: false,
   showExpiry: false,
+  completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
   rewardDuration: null,
   loading: false,
+  expiryMessage: "Ends {endDate}",
+  startsOnMessage: "Starts {startDate}",
+  endedMessage: "Ended {endDate}",
   finite: 0,
 };
 const manyActions = {
@@ -65,6 +73,7 @@ const manyActions = {
   cardTitle: "Spend $500 at our Store",
   description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
   repeatable: false,
+  completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
   showProgressBar: true,
   progress: 100,
   goal: 500,
@@ -75,6 +84,9 @@ const manyActions = {
   showExpiry: false,
   rewardDuration: null,
   loading: false,
+  expiryMessage: "Ends {endDate}",
+  startsOnMessage: "Starts {startDate}",
+  endedMessage: "Ended {endDate}",
   finite: 0,
 };
 export const TaskCard = () => {

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-export const gift = () => {
+export const Gift = () => {
   return (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
     h("path", { d: "M15 5H12.4508H9V16H13.5C14.0523 16 14.5 15.5523 14.5 15V9H15C15.5523 9 16 8.55228 16 8V6C16 5.44772 15.5523 5 15 5Z", fill: "#F2C94C" }),
     h("path", { d: "M1.5 9V15C1.5 15.5523 1.94772 16 2.5 16H7V5H4.64242H1C0.447715 5 0 5.44772 0 6V8C0 8.55228 0.447715 9 1 9H1.5Z", fill: "#F2C94C" }),

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

@@ -4,16 +4,12 @@ import preset from "jss-preset-default";
 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) {
   const checkmark_circle = SVGs.checkmark_circle();
   const checkmark_filled = SVGs.checkmark_filled();
   const arrow_left_right = SVGs.arrow_left_right();
   const style = {
-    // HostBlock: {
-    //   ":host": {
-    //     display: "inline-block",
-    //   },
-    // },
     TaskCard: {
       display: "inline-block",
       width: "100%",
@@ -33,7 +29,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": {
@@ -45,17 +41,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",
@@ -126,7 +148,7 @@ export function TaskCardView(props) {
         },
       },
       "& .neutral": {
-        color: "var(--sl-color-neutral-400)",
+        color: "var(--sl-color-neutral-600)",
       },
     },
   };
@@ -145,16 +167,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: 24px;
+	}
+  `;
   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)),
@@ -175,13 +223,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
@@ -210,6 +266,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
      */
@@ -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/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);