@saasquatch/mint-components 1.15.0-26 → 1.15.0-28

package/dist/cjs/sqm-text-span-view-ce4c0178.js

@@ -0,0 +1,63 @@
+'use strict';
+
+const index = require('./index-a29c60ef.js');
+const JSS = require('./JSS-8503a151.js');
+
+function TextSpanView(props, children) {
+  const { type, fontSize, textColor } = props;
+  const style = {
+    p: {
+      "font-size": fontSize ? `${fontSize}px` : "var(--sl-font-size-small)",
+      "font-weight": "400",
+      color: textColor || "var(--sqm-text)",
+      margin: "0",
+    },
+    subtext: {
+      "font-size": fontSize ? `${fontSize}px` : "var(--sl-font-size-x-small)",
+      "font-weight": "400",
+      color: textColor || "var(--sqm-text-subdued)",
+      margin: "0",
+    },
+    h1: {
+      "font-size": fontSize ? `${fontSize}px` : "var(--sl-font-size-xx-large)",
+      "font-weight": "600",
+      color: textColor || "var(--sqm-text)",
+      margin: "0",
+    },
+    h2: {
+      "font-size": fontSize ? `${fontSize}px` : "var(--sl-font-size-x-large)",
+      "font-weight": "600",
+      color: textColor || "var(--sqm-text)",
+      margin: "0",
+    },
+    h3: {
+      "font-size": fontSize ? `${fontSize}px` : "var(--sl-font-size-large)",
+      "font-weight": "600",
+      color: textColor || "var(--sqm-text)",
+      margin: "0",
+    },
+    h4: {
+      "font-size": fontSize ? `${fontSize}px` : "13px",
+      "font-weight": "600",
+      color: textColor || "var(--sqm-text)",
+      margin: "0",
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
+    :host {
+      word-wrap: break-word;
+    }
+    sqm-text-span {
+      display: inline;
+    }
+  `;
+  return (index.h("span", { class: sheet.classes[type], part: "sqm-base" },
+    index.h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    children));
+}
+
+exports.TextSpanView = TextSpanView;

package/dist/cjs/sqm-text-span.cjs.entry.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
 require('./JSS-8503a151.js');
-const sqmTextSpanView = require('./sqm-text-span-view-56e48a78.js');
+const sqmTextSpanView = require('./sqm-text-span-view-ce4c0178.js');
 
-const Text = class {
+const TextSpan = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
@@ -16,8 +16,8 @@ const Text = class {
   disconnectedCallback() { }
   componentWillLoad() { }
   render() {
-    return index.h(sqmTextSpanView.TextSpanView, { type: this.type }, this.text);
+    return (index.h(sqmTextSpanView.TextSpanView, { type: this.type, fontSize: this.fontSize, textColor: this.textColor }, this.text));
   }
 };
 
-exports.sqm_text_span = Text;
+exports.sqm_text_span = TextSpan;

package/dist/collection/components/sqm-portal-change-password/sqm-portal-change-password.js

@@ -445,7 +445,7 @@ export class PortalChangePassword {
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalChangePasswordViewProps>",
-        "resolved": "{ states?: { open: boolean; error: string; loading: boolean; success: boolean; content: { modalChangePasswordHeader: string; cancelText: string; changePasswordButtonText: string; passwordFieldLabel: string; confirmPasswordFieldLabel: string; successMessage: string; portalChangePasswordHeader: string; portalChangePasswordButtonText: string; meetsRequirementsText?: string; doesNotMeetRequirementsText?: string; minErrorText?: string; uppercaseErrorText?: string; lowercaseErrorText?: string; hasErrorText?: string; }; }; }",
+        "resolved": "{ states?: { open: boolean; error: string; loading: boolean; success: boolean; content: { modalChangePasswordHeader: string; cancelText: string; changePasswordButtonText: string; passwordFieldLabel: string; confirmPasswordFieldLabel: string; successMessage: string; portalChangePasswordHeader: string; portalChangePasswordButtonText: string; meetsRequirementsText?: string; doesNotMeetRequirementsText?: string; minErrorText?: string; uppercaseErrorText?: string; lowercaseErrorText?: string; hasErrorText?: string; }; }; borderRadius?: string; buttonType?: \"primary\" | \"secondary\" | \"tertiary\"; background?: string; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-portal-forgot-password/sqm-portal-forgot-password-view.js

@@ -2,15 +2,7 @@ import { h } from "@stencil/core";
 import { AuthButtonsContainer, AuthColumn, AuthWrapper, } from "../../global/mixins";
 import { createStyleSheet } from "../../styling/JSS";
 import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
-const style = {
-  Wrapper: AuthWrapper,
-  Column: { ...AuthColumn },
-  ButtonsContainer: AuthButtonsContainer,
-  SecondaryButton: {
-    cursor: "pointer",
-    width: "25%",
-  },
-};
+import { navigation } from "@saasquatch/component-boilerplate";
 const vanillaStyle = `
 :host {
   display: block;
@@ -19,15 +11,30 @@ const vanillaStyle = `
   display: none;
 }
 `;
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
 export function PortalForgotPasswordView(props) {
-  const { states, callbacks, content } = props;
-  return (h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
+  const { states, callbacks, content, styles } = props;
+  const style = {
+    FormWrapper: {
+      ...AuthWrapper,
+      background: styles.backgroundColor,
+      borderRadius: styles.borderRadius,
+      border: styles.border,
+    },
+    Column: { ...AuthColumn },
+    ButtonsContainer: AuthButtonsContainer,
+    SecondaryButton: {
+      margin: "auto",
+      display: "block",
+      cursor: "pointer",
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", { class: sheet.classes.FormWrapper, part: "sqm-base" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    h(TextSpanView, { type: "h3" }, content.messageSlot),
+    h(TextSpanView, { textColor: styles.textColor, type: "h3" }, content.messageSlot),
     h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit },
       props.states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
         h("div", { part: "erroralert-text" }, props.states.error))),
@@ -36,5 +43,5 @@ export function PortalForgotPasswordView(props) {
       h("sl-input", { exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true }),
       h("div", { class: sheet.classes.ButtonsContainer },
         h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Reset Password"),
-        h("div", { class: sheet.classes.SecondaryButton }, content.secondaryButton)))));
+        h("sl-button", { type: "text", exportparts: "base: tertiarybutton-base", class: sheet.classes.SecondaryButton, disabled: states.loading, onClick: () => navigation.push(states.loginPath) }, content.loginText)))));
 }

