playbook_ui_docs 16.2.0.pre.rc.3 → 16.2.0.pre.rc.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9dde0c9d8000a12320a71a4ede80351eb2e8944ffdea10935df0aebbfa463023
-  data.tar.gz: a3f02b553ae7c6ffa01801fb6a075a937cbfeb460fcec27317a72783cbdda154
+  metadata.gz: 9251664f32e520ae3af4b072c0d4c51503ca830acd28c78355e1ee291e971787
+  data.tar.gz: b1bb7cb13f32ac73e4a37a9e23b7a6b43ea356327e7d4f614ce0a07c1f08fd62
 SHA512:
-  metadata.gz: 35cac0e8c6ffe71a664f739f7073f9c8303d1c53bc6e0b50671ea1e0e7860ec9efc8431176b0110956c4482b045dde99366a287bcc6b57d8537fce6905fd2c48
-  data.tar.gz: efabd0e21b7e5626943ea739f535867ce238bfccf8e43e32e67108422eea8f6127dae32674f8f8e468055ac53b40c13861b4ba0978cfbcb86e804ae4a90bfaf8
+  metadata.gz: 76c9aa18c0ea49a74c3ac746b697d7adaa3d79b966552660e2b3f58c53d58637fd6dc0025fcfa0e2e1d9d3f837fbbd17730ddac8fe169c1772b738e08f361122
+  data.tar.gz: e6d5b77a7fe5a0ad4ded0fe7ce118915f757cdbd6c8865a5f222280c12568b9374cb82403caf1349a82fb62b8bf811df33bb55f02f535aa3c7fff24fde61f30b

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md

@@ -2,4 +2,4 @@ the `enableSorting` prop is a boolean prop set to false by default. If true, the
 
 ### sortIcon
 
-An optional prop, `sortIcon` allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when sort direction is desc, and the second value will replace the default icon when sort direction is asc. `sortIcon` also allows you to pass it a single icon as a string, in which case the icon will not toggle with the sort state. Default for this prop is `["arrow-up-short-wide", "arrow-down-short-wide"]`. All strings must be valid FA icons.
+An optional prop, `sortIcon` allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when sort direction is desc, and the second value will replace the default icon when sort direction is asc. `sortIcon` also allows you to pass it a single icon as a string, in which case the icon will not toggle with the sort state. Default for this prop is `["arrow-up-wide-short", "arrow-down-short-wide"]`. All strings must be valid FA icons.

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_dropdown/docs/_dropdown_with_custom_display_rails.html.erb

@@ -76,7 +76,7 @@
     const option   = e.detail;
     const dropdown = e.target;
 
-    const display = dropdown.querySelector("#dropdown_trigger_custom_display");
+    const display = dropdown.querySelector("[data-dropdown-trigger-custom-display]");
     if (!display) return;
 
     const nameEl = display.querySelector("#dropdown-avatar-name");

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_nav/docs/_collapsible_nav_disabled_item.html.erb

@@ -0,0 +1,24 @@
+ <%= pb_rails("nav", props: { variant: "bold" }) do %>
+    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city", disabled: true }) do %>
+        <%= pb_rails("nav", props: { variant: "bold" }) do %>
+            <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("nav/item", props: { text: "Albums", link: "#", active: true, collapsible: true, icon_left: "theater-masks" }) do %>
+        <%= pb_rails("nav", props: { variant: "bold" }) do %>
+            <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Food", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Style", link: "#" }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", collapsible: true, icon_left: "city" }) do %>
+        <%= pb_rails("nav", props: { variant: "bold" }) do %>
+            <%= pb_rails("nav/item", props: { text: "City", link: "#", disabled: true }) %>
+            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
+        <% end %>
+    <% end %>
+  <% end %>
+  

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_disabled_item.jsx

@@ -0,0 +1,87 @@
+import React from "react";
+import Nav from '../../pb_nav/_nav'
+import NavItem from '../../pb_nav/_item'
+
+const CollapsibleNavDisabledItem = (props) => {
+  return (
+    <Nav 
+        variant="bold"
+        {...props}
+    >
+      <NavItem
+          collapsed={false}
+          collapsible
+          disabled
+          iconLeft="city" 
+          link="#" 
+          text="Overview" 
+          {...props}
+      >
+        <NavItem
+            link="#" 
+            text="City"
+            {...props}
+        />
+        <NavItem
+            link="#"
+            text="People"
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Business" 
+            {...props}
+        />
+      </NavItem>
+      <NavItem 
+          collapsible 
+          iconLeft="theater-masks"
+          link="#" 
+          text="Albums" 
+          {...props}
+      >
+        <NavItem 
+            disabled
+            link="#" 
+            text="Entertainment" 
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Food" 
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Style" 
+            {...props}
+        />
+      </NavItem>
+      <NavItem 
+          collapsible 
+          iconLeft="city" 
+          link="#" 
+          text="Similar Artists" 
+          {...props}
+      >
+        <NavItem 
+            link="#" 
+            text="City"
+            {...props} 
+        />
+        <NavItem
+            link="#"
+            text="People"
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Business" 
+            {...props}
+        />
+      </NavItem>
+    </Nav>
+  );
+};
+
+export default  CollapsibleNavDisabledItem

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

@@ -14,6 +14,7 @@ examples:
   - collapsible_nav: Collapsible Nav
   - collapsible_nav_with_all_options: Collapsible Nav With Options
   - collapsible_nav_no_icon: Collapsible Nav No Icon
+  - collapsible_nav_disabled_item: Collapsible Nav With Disabled Item
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
@@ -42,6 +43,7 @@ examples:
   - collapsible_nav_item_spacing: Collapsible Nav With ItemSpacing
   - collapsible_nav_custom: Collapsible Nav With Custom Toggling
   - collapsible_nav_no_icon: Collapsible Nav No Icon
+  - collapsible_nav_disabled_item: Collapsible Nav With Disabled Item
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
@@ -62,9 +64,3 @@ examples:
   - nav_horizontal_subtle_no_highlight_swift: Horizontal Subtle No Highlight
   - nav_horizontal_bold_swift: Horizontal Bold
   - nav_props_swift: ""
-
-
-
-  
-
-  

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

@@ -22,4 +22,5 @@ export { default as CollapsibleNavItemSpacing } from "./_collapsible_nav_item_sp
 export { default as CollapsibleNavNoIcon } from "./_collapsible_nav_no_icon.jsx"
 export { default as HorizontalNavExtendedunderline } from './_horizontal_nav_extendedunderline.jsx'
 export { default as HorizontalNavDisabled } from './_horizontal_nav_disabled.jsx'
-export { default as VerticalNavDisabled } from './_vertical_nav_disabled.jsx'
+export { default as VerticalNavDisabled } from './_vertical_nav_disabled.jsx'
+export { default as CollapsibleNavDisabledItem } from './_collapsible_nav_disabled_item.jsx'

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.2.0.pre.rc.3
+  version: 16.2.0.pre.rc.4
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-02-03 00:00:00.000000000 Z
+date: 2026-02-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -421,6 +421,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
@@ -1431,6 +1434,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
@@ -1506,6 +1510,8 @@ files:
 - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md
 - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx
 - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.md
+- app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_disabled_item.html.erb
+- app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_disabled_item.jsx
 - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.jsx
 - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.md
 - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_no_icon.html.erb
@@ -2617,6 +2623,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