playbook_ui_docs 16.11.0.pre.alpha.play3070timezoneformats17921 → 16.11.0.pre.alpha.testkey2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2bca501d5a1186b8196aa62ef89ce243ed04c91af0a7986078a449677b9d50a4
-  data.tar.gz: 9c15e70948b19435ab43b3ac001a4fcae803c20e640e611d64efa05a384c693d
+  metadata.gz: 2393f306e459c8a41adf1a22b7be172445de8f4a5a7de539b45dc40c12bdd3a1
+  data.tar.gz: acc6d1c6b3d1e6e11b019578c4a30c9e19376e3fb1145573bfbe51e103380ca1
 SHA512:
-  metadata.gz: a6a8b8bfd1c094734040ee6d50a311802be07d3a1597bfbc87820b3296771e81438dd30ccb56ce4bebdeeb634fbd130b11eb009f933dca9e1599f08a40164fcc
-  data.tar.gz: 227ad1af5386e1fe4446cc40694b673727a96d08405ada28e395e292ae42b4532bab00658b68847e975aee546a6b4bb441ca62960ad66e2c30143ed46bb9aeb5
+  metadata.gz: 2dc860e6b1e6f19c67bce60001774e98138af08c5f1b3e5b6b5e72242e1461aefe720bfb38428d3e02f1385498a3caad0152723ce74e12c7aa80be64a8f7c720
+  data.tar.gz: d28900ed5b7ead57516ff15e0eaa3906c94d9c9d0bc1216f2dbd7873edf9ea563f0603ebba56f7787fc1f90f347538a2d5fd1260e28b66fb3eeb0719849cdeb4

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

@@ -1,15 +1,12 @@
 The `columnStyling` prop is an optional item that can be used within `columnDefinitions` as shown in the code snippet below. It is an object that has several optional key/value pairs, this doc example highlights the following:
 
-1) `headerAlignment`: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to `left`, `right` or `center`.
-
-2) `cellAlignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
-
-3) `fontColor`: This will allow you to control the font color for a given column.
-
-4) Column width: optional keys on `columnStyling` are `minWidth`, `width`, and `maxWidth` (numbers = pixels; CSS strings allowed). This example sets `width` on Year for a fixed hierarchy column (see the width doc for `minWidth` and bands).
+1. `headerAlignment`: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to `left`, `right` or `center`.
+2. `cellAlignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
+3. `fontColor`: This will allow you to control the font color for a given column.
+4. Column width: optional keys on `columnStyling` are `minWidth`, `width`, and `maxWidth` (numbers = pixels; CSS strings allowed). This example sets `width` on Year for a fixed hierarchy column (see the width doc for `minWidth` and bands).
 
 Fixed width: pass `width` only (or TanStack `size` only) and Playbook sets min and max to the same value automatically — you do not need all three for an exact width.
 
-See [Column Styling: Width](https://playbook.powerapp.cloud/kits/advanced_table/react#column-styling-width) for the full guide (Playbook ↔ TanStack mapping, floor-only vs bands, and when to use one vs three values).
+See [Column Styling: Width](https://playbook.powerapp.cloud/kits/advanced_table/styling/react#column-styling-width) for the full guide (Playbook ↔ TanStack mapping, floor-only vs bands, and when to use one vs three values).
 
 `columnStyling` can be used within the columnDefinition of all the columns or some of them, as shown. Each column has its own individual control in this way. 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb

@@ -3,6 +3,7 @@
       accessor: "year",
       label: "Year",
       cellAccessors: ["quarter", "month", "day"],
+      column_styling: { width: 124 },
     },
     {
       accessor: "newEnrollments",

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

@@ -1,9 +1,12 @@
 The `column_styling` prop is an optional item that can be used within `column_definitions` as shown in the code snippet below.  It is an object that has several optional key/value pairs, this doc example highlights the following:
 
 1) `header_alignment`: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to `left`, `right` or `center`.
-
 2) `cell_alignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
-
 3) `font_color`: This will allow you to control the font color for a given column.
+4) Column width: optional keys on `column_styling` are `min_width`, `width`, and `max_width` (numbers = pixels; CSS strings allowed). This example sets `width` on Year for a fixed hierarchy column (see the width doc for `min_width` and bands).
+
+Fixed width: pass `width` only and Playbook sets min and max to the same value automatically — you do not need all three for an exact width.
+
+See [Column Styling: Width](https://playbook.powerapp.cloud/kits/advanced_table/styling/rails#column-styling-width) for the full guide (floor-only vs bands, and when to use one vs three values).
 
-`column_styling` can be used within the column_definition of all the columns or some of them, as shown. Each column has its own individual control in this way. 
+`column_styling` can be used within the column_definition of all the columns or some of them, as shown. Each column has its own individual control in this way.

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

@@ -1,6 +1,6 @@
 AdvancedTable column width is controlled in two equivalent places on each leaf `columnDefinitions` entry. Playbook maps them to inline styles on header and body cells (and forwards numeric values into TanStack Table’s column model).
 
-1) Playbook `columnStyling` and TanStack `ColumnDef` use the same three ideas:
+**1)** Playbook `columnStyling` and TanStack `ColumnDef` use the same three ideas:
 
 - Preferred / target width: `columnStyling` `width` maps to TanStack `size` on the same column object.
 - Minimum width (floor): `columnStyling` `minWidth` maps to TanStack `minSize`.
@@ -10,7 +10,7 @@ Numbers are pixels. You can also pass CSS length strings on `columnStyling` (e.g
 
 If both APIs set the same axis, `columnStyling` wins for that axis when Playbook builds cell styles.
 
-2) Fixed width: set `width` only
+**2)** Fixed width: set `width` only
 
 If you pass only `width` (or only `size`) and do not set `minWidth` / `maxWidth` (or `minSize` / `maxSize`), Playbook treats that as a fixed column: it sets all three to the same value under the hood so you do not have to repeat yourself.
 
@@ -26,7 +26,7 @@ size: 200
 
 Use this when the column should stay one width (e.g. a hierarchy column with expand controls).
 
-3) Floor only: `minWidth` / `minSize`
+**3)** Floor only: `minWidth` / `minSize`
 
 Set only a minimum when the column may grow with the table or content but must not shrink below a baseline (common fix for horizontal “jump” when rows expand):
 
@@ -34,7 +34,7 @@ Set only a minimum when the column may grow with the table or content but must n
 columnStyling: { minWidth: 160 }
 ```
 
