playbook_ui 15.2.0.pre.rc.0 → 15.2.0.pre.rc.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 13bfcc5673dfc00619bf8b3fb557c22f4c4609140237fc800757ed584a710a56
-  data.tar.gz: dc055c2848c96f663adddd3e1a3452e63431cf8d26505ca57d17886bcebf2a86
+  metadata.gz: a2242bca91bdb8f1f2a355e2ad50f8f036980b6576243293c31a017ecfeb7fac
+  data.tar.gz: 22b06e68fbc840b549751cd72e6738cc7da7d15b0cab64e1fc47df77064375a4
 SHA512:
-  metadata.gz: b51dd269610cb015f62bbdf1199adece46fa8591f488efe8edd2e6b18fdee4b4ac7b3653f136a435ef89d9f848fde895e9d3fb6ac2f3fc5d99ee5d04ceffaccf
-  data.tar.gz: 5d53c3805872480202c03694deea22babe4395cf31b946f26c1ef30c4737b682fa8c9ecae15282caee6c95b7f4ba4c33afaa6b91039290e9188465811233867e
+  metadata.gz: bd36ae9541db3a90dfda476bd8397d0cb951afddb1399d0aa3c9a27593624bad47816b1c16628d8c377d435151c342b8a53caa9b92c36bf8e6bcf91fde2330c7
+  data.tar.gz: e807e6cebfa03f4d217315bde5ed604c5cc696987b05fcd4e98bb5a15336cfe3ddf0334b1914b68156bb77e2c20e259e2c1ac2dcdc5a46dce52bfccd84fa6a0d

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -146,8 +146,6 @@ export function useTableState({
 
   // Pagination configuration
   const paginationInitializer = useMemo(() => {
-    if (!pagination) return {};
-
     return {
       getPaginationRowModel: getPaginationRowModel(),
       paginateExpandedRows: false,

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -19,6 +19,10 @@
     @import "./sass_partials/calendar_input_icon";
   }
 
+  label {
+    display: block !important;
+  }
+
   &:focus,
   :focus-within {
     div.cal_icon_wrapper,

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.html.erb

@@ -3,12 +3,12 @@
 <%= pb_rails("button", props: { text: "Delete Status", data: {"open-dialog": "dialog-stacked-delete"}, margin_right: "md" }) %>
 
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-stacked-default", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-stacked-default",
     status: "default",
-    size: "sm", 
-    title: "Are you sure?", 
-    text: "Text explaining why there is an alert", 
+    size: "sm",
+    title: "Are you sure?",
+    text: "Text explaining why there is an alert",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
@@ -18,12 +18,12 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-stacked-caution", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-stacked-caution",
     status: "caution",
-    size: "sm", 
-    title: "Are you sure?", 
-    text: "This is the action you will be taking", 
+    size: "sm",
+    title: "Are you sure?",
+    text: "This is the action you will be taking",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
@@ -33,16 +33,16 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-stacked-delete", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-stacked-delete",
     status: "delete",
-    size: "sm", 
-    title: "Delete", 
-    text: "You are about to delete ...", 
+    size: "sm",
+    title: "Delete",
+    text: "You are about to delete ...",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
-            <%= pb_rails("button", props: { text: "Yes, Action", full_width: true }) %>
+            <%= pb_rails("button", props: { text: "Yes, Action", variant: "danger", full_width: true }) %>
             <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", full_width: true, margin_top: "sm", data: {"close-dialog": "dialog-stacked-delete" } }) %>
         <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx

@@ -51,7 +51,7 @@ const DialogStackedAlert = () => {
   return (
     <div>
     <Flex
-        rowGap="xs" 
+        rowGap="xs"
         wrap
     >
       <Button
@@ -93,6 +93,7 @@ const DialogStackedAlert = () => {
           <Button
               fullWidth
               onClick={dialog.toggle}
+              variant= {dialog.status == "delete" ? "danger" : "primary"}
           >
             {dialog.buttonOneText}
           </Button>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.html.erb

@@ -8,12 +8,12 @@
 <%= pb_rails("button", props: { text: "Success Status", data: {"open-dialog": "dialog-status-success"}, margin_right: "md" }) %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-default", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-default",
     status: "default",
-    size: "status_size", 
-    title: "Are you sure?", 
-    text: "Text explaining why there is an alert", 
+    size: "status_size",
+    title: "Are you sure?",
+    text: "Text explaining why there is an alert",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -23,12 +23,12 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-info", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-info",
     status: "info",
-    size: "status_size", 
-    title: "Information", 
-    text: "Text explaining why there is an alert", 
+    size: "status_size",
+    title: "Information",
+    text: "Text explaining why there is an alert",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -37,12 +37,12 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-caution", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-caution",
     status: "caution",
-    size: "status_size", 
-    title: "Are you Sure?", 
-    text: "This is the action you will be taking", 
+    size: "status_size",
+    title: "Are you Sure?",
+    text: "This is the action you will be taking",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -52,27 +52,27 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-delete", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-delete",
     status: "delete",
-    size: "status_size", 
-    title: "Delete", 
-    text: "You are about to delete ...", 
+    size: "status_size",
+    title: "Delete",
+    text: "You are about to delete ...",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
-            <%= pb_rails("button", props: { text: "Yes, Delete" }) %>
+            <%= pb_rails("button", props: { text: "Yes, Delete", variant: "danger" }) %>
             <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", data: {"close-dialog": "dialog-status-delete" } }) %>
         <% end %>
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-error", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-error",
     status: "error",
-    size: "status_size", 
-    title: "Error Message", 
-    text: "Text explaining the error", 
+    size: "status_size",
+    title: "Error Message",
+    text: "Text explaining the error",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -81,12 +81,12 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-success", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-success",
     status: "success",
-    size: "status_size", 
-    title: "Success!", 
-    text: "Text explaining what is successful", 
+    size: "status_size",
+    title: "Success!",
+    text: "Text explaining what is successful",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx

@@ -83,8 +83,8 @@ const DialogStatus = () => {
 
   return (
     <div>
-      <Flex 
-          rowGap="xs" 
+      <Flex
+          rowGap="xs"
           wrap
       >
         <Button
@@ -117,7 +117,7 @@ const DialogStatus = () => {
         >
           {"Success Status"}
         </Button>
-        <Button 
+        <Button
             marginRight="md"
             onClick={toggleErrorAlert}
         >
@@ -152,6 +152,7 @@ const DialogStatus = () => {
                   <Button
                       onClick={dialog.toggle}
                       paddingRight="xl"
+                      variant={dialog.status == "delete" ? "danger" : "primary"}
                   >
                   {dialog.buttonOneText}
                   </Button>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -21,6 +21,15 @@
   ]
 %>
 
+<%
+  example_typeahead_options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
+
 <% treeData = [{
     label: "Power Home Remodeling",
     value: "Power Home Remodeling",
@@ -89,6 +98,8 @@
 
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
+  <%= form.typeahead :example_typeahead_validation_react, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead (React Rendered)", placeholder: "Search for a user", required: true, validation: { message: "Please select a color." } } %>
+  <%= form.typeahead :example_typeahead_validation_react_2, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead 2 (React Rendered)", placeholder: "Search for a user", required: true } %>
   <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
   <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
   <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Icon from '../pb_icon/_icon'
 
@@ -26,7 +26,7 @@ type IconCircleProps = {
     | "orange"
     | "green"
     | "lighter",
-}
+} & GlobalProps
 
 const IconCircle = (props: IconCircleProps) => {
   const {

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.scss

@@ -3,51 +3,45 @@
 @import "../tokens/spacing";
 @import "../pb_icon_circle/icon_circle";
 
-[class^=pb_icon_stat_value_kit]{
+.pb_icon_stat_value_kit_horizontal,
+.pb_icon_stat_value_kit_vertical
+ {
   display: flex;
   align-items: baseline;
 
-  &[class*=_vertical]  {
+  &.pb_icon_stat_value_kit_vertical {
     flex-direction: column;
 
-    &[class*=_center]  {
+    &.text_align_center {
       align-items: center;
 
-      [class^=pb_title],
-      [class^=pb_body],
-      [class^=pb_caption] {
+      .pb_title_kit,
+      .pb_body_kit,
+      .pb_caption_kit_md {
         text-align: center;
       }
     }
 
-    &[class*=_right]  {
+    &.text_align_right {
       align-items: flex-end;
 
-      [class^=pb_title],
-      [class^=pb_body],
-      [class^=pb_caption] {
+      .pb_title_kit,
+      .pb_body_kit,
+      .pb_caption_kit_md {
         text-align: right;
       }
     }
-
-    [class^=pb_icon_circle] {
-      margin-bottom: $space-xs;
-    }
   }
 
-  &[class*=_horizontal]  {
+  &.pb_icon_stat_value_kit_horizontal {
     align-items: center;
 
-    &[class*=_center]  {
+    &.text_align_center {
       justify-content: center;
     }
 
-    &[class*=_right]  {
+    &.text_align_right {
       justify-content: flex-end;
     }
-
-    [class^=pb_icon_circle] {
-      margin-right: $space-sm;
-    }
   }
 }

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -33,8 +33,7 @@ type IconStatValueProps = {
     | "yellow"
     | "orange"
     | "green"
-    | "lighter",
-}
+} & GlobalProps
 
 const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
   const {
@@ -50,13 +49,13 @@ const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
     text = '',
     unit = '',
     value = 0,
-    variant = 'lighter',
+    variant = 'default',
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
-    buildCss('pb_icon_stat_value_kit', orientation, size, variant), globalProps(props),
+    buildCss('pb_icon_stat_value_kit', orientation), globalProps(props),
     className
   )
   const titleSize = function(size: "sm" | "md" | "lg") {
@@ -101,6 +100,8 @@ const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
       <IconCircle
           dark={dark}
           icon={icon}
+          marginBottom={orientation == 'vertical' ? 'xs' : undefined}
+          marginRight={orientation == 'horizontal' ? 'sm' : undefined}
           size={size}
           variant={variant}
       />

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb

@@ -3,6 +3,8 @@
     <%= pb_rails("icon_circle", props: {
         dark: object.dark,
         icon: object.icon,
+        margin_right: object.icon_margin_right,
+        margin_bottom: object.icon_margin_bottom,
         size: object.size,
         variant: object.variant }) %>
 

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb

@@ -9,8 +9,8 @@ module Playbook
                   values: %w[sm md lg],
                   default: "sm"
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[default royal blue purple teal red yellow green orange lighter],
-                     default: "lighter"
+                     values: %w[default royal blue purple teal red yellow green orange],
+                     default: "default"
 
       prop :orientation, type: Playbook::Props::Enum,
                          values: %w[vertical horizontal],
@@ -25,7 +25,7 @@ module Playbook
       prop :value
 
       def classname
-        generate_classname("pb_icon_stat_value_kit", orientation, size, variant)
+        generate_classname("pb_icon_stat_value_kit", orientation)
       end
 
       def value_string
@@ -41,6 +41,14 @@ module Playbook
           3
         end
       end
+
+      def icon_margin_right
+        orientation === "horizontal" && "sm"
+      end
+
+      def icon_margin_bottom
+        orientation === "vertical" && "xs"
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js

@@ -18,7 +18,7 @@ describe("IconStatValue Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("pb_icon_stat_value_kit_horizontal_sm_lighter")
+        expect(kit).toHaveClass("pb_icon_stat_value_kit_horizontal")
     })
 
     test("renders icon", () => {
@@ -99,9 +99,10 @@ describe("IconStatValue Kit", () => {
                     value={64.18}
           />
             )
-    
+            const size = sizeProp === "sm" ? "3" : sizeProp === "md" ? "2" : "1"
             const kit = screen.getByTestId(testId)
-            expect(kit).toHaveClass(`pb_icon_stat_value_kit_horizontal_${sizeProp}_lighter`)
+            const title = kit.querySelector(".pb_title_kit")
+            expect(title).toHaveClass(`pb_title_${size}`)
 
             cleanup()
         })
@@ -115,8 +116,7 @@ describe("IconStatValue Kit", () => {
         "teal",
         "red",
         "yellow",
-        "green",
-        "lighter"].forEach(
+        "green"].forEach(
             (colorProp) => {
             render(
                 <IconStatValue
@@ -128,9 +128,10 @@ describe("IconStatValue Kit", () => {
                     variant={colorProp}
           />
             )
-    
+
             const kit = screen.getByTestId(testId)
-            expect(kit).toHaveClass(`pb_icon_stat_value_kit_horizontal_sm_${colorProp}`)
+            const iconCircle = kit.querySelector(`.pb_icon_circle_kit_size_sm_${colorProp}`)
+            expect(iconCircle).toBeInTheDocument()
 
             cleanup()
         }) 
@@ -149,7 +150,7 @@ describe("IconStatValue Kit", () => {
             )
     
             const kit = screen.getByTestId(testId)
-            expect(kit).toHaveClass("pb_icon_stat_value_kit_vertical_sm_lighter")
+            expect(kit).toHaveClass("pb_icon_stat_value_kit_vertical")
     })
 
 })

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -140,10 +140,14 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     formattedValue = value
   }
 
+  const errorId = error ? `${id}-error` : undefined
+
   const textInput = (
     childInput ? React.cloneElement(children, { className: "text_input" }) :
     (<input
         {...domSafeProps(props)}
+        aria-describedby={errorId}
+        aria-invalid={!!error}
         autoComplete={typeof autoComplete === "string" ? autoComplete : ( autoComplete ? undefined : "off" )}
         className="text_input"
         disabled={disabled}
@@ -202,16 +206,20 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         {...htmlProps}
         className={css}
     >
-      {label &&
-        <Caption
-            className="pb_text_input_kit_label"
-            text={label}
-        />
-      }
+      {label && (
+        <label htmlFor={id}>
+          <Caption className="pb_text_input_kit_label" 
+              text={label} 
+          />
+        </label>
+      )}
       <div className={`${addOnCss} text_input_wrapper`}>
         {render}
 
         {error && <Body
+            aria={{ atomic: "true", live: "polite" }}
+            htmlOptions={{ role: "alert" }}
+            id={errorId}
             status="negative"
             text={error}
             variant={null}

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb

@@ -9,23 +9,27 @@
 
 <%= pb_rails("text_input", props: {
   label: "Last Name",
-  placeholder: "Enter last name"
+  placeholder: "Enter last name",
+  id: "last-name"
 }) %>
 
 <%= pb_rails("text_input", props: {
     label: "Phone Number",
     type: "phone",
-    placeholder: "Enter phone number"
+    placeholder: "Enter phone number",
+    id: "phone"
 }) %>
 
 <%= pb_rails("text_input", props: {
     label: "Email Address",
     type: "email",
-    placeholder: "Enter email address"
+    placeholder: "Enter email address",
+    id: "email"
 }) %>
 
 <%= pb_rails("text_input", props: {
     label: "Zip Code",
     type: "number",
-    placeholder: "Enter zip code"
+    placeholder: "Enter zip code",
+    id: "zip"
 }) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx

@@ -38,6 +38,7 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
+          id="last-name"
           label="Last Name"
           name="lastName"
           onChange={handleOnChangeFormField}
@@ -46,6 +47,7 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
+          id="phone"
           label="Phone Number"
           name="phone"
           onChange={handleOnChangeFormField}
@@ -55,6 +57,7 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
+          id="email"
           label="Email Address"
           name="email"
           onChange={handleOnChangeFormField}
@@ -64,6 +67,7 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
+          id="zip"
           label="Zip Code"
           name="zip"
           onChange={handleOnChangeFormField}
@@ -84,6 +88,7 @@ const TextInputDefault = (props) => {
       <br />
 
       <TextInput
+          id="first-name"
           label="First Name"
           onChange={handleOnChangeFirstName}
           placeholder="Enter first name"

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.md

@@ -0,0 +1 @@
+Add an `id` to your Text Input so that clicking the label will move focus directly to the input.

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb

@@ -1,6 +1,8 @@
 <%= pb_content_tag(:div, id: nil ) do  %>
   <% if object.label.present? %>
+  <label for="<%= object.input_options[:id] || object.id %>" >
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
+  </label>
   <% end %>
   <%= content_tag(:div, class: "#{add_on_class} text_input_wrapper") do %>
     <% if content.present? %>
@@ -15,7 +17,7 @@
     <% else %>
       <%= input_tag %>
     <% end %>
-    <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) if object.error %>
+    <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error, id: object.error_id, aria: { atomic: "true", live: "polite" }, html_options: { role: "alert" }}) if object.error %>
   <% end %>
 <% end %>
 

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -64,10 +64,16 @@ module Playbook
         "#{object.id}-sanitized" if id.present?
       end
 
+      def error_id
+        "#{id}-error" if error.present?
+      end
+
     private
 
       def all_input_options
         {
+          'aria-describedby': error.present? ? error_id : nil,
+          'aria-invalid': error.present?,
           autocomplete: autocomplete == true ? nil : (autocomplete.presence || "off"),
           class: "text_input #{input_options.dig(:classname) || ''}",
           data: validation_data,