@hubspot/cms-component-library 0.3.10 → 0.3.12

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

@@ -1,9 +1,7 @@
 .accordionContent {
-  padding-block: var(--hscl-accordion-body-paddingBlock, 16px);
-  padding-inline: var(--hscl-accordion-body-paddingInline, 20px);
-  color: var(--hscl-accordion-body-color, inherit);
-  font-size: var(--hscl-accordion-body-fontSize, 16px);
-  line-height: var(--hscl-accordion-body-lineHeight, 1.5);
+  padding-block: 16px;
+  padding-inline: 20px;
+  color: inherit;
 
   :last-child {
     margin-block-end: 0;

package/components/componentLibrary/Accordion/AccordionItem/StyleFields.tsx

@@ -1,24 +1,16 @@
-import { ChoiceField } from '@hubspot/cms-components/fields';
+import { VariantSelectionField } from '@hubspot/cms-components/fields';
 import type { StyleFieldsProps } from './types.js';
 
 const StyleFields = ({
-  variantLabel = 'Variant',
-  variantName = 'variant',
-  variantDefault = 'variant1',
+  variantLabel = 'Accordion variant',
+  variantName = 'accordionVariant',
+  variantDefault = { variant_name: 'card1' },
 }: StyleFieldsProps) => {
   return (
-    <ChoiceField
+    <VariantSelectionField
       label={variantLabel}
       name={variantName}
-      helpText="The style variant for the accordion item"
-      display="select"
-      choices={[
-        ['variant1', 'Variant 1'],
-        ['variant2', 'Variant 2'],
-        ['variant3', 'Variant 3'],
-        ['variant4', 'Variant 4'],
-      ]}
-      required={false}
+      variantDefinitionName="card"
       default={variantDefault}
     />
   );

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

@@ -1,9 +1,11 @@
 .accordionItem {
-  border: var(--hscl-accordion-borderWidth, 1px) solid
-    var(--hscl-accordion-borderColor, #e0e0e0);
-  border-radius: var(--hscl-accordion-borderRadius, 4px);
-  background-color: var(--hscl-accordion-backgroundColor, transparent);
-  color: var(--hscl-accordion-color, inherit);
+  --hs-section-color: var(--hs-card-color);
+
+  border: var(--hs-card-borderWidth, 1px) solid
+    var(--hs-card-borderColor, #e0e0e0);
+  border-radius: var(--hs-card-borderRadius, 4px);
+  background-color: var(--hs-card-backgroundColor, transparent);
+  color: var(--hs-card-color, inherit);
   overflow: hidden;
 }
 

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

@@ -1,31 +1,22 @@
 import styles from './index.module.scss';
 import StyleFields from './StyleFields.js';
 import cx from '../../utils/classname.js';
-import { mapVariantToCssVars } from '../../utils/cssVars.js';
-import { CSSVariables } from '../../utils/types.js';
 import { AccordionItemProps } from './types.js';
 
 const AccordionItemComponent = ({
-  variant = 'variant1',
+  variant = 'card1',
   className = '',
   style = {},
   children,
 }: AccordionItemProps) => {
   const combinedClasses = cx(styles.accordionItem, className);
 
-  const cssVariables: CSSVariables = variant
-    ? mapVariantToCssVars('--hscl-accordion', variant, [
-        'borderColor',
-        'borderRadius',
-        'borderWidth',
-        'backgroundColor',
-        'color',
-        'icon-fill',
-      ])
-    : {};
-
   return (
-    <details className={combinedClasses} style={{ ...cssVariables, ...style }}>
+    <details
+      className={combinedClasses}
+      style={style}
+      data-card-variant={variant}
+    >
       {children}
     </details>
   );

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

@@ -3,10 +3,10 @@ import type { AccordionTitleProps } from '../AccordionTitle/types.js';
 import type { AccordionContentProps } from '../AccordionContent/types.js';
 
 export type AccordionVariant =
-  | 'variant1'
-  | 'variant2'
-  | 'variant3'
-  | 'variant4';
+  | 'card1'
+  | 'card2'
+  | 'card3'
+  | 'card4';
 
 type AccordionItemChildren =
   | ReactElement<AccordionTitleProps>
@@ -22,5 +22,5 @@ export type AccordionItemProps = {
 export type StyleFieldsProps = {
   variantLabel?: string;
   variantName?: string;
-  variantDefault?: AccordionVariant;
+  variantDefault?: { variantName?: string; variant_name?: string };
 };

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

@@ -1,9 +1,9 @@
 .accordionTitle {
   display: flex;
   align-items: center;
-  padding-block: var(--hscl-accordion-title-paddingBlock, 16px);
-  padding-inline: var(--hscl-accordion-title-paddingInline, 20px);
-  background-color: var(--hscl-accordion-title-backgroundColor, transparent);
+  padding-block: 16px;
+  padding-inline: 20px;
+  background-color: transparent;
   cursor: pointer;
   list-style: none;
 
@@ -13,9 +13,9 @@
 }
 
 .accordionTitleText {
-  font-size: var(--hscl-accordion-title-fontSize, 24px);
-  font-weight: var(--hscl-accordion-title-fontWeight, 600);
-  margin-inline-end: var(--hscl-accordion-title-marginInlineEnd, 16px);
+  font-size: 24px;
+  font-weight: 600;
+  margin-inline-end: 16px;
   flex: 1;
 }
 

package/components/componentLibrary/Accordion/llm.txt

@@ -89,7 +89,7 @@ Accordion/
 **Props:**
 ```tsx
 {
-  variant?: 'variant1' | 'variant2' | 'variant3' | 'variant4';  // Visual style variant (default: 'variant1')
+  variant?: 'card1' | 'card2' | 'card3' | 'card4';  // Visual style variant (default: 'card1')
   className?: string;                                           // Additional CSS classes
   style?: React.CSSProperties;                                  // Inline styles
   children: React.ReactNode;                                    // Should contain AccordionTitle and AccordionContent
@@ -220,14 +220,14 @@ Configurable props for variant selection:
 
 ```tsx
 <AccordionItem.StyleFields
-  variantName="variant"
-  variantLabel="Variant"
-  variantDefault="variant1"
+  variantName="accordionVariant"
+  variantLabel="Accordion variant"
+  variantDefault={{ variant_name: 'card1' }}
 />
 ```
 
 **Fields:**
-- `variant`: ChoiceField for selecting visual style (variant1, variant2, variant3, variant4)
+- `accordionVariant`: VariantSelectionField for selecting visual style using the card variant definition (card1, card2, card3, card4)
 
 #### AccordionTitle.ContentFields
 
@@ -288,7 +288,7 @@ import { AccordionIconType } from '@hubspot/cms-component-library/Accordion/Acco
 
 type FAQModuleProps = {
   style?: {
-    variant?: AccordionVariant;
+    accordionVariant?: { variantName: AccordionVariant };
     icon?: AccordionIconType;
   };
   accordionItems?: Array<{
@@ -301,7 +301,7 @@ export const Component = ({
   style,
   accordionItems = [],
 }: FAQModuleProps) => {
-  const variant = style?.variant;
+  const variant = style?.accordionVariant?.variantName;
   const icon = style?.icon;
 
   return (
@@ -371,18 +371,18 @@ export const fields = (
 
 ### CSS Variables
 
-The Accordion component uses CSS variables for theming and customization. Variables are organized by variant for consistent styling across the component.
+The Accordion component uses CSS variables for theming and customization. Variant styles are applied via `data-accordion-variant` data attribute selectors (following the same pattern as Card), using the card variant definition from `VariantSelectionField`.
 
-**Per-Variant Variables (replace `{variant}` with variant1, variant2, variant3, or variant4):**
+**Base Variables (applied per variant via `[data-accordion-variant]` selectors):**
 
 | Variable | Description | Default |
 |----------|-------------|---------|
-| `--hscl-accordion-{variant}-borderColor` | Border color | `#e0e0e0` |
-| `--hscl-accordion-{variant}-borderRadius` | Border radius | `4px` |
-| `--hscl-accordion-{variant}-borderThickness` | Border width | `1px` |
-| `--hscl-accordion-{variant}-backgroundColor` | Background color | `transparent` |
-| `--hscl-accordion-{variant}-textColor` | Text color | `#33475b` |
-| `--hscl-accordion-{variant}-icon-fillColor` | Icon fill color | `#33475b` |
+| `--hscl-accordion-borderColor` | Border color | `#e0e0e0` |
+| `--hscl-accordion-borderRadius` | Border radius | `4px` |
+| `--hscl-accordion-borderWidth` | Border width | `1px` |
+| `--hscl-accordion-backgroundColor` | Background color | `transparent` |
+| `--hscl-accordion-color` | Text color | `#33475b` |
+| `--hscl-accordion-icon-fill` | Icon fill color | `#33475b` |
 
 **Title-Specific Variables:**
 

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

@@ -153,7 +153,7 @@ export const Variants: Story = {
       <SBContainer addBackground>
         <h4>Variant 2</h4>
         <Accordion>
-          <AccordionItem variant="variant2">
+          <AccordionItem variant="card2">
             <AccordionTitle>Soft background styling</AccordionTitle>
             <AccordionContent>
               <p>
@@ -167,7 +167,7 @@ export const Variants: Story = {
       <SBContainer addBackground>
         <h4>Variant 3</h4>
         <Accordion>
-          <AccordionItem variant="variant3">
+          <AccordionItem variant="card3">
             <AccordionTitle>Bold accent styling</AccordionTitle>
             <AccordionContent>
               <p>Accent-colored border with sharp corners for emphasis.</p>
@@ -179,7 +179,7 @@ export const Variants: Story = {
       <SBContainer addBackground>
         <h4>Variant 4</h4>
         <Accordion>
-          <AccordionItem variant="variant4">
+          <AccordionItem variant="card4">
             <AccordionTitle>Rounded card styling</AccordionTitle>
             <AccordionContent>
               <p>

package/components/componentLibrary/Accordion/stories/AccordionDecorator.module.scss

@@ -0,0 +1,38 @@
+.accordionContainer {
+  /* Accordion Variant Styles */
+  :global([data-accordion-variant='card1']) {
+    --hscl-accordion-borderColor: #e0e0e0;
+    --hscl-accordion-borderRadius: 4px;
+    --hscl-accordion-borderWidth: 1px;
+    --hscl-accordion-backgroundColor: transparent;
+    --hscl-accordion-color: #33475b;
+    --hscl-accordion-icon-fill: #33475b;
+  }
+
+  :global([data-accordion-variant='card2']) {
+    --hscl-accordion-borderColor: #cbd6e2;
+    --hscl-accordion-borderRadius: 8px;
+    --hscl-accordion-borderWidth: 1px;
+    --hscl-accordion-backgroundColor: #f5f8fa;
+    --hscl-accordion-color: #33475b;
+    --hscl-accordion-icon-fill: #516f90;
+  }
+
+  :global([data-accordion-variant='card3']) {
+    --hscl-accordion-borderColor: #ff7a59;
+    --hscl-accordion-borderRadius: 0;
+    --hscl-accordion-borderWidth: 2px;
+    --hscl-accordion-backgroundColor: transparent;
+    --hscl-accordion-color: #33475b;
+    --hscl-accordion-icon-fill: #ff7a59;
+  }
+
+  :global([data-accordion-variant='card4']) {
+    --hscl-accordion-borderColor: #33475b;
+    --hscl-accordion-borderRadius: 12px;
+    --hscl-accordion-borderWidth: 1px;
+    --hscl-accordion-backgroundColor: #eaf0f6;
+    --hscl-accordion-color: #33475b;
+    --hscl-accordion-icon-fill: #33475b;
+  }
+}

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

@@ -1,41 +1,13 @@
 import type { Decorator } from '@storybook/react';
-import type { CSSVariables } from '../../utils/types.js';
-
-const defaultAccordionStyles: CSSVariables = {
-  '--hscl-listItem-color-primary': '#33475b',
-  '--hscl-listItem-color-secondary': '#516f90',
-
-  '--hscl-accordion-variant1-borderColor': '#e0e0e0',
-  '--hscl-accordion-variant1-borderRadius': '4px',
-  '--hscl-accordion-variant1-borderWidth': '1px',
-  '--hscl-accordion-variant1-backgroundColor': 'transparent',
-  '--hscl-accordion-variant1-color': '#33475b',
-  '--hscl-accordion-variant1-icon-fill': '#33475b',
-
-  '--hscl-accordion-variant2-borderColor': '#cbd6e2',
-  '--hscl-accordion-variant2-borderRadius': '8px',
-  '--hscl-accordion-variant2-borderWidth': '1px',
-  '--hscl-accordion-variant2-backgroundColor': '#f5f8fa',
-  '--hscl-accordion-variant2-color': '#33475b',
-  '--hscl-accordion-variant2-icon-fill': '#516f90',
-
-  '--hscl-accordion-variant3-borderColor': '#ff7a59',
-  '--hscl-accordion-variant3-borderRadius': '0',
-  '--hscl-accordion-variant3-borderWidth': '2px',
-  '--hscl-accordion-variant3-backgroundColor': 'transparent',
-  '--hscl-accordion-variant3-color': '#33475b',
-  '--hscl-accordion-variant3-icon-fill': '#ff7a59',
-
-  '--hscl-accordion-variant4-borderColor': '#33475b',
-  '--hscl-accordion-variant4-borderRadius': '12px',
-  '--hscl-accordion-variant4-borderWidth': '1px',
-  '--hscl-accordion-variant4-backgroundColor': '#eaf0f6',
-  '--hscl-accordion-variant4-color': '#33475b',
-  '--hscl-accordion-variant4-icon-fill': '#33475b',
-};
+import styles from './AccordionDecorator.module.scss';
 
 export const withAccordionStyles: Decorator = Story => (
-  <div style={defaultAccordionStyles}>
+  <div className={styles.accordionContainer}>
     <Story />
   </div>
 );
+
+/**
+ * Export styles so stories can apply variant classes to AccordionItems
+ */
+export { styles as accordionStyles };

package/components/componentLibrary/Button/index.module.scss

@@ -29,10 +29,10 @@
   }
 
   &:focus-visible {
-    background-color: var(--hs-button-backgroundColor-focus, var(--hs-button-backgroundColor));
-    color: var(--hs-button-color-focus, var(--hs-button-color));
-    border: var(--hs-button-border-focus, var(--hs-button-border));
-    outline: 2px solid;
+    background-color: var(--hs-button-backgroundColor-hover, var(--hs-button-backgroundColor));
+    color: var(--hs-button-color-hover, var(--hs-button-color));
+    border: var(--hs-button-border-hover, var(--hs-button-border));
+    outline: 2px solid Highlight;
     outline-offset: 2px;
   }
 

package/components/componentLibrary/Card/StyleFields.tsx

@@ -4,7 +4,7 @@ import { StyleFieldsProps } from './types.js';
 const StyleFields = ({
   cardVariantLabel = 'Card variant',
   cardVariantName = 'cardVariant',
-  cardVariantDefault = { variantName: 'cardStyle1' },
+  cardVariantDefault = { variant_name: 'card1' },
 }: StyleFieldsProps) => {
   return (
     <VariantSelectionField

package/components/componentLibrary/Card/index.module.scss

@@ -1,4 +1,6 @@
 .card {
+  --hs-section-color: var(--hs-card-color); // overrides card-based typography settings
+  
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -7,8 +9,4 @@
   background-color: var(--hs-card-backgroundColor, #ffffff);
   color: var(--hs-card-color, inherit);
   border: var(--hs-card-border, none);
-
-  h1,h2,h3,h4,h5,h6,p,span {
-    color: inherit;
-  }
 }

package/components/componentLibrary/Card/index.tsx

@@ -4,7 +4,7 @@ import { CardProps } from './types.js';
 import StyleFields from './StyleFields.js';
 
 const CardComponent = ({
-  variant = 'cardStyle1',
+  variant = 'card1',
   as: Component = 'div',
   className = '',
   style = {},

package/components/componentLibrary/Card/llm.txt

@@ -34,7 +34,7 @@ Card/
 **Props:**
 ```tsx
 {
-  variant?: 'cardStyle1' | 'cardStyle2' | 'cardStyle3' | 'cardStyle4';  // Theme variant (default: 'cardStyle1')
+  variant?: 'card1' | 'card2' | 'card3' | 'card4';  // Theme variant (default: 'card1')
   as?: 'div' | 'article' | 'section';             // HTML element to render (default: 'div')
   children?: React.ReactNode;                     // Card content
   className?: string;                             // Additional CSS classes
@@ -58,7 +58,7 @@ import Card from '@hubspot/cms-component-library/Card';
 ### Semantic Article Card
 
 ```tsx
-<Card as="article" variant="cardStyle3">
+<Card as="article" variant="card3">
   <h3>Blog Post Title</h3>
   <p>Article content goes here...</p>
 </Card>
@@ -97,7 +97,7 @@ Configurable props for customizing field labels, names, and defaults:
 <Card.StyleFields
   cardVariantLabel="Card variant"
   cardVariantName="cardVariant"
-  cardVariantDefault={{ variant_name: 'cardStyle1' }}
+  cardVariantDefault={{ variant_name: 'card1' }}
 />
 ```
 

package/components/componentLibrary/Card/stories/Card.stories.tsx

@@ -43,7 +43,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    variant: 'cardStyle1',
+    variant: 'card1',
   },
   render: args => (
     <Card {...args}>
@@ -60,7 +60,7 @@ export const Variants: Story = {
     <SBContainer flex direction="column" gap="large">
       <SBContainer addBackground>
         <h4>Card Style 1 (Light)</h4>
-        <Card variant="cardStyle1">
+        <Card variant="card1">
           <CardHeading>Card Style 1</CardHeading>
           <CardDivider />
           <CardContent>Light background with dark text.</CardContent>
@@ -69,7 +69,7 @@ export const Variants: Story = {
 
       <SBContainer addBackground>
         <h4>Card Style 2 (Subtle)</h4>
-        <Card variant="cardStyle2">
+        <Card variant="card2">
           <CardHeading>Card Style 2</CardHeading>
           <CardDivider />
           <CardContent>Subtle background with dark text.</CardContent>
@@ -78,7 +78,7 @@ export const Variants: Story = {
 
       <SBContainer addBackground>
         <h4>Card Style 3 (Dark)</h4>
-        <Card variant="cardStyle3">
+        <Card variant="card3">
           <CardHeading>Card Style 3</CardHeading>
           <CardDivider />
           <CardContent>Dark background with light text.</CardContent>
@@ -87,7 +87,7 @@ export const Variants: Story = {
 
       <SBContainer addBackground>
         <h4>Card Style 4 (Darker)</h4>
-        <Card variant="cardStyle4">
+        <Card variant="card4">
           <CardHeading>Card Style 4</CardHeading>
           <CardDivider />
           <CardContent>Darker background with light text.</CardContent>

package/components/componentLibrary/Card/stories/CardDecorator.module.scss

@@ -1,27 +1,27 @@
 .cardContainer {
   /* card Variant Styles */
-  :global([data-card-variant='cardStyle1']) {
+  :global([data-card-variant='card1']) {
     --hs-card-borderRadius: 10px;
     --hs-card-backgroundColor: rgb(255, 255, 255);
     --hs-card-color: rgb(28, 28, 31);
     --hs-card-border: 1px solid #e0e0e0;
   }
 
-  :global([data-card-variant='cardStyle2']) {
+  :global([data-card-variant='card2']) {
     --hs-card-borderRadius: 10px;
     --hs-card-backgroundColor: rgb(249, 249, 249);
     --hs-card-color: rgb(28, 28, 31);
     --hs-card-border: 1px solid #e0e0e0;
   }
 
-  :global([data-card-variant='cardStyle3']) {
+  :global([data-card-variant='card3']) {
     --hs-card-borderRadius: 10px;
     --hs-card-backgroundColor: rgb(28, 28, 31);
     --hs-card-color: rgb(255,255,255);
     --hs-card-border: 1px solid #e0e0e0;
   }
 
-  :global([data-card-variant='cardStyle4']) {
+  :global([data-card-variant='card4']) {
     --hs-card-borderRadius: 10px;
     --hs-card-backgroundColor: rgb(36, 36, 36);
     --hs-card-color: rgb(255,255,255);

package/components/componentLibrary/Card/types.ts

@@ -1,8 +1,8 @@
 export type CardVariant =
-  | 'cardStyle1'
-  | 'cardStyle2'
-  | 'cardStyle3'
-  | 'cardStyle4';
+  | 'card1'
+  | 'card2'
+  | 'card3'
+  | 'card4';
 
 export type CardAs = 'div' | 'article' | 'section';
 

package/components/componentLibrary/Form/StyleFields.tsx

@@ -4,7 +4,7 @@ import { StyleFieldsProps } from './types.js';
 const StyleFields = ({
   formVariantLabel = 'Form variant',
   formVariantName = 'formVariant',
-  formVariantDefault = { variant_name: 'primaryForm' },
+  formVariantDefault = { variant_name: 'form1' },
 }: StyleFieldsProps) => {
   return (
     <VariantSelectionField

package/components/componentLibrary/Form/llm.txt

@@ -123,7 +123,7 @@ Configurable props for variant selection:
 <Form.StyleFields
   formVariantLabel="Form variant"
   formVariantName="formVariant"
-  formVariantDefault={{ variant_name: 'primaryForm' }}
+  formVariantDefault={{ variant_name: 'form1' }}
 />
 ```
 
@@ -135,7 +135,7 @@ Configurable props for variant selection:
 {
   formVariantLabel?: string;                     // Label shown in the editor (default: "Form variant")
   formVariantName?: string;                      // Field name (default: "formVariant")
-  formVariantDefault?: { variant_name: string }; // Default variant (default: { variant_name: 'primaryForm' })
+  formVariantDefault?: { variant_name: string }; // Default variant (default: { variant_name: 'form1' })
 }
 ```
 

package/components/componentLibrary/Link/index.module.scss

@@ -10,7 +10,9 @@
   }
 
   &:focus-visible {
-    outline: 2px solid currentColor;
+    color: var(--hs-link-color-hover);
+    text-decoration: var(--hs-link-textDecoration-hover);
+    outline: 2px solid Highlight;
     outline-offset: 2px;
   }
 

package/components/componentLibrary/Text/index.module.scss

@@ -1,3 +1,42 @@
 .text {
-  color: var(--hscl-text-color, currentColor);
+  color: var(--hs-section-color, currentColor);
+
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  ul,
+  ol,
+  blockquote {
+    margin-block: 0 2rem;
+  }
+
+  *:last-child {
+    margin-block-end: 0
+  }
+
+  a {
+    color: var(--hs-section-link-color);
+  }
+
+  a:hover {
+    color: var(--hs-section-link-color-hover);
+  }
+
+   a:focus-visible {
+    color: var(--hs-section-link-color-hover);
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+   }
+
+  blockquote {
+    padding: 24px;
+    border-radius: 4px;
+    border-left: 3px solid var(--hs-section-blockquote-accentColor);
+    background-color: var(--hs-section-blockquote-backgroundColor);
+    color: var(--hs-section-blockquote-color);
+  }
 }

package/components/componentLibrary/Text/llm.txt

@@ -147,8 +147,10 @@ export default function ArticleModule() {
 
 ### CSS Variables
 
-**Base Styles:**
-- `--hscl-text-color`: Text color applied to the rendered rich text content (default: `currentColor`)
+By default, the Text component inherits styles from the HubSpot theme's section settings (e.g. `--hs-section-color`, `--hs-section-link-color`). The `--hscl-` variables below are overrides — use them when the component is placed in a context (like a Card) that requires different styling than the section defaults.
+
+**Overrides:**
+- `--hscl-text-color`: Text color (falls back to `--hs-section-color`, then `currentColor`)
 
 ## Accessibility
 

package/components/componentLibrary/Video/ContentFields.tsx

@@ -80,6 +80,7 @@ const ContentFields = ({
       <ImageField
         name={oembedThumbnailName}
         label={oembedThumbnailLabel}
+        id="oembedThumbnail"
         default={oembedThumbnailDefault}
         responsive={true}
         resizable={false}

package/components/componentLibrary/Video/StyleFields.tsx

@@ -12,6 +12,48 @@ const StyleFields = ({
       name={playButtonColorName}
       default={playButtonColorDefault}
       showOpacity={false}
+      visibilityRules="ADVANCED"
+      advancedVisibility={{
+        boolean_operator: 'OR',
+        criteria: [],
+        children: [
+          {
+            boolean_operator: 'AND',
+            criteria: [
+              {
+                controlling_field: 'videoType',
+                operator: 'EQUAL',
+                controlling_value_regex: 'hubspot_video',
+              },
+            ],
+          },
+          {
+            boolean_operator: 'AND',
+            criteria: [
+              {
+                controlling_field: 'videoType',
+                operator: 'EQUAL',
+                controlling_value_regex: 'embed',
+              },
+              {
+                controlling_field: 'embedVideo',
+                operator: 'MATCHES_REGEX',
+                controlling_value_regex: '(?=.*"source_type":"oembed")',
+              },
+              {
+                controlling_field: 'embedVideo',
+                operator: 'MATCHES_REGEX',
+                controlling_value_regex: '(?=.*"oembed_url":"(?!")+)',
+              },
+              {
+                controlling_field: 'oembedThumbnail',
+                operator: 'MATCHES_REGEX',
+                controlling_value_regex: '(?=.*"src":"(?!")+)',
+              },
+            ],
+          },
+        ],
+      }}
     />
   );
 };

package/components/componentLibrary/Video/index.tsx

@@ -2,6 +2,8 @@ import { Island } from '@hubspot/cms-components';
 import ContentFields from './ContentFields.js';
 import StyleFields from './StyleFields.js';
 // @ts-expect-error -- ?island not typed
+import EmbedVideoIsland from './islands/EmbedVideoIsland.js?island';
+// @ts-expect-error -- ?island not typed
 import HSVideoIsland from './islands/HSVideoIsland.js?island';
 import { VideoProps } from './types.js';
 
@@ -9,6 +11,7 @@ const VideoComponent = ({
   videoType,
   hubspotVideoParams,
   embedVideoParams,
+  oembedThumbnail,
   playButtonColor,
   video,
 }: VideoProps) => {
@@ -28,8 +31,14 @@ const VideoComponent = ({
     videoType === 'embed' &&
     Boolean(embedVideoParams?.oembed_url || embedVideoParams?.embed_html)
   ) {
-    // TODO: implement embed video
-    return <div />;
+    return (
+      <Island
+        module={EmbedVideoIsland}
+        embedVideoParams={embedVideoParams}
+        oembedThumbnail={oembedThumbnail}
+        playButtonColor={playButtonColor}
+      />
+    );
   }
 
   return null;

package/components/componentLibrary/Video/islands/EmbedVideoIsland.tsx

@@ -0,0 +1,239 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { CSSVariables } from '../../utils/types.js';
+import { EmbedVideoIslandProps, EmbedVideoParams } from '../types.js';
+import styles from './index.module.scss';
+
+const toPx = (value: number | string | undefined) => {
+  if (typeof value === 'number') {
+    return `${value.toString()}px`;
+  } else if (typeof value === 'string') {
+    const parsed = parseFloat(value);
+    return isNaN(parsed) ? undefined : `${parsed}px`;
+  }
+
+  return undefined;
+};
+
+const getSizeStyles = (
+  embedVideoParams: EmbedVideoParams,
+  oembedData: EmbedVideoParams['oembed_response']
+) => {
+  const responseWidth = oembedData?.width;
+  const responseHeight = oembedData?.height;
+  switch (embedVideoParams.size_type) {
+    case 'exact':
+      return {
+        width: toPx(embedVideoParams.width ?? responseWidth),
+        height: toPx(embedVideoParams.height ?? responseHeight),
+      };
+    case 'auto_full_width':
+      return {};
+    default:
+      return {
+        maxWidth: toPx(embedVideoParams.max_width ?? responseWidth),
+        maxHeight: toPx(embedVideoParams.max_height ?? responseHeight),
+      };
+  }
+};
+
+const CustomThumbnailPlayIcon = () => (
+  <svg viewBox="0 0 135.39 149.4">
+    <path
+      d="M371.2,398.69l-127.79,71c-1.47.83-2.74.93-3.8.28a3.69,3.69,0,0,1-1.59-3.46V324.88a3.73,3.73,0,0,1,1.59-3.47,3.66,3.66,0,0,1,3.8.29l127.79,71c1.47.84,2.21,1.82,2.21,3S372.67,397.85,371.2,398.69Z"
+      transform="translate(-238.02 -321)"
+    ></path>
+  </svg>
+);
+
+const OEmbedContainer = ({
+  embedVideoParams,
+  oEmbedThumbnail,
+  oEmbedPlayButtonColor,
+}: {
+  embedVideoParams: EmbedVideoParams;
+  oEmbedThumbnail?: { src: string; alt?: string };
+  oEmbedPlayButtonColor?: { color?: string };
+}) => {
+  const {
+    size_type: sizeType,
+    oembed_url: oembedUrl,
+    oembed_response: oembedResponse,
+    supported_oembed_types: supportedOembedTypes,
+  } = embedVideoParams;
+
+  const [oembedData, setOembedData] =
+    useState<EmbedVideoParams['oembed_response']>(oembedResponse);
+  const [hasPlayed, setHasPlayed] = useState(false);
+  const iframeWrapperRef = useRef<HTMLDivElement>(null);
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+
+  const isSupportedOEmbedType = supportedOembedTypes.includes(
+    oembedData?.type || ''
+  );
+  const sizeStyles = useMemo(
+    () => getSizeStyles(embedVideoParams, oembedData),
+    [embedVideoParams, oembedData]
+  );
+
+  const cssVariables: CSSVariables = {
+    ...(oEmbedPlayButtonColor?.color && {
+      '--hscl-video-playButton-color': oEmbedPlayButtonColor.color,
+    }),
+  };
+
+  useEffect(() => {
+    if (oembedData || !oembedUrl) {
+      return;
+    }
+
+    const fetchOEmbed = async () => {
+      try {
+        const query = new URLSearchParams({
+          url: oembedUrl,
+          autoplay: '0',
+        });
+        const response = await fetch(`/_hcms/oembed?${query}`);
+        if (!response.ok) {
+          console.error('Server reached, error retrieving oEmbed response.');
+          return;
+        }
+        setOembedData(await response.json());
+      } catch {
+        console.error(
+          'Could not reach the server. Failed to retrieve oEmbed response.'
+        );
+      }
+    };
+    fetchOEmbed();
+  }, [oembedUrl]);
+
+  useEffect(() => {
+    if (!oembedData) {
+      return;
+    }
+
+    const el = document.createElement('div');
+    el.innerHTML = oembedData.html;
+    const iframe = el.firstChild as HTMLIFrameElement;
+    iframe.setAttribute('class', styles['oembed_container_iframe']);
+    iframe.setAttribute('title', oembedData.title || '');
+    iframeRef.current = iframe;
+    if (!oEmbedThumbnail?.src) {
+      // if there is a custom thumbnail, iframe will be appended on click
+      iframeWrapperRef.current?.appendChild(iframe);
+      Object.assign(iframe.style, sizeStyles);
+    }
+  }, [oembedData, oEmbedThumbnail?.src]);
+
+  return (
+    <div
+      className={`${styles.oembed_container} ${
+        sizeType === 'auto_full_width' ? 'oembed_container--full-size' : ''
+      }`}
+      style={sizeStyles}
+    >
+      {oEmbedThumbnail?.src && (
+        <button
+          className={styles['oembed_custom-thumbnail']}
+          style={{
+            ...sizeStyles,
+            backgroundImage: `url(${oEmbedThumbnail.src})`,
+            display: hasPlayed ? 'none' : undefined,
+          }}
+          onClick={() => {
+            const iframe = iframeRef.current;
+            if (iframe) {
+              const iframeSrc = new URL(iframe.src);
+              iframeSrc.searchParams.append('autoplay', '1');
+              iframe.src = iframeSrc.toString();
+              Object.assign(iframe.style, sizeStyles);
+              iframeWrapperRef.current?.appendChild(iframe);
+              setHasPlayed(true);
+            }
+          }}
+        >
+          <span className={styles['oembed-info']}>
+            {[
+              'Video player',
+              oEmbedThumbnail.alt ?? '',
+              'Click to play video',
+            ].join(' - ')}
+          </span>
+          <div
+            className={styles['oembed_custom-thumbnail_icon']}
+            style={cssVariables}
+          >
+            <CustomThumbnailPlayIcon />
+          </div>
+        </button>
+      )}
+      {isSupportedOEmbedType && oembedData && (
+        <div ref={iframeWrapperRef} className={styles.iframe_wrapper} />
+      )}
+    </div>
+  );
+};
+
+const EmbedHTMLContainer = ({ embedHtml }: { embedHtml: string }) => {
+  const embedContainerRef = useRef<HTMLDivElement>(null);
+  const iframeWrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = embedContainerRef.current;
+    const iframe = iframeWrapperRef.current?.querySelector('iframe');
+
+    if (!container || !iframe) {
+      return;
+    }
+
+    const maxHeight = iframe.getAttribute('height');
+    const maxWidth = iframe.getAttribute('width');
+    if (maxHeight !== null) {
+      container.style.maxHeight = toPx(maxHeight);
+    } else {
+      iframe.style.height = '100%';
+    }
+    if (maxWidth !== null) {
+      container.style.maxWidth = toPx(maxWidth);
+    } else {
+      iframe.style.width = '100%';
+    }
+  }, []);
+
+  return (
+    <div ref={embedContainerRef} className={styles.embed_container}>
+      <div
+        ref={iframeWrapperRef}
+        className={styles.iframe_wrapper}
+        dangerouslySetInnerHTML={{ __html: embedHtml }}
+      />
+    </div>
+  );
+};
+
+const EmbedVideoIsland = ({
+  embedVideoParams,
+  oembedThumbnail,
+  playButtonColor,
+}: EmbedVideoIslandProps) => {
+  if (
+    embedVideoParams.source_type === 'oembed' &&
+    embedVideoParams.oembed_url
+  ) {
+    return (
+      <OEmbedContainer
+        embedVideoParams={embedVideoParams}
+        oEmbedThumbnail={oembedThumbnail}
+        oEmbedPlayButtonColor={playButtonColor}
+      />
+    );
+  }
+
+  if (embedVideoParams.source_type === 'html' && embedVideoParams.embed_html) {
+    return <EmbedHTMLContainer embedHtml={embedVideoParams.embed_html} />;
+  }
+
+  return null;
+};
+
+export default EmbedVideoIsland;

package/components/componentLibrary/Video/islands/index.module.scss

@@ -0,0 +1,94 @@
+.oembed_container {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.oembed_container_iframe {
+  height: 100%;
+  left: 0;
+  margin: 0 auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100%;
+}
+
+.oembed_custom-thumbnail,
+.oembed_custom-thumbnail:hover,
+.oembed_custom-thumbnail:focus,
+.oembed_custom-thumbnail:active {
+  align-items: center;
+  appearance: none;
+  background-color: transparent;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 0;
+  border: none;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+}
+
+.oembed_custom-thumbnail_icon {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+
+  svg {
+    display: block;
+    height: auto;
+    width: 12%;
+    fill: var(--hscl-video-playButton-color, #ffffff);
+  }
+}
+
+/* SVGs in IE11 require the max-width to be set to non in order to display scaling properly */
+_:-ms-fullscreen,
+:root .oembed_custom-thumbnail_icon svg {
+  max-width: none;
+  fill: var(--hscl-video-playButton-color, #ffffff);
+}
+
+.oembed-info {
+  height: 1px;
+  left: -10000px;
+  overflow: hidden;
+  position: absolute;
+  top: auto;
+  width: 1px;
+}
+
+.iframe_wrapper {
+  height: 0;
+  padding-bottom: 56.25%;
+  padding-top: 25px;
+  position: relative;
+}
+
+.embed_container {
+  display: inline-block;
+  height: 100%;
+  position: relative;
+  width: 100%;
+}
+
+.embed_container iframe {
+  left: 0;
+  max-height: 100%;
+  max-width: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+}

package/components/componentLibrary/_patterns/css-patterns.md

@@ -136,8 +136,11 @@ render: () => {
     property: var(--hscl-componentName-property-hover);
   }
 
-  &:focus {
-    property: var(--hscl-componentName-property-focus);
+  // Focus-visible reuses hover styles + browser default outline
+  &:focus-visible {
+    property: var(--hscl-componentName-property-hover);
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
   }
 
   &:disabled {
@@ -186,9 +189,11 @@ Use `&` for pseudo-classes and nested selectors:
     background-color: var(--hscl-button-backgroundColor-hover);
   }
 
-  &:focus {
-    outline: var(--hscl-button-outlineWidth-focus) solid
-             var(--hscl-button-outlineColor-focus);
+  &:focus-visible {
+    background-color: var(--hscl-button-backgroundColor-hover);
+    color: var(--hscl-button-color-hover);
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
   }
 
   &:disabled {
@@ -244,9 +249,11 @@ Use `&` for pseudo-classes and nested selectors:
     background-color: var(--hscl-button-backgroundColor-hover);
   }
 
-  &:focus {
-    outline: var(--hscl-button-outlineWidth-focus) solid
-             var(--hscl-button-outlineColor-focus);
+  &:focus-visible {
+    background-color: var(--hscl-button-backgroundColor-hover);
+    color: var(--hscl-button-color-hover);
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
   }
 
   &:disabled {
@@ -286,10 +293,12 @@ All interactive components should style **hover, focus, active** states:
     color: var(--hscl-button-color-hover, var(--hscl-button-color));
   }
 
-  // Focus-visible - keyboard navigation only (not mouse clicks)
+  // Focus-visible - reuses hover styles + browser default outline
   &:focus-visible {
-    outline: var(--hscl-button-outlineWidth-focus, 2px) solid var(--hscl-button-outlineColor-focus, currentColor);
-    outline-offset: var(--hscl-button-outlineOffset-focus, 2px);
+    background-color: var(--hscl-button-backgroundColor-hover, var(--hscl-button-backgroundColor));
+    color: var(--hscl-button-color-hover, var(--hscl-button-color));
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
   }
 
   // Active - pressed/clicked state
@@ -322,11 +331,17 @@ All interactive components should style **hover, focus, active** states:
    background-color: var(--hscl-button-backgroundColor-hover);
    ```
 
-3. **Use `currentColor` for focus outlines**
-   - Adapts to component's text color automatically
-   - Ensures sufficient contrast in most cases
+3. **Reuse hover styles for focus, rely on browser default outline**
+   - Focus-visible should apply the same visual treatment as hover (background, color, border)
+   - Use `outline: 2px solid initial` for the browser's default focus ring color
+   - No need for separate focus-specific CSS variables
    ```scss
-   outline: var(--hscl-button-outlineColor-focus, currentColor);
+   &:focus-visible {
+     background-color: var(--hscl-button-backgroundColor-hover, var(--hscl-button-backgroundColor));
+     color: var(--hscl-button-color-hover, var(--hscl-button-color));
+     outline: 2px solid Highlight;
+     outline-offset: 2px;
+   }
    ```
 
 4. **Respect reduced motion preferences**
@@ -360,8 +375,10 @@ See these components for implementation examples:
     property: var(--hscl-componentName-property-hover);
   }
 
-  &:focus {
-    property: var(--hscl-componentName-property-focus);
+  &:focus-visible {
+    property: var(--hscl-componentName-property-hover);
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/cms-component-library",
-  "version": "0.3.10",
+  "version": "0.3.12",
   "description": "HubSpot CMS React component library for building CMS modules",
   "license": "Apache-2.0",
   "exports": {