playbook_ui_docs 16.1.0.pre.alpha.play2725datepickermlsrequiredindicator14221 → 16.1.0.pre.alpha.play2771passphraseaccessibility14033

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7fd055411b9ed91c7af7dbe6c8b968d66982309792c16a2f491e51033beb24dd
-  data.tar.gz: 0b2bc9804504c744514f89e986ba5bbe3ee87887de500caa01eb3b6e7e763a2d
+  metadata.gz: 915ce87438a0738bdd314b31e723ebb66da44ec024d2f52859666b2c64aea4ba
+  data.tar.gz: de815161c5478ed1dd8bd9451a93d479183a8759a004d43344b7345e7e6aa3c8
 SHA512:
-  metadata.gz: 4fc26ec1b6bf5d2cf65a8aa670b5a95a2dbb40382733e10de96f62b78829bfeaaee7039087124c5d9407f149ffed452e62d32033b6cf1b6203e57d7ab1781fb5
-  data.tar.gz: 34ffc767245d7d0aa7bfe67b709e1b00473439f2282009b67be9994861f8d534843371c5dbf5a5dfebb1961ed0cf3216c7aeb25b6c3512cf23fe98065e47130d
+  metadata.gz: 2bd9e94e79ae341b5218c098b91d17c5b7954544906377ff42f276d1c9b462e6f4e0872e9eae23b26923a4170333fe2acf511d10f02de20b8016f1cc3198278d
+  data.tar.gz: f0a236c89bd8893292aaafec6b8949d96912aeaf91b3087f5867c8a02c521483d0e3e6851dbd5771ec31b211ef850a98e47c389ba4479045dda217eb2ccec845

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-wide-short", "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-short-wide", "arrow-down-short-wide"]`. All strings must be valid FA icons.

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

@@ -78,7 +78,6 @@ examples:
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
   - advanced_table_column_styling_background: Column Styling Background Color
-  - advanced_table_column_styling_background_custom: Column Styling Background Color (Custom)
   - advanced_table_column_styling_background_multi: Column Styling Background Color with Multiple Headers
   - advanced_table_padding_control: Padding Control using Column Styling
   - advanced_table_column_border_color: Column Group Border Color

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

@@ -47,5 +47,4 @@ export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced
 export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
 export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
 export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
-export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
-export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
+export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'

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

@@ -8,7 +8,6 @@ examples:
     - checkbox_indeterminate: Indeterminate Checkbox
     - checkbox_disabled: Disabled Checkbox
     - checkbox_form: Form and Hidden Input
-    # - checkbox_required_indicator: Required Indicator
 
   react:
   - checkbox_default: Default
@@ -18,7 +17,6 @@ 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,4 +5,3 @@ 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/example.yml

@@ -31,7 +31,6 @@ examples:
   - date_picker_time: Time Selection
   - date_picker_positions: Custom Positions
   - date_picker_positions_element: Custom Position (based on element)
-  - date_picker_required_indicator: Required Indicator
   - date_picker_turbo_frames: Within Turbo Frames
 
   react:
@@ -65,4 +64,3 @@ examples:
   - date_picker_time: Time Selection
   - date_picker_positions: Custom Positions
   - date_picker_positions_element: Custom Position (based on element)
-  - date_picker_required_indicator: Required Indicator

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

@@ -27,5 +27,4 @@ export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_
 export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
 export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'
 export { default as DatePickerRangePattern } from './_date_picker_range_pattern'
