BrickspaceLab · thomaskimura · Feb 26, 2026
diff --git a/slab/blocks/_avatar-image.md b/slab/blocks/_avatar-image.md
@@ -1,30 +1,48 @@
 # Avatar image
 
-## Block limitations
-
-This is a private block and can only be used within specific parent blocks. It is designed to work exclusively within the [Avatars](avatars.md) block.
 
 ## Overview
 
-A styled avatar component that creates a circular container for content blocks, primarily designed for displaying profile images or avatars. The component features a circular border and supports responsive visibility options.
+A styled avatar component that creates a circular container for displaying profile images or avatars. The component features customizable sizing, color scheme support, and responsive visibility options.
+
+
+## Block limitations
+
+This is a private block. It is intended for use only within specific parent blocks and should not be added directly to sections.
+
 
 ## Common use cases
 
-- Best used for profile pictures, user avatars, or circular image elements
-- Consider the context where avatars will be displayed when selecting size
-- Use the visibility options to create different avatar arrangements on mobile vs desktop
+- Best used for displaying profile pictures, user avatars, or circular image elements within an avatars layout.
 
-## Child blocks
 
-This block includes the following nested blocks:
+## Compatible blocks
+
+The following blocks can be nested within this block:
 
 - Image block
 
+
 ## Block settings
 
+### Style
+
+| Setting | Description | Options |
+|---------|-------------|---------|
+| Size | Size of the avatar | &bull; Small (default)<br>&bull; Medium<br>&bull; Large |
+
+### Color
+
 | Setting | Description | Options |
 |---------|-------------|---------|
-| Size | Size of the avatar | Small (default), Medium, Large |
-| Border color | Controls the border color | Body, Subtle, Strong, Primary, Secondary, Tertiary, None. Default: Body |
-| Visibility | Controls when the block is visible | All (default), Mobile only, Desktop only |
+| Type | Determines color configuration mode | &bull; Custom<br>&bull; Base (default) |
+| Scheme | Color scheme picker for custom mode | Color scheme picker |
+| Scheme | Color scheme for the block | &bull; Body (default)<br>&bull; Accent 1<br>&bull; Accent 2<br>&bull; Accent 3<br>&bull; Shade 1<br>&bull; Shade 2<br>&bull; Shade 3<br>&bull; Blur<br>&bull; Transparent |
+| Border | Border color for the block | &bull; Body foreground (default)<br>&bull; Subtle<br>&bull; Strong<br>&bull; None |
+| Enable inheritance | Inherits color settings from the parent block | Checkbox (default: false) |
+
+### Display
 
+| Setting | Description | Options |
+|---------|-------------|---------|
+| Visibility | Controls when the block is visible | &bull; All (default)<br>&bull; Mobile only<br>&bull; Desktop only |
diff --git a/slab/blocks/_g__cart-progress-tier.md b/slab/blocks/_g__cart-progress-tier.md
@@ -0,0 +1,26 @@
+# Progress tier
+
+
+## Overview
+
+A cart progress tier block that defines a threshold and label for cart progress indicators. Each tier represents a spending milestone that customers can work toward in the cart.
+
+
+## Block limitations
+
+This is a private block. It is intended for use only within specific parent blocks and should not be added directly to sections.
+
+
+## Common use cases
+
+- Use to define spending thresholds for free shipping, gift tiers, or other cart-based promotions.
+
+
+## Block settings
+
+### Content
+
+| Setting | Description | Options |
+|---------|-------------|---------|
+| Label | Text label displayed for this progress tier | Text input |
+| Minimum amount | The spending threshold for this tier in cents without currency formatting | Number input (default: 100) |
diff --git a/slab/blocks/_g__flex-item.md b/slab/blocks/_g__flex-item.md
@@ -1,44 +1,70 @@
 # Flex item
 
+
 ## Overview
 
-A flexible container item designed to be used within layout__flex.liquid for creating customizable layouts. Supports responsive width adjustments, alignment controls, and spacing options.
+A flexible container block that displays its content within a flex layout. It supports customizable width, spacing, sticky positioning, color schemes, scroll animations, and responsive visibility options.
+
 
 ## Block limitations
 
 This is a private block. It is intended for use only within specific parent blocks and should not be added directly to sections.
 
+
 ## Common use cases
 
-- Use with layout__flex.liquid to create flexible grid-like layouts
-- Configure visibility settings for responsive designs that differ between mobile and desktop
-- Adjust gap size to maintain consistent spacing between nested elements
-- Set custom widths for mobile and desktop views
-- Use sticky positioning for elements that should remain visible while scrolling
+- Use as a child of a flex layout to create responsive multi-column arrangements with independently sized and styled content areas.
 
