@saasquatch/mint-components 1.15.0-9 → 1.15.0-91

package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js

@@ -1,107 +1,105 @@
-import { h, Component, Host, State } from "@stencil/core";
-import { useStencilbook } from "@saasquatch/stencilbook";
 import { useState, withHooks } from "@saasquatch/stencil-hooks";
-import * as ShareButton from "../sqm-share-button/ShareButton.stories";
-import * as EmptyState from "../sqm-empty/EmptyState.stories";
-import * as Pagination from "../sqm-pagination/Pagination.stories";
-import * as ShareLink from "../sqm-share-link/ShareLink.stories";
+import { useStencilbook } from "@saasquatch/stencilbook";
+import { Component, h, Host, State } from "@stencil/core";
+import * as NewPortal from "../../stories/NewPortal.stories";
+import * as PortalTemplates from "../../stories/PortalTemplates.stories";
+import * as PoweredByImg from "../../stories/PoweredByImg.stories";
+import * as Widget from "../../stories/Widget.stories";
+import * as BaseRegistrationForm from "../sqm-base-registration/BaseRegistrationForm.stories";
 import * as BigStat from "../sqm-big-stat/BigStat.stories";
-import * as Leaderboard from "../sqm-leaderboard/Leaderboard.stories";
-import * as Router from "../sqm-router/Router.stories";
-import * as LeaderboardRank from "../sqm-leaderboard-rank/LeaderboardRank.stories";
-import * as PortalFrame from "../sqm-portal-frame/PortalFrame.stories";
-import * as EditProfile from "../sqm-edit-profile/EditProfileForm.stories";
-import * as UseShareLink from "../sqm-share-link/UseShareLink.stories";
-import * as UseShareButton from "../sqm-share-button/UseShareButton.stories";
 import * as UseBigStat from "../sqm-big-stat/UseBigStat.stories";
+import * as BrandStories from "../sqm-brand/SqmBrand.stories";
+import * as CardFeed from "../sqm-card-feed/CardFeed.stories";
+import * as CheckboxField from "../sqm-checkbox-field/CheckboxField.stories";
+import * as UseCheckboxField from "../sqm-checkbox-field/UseCheckboxField.stories";
+import * as CloseButton from "../sqm-close-button/CloseButton.stories";
+import * as CouponCode from "../sqm-coupon-code/CouponCode.stories";
+import * as DividedLayout from "../sqm-divided-layout/DividedLayout.stories";
+import * as DropdownField from "../sqm-dropdown-field/DropdownField.stories";
+import * as UseDropdownField from "../sqm-dropdown-field/UseDropdownField.stories";
+import * as EditProfile from "../sqm-edit-profile/EditProfileForm.stories";
 import * as UseEditProfile from "../sqm-edit-profile/UseEditProfile.stories";
-import * as UseLeaderboard from "../sqm-leaderboard/UseLeaderboard.stories";
+import * as EmptyState from "../sqm-empty/EmptyState.stories";
 import * as FormMessage from "../sqm-form-message/FormMessage.stories";
-import * as UseRewardExchangeList from "../sqm-reward-exchange-list/UseRewardExchangeList.stories";
-import * as UseRewardsTable from "../sqm-rewards-table/UseRewardsTable.stories";
-import * as UseTaskCard from "../sqm-task-card/UseTaskCard.stories";
-import * as NewPortal from "../../stories/NewPortal.stories";
-import * as Widget from "../../stories/Widget.stories";
+import * as HeroImage from "../sqm-hero-image/HeroImage.stories";
+import * as Hero from "../sqm-hero/Hero.stories";
+import * as Image from "../sqm-image/Image.stories";
+import * as InputField from "../sqm-input-field/InputField.stories";
+import * as UseInputField from "../sqm-input-field/UseInputField.stories";
+import * as InvoiceTable from "../sqm-invoice-table/InvoiceTable.stories";
+import * as InvoiceTableCells from "../sqm-invoice-table/InvoiceTableCell.stories";
+import * as UseInvoiceTableCells from "../sqm-invoice-table/UseInvoiceTable.stories";
+import * as LeaderboardRank from "../sqm-leaderboard-rank/LeaderboardRank.stories";
+import * as Leaderboard from "../sqm-leaderboard/Leaderboard.stories";
+import * as UseLeaderboard from "../sqm-leaderboard/UseLeaderboard.stories";
+import * as LinkButton from "../sqm-link-button/LinkButton.stories";
+import * as LogoutCurrentUser from "../sqm-logout-current-user/LogoutCurrentUser.stories";
+import * as MarketingEmailsCheckbox from "../sqm-marketing-emails-checkbox/MarketingEmailsCheckbox.stories";
+import * as NameFields from "../sqm-name-fields/NameFields.stories";
 import * as SidebarItem from "../sqm-navigation-sidebar-item/SidebarItem.stories";
 import * as NavigationSidebar from "../sqm-navigation-sidebar/NavigationSidebar.stories";
