playbook_ui_docs 14.17.0.pre.alpha.PLAY1823maskedsanitizedtextinput7271 → 14.17.0.pre.alpha.PLAY1967bracketlayoutphase27198

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.17.0.pre.alpha.PLAY1823maskedsanitizedtextinput7271
+  version: 14.17.0.pre.alpha.PLAY1967bracketlayoutphase27198
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-04-18 00:00:00.000000000 Z
+date: 2025-04-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -93,14 +93,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx
@@ -155,8 +147,6 @@ files:
 - app/pb_kits/playbook/pb_background/docs/_background_image.md
 - app/pb_kits/playbook/pb_background/docs/_background_light.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_light.jsx
-- app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx
-- app/pb_kits/playbook/pb_background/docs/_background_overlay.md
 - app/pb_kits/playbook/pb_background/docs/_background_size.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_size.jsx
 - app/pb_kits/playbook/pb_background/docs/_background_size.md
@@ -1441,19 +1431,13 @@ files:
 - app/pb_kits/playbook/pb_online_status/docs/_online_status_size.jsx
 - app/pb_kits/playbook/pb_online_status/docs/example.yml
 - app/pb_kits/playbook/pb_online_status/docs/index.js
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_default.html.erb
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_default.jsx
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.html.erb
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.jsx
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_rails.md
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_react.md
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.html.erb
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.md
@@ -1966,13 +1950,9 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md
-- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_react.md
-- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx

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

@@ -1,58 +0,0 @@
-import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data.json"
-
-const AdvancedTableStickyColumns = (props) => {
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      id: "year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      id: "newEnrollments",
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-      id: "scheduledMeetings",
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-      id: "attendanceRate",
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-      id: "completedClasses",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-      id: "classCompletionRate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-      id: "graduatedStudents",
-    },
-  ]
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          responsive="none"
-          stickyLeftColumn={["year"]}
-          tableData={MOCK_DATA}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTableStickyColumns

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

@@ -1,6 +0,0 @@
-To render sticky columns for the Advanced Table, you can use the `stickyLeftColumn` prop. This prop expects an array of the column ids you want to be sticky.
-
-To achieve this:
-- Make sure to provide an id for each column via columnDefinitions as shown below. Id can be any string. 
-- One or multiple columns can be made sticky, it is recommended to set the ids within `stickyLeftColumn` in the order in which the columns are rendered.
-- It is recommended to set `responsive` to none when using `stickyLeftColumn` since responsive just makes the first column sticky and the slightly different styling for `responsive` and `stickyLeftColumn` may override each other in unexpected ways.

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

@@ -1,64 +0,0 @@
-import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data.json"
-
-const AdvancedTableStickyColumnsAndHeader = (props) => {
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      id: "year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      id: "newEnrollments",
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-      id: "scheduledMeetings",
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-      id: "attendanceRate",
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-      id: "completedClasses",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-      id: "classCompletionRate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-      id: "graduatedStudents",
-    },
-  ]
-
-  const tableProps = {
-    sticky: true
-  }
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          maxHeight="xs"
-          responsive="none"
-          stickyLeftColumn={["year"]}
-          tableData={MOCK_DATA}
-          tableProps={tableProps}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTableStickyColumnsAndHeader

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

@@ -1,8 +0,0 @@
-To achieve a sticky header AND sticky columns together, in addition to the `stickyLeftColumn` logic outlined above, you can:
-
-- Set `sticky: true` via `tableProps`
-- Give the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. 
-
-**NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the column stickiness.
-
-Expand the table above to see this in action.

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

@@ -1,55 +0,0 @@
-import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data.json"
-
-const AdvancedTableStickyHeader = (props) => {
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      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",
-    },
-  ]
-
-  const tableProps = {
-    sticky: true
-  }
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          responsive="none"
-          tableData={MOCK_DATA}
-          tableProps={tableProps}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTableStickyHeader

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

@@ -1,3 +0,0 @@
-The `TableProps` prop can also be used to render a sticky header for the Advanced Table.
-
-This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "Sticky Header for Responsive Table" doc example below.

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

