@saasquatch/mint-components 1.15.0-98 → 1.16.0-0

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

@@ -7,14 +7,13 @@ 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 - <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>
+ * @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>
  * @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 {
@@ -25,6 +24,13 @@ 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
      */
@@ -47,13 +53,6 @@ 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);
@@ -77,12 +76,6 @@ 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()
@@ -237,6 +230,30 @@ 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,
@@ -411,189 +428,12 @@ 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; 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; }; }",
+        "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; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -686,12 +526,6 @@ 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", { style: { marginTop: "0px", fontSize: "var(--sl-font-size-small)" } }, data.rank));
+  return h("span", { class: "P" }, 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(--sqm-text);
+  color: var(--sl-color-gray-800);
   margin-top: 0px;
 }
 p.Subtitle,
 .P.Subtitle {
-  color: var(--sqm-text-subdued);
+  color: var(--sl-color-gray-500);
   margin: 0px;
 }

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

@@ -3,7 +3,6 @@ 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,7 +9,6 @@ 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 {
@@ -123,7 +122,7 @@ export class LogoutCurrentUser {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CopyTextViewProps>",
-        "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; }",
+        "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; }",
         "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 { ErrorStyles } from "../../global/mixins";
 import { createStyleSheet } from "../../styling/JSS";
+import { ErrorStyles } from "../../global/mixins";
 const style = {
   ErrorStyle: ErrorStyles,
   FieldsContainer: {
@@ -16,35 +16,10 @@ const vanillaStyle = `
   display: block;
 }
 
-*::part(input-label), *::part(select-label), *::part(textarea-label){
-  font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
+sl-input::part(label){
+  font-size: var(--sl-input-label-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

@@ -29,7 +29,6 @@ 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,7 +7,6 @@ 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,6 +1,5 @@
 import { h } from "@stencil/core";
-export function NavigationSidebarView(props, children) {
-  const vanillaStyle = `
+const vanillaStyle = `
 
 * {
   padding: 0;
@@ -8,16 +7,6 @@ export function NavigationSidebarView(props, children) {
   box-sizing: border-box;
 }
 
-.container {
-  background: var(--sqm-portal-background);
-}
-
-.menu-items {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
 @keyframes slideIn {
   0% {
     left: -350px;
@@ -69,12 +58,12 @@ export function NavigationSidebarView(props, children) {
     flex-direction: column;
     z-index: 100;
   }
-  .menu-items {
+  .menu-items { 
     display: none;
     padding: 20px;
-    border-right: var(--sqm-border-thickness) solid var(--sqm-border-color);
+    border-right: 1px solid #eaeaea;
     padding-top: 60px;
-    background: var(--sqm-portal-background); 
+    background: white; 
     width: 100vw;
     height: 100vh;
     position: absolute;
@@ -138,7 +127,7 @@ export function NavigationSidebarView(props, children) {
   .toggler:checked ~ .hamburger > .line:nth-child(2),
   .toggler:checked ~ .hamburger > .line:nth-child(3) {
     width: 75%;
-    border-bottom: 3px solid ${props.mobileMenuColor};
+    border-bottom: 3px solid #444445;
     margin: 0;
   }
 
@@ -148,10 +137,11 @@ export function NavigationSidebarView(props, children) {
     height: 4px;
     width: 100%;
     margin-bottom: 3px;
-    border-bottom: 5px solid ${props.mobileMenuColor};
+    border-bottom: 5px solid #444445;
   }
 }
 `;
+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,104 +1,30 @@
-import { isDemo, useCurrentPage, useProgramId, } from "@saasquatch/component-boilerplate";
+import { useCurrentPage, useProgramId, } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { useEffect, useState } from "@saasquatch/universal-hooks";
-import { Component, h, Prop, State } from "@stencil/core";
-import { NavigationSidebarView, } from "./sqm-navigation-sidebar-view";
-import deepmerge from "deepmerge";
+import { Component, h, State } from "@stencil/core";
+import { NavigationSidebarView } from "./sqm-navigation-sidebar-view";
 /**
  * @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 = isDemo()
-      ? useDemoNavigationSidebar(this)
-      : useNavigationSidebar(this);
+    const props = useNavigationSidebar();
     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(props) {
+function useNavigationSidebar() {
   const location = useCurrentPage();
   const programId = useProgramId();
   const [checked, setChecked] = useState(false);
@@ -110,13 +36,7 @@ function useNavigationSidebar(props) {
     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,33 +3,22 @@ import { createStyleSheet } from "../../styling/JSS";
 import { gap } from "../../global/mixins";
 import { navigation } from "@saasquatch/component-boilerplate";
 export function NavigationSidebarItemView(props) {
-  const { states, data, padding = "x-small" } = props;
-  const backgroundColor = props.backgroundColor || "var(--sqm-portal-background)";
-  const backgroundHoverColor = props.backgroundHoverColor || "var(--sqm-accent-color-background)";
-  const backgroundFocusedColor = props.backgroundFocusedColor || "var(--sqm-primary-color)";
-  const textFocusedColor = props.textFocusedColor || "var(--sqm-text)";
+  const { states, data } = props;
   const style = {
     ItemContainer: {
       display: "flex",
-      "background-color": `${states.active ? backgroundFocusedColor : backgroundColor}`,
-      borderRadius: props.borderRadius
-        ? `${props.borderRadius}px`
-        : "var(--sqm-border-radius-normal)",
-      padding: `var(--sl-spacing-${padding})`,
+      "background-color": `${states.active ? "var(--sl-color-gray-200)" : "var(--sl-color-white)"}`,
+      "border-radius": "8px",
+      padding: "8px",
       "text-decoration": "none",
-      color: states.active
-        ? textFocusedColor
-        : props.textColor || "var(--sqm-text)",
+      color: "#454444",
       "align-items": "center",
       ...gap({ direction: "row", size: "var(--sl-font-size-small)" }),
       "&:hover": {
         cursor: "pointer",
         background: states.active
-          ? backgroundFocusedColor
-          : backgroundHoverColor,
-        color: states.active
-          ? textFocusedColor
-          : props.textHoverColor || "var(--sqm-text)",
+          ? "var(--sl-color-gray-300)"
+          : "var(--sl-color-gray-50)",
       },
     },
     Label: {