@descope/web-components-ui 1.0.276 → 1.0.277

package/dist/umd/4447.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[4447],{4447:(r,e,t)=>{t.d(e,{Z:()=>s});const{host:o,label:p,placeholder:i,requiredIndicator:l,inputField:n,input:d,helperText:u,errorMessage:a}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},placeholder:{selector:"> input:placeholder-shown"},inputField:{selector:"::part(input-field)"},input:{selector:"input"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},s={fontSize:[{},o],fontFamily:[p,n,u,a],hostWidth:{...o,property:"width"},hostMinWidth:{...o,property:"min-width"},hostDirection:{...o,property:"direction"},inputBackgroundColor:{...n,property:"background-color"},labelTextColor:[{...p,property:"color"},{...l,property:"color"}],errorMessageTextColor:{...a,property:"color"},inputValueTextColor:{...n,property:"color"},inputCaretTextColor:{...d,property:"color"},labelRequiredIndicator:{...l,property:"content"},inputBorderColor:{...n,property:"border-color"},inputBorderWidth:{...n,property:"border-width"},inputBorderStyle:{...n,property:"border-style"},inputBorderRadius:{...n,property:"border-radius"},inputHeight:{...n,property:"height"},inputHorizontalPadding:[{...d,property:"padding-left"},{...d,property:"padding-right"}],inputOutlineColor:{...n,property:"outline-color"},inputOutlineStyle:{...n,property:"outline-style"},inputOutlineWidth:{...n,property:"outline-width"},inputOutlineOffset:{...n,property:"outline-offset"},inputTextAlign:{...d,property:"text-align"},inputPlaceholderColor:{...i,property:"color"}}}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[4447],{4447:(e,r,t)=>{t.d(r,{Z:()=>s});const{host:o,label:p,placeholder:l,requiredIndicator:i,inputField:n,input:d,helperText:u,errorMessage:a,disabledPlaceholder:c}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},placeholder:{selector:"> input:placeholder-shown"},disabledPlaceholder:{selector:"> input:disabled::placeholder"},inputField:{selector:"::part(input-field)"},input:{selector:"input"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},s={fontSize:[{},o],fontFamily:[p,n,u,a],hostWidth:{...o,property:"width"},hostMinWidth:{...o,property:"min-width"},hostDirection:{...o,property:"direction"},inputBackgroundColor:{...n,property:"background-color"},labelTextColor:[{...p,property:"color"},{...i,property:"color"},{...p,property:"-webkit-text-fill-color"},{...i,property:"-webkit-text-fill-color"}],errorMessageTextColor:{...a,property:"color"},inputValueTextColor:{...n,property:"color"},inputCaretTextColor:{...d,property:"color"},labelRequiredIndicator:{...i,property:"content"},inputBorderColor:{...n,property:"border-color"},inputBorderWidth:{...n,property:"border-width"},inputBorderStyle:{...n,property:"border-style"},inputBorderRadius:{...n,property:"border-radius"},inputHeight:{...n,property:"height"},inputHorizontalPadding:[{...d,property:"padding-left"},{...d,property:"padding-right"}],inputOutlineColor:{...n,property:"outline-color"},inputOutlineStyle:{...n,property:"outline-style"},inputOutlineWidth:{...n,property:"outline-width"},inputOutlineOffset:{...n,property:"outline-offset"},inputTextAlign:{...d,property:"text-align"},inputPlaceholderColor:[{...l,property:"color"},{...c,property:"-webkit-text-fill-color"}]}}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.276",
+  "version": "1.0.277",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/descope-text-field/textFieldMappings.js

@@ -1,14 +1,24 @@
-const { host, label, placeholder, requiredIndicator, inputField, input, helperText, errorMessage } =
-  {
-    host: { selector: () => ':host' },
-    label: { selector: '::part(label)' },
-    requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
-    placeholder: { selector: '> input:placeholder-shown' },
-    inputField: { selector: '::part(input-field)' },
-    input: { selector: 'input' },
-    helperText: { selector: '::part(helper-text)' },
-    errorMessage: { selector: '::part(error-message)' },
-  };
+const {
+  host,
+  label,
+  placeholder,
+  requiredIndicator,
+  inputField,
+  input,
+  helperText,
+  errorMessage,
+  disabledPlaceholder,
+} = {
+  host: { selector: () => ':host' },
+  label: { selector: '::part(label)' },
+  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+  placeholder: { selector: '> input:placeholder-shown' },
+  disabledPlaceholder: { selector: '> input:disabled::placeholder' },
+  inputField: { selector: '::part(input-field)' },
+  input: { selector: 'input' },
+  helperText: { selector: '::part(helper-text)' },
+  errorMessage: { selector: '::part(error-message)' },
+};
 
 export default {
   // we apply font-size also on the host so we can set its width with em
@@ -24,6 +34,8 @@ export default {
   labelTextColor: [
     { ...label, property: 'color' },
     { ...requiredIndicator, property: 'color' },
+    { ...label, property: '-webkit-text-fill-color' },
+    { ...requiredIndicator, property: '-webkit-text-fill-color' },
   ],
   errorMessageTextColor: { ...errorMessage, property: 'color' },
 
@@ -50,5 +62,8 @@ export default {
 
   inputTextAlign: { ...input, property: 'text-align' },
 
-  inputPlaceholderColor: { ...placeholder, property: 'color' },
+  inputPlaceholderColor: [
+    { ...placeholder, property: 'color' },
+    { ...disabledPlaceholder, property: '-webkit-text-fill-color' },
+  ],
 };