-export { default as DatePickerAndDropdownRange } from './_date_picker_and_dropdown_range.jsx'
-export { default as DatePickerRequiredIndicator } from "./_date_picker_required_indicator.jsx";
+export { default as DatePickerAndDropdownRange } from './_date_picker_and_dropdown_range.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("[data-dropdown-trigger-custom-display]");
+    const display = dropdown.querySelector("#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,13 +1,10 @@
-<%
+<% 
   options = [
     { label: 'United States', value: 'unitedStates', id: 'us' },
     { label: 'Canada', value: 'canada', id: 'ca' },
     { label: 'Pakistan', value: 'pakistan', id: 'pk' },
   ]
+
 %>
 
-<%= pb_rails("dropdown", props: {
-  id: "select_a_country",
-  label: "Select a Country",
-  options: options
-}) %>
+<%= pb_rails("dropdown", props: {options: options, label: "Select a Country"}) %>

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

@@ -25,7 +25,6 @@ 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,3 +1 @@
-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.
+The top-level Dropdown component optionally accepts any string through a `label` prop to produce a label above your trigger element.

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

@@ -1,158 +1,15 @@
-<% tree_data = [
-  {
-    label: "HQ",
-    value: "hQ",
-    id: "hq",
-  },
-  {
-    label: "Philadelphia",
-    value: "philadelphia",
-    id: "phl",
-    children: [
-      {
-        label: "Marketing & Sales PHL",
-        value: "marketingAndSalesPhl",
-        id: "marketingPHL",
-      },
-      {
-        label: "Installation Office PHL",
-        value: "installationOfficePhl",
-        id: "installationPHL",
-      },
-      {
-        label: "Warehouse PHL",
-        value: "warehousePhl",
-        id: "warehousePHL",
-      },
-    ]
-  },
-  {
-    label: "New Jersey",
-    value: "newJersey",
-    id: "nj",
-    children: [
-      {
-        label: "New Jersey",
-        value: "newJersey",
-        id: "nj1",
-        children: [
-          {
-            label: "Marketing & Sales NJ",
-            value: "marketingAndSalesNj",
-            id: "marketingNJ",
-          },
-          {
-            label: "Installation Office NJ",
-            value: "installationOfficeNj",
-            id: "installationNJ",
-          },
-          {
-            label: "Warehouse NJ",
-            value: "warehouseNj",
-            id: "warehouseNJ",
-          },
-        ],
-      },
-      {
-        label: "Princeton",
-        value: "princeton",
-        id: "princeton",
-        children: [
-          {
-            label: "Marketing & Sales Princeton",
-            value: "marketingAndSalesPrinceton",
-            id: "marketingPR",
-          },
-          {
-            label: "Installation Office Princeton",
-            value: "installationOfficePrinceton",
-            id: "installationPR",
-          },
-          {
-            label: "Warehouse Princeton",
-            value: "warehousePrinceton",
-            id: "warehousePR",
-          },
-        ]
-      },
-    ]
-  },
-  {
-    label: "Maryland",
-    value: "maryland",
-    id: "MD",
-    children: [
-      {
-        label: "Marketing & Sales MD",
-        value: "marketingAndSalesMd",
-        id: "marketingMD",
-      },
-      {
-        label: "Installation Office MD",
-        value: "installationOfficeMd",
-        id: "installationMD",
-      },
-      {
-        label: "Warehouse MD",
-        value: "warehouseMd",
-        id: "warehouseMD",
-      },
-    ]
-  },
-  {
-    label: "Connecticut",
-    value: "connecticut",
-    id: "CT",
-    children: [
-      {
-        label: "Marketing & Sales CT",
-        value: "marketingAndSalesCt",
-        id: "marketingCT",
-      },
-      {
-        label: "Installation Office CT",
-        value: "installationOfficeCt",
-        id: "installationCT",
-      },
-      {
-        label: "Warehouse CT",
-        value: "warehouseCt",
-        id: "warehouseCT",
-      },
-    ]
-  },
-]; %>
-
 <%= 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.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.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.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.phone_number_field :example_phone_number_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.time_picker :example_time_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.date_picker :example_date_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.date_picker :example_date_picker_required_indicator_custom, props: { label: "Custom Date Picker Label", required: true, required_indicator: true } %>
-  <%= form.multi_level_select :example_multi_level_select_required_indicator, props: {
-    label: true,
-    margin_y: 'sm',
-    required: true,
-    required_indicator: true,
-    tree_data: tree_data
-  } %>
-  <%= form.multi_level_select :example_multi_level_select_required_indicator_custom, props: {
-    label: "Custom Multi Level Select Label",
-    margin_y: 'sm',
-    required: true,
-    required_indicator: true,
-    tree_data: tree_data
-  } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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: "select_a_department",
-  label: "Select a Department",
-  tree_data: treeData
+    id: "multi-level-select-label-rails",
+    label: "Select a department",
+    tree_data: treeData
 }) %>

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

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

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

