@saasquatch/mint-components 1.15.0-3 → 1.15.0-30

package/dist/esm-es5/sqm-tabs.entry.js

@@ -1 +1 @@
-import{h,c as Host,r as registerInstance}from"./index-91e7729f.js";import{u as useMemo,f as useEffect,n as h$1}from"./stencil-hooks.module-4bc38af4.js";import{_}from"./index.module-89a79f66.js";import{g as getProps}from"./utils-334c1e34.js";import{u as useRerenderListener}from"./re-render-cc945f38.js";import{u as useChildElements}from"./useChildElements-7945ae56.js";var TabsView=function(t){var e=t.content,s=t.placement;var n=!s||s==="top"||s==="bottom"?"var(--sl-spacing-x-large) 0;":"0 var(--sl-spacing-xx-large);";var r="\n    sl-tab-panel::part(base) {\n      padding: "+n+";\n    }\n  ";return h(Host,null,h("style",{type:"text/css"},r),h("sl-tab-group",{placement:s},e.tabs.map((function(t){var e=t.getAttribute("slot");if(t.tagName==="RAISINS-PLOP-TARGET"){return h("sl-tab",{slot:"nav"},h("div",{style:{marginTop:"10px"}},h("slot",{name:e})))}return[h("sl-tab",{slot:"nav",panel:e,id:t.getAttribute("id")||e},t.getAttribute("header")),h("sl-tab-panel",{name:e},h("slot",{name:e}))]}))),h("div",{style:{display:"none"}},h("slot",null)))};var REVEAL_EVENT="sq:reveal";function useTabs(){var t=useChildElements();var e=_();var s=useRerenderListener();var n=useMemo((function(){return t.filter((function(t){return t.tagName==="SQM-TAB"||t.tagName==="RAISINS-PLOP-TARGET"})).map((function(t,e){if(t.tagName==="RAISINS-PLOP-TARGET"){var s=t;s.style.position="absolute";s.style.left="6px";var n=t.firstElementChild.childNodes[1];n.innerHTML="＋";n.style.lineHeight="20px"}t.setAttribute("slot","tab-"+e);t.setAttribute("id","tab-"+e);return t}))}),[t,s]);useEffect((function(){var t=function(t){var s;var n=t.target;t.stopPropagation();if(!n)return;var r=n.closest("sqm-tabs");if(!e.contains(n)||!r)return;var a=n.closest("sqm-tab");var o=r.shadowRoot.querySelector("sl-tab-group");(s=o)===null||s===void 0?void 0:s.show(a.id)};e.addEventListener(REVEAL_EVENT,t);return function(){e.removeEventListener(REVEAL_EVENT,t)}}),[]);return{content:{tabs:n}}}var Tabs=function(){function t(t){registerInstance(this,t);h$1(this)}t.prototype.disconnectedCallback=function(){};t.prototype.render=function(){var t=useTabs().content;var e=getProps(this).placement;return h(TabsView,{placement:e,content:t},h("slot",null))};return t}();export{Tabs as sqm_tabs};
+import{h,c as Host,r as registerInstance}from"./index-91e7729f.js";import{u as useMemo,f as useEffect,n as h$1}from"./stencil-hooks.module-4bc38af4.js";import{_}from"./index.module-89a79f66.js";import{g as getProps}from"./utils-334c1e34.js";import{u as useRerenderListener}from"./re-render-cc945f38.js";import{u as useChildElements}from"./useChildElements-7945ae56.js";var TabsView=function(t){var e=t.content,r=t.placement,s=t.textColor,n=s===void 0?"var(--sqm-text)":s;var a=!r||r==="top"||r==="bottom"?"var(--sl-spacing-x-large) 0;":"0 var(--sl-spacing-xx-large);";var o="\n    sl-tab-panel::part(base) {\n      padding: "+a+";\n    }\n\n    sl-tab::part(base) {\n      color: "+n+";\n    }\n  ";console.log("text color is ",n);return h(Host,null,h("style",{type:"text/css"},o),h("sl-tab-group",{placement:r},e.tabs.map((function(t){var e=t.getAttribute("slot");if(t.tagName==="RAISINS-PLOP-TARGET"){return h("sl-tab",{slot:"nav"},h("div",{style:{marginTop:"10px"}},h("slot",{name:e})))}return[h("sl-tab",{slot:"nav",panel:e,part:"tab",id:t.getAttribute("id")||e},t.getAttribute("header")),h("sl-tab-panel",{name:e},h("slot",{name:e}))]}))),h("div",{style:{display:"none"}},h("slot",null)))};var REVEAL_EVENT="sq:reveal";function useTabs(){var t=useChildElements();var e=_();var r=useRerenderListener();var s=useMemo((function(){return t.filter((function(t){return t.tagName==="SQM-TAB"||t.tagName==="RAISINS-PLOP-TARGET"})).map((function(t,e){if(t.tagName==="RAISINS-PLOP-TARGET"){var r=t;r.style.position="absolute";r.style.left="6px";var s=t.firstElementChild.childNodes[1];s.innerHTML="＋";s.style.lineHeight="20px"}t.setAttribute("slot","tab-"+e);t.setAttribute("id","tab-"+e);return t}))}),[t,r]);useEffect((function(){var t=function(t){var r;var s=t.target;t.stopPropagation();if(!s)return;var n=s.closest("sqm-tabs");if(!e.contains(s)||!n)return;var a=s.closest("sqm-tab");var o=n.shadowRoot.querySelector("sl-tab-group");(r=o)===null||r===void 0?void 0:r.show(a.id)};e.addEventListener(REVEAL_EVENT,t);return function(){e.removeEventListener(REVEAL_EVENT,t)}}),[]);return{content:{tabs:s}}}var Tabs=function(){function t(t){registerInstance(this,t);h$1(this)}t.prototype.disconnectedCallback=function(){};t.prototype.render=function(){var t=useTabs().content;var e=getProps(this),r=e.placement,s=e.textColor;return h(TabsView,{placement:r,content:t,textColor:s},h("slot",null))};return t}();export{Tabs as sqm_tabs};