+import * as Pagination from "../sqm-pagination/Pagination.stories";
+import * as PasswordField from "../sqm-password-field/PasswordField.stories";
+import * as PayoutButtonScroll from "../sqm-payout-button-scroll/PayoutButtonScroll.stories";
+import * as ChangeMarketing from "../sqm-portal-change-marketing/ChangeMarketing.stories";
+import * as ChangePassword from "../sqm-portal-change-password/ChangePassword.stories";
+import * as PortalContainer from "../sqm-portal-container/PortalContainer.stories";
+import * as PortalEmailVerification from "../sqm-portal-email-verification/PortalEmailVerification.stories";
+import * as PortalFooter from "../sqm-portal-footer/PortalFooter.stories";
+import * as PortalForgotPassword from "../sqm-portal-forgot-password/PortalForgotPassword.stories";
+import * as PortalFrame from "../sqm-portal-frame/PortalFrame.stories";
+import * as PortalGoogleRegistrationFormStories from "../sqm-portal-google-registration-form/PortalGoogleRegistrationForm.stories";
 import * as PortalLogin from "../sqm-portal-login/PortalLogin.stories";
+import * as PortalProfile from "../sqm-portal-profile/PortalProfile.stories";
 import * as PortalRegister from "../sqm-portal-register/PortalRegister.stories";
 import * as NewPortalRegistrationForm from "../sqm-portal-registration-form/PortalRegistrationForm.stories";
-import * as PortalForgotPassword from "../sqm-portal-forgot-password/PortalForgotPassword.stories";
-import * as PortalEmailVerification from "../sqm-portal-email-verification/PortalEmailVerification.stories";
 import * as PortalResetPassword from "../sqm-portal-reset-password/PortalResetPassword.stories";
 import * as PortalVerifyEmail from "../sqm-portal-verify-email/PortalVerifyEmail.stories";
-import * as AssetCard from "../sqm-asset-card/AssetCard.stories";
-import * as DividedLayout from "../sqm-divided-layout/DividedLayout.stories";
-import * as ChangePassword from "../sqm-portal-change-password/ChangePassword.stories";
-import * as ChangeMarketing from "../sqm-portal-change-marketing/ChangeMarketing.stories";
-import * as PortalProfile from "../sqm-portal-profile/PortalProfile.stories";
+import * as ProgramExplainerStep from "../sqm-program-explainer-step/ProgramExplainerStep.stories";
+import * as ProgramExplainer from "../sqm-program-explainer/ProgramExplainer.stories";
+import * as ProgramMenu from "../sqm-program-menu/ProgramMenu.stories";
+import * as QRCode from "../sqm-qr-code/QRCode.stories";
+import * as RadioCard from "../sqm-radio-card/RadioCard.stories";
+import * as ReferralCard from "../sqm-referral-card/ReferralCard.stories";
+import * as ReferralCode from "../sqm-referral-code/ReferralCode.stories";
+import * as ReferralCodes from "../sqm-referral-codes/ReferralCodes.stories";
+import * as ReferralIframe from "../sqm-referral-iframe/ReferralIframe.stories";
 import * as ReferralTable from "../sqm-referral-table/ReferralTable.stories";
 import * as ReferralTableCell from "../sqm-referral-table/ReferralTableCell.stories";
 import * as ReferralTableRewardsCell from "../sqm-referral-table/ReferralTableRewardsCell.stories";