package/dist/collection/components/sqm-portal-forgot-password/sqm-portal-forgot-password.js

@@ -48,6 +48,21 @@ export class PortalForgotPassword {
      * @uiName Email verification sent text
      */
     this.successAlertText = "If an account with that email exists, a password reset email will be sent.";
+    /**
+     * @uiName Background color
+     * @uiWidget color
+     */
+    this.backgroundColor = "var(--sqm-portal-background, #ffffff)";
+    /**
+     * @uiName Border radius
+     * @uiWidget number
+     */
+    this.borderRadius = "var(--sqm-border-radius-normal)";
+    /**
+     * @uiName Border style
+     * @uiWidget textArea
+     */
+    this.border = "1px solid var(--sqm-border-color, var(--sqm-text), #eaeaea)";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -62,8 +77,14 @@ export class PortalForgotPassword {
       emailLabel: this.emailLabel,
       submitLabel: this.submitLabel,
       successAlertText: this.successAlertText,
+      loginText: this.loginText,
     };
-    return (h(PortalForgotPasswordView, { states: states, callbacks: callbacks, content: content }));
+    const styles = {
+      backgroundColor: this.backgroundColor,
+      borderRadius: this.borderRadius,
+      border: this.border,
+    };
+    return (h(PortalForgotPasswordView, { states: states, callbacks: callbacks, content: content, styles: styles }));
   }
   static get is() { return "sqm-portal-forgot-password"; }
   static get encapsulation() { return "shadow"; }
@@ -245,12 +266,84 @@ export class PortalForgotPassword {
       "reflect": false,
       "defaultValue": "\"If an account with that email exists, a password reset email will be sent.\""
     },
+    "backgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Background color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "background-color",
+      "reflect": false,
+      "defaultValue": "\"var(--sqm-portal-background, #ffffff)\""
+    },
+    "borderRadius": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Border radius",
+            "name": "uiName"
+          }, {
+            "text": "number",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "border-radius",
+      "reflect": false,
+      "defaultValue": "\"var(--sqm-border-radius-normal)\""
+    },
+    "border": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Border style",
+            "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "border",
+      "reflect": false,
+      "defaultValue": "\"1px solid var(--sqm-border-color, var(--sqm-text), #eaeaea)\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalForgotPasswordViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; success: boolean; loginPath: string; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; successAlertText?: string; }; }",
+        "resolved": "{ states?: { error: string; loading: boolean; success: boolean; loginPath: string; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; successAlertText?: string; loginText?: string; }; styles?: { backgroundColor?: string; borderRadius?: string; border?: string; textColor?: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-text-span/sqm-text-span-view.js