package/dist/esm-es5/sqm-text-span-view-cd3902e5.js

@@ -0,0 +1 @@
+import{h}from"./index-91e7729f.js";import{c as createStyleSheet}from"./JSS-67b5cff8.js";function TextSpanView(t,e){var r=t.type,s=t.fontSize,a=t.textColor;var n={p:{"font-size":s?s+"px":"var(--sl-font-size-small)","font-weight":"400",color:a||"var(--sqm-text)",margin:"0"},subtext:{"font-size":s?s+"px":"var(--sl-font-size-x-small)","font-weight":"400",color:a||"var(--sqm-text-subdued)",margin:"0"},h1:{"font-size":s?s+"px":"var(--sl-font-size-xx-large)","font-weight":"600",color:a||"var(--sqm-text)",margin:"0"},h2:{"font-size":s?s+"px":"var(--sl-font-size-x-large)","font-weight":"600",color:a||"var(--sqm-text)",margin:"0"},h3:{"font-size":s?s+"px":"var(--sl-font-size-large)","font-weight":"600",color:a||"var(--sqm-text)",margin:"0"},h4:{"font-size":s?s+"px":"13px","font-weight":"600",color:a||"var(--sqm-text)",margin:"0"}};var o=createStyleSheet(n);var i=o.toString();var l="\n    :host {\n      word-wrap: break-word;\n    }\n    sqm-text-span {\n      display: inline;\n    }\n  ";return h("span",{class:o.classes[r],part:"sqm-base"},h("style",{type:"text/css"},l,i),e)}export{TextSpanView as T};

package/dist/esm-es5/sqm-text-span.entry.js