-4) Flexible band: min + preferred + max
+**4)** Flexible band: min + preferred + max
 
 Set two or three values when you want a range. CSS uses preferred `width` clamped between `minWidth` and `maxWidth`:
 
@@ -46,7 +46,7 @@ Example from the table below (Attendance): `minWidth: 108`, `width: 124`, `maxWi
 
 You only need all three when you want that band. If min and max are omitted, `width` alone is enough for a fixed column.
 
-5) TanStack band without `columnStyling`
+**5)** TanStack band without `columnStyling`
 
 The Meetings column uses only TanStack fields:
 
@@ -56,7 +56,7 @@ The Meetings column uses only TanStack fields:
 
 Playbook applies the same min / preferred / max idea to cell styles. Setting only `size: 200` would lock all three to 200, same as `width: 200` in `columnStyling`.
 
-6) What the example table shows
+**6)** What the example table shows
 
 - Year (fixed): `columnStyling: { width: 128 }` — locked to 128px.
 - Enrollments (floor): `columnStyling: { minWidth: 160 }` — at least 160px; can grow.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_width_rails.html.erb

@@ -0,0 +1,41 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year (fixed)",
+      cellAccessors: ["quarter", "month", "day"],
+      # width alone locks min + max to the same value (128px).
+      column_styling: { width: 128 },
+    },
+    {
+      accessor: "newEnrollments",
+      label: "Enrollments (floor)",
+      column_styling: { min_width: 160 },
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Meetings (preferred)",
+      column_styling: { width: 200, min_width: 160, max_width: 240 },
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance (min / pref / max)",
+      column_styling: { min_width: 108, width: 124, max_width: 168 },
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Completion %",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated",
+    },
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "column-styling-width", table_data: @table_data, column_definitions: column_definitions }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "column-styling-width", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "column-styling-width", table_data: @table_data, column_definitions: column_definitions }) %>
+<% end %>

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

@@ -0,0 +1,49 @@
+AdvancedTable column width is controlled on each leaf `column_definitions` entry via `column_styling`. Playbook maps these keys to inline styles on header and body cells.
+
+**1)** `column_styling` width keys:
+
+- Preferred / target width: `width`
+- Minimum width (floor): `min_width`
+- Maximum width (ceiling): `max_width`
+
+Numbers are pixels. You can also pass CSS length strings (e.g. `"12rem"`, `"200px"`).
+
+**2)** Fixed width: set `width` only
+
+If you pass only `width` and do not set `min_width` / `max_width`, Playbook treats that as a fixed column: it sets all three to the same value under the hood so you do not have to repeat yourself.
+
+```ruby
+column_styling: { width: 128 }
+# Applied as width, min-width, and max-width: 128px
+```
+
+Use this when the column should stay one width (e.g. a hierarchy column with expand controls).
+
+**3)** Floor only: `min_width`
+
+Set only a minimum when the column may grow with the table or content but must not shrink below a baseline (common fix for horizontal “jump” when rows expand):
+
+```ruby
+column_styling: { min_width: 160 }
+```
+
+**4)** Flexible band: min + preferred + max
+
+Set two or three values when you want a range. CSS uses preferred `width` clamped between `min_width` and `max_width`:
+
+- `min_width`: won’t shrink below this.
+- `width`: preferred size when space allows.
+- `max_width`: won’t grow above this.
+
+Example from the table below (Attendance): `min_width: 108`, `width: 124`, `max_width: 168` → preferred 124px, allowed between 108 and 168.
+
+You only need all three when you want that band. If min and max are omitted, `width` alone is enough for a fixed column.
+
+**5)** What the example table shows
+
+- Year (fixed): `column_styling: { width: 128 }` — locked to 128px.
+- Enrollments (floor): `column_styling: { min_width: 160 }` — at least 160px; can grow.
+- Meetings (preferred): `width` / `min_width` / `max_width` — preferred 200px, between 160–240.
+- Attendance (min / pref / max): all three — preferred 124px, between 108–168.
+
+Grouped columns: put width options on leaf definitions (columns with an `accessor`), not on parent group headers.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_both_rails.html.erb

@@ -0,0 +1,57 @@
+<%# Example sort method for demonstration purposes %>
+<% if params["sort"] %>
+  <% sort_param = params["sort"].gsub(/_(asc|desc)\z/, "") %>
+  <% sort_direction = params["sort"].end_with?("_asc") ? 1 : -1 %>
+  <% @table_data_with_id.sort! do |a, b|
+    value_a = a[sort_param] || a[sort_param.to_sym]
+    value_b = b[sort_param] || b[sort_param.to_sym]
+
+    value_a = value_a.to_i if value_a.is_a?(String) && value_a.match?(/^\d+$/)
+    value_b = value_b.to_i if value_b.is_a?(String) && value_b.match?(/^\d+$/)
+
+    sort_direction * (value_a <=> value_b)
+  end %>
+<% end %>
+
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+      sort_menu: [
+        { item: "Year", link: "?sort=year_asc#pinned_rows_both_table", active: params["sort"] == "year_asc", direction: "asc" },
+        { item: "Year", link: "?sort=year_desc#pinned_rows_both_table", active: params["sort"] == "year_desc", direction: "desc" }
+      ],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<% pinned_rows = { top: ["8"], bottom: ["1"] } %>
+
+<%= pb_rails("advanced_table", props: { id: "pinned_rows_both_table", table_data: @table_data_with_id, column_definitions: column_definitions, max_height: "xs", pinned_rows: pinned_rows, responsive: "none", table_props: { sticky: true }}) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "pinned_rows_both_table", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "pinned_rows_both_table", table_data: @table_data_with_id, column_definitions: column_definitions, pinned_rows: pinned_rows }) %>
+<% end %>

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

@@ -0,0 +1 @@
+This code snippet demonstrates `pinned_rows` taking a hash with an array of row ids to both the `top` and `bottom` keys.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_bottom_rails.html.erb

@@ -0,0 +1,57 @@
+<%# Example sort method for demonstration purposes %>
+<% if params["sort"] %>
+  <% sort_param = params["sort"].gsub(/_(asc|desc)\z/, "") %>
+  <% sort_direction = params["sort"].end_with?("_asc") ? 1 : -1 %>
+  <% @table_data_with_id.sort! do |a, b|
+    value_a = a[sort_param] || a[sort_param.to_sym]
+    value_b = b[sort_param] || b[sort_param.to_sym]
+
+    value_a = value_a.to_i if value_a.is_a?(String) && value_a.match?(/^\d+$/)
+    value_b = value_b.to_i if value_b.is_a?(String) && value_b.match?(/^\d+$/)
+
+    sort_direction * (value_a <=> value_b)
+  end %>
+<% end %>
+
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+      sort_menu: [
+        { item: "Year", link: "?sort=year_asc#pinned_rows_bottom_table", active: params["sort"] == "year_asc", direction: "asc" },
+        { item: "Year", link: "?sort=year_desc#pinned_rows_bottom_table", active: params["sort"] == "year_desc", direction: "desc" }
+      ],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<% pinned_rows = { bottom: ["8"] } %>
+
+<%= pb_rails("advanced_table", props: { id: "pinned_rows_bottom_table", table_data: @table_data_with_id, column_definitions: column_definitions, max_height: "xs", pinned_rows: pinned_rows, responsive: "none", table_props: { sticky: true }}) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "pinned_rows_bottom_table", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "pinned_rows_bottom_table", table_data: @table_data_with_id, column_definitions: column_definitions, pinned_rows: pinned_rows }) %>
+<% end %>

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

@@ -0,0 +1 @@
+This code snippet demonstrates `pinned_rows` taking a hash with an array of row ids to the `bottom` key.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_rails.html.erb

@@ -19,8 +19,8 @@
       label: "Year",
       cellAccessors: ["quarter", "month", "day"],
       sort_menu: [
-        { item: "Year", link: "?sort=year_asc#pinned_rows_table", active: params["sort"] == "year_asc", direction: "asc" },
-        { item: "Year", link: "?sort=year_desc#pinned_rows_table", active: params["sort"] == "year_desc", direction: "desc" }
+        { item: "Year", link: "?sort=year_asc#pinned_rows_top_table", active: params["sort"] == "year_asc", direction: "asc" },
+        { item: "Year", link: "?sort=year_desc#pinned_rows_top_table", active: params["sort"] == "year_desc", direction: "desc" }
       ],
     },
     {
@@ -51,7 +51,7 @@
 
 <% pinned_rows = { top: ["8"] } %>
 
-<%= pb_rails("advanced_table", props: { id: "pinned_rows_table", table_data: @table_data_with_id, column_definitions: column_definitions, max_height: "xs", pinned_rows: pinned_rows, responsive: "none", table_props: { sticky: true }}) do %>
-  <%= pb_rails("advanced_table/table_header", props: { table_id: "pinned_rows_table", column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_id: "pinned_rows_table", table_data: @table_data_with_id, column_definitions: column_definitions, pinned_rows: pinned_rows }) %>
+<%= pb_rails("advanced_table", props: { id: "pinned_rows_top_table", table_data: @table_data_with_id, column_definitions: column_definitions, max_height: "xs", pinned_rows: pinned_rows, responsive: "none", table_props: { sticky: true }}) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "pinned_rows_top_table", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "pinned_rows_top_table", table_data: @table_data_with_id, column_definitions: column_definitions, pinned_rows: pinned_rows }) %>
 <% end %>

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

@@ -1,7 +1,7 @@
-Use the `pinned_rows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and will not change position if sorting is used.
+Use the `pinned_rows` prop to pin specific rows to the top or bottom of an Advanced Table. Pinned rows will remain at the top or bottom when scrolling through table data and will not change position if sorting is used.
 
 **NOTE:**
 - Sticky header required: Pinned rows must be used with `sticky: true` via `table_props` (works with both responsive and non-responsive tables)
 - Row ids required: Each object within the `table_data` array must contain a unique `id` in order to attach an id to all Rows for this to function.
