playbook_ui 16.2.0.pre.rc.2 → 16.2.0.pre.rc.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 57e7920a7b47285ec3e254c7c67f5eda6d1742c4b51455bff71452d431bbaa36
-  data.tar.gz: 6894b82d417daccc631daed96d00ee1462bf76944958c4ec2226f9a0fb588463
+  metadata.gz: 6cbd889b9a1aa2f70a8e5face90b1685b992b488955160332f43ec6f1318002a
+  data.tar.gz: a33d29f7f1ff25e1bdbb43310eeb9c37921dbca784b743b1ff915113f94a7789
 SHA512:
-  metadata.gz: 4b48cd0af7cc499e37ef1f2cc702c06f26b5865095b362da32f23e80eeb8aef75bae49c79e29b38d0c8bbe2790564896ebb92496196d639ae351d0579f57ca16
-  data.tar.gz: 5a57afcd4dfa17ef354d30b48c8d8a501e30e86283e343723fa63fee9395c115288b47d8a9ee68848d233e5ea0a96ae81cceb91bf0c21dde21e20608c851a002
+  metadata.gz: cee893abfc5a440ffeb004484e5f511a7514a76f7ef2816f87749f648241b9c8a7c1ede0a93d9610d639a863e0934588b85585941edd8abab59ef54e37d02cb1
+  data.tar.gz: 230cd647c00dae8f14eac937320e4ebd9d4128bf2ac92e3f3700be1c19b52df2c65b83e3667558aa569c76099c99990a9e7a76286530359a661ea7773f5f9ad6

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_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/dropdown.html.erb

@@ -7,7 +7,7 @@
     <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
         <input
             data-default-value="<%= input_default_value %>"
-            id="dropdown-selected-option"
+            data-dropdown-selected-option
             name="<%= object.name %><%= '[]' if object.multi_select %>"
             style="display: none"
             <%= object.required ? "required" : ""%>

data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb

@@ -23,15 +23,15 @@
             <%= pb_rails("flex", props: {align: "center"}) do %>
                 <% if object.custom_display.present?  %>
                     <%= pb_rails("flex", props: {align: "center"}) do %>
-                        <div id="dropdown_trigger_custom_display" style="display: none;">
+                        <div data-dropdown-trigger-custom-display style="display: none;">
                             <%= object.custom_display %>
                         </div>
-                        <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
+                        <%= pb_rails("body", props: {text: object.default_display_placeholder, data: { 'dropdown-trigger-display': true }}) %>
                     <% end %>
                 <% else %>
                     <% if object.multi_select %>
                         <%= pb_rails("flex", props: { align: "center", wrap: true }) do %>
-                            <%= pb_rails("flex", props: { id:"dropdown_pills_wrapper", wrap: true }) do %>
+                            <%= pb_rails("flex", props: { data: { 'dropdown-pills-wrapper': true }, wrap: true }) do %>
                             <% end %>   
                         <% if object.autocomplete %>
                                 <input
@@ -42,7 +42,7 @@
                                     autocomplete="off"
                                 />
                             <% else %>
-                                <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display_multi_select"}) %>
+                                <%= pb_rails("body", props: {text: object.default_display_placeholder, data: { "dropdown-trigger-display-multi-select": true }}) %>
                             <% end %>
                         <% end %>
                     <% else %>
@@ -55,7 +55,7 @@
                                 autocomplete="off"
                             />
                         <% else %>
-                            <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
+                            <%= pb_rails("body", props: {text: object.default_display_placeholder, data: { 'dropdown-trigger-display': true }}) %>
                         <% end %>
                     <% end %>
                 <% end %>
@@ -63,9 +63,9 @@
         <% end %>
             <%= pb_rails("flex/flex_item") do %>
                 <%= pb_rails("body", props: {display: "flex", align_items:"center" }) do  %>
