@saasquatch/mint-components 1.16.0-9 → 2.0.0-1

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

@@ -7,13 +7,14 @@ import { LeaderboardView } from "./sqm-leaderboard-view";
 import { useLeaderboard } from "./useLeaderboard";
 /**
  * @uiName Leaderboard
+ * @validParents ["sqm-portal-container","div","sqm-hero","sqm-instant-access-registration","sqb-program-section","sqb-conditional-section"]
  * @slots [{"name":"empty", "title":"Empty State"}]
  * @requiredFeatures ["LEADERBOARDS"]
  * @exampleGroup Leaderboard
- * @example Referral Started Leaderboard - <sqm-leaderboard usersheading="Referrer" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Referrals" rank-type="rank" leaderboard-type="topStartedReferrers" rankheading="Rank" show-rank="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard" ></sqm-empty></sqm-leaderboard>
- * @example Referral Converted Leaderboard - <sqm-leaderboard usersheading="Referrer" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Referrals" rank-type="rank" leaderboard-type="topConvertedReferrers" rankheading="Rank" show-rank="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard" ></sqm-empty></sqm-leaderboard>
- * @example Points Earned Leaderboard - <sqm-leaderboard usersheading="Name" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Points" rank-type="rank" leaderboard-type="topPointEarners" rankheading="Rank" show-rank="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard" ></sqm-empty></sqm-leaderboard>
- * @example Anonymous Leaderboard - <div style="display: flex; align-items: flex-start; justify-content: center; width: 100%; gap: 50px;"><div style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; max-width: 30%;"><sqm-image width="70%" alignment="center" image-url="https://res.cloudinary.com/saasquatch-staging/image/upload/v1729728469/Leaderboard_image_z87lsm.png"></sqm-image><h2 style="margin: auto;">Top Performers</h2><p style="margin: 0; text-align: center;">The leaderboard highlights the top performers in real-time. Stay motivated, stay competitive!</p></div><sqm-leaderboard width="300px" usersheading="Referrer" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Referrals" rank-type="rank" leaderboard-type="topStartedReferrers" rankheading="Rank" show-rank="true" hide-names="true" hide-viewer="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard"></sqm-empty></sqm-leaderboard></div>
+ * @example Referral Started - <sqm-leaderboard usersheading="Referrer" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Referrals" rank-type="rank" leaderboard-type="topStartedReferrers" rankheading="Rank" show-rank="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard" ></sqm-empty></sqm-leaderboard>
+ * @example Referral Converted - <sqm-leaderboard usersheading="Referrer" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Referrals" rank-type="rank" leaderboard-type="topConvertedReferrers" rankheading="Rank" show-rank="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard" ></sqm-empty></sqm-leaderboard>
+ * @example Points Earned - <sqm-leaderboard usersheading="Name" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Points" rank-type="rank" leaderboard-type="topPointEarners" rankheading="Rank" show-rank="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard" ></sqm-empty></sqm-leaderboard>
+ * @example Anonymous Leaderboard - <sqm-leaderboard width="300px" usersheading="Referrer" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Referrals" rank-type="rank" leaderboard-type="topStartedReferrers" rankheading="Rank" show-rank="true" hide-names="true" hide-viewer="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard"></sqm-empty></sqm-leaderboard>
  * @featureTooltip <div>Motivate your participants by gamifying your program. Contact <a href="mailto:saasquatch-support%40impact.com?subject=Next steps for Leaderboards feature&body=Hi Support Team, %0D%0A%0D%0A I am interested in learning more about how Leaderboards can support the growth of our referral program. Please connect me with a program strategy manager to discuss this feature further, and determine the next steps.%0D%0A%0D%0A%0D%0AThank you,%0D%0A[Add your name here]">Support</a> to upgrade your plan and add a leaderboard.</div>
  */
 export class Leaderboard {
@@ -24,13 +25,6 @@ export class Leaderboard {
      * @uiName Width
      */
     this.width = "100%";
-    /**
-     * Hide the viewer's leaderboard row if not in the top results.
-     *
-     * @uiName Hide viewing user
-     * @default
-     */
-    this.hideViewer = false;
     /**
      * @uiName Viewing user text
      */
@@ -53,6 +47,13 @@ export class Leaderboard {
      * @uiName Maximum rows number
      */
     this.maxRows = 10;
+    /**
+     * Hide the viewer's leaderboard row if not in the top results.
+     *
+     * @uiName Hide viewing user
+     * @default
+     */
+    this.hideViewer = false;
     this.ignored = true;
     withHooks(this);
     withShadowView(this);
@@ -76,6 +77,12 @@ export class Leaderboard {
       showRank: this.showRank,
       rankSuffix: this.rankSuffix,
       width: this.width,
+      viewingUserHighlightColor: this.viewingUserHighlightColor,
+      viewingUserHighlightTextColor: this.viewingUserHighlightTextColor,
+      background: this.background,
+      borderColor: this.borderColor,
+      textColor: this.textColor,
+      borderRadius: this.borderRadius,
     };
     const demoProps = { ...props, demoData: this.demoData };
     const viewprops = isDemo()
@@ -230,30 +237,6 @@ export class Leaderboard {
       "attribute": "rank-suffix",
       "reflect": false
     },
-    "hideViewer": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Hide viewing user",
-            "name": "uiName"
-          }, {
-            "text": undefined,
-            "name": "default"
-          }],
-        "text": "Hide the viewer's leaderboard row if not in the top results."
-      },
-      "attribute": "hide-viewer",
-      "reflect": false,
-      "defaultValue": "false"
-    },
     "viewingUserText": {
       "type": "string",
       "mutable": false,
@@ -428,12 +411,189 @@ export class Leaderboard {
       "reflect": false,
       "defaultValue": "10"
     },
+    "hideViewer": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Hide viewing user",
+            "name": "uiName"
+          }, {
+            "text": undefined,
+            "name": "default"
+          }],
+        "text": "Hide the viewer's leaderboard row if not in the top results."
+      },
+      "attribute": "hide-viewer",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "viewingUserHighlightColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Viewing User Highlight Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Changes the background color of the viewing user row in the leaderboard."
+      },
+      "attribute": "viewing-user-highlight-color",
+      "reflect": false
+    },
+    "viewingUserHighlightTextColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Viewing User Text Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Changes the text color of the viewing user row in the leaderboard."
+      },
+      "attribute": "viewing-user-highlight-text-color",
+      "reflect": false
+    },
+    "background": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Background Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Changes the background color of the leaderboard."
+      },
+      "attribute": "background",
+      "reflect": false
+    },
+    "borderColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Border Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Changes the border color of the table rows."
+      },
+      "attribute": "border-color",
+      "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": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Text color of the leaderboard."
+      },
+      "attribute": "text-color",
+      "reflect": false
+    },
+    "borderRadius": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Border Radius",
+            "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Leaderboard border radius in pixels."
+      },
+      "attribute": "border-radius",
+      "reflect": false
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<LeaderboardViewProps>",
-        "resolved": "{ states?: { loading: boolean; hasLeaders: boolean; isEssentials?: boolean; styles: { usersheading: string; statsheading: string; rankheading?: string; showRank?: boolean; hideViewer?: boolean; viewingUserText?: string; hideNames?: boolean; anonymousUser?: string; rankSuffix?: string; width?: string; }; }; data?: { rankType: string; leaderboard: { textValue: string; rank: number; firstName: string; lastInitial: string; rowNumber: number; }[]; viewerRank?: { textValue: string; rank: number; firstName?: string; lastInitial?: string; rowNumber: number; }; }; elements?: { empty: VNode; }; }",
+        "resolved": "{ states?: { loading: boolean; hasLeaders: boolean; isEssentials?: boolean; styles: { usersheading: string; statsheading: string; rankheading?: string; showRank?: boolean; hideViewer?: boolean; viewingUserText?: string; viewingUserHighlightColor?: string; viewingUserHighlightTextColor?: string; hideNames?: boolean; anonymousUser?: string; rankSuffix?: string; width?: string; background?: string; borderColor?: string; textColor?: string; borderRadius?: number; }; }; data?: { rankType: string; leaderboard: { textValue: string; rank: number; firstName: string; lastInitial: string; rowNumber: number; }[]; viewerRank?: { textValue: string; rank: number; firstName?: string; lastInitial?: string; rowNumber: number; }; }; elements?: { empty: VNode; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -526,6 +686,12 @@ function useLeaderboardDemo(props) {
         hideNames: props.hideNames,
         rankSuffix: props.rankSuffix,
         width: props.width,