-- `pinned_rows` takes a hash with a `top` key containing an array of row ids, as shown in the code snippet below.
-- For expandable rows, use the parent id in `pinned_rows[:top]`; all its children will automatically be pinned with it. If a child id is passed without the parent being pinned, nothing will be pinned.
+- `pinned_rows` takes a hash with a `top` and/or `bottom` key containing an array of row ids, as shown in the code snippet below.
+- For expandable rows, use the parent id in `pinned_rows[:top]` or `pinned_rows[:bottom]`; all its children will automatically be pinned with it. If a child id is passed without the parent being pinned, nothing will be pinned.

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

@@ -12,6 +12,7 @@
     "fullWidthCell": false,
     "inlineRowLoading": false,
     "loading": false,
+    "maxHeight": "auto",
     "responsive": "scroll",
     "scrollBarNone": false,
     "selectableRows": false,

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

@@ -9,7 +9,9 @@ examples:
   - advanced_table_table_props: Table Props
   - advanced_table_sticky_header_rails: Sticky Header
   - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
-  - advanced_table_pinned_rows_rails: Pinned Rows
+  - advanced_table_pinned_rows_rails: Pinned Rows (Top)
+  - advanced_table_pinned_rows_bottom_rails: Pinned Rows (Bottom)
+  - advanced_table_pinned_rows_both_rails: Pinned Rows (Both)
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
@@ -28,6 +30,7 @@ examples:
   - advanced_table_row_styling: Row Styling
   - advanced_table_padding_control_per_row_rails: Padding Control using Row Styling
   - advanced_table_column_styling_rails: Column Styling
