@furystack/shades-common-components 12.6.0 → 13.0.0

package/src/components/markdown/markdown-editor.spec.tsx

@@ -133,10 +133,271 @@ describe('MarkdownEditor', () => {
       expect(textarea.value).toBe(mdContent)
 
       const heading = document.querySelector(
-        'shade-markdown-editor shade-markdown-display shade-typography[data-variant="h1"]',
+        'shade-markdown-editor shade-markdown-display [is^="shade-typography"][data-variant="h1"]',
       )
       expect(heading).not.toBeNull()
       expect(heading?.textContent).toContain('Test Content')
     })
   })
+
+  describe('form integration', () => {
+    it('should render a label when labelTitle is provided', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownEditor value="" labelTitle="Description" />,
+        })
+
+        await flushUpdates()
+
+        const label = document.querySelector('shade-markdown-editor .md-editor-label')
+        expect(label).not.toBeNull()
+        expect(label?.textContent).toBe('Description')
+      })
+    })
+
+    it('should not render a label when labelTitle is not provided', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownEditor value="" />,
+        })
+
+        await flushUpdates()
+
+        const label = document.querySelector('shade-markdown-editor .md-editor-label')
+        expect(label).toBeNull()
+      })
+    })
+
+    it('should set data-invalid when required and value is empty', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownEditor value="" required />,
+        })
+
+        await flushUpdates()
+
+        const editor = document.querySelector('shade-markdown-editor') as HTMLElement
+        expect(editor.hasAttribute('data-invalid')).toBe(true)
+      })
+    })
+
+    it('should not set data-invalid when required and value is provided', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownEditor value="some content" required />,
+        })
+
+        await flushUpdates()
+
+        const editor = document.querySelector('shade-markdown-editor') as HTMLElement
+        expect(editor.hasAttribute('data-invalid')).toBe(false)
+      })
+    })
+
+    it('should show "Value is required" helper text when required and empty', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownEditor value="" required />,
+        })
+
+        await flushUpdates()
+
+        const helperText = document.querySelector('shade-markdown-editor .md-editor-helperText')
+        expect(helperText).not.toBeNull()
+        expect(helperText?.textContent).toBe('Value is required')
+      })
+    })
+
+    it('should set data-invalid when getValidationResult returns invalid', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <MarkdownEditor
+              value="short"
+              getValidationResult={({ value }) =>
+                value.length < 10 ? { isValid: false, message: 'Too short' } : { isValid: true }
+              }
+            />
+          ),
+        })
+
+        await flushUpdates()
+
+        const editor = document.querySelector('shade-markdown-editor') as HTMLElement
+        expect(editor.hasAttribute('data-invalid')).toBe(true)
+        expect(editor.textContent).toContain('Too short')
+      })
+    })
+
+    it('should not set data-invalid when getValidationResult returns valid', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <MarkdownEditor
+              value="long enough content"
+              getValidationResult={({ value }) =>
+                value.length < 10 ? { isValid: false, message: 'Too short' } : { isValid: true }
+              }
+            />
+          ),
+        })
+
+        await flushUpdates()
+
+        const editor = document.querySelector('shade-markdown-editor') as HTMLElement
+        expect(editor.hasAttribute('data-invalid')).toBe(false)
+      })
+    })
+
+    it('should display helper text from getHelperText', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownEditor value="" getHelperText={() => 'Enter your description'} />,
+        })
+
+        await flushUpdates()
+
+        const helperText = document.querySelector('shade-markdown-editor .md-editor-helperText')
+        expect(helperText).not.toBeNull()
+        expect(helperText?.textContent).toBe('Enter your description')
+      })
+    })
+
+    it('should forward name prop to the inner textarea', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownEditor value="" name="description" />,
+        })
+
+        await flushUpdates()
+
+        const textarea = document.querySelector('shade-markdown-editor textarea') as HTMLTextAreaElement
+        expect(textarea.name).toBe('description')
+      })
+    })
+
+    it('should forward required prop to the inner textarea', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownEditor value="content" required />,
+        })
+
+        await flushUpdates()
+
+        const textarea = document.querySelector('shade-markdown-editor textarea') as HTMLTextAreaElement
+        expect(textarea.required).toBe(true)
+      })
+    })
+
+    it('should forward disabled prop to the inner textarea', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownEditor value="" disabled />,
+        })
+
+        await flushUpdates()
+
+        const textarea = document.querySelector('shade-markdown-editor textarea') as HTMLTextAreaElement
+        expect(textarea.disabled).toBe(true)
+      })
+    })
+
+    it('should forward placeholder prop to the inner textarea', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownEditor value="" placeholder="Type here..." />,
+        })
+
+        await flushUpdates()
+
+        const textarea = document.querySelector('shade-markdown-editor textarea') as HTMLTextAreaElement
+        expect(textarea.placeholder).toBe('Type here...')
+      })
+    })
+
+    it('should forward rows prop to the inner textarea', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownEditor value="" rows={5} />,
+        })
+
+        await flushUpdates()
+
+        const textarea = document.querySelector('shade-markdown-editor textarea') as HTMLTextAreaElement
+        expect(textarea.rows).toBe(5)
+      })
+    })
+
+    it('should set hideChrome on the inner MarkdownInput', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownEditor value="" labelTitle="My Label" />,
+        })
+
+        await flushUpdates()
+
+        const editorLabel = document.querySelector('shade-markdown-editor .md-editor-label')
+        expect(editorLabel?.textContent).toBe('My Label')
+
+        const inputLabel = document.querySelector('shade-markdown-editor shade-markdown-input label > span')
+        expect(inputLabel).toBeNull()
+      })
+    })
+  })
 })