@@ -17,7 +17,6 @@ examples:
     - multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
     - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
     - multi_level_select_single_disabled: Disabled Options (Single Select)
-    - multi_level_select_required_indicator: Required Indicator
 
   react:
     - multi_level_select_default: Default
@@ -38,4 +37,3 @@ examples:
     - multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
     - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
     - multi_level_select_single_disabled: Disabled Options (Single Select)
-    - multi_level_select_required_indicator: Required Indicator

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

@@ -1,19 +1,18 @@
-export { default as MultiLevelSelectDefault } from "./_multi_level_select_default.jsx"
-export { default as MultiLevelSelectSingle } from "./_multi_level_select_single.jsx"
-export { default as MultiLevelSelectSingleChildrenOnly } from "./_multi_level_select_single_children_only.jsx"
-export { default as MultiLevelSelectReturnAllSelected } from "./_multi_level_select_return_all_selected.jsx"
+export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'
+export { default as MultiLevelSelectSingle } from './_multi_level_select_single.jsx'
+export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_select_single_children_only.jsx'
+export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
 export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"
-export { default as MultiLevelSelectColor } from "./_multi_level_select_color.jsx"
-export { default as MultiLevelSelectInputDisplay } from "./_multi_level_select_input_display.jsx"
-export { default as MultiLevelSelectWithChildren } from "./_multi_level_select_with_children.jsx"
-export { default as MultiLevelSelectWithChildrenWithRadios } from "./_multi_level_select_with_children_with_radios.jsx"
-export { default as MultiLevelSelectDisabled } from "./_multi_level_select_disabled.jsx"
-export { default as MultiLevelSelectReactHook } from "./_multi_level_select_react_hook.jsx"
-export { default as MultiLevelSelectError } from "./_multi_level_select_error.jsx"
-export { default as MultiLevelSelectDisabledOptions } from "./_multi_level_select_disabled_options.jsx"
-export { default as MultiLevelSelectDisabledOptionsParent } from "./_multi_level_select_disabled_options_parent.jsx"
-export { default as MultiLevelSelectDisabledOptionsParentDefault } from "./_multi_level_select_disabled_options_parent_default.jsx"
-export { default as MultiLevelSelectDisabledOptionsDefault } from "./_multi_level_select_disabled_options_default.jsx"
-export { default as MultiLevelSelectLabel } from "./_multi_level_select_label.jsx"
-export { default as MultiLevelSelectSingleDisabled } from "./_multi_level_select_single_disabled.jsx"
-export { default as MultiLevelSelectRequiredIndicator } from "./_multi_level_select_required_indicator.jsx"
+export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'
+export { default as MultiLevelSelectInputDisplay } from './_multi_level_select_input_display.jsx'
+export { default as MultiLevelSelectWithChildren } from './_multi_level_select_with_children.jsx'
+export { default as MultiLevelSelectWithChildrenWithRadios } from './_multi_level_select_with_children_with_radios.jsx'
+export { default as MultiLevelSelectDisabled } from './_multi_level_select_disabled.jsx'
+export { default as MultiLevelSelectReactHook  } from './_multi_level_select_react_hook.jsx'
+export { default as MultiLevelSelectError } from './_multi_level_select_error.jsx'
+export { default as MultiLevelSelectDisabledOptions } from './_multi_level_select_disabled_options.jsx'
+export { default as MultiLevelSelectDisabledOptionsParent } from './_multi_level_select_disabled_options_parent.jsx'
+export { default as MultiLevelSelectDisabledOptionsParentDefault } from './_multi_level_select_disabled_options_parent_default.jsx'
+export { default as MultiLevelSelectDisabledOptionsDefault } from './_multi_level_select_disabled_options_default.jsx'
+export { default as MultiLevelSelectLabel } from './_multi_level_select_label.jsx'
+export { default as MultiLevelSelectSingleDisabled } from './_multi_level_select_single_disabled.jsx'

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