-import * as UserName from "../sqm-user-name/UserName.stories";
-import * as PasswordField from "../sqm-password-field/PasswordField.stories";
-import * as TaskCard from "../sqm-task-card/TaskCard.stories";
-import * as PortalTemplates from "../../stories/PortalTemplates.stories";
-import * as ProgramMenu from "../sqm-program-menu/ProgramMenu.stories";
-import * as PoweredByImg from "../../stories/PoweredByImg.stories";
-import * as PortalFooter from "../sqm-portal-footer/PortalFooter.stories";
-import * as Hero from "../sqm-hero/Hero.stories";
-import * as ReferralIframe from "../sqm-referral-iframe/ReferralIframe.stories";
-import * as NameFields from "../sqm-name-fields/NameFields.stories";
-import * as CheckboxField from "../sqm-checkbox-field/CheckboxField.stories";
-import * as MarketingEmailsCheckbox from "../sqm-marketing-emails-checkbox/MarketingEmailsCheckbox.stories";
-import * as UseCheckboxField from "../sqm-checkbox-field/UseCheckboxField.stories";
-import * as DropdownField from "../sqm-dropdown-field/DropdownField.stories";
-import * as UseDropdownField from "../sqm-dropdown-field/UseDropdownField.stories";
-import * as InputField from "../sqm-input-field/InputField.stories";
-import * as UseInputField from "../sqm-input-field/UseInputField.stories";
+import * as UseReferralTable from "../sqm-referral-table/UseReferralTable.stories";
 import * as RewardExchangeList from "../sqm-reward-exchange-list/RewardExchangeList.stories";
-import * as ProgramExplainer from "../sqm-program-explainer/ProgramExplainer.stories";
-import * as ProgramExplainerStep from "../sqm-program-explainer-step/ProgramExplainerStep.stories";
-import * as BrandStories from "../sqm-brand/SqmBrand.stories";
-import * as CardFeed from "../sqm-card-feed/CardFeed.stories";
-import * as PortalContainer from "../sqm-portal-container/PortalContainer.stories";
-import * as RewardsTableCell from "../sqm-rewards-table/RewardsTableCell.stories";
+import * as UseRewardExchangeList from "../sqm-reward-exchange-list/UseRewardExchangeList.stories";
 import * as RewardsTable from "../sqm-rewards-table/RewardsTable.stories";
-import * as UseReferralTable from "../sqm-referral-table/UseReferralTable.stories";
-import * as HeroImage from "../sqm-hero-image/HeroImage.stories";
-import * as ReferralCard from "../sqm-referral-card/ReferralCard.stories";
-import * as Timeline from "../sqm-timeline/Timeline.stories";
-import * as Image from "../sqm-image/Image.stories";
-import * as TitledSection from "../sqm-titled-section/TitledSection.stories";
+import * as RewardsTableCell from "../sqm-rewards-table/RewardsTableCell.stories";
+import * as UseRewardsTable from "../sqm-rewards-table/UseRewardsTable.stories";
+import * as Router from "../sqm-router/Router.stories";
 import * as Scroll from "../sqm-scroll/Scroll.stories";
-import * as Tabs from "../sqm-tabs/Tabs.stories";
+import * as ShareButton from "../sqm-share-button/ShareButton.stories";
+import * as UseShareButton from "../sqm-share-button/UseShareButton.stories";
 import * as ShareCode from "../sqm-share-code/ShareCode.stories";
-import * as ReferralCode from "../sqm-referral-code/ReferralCode.stories";
-import * as EmailRegistration from "../views/EmailRegistration.stories";
-import * as CouponCode from "../sqm-coupon-code/CouponCode.stories";
-import * as LogoutCurrentUser from "../sqm-logout-current-user/LogoutCurrentUser.stories";
-import * as LinkButton from "../sqm-link-button/LinkButton.stories";
-import * as CloseButton from "../sqm-close-button/CloseButton.stories";
-import * as TaxForm from "../tax-and-cash/TaxForm.stories";
-import * as TaxFormSlots from "../tax-and-cash/sqm-user-info-form/small-views/SlotViews.stories";
-import * as RadioCard from "../sqm-radio-card/RadioCard.stories";
+import * as ShareLink from "../sqm-share-link/ShareLink.stories";
+import * as UseShareLink from "../sqm-share-link/UseShareLink.stories";
+import * as Tabs from "../sqm-tabs/Tabs.stories";
+import * as TaskCard from "../sqm-task-card/TaskCard.stories";
+import * as UseTaskCard from "../sqm-task-card/UseTaskCard.stories";
 import * as ProgressBar from "../sqm-task-card/progress-bar/ProgressBar.stories";