-## Child blocks
 
-This block includes the following nested blocks:
+## Compatible blocks
+
+The following blocks can be nested within this block:
+
+- Any theme block
+- Any app block
 
-- All theme blocks
-- App blocks
 
 ## Block settings
 
+### Spacing
+
 | Setting | Description | Options |
 |---------|-------------|---------|
-| Enable padding | Adds padding around the flex item content | Checkbox (default: false) |
-| Enable vertical spacing | Adds vertical padding (top and bottom) | Checkbox (default: true) |
-| Gap size | Controls spacing between child blocks | None, Default (default), XS, SM, MD, LG, XL |
-| Color scheme | Controls the background and text colors | Body, Neutral, Accent 1, Accent 2, Accent 3, Shade 1, Shade 2, Shade 3, Primary, Secondary, Tertiary, Blur, Transparent (default) |
-| Color border | Controls the border color | Body, Subtle (default), Strong, Primary, Secondary, Tertiary, None. Visible when border position is not blank |
-| Border position | Controls where borders appear | None (default), Top, Bottom, Left, Right, Top and bottom, Left and right, All |
-| Width mobile | Width of the flex item on mobile devices | 5 - 100 % (default: 80). Visible when enable width fill and enable default width are false |
-| Width desktop | Width of the flex item on desktop devices | 5 - 100 % (default: 40). Visible when enable width fill and enable default width are false |
-| Enable width fill | Makes the flex item grow to fill available space | Checkbox (default: false) |
-| Enable default width | Uses automatic width sizing | Checkbox (default: false) |
-| Enable sticky layout | Enables sticky positioning | Checkbox (default: false) |
-| Sticky position | Position for sticky element | None, Top, Bottom. Visible when enable sticky layout is true |
-| Vertical alignment | Controls vertical alignment of content | Top, Middle, Bottom (default) |
-| Visibility | Controls when the block is visible | All (default), Mobile only, Desktop only |
+| Enable padding | Adds internal padding to the block | Checkbox (default: false) |
+| Enable vertical spacing | Adds vertical spacing around the block | Checkbox (default: true) |
+| Gap size | Spacing between child elements | &bull; None<br>&bull; Default (default)<br>&bull; Extra small<br>&bull; Small<br>&bull; Medium<br>&bull; Large<br>&bull; Extra large |
+
+### Color
+
+| Setting | Description | Options |
+|---------|-------------|---------|
+| Type | Determines color configuration mode | &bull; Custom<br>&bull; Base (default) |
+| Scheme | Color scheme picker for custom mode | Color scheme picker |
+| Scheme | Color scheme for the block | &bull; Body<br>&bull; Accent 1<br>&bull; Accent 2<br>&bull; Accent 3<br>&bull; Shade 1<br>&bull; Shade 2<br>&bull; Shade 3<br>&bull; Blur<br>&bull; Transparent (default) |
+| Border | Border color for the block | &bull; Body foreground<br>&bull; Subtle (default)<br>&bull; Strong<br>&bull; None |
+| Enable inheritance | Inherits color settings from the parent block | Checkbox (default: false) |
+
+### Style
 
+| Setting | Description | Options |
+|---------|-------------|---------|
+| Border position | Position of the border on the block | &bull; None (default)<br>&bull; Top<br>&bull; Bottom<br>&bull; Left<br>&bull; Right<br>&bull; Top & bottom<br>&bull; Left & right<br>&bull; All |
+
+### Layout
+
+| Setting | Description | Options |
+|---------|-------------|---------|
+| Mobile width | Width of the block on mobile devices | 5 – 100% (default: 80) |
+| Desktop width | Width of the block on desktop devices | 5 – 100% (default: 40) |
+| Enable width fill | Allows the block to fill available space in the flex container | Checkbox (default: false) |
+| Enable default width | Uses the parent container's default width setting | Checkbox (default: false) |
+| Enable sticky layout | Makes the block sticky when scrolling | Checkbox (default: false) |
+| Sticky position | Position where the block sticks when scrolling | &bull; None (default)<br>&bull; Top<br>&bull; Bottom |
+| Vertical alignment | Vertical alignment of child content | &bull; Top<br>&bull; Middle<br>&bull; Bottom (default) |
+
+### Display
+
+| Setting | Description | Options |
+|---------|-------------|---------|
+| Visibility | Controls when the block is visible | &bull; All (default)<br>&bull; Mobile only<br>&bull; Desktop only |
+| Scroll animation | Animation applied to the block on scroll | &bull; None (default)<br>&bull; Fade<br>&bull; Slide up<br>&bull; Slide down<br>&bull; Slide left<br>&bull; Slide right<br>&bull; Zoom |
diff --git a/slab/blocks/_g__grid-item.md b/slab/blocks/_g__grid-item.md
@@ -1,39 +1,64 @@
 # Grid item
 
