@furystack/shades-common-components 15.0.4 → 15.1.0

package/esm/components/timeline.spec.js

@@ -139,5 +139,79 @@ describe('Timeline', () => {
         const items = timeline.querySelectorAll('shade-timeline-item');
         expect(items.length).toBe(2);
     });
+    describe('orientation', () => {
+        it('should not set data-orientation when orientation is not specified (defaults to vertical)', async () => {
+            const el = (createComponent("div", null,
+                createComponent(Timeline, null,
+                    createComponent(TimelineItem, null, "Event"))));
+            const timeline = el.firstElementChild;
+            timeline.updateComponent();
+            await flushUpdates();
+            expect(timeline.hasAttribute('data-orientation')).toBe(false);
+        });
+        it('should not set data-orientation when orientation is "vertical"', async () => {
+            const el = (createComponent("div", null,
+                createComponent(Timeline, { orientation: "vertical" },
+                    createComponent(TimelineItem, null, "Event"))));
+            const timeline = el.firstElementChild;
+            timeline.updateComponent();
+            await flushUpdates();
+            expect(timeline.hasAttribute('data-orientation')).toBe(false);
+        });
+        it('should set data-orientation="horizontal" when orientation is "horizontal"', async () => {
+            const el = (createComponent("div", null,
+                createComponent(Timeline, { orientation: "horizontal" },
+                    createComponent(TimelineItem, null, "Event"))));
+            const timeline = el.firstElementChild;
+            timeline.updateComponent();
+            await flushUpdates();
+            expect(timeline.getAttribute('data-orientation')).toBe('horizontal');
+        });
+        it('should render children in horizontal mode', async () => {
+            const el = (createComponent("div", null,
+                createComponent(Timeline, { orientation: "horizontal" },
+                    createComponent(TimelineItem, null, "First"),
+                    createComponent(TimelineItem, null, "Second"),
+                    createComponent(TimelineItem, null, "Third"))));
+            const timeline = el.firstElementChild;
+            timeline.updateComponent();
+            await flushUpdates();
+            const items = timeline.querySelectorAll('shade-timeline-item');
+            expect(items.length).toBe(3);
+        });
+        it('should support horizontal with mode="alternate"', async () => {
+            const el = (createComponent("div", null,
+                createComponent(Timeline, { orientation: "horizontal", mode: "alternate" },
+                    createComponent(TimelineItem, null, "First"),
+                    createComponent(TimelineItem, null, "Second"))));
+            const timeline = el.firstElementChild;
+            timeline.updateComponent();
+            await flushUpdates();
+            expect(timeline.getAttribute('data-orientation')).toBe('horizontal');
+            expect(timeline.getAttribute('data-mode')).toBe('alternate');
+        });
+        it('should support horizontal with mode="right"', async () => {
+            const el = (createComponent("div", null,
+                createComponent(Timeline, { orientation: "horizontal", mode: "right" },
+                    createComponent(TimelineItem, null, "First"))));
+            const timeline = el.firstElementChild;
+            timeline.updateComponent();
+            await flushUpdates();
+            expect(timeline.getAttribute('data-orientation')).toBe('horizontal');
+            expect(timeline.getAttribute('data-mode')).toBe('right');
+        });
+        it('should add pending item in horizontal mode', async () => {
+            const el = (createComponent("div", null,
+                createComponent(Timeline, { orientation: "horizontal", pending: "Loading..." },
+                    createComponent(TimelineItem, null, "Step 1"),
+                    createComponent(TimelineItem, null, "Step 2"))));
+            const timeline = el.firstElementChild;
+            timeline.updateComponent();
+            await flushUpdates();
+            const items = timeline.querySelectorAll('shade-timeline-item');
+            expect(items.length).toBe(3);
+            expect(timeline.getAttribute('data-orientation')).toBe('horizontal');
+        });
+    });
 });
 //# sourceMappingURL=timeline.spec.js.map

package/esm/components/timeline.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.spec.js","sourceRoot":"","sources":["../../src/components/timeline.spec.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"timeline.spec.js","sourceRoot":"","sources":["../../src/components/timeline.spec.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@furystack/shades-common-components",
-  "version": "15.0.4",
+  "version": "15.1.0",
   "description": "Common UI components for FuryStack Shades",
   "type": "module",
   "scripts": {

package/src/components/button-group.spec.tsx

@@ -602,6 +602,12 @@ describe('SegmentedControl', () => {
         expect(control.getAttribute('data-size')).toBe('small')
       })
     })
