@furystack/shades-common-components 13.5.0 → 14.0.0

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

@@ -50,7 +50,7 @@ export type PageContainerProps = {
  * ```
  */
 export const PageContainer = Shade<PageContainerProps>({
-  shadowDomName: 'shade-page-container',
+  customElementName: 'shade-page-container',
   elementBase: HTMLDivElement,
   elementBaseName: 'div',
   css: {

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

@@ -56,7 +56,7 @@ export type PageHeaderProps = {
  * ```
  */
 export const PageHeader = Shade<PageHeaderProps>({
-  shadowDomName: 'shade-page-header',
+  customElementName: 'shade-page-header',
   css: {
     display: 'block',
     fontFamily: cssVariableTheme.typography.fontFamily,

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

@@ -92,7 +92,7 @@ const DEFAULT_DRAWER_WIDTH = '240px'
  * ```
  */
 export const PageLayout = Shade<PageLayoutProps>({
-  shadowDomName: 'shade-page-layout',
+  customElementName: 'shade-page-layout',
   css: {
     display: 'block',
     fontFamily: cssVariableTheme.typography.fontFamily,

package/src/components/pagination.tsx

@@ -90,7 +90,7 @@ const defaultColors = {
 }
 
 export const Pagination = Shade<PaginationProps>({
-  shadowDomName: 'shade-pagination',
+  customElementName: 'shade-pagination',
   css: {
     display: 'inline-flex',
     alignItems: 'center',

package/src/components/paper.tsx

@@ -2,7 +2,7 @@ import { Shade, createComponent } from '@furystack/shades'
 import { cssVariableTheme } from '../services/css-variable-theme.js'
 
 export const Paper = Shade<{ elevation?: 0 | 1 | 2 | 3 }>({
-  shadowDomName: 'shade-paper',
+  customElementName: 'shade-paper',
   elementBase: HTMLDivElement,
   elementBaseName: 'div',
   css: {

package/src/components/rating.spec.tsx

@@ -15,7 +15,7 @@ describe('Rating', () => {
     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
 

package/src/components/rating.tsx

@@ -62,7 +62,7 @@ export type RatingProps = {
  * keyboard navigation, and theme integration.
  */
 export const Rating = Shade<RatingProps>({
-  shadowDomName: 'shade-rating',
+  customElementName: 'shade-rating',
   css: {
     display: 'inline-flex',
     fontFamily: cssVariableTheme.typography.fontFamily,

package/src/components/result.tsx

@@ -68,7 +68,7 @@ const defaultTitles: Record<ResultStatus, string> = {
  * Supports success, error, warning, info statuses and common HTTP error codes (403, 404, 500).
  */
 export const Result = Shade<ResultProps>({
-  shadowDomName: 'shade-result',
+  customElementName: 'shade-result',
   css: {
     display: 'flex',
     flexDirection: 'column',

package/src/components/skeleton.tsx

@@ -10,7 +10,7 @@ export type SkeletonProps = {
 }
 
 export const Skeleton = Shade<SkeletonProps>({
-  shadowDomName: 'shade-skeleton',
+  customElementName: 'shade-skeleton',
   render: ({ props, useRef }) => {
     const wrapperRef = useRef<HTMLDivElement>('wrapper')
     const { delay = 1500 } = props

package/src/components/suggest/index.spec.tsx

@@ -68,7 +68,7 @@ describe('Suggest', () => {
   })
 
   describe('rendering', () => {
-    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
         const onSelectSuggestion = vi.fn()

package/src/components/suggest/index.tsx

@@ -41,7 +41,7 @@ const isSyncProps = (props: SuggestProps<unknown>): props is SuggestSyncProps =>
 export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX.Element<any> = Shade<
   SuggestProps<any>
 >({
-  shadowDomName: 'shade-suggest',
+  customElementName: 'shade-suggest',
   css: {
     ...searchableInputStyles,
     fontFamily: cssVariableTheme.typography.fontFamily,

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

@@ -47,7 +47,7 @@ describe('SuggestInput', () => {
     return new SuggestManager<TestEntry>(getEntries, getSuggestionEntry)
   }
 
-  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
       const manager = createManager()

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

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

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

@@ -55,7 +55,7 @@ describe('SuggestionList', () => {
     return new SuggestManager<TestEntry>(getEntries, getSuggestionEntry)
   }
 
-  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
       const manager = createManager()

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

@@ -6,7 +6,7 @@ import type { SuggestManager } from './suggest-manager.js'
 
 export const SuggestionList: <T>(props: { manager: SuggestManager<T> }, children: ChildrenList) => JSX.Element<any> =
   Shade<{ manager: SuggestManager<any> }>({
-    shadowDomName: 'shade-suggest-suggestion-list',
+    customElementName: 'shade-suggest-suggestion-list',
     css: {
       fontFamily: cssVariableTheme.typography.fontFamily,
       '& .suggestion-items-container': {

package/src/components/tabs.tsx

@@ -13,7 +13,7 @@ export type Tab = {
 }
 
 const TabHeader = Shade<{ hash: string }>({
-  shadowDomName: 'shade-tab-header',
+  customElementName: 'shade-tab-header',
   css: {
     padding: `${cssVariableTheme.spacing.md} 40px`,
     cursor: 'pointer',
@@ -74,7 +74,7 @@ export const Tabs = Shade<{
   onAdd?: () => void
   viewTransition?: boolean | ViewTransitionConfig
 }>({
-  shadowDomName: 'shade-tabs',
+  customElementName: 'shade-tabs',
   css: {
     fontFamily: cssVariableTheme.typography.fontFamily,
     width: '100%',

package/src/components/timeline.tsx

@@ -21,7 +21,7 @@ export type TimelineItemProps = PartialElement<HTMLElement> & {
  * Renders a dot, a connector tail, and the item's content (children).
  */
 export const TimelineItem = Shade<TimelineItemProps>({
-  shadowDomName: 'shade-timeline-item',
+  customElementName: 'shade-timeline-item',
   css: {
     display: 'flex',
     position: 'relative',
@@ -157,7 +157,7 @@ export type TimelineProps = PartialElement<HTMLElement> & {
  * Supports left, right, and alternate layout modes with optional pending state.
  */
 export const Timeline = Shade<TimelineProps>({
-  shadowDomName: 'shade-timeline',
+  customElementName: 'shade-timeline',
   css: {
     display: 'flex',
     flexDirection: 'column',

package/src/components/tooltip.tsx

@@ -23,7 +23,7 @@ export type TooltipProps = {
 }
 
 export const Tooltip = Shade<TooltipProps>({
-  shadowDomName: 'shade-tooltip',
+  customElementName: 'shade-tooltip',
   css: {
     position: 'relative',
     fontFamily: cssVariableTheme.typography.fontFamily,

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

@@ -20,7 +20,7 @@ const INDENT_PX = 20
 const EXPAND_ICON_WIDTH = 20
 
 export const TreeItem: <T>(props: TreeItemProps<T>, children: ChildrenList) => JSX.Element<any> = Shade({
-  shadowDomName: 'shade-tree-item',
+  customElementName: 'shade-tree-item',
   css: {
     display: 'flex',
     fontFamily: cssVariableTheme.typography.fontFamily,

package/src/components/tree/tree.tsx

@@ -24,7 +24,7 @@ export type TreeProps<T> = {
 } & PartialElement<HTMLDivElement>
 
 export const Tree: <T>(props: TreeProps<T>, children: ChildrenList) => JSX.Element<any> = Shade({
-  shadowDomName: 'shade-tree',
+  customElementName: 'shade-tree',
   css: {
     display: 'block',
     fontFamily: cssVariableTheme.typography.fontFamily,

package/src/components/typography.tsx

@@ -298,7 +298,7 @@ const shadesByTag = {} as Record<TypographyTag, (props: TypographyProps, childre
 
 for (const [tag, elementBase] of tagConfigs) {
   shadesByTag[tag] = Shade<TypographyProps>({
-    shadowDomName: `shade-typography-${tag}`,
+    customElementName: `shade-typography-${tag}`,
     elementBase,
     elementBaseName: tag,
     css: typographyCss,

package/src/components/wizard/index.spec.tsx

@@ -7,7 +7,7 @@ import type { WizardStepProps } from './index.js'
 import { Wizard } from './index.js'
 
 const Step1 = Shade<WizardStepProps>({
-  shadowDomName: 'wizard-test-step-1',
+  customElementName: 'wizard-test-step-1',
   render: ({ props }) => (
     <div className="wizard-step" data-step-name="step1">
       <span className="step-info">
@@ -25,7 +25,7 @@ const Step1 = Shade<WizardStepProps>({
 })
 
 const Step2 = Shade<WizardStepProps>({
-  shadowDomName: 'wizard-test-step-2',
+  customElementName: 'wizard-test-step-2',
   render: ({ props }) => (
     <div className="wizard-step" data-step-name="step2">
       <span className="step-info">
@@ -43,7 +43,7 @@ const Step2 = Shade<WizardStepProps>({
 })
 
 const Step3 = Shade<WizardStepProps>({
-  shadowDomName: 'wizard-test-step-3',
+  customElementName: 'wizard-test-step-3',
   render: ({ props }) => (
     <div className="wizard-step" data-step-name="step3">
       <span className="step-info">

package/src/components/wizard/index.tsx

@@ -43,7 +43,7 @@ export interface WizardProps {
 }
 
 export const Wizard = Shade<WizardProps>({
-  shadowDomName: 'shades-wizard',
+  customElementName: 'shades-wizard',
   css: {
     fontFamily: cssVariableTheme.typography.fontFamily,
     '& .wizard-container': {