@@ -1,33 +0,0 @@
-<% column_definitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      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",
-    }
-] %>
-
-<%= pb_rails("advanced_table", props: { id: "sticky_header_table", table_data: @table_data, column_definitions: column_definitions, responsive: "none", table_props: { sticky: true }}) %>

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

@@ -1,3 +0,0 @@
-The `table_props` prop can also be used to render a sticky header for the Advanced Table.
-
-This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "[Sticky Header for Responsive Table](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header-for-responsive-table)" doc example below.

data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import Background from "../../pb_background/_background"
-import Flex from "../../pb_flex/_flex"
-import FlexItem from "../../pb_flex/_flex_item"
-import Title from "../../pb_title/_title"
-
-const BackgroundOverlay = (props) => {
-  return (
-    <Background
-        alt="colorful background"
-        backgroundColor="category_21"
-        className="background lazyload"
-        imageOverlay="opacity_2"
-        imageUrl="https://unsplash.it/500/400/?image=633"
-        {...props}
-      >
-        <Flex
-            orientation="column"
-            vertical="center"
-            {...props}
-        >
-          <FlexItem>
-            <Title
-                dark
-                padding="lg"
-                size={1}
-                text="Background Kit Image"
-            />
-          </FlexItem>
-        </Flex>
-      </Background>
-  )
-}
-
-export default BackgroundOverlay

data/app/pb_kits/playbook/pb_background/docs/_background_overlay.md

@@ -1 +0,0 @@
-An overlay can be added to the background image by setting the `imageOverlay` prop and adding a `backgroundColor`. The `imageOverlay` prop can be set to any opacity ranging from `opacity_1` to `opacity_10`.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx

@@ -1,63 +0,0 @@
-import React from 'react'
-
-import Overlay from '../../pb_overlay/_overlay'
-import Image from '../../pb_image/_image'
-import Flex from '../../pb_flex/_flex'
-
-const OverlayColor = () => (
-    <Flex
-        justify="around"
-        wrap
-    >
-        <Overlay
-            color="black"
-            marginBottom="xxs"
-        >
-          <Image
-              alt="picture of a misty forest"
-              display="block"
-              size="xl"
-              url="https://unsplash.it/500/400/?image=634"
-          />
-        </Overlay>
-        <Overlay
-            color="black"
-            gradient={false}
-            marginBottom="xxs"
-            opacity="opacity_4"
-        >
-          <Image
-              alt="picture of a misty forest"
-              display="block"
-              size="xl"
-              url="https://unsplash.it/500/400/?image=634"
-          />
-        </Overlay>
-        <Overlay
-            color="error"
-            marginBottom="xxs"
-        >
-          <Image
-              alt="picture of a misty forest"
-              display="block"
-              size="xl"
-              url="https://unsplash.it/500/400/?image=634"
-          />
-        </Overlay>
-        <Overlay
-            color="error"
-            gradient={false}
-            marginBottom="xxs"
-            opacity="opacity_4"
-        >
-          <Image
-              alt="picture of a misty forest"
-              display="block"
-              size="xl"
-              url="https://unsplash.it/500/400/?image=634"
-          />
-        </Overlay>
-    </Flex>
-)
-
-export default OverlayColor

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md

@@ -1,3 +0,0 @@
-The `color` prop is used to change the color of the solid or gradient mask. Gradient overlays always start opaque and fade to transparent.
-
-NOTE: Images are set to `display: block` to remove the default inline spacing caused by line height. This ensures the image fully fills the container without unexpected gaps.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx

@@ -1,39 +0,0 @@
-import React from 'react'
-
-import Overlay from '../../pb_overlay/_overlay'
-import Image from '../../pb_image/_image'
-import Flex from '../../pb_flex/_flex'
-
-const OverlayGradientOpacity = () => (
-    <Flex
-        justify="around"
-        wrap
-    >
-        <Overlay
-            gradient={false}
-            marginBottom="xxs"
-            opacity="opacity_2"
-        >
-          <Image
-              alt="picture of a misty forest"
-              display="block"
-              maxWidth="100%"
-              url="https://unsplash.it/500/400/?image=634"
-          />
-        </Overlay>
-        <Overlay
-            gradient={false}
-            marginBottom="xxs"
-            opacity="opacity_8"
-        >
-          <Image
-              alt="picture of a misty forest"
-              display="block"
-              maxWidth="100%"
-              url="https://unsplash.it/500/400/?image=634"
-          />
-        </Overlay>
-    </Flex>
-)
-
-export default OverlayGradientOpacity

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md

