@furystack/shades-common-components 13.4.1 → 14.0.0

package/src/components/card.tsx

@@ -21,7 +21,7 @@ export type CardProps = PartialElement<HTMLElement> & {
  * Compose with CardHeader, CardContent, CardMedia, and CardActions for structured layouts.
  */
 export const Card = Shade<CardProps>({
-  shadowDomName: 'shade-card',
+  customElementName: 'shade-card',
   css: {
     display: 'flex',
     fontFamily: cssVariableTheme.typography.fontFamily,
@@ -102,7 +102,7 @@ export type CardHeaderProps = PartialElement<HTMLElement> & {
  * Displays a title, optional subheader, avatar, and action area at the top of a Card.
  */
 export const CardHeader = Shade<CardHeaderProps>({
-  shadowDomName: 'shade-card-header',
+  customElementName: 'shade-card-header',
   css: {
     display: 'flex',
     alignItems: 'center',
@@ -174,7 +174,7 @@ export type CardContentProps = PartialElement<HTMLElement>
  * Provides padded content area within a Card.
  */
 export const CardContent = Shade<CardContentProps>({
-  shadowDomName: 'shade-card-content',
+  customElementName: 'shade-card-content',
   css: {
     display: 'block',
     padding: `0 ${cssVariableTheme.spacing.md} ${cssVariableTheme.spacing.md}`,
@@ -208,7 +208,7 @@ export type CardMediaProps = PartialElement<HTMLElement> & {
  * Displays an image or media element within a Card.
  */
 export const CardMedia = Shade<CardMediaProps>({
-  shadowDomName: 'shade-card-media',
+  customElementName: 'shade-card-media',
   css: {
     display: 'block',
     overflow: 'hidden',
@@ -242,7 +242,7 @@ export type CardActionsProps = PartialElement<HTMLElement> & {
  * Provides a row of actions (buttons, links) at the bottom of a Card.
  */
 export const CardActions = Shade<CardActionsProps>({
-  shadowDomName: 'shade-card-actions',
+  customElementName: 'shade-card-actions',
   css: {
     display: 'flex',
     alignItems: 'center',

package/src/components/carousel.tsx

@@ -34,7 +34,7 @@ const TRANSITION_MS = 400
  * keyboard navigation, and swipe gestures.
  */
 export const Carousel = Shade<CarouselProps>({
-  shadowDomName: 'shade-carousel',
+  customElementName: 'shade-carousel',
   css: {
     display: 'block',
     position: 'relative',

package/src/components/chip.tsx

@@ -25,7 +25,7 @@ const defaultColors = {
 }
 
 export const Chip = Shade<ChipProps>({
-  shadowDomName: 'shade-chip',
+  customElementName: 'shade-chip',
   css: {
     display: 'inline-flex',
     alignItems: 'center',

package/src/components/circular-progress.spec.tsx

@@ -1,10 +1,18 @@
 import { Injector } from '@furystack/inject'
-import { createComponent, initializeShadeRoot } from '@furystack/shades'
+import { createComponent, initializeShadeRoot, Shade } from '@furystack/shades'
 import { ObservableValue, sleepAsync, usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { ThemeProviderService } from '../services/theme-provider-service.js'
 import { CircularProgress } from './circular-progress.js'
 
+const CircularWrapper = Shade<{ obs: ObservableValue<number> }>({
+  customElementName: 'test-circular-progress-wrapper',
+  render: ({ props, useObservable }) => {
+    const [value] = useObservable('value', props.obs)
+    return <CircularProgress variant="determinate" value={value} />
+  },
+})
+
 describe('CircularProgress', () => {
   let originalAnimate: typeof Element.prototype.animate
 
@@ -35,7 +43,7 @@ describe('CircularProgress', () => {
     vi.restoreAllMocks()
   })
 
-  it('should render with shadow DOM', async () => {
+  it('should render as custom element', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
@@ -147,12 +155,11 @@ describe('CircularProgress', () => {
     it('should set aria-valuenow for determinate variant', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const value = new ObservableValue(50)
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <CircularProgress variant="determinate" value={value} />,
+          jsxElement: <CircularProgress variant="determinate" value={50} />,
         })
 
         await sleepAsync(50)
@@ -167,12 +174,11 @@ describe('CircularProgress', () => {
     it('should clamp value to 0-100 range', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const value = new ObservableValue(150)
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <CircularProgress variant="determinate" value={value} />,
+          jsxElement: <CircularProgress variant="determinate" value={150} />,
         })
 
         await sleepAsync(50)
@@ -182,15 +188,15 @@ describe('CircularProgress', () => {
       })
     })
 
-    it('should update stroke-dashoffset when observable value changes', async () => {
+    it('should update stroke-dashoffset when value prop changes', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const value = new ObservableValue(0)
+        const obs = new ObservableValue(0)
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <CircularProgress variant="determinate" value={value} />,
+          jsxElement: <CircularWrapper obs={obs} />,
         })
 
         await sleepAsync(50)
@@ -198,7 +204,7 @@ describe('CircularProgress', () => {
         const circle = document.querySelector('shade-circular-progress .progress-circle') as SVGCircleElement
         const initialOffset = circle.style.strokeDashoffset
 
-        value.setValue(75)
+        obs.setValue(75)
         await sleepAsync(50)
 
         const updatedOffset = circle.style.strokeDashoffset
@@ -206,15 +212,15 @@ describe('CircularProgress', () => {
       })
     })
 
-    it('should update aria-valuenow when observable value changes', async () => {
+    it('should update aria-valuenow when value prop changes', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const value = new ObservableValue(20)
+        const obs = new ObservableValue(20)
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <CircularProgress variant="determinate" value={value} />,
+          jsxElement: <CircularWrapper obs={obs} />,
         })
 
         await sleepAsync(50)
@@ -222,7 +228,7 @@ describe('CircularProgress', () => {
         const el = document.querySelector('shade-circular-progress') as HTMLElement
         expect(el.getAttribute('aria-valuenow')).toBe('20')
 
-        value.setValue(85)
+        obs.setValue(85)
         await sleepAsync(50)
 
         expect(el.getAttribute('aria-valuenow')).toBe('85')

package/src/components/circular-progress.tsx

@@ -1,15 +1,13 @@
 import { Shade, createComponent } from '@furystack/shades'
-import type { ObservableValue } from '@furystack/utils'
 import { cssVariableTheme } from '../services/css-variable-theme.js'
 import type { Palette } from '../services/theme-provider-service.js'
 import { ThemeProviderService } from '../services/theme-provider-service.js'
 
 export type CircularProgressProps = {
   /**
-   * An observable progress value (0–100). Used when variant is 'determinate'.
-   * The component subscribes internally and updates the arc without re-rendering.
+   * A progress value (0–100). Used when variant is 'determinate'.
    */
-  value?: ObservableValue<number>
+  value?: number
   /**
    * The variant of the progress indicator.
    * - 'determinate': shows a fixed arc based on `value`
@@ -41,7 +39,7 @@ const DEFAULT_THICKNESS = 3.6
 const clampValue = (v: number) => Math.max(0, Math.min(100, v))
 
 export const CircularProgress = Shade<CircularProgressProps>({
-  shadowDomName: 'shade-circular-progress',
+  customElementName: 'shade-circular-progress',
   css: {
     display: 'inline-flex',
     fontFamily: cssVariableTheme.typography.fontFamily,
@@ -65,10 +63,10 @@ export const CircularProgress = Shade<CircularProgressProps>({
       transition: `stroke-dashoffset ${cssVariableTheme.transitions.duration.normal} ${cssVariableTheme.transitions.easing.easeInOut}`,
     },
   },
-  render: ({ props, injector, useObservable, useHostProps }) => {
+  render: ({ props, injector, useHostProps }) => {
     const themeProvider = injector.getInstance(ThemeProviderService)
     const variant = props.variant || 'indeterminate'
-    const value = clampValue(props.value?.getValue() ?? 0)
+    const value = clampValue(props.value ?? 0)
     const size = props.size ?? DEFAULT_SIZE
     const thickness = props.thickness ?? DEFAULT_THICKNESS
     const indeterminate = variant === 'indeterminate'
@@ -76,10 +74,6 @@ export const CircularProgress = Shade<CircularProgressProps>({
     const radius = (SVG_SIZE - thickness) / 2
     const circumference = 2 * Math.PI * radius
 
-    if (variant === 'determinate' && props.value) {
-      useObservable('ariaValue', props.value)
-    }
-
     const color = themeProvider.theme.palette[props.color || 'primary'].main
     useHostProps({
       role: 'progressbar',

package/src/components/command-palette/command-palette-input.tsx

@@ -3,7 +3,7 @@ import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import type { CommandPaletteManager } from './command-palette-manager.js'
 
 export const CommandPaletteInput = Shade<{ manager: CommandPaletteManager }>({
-  shadowDomName: 'shades-command-palette-input',
+  customElementName: 'shades-command-palette-input',
   css: {
     width: '100%',
     fontFamily: cssVariableTheme.typography.fontFamily,

package/src/components/command-palette/command-palette-suggestion-list.spec.tsx

@@ -54,7 +54,7 @@ describe('CommandPaletteSuggestionList', () => {
     onSelected: vi.fn(),
   })
 
-  it('should render with shadow DOM', async () => {
+  it('should render as custom element', async () => {
     await usingAsync(new Injector(), async (injector) => {
       await usingAsync(createManager(), async (manager) => {
         const rootElement = document.getElementById('root') as HTMLDivElement

package/src/components/command-palette/command-palette-suggestion-list.tsx

@@ -4,7 +4,7 @@ import { promisifyAnimation } from '../../utils/promisify-animation.js'
 import type { CommandPaletteManager } from './command-palette-manager.js'
 
 export const CommandPaletteSuggestionList = Shade<{ manager: CommandPaletteManager; fullScreenSuggestions?: boolean }>({
-  shadowDomName: 'shade-command-palette-suggestion-list',
+  customElementName: 'shade-command-palette-suggestion-list',
   css: {
     fontFamily: cssVariableTheme.typography.fontFamily,
     '& .suggestion-items-container': {

package/src/components/command-palette/index.tsx

@@ -23,7 +23,7 @@ export interface CommandPaletteProps {
 }
 
 export const CommandPalette = Shade<CommandPaletteProps>({
-  shadowDomName: 'shade-command-palette',
+  customElementName: 'shade-command-palette',
   css: {
     ...searchableInputStyles,
     fontFamily: cssVariableTheme.typography.fontFamily,

package/src/components/context-menu/context-menu-item.tsx

@@ -11,7 +11,7 @@ export type ContextMenuItemProps<T> = {
 
 export const ContextMenuItemComponent: <T>(props: ContextMenuItemProps<T>, children: ChildrenList) => JSX.Element<any> =
   Shade<ContextMenuItemProps<any>>({
-    shadowDomName: 'shade-context-menu-item',
+    customElementName: 'shade-context-menu-item',
     css: {
       display: 'flex',
       fontFamily: cssVariableTheme.typography.fontFamily,

package/src/components/context-menu/context-menu.tsx

@@ -12,7 +12,7 @@ export type ContextMenuProps<T> = {
 export const ContextMenu: <T>(props: ContextMenuProps<T>, children: ChildrenList) => JSX.Element<any> = Shade<
   ContextMenuProps<any>
 >({
-  shadowDomName: 'shade-context-menu',
+  customElementName: 'shade-context-menu',
   css: {
     fontFamily: cssVariableTheme.typography.fontFamily,
     '& .context-menu-backdrop': {

package/src/components/data-grid/body.tsx

@@ -24,7 +24,7 @@ export const DataGridBody: <T, Column extends string>(
   props: DataGridBodyProps<T, Column>,
   children: ChildrenList,
 ) => JSX.Element<any> = Shade({
-  shadowDomName: 'shade-data-grid-body',
+  customElementName: 'shade-data-grid-body',
   elementBase: HTMLTableSectionElement,
   elementBaseName: 'tbody',
   css: {

package/src/components/data-grid/data-grid-row.tsx

@@ -21,7 +21,7 @@ export const DataGridRow: <T, Column extends string>(
   props: DataGridRowProps<T, Column>,
   children: ChildrenList,
 ) => JSX.Element<any> = Shade({
-  shadowDomName: 'shades-data-grid-row',
+  customElementName: 'shades-data-grid-row',
   css: {
     display: 'table-row',
     fontFamily: cssVariableTheme.typography.fontFamily,