+
+    it('should set data-size="large" for large size', async () => {
+      await usingAsync(await renderSegmented({ size: 'large' }), async ({ control }) => {
+        expect(control.getAttribute('data-size')).toBe('large')
+      })
+    })
   })
 
   describe('color', () => {

package/src/components/button-group.tsx

@@ -3,6 +3,7 @@ import { Shade, createComponent } from '@furystack/shades'
 import { buildTransition, cssVariableTheme } from '../services/css-variable-theme.js'
 import { paletteFullColors } from '../services/palette-css-vars.js'
 import type { Palette } from '../services/theme-provider-service.js'
+import type { ComponentSize } from './component-size.js'
 
 // ==========================================
 // ButtonGroup
@@ -86,7 +87,7 @@ export type ToggleButtonProps = PartialElement<HTMLButtonElement> & {
    * The size of the toggle button.
    * @default 'medium'
    */
-  size?: 'small' | 'medium' | 'large'
+  size?: ComponentSize
   /**
    * Whether the button is in a pressed (selected) state.
    * Use this for standalone toggle buttons or controlled state.
@@ -202,7 +203,7 @@ export type ToggleButtonGroupProps = PartialElement<HTMLElement> & {
    * Individual ToggleButton `size` props are overridden by this value.
    * @default 'medium'
    */
-  size?: 'small' | 'medium' | 'large'
+  size?: ComponentSize
 }
 
 export const ToggleButtonGroup: (props: ToggleButtonGroupProps, children: ChildrenList) => JSX.Element =
@@ -364,7 +365,7 @@ export type SegmentedControlProps = PartialElement<HTMLElement> & {
   /** Whether the entire control is disabled */
   disabled?: boolean
   /** Size variant */
-  size?: 'small' | 'medium'
+  size?: ComponentSize
 }
 
 const defaultSegmentedColors = {
@@ -425,6 +426,11 @@ export const SegmentedControl = Shade<SegmentedControlProps>({
       padding: `${cssVariableTheme.spacing.xs} ${cssVariableTheme.spacing.md}`,
       fontSize: cssVariableTheme.typography.fontSize.sm,
     },
+
+    '&[data-size="large"] .segmented-option': {
+      padding: `${cssVariableTheme.spacing.md} ${cssVariableTheme.spacing.xl}`,
+      fontSize: cssVariableTheme.typography.fontSize.lg,
+    },
   },
   render: ({ props, useHostProps }) => {
     const { options, value, onValueChange, color, disabled, size, style } = props
@@ -435,7 +441,7 @@ export const SegmentedControl = Shade<SegmentedControlProps>({
 
     useHostProps({
       role: 'radiogroup',
-      'data-size': size === 'small' ? 'small' : undefined,
+      'data-size': size && size !== 'medium' ? size : undefined,
       style: {
         '--seg-color-main': colors.main,
         '--seg-color-main-contrast': colors.mainContrast,

package/src/components/button.tsx

@@ -3,6 +3,7 @@ import { Shade, createComponent } from '@furystack/shades'
 import { buildTransition, cssVariableTheme } from '../services/css-variable-theme.js'
 import { paletteFullColors } from '../services/palette-css-vars.js'
 import type { Palette } from '../services/theme-provider-service.js'
+import type { ComponentSize } from './component-size.js'
 
 export type ButtonProps = PartialElement<HTMLButtonElement> & {
   /**
@@ -18,7 +19,7 @@ export type ButtonProps = PartialElement<HTMLButtonElement> & {
    * The size of the button.
    * @default 'medium'
    */
-  size?: 'small' | 'medium' | 'large'
+  size?: ComponentSize
   /** When true, applies the error palette color regardless of the `color` prop */
   danger?: boolean
   /** When true, shows a loading spinner and disables the button */

package/src/components/chip.spec.tsx

@@ -92,6 +92,30 @@ describe('Chip', () => {
     expect(chip.getAttribute('data-size')).toBe('small')
   })
 
+  it('should set data-size attribute when size is large', async () => {
+    const el = (
+      <div>
+        <Chip size="large">Large</Chip>
+      </div>
+    )
+    const chip = el.firstElementChild as JSX.Element
+    chip.updateComponent()
+    await flushUpdates()
+    expect(chip.getAttribute('data-size')).toBe('large')
+  })
+
+  it('should not set data-size when size is medium (default)', async () => {
+    const el = (
+      <div>
+        <Chip size="medium">Medium</Chip>
+      </div>
+    )
+    const chip = el.firstElementChild as JSX.Element
+    chip.updateComponent()
+    await flushUpdates()
+    expect(chip.getAttribute('data-size')).toBeNull()
+  })
+
   it('should set data-disabled attribute when disabled', async () => {
     const el = (
       <div>

package/src/components/chip.tsx

@@ -3,13 +3,14 @@ import { Shade, createComponent } from '@furystack/shades'
 import { buildTransition, cssVariableTheme } from '../services/css-variable-theme.js'
 import { paletteFullColors } from '../services/palette-css-vars.js'
 import type { Palette } from '../services/theme-provider-service.js'
+import type { ComponentSize } from './component-size.js'
 import { Icon } from './icons/icon.js'
 import { close } from './icons/icon-definitions.js'
 
 export type ChipProps = PartialElement<HTMLElement> & {
   variant?: 'filled' | 'outlined'
   color?: keyof Palette
-  size?: 'small' | 'medium'
+  size?: ComponentSize
   disabled?: boolean
   clickable?: boolean
   onDelete?: (ev: MouseEvent) => void
@@ -58,6 +59,12 @@ export const Chip = Shade<ChipProps>({
       fontSize: cssVariableTheme.typography.fontSize.xs,
     },
 
+    '&[data-size="large"]': {
+      height: '40px',
+      padding: `0 ${cssVariableTheme.spacing.lg}`,
+      fontSize: cssVariableTheme.typography.fontSize.md,
+    },
+
     // Disabled state
     '&[data-disabled]': {
       opacity: cssVariableTheme.action.disabledOpacity,
@@ -155,7 +162,7 @@ export const Chip = Shade<ChipProps>({
     const isClickable = clickable || rest.onclick
     useHostProps({
       'data-variant': variant || undefined,
-      'data-size': size === 'small' ? 'small' : undefined,
+      'data-size': size && size !== 'medium' ? size : undefined,
       'data-disabled': disabled ? '' : undefined,
       'data-clickable': isClickable ? '' : undefined,
       tabIndex: isClickable && !disabled ? 0 : undefined,

package/src/components/component-size.ts

@@ -0,0 +1,5 @@
+/**
+ * Standard size tiers for interactive components.
+ * @default 'medium'
+ */
+export type ComponentSize = 'small' | 'medium' | 'large'

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './component-size.js'
 export * from './accordion/index.js'
 export * from './alert.js'
 export * from './animations.js'
@@ -39,6 +40,7 @@ export * from './pagination.js'
 export * from './paper.js'
 export * from './rating.js'
 export * from './result.js'
+export * from './route-breadcrumb.js'
 export * from './skeleton.js'
 export * from './styles.js'
 export * from './suggest/index.js'

package/src/components/inputs/checkbox.spec.tsx

@@ -374,4 +374,46 @@ describe('Checkbox', () => {
       })
     })
   })
+
+  describe('size', () => {
+    it('should not set data-size when size is not specified', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        initializeShadeRoot({ injector, rootElement, jsxElement: <Checkbox /> })
+        await flushUpdates()
+        const el = document.querySelector('shade-checkbox') as HTMLElement
+        expect(el.getAttribute('data-size')).toBeNull()
+      })
+    })
+
+    it('should not set data-size for medium size (default)', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        initializeShadeRoot({ injector, rootElement, jsxElement: <Checkbox size="medium" /> })
+        await flushUpdates()
+        const el = document.querySelector('shade-checkbox') as HTMLElement
+        expect(el.getAttribute('data-size')).toBeNull()
+      })
+    })
+
+    it('should set data-size="small" for small size', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        initializeShadeRoot({ injector, rootElement, jsxElement: <Checkbox size="small" /> })
+        await flushUpdates()
+        const el = document.querySelector('shade-checkbox') as HTMLElement
+        expect(el.getAttribute('data-size')).toBe('small')
+      })
+    })
+
+    it('should set data-size="large" for large size', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        initializeShadeRoot({ injector, rootElement, jsxElement: <Checkbox size="large" /> })
+        await flushUpdates()
+        const el = document.querySelector('shade-checkbox') as HTMLElement
+        expect(el.getAttribute('data-size')).toBe('large')
+      })
+    })
+  })
 })

package/src/components/inputs/checkbox.tsx

@@ -3,6 +3,7 @@ import { Shade, createComponent } from '@furystack/shades'
 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'
+import type { ComponentSize } from '../component-size.js'
 import { FormService } from '../form.js'
 
 export type CheckboxProps = {
@@ -42,6 +43,11 @@ export type CheckboxProps = {
    * Whether the checkbox is required
    */
   required?: boolean
+  /**
+   * The size of the checkbox.
+   * @default 'medium'
+   */
+  size?: ComponentSize
   /**
    * Optional props for the label element
    */
@@ -144,6 +150,54 @@ export const Checkbox = Shade<CheckboxProps>({
       opacity: cssVariableTheme.action.disabledOpacity,
       cursor: 'not-allowed',
     },
+
+    // Size: small
+    '&[data-size="small"] label': {
+      fontSize: cssVariableTheme.typography.fontSize.xs,
+    },
+    '&[data-size="small"] .checkbox-control': {
+      width: '16px',
+      height: '16px',
+    },
+    '&[data-size="small"] input[type="checkbox"]': {
+      width: '16px',
+      height: '16px',
+    },
+    '&[data-size="small"] input[type="checkbox"]:checked::after': {
+      left: '4px',
+      top: '1px',
+      width: '4px',
+      height: '8px',
+    },
+    '&[data-size="small"][data-indeterminate] input[type="checkbox"]::after': {
+      left: '3px',
+      top: '6px',
+      width: '8px',
+    },
+
+    // Size: large
+    '&[data-size="large"] label': {
+      fontSize: cssVariableTheme.typography.fontSize.md,
+    },
+    '&[data-size="large"] .checkbox-control': {
+      width: '24px',
+      height: '24px',
+    },
+    '&[data-size="large"] input[type="checkbox"]': {
+      width: '24px',
+      height: '24px',
+    },
+    '&[data-size="large"] input[type="checkbox"]:checked::after': {
+      left: '8px',
+      top: '3px',
+      width: '6px',
+      height: '12px',
+    },
+    '&[data-size="large"][data-indeterminate] input[type="checkbox"]::after': {
+      left: '5px',
+      top: '10px',
+      width: '12px',
+    },
   },
   render: ({ props, injector, useDisposable, useHostProps, useRef }) => {
     const inputRef = useRef<HTMLInputElement>('formInput')
@@ -166,6 +220,7 @@ export const Checkbox = Shade<CheckboxProps>({
 
     const color = themeProvider.theme.palette[props.color || 'primary'].main
     useHostProps({
+      'data-size': props.size && props.size !== 'medium' ? props.size : undefined,
       'data-disabled': props.disabled ? '' : undefined,
       'data-indeterminate': props.indeterminate ? '' : undefined,
       style: { '--checkbox-color': color },

package/src/components/inputs/input-number.spec.tsx

@@ -683,4 +683,46 @@ describe('InputNumber', () => {
       })
     })
   })
+
+  describe('size', () => {
+    it('should not set data-size when size is not specified', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        initializeShadeRoot({ injector, rootElement, jsxElement: <InputNumber /> })
+        await flushUpdates()
+        const el = document.querySelector('shade-input-number') as HTMLElement
+        expect(el.getAttribute('data-size')).toBeNull()
+      })
+    })
+
+    it('should not set data-size for medium size (default)', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        initializeShadeRoot({ injector, rootElement, jsxElement: <InputNumber size="medium" /> })
+        await flushUpdates()
+        const el = document.querySelector('shade-input-number') as HTMLElement
+        expect(el.getAttribute('data-size')).toBeNull()
+      })
+    })
+
+    it('should set data-size="small" for small size', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        initializeShadeRoot({ injector, rootElement, jsxElement: <InputNumber size="small" /> })
+        await flushUpdates()
+        const el = document.querySelector('shade-input-number') as HTMLElement
+        expect(el.getAttribute('data-size')).toBe('small')
+      })
+    })
+
+    it('should set data-size="large" for large size', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        initializeShadeRoot({ injector, rootElement, jsxElement: <InputNumber size="large" /> })
+        await flushUpdates()
+        const el = document.querySelector('shade-input-number') as HTMLElement
+        expect(el.getAttribute('data-size')).toBe('large')
+      })
+    })
+  })
 })