+
 ## Overview
 
-A block that conditionally displays its content based on a pagination index. Works with grid components to show content for specific pagination states.
+A grid container block that displays its content within a CSS grid layout. It supports configurable row and column spans, padding, color schemes, border options, and responsive visibility settings.
+
 
 ## Block limitations
 
 This is a private block. It is intended for use only within specific parent blocks and should not be added directly to sections.
 
+
 ## Common use cases
 
-- Set unique index values for each paginate content block
-- Use with blocks/grid__content for fully functional pagination
-- Ensure gap sizes match between pagination components for visual consistency
-- Configure column and row spans to create complex grid layouts
-- Use color schemes and borders to visually distinguish grid items
+- Use as a child of a grid layout to create multi-column and multi-row content arrangements with independently styled grid cells.
 
-## Child blocks
 
-This block includes the following nested blocks:
+## Compatible blocks
+
+The following blocks can be nested within this block:
+
+- Any theme block
+- Any app block
 
-- All theme blocks
-- App blocks
 
 ## Block settings
 
+### Spacing
+
 | Setting | Description | Options |
 |---------|-------------|---------|
-| Enable padding | Adds padding around the grid item content | Checkbox (default: true) |
-| Gap size | Controls spacing between child blocks | None, Default (default), XS, SM, MD, LG, XL |
-| Color scheme | Controls the background and text colors | Body, Neutral, Accent 1 (default), Accent 2, Accent 3, Shade 1, Shade 2, Shade 3, Primary, Secondary, Tertiary, Blur, Transparent |
-| Color border | Controls the border color | Body, Subtle (default), Strong, Primary, Secondary, Tertiary, None. Visible when border position is not blank |
-| Border position | Controls where borders appear | None (default), Top, Bottom, Left, Right, Top and bottom, Left and right, All |
-| Vertical alignment | Controls vertical alignment of content | Top (default), Middle, Bottom |
-| Row span | Number of rows the grid item spans | 1 (default), 2, 3, 4, 5, 6 |
-| Column span | Number of columns the grid item spans on desktop | 1, 2 (default), 3, 4, 5, 6 |
-| Visibility | Controls when the block is visible | All (default), Mobile only, Desktop only |
+| Enable padding | Adds internal padding to the block | Checkbox (default: true) |
+| Gap size | Spacing between child elements | &bull; None<br>&bull; Default (default)<br>&bull; Extra small<br>&bull; Small<br>&bull; Medium<br>&bull; Large<br>&bull; Extra large |
+
+### Color
+
+| Setting | Description | Options |
+|---------|-------------|---------|
+| Type | Determines color configuration mode | &bull; Custom<br>&bull; Base (default) |
+| Scheme | Color scheme picker for custom mode | Color scheme picker |
+| Scheme | Color scheme for the block | &bull; Body<br>&bull; Accent 1 (default)<br>&bull; Accent 2<br>&bull; Accent 3<br>&bull; Shade 1<br>&bull; Shade 2<br>&bull; Shade 3<br>&bull; Blur<br>&bull; Transparent |
+| Border | Border color for the block | &bull; Body foreground<br>&bull; Subtle (default)<br>&bull; Strong<br>&bull; None |
+| Enable inheritance | Inherits color settings from the parent block | Checkbox (default: false) |
+
+### Style
 
+| Setting | Description | Options |
+|---------|-------------|---------|
+| Border position | Position of the border on the block | &bull; None (default)<br>&bull; Top<br>&bull; Bottom<br>&bull; Left<br>&bull; Right<br>&bull; Top & bottom<br>&bull; Left & right<br>&bull; All |
+
+### Layout
+
+| Setting | Description | Options |
+|---------|-------------|---------|
+| Vertical alignment | Vertical alignment of child content | &bull; Top (default)<br>&bull; Middle<br>&bull; Bottom |
+| Row span | Number of grid rows this block spans | &bull; 1 (default)<br>&bull; 2<br>&bull; 3<br>&bull; 4<br>&bull; 5<br>&bull; 6 |
+| Column span | Number of grid columns this block spans | &bull; 1<br>&bull; 2 (default)<br>&bull; 3<br>&bull; 4<br>&bull; 5<br>&bull; 6 |
+
+### Display
+
+| Setting | Description | Options |
+|---------|-------------|---------|
+| Visibility | Controls when the block is visible | &bull; All (default)<br>&bull; Mobile only<br>&bull; Desktop only |
diff --git a/slab/blocks/_g__grid-paginateitem.md b/slab/blocks/_g__grid-paginateitem.md
@@ -1,38 +1,68 @@
 # Grid paginate item
 
-## Block limitations
-
-This is a private block and can only be used within specific parent blocks. It is designed to work exclusively within grid layout blocks that support pagination.
 
 ## Overview
 
-A block that conditionally displays its content based on a pagination index. Works with grid components to show content for specific pagination states.
+A grid container block that conditionally displays its content based on a pagination index. It works with grid components to show content for specific pagination states, supporting row and column spans, color schemes, and responsive visibility.
+
+
+## Block limitations
+
+This is a private block. It is intended for use only within specific parent blocks and should not be added directly to sections.
+
 
 ## Common use cases
 
-- Set unique index values for each paginate content block
-- Use with blocks/grid__content for fully functional pagination
-- Ensure gap sizes match between pagination components for visual consistency
+- Use within a paginated grid layout to display content that appears only at a specific pagination index.
 
-## Child blocks
 
-This block includes the following nested blocks:
+## Compatible blocks
+
+The following blocks can be nested within this block:
+
+- Any theme block
+- Any app block
 
-- All theme blocks
-- App blocks
 
 ## Block settings
 
 | Setting | Description | Options |
 |---------|-------------|---------|
-| Index | Pagination index this block corresponds to | Number (default: 6) |
-| Enable padding | Adds padding around the content | Checkbox (default: true) |
-| Gap size | Spacing between child blocks | None, Default (default), Xs, Sm, Md, Lg, Xl |
-| Color scheme | Controls the background color scheme | Body (default), Neutral, Accent 1, Accent 2, Accent 3, Shade 1, Shade 2, Shade 3, Primary, Secondary, Tertiary, Blur, Transparent |
-| Border color | Controls the border color | Body, Subtle (default), Strong, Primary, Secondary, Tertiary, None |
-| Border position | Controls which sides have borders | None (default), Top, Bottom, Left, Right, Top and bottom, Left and right, All |
-| Vertical alignment | Controls vertical alignment of content | Top, Middle, Bottom (default) |
-| Row span | Number of rows this item spans | 1 (default), 2, 3, 4, 5, 6 |
-| Column span | Number of columns this item spans | 1 (default), 2, 3, 4, 5, 6 |
-| Visibility | Controls when the block is visible | All (default), Mobile only, Desktop only |
+| Index | The pagination index at which this block becomes visible | Number input (default: 6) |
+
+### Spacing
+
+| Setting | Description | Options |
+|---------|-------------|---------|
+| Enable padding | Adds internal padding to the block | Checkbox (default: true) |
+| Gap size | Spacing between child elements | &bull; None<br>&bull; Default (default)<br>&bull; Extra small<br>&bull; Small<br>&bull; Medium<br>&bull; Large<br>&bull; Extra large |
+
+### Color
+
+| Setting | Description | Options |
+|---------|-------------|---------|
+| Type | Determines color configuration mode | &bull; Custom<br>&bull; Base (default) |
+| Scheme | Color scheme picker for custom mode | Color scheme picker |
+| Scheme | Color scheme for the block | &bull; Body (default)<br>&bull; Accent 1<br>&bull; Accent 2<br>&bull; Accent 3<br>&bull; Shade 1<br>&bull; Shade 2<br>&bull; Shade 3<br>&bull; Blur<br>&bull; Transparent |
+| Border | Border color for the block | &bull; Body foreground<br>&bull; Subtle (default)<br>&bull; Strong<br>&bull; None |
+| Enable inheritance | Inherits color settings from the parent block | Checkbox (default: false) |
+
+### Style
+
+| Setting | Description | Options |
+|---------|-------------|---------|
+| Border position | Position of the border on the block | &bull; None (default)<br>&bull; Top<br>&bull; Bottom<br>&bull; Left<br>&bull; Right<br>&bull; Top & bottom<br>&bull; Left & right<br>&bull; All |
 
+### Layout
+
+| Setting | Description | Options |
+|---------|-------------|---------|
+| Vertical alignment | Vertical alignment of child content | &bull; Top<br>&bull; Middle<br>&bull; Bottom (default) |
+| Row span | Number of grid rows this block spans | &bull; 1 (default)<br>&bull; 2<br>&bull; 3<br>&bull; 4<br>&bull; 5<br>&bull; 6 |
+| Column span | Number of grid columns this block spans | &bull; 1 (default)<br>&bull; 2<br>&bull; 3<br>&bull; 4<br>&bull; 5<br>&bull; 6 |
+
+### Display
+
+| Setting | Description | Options |
+|---------|-------------|---------|
+| Visibility | Controls when the block is visible | &bull; All (default)<br>&bull; Mobile only<br>&bull; Desktop only |