@@ -1,46 +1,48 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
-const style = {
-  p: {
-    "font-size": "var(--sl-font-size-small)",
-    "font-weight": "400",
-    color: "var(--sq-text)",
-    margin: "0",
-  },
-  subtext: {
-    "font-size": "var(--sl-font-size-x-small)",
-    "font-weight": "400",
-    color: "var(--sqm-text-subdued)",
-    margin: "0",
-  },
-  h1: {
-    "font-size": "var(--sl-font-size-xx-large)",
-    "font-weight": "600",
-    color: "var(--sq-text)",
-    margin: "0",
-  },
-  h2: {
-    "font-size": "var(--sl-font-size-x-large)",
-    "font-weight": "600",
-    color: "var(--sq-text)",
-    margin: "0",
-  },
-  h3: {
-    "font-size": "var(--sl-font-size-large)",
-    "font-weight": "600",
-    color: "var(--sq-text)",
-    margin: "0",
-  },
-  h4: {
-    "font-size": "13px",
-    "font-weight": "600",
-    color: "var(--sq-text)",
-    margin: "0",
-  },
-};
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-const vanillaStyle = `
+export function TextSpanView(props, children) {
+  const { type, fontSize, textColor } = props;
+  const style = {
+    p: {
+      "font-size": fontSize ? `${fontSize}px` : "var(--sl-font-size-small)",
+      "font-weight": "400",
+      color: textColor || "var(--sqm-text)",
+      margin: "0",
+    },
+    subtext: {
+      "font-size": fontSize ? `${fontSize}px` : "var(--sl-font-size-x-small)",
+      "font-weight": "400",
+      color: textColor || "var(--sqm-text-subdued)",
+      margin: "0",
+    },
+    h1: {
+      "font-size": fontSize ? `${fontSize}px` : "var(--sl-font-size-xx-large)",
+      "font-weight": "600",
+      color: textColor || "var(--sqm-text)",
+      margin: "0",
+    },
+    h2: {
+      "font-size": fontSize ? `${fontSize}px` : "var(--sl-font-size-x-large)",
+      "font-weight": "600",
+      color: textColor || "var(--sqm-text)",
+      margin: "0",
+    },
+    h3: {
+      "font-size": fontSize ? `${fontSize}px` : "var(--sl-font-size-large)",
+      "font-weight": "600",
+      color: textColor || "var(--sqm-text)",
+      margin: "0",
+    },
+    h4: {
+      "font-size": fontSize ? `${fontSize}px` : "13px",
+      "font-weight": "600",
+      color: textColor || "var(--sqm-text)",
+      margin: "0",
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
     :host {
       word-wrap: break-word;
     }
@@ -48,8 +50,7 @@ const vanillaStyle = `
       display: inline;
     }
   `;
-export function TextSpanView(props, children) {
-  return (h("span", { class: sheet.classes[props.type], part: "sqm-base" },
+  return (h("span", { class: sheet.classes[type], part: "sqm-base" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

package/dist/collection/components/sqm-text-span/sqm-text-span.js

@@ -6,7 +6,7 @@ import { TextSpanView } from "./sqm-text-span-view";
  * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-big-stat","span","sqm-text-span","sqb-program-section","sqb-conditional-section"]
  * @canvasRenderer always-replace
  */
-export class Text {
+export class TextSpan {
   constructor() {
     this.ignored = true;
     withHooks(this);
@@ -14,7 +14,7 @@ export class Text {
   disconnectedCallback() { }
   componentWillLoad() { }
   render() {
-    return h(TextSpanView, { type: this.type }, this.text);
+    return (h(TextSpanView, { type: this.type, fontSize: this.fontSize, textColor: this.textColor }, this.text));
   }
   static get is() { return "sqm-text-span"; }
   static get properties() { return {
@@ -66,6 +66,55 @@ export class Text {
       },
       "attribute": "type",
       "reflect": false
+    },
+    "fontSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Font Size",
+            "name": "uiName"
+          }, {
+            "text": "number",
+            "name": "uiType"
+          }],
+        "text": "Font size in pixels"
+      },
+      "attribute": "font-size",
+      "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": "color",
+            "name": "format"
+          }],
+        "text": ""
+      },
+      "attribute": "text-color",
+      "reflect": false
     }
   }; }
   static get states() { return {

package/dist/collection/global/mixins.js

@@ -66,11 +66,11 @@ export const Wrapper = {
   width: "100%",
   "max-width": "var(--sqm-content-max-width)",
   height: "auto",
-  "background-color": "var(--sqm-content-background)",
   display: "flex",
   padding: "var(--sl-spacing-xxx-large)",
+  background: "var(--sqm-content-background)",
   border: "1px solid #eaeaea",
-  "border-radius": "8px",
+  borderRadius: "8px",
 };
 export const AuthWrapper = {
   margin: "auto",

package/dist/collection/global/styles.js

@@ -613,6 +613,7 @@ html {
   --sqm-secondary-button-radius: 30px;
   
   --sqm-border-radius-normal: 18px;
+  --sqm-border-color: white;
 
 
   --sqm-input-background: #121212;
@@ -815,6 +816,16 @@ sl-details::part(summary) {
   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;
 }
@@ -832,9 +843,10 @@ sl-details::part(summary) {
   border-width: var(--sqm-border-width, 1px);
 }
 
-*::part(input-label):focus,
-*::part(select-label):focus,
-*::part(textarea-label):focus {
+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, 1px solid var(--sl-input-border-color-focus));
 }
 

package/dist/collection/global/styles.ts

@@ -614,6 +614,7 @@ html {
   --sqm-secondary-button-radius: 30px;
   
   --sqm-border-radius-normal: 18px;
+  --sqm-border-color: white;
 
 
   --sqm-input-background: #121212;
@@ -816,6 +817,16 @@ sl-details::part(summary) {
   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;
 }
@@ -833,9 +844,10 @@ sl-details::part(summary) {
   border-width: var(--sqm-border-width, 1px);
 }
 
-*::part(input-label):focus,
-*::part(select-label):focus,
-*::part(textarea-label):focus {
+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, 1px solid var(--sl-input-border-color-focus));
 }
 

package/dist/esm/{GenericTableView-e7addb2b.js → GenericTableView-109ac7aa.js}

@@ -1,6 +1,6 @@
 import { h } from './index-91e7729f.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { g as gap } from './mixins-83f90fa1.js';
+import { g as gap } from './mixins-80aea3aa.js';
 
 function GenericTableView(props) {
   const { states, data, callbacks, elements } = props;

package/dist/esm/{ShadowViewAddon-74c0a5d5.js → ShadowViewAddon-05c5c503.js}

@@ -1,16 +1,16 @@
 import { h, c as Host, d as getAssetPath, g as getElement } from './index-91e7729f.js';
 import { k as useState, b as browser, u as useMemo } from './stencil-hooks.module-4bc38af4.js';
-import { i as intl } from './global-49d89f5f.js';
+import { i as intl } from './global-20b3681d.js';
 import { d as dist, H, J, F as Fn, w as wn, $ as $e, B, g as getEnvironmentSDK, L } from './index.module-89a79f66.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { l as luxonLocale } from './utils-334c1e34.js';
 import { c as createStyleSheet, j as jss, a as create } from './JSS-67b5cff8.js';
 import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED } from './useReferralCodes-8f75921a.js';
-import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-83f90fa1.js';
-import { C as CopyTextView } from './copy-text-view-0ac6e1d1.js';
+import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-80aea3aa.js';
+import { C as CopyTextView } from './copy-text-view-712b9f19.js';
 import { u as useChildElements } from './useChildElements-7945ae56.js';
 import { l as luxon } from './luxon-8d51c92b.js';
-import { T as TextSpanView } from './sqm-text-span-view-c577cc60.js';
+import { T as TextSpanView } from './sqm-text-span-view-cd3902e5.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
 import { a as isValidColor, b as isMobile } from './utilities-5b0ca040.js';
 import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-1683ae32.js';

package/dist/esm/{copy-text-view-0ac6e1d1.js → copy-text-view-712b9f19.js}

@@ -1,6 +1,6 @@
 import { h } from './index-91e7729f.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { H as HostBlock } from './mixins-83f90fa1.js';
+import { H as HostBlock } from './mixins-80aea3aa.js';
 
 const vanillaStyle = `
   :host{

package/dist/esm/{email-registration-view-a7818cf2.js → email-registration-view-f560023c.js}

@@ -1,6 +1,6 @@
 import { h } from './index-91e7729f.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { A as AuthWrapper, g as gap, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-83f90fa1.js';
+import { A as AuthWrapper, g as gap, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-80aea3aa.js';
 
 const style = {
   Wrapper: {

package/dist/esm/{global-49d89f5f.js → global-20b3681d.js}

@@ -26517,6 +26517,7 @@ html {
   --sqm-secondary-button-radius: 30px;
   
   --sqm-border-radius-normal: 18px;
+  --sqm-border-color: white;
 
 
   --sqm-input-background: #121212;
@@ -26719,6 +26720,16 @@ sl-details::part(summary) {
   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;
 }
@@ -26736,9 +26747,10 @@ sl-details::part(summary) {
   border-width: var(--sqm-border-width, 1px);
 }
 
-*::part(input-label):focus,
-*::part(select-label):focus,
-*::part(textarea-label):focus {
+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, 1px solid var(--sl-input-border-color-focus));
 }