guide

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@because/forge",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "main": "src/index.tsx",
   "module": "src/index.tsx",

src/index.tsx

@@ -286,14 +286,18 @@ export function define(nameOrDef: string | TagDef, defIfNamed?: TagDef) {
   if (styles[`.${name}`]) throw `${name} is already defined! Must use unique names.`
   registerStyles(name, def)
 
+  const currentProps: Record<string, any> = {}
+  const Root = makeComponent(name, def, currentProps)
+
   return (props: Record<string, any>) => {
-    const parts: Record<string, Function> = {}
+    for (const key in currentProps) delete currentProps[key]
+    Object.assign(currentProps, props)
+    const parts: Record<string, Function> = { Root }
 
     for (const [part] of Object.entries(def.parts ?? {}))
       parts[part] = makeComponent(name, def, props, part)
 
-    parts.Root = makeComponent(name, def, props)
-    return def.render?.({ props, parts }) ?? <parts.Root {...props}>{props.children}</parts.Root>
+    return def.render?.({ props, parts }) ?? <Root {...props}>{props.children}</Root>
   }
 }
 

src/types.ts

@@ -31,7 +31,24 @@ export type TagDef = {
   rowGap?: number | string
   gap?: number | string
 
+  // multi-column layout
+  columns?: string
+  columnCount?: number | 'auto'
+  columnWidth?: number | string
+  columnRule?: string
+  columnRuleColor?: string
+  columnRuleStyle?: 'none' | 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden'
+  columnRuleWidth?: number | string
+  columnFill?: 'auto' | 'balance' | 'balance-all'
+  columnSpan?: 'none' | 'all'
+
   contain?: 'none' | 'strict' | 'content' | 'size' | 'layout' | 'style' | 'paint'
+  contentVisibility?: 'visible' | 'hidden' | 'auto'
+
+  // container queries
+  container?: string
+  containerType?: 'normal' | 'size' | 'inline-size'
+  containerName?: string
 
   display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'flow-root' | 'none' | 'contents' | 'table' | 'table-row' | 'table-cell'
 
@@ -133,6 +150,14 @@ export type TagDef = {
 
   // visual/theme-related
   animation?: string
+  animationName?: string
+  animationDuration?: string
+  animationTimingFunction?: string
+  animationDelay?: string
+  animationIterationCount?: number | 'infinite'
+  animationDirection?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse'
+  animationFillMode?: 'none' | 'forwards' | 'backwards' | 'both'
+  animationPlayState?: 'running' | 'paused'
   appearance?: 'none' | 'auto' | 'button' | 'textfield' | 'searchfield' | 'textarea' | 'checkbox' | 'radio'
   backdropFilter?: string
 
@@ -170,6 +195,12 @@ export type TagDef = {
   borderTopStyle?: 'none' | 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden'
   borderTopWidth?: number | string
   borderWidth?: number | string
+  borderImage?: string
+  borderImageSource?: string
+  borderImageSlice?: number | string
+  borderImageWidth?: number | string
+  borderImageOutset?: number | string
+  borderImageRepeat?: 'stretch' | 'repeat' | 'round' | 'space' | string
 
   // table-ish
   borderCollapse?: 'collapse' | 'separate'
@@ -182,10 +213,14 @@ export type TagDef = {
   clipPath?: string
 
   color?: string
+  colorScheme?: 'normal' | 'light' | 'dark' | 'light dark' | string
   content?: string
+  counterReset?: string
+  counterIncrement?: string
   cursor?: 'auto' | 'default' | 'none' | 'context-menu' | 'help' | 'pointer' | 'progress' | 'wait' | 'cell' | 'crosshair' | 'text' | 'vertical-text' | 'alias' | 'copy' | 'move' | 'no-drop' | 'not-allowed' | 'grab' | 'grabbing' | 'e-resize' | 'n-resize' | 'ne-resize' | 'nw-resize' | 's-resize' | 'se-resize' | 'sw-resize' | 'w-resize' | 'ew-resize' | 'ns-resize' | 'nesw-resize' | 'nwse-resize' | 'col-resize' | 'row-resize' | 'all-scroll' | 'zoom-in' | 'zoom-out'
 
   filter?: string
+  imageRendering?: 'auto' | 'crisp-edges' | 'pixelated'
 
   font?: string
   fontFamily?: string
@@ -208,6 +243,7 @@ export type TagDef = {
   mixBlendMode?: 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity'
 
   objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
+  objectPosition?: string
 
   opacity?: number
 
@@ -247,15 +283,37 @@ export type TagDef = {
   wordBreak?: 'normal' | 'break-all' | 'keep-all' | 'break-word'
   wordSpacing?: number | string
   wordWrap?: 'normal' | 'break-word' | 'anywhere'
+  textRendering?: 'auto' | 'optimizeSpeed' | 'optimizeLegibility' | 'geometricPrecision'
+  textWrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty' | 'stable'
+
+  // CSS shapes
+  shapeOutside?: string
+  shapeMargin?: number | string
+  shapeImageThreshold?: number
+
+  // fragmentation / breaks
+  breakBefore?: 'auto' | 'avoid' | 'always' | 'all' | 'avoid-page' | 'page' | 'left' | 'right' | 'recto' | 'verso' | 'avoid-column' | 'column' | 'avoid-region' | 'region'
+  breakAfter?: 'auto' | 'avoid' | 'always' | 'all' | 'avoid-page' | 'page' | 'left' | 'right' | 'recto' | 'verso' | 'avoid-column' | 'column' | 'avoid-region' | 'region'
+  breakInside?: 'auto' | 'avoid' | 'avoid-page' | 'avoid-column' | 'avoid-region'
+  orphans?: number
+  widows?: number
 
   transform?: string
   transformOrigin?: string
   transformStyle?: 'flat' | 'preserve-3d'
+  transformBox?: 'content-box' | 'border-box' | 'fill-box' | 'stroke-box' | 'view-box'
+  rotate?: string
+  scale?: string | number
+  translate?: string
   perspective?: number | string
   perspectiveOrigin?: string
   backfaceVisibility?: 'visible' | 'hidden'
 
   transition?: string
+  transitionProperty?: string
+  transitionDuration?: string
+  transitionTimingFunction?: string
+  transitionDelay?: string
   visibility?: 'visible' | 'hidden' | 'collapse'
   willChange?: 'auto' | 'scroll-position' | 'contents'
 
@@ -300,6 +358,8 @@ export const UnitlessProps = new Set([
   'opacity',
   'order',
   'orphans',
+  'scale',
+  'shapeImageThreshold',
   'widows',
   'zIndex'
 ])