+  - advanced_table_column_styling_width_rails: Column Styling Width
   - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
   - advanced_table_padding_control_rails: Padding Control using Column Styling
   - advanced_table_background_control_rails: Column Styling Background Color

data/app/pb_kits/playbook/pb_avatar/docs/_playground.json

@@ -2,6 +2,7 @@
   "template": "<Avatar{{props}} />",
   "propTargets": {},
   "defaults": {
+    "dark": false,
     "grayscale": false,
     "imageAlt": "",
     "name": "",

data/app/pb_kits/playbook/pb_card/docs/_playground.json

@@ -7,6 +7,7 @@
   "defaults": {
     "background": "none",
     "borderNone": false,
+    "borderRadius": "md",
     "draggableItem": false,
     "dragHandle": true,
     "selected": false,

data/app/pb_kits/playbook/pb_currency/docs/_playground.json

@@ -4,6 +4,7 @@
   "defaults": {
     "abbreviate": false,
     "align": "left",
+    "dark": false,
     "decimals": "default",
     "emphasized": true,
     "label": "Balance",

data/app/pb_kits/playbook/pb_date_picker/docs/_playground.json

@@ -3,6 +3,7 @@
   "propTargets": {},
   "defaults": {
     "allowInput": false,
+    "dark": false,
     "defaultDate": "",
     "disableInput": false,
     "enableTime": false,

data/app/pb_kits/playbook/pb_date_range_inline/docs/_playground.json

@@ -3,6 +3,7 @@
   "propTargets": {},
   "defaults": {
     "align": "left",
+    "dark": false,
     "size": "sm",
     "showCurrentYear": false
   },

data/app/pb_kits/playbook/pb_date_range_stacked/docs/_playground.json

@@ -1,7 +1,9 @@
 {
   "template": "<DateRangeStacked{{props}} />",
   "propTargets": {},
-  "defaults": {},
+  "defaults": {
+    "dark": false
+  },
   "groups": [
     {
       "name": "Content",

data/app/pb_kits/playbook/pb_date_stacked/docs/_playground.json

@@ -4,6 +4,7 @@
   "defaults": {
     "align": "left",
     "bold": false,
+    "dark": false,
     "size": "sm",
     "reverse": false,
     "showCurrentYear": false

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_playground.json

@@ -2,6 +2,7 @@
   "template": "<DateTimeStacked{{props}} />",
   "propTargets": {},
   "defaults": {
+    "dark": false,
     "showCurrentYear": false
   },
   "groups": [

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_playground.json

@@ -2,7 +2,8 @@
   "template": "<DateYearStacked{{props}} />",
   "propTargets": {},
   "defaults": {
-    "align": "left"
+    "align": "left",
+    "dark": false
   },
   "groups": [
     {

data/app/pb_kits/playbook/pb_filter/docs/_playground.json

@@ -3,6 +3,7 @@
   "propTargets": {},
   "defaults": {
     "background": true,
+    "minWidth": "360px",
     "placement": "bottom-start",
     "double": false,
     "filters": {
@@ -10,7 +11,6 @@
       "City": "San Francisco"
     },
     "isCollapsed": false,
-    "minWidth": "360px",
     "onCollapse": "() => {}",
     "onSortChange": "() => {}",
     "popoverProps": {},

data/app/pb_kits/playbook/pb_home_address_street/docs/_playground.json

@@ -2,6 +2,7 @@
   "template": "<HomeAddressStreet{{props}} />",
   "propTargets": {},
   "defaults": {
+    "dark": false,
     "preserveCase": false,
     "emphasis": "street",
     "newWindow": false,

data/app/pb_kits/playbook/pb_icon/docs/_playground.json

@@ -2,6 +2,7 @@
   "template": "<Icon{{props}} />",
   "propTargets": {},
   "defaults": {
+    "border": false,
     "fixedWidth": true,
     "inverse": false,
     "listItem": false,

data/app/pb_kits/playbook/pb_layout/docs/_playground.json

@@ -4,6 +4,7 @@
   "defaults": {
     "collapse": "xs",
     "full": false,
+    "position": "left",
     "responsive": false,
     "size": {
       "react": "sm",

data/app/pb_kits/playbook/pb_list/docs/_playground.json

@@ -3,6 +3,7 @@
   "propTargets": {},
   "defaults": {
     "borderless": false,
+    "dark": false,
     "enableDrag": false,
     "layout": "",
     "ordered": false,

data/app/pb_kits/playbook/pb_loading_inline/docs/_playground.json

@@ -4,6 +4,7 @@
   "defaults": {
     "align": "left",
     "color": "light",
+    "dark": false,
     "text": "Loading",
     "variant": "dotted"
   },

data/app/pb_kits/playbook/pb_map/docs/_playground.json

@@ -116,6 +116,13 @@
       "type": "info"
     }
   },
+  "externalDependencies": {
+    "packages": [
+      "maplibre-gl"
+    ],
+    "optional": true,
+    "note": "Map wraps MapLibre. The host app must already have maplibre-gl (and any required CSS) installed. Agents must not install packages — tell the user if they are missing."
+  },
   "structureModes": {
     "default": "maplibre",
     "modes": {

data/app/pb_kits/playbook/pb_map/docs/_playground.overrides.json

@@ -1,4 +1,9 @@
 {
+  "externalDependencies": {
+    "packages": ["maplibre-gl"],
+    "optional": true,
+    "note": "Map wraps MapLibre. The host app must already have maplibre-gl (and any required CSS) installed. Agents must not install packages — tell the user if they are missing."
+  },
   "structureModes": {
     "default": "maplibre",
     "modes": {

data/app/pb_kits/playbook/pb_multi_level_select/docs/_playground.json

@@ -14,6 +14,7 @@
     "placeholder": "Start typing...",
     "variant": "multi",
     "wrapped": false,
+    "pillColor": "primary",
     "selectedIds": [
       "talent1",
       "initiative1"

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_playground.json

@@ -389,6 +389,15 @@
       "type": "info"
     }
   },
+  "externalDependencies": {
+    "packages": [
+      "highcharts",
+      "highcharts-react-official"
+    ],
+    "optional": true,
+    "note": "This kit wraps Highcharts and does not ship it. The host app must already have these packages installed before using the kit. Agents must not install packages — tell the user if they are missing.",
+    "docs": "https://api.highcharts.com/highcharts/"
+  },
   "externalImports": [
     "import { PbBarGraph } from 'playbook-ui/charts'"
   ]

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_playground.overrides.json

@@ -1,4 +1,10 @@
 {
+  "externalDependencies": {
+    "packages": ["highcharts", "highcharts-react-official"],
+    "optional": true,
+    "note": "This kit wraps Highcharts and does not ship it. The host app must already have these packages installed before using the kit. Agents must not install packages — tell the user if they are missing.",
+    "docs": "https://api.highcharts.com/highcharts/"
+  },
   "template": "<PbBarGraph{{props}} />",
   "externalImports": [
     "import { PbBarGraph } from 'playbook-ui/charts'"

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_playground.json

@@ -226,6 +226,15 @@
       "type": "info"
     }
   },
+  "externalDependencies": {
+    "packages": [
+      "highcharts",
+      "highcharts-react-official"
+    ],
+    "optional": true,
+    "note": "This kit wraps Highcharts and does not ship it. The host app must already have these packages installed before using the kit. Agents must not install packages — tell the user if they are missing.",
+    "docs": "https://api.highcharts.com/highcharts/"
+  },
   "externalImports": [
     "import { PbCircleChart } from 'playbook-ui/charts'"
   ]

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_playground.overrides.json

@@ -1,4 +1,10 @@
 {
+  "externalDependencies": {
+    "packages": ["highcharts", "highcharts-react-official"],
+    "optional": true,
+    "note": "This kit wraps Highcharts and does not ship it. The host app must already have these packages installed before using the kit. Agents must not install packages — tell the user if they are missing.",
+    "docs": "https://api.highcharts.com/highcharts/"
+  },
   "template": "<PbCircleChart{{props}} />",
   "externalImports": [
     "import { PbCircleChart } from 'playbook-ui/charts'"

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_playground.json

@@ -160,6 +160,15 @@
       "type": "info"
     }
   },
+  "externalDependencies": {
+    "packages": [
+      "highcharts",
+      "highcharts-react-official"
+    ],
+    "optional": true,
+    "note": "This kit wraps Highcharts and does not ship it. The host app must already have these packages installed before using the kit. Agents must not install packages — tell the user if they are missing.",
+    "docs": "https://api.highcharts.com/highcharts/"
+  },
   "externalImports": [
     "import { PbGaugeChart } from 'playbook-ui/charts'"
   ]

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_playground.overrides.json

@@ -1,4 +1,10 @@
 {
+  "externalDependencies": {
+    "packages": ["highcharts", "highcharts-react-official"],
+    "optional": true,
+    "note": "This kit wraps Highcharts and does not ship it. The host app must already have these packages installed before using the kit. Agents must not install packages — tell the user if they are missing.",
+    "docs": "https://api.highcharts.com/highcharts/"
+  },
   "template": "<PbGaugeChart{{props}} />",
   "externalImports": [
     "import { PbGaugeChart } from 'playbook-ui/charts'"

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_playground.json

@@ -403,6 +403,15 @@
       "type": "info"
     }
   },
+  "externalDependencies": {
+    "packages": [
+      "highcharts",
+      "highcharts-react-official"
+    ],
+    "optional": true,
+    "note": "This kit wraps Highcharts and does not ship it. The host app must already have these packages installed before using the kit. Agents must not install packages — tell the user if they are missing.",
+    "docs": "https://api.highcharts.com/highcharts/"
+  },
   "externalImports": [
     "import { PbLineGraph } from 'playbook-ui/charts'"
   ]

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_playground.overrides.json

@@ -1,4 +1,10 @@
 {
+  "externalDependencies": {
+    "packages": ["highcharts", "highcharts-react-official"],
+    "optional": true,
+    "note": "This kit wraps Highcharts and does not ship it. The host app must already have these packages installed before using the kit. Agents must not install packages — tell the user if they are missing.",
+    "docs": "https://api.highcharts.com/highcharts/"
+  },
   "template": "<PbLineGraph{{props}} />",
   "externalImports": [
     "import { PbLineGraph } from 'playbook-ui/charts'"

data/app/pb_kits/playbook/pb_phone_number_input/docs/_playground.json

@@ -2,6 +2,7 @@
   "template": "<PhoneNumberInput{{props}} />",
   "propTargets": {},
   "defaults": {
+    "dark": false,
     "disabled": false,
     "error": "",
     "hiddenInputs": false,

data/app/pb_kits/playbook/pb_pill/docs/_pill_size.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("pill", props: { size: "sm", text: "Small" }) %>

data/app/pb_kits/playbook/pb_pill/docs/_pill_size.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import Pill from '../_pill'
+
+const PillSize = (props) => {
+  return (
+    <div>
+      <Pill
+          size="sm"
+          text="small"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default PillSize

data/app/pb_kits/playbook/pb_pill/docs/_pill_size.md

@@ -0,0 +1 @@
+Set pill size to small with `size: "sm"` / `size="sm"`.

data/app/pb_kits/playbook/pb_pill/docs/_playground.json

@@ -24,6 +24,7 @@
       "name": "Appearance",
       "props": [
         "variant",
+        "size",
         "textTransform"
       ]
     }
@@ -47,6 +48,16 @@
       },
       "children": ""
     },
+    {
+      "name": "Small",
+      "props": {
+        "text": "small",
+        "size": "sm",
+        "variant": "neutral",
+        "textTransform": "lowercase"
+      },
+      "children": ""
+    },
     {
       "name": "Preserve Casing",
       "props": {

data/app/pb_kits/playbook/pb_pill/docs/_playground.overrides.json

@@ -11,7 +11,7 @@
     },
     {
       "name": "Appearance",
-      "props": ["variant", "textTransform"]
+      "props": ["variant", "size", "textTransform"]
     }
   ],
   "presets": [
@@ -33,6 +33,16 @@
       },
       "children": ""
     },
+    {
+      "name": "Small",
+      "props": {
+        "text": "small",
+        "size": "sm",
+        "variant": "neutral",
+        "textTransform": "lowercase"
+      },
+      "children": ""
+    },
     {
       "name": "Preserve Casing",
       "props": {

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

@@ -3,6 +3,7 @@ examples:
   rails:
   - pill_default: Default
   - pill_variants: Variants
+  - pill_size: Size
   - pill_example: Example
  
   
@@ -10,6 +11,7 @@ examples:
   react:
   - pill_default: Default
   - pill_variants: Variants
+  - pill_size: Size
   - pill_example: Example
 
   swift:

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

@@ -1,3 +1,4 @@
 export { default as PillDefault } from './_pill_default.jsx'
 export { default as PillVariants } from './_pill_variants.jsx'
 export { default as PillExample } from './_pill_example.jsx'
+export { default as PillSize } from './_pill_size.jsx'

data/app/pb_kits/playbook/pb_progress_simple/docs/_playground.json

@@ -5,8 +5,8 @@
     "align": "left",
     "muted": false,
     "variant": "default",
-    "percent": "50",
-    "width": "100%"
+    "width": "100%",
+    "percent": "50"
   },
   "groups": [
     {

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_playground.json

@@ -127,6 +127,17 @@
       "type": "info"
     }
   },
+  "externalDependencies": {
+    "packages": [
+      "react-trix",
+      "trix",
+      "@tiptap/react",
+      "@tiptap/starter-kit",
+      "@tiptap/extension-link"
+    ],
+    "optional": true,
+    "note": "Default React editor uses Trix (pass TrixEditor from react-trix). Advanced editor uses TipTap. The host app must already have the needed packages installed. Agents must not install packages — tell the user if they are missing. Rails advanced TipTap may load via the kit’s esm.sh script."
+  },
   "structureModes": {
     "default": "advanced",
     "modes": {

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_playground.overrides.json

@@ -1,4 +1,15 @@
 {
+  "externalDependencies": {
+    "packages": [
+      "react-trix",
+      "trix",
+      "@tiptap/react",
+      "@tiptap/starter-kit",
+      "@tiptap/extension-link"
+    ],
+    "optional": true,
+    "note": "Default React editor uses Trix (pass TrixEditor from react-trix). Advanced editor uses TipTap. The host app must already have the needed packages installed. Agents must not install packages — tell the user if they are missing. Rails advanced TipTap may load via the kit’s esm.sh script."
+  },
   "structureModes": {
     "default": "advanced",
     "modes": {

data/app/pb_kits/playbook/pb_section_separator/docs/_playground.json

@@ -3,6 +3,7 @@
   "propTargets": {},
   "defaults": {
     "color": "default",
+    "dark": false,
     "lineStyle": "solid",
     "orientation": "horizontal",
     "variant": "card"

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_playground.json

@@ -2,12 +2,13 @@
   "template": "<SkeletonLoading{{props}} />",
   "propTargets": {},
   "defaults": {
-    "stack": 1,
-    "color": "default",
+    "height": "16px",
+    "width": "100%",
     "borderRadius": "sm",
     "gap": "xxs",
-    "height": "16px",
-    "width": "100%"
+    "stack": 1,
+    "color": "default",
+    "dark": false
   },
   "groups": [
     {

data/app/pb_kits/playbook/pb_time_picker/docs/_playground.json

@@ -2,6 +2,7 @@
   "template": "<TimePicker{{props}} />",
   "propTargets": {},
   "defaults": {
+    "dark": false,
     "disabled": false,
     "label": "Time Picker",
     "required": false,

data/app/pb_kits/playbook/pb_time_range_inline/docs/_playground.json

@@ -4,6 +4,7 @@
   "defaults": {
     "alignment": "left",
     "size": "sm",
+    "dark": false,
     "icon": false,
     "timezone": false
   },

data/app/pb_kits/playbook/pb_timestamp/docs/_playground.json

@@ -3,6 +3,7 @@
   "propTargets": {},
   "defaults": {
     "align": "left",
+    "dark": false,
     "timezone": "America/New_York",
     "showCurrentYear": false,
     "showDate": true,

data/app/pb_kits/playbook/pb_typeahead/docs/_playground.json

@@ -7,6 +7,8 @@
     "disabled": false,
     "error": "",
     "inputDisplay": "pills",
+    "marginBottom": "sm",
+    "pillColor": "primary",
     "required": false,
     "requiredIndicator": false,
     "clearOnContextChange": true,

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

@@ -10,6 +10,7 @@
 <%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", default_options: [options.first], options: options, label: "Products", name: :foo, pills: true }) %>
 
 <%= pb_rails("button", props: {id: "clear-pills", text: "Clear All Options", variant: "secondary"}) %>
+<%= pb_rails("button", props: {id: "set-pills", text: "Restore Default Options", variant: "secondary"}) %>
 
 <!-- This section is an example of the available JavaScript event hooks -->
 <%= javascript_tag defer: "defer" do %>
@@ -28,4 +29,10 @@
   document.querySelector('#clear-pills').addEventListener('click', function() {
     document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:clear'))
   })
+
+  document.querySelector('#set-pills').addEventListener('click', function() {
+    document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:set', {
+      detail: [{ label: 'Windows', value: '#FFA500' }]
+    }))
+  })
 <% end %>

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

@@ -8,6 +8,8 @@ You can also pass `default_options` which will populate the initial pill selecti
 
 `default_options: [{ label: 'Windows', value: '#FFA500' }]`
 
+When present, the kit root gets `data-default-value` (JSON of `{ label, value }` only) for restore-after-clear via `:set`. Extra option fields are omitted; if serialization fails, the attribute is left off so the kit still mounts.
+
 #### Rails: Subscribing to JS Events
 
 JavaScript events are triggered based on actions you take within the kit such as selection, removal and clearing.
@@ -21,4 +23,12 @@ This kit utilizes a default `id` prop named `react-select-input`. It is **highly
 
 The same rule regarding the `id` prop applies to publishing JS events. The examples below will use the unique `id` prop named `typeahead-pills-example1`:
 
-`pb-typeahead-kit-typeahead-pills-example1:clear` event to clear all options.
+`pb-typeahead-kit-typeahead-pills-example1:clear` event to clear all options.
+
+`pb-typeahead-kit-typeahead-pills-example1:set` event to set options without treating it as a user click (no `result-option-select`). Pass `detail` as `[{ label, value }, ...]` (or a single object for single-select):
+
+```js
+document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:set', {
+  detail: [{ label: 'Windows', value: '#FFA500' }]
+}))
+```

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.11.0.pre.alpha.play3070timezoneformats17921
+  version: 16.11.0.pre.alpha.testkey2
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-07-24 00:00:00.000000000 Z
+date: 2026-07-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -78,6 +78,8 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_width.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_width.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_width_rails.html.erb
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_width_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_custom.jsx
@@ -134,8 +136,12 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_both.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_both_rails.html.erb
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_both_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_both_react.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_bottom.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_bottom_rails.html.erb
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_bottom_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_bottom_react.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_rails.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_rails.md
@@ -2072,6 +2078,9 @@ files:
 - app/pb_kits/playbook/pb_pill/docs/_pill_example.jsx
 - app/pb_kits/playbook/pb_pill/docs/_pill_example.md
 - app/pb_kits/playbook/pb_pill/docs/_pill_props_swift.md
+- app/pb_kits/playbook/pb_pill/docs/_pill_size.html.erb
+- app/pb_kits/playbook/pb_pill/docs/_pill_size.jsx
+- app/pb_kits/playbook/pb_pill/docs/_pill_size.md
 - app/pb_kits/playbook/pb_pill/docs/_pill_variants.html.erb
 - app/pb_kits/playbook/pb_pill/docs/_pill_variants.jsx
 - app/pb_kits/playbook/pb_pill/docs/_pill_variants_swift.md