@@ -1 +1 @@
-import{r as registerInstance,h as h$1}from"./index-91e7729f.js";import{n as h}from"./stencil-hooks.module-4bc38af4.js";import"./JSS-67b5cff8.js";import{T as TextSpanView}from"./sqm-text-span-view-ca32495e.js";var Text=function(){function t(t){registerInstance(this,t);this.ignored=true;h(this)}t.prototype.disconnectedCallback=function(){};t.prototype.componentWillLoad=function(){};t.prototype.render=function(){return h$1(TextSpanView,{type:this.type},this.text)};return t}();export{Text as sqm_text_span};
+import{r as registerInstance,h as h$1}from"./index-91e7729f.js";import{n as h}from"./stencil-hooks.module-4bc38af4.js";import"./JSS-67b5cff8.js";import{T as TextSpanView}from"./sqm-text-span-view-cd3902e5.js";var TextSpan=function(){function t(t){registerInstance(this,t);this.ignored=true;h(this)}t.prototype.disconnectedCallback=function(){};t.prototype.componentWillLoad=function(){};t.prototype.render=function(){return h$1(TextSpanView,{type:this.type,fontSize:this.fontSize,textColor:this.textColor},this.text)};return t}();export{TextSpan as sqm_text_span};

package/dist/mint-components/global/styles.ts