-import * as PayoutDetailsCard from "../tax-and-cash/sqm-payout-details-card/PayoutDetailsCard.stories";
-import * as BankingInfoForm from "../tax-and-cash/BankingForm.stories";
-import * as InvoiceTable from "../sqm-invoice-table/InvoiceTable.stories";
-import * as InvoiceTableCells from "../sqm-invoice-table/InvoiceTableCell.stories";
-import * as UseInvoiceTableCells from "../sqm-invoice-table/UseInvoiceTable.stories";
-import * as WidgetEmailVerification from "../sqm-widget-verification/sqm-email-verification/WidgetEmailVerification.stories";
+import * as Text from "../sqm-text/Text.stories";
+import * as Timeline from "../sqm-timeline/Timeline.stories";
+import * as TitledSection from "../sqm-titled-section/TitledSection.stories";
+import * as UserName from "../sqm-user-name/UserName.stories";
 import * as WidgetCodeVerification from "../sqm-widget-verification/sqm-code-verification/WidgetCodeVerification.stories";
-import * as PayoutButtonScroll from "../sqm-payout-button-scroll/PayoutButtonScroll.stories";
+import * as WidgetEmailVerification from "../sqm-widget-verification/sqm-email-verification/WidgetEmailVerification.stories";
+import * as BankingInfoForm from "../tax-and-cash/BankingForm.stories";
+import * as TaxForm from "../tax-and-cash/TaxForm.stories";
+import * as PayoutDetailsCard from "../tax-and-cash/sqm-payout-details-card/PayoutDetailsCard.stories";
 import * as PayoutStatusAlert from "../tax-and-cash/sqm-payout-status-alert/PayoutStatusAlert.stories";
