@furystack/shades-common-components 12.7.0 → 13.0.1

package/src/components/paper.tsx

@@ -6,10 +6,15 @@ export const Paper = Shade<{ elevation?: 0 | 1 | 2 | 3 }>({
   elementBase: HTMLDivElement,
   elementBaseName: 'div',
   css: {
+    fontFamily: cssVariableTheme.typography.fontFamily,
     borderRadius: cssVariableTheme.shape.borderRadius.md,
     padding: cssVariableTheme.spacing.md,
-    backgroundColor: cssVariableTheme.background.paper,
+    background: cssVariableTheme.background.paper,
+    backgroundImage: cssVariableTheme.background.paperImage,
     color: cssVariableTheme.text.primary,
+    borderStyle: 'solid',
+    borderWidth: cssVariableTheme.shape.borderWidth,
+    borderColor: `${cssVariableTheme.action.subtleBorder} ${cssVariableTheme.divider} ${cssVariableTheme.divider} ${cssVariableTheme.action.subtleBorder}`,
     '&[data-elevation="0"]': {
       boxShadow: cssVariableTheme.shadows.none,
     },

package/src/components/rating.tsx

@@ -65,6 +65,7 @@ export const Rating = Shade<RatingProps>({
   shadowDomName: 'shade-rating',
   css: {
     display: 'inline-flex',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     alignItems: 'center',
 
     '& .rating-container': {

package/src/components/result.spec.tsx

@@ -32,7 +32,7 @@ describe('Result', () => {
     }
   })
 
-  it('should render the title text', async () => {
+  it('should render the title as Typography', async () => {
     const el = (
       <div>
         <Result status="success" title="Operation Successful" />
@@ -43,7 +43,7 @@ describe('Result', () => {
     await flushUpdates()
     const titleEl = result.querySelector('.result-title')
     expect(titleEl).not.toBeNull()
-    expect(titleEl?.textContent).toBe('Operation Successful')
+    expect(titleEl?.getAttribute('is')).toMatch(/^shade-typography-/)
   })
 
   it('should render the subtitle when provided', async () => {
@@ -57,7 +57,7 @@ describe('Result', () => {
     await flushUpdates()
     const subtitleEl = result.querySelector('.result-subtitle')
     expect(subtitleEl).not.toBeNull()
-    expect(subtitleEl?.textContent).toBe('Some details here')
+    expect(subtitleEl?.getAttribute('is')).toMatch(/^shade-typography-/)
   })
 
   it('should not render the subtitle when not provided', async () => {

package/src/components/result.tsx

@@ -3,6 +3,7 @@ import { Shade, createComponent } from '@furystack/shades'
 import { cssVariableTheme } from '../services/css-variable-theme.js'
 import { paletteMainColors } from '../services/palette-css-vars.js'
 import { Icon } from './icons/icon.js'
+import { Typography } from './typography.js'
 import {
   checkCircle,
   errorCircle,
@@ -90,24 +91,11 @@ export const Result = Shade<ResultProps>({
     // ==========================================
 
     '& .result-title': {
-      fontSize: cssVariableTheme.typography.fontSize.xl,
-      fontWeight: cssVariableTheme.typography.fontWeight.bold,
-      color: cssVariableTheme.text.primary,
-      margin: '0',
       marginBottom: cssVariableTheme.spacing.sm,
-      lineHeight: cssVariableTheme.typography.lineHeight.tight,
     },
 
-    // ==========================================
-    // SUBTITLE
-    // ==========================================
-
     '& .result-subtitle': {
-      fontSize: cssVariableTheme.typography.fontSize.md,
-      color: cssVariableTheme.text.secondary,
-      margin: '0',
       marginBottom: cssVariableTheme.spacing.lg,
-      lineHeight: cssVariableTheme.typography.lineHeight.normal,
       maxWidth: '480px',
     },
 
@@ -144,8 +132,14 @@ export const Result = Shade<ResultProps>({
         <span className="result-icon" role="img">
           {displayIcon}
         </span>
-        <h3 className="result-title">{title}</h3>
-        {subtitle ? <p className="result-subtitle">{subtitle}</p> : null}
+        <Typography variant="h5" className="result-title" style={{ margin: '0' }}>
+          {title}
+        </Typography>
+        {subtitle ? (
+          <Typography variant="body2" color="textSecondary" className="result-subtitle" style={{ margin: '0' }}>
+            {subtitle}
+          </Typography>
+        ) : null}
         {hasChildren ? <div className="result-extra">{children}</div> : null}
       </>
     )

package/src/components/suggest/index.tsx

@@ -1,5 +1,6 @@
 import type { ChildrenList } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import { promisifyAnimation } from '../../utils/promisify-animation.js'
 import { Icon } from '../icons/icon.js'
 import { close } from '../icons/icon-definitions.js'
@@ -43,6 +44,7 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
   shadowDomName: 'shade-suggest',
   css: {
     ...searchableInputStyles,
+    fontFamily: cssVariableTheme.typography.fontFamily,
     '& .suggest-wrapper': {
       display: 'flex',
       flexDirection: 'column',

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

@@ -6,6 +6,7 @@ export const SuggestInput = Shade<{ manager: SuggestManager<any> }>({
   shadowDomName: 'shades-suggest-input',
   css: {
     width: '100%',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     overflow: 'hidden',
     '& input': {
       color: cssVariableTheme.text.primary,

package/src/components/suggest/suggestion-list.tsx

@@ -8,6 +8,7 @@ export const SuggestionList: <T>(props: { manager: SuggestManager<T> }, children
   Shade<{ manager: SuggestManager<any> }>({
     shadowDomName: 'shade-suggest-suggestion-list',
     css: {
+      fontFamily: cssVariableTheme.typography.fontFamily,
       '& .suggestion-items-container': {
         borderTop: 'none',
         position: 'absolute',
@@ -17,7 +18,8 @@ export const SuggestionList: <T>(props: { manager: SuggestManager<T> }, children
         overflow: 'hidden',
         zIndex: '1',
         left: 'auto',
-        backgroundColor: cssVariableTheme.background.paper,
+        background: cssVariableTheme.background.paper,
+        backgroundImage: cssVariableTheme.background.paperImage,
         color: cssVariableTheme.text.secondary,
         boxShadow: cssVariableTheme.shadows.lg,
         backdropFilter: `blur(${cssVariableTheme.effects.blurXl})`,

package/src/components/tabs.tsx

@@ -74,6 +74,7 @@ export const Tabs = Shade<{
 }>({
   shadowDomName: 'shade-tabs',
   css: {
+    fontFamily: cssVariableTheme.typography.fontFamily,
     width: '100%',
     height: '100%',
     display: 'flex',

package/src/components/timeline.spec.tsx

@@ -56,18 +56,6 @@ describe('TimelineItem', () => {
     expect(label.textContent).toBe('Jan 2024')
   })
 
-  it('should not render a label when not provided', async () => {
-    const el = (
-      <div>
-        <TimelineItem>Event</TimelineItem>
-      </div>
-    )
-    const item = el.firstElementChild as JSX.Element
-    item.updateComponent()
-    await flushUpdates()
-    expect(item.querySelector('.timeline-label')).toBeNull()
-  })
-
   it('should set custom dot when dot prop is provided', async () => {
     const el = (
       <div>
@@ -194,23 +182,6 @@ describe('Timeline', () => {
     expect(timeline.getAttribute('data-mode')).toBe('left')
   })
 
-  it('should mark last item with data-last', async () => {
-    const el = (
-      <div>
-        <Timeline>
-          <TimelineItem>First</TimelineItem>
-          <TimelineItem>Last</TimelineItem>
-        </Timeline>
-      </div>
-    )
-    const timeline = el.firstElementChild as JSX.Element
-    timeline.updateComponent()
-    await flushUpdates()
-    const items = timeline.querySelectorAll('shade-timeline-item')
-    expect(items[0].hasAttribute('data-last')).toBe(false)
-    expect(items[1].hasAttribute('data-last')).toBe(true)
-  })
-
   it('should add pending item when pending is true', async () => {
     const el = (
       <div>
@@ -225,70 +196,4 @@ describe('Timeline', () => {
     const items = timeline.querySelectorAll('shade-timeline-item')
     expect(items.length).toBe(2)
   })
-
-  it('should not mark original last item as data-last when pending is present', async () => {
-    const el = (
-      <div>
-        <Timeline pending>
-          <TimelineItem>First</TimelineItem>
-          <TimelineItem>Second</TimelineItem>
-        </Timeline>
-      </div>
-    )
-    const timeline = el.firstElementChild as JSX.Element
-    timeline.updateComponent()
-    await flushUpdates()
-    const items = timeline.querySelectorAll('shade-timeline-item')
-    expect(items[0].hasAttribute('data-last')).toBe(false)
-    expect(items[1].hasAttribute('data-last')).toBe(false)
-  })
-
-  it('should set data-side="right" on items in right mode', async () => {
-    const el = (
-      <div>
-        <Timeline mode="right">
-          <TimelineItem>Event</TimelineItem>
-        </Timeline>
-      </div>
-    )
-    const timeline = el.firstElementChild as JSX.Element
-    timeline.updateComponent()
-    await flushUpdates()
-    const item = timeline.querySelector('shade-timeline-item') as HTMLElement
-    expect(item.getAttribute('data-side')).toBe('right')
-  })
-
-  it('should alternate data-side in alternate mode', async () => {
-    const el = (
-      <div>
-        <Timeline mode="alternate">
-          <TimelineItem>First</TimelineItem>
-          <TimelineItem>Second</TimelineItem>
-          <TimelineItem>Third</TimelineItem>
-        </Timeline>
-      </div>
-    )
-    const timeline = el.firstElementChild as JSX.Element
-    timeline.updateComponent()
-    await flushUpdates()
-    const items = timeline.querySelectorAll('shade-timeline-item')
-    expect(items[0].getAttribute('data-side')).toBe('left')
-    expect(items[1].getAttribute('data-side')).toBe('right')
-    expect(items[2].getAttribute('data-side')).toBe('left')
-  })
-
-  it('should not set data-side in left mode', async () => {
-    const el = (
-      <div>
-        <Timeline mode="left">
-          <TimelineItem>Event</TimelineItem>
-        </Timeline>
-      </div>
-    )
-    const timeline = el.firstElementChild as JSX.Element
-    timeline.updateComponent()
-    await flushUpdates()
-    const item = timeline.querySelector('shade-timeline-item') as HTMLElement
-    expect(item.hasAttribute('data-side')).toBe(false)
-  })
 })

package/src/components/timeline.tsx

@@ -31,9 +31,10 @@ export const TimelineItem = Shade<TimelineItemProps>({
       flex: '1',
       textAlign: 'right',
       paddingRight: cssVariableTheme.spacing.md,
-      paddingTop: '2px',
+      paddingTop: cssVariableTheme.spacing.xs,
       fontFamily: cssVariableTheme.typography.fontFamily,
       fontSize: cssVariableTheme.typography.fontSize.sm,
+      lineHeight: cssVariableTheme.typography.lineHeight.normal,
       color: cssVariableTheme.text.secondary,
       boxSizing: 'border-box',
     },
@@ -44,6 +45,21 @@ export const TimelineItem = Shade<TimelineItemProps>({
       alignItems: 'center',
       flexShrink: '0',
       width: '24px',
+      paddingTop: cssVariableTheme.spacing.xs,
+    },
+
+    '& .timeline-dot-line': {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: '0',
+    },
+
+    '& .timeline-dot-line::before': {
+      content: '"\\200b"',
+      fontSize: cssVariableTheme.typography.fontSize.sm,
+      lineHeight: cssVariableTheme.typography.lineHeight.normal,
+      fontFamily: cssVariableTheme.typography.fontFamily,
     },
 
     '& .timeline-dot': {
@@ -56,7 +72,6 @@ export const TimelineItem = Shade<TimelineItemProps>({
       backgroundColor: 'var(--timeline-dot-color)',
       flexShrink: '0',
       zIndex: '1',
-      marginTop: '5px',
     },
 
     '& .timeline-dot[data-custom]': {
@@ -83,34 +98,18 @@ export const TimelineItem = Shade<TimelineItemProps>({
 
     '& .timeline-content': {
       flex: '1',
+      paddingTop: cssVariableTheme.spacing.xs,
       paddingLeft: cssVariableTheme.spacing.md,
       paddingBottom: cssVariableTheme.spacing.lg,
       fontFamily: cssVariableTheme.typography.fontFamily,
       fontSize: cssVariableTheme.typography.fontSize.sm,
+      lineHeight: cssVariableTheme.typography.lineHeight.normal,
       color: cssVariableTheme.text.primary,
       boxSizing: 'border-box',
     },
 
-    // When placed in a right-mode or alternate-right context, the label goes right and content goes left
-    '&[data-side="right"] .timeline-label': {
-      textAlign: 'left',
-      paddingRight: '0',
-      paddingLeft: cssVariableTheme.spacing.md,
-      order: '3',
-    },
-    '&[data-side="right"] .timeline-content': {
-      textAlign: 'right',
-      paddingLeft: '0',
-      paddingRight: cssVariableTheme.spacing.md,
-      order: '1',
-    },
-    '&[data-side="right"] .timeline-dot-column': {
-      order: '2',
-    },
-
-    // Last item: hide tail
-    '&[data-last] .timeline-tail': {
-      visibility: 'hidden',
+    '&:last-of-type .timeline-tail': {
+      display: 'none',
     },
   },
   render: ({ props, children, useHostProps }) => {
@@ -128,10 +127,12 @@ export const TimelineItem = Shade<TimelineItemProps>({
 
     return (
       <>
-        {label !== undefined ? <div className="timeline-label">{label}</div> : null}
+        <div className="timeline-label">{label}</div>
         <div className="timeline-dot-column">
-          <div className="timeline-dot" {...(dot ? { 'data-custom': '' } : {})}>
-            {dot ?? null}
+          <div className="timeline-dot-line">
+            <div className="timeline-dot" {...(dot ? { 'data-custom': '' } : {})}>
+              {dot ?? null}
+            </div>
           </div>
           <div className="timeline-tail" {...(isPending ? { 'data-pending': '' } : {})} />
         </div>
@@ -164,6 +165,42 @@ export const Timeline = Shade<TimelineProps>({
     margin: '0',
     listStyle: 'none',
     fontFamily: cssVariableTheme.typography.fontFamily,
+
+    '&[data-mode="right"] > shade-timeline-item .timeline-label': {
+      display: 'block',
+      textAlign: 'left',
+      paddingRight: '0',
+      paddingLeft: cssVariableTheme.spacing.md,
+      order: '3',
+    },
+    '&[data-mode="right"] > shade-timeline-item .timeline-content': {
+      textAlign: 'right',
+      paddingLeft: '0',
+      paddingRight: cssVariableTheme.spacing.md,
+      order: '1',
+    },
+    '&[data-mode="right"] > shade-timeline-item .timeline-dot-column': {
+      order: '2',
+    },
+
+    '&[data-mode="alternate"] > shade-timeline-item .timeline-label': {
+      display: 'block',
+    },
+    '&[data-mode="alternate"] > shade-timeline-item:nth-of-type(even) .timeline-label': {
+      textAlign: 'left',
+      paddingRight: '0',
+      paddingLeft: cssVariableTheme.spacing.md,
+      order: '3',
+    },
+    '&[data-mode="alternate"] > shade-timeline-item:nth-of-type(even) .timeline-content': {
+      textAlign: 'right',
+      paddingLeft: '0',
+      paddingRight: cssVariableTheme.spacing.md,
+      order: '1',
+    },
+    '&[data-mode="alternate"] > shade-timeline-item:nth-of-type(even) .timeline-dot-column': {
+      order: '2',
+    },
   },
   render: ({ props, children, useHostProps }) => {
     const { mode = 'left', pending, style } = props
@@ -173,39 +210,11 @@ export const Timeline = Shade<TimelineProps>({
       ...(style ? { style: style as Record<string, string> } : {}),
     })
 
-    const items = (Array.isArray(children) ? children.flat() : children ? [children] : []) as JSX.Element[]
-    const totalItems = pending ? items.length + 1 : items.length
-
-    items.forEach((child, index) => {
-      if (child && typeof child === 'object' && 'setAttribute' in child) {
-        const isLast = index === totalItems - 1
-        if (isLast) {
-          child.setAttribute('data-last', '')
-        } else {
-          child.removeAttribute('data-last')
-        }
-
-        if (mode === 'right') {
-          child.setAttribute('data-side', 'right')
-        } else if (mode === 'alternate') {
-          child.setAttribute('data-side', index % 2 === 0 ? 'left' : 'right')
-        } else {
-          child.removeAttribute('data-side')
-        }
-      }
-    })
-
     const pendingItem = pending ? (
       <TimelineItem
         color="info"
         dot={<span style={{ fontSize: cssVariableTheme.typography.fontSize.md }}>⏳</span>}
-        data-last=""
         data-pending=""
-        {...(mode === 'right'
-          ? { 'data-side': 'right' }
-          : mode === 'alternate'
-            ? { 'data-side': items.length % 2 === 0 ? 'left' : 'right' }
-            : {})}
       >
         {pending === true ? 'Loading...' : pending}
       </TimelineItem>
@@ -213,7 +222,7 @@ export const Timeline = Shade<TimelineProps>({
 
     return (
       <>
-        {items}
+        {children}
         {pendingItem}
       </>
     )

package/src/components/tooltip.tsx

@@ -26,6 +26,7 @@ export const Tooltip = Shade<TooltipProps>({
   shadowDomName: 'shade-tooltip',
   css: {
     position: 'relative',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     display: 'inline-flex',
 
     '& .tooltip-popup': {

package/src/components/tree/tree-item.tsx

@@ -23,6 +23,7 @@ export const TreeItem: <T>(props: TreeItemProps<T>, children: ChildrenList) => J
   shadowDomName: 'shade-tree-item',
   css: {
     display: 'flex',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     alignItems: 'center',
     cursor: 'default',
     userSelect: 'none',

package/src/components/tree/tree.tsx

@@ -1,6 +1,7 @@
 import type { ChildrenList, PartialElement } from '@furystack/shades'
 import { createComponent, Shade } from '@furystack/shades'
 import { ObservableValue } from '@furystack/utils'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import type { TreeService } from '../../services/tree-service.js'
 import { TreeItem } from './tree-item.js'
 
@@ -26,6 +27,7 @@ export const Tree: <T>(props: TreeProps<T>, children: ChildrenList) => JSX.Eleme
   shadowDomName: 'shade-tree',
   css: {
     display: 'block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     width: '100%',
     overflow: 'auto',
   },

package/src/components/typography.spec.tsx

@@ -25,16 +25,17 @@ describe('Typography', () => {
     await flushUpdates()
     return {
       injector,
-      element: root.querySelector('shade-typography') as HTMLElement,
+      element: root.querySelector('[is^="shade-typography"]') as HTMLElement,
       [Symbol.asyncDispose]: () => injector[Symbol.asyncDispose](),
     }
   }
 
   describe('rendering', () => {
-    it('should render a shade-typography element', async () => {
+    it('should render a customized built-in element', async () => {
       await usingAsync(await renderTypography(), async ({ element }) => {
         expect(element).toBeTruthy()
-        expect(element.tagName.toLowerCase()).toBe('shade-typography')
+        expect(element.tagName.toLowerCase()).toBe('p')
+        expect(element.getAttribute('is')).toBe('shade-typography-p')
       })
     })
 
@@ -51,11 +52,11 @@ describe('Typography', () => {
     const subtitleVariants: TypographyVariant[] = ['subtitle1', 'subtitle2']
     const inlineVariants: TypographyVariant[] = ['caption', 'overline']
 
-    it('should default to body1 variant', async () => {
+    it('should default to body1 variant with p tag', async () => {
       await usingAsync(await renderTypography(), async ({ element }) => {
         expect(element.getAttribute('data-variant')).toBe('body1')
-        const inner = element.querySelector('.typo-inner')
-        expect(inner?.tagName.toLowerCase()).toBe('p')
+        expect(element.tagName.toLowerCase()).toBe('p')
+        expect(element.getAttribute('is')).toBe('shade-typography-p')
       })
     })
 
@@ -63,8 +64,8 @@ describe('Typography', () => {
       it(`should render ${variant} tag for variant="${variant}"`, async () => {
         await usingAsync(await renderTypography({ variant }), async ({ element }) => {
           expect(element.getAttribute('data-variant')).toBe(variant)
-          const inner = element.querySelector('.typo-inner')
-          expect(inner?.tagName.toLowerCase()).toBe(variant)
+          expect(element.tagName.toLowerCase()).toBe(variant)
+          expect(element.getAttribute('is')).toBe(`shade-typography-${variant}`)
         })
       })
     })
@@ -72,8 +73,8 @@ describe('Typography', () => {
     bodyVariants.forEach((variant) => {
       it(`should render p tag for variant="${variant}"`, async () => {
         await usingAsync(await renderTypography({ variant }), async ({ element }) => {
-          const inner = element.querySelector('.typo-inner')
-          expect(inner?.tagName.toLowerCase()).toBe('p')
+          expect(element.tagName.toLowerCase()).toBe('p')
+          expect(element.getAttribute('is')).toBe('shade-typography-p')
         })
       })
     })
@@ -81,8 +82,8 @@ describe('Typography', () => {
     subtitleVariants.forEach((variant) => {
       it(`should render h6 tag for variant="${variant}"`, async () => {
         await usingAsync(await renderTypography({ variant }), async ({ element }) => {
-          const inner = element.querySelector('.typo-inner')
-          expect(inner?.tagName.toLowerCase()).toBe('h6')
+          expect(element.tagName.toLowerCase()).toBe('h6')
+          expect(element.getAttribute('is')).toBe('shade-typography-h6')
         })
       })
     })
@@ -90,8 +91,8 @@ describe('Typography', () => {
     inlineVariants.forEach((variant) => {
       it(`should render span tag for variant="${variant}"`, async () => {
         await usingAsync(await renderTypography({ variant }), async ({ element }) => {
-          const inner = element.querySelector('.typo-inner')
-          expect(inner?.tagName.toLowerCase()).toBe('span')
+          expect(element.tagName.toLowerCase()).toBe('span')
+          expect(element.getAttribute('is')).toBe('shade-typography-span')
         })
       })
     })
@@ -139,8 +140,7 @@ describe('Typography', () => {
     it('should set data-ellipsis="multiline" for numeric ellipsis', async () => {
       await usingAsync(await renderTypography({ ellipsis: 3 }), async ({ element }) => {
         expect(element.getAttribute('data-ellipsis')).toBe('multiline')
-        const inner = element.querySelector('.typo-inner') as HTMLElement
-        expect(inner.style.webkitLineClamp).toBe('3')
+        expect(element.style.webkitLineClamp).toBe('3')
       })
     })