playbook_ui 16.5.0.pre.rc.4 → 16.5.0.pre.rc.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e7dea3b3ac4ba79818f434283562129d10590e6ba4fed204f8c88044ef625cc8
-  data.tar.gz: 18d7def47926195b0e20252fded19e19151195881053f7260e583381523f6f3a
+  metadata.gz: c32d51cfd82ea85173431252ee253925ee58870d14cd99ec19c3685734dd7cdb
+  data.tar.gz: d44a53d1fb2030fb3d90e5af717f7e967266832676ee62c34135fc70ff76313b
 SHA512:
-  metadata.gz: a749f50a68169e51b59ed941540f001800ab1e9627541a0a63aa14cc8dc8233ecddfb06a1aafaec2d675bd3911259acb8f336526100e03f3bcb246f6ef20ea81
-  data.tar.gz: 51b2b301c0b38f264cabda4c45c6f3296872075e0bbdbbae636c3bebaf33d9082bf67a7dce9f01e1c4035564239b7f93926ced594b2509e3e8600970f9a8b0a9
+  metadata.gz: cb9a2f2707fa909d99f3215fa0c4a826cb6138f4b8d3418023652e44b0e8e9f8183fbdfc21d43bdf0c95627f6ccf8be301ad80676d7dd45de1bdeac5dec9576f
+  data.tar.gz: 32170dae149912ff60302959a1f2f3033ab3b43d48fddc6c22ad2b30576b740191c4e28b70cd52cb9e4f1d643cd88bf7e67e865e3c1d2d5ca00669de83610285

data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx

@@ -33,7 +33,8 @@ export const AdvancedTableProvider = ({ children, ...props }: {
 
   const measureHeights = useCallback(() => {
     if (headerRef.current) {
-      const headerRect = headerRef.current.getBoundingClientRect();
+      const headerElement = headerRef.current as HTMLElement;
+      const headerRect = headerElement.getBoundingClientRect();
       if (headerRect.height > 0) {
         setHeaderHeight(headerRect.height);
       }
@@ -67,9 +68,11 @@ export const AdvancedTableProvider = ({ children, ...props }: {
     };
   }, [measureHeights]);
 
+  const headerGroupCount = table?.getHeaderGroups()?.length ?? 0;
+
   useEffect(() => {
     measureHeights();
-  }, [table?.getRowModel().rows.length, measureHeights]);
+  }, [table?.getRowModel().rows.length, headerGroupCount, measureHeights]);
 
 
   // Create a flattened data array that includes ALL components for virtualization

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx

@@ -64,14 +64,12 @@ export const TableHeader = ({
   );
 
   const renderRegularTableHeader = () => (
-    <thead className={classes} 
+    <thead className={classes}
         id={id}
+        ref={headerRef}
     >
-      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, index: number) => (
-        <tr 
-            key={`${headerGroup.id}-headerGroup`}
-            ref={index === 0 ? headerRef : null}
-        >
+      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
+        <tr key={`${headerGroup.id}-headerGroup`}>
           {!hasAnySubRows && selectableRows && (
             <th className={customCellClassnames}>
               <Checkbox
@@ -105,16 +103,16 @@ export const TableHeader = ({
   );
 
   const renderVirtualizedTableHeader = () => (
-    <thead 
-        className={classes} 
+    <thead
+        className={classes}
         data-virtualized="true"
         id={id}
+        ref={headerRef}
     >
-      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, index: number) => (
-        <tr 
+      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
+        <tr
             className="virtualized-header-row-header"
             key={`${headerGroup.id}-headerGroup-virtualized`}
-            ref={index === 0 ? headerRef : null}
         >
           {!hasAnySubRows && selectableRows && (
             <th className={classnames(customCellClassnames, "virtualized-header-cell")}>

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

@@ -0,0 +1,235 @@
+/* eslint-disable react/no-multi-comp, react/prop-types */
+import React, { useCallback, useState } from "react"
+
+import AdvancedTable from "../_advanced_table"
+import Flex from "../../pb_flex/_flex"
+import Icon from "../../pb_icon/_icon"
+import List from "../../pb_list/_list"
+import ListItem from "../../pb_list/_list_item"
+import PbReactPopover from "../../pb_popover/_popover"
+import SectionSeparator from "../../pb_section_separator/_section_separator"
+import StarRating from "../../pb_star_rating/_star_rating"
+import COMPOSITION_MOCK_DATA from "./advanced_table_grouped_headers_composition_mock_data.json"
+
+const LEAF_COUNT = "newEnrollments"
+const LEAF_SCHEDULED = "scheduledMeetings"
+
+const ICON_UNSORTED = "arrow-up-arrow-down"
+const iconSorted = (desc) => (desc ? "arrow-up-wide-short" : "arrow-down-short-wide")
+
+const STAR_MENU = [
+  { id: LEAF_COUNT, label: "Count" },
+  { id: LEAF_SCHEDULED, label: "Scheduled" },
+]
+
+const MENU_BTN = {
+  alignItems: "center",
+  background: "transparent",
+  border: "none",
+  cursor: "pointer",
+  display: "flex",
+  font: "inherit",
+  gap: 12,
+  justifyContent: "space-between",
+  padding: "8px 14px",
+  textAlign: "left",
+  width: "100%",
+}
+
+const labelStyle = (active) => ({
+  color: active ? "#0056cf" : "#242930",
+  flex: 1,
+  fontSize: 14,
+  fontWeight: active ? 600 : 400,
+})
+
+/** Hooks + popover; `header` callback cannot use hooks directly. */
+const StarMetricGroupHeader = ({ table }) => {
+  const [open, setOpen] = useState(false)
+  const menuId = "playbook-star-metric-sort-menu"
+
+  const sort0 = table.getState().sorting[0]
+  const groupActive =
+    sort0?.id === LEAF_COUNT || sort0?.id === LEAF_SCHEDULED
+
+  const close = useCallback((shouldClose) => setOpen(!shouldClose), [])
+  const toggle = useCallback((e) => {
+    e.stopPropagation()
+    setOpen((v) => !v)
+  }, [])
+
+  const applySort = useCallback(
+    (columnId, e) => {
+      e.stopPropagation()
+      const cur = table.getState().sorting[0]
+      const nextDesc = cur?.id === columnId ? !cur.desc : true
+      table.setSorting([{ desc: nextDesc, id: columnId }])
+      setOpen(false)
+    },
+    [table]
+  )
+
+  return (
+    <PbReactPopover
+        closeOnClick="outside"
+        offset
+        padding="none"
+        placement="bottom-start"
+        reference={
+          <button
+              aria-controls={menuId}
+              aria-expanded={open}
+              aria-haspopup="menu"
+              aria-label="Sort by Count or Scheduled"
+              onClick={toggle}
+              style={{
+                background: open ? "rgba(115, 134, 169, 0.14)" : "transparent",
+                border: "none",
+                borderRadius: 6,
+                cursor: "pointer",
+                font: "inherit",
+                margin: 0,
+                padding: "2px 4px",
+              }}
+              title="Open menu to sort by Count or Scheduled"
+              type="button"
+          >
+            <Flex alignItems="center"
+                gap="xs"
+                justifyContent="center"
+            >
+              <StarRating
+                  backgroundType="outline"
+                  colorOption="primary"
+                  justifyContent="center"
+                  maxWidth="102px"
+                  rating={5}
+              />
+              <Icon
+                  color={groupActive ? "primary" : "default"}
+                  fixedWidth
+                  icon={
+                    groupActive
+                      ? iconSorted(Boolean(sort0?.desc))
+                      : ICON_UNSORTED
+                  }
+                  size="md"
+              />
+            </Flex>
+          </button>
+        }
+        shouldClosePopover={close}
+        show={open}
+        zIndex={1200}
+    >
+      <Flex id={menuId}
+          minWidth="220px"
+          orientation="column"
+      >
+        <List borderless
+            padding="none"
+        >
+          {STAR_MENU.map(({ id, label }, i) => {
+            const active = sort0?.id === id
+            return (
+              <React.Fragment key={id}>
+                {i > 0 ? <SectionSeparator margin="none" /> : null}
+                <ListItem padding="none">
+                  <button
+                      onClick={(e) => applySort(id, e)}
+                      style={MENU_BTN}
+                      type="button"
+                  >
+                    <span style={labelStyle(active)}>{label}</span>
+                    <Icon
+                        color={active ? "primary" : "default"}
+                        fixedWidth
+                        icon={
+                          active
+                            ? iconSorted(Boolean(sort0?.desc))
+                            : ICON_UNSORTED
+                        }
+                        size="md"
+                    />
+                  </button>
+                </ListItem>
+              </React.Fragment>
+            )
+          })}
+        </List>
+      </Flex>
+    </PbReactPopover>
+  )
+}
+
+const AdvancedTableGroupedHeadersComposition = (props) => {
+  const [pinnedRows, setPinnedRows] = useState({ top: ["12"] })
+
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      cellAccessors: ["quarter", "month", "day"],
+      label: "Year",
+    },
+    {
+      columns: [
+        {
+          columns: [
+            {
+              accessor: "newEnrollments",
+              enableSort: true,
+              id: LEAF_COUNT,
+              label: "Count",
+            },
+            {
+              accessor: "scheduledMeetings",
+              enableSort: true,
+              id: LEAF_SCHEDULED,
+              label: "Scheduled",
+            },
+          ],
+          id: "starLeafPair",
+          label: "Metrics",
+        },
+      ],
+      header: ({ table }) => (
+        <Flex justify="center">
+          <StarMetricGroupHeader table={table} />
+        </Flex>
+      ),
+      id: "starMetricGroup",
+      label: "Rating group (custom header)",
+    },
+    {
+      columns: [
+        { accessor: "attendanceRate", label: "Attendance" },
+        {
+          accessor: "classCompletionRate",
+          enableSort: true,
+          id: "classCompletionRate",
+          label: "Completion %",
+        },
+      ],
+      label: "Performance",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          enableSortingRemoval
+          maxHeight="md"
+          pinnedRows={{ onChange: setPinnedRows, value: pinnedRows }}
+          tableData={COMPOSITION_MOCK_DATA}
+          tableProps={{ sticky: true }}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableGroupedHeadersComposition

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

@@ -0,0 +1,17 @@
+### Grouped headers, custom UI, sort, and pinned rows
+
+This example combines patterns that often show up together in product tables:
+
+1. **Multi-level headers** — nested `columns` in `columnDefinitions`.
+2. **Custom group header** — a `header` function returning React (here: `StarRating`, sort icon, `PbReactPopover` menu). Parent groups are not sort targets; **only leaf columns** use `enableSort: true` (see **Enable Sort By Column (Multi-Column)**).
+3. **Programmatic sort** — the group `header` receives TanStack’s **`table`**. Call **`table.setSorting([{ id: "<leafColumnId>", desc: boolean }])`** using the same **`id`** values as your leaf columns. Match **direction icons** to the built-in kit (`arrow-up-arrow-down` unsorted; `arrow-up-wide-short` / `arrow-down-short-wide` when sorted).
+4. **Pinned row + sticky header** — `pinnedRows` with row **`id`**s and `tableProps={{ sticky: true }}` (see **Pinned Rows**).
+
+**Implementation notes**
+
+- **`header` must be a child component** if you need hooks (e.g. popover open state). Render it from `header: ({ table }) => <YourHeader table={table} />`.
+- **Avoid wrapping the primary control in `Tooltip`** — it can steal the first tap/click. Use a **`title`** on the button or copy in the doc instead.
+- **Popover rows:** use a plain **`<button>`** as `reference`, `closeOnClick="outside"`. Picking the **same** metric again should **toggle** `desc`; switching to another leaf column often defaults to **`desc: true`** to align with **`sortDescFirst`**.
+- **Data:** **`advanced_table_grouped_headers_composition_mock_data.json`** — twelve flat rows (2015–2026) with **varied** Count / Scheduled / % values so sorting is obvious; **`id` `"12"`** is **2026** and is pinned by default.
+
+Other building blocks on this kit: **Custom Header with Multiple Headers**, **Sticky Header**.

data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_grouped_headers_composition_mock_data.json

@@ -0,0 +1,98 @@
+[
+  {
+    "id": "1",
+    "year": "2015",
+    "newEnrollments": "12",
+    "scheduledMeetings": "40",
+    "attendanceRate": "62%",
+    "classCompletionRate": "28%"
+  },
+  {
+    "id": "2",
+    "year": "2016",
+    "newEnrollments": "88",
+    "scheduledMeetings": "12",
+    "attendanceRate": "71%",
+    "classCompletionRate": "55%"
+  },
+  {
+    "id": "3",
+    "year": "2017",
+    "newEnrollments": "34",
+    "scheduledMeetings": "67",
+    "attendanceRate": "58%",
+    "classCompletionRate": "41%"
+  },
+  {
+    "id": "4",
+    "year": "2018",
+    "newEnrollments": "05",
+    "scheduledMeetings": "91",
+    "attendanceRate": "44%",
+    "classCompletionRate": "73%"
+  },
+  {
+    "id": "5",
+    "year": "2019",
+    "newEnrollments": "61",
+    "scheduledMeetings": "19",
+    "attendanceRate": "83%",
+    "classCompletionRate": "36%"
+  },
+  {
+    "id": "6",
+    "year": "2020",
+    "newEnrollments": "19",
+    "scheduledMeetings": "54",
+    "attendanceRate": "67%",
+    "classCompletionRate": "62%"
+  },
+  {
+    "id": "7",
+    "year": "2021",
+    "newEnrollments": "73",
+    "scheduledMeetings": "08",
+    "attendanceRate": "52%",
+    "classCompletionRate": "49%"
+  },
+  {
+    "id": "8",
+    "year": "2022",
+    "newEnrollments": "50",
+    "scheduledMeetings": "50",
+    "attendanceRate": "75%",
+    "classCompletionRate": "45%"
+  },
+  {
+    "id": "9",
+    "year": "2023",
+    "newEnrollments": "95",
+    "scheduledMeetings": "03",
+    "attendanceRate": "69%",
+    "classCompletionRate": "81%"
+  },
+  {
+    "id": "10",
+    "year": "2024",
+    "newEnrollments": "27",
+    "scheduledMeetings": "76",
+    "attendanceRate": "91%",
+    "classCompletionRate": "22%"
+  },
+  {
+    "id": "11",
+    "year": "2025",
+    "newEnrollments": "41",
+    "scheduledMeetings": "33",
+    "attendanceRate": "48%",
+    "classCompletionRate": "94%"
+  },
+  {
+    "id": "12",
+    "year": "2026",
+    "newEnrollments": "66",
+    "scheduledMeetings": "66",
+    "attendanceRate": "55%",
+    "classCompletionRate": "58%"
+  }
+]

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

@@ -75,6 +75,7 @@ examples:
   - advanced_table_column_visibility_with_state: Column Visibility Control With State
   - advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
   - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
+  - advanced_table_grouped_headers_composition: Grouped headers, custom headers, sort, and pinned rows
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
   - advanced_table_row_styling: Row Styling
   - advanced_table_padding_control_per_row: Padding Control using Row Styling

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

@@ -42,6 +42,7 @@ export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinit
 export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'
 export { default as AdvancedTableCustomSort } from './_advanced_table_custom_sort.jsx'
 export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced_table_with_custom_header_multi_header.jsx'
+export { default as AdvancedTableGroupedHeadersComposition } from './_advanced_table_grouped_headers_composition.jsx'
 export { default as AdvancedTableSortPerColumn } from './_advanced_table_sort_per_column.jsx'
 export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'
 export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'

data/app/pb_kits/playbook/pb_select/docs/_select_attributes.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-food-attributes",
   attributes: {
     data: { options: "data_attribute" },
   },

data/app/pb_kits/playbook/pb_select/docs/_select_blank.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-location",
   label: "Where do you live",
   name: "location",
   blank_selection: "Select One...",

data/app/pb_kits/playbook/pb_select/docs/_select_custom_select.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("select", props: { label: "Favorite Holiday" }) do %>
+<%= pb_rails("select", props: { id: "holiday", label: "Favorite Holiday" }) do %>
   <select name="holiday" id="holiday">
     <option value="1">Christmas</option>
     <option value="2">Thanksgiving</option>

data/app/pb_kits/playbook/pb_select/docs/_select_custom_select_subheaders.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("select", props: { label: "Favorite Animal" }) do %>
+<%= pb_rails("select", props: { id: "animal", label: "Favorite Animal" }) do %>
   <select name="animal" id="animal">
     <optgroup label="Mammal">
       <option value="1">Cat</option>

data/app/pb_kits/playbook/pb_select/docs/_select_default.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-favorite-food",
   label: "Favorite Food",
   name: "food",
   options: [

data/app/pb_kits/playbook/pb_select/docs/_select_disabled.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-dessert-disabled",
   label: "Favorite Dessert",
   disabled: true,
   name: "dessert",

data/app/pb_kits/playbook/pb_select/docs/_select_disabled_options.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-coffee",
   label: "Favorite Coffee",
   name: "coffee",
   options: [

data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb

@@ -1,5 +1,6 @@
 <%= pb_rails("select", props: {
   error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
+  id: "select-food-error",
   label: "Favorite Food",
   name: "food",
   options: [

data/app/pb_kits/playbook/pb_select/docs/_select_inline.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-food-inline",
   label: "Favorite Food",
   name: "food",
   inline: true,

data/app/pb_kits/playbook/pb_select/docs/_select_inline_compact.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-food-inline-compact",
   label: "Favorite Food",
   name: "food",
   inline: true,

data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-food-inline-arrow",
   label: "Favorite Food",
   name: "food",
   inline: true,

data/app/pb_kits/playbook/pb_select/docs/_select_multiple.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-food-multiple",
   label: "Favorite Food",
   name: "food",
   multiple: true,

data/app/pb_kits/playbook/pb_select/docs/_select_required.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-shoe-required",
   label: "Which shoe do you tie first?",
   required: true,
   name: "shoe",

data/app/pb_kits/playbook/pb_select/docs/_select_required_indicator.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-snacks-required-indicator",
   label: "Favorite Snacks",
   name: "food",
   required_indicator: true,

data/app/pb_kits/playbook/pb_select/docs/_select_value_text_same.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-sport",
   label: "Favorite Sport",
   name: "sports",
   options: [

data/app/pb_kits/playbook/pb_select/select.html.erb

@@ -2,17 +2,17 @@
   id: nil,
   class: object.classnames ) do %>
   <% if object.label %>
-    <label class="pb_select_kit_label" for="<%= object.input_options[:id] || object.name %>">
+    <%= tag.label(class: "pb_select_kit_label", for: object.select_input_id) do %>
       <% if object.required_indicator %>
         <%= pb_rails("caption", props: { color: "lighter", dark: object.dark }) do %>
           <%= object.label %><span style="color: #DA0014;"> *</span>
-        <% end %>       
+        <% end %>
       <% else %>
         <%= pb_rails("caption", props: { color: "lighter", text: object.label, dark: object.dark }) %>
       <% end %>
-    </label>
+    <% end %>
   <% end %>
-  <label class="<%= object.select_wrapper_class %>" for="<%= object.input_options[:id] || object.name %>">
+  <%= tag.label(class: object.select_wrapper_class, for: object.select_input_id) do %>
     <% if content.present? %>
       <%= content %>
       <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
@@ -32,5 +32,5 @@
     <% if object.multiple != true %>
       <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(angle_down_path), fixed_width: true, classname: "pb_select_kit_caret"}) %>
     <% end %>
-  </label>
+  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_select/select.rb

@@ -46,6 +46,11 @@ module Playbook
         }.merge(attributes).merge(input_options)
       end
 
+      # Same resolved id as the native +<select>+ (+all_attributes[:id]+) for label +for+.
+      def select_input_id
+        all_attributes[:id].presence
+      end
+
       def classname
         generate_classname("pb_select", select_margin_bottom, separator: " ")
       end

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -165,6 +165,10 @@ $pb_selectable_paddings: (
       padding: $space_sm;
     }
 
+    > label .pb_card_kit.dark.pb_card_kit_border_none {
+      border-width: 0;
+    }
+
     &.dark {
       .separator {
         background: $input_border_default_dark;
@@ -289,6 +293,41 @@ $pb_selectable_paddings: (
   }
 }
 
+.pb_selectable_card_kit_disabled.display_input,
+.pb_selectable_card_kit_checked_disabled.display_input {
+  &:not(.dark) {
+    .separator {
+      background: $input_border_disabled !important;
+    }
+
+    .psuedo_separator {
+      background-color: $input_border_disabled !important;
+    }
+  }
+
+  > label > .pb_flex_kit {
+    align-items: stretch;
+
+    > .pb_flex_kit:first-child {
+      align-self: center;
+    }
+  }
+
+  > label .pb_card_kit {
+    flex: 1;
+    min-width: 0;
+    align-self: stretch;
+    background-color: $input_background_disabled !important;
+    border-width: 0 !important;
+    color: $input_text_disabled;
+  }
+
+  &.dark > label .pb_card_kit.dark {
+    background-color: $input_background_disabled_dark !important;
+    color: $input_text_disabled_dark;
+  }
+}
+
 .pb_selectable_card_kit_checked_disabled>label {
   border-color: $input_border_state !important;
   .dark & {