@@ -1 +0,0 @@
-By default, the overlay is rendered as a gradient. Setting the `gradient` prop to `false` renders the overlay as a solid color. You can adjust the transparency of the solid overlay by using the `opacity` prop.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx

@@ -1,40 +0,0 @@
-import React from 'react'
-
-import Overlay from '../../pb_overlay/_overlay'
-import Table from '../../pb_table/_table'
-
-
-const TableExample = () => {
-    return (
-        <Table size="sm">
-            <thead>
-                <tr>
-                    <th>{'Column 1'}</th>
-                    <th>{'Column 2'}</th>
-                    <th>{'Column 3'}</th>
-                    <th>{'Column 4'}</th>
-                    <th>{'Column 5'}</th>
-                </tr>
-            </thead>
-            <tbody>
-                {Array.from({ length: 7 }, (_, index) => (
-                    <tr key={index}>
-                        {Array.from({ length: 5 }, (_, columnIndex) => (
-                            <td key={columnIndex}>{`Value ${columnIndex + 1}`}</td>
-                        ))}
-                    </tr>
-                ))}
-            </tbody>
-        </Table>
-    )
-}
-
-const OverlayLayout = () => (
-    <>
-        <Overlay layout={{ y: "xl" }}>
-            <TableExample />
-        </Overlay>
-    </>
-)
-
-export default OverlayLayout

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md

@@ -1,5 +0,0 @@
-The optional `layout` prop accepts the `position` and `size` of the overlay as a key:value pair.
-
-The `position` key accepts `bottom` (default), `top`, `y` (for both top and bottom) `right`, `left`, or `x` (for both left and right), which sets the side(s) where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
-
-The `size` value is `full` (100%) by default, but accepts our [spacing tokens](https://playbook.powerapp.cloud/visual_guidelines/spacing) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s).

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb

@@ -1,34 +0,0 @@
-<%= pb_rails("table", props: { size: "sm", header_style: "borderless" }) do %>
-    <thead>
-        <tr>
-            <th>Column 1</th>
-            <th>Column 2</th>
-            <th>Column 3</th>
-            <th>Column 4</th>
-            <th>Column 5</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr>
-            <td>Value 1</td>
-            <td>Value 2</td>
-            <td>Value 3</td>
-            <td>Value 4</td>
-            <td>Value 5</td>
-        </tr>
-        <tr>
-            <td>Value 1</td>
-            <td>Value 2</td>
-            <td>Value 3</td>
-            <td>Value 4</td>
-            <td>Value 5</td>
-        </tr>
-        <tr>
-            <td>Value 1</td>
-            <td>Value 2</td>
-            <td>Value 3</td>
-            <td>Value 4</td>
-            <td>Value 5</td>
-        </tr>
-    </tbody>
-<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md

@@ -1 +0,0 @@
-Customize your header by removing the header borders with the `header_style: "borderless"` prop.

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb

@@ -1,36 +0,0 @@
-<%= pb_rails("card", props: { background: "light" })  do %>
-    <%= pb_rails("table", props: { size: "sm", header_style: "floating" }) do %>
-        <%= pb_rails("table/table_head") do %>
-            <%= pb_rails("background", props: { background_color: "light", tag: "tr" }) do %>
-                <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
-                <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
-                <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
-                <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
-                <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>       
-            <% end %>
-        <% end %>
-        <%= pb_rails("table/table_body") do %>
-            <%= pb_rails("table/table_row") do %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-            <% end %>
-            <%= pb_rails("table/table_row") do %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-            <% end %>
-            <%= pb_rails("table/table_row") do %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-            <% end %>
-        <% end %>
-    <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md

@@ -1 +0,0 @@
-Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/rails#table-with-background-kit) logic to give your table header a custom background color. Use the `header_style: "floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `background_color` passed to Background kit should match the `background` or `background_color` for the element in which it is nested).