-import * as ReferralCodes from "../sqm-referral-codes/ReferralCodes.stories";
-import * as BaseRegistrationForm from "../sqm-base-registration/BaseRegistrationForm.stories";
-import * as PortalRegistrationForm from "../sqm-portal-registration-form/PortalRegistrationForm.stories";
-import * as PortalGoogleRegistrationFormStories from "../sqm-portal-google-registration-form/PortalGoogleRegistrationForm.stories";
-import * as QRCode from "../sqm-qr-code/QRCode.stories";
-import * as Themes from "./Themes";
+import * as TaxFormSlots from "../tax-and-cash/sqm-user-info-form/small-views/SlotViews.stories";
+import * as EmailRegistration from "../views/EmailRegistration.stories";
+import { ShadowViewAddon } from "../../ShadowViewAddon";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
-import { ShadowViewAddon } from "../../ShadowViewAddon";
-import { ResizerStylesheet } from "./Resizer";
+import * as Themes from "./Themes";
 const stories = [
   InvoiceTable,
   InvoiceTableCells,
@@ -134,7 +132,6 @@ const stories = [
   PortalEmailVerification,
   PortalResetPassword,
   PortalVerifyEmail,
-  AssetCard,
   DividedLayout,
   ChangePassword,
   PortalProfile,
@@ -192,13 +189,13 @@ const stories = [
   NewPortalRegistrationForm,
   ChangeMarketing,
   BaseRegistrationForm,
-  PortalRegistrationForm,
   PortalGoogleRegistrationFormStories,
   WidgetEmailVerification,
   WidgetCodeVerification,
   PayoutButtonScroll,
   PayoutStatusAlert,
   QRCode,
+  Text,
 ];
 /**
  * For internal documentation
@@ -222,22 +219,7 @@ export class StencilStorybook {
     const themes = Object.keys(Themes);
     const theme = Themes[selectedTheme];
     return (h(Host, { class: Style, onClick: {} },
-      h("div", { style: {
-          position: "absolute",
-          top: "0",
-          right: "0",
-          zIndex: "999999",
-        } },
-        "Branding:",
-        h("select", { onChange: (e) => setSelected(e.target.value) }, themes.map((t) => (h("option", { selected: t === selectedTheme }, t)))),
-        h("div", null,
-          h("div", null)),
-        h(ColorScale, null),
-        h("br", null),
-        h("input", { type: "checkbox", id: "checkerboard", onClick: () => setCheckerboard(!checkerboard), onChange: () => document.documentElement.style.setProperty("--checker-color-1", checkerboard ? "#ebebeb" : "#ffffff00") }),
-        h("label", { htmlFor: "checkerboard" }, "Checkerboard?")),
-      h("style", null, theme),
-      h("style", null, ResizerStylesheet),
+      h("sqm-brand-selector", null),
       children));
   }
   static get is() { return "sqm-stencilbook"; }
@@ -255,7 +237,7 @@ function ColorScale() {
 }
 function ColorToken({ type = "primary" }) {
   return (h("span", { style: {
-      background: `var(--sl-color-${type}-500)`,
+      // background: `var(--sl-color-${type}-500)`,
       width: "1em",
       marginRight: "2px",
       padding: "0 4px",

package/dist/collection/components/sqm-table-row/sqm-table-row.js

@@ -8,7 +8,7 @@ export class TableRow {
     /**
      * @uiName Border
      */
-    this.border = "1px solid #EAEAEA";
+    this.border = "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)";
   }
   render() {
     return (h(Host, { style: { display: "contents" } },
@@ -37,7 +37,7 @@ export class TableRow {
       },
       "attribute": "border",
       "reflect": false,
-      "defaultValue": "\"1px solid #EAEAEA\""
+      "defaultValue": "\"var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)\""
     }
   }; }
 }

package/dist/collection/components/sqm-tabs/Tabs.stories.js