-                    <%= pb_rails("icon", props: {icon: "times", cursor: "pointer", size:"sm", id: "dropdown_clear_icon", padding_right:"xs" }) %>
-                    <%= pb_rails("icon", props: {icon: "chevron-down", cursor: "pointer", size:"sm", id: "dropdown_open_icon"}) %>
-                    <%= pb_rails("icon", props: {icon: "chevron-up", cursor: "pointer", size:"sm", id: "dropdown_close_icon"}) %>
+                    <%= pb_rails("icon", props: {icon: "times", cursor: "pointer", size:"sm", data:{'dropdown-clear-icon': true }, padding_right:"xs" }) %>
+                    <%= pb_rails("icon", props: {icon: "chevron-down", cursor: "pointer", size:"sm", data:{'dropdown-open-icon': true }}) %>
+                    <%= pb_rails("icon", props: {icon: "chevron-up", cursor: "pointer", size:"sm", data:{ 'dropdown-close-icon': true }}) %>
                 <% end %>
             <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_dropdown/index.js

@@ -4,18 +4,19 @@ import { PbDropdownKeyboard } from "./keyboard_accessibility";
 const DROPDOWN_SELECTOR = "[data-pb-dropdown]";
 const TRIGGER_SELECTOR = "[data-dropdown-trigger]";
 const CONTAINER_SELECTOR = "[data-dropdown-container]";
-const DOWN_ARROW_SELECTOR = "#dropdown_open_icon";
-const UP_ARROW_SELECTOR = "#dropdown_close_icon";
+const DOWN_ARROW_SELECTOR = "[data-dropdown-open-icon]";
+const UP_ARROW_SELECTOR = "[data-dropdown-close-icon]";
 const OPTION_SELECTOR = "[data-dropdown-option-label]";
 const CUSTOM_DISPLAY_SELECTOR = "[data-dropdown-custom-trigger]";
-const DROPDOWN_TRIGGER_DISPLAY = "#dropdown_trigger_display";
+const DROPDOWN_TRIGGER_DISPLAY = "[data-dropdown-trigger-display]";
 const DROPDOWN_PLACEHOLDER = "[data-dropdown-placeholder]";
-const DROPDOWN_INPUT = "#dropdown-selected-option";
+const DROPDOWN_INPUT = "[data-dropdown-selected-option]";
 const SEARCH_INPUT_SELECTOR = "[data-dropdown-autocomplete]";
 const SEARCH_BAR_SELECTOR = "[data-dropdown-search]";
-const CLEAR_ICON_SELECTOR = "#dropdown_clear_icon";
+const CLEAR_ICON_SELECTOR = "[data-dropdown-clear-icon]";
 const LABEL_SELECTOR = '[data-dropdown="pb-dropdown-label"]';
 