package/src/components/inputs/input-number.tsx

@@ -3,6 +3,7 @@ import { Shade, createComponent } from '@furystack/shades'
 import { buildTransition, cssVariableTheme } from '../../services/css-variable-theme.js'
 import type { Palette } from '../../services/theme-provider-service.js'
 import { ThemeProviderService } from '../../services/theme-provider-service.js'
+import type { ComponentSize } from '../component-size.js'
 import { FormService } from '../form.js'
 
 export type InputNumberProps = {
@@ -82,6 +83,12 @@ export type InputNumberProps = {
    */
   name?: string
 
+  /**
+   * The size of the input.
+   * @default 'medium'
+   */
+  size?: ComponentSize
+
   /**
    * Helper text displayed below the input
    */
@@ -251,6 +258,33 @@ export const InputNumber = Shade<InputNumberProps>({
       opacity: '0.85',
       lineHeight: '1.4',
     },
+
+    // Size: small
+    '&[data-size="small"] label': {
+      padding: `${cssVariableTheme.spacing.xs} ${cssVariableTheme.spacing.sm}`,
+    },
+    '&[data-size="small"] input': {
+      fontSize: cssVariableTheme.typography.fontSize.xs,
+    },
+    '&[data-size="small"] .step-button': {
+      width: '22px',
+      height: '22px',
+      fontSize: cssVariableTheme.typography.fontSize.sm,
+    },
+
+    // Size: large
+    '&[data-size="large"] label': {
+      padding: `${cssVariableTheme.spacing.md} ${cssVariableTheme.spacing.lg}`,
+      fontSize: cssVariableTheme.typography.fontSize.sm,
+    },
+    '&[data-size="large"] input': {
+      fontSize: cssVariableTheme.typography.fontSize.md,
+    },
+    '&[data-size="large"] .step-button': {
+      width: '34px',
+      height: '34px',
+      fontSize: cssVariableTheme.typography.fontSize.lg,
+    },
   },
   render: ({ props, injector, useState, useDisposable, useHostProps, useRef }) => {
     const inputRef = useRef<HTMLInputElement>('formInput')
@@ -274,6 +308,7 @@ export const InputNumber = Shade<InputNumberProps>({
     const primaryColor = themeProvider.theme.palette[props.color || 'primary'].main
     useHostProps({
       'data-variant': props.variant || undefined,
+      'data-size': props.size && props.size !== 'medium' ? props.size : undefined,
       'data-disabled': props.disabled ? '' : undefined,
       style: { '--input-number-color': primaryColor },
     })

package/src/components/inputs/input.spec.tsx

@@ -841,4 +841,46 @@ describe('Input', () => {
       })
     })
   })
+
+  describe('size', () => {
+    it('should not set data-size when size is not specified', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        initializeShadeRoot({ injector, rootElement, jsxElement: <Input /> })
+        await flushUpdates()
+        const input = document.querySelector('shade-input') as HTMLElement
+        expect(input.getAttribute('data-size')).toBeNull()
+      })
+    })
+
+    it('should not set data-size for medium size (default)', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        initializeShadeRoot({ injector, rootElement, jsxElement: <Input size="medium" /> })
+        await flushUpdates()
+        const input = document.querySelector('shade-input') as HTMLElement
+        expect(input.getAttribute('data-size')).toBeNull()
+      })
+    })
+
+    it('should set data-size="small" for small size', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        initializeShadeRoot({ injector, rootElement, jsxElement: <Input size="small" /> })
+        await flushUpdates()
+        const input = document.querySelector('shade-input') as HTMLElement
+        expect(input.getAttribute('data-size')).toBe('small')
+      })
+    })
+
+    it('should set data-size="large" for large size', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        initializeShadeRoot({ injector, rootElement, jsxElement: <Input size="large" /> })
+        await flushUpdates()
+        const input = document.querySelector('shade-input') as HTMLElement
+        expect(input.getAttribute('data-size')).toBe('large')
+      })
+    })
+  })
 })