@@ -13,6 +13,13 @@ export const SimpleTabs = () => (h("div", { style: { maxWidth: "700px", margin:
         <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>
       </sqm-tabs>
     ` }));
+export const CustomColor = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
+     <sqm-tabs text-color="red">
+        <sqm-tab header="General">This is the general tab</sqm-tab>
+        <sqm-tab header="Custom">This is the custom tab</sqm-tab>
+        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>
+      </sqm-tabs>
+    ` }));
 export const ManyTabs = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
      <sqm-tabs>
         <sqm-tab header="General">This is the general tab</sqm-tab>

package/dist/collection/components/sqm-tabs/sqm-tabs-view.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-export const TabsView = ({ content, placement, }) => {
+export const TabsView = ({ content, placement, textColor = "var(--sqm-text)", }) => {
   // Vertical padding for top & bottom placement, horizontal for left & right.
   const padding = !placement || placement === "top" || placement === "bottom"
     ? "var(--sl-spacing-x-large) 0;"
@@ -8,6 +8,20 @@ export const TabsView = ({ content, placement, }) => {
     sl-tab-panel::part(base) {
       padding: ${padding};
     }
+
+    sl-tab::part(base) {
+      color: ${textColor};
+      font-family: var(--sqm-primary-font);
+    }
+
+    sl-tab-group {
+      --sl-color-primary-500: var(--sqm-accent-color-icon);
+    }
+
+    sl-tab-group::part(tabs) {
+      border-bottom: 2px solid var(--sqm-border-color);
+      font-family: var(--sqm-primary-font);
+    }
   `;
   return (h(Host, null,
     h("style", { type: "text/css" }, vanillaStyle),
@@ -19,7 +33,7 @@ export const TabsView = ({ content, placement, }) => {
             h("slot", { name: slotName }))));
       }
       return [
-        h("sl-tab", { slot: "nav", panel: slotName, id: tab.getAttribute("id") || slotName }, tab.getAttribute("header")),
+        h("sl-tab", { slot: "nav", panel: slotName, part: "tab", id: tab.getAttribute("id") || slotName }, tab.getAttribute("header")),
         h("sl-tab-panel", { name: slotName },
           h("slot", { name: slotName })),
       ];

package/dist/collection/components/sqm-tabs/sqm-tabs.js

@@ -19,8 +19,8 @@ export class Tabs {
   disconnectedCallback() { }
   render() {
     const { content } = useTabs();
-    const { placement } = getProps(this);
-    return (h(TabsView, { placement: placement, content: content },
+    const { placement, textColor } = getProps(this);
+    return (h(TabsView, { placement: placement, content: content, textColor: textColor },
       h("slot", null)));
   }
   static get is() { return "sqm-tabs"; }
@@ -54,6 +54,32 @@ export class Tabs {
       },
       "attribute": "placement",
       "reflect": false
+    },
+    "textColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Text color",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": "Tab text color"
+      },
+      "attribute": "text-color",
+      "reflect": false
     }
   }; }
 }

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

@@ -2,6 +2,12 @@ import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 export const style = {
   Description: {
+    "& .icon": {
+      color: "var(--sqm-text)",
+      "&:hover": {
+        color: "var(--sqm-accent-color-icon)",
+      },
+    },
     "& input[type=checkbox]": {
       display: "none",
     },
@@ -48,6 +54,6 @@ export function Details(props) {
     h("span", { class: sheet.classes.Description },
       h("input", { type: "checkbox", id: "details-" + rid }),
       h("label", { class: "details", htmlFor: "details-" + rid },
-        h("sl-icon", { exportparts: "base: chevron-icon", name: "chevron-down" })),
+        h("sl-icon", { class: "icon", exportparts: "base: chevron-icon", name: "chevron-down" })),
       h("span", { class: "summary", "progress-bar": props.progressBar }, props.content.description))));
 }

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

@@ -48,7 +48,8 @@ const style = {
       width: "100%",
       height: "4px",
       borderRadius: "4px",
-      backgroundColor: "var(--sl-color-primary-300)",
+      backgroundColor: "var(--sqm-accent-color-icon)",
+      background: "red",
     },
     "& .progress": {
       display: "block",
@@ -61,7 +62,7 @@ const style = {
       width: "12px",
       height: "12px",
       display: "flex",
-      backgroundColor: "var(--sl-color-primary-300)",
+      backgroundColor: "var(--sqm-accent-color-icon)",
       borderRadius: "50%",
       position: "relative",
       left: "47%",

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

@@ -9,29 +9,29 @@ import * as SVGs from "./SVGs";
 export function TaskCardView(props) {
   var _a, _b;
   const { callbacks, states, content } = props;
-  console.log("text color from the view ", content.textColor);
+  console.log("buttonType ", content.buttonType);
   const style = {
     TaskCard: {
       display: "inline-block",
       width: "100%",
       "& .main": {
         position: "relative",
-        boxSizing: "border-sizing",
-        background: content.backgroundColor || "var(--sl-color-neutral-0)",
-        border: `1px solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
-        borderRadius: "var(--sl-border-radius-large)",
+        boxSizing: "border-box",
+        background: content.backgroundColor || "var(--sqm-portal-background)",
+        border: `var(--sqm-border-thickness) solid ${content.borderColor || "var(--sqm-border-color)"}`,
+        borderRadius: "var(--sqm-border-radius-normal)",
         boxShadow: "1px 2px 4px rgba(211, 211, 211, 0.2)",
         fontSize: "var(--sl-font-size-small)",
         lineHeight: "var(--sl-line-height-dense)",
         color: content.textColor || "var(--sqm-text)",
       },
       "& .main.complete": {
-        background: content.backgroundColor || "var(--sl-color-primary-50)",
-        borderColor: content.borderColor || "var(--sl-color-primary-500)",
+        opacity: "0.8",
+        borderColor: "var(--sqm-accent-color-border)",
       },
       "& .main.expired": {
         color: content.textColor || "var(--sqm-text)",
-        background: content.backgroundColor || "var(--sl-color-neutral-50)",
+        opacity: "0.8",
       },
       "& .title": {
         fontSize: "var(--sl-font-size-medium)",
@@ -51,8 +51,8 @@ export function TaskCardView(props) {
       fontSize: "var(--sl-font-size-small)",
       padding: "var(--sl-spacing-medium)",
       color: content.textColor || "var(--sl-color-primary-600)",
-      border: `1px solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
-      borderRadius: "var(--sl-border-radius-large) var(--sl-border-radius-large) 0 0",
+      border: `var(--sqm-border-thickness, 1px) solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
+      borderRadius: "var(--sqm-border-radius-normal) var(--sqm-border-radius-normal) 0 0",
       borderBottom: "none",
       background: content.backgroundColor || "var(--sl-color-primary-50)",
       fontWeight: "var(--sl-font-weight-semibold)",
@@ -68,8 +68,8 @@ export function TaskCardView(props) {
       fontSize: "var(--sl-font-size-small)",
       padding: "var(--sl-spacing-medium)",
       color: content.textColor || "var(--sl-color-warning-600)",
-      border: `1px solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
-      borderRadius: "var(--sl-border-radius-large) var(--sl-border-radius-large) 0 0",
+      border: `var(--sqm-border-thickness, 1px) solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
+      borderRadius: "var(--sqm-border-radius-normal) var(--sqm-border-radius-normal) 0 0",
       borderBottom: "none",
       background: content.backgroundColor || "var(--sl-color-warning-50)",
       fontWeight: "var(--sl-font-weight-semibold)",
@@ -88,7 +88,7 @@ export function TaskCardView(props) {
         top: "5%",
         alignSelf: "center",
         lineHeight: "0",
-        color: content.textColor || "var(--sqm-text)",
+        color: "var(--sqm-accent-color-icon)",
         fontSize: "var(--sl-font-size-large)",
         marginRight: "var(--sl-spacing-x-small)",
       },
@@ -150,7 +150,7 @@ export function TaskCardView(props) {
     },
   };
   const sheet = createStyleSheet(style);
-  const contenttring = sheet.toString();
+  const contentString = sheet.toString();
   const dateStart = content.rewardDuration &&
     DateTime.fromISO(content.rewardDuration.split("/")[0]);
   const dateEnd = content.rewardDuration &&
@@ -185,7 +185,7 @@ export function TaskCardView(props) {
   `;
   return (h("div", { class: sheet.classes.TaskCard, part: "sqm-base" },
     h("style", { type: "text/css" },
-      contenttring,
+      contentString,
       vanillaStyle),
     !states.loading && taskNotStarted && (h("div", { class: sheet.classes.NotStarted },
       h("span", { class: "icon" },
@@ -211,7 +211,7 @@ export function TaskCardView(props) {
       }))),
     h("div", { part: "sqm-style-container", style: {
         borderRadius: taskUnavailable &&
-          "0 0 var(--sl-border-radius-large) var(--sl-border-radius-large)",
+          "0 0 var(--sqm-border-radius-normal) var(--sqm-border-radius-normal)",
       }, class: taskUnavailable
         ? "main expired"
         : taskComplete
@@ -233,7 +233,7 @@ export function TaskCardView(props) {
             opacity: taskComplete || taskUnavailable ? "0.45" : "1",
           } }, content.cardTitle)),
         states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && (h(Details, Object.assign({}, props, { opacity: taskComplete || taskUnavailable ? "0.45" : "1" })))),
-        content.showProgressBar && states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.45" : "1", complete: taskComplete, expired: taskUnavailable })))),
+        content.showProgressBar && states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.75" : "1", complete: taskComplete, expired: taskUnavailable })))),
         h("div", { class: sheet.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
           h("span", { class: "text" },
             content.repeatable && (h("div", null,
@@ -263,9 +263,7 @@ export function TaskCardView(props) {
                 .setLocale(luxonLocale(states.locale))
                 .toLocaleString(DateTime.DATETIME_MED),
             })))),
-          content.hideButton ? ("") : (h("sl-button", { exportparts: `base: ${content.buttonStyle === "primary"
-              ? "primary"
-              : "secondary"}button-base`, id: "sl-button", type: content.buttonStyle === "primary" ? "primary" : "default", size: "small", onClick: callbacks.onClick, loading: states.loadingEvent, disabled: taskComplete || taskUnavailable, style: {
+          content.hideButton ? ("") : (h("sl-button", { exportparts: `base: ${content.buttonType || "primary"}button-base`, type: "primary", id: "sl-button", size: "small", onClick: callbacks.onClick, loading: states.loadingEvent, disabled: taskComplete || taskUnavailable, style: {
               opacity: taskComplete || taskUnavailable ? "0.45" : "1",
             } }, content.buttonText)))))))));
 }

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

@@ -11,10 +11,6 @@ import { useTaskCard } from "./useTaskCard";
  * @uiName Task Card
  * @uiOrder ["reward-amount", "reward-unit", "card-title", "description", "repeatable", "finite", "show-progress-bar", "stat-type", "progress-source", "goal", "steps", "progress-bar-unit", "show-expiry", "reward-duration", "button-text", "button-link", "open-new-tab", "ended-message", "expiry-message", "starts-on-message", "event-key", "*"]
  * @validParents ["sqm-card-feed"]
- * @exampleGroup Rewards
- * @example One Time Task Card - <sqm-task-card reward-amount="1" reward-unit="Free Month" goal="1" card-title="Upgrade Your Plan" description="Receive one free month for being a committed customer when you upgrade your plan." button-text="Upgrade" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" open-new-tab="false" finite="0" starts-on-message="Starts {startDate}"></sqm-task-card>
- * @example Repeatable Task Card - <sqm-task-card reward-amount="250" goal="500" show-progress-bar card-title="Spend $500" description="Earn 250 points when you spend $500 or more." button-text="See plans" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" progress-bar-unit="$" finite="0" repeatable="" reward-unit="Points" starts-on-message="Starts {startDate}"></sqm-task-card>
- * @example Event Sending Task Card - <sqm-task-card goal="1" reward-amount="50" card-title="Follow Us on X" description="Earn 50 points when you Follow Us on X!" button-text="Follow" button-link="https://twitter.com/" open-new-tab="true" event-key="socialFollow" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}"></sqm-task-card>
  */
 export class TaskCard {
   constructor() {
@@ -131,7 +127,7 @@ export class TaskCard {
      * @uiEnumNames ["Primary", "Secondary"]
      * @uiGroup Style
      */
-    this.buttonStyle = "primary";
+    this.buttonType = "primary";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -143,7 +139,6 @@ export class TaskCard {
     const { states, callbacks } = isDemo()
       ? useTaskCardDemo(this)
       : useTaskCard(this);
-    console.log("button style from controller", this.buttonStyle);
     return (h(TaskCardView, { callbacks: callbacks, states: {
         loading,
         loadingEvent: states.loadingEvent,
@@ -846,7 +841,7 @@ export class TaskCard {
       "attribute": "border-radius",
       "reflect": false
     },
-    "buttonStyle": {
+    "buttonType": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -875,7 +870,7 @@ export class TaskCard {
           }],
         "text": ""
       },
-      "attribute": "button-style",
+      "attribute": "button-type",
       "reflect": false,
       "defaultValue": "\"primary\""
     },
@@ -920,6 +915,7 @@ export class TaskCard {
 }
 function useTaskCardDemo(props) {
   return deepmerge({
+    content: { ...props },
     states: { loadingEvent: false, locale: "en" },
     callbacks: {
       sendEvent: (event) => console.log(event),

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

@@ -42,7 +42,7 @@ export function useTaskCard(props) {
       textColor: props.textColor,
       borderColor: props.borderColor,
       borderRadius: props.borderRadius,
-      buttonStyle: props.buttonStyle,
+      buttonType: props.buttonType,
     },
   };
   return {

package/dist/collection/components/sqm-text/Text.stories.js

@@ -0,0 +1,12 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Text",
+};
+export const PurpleText = () => {
+  return (h("sqm-text", { textColor: "slateblue" },
+    h("p", null, "This is the text component")));
+};
+export const CustomFontSize = () => {
+  return (h("sqm-text", { fontSize: 36 },
+    h("p", null, "This is the text component")));
+};