@@ -14,7 +14,6 @@ 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
@@ -43,7 +42,6 @@ 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
@@ -64,3 +62,9 @@ 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,5 +22,4 @@ 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 CollapsibleNavDisabledItem } from './_collapsible_nav_disabled_item.jsx'
+export { default as VerticalNavDisabled } from './_vertical_nav_disabled.jsx'

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

@@ -22,7 +22,6 @@ 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_required_indicator.jsx

@@ -8,7 +8,6 @@ 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,8 +32,6 @@ 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,5 +21,3 @@ 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_typeahead/docs/example.yml

@@ -19,7 +19,6 @@ 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
@@ -43,4 +42,3 @@ 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,22 +1,21 @@
-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"
+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'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.1.0.pre.alpha.play2725datepickermlsrequiredindicator14221
+  version: 16.1.0.pre.alpha.play2771passphraseaccessibility14033
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-02-05 00:00:00.000000000 Z
+date: 2026-01-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -64,8 +64,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_custom.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_custom.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_multi.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_multi.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx
@@ -421,9 +419,6 @@ 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
@@ -648,9 +643,6 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_required_indicator.html.erb
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_required_indicator.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_required_indicator.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.md
@@ -1437,12 +1429,8 @@ 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_required_indicator.html.erb
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_required_indicator.jsx
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_required_indicator.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb
@@ -1516,8 +1504,6 @@ 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
@@ -1944,8 +1930,6 @@ 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
@@ -1964,8 +1948,6 @@ 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
@@ -2629,9 +2611,6 @@ 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

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_custom.jsx