package/src/components/markdown/markdown-editor.tsx

@@ -2,7 +2,8 @@ import { Shade, createComponent } from '@furystack/shades'
 import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import { Tabs } from '../tabs.js'
 import { MarkdownDisplay } from './markdown-display.js'
-import { MarkdownInput } from './markdown-input.js'
+import { MarkdownInput, type MarkdownInputProps } from './markdown-input.js'
+import { resolveValidationState } from './markdown-validation.js'
 
 export type MarkdownEditorLayout = 'side-by-side' | 'tabs' | 'above-below'
 
@@ -19,7 +20,10 @@ export type MarkdownEditorProps = {
   readOnly?: boolean
   /** Inline styles applied to the host element */
   style?: Partial<CSSStyleDeclaration>
-}
+} & Pick<
+  MarkdownInputProps,
+  'name' | 'required' | 'labelTitle' | 'disabled' | 'placeholder' | 'rows' | 'getValidationResult' | 'getHelperText'
+>
 
 type TabType = 'edit' | 'preview'
 
@@ -31,12 +35,42 @@ export const MarkdownEditor = Shade<MarkdownEditorProps>({
   shadowDomName: 'shade-markdown-editor',
   css: {
     display: 'flex',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     flexDirection: 'column',
-    border: `1px solid ${cssVariableTheme.action.subtleBorder}`,
-    borderRadius: cssVariableTheme.shape.borderRadius.md,
-    overflow: 'hidden',
     minHeight: '0',
 
+    '& .md-editor-label': {
+      fontSize: cssVariableTheme.typography.fontSize.xs,
+      color: cssVariableTheme.text.secondary,
+      padding: `0 0 ${cssVariableTheme.spacing.sm} 0`,
+      transition: `color ${cssVariableTheme.transitions.duration.slow} ${cssVariableTheme.transitions.easing.default}`,
+    },
+
+    '&[data-invalid] .md-editor-label': {
+      color: cssVariableTheme.palette.error.main,
+    },
+
+    '& .md-editor-frame': {
+      display: 'flex',
+      flexDirection: 'column',
+      border: `1px solid ${cssVariableTheme.action.subtleBorder}`,
+      borderRadius: cssVariableTheme.shape.borderRadius.md,
+      overflow: 'hidden',
+      flex: '1',
+      minHeight: '0',
+    },
+
+    '&[data-invalid] .md-editor-frame': {
+      borderColor: cssVariableTheme.palette.error.main,
+    },
+
+    '& .md-editor-helperText': {
+      fontSize: cssVariableTheme.typography.fontSize.xs,
+      padding: `${cssVariableTheme.spacing.sm} 0 0 0`,
+      opacity: '0.85',
+      lineHeight: '1.4',
+    },
+
     '& .md-editor-split': {
       display: 'flex',
       flex: '1',
@@ -119,8 +153,11 @@ export const MarkdownEditor = Shade<MarkdownEditorProps>({
   render: ({ props, useState, useHostProps }) => {
     const layout = props.layout ?? 'side-by-side'
 
+    const { isInvalid, helperNode } = resolveValidationState(props)
+
     useHostProps({
       ...(props.style ? { style: props.style as Record<string, string> } : {}),
+      'data-invalid': isInvalid ? '' : undefined,
     })
 
     const [activeTab, setActiveTab] = useState<TabType>('activeTab', 'edit')
@@ -131,13 +168,22 @@ export const MarkdownEditor = Shade<MarkdownEditorProps>({
         onValueChange={props.onValueChange}
         maxImageSizeBytes={props.maxImageSizeBytes}
         readOnly={props.readOnly}
+        name={props.name}
+        required={props.required}
+        disabled={props.disabled}
+        placeholder={props.placeholder}
+        rows={props.rows}
+        getValidationResult={props.getValidationResult}
+        hideChrome
       />
     )
 
     const previewPane = <MarkdownDisplay content={props.value} readOnly={false} onChange={props.onValueChange} />
 
+    let content: JSX.Element
+
     if (layout === 'tabs') {
-      return (
+      content = (
         <Tabs
           activeKey={activeTab}
           onTabChange={(key) => setActiveTab(key as TabType)}
@@ -155,13 +201,21 @@ export const MarkdownEditor = Shade<MarkdownEditorProps>({
           ]}
         />
       )
+    } else {
+      content = (
+        <div className="md-editor-split" data-layout={layout}>
+          <div className="md-editor-pane md-editor-pane-input">{inputPane}</div>
+          <div className="md-editor-pane md-editor-pane-preview">{previewPane}</div>
+        </div>
+      )
     }
 
     return (
-      <div className="md-editor-split" data-layout={layout}>
-        <div className="md-editor-pane md-editor-pane-input">{inputPane}</div>
-        <div className="md-editor-pane md-editor-pane-preview">{previewPane}</div>
-      </div>
+      <>
+        {props.labelTitle ? <span className="md-editor-label">{props.labelTitle}</span> : null}
+        <div className="md-editor-frame">{content}</div>
+        {helperNode ? <span className="md-editor-helperText">{helperNode}</span> : null}
+      </>
     )
   },
 })

package/src/components/markdown/markdown-input.spec.tsx

@@ -271,6 +271,69 @@ describe('MarkdownInput', () => {
     })
   })
 
+  describe('hideChrome', () => {
+    it('should suppress the label when hideChrome is true', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownInput value="" labelTitle="My Label" hideChrome />,
+        })
+
+        await flushUpdates()
+
+        const wrapper = document.querySelector('shade-markdown-input') as HTMLElement
+        const spans = wrapper.querySelectorAll('label > span')
+        const labelSpan = Array.from(spans).find((s) => s.textContent === 'My Label')
+        expect(labelSpan).toBeUndefined()
+      })
+    })
+
+    it('should suppress the helper text when hideChrome is true', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <MarkdownInput
+              value="short"
+              hideChrome
+              getValidationResult={({ value }) =>
+                value.length < 10 ? { isValid: false, message: 'Too short' } : { isValid: true }
+              }
+            />
+          ),
+        })
+
+        await flushUpdates()
+
+        const helperText = document.querySelector('shade-markdown-input .helperText')
+        expect(helperText).toBeNull()
+      })
+    })
+
+    it('should still set data-invalid when hideChrome is true', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <MarkdownInput value="" required hideChrome />,
+        })
+
+        await flushUpdates()
+
+        const wrapper = document.querySelector('shade-markdown-input') as HTMLElement
+        expect(wrapper.hasAttribute('data-invalid')).toBe(true)
+      })
+    })
+  })
+
   it('should render with validation inside a Form', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement

package/src/components/markdown/markdown-input.tsx

@@ -2,6 +2,7 @@ import { Shade, createComponent } from '@furystack/shades'
 import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import type { InputValidationResult } from '../inputs/input.js'
 import { FormService } from '../form.js'
+import { resolveValidationState } from './markdown-validation.js'
 
 const DEFAULT_MAX_IMAGE_SIZE = 256 * 1024
 
@@ -30,6 +31,8 @@ export type MarkdownInputProps = {
   getValidationResult?: (options: { value: string }) => InputValidationResult
   /** Optional helper text callback */
   getHelperText?: (options: { value: string; validationResult?: InputValidationResult }) => JSX.Element | string
+  /** When true, suppresses visual label and helper text rendering while keeping form mechanics */
+  hideChrome?: boolean
 }
 
 /**
@@ -41,6 +44,7 @@ export const MarkdownInput = Shade<MarkdownInputProps>({
   shadowDomName: 'shade-markdown-input',
   css: {
     display: 'block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     marginBottom: '1em',
 
     '& label': {
@@ -117,9 +121,7 @@ export const MarkdownInput = Shade<MarkdownInputProps>({
       }
     })
 
-    const validationResult = props.getValidationResult?.({ value: props.value })
-    const isRequired = props.required && !props.value
-    const isInvalid = validationResult?.isValid === false || isRequired
+    const { validationResult, isRequired, isInvalid, helperNode } = resolveValidationState(props)
 
     if (injector.cachedSingletons.has(FormService) && props.name) {
       const formService = injector.getInstance(FormService)
@@ -135,12 +137,6 @@ export const MarkdownInput = Shade<MarkdownInputProps>({
       'data-invalid': isInvalid ? '' : undefined,
     })
 
-    const helperNode =
-      (validationResult?.isValid === false && validationResult?.message) ||
-      (isRequired && 'Value is required') ||
-      props.getHelperText?.({ value: props.value, validationResult }) ||
-      ''
-
     const handleInput = (ev: Event) => {
       const target = ev.target as HTMLTextAreaElement
       props.onValueChange?.(target.value)
@@ -187,7 +183,7 @@ export const MarkdownInput = Shade<MarkdownInputProps>({
 
     return (
       <label>
-        {props.labelTitle ? <span>{props.labelTitle}</span> : null}
+        {!props.hideChrome && props.labelTitle ? <span>{props.labelTitle}</span> : null}
         <textarea
           ref={textareaRef}
           name={props.name}
@@ -200,7 +196,7 @@ export const MarkdownInput = Shade<MarkdownInputProps>({
           placeholder={props.placeholder}
           rows={props.rows ?? 10}
         />
-        {helperNode ? <span className="helperText">{helperNode}</span> : null}
+        {!props.hideChrome && helperNode ? <span className="helperText">{helperNode}</span> : null}
       </label>
     )
   },

package/src/components/markdown/markdown-validation.ts

@@ -0,0 +1,33 @@
+import type { InputValidationResult } from '../inputs/input.js'
+
+type ValidationOptions = {
+  value: string
+  required?: boolean
+  getValidationResult?: (options: { value: string }) => InputValidationResult
+  getHelperText?: (options: { value: string; validationResult?: InputValidationResult }) => JSX.Element | string
+}
+
+export type ValidationState = {
+  validationResult: InputValidationResult | undefined
+  isRequired: boolean
+  isInvalid: boolean
+  helperNode: JSX.Element | string
+}
+
+/**
+ * Computes validation state from common markdown field props.
+ * Shared between MarkdownInput and MarkdownEditor to keep the logic in one place.
+ */
+export const resolveValidationState = (options: ValidationOptions): ValidationState => {
+  const validationResult = options.getValidationResult?.({ value: options.value })
+  const isRequired = !!options.required && !options.value
+  const isInvalid = validationResult?.isValid === false || isRequired
+
+  const helperNode =
+    (validationResult?.isValid === false && validationResult?.message) ||
+    (isRequired && 'Value is required') ||
+    options.getHelperText?.({ value: options.value, validationResult }) ||
+    ''
+
+  return { validationResult, isRequired, isInvalid, helperNode }
+}

package/src/components/modal.tsx

@@ -1,4 +1,5 @@
 import { Shade, createComponent } from '@furystack/shades'
+import { cssVariableTheme } from '../services/css-variable-theme.js'
 
 export type ModalProps = {
   backdropStyle?: Partial<CSSStyleDeclaration>
@@ -11,6 +12,7 @@ export type ModalProps = {
 export const Modal = Shade<ModalProps>({
   shadowDomName: 'shade-modal',
   css: {
+    fontFamily: cssVariableTheme.typography.fontFamily,
     '& .shade-backdrop': {
       width: '100%',
       height: '100%',

package/src/components/noty-list.spec.tsx

@@ -2,7 +2,7 @@ import { Injector } from '@furystack/inject'
 import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
 import { usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { defaultDarkTheme } from '../services/default-dark-theme.js'
+import { defaultDarkTheme } from '../themes/default-dark-theme.js'
 import type { NotyModel } from '../services/noty-service.js'
 import { NotyService } from '../services/noty-service.js'
 import { ThemeProviderService } from '../services/theme-provider-service.js'

package/src/components/noty-list.tsx

@@ -1,11 +1,12 @@
 import { createComponent, Shade } from '@furystack/shades'
 import { cssVariableTheme } from '../services/css-variable-theme.js'
+import { getTextColor } from '../services/get-text-color.js'
 import type { NotyModel } from '../services/noty-service.js'
 import { NotyService } from '../services/noty-service.js'
 import { ThemeProviderService } from '../services/theme-provider-service.js'
 import { promisifyAnimation } from '../utils/promisify-animation.js'
-import { Icon } from './icons/icon.js'
 import { close } from './icons/icon-definitions.js'
+import { Icon } from './icons/icon.js'
 
 export const getDefaultNotyTimeouts = (type: NotyModel['type']) => {
   switch (type) {
@@ -96,7 +97,7 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
 
     const themeProvider = injector.getInstance(ThemeProviderService)
     const colors = themeProvider.theme.palette[props.model.type]
-    const textColor = themeProvider.getTextColor(colors.main)
+    const textColor = getTextColor(colors.main)
 
     const removeSelf = async () => {
       const hostEl = wrapperRef.current?.closest('shade-noty') as HTMLElement | null
@@ -145,6 +146,7 @@ export const NotyList = Shade({
   shadowDomName: 'shade-noty-list',
   css: {
     position: 'fixed',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     bottom: cssVariableTheme.spacing.md,
     right: cssVariableTheme.spacing.md,
     display: 'flex',

package/src/components/page-container/index.tsx

@@ -44,7 +44,7 @@ export type PageContainerProps = {
  * ```tsx
  * // Full width container
  * <PageContainer gap="16px">
- *   <h2>Dashboard</h2>
+ *   <Typography variant="h4">Dashboard</Typography>
  *   <GridOfCards />
  * </PageContainer>
  * ```
@@ -55,6 +55,7 @@ export const PageContainer = Shade<PageContainerProps>({
   elementBaseName: 'div',
   css: {
     display: 'flex',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     flexDirection: 'column',
     boxSizing: 'border-box',
     color: cssVariableTheme.text.primary,

package/src/components/page-container/page-header.spec.tsx

@@ -48,7 +48,7 @@ describe('PageHeader component', () => {
       })
     })
 
-    it('should render the title as h2', async () => {
+    it('should render the title as Typography with h4 variant', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
@@ -60,7 +60,8 @@ describe('PageHeader component', () => {
 
         await flushUpdates()
         const title = document.querySelector('[data-testid="page-header-title"]')
-        expect(title?.tagName.toLowerCase()).toBe('h2')
+        expect(title?.getAttribute('is')).toBe('shade-typography-h4')
+        expect(title?.getAttribute('data-variant')).toBe('h4')
       })
     })
   })
@@ -151,7 +152,7 @@ describe('PageHeader component', () => {
       })
     })
 
-    it('should render description as p element', async () => {
+    it('should render description as Typography with body1 variant', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
@@ -163,7 +164,8 @@ describe('PageHeader component', () => {
 
         await flushUpdates()
         const description = document.querySelector('[data-testid="page-header-description"]')
-        expect(description?.tagName.toLowerCase()).toBe('p')
+        expect(description?.getAttribute('is')).toBe('shade-typography-p')
+        expect(description?.getAttribute('data-variant')).toBe('body1')
       })
     })
   })