playbook_ui_docs 16.1.0.pre.alpha.PLAY2698timepickercleanup13920 → 16.1.0.pre.alpha.PLAY2717typeaheadinputdisplaynoneupdatelogic14074

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a13f98cd64f9eb9cf99992c41fa014c47e98140d8512f4bd571f0084b49cd37c
-  data.tar.gz: 017a19372a90f59e849659e9135d55cc38c0d89e32f5b13c2e5627451d5e7489
+  metadata.gz: 214b373dbd93392f4d191f672955ee38301e6bd298e41f74844083c2b26eb17f
+  data.tar.gz: c125579fa33410248243318de5fc34b739b53066906f5b60b4afb8ae6ef79d96
 SHA512:
-  metadata.gz: 64d1b96494bf24a1c352df452103f97dcee3168e1ad04b8c7c25b05ef8eb2b460fa0c73f3d2027549e06cca4efd2fc9a234b67b2afadd1e781dde65af8754e2e
-  data.tar.gz: b5a401599af51859a5b43d99a5b47ae79c76eb081f9e57c6e9d06c2c976efb745a3e0d9565451667f21aaf4448cd04d74fcca7bed59b8611c60d2bbf0043fe4d
+  metadata.gz: 73f1ea1bb8d07c42bbb05d06e696f093ffe9cbfc363cdff90b40d27ca34f7856611398578f7ea0c7746abdd658475bc06ec30b35f59eb99001ea6d770ffd7ff6
+  data.tar.gz: f53a20392a7d0e54d5bd7842df02cf0ad4a9f2fc07dcc71626deb17b4b8c4dc1aace41bcc3046ec702225e6ab54be7009b9cf90763b338151d584aa766a805a8

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("checkbox" , props: {
+  required_indicator: true,
+  text: "Checkbox Label",
+  value: "checkbox-value",
+  name: "checkbox-name"
+}) %>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import Checkbox from '../_checkbox'
+
+const CheckboxRequiredIndicator = () => {
+  return (
+    <div>
+      <Checkbox
+          name="checkbox-name"
+          requiredIndicator
+          text="Checkbox label"
+          value="check-box value"
+      />
+    </div>
+  )
+}
+
+export default CheckboxRequiredIndicator

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.md

@@ -0,0 +1,3 @@
+The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation. 
+
+You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop. 

data/app/pb_kits/playbook/pb_checkbox/docs/example.yml

@@ -8,6 +8,7 @@ examples:
     - checkbox_indeterminate: Indeterminate Checkbox
     - checkbox_disabled: Disabled Checkbox
     - checkbox_form: Form and Hidden Input
+    # - checkbox_required_indicator: Required Indicator
 
   react:
   - checkbox_default: Default
@@ -17,6 +18,7 @@ examples:
   - checkbox_error: Default w/ Error
   - checkbox_indeterminate: Indeterminate Checkbox
   - checkbox_disabled: Disabled Checkbox
+  # - checkbox_required_indicator: Required Indicator
 
   swift:
     - checkbox_default_swift: Default

data/app/pb_kits/playbook/pb_checkbox/docs/index.js

@@ -5,3 +5,4 @@ export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
 export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'
 export { default as CheckboxDisabled } from './_checkbox_disabled.jsx'
+export { default as CheckboxRequiredIndicator } from './_checkbox_required_indicator.jsx'

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.md

@@ -0,0 +1 @@
+`pickerId`/`picker_id` is a **required prop** to instantiate the Date Picker. The presence of `pickerId`/`picker_id` in your Date Picker also associates the label with the input, providing the ability to focus the Date Picker by clicking the label.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb

@@ -1,10 +1,13 @@
-<% 
+<%
   options = [
     { label: 'United States', value: 'unitedStates', id: 'us' },
     { label: 'Canada', value: 'canada', id: 'ca' },
     { label: 'Pakistan', value: 'pakistan', id: 'pk' },
   ]
-
 %>
 
