@companycam/slab-web 1.30.1 → 1.30.2

package/index.js

@@ -1335,6 +1335,13 @@ See https://s-c.sh/2BAXzed for more info.`),window[Gs]+=1);const Y0=G.span`
   border-width: var(--cc_size_border_width_s);
   border-style: solid;
   border-color: ${e=>e.$status==="error"?"var(--cc_color_utility_destroy)":"var(--cc_color_border_input_inactive)"};
+  ${e=>{if(!e.$status)return me`
+      @supports selector(:user-invalid) {
+        &:has(input:user-invalid) {
+          border-color: var(--cc_color_utility_destroy);
+        }
+      }
+    `}}
   display: flex;
   align-items: center;
   min-width: 1px;
@@ -1365,7 +1372,7 @@ See https://s-c.sh/2BAXzed for more info.`),window[Gs]+=1);const Y0=G.span`
   line-height: 1;
 `,Ah=G.span`
   flex-shrink: 0;
-`,kR=({type:e})=>{switch(e){case"email":return"email-outline";case"tel":return"phone-outline";case"search":return"magnify";case"url":return"web";default:return null}},Sm=w.forwardRef(({label:e,onChange:n,contentBefore:t,contentAfter:r,hideLabel:i=!1,inputSize:o="medium",name:a,testId:c,type:u="text",value:f,...p},g)=>{const{status:y="normal",className:_,disabled:b=!1,style:x,message:E,...T}=p,z=kR({type:u}),L=t||z,B=()=>L?P.jsx(Ah,{children:t||P.jsx(SR,{className:`mdi mdi-${z}`,$inputSize:o})}):null;return P.jsxs(ri,{inputId:p.id,message:E,className:_,status:y,style:x,children:[P.jsx(bR,{htmlFor:p.id,$hideLabel:i,children:P.jsx(xo,{children:e})}),P.jsxs(xR,{$disabled:p.disabled||!1,$status:y,$type:u,$message:E,children:[B(),P.jsx(wR,{ref:g,disabled:b,"aria-describedby":E?`${p.id}-message`:"","aria-invalid":y==="error",onChange:n,name:a||p.id,$inputSize:o,"data-testid":c,type:u,value:f,...T}),r?P.jsx(Ah,{children:r}):null]})]})}),CR=G(Pl)`
+`,kR=({type:e})=>{switch(e){case"email":return"email-outline";case"tel":return"phone-outline";case"search":return"magnify";case"url":return"web";default:return null}},Sm=w.forwardRef(({label:e,onChange:n,contentBefore:t,contentAfter:r,hideLabel:i=!1,inputSize:o="medium",name:a,testId:c,type:u="text",value:f,...p},g)=>{const{status:y,className:_,disabled:b=!1,style:x,message:E,...T}=p,z=kR({type:u}),L=t||z,B=()=>L?P.jsx(Ah,{children:t||P.jsx(SR,{className:`mdi mdi-${z}`,$inputSize:o})}):null;return P.jsxs(ri,{inputId:p.id,message:E,className:_,status:y,style:x,children:[P.jsx(bR,{htmlFor:p.id,$hideLabel:i,children:P.jsx(xo,{children:e})}),P.jsxs(xR,{$disabled:p.disabled||!1,$status:y,$type:u,$message:E,children:[B(),P.jsx(wR,{ref:g,disabled:b,"aria-describedby":E?`${p.id}-message`:"","aria-invalid":y==="error"?!0:void 0,onChange:n,name:a||p.id,$inputSize:o,"data-testid":c,type:u,value:f,...T}),r?P.jsx(Ah,{children:r}):null]})]})}),CR=G(Pl)`
   margin-inline-end: var(--cc_size_spacing_s);
 `,ER=w.forwardRef((e,n)=>{const[t,r]=w.useState(),i=()=>{r(o=>!o)};return P.jsx(Sm,{ref:n,type:t?"text":"password",contentAfter:P.jsx(CR,{onClick:i,design:"minimal",size:"small",iconName:t?"eye-outline":"eye-off-outline",accessibilityLabel:t?"Hide Password":"Show Password",disabled:e.disabled}),...e})}),Ea=G.span`
   box-sizing: border-box;

package/index.mjs

@@ -13614,6 +13614,16 @@ const RN = Gt(
   border-width: var(--cc_size_border_width_s);
   border-style: solid;
   border-color: ${(e) => e.$status === "error" ? "var(--cc_color_utility_destroy)" : "var(--cc_color_border_input_inactive)"};
+  ${(e) => {
+  if (!e.$status)
+    return me`
+      @supports selector(:user-invalid) {
+        &:has(input:user-invalid) {
+          border-color: var(--cc_color_utility_destroy);
+        }
+      }
+    `;
+}}
   display: flex;
   align-items: center;
   min-width: 1px;
@@ -13672,7 +13682,7 @@ const RN = Gt(
     ...p
   }, g) => {
     const {
-      status: y = "normal",
+      status: y,
       className: _,
       disabled: b = !1,
       style: w,
@@ -13704,7 +13714,7 @@ const RN = Gt(
                     ref: g,
                     disabled: b,
                     "aria-describedby": C ? `${p.id}-message` : "",
-                    "aria-invalid": y === "error",
+                    "aria-invalid": y === "error" ? !0 : void 0,
                     onChange: n,
                     name: a || p.id,
                     $inputSize: o,

package/lib/InputText/InputText.d.ts

@@ -15,7 +15,7 @@ export type InputTextProps = HTMLInputProps & UseMessageProps & {
 /**
  * - InputText supports both controlled and uncontrolled patterns:
  *   - **Controlled**: Provide `value` and `onChange` props. Use for inputs with complex interactions or when you need to programmatically control the value.
- *   - **Uncontrolled**: Provide `defaultValue` prop and access the value via a ref. Use for simple forms or when integrating with form libraries like react-hook-form.
+ *   - **Uncontrolled**: Optionally provide `defaultValue` prop and access the value via a ref or FormData. Used for simple forms or when integrating with form libraries like react-hook-form.
  * - Use title case for the required `label` (e.g., "Project Name", not "Project name").
  * - InputText can render a `type="password"` input. However, if you need a password input with a show/hide button, use [InputPassword](/docs/inputpassword--docs).
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@companycam/slab-web",
-  "version": "1.30.1",
+  "version": "1.30.2",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {