@hubspot/cms-component-library 0.3.1 → 0.3.3

package/components/componentLibrary/Accordion/AccordionItem/index.module.scss

@@ -18,3 +18,7 @@
 .accordionItem[open] :global(.accordionIconMinus) {
   display: block;
 }
+
+.accordionItem[open] :global(.accordionIconCaret) {
+  transform: rotate(180deg);
+}

package/components/componentLibrary/Accordion/AccordionTitle/ContentFields.tsx

@@ -18,6 +18,7 @@ const ContentFields = ({
         choices={[
           ['chevron', 'Chevron'],
           ['plus', 'Plus'],
+          ['caret', 'Caret'],
         ]}
         preset="expand_icon"
         required={false}

package/components/componentLibrary/Accordion/AccordionTitle/icons.tsx

@@ -57,3 +57,22 @@ export const MinusIcon = () => {
     </svg>
   );
 };
+
+export const CaretIcon = () => {
+  return (
+    <svg
+      className={cx(
+        styles.accordionIcon,
+        styles.accordionIconCaret,
+        'accordionIconCaret'
+      )}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      role="img"
+    >
+      <path d="M11.2445 16.5296C11.717 16.9121 12.4107 16.8859 12.8495 16.4471L17.6495 11.6471C17.9945 11.3021 18.0957 10.7884 17.9082 10.3384C17.7207 9.88836 17.2857 9.59961 16.802 9.59961H7.20195C6.7182 9.59961 6.27945 9.89211 6.09195 10.3421C5.90445 10.7921 6.00945 11.3059 6.35445 11.6471L11.1545 16.4471L11.2445 16.5296Z" />
+    </svg>
+  );
+};

package/components/componentLibrary/Accordion/AccordionTitle/index.module.scss

@@ -44,3 +44,7 @@
   height: 24px;
 }
 
+.accordionIconCaret {
+  width: 24px;
+  height: 24px;
+}

package/components/componentLibrary/Accordion/AccordionTitle/index.tsx

@@ -2,7 +2,7 @@ import styles from './index.module.scss';
 import ContentFields from './ContentFields.js';
 import cx from '../../utils/classname.js';
 import { AccordionTitleProps } from './types.js';
-import { ChevronIcon, PlusIcon, MinusIcon } from './icons.js';
+import { ChevronIcon, PlusIcon, MinusIcon, CaretIcon } from './icons.js';
 
 const AccordionTitleComponent = ({
   icon = 'chevron',
@@ -24,6 +24,8 @@ const AccordionTitleComponent = ({
       );
     }
 
+    if (icon === 'caret') return <CaretIcon />;
+
     return null;
   };
 

package/components/componentLibrary/Accordion/AccordionTitle/types.ts

@@ -1,4 +1,4 @@
-export type AccordionIconType = 'chevron' | 'plus';
+export type AccordionIconType = 'chevron' | 'plus' | 'caret';
 
 export type AccordionTitleProps = {
   icon?: AccordionIconType;

package/components/componentLibrary/Accordion/llm.txt

@@ -104,10 +104,10 @@ Accordion/
 **Props:**
 ```tsx
 {
-  icon?: 'chevron' | 'plus';       // Icon type (default: 'chevron')
-  className?: string;              // Additional CSS classes
-  style?: React.CSSProperties;     // Inline styles
-  children?: React.ReactNode;      // Title text content
+  icon?: 'chevron' | 'plus' | 'caret';  // Icon type (default: 'chevron')
+  className?: string;                   // Additional CSS classes
+  style?: React.CSSProperties;          // Inline styles
+  children?: React.ReactNode;           // Title text content
 }
 ```
 
@@ -243,7 +243,7 @@ Configurable props for title text and icon:
 
 **Fields:**
 - `title`: TextField for accordion title text
-- `icon`: ChoiceField for selecting icon type (chevron, plus)
+- `icon`: ChoiceField for selecting icon type (caret, chevron, plus)
 
 #### AccordionContent.ContentFields
 
@@ -397,6 +397,7 @@ The Accordion component uses CSS variables for theming and customization. Variab
 - `.accordionIconChevron`: Chevron-specific sizing (rotates 180° when open)
 - `.accordionIconPlus`: Plus icon (hidden when open)
 - `.accordionIconMinus`: Minus icon (shown when open)
+- `.accordionIconCaret`: Caret icon (rotates 180° when open)
 
 **AccordionContent (`AccordionContent/index.module.scss`):**
 - `.accordionContent`: Content area with padding and typography
@@ -420,7 +421,7 @@ The Accordion component follows accessibility best practices:
 
 ## Best Practices
 
-- **Choose appropriate icons**: Use `chevron` for subtle indication, `plus` for clearer expand/collapse semantics (common in FAQs)
+- **Choose appropriate icons**: Use `caret` for a compact filled triangle indicator, `chevron` for subtle indication, `plus` for clearer expand/collapse semantics (common in FAQs)
 - **Consistent variants**: Apply the same variant to all items within an accordion for visual consistency
 - **Gap selection**: Use any valid CSS length value (e.g., '8px', '16px', '24px', '48px') for spacing between items
 - **Dynamic rendering**: Always provide unique `key` props when mapping arrays to AccordionItems

package/components/componentLibrary/Accordion/stories/Accordion.stories.tsx

@@ -106,6 +106,27 @@ export const IconOptions: Story = {
           </AccordionItem>
         </Accordion>
       </SBContainer>
+
+      <SBContainer addBackground>
+        <h4>Caret Icon</h4>
+        <Accordion gap="16px">
+          <AccordionItem>
+            <AccordionTitle icon="caret">Caret Icon</AccordionTitle>
+            <AccordionContent>
+              <p>
+                The caret icon provides a simple visual cue for the expanded
+                state.
+              </p>
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem>
+            <AccordionTitle icon="caret">Another caret item</AccordionTitle>
+            <AccordionContent>
+              <p>This is just some caret cake.</p>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </SBContainer>
     </SBContainer>
   ),
 };

package/components/componentLibrary/Divider/StyleFields.tsx

@@ -1,25 +1,83 @@
-import { ChoiceField } from '@hubspot/cms-components/fields';
+import {
+  AlignmentField,
+  ChoiceField,
+  ColorField,
+  NumberField,
+} from '@hubspot/cms-components/fields';
 import { StyleFieldsProps } from './types.js';
 
 const StyleFields = ({
-  borderStyleLabel = 'Border style',
+  hideFields = [],
+  borderStyleLabel = 'Line type',
   borderStyleName = 'borderStyle',
   borderStyleDefault = 'solid',
+  thicknessLabel = 'Line thickness',
+  thicknessName = 'thickness',
+  thicknessDefault = 1,
+  lengthLabel = 'Line length',
+  lengthName = 'length',
+  lengthDefault = 100,
+  alignmentLabel = 'Line alignment',
+  alignmentName = 'alignment',
+  alignmentDefault = { horizontal_align: 'CENTER', vertical_align: 'MIDDLE' },
+  alignmentDirection = 'HORIZONTAL',
+  colorLabel = 'Line color',
+  colorName = 'color',
+  colorDefault = { color: '#000000', opacity: 100 },
 }: StyleFieldsProps) => {
   return (
     <>
-      <ChoiceField
-        label={borderStyleLabel}
-        name={borderStyleName}
-        required={true}
-        choices={[
-          ['solid', 'Solid'],
-          ['dotted', 'Dotted'],
-          ['dashed', 'Dashed'],
-          ['double', 'Double'],
-        ]}
-        default={borderStyleDefault}
-      />
+      {!hideFields.includes('borderStyle') && (
+        <ChoiceField
+          label={borderStyleLabel}
+          name={borderStyleName}
+          required={true}
+          choices={[
+            ['solid', 'Solid'],
+            ['dotted', 'Dotted'],
+            ['dashed', 'Dashed'],
+            ['double', 'Double'],
+          ]}
+          default={borderStyleDefault}
+        />
+      )}
+      {!hideFields.includes('color') && (
+        <ColorField
+          label={colorLabel}
+          name={colorName}
+          default={colorDefault}
+          showOpacity={false}
+        />
+      )}
+      {!hideFields.includes('thickness') && (
+        <NumberField
+          label={thicknessLabel}
+          name={thicknessName}
+          required={true}
+          suffix="px"
+          min={1}
+          default={thicknessDefault}
+        />
+      )}
+      {!hideFields.includes('length') && (
+        <NumberField
+          label={lengthLabel}
+          name={lengthName}
+          required={true}
+          suffix="%"
+          min={1}
+          max={100}
+          default={lengthDefault}
+        />
+      )}
+      {!hideFields.includes('alignment') && (
+        <AlignmentField
+          label={alignmentLabel}
+          name={alignmentName}
+          alignmentDirection={alignmentDirection}
+          default={alignmentDefault}
+        />
+      )}
     </>
   );
 };

package/components/componentLibrary/Divider/index.tsx

@@ -1,30 +1,46 @@
 import styles from './index.module.scss';
 import cx from '../utils/classname.js';
 import type { CSSVariables } from '../utils/types.js';
-import { DividerAlignment, DividerProps } from './types.js';
-import ContentFields from './ContentFields.js';
+import { DividerOrientation, DividerProps } from './types.js';
 import StyleFields from './StyleFields.js';
 
-const getAlignmentCSSVar = (alignment: DividerAlignment) => {
-  switch (alignment) {
-    case 'start':
-      return `flex-${alignment}`;
-    case 'end':
-      return `flex-${alignment}`;
-    case 'center':
-      return alignment;
-    default:
-      return 'stretch';
+const getAlignmentCSSVar = (
+  alignment: DividerProps['alignment'],
+  orientation: DividerOrientation
+): string => {
+  if (!alignment) return 'stretch';
+
+  if (orientation === 'horizontal') {
+    switch (alignment.horizontal_align) {
+      case 'LEFT':
+        return 'flex-start';
+      case 'CENTER':
+        return 'center';
+      case 'RIGHT':
+        return 'flex-end';
+    }
+  } else {
+    switch (alignment.vertical_align) {
+      case 'TOP':
+        return 'flex-start';
+      case 'MIDDLE':
+        return 'center';
+      case 'BOTTOM':
+        return 'flex-end';
+    }
   }
+
+  return 'stretch';
 };
 
 const DividerComponent = ({
   orientation = 'horizontal',
-  alignment = 'stretch',
+  alignment,
   spacing,
   borderStyle = 'solid',
   length = 100,
   thickness = 1,
+  color,
   variant = 'primary', // !todo: not used atm but keeping for when we need to add variant system.
   className = '',
   style = {},
@@ -37,8 +53,9 @@ const DividerComponent = ({
   const combinedClasses = cx(defaultClasses, className);
 
   const cssVariables: CSSVariables = {
-    '--hscl-divider-alignment': getAlignmentCSSVar(alignment),
+    '--hscl-divider-alignment': getAlignmentCSSVar(alignment, orientation),
     '--hscl-divider-borderStyle': borderStyle,
+    '--hscl-divider-borderColor': color?.rgba ?? color?.color,
     [`--hscl-divider-margin${
       orientation === 'horizontal' ? 'Block' : 'Inline'
     }`]: spacing,
@@ -63,12 +80,10 @@ const DividerComponent = ({
 
 // Create compound component with proper typing
 type DividerComponentType = typeof DividerComponent & {
-  ContentFields: typeof ContentFields;
   StyleFields: typeof StyleFields;
 };
 
 const Divider = DividerComponent as DividerComponentType;
-Divider.ContentFields = ContentFields;
 Divider.StyleFields = StyleFields;
 
 export default Divider;

package/components/componentLibrary/Divider/llm.txt

@@ -9,7 +9,7 @@ import Divider from '@hubspot/cms-component-library/Divider';
 
 ## Purpose
 
-The Divider component provides a consistent way to create visual separators in HubSpot CMS projects. It renders semantic HTML elements (`<hr>` for horizontal, `<div role="separator">` for vertical) with flexible styling options. Developers should use this component when they need to visually separate content sections, whether between stacked content (horizontal) or side-by-side content (vertical). The component supports customizable border styles, thickness, length, alignment, and spacing through props and CSS variables.
+The Divider component provides a consistent way to create visual separators in HubSpot CMS projects. It renders semantic HTML elements (`<hr>` for horizontal, `<div role="separator">` for vertical) with flexible styling options. Developers should use this component when they need to visually separate content sections, whether between stacked content (horizontal) or side-by-side content (vertical). The component supports customizable line type, thickness, length, alignment, color, and spacing through props and CSS variables.
 
 ## Component Structure
 
@@ -17,7 +17,6 @@ The Divider component provides a consistent way to create visual separators in H
 Divider/
 ├── index.tsx                     # Main component with render logic
 ├── types.ts                      # TypeScript type definitions
-├── ContentFields.tsx             # HubSpot field definitions for content
 ├── StyleFields.tsx               # HubSpot field definitions for styling
 ├── index.module.scss             # CSS module with design tokens
 └── stories/
@@ -35,15 +34,19 @@ Divider/
 **Props:**
 ```tsx
 {
-  orientation?: 'horizontal' | 'vertical';               // Divider orientation (default: 'horizontal')
-  alignment?: 'stretch' | 'start' | 'center' | 'end';    // Alignment within parent container (default: 'stretch')
-  spacing?: string;                                      // Margin spacing in pixel format (e.g., '16px', '24px')
-  borderStyle?: 'solid' | 'dotted' | 'dashed' | 'double'; // Border line style (default: 'solid')
-  length?: number;                                       // Length as percentage (1-100) of available space (default: 100)
-  thickness?: number;                                    // Border thickness in pixels (default: 1)
-  variant?: 'primary' | 'secondary' | 'tertiary';        // Visual style variant (default: 'primary')
-  className?: string;                                    // Additional CSS classes
-  style?: React.CSSProperties;                           // Inline styles (including CSS variables)
+  orientation?: 'horizontal' | 'vertical';                     // Divider orientation (default: 'horizontal')
+  alignment?: {                                                 // Alignment within parent container
+    horizontal_align?: 'LEFT' | 'CENTER' | 'RIGHT';
+    vertical_align?: 'TOP' | 'MIDDLE' | 'BOTTOM';
+  };
+  spacing?: string;                                            // Margin spacing in pixel format (e.g., '16px', '24px')
+  borderStyle?: 'solid' | 'dotted' | 'dashed' | 'double';     // Border line style (default: 'solid')
+  length?: number;                                             // Length as percentage (1-100) of available space (default: 100)
+  thickness?: number;                                          // Border thickness in pixels (default: 1)
+  color?: { rgba?: string; color?: string; opacity?: number }; // Line color (from ColorField or rgba value)
+  variant?: 'primary' | 'secondary' | 'tertiary';             // Visual style variant (default: 'primary')
+  className?: string;                                          // Additional CSS classes
+  style?: React.CSSProperties;                                 // Inline styles (including CSS variables)
 }
 ```
 
@@ -52,10 +55,18 @@ Divider/
 - `orientation="vertical"`: Renders as `<div role="separator">` with left border
 
 **Alignment Behavior:**
-- `stretch` (default): Divider uses full available space
-- `start`: Aligns to the start of the container (left for horizontal, top for vertical)
-- `center`: Centers within the container
-- `end`: Aligns to the end of the container (right for horizontal, bottom for vertical)
+
+When no `alignment` is passed, the divider stretches to fill the available space (default).
+
+For horizontal dividers, use `horizontal_align`:
+- `'LEFT'`: Aligns to the left (`flex-start`)
+- `'CENTER'`: Centers within the container
+- `'RIGHT'`: Aligns to the right (`flex-end`)
+
+For vertical dividers, use `vertical_align`:
+- `'TOP'`: Aligns to the top (`flex-start`)
+- `'MIDDLE'`: Centers vertically
+- `'BOTTOM'`: Aligns to the bottom (`flex-end`)
 
 ## Usage Examples
 
@@ -64,7 +75,7 @@ Divider/
 ```tsx
 import Divider from '@hubspot/cms-component-library/Divider';
 
-// Default horizontal divider
+// Default horizontal divider (full width, stretch)
 <Divider />
 ```
 
@@ -78,66 +89,41 @@ import Divider from '@hubspot/cms-component-library/Divider';
 ### Horizontal Divider with Custom Spacing
 
 ```tsx
-// Divider with more spacing above and below
-<Divider
-  orientation="horizontal"
-  spacing="32px"
-/>
+<Divider spacing="32px" />
 ```
 
-### Vertical Divider with Custom Height
+### Short Centered Divider
 
 ```tsx
-// Vertical divider at 80% height
-<Divider
-  orientation="vertical"
-  length={80}
-  alignment="center"
-/>
+<Divider length={50} alignment={{ horizontal_align: 'CENTER' }} spacing="16px" />
 ```
 
-### Customized Divider with Dashed Style
+### Customized Divider
 
 ```tsx
 <Divider
-  orientation="horizontal"
   borderStyle="dashed"
   thickness={2}
   length={75}
-  alignment="center"
+  alignment={{ horizontal_align: 'CENTER' }}
   spacing="24px"
 />
 ```
 
-### Thick Divider for Emphasis
-
-```tsx
-<Divider
-  orientation="horizontal"
-  thickness={4}
-  borderStyle="solid"
-/>
-```
-
-### Dotted Divider
+### Colored Divider
 
 ```tsx
-<Divider
-  orientation="horizontal"
-  borderStyle="dotted"
-  thickness={2}
-/>
+// color.rgba is populated by the ColorField in a module context
+<Divider color={{ rgba: 'rgba(59, 130, 246, 1)' }} thickness={2} />
 ```
 
-### Short Centered Divider
+### Vertical Divider with Alignment
 
 ```tsx
-// Decorative short divider, centered
 <Divider
-  orientation="horizontal"
+  orientation="vertical"
   length={50}
-  alignment="center"
-  spacing="16px"
+  alignment={{ vertical_align: 'MIDDLE' }}
 />
 ```
 
@@ -158,51 +144,53 @@ import Divider from '@hubspot/cms-component-library/Divider';
 
 ### Field Definitions
 
-The Divider component provides field definitions for easy integration with HubSpot CMS modules.
+All Divider fields are style fields. The Divider component exposes only `StyleFields` — there are no content fields.
 
-#### ContentFields
+#### StyleFields
 
-Configurable props for divider appearance:
+All configurable style props for the divider:
 
 ```tsx
-<Divider.ContentFields
-  orientationLabel="Divider Orientation"
-  orientationName="orientation"
-  orientationDefault="horizontal"
-  alignmentLabel="Divider Alignment"
-  alignmentName="alignment"
-  alignmentDefault="stretch"
-  lengthLabel="Divider Length"
-  lengthName="length"
-  lengthDefault={100}
-  thicknessLabel="Divider Thickness"
+<Divider.StyleFields
+  borderStyleLabel="Line type"
+  borderStyleName="borderStyle"
+  borderStyleDefault="solid"
+  thicknessLabel="Line thickness"
   thicknessName="thickness"
   thicknessDefault={1}
+  lengthLabel="Line length"
+  lengthName="length"
+  lengthDefault={100}
+  alignmentLabel="Line alignment"
+  alignmentName="alignment"
+  alignmentDefault={{ horizontal_align: 'CENTER', vertical_align: 'MIDDLE' }}
+  alignmentDirection="HORIZONTAL"
+  colorLabel="Line color"
+  colorName="color"
+  colorDefault={{ color: '#000000', opacity: 100 }}
 />
 ```
 
 **Fields:**
-- `orientation`: ChoiceField for selecting horizontal or vertical orientation
-- `alignment`: ChoiceField for alignment (stretch, start, center, end)
-- `length`: NumberField for length percentage (1-100)
-- `thickness`: NumberField for thickness in pixels (minimum: 1)
+- `borderStyle`: ChoiceField for line type (solid, dotted, dashed, double)
+- `thickness`: NumberField for thickness in pixels (minimum: 1, suffix: px)
+- `length`: NumberField for length as a percentage (1–100, suffix: %)
+- `alignment`: AlignmentField for alignment within the container
+- `color`: ColorField for line color (opacity hidden — color only)
 
-#### StyleFields
+**Developer-only props (not user-facing):**
+- `alignmentDirection`: Controls whether the AlignmentField shows horizontal or vertical options. Accepts `'HORIZONTAL'` (default) or `'VERTICAL'`. Set this based on how the divider will be used — developers consuming the component set this, not end users.
+- `hideFields`: An array of field names to opt out of rendering. All fields are shown by default (opt-out). Accepts an array of `StyleFieldName` values: `'borderStyle' | 'color' | 'thickness' | 'length' | 'alignment'`.
 
-Configurable props for divider border style:
+**Hiding fields example:**
 
 ```tsx
-<Divider.StyleFields
-  borderStyleLabel="Border Style"
-  borderStyleName="borderStyle"
-  borderStyleDefault="solid"
-/>
+<FieldGroup label="Style" name="style" tab="STYLE">
+  <Divider.StyleFields hideFields={['alignment', 'length']} />
+</FieldGroup>
 ```
 
-**Fields:**
-- `borderStyle`: ChoiceField for selecting border style (solid, dotted, dashed, double)
-
-**Note:** The `spacing` prop must be set directly on the Divider component, as there is no field definition for it in StyleFields or ContentFields.
+**Note:** The `orientation` and `spacing` props must be set directly on the Divider component — there are no field definitions for them.
 
 ### Module Usage Example
 
@@ -210,13 +198,15 @@ Configurable props for divider border style:
 import Divider from '@hubspot/cms-component-library/Divider';
 
 export default function SectionDividerModule({ fieldValues }) {
+  const { borderStyle, thickness, length, alignment, color } = fieldValues.style;
+
   return (
     <Divider
-      orientation={fieldValues.orientation}
-      alignment={fieldValues.alignment}
-      borderStyle={fieldValues.borderStyle}
-      length={fieldValues.length}
-      thickness={fieldValues.thickness}
+      borderStyle={borderStyle}
+      thickness={thickness}
+      length={length}
+      alignment={alignment}
+      color={color}
       spacing="24px"
     />
   );
@@ -231,7 +221,6 @@ import Divider from '@hubspot/cms-component-library/Divider';
 
 export const fields = (
   <ModuleFields>
-    <Divider.ContentFields />
     <FieldGroup label="Style" name="style" tab="STYLE">
       <Divider.StyleFields />
     </FieldGroup>
@@ -239,24 +228,28 @@ export const fields = (
 );
 ```
 
+For a vertical divider module, pass `alignmentDirection` to expose vertical alignment options:
+
+```tsx
+<FieldGroup label="Style" name="style" tab="STYLE">
+  <Divider.StyleFields alignmentDirection="VERTICAL" />
+</FieldGroup>
+```
+
 ## Styling
 
 ### CSS Variables
 
 The Divider component uses CSS variables for theming and customization:
 
-**Base Styles:**
 - `--hscl-divider-borderColor`: Border color (default: currentColor)
 - `--hscl-divider-borderStyle`: Border style (default: solid)
-- `--hscl-divider-length`: Length as percentage (default: 100%)
-- `--hscl-divider-thickness`: Border thickness as pixel value (default: 1px)
+- `--hscl-divider-borderWidth`: Border thickness as pixel value (default: 1px)
 - `--hscl-divider-alignment`: Flex alignment value (default: stretch)
-
-**Spacing:**
-- `--hscl-divider-spacing`: Spacing around the divider
-  - Horizontal: Applied as `margin-block` (top and bottom)
-  - Vertical: Applied as `margin-inline` (left and right)
-
+- `--hscl-divider-width`: Width for horizontal dividers (default: 100%)
+- `--hscl-divider-height`: Height for vertical dividers (default: 100%)
+- `--hscl-divider-marginBlock`: Top/bottom margin for horizontal dividers (default: 16px)
+- `--hscl-divider-marginInline`: Left/right margin for vertical dividers (default: 16px)
 
 ## Accessibility
 
@@ -266,7 +259,6 @@ The Divider component follows accessibility best practices:
   - Horizontal: Uses native `<hr>` element, recognized by screen readers as thematic break
   - Vertical: Uses `<div role="separator">` for proper ARIA semantics
 - **Keyboard Navigation**: Does not interfere with keyboard navigation as it's non-interactive
-- **Visual Separation**: Provides clear visual boundaries between content sections
 - **Screen Reader Support**: Properly announced by assistive technologies as content separators
 
 ## Best Practices
@@ -275,16 +267,18 @@ The Divider component follows accessibility best practices:
   - Use `horizontal` for separating stacked content sections (most common)
   - Use `vertical` for separating side-by-side content within a Flex or Grid layout
 - **Alignment considerations**:
-  - Use `stretch` (default) for full-width/height separators
-  - Use `center` for decorative short dividers
-  - Use `start` or `end` for aligned content sections
+  - Omit `alignment` for full-width/height stretch behavior (default)
+  - Use `{ horizontal_align: 'CENTER' }` for decorative short horizontal dividers
+  - Use `{ vertical_align: 'MIDDLE' }` for centered vertical dividers
+  - Set `alignmentDirection` on `StyleFields` to match the intended orientation so users see the right alignment options
 - **Spacing guidelines**:
   - Use `spacing` prop to control margin around the divider
   - For horizontal dividers, spacing controls top/bottom margin
   - For vertical dividers, spacing controls left/right margin
-- **Length as percentage**: The `length` prop accepts 1-100 as a percentage, not pixel values
-- **Thickness control**: Use the `thickness` prop for border thickness (in pixels)
-- **Border styles**: Choose appropriate border style for visual hierarchy:
+- **Length as percentage**: The `length` prop accepts 1–100 as a percentage, not pixel values
+- **Thickness control**: Use the `thickness` prop for border thickness (in pixels). Double border style requires at least 3px
+- **Color**: The `color` prop is populated from the `ColorField` in a module context. In non-module usage, pass `{ rgba: 'rgba(...)' }` directly
+- **Line type**: Choose appropriate border style for visual hierarchy:
   - `solid`: Default, clear separation
   - `dashed`: Less prominent, informal
   - `dotted`: Subtle, minimal separation