@@ -1,71 +0,0 @@
-import React from "react"
-import AdvancedTable from '../_advanced_table'
-import colors from '../../tokens/exports/_colors.module.scss'
-import MOCK_DATA from "./advanced_table_mock_data.json"
-import  Flex  from '../../pb_flex/_flex'
-import  Title  from '../../pb_title/_title'
-import  Body  from '../../pb_body/_body'
-
-
-const AdvancedTableColumnStylingBackgroundCustom = (props) => {
-  const columnDefinitions = [
-{
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-      customRenderer: (row, value) => (
-        <Flex flexDirection="column">
-          <Title size={4}
-              text={value} 
-          />
-          <Body text="lorem ipsum" />
-          <Body text="lorem ipsum" />
-        </Flex>
-      ), 
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      columnStyling:{
-        cellBackgroundColor: (row) => row.original.newEnrollments > 15 ? colors.success_subtle : colors.error_subtle,
-        fontColor: (row) => row.original.newEnrollments > 15 ? colors.success : colors.error,
-      },
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-      columnStyling:{
-        cellBackgroundColor: (row) => row.original.scheduledMeetings >= 15 ? colors.info_subtle : colors.warning_subtle
-      },
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-      columnStyling:{cellBackgroundColor: colors.info, headerBackgroundColor: colors.info, fontColor: colors.white, headerFontColor: colors.white},
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-    },
-  ]
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          tableData={MOCK_DATA}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTableColumnStylingBackgroundCustom

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

@@ -1,4 +0,0 @@
-`cellBackgroundColor` and `fontColor` can also accept functions for conditional styling based on row data. The function receives the row object and returns a color value.
-
-See the code snippet below for more details.
-

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

@@ -1,6 +0,0 @@
-<%= 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

@@ -1,17 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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_date_picker/docs/_date_picker_required_indicator.html.erb

@@ -1,5 +0,0 @@
-<%= pb_rails("date_picker", props: {
-  picker_id: "date_picker_required_indicator",
-  label: "Required Date Picker",
-  required_indicator: true,
-}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_required_indicator.jsx

@@ -1,13 +0,0 @@
-import React from "react"
-import DatePicker from "../_date_picker"
-
-const DatePickerRequiredIndicator = (props) => (
-  <DatePicker
-      label="Required Date Picker"
-      pickerId="date_picker_required_indicator"
-      requiredIndicator
-      {...props}
-  />
-)
-
-export default DatePickerRequiredIndicator

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

@@ -1 +0,0 @@
-The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label to visually indicate that the field is required. This is purely visual and does not enforce validation—you can pair it with HTML `required`, client-side validation, or server-side validation as needed.

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

@@ -1,3 +0,0 @@
-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_multi_level_select/docs/_multi_level_select_required_indicator.html.erb

@@ -1,72 +0,0 @@
-<% treeData = [{
-    label: "Power Home Remodeling",
-    value: "powerHomeRemodeling",
-    id: "100",
-    expanded: true,
-    children: [
-      {
-        label: "People",
-        value: "people",
-        id: "101",
-        expanded: true,
-        children: [
-          {
-            label: "Talent Acquisition",
-            value: "talentAcquisition",
-            id: "102",
-          },
-          {
-            label: "Business Affairs",
-            value: "businessAffairs",
-            id: "103",
-            children: [
-              {
-                label: "Initiatives",
-                value: "initiatives",
-                id: "104",
-              },
-              {
-                label: "Learning & Development",
-                value: "learningAndDevelopment",
-                id: "105",
-              },
-            ],
-          },
-          {
-            label: "People Experience",
-            value: "peopleExperience",
-            id: "106",
-          },
-        ],
-      },
-      {
-        label: "Contact Center",
-        value: "contactCenter",
-        id: "107",
-        children: [
-          {
-            label: "Appointment Management",
-            value: "appointmentManagement",
-            id: "108",
-          },
-          {
-            label: "Customer Service",
-            value: "customerService",
-            id: "109",
-          },
-          {
-            label: "Energy",
-            value: "energy",
-            id: "110",
-          },
-        ],
-      },
-    ],
-}] %>
-
-<%= pb_rails("multi_level_select", props: {
-  id: "select_a_department",
-  label: "Select a Department",
-  required_indicator: true,
-  tree_data: treeData
-}) %>

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

@@ -1,87 +0,0 @@
-import React from "react"
-import MultiLevelSelect from "../_multi_level_select"
-
-const treeData = [
-  {
-    label: "Power Home Remodeling",
-    value: "powerHomeRemodeling",
-    id: "powerhome1",
-    expanded: true,
-    children: [
-      {
-        label: "People",
-        value: "people",
-        id: "people1",
-        expanded: true,
-        children: [
-          {
-            label: "Talent Acquisition",
-            value: "talentAcquisition",
-            id: "talent1"
-          },
-          {
-            label: "Business Affairs",
-            value: "businessAffairs",
-            id: "business1",
-            children: [
-              {
-                label: "Initiatives",
-                value: "initiatives",
-                id: "initiative1"
-              },
-              {
-                label: "Learning & Development",
-                value: "learningAndDevelopment",
-                id: "development1"
-              }
-            ]
-          },
-          {
-            label: "People Experience",
-            value: "peopleExperience",
-            id: "experience1"
-          }
-        ]
-      },
-      {
-        label: "Contact Center",
-        value: "contactCenter",
-        id: "contact1",
-        children: [
-          {
-            label: "Appointment Management",
-            value: "appointmentManagement",
-            id: "appointment1"
-          },
-          {
-            label: "Customer Service",
-            value: "customerService",
-            id: "customer1"
-          },
-          {
-            label: "Energy",
-            value: "energy",
-            id: "energy1"
-          }
-        ]
-      }
-    ]
-  }
-]
-
-const MultiLevelSelectRequiredIndicator = (props) => {
-  return (
-    <div>
-      <MultiLevelSelect
-          id="select_a_department"
-          label="Select a Department"
-          onSelect={(selectedNodes) => console.log("Selected Items", selectedNodes)}
-          requiredIndicator
-          treeData={treeData}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default MultiLevelSelectRequiredIndicator

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

@@ -1,3 +0,0 @@
-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_nav/docs/_collapsible_nav_disabled_item.html.erb

@@ -1,24 +0,0 @@
- <%= 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

@@ -1,87 +0,0 @@
-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_rich_text_editor/docs/_rich_text_editor_advanced_label.jsx

@@ -1,44 +0,0 @@
-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

@@ -1 +0,0 @@
-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_label.jsx

@@ -1,28 +0,0 @@
-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

@@ -1 +0,0 @@
-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_typeahead/docs/_typeahead_required_indicator.html.erb

@@ -1,16 +0,0 @@
-<% 
-  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

@@ -1,23 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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.