-<%= pb_rails("dropdown", props: {options: options, label: "Select a Country"}) %>
+<%= pb_rails("dropdown", props: {
+  id: "select_a_country",
+  label: "Select a Country",
+  options: options
+}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx

@@ -25,6 +25,7 @@ const DropdownDefault = (props) => {
   return (
   <div>
     <Dropdown
+        id="select_a_country"
         label="Select a Country"
         options={options}
         {...props}

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md

@@ -1 +1,3 @@
-The top-level Dropdown component optionally accepts any string through a `label` prop to produce a label above your trigger element.
+The top-level Dropdown component optionally accepts any string through a `label` prop to produce a label above your trigger element. 
+
+Add an `id` to wire the label to the trigger so that clicking the label will move focus directly to the input, and open the drop-down.

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

@@ -1,14 +1,16 @@
 <%= pb_form_with(scope: :example, url: "", method: :get, validate: true) do |form| %>
+  <%= form.typeahead :example_typeahead_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.text_field :example_text_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label", required: true, required_indicator: true } %>
-  <%= form.text_area :example_text_area, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
+  <%= form.phone_number_field :example_phone_number_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.email_field :example_email_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.number_field :example_number_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.search_field :example_search_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.password_field :example_password_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.url_field :example_url_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_area :example_text_area, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
+  <%# <%= form.check_box :example_checkbox, props: { label: true, text: "Checkbox Label", required: true, required_indicator: true } %>
   <%= form.time_picker :example_time_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
 
   <%= form.actions do |action| %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb

@@ -65,7 +65,7 @@
 }] %>
 
 <%= pb_rails("multi_level_select", props: {
-    id: "multi-level-select-label-rails",
-    label: "Select a department",
-    tree_data: treeData
+  id: "select_a_department",
+  label: "Select a Department",
+  tree_data: treeData
 }) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx

@@ -73,14 +73,11 @@ const MultiLevelSelectDefault = (props) => {
   return (
     <div>
       <MultiLevelSelect
-          id='multiselect-label'
+          id="select_a_department"
           label="Select a Department"
           onSelect={(selectedNodes) =>
-          console.log(
-            "Selected Items",
-            selectedNodes
-          )
-        }
+            console.log("Selected Items", selectedNodes)
+          }
           treeData={treeData}
           {...props}
       />
@@ -88,4 +85,4 @@ const MultiLevelSelectDefault = (props) => {
   )
 };
 
-export default MultiLevelSelectDefault;
+export default MultiLevelSelectDefault;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.md

@@ -0,0 +1,3 @@
+The MultiLevelSelect component optionally accepts a `label` prop to produce a label above the input. 
+
+Add an `id` to wire the label to the input so that clicking the label will move focus directly to the input, and open the drop-down.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_label.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+
+
+const RichTextEditorAdvancedLabel = (props) => {
+
+    const editor = useEditor({
+      extensions: [StarterKit, Link],
+      content: "Add your text here. You can format your text, add links, quotes, and bullets.",
+    })
+
+    const editorNoLabel = useEditor({
+      extensions: [StarterKit, Link],
+      content: "Add your text here. You can format your text, add links, quotes, and bullets.",
+    })
+
+    if (!editor || !editorNoLabel) return null
+
+  return (
+    <div>
+      <RichTextEditor
+          advancedEditor={editor}
+          id={"advanced-example"}
+          label="Advanced Example Label"
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+      <br/>
+      <RichTextEditor
+          advancedEditor={editorNoLabel}
+          label="Advanced Example Label No ID"
+          {...props}
+      >
+        <EditorContent editor={editorNoLabel}/>
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorAdvancedLabel

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_label.md

@@ -0,0 +1 @@
+The optional `label` prop adds a visible label to the advanced editor. Passing in the `id` prop associates the `label` with the editor for accessibility, enabling screen reader support and label-based focus behavior.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.jsx

@@ -22,6 +22,7 @@ const RichTextEditorAdvancedRequiredIndicator = (props) => {
     <div>
       <RichTextEditor
           advancedEditor={editor}
+          id={"required-advanced"}
           label="Label"
           requiredIndicator
           {...props}

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.jsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+
+const RichTextEditorLabel = (props) => {
+  const [value, setValue] = useState(''),
+  handleOnChange = (html) => setValue(html)
+
+  return (
+    <div>
+      <RichTextEditor
+          id="example"
+          label="Example Label"
+          onChange={handleOnChange}
+          value={value}
+          {...props}
+      />
+      <br/>
+      <RichTextEditor
+          label="Example Label No ID"
+          onChange={handleOnChange}
+          value={value}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default RichTextEditorLabel

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.md

@@ -0,0 +1 @@
+The optional `label` prop adds a visible label to the editor. Passing in the `id` prop associates the `label` with the editor for accessibility, enabling screen reader support and label-based focus behavior.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx

@@ -8,6 +8,7 @@ const RichTextEditorRequiredIndicator = (props) => {
   return (
     <div>
       <RichTextEditor
+          inputOptions = {{ id: "required" }}
           label="Label"
           onChange={handleOnChange}
           requiredIndicator

data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml

@@ -32,6 +32,8 @@ examples:
   - rich_text_editor_advanced_inline: Advanced (Inline)
   - rich_text_editor_advanced_height: Advanced Height
   - rich_text_editor_advanced_min_height: Advanced Min Height
+  - rich_text_editor_label: Label
+  - rich_text_editor_advanced_label: Advanced (Label)
   - rich_text_editor_required_indicator: Required Indicator
   - rich_text_editor_advanced_required_indicator: Advanced Required Indicator
   - rich_text_editor_preview: Preview

data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js

@@ -21,3 +21,5 @@ export { default as RichTextEditorAdvancedHeight } from './_rich_text_editor_adv
 export { default as RichTextEditorAdvancedMinHeight } from './_rich_text_editor_advanced_min_height.jsx'
 export { default as RichTextEditorRequiredIndicator } from './_rich_text_editor_required_indicator.jsx'
 export { default as RichTextEditorAdvancedRequiredIndicator } from './_rich_text_editor_advanced_required_indicator.jsx'
+export { default as RichTextEditorLabel } from './_rich_text_editor_label.jsx'
+export { default as RichTextEditorAdvancedLabel } from './_rich_text_editor_advanced_label.jsx'

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb

@@ -1,9 +1,9 @@
-<%= pb_rails("textarea", props: { label: "Label", rows: 4}) %>
+<%= pb_rails("textarea", props: { label: "Label", rows: 4, id: "default-example-1" }) %>
 
 <br/>
 
-<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text" }) %>
+<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text", id: "default-example-2" }) %>
 
 <br/>
 
-<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text" }) %>
+<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text", id: "default-example-3" }) %>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx

@@ -13,6 +13,7 @@ const TextareaDefault = (props) => {
           label="Label"
           rows={4}
           {...props}
+          id="default-example-1"
       />
 
       <br />
@@ -21,6 +22,7 @@ const TextareaDefault = (props) => {
           label="Label"
           placeholder="Placeholder text"
           {...props}
+          id="default-example-2"
       />
 
       <br />
@@ -32,6 +34,7 @@ const TextareaDefault = (props) => {
           placeholder="Placeholder text"
           value={value}
           {...props}
+          id="default-example-3"
       />
 
     </div>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md

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

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.html.erb

@@ -0,0 +1,16 @@
+<% 
+  options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-required-indicator",
+    is_multi: false,
+    label: "Colors",
+    options: options,
+    required_indicator: true,
+}) %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.jsx

@@ -0,0 +1,23 @@
+import React from "react"
+import Typeahead from "../../pb_typeahead/_typeahead"
+
+const options = [
+  {label: "Orange", value: "#FFA500"},
+  {label: "Red", value: "#FF0000"},
+  {label: "Green", value: "#00FF00"},
+  {label: "Blue", value: "#0000FF"},
+]
+
+const TypeaheadRequiredIndicator = (props) => {
+  return (
+    <Typeahead
+        id="typeahead_required_indicator"
+        label="Colors"
+        options={options}
+        requiredIndicator
+        {...props}
+    />
+  )
+}
+
+export default TypeaheadRequiredIndicator

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.md

@@ -0,0 +1,3 @@
+The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation. 
+
+You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop.

data/app/pb_kits/playbook/pb_typeahead/docs/example.yml

@@ -19,6 +19,7 @@ examples:
     - typeahead_dynamic_options_pure_rails: Dynamic Options (Pure Rails)
     - typeahead_disabled: Disabled
     - typeahead_preserve_input: Preserve Search Input
+    - typeahead_required_indicator: Required Indicator
 
   react:
     - typeahead_default: Default
@@ -42,3 +43,4 @@ examples:
     - typeahead_truncated_text: Truncated Text
     - typeahead_disabled: Disabled
     - typeahead_preserve_input: Preserve Search Input
+    - typeahead_required_indicator: Required Indicator

data/app/pb_kits/playbook/pb_typeahead/docs/index.js

@@ -1,21 +1,22 @@
-export { default as TypeaheadDefault } from './_typeahead_default.jsx'
-export { default as TypeaheadWithHighlight } from './_typeahead_with_highlight.jsx'
-export { default as TypeaheadWithPills } from './_typeahead_with_pills.jsx'
-export { default as TypeaheadWithPillsAsync } from './_typeahead_with_pills_async.jsx'
-export { default as TypeaheadWithPillsAsyncUsers } from './_typeahead_with_pills_async_users.jsx'
-export { default as TypeaheadWithPillsAsyncCustomOptions } from './_typeahead_with_pills_async_custom_options.jsx'
-export { default as TypeaheadInline } from './_typeahead_inline.jsx'
-export { default as TypeaheadMultiKit } from './_typeahead_multi_kit.jsx'
-export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'
-export { default as TypeaheadAsyncCreateable } from './_typeahead_async_createable.jsx'
-export { default as TypeaheadErrorState } from './_typeahead_error_state.jsx'
-export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_list.jsx'
-export { default as TypeaheadMarginBottom } from './_typeahead_margin_bottom.jsx'
-export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'
-export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.jsx'
-export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
-export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'
-export { default as TypeaheadPreserveInput } from './_typeahead_preserve_input.jsx'
-export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'
-export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'
-export { default as TypeaheadInputDisplay } from './_typeahead_input_display.jsx'
+export {default as TypeaheadDefault} from "./_typeahead_default.jsx"
+export {default as TypeaheadWithHighlight} from "./_typeahead_with_highlight.jsx"
+export {default as TypeaheadWithPills} from "./_typeahead_with_pills.jsx"
+export {default as TypeaheadWithPillsAsync} from "./_typeahead_with_pills_async.jsx"
+export {default as TypeaheadWithPillsAsyncUsers} from "./_typeahead_with_pills_async_users.jsx"
+export {default as TypeaheadWithPillsAsyncCustomOptions} from "./_typeahead_with_pills_async_custom_options.jsx"
+export {default as TypeaheadInline} from "./_typeahead_inline.jsx"
+export {default as TypeaheadMultiKit} from "./_typeahead_multi_kit.jsx"
+export {default as TypeaheadCreateable} from "./_typeahead_createable.jsx"
+export {default as TypeaheadAsyncCreateable} from "./_typeahead_async_createable.jsx"
+export {default as TypeaheadErrorState} from "./_typeahead_error_state.jsx"
+export {default as TypeaheadCustomMenuList} from "./_typeahead_custom_menu_list.jsx"
+export {default as TypeaheadMarginBottom} from "./_typeahead_margin_bottom.jsx"
+export {default as TypeaheadWithPillsColor} from "./_typeahead_with_pills_color.jsx"
+export {default as TypeaheadTruncatedText} from "./_typeahead_truncated_text.jsx"
+export {default as TypeaheadReactHook} from "./_typeahead_react_hook.jsx"
+export {default as TypeaheadDisabled} from "./_typeahead_disabled.jsx"
+export {default as TypeaheadPreserveInput} from "./_typeahead_preserve_input.jsx"
+export {default as TypeaheadDefaultValue} from "./_typeahead_default_value.jsx"
+export {default as TypeaheadCustomOptions} from "./_typeahead_custom_options.jsx"
+export {default as TypeaheadInputDisplay} from "./_typeahead_input_display.jsx"
+export {default as TypeaheadRequiredIndicator} from "./_typeahead_required_indicator.jsx"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.1.0.pre.alpha.PLAY2698timepickercleanup13920
+  version: 16.1.0.pre.alpha.PLAY2717typeaheadinputdisplaynoneupdatelogic14074
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-01-28 00:00:00.000000000 Z
+date: 2026-02-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -419,6 +419,9 @@ files:
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_props_swift.md
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md
+- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.html.erb
+- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.jsx
+- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.md
 - app/pb_kits/playbook/pb_checkbox/docs/_description.md
 - app/pb_kits/playbook/pb_checkbox/docs/example.yml
 - app/pb_kits/playbook/pb_checkbox/docs/index.js
@@ -576,6 +579,7 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_anti_patterns.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md
@@ -1428,6 +1432,7 @@ files:
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb
@@ -1929,6 +1934,8 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_height.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.md
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_label.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_label.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx
@@ -1947,6 +1954,8 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb
@@ -2343,6 +2352,7 @@ files:
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_custom.jsx
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx
+- app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_default_swift.md
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.html.erb
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.jsx
@@ -2609,6 +2619,9 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_react.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.html.erb
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.jsx
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.md