@@ -510,7 +510,7 @@ html {
   --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-focus-ring-width: 0px;
   --sl-button-font-size-small: var(--sl-font-size-x-small);
   --sl-button-font-size-medium: var(--sl-font-size-small);
   --sl-button-font-size-large: var(--sl-font-size-medium);
@@ -523,7 +523,6 @@ html {
   --sl-input-background-color-disabled: var(--sl-color-gray-100);
   --sl-input-border-color: var(--sl-color-gray-300);
   --sl-input-border-color-hover: var(--sl-color-gray-400);
-  --sl-input-border-color-focus: var(--sl-color-primary-500);
   --sl-input-border-color-disabled: var(--sl-color-gray-300);
   --sl-input-border-width: 1px;
   --sl-input-border-radius-small: var(--sl-border-radius-medium);
@@ -575,16 +574,69 @@ html {
   --sl-z-index-toast: 950;
   --sl-z-index-tooltip: 1000;
 }
+  
 :root {
   --sqm-header-background: var(--sl-color-white);
   --sqm-footer-background: var(--sl-color-white);
   --sqm-color-text-error: #e63717;
   --sqm-content-max-width: 700px;
   --sqm-content-background: var(--sl-color-white);
-  --sqm-portal-background: transparent;
+  --sqm-portal-background: #121212;
   --widget-background-color: var(--sl-color-white);
   --sqm-portal-main-width: 900px;
   --sqm-max-width: 100%;
+  
+  /*
+  --sqm-text: var(--sl-color-neutral-800);
+  --sqm-text-subdued: var(--sl-color-neutral-500);
+ */
+  --sqm-text: white;
+  --sqm-text-subdued: var(--sl-color-neutral-500);
+  /*
+  --sqm-primary-button-background: var(--sl-color-primary-500);
+  --sqm-primary-button-background-hover: var(--sl-color-primary-300);
+  --sqm-primary-button-color: var(--sl-color-primary-text);
+  --sqm-primary-button-color-border: none;
+  --sqm-primary-button-radius: var(--sl-border-radius-large);
+ */
+
+  --sqm-primary-button-background: #1ed760;
+  --sqm-primary-button-background-hover: #1DB954;
+  --sqm-primary-button-color: #121212;
+  --sqm-primary-button-color-border: transparent;
+  --sqm-primary-button-radius: 30px;
+
+
+  --sqm-secondary-button-background: #191414; /* Spotify Black */
+  --sqm-secondary-button-background-hover: #282828; /* Slightly lighter black for hover effect */
+  --sqm-secondary-button-color: #FFFFFF; /* Spotify White for text */
+  --sqm-secondary-button-color-border: #FFFFFF; /* Spotify White for border */
+  --sqm-secondary-button-radius: 30px;
+  
+  --sqm-border-radius-normal: 18px;
+  --sqm-border-color: white;
+  --sqm-border-thickness: 1px;
+
+
+  --sqm-input-background: #121212;
+  --sqm-input-border: 1px solid #7c7c7c;
+  --sqm-input-border-radius: 30px;
+  --sqm-input-color: white;
+  --sqm-input-focus-border: 1px solid white;
+  --sqm-input-label-color: white;
+  --sqm-border-width: 1px;
+  --sqm-input-label-font-size: white;
+  --sqm-input-disabled-color: white;
+  --sqm-input-disabled-background: #303030;
+  
+  --sl-input-color: var(--sqm-input-color);
+  --sl-input-color-hover: var(--sqm-input-color);
+  --sl-input-color-focus: var(--sqm-input-color);
+  --sl-input-color-disabled: var(--sqm-input-disabled-color);
+  --sl-input-border-color-disabled: #7c7c7c;
+  --sl-input-border-color-focus: white !important;
+  --sl-input-border-color: #7c7c7c;
+  --sl-input-border-color-hover: white;
 }
 
 body {
@@ -592,20 +644,78 @@ body {
   font-size: var(--sl-font-size-medium);
   font-weight: var(--sl-font-weight-normal);
   letter-spacing: var(--sl-letter-spacing-small);
-  color: var(--sl-color-gray-800);
+  color: var(--sqm-text);
   line-height: var(--sl-line-height-normal);
   margin: 0;
   background-color: var(--sqm-portal-background);
 }
 
-// .terms-link,
-// .terms-link:visited {
-//   color: var(--sl-color-gray-500);
-//   text-decoration: none;
-// }
-// .terms-link:hover {
-//   color: var(--sl-color-gray-600);
-// }
+/** AL: Shading variables **/
+sl-alert[type="success"]::part(icon) {
+  color: var(--sqm-success-icon-color, var(--sl-color-success-500));
+}
+
+sl-alert[type="success"]::part(base) {
+  background-color: var(--sqm-success-icon-color, var(--sl-color-success-100));
+}
+
+sl-alert[type="warning"]::part(icon) {
+  color: var(--sqm-warning-icon-color, var(--sl-color-warning-500));
+}
+
+sl-alert[type="warning"]::part(base) {
+  background-color: var(--sqm-warning-icon-color, var(--sl-color-warning-100));
+}
+
+sl-alert[type="danger"]::part(icon) {
+  color: var(--sqm-danger-icon-color, var(--sl-color-danger-500));
+}
+
+sl-alert[type="danger"]::part(base) {
+  background-color: var(--sqm-danger-icon-color, var(--sl-color-danger-100));
+}
+
+
+sl-alert[type="info"]::part(icon) {
+  color: var(--sqm-info-icon-color, var(--sl-color-info-500));
+}
+
+sl-alert[type="info"]::part(base) {
+  background-color: var(--sqm-info-icon-color, var(--sl-color-info-100));
+}
+
+sl-alert[type="neutral"]::part(icon) {
+  color: var(--sqm-neutral-icon-color, var(--sl-color-neutral-500));
+}
+
+sl-alert[type="neutral"]::part(base) {
+  background-color: var(--sqm-neutral-icon-color, var(--sl-color-neutral-100));
+}
+
+sl-badge[type="success"]::part(base) {
+  background-color: var(--sqm-success-badge-background, var(--sl-color-success-100));
+  color: var(--sqm-success-badge-text-color, var(--sl-color-success-700));
+}
+
+sl-badge[type="warning"]::part(base) {
+  background-color: var(--sqm-warning-badge-background, var(--sl-color-warning-100));
+  color: var(--sqm-warning-badge-text-color, var(--sl-color-warning-700));
+}
+
+sl-badge[type="danger"]::part(base) {
+  background-color: var(--sqm-danger-badge-background, var(--sl-color-danger-100));
+  color: var(--sqm-danger-badge-text-color, var(--sl-color-danger-700));
+}
+
+sl-badge[type="info"]::part(base) {
+  background-color: var(--sqm-info-badge-background, var(--sl-color-info-100));
+  color: var(--sqm-info-badge-text-color, var(--sl-color-info-700));
+}
+
+sl-badge[type="neutral"]::part(base) {
+  background-color: var(--sqm-neutral-badge-background, var(--sl-color-neutral-100));
+  color: var(--sqm-neutral-badge-text-color, var(--sl-color-neutral-700));
+}
 
 h1, h2, h3, h4{
   line-height: var(--sl-line-height-dense);
@@ -624,7 +734,6 @@ h2, .Title {
 }
 .P {
   font-size: var(--sl-font-size-small);
-  color: var(--sl-color-gray-800);
   margin-top: 0px;
 }
 
@@ -635,7 +744,7 @@ h2, .Title {
 .Subtitle {
   text-align: center;
   margin-bottom: 0px;
-  color: var(--sl-color-gray-500);
+  color: var(--sqm-text-subdued);
 }
 .SupportText{
   margin-top: var(--sl-spacing-small);
@@ -664,8 +773,11 @@ sl-details::part(summary) {
   font-weight: var(--sl-font-weight-semibold);
   margin: 0px;
 }
+
+/**************************
+ * Now Deprecated - Use secondarybutton-base instead *
 *::part(defaultbutton-base){
-  background-color: rgba(0,0,0,0);
+
   color: var(--sl-color-gray-800);
   border-color: var(--sl-color-gray-800);
 }
@@ -678,34 +790,80 @@ sl-details::part(summary) {
 *::part(defaultbutton-base):focus{
   box-shadow: none;
 }
+*/
+
 *::part(primarybutton-base){
-  background-color: var(--sl-color-primary-400);
-  color: var(--sl-color-white);
-  border-color: var(--sl-color-primary-400);
+  background-color: var(--sqm-primary-button-background);
+  color: var(--sqm-primary-button-color);
+  border-color: var(--sqm-primary-button-color-border);
+  border-radius: var(--sqm-primary-button-radius);
 }
+
 *::part(primarybutton-base):hover{
-  background-color: var(--sl-color-primary-300);
-  border-color: var(--sl-color-primary-300);
+  background-color: var(--sqm-primary-button-background-hover);
 }
-*::part(primarybutton-base):active{
-  background-color: var(--sl-color-primary-500);
-  border-color: var(--sl-color-primary-500);
+
+*::part(primarybutton-base):focus{
+  box-shadow: none;
 }
 
+*::part(secondarybutton-base){
+  background-color: var(--sqm-secondary-button-background);
+  color: var(--sqm-secondary-button-color);
+  border-color: var(--sqm-secondary-button-color-border);
+  border-radius: var(--sqm-secondary-button-radius);
+}
+
+*::part(secondarybutton-base):hover{
+  background-color: var(--sqm-secondary-button-background-hover);
+}
+
+*::part(tertiarybutton-base){
+  color: var(--sqm-text, var(--sl-color-neutral-800));
+  width: max-content;
+  display: flex;
+  margin: auto;
+}
+
+*::part(tertiarybutton-base):hover{
+  color: #1ed760;
+}
 *::part(primarybutton-base):focus{
   box-shadow: none;
 }
 
-*::part(input-label), *::part(select-label), *::part(textarea-label){
-  font-size: var(--sl-input-font-size-small);
+sl-input::part(input-label), sl-selcet::part(select-label), sl-textarea::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);
 }
 
-sl-input::part(label){
-  font-size: var(--sl-input-label-font-size-small);
-  font-weight: var(--sl-font-weight-semibold);
+sl-input::part(input-base), sl-select::part(select-base), sl-textarea::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-width, 1px);
+}
+
+sl-input::part(base):focus,
+sl-select::part(form-control-wrapper):focus,
+sl-textarea::part(textarea-label):focus {
+  border-color: none;
+  border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus));
 }
 
+sl-input::part(input-label):disabled, sl-select::part(select-label):disabled, sl-textarea::part(textarea-label):disabled{
+  background: var(--sqm-input-disabled-background, #f5f5f5);
+  color: var(--sqm-input-disabled-color, var(--sl-color-gray-600));
+}
+
+sl-input {
+  /* Set the border color when the input is in focus */
+  --sl-input-border-color-focus: white; /* Spotify Green */
+}
+
+
+
 *::part(menuitem-base):hover{
   background-color: var(--sl-color-gray-200);
   color: var(--sl-color-gray-700);