+
 export default class PbDropdown extends PbEnhancedElement {
   static get selector() {
     return DROPDOWN_SELECTOR;
@@ -305,7 +306,7 @@ export default class PbDropdown extends PbEnhancedElement {
   onOptionSelected(value, selectedOption) {
     const triggerElement = this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);
     const customDisplayElement = this.element.querySelector(
-      "#dropdown_trigger_custom_display",
+      '[data-dropdown-trigger-custom-display]',
     );
 
     if (triggerElement) {
@@ -693,9 +694,9 @@ export default class PbDropdown extends PbEnhancedElement {
   updatePills() {
     if (!this.isMultiSelect) return;
 
-    const wrapper = this.element.querySelector("#dropdown_pills_wrapper");
+    const wrapper = this.element.querySelector('[data-dropdown-pills-wrapper]');
     const placeholder = this.element.querySelector(
-      "#dropdown_trigger_display_multi_select",
+      '[data-dropdown-trigger-display-multi-select]',
     );
     if (!wrapper) return;
 
@@ -773,7 +774,7 @@ export default class PbDropdown extends PbEnhancedElement {
       }
     }
     const customDisplay = this.element.querySelector(
-      "#dropdown_trigger_custom_display",
+      '[data-dropdown-trigger-custom-display]',
     );
     if (customDisplay) {
       customDisplay.style.display = "none";
@@ -829,7 +830,7 @@ export default class PbDropdown extends PbEnhancedElement {
     }
 
     const customDisplay = this.element.querySelector(
-      "#dropdown_trigger_custom_display",
+      '[data-dropdown-trigger-custom-display]',
     );
     if (customDisplay) {
       customDisplay.style.display = "none";

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -91,6 +91,7 @@ const NavItem = (props: NavItemProps) => {
     marginX,
     marginY,
     disabled = false,
+ 
   } = props;
 
   const spacingMarginProps = {
@@ -197,13 +198,14 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
     if (React.isValidElement(child)) {
       const childProps: NavChildProps = {
         itemSpacing: itemSpacing,
+        ...(disabled && { disabled: disabled })
       };
       return React.cloneElement(child, childProps);
     }
     return child;
   });
 
-  const collapsibleClasses = buildCss("collapsible_nav_wrapper", activeClass, highlightedBorderClass, collapsibleTrailClass)
+  const collapsibleClasses = buildCss("collapsible_nav_wrapper", activeClass, highlightedBorderClass, collapsibleTrailClass, disabledClass)
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (!disabled && !isLink && (e.key === "Enter" || e.key === " ")) {
@@ -231,8 +233,8 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
               icon={iconRight && iconRight}
               iconSize="xs"
               id={id}
-              onClick={onClick}
-              onIconClick={onIconRightClick}
+              onClick={disabled ? undefined : onClick}
+              onIconClick={disabled ? undefined : onIconRightClick}
           >
             <Collapsible.Main
                 className={globalProps({ ...finalItemSpacing })}

data/app/pb_kits/playbook/pb_nav/_nav.scss

@@ -7,8 +7,10 @@
 @import "./collapsible_nav";
 
 [class^="pb_nav_list"] {
+
   //classes for fontSize and fontWeight props
   .font_size_small {
+
     .pb_nav_list_item_text,
     .pb_nav_list_item_text_collapsible {
       font-size: $font_small;
@@ -16,6 +18,7 @@
   }
 
   .font_size_normal {
+
     .pb_nav_list_item_text,
     .pb_nav_list_item_text_collapsible {
       font-size: $font_normal;
@@ -23,6 +26,7 @@
   }
 
   .font_bolder {
+
     .pb_nav_list_item_text,
     .pb_nav_list_item_text_collapsible {
       font-weight: $bolder !important;
@@ -30,6 +34,7 @@
   }
 
   .font_bold {
+
     .pb_nav_list_item_text,
     .pb_nav_list_item_text_collapsible {
       font-weight: $bold !important;
@@ -37,6 +42,7 @@
   }
 
   .font_regular {
+
     .pb_nav_list_item_text,
     .pb_nav_list_item_text_collapsible {
       font-weight: $regular;
@@ -79,19 +85,22 @@
 }
 
 // Disabled scss
-.pb_nav_item_disabled {
+.pb_nav_item_disabled{
   cursor: not-allowed !important;
-  .pb_nav_list_item_text, 
+
+  .pb_nav_list_item_text,
   .pb_nav_list_item_icon_left,
   .pb_nav_list_item_icon_right,
   .pb_nav_list_item_icon_section {
     color: $text_lt_lighter !important;
     cursor: not-allowed !important;
   }
+
   @media (hover: hover) {
     &:hover {
-      background-color: unset !important;
+      background-color: $white !important;
       color: $text_lt_lighter !important;
+
       .pb_nav_list_item_text,
       .pb_nav_list_item_icon_left,
       .pb_nav_list_item_icon_right {
@@ -100,3 +109,73 @@
     }
   }
 }
+
+  .pb_nav_item_disabled {
+    cursor: not-allowed !important;
+
+    .pb_nav_list_item_text,
+    .pb_nav_list_item_text_collapsible,
+    .pb_nav_list_item_icon_left,
+    .pb_nav_list_item_icon_right,
+    .pb_nav_list_item_icon_section,
+    .pb_nav_list_item_link,
+    .pb_nav_list_item_link_collapsible,
+    .cursor_pointer {
+      color: $text_lt_lighter !important;
+      cursor: not-allowed !important;
+    }
+
+    .pb_collapsible_main_kit {
+      background-color: $white !important;
+    }
+
+    .icon_wrapper,
+    svg {
+      color: $text_lt_lighter !important;
+      cursor: not-allowed !important;
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: $white !important;
+
+        .pb_collapsible_main_kit,
+        .pb_nav_list_item_link,
+        .icon_wrapper {
+          background-color: $white !important;
+        }
+
+        .pb_nav_list_item_icon_section_collapsible path,
+        .pb_nav_list_item_link_collapsible path {
+          color: $text_lt_lighter !important;
+        }
+      }
+    }
+  }
+
+  .collapsible_nav_wrapper_pb_nav_item_disabled {
+    .pb_collapsible_main_kit {
+      background-color: $white !important;
+    }
+
+    .pb_nav_list_item_link,
+    .pb_nav_list_item_text,
+    .pb_nav_list_item_icon_left,
+    .pb_nav_list_item_icon_right,
+    .icon_wrapper,
+    .pb_nav_list_item_icon_section {
+      color: $text_lt_lighter !important;
+      cursor: not-allowed !important;
+    }
+
+    .icon_wrapper svg {
+      color: $text_lt_lighter !important;
+    }
+
+    &:hover {
+      .icon_wrapper,
+      .pb_nav_list_item_link {
+        background-color: $white !important;
+      }
+    }
+  }

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

@@ -1,5 +1,5 @@
   <% if object.collapsible %>
-    <%= pb_rails("collapsible", props: { name: "collapsible-nav-example", classname: object.collapsible_nav_classname }) do %>
+    <%= pb_rails("collapsible", props: { name: "collapsible-nav-example", classname: object.collapsible_nav_classname + (object.disabled ? " collapsible_nav_wrapper_pb_nav_item_disabled" : "") }) do %>
       <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark, classname:object.margin_classes }) do %>
         <%= pb_content_tag( object.tag,
             href: object.link && object.link,

data/app/pb_kits/playbook/pb_nav/item.rb

@@ -25,7 +25,7 @@ module Playbook
                     default: "_self"
       def classname
         if collapsible
-          "#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{generate_classname('pb_collapsible_nav_item', active_class, collapsible_trail_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link_collapsible"
+          "#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{generate_classname('pb_collapsible_nav_item', active_class, collapsible_trail_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link_collapsible#{disabled_class}"
         else
           "#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link#{disabled_class}"
         end

data/app/pb_kits/playbook/pb_nav/navTypes.ts

@@ -21,5 +21,6 @@ export type NavChildProps = {
     orientation?: "vertical" | "horizontal";
     variant?: "normal" | "subtle";
     itemSpacing?: SpacingObject
+    disabled?: boolean
   };
   

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx

@@ -289,7 +289,35 @@ test('input display none shows number of selected items', () => {
 
   const kit = screen.getByTestId('input-display-none-test')
   const inputDisplayDiv = kit.querySelector(".pb_typeahead_selection_count")
-  expect(inputDisplayDiv).toHaveTextContent("2 items selected") 
+  expect(inputDisplayDiv).toHaveTextContent("2 items selected")
+})
+
+test('input display none keeps selected options visible in dropdown with selected styling', async () => {
+  render(
+    <Typeahead
+        data={{ testid: 'input-display-none-dropdown-test' }}
+        defaultValue={[options[0], options[1]]}
+        inputDisplay="none"
+        isMulti
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId('input-display-none-dropdown-test')
+  const control = kit.querySelector('.typeahead-kit-select__control')
+  fireEvent.mouseDown(control)
+
+  await waitFor(() => {
+    const menu = kit.querySelector('.typeahead-kit-select__menu')
+    expect(menu).toBeInTheDocument()
+  })
+
+  // Selected options (Orange, Red) should remain in the dropdown and be marked as selected
+  const selectedOptions = kit.querySelectorAll('.typeahead-kit-select__option--is-selected')
+  expect(selectedOptions.length).toBe(2)
+  const labels = Array.from(selectedOptions).map((el) => el.textContent)
+  expect(labels).toContain('Orange')
+  expect(labels).toContain('Red')
 })
 
 test('typeahead with pills that use name instead of label', () => {

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -292,6 +292,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(
       multiKit: "",
       onCreateOption: null as null,
       plusIcon: false,
+      ...(inputDisplay === 'none' ? { hideSelectedOptions: false, closeMenuOnSelect: false } : {}),
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onMultiValueClick: (_option: SelectValueType): any => undefined,
       pillColor: pillColor,

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -1,5 +1,8 @@
 @import "./opacity";
 
+/* Accessible color tokens (WCAG-compliant) — defined in _colors_accessible.scss */
+@import "./colors_accessible";
+
 /*=====================================
 Base colors should not be documented.
 Only document color use.