+        viewingUserHighlightColor: props.viewingUserHighlightColor,
+        viewingUserHighlightTextColor: props.viewingUserHighlightTextColor,
+        background: props.background,
+        borderColor: props.borderColor,
+        textColor: props.textColor,
+        borderRadius: props.borderRadius,
       },
     },
     data: {

package/dist/collection/components/sqm-leaderboard-rank/sqm-leaderboard-rank-view.js

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 export function LeaderboardRankView(props) {
   const { data } = props;
-  return h("span", { class: "P" }, data.rank);
+  return (h("span", { style: { marginTop: "0px", fontSize: "var(--sl-font-size-small)" } }, data.rank));
 }

package/dist/collection/components/sqm-leaderboard-rank/sqm-leaderboard-rank.css

@@ -1,11 +1,11 @@
 p,
 .P {
   font-size: var(--sl-font-size-small);
-  color: var(--sl-color-gray-800);
+  color: var(--sqm-text);
   margin-top: 0px;
 }
 p.Subtitle,
 .P.Subtitle {
-  color: var(--sl-color-gray-500);
+  color: var(--sqm-text-subdued);
   margin: 0px;
 }

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

@@ -3,6 +3,7 @@ import { getProps } from "../../utils/utils";
 import { LinkButtonView } from "./sqm-link-button-view";
 /**
  * @uiName Link Button
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","template","sqm-tab","sqb-program-section","sqb-conditional-section"]
  * @exampleGroup Common Components
  * @example Link Button - <sqm-link-button link="https://www.example.com" open-in-new-tab="true">Click here</sqm-link-button>
  */

package/dist/collection/components/sqm-logout-current-user/sqm-logout-current-user.js

@@ -9,6 +9,7 @@ import { getProps } from "../../utils/utils";
  * @uiName Sign out current user
  * @exampleGroup Instant Access
  * @compatibility Built for instant access
+ * @validParents ["sqm-portal-container","template", "sqm-referred-registration", "sqb-auth-template-switch", "div","sqm-divided-layout","template","sqm-tab","sqb-program-section","sqb-conditional-section"]
  * @example Sign out current user - <sqm-logout-current-user user-identification-text="{email}" switch-user-link="#" switch-user-text="not you?"></sqm-logout-current-user>
  */
 export class LogoutCurrentUser {
@@ -122,7 +123,7 @@ export class LogoutCurrentUser {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; textColor?: string; buttonType?: \"primary\" | \"secondary\"; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; borderRadius?: string; borderColor?: string; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-name-fields/sqm-name-fields-view.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { createStyleSheet } from "../../styling/JSS";
 import { ErrorStyles } from "../../global/mixins";
+import { createStyleSheet } from "../../styling/JSS";
 const style = {
   ErrorStyle: ErrorStyles,
   FieldsContainer: {
@@ -16,10 +16,35 @@ const vanillaStyle = `
   display: block;
 }
 
-sl-input::part(label){
-  font-size: var(--sl-input-label-font-size-small);
+*::part(input-label), *::part(select-label), *::part(textarea-label){
+  font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
   font-weight: var(--sl-font-weight-semibold);
+  color: var(--sqm-input-label-color, var(--sqm-text), black);
+}
+
+*::part(input-base), *::part(select-base), *::part(textarea-base){
+  background-color: var(--sqm-input-background, #fff);
+  border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
+  color: var(--sqm-input-color, white);
+  border-width: var(--sqm-border-thickness, 1px);
+}
+
+sl-input::part(base):focus,
+sl-select::part(form-control-wrapper):focus,
+sl-textare::part(textarea-label):focus {
+  border-color: none;
+  border: var(--sqm-input-focus-border, var(--sqm-border-thickness) solid var(--sl-input-border-color-focus));
 }
+
+*::part(input-label):disabled, *::part(select-label):disabled, *::part(textarea-label):disabled{
+  background: var(--sqm-input-disabled-background, #f5f5f5);
+  color: var(--sqm-input-disabled-color, var(--sl-color-gray-600));
+}
+
+sl-input {
+  --sl-input-border-color-focus: var(--sqm-border-color-focus); 
+}
+
 `;
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();

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

@@ -6,7 +6,7 @@ import { NameFieldsView } from "./sqm-name-fields-view";
 import { useNameFields } from "./useNameFields";
 /**
  * @uiName Form Name Fields
- * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
  * @exampleGroup Microsite Components
  * @example Form Name Fields - <sqm-name-fields first-name-label="First Name" last-name-label="Last Name"></sqm-name-fields>
  */
@@ -29,6 +29,7 @@ export class NameFields {
     return h(NameFieldsView, { states: states });
   }
   static get is() { return "sqm-name-fields"; }
+  static get encapsulation() { return "shadow"; }
   static get properties() { return {
     "firstNameLabel": {
       "type": "string",

package/dist/collection/components/sqm-navigation-menu/sqm-navigation-menu.js

@@ -7,6 +7,7 @@ import { getProps } from "../../utils/utils";
 import deepmerge from "deepmerge";
 /**
  * @uiName Navigation Menu
+ * @validParents ["sqm-portal-container","div","sqm-brand","sqm-divided-layout"]
  */
 export class NavigationMenu {
   constructor() {

package/dist/collection/components/sqm-navigation-sidebar/sqm-navigation-sidebar-view.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
-const vanillaStyle = `
+export function NavigationSidebarView(props, children) {
+  const vanillaStyle = `
 
 * {
   padding: 0;
@@ -7,6 +8,16 @@ const vanillaStyle = `
   box-sizing: border-box;
 }
 
+.container {
+  background: var(--sqm-portal-background);
+}
+
+.menu-items {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
 @keyframes slideIn {
   0% {
     left: -350px;
@@ -58,12 +69,12 @@ const vanillaStyle = `
     flex-direction: column;
     z-index: 100;
   }
-  .menu-items { 
+  .menu-items {
     display: none;
     padding: 20px;
-    border-right: 1px solid #eaeaea;
+    border-right: var(--sqm-border-thickness) solid var(--sqm-border-color);
     padding-top: 60px;
-    background: white; 
+    background: var(--sqm-portal-background); 
     width: 100vw;
     height: 100vh;
     position: absolute;
@@ -127,7 +138,7 @@ const vanillaStyle = `
   .toggler:checked ~ .hamburger > .line:nth-child(2),
   .toggler:checked ~ .hamburger > .line:nth-child(3) {
     width: 75%;
-    border-bottom: 3px solid #444445;
+    border-bottom: 3px solid ${props.mobileMenuColor};
     margin: 0;
   }
 
@@ -137,11 +148,10 @@ const vanillaStyle = `
     height: 4px;
     width: 100%;
     margin-bottom: 3px;
-    border-bottom: 5px solid #444445;
+    border-bottom: 5px solid ${props.mobileMenuColor};
   }
 }
 `;
-export function NavigationSidebarView(props, children) {
   return (h("div", { class: "container", part: "sqm-base" },
     h("style", null, vanillaStyle),
     h("input", Object.assign({ type: "checkbox", class: "toggler" }, props)),

package/dist/collection/components/sqm-navigation-sidebar/sqm-navigation-sidebar.js

@@ -1,30 +1,104 @@
-import { useCurrentPage, useProgramId, } from "@saasquatch/component-boilerplate";
+import { isDemo, useCurrentPage, useProgramId, } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { useEffect, useState } from "@saasquatch/universal-hooks";
-import { Component, h, State } from "@stencil/core";
-import { NavigationSidebarView } from "./sqm-navigation-sidebar-view";
+import { Component, h, Prop, State } from "@stencil/core";
+import { NavigationSidebarView, } from "./sqm-navigation-sidebar-view";
+import deepmerge from "deepmerge";
 /**
  * @uiName Microsite Sidebar
+ * @validParents ["div","sqm-divided-layout","template","sqm-portal-container","sqm-brand"]
+ * @validChildren ["sqm-navigation-sidebar-item"]
  * @slots [{"name":"", "title":"Sidebar Content"}]
  */
 export class NavigationSidebar {
   constructor() {
     this.ignored = true;
+    /**
+     * @uiName Text color
+     * @uiWidget color
+     * @format color
+     * @uiGroup Style
+     */
+    this.mobileMenuColor = "var(--sqm-text, #444445)";
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
-    const props = useNavigationSidebar();
+    const props = isDemo()
+      ? useDemoNavigationSidebar(this)
+      : useNavigationSidebar(this);
     return (h(NavigationSidebarView, Object.assign({}, props),
       h("slot", null)));
   }
   static get is() { return "sqm-navigation-sidebar"; }
   static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "mobileMenuColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Text color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "mobile-menu-color",
+      "reflect": false,
+      "defaultValue": "\"var(--sqm-text, #444445)\""
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<NavigationSidebarViewProps>",
+        "resolved": "{ onClick?: (e: MouseEvent) => void; checked?: boolean; mobileMenuColor?: string; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "NavigationSidebarViewProps": {
+            "location": "import",
+            "path": "./sqm-navigation-sidebar-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
   static get states() { return {
     "ignored": {}
   }; }
 }
-function useNavigationSidebar() {
+function useNavigationSidebar(props) {
   const location = useCurrentPage();
   const programId = useProgramId();
   const [checked, setChecked] = useState(false);
@@ -36,7 +110,13 @@ function useNavigationSidebar() {
     setChecked(e.target.checked);
   }
   return {
+    mobileMenuColor: props.mobileMenuColor,
     checked,
     onClick,
   };
 }
+function useDemoNavigationSidebar(props) {
+  return deepmerge({
+    mobileMenuColor: props.mobileMenuColor,
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

package/dist/collection/components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view.js

@@ -3,22 +3,33 @@ import { createStyleSheet } from "../../styling/JSS";
 import { gap } from "../../global/mixins";
 import { navigation } from "@saasquatch/component-boilerplate";
 export function NavigationSidebarItemView(props) {
-  const { states, data } = props;
+  const { states, data, padding = "x-small" } = props;
+  const backgroundColor = props.backgroundColor || "var(--sqm-portal-background)";
+  const backgroundHoverColor = props.backgroundHoverColor || "var(--sqm-primary-button-background-hover)";
+  const backgroundFocusedColor = props.backgroundFocusedColor || "var(--sqm-primary-button-background)";
+  const textFocusedColor = props.textFocusedColor || "var(--sqm-primary-button-color)";
   const style = {
     ItemContainer: {
       display: "flex",
-      "background-color": `${states.active ? "var(--sl-color-gray-200)" : "var(--sl-color-white)"}`,
-      "border-radius": "8px",
-      padding: "8px",
+      "background-color": `${states.active ? backgroundFocusedColor : backgroundColor}`,
+      borderRadius: props.borderRadius
+        ? `${props.borderRadius}px`
+        : "var(--sqm-border-radius-normal)",
+      padding: `var(--sl-spacing-${padding})`,
       "text-decoration": "none",
-      color: "#454444",
+      color: states.active
+        ? textFocusedColor
+        : props.textColor || "var(--sqm-text)",
       "align-items": "center",
       ...gap({ direction: "row", size: "var(--sl-font-size-small)" }),
       "&:hover": {
         cursor: "pointer",
         background: states.active
-          ? "var(--sl-color-gray-300)"
-          : "var(--sl-color-gray-50)",
+          ? backgroundFocusedColor
+          : backgroundHoverColor,
+        color: states.active
+          ? textFocusedColor
+          : props.textHoverColor || "var(--sqm-primary-button-color-hover)",
       },
     },
     Label: {